FE-V2-XCX/pages/pages_safetyExamine/examineManage/examineAddTow.vue

<!-- 开始检查 -->
<template>
    <view id="startChecking">
		<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
			<viwe class="list">
				<view class="title">不符合项</view>
				<view class="check-for-big-box" v-for="(item,index) in form.detailsList" :key="index">
					<view class="grade">
						<view class="grade_l">隐患等级：</view>
						<picker @change="gradeChange(item,$event)" :value="gradeIndex" :range="gradeArray" class="scope_r">
							<view class="grade_r">
								<view>{{item.grade}}</view>
								<img src="@/images/Version3.3.3/icon_06.png">
							</view>
						</picker>
					</view>
					<view class="project" v-if="checkOptionList.length>0">
						<view class="project_l">检查项目：</view>
						<uni-data-picker :ellipsis="false" :localdata="checkOptionList[index]" :map="{text:'name',value:'id'}"
						popup-title="请选择所属目录" @change="(e)=>onchange(e,index)" @nodeclick="onnodeclick"
						ref="uniDataPicker" :addType="true" :addIndex="index">
							<view  class="project_r">{{item.jcxName?item.jcxName:'请选择检查项'}}</view>
						</uni-data-picker>
					</view>
					<view class="point">
						<view class="point_l">检查要点：</view>
						<textarea class="point_r" type="text" v-model="item.yhMs" maxlength="50" placeholder="未查到此项检查要点，可在此输入添加" placeholder-style="font-size:28rpx;color:#999;"></textarea>
					</view>
					<view class="check-for-input-max-box">
						<view class="left-title-p">隐患描述：</view>
						<textarea type="text" v-model="item.yhMs" maxlength="50" placeholder="请输入隐患描述" placeholder-style="font-size:28rpx;color:#999;"></textarea>
					</view>
					<view class="check-for-img-max-box">
						<view class="left-title-p">隐患照片（最多上传5张）：</view>
						<view class="right-img-box">
							<view class="img-box" v-for="(imgUrl,imgIndex) in item.yhImg" :key="imgIndex">
								<img class="img-data" :src="configURL+imgUrl">
								<img class="position-img" src="@/pages_manage/images/icon_ssp_closure.png" @click="delImg(index,imgIndex)">
							</view>
							<img class="add-button" src="@/pages_manage/images/icon_07.png" @click="selectImage(item)" v-if="item.yhImg.length<5">
						</view>
					</view>
				   <view class="voice">
					   <view class="voice_t">
						   <view class="voice_t_l">语音备注：</view>
						   <img class="voice_t_r" src="@/images/Version3.3.3/icon_ksjc_yysr.png" @longpress.stop="recordButton(item,$event)" @touchmove.stop="cancelButton"  @touchend.stop="sendButton(item,$event)">
					   </view>
					   <view class="voice_b" v-for="(voiceItem,voiceIndex) in item.voice" :key="voiceIndex">
						   <view class="voice_b_l" @tap="voicePlay(voiceItem.url)"><img class="add-button" src="@/pages_manage/images/icon_yyt.png"/>{{voiceItem.times}}″</view>
						   <img class="voice_b_r" src="@/pages_manage/images/Version2.3/icon_sczl_sc.png" @tap="voiceDele(index,voiceIndex)"/>
					   </view>
				   </view>
					<view class="check-for-big-box-position-img-box" v-if="form.detailsList.length>1" @click="delDetailsList(index)">
						<img src="@/pages_manage/images/icon_ssp_closure.png">
					</view>
				</view>
				<view class="add-for-item-p" @click="addDanger()">+ 新增隐患项</view>      
			</viwe>
		</scroll-view>
		<view class="bottom_btn">
			<view class="bottom_btn_li"  @click="goMinButton(index)" v-for="(item,index) in  bottomBtnList" :key="index">{{item}}</view>
		</view>  
	</view>
</template>

