cczg-lottery-activity/pages/simpleshop/order/order.vue

<template>
	<view class="content">
		<view class="orderinfo">
			<view class="label"><text>商品</text></view>
			<view class="cell-picture">
				<couponitem :data="coupon"></couponitem>
			</view>
			<view class="cell"><text>共一件，应付总额：{{coupon.integral}} 积分</text></view>
			<view class="cell">
				<text>花费积分</text>
				<text>{{coupon.integral}}</text>
			</view>
			<view class="cell">
				<text>我的积分</text>
				<text>{{userinfo.integral_Count}}</text>
			</view>
			<view class="info">
				<text>说明</text>
				<text>1:立减金兑换后无法退款</text>
				<text>2:立减金兑换后在使用微信支付时使用</text>
			</view>
		</view>
		<view class="orderbtn">
			<u-button shape='circle' size="normal" color="linear-gradient(90deg, #FF2D01, #FF6729)" type="primary"
				text="确认兑换" @click="confirm"></u-button>
			<u-button shape='circle' size="normal" color="#B2B2B2" type="primary" text="放弃兑换"
				@click="navigateBack"></u-button>
		</view>

		<u-overlay :show="show" class="overlay">
			<view class="slot-content">
				<view class="title">
					<text>恭喜您购买成功</text>
					<text>请到个人中心兑换立减金</text>
				</view>

				<u-button class="login-btn" type="primary" shape="circle" size="middle" color="#0BAFEA" text="去兑换"
					@click="getCoupon"></u-button>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import couponitem from '@/pages/simpleshop/components/couponitem_order.vue'
	import api from '@/api/api.js'
	import {acstore} from '@/store/activities.js'
	import {Debounce} from "@/util/common.js"
	export default {
		data() {
			return {
				model1: undefined,
				pirzeId:"",
				coupon: {
					id: 1,
					price: 15,
					title: "15元微信立减金",
					expiration_time: "2024-5-27 12:00:00",
					status: 1,
				},
				orderdata:{},
				show: false,
				userinfo:{},
				activityId:undefined
			}
		},
		components: {
			couponitem
		},
		methods: {
			navigateBack() {
				uni.switchTab({
					url:'/pages/simpleshop/index/index'
				})
			},
			confirm:Debounce(function(){
				api.createorder({
					activity_id: this.activityId,
					prize_id:this.pirzeId
				}).then((res)=>{
					if(res.data.code == 200){
						const data = res.data.data
						this.orderdata = data
						this.show = true
					}else{
						uni.showToast({
							title: res.data.message,
							icon: "none"
						})
					}
				})
			},1000),
			getCoupon() {
				this.show = false
				window.location.href = this.orderdata.link
			},
			getPirzeInfo(){
				api.getprizeinfo(this.pirzeId).then((res)=>{
					if(res.data.code == 200){
						const data = res.data.data
						this.coupon = data
					}else{
						uni.showToast({
							title: res.data.message,
							icon: "none"
						})
					}
				})
			},
			getAccountInfo(){
				api.getAccountInfo().then((res)=>{
					if(res.data.code == 200){
						const userinfo = res.data.data
						this.userinfo = res.data.data
					}else{
						uni.showToast({
							title: res.data.message,
							icon: "none"
						})
					}
				})
			},
		},
		onLoad(options){
			this.pirzeId = options.id
		},
		onShow(){
			acstore.dispatch('getactivitId').then((res)=>{
				this.activityId =  parseInt(res.activitId)
				this.getPirzeInfo()
				this.getAccountInfo()
			})
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		overflow-x: hidden;
	}

	.overlay {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.slot-content {
		margin: 0;
		width: 420rpx;
		height: 366rpx;
		background-image: url('@/static/images/orderconfirm.png');
		background-repeat: no-repeat;
		background-size: contain;
		padding: 68rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 37rpx;
	}

	.title {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		font-weight: 400;
		font-size: 28rpx;
		color: #0BAFEA;
		line-height: 36rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-top: 128rpx;
		gap: 8rpx;
	}

	.orderinfo {}

	.orderbtn {
		width: 694rpx;
		display: flex;
		flex-direction: column;
		gap: 32rpx;
		margin-bottom: 94rpx;
	}

	.label {
		font-weight: 500;
		font-size: 32rpx;
		color: #3D3D3D;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-left: 28rpx;
		margin-top: 40rpx;
		line-height: 94rpx;
	}

	.cell {
		border-bottom: 1rpx solid #EEEEEE;
		line-height: 94rpx;
		margin-left: 28rpx;
		margin-right: 28rpx;
		display: flex;
		justify-content: space-between;

		font-weight: 400;
		font-size: 28rpx;
		color: #3D3D3D;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.cell-picture {
		border-top: 1rpx solid #EEEEEE;
		border-bottom: 1rpx solid #EEEEEE;
		margin-left: 28rpx;
		margin-right: 28rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 222rpx;
	}

	.info {
		font-weight: 400;
		font-size: 22rpx;
		color: #999999;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-left: 28rpx;
		margin-right: 28rpx;

		display: flex;
		flex-direction: column;
		padding-top: 130rpx;
	}
</style>