先说说遇到的坑吧!其实,此处是一个细节性的问题。用起来一切都是正常的。但是,当你选择的城市为北京的时候,你点击提交成功后,把值给清空了,当你再次选择默认的北京时,你会发现此时是赋不上值的。原因是因为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>