pointsMall/src/views/HomeView/RedeemView.vue

<template>
    <div class="right-wrap">
        <el-breadcrumb separator="/" style="margin-bottom: 13px;">
            <el-breadcrumb-item :to="{ path: '/home/pointsMall' }">积分商城</el-breadcrumb-item>
            <el-breadcrumb-item>兑换详情</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>兑换详情</span>
                <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
            </div>
            <div class="footer">
                <div class="left-info" style="width: 100%;">
                    <span class="info-title">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"
                            class="info-icon">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1Z"
                                fill="#165DFF"></path>
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M8.54189 6.70582C8.67075 6.70582 8.77522 6.81029 8.77522 6.93915L8.77511 10.2335L9.46743 10.2343C9.61176 10.2343 9.72876 10.3513 9.72876 10.4956V11.3319C9.72876 11.4762 9.61176 11.5932 9.46743 11.5932H6.58458C6.44025 11.5932 6.32324 11.4762 6.32324 11.3319V10.4956C6.32324 10.3513 6.44025 10.2343 6.58458 10.2343L7.28178 10.2335V8.08122L7.14759 8.08198C7.00326 8.08198 6.88626 7.96498 6.88626 7.82065V6.97073C6.88626 6.8264 7.00326 6.70939 7.14759 6.70939L7.47956 6.70859C7.49132 6.70677 7.50337 6.70582 7.51565 6.70582H8.54189ZM8.40513 4.41602C8.54946 4.41602 8.66646 4.53302 8.66646 4.67735V5.64802C8.66646 5.79235 8.54946 5.90935 8.40513 5.90935H7.43446C7.29013 5.90935 7.17313 5.79235 7.17313 5.64802V4.67735C7.17313 4.53302 7.29013 4.41602 7.43446 4.41602H8.40513Z"
                                fill="white"></path>
                        </svg>
                        物品介绍
                    </span>
                    <div v-html="data.comment"></div>
                </div>
            </div>
            <div v-show="deliveryType == 1">
                <p class="label">收货地址</p>
                <div class="address">
                    <div v-if="addressDetail">
                        <div class="address-container">
                            <div class="header">
                                <div class="left">
                                    <span>{{ name }}</span>
                                </div>
                                <span @click="handleClickAddress" role="button" class="btn">修改</span>
                            </div>
                            <p class="phone">{{ phone }}</p>
                            <p class="address">{{ address }}</p>
                        </div>
                    </div>
                    <div v-else @click="handleClickAddress">
                        <div class="address-container new"><i class="add-icon byte-icon byte-icon--plus"><svg
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
                                    <path fill="none" d="M0 0h48v48H0z"></path>
                                    <path
                                        d="M24.7 4c.4 0 .6 0 .8.1.2.1.3.2.4.4.1.2.1.3.1.8V22h16.7c.4 0 .6 0 .8.1.2.1.3.2.4.4.1.2.1.3.1.8v1.4c0 .4 0 .6-.1.8-.1.2-.2.3-.4.4-.2.1-.3.1-.8.1H26v16.7c0 .4 0 .6-.1.8-.1.2-.2.3-.4.4-.2.1-.3.1-.8.1h-1.4c-.4 0-.6 0-.8-.1-.2-.1-.3-.2-.4-.4-.1-.2-.1-.3-.1-.8V26H5.3c-.4 0-.6 0-.8-.1-.2-.1-.3-.2-.4-.4-.1-.2-.1-.3-.1-.8v-1.4c0-.4 0-.6.1-.8.1-.2.2-.3.4-.4.2-.1.3-.1.8-.1H22V5.3c0-.4 0-.6.1-.8.1-.2.2-.3.4-.4.2-.1.3-.1.8-.1h1.4z">
                                    </path>
                                </svg></i> <span class="add-label">添加收货地址</span></div>
                    </div>

                </div>
            </div>
            <div v-show="deliveryType == 4">
                <p class="label">手机直充</p>
                <div class="address">
                    <div v-if="phoneNumber">
                        <div class="address-container" style="min-height: 45px;">
                            <div class="header">
                                <div class="left">
                                    <span>{{ phoneNumber }}</span>
                                </div>
                                <span @click="handleClickPhoneNumber" role="button" class="btn">修改</span>
                            </div>
                        </div>
                    </div>
                    <div v-else @click="handleClickPhoneNumber">
                        <div class="address-container new"><i class="add-icon byte-icon byte-icon--plus"><svg
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
                                    <path fill="none" d="M0 0h48v48H0z"></path>
                                    <path
                                        d="M24.7 4c.4 0 .6 0 .8.1.2.1.3.2.4.4.1.2.1.3.1.8V22h16.7c.4 0 .6 0 .8.1.2.1.3.2.4.4.1.2.1.3.1.8v1.4c0 .4 0 .6-.1.8-.1.2-.2.3-.4.4-.2.1-.3.1-.8.1H26v16.7c0 .4 0 .6-.1.8-.1.2-.2.3-.4.4-.2.1-.3.1-.8.1h-1.4c-.4 0-.6 0-.8-.1-.2-.1-.3-.2-.4-.4-.1-.2-.1-.3-.1-.8V26H5.3c-.4 0-.6 0-.8-.1-.2-.1-.3-.2-.4-.4-.1-.2-.1-.3-.1-.8v-1.4c0-.4 0-.6.1-.8.1-.2.2-.3.4-.4.2-.1.3-.1.8-.1H22V5.3c0-.4 0-.6.1-.8.1-.2.2-.3.4-.4.2-.1.3-.1.8-.1h1.4z">
                                    </path>
                                </svg></i> <span class="add-label">填写充值手机号</span></div>
                    </div>

                </div>
            </div>

            <p class="label">物品信息</p>
            <div v-if="activeName == 'goodsNotice'">
                <table class="table">
                    <thead>
                        <tr>
                            <th width="25%">兑换物品</th>
                            <th style="text-align: center;">数量</th>
                            <th style="text-align: center;">单价</th>
                            <th style="text-align: center;" width="15%"><span style="color: red;">*</span>兑换方式</th>
                            <th v-if="deliveryType=='0'"  style="text-align: center;" width="15%">
                                <span style="color: red;">*</span>领取地点
                            </th>
                            <th style="text-align: center;">总计</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="prize-info">
                                    <div class="prize-img-container">
                                        <el-image :src="data.imgUrl" v-if="data.imgUrl" :preview-src-list="[data.imgUrl]"
                                            class="prize-img"></el-image>
                                    </div>
                                    <div class="prize-detail-info">
                                        <h3 class="title">{{ data.name }}</h3>
                                        <!-- <p class="desc">
                                            <span v-if="data.location">{{ data.location }}</span>
                                        </p> -->
                                    </div>
                                </div>
                            </td>
                            <td style="text-align: center;">
                                <el-input-number @change="changeCount" size="mini" v-model="skuCount" :step="1" :min="1"
                                    step-strictly></el-input-number>
                            </td>
                            <td style="text-align: center;">{{ data.price }} 积分</td>
                            <td style="text-align: center;">
                                <el-select size="small" clearable v-model="deliveryType" placeholder="请选择" value-key="value" @change="changeDeliveryType">
                                    <el-option :key="item.dictValue" v-for="item in deliveryTypeList" :label="item.dictLabel" :value="item.dictValue">
                                    </el-option>
                                </el-select>
                            </td>
                            <td v-if="deliveryType=='0'"  style="text-align: center;">
                                <el-select size="small" clearable v-model="reclaimAddr" placeholder="请选择" value-key="value" @change="changeReclaimAddr">
                                    <el-option :key="item.dictValue" v-for="item in reclaimAddrList" :label="item.dictLabel" :value="item.dictValue">
                                    </el-option>
                                </el-select>
                            </td>
                            <td style="text-align: center;" class="finlly-price">
                                {{ total }} 积分
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div v-else>
                <table class="table">
                    <thead>
                        <tr>
                            <th width="35%">兑换物品</th>
                            <th style="text-align: center;">消耗福利券</th>
                            <th style="text-align: center;">物品属性</th>
                            <th style="text-align: center;" width="20%"><span style="color: red;">*</span>兑换方式</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="prize-info">
                                    <div class="prize-img-container">
                                        <el-image :src="data.imgUrl" v-if="data.imgUrl" :preview-src-list="[data.imgUrl]"
                                            class="prize-img"></el-image>
                                    </div>
                                    <div class="prize-detail-info">
                                        <h3 class="title">{{ data.name }}</h3>
                                        <!-- <p class="desc">
                                            <span v-if="data.location">{{ data.location }}</span>
                                        </p> -->
                                    </div>
                                </div>
                            </td>
                            <td style="text-align: center;">{{ data.title }}</td>
                            <td style="text-align: center;">{{ data.productAttributeName }}</td>
                            <td style="text-align: center;" class="finlly-price">
                                <el-select size="small" clearable v-model="deliveryType" placeholder="请选择" value-key="value" @change="changeDeliveryType">
                                    <el-option :key="item.dictValue" v-for="item in deliveryTypeList" :label="item.dictLabel" :value="item.dictValue">
                                    </el-option>
                                </el-select>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="footer">
                <div class="right" v-if="data.stock != 0">
                    <div class="btn-line">
                        <el-button :disabled="disabled" @click="handleClickExchange" type="primary" round>确认兑换</el-button>
                    </div>
                </div>
            </div>
        </el-card>
        <el-dialog title="兑换物品收货地址" :visible.sync="dialogFormVisible" width="500px">
            <el-form :model="dataForm" ref="dataForm" style="padding: 0 75px;" :rules="rules">
                <el-form-item label="联系姓名" :label-width="formLabelWidth" prop="name">
                    <el-input size="medium" v-model="dataForm.name" placeholder="请输入联系姓名"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" :label-width="formLabelWidth" prop="phone">
                    <el-input size="medium" v-model="dataForm.phone" placeholder="请输入11位手机号码"></el-input>
                </el-form-item>

                <el-form-item label="联系地址"
                    :label-width="formLabelWidth" prop="address">
                    <el-input size="medium" v-model="dataForm.address" placeholder="请输入详细联系地址"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button class="addButton-address" type="primary" @click="submitForm('dataForm')">提交</el-button>
            </div>
        </el-dialog>
        <el-dialog title="手机充值" :visible.sync="dialogFormPhoneNumber" width="500px">
            <el-form :model="dataFormPhoneNumber" ref="dataFormPhoneNumber" :rules="rules">
                <el-form-item label="充值手机号" :label-width="formLabelWidth" prop="phoneNumber">
                    <el-input size="medium" v-model="dataFormPhoneNumber.phoneNumber" placeholder="请输入11位手机号码"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button class="addButton-address" type="primary" @click="submitFormPhoneNumber('dataFormPhoneNumber')">提交</el-button>
            </div>
        </el-dialog>
        <el-dialog title="结算明细" :visible.sync="dialogFormOrderInfo" width="300px">
            <div class="checklist">
                <div class="listItem">
                    <div class="itemName">商品积分</div>
                    <div class="itemValue">{{ data.price }}</div>
                </div>
                <div class="listItem">
                    <div class="itemName">商品数量</div>
                    <div class="itemValue">{{ skuCount }}</div>
                </div>
                <div class="listItem">
                    <div class="itemName">快递积分</div>
                    <div class="itemValue red">+180</div>
                </div>
                <div class="listItem">
                    <div class="itemName">合计</div>
                    <div class="itemValue">{{ total }}</div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button class="addButton-address" type="primary" style="background-image: linear-gradient(to right, #f5b543,#faa029);width: 100px;height: 35px;line-height: 34px;" @click="handleClickOrderInfo">确定</el-button>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="dialogMsgVisible" width="400px" @close="handleClose">
            <div class="wrapper">
                <svg width="291" height="93" viewBox="0 0 291 93" fill="none" xmlns="http://www.w3.org/2000/svg"
                    src="./success.svg" class="success-icon">
                    <g filter="url(#filter0_f_6844:108643)">
                        <circle cx="143" cy="56.5723" r="3" fill="#51F1E8"></circle>
                    </g>
                    <path d="M195.768 48.1699L195.768 39.5097L203.268 43.8398L195.768 48.1699Z" fill="#FF5E54"></path>
                    <path d="M232.39 10.953L230.149 2.58781L238.514 4.82925L232.39 10.953Z" fill="#9F54FF"></path>
                    <path d="M7.519 27.6623L1.39528 21.5385L9.76044 19.2971L7.519 27.6623Z" fill="#FF834E"></path>
                    <path
                        d="M106.774 8.99609L96.2168 11.168C94.5498 27.4571 102.885 34.5158 107.886 36.6877C113.999 37.7736 120.031 35.8701 124 32.8869C111.22 33.4298 104.552 19.3126 106.774 8.99609Z"
                        fill="#51F1E8"></path>
                    <path
                        d="M283.89 68.9961L290.383 70.4176C292.692 77.5253 288.076 83.9223 283.89 84.9096C280.384 85.3438 277.597 84.0817 275 82.5007C284.452 83.364 285.768 73.9715 283.89 68.9961Z"
                        fill="#FF5E54"></path>
                    <g filter="url(#filter1_f_6844:108643)">
                        <path
                            d="M50 82.4171L55.3529 77.9961C57.902 79.4698 63 83.3014 63 86.8382C59.8213 88.1508 58.6931 89.8153 58.427 90.9879C58.4503 91.3588 58.4426 91.6987 58.4118 91.9961C58.3461 91.7429 58.3346 91.395 58.427 90.9879C58.2575 88.2958 56.4523 83.9714 50 82.4171Z"
                            fill="#FFCF8B"></path>
                    </g>
                    <defs data-v-50d84ad4="">
                        <filter id="filter0_f_6844:108643" x="139" y="52.5723" width="8" height="8"
                            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                            <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
                            <feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_6844:108643"></feGaussianBlur>
                        </filter>
                        <filter id="filter1_f_6844:108643" x="49" y="76.9961" width="15" height="16"
                            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                            <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
                            <feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_6844:108643"></feGaussianBlur>
                        </filter>
                    </defs>
                </svg>
                <h2 class="header">恭喜你，兑换成功！</h2>
                <img :src="data.imgUrl" class="icon">
                <div class="desc">
                    <span>已下单，经过审批后，2周内发货，如有问题联系物品介绍中备注的相关联系人</span>
                    <!-- <span>恭喜你成功兑换{{ data.name }}，随后你可在</span>
                    <a href="/home/myCenter" class="link">个人中心</a>中查看兑换的物品 -->
                </div>
            </div>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <router-link to="/home/myCenter">
                    <el-button @click="setTab" class="addButton-address" type="primary">
                        查看物品
                    </el-button>
                </router-link>

            </div>
        </el-dialog>
    </div>
