zd_wechatApp/pages/TopPipeWork/TopPipeWork.vue

<template>
	<scroll-view>
		<view class="background">

			<view class="uni-list">
				<view class="container" style="border-bottom: 1px solid #f8f8f8;">
					<view>
						工程名称
					</view>
					<view v-if="this.isEmpty(this.projectName.id)" style="margin-top: 10;"
						@click="pickerShow('gcmc',0)">
						<span style="color: darkgray;">请选择工程名称</span>
						<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
					</view>
					<view v-else class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('gcmc',0)">
						<span style="color: black;">{{projectName.name}}</span>
						<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
					</view>
				</view>

			</view>
			<view class="uni-list">
				<view class="container" style="border-bottom: 1px solid #f8f8f8;">

					<text>工程地点</text>
					<input class="uni-input" type="text" v-model="gcddValue" disabled="true"
						style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>
			<view class="uni-list">
				<view class="container" style="border-bottom: 1px solid #f8f8f8;">

					<text>工程编码</text>
					<input class="uni-input" type="text" v-model="gcbmValue" disabled="true"
						style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>
			<view class="uni-list">
				<view class="container" style="border-bottom: 1px solid #f8f8f8;">

					<text>施工单位</text>
					<input class="uni-input" type="text" v-model="sgdwValue" disabled="true"
						style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>
			<view class="uni-list">
				<view class="container" style="border-bottom: 1px solid #f8f8f8;">

					<text>工程规模</text>
					<input class="uni-input" type="text" v-model="gcgmValue" disabled="true"
						style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>
			<view class="uni-list">
				<view class="container" style="border-bottom: 1px solid #f8f8f8;">

					<text>施工质量</text>
					<input class="uni-input" type="text" v-model="sgzlValue" disabled="true"
						style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>
			<view class="uni-list">
				<view class="container" style="border-bottom: 1px solid #f8f8f8;">

					<text>施工进度</text>
					<input class="uni-input" type="number" v-model="sgjdValue" disabled="true"
						style="margin-left: 10px;text-align: right;"></input>
				</view>
			</view>



			<view class="uni-list">
				<view class="align-items" style="margin-bottom: 20px;">
					<view class="" style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
						<view v-for="(item,index) in fileArr" :key="index" style="position: relative;">

							<view
								v-if="item.picUrl.substring(item.picUrl.length - 3) == 'png' || item.picUrl.substring(item.picUrl.length - 3) == 'jpg'||item.picUrl.substring(item.picUrl.length-4)=='jpeg' ">
								<image :src="item.picUrl" mode=""
									style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
									@click="showPhotoFile(fileImageArr.indexOf(item.picUrl))">
								</image>
							</view>
							<view v-else-if="item.picUrl.substring(item.picUrl.length - 3) == 'mp4'">
								<video :src="item.picUrl"
									style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
							</view>


							<view v-else @click="chooseModel(item.picUrl,item.fileName)">
								{{item.fileName}}
							</view>
						</view>
					</view>
				</view>
			</view>




			<SelectPicker :list="selectList" @change="changeSelect" v-if="open" @close="close" titleKey="name"
				subtitleKey="id" v-model="name"></SelectPicker>


			<SelectPicker :list="dictOptions" @change="changeSelectDict" v-if="openDict" @close="closeDict"
				titleKey="dictLabel" subtitleKey="dictValue" v-model="dictLabel"></SelectPicker>
		</view>

		<view class="background">
			<view>
				<view class="uni-list">
					<view
						style="font-size: 16px;margin-left: 10px;margin-top: 10px;display: flex; justify-content: space-between;margin-bottom: 10px;">
						{{objValue.value}}

						<span
							style="color: blue;font-size: 14px;  display: flex;justify-content:flex-end; margin-right: 10px;"
							@click="history">历史</span>
					</view>
					<view class="container" style="border-bottom: 1px solid #f8f8f8;">

						<view>
							施工时间
						</view>
						<view @click="openDatetimePicker()">
							<span style="color: black;">{{time}}</span>
							<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
						</view>
					</view>
					<view class="container" style="border-bottom: 1px solid #f8f8f8;">
						<view class="uni-common-mt" style="width: 100%;">
							<text class="uni-title uni-common-pl">施工内容</text>
							<view style="width: 100%;box-sizing: border-box;">
								<textarea class="textarea" placeholder="请输入施工内容" maxlength="100"
									placeholder-style="padding: 10rpx;"
									style="width: 100%;height: 100%;border: 1rpx solid #cccccc; border-radius: 15rpx;padding: 10rpx;line-height:normal;"
									auto-height v-model="projectContent"></textarea>
							</view>
						</view>
					</view>


					<view v-for="(a,index) in czggslList" :key="index" class="num-style">
						<view class="container" style="border-bottom: 1px solid #f8f8f8;">
							<view>
								材质
							</view>
							<view class="uni-list-cell-db" @click="pickerShow('cz',index)">
								<span style="color: black;">{{a.cz.id==''?'请选择材质':a.cz.name}}</span>
								<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
							</view>

						</view>
						<view class="container" style="border-bottom: 1px solid #f8f8f8;">

							<view>
								规格
							</view>

							<view class="uni-list-cell-db" @click="pickerShow('gg',index)">
								<span style="color: black;">{{a.gg.id==''?'请选择规格':a.gg.name}}</span>
								<image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
							</view>
						</view>

						<view class="container" style="border-bottom: 1px solid #f8f8f8;">
							<text>米 数</text>
							<!-- style="margin-left: 10px;text-align: right;" -->
							<view style="display: flex; justify-content: right; width: 70%;">
								<input class="uni-input" type="number" v-model="a.sl.inputIntegerNumberValue"
									maxlength="6"
									style="text-align: center; border: 1px solid #00aaff; border-radius: 20rpx;"></input>
								<text style="font-weight:bold;margin-left: 10px;margin-right: 10px;">.</text>
								<input class="uni-input" type="number" v-model="a.sl.inputDecimalNumberValue"
									maxlength="1"
									style="text-align: center; border: 1px solid #00aaff; border-radius: 20rpx;"></input>
							</view>
						</view>
						<button v-if="index!=0" @click="this.czggslList.splice(index,1)" class="sc-btn">删除</button>
					</view>
					<button @click="this.czggslList.push({cz:{id: '',name: ''},gg:{id: '',name: ''},sl: {
					inputIntegerNumberValue: '',
					inputDecimalNumberValue: ''
				}})" class="tj-btn">添加</button>
				</view>
			</view>
			<view class="align-items" style="margin-top: 20px;margin-bottom: 20px;">
				<view class="container" style="color: #b2b2b2;">*请上传照片</view>
				<view class="" style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
					<image :src="loadImgSrc('updateimg.png')" mode=""
						style="width: 200rpx; height: 150rpx; margin: 0 12rpx;; " @click="choose()">
					</image>
					<view v-for="(item,index) in imgArr" :key="index" style="position: relative;">
						<view
							v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg'||item.substring(item.length-4)=='jpeg'  ">
							<image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
								@click="showPhoto(index)">
							</image>
						</view>
						<view v-else>
							<video :src="item" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
						</view>
						<view @click="remove(index)"
							style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
							<image :src="loadImgSrc('icon_close.png')" style=" width: 15px; height: 15px;">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="action-btn">
			<button @click="submit" class="btn cu-btn block bg-blue lg round">确认上传</button>
		</view>

		<bottom-sheet ref="refShare" :data="historyList" :TitleType="objValue.value"></bottom-sheet>
		<yt-dateTimePicker ref="myPicker" @submit="handleSubmit" :start-year="2024" :end-year="2099"
			:time-hide="[true, true, true, true, true, true]" :time-label="['年', '月', '日', '时', '分', '秒']" />
		<!-- 下载提示页面 -->
		<mypopup :show="show_loding" :popupText="popupText" :titleText="titleText" :cancelText="cancelText"
			:confirmText="confirmText" @close="cancel_loding" @confirm="confirm_loding">
		</mypopup>

	</scroll-view>
