Ai_GirlFriend/xuniYou/pages/index/gift.vue

<template>
	<view>
		<view class="body">
			<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>
			<view class="list">
				<image class="list_logo"
					src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/46d5916a03a8238f490572968c6c0745.png"
					mode="widthFix"></image>
				<view class="list_content">
					<image class="list_backA"
						src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/0194a1e146a0c97a2aef81e7cc503b9a.png"
						mode="widthFix"></image>
					<view class="list_module">
						<view class="list_detail fa sb">
							<view class="list_title">您的礼物都在这哦～</view>
							<!-- <view class="list_all fa">全部<image src="/static/images/gift_down.png"></image>
							</view> -->
						</view>
						<view class="list_body">
							<scroll-view class="list_scrollDetail" :scroll-y="true" :style="{ height: 'calc(32vh)' }"
								show-scrollbar>
								<view class="gift-container">
									<view class="list_item faj fc" v-for="(item, index) in giftOptions" :key="index"
										@click="giftClick(index)">
										<view class="list_image faj">
											<image class="list_border"
												src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/5b531717d4ecd0fd23b49d1541135f5a.png">
											</image>
											<image class="list_picture" :src="item.image && item.image.startsWith('http') ? item.image : global + item.image"></image>
											<!-- <image class="list_tag" v-if="index === 0"
												src="/static/images/gift_tag.png">
											</image> -->
										</view>
										<view class="list_name">{{ item.name }}</view>
									</view>
								</view>
							</scroll-view>
						</view>
						<view class="list_btn faj" @click="detailClick()">送Ta礼物</view>
					</view>
				</view>
			</view>
		</view>
		<view class="alert" v-if="giftStats">
			<view class="alert_content">
				<view class="alert_title">礼物详情
					<image src="/static/images/close.png" @click="closeClick()"></image>
				</view>
				<view class="alert_module fa">
					<image class="alert_image" :src="giftInfoOptions.image && giftInfoOptions.image.startsWith('http') ? giftInfoOptions.image : global + giftInfoOptions.image" mode="aspectFill"></image>
					<view class="alert_alert f1">
						<view class="alert_item fa">
							<image src="/static/images/star.png"></image>
							<view class="alert_name">{{ giftInfoOptions.name ? giftInfoOptions.name : '' }}</view>
							<image src="/static/images/star.png"></image>
						</view>
						<view class="alert_explain">送心愿瓶，帮ta实现心愿 </view>
						<view class="alert_add">+{{ giftInfoOptions.intimacy_value ? giftInfoOptions.intimacy_value :
							'0' }}亲密度</view>
						<view class="alert_money fx">{{ giftInfoOptions.price ? giftInfoOptions.price :
							'0' }}<text>金币</text></view>
					</view>
				</view>
				<view class="alert_number fa">
					<view class="alert_number_title">数量</view>
					<view class="alert_number_content fa">
						<image src="/static/images/minus.png" @click="decreaseNumber"></image>
						<input v-model="form.nums" type="number" min="1" placeholder-class="alert_number_value" />
						<image src="/static/images/add.png" @click="increaseNumber"></image>
					</view>
				</view>
				<view class="alert_balance">余额：{{ userInfo.money }}金币</view>
				<view class="alert_btn faj" @click="giveClick()">
					<!-- <text>购买</text> -->
					<text v-if="(giftInfoOptions.price*form.nums) > userInfo.money">充值并赠送</text>
					<text v-else>赠送Ta</text>
				</view>
			</view>
		</view>
		<view class="success faj" v-if="successStats">
			<view class="success_content faj">
				<image src="/static/images/success.png" mode="widthFix"></image>
				<view class="success_title">购买成功，亲密度+10</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	GiftsLists,
	GiftsGive,
	GetUserBasic,
	GiftsGiveApi,
	CreateGiftsOrderApi,
	JinbiPayApi,
} 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 {
			global: this.baseURL,
			giftStats: false,
			successStats: false,
			selectedAvatarIndex: 0, // 默认选中第一项
			form: {
				gifts_id: '',
				nums: 1,
				to_user_id: '',
			},
			giftOptions: [],
			giftInfoOptions: '',
			userInfo: {},
		}
	},
	onLoad(options) {
		this.form.to_user_id = options.userId
		this.giftsLists()
		this.getUserBasic()
		console.log(this.global)
	},
	methods: {
		getUserBasic() {
			GetUserBasic({}).then(res => {
				if (res.code == 1) {
					this.userInfo = res.data
				}
			})
		},
		giftsLists() {
			GiftsLists({}).then(res => {
				if (res.code == 1) {
					this.giftOptions = res.data.data
					console.log(this.giftOptions)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
				}
			})
		},
		// 赠送礼物
		giftsGive() {
			let url = ''
			// form.to_user_id 为空时，为赠送礼物给女友   	有值是赠送给好友
			if (this.form.to_user_id == '' || this.form.to_user_id == undefined) {
				url = GiftsGiveApi
			} else {
				url = GiftsGive
			}
			url(this.form).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: '赠送成功',
						icon: 'none',
						position: 'top'
					})
					setTimeout(() => {
						this.getUserBasic()
						this.giftStats = false
					}, 1000)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
				}
			})
		},
		back() {
			uni.navigateBack({
				delta: 1,
			});
		},
		selectAvatar(index) {
			this.selectedAvatarIndex = index;
		},
		detailClick() {
			// this.giftStats = true
			uni.showToast({
				title: '请选择要赠送的礼物',
				icon: 'none',
				position: 'top'
			})
		},
		giftClick(index) {
			this.giftInfoOptions = this.giftOptions[index]
			console.log(this.giftInfoOptions)
			if (this.giftStats) {
				this.giftStats = false
			} else {
				this.giftStats = true
			}
		},
		giveClick() {
			this.form.gifts_id = this.giftInfoOptions.id
			console.log(this.giftInfoOptions.price * this.form.nums)
			if ((this.giftInfoOptions.price * this.form.nums) > this.userInfo.money) {
				this.giftsTopUp()
			} else {
				this.giftsGive()
			}
		},
		// 礼物充值
		giftsTopUp() {
			CreateGiftsOrderApi({
				gifts_id: this.giftInfoOptions.id,
				nums: this.form.nums,
				pay_type: 'miniWechat'
			}).then(res => {
				if (res.code == 1) {
					this.goPay(res.data.out_trade_no)
				}
			})
		},
		// 模拟支付
		goPay(orderId) {
			JinbiPayApi({
				out_trade_no: orderId
			}).then(res => {
				if (res.code == 1) {
					setTimeout(() => {
						this.giftsGive()
					}, 1000)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
				}
			})
		},
		closeClick() {
			this.giftStats = false
			this.form.nums = 1
			this.giftInfoOptions = ''
		},
		increaseNumber() {
			this.form.nums = parseInt(this.form.nums) || 0;
			this.form.nums++;
		},
		decreaseNumber() {
			this.form.nums = parseInt(this.form.nums) || 0;
			if (this.form.nums > 0) {
				this.form.nums--;
			}
		},
		showsChat() {
			uni.showModal({
				// title: '提示',
				content: '栏位已满，请删除后再使用？',
				success: (res) => {
					if (res.confirm) {
						this.form.orderDetailList.splice(e, 1)
					}
				},
				fail: (res) => {
					console.log(res)
				}
			})
		}
	}
}
</script>

