1

common/css/font-icon.css

@@ -2,9 +2,9 @@
   font-family: "iconfont"; /* Project id 3674157 */
   /* Color fonts */
   src: 
-       url('//at.alicdn.com/t/c/font_3674157_p1a9z86g3re.woff2?t=1664356716241') format('woff2'),
-       url('//at.alicdn.com/t/c/font_3674157_p1a9z86g3re.woff?t=1664356716241') format('woff'),
-       url('//at.alicdn.com/t/c/font_3674157_p1a9z86g3re.ttf?t=1664356716241') format('truetype');
+       url('https://at.alicdn.com/t/c/font_3674157_y9qx1ppmpj.woff2?t=1664365620466') format('woff2'),
+       url('https://at.alicdn.com/t/c/font_3674157_y9qx1ppmpj.woff?t=1664365620466') format('woff'),
+       url('https://at.alicdn.com/t/c/font_3674157_y9qx1ppmpj.ttf?t=1664365620466') format('truetype');
 }
 
 .iconfont {
@@ -15,6 +15,30 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-fenlei-copy:before {
+  content: "\e8bb";
+}
+
+.icon-shangpinfenlei-copy:before {
+  content: "\e8bc";
+}
+
+.icon-qiyejianjie-copy:before {
+  content: "\e8bd";
+}
+
+.icon-fenlei:before {
+  content: "\e605";
+}
+
+.icon-shangpinfenlei:before {
+  content: "\e62f";
+}
+
+.icon-qiyejianjie:before {
+  content: "\e61d";
+}
+
 .icon-gengduo:before {
   content: "\e660";
 }
@@ -35,6 +59,10 @@
   content: "\e8ba";
 }
 
+.icon-shangdian-copy:before {
+  content: "\e8be";
+}
+
 .icon-shangdian:before {
   content: "\e67a";
 }
@@ -98,4 +126,3 @@
 .icon-daipinglun:before {
   content: "\e602";
 }
-

components/tabs/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="main">
+	<view class="tabs">
 		<view class="one" :style="{background:tabs.bgColor||'#f9f9f9'}">
 			<scroll-view class="scrollView" scroll-x="true">
 				<view class="list" v-for="(item,index) in tabs.menu" :key="index" :style="{background:tabs.active==item.active?tabs.acbgColor||'#ffffff':''}" @tap="tabsChange(index,item)">
@@ -32,7 +32,7 @@
 </script>
 
 <style lang="scss">
