443 lines
9.5 KiB
Vue
443 lines
9.5 KiB
Vue
<script setup>
|
||
/**
|
||
* 榴莲首页
|
||
*/
|
||
import {
|
||
useStore,
|
||
} from 'vuex'
|
||
import {
|
||
onMounted,
|
||
ref,
|
||
reactive,
|
||
computed,
|
||
getCurrentInstance,
|
||
watch,
|
||
defineExpose,
|
||
} from 'vue';
|
||
|
||
import {
|
||
onLoad,
|
||
onReady,
|
||
onHide,
|
||
} from '@dcloudio/uni-app'
|
||
// 未登录
|
||
import noLogin from '@/components/login/noLogin.vue'
|
||
// 工具库
|
||
import util from '@/common/js/util.js'
|
||
// 进度
|
||
import task from '@/components/index/task'
|
||
// 接口
|
||
import api from '@/api/index.js'
|
||
// 二级支付
|
||
import payPwd from '@/components/mine/payPwd.vue'
|
||
const {
|
||
proxy
|
||
} = getCurrentInstance()
|
||
// 仓库
|
||
const store = useStore()
|
||
// 互转表单
|
||
const form = reactive({
|
||
// 交易对方的用户ID
|
||
targetUserId: '',
|
||
// 账户
|
||
account: '',
|
||
// 榴莲果数量
|
||
fruitAmount: '',
|
||
// 姓名首字
|
||
first: '',
|
||
// 姓名
|
||
name: '',
|
||
//
|
||
secondPassword: '',
|
||
})
|
||
//读秒记录
|
||
const viewData = ref({
|
||
seconds: 0
|
||
})
|
||
// 用户信息
|
||
const userinfo = computed(() => {
|
||
return store.state.userinfo
|
||
})
|
||
// 进度条
|
||
const progress = computed(() => {
|
||
let result = viewData.value.seconds
|
||
result = Math.min(Number(result), 100)
|
||
return result
|
||
})
|
||
// 我的钱包
|
||
const purse = computed(() => {
|
||
return store.state.purse || {}
|
||
})
|
||
|
||
// 榴莲果配置
|
||
const configData = reactive({
|
||
minConsumption: '',
|
||
platformPercentage: ''
|
||
})
|
||
|
||
onReady(() => {
|
||
// proxy.$refs.dealRef.open()
|
||
// proxy.$refs.payPwdRef.open()
|
||
})
|
||
|
||
onLoad(() => {
|
||
// 获取钱包
|
||
util.getPurse()
|
||
|
||
getConfig()
|
||
})
|
||
|
||
// 榴莲果交易
|
||
function handleSubmit() {
|
||
// 验证必填项
|
||
if (!form.account) {
|
||
util.alert('请输入账号')
|
||
return
|
||
}
|
||
if (!form.fruitAmount) {
|
||
util.alert('请输入榴莲果转账数量')
|
||
return
|
||
}
|
||
|
||
// 验证添加最低金额限制
|
||
const min = parseFloat(configData.minConsumption)
|
||
const price = parseFloat(form.fruitAmount)
|
||
if (price < min) {
|
||
util.alert(`榴莲果最低${min}起转`)
|
||
return
|
||
}
|
||
|
||
|
||
// 根据账号查询用户id
|
||
api.mine.getUserDataByAccount({
|
||
query: {
|
||
account: form.account,
|
||
},
|
||
}).then(rs => {
|
||
if (rs.code === 200) {
|
||
const result = rs.data
|
||
// 交易对方的id
|
||
form.targetUserId = result.userName
|
||
form.name = result.userRealName.slice(1, result.userRealName.length)
|
||
// 打开姓名校验
|
||
proxy.$refs.payee.open()
|
||
return
|
||
}
|
||
util.alert({
|
||
content: rs.msg,
|
||
showCancel: false,
|
||
})
|
||
})
|
||
}
|
||
|
||
// 验证真实姓名
|
||
function handlePayeeConfirm() {
|
||
// 验证必填项
|
||
if (!form.first) {
|
||
util.alert('请输入对方姓名首字母')
|
||
return
|
||
}
|
||
|
||
api.durian.nameComparison({
|
||
query: {
|
||
// 对方账号
|
||
account: form.account,
|
||
// 对方姓名
|
||
name: `${form.first}${form.name}`,
|
||
}
|
||
}).then(rs => {
|
||
if (rs.code == 200) {
|
||
if (rs.data) proxy.$refs.payPwdRef.open()
|
||
else {
|
||
util.alert({
|
||
content: '姓名不匹配',
|
||
showCancel: false,
|
||
})
|
||
form.first = ''
|
||
}
|
||
return
|
||
}
|
||
util.alert({
|
||
content: rs.msg,
|
||
showCancel: false,
|
||
})
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 交易
|
||
* @param {Object} ev 二级密码
|
||
*/
|
||
function handlePwdConfirm(ev) {
|
||
// 验证必填项
|
||
if (!form.first) {
|
||
util.alert('请输入对方姓名首字母')
|
||
return
|
||
}
|
||
if (!form.account) {
|
||
util.alert('请输入账号')
|
||
return
|
||
}
|
||
if (!form.fruitAmount) {
|
||
util.alert('请输入榴莲果转账数量')
|
||
return
|
||
}
|
||
|
||
// 榴莲果交易
|
||
api.durian.consume({
|
||
data: {
|
||
// 更新用户信息
|
||
userId: userinfo.value.id,
|
||
// 交易对方的用户id
|
||
targetUserId: form.targetUserId,
|
||
// 交易类型
|
||
transactionType: 10,
|
||
// 榴莲果交易数量
|
||
fruitAmount: form.fruitAmount,
|
||
// 交易值
|
||
totalAmount: form.fruitAmount,
|
||
// 对方姓名
|
||
name: `${form.first}${form.name}`,
|
||
// 对方账号
|
||
account: form.account,
|
||
// 二级密码
|
||
secondPassword: ev
|
||
}
|
||
}).then(rs => {
|
||
if (rs.code === 200) {
|
||
form.fruitAmount = ''
|
||
form.account = ''
|
||
form.first = ''
|
||
proxy.$refs.dealRef.close()
|
||
proxy.$refs.payee.close()
|
||
//
|
||
util.getPurse()
|
||
//
|
||
util.alert('转让成功')
|
||
return
|
||
}
|
||
util.alert({
|
||
content: rs.msg,
|
||
showCancel: false,
|
||
})
|
||
})
|
||
}
|
||
|
||
// 跳转
|
||
function navigateToPage(path) {
|
||
uni.navigateTo({
|
||
url: path
|
||
})
|
||
}
|
||
|
||
// 榴莲果配置
|
||
function getConfig() {
|
||
api.durian.durianFruitConfig().then(rs => {
|
||
if (rs.code == 200) {
|
||
configData.minConsumption = rs.data.minConsumption
|
||
configData.platformPercentage = +rs.data.platformPercentage * 100
|
||
return
|
||
}
|
||
util.alert({
|
||
content: rs.msg,
|
||
showCancel: false,
|
||
})
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="page" v-if="!userinfo.id">
|
||
<noLogin class="f1" />
|
||
</view>
|
||
|
||
<view class="appbw plr30" v-else>
|
||
|
||
<!-- 有效读秒 -->
|
||
<view class="task mtb30">
|
||
<task />
|
||
</view>
|
||
|
||
<!-- 树苗 -->
|
||
<view class="sapling bgColor mtb30 ptb15 plr30">
|
||
<view class="df">
|
||
<view class="f1 fmid">
|
||
<image class="wh110" src="/static/sapling.png" mode="aspectFit" />
|
||
</view>
|
||
<view class="f1 fmid">
|
||
<view class=" f38 b wsn">* {{ purse.seed }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 说明 -->
|
||
<view class="explain ptb30 plr30 bgColor">
|
||
<view class="df">
|
||
<view class="list f1 fmid">
|
||
<view class="item ver f1">
|
||
<image class="wh300" src="/static/tree.png" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="df fdc jcsa f1">
|
||
<view class="button btn colourful plr30" @click="navigateToPage('/pages/index/orchard')">置换</view>
|
||
|
||
<view class="button btn colourful plr30 fmid"
|
||
@click="navigateToPage('/pages/index/durainActivation')">
|
||
<view class="">我的榴莲果树</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 榴莲果专区 -->
|
||
<view class="durianSection bgColor mtb30 ptb30 plr30">
|
||
<!-- <image class="fruit" src="/static/fruit.png" mode="aspectFit" /> -->
|
||
<view class="df mlr30">
|
||
<view class="ver f1">
|
||
<navigator url="/pages/index/durianLog" hover-class="none">
|
||
<image class="fruit wh150" src="/static/fruit.png" mode="aspectFit" />
|
||
<view class="mt30 f20">
|
||
<view class=" f1 b">可用: {{ purse.fruit }}</view>
|
||
<view class="cFF4242 f1 mt10">待释放: {{ purse.fruitFrozen }}</view>
|
||
</view>
|
||
</navigator>
|
||
</view>
|
||
<view class="notice df fdc jcsa aic f1">
|
||
<view class="item ver f1" @click="$refs.dealRef.open()">
|
||
<view class="key fmid c333 f24">互转</view>
|
||
<!-- <view class="value mt5 c333 f20">销毁30%</view> -->
|
||
</view>
|
||
<view class="item ver f1 mt30" @click="navigateToPage('/pages/index/trade')">
|
||
<view class="key fmid c333 f24">交易</view>
|
||
<!-- <view class="value mt5 c333 f20">求购 出售</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="btn plus black mt60 mlr60" @click="navigateToPage('/pages/index/dataCenter/push')">置换流量</view>
|
||
</view>
|
||
|
||
<view class="fill" style="height: 60rpx;"></view>
|
||
</view>
|
||
|
||
<!-- 互转 -->
|
||
<uni-popup ref="dealRef" type="center">
|
||
<view class="dealAlt popMid ptb40 plr60 bfff br30">
|
||
<view class="title thd tac c333 f32"> 当前可用榴莲果 {{purse.fruit}}</view>
|
||
<view class="content rows mtb30">
|
||
<image class="wh140" src="/static/fruit.png" mode="aspectFit" />
|
||
<image class="wh70" src="/static/dealMid.png" mode="aspectFit" />
|
||
<image class="wh140" src="/static/dealUser.png" mode="aspectFit" />
|
||
</view>
|
||
|
||
<view class="inputBox mtb20 plr30">
|
||
<input v-model.trim="form.account" type="text" placeholder="输入对方账号" />
|
||
</view>
|
||
|
||
<view class="inputBox mtb20 plr30">
|
||
<input v-model.trim="form.fruitAmount" type="number" placeholder="输入数量" />
|
||
</view>
|
||
|
||
<view class="hint mtb30 tac f22">
|
||
<view>销毁{{ configData.platformPercentage }}%</view>
|
||
<view>(最低{{ configData.minConsumption }}起转)</view>
|
||
</view>
|
||
|
||
<view class="button btn lg bar black" @click="handleSubmit">转移</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<!-- 收款方 -->
|
||
<uni-popup ref="payee" type="center">
|
||
<view class="payee popMid ver ptb40 plr60 bfff br30">
|
||
<view class="title tac c333 f28">收款方确认</view>
|
||
|
||
<view class="mtb20 f28">请补全对方姓名首字，以防转错</view>
|
||
|
||
<view class="inputEdit rows mauto mtb20 plr30">
|
||
<input class="first side" v-model.trim="form.first" type="text" placeholder="" />
|
||
<view class="mlr20">*</view>
|
||
<view class="side tar">
|
||
<text v-if="0">{{ form.name }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="rows mt50">
|
||
<view class="btn sm cancel plr40" @click="$refs.payee.close()">取消</view>
|
||
<view class="btn sm black plr40" @click="handlePayeeConfirm">验证</view>
|
||
</view>
|
||
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<!-- 二级支付 -->
|
||
<payPwd ref="payPwdRef" @confirm="handlePwdConfirm" />
|
||
</template>
|
||
|
||
<style lang="scss">
|
||
//
|
||
.board {
|
||
background-image: linear-gradient(103deg, #27EFE2 0%, #A45EFF 43%, #FF004F 100%);
|
||
}
|
||
|
||
// 背景颜色
|
||
.bgColor {
|
||
background-color: #FFFBF3;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.explain {
|
||
.button {
|
||
width: 250rpx;
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
|
||
// 树苗
|
||
.sapling {
|
||
.button {
|
||
width: 300rpx;
|
||
}
|
||
}
|
||
|
||
// 榴莲果专区
|
||
.durianSection {
|
||
|
||
// 须知
|
||
.notice {
|
||
|
||
.key {
|
||
width: 140rpx;
|
||
height: 70rpx;
|
||
color: #fff;
|
||
background: linear-gradient(99deg, #27efe2 0%, #a45eff 43%, #ff004f 100%), linear-gradient(108deg, #d7f550 -2%, #afef4d 98%);
|
||
border-radius: 100rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
//
|
||
.dealAlt {
|
||
.hint {
|
||
color: #3d3d3d;
|
||
opacity: .7;
|
||
}
|
||
}
|
||
|
||
// 支付
|
||
.payee {
|
||
|
||
// 侧边
|
||
.side {
|
||
width: 80rpx;
|
||
}
|
||
|
||
//
|
||
.first {
|
||
padding: 20rpx;
|
||
background-color: #f4f4f4;
|
||
border-radius: 20rpx;
|
||
}
|
||
}
|
||
</style> |