mirror of
http://git.coreshop.cn/jianweie/coreshoppro.git
synced 2025-12-06 16:03:25 +08:00
# 2022-03-01
### 0.2.7 专业版： 【优化】调整前端商品列表展示图片大小不规则的问题。重写前端coreshop-goods组件。
This commit is contained in:
JianWeie
@@ -6,47 +6,46 @@
|
||||
<view class="coreshop-margin-left-5 coreshop-margin-right-5 coreshop-margin-top-10 coreshop-margin-bottom-10 ">
|
||||
<coreshop-section font-size="15" :title="coreshopdata.parameters.title" v-if="coreshopdata.parameters.title != ''" @click="coreshopdata.parameters.lookMore == 'true' ? goGoodsList({catId: coreshopdata.parameters.classifyId,brandId:coreshopdata.parameters.brandId}) :''" :arrow="coreshopdata.parameters.lookMore == 'true'" :sub-title="coreshopdata.parameters.lookMore == 'true'?'更多':''"></coreshop-section>
|
||||
</view>
|
||||
<view class="" v-if="count">
|
||||
<u-grid :col="coreshopdata.parameters.column" :border="false" align="left">
|
||||
<u-grid-item :custom-style="{padding: '0px'}" v-for="(item, index) in coreshopdata.parameters.list" :key="index">
|
||||
<view class="good_box" @tap="goGoodsDetail(item.id)">
|
||||
<u--image :src="item.image" mode="widthFix" width="100%" :height="coreshopdata.parameters.column==2?'164px':'104px'" radius="10"></u--image>
|
||||
<view class="good_title u-line-2">
|
||||
{{item.name}}
|
||||
<view class="coreshop-flex coreshop-align-start" style="flex-flow: row wrap;">
|
||||
<view :class="['good_box',coreshopdata.parameters.column==2?'cla2':'cla3']" @tap="goGoodsDetail(item.id)" v-for="(item, index) in coreshopdata.parameters.list" :key="index" v-if="count">
|
||||
<u--image :src="item.image" mode="widthFix" width="100%" :height="coreshopdata.parameters.column==2?'164px':'104px'" radius="10"></u--image>
|
||||
<view class="good_title u-line-2 coreshop-min-height-34">
|
||||
{{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>
|
||||
<view v-else-if="!count && !coreshopdata.parameters.listAjax">
|
||||
<u-grid col="3" border="false" align="left">
|
||||
<u-grid-item :custom-style="{padding: '0px'}" v-for="item in 3" :key="item">
|
||||
<view class="good_box">
|
||||
<view class="good_title u-line-2">
|
||||
无
|
||||
</view>
|
||||
<view class="good-price">
|
||||
0元
|
||||
</view>
|
||||
<view class="good-tag-recommend">
|
||||
推荐
|
||||
</view>
|
||||
<view class="good-tag-hot">
|
||||
热门
|
||||
</view>
|
||||
</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>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
<view v-else-if="!count && !coreshopdata.parameters.listAjax">
|
||||
<u-grid col="3" border="false" align="left">
|
||||
<u-grid-item :custom-style="{padding: '0px'}" v-for="item in 3" :key="item">
|
||||
<view class="good_box">
|
||||
<view class="good_title u-line-2">
|
||||
无
|
||||
</view>
|
||||
<view class="good-price">
|
||||
0元
|
||||
</view>
|
||||
<view class="good-tag-recommend">
|
||||
推荐
|
||||
</view>
|
||||
<view class="good-tag-hot">
|
||||
热门
|
||||
</view>
|
||||
</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 列表平铺单列 -->
|
||||
@@ -54,26 +53,20 @@
|
||||
<view class="coreshop-margin-left-5 coreshop-margin-right-5 coreshop-margin-top-10 coreshop-margin-bottom-10 ">
|
||||
<coreshop-section font-size="15" :title="coreshopdata.parameters.title" v-if="coreshopdata.parameters.title != ''" @click="coreshopdata.parameters.lookMore == 'true' ? goGoodsList({catId: coreshopdata.parameters.classifyId,brandId:coreshopdata.parameters.brandId}) :''" :arrow="coreshopdata.parameters.lookMore == 'true'" :sub-title="coreshopdata.parameters.lookMore == 'true'?'更多':''"></coreshop-section>
|
||||
</view>
|
||||
<view v-if="count">
|
||||
<u-grid :col="1" :border="false" align="left">
|
||||
<u-grid-item :custom-style="{padding: '0px'}" v-for="item in coreshopdata.parameters.list" :key="item.id">
|
||||
<view class="good_box" @click="goGoodsDetail(item.id)">
|
||||
<u--image :src="item.image" mode="widthFix" width="100%" 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>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
<view class="good_box" @click="goGoodsDetail(item.id)" v-for="item in coreshopdata.parameters.list" :key="item.id" v-if="count">
|
||||
<u--image :src="item.image" mode="widthFix" width="100%" 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>
|
||||
<view class="order-none" v-else>
|
||||
<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/order.png'" icon-size="150" text="暂无" mode="list"></u-empty>
|
||||
@@ -89,26 +82,24 @@
|
||||
<block v-if="count">
|
||||
<swiper :class="coreshopdata.parameters.column==3?'swiper3':coreshopdata.parameters.column==2?'swiper2':''" @change="change">
|
||||
<swiper-item v-for="no of pageCount" :key="no">
|
||||
<u-grid :col="coreshopdata.parameters.column" :border="false" align="left">
|
||||
<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':''" 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-align-start" style="flex-flow: row wrap;">
|
||||
<view :class="['good_box',coreshopdata.parameters.column==2?'cla2':'cla3']" 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)">
|
||||
<u-image :src="item.image" :index="item.id" mode="widthFit" width="100%" :height="coreshopdata.parameters.column==3?'104px':coreshopdata.parameters.column==2?'164px':''" radius="10">
|
||||
</u-image>
|
||||
<view class="good_title u-line-2">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
<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>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="indicator-dots">
|
||||
@@ -172,7 +163,7 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
.goodsBox { border-radius: 8px; color: #333333 !important; padding: 0 5px; overflow: hidden;
|
||||
.good_box { border-radius: 8px; margin: 3px; background-color: #ffffff; padding: 5px; position: relative;
|
||||
.good_box { border-radius: 8px; margin: 5px; background-color: #ffffff; position: relative;
|
||||
.good_title { font-size: 13px; margin-top: 5px; color: $u-main-color; }
|
||||
.good_title-xl { 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; }
|
||||
@@ -180,6 +171,8 @@
|
||||
.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; }
|
||||
}
|
||||
.cla2 { width: calc(50% - 10px); }
|
||||
.cla3 { width: calc(33% - 10px); }
|
||||
|
||||
.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; }
|
||||
|
||||
Reference in New Issue
Block a user