GuangYuYuan-app/pages/my/engineerCenter.vue

<template>
	<view class="center">
		<view class="head">
			<view class="left">
				<image :src="$globalData.publicUrl+infoData.cPortrait" mode=""></image>
			</view>
			<view class="middle">
				<view class="name">
					{{infoData.cNickName}}
				</view>
				<view class="address">
					{{address}}
				</view>
			</view>
			<!-- <view class="right" @click="getAddress">
				更换位置
			</view> -->
		</view>
		<view class="jsdata">
			<view class="num">
				<view class="item">
					<text>本月订单数</text>
					<text class="amount"><span>{{jsData.orderNum}}</span>单</text>
				</view>
				<view class="item">
					<text>本月在线时长</text>
					<text class="amount"><span>{{onLine.toFixed(2)}}</span>时</text>
				</view>
				<view class="item">
					<text>本月营业额</text>
					<text class="amount"><span>{{jsData.turnover}}</span>元</text>
				</view>
			</view>
			<view class="num first">
				<view class="item">
					<text>余额</text>
					<text class="amount"><span>{{money.dBalance}}</span>元</text>
				</view>
				<view class="item" v-if="money.getAmount > 0">
					<text>可提现</text>
					<text class="amount"><span>{{money.getAmount}}</span>元</text>
				</view>
				<view class="item" v-else>
					0.00
					<text>可提现</text>
				</view>
				<view class="withdraw" @click="goWithdraw">
					申请提现
				</view>
			</view>
		</view>
		<view class="warn">
			<view class="top">
				<view class="work is_work" v-if="isWork">
					<image src="../../static/identify/work.png" mode=""></image>
					在线中
				</view>
				<view class="work" v-else>
					<image src="../../static/identify/rest.png" mode=""></image>
					休息中
				</view>

				<view class="goWork" v-if="isWork" @click="cutWork">
					下线
				</view>
				<view class="goWork" v-else @click="cutWork">
					上线
				</view>
			</view>
			<view class="bottom" @click="warn">
				<!-- <image src="../../static/other/warn.png" mode=""></image> -->
				报警/求助
			</view>
		</view>
		<view class="other">
			<view class="title">
				其他功能
			</view>
			<view class="fun_box">
			<view class="function"  @click="goOrder">
				<image src="../../static/other/order.png" mode=""></image>
				<span class="order_num" v-if="orderNum>0">{{orderNum}}</span>
				订单
			</view>
			<view class="function"  @click="goFree">
				<image src="../../static/other/set.png" mode=""></image>
				设置免车费
			</view>
			<view class="function"  @click="goEdit">
				<image src="../../static/other/edit.png" mode=""></image>
				编辑资料
			</view>
			<view class="function" @click="qrCodeShow">
				<image src="../../static/other/code.png" mode=""></image>
				我的分销码
			</view>
			</view>
		</view>
		<view class="work">
		</view>
		<!-- 分销码弹窗 -->
		<view class="qr_code" @click="qrCodeShow" v-if="isQrcodeShow">
			<view class="img_box">
				<view class="logo">
					<image src="/static/other/code_logo.png" mode=""></image>
				</view>
				<view class="title">扫码下单  一键预约</view>
				<image :src="urlView" mode=""></image>
				<view class="foot">多名技师｜在线接单</view>
			</view>
		</view>
		<!-- 添加银行卡提示弹窗 -->
		<view class="add_blankcard" v-if="isAddBlank">
			<view class="popup">
				<view class="popup_title">
					申请提现
				</view>
				<view class="popup_center">
					您还没有绑定银行卡，<br/>
					请先去添加银行卡再进行提现
				</view>
				<view class="btn">
					<view class="cancel" @click="isAddBlank = false">
						取消
					</view>
					<view class="add" @click="addBlank">
						添加银行卡
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import { Router } from "../../../utils/common.js";
	import {
		getwxQrCode,
		freeFare,
		engineDetail,
		work,
		selectApp,
		alertOrder,
		getInfo,
		getJsLocation,
		waitOrder,
	} from '../../api/index.js'
	export default {
		data() {
			return {
				isWork: false,
				urlView: '',
				isQrcodeShow: false,
				id: '',
				infoData: {},
				jsData: {},
				money: {},
				onLine: '',
				address: '',
				latitude: '',
				longitude: '',
				name: '',
				isAddBlank:false,
				orderNum:0,
				cJsId:''
			}
		},
		methods: {
			//添加银行卡
			addBlank(){
				uni.navigateTo({
					url: './add_blank'
				})
				this.isAddBlank = false
			},
			//更换位置
			getAddress() {
				uni.chooseLocation({
					success: res => {
						this.address = res.address;
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						this.name = res.name
						let data = {
							address: this.address,
							name: this.name,
							latitude: this.latitude,
							longitude: this.longitude,
							cOpenId: uni.getStorageSync('wx_copenid')
						}
						getJsLocation(data).then(res => {
							this.getIsWork()
						})
					}
				});
			},
			//报警
			warn() {
				let data = {}
				data.jsId = this.id
				alertOrder(data).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '已通知地区负责人',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			getInfo() {
				getInfo().then(res => {

					this.money = res.data.data

				})
			},
			alertOrder() {
				// alertOrder
			},
			goWithdraw() {
				if (this.money.getAmount <= 0) {
					uni.showToast({
						title: '暂无可提现金额',
						icon: 'none'
					})
				}
				 else {
					uni.navigateTo({
						url: './withdraw'
					})
				}

			},
			selectApp() {
				let data = {}
				data.openId = uni.getStorageSync('wx_copenid')
				selectApp(data).then(res => {
					this.jsData = res.data.data,
						this.onLine = this.jsData.onLine / 60
				})
			},
			cutWork() {
				let data = {}
				data.id = this.id
				data.nStatus2 = this.isWork ? '-1' : '0'
				// data.nStatus = 
				work(data).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '设置成功',
							icon: 'none'
						})
						this.getIsWork()
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			getIsWork() {
				var openid = {
					cOpenId: uni.getStorageSync('wx_copenid')
				}
				engineDetail(openid).then(res => {
					console.log(res)
					this.address = res.data.data.name
					this.cJsId = res.data.data.id
					if (res.data.code == 200) {
						this.infoData = res.data.data
						this.id = res.data.data.id
						if (res.data.data.nStatus2 == '-1') { //未上岗
							this.isWork = false
						} else if (res.data.data.nStatus2 == '0') { //以上
							this.isWork = true
						}
					}
					let data = {
						cJsId:this.cJsId
					}
					waitOrder(data).then(res => {
						console.log(res)
						this.orderNum = res.data.data
					})
				})
			},
			qrCodeShow() {
				this.isQrcodeShow = !this.isQrcodeShow
			},
			getwxQrCode() {
				var openId = {
					openId: uni.getStorageSync('wx_copenid')
				}
				getwxQrCode(openId).then(res => {
					let TICKET = res.data.ticket
					this.urlView = 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=' + TICKET
				})
			},
			goEdit() {
				uni.navigateTo({
					url: './indent?title=编辑资料'
				})
			},
			goOrder() {
				uni.navigateTo({
					url: './js_order'
				})
			},
			goFree() {
				uni.navigateTo({
					url: './free_fare'
				})
			},
			getOrderNum(){
					console.log(this.cJsId)
				
			}
		},
		onShow() {
			this.getwxQrCode()
			this.getIsWork()
			this.selectApp()
			this.getInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		width: 100vw;
		height: 100vh;
		padding: 30rpx 38rpx;
		box-sizing: border-box;
		background: linear-gradient(152deg, #DCFFF8 0%, #F1FEFF 100%);

	}

	.head {
		width: 100%;
		// height: 158rpx;
		display: flex;
		align-items: center;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 12rpx 0px rgba(88, 209, 187, 0.1);
		border-radius: 24rpx;
		padding: 24rpx;
		box-sizing: border-box;

		.left {
			border-radius: 100px;
			overflow: hidden;
			width: 80rpx;
			height: 80rpx;
			margin-right: 32rpx;
			background-color: #ccc;
			// margin-bottom: 20rpx;

			image {
				width: 80rpx;
				height: 80rpx;
			}
		}

		.middle {
			width: 344rpx;
			margin-right: 28rpx;

			.name {
				font-size: 28rpx;
				color: #2F3437;
				line-height: 33rpx;
			}

			.address {
				font-size: 24rpx;
				color: #666666;
				line-height: 32rpx;
				margin-top: 8rpx;
			}
		}

		.right {
			width: 152rpx;
			height: 52rpx;
			background: linear-gradient(135deg, #1AD8CF 0%, #21C8C0 100%);
			border-radius: 98rpx;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 52rpx;
			text-align: center;
		}
	}

	.jsdata {
		width: 100%;
		height: 264rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 12rpx 0px rgba(88, 209, 187, 0.1);
		border-radius: 20rpx;
		padding: 24rpx;
		box-sizing: border-box;
		margin-top: 24rpx;

		.num {
			// width: 95%;
			height: 50%;
			margin: 0 auto;
			border-bottom: 1px solid #EEEEEE;
			box-sizing: border-box;
			// background-color: #fff;
			display: flex;
			justify-content: space-between;
			// align-items: center;


			.item {
				// flex: 1;
				// height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;

				text {
					// margin-top: 5px;
					color: #2F3437;
					font-size: 26rpx;
					display: inline-block;

				}

				.amount {
					font-size: 24rpx;
					color: #5E686E;
					line-height: 30rpx;
					margin-top: 10rpx;

					span {
						font-size: 26rpx;
						color: #03C8BE;
						margin-right: 4rpx;
					}
				}

			}

			.address_title {
				width: 18%;
			}

			.address {
				width: 60%;
				font-size: 30rpx;
			}

			.update_address {
				// width: 25%;
				width: 70px;
				height: 50rpx;
				text-align: center;
				background: linear-gradient(to right, #35c99d, #27aea7);
				border-radius: 10rpx;
				color: #ffffff;
				padding: 10rpx;
			}

		}

		.first {
			// margin-top: 24rpx;
			border: none;
			align-items: center;
			.withdraw {
				width: 152rpx;
				height: 52rpx;
				background: linear-gradient(135deg, #FF8B66 0%, #EE5B2D 100%);
				border-radius: 98rpx;
				text-align: center;
				// margin-left: -50px;
				padding:0px 10rpx;
				box-sizing: border-box;
				line-height: 52rpx;
				color: #fff;
			}
		}

		.money {
			// width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item {
				// flex: 1;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;

				text {
					margin-top: 5px;
					color: #999;
					font-size: 26rpx;
				}
			}

			.withdraw {
				width: 70px;
				height: 50rpx;
				text-align: center;
				background: linear-gradient(to right, #35c99d, #27aea7);
				border-radius: 10rpx;
				// margin-left: -50px;
				margin-right: -30px;
				padding: 10rpx;
				color: #fff;
			}
		}
	}

	.warn {
		width: 100%;
		height: auto;
		margin: 10px auto 0px;
		border-radius: 20rpx;
		padding: 26rpx 24rpx;
		box-sizing: border-box;
		background-color: #fff;

		.top {
			width: 100%;
			display: flex;
			justify-content: space-between;
			// margin: 0 auto;
			padding-bottom: 22rpx;
			border-bottom: 1px solid #eeeeee;
			margin-bottom: 20rpx;

			text {
				color: #a6482c;
			}

			.goWork {
				width: 100rpx;
				height: 50rpx;
				background: linear-gradient(to right, #35c99d, #27aea7);
				color: #fff;
				text-align: center;
				line-height: 50rpx;
				border-radius: 98rpx;
				padding: 0px 32rpx;
			}

			.work {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				color: #999999;
				line-height: 24rpx;

				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 12rpx;
				}
			}

			.is_work {
				color: #02CEC4;
			}
		}

		.bottom {
			width: 100%;
			height: 72rpx;
			background: #F24F62;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;

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

	}

	.other {
		width: 100%;
		height: auto;
		margin: 10px auto 0px;
		border-radius: 20rpx;
		padding: 26rpx 24rpx;
		box-sizing: border-box;
		background-color: #fff;
		.title{
			margin-bottom: 24rpx;
			font-size: 28rpx;
			color: #2F3437;
			line-height: 33rpx;
			font-weight: 600;
		}
		.fun_box{
			width: 100%;
			display: flex;
			justify-content: space-around;
			.function{
				font-size: 24rpx;
				color: #2F3437;
				line-height: 28rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				.order_num{
					position: absolute;
					top: -10rpx;
					right: -20rpx;
					// width: 30rpx;
					padding: 0px 10rpx;
					height: 30rpx;
					background-color: #fa3534;
					border-radius: 30rpx;
					color: #ffffff;
					display: flex;
					// align-items: center;
					justify-content: center;
				}
				image{
					width: 64rpx;
					height: 64rpx;
					margin-bottom: 8rpx;
				}
			}
		}

	}

	.list {
		// width: calc(100% - 60rpx);
		width: 100%;
		// height: 70vh;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		// padding: 0 30rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.item {
			width: 100%;
			height: 80rpx;
			line-height: 100rpx;
			position: relative;
			text-align: center;
			// background-color: #c0edf6;
			background-color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;
			margin-bottom: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;

			.left {
				display: flex;
				align-items: center;
				height: 100%;

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

			.right {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}


			view {
				font-size: 30rpx;
				color: #333;
				height: 30rpx;
				line-height: 30rpx;
			}

		}

	}

	.qr_code {
		width: 100vw;
		height: 100vh;
		// background-color: rgba(0, 0, 0, 0.8);
		background-image: url('/static/other/code_bg.png');
		background-size: cover; /* 完全覆盖，可能裁剪 */
		background-position: center; /* 图片居中（避免裁剪关键部分） */
		z-index: 999999;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;

		.img_box {
			width: 598rpx;
			height: 724rpx;
			background-color: #fff;
			// height: 800rpx;
			border-radius: 16rpx;
			// overflow: hidden;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: 160rpx;
			.logo{
				position: absolute;
				top: 0;
				left: 50%;
				z-index: 99999;
				transform: translate(-50%,-50%);
				image{
					width: 144rpx;
					height: 144rpx;
				}
			}
			image {
				width: 400rpx;
				height: 400rpx;
			}
		}
		.title{
			font-size: 36rpx;
			margin-bottom: 32rpx;
		}
		.foot{
			width: 316rpx;
			height: 48rpx;
			background: #F4F5F7;
			border-radius: 4rpx;
			margin-top: 32rpx;
			font-size: 28rpx;
			color: #788096;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.work {
		width: 100%;
	}
	.add_blankcard{
		width: 100vw;
		height: 100vh;
		z-index: 999999;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0,0,0,0.4);
		padding: 0px 60rpx;
		// display: flex;
		// align-items: center;
		.popup{
			width: 630rpx;
			height: 420rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-top: 564rpx;
			display: flex;
			flex-direction: column;
			.popup_title{
				width:100%;
				height: 92rpx;
				background: #F8EDE6;
				border-radius: 24rpx 24rpx 0px 0px;
				font-size: 32rpx;
				color: #000000;
				font-weight: 700;
				text-align: center;
				line-height: 92rpx;
			}
			.popup_center{
				flex: 1;
				background-color: #fff;
				font-size: 28rpx;
				color: #333333;
				line-height: 39rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
			}
			.btn{
				height: 116rpx;
				background: #FFFFFF;
				border-radius: 0px 0px 24rpx 24rpx;
				border-top: 2rpx solid #EEEEEE;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.cancel{
					width: 182rpx;
					height: 68rpx;
					border-radius: 106rpx ;
					border: 2rpx solid #BBBBBB;
					font-size: 32rpx;
					color: #999999;
					text-align: center;
					line-height: 68rpx;
				}
				.add{
					width: 268rpx;
					height: 68rpx;
					background: linear-gradient( 135deg, #FF8B66 0%, #EE5B2D 100%);
					border-radius: 44rpx;
					font-size: 32rpx;
					line-height: 68rpx;
					text-align: center;
					color: #FFFFFF;
				}
			}
		}
	}
</style>