vux里x-address清空时遇到的坑

先说说遇到的坑吧！其实，此处是一个细节性的问题。用起来一切都是正常的。但是，当你选择的城市为北京的时候，你点击提交成功后，把值给清空了，当你再次选择默认的北京时，你会发现此时是赋不上值的。原因是因为x-address里面的@on-shadow-change没有触发。解决方案其实很简单，提前定义一个变量存储一下@on-shadow-change里面的index。然后在@on-hide里面重新赋值就行了

完整代码如下：

<template>
    <div>
        <div class="discount_main">
            <div class="top"><img src="../images/tops.png" alt=""></div>
        </div>
        <div class="main_content_top">
            <span><img src="../images/tishi.png" alt=""></span>
            <span style="margin-left:30px;">已有50000+人领取成功</span>
        </div>
        <!-- 蒙版 -->
        <div class="mengban" v-show='mengban'></div>
        <div class="reception" v-show="reception">
            <div class="reception_top">领取成功</div>
            <div class="reception_bottom" @click="confirm()">确认</div>
        </div>
        <div id="main_content_center">
            <p>
                <span class="number_img_t">姓名</span>
                <input type="text" placeholder="请输入姓名" v-model="name">
            </p>
            <p>
                <span class="number_img_t">手机号</span>
                <input type="number"  pattern='[0-9]*'  id="number" placeholder="请输入手机号码" v-model="phone" oninput='if(value.length>11)value=value.slice(0,11)'>
            </p>
            <p>
                <span class="number_img_t">收货地址</span>
                <x-address @on-hide='valuetrue' :title='title' v-model='valueCode' :list="addressData" @on-shadow-change="onShadowChange" placeholder="请选择地址"></x-address>
            </p>
            <p>
                <span class="number_img_t">详细地址</span>
                <input type="text"  id="detail" placeholder="请输入详细地址" v-model="detail">
            </p>
            <div class="express">
                快递到付，仅需承担8-16元
            </div>
           <div class="free" @click="submit()">免费领取</div>
        </div>
        <toast v-model="showPositionValue" type="text" :time="800" is-show-mask :text= words></toast>
        <div class="bottom"><img src="../images/bottoms.png" alt=""></div>
        <div class="footer">
            <div class="footer_left">
                <a href="tel:400-692-1116">联系客服</a>
            </div>
            <div class="footer_right" @click="freereceive">免费领取</div>
        </div>
    </div>
