612 lines
12 KiB
Vue
612 lines
12 KiB
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="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="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> |