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>
            <p class="label">收货地址</p>
            <div class="address">
                <div v-if="addressDetail">
                    <div class="address-container">
                        <div class="header">
                            <div class="left">
                                <span>{{ name }}</span>
                            </div> 
                            <span @click="handleClickAddress" role="button" class="btn">修改</span>
                        </div> 
                        <p class="phone">{{ phone }}</p>
                        <p class="address">{{ address }}{{ email }}</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>
            <p class="label">物品信息</p>
            <div v-if="activeName=='goodsNotice'">
                <table class="table">
                    <thead>
                        <tr>
                            <th width="35%">兑换物品</th>
                            <th>数量</th>
                            <th>单价</th>
                            <th>兑换方式</th>
                            <th>总计</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="prize-info">
                                    <div class="prize-img-container">
                                        <el-image  class="lazy prize-img" :src="data.imgUrl" alt="prize" lazy></el-image>
                                    </div>
                                    <div class="prize-detail-info">
                                        <h3 class="title">{{ data.name }}</h3>
                                        <p class="desc">
                                            <span>{{ data.location }}</span>
                                        </p>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <el-input-number @change="changeCount" size="mini" v-model="skuCount" :step="1" :min="1" step-strictly></el-input-number>
                            </td>
                            <td>{{ data.price }} 积分</td>
                            <td>{{ data.deliveryName }}</td>
                            <td class="finlly-price">
                                {{ total }} 积分
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div v-else>
                <table class="table">
                    <thead>
                        <tr>
                            <th width="35%">兑换物品</th>
                            <th>消耗福利券</th>
                            <th>物品属性</th>
                            <th>兑换方式</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="prize-info">
                                    <div class="prize-img-container">
                                        <el-image  class="lazy prize-img" :src="data.imgUrl" alt="prize"></el-image>
                                    </div>
                                    <div class="prize-detail-info">
                                        <h3 class="title">{{ data.name }}</h3>
                                        <p class="desc">
                                            <span>{{ data.location }}</span>
                                        </p>
                                    </div>
                                </div>
                            </td>
                            <td>{{ data.title }}</td>
                            <td>{{ data.productAttributeName }}</td>
                            <td class="finlly-price">
                                {{ data.deliveryName }}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <div class="footer">
                <div class="right">
                    <!-- <div class="remark-line">
                        <span>备注：</span>
                        <el-input class="remark" placeholder="请输入备注，例如兑换产品的期望尺码" type="textarea"></el-input>
                       
                    </div> -->
                    <div class="btn-line">
                        <el-button :disabled="disabled" @click="handleClickExchange" type="primary" round>确认兑换</el-button>
                    </div>
                </div>
            </div>
        </el-card>
        <el-dialog title="兑换物品收货地址" :visible.sync="dialogFormVisible" width="500px">
            <el-form :model="dataForm" ref="dataForm" style="padding: 0 75px;" :rules="rules">
                <el-form-item label="联系姓名" :label-width="formLabelWidth" prop="name">
                    <el-input size="medium" v-model="dataForm.name" placeholder="请输入联系姓名"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" :label-width="formLabelWidth" prop="phone">
                    <el-input size="medium" v-model="dataForm.phone" placeholder="请输入11位手机号码"></el-input>
                </el-form-item>
               
                <el-form-item v-if="data.productAttribute == 1 && data.deliveryType == 1" label="联系地址" :label-width="formLabelWidth" prop="address">
                    <el-input size="medium" v-model="dataForm.address" placeholder="请输入详细联系地址"></el-input>
                </el-form-item>
                <el-form-item v-else label="联系邮箱" :label-width="formLabelWidth" prop="email">
                    <el-input size="medium" v-model="dataForm.email" 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 :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 data-v-50d84ad4="">恭喜你成功兑换{{ data.name }}，随后你可在</span> 
                    <a href="/home/festiveEvents" class="link">个人中心</a>中查看兑换的物品
                </div> 
            </div>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <router-link to="/home/festiveEvents">
                    <el-button class="addButton-address" type="primary">
                    查看物品
                </el-button>
                </router-link>
                
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { integralInfo, festivalInfo, start, kill } from "@/api/allApi";
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 {
            activeName:this.$route.query.activeName,
            name: '',
            phone: '',
            email:'',
            address: '',
            disabled:true,
            skuCount:1,
            total:undefined,
            data:{},
            addressDetail:false,
            dialogFormVisible:false,
            dialogMsgVisible:false,
            dataForm: {
                name: '',
                phone: '',
                email:'',
                address: '',
            },  
            rules: {
                name: [
                    { required: true, message: '请输入联系姓名', trigger: 'blur' },
                    { min: 1, max: 25, message: '长度在 1 到 25 个字符', trigger: 'blur' }
                ],
                phone: [
                    {required: true, validator: validPhone, trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入联系邮箱', trigger: 'blur' },
                ],
                address: [
                    { required: true, message: '请输入联系地址', trigger: 'blur' },
                    { min: 1, max: 120, message: '长度在 1 到 120 个字符', 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: {
        changeCount(val){
            this.total = this.data.price * val;
        },
        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.total = response.data.data.price;
                }).catch(() => {
                    
                })
            }else{
                festivalInfo({skuId:skuId}).then(response => {
                    this.data = response.data.data;
                }).catch(() => {
                    
                })
            }
        },
        handleClickAddress(){
            this.dialogFormVisible = true;
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    this.name = this.dataForm.name,
                    this.phone = this.dataForm.phone,
                    this.email = this.dataForm.email,
                    this.address = this.dataForm.address,
                    this.addressDetail = true;
                    this.dialogFormVisible = false;
                    this.disabled = false;
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },  
        handleClickExchange(){
            const params = {
                skuId:this.data.skuId,
                skuSeq:this.data.skuSeq,
                skuCount:this.skuCount,
                total:this.total,
                price:this.data.price,
                skuType:this.data.skuType,
                contact:this.dataForm.name,
                contactPhone:this.dataForm.phone,
                contactAddr:this.dataForm.address,
                contactEmail:this.dataForm.email,
                welfareId:this.data.welfareId,
            }
            if(this.activeName=='goodsNotice'){
                start(params).then(response => {
                    console.log(response.data.data);
                    this.dialogMsgVisible = true;
                }).catch(() => {})
            }else{
                kill(params).then(response => {
                    console.log(response.data.data);
                    this.dialogMsgVisible = true;
                }).catch(() => {})
            }
            
        },
    }
};
</script>
<style scoped>
.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;
    width: 80px;
    height: 80px;
}

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

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

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

