jiuyiUniapp/jiuyi/pages/index/trade.vue

417 lines
8.4 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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 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
})
onLoad(() => {
getList()
})
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
}
util.alert({
content: '确认交易?'
}).then(rs => {
if (!rs.confirm) return
durianlApi.orderSale({
query: {
orderId: item.id,
}
}).then(rs => {
if (rs.code === 200) {
util.alert('交易成功')
util.getUserinfo()
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() {
durianlApi.fruitForSale({
query: {
totalPrice: form.totalPrice,
sellNum: form.sellNum,
type: typeList[typeIndex.value].id
}
}).then(rs => {
if (rs.code === 200) {
// 关闭弹窗
proxy.$refs.saleRef.close()
setTimeout(() => {
Object.assign(form, new Form())
}, 500)
util.getUserinfo()
//
getList()
} else {
util.alert({
content: rs.msg,
showCancel: false,
})
}
})
}
</script>
<template>
<view class="app">
<!-- <apex title="交易市场">
<template #right>
<view class="w150 tar" @click="$refs.saleRef.open()">挂买卖</view>
</template>
</apex> -->
<view class="header 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" v-if="item.status==1">交易中...</view>
<view class="tac c999" v-if="item.status==2">已完成</view>
<view class="tac c999" v-if="item.status==3">已取消</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">积分:{{userinfo.score}}</text>
<text class="wsn ml40">榴莲果:{{userinfo.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="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>
</template>
<style lang="scss">
// 顶部
.header {
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;
}
</style>