127 lines
2.4 KiB
Vue
127 lines
2.4 KiB
Vue
<template>
|
|
<view class="toolbar-wrapper">
|
|
<view class="detail-toolbar" :style="customStyle">
|
|
<!-- 购买说明按钮 -->
|
|
<view class="toolbar-item center" @click="onRuleClick(getRuleId)">
|
|
<!-- <image class="toolbar-img"
|
|
:src="$img1('common/gzsm.png')">
|
|
</image> -->
|
|
规则说明
|
|
</view>
|
|
|
|
<!-- 商品预览按钮 -->
|
|
<view class="toolbar-item center" :class="currentTab == 1 ? 'act' : 'unact'" @tap="onTabChange(1)">
|
|
商品预览
|
|
</view>
|
|
|
|
<!-- 中赏记录按钮 -->
|
|
<view class="toolbar-item center" :class="currentTab == 2 ? 'act' : 'unact'" @tap="onTabChange(2)">
|
|
中奖记录
|
|
</view>
|
|
|
|
<!-- 换箱按钮 -->
|
|
<view class="toolbar-item center" @click="onChangeBox" v-if="!isWuxian">
|
|
换箱
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'DetailToolbar',
|
|
props: {
|
|
goodsType: {
|
|
type: [Number, String],
|
|
default: 0
|
|
},
|
|
currentTab: {
|
|
type: [Number, String],
|
|
default: 1
|
|
},
|
|
customStyle: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
isWuxian: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
computed: {
|
|
getRuleId() {
|
|
// 根据商品类型返回对应的规则ID
|
|
const typeRuleMap = {
|
|
5: 13,
|
|
6: 18
|
|
};
|
|
return typeRuleMap[this.goodsType] || 7;
|
|
}
|
|
},
|
|
methods: {
|
|
onRuleClick(ruleId) {
|
|
this.$emit('rule-click', ruleId, '购买说明');
|
|
},
|
|
onTabChange(tabId) {
|
|
this.$emit('tab-change', tabId);
|
|
},
|
|
onChangeBox() {
|
|
this.$emit('change-box');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.toolbar-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 50rpx 0 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.detail-toolbar {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 54rpx;
|
|
box-sizing: border-box;
|
|
background-color: #FFFFFF;
|
|
|
|
.toolbar-item {
|
|
width: 156rpx;
|
|
height: 64rpx;
|
|
margin: 0 8rpx;
|
|
transition: transform 0.2s ease, background-color 0.2s ease;
|
|
font-size: 24rpx;
|
|
border-radius: 32rpx;
|
|
|
|
&.center {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
// 选中状态
|
|
&.act {
|
|
background-color: #FFED94;
|
|
}
|
|
|
|
// 未选中状态
|
|
&.unact {
|
|
background-color: transparent;
|
|
}
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.toolbar-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style> |