BCMM/pages/order/index.vue

<template>
	<view class="container">
		<view class="flex topTabBox">
			<view class="topListType position-relative" v-for="(item,ind) in typeList" @click="tabType(ind)">
				<view>
					{{$t(item.name)}}
				</view>
				<view class="topListTip" :class="{show:ind==typeIndex}">

				</view>
			</view>
		</view>
		<view class="tyoeList">
			<view class="list" v-for="item in typeList[typeIndex].list">
				<view class="flex oneBox">
					<view class="oneLeft flex-start">
						<image class="img" v-if="typeIndex!=4" :src="item.image" mode="scaleToFill"></image>
						<view class="nameBox flex">
							<view class="name">
								{{item.name}}
							</view>
							<view class="money" v-if="typeIndex!=4">
								{{item.money}}USDT
							</view>
						</view>
					</view>
					<view class="oneRight" v-if="typeIndex==0">
						{{$t('order.待支付')}}
					</view>
					<view class="oneRight" v-if="typeIndex==1">
						{{$t('order.待完成')}}
					</view>
					<view class="oneRight" v-if="typeIndex==2">
						<!-- 1  待结单   0待收益  2已结单  -->
						{{item.finish == 1 ?'待结单':item.finish == 0 ? $t('order.待收益'):'已结单'}}
					</view>
					<view class="oneRight" v-if="typeIndex==3">
						{{$t('order.已完成')}}
					</view>
					<view class="oneRight" v-if="typeIndex==4">
						{{item.status_chs}}
					</view>
				</view>
				<view class="position-relative twoBox flex">
					<view class="item">
						<view class="ll" v-if="typeIndex!=4&&typeIndex!=3">
							<text class="title">{{$t('order.日收益')}}：</text>
							<text class="num">{{item.up_ratio}}</text>
						</view>
						<view class="ll" v-if="typeIndex!=4&&typeIndex!=3">
							<text class="title">{{$t('order.周期')}}：</text>
							<text class="num">{{item.day}}{{$t('order.天')}}</text>
						</view>
						<view class="ll" v-if="typeIndex==4">
							<text class="title">{{$t('order.预约时间')}}：</text>
							<text class="num">{{item._created_time}}</text>
						</view>

						<view class="ll" v-if="typeIndex!=4">
							<text class="title">{{$t('order.匹配时间')}}：</text>
							<text class="num" v-if="typeIndex!=3">{{item.deal_time_text}}</text>
							<text class="num" v-else>{{item.createtime}}</text>
						</view>
					</view>
					<view class="payButtom" v-if="typeIndex==0&&!onOrderSn(item)" @click="openPayPassword(item)">
						{{$t('order.支付')}}
					</view>
					<view class="text-right" v-if="typeIndex==1">
						<view class="payText">
							{{$t('order.待收益')}}:{{item.income | failNumber}}
						</view>
						<view v-if="item.showswitch == 1" class="payButtom margin-t-20" @click="payVote(item.id)">
							{{$t('order.补票')}}
						</view>
					</view>
					<view class="payText" v-if="typeIndex==2">
						{{$t('order.已收益')}}:{{item.income | failNumber}}
					</view>
					<!-- <view class="payText" v-if="typeIndex==3" >
						{{$t('order.总收益')}}:{{item.money-money_now}}
					</view> -->
				</view>
				<view class="flex plan" v-if="typeIndex == 2 && item.finish == 1">
					<view class="planItem" @click="clickPlan(item.order_sn,1)">方案1</view>
					<view class="planItem" @click="clickPlan(item.order_sn,2)">方案2</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="loading" line :loadmoreText="$t('base.加载更多')" :loadingText="$t('base.正在加载')"
			:nomoreText="$t('base.没有更多了')" />
		<!-- <uni-popup type="bottom" ref="popup" :mask-click="false" @maskClick='colsePayPassword'>
			<inputPassword @commit='KeyInfo' @colse='colsePayPassword'></inputPassword>
		</uni-popup> -->
		<taber></taber>
	</view>
