anmo-master/pages/order/index.vue

<!-- 菜单悬浮的原理: 通过给菜单添加position:sticky实现, 用法超简单, 仅APP端的低端机不兼容 https://caniuse.com/#feat=css-sticky -->
<template>
	<view class="order-page">
		<!-- 对于mescroll-body: 需设置:sticky="true", 此应避免在mescroll-body标签前面加其他非定位的元素, 否则下拉区域会被挤出, 无法会隐藏.-->
		<!-- 对于mescroll-uni: 则无需设置:sticky="true", 无其他限制和要求 -->

		<!-- sticky吸顶悬浮的菜单, 父元素必须是 mescroll -->
		<view class="sticky-tabs">
			<view class=" u-flex padding bg">
				<view class="u-m-r-10">
					<image :src="avatar" style="width: 100rpx;height: 100rpx;border-radius: 100rpx;"
						@click="goNav('/pages/my/userinfo')"></image>
				</view>
				<view class="u-flex-1 u-m-l-10 " v-if="!isLogin">
					<view class="u-font-18  text-bold">
						<view class="flex align-center">
							<view class="margin-left-sm ">{{userName}}</view>
							<view class="labe" @tap="stateSave">
								<text></text>
								<view v-if="isTrue">已上线</view>
								<view v-if="!isTrue">已下线</view>
							</view>
						</view>
						<view class="flex margin-left-sm margin-top-xs" style="font-size: 22rpx;font-weight: 500;">
							<view v-if="renzheng == 0" @click.stop="goNav('/my/renzheng/index?classify='+1)">
								暂未实名认证
							</view>
							<view v-if="renzheng == 1" @click.stop="goNav('/my/renzheng/index?classify='+1)">
								实名审核中
							</view>
							<view v-if="renzheng == 2">
								已实名认证
							</view>
							<view v-if="renzheng == 3" @click.stop="goNav('/my/renzheng/index?classify='+1)">
								实名已拒绝
							</view>
						</view>

					</view>
				</view>
				<view v-else class="text-xl u-p-l-20 text-bold" @click="goLogin('/pages/public/login')">
					登录
				</view>
			</view>
			<!-- <view class="flex align-center padding-left bg">
				<image src="../../static/images/data.png" style="width: 26upx;height: 26upx;"></image>
				<view class="margin-left-xs flex align-center" style="color: #999999;">
					<view @click="bindData(1)">{{startTime?startTime:'开始时间'}}</view>
					至
					<view @click="bindData(2)">{{endTime?endTime:'结束时间'}}</view>
				</view>
			</view> -->
			<!-- <me-tabs v-model="tabIndex" nameKey='title' :tabs="tabs" @change="tabChange"></me-tabs> -->
			<u-tabs :list="tabs" :is-scroll="true" :current="tabIndex" @change="tabChange" active-color="#222" inactive-color="#AAAAAA" font-size="32" :bar-height="12" bar-width="50"></u-tabs>
		</view>

		<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<!-- 数据列表 -->
			<!-- <view v-if="goods.length > 0" class="margin-sm padding-sm bg radius" v-for="(item,index) in goods"
				:key='index' @click="clickItem(item)"> -->
			<view class="margin-sm bgwhite margin-top-sm padding-bottom-sm " style="border-radius: 32rpx;" v-for="(item,index) in goods" :key='index' @click="goNav('/my/order/pay?ordersId='+item.ordersId)">
				<view class="flex justify-between padding-sm">

					<view class="text-green" v-if="item.status ==1">待付款...</view>
					<view class="text-green" v-if="item.status ==2">待服务</view>
					<view class="text-green" v-if="item.status ==5">已完成</view>
					<view class="text-green" v-if="item.status ==6">服务中</view>
					<view class="text-green" v-if="item.status ==7">已出发</view>
					<view class="text-green" v-if="item.status ==8">已到达</view>
					<view class="text-green" v-if="item.status ==3">待评价</view>
					<view class="text-green" v-if="item.status ==4" style="color: #999999;">已取消</view>
					<view v-if="item.overTimeOrders == 1" style="color: red;font-size:26rpx">(订单已超时)</view>
					<!-- <view class="text-green" v-if="item.state ==1 ||item.state ==2">待完成</view>
			
					<view class="text-green" v-if="item.state ==3||item.state ==4">已完成</view> -->

					<view class="time">预约时间：{{item.serveTime}}</view>
				</view>
				<view class="xian"></view>
				<view class=" u-flex u-p-t-30 padding-sm">
					<view class="u-m-r-10">
						<image style="width: 160rpx;height: 160rpx;border-radius: 32rpx;" :src="item.massageImg?item.massageImg: '../../static/logo.png'" mode=""></image>
					</view>
					<view class="u-flex-1  margin-left-xs">
						<view class="u-font-18  text-bold u-line-1" style="width: 560rpx;">
							<view class="margin-right-xs text-df margin-left-xs"
								style="font-weight: bold;font-size: 32rpx;color: #222222;margin-top: 0rpx;display: inline-block;width: 400rpx; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
								{{item.title}}
							</view>
						</view>
						<view class="margin-left-xs text-cut" style="width:550upx;margin-top: 20rpx;">{{item.address}}</view>

					</view>
				</view>
				<view class="flex u-p-t-20 justify-between align-center padding-sm">
					<view class=" flex-sub " >
						实收：<text class="text-df" style="color: #F24E4E;">￥</text><text style="color: #F24E4E;font-weight: bold;font-size: 40rpx;">{{item.sumArtificerMoney}}</text>
					</view>
					<view class="flex text-right">
						<u-button v-if="item.status == 1" :custom-style="customStyle" shape="circle" :plain="true"
							@click="cancelOrder(item)">取消订单</u-button>
						<!-- <u-button v-if="item.status == 1" :custom-style="customStyle1" shape="circle" :plain="true"
							@click="bindphone(item.phone)">联系TA</u-button> -->

						<u-button v-if=" item.state==1" :custom-style="customStyle1" shape="circle" :plain="true"
							@click="goNav('/my/order/pay?id='+item.ordersId+'&isTrue=1')">查看详情</u-button>
						<u-button v-if="item.status == 6" :custom-style="customStyle" shape="circle" :plain="true"
							@click="cancel(item)">服务完成</u-button>
					</view>
				</view>
				<view class="xian" v-if="item.endTime && item.endTime.day && item.status == 6"></view>
				<view class="pintuan_syrs flex justify-between"
					v-if="item.endTime && item.endTime.day && item.status == 6">
					<view style="font-size: 28rpx;font-family: PingFang SC;font-weight: bold;color: #2FB57A;">服务倒计时
					</view>
					<uni-countdown :day="item.endTime.day" :hour="item.endTime.hour" :minute="item.endTime.minute"
						:second="item.endTime.second" color="#20C675"/>
					<!-- <uni-countdown :day="item.endTime.day" :hour="item.endTime.hour" :minute="item.endTime.minute"
						:second="item.endTime.second">
					</uni-countdown> -->
				</view>
			</view>
			<empty v-if="goods.length == 0"></empty>
			<!-- 开始时间 -->
			<u-picker v-model="startshow" mode="time" :params="paramsStart" @confirm="startData"></u-picker>
			<!-- 结束时间 -->
			<u-picker v-model="endshow" mode="time" :params="paramsEnd" @confirm="endData"></u-picker>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import mescrollBody from "@/components/mescroll-uni/components/mescroll-body/mescroll-body.vue";
	import meTabs from "@/components/mescroll-uni/me-tabs/me-tabs.vue";
	import empty from '@/components/empty.vue'

	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			mescrollBody,
			meTabs,
			empty
		},
		data() {
			return {
				goods: [], // 数据列表
				game: [],
				tabs: [{
					name: '今日订单',
					status: '1'
				}, {
					name: '待服务',
					status: '2'
				}, {
					name: '已完成',
					status: '3'
				}, {
					name: '历史订单',
					status: '4'
				}],
				tabIndex: 0, // tab下标
				isTrue: true,
				page: 1,
				limit: 10,
				userId: 0,
				status: 1,
				nickName: '',
				avatar: '',
				customStyle: {
					color: '#999999',
					border: '2rpx solid #999999',
					// backgroundColor: '#1E1F31',
					border: "8rpx",
					width: '180rpx',
					height: '54rpx',
					margin: "0 0 0 20rpx"
				},
				customStyle1: {
					color: '#2FB57A',
					border: '2rpx solid #2FB57A',
					border: "8rpx",
					width: '180rpx',
					height: '54rpx',
					margin: "0 0 0 20rpx"
				},
				latitude:'',
				longitude:'',
				avatar: '../../static/logo.png',
				isLogin: true,
				userName: '匿名',
				renzheng: 0,
				startshow: false,
				endshow: false,
				paramsStart: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				paramsEnd: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				startTime: '',
				endTime: ''
			}
		},
		onLoad() {
			this.$queue.showLoading("加载中...");
			this.userId = uni.getStorageSync('userId')
			this.nickName = uni.getStorageSync('nickName')
		},
		onShow() {
			let that = this;
			this.userId = uni.getStorageSync('userId')
			if (this.userId) {
				//是否开启技师端实时定位	375
   				this.$Request.get('/app/common/type/375').then(res => {
   					if (res.code == 0 && res.data) {
   						if (res.data.value === '是') {
   							let renzheng = uni.getStorageSync('renzheng')
   							if (renzheng && renzheng == 2) {
   								uni.getLocation({
   									type: 'wgs84',
   									success: function(res) {
   										console.log('当前位置的经度：' + res.longitude);
   										console.log('当前位置的纬度：' + res.latitude);
   										that.$queue.setData('longitude',res.longitude);
   										that.$queue.setData('latitude',res.latitude);
   										that.latitude = res.latitude
   										that.longitude = res.longitude
   									}
   								});
   							}
   						}
   					}
   				});
				this.getArtificer()
				this.isLogin = false
				this.getUserInfo()

			} else {
				this.isLogin = true
				this.userName = '匿名'
				this.browse = 0
				this.fans = 0
				this.follow = 0
				this.visitor = 0
				this.avatar = '../../static/logo.png'
			}
			setTimeout(d => {
				this.mescroll.resetUpScroll()
			}, 1000)
		},
		methods: {
			//获取技师的信息
			getArtificer() {
				this.$Request.getT("/app/artificer/selectArtificer").then(res => {
					if (res.code == 0) {
						if (res.data) {
							if (res.data.status == 1) {
								this.isTrue = true
							} else if (res.data.status == 2) {
								this.isTrue = false
							}
						} else {
							this.isTrue = false
						}
						uni.setStorageSync('artificerId', res.data.artificerId)
					}
				});
			},
			stateSave() {
				this.$Request.postT('/app/artificer/updateArtificer').then(res => {
					if (res.code == 0) {
						this.getArtificer();
						this.$queue.showToast('切换成功！')
					} else {
						this.$queue.showToast(res.msg);
					}
				});
			},
			// 拨打电话
			bindphone(phone) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否拨打电话',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定', phone);
							uni.makePhoneCall({
								phoneNumber: phone //仅为示例
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			timeFormat(param) {
				return param < 10 ? '0' + param : param;
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				if(this.isLogin){
					uni.hideLoading();
					return;
				}
				let curTab = this.tabs[this.tabIndex].status
				let data = {
					type: curTab,
					page: page.num,
					limit: page.size,
					startTime: this.startTime,
					endTime: this.endTime
				}
				this.$Request.get('/app/artificer/selectTodayOrder', data).then(res => {
					uni.hideLoading();
					this.mescroll.endBySize(res.data.list.length, res.data.totalCount)
					if (page.num == 1) this.goods = []; //如果是第一页需手动制空列表
					this.goods = [...this.goods, ...res.data.list]; //追加新数据

					this.goods.forEach(ret => {
						switch (ret.state) {
							case '1':
								ret.statusName = '今日订单'
								break;
							case '2':
								ret.statusName = '待完成'
								break;
							case '3':
								ret.statusName = '已完成'
								break;
							case '4':
								ret.statusName = '历史订单'
								break;
						}
						if (ret.status == 6 && ret.endTime) {
							let data = {}
							data.day = 0;
							data.hour = 0;
							data.minute = 0;
							data.second = 0;
							var now = new Date().getTime();
							var endDate = new Date(ret.endTime).getTime();
							let time = (endDate - now) / 1000;
							data.day = this.timeFormat(parseInt(time / (60 * 60 * 24)));
							data.hour = this.timeFormat(parseInt(time % (60 * 60 * 24) / 3600));
							data.minute = this.timeFormat(parseInt(time % (60 * 60 * 24) % 3600 / 60));
							data.second = this.timeFormat(parseInt(time % (60 * 60 * 24) % 3600 % 60));
							ret.endTime = data;
						}
					})
					this.mescroll.endSuccess(res.data.list.length); // 隐藏加载状态栏

				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
			},
			// 切换菜单
			tabChange(index) {
				this.tabIndex = index
				this.goods = []; // 置空列表,显示加载进度条
				this.mescroll.resetUpScroll()
			},
			// 取消订单
			cancelOrder(e) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认取消订单吗？取消订单将会被扣除信用分！',
					success: function(res) {
						if (res.confirm) {
							let data = {
								ordersId: e.ordersId,
							}
							that.$queue.showLoading('提交中...')
							that.$Request.post('/app/artificer/deleteOrders', data).then(res => {
								uni.hideLoading();
								if (res.code == 0) {
									that.mescroll.resetUpScroll()
								} else {
									that.$queue.showToast(res.msg);
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 完成订单
			cancel(e) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '如果服务未完成点击完成订单会遭到平台违规处理，请确认服务是否完毕?',
					success: function(res) {
						if (res.confirm) {
							let data = {
								ordersId: e.ordersId,
								accomplishLongitude: that.longitude,
								accomplishLatitude: that.latitude
							}
							that.$queue.showLoading('提交中...')
							that.$Request.post('/app/artificer/accomplishOrders', data).then(res => {
								uni.hideLoading();
								if (res.code == 0) {
									that.mescroll.resetUpScroll()
								} else {
									that.$queue.showToast(res.msg);
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//时间弹框开关
			bindData(index) {
				console.log(index, 1111)
				if (index == 1) {
					this.startshow = true
				} else if (index == 2) {
					this.endshow = true

				}
			},
			//开始时间
			startData(e) {
				// console.log(e)
				this.startTime = e.year + ' ' + e.month + '-' + e.day
			},
			// 结束时间
			endData(e) {
				this.endTime = e.year + ' ' + e.month + '-' + e.day
				// console.log(this.endTime)
				this.mescroll.resetUpScroll()
			},
			goNav(e, name) {
				console.log(e)
				if (this.userId) {
					uni.navigateTo({
						url: e
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '您还未登录,请先登录',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.navigateTo({
									url: '/pages/public/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}
			},
			getUserInfo() {
				this.$Request.get("/app/user/selectUserById").then(res => {
					if (res.code == 0) {
						this.userName = res.data.userName
						this.invitationCode = res.data.invitationCode
						this.avatar = res.data.avatar ? res.data.avatar : '../../static/logo.png'
						this.isAuthentication = res.data.isAuthentication

						// uni.setStorageSync('isAuthentication', res.data.isAuthentication)

						uni.setStorageSync('avatar', res.data.avatar)
						uni.setStorageSync('invitationCode', res.data.invitationCode)
						uni.setStorageSync('zhiFuBao', res.data.zhiFuBao)
						uni.setStorageSync('zhiFuBaoName', res.data.zhiFuBaoName)

						if (res.data.isAuthentication == 0 || res.data.isAuthentication == null) {
							this.renzheng = 0
							uni.setStorageSync("renzheng", this.renzheng)
						} else if (res.data.isAuthentication == 1) {
							this.renzheng = 1
							uni.setStorageSync("renzheng", this.renzheng)
						} else if (res.data.isAuthentication == 2) {
							this.renzheng = 2
							uni.setStorageSync("renzheng", this.renzheng)
						} else if (res.data.isAuthentication == 3) {
							this.renzheng = 3
							uni.setStorageSync("renzheng", this.renzheng)
						} else if (res.data.isAuthentication == 4) {
							this.renzheng = 4
							uni.setStorageSync("renzheng", this.renzheng)
						} else if (res.data.isAuthentication == 5) {
							this.renzheng = 5
							uni.setStorageSync("renzheng", this.renzheng)
						} else if (res.data.isAuthentication == 6) {
							this.renzheng = 6
							uni.setStorageSync("renzheng", this.renzheng)
						}

					}
				});
			},
		}
	}
</script>

<style lang="scss">
	/*
	sticky生效条件：
	1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
	2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
	3、父元素的高度不能低于sticky元素的高度
	4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
	*/
	.sticky-tabs {
		z-index: 990;
		position: sticky;
		top: var(--window-top);
		// background-color: #fff;
	}

	// 使用mescroll-uni,则top为0
	.mescroll-uni,
	/deep/.mescroll-uni {
		.sticky-tabs {
			top: 300upx;
		}
	}

	.demo-tip {
		padding: 18upx;
		font-size: 24upx;
		text-align: center;
	}

	.order-page {
		background-color: #F7F7F7;
		.text-green{
			font-size: 32rpx;
			color: #1EDA94;
		}
		.time{
			font-size: 28rpx;
			color: #AAAAAA;
		}
	}

	.bg {
		background-color: #FFFFFF;
	}

	.bgwhite {
		background-color: #FFFFFF;
	}

	.xian {
		width: 100%;
		height: 1rpx;
		border: 1rpx solid #f8f8f8;
		// margin-top: 20rpx;
	}

	.pintuan_syrs {
		color: #999999;
		font-size: 20upx;
		margin: 20rpx 20rpx 0rpx;
		display: flex;
		padding-right: 18upx;
	}

	.labe {
		background: #DCFFF2;
		display: inline-flex;
		align-items: center;
		border-radius: 39rpx;
		color: #1A1B1B;
		font-size: 22rpx;
		font-weight: 400;
		width: 134rpx;
		height: 40rpx;
		line-height: 40rpx;
		justify-content: center;
		margin-left: 20rpx;

		text {
			width: 10rpx;
			height: 10rpx;
			background: #1EDA94;
			border-radius: 50%;
			margin-right: 12rpx;
		}
	}
</style>