yuanqu_ui/work/pages/clock/clock.vue

<template>
	<view>
		<view class="lock">
			<view class="lock_header">
				<view class="limgs">
					<image :src="juehg.avatar" alt="" v-if="juehg.avatar"></image>
					<image :src="headimg" alt="" v-else></image>
				</view>
				<view class="toptxt">
					<view class="tit">{{ juehg.nickName}}</view>
					<view class="txt">{{ kaTime }}</view>
				</view>
				<view class="topr" @click="getRecondFn">查看考勤记录 ></view>
			</view>
			<view class="bottom">
				<view class="olp mb24">
					<text>当前位置</text>
					<text @click="shuiux">点击刷新</text>
				</view>
				<view class="bott_nav">
					<image :src="adrimg"></image>
					<view>{{ address || '获取地址中' }}</view>
				</view>
				<!-- 休息 -->
				<!-- <view  class="restbox">
					<image :src="restimg"></image>
					<view>今日休息</view>
					<view>无需打卡哟~</view>
				</view> -->
				<!-- 第二部分 -->
				<view class="lock_navebut">
					<block v-if="ruleflag">
						<view class="cbtn" :class="[kaRadfalg == false ? 'bgb' : '']" @click="getPunchFn">
							<text class="time">{{ gettime }}</text>
							<text class="ctimea" v-if="kaRadfalg">{{ timetext }}</text>
							<text class="ctimea" v-else>外勤打卡</text>
						</view>
						<view class="ctips" v-if="kaRadfalg" @click="getSuccessFn">
							<image :src="yk1img"></image>
							<text>已进入考勤范围</text>
						</view>
						<view class="ctips" v-else>
							<image :src="noimg"></image>
							<text>未进入考勤范围</text>
						</view>
					</block>
					<view v-else class="cbtn bga"><text class="ctimea">暂无考勤规则</text></view>
				</view>
				<!-- 第三部分 -->
				<view class="lockbom_nam">
					<!-- 步骤条 -->
					<view class="steps">
						<view class="stepsa" v-for="(item, idx) in recordList" :key="idx">
							<image :src="stepa" class="stepstb"></image>
							<view class="stepst">
								{{item.type==1?'上班':'下班'}}打卡
								<text class="co1" v-if="item.isOutwork == 3">迟到</text>
								<text class="co2" v-else-if="item.isOutwork == 2">外勤</text>
								<text class="co3" v-else-if="item.isOutwork == 4">早退</text>
								<!-- <text class="co4" >旷工</text> -->
							</view>
							<view class="stepstc">
								<view class="stepstimg"><image :src="stepb" class="imagea"></image></view>
								<view class="stepstxt">{{ item.recordTime }} 打卡成功</view>
							</view>
							<view class="stepstc">
								<view class="stepstimg"><image :src="stepc" class="imageb"></image></view>
								<view class="stepstxt">{{ item.recordLocations }}</view>
							</view>
							<!-- 图片 -->
							<view class="stepstc" v-if="item.pictureUrl">
								<view class="stepstimg"><image :src="pimg" class="imagec"></image></view>
								<image :src="baseUrl+item.pictureUrl" class="pimgs" @click="getpreviewImage(baseUrl+item.pictureUrl)"></image>
							</view>
							<!-- 情况说明 -->
							<view class="stepstc" v-if="item.remark">
								<view class="stepstimg"><image :src="stepd" class="imagea"></image></view>
								<view class="stepstxt">{{ item.remark }}</view>
							</view>
						</view>
						<!-- <view class="stepsa">
							<image :src="stepa" class="stepstb"></image>
							<view class="stepst">下班打卡</view>
						</view> -->
					</view>
				</view>
			</view>
			<!-- 迟到打卡 -->
			<view class="bgbox" v-if="chiflag" @click="getClose"></view>
			<view class="bgfixed" v-if="chiflag">
				<!-- <view class="bgfixed"  @click="getClose"> -->
				<view class="tit mb16">
					<image :src="closeimg" @click="getClose"></image>
					<view>
						<block v-if="!kaRadfalg">外勤</block>
						<block v-if="datainfo.isOutwork==3">迟到</block>
						<block v-if="datainfo.isOutwork==4">早退</block>
					打卡</view>
				</view>
				<!--  -->
				<view class="txt" style="flex-direction: column;" >
					<view class="txta">
						<view>拍照</view>
						<image :src="photoimg" class="photoimg" @click="getphotoFn"></image>
					</view>
					<view class="imgsur" v-if="imgurlshow"><image :src="imgurlshow" class="txtimg" @click="getpreviewImage(imgurlshow)"></image></view>
				</view>
				<view class="txt" style="align-items: flex-start;">
					<view>备注</view>
					<uni-easyinput class="input" :inputBorder="false" type="textarea" autoHeight  v-model="chitext"
						placeholder="请填写原因">
					</uni-easyinput>
					<!-- <input placeholder="请填写原因" v-model="chitext" /> -->
				</view>
				<view class="btn" @click="getPunchFnchi()">确认打卡</view>
			</view>
		</view>
	</view>