-	.main {
+	.tabs {
 		.one {
 			padding: 2vw;
 

pages.json

@@ -71,6 +71,12 @@
 						"navigationBarTitleText": "订单列表"
 					}
 				},
+				{
+					"path": "order/after",
+					"style": {
+						"navigationBarTitleText": "售后列表"
+					}
+				},
 				{
 					"path": "discount/index",
 					"style": {
@@ -151,6 +157,36 @@
 						"navigationBarTitleText": "商品分类"
 					}
 				},
+				{
+					"path": "farming/index",
+					"style": {
+						"navigationBarTitleText": "首农食品旗舰店"
+					}
+				},
+				{
+					"path": "place/index",
+					"style": {
+						"navigationBarTitleText": "地方特产"
+					}
+				},
+				{
+					"path": "import/index",
+					"style": {
+						"navigationBarTitleText": "进口食品"
+					}
+				},
+				{
+					"path": "poverty/index",
+					"style": {
+						"navigationBarTitleText": "扶贫专区"
+					}
+				},
+				{
+					"path": "activity/index",
+					"style": {
+						"navigationBarTitleText": "活动专区"
+					}
+				},
 				{
 					"path": "order/detail",
 					"style": {

pages/index/index.vue

@@ -70,9 +70,9 @@
 				});
 			},
 			watchLogin() {
-				// uni.redirectTo({
-				// 	url: `/pages/home/index`
-				// })
+				uni.redirectTo({
+					url: `/pages/home/index`
+				})
 			},
 			tabsChange(e) {
 				const that = this;

pages/my/index.vue

@@ -29,12 +29,12 @@
 				<view class="two_1">
 					<view class="title">我的订单</view>
 					<view class="title">
-						<text @click="toCommon('pagesMy/order/index')">全部订单</text>
+						<text @click="toOrder({route:'pagesMy/order/index',type:'order',status:'0'})">全部订单</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="orderList" v-for="(item, index) in orderList" :key="index" @click="toOrder(item)">
 						<view class="icon">
 							<text class="iconfont" :class="[item.icon]"></text>
 						</view>
@@ -66,30 +66,40 @@
 				// 客服信息
 				serviceContaceInfo: {},
 				// 图标菜单
-				orderList: [{
+				orderList: [ //订单列表
+					{
 						icon: 'icon-daifukuan',
 						title: '待付款',
-						type: 'a'
+						status: '1',
+						type: 'order',
+						route: "pagesMy/order/index",
 					},
 					{
 						icon: 'icon-daifahuo',
 						title: '待发货',
-						type: 'b'
+						status: '2',
+						type: 'order',
+						route: "pagesMy/order/index",
 					},
 					{
 						icon: 'icon-daishouhuo',
 						title: '待收货/消费',
-						type: 'c'
+						status: '3',
+						type: 'order',
+						route: "pagesMy/order/index",
 					},
 					{
 						icon: 'icon-daipinglun',
 						title: '待评论',
-						type: 'd'
+						status: '4',
+						type: 'order',
+						route: "pagesMy/order/index",
 					},
 					{
 						icon: 'icon-shouhoufuwuicon',
 						title: '售后',
-						type: 'e'
+						type: 'after',
+						route: "pagesMy/order/after",
 					},
 				],
 				// 菜单
@@ -133,6 +143,7 @@
 
 		},
 		methods: {
+			// 监听用户登录
 			watchLogin() {
 				const that = this;
 				uni.getStorage({
@@ -154,6 +165,7 @@
 					that.$set(that, `serviceContaceInfo`, res.data[0])
 				}
 			},
+			// 底部菜单跳转
 			toPath(e) {
 				if (e && e.route) uni.redirectTo({
 					url: `/${e.route}`
@@ -176,12 +188,17 @@
 				});
 
 			},
-			// 跳转页面
-			toOrrder(e) {
-				const that = this;
-				uni.navigateTo({
-					url: `/${e}`
-				})
+			// 订单跳转页面
+			toOrder(e) {
+				if (e.type == 'order') {
+					uni.navigateTo({
+						url: `/${e.route}?status=${e.status}`
+					})
+				} else if (e.type == 'after') {
+					uni.navigateTo({
+						url: `/${e.route}`
+					})
+				}
 			},
 		}
 	}

pagesHome/activity/index.vue

@@ -0,0 +1,157 @@
+<template>
+	<mobile-frame>
+		<view class="main">
+			<view class="one">
+				<image class="image" :src="oneUrl" mode=""></image>
+			</view>
+			<view class="two">
+				<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
+					<view class="list-scroll-view">
+						<view class="list" v-for="(item,index) in list" :key="index">
+							<image class="image" :src="item.url" mode=""></image>
+							<view class="name">
+								{{item.name}}
+							</view>
+							<view class="other">
+								<view class="money">
+									<text>¥</text>
+									<text>{{item.money}}</text>
+								</view>
+								<view class="btn">
+									<button type="default" size="mini">购买</button>
+								</view>
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</view>
+	</mobile-frame>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				oneUrl: require('@/static/test.png'),
+				list: [ //
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: 100,
+					},
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: 100,
+					},
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: 100,
+					},
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: 100,
+					},
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: 100,
+					},
+				]
+			};
+		},
+		onShow: function() {},
+		methods: {
+			// 分页
+			toPage() {}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.main {
+		display: flex;
+		flex-direction: column;
+		width: 96vw;
+		height: 97.5vh;
+		padding: 2vw;
+		background-color: #FB1438;
+
+		.one {
+			margin: 0 0 2vw 0;
+
+			.image {
+				width: 100%;
+				height: 50vw;
+			}
+		}
+
+		.two {
+			position: relative;
+			flex-grow: 1;
+
+			.list {
+				margin: 0 2vw 2vw 0;
+				background-color: var(--fffColor);
+				padding: 2vw;
+				width: 43vw;
+				border-radius: 5px;
+
+				.image {
+					width: 100%;
+					height: 49vw;
+					margin: 0 0 1vw 0;
+				}
+
+				.name {
+					font-size: var(--font15Size);
+					margin: 0 0 2vw 0;
+				}
+
+				.other {
+					display: flex;
+					flex-direction: row;
+					justify-content: space-between;
+
+					.money {
+						color: var(--ff0Color);
+
+						text:nth-child(1) {
+							font-size: var(--font12Size);
+						}
+					}
+
+					.btn {
+						button {
+							border-radius: 25px;
+							color: var(--fffColor);
+							background-color: var(--ff0Color);
+							font-size: var(--font12Size);
+						}
+					}
+				}
+			}
+
+			.list:nth-child(2n) {
+				margin: 0 0 2vw 0;
+			}
+		}
+	}
+
+	.scroll-view {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+
+		.list-scroll-view {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+		}
+	}
+</style>

pagesHome/farming/index.vue

@@ -0,0 +1,103 @@
+<template>
+	<mobile-frame>
+		<view class="main">
+			<view class="one">
+				<view class="one_1" v-if="barActive=='0'">
+					微店首页
+				</view>
+				<view class="one_2" v-else-if="barActive=='1'">
+					商品分类
+				</view>
+				<view class="one_3" v-else-if="barActive=='2'">
+					全部商品
+				</view>
+				<view class="one_4" v-else-if="barActive=='3'">
+					店铺简介
+				</view>
+			</view>
+			<view class="two">
+				<view class="list" v-for="(item,index) in barList" :key="index" @tap="barChange(index,item)">
+					<view class="icon">
+						<text :class="['iconfont',barActive==index?item.acticon:item.icon]"></text>
+					</view>
+					<view :class="['name',barActive==index?'activename':'']">
+						{{item.name}}
+					</view>
+				</view>
+			</view>
+		</view>
+	</mobile-frame>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				barActive: '0',
+				barList: [ //底部菜单
+					{
+						icon: 'icon-shangdian',
+						acticon: "icon-shangdian-copy",
+						name: '微店首页'
+					}, {
+						icon: 'icon-fenlei',
+						acticon: "icon-fenlei-copy",
+						name: '商品分类'
+					}, {
+						icon: 'icon-shangpinfenlei',
+						acticon: "icon-shangpinfenlei-copy",
+						name: '全部商品'
+					}, {
+						icon: 'icon-qiyejianjie',
+						acticon: "icon-qiyejianjie-copy",
+						name: '店铺简介'
+					}
+				]
+			};
+		},
+		onShow: function() {},
+		methods: {
+			// 选择底部菜单
+			barChange(index, item) {
+				const that = this;
+				that.$set(that, `barActive`, index);
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.main {
+		display: flex;
+		flex-direction: column;
+		width: 100vw;
+		height: 100vh;
+
+		.one {
+			position: relative;
+			flex-grow: 1;
+		}
+
+		.two {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-around;
+			border-top: 1px solid #f1f1f1;
+
+			.list {
+				padding: 1vw 0;
+				text-align: center;
+
+				.icon {}
+
+				.name {
+					font-size: 12px;
+				}
+
+				.activename {
+					color: var(--fFB1Color);
+				}
+			}
+		}
+	}
+</style>

pagesHome/import/index.vue

@@ -0,0 +1,157 @@
+<template>
+	<mobile-frame>
+		<view class="main">
+			<view class="one">
+				<image class="image" :src="oneUrl" mode=""></image>
+			</view>
+			<view class="two">
+				<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
+					<view class="list-scroll-view">
+						<view class="list" v-for="(item,index) in list" :key="index">
+							<image class="image" :src="item.url" mode=""></image>
+							<view class="name">
+								{{item.name}}
+							</view>
+							<view class="other">
+								<view class="money">
+									<text>¥</text>
+									<text>{{item.money}}</text>
+								</view>
+								<view class="btn">
+									<button type="default" size="mini">购买</button>
+								</view>
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</view>
+	</mobile-frame>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				oneUrl: require('@/static/test.png'),
+				list: [ //
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: 100,
+					},
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: 100,
+					},
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: 100,
+					},
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: 100,
+					},
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: 100,
+					},
+				]
+			};
+		},
+		onShow: function() {},
+		methods: {
+			// 分页
+			toPage() {}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.main {
+		display: flex;
+		flex-direction: column;
+		width: 96vw;
+		height: 97.5vh;
+		padding: 2vw;
+		background-color: #0D2576;
+
+		.one {
+			margin: 0 0 2vw 0;
+
+			.image {
+				width: 100%;
+				height: 50vw;
+			}
+		}
+
+		.two {
+			position: relative;
+			flex-grow: 1;
+
+			.list {
+				margin: 0 2vw 2vw 0;
+				background-color: var(--fffColor);
+				padding: 2vw;
+				width: 43vw;
+				border-radius: 5px;
+
+				.image {
+					width: 100%;
+					height: 49vw;
+					margin: 0 0 1vw 0;
+				}
+
+				.name {
+					font-size: var(--font15Size);
+					margin: 0 0 2vw 0;
+				}
+
+				.other {
+					display: flex;
+					flex-direction: row;
+					justify-content: space-between;
+
+					.money {
+						color: var(--ff0Color);
+
+						text:nth-child(1) {
+							font-size: var(--font12Size);
+						}
+					}
+
+					.btn {
+						button {
+							border-radius: 25px;
+							color: var(--fffColor);
+							background-color: var(--ff0Color);
+							font-size: var(--font12Size);
+						}
+					}
+				}
+			}
+
+			.list:nth-child(2n) {
+				margin: 0 0 2vw 0;
+			}
+		}
+	}
+
+	.scroll-view {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+
+		.list-scroll-view {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+		}
+	}
+</style>

pagesHome/place/index.vue

@@ -0,0 +1,301 @@
+<template>
+	<mobile-frame>
+		<view class="main">
+			<view class="one">
+				<image class="image" :src="oneUrl" mode=""></image>
+			</view>
+			<view class="two">
+				<scroll-view scroll-y="true" class="scroll-view">
+					<view class="list-scroll-view">
+						<view class="list" v-for="(item,index) in list" :key="index" :style="{background:item.bgColor}">
+							<view class="name">
+								<text>{{item.name}}</text>
+							</view>
+							<image class="image" :src="item.url" mode=""></image>
+							<view class="no_use" v-if="item.is_use==false">
+								&nbsp;
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</view>
+	</mobile-frame>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				oneUrl: require('@/static/test.png'),
+				list: [ //
+					{
+						name: '北京特产',
+						url: require('@/static/test.png'),
+						bgColor: '#FF6573',
+						is_use: true
+					},
+					{
+						name: '河北特产',
+						url: require('@/static/test.png'),
+						bgColor: '#448E51',
+						is_use: false
+					},
+					{
+						name: '天津特产',
+						url: require('@/static/test.png'),
+						bgColor: '#8A59B4',
+						is_use: false
+					},
+					{
+						name: '辽宁特产',
+						url: require('@/static/test.png'),
+						bgColor: '#2A669A',
+						is_use: false
+					},
+					{
+						name: '山西特产',
+						url: require('@/static/test.png'),
+						bgColor: '#794537',
+						is_use: false
+					},
+					{
+						name: '内蒙特产',
+						url: require('@/static/test.png'),
+						bgColor: '#397126',
+						is_use: false
+					},
+					{
+						name: '吉林特产',
+						url: require('@/static/test.png'),
+						bgColor: '#965400',
+						is_use: false
+					},
+					{
+						name: '黑龙江特产',
+						url: require('@/static/test.png'),
+						bgColor: '#005854',
+						is_use: false
+					},
+					{
+						name: '湖北特产',
+						url: require('@/static/test.png'),
+						bgColor: '#55C5C5',
+						is_use: false
+					},
+					{
+						name: '湖南特产',
+						url: require('@/static/test.png'),
+						bgColor: '#659100',
+						is_use: false
+					},
+					{
+						name: '江西特产',
+						url: require('@/static/test.png'),
+						bgColor: '#CF4779',
+						is_use: false
+					},
+					{
+						name: '河南特产',
+						url: require('@/static/test.png'),
+						bgColor: '#1F83B7',
+						is_use: false
+					},
+					{
+						name: '安徽特产',
+						url: require('@/static/test.png'),
+						bgColor: '#302760',
+						is_use: false
+					},
+					{
+						name: '上海特产',
+						url: require('@/static/test.png'),
+						bgColor: '#8E8A64',
+						is_use: false
+					},
+					{
+						name: '江苏特产',
+						url: require('@/static/test.png'),
+						bgColor: '#CF6B54',
+						is_use: false
+					},
+					{
+						name: '浙江特产',
+						url: require('@/static/test.png'),
+						bgColor: '#0B4864',
+						is_use: false
+					},
+					{
+						name: '山东特产',
+						url: require('@/static/test.png'),
+						bgColor: '#892557',
+						is_use: false
+					},
+					{
+						name: '福建特产',
+						url: require('@/static/test.png'),
+						bgColor: '#13607A',
+						is_use: false
+					},
+					{
+						name: '广东特产',
+						url: require('@/static/test.png'),
+						bgColor: '#FF6A52',
+						is_use: false
+					},
+					{
+						name: '海南特产',
+						url: require('@/static/test.png'),
+						bgColor: '#1D2F79',
+						is_use: false
+					},
+					{
+						name: '广西特产',
+						url: require('@/static/test.png'),
+						bgColor: '#DD863F',
+						is_use: false
+					},
+					{
+						name: '甘肃特产',
+						url: require('@/static/test.png'),
+						bgColor: '#118582',
+						is_use: false
+					},
+					{
+						name: '青海特产',
+						url: require('@/static/test.png'),
+						bgColor: '#9744B6',
+						is_use: false
+					},
+					{
+						name: '宁夏特产',
+						url: require('@/static/test.png'),
+						bgColor: '#048B50',
+						is_use: false
+					},
+					{
+						name: '新疆特产',
+						url: require('@/static/test.png'),
+						bgColor: '#5D832C',
+						is_use: false
+					},
+					{
+						name: '重庆特产',
+						url: require('@/static/test.png'),
+						bgColor: '#32A6BF',
+						is_use: false
+					},
+					{
+						name: '陕西特产',
+						url: require('@/static/test.png'),
+						bgColor: '#145342',
+						is_use: false
+					},
+					{
+						name: '四川特产',
+						url: require('@/static/test.png'),
+						bgColor: '#9C3140',
+						is_use: false
+					},
+					{
+						name: '贵州特产',
+						url: require('@/static/test.png'),
+						bgColor: '#7F8D02',
+						is_use: false
+					},
+					{
+						name: '云南特产',
+						url: require('@/static/test.png'),
+						bgColor: '#019585',
+						is_use: false
+					},
+					{
+						name: '西藏特产',
+						url: require('@/static/test.png'),
+						bgColor: '#B4A52E',
+						is_use: false
+					}
+				]
+			};
+		},
+		onShow: function() {},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	.main {
+		display: flex;
+		flex-direction: column;
+		width: 96vw;
+		height: 97vh;
+		padding: 2vw;
+
+		.one {
+			margin: 0 0 2vw 0;
+
+			.image {
+				width: 100%;
+				height: 50vw;
+			}
+		}
+
+		.two {
+			position: relative;
+			flex-grow: 1;
+
+			.list {
+				position: relative;
+				width: 27vw;
+				margin: 0 0 2vw 0;
+				border: 1px solid var(--f1Color);
+				text-align: center;
+				padding: 2vw;
+
+				.name {
+					text {
+						font-size: var(--font16Size);
+						border: 2px solid var(--f1Color);
+						display: inline-block;
+						color: var(--fffColor);
+						padding: 1vw 2vw;
+						margin: 0 0 2vw;
+						border-radius: 5px;
+					}
+				}
+
+				.image {
+					width: 90%;
+					height: 22vw;
+					border-radius: 90px;
+				}
+
+				.no_use {
+					position: absolute;
+					top: 0;
+					z-index: 999;
+					width: 100%;
+					height: 100%;
+					left: 0;
+					background-color: #f1f1f19f;
+				}
+			}
+		}
+	}
+
+	.scroll-view {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+
+		.list-scroll-view {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+		}
+	}
+</style>

