newaddress.vue 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <template>
  2. <div class="content">
  3. <div class="form">
  4. <van-form @submit="onSubmit">
  5. <van-field v-model="name" name="姓名" label="姓名" placeholder="请输入姓名"/>
  6. <van-field v-model="phone" maxlength="11" type="number" name="手机" label="手机" placeholder="请输入手机"/>
  7. <van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区" @click="areashow = true" />
  8. <van-field v-model="address" name="详细地址" label="详细地址" placeholder="请输入详细地址"/>
  9. <div style="margin-top: 16px;">
  10. <van-button color="#00c4b8" block type="info" native-type="submit">确定</van-button>
  11. </div>
  12. </van-form>
  13. <!-- 城市选择 -->
  14. <van-popup v-model="areashow" position="bottom">
  15. <van-area
  16. :area-list="areaList"
  17. @confirm="onConfirm3"
  18. @cancel="areashow = false"
  19. />
  20. </van-popup>
  21. </div>
  22. </div>
  23. </template>
  24. <script>
  25. import areaList from "@/script/areas.js"
  26. export default{
  27. data(){
  28. return{
  29. titlename:"寄件人",
  30. name:"",
  31. phone:"",
  32. city:"",
  33. address:"",
  34. areashow:false,
  35. }
  36. },
  37. created:function(){
  38. this.titlename=this.$route.query.type
  39. if(this.titlename==1){
  40. this.titlename="新建寄件人地址"
  41. }
  42. if(this.titlename==2){
  43. this.titlename="新建收件人地址"
  44. }
  45. },
  46. methods:{
  47. onSubmit(){
  48. },
  49. onConfirm3(e){//确定
  50. this.city=e[0].name+' '+e[1].name+' '+e[2].name
  51. this.areashow=false
  52. console.log(e)
  53. },
  54. },
  55. computed:{
  56. areaList(){
  57. return areaList
  58. }
  59. }
  60. }
  61. </script>
  62. <style scoped lang="less">
  63. .content{
  64. .form{
  65. padding: .3rem;
  66. /deep/.van-field__value{
  67. input{
  68. text-align: right;
  69. }
  70. }
  71. }
  72. }
  73. </style>