333 lines
9.8 KiB
Vue
333 lines
9.8 KiB
Vue
|
<template>
|
|||
|
|
<view v-if="!isLoading" class="container b-f p-b">
|
|||
|
|
<view class="base">
|
|||
|
|
<view class="coupon-image">
|
|||
|
|
<image class="image" :src="detail.image"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="coupon-title">
|
|||
|
|
<view class="name">{{ detail.name }}</view>
|
|||
|
|
<view v-if="detail.amount > 0" class="price"><span class="label">面额：</span>￥{{ detail.amount }}</view>
|
|||
|
|
<view v-if="detail.type == 'P'" class="balance"><span class="label">余额：</span>￥{{ detail.balance }}</view>
|
|||
|
|
<view v-if="detail.tips" class="tips">{{ detail.tips }}</view>
|
|||
|
|
<view class="time">有效期：{{ detail.effectiveDate }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="detail.status=='B'" class="icon-can"></view>
|
|||
|
|
<view v-else-if="detail.status=='C'" class="icon-cannot"></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="confirm-form">
|
|||
|
|
<u-form :model="form" label-width="140rpx">
|
|||
|
|
<u-form-item class="input" v-if="detail.type === 'P'" label="金额:">
|
|||
|
|
<u-input v-model="form.amount" placeholder="核销金额" />
|
|||
|
|
</u-form-item>
|
|||
|
|
<view v-if="detail.type === 'T'" class="coupon-timer">
|
|||
|
|
<view class="tips">完成情况({{detail.confirmCount}}/{{detail.useRule}})</view>
|
|||
|
|
<uni-row class="time-row" v-for="row in dataList" :key="row.id">
|
|||
|
|
<uni-col :span="rowCount" v-for="item in row.data" :key="item.isActive" class="time-item">
|
|||
|
|
<view v-if="item.isActive == true" class="time active"></view>
|
|||
|
|
<view v-else class="time"></view>
|
|||
|
|
</uni-col>
|
|||
|
|
</uni-row>
|
|||
|
|
</view>
|
|||
|
|
<u-form-item class="input" label="备注:" :border-bottom="false">
|
|||
|
|
<u-input v-model="form.remark" placeholder="核销备注" />
|
|||
|
|
</u-form-item>
|
|||
|
|
</u-form>
|
|||
|
|
</view>
|
|||
|
|
<view class="coupon-content m-top20">
|
|||
|
|
<view class="title">使用须知</view>
|
|||
|
|
<view class="content"><jyf-parser :html="detail.description"></jyf-parser></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="footer-fixed">
|
|||
|
|
<view v-if="detail.status == 'A'" class="btn-wrapper">
|
|||
|
|
<view class="btn-item btn-item-main" @click="doConfirm()">确定核销</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-else-if="detail.status == 'B'" class="btn-wrapper">
|
|||
|
|
<view class="btn-item cannot">已经核销</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-else class="btn-wrapper">
|
|||
|
|
<view class="btn-item cannot">不可核销</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 快捷导航 -->
|
|||
|
|
<shortcut/>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import * as myCouponApi from '@/api/myCoupon'
|
|||
|
|
import * as confirmApi from '@/api/confirm'
|
|||
|
|
import Shortcut from '@/components/merchant-shortcut'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
Shortcut
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
// 会员会员卡券编码
|
|||
|
|
code: null,
|
|||
|
|
userCouponId: null,
|
|||
|
|
userCouponCode: null,
|
|||
|
|
// 加载中
|
|||
|
|
isLoading: true,
|
|||
|
|
// 当前卡券详情
|
|||
|
|
detail: null,
|
|||
|
|
rowCount: 0,
|
|||
|
|
dataList: [],
|
|||
|
|
// 核销结果
|
|||
|
|
result: false,
|
|||
|
|
form: {'code': '', 'amount': '', 'remark': ''}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 生命周期函数--监听页面加载
|
|||
|
|
*/
|
|||
|
|
onLoad(options) {
|
|||
|
|
// 记录ID
|
|||
|
|
this.userCouponId = options.id
|
|||
|
|
// 核销二维码
|
|||
|
|
this.userCouponCode = options.code
|
|||
|
|
// 获取卡券详情
|
|||
|
|
this.getCouponDetail()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
// 获取卡券详情
|
|||
|
|
getCouponDetail() {
|
|||
|
|
const app = this
|
|||
|
|
myCouponApi.detail(0, app.userCouponId, app.userCouponCode)
|
|||
|
|
.then(result => {
|
|||
|
|
app.detail = result.data
|
|||
|
|
app.getRowCount(app.detail.useRule)
|
|||
|
|
app.getDataList(app.detail.useRule, app.detail.confirmCount)
|
|||
|
|
})
|
|||
|
|
.finally(() => app.isLoading = false)
|
|||
|
|
},
|
|||
|
|
doConfirm() {
|
|||
|
|
const app = this
|
|||
|
|
// 储值卡核销金额
|
|||
|
|
if (app.detail.type == 'P') {
|
|||
|
|
if (app.form.amount <= 0) {
|
|||
|
|
app.$error("核销金额不能小于0，请输入");
|
|||
|
|
return false
|
|||
|
|
} else if (app.form.amount > app.detail.amount) {
|
|||
|
|
app.$error("核销金额不能大于" + app.detail.amount + "，请重新输入");
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (app.isLoading) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
app.isLoading = true;
|
|||
|
|
confirmApi.doConfirm(app.detail.code, app.form.amount, app.form.remark)
|
|||
|
|
.then(result => {
|
|||
|
|
if (result.data) {
|
|||
|
|
app.getCouponDetail()
|
|||
|
|
this.$success("核销成功")
|
|||
|
|
app.detail.status = result.data.status
|
|||
|
|
app.detail.balance = result.data.balance
|
|||
|
|
app.form.amount = ""
|
|||
|
|
app.form.remark = ""
|
|||
|
|
app.getCouponDetail()
|
|||
|
|
} else {
|
|||
|
|
this.$error(result.message)
|
|||
|
|
}
|
|||
|
|
app.isLoading = false
|
|||
|
|
resolve(result)
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 组织数据
|
|||
|
|
getDataList(num, use) {
|
|||
|
|
const app = this
|
|||
|
|
if (num <= 4 && num > 0) {
|
|||
|
|
app.dataList = [{"data": []}]
|
|||
|
|
for (let i = 1; i <= num; i++) {
|
|||
|
|
app.dataList[0].data.push({"isActive": (i <= use ? true : false)})
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
let rowCount = Math.ceil(num / 4)
|
|||
|
|
let c = 1;
|
|||
|
|
for (let i = 0; i < rowCount; i++) {
|
|||
|
|
app.dataList[i] = {"data": []}
|
|||
|
|
for (let j = 1; j <= 4; j++) {
|
|||
|
|
if (c <= num) {
|
|||
|
|
app.dataList[i].data.push({"isActive": (c <= use ? true : false)})
|
|||
|
|
c++
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 计算行数
|
|||
|
|
getRowCount(num) {
|
|||
|
|
if (num < 4 && num > 0) {
|
|||
|
|
this.rowCount = 24 / num
|
|||
|
|
} else if (num >= 4) {
|
|||
|
|
this.rowCount = 6
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.container {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background: #fff;
|
|||
|
|
color:#666666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.base {
|
|||
|
|
border: dashed 5rpx #cccccc;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
margin: 20rpx;
|
|||
|
|
height: 270rpx;
|
|||
|
|
.coupon-image {
|
|||
|
|
float: left;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
.image {
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 158rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
}
|
|||
|
|
width: 30%;
|
|||
|
|
}
|
|||
|
|
.coupon-title {
|
|||
|
|
float: left;
|
|||
|
|
margin-left: 30rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
width: 65%;
|
|||
|
|
.name {
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
.price {
|
|||
|
|
margin-top:20rpx;
|
|||
|
|
color:#666;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
.label {
|
|||
|
|
font-size:20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.balance {
|
|||
|
|
margin-top:20rpx;
|
|||
|
|
color:#f9211c;
|
|||
|
|
font-size:20rpx;
|
|||
|
|
}
|
|||
|
|
.tips {
|
|||
|
|
margin-top:20rpx;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
}
|
|||
|
|
.time {
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.confirm-form {
|
|||
|
|
border: dashed 5rpx #cccccc;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
margin: 20rpx;
|
|||
|
|
.input {
|
|||
|
|
border: solid 1px #ccc;
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
width: 98%;
|
|||
|
|
display: inline-flex;
|
|||
|
|
}
|
|||
|
|
.coupon-timer {
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
clear: both;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
height: 100%;
|
|||
|
|
.tips {
|
|||
|
|
margin-bottom: 60rpx;
|
|||
|
|
}
|
|||
|
|
.time-row {
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
height: 100rpx;
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
.time-item {
|
|||
|
|
padding-top: 10rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
.time {
|
|||
|
|
height: 80rpx;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
padding-top: 20rpx;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
color: #ffffff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
background: url('~@/static/confirm/undo.png') no-repeat center center;
|
|||
|
|
background-size: contain;
|
|||
|
|
}
|
|||
|
|
.active {
|
|||
|
|
background: url('~@/static/confirm/do.png') no-repeat center center;
|
|||
|
|
background-size: contain;
|
|||
|
|
border: solid 1px #ffffff;
|
|||
|
|
}
|
|||
|
|
min-height: 160rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.coupon-content {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
padding: 15rpx;
|
|||
|
|
border: dashed 5rpx #cccccc;
|
|||
|
|
border-radius: 5rpx;
|
|||
|
|
margin: 20rpx;
|
|||
|
|
min-height: 400rpx;
|
|||
|
|
.title {
|
|||
|
|
margin-bottom: 15rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-fixed {
|
|||
|
|
position: fixed;
|
|||
|
|
width: 100%;
|
|||
|
|
bottom: var(--window-bottom);
|
|||
|
|
height: 180rpx;
|
|||
|
|
padding-bottom: 30rpx;
|
|||
|
|
z-index: 11;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
.btn-wrapper {
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
.cannot {
|
|||
|
|
border-radius: 38rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
line-height: 80rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
background:linear-gradient(to right, #cccccc, #cccccc)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-item {
|
|||
|
|
flex: 1;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
line-height: 80rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #ffffff;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-item-main {
|
|||
|
|
background: linear-gradient(to right, #f9211c, #ff6335);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|