<style>
.body {
	position: relative;
}

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


.body {
	position: relative;
}

.list {
	position: relative;
}

.list_logo {
	margin: -140rpx 0 0 0;
	width: 100%;
	height: 556rpx;
	display: block;
}

.list_content {
	position: relative;
}

.list_backA {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
	display: block;
}

.list_module {
	position: relative;
	padding: 46rpx 34rpx;
}

.list_detail {
	position: relative;
}

.list_title {
	font-weight: 400;
	font-size: 32rpx;
	color: #CC9DFF;
	line-height: 50rpx;
}

.list_all {
	padding: 5rpx 16rpx 5rpx 28rpx;
	font-weight: 400;
	font-size: 28rpx;
	color: #F661B5;
	line-height: 50rpx;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 78rpx;
}

.list_all image {
	width: 36rpx;
	height: 36rpx;
}

.list_body {
	position: relative;
	margin: 54rpx 0 0 0;
}

.gift-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.list_item {
	position: relative;
	width: 30%;
	margin-bottom: 40rpx;
}

.list_scrollDetail {
	position: relative;
}

.list_image {
	position: relative;
	width: 176rpx;
	height: 176rpx;
}

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

.list_picture {
	position: relative;
	width: 120rpx;
	height: 120rpx;
	display: block;
}

