wangluohuoyun_website/pages/index/user.vue

<template>
	<view class="">
		<top></top>
		<view class="content">
			<view class="user">
				<view class="left">
					<text class="item" :class="userIndex==index?'item-active':''" v-for="(item,index) in userNavList"
						:key="index" @click="userChangeClick(index)">{{item}}</text>
				</view>
				<view class="right">
					<view class="view1" v-if="userIndex==0">
						<view class="header">
							<view class="header-left">
								<image :src="userInfo.avatarUrl" class="img"></image>
								<view class="user-info">
									<text class="name">{{user.name}}</text>
									<text class="phone">{{user.phone}}</text>
								</view>
							</view>
							<view class="header-right">
								<view class="right-view1">
									<view class="number">
										{{user.shipmentsNumber?user.shipmentsNumber:0}}
									</view>
									<view class="text">
										发运次数
									</view>
								</view>
								<view class="right-view2">
									<view class="number">
										{{user.favorableRate?user.favorableRate:0}}%
									</view>
									<view class="text">
										好评率
									</view>
								</view>
							</view>
						</view>
						<view class="qy-content">
							<view class="nav">
								<view class="text" :class="isSHowDL?'qy-active':''" @click="qyClick(1)">代理企业
									{{dlLength}}
								</view>
								<view class="text" :class="!isSHowDL?'qy-active':''" @click="qyClick(2)">拥有企业
									{{ownLength}}
								</view>
							</view>
							<view class="qy-list">
								<view class="item" v-for="item in company">
									<view class="qy-name">
										{{item.companyName}}
									</view>
									<view class="fr-name">
										法人：{{item.legalPersonName}}
									</view>
									<!-- <view class="zc-price">
										注册资本：1,200万（元）
									</view> -->
								</view>
							</view>
						</view>
					</view>
					<view class="view2" v-if="userIndex==1">
						<view class="top">
							<view class="view2-left">
								<view class="kyye">
									<view class="text">
										可用余额
									</view>
									<view class="number1">
										¥10000.00
									</view>
								</view>
								<view class="line">

								</view>
								<view class="djye">
									<view class="text">
										冻结余额
									</view>
									<view class="number2">
										¥10000.00
									</view>
								</view>
							</view>
							<view class="right-btn" @click="zdClick">
								账单
							</view>
						</view>
						<view class="view2-content">
							<view class="view2-content-left">
								<view class="row">
									<view class="left-text">
										账户属性
									</view>
									<view class="right-text">
										<uni-data-select v-model="value" :localdata="range" @change="change">
										</uni-data-select>
									</view>
								</view>
								<view class="row">
									<view class="left-text">
										打款账号
									</view>
									<view class="right-text">
										6217888627725467329
									</view>
								</view>
								<view class="row">
									<view class="left-text">
										开户行
									</view>
									<view class="right-text">
										交通银行
									</view>
								</view>
								<view class="row">
									<view class="left-text">
										开户支行
									</view>
									<view class="right-text">
										哈尔滨支行
									</view>
								</view>
							</view>
							<view class="zd-content" v-if="isSHowZDInfo">
								<view class="top-title">
									<view class="zdxx">
										账单信息
									</view>
									<view class="qp" @click="closeClick">
										<image src="../../static/close.png" style="width: 12px;height: 12px;"></image>
									</view>
								</view>
								<uni-table border stripe emptyText="暂无更多数据" ref="table">
									<!-- 表头行 -->
									<uni-tr>
										<uni-th align="center">时间</uni-th>
										<uni-th align="center">内容</uni-th>
										<uni-th align="left">金额</uni-th>
										<uni-th align="left">余额</uni-th>
									</uni-tr>
									<!-- 表格数据行 -->
									<uni-tr>
										<uni-td>2020-10-20</uni-td>
										<uni-td>Jeson</uni-td>
										<uni-td>北京市海淀区</uni-td>
										<uni-td>北京市海淀区</uni-td>
									</uni-tr>
									<uni-tr>
										<uni-td>2020-10-21</uni-td>
										<uni-td>HanMeiMei</uni-td>
										<uni-td>北京市海淀区</uni-td>
										<uni-td>北京市海淀区</uni-td>
									</uni-tr>
									<uni-tr>
										<uni-td>2020-10-22</uni-td>
										<uni-td>LiLei</uni-td>
										<uni-td>北京市海淀区</uni-td>
										<uni-td>北京市海淀区</uni-td>
									</uni-tr>
									<uni-tr>
										<uni-td>2020-10-23</uni-td>
										<uni-td>Danner</uni-td>
										<uni-td>北京市海淀区</uni-td>
										<uni-td>北京市海淀区</uni-td>
									</uni-tr>
									<uni-tr>
										<uni-td>2020-10-23</uni-td>
										<uni-td>Danner</uni-td>
										<uni-td>北京市海淀区</uni-td>
										<uni-td>北京市海淀区</uni-td>
									</uni-tr>
									<uni-tr>
										<uni-td>2020-10-23</uni-td>
										<uni-td>Danner</uni-td>
										<uni-td>北京市海淀区</uni-td>
										<uni-td>北京市海淀区</uni-td>
									</uni-tr>
									<uni-tr>
										<uni-td>2020-10-23</uni-td>
										<uni-td>Danner</uni-td>
										<uni-td>北京市海淀区</uni-td>
										<uni-td>北京市海淀区</uni-td>
									</uni-tr>
									<uni-tr>
										<uni-td>2020-10-23</uni-td>
										<uni-td>Danner</uni-td>
										<uni-td>北京市海淀区</uni-td>
										<uni-td>北京市海淀区</uni-td>
									</uni-tr>
									<uni-tr>
										<uni-td>2020-10-23</uni-td>
										<uni-td>Danner</uni-td>
										<uni-td>北京市海淀区</uni-td>
										<uni-td>北京市海淀区</uni-td>
									</uni-tr>
									<uni-tr>
										<uni-td>2020-10-23</uni-td>
										<uni-td>Danner</uni-td>
										<uni-td>北京市海淀区</uni-td>
										<uni-td>北京市海淀区</uni-td>
									</uni-tr>

								</uni-table>
								<view class="uni-pagination-box">
									<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent"
										:total="total" @change="fyChange" />
									<view class="close" @click="closeClick" style="cursor: pointer;">
										关闭
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="view3" v-if="userIndex==2">
						<view class="top1">
							<input class="uni-input" focus placeholder="按订单编号或司机姓名查找" v-model="searchKeyWord" />
							<view class="btn" @click="getSearch">搜索</view>
						</view>
						<view class="view3-content">
							<uni-table emptyText="暂无更多数据" ref="table1">
								<!-- 表头行 -->
								<uni-tr>
									<uni-th align="center" width='630'>订单详情</uni-th>
									<uni-th align="center">运费</uni-th>
									<uni-th align="center">状态</uni-th>
								</uni-tr>
								<!-- 表格数据行 -->
								<uni-tr v-for="item in goods">
									<uni-td>
										<view class="row1">
											<view class="row1-content1">
												<view class="left-text">
													时间：
												</view>
												<view class="">
													{{item.createDate}}
												</view>
											</view>
											<view class="row1-content1">
												<view class="left-text">
													订单编号：
												</view>
												<view class="">
													{{item.orderNo}}
												</view>
											</view>
											<view class="row1-content1">
												<view class="left-text">
													司机：
												</view>
												<view class="tx">
													<image src="../../static/jt2.png"
														style="width: 22px;height: 22px;margin-right: 10rpx;">
													</image>
													{{item.driverName}}
												</view>
											</view>
										</view>
										<view class="row2">
											{{item.compName}}：{{item.goodsName}}
										</view>
										<view class="row3">
											【发货地】{{item.sendPrivate}}{{item.sendCity}}{{item.sendArea}}
										</view>
										<view class="row4">
											【卸货地】{{item.unloadPrivate}}{{item.unloadCity}}{{item.unloadArea}}
										</view>
									</uni-td>
									<uni-td>
										<view class="row1">

										</view>
										<view class="row2">

										</view>
										<view class="row3">
											【装车预计运费】¥{{item.freight}}
										</view>
										<view class="row4">
											【卸车确认运费】¥{{item.actualFreight}}
										</view>
									</uni-td>
									<uni-td>
										<view class="row1">

										</view>
										<view class="row2">

										</view>
										<view class="row3">
											{{item.cargoOwnerStatus}}
										</view>
										<view class="row4">

										</view>
									</uni-td>
								</uni-tr>

							</uni-table>
							<view class="uni-pagination-box">
								<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total"
									@change="fyChange" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<bottom></bottom>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import top from '@/components/top.vue'
	import bottom from '@/components/bottom.vue'
	export default {
		components: {
			top,
			bottom
		},
		data() {
			return {
				goods: [],
				isSHowZDInfo: false,
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,
				value: 0,
				range: [{
						value: 0,
						text: "个人账户"
					},
					{
						value: 1,
						text: "企业对公账户"
					},
				],
				isSHowDL: true,
				orderList: [{
					orderNumber: '1',
					status: '1',
					good: '1',
					driver: '2',
					startPlace: '1',
					endPlace: '1',
					price1: '1',
					price2: '1'
				}],
				orderSearch: '',
				isShowPrice: false,
				candidates: ['北京', '南京', '东京', '武汉', '天津', '上海', '海口'],
				userNavList: ['货主信息', '账户信息', '我的订单'],
				userIndex: 0,
				city: '',
				user: {},
				company: [],
				dlLength: 0,
				ownLength: 0,
				searchKeyWord: ''
			};
		},
		onLoad() {
			this.user = uni.getStorageSync('userInfo');
			if (this.user) {
				this.$store.commit('login', this.user)
				this.init()
			}

		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		methods: {
			getSearch(e) {
				this.getOrder()
			},
			getDLCompany() {
				this.$request.baseRequest('get', '/cargoOwnerInfo/selectCargoOwner', {
						commonId: this.userInfo.id
					}).then(res => {
						uni.hideLoading()
						this.company = res.data.hyCargoOwnerCompInfoList
						this.dlLength = res.data.hyCargoOwnerCompInfoList.length
					})
					.catch(res => {
						uni.hideLoading()
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					});
			},
			init() {
				this.$request.baseRequest('get', '/cargoOwnerInfo/firstAuthentication', {
					phone: this.userInfo.phone
				}).then(res => {
					this.user = res.data
				})
				this.getDLCompany()

			},
			getOwnCompany() {
				this.$request.baseRequest('get', '/companyInfo/selectCompany', {
						commonId: this.userInfo.id
					}).then(res => {
						uni.hideLoading()
						this.company = res.data
						this.ownLength = res.data.length
					})
					.catch(res => {
						uni.hideLoading()
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					});
			},
			closeClick() {
				this.isSHowZDInfo = false
			},
			zdClick() {
				this.isSHowZDInfo = true
			},
			fyChange(val) {
				this.currentPage = val.current
				this.getOrder()
			},
			change(val) {
				console.log(val)
				this.currentPage = val.current
				this.init()
			},
			getOrder() {
				this.$request.baseRequest('get', '/orderInfo/selectCargoOwnerOrder', {
						cargoCommonId: this.userInfo.id,
						searchKeyWord: this.searchKeyWord,
						searchType: 0,
						pageSize: this.pageSize,
						currentPage: this.pageCurrent
					}).then(res => {
						if (this.pageCurrent == 1) this.goods = [];
						this.goods = this.goods.concat(res.data.records);
						this.total = res.data.total
						uni.hideLoading()
					})
					.catch(res => {
						uni.hideLoading()
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					});
			},
			qyClick(type) {
				if (type == 1) {
					this.getDLCompany()
					this.isSHowDL = true
				} else {
					this.getOwnCompany()
					this.isSHowDL = false
				}
			},
			showPriceClick() {
				this.isShowPrice = !this.isShowPrice
			},
			userChangeClick(index) {
				this.userIndex = index
				if (index == 2) {
					this.getOrder()
				}
			},
			change(val) {
				his.currentPage = val.current
				this.getOrder()
			},
			close(e) {
				// console.log('close', e)
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background: #FAFAFB;
		padding-top: 66px;
		;
	}

	.user {
		margin: auto;
		width: 3100rpx;
		display: flex;

		.left {
			width: 280px;
			height: 205px;
			background: #FFFFFF;
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			margin-right: 100rpx;

			.item {
				font-size: 16px;
				font-weight: 500;
				color: #0B0B0B;
				line-height: 26px;
				padding: 20px 40px;
				position: relative;
			}
		}

		.item-active:before {
			content: '';
			width: 4px;
			height: 35px;
			background: #2F54EF;
			position: absolute;
			left: 0;
			top: 30rpx;
			// background: green;
		}

		.right {
			width: 1242px;
			background: #FFFFFF;
			border-radius: 10px;

			.header {
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid red;
				padding: 66rpx 162rpx 66rpx 98rpx;

				.header-left {
					display: flex;
					align-items: center;

					.img {
						width: 88px;
						height: 88px;
						border-radius: 50%;
						margin-right: 20px;
					}

					.user-info {
						display: flex;
						flex-direction: column;

						.name {
							font-size: 24px;
							font-weight: 500;
							color: #0B0B0B;
							line-height: 33px;
						}

						.phone {
							margin-top: 20rpx;
							font-size: 14px;
							font-weight: 500;
							color: #999999;
							line-height: 20px;
						}
					}
				}

				.header-right {
					display: flex;
					align-items: center;
					text-align: center;

					.number {
						color: #0B0B0B;
						font-weight: bold;
						font-size: 56rpx;
					}

					.text {
						margin-top: 20rpx;
						color: #999999;
						font-size: 28rpx;
					}

					.right-view1 {
						margin-right: 160rpx;
					}
				}
			}

			.qy-content {
				padding: 42rpx 122rpx;
				box-sizing: border-box;

				.nav {
					display: flex;
				}

				.text {
					font-size: 36rpx;
					font-weight: 400;
					color: #333333;
					margin-right: 83px;
				}

				.qy-active {
					color: #2F54EF;
				}

				.qy-list {
					margin-top: 10px;

					.item {
						margin: 10px 20px 10px 0;
						width: calc(35% - 40px);
						padding: 20px;
						box-sizing: border-box;
						background: #FFFFFF;
						box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.05);
						border-radius: 6px;
						display: inline-block;

						.qy-name {
							font-size: 40rpx;
							font-weight: 500;
							color: #0B0B0B;
							line-height: 28px;
						}

						.fr-name,
						.zc-price {
							font-size: 16px;
							font-weight: 400;
							color: #9E9E9E;
							line-height: 32px;
						}
					}
				}
			}
		}
	}

	.view2 {
		padding: 108rpx 132rpx;
		height: 69vh;

		.top {
			width: 1110px;
			height: 106px;
			background: #d5dcfb33;
			border-radius: 4px;
			display: flex;
			justify-content: space-between;
			padding: 58rpx 118rpx;
			box-sizing: border-box;
			align-items: center;
		}

		.view2-left {
			display: flex;

			.text {
				font-size: 28rpx;
				color: #0B0B0B;
				line-height: 40rpx;
			}

			.number1 {
				font-size: 28rpx;
				color: #2F54EF;
			}

			.number2 {
				font-size: 28rpx;
				color: #0B0B0B;
			}

			.kyye,
			.djye {
				display: flex;
				align-content: center;
				flex-direction: column;
				justify-content: center;
			}

			.line {
				width: 1px;
				height: 108rpx;
				background: rgba(47, 84, 239, 0.1);
				margin: 0 144rpx;
			}
		}

		.right-btn {
			background: #2F54EF;
			border-radius: 4px;
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			padding: 10rpx 40rpx;
		}
	}

	.view2-content {
		position: relative;

		.uni-stat__select {
			padding: 0;
		}

		.view2-content-left {
			.row {
				display: flex;
				align-items: center;
				margin-top: 64rpx;

				.left-text {
					color: #A7A7A7;
					line-height: 22px;
					margin-right: 90rpx;
					width: 128rpx;
					text-align: center;
				}

				.right-text {
					color: #0B0B0B;
				}
			}
		}

		.zd-content {
			position: fixed;
			width: 746px;
			height: 630px;
			background: #FFFFFF;
			box-shadow: 0px 2px 24px 0px #C8C9CC;
			border-radius: 4px;
			padding: 40rpx;
			box-sizing: border-box;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;

			.top-title {
				display: flex;
				justify-content: space-between;
			}

			.zdxx {
				font-size: 32rpx;
				color: #323233;
				line-height: 40rpx;
				margin-bottom: 80rpx;
			}

			.uni-pagination-box {
				display: flex;
				position: absolute;
				bottom: 30rpx;
				right: 50px;
				justify-content: center;
				align-items: center;

				.close {
					background: #F1F3F4;
					border-radius: 2px;
					font-size: 28rpx;
					color: #323233;
					line-height: 20px;
					margin-left: 40rpx;
					padding: 10rpx 40rpx;
				}
			}

			.uni-table-tr:nth-of-type(1) {
				background: #F5F6F9;
			}
		}
	}

	.view3 {
		padding: 40rpx;
		box-sizing: border-box;

		.top1 {
			background: #F5F6F9;
			border-radius: 4px;
			display: flex;
			align-items: center;
			padding: 40rpx;
			box-sizing: border-box;

			input {
				background: white;
				padding: 10rpx 20rpx;
				width: 672rpx;
			}

			.btn {
				background: #2F54EF;
				border-radius: 4px;
				font-size: 14px;
				color: #FFFFFF;
				line-height: 20px;
				padding: 10rpx 30rpx;
				margin-left: 42rpx;
			}
		}

		.view3-content {
			.uni-pagination-box {
				margin-top: 30rpx;
			}

			.uni-table-td {
				padding: 0;
				margin-top: 20px;
			}

			margin-top: 40rpx;

			.uni-table-tr:nth-of-type(1) {
				background: #F5F6F9;
			}

			.row1 {
				display: flex;
				// background: #FAFAFB;
				background: #FAFAFB;
				padding: 30rpx 74rpx;
				box-sizing: border-box;
				height: 50px;
				margin-top: 20rpx;

				.row1-content1 {
					display: flex;
					align-items: center;
					margin-right: 40rpx;

					.tx {
						display: flex;
						align-items: center;
					}

					.left-text {
						color: #A7A7A7;

					}

				}
			}

			.row2,
			.row3,
			.row4 {
				font-size: 32rpx;
				color: #0B0B0B;
				line-height: 22px;
				margin: 20rpx 0;
				padding: 0 80rpx;
				height: 44rpx;
			}
		}
	}
</style>