web/seller/src/views/shop/shopSetting.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>