417 lines
8.4 KiB
Vue
417 lines
8.4 KiB
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 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> |