uniapp多端评价页

如图所示：评价页

<template><view><!-- 顶部 --><view class="evaluate_head"><image class="headBg" src="@/static/evaluate/head.png" mode=""></image><view class="headZindexbox"><image class="icon" src="@/static/evaluate/[e-mail]" mode=""></image><view class="text">提交评价或建议，鼓励技师和平台做得更好～</view></view></view><!-- 评价 --><view class="evearNox"><view class="evearHead"><view class="label">您对技师满意吗?</view><view class="text">已对技师匿名</view></view><!-- 技师信息 --><view class="userBox"><image class="logo" src="@/static/logo.png" mode=""></image><view class="userContent"><view class="username">王慧娟</view><view class="userText">2024.01.13 15:30:10完成服务</view></view></view><!-- 选择 --><view class="checkBox"><view class="checkLabel" v-for="(item,index) in checkList" :key="index" @click="getItem(item,index)":class="item.active?'textActive':''"><view class="text"><image class="icon" v-if="index==0&&!item.active" src="@/static/evaluate/icon_ku.png"></image><image class="icon" v-else-if="index==1&&!item.active" src="@/static/evaluate/icon_xiao.png"></image><image class="icon" v-else-if="index==0&&item.active" src="@/static/evaluate/icon_kued.png"></image><image class="icon" v-else-if="index==1&&item.active" src="@/static/evaluate/icon_xiaoed.png"></image>{{item.title}}</view></view></view><!-- 不满意 --><view v-if="checkid==0"><view class="errorText">“请选择原因，我们会督促技师”</view><view class="labeList" ><view class="label" v-for="(item,index) in dissatisLabelList" @click="getLabelItem(item,index,0)":class="item.actived?'actived':''">{{item.title}}</view></view><view class="feekContent"><view class="feekText"><u--textarea class="feekTexts" v-model="evealBase.remark" maxlength="100" border="0"placeholder="您的反馈会督促我们做的更好" height="85"></u--textarea></view><view class="z-lists z-bottom"><view class="list-value" style="position: relative;"></view><view class="moreNumber"><view class="text">{{evealBase.remark.length}}</view>/100</view></view></view></view><!-- end --><!-- 满意 --><view class="labeList" v-else-if="checkid==1"><view class="label" v-for="(item,index) in satisLabelList" @click="getLabelItem(item,index,1)":class="item.actived?'actived':''">{{item.title}}</view></view><!-- end --></view><!-- 评分 --><view class="rateBox" v-if="checkid==0"><view class="label">服务评分</view><view class="rate-content"><u-rate class="rates" active-color="#FFBF00" inactive-color="#E9E9E9" gutter="10" size="50rpx":value="evealBase.satisfied" @change="geSatisRates"></u-rate><view class="text" v-if="evealBase.satisfied==1">非常差</view><view class="text" v-else-if="evealBase.satisfied==2">差</view><view class="text" v-else-if="evealBase.satisfied==3">一般</view><view class="text" v-else-if="evealBase.satisfied==4">满意</view><view class="text" v-else-if="evealBase.satisfied==5">非常满意</view></view></view><view class="rateBox" v-if="checkid==1"><view class="label">服务评分</view><view class="rate-content"><u-rate class="rates" active-color="#FFBF00" inactive-color="#E9E9E9" gutter="10" size="50rpx":value="evealBase.satisfied" @change="geSatisRates"></u-rate><view class="text" v-if="evealBase.satisfied==1">非常差</view><view class="text" v-else-if="evealBase.satisfied==2">差</view><view class="text" v-else-if="evealBase.satisfied==3">一般</view><view class="text" v-else-if="evealBase.satisfied==4">满意</view><view class="text" v-else-if="evealBase.satisfied==5">非常满意</view></view></view><!-- end --><!-- 提交 --><view class="feedBottom"><view class="submit" @click="getSubmit">提交评价</view></view><!-- end --></view>
</template><script>import {toast,showConfirm,tansParams,} from '@/utils/common'export default {data() {return {evealBase: {satisfied: 0,remark:""},checkList: [{title: "不满意"}, {title: "满意"}],checkid: "",satisLabelList: [{title: "性价比高",}, {title: "服装整洁",}, {title: "热情礼貌",}, {title: "手法专业",}, {title: "服务态度好",}, {title: "很有耐心",}, {title: "素质高",}, {title: "相当专业",}, {title: "非常棒",}],dissatisLabelList: [{title: "性价比高",}, {title: "服装整洁",}, {title: "热情礼貌",}, {title: "手法专业",}, {title: "服务态度好",}, {title: "很有耐心",}, {title: "素质高",}, {title: "相当专业",}, {title: "非常棒",}],}},methods: {/*** 选择满意不满意* @param {Object} item* @param {Object} index*/getItem(item, index) {this.checkid = index;for (var i in this.checkList) {if (index == i) {this.checkList[i].active = true;} else {this.checkList[i].active = false;}}this.$forceUpdate()},// 满意选择评分星级geSatisRates(item) {this.evealBase.satisfied = item},/*** 选择满意、不满意标签*/getLabelItem(item, index,type) {if(type==0){this.dissatisLabelList[index].actived = !this.dissatisLabelList[index].actived}else{this.satisLabelList[index].actived = !this.satisLabelList[index].actived}this.$forceUpdate()},// 提交评价getSubmit() {console.error("是否满意==>", this.checkid)if (this.checkid == "") {toast("请选择是否满意?")return;}}}}
</script><style lang="scss" scoped>.evaluate_head {width: 750rpx;height: 76rpx;display: flex;align-items: center;position: relative;.headBg {width: 750rpx;height: 76rpx;}.headZindexbox {position: absolute;z-index: 2;display: flex;align-items: center;// top: 20rpx;margin-left: 42rpx;.icon {width: 32rpx;height: 30rpx;margin-right: 12rpx;}.text {font-size: 24rpx;font-family: PingFangSC, PingFang SC;font-weight: 500;color: #FFD000;}}}.evearNox {width: 726rpx;margin: 0 auto;background: #FFFFFF;margin-top: 16rpx;padding-bottom: 20rpx;border-radius: 12rpx;.feekContent {width: 670rpx;margin: 0 auto;background: #F9FAF9 !important;border-radius: 12rpx;.list-value {// width: 230px;color: #333;background: #F9FAF9 !important;// justify-content: right;// text-align: right;display: flex;align-items: center;margin-left: 30rpx;// position: absolute;// right: 10px;.u-upload__wrap__preview__image {border: 2rpx solid #E9E9E9 !important;}}.list-icon-right {margin-left: 10px;}.feekText {background: #F9FAF9 !important;border-top-left-radius: 12rpx;padding-top: 30rpx;border-top-right-radius: 12rpx;color: #B4ABAB !important;.feekTexts {padding: 0 !important;margin-left: 32rpx;width: 600rpx;color: #B4ABAB !important;background: #F9FAF9 !important;}}.z-lists {width: 100%;display: flex;align-items: center;position: relative;padding: 10px 0px;border-radius: 6px;background: #F9FAF9 !important;.moreNumber {position: absolute;right: 30rpx;bottom: 15rpx;font-size: 24rpx;display: flex;align-items: center;font-family: PingFangSC, PingFang SC;font-weight: 400;color: #A4A4A4;.text {font-size: 24rpx;font-family: PingFangSC, PingFang SC;font-weight: 400;color: #303030;}}.z-list-border {position: absolute;bottom: 0;right: 0;width: 96%;height: 1px;border-bottom: 1rpx solid #EFEFEF;}.uploadBox {width: 148rpx;height: 148rpx;display: flex;align-items: center;justify-content: center;border-radius: 8rpx;border: 2rpx solid #E9E9E9;}}}.evearHead {width: 670rpx;display: flex;height: 82rpx;margin: 0 auto;justify-content: space-between;align-items: center;border-bottom: 1rpx solid #E6E6E6;.label {font-size: 28rpx;font-family: PingFangSC, PingFang SC;font-weight: 500;color: #333333;}.text {font-size: 24rpx;font-family: PingFangSC, PingFang SC;font-weight: 400;color: #A4A4A4;}}// 用户信息.userBox {width: 670rpx;margin: 0 auto;display: flex;align-items: center;background: #FFFFFF;margin-top: 26rpx;.logo {width: 72rpx;height: 72rpx;margin-right: 14rpx;}.userContent {.username {font-size: 28rpx;font-family: PingFangSC, PingFang SC;font-weight: 400;color: #333333;margin-bottom: 15rpx;}.userText {font-size: 24rpx;font-family: PingFangSC, PingFang SC;font-weight: 400;color: #333333;}}}.errorText{font-size: 22rpx;width: 670rpx;margin: 0 auto;text-align: left;font-family: PingFangSC, PingFang SC;font-weight: 400;color: #FF0000;margin-top: 32rpx;}.checkBox {width: 670rpx;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;background: #FFFFFF;margin-top: 40rpx;.textActive {background: #FFF6E1 !important;}.checkLabel {width: 326rpx;display: flex;align-items: center;height: 76rpx;justify-content: center;background: #F6F6F6;border-radius: 12rpx;.text {font-size: 24rpx;font-family: PingFangSC, PingFang SC;font-weight: 400;color: #333333;display: flex;align-items: center;.icon {width: 52rpx;height: 52rpx;margin-right: 20rpx;}}}}.labeList {width: 670rpx;margin: 0 auto;display: flex;align-items: center;flex-wrap: wrap;background: #FFFFFF;margin-top: 26rpx;.label {width: auto;font-size: 24rpx;font-family: PingFangSC, PingFang SC;font-weight: 400;background: #F6F6F6;color: #9B9B9B;padding: 6rpx 20rpx;margin-bottom: 24rpx;border-radius: 8rpx;margin-right: 24rpx;}.actived {background: #FFF6E1 !important;color:#AD8539!important;}}}// 评分.rateBox {width: 726rpx;height: 106rpx;display: flex;align-items: center;margin: 0 auto;background: #FFFFFF;border-radius: 12rpx;margin-top: 16rpx;.label {margin-left: 30rpx;font-size: 28rpx;font-family: PingFangSC, PingFang SC;font-weight: 500;color: #333333;}.rate-content {display: flex;align-items: center;.rates {margin-left: 48rpx;margin-right: 52rpx;}.text {font-size: 24rpx;font-family: PingFangSC, PingFang SC;font-weight: 400;color: #2C2C2C;}}}// 提交.feedBottom {position: fixed;bottom: 0;left: 0;width: 750rpx;display: flex;align-items: center;justify-content: center;height: 116rpx;background: #FFFFFF;.submit {width: 646rpx;height: 88rpx;background: #AD8539;border-radius: 50rpx;font-size: 36rpx;display: flex;align-items: center;justify-content: center;font-family: PingFangSC, PingFang SC;font-weight: 400;color: #FFFFFF;}}
</style>