<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" style="height: 188px;" @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 backcorltop alijusstart"> <view class=" width70 fcorfff alijusstart font13 margle20 "> <!-- <view class=""> --> <view class="font14"> ¥<text class="font20 paddleft5">{{goodsData[0].discountPrice}}</text> </view> <view class="font14 width50 margle">价格: <text class="paddleft5" style="text-decoration: line-through;">¥{{goodsData[0].salesPrice}}</text></view> </view> <view class=" width30"> <view class="xgnum">限购{{goodsData[0].limitNumber}}件</view> </view> </view> <!-- 标题 价格 --> <view class="backcorfff border-r paddtop10 paddbotm10 mart10 width94"> <view class="font16 fcor333 fontwig6 mart10 width96"> {{goodsData[0].couponName}} </view> <view class="width96 mart10 alijusstart"> <view class="fcorfff font12 height20" style="background-color: #3da7e7;border-radius: 20px;padding: 0px 5px;">嗨森逛 </view> <view class="width70 fotrt font14 fcor666">月销 {{goodsData[0].monthlySales}}</view> </view> </view> <!-- 服务-规则选择 --> <view class="info-box spec" v-if="goodsData[0].reserveStatus" @click="jumpstore"> <view class="row" style="margin: 0px;"> <view class="text" style="color: #689bc0; font-size: 14px !important;">点击去选择门店</view> <view class="arrow font14" style="color: #689bc0;" v-if="storeName"> {{storeName}} </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">有效期至:{{product.highCouponModel.salesEndTime | formatDate('-')}} </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, 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, //层级 afterHeaderOpacity: 0, //不透明度 //是否显示返回按钮 // #ifndef MP showBack: true, // #endif //轮播主图数据 swiperList: [], couponDesc: [], //轮播图下标 currentSwiper: 0, anchorlist: [], //导航条锚点 // 商品信息 goodsData: "", //商品描述html desid: '', imageUrl: app.globalData.imgUrl, user: '', storeId: '', // 门店id storeName: '' //门店名字 }; }, 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(); app.globalData.storeid = ''; app.globalData.storename = ''; // #ifdef MP //小程序隐藏返回按钮 this.showBack = false; // #endif //option为object类型,会序列化上个页面传递的参数 }, onShow() { this.storeId = app.globalData.storeid; this.storeName = app.globalData.storename; }, 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; }, //获取登陆信息 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; if (this.goodsData[0].stockCount == 0 && this.goodsData[0].couponSource != 4 && this.goodsData[0].couponSource != 5) { uni.showToast({ title: '库存不足', icon: "none" }); return; } if (this.goodsData[0].reserveStatus && this.storeName == '') { uni.showToast({ title: '请选择门店', icon: "none" }); return; } uni.showToast({ title: '提交订单...', icon: 'none', duration: 2000, success() { uni.navigateTo({ url: '../order/confirmation?id=' + that.goodsData[0].id }) } }) }, //返回上一页 back() { uni.navigateBack(); }, } }; </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: #6fbdee; height: 30px; line-height: 30px; font-size: 13px; width: 60%; padding-left: 5%; padding-right: 5%; border-radius: 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; } .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; } } } } .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; } } } </style>