mp-ui-user/packageGoods/recovery/detail.vue

<template>
	<view class="container">
		<u-navbar :placeholder="true" bgColor="#fff" leftIconSize="0" :autoBack="true" :border="true" title="兑换成功"></u-navbar>
		<view class="item">
			<view class="item-one">兑换成功</view>
			<view class="item-two">商品已成功兑换，当前盲豆数量: {{ coinNum }}</view>
			<button class="item-three" @click="toCore()">去商城看看</button>
			<button class="item-four" @click="toPrize()">进入仓库</button>
		</view>
	</view>
</template>

<script>
	import $http from '@/utils/request.js'
	export default {
		data() {
			return {
				coinNum:'',
			}
		},
		onShow() {
			this.getBean()
		},
		methods: {
			getBean() {
				uni.showLoading({
					title: '加载中'
				});
				$http.post('/api/v1/mp/user/mine/init', {}).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.coinNum = res.data.coinNum
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},
			toCore() {
				uni.switchTab({
					url: '/pages/core/index'
				})
			},
			toPrize() {
				uni.navigateBack({
					delta:2,
					url: '/packagePrize/prize/index'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
	}
	.item {
		text-align: center;

		&-one {
			margin-top: 228rpx;
			color: #F9822C;
			font-size: 40rpx;
			line-height: 40rpx;
			font-weight: bold;
		}

		&-two {
			margin-top: 32rpx;
			color: #333;
			font-size: 26rpx;
			line-height: 26rpx;
		}

		&-three {
			margin-top: 80rpx;
			width: 600rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #F9822C;
			border-radius: 44rpx;
			color: #fff;
			font-size: 34rpx;
		}

		&-four {
			margin-top: 54rpx;
			width: 600rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			border: 1px solid #F9822C;
			background: #fff;
			color: #F9822C;
			border-radius: 44rpx;
			font-size: 34rpx;
		}
	}
</style>