510 lines
13 KiB
Vue
510 lines
13 KiB
Vue
<template>
|
|
<view class="shop-1-container">
|
|
<!-- <u-navbar
|
|
:autoBack="true"
|
|
:safeAreaInsetTop="true"
|
|
:placeholder="true"
|
|
title="填写店铺信息"
|
|
>
|
|
<template slot="right">
|
|
<view class="btn-login-out" @click="loginOut">退出登录</view>
|
|
</template>
|
|
</u-navbar> -->
|
|
<navBar
|
|
title="填写店铺信息"
|
|
:statusBar="true"
|
|
:border="false"
|
|
:fixed="true"
|
|
:height="'44px'"
|
|
>
|
|
<!-- <block slot="left">
|
|
<u-icon
|
|
name="arrow-left"
|
|
color="#303133"
|
|
size="20"
|
|
@click="pageBack()"
|
|
></u-icon>
|
|
</block> -->
|
|
<block slot="right">
|
|
<view class="btn-login-out" @click="loginOut">退出登录</view>
|
|
</block>
|
|
</navBar>
|
|
<u-form :model="form" class="form" ref="uForm" label-width="70">
|
|
<u-form-item label="门店名称" prop="store_name" required>
|
|
<u-input
|
|
class="form-input"
|
|
v-model="form.store_name"
|
|
placeholder="请输入门店名称"
|
|
clearable
|
|
/>
|
|
<u-button
|
|
slot="right"
|
|
class="btn-check-shop-name"
|
|
@click="handleBtnCheckShopName"
|
|
>
|
|
检查名字
|
|
</u-button>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label="经营品类"
|
|
prop="biz_category"
|
|
required
|
|
@click="skipuBsType"
|
|
>
|
|
<u-input
|
|
style="pointer-events: none"
|
|
class="form-input"
|
|
v-model="form.biz_category"
|
|
placeholder="请选择经营品类"
|
|
readonly
|
|
/>
|
|
<u-icon
|
|
style="display: inline-block; margin-left: 8rpx"
|
|
name="arrow-right"
|
|
size="12"
|
|
color="#aaaaaa"
|
|
></u-icon>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label="所在地区"
|
|
prop="mapAddress"
|
|
required
|
|
@click="shkipuSelectAddress"
|
|
>
|
|
<u-input
|
|
style="pointer-events: none"
|
|
class="form-input"
|
|
v-model="form.mapAddress"
|
|
placeholder="请在地图上选择门店地址"
|
|
readonly
|
|
/>
|
|
<u-icon
|
|
style="display: inline-block; margin-left: 8rpx"
|
|
name="arrow-right"
|
|
size="12"
|
|
color="aaaaaa"
|
|
></u-icon>
|
|
</u-form-item>
|
|
<u-form-item label="详细地址" prop="store_address" required @click="handleStoreAddressClick">
|
|
<u-input
|
|
:disabled="!form.mapAddress"
|
|
:style="{pointerEvents: !form.mapAddress?'none':'auto'}"
|
|
class="form-input"
|
|
v-model="form.store_address"
|
|
@input="handleStoreAddressInput"
|
|
placeholder="详细地址:如:人民大道205号2楼213"
|
|
clearable
|
|
/>
|
|
</u-form-item>
|
|
<u-form-item label="联系人" prop="contact_name" required>
|
|
<u-input
|
|
class="form-input"
|
|
v-model="form.contact_name"
|
|
placeholder="请输入联系人"
|
|
clearable
|
|
/>
|
|
</u-form-item>
|
|
<u-form-item label="门脸图" prop="front_facade_image">
|
|
<u-upload
|
|
:class="fileList.length == 0 ? 'shop1-upload' : 'shop1-upload-item'"
|
|
@afterRead="afterRead1"
|
|
@delete="deletePic1"
|
|
accept="image"
|
|
:fileList="fileList"
|
|
:max-count="1"
|
|
:width="'100%'"
|
|
:height="154"
|
|
:upload-text="''"
|
|
:maxSize="8 * 1024 * 1024"
|
|
@oversize="overSize"
|
|
></u-upload>
|
|
</u-form-item>
|
|
<u-form-item label="环境图" prop="environment_image">
|
|
<u-upload
|
|
:class="fileList2.length == 0 ? 'shop2-upload' : 'shop2-upload-item'"
|
|
@afterRead="afterRead2"
|
|
@delete="deletePic2"
|
|
accept="image"
|
|
:fileList="fileList2"
|
|
:max-count="1"
|
|
:width="'100%'"
|
|
:height="154"
|
|
:upload-text="''"
|
|
:maxSize="8 * 1024 * 1024"
|
|
@oversize="overSize"
|
|
></u-upload>
|
|
</u-form-item>
|
|
</u-form>
|
|
|
|
<view class="btn-content">
|
|
<view class="myui_check_text">检查并确认店铺信息无误</view>
|
|
<u-button text="下一步" class="btn-next" @click="handleNext"></u-button>
|
|
</view>
|
|
|
|
<u-toast ref="uToast" />
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { UploadFilePromise } from "../../api/upload";
|
|
import navBar from "@/components/uni-nav-bar/uni-nav-bar";
|
|
import { CheckShopName } from "@/api/audit";
|
|
export default {
|
|
components: {
|
|
navBar,
|
|
},
|
|
data() {
|
|
return {
|
|
showLodingPage: true,
|
|
manageTypeItem: {},
|
|
form: {
|
|
biz_category: "",
|
|
shopAddress: "",
|
|
mapAddress: "",
|
|
store_address: "",
|
|
},
|
|
fileList: [],
|
|
fileList2: [],
|
|
rules: {
|
|
contact_name: [
|
|
{
|
|
required: true,
|
|
message: "请输入联系人",
|
|
// 可以单个或者同时写两个触发验证方式
|
|
trigger: ["change", "blur"],
|
|
},
|
|
],
|
|
type: [
|
|
{
|
|
required: true,
|
|
message: "请选择经营类型",
|
|
trigger: ["change", "blur"],
|
|
},
|
|
],
|
|
store_name: [
|
|
{
|
|
required: true,
|
|
message: "请输入门店名称",
|
|
trigger: ["change", "blur"],
|
|
},
|
|
],
|
|
mapAddress: [
|
|
{
|
|
required: true,
|
|
message: "请在地图上选择门店地址",
|
|
trigger: ["change", "blur"],
|
|
},
|
|
],
|
|
store_address: [
|
|
{
|
|
required: true,
|
|
message: "请输入详细地址",
|
|
trigger: ["change", "blur"],
|
|
},
|
|
],
|
|
isNamePsss: false,
|
|
},
|
|
};
|
|
},
|
|
onShow() {
|
|
let auditItem = uni.getStorageSync("auditItem");
|
|
|
|
if (auditItem && this.form.biz_category == "") {
|
|
this.form = auditItem;
|
|
|
|
this.fileList.push({ url: auditItem.environment_image });
|
|
this.fileList2.push({ url: auditItem.front_facade_image });
|
|
}
|
|
|
|
let typeItem = uni.getStorageSync("typeItem");
|
|
|
|
if (typeItem) {
|
|
this.manageTypeItem = typeItem;
|
|
this.form.biz_category = typeItem.bizSecondCategory.name;
|
|
}
|
|
|
|
let locationItem = uni.getStorageSync("locationItem");
|
|
|
|
if (locationItem) {
|
|
this.form.mapAddress =
|
|
locationItem.administrativeRegion.label[0] +
|
|
locationItem.administrativeRegion.label[1] +
|
|
locationItem.administrativeRegion.label[2];
|
|
|
|
this.form.store_address = locationItem.selectAddress.name;
|
|
}
|
|
},
|
|
onReady() {
|
|
this.$refs["uForm"].setRules(this.rules);
|
|
},
|
|
methods: {
|
|
pageBack() {
|
|
uni.navigateBack();
|
|
},
|
|
overSize(e) {
|
|
uni.$u.toast("上传图片大小不能超过20MB!");
|
|
},
|
|
async afterRead1(e) {
|
|
const item = e.file;
|
|
const imgUrl = item.url;
|
|
const group = {
|
|
url: imgUrl,
|
|
};
|
|
|
|
this.fileList.push(group);
|
|
|
|
let res = await UploadFilePromise(imgUrl);
|
|
if (res && res.status == 200) {
|
|
this.form.front_facade_image = res.data.url;
|
|
}
|
|
},
|
|
async afterRead2(e) {
|
|
const item = e.file;
|
|
const imgUrl = item.url;
|
|
const group = {
|
|
url: imgUrl,
|
|
};
|
|
this.fileList2.push(group);
|
|
|
|
let res = await UploadFilePromise(imgUrl);
|
|
if (res && res.status == 200) {
|
|
this.form.environment_image = res.data.url;
|
|
}
|
|
},
|
|
deletePic1() {
|
|
this.fileList.splice(0, 1);
|
|
},
|
|
deletePic2() {
|
|
this.fileList2.splice(0, 1);
|
|
},
|
|
formItemClass() {
|
|
return this.form.shopAddress > 0 ? "" : "shop1-from-item";
|
|
},
|
|
skipuBsType() {
|
|
uni.navigateTo({
|
|
url: "/pages/audit/businessType",
|
|
});
|
|
},
|
|
shkipuSelectAddress() {
|
|
uni.navigateTo({
|
|
url: "/pages/audit/mapAddress",
|
|
});
|
|
},
|
|
handleStoreAddressClick() {
|
|
if (!this.form.mapAddress) {
|
|
uni.showModal({
|
|
content: "先选择所在地区，再填写详细地址",
|
|
confirmText: "知道了",
|
|
showCancel: false,
|
|
});
|
|
}
|
|
},
|
|
handleStoreAddressInput(e) {
|
|
setTimeout(() => {
|
|
let locationItem = uni.getStorageSync("locationItem");
|
|
locationItem.selectAddress.name = e;
|
|
uni.setStorageSync("locationItem", locationItem);
|
|
}, 600);
|
|
},
|
|
handleNext() {
|
|
if (!this.isNamePsss) {
|
|
this.$refs.uToast.show({
|
|
message: "请先检查店铺名字是否可用",
|
|
type: "error",
|
|
duration: 1000,
|
|
});
|
|
return;
|
|
}
|
|
if (!this.form.mapAddress) {
|
|
uni.showModal({
|
|
content: "先选择所在地区，再填写详细地址",
|
|
confirmText: "知道了",
|
|
showCancel: false,
|
|
});
|
|
return;
|
|
}
|
|
|
|
this.$refs.uForm.validate().then((valid) => {
|
|
if (valid) {
|
|
if (!this.form.front_facade_image) {
|
|
this.$refs.uToast.show({
|
|
message: "请上传门脸图",
|
|
type: "error",
|
|
duration: 1000,
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (!this.form.environment_image) {
|
|
this.$refs.uToast.show({
|
|
message: "请上传环境图",
|
|
type: "error",
|
|
duration: 1000,
|
|
});
|
|
return;
|
|
}
|
|
|
|
var params = {};
|
|
|
|
let userInfo = uni.getStorageSync("userInfo");
|
|
let locationItem = uni.getStorageSync("locationItem");
|
|
|
|
params.mobile = userInfo.user_mobile.startsWith("+86")
|
|
? userInfo.user_mobile.replace("+86", "")
|
|
: userInfo.user_mobile;
|
|
|
|
const storeArea =
|
|
locationItem.administrativeRegion.label[0] +
|
|
locationItem.administrativeRegion.label[1] +
|
|
locationItem.administrativeRegion.label[2];
|
|
|
|
let auditItem = {
|
|
login_mobile: userInfo.user_mobile,
|
|
store_name: this.form.store_name,
|
|
contact_name: this.form.contact_name,
|
|
biz_category: this.manageTypeItem.bizCategory.id,
|
|
biz_second_category: this.manageTypeItem.bizSecondCategory.id,
|
|
store_longitude: locationItem.selectAddress.location.lng,
|
|
store_latitude: locationItem.selectAddress.location.lat,
|
|
province_id: locationItem.administrativeRegion.value[0],
|
|
city_id: locationItem.administrativeRegion.value[1],
|
|
county_id: locationItem.administrativeRegion.value[2],
|
|
store_area: locationItem.administrativeRegion.label.join("/"),
|
|
store_district: locationItem.administrativeRegion.value.join("/"),
|
|
store_address: storeArea + this.form.store_address,
|
|
front_facade_image: this.form.front_facade_image,
|
|
environment_image: this.form.environment_image,
|
|
};
|
|
|
|
console.log(auditItem);
|
|
|
|
uni.setStorageSync("auditItem", auditItem);
|
|
|
|
uni.navigateTo({
|
|
url: "/pages/audit/shop2",
|
|
});
|
|
}
|
|
});
|
|
},
|
|
async handleBtnCheckShopName() {
|
|
if (!this.form.store_name) {
|
|
this.$refs.uToast.show({
|
|
message: "请输入门店名称",
|
|
type: "error",
|
|
duration: 1000,
|
|
});
|
|
return;
|
|
}
|
|
|
|
let params = {
|
|
storeName: this.form.store_name,
|
|
};
|
|
|
|
let res = await CheckShopName(params);
|
|
if (res && res.status == 200) {
|
|
if (res.data.flag == 1) {
|
|
this.isNamePsss = true;
|
|
}
|
|
|
|
this.$refs.uToast.show({
|
|
message: res.msg,
|
|
type: res.data.flag == 1 ? "success" : "error",
|
|
duration: 1000,
|
|
});
|
|
}
|
|
},
|
|
loginOut() {
|
|
this.$store.dispatch("user/LoginOut");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "@/styles/variables.scss";
|
|
.shop-1-container {
|
|
// background: #f2f2f2;
|
|
// height: 100vh;
|
|
|
|
.u-navbar {
|
|
height: 88rpx;
|
|
}
|
|
|
|
.form {
|
|
padding: 0 24rpx 0 30rpx;
|
|
background: #fff;
|
|
border-top: 1px solid #f2f2f2;
|
|
|
|
::v-deep.shop1-from-item {
|
|
.u-form-item__body__right {
|
|
.uni-input-wrapper {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep.shop1-upload {
|
|
.u-upload__button {
|
|
// background: url("../../static/shenhe-bg1.png");
|
|
background-image: url("../../static/shenhe-bg1.png");
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
::v-deep.shop1-upload-item {
|
|
.u-upload__wrap {
|
|
flex-direction: column !important;
|
|
flex-wrap: nowrap !important;
|
|
}
|
|
}
|
|
|
|
::v-deep.shop2-upload-item {
|
|
.u-upload__wrap {
|
|
flex-direction: column !important;
|
|
flex-wrap: nowrap !important;
|
|
}
|
|
}
|
|
|
|
::v-deep.shop2-upload {
|
|
.u-upload__button {
|
|
// background: url("../../static/shenhe-bg1.png");
|
|
background-image: url("../../static/shenhe-bg2.png");
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-content {
|
|
padding: 30rpx 48rpx 88rpx;
|
|
}
|
|
|
|
.btn-login-out {
|
|
font-size: 24rpx;
|
|
color: $base-color;
|
|
}
|
|
|
|
.btn-check-shop-name {
|
|
width: 160rpx;
|
|
height: 60rpx;
|
|
border: none;
|
|
background: $base-color;
|
|
color: #fff;
|
|
font-size: 24rpx !important;
|
|
}
|
|
|
|
.btn-next {
|
|
background: $base-color;
|
|
color: #fff;
|
|
border: none;
|
|
}
|
|
|
|
::v-deep.u-upload__deletable {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
.u-icon__icon {
|
|
font-size: 48rpx !important;
|
|
line-height: 48rpx !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|