.list_tag {
	position: absolute;
	right: -40rpx;
	top: -10rpx;
	width: 68rpx;
	height: 66rpx;
}

.list_name {
	margin: 8rpx 0 0 0;
	font-weight: 500;
	font-size: 30rpx;
	color: #F661B5;
	line-height: 50rpx;
	text-align: center;
}

.list_btn {
	margin: 150rpx 0 0 0;
	padding: 24rpx 0;
	font-weight: 400;
	font-size: 32rpx;
	color: #FFFFFF;
	line-height: 50rpx;
	background: linear-gradient(135deg, #F0BDDD 0%, #A89CF7 100%);
	border-radius: 12rpx;
}

.alert {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	bottom: 0;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.2);
	z-index: 2;
}

.alert_content {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(180deg, #EDD6F5 0%, #FFFFFF 100%);
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	padding: 46rpx 40rpx 68rpx 40rpx;
}

.alert_title {
	position: relative;
	font-weight: 500;
	font-size: 36rpx;
	color: #333333;
	line-height: 50rpx;
	text-align: center;
}

.alert_title image {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 30rpx;
	height: 30rpx;
	margin: auto 0;
}

.alert_module {
	position: relative;
	margin: 68rpx 0 58rpx 0;
}

.alert_image {
	width: 256rpx;
	height: 256rpx;
	display: block;
}

.alert_alert {
	position: relative;
	margin: 0 0 0 62rpx;
}

.alert_item {
	position: relative;
	margin: 0 0 0 44rpx;
}

.alert_item image {
	width: 36rpx;
	height: 48rpx;
}

.alert_name {
	margin: 0 14rpx;
	font-weight: 500;
	font-size: 32rpx;
	color: #9779FA;
	line-height: 50rpx;
}

.alert_explain {
	margin: 18rpx 0 0 0;
	font-weight: 400;
	font-size: 26rpx;
	color: #9779FA;
	line-height: 50rpx;
}

.alert_add {
	margin: 0 0 0 80rpx;
	font-weight: 400;
	font-size: 26rpx;
	color: #9779FA;
	line-height: 50rpx;
}

.alert_money {
	margin: 28rpx 0 0 0;
	font-weight: 700;
	font-size: 44rpx;
	color: #FF0000;
	line-height: 50rpx;
}

.alert_money text {
	font-size: 28rpx;
	line-height: 65rpx;
}

.alert_number {
	position: relative;
}

.alert_number_title {
	font-weight: 400;
	font-size: 32rpx;
	color: #222222;
	line-height: 50rpx;
}

.alert_number_content {
	margin: 0 0 0 100rpx;
	position: relative;
}

.alert_number_content image {
	width: 64rpx;
	height: 64rpx;
}

.alert_number_content input {
	padding: 0 8rpx;
	width: 78rpx;
	font-weight: 500;
	font-size: 28rpx;
	color: #000000;
	line-height: 40rpx;
	text-align: center;
}

.alert_number_value {
	color: #333333;
}

.alert_balance {
	margin: 78rpx 0 26rpx 0;
	font-weight: 500;
	font-size: 30rpx;
	color: #909090;
	line-height: 50rpx;
	text-align: center;
}

.alert_btn {
	position: relative;

	padding: 26rpx 112rpx;
	font-weight: 500;
	font-size: 30rpx;
	line-height: 50rpx;
	border-radius: 12rpx;
	color: #FFFFFF;
	background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%), #D8D8D8;
}

.success {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: 2;
}

.success_content {
	position: relative;
	padding: 22rpx 38rpx;
	background: #9779FA;
	border-radius: 20rpx;
}

.success image {
	margin: 0 20rpx 0 0;
	width: 32rpx;
	height: 32rpx;
}

.success_title {
	font-weight: 500;
	font-size: 32rpx;
	color: #FFFFFF;
	line-height: 50rpx;
}
</style>