Skip to content

M
mayi-mp-shop
Commit 456a3642 by 李嘉林
Options

暂存商品列表组件

parent 5ed31fd2
Showing with 563 additions and 3 deletions
build/webpack.dev.conf.js
...@@ -82,6 +82,6 @@ module.exports = merge(baseWebpackConfig, { ...@@ -82,6 +82,6 @@ module.exports = merge(baseWebpackConfig, {
// inject: true // inject: true
// }), // }),
new FriendlyErrorsPlugin(), new FriendlyErrorsPlugin(),
new UglifyJsPlugin({ sourceMap: true }) // new UglifyJsPlugin({ sourceMap: true })
] ]
}) })
project.config.json
...@@ -31,6 +31,7 @@ ...@@ -31,6 +31,7 @@
"projectname": "mayi-mp-shop", "projectname": "mayi-mp-shop",
"simulatorType": "wechat", "simulatorType": "wechat",
"simulatorPluginLibVersion": {}, "simulatorPluginLibVersion": {},
"libVersion": "2.14.3",
"condition": { "condition": {
"search": { "search": {
"current": -1, "current": -1,
......
src/pages/home/main.json
{ {
"usingComponents": { "usingComponents": {
"banner": "../../../static/nativeComponents/Banner/index", "banner": "/static/nativeComponents/Banner/index",
"waterfall-flow": "../../../static/nativeComponents/module/WaterfallFlow/index", "goods-list": "/static/nativeComponents/GoodsList/index",
"waterfall-flow": "/static/nativeComponents/module/WaterfallFlow/index",
"van-button": "/static/vant/button/index" "van-button": "/static/vant/button/index"
} }
} }
\ No newline at end of file
static/css/common.css 0 → 100644
.text-overflow {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.text-overflow2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.flex {
display: flex;
}
static/css/common.min.css 0 → 100644
.text-overflow{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.text-overflow2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.flex{display:flex}
static/css/common.scss
...@@ -11,6 +11,9 @@ ...@@ -11,6 +11,9 @@
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.flex{
display: flex;
}
@mixin btn { @mixin btn {
width: 148px; width: 148px;
......
static/nativeComponents/GoodsList/GoodsItem/index.js 0 → 100644
const componentOptions = {
// 组件选项
options: {
multipleSlots: true
},
behaviors: [],
properties: {
datas: {
type: Object
},
items: {
type: Object
},
indexs: {
type: Number
}
},
// 组件数据
data: {
isPageHidden: false // 页面是否处于隐藏状态
},
// 数据监听器
observers: {},
// 组件方法
methods: {
init() {},
getSaleTime(val) {
return new Date(val.replace(/-/g, "/")).getTime() - new Date().getTime();
},
showVipPrice(index) {
// 索引 0 显示价格 1显示名称
let showFlag = false;
let vipPrice = this.items["minPriceAfterRecommendedCardPriceTable"];
if (vipPrice && Number(vipPrice) < Number(this.items["minPrice"])) {
showFlag = true;
}
console.log(showFlag, "------------760");
return showFlag;
},
showVipTag(index) {
// 索引 0 显示价格 1显示名称
let showFlag = false;
let vipPrice = this.items["minPriceAfterRecommendedCardPriceTable"];
let showTag = this.items["recommendedCardMinPricePriceTableName"];
if (
vipPrice &&
showTag &&
Number(vipPrice) <= Number(this.items["minPrice"])
) {
showFlag = true;
}
return showFlag;
}
},
// 组件生命周期
lifetimes: {
created() {},
attached() {
this.init();
},
ready() {},
moved() {},
detached() {}
},
definitionFilter() {},
// 页面生命周期
pageLifetimes: {
// 页面被展示
show() {
const { isPageHidden } = this.data;
// show事件发生前，页面不是处于隐藏状态时
if (!isPageHidden) {
return;
}
// 重新执行定时器等操作
},
// 页面被隐藏
hide() {
this.setData({
isPageHidden: true
});
// 清除定时器等操作
},
// 页面尺寸变化时
resize() {}
}
};
Component(componentOptions)
static/nativeComponents/GoodsList/GoodsItem/index.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
static/nativeComponents/GoodsList/GoodsItem/index.wxml 0 → 100644
<!-- 商品列表item -->
<view class="goodsItem">
<!-- 商户入口-顶部 -->
<view class="merchantsEntrance flex" wx:if="{{datas.componentData['merchantsEntrance'] && datas.componentData['merchantsEntranceType'] == 0}}">
<view class="left flex" wx:if="{{items != null}}">
<view class="logo">
<image mode='widthFix' src="http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/ppefWK8BS6.png?x-oss-process=image/resize,limit_1,w_150,h_150" />
</view>
<view class="name">{{items.orgName}}</view>
</view>
</view>
<!-- 商品图片 -->
<view class="imgBox slidebox1">
<view class="goodsPicture" wx:if="{{items!=null}}">
<!-- 开启售卖 -->
<view class="saleWay" wx:if="{{items.saleWay==2 &&getSaleTime(items.saleTime)>0}}">
<view class="saleWayBg"></view>
<view>
6545646
</view>
</view>
<!-- 商品角标 -->
<view
class="angleSign"
style="width:{{datas.componentData.angleSignSize}}%;height:{{datas.componentData.angleSignSize}}%;"
wx:if="{{datas.componentData['angleSign'] && datas.componentData['angleSignImg']}}"
>
<image mode="widthFix" src="http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/ppefWK8BS6.png?x-oss-process=image/resize,limit_1,w_150,h_150" />
</view>
<!-- 商品主图 -->
<image mode="widthFix" src="https://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/yWDmitPPmD.jpg?x-oss-process=image/resize,limit_1,w_700" />
<!-- 售罄遮罩 -->
<view class="whiteBg" wx:if="{{items&&items.oversoldFlag==0&&items.totalQty-0<=0}}">
<view class="cover">
<image mode="widthFix" src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/f254fe62-6dda-46f6-a2f4-a7b2aa0474df.png" />
</view>
</view>
</view>
</view>
<!-- 商品详情 -->
<view class="info" style="text-align:{{datas.componentData['initcharAlign']}};">
<view class="info-top">
<text class="name" wx:if="{{datas.componentData['nameShow']}}">
{{items!=null?items['productName']:'名称'}}
</text>
<view class="follower-wrap" wx:if="{{datas.componentData['followerShow']}}">
<view class="follower-num">
{{items!=null?Number(items['totalCollectionCount']) ? Number(items['totalCollectionCount']) : 0:0}}
<text class="follower-text">关注人数</text>
</view>
</view>
</view>
<!-- 已售 -->
<view>
<text wx:if="{{datas.componentData['alSaleShow']}}">已售{{items!=null? items['totalSalesCount'] :0}}件</text>
<text wx:if="{{datas.componentData['alSaleShow'] && datas.componentData['collectShow']}}">/</text>
<text wx:if="{{datas.componentData['collectShow']}}">剩余{{items!=null && items['qty']!=undefined ? (Number(items['qty']) > 0 ? Number(items['qty'] ): items.oversoldFlag==1?'数量充足':'数量不足') : ''}}</text>
<text wx:if="{{items!=null && (Number(items['qty']) ? Number(items['qty']) >= 0 : Number(items['saleQty']) >= 0)}}">件</text>
</view>
<!-- 标签 -->
<view class="marketing flex" wx:if="{{datas.componentData['marketingTag']&&datas.componentData['marketingStyle']==0&&items.marketingTag}}">
<view
class="item"
wx:for="{{items.marketingTag}}"
wx:key="index"
>
{{item.label}}
</view>
</view>
<!-- 底部 -->
<view class="bottom" wx:if="{{datas.componentData['goodsType'] ==1}}">
<!-- 价格 -->
<view class="priceItem flex">
<text class="price" wx:if="{{datas.componentData['priceShow']}}">￥{{items!=null?Number(items['minPrice']).toFixed(2):0}}</text>
<view class="vipPrice2 flex">
<view class="left" wx:if="{{showVipPrice(index)==true}}">
￥{{Number(items['minPriceAfterRecommendedCardPriceTable']).toFixed(2)}}
</view>
<view class="vipIcon line-clamp1" wx:if="{{showVipTag(index)==true}}">
{{items["recommendedCardMinPricePriceTableName"]}}
</view>
</view>
</view>
<!-- 收益样式一 -->
<block class="" wx:if="{{items!=null&&items['minProductGoodsCommission']&&items['minProductGoodsCommission']-0>0.01}}">
<view class="showCommission" wx:if="{{datas.componentData.commissionStyle==0}}">
<view class="commission-box">
<text>收益</text>
<text>￥{{Number(items['minProductGoodsCommission']).toFixed(2)}}</text>
</view>
</view>
</block>
<!-- 立即购买按钮 -->
<view class="buy-now" wx:if="{{items&&items.oversoldFlag==0&&items.totalQty-0<=0 && datas.componentData['paynow']}}">
已售罄
</view>
<view wx:if="{{(items&&items.totalQty-0>0||items&&items.oversoldFlag==1)&& datas.componentData['paynow']}}">
<text class="buy-now-icon iconfont-common {{datas.componentData.btnIcon}}"></text>
</view>
<view wx:else class="buy-now">
{{datas.componentData.btnTest}}
</view>
</view>
<!-- 底部展示标签列表 -->
<block wx:if="{{items!=null}}">
<view class="marketing flex" wx:if="{{datas.componentData.marketingTag&&datas.componentData.marketingStyle==1&&items.marketingTag}}">
<view
class="item"
wx:for="{{items.marketingTag}}"
wx:key="index"
>
{{item.label}}
</view>
</view>
</block>
<!-- 收益样式二 -->
<block wx:if="{{items!=null&&items['minProductGoodsCommission']&&items['minProductGoodsCommission']-0>0.01}}">
<view class="showCommissionTwo flex" wx:if="{{datas.componentData.commissionStyle==1}}">
<view class="commission-box">
<text class="iconfont-common common-iconfenxiang">
赚￥
<text style="font-size:32rpx;">
{{Number(items['minProductGoodsCommission']).toFixed(2)}}
</text>
</text>
</view>
</view>
</block>
</view>
<!-- 商户入口二 -->
<view class="merchantsEntrance flex" wx:if="{{datas.componentData.merchantsEntrance&&datas.componentData.merchantsEntranceType==1}}">
<view class="left flex" wx:if="{{items!=null}}">
<view class="logo">
<image mode='widthFix' src="http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/ppefWK8BS6.png?x-oss-process=image/resize,limit_1,w_150,h_150" />
</view>
<view class="name">{{items.orgName}}</view>
</view>
</view>
</view>
static/nativeComponents/GoodsList/GoodsItem/index.wxss 0 → 100644
.flex{
display: flex;
}
image{
width: 100%;
}
.merchantsEntrance{
padding: 8rpx 20rpx;
}
.merchantsEntrance .left{
align-items: center;
}
.merchantsEntrance .left .logo{
width: 52rpx;
height: 52rpx;
border-radius: 8rpx;
-webkit-border-radius: 8rpx;
-moz-border-radius: 8rpx;
-ms-border-radius: 8rpx;
-o-border-radius: 8rpx;
overflow: hidden;
background: #f5f5f5;
margin-right: 20rpx;
}
.imgBox{
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto 20rpx;
}
.goodsPicture{
width: 100%;
height: 100%;
position: relative;
}
.goodsPicture .saleWay{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: center;
}
.goodsPicture .saleWay .saleWayBg{
background: #eee;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.5;
}
.goodsPicture .angleSign{
position: absolute;
top: 0;
left: 0;
}
.whiteBg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(#fff, 0.7);
}
.whiteBg .cover {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 50%;
background-size: cover;
}
.whiteBg .cover img {
width: 100%;
height: 100%;
object-fit: contain;
}
.info{
padding: 10rpx 20rpx 24rpx;
position: relative;
background-color: white;
}
.info .name{
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.4em;
position: relative;
}
.info .follower-wrap{
position: relative;
font-size: 0.8em;
color: #999;
text-align: center;
height: 70rpx;
}
.info .follower-wrap .follower-num{
text-align: center;
font-size: 1em;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.info .follower-wrap .follower-text{
color: #999;
font-size: 0.7em;
text-align: center;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vipPrice1{
align-items: flex-end;
margin-top: 12rpx;
font-size: 24rpx;
}
.vipPrice1 .vipIcon{
min-width: 64rpx;
padding: 2rpx 4rpx;
height: 28rpx;
background: #333;
font-size: 20rpx;
line-height: 28rpx;
text-align: center;
color: #d7c7a1;
border-top-left-radius: 4rpx;
border-bottom-left-radius: 12rpx;
}
.vipPrice1 .right{
height: 28rpx;
color: #333;
font-weight: bold;
background: linear-gradient( 227deg, rgba(212, 195, 142, 1), rgba(252, 232, 162, 1) );
border-radius: 0rpx 12rpx 12rpx 0rpx;
font-size: 20rpx;
text-align: center;
padding: 0 8rpx 0 4rpx;
-webkit-border-radius: 0rpx 12rpx 12rpx 0rpx;
-moz-border-radius: 0rpx 12rpx 12rpx 0rpx;
-ms-border-radius: 0rpx 12rpx 12rpx 0rpx;
-o-border-radius: 0rpx 12rpx 12rpx 0rpx;
}
.priceItem {
align-items: flex-end;
}
.vipPrice2{
align-items: flex-end;
margin-top: 12rpx;
font-size: 24rpx;
}
.vipPrice2 .left{
color: #333;
font-weight: bold;
margin-left: 8rpx;
}
.vipPrice2 .vipIcon{
margin-left: 8rpx;
min-width: 64rpx;
padding: 2rpx 8rpx;
height: 28rpx;
background: #333;
font-size: 20rpx;
line-height: 28rpx;
text-align: center;
color: #d7c7a1;
border-radius: 12rpx;
border-top-left-radius: 2rpx;
-webkit-border-radius: 12rpx;
-moz-border-radius: 12rpx;
-ms-border-radius: 12rpx;
-o-border-radius: 12rpx;
}
.marketing {
align-items: center;
flex-wrap: wrap;
}
.marketing .item {
margin-top: 8rpx;
margin-right: 8rpx;
font-size: 20rpx;
padding: 0 12rpx;
border: 2rpx solid #ff5500;
color: #ff5500;
border-radius: 40rpx;
-webkit-border-radius: 40rpx;
-moz-border-radius: 40rpx;
-ms-border-radius: 40rpx;
-o-border-radius: 40rpx;
}
.bottom {
position: relative;
}
.price {
font-weight: 600;
margin-top: 12rpx;
}
\ No newline at end of file
static/nativeComponents/GoodsList/index.json 0 → 100644
{
"component": true,
"usingComponents": {
"goods-item":"./GoodsItem/index"
}
}
static/nativeComponents/GoodsList/index.wxml 0 → 100644
<!-- 商品列表组件 -->
<view class="goodsList">
<!-- 头部 -->
<view class="tops flex">
<view class="left flex">
<view class="img" wx:if="{{datas.componentData['titleIcon']}}">
<image mode="widthFix" src="http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/ppefWK8BS6.png?x-oss-process=image/resize,limit_1,w_150,h_150" />
</view>
<view class="title">{{datas.componentData['titles']}}</view>
</view>
<view class="moreTop" wx:if="{{datas.componentData['moreShow'] && datas.componentData.moreButtonSite=='top' && datas.componentData['goodsSource']!='assign'}}">
查看更多
<text class="jt"></text>
</view>
</view>
<!-- 网格布局 -->
<view
wx:if="{{datas.componentData.style==='list'}}"
class="goodsItem-list flex"
style="margin-left:{{-datas.componentData.proGap*2}}rpx;"
>
<view
wx:for="{{datas.componentData.goodsList}}"
wx:key="index"
class="item"
style="width:{{100/datas.componentData.columnNum}}%;padding-left:{{datas.componentData.proGap*2}}rpx"
>
<goods-item
class="goodsItem"
datas="{{datas}}"
items="{{datas.componentData.goodsList[index]}}"
indexs="{{index}}"
></goods-item>
</view>
</view>
</view>
static/nativeComponents/GoodsList/index.wxss 0 → 100644
.flex{
display: flex;
}
image{
width: 100%;
}
.tops{
justify-content: space-between;
align-items: center;
position: relative;
}
.tops .left{
align-items: center;
}
.tops .img{
width: 60rpx;
height: 60rpx;
margin-right: 20rpx;
}
.tops .title{
font-weight: bold;
color: #333;
font-size: 36rpx;
}
.moreTop{
position: absolute;
right: 10px;
text-align: right;
font-size: 13px;
color: #6b6b6b;
}
.moreTop .jt {
display: inline-block;
border-top: 1px solid;
border-right: 1px solid;
width: 10px;
height: 10px;
-webkit-transform: rotate(-135deg);
transform: rotate(405deg);
margin-left: 0px;
}
.goodsItem-list{
flex-wrap: wrap;
}
.goodsItem-list .item{
box-sizing: border-box;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment