|
@@ -0,0 +1,319 @@
|
|
|
+<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: '/pageMerchant/mineModule/certification/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>
|