shang/yfs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

123

Browse Source
This commit is contained in:
zpc 2025-04-03 20:57:20 +08:00
parent 6059a4a665
commit 17717082fb
3 changed files with 758 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

435
components/order-confirm-popup/order-confirm-popup-flw.vue Normal file
View File

@ -0,0 +1,435 @@
<template>
<uni-popup ref="popup" type="bottom">
<view class="buy-pop relative">
<view class="buy-pop-hd">
<view class="" style="width: 60rpx"></view>
<text class="" style="font-size: 28rpx">确认订单</text>
<view class="close icon" @click="$emit('close')">
<image :src="$img('/static/img/close2.png')" style="width: 24rpx; height: 24rpx" lazy-load></image>
</view>
</view>
<view class="buy-card">
<view class="buy-info">
<view class="pic flex">
<image class="img100" :src="orderData.goods.imgurl_detail"></image>
</view>
<view class="info-r">
<view class="title hang1">
{{ orderData.goods.title }}
</view>
<view class="type">类型:虚拟商品</view>
<view class="price-num">
<view class="price">
<template v-if="orderData.goods.type != 5">¥</template>
<text>{{ orderData.goods.price }}</text>
<template v-if="orderData.goods.type == 5">{{ currencyName2 }}</template>
</view>
<view class="num">×1</view>
</view>
</view>
</view>
</view>
<view class="pay-type" v-if="pay_balance" @click="changePayMethod('useMoney')">
<view class="title flex align-center">
使用{{ balanceName }}{{ deduction_name }}¥{{ orderData.use_money }}
<text style="color: #676767; font-size: 16rpx; margin-left: 10rpx;">
(剩余:{{ orderData.money }})</text>
</view>
<view class="icon">
<image v-if="useMoney" :src="$img1('common/check_act.png')" lazy-load></image>
<image v-else :src="$img1('common/check.png')" lazy-load></image>
</view>
</view>
<view class="pay-type" v-if="pay_currency" @click="changePayMethod('useIntegral')">
<view class="title flex align-center">
使用{{ currencyName }}{{ deduction_name }}¥{{ orderData.use_integral_money }}
<text style="color: #676767; font-size: 16rpx; margin-left: 10rpx;">(剩余:{{ orderData.integral
}})</text>
</view>
<view class="icon">
<image v-if="useIntegral" :src="$img1('common/check_act.png')" lazy-load></image>
<image v-else :src="$img1('common/check.png')" lazy-load></image>
</view>
</view>
<view class="pay-type" v-if="pay_currency2" @click="changePayMethod('useMoney2')">
<view class="title flex align-center">
使用{{ currencyName2 }}{{ deduction_name }}¥{{ (orderData.use_score / 100).toFixed(2) }} <text
style="color: #676767; font-size: 16rpx; margin-left: 10rpx;">
(剩余:{{ orderData.score }})</text>
</view>
<view class="icon">
<image v-if="useMoney2" :src="$img1('common/check_act.png')" lazy-load></image>
<image v-else :src="$img1('common/check.png')" lazy-load></image>
</view>
</view>
<view class="agree" @click="$emit('toggle-agree')">
<view class="icon">
<image v-if="isAgree" :src="$img1('common/check_act.png')" lazy-load></image>
<image v-else :src="$img1('common/check.png')" lazy-load></image>
</view>
我已满18岁,阅读并同意
<text @click.stop="$c.to({ url: '/pages/guize/guize?type=4' })">
《用户协议》
</text>
<text @click.stop="$c.to({ url: '/pages/guize/guize?type=5' })">
《隐私政策》
</text>
</view>
<view class="pay-btn" @click="$emit('confirm')">
<text>确认支付</text>
<text>{{ ` ¥${orderData.price}` }}</text>
</view>
</view>
</uni-popup>
</template>
<script>
export default {
name: "OrderConfirmPopupFlw",
props: {
// 订单数据
orderData: {
type: Object,
required: true
},
// 是否使用余额
useMoney: {
type: Boolean,
default: true
},
//是否使用余额2
useMoney2: {
type: Boolean,
default: true
},
// 是否使用积分
useIntegral: {
type: Boolean,
default: true
},
// 优惠券数据
couponData: {
type: [Object, String],
default: () => null
},
// 是否同意协议
isAgree: {
type: Boolean,
default: true
},
// 规则数据
sendRuleData: {
type: String,
default: ''
},
// 购买数量
buyNum: {
type: Number,
default: 1
}
},
data() {
//pageData.goods.type
return {
currencyName: '',
currencyName2: '',
balanceName: '',
pay_balance: 1,
pay_coupon: 1,
pay_currency: 1,
pay_currency2: 1,
pay_wechat: 1,
is_deduction: 1,
deduction_name: ''
}
},
created() {
console.log('aaaaaaaaaaa');
// 获取货币名称和余额名称
this.currencyName = this.$config.getAppSetting('currency1_name') || 'UU币';
this.currencyName2 = this.$config.getAppSetting('currency2_name') || '达达卷';
this.balanceName = this.$config.getAppSetting('balance_name') || '余额';
let goodType = this.$config.getGoodTypeFind(this.orderData.goods.type);
//是否显示余额支付
this.pay_balance = goodType.pay_balance;
//是否显示优惠卷
this.pay_coupon = goodType.pay_coupon;
//是否显示货币支付
this.pay_currency = goodType.pay_currency;
//是否显示货币2支付
this.pay_currency2 = goodType.pay_currency2;
//是否显示微信支付
this.pay_wechat = goodType.pay_wechat;
//抵扣还是支付
this.is_deduction = goodType.is_deduction;
if (this.is_deduction == 1) {
this.deduction_name = '抵扣';
} else {
this.deduction_name = '支付';
}
},
methods: {
/**
* 打开弹窗
*/
open() {
this.$refs.popup.open();
},
/**
* 关闭弹窗
*/
close() {
this.$refs.popup.close();
},
/**
* 切换支付方式
* @param {String} method 支付方式
*/
changePayMethod(method) {
if (this.is_deduction == 0) {
// 如果是支付模式，检查可用的支付方式数量
let availablePayMethods = 0;
if (this.pay_balance) availablePayMethods++;
if (this.pay_currency) availablePayMethods++;
if (this.pay_currency2) availablePayMethods++;
if (this.pay_wechat) availablePayMethods++;
// 如果只有一种支付方式可用，则不允许切换
if (availablePayMethods <= 1) {
return;
}
}
this.$emit('change-pay', method);
},
}
}
</script>
<style lang="scss">
.buy-pop {
padding: 0 30rpx;
box-sizing: border-box;
background: #f7f7f7;
padding-bottom: 30rpx;
border-radius: 16rpx 16rpx 0rpx 0rpx;
&::after {
content: "";
position: absolute;
top: -62rpx;
left: 0;
width: 750rpx;
height: 62rpx;
}
.buy-pop-hd {
padding: 20rpx 0;
padding-left: 10rpx;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 40rpx;
font-weight: 500;
color: #333333;
.close {
width: 60rpx;
height: 60rpx;
}
}
.card-row {
padding: 16rpx 0;
display: flex;
height: 82rpx;
justify-content: space-between;
align-items: center;
margin-top: 24rpx;
border-radius: 16rpx;
background-color: #fff;
.title {
font-size: 20rpx;
font-family: Source Han Sans CN;
font-weight: 400;
margin-left: 24rpx;
color: #333333;
}
.row-r {
display: flex;
align-items: center;
font-size: 24rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #999999;
.icon {
width: 10rpx;
height: 17rpx;
color: #999999;
margin-left: 10rpx;
margin-right: 24rpx;
}
}
}
.buy-card {
border-radius: 20rpx;
padding: 30rpx 30rpx 10rpx;
background: #ffffff;
.buy-info {
display: flex;
.pic {
width: 190rpx;
height: 190rpx;
border-radius: 10rpx;
}
.info-r {
width: calc(100% - 190rpx);
box-sizing: border-box;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
padding: 10rpx 0 10rpx 30rpx;
.title {
font-size: 24rpx;
font-weight: 400;
color: #333333;
}
.type {
font-size: 20rpx;
font-weight: 400;
color: #999999;
}
.price-num {
display: flex;
justify-content: space-between;
align-items: center;
.price {
font-weight: 500;
font-size: 16rpx;
color: #333333;
text {
font-size: 28rpx;
}
}
.num {
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #999999;
}
}
}
}
}
.pay-type {
padding: 30rpx 24rpx;
border-radius: 20rpx;
margin-top: 20rpx;
display: flex;
align-items: center;
background: #ffffff;
.icon {
width: 32rpx;
height: 32rpx;
}
.title {
flex: 1;
font-size: 24rpx;
font-weight: 500;
color: #333333;
}
}
.rule {
padding: 20rpx;
border-radius: 20rpx;
box-sizing: border-box;
margin: 20rpx 0 0;
height: 160rpx;
background: #f9f8e1;
border-radius: 20rpx;
.rule-inner {
max-height: 120rpx;
font-size: 20rpx;
font-weight: 400;
color: #333333;
}
}
.agree {
display: flex;
margin-top: 30rpx;
font-size: 24rpx;
font-weight: 400;
color: #999999;
line-height: 32rpx;
.icon {
width: 32rpx;
height: 32rpx;
margin-right: 10rpx;
}
}
.pay-btn {
margin: 30rpx auto 0;
width: 686rpx;
height: 84rpx;
background: url($imgurl + "common/payBtn.png") no-repeat 0 0 / 100% 100%;
display: flex;
margin-bottom: 90rpx;
align-items: center;
justify-content: center;
font-weight: 500;
color: #cdef27;
>text:nth-child(1) {
font-size: 28rpx;
}
>text:nth-child(2) {
font-size: 36rpx;
}
}
}
</style>

