great_webui/src/views/windowTicketSales/model/upgradeBox.vue

<template>
    <!-- 改签对话框 -->
    <el-dialog title="订单升舱" :visible.sync="rebookDialog" width="95%" append-to-body class="rebook1_dialog"
        :close-on-click-modal="false" :close-on-press-escape="false" :modal="false" :before-close="handleClose" center>
        <div class="rebook1_box" v-loading="loading">
            <div class="rebook1_from-box">
                <div class="rebook1_from">
                    <el-form :model="rebookForm" ref="rebookForm" label-width="100px" :rules="rules">
                        <el-form-item label="剧目名称：" style="margin-bottom: 0px;">
                            <span>{{ rebookForm.performName }}</span>
                        </el-form-item>
                        <el-form-item label="票务名称：" style="margin-bottom: 0px;">
                            <span>{{ rebookForm.goodsName }}</span>
                        </el-form-item>
                        <el-form-item label="座位类型：" style="margin-bottom: 0px;">
                            <span>{{ rebookForm.seatTypeName }}</span>
                        </el-form-item>
                        <el-form-item label="订单座位数：" style="margin-bottom: 0px;">
                            <span>{{ rebookForm.touristNum }}个</span>
                        </el-form-item>
                        <el-form-item label="选择日期：" prop="performDate" style="margin-bottom: 0px;">
                            <span>{{ rebookForm.performDate }}</span>
                        </el-form-item>
                        <el-form-item label="选择场次：" prop="performTimeId" style="margin-bottom: 0px;">
                            <span>{{ rebookForm.performTimeStart }} — {{ rebookForm.performTimeEnd }} </span>
                        </el-form-item>
                        <el-form-item label="票档：" prop="seatTypeId">
                            <el-select v-model="rebookForm.seatTypeId" placeholder="请选择票档" style="width: 100%"
                                @change="querySeatListFun">
                                <el-option v-for="item in intervalList" :key="item.seatTypeId"
                                    :label="item.seatTypeName" :value="item.seatTypeId" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="订单总额：">
                            <span>{{ rebookForm.realPrice || 0 }}元</span>
                        </el-form-item>
                        <el-form-item v-if="rebookForm.diffPrice < 0" label="升舱费用：">
                            <span>退费{{ Math.abs(rebookForm.diffPrice) }}元</span>
                        </el-form-item>
                        <el-form-item v-if="rebookForm.diffPrice > 0" label="升舱费用：" prop="goodsDiffAmount">
                            <el-input v-model="rebookForm.goodsDiffAmount"  type="number" style="width: 200px;" @input="setRealPrice_2"
                                :min="0"></el-input>
                            <span>元/人</span>
                        </el-form-item>
                        <el-form-item v-if="rebookForm.diffPrice > 0 && !rebookForm.channelType != 'group'" label="支付方式 :"
                            prop="paymentType">
                            <el-radio-group v-model="rebookForm.paymentType">
                                <el-radio label="1">扫码支付</el-radio>
                                <el-radio label="2">现金支付</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item v-if="rebookForm.diffPrice > 0 && rebookForm.channelType == 'group'" label="支付方式 :"
                            prop="paymentType">
                            <el-radio-group v-model="rebookForm.paymentType">
                                <el-radio label="3">对公支付</el-radio>
                                <el-radio label="6">挂账</el-radio>
                                <el-radio label="7">链接支付</el-radio>
                                <el-radio label="4">账户余额({{ balance }})</el-radio>
                                <el-radio label="5">授信余额({{ grantQuota }})</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item v-if="rebookForm.diffPrice > 0 && rebookForm.paymentType == 2 " label="收取现金 :"
                            prop="realPrice_1">
                            <el-input v-model="rebookForm.realPrice_1" type="number" style="width: 200px;" @input="setRealPrice_1"
                                :min="0"></el-input>
                            <!-- <el-input @input="setRealPrice_1" style="width: 200px;"
                                v-model="rebookForm.realPrice_1"></el-input> -->
                            <span>元</span>
                        </el-form-item>
                        <el-form-item label="找零金额 :" v-if="rebookForm.diffPrice > 0 && rebookForm.paymentType == 2">
                            ￥{{ rebookForm.small }}元
                        </el-form-item>
                        <el-form-item v-if="rebookForm.paymentType == 6" label="账期" prop="rePaymentTime">
                            <el-date-picker v-model="rebookForm.rePaymentTime" type="date" value-format="yyyy-MM-dd"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item v-if="rebookForm.paymentType == 3 || rebookForm.paymentType == 6" :label="rebookForm.paymentType == 3 ? '凭证上传' : '挂账类型凭证'" prop="photoList">
                            <div style="display: flex;flex-wrap: wrap;">
                                <div v-for="(item, index) in rebookForm.photoList" :key="index"
                                    style="width: 100px; height: 100px;margin-top: 5px; position: relative;border: 1px solid #999;border-radius: 5px;margin-right: 20px;">
                                    <el-image style="width: 100%; height: 100%" :src="item"
                                        :preview-src-list="rebookForm.photoList">
                                    </el-image>
                                    <span @click="handleRemove(index)"
                                        style="position: absolute;top: -15px;right: -15px;color: red;font-size: 24px;z-index: 999;cursor: pointer;">
                                        <i class="el-icon-error"></i>
                                    </span>
                                </div>
                                <div style="width: 100px; height: 100px;margin-top: 5px;"
                                    v-if="!rebookForm.photoList || rebookForm.photoList.length < 15" v-loading="actionUrlLoading"
                                    element-loading-text="上传中..." element-loading-spinner="el-icon-loading"
                                    element-loading-background="rgba(0, 0, 0, 0.8)">
                                    <el-upload class="avatar-uploader" :action="uploadObj.url"
                                        :headers="uploadObj.headers" :show-file-list="false"
                                        :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess"
                                        :on-progress="handleAvatarProgress" :disabled="actionUrlLoading"
                                        :on-error="handleAvatarError">
                                        <i class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="备注：" prop="resubmitRemark">
                            <el-input 
                            v-model="rebookForm.resubmitRemark" 
                            :placeholder="rebookForm.payWay != 'cahsh'?'请输入备注':'请输入已退款的现金金额'"
                            clearable
                            type="textarea" />
                        </el-form-item>
                    </el-form>
                    <div class="tip-box">
                        <p style="font-size: 12px;">温馨提示：仅限升舱一次，且升舱后禁止退款，确认要继续升舱吗。</p>
                    </div>
                </div>
                <div class="rebook1_seat" v-loading="seatLoading" :element-loading-text="seatLoadText">
                    <seatBox ref="seatBox" 
                    :seatTypeLimit="configStockNumObj" 
                    @selectSeat="selectSeat" 
                    :channelType="rebookForm.channelType"
                    height="100%" />
                </div>
            </div>
            <div style="width: 100%;display: flex;justify-content: center;">
                <el-button @click="rebookDialog = false">取 消</el-button>
                <el-button type="primary" @click="submitRebook">确认升舱</el-button>
            </div>
            <!--  支付过程 控制  -->
            <div v-if="payStatus" class="increase-viewers-pay-status">
                <div class="increase-viewers-pay-status-info" v-if="!loading">
                    <span style="font-weight: 600;font-size: 20px;">提示</span>
                    <span style="padding: 10px 0;">
                        {{ payStatus==1 ? '生成订单失败!!!' :
                        payStatus==2 ? '生成订单生成成功,请点击调取扫码盒子' :
                        payStatus==4 ? '扫码支付失败!!!' :
                        payStatus==5 ? '请出示付款码!!!' :
                        payStatus==5.5 ? '扫码成功，支付中...' :
                        payStatus==5.6 ? '扫码成功，支付中...' :
                        payStatus==6 ? '连接扫码器失败!!!' :
                        payStatus==7 ? '用户支付失败或未支付,请重新连接支付!!!' :
                        payStatus==8 ? '用户支付成功,请点击打印票!!!' :
                        payStatus==9 ? '支付超时!!!' :
                        payStatus==10 ? '订单已关闭，请重新选择座位，再购买!!!' :
                        payStatus==3 ? '现金支付记录入库失败,请重新提交' : '未知状态' }}
                    </span>
                    <span v-if="payStatus==2" style="margin-bottom: 20px;">需支付￥{{ calTotalPrice(rebookForm.goodsDiffAmount,rebookForm.touristNum)  }}元</span>
                    <!-- <span v-if="payStatus==2">需支付{{ rebookForm.payAmount }}元</span> -->

                    <!-- 重新生成订单 1  -->
                    <div v-if="payStatus==1" style="display: flex;">
                        <el-button @click="payStatus = null" type="success">修改信息</el-button>
                        <el-button @click="orderInfoSubmitFun()" style="margin-left: 20px;"
                            type="primary">重新生成订单</el-button>
                    </div>
                    <!--  生成订单成功 选择支付方式  -->
                    <div>
                        <!-- 取消支付 -->
                        <el-button @click="handleClose()" type="primary">取消支付</el-button>
                        <!-- 扫码支付 2 -->
                        <el-button v-if="payStatus==2" @click="vbar_open(orderId)" type="success">扫码支付</el-button>
                        <!-- 扫码支付 4 -->
                        <el-button v-if="payStatus==4" @click="vbar_open(orderId)" type="success">重新扫码支付</el-button>
                        <!-- 重新支付 3 -->
                        <el-button v-if="payStatus==3" @click="gotoCashPayFun(orderId)"
                            type="success">重新提交入库</el-button>
                        <!-- 重新支付 6  7 -->
                        <el-button v-if="payStatus==6 || payStatus==7" @click="vbar_open(orderId)"
                            type="success">重新连接扫码支付</el-button>

                    </div>

                    <!-- 打印 8  -->
                    <div v-if="payStatus==8">
                        <el-select v-model="printListId" placeholder="选择打印机">
                            <el-option :label="item.deviceName" :key="item.id" :value="item.id"
                                v-for="(item) in printList"></el-option>
                        </el-select>
                        <el-button style="margin-left: 15px" @click="print" type="success">打印门票</el-button>
                        <el-button style="margin-left: 15px" @click="goTicketingCollections"
                            type="success">跳转取票界面</el-button>
                    </div>
                    <!-- 支付超时 9  -->
                    <div v-if="payStatus==9">
                        <!-- <el-button @click="print" type="danger">取消支付</el-button> -->
                        <el-button @click="orderInfoSubmitFun()" type="primary">重新扫码</el-button>
                    </div>
                    <!-- 订单被关闭 10  -->
                    <div v-if="payStatus==10">
                        <!-- <el-button @click="print" type="danger">取消支付</el-button> -->
                        <el-button @click="handleClose()" type="primary">关闭</el-button>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>
<script>
import { 
  querySeatListNew,
  selectMarketTeamBySourceApi
 } from '@/api/windowTicketSales/ticketingSales'
 import { getSelectById as getBalanceInfo } from '@/api/team/teamMr'
 import { rebookApi,getTimeSeatTypeAllApi,resubmitInfoApi } from '@/api/windowTicketSales/rebook'
 import { countBySeatTyp } from '@/api/ticketMr/InventoryTemplate'
 import { pageList as getSeatType } from '@/api/seatTypeMr/seatTypeMr'
 import { getSelectById } from '@/api/order/orderMr'
 import seatBox from '@/components/seatBox/index.vue';
 import { getToken } from "@/utils/auth";
 import payJs from "../mixins/pay"
 const mathM = require('mathjs')
export default {
    name: "RebookBox",
    components: { seatBox },
    mixins: [payJs],
    data() {
        return {
            // 改签对话框
            rebookDialog: false,
            loading: false,
            // 改签表单
            rebookForm: {
                orderId: undefined,
                performDate: undefined,
                performTimeId: undefined,
                performInterval: undefined,
                performId: undefined,
                auditoriumId: undefined,
                photoList: []
            },
            rules: {
                seatTypeId: [{ required: true, message: '请选择票档', trigger: ['blur','change'] }],
                realPrice_1: [{ required: true, message: '请输入金额', trigger: ['blur','change'] }],
                paymentType: [{ required: true, message: '请输入支付方式', trigger: ['blur','change'] }],
                rePaymentTime: [{ required: true, message: '选择日期', trigger: ['blur','change'] }],
                photoList: [{ required: true, message: '请上传凭证', trigger: ['blur','change'] }],
                goodsDiffAmount: [{ required: true, message: '请输入金额', trigger: ['blur','change'] }],
                resubmitRemark: [{ required: false, message: '请输入备注', trigger: ['blur','change'] }]
            },
            // 场次列表
            intervalList: [],
            intervalListLoading: false,
            // 支付相关
            payDialog: false,
            payStatus: null,
            code: '',
            websocketData: null,
            codeTime: null,
            // 成功对话框
            successDialog: false,
            newOrderId: '',
            printList: [],

            configStockNumObj: {},
            countBySeatTypList:[],
            seatTypeListAll: [],

            seatLoading: false,
            seatLoadText: '获取座位中...',
            setList: [],

            balance: null, // 授信额度
            grantQuota: null, // 授信使用额度

            uploadObj: {
                url: process.env.VUE_APP_UPLOAD_FILE_API + "/upload/single/minio",
                Headers: { Authorization: "Bearer " + getToken() },
            },
            actionUrlLoading: false,
        }
    },
    created(){
        this.getSeatTypeAllList()
    },
    methods: {
        async initData(row) {
            this.rebookDialog = true
            this.payStatus = null
            this.orderId = null
            this.rebookForm = {
                resubmitType: 2,  // 改签类型: 1-改签 2-升舱 不传默认为改签
                goodsDiffAmount: undefined,
                performName: row.performName,
                goodsName: row.goodsName,
                seatTypeName: row.seatTypeName,
                seatTypeId: null,
                goodsId: row.goodsId,
                orderId: row.orderId,
                performDate: row.performDate,
                performTimeId: null,
                performId: row.performId,
                auditoriumId: row.auditoriumId,
                paymentType: "1", // 支付方式'
                realPrice: row.realPrice,
                touristNum: row.touristNum,
                seatList: [],
                performTimeEnd: row.performTimeEnd,
                performTimeStart: row.performTimeStart,
                channelType: row.channelType,
                photoList: [],
                payWay: row.payWay,
            }
            if(row.payWay == 'cahsh') {
                this.$set(this.rules.resubmitRemark[0],'required',true)
            }else {
                this.$set(this.rules.resubmitRemark[0],'required',false)
            }
            await this.getSelectByIdApi()
            await this.handleDateChange()
            if(row.channelType == 'group') {
                await this.handleCorporatePay(this.rebookForm)
            }
            this.$nextTick(()=>{
                this.$refs.rebookForm.clearValidate()
            })
        },
        /** 获取详情 */
        async getSelectByIdApi() {
            try {
                let res = await getSelectById(this.rebookForm.orderId)
                this.rebookForm = {
                    ...this.rebookForm,
                    memberId: res.data.memberId,
                    performTimeId: res.data.performTimeId,
                }
            } catch (error) {
                
            }

        },
        /** 获取票档  */
        async handleDateChange() {
            try {
                this.intervalListLoading = true
                this.intervalList = []
                let res = await getTimeSeatTypeAllApi({
                    orderId: this.rebookForm.orderId,
                })
                this.intervalList = res.data.list || []
                if(this.intervalList.length == 0){
                    this.$message.error('没有可升舱的票档!!!');
                }
                this.intervalListLoading = false
            } catch (error) {
                this.intervalListLoading = true
            }
        },
        /**  提交表单 */
        submitRebook() {
            this.$refs.rebookForm.validate((valid) => {
                if (valid) {
                    if(!this.rebookForm.seatList||this.rebookForm.seatList.length==0) {
                        this.$message.error('请选择座位!!!');
                        return
                    }
                    if( this.rebookForm.seatList.length < this.rebookForm.touristNum ) {
                        this.$message.error(`请选择${ this.rebookForm.touristNum }座位!!!`);
                        return
                    }
                    if(this.rebookForm.paymentType == 4 && (!this.balance||this.balance<=0||this.balance < this.rebookForm.realPrice)) {
                        this.$message.error('团队账户余额不足!!!');
                        return
                    }
                    if(this.rebookForm.paymentType == 5 && (!this.grantQuota||this.grantQuota<=0||this.grantQuota < this.rebookForm.realPrice)) {
                        this.$message.error('团队授信余额不足!!!');
                        return
                    }
                    if((this.rebookForm.paymentType == 3 || this.rebookForm.paymentType == 6) && this.rebookForm.photoList.length<1){
                        this.$message.error('请上传凭证')
                        return
                    }
                    this.orderInfoSubmitFun()
                } else {
                    return false;
                }
            });
        },
        // 计算 升舱支付费用
        calTotalPrice(unitPrice, quantity) {
            console.log(this.rebookForm,'2222');
            let totalPrice = 0
            if(unitPrice && quantity ) {
                totalPrice = mathM.multiply(unitPrice, quantity);
            }
            return totalPrice
        },
        /** 退出窗口 */
        handleClose(done) {
            // if(this.payStatus==8) {
            //     this.$message.error('请daying');
            //     return
            // }
            this.$confirm('确认关闭？')
                .then(_ => {
                    if(this.orderId){
                        document.removeEventListener('keydown',this.keydownAdd);
                        this.orderInfoCancelFun(true)
                    }else {
                        this.$refs.seatBox.querySeatListFun(true,[],[],[])
                        this.rebookDialog = false
                    }
                })
                .catch(_ => {});
        },
        /** 
         * 
         *  获取升舱/改签信息
         * 
         */
        async resubmitInfoFun() {
            try {
                let res = await resubmitInfoApi({
                    orderId: this.rebookForm.orderId,
                    timeId: this.rebookForm.performTimeId,
                    seatTypeId: this.rebookForm.seatTypeId,
                    //goodsDiffAmount: this.rebookForm.goodsDiffAmount,
                })
                this.rebookForm = {
                    ...this.rebookForm,
                    realPrice: res.data.reSubmitInfo.realPrice,
                    diffPrice: res.data.reSubmitInfo.diffPrice
                }
                if(this.rebookForm.diffPrice <= 0) {
                    this.rebookForm.paymentType = "2"
                }
            } catch (error) {
                
            }
         },

        /**  获取座位  */
        async querySeatListFun(type){
            try {
                await this.countBySeatTypFun(this.rebookForm.auditoriumId)
                await this.resubmitInfoFun()
                let res = await querySeatListNew({
                    auditoriumId: this.rebookForm.auditoriumId,
                    timeId: this.rebookForm.performTimeId,
                    goodsId: this.rebookForm.goodsId,
                    channelType: this.rebookForm.channelType
                })
                if(res.code == 200){
                    let list1 = []
                    res.data.forEach((item,index)=>{
                        list1.push({
                            ...item,
                            isSame: this.rebookForm.seatTypeId != item.seatTypeId
                        })
                    })
                    this.setList = list1;
                    let list = []
                    let list3 = []
                    this.countBySeatTypList.forEach((item,index)=>{
                        list3.push(item.seatTypeId)
                    })
                    let list4 = []
                    this.seatTypeListAll.forEach((item,index)=>{
                        if(list3.includes(item.id)) {
                            list4.push({...item})
                        }
                    })
                    this.$nextTick(() =>{
                        this.$refs.seatBox.querySeatListFun(true,this.setList,list,list4)
                    })
                }
                
                this.loading = false
            } catch (error) {
                this.loading = false
                console.error("error===",error)
            }
        },
        /** 获取座位类型  */
        async countBySeatTypFun(value) {
            try {
                if(!value) return
                let res = await countBySeatTyp({auditoriumId: value})
                this.countBySeatTypList = res.data ? res.data : []
                let obj = {}
                this.countBySeatTypList.forEach((item,index)=>{
                    obj['seatNum_'+item.seatTypeId] = {
                        stockTotal: item.stock,
                        stockSelect: item.stock,
                        stockYes: item.stock,
                        stockNo: 0,
                        isNoSelect: true,
                    }
                    if(item.seatTypeId == this.rebookForm.seatTypeId){
                        obj['seatNum_'+item.seatTypeId].stockYes = item.stock-this.rebookForm.touristNum
                        obj['seatNum_'+item.seatTypeId].isNoSelect = false
                    }
                })
                this.configStockNumObj = obj
            } catch (error) {
                console.error("error1====",error)
            }
        },
        /** 获取座位类型 说明 */
        async getSeatTypeAllList() {
            try {
                let res = await getSeatType({
                    pageNum: 1,
                    pageSize: 999,
                })
                if(res.code == 200) {
                    this.seatTypeListAll = res.data.rows || [];
                }
            } catch (error) {
                        
            }   
        },
         /** 选择座位  */
        selectSeat(list) {
            let list1 = []
            list.forEach((item)=>{
                list1.push({
                    seatId: item.id
                })
            })
            this.rebookForm.seatList = list1
            console.log("已选择的====",list)
        },
        setRealPrice_1(value) {
            if(this.rebookForm.goodsDiffAmount && !isNaN(this.rebookForm.goodsDiffAmount) && value && !isNaN(value)) {
                this.$set(this.rebookForm,'small',mathM.format(Number(value) - Number(this.rebookForm.goodsDiffAmount),10) )
            }
        },
        setRealPrice_2(value) {
            if(this.rebookForm.realPrice_1 && !isNaN(this.rebookForm.realPrice_1) && value && !isNaN(value)) {
                this.$set(this.rebookForm,'small',mathM.format(Number(this.rebookForm.realPrice_1) - Number(value),10) )
            }
        },
         /**  上传图片 单张  */
        handleAvatarSuccess(response, file, fileList) {
            this.actionUrlLoading = false
            if (response.code == 200) {
                this.rebookForm.photoList.push(response.data.url)
            }
            this.$refs.rebookForm.validateField('photoList')
        },
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 <= 100;
            let testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
            let typeList = ['png', 'jepg', 'jpg', 'gif']
            const isJPG = typeList.includes(testmsg);
            if (!isJPG) {
                this.$message.error(`上传图片图片只能是 ${typeList} 格式!`);
            }
            if (!isLt2M) {
                this.$message.error('上传图片图片大小不能超过 100MB!');
            }
            return isJPG && isLt2M;
        },
        handleAvatarProgress() {
            this.actionUrlLoading = true
        },
        handleAvatarError() {
            this.actionUrlLoading = false
        },
        handleRemove(index) {
            this.rebookForm.photoList.splice(index,1)
            this.$refs.rebookForm.validateField('photoList')
        },
        async handleCorporatePay(row) {
          // 获取余额信息
            try {
                const balanceRes = await getBalanceInfo(row.memberId)
                if(balanceRes.code === 200) {
                    this.balance = balanceRes.data.balance
                    this.grantQuota = balanceRes.data.grantSurplus 
                }
            } catch(err) {
                console.error('获取余额信息失败', err)
            }
        },
    }
}
</script>
<style lang="scss" scoped>
.rebook1_dialog ::v-deep .el-dialog__body {
    padding: 0 !important;
}
.rebook1_box {
    width: 100%;
    height: 100%;
    padding-bottom: 10px;
    .rebook1_from-box {
        display: flex;
        width: 100%;
        height: 80vh;
        box-sizing: border-box;
        padding: 0 20px 20px;
    }
    .rebook1_from {
        width: 100%;
        height: 100%;
        overflow: hidden;
        overflow-y: auto;
        padding: 0 20px 0 0;
        width: 400px;
        box-sizing: border-box;
        .tip-box {
            >p {
                color: red;
            }
        }
    }
    .rebook1_seat {
        width: calc( 100% - 400px );
        height: 100%;
    }
}

.increase-viewers-pay-status {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999;
    background-color: rgba(0,0,0,0.3);
    top: 0;
    left: 0;
    .increase-viewers-pay-status-info {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
    } 
} 

::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  ::v-deep .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  ::v-deep .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  ::v-deep .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>