qzw_xcx/pages/myCenter/index.vue

<template>
	<view class="myBox">
		<view class="myhead">
			<view @click="goinfor" class="myheadImg">
				<uni-icon color="#fff"  size="22" type="chat"></uni-icon>
			</view>
			<view class="myNmae">
				<view class="myNmaeLeft"> 
					<view class="myNmaeImg">
						<image src=""></image>
					</view>
                    <view>
						<view style="font-size: 34upx;margin-bottom: 32upx;">用户名</view>
						<view style="font-size: 24upx">积分100></view>
					</view>
				</view>
				<view class="myNmaeRight">每日签到></view>
			</view>
		</view>
		<van-cell  title="我的订单" is-link />
	    <view class="myorder">
			<view class="orderList">
				<view class="orderOne">
					<image class="imagewidth" src=""></image>
					<view>待付款</view>
				</view>
				<view class="orderOne">
					<image class="imagewidth" src=""></image>
					<view>处理中</view>
				</view>
				<view class="orderOne">
					<image class="imagewidth" src=""></image>
					<view>带评价</view>
				</view>
				<view class="orderOne">
					<image class="imagewidth" src=""></image>
					<view>已取消</view>
				</view>
				<view class="orderOne">
					<image class="imagewidth" src=""></image>
					<view>退款/售后</view>
				</view>
			</view>
		</view>
		<view style="border-bottom: 20upx solid #F5F5F5;"></view>
		<van-cell  title="我的服务"/>
		<van-cell  @click="goAdress(0)" title="圈在网代理" is-link>
			<template slot="icon">
				<image style="width: 29upx;height: 29upx;
				background-color: #007AFF;
				margin-right: 8upx;
				vertical-align:middle"
				src="" />
			</template>
		</van-cell>
		
		<van-cell  @click="goAdress(2)" title="圈在网入驻" is-link>
			<template slot="icon">
				<image style="width: 29upx;height: 29upx;
				background-color: #007AFF;
				margin-right: 8upx;
				vertical-align:middle"
				src="" />
			</template>
		</van-cell>
		
		<van-cell  @click="goAdress(3)" title="圈币明细" is-link>
			<template slot="icon">
				<image style="width: 29upx;height: 29upx;
				background-color: #007AFF;
				margin-right: 8upx;
				vertical-align:middle"
				src="" />
			</template>
		</van-cell>
		
		<van-cell  @click="goAdress(1)" title="我的地址" is-link>
			<template slot="icon">
				<image style="width: 29upx;height: 29upx;
				background-color: #007AFF;
				margin-right: 8upx;
				vertical-align:middle"
				src="" />
			</template>
		</van-cell>
		
		<van-cell @click="goAdress(9)"   title="我的收藏" is-link>
			<template slot="icon">
				<image style="width: 29upx;height: 29upx;
				background-color: #007AFF;
				margin-right: 8upx;
				vertical-align:middle"
				src="" />
			</template>
		</van-cell>
		
		<van-cell @click="goAdress(8)"  title="意见反馈" is-link>
			<template slot="icon">
				<image style="width: 29upx;height: 29upx;
				background-color: #007AFF;
				margin-right: 8upx;
				vertical-align:middle"
				src="" />
			</template>
		</van-cell>
		
		<van-cell  @click="goAdress(7)"  title="商务合作" is-link>
			<template slot="icon">
				<image style="width: 29upx;height: 29upx;
				background-color: #007AFF;
				margin-right: 8upx;
				vertical-align:middle"
				src="" />
			</template>
		</van-cell>
		
		
	</view>
</template>

<script>
	import uniIcon from '@/component/uni-icon/uni-icon.vue'
	export default {
		components: {
			uniIcon
		},
		data() {
			return {}
		},
		methods: {
			goAdress(e) {
				if(e == 1) {
					uni.navigateTo({
						url: '../myOrder/adress'  // 我的地址
					})
					
				}else if(e == 0) {
					uni.navigateTo({
						url: './applyfor'  // 我的申请
					})
				}else if(e == 2) {
					uni.navigateTo({
						url: './Settled'  // 酒店入驻
					})
				}else if(e == 3) {
					uni.navigateTo({
						url: './definite'  // 圈币明细
					})
				}else if(e == 7) {
					uni.navigateTo({
						url: './business'  // 商务合作
					})
				}else if(e == 8) {
					uni.navigateTo({
						url: './commentback'  // 意见反馈
					})
				}else if(e == 9) {
					uni.navigateTo({
						url: './myCollect'  // 我的收藏
					})
				}
			},
				
			goinfor() {
				uni.navigateTo({
					url: './information'  // 我的收藏
				})
			}
		}
	}
</script>

<style lang="scss">
	.myBox {
		height: 100vh;
		width: 100%;
		background-color: #fff;
		.myhead {
			height: 290upx;
			background-color: #D9332E;
			.myheadImg {
				padding: 10upx 32upx 0 0;
				height: 85upx;
				text-align: right;
				line-height: 85upx;
			}
			.myNmae {
				display: flex;
				justify-content: space-between;
				flex-direction: row;
				align-items: center;
				padding: 20upx 32upx 0 32upx;
				.myNmaeLeft {
					display: flex;
					flex-direction: row;
					align-items: center;
					color: #fff;
					.myNmaeImg {
						width: 128upx;
						height: 128upx;
						border-radius: 50%;
						padding-right: 32upx;
						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
							background-color: #fff;
						}
					}
				}
				.myNmaeRight {
				   width:144upx;
				   height: 52upx;
				   background:rgba(255,255,255,0.27);
				   border-radius: 44upx;
				   border:2upx solid rgb(255,255,255);
				   color: #fff;
				   line-height: 52upx;
				   text-align: center;
				   font-size: 24upx;;
				}
			}
			
		}
		.myorder {
			padding: 0 32upx;
			.orderList {
				padding: 28upx 0;
				display: flex;
				
			}
			.orderOne {
				flex: 1;
				flex-direction: column;
				text-align: center;
				
				.imagewidth {
					width: 44upx;
					height: 44upx;
					background-color: red;
				}
			}
		}
		
	}
</style>