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="name" required label="姓名" right>
            <view class="item-r">
              <u--input
                placeholder="请输入负责人名称"
                border="surround"
                v-model="storeInfo.name"
              ></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>
      <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="area" required label="所在地区" right>
            <view class="item-r">
              <u--input
                placeholder="请选择所在地区"
                border="surround"
                v-model="storeInfo.area"
                @focus="handlerChange"
              ></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"
              ></u--input>
            </view>
          </u-form-item>
        </view>
      </view>

      <view class="content-box">
        <u-form-item prop="shopFacade">
          <imgs-upload :filelist.sync="filelist"></imgs-upload>
          <p class="upload-text">店铺门面图(需要包含完整牌匾)</p>
        </u-form-item>
      </view>

      <view class="content-box">
        <u-form-item prop="realFacade">
          <imgs-upload :filelist.sync="filelist"></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 '@/pages/merchant/mine/openStore/components/ImgsUpload.vue';
// 导入城市js文件
import cityData from '@/utils/city';
export default {
  components: {
    ImgsUpload,
  },
  data() {
    return {
      fileList: [],
      storeInfo: {
        area: '',
        storeAddress: '',
        name: '',
        mobileNumber: '',
        storeName: '',
        shopFacade: '',
        realFacade: '',
      },
      rules: {
        name: {
          type: 'string',
          required: true,
          message: '请输入负责人名称',
          trigger: ['blur', 'change'],
        },
        storeName: {
          type: 'string',
          required: true,
          message: '请输入店铺名',
          trigger: ['blur', 'change'],
        },
        storeAddress: {
          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'],
          },
        ],
        area: [
          {
            required: true,
            message: '请选择所在地区',
            trigger: ['change', 'blur'],
          },
        ],
      },
      show: false, //显示选择器
      // 打开选择器显示默认城市
      cityList: [],
      cityLevel1: [],
      cityLevel2: [],
      cityLevel3: [],
    };
  },
  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.area = e.value.join('');
      // 隐藏城市选择器
      this.show = false;
    },
    handlerChange() {
      this.show = true;
    },
    handlerSkipNext() {
      this.$store.commit('SET_STOREINFO', this.storeInfo);
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/merchant/mine/openStore/corporateInformation',
        });
      }, 1500);

      console.log(this.storeInfo, '@this.storeInfo');
    },
  },
};
</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 {
      .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;
        }
      }
    }

    .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>