wx-fensisiyu/pages/mine/mine.vue

<template>
	<view class="page">
		<u-navbar :border-bottom='false' :is-back='false'>
			<text style="margin-left: 24rpx;">我的</text>
		</u-navbar>
		<view class="top u-flex u-row-between">
			<view class="left">
				<image style="width: 116rpx;height: 116rpx;border-radius: 50%;" src="" mode=""></image>
				<view class="" style="margin-left: 22rpx;padding: 20rpx 0 0 0 ;">
					<text class="login">登录/注册</text>
					<view class="look">登录后可使用全部功能</view>
				</view>
			</view>
			<view class="qiandao">
				已签到
			</view>
		</view>
		<view class="back">
			<view class="top1">
				<text style="font-size: 36rpx;">L</text>
				<text>v.0</text>
			</view>
			<view class="bottom">当前成长值：0</view>
		</view>
		<view class="order">
			<view class="u-flex u-row-between">
				<text class="order_text">我的订单</text>
				<view class="u-flex " @click="toorder">
					<text class="order_all">全部订单</text>
					<u-icon name="arrow-right" color='#999999;' size="16"></u-icon>
				</view>
			</view>
			<view class="icon u-flex u-row-around">
				<view class="u-flex-col u-col-center ">
					<image style="height: 50rpx;width: 50rpx;" src="/static/images/dfk.png" mode=""></image>
					<text class="icon_text">待付款</text>
				</view>
				<view class="u-flex-col u-col-center ">
					<image style="height: 50rpx;width: 50rpx;" src="/static/images/dfh.png" mode=""></image>
					<text class="icon_text">待发货</text>
				</view>
				<view class="u-flex-col u-col-center ">
					<image style="height: 50rpx;width: 50rpx;" src="/static/images/ywc.png" mode=""></image>
					<text class="icon_text">待收货</text>
				</view>
				<view class="u-flex-col u-col-center ">
					<image style="height: 50rpx;width: 50rpx;" src="" mode=""></image>
					<text class="icon_text">待评价</text>
				</view>
				<view class="u-flex-col u-col-center ">
					<image style="height: 50rpx;width: 50rpx;" src="/static/images/ywc.png" mode=""></image>
					<text class="icon_text">已完成</text>
				</view>
				<view class="u-flex-col u-col-center ">
					<image style="height: 50rpx;width: 50rpx;" src="" mode=""></image>
					<text class="icon_text">售后</text>
				</view>
			</view>
		</view>
		<view class="serve">
			<view class="order_text">
				我的服务
			</view>
			<view class="">
				<view class="u-flex u-row-between" style="margin-top: 50rpx;">
					<view class="u-flex" @click="toduihuan">
						<image style="width: 84rpx;height: 84rpx;" src="" mode=""></image>
						<view class="" style="margin-left: 24rpx;">
							<text class="order_text">快手积分兑换</text>
							<view class="order_all">上传订单号得积分</view>
						</view>
					</view>
					<view class="u-flex" @click="toxuyuan">
						<image style="width: 84rpx;height: 84rpx;" src="" mode=""></image>
						<view class="" style="margin-left: 24rpx;">
							<text class="order_text">心愿单许愿</text>
							<view class="order_all">想要什么你说了算</view>
						</view>
					</view>
				</view>
				<view class="u-flex u-row-between" style="margin-top: 42rpx;">
					<view class="u-flex">
						<image style="width: 84rpx;height: 84rpx;" src="" mode=""></image>
						<view class="" style="margin-left: 24rpx;">
							<text class="order_text">邀请好友得积分</text>
							<view class="order_all">10积分轻松获取</view>
						</view>
					</view>
					<view class="u-flex">
						<image style="width: 84rpx;height: 84rpx;" src="" mode=""></image>
						<view class="" style="margin-left: 24rpx;" @click="xiaoxi">
							<text class="order_text">消息中心</text>
							<view class="order_all">站内动态一手掌握</view>
						</view>
					</view>
				</view>
				<view class="u-flex u-row-between" style="margin-top: 42rpx;">
					<view class="u-flex">
						<image style="width: 84rpx;height: 84rpx;" src="/static/images/qun.png" mode=""></image>
						<view class="" style="margin-left: 24rpx;">
							<text class="order_text">官方粉丝群</text>
							<view class="order_all">优惠提前知道</view>
						</view>
					</view>
					<button class="u-flex bor" type="default" style="background-color: rgba(0, 0, 0, 0);padding: 0;margin: 0;line-height: 0;margin-left: 0;text-align: left;border: 0rpx solid rgba(0, 0, 0, 0);" open-type="contact" >
						<image style="width: 84rpx;height: 84rpx;" src="/static/images/kefu.png" mode=""></image>
						<view class="" style="margin-left: 24rpx;">
							<text class="order_text">我的客服</text>
							<view class="order_all">您的问题我们解决</view>
						</view>
					</button>
				</view>
			</view>
		</view>
		<!-- 		<view class="setting">
			<view class="order_text">更多工具</view>
			<view class="">
				<view class="u-flex u-row-around" style="margin-top: 56rpx;">
					<view class="">
						<image style="width: 52rpx;height: 52rpx;" src="" mode=""></image>
						<view class="active">我的活动</view>
					</view>
					<view class="">
						<image style="width: 52rpx;height: 52rpx;" src="" mode=""></image>
						<view class="active">我的地址</view>
					</view>
					<view class="">
						<image style="width: 52rpx;height: 52rpx;" src="" mode=""></image>
						<view class="active">积分商城</view>
					</view>
					<view class="">
						<image style="width: 52rpx;height: 52rpx;" src="" mode=""></image>
						<view class="active">我的分享</view>
					</view>
				</view>
				<view class="u-flex u-row-around" style="margin-top: 56rpx;">
					<view class="">
						<image style="width: 52rpx;height: 52rpx;" src="" mode=""></image>
						<view class="active">我的收藏</view>
					</view>
					<view class="">
						<image style="width: 52rpx;height: 52rpx;" src="" mode=""></image>
						<view class="active">我的优惠券</view>
					</view>
					<view class="">
						<image style="width: 52rpx;height: 52rpx;" src="" mode=""></image>
						<view class="active">个人信息</view>
					</view>
					<view class="">
						<image style="width: 52rpx;height: 52rpx;" src="" mode=""></image>
						<view class="active">我的客服</view>
					</view>
				</view>
			</view>
		</view>-->
		<view class="" style="height: 36rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {
			toorder() {
				uni.navigateTo({
					url: '/pageA/orderinfo'
				})
			},
			toduihuan() {
				uni.navigateTo({
					url: '/pageA/duihuan'
				})
			},
			toxuyuan() {
				uni.navigateTo({
					url: '/pageA/xuyuan'
				})
			},
			xiaoxi() {
				uni.navigateTo({
					url: '/pageA/xiaoxi'
				})
			}
		}
	}
