<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>