<template>
	<view v-if="istrue" class="" style="overflow: hidden; padding: 0 25rpx">
		<view v-if="list.length != 0" class="" style="">
			<view class="bgwhite listi plr30 pos pb40" v-for="(item, index) in list" :key="index">
				<view class="flex_between flex_items" style="padding: 33rpx 0; border-bottom: 1px dashed #ebebeb; width: 100%">
					<text class="f24" style="color: #666">订单号：{{ item.order_number }}</text>
					<text v-show="item.order_status == 0" class="f26" style="color: #fd5b23">待签约</text>
					<text v-show="item.order_status == 1 && item.pay_status != 3" class="f26" style="color: #fd5b23">已签约</text>
					<text v-show="item.order_status == 1 && item.pay_status == 3" class="f26" style="color: #fd5b23">已签约未扣款</text>
					<text v-show="item.order_status == 2" class="f26" style="color: #fd5b23">待充值</text>
					<text v-show="item.order_status == 3" class="f26" style="color: #fd5b23">充值中</text>
					<text v-show="item.order_status == 4" class="f26" style="color: #fd5b23">已完成</text>
					<text v-show="item.order_status == 5" class="f26" style="color: #fd5b23">充值失败</text>
					<text v-show="item.order_status == 6" class="f26" style="color: #fd5b23">已取消</text>
					<view class="abs" style="width: 6rpx; height: 26rpx; background: #fd5b23; left: 0"></view>
				</view>
				<view class="flex_between flex_items" style="margin-top: 31rpx; width: 100%">
					<view class="flex_start">
						<image :src="img" style="width: 97rpx; height: 96rpx; margin-top: 22rpx" mode=""></image>
						<view class="flex_column" style="margin-left: 40rpx">
							<view class="flex_start flex_items">
								<text class="f24">优酷VIP会员连续包月</text>
							</view>
							<view class="mt30 f24" style="color: #666">充值账号：{{ item.account }}</view>
							<view class="mt30 f24" style="color: #666">
								{{ item.create_time }}
							</view>
						</view>
					</view>
					<view class="flex_start f24" style="color: #fd5b23">
						<text class="bold" style="margin-top: 12rpx">¥</text>
						<text class="f36 bold ml5">{{ item.price }}</text>
						<text class="bold f36">+</text>
						<text class="f36 bold">{{ item.bonus }}</text>
						<text class="bold ml5" style="margin-top: 12rpx">积分</text>
					</view>
				</view>
			</view>
			<view style="width: 100%; height: 30rpx"></view>
		</view>
		<view v-else class="ptb50 plr30 f26 f-center mt60" style="color: #9a9a9a">--暂无数据--</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			istrue: true,
			list: [],
			form: {
				page: 1,
				pageSize: 9999,
				open_id: uni.getStorageSync("opid")
			},
			img: require("@/static/yellow/test.png")
		};
	},
	onLoad() {
		this.getlist();
	},
	methods: {
		onPullDownRefresh() {
			setTimeout(() =>{
				this.list = [];
				this.getlist();
				uni.stopPullDownRefresh();
			}, 1000);
		},
		getlist() {
			this.api.orderlist(this.form).then((res) => {
				console.log(res);
				if (res.data.code === 200) {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if (res.data.data.data.length == 0) {
						uni.showToast({
							title: "暂无数据",
							icon: "none"
						});
					} else {
						res.data.data.data.forEach((item, index) => {
							this.list.push(item);
						});
					}
					this.istrue = true;
				} else {
					this.istrue = true;
					uni.showToast({
						icon: "none",
						title: res.data.message
					});
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
page {
	background: #fafbfd !important;

	.listi {
		margin-top: 36rpx;
		border-radius: 16rpx;
		width: calc(100% - 60rpx);
	}
}
</style>
