jiuyiUniapp/jiuyi2/pages/index/deal.vue

<script setup>
	/**
	 * 我的交易
	 */
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance,
		watch,
		computed,
		defineExpose,
	} from 'vue';
	import {
		onLoad,
		onReady,
		onHide,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app'
	import {
		useStore,
	} from 'vuex'
	import durianlApi from '@/api/durian.js';
	// 顶部导航
	import apex from '@/components/header/apex'

	const store = useStore()
	const {
		proxy
	} = getCurrentInstance()

	// 选中的下标
	const tabList = reactive([{
			name: '全部',
		},
		{
			name: '交易中',
		},
		{
			name: '已完成',
		},
		{
			name: '已取消',
		},
	])
	// tab下标
	const tabIndex = ref(0)
	// 订单列表
	const list = reactive({
		data: [],
		pageNum: 1,
		pageSize: 10,
		total: 0,
	})

	const userinfo = computed(() => {
		let result = store.state.userinfo
		return result
	})

	onLoad(() => {
		getList()
	})

	onPullDownRefresh(() => {
		// 
		refreshList()
	})

	onReachBottom(() => {
		// 
		getMoreList()
	})

	// 重载列表
	function refreshList() {
		list.pageNum = 1
		list.total = 0
		getList()
	}

	// 获取更多列表
	function getMoreList() {
		if (list.data.length >= list.total) return
		list.pageNum++
		getList()
	}

	// 查看交易大厅
	function getList() {
		durianlApi.getOrderList({
			query: {
				userId: userinfo.value.userId,
				status: tabIndex.value,
				pageSize: list.pageSize,
				pageNum: list.pageNum,
			}
		}).then(rs => {
			if (rs.code == 200) {
				if (list.pageNum == 1) list.data.length = 0
				list.data.push(...rs.rows)
				list.total = rs.total
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 修改tab下标
	function handleTabIndex(index) {
		if (tabIndex.value === index) return
		tabIndex.value = index
		list.data.length = 0
		refreshList()
	}

	/**
	 * 取消交易
	 * @param {Object} item 交易订单对象
	 */
	function cancelSale(item) {
		durianlApi.cancelSale({
			query: {
				orderId: item.id,
			}
		}).then(rs => {
			if (rs.code === 200) {
				util.alert('操作成功')
				util.getUserinfo()
				refreshList()
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 复制
	 * @param {Object} str 复制的字段
	 */
	function handleCopy(str) {
		util.copyText(str)
	}
</script>

<template>
	<view class="app">
		<!-- 顶部菜单栏 -->
		<apex title="我的交易">
			<template #right>
				<navigator url="/pages/index/trade" hover-class="none" open-type="redirect">
					<view class="w150 tar">交易市场</view>
				</navigator>
			</template>
		</apex>

		<view class="list plr30">
			<view class="item mtb20 ptb20 plr30 bfff br10" v-for="(item,index) in list.data" :key="index">
				<view class="rows">
					<view class="">数量：{{item.sellNum}}</view>
					<view class="">
						<text v-if="item.type == 1">挂买</text>
						<text v-else>挂卖</text>
					</view>
				</view>

				<view class="rows mt20">
					<view class="">金额：{{item.totalPrice}}</view>
					<template v-if="item.status == 3">
						<text class="c999 f28">已取消</text>
					</template>
					<template v-if="item.status == 2">
						<text class="c999 f28">已完成</text>
					</template>
					<template v-else-if="item.status == 1">
						<view class="btn sm black w180" @click="cancelSale(item)">取消</view>
					</template>
				</view>

				<template v-if="item.status == 2">
					<view class="fmid mt10" @click="handleCopy(item.orderNo)">
						<view class="c333 f28">交易哈希：{{item.orderNo}}</view>
						<image class="wh24 ml10" src="/static/copy.png" mode="aspectFit" />
					</view>

					<!-- 交易申诉 -->
					<!-- <view class="appeal btn ti cfff mt20 mauto mb30">交易申诉</view> -->
				</template>
			</view>

			<view class="nomore mtb30">暂无更多~</view>
		</view>

		<view class="fill" style="height: 120rpx;"></view>

		<!-- 底部菜单 -->
		<view class="footer footerMenu df bfff shadow">
			<view class="option f1 ver" v-for="(item,index) in tabList" :key="index" :class="{'active': index === tabIndex}" @click="handleTabIndex(index)">
				<view class="">{{item.name}}</view>
				<view class="line"></view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	// 顶部
	.apex {
		z-index: 1;
	}

	// 
	.list {

		// 列表项
		.item {

			.fn {
				.button {
					border-radius: 20rpx 0 0 20rpx;
				}
			}

			// 标签
			.label {
				position: absolute;
				top: 0;
				right: 0;
				width: 120rpx;
				text-align: center;
				color: #fff;
				font-size: 28rpx;
				border-radius: 0 20rpx 0 20rpx;

				&.style1 {
					background-image: linear-gradient(180deg, #FFBB35 0%, #FF3C35 100%);
				}

				&.style2 {
					background-image: linear-gradient(116deg, #27EFE2 0%, #A45EFF 43%, #FF004F 100%);
				}
			}
		}
	}

	// 底部菜单
	.footerMenu {
		.option {
			color: #c6c6c6;
			transition: .3s;

			.line {
				width: 36rpx;
				height: 4rpx;
				background-color: #333;
				border-radius: 100rpx;
				opacity: 0;
				transition: .3s;
			}

			&.active {
				color: #333;

				.line {
					opacity: 1;
				}
			}
		}
	}

	// 挂卖弹窗
	.saleAlt {
		.button {
			width: 300rpx;
		}
	}

	// 交易申诉
	.appeal {
		width: 450rpx;
		background-color: #717171;
	}
</style>