wgh/coreshoppro
1
0
Fork 0
mirror of http://git.coreshop.cn/jianweie/coreshoppro.git synced 2025-12-06 18:43:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

# 2022-03-01

Browse Source 
### 0.2.7 专业版：
【优化】调整前端商品列表展示图片大小不规则的问题。重写前端coreshop-goods组件。
This commit is contained in:
JianWeie
2022-03-01 23:27:00 +08:00
parent f45c3e5141
commit f043d7aa0d
1 changed files with 72 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
CoreCms.Net.Uni-App/CoreShop/components/coreshop-page/coreshop-goods.vue
View File

@@ -6,47 +6,46 @@
<view class="coreshop-margin-left-5 coreshop-margin-right-5 coreshop-margin-top-10 coreshop-margin-bottom-10 "> <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> <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>
<view class="" v-if="count"> <view class="coreshop-flex coreshop-align-start" style="flex-flow: row wrap;">
<u-grid :col="coreshopdata.parameters.column" :border="false" align="left"> <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-grid-item :custom-style="{padding: '0px'}" v-for="(item, index) in coreshopdata.parameters.list" :key="index"> <u--image :src="item.image" mode="widthFix" width="100%" :height="coreshopdata.parameters.column==2?'164px':'104px'" radius="10"></u--image>
<view class="good_box" @tap="goGoodsDetail(item.id)"> <view class="good_title u-line-2 coreshop-min-height-34">
<u--image :src="item.image" mode="widthFix" width="100%" :height="coreshopdata.parameters.column==2?'164px':'104px'" radius="10"></u--image> {{item.name}}
<view class="good_title u-line-2"> </view>
{{item.name}} <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>
<view class="good-price coreshop-display-block"> </u-grid-item>
{{item.price}}元 <span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-5 coreshop-text-gray">{{item.mktprice}}元</span> </u-grid>
</view> </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>
</view> </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 "> <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> <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>
<view v-if="count"> <view class="good_box" @click="goGoodsDetail(item.id)" v-for="item in coreshopdata.parameters.list" :key="item.id" v-if="count">
<u-grid :col="1" :border="false" align="left"> <u--image :src="item.image" mode="widthFix" width="100%" radius="10"></u--image>
<u-grid-item :custom-style="{padding: '0px'}" v-for="item in coreshopdata.parameters.list" :key="item.id"> <view class="good_title u-line-2">
<view class="good_box" @click="goGoodsDetail(item.id)"> {{item.name}}
<u--image :src="item.image" mode="widthFix" width="100%" radius="10"></u--image> </view>
<view class="good_title u-line-2"> <view class="good-price coreshop-display-block">
{{item.name}} {{item.price}}元 <span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-5 coreshop-text-gray">{{item.mktprice}}元</span>
</view> </view>
<view class="good-price coreshop-display-block"> <view class="good-tag-recommend" v-if="item.isRecommend">
{{item.price}}元 <span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-5 coreshop-text-gray">{{item.mktprice}}元</span> 推荐
</view> </view>
<view class="good-tag-recommend" v-if="item.isRecommend"> <view class="good-tag-hot" v-if="item.isHot">
推荐 热门
</view> </view>
<view class="good-tag-hot" v-if="item.isHot">
热门
</view>
</view>
</u-grid-item>
</u-grid>
</view> </view>
<view class="order-none" v-else> <view class="order-none" v-else>
<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/order.png'" icon-size="150" text="暂无" mode="list"></u-empty> <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"> <block v-if="count">
<swiper :class="coreshopdata.parameters.column==3?'swiper3':coreshopdata.parameters.column==2?'swiper2':''" @change="change"> <swiper :class="coreshopdata.parameters.column==3?'swiper3':coreshopdata.parameters.column==2?'swiper2':''" @change="change">
<swiper-item v-for="no of pageCount" :key="no"> <swiper-item v-for="no of pageCount" :key="no">
<u-grid :col="coreshopdata.parameters.column" :border="false" align="left"> <view class="coreshop-flex coreshop-align-start" style="flex-flow: row wrap;">
<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',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)">
<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 :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>
</u-image> <view class="good_title u-line-2">
<view class="good_title u-line-2"> {{item.name}}
{{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>
</u-grid-item> <view class="good-price coreshop-display-block">
</u-grid> {{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-item>
</swiper> </swiper>
<view class="indicator-dots"> <view class="indicator-dots">
@@ -172,7 +163,7 @@
<style scoped lang="scss"> <style scoped lang="scss">
.goodsBox { border-radius: 8px; color: #333333 !important; padding: 0 5px; overflow: hidden; .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 { font-size: 13px; margin-top: 5px; color: $u-main-color; }
.good_title-xl { font-size: 14px; 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; } .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-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; } .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 { 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-item { background-color: $u-tips-color; height: 6px; width: 6px; border-radius: 10px; margin: 0 3px; }