lanan-repair-app/pages/userInfo/editUserInfo.vue

<template>
  <view class="container">
    <VNavigationBar :title="pageTitle" background-color="#fff" title-color="#333"></VNavigationBar>
    <view class="body">
      <u-form labelPosition="top">
        <view class="card">
          <u-form-item borderBottom label="姓名" label-width="200">
            <u-input v-model="userInfo.cusName" border="none" placeholder="请输入客户姓名"></u-input>
          </u-form-item>
          <u-form-item borderBottom label="性别" label-width="200">
            <u-radio-group
                v-model="userInfo.sex"
                placement="row"
            >
              <u-radio key="0" label="男" name="0" style="margin-right: 100rpx"></u-radio>
              <u-radio key="1" label="女" name="1"></u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item borderBottom label="联系方式" label-width="200">
            <u-input v-model="userInfo.phoneNumber" border="none" placeholder="请输入联系方式" type="number"></u-input>
          </u-form-item>
          <u-form-item borderBottom label="出生年月" labelWidth="200" @click="openDatePicker(); hideKeyboard()">
            <u-input
                v-model="userInfo.birthday"
                border="none"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择出生年月"
            ></u-input>
            <u-icon
                slot="right"
                name="arrow-right"
            ></u-icon>
          </u-form-item>
<!--          <u-form-item borderBottom label="选择所在地区" labelWidth="200" @click="areaOpen">-->
<!--            <u-input-->
<!--                v-model="userInfo.area"-->
<!--                border="none"-->
<!--                disabled-->
<!--                disabledColor="#ffffff"-->
<!--                placeholder="请选择所在省/市/区"-->
<!--            ></u-input>-->
<!--            <u-icon-->
<!--                slot="right"-->
<!--                name="arrow-right"-->
<!--            ></u-icon>-->
<!--          </u-form-item>-->
          <u-form-item label="详细地址" label-width="200">
            <u-input v-model="userInfo.address" border="none" placeholder="请输入详细地址"></u-input>
          </u-form-item>
        </view>
      </u-form>

      <!-- 车辆型号 -->
<!--      <u-action-sheet-->
<!--          :actions="typeList"-->
<!--          :show="showType"-->
<!--          title="请选择车辆型号"-->
<!--          @close="showType = false"-->
<!--          @select="typeSelect"-->
<!--      >-->
<!--      </u-action-sheet>-->

      <u-datetime-picker
          v-model="datePickerValue"
          :formatter="formatter"
          :show="datePickerShow"
          mode="date"
          :min-date="minDate"
          @cancel="datePickerCancel"
          @confirm="datePickerConfirm"
      ></u-datetime-picker>

    </view>
    <view class="footer">
      <view class="btnItem edit" @click="submit">
        确定
      </view>
    </view>
    <cityPicker :column="3" default-value="" :mask-close-able="true" :visible="areaVisible"
                @cancel="areaCancel" @confirm="areaConfirm"/>
  </view>
</template>

<script>
import VNavigationBar from '@/components/VNavigationBar.vue';
import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
import {bus} from "@/utils/eventBus";
import request from "@/utils/request";

export default {
  components: {
    VNavigationBar,
    cityPicker
  },
  data() {
    return {
      pageTitle: '',
      userInfo: {
        name: ''
      },
      bo1: false,
      bo2: true,
      minDate: new Date(1900, 0, 1).getTime(),

      datePickerShow: false,
      datePickerValue: new Date().getTime(),
      pickerConfirmField: 'njDate',

      showType: false,
      typeList: [
        {
          name: '一汽奥迪 2024款 A6L',
          value: '1'
        },
      ],
      areaVisible: false
    };
  },
  onLoad(options) {
    // 如果是修改
    console.log('options', options)
    if (options.userInfo) {
      // 有数据为编辑 或 删除
      this.userInfo = JSON.parse(decodeURIComponent(options.userInfo));
      console.log('初始化页面数据', this.userInfo)
      this.bo1 = true;
      this.bo2 = false;
      this.pageTitle = '修改用户信息'
    } else {
      // 没有数据 需要赋值一下初始化
      this.bo1 = false;
      this.bo2 = true;
      this.pageTitle = '添加用户信息'
    }
  },
  methods: {
    typeSelect(e) {
      console.log('e', e)
    },

    openDatePicker() {
      this.datePickerShow = true
    },
    datePickerConfirm({value}) {
      const date = new Date(value)
      this.userInfo.birthday = date.getFullYear() + '-' + (Number(date.getMonth()) + 1 + '').padStart(2, '0') + '-' + (date.getDate() + '').padStart(2, '0')
      this.datePickerCancel()
    },
    datePickerCancel() {
      this.datePickerValue = new Date().getTime()
      this.datePickerShow = false
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      }
      if (type === 'month') {
        return `${value}月`
      }
      if (type === 'day') {
        return `${value}日`
      }
      console.log('for value', value)
      return value
    },

    areaOpen() {
      this.areaVisible = true
    },
    areaConfirm(e) {
      console.log('e', e)
      this.userInfo.area = e.name
      this.userInfo.provinceName = e.provinceName
      this.userInfo.cityName = e.cityName
      this.userInfo.areaName = e.areaName
      this.areaCancel()
    },
    areaCancel() {
      this.areaVisible = false
    },
    // 新增
    async submit() {

      bus.$emit('updateUserInfo', this.userInfo)
      if (this.userInfo.id != null) {

         request({
          url: '/admin-api/base/custom/update',
          method: 'PUT',
          data: this.userInfo,
        })
      }else {
        console.log("执行了新增")
        this.userInfo.typeCode = "01"
        request({
          url: '/admin-api/base/custom/create',
          method: 'POST',
          data: this.userInfo,
        })
      }
      uni.navigateBack()
      // let res = await request({
      //   url: '/userClient/base/myCar/create',
      //   method: 'POST',
      //   data: this.userInfo,
      // })
      // if (res.code == 200) {
      //   // 新增成功返回上一个页面
      //   uni.navigateBack();
      //   bus.$emit('updateUserInfo')
      // }
    },
  }
}
</script>

<style lang="less" scoped>


.container {
  box-sizing: border-box;
  height: 100%;
  background-color: #f3f5f7;
  display: flex;
  flex-direction: column;

  .body {
    flex: 1;
    height: 0;
    overflow: auto;

    .card {
      margin: 20rpx 30rpx;
      padding: 0 30rpx;
      background-color: #fff;
    }
  }

  .footer {
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30rpx 0;

    .btnItem {
      width: 510rpx;
      height: 76rpx;
      background: #0174F6;
      border-radius: 38rpx 38rpx 38rpx 38rpx;

      font-size: 32rpx;
      color: #FFFFFF;

      line-height: 76rpx;
      text-align: center;
    }
  }
}
</style>