初始化产品库
This commit is contained in:
aixianling
268
src/pages/casuallyask/casuallyask.vue
Normal file
268
src/pages/casuallyask/casuallyask.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<div class="casuallyask">
|
||||
<div class="banner">
|
||||
<picker :range="dictList" @change="bindPickerChange" range-key="dictName">
|
||||
<div class="picker">
|
||||
{{ askType }}
|
||||
<u-icon
|
||||
name="arrow-down"
|
||||
:custom-style="{ margin: '0 5px' }"
|
||||
></u-icon>
|
||||
</div>
|
||||
</picker>
|
||||
<u-search
|
||||
placeholder="请输入标题"
|
||||
:show-action="false"
|
||||
v-model="keyword"
|
||||
@search="onSearch"
|
||||
/>
|
||||
</div>
|
||||
<u-tabs
|
||||
class="nav"
|
||||
:list="tabs"
|
||||
:is-scroll="false"
|
||||
:current="currentType"
|
||||
font-size="32"
|
||||
bar-width="192"
|
||||
height="96"
|
||||
@change="handleTabClick"
|
||||
></u-tabs>
|
||||
<div class="body" v-if="eventList.length !== 0">
|
||||
<div
|
||||
class="content"
|
||||
v-for="(item, index) in eventList"
|
||||
:key="index"
|
||||
@click="detail(item)"
|
||||
>
|
||||
<u-row>
|
||||
<div>
|
||||
<div class="top">
|
||||
|
||||
<text :class="item.type == '0' ? 'active' : 'noactive'">
|
||||
{{ $dict.getLabel('leaveMessageType', item.type) }}
|
||||
</text>
|
||||
<!-- 村 -->
|
||||
<text class="areaName" v-if="item.areaName">{{ item.areaName }}：</text>
|
||||
<!-- 问题 -->
|
||||
<text class="title">{{ item.title }}</text>
|
||||
</div>
|
||||
|
||||
<div class="cont">
|
||||
<span class="name_time">留言人:</span>
|
||||
<text class="text_c"> {{ item.leaveName }}</text>
|
||||
</div>
|
||||
<div class="cont">
|
||||
<text class="name_time">留言时间:</text>
|
||||
<text class="text_c"> {{ item.createTime }}</text>
|
||||
</div>
|
||||
</div>
|
||||
</u-row>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-else/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiEmpty from '../../components/AiEmpty/AiEmpty'
|
||||
import URow from '../../uview/components/u-row/u-row.vue'
|
||||
|
||||
export default {
|
||||
name: 'casuallyAsk',
|
||||
// 组件
|
||||
components: {URow, AiEmpty},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
page: {current: 1, size: 10, total: 0},
|
||||
dictList: [], // 字典
|
||||
index: 0, // 留言类型 0投诉 1咨询 2建议
|
||||
keyword: '',
|
||||
askType: '提问类型',
|
||||
askIndex: '',
|
||||
currentType: 0, // 默认value的值(0待我回复)(1已回复)(2处理完成)
|
||||
eventList: [] // 数据列表
|
||||
// temp: { '0': '投诉', '1': '建议', '2': '咨询' }
|
||||
}
|
||||
},
|
||||
// 计算
|
||||
computed: {
|
||||
tabs() {
|
||||
return [
|
||||
{name: '待我回复', value: 0},
|
||||
{name: '我已回复', value: 1},
|
||||
{name: '处理完成', value: 2}
|
||||
]
|
||||
}
|
||||
},
|
||||
// 实例创建后
|
||||
onShow() {
|
||||
this.$dict.load('leaveMessageType').then(() => {
|
||||
this.dictList = this.$dict.getDict('leaveMessageType')
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
// 方法
|
||||
methods: {
|
||||
// 点击 value的值(0待我回复)(1已回复)(2处理完成)
|
||||
handleTabClick(i) {
|
||||
this.currentType = i
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
this.$http.post(`/app/appleavemessage/list`, null, {
|
||||
params: {
|
||||
...this.page,
|
||||
title: this.keyword,
|
||||
status: this.currentType,
|
||||
type: this.askIndex
|
||||
}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.page.total = res.data.total
|
||||
if (this.page.current > 1)
|
||||
this.eventList = [...this.eventList, res.data.records]
|
||||
else this.eventList = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
detail(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/casuallyask/casuallyaskDetail?id=${item.id}&type=${item.type}`
|
||||
// url: `/pages/casuallyask/casuallyaskDetail?id=${item.id}`
|
||||
})
|
||||
},
|
||||
// 提问类型
|
||||
bindPickerChange(e) {
|
||||
let index = e.detail.value
|
||||
this.askType = this.dictList[index].dictName
|
||||
this.askIndex = index
|
||||
this.getList()
|
||||
},
|
||||
onSearch(e) {
|
||||
this.keyword = e
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.eventList.length < this.page.total) {
|
||||
this.page.current++
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.casuallyask {
|
||||
min-height: 100%;
|
||||
background: #f5f5f5;
|
||||
padding-top: 64px;
|
||||
|
||||
.banner {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 0 30px 0 30px;
|
||||
|
||||
.picker {
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin-right: 8px;
|
||||
|
||||
.u-icon-wrap {
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
background-color: #ffffff;
|
||||
height: 96px;
|
||||
padding-top: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 114px 0 0 0;
|
||||
|
||||
.content {
|
||||
background-color: #ffffff;
|
||||
box-sizing: border-box;
|
||||
padding: 34px 32px;
|
||||
margin: 32px 20px;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.typeBox {
|
||||
|
||||
}
|
||||
|
||||
.noactive {
|
||||
text-align: center;
|
||||
color: #2266ff;
|
||||
width: 70px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
border-radius: 8px;
|
||||
background-color: #e8efff;
|
||||
}
|
||||
|
||||
.active {
|
||||
text-align: center;
|
||||
color: #ff4466;
|
||||
line-height: 44px;
|
||||
width: 70px;
|
||||
height: 44px;
|
||||
border-radius: 8px;
|
||||
background-color: #ffebef;
|
||||
}
|
||||
|
||||
.areaName {
|
||||
display: inline-block;
|
||||
color: #333;
|
||||
font-size: 32px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #333;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.cont {
|
||||
margin: 10px 0;
|
||||
|
||||
.name_time {
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
height: 24px;
|
||||
color: #999;
|
||||
font-size: 30px;
|
||||
// font-weight: 800;
|
||||
}
|
||||
|
||||
.text_c {
|
||||
color: #343d65;
|
||||
font-size: 30px;
|
||||
// font-weight: 800;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
442
src/pages/casuallyask/casuallyaskDetail.vue
Normal file
442
src/pages/casuallyask/casuallyaskDetail.vue
Normal file
@@ -0,0 +1,442 @@
|
||||
<template>
|
||||
<div class="casuallyaskDetail">
|
||||
<div class="detail">
|
||||
<div class="headerTitle" flex>
|
||||
<div class="temp">
|
||||
[{{ $dict.getLabel('leaveMessageType', detail.type) }}]
|
||||
</div>
|
||||
<span class="areaName">{{ detail.areaName }}</span>
|
||||
<span>{{ detail.title }}</span>
|
||||
</div>
|
||||
<div class="leaveName_leavePhone">
|
||||
<!-- 顶部圆形头像 -->
|
||||
<span class="icon">{{ detail.headPortrait || $formatName(detail.leaveName) }}</span>
|
||||
<span class="leaveName">{{ detail.leaveName }}</span>
|
||||
<span class="leavePhone" v-if="detail.leavePhone">({{ detail.leavePhone }})</span>
|
||||
</div>
|
||||
<!-- 编号 -->
|
||||
<div class="info-item">
|
||||
<span class="label">
|
||||
<u-icon name="order"></u-icon>
|
||||
</span>
|
||||
<span class="value">{{ detail.msgCode }}</span>
|
||||
</div>
|
||||
<!-- 日期 -->
|
||||
<div class="info-item">
|
||||
<span class="label">
|
||||
<u-icon name="clock"></u-icon>
|
||||
</span>
|
||||
<span class="value">{{ detail.createTime }}</span>
|
||||
</div>
|
||||
<!-- 进度-->
|
||||
<div class="info-item">
|
||||
<span class="label"><u-icon name="tags"/></span>
|
||||
<text class="status">{{
|
||||
$dict.getLabel('leaveMessageStatus', detail.status)
|
||||
}}
|
||||
</text>
|
||||
</div>
|
||||
<div class="content_text_img">
|
||||
<!-- 提问内容 -->
|
||||
<div class="content_text">
|
||||
{{ detail.content }}
|
||||
</div>
|
||||
<!-- 提问内容的图片 -->
|
||||
<div class="imageList">
|
||||
<ai-image preview :src="items.url" alt="" v-for="(items, i) in imgList" :key="i"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reply_content" v-if="detail.status == 1 || detail.status == 2">
|
||||
<div class="reply_title">
|
||||
<img src="https://cdn.cunwuyun.cn/img/dialogue.svg" alt=""/>
|
||||
<p>沟通记录</p>
|
||||
</div>
|
||||
<div class="reply_list">
|
||||
<div class="item" v-for="(item, index) in appLeaveMessageReplyList" :key="index">
|
||||
<div class="item_top">
|
||||
<div class="item_left">
|
||||
<div class="icon">
|
||||
{{ detail.headPortrait || $formatName(item.createUserName) }}
|
||||
</div>
|
||||
<div class="name fill">
|
||||
<div class="createUserName_createUnitName">
|
||||
<span v-if="item.createUserId == user.id" class="reply_font">我的回复</span>
|
||||
<template v-else>
|
||||
<span class="createUserName">{{ item.createUserName }} </span>
|
||||
<span class="createUserName" v-if="item.createUserPhone">({{ item.createUserPhone }})</span>
|
||||
</template>
|
||||
</div>
|
||||
<div flex v-if="item.createUserId != user.id">
|
||||
<!-- 回复单位 -->
|
||||
<span class="createUnitName">{{ item.createUnitName }}</span>
|
||||
<span class="reply">回复</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_right">{{ item.createTime }}</div>
|
||||
</div>
|
||||
<!-- 回复内容 -->
|
||||
<div class="myreply_con">
|
||||
<div class="myreply_text">
|
||||
{{ item.content }}
|
||||
</div>
|
||||
<!-- 回复图片 -->
|
||||
<div class="imageList">
|
||||
<ai-image v-for="img in item.images" :key="img.id" preview :src="img.url"/>
|
||||
</div>
|
||||
<!-- -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="close_reply" v-if="detail.status == 0 || detail.status == 1">
|
||||
<div class="btn" @click="close">关闭留言</div>
|
||||
<div class="btn reply" @click="reply">回复</div>
|
||||
</div>
|
||||
<u-modal
|
||||
v-model="show"
|
||||
:content="content"
|
||||
cancel-color="#2979ff"
|
||||
title=""
|
||||
:async-close="true"
|
||||
:show-cancel-button="true"
|
||||
@confirm="handleCloseMessage"
|
||||
@cancel="show = false"/>
|
||||
<back/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import back from '../../components/AiBack'
|
||||
import {mapState} from 'vuex'
|
||||
import AiImage from "../../components/AiImage";
|
||||
import UImage from "../../uview/components/u-image/u-image";
|
||||
|
||||
export default {
|
||||
name: 'casuallyaskDetail',
|
||||
components: {UImage, AiImage, back},
|
||||
props: {},
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
onLoad(options) {
|
||||
this.getDetail(options.id)
|
||||
},
|
||||
onShow() {
|
||||
this.$dict.load('leaveMessageStatus', 'leaveMessageType')
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
objdie: '', // id
|
||||
appLeaveMessageReplyList: [], //遍历得到的数据
|
||||
show: false, // 默认关闭模态框
|
||||
content: '关闭留言后，双方都无法再进行回复，是否确定关闭本次留言？',
|
||||
msgCode: null,
|
||||
imgList: [],
|
||||
detail: {}
|
||||
// images:[]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDetail(id = this.detail.id) {
|
||||
this.$http.post(`/app/appleavemessage/queryDetailById?id=${id}`,).then(res => {
|
||||
if (res?.data) {
|
||||
this.detail = res.data
|
||||
this.imgList = JSON.parse(this.detail.images)
|
||||
this.appLeaveMessageReplyList = res.data.appLeaveMessageReplyList.map(item => ({
|
||||
...item,
|
||||
images: JSON.parse(item.images).map(e => ({url: e.url || e?.file?.accessUrl, id: e.file?.id}))
|
||||
}))
|
||||
}
|
||||
})
|
||||
},
|
||||
// 关闭留言
|
||||
close() {
|
||||
this.show = true
|
||||
this.getDetail()
|
||||
},
|
||||
// 确定关闭留言
|
||||
handleCloseMessage() {
|
||||
this.$http.post(`/app/appleavemessage/release?id=${this.objdie}&status=2`).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.getDetail()
|
||||
uni.navigateTo({url: `./closemsg?flag=true`})
|
||||
}
|
||||
}).catch(() => {
|
||||
uni.navigateTo({url: `./closemsg?flag=false`})
|
||||
})
|
||||
this.show = false
|
||||
},
|
||||
// 去回复
|
||||
reply() {
|
||||
uni.navigateTo({url: `./reply?msgCode=${this.detail.msgCode}`})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.casuallyaskDetail {
|
||||
padding-bottom: 80px;
|
||||
|
||||
.detail {
|
||||
padding: 15px 32px 112px 32px;
|
||||
background-color: #fff;
|
||||
font-size: 30px;
|
||||
font-weight: 400;
|
||||
color: #343D65;
|
||||
|
||||
.headerTitle {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
line-height: 64px;
|
||||
letter-spacing: 2px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.leaveName_leavePhone {
|
||||
height: 56px;
|
||||
margin: 20px 0 36px 0;
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
border-radius: 50%;
|
||||
background-color: #2266ff;
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.leaveName {
|
||||
// display: block;
|
||||
margin-left: 20px;
|
||||
color: #343d65;
|
||||
}
|
||||
|
||||
// .leavePhone {
|
||||
// }
|
||||
}
|
||||
|
||||
.info-item {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 28px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.value {
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
// color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.content_text_img {
|
||||
margin-top: 64px;
|
||||
max-height: 700px;
|
||||
color: #000;
|
||||
font-size: 32px;
|
||||
// font-weight: 800;
|
||||
overflow: hidden;
|
||||
|
||||
.content_text {
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.reply_content {
|
||||
margin-top: 25px;
|
||||
|
||||
.reply_title {
|
||||
margin-top: 25px;
|
||||
width: 225px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
p {
|
||||
display: inline-block;
|
||||
color: #333;
|
||||
// font-weight: 800;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.reply_list {
|
||||
.item {
|
||||
.item_top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
|
||||
.item_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
border-radius: 50%;
|
||||
background-color: #2266ff;
|
||||
color: #fff;
|
||||
font-size: 23px;
|
||||
text-align: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.createUnitName {
|
||||
color: #135ab8;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.createUserName_createUnitName {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
.reply_font {
|
||||
width: 120px;
|
||||
color: #333333;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.createUserName {
|
||||
margin-bottom: 5px;
|
||||
color: #135ab8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item_right {
|
||||
font-size: 26px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.myreply_con {
|
||||
width: 570px;
|
||||
background-color: #f3f6f9;
|
||||
margin: 24px 0 0 80px;
|
||||
padding: 14px;
|
||||
|
||||
.myreply_text {
|
||||
overflow: auto;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.imageList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.AiImage {
|
||||
margin: 0 12px 12px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no_yes_reply {
|
||||
.con_title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-top: 16px;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
border-radius: 50%;
|
||||
background-color: #2266ff;
|
||||
color: #fff;
|
||||
font-size: 23px;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
// font-weight: 800;
|
||||
}
|
||||
|
||||
.my_reply {
|
||||
width: 370px;
|
||||
}
|
||||
|
||||
.right {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.myreply_content {
|
||||
width: 606px;
|
||||
height: 460px;
|
||||
background-color: #f3f6f9;
|
||||
margin: 24px 0 0 62px;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no_more {
|
||||
padding: 44px 0;
|
||||
color: #999;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.close_reply {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
height: 112px;
|
||||
width: 100%;
|
||||
border-top: 1px solid #ddd;
|
||||
z-index: 999;
|
||||
background: #fff;
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&.reply {
|
||||
background-color: #1365dd;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
78
src/pages/casuallyask/closemsg.vue
Normal file
78
src/pages/casuallyask/closemsg.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div class="closemsg">
|
||||
<img :src="imgSrc" alt="" />
|
||||
<text>{{ text }}</text>
|
||||
<u-button
|
||||
type="primary"
|
||||
:custom-style="{ width: '100%', borderRadius: '4px', marginTop: '48px' }"
|
||||
@click="goBack"
|
||||
>{{ btnText }}</u-button
|
||||
>
|
||||
<back></back>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import back from '../../components/AiBack'
|
||||
|
||||
export default {
|
||||
name: 'CloseMsg',
|
||||
components: { back },
|
||||
data() {
|
||||
return {
|
||||
flag: true
|
||||
}
|
||||
},
|
||||
onLoad(val) {
|
||||
if (val.flag) {
|
||||
this.flag = val.flag
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
uni.navigateBack({
|
||||
// url: `/pages/casuallyask/casuallyask`
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
text() {
|
||||
return this.flag ? '关闭留言成功！' : '关闭留言失败'
|
||||
},
|
||||
btnText() {
|
||||
return this.flag ? '确定' : '查看详情'
|
||||
},
|
||||
imgSrc() {
|
||||
return this.flag
|
||||
? this.imgOtherUrl + 'kztcg.png'
|
||||
: this.imgOtherUrl + 'kztsb.png'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.closemsg {
|
||||
min-height: 100%;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 96px;
|
||||
|
||||
img {
|
||||
width: 192px;
|
||||
height: 192px;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
color: #333333;
|
||||
line-height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
197
src/pages/casuallyask/reply.vue
Normal file
197
src/pages/casuallyask/reply.vue
Normal file
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div class="reply">
|
||||
<div class="reply_content">
|
||||
<span class="icon">*</span>
|
||||
<text class="msgfont">回复内容</text>
|
||||
<textarea :maxlength="500" placeholder="请输入内容(500字以内)" v-model="msg" class="textarea"></textarea>
|
||||
<!-- <u-input
|
||||
type="textarea"
|
||||
height="50"
|
||||
:auto-height="false"
|
||||
placeholder="请输入内容（500字以内）"
|
||||
placeholder-style="color:#999;"
|
||||
maxlength="500"
|
||||
v-model="msg"
|
||||
class="textarea"
|
||||
/> -->
|
||||
</div>
|
||||
<div class="reply_img">
|
||||
<text class="img">图片资料</text>
|
||||
<text class="img_text">(最多9张)</text>
|
||||
<div class="upload">
|
||||
<div class="info">
|
||||
<ai-uploader multiple @data="data" @change="change" :limit="9" action="/admin/file/add2"></ai-uploader>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ai-back/>
|
||||
<div class="submit">
|
||||
<button class="btn" @click="btn">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiUploader from '../../components/AiUploader'
|
||||
import AiBack from "../../components/AiBack";
|
||||
|
||||
export default {
|
||||
// name: '',
|
||||
// 组件
|
||||
components: {AiBack, AiUploader},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
msg: '',
|
||||
files: [],
|
||||
msgCode: '',
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.msgCode = options.msgCode
|
||||
},
|
||||
// 计算
|
||||
computed: {},
|
||||
// 监听
|
||||
watch: {},
|
||||
// 实例创建后
|
||||
onShow() {
|
||||
this.$dict.load('leaveMessageType').then(() => {
|
||||
this.dictList = this.$dict.getDict('leaveMessageType')
|
||||
})
|
||||
},
|
||||
// 实例渲染后
|
||||
mounted() {
|
||||
},
|
||||
// 方法
|
||||
methods: {
|
||||
data(e) {
|
||||
this.files.push(e)
|
||||
},
|
||||
// selectEventType(selecteds) {
|
||||
// this.eventType = selecteds?.[0]?.value
|
||||
// },
|
||||
change(e) {
|
||||
this.files = e
|
||||
},
|
||||
btn() {
|
||||
if (this.msg == '') {
|
||||
return uni.showToast({
|
||||
title: '请输入留言内容',
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
this.$http
|
||||
.post(`/app/appleavemessagereply/addOrUpdate`, {
|
||||
images: JSON.stringify(this.files),
|
||||
content: this.msg,
|
||||
msgCode: this.msgCode,
|
||||
userType: '1',
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/casuallyask/truemsg?flag=1`,
|
||||
})
|
||||
}
|
||||
}).catch(err => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/casuallyask/truemsg?flag=0`,
|
||||
})
|
||||
this.$u.toast(err || '网络异常')
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.reply {
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
.reply_content {
|
||||
height: 288px;
|
||||
padding: 0 20px 0 20px;
|
||||
background-color: #fff;
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
font-size: 42px;
|
||||
vertical-align: middle;
|
||||
color: red;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.msgfont {
|
||||
// overflow: auto;
|
||||
// word-wrap: break-word;
|
||||
// word-break: break-all;
|
||||
display: inline-block;
|
||||
width: 226px;
|
||||
height: 44px;
|
||||
margin-top: 34px;
|
||||
line-height: 44px;
|
||||
font-size: 32px;
|
||||
// font-weight: 800;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
height: 190px;
|
||||
width: 700px;
|
||||
// overflow: auto;
|
||||
// word-wrap: break-word;
|
||||
// word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.reply_img {
|
||||
margin-top: 20px;
|
||||
background-color: #fff;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.img {
|
||||
display: inline-block;
|
||||
margin-top: 20px;
|
||||
font-size: 32px;
|
||||
// font-weight: 800;
|
||||
}
|
||||
|
||||
.img_text {
|
||||
font-size: 32px;
|
||||
color: #999;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.upload {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
padding: 12px 12px 12px 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.info {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
::v-deep .ai-uploader .fileList .default {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submit {
|
||||
padding: 50px 32px;
|
||||
|
||||
.btn {
|
||||
background-color: #1365dd;
|
||||
color: #fff;
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
75
src/pages/casuallyask/truemsg.vue
Normal file
75
src/pages/casuallyask/truemsg.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="closemsg">
|
||||
<img :src="imgSrc" alt=""/>
|
||||
<text>{{ text }}</text>
|
||||
<u-button
|
||||
type="primary"
|
||||
:custom-style="{ width: '100%', borderRadius: '4px', marginTop: '48px' }"
|
||||
@click="goBack"
|
||||
>{{ btnText }}
|
||||
</u-button>
|
||||
<back></back>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import back from '../../components/AiBack'
|
||||
|
||||
export default {
|
||||
name: 'CloseMsg',
|
||||
components: {back},
|
||||
data() {
|
||||
return {
|
||||
flag: true
|
||||
}
|
||||
},
|
||||
onLoad(val) {
|
||||
this.flag = val?.flag == 1
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
uni.navigateBack({
|
||||
delta: 2
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
text() {
|
||||
return this.flag ? '提交成功！' : '处理失败'
|
||||
},
|
||||
btnText() {
|
||||
return this.flag ? '查看详情' : '我知道了'
|
||||
},
|
||||
imgSrc() {
|
||||
return this.flag
|
||||
? this.imgOtherUrl + 'kztcg.png'
|
||||
: this.imgOtherUrl + 'kztsb.png'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.closemsg {
|
||||
min-height: 100%;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 96px;
|
||||
|
||||
img {
|
||||
width: 192px;
|
||||
height: 192px;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
color: #333333;
|
||||
line-height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user