487 lines
16 KiB
Vue
487 lines
16 KiB
Vue
<template>
|
||
<div class="search">
|
||
<Card style="margin-left: 10px">
|
||
<Tabs v-model="type" @on-click="handleClickType">
|
||
<TabPane label="基本信息" name="INFO">
|
||
<Form ref="form" :model="form" :label-width="100" :rules="formValidate">
|
||
<FormItem label="店铺名称">
|
||
<Input v-model="storeName" disabled clearable style="width: 20%" />
|
||
</FormItem>
|
||
<FormItem label="店铺地址" prop="storeAddressPath">
|
||
<span>{{ form.storeAddressPath }}</span>
|
||
<Button style="margin-left: 10px;" @click="handleChangeAddress('storeAddress')">选择</Button>
|
||
</FormItem>
|
||
<FormItem label="详细地址" prop="shopAddressDetail">
|
||
<Input v-model="form.storeAddressDetail" clearable style="width: 20%" maxlength="50" />
|
||
</FormItem>
|
||
<FormItem label="店铺LOGO">
|
||
<upload-pic-thumb v-model="form.storeLogo" :multiple="false"></upload-pic-thumb>
|
||
</FormItem>
|
||
<FormItem label="店铺简介" prop="content" class="wangEditor">
|
||
<Input type="textarea" :rows="8" v-model="form.storeDesc" style="width: 30%"></Input>
|
||
</FormItem>
|
||
<FormItem label="店铺楼层" prop="content" class="wangEditor">
|
||
<i-switch v-model="form.pageShow" @on-change="pageShow"></i-switch>
|
||
<span class="desc">店铺楼层装修是否开启，开启后移动端PC端将会自动展示装修的内容</span>
|
||
</FormItem>
|
||
<FormItem label="开启自提" prop="content" class="wangEditor">
|
||
<i-switch v-model="form.selfPickFlag" @on-change="changeSelfPickFlag"></i-switch>
|
||
<span class="desc">店铺是否开启自提功能</span>
|
||
</FormItem>
|
||
<Form-item>
|
||
<Button @click="handleSubmit" :loading="submitLoading" type="primary" style="margin-right: 5px">修改
|
||
</Button>
|
||
</Form-item>
|
||
</Form>
|
||
</TabPane>
|
||
<TabPane label="发货地址">
|
||
<Form ref="addressGoods" :model="addressGoods" :label-width="100" :rules="addressGoodsValidate">
|
||
<FormItem label="发货人姓名" prop="salesConsignorName">
|
||
<Input v-model="addressGoods.salesConsignorName" maxlength="11" clearable style="width: 20%">
|
||
</Input>
|
||
</FormItem>
|
||
<FormItem label="发货人手机号" prop="salesConsignorMobile">
|
||
<Input v-model="addressGoods.salesConsignorMobile" maxlength="11" clearable style="width: 20%">
|
||
</Input>
|
||
</FormItem>
|
||
<FormItem label="地址" prop="salesConsignorAddressId">
|
||
<span>{{ addressGoods.salesConsignorAddressPath }}</span>
|
||
<Button style="margin-left: 10px;" @click="handleChangeAddress('addressGoods')">选择</Button>
|
||
</FormItem>
|
||
<!-- <FormItem label="地址名称" prop="salesConsignorAddressPath">
|
||
<Input
|
||
v-model="addressGoods.salesConsignorAddressPath"
|
||
clearable
|
||
style="width: 20%"
|
||
>
|
||
</Input>
|
||
</FormItem> -->
|
||
<FormItem label="详细地址" prop="salesConsignorDetail">
|
||
<Input v-model="addressGoods.salesConsignorDetail" clearable style="width: 20%">
|
||
</Input>
|
||
</FormItem>
|
||
<Button @click="setAddressGoods" type="primary" style="margin-left: 8px">确认
|
||
</Button>
|
||
</Form>
|
||
</TabPane>
|
||
<TabPane label="退货地址" name="REFUND_GOODS_ADDRESS">
|
||
<Form ref="addressForm" :model="addressForm" :label-width="100" :rules="afterFormValidate">
|
||
<FormItem label="收货人" prop="salesConsigneeName">
|
||
<Input v-model="addressForm.salesConsigneeName" maxlength="11" clearable style="width: 20%" />
|
||
</FormItem>
|
||
<FormItem label="收货人电话" prop="salesConsigneeMobile">
|
||
<Input v-model="addressForm.salesConsigneeMobile" maxlength="11" style="width: 20%" />
|
||
</FormItem>
|
||
<FormItem label="售后地址">
|
||
<span>{{ addressForm.salesConsigneeAddressPath }}</span>
|
||
<Button style="margin-left: 10px;" @click="handleChangeAddress('salesConsigneeAddressPath')">选择</Button>
|
||
</FormItem>
|
||
<FormItem label="详细地址" prop="salesConsigneeDetail">
|
||
<Input v-model="addressForm.salesConsigneeDetail" clearable style="width: 20%" maxlength="50" />
|
||
</FormItem>
|
||
|
||
<Form-item>
|
||
<Button @click="afterHandleSubmit" :loading="submitLoading" type="primary" style="margin-right: 5px">修改
|
||
</Button>
|
||
</Form-item>
|
||
</Form>
|
||
</TabPane>
|
||
<TabPane label="库存预警" name="STOCK_WARNING">
|
||
<Form ref="stockWarningForm" :model="stockWarningForm" :label-width="100" :rules="stockWarningFormValidate">
|
||
<FormItem label="预警数" prop="stockWarning">
|
||
<InputNumber :min="0" :max="99999" v-model="stockWarningForm.stockWarning" type="number" maxlength="6"
|
||
clearable style="width: 20%" />
|
||
</FormItem>
|
||
|
||
<Form-item>
|
||
<Button @click="stockWarningHandleSubmit" :loading="submitLoading" type="primary"
|
||
style="margin-right: 5px">修改
|
||
</Button>
|
||
</Form-item>
|
||
</Form>
|
||
</TabPane>
|
||
<!-- Udesk 坐席功能 后续维护 -->
|
||
<!-- <TabPane label="客服设置" name="UDESK">
|
||
<Form
|
||
ref="udeskForm"
|
||
:model="udeskForm"
|
||
:label-width="100"
|
||
:rules="udeskFormValidate"
|
||
>
|
||
<FormItem label="坐席id" prop="merchantEuid">
|
||
<Input
|
||
v-model="udeskForm.merchantEuid"
|
||
maxlength="30"
|
||
clearable
|
||
style="width: 20%"
|
||
/>
|
||
</FormItem>
|
||
<Form-item>
|
||
<Button
|
||
@click="merchantSubmit"
|
||
:loading="submitLoading"
|
||
type="primary"
|
||
style="margin-right: 5px"
|
||
>修改
|
||
</Button>
|
||
</Form-item>
|
||
</Form>
|
||
</TabPane> -->
|
||
</Tabs>
|
||
</Card>
|
||
|
||
<multipleMap ref="map" @callback="callbackAddress" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as API_Shop from "@/api/shops";
|
||
import { validateMobile } from "@/libs/validate";
|
||
import uploadPicThumb from "@/views/my-components/lili/upload-pic-thumb";
|
||
|
||
import multipleMap from "@/views/my-components/map/multiple-map";
|
||
import * as RegExp from "@/libs/RegExp.js";
|
||
import Cookies from "js-cookie";
|
||
export default {
|
||
name: "shopSetting",
|
||
components: {
|
||
uploadPicThumb,
|
||
|
||
multipleMap
|
||
},
|
||
data() {
|
||
return {
|
||
currentKey: "", //存储当前点击地址的key
|
||
showMap: false, // 是否展示地图
|
||
type: "INFO",
|
||
|
||
storeName: "", //店铺名称
|
||
|
||
regionId: [], // 地区id
|
||
addressForm: {
|
||
// 退货地址
|
||
salesConsigneeName: "", // 收货人姓名
|
||
salesConsigneeMobile: "", // 收货人电话
|
||
salesConsigneeAddressId: "", // 售后地址id,逗号分割
|
||
salesConsigneeAddressPath: "", // 售后地址，逗号分割
|
||
salesConsigneeDetail: "", // 详细地址
|
||
},
|
||
//库存预警form
|
||
stockWarningForm: {
|
||
stockWarning: 0, // 库存预警数量
|
||
},
|
||
//im form
|
||
udeskForm: {
|
||
merchantEuid: "",
|
||
},
|
||
stockWarningFormValidate: {
|
||
stockWarning: [
|
||
{ required: true, type: 'number', message: "请输入库存预警数", trigger: "blur" },
|
||
],
|
||
},
|
||
udeskFormValidate: {
|
||
merchantEuid: [
|
||
{ required: true, message: "请输入店铺坐席ID", trigger: "blur" },
|
||
],
|
||
},
|
||
afterFormValidate: {
|
||
salesConsigneeMobile: [
|
||
{ required: true, message: "手机号不能为空", trigger: "blur" },
|
||
{
|
||
pattern: RegExp.mobile,
|
||
trigger: "blur",
|
||
message: "请输入正确的手机号",
|
||
},
|
||
],
|
||
salesConsigneeName: [
|
||
{ required: true, message: "请输入收货人", trigger: "blur" },
|
||
],
|
||
salesConsigneeDetail: [
|
||
{ required: true, message: "请输入详细地址", trigger: "blur" },
|
||
],
|
||
},
|
||
form: {
|
||
// 添加或编辑表单对象初始化数据
|
||
storeAddressPath: "", // 店铺地址中文
|
||
storeCenter: "", // 经度 + 纬度
|
||
longitude: "", //经度
|
||
latitude: "", //纬度
|
||
storeAddressDetail: "", //详细地址
|
||
storeAddressIdPath: "", //地址
|
||
storeDesc: "", // 店铺描述
|
||
pageShow: false,
|
||
selfPickFlag: false,
|
||
},
|
||
|
||
// 表单验证规则
|
||
formValidate: {
|
||
addressName: [
|
||
{
|
||
required: true,
|
||
message: "请输入地址名称",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
longitude: [
|
||
{
|
||
required: true,
|
||
message: "请输入地址经度",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
latitude: [
|
||
{
|
||
required: true,
|
||
message: "请输入地址纬度",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
mobile: [
|
||
{
|
||
required: true,
|
||
message: "请输入地址纬度",
|
||
trigger: "blur",
|
||
},
|
||
{
|
||
validator: validateMobile,
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
storeAddressDetail: [
|
||
{
|
||
required: true,
|
||
message: "请输入详细地址",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
},
|
||
submitLoading: false, // 添加或编辑提交状态
|
||
//发货地址
|
||
addressGoods: {
|
||
salesConsignorName: " ",
|
||
salesConsignorMobile: " ",
|
||
salesConsignorAddressId: " ",
|
||
salesConsignorAddressPath: " ",
|
||
salesConsignorDetail: " ",
|
||
},
|
||
|
||
addressGoodsValidate: {
|
||
salesConsignorName: [
|
||
{ required: true, message: "请输入发货人姓名", trigger: "blur" },
|
||
],
|
||
salesConsignorMobile: [
|
||
{ required: true, message: "手机号不能为空", trigger: "blur" },
|
||
{
|
||
pattern: RegExp.mobile,
|
||
trigger: "blur",
|
||
message: "请输入正确的手机号",
|
||
},
|
||
],
|
||
salesConsignorDetail: [
|
||
{ required: true, message: "请输入详细地址", trigger: "blur" },
|
||
],
|
||
},
|
||
};
|
||
},
|
||
methods: {
|
||
// 回调地址
|
||
callbackAddress(val) {
|
||
if (val.type === 'select') {
|
||
const paths = val.data.map(item => item.name).join(',')
|
||
|
||
const ids = val.data.map(item => item.id).join(',')
|
||
|
||
if (this.currentKey === 'storeAddress') {
|
||
this.form.storeAddressPath = paths
|
||
this.form.storeAddressIdPath = ids
|
||
this.form.storeCenter = val.data[val.data.length - 1].center
|
||
}
|
||
if (this.currentKey === 'addressGoods') {
|
||
this.addressGoods.salesConsignorAddressPath = paths
|
||
this.addressGoods.salesConsignorAddressId = ids
|
||
}
|
||
if (this.currentKey === 'salesConsigneeAddressPath') {
|
||
this.addressForm.salesConsigneeAddressPath = paths
|
||
this.addressForm.salesConsigneeAddressId = ids
|
||
}
|
||
|
||
}
|
||
else {
|
||
if (this.currentKey === 'storeAddressstoreAddress') {
|
||
this.form.storeAddressPath = val.data.addr;
|
||
this.form.storeAddressIdPath = val.data.addrId;
|
||
this.form.storeCenter = val.data.position.lng + "," + val.data.position.lat;
|
||
}
|
||
if (this.currentKey === 'addressGoods') {
|
||
this.addressGoods.salesConsignorAddressPath = val.data.addr;
|
||
this.addressGoods.salesConsignorAddressId = val.data.addrId;
|
||
}
|
||
if (this.currentKey === 'salesConsigneeAddressPath') {
|
||
this.addressForm.salesConsigneeAddressPath = val.data.addr;
|
||
this.addressForm.salesConsigneeAddressId = val.data.addrId;
|
||
}
|
||
}
|
||
},
|
||
// 修改地址
|
||
handleChangeAddress(key) {
|
||
this.currentKey = key
|
||
this.$refs.map.open();
|
||
},
|
||
// 初始化数据
|
||
init() {
|
||
this.getShopInfo();
|
||
this.getDeliverAddress()
|
||
},
|
||
|
||
|
||
setAddressGoods() {
|
||
console.log(this.$refs.addressGoods)
|
||
|
||
this.$refs.addressGoods.validate((valid) => {
|
||
if (valid) {
|
||
API_Shop.editDeliverAddress(this.addressGoods).then(res => {
|
||
if (res.success) {
|
||
this.$Message.success("修改成功")
|
||
}
|
||
})
|
||
}
|
||
});
|
||
},
|
||
//获取店铺信息
|
||
getShopInfo() {
|
||
this.loading = true;
|
||
API_Shop.getShopInfo().then((res) => {
|
||
this.loading = false;
|
||
if (res.success) {
|
||
this.form = res.result;
|
||
|
||
this.storeName = res.result.storeName;
|
||
this.form.storeCenter = res.result.storeCenter;
|
||
Cookies.set("userInfoSeller", JSON.stringify(res.result));
|
||
//库存预警数赋值
|
||
this.$nextTick(() => {
|
||
this.stockWarningForm.stockWarning = res.result.stockWarning;
|
||
});
|
||
if (res.result.merchantEuid) {
|
||
//赋予坐席id
|
||
this.udeskForm.merchantEuid = res.result.merchantEuid;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
pageShow(type) {
|
||
this.form.pageShow = type
|
||
},
|
||
changeSelfPickFlag(item) {
|
||
if (item) {
|
||
this.form.selfPickFlag = item
|
||
}
|
||
},
|
||
getDeliverAddress() {
|
||
API_Shop.getDeliverAddress().then(res => {
|
||
if (res.success) {
|
||
if (res.result != '' && res.result != null) {
|
||
this.addressGoods = res.result;
|
||
this.regionGoods = res.result.salesConsignorAddressPath;
|
||
this.regionIdS = res.result.salesConsignorAddressId;
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
//重置
|
||
handleReset() {
|
||
this.$refs.form.resetFields();
|
||
},
|
||
//提交保存
|
||
handleSubmit() {
|
||
this.$refs.form.validate((valid) => {
|
||
if (valid) {
|
||
this.submitLoading = true;
|
||
API_Shop.saveShopInfo(this.form).then((res) => {
|
||
this.submitLoading = false;
|
||
if (res.success) {
|
||
this.$Message.success("修改成功");
|
||
this.getShopInfo();
|
||
}
|
||
});
|
||
}
|
||
});
|
||
},
|
||
//修改库存预警数
|
||
stockWarningHandleSubmit() {
|
||
this.$refs.stockWarningForm.validate((valid) => {
|
||
if (valid) {
|
||
this.submitLoading = true;
|
||
API_Shop.updateStockWarning(this.stockWarningForm).then((res) => {
|
||
this.submitLoading = false;
|
||
if (res.success) {
|
||
this.$Message.success("修改成功");
|
||
this.getShopInfo();
|
||
}
|
||
});
|
||
}
|
||
});
|
||
},
|
||
merchantSubmit() {
|
||
this.$refs.udeskForm.validate((valid) => {
|
||
if (valid) {
|
||
this.submitLoading = true;
|
||
API_Shop.updatEmerchantId(this.udeskForm).then((res) => {
|
||
this.submitLoading = false;
|
||
if (res.success) {
|
||
this.$Message.success("修改成功");
|
||
this.getShopInfo();
|
||
}
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
//tab切换
|
||
handleClickType(v) {
|
||
//退款
|
||
if (v == "INFO") {
|
||
this.getShopInfo();
|
||
}
|
||
//退货
|
||
if (v == "REFUND_GOODS_ADDRESS") {
|
||
this.getRefundGoodsAddress();
|
||
}
|
||
},
|
||
//获取商家退货地址
|
||
getRefundGoodsAddress() {
|
||
API_Shop.getRefundGoodsAddress().then((res) => {
|
||
if (res.result != null) {
|
||
this.addressForm = res.result;
|
||
}
|
||
});
|
||
},
|
||
//提交保存
|
||
afterHandleSubmit() {
|
||
this.$refs.addressForm.validate((valid) => {
|
||
if (valid) {
|
||
this.submitLoading = true;
|
||
API_Shop.saveRefundGoodsAddress(this.addressForm).then((res) => {
|
||
this.submitLoading = false;
|
||
if (res.success) {
|
||
this.$Message.success("修改成功");
|
||
this.getRefundGoodsAddress();
|
||
}
|
||
});
|
||
}
|
||
});
|
||
},
|
||
},
|
||
mounted() {
|
||
this.init();
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.desc {
|
||
margin-left: 10px;
|
||
color: #999;
|
||
}
|
||
</style>
|