90 lines
1.9 KiB
Vue
90 lines
1.9 KiB
Vue
<template>
|
|
<view class="detail-toolbar" :style="customStyle">
|
|
<!-- 购买说明按钮 -->
|
|
<view class="toolbar-item">
|
|
<image class="toolbar-img"
|
|
:src="$img1('common/gzsm.png')"
|
|
@click="onRuleClick(getRuleId)">
|
|
</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">
|
|
<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: ''
|
|
}
|
|
},
|
|
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">
|
|
.detail-toolbar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-left: 32rpx;
|
|
margin-top: 56rpx;
|
|
|
|
.toolbar-item {
|
|
width: 160rpx;
|
|
height: 92rpx;
|
|
|
|
&:not(:first-child) {
|
|
margin-left: 16rpx;
|
|
}
|
|
|
|
.toolbar-img {
|
|
width: 160rpx;
|
|
height: 92rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |