2047 lines
51 KiB
Vue
2047 lines
51 KiB
Vue
<template>
|
||
<view class="index">
|
||
<view class="header acea-row row-column row-left" style="position: absolute;left: 0;right: 0;"
|
||
:style="{top:statusBarHeight+'px'}">
|
||
|
||
<view class="acea-row row-middle row-between" style="position: relative;z-index: 1;">
|
||
<view class="avatar-box acea-row row-middle">
|
||
<!-- 2023/4/13 隐藏，下方事件对应avatar-box-->
|
||
<!-- @click="avatarClick"-->
|
||
<!-- <image v-if="userInfo&&userInfo.avatar" class="avatar-img" :src="userInfo.avatar"></image>-->
|
||
<!-- <image v-else class="avatar-img" :src="webUrl+'/20230304135955831196.png'"></image>-->
|
||
<!-- <view class="acea-row row-middle"-->
|
||
<!-- style="background: #1E131B;border: 1px solid #FFFFFF;border-radius: 0 28rpx 28rpx 0;padding: 4rpx 10rpx 4rpx 20rpx;margin-left: -10rpx;height: 40rpx;box-sizing: content-box;">-->
|
||
<!-- <text style="" class="nickname-text">{{ userInfo.nickname || '' }}</text>-->
|
||
<!-- </view>-->
|
||
</view>
|
||
<view style="position: relative;color: #FFF;margin-left: 20rpx;margin-right: 20rpx;"
|
||
class="acea-row row-middle">
|
||
<image style="width: 36rpx;height: 36rpx;" :src="webUrl+'/20210616184302174394.png'" mode="">
|
||
</image>
|
||
<view style="margin-left: 10rpx;font-size: 28rpx;color: #fff;">客服</view>
|
||
<button class="cus-btn" open-type="contact"></button>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<!-- <view class="fixed-header-box"></view> -->
|
||
<view class="slider-banner" style="position: relative;">
|
||
<swiper style="height: 680rpx;" indicatorDots="true" indicator-color="rgba(255, 255, 255, .3)"
|
||
indicator-active-color="#ffffff" v-if="banner.length > 0" autoplay circular>
|
||
<block v-for="(item, bannerIndex) in banner" :key="bannerIndex">
|
||
<swiper-item>
|
||
<view @click="goRoll(item)" class="swiper-item">
|
||
<image :src="item.pic"/>
|
||
</view>
|
||
</swiper-item>
|
||
</block>
|
||
</swiper>
|
||
|
||
<view class="acea-row row-between row-middle"
|
||
style="flex-wrap: nowrap;position: absolute;left: 0;bottom: 0;right: 0;background: rgba(0,0,0,0.6);padding: 10rpx 32rpx;">
|
||
<view class="news acea-row row-between-wrapper"
|
||
style="box-shadow: none !important;flex-grow: 1;flex-wrap: nowrap;background:transparent !important;border: none !important;margin: 0 30rpx 0 0 !important;padding: 0 !important;height: auto !important;">
|
||
|
||
<!-- <view class="notice acea-row row-middle" style="color: #fff;font-size: 24rpx;margin-right: 10rpx !important;">
|
||
欢迎新加入会员:
|
||
</view> -->
|
||
<view class="swiper-no-swiping new-banner" style="height: 34rpx !important;text-align: right;">
|
||
<swiper class="swiper-wrapper" style="height: 34rpx !important;" v-if="userList.length > 0" :interval="3000"
|
||
:indicator-dots="false" autoplay circular vertical>
|
||
<block v-for="(item, userIndex) in userList" :key="userIndex">
|
||
<swiper-item class="swiper-slide" style="height: 34rpx !important;">
|
||
<view class="swiper-item acea-row row-middle" style="height: 34rpx !important;">
|
||
<view class="newsTitle line1"
|
||
style="color: #fff !important;font-size: 24rpx;text-align: left !important;">
|
||
恭喜{{ item.nickname }} 抽中奖品{{ item.prizeName }}
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</block>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="acea-row row-middle row-between" style="flex-shrink: 0;flex-wrap: nowrap;margin-right: 30rpx;">
|
||
<view class="" style="color: #fff;font-size: 24rpx;margin-right: 10rpx;">香道滇会员总数:</view>
|
||
<view class="" style="color: #fff;font-size: 24rpx;text-align: right;">{{userTotal}}</view>
|
||
</view> -->
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="acea-row row-middle row-between" style="padding-top: 20rpx;background: #fff;">
|
||
<view @click="goGoodSearch()" class="search acea-row row-middle" style="flex-grow: 1;">
|
||
<text class="iconfont icon-xiazai5" style="color: #acacac;"></text>
|
||
搜索商品
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 快捷跳转块v4 -->
|
||
<view class="fast-nav x-start">
|
||
<view class="item y-f" v-for="(item,index) in menus" :key="index" @click="$global.commonJump(item.uniapp_url)">
|
||
<image :src="item.pic" mode="scaleToFill"></image>
|
||
<view class="one-t">{{ item.name }}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 快捷跳转块v4end -->
|
||
<view style="padding-bottom:20rpx;background: #fff;">
|
||
<!-- 转盘-->
|
||
<!-- <image class="home-luck" :src="`${webUrl}/20220519145845818243.png`" mode="scaleToFill" @click="goLuck"></image>-->
|
||
|
||
<!-- 通知开始 -->
|
||
<view v-if="showNotice" class="news acea-row row-between-wrapper" style="margin-top: 20rpx;margin-bottom: 20rpx;">
|
||
<view class="notice acea-row row-middle">
|
||
<image style="width: 102rpx;height:64rpx" :src="webUrl+'/20210609100702342165.png'" mode=""></image>
|
||
</view>
|
||
<view class="swiper-no-swiping new-banner">
|
||
<swiper class="swiper-wrapper" v-if="roll.length > 0" :indicator-dots="false" autoplay circular vertical>
|
||
<block v-for="(item, rollIndex) in roll" :key="rollIndex">
|
||
<swiper-item class="swiper-slide">
|
||
<view @click="goRoll(item)" class="swiper-item acea-row row-between-wrapper">
|
||
<view class="text acea-row row-between-wrapper">
|
||
<view class="label" v-if="item.show === '是'">最新</view>
|
||
<view class="newsTitle line1">{{ item.info }}</view>
|
||
</view>
|
||
<!-- <view class="iconfont icon-xiangyou"></view> -->
|
||
</view>
|
||
</swiper-item>
|
||
</block>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 伴手礼精品 -->
|
||
<!-- <view class="wrapper hot" v-if="likeInfo.length > 0">-->
|
||
<!-- <view class="title acea-row row-between row-middle">-->
|
||
<!-- <view class="text acea-row row-left row-middle" style="">-->
|
||
<!-- <image style="width: 288rpx;height: 46rpx;" :src="webUrl+'/20220521111639280569.png'" mode="scaleToFill">-->
|
||
<!-- </image>-->
|
||
<!-- </view>-->
|
||
<!-- <view class="sub-title" style="flex-wrap: nowrap;" @click="goMoreBoutiqueGift()">-->
|
||
<!-- <image style="width: 68rpx;height: 34rpx;" :src="webUrl+'/20210609100740164364.png'" mode="scaleToFill">-->
|
||
<!-- </image>-->
|
||
<!-- </view>-->
|
||
<!-- </view>-->
|
||
|
||
<!-- <view class="hotGoodsList">-->
|
||
<!-- <ls-swiper @clickItem="clickItem()" :list="likeInfo" :slotsMode="true" imgKey="image" :interval="3000"-->
|
||
<!-- :duration='4000' :dots='false' :crown="true" :loop="true" :shadow='true' :autoplay='false' height='200'-->
|
||
<!-- :previousMargin="160" :nextMargin="160" imgRadius="5">-->
|
||
<!-- <template v-slot="{data}">-->
|
||
<!-- <view class="acea-row row-column my-swiper-item">-->
|
||
<!-- <view class="acea-row row-middle" style="position: relative;">-->
|
||
<!-- <image style="width: 420rpx;height: 260rpx;" :src="data.image" lazy-load mode="scaleToFill"></image>-->
|
||
<!-- <image-->
|
||
<!-- style="width: 168rpx;height: 44rpx;position: absolute;top: 0;left: 0;border-top-left-radius: 12rpx;z-index: 2;"-->
|
||
<!-- src="http://admin-api.xdd618.com/file/pic/20220519145858134058.png" mode="scaleToFill"></image>-->
|
||
<!-- </view>-->
|
||
<!-- <view class="acea-row row-column" style="padding: 10rpx;">-->
|
||
<!-- <view class="ac" style="color: #333333;font-size: 24rpx;margin-bottom: 8rpx;">-->
|
||
<!-- {{data.storeName}}-->
|
||
<!-- </view>-->
|
||
<!-- <view v-if="data.vipPrice && data.vipPrice > 0" class="money x-bc" style="color: #FF564A;">-->
|
||
<!-- <text style="font-size: 26rpx;">￥{{data.vipPrice}}</text>-->
|
||
<!-- <text class="btn-pay">立即抢购</text>-->
|
||
<!-- </view>-->
|
||
<!-- <view v-else class="money x-bc" style="color: #FF564A;">-->
|
||
<!-- <text style="font-size: 26rpx;">￥{{data.price}}</text>-->
|
||
<!-- <text class="btn-pay">立即抢购</text>-->
|
||
<!-- </view>-->
|
||
<!-- </view>-->
|
||
<!-- </view>-->
|
||
<!-- </template>-->
|
||
<!-- </ls-swiper>-->
|
||
<!-- </view>-->
|
||
|
||
<!-- </view>-->
|
||
<!-- 伴手礼精品end -->
|
||
|
||
<!-- v4 预售专区开始 -->
|
||
<view class="pre-sale" v-if="preSaleList.length">
|
||
<image class="bg" :src="webUrl+'/20220519145831955075.png'" mode="scaleToFill" @click="goPreSale"></image>
|
||
<view class="list">
|
||
<view class="item" v-for="(item,index) in preSaleList" :key="index" @click="goGoodsConByProductID(item,'pre')">
|
||
<image :src="item.image" mode="scaleToFill"></image>
|
||
<view style="text-align: center;">{{ item.title }}</view>
|
||
<text>￥{{ item.price }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- v4 预售专区结束 -->
|
||
|
||
<!-- v4 限时秒杀开始 -->
|
||
<!-- <view class="seckill" v-if="seckillList.length">-->
|
||
<!-- <view class="header acea-row row-between">-->
|
||
<!-- <view class="acea-row">-->
|
||
<!-- <view>-->
|
||
<!-- <view class="title">限时秒杀</view>-->
|
||
<!-- <view class="sub-title">尖货限时抢</view>-->
|
||
<!-- </view>-->
|
||
<!-- <view class="count-box">-->
|
||
<!-- <count-down :isDay="false" isSecond :dayText="false" :hourText="':'" :minuteText="':'" :secondText="false"-->
|
||
<!-- :datatime="seckillTime.stop"></count-down>-->
|
||
<!-- </view>-->
|
||
<!-- </view>-->
|
||
|
||
<!-- <view class="more" @click="goSeckill">查看更多-->
|
||
<!-- <uni-icons type="arrowright" color="#7C7C7C" size="14"/>-->
|
||
<!-- </view>-->
|
||
<!-- </view>-->
|
||
|
||
<!-- <view class="list">-->
|
||
<!-- <view class="item" v-for="(item,index) in seckillList" :key="index" @click="goGoodsConByProductID(item,'kill')">-->
|
||
<!-- <image class="left-img" :src="item.image" mode="scaleToFill"></image>-->
|
||
<!-- <view class="content">-->
|
||
<!-- <view class="title">{{ item.title }}</view>-->
|
||
<!-- <view class="item-bottom">-->
|
||
<!-- <view class="price-line acea-row row-between">-->
|
||
<!-- <text class="price">￥{{ item.price }}</text>-->
|
||
<!-- <image class="cart" :src="webUrl+'/20220521111716109789.png'" mode="scaleToFill"></image>-->
|
||
<!-- </view>-->
|
||
<!-- <view class="desc-line">-->
|
||
<!-- <image class="fire-gray" :src="webUrl+'/20220214125642215597.png'" mode="scaleToFill"></image>-->
|
||
<!-- <text class="sold">{{ item.sales }}人已购买</text>-->
|
||
<!-- <!– <view class="space"></view>-->
|
||
<!-- <text>{{item.merName}}</text> –>-->
|
||
<!-- </view>-->
|
||
<!-- </view>-->
|
||
<!-- </view>-->
|
||
<!-- </view>-->
|
||
<!-- </view>-->
|
||
<!-- </view>-->
|
||
<!-- v4 限时秒杀结束 -->
|
||
|
||
<!-- v4 每天特价开始 -->
|
||
<view class="special-offer" v-if="dailyGoodsList.length">
|
||
<view class="header flex">
|
||
<view class="flex" style="align-items: center;">
|
||
<text class="title">每天特价</text>
|
||
<view class="date-box flex">
|
||
<image class="icon-date" :src="webUrl+'/20220521111703338325.png'" mode="scaleToFill"></image>
|
||
<view class="day">
|
||
<text>{{ date }}</text>
|
||
DAY
|
||
</view>
|
||
<view class="month">{{ month }}月</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="more" @click="goOffer">查看更多
|
||
<uni-icons type="arrowright" color="#7C7C7C" size="14"/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="list flex">
|
||
<view class="item flex" v-for="(item,index) in dailyGoodsList" :key="index"
|
||
@click="goGoodsConByProductID(item,'day')">
|
||
<image class="top-img" :src="item.image" mode="scaleToFill"></image>
|
||
|
||
<view class="content">
|
||
<view class="title one-t">{{ item.title }}</view>
|
||
<view class="price flex">
|
||
<text class="red">￥{{ item.price }}</text>
|
||
<text class="gray"
|
||
v-if="item.productPrice">￥{{ item.productPrice }}
|
||
</text>
|
||
</view>
|
||
<!-- <view class="shop flex"><text>{{item.merName}}</text>
|
||
<image class="icon-fire" :src="webUrl+'/20221118092713277343.png'" mode="scaleToFill"></image>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- v4 每天特价结束 -->
|
||
|
||
<!-- 2022/6/20 add 尖货推荐 special-offer-->
|
||
<view class="bast-box">
|
||
<view style="padding: 0 32rpx">
|
||
<image class="bast-title" :src="webUrl+'/20230407111908318221.png'" mode="scaleToFill"/>
|
||
</view>
|
||
<view class="list flex" v-if="bastList.length">
|
||
<custom-waterfalls-flow :value="bastList" imageKey="image">
|
||
<view class="item flex" v-for="(item,index) in bastList" :key="index" slot="slot{{index}}">
|
||
<template v-if="item.storeName==='swiper'">
|
||
<swiper class="item bannar-swiper" autoplay circular>
|
||
<swiper-item v-for="swipe in bannarList" :key="swipe">
|
||
<image :src="swipe.pic" mode="aspectFit" @click="goGoodsConByProductID(swipe)"/>
|
||
</swiper-item>
|
||
</swiper>
|
||
</template>
|
||
<template v-else>
|
||
<image class="top-img" :src="item.image" mode="scaleToFill" @click="goGoodsCon(item)"></image>
|
||
<view class="content" @click="goGoodsCon(item)">
|
||
<view class="title more-t">{{ item.storeName }}</view>
|
||
<view class="price flex">
|
||
<text class="red">￥{{ item.price }}</text>
|
||
<text class="gray"
|
||
v-if="item.productPrice">￥{{ item.productPrice }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</custom-waterfalls-flow>
|
||
</view>
|
||
</view>
|
||
<!-- 尖货推荐结束 -->
|
||
|
||
<!-- 最新通知消息开始 -->
|
||
<uni-popup ref="popup" type="center">
|
||
<view v-if="unReadMessageInfo" class="acea-row row-column row-middle"
|
||
style="position: relative;background-color: #fff;width: 440rpx;border-radius: 20rpx;">
|
||
<view class="msg_title">
|
||
{{ unReadMessageInfo.noticeTitle }}
|
||
</view>
|
||
<view class="msg_content" v-html="unReadMessageInfo.noticeContent"></view>
|
||
<view class="msg_line"></view>
|
||
<view class="msg_btn" @click="msgConfirm">我知道了</view>
|
||
</view>
|
||
</uni-popup>
|
||
<!-- 通知消息结束 -->
|
||
|
||
<Coupon-window :coupon-list="couponList" v-if="showCoupon" @checked="couponClose" @close="couponClose">
|
||
</Coupon-window>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapActions, mapGetters} from 'vuex';
|
||
import {formatDateTime} from "@/utils";
|
||
import {handleUrlParam} from '@/utils/index';
|
||
import config from '@/utils/mapConfig';
|
||
|
||
import PromotionGood from '@/components/PromotionGood';
|
||
import CouponWindow from '@/components/CouponWindow';
|
||
import CountDown from "@/components/CountDown";
|
||
import hxNavbar from "@/components/hx-navbar/hx-navbar.vue"
|
||
import imgBox from '@/components/imageTypeSet/imagebox.vue'
|
||
import LsSwiper from '@/components//ls-swiper/index.vue'
|
||
|
||
import {noticeDetail, noticeList} from "@/api/user";
|
||
import {getHomeData, getShareImage, getWxLiveList, wxLiveSynchro} from '@/api/public';
|
||
import {getHomeHotelList} from "@/api/inn.js";
|
||
import {getProducts} from "@/api/store";
|
||
import {sharpBannar} from "@/api/goods";
|
||
import NP from "number-precision";
|
||
|
||
const HAS_COUPON_WINDOW = 'has_coupon_window';
|
||
var that;
|
||
export default {
|
||
name: 'Index',
|
||
components: {
|
||
LsSwiper,
|
||
imgBox,
|
||
PromotionGood,
|
||
CouponWindow,
|
||
CountDown,
|
||
hxNavbar
|
||
},
|
||
computed: mapGetters(["userInfo", 'isLogin']),
|
||
props: {},
|
||
data: function () {
|
||
return {
|
||
userTotal: '', //总会员数
|
||
currentIndex: 0,
|
||
speed: 200,
|
||
seriesWidth: 400,
|
||
duration: 60000,
|
||
unReadMessageInfo: null,
|
||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||
showNotice: true, //是否显示通知
|
||
isLiving: true, //是否正在直播
|
||
showCoupon: false,
|
||
viewHeight: (750 * 3 / 4.0),
|
||
bslGoodsHeight: 750 * 3 / 4.0 + 'rpx',
|
||
hotGoodsColumnWidth: '325rpx',
|
||
bgImgHeight: '20px',
|
||
logoUrl: '',
|
||
innArray: [],
|
||
shopArray: [],
|
||
restaurantArray: [],
|
||
banner: [],
|
||
menus: [],
|
||
roll: [],
|
||
cityName: "",
|
||
activity: [],
|
||
groupGoods: [],
|
||
activityOne: {},
|
||
bastList: [],
|
||
firstList: [],
|
||
userList: [],
|
||
newGoods: null,
|
||
companyName: '',
|
||
companyAddress: '',
|
||
companyTel: '',
|
||
companyLogo: '',
|
||
info: {
|
||
fastList: [],
|
||
bastBanner: [],
|
||
bastList: []
|
||
},
|
||
likeInfo: [],
|
||
lovely: [],
|
||
benefit: [],
|
||
couponList: [],
|
||
swiperOption: {
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
clickable: true
|
||
},
|
||
autoplay: {
|
||
disableOnInteraction: false,
|
||
delay: 2000
|
||
},
|
||
loop: true,
|
||
speed: 1000,
|
||
observer: true,
|
||
observeParents: true
|
||
},
|
||
swiperRoll: {
|
||
direction: 'vertical',
|
||
autoplay: {
|
||
disableOnInteraction: false,
|
||
delay: 2000
|
||
},
|
||
loop: true,
|
||
speed: 1000,
|
||
observer: true,
|
||
observeParents: true
|
||
},
|
||
swiperScroll: {
|
||
freeMode: true,
|
||
freeModeMomentum: false,
|
||
slidesPerView: 'auto',
|
||
observer: true,
|
||
observeParents: true
|
||
},
|
||
swiperBoutique: {
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
clickable: true
|
||
},
|
||
autoplay: {
|
||
disableOnInteraction: false,
|
||
delay: 2000
|
||
},
|
||
loop: true,
|
||
speed: 1000,
|
||
observer: true,
|
||
observeParents: true
|
||
},
|
||
swiperProducts: {
|
||
freeMode: true,
|
||
freeModeMomentum: false,
|
||
slidesPerView: 'auto',
|
||
observer: true,
|
||
observeParents: true
|
||
},
|
||
liveList: [],
|
||
broadcastStyle2: {
|
||
speed: 100,
|
||
font_size: "32", //字体大小(rpx)
|
||
text_color: "#333", //字体颜色
|
||
back_color: "red", //背景色
|
||
},
|
||
bslImglist: [],
|
||
statusBarHeight: 64,
|
||
dailyGoodsList: [], // 每日特价
|
||
preSaleList: [], // 预售商品
|
||
seckillList: [], // 秒杀商品
|
||
seckillTime: {}, // 秒杀场次
|
||
month: 0, // 每日特价:月
|
||
date: 0, // 每日特价：日
|
||
bannarList: [], // 尖货推荐横幅
|
||
shareAppImg: "", // 发送给朋友
|
||
};
|
||
},
|
||
onLoad: function (options) {
|
||
that = this;
|
||
getShareImage().then(({data}) => this.shareAppImg = data);
|
||
uni.getSystemInfo({
|
||
success: (e) => {
|
||
// this.compareVersion(e.SDKVersion, '2.5.0')
|
||
let statusBar = 0;
|
||
let customBar = 0;
|
||
|
||
// #ifdef MP
|
||
statusBar = e.statusBarHeight
|
||
customBar = e.statusBarHeight + 45
|
||
if (e.platform === 'android') {
|
||
//this.$store.commit('SET_SYSTEM_IOSANDROID', false)
|
||
customBar = e.statusBarHeight + 50
|
||
}
|
||
// #endif
|
||
|
||
|
||
// #ifdef MP-WEIXIN
|
||
statusBar = e.statusBarHeight
|
||
// @ts-ignore
|
||
//uni.getMenuButtonBoundingClientRect();
|
||
const custom = uni.getMenuButtonBoundingClientRect()
|
||
customBar = custom.bottom + custom.top - e.statusBarHeight
|
||
// #endif
|
||
|
||
|
||
// #ifdef MP-ALIPAY
|
||
statusBar = e.statusBarHeight
|
||
customBar = e.statusBarHeight + e.titleBarHeight
|
||
// #endif
|
||
|
||
|
||
// #ifdef APP-PLUS
|
||
statusBar = e.statusBarHeight
|
||
customBar = e.statusBarHeight + 45
|
||
// #endif
|
||
|
||
|
||
// #ifdef H5
|
||
statusBar = 0
|
||
customBar = e.statusBarHeight + 45
|
||
// #endif
|
||
|
||
// 这里你可以自己决定存放方式，建议放在store中，因为store是实时变化的
|
||
// this.$store.commit('SET_STATUS_BAR', statusBar)
|
||
// this.$store.commit('SET_CUSTOM_BAR', customBar)
|
||
// this.$store.commit('SET_SYSTEM_INFO', e)
|
||
that.statusBarHeight = customBar;
|
||
//两列商品宽度
|
||
that.hotGoodsColumnWidth = (e.screenWidth - uni.upx2px(90)) / 2 + 'px';
|
||
//that.bslGoodsHeight = (e.screenWidth - uni.upx2px(90))/2*3/4+'px';
|
||
//状态栏图片高度
|
||
that.bgImgHeight = statusBar + 'px';
|
||
|
||
}
|
||
});
|
||
},
|
||
onShow: function () {
|
||
const today = new Date();
|
||
this.month = today.getMonth() + 1;
|
||
this.date = today.getDate();
|
||
|
||
//如果已经登录获取用户信息
|
||
if (this.isLogin) {
|
||
this.$store.dispatch("getUser", true);
|
||
|
||
//获取最新一条消息
|
||
this.getUnreadMsgList();
|
||
}
|
||
|
||
//先同步后获取直播间列表
|
||
//this.getLiveList();
|
||
wxLiveSynchro().then(res => {
|
||
// this.getLiveList();
|
||
}).catch(err => {
|
||
// this.getLiveList();
|
||
})
|
||
|
||
//定位
|
||
this.getCurAddress();
|
||
this.init();
|
||
//获取团购商品
|
||
this.getGroupGoods();
|
||
},
|
||
onShareAppMessage(res) {
|
||
return {
|
||
title: '云南香道滇官方商城',
|
||
path: '/pages/home/index',
|
||
imageUrl: this.shareAppImg
|
||
}
|
||
},
|
||
methods: {
|
||
...mapActions(["setLocation"]),
|
||
innOpenDateString(str, format) {
|
||
return formatDateTime(str, format);
|
||
},
|
||
init() {
|
||
let that = this;
|
||
|
||
sharpBannar().then(({data}) => {
|
||
this.bannarList = data.banner
|
||
|
||
uni.showLoading({
|
||
title: '加载中'
|
||
});
|
||
getHomeData().then(res => {
|
||
that.logoUrl = res.data.logoUrl;
|
||
that.$set(that, 'banner', res.data.banner);
|
||
that.$set(that, 'menus', res.data.menus);
|
||
that.$set(that, 'roll', res.data.roll);
|
||
that.$set(that, 'userList', res.data.lotteryRecord); //滚动会员信息
|
||
that.$set(that, 'userTotal', res.data.userTotal); //会员总数信息
|
||
//that.$set(that, 'activityOne', activityOne);
|
||
that.$set(that, 'info', res.data.info);
|
||
that.$set(that, 'firstList', res.data.firstList.map((item) => {
|
||
item.price = that.$force2Decimal(item.price);
|
||
//如果已经登录获取用户信息
|
||
if (that.$store.getters.token && that.userInfo) {
|
||
var p = NP.times(item.price, NP.divide(parseFloat(that.userInfo.discount),
|
||
100))
|
||
item.vipPrice = that.$force2Decimal(p);
|
||
}
|
||
return item;
|
||
}));
|
||
|
||
if (that.firstList.length > 0) {
|
||
that.newGoods = that.firstList[0];
|
||
}
|
||
|
||
that.$set(that, 'likeInfo', res.data.likeInfo.map((item) => {
|
||
item.price = that.$force2Decimal(item.price);
|
||
item.otPrice = that.$force2Decimal(item.otPrice);
|
||
//如果已经登录获取用户信息
|
||
if (that.$store.getters.token && that.userInfo) {
|
||
var p = NP.times(item.price, NP.divide(parseFloat(that.userInfo.discount),
|
||
100))
|
||
item.vipPrice = that.$force2Decimal(p);
|
||
}
|
||
return item;
|
||
}));
|
||
|
||
setTimeout(() => {
|
||
//伴手礼图片
|
||
var imgs = [];
|
||
that.likeInfo.forEach((item) => {
|
||
imgs.push(item.image);
|
||
})
|
||
// that.bslImglist = imgs;
|
||
that.$set(that, 'bslImglist', imgs);
|
||
|
||
that.seriesWidth = 770 * imgs.length - 20;
|
||
that.duration = Math.floor(that.seriesWidth / that.speed * 1000);
|
||
}, 1)
|
||
|
||
// 尖货推荐
|
||
let temp = {
|
||
storeName: "swiper",
|
||
image: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
|
||
bannarList: that.bannarList
|
||
}
|
||
res.data.bastList.unshift(temp);
|
||
for (let i = 0; i < res.data.bastList.length; i++) {
|
||
res.data.bastList[i].hide = true;
|
||
}
|
||
that.$set(that, 'bastList', res.data.bastList);
|
||
that.$set(that, 'lovely', res.data.lovely);
|
||
that.$set(that, 'benefit', res.data.benefit);
|
||
that.$set(that, 'couponList', res.data.couponList);
|
||
|
||
that.$set(that, 'companyName', res.data.companyName);
|
||
that.$set(that, 'companyAddress', res.data.companyAddress);
|
||
that.$set(that, 'companyTel', res.data.companyTel);
|
||
that.$set(that, 'companyLogo', res.data.companyLogo);
|
||
|
||
that.$set(that, 'dailyGoodsList', res.data.dailyGoodsList);
|
||
that.$set(that, 'preSaleList', res.data.preSaleList);
|
||
that.$set(that, 'seckillList', res.data.seckillList);
|
||
that.$set(that, 'seckillTime', res.data.seckillTime);
|
||
|
||
uni.hideLoading();
|
||
});
|
||
});
|
||
},
|
||
getGroupGoods() {
|
||
var params = {
|
||
page: 1,
|
||
limit: 1,
|
||
sid: 19, //团购id=19
|
||
news: 0,
|
||
priceOrder: "",
|
||
salesOrder: ""
|
||
}
|
||
var _this = this;
|
||
|
||
getProducts(params)
|
||
.then(res => {
|
||
_this.groupGoods = res.data;
|
||
})
|
||
.catch(err => {
|
||
|
||
})
|
||
},
|
||
clickItem(data) {
|
||
this.goGoodsCon(data);
|
||
},
|
||
swiperChange(e) {
|
||
this.currentIndex = e.detail.current;
|
||
},
|
||
goMoreNewGoods: function () {
|
||
//跳转到分类
|
||
this.$yrouter.switchTab('/pages/shop/GoodsClass/index');
|
||
},
|
||
msgConfirm: function () {
|
||
that.$refs.popup.close();
|
||
},
|
||
//获取当前定位地址
|
||
getCurAddress() {
|
||
let that = this;
|
||
uni.getLocation({
|
||
type: 'wgs84',
|
||
success: function (res) {
|
||
let latitude = res.latitude;
|
||
let longitude = res.longitude;
|
||
|
||
that.setLocation({
|
||
'latitude': latitude + '',
|
||
'longitude': longitude + ''
|
||
});
|
||
|
||
// #ifdef H5
|
||
Vue.jsonp(
|
||
'https://apis.map.qq.com/ws/geocoder/v1/?location=' + latitude + ',' +
|
||
longitude + '&key=' +
|
||
config.key, {
|
||
//callbackName: 'QQmap',
|
||
output: 'jsonp',
|
||
}).then(json => {
|
||
// Success.
|
||
// uni.hideLoading();
|
||
that.cityName = json.result.ad_info.city;
|
||
//定位成功刷新数据
|
||
//if (that.activeIndex==0) {
|
||
that.getHotelList();
|
||
that.getShopList();
|
||
that.getRestaurantList();
|
||
//}
|
||
|
||
}).catch(err => {
|
||
// Failed.
|
||
})
|
||
// #endif
|
||
|
||
// #ifndef H5
|
||
uni.request({
|
||
url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + latitude + ',' +
|
||
longitude +
|
||
'&key=' + config.key,
|
||
success: function (res) {
|
||
const address = res.data.result.ad_info
|
||
that.cityName = address.city;
|
||
let location = address.province + address.city + address.district;
|
||
uni.setStorageSync("location", location)
|
||
|
||
//定位成功刷新数据
|
||
//if (that.activeIndex==0) {
|
||
that.getHotelList();
|
||
that.getShopList();
|
||
that.getRestaurantList();
|
||
//}
|
||
|
||
},
|
||
fail: function (res) {
|
||
},
|
||
complete: function () {
|
||
}
|
||
});
|
||
// #endif
|
||
},
|
||
fail: function (err) {
|
||
console.log("home getCurAddress", err)
|
||
}
|
||
});
|
||
},
|
||
getHotelList: function () {
|
||
let that = this;
|
||
|
||
var q = {
|
||
page: 1,
|
||
limit: 6,
|
||
type: 1 //类型 1客栈 2购物店 3餐馆
|
||
};
|
||
|
||
//如果定位到了城市加入参数
|
||
if (this.cityName.length > 0) {
|
||
q.cityName = this.cityName;
|
||
}
|
||
|
||
|
||
getHomeHotelList(q).then(res => {
|
||
that.innArray = [];
|
||
//that.innArray = res.data;
|
||
that.innArray.push.apply(that.innArray, res.data);
|
||
|
||
}).catch((err) => {
|
||
|
||
}).finally(() => {
|
||
|
||
});
|
||
},
|
||
getShopList: function () {
|
||
let that = this;
|
||
|
||
var q = {
|
||
page: 1,
|
||
limit: 4,
|
||
type: 2 //类型 1客栈 2购物店 3餐馆
|
||
};
|
||
|
||
//如果定位到了城市加入参数
|
||
if (this.cityName.length > 0) {
|
||
q.cityName = this.cityName;
|
||
}
|
||
|
||
getHomeHotelList(q).then(res => {
|
||
that.shopArray = [];
|
||
//that.innArray = res.data;
|
||
that.shopArray.push.apply(that.shopArray, res.data);
|
||
|
||
}).catch((err) => {
|
||
|
||
}).finally(() => {
|
||
|
||
});
|
||
},
|
||
getRestaurantList: function () {
|
||
let that = this;
|
||
|
||
var q = {
|
||
page: 1,
|
||
limit: 4,
|
||
type: 3 //类型 1客栈 2购物店 3餐馆
|
||
};
|
||
|
||
//如果定位到了城市加入参数
|
||
if (this.cityName.length > 0) {
|
||
q.cityName = this.cityName;
|
||
}
|
||
|
||
getHomeHotelList(q).then(res => {
|
||
that.restaurantArray = [];
|
||
//that.innArray = res.data;
|
||
that.restaurantArray.push.apply(that.restaurantArray, res.data);
|
||
|
||
}).catch((err) => {
|
||
|
||
}).finally(() => {
|
||
|
||
});
|
||
},
|
||
goMoreBoutiqueGift: function () {
|
||
//跳转伴手礼分类
|
||
this.$yrouter.reLaunch({
|
||
path: '/pages/shop/GoodsClass/index',
|
||
query: {
|
||
id: 18
|
||
}
|
||
});
|
||
},
|
||
goMoreGroupBuy: function () {
|
||
//跳转伴手礼分类
|
||
this.$yrouter.reLaunch({
|
||
path: '/pages/shop/GoodsClass/index',
|
||
query: {
|
||
id: 19
|
||
}
|
||
});
|
||
},
|
||
goProducts: function () {
|
||
//跳转伴手礼分类
|
||
this.$yrouter.reLaunch({
|
||
path: '/pages/shop/GoodsClass/index'
|
||
});
|
||
},
|
||
goLiveList: function () {
|
||
this.$yrouter.push('/pages/LiveBroadcastList/LiveBroadcastList');
|
||
},
|
||
goShotVideo: function () {
|
||
this.$yrouter.push('/pages/VideoPlayBackList/VideoPlayBackList');
|
||
},
|
||
goInnDetail: function (item) {
|
||
//跳转到客栈详情
|
||
this.$yrouter.push({
|
||
path: "/pagesInn/inn/innHome",
|
||
query: {
|
||
id: item.id
|
||
}
|
||
});
|
||
},
|
||
goPreSale: function () {
|
||
this.$yrouter.push("/v4/views/preSale/preSale")
|
||
},
|
||
goOffer: function () {
|
||
this.$yrouter.push("/v4/views/offer/offer")
|
||
},
|
||
setMsgReaded: function (mid) {
|
||
noticeDetail({
|
||
id: mid
|
||
}).then((res) => {
|
||
|
||
}).catch((err) => {
|
||
|
||
})
|
||
},
|
||
getLiveList: function () {
|
||
|
||
//直播间状态 101：直播中，102：未开始，103 已结束，104 禁播，105：暂停，106：异常，107：已过期
|
||
var params = {
|
||
limit: 1,
|
||
page: 0,
|
||
liveStatus: 101 //101-直播中
|
||
}
|
||
// mescroll.endByPage(0, 0);
|
||
// return;
|
||
let that = this;
|
||
getWxLiveList(params)
|
||
.then(res => {
|
||
|
||
if (res.data && res.data.content && res.data.content.length > 0) {
|
||
|
||
that.liveList = res.data.content;
|
||
that.isLiving = true;
|
||
} else {
|
||
that.isLiving = false;
|
||
}
|
||
})
|
||
.catch(err => {
|
||
|
||
})
|
||
},
|
||
getUnreadMsgList: function () {
|
||
var params = {
|
||
limit: 10,
|
||
page: 1
|
||
}
|
||
// mescroll.endByPage(0, 0);
|
||
// return;
|
||
let that = this;
|
||
noticeList(params)
|
||
.then(res => {
|
||
|
||
if (res.data && res.data.length > 0) {
|
||
|
||
var msg = res.data[0];
|
||
if (msg.readFlag == 'RF0') {
|
||
that.unReadMessageInfo = msg;
|
||
that.$refs.popup.open();
|
||
that.setMsgReaded(msg.id);
|
||
}
|
||
}
|
||
})
|
||
.catch(err => {
|
||
|
||
})
|
||
},
|
||
noticeClose: function () {
|
||
this.showNotice = false;
|
||
},
|
||
//
|
||
livingButtonClick: function () {
|
||
// //是否在直播
|
||
// if(this.isLiving){
|
||
// //跳转到直播界面
|
||
// var live = this.liveList[0];
|
||
// var liveAppId = this.$WX_LIVE_APPID;
|
||
// wx.navigateTo({
|
||
// url: `plugin-private://${liveAppId}/pages/live-player-plugin?room_id=${live.roomId}`
|
||
// });
|
||
|
||
// }else{
|
||
// //跳转到视频回放界面
|
||
// this.$yrouter.push('/pages/VideoPlayBackList/VideoPlayBackList')
|
||
// }
|
||
|
||
//跳转到视频回放界面
|
||
this.$yrouter.push('/pages/LiveAndShortVideo/LiveAndShortVideo')
|
||
},
|
||
avatarClick: function () {
|
||
this.$yrouter.switchTab('/pages/user/User/index');
|
||
},
|
||
call: function () {
|
||
|
||
if (this.companyTel != undefined && this.companyTel.length > 0) {
|
||
uni.makePhoneCall({
|
||
// 手机号
|
||
phoneNumber: this.companyTel,
|
||
// 成功回调
|
||
success: (res) => {
|
||
},
|
||
// 失败回调
|
||
fail: (res) => {
|
||
}
|
||
});
|
||
} else {
|
||
this.$dialog.error('电话为空');
|
||
}
|
||
|
||
|
||
},
|
||
goRoll(item) {
|
||
if (item.uniapp_url) {
|
||
this.$yrouter.push(item.uniapp_url)
|
||
}
|
||
// this.$yrouter.push("/pages/shop/GoodsCon/index?id="+item.id)
|
||
},
|
||
goGoodSearch() {
|
||
// this.$yrouter.push('/pages/shop/GoodsEvaluate/index');
|
||
this.$yrouter.push('/pages/shop/GoodSearch/index');
|
||
},
|
||
goWxappUrl(item) {
|
||
this.$yrouter.push(item.uniapp_url);
|
||
},
|
||
goHotNewGoods(type) {
|
||
this.$yrouter.push({
|
||
path: '/pages/shop/HotNewGoods/index',
|
||
query: {
|
||
type
|
||
}
|
||
});
|
||
},
|
||
goBSLGoods(index) {
|
||
var item = this.likeInfo[index];
|
||
this.$yrouter.push({
|
||
path: '/pages/shop/GoodsCon/index',
|
||
query: {
|
||
id: item.id
|
||
}
|
||
});
|
||
},
|
||
goGoodsCon(item) {
|
||
this.$yrouter.push({
|
||
path: '/pages/shop/GoodsCon/index',
|
||
query: {
|
||
id: item.id
|
||
}
|
||
});
|
||
},
|
||
goGoodsConByProductID(item, from) {
|
||
this.$yrouter.push({
|
||
path: '/pages/shop/GoodsCon/index',
|
||
query: {
|
||
id: item.productId,
|
||
activityId: item.id,
|
||
from
|
||
}
|
||
});
|
||
},
|
||
goGoodsPromotion() {
|
||
this.$yrouter.push('/pages/shop/GoodsPromotion/index');
|
||
},
|
||
startQr: function () {
|
||
uni.scanCode({
|
||
success: (res) => {
|
||
let option = handleUrlParam(res.result)
|
||
// {productId: "19", spread: "21", codeType: "routine"}
|
||
// {productId: "19", spread: "21", pageType: "good", codeType: "routine"}
|
||
switch (option.pageType) {
|
||
case 'good':
|
||
// 跳转商品详情
|
||
this.$yrouter.push({
|
||
path: '/pages/shop/GoodsCon/index',
|
||
query: {
|
||
q: res.result
|
||
}
|
||
});
|
||
break;
|
||
case 'group':
|
||
// 跳转团购
|
||
this.$yrouter.push({
|
||
path: '/pages/activity/GroupRule/index',
|
||
query: {
|
||
q: res.result
|
||
}
|
||
});
|
||
break;
|
||
case 'dargain':
|
||
// 跳转砍价
|
||
this.$yrouter.push({
|
||
path: '/pages/activity/DargainDetails/index',
|
||
query: {
|
||
q: res.result
|
||
}
|
||
});
|
||
break;
|
||
default:
|
||
// 跳转分销
|
||
this.$yrouter.push({
|
||
path: '/pages/Loading/index',
|
||
query: {}
|
||
});
|
||
break;
|
||
}
|
||
|
||
|
||
}
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
@keyframes scroll-animation {
|
||
from {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
to {
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes scroll-animation {
|
||
from {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
to {
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss">
|
||
/* #ifdef MP-WEIXIN */
|
||
// wx-swiper .wx-swiper-dot {
|
||
// margin-bottom: 68rpx;
|
||
// }
|
||
/* #endif */
|
||
</style>
|
||
|
||
<style scoped lang="less">
|
||
.index {
|
||
background-color: #F5F5FA;
|
||
}
|
||
|
||
.index .header {
|
||
height: auto !important;
|
||
background-color: transparent !important;
|
||
|
||
}
|
||
|
||
.swiper-item {
|
||
height: 100%;
|
||
}
|
||
|
||
.fixed-header {
|
||
position: fixed;
|
||
z-index: 99;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: #fff;
|
||
box-shadow: 0 0 20rpx -10rpx #aaa;
|
||
|
||
& + .fixed-header-box {
|
||
height: 98rpx
|
||
}
|
||
}
|
||
|
||
|
||
.member-box {
|
||
// padding: 32rpx;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.title-text {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
}
|
||
|
||
.nickname-text {
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.crown-img {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.avatar-img {
|
||
width: 68rpx;
|
||
height: 68rpx;
|
||
border-radius: 50%;
|
||
z-index: 1;
|
||
}
|
||
|
||
.live-broadcast-box {
|
||
width: 83*2rpx;
|
||
height: 32*2rpx;
|
||
box-sizing: border-box;
|
||
margin-right: 16rpx;
|
||
margin-left: -30rpx;
|
||
// background:linear-gradient(90deg,rgba(196,199,255,1) 0%,rgba(56,104,253,1) 100%);
|
||
background: rgba(138, 143, 203, 1);
|
||
border-radius: 0px 16*2rpx 16*2rpx 0px;
|
||
}
|
||
|
||
.live-broadcast-box .video-icon {
|
||
width: 20*2rpx;
|
||
height: 20*2rpx;
|
||
margin-right: 5*2rpx;
|
||
|
||
}
|
||
|
||
.live-broadcast-box .living-box {
|
||
margin-right: 5*2rpx;
|
||
width: 20*2rpx;
|
||
height: 20*2rpx;
|
||
background: linear-gradient(137deg, rgba(252, 85, 179, 1) 0%, rgba(255, 45, 105, 1) 100%);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.live-broadcast-box .living-img {
|
||
width: 12*2rpx;
|
||
height: 12*2rpx;
|
||
}
|
||
|
||
.live-broadcast-box .living-status-text {
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.slider-banner {
|
||
-webkit-transform: rotate(0);
|
||
// margin-top: -187rpx;
|
||
// border-radius: 20rpx;
|
||
// margin-left: 30rpx;
|
||
// margin-right: 30rpx;
|
||
width: auto !important;
|
||
}
|
||
|
||
|
||
.header {
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
//height: 680rpx !important;
|
||
}
|
||
|
||
.header .paper-cuts-img {
|
||
position: absolute;
|
||
width: 159*2rpx;
|
||
height: 159*2rpx;
|
||
// left: calc((100% - 159*2rpx)/2);
|
||
// top: calc((100% - 159*2rpx)/2);
|
||
top: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
z-index: 0;
|
||
}
|
||
|
||
.search {
|
||
-webkit-box-flex: 1;
|
||
-webkit-flex: 1;
|
||
flex: 1;
|
||
box-sizing: border-box;
|
||
height: 64rpx;
|
||
background-color: #F5F5F5;
|
||
padding: 0 28rpx;
|
||
font-size: 28rpx;
|
||
color: #acacac;
|
||
box-sizing: border-box;
|
||
// border: 1px solid #ffffff;
|
||
border-radius: 32rpx;
|
||
margin: 0 30rpx;
|
||
}
|
||
|
||
.notice {
|
||
margin-right: 24rpx;
|
||
// background:linear-gradient(145deg,rgba(252,85,179,1) 0%,rgba(255,45,105,1) 100%);
|
||
// border-radius:0px 4*2rpx 4*2rpx 8*2rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
font-size: 12*2rpx;
|
||
font-weight: bold;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.close-btn {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.company-title {
|
||
font-size: 18*2rpx;
|
||
color: #3868FD;
|
||
background: rgba(255, 255, 255, 1);
|
||
margin-left: 5*2rpx;
|
||
margin-right: 5*2rpx;
|
||
}
|
||
|
||
.company-hline {
|
||
width: 28*2rpx;
|
||
height: 0px;
|
||
border: 1px solid rgba(56, 104, 253, 1);
|
||
}
|
||
|
||
.company-subtitle {
|
||
font-size: 14*2rpx;
|
||
color: rgba(121, 129, 253, 1);
|
||
}
|
||
|
||
.h-line {
|
||
width: 28*2rpx;
|
||
height: 0px;
|
||
border: 1px solid rgba(255, 121, 0, 1);
|
||
}
|
||
|
||
.sub-title {
|
||
font-size: 14*2rpx;
|
||
margin-top: 10rpx;
|
||
color: rgba(252, 85, 179, 0.7);
|
||
}
|
||
|
||
.title .hot-title {
|
||
font-size: 18*2rpx;
|
||
color: #FF7900;
|
||
background: rgba(255, 255, 255, 1);
|
||
margin-left: 5*2rpx;
|
||
margin-right: 5*2rpx;
|
||
}
|
||
|
||
.hotGoodsList {
|
||
position: relative;
|
||
margin: 35rpx 0;
|
||
// background-color: #fff;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.hotGoodsList .newProductsItem {
|
||
margin-left: 35rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.newProductsItem .market-price {
|
||
font-size: 12*2rpx;
|
||
color: #C2C5CC;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.newProductsItem .money {
|
||
font-size: 16*2rpx;
|
||
color: #FF564A;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.shoppingCart {
|
||
width: 28*2rpx;
|
||
height: 28*2rpx;
|
||
background: rgba(255, 45, 105, 1);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.cart-icon {
|
||
width: 18*2rpx;
|
||
height: 18*2rpx;
|
||
}
|
||
|
||
.img-box {
|
||
position: relative;
|
||
}
|
||
|
||
.price-tag {
|
||
position: absolute;
|
||
width: 39*2rpx;
|
||
height: 19*2rpx;
|
||
left: 0;
|
||
top: 0;
|
||
}
|
||
|
||
.like-btn {
|
||
position: absolute;
|
||
width: 24*2rpx;
|
||
height: 24*2rpx;
|
||
right: 0;
|
||
top: 0;
|
||
}
|
||
|
||
.pro-info {
|
||
font-size: 14*2rpx;
|
||
|
||
}
|
||
|
||
.company-logo-box {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.company-info-box {
|
||
padding: 24rpx 24rpx 32rpx 24rpx;
|
||
background: rgba(255, 255, 255, 1);
|
||
//box-shadow:0px 6rpx 12rpx rgba(0,0,0,0.1);
|
||
//border-radius:12rpx;
|
||
box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
border-radius: 0px 12rpx 12rpx 12rpx;
|
||
flex-wrap: nowrap !important;
|
||
// margin-top: 35*2rpx;
|
||
|
||
}
|
||
|
||
.company-info {
|
||
flex: 1;
|
||
margin-left: 16rpx;
|
||
|
||
}
|
||
|
||
.company-tel-box {
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.company-logo {
|
||
width: 116*2rpx;
|
||
height: 100*2rpx;
|
||
background: rgba(139, 143, 153, 1);
|
||
border-radius: 4*2rpx;
|
||
}
|
||
|
||
.company-name {
|
||
font-size: 14*2rpx;
|
||
font-weight: bold;
|
||
color: rgba(8, 15, 26, 1);
|
||
}
|
||
|
||
.company-tel-title {
|
||
color: #C2C5CC;
|
||
font-size: 12*2rpx;
|
||
}
|
||
|
||
.company-tel {
|
||
font-size: 12*2rpx;
|
||
font-weight: bold;
|
||
color: rgba(65, 69, 77, 1);
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.company-call-btn {
|
||
width: 40*2rpx;
|
||
height: 19*2rpx;
|
||
background: rgba(56, 104, 253, 1);
|
||
opacity: 1;
|
||
border-radius: 2*2rpx;
|
||
font-size: 12*2rpx;
|
||
color: rgba(255, 255, 255, 1);
|
||
text-align: center;
|
||
}
|
||
|
||
.line {
|
||
height: 0px;
|
||
border: 1px solid rgba(235, 236, 240, 1);
|
||
margin-top: 10*2rpx;
|
||
margin-bottom: 10*2rpx;
|
||
}
|
||
|
||
.company-address {
|
||
font-size: 12*2rpx;
|
||
color: rgba(166, 170, 179, 1);
|
||
}
|
||
|
||
.new-tag {
|
||
// margin-right: 10rpx;
|
||
padding: 1*2rpx 3*2rpx;
|
||
width: 29*2rpx;
|
||
height: 14*2rpx;
|
||
color: #fff;
|
||
font-size: 10*2rpx;
|
||
background: linear-gradient(142deg, rgba(255, 202, 30, 1) 0%, rgba(255, 170, 0, 1) 100%);
|
||
opacity: 1;
|
||
border-radius: 1*2rpx;
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
left: 10rpx;
|
||
top: 21.5rpx;
|
||
|
||
}
|
||
|
||
.newTag {
|
||
position: absolute;
|
||
z-index: 1;
|
||
left: -14rpx;
|
||
top: 40rpx;
|
||
}
|
||
|
||
.index .wrapper.hot .newProducts {
|
||
// margin: 25rpx 25rpx 35rpx 25rpx;
|
||
margin: 10rpx 0rpx 0rpx 0rpx;
|
||
box-shadow: none;
|
||
background: none;
|
||
padding: 0rpx 0rpx 0rpx 0rpx;
|
||
// padding: 0;
|
||
}
|
||
|
||
.index .news {
|
||
margin: 0rpx 30rpx !important;
|
||
margin-bottom: 0;
|
||
border-radius: 8rpx !important;
|
||
background: #f7f7f7 !important;
|
||
border: none !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.index .news .new-banner .text .newsTitle {
|
||
color: #666666 !important;
|
||
}
|
||
|
||
.index .wrapper .title {
|
||
border: none;
|
||
}
|
||
|
||
|
||
.index .wrapper .title .text {
|
||
}
|
||
|
||
.index .wrapper .title .text .name {
|
||
font-size: 18*2rpx !important;
|
||
color: #fff !important;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.newGoodsBox {
|
||
margin-left: 30rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.cus-btn {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
.cus-btn::after {
|
||
border: none !important;
|
||
}
|
||
|
||
.msg_title {
|
||
font-size: 0.36*100rpx;
|
||
font-weight: bold;
|
||
color: rgba(8, 15, 26, 1);
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.msg_line {
|
||
background-color: #f3f3f3;
|
||
height: 1px;
|
||
width: 100%;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
|
||
.msg_content {
|
||
padding: 0.1*100rpx;
|
||
color: #080F1A;
|
||
font-size: 0.32*100rpx;
|
||
}
|
||
|
||
.msg_btn {
|
||
padding: 10rpx;
|
||
font-size: 34rpx;
|
||
|
||
// border: 1px solid #333;
|
||
color: #38afef;
|
||
margin-top: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.inn-tag-wrap {
|
||
margin-top: 10rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.zanmost-tag {
|
||
padding: 2rpx 8rpx 2rpx 8rpx;
|
||
background: #FF2D69;
|
||
font-size: 10*2rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.latest-tag {
|
||
padding: 2rpx 8rpx 2rpx 8rpx;
|
||
background: #0DC5C5;
|
||
font-size: 10*2rpx;
|
||
color: #FFFFFF;
|
||
margin-left: 8rpx;
|
||
}
|
||
|
||
.location-tag {
|
||
padding: 2rpx 8rpx 2rpx 8rpx;
|
||
background: #FD685D;
|
||
font-size: 10*2rpx;
|
||
color: #FFFFFF;
|
||
margin-left: 8rpx;
|
||
}
|
||
|
||
.inn-shop-icon {
|
||
border-radius: 50%;
|
||
width: 24*2rpx;
|
||
height: 24*2rpx;
|
||
}
|
||
|
||
.inn-shop-name {
|
||
font-size: 28rpx;
|
||
color: #080F1A;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.inn-shop-date {
|
||
font-size: 18rpx;
|
||
color: #C2C5CC;
|
||
}
|
||
|
||
.slide-image {
|
||
position: absolute;
|
||
height: 200rpx;
|
||
width: 570rpx;
|
||
border-radius: 15rpx;
|
||
z-index: 5;
|
||
opacity: 0.7;
|
||
top: 18%;
|
||
margin: 0 20rpx;
|
||
}
|
||
|
||
.active {
|
||
opacity: 1;
|
||
z-index: 10;
|
||
height: 316rpx;
|
||
width: 572rpx;
|
||
top: 7%;
|
||
transition: all 0.2s ease-in 0s;
|
||
}
|
||
|
||
// v4
|
||
.fast-nav {
|
||
flex-wrap: wrap;
|
||
padding: 40rpx 32rpx 0;
|
||
background: #fff;
|
||
|
||
.item {
|
||
width: 88rpx;
|
||
margin-right: 60rpx;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.item:nth-child(5n) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
image {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
}
|
||
|
||
.one-t {
|
||
width: 110rpx;
|
||
margin-top: 8rpx;
|
||
color: #666666;
|
||
font-size: 22rpx;
|
||
font-weight: 500;
|
||
line-height: 32rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.home-luck {
|
||
width: 686rpx;
|
||
height: 272rpx;
|
||
margin: 20rpx 32rpx;
|
||
}
|
||
|
||
.my-swiper-item {
|
||
width: 420rpx;
|
||
box-sizing: border-box;
|
||
margin: 0 20rpx;
|
||
padding-bottom: 14rpx;
|
||
box-shadow: 0px 6rpx 16rpx rgba(148, 148, 148, 0.16);
|
||
}
|
||
|
||
.money {
|
||
.btn-pay {
|
||
display: inline-block;
|
||
width: 120rpx;
|
||
height: 34rpx;
|
||
line-height: 34rpx;
|
||
border-radius: 18rpx;
|
||
background: #ED0F0F;
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.pre-sale {
|
||
position: relative;
|
||
width: 686rpx;
|
||
height: 440rpx;
|
||
margin: 0 auto;
|
||
|
||
.bg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.list {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
position: absolute;
|
||
bottom: 36rpx;
|
||
width: 100%;
|
||
padding: 0 14rpx;
|
||
box-sizing: border-box;
|
||
|
||
.item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin: 0 10rpx;
|
||
|
||
image {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
view {
|
||
width: 200rpx;
|
||
margin: 4rpx 0 12rpx;
|
||
color: #333;
|
||
font-size: 24rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
text {
|
||
display: inline-block;
|
||
padding: 2rpx 15rpx;
|
||
border-radius: 18rpx;
|
||
background: #ED0F0F;
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 限时秒杀
|
||
.seckill {
|
||
margin-top: 40rpx;
|
||
|
||
.header {
|
||
.title {
|
||
margin-right: 28rpx;
|
||
color: #333;
|
||
line-height: 48rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.sub-title {
|
||
line-height: 32rpx;
|
||
font-size: 22rpx;
|
||
color: #A1A1A1;
|
||
}
|
||
|
||
.count-box {
|
||
margin-top: 6rpx;
|
||
font-size: 24rpx;
|
||
|
||
/deep/ .time {
|
||
.styleAll {
|
||
display: inline-block;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
padding: 0 4rpx;
|
||
background: #ED0F0F;
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.timeTxt {
|
||
margin: 0 4rpx;
|
||
color: #8D8D8D;
|
||
}
|
||
}
|
||
}
|
||
|
||
.more {
|
||
margin-top: 8rpx;
|
||
color: #7C7C7C;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.list {
|
||
padding: 20rpx 32rpx 0;
|
||
|
||
.item {
|
||
display: flex;
|
||
margin-bottom: 20rpx;
|
||
padding: 10rpx 16rpx 10rpx 12rpx;
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
|
||
.content {
|
||
position: relative;
|
||
width: 100%;
|
||
|
||
.item-bottom {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.left-img {
|
||
flex-shrink: 0;
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
margin-right: 8rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.cart {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.fire-gray {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
|
||
.title {
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
line-height: 38rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.price-line {
|
||
align-items: flex-end;
|
||
margin-top: 20rpx;
|
||
margin-bottom: 8rpx;
|
||
|
||
.price {
|
||
color: #ED0F0F;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
|
||
.desc-line {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 22rpx;
|
||
line-height: 32rpx;
|
||
color: #333333;
|
||
|
||
.sold {
|
||
padding-left: 8rpx;
|
||
color: #8D8D8D;
|
||
}
|
||
|
||
.space {
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
margin-right: 16rpx;
|
||
border-right: 1rpx solid #8D8D8D;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 每天特价
|
||
.special-offer {
|
||
margin-top: 40rpx;
|
||
|
||
.flex {
|
||
display: flex;
|
||
}
|
||
|
||
.header {
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.title {
|
||
margin-right: 8rpx;
|
||
color: #333;
|
||
line-height: 48rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.icon-date {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.date-box {
|
||
align-items: center;
|
||
padding: 8rpx;
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
|
||
.day {
|
||
color: #494949;
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
|
||
text {
|
||
color: #FF1200;
|
||
}
|
||
}
|
||
|
||
.month {
|
||
height: 32rpx;
|
||
margin-left: 12rpx;
|
||
padding-left: 6rpx;
|
||
border-left: 2rpx solid #DDDDDD;
|
||
color: #999999;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.more {
|
||
margin-top: 8rpx;
|
||
color: #7C7C7C;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.list {
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
padding: 0 32rpx 40rpx;
|
||
|
||
.item {
|
||
position: relative;
|
||
flex-direction: column;
|
||
width: 328rpx;
|
||
// height: 528rpx;
|
||
margin-top: 20rpx;
|
||
background: #fff;
|
||
|
||
.top-img {
|
||
flex-shrink: 0;
|
||
width: 328rpx;
|
||
height: 328rpx;
|
||
}
|
||
|
||
.icon-fire {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
|
||
.content {
|
||
// position: relative;
|
||
}
|
||
|
||
.title {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
margin: 10rpx 12rpx 10rpx 10rpx;
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
line-height: 38rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.price {
|
||
align-items: center;
|
||
margin-left: 10rpx;
|
||
padding-bottom: 10rpx;
|
||
|
||
.red {
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
line-height: 38rpx;
|
||
color: #ED0F0F;
|
||
}
|
||
|
||
.gray {
|
||
margin-left: 16rpx;
|
||
text-decoration: line-through;
|
||
font-size: 20rpx;
|
||
line-height: 30rpx;
|
||
color: #C2C5CC;
|
||
}
|
||
}
|
||
|
||
.shop {
|
||
position: absolute;
|
||
bottom: 0;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 6rpx 12rpx 18rpx 10rpx;
|
||
border: 1rpx solid #EFEFEF;
|
||
font-size: 22rpx;
|
||
line-height: 32rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bast-box {
|
||
.bast-title {
|
||
width: 312rpx;
|
||
height: 40rpx;
|
||
margin: 32rpx 0 16rpx;
|
||
}
|
||
|
||
.bannar-swiper {
|
||
height: 534rpx;
|
||
|
||
image {
|
||
width: 332rpx;
|
||
height: 534rpx;
|
||
}
|
||
}
|
||
|
||
.list {
|
||
padding: 0 32rpx 32rpx;
|
||
|
||
.item {
|
||
position: relative;
|
||
flex-direction: column;
|
||
background: #fff;
|
||
|
||
.top-img {
|
||
width: 332rpx;
|
||
height: 332rpx;
|
||
}
|
||
|
||
.content {
|
||
box-sizing: border-box;
|
||
padding: 10rpx 10rpx 20rpx;
|
||
|
||
.title {
|
||
color: #333;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.price {
|
||
font-size: 32rpx;
|
||
|
||
.red {
|
||
color: #DA0000;
|
||
}
|
||
|
||
.gray {
|
||
margin-left: 16rpx;
|
||
text-decoration: line-through;
|
||
font-size: 20rpx;
|
||
line-height: 30rpx;
|
||
color: #C2C5CC;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|