ngds/frontendEle/src/views/user/dec.vue

<template>
    <div v-loading="loading">
        <div class="white-box">
            <el-form ref="form"  label-width="180px" class="form-page">
                <div class="hr-tip"><span>Account Information<!--账号信息--></span></div>

                <el-form-item label="New member code"><!--会员编号-->
                    <el-input v-model="form.insertUserName"></el-input>
                </el-form-item>
                <el-form-item>
                    <template slot="label">
                        Entry level<!--实时报单级别-->
                    </template>
                    <el-select v-model="form.decLv" placeholder="Select entry level" @change="selectOne($event)">
                        <el-option v-for="(item,index) in allDecLevel" :key="index" :label="item.LEVEL_NAME"
                                   :value="item.ID"></el-option>
                    </el-select><!--请选择报单级别-->
                </el-form-item>
                <el-form-item label="Stockist Code"><!--报单中心编号-->
                    <el-input v-model="form.decUserName" readonly></el-input>
                </el-form-item>


                <el-form-item>
                    <template slot="label">
                      Select Welcome Pack<!--报单方式二选一-->
                    </template>
                    <el-tabs type="border-card" v-model="decWay" style="position: relative;width: 1200px;">
<!--                        <el-tab-pane name="1">-->
<!--                            <span slot="label">Welcome Pack</span>&lt;!&ndash;报单级别套餐&ndash;&gt;-->
<!--                            <el-table class="table-box" :data="_tableData" stripe style="width: 100%;" highlight-current-row @current-change="handleCurrentChange">-->
<!--                                <el-table-column-->
<!--                                        type="index"-->
<!--                                        width="50">-->
<!--                                </el-table-column>-->
<!--                                <el-table-column label=" " width="50">-->
<!--                                    <template slot-scope="scope">-->
<!--                                      <span class="el-checkbox__input" :class="{'is-checked':scope && scope.row && currentRow && scope.row.ID==currentRow.ID}">-->
<!--                                        <span class="el-checkbox__inner">-->
<!--                                          </span>-->
<!--                                        <input type="checkbox" aria-hidden="false" class="el-checkbox__original" value="">-->
<!--                                      </span>-->
<!--                                    </template>-->
<!--                                </el-table-column>-->
<!--                                <el-table-column label="Package Name" prop="PACKAGE_NAME" width="300">&lt;!&ndash; 套餐名称 &ndash;&gt;-->

<!--                                </el-table-column>-->
<!--                                <el-table-column label="Price" prop="AMOUNT" width="100">&lt;!&ndash; 套餐金额 &ndash;&gt;-->

<!--                                </el-table-column>-->

<!--                                <el-table-column label="BV" prop="PV" width="100">&lt;!&ndash; 套餐PV &ndash;&gt;-->

<!--                                    <template>-->

<!--                                    </template>-->
<!--                                </el-table-column>-->

<!--                                <el-table-column label="Entry level" prop="LEVEL_NAME" width="100">&lt;!&ndash; 所属报单级别 &ndash;&gt;-->
<!--                                    <template>-->

<!--                                    </template>-->
<!--                                </el-table-column>-->
<!--                                <el-table-column label="Details" prop="PACKAGE_CONTENT" width="">&lt;!&ndash; 套餐内容 &ndash;&gt;-->
<!--                                    <template >-->

<!--                                    </template>-->
<!--                                </el-table-column>-->

