jiangchengfeiyi-xiaochengxu/pages/mine/main/main.vue

<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-row items-center group_2">
				<image class="image"
					src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FtiKFGDAi-avator.png" />
				<view class="ml-20 flex-col items-start flex-1">
					<text class="text">微信用户</text>
					<text class="mt-18 font text_2">剩余积分：40</text>
				</view>
			</view>
			<view class="flex-row equal-division">
				<view class="flex-col items-center" @click="goto('全部')">
					<image class="shrink-0 image_2"
						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FjqkEyOpY-totalorder.png" />
					<text class="font text_3">总订单</text>
				</view>
				<view class="flex-col items-center ml-1"  @click="goto('待支付')">
					<image class="shrink-0 image_2"
						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FEzgKLIBS-waitproduct.png" />
					<text class="font text_5">待支付</text>
				</view>
				<view class="flex-col items-center ml-1"  @click="goto('待发货')">
					<image class="shrink-0 image_2"
						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FVWTrHegX-waitpay.png" />
					<text class="font text_4">待发货</text>
				</view>
				<view class="flex-col items-center ml-1"  @click="goto('已发货')">
					<image class="shrink-0 image_2"
						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FWAdobYmD-waitshouhou.png" />
					<text class="font text_6">已发货</text>
				</view>
				<view class="flex-col items-center ml-1"  @click="goto('已退款')">
					<image class="shrink-0 image_2"
						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FGEFKFVXw-shouhou.png" />
					<text class="font text_7">退款/售后</text>
				</view>
			</view>
		</view>
		<view class="flex-col mt-37">
			<view class="flex-col group_3">
				<view class="flex-row justify-between relative">
					<image class="image_3"
						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FSJZTOttL-address.png" />
					<image class="self-start image_4 image_5"
						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FwQgycnra-rush.png" />
					<text class="font_2 text_8 pos">地 址 列 表</text>
					<view class="divider pos_2"></view>
				</view>
				<view class="flex-row justify-between relative" @click="goToText">
					<image class="image_6"
						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FejVXliLM-contact.png" />
					<image class="self-start image_4 image_7"
						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FwQgycnra-rush.png" />
					<text class="font_2 pos_3">联系人列表</text>
					<view class="divider pos_4"></view>
				</view>
			</view>
			<view class="flex-row justify-between group_4">
				<view class="flex-row items-center">
					<image class="shrink-0 image_8"
						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FOfemexvK-booking.png" />
					<text class="font_2 text_9">我 的 预 约</text>
				</view>
				<image class="self-start image_4 image_9"
					src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FwQgycnra-rush.png" />
			</view>
			<view class="flex-col group_5">
				<view class="divider view"></view>
				<view class="flex-row justify-between items-center group_6">
					<view class="flex-row items-center">
						<image class="shrink-0 image_10"
							src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FqihgypDY-coupon.png" />
						<text class="font_2">我的优惠券</text>
					</view>
					<image class="image_4 image_11"
						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FwQgycnra-rush.png" />
				</view>
				<view class="divider view_2"></view>
				<view class="flex-row justify-between group_7">
					<view class="flex-row self-center">
						<view class="flex-row shrink-0">
							<image class="shrink-0 image_12"
								src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FlGcdVAji-setting.png" />
							<text class="ml-10 self-start font_3 text_10">设</text>
						</view>
						<text class="ml-60 self-start font_3 text_11">置</text>
					</view>
					<image class="self-start image_4 image_13"
						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FwQgycnra-rush.png" />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	onMounted(() => {
		getFonts() //启动使从服务器下载字体
	})
	// const goto = () => { //跳转到订单
	// 	uni.navigateTo({
	// 		url: "/pages/mine/mineorders/mineorders"
	// 	})
	// }
	const goToText = () => { //跳转到联系人信息
		uni.navigateTo({
			url: '/pages/mine/Contact/Contact'
		})
	}
	const goTo = ()=>{  //跳转到预约
		uni.navigateTo({
			url: '/pages/mine/bookings/booking'
		})
	}
	const goto = (tab) => {
		uni.navigateTo({
			url: '/pages/mine/mineorders/mineorders?zt='+JSON.stringify(tab)
		})
	}
	const getFonts = () => { //导入字体
		uni.loadFontFace({
			family: 'FangZhengFonts',
			source: `url("https://carbon2.obs.cn-north-4.myhuaweicloud.com/fonts/FangZhengFonts.TTF")`,
			success: (res) => {
				console.log('success', res);
			},
			fail: (err) => {
				console.log('err', err);
			}
		})
	}
