xhlred/pages/applyHelp/index.vue

<template>
	<view class="cantent">
		<view class="tit-tip">
			基本信息
		</view>
		<view class="content_box">
			<view class="row b-b">
				<text class="tit">姓名</text>
				<input class="input" type="text" :disabled="disabled" v-model="full_name" placeholder="请填写您的姓名"
					placeholder-class="placeholder" />
			</view>
			<!-- <view class="row b-b">
				<text class="tit">年龄</text>
				<input class="input" type="text" :disabled="disabled" v-model="age" placeholder="请填写您的年龄"
					placeholder-class="placeholder" />
			</view> -->
			<view class="row b-b">
				<text class="tit">性别</text>
				<input class="input" type="text" :disabled="disabled" v-model="sex" placeholder="请填写您的性别"
					placeholder-class="placeholder" />
			</view>
		</view>
		<view class="content_box">
			<view class="row b-b" v-if="status =='' ">
				<text class="tit">政治面貌</text>
				<picker mode="selector" :range="checkedList" @change="changeChecked" style="flex-grow: 1;">
					<input class="input" disabled v-model="checked" placeholder="请选择政治面貌"
						placeholder-class="placeholder" />
				</picker>
			</view>
			<view class="row b-b" v-if="status ==2 ">
				<text class="tit">政治面貌</text>
				<input class="input" :disabled="disabled" v-model="address" placeholder="省市区"
					placeholder-class="placeholder" />
			</view>
			<view class="row" v-if="status == ''" @click="selectDatePicker(type)">
				<text class="tit">出生日期：</text>
				<input class="input" type="text" v-model="birthday" disabled="true" placeholder-class="placeholder" />
				<datetime ref='date-time' :type='type' :datestring='dateString' @change='dateTimeChange'>
				</datetime>
			</view>
			<view class="row" v-if="status == 2">
				<text class="tit">出生日期：</text>
				<input class="input" type="text" v-model="birthday" disabled="true" placeholder-class="placeholder" />
				<datetime ref='date-time' :type='type' :datestring='dateString' @change='dateTimeChange'>
				</datetime>
			</view>
			<view class="row b-b">
				<text class="tit">身份证号</text>
				<input class="input" type="number" :disabled="disabled" v-model="id_card" placeholder="请填写身份证号"
					placeholder-class="placeholder" />
			</view>
			<!-- <view class="row b-b" v-if="status =='' ">
				<text class="tit">省市区</text>
				<pickerAddress class="input" @change="onCityClick">{{address||'请选择省市区'}}</pickerAddress>
			</view> -->
			<!-- <view class="row b-b" v-if="status ==2 ">
				<text class="tit">省市区</text>
				<input class="input" :disabled="disabled" v-model="address" placeholder="省市区"
					placeholder-class="placeholder" />
			</view> -->
			<view class="row b-b">
				<text class="tit">家庭住址</text>
				<input class="input" v-model="address" :disabled="disabled" placeholder="请填写详细地址"
					placeholder-class="placeholder" />
			</view>
			<view class="row b-b">
				<text class="tit">联系电话</text>
				<input class="input" type="text" :disabled="disabled" v-model="phone" placeholder="请填写联系电话"
					placeholder-class="placeholder" />
			</view>
			<view class="row b-b">
				<text class="tit">工作单位</text>
				<input class="input" type="text" :disabled="disabled" v-model="work" placeholder="请填写工作单位"
					placeholder-class="placeholder" />
			</view>
			<view class="row b-b" v-if="status =='' ">
				<text class="tit">单位性质</text>
				<picker mode="selector" :range="checkedtList" @change="changeCheckedt" style="flex-grow: 1;">
					<input class="input" disabled v-model="checked1" placeholder="请选择单位性质"
						placeholder-class="placeholder" />
				</picker>
			</view>
			<view class="row b-b" v-if="status ==2 ">
				<text class="tit">单位性质</text>
				<input class="input" :disabled="disabled" v-model="checked1" placeholder="请选择单位性质"
					placeholder-class="placeholder" />
			</view>
		</view>
		<view class="tit-tip">
			信息选择
		</view>
		<view class="content_box">
			<view class="row b-b" v-if="status =='' ">
				<text class="tit">身份</text>
				<picker mode="selector" :range="identityList" @change="changeidentity" style="flex-grow: 1;">
					<input class="input" disabled v-model="identity" placeholder="请选择身份"
						placeholder-class="placeholder" />
				</picker>
			</view>
			<view class="row b-b" v-if="status =='' ">
				<text class="tit">婚姻状态</text>
				<picker mode="selector" :range="maritalList" @change="changeMarital" style="flex-grow: 1;">
					<input class="input" disabled v-model="marital" placeholder="请选择婚姻状态"
						placeholder-class="placeholder" />
				</picker>
			</view>
			<view class="row b-b" v-if="status =='' ">
				<text class="tit">是否医保</text>
				<picker mode="selector" :range="insuranceList" @change="changeInsurance" style="flex-grow: 1;">
					<input class="input" disabled v-model="insurance" placeholder="请选择是否医保"
						placeholder-class="placeholder" />
				</picker>
			</view>
			<view class="row b-b" v-if="status =='' ">
				<text class="tit">对象特征</text>
				<picker mode="selector" :range="characteristicsList" @change="changeCharacteristics"
					style="flex-grow: 1;">
					<input class="input" disabled v-model="characteristics" placeholder="请选择是否医保"
						placeholder-class="placeholder" />
				</picker>
			</view>
			<view class="row b-b" v-if="status =='' " style="border-bottom: none;">
				<text class="tit" style="width: 400rpx;">制困原因（最多选三项）</text>
			</view>
			<view class="" style="padding-left: 50rpx;border-bottom: 1rpx solid #f8f6f6;" v-if="ready">
				<checkbox-group style="display: inline-block;" @change="checkMaleLikes">
					<label class="checkbox" v-for="item in maleLikeList" :key="item.name">
						<checkbox :checked="item.cheched" color="#E62129"
							style="transform:scale(0.6);margin: 0;padding: 0;" :value="item.name" />{{ item.name }}
					</label>
				</checkbox-group>
			</view>

		</view>
		<!-- 基本信息家庭成员情况 -->
		<view class="tit-tip">
			基本信息家庭成员情况
		</view>
		<view v-for="(ls,findex) in datalist" :key="">
			<view class="flex item-list">
				<view class="list-name">家庭成员({{findex+1}})</view>
				<view class="flex">
					<view class="add-tip" @click="addlist(findex)" v-if="findex == (datalist.length -1)">新增</view>
					<view class="add-tip" @click="dellist(findex)" style="margin-left: 20rpx;" v-if="findex != 0">删除
					</view>
				</view>

			</view>
			<view class="content_box" style="padding-left: 40rpx;margin-bottom: 10rpx;">
				<view class="row b-b">
					<text class="tit">姓名</text>
					<input class="input" type="text" v-model="ls.full_name" :disabled="disabled" placeholder="请填写成员姓名"
						placeholder-class="placeholder" />
				</view>
				<view class="row b-b">
					<text class="tit">与本人关系</text>
					<input class="input" type="text" v-model="ls.relation" :disabled="disabled" placeholder="请填写与本人关系"
						placeholder-class="placeholder" />
				</view>
				<view class="row b-b">
					<text class="tit">身份证号</text>
					<input class="input" type="text" v-model="ls.id_card" :disabled="disabled" placeholder="请填写身份证号"
						placeholder-class="placeholder" />
				</view>
				<view class="row b-b">
					<text class="tit">工作单位或就读学校</text>
					<input class="input" type="text" v-model="ls.work_unit" :disabled="disabled"
						placeholder="请填写工作单位或就读学校" placeholder-class="placeholder" />
				</view>
				<view class="row b-b">
					<text class="tit">健康状况</text>
					<input class="input" type="text" v-model="ls.healthy" :disabled="disabled" placeholder="请填写健康状况"
						placeholder-class="placeholder" />
				</view>
				<view class="row b-b">
					<text class="tit">月收入（元）</text>
					<input class="input" type="number" v-model="ls.monthly_income" :disabled="disabled"
						placeholder="请填写月收入（元）" placeholder-class="placeholder" />
				</view>
			</view>
		</view>
		<!-- 详细情况 -->
		<view class="tit-tip">
			详细情况
		</view>
		<view class="item-list">
			<view class="list-name">经济状况</view>
		</view>
		<view class="content_box">
			<view class="row b-b">
				<text class="tit">本人月收入（元）</text>
				<input class="input" type="number" v-model="yue" :disabled="disabled" placeholder="请填写本人月收入（元）"
					placeholder-class="placeholder" />
			</view>
			<view class="row b-b">
				<text class="tit">家庭年度总收入（元）</text>
				<input class="input" type="number" v-model="nian" :disabled="disabled" placeholder="请填写家庭年度总收入（元）"
					placeholder-class="placeholder" />
			</view>
			<view class="row b-b">
				<text class="tit">家庭年人均收入（元）</text>
				<input class="input" type="number" v-model="all" :disabled="disabled" placeholder="请填写家庭年人均收入（元）"
					placeholder-class="placeholder" />
			</view>
		</view>
		<view class="content_box">
			<view class="examine_list">
				<view class="examine_name">申请帮扶类型</view>
				<view class="textarea-box" @tap="handleTap('picker')" v-if="status == ''">
					<input class="input" @focus='outFocus' v-model="hpleType" type="text" placeholder="请选择您的申请帮扶类型"
						placeholder-class="placeholder" />
				</view>
				<view class="textarea-box" v-if="status == 2">
					<input class="input" @focus='outFocus' v-model="hpleType" type="text" placeholder="请选择您的申请帮扶类型"
						placeholder-class="placeholder" />
				</view>
			</view>
		</view>
		<lb-picker ref="picker" mode="selector" :list="list" @change="handleChange" @touchmove.prevent
			@confirm="handleConfirm" @cancel="handleCancel">
		</lb-picker>
		<view class="content_box">
			<view class="examine_list">
				<view class="examine_name">帮扶说明</view>
				<view class="textarea-box">
					<textarea class="textarea" :disabled="disabled" v-model="explain" maxlength="-1"
						placeholder-style="color:#999999" placeholder="如：关爱父母敬老爱幼等" @blur="bindTextAreaBlur"
						auto-height />
				</view>
			</view>
		</view>
		<view class="content_box">
			<view class="examine_list">
				<view class="examine_name">帮扶情况描述</view>
				<view class="textarea-box">
					<textarea class="textarea" :disabled="disabled" v-model="content" maxlength="-1"
						placeholder-style="color:#999999"
						placeholder="注：1.为了更加详细了解您的困难情况，请您陈述材料完整详细不少于500字。2.请您附上相关证明材料，如医疗材料：入院病案首页、出入院记录、检查报告、医疗票据选取三种以上，其他证明材料。"
						@blur="bindTextAreaBlur1" auto-height />
				</view>
			</view>
		</view>
		<view class="content_box mar-b">
			<view class="examine_list">
				<view class="examine_name">上传凭证<text>(请您上传相关证明材料)</text></view>
				<view class="examine_img">
					<view class="add-img-box flex_item" v-if="status == ''">
						<view class="add-img-item" v-for="(item, index) in imgList" :key="index">
							<image class="add-img" @click.stop="imgInfo(index)" :src="item.fullurl" mode="aspectFill">
							</image>
							<image class="add-img-del" @click.stop="delImg(index)" src="/static/img/delete.png"></image>
						</view>
						<view v-if='imgCount > 0' class="add-img-item" @click.stop="scImg()">
							<image class="add-img" src="/static/img/add.png"></image>
						</view>
					</view>
					<view class="add-img-box flex_item" v-if="status == 2">
						<view class="add-img-item" v-for="(item, index) in imgList" :key="index">
							<image class="add-img" @click.stop="imgInfo(index)" :src="item.fullurl" mode="aspectFill">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="add-btn" v-if="status == ''" @click="confirm">下一步</view>
		<view class="add-btn" v-if="status == 2" @click="Tosecond">下一步</view> -->
	</view>
