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">{{ addressStr + street + 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="imgUrls.length==0?[data.imgUrl]:imgUrls"
                                            class="prize-img"></el-image>
                                    </div>
                                    <div class="prize-detail-info">
                                        <h3 class="title" @click="handleClickGood(data.skuId)">{{ 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="dialogVisible = true" type="primary" round>确认兑换</el-button>
                    </div>
                </div>
            </div>
        </el-card>
        <el-dialog title="兑换物品收货地址" :visible.sync="dialogFormVisible" width="500px">
            <el-form label-position="left" :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="addressArr">
                    <el-cascader style="width: 100%" clearable placeholder="请选择省市区" size="medium" :options="options"
                        v-model="dataForm.addressArr" @change="handleChange">
                    </el-cascader>
                </el-form-item>

                <el-form-item label="街道" :label-width="formLabelWidth" prop="street">
                    <el-input size="medium" v-model="dataForm.street" placeholder="请输入街道"></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>
        <el-dialog title="兑换确认" :visible.sync="dialogVisible" width="30%">
            <div class="checklist">
                <div class="listItem">
                    <div class="itemName">商品名称</div>
                    <div class="itemValue">{{ data.name }}</div>
                </div>
                <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 v-if="deliveryType == '1' && data.productAttribute == 'exchange_logo'" class="listItem">
                    <div class="itemName">快递积分</div>
                    <div class="itemValue red">+180</div>
                </div>
                <div class="listItem">
                    <div class="itemName">兑换方式</div>
                    <div class="itemValue">{{ deliveryTypeName }}</div>
                </div>
                <div v-if="deliveryType == '0'" class="listItem">
                    <div class="itemName">领取地点</div>
                    <div class="itemValue">{{ reclaimAddrName }}</div>
                </div>
                <div class="listItem">
                    <div class="itemName">合计</div>
                    <div class="itemValue">{{ total }}</div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleClickExchange">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { integralInfo, festivalInfo, start, kill } from "@/api/allApi";
import {regionData,codeToText,} from "element-china-area-data";
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 {
            dialogVisible:false,
            options: regionData,
            reclaimAddr: "",
            reclaimAddrName: "",
            reclaimAddrList: [],
            phoneNumber: "",
            deliveryTypeList: [],
            deliveryType: "",
            deliveryTypeName:"",
            contactInfo: {},
            activeName: this.$route.query.activeName,
            name: "",
            phone: "",
            addressArr: [],
            addressStr: "",
            street: "",
            address: "",
            disabled: true,
            skuCount: 1,
            total: undefined,
            data: {},
            imgUrls:[],
            dialogFormOrderInfo: false,
            dialogFormPhoneNumber: false,
            addressDetail: false,
            dialogFormVisible: false,
            dialogMsgVisible: false,
            dataFormPhoneNumber: {
                phoneNumber: "",
            },
            dataForm: {
                name: "",
                phone: "",
                addressArr: [],
                addressStr: "",
                street: "",
                address: "",
            },
            rules: {
                name: [
                    { required: true, message: "请输入联系姓名", trigger: "blur" },
                    {
                        min: 1,
                        max: 25,
                        message: "长度在 1 到 25 个字符",
                        trigger: "blur",
                    },
                ],
                phone: [{ required: true, validator: validPhone, trigger: "blur" }],
                addressArr: [
                    { required: true, message: "请选择省市区", trigger: "blur" },
                ],
                street: [
                    { required: true, message: "请输入街道", trigger: "blur" },
                    {
                        min: 1,
                        max: 120,
                        message: "长度在 1 到 120 个字符",
                        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: "80px",
        };
    },
    created() {
        const skuId = this.$route.query.id;
        const activeName = this.$route.query.activeName;
        this.dataForm.skuId = skuId;
        this.getInfo(skuId, activeName);
    },
    methods: {
        handleClickGood(id) {
            this.$router.push({
                path: '/home/pointsMall/goodDetail',
                query: {
                    id: id,
                }
            });
        },
        handleClick(){
            this.dialogVisible = true;
        },
        handleChange(value) {
            console.log(value);
            var loc = "";
            for (let i = 0; i < value.length; i++) {
                loc += codeToText[value[i]];
            }
            console.log(loc); //打印区域码所对应的属性值即中文地址
            this.dataForm.addressStr = loc;
        },
        handleClickOrderInfo() {
            this.dialogFormOrderInfo = false;
        },
        changeReclaimAddr(val) {
            this.disabled = true;
            if (val) {
                this.disabled = false;
            }
            this.reclaimAddrName = this.reclaimAddrList.find(item => item.dictValue == val).dictLabel;
        },
        changeDeliveryType(val) {
            this.reclaimAddr = '';
            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;
                }
            }
            this.deliveryTypeName = this.deliveryTypeList.find(item => item.dictValue == val).dictLabel;
        },
        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.addressArr = this.contactInfo.addressArr;
                            this.addressStr = this.contactInfo.addressStr;
                            this.street = this.contactInfo.street;
                            this.address = this.contactInfo.contactAddr;
                        }
                        this.total = response.data.data.price;
                        let imgs = response.data.data.imgs;
                        if(imgs){
                            imgs.forEach(element => {
                                this.imgUrls.push(element.url);
                            });
                        }
                        
                    })
                    .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.addressArr = this.contactInfo.addressArr;
                            this.addressStr = this.contactInfo.addressStr;
                            this.street = this.contactInfo.street;
                            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.addressArr = this.addressArr;
            this.dataForm.addressStr = this.addressStr;
            this.dataForm.street = this.street;
            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.addressArr = this.dataForm.addressArr),
                        (this.addressStr = this.dataForm.addressStr),
                        (this.street = this.dataForm.street),
                        (this.address = this.dataForm.address),
                        (this.addressDetail = true);
                    this.dialogFormVisible = false;
                    this.disabled = false;
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        submit() {
            this.dialogVisible = false;
            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,
                    addressArr: this.addressArr,
                    addressStr: this.addressStr,
                    street: this.street,
                    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 {
    cursor: pointer;
    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>