企微端详情已调整
This commit is contained in:
aixianling
@@ -13,7 +13,7 @@
|
||||
<div class="header-middle">
|
||||
<div class="titles">{{ data.content }}</div>
|
||||
|
||||
<span class="status status0" :class="data.eventStatus == 0 ? 'status0' : data.eventStatus == 1 ? 'status1' : data.eventStatus == 2 ? 'status2' : 'status3'" v-if="data.eventStatus"> {{ $dict.getLabel('clapEventStatus', data.eventStatus) }}</span>
|
||||
<span class="status status0" :class="detailStatus.cls" v-if="data.eventStatus"> {{ detailStatus.label }}</span>
|
||||
|
||||
<div class="card">
|
||||
<span class="card-left">事件类型</span>
|
||||
@@ -51,7 +51,7 @@
|
||||
<span class="card-left" style="color:#999">照片</span>
|
||||
</div>
|
||||
|
||||
<img :src="item.url" alt="" v-for="(item, i) in data.files" :key="i" @click="previewImage(data.files, item.url)" />
|
||||
<img :src="item.url" alt="" v-for="(item, i) in data.files" :key="i" @click="previewImage(data.files, item.url)"/>
|
||||
</div>
|
||||
|
||||
<div class="header-bottom">
|
||||
@@ -60,40 +60,30 @@
|
||||
<div class="plan">
|
||||
<div class="nav">
|
||||
<span>办理进度</span>
|
||||
<span> ({{ $dict.getLabel('clapEventStatus', data.eventStatus) }})</span>
|
||||
<span> ({{ detailStatus.label }})</span>
|
||||
</div>
|
||||
|
||||
<div class="cards" v-for="(item, index) in data.processList" :key="index">
|
||||
<div class="cards" v-for="(item, index) in process" :key="index">
|
||||
<div class="cardss">
|
||||
<div class="cardss-left">
|
||||
<span>
|
||||
<!-- {{ item.systemExplain }} -->
|
||||
{{ item.girdMemberName && item.girdMemberName.substring(item.girdMemberName.length, item.girdMemberName.length - 2) }}
|
||||
</span>
|
||||
|
||||
<!-- <img src="./components/1.png" class="avatarIcon" alt="" /> -->
|
||||
<span v-text="item.avatar"/>
|
||||
</div>
|
||||
|
||||
<div class="cardss-right">
|
||||
<div class="cardsss-right-left">
|
||||
<div class="cardssss-right-left-top">
|
||||
<span>{{ item.systemExplain }}</span>
|
||||
<div style="color: #2ea222; font-size: 16px; margin-top: 5px">
|
||||
{{ $dict.getLabel('clapDoStatus', item.doStatus) }}
|
||||
</div>
|
||||
<span v-text="item.systemExplain"/>
|
||||
<div style="color: #2ea222; font-size: 16px; margin-top: 5px" v-text="item.statusLabel"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cardees-right-right">{{ item.doTime }}</div>
|
||||
</div>
|
||||
|
||||
<div class="lines"></div>
|
||||
<div class="lines"/>
|
||||
</div>
|
||||
|
||||
<div class="cardes-msg-top" v-if="item.doExplain">{{ item.doExplain }}</div>
|
||||
|
||||
<div class="imgs">
|
||||
<img :src="e.url" alt="" v-for="(e, index) in item.files" :key="index" @click="previewImage(item.files, e.url)" />
|
||||
<img :src="e.url" alt="" v-for="(e, index) in item.files" :key="index" @click="previewImage(item.files, e.url)"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -116,24 +106,53 @@
|
||||
|
||||
<div class="endDoIt" v-if="data.eventStatus == 1 && data.rightType == 0" @click="toContent(3)">前往办理</div>
|
||||
</div>
|
||||
|
||||
<AiEvaluation v-show="false" v-model="evaluation" :bid="data.id"/>
|
||||
<u-modal v-model="doItShow" :mask-close-able="true" z-index="99" content="确定受理该事件?" :show-cancel-button="true" @confirm="doThings"></u-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiEvaluation from "../../components/AiEvaluation";
|
||||
|
||||
export default {
|
||||
name: 'Detail',
|
||||
components: {},
|
||||
components: {AiEvaluation},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
data: {},
|
||||
id: '',
|
||||
doItShow: false,
|
||||
evaluation: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
detailStatus: v => {
|
||||
const status = !v.evaluation.id ? v.data.eventStatus : 'evaluation'
|
||||
return {
|
||||
cls: 'status' + status,
|
||||
label: !v.evaluation.id ? v.$dict.getLabel('clapEventStatus', v.data.eventStatus) : "已评价"
|
||||
}
|
||||
},
|
||||
process() {
|
||||
const getAvatar = str => str?.substring(str?.length, str?.length - 2)
|
||||
const list = this.data.processList.map(e => ({
|
||||
...e,
|
||||
avatar: getAvatar(e.girdMemberName),
|
||||
statusLabel: this.$dict.getLabel('clapDoStatus', e.doStatus)
|
||||
}))
|
||||
if (this.evaluation.id) {
|
||||
const {id, createUserName, score, createTime: doTime, content: doExplain} = this.evaluation
|
||||
list.splice(0, 0, {
|
||||
id, doTime, doExplain,
|
||||
statusLabel: `${score}星评价`,
|
||||
avatar: getAvatar(createUserName),
|
||||
systemExplain: `${createUserName}完成评价`
|
||||
})
|
||||
}
|
||||
return list
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
onLoad(o) {
|
||||
this.id = o.id
|
||||
@@ -158,7 +177,7 @@ export default {
|
||||
},
|
||||
|
||||
callPhone(phone) {
|
||||
uni.makePhoneCall({ phoneNumber: phone })
|
||||
uni.makePhoneCall({phoneNumber: phone})
|
||||
},
|
||||
|
||||
doThings() {
|
||||
@@ -170,7 +189,7 @@ export default {
|
||||
},
|
||||
|
||||
toContent(status) {
|
||||
uni.navigateTo({ url: `./Content?status=${status}&groupId=${this.data.groupId}&groupName=${this.data.groupName}&id=${this.id}` })
|
||||
uni.navigateTo({url: `./Content?status=${status}&groupId=${this.data.groupId}&groupName=${this.data.groupName}&id=${this.id}`})
|
||||
},
|
||||
previewImage(images, img) {
|
||||
uni.previewImage({
|
||||
@@ -186,6 +205,7 @@ export default {
|
||||
uni-page-body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.Detail {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
@@ -194,6 +214,7 @@ uni-page-body {
|
||||
display: flex;
|
||||
margin: 26px 0 14px 0;
|
||||
padding: 0 32px;
|
||||
|
||||
.avatars {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
@@ -206,11 +227,13 @@ uni-page-body {
|
||||
font-weight: 500;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.right {
|
||||
.names {
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.times {
|
||||
margin-top: 10px;
|
||||
font-size: 28px;
|
||||
@@ -221,6 +244,7 @@ uni-page-body {
|
||||
|
||||
.header-middle {
|
||||
padding: 0 32px 10px 32px;
|
||||
|
||||
.titles {
|
||||
margin: 32px 0;
|
||||
line-height: 1.4;
|
||||
@@ -228,6 +252,7 @@ uni-page-body {
|
||||
font-size: 40px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: inline-block;
|
||||
margin-bottom: 14px;
|
||||
@@ -236,11 +261,12 @@ uni-page-body {
|
||||
color: #ffffff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.status0 {
|
||||
background: #ff883c;
|
||||
}
|
||||
|
||||
.status1 {
|
||||
.status1, .statusevaluation {
|
||||
background: #1aaaff;
|
||||
}
|
||||
|
||||
@@ -257,13 +283,16 @@ uni-page-body {
|
||||
justify-content: space-between;
|
||||
padding: 34px 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
.card-left {
|
||||
width: 46%;
|
||||
font-size: 32px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.card-right {
|
||||
font-size: 32px;
|
||||
|
||||
.u-icon {
|
||||
margin-left: 8px;
|
||||
}
|
||||
@@ -283,6 +312,7 @@ uni-page-body {
|
||||
height: 226px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
img:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
@@ -290,6 +320,7 @@ uni-page-body {
|
||||
|
||||
.header-bottom {
|
||||
padding-bottom: 80px;
|
||||
|
||||
.line {
|
||||
height: 16px;
|
||||
background: #f3f6f9;
|
||||
@@ -297,6 +328,7 @@ uni-page-body {
|
||||
|
||||
.plan {
|
||||
padding: 0 32px;
|
||||
|
||||
.nav {
|
||||
padding: 26px 0;
|
||||
}
|
||||
@@ -304,6 +336,7 @@ uni-page-body {
|
||||
.cards {
|
||||
position: relative;
|
||||
padding-bottom: 80px;
|
||||
|
||||
.cardss {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -333,10 +366,12 @@ uni-page-body {
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
.cardss-right {
|
||||
width: calc(100% - 110px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.cardsss-right-left {
|
||||
.cardssss-right-left-top {
|
||||
width: 300px;
|
||||
@@ -344,17 +379,20 @@ uni-page-body {
|
||||
text-overflow: ellipsis;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.cardssss-right-left-bottom {
|
||||
margin-top: 10px;
|
||||
font-size: 28px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.cardees-right-right {
|
||||
font-size: 28px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.lines {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -364,6 +402,7 @@ uni-page-body {
|
||||
background: #eeeeee;
|
||||
}
|
||||
}
|
||||
|
||||
.cardes-msg-top {
|
||||
font-size: 28px;
|
||||
color: #343d65;
|
||||
@@ -374,17 +413,20 @@ uni-page-body {
|
||||
.imgs {
|
||||
margin-top: 10px;
|
||||
margin-left: 110px;
|
||||
|
||||
img {
|
||||
width: 136px;
|
||||
height: 136px;
|
||||
border-radius: 4px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
img:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cards:last-child {
|
||||
.lines {
|
||||
width: 0;
|
||||
@@ -401,6 +443,7 @@ uni-page-body {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
z-index: 999;
|
||||
|
||||
.status00 {
|
||||
display: flex;
|
||||
|
||||
@@ -411,19 +454,23 @@ uni-page-body {
|
||||
width: 22%;
|
||||
padding: 16px 0;
|
||||
border-top: 1px solid #ddd;
|
||||
|
||||
img {
|
||||
width: 44px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin-top: 4px;
|
||||
font-size: 28px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.border-r {
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.doIt {
|
||||
width: 56%;
|
||||
background: #3975c6;
|
||||
|
||||
81
src/components/AiEvaluation.vue
Normal file
81
src/components/AiEvaluation.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<section class="AiEvaluation">
|
||||
<AiPagePicker v-if="type=='submit'&&!hasEvaluated" type="custom" :ops="ops" nodeKey="">
|
||||
<slot v-if="$slots.default"/>
|
||||
<div v-else v-text="placeholder"/>
|
||||
</AiPagePicker>
|
||||
<div v-if="type=='show'">
|
||||
<slot v-if="$slots.default"/>
|
||||
<AiGroup description no-border labelColor="#999" v-else>
|
||||
<AiItem label="评级分数">
|
||||
<u-rate v-model="detail.score" disabled inactive-icon="star-fill" active-color="#F8B425"/>
|
||||
{{ detail.rateText || "" }}
|
||||
</AiItem>
|
||||
<AiItem label="评价详情" top-label>
|
||||
<div v-html="detail.content"/>
|
||||
</AiItem>
|
||||
<AiItem label="附件" top-label>
|
||||
<AiUploader :def="detail.files" disabled/>
|
||||
</AiItem>
|
||||
</AiGroup>
|
||||
</div>
|
||||
<slot name="finish" v-if="$slots.finish"/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiPagePicker from "./AiPagePicker";
|
||||
import AiGroup from "./AiGroup";
|
||||
import AiItem from "./AiItem";
|
||||
import AiUploader from "./AiUploader";
|
||||
|
||||
export default {
|
||||
name: "AiEvaluation",
|
||||
model: {
|
||||
prop: "info",
|
||||
event: "input"
|
||||
},
|
||||
props: {
|
||||
info: {default: () => ({})},
|
||||
placeholder: {default: "去评价"},
|
||||
bid: {default: ""},
|
||||
type: {default: "submit"} //可选值: submit:提交评价,show:展示评价
|
||||
},
|
||||
components: {AiUploader, AiItem, AiGroup, AiPagePicker},
|
||||
computed: {
|
||||
isShow: v => v.type == 'show',
|
||||
hasEvaluated: v => !!v.detail?.id
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
detail: {},
|
||||
ops: {
|
||||
rateTexts: ['非常不满意', '不满意', '一般', '满意', '非常满意'],
|
||||
url: "/components/pages/submitEvaluation?bid=" + this.bid
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
bid: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.getDetail()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDetail() {
|
||||
const bizId = this.bid
|
||||
bizId && this.$http.post("/app/appbusinesscompletionevaluation/queryMyEvaluationByBizId", null, {
|
||||
params: {bizId}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
const info = res.data?.[0]
|
||||
this.detail = {...info, rateText: this.rateTexts?.[info.score - 1]}
|
||||
this.$emit("input", this.detail)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
62
src/components/pages/submitEvaluation.vue
Normal file
62
src/components/pages/submitEvaluation.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<section class="submitEvaluation">
|
||||
<AiGroup>
|
||||
<AiItem label="评价分数" top-label required>
|
||||
<u-rate v-model="form.score" :size="64" active-color="#F8B425" :min-count="1" inactive-icon="star-fill"/>
|
||||
</AiItem>
|
||||
</AiGroup>
|
||||
<u-gap height="24"/>
|
||||
<AiGroup>
|
||||
<AiItem label="评价详情" top-label required>
|
||||
<u-input type="textarea" v-model="form.content" placeholder="请简要描述..."/>
|
||||
</AiItem>
|
||||
</AiGroup>
|
||||
<u-gap height="24"/>
|
||||
<AiGroup>
|
||||
<AiItem label="附件" top-label>
|
||||
<AiUploader v-model="form.files" :limit="9" multiple/>
|
||||
</AiItem>
|
||||
</AiGroup>
|
||||
<div class="fixed-bottom">
|
||||
<div class="bottomBtn" @click="submit">提交</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "submitEvaluation",
|
||||
appName: "提交评价",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
files: []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
if (!this.form.score) {
|
||||
return this.$u.toast("请选择评价分数!")
|
||||
}
|
||||
if (!this.form.content) {
|
||||
return this.$u.toast("请填写评价详情!")
|
||||
}
|
||||
this.$http.post("/app/appbusinesscompletionevaluation/addOrUpdate", this.form).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.$u.toast("提交成功!")
|
||||
setTimeout(() => uni.navigateBack({}), 1500)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
onLoad(params) {
|
||||
this.form.bizId = params.bid
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.submitEvaluation {
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user