<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 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 backcorlr"> <view class="flleft width70 fcorfff"> <view class="font13 mart15 margle20">¥<text class="font20 paddleft5">{{goodsData.packageDetail.price}}</text></view> </view> <view class="flright width30"> <view class="xgnum">限购{{goodsData.packageDetail.purchaseNum}}件</view> </view> </view> <!-- 标题 价格 --> <view class="info-box goods-info"> <view class="font16 fcor333 fontwig6"> {{goodsData.packageDetail.title}} </view> <view class="mart10 width100 font14 fcor999 height20"> <view class="width70 flleft">库存:{{goodsData.packageDetail.totalStock}}件</view> </view> </view> <!-- 服务-规则选择 --> <view class="height60 width100 backcorfff" @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.discountList" :key="product.id"> <image mode="widthFix" class="flleft" :src="imageUrl+product.discountDetail.discountImg"></image> <view class="tcrig"> <view class="font16 fontwig6 fcor333 text2">{{ product.discountDetail.discountName}}</view> <view class="font14 fcor999 mart5">数量: x{{product.num}}</view> </view> </view> </wybPopup> </view> </template> <script> import { getDiscountPackageDetail } from '../../Utils/Api.js'; import wybPopup from '../../components/wyb-popup/wyb-popup.vue'; let app = getApp() export default { components: { wybPopup }, data() { return { //控制渐变标题栏的参数 beforeHeaderzIndex: 11, //层级 afterHeaderOpacity: 0, //不透明度 //是否显示返回按钮 // #ifndef MP showBack: true, // #endif //轮播主图数据 swiperList: [], couponDesc: [], //轮播图下标 currentSwiper: 0, // 商品信息 goodsData: "", //商品描述html desid: '', imageUrl: app.globalData.imgUrl, }; }, 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.getDiscountPackageDetail(); // #ifdef MP //小程序隐藏返回按钮 this.showBack = false; // #endif //option为object类型,会序列化上个页面传递的参数 }, methods: { //优惠券包详情 getDiscountPackageDetail() { uni.showLoading({ title: '加载中...' }) let params = { packageId: this.desid } getDiscountPackageDetail(params).then(res => { if (res.return_code == '000000') { this.goodsData = res.return_data; this.swiperList = res.return_data.packageDetail.bannerImg.split(','); this.couponDesc = res.return_data.packageDetail.detailsImg.split(','); uni.hideLoading() } else { uni.hideLoading() } }) }, //显示弹出 showPopup() { this.$refs.popup.show(); }, //查看大图 perImage(item) { uni.previewImage({ current: 0, //预览图片的下标 urls: [this.imageUrl + item] //预览图片的地址,必须要数组形式,如果不是数组形式就转换成数组形式就可以 }) }, //轮播图指示器 swiperChange(event) { this.currentSwiper = event.detail.current; }, buy() { let that = this; if (that.goodsData.totalStock == 0) { uni.showToast({ title: '库存不足', icon: 'none', duration: 2000 }) return; } uni.showToast({ title: '提交订单...', icon: 'none', duration: 2000, success() { uni.navigateTo({ url: '../coupon-comfirmation/coupon-comfirmation?id=' + that.desid }) } }) }, //返回上一页 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: #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>