</template>
<script>
import { integralInfo, festivalInfo, start, kill } from "@/api/allApi";
import { setTab } from '@/utils/auth'
import { debounce } from '@/utils/index'
export default {
    data() {
        var validPhone = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入手机号'));
            }
            else {
                const reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
                const isCheckPhone = reg_tel.test(value);
                if (!isCheckPhone) {
                    callback(new Error('请输入正确手机号'));
                }
                callback();
            }
        };
        return {
            reclaimAddr:'',
            reclaimAddrList:[],
            phoneNumber:'',
            deliveryTypeList:[],
            deliveryType:'',
            contactInfo:{},
            activeName: this.$route.query.activeName,
            name: '',
            phone: '',
            address: '',
            disabled: true,
            skuCount: 1,
            total: undefined,
            data: {},
            dialogFormOrderInfo:false,
            dialogFormPhoneNumber:false,
            addressDetail: false,
            dialogFormVisible: false,
            dialogMsgVisible: false,
            dataFormPhoneNumber:{
                phoneNumber:'',
            },
            dataForm: {
                name: '',
                phone: '',
                address: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入联系姓名', trigger: 'blur' },
                    { min: 1, max: 25, message: '长度在 1 到 25 个字符', trigger: 'blur' }
                ],
                phone: [
                    { required: true, validator: validPhone, trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '请输入联系地址', trigger: 'blur' },
                    { min: 1, max: 120, message: '长度在 1 到 120 个字符', trigger: 'blur' }
                ],
                phoneNumber: [
                    { required: true, validator: validPhone, trigger: 'blur' }
                ],

            },
            formLabelWidth: '100px',
        };
    },
    created() {
        const skuId = this.$route.query.id;
        const activeName = this.$route.query.activeName;
        this.dataForm.skuId = skuId;
        this.getInfo(skuId, activeName);
    },
    methods: {
        handleClickOrderInfo(){
            this.dialogFormOrderInfo = false;
        },
        changeReclaimAddr(val){
            this.disabled = true;
            if(val){
                this.disabled = false;
            }
        },
        changeDeliveryType(val){
            this.disabled = true;
            if(val=='0' || val==''){
                this.total = this.data.price;
                this.skuCount = 1;
            }
            if(val=='1'){
                debugger
                if(this.data.productAttribute=='exchange_logo'){
                    this.total = this.data.price * this.skuCount + 180;
                    this.dialogFormOrderInfo = true;
                }
                if(this.address){
                    this.addressDetail = true;
                    this.disabled = false;
                }
            }
            if(val=='2' || val=='3'){
                this.total = this.data.price;
                this.skuCount = 1;
                this.disabled = false;
            }
            if(val=='4'){
                this.total = this.data.price;
                this.skuCount = 1;
                if(this.phoneNumber){
                    this.disabled = false;
                }
            }
        },
        setTab() {
            setTab('exchange');
        },
        changeCount(val) {
            this.total = this.data.price * val;
            if(this.deliveryType=='1' && this.data.productAttribute=='exchange_logo'){
                this.total = this.data.price * val + 180;
            }
        },
        handleClose() {
            this.dialogMsgVisible = false;
            this.$router.push({
                path: '/home/pointsMall',
            });
        },
        getInfo(skuId, activeName) {
            if (activeName == 'goodsNotice') {
                integralInfo({ skuId: skuId }).then(response => {
                    this.data = response.data.data;
                    this.deliveryTypeList = response.data.data.dictDataList;
                    this.reclaimAddrList = response.data.data.reclaimAddrList;
                    this.contactInfo = response.data.data.contactInfo;
                    if(this.contactInfo){
                        this.name = this.contactInfo.contact;
                        this.phone = this.contactInfo.contactPhone;
                        this.address = this.contactInfo.contactAddr;
                    }
                    this.total = response.data.data.price;
                }).catch(() => {

                })
            } else {
                festivalInfo({ skuId: skuId }).then(response => {
                    this.data = response.data.data;
                    this.contactInfo = response.data.data.contactInfo;
                    this.deliveryTypeList = response.data.data.dictDataList;
                    if(this.contactInfo){
                        this.name = this.contactInfo.contact;
                        this.phone = this.contactInfo.contactPhone;
                        this.address = this.contactInfo.contactAddr;
                    }
                }).catch(() => {

                })
            }
        },
        handleClickPhoneNumber(){
            this.dialogFormPhoneNumber = true;
            this.dataFormPhoneNumber.phoneNumber = this.phoneNumber;
        },
        handleClickAddress() {
            this.dialogFormVisible = true;
            this.dataForm.name = this.name;
            this.dataForm.phone = this.phone;
            this.dataForm.address = this.address;

        },
        submitFormPhoneNumber(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.phoneNumber = this.dataFormPhoneNumber.phoneNumber,
                    this.dialogFormPhoneNumber = false;
                    this.disabled = false;
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    this.name = this.dataForm.name,
                        this.phone = this.dataForm.phone,
                        this.address = this.dataForm.address,
                        this.addressDetail = true;
                    this.dialogFormVisible = false;
                    this.disabled = false;
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        submit(){
            if(this.deliveryType=='1'){
                var params = {
                    skuId: this.data.skuId,
                    skuCount: this.skuCount,
                    price:this.data.price,
                    deliveryType:this.deliveryType,
                    contact: this.name,
                    contactPhone: this.phone,
                    contactAddr: this.address,
                
                    skuType: this.data.skuType,
                    welfareId: this.data.welfareId,
                }
            }else if(this.deliveryType=='4'){
                var params = {
                    skuId: this.data.skuId,
                    skuCount: this.skuCount,
                    price:this.data.price,
                    deliveryType:this.deliveryType,
                    contactPhone: this.phoneNumber,

                    skuType: this.data.skuType,
                    welfareId: this.data.welfareId,
                }
            }else{
                var params = {
                    skuId: this.data.skuId,
                    skuCount: this.skuCount,
                    price:this.data.price,
                    deliveryType:this.deliveryType,
                    reclaimAddr:this.reclaimAddr,

                    skuType: this.data.skuType,
                    welfareId: this.data.welfareId,
                }
            }
            
            if (this.activeName == 'goodsNotice') {
                start(params).then(response => {
                    console.log(response.data.data);
                    this.$store.dispatch('GetUserInfo');
                    this.dialogMsgVisible = true;
                }).catch(() => { })
            } else {
                kill(params).then(response => {
                    console.log(response.data.data);
                    this.$store.dispatch('GetUserInfo');
                    this.dialogMsgVisible = true;
                }).catch(() => { })
            }
        },
        handleClickExchange:debounce(function(){
                this.submit();
            },2000,true),
    }
};
</script>
<style scoped>
.red{
    color: red;
}
/* .checklist{

} */
.listItem{
    display: flex;
    justify-content: space-between;
    align-content: center;
    padding: 5px 0;
}
/* .itemName{

} */
/* .itemValue{

} */
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 100%;
}

