reservation-uniapp-250509/service-uniapp-technician/pages/index/index.vue

<template>
	<view class="content">

		<view class="b-relative center">
			<view style="width: 118rpx;height: 118rpx;overflow: hidden;border-radius: 50%;">
				<image style="width: 118rpx;" :src="userInfo.image" mode="widthFix"></image>
			</view>
			<view>
				<view class="font-m">{{ userInfo.title }}，欢迎您</view>
				<view class="font-n" v-if="userInfo.realOk == 'Y'">已完成实名认证</view>
			</view>
			<view :class="{'Top-line' : true, online : userInfo.bookable == 'Y'}"
				@click="clickTopLine(userInfo.bookable == 'Y' ? 'N' : 'Y')">
				{{ userInfo.bookable == 'Y' ? '在线' : '离线' }}
			</view>
		</view>

		<view style="width: 710rpx; margin: 40rpx auto 20rpx;">
			<view class="b-relative">
				<!-- <image src="/static/ms/settled.png" style="width: 710rpx;height: 310rpx;"></image>
				<view class="banner-font-1">
					<image style="width: 380rpx;height: 98rpx;" src="/static/ms/fontjszm.png" />
				</view>
				<view class="banner-font-2">打造专业的技术服务</view>
				<view class="banner-button">立即联系我们>></view> -->
				<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
					<van-swipe-item v-for="item in bannerList" :key="item.id">
						<image class="banner-image" :src="item.image" mode="aspectFill"></image>
					</van-swipe-item>
				</van-swipe>
			</view>

			<view v-if="step === 1">
				<view class="card-1 b-relative">
					<span>订单待处理事项</span>
					<span> {{ total }}</span>
					<view class="button-1" @click="step=2">去处理</view>
				</view>

				<view class="card-2 b-relative ">
					<view>本月订单统计</view>

					<view class="flex-wrap">
						<view @click="toOrder" :class="{'card-item' : true, [cardColor[item.status || 0]] : true}"
							v-for="(item, index) in statistics">
							<view class="font-n0">{{ item.size }}</view>
							<view class="font-n1">{{ item.name }}</view>
						</view>
						<!-- <view class="card-item item-b">
							<view class="font-n0">292</view>
							<view class="font-n1">完成订单</view>
						</view>
						<view class="card-item item-c">
							<view class="font-n0">292</view>
							<view class="font-n1">完成订单</view>
						</view>
						<view class="card-item item-d">
							<view class="font-n0">292</view>
							<view class="font-n1">完成订单</view>
						</view> -->
					</view>
				</view>
			</view>

			<view v-if="step === 2">
				<view class="flex rr" style="align-items: center;">
					<uni-icons type="sound" size="50rpx" color="#FBA54F"></uni-icons>
					<view class="xx" v-html="notice">
					</view>
					<!-- 长沙市刘师傅在服务过程中客户投诉“服务过程中有不文明的行为”,扣信用分5分罚款500元，公布三日望引以为戒！ -->
				</view>

				<view class="flex" style="position: relative;">
					<view class="button-1" style="top : 0;" @click="step=1">查看统计</view>
				</view>

				<view class="flex">
					<view style="width: 8rpx;height: 34rpx;background: #60bda2;border-radius: 4rpx;margin: 8rpx 0;" />
					<view class="tt">待确认订单</view>
				</view>

				<view v-if="orderList.length > 0" class="mt20">
					<view class="item" v-for="(item, index) in orderList">
						<view class="flex-sb">
							<view class="item-time">30分钟内到达</view>
							<view class="item-price">¥ {{ item.money }}</view>
						</view>
						<view class="flex item-font1" style="margin: 24rpx 0 12rpx;border-radius: 10rpx;">
							<image :src="item.image"
								style="width: 134rpx;height: 134rpx;background: #ccc;margin-right: 20rpx;border-radius: 10rpx;"
								mode="aspectFill"></image>
							<view style="width: 452rpx;padding: 10rpx;background: #f8f8f8;border-radius: 8px;">
								<view class="item-font4">{{ '韵享推拿' }}</view>
								<view class="item-font3 flex-sb">
									<view>¥ {{ item.money }}</view>
								</view>
								<view class="flex-sb item-font2">
									<view>总计时间：{{ item.useTime }}</view>
									<view>{{ item.createTime }}</view>
								</view>
							</view>
						</view>
						<view class="flex-sb item-font1 name">
							<view>客户姓名：{{ item.name }}</view>
							<view>{{ item.phone }}</view>
						</view>
						<view class="item-font1 address">
							<span>下单地址：{{item.addressId_dictText}}</span>
						</view>

						<view class="flex">
							<!-- <view class="item-button">拒绝（32s）</view> -->
							<view class="item-button" @click.stop="confirmVipOrder(item, getOrderList)">确认</view>
						</view>
					</view>
				</view>
				
				<van-empty v-else image="/static/empty/order.png" image-size="400rpx" description="暂无待确认订单"/>
				
			</view>
		</view>


	</view>
