ZhHealth/pages/order/index.vue

<template>
	<view class="content">
		<!-- tabs -->
		<u-sticky>
			<u-tabs
				class="tabs"
				:list="tabs"
				lineColor="#34CE98" 
				@click="onTabs"
				sticky
			></u-tabs>
		</u-sticky>
		<!-- 订单列表 -->
		<oct-order
			v-for="(item, arrayIndex) in array"
			:key="arrayIndex"
			:order-info="item"
			@onBtn="onType"
		></oct-order>
		<!-- 加载更多 -->
		<view class="pages-load">
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: "loading",
				tabs: [
					{name: "全部"},
					{name: "待付款"},
					{name: "待发货"},
					{name: "待签收"},
					{name: "已完成"}
				],
				array: [
					{
						no			: "2261957223036048580",
						cover		: "https://yanxuan-item.nosdn.127.net/ef838761c8528888213766d3dcc50907.jpg",
						name		: "秋冬潮湿多雨，便携迷你除湿器",
						price		: "59.90",
						sum			: 1,
						stateText	: "已完成",
						store		: {
							name: "网易严选",
							logo: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg"
						}
					},{
						no			: "2261957223036048580",
						cover		: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg",
						name		: "稻纯贵州茅台镇新一代酱香型白酒 53度",
						price		: "158.00",
						sum			: 2,
						stateText	: "待支付",
						store		: {
							name: "网易严选",
							logo: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg"
						}
					},
					{
						no			: "2261957223036048580",
						cover		: "https://yanxuan-item.nosdn.127.net/ef838761c8528888213766d3dcc50907.jpg",
						name		: "秋冬潮湿多雨，便携迷你除湿器",
						price		: "59.90",
						sum			: 1,
						stateText	: "已完成",
						store		: {
							name: "网易严选",
							logo: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg"
						}
					},{
						no			: "2261957223036048580",
						cover		: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg",
						name		: "稻纯贵州茅台镇新一代酱香型白酒 53度",
						price		: "158.00",
						sum			: 2,
						stateText	: "待支付",
						store		: {
							name: "网易严选",
							logo: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg"
						}
					},
					{
						no			: "2261957223036048580",
						cover		: "https://yanxuan-item.nosdn.127.net/ef838761c8528888213766d3dcc50907.jpg",
						name		: "秋冬潮湿多雨，便携迷你除湿器",
						price		: "59.90",
						sum			: 1,
						stateText	: "已完成",
						store		: {
							name: "网易严选",
							logo: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg"
						}
					},{
						no			: "2261957223036048580",
						cover		: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg",
						name		: "稻纯贵州茅台镇新一代酱香型白酒 53度",
						price		: "158.00",
						sum			: 2,
						stateText	: "待支付",
						store		: {
							name: "网易严选",
							logo: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg"
						}
					},
					{
						no			: "2261957223036048580",
						cover		: "https://yanxuan-item.nosdn.127.net/ef838761c8528888213766d3dcc50907.jpg",
						name		: "秋冬潮湿多雨，便携迷你除湿器",
						price		: "59.90",
						sum			: 1,
						stateText	: "已完成",
						store		: {
							name: "网易严选",
							logo: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg"
						}
					},{
						no			: "2261957223036048580",
						cover		: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg",
						name		: "稻纯贵州茅台镇新一代酱香型白酒 53度",
						price		: "158.00",
						sum			: 2,
						stateText	: "待支付",
						store		: {
							name: "网易严选",
							logo: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg"
						}
					},
					{
						no			: "2261957223036048580",
						cover		: "https://yanxuan-item.nosdn.127.net/ef838761c8528888213766d3dcc50907.jpg",
						name		: "秋冬潮湿多雨，便携迷你除湿器",
						price		: "59.90",
						sum			: 1,
						stateText	: "已完成",
						store		: {
							name: "网易严选",
							logo: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg"
						}
					},{
						no			: "2261957223036048580",
						cover		: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg",
						name		: "稻纯贵州茅台镇新一代酱香型白酒 53度",
						price		: "158.00",
						sum			: 2,
						stateText	: "待支付",
						store		: {
							name: "网易严选",
							logo: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg"
						}
					},
					{
						no			: "2261957223036048580",
						cover		: "https://yanxuan-item.nosdn.127.net/ef838761c8528888213766d3dcc50907.jpg",
						name		: "秋冬潮湿多雨，便携迷你除湿器",
						price		: "59.90",
						sum			: 1,
						stateText	: "已完成",
						store		: {
							name: "网易严选",
							logo: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg"
						}
					},{
						no			: "2261957223036048580",
						cover		: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg",
						name		: "稻纯贵州茅台镇新一代酱香型白酒 53度",
						price		: "158.00",
						sum			: 2,
						stateText	: "待支付",
						store		: {
							name: "网易严选",
							logo: "https://yanxuan-item.nosdn.127.net/4ad8a83fa25e2aab8c05ade4c05e135f.jpg"
						}
					}
				],
			};
		},
		methods:{
			onTabs(e){
				console.log(e.index)
			},
			onType(e){
				console.log(e)
			}
		}
	}
</script>

<style lang="scss">
	.content{
		background: $window-color;
		min-height: 100vh;
	}
	.tabs{
		background: white;
	}
	// 加载分页
	.pages-load{
		padding-bottom: $padding;
	}
</style>