[‘我的资产-我的优惠券’]
This commit is contained in:
370
pages/property/coupon/detail.vue
Normal file
370
pages/property/coupon/detail.vue
Normal file
@@ -0,0 +1,370 @@
|
||||
<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="$router.push({name:'goodsDetails',query:{id:item.goods_id}})" />
|
||||
<view class="goods-right">
|
||||
<view class="goods-right-title ellipsis-2" @click="$router.push({name:'goodsDetails',query:{id: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) {
|
||||
console.log(this.$route)
|
||||
this.coupon_grant_id = this.$route.query.id
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// 获取列表
|
||||
getList() {
|
||||
getCouponsInfoById(this.coupon_grant_id).then(res => {
|
||||
this.info = res
|
||||
this.contentArr = 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) {
|
||||
console.log(items, 'items....')
|
||||
let data = {
|
||||
skuId: items.goods_sku_id,
|
||||
qty: 1
|
||||
}
|
||||
this.$router.push({
|
||||
name: 'Buy',
|
||||
params: data
|
||||
})
|
||||
console.log(data)
|
||||
},
|
||||
// 点击二维码特效
|
||||
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 * 2;
|
||||
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 * 2;
|
||||
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*2;
|
||||
// text-shadow:10rpx 10rpx linear-gradient(to right, #f39e17, #f85b05);
|
||||
text-shadow: 2rpx 2rpx 10rpx $main-color;
|
||||
}
|
||||
|
||||
// 描述
|
||||
.describe {
|
||||
margin: $margin * 2 0;
|
||||
|
||||
.describe-des {
|
||||
color: #999;
|
||||
padding: 10rpx $margin * 2;
|
||||
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>
|
||||
Reference in New Issue
Block a user