113 lines
3.7 KiB
Vue
113 lines
3.7 KiB
Vue
<!-- 客服设置 -->
|
||
<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> |