</template>

<script>
// import BMap from 'BMap'
// import AMap from 'AMap'
import amapPlugin from '@/utils/initmap.js';
import self from '@/utils/location.js';
import store from '@/store';
import { clocklist, getRecordList, getNormalFn, getPunchFn, getPunchputFn } from '@/api/work/check.js';
import { uploadPhoto } from '@/api/system/user.js';
import { selectDictLabel } from '@/utils/common';
import amapFile from '@/plugins/amap-wx.js';
import config from '@/config.js';
const baseUrl = config.baseUrl;
// #ifdef APP
var myAmapFun = new amapFile.AMapWX({
	key: 'ccbe52b1ec5f66295fa4609c90a819b7',
	batch: true
});
// #endif
export default {
	// name: 'AMap',
	data() {
		return {
			baseUrl:'',
			stepa: require('@/work/static/clock/stepa.png'),
			stepb: require('@/work/static/clock/stepb.png'),
			stepc: require('@/work/static/clock/stepc.png'),
			stepd: require('@/work/static/clock/stepd.png'),
			noimg: require('@/work/static/clock/moico.png'),
			closeimg: require('@/work/static/clock/close.png'),
			photoimg: require('@/work/static/clock/photo.png'),
			pimg: require('@/work/static/clock/pimg.png'),
			adrimg: require('@/work/static/clock/adress.png'),
			headimg: require('@/work/static/clock/pic_mine_hp_normal.png'),
			yk1img: require('@/work/static/clock/icon_kqdk_jrfw.png'),
			noimg: require('@/work/static/clock/moico.png'),
			
			restimg:require('@/work/static/clock/rest.png'),
			
			address: '',
			timefn: '',
			gettime: '',
			juehg: {
				deptName: '暂无数据',
				userName: '暂无数据',
				avatar: ''
			},
			timetext: '',
			loading: false,
			text: '选择日期',
			place: {
				lng: '',
				lat: ''
			},
			center: {
				lng: '',
				lat: ''
			},
			kaNum: 2, //打卡次数
			kaRadius: '',
			rulelist:[],//考勤规则
			kaRadfalg: false,
			kaTime: '',
			kaYear: '',
			kaMonth: '',
			kaDay: '',
			kaWeek: 0,
			recordList: [],
			userId: this.$store.state.user.userId,
			deptId: this.$store.state.user.deptId,
			// kaSort: 1, //打卡分类 1:上午上班 2:上午下班 3:下午上班 4:下午下班,
			kaType: 1, //打卡类别 1正常 2:迟到 3:外勤 4:早退
			kaStatus: 1, //打卡状态 1正常 2:异常
			chiflag: false,
			recordId: '', //覆盖式打卡
			daKainfo: {
				"recordDt": "",//打卡记录完整时间（yyyy-MM-dd HH:mm:ss）
				"recordDate": "",//打卡记录日期（yyyy-mm-dd）
				"recordTime": "",//打卡记录时间（HH:mm:ss）
				"recordLocations": "",//打卡地点
				"week": "",//周几（1：星期一，2：星期二，3：星期三，4：星期四，5：星期五，6：星期六，7：星期日）
				"isOutwork":"",//打卡情况  1:正常打卡，2:外勤打卡，3：迟到，4：早退
				"pictureUrl":"",//图片地址
				"type":"",//上班，下班打卡 1:上班，2:下班
			},
			//打卡参数
			formData: {
				startWorkTime:"",
				endWorkTime:'',
			},
			datainfo:{},
			imgurl: '',
			imgurlshow:'',
			chitit: '',
			chitext: '',
			chitype: '',
			ruleflag:true,
			shuatime:30,
			refreshflag:true,
			yestday:'',
			yestkaTime:'',
			yestkaYear:'',
			yestkaMonth:'',
			yestkaDay:'',
			yestkaWeek:'',
			recordYestList:[],
			guoflag:false,
		};
	},
	created() {
		this.baseUrl=baseUrl;
		this.init();
	},
	mounted() {
		this.datainfo.userId = this.$store.state.user.userId;
		// this.formData.deptId = this.$store.state.user.deptId;
		// this.formData.ancestors = this.$store.state.user.ancestors;
		// this.formData.deptName = this.$store.state.user.deptName;
		// this.datainfo.userName = this.$store.state.user.nickName;
		this.juehg = this.$store.state.user;
	},
	onUnload() {
		clearInterval(this.timefn)
	},
	methods: {
		init() {
			var that=this;
			// 时间
			this.gettimeFn();
			// 规则
			this.getRuleFn();
			// that.getRecordYestList();
			setTimeout(function(){
				that.getRecordList();
			},1000)
			//加个拍照，考勤设置，加个是否启用拍照
			// this.getAbnormal();
		},
		getClose(){
			this.chiflag=false;
		},
		gettimeFn() {
			var that = this;
			clearInterval(this.timefn)
			that.time();
			var stime=this.shuatime
			that.timefn = setInterval(function() {
				if(stime<=1){
					// that.shuiux()
					stime=that.shuatime
				}
				stime=stime-1;
				that.time();
			}, 1000);
		},
		// 日期
		time() {
			var date = new Date();
			var y = date.getFullYear();
			var m = date.getMonth() + 1;
			var d = date.getDate();
			var h = date.getHours();
			var min = date.getMinutes();
			var s = date.getSeconds();
			var week = date.getDay(); //获取当前星期X(0-6,0代表星期天)
			var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
			var yearStr = y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d);
			var timeStr = (h < 10 ? '0' + h : h) + ':' + (min < 10 ? '0' + min : min) + ':' + (s < 10 ? '0' + s : s);
			
			// 获取昨天的
			let yesterday_milliseconds=date.getTime()-1000*60*60*24;
			let yesterday=new Date();
			 yesterday.setTime(yesterday_milliseconds);
			 let year=yesterday.getFullYear();
			 let day=yesterday.getDate();
			 let month=yesterday.getMonth()+1;
			 var yestweek = yesterday.getDay(); //获取当前星期X(0-6,0代表星期天)
			 var yestday= year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
			 var yesttimeStr = (h < 10 ? '0' + h : h) + ':' + (min < 10 ? '0' + min : min) + ':' + (s < 10 ? '0' + s : s);
			 this.yestday=yestday;
			 this.yestkaTime=yestday;
			 this.yestkaYear = year;
			 this.yestkaMonth = month < 10 ? '0' + month : month;
			 this.yestkaDay = day < 10 ? '0' + day : day;
			 this.yestkaWeek = yestweek;
			
			
			this.kaTime = yearStr;
			this.kaYear = y;
			this.kaMonth = m < 10 ? '0' + m : m;
			this.kaDay = d < 10 ? '0' + d : d;
			this.kaWeek = week;
			this.gettime = timeStr;
			// 年,月,日, 星期几 时分秒
		},
		shuiux() {
			if(this.refreshflag){
				this.refreshflag=false;
				this.getLocation();
				// this.getRecordList();
				
				// this.getRuleFn();//不至于每次都改打卡规则
				var that=this;
				setTimeout(function(){
					that.refreshflag=true;
					that.loctiotimeup();
				},2000)
			}else{
				this.refreshflag=true;
			}
			
		},
		// 时间比较
		getsort(beginTime, endTime, type) {
			if(!beginTime||!endTime){
				return false
			}
			var type = type || '';
			var nowDate = new Date();
			// var nowDate = new Date('2023/02/21 02:02:02');
			var beginDate = new Date(nowDate);
			var endDate = new Date(nowDate);
			var beginIndex = beginTime.indexOf('\:');
			var beginIndexs = beginTime.lastIndexOf('\:');
			var beginHour = beginTime.substring(0, beginIndex);
			var beginMinue = beginTime.substring(beginIndex + 1, beginIndexs);
			var beginSecend = beginTime.substring(beginIndexs + 1, beginTime.length);
			beginDate.setHours(beginHour, beginMinue, beginSecend, 0);
			var endIndex = endTime.indexOf('\:');
			var endIndexs = endTime.lastIndexOf('\:');
			var endHour = endTime.substring(0, endIndex);
			var endMinue = endTime.substring(endIndex + 1, endIndexs);
			var endSecend = endTime.substring(endIndexs + 1, endTime.length);
			endDate.setHours(endHour, endMinue, endSecend, 0);
			if (type == 'guo') {
				if (beginDate.getTime() - endDate.getTime() > 0) {
					return true;
				} else {
					return false;
				}
			} else {
				return nowDate.getTime() - beginDate.getTime() >= 0 && nowDate.getTime() <= endDate.getTime();
			}
		},
		// 判断是上班还是下班
		loctiotimeup() {
			var a = this.daKainfo.startWorkTime;
			var b = this.daKainfo.endWorkTime;
			var kata =this.formData.startWorkTime;
			var katb = '';
			if (this.getsort('00:00:00', a)) {
				// 上班卡
				if(!kata){
					this.timetext = '上班打卡';
					this.datainfo.type = 1;
					this.datainfo.isOutwork=1;
				}else if(kata){
					// 早退
					this.timetext = '下班打卡';
					this.datainfo.type = 2;
					this.datainfo.isOutwork=4;
				}
			}else if (this.getsort(a, b)) {
				if(!kata){
					// 迟到打卡
					this.timetext = '上班打卡';
					this.datainfo.type = 1;
					this.datainfo.isOutwork=3;
					
				}else if(kata){	
					// 早退打卡
					this.timetext = '下班打卡';
					this.datainfo.type = 2;
					this.datainfo.isOutwork=4;
				}
			}else if(this.getsort(b, '23:59:59')){
				this.timetext = '下班打卡';
				this.datainfo.type = 2;
				this.datainfo.isOutwork = 1;
			}	
		},
		getRuleFn() {
			clocklist().then(res => {
				if (res.rows) {
					this.ruleflag=true;
					this.rulelist=res.rows;
					this.getLocation();
				}else{
					// 暂无考勤信息
					this.ruleflag=false;
					this.getLocation();
				}
			});
		},
		// 打卡信息
		getRecordList() {
			var params = {
				// deptId: this.deptId,
				userId: this.userId,
				recordDate: this.kaTime
			};
			var a=0;
			getRecordList(params).then(res => {
				if (res.code == 200) {
					this.recordList = JSON.parse(JSON.stringify(res.rows));
					// 循环处理，获取上班时间，下班时间
					var newArr=this.recordList;
					if(newArr&&newArr.length){
						Object.keys(newArr).some((key) => {
							// 去重
							var type=newArr[key].type||'';
							var recordTime=newArr[key].recordTime||'';
							if(type==1&&recordTime){
								a=1;
								this.formData.startWorkTime=recordTime
								return
							}
							
						})
					}
					
					this.loctiotimeup();
				} else {
					this.$toast(res.msg);
				}
			});
			// this.$toast("登录中，请耐心等待...")
		},
		// 获取当前定位
		getLocation() {
			var that = this;
			// #ifdef H5
			that.place.lng = '117.212214';
			that.place.lat = '31.839812';
			that.address = '安徽省合肥市蜀山区高新技术产业开发区黄山路597号时代数码港';
			that.datainfo.recordLocations=that.address;
			that.distancefor();
			// // 解析编码
			// that.address = res.addr + res.name;
			// self.getLocation(function() {
			// 	that.place.lng = self.__CFG.lng;
			// 	that.place.lat = self.__CFG.lat;
			// 	// 解析编码
			// 	self.getGeocoder(self.__CFG.lng, self.__CFG.lat, function(res) {
			// 		that.address = res.addr + res.name;
			// 	});
			// 	// 判断是不是在范围
			// 	that.distance();
			// });
			// #endif
			// #ifndef H5
			this.getlocationapp();
			// #endif
		},
		// 获取定位
		getlocationapp() {
			var that = this;
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				success: function(res) {
					that.place.lng = res.longitude;
					that.place.lat = res.latitude;
					// #ifdef H5
					var adr = address.province + address.city + address.district + address.street + address.streetNum + address.poiName;
					// that.address=res.longitude
					that.address = adr;
					that.datainfo.recordLocations=adr;
					// #endif
					// #ifdef APP
					// 判断是不是在范围
					that.distancefor();
					that.getCity(res.latitude, res.longitude);
					// #endif
				},
				fail: function(red) {
					uni.showToast({
						title: '获取定位失败'
					});
				}
			});
		},
		// 循环判断是不是在中心点
		distancefor(lat1, lng1) {
			var that = this;
			var a=0;
			// 中心点
			var rules=JSON.parse(JSON.stringify(this.rulelist))
			if(this.ruleflag){
				Object.keys(rules).some((key) => {
					// 去重
					var lng=rules[key].lon||'';
					var lat=rules[key].lat||'';
					var distance=rules[key].distance
					if(lng&&lat&&distance){
						var type=that.getjiSort(lat,lng,distance);
						if(type=='dk'){
							this.kaRadfalg = true;
							this.daKainfo=rules[key];
							a=1;
							return
						}
					}
				})
				if(a==0){
					this.timetext = '外勤打卡';
					this.kaRadfalg = false;
					this.daKainfo=rules[0];
				}
			}	
		},
		getjiSort(clat,clng,distance){
			// 中心点
			var lat1 = clat;
			var lng1 = clng;
			// 自己点
			let lat2 = this.place.lat;
			let lng2 = this.place.lng;
			let rad1 = (lat1 * Math.PI) / 180.0;
			let rad2 = (lat2 * Math.PI) / 180.0;
			let a = rad1 - rad2;
			let b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
					
			let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2)));
			s = s * 6378.137;
			s = Math.round(s * 10000) / 10;
			s = s.toString();
			s = s.substring(0, s.indexOf('.') + 2);
			if (Number(s) < Number(distance)) {
				return "dk"
			} else {
				return 'wq'
			}
		},
		// 是否在打卡范围
		distance(lat1, lng1) {
			var that = this;
			// 中心点
			var lat1 = that.center.lat;
			var lng1 = that.center.lng;
			// 自己点
			let lat2 = this.place.lat;
			let lng2 = this.place.lng;
			let rad1 = (lat1 * Math.PI) / 180.0;
			let rad2 = (lat2 * Math.PI) / 180.0;
			let a = rad1 - rad2;
			let b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
		
			let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2)));
			s = s * 6378.137;
			s = Math.round(s * 10000) / 10;
			s = s.toString();
			s = s.substring(0, s.indexOf('.') + 2);
			if (Number(s) < Number(this.kaRadius)) {
				this.kaRadfalg = true;
			} else {
				this.timetext = '外勤打卡';
				this.kaRadfalg = false;
			}
			console.log(this.kaRadfalg)
		},
		getCity(latitude, longitude) {
			var that = this;
			that.location = `${longitude},${latitude}`;
		
			myAmapFun.getRegeo({
				//如果经纬度有问题会导致不进入回调方法，从而报错
				location: that.location,
				success: function(e) {
					//成功回调
					that.address = '';
					that.address = e[0].regeocodeData.formatted_address; //详细地址
					that.datainfo.recordLocations=that.address;
				},
				fail: function(info) {
					//失败回调
					console.log(info);
				}
			});
		},
		getPunchFnchi() {
			console.log(this.daKainfo)
			if (this.daKainfo.isPicture == 'Y' && !this.imgurl) {
				this.$toast('请拍照上传');
				return;
			}
			// if(this.chitext==''){
			// 	 this.$toast("请填写备注")
			// 	 return
			// }
			// var parmas=JSON.parse(JSON.stringify(this.daKainfo))
			
			this.$nextTick(function() {
				// 打卡
				this.chiflag = false;
				this.getPunchFnes();
			});
		},
		// 打卡
		getPunchFnes() {
			var that = this;
			var params = JSON.parse(JSON.stringify(this.datainfo));
			params.recordDate=this.kaTime;
			params.recordTime=this.gettime;
			params.week=this.kaWeek;
			params.recordDt=this.kaTime+' '+this.gettime;
				
			if(this.imgurl){
				params.pictureUrl=this.imgurl;
			}
			if(this.chitext){
				params.remark=this.chitext;
			}	
			if(!this.kaRadfalg){
				params.isOutwork=2;
			}
			console.log(params)
			// return
			getPunchFn(params).then(res => {
				if (res.code == 200) {
					// 打卡成功
					// this.getRecordList()
					this.$tab.navigateTo('/work/pages/clock/success?tit=' + this.timetext);
				} else {
					this.$toast(res.msg);
				}
			});
			return

			// return
			if (newArr.length) {
				var len = newArr.length - 1;
				// params['recordId'] = newArr[0].recordId;
				// // 覆盖打卡
				getPunchputFn(params).then(res => {
					if (res.code == 200) {
						// 打卡成功
						// this.getRecordList()
						this.$tab.navigateTo('/work/pages/clock/success?tit=' + this.timetext);
					} else {
						this.$toast(res.msg);
					}
				});
			} else {
				// params['recordId'] = '';
				getPunchFn(params).then(res => {
					if (res.code == 200) {
						// 打卡成功
						// this.getRecordList()
						this.$tab.navigateTo('/work/pages/clock/success?tit=' + this.timetext);
					} else {
						this.$toast(res.msg);
					}
				});
			}
		},
		getRecondFn(){
			var obj={
				userId:this.userId,
				recordDate:this.kaTime
				// recordDate:'2024-10-12'
			}
			this.$tab.navigateTo('/work/pages/record/detail?data='+encodeURIComponent(JSON.stringify(obj)))
		},
		getPunchFn(){
			var that=this;
			var parmas=JSON.parse(JSON.stringify(this.datainfo))
			if (parmas.isOutwork ==3||parmas.isOutwork==4||!this.kaRadfalg) {
				this.chiflag = true;
				return
			}
			this.$nextTick(function() {
				// 打卡
				this.chiflag = false;
				this.getPunchFnes();
			});
		},
		getphotoFn() {
			var that = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['camera'], //从相册选择
				success: function(res) {
					const tempFilePaths = res.tempFilePaths;
					// 文件上传
					let data = { name: 'file', filePath: res.tempFilePaths[0] };
					uploadPhoto(data).then(response => {
						that.imgurlshow = baseUrl + response.fileName;
						that.imgurl =  response.fileName;
						// if (!that.chiflag) {
						// 	that.getPunchFnes();
						// }
					});
				}
			});
		},
		getpreviewImage(url) {
			var urlArr = [];
			urlArr[0] = url;
			uni.previewImage({
				urls: urlArr,
				success: function(data) {
					
				},
				fail: function(err) {
					console.log(err.errMsg);
				}
			});
		},
		getSuccessFn(){
			this.$tab.navigateTo("/work/pages/clock/success?tit=上班打卡")
		},
	}
};
</script>
<style lang="less">
page {
	background: #ffffff;
}
</style>

