313 lines
8.4 KiB
Vue
313 lines
8.4 KiB
Vue
<template>
|
|
<view class="content" v-if="!isLoding">
|
|
<view class="details">
|
|
<view class="header">
|
|
<view class="info-item">
|
|
<view class="info-item-title">优惠券标题</view>
|
|
<view class="info-item-text">{{details.title}}</view>
|
|
</view>
|
|
<view class="info-item">
|
|
<view class="info-item-title">优惠券类型</view>
|
|
<view class="info-item-text">{{details.type.text}}</view>
|
|
</view>
|
|
<view class="info-item">
|
|
<view class="info-item-title">优惠券状态</view>
|
|
<view class="info-item-text">{{details.status.text}}</view>
|
|
</view>
|
|
<view class="info-item">
|
|
<view class="info-item-title">使用渠道</view>
|
|
<view class="info-item-text">{{details.use_way.text}}</view>
|
|
</view>
|
|
<view class="info-item" v-if="details.type.value === 2">
|
|
<view class="info-item-title">满减</view>
|
|
<view class="info-item-text">满{{details.full}}减{{details.price}}</view>
|
|
</view>
|
|
<view class="info-item">
|
|
<view class="info-item-title">券有效期(起)</view>
|
|
<view class="info-item-text">{{details.time.start_at}}</view>
|
|
</view>
|
|
<view class="info-item">
|
|
<view class="info-item-title">券有效期(止)</view>
|
|
<view class="info-item-text">{{details.time.end_at}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="mian">
|
|
<block v-if="details.goods.length > 0">
|
|
<view class="mian-title">关联商品</view>
|
|
<view class="mian-goods">
|
|
<view class="item" v-for="(item, index) in details.goods" :key="index">
|
|
<image class="item-img" :src="item.cover" mode=""></image>
|
|
<view class="item-cont">
|
|
<view class="item-title nowrap">{{item.name}}</view>
|
|
<view class="item-price nowrap">￥{{item.price}}</view>
|
|
</view>
|
|
<block v-if="details.use_way">
|
|
<view v-if="details.use_way.value == 1" class="item-apply" @click="$Router.push({name: 'goodsDetails', params: {id: item.goods_id}})">
|
|
去使用
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<view class="mian-title">使用说明</view>
|
|
<view class="mian-text">
|
|
<text>{{details.description || '-'}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="ios-bottom"></view>
|
|
|
|
<block v-if="details.use_way">
|
|
<view class="clickCodeBtn" v-if='details.use_way.value == 2' @click="clickCode(details.coupon_grant_id)">立即兑换</view>
|
|
</block>
|
|
|
|
<!-- 二维码弹窗 -->
|
|
<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 { couponsInfo, getQrcodeByGrantId } from '@/apis/interfaces/user'
|
|
export default {
|
|
data() {
|
|
return {
|
|
isLoding : true,
|
|
details : {},
|
|
showCode : false,
|
|
};
|
|
},
|
|
onShow() {
|
|
couponsInfo(this.$Route.query.couponId).then(res => {
|
|
console.log(res)
|
|
this.details = res
|
|
this.isLoding = false
|
|
})
|
|
},
|
|
methods:{
|
|
// 点击二维码特效
|
|
clickCode(grantid) {
|
|
this.code = ''
|
|
if (grantid !== '') {
|
|
let data = {
|
|
coupon_grant_id: grantid
|
|
}
|
|
getQrcodeByGrantId(data).then(res => {
|
|
this.code = res.code
|
|
this.showCode = !this.showCode
|
|
}).catch(err => {
|
|
this.$refs.uToast.show({
|
|
title: err.message,
|
|
duration: 3000
|
|
})
|
|
})
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// content
|
|
.content{
|
|
padding-bottom: $padding + 90;
|
|
}
|
|
|
|
.details{
|
|
margin: $margin;
|
|
background: white;
|
|
border-radius: $radius;
|
|
// 优惠券信息
|
|
.header{
|
|
position: relative;
|
|
border-bottom: dashed 2rpx $border-color;
|
|
padding: $padding;
|
|
&::after,&::before{
|
|
position: absolute;
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
background: #f8f8f8;
|
|
content: " ";
|
|
bottom: -16rpx;
|
|
border-radius: 50%;
|
|
}
|
|
&::after{
|
|
left: -16rpx;
|
|
}
|
|
&::before{
|
|
right: -16rpx;
|
|
}
|
|
.info{
|
|
padding: $padding 0;
|
|
text-align: center;
|
|
.info-cover{
|
|
width: 128rpx;
|
|
height: 128rpx;
|
|
border-radius: 50%;
|
|
vertical-align: top;
|
|
}
|
|
.info-title{
|
|
padding-top: $padding;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: $title-size;
|
|
}
|
|
}
|
|
.info-item{
|
|
position: relative;
|
|
padding-left: 200rpx;
|
|
min-height: 60rpx;
|
|
font-size: $title-size-lg;
|
|
padding-bottom: $padding/3;
|
|
&:last-child{
|
|
padding-bottom: 0;
|
|
}
|
|
.info-item-title{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
line-height: 50rpx;
|
|
color: $text-color;
|
|
}
|
|
.info-item-text{
|
|
line-height: 50rpx;
|
|
color: $text-gray;
|
|
text-align: right;
|
|
@extend .nowrap;
|
|
}
|
|
}
|
|
}
|
|
// 优惠券介绍
|
|
.mian{
|
|
padding: $padding;
|
|
.mian-title{
|
|
font-size: $title-size-lg;
|
|
font-weight: bold;
|
|
line-height: 50rpx;
|
|
color: $text-color;
|
|
}
|
|
.mian-text{
|
|
font-size: $title-size-m;
|
|
color: $text-gray;
|
|
padding-top: $padding/3;
|
|
}
|
|
.mian-goods{
|
|
padding: $padding - 10 0 $padding;
|
|
.item{
|
|
font-size: $title-size-m;
|
|
width: 100%;
|
|
position: relative;
|
|
margin-bottom: 20rpx;
|
|
.item-img {
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
.item-cont {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 90rpx;
|
|
padding: 0 140rpx 0 110rpx;
|
|
box-sizing: border-box;
|
|
font-weight: bold;
|
|
.item-title{
|
|
color: $text-gray;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.item-price{
|
|
color: $text-price;
|
|
}
|
|
}
|
|
.item-apply {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 20rpx;
|
|
border-radius: $radius - 10;
|
|
text-align: center;
|
|
border: #8b64fd 2rpx solid;
|
|
color: #8b64fd;
|
|
height: 54rpx;
|
|
line-height: 50rpx;
|
|
width: 120rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 动画效果
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.clickCodeBtn {
|
|
margin: $margin;
|
|
background: white;
|
|
border-radius: $radius - 10;
|
|
border: #8b64fd 2rpx solid;
|
|
color: #8b64fd;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
}
|
|
</style>
|