</script>

<style lang="scss">
	.bor::after{
		border:none
	}
	.page {
		min-height: 100vh;
		padding: 0 24rpx;
		background-color: #F7F6FB;
	}

	.setting {
		width: 692rpx;
		height: 454rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 34rpx;
		margin: 40rpx 0 0rpx 0;
		padding: 34rpx 24rpx 36rpx;

		.active {
			font-size: 24rpx;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			line-height: 34rpx;
			color: #323337;
			margin-top: 32rpx;
		}
	}

	.serve {
		width: 702rpx;
		height: 482rpx;
		background: rgba(255, 255, 255, 1);
		opacity: 1;
		border-radius: 28rpx;
		padding: 26rpx 28rpx 28rpx 30rpx;
	}

	.order_text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 42rpx;
		color: #070707;
	}

	.order_all {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 36rpx;
		color: #999999;
	}

	.order {
		width: 702rpx;
		height: 230rpx;
		background: rgba(255, 255, 255, 1);
		// opacity: 1;
		border-radius: 18rpx;
		margin: 24rpx 0 18rpx;
		padding: 22rpx 28rpx;





		.icon {
			margin-top: 46rpx;

			.icon_text {
				margin-top: 12rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 36rpx;
				color: #070707;
			}
		}
	}

	.back {
		// background-color: #A1A4B5;
		width: 690rpx;
		height: 128rpx;
		background: linear-gradient(95deg, #898EA3 0%, #A1A4B5 40%, #BDC0D1 100%);
		opacity: 1;
		border-radius: 22rpx;
		padding: 22rpx 0 24rpx 58rpx;

		.top1 {
			font-size: 28rpx;
			font-family: DOUYU;
			font-weight: normal;
			line-height: 38rpx;
			color: #FFF7F7;
			// letter-spacing: 100px;
		}

		.bottom {
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 32rpx;
			color: #FFF7F7;
			margin-top: 14rpx;
		}
	}

	.top {
		margin: 44rpx 0 38rpx 0;
		overflow: hidden;

		.left {
			display: flex;
			overflow: hidden;

			.login {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 50rpx;
				color: #323337;
				margin-bottom: 10rpx;
			}

			.look {
				font-size: 24rpx;
				font-family: PingFangSC-Regular;
				line-height: 34rpx;
				color: #959595;
			}
		}

		.qiandao {
			width: 168rpx;
			height: 54rpx;
			background: #B1E3FA;
			box-shadow: 0rpx 6rpx 12rpx #B1E3FA;
			opacity: 1;
			border-radius: 28rpx;
			line-height: 54rpx;
			text-align: center;
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			color: #FFF7F7;
		}
	}
</style>