<template>
|
<view class="coreshop-padding-10 coreshop-margin-10 coreshop-bg-white coreshop-border-radius-trbl-18" style="overflow: hidden;">
|
<u-tabs :list="nameList" :current="current" @change="onChange"></u-tabs>
|
<view class="coreshop-divider">
|
<view class="complete"></view>
|
</view>
|
|
<view class="coreshop-text-black" v-for="(newData, indexParent) in coreshopData.parameters.list" :key="indexParent" v-show="newData.isShow">
|
<view class="flex-box clear-fix">
|
<view class="coreshop-padding-bottom-10 coreshop-bg-main column-value2" v-for="(item,index) in newData.list" :key="index" v-if="newData.column==2">
|
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-main coreshop-border-radius-bl-18" @click="goGoodsDetail(item.id)">
|
<image :src="item.image" class="img" mode="widthFix"></image>
|
<view class="coreshop-multiple-line-clamp">
|
<text class="coreshop-font-14">{{item.name}}</text>
|
</view>
|
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center coreshop-margin-bottom-5">
|
<view class="coreshop-text-red coreshop-font-weight-bold">
|
<text class="coreshop-font-12">¥</text>
|
<text class="coreshop-font-16">{{item.price}}</text>
|
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray" v-if="newData.column==2">{{item.mktprice}}元</span>
|
</view>
|
<view>
|
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
</view>
|
</view>
|
<view class="coreshop-divider" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
<view class="complete"></view>
|
</view>
|
<view class="coreshop-flex coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5" :class="newData.column>2?'coreshop-flex-direction-column':'coreshop-flex-direction-row'" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
<view>
|
{{ pointShowName}}兑换价:
|
</view>
|
<view class="coreshop-text-red">
|
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
</view>
|
</view>
|
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
<view>
|
购买赠送:
|
</view>
|
<view class="coreshop-text-red">
|
{{item.points}}{{ pointShowName}}
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="flex-box3 clear-fix">
|
<view class="coreshop-padding-bottom-10 coreshop-bg-main column-value3" v-for="(item,index) in newData.list" :key="index" v-if="newData.column==3">
|
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-4 coreshop-padding-right-4 coreshop-bg-main coreshop-border-radius-bl-18" @click="goGoodsDetail(item.id)">
|
<image :src="item.image" class="img" mode="widthFix"></image>
|
<view class="coreshop-multiple-line-clamp">
|
<text class="coreshop-font-14">{{item.name}}</text>
|
</view>
|
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center coreshop-margin-bottom-5">
|
<view class="coreshop-text-red coreshop-font-weight-bold">
|
<text class="coreshop-font-12">¥</text>
|
<text class="coreshop-font-16">{{item.price}}</text>
|
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray" v-if="newData.column==2">{{item.mktprice}}元</span>
|
</view>
|
<view>
|
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
|
</view>
|
</view>
|
<view class="coreshop-divider" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
<view class="complete"></view>
|
</view>
|
<view class="coreshop-flex coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5" :class="newData.column>2?'coreshop-flex-direction-column':'coreshop-flex-direction-row'" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
<view>
|
{{ pointShowName}}兑换价:
|
</view>
|
<view class="coreshop-text-red">
|
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
</view>
|
</view>
|
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
<view>
|
购买赠送:
|
</view>
|
<view class="coreshop-text-red">
|
{{item.points}}{{ pointShowName}}
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
|
<view class="coreshop-text-black" v-for="(item, index) in newData.list" :key="index" v-if="newData.column==1">
|
<view class="coreshop-flex coreshop-justify-start coreshop-padding-top-10 coreshop-padding-bottom-10" v-if="newData.list.length" @click="goGoodsDetail(item.id)">
|
<view>
|
<u--image :src="item.image" mode="widthFix" width="130px" height="130px" radius="8"></u--image>
|
</view>
|
<view class="coreshop-flex coreshop-flex-direction coreshop-padding-left-10">
|
<view class="coreshop-font-14 u-line-2 coreshop-text-black">{{ item.name }}</view>
|
<view class="coreshop-font-11 coreshop-padding-top-5 coreshop-padding-bottom-3 u-line-2 coreshop-text-brown">{{ item.brief }}</view>
|
<view class="coreshop-flex coreshop-align-center coreshop-padding-top-10 coreshop-padding-bottom-10">
|
<view class="coreshop-font-11 coreshop-bg-orange coreshop-padding-2 coreshop-border-radius-4 coreshop-margin-right-10">已售{{item.buyCount}}{{item.unit}}</view>
|
<view class="coreshop-font-11 coreshop-bg-olive coreshop-padding-2 coreshop-border-radius-4">{{item.viewCount}}人访问</view>
|
</view>
|
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-bottom-5" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
<view>
|
{{ pointShowName}}兑换价:
|
</view>
|
<view class="coreshop-text-red">
|
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
</view>
|
</view>
|
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
<view>
|
购买赠送:
|
</view>
|
<view class="coreshop-text-red">
|
{{item.points}}{{ pointShowName}}
|
</view>
|
</view>
|
<view class="coreshop-flex coreshop-justify-between coreshop-flex-direction-row coreshop-align-center">
|
<view class="coreshop-flex coreshop-align-center">
|
<view class="coreshop-font-14 coreshop-text-red">￥{{ item.price }}</view>
|
<view class="coreshop-font-12 coreshop-text-gray coreshop-text-through">￥{{ item.mktprice }}</view>
|
</view>
|
<view class="coreshop-buy-btn">立即购</view>
|
</view>
|
</view>
|
</view>
|
<view class="order-none" v-else>
|
<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/order.png'" icon-size="150" text="暂无" mode="list"></u-empty>
|
</view>
|
</view>
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
current: 0,
|
nameList: [],
|
};
|
},
|
name: "coreshopGoodTabBar",
|
props: {
|
coreshopData: {
|
// type: Array,
|
required: true,
|
}
|
},
|
mounted() {
|
var _this = this;
|
for (var i = 0; i < this.coreshopData.parameters.list.length; i++) {
|
let item = {
|
name: this.coreshopData.parameters.list[i].title
|
}
|
this.nameList.push(item);
|
if (_this.current == i) {
|
this.coreshopData.parameters.list[i].isShow = true;
|
} else {
|
this.coreshopData.parameters.list[i].isShow = false;
|
}
|
}
|
},
|
computed: {
|
pointSwitch() { return this.$store.state.config.pointSwitch },
|
pointShowExchangePrice() { return this.$store.state.config.pointShowExchangePrice },
|
pointDiscountedProportion() { return this.$store.state.config.pointDiscountedProportion },
|
pointExchangeModel() { return this.$store.state.config.pointExchangeModel },
|
pointShowName() { return this.$store.state.config.pointShowName },
|
pointGetModel() { return this.$store.state.config.pointGetModel },
|
pointShowPoint() { return this.$store.state.config.pointShowPoint },
|
},
|
methods: {
|
onChange(item) {
|
var _this = this;
|
this.current = item.index;
|
for (var i = 0; i < _this.coreshopData.parameters.list.length; i++) {
|
if (_this.current == i) {
|
_this.coreshopData.parameters.list[i].isShow = true;
|
} else {
|
_this.coreshopData.parameters.list[i].isShow = false;
|
}
|
}
|
}
|
},
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.flex-box { column-count: 2; column-gap: 8px;
|
.column-value2 { width: 100%; break-inside: avoid; color: #333333 !important; margin-bottom: 8px; }
|
}
|
.flex-box3 { column-count: 3; column-gap: 8px;
|
.column-value3 { width: 100%; break-inside: avoid; color: #333333 !important; margin-bottom: 5px; }
|
}
|
.img { width: 100%; }
|
.clear-fix::after { content: ''; display: block; height: 0; clear: both; }
|
.clear-fix { zoom: 1; }
|
</style>
|
