kubbo/dvcp_v2_wxcp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化产品库

Browse Source
This commit is contained in:
aixianling
2021-11-15 10:29:05 +08:00
parent 8f735a4ffe
commit 5440b43b9c
306 changed files with 54508 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

326
src/pages/quickReply/quickReply.vue Normal file
View File

@@ -0,0 +1,326 @@
<template>
<section class="quickReply">
<ai-top-fixed background="#F5F5F5">
<u-tabs slot="tabs" :list="tabs" :is-scroll="false" :current="currentType" font-size="32"
bar-width="192" height="96" @change="handleTabClick"/>
<u-search placeholder="搜索" shape="square" bg-color="#fff" :show-action="false" search-icon-color="#ccc"
v-model="search.title" @search="page.current=1,getList()"/>
<ai-tabs v-model="search.category" :ops="categories" @change="getList" wrap>
<u-icon v-if="isPersonal" label="管理" size="38" class="manage" name="iconEdit" custom-prefix="iconfont"
color="#1365DD" slot="end"
label-color="#1365DD" @tap="handleManageType"/>
</ai-tabs>
</ai-top-fixed>
<div class="mainPanel">
<div class="fill">
<ai-card :card-title="e.title" v-for="(e,i) in list" :key="i" @send="handleSendMsg(e)">
<div class="textContent" v-if="e.contentType=='text'" v-html="e.content"/>
<div class="fileContent" v-else-if="e.contentType=='news'">
<ai-image link/>
<div class="info">
<span>{{ e.accessTitle }}</span>
<em>{{ e.accessUrl }}</em>
</div>
</div>
<div class="fileContent" v-else-if="e.contentType=='miniprogram'">
<ai-image miniapp/>
<div class="info">
{{ e.accessTitle }}
</div>
</div>
<div class="fileContent" v-else>
<template v-if="e.file">
<ai-image :src="e.file.url"/>
<div class="info">
<span>{{ e.file.name }}</span>
<em>{{ e.file.fileSizeStr }}</em>
</div>
</template>
</div>
<template #title>
<u-row>
<div class="top" v-if="e.isTop==1">置顶</div>
<div class="fill">{{ e.title }}</div>
</u-row>
</template>
<template v-if="isPersonal" #menu>
<div class="menu" @tap="handleTop(e)">{{ e.isTop == 1 ? '取消' : '' }}置顶</div>
<div class="menu" @tap="handleDetail(e.id)">编辑</div>
<div class="menu" @tap="handleDel(e.id)">删除</div>
</template>
</ai-card>
</div>
</div>
<div v-if="isPersonal" class="iconfont iconfont-iconAdd addBtn" @tap="handleDetail('')"/>
</section>
</template>
<script>
import AiTabs from "../../components/AiTabs";
import AiCard from "../../components/AiCard";
import {mapActions, mapState} from "vuex";
import AiImage from "../../components/AiImage";
import USticky from "../../uview/components/u-sticky/u-sticky";
import AiTopFixed from "../../components/AiTopFixed";
export default {
name: "quickReply",
components: {AiTopFixed, USticky, AiImage, AiCard, AiTabs},
computed: {
...mapState(['agentConfig']),
tabs() {
return [
{name: "个人话术", value: 0},
{name: "公共话术", value: 1},
]
},
categories() {
let meta = [{name: "全部分类", value: ""}]
this.originCategories.map(e => {
if (e.type == this.currentType) {
meta.push({name: e.name, value: e.id})
}
})
return meta
},
isPersonal() {
return this.currentType == 0
}
},
data() {
return {
currentType: 0,
page: {current: 1, size: 10, total: 0},
list: [],
originCategories: [],
search: {title: null, category: ''}
}
},
methods: {
...mapActions(['injectJWeixin', 'wxInvoke']),
handleManageType() {
uni.navigateTo({url: `./typeManage?type=${this.currentType}`})
},
handleDetail(id) {
uni.navigateTo({url: `./replyDetail?type=${this.currentType}&id=${id}`})
},
handleDel(id) {
this.$confirm("是否要删除该话术模板").then(() => {
this.$http.post("/app/wxcp/wxspeechtechnique/delete", null, {
params: {id}
}).then(res => {
if (res?.code == 0) {
this.$u.toast("删除成功!")
this.getList()
}
})
})
},
getList() {
this.$http.post("/app/wxcp/wxspeechtechnique/list", null, {
params: {...this.page, ...this.search, type: this.currentType}
}).then(res => {
if (res?.data) {
if (this.page.current > 1) {
this.list = [...this.list, ...res.data.records]
} else this.list = res.data.records
this.page.total = res.data.total
}
})
},
getCategories() {
this.$http.post("/app/wxcp/wxspeechtechniquecategory/listAll?type=-1").then(res => {
if (res?.data) {
this.originCategories = res.data
}
})
},
handleTabClick(i) {
this.page.current = 1
this.search = {}
this.currentType = i
this.getList()
},
handleSendMsg(e) {
let params = {
text: {
content: e.content || ""
},
image: {
mediaid: e.mediaId || "" //图片的素材id
},
video: {
mediaid: e.mediaId || "" //视频的素材id
},
file: {
mediaid: e.mediaId || "" //文件的素材id
},
news: {
link: e.accessUrl, //H5消息页面url 必填
title: e.accessTitle, //H5消息标题
desc: e.accessUrl,
imgUrl: this.$cdn + 'file.png', //H5消息封面图片URL
},
miniprogram: {
appid: e.accessAppid,//小程序的appid
title: e.accessTitle, //小程序消息的title
imgUrl: this.$cdn + 'miniwxmp.jpg',
page: e.accessUrl, //小程序消息打开后的路径，注意要以.html作为后缀，否则在微信端打开会提示找不到页面
}
}
this.wxInvoke(['sendChatMessage', {
msgtype: e.contentType,
[e.contentType]: params[e.contentType]
}, res => {
if (res?.err_msg == 'sendChatMessage:ok') {
// this.$u.toast("发送成功!")
} else {
this.$u.toast("发送失败!")
}
}])
},
handleTop(row) {
let {isTop, id} = row
isTop = (Number(isTop) + 1) % 2
this.$http.post("/app/wxcp/wxspeechtechnique/setIsTop", null, {
params: {isTop, id}
}).then(res => {
if (res?.code == 0) {
this.$u.toast("设置成功!")
this.getList()
}
})
}
},
created() {
this.injectJWeixin("sendChatMessage")
this.getList()
this.getCategories()
},
onReachBottom() {
if (this.page.total > this.list.length) {
this.page.current++
this.getList()
}
}
}
</script>
<style lang="scss" scoped>
.quickReply {
min-height: 100%;
background: #F5F5F5;
display: flex;
flex-direction: column;
.topFixed {
background: transparent;
}
::v-deep .u-tabs {
.u-scroll-box {
border-bottom: 1px solid #D4D4D4;
.u-tab-bar {
position: absolute;
bottom: -6px;
}
}
}
::v-deep .u-row {
flex-shrink: 0;
flex-wrap: nowrap;
align-items: center;
.manage {
flex-shrink: 0;
margin-bottom: 16px;
}
.top {
width: 84px;
height: 48px;
background: #F7F7F7;
border-radius: 4px;
color: #999;
font-size: 26px;
display: flex;
justify-content: center;
align-items: center;
}
}
.mainPanel {
padding: 40px 32px 110px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-start;
& > * + * {
margin-top: 32px;
}
.menu {
text-align: center;
line-height: 80px;
width: 192px;
height: 80px;
font-size: 28px;
font-weight: 400;
color: #333333;
}
.AiCard {
margin-bottom: 32px;
}
}
.addBtn {
position: fixed;
right: 32px;
bottom: 64px;
color: $uni-color-primary;
font-size: 96px;
text-align: center;
font-weight: lighter;
}
.textContent {
overflow: hidden;
text-overflow: ellipsis;
}
.fileContent {
display: flex;
font-size: 32px;
align-items: center;
.info {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
min-width: 0;
& > * {
width: 100%;
word-break: break-all;
}
}
.AiImage {
margin-right: 20px;
}
em {
font-style: inherit;
font-size: 26px;
color: #9b9b9b;
}
}
}
</style>

199
src/pages/quickReply/replyDetail.vue Normal file
View File

@@ -0,0 +1,199 @@
<template>
<section class="replyDetail">
<u-form :model="form" ref="replyForm" :rules="rules">
<u-form-item label="分类" prop="category" required>
<ai-select :value="form.category" :list="categories" @data="v=>form.category=v[0].value"/>
</u-form-item>
<u-form-item label="标题">
<u-input class="textRight" v-model="form.title" placeholder="选填，仅内部可见" maxlength="30"/>
</u-form-item>
<u-form-item label="快捷回复类型" label-position="top" prop="contentType" required>
<ai-tabs wrap plain :ops="types" v-model="form.contentType" @change="$refs.replyForm.setRules(rules)"/>
</u-form-item>
<u-form-item v-if="form.contentType=='text'" label="内容" label-position="top" prop="content" required>
<ai-textarea v-model="form.content" maxlength="1000" placeholder="限1000字">
<template #bar>
<div class="textareaBtn" @tap="handleInsert(custom.name)">插入用户昵称</div>
<!-- <div class="textareaBtn" @tap="handleInsert(custom.name)">插入备注名</div>-->
</template>
</ai-textarea>
</u-form-item>
<u-form-item v-else-if="['image','video','file','voice'].includes(form.contentType)"
:label="currentContentType.name"
label-position="top" prop="mediaId" required>
<ai-uploader :type="form.contentType" :mediaId.sync="form.mediaId" :fileId.sync="form.fileId"
:placeholder="`添加${currentContentType.name}`" :def="form.file"/>
</u-form-item>
<template v-else-if="['news'].includes(form.contentType)">
<u-form-item label="链接地址" label-position="top" prop="accessUrl" required>
<u-input v-model="form.accessUrl" placeholder="链接地址请以http或https开头"/>
</u-form-item>
<u-form-item label="标题" prop="accessTitle" required>
<u-input class="textRight" v-model="form.accessTitle" maxlength="50" placeholder="请输入链接标题"/>
</u-form-item>
</template>
<template v-else-if="['miniprogram'].includes(form.contentType)">
<u-form-item label="AppId" prop="accessAppid" required>
<u-input class="textRight" v-model="form.accessAppid" placeholder="请输入小程序Appid"/>
</u-form-item>
<u-form-item label="页面路径" prop="accessUrl" required label-width="140">
<u-input class="textRight" v-model="form.accessUrl" placeholder="请输入小程序页面路径"/>
</u-form-item>
<u-form-item label="标题" prop="accessTitle" required>
<u-input class="textRight" v-model="form.accessTitle" maxlength="50" placeholder="请输入链接标题"/>
</u-form-item>
</template>
</u-form>
<div bottom>
<u-button @tap="back">取消</u-button>
<u-button type="primary" @tap="submitReply">保存</u-button>
</div>
</section>
</template>
<script>
import AiSelect from "../../components/AiSelect";
import AiTabs from "../../components/AiTabs";
import AiTextarea from "../../components/AiTextarea";
import AiUploader from "../../components/AiUploader";
import {mapActions} from "vuex";
export default {
name: "replyDetail",
components: {AiUploader, AiTextarea, AiTabs, AiSelect},
computed: {
types() {
return [
{name: "文字", value: "text"},
{name: "图片", value: "image"},
{name: "视频", value: "video"},
{name: "附件", value: "file"},
{name: "链接", value: "news"},
{name: "小程序", value: "miniprogram"},
]
},
currentContentType() {
return this.types.find(e => e.value == this.form.contentType) || {}
},
rules() {
return {
category: [{required: true, message: "请选择分类"}],
contentType: [{required: true, message: "请选择快捷回复类型"}],
content: [{required: true, message: "请填写内容"}],
accessUrl: [{required: true, message: "请填写链接地址"}],
accessAppid: [{required: true, message: "请填写小程序AppId"}],
accessTitle: [{required: true, message: "请填写标题"}],
mediaId: [{required: true, message: `请上传${this.currentContentType.name}`}],
}
}
},
data() {
return {
form: {contentType: "text"},
categories: [],
type: "",
custom: {}
}
},
methods: {
...mapActions(['injectJWeixin', 'wxInvoke']),
back() {
uni.redirectTo({url: "./quickReply"})
},
getCategories() {
this.$http.post("/app/wxcp/wxspeechtechniquecategory/listAll", null, {
params: {type: this.type}
}).then(res => {
if (res?.data) {
this.categories = res.data.map(e => ({label: e.name, value: e.id}))
}
})
},
getDetail(id) {
this.$http.post("/app/wxcp/wxspeechtechnique/list", null, {
params: {id}
}).then(res => {
if (res?.data) {
this.form = res.data.records?.[0]
}
})
},
submitReply() {
this.$refs.replyForm.validate(v => {
if (v) {
this.$http.post("/app/wxcp/wxspeechtechnique/addOrUpdate", {...this.form, type: this.type}).then(res => {
if (res?.code == 0) {
this.$u.toast("提交成功!")
uni.navigateTo({url: './quickReply'})
}
})
}
})
},
getCustom() {
this.wxInvoke(['getCurExternalContact', {}, res => {
if (res?.err_msg == 'getCurExternalContact:ok') {
this.$http.post("/app/wxcp/wxcustomer/queryCustomerById", null, {
params: {id: res.userId}
}).then(ret => {
if (ret?.data) {
this.custom = ret.data
}
})
}
}])
},
handleInsert(str) {
if (str) {
this.form.content = (this.form.content || "") + str
this.$forceUpdate()
}
}
},
created() {
this.injectJWeixin("getCurExternalContact").then(() => this.getCustom())
let {type, id} = this.$route.query
this.type = type
this.getCategories()
id && this.getDetail(id)
},
mounted() {
this.$nextTick(() => this.$refs.replyForm.setRules(this.rules))
}
}
</script>
<style lang="scss" scoped>
.replyDetail {
border-top: 1px solid #D4D4D4;
padding: 16px 0 208px;
background: #F5F5F5;
box-sizing: border-box;
::v-deep .u-form-item {
.u-form-item--left {
margin-bottom: 0 !important;
}
.u-form-item--right__content__slot {
justify-content: flex-end;
}
& + .u-form-item {
margin-top: 16px;
}
.textRight {
.uni-input-wrapper {
text-align: right;
}
}
}
.textareaBtn {
font-size: 26px;
color: #1365DD;
}
}
</style>

