dl_uniapp/pages/mine/set/evaluate.vue

<template>
	<view class="suggest-content">
		<navigation-bar-vue title="评价" style="width: 100%;" background-color="#ffffff"
			title-color="#000000"></navigation-bar-vue>
		<view class="card-detail">
			<view class="item-field">
				<view class="item-lable is-required">
					你觉得参与本次通告体验如何？<text>(1-10分)</text>
				</view>
				<view class="item-value">
					<uni-rate :max="10" :value="dataObj.score" />
				</view>
			</view>
			<view class="item-field">
				<view class="item-lable is-required">
					分享你的参与感受，帮助更多小伙伴~
				</view>
				<view class="item-value">
					<biner-input-tags @change="change" :selectlist='selectlist' :disabled='disabled'
						:placeholder='placeholder'></biner-input-tags>
					<view class="item-dom-box">
						<view class="item-dom" v-for="(item,index) in tips" @click="chooseObj(item)">{{item.title}}
						</view>
					</view>
				</view>

			</view>
			<view class="line-row-bottom">
				<uni-data-checkbox @change="changeAnonymous" multiple :localdata="readBookList" />
				<text class="text-red">你的头像和昵称将在评价中隐藏</text>
			</view>
			<view class="item-field" style="align-items: center;">
				<view class="submit-box" @click="evaluateAddFun">提交</view>
			</view>
		</view>

	</view>
</template>

<script>
	import navigationBarVue from '@/components/navigation/navigationBar.vue';
	// 引入biner-input-tags
	import binerInputTags from '@/components/biner-input-tags/biner-input-tags'
	import {
		evaluateAdd
	} from '@/api/business/notice';
	import {
		getCatgByCode
	} from '@/api/system/config.js'
	export default {
		components: {
			navigationBarVue,
			binerInputTags
		},
		data() {
			return {
				disabled: false, //不禁用
				// 默认的数组 不填默认的是空数组
				selectlist: [],
				// 默认提示
				placeholder: '请输入评价',
				dataObj: {
					score: 0,
					toUserId: null,
					userType: null,
					isAnonymous: '0'
				},
				tips: [],
				readBookList: [{
					text: '匿名评价',
					value: '1'
				}],
			}
		},
		onLoad(option) {
			this.dataObj.toUserId = option.toUserId
			this.dataObj.userType = option.userType
			this.dataObj.userType = option.userType
			if (option.userType == '01') {
				option.toUserType = '02'
			} else {
				option.toUserType = '01'
			}
			this.initData("plfl", "tips")
		},
		methods: {

			changeAnonymous(data) {
				console.log(data, 82);
				if (data.detail.data && data.detail.data.length > 0) {
					this.dataObj.isAnonymous = '1'
				} else {
					this.dataObj.isAnonymous = '0'
				}

			},
			/**
			 * 初始化数据
			 * @param {Object} code
			 * @param {Object} dataObj
			 */
			initData(code, dataObj) {
				let that = this
				getCatgByCode({
					code: code
				}).then(res => {
					if (res.code == 200) {
						this[dataObj] = res.data
					}
				}).catch((e) => {
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: e
					});
				})
			},
			evaluateAddFun() {
				this.dataObj.evaluate = ''
				if (this.selectlist && this.selectlist.length > 0) {
					this.selectlist.forEach(it => {
						this.dataObj.evaluate = this.dataObj.evaluate + it.title + ','
					})
					this.dataObj.evaluate = this.dataObj.evaluate.slice(0, -1);
				}


				evaluateAdd(this.dataObj).then(res => {
					uni.showToast({
						title: '评价成功',
						icon: 'success',
						duration: 1000
					});
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)

				})
			},
			// 监听变化的数据
			change(arr) {
				this.selectlist = arr
			},
			/**
			 * 去我的建议列表
			 */
			goMySuggest() {
				this.$tab.navigateTo('/pages/mine/set/my-suggest')
			},
			chooseObj(item) {
				this.selectlist.push({
					title: item.title,
					code: item.code
				})
			}
		}
	}
</script>

<style lang="scss">
	.suggest-content {
		padding-top: calc(90rpx + var(--status-bar-height));
		background-color: white;
		width: 100%;
		color: #363636;
		font-size: 32rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: self-start;
		justify-content: center;
		position: relative;

		.card-detail {
			border-top: 1rpx solid #F2F2F2;
			width: 100%;
			padding: 20rpx 30rpx;
			background-color: white;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: self-start;
			justify-content: center;
			position: relative;

			.line-row-bottom {
				width: 100%;
				margin-top: 20rpx;
				font-size: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.text-red {
					font-size: 24rpx;
					color: #929292;
				}
			}

			.item-field {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: self-start;
				justify-content: center;

				.item-lable {
					padding: 15rpx 0;
					display: flex;
					align-items: center;
					justify-content: center;

					text {
						color: #929292;
						font-size: 22rpx;
					}
				}

				.item-value {
					width: 100%;

					input {
						padding-left: 20rpx;
						line-height: 1;
						height: 70rpx;
						border: 1rpx solid #dcdfe6;
						border-radius: 8rpx;
					}

					.choose-add {
						color: #686868;
						padding: 10rpx 0 10rpx 20rpx;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						border: 1rpx solid #dcdfe6;
						border-radius: 8rpx;
					}

					textarea {
						width: 100%;
						height: 150rpx;
						color: #686868;
						padding: 10rpx 0 10rpx 20rpx;
						border: 1rpx solid #dcdfe6;
						border-radius: 8rpx;
					}

					.item-dom-box {
						width: 100%;

						.item-dom {
							font-size: 28rpx;
							border: 1rpx solid #CCCCCC;
							border-radius: 15rpx;
							float: left;
							padding: 6rpx 18rpx;
							margin: 0 0 20rpx 30rpx;
						}
					}
				}

				.submit-box {
					padding: 15rpx 0;
					background-color: #FC1F3E;
					color: white;
					width: 70%;
					border-radius: 10rpx;
					margin-top: 15rpx;
					text-align: center;
				}

				.my-suggest-dom {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 22rpx;
					margin-top: 20rpx;
				}
			}
		}
	}

	.checklist-box {
		margin-right: 10rpx !important;
	}
</style>