ox_zhiNengZhuShou/src/pages/write_off/ym_confirm/ym_confirm.vue

<template>
    <view class="ym-confirm">
        <view class="yc-header">
            <view class="yh-stadium">{{ orderInfo.extension.stadium_name || '-' }}</view>
            <view class="yh-info">
                <view>今天剩余可使用：{{ orderInfo.extension.rest_number  || '0' }}次</view>
                <view>进场状态：<text>{{ orderInfo.enter_status == 0?'离场':orderInfo.enter_status == 1?'进场':'' }}</text></view>
                <view v-if="orderInfo.enter_status == 1">进场时间：{{ orderInfo.latest_enter_time  || '-' }}</view>
            </view>
        </view>
        <view class="yc-user-info">
            <view class="yui-tit">持卡人信息</view>
            <view class="yui-line">手机号码：{{ orderInfo.mobile || '-' }}</view>
            <view class="yui-line">用户昵称：{{ orderInfo.nickname || '-' }}</view>
        </view>
        <view class="yc-photo" v-if="!!orderInfo.user_face">
            <view>照片</view>
            <image mode="aspectFit" @click="previewImg(orderInfo.user_face)" :src="orderInfo.user_face"></image>
        </view>
        
        <view class="yc-card-mes">
            <view class="ycm-tit">年月卡信息</view>
            <view class="ycm-line">年月卡名称：{{ orderInfo.card_info.name || '-' }}</view>
            <view class="ycm-line">年月卡卡号：{{ orderInfo.card_no || '-' }}</view>
            <view class="ycm-line">验证码：{{ orderInfo.verify_code || '-' }}</view>
            <view class="ycm-line">生成时间：{{ orderInfo.created_at || '-' }}</view>
            <view class="ycm-line">失效时间：{{ orderInfo.expired_at || '-' }}</view>
        </view>
        <view class="yc-btns">
            <view class="green" @click="confirmBtn">确认核销</view>
            <!-- <view>仅核销</view> -->
        </view>
    </view>
</template>

<script>
import util from '../../../utils/util';
import { API } from '../../../js/api';
import { servers } from '../../../js/server';
import { WRITE_OFF_YM_ORDER_INFO, WRITE_OFF_ORDER_INFO } from '../../../js/once_name';
export default {
    data(){
        return { 
            type: '', // verify_code -> 5: 验证码核销(商家助手) | decrypt_text -> 6: 扫码核销(商家助手)
            orderInfo: {
                extension: {},
                card_info: {}
            },
            operate_stadium_id: '', // 操作的场馆id, 有多门店年月卡，不能随接口返回门店id
        }
    },
    onLoad(options){
        if(options.type)this.type = options.type || '';
        util.$_once(WRITE_OFF_ORDER_INFO, data => {
            console.warn(data)
            this.orderInfo = data?.data || {};
            this.operate_stadium_id = data?.query?.stadium_id ?? data?.data?.stadium_id ?? '';
        })
    },
    methods: {
        previewImg(url){
            if(!url)return
            uni.previewImage({ urls: [ url ] });
        },
        confirmBtn: util.debounce(function(){
            let { orderInfo, type } = this;
            servers.post({
                url: API.writeOff.userMonthlyCardVerify,
                data: {
                    brand_id: orderInfo.brand_id,
                    card_no: orderInfo.card_no,
                    stadium_id: this.operate_stadium_id ?? '',
                    type: type == 'verify_code'? 5 : 6,
                },
                isDefaultGet: false,
            })
            .then(res=>{
                if(res.data.code == 0){
                    util.showNone(res.data.message || '操作成功！');
                    let { orderInfo } = this;
                    let _ls = res.data.data&&res.data.data.gates || [];
                    setTimeout(_=>{
                        util.$_emit(WRITE_OFF_YM_ORDER_INFO, {
                            orderInfo,
                            gates: _ls
                        });
                        util.routeTo(`/pages/write_off/ym_card_gated/ym_card_gated`, 'rT');
                    }, 1200);
                }else{
                    util.showNone(res.data.message || '操作失败！');
                }
            })
        }, 300, true)
    }
}
</script>

<style lang="scss">
    @import '~style/public.scss';
    page{
        background-color: #fff;
    }
    .ym-confirm{
        padding-bottom: 24upx;
        padding-bottom: calc( 24upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
        padding-bottom: calc( 24upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
        .yc-header{
            padding: 0 30upx;
            border-bottom: 2upx solid #f2f2f7;
            .yh-stadium{
                padding: 30upx 0;
                font-size: 32upx;
                color: #1a1a1a;
                border-bottom: 2upx solid #E5E5E5;
            }
            .yh-info{
                padding: 20upx 0;
                >view{
                    margin-bottom: 10upx;
                    font-size: 28upx;
                    line-height: 52upx;
                    color: #333333;
                    @include textHide(1);
                    >text{
                        color: $themeColor;
                    }
                }
            }
        }
        .yc-user-info{
            padding: 30upx;
            border-bottom: 2upx solid #f2f2f7;
            .yui-tit{
                margin-bottom: 20upx;
                font-size: 28upx;
                line-height: 52upx;
                color: #9C9C9F;
            }
            .yui-line{
                font-size: 28upx;
                line-height: 52upx;
                color: #1A1A1A;
                @include textHide(1);
            }
        }
        .yc-photo{
            display: flex;
            padding: 30upx;
            border-bottom: 2upx solid #f2f2f7;
            >view{
                margin-right: 50upx;
                font-size: 28upx;
                line-height: 52upx;
                color: #9c9c9f;
            }
            >image{
                flex-shrink: 0;
                width: 218upx;
                height: 218upx;
                border-radius: 10upx;
            }
        }
        .yc-card-mes{
            padding: 30upx 30upx 0;
            .ycm-tit{
                margin-bottom: 20upx;
                line-height: 52upx;
                color: #9c9c9f;
            }
            .ycm-line{
                line-height: 52upx;
                font-size: 28upx;
                color: #1A1A1A;
                @include textHide(1);
            }
        }
        .yc-btns{
            padding: 152upx 64upx 24upx;
            >view{
                margin-bottom: 24upx;
                line-height: 108upx;
                text-align: center;
                border-radius: 10upx;
                border: 2upx solid $themeColor;
                font-size: 32upx;
                color: $themeColor;
                &.green{
                    background-color: $themeColor;
                    color: #fff;
                }
            }
        }
        
    }
</style>