307 lines
10 KiB
Vue
307 lines
10 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="address">
|
||
<Input v-model="form.address" @on-focus="$refs.liliMap.showMap = true" clearable style="width: 20%" />
|
||
</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>
|
||
<Form-item>
|
||
<Button @click="handleSubmit" :loading="submitLoading" type="primary" style="margin-right:5px">修改
|
||
</Button>
|
||
</Form-item>
|
||
</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="售后地址">
|
||
<Input v-model="region" disabled style="width: 20%" v-if="showRegion == false" />
|
||
<Button v-if="showRegion == false" @click="regionClick" :loading="submitLoading" type="primary" style="margin-left:8px">修改
|
||
</Button>
|
||
<regionMap style="width: 20%" @selected="selectedRegion" v-if="showRegion == true" />
|
||
</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">
|
||
<Input 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>
|
||
</Tabs>
|
||
</Card>
|
||
|
||
<liliMap ref="liliMap" @getAddress="getAddress"></liliMap>
|
||
</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 liliMap from "@/views/my-components/map/index";
|
||
import regionMap from "@/views/lili-components/region";
|
||
import * as RegExp from "@/libs/RegExp.js";
|
||
import Cookies from "js-cookie";
|
||
export default {
|
||
name: "shopSetting",
|
||
components: {
|
||
uploadPicThumb,
|
||
liliMap,
|
||
regionMap,
|
||
},
|
||
data() {
|
||
return {
|
||
type: "INFO",
|
||
showRegion: false, // 选择地址模态框显隐
|
||
storeName: "", //店铺名称
|
||
region: "", // 地区名称
|
||
regionId: [], // 地区id
|
||
addressForm: {
|
||
// 退货地址
|
||
salesConsigneeName: "", // 收货人姓名
|
||
salesConsigneeMobile: "", // 收货人电话
|
||
salesConsigneeAddressId: "", // 售后地址id,逗号分割
|
||
salesConsigneeAddressPath: "", // 售后地址，逗号分割
|
||
salesConsigneeDetail: "", // 详细地址
|
||
},
|
||
//库存预警form
|
||
stockWarningForm: {
|
||
stockWarning: "", // 库存预警数量
|
||
},
|
||
stockWarningFormValidate: {
|
||
stockWarning: [
|
||
{ required: true, message: "请输入库存预警数", 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: "", // 店铺地址中文
|
||
center: "", // 经度 + 纬度
|
||
longitude: "", //经度
|
||
latitude: "", //纬度
|
||
storeAddressDetail: "", //详细地址
|
||
storeAddressIdPath: "", //地址
|
||
storeDesc: "", // 店铺描述
|
||
},
|
||
|
||
// 表单验证规则
|
||
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, // 添加或编辑提交状态
|
||
};
|
||
},
|
||
methods: {
|
||
// 初始化数据
|
||
init() {
|
||
this.getShopInfo();
|
||
},
|
||
//获取店铺信息
|
||
getShopInfo() {
|
||
this.loading = true;
|
||
API_Shop.getShopInfo().then((res) => {
|
||
this.loading = false;
|
||
if (res.success) {
|
||
this.form = res.result;
|
||
this.$set(this.form, "address", res.result.storeAddressPath);
|
||
this.storeName = res.result.storeName;
|
||
this.form.center = res.result.storeCenter;
|
||
Cookies.set("userInfoSeller", JSON.stringify(res.result));
|
||
//库存预警数赋值
|
||
|
||
this.$nextTick(() => {
|
||
this.stockWarningForm.stockWarning = res.result.stockWarning + "";
|
||
});
|
||
}
|
||
});
|
||
},
|
||
//修改售后地址
|
||
regionClick() {
|
||
this.showRegion = true;
|
||
this.regionId = "";
|
||
},
|
||
//重置
|
||
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();
|
||
}
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 选中的地址
|
||
selectedRegion(val) {
|
||
this.region = val[1];
|
||
this.regionId = val[0];
|
||
},
|
||
//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;
|
||
this.regionId = res.result.salesConsigneeAddressId;
|
||
this.region = res.result.salesConsigneeAddressPath;
|
||
}
|
||
});
|
||
},
|
||
//提交保存
|
||
afterHandleSubmit() {
|
||
if (this.regionId == "") {
|
||
this.$Message.error("请选择地址");
|
||
return;
|
||
}
|
||
this.$refs.addressForm.validate((valid) => {
|
||
if (valid) {
|
||
this.addressForm.salesConsigneeAddressPath = this.region;
|
||
this.addressForm.salesConsigneeAddressId = this.regionId;
|
||
this.submitLoading = true;
|
||
API_Shop.saveRefundGoodsAddress(this.addressForm).then((res) => {
|
||
this.submitLoading = false;
|
||
if (res.success) {
|
||
this.$Message.success("修改成功");
|
||
this.getRefundGoodsAddress();
|
||
this.showRegion = false;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
},
|
||
//获取地址
|
||
getAddress(item) {
|
||
this.$set(this.form, "address", item.addr);
|
||
this.form.storeAddressPath = item.addr;
|
||
this.form.storeAddressIdPath = item.addrId;
|
||
this.form.center = item.position.lat + "," + item.position.lng;
|
||
},
|
||
},
|
||
mounted() {
|
||
this.init();
|
||
},
|
||
};
|
||
</script>
|