mz/pages/dd/dd.vue

<template>
	<view class="content">
		<view class="navbar flex">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab"
			:style="{'height': height}">
			<swiper-item v-for="navitem in navList">
				<scroll-view scroll-y="true" :style="{'height': height}" class="scoll-box"
					:class="{'fbx-scoll': tabCurrentIndex == 0 && userInfo.type == 3}">
					<empty v-if="navitem.loaded === true && navitem.orderList.length === 0"></empty>
					<view class="dd-wrap" v-for="litem in navitem.orderList">
						<view class="dd-top flex">
							<image src="../../static/icon/qianger.png" mode=""></image>
							<view class="">
								订单信息
							</view>
							<view class="dd-time">
								<text v-if="tabCurrentIndex == 0">发布时间: {{litem.add_time | showTime}}</text><text
									v-if="tabCurrentIndex == 1" style="color: #6786FB;">已接单</text>
							</view>
						</view>
						<view class="dd-info">
							<view class="flex fs">
								<view class="info-name">地区:</view>
								<view class="info-val">{{litem.province + ' ' + litem.city + ' ' + litem.district}}
								</view>
							</view>
							<view class="flex fs">
								<view class="info-name">机构名称:</view>
								<view class="info-val">{{litem.organ_name}}</view>
							</view>
							<view class="flex fs">
								<view class="info-name">服务时间:</view>
								<view class="info-val">{{litem.time_area}}</view>
							</view>
							<view class="flex fs">
								<view class="info-name">职称：</view>
								<view class="info-val">{{litem.doctor_level | showlevel}}</view>
							</view>
							<view class="flex fs">
								<view class="info-name">专业：</view>
								<view class="info-val">{{litem.type}}</view>
							</view>
							<view class="flex fs">
								<view class="info-name">设备说明：</view>
								<view class="info-val">{{litem.tags.join('、')}}</view>
							</view>
							<view class="flex fs">
								<view class="info-name">回报金额：</view>
								<view class="info-val">{{litem.brokerage}}</view>
							</view>
							<view class="flex fs">
								<view class="info-name">要求：</view>
								<view class="info-val">{{litem.content}}</view>
							</view>

						</view>
						<view class="jd-info flex" v-if="litem.doctor">
							<view class="">
								姓名：{{litem.doctor.name}}
							</view>
							<view class="">
								电话：{{litem.doctor.mobile}}
							</view>
						</view>
						<view class="jd-btn" v-if="tabCurrentIndex == 0 && userInfo.type == 2">
							<view class="btn" @click="jiedan(litem)">
								确认接单
							</view>
						</view>
					</view>
					<uni-load-more :status="navitem.loadingType"></uni-load-more>
					<!-- 底部发布新订单 -->
					<view class="fb-btn" v-if="tabCurrentIndex == 0 && userInfo.type == 3">
						<view class="new-btn" @click.stop="navto('/pages/dd/opendd')">
							发布新订单
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		getUserInfo
	} from '@/api/login.js';
	import {
		ddlist,
		acceptMission
	} from '@/api/dd.js'
	import empty from '@/components/empty';
	export default {
		components: {
			empty
		},
		data() {
			return {
				height: '',
				tabCurrentIndex: 0,
				navList: [{
						type: 0,
						text: '待接订单',
						loadingType: 'more',
						orderList: [],
						page: 1, //当前页数
						limit: 10, //每次信息条数
						loaded: false
					},
					{
						type: 1,
						text: '已接订单',
						loadingType: 'more',
						orderList: [],
						page: 1, //当前页数
						limit: 10, //每次信息条数
						loaded: true
					}
				]
			}
		},
		onReady(res) {
			var obj = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.swiper-box').boundingClientRect();
					query.exec(function(res) {
						obj.height = resu.windowHeight - res[0].top + 'px';
					});
				},
				fail: res => {}
			});
		},
		onShow() {
			// 判断是否已经登录
			console.log(this.hasLogin, 'user');
			this.navList = [{
						type: 0,
						text: '待接订单',
						loadingType: 'more',
						orderList: [],
						page: 1, //当前页数
						limit: 10, //每次信息条数
						loaded: false
					},
					{
						type: 1,
						text: '已接订单',
						loadingType: 'more',
						orderList: [],
						page: 1, //当前页数
						limit: 10, //每次信息条数
						loaded: true
					}
				]
			this.loadBaseData();
			let obj = this;
			getUserInfo({})
				.then(function(e) {
					// obj.userInfo = e.data;
					obj.setUserInfo(e.data)
					uni.setStorageSync('userInfo', e.data);
					if (obj.userInfo.type == 2) {
						uni.setTabBarItem({
							index: 0,
							text: '首页',
							iconPath: 'static/tabBar/tab-home.png',
							selectedIconPath: 'static/tabBar/tab-home-current.png'
						});
						uni.setTabBarItem({
							index: 1,
							text: '我的病人',
							iconPath: 'static/tabBar/tab-cate.png',
							selectedIconPath: 'static/tabBar/tab-cate-current.png',
							visible: true
						});
						uni.setTabBarItem({
							index: 2,
							text: '科普学习',
							iconPath: 'static/tabBar/tab-study.png',
							selectedIconPath: 'static/tabBar/tab-study-current.png',
							visible: false
						});
						uni.setTabBarItem({
							index: 3,
							text: '接单',
							iconPath: 'static/tabBar/jd.png',
							selectedIconPath: 'static/tabBar/jd-act.png',
							visible: true
						})
						uni.setTabBarItem({
							index: 4,
							text: '我的',
							iconPath: 'static/tabBar/tab-my.png',
							selectedIconPath: 'static/tabBar/tab-my-current.png'
						});
					}
					if (obj.userInfo.type == 3) {
						uni.setTabBarItem({
							index: 0,
							text: '首页',
							iconPath: 'static/tabBar/tab-home.png',
							selectedIconPath: 'static/tabBar/tab-home-current.png'
						});
						uni.setTabBarItem({
							index: 1,
							text: '咨询记录',
							iconPath: 'static/tabBar/tab-cate.png',
							selectedIconPath: 'static/tabBar/tab-cate-current.png',
							visible: true
						});
						uni.setTabBarItem({
							index: 2,
							text: '科普学习',
							iconPath: 'static/tabBar/tab-study.png',
							selectedIconPath: 'static/tabBar/tab-study-current.png',
							visible: false
						});
						uni.setTabBarItem({
							index: 3,
							text: '发布订单',
							iconPath: 'static/tabBar/jd.png',
							selectedIconPath: 'static/tabBar/jd-act.png',
							pagePath: '/pages/dd/dd',
							visible: true
						})
			
						uni.setTabBarItem({
							index: 4,
							text: '我的',
							iconPath: 'static/tabBar/tab-my.png',
							selectedIconPath: 'static/tabBar/tab-my-current.png'
						});
					}
					if (obj.userInfo.type == 1) {
						uni.setTabBarItem({
							index: 0,
							text: '首页',
							iconPath: 'static/tabBar/tab-home.png',
							selectedIconPath: 'static/tabBar/tab-home-current.png'
						});
						uni.setTabBarItem({
							index: 1,
							text: '咨询记录',
							iconPath: 'static/tabBar/tab-cate.png',
							selectedIconPath: 'static/tabBar/tab-cate-current.png',
							visible: true
						});
						uni.setTabBarItem({
							index: 2,
							text: '科普学习',
							iconPath: 'static/tabBar/tab-study.png',
							selectedIconPath: 'static/tabBar/tab-study-current.png',
							visible: true
						});
						uni.setTabBarItem({
							index: 3,
							text: '接单',
							iconPath: 'static/tabBar/jd.png',
							selectedIconPath: 'static/tabBar/jd-act.png',
							visible: false
						})
						uni.setTabBarItem({
							index: 4,
							text: '我的',
							iconPath: 'static/tabBar/tab-my.png',
							selectedIconPath: 'static/tabBar/tab-my-current.png'
						});
					}
				})
				.catch(function(e) {
					console.log(e);
				});
		},
		filters: {
			showlevel(val) {
				let str = '无'
				if (val) {
					if (val == 1) {
						str = '医师'
					} else if (val == 2) {
						str = '主治医师'
					} else if (val == 3) {
						str = '副主任医师'
					} else if (val == 4) {
						str = '主任医师'
					}
				}
				return str
			},
			showTime(val) {
				let str = ''
				if (val) {
					var time = new Date(val * 1000);
					var y = time.getFullYear();
					var m = time.getMonth() + 1;
					var d = time.getDate();
					var h = time.getHours();
					var mm = time.getMinutes();
					var s = time.getSeconds();
					str = y + '-' + m + '-' + d
				}
				return str

			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			...mapMutations(['setUserInfo', 'setOrderInfo', 'logout']),
			// 
			navto(url) {
				uni.navigateTo({
					url,
					fail() {
						uni.switchTab({
							url
						})
					}
				})
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
				// 初始化数据列表
				this.navList[index].orderList = [];
				// 初始化翻页数
				this.navList[index].page = 1;
				// 初始化数据为未加载状态
				this.navList[index].loadingType = 'more';
			},
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
			//获取navlist
			loadData(type) {
				// if(type == 'tabChange' && )
				let obj = this
				let index = obj.tabCurrentIndex
				let navitem = obj.navList[index]
				if (navitem.loadingType == 'loading' || navitem.loadingType == 'noMore') {
					return
				}
				navitem.loadingType = 'loading'
				ddlist({
					page: navitem.page,
					limit: navitem.limit,
					type: navitem.type
				}).then(res => {
					console.log(res)
					navitem.orderList = navitem.orderList.concat(res.data.list)
					console.log(navitem.orderList, 'navitem.orderList')
					navitem.page++
					if (res.data.list.length == navitem.limit) {
						navitem.loadingType = 'more'
					} else {
						navitem.loadingType = 'noMore'
					}
					navitem.loaded = true
				})
			},
			// 接单
			jiedan(item) {
				let obj = this
				console.log(item)
				acceptMission({
					id: item.id
				}).then(res => {
					let s = obj.navList[obj.tabCurrentIndex].orderList.indexOf(item)
					obj.navList[obj.tabCurrentIndex].orderList.splice(s, 1);
				})
			},
			// 加载初始数据
			loadBaseData() {
				let obj = this;
				getUserInfo({})
					.then(({
						data
					}) => {
						obj.setUserInfo(data);
						// obj.userInfo = data;
						console.log(obj.userInfo);
						// let arr = data.map(e => {
						// 	e.createtime = getTime(e.createtime);
						// 	return e;
						// });
						// this.getDoctor();
						this.loadData()
						if (data.ext_info.status == 2) {

							uni.showModal({
								title: '提示',
								content: '您的审核未通过: \n ' + data.ext_info.reason + ' \n 是否重新提交审核！',
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
										if (data.type == 2) {
											uni.navigateTo({
												url: '/pages/public/DocRegister'
											});
										}
										if (data.type == 3) {
											uni.navigateTo({
												url: '/pages/public/MecRegister'
											});
										}
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}
						// 1是病人 2是医生 3是机构
						if (obj.userInfo.type == 2) {
							uni.setTabBarItem({
								index: 0,
								text: '首页',
								iconPath: 'static/tabBar/tab-home.png',
								selectedIconPath: 'static/tabBar/tab-home-current.png'
							});
							uni.setTabBarItem({
								index: 1,
								text: '我的病人',
								iconPath: 'static/tabBar/tab-cate.png',
								selectedIconPath: 'static/tabBar/tab-cate-current.png',
								visible: true
							});
							uni.setTabBarItem({
								index: 2,
								text: '科普学习',
								iconPath: 'static/tabBar/tab-study.png',
								selectedIconPath: 'static/tabBar/tab-study-current.png',
								visible: false
							});
							uni.setTabBarItem({
								index: 3,
								text: '接单',
								iconPath: 'static/tabBar/jd.png',
								selectedIconPath: 'static/tabBar/jd-act.png',
								pagePath: '/pages/dd/dd'
							})
							uni.setTabBarItem({
								index: 4,
								text: '我的',
								iconPath: 'static/tabBar/tab-my.png',
								selectedIconPath: 'static/tabBar/tab-my-current.png'
							});
						}
						if (obj.userInfo.type == 1) {
							uni.setTabBarItem({
								index: 0,
								text: '首页',
								iconPath: 'static/tabBar/tab-home.png',
								selectedIconPath: 'static/tabBar/tab-home-current.png'
							});
							uni.setTabBarItem({
								index: 1,
								text: '咨询记录',
								iconPath: 'static/tabBar/tab-cate.png',
								selectedIconPath: 'static/tabBar/tab-cate-current.png'
							});
							uni.setTabBarItem({
								index: 2,
								text: '科普学习',
								iconPath: 'static/tabBar/tab-study.png',
								selectedIconPath: 'static/tabBar/tab-study-current.png',
								visible: true
							});
							uni.setTabBarItem({
								index: 3,
								text: '发布订单',
								iconPath: 'static/tabBar/jd.png',
								selectedIconPath: 'static/tabBar/jd-act.png',
								pagePath: '/pages/dd/dd',
								visible: false
							})
							uni.setTabBarItem({
								index: 4,
								text: '我的',
								iconPath: 'static/tabBar/tab-my.png',
								selectedIconPath: 'static/tabBar/tab-my-current.png'
							});
						}
						if (obj.userInfo.type == 3) {
							uni.setTabBarItem({
								index: 0,
								text: '首页',
								iconPath: 'static/tabBar/tab-home.png',
								selectedIconPath: 'static/tabBar/tab-home-current.png'
							});
							uni.setTabBarItem({
								index: 1,
								text: '咨询记录',
								iconPath: 'static/tabBar/tab-cate.png',
								selectedIconPath: 'static/tabBar/tab-cate-current.png'
							});
							uni.setTabBarItem({
								index: 2,
								text: '科普学习',
								iconPath: 'static/tabBar/tab-study.png',
								selectedIconPath: 'static/tabBar/tab-study-current.png',
								visible: false
							});
							uni.setTabBarItem({
								index: 3,
								text: '发布订单',
								iconPath: 'static/tabBar/jd.png',
								selectedIconPath: 'static/tabBar/jd-act.png',
								pagePath: '/pages/dd/dd'
							})
							uni.setTabBarItem({
								index: 4,
								text: '我的',
								iconPath: 'static/tabBar/tab-my.png',
								selectedIconPath: 'static/tabBar/tab-my-current.png'
							});
						}

						if (obj.userInfo.type == 2 && obj.userInfo.ext_info.price == '0.00') {
							uni.showModal({
								title: '提示',
								content: '您的用户信息尚未完善，是否前去完善？',
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
										uni.navigateTo({
											url: '/pages/userinfo/doctor'
										});
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}
					})
					.catch(e => {
						if (e.message == '请登录') {
							uni.showModal({
								title: '提示',
								content: '您未登录，是否登录？',
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/public/wxLogin'
										});
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						} else {
							console.log(e.message);
						}
					});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: $base-color;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}

	.scoll-box {
		padding-top: 20rpx;

	}

	.fbx-scoll {
		padding-bottom: 145rpx;


	}

	.fb-btn {
		width: 750rpx;
		position: fixed;
		bottom: 0rpx;
		left: 0;
		height: 145rpx;
		padding-top: 30rpx;
		z-index: 9;

		.new-btn {
			width: 560rpx;
			line-height: 80rpx;
			background: #6786fb;
			box-shadow: 0px 0px 13rpx 3rpx rgba(209, 212, 217, 0.31);
			border-radius: 40rpx;
			margin: auto;
			text-align: center;
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.dd-wrap {
		width: 702rpx;
		// height: 524px;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 20rpx;
		margin: 0 auto 20rpx;

		.dd-top {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			padding: 24rpx;

			image {
				width: 30rpx;
				height: 35rpx;
				margin-right: 13rpx;
			}

			.dd-time {
				flex-grow: 1;
				text-align: right;
				font-size: 25rpx;
				font-weight: 500;
				color: #999999;
			}
		}

		.dd-info {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			padding: 0 24rpx 20rpx;

			.fs {
				justify-content: flex-start;
				align-items: flex-start;
				padding: 5rpx 0;
			}

			.info-name {
				flex-shrink: 0;
			}

			.info-val {
				padding-left: 10rpx;
			}
		}

		.jd-info {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			padding: 24rpx 4rpx;
			border-top: dashed 1rpx #EAECED;
			margin: auto;
			width: 662rpx;
		}

		.jd-btn {
			height: 111rpx;
			padding-top: 26rpx;
			border-top: dashed 1rpx #EAECED;
			margin: auto;
			width: 662rpx;

			.btn {
				width: 186rpx;
				line-height: 59rpx;
				background: #6499FA;
				border-radius: 30rpx;
				text-align: center;
				font-size: 29rpx;
				font-weight: 500;
				color: #FFFFFF;
				margin: auto 18rpx auto auto;
			}

		}
	}
</style>