zc_saas_h5/pages2/order/index.vue

<template>
	<view>
		<view style="width: 100%;text-align: center;position: fixed;height: 96rpx;z-index: 999;">
			<u-tabs :list="list"   sticky :current="current" @change="change" active-color="#007AFF"></u-tabs>
		</view>
		<view style="position: absolute;top: 96rpx;width: 100%;">
			<view v-show="current==0">
				<view  v-for="(item, index) in list1" style="padding: 20rpx;">
					<view class="item">
						<view style="display: flex;justify-content: space-between;align-items: center;height: 50rpx;" @click="openPopup(index)">
							<view style="color: #666666;font-size: 24rpx;">订单编号：2018031903</view>
							<view style="color: #999999;font-size: 24rpx;">2021-10-20</view>
						</view>
						<u-line color="#D6D6DB" />
						<view style="display: flex;justify-content: space-between;padding: 25rpx 0;">
							<image src="/static/login_bg.jpg" style="height: 134rpx;width: 388rpx;border-radius: 16rpx;"></image>
							<view style="margin-left: 20rpx;">
								<view style="color: #333333;font-size: 30rpx;font-weight: bold;">
									2020年二建建筑工程管理与实
									务（实务专题班）
								</view>
								<view class="priceTag">
									¥ 999.00
								</view>
							</view>
						</view>
						<u-line color="#D6D6DB" />
						<view style="display: flex;flex-direction: row-reverse;align-items: center;height: 50rpx;margin-top: 10rpx;" >
							<view class="btn2">继续支付</view>
							<view class="btn1">取消订单</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

import { mapGetters } from 'vuex';
export default {
	components: {
		
	},
	data() {
		return {
			list: [
				{
					name: '待支付'
				}, 
				{
					name: '已支付'
				}, 
				{
					name: '已取消'
				}
			],
			list1:[1,2,3,4,5,6,7],
			current: 0
		};
	},
	onPullDownRefresh(){
	},
	onLoad(option) {
		
	},
	onShow() {
		/* if(this.current === 2 && this.$method.isLogin()){
			this.$refs.refMy.init();
		} */
	},
	onShareAppMessage(res) {
		var self = this;
		return {
			title: '中正',
			path: `/pages/index/index?inviteCode=` + userInfo == null ? '' : userInfo.userAccount
		};
	},
	methods: {
		change(index){
			this.current = index;
		}
	},
	onReachBottom() {},
	computed: { ...mapGetters(['userInfo']) }
};
</script>
<style >
	page {
			background: #EAEEF1;
		}
</style>
<style scoped>
	.btn2{
		width: 144rpx;
		height: 48rpx;
		background: #FFFFFF;
		border: 2rpx solid #007AFF;
		border-radius: 16rpx;
		text-align: center;
		line-height: 48rpx;
		color: #007AFF;
		margin: 0 8rpx;
	}
	.btn1{
		width: 144rpx;
		height: 48rpx;
		background: #FFFFFF;
		border: 2rpx solid #999999;
		border-radius: 16rpx;
		text-align: center;
		line-height: 48rpx;
		color: #999999;
		margin: 0 8rpx;
	}
.item{
		width: 100%;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		padding: 15rpx;
	}
	.priceTag{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF2D55;
		display: flex;
		flex-direction: row-reverse;
	}
	
	.bottomBox{
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		height:98rpx ;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
	}
</style>