suta/pagesWode/wode-shouhuo/index.vue

<template>
	<!-- 我的页面1 -->
  <view class="page">
    <view class="flex-1 section">
      <view class="group">
        <view class="self-stretch group_2">
          <view class="button-b group_3">
            <view class="textcolor">
              收件人
            </view>
            <input type="text" v-model="forlist.username">
          </view>
          <view class="button-b group_3">
            <view class="textcolor">
              手机号
            </view>
            <input type="text" v-model="forlist.mobile">
          </view>
          <view  @click="alterDon" class="button-box group_3">
            <view class="textcolor">
              地区
            </view>
            <view class="flex-row items-center jiantou-d">
            <text class="font">{{forlist.area}}</text>
            <image
              class="image_6"
              src="../../static/wode-youjianto.png"
            />
            </view>
          </view>
          <view class="button-b group_3">
            <view class="textcolor">
              街道
            </view>
            <input type="text" v-model="forlist.jiedao">
          </view>
          <view class="button-b group_3">
            <view class="textcolor">
              楼层门牌
            </view>
            <input type="text" v-model="forlist.menpai">
          </view>
        </view>
      </view>
      <view class="padding-lr">
        <u-button @click="saveadd" color="#23693f" type="primary" shape="circle" text="保 存"></u-button>
      </view>
    </view>
    <address-picker @cancel="showst=false"  :address-data="addressData" :show="showst" :columns="columns" @confirm="confirm"></address-picker>
  </view>
</template>

<script>
import request from '../../utils/request'
  export default {
    data() {
      return{
        forlist:{
          username:'',
          mobile:'',
          area:'',
          jiedao:'',
          menpai:'',
        },
        components: {},
        props: {},
        showst:false,
        columns: [],
        addressData: ['北京市', '北京市', '东城区'],
        listdata:{}
      }
    },

    onShow(){
      this.listData()
    },
    methods: {
      saveadd(){
        // 用户点击确定
        request.put('/api/user/update', {
          receiver:this.forlist.username,
          shipping_mobile:this.forlist.mobile,
          shipping_area:this.forlist.area,
          shipping_address:this.forlist.jiedao,
          shipping_floor:this.forlist.menpai,
        }).then(res=>{
          this.listData()
        })
      },
      confirm(e) {
        this.forlist.area = `${e.value[0]}${e.value[1]}${e.value[2]}`
        this.showst = false
      },
      alterDon(){
        this.showst = true
      },
      listData(){
      request.get('/api/user/info', {}).then(res => {
        // console.log(res)
        this.forlist.username = res.data.data.receiver
        // this.forlist.urgency_mobile = res.data.data.mobile
        this.forlist.mobile = res.data.data.shipping_mobile
        this.forlist.area = res.data.data.shipping_area
        this.forlist.jiedao = res.data.data.shipping_address
        this.forlist.menpai = res.data.data.shipping_floor
              // this.listdata = JSON.parse(JSON.stringify(res.data.data))
              })
      },
    }
  }
</script>

<style scoped lang="scss">
	.font {
		font-size: 30rpx;
		font-family: 微软雅黑;
		line-height: 27.6rpx;
		color: #000000;
	}
.jiantou-d {
		display: flex;
		align-items: center;
	}
.padding-lr{
  position: fixed;  
  bottom: 0;
  width: 92%;
  padding: 35rpx;
  margin-bottom: 20rpx;
}
.textcolor{
  margin-right: 20rpx;
  color: #8888;
}
.button-b{
  display: flex;
  align-items: center;
}
.button-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
  .mt-73 {
    margin-top: 146rpx;
  }
  .mt-113 {
    margin-top: 226rpx;
  }
  .ml-3 {
    margin-left: 6rpx;
  }
  .mt-5 {
    margin-top: 10rpx;
  }
  .page {
    background-color: #ffffff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }
  .section {
    padding-top: 80rpx;
    background-color: #ffffff;
    overflow-y: auto;
  }
  .group {
    padding-left: 72rpx;
    padding-right: 46rpx;
  }
  .group-zi{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid black; */
  }
  .image-r{
    width: 204rpx;
    height: 204rpx;
    border-radius: 50%;
    overflow: hidden;
    /* border: 1px solid red; */
  }
  .image_5 {
    width: 100%;
    height: 100%;
  }
  .group_2 {
    border-bottom: solid 2rpx #8185861a;
  }
  .group_3 {
    display: flex;
    justify-content: space-between;
    padding: 30rpx 18rpx 40rpx 28rpx;
    border-bottom: solid 2rpx #4444441a;
    input{
       text-align: right;  
    }
  }
  .font {
    font-size: 30rpx;
    font-family: 微软雅黑;
    line-height: 27.78rpx;
    color: #444444;
  }
  .text_3 {
    line-height: 27.7rpx;
  }
  .image_6 {
    margin-right: 20rpx;
    width: 25rpx;
    height: 32rpx;
  }
  .group_4 {
    padding: 40rpx 20rpx 40rpx 24rpx;
    border-bottom: solid 2rpx #4444441a;
  }
  .text_4 {
    line-height: 27.8rpx;
  }
  .group_5 {
    padding: 2rpx 0;
  }
  .group_6 {
    padding: 40rpx 20rpx 40rpx 28rpx;
    border-bottom: solid 2rpx #4444441a;
  }
  .text_5 {
    line-height: 27.96rpx;
  }
  .group_7 {
    padding: 40rpx 20rpx 40rpx 28rpx;
    border-bottom: solid 2rpx #8185861a;
  }
  .group_8 {
    padding: 40rpx 20rpx 40rpx 28rpx;
  }
  .text_6 {
    line-height: 27.14rpx;
  }
  .equal-division {
    background-color: #ffffff;
    border-radius: 0 60rpx 0 0;
    border-left: solid 2rpx #f7f7f7;
    border-right: solid 2rpx #f7f7f7;
    border-top: solid 2rpx #f7f7f7;
    border-bottom: solid 2rpx #f7f7f7;
  }
  .group_9 {
    flex: 1 1 146rpx;
  }
  .equal-division-item {
    padding: 12rpx 0;
  }
  .image_7 {
    width: 48rpx;
    height: 48rpx;
  }
  .font_2 {
    font-size: 22rpx;
    font-family: Poppins;
    line-height: 20.4rpx;
    color: #999999;
  }
  .text_7 {
    line-height: 20.24rpx;
  }
  .text_8 {
    line-height: 20.32rpx;
  }
  .text_9 {
    color: #888888;
    line-height: 20.24rpx;
  }
  .image_8 {
    filter: drop-shadow(0rpx 4rpx 4rpx #00000040);
    width: 48rpx;
    height: 48rpx;
  }
  .text_10 {
    color: #23693f;
  }
</style>