lh-mobile/pages/jiance/tousu.vue

<template>
	<view class="container">
		<cu-custom bgColor="bg-luohu" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">客户投诉</block>
		</cu-custom>

		<view class="cu-form-group" style="z-index: 999;">
			<view class="title">投诉单位</view>
			<input v-model="form.guanLianKeHu" name="input" placeholder="请输入投诉单位" disabled>
		</view>
		<view class="cu-form-group" style="z-index: 999;">
			<view class="title">
				<span style="color: red;">*</span>
				投诉人
			</view>
			<input v-model="form.Complainants" name="input" placeholder="请输入投诉人" :disabled="id != '' ? true : false">
		</view>
		<view class="cu-form-group" style="z-index: 999;">
			<view class="title">
				<span style="color: red;">*</span>
				电话
			</view>
			<input v-model="form.telephone" name="input" placeholder="请输入电话" :disabled="id != '' ? true : false">
		</view>

		<view class="cu-form-group" style="z-index: 999;">
			<view class="title">
				<span style="color: red;">*</span>
				投诉日期
			</view>
			<input v-model="form.touSuRiQi" name="input" placeholder="请输入投诉日期" disabled @click="showClick">
		</view>
		<view class="cu-form-group" style="z-index: 999;">
			<view class="title">
				<span style="color: red;">*</span>
				邮箱
			</view>
			<input v-model="form.postcode" name="input" placeholder="请输入邮箱" :disabled="id != '' ? true : false">
		</view>
		<view class="cu-form-group" style="z-index: 999;">
			<view class="title">
				<span style="color: red;">*</span>
				关联样品
			</view>
			<input v-model="form.guanLianYangPin" name="input" placeholder="请选择关联样品" disabled v-if="form.guanLianYangPin == '' && id == ''">
			<text style="width: 100%;" @click="getShow" v-else>{{getYangPin(form.guanLianYangPin)}}</text>
			<u-button type="success" size="mini" @click="getShow" v-if="form.guanLianYangPin == '' && id == ''">选择
			</u-button>
			<u-icon class="uni-icon" name="close-circle-fill" color="rgb(192, 196, 204)" size="42" v-if="form.guanLianYangPin != '' && id == ''" @click="form.guanLianYangPin = ''"></u-icon>
		</view>
		<view class="cu-form-group" style="z-index: 999;">
			<view class="title">
				<span style="color: red;">*</span>
				投诉方式
			</view>
			<input v-model="form.complaintsWay" name="input" placeholder="请选择投诉方式">
			<u-button type="success" size="mini" @click="selectShowClick" v-if="form.complaintsWay == '' && id == ''">选择
			</u-button>
			<u-icon class="uni-icon" name="close-circle-fill" color="rgb(192, 196, 204)" size="42" v-if="form.complaintsWay != '' && id == ''" @click="form.complaintsWay = ''"></u-icon>
			<!-- <input v-model="form.complaintsWay" name="input" placeholder="请输入投诉方式" disabled @click="selectShowClick"> -->
		</view>

		<uni-section title="投诉内容" type="line" padding>
			<textarea maxlength="-1" auto-height v-model="form.content" placeholder="投诉内容" :disabled="id != '' ? true : false"></textarea>
		</uni-section>

		<uni-section title="上传附件" type="line">
			<view class="example-body" v-if="id == ''">
				<uni-file-picker limit="100" file-mediatype="all" @select="select" @progress="progress" @success="success" @fail="fail" @delete="deleteMe" :auto-upload="false" ref="uploadMe"></uni-file-picker>
			</view>
			<view class="u-p-b-15">
				<view v-for="(item,index) in fuJianShangChuanArray" :key="index" style="margin: 0 10rpx;">
					<view class="fileBox">
						<view @click="uploadClick(item.id,item.name)">
							<u-icon size="30" name="file-text-fill"></u-icon>
							{{item.name}}
						</view>
						<view style="width: 50rpx;" @click="deleteMe(item.id)" v-if="(type != 1 && type != 2)">
							<u-icon size="26" name="close"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</uni-section>

		<view v-if="id != ''">
			<uni-section title="确认意见" type="line" v-if="form.shiFouGuoShen == '已反馈' || form.shiFouGuoShen == '已审核' || form.shiFouGuoShen == '已处理' || form.shiFouGuoShen == '已处理结果确认' || form.shiFouGuoShen == '1'">
				<view class="u-m-15 u-p-b-15">
					{{form.youWuYouXiaoTouSu}}
				</view>
				<view class="u-m-15 u-p-b-15">
					审批意见：{{option2}}
				</view>
			</uni-section>

			<uni-section title="处理措施" type="line" v-if="form.shiFouGuoShen == '已反馈' || form.shiFouGuoShen == '已处理' || form.shiFouGuoShen == '已处理结果确认' || form.shiFouGuoShen == '1'">
				<view class="u-m-15 u-p-b-15">
					调查情况:{{form.officeSurvey}}
				</view>
				<view class="u-m-15 u-p-b-15">
					处理措施:{{form.chuLiCuoShi}}
				</view>
				<view class="u-m-15 u-p-b-15">
					审批意见：{{option3}}
				</view>
			</uni-section>

			<uni-section title="处理结果确认" type="line" v-if="form.shiFouGuoShen == '已反馈' || form.shiFouGuoShen == '已处理结果确认' || form.shiFouGuoShen == '1'">
				<view class="u-m-15 u-p-b-15">
					处理时间：{{form.chuLiShiJian}}
				</view>
				<view class="u-m-15 u-p-b-15">
					审批意见：{{option4}}
				</view>
			</uni-section>

			<uni-section title="处理结果是否通知当事人" type="line" v-if="form.shiFouGuoShen == '已反馈'  || form.shiFouGuoShen == '1'">
				<view class="u-m-15 u-p-b-15">
					通知：{{form.chuLiJieGuoShiFou}}
				</view>
				<view class="u-m-15 u-p-b-15">
					审批意见：{{option}}
				</view>
			</uni-section>
		</view>

		<view v-if="(id != '' && form.shiFouGuoShen == '1') || (id != '' && type == '1')">
			<uni-section title="客户确认" type="line">
				<view class="u-m-15 u-p-b-15">
					<uni-data-checkbox selectedColor="red" v-model="form.shiFouTongYi" :localdata="sexList" v-if="type == '1'">
					</uni-data-checkbox>
					<view v-if="type == '2'">{{form.shiFouTongYi}}</view>
				</view>
			</uni-section>

			<uni-section title="签名" type="line" padding>
				<view style="width: 100%;">
					<view style="text-align: right;width: 100%;" v-if="type == '1'">
						<view v-if="id != ''">
							<u-button type="primary" size="mini" @click="qianming">
								签名</u-button>
							<u-button type="primary" size="mini" @click="deqianming" style="margin-left: 15rpx;" v-if="form.qianMing != ''">
								取消</u-button>
						</view>
					</view>
					<view style="width: 100%;" v-if="form.qianMing != ''">
						<image :src="form.qianMing" style="width: 100%;height: 500rpx;border: 1px #eee solid;">
						</image>
					</view>
				</view>
			</uni-section>
		</view>

		<view class="padding flex flex-direction">
			<u-button type="success" class="btn btn-back-color" @click="onSubmit" v-if="id == ''">提交
			</u-button>
			<u-button type="success" class="btn btn-back-color" @click="getArgee()" v-if="id != '' && type == '1'">签名确认
			</u-button>
		</view>

		<u-calendar v-model="show" :mode="mode" @change="dateChange"></u-calendar>
		<!-- <u-select v-model="selectShow" :list="list" title="投诉方式" @confirm="selecConfirm"></u-select> -->
		<lin-popup ref="picker2" :title="'投诉方式'" :list="list" @onConfirm="selecConfirm"></lin-popup>
		<lin-popup ref="picker" :title="'样品选择'" :list="yangPinList" @onConfirm="onConfirm"></lin-popup>

		<u-popup mode="center" v-model="popupShow">
			<view style="padding: 30rpx;background: #FFFFFF;width: 100%;">
				<view class="cu-form-group ">
					<view class="title">签名</view>
				</view>
				<autograph @save="save" @clear="clear" @close="close"></autograph>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		ACCESS_TOKEN,
		USER_NAME,
		USER_INFO
	} from "@/common/util/constants" // 拉取登录token,userName,userInfo
	import http from '@/common/service/http.js'
	import appSelect from '@/components/my-componets/appSelect.vue'
	import myDate from '@/components/my-componets/my-date.vue'
	import test from './tousu/list.json'
	import autograph from '@/components/autograph/autograph'

	export default {
		components: {
			myDate,
			appSelect,
			autograph
		},
		data() {
			return {
				option2: '',
				option3: '',
				option4: '',
				show: false,
				mode: 'date',

				selectShow: false,
				list: test.list,

				buMenList: [],
				fuJianShangChuanArray: [],
				popupShow: false,

				id: '',
				type: '',
				form: {
					id: '',
					guanLianKeHu: '',
					company: "",
					telephone: "",
					postcode: "",
					Complainants: "",
					touSuRiQi: "",
					guanLianYangPin: "",
					complaintsWay: "",
					content: "",
					yeShu: "",
					fuJianShangChuan: "",
					youWuYouXiaoTouSu: "",
					xuanZeRen: '',
					officeSurvey: "",
					chuLiCuoShi: "",
					chuLiShiJian: "",
					chuLiJieGuoShiFou: "",
					shiFouTongYi: "",
					qianMing: "",
					bianZhiRen: "",
					bianZhiSJ: "",
					bianZhiBuMen: "",
					acceptor: "",
					// acceptanceDate: "",
					shouLiBuMen: "",
					zeRenBuMenFuZeRen: "",
					zeRenShouLiRiQi: "",
					zeRenBuMen: "",
					zhiLiangFuZeRen: "",
					zhiLiangRiQi: "",
					zhiLiangBuMen: "",
					shouLiRen2: "",
					shouLiRiQi2: "",
					shouLiBuMen2: "",
					qianMingRiQi: "",
					shiFouGuoShen: '',
					shouLiRiQi3: '',
					qiMingRen: ''
				},
				sexList: [{
					text: "同意",
					value: "同意"
				}, {
					text: "不同意",
					value: "不同意"
				}],

				yangPinList: [],
				option: '',
				orgId: ''
			}
		},
		filters: {

		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				this.type = options.type
				this.getTaskId(this.id)
			}
		},
		created() {
			var nowDate = new Date((new Date).getTime() + 8 * 60 * 60 * 1000)
			var time = nowDate.toJSON().split('T').join(' ').substr(0, 10);
			let info = uni.getStorageSync(USER_INFO);
			let useId = info.user.id
			let name = info.user.name
			this.form.Complainants = name
			this.form.guanLianKeHu = info.user.qq
			this.form.telephone = info.user.mobile
			this.form.company = useId
			this.form.postcode = info.user.email
			this.form.touSuRiQi = time
			this.orgId = info.org.id
			this.getData()
		},
		methods: {
			//根据投诉id查询 taskId
			getTaskId(id) {
				let sql =
					`select TASK_ID_,PROC_INST_ID_ from ibps_bpm_tasks where NAME_ = '客户确认' and NODE_ID_ = 'Activity_1sdpied' and PROC_DEF_KEY_ = 'Process_1ydqnej' and EXEC_ID_ = (select PROC_INST_ID_ from act_ru_execution where ACT_ID_ = 'Activity_1sdpied' and BUSINESS_KEY_ = '${id}') ORDER BY CREATE_TIME_ desc`
				let requestData = this.$sig(sql)
				this.$http.post("/ibps/business/v3/sys/universal/inputSqlSelectData", requestData).then(res => {
					if (res.data.state == 200) {
						if (res.data.variables.data.length > 0) {
							let result = res.data.variables.data[0]
							if (result.TASK_ID_) {
								this.taskId = result.TASK_ID_
							}
						}
					}
				})
			},
			//根据委托单id查询 taskId
			getProcInstId(id, type) {
				let sql =
					`select OPTION_,CREATE_TIME_,CREATE_BY_ FROM ibps_bpm_oper_log WHERE PROC_INST_ID_ = (SELECT PROC_INST_ID_ FROM ibps_bpm_bus_rel WHERE BUSINESSKEY_ = '${id}')AND NODE_ID_ = '${type}' order by CREATE_TIME_ DESC LIMIT 1`
				let requestData = this.$sig(sql)
				this.$http.post("/ibps/business/v3/sys/universal/inputSqlSelectData", requestData).then(res => {
					if (res.data.state == 200) {
						let result = res.data.variables.data[0]

						if (type == 'Activity_08txd6d') {
							this.option2 = result.OPTION_
						}
						if (type == 'Activity_0r73zvr') {
							this.option3 = result.OPTION_
						}
						if (type == 'Activity_0u632sc') {
							this.option4 = result.OPTION_
						}
						if (type == 'Activity_0dpz207') {
							this.option = result.OPTION_
						}

					}
				})
			},
			//查投诉详情
			getDe(id) {
				let sql =
					`select a.*,b.name_ from t_complaint a left join ibps_party_employee b on a.complainants_ = b.id_ where a.id_ = '${id}'`

				let requestData = this.$sig(sql)
				this.$http.post("/ibps/business/v3/sys/universal/inputSqlSelectData", requestData).then(res => {
					if (res.data.state == 200) {
						const data = res.data.variables.data[0]
						this.form.id = data.id_
						// this.form.ComplainantsName = data.name_
						this.form.Complainants = data.complainants_
						this.form.telephone = data.telephone_
						this.form.postcode = data.postcode_
						this.form.company = data.company_
						this.form.touSuRiQi = data.tou_su_ri_qi_
						this.form.address = data.address_
						this.form.complaintsWay = data.complaints_way_
						this.form.content = data.content_
						this.form.yeShu = data.ye_shu_
						this.form.fuJianShangChuan = data.fu_jian_shang_chu
						this.form.youWuYouXiaoTouSu = data.you_wu_you_xiao_
						this.form.officeSurvey = data.office_survey_
						this.form.chuLiCuoShi = data.chu_li_cuo_shi_
						this.form.chuLiShiJian = data.chu_li_shi_jian_
						this.form.chuLiJieGuoShiFou = data.chu_li_jie_guo_sh
						this.form.shiFouTongYi = data.shi_fou_tong_yi_
						this.form.bianZhiRen = data.bian_zhi_ren_
						this.form.bianZhiSJ = data.bian_zhi_sj_
						this.form.bianZhiBuMen = data.bian_zhi_bu_men_
						this.form.acceptor = data.acceptor_
						// this.form.acceptanceDate = data.acceptance_date_
						this.form.shouLiBuMen = data.shou_li_bu_men_
						this.form.zeRenBuMenFuZeRen = data.ze_ren_bu_men_fu_
						this.form.zeRenShouLiRiQi = data.ze_ren_shou_li_ri
						this.form.zeRenBuMen = data.zhi_liang_bu_men_
						this.form.zhiLiangFuZeRen = data.zhi_liang_fu_ze_r
						this.form.zhiLiangRiQi = data.zhi_liang_ri_qi_
						this.form.zhiLiangBuMen = data.zhi_liang_bu_men_
						this.form.shouLiRen2 = data.shou_li_ren_2_
						this.form.shouLiRiQi2 = data.shou_li_ri_qi_2_
						this.form.shouLiBuMen2 = data.shou_li_bu_men_2_
						this.form.shiFouGuoShen = data.shi_fou_guo_shen_
						this.form.xuanZeRen = data.xuan_ze_ren_
						this.form.qianMing = data.qian_ming_
						this.form.qianMingRiQi = data.qian_ming_ri_qi_
						this.form.shouLiRiQi3 = data.shou_li_ri_qi_3_
						this.form.guanLianYangPin = data.guan_lian_yang_pi
						this.form.qiMingRen = data.qi_ming_ren_
						if (data.fu_jian_shang_chu && data.fu_jian_shang_chu != '') {
							this.getFileList(data.fu_jian_shang_chu)
						}

						if (data.shi_fou_guo_shen_ == '已反馈' || data.shi_fou_guo_shen_ == '已审核' || data.shi_fou_guo_shen_ == '已处理' || data.shi_fou_guo_shen_ == '已处理结果确认' || data.shi_fou_guo_shen_ == '1') {
							this.getProcInstId(data.id_, 'Activity_08txd6d')
						}
						if (data.shi_fou_guo_shen_ == '已反馈' || data.shi_fou_guo_shen_ == '已处理' || data.shi_fou_guo_shen_ == '已处理结果确认' || data.shi_fou_guo_shen_ == '1') {
							this.getProcInstId(data.id_, 'Activity_0r73zvr')
						}
						if (data.shi_fou_guo_shen_ == '已反馈' || data.shi_fou_guo_shen_ == '已处理结果确认' || data.shi_fou_guo_shen_ == '1') {
							this.getProcInstId(data.id_, 'Activity_0u632sc')
						}

						if (data.shi_fou_guo_shen_ == '已反馈' || data.shi_fou_guo_shen_ == '1') {
							this.getProcInstId(data.id_, 'Activity_0dpz207')
						}

						uni.hideLoading()
					}
				})
			},
			getFileList(ids) {
				this.$uploades.getFilesList(ids, this).then(res => {
					this.fuJianShangChuanArray = res
				})
			},
			// 获取上传状态
			select(file) {
				this.$uploades.selectUpload(file).then(res => {
					res.forEach(item => {
						this.fuJianShangChuanArray.push(item)
					})
				})
			},
			// 删除
			deleteMe(id) {
				this.fuJianShangChuanArray = this.fuJianShangChuanArray.filter(item => item.id !== id)
			},
			// 获取上传进度
			progress(e) {},
			// 上传成功
			success(file) {},
			// 上传失败
			fail(e) {},
			onSubmit() {
				if (!this.form.guanLianYangPin) {
					return this.$methCommon.getPrompt('请选择样品')
				}
				let tmpArray = []
				this.fuJianShangChuanArray.forEach((item) => {
					tmpArray.push(item.id)
				})

				let info = uni.getStorageSync(USER_INFO);
				let useId = info.user.id
				var nowDate = new Date((new Date).getTime() + 8 * 60 * 60 * 1000)
				var time = nowDate.toJSON().split('T').join(' ').substr(0, 10);
				let para = {
					"parameters": [{
							"key": "defId",
							"value": "887034508145065984"
						},
						{
							"key": "version",
							"value": "0"
						},
						{
							"key": "data",
							"value": ""
						}
					]
				}
				this.form.nianDu = time.substring(0, 4)
				this.form.fuJianShangChuan = tmpArray.join(",")
				this.form.bianZhiRen = useId
				this.form.bianZhiSJ = time
				this.form.shiFouGuoShen = "已编制"
				this.form.zhuangTai = "已登记"
				this.form.bianZhiBuMen = "1041786072788369408"
				para.parameters[2].value = JSON.stringify(this.form);
				let that = this;
				this.$http.post("ibps/business/v3/bpm/instance/start", para).then(res => {
					if (res.data.state == 200) {
						this.$methCommon.getPrompt('提交成功', 'success')
						this.$Router.replace({
							name: 'index'
						})
					} else {
						this.$methCommon.getPrompt('请求出现错误', 'error')
					}
				}).catch((err) => {
					this.$methCommon.getPrompt('请求出现错误，请稍后再试', 'error')
				})
			},
			//签名确定
			getArgee() {
				uni.showLoading({
					mask: true,
					title: '加载中'
				});
				let info = uni.getStorageSync(USER_INFO);
				let useId = info.user.id
				var nowDate = new Date((new Date).getTime() + 8 * 60 * 60 * 1000)
				var time = nowDate.toJSON().split('T').join(' ').substr(0, 10);

				this.form.qianMingRiQi = time
				this.form.shiFouGuoShen = '1'
				this.form.qianMingRen = useId
				this.form.zhuangTai = "已完成"
				let editData = {
					data: JSON.stringify(this.form),
					opinion: '',
					taskId: this.taskId
				}
				this.$http.post("/ibps/business/v3/bpm/task/agree", editData).then(res => {
					if (res.data.state == 200) {
						this.$methCommon.getPrompt('提交成功', 'success')
						uni.hideLoading();
						this.$Router.replaceAll({
							name: 'index'
						})
					} else {
						this.$methCommon.getPrompt('提交异常', 'error')
						this.$Router.replaceAll({
							name: 'index'
						})
					}
				});
			},
			getHouSumit(form) {
				let params = {
					qian_ming_ri_qi_: form.qianMingRiQi,
					qian_ming_: form.qianMing,
					shi_fou_guo_shen_: '1',
					shi_fou_tong_yi_: form.shiFouTongYi
				}
				let pp = {
					paramWhere: [{
						id_: form.id
					}],
					tableName: "t_complaint",
					paramCond: params
				}
				let data = this.$sig(pp)

				this.$http.post("ibps/business/v3/sys/universal/updateDatasContextTable", data).then(res => {
					if (res.data.state == 200) {} else {}
				});
			},
			dateChange(e) {
				this.form.touSuRiQi = e.result
			},
			selecConfirm(index, item) {
				this.form.complaintsWay = item.name
			},
			selectShowClick() {
				// if (this.id == '') {
				// 	this.selectShow = true
				// }
				if (this.id != '') {
					return
				}
				this.$refs['picker2'].show();
			},
			showClick() {
				if (this.id == '') {
					this.show = true
				}
			},
			//弹出框显示
			qianming(index) {
				this.qianshow = true
				this.qianIndex = index
				this.popupShow = true
			},
			//清除签名
			deqianming(index) {
				this.form.qianMing = ''
			},
			//保存签名
			save(val) {
				this.form.qianMing = val
				this.popupShow = false
			},
			//清除签名
			clear(val) {
				this.form.qianMing = ''
			},
			getShow() {
				if (this.id != '') {
					return
				}
				this.$refs['picker'].show();
			},
			// 拉取样品列表数据
			getData() {
				let info = uni.getStorageSync(USER_INFO);
				let useId = info.user.id

				let sql = `select a.id_,a.create_time_,a.yang_pin_ming_che,a.yang_pin_bian_hao,a.song_jian_pi_hao_ from t_lhypb a left join t_lhwtsqb b  on a.parent_id_ = b.id_ left join t_bjd c on b.he_tong_id_ = c.id_  where (a.create_by_= '${useId}' or c.ke_hu_zhang_hao_ = '${useId}') and b.wei_tuo_lei_xing_ = '客户委托' and a.create_time_ > DATE_SUB(NOW(),INTERVAL 3 MONTH) ORDER BY a.create_time_ desc`
				let requestData = this.$sig(sql)
				this.$http.post("/ibps/business/v3/sys/universal/inputSqlSelectData", requestData).then(res => {
					if (res.data.state == 200) {
						const datas = res.data.variables.data
						if (datas.length > 0) {
							datas.forEach((item, index) => {
								this.$set(item, 'name', item.yang_pin_bian_hao + '-' + item.song_jian_pi_hao_ + '-' + item
									.yang_pin_ming_che)
							})
							this.yangPinList = datas

							if (this.id) {
								this.getDe(this.id)
							}
						}

					}
				})
			},
			onConfirm(index, item) {
				this.form.guanLianYangPin = item.id_
			},
			getYangPin(id) {
				if (id) {
					let itemData = this.yangPinList.find(item => item.id_ == id)
					if (itemData) {
						return itemData.yang_pin_bian_hao + '-' + itemData.song_jian_pi_hao_ + '-' + itemData
							.yang_pin_ming_che
					} else {
						return ''
					}
				} else {
					return ''
				}
			},
			close() {
				this.popupShow = false
			},
			uploadClick(id, item) {
				this.$uploades.download(id, item, this)
			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: 180rpx;
	}

	.btn {
		margin: 15rpx
	}

	.uni-file-pickerheight {
		box-sizing: border-box;
		overflow: hidden;
	}



	.uni-file-picker__container {
		display: flex;
		box-sizing: border-box;
		flex-wrap: wrap;
		margin: -5px;
	}

	.file-picker__box {
		height: 0px;
		width: 33.3%;
	}

	.file-picker__box {
		position: relative;
		width: 33.3%;
		height: 0;
		padding-top: 33.33%;
		box-sizing: border-box;
	}


	.file-picker__box-content {
		border-width: 1px;
		border-style: solid;
		border-color: rgb(238, 238, 238);
		border-radius: 3px;
	}

	.is-add {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.file-picker__box-content {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: 5px;
		border: 1px #eee solid;
		border-radius: 5px;
		overflow: hidden;
	}

	.is-addheight {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.icon-addheight {
		width: 50px;
		height: 5px;
		background-color: #f1f1f1;
		border-radius: 2px;
	}

	.rotateheight {
		position: absolute;
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}

	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

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

	.fileBox {
		line-height: 50rpx;
		color: #888888;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: 1rpx solid #DDDDDD;
		border-radius: 8rpx;
		padding: 5rpx;
		margin-top: 10rpx;
	}
</style>