123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332 |
- <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>
|