jiuyiUniapp/jiuyi2/pages/index/durian.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 intergralApi from '@/api/intergral.js';
	import durianlApi from '@/api/durian.js';
	const {
		proxy
	} = getCurrentInstance()
	// 仓库
	const store = useStore()
	// 互转表单
	const form = reactive({
		account: '',
		sellNum: '',
	})

	//读秒记录
	const viewData = ref({
		seconds: 0
	})
	// 用户信息
	const userinfo = computed(() => {
		let result = store.state.userinfo
		return result
	})
	// 进度条
	const progress = computed(() => {
		let result = viewData.value.seconds
		result = Math.min(Number(result), 100)
		return result
	})
	// 我的钱包
	const purse = computed(() => {
		let result = store.state.purse || {}
		return result
	})

	onReady(() => {
		// proxy.$refs.dealRef.open()
	})

	onLoad(() => {
		// 获取钱包
		util.getPurse()
	})

	// 榴莲果交易
	function transfer() {
		durianlApi.transfer({
			query: {
				account: form.account,
				sellNum: form.sellNum
			}
		}).then(rs => {
			if (rs.code === 200) {
				util.alert('操作成功')
				util.getUserinfo()
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 跳转
	function navigateToPage(path) {
		uni.navigateTo({
			url: path
		})
	}
</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">待释放: 105.53</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/extend')">置换流量</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 tac c333 f28">榴莲果互转</view>
			<view class="content rows mtb10">
				<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="form.account" type="text" placeholder="输入对方账号" />
			</view>
			<view class="inputBox mtb20 plr30">
				<input v-model="form.sellNum" type="number" placeholder="输入数量" />
			</view>

			<view class="hint mtb30 tac f20">
				<view>销毁15%</view>
				<!-- <view>互转成功之后冻结24h</view> -->
				<view>(最低x起转)</view>
			</view>

			<view class="button btn lg bar black" @click="transfer">转移</view>
		</view>
	</uni-popup>
</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;
		}
	}
</style>