<!--pages/store-detail/store-detail.wxml--> <import src="../../template/slider/slider.wxml"/> <import src="../../template/coupon-item/coupon-item.wxml"/> <template is="slider" data="{{slider}}"/> <!-- 店铺简介 --> <view class="store-intro"> <view class="store-intro-list"> <view class="store-adress store-intro-item"> <span class="icon icon-map"></span> <text>地址:{{storeData.store_address}}</text> </view> <view class="store-phone store-intro-item"> <span class="icon icon-phone3"></span> <text bindtap="phoneCal" data-phone="{{storeData.phone}}">电话:{{storeData.phone}}</text> </view> <view class="store-shop-hours store-intro-item"> <span class="icon icon-clock1"></span> <text>营业时间:{{storeData.business_hours}}(周末正常营业)</text> </view> </view> </view> <view class="pt20"></view> <!-- 优惠信息 --> <view class="discount-info"> <view class="normal-title">优惠信息</view> <view class="discount-list"> <view wx:for="{{storeData.store_activity_list}}" class="discount-list-item"> <text class="dtag" style="background-color: {{item.backgroundColor}}">{{item.tag}}</text> <text class="tag-str">{{item.tagStr}}</text> </view> </view> </view> <view class="pt20"></view> <!-- 门店优惠券 --> <view class="store-coupon"> <view class="normal-title">门店优惠券(<text>仅限实体店使用</text>)</view> <view class="store-coupon-list"> <view class="coupon-item" wx:for="{{couponData}}" wx:for-item="cpn"> <view class="coupon-name">{{storeData.store_name + cpn.showAimTitle}}现金券</view> <template is="couponItem" data="{{cpn: cpn, type: 2, toDetail: false, index: index}}" /> <view class="coupon-count-get"> <view class="coupon-count">剩余数量:<text>{{cpn.remain_nums}}</text></view> <button type="default" size="mini" disabled="{{cpn.coupon_sta==2 || cpn.coupon_sta==3}}" class="btn-get-coupon" data-index="{{index}}" data-cpn="{{cpn}}" catchtap="getCoupon">立即领取</button> </view> </view> </view> </view> |
/* pages/store-detail/store-detail.wxss */ .normal-title{ padding: 30rpx 20rpx; background-color: #fff; border-bottom: solid #e8e8e8 3rpx; font-weight: normal; font-size: 32rpx; color: #222; } .normal-title text{ font-weight: bold; color: #e61773; } .store-intro{ background-color: #fff; border-bottom: solid #e8e8e8 1px; } .store-intro-list .store-intro-item{ padding: 30rpx 20rpx 30rpx 70rpx; border-bottom: solid #e8e8e8 1px; } .store-intro-list .store-shop-hours{ border-bottom: 0; } .store-intro-list .store-intro-item .icon{ margin-left: -50rpx; margin-right: 5rpx; font-size: 32rpx; } .store-intro-list .store-intro-item text{ line-height: 1.4; font-size: 28rpx; color: #222; } .discount-info{ background-color: #fff; } .discount-list{ padding: 10rpx 0; overflow: hidden; } .discount-list .discount-list-item{ padding: 12rpx 20rpx 12rpx 70rpx; } .discount-list .discount-list-item .dtag{ margin-left: -50rpx; padding: 2rpx 6rpx; font-size: 24rpx; } .discount-list .discount-list-item .tag-str{ line-height: 1.35; padding-left: 10rpx; font-size: 28rpx; color: #666; word-break: break-all; } /*优惠小标签*/ .dtag{ display: inline-block; margin: 4rpx; padding: 4rpx 6rpx; color: #fff; font-style: normal; font-weight: normal; background-color: #49caec; border-radius: 4px; font-size: 24rpx; } .dtag.arrow{ position: relative; margin-right: 16rpx; } .dtag.arrow .b{ content:''; margin-top: -6rpx; position: absolute; top: 50%; right: -12rpx; width: 0; height: 0; border: solid 8rpx; border-color: transparent; border-left-color: #fd1268; } .store-coupon .store-coupon-list .coupon-item{ margin-bottom: 20rpx; padding: 0 20rpx; background-color: #fff; } .store-coupon .store-coupon-list .coupon-name{ padding: 20rpx 0; font-size: 28rpx; } .coupon-count-get{ display: flex; justify-content: space-between; padding: 20rpx 0; } .coupon-count-get .coupon-count{ font-size: 24rpx; line-height:2.3; } .coupon-count-get .coupon-count text{ color:#e61773; } .coupon-count-get .btn-get-coupon{ margin-left: 0; margin-right: 0; } @import "../../css/font.wxss"; @import "../../template/coupon-item/coupon-item.wxss"; |
// pages/store-detail/store-detail.js var util = require('../../utils/util.js'); var ports = require('../../utils/ports.js'); var polyfill = require('../../utils/polyfill.js'); //引入灯箱组件 var Slider = require('../../template/slider/slider.js'); //引入优惠券组件 var couponItem = require('../../template/coupon-item/coupon-item.js'); // 优惠标签配色 var tagColor = util.getTagColor(); Page({ data:{ couponData: {}, store_id: 0, // 门店数据 storeData: {}, // 购物车数据 cartData: [], show2: true }, phoneCal: function(e){ var phone = e.currentTarget.dataset.phone; wx.makePhoneCall({ phoneNumber: phone }); }, // 处理优惠标签(优惠信息) handleAct: function(str,index){ if(!str){ return ''; } var arrStr=str.split(/[::]/), tag=arrStr[0].replace(/[[]]/g,''), tagStr=arrStr[1]; return { backgroundColor: tagColor[index % tagColor.length], tag: tag, tagStr: tagStr }; }, getCoupon: function(e){ var cpn = e.currentTarget.dataset.cpn; var index = e.currentTarget.dataset.index; if(cpn.coupon_sta == 2){ return wx.showToast({ title: '已领完', duration: 1000 }); } if(cpn.coupon_sta == 3){ return wx.showToast({ title: '已过期', duration: 1000 }); } return util.getToken().then(token => { util.wxRequest({ method: 'POST', url: ports.couponConversion, header:{ 'X-Auth-Token':token, 'content-type': 'application/x-www-form-urlencoded' }, data: { pcode: cpn.code } }).then((result)=> { wx.showToast({ title: result.msg, duration: 1000 }); return Promise.resolve(result); }).catch((e)=>{ wx.showToast({ title: e, duration: 1000 }); return Promise.reject(e); }); }); }, getData: function(){ var _self = this, token = util.getStorage("token"), ajaxCfg={ method: 'POST', url: ports.storeDetail, header: { 'content-type': 'application/x-www-form-urlencoded' }, data:{ id: _self.data.store_id } }; if(token){ ajaxCfg.header = polyfill.object.assignIn(ajaxCfg.header, { 'X-Auth-Token':token }); } util.wxRequest(ajaxCfg).then((result)=> { // console.log(result); var couponList = result.data.promotion_code_list.list; couponList.forEach((cpn)=>{ cpn.isexpend = false; }); this.slider.initData(result.data.store_info.store_picture_list); //初始化swiper图片 var store_activity_list = result.data.store_info.store_activity_list; for(let i = 0; i < store_activity_list.length; i++){ result.data.store_info.store_activity_list[i] = this.handleAct(store_activity_list[i], i); } this.setData({ couponData: couponList, storeData: result.data.store_info }); this.couponItem.init(); return Promise.resolve(result); }).catch((e)=>{ return Promise.reject(e); }); }, onLoad:function(options){ //初始化灯箱组件 this.slider = new Slider(this); //初始化优惠券组件 this.couponItem = new couponItem(this); this.setData({ store_id: options.store_id }); this.getData(); }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 } }) |
模板简介:该模板名称为【微信小程序五洲到家店面详情地址信息页面设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。