yicangzongtai_app_240321/pages/operationCenter/index.vue

<template>
	<view class="main">
		<navbar :config="config" backColor="#666"></navbar>
		<view class="box">
			<view class="card">
				<view class="userBox">
					<view class="userBox_t">
						<view>
							<view class="user_name">{{userInfo.real_name}}</view>
							<view class="user_item">
								<text class="iconfont2">&#xe728;</text>
								<view>
									<view v-if="userInfo.service_system_province==0">普通会员</view>
									<view v-if="userInfo.service_system_province==1">创客</view>
									<view v-if="userInfo.service_system_province==2">爱心小屋</view>
									<view v-if="userInfo.service_system_province==3">服务驿站</view>
									<view v-if="userInfo.service_system_province==4">服务中心</view>
									<view v-if="userInfo.service_system_province==5">市级</view>
									<view v-if="userInfo.service_system_province==6">省级公司</view>
									<view v-if="userInfo.service_system_province==7">大区公司</view>
								</view>
							</view>
							<view class="user_item">
								<text class="iconfont2">&#xe744;</text>
								<view>{{userInfo.register_time?userInfo.register_time.substr(0,11):''}}</view>
							</view>
							<view class="user_item">
								<text class="iconfont2">&#xe643;</text>
								<view>推荐人：{{userInfo.invited}}</view>
							</view>
						</view>
						<view class="user_img">
							<image :src="userInfo.head_photo" mode="" v-if="userInfo.head_photo"></image>
							<image :src="$mConfig.staticUrl+'/head-on.png'" mode="" v-else></image>
						</view>
					</view>
					<view class="user_item" style="align-items:flex-start" v-if="userInfo.service_system_province!=0&&userInfo.service_system_province!=1">
						<text class="iconfont2">&#xe642;</text>
						<view class="areaBox">所属区域：
							{{userInfo.addr}}
						</view>
					</view>
					<view class="user_c">
						<view>
							<view class="user_c_lab">可提现服务积分</view>
							<view class="user_c_money">
								{{userInfo.commission_able}}
							</view>
						</view>
						<view class="user_c_btn" @click="goWithdraw()">去提现</view>
					</view>
				</view>
			</view>

			<view class="card otherCls">
				<view class="otherCls_title">其他工具</view>
				<view class="listBox">
					<view class="list_item" @click="goOrder">
						<view>
							<image src="/static/operationCenter/tools1.png" mode=""></image>
						</view>
						<view class="list_item_lab">推广订单</view>
						<view class="list_item_money" v-if="false">{{hintObj.extension_value.toFixed(2)}}</view>
					</view>
					<view class="list_item" @click="goNewPull">
						<view>
							<image src="/static/operationCenter/tools2.png" mode=""></image>
						</view>
						<view class="list_item_lab">推广拉新</view>
						<view class="list_item_money" v-if="false">{{hintObj.pull_new_value.toFixed(2)}}</view>
					</view>
					<view class="list_item" @click="goWdDetail">
						<view>
							<image src="/static/operationCenter/tools3.png" mode=""></image>
						</view>
						<view class="list_item_lab">提现明细</view>
						<view class="list_item_money" v-if="false">{{hintObj.withdrawal_num}}</view>
					</view>
					<view class="list_item" @click="goInvitationCode">
						<view>
							<image src="/static/operationCenter/tools4.png" mode=""></image>
						</view>
						<view class="list_item_lab">推广海报</view>
					</view>
					<view class="list_item" @click="goMyGroup">
						<view>
							<image src="/static/operationCenter/tools5.png" mode=""></image>
						</view>
						<view class="list_item_lab">我的团队</view>
					</view>
					<view class="list_item" @click="upgrade">
						<view>
							<image src="/static/operationCenter/tools6.png" mode=""></image>
						</view>
						<view class="list_item_lab">我要升级</view>
					</view>
					<view class="list_item" @click="goBankCardList">
						<view>
							<image src="/static/operationCenter/tools7.png" mode=""></image>
						</view>
						<view class="list_item_lab">收款账户</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					back: true,
					title: '运营中心',
					color: '#1A1A1A',
					backgroundColor: [1, "#ffffff"],
					statusBarFontColor: 'black',
				},
				userInfo: {
					user_service_area_list: [{}]
				},
				hintObj:{}

			}
		},
		onLoad() {

		},
		onShow() {
			this.getInfo();
			this.getHint()
		},
		methods: {
			// 跳转 去提现
			goWithdraw() {
				uni.navigateTo({
					url: "/pages/operationCenter/withdraw"
				})
			},
			// 跳转  我的团队
			goMyGroup() {
				let obj = {
					real_name: this.userInfo.real_name,
					service_system_province: this.userInfo.service_system_province,
					head_photo: this.userInfo.head_photo
				}
				uni.navigateTo({
					url: "/pages/operationCenter/myGroup?userInfo=" + JSON.stringify(obj)
				})
			},
			// 获取推广订单  推广拉新 提现明细  3个提示
			getHint(){
				this.$http.get('/userordergains/statistics').then(res=>{
					if(res&&res.code==200){
						this.hintObj=res.data
					}
				})
			},
			// 跳转 推广拉新 
			goNewPull() {
				let obj = {
					real_name: this.userInfo.real_name,
					service_system_province: this.userInfo.service_system_province,
					head_photo: this.userInfo.head_photo
				}
				uni.navigateTo({
					url: "/pages/operationCenter/newPull?userInfo=" + JSON.stringify(obj)
				})
			},
			// 跳转 推广订单
			goOrder() {
				uni.navigateTo({
					url: "/pages/user/distribution/moneyList"
				})
			},
			// 跳转 提现明细
			goWdDetail() {
				uni.navigateTo({
					url: "/pages/user/distribution/wdDetail"
				})
			},
			// 跳转 收款账户
			goBankCardList() {
				uni.navigateTo({
					url: "/pages/user/bankCard/bankCardList"
				})
			},
			// 点击 我要升级
			upgrade() {
				uni.navigateTo({
					url: "/pages/entrepreneurshipZone/index"
				})
			},
			// 跳转 推广海报
			goInvitationCode() {
				uni.navigateTo({
					url: "/pages/user/invitationCode/invitationCode"
				})

			},
			// 获取信息
			getInfo() {
				this.$http.get(`/account/operating/center/info`).then(res => {
					if (res && res.code == 200) {
						this.userInfo = res.data;
						// userInfo.user_service_area_list
						this.userInfo.addr = ""
						this.userInfo.user_service_area_list.forEach(v => {
							this.userInfo.addr += v.province_name + v.city_name + v.area_name + v
								.street_name + v.community_name+' '
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background: #f8f8f8;

		.box {
			margin-top: 30rpx;
			padding: 0 30rpx 30rpx 30rpx;
		}

		.card {
			background: #ffffff;
			padding: 30rpx;
			border-radius: 20rpx;
			// filter: blur(.5rpx);
			box-shadow: 0rpx 4rpx 8rpx 0rpx #f1f1f1;
		}

		.userBox {
			.userBox_t {
				display: flex;
				justify-content: space-between;
			}

			.user_name {
				font-size: 36rpx;
				color: #1A1A1A;
				font-weight: 700;
			}

			.user_item {
				display: flex;
				align-items: center;
				margin-top: 10rpx;

				>view {
					margin-left: 10rpx;
					color: #808080;
				}

				text {
					font-size: 32rpx;
					color: #20A634;
				}

				.areaBox {
					display: flex;
					flex-wrap: wrap;
					word-wrap: break-word;
					word-wrap: break-word;

					>view {
						// margin-right: 20rpx;
					}
				}
			}

			.user_c {
				background: #0b844a;
				border-radius: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				margin-top: 30rpx;

				.user_c_lab {
					font-size: 30rpx;
					color: #FFFFFF;
				}

				.user_c_money {
					font-size: 38rpx;
					color: #FFFFFF;

					text {
						font-size: 24rpx;
					}
				}

				.user_c_btn {
					width: 195rpx;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #FFFFFF;
					border-radius: 40rpx;
					color: #0B844A;
					font-size: 28rpx;
				}
			}
		}

		.user_img image {
			width: 130rpx;
			height: 130rpx;
			border-radius: 50%;
			margin-top: 40rpx;
		}

		.otherCls {
			padding: 30rpx;
			margin-top: 30rpx;

			.otherCls_title {
				color: #1A1A1A;
				font-size: 30rpx;
				font-weight: 700;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #e6e6e6;
			}

			.listBox {
				padding-top: 30rpx;
				display: flex;
				flex-wrap: wrap;

				.list_item {
					width: 110rpx;
					height: 200rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-right: 150rpx;

					image {
						width: 100rpx;
						height: 100rpx;
					}

					.list_item_lab {
						font-size: 26rpx;
						color: #1A1A1A;
					}

					.list_item_money {
						font-size: 24rpx;
						color: #808080;
					}

					&:nth-child(3n) {
						margin-right: 0;
					}
				}
			}
		}
	}
</style>