<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 link(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" @click="link('/pages/index/seedLog')"> <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="link('/pages/index/orchard')">置换</view> <view class="button btn colourful plr30 fmid" @click="link('/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="link('/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="link('/pages/index/dataCenter/push')">置换流量</view> </view> <navigator hover-class="nonwe" :url="'/pages/index/article' + '?id=7'" class="c999 f30 mtb30 fmid"> <uni-icons type="info" color="#333" class="mr10" /> <text>玩法规则说明</text> </navigator> <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>