pagesHome/poverty/index.vue

@@ -0,0 +1,157 @@
+<template>
+	<mobile-frame>
+		<view class="main">
+			<view class="one">
+				<image class="image" :src="oneUrl" mode=""></image>
+			</view>
+			<view class="two">
+				<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
+					<view class="list-scroll-view">
+						<view class="list" v-for="(item,index) in list" :key="index">
+							<image class="image" :src="item.url" mode=""></image>
+							<view class="name">
+								{{item.name}}
+							</view>
+							<view class="other">
+								<view class="money">
+									<text>¥</text>
+									<text>{{item.money}}</text>
+								</view>
+								<view class="btn">
+									<button type="default" size="mini">购买</button>
+								</view>
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</view>
+	</mobile-frame>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				oneUrl: require('@/static/test.png'),
+				list: [ //
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: 100,
+					},
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: 100,
+					},
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: 100,
+					},
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: 100,
+					},
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: 100,
+					},
+				]
+			};
+		},
+		onShow: function() {},
+		methods: {
+			// 分页
+			toPage() {}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.main {
+		display: flex;
+		flex-direction: column;
+		width: 96vw;
+		height: 97.5vh;
+		padding: 2vw;
+		background-color: #268E56;
+
+		.one {
+			margin: 0 0 2vw 0;
+
+			.image {
+				width: 100%;
+				height: 50vw;
+			}
+		}
+
+		.two {
+			position: relative;
+			flex-grow: 1;
+
+			.list {
+				margin: 0 2vw 2vw 0;
+				background-color: var(--fffColor);
+				padding: 2vw;
+				width: 43vw;
+				border-radius: 5px;
+
+				.image {
+					width: 100%;
+					height: 49vw;
+					margin: 0 0 1vw 0;
+				}
+
+				.name {
+					font-size: var(--font15Size);
+					margin: 0 0 2vw 0;
+				}
+
+				.other {
+					display: flex;
+					flex-direction: row;
+					justify-content: space-between;
+
+					.money {
+						color: var(--ff0Color);
+
+						text:nth-child(1) {
+							font-size: var(--font12Size);
+						}
+					}
+
+					.btn {
+						button {
+							border-radius: 25px;
+							color: var(--fffColor);
+							background-color: var(--ff0Color);
+							font-size: var(--font12Size);
+						}
+					}
+				}
+			}
+
+			.list:nth-child(2n) {
+				margin: 0 0 2vw 0;
+			}
+		}
+	}
+
+	.scroll-view {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+
+		.list-scroll-view {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+		}
+	}
+</style>

pagesMy/order/after.vue

@@ -0,0 +1,23 @@
+<template>
+	<mobile-frame>
+		售后列表
+	</mobile-frame>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			};
+		},
+		onShow: function() {},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>

