<template>
|
<view class="coupon-datail pb100" v-if="!loading">
|
<view class="top_box">
|
<view class="bg-white radius12 p20">
|
<view :class="'coupon-box coupon-item coupon-item-'+detail.color.text">
|
<view class="operation coupon-sp w-b">
|
<view class="coupon-content">
|
<view class="coupon-title-top">
|
<view class="d-s-c">
|
<view class="f24 pb10 flex-1" v-if="detail.shop_supplier_id==0">平台通用{{detail.coupon_type.text}}</view>
|
<view class="f24 pb10 flex-1" v-else>{{detail.supplier.name}}{{detail.coupon_type.text}}</view>
|
<view class="f24" v-if="detail.coupon_type.value==30">限到店使用</view>
|
<view class="f24" v-else>
|
<template v-if="detail.min_price ==0">
|
无低消门槛
|
</template>
|
<template v-if="detail.min_price >0">
|
满{{detail.min_price}}元可用
|
</template>
|
</view>
|
</view>
|
<template v-if=" detail.coupon_type.value == 10 ">
|
<view class="price">
|
<text>￥</text>
|
<text class="f36 fb">{{ detail.reduce_price }}</text>
|
</view>
|
</template>
|
<template v-if="detail.coupon_type.value == 20 ">
|
<text class="f36 fb">{{ detail.discount }}</text><text>折</text>
|
</template>
|
<template v-if="detail.coupon_type.value == 30 ">
|
<view class="f36 fb l-s">{{detail.name}}</view>
|
</template>
|
</view>
|
<view class="coupon-title-bottom d-c-c">
|
<view class="f24 pt20 flex-1">
|
{{ detail.start_time.text }} 至 {{ detail.end_time.text }}
|
</view>
|
<view class="f24 pt20" v-if="detail.coupon_type.value == 30">可用{{detail.limit_use_num}}次</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="coupon-project mt20 p20 radius12">
|
<view class="d-s-c border-b pb20">
|
<view class="flex-1 f32 fb">优惠项目</view>
|
<view class="f26 red w-s-n" v-if="detail.coupon_project.length>1">以下项目 {{detail.coupon_project.length}} 选 1</view>
|
</view>
|
<view class="project-box">
|
<view class="project-item mt20 d-s-s f26" v-for="(item, index) in detail.coupon_project" :key="index" @click="radioChange(index)">
|
<view class="radio">
|
<radio style="transform:scale(0.8)" color='#F6220C' :value="index+''" :checked="project_id==index+''" />
|
</view>
|
<view>{{item.content}}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="mt20 bg-white radius12 p20">
|
<view class="d-s-c border-b pb20">
|
<view class="flex-1 f32 fb">使用须知</view>
|
</view>
|
<view class="project-box">
|
<view class="d-s-c mt20">
|
<text class="icon iconfont icon-yuyue"></text>
|
<text class="ml10 fb">有效期</text>
|
</view>
|
<view class=" mt20 ml40 f26">
|
{{ detail.start_time.text }} 至 {{ detail.end_time.text }}
|
</view>
|
<view class="d-s-c mt20">
|
<text class="icon iconfont icon-quanbudingdan"></text>
|
<text class="ml10 fb">使用规则</text>
|
</view>
|
<view class="project-item mt20 ml20 f26" v-for="(item, index) in detail.coupon_rule" :key="index">
|
{{item.content}}
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 操作栏 -->
|
<view v-if="detail.is_use == 0 && detail.is_expire == 0" class="flow-fixed-footer b-f">
|
<!-- 兑换券核销 -->
|
<view class="p20 bg-white">
|
<button class="btn-red" @click="onSubmitExtract(detail.user_coupon_id)">确认核销</button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import Popup from '@/components/uni-popup.vue'
|
import utils from '@/common/utils.js'
|
export default {
|
data() {
|
return {
|
loading: true,
|
/*兑换券id*/
|
//user_coupon_id: 0,
|
/*兑换券详情*/
|
detail: {},
|
extractStore: {},
|
// 选择的优惠内容
|
project_id: ''
|
};
|
},
|
components: {},
|
props: ['user_coupon_id'],
|
onLoad(e) {
|
// this.order_no = e.order_no;
|
},
|
mounted() {
|
/*获取订单详情*/
|
this.getData();
|
},
|
methods: {
|
|
/*获取数据*/
|
getData() {
|
let self = this;
|
uni.showLoading({
|
title: '加载中'
|
});
|
self._get(
|
'store.coupon/detail', {
|
user_coupon_id: self.user_coupon_id
|
},
|
function(res) {
|
self.loading = false;
|
self.detail = res.data.coupon;
|
if (self.detail.coupon_project.length == 1) {
|
self.project_id = 0;
|
}
|
// self.extractStore = res.data.order.extractStore;
|
uni.hideLoading();
|
},
|
function(res) {
|
uni.switchTab({
|
url:'/pages/index/index'
|
})
|
}
|
);
|
},
|
|
/*核销*/
|
onSubmitExtract(user_coupon_id) {
|
let self = this;
|
if (self.detail.coupon_type == 30 && self.project_id === '') {
|
uni.showToast({
|
title: '请选择优惠项目',
|
duration: 2000,
|
icon:'none'
|
});
|
return;
|
}
|
wx.showModal({
|
title: "提示",
|
content: "您确定要核销吗?",
|
success: function(o) {
|
o.confirm && self._post(
|
'store.coupon/extract', {
|
user_coupon_id: user_coupon_id,
|
project_id: self.project_id
|
},
|
function(res) {
|
uni.showToast({
|
title: res.msg,
|
duration: 2000,
|
icon: 'success',
|
});
|
setTimeout(function () {
|
self.gotoPage('/pages/index/index');
|
}, 2000);
|
}
|
);
|
}
|
});
|
},
|
/*点击单选*/
|
radioChange(e) {
|
let self = this;
|
self.project_id = e;
|
},
|
}
|
};
|
</script>
|
|
<style scoped>
|
.flow-fixed-footer {
|
position: fixed;
|
bottom: 0;
|
width: 100%;
|
}
|
/* 兑换券 */
|
/* 新样式 by lyzflash */
|
.l-s {
|
letter-spacing: 2rpx;
|
}
|
.coupon-box {
|
border-radius: 12rpx;
|
height: 210rpx;
|
}
|
.coupon-box .circles {
|
left: auto;
|
right: 0;
|
top: 70rpx;
|
bottom: 70rpx;
|
}
|
.coupon-box .circles-right text {
|
border-radius: 10rpx 0 0 10rpx;
|
width: 8rpx;
|
height: 15rpx;
|
background: #f6f6f6;
|
}
|
.coupon-box .operation .coupon-content {
|
position: relative;
|
/* background-color: #FFF2EC; */
|
color: #FFFFFF;
|
padding: 20rpx;
|
display: block;
|
}
|
.coupon-box .coupon-sp::before,
|
.coupon-box .coupon-sp::after {
|
position: absolute;
|
display: block;
|
content: '';
|
width: 11rpx;
|
height: 22rpx;
|
background: #FFFFFF;
|
z-index: 10;
|
top: 120rpx;
|
}
|
.coupon-box .coupon-sp::before {
|
left: 0;
|
border-radius: 0 15rpx 15rpx 0;
|
}
|
.coupon-box .coupon-sp::after {
|
right: 0;
|
border-radius: 15rpx 0 0 15rpx;
|
}
|
.coupon-box .btns {
|
width: 150rpx;
|
padding: 0 20rpx;
|
background: transparent;
|
}
|
.coupon-box.coupon-item- .btns {
|
/* background-color: #BEBEBE; */
|
}
|
.coupon-box .btns button {
|
width: auto;
|
background: #FFFFFF;
|
border-radius: 60rpx;
|
font-size: 22rpx;
|
padding: 4rpx 20rpx;
|
}
|
.coupon-box .operation {
|
padding-left: 0;
|
margin-top: 4rpx;
|
border-radius: 12rpx;
|
}
|
.coupon-product {
|
width: 100%;
|
}
|
.coupon-product-item image {
|
width: 124rpx;
|
height: 124rpx;
|
border-radius: 12rpx;
|
background-color: rgba(0, 0, 0, 0.1);
|
}
|
.coupon-box .coupon-sp .btns {
|
width: 446rpx;
|
background: #FFFFFF;
|
position: relative;
|
color: #333333;
|
box-sizing: border-box;
|
padding: 20rpx;
|
}
|
.coupon-box .coupon-sp .btns:after {
|
position: absolute;
|
content: " ";
|
border-left: 2rpx dashed #EEEEEE;
|
left: -2rpx;
|
height: 100%;
|
}
|
.coupon-title-top {
|
height: 110rpx;
|
border-bottom: 2rpx dashed #DDDDDD;
|
}
|
.buy-btn-box {
|
position: fixed;
|
width: 100%;
|
left: 0;
|
bottom: 0;
|
z-index: 98;
|
}
|
|
.buy-btn {
|
height: 80rpx;
|
line-height: 80rpx;
|
border-radius: 80rpx;
|
overflow: hidden;
|
}
|
/* 兑换券内容 */
|
.project-item {
|
position: relative;
|
}
|
.project-box .iconfont {
|
color: #333333;
|
}
|
.coupon-project {
|
background-color: #FFF2EC;
|
}
|
</style>
|