/* .label:first-child {
    margin-top: 0;
} */

.label {
    font-size: 16px;
    line-height: 24px;
    margin: 16px 0 24px;
}

.address-container {
    padding: 16px;
    min-height: 112px;
    background-color: #f7f8fa;
    box-sizing: border-box;
    border-radius: 4px;
    width: 320px;
    border: 1px solid #abcdff;
}

.address-container .header {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #252933;
    display: flex;
    justify-content: space-between;
    margin: 0 0 8px;
}

.address-container .header .left {
    display: flex;
    justify-content: center;
    align-items: center;
}

.address-container .btn {
    flex: none;
    color: #1e80ff;
    cursor: pointer;
    font-weight: 400;
    margin-left: 1em;
}

.address-container .address,
.address-container .phone {
    margin: 0;
    font-size: 14px;
    line-height: 24px;
    color: #515767;
}

.address-container.new {
    border: 1px dashed #e4e6eb;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-flow: column nowrap;
}

.address-container {
    padding: 16px;
    min-height: 112px;
    background-color: #f7f8fa;
    box-sizing: border-box;
    border-radius: 4px;
    width: 320px;
    border: 1px solid #abcdff;
}

.address-container.new .add-icon {
    font-size: 16px;
    color: #515767;
}

.byte-icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

