|
|
@@ -9,22 +9,22 @@
|
|
|
<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>
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
@@ -33,34 +33,25 @@
|
|
|
<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>
|
|
|
+ <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>
|
|
|
+ <u--input placeholder="请选择所在地区" border="surround" v-model="storeInfo.area"
|
|
|
+ @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="storeAddress" required label="详细地址" right>
|
|
|
<view class="item-r">
|
|
|
- <u--input
|
|
|
- placeholder="请输入门店详细地址"
|
|
|
- border="surround"
|
|
|
- v-model="storeInfo.storeAddress"
|
|
|
- ></u--input>
|
|
|
+ <u--input placeholder="请输入门店详细地址" border="surround" v-model="storeInfo.storeAddress"></u--input>
|
|
|
</view>
|
|
|
</u-form-item>
|
|
|
</view>
|
|
|
@@ -83,221 +74,237 @@
|
|
|
<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: [],
|
|
|
- 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'],
|
|
|
+ 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: '',
|
|
|
},
|
|
|
- mobileNumber: [
|
|
|
- {
|
|
|
+ rules: {
|
|
|
+ name: {
|
|
|
+ type: 'string',
|
|
|
required: true,
|
|
|
- message: '请输入手机号码',
|
|
|
+ message: '请输入负责人名称',
|
|
|
trigger: ['blur', 'change'],
|
|
|
},
|
|
|
- {
|
|
|
- validator: (rule, value, callback) => {
|
|
|
- return uni.$u.test.mobile(value);
|
|
|
- },
|
|
|
- message: '手机号码不正确',
|
|
|
- trigger: ['change', 'blur'],
|
|
|
+ storeName: {
|
|
|
+ type: 'string',
|
|
|
+ required: true,
|
|
|
+ message: '请输入店铺名',
|
|
|
+ trigger: ['blur', 'change'],
|
|
|
},
|
|
|
- ],
|
|
|
- area: [
|
|
|
- {
|
|
|
+ storeAddress: {
|
|
|
+ type: 'string',
|
|
|
required: true,
|
|
|
- message: '请选择所在地区',
|
|
|
- trigger: ['change', 'blur'],
|
|
|
+ message: '请输入详细地址',
|
|
|
+ trigger: ['blur', 'change'],
|
|
|
},
|
|
|
- ],
|
|
|
- },
|
|
|
- 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]);
|
|
|
- }
|
|
|
+ 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'],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ area: [{
|
|
|
+ required: true,
|
|
|
+ message: '请选择所在地区',
|
|
|
+ trigger: ['change'],
|
|
|
+ }, ],
|
|
|
+ },
|
|
|
+ show: false, //显示选择器
|
|
|
+ // 打开选择器显示默认城市
|
|
|
+ cityList: [],
|
|
|
+ cityLevel1: [],
|
|
|
+ cityLevel2: [],
|
|
|
+ cityLevel3: [],
|
|
|
+ };
|
|
|
},
|
|
|
- // 单击确认按钮时执行
|
|
|
- confirm(e) {
|
|
|
- this.storeInfo.area = e.value.join('');
|
|
|
- // 隐藏城市选择器
|
|
|
- this.show = false;
|
|
|
+ onReady() {
|
|
|
+ //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
|
|
|
+ this.$refs.uForm.setRules(this.rules);
|
|
|
},
|
|
|
- handlerChange() {
|
|
|
- this.show = true;
|
|
|
+ onShow() {
|
|
|
+ this.initCityData();
|
|
|
},
|
|
|
- handlerSkipNext() {
|
|
|
- this.$store.commit('SET_STOREINFO', this.storeInfo);
|
|
|
- setTimeout(() => {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/merchant/mine/openStore/corporateInformation',
|
|
|
- });
|
|
|
- }, 1500);
|
|
|
+ methods: {
|
|
|
+ initCityData() {
|
|
|
+ // 遍历城市js
|
|
|
+ cityData.forEach((item1, index1) => {
|
|
|
+ let temp2 = [];
|
|
|
+ this.cityLevel1.push(item1.provinceName);
|
|
|
|
|
|
- console.log(this.storeInfo, '@this.storeInfo');
|
|
|
+ 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.$refs.uForm.validate().then(res => {
|
|
|
+ this.$store.commit('SET_STOREINFO', this.storeInfo);
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/merchant/mine/openStore/corporateInformation',
|
|
|
+ });
|
|
|
+ }, 1500);
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
-};
|
|
|
+ };
|
|
|
</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;
|
|
|
- }
|
|
|
+ .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-box {
|
|
|
+ padding: 20rpx 40rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 10rpx 0;
|
|
|
|
|
|
- .content-item {
|
|
|
- .item-r {
|
|
|
- background-color: #f7f7f7;
|
|
|
- border-radius: 20rpx;
|
|
|
- display: flex;
|
|
|
+ .content-item {
|
|
|
+ position: relative;
|
|
|
|
|
|
- .data_select {
|
|
|
- width: 90%;
|
|
|
- }
|
|
|
+ .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 {
|
|
|
- width: 100%;
|
|
|
+ ::v-deep .u-form-item__body {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- ::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;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .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%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .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 {
|
|
|
- border: none !important;
|
|
|
-}
|
|
|
|
|
|
-::v-deep .uni-select__input-placeholder {
|
|
|
- font-size: 28rpx !important;
|
|
|
- color: #cbced4 !important;
|
|
|
-}
|
|
|
+ ::v-deep .uni-select__input-placeholder {
|
|
|
+ font-size: 28rpx !important;
|
|
|
+ color: #cbced4 !important;
|
|
|
+ }
|
|
|
</style>
|
