yizhizan-h5/pages/msg/add.vue

<template>
	<view>
		<!-- 顶部自定义导航栏 -->
		<view class="nav-header">
			<view class="nav-left" @click="goBack">
				<u-icon name="arrow-leftward" color="rgba(56, 58, 63, 1)" size="38"></u-icon>
			</view>
			<view class="nav-center">
				<text class="nav-title">{{ pageTitle }}</text>
			</view>
			<view class="nav-right" @click="save()">
				<text class="save-text">保存</text>
			</view>
		</view>
		
		<!-- 文本框容器 -->
		<view class="textarea-container">
			<textarea v-model="content" class="content-textarea" placeholder="请输入你的常用语回复，请不要填写任何联系方式或广告信息，否则系统将会封禁您的账号" maxlength="120"
				placeholder-style="color: #999999; font-size: 14px; line-height: 1.4;"
				style="height: 300upx;width: 100%;text-align: left;background: transparent;padding: 20rpx;border: none;outline: none;"></textarea>
			
			<!-- 文本框内底部文字计数 -->
			<view class="inner-counter">
				<text class="counter-text">{{content.length}}/120</text>
			</view>
		</view>

		<view class="padding-lr-sm" v-if="type == 0">
			<u-button :custom-style="customStyle1" :hair-line="false" @click="save()">
				添加
			</u-button>
		</view>
		<view class="padding-lr-sm" style="margin-top: 100rpx;display: flex;" v-if="type == 1">
			<u-button style="width: 48%;margin-right: 20rpx;" :custom-style="customStyle2" :hair-line="false"
				@click="deleteMsg()">
				删除
			</u-button>
			<u-button style="width: 48%;" :custom-style="customStyle1" :hair-line="false" @click="updateMsg()">
				保存
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle1: {
					backgroundColor: "#00B88F",
					border: 0,
					color: "#FFF",
					height: '98rpx'
				},
				customStyle2: {
					backgroundColor: "#ffffff",
					border: 0,
					color: "#000",
					height: '98rpx'
				},
				id: '',
				type1: 0, //0,常用语，1，自动回复
				type: 0, //0，添加  1，编辑
				content: '',
				pageTitle: '自定义招呼语' // 页面标题
			}
		},
		onLoad(d) {
			this.type = d.type;
			// 处理页面标题
			if (d.title) {
				// 如果有自定义标题，使用自定义标题
				this.pageTitle = d.title;
			} else if (d.type == 1) {
				// 如果是编辑模式且没有自定义标题，使用默认编辑标题
				this.pageTitle = '编辑信息';
			}
			this.type1 = d.type1;
			if (this.type1 == 1) {
				this.getDetailMsg();
			}
			if (d.id) {
				this.id = d.id;
				this.getDetailMsg();
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},
			deleteMsg() {
				let userId = this.$queue.getData('userId');
				uni.showModal({
					title: '温馨提示',
					content: '您确认要删除当前信息吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							if (this.type1 == 0) {
								this.$Request.postT('/app/message/deleteMessage?id=' + this.id).then(res => {
									if (res.code == 0) {
										uni.hideLoading();
										this.$queue.showToast('删除成功！')
										this.content = '';
										setTimeout(d => {
											uni.navigateBack();
										}, 1000);
									} else {
										uni.hideLoading();
										this.$queue.showToast(res.msg)
									}
								});
							} else {
								let data = {
									msg: ''
								}
								this.$Request.postJson('/app/user/updateUser', data).then(res => {
									if (res.code == 0) {
										uni.hideLoading();
										this.$queue.showToast('删除成功！')
										this.content = '';
										setTimeout(d => {
											uni.navigateBack();
										}, 1000);
									} else {
										uni.hideLoading();
										this.$queue.showToast(res.msg)
									}
								});
							}
						}
					}
				});
			},
			updateMsg() {
				let userId = this.$queue.getData('userId');
				let data = {
					state: 20,
					userId: userId,
					content: this.content,
					id: this.id
				}
				uni.showModal({
					title: '温馨提示',
					content: '您确认要修改当前信息吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							if (this.type1 == 0) {
								this.$Request.postJson('/app/message/updateMessage', data).then(res => {
									if (res.code == 0) {
										uni.hideLoading();
										this.$queue.showToast('修改成功！')
										this.content = '';
										setTimeout(d => {
											uni.navigateBack();
										}, 1000);
									} else {
										uni.hideLoading();
										this.$queue.showToast(res.msg)
									}
								});
							} else {
								let data = {
									msg: this.content
								}
								this.$Request.postJson('/app/user/updateUser', data).then(res => {
									if (res.code == 0) {
										uni.hideLoading();
										this.$queue.showToast('修改成功！')
										this.content = '';
										setTimeout(d => {
											uni.navigateBack();
										}, 1000);
									} else {
										uni.hideLoading();
										this.$queue.showToast(res.msg)
									}
								});
							}
						}
					}
				});
			},
			getDetailMsg() {
				if (this.type1 == 1) {
					this.$Request.get("/app/user/selectUserById").then(res => {
						if (res.code == 0) {
							this.content = res.data.msg ? res.data.msg : '';
						}
					});
				} else {
					this.$Request.getT('/app/message/selectMessageById?id=' + this.id).then(res => {
						if (res.code == 0) {
							this.content = res.data.content;
						}
					});
				}
			},
			save() {
				let that = this;
				this.$queue.showLoading('上传中...')
				if (this.content == '') {
					uni.hideLoading();
					this.$queue.showToast('请输入信息内容！')
					return;
				}
				// 添加常用语  分类传个20吧  state ，再传userId   content内容应该就行
				let userId = this.$queue.getData('userId');
				let data = {
					state: 20,
					userId: userId,
					content: this.content
				}

				if (this.type1 == 0) {
					this.$Request.postJson('/app/message/insertMessage', data).then(res => {
						if (res.code == 0) {
							uni.hideLoading();
							this.$queue.showToast('添加成功！')
							this.content = '';
							setTimeout(d => {
								uni.navigateBack();
							}, 1000);
						} else {
							uni.hideLoading();
							this.$queue.showToast(res.msg)
						}
					});
				} else {
					let data = {
						msg: this.content
					}
					this.$Request.postJson('/app/user/updateUser', data).then(res => {
						if (res.code == 0) {
							uni.hideLoading();
							this.$queue.showToast('添加成功！')
							this.content = '';
							setTimeout(d => {
								uni.navigateBack();
							}, 1000);
						} else {
							uni.hideLoading();
							this.$queue.showToast(res.msg)
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-top: 80rpx;
	}

	// 顶部自定义导航栏样式
	.nav-header {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		background: #FFFFFF;
	}

	.nav-left {
		width: 60rpx;
		display: flex;
		justify-content: flex-start;
	}

	.nav-center {
		flex: 1;
		display: flex;
		justify-content: center;
	}

	.nav-title {
		color: rgba(51, 51, 51, 1);
		font-family: DM Sans;
		font-size: 18px;
		font-weight: 700;
		line-height: 26px;
		letter-spacing: 0%;
		text-align: center;
	}

	.nav-right {
		width: 60rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.save-text {
		color: rgba(51, 51, 51, 1);
		font-family: DM Sans;
		font-size: 14px;
		font-weight: 400;
		line-height: 26px;
		letter-spacing: 0%;
		text-align: center;
	}

	// 文本框容器样式
	.textarea-container {
		position: relative;
		width: 95%;
		margin: 20rpx;
		background: rgba(240, 240, 240, 1);
		border-radius: 15rpx;
		height: 300upx;
	}

	.content-textarea {
		width: 100%;
		height: 100%;
		background: transparent;
		border: none;
		outline: none;
		font-size: 28rpx;
		color: #333333;
		line-height: 1.5;
		box-sizing: border-box;
		padding: 20rpx;
		padding-bottom: 60rpx; /* 为底部计数器留出空间 */
	}

	// 文本框内底部文字计数样式
	.inner-counter {
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		pointer-events: none; /* 防止影响文本输入 */
	}

	.counter-text {
		color: #999999;
		font-size: 24rpx;
		font-weight: 400;
	}

	.bg {
		background-color: #FFFFFF;
	}
</style>