</template>
<script>
import { Toast,Group, XAddress, ChinaAddressV4Data, XButton, Value2nameFilter as value2name} from 'vux'
import MD5 from "js-md5";
import { app,statistics } from "wisdom-h5";
import utils from "../../../utils/utils";
export default {
  components: {
    Toast,
    XAddress,
    XButton
  },
    data(){
        return{
            name:'',
            phone:'',
            adress:'',
            showPositionValue:false,
            words:'',
            value:[],
            title:'',
            detail:'',
            valueCode:[],
            addressData: ChinaAddressV4Data,
            reception:false,
            mengban:false,
            salt: this.$store.state.salt,
            params: this.$store.state.parameter
        }
    },
    methods:{
        submit(){
            if(this.name===''){
                this.showPositionValue=true;
                this.words='请输入姓名'
                return false
            }
            if(!/^[\u4E00-\u9FA5]{2,4}$/.test(this.name)){
                this.showPositionValue=true;
                this.words='请输入正确格式姓名'
                 return false
            }
            if(this.phone===''){
                this.showPositionValue=true;
                this.words='请输入手机号'
                return false
            }
            if(!/^1[34578]\d{9}$/.test(this.phone)){
                this.showPositionValue=true;
                this.words='请输入正确格式的手机号'
                 return false
            }
            if(document.querySelector(".vux-popup-picker-value")==null){
                this.showPositionValue=true;
                this.words='请选择收货地址'
                return false
            }
            if(this.detail===''){
                this.showPositionValue=true;
                this.words='请输入详细地址'
                return false
            }
            let params = this.params;
            params.apiKey = "后台给的api"
            let data = Object.assign({
                userName:this.name,
                mobile:this.phone,
                province:this.adress[0],
                city:this.adress[1],
                district:this.adress[2],
                address:this.detail
            })
            params.data = JSON.stringify(data);
            params.sign = MD5(params.apiKey + "" + params.data + this.salt);
            this.http.post(BASE_URL,params)
            .then(data=>{
                if(data.code=='success'){
                    this.mengban = true;
                    this.reception = true
                }
            }).catch(err=>{
                console.log(err)
            })
        },
        onShadowChange(index,item){
            this.value = index
            this.adress = item
        },
        valuetrue(){
            this.valueCode= this.value
        },
        confirm(){
            this.mengban = false
            this.reception = false 
            this.name=''
            this.phone=''
            this.valueCode=[]
            this.adress=[]
            this.detail=''
            // location.reload()
        },
        freereceive(){
             window.scrollTo(0, 0)
        }
    },
    created(){
         //这里是通过getCookie给赋默认值 完全忽略就行了
        if(utils.getCookie('name')){
            this.name = utils.getCookie('name')
        }else{
            this.name = ''
        }
        if(utils.getCookie('phone')){
            this.phone = utils.getCookie('phone')
        }else{
            this.phone = ''
        }
    }
}
</script>
<style lang="less" scope="">
   .discount_main{
    width: 750px;
    margin: 0 auto;
    position: relative;
    .top img{
        height:463px;
        width:750px;
    }
   } 
    .main_content_top{
        height:80px;background:#FFF7E7;
        display: flex;
        align-items: center;
        font-size:26px;
        color:#F66A35;
        padding-left:40px;
        img{
            width:36px;height:34px;
        }
    }
    #main_content_center{
        padding:30px 40px 0;
        p{
            margin-bottom:20px;
            height:80px;
            font-size:32px;
            display: flex;
            .number_img_t{
                width:150px;
                text-align-last: justify;
                text-align: justify;
                margin-right:25px;
                line-height:80px;
            }
            .number_img_t:after{
                content:'';
                width:100%;
                display: inline-block;
            }
            input{
                height:80px;
                font-size:32px;
                line-height:80px;
            }
        }
        .express{
            text-align: center;color:#F66A35;font-size:24px;margin-bottom:5px;
        }
       .free{
           width:635px;
           height:80px;
           font-size: 36px;
           background:#FFB200;
           text-align: center;
           line-height:80px;
           color:#fff;
           padding:0 20px;
           margin:0 auto;
       }
       .vux-cell-box{
            width:0
        }
        .vux-popup-picker-select{
            text-align: left!important;
            height:80px;line-height:80px;
            font-size:32px;
            color:#333;
        }
        .weui-cell.vux-tap-active.weui-cell_access{
            width:500px!important;
            margin-left:-3px !important;
        }
        .vux-popup-picker-value.vux-cell-value{
            width:500px!important;
        }

   }
   .bottom{
       margin-bottom:62px;
   }
   .footer{
       display: flex;
       height:80px;
       line-height: 80px;
       font-size:36px;
       color:#fff;
       div{
           width:50%;
           text-align: center;
       }
       .footer_left{
           background:#FFB200
       }
       .footer_right{
           background:#55B6FB
       }
   }
   
   ::-webkit-input-placeholder {
     color: #797979;
    }
    // 蒙版--领取成功
    .reception{
        height:264px;
        width:512px;
        position:fixed;
        text-align: center;
        font-size: 36px;
        left:0;
        top:0;
        right:0;
        bottom:0;
        margin:auto;
        border-radius: 10px;
        z-index:60;
        background:#fff;
        .reception_top{
            height:194px;
            line-height:194px;
            border-radius: 10px 10px 0 0;
        }
        .reception_bottom{
            height:74px;
            line-height:78px;
            background:#ffb200;
            border-radius: 0 0 10px 10px ;
            color:#fff;
        }
    }
    
    .mengban{
        position: fixed;
        width:100%;
        top:0;
        bottom:0;
        background: #000;
        z-index: 50;
        opacity: .6;

    }
</style>