renli-wx/pages/tabBar/myHome/client-evaluation/client-evaluation.vue

<template>
	<view class="client-appraise">
		<view class="operation">
			<view class="">
				<button v-if="index!=5" @click="upday()" class="cu-btn round line-red">上一天</button>
			</view>
			<view class="">
				<picker  mode="date" :value="date" :start="timeArr[5]" :end="currentDate" @change="bindDateChange">
				<text class="text-red">{{date}}</text>
				</picker>
			</view>
			<view class="">
				<button v-if="index!=-1" @click="dowmday" class="cu-btn round line-red">下一天</button>
			</view>
		</view>
		<view v-if="todayList.length==0">
			<view class='empty cuIcon-info'></view>
			<view class='empty-text text-gray'>暂无数据</view>
		</view>
		<view class="client  radius shadow shadow-lg bg-white " v-for="(item,index) in todayList" :key="index">
			<!-- 今日 -->
			<view class="cu-bar bg-white  margin-top">
				<view class='action '>
					<text class='cuIcon-titles text-orange'></text>
					<text class='text-black'>{{item.tradeName}}</text>
				</view>
			</view>
			<view class="cu-card case no-card ">
				<view class="cu-item shadow">
					<view class="appraise">
						<text>态度评价:</text>
						<uni-rate disabledColor='#ffca3e' :disabled='true' :margin='10' class="margin-left"  v-model="item.csAttitudeStar" />
					</view>
					<view class="appraise">
						<text>技术评价:</text>
						<uni-rate disabledColor='#ffca3e' :disabled='true' :margin='10' class="margin-left"  v-model="item.csTechnicalStar" />
					</view>
					<view class="appraise">
						<text>其他评价:</text>
								<uni-rate disabledColor='#ffca3e' :disabled='true' :margin='10' class="margin-left"  v-model="item.csOtherStar" />
					</view>
					<view class="appraise" style="margin-bottom: 10upx;">
						<text>评价内容:</text>
						<text style="width: 60%; padding: 0 20upx; ">{{item.csAppraise}}</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {

		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				userInfo: null,
				todayList: [{
					tradeName: '精品玻尿酸疗程',
					csOtherStar: 5, //其他
					csTechnicalStar: 5, //技术
					csAttitudeStar: 2, //态度
					nr: '这是评价内容这是评价内容这是评价是评价内容'
				}, {
					tradeName: '精品玻尿酸疗程',
					csOtherStar: 5, //其他
					csTechnicalStar: 5, //技术
					csAttitudeStar: 2, //态度
					nr: '这是评价内容这是评价内容这是评价是评价内容'
				}],
				currentDate: currentDate,
				date: currentDate,
				timeArr: [],
				index: -1,

			}
		},
		onLoad() {
			this.timeArr = this.GetTime()
		},
		methods: {
			bindDateChange(e){
				this.date = e.detail.value
				this.timeArr.forEach((item,index)=>{
					if(this.date==item){
						this.index = index
					}
				})
				this.selectMemberCsByStaff()
			},

			GetTime() {
				var date = new Date();
				var base = Date.parse(date); // 转换为时间戳
				var year = date.getFullYear(); //获取当前年份
				var mon = date.getMonth() + 1; //获取当前月份
				var day = date.getDate(); //获取当前日
				var oneDay = 24 * 3600 * 1000
				var daytime = `${year}${mon >= 10 ? mon : '0' + mon}${day >= 10 ? day : '0' + day}`; //今日时间
				this.$data.daytime = daytime; // 今日时间赋值给变量
				var daytimeArr = []
				for (var i = 1; i < 7; i++) { //前七天的时间
					var now = new Date(base -= oneDay);
					var myear = now.getFullYear();
					var month = now.getMonth() + 1;
					var mday = now.getDate()
					daytimeArr.push([myear, month >= 10 ? month : '0' + month, mday >= 10 ? mday : '0' + mday].join('-'))
				}
				return daytimeArr
			},
			upday() {
				this.index += 1
				this.date = this.timeArr[this.index]
				this.selectMemberCsByStaff()
			},
			dowmday() {
				this.index -= 1
				this.date = this.timeArr[this.index]
				if (this.index == -1) {
					this.date = this.currentDate
				}
				this.selectMemberCsByStaff()
			},
			selectMemberCsByStaff() {
				this.userInfo = uni.getStorageSync('userInfo')
				var form = {
					docDate: new Date(this.date),
					staffIds: this.userInfo.id,
					storeId: this.userInfo.storeId,
					state: 1
				}
				this.$api.selectMemberCsByStaff(form).then(res => {
					if (res.code == '000000') {
						this.todayList = res.rows
					}
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate()
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;;
				return `${year}-${month}-${day}`
			},


		},
		onShow:function() {
			this.newdate = new Date()
			this.selectMemberCsByStaff()
		}
	}
</script>

<style>
	.client {
		margin: 0 3%;
		border-radius: 20upx;
	}

	.operation {
		width: 100%;
		height: 80upx;
		background-color: #FFFFFF;
	}

	.operation view {
		padding: 10upx 0;
		display: inline-block;
		text-align: center;
	}

	.operation view:nth-child(2n-1) {
		width: 30%;
	}

	.operation view:nth-child(2n) {
		width: 40%;
	}

	.client-appraise .appraise {
		padding: 5upx 5%;
		font-size: 24upx;
	}

	.client-appraise .appraise text {
		font-size: 24upx;
		padding-right: 10upx;
	}

	.stars-wrapper {
		display: inline-block;
		background-color: #FFFFFF;
		padding: 0upx 30upx;
	}


	.the-month,
	.last-month,
	.season,
	.half-a-year,
	.this-year {
		background: white;
		padding-top: 30rpx;
		position: absolute;
		top: 90rpx;
		bottom: 0;
		left: 0;
		right: 0;
	}

	/* 汇总标题 */
	.month-title {
		display: flex;
		padding: 20rpx 20rpx 20rpx 25rpx;
	}

	.month-title view {
		text-align: center;
		font-size: 31rpx;
	}

	.month-title .projectname {
		flex: 5;
		font-size: 31rpx;
	}

	.month-title .servicenums {
		flex: 2.5;
	}

	.month-title .averagescore {
		flex: 2.5;
	}

	/* 汇总列表 */
	.month-content {
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx 30rpx 25rpx;
	}

	.month-content view {
		text-align: center;
		font-size: 28rpx;
	}

	.month-content .projectname-list {
		flex: 5;
	}

	.month-content .servicenums-list {
		flex: 2.5;
	}

	.month-content .averagescore-list {
		flex: 2.5;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 29rpx;
	}

	.averagescore-icon {
		margin-right: 10rpx;
	}

	.averagescore-fraction {
		font-weight: 550;
		color: orange;
	}
</style>