xk-doctor-wx/subPackages/sub_my/my_diagnose_common.vue

<template>
	<view>
		<view class="search white">
			<view class="title">{{isDel ? '请选择' : '已添加'}}</view>
			<view class="box">
				<view class="item" @click="handleSelect(item.id)" :class="{act: selectId.includes(item.id)}"
					v-for="item in list" :key="item.id">
					{{item.content}}
				</view>
			</view>
<!--      <view class="title">默认</view>-->
<!--      <view class="box">-->
<!--        <view class="item" @click="handleSelect(item.id)" :class="{act: selectId.includes(item.id)}"-->
<!--              v-for="item in commonList" :key="item.id">-->
<!--          {{item.content}}-->
<!--        </view>-->
<!--      </view>-->
		</view>
		<view class="flex-row flex-jus-center" v-if="list.length == 0">
			<d-empty text="暂无信息" mode="search"></d-empty>
		</view>

		<view v-if="!isDel" class="btnBox">
			<view @click="isDel = true" class="btn btn1">删除医嘱</view>
			<view @click="showAdd" class="btn btn2">添加医嘱</view>
		</view>
		<view v-else class="btnBox">
			<view @click="isDel = false; selectId = []" class="btn btn1">暂不删除</view>
			<view @click="templateDelete" class="btn btn2">删除医嘱</view>
		</view>
		<view class="modal" v-if="modalVisible">
			<view class="mask"></view>
			<view class="main">
				<view class="name">添加医嘱</view>
				<view class="input">
					<textarea v-model="txt" placeholder="请填写医嘱内容" placeholder-class="textarea-placeholder" />
				</view>
				<view class="b">
					<view @click="handleCancel" class="l">暂不添加</view>
					<view @click="handleConfirm" class="r">确认添加</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDiagnoseCommonList,
		addDiagnoseCommon,
		deleteDiagnoseCommon
	} from "@/api/all.js";
  import {doctorOrderCommonList} from "@/api/doctorOrder";

	export default {
		data() {
			return {
				selectId: [],
				isDel: false,
				modalVisible: false,
				txt: '',
				tabs: [],
				current: 0,
				keyword: "",
				list: [],
        commonList: [],
				oldList: [],
			};
		},
		onShow() {
			this.templateLists();
		},
		methods: {
			handleSelect(id) {
				if (!this.isDel) return
				const index = this.selectId.findIndex(item => item == id)
				if (index < 0) {
					this.selectId.push(id)
				} else {
					this.selectId.splice(index, 1)
				}
			},
			handleConfirm() {
				if (!this.txt) {
					return uni.showToast({
						title: '请添加医嘱内容',
						icon: 'none',
						mask: true
					})
				}
				addDiagnoseCommon({
					content: this.txt,
					store_id: uni.getStorageSync('store_id') || 11001,
				}).then(res => {
					if (res.errcode == 0) {
						this.modalVisible = false
						this.txt = ''
						this.templateLists()
						uni.showToast({
							title: '医嘱添加成功',
							icon: 'none',
							mask: true
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
					}
				})
			},
			handleCancel() {
				uni.showModal({
					title: "提示",
					// 提示文字
					content: "确认吗？",
					// 取消按钮的文字自定义
					cancelText: "取消",
					success: (res) => {
						if (res.confirm) {
							this.modalVisible = false
						} else {
							// 执行取消后的操作
						}
					},
				});
			},
			showAdd() {
				this.modalVisible = true
			},
			setDel() {
				this.isDel = true
			},
			templateDelete() {
				uni.showModal({
					title: "提示",
					// 提示文字
					content: "确认要删除吗？",
					// 取消按钮的文字自定义
					cancelText: "取消",

					success: (res) => {
						if (res.confirm) {
							// 执行确认后的操作
							deleteDiagnoseCommon({
									id: String(this.selectId),
									store_id: uni.getStorageSync('store_id') || 11001,
								})
								.then((res) => {
									if (res.errcode === 0) {
										this.isDel = false
										this.selectId = []
										this.templateLists();
									} else {
										this.$toast(res.msg);
									}
								})
								.finally(() => {
									uni.hideLoading();
								});
						} else {
							// 执行取消后的操作
						}
					},
				});
			},
			templateLists() {
				getDiagnoseCommonList({store_id: uni.getStorageSync('store_id') || 11001,})
					.then((res) => {
						if (res.errcode === 0) {
							this.list = res.data;
						} else {
							this.$toast(res.msg);
						}
					})
					.finally(() => {
						uni.hideLoading();
						this.loading2 = false;
					});
        doctorOrderCommonList({store_id: uni.getStorageSync('store_id') || 11001,})
            .then((res) => {
              if (res.code === 0) {
                this.commonList = res.result;
              } else {
                this.$toast(res.msg);
              }
            })
			},

			chang(c) {
				console.log(c);
			},
		},
	};
</script>
<style>
	page {
		background-color: #f9fafb;
	}
</style>
<style scoped lang="scss">
	.modal {
		position: fixed;
		z-index: 33;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;

		.mask {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, .6);
		}

		.main {
			position: absolute;
			left: 50%;
			top: 50%;
			width: 616rpx;
			height: 506rpx;
			transform: translate(-50%, -50%);
			box-sizing: border-box;
			padding: 40rpx 26rpx 0;
			background: #fff;
			z-index: 3;
			border-radius: 20rpx;

			.name {
				text-align: center;
				margin-bottom: 30rpx;
				color: #333;
				font-size: 32rpx;
				font-weight: bold;
			}

			.input {
				height: 244rpx;
				border-radius: 20rpx;
				border: 1rpx solid #D8D8D8;
				margin-bottom: 40rpx;
				padding-right: 20rpx;

				textarea {
					width: 100%;
					height: 240rpx;
					padding: 10rpx 22rpx;
				}
			}

			.b {
				display: flex;
				justify-content: space-between;

				.l,
				.r {
					width: 196rpx;
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
					background: #6ACDBB;
					color: #fff;
					border-radius: 32rpx;
				}

				.l {
					background: #F0FAF8;
					color: #6ACDBB;
				}
			}
		}
	}

	.search {
		padding: 30rpx 44rpx 0;
		margin-bottom: 252rpx;
	}

	.title {
		color: #333;
		font-size: 32rpx;
		margin-bottom: 32rpx;
		font-weight: bold;
	}

	.box {
		margin-left: -20rpx;
		display: flex;
		flex-wrap: wrap;

		.item {
			margin-left: 20rpx;
			margin-bottom: 30rpx;
			padding: 0 30rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 8rpx;
			border: 1rpx solid #D8D8D8;
			font-size: 28rpx;
			color: #666;

			&.act {
				color: #fff;
				background: #6ACDBB;
				border: 1rpx solid #6ACDBB;
			}
		}
	}

	.btnBox {
		font-size: 32rpx;

		.btn {
			position: fixed;
			left: 40rpx;
			right: 40rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			font-size: 32rpx;
			justify-content: center;
			border: 1rpx solid #6ACDBB;
			border-radius: 42rpx;

			&.btn1 {
				color: #6ACDBB;
				bottom: 162rpx;
			}

			&.btn2 {
				bottom: 40rpx;
				color: #fff;
				background: #6ACDBB;
			}
		}
	}

	.bottom {}

	.set {
		width: 124rpx;
		height: 82rpx;
		border-left: 1px solid #e8e9eb;

		image {
			width: 28rpx;
			height: 28rpx;
		}
	}
</style>