<style scoped lang="scss">
.bgfixed /deep/ .uni-easyinput__content-textarea{min-height: 84rpx;margin: 0;} 
	.steps {
		padding: 0 60rpx;
		.stepsa {position: relative;padding-bottom: 20rpx;
			&::after {position: absolute;width: 2rpx;height: calc(100% - 16rpx);background: #DADADA;position: absolute;left: -30rpx;top: 28rpx;content: '';}
			&:last-child::after {display: none;}
			.stepstb {width: 16rpx;height: 16rpx;position: absolute;left: -36rpx;top: 12rpx;}
			.stepst {font-size: 26rpx;font-weight: bold;color: #343434;
				text{
					font-size: 22rpx;padding: 0 6rpx;line-height: 20rpx;margin-left: 12rpx;border-radius: 4rpx;min-width: 64rpx;
					&.co1{border: 2rpx solid $uni-katype2;color: $uni-katype2;}
					&.co2{border: 2rpx solid $uni-katype3;color: $uni-katype3;}
					&.co3{border: 2rpx solid $uni-katype4;color: $uni-katype4;}
					&.co4{border: 2rpx solid $uni-katype5;color: $uni-katype5;}
				}
			}
			.stepstc {padding-left: 12rpx;display: flex;padding: 6rpx 0;
				.stepstimg {width: 22rpx;margin-right: 8rpx;height: 30rpx;flex: 0 0 auto;display: flex;align-items: center;
					.imagea {width: 22rpx;height: 22rpx;}
					.imageb {width: 18rpx;height: 18rpx;}
					.imagec {width: 20rpx;height: 20rpx;}	
				}
				.pimgs{width: 70rpx;height: 70rpx;margin: 0 12rpx 12rpx 0;}
				.stepstxt {font-size: 22rpx;color: #343434;flex: 1;}
			}
		}
	}

	.lock {background: #fff;padding: 50rpx 34rpx 54rpx;
		.van-step--finish {
			color: #07c160;
		}

		.lock_header {padding: 42rpx 40rpx;display: flex;align-items: center;box-shadow: 0px 0px 12rpx 0px rgba(153, 152, 152, 0.39);border-radius: 6rpx;
			.limgs{width: 84rpx;height: 84rpx;margin-right: 24rpx;flex: 0 0 auto;
				image{width: 100%;height: 100%;border-radius: 50%;}
			}
			.toptxt{flex: 1;
				.tit{font-weight: bold;font-size: 28rpx;color: #343434;margin-bottom: 6rpx;}
				.txt{font-weight: 400;font-size: 26rpx;color: #666666;}
			}
			.topr{font-weight: 400;font-size: 26rpx;color: #009FE8;flex: 0 0 auto;margin-left: 12rpx;}
		}

		//   第二部分样式
		.bottom {box-shadow: 0px 0px 12rpx 0px rgba(153, 152, 152, 0.39);border-radius: 6rpx;margin-top: 30rpx;padding: 46rpx 34rpx 40rpx;


			.olp {font-size: 28rpx;font-weight: bold;color: #343434;display: flex;justify-content: space-between;width: 100%;}

			.bott_nav {
				display: flex;margin-bottom: 100rpx;
				image {width: 26rpx;height: 28rpx;margin-right: 12rpx;flex: 0 0 auto;margin-top: 4rpx;}
				
				view {flex: 1;font-size: 28rpx;font-weight: 400;color: #343434;
				}
			}
		}

		//   按钮样式
		.lock_navebut {display: flex;flex-direction: column;justify-content: center;align-items: center;margin-bottom: 72rpx;
			.cbtn {width: 368rpx;height: 194rpx;background: #1678ff;box-shadow: 0px 6rpx 6rpx 0px rgba(3, 141, 204, 0.39);border-radius: 96rpx;
				display: flex;flex-direction: column;justify-content: center;align-items: center;margin-bottom: 40rpx;
				&.bga{background-color: #999;box-shadow: 0px 6rpx 6rpx 0px rgba(153, 152, 152, 0.39)}
				&.bgb{background-color: #39b54a;box-shadow: 0px 6rpx 6rpx 0px rgba(4, 147, 52, 0.39)}
				.time{font-size: 30rpx;font-weight: bold;color: #ffffff;margin-bottom: 8rpx;}
				.ctimea{
					font-weight: 500;font-size: 28rpx;color: #ffffff;
				}
			}
			.ctips{display: flex;
				image {width: 20rpx;height: 20rpx;margin-top: 6rpx;}
				text {font-size: 26rpx;font-weight: 400;color: #666666;margin-left: 14rpx;}
			}
		}
	}
	// 异常弹窗
	.bgbox {position: fixed;left: 0;right: 0;top: 0;bottom: 0;background: rgba(0, 0, 0, 0.5);z-index: 2;}

	.bgfixed {position: fixed;left: 0;right: 0;bottom: 0;padding: 52rpx 32rpx 26rpx;background: #ffffff;z-index: 10;

		.tit {
			display: flex;
			align-items: center;
			image {width: 28rpx;height: 28rpx;flex: 0 0 auto;}
			view {font-size: 28rpx;font-weight: bold;color: #000000;padding-right: 28rpx;flex: 1;text-align: center;}
		}

		.txt {display: flex;align-items: center;margin-top: 20rpx;
			view {font-size: 28rpx;color: #343434;font-weight: bold;flex: 0 0 auto;}
			.input {font-size:28rpx;flex: 1;text-align: right;font-weight: 500;}
			.photoimg{width: 46rpx;height: 40rpx;}
			.txta{display: flex;align-items: center;width: 100%;justify-content: space-between;margin-bottom: 20rpx;}
			.imgsur{width: 100%;padding-left: 80rpx;display: flex;justify-content: flex-end;
				.txtimg{
					width: 80rpx;height: 80rpx;margin: 0 12rpx 12rpx 0;
				}
			}
			
		}

		.btn {width: 100%;height: 84rpx;background: #1678FF;border-radius: 6rpx;text-align: center;line-height: 84rpx;font-size: 28rpx;color: #FFFFFF;margin-top: 60rpx;}

	}
.restbox{display: flex;flex-direction: column;align-items: center;margin-bottom: 48rpx;
	image{width: 396rpx;height: 264rpx;margin-bottom: 20rpx;}
	view{font-weight: 500;font-size: 26rpx;color: #343434;}
}
</style>