162
src/pages/quickReply/typeManage.vue Normal file
View File

@@ -0,0 +1,162 @@
<template>
<section class="typeManage">
<v-drag v-model="list" @move="handleMove">
<div class="item" v-for="(e,i) in list" :key="i">
<u-icon name="list"/>
<u-input v-model="e.name" border :focus="!e.id" @blur="submitCategory(e,i)" maxlength="6"/>
<div btn @tap="handleDel(e,i)">删除</div>
</div>
</v-drag>
<div v-if="!adding" class="item" @tap="handleAdd">
<u-icon name="plus-circle" size="38" color="#1365DD"/>
<div btn>添加新的分组</div>
</div>
<div bottom>
<u-button @tap="back">返回</u-button>
</div>
</section>
</template>
<script>
import VDrag from "../../components/VDrag";
export default {
name: "typeManage",
components: {VDrag},
data() {
return {
list: [],
adding: false,
moveIndex: 0
}
},
methods: {
back() {
uni.redirectTo({url: "./quickReply"})
},
getList() {
this.$http.post("/app/wxcp/wxspeechtechniquecategory/listAll", null, {
params: {type: this.$route.query?.type}
}).then(res => {
if (res?.data) {
this.list = res.data.map(e => ({...e, disabled: true})).sort((a, b) => a.showIndex - b.showIndex)
}
})
},
handleAdd() {
this.adding = true
this.list.push({
showIndex: this.list.length,
type: this.$route.query?.type
})
},
handleDel(item, index) {
this.$confirm("是否要删除该分类?").then(() => {
if (item?.id) {
this.$http.post("/app/wxcp/wxspeechtechniquecategory/delete", null, {
params: {id: item.id}
}).then(() => {
this.$u.toast("删除成功!")
this.getList()
})
} else this.list.splice(index, 1)
})
},
submitCategory(item, index) {
this.adding = false
if (item?.name) {
this.$http.post("/app/wxcp/wxspeechtechniquecategory/addOrUpdate", item).then(() => {
this.getList()
})
} else {
this.list.splice(index, 1)
}
},
handleMove({moved}) {
if (moved) {
let {oldIndex, newIndex} = moved,
list = JSON.parse(JSON.stringify(this.list)),
item = list?.[oldIndex]
if (oldIndex < newIndex) {
list.splice(newIndex + 1, 0, item)
list.splice(oldIndex, 1)
} else {
list.splice(oldIndex, 1)
list.splice(newIndex, 0, item)
}
this.$http.post("/app/wxcp/wxspeechtechniquecategory/updateSort",
list.map((e, showIndex) => ({id: e.id, showIndex}))
).then(res => {
if (res?.code == 0) {
this.getList()
}
})
}
}
},
created() {
this.getList()
},
}
</script>
<style lang="scss" scoped>
.typeManage {
padding: 32px 0 80px;
border-top: 1px solid #D4D4D4;
display: flex;
flex-direction: column;
& > * + * {
margin-top: 32px;
}
uni-movable-area {
width: 100%;
height: auto;
}
.item {
display: flex;
height: 88px;
width: 100%;
align-items: center;
position: relative;
& + .item {
margin-top: 32px;
}
&:hover {
z-index: 9;
}
}
.iconfont, .u-icon {
font-size: 38px;
padding: 0 32px;
color: #89b;
& + div[btn] {
padding: 0;
}
}
div[btn] {
color: #1365DD;
padding: 0 26px;
cursor: pointer;
}
::v-deep .u-input {
background: #FBFBFB;
border-radius: 4px;
border: 1px solid #CCCCCC;
height: 100%;
uni-input {
height: 100%;
}
}
}
</style>