<template> <view> <view class="backcorf06 height100p"></view> <view class="backcorfff backgrd width92 couhead"> <view class="width100 height40p"> <image class="headimg flleft" mode="widthFix" :src="imageUrl+merchanList.highMerchant.merchantLogo"> </image> <view class="store_rig font16 fontwig6 paddtop10">{{merchanList.storeName}}</view> </view> <view class="width90 stoCont"> <view class="width80p flleft mart10"> <view class="font14 fcor666 fontwig6 text2">{{merchanList.address}}</view> <view class="font14 fcor666 mart5">营业时间: 00:00-23:59</view> </view> <view class="width20 flright mart10 fotct" @click="seeloaction"> <image mode="widthFix" style="width: 25px;height: 25px;" :src="imagewxUrl+imgadres1"> </image> <view class="mart5 fcor999 font13">{{distance}}km</view> </view> </view> </view> <view class="width100 height100p mart20"></view> <view class="width92 height80 aliitem backcorfff" style="border-radius: 8px;" v-for="mers in menCoupnList" :key="mers.id"> <view class="width70 flleft"> <view class="width90 fcor333 font16 mart5 fontwig6">{{mers.highCouponModel.couponName}}</view> <view class="width90 fcor666 font14 mart10"> 有效期至:{{mers.useEndTime | formatDate('-')}}</view> </view> <view class="width30 flright"> <view class="store_btn font15 fontwig6" @click="jumpCoupondes(mers.id,mers.highCouponModel.id)">查看详情 </view> </view> </view> <view class="store-no width80 fontwig6 font20 fcor999 fotct mart20" v-if="menCoupnList == '' && user != ''"> 亲、你还没有买券哦~ </view> <button class="store-no width80 fontwig6 font20 fcor999 fotct mart20" v-if="user == '' " @click="getuserinfo"> 点击授权查询个人卡券 </button> <view class="loading-text" v-if="productList != '' ">{{ loadingText }}</view> <!-- <authorize></authorize> --> </view> </template> <script> import { getMerchantStoreById, getCouponListByStoreId, getUserInfo } from '../../../Utils/Api.js'; // import authorize from '../../../components/Authorize'; let app = getApp(); export default { components: { // authorize }, data() { return { imageUrl: app.globalData.imgUrl, imagewxUrl: app.globalData.imageWxImg, imgadres1: 'dhl.png', merchanId: '', merchanList: '', distance: '', menCoupnList: [], pageNum: 1, pageSize: 10, isNoMoreData: false, loadingText: '', user: '' } }, filters: { //过滤器 用于格式化时间 formatDate: function(value, spe = '/') { let data = new Date(value); let year = data.getFullYear(); let month = data.getMonth() + 1; let day = data.getDate(); let h = data.getHours(); let mm = data.getMinutes(); let s = data.getSeconds(); month = month > 10 ? month : "0" + month; day = day > 10 ? day : "0" + day; h = h > 10 ? h : "0" + h; mm = mm > 10 ? mm : "0" + mm; s = s > 10 ? s : "0" + s; return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`; } }, onLoad(option) { let that = this; that.merchanId = option.id; that.distance = option.juli; uni.getStorage({ key: 'store_id', success(e) { if (e.data) { that.merchanId = e.data; } } }) uni.getStorage({ key: 'store_juli', success(e) { if (e.data) { that.distance = e.data; } } }) }, onShow() { this.user = app.globalData.userInfo; this.getMerchantStoreById(); if (this.user) { this.getCouponListByStoreId(); } }, onReachBottom() { this.getCouponListByStoreId(); }, methods: { //获取登陆信息 getuserinfo() { uni.navigateTo({ url: '../../userLogin/userLogin' }) }, //查询门店详情 getMerchantStoreById() { uni.showLoading({ title: '加载中...' }) let params = { id: this.merchanId } getMerchantStoreById(params).then(res => { if (res.return_code == '000000') { this.merchanList = res.return_data; uni.hideLoading(); } else { uni.hideLoading() } }) }, // 跳转卡券详情 jumpCoupondes(e, item) { uni.navigateTo({ url: '../coupon-details/coupon-details?id=' + e + '&mendId=' + item }) }, //前往导航 seeloaction() { // #ifdef H5 window.open( `//uri.amap.com/navigation?from=${app.globalData.longitude},${app.globalData.latitude},我的位置&to=${this.merchanList.longitude},${this.merchanList.latitude},${this.merchanList.address}&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=1` ) // #endif // #ifdef MP uni.openLocation({ latitude: Number(this.merchanList.latitude), //目的地的定位 longitude: Number(this.merchanList.longitude), //目的地的定位 name: this.merchanList.storeName, address: this.merchanList.address }) // #endif }, //查询门店对应的卡券 getCouponListByStoreId() { uni.showLoading({ title: '加载中...' }) if (this.isNoMoreData) { uni.hideLoading() this.loadingText = '到底了'; return false; } let pagenum = this.pageNum; let params = { pageNum: pagenum, storeId: this.merchanId, pageSize: this.pageSize } getCouponListByStoreId(params).then(res => { if (res.return_code == '000000' && res.return_data.list != '') { uni.hideLoading(); this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true; this.menCoupnList = this.menCoupnList.concat(res.return_data.list); if (res.return_data.total == (this.pageNum * this.pageSize)) { this.isNoMoreData = true; } this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum; } else { this.menCoupnList = []; uni.hideLoading() } }) }, } } </script> <style lang="scss"> page { background-color: #f5f5f5; } .couhead { position: absolute; top: 60px; height: 260rpx; border-radius: 10rpx; .headimg { width: 160rpx; max-height: 160rpx; margin-top: -40px; margin-left: 20px; } .store_rig { margin-left: 210rpx; } .store_zp { background: #e6f2fe; color: #0084f5; padding-left: 4px; padding-right: 4px; } } .store_btn { border: 2px solid #0084f5; color: #0084f5; width: 150rpx; padding: 6px; text-align: center; border-radius: 5px; } .store-des { width: 80px; height: 80px; text-align: center; color: white; font-size: 28px; border-radius: 10px; background-color: red; } .loading-text { width: 100%; display: flex; justify-content: center; align-items: center; height: 60upx; color: #979797; font-size: 24upx; } .store-cont { margin-left: 90px; } .store-map image { width: 45px; height: 45px; } .store-no { height: 80px; line-height: 80px; border: 1px solid #b2b2b2; border-radius: 10px; } .store-list { height: 100px; border: 1px solid #b2b2b2; border-radius: 5px; } .store-list image { width: 60px; height: 60px; } .store-jdes { width: 70px; height: 30px; line-height: 30px; background-color: #eb5823; color: #FFFFFF; font-size: 12px; padding: 0px; } .store-ims { margin-left: 75px; } </style>