|
@@ -4,20 +4,27 @@
|
|
|
为了方便我们与您尽快联系达成合作,请如实填写以下资料,谢谢您的支持与配合
|
|
|
</view>
|
|
|
|
|
|
- <u-form :model="form" ref="uForm" labelPosition="left" :rules="rules" labelWidth="80">
|
|
|
- <!-- <u-form :model="form" ref="uForm" labelPosition="left" labelWidth="80"> -->
|
|
|
+ <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="form.name"></u--input>
|
|
|
+ <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="form.mobileNumber"></u--input>
|
|
|
+ <u--input
|
|
|
+ placeholder="请输入手机号码"
|
|
|
+ border="surround"
|
|
|
+ v-model="storeInfo.mobileNumber"
|
|
|
+ ></u--input>
|
|
|
</view>
|
|
|
</u-form-item>
|
|
|
</view>
|
|
@@ -26,21 +33,34 @@
|
|
|
<view class="content-item">
|
|
|
<u-form-item prop="storeName" required label="店铺名称" right>
|
|
|
<view class="item-r">
|
|
|
- <u--input placeholder="请输入店铺名称" border="surround" v-model="form.storeName"></u--input>
|
|
|
+ <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="form.area" @focus="handlerChange"></u--input>
|
|
|
+ <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="form.storeAddress"></u--input>
|
|
|
+ <u--input
|
|
|
+ placeholder="请输入门店详细地址"
|
|
|
+ border="surround"
|
|
|
+ v-model="storeInfo.storeAddress"
|
|
|
+ ></u--input>
|
|
|
</view>
|
|
|
</u-form-item>
|
|
|
</view>
|
|
@@ -51,7 +71,6 @@
|
|
|
<imgs-upload :filelist.sync="filelist"></imgs-upload>
|
|
|
<p class="upload-text">店铺门面图(需要包含完整牌匾)</p>
|
|
|
</u-form-item>
|
|
|
-
|
|
|
</view>
|
|
|
|
|
|
<view class="content-box">
|
|
@@ -64,212 +83,221 @@
|
|
|
<button class="btn" @click="handlerSkipNext">下一步</button>
|
|
|
|
|
|
<!-- 地区 -->
|
|
|
- <u-picker :show="show" ref="uPicker" :columns="cityList" @confirm="confirm" @change="changeHandler"
|
|
|
- @cancel="show = false"></u-picker>
|
|
|
+ <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: [],
|
|
|
- form: {
|
|
|
- area: '',
|
|
|
- storeAddress: "",
|
|
|
- name: "",
|
|
|
- mobileNumber: "",
|
|
|
- storeName: "",
|
|
|
- shopFacade: "",
|
|
|
- realFacade: ""
|
|
|
+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'],
|
|
|
},
|
|
|
- rules: {
|
|
|
- name: {
|
|
|
- type: 'string',
|
|
|
- required: true,
|
|
|
- message: '请输入负责人名称',
|
|
|
- trigger: ['blur', 'change']
|
|
|
- },
|
|
|
- storeName: {
|
|
|
- type: 'string',
|
|
|
- required: true,
|
|
|
- message: '请输入店铺名',
|
|
|
- trigger: ['blur', 'change']
|
|
|
- },
|
|
|
- storeAddress: {
|
|
|
- type: 'string',
|
|
|
+ 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']
|
|
|
+ message: '请输入手机号码',
|
|
|
+ trigger: ['blur', 'change'],
|
|
|
},
|
|
|
- mobileNumber: [{
|
|
|
- required: true,
|
|
|
- message: '请输入手机号码',
|
|
|
- trigger: ['blur', 'change'],
|
|
|
+ {
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ return uni.$u.test.mobile(value);
|
|
|
},
|
|
|
- {
|
|
|
- validator: (rule, value, callback) => {
|
|
|
- return uni.$u.test.mobile(value);
|
|
|
- },
|
|
|
- message: '手机号码不正确',
|
|
|
- trigger: ['change', 'blur'],
|
|
|
- }
|
|
|
- ],
|
|
|
- area: [{
|
|
|
+ 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);
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ 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 = [];
|
|
|
+ let temp4 = [];
|
|
|
+ let temp3 = [];
|
|
|
+ // 遍历市
|
|
|
+ item1.cities.forEach((item2, index2) => {
|
|
|
+ temp2.push(item2.cityName);
|
|
|
+ // 遍历区
|
|
|
+ item2.counties.forEach((item3, index3) => {
|
|
|
+ temp3.push(item3.countyName);
|
|
|
});
|
|
|
- this.cityLevel3[index1] = temp4;
|
|
|
- this.cityLevel2[index1] = temp2;
|
|
|
+ temp4[index2] = temp3;
|
|
|
+ temp3 = [];
|
|
|
});
|
|
|
- // 选择器默认城市
|
|
|
- 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.form.area = e.value.join("")
|
|
|
- // 隐藏城市选择器
|
|
|
- this.show = false;
|
|
|
- },
|
|
|
- handlerChange() {
|
|
|
- this.show = true;
|
|
|
- },
|
|
|
- handlerSkipNext() {
|
|
|
+ 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',
|
|
|
});
|
|
|
- console.log(this.form, "@this.form");
|
|
|
+ }, 1500);
|
|
|
|
|
|
- },
|
|
|
+ console.log(this.storeInfo, '@this.storeInfo');
|
|
|
},
|
|
|
- };
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .container {
|
|
|
- background-color: #f7f7f7 !important;
|
|
|
- padding-bottom: 40rpx;
|
|
|
+.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;
|
|
|
+ .top-box {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 26rpx;
|
|
|
+ text-align: center;
|
|
|
+ padding: 20rpx 40rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
|
|
|
- .content-item {
|
|
|
- .item-r {
|
|
|
- background-color: #f7f7f7;
|
|
|
- border-radius: 20rpx;
|
|
|
- display: flex;
|
|
|
+ .content-box {
|
|
|
+ padding: 20rpx 40rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 10rpx 0;
|
|
|
|
|
|
- .data_select {
|
|
|
- width: 90%;
|
|
|
- }
|
|
|
+ .content-item {
|
|
|
+ .item-r {
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ display: flex;
|
|
|
|
|
|
- ::v-deep .u-form-item {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+ .data_select {
|
|
|
+ width: 90%;
|
|
|
+ }
|
|
|
|
|
|
- ::v-deep .u-form-item__body {
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
+ ::v-deep .u-form-item {
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .upload-text {
|
|
|
- text-align: center;
|
|
|
- color: #666666;
|
|
|
- font-size: 28rpx;
|
|
|
- margin-top: 20rpx;
|
|
|
+ ::v-deep .u-form-item__body {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .btn {
|
|
|
- background-color: #5992bb !important;
|
|
|
- color: #fff;
|
|
|
- font-size: 32rpx;
|
|
|
- border-radius: 40rpx;
|
|
|
- margin-top: 100rpx;
|
|
|
- margin-bottom: 100rpx;
|
|
|
- width: 95%;
|
|
|
+ .upload-text {
|
|
|
+ text-align: center;
|
|
|
+ color: #666666;
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- ::v-deep .uni-select {
|
|
|
- border: none !important;
|
|
|
+ .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__input-placeholder {
|
|
|
- font-size: 28rpx !important;
|
|
|
- color: #cbced4 !important;
|
|
|
- }
|
|
|
+::v-deep .uni-select {
|
|
|
+ border: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .uni-select__input-placeholder {
|
|
|
+ font-size: 28rpx !important;
|
|
|
+ color: #cbced4 !important;
|
|
|
+}
|
|
|
</style>
|