4
components/order-confirm-popup/order-confirm-popup.vue
View File

@ -218,8 +218,8 @@ export default {
},
created() {
// 获取货币名称和余额名称
this.currencyName = this.$config.getAppSetting('currency1_name') || '货币';
this.currencyName2 = this.$config.getAppSetting('currency2_name') || '积分';
this.currencyName = this.$config.getAppSetting('currency1_name') || 'UU币';
this.currencyName2 = this.$config.getAppSetting('currency2_name') || '达达卷';
this.balanceName = this.$config.getAppSetting('balance_name') || '余额';
let goodType = this.$config.getGoodTypeFind(this.pageData.goods.type);
//是否显示余额支付

549
pages/infinite/bonus_house_details.vue
View File

@ -47,16 +47,25 @@
<!-- 赏品预览 -->
<view v-if="currentTab == 0" scroll-y="true" class="" style="width: 100%; height: 900rpx;">
<view style="height:30rpx;"></view>
<view style="height:30rpx">
<view
style="display: flex; justify-content: center; align-items: center; height:75%;margin-top: 10rpx;">
<view style="width: 280rpx; text-align: left;">
<text style="color: #333333; font-size: 24rpx;">参考价:{{ getGoodsListName }}</text>
</view>
</view>
</view>
<view class="" style="width: 544rpx; height: 500rpx; margin: 0 auto 0;">
<!-- <special-banner :banner-list="bannerList" :swiper-config="swiperConfig"></special-banner> -->
<swiper class="swiper-box" :current="currentItemId" :style="{ height: '500rpx' }" :autoplay="false"
:indicator-dots="false" :circular="true" :interval="3000">
<swiper-item v-for="(item, index) in goodsList" :key="index" :item-id="item.index">
<view style="display: flex; justify-content: center; align-items: center; height: 80%;">
<view
style="display: flex; justify-content: center; align-items: center; height:75%;margin-top: 10rpx;">
<view
style="background-image: url('https://mh.shhuanmeng.com/flw_bj.png');background-size: 100% 100%; width: 280rpx; height:352rpx; display: flex; justify-content: center; align-items: center;z-index: 2;">
<image :src="item.imgurl_detail" style="width: 280rpx; height:352rpx;"></image>
<image :src="item.imgurl_detail" style="width:154rpx; height:166rpx;"></image>
</view>
</view>
<view
@ -67,221 +76,144 @@
</view>
<scroll-view scroll-y="true" style="width: 100%; height:400rpx;">
<view class="grid-container">
<view @click=" currentItemId=item.index" class="grid-item column align-center" v-for="(item, index) in goodsList"
:key="index" style="">
<image style="width: 112rpx; height: 112rpx;border-radius:25rpx;" :src="item.imgUrl">
</image>
<text style="color: #999999; font-size: 16rpx; margin-top: 16rpx;">{{ item.title }}</text>
<view @click=" currentItemId = item.index" class="grid-item column align-center"
v-for="(item, index) in goodsList" :key="index" style="">
<image style="width: 112rpx; height: 112rpx;border-radius:25rpx;" :src="item.imgUrl">
</image>
<text style="color: #999999; font-size: 16rpx; margin-top: 16rpx;">{{ item.title }}</text>
</view>
</view>
</view>
</scroll-view>
</view>
<scroll-view v-if="currentTab == 1" scroll-y="true" style="width: 100%; height: 890rpx; padding: 24rpx;">
<view class="row align-center" v-for="(item, index) in participantList" :key="index"
style="height: 76rpx; margin-bottom: 24rpx;">
<view class="center" style="width: 30rpx;">
<text style="color: #999999; font-size: 20rpx;">{{ index + 1 }}</text>
</view>
<image :src="item.avatar"
style="width: 76rpx; height: 76rpx; background-color: #D8D8D8; border-radius: 50%; margin-left: 24rpx;"
mode=""></image>
<view class="column" style="margin-left: 16rpx;">
<text style="color: #333333; font-size: 20rpx;">{{ item.name }}</text>
<text style="color: #999999; font-size: 16rpx; margin-top: 12rpx;">{{ item.time }}</text>
</view>
</scroll-view>
</view>
</scroll-view>
<scroll-view v-if="currentTab == 2" scroll-y="true" style="width: 100%; height: 890rpx; padding: 24rpx;">
<view class="row align-center relative" v-for="(item, index) in awardRecordList" :key="index"
style="height: 76rpx; margin-bottom: 24rpx;">
<view class="center" style="width: 30rpx;">
<text style="color: #999999; font-size: 20rpx;">{{ index + 1 }}</text>
</view>
<image :src="item.avatar"
style="width: 76rpx; height: 76rpx; background-color: #D8D8D8; border-radius: 50%; margin-left: 24rpx;"
mode=""></image>
<view class="column" style="margin-left: 16rpx;">
<text style="color: #333333; font-size: 20rpx;">{{ item.name }}</text>
<text style="color: #999999; font-size: 16rpx; margin-top: 12rpx;">{{ item.time }}</text>
</view>
<view class="row center" style="position: absolute; right: 56rpx;">
<image v-if="index == 0" :src="$img1('checkin/Jackpot.png')" style="width: 46rpx; height: 26rpx;"
<scroll-view v-if="currentTab == 1" scroll-y="true" style="width: 100%; height: 890rpx; padding: 24rpx;">
<view class="row align-center" v-for="(item, index) in participantList" :key="index"
style="height: 76rpx; margin-bottom: 24rpx;">
<view class="center" style="width: 30rpx;">
<text style="color: #999999; font-size: 20rpx;">{{ index + 1 }}</text>
</view>
<image :src="item.avatar"
style="width: 76rpx; height: 76rpx; background-color: #D8D8D8; border-radius: 50%; margin-left: 24rpx;"
mode=""></image>
<text style="color: #999999; font-size: 20rpx; margin-left: 16rpx;">晶体*1500</text>
<view class="column" style="margin-left: 16rpx;">
<text style="color: #333333; font-size: 20rpx;">{{ item.name }}</text>
<text style="color: #999999; font-size: 16rpx; margin-top: 12rpx;">{{ item.time }}</text>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="column align-center" style="width: 100%; height: 198rpx; background-color: #fff; margin-top: 8rpx;">
</scroll-view>
<scroll-view v-if="currentTab == 2" scroll-y="true" style="width: 100%; height: 890rpx; padding: 24rpx;">
<view class="row align-center relative" v-for="(item, index) in awardRecordList" :key="index"
style="height: 76rpx; margin-bottom: 24rpx;">
<view class="center"
style="width: 340rpx; height: 84rpx; background-color: #D8FD24; border-radius: 16rpx; margin-top: 32rpx;">
<text style="color: #333333; font-size: 32rpx; font-weight: 600;">马上参与</text>
<view class="center" style="width: 30rpx;">
<text style="color: #999999; font-size: 20rpx;">{{ index + 1 }}</text>
</view>
<image :src="item.avatar"
style="width: 76rpx; height: 76rpx; background-color: #D8D8D8; border-radius: 50%; margin-left: 24rpx;"
mode=""></image>
<view class="column" style="margin-left: 16rpx;">
<text style="color: #333333; font-size: 20rpx;">{{ item.name }}</text>
<text style="color: #999999; font-size: 16rpx; margin-top: 12rpx;">{{ item.time }}</text>
</view>
<view class="row center" style="position: absolute; right: 56rpx;">
<image v-if="index == 0" :src="$img1('checkin/Jackpot.png')"
style="width: 46rpx; height: 26rpx;" mode=""></image>
<text style="color: #999999; font-size: 20rpx; margin-left: 16rpx;">晶体*1500</text>
</view>
</view>
</scroll-view>
</view>
<text style="color: #8A8A8A; font-size: 20rpx; font-weight: 400; margin-top: 12rpx;">距离开奖时间：{{ remainingTime
}}</text>
<view class="column align-center"
style="width: 100%; height: 198rpx; background-color: #fff; margin-top: 8rpx;">
</view>
<view class="center"
style="width: 340rpx; height: 84rpx; background-color: #D8FD24; border-radius: 16rpx; margin-top: 32rpx;"
@click="handleButtonClick">
<text style="color: #333333; font-size: 32rpx; font-weight: 600;">{{ buttonText }}</text>
</view>
<text style="color: #8A8A8A; font-size: 20rpx; font-weight: 400; margin-top: 12rpx;">{{ remainingTime
}}</text>
</view>
<OrderConfirmPopupFlw v-if="orderData.goods != null" ref="buyPop" :order-data="orderData" :use-money="useMoney"
@change-pay="changePay" :use-money2="useMoney2" :use-integral="useIntegral" :is-agree="isAgree"
:send-rule-data="sendRuleData" :buy-num="1" @close="close('buyPop')" @toggle-agree="isAgree = !isAgree"
@confirm="$c.noDouble1(confirmSubmit, [1, 1], loading)">
</OrderConfirmPopupFlw>
</view>
</template>
<script>
import OrderConfirmPopupFlw from '@/components/order-confirm-popup/order-confirm-popup-flw.vue';
export default {
components: {
OrderConfirmPopupFlw
},
data() {
return {
currentItemId: 0,
bannerList: [{
picture: 'https://mh.shhuanmeng.com/topic/20250402/e02ce743c5545f53e905a276f2c36249.png',
title: '七夕将至：时光足够久，韧性也能炖出味',
description: '一万年太久，就现在，给你爱',
path: ''
}, {
picture: 'https://mh.shhuanmeng.com/topic/20250402/e02ce743c5545f53e905a276f2c36249.png',
title: '新菜上架：无边海洋，找到顺眼的那尾鱼',
description: '花中樱，鱼乃鲷花中樱，鱼乃鲷',
path: ''
}, {
picture: 'https://mh.shhuanmeng.com/topic/20250402/e02ce743c5545f53e905a276f2c36249.png',
title: '在湘西的烟火气里，发现苗族少女的神明',
description: '取材自湘西苗族传统的烟熏文化',
path: ''
}, {
picture: 'https://mh.shhuanmeng.com/topic/20250402/e02ce743c5545f53e905a276f2c36249.png',
title: '福利降临，陪伴独自行走的丰盛旅程',
description: '在自己的小世界里，日日好日，夜夜好清宵',
path: ''
}],
swiperConfig: {
indicatorDots: true,
indicatorColor: 'rgba(255, 255, 255, .4)',
indicatorActiveColor: 'rgba(255, 255, 255, 1)',
autoplay: false,
interval: 3000,
duration: 300,
circular: true,
previousMargin: '150rpx',
nextMargin: '150rpx'
},
currentTab: 0,
bonusData: {
title: "新人消费满5元福利屋",
tips: "消费返利（所有参与者有机会获得奖励",
time: "2025-03-10 14:00",
popularity: 52, // 热度
popularity: 0, // 热度
open_time: '2025-03-10 14:00',//开奖时间
start_time: '2025-03-10 14:00',//开始时间
end_time: '2025-03-10 10:00',//结束时间
choujiang_xianzhi: 0 // 抽奖限制金额
},
goodsList: [],
participantList: [{
avatar: "", // 头像
name: "微信名",
time: "2025-03-10 14:00"
}, {
avatar: "",
name: "微信名",
time: "2025-03-10 14:00"
}, {
avatar: "",
name: "微信名",
time: "2025-03-10 14:00"
}, {
avatar: "",
name: "微信名",
time: "2025-03-10 14:00"
}, {
avatar: "",
name: "微信名",
time: "2025-03-10 14:00"
}, {
avatar: "",
name: "微信名",
time: "2025-03-10 14:00"
}, {
avatar: "",
name: "微信名",
time: "2025-03-10 14:00"
}, {
avatar: "",
name: "微信名",
time: "2025-03-10 14:00"
}, {
avatar: "",
name: "微信名",
time: "2025-03-10 14:00"
}, {
avatar: "",
name: "微信名",
time: "2025-03-10 14:00"
}, {
avatar: "",
name: "微信名",
time: "2025-03-10 14:00"
}],
awardRecordList: [{
avatar: "", // 头像
name: "微信名",
time: "2025-03-10 14:00"
}, {
avatar: "",
name: "微信名",
time: "2025-03-10 14:00"
}, {
avatar: "",
name: "微信名",
time: "2025-03-10 14:00"
}, {
avatar: "",
name: "微信名",
time: "2025-03-10 14:00"
}, {
avatar: "",
name: "微信名",
time: "2025-03-10 14:00"
}, {
avatar: "",
name: "微信名",
time: "2025-03-10 14:00"
}, {
avatar: "",
name: "微信名",
time: "2025-03-10 14:00"
}, {
avatar: "",
name: "微信名",
time: "2025-03-10 14:00"
}, {
avatar: "",
name: "微信名",
time: "2025-03-10 14:00"
}, {
avatar: "",
name: "微信名",
time: "2025-03-10 14:00"
}, {
avatar: "",
name: "微信名",
time: "2025-03-10 14:00"
}],
participantList: [],
awardRecordList: [],
tabList: [
"赏品预览", "参与人数", "赏品记录"
],
goods_id: 0,
remainingTime: "0天00:00:00",
countdownTimer: null,
endTime: null,
currentServerTime: null
currentServerTime: null,
buttonText: "马上参与",
user_total_consumption: 0,// 用户抽奖范围内消耗的金额
orderData: {
goods: null,
"use_integral": 0,
"use_integral_money": 0,
"money": 0,
"use_money": 0,
"score": "0.00",
"use_score": 0,
},
pageData: "",
logList: [],
sendRuleData: "",
useMoney: true,
useIntegral: false,
useMoney2: false,
isAgree: true,
loading: false,
user_count: 0//用户已经购买的次数
}
},
computed: {
getGoodsListName() {
if (this.goodsList.length > 0) {
return this.goodsList[this.currentItemId].title
}
return 'aaa';
}
},
async onLoad(options) {
console.log(options)
this.goods_id = options.goods_id
await this.load(options.goods_id)
},
methods: {
@ -296,16 +228,26 @@ export default {
console.log(res)
if (res.status === 1 && res.data) {
const { goods, goodslist, join_count, current_time, status, status_text } = res.data;
const { goods, goodslist, join_count, current_time, status, status_text, user_consumption, user_count } = res.data;
this.orderData.goods = goods;
// 更新福利屋基本信息
this.bonusData = {
title: goods.title,
tips: goods.goods_describe,
time: goods.open_time,
popularity: join_count || 0
time: goods.flw_start_time + '-' + goods.flw_end_time,
open_time: goods.open_time,
start_time: goods.flw_start_time,
end_time: goods.flw_end_time,
choujiang_xianzhi: goods.choujiang_xianzhi,
popularity: join_count || 0,
quanju_xiangou: goods.quanju_xiangou
};
if (user_consumption != null) {
this.user_total_consumption = user_consumption.total_consumed;
}
if (user_count != null) {
this.user_count = user_count;
}
let index = 0;
this.goodsList.splice(0, this.goodsList.length)
// 更新赏品列表
@ -326,20 +268,10 @@ export default {
index++;
}
})
// this.goodsList = goodslist.map(item => ({
// imgUrl: item.imgurl,
// price: item.title,
// id: item.id,
// stock: item.stock,
// realPrice: item.price,
// sortIndex: item.sort,
// type: item.shang_title,
// typeColor: item.shang_color
// }));
// 计算倒计时
this.calculateRemainingTime(goods.open_time, current_time);
this.startCountdownTimer(goods.open_time, current_time);
this.calculateRemainingTime(goods.open_time, goods.flw_start_time, current_time);
this.startCountdownTimer(goods.open_time, goods.flw_start_time, current_time);
// 其他状态信息
this.activityStatus = status;
@ -352,23 +284,99 @@ export default {
}
}
},
changePay(e) {
this[e] = !this[e];
console.log('aaasdas');
calculateRemainingTime(openTime, currentTime) {
this.confirmSubmit([0, 1]);
},
confirmSubmit([type, num, fromNotice = false]) {
let url = "ordermoney";
if (type == 1) {
url = "orderbuy";
}
this.buyNum = num;
let data = {
goods_id: this.goods_id,
prize_num: 1,
goods_num: 1,
use_money_is: this.useMoney ? 1 : 2,
use_integral_is: this.useIntegral ? 1 : 2,
coupon_id: "",
use_money2_is: this.useMoney2 ? 1 : 2
};
this.req({
url,
data,
success: async (res) => {
if (res.status == 1) {
if (type == 0) {
this.orderData = res.data;
// 使用this.$nextTick确保视图已更新，组件已挂载
this.$nextTick(() => {
if (this.$refs.buyPop) {
this.$refs.buyPop.open();
} else {
console.error('buyPop组件引用不存在');
}
});
}
if (type == 1) {
this.close("buyPop");
if (res.data.status == 1) {
const status = await this.$c.wxMpPay({
data: res.data.res,
});
if (status == "success") {
this.load(this.goods_id);
}
} else {
this.$c.toast({
title: res.msg,
duration: 500,
success: () => {
this.load(this.goods_id);
},
});
}
}
}
},
});
if (type == 1) {
this.close("buyPop");
}
},
calculateRemainingTime(openTime, startTime, currentTime) {
// 将时间字符串转为时间对象
const endDate = new Date(openTime.replace(/-/g, '/'));
const startDate = new Date(startTime.replace(/-/g, '/'));
const currentDate = new Date(currentTime.replace(/-/g, '/'));
// 保存结束时间和当前服务器时间，用于实时倒计时
this.endTime = endDate;
this.currentServerTime = currentDate;
// 计算时间差
let diffTime = endDate.getTime() - currentDate.getTime();
if (diffTime <= 0) {
this.remainingTime = "0天00:00:00";
// 判断当前时间与开始时间和结束时间的关系
if (currentDate > endDate) {
this.remainingTime = "活动已结束";
return;
} else if (currentDate < startDate) {
this.remainingTime = this.formatRemainingTime(startDate - currentDate, "距离开始时间：");
return;
} else if (currentDate >= startDate && currentDate <= endDate) {
this.remainingTime = this.formatRemainingTime(endDate - currentDate, "距离开奖时间：");
return;
}
},
formatRemainingTime(diffTime, prefix) {
// 转换为天、时、分、秒
const days = Math.floor(diffTime / (24 * 60 * 60 * 1000));
diffTime = diffTime % (24 * 60 * 60 * 1000);
@ -379,10 +387,10 @@ export default {
const seconds = Math.floor(diffTime / 1000);
// 格式化时间
this.remainingTime = `${days}天${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
return `${prefix}${days}天${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
},
startCountdownTimer(openTime, currentTime) {
startCountdownTimer(openTime, startTime, currentTime) {
// 清除之前可能存在的计时器
if (this.countdownTimer) {
clearInterval(this.countdownTimer);
@ -390,6 +398,7 @@ export default {
// 保存结束时间和当前时间的时间差（毫秒）
const endDate = new Date(openTime.replace(/-/g, '/'));
const startDate = new Date(startTime.replace(/-/g, '/'));
const currentDate = new Date(currentTime.replace(/-/g, '/'));
const serverClientTimeDiff = currentDate.getTime() - new Date().getTime();
@ -399,28 +408,21 @@ export default {
const now = new Date();
const serverNow = new Date(now.getTime() + serverClientTimeDiff);
// 计算与结束时间的差值
let diffTime = endDate.getTime() - serverNow.getTime();
// 倒计时结束
if (diffTime <= 0) {
// 判断当前时间与开始时间和结束时间的关系
if (serverNow > endDate) {
clearInterval(this.countdownTimer);
this.remainingTime = "0天00:00:00";
this.remainingTime = "活动已结束";
return;
} else if (serverNow < startDate) {
this.remainingTime = this.formatRemainingTime(startDate - serverNow, "距离开始时间：");
return;
} else if (serverNow >= startDate && serverNow <= endDate) {
this.remainingTime = this.formatRemainingTime(endDate - serverNow, "距离开奖时间：");
return;
}
// 计算天、时、分、秒
const days = Math.floor(diffTime / (24 * 60 * 60 * 1000));
diffTime = diffTime % (24 * 60 * 60 * 1000);
const hours = Math.floor(diffTime / (60 * 60 * 1000));
diffTime = diffTime % (60 * 60 * 1000);
const minutes = Math.floor(diffTime / (60 * 1000));
diffTime = diffTime % (60 * 1000);
const seconds = Math.floor(diffTime / 1000);
// 更新倒计时显示
this.remainingTime = `${days}天${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}, 1000);
this.updateButtonState();
},
onUnload() {
@ -441,6 +443,7 @@ export default {
});
if (res.status === 1 && res.data && res.data.list) {
this.participantList.splice(0, this.participantList.length)
this.participantList = res.data.list.map(item => ({
avatar: item.avatar || "",
name: item.nickname || "用户",
@ -476,7 +479,97 @@ export default {
handleTabChange(index) {
this.currentTab = index
}
},
updateButtonState() {
const currentDate = new Date(this.currentServerTime);
const startDate = new Date(this.bonusData.start_time.replace(/-/g, '/'));
const endDate = new Date(this.bonusData.end_time.replace(/-/g, '/'));
const openDate = new Date(this.bonusData.open_time.replace(/-/g, '/'));
if (currentDate < startDate) {
this.buttonText = "未开始";
} else if (currentDate >= startDate && currentDate <= endDate) {
if (this.user_count > 0 && this.user_count >= this.bonusData.quanju_xiangou) {
this.buttonText = "等待开奖中";
return;
}
this.buttonText = "马上参与";
} else if (currentDate > endDate && currentDate < openDate) {
this.buttonText = "等待开奖中";
} else if (currentDate >= openDate) {
this.buttonText = "活动已结束";
}
},
handleButtonClick() {
if (this.buttonText === "未开始") {
uni.showToast({
title: "活动未开始",
icon: "none"
});
return;
} else if (this.buttonText === "等待开奖中") {
uni.showToast({
title: "等待开奖中",
icon: "none"
});
return;
} else if (this.buttonText === "活动已结束") {
uni.showToast({
title: "活动已结束",
icon: "none"
});
return;
}
if (this.user_count > 0 && this.user_count >= this.bonusData.quanju_xiangou) {
uni.showToast({
title: "当前活动限购" + this.bonusData.quanju_xiangou + "次",
icon: "none"
});
return;
}
//判断用户今天消费的金额是否满足参与条件
if (this.user_total_consumption < this.bonusData.choujiang_xianzhi) {
uni.showToast({
title: "消费金额不足",
icon: "none"
});
return;
}
console.log(this.user_total_consumption, this.bonusData.choujiang_xianzhi);
this.confirmSubmit([0, 1])
// if (this.$refs['buyPop']) {
// this.$refs['buyPop'].open();
// } else {
// console.error("buyPop is undefined");
// }
},
close(e) {
console.log('关闭弹窗:', e, this.$refs[e]);
if (e === 'buyPop') {
if (this.$refs[e]) {
this.$refs[e].close();
} else {
console.error('找不到buyPop组件引用');
}
} else {
if (this.$refs[e]) {
this.$refs[e].close();
} else {
console.error('找不到组件引用:', e);
}
}
if (e == "resPop") {
if (this.prizeData && this.prizeData["user_coupon"] != null) {
this.$refs["couponPop"].open(this.prizeData["user_coupon"]);
}
}
},
}
}
</script>