377 lines
7.9 KiB
Vue
377 lines
7.9 KiB
Vue
<template>
|
||
<view class="couponDetail" v-if="loaded">
|
||
<!-- 优惠券信息 -->
|
||
<view class="coupon">
|
||
<view class="coupon-title">{{info.title}}</view>
|
||
<view class="coupon-des" v-if="info.type.value === 2">{{info.price_text}}</view>
|
||
<view class="coupon-date">有效期:{{info.time.interval}}</view>
|
||
<view class="coupon-date">{{info.way}} {{info.whole}} </view>
|
||
</view>
|
||
|
||
<!-- 可用商品 -->
|
||
<view class="goods-title" v-if="info.goods.length>0">可用商品 <span
|
||
style='font-size: 24rpx;color:gray;'>（多选一）</span></view>
|
||
<view class="goods-item" v-if="info.goods.length>0" v-for="(item,index) in info.goods" :key='index'>
|
||
<image :src="item.cover" mode="aspectFill" class="goods-img" @click="goDetail(item.goods_id)" />
|
||
<view class="goods-right">
|
||
<view class="goods-right-title ellipsis-2" @click="goDetail(item.goods_id)">{{item.name}}</view>
|
||
<view class="goods-right-bottom">
|
||
<span class='money'>￥{{item.price}}</span>
|
||
<view class="used" v-if='info.use_way.value=== 1' @click="nowBuy(item)">立即购买</view>
|
||
<!-- <view class="used" v-else @click="clickCode(coupon_grant_id,item.goods_sku_id)">查看兑换码</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 描述 -->
|
||
<view class="describe" v-if="contentArr.length>0">
|
||
<view class="goods-title">使用须知</view>
|
||
<view class="describe-des" v-for="(item,index) in contentArr" :key='index'>
|
||
{{item}}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="clickCodeBtn" v-if='info.use_way.value=== 2' @click="clickCode(coupon_grant_id)">立即兑换</view>
|
||
<!-- <u-toast ref="uToast" /> -->
|
||
<u-toast ref="uToast" />
|
||
|
||
<!-- 二维码弹窗 -->
|
||
<view class="showCode " v-if="showCode">
|
||
<view class="showCodeBg" @click="showCode = false"></view>
|
||
<view :class="['showCodeContent', showCode?'showCodeContentSelect':'showCodeContentSelectNo']">
|
||
<view class="showCodeTitle">优惠券兑换码</view>
|
||
<image :src="code" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getCouponsInfoById,
|
||
getQrcodeByGrantId
|
||
} from '@/apis/interfaces/coupon'
|
||
import GoodTemplate from '@/components/goods-template/goods-template'
|
||
export default {
|
||
data() {
|
||
return {
|
||
coupon_grant_id: '',
|
||
code: '',
|
||
showCode: false,
|
||
loaded:false,
|
||
info: {},
|
||
contentArr: [],
|
||
};
|
||
},
|
||
components: {
|
||
GoodTemplate
|
||
},
|
||
onLoad(e) {
|
||
this.coupon_grant_id = e.id
|
||
this.getList()
|
||
},
|
||
// 监听弹窗页面为false时候，重新请求当前页面
|
||
watch: {
|
||
showCode(newVal, oldVal) {
|
||
if(!newVal && oldVal){
|
||
uni.setStorageSync('refresh',true)
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
// 获取列表
|
||
getList() {
|
||
getCouponsInfoById(this.coupon_grant_id).then(res => {
|
||
this.info = res
|
||
this.contentArr =res.description? res.description.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').split('<br/>'):''
|
||
this.loaded = true
|
||
}).catch(err => {
|
||
this.$refs.uToast.show({
|
||
title: err.message,
|
||
duration: 3000
|
||
})
|
||
})
|
||
},
|
||
// 点击立即购买去商品确认页面
|
||
nowBuy(items) {
|
||
uni.navigateTo({
|
||
url: '/pages/property/coupon/confirmOrder?qty=1&type=2&goods_sku_id=' + items.goods_sku_id,
|
||
|
||
})
|
||
},
|
||
goDetail(id){
|
||
uni.navigateTo({
|
||
url:'/pages/goods/details?id='+id
|
||
})
|
||
},
|
||
// 点击二维码特效
|
||
clickCode(grantid) {
|
||
this.code = ''
|
||
if (grantid !== '') {
|
||
let data = {
|
||
coupon_grant_id: grantid
|
||
}
|
||
getQrcodeByGrantId(data).then(res => {
|
||
console.log(res)
|
||
this.code = res.code
|
||
this.showCode = !this.showCode
|
||
}).catch(err => {
|
||
this.$refs.uToast.show({
|
||
title: err.message,
|
||
duration: 3000
|
||
})
|
||
})
|
||
}
|
||
},
|
||
// 代金券立即购买
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// page{
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// padding-bottom: 120rpx;
|
||
// }
|
||
.clickCodeBtn {
|
||
background-color: $main-color;
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
padding: 30rpx 0;
|
||
text-align: center;
|
||
border-radius: 30rpx;
|
||
width: 90%;
|
||
margin-left: 5%;
|
||
position: fixed;
|
||
bottom: 20rpx;
|
||
}
|
||
|
||
.couponDetail {
|
||
padding-bottom: 20rpx;
|
||
background-color: #f7f7f7;
|
||
min-height: 100vh;
|
||
padding-top: $margin;
|
||
position: relative;
|
||
padding-bottom: 120rpx;
|
||
|
||
// 优惠券
|
||
.coupon {
|
||
margin: 0 $margin;
|
||
background-color: #Fff;
|
||
position: relative;
|
||
z-index: 1;
|
||
color: #333;
|
||
padding: 30rpx 20rpx;
|
||
box-shadow: 0 10rpx 20rpx 10rpx rgba($color: #000000, $alpha: .1);
|
||
border-radius: 20rpx;
|
||
|
||
.coupon-title {
|
||
width: 100%;
|
||
font-size: 34rpx;
|
||
}
|
||
|
||
.coupon-des {
|
||
color: $main-color;
|
||
font-size: 32rpx;
|
||
padding: 16rpx 0;
|
||
}
|
||
|
||
.coupon-date {
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
|
||
// 可用商品
|
||
.goods-item {
|
||
background-color: #fff;
|
||
margin: $margin*1.5 $margin;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
padding: $padding;
|
||
box-shadow: 0 10rpx 20rpx 10rpx rgba($color: #000000, $alpha: .1);
|
||
|
||
.goods-img {
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.goods-right {
|
||
margin-left: 30rpx;
|
||
width: calc(100% - 200rpx);
|
||
|
||
.goods-right-title {
|
||
font-size: 30rpx;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.goods-right-bottom {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
margin-top: 20rpx;
|
||
|
||
.money {
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: $main-color;
|
||
}
|
||
|
||
.used {
|
||
background-image: linear-gradient(to left, $main-color, $main-color-light);
|
||
padding: 10rpx 20rpx;
|
||
border-radius: 20rpx;
|
||
color: #fff;
|
||
font-size: 26rpx;
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.goods-title {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
text-align: left;
|
||
margin: $margin $margin;
|
||
// text-shadow:10rpx 10rpx linear-gradient(to right, #f39e17, #f85b05);
|
||
text-shadow: 2rpx 2rpx 10rpx $main-color;
|
||
}
|
||
|
||
// 描述
|
||
.describe {
|
||
margin: $margin 0;
|
||
|
||
.describe-des {
|
||
color: #999;
|
||
padding: 10rpx $margin ;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 动画效果
|
||
.showCode {
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
z-index: 199999999999999993;
|
||
|
||
.showCodeBg {
|
||
background-color: rgba($color:#000, $alpha: 0.3);
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 199999999999999994;
|
||
}
|
||
|
||
.showCodeContentSelect {
|
||
animation: sk-foldCubeAngle .6s linear both;
|
||
}
|
||
|
||
.showCodeContentSelectNo {
|
||
animation: sk-foldCubeAngleNo .6s linear both;
|
||
}
|
||
|
||
.showCodeContent {
|
||
width: 600rpx;
|
||
height: 500rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
padding: 30rpx;
|
||
position: relative;
|
||
z-index: 199999999999999995;
|
||
|
||
image {
|
||
width: 60%;
|
||
}
|
||
|
||
.showCodeTitle {
|
||
font-weight: 600;
|
||
padding-bottom: 40rpx;
|
||
font-size: 36rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
@keyframes sk-foldCubeAngle {
|
||
0% {
|
||
-webkit-transform: perspective(140px) rotateX(-180deg);
|
||
transform: perspective(140px) rotateX(-180deg);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform: perspective(140px) rotateX(0deg);
|
||
transform: perspective(140px) rotateX(0deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes sk-foldCubeAngleNo {
|
||
0% {
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
}
|
||
|
||
25% {
|
||
transform: scale(0);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
@keyframes turn {
|
||
0% {
|
||
-webkit-transform: rotate(0deg);
|
||
opacity: 1;
|
||
}
|
||
|
||
25% {
|
||
-webkit-transform: rotate(90deg);
|
||
opacity: .9;
|
||
}
|
||
|
||
50% {
|
||
-webkit-transform: rotate(180deg);
|
||
opacity: .8;
|
||
}
|
||
|
||
75% {
|
||
-webkit-transform: rotate(270deg);
|
||
opacity: .9;
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform: rotate(360deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
</style>
|