dl_uniapp/pages/notice/public-notice.vue

<template>
	<view class="container-box">
		<navigation-bar-vue title="发布种草通告" style="width: 100%;" background-color="#ffffff"
			title-color="#000000"></navigation-bar-vue>
		<view class="content">
			<!-- 操作按钮 -->
			<view class="dl-opt-box">
				<view class="dl-menu-box">
					<view @click="handleUserAgrement(globalConfig.appInfo.agreements[7])" class="dl-menu">
						<image class="dl-vip" src="@/static/detail/shenhebiaozhun.png" mode="aspectFit"></image>
						{{globalConfig.appInfo.agreements[7].title}}
					</view>
					<view @click="handleUserAgrement(globalConfig.appInfo.agreements[8])" class="dl-menu">
						<image class="dl-vip" src="@/static/detail/jinjiejiqiao.png" mode="aspectFit"></image>
						{{globalConfig.appInfo.agreements[8].title}}
					</view>
				</view>
			</view>
			<view class="data-list-box">
				<view class="form-warn">
					<image src="@/static/detail/warn.png" mode="aspectFit"></image>
					<text>注意：请勿发布直发、代发等虚假通告
						为了您的信息安全，平台不建议填写您的银行卡号、身份证号、密码等隐私信息</text>
				</view>


				<view class="form-content">
					<view class="item-field">
						<view class="item-lable is-required">
							标题
						</view>
						<view class="item-value">
							<input class="uni-input" v-model="dataObj.title" type="text" placeholder="请输入" />
						</view>
					</view>
					<view class="item-field">
						<view class="item-lable is-required">
							平台
						</view>
						<view class="item-value">
							<uni-data-select v-model="dataObj.platformCode" :localdata="platFormRange"
								@change="change($event,'platformCode')" :clear="false"
								:imgCode="dataObj.platformCode"></uni-data-select>
						</view>
					</view>
					<view class="item-field">
						<view class="item-lable is-required">
							截止时间
						</view>
						<view class="item-value">
							<uni-datetime-picker type="date" :clear-icon="false" v-model="dataObj.endDate"
								@maskClick="maskClick" />
						</view>
					</view>
					<view class="item-field">
						<view class="item-lable is-required">
							稿费下限
						</view>
						<view class="item-value">
							<input class="uni-input" v-model="dataObj.feeDown" type="digit" placeholder="最低" />
						</view>
					</view>
					<view class="item-field">
						<view class="item-lable">
							稿费上限
						</view>
						<view class="item-value">
							<input class="uni-input" v-model="dataObj.feeUp" type="digit" placeholder="最高(不填代表无上限)" />
						</view>
					</view>
					<view class="item-field">
						<view class="item-lable">
							招募名额
						</view>
						<view class="item-value">
							<input class="uni-input" v-model="dataObj.needNum" type="number"
								placeholder="请输入(不填代表无上限)" />
						</view>
					</view>
					<view class="item-field">
						<view class="item-lable is-required">
							是否需自报价
						</view>
						<view class="item-value">
							<uni-data-select v-model="dataObj.isSelfPrice" :localdata="ifHasRange"
								@change="change($event,'isSelfPrice')" :clear="false"></uni-data-select>
						</view>
					</view>
					<view class="item-field">
						<view class="item-lable is-required">
							是否平台结算
						</view>
						<view class="item-value">
							<uni-data-select v-model="dataObj.isPlatformFree" :localdata="ifHasRange"
								@change="change($event,'isPlatformFree')" :clear="false"></uni-data-select>
						</view>
					</view>
					<view class="item-field">
						<view class="item-lable is-required">
							是否有赠品
						</view>
						<view class="item-value">
							<uni-data-select v-model="dataObj.haveGift" :localdata="ifHasRange"
								@change="change($event,'gift')" :clear="false"></uni-data-select>
						</view>
					</view>
					<view class="item-field">
						<view class="item-lable is-required">
							是否公开品牌
						</view>
						<view class="item-value">
							<uni-data-select v-model="dataObj.isShowBrand" :localdata="ifHasRange"
								@change="change($event,'isShowBrand')" :clear="false"></uni-data-select>
						</view>
					</view>
					<view class="item-field">
						<view class="item-lable is-required">
							品牌
						</view>
						<view class="item-value">
							<input class="uni-input" v-model="dataObj.brand" type="text" placeholder="请输入" />
						</view>
					</view>

					<view class="item-field">
						<view class="item-lable is-required">
							粉丝下限
						</view>
						<view class="item-value">
							<input class="uni-input" v-model="dataObj.fansDown" type="digit" placeholder="最低" />


						</view>
					</view>
					<view class="item-field">
						<view class="item-lable ">
							粉丝上限
						</view>
						<view class="item-value">
							<input class="uni-input" v-model="dataObj.fansUp" type="digit" placeholder="最高(不填代表无上限)" />
						</view>
					</view>

					<view class="item-field">
						<view class="item-lable ">
							地区要求
						</view>
						<view class="item-value">
							<uni-data-picker placeholder="请选择" popup-title="请选择收件地址" :localdata="dataTree"
								v-model="dataObj.cityId" @change="onchange" @nodeclick="onnodeclick"
								@popupopened="onpopupopened" @popupclosed="onpopupclosed">
							</uni-data-picker>
						</view>
					</view>
					<view class="item-field">
						<view class="item-lable">
							博主类型 <text class="little-text">(可多选)</text>
						</view>
						<view class="item-value">
							<view class="line-row" v-for="(item,index) in bloggerTypeList">
								<view v-for="(t,i) in item"
									:class="dataObj.bloggerTypesList.includes(t.value)?'line-item click':'line-item'"
									@click="changeChooseValue(t.value,'bloggerTypesList','bloggerTypes')">
									<uni-icons v-if="'new'==t.value" type="plusempty" size="18"></uni-icons>
									<text v-else>{{t.text}}</text>
								</view>
								<view style="clear: both;"></view>
							</view>
						</view>
					</view>

					<view class="item-field">
						<view class="item-lable ">
							产品图
						</view>
						<view class="item-value">
							<uni-file-picker :value="fileList" :sizeType="sizeType"
								@select="afterRead($event,'fileList')" @delete="deleteFile($event,'fileList')"
								limit="9"></uni-file-picker>
						</view>
					</view>
					<view class="item-field">
						<view class="item-lable ">
							微信群码<text class="little-text">(选填)</text>
						</view>
						<view class="item-value">
							<uni-file-picker :value="groupImageList" :sizeType="sizeType"
								@select="afterRead($event,'groupImageList')"
								@delete="deleteFile($event,'groupImageList')" limit="1"></uni-file-picker>
						</view>
					</view>
					<view class="item-field">

						<view class="item-lable is-required">
							通告明细
						</view>
						<view class="item-value">
							<textarea v-model="dataObj.detail" style="height: 600rpx;" type="text"
								placeholder="请输入通告明细" />
						</view>
					</view>
				</view>
				<!-- 自定义表单 -->
				<view class="form-content">
					<view class="item-field-row" style="padding-top: 0;">
						<view class="item-lable " style="flex: 1;">
							自定义报名信息收集：
						</view>
						<view class="item-value" style="width: 200rpx;">
							<uni-icons type="plusempty" size="18"></uni-icons><text @click="addNewField()">添加信息</text>
						</view>
					</view>

					<view class="item-field-row" v-for="(item,index) in customFieldList">
						<view class="item-lable is-required">
							{{item}}
						</view>
						<view class="item-value">
							<input class="uni-input" disabled type="text" placeholder="请输入" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="dl-bottom-box">
			<!-- 预览 -->
			<view class="view-dom" @click="preview()">
				预览
			</view>
			<view class="public-dom" @click="publish()">
				发布
			</view>
		</view>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="新增博主类型" placeholder="请输入博主类型"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialogCus" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="新增信息" placeholder="请输入信息"
				@confirm="dialogInputConfirmCus"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import navigationBarVue from '@/components/navigation/navigationBar.vue';
	import {
		toast
	} from '@/utils/common.js'
	import upload from '@/utils/upload'
	import {
		uniListByParentCode
	} from '@/api/system/config.js'
	import config from '@/config';
	import {
		treeCity
	} from '@/api/business/base.js'
	import {
		saveNotice,
		getNoticeDetail
	} from '@/api/business/notice';
	export default {
		components: {
			navigationBarVue,
		},
		data() {
			return {
				//城市树结构
				dataTree: [],
				//一行显示几个
				showNum: 4,
				globalConfig: getApp().globalData.config,
				//博主分类
				bloggerTypeList: [],
				//所有可选的平台
				platFormRange: [],
				globalConfig: getApp().globalData.config,
				uploadUrl: config.baseUrl,
				sizeType: ['compressed'],
				//产品图片数组
				fileList: [],
				//微信群码
				groupImageList: [],
				//自定义表单
				customFieldList: [],
				dataObj: {
					isRead: 0,
					title: "",
					brand: "",
					platformCode: "xiaohongshu",
					feeLimit: 0,
					feeDown: null,
					feeUp: null,
					haveGift: null,
					giftDetail: "",
					giftPrice: null,
					endDate: null,
					needNum: null,
					fansLimit: 0,
					fansDown: null,
					fansUp: null,
					// 报名是否需符合粉丝要求(0否|1是)
					isEligible: null,
					//博主类型，按逗号拼接
					bloggerTypes: "",
					//博主类型数组，方便判断
					bloggerTypesList: [],
					tel: "",
					wechat: "",
					// 是否公开联系方式(0否|1是)
					isShowTel: null,
				},
				isEligibleList: [{
					text: '报名需符合粉丝要求',
					value: true
				}],
				isShowTelList: [{
					text: '不公开联系方式，我会自己联系博主',
					value: true
				}],
				readBookList: [{
					text: '我已阅读并同意',
					value: true
				}],
				//有无限制下拉框可选值
				ifHasRange: [{
						value: 0,
						text: "否"
					},
					{
						value: 1,
						text: "是"
					}
				],
				//是否限制
				limitRange: [{
						value: 0,
						text: "不限制"
					},
					{
						value: 1,
						text: "限制"
					}
				],

			}
		},
		onLoad(params) {
			this.initData("dl_platform", 'platFormRange')
			this.initData("dl_blogger_type", "bloggerTypeList")
			this.initAddress()
			if (params.sameId) {
				this.getSameNotice(params.sameId)
			}
		},
		methods: {
			getSameNotice(sameId) {
				getNoticeDetail({
					noticeId: sameId
				}).then(res => {
					if (res.code == 200) {
						this.dataObj = res.data.noticeDetail
						this.dataObj.id = null
						if (res.data.noticeDetail.bloggerTypes) {
							this.dataObj.bloggerTypesList = res.data.noticeDetail.bloggerTypes.split(",")
						}
						//处理产品图和群码
						if (this.dataObj.images) {
							this.dataObj.images.split(',').forEach(it => {
								this.fileList.push({
									url: config.baseUrl + it
								})
							})
						}
						if (this.dataObj.groupImage) {
							this.dataObj.groupImage.split(',').forEach(it => {
								this.groupImageList.push({
									url: config.baseUrl + it
								})
							})
						}
						if (this.dataObj.customForm) {
							this.customFieldList = this.dataObj.customForm
						}


					}
				}).catch((e) => {
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: e
					});
				})
			},
			validForm(data) {
				if (!data.title) {
					uni.showToast({
						title: '标题必填',
						icon: 'none',
						duration: 1000
					})
					return true;
				}

				if (!data.platformCode) {
					uni.showToast({
						title: '平台必填',
						icon: 'none',
						duration: 1000
					})
					return true;
				}

				if (!data.endDate) {
					uni.showToast({
						title: '截止时间必填',
						icon: 'none',
						duration: 1000
					})
					return true;
				}

				if (!data.feeDown) {
					uni.showToast({
						title: '稿费下限必填',
						icon: 'none',
						duration: 1000
					})
					return true;
				}
				if (data.isSelfPrice == null || data.isSelfPrice == undefined) {
					uni.showToast({
						title: '是否需自报价必填',
						icon: 'none',
						duration: 1000
					})
					return true;
				}
				if (data.isPlatformFree == null || data.isPlatformFree == undefined) {
					uni.showToast({
						title: '是否平台结算必填',
						icon: 'none',
						duration: 1000
					})
					return true;
				}
				if (data.haveGift == null || data.haveGift == undefined) {
					uni.showToast({
						title: '是否有赠品必填',
						icon: 'none',
						duration: 1000
					})
					return true;
				}
				if (data.isShowBrand == null || data.isShowBrand == undefined) {
					uni.showToast({
						title: '是否公开品牌必填',
						icon: 'none',
						duration: 1000
					})
					return true;
				}
				if (!data.brand) {
					uni.showToast({
						title: '品牌必填',
						icon: 'none',
						duration: 1000
					})
					return true;
				}
				if (!data.fansDown) {
					uni.showToast({
						title: '粉丝下限必填',
						icon: 'none',
						duration: 1000
					})
					return true;
				}

				if (!data.detail) {
					uni.showToast({
						title: '通告明细必填',
						icon: 'none',
						duration: 1000
					})
					return true;
				}
			},
			//预览功能
			preview() {
				if (this.validForm(this.dataObj)) {
					return
				}
				//草稿状态
				this.dataObj.approvalStatus = '8'
				if (this.fileList && this.fileList.length > 0) {
					this.dataObj.images = []
					this.dataObj.groupImage = ''
					this.fileList.forEach(it => {
						this.dataObj.images.push(it.url.replace(config.baseUrl, ''))
					})
					if (this.dataObj.images && this.dataObj.images.length > 0) {
						this.dataObj.images = this.dataObj.images.join(',')
					}
				}


				this.groupImageList.forEach(it => {
					this.dataObj.groupImage = it.url.replace(config.baseUrl, '')
				})

				this.dataObj.customForm = this.customFieldList
				saveNotice(this.dataObj).then(res => {
					this.dataObj.id = res.data.noticeId
					this.goDetail(res.data.noticeId)

				})
			},
			publish() {
				if (this.validForm(this.dataObj)) {
					return
				}
				//待审核状态
				this.dataObj.approvalStatus = '0'
				if (this.fileList && this.fileList.length > 0) {
					this.dataObj.images = []
					this.dataObj.groupImage = ''
					this.fileList.forEach(it => {
						this.dataObj.images.push(it.url.replace(config.baseUrl, ''))
					})
					if (this.dataObj.images && this.dataObj.images.length > 0) {
						this.dataObj.images = this.dataObj.images.join(',')
					}
				}


				this.groupImageList.forEach(it => {
					this.dataObj.groupImage = it.url.replace(config.baseUrl, '')
				})

				this.dataObj.customForm = this.customFieldList
				saveNotice(this.dataObj).then(res => {
					this.dataObj.id = res.data.noticeId
					uni.showToast({
						title: '发布成功等待审核',
						icon: 'none',
						duration: 1000
					})

					setTimeout(function() {
						uni.navigateBack()
					}, 1000)


				})
			},
			/**
			 * 查看通告详情
			 * @param {Object} item
			 */
			goDetail(noticeId) {
				this.$tab.navigateTo(`/pages/notice/detail?id=${noticeId}&type=preview`)
			},
			saveData() {
				console.log(this.dataObj, 357);

			},
			/**初始化树结构*/
			initAddress() {
				treeCity().then(res => {
					res.data.forEach(it => {
						if (it.children) {
							it.children.forEach(item => {
								item.children = null
							})
						}
					})
					this.dataTree = res.data
				}).catch((e) => {
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: e
					});
				})
			},
			// 查看相关协议
			handleUserAgrement(site) {
				this.$tab.navigateTo(`/pages/common/richview/index?title=${site.title}&code=${site.code}`)
			},
			/**
			 * 添加字段
			 */
			addNewField() {
				this.$refs.inputDialogCus.open()
			},
			// 查看相关协议
			handleUserAgrement(site) {
				this.$tab.navigateTo(`/pages/common/richview/index?title=${site.title}&code=${site.code}`)
			},
			/**初始化字典数据*/
			initData(code, key) {
				let that = this
				uniListByParentCode({
					code: code
				}).then(res => {
					if (res.code == 200) {
						if ("bloggerTypeList" == key) {
							let thisArray = res.data
							thisArray.push({
								text: "",
								value: "new"
							})
							for (let i = 0; i < thisArray.length; i += that.showNum) {
								that[key].push(thisArray.slice(i, i + that.showNum));
							}
						} else {
							that[key] = res.data
						}
					}
				}).catch((e) => {
					toast(e)
				})
			},
			//改变选中值
			change(e, type) {},
			/**
			 * 复选框
			 * @param {Object} e
			 */
			chooseBoxFun(e, key) {
				if (e.detail.value.length > 0) {
					//选中
					this.dataObj[key] = 1
				} else {
					//未选中
					this.dataObj[key] = 0
				}
				console.log(this.dataObj)
			},
			afterRead(file, key) {
				for (let i = 0; i < file.tempFilePaths.length; i++) {
					upload({
						url: '',
						filePath: file.tempFilePaths[i]
					}).then((res) => {
						console.log(res, '215')
						this[key].push({
							url: res.url
						})
						console.log(this[key], "this[key]")
					})
				}
			},
			deleteFile(index, key) {
				console.log('删除文件', this[key][index]);
				this[key].splice(index, 1);
			},
			/**
			 * 选择
			 * @param {Object} value
			 * @param {Object} keyList
			 * @param {Object} key
			 */
			changeChooseValue(value, keyList, key) {
				if ('new' == value) {
					this.$refs.inputDialog.open()
				} else {
					if (this.dataObj[keyList].includes(value)) {
						//原来包含，需要去掉
						let newList = []
						this.dataObj[keyList].map((item) => {
							if (value != item) {
								newList.push(item)
							}
						})
						this.dataObj[keyList] = newList
					} else {
						//没有，追加
						this.dataObj[keyList].push(value)
					}
					this.dataObj[key] = this.dataObj[keyList].join(",")
				}
			},
			dialogInputConfirm(val) {
				let thisObj = {
					text: val,
					value: val
				}
				//TODO  这里还需要走后台的插入接口---添加博主类型
				let endArray = this.bloggerTypeList[this.bloggerTypeList.length - 1]
				if (endArray.length == this.showNum) {
					//正好是一行，需要替换掉最后一个，另起一个新数组
					endArray[endArray.length - 1] = thisObj
					let newArray = [{
						text: "",
						value: "new"
					}]
					this.bloggerTypeList[this.bloggerTypeList.length - 1] = endArray
					this.bloggerTypeList.push(newArray)
				} else {
					//不到一行，在倒数第二位插入本对象
					endArray.splice(endArray.length - 1, 0, thisObj)
					this.bloggerTypeList[this.bloggerTypeList.length - 1] = endArray
				}
				// 关闭窗口后，恢复默认内容
				this.$refs.inputDialog.close()
			},
			dialogInputConfirmCus(val) {
				let thisObj = val
				this.customFieldList.push(thisObj)
				// 关闭窗口后，恢复默认内容
				this.$refs.inputDialogCus.close()
			}
		}
	}
