jzmall_uni/pages/ucenter/remark/remark.vue

<template>
	<view class="remark-container">
		<view class="remark-select" @tap.stop.prevent="onRemarkClick">
			<view class="title">选择备注</view>
			<view class="remark-list">
				<view class="remark-item" :data-remark="item" @tap.stop.prevent="remarkItemSelect"
					v-for="(item, index) in remarkList" :key="index">
					<view class="remark-value">{{ item }}</view>

					<image mode="aspectFit" src="https://mall.zhaijieshi.cc/file/wx-dy/yd.png" class="radio-img"
						v-if="remarkActive == item"></image>

					<image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-unselect-popup.png"
						class="radio-img" v-else></image>
				</view>
			</view>

		</view>
		<view class="textarea-wrapper">
			<textarea placeholder="其他备注请填写" @tap="setTextareaFocus" :focus="isTextareaFocused" class="remark-extra"
				:value="message" @input="bindMessageInput" maxlength="200" 
				placeholder-style="font-size:24rpx;color: #A5A5A5; letter-spacing: 2rpx; font-family: AlibabaPuHuiTi_2_65_Medium;" />
			<text class="remaining ">{{message.length}}/{{maxLength}}</text>
		</view>
		<view class="remark-conf-btn" @tap.stop.prevent="remarkItemConfirm">提交备注</view>
	</view>
</template>

<script>
	var util = require('@/utils/util.js');
	export default {
		data() {
			return {
				remark: '',
				remarkPopupShow: false,
				remarkList: ['上门前提前电话联系', '请准时到达', '请自带打扫工具', '主要打扫厨房&卫生间', '家里有宠物'],
				remarkActive: '',
				message: '',
				maxLength: 200, // 最大长度,
				isTextareaFocused: false,
				cursorPosition:''
			}
		},
		onShow() {
			let remark = uni.getStorageSync('remark')
			let remarkMsg = uni.getStorageSync('remarkMsg')
			if (remark) {
				this.setData({
					remark: remark,
					remarkActive: remark
				})
			}
			if (remarkMsg) {
				this.setData({
					message: remarkMsg
				})
			}
		},
		methods: {
			setTextareaFocus() {
				this.isTextareaFocused = true;
			},
			bindMessageInput(e) {
				this.setData({
					message: e.detail.value,
					cursorPosition:e.detail.cursor
				});
				uni.setStorageSync('remarkMsg', this.message)
			},
			onRemarkClick() {
				//阻止事件冒泡，不要删
			},
			remarkItemSelect(e) {
				let remark = e.currentTarget.dataset.remark;
				this.setData({
					remark: remark,
					remarkActive: remark
				});

				// console.log("remark",remark,this.remarkActive);
				uni.setStorageSync('remark', this.remark)

			},
			remarkItemConfirm() {

				uni.navigateBack()

			}
		}
	}
</script>

<style>
	.remark-container {
		font-family: AlibabaPuHuiTi_2_65_Medium;
	}

	.remaining {
		position: absolute;
		right: 24rpx;
		bottom: 20rpx;
		color: #A5A5A5;
	}

	.textarea-wrapper {
		min-height: 300rpx;
		border-radius: 16rpx;
		background-color: #ffffff;
		padding: 24rpx 24rpx 20rpx;
		display: flex;
		/* align-items: center; */
		width: 690rpx;
		margin: 10rpx 30rpx;
		position: relative;
	}

	.remark-extra {
		width: 642rpx;
		font-size: 26rpx;
		/* height:130rpx; */
	}

	.remark-select {
		width: 690rpx;
		/* padding: 0 24rpx 56rpx; */
		background: #ffffff;
		border-radius: 16rpx;
		padding: 10rpx 24rpx;
		margin: 30rpx auto 20rpx;
	}

	.remark-select .title {
		font-weight: 600;
		color: #191919;
		font-size: 30rpx;
		height: 90rpx;
		line-height: 90rpx;
	}

	.remark-item .remark-value {
		color: #191919;
		font-size: 26rpx;
		font-weight: bold;
		flex: 1;
		text-align: left;
	}

	.remark-list .remark-item {
		height: 84rpx;
		display: flex;
		/* border-bottom: 2rpx solid #e0e0e0; */
		align-items: center;
	}

	.remark-item .radio-img {
		width: 26rpx;
		height: 26rpx;
	}

	.remark-conf-btn {
		width: 690rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 16rpx;
		text-align: center;
		font-size: 36rpx;
		background-color: #FE2C55;
		color: #fff;
		margin: 0 auto;
		margin-top: 54rpx;
	}
</style>