<template> <view> <!-- #ifdef H5 --> <view class="header"> <!-- 头部-默认显示 --> <view class="before" :style="{ opacity: 1 - afterHeaderOpacity, zIndex: beforeHeaderzIndex }"> <view class="back"> <view class="icon xiangqian" @tap="back" v-if="showBack"></view> </view> <view class="middle"></view> </view> </view> <!-- #endif --> <!-- 底部菜单 --> <view class="footer"> <!-- <button v-if="user == '' " class="width100 fotct btnfot" @click="getuserinfo"> 立即兑换 </button> --> <button class="width100 fotct btnfot" @click="buy"> 立即兑换 </button> </view> <!-- 商品主图轮播 --> <view class="swiper-box"> <swiper circular="true" autoplay="true" @change="swiperChange"> <swiper-item v-for="(swiper,index) in swiperList" :key="index"> <image mode="widthFix" :src="imageUrl+swiper" @click="perImage(swiper)"></image> </swiper-item> </swiper> <view class="indicator">{{currentSwiper+1}}/{{swiperList.length}}</view> </view> <view class="width100 height60 backcorlr"> <view class="flleft width70 fcorfff" v-if="goodsData[0].payType == 1"> <view class="font13 mart10 margle20">¥<text class="font20 paddleft5">{{goodsData[0].discountPrice}}</text></view> <view class="font15 margle20">门市参考价: <text class="paddleft5" style="text-decoration: line-through;">¥{{goodsData[0].salesPrice}}</text></view> </view> <view class="flleft width70 fcorfff" v-else> <view class="font13 mart10 margle20"> <image style="width: 20px;height: 20px;vertical-align: sub;" src="../../static/img/jfx.png"> </image><text class="font20 paddleft5">{{goodsData[0].discountPrice *100}}</text> </view> <view class="font15 margle20">门市参考价: <image style="width: 20px;height: 20px;vertical-align: sub;" src="../../static/img/jfh.png"> </image><text class="paddleft5" style="text-decoration: line-through;">{{goodsData[0].salesPrice *100}}</text></view> </view> <view class="flright width30"> <view class="xgnum">限购{{goodsData[0].limitNumber}}件</view> </view> </view> <!-- 标题 价格 --> <view class="info-box goods-info"> <view class="font16 fcor333 fontwig6"> {{goodsData[0].couponName}} </view> <view class="mart10 width100 font14 fcor999 height20"> <view class="width70 flleft">有效期至: {{goodsData[0].salesEndTime | formatDate('-')}}</view> <view class="width30 flright fotrt" v-if="goodsData[0].couponSource != 4">库存 : {{goodsData[0].stockCount}}件 </view> </view> </view> <view class="height60 width100 backcorfff" v-if="goodsData[0].handselCouponList != '' " @click="showPopup()"> <view class="width80p flleft" style="padding-left: 4%;line-height: 60px; "> 赠送卡券 </view> <view class="width15 flright fotct"> <image class="jtcs" src="../../static/img/jt.png"></image> </view> </view> <!-- 详情 --> <view class="description"> <view class="title">———— 商品详情 ————</view> <view class="content marb65"> <image mode="widthFix" class="width100" v-for="codes in couponDesc" :key="codes" :src="imageUrl+codes" @click="perImage(codes)"> </image> </view> </view> <wybPopup ref="popup" type="bottom" width="500" scrollY="true" radius="6" :showCloseIcon="true"> <view class="fotct font18 fontwig6 fcor333 mart10 height30">赠送卡券</view> <view class="width92 height110 tccs mart10" v-for="product in goodsData[0].handselCouponList" :key="product.id"> <!-- mode="widthFix" :src="imageUrl+product.highCouponModel.couponImg" --> <image mode="widthFix" class="flleft" src="../../static/img/logo.png"></image> <view class="tcrig"> <view class="font16 fontwig6 fcor333 text1">{{ product.highCouponModel.couponName }}</view> <view class="font13 fcor999 mart5">有效期至:201-05-15 22:59:59(待改)</view> <view class="info mart5" v-if="product.highCouponModel.payType == 1"> <view class="price">¥{{ product.highCouponModel.discountPrice}}</view> <view class="slogan" v-if="product.highCouponModel.discountPrice !== product.highCouponModel.salesPrice"> ¥{{ product.highCouponModel.salesPrice}}</view> </view> <view class="info mart5" v-else> <view class="price"> <image style="width: 15px;height: 15px;vertical-align: sub;" src="../../static/img/jfx.png"> </image>{{ product.highCouponModel.discountPrice*100}} </view> <view class="slogan" v-if="product.highCouponModel.discountPrice !== product.highCouponModel.salesPrice"> <image style="width: 15px;height: 15px;vertical-align: sub;" src="../../static/img/jfh.png"> </image>{{ product.highCouponModel.salesPrice*100}} </view> </view> </view> </view> </wybPopup> <!-- <authorize></authorize> --> </view> </template> <script> import { getCouponById, GetPhoneNumber, getUserInfo } from "../../Utils/Api.js"; // import authorize from '../../components/Authorize.vue' import wybPopup from '../../components/wyb-popup/wyb-popup.vue'; let app = getApp() export default { components: { // authorize, wybPopup }, data() { return { //控制渐变标题栏的参数 beforeHeaderzIndex: 11, //层级 afterHeaderzIndex: 10, //层级 beforeHeaderOpacity: 1, //不透明度 afterHeaderOpacity: 0, //不透明度 //是否显示返回按钮 // #ifndef MP showBack: true, // #endif //轮播主图数据 swiperList: [], couponDesc: [], //轮播图下标 currentSwiper: 0, anchorlist: [], //导航条锚点 selectAnchor: 0, //选中锚点 serviceClass: '', //服务弹窗css类,控制开关动画 specClass: '', //规格弹窗css类,控制开关动画 shareClass: '', //分享弹窗css类,控制开关动画 // 商品信息 goodsData: "", selectSpec: null, //选中规格 isKeep: false, //收藏 //商品描述html desid: '', imageUrl: app.globalData.imgUrl, 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) { this.desid = option.id; this.user = app.globalData.userInfo; this.getCouponById(); // #ifdef MP //小程序隐藏返回按钮 this.showBack = false; // #endif //option为object类型,会序列化上个页面传递的参数 }, onReady() { // this.calcAnchor(); //计算锚点高度,页面数据是ajax加载时,请把此行放在数据渲染完成事件中执行以保证高度计算正确 }, onPageScroll(e) {}, //上拉加载,需要自己在page.json文件中配置"onReachBottomDistance" onReachBottom() { // uni.showToast({ title: '触发上拉加载' }); }, mounted() { }, methods: { //卡券详情 getCouponById() { uni.showLoading({ title: '加载中...' }) let params = { couponId: this.desid } getCouponById(params).then(res => { if (res.return_code == '000000') { this.goodsData = [res.return_data]; this.swiperList = res.return_data.couponCarouselImg.split(','); this.couponDesc = res.return_data.couponDesc.split(','); uni.hideLoading() } else { uni.hideLoading() } }) }, //显示弹出 showPopup() { this.$refs.popup.show(); }, //查看大图 perImage(item) { uni.previewImage({ current: 0, //预览图片的下标 urls: [this.imageUrl + item] //预览图片的地址,必须要数组形式,如果不是数组形式就转换成数组形式就可以 }) }, /** * 跳转门店详情 */ jumpstore() { uni.navigateTo({ url: './store-list/store-list?id=' + this.desid }) }, //轮播图指示器 swiperChange(event) { this.currentSwiper = event.detail.current; }, //消息列表 toMsg() { uni.navigateTo({ url: '../msg/msg' }) }, // 分享 // share() { // this.shareClass = 'show'; // }, hideShare() { this.shareClass = 'hide'; setTimeout(() => { this.shareClass = 'none'; }, 150); }, //收藏 keep() { this.isKeep = this.isKeep ? false : true; }, // 加入购物车 joinCart() { if (this.selectSpec == null) { return this.showSpec(() => { uni.showToast({ title: "已加入购物车" }); }); } uni.showToast({ title: "已加入购物车" }); }, //获取登陆信息 getuserinfo() { 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(); that.user = res.return_data.object.highUser; 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 }) that.buy(); } else { uni.hideLoading(); uni.showToast({ title: res.return_msg, icon: 'none', duration: 2000 }) } }); }, fail: res => { uni.hideLoading(); uni.showToast({ title: "微信登录授权失败", icon: "none" }); } }) }, buy() { let that = this; uni.showToast({ title: '提交订单...', icon: 'none', duration: 2000, success() { uni.navigateTo({ url: '../order/confirmation?id=' + that.goodsData[0].id }) } }) }, //跳转评论列表 showComments(goodsid) { }, //选择规格 setSelectSpec(index) { this.selectSpec = index; }, //减少数量 sub() { if (this.goodsData.number <= 1) { return; } this.goodsData.number--; }, //增加数量 add() { this.goodsData.number++; }, //跳转锚点 toAnchor(index) { this.selectAnchor = index; uni.pageScrollTo({ scrollTop: this.anchorlist[index].top, duration: 200 }); }, //计算锚点高度 calcAnchor() { this.anchorlist = [{ name: '主图', top: 0 }, { name: '评价', top: 0 }, { name: '详情', top: 0 } ] let commentsView = uni.createSelectorQuery().select("#comments"); commentsView.boundingClientRect((data) => { let statusbarHeight = 0; //APP内还要计算状态栏高度 // #ifdef APP-PLUS statusbarHeight = plus.navigator.getStatusbarHeight() // #endif let headerHeight = uni.upx2px(100); this.anchorlist[1].top = data.top - headerHeight - statusbarHeight; this.anchorlist[2].top = data.bottom - headerHeight - statusbarHeight; }).exec(); }, //返回上一页 back() { uni.navigateBack(); }, //服务弹窗 showService() { console.log('show'); this.serviceClass = 'show'; }, //关闭服务弹窗 hideService() { this.serviceClass = 'hide'; setTimeout(() => { this.serviceClass = 'none'; }, 200); }, //规格弹窗 showSpec(fun) { console.log('show'); this.specClass = 'show'; this.specCallback = fun; }, specCallback() { return; }, //关闭规格弹窗 hideSpec() { this.specClass = 'hide'; //回调 this.selectSpec && this.specCallback && this.specCallback(); this.specCallback = false; setTimeout(() => { this.specClass = 'none'; }, 200); }, discard() { //丢弃 } } }; </script> <style lang="scss"> page { background-color: #f8f8f8; } button::after { border: none } .jtcs { width: 40rpx; height: 40rpx; margin-top: 40rpx; } .tccs { box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.2); border: 1px solid #f6f6f6; border-radius: 8px; align-items: center; display: flex; image { width: 170rpx; max-height: 170rpx; } } .tcrig { margin-left: 20rpx; } .info { display: flex; justify-content: space-between; align-items: flex-end; width: 92%; .price { color: #e65339; font-size: 15px; font-weight: 600; display: flex; align-items: center; } .slogan { color: #807c87; font-size: 24upx; text-decoration: line-through; } } .xgnum { background-color: #FFFFFF; color: #ff722e; height: 30px; line-height: 30px; font-size: 13px; width: 60%; padding-left: 5%; padding-right: 5%; border-radius: 15px; margin-top: 15px; text-align: center; font-weight: 600; } @keyframes showPopup { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes hidePopup { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes showLayer { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } @keyframes hideLayer { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } .icon { font-size: 26upx; } .status { width: 100%; height: 0; position: fixed; z-index: 10; top: 0; /* #ifdef APP-PLUS */ height: var(--status-bar-height); //覆盖样式 /* #endif */ background-color: #f1f1f1; transition: opacity 0.05s linear; } .header { width: 100%; height: 100upx; display: flex; align-items: center; position: fixed; top: 0; z-index: 10; /* #ifdef APP-PLUS */ top: var(--status-bar-height); /* #endif */ .before, .after { width: 92%; padding: 0 4%; height: 100upx; display: flex; align-items: center; position: fixed; top: 0; /* #ifdef APP-PLUS */ top: var(--status-bar-height); /* #endif */ transition: opacity 0.05s linear; .back { width: 125upx; height: 60upx; flex-shrink: 0; .icon { margin-left: -10%; width: 60upx; height: 60upx; display: flex; align-items: center; justify-content: center; font-size: 42upx; } } .middle { width: 100%; } .icon-btn { width: 125upx; height: 60upx; flex-shrink: 0; display: flex; .icon { &:first-child { margin-right: 5upx; } width: 60upx; height: 60upx; display: flex; justify-content: center; align-items: center; font-size: 42upx; } } } .before { .back { .icon { color: #fff; background-color: rgba(0, 0, 0, 0.2); border-radius: 100%; } } .icon-btn { .icon { color: #fff; background-color: rgba(0, 0, 0, 0.2); border-radius: 100%; } } } .after { background-color: #f1f1f1; .back { .icon { color: #666; } } .icon-btn { .icon { color: #666; } } .middle { font-size: 32upx; height: 90upx; display: flex; justify-content: center; align-items: center; padding: 0 7%; view { width: (100%/3); padding: 0 3%; margin: 0 3%; display: flex; justify-content: center; align-items: center; &.on { margin-bottom: -4upx; color: #f47952; border-bottom: solid 4upx #f47952; } } } } } .swiper-box { position: relative; width: 100%; swiper { width: 100%; swiper-item { image { width: 100%; } } } .indicator { display: flex; justify-content: center; align-items: center; padding: 0 25upx; height: 40upx; border-radius: 40upx; font-size: 22upx; position: absolute; bottom: 20upx; right: 20upx; color: #fff; background-color: rgba(0, 0, 0, 0.2); } } .info-box { width: 92%; padding: 4%; background-color: #fff; margin-bottom: 20rpx; } .goods-info { .price { font-size: 15px; font-weight: 600; color: #f47925; } .zprice { text-decoration: line-through; } .title { font-size: 30upx; } } .spec { .row { width: 100%; display: flex; align-items: center; margin: 5px 0 5px 0; .text { font-size: 24upx; color: #a2a2a2; margin-right: 20upx; } .content { font-size: 28upx; display: flex; flex-wrap: wrap; .serviceitem { margin-right: 10upx; } .sp { width: 100%; display: flex; view { background-color: #f6f6f6; padding: 5upx 10upx; color: #999; margin-right: 10upx; font-size: 20upx; border-radius: 5upx; &.on { border: solid 1upx #f47952; padding: 4upx 8upx; } } } } .arrow { position: absolute; right: 4%; .icon { color: #ccc; } } } } .comments { .row { width: 100%; height: 40upx; display: flex; align-items: center; margin: 0 0 30upx 0; .text { font-size: 30upx; } .arrow { font-size: 28upx; position: absolute; right: 4%; color: #17e6a1; .show { display: flex; align-items: center; .icon { color: #17e6a1; } } } } .comment { width: 100%; .user-info { width: 100%; height: 40upx; display: flex; align-items: center; .face { width: 40upx; height: 40upx; margin-right: 8upx; image { width: 40upx; height: 40upx; border-radius: 100%; } } .username { font-size: 24upx; color: #999; } } .content { margin-top: 10upx; font-size: 26upx; } } } .description { .title { width: 100%; height: 80upx; display: flex; justify-content: center; align-items: center; font-size: 26upx; color: #999; } } .footer { position: fixed; bottom: 0upx; width: 100%; height: 99upx; color: #FFFFFF; border-top: solid 1upx #eee; background-color: #0083f5; z-index: 2; display: flex; justify-content: space-between; align-items: center; .btnfot { text-align: center; padding: 0; border-radius: 0; height: 48px; background-color: #0083f5; color: #ffffff; } .icons { display: flex; height: 80upx; margin-left: -4%; .box { width: 80upx; height: 80upx; display: flex; justify-content: center; flex-wrap: wrap; .icon { font-size: 40upx; color: #828282; } .text { display: flex; justify-content: center; width: 100%; font-size: 22upx; color: #666; } } } .btn { height: 80upx; border-radius: 40upx; overflow: hidden; display: flex; margin-right: -2%; .joinCart, .buy { height: 80upx; padding: 0 40upx; color: #fff; display: flex; align-items: center; font-size: 28upx; } .joinCart { background-color: #f0b46c; } .buy { background-color: #0083f5; } } } .popup { position: fixed; top: 0; width: 100%; height: 100%; z-index: 20; display: none; .mask { position: fixed; top: 0; width: 100%; height: 100%; z-index: 21; background-color: rgba(0, 0, 0, 0.6); } .layer { position: fixed; z-index: 22; bottom: -70%; width: 92%; padding: 0 4%; height: 70%; border-radius: 20upx 20upx 0 0; background-color: #fff; display: flex; flex-wrap: wrap; align-content: space-between; .content { width: 100%; padding: 20upx 0; } .btn { width: 100%; height: 100upx; .button { width: 100%; height: 80upx; border-radius: 40upx; color: #fff; display: flex; align-items: center; justify-content: center; background-color: #f47952; font-size: 28upx; } } } &.show { display: block; .mask { animation: showPopup 0.2s linear both; } .layer { animation: showLayer 0.2s linear both; } } &.hide { display: block; .mask { animation: hidePopup 0.2s linear both; } .layer { animation: hideLayer 0.2s linear both; } } &.none { display: none; } &.service { .row { margin: 30upx 0; .title { font-size: 30upx; margin: 10upx 0; } .description { font-size: 28upx; color: #999; } } } &.spec { .title { font-size: 30upx; margin: 30upx 0; } .sp { display: flex; view { font-size: 28upx; padding: 5upx 20upx; border-radius: 8upx; margin: 0 30upx 20upx 0; background-color: #f6f6f6; &.on { padding: 3upx 18upx; border: solid 1upx #f47925; } } } .length { margin-top: 30upx; border-top: solid 1upx #aaa; display: flex; justify-content: space-between; align-items: center; padding-top: 20upx; .text { font-size: 30upx; } .number { display: flex; justify-content: center; align-items: center; .input { width: 80upx; height: 60upx; margin: 0 10upx; background-color: #f3f3f3; display: flex; justify-content: center; align-items: center; text-align: center; input { width: 80upx; height: 60upx; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 26upx; } } .sub, .add { width: 60upx; height: 60upx; background-color: #f3f3f3; border-radius: 5upx; .icon { font-size: 30upx; width: 60upx; height: 60upx; display: flex; justify-content: center; align-items: center; } } } } } } .share { display: none; &.show { display: block; .mask { animation: showPopup 0.15s linear both; } .layer { animation: showLayer 0.15s linear both; } } &.hide { display: block; .mask { animation: hidePopup 0.15s linear both; } .layer { animation: hideLayer 0.15s linear both; } } &.none { display: none; } .mask { background-color: rgba(0, 0, 0, .5); position: fixed; width: 100%; height: 100%; top: 0; z-index: 11; } .layer { width: 92%; position: fixed; z-index: 12; padding: 0 4%; top: 100%; background-color: rgba(255, 255, 255, 0.9); .list { width: 100%; display: flex; padding: 10upx 0 30upx 0; .box { width: 25%; display: flex; justify-content: center; flex-wrap: wrap; image { width: 13.8vw; height: 13.8vw; } .title { margin-top: 10upx; display: flex; justify-content: center; width: 100%; font-size: 26upx; } } } .btn { width: 100%; height: 100upx; display: flex; justify-content: center; align-items: center; font-size: 28upx; border-top: solid 1upx #666666; } .h1 { width: 100%; height: 80upx; display: flex; justify-content: center; align-items: center; font-size: 34upx; } } } </style>