Ai_GirlFriend/xuniYou/pages/index/frequency.vue

<template>
	<view class="page fc">
		<uni-nav-bar fixed statusBar left-icon="left" background-color="transparent" :border="false" @clickLeft="back"
			title="次数"></uni-nav-bar>
		<image class="back"
			src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/5199a68fb335c7d892665b66637f60c4.png"
			mode="widthFix"></image>
		<scroll-view scroll-y="true" class="scroll-view f1" show-scrollbar>
			<view class="body">
				<view class="list">
					<view class="list_content">
						<view class="list_dight">{{ userInfo.clothes_num }}</view>
						<view class="list_title">剩余次数</view>
					</view>
					<view class="list_module">
						<view class="list_detail" v-for="(item, index) in frequencyOptions" :key="index"
							@click="detailClick(item.id)">
							<image
								:src="detailIndex == item.id ? '/static/images/frequency_backB.png' : '/static/images/frequency_backA.png'"
								mode="widthFix"></image>
							<view class="list_item">
								<view class="list_money fx">{{ item.jinbi }}<text>金币</text></view>
								<view class="list_number fx">{{ item.num }}<text>次</text></view>
							</view>
						</view>
					</view>
				</view>
				<view class="opt" @click="exchangeCount()">
					<view class="opt_module">
						<view class="opt_data">
							<view class="opt_btn faj">
								购买次数
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import {
	CountPackageApi,
	ExchangeCountApi,
	GetUserBasic
} from '@/utils/api.js'
import notHave from '@/components/not-have.vue';
import topSafety from '@/components/top-safety.vue';
export default {
	components: {
		notHave,
		topSafety,
	},
	data() {
		return {
			frequencyOptions: [

			],
			detailIndex: '',
			userInfo: {}
		}
	},
	onLoad() {
		this.getCountPackage()
		this.getUserBasic()
	},
	methods: {
		getUserBasic() {
			GetUserBasic({}).then(res => {
				if (res.code == 1) {
					this.userInfo = res.data
				}
			})
		},
		// 兑换次数
		exchangeCount() {
			if (!this.detailIndex) {
				uni.showToast({
					title: '请选择次数',
					icon: 'none',
					position: 'top'
				})
				return
			}
			ExchangeCountApi({
				count_package_id: this.detailIndex
			}).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: '兑换成功',
						icon: 'none',
						position: 'top'
					})
					setTimeout(() => {
						this.getUserBasic()
						// uni.navigateBack({
						// 	delta: 1,
						// });
					}, 1000)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
				}
			})
		},
		// 获取换装套餐
		getCountPackage() {
			CountPackageApi({}).then(res => {
				if (res.code == 1) {
					this.frequencyOptions = res.data
					this.detailIndex = res.data[0].id
				}
			})
		},
		back() {
			uni.navigateBack({
				delta: 1,
			});
		},
		detailClick(index) {
			this.detailIndex = index;
			console.log(index);
		},
	}
}
</script>
<style>
page {
	background: #F6F8FA;
}
</style>
<style>
.page {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

.scroll-view {
	overflow: hidden;
}

.body {
	position: relative;
	padding: 0 50rpx 50rpx 50rpx;
}

.back {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 1624rpx;
	display: block;
}

.list {
	position: relative;
}

.list_content {
	position: relative;
	padding: 68rpx 0 0 0;
	text-align: center;
}

.list_dight {
	font-weight: 700;
	font-size: 72rpx;
	color: #222222;
	line-height: 50rpx;
}

.list_title {
	margin: 30rpx 0 0 0;
	font-weight: 500;
	font-size: 28rpx;
	color: #6C6C6C;
	line-height: 50rpx;
}

.list_module {
	position: relative;
	margin: 108rpx 0 0 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 50rpx;
	grid-row-gap: 40rpx;
}

.list_detail {
	position: relative;
}

.list_detail image {
	width: 100%;
	display: block;
}

.list_item {
	position: absolute;
	left: 62rpx;
	top: 30rpx;
}

.list_money {
	font-weight: 700;
	font-size: 52rpx;
	color: #8449FE;
	line-height: 50rpx;
}

.list_money text {
	font-size: 28rpx;
	color: #9E9E9E;
	line-height: 65rpx;
}

.list_number {
	font-weight: 700;
	font-size: 52rpx;
	color: #8449FE;
	line-height: 50rpx;
}

.list_number text {
	font-size: 28rpx;
	color: #9E9E9E;
	line-height: 65rpx;
}

.opt {
	position: relative;
	height: 150rpx;
}

.opt_module {
	position: fixed;
	padding: 5rpx 0 70rpx 0;
	height: 85rpx;
	width: 100%;
	bottom: 0;
	left: 0;
	box-sizing: content-box;
	z-index: 2;
}

.opt_data {
	padding: 5rpx 50rpx;
	font-size: 28rpx;
}

.opt_btn {
	padding: 24rpx 0;
	font-weight: 400;
	font-size: 32rpx;
	color: #FFFFFF;
	line-height: 50rpx;
	background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
	border-radius: 12rpx;
}
</style>