1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980 |
- <template>
- <div class="content">
-
- <div class="form">
- <van-form @submit="onSubmit">
- <van-field v-model="name" name="姓名" label="姓名" placeholder="请输入姓名"/>
- <van-field v-model="phone" maxlength="11" type="number" name="手机" label="手机" placeholder="请输入手机"/>
- <van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区" @click="areashow = true" />
- <van-field v-model="address" name="详细地址" label="详细地址" placeholder="请输入详细地址"/>
- <div style="margin-top: 16px;">
- <van-button color="#00c4b8" block type="info" native-type="submit">确定</van-button>
- </div>
- </van-form>
- <!-- 城市选择 -->
- <van-popup v-model="areashow" position="bottom">
- <van-area
- :area-list="areaList"
- @confirm="onConfirm3"
- @cancel="areashow = false"
- />
- </van-popup>
- </div>
- </div>
- </template>
- <script>
- import areaList from "@/script/areas.js"
- export default{
- data(){
- return{
- titlename:"寄件人",
- name:"",
- phone:"",
- city:"",
- address:"",
- areashow:false,
- }
- },
- created:function(){
- this.titlename=this.$route.query.type
- if(this.titlename==1){
- this.titlename="新建寄件人地址"
- }
- if(this.titlename==2){
- this.titlename="新建收件人地址"
- }
- },
- methods:{
- onSubmit(){
-
- },
- onConfirm3(e){//确定
- this.city=e[0].name+' '+e[1].name+' '+e[2].name
- this.areashow=false
- console.log(e)
- },
- },
- computed:{
- areaList(){
- return areaList
- }
- }
- }
- </script>
- <style scoped lang="less">
- .content{
-
- .form{
- padding: .3rem;
- /deep/.van-field__value{
- input{
- text-align: right;
- }
-
- }
- }
- }
- </style>
|