</template>

<script>
	import orderMixins from '@/mixins/order.js'
	export default {
		mixins: [orderMixins],
		data() {
			return {
				step: 1,
				queryParams: {
					pageNo: 1,
					pageSize: 10
				},
				total: 0,
				orderList: [],
				userInfo: {},
				bannerList: [],
				statistics: [],
				cardColor: ['item-a', 'item-b', 'item-c', 'item-d'],
				config: [],
				notice: ''
			}
		},
		onShow() {
			this.getOrderList()
			this.getUserInfo()
			this.getBanner()
			this.getTenOrderStatistics()
			this.getConfig()
			this.initData()
		},
		methods: {
			getUserInfo() {
				this.$api('giveTenInfo', {}, res => {
					if (res.code == 200) {
						this.userInfo = res.result.msgTen;
						this.refreshOnLine()
					}
				})
			},
			//获取订单列表
			getOrderList(state) {
				this.$api('getTenOrderList', this.queryParams, res => {
					if (res.code == 200) {
						if (res.code == 200) {
							this.orderList = res.result.records;
							this.total = res.result.total
						} else {
							this.finished = true
						}
						if (this.queryParams.pageSize > this.orderList.length) {
							this.finished = true
						}
						this.loading = false
					}
				})
			},
			getConfig() {
				this.vid = uni.getStorageSync("ivcode");
				this.$api('getConfig', {}, res => {
					if (res.code == 200) {
						res.result.forEach(n => {
							if (n.keyValue == 'notice') {
								this.notice = n.content
							}
						})
						this.config = res.result
					}
				})
			},
			//获取banner
			getBanner() {
				this.$api('getBanner', {}, res => {
					this.bannerList = res.result;
				})
			},
			getTenOrderStatistics() {
				this.$api('getTenOrderStatistics', {}, res => {
					if (res.code == 200) {
						this.statistics = res.result
					}
				})
			},
			clickTopLine(isY) {
				let self = this;
				let is = isY == 'Y'
				
				uni.showModal({
					content: is ? '确认上线吗？你将开始接单！' : '确认下线吗？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: is ? '上线中...' : '下线中...'
							});
							self.$utils.getLocation(loca => {
								self.$api('tenOnline', {
									bookable: isY, //是否上线
									...loca,
								}, res => {
									if (res.code == 200) {
										uni.hideLoading();
										self.getUserInfo();
										uni.showToast({
											title: is ? '已上线' : '已下线',
											icon: 'none'
										})
									}
								})
							})
						} else if (res.cancel) {
							
						}
					}
				});
			},
			clickBanner() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			clickNotice() {
				uni.navigateTo({
					url: '/pages/index/notice'
				})
			},
			clickFillin() {
				uni.navigateTo({
					url: '/pages/index/fillin'
				})
			},
			clickSpring() {
				uni.navigateTo({
					url: '/pages/spring/vote'
				})
			},
			clickSpRank() {
				uni.navigateTo({
					url: '/pages/spring/rank'
				})
			},
			clickMore() {
				uni.navigateTo({
					url: '/pages/index/infor'
				})
			},
			clickStar() {
				uni.navigateTo({
					url: '/pages/star/index'
				})
			},
			clickVote() {
				uni.switchTab({
					url: '/pages/star/vote'
				})
			},
			clickRank() {
				uni.switchTab({
					url: '/pages/index/rank'
				})
			},
			clickInfo(id) {
				uni.navigateTo({
					url: `/pages/index/infod?id=${id}`
				})
			},
			refreshOnLine() { //刷新用户位置
				let isY = this.userInfo.bookable == 'Y' ? 'Y' : 'N'
				this.$utils.getLocation(loca => {
					this.$api('tenOnline', {
						bookable: isY, //是否上线
						...loca,
					}, res => {})
				})
			},
			initData() { //初始化时间项目数据
				this.$api('initTerTime', {}, res => {})
				this.$api('initTerProject', {}, res => {})
			},
			//跳转订单页面
			toOrder() {
				uni.switchTab({
					url: '/pages/index/order'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	body {
		background-color: #f3f3f3;
	}

	.center {
		width: calc(100vw - 72rpx);
		height: 194rpx;
		display: flex;
		padding: 0 36rpx 0;
		align-items: center;
		background-color: #FFF;
	}

	.my-swipe {
		width: 100%;
		height: 500rpx;
		margin: 0px auto;
		border-radius: 15rpx;
		overflow: hidden;

		.banner-image {
			width: 100%;
			height: 100%;
			vertical-align: middle;
		}
	}

	// .center image {
	// 	width: 58rpx;
	// 	height: 58rpx;

	// 	margin-right: 20rpx;
	// }

	.font-m {
		line-height: 58rpx;
		font-family: PingFang SC, PingFang SC-Heavy;
		font-weight: 800;
		text-align: left;
		color: #292421;
	}

	.font-n {
		height: 42rpx;
		line-height: 42rpx;
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: center;
		color: #fdfaf8;

		width: 168rpx;
		background: #4eed78;
		border-radius: 8px;

		margin-top: 5rpx;
		margin-left: 20rpx;
	}



	.banner-font-1 {
		width: 292rpx;
		height: 142rpx;
		font-size: 72rpx;
		line-height: 66rpx;
		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		font-weight: 400;
		text-align: left;
		color: #ffffff;
		letter-spacing: -1;
		text-shadow: 0px 6px 6px 0px rgba(0, 165, 141, 0.70);

		position: absolute;
		left: 52rpx;
		top: 34rpx;
	}

	.banner-font-2 {
		height: 28rpx;
		line-height: 28rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: #ffffff;

		text-shadow: 0 4rpx 6rpx 0 rgba(0, 165, 141, 0.70);
		position: absolute;
		left: 52rpx;
		top: 138rpx;
	}

	.banner-button {
		width: 240rpx;
		height: 56rpx;
		line-height: 56rpx;
		background: #ffdb75;
		border-radius: 24rpx;
		box-shadow: 0 6rpx 6rpx 0 rgba(17, 106, 93, 0.23);

		position: absolute;
		left: 52rpx;
		top: 220rpx;

		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #26c591;
	}


	.card-1 {
		height: 100rpx;
		line-height: 100rpx;
		background: #ffffff;
		border-radius: 16rpx;

		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #333333;

		padding: 0 20rpx;
		margin: 20rpx 0;
	}

	.button-1 {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #e25851;

		width: 148rpx;
		line-height: 54rpx;
		height: 54rpx;
		background: #fdd5d3;
		border: 2rpx solid #e98986;
		border-radius: 30rpx;

		position: absolute;
		right: 20rpx;
		top: 23rpx;
	}



	.card-2 {
		height: 420rpx;
		background: #ffffff;
		border-radius: 16rpx;

		line-height: 80rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #333333;

		padding: 0 20rpx;
	}

	.card-item {
		width: 322rpx;
		height: 140rpx;
		background: linear-gradient(174deg, #f07a77 5%, #e58988 96%);
		border-radius: 12rpx;
		margin-bottom: 20rpx;
	}

	.font-n0 {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 44rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #ffffff;
	}

	.font-n1 {
		height: 34rpx;
		line-height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #ffffff;
	}

	.item-a {
		background: linear-gradient(174deg, #f07a77 5%, #e58988 96%);
	}

	.item-b {
		background: linear-gradient(174deg, #fc8048 5%, #ed9555 96%);
	}

	.item-c {
		background: linear-gradient(174deg, #4fd3bc 5%, #74e5d1 96%);
	}

	.item-d {
		background: linear-gradient(174deg, #68d9eb 5%, #78c9e6 96%);
	}






	.rr {
		height: 52rpx;
		background: #fbecdd;
		border-radius: 16rpx;
		width: calc(710rpx - 40rpx);

		padding: 20rpx;
		margin: 20rpx 0;
	}

	.xx {
		width: 602rpx;
		height: 56rpx;
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: #323232;
		display: flex;
		align-items: center;
	}

	.tt {
		line-height: 48rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #333333;

		padding-left: 14rpx;
	}



	.item {
		width: 630rpx;
		height: 452rpx;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 40rpx;
		margin-bottom: 20rpx;
	}

	.item-time {
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #fe8a3b;
	}

	.item-price {
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: right;
		color: #f32713;
	}

	.item-button {
		width: 100%;
		height: 72rpx;
		line-height: 72rpx;
		border: 2rpx solid #c7c7c7;
		border-radius: 8rpx;

		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #333333;
		margin: 0 auto;
	}

	.item-font1 {
		line-height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;

		margin-bottom: 12rpx;
	}

	.item-font2 {
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: #717171;
	}

	.item-font3 {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #333333;
		line-height: 44rpx;
	}

	.item-font4 {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #333333;
	}

	.Top-line {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: center;
		border-radius: 8px;
		padding: 0 20rpx;
		position: absolute;
		right: 30rpx;
		color: #fdfaf8;
		background-color: #292421;
	}

	.Top-line.online {
		color: #fdfaf8;
		background: #4eed78;
	}

	.name,
	.address {
		font-size: 28rpx;
		font-weight: normal;
	}

	.address {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
</style>