</script>

<style lang="scss">
	.container-box {
		padding-top: calc(90rpx + var(--status-bar-height));
		border-top: 1rpx solid #F4F4F4;
		background-color: white;
		width: 100%;
		color: #363636;
		font-size: 30rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: self-start;
		justify-content: center;
		position: relative;

		.content {
			border-top: 1rpx solid #F4F4F4;
			height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 232rpx);
			overflow-y: scroll;
			width: 100%;
			background-color: #F2F2F2;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: self-start;
			justify-content: start;
			position: relative;

			.dl-opt-box {
				background-color: white;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.dl-menu-box {
					color: #929292;
					display: flex;
					flex: 1;
					align-items: center;
					justify-content: center;
					width: 100%;
					padding-top: 20rpx;

					.dl-menu {
						display: flex;
						align-items: center;
						justify-content: center;
						flex: 1;
						font-size: 30rpx;
						color: #FC1F3E;
						margin: 0 20rpx;
						padding-bottom: 15rpx;
						text-align: center;

						image {
							margin-right: 10rpx;
							width: 26rpx;
							height: 26rpx;
						}
					}

				}

			}

			.data-list-box {
				flex: 1;
				overflow-y: scroll;
				padding: 20rpx 30rpx;
				display: flex;
				flex-direction: column;
				align-items: self-start;
				justify-content: start;
				width: 100%;

				.form-warn {
					width: 100%;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: start;
					background-color: #FDECD9;
					color: #FF6627;
					border-radius: 20rpx;
					padding: 15rpx;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}

					text {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: start;
					}
				}

				.form-content {
					width: 100%;
					background-color: white;
					padding: 20rpx;
					border-radius: 20rpx;
					margin-top: 25rpx;

					.item-field-row {
						width: 100%;
						padding-top: 15rpx;
						display: flex;
						align-items: center;
						justify-content: start;
						padding-bottom: 15rpx;
						border-bottom: 1rpx solid #F4F4F4;

						.img-upload {
							width: 50%;
							margin: 10rpx 10rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.is-required:before {
							content: "*";
							color: #FC1F3E;

							image {
								width: 20rpx;
								height: 20rpx;
								margin-right: 10rpx;
							}
						}

						.item-lable {
							font-weight: bold;
							width: 210rpx;
							padding: 15rpx 0;
							display: flex;
							align-items: center;
							justify-content: start;

						}

						.item-value {
							flex: 1;
							padding-left: 20rpx;
							display: flex;
							align-items: center;
							justify-content: flex-end;

							input {
								width: 100%;
								padding-left: 20rpx;
								line-height: 1;
								height: 70rpx;
								border: 1rpx solid #dcdfe6;
								border-radius: 8rpx;
							}

							.choose-add {
								color: #686868;
								padding: 10rpx 0 10rpx 20rpx;
								display: flex;
								align-items: center;
								justify-content: flex-start;
								border: 1rpx solid #dcdfe6;
								border-radius: 8rpx;
							}

							textarea {
								width: 100%;
								height: 150rpx;
								color: #686868;
								padding: 10rpx 0 10rpx 20rpx;
								border: 1rpx solid #dcdfe6;
								border-radius: 8rpx;
							}
						}
					}

					.item-field {
						width: 100%;
						display: flex;
						flex-direction: column;
						align-items: self-start;
						justify-content: center;
						padding-bottom: 20rpx;
						border-bottom: 1rpx solid #F4F4F4;

						.warn-little-text {
							color: #FE9860;
							font-size: 18rpx;
							margin-bottom: 20rpx;
						}

						.is-required:before {
							content: "*";
							color: #FC1F3E;

							image {
								width: 20rpx;
								height: 20rpx;
								margin-right: 10rpx;
							}
						}

						.item-lable {
							padding: 15rpx 0;
							font-weight: bold;
							display: flex;
							align-items: center;
							justify-content: center;

							.little-text {
								padding-left: 10rpx;
								font-weight: normal;
								color: #929292;
							}
						}

						.item-value {
							width: 100%;

							.line-row {
								width: 100%;

								.line-item {
									width: calc(25% - 16rpx);
									border: 1rpx solid #E9E9E9;
									margin: 8rpx 8rpx;
									float: left;
									border-radius: 25rpx;
									color: #363636;
									text-align: center;
									padding: 8rpx 15rpx;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								.click {
									color: #FC1F3E !important;
									border: 1rpx solid #FC1F3E !important;
								}
							}

							.dl-drawer-item {
								display: flex;
								color: #929292;
								align-items: center;
								justify-content: start;
								padding-top: 10rpx;
							}

							input {
								width: 100%;
								padding-left: 20rpx;
								line-height: 1;
								height: 70rpx;
								border: 1rpx solid #dcdfe6;
								border-radius: 8rpx;
							}

							.choose-add {
								color: #686868;
								padding: 10rpx 0 10rpx 20rpx;
								display: flex;
								align-items: center;
								justify-content: flex-start;
								border: 1rpx solid #dcdfe6;
								border-radius: 8rpx;
							}

							textarea {
								width: 100%;
								height: 150rpx;
								color: #686868;
								padding: 10rpx 0 10rpx 20rpx;
								border: 1rpx solid #dcdfe6;
								border-radius: 8rpx;
							}
						}
					}
				}
			}
		}

		.dl-bottom-box {
			border-top: 1rpx solid #EEEEEE;
			height: calc(var(--window-bottom) + 140rpx);
			padding-bottom: var(--window-bottom);
			color: #363636;
			position: fixed;
			padding-bottom: 20rpx;
			bottom: 0;
			background-color: #F7F7F7;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 9;

			.view-dom {
				flex: 1;
				margin: 0 30rpx;
				color: #181D24;
				background-image: linear-gradient(to right, #F7DDBD, #EFCBA0);
				padding: 20rpx 0;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.public-dom {
				flex: 1;
				margin: 0 30rpx;
				padding: 20rpx 0;
				border-radius: 30rpx;
				color: white;
				background-color: #FC1F3E;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.line-row-bottom {
			width: 100%;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.text-red {
				color: #FC1F3E;
			}
		}
	}

	.checklist-box {
		margin-right: 0 !important;
	}
</style>