新增微信企业客服配置

src/views/shop/config/components/contactSetting.vue

@@ -0,0 +1,113 @@
+<!-- 客服设置 -->
+<template>
+  <div>
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="100" label-position="right">
+      <el-form-item label="企业ID" prop="weworkId">
+        <el-input v-model="form.weworkId" placeholder="请输入企业ID" style="width: 400px;"></el-input>
+      </el-form-item>
+      <el-form-item label="接入链接" prop="weworkUrl">
+        <el-input v-model="form.weworkUrl" placeholder="请输入接入链接" style="width: 400px;"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <div class="detail">
+          <h3>如何获取企业</h3>
+          <p>1.登录【企业微信管理后台】(<el-link type="primary" target="_blank"
+              href="https://work.weixin.qq.com">work.weixin.qq.com</el-link>)</p>
+          <p>2.获取企业ID：登录后，进入【我的企业>>企业信息>>企业ID】</p>
+          <el-image :src="imgs[0]" style="width: 600px;height: auto;" :preview-src-list="imgs"
+            :initial-index="0"></el-image>
+          <h3>如何获取接入链接</h3>
+          <p>1. 登录【企业微信管理后台】(<el-link type="primary" target="_blank"
+              href="https://work.weixin.qq.com">work.weixin.qq.com</el-link>)。
+          </p>
+          <p>2.找到《微信客服》应用，路径：【应用管理>> 应用管理>>应用>>微信客服】</p>
+          <el-image :src="imgs[1]" style="width: 600px;height: auto;" :preview-src-list="imgs"
+            :initial-index="1"></el-image>
+          <p>3.进入《微信客服》，找到《创建账号》按钮，点击后进入页面完成创建。（具体的接待时间、接待人员等商家可自行配置）</p>
+          <el-image :src="imgs[2]" style="width: 600px;height: auto;" :preview-src-list="imgs"
+            :initial-index="2"></el-image>
+          <p>4.创建成功后，再次点击刚刚创建的账号，进入后复制《接入链接》粘贴过来即可；特别说明，账号可选用已创建的账号；</p>
+        </div>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" :loading="loading" @click="submitHandle">保存</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import ShopApi from "@/api/account/shop";
+
+const imgs = [
+  "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/06f236d656be479284833a166a5b98c1.png",
+  "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/96f3c5c4c1f940c390eef901bcd11a14.png",
+  "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/5dbbd3a7d31c4bef8af57c6679421dd5.png",
+];
+
+const formRef = ref();
+const loading = ref(false);
+const form = ref({
+  id: '',
+  weworkId: "",
+  weworkUrl: "",
+});
+
+const rules = {
+  weworkId: [{ required: true, message: "请输入企业ID", trigger: "blur" }],
+  weworkUrl: [{ required: true, message: "请输入接入链接", trigger: "blur" }],
+};
+
+// 提交表单
+function submitHandle() {
+  formRef.value.validate(async (valid) => {
+    if (valid) {
+      try {
+        loading.value = true;
+        await ShopApi.edit(form.value);
+        ElNotification({
+          title: "成功",
+          message: "保存成功",
+          type: "success",
+        });
+      } catch (error) {
+        console.log(error);
+      }
+      loading.value = false;
+    } else {
+      return false;
+    }
+  });
+}
+
+
+// 获取店铺信息
+async function getShopInfo() {
+  try {
+    const res = await ShopApi.get()
+    form.value.id = res.id;
+    form.value.weworkId = res.weworkId;
+    form.value.weworkUrl = res.weworkUrl;
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+onMounted(() => {
+  getShopInfo();
+})
+</script>
+
+<style scoped lang="scss">
+.detail {
+  p {
+    margin-bottom: 10px;
+  }
+
+  .img {
+    width: 600px;
+    border-radius: 4px;
+  }
+}
+</style>

src/views/shop/config/index.vue

@@ -6,11 +6,13 @@
         <el-tab-pane label="安全设置" name="4"></el-tab-pane>
         <el-tab-pane label="跳转小程序" name="6" v-if="shopId == 1"></el-tab-pane>
         <el-tab-pane label="通知中心" name="7"></el-tab-pane>
+        <el-tab-pane label="客服设置" name="8"></el-tab-pane>
       </el-tabs>
       <shopInfo v-if="activeName == 1" />
       <safe v-if="activeName == 4" />
       <notifications v-if="activeName == 7" />
       <!-- <goxcx v-if="activeName == 6" />-->
+      <contactSetting v-if="activeName == 8" />
     </div>
   </div>
 </template>
@@ -19,6 +21,7 @@
 import shopInfo from "./components/shopInfo.vue";
 import safe from "./components/safe.vue";
 import notifications from "./components/notifications.vue";
+import contactSetting from "./components/contactSetting.vue";
 
 const state = reactive({
   activeName: "1",