273 lines
8.1 KiB
Vue
273 lines
8.1 KiB
Vue
<!-- 修改为水平滚动的按钮布局 -->
|
||
<template>
|
||
<view class="ft-fixed">
|
||
<scroll-view class="button-scroll" scroll-x show-scrollbar="false" enhanced>
|
||
<view class="button-container">
|
||
<!-- 按钮1 (小按钮) - 当有多个按钮显示时才显示 -->
|
||
<view v-if="checkVisible(1) && !onlyButton1Visible" class="btn common_bg column center"
|
||
:style="{ backgroundImage: `url(${$img1('common/chouBtn1.png')})` }" @click="handleButtonClick(1)">
|
||
</view>
|
||
<!-- 只显示按钮1的时候，显示这个按钮，上面小的按钮隐藏 -->
|
||
<view v-if="checkVisible(1) && onlyButton1Visible" class="btn common_bg column center"
|
||
style="width: 150rpx;height:80rpx;" :style="{ backgroundImage: `url(${$img1('common/btn.png')})` }"
|
||
@click="handleButtonClick(1)">
|
||
</view>
|
||
|
||
<!-- 按钮3 -->
|
||
<view v-if="checkVisible(3)" class="btn common_bg column center"
|
||
:style="{ backgroundImage: `url(${$img1('common/chouBtn3.png')})` }" @click="handleButtonClick(3)">
|
||
</view>
|
||
|
||
<!-- 按钮5 -->
|
||
<view v-if="checkVisible(5)" class="btn common_bg column center"
|
||
:style="{ backgroundImage: `url(${$img1('common/chouBtn5.png')})` }" @click="handleButtonClick(5)">
|
||
</view>
|
||
|
||
<!-- 按钮10 (仅在无限模式显示) -->
|
||
<view v-if="isWuxian && checkVisible(10)" class="btn common_bg column center"
|
||
:style="{ backgroundImage: `url(${$img1('common/chouBtn10.png')})` }" @click="handleButtonClick(10)">
|
||
</view>
|
||
<!-- 无限抽 -->
|
||
<!-- <view v-if="isWuxian && checkVisible(-1)" class="btn common_bg column center"
|
||
style="background-color: #333333;border-radius: 15rpx;color: #CDEF27;font-size: 24rpx;font-family: PingFangSC, PingFang SC;letter-spacing: 2rpx;"
|
||
@click="handleButtonClick(-1)">
|
||
{{ wxtext }}
|
||
</view> -->
|
||
<!-- 全部按钮 (仅在非无限模式显示) -->
|
||
<view v-if="!isWuxian && checkVisible(0) && pageData.goods && pageData.goods.type != 5"
|
||
class="btn common_bg column center" :style="{ backgroundImage: `url(${$img1('common/chouBtnAll.png')})` }"
|
||
@click="handleButtonClick(0)">
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import RouterManager from '@/common/router.js'
|
||
|
||
export default {
|
||
name: 'DetailButton',
|
||
props: {
|
||
pageData: {
|
||
type: Object,
|
||
default: () => ({})
|
||
},
|
||
isWuxian: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
checkButtonVisible: {
|
||
type: Function,
|
||
default: null
|
||
}
|
||
},
|
||
data() {
|
||
return { wxtext: '十连抽' };
|
||
},
|
||
computed: {
|
||
// 判断是否只有按钮1可见
|
||
onlyButton1Visible() {
|
||
const button1Visible = this.checkVisible(1);
|
||
const button3Visible = this.checkVisible(3);
|
||
const button5Visible = this.checkVisible(5);
|
||
const button10Visible = this.isWuxian && this.checkVisible(10);
|
||
const buttonAllVisible = !this.isWuxian && this.checkVisible(0) && this.pageData.goods && this.pageData.goods.type != 5;
|
||
|
||
// 如果只有按钮1可见，返回true，否则返回false
|
||
return button1Visible && !button3Visible && !button5Visible && !button10Visible && !buttonAllVisible;
|
||
}
|
||
},
|
||
methods: {
|
||
// 检查是否已登录
|
||
checkLogin() {
|
||
const token = uni.getStorageSync('token');
|
||
if (!token) {
|
||
// 保存当前页面路径用于登录后返回
|
||
const pages = getCurrentPages();
|
||
const currentPage = pages[pages.length - 1];
|
||
if (currentPage) {
|
||
const currentRoute = currentPage.route;
|
||
const currentParams = currentPage.options || {};
|
||
|
||
let redirectPath = '/' + currentRoute;
|
||
if (Object.keys(currentParams).length > 0) {
|
||
const paramString = Object.keys(currentParams)
|
||
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(currentParams[key])}`)
|
||
.join('&');
|
||
redirectPath += '?' + paramString;
|
||
}
|
||
uni.setStorageSync('redirect', redirectPath);
|
||
}
|
||
|
||
uni.showToast({
|
||
title: '请先登录',
|
||
icon: 'none'
|
||
});
|
||
|
||
RouterManager.navigateTo('/pages/user/login', {}, 'navigateTo')
|
||
.catch(err => {
|
||
console.error('登录页面跳转失败:', err);
|
||
});
|
||
return false;
|
||
}
|
||
return true;
|
||
},
|
||
|
||
handleButtonClick(num) {
|
||
console.log(num);
|
||
|
||
// 先检查登录状态
|
||
if (!this.checkLogin()) {
|
||
return;
|
||
}
|
||
|
||
if (num == -1) {
|
||
|
||
this.$emit('button-wx-click', [0, buyNum]);
|
||
if (this.wxtext == "十连抽") {
|
||
this.wxtext = "停止";
|
||
} else {
|
||
this.wxtext = "十连抽";
|
||
}
|
||
return;
|
||
}
|
||
// 如果是"全部"按钮，使用商品剩余库存数量
|
||
let buyNum = num === 0 ? this.pageData.goods.goodslist_surplus_stock : num;
|
||
this.$emit('button-click', [0, buyNum]);
|
||
},
|
||
checkVisible(num) {
|
||
if (num == 1) {
|
||
return true;
|
||
}
|
||
if (num == -1) {
|
||
if (this.pageData != null && this.pageData.limitInfo != null) {
|
||
if (this.pageData.limitInfo.user_test == 2 && this.pageData.limitInfo.daily_limit == 0 && this.pageData.limitInfo.global_limit == 0) {
|
||
return true;
|
||
}
|
||
}
|
||
return false;
|
||
}
|
||
|
||
if (this.pageData != null && this.pageData.limitInfo != null) {
|
||
let limitInfo = this.pageData.limitInfo;
|
||
if (limitInfo.global_limit > 0) {
|
||
if (num == 0) {
|
||
return false;
|
||
}
|
||
if (limitInfo.user_global_remaining < num) {
|
||
return false;
|
||
}
|
||
} else if (limitInfo.daily_limit > 0) {
|
||
if (num == 0) {
|
||
return false;
|
||
}
|
||
if (limitInfo.user_daily_remaining < num) {
|
||
return false;
|
||
}
|
||
}
|
||
|
||
}
|
||
if (this.pageData.goods != null) {
|
||
if (this.pageData.goods.quanju_xiangou > 0) {
|
||
if (num == 0) {
|
||
return false;
|
||
}
|
||
if (this.pageData.goods.quanju_xiangou < num) {
|
||
return false;
|
||
}
|
||
} else
|
||
if (this.pageData.goods.daily_xiangou > 0) {
|
||
if (num == 0) {
|
||
return false;
|
||
}
|
||
if (this.pageData.goods.daily_xiangou < num) {
|
||
return false;
|
||
}
|
||
}
|
||
}
|
||
if (this.isWuxian) {
|
||
return true; // 无限模式所有按钮都显示
|
||
} else {
|
||
if (num === 0) {
|
||
// "全部"按钮只在有显示条件时显示
|
||
return this.getBtnXianShi(0);
|
||
} else {
|
||
return this.getBtnXianShi(num);
|
||
}
|
||
}
|
||
},
|
||
getBtnXianShi(num) {
|
||
// 如果父组件提供了判断方法，则使用父组件的方法
|
||
if (this.checkButtonVisible) {
|
||
return this.checkButtonVisible(num);
|
||
}
|
||
|
||
// 复用原页面的显示逻辑
|
||
if (!this.pageData || !this.pageData.goods) return false;
|
||
|
||
// 默认判断逻辑
|
||
if (num === 0) return true;
|
||
|
||
// 示例：可以根据实际业务逻辑补充条件
|
||
if (this.pageData.goods.goodslist_surplus_stock < num) return false;
|
||
return true;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.ft-fixed {
|
||
position: fixed;
|
||
z-index: 10;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
padding-top: 20rpx;
|
||
padding-bottom: 30rpx;
|
||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.button-scroll {
|
||
width: 100%;
|
||
white-space: nowrap;
|
||
|
||
&::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.button-container {
|
||
display: inline-flex;
|
||
// padding: 0 30rpx;
|
||
min-width: 100%;
|
||
justify-content: space-evenly;
|
||
align-items: center;
|
||
}
|
||
|
||
.btn {
|
||
width: 120rpx;
|
||
height: 68rpx;
|
||
position: relative;
|
||
margin: 0 12rpx;
|
||
flex-shrink: 0;
|
||
background-size: 100% 100% !important;
|
||
transition: transform 0.15s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
>view {
|
||
white-space: nowrap;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-weight: 400;
|
||
font-size: 52rpx;
|
||
color: #FFFFFF;
|
||
position: relative;
|
||
text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
|
||
}
|
||
}
|
||
</style> |