jiuyiUniapp/jiuyi2/pages/index/trade.vue

<script setup>
	/**
	 * 交易市场
	 */
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance,
		watch,
		defineExpose,
		computed,
	} from 'vue';
	import {
		useStore
	} from 'vuex'
	import {
		onLoad,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app'
	// 工具库
	import util from '@/common/js/util'
	// 
	import durianlApi from '@/api/durian.js';
	// 顶部状态栏
	import statusBar from '@/components/header/statusBar.vue'
	// 顶部导航
	import apex from '@/components/header/apex'
	const store = useStore()
	const {
		proxy
	} = getCurrentInstance()

	// tab列表
	const tabList = reactive([{
			name: '全部'
		},
		{
			name: '挂买'
		},
		{
			name: '挂卖'
		},
	])
	// tab下标
	const tabIndex = ref(0)
	// 列表数据
	const list = reactive({
		data: [],
		pageNum: 1,
		pageSize: 10,
		total: 0,
	})
	// 交易类型列表
	const typeList = reactive([{
			id: 1,
			name: '挂买',
		},
		{
			id: 2,
			name: '挂卖',
		}
	])
	// 类型下标
	const typeIndex = ref(0)
	// 表单基本信息
	class Form {
		sellNum = ''
		totalPrice = ''
	}
	// 表单
	const form = reactive({
		sellNum: '',
		totalPrice: '',
	})
	// 订单支付方式
	const orderPaytype = reactive([{
			name: '积分',
		},
		{
			name: '余额',
		}
	])
	// 用户信息
	const userinfo = computed(() => {
		let result = store.state.userinfo
		return result
	})
	// 格式化售价
	const formatSell = computed(() => {
		let result = form.sellNum || 0
		result = Math.floor(result * 1000 * 0.7) / 1000
		return result
	})
	// 我的钱包
	const purse = computed(() => {
		let result = store.state.purse || {}
		return result
	})

	onLoad(() => {
		getList()
		// 获取钱包
		util.getPurse()
	})

	onReady(() => {
		// proxy.$refs.orderDetail.open()
	})

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

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

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

	// 重载列表
	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: {
				type: tabIndex.value,
				status: 1,
				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,
			})
		}).finally(() => {
			uni.stopPullDownRefresh()
		})
	}

	/**
	 * 确认交易
	 * @param {Object} item
	 */
	function handleDeal(item) {
		// 
		if (item.userId == userinfo.value.userId) {
			util.alert('您不能和自己交易')
			return
		}
		durianlApi.orderSale({
			query: {
				orderId: item.id,
			}
		}).then(rs => {
			if (rs.code === 200) {
				util.alert('交易成功')

				util.getPurse()
				refreshList()
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 切换挂买挂卖
	function handleTypeIndex(ev) {
		const value = ev.detail.value
		if (typeIndex.value === value) return
		typeIndex.value = value
	}

	// 发布榴莲果交易信息
	function release() {
		// 验证必填项
		if (!form.fruitAmount) {
			util.alert('请输入榴莲果数量')
			return
		}
		if (!form.fruitAmount) {
			util.alert('请输入总价')
			return
		}
		if (!form.orderPaytype) {
			util.alert('请选择支付方式')
			return
		}

		const config = {
			1: {
				userId: userinfo.value.id,
				// 买方用户id
				targetUserId: form.targetUserId,
			},
			2: {
				userId: userinfo.value.id,
				// 买方用户id
				targetUserId: form.targetUserId,
			}
		}

		// 榴莲果交易
		api.durian.consume({
			data: {
				// 卖方id
				userId: config[type].userId,
				// 买方用户id
				targetUserId: config[type].targetUserId,
				// 交易类型
				transactionType: 10,
				// 榴莲果交易数量
				fruitAmount: form.fruitAmount,
				// 对方姓名
				name: `${form.first}${form.name}`,
				// 对方账号
				account: form.account,
				// 二级密码
				secondPassword: ev
			}
		}).then(rs => {
			if (rs.code === 200) {
				// 
				util.getPurse()
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}
</script>

<template>
	<view class="app">
		<apex title="交易市场">
			<template #right>
				<view class="wsn f22 c666">昨日均价：1.00</view>
			</template>
		</apex>

		<view class="apex rows bfff">
			<!-- tab -->
			<view class="tab df f1 c333">
				<view class="item ver f1" v-for="(item,index) in tabList" :key="index"
					:class="{'active':index === tabIndex}" @click="handleTabIndex(index)">
					<view class="txt ptb15">{{item.name}}</view>
					<view class="line"></view>
				</view>
			</view>

			<view class="menu mlr30">
				<navigator url="/pages/index/deal" hover-class="none" open-type="redirect">
					<view class="ver">
						<uni-icons type="person-filled" size="36rpx" />
						<view class="f24">我的订单</view>
					</view>
				</navigator>
			</view>
		</view>

		<!-- 列表 -->
		<view class="list plr30 c333 f36">
			<view class="item df oh pr mtb30 br20" v-for="(item,index) in list.data" :key="index">
				<!-- 榴莲果 -->
				<view class="fmid ptb20">
					<view class="mlr20">
						<image class="wh110" src="/static/fruit.png" mode="aspectFit" />
					</view>
				</view>

				<view class="f1 mlr20 c333 f28">
					<view class="tac c999" @click="$refs.orderDetail.open()">
						<text>交易中详情</text>
						<uni-icons type="right" color="#999" />
					</view>

					<view class="oh mt10 mb20">
						<view class="mtb10">交易价格：{{item.totalPrice}}</view>
						<view class="mtb10">交易数量：{{item.sellNum}}</view>
					</view>
				</view>

				<view class="fn" v-if="item.status==1">
					<view class="button btn black w150 mt70" @click="handleDeal(item)">交易</view>
				</view>

				<view class="label style1" v-if="item.type == 1">挂买</view>
				<view class="label style2" v-else>挂卖</view>
			</view>
			<view class="nomore mtb30">暂无更多~</view>
		</view>
	</view>

	<view class="fixed cfff f24" @click="$refs.saleRef.open()">
		<view class="">挂卖买</view>
	</view>

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

	<view class="footer rows plr30 shadow bfff">
		<view class="f28">我的资产</view>
		<view class="f28 c666">
			<text class="wsn">积分:{{purse.score}}</text>
			<text class="wsn ml40">榴莲果:{{purse.fruit}}</text>
		</view>
	</view>

	<!-- 新增交易弹窗 -->
	<uni-popup ref="saleRef" type="center">
		<view class="saleAlt popMid ver pt30 pb50 bfff">
			<view class="line rows ptb20">
				<picker class="value tar f1" :range="typeList" range-key="name" @change="handleTypeIndex">
					<text>{{typeList[typeIndex].name}}</text>
				</picker>
				<uni-icons type="right" color="#999" />
			</view>

			<view class="image wh150">
				<image src="/static/fruit.png" class="wh150" mode="aspectFit" />
			</view>

			<view class="inputBox mtb10 plr30">
				<input class="ptb10" v-model="form.sellNum" type="number" placeholder="输入挂买卖数量"
					placeholder-class="placeholderStyle" />
			</view>

			<view class="inputBox mtb10 plr30">
				<input class="ptb10" v-model="form.totalPrice" type="number" placeholder="输入总价"
					placeholder-class="placeholderStyle" />
			</view>

			<!-- 发起方决定收款方式 单种 或 多种 -->
			<view class="inputBox rows mtb10 ptb10 plr30">
				<view class="key">支付方式</view>
				<view class="f1 tar">
					<picker :range="orderPaytype" range-key="name">
						<view class="rows">
							<view class="f1">积分</view>
							<uni-icons type="right" />
						</view>
					</picker>
				</view>
			</view>

			<view class="hint mtb30 tac c999 f28">
				<view class="">交易销毁30%</view>
				<view class="mt10" v-if="form.sellNum">
					<text v-if="typeList[typeIndex].id == 2">买方</text>
					<text>实际到账</text>
					<text class="c000 ml5">{{formatSell}}</text>
				</view>
			</view>

			<view class="button btn bar black" @click="release">确定</view>
		</view>
	</uni-popup>

	<!-- 订单信息 -->
	<uni-popup ref="orderDetail" type="bottom">
		<view class="orderAlt popBot plr30 c333 bfff">
			<view class="header rows ptb30 f40">
				<view class="f38 b">挂买订单</view>
				<uni-icons type="closeempty" />
			</view>

			<view class="user c666 mtb30">
				<view class="title f34">发布人信息</view>
				<!-- 点击跳转视频主页 -->
				<view class="rows mt20">
					<view class="avatar">
						<image class="wh80" src="/static/qq.png" mode="aspectFill" />
					</view>
					<view class="name f1 ml10 f32">发布人昵称</view>
				</view>
			</view>

			<view class="info c666 f28">
				<view class="title f34">订单详情</view>

				<view class="line rows mtb30">
					<view class="key">哈希号</view>
					<view class="f1 df jcr aic tar">
						<view class="f1">xxxx-xxxxx-xxxx</view>
						<image class="wh24 ml10" src="/static/copy.png" mode="aspectFit" />
					</view>
				</view>

				<view class="line rows mtb30">
					<view class="key">总价</view>
					<view class="f1 tar">300</view>
				</view>

				<view class="line rows mtb30">
					<view class="key">数量</view>
					<view class="f1 tar">300</view>
				</view>

				<view class="line rows mtb30">
					<view class="key">销毁</view>
					<view class="f1 tar">90</view>
				</view>

				<view class="line rows mtb30">
					<view class="key">实际到账</view>
					<view class="f1 tar">90</view>
				</view>

				<view class="line rows mtb30">
					<view class="key">支付方式</view>
					<view class="f1 tar">
						<picker :range="orderPaytype" range-key="name">
							<view class="rows">
								<view class="f1">积分</view>
								<uni-icons type="right" />
							</view>
						</picker>
					</view>
				</view>
			</view>

			<view class="btn lg black mt60 mlr30 mb30">确认交易</view>
		</view>
	</uni-popup>
</template>

<style lang="scss">
	// 顶部
	.apex {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 1;
		background-color: #fff;
	}

	// 
	.tab {
		.item {
			&.active {
				.line {
					opacity: 1;
					transition: .3s;
				}
			}

			.line {
				width: 52rpx;
				height: 4rpx;
				background-color: #666666;
				opacity: 0;
			}
		}
	}

	// 
	.list {
		margin-top: 120rpx;

		// 列表项
		.item {
			background-color: #FFFBF3;

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

			// 标签
			.label {
				position: absolute;
				top: 0;
				right: 0;
				width: 120rpx;
				padding: 2px 0;
				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%);
				}
			}
		}
	}

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

	// 悬浮
	.fixed {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: fixed;
		right: 30rpx;
		bottom: 30vh;
		width: 90rpx;
		height: 90rpx;
		background-color: rgb(106, 161, 242);
		border-radius: 50%;
		z-index: 10;
		box-shadow: 0 0 20rpx #0003;
	}

	// 订单弹窗
	.orderAlt {

		// 
		.header {
			border-bottom: 1rpx solid #eee;
		}
	}
</style>