kailin_mp/pages/user/info.vue

<template>
  <view>
    <view class="alter_info">请选择您药店/诊所所在城市，选择后不可更改，请谨慎选择</view>
    <view class="form">
      <!-- 地区代表表单 -->
      <form class="info_form">
        <view class="form_group">
          <view class="group_title">所在城市：</view>
          <view class="group_box">
            <picker mode="multiSelector" class="form_ctrl" :range="cityArray" @columnchange="cityChange" @change="cityFinish">
              <view class="area_text">
                <text v-if="requestParam.province"> {{ requestParam.province }} </text>
                <text v-if="requestParam.city"> / {{ requestParam.city }} </text>
              </view>
            </picker>
          </view>
        </view>
        <button @click="toApply" class="submit_btn">提交</button>
      </form>
    </view>
  </view>
</template>

<script>
import { getProvinces, getMyCity } from '../../utils/city';

export default {
  data() {
    return {
      requestParam: {
        province: '',
        city: '',
      },
      cityArray: [[], []],
      cityValue: [0, 0],
    };
  },
  onLoad() {
    // 替换对应的数据
    this.cityArray.splice(0, 1, getProvinces());
    this.cityArray.splice(1, 1, getMyCity(this.cityValue[0]));
    // 默认地址
    // this.requestParam.province 	= this.cityArray[0][this.cityValue[0]]
    // this.requestParam.city 		= this.cityArray[1][this.cityValue[1]];
  },
  onShow() {
    // 登录信息
    if (!this.$checkAccess.alterLogin()) return;
    // 授权成功以后，调用绑定
    this.$http.request('api/custom/get_city', {}, 'get').then((re) => {
      // 成功的话
      if (re.code != 'success') {
        // 跳转
        uni.showToast({ title: re.msg, icon: 'none' });
        return;
      }
      this.requestParam.province = re.data.province;
      this.requestParam.city = re.data.city;
    });
  },
  methods: {
    toApply() {
      // 登录信息
      if (!this.$checkAccess.alterLogin()) return;
      // 提示信息
      if (!this.requestParam.province) {
        uni.showToast({
          title: '请选择所在城市',
          icon: 'none',
        });
        return;
      }
      // 提示信息
      if (!this.requestParam.city) {
        uni.showToast({
          title: '请选择所在城市',
          icon: 'none',
        });
        return;
      }
      // 请求状态
      uni.showLoading({ mask: true });
      // 授权成功以后，调用绑定
      this.$http.request('api/custom/set_city', this.requestParam, 'post').then((re) => {
        // 关闭
        uni.hideLoading();
        // 成功的话
        if (re.code != 'success') {
          // 跳转
          uni.showToast({ title: re.msg, icon: 'none' });
          return;
        }
        uni.switchTab({ url: '/pages/user/index' });
      });
    },
    cityChange(e) {
      // 替换三个选项
      this.cityValue.splice(e.detail.column, 1, e.detail.value);
      // 下一级设置为0
      if (e.detail.column == 0) {
        this.cityValue.splice(1, 1, 0);
        this.cityValue.splice(2, 1, 0);
      }
      if (e.detail.column == 1) {
        this.cityValue.splice(2, 1, 0);
      }
      // 替换对应的数据
      this.cityArray.splice(0, 1, getProvinces());
      this.cityArray.splice(1, 1, getMyCity(this.cityValue[0]));
    },
    cityFinish(e) {
      this.requestParam.province = this.cityArray[0][this.cityValue[0]];
      this.requestParam.city = this.cityArray[1][this.cityValue[1]];
    },
  },
};
</script>

<style lang="less">
.alter_info {
  display: block;
  color: #f89c33;
  font-size: 20rpx;
  overflow: hidden;
  margin: 20rpx auto;
  background: #ffffff;
  line-height: 40rpx;
  padding: 35rpx 35rpx;
  text-align: center;
}
.info_form {
  display: block;
  overflow: hidden;
  padding: 20rpx 0rpx;
  background: #ffffff;
  .form_group {
    display: block;
    overflow: hidden;
    line-height: 60rpx;
    padding: 20rpx 35rpx;
    .group_title {
      float: left;
      width: 160rpx;
      display: block;
      overflow: hidden;
      font-size: 30rpx;
      margin-right: 20rpx;
    }
    .group_box {
      width: 480rpx;
      float: left;
      display: block;
      .form_ctrl {
        height: 56rpx;
        font-size: 24rpx;
        padding: 0rpx 20rpx;
        line-height: 56rpx;
        border: 2rpx solid #dddddd;
        .area_text {
          width: 446rpx;
          height: 56rpx;
          font-size: 20rpx;
          overflow: hidden;
          white-space: nowrap;
          line-height: 56rpx;
          text-overflow: ellipsis;
        }
      }
      .group_image {
        width: 200rpx;
        height: 200rpx;
      }
      .choose_image {
        display: block;
        width: 200rpx;
        height: 200rpx;
        font-size: 38rpx;
        text-align: center;
        line-height: 200rpx;
        border: 2rpx solid #dddddd;
      }
    }
  }
  .submit_btn {
    color: #ffffff;
    width: 220rpx;
    height: 80rpx;
    display: block;
    font-size: 30rpx;
    padding: 0rpx 0rpx;
    line-height: 80rpx;
    margin: 50rpx auto;
    background-color: forestgreen;
  }
}
</style>