<template> <view> <!-- 状态栏 --> <view v-if="showHeader" class="status" :style="{ position: headerPosition,top:statusTop,opacity: afterHeaderOpacity}"></view> <!-- 顶部导航栏 --> <view v-if="showHeader" class="header" :style="{ position: headerPosition,top:headerTop,opacity: afterHeaderOpacity }"> <!-- 定位城市 --> <view class="addr" @click="goPostion"> <!-- <view class="icon location"></view> --> {{ city }} <image mode="widthFix" style="width: 15px;" :src="imagewxUrl+imgadres2"></image> </view> <!-- 搜索框 --> <view class="input-box"> <input placeholder="搜索门店" placeholder-style="color:#c0c0c0;" @tap="toSearch()" /> <view class="icon search"></view> </view> </view> <!-- 占位 --> <view v-if="showHeader" class="place"></view> <!-- 轮播图 --> <view class="height90 backcor008 viewbor"></view> <view class="swiper"> <view class="swiper-box"> <swiper circular="true" autoplay="true" @change="swiperChange"> <swiper-item v-for="swiper in swiperList" :key="swiper.id"> <image :src="imageUrl+swiper.imgData" @click="jumplottery(swiper)"></image> </swiper-item> </swiper> <view class="indicator"> <view class="dots" v-for="(swiper, index) in swiperList" :class="[currentSwiper >= index ? 'on' : '']" :key="index"></view> </view> </view> </view> <!-- /菜单 --> <view class="height60 backcorfff"></view> <view class="category-list"> <view class="category" v-for="(row, index) in categoryList" :key="index" @tap="toCategory(row)"> <view class="img"> <image :src="imageUrl+row.imgData"></image> </view> <view class="text">{{ row.title }}</view> </view> </view> <!-- 积分 --> <view style="width: 90%;margin-left: 5%;" v-if='goldproductList.length != 0' @click="goGoodsList(2)"> <image class="mart30 width100" mode="widthFix" :src="imagewxUrl+imgadres1"></image> </view> <swiper class="orange-content" :display-multiple-items="goldproductListleg" v-if='goldproductList.length != 0' next-margin="50rpx"> <swiper-item class="swiper-hed" v-for="(item,index) in goldproductList" :key="index" @click="toGoods(item.id)"> <view class="swiper-item" :data-id="item.id"> <image class="img" :src="imageUrl+item.couponImg" mode="aspectFit"></image> <view class="fotlt fcor333 font14 text1 mart10">{{item.couponName}}</view> <view class="subject fotct mart5"> <image style="width: 15px;height: 15px;vertical-align: sub;margin-right: 5px;" src="../../../static/img/jfx.png"> </image>{{ item.discountPrice*100}} </view> </view> </swiper-item> </swiper> <!-- 工会卡专区 --> <view style="width: 90%;margin-left: 5%;" v-if='unioncardproductList.length != 0' @click="goGoodsList(5)"> <image class="mart30 width100" mode="widthFix" :src="imagewxUrl+imgadres5"></image> </view> <swiper class="orange-content" :display-multiple-items="unioncardproductListleg" v-if='unioncardproductList.length != 0' next-margin="50rpx"> <swiper-item class="swiper-hed" v-for="(item,index) in unioncardproductList" :key="index" @click="toGoods(item.id)"> <view class="swiper-item" :data-id="item.id"> <image class="img" :src="imageUrl+item.couponImg" mode="aspectFit"></image> <view class="fotlt fcor333 font14 text1 mart10">{{item.couponName}}</view> <view class="subject fotct mart5"> <view class="subject fotct mart5">¥{{item.discountPrice}}</view> </view> </view> </swiper-item> </swiper> <image mode="widthFix" style="margin-top: 30px;width: 90%;margin-left: 5%;" v-for="(row, index) in homeCateList" :key="index" @click="jumphuafei(row)" :src="imageUrl+row.imgData"></image> <!-- 赠券 --> <view style="width: 91%;margin-left: 5%;" v-if='productList.length != 0' @click="goGoodsList(1)"> <image class="mart30 width100" mode="widthFix" :src="imagewxUrl+imgadres"></image> </view> <swiper class="orange-content" style="border: 2px solid #ff5836;" v-if='productList.length != 0' :display-multiple-items="productListleg"> <swiper-item class="swiper-hed" v-for="pro in productList" :key="pro.id" @click="toGoods(pro.id)"> <view class="swiper-item" :data-id="pro.id"> <image class="img" :src="imageUrl+pro.couponImg" mode="aspectFit"> </image> <view class="fotlt fcor333 font14 text1 mart10">{{pro.couponName}}</view> <view class="subject fotct mart5">¥{{pro.discountPrice}}</view> </view> </swiper-item> </swiper> <wybPopup ref="popup" type="center" height="850" width="600" bgColor="" radius="6" :showCloseIcon="true"> <image class="popImg" :src="imageUrl+imgadres3" @click="jumpWeb"></image> </wybPopup> <!-- #ifdef MP--> <button open-type="contact"> <image :src="imagewxUrl+imgadres4" mode="widthFix" class="xfimg"></image> </button> <!-- #endif --> <!-- #ifdef H5 --> <image :src="imagewxUrl+imgadres4" mode="widthFix" class="h5xfimg" @click="playPhone"></image> <!-- #endif --> <view class="height40"></view> <!-- <official-account bindload="bindload" binderror="binderror"></official-account> --> <!-- <view class="height20"></view> --> </view> </template> <script> import { getUserInfo, HandleCode, WXlogin, getCouponList, getH5AccessToken, getTPigKFCToken, getTPigCinemaToken, getCmsContent, getMembershipLevel, findByLatAndLng } from "../../../Utils/Api.js"; //您的api路径 import wybPopup from '../../../components/wyb-popup/wyb-popup.vue'; let app = getApp(); export default { components: { wybPopup }, data() { return { showHeader: true, isShowAuth: false, afterHeaderOpacity: 1, //不透明度 headerPosition: 'fixed', headerTop: null, statusTop: null, nVueTitle: null, city: '', currentSwiper: 0, imageUrl: app.globalData.imgUrl, imagewxUrl: app.globalData.imageWxImg, imgadres: 'headzq.png', imgadres1: 'jbhed.png', imgadres2: 'jt.png', imgadres5: 'unionarea.png', imgadres3: '', imgadres4: 'cusservice.png', webUrl: '', // 轮播图片 swiperList: [{ id: 1, src: 'url1', img: 'banner2.png' }, { id: 2, src: 'url2', img: 'banner3.png' } ], //猜你喜欢列表 productList: [], productListleg: '', goldproductList: [], goldproductListleg: '', unioncardproductList: [], unioncardproductListleg: '', loadingText: '正在加载...', pageNum: 1, pageSize: 6, // 分类菜单 categoryList: [], homeCateList: [], //切换状态 cpStuats: 1, jumpType: '', locationRef: null, // 用于接收定位对象 }; }, onShow() { if (app.globalData.cityName != '') { this.city = app.globalData.qianzhuCityName; this.getCouponListArea(); this.getCouponListgold(); this.getunioncardCouponListgold(); this.getCmsContent(); this.getCmsContentcmshome(); this.getCmsContentcmsContent(); if (app.globalData.userInfo.phone) { this.getMembershipLevel(); } } // #ifdef H5 uni.getStorage({ key: 'accountId', success(e) { if (e.data) { app.globalData.accountId = e.data; } } }) uni.getStorage({ key: 'gasKey', success(e) { if (e.data) { app.globalData.gasKey = e.data; } } }) uni.getStorage({ key: 'staffCode', success(e) { if (e.data) { if (app.globalData.accountId == '000001&key' || app.globalData.accountId == '000000&gasKey' || app.globalData.accountId == '000009&key' || app.globalData .accountId == '0000010&key') { app.globalData.staffCode = e.data; } else { app.globalData.mchId = e.data; } } } }) // #endif }, onLoad(options) { let that = this; // #ifdef MP // 1.wx获取登录用户code uni.login({ provider: 'weixin', success: function(loginRes) { app.globalData.code = loginRes.code; // 请求接口 let params = { code: app.globalData.code } HandleCode(params).then(res => { if (res.return_code == '000000') { app.globalData.openId = res.return_data.openId; } }) }, }) //定位 that.postionIng(); // #endif // #ifdef H5 // if (app.globalData.h5code) { // that.getH5AccessToken(); // } uni.showLoading({ title: '加载中' }) var geolocation = new qq.maps.Geolocation('7UMBZ-HFEHX-HSD4Q-Z3QY6-OQKN7-2QBDB', "嗨森逛"); // 回调的第一次参数为成功后具体的位置信息 geolocation.getLocation( res => { uni.hideLoading(); app.globalData.latitude = res.lat; app.globalData.longitude = res.lng; uni.setStorage({ key: "latitude", data: res.lat }) uni.setStorage({ key: "longitude", data: res.lng }) that.findByLatAndLng(res.lng, res.lat); }, err => { uni.hideLoading(); uni.showModal({ title: '获取定位权限失败,默认城市重庆市', content: '请确定手机定位已打开,并且当前浏览器允许获取定位,都开启后请刷新页面。' }) that.city = '重庆市'; app.globalData.cityName = '重庆市'; app.globalData.cityId = '500000'; that.getCouponListArea(); that.getCouponListgold(); that.getunioncardCouponListgold(); that.getCmsContent(); that.getCmsAactibity(); that.getCmsContentcmshome(); that.getCmsContentcmsContent(); } ); // #endif uni.getStorage({ key: "user", success(e) { app.globalData.userInfo = e.data //这就是你想要取的token uni.getStorage({ key: 'token', success(e) { app.globalData.token = e.data; } }) }, fail: res => {} }) if (JSON.stringify(options.id)) { app.globalData.identificationCode = options.id; return; } var arr1mp = decodeURIComponent(options.q); if (arr1mp) { var arr2mp = arr1mp.split('='); if (arr2mp) { app.globalData.identificationCode = arr2mp[2]; } } }, methods: { jumpcdx() { location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxa075e8509802f826&redirect_uri=https%3A%2F%2Fhsg.dctpay.com%2FhsgH5%2Findex.html%23%2F&response_type=code&scope=snsapi_base&state=1#wechat_redirect'; }, //获取首页功能 getCmsContentcmsContent() { let code; // #ifdef H5 code = 'CMS_H5_IMG' // #endif // #ifdef MP code = 'CMS_HOME_CONTENT' // #endif let params = { regionId: app.globalData.cityId, categoryCode: code } getCmsContent(params).then(res => { if (res.return_code == '000000') { this.homeCateList = res.return_data; } }); }, //查询是否赠券 getMembershipLevel() { let params = { phone: app.globalData.userInfo.phone, regionId: app.globalData.cityId } getMembershipLevel(params).then(res => {}); }, //获取首页菜单 getCmsContentcmshome() { let code; // #ifdef H5 code = 'CMS_H5_FAST' // #endif // #ifdef MP code = 'CMS_HOME_NAV' // #endif let params = { regionId: app.globalData.cityId, categoryCode: code } getCmsContent(params).then(res => { if (res.return_code == '000000') { this.categoryList = res.return_data; } }); }, //获取弹出或者弹窗 getCmsContent() { let params = { regionId: app.globalData.cityId, categoryCode: 'CMS_WX_APPLETS_HOME_SLIDESHOW' } getCmsContent(params).then(res => { if (res.return_code == '000000') { this.swiperList = res.return_data; } }); }, getCmsAactibity() { let code; // #ifdef H5 code = 'CMS_H5_ALERT' // #endif // #ifdef MP code = 'CMS_WX_APPLETS_HOME_ACTIVITY' // #endif let params = { regionId: app.globalData.cityId, categoryCode: code } getCmsContent(params).then(res => { if (res.return_code == '000000' && res.return_data != '') { //弹窗首页广告 this.showPopup(); this.imgadres3 = res.return_data[0].imgData; this.webUrl = res.return_data[0].ext1; this.jumpType = res.return_data[0].jumpType; } }); }, //显示弹出 showPopup() { this.$refs.popup.show(); }, close() { this.isShowAuth = false; }, //关闭弹窗 closePopup() { this.$refs.popup.hide(); }, /** * 跳转外链 */ jumpWeb() { if (this.jumpType == 1) { if (this.webUrl) { uni.navigateTo({ url: '../order/webUrl/webUrl?url=' + this.webUrl }) } } else { uni.navigateTo({ url: this.webUrl }) } this.closePopup(); }, /** * 定位 */ postionIng() { uni.showLoading({ title: '加载中' }) let that = this; uni.getLocation({ type: 'wgs84', success: function(res) { app.globalData.latitude = res.latitude; app.globalData.longitude = res.longitude; uni.hideLoading(); that.findByLatAndLng(res.longitude, res.latitude); }, fail: (err) => { uni.hideLoading(); if (err.errCode == 2) { uni.showToast({ title: '请开启系统定位', duration: 3000, icon: 'none' }) }else{ uni.showToast({ title: '定位失败,请重新进入小程序', duration: 3000, icon: 'none' }) } } }) }, // 获取精准定位 getLocation() { uni.showLoading({ title: '加载中' }) let that = this; that.locationRef.getLocation() // 调用 getLocation 方法获取精准定位 .then(res => { uni.hideLoading(); // res 就是返回的数据 app.globalData.latitude = res.lat; app.globalData.longitude = res.lng; that.findByLatAndLng(res.lng, res.lat); }) }, //经纬度转换 findByLatAndLng(item, item1) { let that = this; let datas = { lng: item, lat: item1 } findByLatAndLng(datas).then(res => { if (res.return_code == '000000') { that.city = res.return_data.provinceName; app.globalData.cityName = res.return_data.provinceName; app.globalData.qianzhuCityName = res.return_data.cityName; app.globalData.cityId = res.return_data.regionId; app.globalData.companyId = res.return_data.companyId; uni.setStorage({ key: "cityId", data: res.return_data.regionId }) uni.setStorage({ key: "cityName", data: res.return_data.provinceName }) uni.setStorage({ key: "qianzhuCityName", data: res.return_data.cityName }) uni.setStorage({ key: "companyId", data: res.return_data.companyId }) // app.globalData.cityId = '500103'; if (res.return_data.regionId) { that.getCouponListArea(); that.getCouponListgold(); that.getunioncardCouponListgold(); that.getCmsContent(); that.getCmsAactibity(); that.getCmsContentcmshome(); that.getCmsContentcmsContent(); } uni.getStorage({ key: 'accountType', success(e) { if (e.data) { app.globalData.accountType = e.data; // 000000#/ 一健加油 // 000000&gasKey 加油员 // 000001&key 领取优惠券 // 002 积分专区 // 003 星巴克 // 004 肯德基 // 005 会员充值 // 006 话费充值 // 007 在线加油 // 008 工会卡卡券 // 009 分销推广优选商品 // 0010 只跳首页 if (e.data == '000000#/' && app.globalData.h5code) { uni.navigateTo({ url: '../../goods/refuel-details/refuel-details' }) } if (e.data == '000000&gasKey' && app.globalData.h5code) { uni.navigateTo({ url: '../../goods/refuel-details/refuel-details' }) } if (e.data == '000001&key') { uni.navigateTo({ url: '/subPages/scancodeCoupons/scancodeCoupons' }) } if (e.data == '000002&key' && app.globalData.h5code) { uni.navigateTo({ url: '/pages/goods/goods-list/goods-list?id=2' }) } if (e.data == '000003&key' && app.globalData.h5code) { uni.navigateTo({ url: '/qianzhu-Starbucks/home/home' }) } if (e.data == '000004&key' && app.globalData.h5code) { uni.navigateTo({ url: '../../../qianzhu-KFC/home/home' }) } if (e.data == '000005&key' && app.globalData.h5code) { uni.navigateTo({ url: '/member-Recharge/choicepage/choicepage' }) } if (e.data == '000006&key' && app.globalData.h5code) { uni.navigateTo({ url: '../../../subPages/recharge/recharge' }) } if (e.data == '000007&key' && app.globalData.h5code) { uni.navigateTo({ url: '../../goods/refuel/refuel' }) } if (e.data == '000008&key' && app.globalData.h5code) { uni.navigateTo({ url: '../../goods/goods-list/goods-list?id=5' }) } if (e.data == '000009&key' && app.globalData.h5code) { uni.navigateTo({ url: '/subPages/selectEntry/selectEntry' }) } } } }) } else { uni.showToast({ title: res.return_msg, icon: 'none', duration: 2000 }) } }); }, //H5 获取openId getH5AccessToken() { let params = { code: app.globalData.h5code } getH5AccessToken(params).then(res => { if (res.return_code == '000000' && res.return_data.openid) { app.globalData.openId = res.return_data.openid; uni.setStorage({ key: "openId", data: res.return_data.openid }) } else { this.jumpcdx(); } }); }, //搜索跳转 toSearch() { uni.navigateTo({ url: '../../goods/HM-search/HM-search' }) }, //跳转位置 goPostion() { uni.navigateTo({ url: '/pages/user/positioning/positioning' }) }, //商品跳转 toGoods(e) { uni.navigateTo({ url: '../../goods/goods?id=' + e }); }, //赠券卡券列表 getCouponListArea() { let params = { regionId: app.globalData.cityId, pageNum: this.pageNum, pageSize: this.pageSize, displayArea: 1 } getCouponList(params).then(res => { if (res.return_code == '000000' && res.return_data.list) { this.productList = res.return_data.list; if (res.return_data.total > 4) { this.productListleg = 4; return; } this.productListleg = res.return_data.total; } else { this.productList = []; } }) }, //积分卡券列表 getCouponListgold() { let params = { regionId: app.globalData.cityId, pageNum: this.pageNum, pageSize: this.pageSize, displayArea: 2 } getCouponList(params).then(res => { if (res.return_code == '000000' && res.return_data.list) { this.goldproductList = res.return_data.list; this.goldproductListleg = res.return_data.total; if (res.return_data.total > 4) { this.goldproductListleg = 4; return; } this.goldproductListleg = res.return_data.total; } else { this.productList = []; } }) }, //工会卡卡券列表 getunioncardCouponListgold() { let params = { regionId: app.globalData.cityId, pageNum: this.pageNum, pageSize: this.pageSize, displayArea: 5 } getCouponList(params).then(res => { if (res.return_code == '000000' && res.return_data.list) { this.unioncardproductList = res.return_data.list; this.unioncardproductListleg = res.return_data.total; if (res.return_data.total > 4) { this.unioncardproductListleg = 4; return; } this.unioncardproductListleg = res.return_data.total; } else { this.unioncardproductList = []; } }) }, //轮播图指示器 swiperChange(event) { this.currentSwiper = event.detail.current; }, eheckStu(item) { this.cpStuats = item; }, //获取登陆信息 getuserinfos() { let that = this; // 获取微信用户信息 uni.getUserProfile({ desc: '登录中...', success: function(res) { let params = { openId: app.globalData.openId, iv: res.iv, encryptedData: res.encryptedData } getUserInfo(params).then(res => { if (res.return_code == '000000') { uni.hideLoading(); uni.showToast({ title: '获取信息成功', icon: 'none', duration: 2000 }) app.globalData.userInfo = res .return_data .object .highUser; app.globalData.token = res .return_data.uniqueCode; uni.setStorage({ key: "user", data: res.return_data .object .highUser }) uni.setStorage({ key: "token", data: res.return_data .uniqueCode }) } else { uni.hideLoading(); uni.showToast({ title: res.return_msg, icon: 'none', duration: 2000 }) } }); }, fail: res => { uni.hideLoading(); uni.showToast({ title: "微信登录授权失败", icon: "none" }); } }) }, //跳转菜单 toCategory(item) { // if (!app.globalData.userInfo.phone) { // uni.navigateTo({ // url: '../../userLogin/userLogin' // }) // return; // } // if (!app.globalData.userInfo) { // uni.navigateTo({ // url: '../../userLogin/userLogin' // }) // return; // } // if (item.title == '在线加油') { uni.navigateTo({ url: item.ext1 }) // } else if (item.title == '肯德基') { // uni.navigateTo({ // // url: '/pages/tabBar/order/order?id=1' // url: '../../../qianzhu-KFC/home/home' // }) // } else if (item.title == '电影票') { // uni.navigateTo({ // // url: '/pages/tabBar/order/order?id=2' // // url: '/qianzhu-Starbucks/home/home' // }) // } else if (item.title == '话费充值') { // uni.navigateTo({ // url: '../../../subPages/recharge/recharge' // }) // } else if (item.title == '星巴克') { // uni.navigateTo({ // url: '/qianzhu-Starbucks/home/home' // }) // }else if (item.title == '会员充值') { // uni.navigateTo({ // url: '/member-Recharge/choicepage/choicepage' // }) // } else { // uni.showToast({ // title: '暂未开通', // icon: 'none', // duration: 2000 // }) // } }, //轮播跳转活动 jumplottery(item) { if (item.ext1) { uni.navigateTo({ url: item.ext1 }) } }, //单独跳转话费充值 jumphuafei(item) { // if (!app.globalData.userInfo) { // uni.navigateTo({ // url: '../../userLogin/userLogin' // }) // return; // } // if (!app.globalData.userInfo.phone) { // uni.navigateTo({ // url: '../../userLogin/userLogin' // }) // return; // } uni.navigateTo({ url: item.ext1 }) // if (item.title == '汇联通') { // uni.navigateTo({ // url: '/pages/goods/goods-list/goods-list?id=2' // }) // return; // } // if (item.title == '在线加油') { // uni.navigateTo({ // url: '/pages/goods/refuel/refuel' // }) // return; // } // if (item.title == '话费充值') { // uni.navigateTo({ // url: '../../../subPages/recharge/recharge' // }) // return; // } // if (item.title == '电影票') { // uni.navigateTo({ // url: '/pages/tabBar/order/order?id=2' // }) // return; // } // if (item.title == '星巴克') { // uni.navigateTo({ // url: '/qianzhu-Starbucks/home/home' // }) // return; // } // if (item.title == '肯德基') { // uni.navigateTo({ // url: '../../../qianzhu-KFC/home/home' // }) // return; // } // if (item.title == '优选商品') { // uni.navigateTo({ // url: '../../../subPages/preferred-goods/preferred-goods' // }) // return; // } // if (item.title == '优惠券包') { // uni.navigateTo({ // url: '../../../subPages/coupon-package/coupon-package' // }) // return; // } // if (item.title == '会员充值') { // uni.navigateTo({ // url: '/member-Recharge/choicepage/choicepage' // }) // return; // } }, //调整商品列表 goGoodsList(item) { uni.navigateTo({ url: '/pages/goods/goods-list/goods-list?id=' + item }) }, //拨打客服电话 playPhone() { uni.showModal({ title: '客服', content: '4006780738', success: function(res) { if (res.confirm) { uni.makePhoneCall({ phoneNumber: '4006780738', //电话号码 success: function(e) { console.log(e); }, fail: function(e) { console.log(e); } }) } } }) } }, }; </script> <style lang="scss"> page { position: relative; background-color: #F5F5F5; } .popImg { width: 100%; height: 430px; } .h5xfimg { width: 80rpx; bottom: 140rpx; position: fixed; right: 40rpx; } .xfimg { width: 80rpx; bottom: 60rpx; position: fixed; right: 40rpx; } @font-face { font-family: 'HMfont-home'; src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'); } button::after { border: none } .pullDown-effects { position: fixed; //top: calc(100upx - 36vw); top: 0; z-index: 9; width: 100%; height: 36vw; /* #ifdef APP-PLUS */ padding-top: var(--status-bar-height); /* #endif */ image { width: 100%; height: 36vw; } } .status { width: 100%; height: 0; position: fixed; z-index: 10; background-color: #fff; top: 0; /* #ifdef APP-PLUS */ height: var(--status-bar-height); //覆盖样式 /* #endif */ } .header { width: 92%; padding: 0 4%; height: 100upx; display: flex; align-items: center; position: fixed; background-color: #0083f5; top: 0; z-index: 10; /* #ifdef APP-PLUS */ top: var(--status-bar-height); /* #endif */ .addr { width: 120upx; height: 45rpx; flex-shrink: 0; display: flex; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; align-items: center; font-size: 28upx; color: #FFFFFF; .icon { height: 60upx; margin-right: 5upx; display: flex; align-items: center; font-size: 42upx; color: #ffc50a; } } .input-box { width: 100%; height: 70rpx; background-color: #f5f5f5; border-radius: 10rpx; position: relative; display: flex; align-items: center; .icon { display: flex; align-items: center; position: absolute; top: 0; right: 0; width: 60upx; height: 60upx; font-size: 34upx; color: #c0c0c0; } input { padding-left: 28upx; height: 28upx; font-size: 28upx; width: 100%; } } .icon-btn { width: 60upx; height: 60upx; flex-shrink: 0; display: flex; .icon { width: 60upx; height: 60upx; display: flex; justify-content: center; align-items: center; font-size: 42upx; background-color: transparent; } } } .place { background-color: #ffffff; height: 100upx; /* #ifdef APP-PLUS */ margin-top: var(--status-bar-height); /* #endif */ } .viewbor { border-radius: 0px 0px 10px 10px; position: relative; } .swiper { width: 100%; display: flex; justify-content: center; position: absolute; top: 60px; .swiper-box { width: 92%; height: 130px; overflow: hidden; border-radius: 15upx; box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2); //兼容ios,微信小程序 position: relative; z-index: 1; swiper { width: 100%; height: 130px; swiper-item { image { width: 100%; height: 130px; } } } .indicator { position: absolute; bottom: 20upx; left: 20upx; background-color: rgba(255, 255, 255, 0.4); width: 150upx; height: 5upx; border-radius: 3upx; overflow: hidden; display: flex; .dots { width: 0upx; background-color: rgba(255, 255, 255, 1); transition: all 0.3s ease-out; &.on { width: (100%/3); } } } } } .banner { width: 92%; margin: 40upx 4%; image { width: 100%; height: 20vw; border-radius: 10vw; } } .promotion { width: 92%; margin: 0 4%; .text { width: 100%; height: 60upx; font-size: 34upx; font-weight: 600; margin-top: -10upx; } .list { width: 100%; display: flex; justify-content: space-between; .column { width: 43%; padding: 15upx 3%; background-color: #ebf9f9; border-radius: 10upx; overflow: hidden; display: flex; justify-content: space-between; flex-wrap: wrap; .top { width: 100%; height: 40upx; display: flex; align-items: center; margin-bottom: 5upx; .title { font-size: 30upx; } .countdown { margin-left: 20upx; display: flex; height: 40upx; display: flex; align-items: center; font-size: 20upx; view { height: 30upx; background-color: #0083f5; display: flex; justify-content: center; align-items: center; color: #fff; border-radius: 4upx; margin: 0 4upx; padding: 0 2upx; } } } .left { width: 50%; height: 18.86vw; display: flex; flex-wrap: wrap; align-content: space-between; .ad { margin-top: 5upx; width: 100%; font-size: 22upx; color: #acb0b0; } .into { width: 100%; font-size: 24upx; color: #aaa; margin-bottom: 5upx; } } .right { width: 18.86vw; height: 18.86vw; image { width: 18.86vw; height: 18.86vw; } } } } } .category-list { width: 100%; padding: 0 0 30upx 0; background-color: #FFFFFF; border-bottom: solid 2upx #f6f6f6; display: flex; justify-content: flex-start; flex-wrap: wrap; .category { width: 25%; margin-top: 50upx; display: flex; flex-wrap: wrap; .img { width: 100%; display: flex; justify-content: center; image { width: 9vw; height: 9vw; } } .text { margin-top: 16upx; width: 100%; display: flex; justify-content: center; font-size: 24upx; color: #3c3c3c; } } } .goods-list { background-color: #FFFFFF; margin-top: 40px; .title { height: 80rpx; color: #333333; text-align: center; margin-top: 10px; font-size: 30rpx; width: 100px; line-height: 80rpx; margin-bottom: 10px; float: left; } .active_tie { font-size: 42rpx; font-weight: bold; height: 80rpx; color: #333333; margin-top: 10px; text-align: center; width: 100px; line-height: 80rpx; margin-bottom: 10px; float: left; } .loading-text { width: 100%; display: flex; justify-content: center; align-items: center; height: 60upx; color: #979797; font-size: 24upx; } .product-list { width: 92%; padding: 0 4% 3vw 4%; display: flex; justify-content: space-between; flex-wrap: wrap; .product { width: 48%; border-radius: 20upx; background-color: #fff; margin: 0 0 15upx 0; box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1); image { width: 100%; border-radius: 20upx 20upx 0 0; } .name { width: 92%; padding: 8upx 4%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-align: justify; overflow: hidden; font-size: 30upx; } .info { display: flex; justify-content: space-between; align-items: flex-end; width: 92%; padding: 10upx 4% 10upx 4%; .price { color: #e65339; font-size: 30upx; font-weight: 600; } .slogan { color: #807c87; font-size: 24upx; text-decoration: line-through; } } } } } //赠券专区 .orange-wrap { position: relative; box-sizing: border-box; } .orange-title { display: flex; justify-content: space-between; margin-bottom: 20rpx; padding-right: 30rpx; } .orange-title .al { font-weight: 700; font-size: 34rpx; } .orange-title .ar { font-size: 28rpx; color: #777; position: relative; top: 10rpx; } .orange-content { height: 170px; width: 90%; margin-left: 5%; border-radius: 0 0 10px 10px; margin-top: -5px; background-color: white; box-shadow: 0rpx 8rpx 25rpx rgba(0, 0, 0, 0.2); } .swiper-hed { width: 28%; } .orange-content .swiper-item { height: 180rpx; margin-left: 14rpx; margin-top: 14rpx; float: left; } .orange-content .swiper-item .img { width: 100%; height: 100%; // border-Radius:10rpx; } .orange-content .swiper-item .subject { font-size: 26rpx; width: 100%; color: #ff5836; display: flex; align-items: center; } .lookmore { background-color: #e2e2e2; text-align: center; line-height: 140rpx; } .lookmore .moretext { color: #777; font-size: 28rpx; } //弹窗 button::after { border: none } .Popup { width: 600rpx; background-color: #fff; position: fixed; top: 50%; left: 50%; margin-left: -300rpx; transform: translateY(-50%); z-index: 320; } .Popup { .logo-auth { z-index: -1; position: absolute; left: 50%; top: 0%; transform: translate(-50%, -50%); width: 150rpx; height: 150rpx; display: flex; align-items: center; justify-content: center; border: 8rpx solid #fff; border-radius: 50%; background: #fff; } image { height: 80rpx; margin-top: -54rpx; } } .Popup .title { font-size: 28rpx; color: #000; text-align: center; margin-top: 30rpx } .Popup .tip { font-size: 14px; color: #555; padding: 0 24rpx; margin-top: 50rpx; text-align: center; } .Popup .bottom .item { width: 50%; height: 90rpx; background-color: #eeeeee; text-align: center; line-height: 90rpx; font-size: 14px; color: #666; margin-top: 54rpx; } .Popup .bottom .item.on { width: 100% } .flex { display: flex; } .Popup .bottom .item.grant { font-size: 28rpx; color: #fff; font-weight: bold; background-color: #a1bac5; border-radius: 0; padding: 0; } .mask { position: fixed; top: 0; right: 0; left: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.65); z-index: 310; } </style>