Skip to content

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

暂存商品列表组件

parent 5ed31fd2
Showing with 972 additions and 3 deletions
build/webpack.dev.conf.js
......@@ -82,6 +82,6 @@ module.exports = merge(baseWebpackConfig, {
// inject: true
// }),
new FriendlyErrorsPlugin(),
new UglifyJsPlugin({ sourceMap: true })
// new UglifyJsPlugin({ sourceMap: true })
]
})
project.config.json
......@@ -31,6 +31,7 @@
"projectname": "mayi-mp-shop",
"simulatorType": "wechat",
"simulatorPluginLibVersion": {},
"libVersion": "2.14.3",
"condition": {
"search": {
"current": -1,
......
src/pages/home/main.json
{
"usingComponents": {
"banner": "../../../static/nativeComponents/Banner/index",
"waterfall-flow": "../../../static/nativeComponents/module/WaterfallFlow/index",
"banner": "/static/nativeComponents/Banner/index",
"goods-list": "/static/nativeComponents/GoodsList/index",
"waterfall-flow": "/static/nativeComponents/module/WaterfallFlow/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 @@
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.flex{
display: flex;
}
@mixin btn {
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.js 0 → 100644
const app = getApp();
const componentOptions = {
// 组件选项
options: {
multipleSlots: true
},
behaviors: [],
properties: {},
// 组件数据
data: {
isPageHidden: false, // 页面是否处于隐藏状态
datas: {
id: 7,
componentName: "商品列表",
componentCode: "goods-list",
componentType: 1,
queueNumber: 0,
componentInfo: {
visible: 1,
condition: "",
drawable: 0
},
componentData: {
goodsList: [
{
brandName: "",
bugRecommendedCardFlag: "false",
coverImage:
"https://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/yWDmitPPmD.jpg?x-oss-process=image/resize,limit_1,w_700",
defaultTags: ["freeShipping"],
extensionFieldJson: "",
goodsMaxPrice: "21.00",
goodsMinPrice: "21.00",
groupBuyFlag: "0",
haveGroupNum: "0",
maxPrice: "21.00",
minGoodsId: "99121",
minGoodsSuggestedRetailPrice: "18.600000",
minPrice: "21.00",
minProductGoodsId: "85531",
minProductGoodsMixid: "daadejqb50l7",
orgId: "1452",
orgName: "Air Jordan",
outerProductCode: "9fuMzUCl",
oversoldFlag: "1",
productGoodsMixId: "",
productId: "21724",
productImgUrl:
"https://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/yWDmitPPmD.jpg?x-oss-process=image/resize,limit_1,w_700",
productName: "热销 小白心里软",
productNature: "1",
productSaleType: "0",
productSecondName: "",
qty: "0",
recommendedCardMinPricePriceTableName: "",
saleTime: null,
saleWay: "1",
shopLogoUrl:
"/product/png/2d889aca-d9c7-41e3-9e08-76e3de2d50ba.png",
shopName: "Air Jordan",
stockSell: "0",
tagNames: "",
terminalProductId: "18785",
totalCollectionCount: "0",
totalQty: "0",
totalSalesCount: "0",
usedRecommendedCardFlag: "false",
marketingTag: [
{
key: "freeShipping",
label: "免邮"
}
]
},
{
brandName: "",
bugRecommendedCardFlag: "false",
coverImage:
"https://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/Ebs8TkSirK.png?x-oss-process=image/resize,limit_1,w_700",
defaultTags: [],
extensionFieldJson: "",
goodsMaxPrice: "800.00",
goodsMinPrice: "200.00",
groupBuyFlag: "0",
haveGroupNum: "0",
maxPrice: "800.00",
minGoodsId: "99344",
minGoodsSuggestedRetailPrice: "100.000000",
minPrice: "200.00",
minProductGoodsId: "92690",
minProductGoodsMixid: "emng64ho4rp3",
orgId: "1452",
orgName: "Air Jordan",
outerProductCode: "8vGrYIWZ",
oversoldFlag: "0",
productGoodsMixId: "",
productId: "21904",
productImgUrl:
"https://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/Ebs8TkSirK.png?x-oss-process=image/resize,limit_1,w_700",
productName: "测试刘==专用商品。。",
productNature: "1",
productSaleType: "0",
productSecondName: "",
qty: "400",
recommendedCardMinPricePriceTableName: "",
saleTime: null,
saleWay: "1",
shopLogoUrl:
"/product/png/2d889aca-d9c7-41e3-9e08-76e3de2d50ba.png",
shopName: "Air Jordan",
stockSell: "0",
tagNames: "",
terminalProductId: "22287",
totalCollectionCount: "0",
totalQty: "100",
totalSalesCount: "0",
usedRecommendedCardFlag: "false"
},
{
brandId: "65",
brandName: "三只松鼠",
bugRecommendedCardFlag: "false",
coverImage:
"https://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/GSjiWASDh3.jpg?x-oss-process=image/resize,limit_1,w_700",
defaultTags: [],
extensionFieldJson: "",
goodsMaxPrice: "10.00",
goodsMinPrice: "10.00",
groupBuyFlag: "0",
haveGroupNum: "0",
maxPrice: "10.00",
minGoodsId: "99537",
minGoodsSuggestedRetailPrice: "10.000000",
minPrice: "10.00",
minProductGoodsId: "92685",
minProductGoodsMixid: "lbsmteepkra4",
orgId: "1452",
orgName: "Air Jordan",
outerProductCode: "Z91MQdgf",
oversoldFlag: "1",
productGoodsMixId: "",
productId: "22077",
productImgUrl:
"https://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/SCdPMnX6wh.jpg?x-oss-process=image/resize,limit_1,w_700",
productName: "看图片",
productNature: "1",
productSaleType: "0",
productSecondName: "看图片",
qty: "0",
recommendedCardMinPricePriceTableName: "",
saleTime: null,
saleWay: "1",
shopLogoUrl:
"/product/png/2d889aca-d9c7-41e3-9e08-76e3de2d50ba.png",
shopName: "Air Jordan",
stockSell: "0",
tagNames: "",
terminalProductId: "22283",
totalCollectionCount: "0",
totalQty: "0",
totalSalesCount: "0",
usedRecommendedCardFlag: "false"
},
{
brandId: "65",
brandName: "三只松鼠",
bugRecommendedCardFlag: "false",
coverImage:
"https://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/hY7GyiXKf2.jpg?x-oss-process=image/resize,limit_1,w_700",
defaultTags: ["freeShipping"],
extensionFieldJson: "",
goodsMaxPrice: "10.00",
goodsMinPrice: "10.00",
groupBuyFlag: "0",
haveGroupNum: "0",
maxPrice: "10.00",
minGoodsId: "98888",
minGoodsSuggestedRetailPrice: "10.000000",
minPrice: "10.00",
minProductGoodsId: "85558",
minProductGoodsMixid: "na27hiltd3aa",
orgId: "1452",
orgName: "Air Jordan",
outerProductCode: "80x7V9Ud",
oversoldFlag: "1",
productGoodsMixId: "",
productId: "21509",
productImgUrl:
"https://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/hY7GyiXKf2.jpg?x-oss-process=image/resize,limit_1,w_700",
productName: "前端测试留言商品单规格",
productNature: "1",
productSaleType: "0",
productSecondName: "前端测试留言商品单规格",
qty: "0",
recommendedCardMinPricePriceTableName: "",
saleTime: null,
saleWay: "1",
shopLogoUrl:
"/product/png/2d889aca-d9c7-41e3-9e08-76e3de2d50ba.png",
shopName: "Air Jordan",
stockSell: "0",
tagNames: "",
terminalProductId: "18808",
totalCollectionCount: "1",
totalQty: "0",
totalSalesCount: "0",
usedRecommendedCardFlag: "false",
marketingTag: [
{
key: "freeShipping",
label: "免邮"
}
]
},
{
brandName: "",
bugRecommendedCardFlag: "false",
coverImage:
"https://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/CcxsBCNci5.jpg?x-oss-process=image/resize,limit_1,w_700",
defaultTags: [],
extensionFieldJson: "",
goodsMinPrice: "0.00",
groupBuyFlag: "0",
haveGroupNum: "0",
minGoodsId: "106001",
minGoodsSuggestedRetailPrice: "11.000000",
minPrice: "0.00",
minProductGoodsId: "92646",
minProductGoodsMixid: "p87o5mt2gnh8",
orgId: "1452",
orgName: "Air Jordan",
outerProductCode: "YCRz5Rti",
oversoldFlag: "0",
productGoodsMixId: "",
productId: "25122",
productImgUrl:
"https://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/CcxsBCNci5.jpg?x-oss-process=image/resize,limit_1,w_700",
productName: "组合333",
productNature: "1",
productSaleType: "1",
productSecondName: "",
qty: "0",
recommendedCardMinPricePriceTableName: "",
saleTime: null,
saleWay: "1",
shopLogoUrl:
"/product/png/2d889aca-d9c7-41e3-9e08-76e3de2d50ba.png",
shopName: "Air Jordan",
stockSell: "0",
tagNames: "",
terminalProductId: "22272",
totalCollectionCount: "0",
totalQty: "0",
totalSalesCount: "0",
usedRecommendedCardFlag: "false"
}
],
categoryId: "",
categoryName: "",
initProductArr: [],
titles: "这是标题",
content:
"这里是内容 可以编写需要的内容 测试测试测试测试测试测试测试测试测试",
link: "https://www.baidu.com/",
fontColor: "#ed6a0c",
goodsSource: "assign",
goodsType: 0,
style: "list",
imgPadding: 20,
moreShow: true,
moreButtonSite: "top",
rowNum: 2,
columnNum: 2,
proGap: 5,
titleCardGap: 10,
heapBgColorShow: true,
heapBgColor: "",
backgroundColorShow: true,
backgroundColor: "#fff",
borderColorShow: true,
borderColor: "#e0e0e0",
nameShow: true,
nameFontSize: 1,
imgSize: "0%",
nameColor: "#333333",
describeShow: true,
describeFontSize: 1,
priceShow: true,
priceFontSize: 0.8,
priceColor: "#f23030",
angleShow: false,
colorLayoutShow: false,
colorLayoutSite: "top",
initcharAlign: "left",
borderRadius: 0.3,
cardBorderRadius: 0,
collectShow: true,
followerShow: true,
followerColor: "",
alSaleShow: true,
followerFontSize: 0.6,
paynow: false,
priceMarking: true,
goodsSort: 0,
whetherFindDistributionCommission: true,
commissionColor: "",
commissionBgColor: "",
commissionStyle: 0,
angleSign: true,
angleSignType: 0,
angleSignImg:
"http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/1f7d246e-966c-4f3e-b09f-264bfa579b02.png",
angleSignSize: 25,
marketingTag: true,
vipPrice: false,
marketingStyle: 0,
marketingTagList: [
{
key: "recommend",
label: "推荐"
},
{
key: "special",
label: "特价"
},
{
key: "freeShipping",
label: "免邮"
},
{
key: "newGoods",
label: "新品"
}
],
btnIcon: "",
btnType: 6,
btnColor: "",
btnTest: "立即购买",
titleIcon: "/product/ppefWK8BS6.png",
cardShadow: true,
cardShadowSize: 1,
goodsBrand: false,
merchantsEntrance: true,
merchantsEntranceType: 0,
paddingList: [
{
name: "上",
value: 0
},
{
name: "下",
value: 0
},
{
name: "左",
value: 0
},
{
name: "右",
value: 0
}
]
}
}
},
// 数据监听器
observers: {},
// 组件方法
methods: {
init() {},
},
// 组件生命周期
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/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