</script>

<style lang="scss" scoped>
	.ml-1 {
		margin-left: 1.88rpx;
	}

	.mt-37 {
		margin-top: 69.38rpx;
	}

	.page {
		padding: 135rpx 0 211.88rpx;
		background-color: #ffffff00;
		background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FQfLHXSAU-feiyigongfangbeijin.png');
		background-size: 100% 100%;
		width: 100%;
		overflow-y: hidden;
		overflow-x: hidden;
		height: 100vh;
	}

	.group {
		padding: 0 7.5rpx;
	}

	.group_2 {
		margin: 0 30rpx;
		padding: 0 7.5rpx 37.5rpx;
		border-bottom: solid 0.94rpx #aeaeae;
	}

	.image {
		border-radius: 50%;
		width: 150rpx;
		height: 151.88rpx;
	}

	.text {
		color: #000000;
		font-size: 45rpx;
		font-family: FangZhengFonts;
		line-height: 40.61rpx;
	}

	.font {
		font-size: 28.13rpx;
		font-family: FangZhengFonts;
		line-height: 27.02rpx;
		color: #000000;
	}

	.text_2 {
		margin-left: 7.5rpx;
		font-size: 30rpx;
		line-height: 27.9rpx;
	}

	.equal-division {
		margin-right: 5.63rpx;
	}

	.image_2 {
		width: 144rpx;
		height: 144rpx;
	}

	.text_3 {
		margin-top: -7.5rpx;
	}

	.text_5 {
		margin-top: -7.5rpx;
	}

	.text_4 {
		margin-top: -7.5rpx;
	}

	.text_6 {
		margin-top: -7.5rpx;
	}

	.text_7 {
		margin-top: -7.5rpx;
	}

	.group_3 {
		padding: 0 35.63rpx;
	}

	.image_3 {
		width: 120rpx;
		height: 123.75rpx;
	}

	.image_4 {
		width: 39.38rpx;
		height: 41.25rpx;
	}

	.image_5 {
		margin-right: 31.88rpx;
		margin-top: 52.5rpx;
	}

	.font_2 {
		font-size: 37.5rpx;
		font-family: FangZhengFonts;
		line-height: 36.47rpx;
		color: #000000;
	}

	.text_8 {
		line-height: 35.74rpx;
	}

	.pos {
		position: absolute;
		left: 121.76rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.divider {
		background-color: #aeaeae;
		height: 0.94rpx;
	}

	.pos_2 {
		position: absolute;
		left: 3.75rpx;
		right: 37.5rpx;
		top: 117.19rpx;
	}

	.image_6 {
		width: 120rpx;
		height: 125.63rpx;
	}

	.image_7 {
		margin-right: 31.88rpx;
		margin-top: 52.5rpx;
	}

	.pos_3 {
		position: absolute;
		left: 116.72rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.pos_4 {
		position: absolute;
		left: 3.75rpx;
		right: 37.5rpx;
		top: 124.69rpx;
	}

	.group_4 {
		margin-top: 4rpx;
		padding: 0 28.13rpx 11.25rpx;
	}

	.image_8 {
		width: 133.13rpx;
		height: 114.38rpx;
	}

	.text_9 {
		padding-top: 20rpx;
		margin-left: -7.5rpx;
		line-height: 33.99rpx;
	}

	.image_9 {
		margin-right: 41.25rpx;
		margin-top: 45.5rpx;
	}

	.group_5 {
		padding: 0 39.38rpx;
	}

	.view {
		margin-right: 33.75rpx;
	}

	.group_6 {
		padding: 22.5rpx 0 7.5rpx;
	}

	.image_10 {
		width: 118.13rpx;
		height: 101.25rpx;
	}

	.image_11 {
		margin-right: 28.13rpx;
	}

	.view_2 {
		margin-right: 31.88rpx;
	}

	.group_7 {
		padding: 28.13rpx 7.5rpx 0;
	}

	.image_12 {
		width: 91.88rpx;
		height: 91.88rpx;
	}

	.font_3 {
		font-size: 37.5rpx;
		font-family: FangZhengFonts;
		line-height: 30.47rpx;
		color: #000000;
	}

	.text_10 {
		margin-top: 26.25rpx;
	}

	.text_11 {
		margin-top: 22.5rpx;
	}

	.image_13 {
		margin-right: 20.63rpx;
		margin-top: 16.88rpx;
	}

	@import url(../../../common/css/global.css);
</style>