chelvc-custom/src/pages/merchant/mine/openStore/storeInformation.vue

<template>
  <view class="container">
    <view class="top-box">
      为了方便我们与您尽快联系达成合作，请如实填写以下资料，谢谢您的支持与配合
    </view>

    <u-form :model="storeInfo" ref="uForm" labelPosition="left" :rules="rules" labelWidth="80">
      <view class="content-box">
        <view class="content-item">
          <u-form-item prop="legalRepresentativeName" required label="姓名" right>
            <view class="item-r">
              <u--input placeholder="请输入负责人名称" border="surround" v-model="storeInfo.legalRepresentativeName"></u--input>
            </view>
          </u-form-item>
        </view>
        <view class="content-item">
          <u-form-item prop="mobileNumber" required label="手机号码" right>
            <view class="item-r">
              <u--input placeholder="请输入手机号码" border="surround" v-model="storeInfo.mobileNumber"></u--input>
            </view>
          </u-form-item>
        </view>

        <view class="content-item">
          <u-form-item prop="email" required label="电子邮箱" right>
            <view class="item-r">
              <u--input placeholder="请输入您的邮箱" border="surround" v-model="storeInfo.email"></u--input>
            </view>
          </u-form-item>
        </view>
      </view>
      <view class="content-box">
        <view class="content-item">
          <u-form-item prop="storeName" required label="店铺名称" right>
            <view class="item-r">
              <u--input placeholder="请输入店铺名称" border="surround" v-model="storeInfo.storeName"></u--input>
            </view>
          </u-form-item>
        </view>
        <view class="content-item">
          <u-form-item prop="storeAddress" required label="所在地区" right>
            <view class="item-r">
              <u--input placeholder="请选择所在地区" border="surround" v-model="storeInfo.storeAddress"
                @focus="handlerChange"></u--input>
            </view>
            <view class="icon-right-box">
              <u-icon name="arrow-right" color="#c5c5c5" size="20"></u-icon>
            </view>
          </u-form-item>
        </view>
        <view class="content-item">
          <u-form-item prop="storeAddressDetail" required label="详细地址" right>
            <view class="item-r">
              <u--input placeholder="请输入门店详细地址" border="surround" v-model="storeInfo.storeAddressDetail"></u--input>
            </view>
          </u-form-item>
        </view>
      </view>

      <view class="content-box">
        <u-form-item prop="storeImage">
          <imgs-upload @update="fileList" :value="1"></imgs-upload>
          <p class="upload-text">店铺门面图(需要包含完整牌匾)</p>
        </u-form-item>
      </view>

      <view class="content-box">
        <u-form-item prop="storeInnerImage">
          <imgs-upload @update="fileList" :value="2"></imgs-upload>
          <p class="upload-text">店内真实环境图</p>
        </u-form-item>
      </view>
    </u-form>
    <button class="btn" @click="handlerSkipNext">下一步</button>

    <!-- 地区 -->
    <u-picker :show="show" ref="uPicker" :columns="cityList" @confirm="confirm" @change="changeHandler"
      @cancel="show = false"></u-picker>
  </view>
</template>

