331 lines
8.9 KiB
Vue
331 lines
8.9 KiB
Vue
<template>
|
||
<div class="person-msg">
|
||
<u-form ref="thirdForm" :model="form" :rules="rules" :label-width="200">
|
||
<h4>基础信息</h4>
|
||
<u-form-item prop="storeName" label="店铺名称">
|
||
<u-input
|
||
type="text"
|
||
v-model="form.storeName"
|
||
placeholder="请填写店铺名称"
|
||
/>
|
||
</u-form-item>
|
||
|
||
<u-form-item prop="storeLogo" label="店铺logo">
|
||
<!-- <Upload
|
||
ref="uploadLogo"
|
||
:show-upload-list="false"
|
||
:on-success="handleSuccess"
|
||
:format="['jpg', 'jpeg', 'png', 'gif']"
|
||
:max-size="2048"
|
||
:before-upload="beforeUpload"
|
||
:on-format-error="handleFormatError"
|
||
:on-exceeded-size="handleMaxSize"
|
||
:on-error="uploadErr"
|
||
multiple
|
||
:action="action"
|
||
:headers="accessToken"
|
||
>
|
||
<Button type="info" :loading="uploadLoading">上传logo</Button>
|
||
</Upload> -->
|
||
|
||
<u-upload
|
||
:header="{ accessToken: storage.getAccessToken() }"
|
||
max-count="1"
|
||
:action="action"
|
||
@on-uploaded="onUploadedtwo"
|
||
@on-remove="onRemove"
|
||
style="margin-left: 30px"
|
||
></u-upload>
|
||
<div class="describe">请压缩图片在2M以内，格式为gif，jpg，png</div>
|
||
</u-form-item>
|
||
<u-form-item prop="goodsManagementCategory" label="店铺经营类目">
|
||
<u-checkbox-group
|
||
@change="checkboxGroupChange"
|
||
style="margin-left: 30px"
|
||
>
|
||
<u-checkbox
|
||
v-model="item.checked"
|
||
v-for="(item, index) in cateList"
|
||
:key="index"
|
||
:name="item.id"
|
||
>{{ item.name }}</u-checkbox
|
||
>
|
||
</u-checkbox-group>
|
||
</u-form-item>
|
||
<u-form-item prop="storeCenter" label="店铺所在地">
|
||
<u-input
|
||
v-model="form.___path"
|
||
type="select"
|
||
@click="showPicker"
|
||
placeholder="请选择所在地区"
|
||
/>
|
||
</u-form-item>
|
||
|
||
<u-form-item prop="storeAddressDetail" label="店铺详细地址">
|
||
<u-input
|
||
type="text"
|
||
v-model="form.storeAddressDetail"
|
||
placeholder="请填写店铺详细地址"
|
||
/>
|
||
</u-form-item>
|
||
<u-form-item prop="storeDesc" label="店铺简介">
|
||
<u-input
|
||
type="textarea"
|
||
v-model="form.storeDesc"
|
||
maxlength="200"
|
||
show-word-limit
|
||
:rows="4"
|
||
placeholder="请输入店铺简介"
|
||
/>
|
||
</u-form-item>
|
||
|
||
<u-form-item>
|
||
<!-- <button @click="uni.navigateBack()" :style="{background:'#F50505'}">返回</button> -->
|
||
<button
|
||
type="primary"
|
||
:style="{ background: '#FE3C3C' }"
|
||
@click="next"
|
||
class="bunem"
|
||
>
|
||
提交平台审核
|
||
</button>
|
||
</u-form-item>
|
||
</u-form>
|
||
<!-- <Modal title="View Image" v-model="visible">
|
||
<img :src="previewPicture" v-if="visible" style="width: 100%" />
|
||
</Modal> -->
|
||
<!-- <lili-map ref="liliMap" @getAddress="getAddress" :useApi="false"></lili-map> -->
|
||
<m-city
|
||
:provinceData="list"
|
||
headTitle="区域选择"
|
||
ref="cityPicker"
|
||
@funcValue="getpickerParentValue"
|
||
pickerSize="4"
|
||
></m-city>
|
||
<u-toast ref="uToast" />
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import storage from "@/utils/storage.js";
|
||
import { upload } from "@/api/common.js";
|
||
import { applyThird } from "@/api/goods";
|
||
import gkcity from "@/components/m-city/m-city.vue";
|
||
import { getCategoryList, getMon } from "@/api/goods.js";
|
||
export default {
|
||
components: {
|
||
"m-city": gkcity,
|
||
},
|
||
data() {
|
||
return {
|
||
cateList: [],
|
||
list: [
|
||
{
|
||
id: "",
|
||
localName: "请选择",
|
||
children: [],
|
||
},
|
||
],
|
||
storage: storage,
|
||
loading: false, // 加载状态
|
||
uploadLoading: false, // 上传加载状态
|
||
action: upload, // 上传地址
|
||
accessToken: {}, // 验证token
|
||
previewPicture: "", // 预览图片
|
||
address: "", // 回显地址
|
||
visible: false, // 图片预览
|
||
form: {
|
||
// 表单数据
|
||
storeLogo: [],
|
||
},
|
||
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: "请输入店铺详细地址" }],
|
||
},
|
||
categoryList: [], // 分类数据
|
||
};
|
||
},
|
||
methods: {
|
||
checkboxGroupChange(e) {
|
||
this.form.goodsManagementCategory = e;
|
||
this.form.goodsManagementCategory =
|
||
this.form.goodsManagementCategory.join(",");
|
||
console.log(this.form);
|
||
},
|
||
getCategoryList() {
|
||
getCategoryList(0).then((res) => {
|
||
res.data.result.forEach((item) => {
|
||
item.checked = false; // 初始化每个项目的checked属性为false
|
||
});
|
||
this.cateList = res.data.result;
|
||
});
|
||
},
|
||
showPicker() {
|
||
this.$refs.cityPicker.show();
|
||
},
|
||
// 三级地址联动回调
|
||
getpickerParentValue(e) {
|
||
// 将需要绑定的地址设置为空，并赋值
|
||
this.form.storeAddressIdPath = [];
|
||
this.form.storeAddressPath = [];
|
||
let name = "";
|
||
|
||
e.forEach((item, index) => {
|
||
if (item.id) {
|
||
// 遍历数据
|
||
this.form.storeAddressIdPath.push(item.id);
|
||
this.form.storeAddressPath.push(item.localName);
|
||
name += item.localName;
|
||
this.form.___path = name;
|
||
}
|
||
if (index == e.length - 1) {
|
||
//如果是最后一个
|
||
let _town = item.children.filter((_child) => {
|
||
return _child.id == item.id;
|
||
});
|
||
this.$set(
|
||
this.form,
|
||
"storeCenter",
|
||
_town[0].center.split(",")[0] + "," + _town[0].center.split(",")[1]
|
||
);
|
||
this.form.storeAddressIdPath = this.form.storeAddressIdPath.join(",");
|
||
this.form.storeAddressPath = this.form.storeAddressPath.join(",");
|
||
}
|
||
});
|
||
console.log(this.form);
|
||
},
|
||
|
||
// 店铺logo
|
||
onUploadedtwo(lists) {
|
||
lists.forEach((item) => {
|
||
this.form.storeLogo.push(item.response.result);
|
||
});
|
||
},
|
||
onRemove(lists) {
|
||
this.form.storeLogo = [];
|
||
},
|
||
// 下一步
|
||
next() {
|
||
this.$refs.thirdForm.validate((valid) => {
|
||
if (valid) {
|
||
this.loading = true;
|
||
let params = JSON.parse(JSON.stringify(this.form));
|
||
params.storeLogo = this.form.storeLogo.toString();
|
||
params.goodsManagementCategory =
|
||
this.form.goodsManagementCategory.toString();
|
||
|
||
applyThird(params)
|
||
.then((res) => {
|
||
this.loading = false;
|
||
uni.showToast({
|
||
title: "提交成功",
|
||
icon: "none",
|
||
duration: 1500,
|
||
});
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: "/pages/tabbar/user/my",
|
||
});
|
||
}, 1000);
|
||
})
|
||
.catch(() => {
|
||
uni.showToast({
|
||
title: "请正确输入",
|
||
icon: "none",
|
||
duration: 1500,
|
||
});
|
||
this.loading = false;
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: "请正确输入",
|
||
icon: "none",
|
||
duration: 1500,
|
||
});
|
||
console.log("error");
|
||
}
|
||
});
|
||
},
|
||
},
|
||
mounted() {
|
||
this.getCategoryList();
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.person-msg {
|
||
padding: 10px;
|
||
}
|
||
h4 {
|
||
margin-bottom: 10px;
|
||
padding: 0 10px;
|
||
border: 1px solid #ddd;
|
||
background-color: #f8f8f8;
|
||
font-weight: bold;
|
||
color: #333;
|
||
font-size: 14px;
|
||
line-height: 40px;
|
||
text-align: left;
|
||
}
|
||
.ivu-input-wrapper {
|
||
width: 300px;
|
||
}
|
||
.img-list {
|
||
display: inline-block;
|
||
margin: 10px;
|
||
width: 100px;
|
||
height: auto;
|
||
position: relative;
|
||
.cover {
|
||
display: none;
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
width: inherit;
|
||
height: inherit;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
i {
|
||
color: #fff;
|
||
font-size: 30px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
&:hover .cover {
|
||
display: flex;
|
||
}
|
||
}
|
||
.describe {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
.bunem {
|
||
width: 309px;
|
||
margin-top: 20px;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: #ffffff;
|
||
margin-bottom: 35px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
::v-deep {
|
||
.u-checkbox__icon-wrap--checked {
|
||
border-color: #fe3c3c !important;
|
||
background-color: #fe3c3c !important;
|
||
}
|
||
}
|
||
</style>
|