<template> <view class="content"> <u-swiper height="250" @click="clickBanner" :list="imageTopList"></u-swiper> <!-- 导航按钮 --> <view class="nav"> <u-grid :col="4" :border="false" @click="toPage"> <u-grid-item :index="3"> <u-image width="90rpx" height="90rpx" src="/static/hexiao.png"></u-image> <view class="grid-text">投递/兑换</view> </u-grid-item> <u-grid-item :index="0"> <u-image width="90rpx" height="90rpx" src="/static/zhinan.png"></u-image> <view class="grid-text">回收分类</view> </u-grid-item> <u-grid-item :index="1"> <u-image width="90rpx" height="90rpx" src="/static/liucheng.png"></u-image> <view class="grid-text">使用指南</view> </u-grid-item> <u-grid-item :index="2"> <u-image width="90rpx" height="90rpx" src="/static/shouyi.png"></u-image> <view class="grid-text">投递二维码</view> </u-grid-item> </u-grid> </view> <!-- 网点 --> <view class="storeList"> <u-section title="附近的回收机" :right="false" line-color="#01c9b2" class="store-section"></u-section> <view class="stores-box"> <view class="stores-item" v-for="item in stationDataList" :key="item.id" @click="viewStore(item)"> <view class="item-con"> <image src="/static/md-icon.png" class="item-icon"></image> <view class="s-name item-main">{{ item.name }}</view> </view> <view class="item-con"> <image src="/static/dz-icon.png" class="item-icon"></image> <view class="s-address item-main"> <view>{{ item.provinceName||'' }}{{ item.cityName||'' }}{{ item.districtName||'' }}{{ item.address||'' }}</view> <view> <u-icon name="map-fill" color="#01c9b2" size="30"></u-icon> {{ getDistanct(item) }}KM <u-icon name="arrow-right" color="#999" size="20"></u-icon> </view> </view> </view> <view class="item-con"> <image src="/static/time-icon.png" class="item-icon"></image> <view class="s-time item-main"> <view> <text>营业时间:</text> <text v-for="(tItem, tInd) in item.deliveryTimeRuleItemList" :key="tInd"> {{ tItem.openTime }} - {{ tItem.closeTime }}{{ tInd == item.deliveryTimeRuleItemList.length - 1 ? '' : ',' }} </text> </view> </view> </view> </view> <view v-if="stationDataList.length==0"> <u-empty icon-size="60" text="暂无数据" mode="list"></u-empty> </view> </view> </view> <!-- 转盘浮动图片 --> <view class="luckwheel-fixed" v-if="showFixedLottery" @click="toLuckDraw()"> <u-image width="140rpx" height="140rpx" src="/static/luckwheel-fixed1.gif"></u-image> </view> <!-- 抽奖活动弹框 --> <u-mask :show="showLottery" @click="showLottery = false"> <view class="lottery-content"> <view> <view class="bg"> <u-image src="/static/toLottery.png" width="495rpx" height="466rpx" @click="toLuckDraw"></u-image> </view> <view class="close-btn" @click="showLottery = false"> <u-image src="/static/closeLottery.png" width="54rpx" height="163rpx"></u-image> </view> </view> </view> </u-mask> </view> </template> <script> import { getCartList, addGoodsToCart, deleteGoodsFormCart, updateGoodsBuyQty } from '@/api/shoppingCart.js' import {findEnable,findCustomerTimes} from '@/api/luckyDraw.js' import {bannerList} from '@/api/banner.js' import {getLookUpDatas,openDevice} from '@/api/data.js' import {stationList} from '@/api/station.js' import {checkLogin,getUserInfo} from '@/api/login.js' import {parseQueryString} from '@/libs/tools.js' import {sellerFindByPartnerNo} from '@/api/user.js' import moment from 'moment' export default { data() { return { imageTopList: [], stationDataList: [] ,// 附近网点列表 hasLogin: false, userData: null, showLottery: false, // 是否显示抽奖弹框 showFixedLottery: false, hasShowHd: false } }, onLoad() { // 检查更新 this.checkUpdate() // 查询购物车列表 this.getCartList() // 刷新购物车列表 uni.$on("getCartList",item =>{ this.getCartList() }) // 更新购物车数量 uni.$on('getCarCount',item => { this.getCarCount() }) // 查询用户信息 uni.$on("getUserInfo",item=>{ this.getUserInfo(item) }) // 开启分享 uni.showShareMenu({ withShareTicket: true, menus: ['shareAppMessage', 'shareTimeline'] }) }, onUnload() { console.log('onUnload') uni.$off('getCarCount') uni.$off('getCartList') uni.$off('getUserInfo') }, onShareAppMessage(res) { console.log(res) }, onShareTimeline(res) { console.log(res) }, onShow() { // 判断是否有抽奖活动 this.getLuckDraw() // 获取订单状态数据字典 // this.getCodeList('RUBBISH_TYPE','vuex_rubbishType') // 获取顶部轮播图 this.getbannerList() // 获取经纬度 this.getLocation() // 是否登录 checkLogin().then(res => { console.log(res,'checkLogin') this.hasLogin = res.status == 200 if(!this.hasLogin&&!this.$store.state.vuex_noLogin){ uni.navigateTo({ url:"/pages/login/login" }) } }) }, methods: { checkUpdate(){ const updateManager = uni.getUpdateManager(); updateManager.onCheckForUpdate(function (res) { // 请求完新版本信息的回调 console.log(res.hasUpdate); }); updateManager.onUpdateReady(function (res) { uni.showModal({ title: '更新提示', content: '新版本已经准备好,是否重启应用?', success(res) { if (res.confirm) { // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启 updateManager.applyUpdate(); } } }); }); updateManager.onUpdateFailed(function (res) { // 新的版本下载失败 }); }, // 计算距离 getDistanct(item){ return item.distanct&&item.distanct.distance ? (item.distanct.distance / 1000).toFixed(1) : 0 }, // 抽奖弹框 getLuckDraw(){ findEnable().then(res => { if(res.status == 200 && res.data){ this.$u.vuex('vuex_LuckDraw',res.data) // 判断活动是否过期 let a = moment().isBetween(res.data.activeStartTime,res.data.activeEndTime,'days','[]') if(a){ this.showFixedLottery = true // 判断是否有免费抽奖次数 findCustomerTimes({id:res.data.luckyDrawNo}).then(res => { let reTimes = 0 if(res.status == 200){ reTimes = res.data.timesSurplus || 0 } this.$u.vuex('vuex_LuckDrawTimes',reTimes) if(!this.hasShowHd){ this.showLottery = reTimes > 0 this.hasShowHd = true } }) }else{ this.showFixedLottery = false } }else{ this.showFixedLottery = false this.showLottery = false this.$u.vuex('vuex_LuckDraw',null) } }) }, // 获取用户信息 getUserInfo(){ getUserInfo().then(res => { console.log('getUserInfo',res.data) if(res.status == 200){ this.$u.vuex("vuex_userData",res.data) } }) }, // 获取数据字典 getCodeList(code,key) { getLookUpDatas({ type: code }).then(res => { if (res.status == 200) { this.$u.vuex(key, res.data) } }) }, // 获取经纬度 getLocation() { const _this = this; uni.getLocation({ type: 'wgs84', success: function(res) { _this.getStationList(res.longitude, res.latitude) }, fail: function(error) { console.log(error) uni.showToast({ icon: 'none', title: '定位失败' }) } }); }, // 获取网点列表 getStationList(lng, lat) { stationList({ lng: lng, lat: lat }).then(res => { if (res.status == 200) { this.stationDataList = res.data } else { this.stationDataList = [] } }); }, // 获取banner getbannerList(){ bannerList({type:'banner',location:'HOME_TOP'}).then(res=>{ if(res.status==200){ this.imageTopList=res.data } }) }, // 点击banner clickBanner(index){ let row = this.imageTopList[index] console.log(index,row) if(row.jumpType !== 'NONE'){ if(this.hasLogin){ // 如果是大转盘 if(row.jumpUrl.indexOf('pagesA/luckDraw') >= 0){ if(this.showFixedLottery){ uni.navigateTo({ url:row.jumpUrl }) }else{ uni.showToast({ icon: 'none', title: '活动已结束' }) } }else{ uni.navigateTo({ url: row.jumpUrl }) } }else{ this.toLoginPage() } } }, // 查询购物车 getCartList(){ getCartList({}).then(res => { if(res.status == 200){ this.$u.vuex('vuex_cartList', res.data) this.getCarCount() } uni.hideLoading() }) }, // 计算购物车数量 getCarCount(){ let arr = this.$store.state.vuex_cartList || [] let count = 0 arr.map(item=>{ count = count + item.shoppingCartGoodsList.length }) this.$u.vuex('vuex_cartNums', count) }, // 更多商品 toGoods(clsId){ uni.navigateTo({ url:"/pages/goods/goods?id="+clsId }) }, // 去登录 toLoginPage(){ uni.navigateTo({ url: '/pages/login/login' }) }, // 快速导航 toPage(e){ let path=[ '/pages/userCenter/fenlei', '/pages/userCenter/zhinan', '/pages/userCenter/myCode/myCode', '' ] if(e>1){ //判断是否登录 if(this.hasLogin){ if(path[e]!=''){ uni.navigateTo({ url: path[e] }) }else{ // 核销 this.smHx() } }else{ this.toLoginPage() } }else{ uni.navigateTo({ url: path[e] }) } }, // 扫码核销 smHx(){ const _this = this uni.scanCode({ success(e) { console.log(e) // 普通二维码,用户扫箱体的二维码开箱 if(e.scanType == 'QR_CODE'){ let params = parseQueryString(e.result) console.log(params) if(params.codeType == 'hexiao'){ // 扫商户码 _this.getStoreData(params.officialPartnerNo) }else{ // 扫箱体码 _this.openDevice(e.result) } } // 小程序码,用户核销 // if(e.scanType == 'WX_CODE'){ // let scene = e.path.split('?')[1] // uni.navigateTo({ // url: '/pages/checkOut/checkOut?scene='+scene.split("=")[1] // }) // } }, fail(err) { console.log(err) } }) }, // 扫商户码,获取商户信息 getStoreData(params) { let userData = this.$store.state.vuex_userData if(userData.customerRole == 9){ uni.showToast({ icon:"none", title:"抱歉,您目前无法使用乐豆" }) }else{ sellerFindByPartnerNo({officialPartnerNo: params}).then(res => { if(res.status == 200){ let store = res.data uni.navigateTo({ url: '/pages/checkOut/checkOut?store='+encodeURIComponent(JSON.stringify(store)) }) } }) } }, // 开箱 openDevice(data){ let params = parseQueryString(data) openDevice(params).then(res => { console.log(res) if(res.status == 200){ // uni.showToast({ // icon:"none", // title:"认证成功,请点击设备开启按钮" // }) } }) }, // 查看网点 viewStore(item){ uni.navigateTo({ url: '/pages/store/store?id=' + item.id + '&stationNo=' + item.stationNo }) }, // 去抽奖 toLuckDraw(){ uni.navigateTo({ url: '/pagesA/luckDraw/luckDraw' }) } } } </script> <style lang="scss" scoped> .content { // background: url(../../static/topBg.png) no-repeat top center; // background-size: 100%; width: 100%; .nav { margin: 20upx 0; border-radius: 15upx; box-shadow: 0upx 3upx 6upx #eee; overflow: hidden; .grid-text { padding-top: 10upx; } } .luckwheel-fixed{ position: fixed; right: 20rpx; bottom: 20%; } .lottery-content{ display: flex; align-items: center; justify-content: center; height: 100%; > view{ width: 495rpx; height: 466rpx; position: relative; .close-btn{ position: absolute; right: 32rpx; top: 0 ; } .bg{ position: absolute; left: 0; top: 0 ; } } } .storeList { padding: 25upx 0 20upx; .store-section { display: block; margin-bottom: 20rpx; } .stores-box { padding-top: 5upx; .stores-item { background: #ffffff; border-radius: 15upx; box-shadow: 0upx 3upx 6upx #eee; border-bottom: 1px solid #f8f8f8; padding: 10upx 20upx; margin-bottom: 20rpx; &:last-child { border: 0; } .item-con { display: flex; align-items: center; &:last-child { .item-main { border: none; } } .item-icon { width: 30rpx; height: 30rpx; margin-right: 10rpx; flex-shrink: 0; padding: 22rpx 0; } .item-main { font-size: 28rpx; color: #666; padding: 22rpx 0; border-bottom: 1rpx solid #f2f2f2; flex-grow: 1; } .s-name{ font-size: 30rpx; color: #333; } .s-address { display: flex; align-items: center; justify-content: space-between; >view{ &:last-child{ width: 30%; display: flex; align-items: center; justify-content: flex-end; } } } } } } } } </style>