<script>
  import ImgsUpload from './components/ImgsUpload.vue';
  // 导入城市js文件
  import cityData from '@/utils/city';

  export default {
    components: {
      ImgsUpload,
    },
    data() {
      return {
        storeInfo: {
          storeAddress: '',
          storeAddressDetail: '',
          legalRepresentativeName: '',
          mobileNumber: '',
          storeName: '',
          storeImage: '',
          storeInnerImage: '',
          email: ""
        },
        rules: {
          legalRepresentativeName: {
            type: 'string',
            required: true,
            message: '请输入负责人名称',
            trigger: ['blur', 'change'],
          },
          storeName: {
            type: 'string',
            required: true,
            message: '请输入店铺名',
            trigger: ['blur', 'change'],
          },
          storeAddressDetail: {
            type: 'string',
            required: true,
            message: '请输入详细地址',
            trigger: ['blur', 'change'],
          },
          mobileNumber: [{
              required: true,
              message: '请输入手机号码',
              trigger: ['blur', 'change'],
            },
            {
              validator: (rule, value, callback) => {
                return uni.$u.test.mobile(value);
              },
              message: '手机号码不正确',
              trigger: ['change', 'blur'],
            },
          ],
          email: [{
              required: true,
              message: '请输入您的邮箱',
              trigger: ['blur', 'change'],
            },
            {
              validator: (rule, value, callback) => {
                return uni.$u.test.email(value);
              },
              message: '您输入的邮箱不正确',
              trigger: ['change', 'blur'],
            },
          ],
          storeAddress: [{
            required: true,
            message: '请选择所在地区',
            trigger: ['change'],
          }, ],
        },
        show: false, //显示选择器
        // 打开选择器显示默认城市
        cityList: [],
        cityLevel1: [],
        cityLevel2: [],
        cityLevel3: [],
      };
    },
    onReady() {
      //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
      this.$refs.uForm.setRules(this.rules);
    },
    onShow() {
      this.initCityData();
    },
    methods: {
      initCityData() {
        // 遍历城市js
        cityData.forEach((item1, index1) => {
          let temp2 = [];
          this.cityLevel1.push(item1.provinceName);

          let temp4 = [];
          let temp3 = [];
          // 遍历市
          item1.cities.forEach((item2, index2) => {
            temp2.push(item2.cityName);
            // 遍历区
            item2.counties.forEach((item3, index3) => {
              temp3.push(item3.countyName);
            });
            temp4[index2] = temp3;
            temp3 = [];
          });
          this.cityLevel3[index1] = temp4;
          this.cityLevel2[index1] = temp2;
        });
        // 选择器默认城市
        this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
      },
      // 选中时执行
      changeHandler(e) {
        const {
          columnIndex,
          index,
          indexs,
          value,
          values,
          // 微信小程序无法将picker实例传出来，只能通过ref操作
          picker = this.$refs.uPicker,
        } = e;
        if (columnIndex === 0) {
          // 选择第一列数据时 设置第二列关联数据
          picker.setColumnValues(1, this.cityLevel2[index]);
          // 设置第三列关联数据
          picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
        } else if (columnIndex === 1) {
          // 选择第二列数据时 设置第三列关联数据
          picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
        }
      },
      // 单击确认按钮时执行
      confirm(e) {
        this.storeInfo.storeAddress = e.value.join('');
        // 隐藏城市选择器
        this.show = false;
      },
      handlerChange() {
        this.show = true;
      },
      handlerSkipNext() {
        this.$refs.uForm.validate().then(res => {
          this.$store.commit('SET_STOREINFO', this.storeInfo);
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/merchant/mine/openStore/corporateInformation',
            });
          }, 1500);
        });
      },
      // 图片
      fileList(val, data) {
        if (data == 1) {
          this.storeInfo.storeImage = val[0];
        } else if (data == 2) {
          this.storeInfo.storeInnerImage = val[0];
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .container {
    background-color: #f7f7f7 !important;
    padding-bottom: 40rpx;

    .top-box {
      color: #666666;
      font-size: 26rpx;
      text-align: center;
      padding: 20rpx 40rpx;
      background-color: #fff;
    }

    .content-box {
      padding: 20rpx 40rpx;
      background-color: #fff;
      margin: 10rpx 0;

      .content-item {
        position: relative;

        .item-r {
          background-color: #f7f7f7;
          border-radius: 20rpx;
          display: flex;

          .data_select {
            width: 90%;
          }

          ::v-deep .u-form-item {
            width: 100%;
          }

          ::v-deep .u-form-item__body {
            padding: 0;
          }
        }

        .icon-right-box {
          position: absolute;
          right: 15rpx;
          top: 40rpx;
        }
      }

      .upload-text {
        text-align: center;
        color: #666666;
        font-size: 28rpx;
        margin-top: 20rpx;
      }
    }

    .btn {
      background-color: #5992bb !important;
      color: #fff;
      font-size: 32rpx;
      border-radius: 40rpx;
      margin-top: 100rpx;
      margin-bottom: 100rpx;
      width: 95%;
    }
  }

  ::v-deep .uni-select {
    border: none !important;
  }

  ::v-deep .uni-select__input-placeholder {
    font-size: 28rpx !important;
    color: #cbced4 !important;
  }
</style>