pagesMy/order/index.vue

@@ -4,23 +4,66 @@
 			<view class="one">
 				<input type="text" v-model="searchInfo.name" @input="toInput" placeholder="搜索商品">
 			</view>
+			<view class="two">
+				<tabs :tabs="tabs" @tabsChange="tabsChange">
+					<view class="tabsList">
+						<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
+							<view class="list-scroll-view">
+								<view class="list" v-for="(item,index) in list" :key="index">
+									<view class="list_1">
+										<view class="l">
+											<text class="iconfont icon-shangdian"></text>
+											<text>{{item.shop}}</text>
+										</view>
+										<view class="r">
+											{{item.status=='1'?'待付款':'已付款'}}
+										</view>
+									</view>
+									<view class="list_2">
+										<view class="l">
+											<image class="image" :src="item.url&&item.url.length>0?item.url[0].url:''" mode=""></image>
+										</view>
+										<view class="c">
+											<view class="name">
+												{{item.name}}
+											</view>
+										</view>
+										<view class="r">
+											<view class="price">
+												¥{{item.price}}
+											</view>
+											<view class="num">
+												×{{item.buy_num}}
+											</view>
+										</view>
+									</view>
+									<view class="other">
+										<text>共{{item.market_num}}件商品</text>
+										<text>总价¥{{item.money}}</text>
+									</view>
+									<view class="btn">
+										<button type="default" size="mini">取消订单</button>
+										<button type="default" size="mini">付款</button>
+									</view>
+								</view>
+							</view>
+						</scroll-view>
+					</view>
+					<!-- 		<view v-show="tabs.active=='0'">全部</view>
+					<view v-show="tabs.active=='1'">待付款</view>
+					<view v-show="tabs.active=='2'">待发货</view>
+					<view v-show="tabs.active=='3'">待收货/消费</view>
+					<view v-show="tabs.active=='4'">待评价</view> -->
+				</tabs>
+			</view>
+			<!-- 	<view class="one">
+				<input type="text" v-model="searchInfo.name" @input="toInput" placeholder="搜索商品">
+			</view>
 			<view class="two">
 				<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
 					<view class="list-scroll-view">
 						<view class="two_1">
