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="goodDetail">
                <div class="goods-image">
                    <!-- 左侧大图-->
                    <div class="middle" ref="target">
                        <img style="width: 400px;height: 400px;" :src="imageList[activeIndex]" alt="" />
                    </div>
                    <!-- 小图列表 -->
                    <ul class="small">
                        <li v-for="(img, i) in imageList" :key="i" v-if="i<5" @mouseenter="enterhandler(i)"
                            :class="{ active: i == activeIndex }">
                            <img style="width: 68px;height: 68px;" :src="img" alt="" />
                        </li>
                    </ul>
                </div>
                <div class="goods-content">
                    <div class="goods-name">{{ data.name }}</div>
                    <div class="goods-price">兑换积分：{{ data.price }} 
                        <!-- <span style="color: red;margin-left: 150px;">参 考 价：￥{{  data.hisPrice}}</span> -->
                    </div>
                    <div class="goods-price">物品类别：{{ data.skuType==0 ? '积分商品' : '活动礼品' }}</div> 
                    <div class="goods-price">兑换方式：{{ data.deliveryTypeName }}</div>
                    <div class="goods-price">是否包邮：{{ data.freightType == '0' ? '不包邮' : '包邮' }}</div>
                    <div class="footer">
                        <div class="left-info">
                            <span class="info-title">
                                兑换说明
                            </span>
                            <div v-html="data.comment"></div>
                        </div>
                    </div>
                </div>
            </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">{{ data.name }}</h3>
                                        <!-- <h3 style="color: #1e80ff;" class="title" @click="handleClickGood(data.skuDesc)">{{ 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">
                                {{ money ? userInfo.surplusIntegral : total }} 积分
                                <span style="color: red;" v-if="money">+{{ money }}元</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div v-else>
                <table class="table">
                    <thead>
                        <tr>
                            <th width="25%">兑换物品</th>
                            <th style="text-align: center" width="15%">物品属性</th>
                            <th style="text-align: center" width="15%">
                                <span style="color: red">*</span>兑换券
                            </th>
                            <th style="text-align: center" width="15%">
                                <span style="color: red">*</span>兑换方式
                            </th>
                            <th v-if="deliveryType == '1' && data.freightType == '0'" style="text-align: center"
                                width="15%">
                                快递费
                            </th>
                            <th v-if="deliveryType == '0'" style="text-align: center" width="15%">
                                <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="imgUrls.length == 0 ? [data.imgUrl] : imgUrls"
                                            class="prize-img"></el-image>
                                    </div>
                                    <div class="prize-detail-info">
                                        <h3 class="title">{{ data.name }}</h3>
                                        <!-- <h3 style="color: #1e80ff;" class="title" @click="handleClickGood(data.skuDesc)">{{ data.name }}</h3> -->
                                        <!-- <p class="desc">
                                            <span v-if="data.location">{{ data.location }}</span>
                                        </p> -->
                                    </div>
                                </div>
                            </td>
                            <td style="text-align: center">{{ data.productAttributeName }}</td>
                            <td style="text-align: center">
                                <el-select size="small" clearable v-model="voucher" placeholder="请选择" value-key="value"
                                    @change="changeCouponList">
                                    <el-option :key="item.voucher" v-for="item in couponList" :label="item.couponName"
                                        :value="item.voucher">
                                    </el-option>
                                </el-select>
                            </td>
                            <td style="text-align: center">
                                <el-select size="small" clearable v-model="deliveryType" placeholder="请选择"
                                    value-key="value" @change="changeDeliveryTypeGift">
                                    <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 == '1' && data.freightType == '0'" style="text-align: center">180 积分
                            </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>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="footer">
                <div class="right" v-if="data.stock != 0">
                    <div class="btn-line">
                        <el-button :disabled="disabled" @click="handleClick" type="primary" round>确认兑换</el-button>
                    </div>
                </div>
                <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.skuDesc"></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">
                        {{ money ? userInfo.surplusIntegral : total }}
                        <span style="color: red;" v-if="money">+{{ money }}元</span>
                    </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 v-if="activeName == 'giftNotice'" class="listItem">
                    <div class="itemName">商品属性</div>
                    <div class="itemValue">{{ data.productAttributeName }}</div>
                </div>
                <div v-if="activeName == 'giftNotice'" class="listItem">
                    <div class="itemName">兑换卷</div>
                    <div class="itemValue">{{ couponName }}</div>
                </div>
                <div v-if="activeName == 'goodsNotice'" class="listItem">
                    <div class="itemName">商品积分</div>
                    <div class="itemValue">{{ data.price }}</div>
                </div>
                <div v-if="activeName == 'goodsNotice'" class="listItem">
                    <div class="itemName">商品数量</div>
                    <div class="itemValue">{{ skuCount }}</div>
                </div>
                <div v-if="deliveryType == '1' && data.freightType == '0'" 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 v-if="activeName == 'goodsNotice'" class="listItem">
                    <div class="itemName">合计</div>
                    <div class="itemValue">{{ money ? userInfo.surplusIntegral : total }}<span style="color: red;"
                            v-if="money">+{{ money }}元</span></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>
        <el-dialog title="物品详情" :visible.sync="dialogVisibleGoods" width="40%">
            <div v-html="data.skuDesc"></div>
        </el-dialog>
        <el-dialog title="扫码充值" :visible.sync="recharge" width="30%" :before-close="beforeClose">
            <div class="payBox-way">
                <div class="way-item">
                    <div class="item-left">
                        <div id="expCode" ref="expCodeRef"></div>
                    </div>
                    <div class="item-right">
                        <div class="up">
                            <div>应付金额</div>
                            <div style="color: #fe2c55;margin-left: 8px;">¥ {{ money }}</div>
                        </div>
                        <div class="down">
                            <img style="height: 18px;" src="../../assets/icon/weixinPay.png" alt="weixinpay">
                            <div class="textStyle">微信扫码支付</div>
                        </div>
                        <!-- <div class="down">
                            <div>扫码支付代表已阅读并同意</div>
                            <div style="color: #04498d;cursor: pointer;">《充值协议》</div>
                        </div> -->
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import QRCode from 'qrcodejs2';
import { getWxPayCode, queryWxPayStatus } from "@/api/pay";
import { integralInfo, start, kill, couponList, notice } 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 {
            noticeContent: '',
            activeIndex: 0,
            imageList: [
                // "https://yanxuan-item.nosdn.127.net/d917c92e663c5ed0bb577c7ded73e4ec.png",
                // "https://yanxuan-item.nosdn.127.net/e801b9572f0b0c02a52952b01adab967.jpg",
                // "https://yanxuan-item.nosdn.127.net/b52c447ad472d51adbdde1a83f550ac2.jpg",
                // "https://yanxuan-item.nosdn.127.net/f93243224dc37674dfca5874fe089c60.jpg",
                // "https://yanxuan-item.nosdn.127.net/f881cfe7de9a576aaeea6ee0d1d24823.jpg"
            ],

            timerPayWxQRcode: null,
            timer: null,
            //充值二维码
            payUrl: 'www.baidu.com',
            //充值弹窗
            recharge: false,
            //充值金额
            money: undefined,
            couponName: '',
            voucher: '',
            couponList: [],
            skuDesc: '',
            dialogVisibleGoods: false,
            dialogVisible: false,
            options: regionData,
            reclaimAddr: "",
            reclaimAddrName: "",
            reclaimAddrList: [],
            phoneNumber: "",
            deliveryTypeList: [],
            deliveryType: "",
            deliveryTypeName: "",
            contactInfo: {},
            activeName: this.$route.query.name,
            activeType: this.$route.query.type,
            name: "",
            phone: "",
            addressArr: [],
            addressStr: "",
            street: "",
            address: "",
            disabled: true,
            skuCount: 1,
            total: undefined,
            skuId:this.$route.query.id,
            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",
        };
    },
    computed: {
        // 将 getter 映射到当前组件的计算属性
        ...mapGetters(['userInfo'])
    },
    watch: {
        total(val) {
            let surplusIntegral = this.$store.getters.userInfo.surplusIntegral;
            let money = (val - surplusIntegral) / 10;
            if (money >= 0) {
                this.money = money
            } else {
                this.money = 0
            }
            console.log(this.money);
        },
        '$route' (to, from) {
            // 路由发生变化页面刷新
            this.$router.go(0);
		}
    },
    created() {
        // this.skuId = this.$route.query.id;
        this.dataForm.skuId = this.skuId;
        this.getInfo(this.skuId);
        this.getCouponList(this.skuId);
        this.getNotice('goodsNotice');
    },
    methods: {
        getNotice(val) {
            notice({ noticeType: val }).then(response => {
                console.log(response.data.data);
                this.noticeContent = response.data.data.content
            })
        },
        enterhandler(i) {
            this.activeIndex = i;
        },
        beforeClose(done) {
            clearInterval(this.timer);
            clearInterval(this.timerPayWxQRcode);
            done();
        },
        handlePayWxQRcode() {  // 获取微信支付二维码
            getWxPayCode({    // 这里根据不同的后端接口去修改
                integral: this.money * 10,
                totalFee: this.money,
            }).then(res => {
                let data = res.data.data;
                this.qrcode(data.payUrl);    // 例如：data.payUrl 的值为 "weixin://wxpay/bizpayurl?pr=......"，根据这个值生成相对应的微信支付二维码
                this.timer = setInterval(() => {    // 通过定时器每间隔一会去请求查询微信支付状态（具体参数根据项目需要而定）
                    this.handleQueryWxPayStatus(data.orderNo);
                }, 1000);
                this.timerPayWxQRcode = setInterval(() => {    // 刷新微信支付二维码
                    console.log('刷新微信支付二维码');
                    clearInterval(this.timer);    // 清除定时器;   
                    clearInterval(this.timerPayWxQRcode);
                    this.handlePayWxQRcode();
                }, 60000);
            })
        },
        handleQueryWxPayStatus(orderNo) {  // 查询微信支付状态
            queryWxPayStatus({    // 这里根据不同的后端接口去修改
                orderNo: orderNo,
            }).then(res => {
                let data = res.data.data;
                if (data == '支付成功') {    // 当查询到支付成功时
                    this.$store.dispatch('GetUserInfo');   
                    this.$message({
                        type: 'success',
                        message: '支付成功！'
                    });
                    this.money = 0;
                    this.recharge = false;
                    clearInterval(this.timer);    // 清除定时器;   
                    clearInterval(this.timerPayWxQRcode);
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 清空二维码,避免生成多个二维码
        delQrcode() {
            this.$refs.expCodeRef.innerHTML = ""
        },
        // 前端根据 payUrl 生成微信支付二维码
        qrcode(payUrl) {
            this.delQrcode();
            return new QRCode('expCode', {
                width: 150,
                height: 150,
                text: payUrl,
                colorDark: '#000',
                colorLight: '#fff'
            });
        },
        changeCouponList(val) {
            this.couponName = this.couponList.find(item => item.voucher == val).couponName;
        },
        getCouponList(id) {
            couponList({ actId: this.activeType, skuId: id })
                .then((response) => {
                    this.couponList = response.data.data;
                });
        },
        handleClickGood(val) {
            this.skuDesc = val;
            if (this.skuDesc) {
                this.dialogVisibleGoods = true;
            }
        },
        handleClick() {
            if (this.activeName == 'giftNotice') {
                if (!this.voucher) {
                    this.$message({
                        message: '请选择兑换卷',
                        type: 'warning'
                    });
                } else {
                    this.dialogVisible = true;
                }
            } else {
                if (this.money) {
                    this.$confirm('积分不足，差额部分可用现金补齐，是否购买积分？', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.recharge = true;
                        this.$nextTick(function () {
                            this.handlePayWxQRcode();
                            // this.qrcode(this.payUrl);
                        })

                    }).catch(() => { });
                } else {
                    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.freightType == "0") {
                    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;
        },
        changeDeliveryTypeGift(val) {
            this.reclaimAddr = '';
            this.disabled = true;
            if (val == "0" || val == "") {
                this.total = this.data.price;
                this.skuCount = 1;
            }
            if (val == "1") {
                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.freightType == "0"
            ) {
                this.total = this.data.price * val + 180;
            }
        },
        handleClose() {
            this.dialogMsgVisible = false;
            this.$router.push({
                path: "/home/pointsMall",
            });
        },
        getInfo(skuId) {
            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);
                            this.imageList.push(element.url);
                        });
                    }

                })
                .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 = {
                    actId: this.activeType,
                    voucher: this.voucher,
                    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 = {
                    actId: this.activeType,
                    voucher: this.voucher,
                    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 = {
                    actId: this.activeType,
                    voucher: this.voucher,
                    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>
::v-deep .el-card__body {
    padding: 20px !important;
}

.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: 550px;
    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: 16px;
    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;
    margin-bottom: 20px;
}

.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;
}

.payBox-way {
    margin-top: 16px;
}

.way-item {
    display: flex;
    background-color: #f7f7f9;
    border-radius: 6px;
    padding: 12px;

}

.item-left {
    position: relative;
    width: 150px;
    height: 150px;
    background-color: #fff;
    border-radius: 6px;
    padding: 7px;
}

.item-right {
    margin-left: 12px;
}

.up {
    display: flex;
    align-items: flex-end;
    font-size: 18px;
    font-weight: 600;
    height: 60px;
}

.center {
    display: flex;
    align-items: center;
    margin-top: 6px;
}

.textStyle {
    font-size: 16px;
    font-weight: 400;
    margin-left: 4px;
    color: rgba(22, 24, 35, .34);
}

.down {
    font-size: 16px;
    color: rgba(22, 24, 35, .34);
    margin-top: 16px;
    display: flex;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.goodDetail {
    display: flex;
    height: 485px;
}

.goods-image {
    width: 400px;
    height: 480px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.goods-image .middle {
    width: 400px;
    height: 400px;
    background: #f5f5f5;
}

.goods-image .small {
    height: 80px;
    display: flex;
    /* justify-content: space-between; */
}

.goods-image .small li {
    width: 68px;
    height: 68px;
    margin-right: 12px;
    margin-top: 15px;
    cursor: pointer;
}

.goods-image .small li:hover {
    border: 2px solid red;
}

.active {
    border: 2px solid red;
}

.goods-content {
    flex: 1;
    margin-left: 10px;
    height: 100%;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
    overflow-y: auto;
}
.goods-content::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.goods-content .goods-name{
    font-size: 18px;
    font-weight: bold;
    line-height: 36px;
}
.goods-content .goods-price{
    font-size: 16px;
    line-height: 32px;
}
</style>