<template>
|
<view>
|
<!-- 列表平铺两列三列 -->
|
<view class="coreshop-padding-10 coreshop-margin-10 coreshop-bg-white coreshop-border-radius-trbl-18" v-if="coreshopData.parameters.column == '2' && coreshopData.parameters.display == 'list' || coreshopData.parameters.column == '3' && coreshopData.parameters.display == 'list'">
|
<view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-min-height-30" v-if="coreshopData.parameters.lookTitle == 'true'">
|
<view class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">{{coreshopData.parameters.title}}</view>
|
<u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left" v-if="coreshopData.parameters.lookMore == 'true' && coreshopData.parameters.type == 'auto'" @click="goGoodsList({catId: coreshopData.parameters.classifyId,brandId:coreshopData.parameters.brandId})"></u-icon>
|
</view>
|
<view class="coreshop-divider">
|
<view class="complete"></view>
|
</view>
|
<view class="coreshop-text-black">
|
<custom-waterfalls-flow :value="coreshopData.parameters.list" :column="coreshopData.parameters.column" @wapperClick="wapperClick" @imageClick="imageClick">
|
<!-- #ifdef MP-WEIXIN -->
|
<view class="goods coreshop-padding-bottom-10 coreshop-bg-main" v-for="(item,index) in coreshopData.parameters.list" :key="index" slot="slot{{index}}">
|
<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">
|
<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="coreshopData.parameters.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-10 coreshop-margin-bottom-5" :class="coreshopData.parameters.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>
|
<!-- #endif -->
|
<!-- #ifndef MP-WEIXIN -->
|
<template v-slot:default="item">
|
<view class="goods">
|
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
<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="coreshopData.parameters.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-10 coreshop-margin-bottom-5" :class="coreshopData.parameters.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>
|
</template>
|
<!-- #endif -->
|
</custom-waterfalls-flow>
|
</view>
|
</view>
|
|
<!-- 列表平铺单列 -->
|
<view class="coreshop-padding-10 coreshop-margin-10 coreshop-bg-white coreshop-border-radius-trbl-18" v-if="coreshopData.parameters.column == '1' && coreshopData.parameters.display == 'list'">
|
<view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-min-height-30" v-if="coreshopData.parameters.lookMore == 'true'">
|
<view class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">{{coreshopData.parameters.title}}</view>
|
<u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left" v-if="coreshopData.parameters.lookMore == 'true' && coreshopData.parameters.type == 'auto'" @click="goGoodsList({catId: coreshopData.parameters.classifyId,brandId:coreshopData.parameters.brandId})"></u-icon>
|
</view>
|
<view class="coreshop-divider">
|
<view class="complete"></view>
|
</view>
|
<view class="coreshop-text-black" v-for="(item, index) in coreshopData.parameters.list" :key="index" v-if="count" @tap="goGoodsDetail(item.id)">
|
<view class="coreshop-flex coreshop-justify-start coreshop-padding-top-10 coreshop-padding-bottom-10">
|
<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 coreshop-percent-100">
|
<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.initialSales}}{{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-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 class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-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>
|
</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 class="coreshop-padding-10 coreshop-margin-10 coreshop-bg-white coreshop-border-radius-trbl-18" v-if="coreshopData.parameters.display == 'slide'">
|
<view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-min-height-30" v-if="coreshopData.parameters.lookTitle == 'true'">
|
<view class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">{{coreshopData.parameters.title}}</view>
|
<u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left" v-if="coreshopData.parameters.lookMore == 'true' && coreshopData.parameters.type == 'auto'" @click="goGoodsList({catId: coreshopData.parameters.classifyId,brandId:coreshopData.parameters.brandId})"></u-icon>
|
</view>
|
<view class="coreshop-divider">
|
<view class="complete"></view>
|
</view>
|
<view v-if="count">
|
<swiper :class="coreshopData.parameters.column==3?'swiper3':coreshopData.parameters.column==2?'swiper2':''" @change="change">
|
<swiper-item v-for="(no, indexPage) of pageCount" :key="indexPage">
|
<u-grid :col="coreshopData.parameters.column" :border="false" align="left" :data-id="no">
|
<u-grid-item v-for="(item, index) in coreshopData.parameters.list" v-if="index >=coreshopData.parameters.column*no && index <coreshopData.parameters.column*(no+1)" :key="index" @click="goGoodsDetail(item.id)">
|
<view class="good_box">
|
<u-image :src="item.image" :index="item.id" mode="widthFit" width="100%" :height="coreshopData.parameters.column==3?'104px':coreshopData.parameters.column==2?'164px':'104px'" radius="10">
|
</u-image>
|
<view class="good_title u-line-2">
|
{{item.name}}
|
</view>
|
<view class="good-price coreshop-display-block">
|
{{item.price}}元 <span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-5 coreshop-text-gray">{{item.mktprice}}元</span>
|
</view>
|
<view class="good-tag-recommend" v-if="item.isRecommend">
|
推荐
|
</view>
|
<view class="good-tag-hot" v-if="item.isHot">
|
热门
|
</view>
|
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-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>
|
</u-grid-item>
|
</u-grid>
|
</swiper-item>
|
</swiper>
|
<view class="indicator-dots">
|
<view class="indicator-dots-item" v-for="(no, index) of pageCount" :key="index" :class="[current == no ? 'indicator-dots-active' : '']">
|
</view>
|
</view>
|
</view>
|
<view v-else="">
|
<scroll-view class='swiper-list' scroll-x="true"></scroll-view>
|
</view>
|
|
</view>
|
|
|
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
current: 0,
|
pageCount: [],
|
count: false
|
};
|
},
|
name: "coreshopGoods",
|
props: {
|
coreshopData: {
|
// type: Array,
|
required: true,
|
}
|
},
|
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: {
|
change(e) {
|
this.current = e.detail.current;
|
},
|
wapperClick(item) {
|
this.goGoodsDetail(item.id)
|
},
|
imageClick(item) {
|
this.goGoodsDetail(item.id)
|
},
|
},
|
created() {
|
this.count = this.coreshopData.parameters.list.length > 0;
|
var page = Number(this.coreshopData.parameters.list.length / this.coreshopData.parameters.column).toFixed(0);
|
if (this.coreshopData.parameters.column * page < this.coreshopData.parameters.list.length) {
|
page = Number(page) + 1;
|
}
|
for (var i = 0; i < page; i++) {
|
this.pageCount.push(i);
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.good_box { border-radius: 8px; background-color: #ffffff; padding: 5px; position: relative; width: 100%;
|
.good_title { font-size: 14px; margin-top: 5px; color: $u-main-color; }
|
.good-tag-hot { display: flex; margin-top: 5px; position: absolute; top: 7.5px; left: 7.5px; background-color: $u-type-error; color: #FFFFFF; display: flex; align-items: center; padding: 2px 7px; border-radius: 25px; font-size: 10px; line-height: 1; }
|
.good-tag-recommend { display: flex; margin-top: 5px; position: absolute; top: 7.5px; right: 7.5px; background-color: $u-type-primary; color: #FFFFFF; margin-left: 10px; border-radius: 25px; line-height: 1; padding: 2px 7px; display: flex; align-items: center; border-radius: 25px; font-size: 10px; }
|
.good-tag-recommend2 { display: flex; margin-top: 5px; position: absolute; bottom: 7.5px; left: 7.5px; background-color: $u-type-primary; color: #FFFFFF; border-radius: 25px; line-height: 1; padding: 2px 7px; display: flex; align-items: center; border-radius: 25px; font-size: 10px; }
|
.good-price { font-size: 15px; color: $u-type-error; margin-top: 5px; }
|
}
|
|
.indicator-dots { margin-top: 10px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; flex-direction: row;
|
.indicator-dots-item { background-color: $u-tips-color; height: 6px; width: 6px; border-radius: 10px; margin: 0 3px; }
|
.indicator-dots-active { background-color: $u-type-primary; }
|
}
|
.swiper3 { height: 200px; }
|
.swiper2 { height: 270px; }
|
.image2 { height: 150px; }
|
.image3 { height: 150px; }
|
</style>
|
