You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

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>