bjhedasx/webcode/uni-app/pages/expertCenter/index.vue

<template>
	<view class="page" v-if="showPage">
		<view class="pageMain">
			<view class="topBox radius-10">
				<view class="padding-20 dashed-bottom-ff">
					<view class="flex">
						<view class="headerBox position-relative margin-right-15">
							<image :src="expertInfo.head_img" class="width-100p height-100p block" mode="aspectFill">
							</image>
							<view class="headerStatus text-ff text-center text-26" v-if="expertInfo.status != 2">
								{{expertInfo.status == 1 ? '审核中' : '审核失败'}}</view>
						</view>
						<view class="flex-one">
							<view class="flex align-center text-ff">
								<view class="flex-one margin-right-10 text-34 text-bold">{{expertInfo.name}}</view>
								<view class="text-32 text-bold text-price">{{expertInfo.price}}</view>
							</view>
							<view class="margin-top-10 text-26 text-ff text-cut-one">{{expertInfo.brief}}</view>
						</view>
					</view>
					<view class="flex justify-end">
						<view class="setBtn text-26 text-ff text-bold position-relative"
							@click="go('/pages/expertCenter/set')">
							设置
							<view class="setCircle" v-if="expertInfo.status == 3"></view>
						</view>
					</view>
				</view>
				<view class="flex align-center padding-lr-20" @click="go('/pages/expertCenter/orderList')">
					<view class="flex-one flex align-center">
						<view class="icon-icon-zixundingdan iconfont text-40 text-ff "></view>
						<view class="margin-lr-10 text-30 text-ff text-bold line-height-100 position-relative">咨询订单
							<view class="orderCircle" v-if="is_red > 0"></view>
						</view>
					</view>

					<view class="tyIcon-huaban text-32 text-ff"></view>

				</view>
			</view>
			<view class="margin-top-50 flex">
				<view class="flex-one flex flex-direction align-center eveCard radius-10"
					@click="go('/pages/expertCenter/incomeList')">
					<view class="text-34 text-bold margin-bottom-10 line-40">{{order_number}}</view>
					<view class="text-22 text-4d line-30">累计接单</view>
				</view>
				<view class="flex-one margin-lr-15 flex flex-direction align-center eveCard radius-10"
					@click="go('/pages/expertCenter/incomeList')">
					<view class="text-34 text-bold margin-bottom-10 line-40">{{order_money}}</view>
					<view class="text-22 text-4d line-30">累计收入</view>
				</view>
				<view class="flex-one flex flex-direction align-center eveCard radius-10"
					@click="go('/pages/expertCenter/reexList')">
					<view class="text-34 text-bold margin-bottom-10 line-40">{{expert_commission}}</view>
					<view class="text-22 text-4d line-30">账户余额</view>
				</view>
			</view>
			<view class="margin-top-25 line-height-90 text-30 text-33 text-bold text-center radius-10 card2"
				@click="go('/pages/expertCenter/withdraw')">
				提现
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				expertInfo: {},
				order_number: 0, //累计接单
				order_money: 0, //累计收入
				expert_commission: 0, //账户余额
				showPage: false,
				is_red:0,
			}
		},

		onShow() {
			this.getPageData()
		},
		methods: {
			getPageData() {
				this.rq.getData('fire/api/Expert/expertCenter').then(res => {
					if (res.code == 0) {
						this.expertInfo = res.data.expert_info;
						this.order_number = res.data.order_number;
						this.order_money = res.data.order_money;
						this.expert_commission = res.data.expert_commission;
						this.is_red = res.data.is_red;
						this.showPage = true;
					}
				})
			}
		}
	}
</script>

<style scoped>
	.pageMain {
		width: 100vw;
		min-height: 100vh;
		padding: 20rpx 30rpx calc(20rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
		background: #fff;
	}

	.topBox {
		width: 100%;
		background: linear-gradient(176deg, #5CC8FF 0%, #2F97FF 100%);
	}

	.headerBox {
		width: 110rpx;
		height: 110rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.headerStatus {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .4);
		line-height: 110rpx;
	}

	.setBtn {
		padding: 10rpx 34rpx;
		border-radius: 8rpx;
		border: 2rpx solid #FFFFFF;
	}

	.eveCard {
		padding: 38rpx 0 34rpx;
		box-shadow: 0rpx 5rpx 28rpx -6rpx rgba(97, 100, 127, 0.18);
		background: #fff;
	}

	.card2 {
		width: 100%;
		background: #fff;
		box-shadow: 0rpx 5rpx 28rpx -6rpx rgba(97, 100, 127, 0.18);
		border-radius: 10rpx;
	}

	.setCircle,
	.orderCircle {
		width: 14rpx;
		height: 14rpx;
		background: #FF8534;
		border-radius: 50%;
		position: absolute;
	}

	.setCircle {
		top: -7rpx;
		right: -7rpx;
	}

	.orderCircle {
		right: -7rpx;
		top: 28rpx;
	}
</style>