img {
    border-style: none;
}

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

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

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

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

.table .finlly-price {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #1e80ff;
}
.footer {
    margin-top: 16px;
    /* display: flex; */
    /* justify-content: space-between; */
}
.footer .left-info {
    box-sizing: border-box;
    width: 400px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    background-color: #e8f3ff;
    border-radius: 4px;
    padding: 16px;
}
 .footer .left-info .info-title {
    font-size: 14px;
    line-height: 24px;
    color: #282f38;
    display: flex;
    align-items: center;
}
 .footer .left-info .info-icon {
    margin-right: 8px;
}
 .footer .left-info .info-content {
    margin: 4px 0 4px 2em;
    white-space: pre-line;
    font-size: 12px;
    line-height: 20px;
    color: #8a919f;
}
 .footer .right {
    font-size: 14px;
    line-height: 24px;
    color: #282f38;
}
 .footer .right .remark-line {
    display: flex;
    position: relative;
}
 .footer .right .remark {
    width: 400px;
}
 .footer .right .btn-line {
    margin-top: 16px;
    text-align: right;
}
.addButton-address{
    background: #1e80ff;
    border-color: #1e80ff;
    color: #fff;
    width: 160px;
    height: 48px;
    border-radius: 50px;
    line-height: 46px;
    padding: 0;
    font-size: 16px;
    border: 1px solid transparent;
}
</style>
<style>
.el-dialog__body {
    padding-bottom: 0px;
    
}
</style>