1

pages/my/index.vue

@@ -1,19 +1,210 @@
 <template>
-	<mobile-frame>
-		首页
+	<mobile-frame :frameStyle="frameStyle" @toPath="toPath">
+		<view class="main">
+			<view class="one">
+				<view class="one_1">
+					<text class="iconfont icon-geren2" @click="toOrrder('logo')"></text>
+					<view class="name">未登录</view>
+				</view>
+				<view class="one_2">
+					<text @click="toOrrder('收藏的商品')">收藏的商品</text>
+					<text class="link">|</text>
+					<text @click="toOrrder('收藏的店铺')">收藏的店铺</text>
+				</view>
+			</view>
+			<view class="two">
+				<view class="two_1">
+					<view class="title">我的订单</view>
+					<view class="title">
+						<text @click="toOrrder('我的订单')">全部订单</text>
+						<text class="iconfont icon-dayufuhao"></text>
+					</view>
+				</view>
+				<view class="two_2">
+					<view class="orderList" v-for="(item, index) in orderList" :key="index"
+						@click="toOrrder(item.type)">
+						<view class="icon">
+							<text class="iconfont" :class="[item.icon]"></text>
+						</view>
+						<text class="title">{{item.title}}</text>
+					</view>
+				</view>
+				<view class="two_1" v-for="(item, index) in menuList" :key="index" @click="toOrrder(item.type)">
+					<view class="title">{{item.title}}</view>
+					<view class="title">
+						<text class="iconfont icon-dayufuhao"></text>
+					</view>
+				</view>
+			</view>
+		</view>
 	</mobile-frame>
 </template>
 
 <script>
 	export default {
 		data() {
-			return {};
+			return {
+				frameStyle: {
+					useBar: true
+				},
+				logoUrl: this.$config.logoUrl,
+				form: {},
+				// 图标菜单
+				orderList: [{
+						icon: 'icon-daifukuan',
+						title: '待付款',
+						type: 'a'
+					},
+					{
+						icon: 'icon-daifahuo',
+						title: '待发货',
+						type: 'b'
+					},
+					{
+						icon: 'icon-daishouhuo',
+						title: '待收货/消费',
+						type: 'c'
+					},
+					{
+						icon: 'icon-daipinglun',
+						title: '待评论',
+						type: 'd'
+					},
+					{
+						icon: 'icon-shouhoufuwuicon',
+						title: '售后',
+						type: 'e'
+					},
+				],
+				// 菜单
+				menuList: [{
+						title: '我的优惠劵',
+						type: 'f'
+					},
+					{
+						title: '我的积分',
+						type: 'g'
+					},
+					{
+						title: '我的资产',
+						type: 'h'
+					},
+					{
+						title: '我的拼团',
+						type: 'i'
+					},
+					{
+						title: '我的收货地址',
+						type: 'j'
+					},
+					{
+						title: '账号管理',
+						type: 'k'
+					},
+					{
+						title: '客服电话',
+						type: 'l'
+					},
+				],
+			};
 		},
 		onShow: function() {},
-		methods: {}
+		methods: {
+			toPath(e) {
+				if (e && e.route) uni.redirectTo({
+					url: `/${e.route}`
+				})
+			},
+			// 跳转页面
+			toOrrder(e) {
+				const that = this;
+				console.log(e);
+			},
+		}
 	}
 </script>
 
 <style lang="scss">
+	.main {
+		display: flex;
+		flex-direction: column;
+		width: 100vw;
+		height: 100vh;
 
+		.one {
+			text-align: center;
+			padding: 4vw 0;
+			background-color: #FB1438;
+			color: var(--mainColor);
+
+			.one_1 {
+				margin: 0 0 5vw 0;
+
+				.iconfont {
+					font-size: 80px;
+				}
+
+				.name {
+					margin: 2vw 0;
+					font-size: var(--font20Szie);
+				}
+			}
+
+			.one_2 {
+				display: flex;
+				flex-direction: row;
+				justify-content: space-around;
+				font-size: var(--font18Szie);
+
+				.link {
+					font-weight: bold;
+				}
+			}
+		}
+
+		.two {
+			background-color: var(--f1Color);
+
+			.two_1 {
+				display: flex;
+				justify-content: space-between;
+				padding: 4vw;
+				background-color: var(--mainColor);
+				margin: 0 0 0.1vw 0;
+
+				.title {
+					font-size: var(--font18Szie);
+				}
+
+				.title:last-child {
+					color: var(--f85Color);
+					font-size: var(--font16Szie);
+				}
+			}
+
+			.two_2 {
+				display: flex;
+				justify-content: space-between;
+				padding: 5vw;
+				background-color: var(--mainColor);
+				margin: 0 0 0.1vw 0;
+
+				.orderList {
+					text-align: center;
+
+					.icon {
+						.iconfont {
+							font-size: 25px;
+						}
+					}
+
+					.title {
+						display: inline-block;
+						margin: 2vw 0 0 0;
+						font-size: var(--font16Szie);
+					}
+				}
+			}
+		}
+	}
 </style>