svg:not(:root) {
    overflow-clip-margin: content-box;
    overflow: hidden;
}

.byte-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    pointer-events: none;
}

.address-container.new .add-label {
    font-size: 14px;
    line-height: 24px;
    color: #8a919f;
    margin: 18px 0 0;
}

.table {
    border-collapse: collapse;
    border: 1px solid #e4e6eb;
    box-sizing: border-box;
    border-radius: 2px;
    width: 100%;
    text-align: left;
    font-size: 14px;
    line-height: 24px;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 4px;
}

.table tr {
    border: 1px solid #e4e6eb;
}

.table th {
    padding: 12px 16px;
    background-color: #f7f8fa;
    font-weight: 500;
    color: #282f38;
}

.table td {
    padding: 16px;
    vertical-align: middle;
    color: #515767;
}

.table .prize-info {
    display: flex;
}

.table .prize-img-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f8fa;
    max-width: 80px;
    height: 80px;
}

.table .prize-detail-info {
    margin-left: 16px;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: center;
}

.table .prize-img-container .prize-img {
    max-height: 64px;
}

.lazy {
    position: relative;
    -o-object-fit: cover;
    object-fit: cover;
}

img {
    border-style: none;
}

.table .prize-detail-info {
    margin-left: 16px;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: center;
}

