558 lines
11 KiB
Vue
558 lines
11 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 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> |