</template>
<script>
	import uniList from '@/components/uni-list/uni-list.vue';
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
	import {
		upload,
		add_help
	} from '@/api/index.js';
	import {
		getList,
		helpdetail
	} from '@/api/applyHelp.js';
	import datetime from '@/components/DateTimePicker/DateTimePicker.vue'
	import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
	import LbPicker from '@/components/lb-picker/index.vue';
	export default {
		components: {
			uniList,
			uniListItem,
			pickerAddress,
			datetime,
			LbPicker
		},
		data() {
			return {
				ready: true,
				id: '',
				full_name: '', //姓名
				age: '', //年龄
				sex: '', //性别
				id_card: '', //身份证号
				phone: '', //电话
				address: '', //家庭住址
				addr: '',
				work: '', //工作单位
				checkedList: ['团员', '预备党员', '党员', '群众'], //政治面貌列表
				politics: '', //政治面貌
				checkedtList: ['国有企业', '私营企业', '外资企业', '事业单位', '个位经营', '无'], //单位性质列表
				identityList: ['居民', '村民', '农民工', '在岗', '下岗', '离退休', '病退病休'], //身份列表
				maritalList: ['已婚', '未婚', '离异', '丧偶'], //婚姻状况列表
				insuranceList: ['是', '否'], //是否医保列表
				characteristicsList: ['低保对象', '重度残疾', '低保边缘对象', '孤儿、孤寡老人', '因灾、因病致穷家庭', '其它'], //对象特征列表
				maleLikeList: [{ //致困原因（最多选三项）
					cheched: false,
					name: '意外灾害',
				}, {
					vcheched: false,
					name: '本人大病',
				}, {
					cheched: false,
					name: '子女上学',
				}, {
					cheched: false,
					name: '收入低无法维持基本生活',
				}, {
					cheched: false,
					name: '残疾',
				}, {
					cheched: false,
					name: '供养直系亲属大病',
				}, {
					cheched: false,
					name: '下岗失业',
				}, {
					cheched: false,
					name: '其它',
				}],
				datalist: [{
					full_name: "", //姓名
					relation: '', //关系
					id_card: '', //身份证
					work_unit: '', //单位
					healthy: '', //健康状态
					monthly_income: "", //月收入
				}], //家庭成员情况列表
				maleLike: '', // 制困原因
				maleLikeListt: [],
				characteristics: '', //对象特征
				insurance: '', //是否医保
				marital: '', //婚姻状况
				identity: '', //身份
				current: '',
				checked: '',
				current1: '',
				checked1: '',
				dateString: '',
				birthday: '请选择出生日期', //出生日期
				type: 'date',
				status: '', //审核通过
				disabled: false,
				yue: '',
				nian: '',
				all: '',
				cid: '',
				hpleType: '',
				explain: '',
				content: '', //孝善情况
				imgList: [],
				cloudimgList: [],
				imgCount: 9, //最多支持6张上传，可以修改
				id: '',
				list: [], //筹款类型
			};
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id;
				this.helpDetail();
			}
			if (option.status) {
				this.status = option.status;
				this.disabled = true;
			}
		},
		onUnload() {
			uni.navigateTo({
				url: '/pages/applyHelp/cation'
			});
		},
		methods: {
			// 选择政治面貌
			changeChecked(e) {
				console.log(e)
				this.checked = this.checkedList[e.detail.value]
			},
			// 选择单位性质
			changeCheckedt(e) {
				console.log(e)
				this.checked1 = this.checkedtList[e.detail.value]
			},
			// 选择身份
			changeidentity(e) {
				console.log(e)
				this.identity = this.identityList[e.detail.value]
			},
			// 选择婚姻状态
			changeMarital(e) {
				this.marital = this.maritalList[e.detail.value]
			},
			// 选择是否医保
			changeInsurance(e) {
				this.insurance = this.insuranceList[e.detail.value]
			},
			// 选择对象特征
			changeCharacteristics(e) {
				this.characteristics = this.characteristicsList[e.detail.value]
			},
			// 制困原因选择限制
			checkMaleLikes(e) {
				let arr = e.detail.value
				let len = arr.length
				let obj = this
				console.log(e)
				if (len <= 3) {
					obj.maleLike = e.detail.value.join(',');
					this.maleLikeListt = e.detail.value
				} else {
					obj.$api.msg('最多选择三个')
					// let arr2 = e.detail.value.slice(0, 3)
					// console.log(arr2, 'arr2')
					obj.maleLike = this.maleLikeListt.join(',');
				}
				for (let i = 0; i < obj.maleLikeList.length; i++) {
					if (obj.maleLike.indexOf(obj.maleLikeList[i].name) != -1) {
						obj.maleLikeList[i].cheched = true;
					} else {
						obj.maleLikeList[i].cheched = false;
					}
				}
				console.log(obj.maleLike, 'obj.maleLike++++++++')
				obj.reload()
			},
			// 表单刷新
			reload() {
				this.ready = false
				this.$nextTick(function() {
					this.ready = true
				})
			},
			//增加家庭成员
			addlist(index) {
				let obj = this
				let addobj = {
					full_name: "", //姓名
					relation: '', //关系
					id_card: '', //身份证
					work_unit: '', //单位
					healthy: '', //健康状态
					monthly_income: "", //月收入
				}
				obj.datalist.push(addobj)
			},
			// 删除成员
			dellist(index) {
				this.datalist.splice(index, 1)
			},
			//多张上传图片
			scImg() {
				let obj = this;
				upload({
					file: ''
				})
					.then(e => {
						obj.imgList = [...obj.imgList, ...e];
						console.log(obj.imgList,'imgList')
						obj.imgCount = 6 - obj.imgList.length;
					})
					.catch(e => {});
			},
			//点击图片显示大图
			imgInfo(i) {
				let tempList = [];
				this.imgList.forEach(e => {
					tempList.push(e.url);
				});
				//显示图片
				uni.previewImage({
					current: i,
					loop: false,
					urls: tempList,
					indicator: 'default'
				});
			},
			// 显示日期选择器
			selectDatePicker(type, index) {
				this.type = type;
				this.index = index;
				this.$refs['date-time'].show();
			},
			dateTimeChange(value) {
				this.birthday = value;
				console.log(value)
			},
			// 选中城市切换
			onCityClick(res) {
				let obj = this;
				let province = res.data[0];
				let city = res.data[1];
				let district = res.data[2];
				obj.address = province + city + district;
				console.log(obj.address, '城市');
			},
			//申请详情
			helpDetail() {
				let obj = this;
				helpdetail({
						id: obj.id
					}).then(({
						data
					}) => {
						obj.name = data.name;
						obj.sex = data.sex;
						obj.card = data.card;
						obj.phone = data.phone;
						obj.work = data.work;
						obj.birthday = data.birthday;
						obj.age = data.age;
						console.log(data.address)
						let addressDateil = data.address.split(',');
						console.log(addressDateil)
						obj.address = addressDateil[0];
						obj.addr = addressDateil[1];
						obj.checked = data.politic;
						if (obj.checked == '团员') {
							obj.current = 0;
						}
						if (obj.checked == '预备党员') {
							obj.current = 1;
						}
						if (obj.checked == '党员') {
							obj.current = 2;
						}
						if (obj.checked == '群众') {
							obj.current = 3;
						}
						obj.checked1 = data.properties;
						if (obj.checked1 == '国有企业') {
							obj.current1 = 0;
						}
						if (obj.checked1 == '私营企业') {
							obj.current1 = 1;
						}
						if (obj.checked1 == '外资企业') {
							obj.current1 = 2;
						}
						if (obj.checked1 == '事业单位') {
							obj.current1 = 3;
						}
						if (obj.checked1 == '个位经营') {
							obj.current1 = 4;
						}
						if (obj.checked1 == '无') {
							obj.current1 = 5;
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			Tosecond() {
				uni.navigateTo({
					url: '/pages/applyHelp/second?id=' + this.id + '&status=2'
				})
			},
			//提交
			confirm() {

				let obj = this;
				if (obj.full_name == '') {
					this.$api.msg('请填写您的姓名！');
					return;
				}
				// if (obj.age == '') {
				// 	this.$api.msg('请填写您的年龄！');
				// 	return;
				// }
				if (obj.sex == '') {
					this.$api.msg('请填写您的性别！');
					return;
				}
				if (obj.checked == '') {
					this.$api.msg('请填写您的政治面貌！');
					return;
				}
				if (obj.birthday == '' || obj.birthday == '请选择出生日期') {
					this.$api.msg('请选择出生日期！');
					return;
				}
				if (obj.card == '') {
					this.$api.msg('请填写您的身份证号！');
					return;
				}
				if (obj.address == '') {
					this.$api.msg('请选择省市区！');
					return;
				}
				if (obj.addr == '') {
					this.$api.msg('请填写您的详细地址！');
					return;
				}
				if (obj.phone == '') {
					this.$api.msg('请填写您的联系电话！');
					return;
				}
				if (obj.work == '') {
					this.$api.msg('请填写您的工作单位！');
					return;
				}
				if (obj.checked1 == '') {
					this.$api.msg('请填写您的单位性质！');
					return;
				}

				let data = {
					// category_id: , 
					// full_name: ,
					// contact: ,
					// id_card: ,
					// title: ,
					// info: ,
					// userimage: ,
					// userimages: ,
					// sex: , 
					// politics: , 
					// birthday: ,
					// address: ,
					// company: ,
					// unit_nature: ,
					// monthly_income: ,
					// annual_household_income: ,
					// annual_household_income_average: ,
					// identity: ,
					// marriage: , 
					// medical_insurance: , 
					// object_features: , 
					// reason: , 
					// family: ,
				}
			},
			navTo(url) {
				uni.navigateTo({
					url
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		min-height: 100%;
	}

	.cantent {
		padding-bottom: 110rpx;
	}

	.tip {
		color: #DE2412;
		background-color: #FEE2E3;
		font-size: 24rpx;
		padding: 25rpx 35rpx;
	}

	.til-list {
		padding: 35rpx 50rpx;
		font-size: 28rpx;
		color: #666666;

		.red {
			color: #E62129 !important;
		}
	}

	.name {
		padding: 0rpx 35rpx;
		padding-bottom: 15rpx !important;
		font-size: 36rpx;
		font-weight: 500;
	}

	.content_box {
		background-color: #ffffff;
		padding: 0rpx 25rpx;

		.list-name {
			padding-top: 25rpx;
			font-size: 35rpx;
			padding-left: 15rpx;
			padding-bottom: 10rpx;
		}

		.examine_list {
			width: 100%;

			.textarea-box {
				width: 100%;
				padding-bottom: 25rpx;
				padding-left: 25rpx;

				.textarea {
					width: 100%;
					font-size: 28rpx;
					min-height: 150rpx;
				}

				input {
					font-size: 28rpx;
				}
			}
		}
	}

	.radio-list {
		display: flex;
		flex-wrap: wrap;
		font-size: 28rpx;
		padding-top: 30rpx;

		.uni-label-pointer {
			padding-right: 25rpx;
			padding-bottom: 30rpx;
		}
	}

	.mar-b {
		margin-bottom: 120rpx;
	}

	.row {
		display: flex;
		align-items: center;
		// position: relative;
		padding: 0 30rpx;
		height: 110rpx;
		background: #fff;
		border-bottom: 1rpx solid #f8f6f6;

		.tit {
			flex-shrink: 0;
			width: 180rpx;
			font-size: 30rpx;
			color: $font-color-dark;
		}

		.value {
			width: 100%;
			text-align: right;
		}

		.input {
			flex: 1;
			font-size: 30rpx;
			color: $font-color-dark;
			text-align: right;
		}

		.iconlocation {
			font-size: 36rpx;
			color: $font-color-light;
		}
	}

	.examine_name {
		color: #171717;
		font-size: 28rpx;
		padding: 25rpx 25rpx;
	}

	.examine_img {
		width: 100%;
		text-align: center;

		.image {
			width: 150rpx;
			height: 150rpx;
		}

		.image1 {
			min-width: 150rpx;
			max-width: 100%;
			min-height: 150rpx;
		}
	}

	.add-img-box {
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 50rpx;
	}

	.add-img-item {
		margin-bottom: 25rpx;
		width: 100%;

		.add-img {
			min-width: 150rpx;
			max-width: 100%;
			height: 400rpx;
		}
	}

	.add-img-del {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		right: 60rpx;
		// bottom: 155rpx;
		//background-color: rgba(238, 0, 0, 1);
		border-radius: 20rpx;
	}

	.default-row {
		margin-top: 16rpx;

		.tit {
			flex: 1;
		}

		switch {
			transform: translateX(16rpx) scale(0.9);
		}
	}

	.add-btn {
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		width: 100%;
		height: 100rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		background-color: #FF727E;
		line-height: 100rpx;
		text-align: center;
	}

	.img_box {
		padding: 35rpx 35rpx;
		width: 250rpx;
		height: 250rpx;
	}

	.img_box image {
		width: 100%;
		height: 100%;
	}

	.alert-box {
		background-color: #ffffff;
	}

	.b-b:after {
		position: relative !important;
	}

	.check_box {
		padding: 25rpx 25rpx;
		font-size: 20rpx;
		padding-bottom: 150rpx;

		text {
			color: #6786FB;
		}
	}

	.tit-tip {
		color: #ff727e;
		font-size: 36rpx;
		padding: 10rpx 0 10rpx 20rpx;
	}

	.checkbox {
		display: inline-block;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #191919;
		padding-right: 30rpx;
		padding-bottom: 10rpx;
	}

	.item-list {
		padding: 25rpx 45rpx;
		color: rgba(34, 34, 34, 1);
		font-weight: 400;
		font-size: 35rpx;
		display: flex;
		justify-content: space-between;
		background-color: #fff;

		.list-name {}

		.add-tip {
			color: #E62129 !important;
		}
	}

	.add-img-item {
		margin-bottom: 25rpx;
		width: 33.33%;
		position: relative;

		.add-img {
			padding: 0rpx 10rpx;
			width: 100%;
			height: 214rpx;
		}
	}
</style>