370 lines
9.8 KiB
Vue
370 lines
9.8 KiB
Vue
|
<template>
|
||
|
|
<div class="wrapper">
|
||
|
|
<u-form label-width="200" :model="form" ref="uForm">
|
||
|
|
<div class="column">
|
||
|
|
<div class="flag-title light-color">基础信息</div>
|
||
|
|
<u-form-item
|
||
|
|
required
|
||
|
|
:border-bottom="false"
|
||
|
|
prop="storeName"
|
||
|
|
label="店铺名称"
|
||
|
|
><u-input v-model="form.storeName" :custom-style="defaultInputStyle"
|
||
|
|
/></u-form-item>
|
||
|
|
<u-form-item
|
||
|
|
required
|
||
|
|
:border-bottom="false"
|
||
|
|
prop="storeLogo"
|
||
|
|
label="店铺logo"
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<u-upload
|
||
|
|
:file-list="storeLogoFileList"
|
||
|
|
:header="{ accessToken: storage.getAccessToken() }"
|
||
|
|
:action="action"
|
||
|
|
width="200"
|
||
|
|
@on-uploaded="onUploaded($event, 'storeLogo')"
|
||
|
|
:max-count="1"
|
||
|
|
:show-progress="false"
|
||
|
|
></u-upload>
|
||
|
|
</div>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item
|
||
|
|
required
|
||
|
|
:border-bottom="false"
|
||
|
|
prop="goodsManagementCategory"
|
||
|
|
label="店铺经营类目"
|
||
|
|
><u-input
|
||
|
|
:custom-style="defaultInputStyle"
|
||
|
|
v-model="goodsManagementCategory"
|
||
|
|
disabled
|
||
|
|
@click="showCategory()"
|
||
|
|
/></u-form-item>
|
||
|
|
|
||
|
|
<u-form-item
|
||
|
|
required
|
||
|
|
:border-bottom="false"
|
||
|
|
prop="storeAddressPath"
|
||
|
|
label="店铺所在地"
|
||
|
|
>
|
||
|
|
<u-input
|
||
|
|
:custom-style="defaultInputStyle"
|
||
|
|
v-model="form.storeAddressPath"
|
||
|
|
disabled
|
||
|
|
@click="showPicker()"
|
||
|
|
/>
|
||
|
|
</u-form-item>
|
||
|
|
|
||
|
|
<u-form-item
|
||
|
|
required
|
||
|
|
:border-bottom="false"
|
||
|
|
prop="storeAddressPath"
|
||
|
|
label="店铺定位"
|
||
|
|
>
|
||
|
|
<div class="get-center" @click="clickUniMap()">开始定位</div>
|
||
|
|
<div class="tips-success" v-if="form.storeCenter">已成功定位</div>
|
||
|
|
</u-form-item>
|
||
|
|
|
||
|
|
<u-form-item
|
||
|
|
required
|
||
|
|
:border-bottom="false"
|
||
|
|
prop="storeAddressDetail"
|
||
|
|
label="店铺详细地址"
|
||
|
|
><u-input
|
||
|
|
:custom-style="defaultInputStyle"
|
||
|
|
v-model="form.storeAddressDetail"
|
||
|
|
/></u-form-item>
|
||
|
|
<u-form-item
|
||
|
|
required
|
||
|
|
:border-bottom="false"
|
||
|
|
prop="storeDesc"
|
||
|
|
label="店铺简介"
|
||
|
|
><u-input
|
||
|
|
type="textarea"
|
||
|
|
:custom-style="defaultInputStyle"
|
||
|
|
v-model="form.storeDesc"
|
||
|
|
/></u-form-item>
|
||
|
|
</div>
|
||
|
|
</u-form>
|
||
|
|
<div class="submit" @click="validatorStep1Form">提交平台审核</div>
|
||
|
|
<m-city
|
||
|
|
:provinceData="list"
|
||
|
|
headTitle="区域选择"
|
||
|
|
ref="cityPicker"
|
||
|
|
@funcValue="getPickerParentValue"
|
||
|
|
pickerSize="4"
|
||
|
|
>
|
||
|
|
</m-city>
|
||
|
|
|
||
|
|
<u-select
|
||
|
|
v-model="enableCategory"
|
||
|
|
@confirm="confirmCategory"
|
||
|
|
:list="categoryList"
|
||
|
|
></u-select>
|
||
|
|
|
||
|
|
<uniMap v-if="mapFlag" @close="closeMap" @callback="callBackAddress" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { applyThird } from "@/api/entry";
|
||
|
|
import { getCategoryList } from "@/api/goods";
|
||
|
|
import city from "@/components/m-city/m-city.vue";
|
||
|
|
import storage from "@/utils/storage.js";
|
||
|
|
import { upload } from "@/api/common.js";
|
||
|
|
import uniMap from "@/components/uniMap";
|
||
|
|
import permision from "@/js_sdk/wa-permission/permission.js";
|
||
|
|
export default {
|
||
|
|
components: { "m-city": city, uniMap },
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
storage,
|
||
|
|
mapFlag: false,
|
||
|
|
action: upload, //图片上传数据
|
||
|
|
defaultInputStyle: {
|
||
|
|
background: "#f7f7f7",
|
||
|
|
padding: "0 20rpx",
|
||
|
|
"border-radius": "10rpx",
|
||
|
|
},
|
||
|
|
goodsManagementCategory: "",
|
||
|
|
storeLogoFileList: [],
|
||
|
|
categoryList: [],
|
||
|
|
form: {
|
||
|
|
storeName: "",
|
||
|
|
storeLogo: "",
|
||
|
|
goodsManagementCategory: "",
|
||
|
|
storeAddressPath: "",
|
||
|
|
storeAddressDetail: "",
|
||
|
|
storeDesc: "",
|
||
|
|
},
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
id: "",
|
||
|
|
localName: "请选择",
|
||
|
|
children: [],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
rules: {
|
||
|
|
// 验证规则
|
||
|
|
goodsManagementCategory: [
|
||
|
|
{ required: true, message: "请选择店铺经营类目" },
|
||
|
|
],
|
||
|
|
storeName: [{ required: true, message: "请填写店铺名称" }],
|
||
|
|
storeLogo: [{ required: true, message: "请上传店铺logo" }],
|
||
|
|
storeDesc: [{ required: true, message: "请填写店铺简介" }],
|
||
|
|
storeCenter: [{ required: true, message: "请选择店铺位置" }],
|
||
|
|
storeAddressIdPath: [{ required: true, message: "请选择店铺位置" }],
|
||
|
|
storeAddressDetail: [{ required: true, message: "请输入店铺详细地址" }],
|
||
|
|
},
|
||
|
|
enableCategory: false,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.$refs.uForm.setRules(this.rules);
|
||
|
|
this.fetchCategoryList();
|
||
|
|
},
|
||
|
|
props: ["companyData"],
|
||
|
|
watch: {
|
||
|
|
companyData: {
|
||
|
|
handler(val) {
|
||
|
|
this.$set(this, "form", val);
|
||
|
|
// 给图片赋值
|
||
|
|
const judgeDeepPhoto = ["storeLogo"];
|
||
|
|
|
||
|
|
judgeDeepPhoto.forEach((key) => {
|
||
|
|
if (this.form[key]) {
|
||
|
|
this.form[key].split(",").forEach((item) => {
|
||
|
|
this[`${key}FileList`].push({ url: item });
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
deep: true,
|
||
|
|
immediate: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
callBackAddress(val) {
|
||
|
|
console.log(val);
|
||
|
|
this.form.storeAddressDetail = val.address;
|
||
|
|
this.form.storeCenter = `${val.longitude},${val.latitude}`;
|
||
|
|
},
|
||
|
|
// 关闭地图
|
||
|
|
closeMap() {
|
||
|
|
this.mapFlag = false;
|
||
|
|
},
|
||
|
|
// 打开地图并访问权限
|
||
|
|
clickUniMap() {
|
||
|
|
console.log("click");
|
||
|
|
// #ifdef APP-PLUS
|
||
|
|
if (plus.os.name == "iOS") {
|
||
|
|
// ios系统
|
||
|
|
permision.judgeIosPermission("location")
|
||
|
|
? (this.mapFlag = true)
|
||
|
|
: this.refuseMap();
|
||
|
|
} else {
|
||
|
|
// 安卓
|
||
|
|
this.requestAndroidPermission(
|
||
|
|
"android.permission.ACCESS_FINE_LOCATION"
|
||
|
|
);
|
||
|
|
}
|
||
|
|
// #endif
|
||
|
|
|
||
|
|
// #ifndef APP-PLUS
|
||
|
|
this.mapFlag = true;
|
||
|
|
// #endif
|
||
|
|
},
|
||
|
|
|
||
|
|
// 如果拒绝权限 提示区设置
|
||
|
|
refuseMap() {
|
||
|
|
uni.showModal({
|
||
|
|
title: "温馨提示",
|
||
|
|
content: "您已拒绝定位,请开启",
|
||
|
|
confirmText: "去设置",
|
||
|
|
success(res) {
|
||
|
|
if (res.confirm) {
|
||
|
|
//打开授权设置
|
||
|
|
// #ifndef MP-WEIXIN
|
||
|
|
uni.getSystemInfo({
|
||
|
|
success(res) {
|
||
|
|
if (res.platform == "ios") {
|
||
|
|
//IOS
|
||
|
|
plus.runtime.openURL("app-settings://");
|
||
|
|
} else if (res.platform == "android") {
|
||
|
|
//安卓
|
||
|
|
let main = plus.android.runtimeMainActivity();
|
||
|
|
let Intent = plus.android.importClass(
|
||
|
|
"android.content.Intent"
|
||
|
|
);
|
||
|
|
let mIntent = new Intent("android.settings.ACTION_SETTINGS");
|
||
|
|
main.startActivity(mIntent);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
});
|
||
|
|
// #endif
|
||
|
|
}
|
||
|
|
},
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 获取安卓是否拥有地址权限
|
||
|
|
async requestAndroidPermission(permisionID) {
|
||
|
|
var result = await permision.requestAndroidPermission(permisionID);
|
||
|
|
|
||
|
|
if (result == 1) {
|
||
|
|
this.mapFlag = true;
|
||
|
|
} else {
|
||
|
|
this.refuseMap();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
confirmCategory(val) {
|
||
|
|
this.form.goodsManagementCategory = val[0].value;
|
||
|
|
this.goodsManagementCategory = val[0].label;
|
||
|
|
},
|
||
|
|
async fetchCategoryList() {
|
||
|
|
const res = await getCategoryList(0);
|
||
|
|
if (res.data.success) {
|
||
|
|
if (res.data.result.length) {
|
||
|
|
this.categoryList = res.data.result.map((item) => {
|
||
|
|
return { label: item.name, value: item.id };
|
||
|
|
});
|
||
|
|
|
||
|
|
if (this.form.goodsManagementCategory) {
|
||
|
|
this.goodsManagementCategory = this.categoryList.find(
|
||
|
|
(item) => this.form.goodsManagementCategory == item.value
|
||
|
|
).label;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 图片上传
|
||
|
|
onUploaded(lists, key) {
|
||
|
|
let images = [];
|
||
|
|
lists.forEach((item) => {
|
||
|
|
images.push(item.response.result);
|
||
|
|
});
|
||
|
|
this.form[key] = images;
|
||
|
|
},
|
||
|
|
getPickerParentValue(e) {
|
||
|
|
this.form.storeAddressIdPath = [];
|
||
|
|
|
||
|
|
let name = "";
|
||
|
|
e.forEach((item, index) => {
|
||
|
|
if (item.id) {
|
||
|
|
// 遍历数据
|
||
|
|
this.form.storeAddressIdPath.push(item.id);
|
||
|
|
if (index == e.length - 1) {
|
||
|
|
name += item.localName;
|
||
|
|
} else {
|
||
|
|
name += item.localName + ",";
|
||
|
|
}
|
||
|
|
this.form.storeAddressPath = name;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 显示三级地址联动
|
||
|
|
showPicker() {
|
||
|
|
this.$refs.cityPicker.show();
|
||
|
|
},
|
||
|
|
showCategory() {
|
||
|
|
this.enableCategory = true;
|
||
|
|
},
|
||
|
|
validatorStep1Form() {
|
||
|
|
this.$refs.uForm.validate(async (valid) => {
|
||
|
|
console.log(valid);
|
||
|
|
if (valid) {
|
||
|
|
const params = { ...this.form };
|
||
|
|
params.storeLogo = params.storeLogo.toString();
|
||
|
|
params.storeAddressIdPath = params.storeAddressIdPath.toString();
|
||
|
|
const res = await applyThird(params);
|
||
|
|
if (res.data.success) {
|
||
|
|
uni.showToast({
|
||
|
|
title: "提交成功!",
|
||
|
|
icon: "none",
|
||
|
|
});
|
||
|
|
this.$emit("callback");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
/* page {
|
||
|
|
background: #fff;
|
||
|
|
} */
|
||
|
|
</style>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import url("./entry.scss");
|
||
|
|
.get-center {
|
||
|
|
padding: 12rpx 30rpx;
|
||
|
|
background: $light-color;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #fff;
|
||
|
|
font-weight: bold;
|
||
|
|
display: inline;
|
||
|
|
}
|
||
|
|
.column {
|
||
|
|
padding: 32rpx;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
.submit {
|
||
|
|
color: #fff;
|
||
|
|
margin-top: 120rpx;
|
||
|
|
background: rgba($light-color, 0.8);
|
||
|
|
}
|
||
|
|
.tips {
|
||
|
|
color: #999;
|
||
|
|
font-size: 24rpx;
|
||
|
|
line-height: 1.2;
|
||
|
|
margin-top: 10rpx;
|
||
|
|
}
|
||
|
|
.tips-success {
|
||
|
|
color: $weChat-color;
|
||
|
|
font-size: 24rpx;
|
||
|
|
}
|
||
|
|
</style>
|