-							
-							<!-- <view class="cond_1">
-								全部
-							</view>
-							<view class="cond_1">
-								待付款
-							</view>
-							<view class="cond_1">
-								待发货
-							</view>
-							<view class="cond_1">
-								待发货/消费
-							</view> -->
+						
 						</view>
 						<view class="two_2">
 							<view class="list" v-for="(item,index) in list" :key="index">
@@ -63,46 +106,165 @@
 						</view>
 					</view>
 				</scroll-view>
-			</view>
+			</view> -->
 		</view>
 	</mobile-frame>
 </template>
 
 <script>
+	import tabs from '@/components/tabs/index.vue';
 	export default {
+		components: {
+			tabs
+		},
 		data() {
 			return {
+				user: {},
+				status: '0',
 				searchInfo: {},
-				list: [ //商品列表
+				tabs: {
+					active: '0',
+					menu: [ //菜单列表
+						{
+							title: '全部',
+							active: '0'
+						},
+						{
+							title: '待付款',
+							active: '1'
+						},
+						{
+							title: '待发货',
+							active: '2'
+						},
+						{
+							title: '待收货/消费',
+							active: '3'
+						},
+						{
+							title: '待评价',
+							active: '4'
+						}
+					]
+				},
+				list: [ //订单列表
 					{
-						url: require('@/static/test.png'),
 						shop: '官方自营店',
-						name: '商品名称',
-						money: '10.00',
-						status: '0',
-						num: 2,
-					},
-					{
-						url: require('@/static/test.png'),
-						name: '商品名称',
+						status: '1',
+						url: [{
+							name: "20220928155634.jpg",
+							uri: "/files/point/20220928155634.jpg",
+							url: "https://broadcast.waityou24.cn/files/point/20220928155634.jpg"
+						}],
+						name: '饮用水',
+						price: 58,
+						buy_num: 1,
+						market_num: 1,
+						money: 58
+					}, {
 						shop: '官方自营店',
-						money: '10.00',
-						status: '0',
-						num: 2,
-					},
-					{
-						url: require('@/static/test.png'),
-						name: '商品名称',
+						status: '1',
+						url: [{
+							name: "20220928155634.jpg",
+							uri: "/files/point/20220928155634.jpg",
+							url: "https://broadcast.waityou24.cn/files/point/20220928155634.jpg"
+						}],
+						name: '饮用水',
+						price: 58,
+						buy_num: 1,
+						market_num: 1,
+						money: 58
+					}, {
 						shop: '官方自营店',
-						money: '10.00',
-						status: '0',
-						num: 2,
-					},
+						status: '1',
+						url: [{
+							name: "20220928155634.jpg",
+							uri: "/files/point/20220928155634.jpg",
+							url: "https://broadcast.waityou24.cn/files/point/20220928155634.jpg"
+						}],
+						name: '饮用水',
+						price: 58,
+						buy_num: 1,
+						market_num: 1,
+						money: 58
+					}, {
+						shop: '官方自营店',
+						status: '1',
+						url: [{
+							name: "20220928155634.jpg",
+							uri: "/files/point/20220928155634.jpg",
+							url: "https://broadcast.waityou24.cn/files/point/20220928155634.jpg"
+						}],
+						name: '饮用水饮用水饮用水饮用水饮用水饮用水饮用水饮用水饮用水饮用水饮用水',
+						price: 58,
+						buy_num: 1,
+						market_num: 1,
+						money: 58
+					}, {
+						shop: '官方自营店',
+						status: '1',
+						url: [{
+							name: "20220928155634.jpg",
+							uri: "/files/point/20220928155634.jpg",
+							url: "https://broadcast.waityou24.cn/files/point/20220928155634.jpg"
+						}],
+						name: '饮用水',
+						price: 58,
+						buy_num: 1,
+						market_num: 1,
+						money: 58
+					}, {
+						shop: '官方自营店',
+						status: '1',
+						url: [{
+							name: "20220928155634.jpg",
+							uri: "/files/point/20220928155634.jpg",
+							url: "https://broadcast.waityou24.cn/files/point/20220928155634.jpg"
+						}],
+						name: '饮用水',
+						price: 58,
+						buy_num: 1,
+						market_num: 1,
+						money: 58
+					}
 				]
+
 			};
 		},
+		onLoad: function(e) {
+			const that = this;
+
+			that.$set(that, `status`, e.status);
+			// 监听用户是否登录
+			that.watchLogin();
+		},
 		onShow: function() {},
 		methods: {
+			// 监听用户是否登录
+			watchLogin() {
+				const that = this;
+				uni.getStorage({
+					key: 'token',
+					success: function(res) {
+						let user = that.$jwt(res.data);
+						if (user) that.$set(that, `user`, user);
+						that.$set(that.tabs, `active`, that.status);
+						that.search();
+					},
+					fail: function(err) {
+						uni.navigateTo({
+							url: `/pages/login/index`
+						})
+					}
+				});
+			},
+			// 查询列表
+			async search() {
+				const that = this;
+				let user = that.user;
+				let status = that.status;
+				console.log(status);
+			},
 			// 分页
 			toPage(e) {
 
@@ -119,6 +281,13 @@
 			// 付款
 			toPay(e) {
 				console.log(e);
+			},
+			// 选择选项卡
+			tabsChange(e) {
+				const that = this;
+				that.$set(that.tabs, `active`, e.active)
+				that.$set(that, `status`, e.active);
+				that.search()
 			}
 		}
 	}
@@ -147,99 +316,67 @@
 			flex-grow: 1;
 			background-color: var(--f9Color);
 
-			.two_1 {
-				background-color: var(--fffColor);
-				padding: 2vw;
-				display: flex;
-				flex-direction: row;
-			}
-
-			.two_2 {
-				display: flex;
-				flex-direction: column;
+			.tabsList {
+				position: relative;
+				width: 100vw;
+				height: 82vh;
 
 				.list {
-					width: 100vw;
-					margin: 2vw 0 0 0;
-					background-color: var(--mainColor);
+					background-color: #fff;
+					margin: 0 2vw 2vw 2vw;
+					padding: 2vw;
 
 					.list_1 {
+						margin: 0 0 1vw 0;
 						display: flex;
 						flex-direction: row;
 						justify-content: space-between;
-						padding: 2vw;
-
-						.name {
-							font-size: var(--font14Size);
-
-							text {
-								margin: 0 1vw 0 0;
-							}
-						}
-
-						.status {
-							font-size: var(--font14Size);
-							color: var(--ff0Color);
-						}
 					}
 
 					.list_2 {
+						margin: 0 0 1vw 0;
 						display: flex;
-						flex-direction: row;
-						justify-content: space-between;
-						padding: 2vw;
-						background-color: var(--f8Color);
 
-						.image {
+						.l {
 							width: 20vw;
-							height: 20vw;
-							margin: 0 2vw 0 0;
-						}
-
-						.other {
-							display: flex;
-							flex-direction: column;
-							flex-grow: 1;
 
-							.name {
-								font-size: var(--font14Size);
-								font-weight: bold;
-								margin: 0 0 2vw 0;
-							}
+							.image {
+								width: 100%;
+								height: 20vw;
+								border-radius: 5px;
 
-							.other_1 {
-								font-size: var(--font12Size);
-								color: var(--f85Color);
 							}
 						}
 
-						.money {
-							font-size: var(--font12Size);
+						.c {
+							width: 60vw;
+							padding: 0 2vw;
+						}
 
-							.num {
-								text-align: right;
-							}
+						.r {
+							width: 15vw;
+							text-align: right;
 						}
 					}
 
-					.list_3 {
-						display: flex;
-						justify-content: flex-end;
-						padding: 2vw;
-						border-bottom: 0.5vw solid var(--f9Color);
-						font-size: var(--font12Size);
+					.other {
+						margin: 0 0 2vw 0;
+						text-align: right;
 
 						text {
-							margin: 0 1vw;
+							font-size: 14px;
+
+							padding: 0 0 0 2vw;
 						}
 					}
 
-					.list_4 {
-						padding: 2vw;
+					.btn {
 						text-align: right;
+						margin: 2vw 0 0 0;
+						border-top: 1px solid #f1fff1;
 
 						button {
-							margin: 0 1vw 0 2vw;
+							margin: 2vw 0 0 2vw;
 						}
 					}
 				}
@@ -247,6 +384,111 @@
 		}
 	}
 
+	// 	.two {
+	// 		position: relative;
+	// 		flex-grow: 1;
+	// 		background-color: var(--f9Color);
+
+	// 		.two_1 {
+	// 			background-color: var(--fffColor);
+	// 			padding: 2vw;
+	// 			display: flex;
+	// 			flex-direction: row;
+	// 		}
+
+	// 		.two_2 {
+	// 			display: flex;
+	// 			flex-direction: column;
+
+	// 			.list {
+	// 				width: 100vw;
+	// 				margin: 2vw 0 0 0;
+	// 				background-color: var(--mainColor);
+
+	// 				.list_1 {
+	// 					display: flex;
+	// 					flex-direction: row;
+	// 					justify-content: space-between;
+	// 					padding: 2vw;
+
+	// 					.name {
+	// 						font-size: var(--font14Size);
+
+	// 						text {
+	// 							margin: 0 1vw 0 0;
+	// 						}
+	// 					}
+
+	// 					.status {
+	// 						font-size: var(--font14Size);
+	// 						color: var(--ff0Color);
+	// 					}
+	// 				}
+
+	// 				.list_2 {
+	// 					display: flex;
+	// 					flex-direction: row;
+	// 					justify-content: space-between;
+	// 					padding: 2vw;
+	// 					background-color: var(--f8Color);
+
+	// 					.image {
+	// 						width: 20vw;
+	// 						height: 20vw;
+	// 						margin: 0 2vw 0 0;
+	// 					}
+
+	// 					.other {
+	// 						display: flex;
+	// 						flex-direction: column;
+	// 						flex-grow: 1;
+
+	// 						.name {
+	// 							font-size: var(--font14Size);
+	// 							font-weight: bold;
+	// 							margin: 0 0 2vw 0;
+	// 						}
+
+	// 						.other_1 {
+	// 							font-size: var(--font12Size);
+	// 							color: var(--f85Color);
+	// 						}
+	// 					}
+
+	// 					.money {
+	// 						font-size: var(--font12Size);
+
+	// 						.num {
+	// 							text-align: right;
+	// 						}
+	// 					}
+	// 				}
+
+	// 				.list_3 {
+	// 					display: flex;
+	// 					justify-content: flex-end;
+	// 					padding: 2vw;
+	// 					border-bottom: 0.5vw solid var(--f9Color);
+	// 					font-size: var(--font12Size);
+
+	// 					text {
+	// 						margin: 0 1vw;
+	// 					}
+	// 				}
+
+	// 				.list_4 {
+	// 					padding: 2vw;
+	// 					text-align: right;
+
+	// 					button {
+	// 						margin: 0 1vw 0 2vw;
+	// 					}
+	// 				}
+	// 			}
+	// 		}
+	// 	}
+	// }
+
 	.scroll-view {
 		position: absolute;
 		top: 0;