.table .prize-detail-info .title {
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #1d2129;
    margin: 0 0 3px;
}

.table .prize-detail-info .desc {
    margin: 0;
    line-height: 18px;
    height: 18px;
}

.table .prize-detail-info .desc span {
    font-size: 12px;
    line-height: 14px;
    color: #ff7d00;
    background: #fff7e8;
    padding: 2px 4px;
}

.table .finlly-price {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #1e80ff;
}

.footer {
    margin-top: 16px;
    /* display: flex;
    justify-content: space-between; */
}

.footer .left-info {
    box-sizing: border-box;
    width: 400px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    background-color: #e8f3ff;
    border-radius: 4px;
    padding: 16px;
}

.footer .left-info .info-title {
    font-size: 14px;
    line-height: 24px;
    color: #282f38;
    display: flex;
    align-items: center;
}

.footer .left-info .info-icon {
    margin-right: 8px;
}

.footer .left-info .info-content {
    margin: 4px 0 4px 2em;
    white-space: pre-line;
    font-size: 12px;
    line-height: 20px;
    color: #8a919f;
}

.footer .right {
    font-size: 14px;
    line-height: 24px;
    color: #282f38;
}

.footer .right .remark-line {
    display: flex;
    position: relative;
}

.footer .right .remark {
    width: 400px;
}

.footer .right .btn-line {
    margin-top: 16px;
    text-align: right;
}

.addButton-address {
    background: #1e80ff;
    border-color: #1e80ff;
    color: #fff;
    width: 160px;
    height: 48px;
    border-radius: 50px;
    line-height: 46px;
    padding: 0;
    font-size: 16px;
    border: 1px solid transparent;
}

.wrapper .icon {
    height: 88px;
    margin-bottom: 24px;
    max-width: 300px;
}
</style>
<style>
.el-dialog__body {
    padding-bottom: 0px;
    padding-top: 10px;

}
</style>