<script>
	const myaudio  = uni.createInnerAudioContext();
    import { config } from '@/api/request/config.js'
    import { checkRecordAddC,checkRecordAdd,getSelectInfoByRoom, checkOptionList, treeselect,treeDepselect, addTempCheckOption,recordDettailsList,checkRecordUpdate } from '@/api/index.js'
    export default {
        name: "startChecking",
        data() {
            return {

				configURL:config.base_url,
				id:"",
				//新增项or固有
				isLingshi:0,
                //页面子状态
                minPageType:1,
				//临时存储隐患信息ID
				hiddenDangerIdList:[],
				//数据
				form:{
					checkName:'',//检查名称
					fjNumber:"",
					buildingId:"",
					buildingName:"",
					laboratoryId:"",
					laboratoryName:"",
					fzrId:"",
					fzrName:"",
					fzrLxfs:"",
					jcDw:"",
					detailsList:[
						{
							isLingshi:0,
							yhImg:[],
							voice:[],//语音备忘存储
							yhMs:"",
							jcxId:"",
							jcxName:"",
							grade:'一般隐患',//隐患等级
						}
					],
				},
                inspectionUnit:"",
                inspectionUnitArray:[],
				inspectionUnitArrayData:[],
                //搜索回调列表
                searchList:[],
				searchNullType:true,
				//检查项
				checkOptionList:[],
				checkOptionListExamination:[],
				//新增检查项
				openIndex:"",
				open:false,
				jcxSstkMs:[],
				jcxSstkNum:'',
				//临时数据组
				temporaryIdList:[],
				//添加项 目录
				uniPicker:"请选择所属目录",
				//滑动记录
				startPoint:{},
				liveType:false,
				sendLock: true, //发送锁，当为true时上锁，false时解锁发送
				recorderManager : wx.getRecorderManager(),
				temporaryData:[],
				gradeIndex :0,
				gradeArray:['一般隐患','重大隐患'],
				bottomBtnList:['上一步','保存','提交'],
            }
        },
        onLoad(option) {
			this.getCheckOptionListTwo();
			this.treeselect();
			if(option.id){
				this.id = option.id;
				this.getInfo();
			}else{
				this.getCheckOptionList();
			}
        },
        onShow() {


        },
        methods: {
			//隐患等级
			gradeChange(item,e){
				item.grade=this.gradeArray[e.target.value]
			},
			//语音备忘播放
			async voicePlay(item){
				 myaudio.src = config.base_url+item;
				 myaudio.play();
			},
			//语音备忘删除
			async voiceDele(index,voiceIndex){
				let self = this;
				uni.showModal({
				  title: '',
				  cancelColor:'#999999',
				  confirmColor:'#FF6E6E',
				  content: '确定删除此语音吗?',
				  success (res) {
				    if (res.confirm) {
				      console.log('用户点击确定')
					  self.form.detailsList[index].voice.splice(voiceIndex,1);
					  self.$forceUpdate();
				    } else if (res.cancel) {
				      console.log('用户点击取消')

				    }
				  }
				})

			},
			//录制
			recordButton(item,e){
				console.log("按下")
				let self = this;
				if(item.voice.length>=5){
					uni.showToast({
						title: '语音备忘最多只能上传5条',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				this.liveType=true;
				console.log('录制',e)
				this.startPoint = e.touches[0];//记录长按时开始点信息，后面用于计算上划取消时手指滑动的距离。
				const options = {
					duration: 60000,
					sampleRate: 16000,
					numberOfChannels: 1,
					encodeBitRate: 48000,
					format: 'mp3',
					frameSize: 50
				}
				this.recorderManager.start(options);//开始录音
				this.recorderManager.onStart(() => {
					console.log('recorder start')
				})
				this.recorderManager.onError((res) => {
					console.log(res);
				})
				wx.showToast({
					title: "正在录音，上划取消发送",
					icon: "none",
					duration: 60000//先定义个60秒，后面可以手动调用wx.hideToast()隐藏
				});
				this.sendLock = false;//长按时是不上锁的。
			},
			//取消
			cancelButton(e){
				console.log("移动")
				let self = this;

			    this.liveType=false;
				console.log('取消',e)
				let moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY; //移动距离
				if (Math.abs(moveLenght) > 50) {
					wx.showToast({
						title: "松开手指,取消发送",
						icon: "none",
						duration: 60000
					});
					this.sendLock = true;//触发了上滑取消发送，上锁
				} else {
					wx.showToast({
						title: "正在录音，上划取消发送",
						icon: "none",
						duration: 60000
					});
					this.sendLock = false;//上划距离不足，依然可以发送，不上锁
				}
			},
			//发送
			sendButton(item,e){
				console.log("松开")
				let self = this;

			    this.liveType=false;
				console.log('发送',e)
				wx.hideToast();//结束录音、隐藏Toast提示框
				this.recorderManager.stop();//结束录音
				this.recorderManager.onStop((res) => {

					if(!this.sendLock){

						this.uploadVoice(item,res.duration,res.tempFilePath);
					}
					console.log('停止录音', res.tempFilePath)
					console.log("sendLock",this.sendLock);
				})
			},
			//上传MP3
			async uploadVoice(item,times,tempFilePaths){

			    var self = this;
			    uni.uploadFile({
			        url: config.base_url+'/base/file/upload', //仅为示例，非真实的接口地址
			        header:{'Authorization':uni.getStorageSync('token')},
			        filePath: tempFilePaths,
			        name: 'file',
			        formData: {
			            'user': 'test'
			        },
			        success: (uploadFileRes) => {
			            let res = JSON.parse(uploadFileRes.data);
						if(res.code == 200){
							console.log("上传成功",res)
							console.log(item)
							let seconds = Math.round((parseInt(times) % (1000 * 60)) / 1000);
							item.voice.push({'times':seconds,'url':res.data.url})
							console.log(JSON.stringify(self.voice))
							//self.textParseUrlIps(res.data.url);
							// self.newData.imgList.push(res.data.url);
						}else{
							uni.showToast({
								title: res.msg,
								icon:"none",
								mask:true,
								duration: 2000
							});
						}
			        },
			        fail: err => {
						uni.hideLoading()
					},
			        complete: () => {
			        }
			    });
			},
			//搜索特定检查项
			async searchClick(text,index){
				console.log("搜索text",text);
				console.log("搜索index",index);
				let newObj = {
					level:4,
					searchValue:text
				}
				const {data} = await checkOptionList(newObj);
				if(data.code == 200){

					if(data.data[0]){
						let list = JSON.parse(JSON.stringify(this.checkOptionList));
						list[index] = this.getTreeData(data.data);
						this.$set(this,'checkOptionList',JSON.parse(JSON.stringify(list)))
						console.log('this.$refs.uniDataPicker',this.$refs.uniDataPicker)
						this.$refs.uniDataPicker[index].show();
					}else{
						uni.showToast({
							title: '未找到相关检查项',
							icon:"none",
							mask:true,
							duration: 2000
						});
					}
				}
			},
			//重置检查项
			async resetClick(index){
				console.log("重置index",index);
				let newObj = {
					level:4,
				}
				const {data} = await checkOptionList(newObj);
				if(data.code == 200){

					let list = JSON.parse(JSON.stringify(this.checkOptionList));
					list[index] = this.getTreeData(data.data);
					this.$set(this,'checkOptionList',JSON.parse(JSON.stringify(list)))
					this.$refs.uniDataPicker[index].show();
				}
			},
			
            /**************************检查项***************************/
			
			//获取检查项
			async getCheckOptionList() {
				let newObj = {
					level:4,
				}
				const {data} = await checkOptionList(newObj);
				if(data.code == 200){

					let list = this.getTreeData(data.data);
					this.checkOptionList.push(JSON.parse(JSON.stringify(list)));
				}
			},
			async getCheckOptionListTwo() {
				let newObj = {
					level:3,
				}
				const {data} = await checkOptionList(newObj);
				if(data.code == 200){
					let list = this.getTreeData(data.data);
					this.checkOptionListExamination = JSON.parse(JSON.stringify(list));
				}
			},
			async treeselect() {
				let self = this;
				  const {data} = await treeselect({});
				  if(data.code == 200){
					let list = [];
					for(let i=0;i<data.data[0].children.length;i++){
						let obj = {
							id:data.data[0].children[i].id,
							label:data.data[0].children[i].label,
						}
						if(data.data[0].children[i].children){
							for(let o=0;o<data.data[0].children[i].children.length;o++){
								let obj = {
									id:data.data[0].children[i].children[o].id,
									label:data.data[0].children[i].children[o].label,
								}
								self.inspectionUnitArray.push(data.data[0].children[i].children[o].label)
								list.push(obj);
							}
						}else{
							self.inspectionUnitArray.push(data.data[0].children[i].label)
							list.push(obj);
						}
					}
					this.inspectionUnitArrayData = list;
				  }
			},


			getTreeData(data){
			  for(var i=0;i<data.length>0;i++){
				if(data[i].children == null||data[i].children.length<=0){
				  // children若为空数组，则将children设为undefined
				  data[i].children = undefined;
				}else {
				  // children若不为空数组，则继续 递归调用 本方法
				  this.getTreeData(data[i].children);
				}
			  }
			  return data;
			},
            // 图片上传
            selectImage(item) {
                let self = this;
                if(item.yhImg.length>4){
                    uni.showToast({
                        title: '最多上传5张图片',
                        icon:"none",
                        mask:true,
                        duration: 2000
                    });
                    return
                }
                wx.chooseImage({
                    count: 1,
                    sizeType: ["original", "compressed"],
                    sourceType: ["album", "camera"],
                    success: function(res) {
                        let tempFilePaths = res.tempFilePaths[0];
                        self.uploadImg(tempFilePaths,item);
                    }
                });
            },
            async uploadImg(tempFilePaths,item){
                var self = this;
                uni.showLoading({
                    title: '上传中',
                    mask: true
                });
                uni.uploadFile({
                    url: config.base_url+'/base/file/upload', //仅为示例，非真实的接口地址
                    header:{'Authorization':uni.getStorageSync('token')},
                    filePath: tempFilePaths,
                    name: 'file',
                    formData: {
                        'user': 'test'
                    },
                    success: (uploadFileRes) => {
                        let res = JSON.parse(uploadFileRes.data);
						if(res.code == 200){
							item.yhImg.push(res.data.url);
							console.log(res.data.url)
						}else{
							uni.showToast({
								title: res.msg,
								icon:"none",
								mask:true,
								duration: 2000
							});
						}
                    },
                    fail: err => {},
                    complete: () => {
                        uni.hideLoading()
                    }
                });
            },
            //删除图片
            delImg(index,minIndex){
                this.form.detailsList[index].yhImg.splice(minIndex,1);
				this.$forceUpdate();
			},
            //添加隐患
            addDanger(){
				if(this.form.detailsList.length>19){
					uni.showToast({
						title: '最多添加20个隐患',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				let obj = {
					isLingshi:0,
					yhImg:[],
					voice:[],
					yhMs:"",
					jcxId:"",
					jcxName:"",
					grade:"一般隐患",
				}
				this.form.detailsList.push(obj);
				this.getCheckOptionList();
				this.$forceUpdate();
            },
			//删除隐患
			delDetailsList(index){
				this.hiddenDangerIdList.push(this.form.detailsList[index].id)
				this.form.detailsList.splice(index,1);
				this.$forceUpdate();
			},
            //子页面切换
            goMinButton(index){
				let self = this;
				if(index == 0){
					uni.redirectTo({
					    url: '/pages/pages_safetyExamine/examineManage/examineAdd?form='+encodeURIComponent(JSON.stringify(this.form))
					});
				}else if(index == 2 || index ==3){
					uni.redirectTo({
					    url: '/pages/pages_safetyExamine/examineManage/examineList?form='+encodeURIComponent(JSON.stringify(this.form))
					});
					// for(let i=0;i<self.form.detailsList.length;i++){
					// 	let num = i+1;
					// 	if(!self.form.detailsList[i].jcxName){
					// 		uni.showToast({
					// 			title: '第'+num+'未选择隐患项',
					// 			icon:"none",
					// 			mask:true,
					// 			duration: 2000
					// 		});
					// 		return
					// 	}else if(!self.form.detailsList[i].yhMs && self.form.detailsList[i].voice.length<=0){
					// 		uni.showToast({
					// 			title: '请输入第'+num+'项隐患描述!',
					// 			icon:"none",
					// 			mask:true,
					// 			duration: 2000
					// 		});
					// 		return
					// 	}
					// }
				}
            },
			
            /**************************搜索项***************************/
            
			//选中固有检查项(新)
			onchange(e,index) {
				let self = this;
				let val = e.detail.value[e.detail.value.length-1].value
				let num = 0;
				for(let i=0;i<self.temporaryIdList.length;i++){
					if(self.temporaryIdList[i] == val){
						num++
					}
				}
				if(num == 0){
					this.$set(this.form.detailsList[index],'isLingshi',0);
				}else{
					this.$set(this.form.detailsList[index],'isLingshi',1);
				}
				let list = [];
				let listName=[];
				for(let i=0;i<e.detail.value.length;i++){
					list.push(e.detail.value[i].value)

					if(i<3){
						listName.push(e.detail.value[i].text)
					}

				}
				let jcxSstkNum=this.getTreeName(this.checkOptionList[0],e.detail.value[e.detail.value.length-1].value)

				this.$set(this.form.detailsList[index],'jcxSstkNum',jcxSstkNum);
				this.$set(this.form.detailsList[index],'jcxId',list);
				this.$set(this.form.detailsList[index],'jcxSstkMs',listName.join('-'));
				this.$set(this.form.detailsList[index],'jcxName',e.detail.value[e.detail.value.length-1].text);
			},
			  //根据id查找父元素
			getTreeName(list,id){
			   let _this=this
			  for (let i = 0; i < list.length; i++) {
				let a=list[i]
				if(a.id===id){
				  return a.code
				}else{
				  if(a.children && a.children.length>0){
					let res=_this.getTreeName(a.children,id)
					if(res){
					  return res
					}
				  }
				}
			  }
			},
			onnodeclick(node) {
				console.log("node",node)
			},
        }
    }
</script>

<style lang="stylus" scoped>
    #startChecking{
		height:100%;
		.info-max-box{
			flex: 1;
			overflow: scroll;
			padding: 20rpx 0rpx 128rpx;
			box-sizing: border-box;
		}
		.list{
			.title{
				width: 690rpx;
				height: 100rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin: 20rpx 30rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 100rpx;
				padding-left: 24rpx;
				box-sizing: border-box;
			}
			.check-for-big-box{
				width 690rpx;
				//padding-top:30rpx;
				margin:0 30rpx 20rpx;
				background #fff
				border-radius:20rpx;
				overflow hidden
				position relative;
				padding:30rpx;
				box-sizing border-box;
				/* 隐患等级 */
				.grade{
					display: flex;
					justify-content: flex-start;
					.grade_l{
						width: 158rpx;
						text-align: left;
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 80rpx;
					}
					.grade_r{
						width: 480rpx;
						height: 80rpx;
						border-radius: 10rpx;
						border: 1rpx solid #E0E0E0;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						padding-left: 20rpx;
						box-sizing: border-box;
						>view{
							flex:1;
							line-height:80rpx;
							font-size: 30rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 80rpx;
						}
						>img{
							width: 14rpx;
							height: 8rpx;
							margin-right: 30rpx;
						}
					}
				}
				/* 检查项目 */
				.project{
					.project_l{
						width: 158rpx;
						text-align: left;
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 80rpx;
						margin-top: 24rpx;
					}
					.project_r{
						width: 630rpx;
						height: 80rpx;
						border-radius: 10rpx;
						border: 1rpx solid #E0E0E0;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						padding-left: 20rpx;
						box-sizing: border-box;
					}
				}
				/* 检查要点 */
				.point{
					.point_l{
						width: 158rpx;
						text-align: left;
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 80rpx;
					}
					.point_r{
						width: 630rpx;
						height: 158rpx;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						opacity: 1;
						border: 1rpx solid #E0E0E0;
						padding: 20rpx 14rpx;
						box-sizing: border-box;
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 34rpx;
					}
				}
				/* 隐患描述 */
				.check-for-input-max-box{
					.left-title-p{
						width:150rpx;
						line-height:80rpx;
						text-align right
						font-size:30rpx;
					}
					textarea{
						width: 630rpx;
						height: 158rpx;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						border: 1rpx solid #E0E0E0;
						padding: 20rpx 14rpx;
						box-sizing: border-box;
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 34rpx;
					}
				}
				/* 隐患照片 */
				.check-for-img-max-box{
					.left-title-p{
						width: 100%;
						text-align: left;
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 80rpx;
					}
					.right-img-box{
						.img-box{
							display inline-block;
							height:200rpx;
							width:200rpx;
							position relative
							margin:0 14rpx 20rpx 0;
							border-radius 10rpx;
							overflow hidden;
							.img-data{
								height:200rpx;
								width:200rpx;
							}
							.position-img{
								position absolute
								right:0;
								top:0;
								width:36rpx;
								height:36rpx;
							}
						}
						.img-box:nth-of-type(3n+3){
							margin-right: 0rpx;
						}
						.add-button{
							 margin:0 20rpx 20rpx 0;
							border-radius 10rpx;
							overflow hidden;
							display inline-block
							height:200rpx;
							width:200rpx;
						}
					}
				}
				
				/* 语音备注 */
				.voice{
					.voice_t{
						height: 80rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.voice_t_l{
							font-size: 30rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 80rpx;
						}
						.voice_t_r{
							width: 170rpx;
							height: 50rpx;
						}
					}
					.voice_b{
						display flex;
						justify-content flex-start;
						align-items center;
						margin-bottom :30rpx;
						.voice_b_l{
							width: 400rpx;
							height: 40rpx;
							background:rgba(88,175,255,0.3);
							border-radius: 10rpx;
							display flex;
							justify-content flex-start;
							align-items center;
							>img{
								width: 18rpx;
								height: 24rpx;
								margin-left:16rpx;
								margin-right :20rpx;
							}
						}
						.voice_b_r{
							width: 28rpx;
							height: 28rpx;
							margin-left:20rpx;
						}
					}
				}
				.check-for-button-max-box{
					display flex
					margin-top:30rpx;
					margin-bottom:20rpx;
					.left-title-p{
						width:150rpx;
						line-height:88rpx;
						text-align right
						font-size:30rpx;
					}
					.button-text-p{
						border:1rpx solid #E0E0E0;
						width:440rpx;
						height:80rpx;
						border-radius:10rpx;
						line-height :80rpx;
						color: #A2A2A2
						padding:0 20rpx;
						font-size:28rpx;
						display:block;
						overflow:hidden;
						text-overflow:ellipsis;
						white-space:nowrap;
					}
				}
				.check-for-big-box-position-img-box{
					position absolute
					top:0;
					right:0;
					width:60rpx;
					height:60rpx;
					img{
						width:36rpx;
						height:36rpx;
						margin:12rpx;
					}
				}
			}
			/* 添加隐患项 */
			.add-for-item-p{
				width:690rpx;
				height:100rpx;	
				border:4rpx dashed #0183FA;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #0183FA;
				line-height: 100rpx;
				text-align center;
				border-radius:20rpx;
				margin:40rpx auto 100rpx;
		    }
		}
		.bottom_btn{
			width: 690rpx;
			height: 90rpx;
			background: #0183FA;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			display: flex;
			justify-content: flex-start;
			position: fixed;
			left: 30rpx;
			bottom: 20rpx;
			.bottom_btn_li{
				flex: 1;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 90rpx;
				text-align: center;
				position: relative;
			}
			.bottom_btn_li::after{
				content:'';
				position: absolute;
				top: 20rpx;
				right:0rpx;
				width: 1rpx;
				height: 60rpx;
				background: #D8D8D8;
			}
			.bottom_btn_li:nth-of-type(3)::after{
				display: none;
			}
		}
	}

</style>