</template>
<script>
	import {
		auctionOrders,
		payLog,
		appointmentList,
		pay,
		pay_check,
		tax,
		finish
	} from '@/api/index.js';
	import {
		mapState,
		mapMutations
	} from "vuex";
	import taber from "@/components/footer/footer.vue";
	import inputPassword from "@/components/input-password/input-password.vue";
	export default {
		components: {
			taber,
			inputPassword
		},
		data() {
			return {
				typeIndex: 0, //默认选中的切换
				typeList: [{
						name: 'order.待支付',
						list: [],
						type: 1
					},
					{
						name: 'order.待完成',
						list: [],
						type: 2
					},
					{
						name: 'order.待收益',
						list: [],
						type: 3
					},
					{
						name: 'order.紫金记录',
						list: [],
						type: 4
					},
					{
						name: 'order.预约记录',
						list: [],
						type: 5
					}
				],
				page: 1,
				limit: 10,
				loading: 'loadmore', //加载状态
				actionItem: {},
			}
		},
		computed: {
			...mapState("user", ['userInfo', 'orderList']),
		},
		onShow() {
			this.tabType(this.typeIndex, true)
		},
		onReachBottom() {
			this.loadData();
		},
		filters: {
			failNumber:function(number){
				return +(+number).toFixed(2)
			}
		},
		methods: {
			...mapMutations("user", ['setOrderSn']),
			// 补票
			payVote(id) {
				const that = this;
				uni.showModal({
					title: that.$t('base.温馨提示'),
					content: that.$t('order.是否补票'),
					cancelText:that.$t('base.关闭'),
					confirmText:that.$t('base.确定'), 
					success: res => {
						if (res.confirm) {
							tax({
								id
							}).then((res) => {
								that.tabType(that.typeIndex, true)
								uni.showToast({
									title: that.$t('order.补票成功'),
								});
							}).catch((res)=>{
								uni.showToast({
									title:res.msg,
									icon:'error'
								});
							})
						}
					},
				});
			},
			// 订单支付缓存
			onOrderSn(sn) {
				if (this.orderList.indexOf(sn.shuju.order_sn) > -1) {
					return true
				} else {
					return false
				}
			},
			// 转账
			async openPayPassword(item) {
				const that = this;
				if (this.onOrderSn(item)) {
					return
				}
				uni.showLoading({
					mask: true
				});

				try {
					const alertData = await pay_check({
						order_sn: item.shuju.order_sn,
					});
					const txHash = await ethereum.request({
						method: 'eth_sendTransaction',
						params: [{
							from: that.userInfo.address, // The user's active address.
							to: item.shuju.data.to,
							value: 0,
							data: item.shuju.data.data,
						}]
					})
					const req = await pay({
						order_sn: item.shuju.order_sn,
						hash: txHash,
					});
					that.tabType(that.typeIndex, true);
					that.setOrderSn(item.shuju.order_sn);
					uni.showToast({
						title: that.$t('order.支付成功')
					})
				} catch (e) {
					console.log(e, '错误‘');
					uni.showToast({
						title: e.msg,
						icon: 'error'
					})
				}
			},
			tabType(item, reload = false) {
				const that = this;
				if (item == that.typeIndex && !reload) {
					return
				}
				that.typeIndex = item;
				that.page = 1;
				that.typeList[item].list = [];
				that.loading = 'loadmore';
				that.loadData();
			},
			// 请求载入数据
			async loadData() {
				const that = this;
				const arr = this.typeList[this.typeIndex];
				if (that.loading == 'nomore' || that.loding == "loading") {
					return
				}
				that.loading = 'loading';
				switch (arr.type) {
					case 1:
						that.getAuctionOrders(arr)
						break;
					case 2:
						that.getAuctionOrders(arr)
						break;
					case 3:
						that.getAuctionOrders(arr)
						break;
					case 4:
						that.payLog(arr)
						break;
					case 5:
						that.appointmentList(arr)
						break;
					default:
						break;
				}
			},
			// 预约记录
			getAuctionOrders(item) {
				const that = this;
				auctionOrders({
					type: item.type
				}).then((res) => {
					item.list = res.data.map((rs) => {
						rs.money = +(+rs.money).toFixed(2);
						rs.income = +rs.income;
						return rs
					});
					that.loading = 'nomore'
				}).catch((res) => {
					console.log(res);
				})
			},
			// 紫金记录
			payLog(item) {
				const that = this;
				payLog({
					page: that.page,
					limit: that.limit,
				}).then((res) => {
					const list = res.data.list.map((rs) => {
						rs.money = +(+rs.money).toFixed(2);
						return rs
					})
					item.list = item.list.concat(list);
					if (list.length != that.limit) {
						that.loading = 'nomore'
					} else {
						that.page++
						that.loading = 'loadmore'
					}
				}).catch((res) => {
					console.log(res);
				})
			},
			// 预约记录
			appointmentList(item) {
				const that = this;
				appointmentList({
					page: that.page,
					limit: that.limit,
				}).then((res) => {
					let arr = res.data.list;
					item.list = item.list.concat(arr);
					console.log(arr.length, that.limit);
					if (arr.length != that.limit) {
						that.loading = 'nomore'
					} else {
						console.log('==');
						that.page++
						that.loading = 'loadmore'
					}
					console.log(res);
				}).catch((res) => {
					console.log(res);
				})
			},
			//待结算选择方案
			clickPlan(order_sn,type){
				const that = this;
				finish({
					order_sn: order_sn,
					type: type,
				}).then((res) => {
					if(res.code == 0){
						uni.showToast({
							title:res.msg,
							icon: 'error'
						})
					}else{
						that.typeIndex = 2;
						that.page = 1;
						that.typeList[that.typeIndex].list = [];
						that.loading = 'loadmore';
						that.loadData();
					}
				}).catch((res) => {
					console.log(res);
				})
			},
		},
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		padding: 30rpx;
		padding-top: var(--status-bar-height);
	}

	.topTabBox {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background-color: rgba(255, 255, 255, 0.5);
		padding-bottom: 10rpx;

		.topListType {
			font-size: $font-base;
			font-weight: bold;
			padding-top: 30rpx;
			padding-bottom: 20rpx;
			flex-grow: 1;
			text-align: center;
			color: $font-color-light;

			.topListTip {
				width: 52rpx;
				height: 10rpx;
				background: linear-gradient(270deg, #1EC978, #DFFFEF);
				border-radius: 5rpx;
				position: absolute;
				left: 50%;
				margin-left: -26rpx;
				bottom: 0;
				display: none;

				&.show {
					display: block;
				}
			}
		}
	}

	.tyoeList {
		padding: 30rpx 0;
		padding-top: 130rpx;

		.list {
			padding: 30rpx;
			background-color: #FFF;
			border-radius: 10rpx;
			margin-bottom: 30rpx;

			.oneBox {
				align-items: flex-start;

				.oneLeft {
					align-items: stretch;
					line-height: 1;

					.img {
						flex-shrink: 0;
						width: 94rpx;
						height: 94rpx;
					}

					.nameBox {
						padding-left: 10rpx;
						flex-direction: column;
						align-items: stretch;

						.name {
							font-weight: bold;
							font-size: $font-lg;
							color: $font-color-dark;
						}

						.money {
							background-color: #FFF7B2;
							color: #905900;
							border: 2rpx solid #D3BF8D;
							font-size: 26rpx;
							padding: 8rpx 16rpx;
							border-radius: 6rpx;
						}
					}
				}

				.oneRight {
					font-size: $font-base;
					color: $font-color-dark;
				}
			}

			.twoBox {
				font-size: $font-base;
				line-height: 1;
				.text-right{
					display: flex;
					flex-direction: column;
					
				}
				.item {
					padding-top: 10rpx;

					.ll {
						padding-top: 10rpx;

						.title {
							color: $font-color-disabled;
						}

						.num {
							color: $font-color-base;
						}
					}
				}

				.payText {
					color: $font-color-disabled;
				}

				.payButtom {
					width: 160rpx;
					background: linear-gradient(90deg, #38F855, #21EDD3);
					border-radius: 10px;
					padding: 20rpx;
					text-align: center;
				}

			}
			.plan{
				padding: 15rpx 55rpx;
				.planItem{
					// background: #1DBC71;
					border: 2rpx solid #1DBC71;
					border-radius: 50rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #1DBC71;
					line-height: 55rpx;
					padding: 0rpx 70rpx;
					flex-shrink: 0;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>