</template>

<script>
	import SelectPicker from '../../components/selectPicker/select_picker.vue'
	import bottomSheet from '../../components/bottomSheet/bottomSheetMore.vue'
	import mypopup from '../../components/mypopup/mypopup.vue'

	import {
		getDicts
	} from "@/api/system/dict/data";
	import {
		getToken
	} from '../../utils/auth';

	import {

		getEnginMaterialQualityList,
		getEnginSpecificationsList,
		getTopPipeWorkDetails,
		getTopPipeNameList,
		SubmitTopPipeWork,
		getTopPipeHistoryList

	} from '@/api/common'
	export default {
		components: {
			SelectPicker,
			bottomSheet,
			mypopup
		},



		data() {
			return {

				historyList: {}, //历史数据
				show_loding: false,
				popupText: '', //对话框内容
				titleText: '',
				cancelText: '',
				confirmText: '',
				objValue: '', //上一页面传过来的值  新增接口用
				headers: {
					Authorization: "Bearer " + getToken()
				},
				loading: false,
				time: '', //施工时间
				open: false,
				objValue: '', //上一页面传过来的值  新增接口用
				openDict: false,
				selectList: [],
				fileImageArr: [],
				dictOptions: [],
				imgArr: [],
				fileArr: [],
				projectName: '', //工程名称
				specificationValue: {}, //规格
				materialValue: {}, //材质
				inputNumberValue: '',
				inputIntegerNumberValue: '',
				inputDecimalNumberValue: '',
				gcddValue: '', //工程地点
				gcbmValue: '', //工程编码
				sgdwValue: '', //施工单位
				gcgmValue: '', //工程规模
				sgzlValue: '', //施工质量
				sgjdValue: '', //施工进度
				materialList: '', //材质list
				enginId: '', //其他工程id
				id: '', //工程id
				fileUrl: '', //点击的文件地址
				fileName: '', //点击的文件名称
				projectContent: '', //描述  
				zEngineeringMaterialBo: [], //给后台传的值  用料列表
				SelectIndex: '', //选择的索引值
				czggslList: [{
					cz: {
						id: '',
						name: ''
					},
					gg: {
						id: '',
						name: ''
					},
					sl: {
						inputIntegerNumberValue: '',
						inputDecimalNumberValue: ''
					}
				}, ],
			}
		},
		created() {
			this.time = this.traversalTime(new Date().getTime()) //在data里定义变量-nowTime
		},
		onLoad(options) {
			if ('params' in options) {
				this.objValue = JSON.parse(decodeURIComponent(options.params));
			}


		},
		methods: {
			//判断是否选择

			isEmpty(str) {

				return (!str || 0 === str.length);

			},

			handleSubmit(e) {

				this.time = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;

			},

			//获取当前时间
			traversalTime(timestamp) {
				//timestamp(时间戳)是整数，否则要parseInt转换
				let time = new Date(timestamp);
				let y = time.getFullYear();
				let m = time.getMonth() + 1;
				let d = time.getDate();
				let h = time.getHours();
				let mm = time.getMinutes();
				let s = time.getSeconds();
				return y + '-' + this.addTimes(m) + '-' + this.addTimes(d) + ' ' + this.addTimes(h) + ':' + this
					.addTimes(
						mm) + ':' + this.addTimes(s);


			},
			addTimes(m) {
				return m < 10 ? '0' + m : m
			},
			// 打开picker
			openDatetimePicker() {
				this.$refs.myPicker.show();
			},

			// 关闭picker
			closeDatetimePicker() {
				this.$refs.myPicker.hide();
			},
			showPhotoFile(index) {
				uni.previewImage({
					current: index,
					urls: this.fileImageArr,
				})

			},
			showPhoto(index) {
				let newArr = [];
				this.imgArr.forEach((item, index) => {
					if (item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg' ||
						item.substring(item.length - 4) == 'jpeg') {
						newArr.push(item)
					}
				});
				uni.previewImage({
					current: index,
					urls: newArr,
				})

			},
			remove(index) {
				uni.showModal({
					title: '提示',
					content: '是否删除该图片或视频？',
					success: (res) => {
						if (res.confirm) {
							this.imgArr.splice(index, 1)
							if (this.imgArr.length <= 0) {
								this.photo = true;
							}
						}
					}
				})
			},
			choose() {
				let _this = this;
				uni.showActionSheet({
					title: '上传',
					itemList: ['图片', '视频'],
					success: (res) => {
						if (res.tapIndex == 0) {
							this.chooseimage()
						} else {
							this.choosevideo()
						}
					}
				})
			},
			chooseimage() {

				let _this = this;
				uni.chooseImage({
					sizeType: ['album', 'camera'],
					success(resp) {
						resp.tempFiles.forEach((item, index) => {
							const task = uni.uploadFile({
								url: _this.$HTTP + `/obs`,
								filePath: item.path,
								name: 'file',
								formData: {},
								header: _this.headers,

								success: res => {
									// 判断是否json字符串，将其转为json格式
									let data = JSON.parse(res.data);
									if (![200].includes(data.code)) {
										_this.$modal.msg(data.msg)
									} else {
										if (_this.progress === 100) {
											_this.imgArr.push(data.data.url)
											_this.$modal.msg('上传成功！')
											_this.photo = false;
										}
									}
								},
								fail: e => {
									_this.$modal.msg('上传失败！')
								},
								complete: res => {
									uni.hideLoading();
									_this.uploading = false;

								}
							});
							task.onProgressUpdate(res => {
								_this.progress = res.progress;
								uni.showLoading({
									title: '上传中'
								})
								if (_this.progress != 100) {
									_this.loading = false
								} else {
									_this.loading = true
								}
							});

						})

					},
				})
			},

			choosevideo() {
				let _this = this;
				uni.chooseVideo({
					sourceType: ['album', 'camera'],
					maxDuration: 30,
					success(resp) {
						const task = uni.uploadFile({
							url: _this.$HTTP + `/obs`,
							filePath: resp.tempFilePath,
							name: 'file',
							formData: {},
							header: _this.headers,
							success: res => {
								// 判断是否json字符串，将其转为json格式
								let data = JSON.parse(res.data);
								if (![200].includes(res.statusCode)) {
									this.uploadError(index, data);
								} else {
									//上传成功
									if (_this.progress === 100) {
										_this.imgArr.push(data.data.url)
										_this.$modal.msg('上传成功！')
										_this.photo = false;
									}
								}
							},
							fail: e => {
								_this.$modal.msg('上传失败！')
								this.uploadError(index, e);
							},
							complete: res => {
								uni.hideLoading();
								_this.uploading = false;
							}
						});
						task.onProgressUpdate(res => {
							_this.progress = res.progress;
							uni.showLoading({
								title: '上传中'
							})
							if (_this.progress != 100) {
								_this.loading = false
							} else {
								_this.loading = true
							}
						});

					},
				})
			},
			chooseModel(url, name) {
				this.cancelText = '复制';
				this.confirmText = "下载";
				this.titleText = "温馨提示"
				this.popupText = "下载或者复制链接";
				this.show_loding = true;
				this.fileName = name;
				this.fileUrl = url; //文件名称和下载地址赋值

			},
			//取消按钮
			cancel_loding() {
				let _this = this;
				_this.show_loding = false;
				if (!_this.isEmpty(_this.fileUrl)) {
					uni.setClipboardData({
						data: _this.fileUrl,
						success() {
							uni.showToast({
								title: '已复制' + _this.fileName + '地址成功 请在浏览器打开',
								icon: 'none'
							});
						},
						fail(e) {
							uni.showToast({
								title: '复制失败',
								icon: 'none'
							});
						}
					});

				}
			},
			//确定按钮
			confirm_loding() {
				this.show_loding = false;
				this.download(this.fileUrl, this.fileName);


			},

			getDownLoadFilePath() {
				let cachePath = `${uni.env.USER_DATA_PATH}/downloads`
				let fm = uni.getFileSystemManager()
				try {
					// 访问成功则存在
					fm.accessSync(cachePath)
				} catch (error) {
					// 不存在则新建
					fm.mkdirSync(cachePath, true)
				}
				return cachePath
			},
			download(url, name) {

				let savePath = this.getDownLoadFilePath();
				//var savePath = uni.env.USER_DATA_PATH + '/savePath'

				uni.downloadFile({
					url: url,
					success: response => {
						if (response.statusCode === 200) {
							uni.getFileSystemManager().saveFile({
								tempFilePath: response.tempFilePath,
								filePath: `${savePath}/${name}`,
								success: (resData) => {
									uni.showToast({
										title: '下载成功'
									})
								},
								fail: error => {}
							})
						}
					},
					fail: error => {}

				})



			},
			pickerShow(e, index) {
				this.SelectIndex = index;
				this.type = e; //赋值类型
				if (e == 'gcmc') {
					this.open = true;
					getTopPipeNameList().then(response => {
						this.selectList = response.data;

					});

				} else if (e == 'cz') { //材质
					this.open = true;
					getEnginMaterialQualityList("顶管工程").then(response => {
						this.selectList = response.data;
					});

				} else if (e == 'gg') { //规格
					if (this.isEmpty(this.czggslList[index].cz.id)) {
						this.$modal.msg('请选择材质')
						//	this.czggslList[index].cz = this.materialValue.id
					} else {
						this.open = true;
						this.selectList = this.materialList;

					}

				}

			},
			changeSelect(item, index) {
				// this.index = index;
				// this.address = item.communityName;
				this.open = false;

				if (this.type == 'gcmc') {
					this.projectName = item;
					this.fileImageArr = [];
					uni.showLoading({
						title: '加载中'
					})
					getTopPipeWorkDetails(item.id).then(res => {
						uni.hideLoading();
						this.gcddValue = res.data.enginAddre; //工程地点
						this.gcbmValue = res.data.enginCode; //工程编码
						this.sgdwValue = res.data.constructUnit; //施工单位
						this.gcgmValue = res.data.enginScale; //工程规模
						this.sgzlValue = res.data.constructQuality; //施工质量
						this.sgjdValue = res.data.constructSchedule; //施工进度
						this.fileArr = res.data.pics;
						this.enginId = res.data.enginId;
						this.id = res.data.id;
						this.fileArr.forEach((list, index) => {
							if (list.picUrl.substring(list.picUrl.length - 3) == 'png' || list.picUrl
								.substring(list.picUrl.length - 3) == 'jpg' || list.picUrl.substring(list
									.picUrl.length - 4) == 'jpeg') {
								this.fileImageArr.push(list.picUrl)
							}


						});



					})

				}
				//  else if (this.type == 'cz') {
				// 	this.materialValue = item;
				// 	this.specificationValue = ''; //重置规格
				// 	//根据材质ID 获取规格数据
				// 	getEnginSpecificationsList(item.id).then(res => {
				// 		this.materialList = res.data
				// 	})
				// } else if (this.type == 'gg') {
				// 	this.specificationValue = item;

				// }
				else if (this.type == 'cz') {
					this.materialValue = item;
					this.specificationValue = ''; //重置规格
					//根据材质ID 获取规格数据
					getEnginSpecificationsList(item.id).then(res => {
						this.materialList = res.data
						this.czggslList[this.SelectIndex].cz.id = this.materialValue.id
						this.czggslList[this.SelectIndex].cz.name = this.materialValue.name
					})
				} else if (this.type == 'gg') {
					this.specificationValue = item;
					this.czggslList[this.SelectIndex].gg.id = this.specificationValue.id
					this.czggslList[this.SelectIndex].gg.name = this.specificationValue.name
				}

			},
			//关闭弹窗
			close(e) {
				this.open = false
			},
			//历史
			history() {
				if (this.isEmpty(this.projectName.id)) {
					this.$modal.msg('请选择工程名称')
					return
				}
				getTopPipeHistoryList(this.id, this.objValue.value).then(response => {

					this.historyList = response.data
					if (response.data.zEngineeringNodeBo.zEngineeringInfoBoList != null) {
						this.$refs.refShare.handleShowShare();
					} else {
						this.$modal.msg("暂无历史信息")
					}

				});
			},
			//提交
			submit() {
				if (this.isEmpty(this.projectName.id)) {
					this.$modal.msg('请选择工程名称')
					return
				}
				try {
					this.czggslList.forEach((list) => {
						if (this.isEmpty(list.cz.id)) {
							this.$modal.msg('材质不能为空')


							throw new Error('End Loop')

						}
						if (this.isEmpty(list.gg.id)) {
							this.$modal.msg('规格不能为空')
							throw new Error('End Loop')

						}

						if (this.isEmpty(list.sl.inputIntegerNumberValue)) {
							this.$modal.msg("请输入米数")
							throw new Error('End Loop')
						}



					})
				} catch (e) {
					if (e.message === 'End Loop') throw e
				}
				this.zEngineeringMaterialBo = [];

				this.czggslList.forEach((list) => {
					this.zEngineeringMaterialBo.push({
						materialQuality: list.cz.id,
						specifications: list.gg.id,
						number: list.sl.inputIntegerNumberValue + (list.sl
							.inputDecimalNumberValue ==
							'' ?
							'' : "." + list.sl.inputDecimalNumberValue)
					})
				})
				if (this.imgArr.length <= 0) {
					this.$modal.msg('请上传照片或视频')
					return
				}
				if (this.loading == false) {
					this.$modal.msg('照片或视频未上传完毕，无法提交！')
				}

				if (this.isEmpty(this.inputDecimalNumberValue)) {
					this.inputNumberValue = this.inputIntegerNumberValue;
				} else {
					this.inputNumberValue = this.inputIntegerNumberValue + "." + this.inputDecimalNumberValue;
				}
				let param = {
					id: this.id,
					enginId: this.enginId,
					enginName: this.projectName.name,
					enginAddre: this.gcddValue,
					enginCode: this.gcbmValue,
					constructUnit: this.sgdwValue,
					enginScale: this.gcgmValue,
					constructQuality: this.sgzlValue,
					constructSchedule: this.sgjdValue,

					files: this.fileArr,
					zEngineeringNodeBo: {
						type: this.objValue.value,
						zEngineeringInfoBo: {
							constructTime: this.time,
							remark: this.projectContent,
							zEngiineeringPhotoBoList: this.imgArr,
							zEngineeringMaterialBo: this.zEngineeringMaterialBo // 用料对象
						}
					}
				}


				uni.showLoading()
				SubmitTopPipeWork(param).then(res => {
					if (res.code == '200') {
						uni.hideLoading()
						uni.showToast({
							title: res.msg,
							icon: 'none',
							//显示持续时间为 3秒
							duration: 1000
						});
						setTimeout(function() {
							uni.navigateBack();
						}, 1000)

					}
				})
			},

		}
	}
