97 lines
2.1 KiB
Vue
97 lines
2.1 KiB
Vue
<template>
|
|
<view class="detail-toolbar" :style="customStyle">
|
|
<!-- 购买说明按钮 -->
|
|
<view class="toolbar-item" @click="onRuleClick(getRuleId)">
|
|
<image class="toolbar-img"
|
|
:src="$img1('common/gzsm.png')">
|
|
</image>
|
|
</view>
|
|
|
|
<!-- 商品预览按钮 -->
|
|
<view class="toolbar-item" @tap="onTabChange(1)">
|
|
<image class="toolbar-img" :src="$img1(currentTab==1 ? 'common/spyl1.png' : 'common/spyl2.png')"></image>
|
|
</view>
|
|
|
|
<!-- 中赏记录按钮 -->
|
|
<view class="toolbar-item" @tap="onTabChange(2)">
|
|
<image class="toolbar-img" :src="$img1(currentTab==1 ? 'common/zsjl2.png' : 'common/zsjl1.png')"></image>
|
|
</view>
|
|
|
|
<!-- 换箱按钮 -->
|
|
<view class="toolbar-item" @click="onChangeBox" v-if="!isWuxian">
|
|
<image class="toolbar-img" :src="$img1('common/huanxiang.png')"></image>
|
|
</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>
|
|
.detail-toolbar {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 40rpx 0rpx 30rpx 0;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
|
|
.toolbar-item {
|
|
width: 160rpx;
|
|
height: 92rpx;
|
|
margin: 0 8rpx;
|
|
transition: transform 0.2s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.toolbar-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style> |