<!--                            </el-table>-->
<!--                            &lt;!&ndash; <el-form-item>-->
<!--                               <el-button type="primary" @click="onclock" :loading="submitButton">保存</el-button>-->
<!--                             </el-form-item>&ndash;&gt;-->
<!--                        </el-tab-pane>-->
                        <el-tab-pane label="Product" name="2"><!-- 商品报单 -->
                            <el-table class="table-box" v-if="numList.length > 0" :data="tableDatas" stripe style="width: 100%;" highlight-current-row  @selection-change="handleSelectionChange">
                                <el-table-column
                                        type="selection"
                                        width="55">
                                </el-table-column>

                                <el-table-column label="Product Name" prop="GOODS_NAME" width="300"><!-- 商品名称 -->

                                </el-table-column>
                                <el-table-column label="Product code" prop="GOODS_NO" width="120"><!-- 商品编号 -->

                                </el-table-column>
                                <el-table-column label="Product price" prop="SELL_PRICE" width="120"><!-- 卖价 -->

                                </el-table-column>

                                <el-table-column label="Product BV" prop="PRICE_PV" width="100"><!-- BV价格 -->

                                </el-table-column>
                                <el-table-column label="Tax rate" prop="TAX_RATE" width="100">
                                    <template slot-scope="scope">
                                      {{ Math.round(scope.row.TAX_RATE * 100) / 100 }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="Tax" width="100">
                                    <template slot-scope="scope">
                                      {{ Math.round((scope.row.SELL_PRICE - scope.row.SELL_PRICE / (1 + scope.row.TAX_RATE / 100)) * 100) / 100 }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="Quantity" width="150"><!-- 数量 -->
                                    <template slot-scope="scope">
                                        <el-input-number size="mini" v-model="numList[scope.$index]"  :min="0" :max="Number(scope.row.STORE_NUMS)" @change="value=>{handleChange(value,scope.row.ID)}"></el-input-number>
                                    </template>
                                    <!-- <template slot-scope="scope">
                                        <el-input-number v-if="form.goodsId.some(item=>item==scope.row.ID)" v-model='scope.row.goodsNum' @change="value=>{handleChange(value,scope.row.ID)}" controls-position="right" style="width: 70px;" size="mini"></el-input-number>
                                    </template> -->
                                </el-table-column>

                            </el-table>
                            <div class="white-box-footer flex">
                                <el-button @click="getSum()">Total Calculation</el-button><!--计算合计-->
                                <div class='flex data' style="flex:1;justify-content: flex-end;">
                                    <div style="margin-right:2rem">Price：₦{{sell_price_sum}}</div><!--商品价格-->
                                    <div style="margin-right:2rem">BV：{{price_pv_sum}}</div><!--商品BV-->
                                    <div>Tax：₦{{tax_sum}}</div><!--商品BV-->
                                </div>
                            </div>

                        </el-tab-pane>
                    </el-tabs>
                </el-form-item>

                <div class="hr-tip"><span>Network Information</span></div><!--网络信息-->
                <el-form-item label="Sponsor code"><!--推荐人编号-->
                    <el-input v-model="form.recUserName" @change="handleChkRecUser">
                        <template slot="append">【{{recRealName}}】</template>
                    </el-input>
                </el-form-item>

                <el-form-item label="Placement code"><!--接点人编号-->
                    <el-input v-model="form.conUserName" @change="handleChkConUser">
                        <template slot="append">【{{conRealName}}】</template>
                    </el-input>
                </el-form-item>

                <el-form-item label="Placement tree"><!--安置区位-->
                    <el-radio-group v-model="form.location">
                        <el-radio-button :label="1">Left</el-radio-button><!--左区-->
                        <el-radio-button :label="2">Right</el-radio-button><!--中区-->
                      <!--  <el-radio-button :label="3">Right</el-radio-button> --><!--右区-->
                    </el-radio-group>
                </el-form-item>

                <div class="hr-tip"><span>Personal Information<!--个人信息--></span></div>
                <el-form-item>
                    <template slot="label">
                        Member Name<!-- 会员姓名 -->
                    </template>
                    <el-input v-model="form.realName"></el-input>
                </el-form-item>
                <el-form-item>
                    <template slot="label">

                        Phone Number<!-- 会员手机 -->
                    </template>
                    <el-input v-model="form.mobile"></el-input>
                </el-form-item>
                <el-form-item>
                  <template slot="label">
                        Email
                  </template>
                  <el-input v-model="form.email"></el-input>
                </el-form-item>
<!--                <el-form-item>-->
<!--                    <template slot="label">-->

<!--                        Identity No.&lt;!&ndash; 身份证号 &ndash;&gt;-->
<!--                    </template>-->
<!--                    <el-input v-model="form.insertUserIdCard" maxlength="18"></el-input>-->
<!--                </el-form-item>-->

                <el-form-item>
                    <template slot="label">
                        Login Password<!-- 登录密码 -->
                    </template>
                    <el-input v-model="form.password" maxlength="32" placeholder="Enter password"></el-input>
                </el-form-item>
                <el-form-item>
                    <template slot="label">
                        Payment Password<!-- 支付密码 -->
                    </template>
                    <el-input v-model="form.payPassword" maxlength="32" placeholder="Enter Payment password"></el-input>
                </el-form-item>
                <el-form-item>
                    <template slot="label">
                        Recipient Name<!-- 收货人 -->
                    </template>
                    <el-input v-model="form.consignee"></el-input>
                </el-form-item>
                <el-form-item>
                    <template slot="label">

                        Phone Number<!-- 收货人手机 -->
                    </template>
                    <el-input v-model="form.acceptMobile"></el-input>
                </el-form-item>
                <el-form-item>
                    <template slot="label">
                      Shipping<!-- 收货方式 -->
                    </template>
                    <el-radio-group v-model="form.way" @change="wayChange">
                      <el-radio label="express">Delivery</el-radio>
                      <el-radio label="pickup">Self Pick-up<!--自提--></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item prop="areaSelected">
                    <template slot="label">
                        State<!-- 地区 -->
                    </template>
                    <el-cascader
                            :disabled="areaDisabled"
                            size="large"
                            :options="regionData"
                            v-model="form.areaSelected">
                    </el-cascader>
                </el-form-item>
                <el-form-item>
                    <template slot="label">
                        Full address<!-- 详细地址 -->
                    </template>
                    <el-input :disabled="addressDisabled" v-model="form.address"></el-input>
                </el-form-item>
                <el-form-item>
                  <template slot="label">
                    City<!-- 详细地址 -->
                  </template>
                  <el-input :disabled="addressDisabled" v-model="form.cityName"></el-input>
                </el-form-item>
                <el-form-item>
                  <template slot="label">
                    Local Government Area<!-- 详细地址 -->
                  </template>
                  <el-input :disabled="addressDisabled" v-model="form.lgaName"></el-input>
                </el-form-item>

                <div class="hr-tip"><span>Bank Info<!-- 银行信息 --></span></div>

                <el-form-item label="Bank Name"><!-- 开户行 -->
                    <el-select v-model="form.openBank" placeholder="Select Bank"><!-- 请选择开户行 -->
                        <el-option v-for="(item,index) in allOpenBank" :key="index" :label="item.BANK_NAME"
                                   :value="item.BANK_CODE"></el-option>
                    </el-select>

                </el-form-item>
                <el-form-item label="Account Name"><!-- 开户支行 -->
                    <el-input v-model="form.bankAddress"></el-input>
                </el-form-item>
                <el-form-item label="Account Number"><!-- 银行账号 -->
                    <el-input v-model="form.bankNo" maxlength="19"></el-input>
                </el-form-item>

                <div class="hr-tip"><span>Pay Info<!-- 支付信息 --></span></div>
                <el-form-item label="Payment method" required><!-- 支付方式 -->
                    <el-radio-group v-model="form.payType" @change="payMethodChange">
                        <el-radio v-for="(item, index) in payList" :key='index' :label="item.label">{{ item.name }}</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit" :loading="submitButtonStat">Save<!-- 保存 --></el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-dialog title="Pay" v-if="visible" :visible.sync="visible" width="30%" v-loading="payStackLoading" :before-close="handleClose">
          <section>
            <div class="formcontainer">
              <el-divider></el-divider>
              <div class="container">
                <el-form :model="PayStackForm">
                  <el-form-item label="Email" label-width="100px" required>
                    <el-input v-model="PayStackForm.email" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="Amount" label-width="100px" required>
                    <el-input v-model="PayStackForm.amount" autocomplete="off" readonly></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </section>

          <paystack
            :firstname="PayStackForm.firstname"
            :lastname="PayStackForm.lastname"
            :amount="PayStackForm.amount * 100"
            :email="PayStackForm.email"
            :metadata="PayStackForm.metadata"
            :currency="PayStackForm.currency"
            :paystackkey="PayStackForm.publicKey"
            :reference="reference"
            :channels="channels"
            :callback="processPayment"
            :close="processClose"
          >
            <el-button type="primary" size="small">Pay</el-button>

          </paystack>
          <el-button type="danger" size="small" class="cancelButton" @click="handleClose">Cancel</el-button>
        </el-dialog>

        <el-dialog title="Tips" :visible.sync="payDialog" :show-close="false" width="350px" :close="handleOrderList">
          <el-result icon="success" title="the order is successful">
            <template slot="extra">
              <span style="color: #008efa; font-size: 30px;">{{ countdown }}</span>
            </template>
          </el-result>
        </el-dialog>
    </div>
</template>

<script>
    import Vue from 'vue'
    import network from '@/utils/network'
    import baseInfo from '@/utils/baseInfo'
    import store from '@/utils/vuexStore'
    import tool from '@/utils/tool'
    import userInfo from '@/utils/userInfo'
    import { PAY_STACK_PUBLIC_KEY, PAY_STACK_CURRENCY } from '@/utils/config'
    import paystack from 'vue-paystack'

    export default {
        name: 'user_dec',
        async created() {
          await this.getData()
        },
        computed:{
            _tableData(){
                if(this.tableData==null){
                    return [];
                }
                if(this.form.decLv==''){
                    return this.tableData;
                }
                return this.tableData.filter(item=>{
                    return item.LEVEL_ID == this.form.decLv
                })
            },
            reference() {
              let text = "";
              let possible =
                "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
              for (let i = 0; i < 10; i++)
                text += possible.charAt(Math.floor(Math.random() * possible.length));
              return text;
            }
        },

        data() {
            return {
                currentRow:null,
                decWay:'2',
                regionData: store.state.regionInfo.regionData,
                form: {

                    realName:'',
                    decLv: '',
                    insertUserName:'',
                    decUserName: userInfo.userName(),
                    recUserName:'',
                    conUserName:'',
                    insertUserIdCard:'',
                    consignee:'',
                    acceptMobile:'',
                    areaSelected: [],
                    address: '',
                    openBank:'',
                    bankAddress: '',
                    bankProvince: '',
                    bankCity: '',
                    bankCounty: '',
                    bankNo: '',
                    bankAreaSelected: [],
                    password:'111111',
                    payPassword:'111111',
                    mobile:'',
                    email:'',
                    packageId:'',
                    goodsId:[],
                    goodsNum:[],
                    province:'',
                    cityName:'',
                    lgaName:'',
                    way:"express",
                    payType: '',
                },
                conRealName: '-',
                recRealName: '-',
                num: 1,
                tableData:null,
                tableDatas:null,
                allOpenBank: null,
                allDecPackage:{},
                allDecLevel: baseInfo.decLevels(),
                loading: false,
                submitButtonStat: false,
                submitButton:false,
                allGoods:[],
                multipleSelection: [],
                goodsNums:[],
                numList: [],
                sell_price_sum:0.00,
                price_pv_sum:0.00,
                tax_sum:0.00,
                areaDisabled: false,
                addressDisabled: false,
                category_type: '',
                payList: [],
                sn: '',
                payDialog: false,
                countdown: 5,
                visible: false,
                payStackLoading: false,
                channels: ["card", "bank", "ussd", "qr"], // eft(南非)  mobile_money(加纳)
                PayStackForm: {
                  publicKey: PAY_STACK_PUBLIC_KEY,
                  currency: PAY_STACK_CURRENCY,
                  firstname: userInfo.userName(),
                  lastname: '',
                  email: userInfo.userEmail(),
                  amount: 0,  // kobo
                  orderSn: '',
                  metadata: {
                    cart_id: this.sn,
                    custom_fields: [
                      {
                        display_name: 'orderSn',
                        variable_name: 'orderSn',
                        value: this.sn
                      },
                    ]
                  },
                },
            }
        },
        components: {
          paystack
        },
        methods: {
            wayChange(){
              if(this.form.way==='pickup'){
                this.areaDisabled = true
                this.addressDisabled = true
              }else{
                this.areaDisabled = false
                this.addressDisabled = false
              }
            },
            getSum(){
                let sell_price_sum=0,price_pv_sum=0,tax_sum=0;
                this.multipleSelection.map((item,index)=>{
                    sell_price_sum+=Number(item.SELL_PRICE)*item.goodsNum;
                    price_pv_sum+=Number(item.PRICE_PV)*item.goodsNum;
                    tax_sum += Number(item.SELL_PRICE - item.SELL_PRICE / (1 + item.TAX_RATE / 100)) * item.goodsNum;
                })
                this.sell_price_sum=tool.formatPrice(sell_price_sum);
                this.price_pv_sum=tool.formatPrice(price_pv_sum);
                this.tax_sum = tool.formatPrice(tax_sum);
            },
            async getData () {
                await network.getData(`user/dec`).then(response => {
                    this.loading = false;
                    this.form.insertUserName = response.userName;
                    this.allOpenBank = response.allOpenBank;
                    this.allDecPackage = response.allDecPackage;
                    this.allGoods = response.allGoods;
                    this.categoryType = 1

                    let settingObj=this.allDecPackage;
                    let settingArr = Object.keys(settingObj).map(key => {
                        //console.log(key); //为每个键名
                        return settingObj[key];  //把每个对象返回出去生成一个新的数组中相当于0:{id:1}
                    });
                    this.tableData=settingArr;
                    let settingObj1=this.allGoods;
                    for(let i in settingObj1){
                        this.numList[i] = 1;
                        settingObj1[i].goodsNum= 1 ;
                    }
                     this.tableDatas=settingObj1;
                    // this.tableDatas=this.allGoods.map(item=>{return {...item,goodsNum:1}});

                    // 支付方式
                    this.payList = response.sellType[0]['sell_type']
                    // 支付方式的第一项默认选中
                    this.form.payType = Object.values(this.payList)[0]['label']
                })
            },
            handleCurrentChange(val) {
                if(!val){return}
                this.currentRow = val;
                this.form.packageId=this.currentRow.ID;
            },
            // handleSelectionChange(val) {
            //     this.multipleSelection = val;
            //     this.form.goodsId = this.multipleSelection.map(item => item.ID)
            //     this.form.goodsNum = this.multipleSelection.map(item=>{
            //         return item.goodsNum
            //     })
            // },
            handleSelectionChange(val) {
                let idx = -1,num;
                for(let i in this.tableDatas){
                    for(let v in val){
                        if(val[v].ID==this.tableDatas[i].ID){
                            idx = i;
                            num = this.numList[idx];
                            val[v]["goodsNum"] = num;
                            break;
                        }
                    }
                }
                this.multipleSelection = val;
            },
            handleChange(value,ID) {
                for(let i in this.multipleSelection){
                    if(this.multipleSelection[i]['ID']==ID) {
                        this.multipleSelection[i]["goodsNum"] = value;
                    }
                }
            },
            getGoods(){
                this.form.goodsId=[];
                this.form.goodsNum=[];
                this.multipleSelection.map((item,index)=>{
                    this.form.goodsId.push(item.ID)
                    this.form.goodsNum.push(item.goodsNum)
            })
            },
            onSubmit() {
                let _this = this
                _this.getGoods();
                _this.submitButtonStat = true
                let path = 'user/dec'
                let postData = {
                    consignee: _this.form.consignee,
                    acceptMobile: _this.form.acceptMobile,
                    province: _this.form.areaSelected[0] ? _this.form.areaSelected[0] : '',
                    city: _this.form.areaSelected[1] ? _this.form.areaSelected[1] : '',
                    county: _this.form.areaSelected[2] ? _this.form.areaSelected[2] : '',
                    address: _this.form.address,
                    insertUserName: _this.form.insertUserName,
                    decLv: _this.form.decLv,
                    realName: _this.form.realName,
                    decUserName: _this.form.decUserName,
                    conUserName: _this.form.conUserName,
                    recUserName: _this.form.recUserName,
                    insertUserIdCard: _this.form.insertUserIdCard,
                    openBank: _this.form.openBank,
                    bankAddress: _this.form.bankAddress,
                    mobile: _this.form.mobile,
                    email: _this.form.email,
                    cityName: _this.form.cityName,
                    lgaName: _this.form.lgaName,

                    bankProvince: _this.form.bankAreaSelected[0] ? _this.form.bankAreaSelected[0] : '',
                    bankCity: _this.form.bankAreaSelected[1] ? _this.form.bankAreaSelected[1] : '',
                    bankCounty: _this.form.bankAreaSelected[2] ? _this.form.bankAreaSelected[2] : '',


                    bankNo: _this.form.bankNo,
                    password: _this.form.password,
                    payPassword: _this.form.payPassword,
                    packageId: _this.form.packageId,
                    goodsId: _this.form.goodsId,
                    goodsNum: _this.form.goodsNum,
                    location: _this.form.location,
                    decWay:_this.decWay,
                    payType: _this.form.payType,
                }

                return network.postData(path, postData).then((response) => {
                    // 非PayStack支付
                    if (_this.form.payType !== 'pay_stack') {
                        _this.$message({
                          message: response,
                          type: 'success'
                        })
                        _this.submitButtonStat = false
                        _this.$router.push({path: `/shop/dec-order-list`})
                    } else {
                        // PayStack支付
                        _this.submitButtonStat = false
                        _this.PayStackForm.orderSn = response.SN
                        _this.PayStackForm.amount = response.ORDER_AMOUNT
                        _this.PayStackForm.metadata.custom_fields[0].value = response.SN
                        _this.visible = true
                    }
                }).catch(response => {
                    _this.submitButtonStat = true
                    _this.$message({
                      message: response,
                      type: 'error'
                    })
                })
            },

            selectOne(event, item) {
                network.getData(`user/dec`).then(response => {

                })

            },

            handleChkConUser() {
                if (this.form.conUserName) {
                    this.loading = true
                    network.getData('user/full-info', {userName: this.form.conUserName}).then(response => {
                        this.conRealName = response.REAL_NAME + response.isLocation
                        this.loading = false
                    }).catch(response => {
                        this.conRealName = '-'
                        this.loading = false
                    })
                }
            },

            handleChkRecUser() {
                if (this.form.recUserName) {
                    this.loading = true
                    network.getData('user/full-info', {userName: this.form.recUserName}).then(response => {
                        this.recRealName = response.REAL_NAME
                        this.loading = false
                    }).catch(response => {
                        this.recRealName = '-'
                        this.loading = false
                    })
                }
            },
            // 切换支付方式
            payMethodChange(type) {
                this.form.payType = type
            },
            // 关闭支付回调
            handleClose() {
                let _this = this
                _this.$confirm('Confirm to close?').then(() => {
                    return network.postData('shop/delete-approach-order', {orderSn: this.PayStackForm.orderSn}).then(() => {
                        // 关闭支付模态框
                        _this.visible = false
                    })
                }).catch(() => {
                    // 关闭支付模态框
                    _this.visible = false
                })
            },
            // 支付成功回调
            processPayment(response) {
                // 关闭支付页面
                this.visible = false
                this.payStackLoading = false

                // 显示支付成功模态框
                this.payDialog = true
                this.handleCountdown()
            },
            // 关闭支付回调
            processClose() {
                // 关闭支付模态框
                this.visible = false
            },
            // 支付tips结束,跳转到报单列表
            handleOrderList() {
                this.$router.push({path: `/shop/dec-order-list`})
            },
            // 启动倒计时
            handleCountdown() {
                //创建定时器
                setInterval(() => {
                    // 每隔1秒把time的值减一，赋值给span标签
                    this.countdown--
                    if (this.countdown === 0) {
                        // 倒计时结束,跳转到报单列表
                        this.$router.push({path: `/shop/dec-order-list`})
                    }
                }, 1000)
            },
        }
    }
</script>

<style>
    .hr-tip {
        font-size: 12px;
        position: relative;
        text-align: center;
        height: 30px;
        line-height: 30px;
        color: #999;
        margin-bottom: 20px;
    }

    .hr-tip:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 14px;
        border-bottom: 1px dashed #ddd;
        height: 1px;
    }

    .hr-tip span {
        display: inline-block;
        background: #fff;
        position: relative;
        padding: 0 10px;
    }
    .el-input-number--mini .el-input-number__decrease, .el-input-number--mini .el-input-number__increase{width: 22px!important}
    .el-input-number.is-controls-right .el-input__inner{padding-left: 10px;
        padding-right: 30px;}
    .el-tabs--border-card{
        position: relative;
    width: 600px;
    }
    .flex{
        display: flex;
    }
    .address{
      /* height: 3rem; */
      line-height: 3.5rem;

    }
    .address_box{
      border-bottom: 1px solid #e3e3e3;
    }
    .sum{
      display: inline-block;
    }
    .box{
      margin: 1rem 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-bottom: 1rem;
    }
    .sum_box{
      display: flex;
      margin-left: 1rem;
    }
    .sum_box > div{
      line-height: 2rem;
    }
    .sum_box > div:nth-child(1){
      margin-right: 1rem;
    }
    .payButton {
      border: none;
      padding: 0;
    }
</style>