xinelu-applet-ui/pagesB/Serviceevaluation/Serviceevaluation.vue
2024-01-03 17:03:57 +08:00

736 lines
15 KiB
Vue

<template>
<view class="app">
<view class="myorder titles" @tap="expertOrder">
<view class="title">
<image mode="" :src="require('../images/updata.png')"></image>
我的评价
</view>
<view class="righttitle">
<image src="../../static/huijiantou.png" mode=""></image>
</view>
</view>
<view class="" v-if="total >0">
<view class="orderitem" v-for="(item,index) in evaluatedata">
<view class="tiemitem">
</view>
<view class="details">
<image src="../../static/headsculpture.png" mode="" v-if="item.orderType== 'FAMILY_DOCTOR' ">
</image>
<image :src="baseurl+item.pictureUrl" mode="" v-if="item.orderType== 'INTEGRAL_EXCHANGE' || item.orderType== 'DIRECT_BUY' || item.orderType== 'APPOINTMENT_ORDER'" ></image>
<image :src="baseurl+item.personPictureUrl" mode="" v-if="item.orderType== 'HEALTH_CONSULTATION'" ></image>
</image>
<!-- <image :src="baseurl+item.pictureUrl" mode="" v-else></image> -->
<view class="ppointment">
<view class="doctorname">
<span>{{item.orderName}}</span>
</view>
<view class="reservation">
<span>{{item.createTime}}</span>
</view>
</view>
</view>
<view class="bottom">
<span @tap="healthratenurse(item)">未评价</span>
</view>
</view>
</view>
<view class="noorder" v-else>
<u-empty mode="order" icon-size='220' text="暂无数据"></u-empty>
</view>
<!-- 家医模块 评价 -->
<u-popup v-model="evaluateshow" mode="bottom" length="45%" border-radius="30" :closeable='true'>
<view class="evaluateserver">
立即评价
</view>
<view class="star">
<view class="evaluatstar">
<span>评分</span>
<u-rate size="50" active-color="#FFA115" inactive-color="#b2b2b2" gutter="20"
v-model="list.compositeScore"></u-rate>
</view>
</view>
<view class="star">
<view class="evaluatstar">
<span>评价</span>
<u-input v-model="list.evaluateContent" type="textarea" placeholder="请输入" />
</view>
</view>
<view class="submits">
<span @tap="cancel()">取消</span>
<span @tap="submit()">提交</span>
</view>
</u-popup>
<u-popup v-model="evaluatenurse" mode="bottom" length="50%" border-radius="20" :closeable='true' class='masks'>
<view class="title">
综合评价
</view>
<view class="mask">
<u-rate :count="5" v-model="rateval" :size='70' active-color='#F4EA2A'></u-rate>
</view>
<view class="rateitem">
{{rateval==5?'非常满意':''}}
{{rateval==4?'满意':''}}
{{rateval==3?'一般':''}}
{{rateval==2?'差':''}}
{{rateval==1?'非常差':''}}
</view>
<view class="btn" @tap="submit()">
确认
</view>
</u-popup>
<u-toast ref="uToast" />
</view>
</template>
<script>
import {
getAppletOrderList,
addAppointmentEvaluate,
insertGoodsEvaluate,
} from '@/api/pagesB/Serviceevaluation/Serviceevaluation.js'
import {
add
} from '@/api/pagesC/servicerecord/servicerecord.js'
import baseurl from '@/api/baseurl.js'
export default {
data() {
return {
baseurl:'',
evaluateshow: false, //家医评价
evaluatenurse: false, //护理站评价
parentId: '',
orderStatus: 'NOT_EVALUATED', //状态
evaluatedata: {}, //列表
total: 0,
cardNo: '', //身份证号
region: '', //地区
pageNum: 1,
pageSize: 20,
userinfo: '',
rateval: 0, //评价星棵树
list: {
compositeScore: '',
evaluateContent: '',
patientId: '',
openId: '',
orderNo: '',
evaluateChannel: 'WE_CHAT_APPLET',
},
openId: '',
orderType: '',
orderSource:'',
}
},
onShow() {
this.userinfo = uni.getStorageSync('userinfo');
this.cardNo = this.userinfo.cardNo;
this.parentId = this.userinfo.id;
this.region = uni.getStorageSync('region');
this.openId = uni.getStorageSync('openid');
// console.log(this.openId, '999')
// this.cardNo = '371402199404167019';
// this.cardNo = '372926199812187720';
// this.parentId = '83';
this.getlist();
},
onLoad(options) {
// this.list.patientId = uni.getStorageSync('patientId');
this.baseurl = baseurl;
},
onReachBottom() { //下滑加载
if (this.evaluatedata.length >= this.total) {
} else {
this.pageNum++
getAppletOrderList(this.parentId, this.orderStatus, this.cardNo, this.region, this.pageNum, this
.pageSize).then(res => {
if (res.rows) {
res.rows.forEach(e => {
this.evaluatedata.push(e)
this.total = res.total
})
}
})
}
},
watch: { //监听
rateval() {
if (this.rateval == 5) {
this.evaluateSatisfaction = 'VERYSATISFIED'
} else if (this.rateval == 4) {
this.evaluateSatisfaction = 'SATISFIED'
} else if (this.rateval == 3) {
this.evaluateSatisfaction = 'COMMONLY'
} else if (this.rateval == 2) {
this.evaluateSatisfaction = 'DISSATISFIED'
} else if (this.rateval == 1) {
this.evaluateSatisfaction = 'VERYDISSATISFIED'
}
},
},
methods: {
//商城评价
rate(item) {
uni.navigateTo({
url: `/pagesB/evaluate/evaluate?item=${JSON.stringify(item)}&delta=${1}`
})
},
// 护理站评价
ratenurse() {
this.evaluatenurse = true;
},
// 未评价
healthratenurse(item) {
console.log(item, '58')
if (item.orderSource == 'FAMILY_DOCTOR') {
this.orderSource = 'FAMILY_DOCTOR'
} else if (item.orderSource == 'SPRING_DOCTOR') {
this.orderSource = 'SPRING_DOCTOR'
}
// 家医模块立即评价
if (item.orderType == "FAMILY_DOCTOR") {
this.evaluateshow = true;
}
// 健康咨询、护理服务满意度
if (item.orderType == "HEALTH_CONSULTATION" || item.orderType == "APPOINTMENT_ORDER") {
this.evaluatenurse = true;
}
// 商品积分兑换、直接购买
if (item.orderType == "INTEGRAL_EXCHANGE" || item.orderType == "DIRECT_BUY") {
uni.navigateTo({
url: `/pagesB/evaluate/evaluate?item=${JSON.stringify(item)}&delta=${1}`
// url: `/pagesB/goodsorderRate/goodsorderRate?item=${JSON.stringify(item)}&delta=${1}`
})
}
this.orderType = item.orderType
this.list.orderNo = item.orderNo
// this.list.evaluateChanne = 'WE_CHAT_APPLET'
},
// 提交评价
submit() {
this.list.patientId = this.parentId
this.list.openId = uni.getStorageSync('openid')
console.log(this.list, '45')
if (this.orderType == "HEALTH_CONSULTATION" || this.orderType == "INTEGRAL_EXCHANGE" || this.orderType ==
"DIRECT_BUY" || this.orderType == "FAMILY_DOCTOR") {
// this.list.evaluateSatisfaction=this.evaluateSatisfaction
this.list.compositeScore=this.rateval
this.list.orderSource=this.orderSource
insertGoodsEvaluate(this.list).then(res => {
if (res.code == 200) {
this.$refs.uToast.show({
title: '评价成功',
type: 'success',
duration: '1500'
})
this.cancel();
this.getlist();
} else if (res.code == 500) {
this.$refs.uToast.show({
title: res.msg,
type: 'error',
duration: '1500'
})
}
})
// 满意度
} else if (this.orderType == "APPOINTMENT_ORDER") {
var obj = {
"patientId": this.list.patientId,
"openid": uni.getStorageSync('openid'),
"orderNo": this.list.orderNo,
"evaluateChannel": "WE_CHAT_APPLET",
"evaluateSatisfaction": this.evaluateSatisfaction,
"orderSource": this.orderSource,
"compositeScore": this.rateval,
}
addAppointmentEvaluate(obj).then(res => {
if (res.code == 200) {
this.$refs.uToast.show({
title: '评价成功',
type: 'success',
duration: '1500'
})
this.cancel();
// this.evaluatenurse =false;
this.getlist();
} else if (res.code == 500) {
this.$refs.uToast.show({
title: res.msg,
type: 'error',
duration: '1500'
})
}
})
}
},
// 取消
cancel() {
this.evaluateshow = false;
this.evaluatenurse = false;
},
// 列表
getlist() {
getAppletOrderList(this.parentId, this.orderStatus, this.cardNo, this.region, this.pageNum, this
.pageSize).then(res => {
this.evaluatedata = res.rows
this.total = res.total
})
},
// 跳转我的评价
expertOrder() {
uni.navigateTo({
url: '/pagesB/myevaluation/myevaluation'
})
},
},
}
</script>
<style lang="scss">
.app {
height: 100vh;
background-color: #F7F5F5;
padding: 30rpx 0 0 0;
.noorder {
margin-top: 20%;
}
.myorder {
position: relative;
background: #fff;
height: 73rpx;
width: 96%;
left: 50%;
transform: translateX(-50%);
.orderStatus {
text-align: center;
margin: 60rpx auto 30rpx;
width: 90%;
display: flex;
justify-content: space-around;
padding-bottom: 30rpx;
.item {
width: 25%;
.text {
font-size: 26rpx;
color: #333333;
margin-top: 10rpx;
}
image {
width: 70rpx;
height: 60rpx;
}
}
}
.righttitle {
font-size: 26rpx;
color: #969494;
position: absolute;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 30rpx;
image {
vertical-align: middle;
padding-left: 20rpx;
width: 13rpx;
height: 23rpx;
display: inline-block;
}
}
.title {
margin-left: 30rpx;
font-size: 32rpx;
color: #4B4B4B;
position: absolute;
top: 50%;
transform: translateY(-50%);
image {
/* vertical-align: middle; */
/* padding-left: 20rpx; */
width: 32rpx;
height: 32rpx;
/* display: inline-block; */
/* margin-top: 11rpx; */
margin-right: 20rpx;
position: relative;
top: 7rpx;
}
}
}
.orderitem {
width: 96%;
height: 383rpx;
background: #FFFFFF;
box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
border-radius: 5rpx;
margin: 20rpx auto;
position: relative;
margin-bottom: 20rpx;
.tiemitem {
width: 92%;
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #000000;
position: absolute;
// background: red;
left: 35rpx;
top: 30rpx;
span:nth-child(2) {
margin-left: 20rpx;
}
span:nth-child(3) {
display: inline-block;
position: absolute;
right: 0;
font-weight: 500;
color: #26A888;
}
}
.details {
width: 96%;
height: 200rpx;
// background-color: #26A888;
position: absolute;
top: 97rpx;
left: 50%;
transform: translateX(-50%);
image {
width: 180rpx;
height: 180rpx;
border-radius: 5rpx;
position: absolute;
}
.ppointment {
// background: red;
position: absolute;
width: 71%;
height: 100%;
right: 0;
overflow: auto;
.doctorname {
font-family: Source Han Sans CN;
font-weight: 600;
color: #333333;
margin-top: 53rpx;
height: 74rpx;
overflow: auto;
span:nth-child(1) {
font-size: 28rpx;
overflow: hidden;
text-overflow: ellipsis;
}
span:nth-child(2) {
display: inline-block;
position: absolute;
font-size: 28rpx;
right: 0;
font-family: Source Han Sans CN;
font-weight: 500;
color: #333333;
}
}
.reservation {
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #959595;
position: absolute;
top: 61%;
}
}
}
.bottom {
position: absolute;
width: 96%;
height: 20%;
bottom: 4%;
font-size: 28rpx;
font-family: Source Han Sans CN;
span:nth-child(1) {
line-height: 30px;
width: 169rpx;
height: 61rpx;
background: #26A888;
border-radius: 5rpx;
display: inline-block;
font-size: 28rpx;
font-weight: 400;
color: #FFFFFF;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
}
}
.evaluateserver {
width: 100%;
font-size: 38rpx;
color: #000000;
line-height: 120rpx;
font-weight: 400;
text-align: center;
::v-deep .u-close {
top: 8% !important;
}
}
.star {
position: relative;
left: 11%;
height: 80rpx;
margin-bottom: 40rpx;
.evaluatstar {
::v-deep .u-rate {
position: absolute !important;
left: 14% !important;
top: 50%;
transform: translateY(-50%);
}
::v-deep .u-input__textarea {
background: #F6F6F6;
height: 200rpx !important;
}
::v-deep .u-input {
width: 66% !important;
height: 171rpx;
position: absolute;
left: 16%;
}
font-family: Source Han Sans CN;
span:nth-child(1) {
position: absolute;
display: inline;
font-size: 36rpx;
color: #000000;
font-weight: 400;
letter-spacing: 0.2em;
top: 50%;
transform: translateY(-50%);
}
span:nth-child(2) {
position: absolute;
display: inline-block;
}
}
}
.submits {
font-family: Source Han Sans CN;
font-size: 31rpx;
position: relative;
display: flex;
justify-content: space-around;
top: 23%;
text-align: center;
span:nth-child(1) {
display: inline-block;
width: 290rpx;
height: 62rpx;
line-height: 62rpx;
background: #FFFFFF;
border: 1px solid #26A888;
border-radius: 5rpx;
font-weight: 500;
color: #26A888;
}
span:nth-child(2) {
width: 290rpx;
height: 62rpx;
line-height: 62rpx;
background: #26A888;
border-radius: 5rpx;
font-weight: 500;
color: #FFFFFF;
display: inline-block;
}
}
.evaluate {
width: 100%;
font-size: 38rpx;
color: #000000;
line-height: 120rpx;
text-align: center;
::v-deep .u-close {
top: 8% !important;
}
}
.starnurse {
position: relative;
top: 15%;
left: 11%;
span {
display: block;
font-size: 36rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
margin-top: 5%;
letter-spacing: 0.2em;
}
}
.submitsnurse {
position: relative;
width: 496rpx;
height: 61rpx;
line-height: 61rpx;
background: #26A888;
border-radius: 5rpx;
text-align: center;
font-size: 31rpx;
font-family: Source Han Sans CN;
font-weight: 500;
color: #FFFFFF;
top: 35%;
left: 50%;
transform: translateX(-50%);
}
.masks {
image {
position: absolute;
top: 50rpx;
left: 50%;
transform: translateX(-50%);
z-index: 999;
width: 250rpx;
border-radius: 25rpx;
height: 250rpx;
}
.ratetitle {
font-size: 34rpx;
position: absolute;
top: 320rpx;
left: 50%;
transform: translateX(-50%);
z-index: 999;
}
.title {
position: absolute;
top: 40rpx;
left: 50%;
transform: translateX(-50%);
font-size: 42rpx;
}
::v-deep .u-star-wrap {
padding-right: 10rpx;
}
.mask {
position: absolute;
top: 200rpx;
left: 70rpx;
}
.btn {
width: 70%;
height: 71rpx;
background: #26A888;
border-radius: 26rpx;
position: absolute;
top: 530rpx;
left: 15%;
text-align: center;
line-height: 71rpx;
color: #fff;
}
.rateitem {
position: absolute;
top: 350rpx;
left: 80rpx;
font-size: 42rpx;
}
}
}
</style>