guosen-ldt-client/pagesD/pages/pay/remark.vue

<template>
	<view class="">
		<view class="content">
			<u-input maxlength="50"  height="250" v-model="remark" type="textarea" :border="border" />
			<view class="text-length">
				<text style="color: #bfbfbf;">{{remark.length}}</text>
				<text style="color: #333333;margin-left: 10rpx;">/ 50</text>
			</view>
		</view>
		<view class="tag-content">
			<text>推荐标签</text>
			<view class="padding-top-30 flex flex-wrap">
				<view class="margin-right-20 margin-bottom-20" v-for="(item,index) in tagList" :key="index">
					<u-tag :index="item" @click="tagClick" color="#FF9447" border-color="#FF9447" mode="plain" :text="item" type="info" />
				</view>
			</view>
		</view>
		
		<view class="center footer-fixed" style="margin-top: 120rpx;bottom: 10%;" >
			<view @click="confirm" class="cu-btn  flex  text-lg btn-bg-color radius" style="padding: 42rpx 0;width: 90%;">
				确认
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: '',
	data() {
		return {
			remark:'',
			tagList:[
				'不吃辣',
				'少放辣',
				'多放辣',
				'不吃蒜',
				'不吃葱',
				'不吃香菜',
			]
		};
	},
	onLoad(options) {
		this.remark=options.data || ''
		if (this.$isNotEmpty(this.remark)) {
			this.remark=this.remark+','
		}
	},
	methods:{
		tagClick(item){
			this.remark=this.remark + item +","
		},
		confirm(){
			if (this.$isNotEmpty(this.remark)) {
				//去掉最后一个逗号
				this.remark=this.remark.substring(0,this.remark.length-1)
			}
			uni.$emit('REMARK',this.remark)
			this.$back()
		}
	}
};
</script>

<style >
	
	page{
		background-color: #FFFFFF;
	}
	.content{
		padding: 20rpx;
		margin: 20rpx;
		background-color: #F1F1F1;
		border-radius: 4rpx;
	}
	
	.text-length{
		text-align: right;
		color: #DDDDDD;
	}
	
	.tag-content{
		color: #9c9c9c;
		padding: 20rpx;
	}
	

</style>