</script>

<style>
	.container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		position: relative;

	}

	.uni-list {
		border: 1xp solid #eee;
	}

	.to-right-icon {
		width: 15px;
		height: 15px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}


	.text {
		font-size: 16px;
		color: #333;
	}

	.background {
		// border: 15px solid hsla(0, 0%, 100%, .5);
		background: white;
		background-clip: padding-box;
		padding: 20rpx;
		border-radius: 20rpx;
		margin: 20rpx 10rpx;
		/*从padding开始往外面裁剪背景*/


	}

	.btn {
		width: 715rpx;
		height: 69rpx;
		background: #79A4F0;
		border-radius: 6rpx;
		font-size: 25rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 69rpx;
		margin-top: 40rpx;
		margin-bottom: 100rpx;
	}


	.number {
		display: flex;
		/* 水平居中显示子元素 */
		align-items: flex-start;
		/* 垂直居中显示子元素 */
		justify-content: space-between;
		/* 左右间距等于间距大小 */
		padding: 10px;
		/* 设置padding以提高视觉效果 */
	}

	.tj-btn {
		height: 69rpx;
		background: #3184f0;
		border-radius: 6rpx;
		font-size: 25rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 69rpx;
		margin: 40rpx 70rpx;

	}

	.sc-btn {
		height: 69rpx;
		background: #f0686b;
		border-radius: 6rpx;
		font-size: 25rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 69rpx;
		margin: 40rpx;

	}

	.num-style {
		background: #e8f4f9;
		margin: 20rpx;
		padding: 10rpx;
		border-radius: 20rpx;
		border: 1px solid #d4e3f0;
	}


	.textarea {
		margin-top: 10upx;
		width: 100%;
		border: 1rpx solid red;
		min-height: 100upx;
		line-height: 20px;
	}

	page {
		background: #f2f2f2;
	}

	.flex-x {
		display: flex;
		align-items: center;
	}

	.template_title,
	.template_title1,
	.template_title_list {
		height: 90rpx;
		background: #fff;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.template_title1 {
		background: none;
	}

	.template_title_list {
		margin-bottom: 4rpx;
	}

	.template_title>view,
	.template_title1>view {
		font-size: 32rpx;
		color: #8f8f8f;
		flex-shrink: 0;
		margin-right: 20rpx;
	}

	.template_title>input {
		font-size: 28rpx;
		color: #808080;
		text-align: right;
		flex-grow: 1;
	}

	/* 添加内容 */

	.add_con>text {
		font-size: 40rpx;
		color: #f16765;
		display: block;
		margin-right: 20rpx;
		margin-left: 10rpx;
		line-height: 44rpx;
	}

	.add_con>view {
		font-size: 32rpx;
		color: #7885cb;
	}

	/* 删除内容 */

	.del {
		font-size: 32rpx;
		color: #f16765;
		margin-right: 14rpx;
		padding: 20rpx;
	}

	input {
		flex-grow: 1;
		font-size: 28rpx;
		color: #808080;
	}
</style>