52643018@qq.com
4 years ago
23 changed files with 47 additions and 2749 deletions
-
102components/big-coffee/big-coffee.less
-
74components/big-coffee/big-coffee.vue
-
55components/exclusive-plan/exclusive-plan.less
-
58components/exclusive-plan/exclusive-plan.vue
-
108components/health-tips/health-tips.less
-
102components/health-tips/health-tips.vue
-
112components/index-call/index-call.less
-
114components/index-call/index-call.vue
-
73components/index-category/index-category.less
-
69components/index-category/index-category.vue
-
114components/index-cube/index-cube.less
-
252components/index-cube/index-cube.vue
-
166components/index-grouping/index-grouping.less
-
94components/index-grouping/index-grouping.vue
-
216components/index-groupon/index-groupon.less
-
98components/index-groupon/index-groupon.vue
-
133components/index-seckill/index-seckill.less
-
160components/index-seckill/index-seckill.vue
-
260components/index-suit/index-suit.less
-
77components/index-suit/index-suit.vue
-
75components/waterfalls-flow/waterfalls-flow.less
-
99components/waterfalls-flow/waterfalls-flow.vue
-
185pages/index/index/index.vue
@ -1,102 +0,0 @@ |
|||
.big-coffee{ |
|||
background-color: #FFFFFF; |
|||
padding: 0 15px; |
|||
.title{ |
|||
padding: 10px 0px 0px 0; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
color: #000; |
|||
align-items: center; |
|||
|
|||
span:nth-child(1) { |
|||
font-size: 24px; |
|||
font-weight: bold; |
|||
line-height: 33px; |
|||
display: inline-block; |
|||
//padding-left: 6px; |
|||
//border-left: 4px solid #E7031C; |
|||
} |
|||
i{ |
|||
margin-left: 5px; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
font-size: 12px; |
|||
display: flex; |
|||
align-items: center; |
|||
text{ |
|||
font-size: 15px; |
|||
font-weight: 700; |
|||
margin-top: -8px; |
|||
margin-left: 5px; |
|||
} |
|||
} |
|||
} |
|||
.ul-list{ |
|||
.li-item{ |
|||
padding: 9px 0px; |
|||
display: flex; |
|||
align-items: center; |
|||
.left-info{ |
|||
width:122px; |
|||
height:122px; |
|||
image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
vertical-align:middle; |
|||
} |
|||
} |
|||
.right-info{ |
|||
flex: 1; |
|||
overflow: hidden; |
|||
padding-left: 18px; |
|||
.name{ |
|||
height: 48px; |
|||
color:#111111; |
|||
font-size: 16px; |
|||
line-height: 24px; |
|||
margin-bottom:29px; |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 2; |
|||
overflow: hidden; |
|||
} |
|||
.referrer{ |
|||
display: flex; |
|||
align-items: center; |
|||
.avatar{ |
|||
width: 34px; |
|||
height: 34px; |
|||
border-radius: 50%; |
|||
image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
.detail{ |
|||
flex: 1; |
|||
overflow: hidden; |
|||
padding-left: 7px; |
|||
.nick-name{ |
|||
color:#666666; |
|||
font-size: 12px; |
|||
line-height: 17px; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
.sub-intro{ |
|||
color: #999999; |
|||
font-size: 10px; |
|||
line-height: 14px; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,74 +0,0 @@ |
|||
<template> |
|||
<view class="big-coffee" :style="'margin-bottom: ' + meta.margin_bottom + 'px'"> |
|||
<view class="title" v-if="coffeeTitle && show"> |
|||
<span>{{coffeeTitle}}</span> |
|||
<!--<span data-link="/pages/article/coffeeList/coffeeList?type=1" bindtap="_jumpImg"> |
|||
更多 |
|||
<i class="iconfont icon-gengduo"></i> |
|||
</span>--> |
|||
</view> |
|||
<view class="ul-list"> |
|||
<view class="li-item" v-for="(item, index) in coffeeData" :key="index" :data-link="item.link" @tap="_jumpImg"> |
|||
<view class="left-info"> |
|||
<image :src="item.image"></image> |
|||
</view> |
|||
<view class="right-info"> |
|||
<view class="name"> |
|||
{{item.associate.title}} |
|||
</view> |
|||
<view class="referrer"> |
|||
<view class="avatar"> |
|||
<image :src="item.associate.author_avatar"></image> |
|||
</view> |
|||
<view class="detail"> |
|||
<view class="nick-name">推荐者：{{item.associate.author}}</view> |
|||
<view class="sub-intro">{{item.associate.author_title}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
|
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
|
|||
props: { |
|||
coffeeData: { |
|||
type: Array, |
|||
value: '' |
|||
}, |
|||
coffeeTitle: { |
|||
type: String, |
|||
value: '' |
|||
}, |
|||
show: { |
|||
type: Number, |
|||
value: '' |
|||
}, |
|||
meta: { |
|||
type: Object, |
|||
value: "" |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
_jumpImg(e) { |
|||
var link = e.currentTarget.dataset.link; |
|||
if (!link || link == 'uto_miniprogram') return; |
|||
wx.navigateTo({ |
|||
url: link |
|||
}); |
|||
}, |
|||
}, |
|||
|
|||
}; |
|||
|
|||
</script> |
|||
<style rel="stylesheet/less" lang="less"> |
|||
@import "big-coffee"; |
|||
</style> |
|||
@ -1,55 +0,0 @@ |
|||
.exclusive-plan{ |
|||
background-color: #FFFFFF; |
|||
.title{ |
|||
padding: 10px 15px 5px 15px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
color: #000; |
|||
align-items: center; |
|||
|
|||
span:nth-child(1) { |
|||
font-size: 24px; |
|||
font-weight: bold; |
|||
line-height: 33px; |
|||
display: inline-block; |
|||
//padding-left: 6px; |
|||
//border-left: 4px solid #E7031C; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
font-size: 12px; |
|||
display: flex; |
|||
align-items: center; |
|||
text{ |
|||
font-size: 15px; |
|||
font-weight: 700; |
|||
margin-left: 5px; |
|||
} |
|||
} |
|||
} |
|||
.content-plans{ |
|||
//padding:0px 0px 20px 0px; |
|||
white-space: nowrap; |
|||
overflow: auto; |
|||
.item{ |
|||
display: inline-block; |
|||
width:240px; |
|||
height: 125px; |
|||
margin: 5px; |
|||
|
|||
&:first-child { |
|||
margin-left: 15px; |
|||
} |
|||
&:last-child { |
|||
margin-right: 15px; |
|||
} |
|||
image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
@ -1,58 +0,0 @@ |
|||
<template> |
|||
<view class="exclusive-plan" :style="'margin-bottom: ' + meta.margin_bottom + 'px'"> |
|||
<view class="title" v-if="planTitle && show"> |
|||
<span>{{planTitle}}</span> |
|||
<span data-link="/pages/article/list/list?type=2" @tap="_jumpImg">更多 |
|||
<text class="iconfont icon-gengduo"></text> |
|||
</span> |
|||
</view> |
|||
<view class="content-plans"> |
|||
<view class="item" v-for="(item, index) in planData" :key="index" :data-link="item.link" @tap="_jumpImg"> |
|||
<image :src="item.image"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
|
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
props: { |
|||
planData: { |
|||
type: Array, |
|||
value: '' |
|||
}, |
|||
planTitle: { |
|||
type: String, |
|||
value: '' |
|||
}, |
|||
show: { |
|||
type: Number, |
|||
value: '' |
|||
}, |
|||
meta: { |
|||
type: Object, |
|||
value: "" |
|||
} |
|||
}, |
|||
options: { |
|||
addGlobalClass: true |
|||
}, |
|||
methods: { |
|||
|
|||
_jumpImg(e) { |
|||
var link = e.currentTarget.dataset.link; |
|||
if (!link || link == 'uto_miniprogram') return; |
|||
wx.navigateTo({ |
|||
url: link |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style rel="stylesheet/less" lang="less"> |
|||
@import "exclusive-plan"; |
|||
</style> |
|||
@ -1,108 +0,0 @@ |
|||
.health-tips{ |
|||
background-color: #FFFFFF; |
|||
padding: 0 0px; |
|||
//margin-bottom:15px; |
|||
.title{ |
|||
padding: 10px 15px 0px 15px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
color: #000; |
|||
align-items: center; |
|||
|
|||
span:nth-child(1) { |
|||
font-size: 24px; |
|||
font-weight: bold; |
|||
line-height: 33px; |
|||
display: inline-block; |
|||
//padding-left: 6px; |
|||
//border-left: 4px solid #E7031C; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
font-size: 12px; |
|||
display: flex; |
|||
align-items: center; |
|||
text{ |
|||
font-size: 15px; |
|||
font-weight: 700; |
|||
margin-top: -8px; |
|||
margin-left: 5px; |
|||
} |
|||
} |
|||
} |
|||
.ul-content{ |
|||
.li-item{ |
|||
.top-box{ |
|||
padding: 11px 15px 8px 15px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.topic{ |
|||
color: #111111; |
|||
font-size: 14px; |
|||
line-height: 24px; |
|||
|
|||
font-weight: 700; |
|||
} |
|||
.change{ |
|||
height: 19px; |
|||
border-radius:4px; |
|||
border: 1px solid #333333; |
|||
width: 44px; |
|||
text-align: center; |
|||
color: #333333; |
|||
font-size: 11px; |
|||
} |
|||
} |
|||
.center-box{ |
|||
padding:0 15px 9px 15px; |
|||
color: #999999; |
|||
font-size: 12px; |
|||
line-height: 19px; |
|||
} |
|||
.bottom-box{ |
|||
overflow: auto; |
|||
padding:18px 10px; |
|||
display: flex; |
|||
flex-wrap: nowrap; |
|||
.item{ |
|||
margin: 0 5px; |
|||
.info{ |
|||
.img-box{ |
|||
width: 100px; |
|||
height: 100px; |
|||
image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
} |
|||
.name{ |
|||
padding:6px 0 3px 0; |
|||
color:#333333; |
|||
font-size: 12px; |
|||
line-height: 19px; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
} |
|||
.money{ |
|||
color: #E7031C; |
|||
font-size: 11px; |
|||
line-height: 16px; |
|||
span{ |
|||
color: #999999; |
|||
font-size: 10px; |
|||
line-height: 14px; |
|||
text-decoration: line-through; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,102 +0,0 @@ |
|||
<template> |
|||
<view class="health-tips" :style="'margin-bottom: ' + meta.margin_bottom + 'px'"> |
|||
<view class="title" v-if="title && show"> |
|||
<span>{{title}}</span> |
|||
</view> |
|||
<view class="ul-content"> |
|||
<view class="li-item" v-if="tipsData"> |
|||
<view class="top-box"> |
|||
<view class="topic"> |
|||
{{tipsData.name}} |
|||
</view> |
|||
<view class="change" @tap="_changeItem"> |
|||
换一换 |
|||
</view> |
|||
</view> |
|||
<view class="center-box"> |
|||
{{tipsData.meta.subtitle}} |
|||
</view> |
|||
<view class="bottom-box"> |
|||
<view class="item" :data-id="item.associate.id" v-for="(item, index) in tipsData.children" :key="index" @tap="_jumpToDetail"> |
|||
<view class="info"> |
|||
<view class="img-box"> |
|||
<image :src="item.associate.img"></image> |
|||
</view> |
|||
<view class="name"> |
|||
{{item.associate.name}} |
|||
</view> |
|||
<view class="money"> |
|||
￥{{item.associate.sell_price}} |
|||
<span>￥{{item.associate.market_price}}</span> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
tipsData: '', |
|||
tapIndex: 0 |
|||
}; |
|||
}, |
|||
props: { |
|||
healthData: { |
|||
type: Array, |
|||
value: '' |
|||
}, |
|||
title: { |
|||
type: String, |
|||
value: '' |
|||
}, |
|||
show: { |
|||
type: Number, |
|||
value: '' |
|||
}, |
|||
meta: { |
|||
type: Object, |
|||
value: "" |
|||
} |
|||
|
|||
}, |
|||
|
|||
mounted() { |
|||
this.tipsData= this.healthData[0]; |
|||
} , |
|||
|
|||
//组件的方法 |
|||
methods: { |
|||
_changeItem(e) { |
|||
var index = this.tapIndex; |
|||
if (index == this.healthData.length - 1) { |
|||
index = 0; |
|||
} else { |
|||
index++; |
|||
} |
|||
this.tipsData= this.healthData[0]; |
|||
this.tapIndex= index; |
|||
}, |
|||
|
|||
_jumpToDetail(e) { |
|||
var id = e.currentTarget.dataset.id; |
|||
wx.navigateTo({ |
|||
url: `/pages/store/detail/detail?id=${id}` |
|||
}); |
|||
}, |
|||
|
|||
|
|||
}, |
|||
|
|||
|
|||
|
|||
}; |
|||
</script> |
|||
|
|||
<style rel="stylesheet/less" lang="less"> |
|||
@import "health-tips"; |
|||
</style> |
|||
@ -1,112 +0,0 @@ |
|||
@import '../../common/css/global'; |
|||
//dacall |
|||
.seckill-box{ |
|||
background: #FFFFFF; |
|||
padding:10px 15px; |
|||
.title{ |
|||
height: 35px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
color: #000; |
|||
line-height: 35px; |
|||
|
|||
span:nth-child(1) { |
|||
font-size: 22px; |
|||
font-weight: bold; |
|||
display: inline-block; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
font-size: 12px; |
|||
display: flex; |
|||
align-items: center; |
|||
text{ |
|||
&.iconfont{ |
|||
font-size: 15px; |
|||
font-weight: 600; |
|||
margin-left: 5px; |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
.seckill-info{ |
|||
display: flex; |
|||
align-items: flex-start; |
|||
margin-top: 10px; |
|||
.left{ |
|||
width: 100px; |
|||
height: 100px; |
|||
image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
.right{ |
|||
flex: 1; |
|||
margin-left: 10px; |
|||
overflow: hidden; |
|||
.goods-name{ |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
font-size: 16px; |
|||
} |
|||
.price-box { |
|||
color: #e50303; |
|||
font-size: 18px; |
|||
.old{ |
|||
font-size: 12px; |
|||
color: #9c9c9c; |
|||
text-decoration: line-through; |
|||
} |
|||
|
|||
&.free-money{ |
|||
font-size: 14px; |
|||
color: #9C9C9C; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.money{ |
|||
display: flex; |
|||
align-items: center; |
|||
.new { |
|||
font-size: 18px; |
|||
color: @globalColor; |
|||
} |
|||
.old{ |
|||
font-size: 10px; |
|||
margin-left: 5px; |
|||
text-decoration: line-through; |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
.seckill-time{ |
|||
display: flex; |
|||
align-items: flex-end; |
|||
justify-content: space-between; |
|||
.free{ |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
flex: 1; |
|||
} |
|||
|
|||
.buy{ |
|||
width: 70px; |
|||
height: 25px; |
|||
border-radius: 50px; |
|||
color: #fff; |
|||
background:#FB5054; |
|||
font-size: 12px; |
|||
line-height: 25px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
@ -1,114 +0,0 @@ |
|||
<template> |
|||
<!--打call--> |
|||
<view class="seckill-box" :style="'margin-bottom: ' + meta.margin_bottom + 'px'"> |
|||
<view class="title " data-src="/pages/store/callList/callList" @tap="_jumpImg"> |
|||
<span>打Call免费领</span> |
|||
<span>更多 |
|||
<text class="iconfont icon-gengduo"></text> |
|||
</span> |
|||
</view> |
|||
<view v-for="(item, index) in callData" :key="index" > |
|||
<view class="seckill-info" :data-goods="item.associate.goods.id" :data-id="item.associate_id" @tap="_jumpCall"> |
|||
<view class="left"> |
|||
<image :src="item.associate.img"></image> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="goods-name"> |
|||
{{item.associate.label}} |
|||
</view> |
|||
<view class="price-box free-money"> |
|||
<view class="money"> |
|||
<text class="new">￥{{item.associate.goods.sell_price}}</text> |
|||
<text class="old">￥{{item.associate.goods.market_price}}</text> |
|||
</view> |
|||
<view class="nun"> |
|||
限量{{item.associate.limit}}件 |
|||
</view> |
|||
</view> |
|||
<view class="seckill-time"> |
|||
<view v-if="item.associate.activity_status == 'NoBegin'"> |
|||
<seckill :end="item.associate.ends_at" typename="集call" :starts="item.associate.starts_at" :server="server" mold="index"></seckill> |
|||
</view> |
|||
<view class="free" v-else> |
|||
集满{{item.associate.per_count}}个Call即可免费领 |
|||
</view> |
|||
<view :style="'background: ' + config.mainColor" class="buy"> |
|||
去打Call |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</template> |
|||
<script> |
|||
import {pageLogin, getUrl,config} from '../../common/js/utils.js'; |
|||
import seckill from "../seckill/seckill"; |
|||
|
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
|
|||
components: { |
|||
seckill |
|||
}, |
|||
props: { |
|||
callData: { |
|||
type: Array, |
|||
value: '' |
|||
}, |
|||
isLogin: { |
|||
type: Boolean, |
|||
value: '' |
|||
}, |
|||
config: { |
|||
type: Object, |
|||
value: '' |
|||
}, |
|||
server: { |
|||
type: String, |
|||
value: '' |
|||
}, |
|||
meta: { |
|||
type: Object, |
|||
value: "" |
|||
} |
|||
}, |
|||
options: { |
|||
addGlobalClass: true |
|||
}, |
|||
//组件的方法 |
|||
methods: { |
|||
_jumpImg(e) { |
|||
var src = e.currentTarget.dataset.src; |
|||
if (!src || src == 'uto_miniprogram') return; |
|||
wx.navigateTo({ |
|||
url: src |
|||
}); |
|||
}, |
|||
|
|||
_jumpCall(e) { |
|||
if (this.isLogin) { |
|||
var id = e.currentTarget.dataset.id; |
|||
wx.navigateTo({ |
|||
url: '/pages/store/call/call?id=' + id |
|||
}); |
|||
} else { |
|||
wx.showModal({ |
|||
content: '请先登录', |
|||
success: res => { |
|||
if (res.confirm || !res.cancel && !res.confirm) { |
|||
pageLogin(getUrl()); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
<style rel="stylesheet/less" lang="less"> |
|||
@import "index-call"; |
|||
</style> |
|||
@ -1,73 +0,0 @@ |
|||
//最佳销售单品 |
|||
.index-categrory{ |
|||
.best { |
|||
overflow: hidden; |
|||
|
|||
.title { |
|||
padding:10px 15px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
color: #000; |
|||
align-items: center; |
|||
background: #FFFFFF; |
|||
span:nth-child(1) { |
|||
font-size: 22px; |
|||
font-weight: bold; |
|||
display: inline-block; |
|||
//padding-left: 6px; |
|||
//border-left: 4px solid #E7031C; |
|||
|
|||
} |
|||
} |
|||
|
|||
.SalesGoods-box { |
|||
|
|||
.SalesGoods-item { |
|||
text-align: center; |
|||
display: inline-block; |
|||
width: 33.33%; |
|||
padding: 0 3px; |
|||
box-sizing: border-box; |
|||
vertical-align: middle; |
|||
margin-bottom: 6px; |
|||
|
|||
.item { |
|||
background: #FFFFFF; |
|||
} |
|||
} |
|||
|
|||
.slider-image { |
|||
width: 100%; |
|||
} |
|||
.goods-name { |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
padding-left: 2px; |
|||
} |
|||
|
|||
.money-box { |
|||
display: flex; |
|||
align-items: center; |
|||
padding-left: 7px; |
|||
.money-now { |
|||
color: red; |
|||
font-size: 12px; |
|||
} |
|||
.money-old { |
|||
color: #c7c7c7; |
|||
font-size: 13px; |
|||
text-decoration: line-through; |
|||
} |
|||
} |
|||
} |
|||
.button-box { |
|||
width: 100%; |
|||
height: 44px; |
|||
text-align: center; |
|||
line-height: 44px; |
|||
background: #FFFFFF; |
|||
} |
|||
} |
|||
|
|||
} |
|||
@ -1,69 +0,0 @@ |
|||
<template> |
|||
<!--最佳销售单品--> |
|||
<view> |
|||
<view class="index-categrory" v-for="(items, idx) in categoryData" :key="idx" :style="'margin-bottom: ' + meta.margin_bottom + 'px'"> |
|||
<view class="best"> |
|||
<view class="title"> |
|||
<span>{{items.meta.name}}</span> |
|||
</view> |
|||
<view class="SalesGoods-box"> |
|||
<view class="SalesGoods-item" :data-id="item.id" v-for="(item, index) in items.goodsList" :key="index" @tap="_jumpToDetail"> |
|||
<view class="item"> |
|||
<image mode="widthFix" class="slider-image" :src="item.img" :alt="item.image"></image> |
|||
<view class="goods-name">{{item.name}}</view> |
|||
<view class="money-box"> |
|||
<view class="money-now">￥{{item.sell_price}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="button-box" data-src="/pages/store/list/list" @tap="_jumpImg"> |
|||
查看全部商品 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</template> |
|||
<script> |
|||
|
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
|
|||
props: { |
|||
categoryData: { |
|||
type: Array, |
|||
value: '' |
|||
}, |
|||
meta: { |
|||
type: Object, |
|||
value: "" |
|||
} |
|||
}, |
|||
|
|||
//组件的方法 |
|||
methods: { |
|||
_jumpToDetail(e) { |
|||
var id = e.currentTarget.dataset.id; |
|||
wx.navigateTo({ |
|||
url: `/pages/store/detail/detail?id=${id}` |
|||
}); |
|||
}, |
|||
|
|||
_jumpImg(e) { |
|||
var src = e.currentTarget.dataset.src; |
|||
if (!src || src == 'uto_miniprogram') return; |
|||
wx.navigateTo({ |
|||
url: src |
|||
}); |
|||
} |
|||
|
|||
}, |
|||
|
|||
}; |
|||
</script> |
|||
<style rel="stylesheet/less" lang="less"> |
|||
@import "index-category"; |
|||
</style> |
|||
@ -1,114 +0,0 @@ |
|||
//图片魔方 |
|||
.picture-cube{ |
|||
background-color: #FFFFFF; |
|||
.title{ |
|||
color:#111111; |
|||
padding: 20px 15px; |
|||
font-size:22px; |
|||
font-weight: 700; |
|||
span{ |
|||
display: inline-block; |
|||
|
|||
/*padding-left:6px; |
|||
border-left:4px solid #E7031C;*/ |
|||
} |
|||
} |
|||
//一图模式 |
|||
.one-mode{ |
|||
image{ |
|||
box-sizing: border-box; |
|||
|
|||
width: 100%; |
|||
} |
|||
} |
|||
//二图模式 |
|||
.two-mode{ |
|||
// 第一种表现形式 |
|||
.first-show{ |
|||
display: flex; |
|||
padding: 5px; |
|||
.item{ |
|||
flex: 1; |
|||
padding: 5px; |
|||
image{ |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
.common-show{ |
|||
display: flex; |
|||
.item{ |
|||
flex: 1; |
|||
padding: 5px; |
|||
image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
.two-item{ |
|||
flex: 2; |
|||
padding: 5px; |
|||
image{ |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
// 三图模式 |
|||
.three-mode{ |
|||
.first-show{ |
|||
display: flex; |
|||
padding: 5px; |
|||
.item{ |
|||
flex: 1; |
|||
padding: 5px; |
|||
image{ |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
.common-show{ |
|||
display: flex; |
|||
.item{ |
|||
flex: 1; |
|||
padding: 5px; |
|||
image{ |
|||
width: 100%; |
|||
} |
|||
.info{ |
|||
height: 50%; |
|||
padding: 5px; |
|||
image{ |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
// 四图模式 |
|||
.four-mode{ |
|||
.first-show{ |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding: 5px; |
|||
.item{ |
|||
width: 50%; |
|||
padding: 5px; |
|||
image{ |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
.second-show{ |
|||
display: flex; |
|||
.item{ |
|||
flex: 1; |
|||
padding: 5px; |
|||
image{ |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
@ -1,252 +0,0 @@ |
|||
<template> |
|||
<view class="picture-cube" :style="{marginBottom: meta.margin_bottom + 'px',background: meta.background_color}"> |
|||
<!--一图模式--> |
|||
<view class="one-mode" v-if="showType == '1_1'"> |
|||
<view class="title" v-if="cubeTitle && show"> |
|||
<span>{{cubeTitle}}</span> |
|||
</view> |
|||
<view :style="' padding-left: ' + meta.padding_left + 'px; padding-right: ' + meta.padding_right + 'px; padding-bottom: ' + meta.padding_bottom + 'px; padding-top: ' + meta.padding_top + 'px;'"> |
|||
<navigator target="miniProgram" hover-class="none" v-if="cubeData[0].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator"> |
|||
<image mode="widthFix" :src="cubeData[0].image"></image> |
|||
</navigator> |
|||
<image mode="widthFix" :src="cubeData[0].image" v-else :data-src="cubeData[0].link" @tap="_jumpLink"></image> |
|||
</view> |
|||
</view> |
|||
<!--二图模式--> |
|||
<view class="two-mode" v-if="mode == 2"> |
|||
<view class="title" v-if="cubeTitle && show"> |
|||
<span>{{cubeTitle}}</span> |
|||
</view> |
|||
<!--第一种表现形式--> |
|||
<view class="first-show" v-if="showType == '2_1'"> |
|||
<view class="item"> |
|||
<navigator target="miniProgram" hover-class="none" v-if="cubeData[0].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator"> |
|||
<image mode="widthFix" :src="cubeData[0].image"></image> |
|||
</navigator> |
|||
<image mode="widthFix" :src="cubeData[0].image" v-else :data-src="cubeData[0].link" @tap="_jumpLink"></image> |
|||
</view> |
|||
<view class="item"> |
|||
<navigator target="miniProgram" hover-class="none" v-if="cubeData[1].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator"> |
|||
<image mode="widthFix" :src="cubeData[1].image"></image> |
|||
</navigator> |
|||
<image mode="widthFix" :src="cubeData[1].image" v-else :data-src="cubeData[1].link" @tap="_jumpLink"></image> |
|||
</view> |
|||
</view> |
|||
<!--第二种表现形式--> |
|||
<view class="common-show" v-if="showType == '2_2'"> |
|||
<view class="item"> |
|||
<navigator target="miniProgram" hover-class="none" v-if="cubeData[0].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator"> |
|||
<image mode="widthFix" :src="cubeData[0].image"></image> |
|||
</navigator> |
|||
<image :src="cubeData[0].image" v-else :data-src="cubeData[0].link" @tap="_jumpLink"></image> |
|||
</view> |
|||
<view class="two-item"> |
|||
<navigator target="miniProgram" hover-class="none" v-if="cubeData[1].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator"> |
|||
<image mode="widthFix" :src="cubeData[1].image"></image> |
|||
</navigator> |
|||
<image mode="widthFix" :src="cubeData[1].image" v-else :data-src="cubeData[1].link" @tap="_jumpLink"></image> |
|||
</view> |
|||
</view> |
|||
<!--第三种表现形式--> |
|||
<view class="common-show" v-if="showType == '2_3'"> |
|||
<view class="two-item"> |
|||
<navigator target="miniProgram" hover-class="none" v-if="cubeData[0].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator"> |
|||
<image mode="widthFix" :src="cubeData[0].image"></image> |
|||
</navigator> |
|||
<image mode="widthFix" :src="cubeData[0].image" v-else :data-src="cubeData[0].link" @tap="_jumpLink"></image> |
|||
</view> |
|||
<view class="item"> |
|||
<navigator target="miniProgram" hover-class="none" v-if="cubeData[1].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator"> |
|||
<image mode="widthFix" :src="cubeData[1].image"></image> |
|||
</navigator> |
|||
<image :src="cubeData[1].image" v-else :data-src="cubeData[1].link" @tap="_jumpLink"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!--三图模式--> |
|||
<view class="three-mode" v-if="mode == 3"> |
|||
<view class="title" v-if="cubeTitle && show"> |
|||
<span>{{cubeTitle}}</span> |
|||
</view> |
|||
<!--第一种表现形式--> |
|||
<view class="first-show" v-if="showType == '3_1'"> |
|||
<view class="item"> |
|||
<navigator target="miniProgram" hover-class="none" v-if="cubeData[0].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator"> |
|||
<image mode="widthFix" :src="cubeData[0].image"></image> |
|||
</navigator> |
|||
<image mode="widthFix" :src="cubeData[0].image" v-else :data-src="cubeData[0].link" @tap="_jumpLink"></image> |
|||
</view> |
|||
<view class="item"> |
|||
<navigator target="miniProgram" hover-class="none" v-if="cubeData[1].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator"> |
|||
<image mode="widthFix" :src="cubeData[1].image"></image> |
|||
</navigator> |
|||
<image mode="widthFix" :src="cubeData[1].image" v-else :data-src="cubeData[1].link" @tap="_jumpLink"></image> |
|||
</view> |
|||
<view class="item"> |
|||
<navigator target="miniProgram" hover-class="none" v-if="cubeData[2].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator"> |
|||
<image mode="widthFix" :src="cubeData[2].image"></image> |
|||
</navigator> |
|||
<image mode="widthFix" :src="cubeData[2].image" v-else :data-src="cubeData[2].link" @tap="_jumpLink"></image> |
|||
</view> |
|||
</view> |
|||
<!--第二种表现形式--> |
|||
<view class="common-show" v-if="showType == '3_2'"> |
|||
<view class="item"> |
|||
<navigator target="miniProgram" hover-class="none" v-if="cubeData[0].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator"> |
|||
<image mode="widthFix" :src="cubeData[0].image"></image> |
|||
</navigator> |
|||
<image mode="widthFix" :src="cubeData[0].image" v-else :data-src="cubeData[0].link" @tap="_jumpLink"></image> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="info"> |
|||
<navigator target="miniProgram" hover-class="none" v-if="cubeData[1].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator"> |
|||
<image mode="widthFix" :src="cubeData[1].image"></image> |
|||
</navigator> |
|||
<image :src="cubeData[1].image" v-else :data-src="cubeData[1].link" @tap="_jumpLink"></image> |
|||
</view> |
|||
<view class="info"> |
|||
<navigator target="miniProgram" hover-class="none" v-if="cubeData[2].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator"> |
|||
<image mode="widthFix" :src="cubeData[2].image"></image> |
|||
</navigator> |
|||
<image :src="cubeData[2].image" v-else :data-src="cubeData[2].link" @tap="_jumpLink"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!--第三种表现形式--> |
|||
<view class="common-show" v-if="showType == '3_3'"> |
|||
<view class="item"> |
|||
<view class="info"> |
|||
<navigator target="miniProgram" hover-class="none" v-if="cubeData[1].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator"> |
|||
<image mode="widthFix" :src="cubeData[1].image"></image> |
|||
</navigator> |
|||
<image :src="cubeData[1].image" v-else :data-src="cubeData[1].link" @tap="_jumpLink"></image> |
|||
</view> |
|||
<view class="info"> |
|||
<navigator target="miniProgram" hover-class="none" v-if="cubeData[2].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator"> |
|||
<image mode="widthFix" :src="cubeData[2].image"></image> |
|||
</navigator> |
|||
<image :src="cubeData[2].image" v-else :data-src="cubeData[2].link" @tap="_jumpLink"></image> |
|||
</view> |
|||
</view> |
|||
<view class="item"> |
|||
<navigator target="miniProgram" hover-class="none" v-if="cubeData[0].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator"> |
|||
<image mode="widthFix" :src="cubeData[0].image"></image> |
|||
</navigator> |
|||
<image mode="widthFix" :src="cubeData[0].image" v-else :data-src="cubeData[0].link" @tap="_jumpLink"></image> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
<!--四图模式--> |
|||
<view class="four-mode" v-if="mode == 4"> |
|||
<view class="title" v-if="cubeTitle && show"> |
|||
<span>{{cubeTitle}}</span> |
|||
</view> |
|||
<!--第一种表现形式--> |
|||
<view class="first-show" v-if="showType == '4_1'"> |
|||
<view class="item" v-for="(item, index) in cubeData" :key="index" > |
|||
<navigator target="miniProgram" hover-class="none" v-if="item.link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator"> |
|||
<image mode="widthFix" :src="item.image"></image> |
|||
</navigator> |
|||
<image mode="widthFix" :src="item.image" v-else :data-src="item.link" @tap="_jumpLink"></image> |
|||
</view> |
|||
</view> |
|||
<!--第二种表现形式--> |
|||
<view class="second-show" v-if="showType == '4_2'"> |
|||
<view class="item" v-for="(item, index) in cubeData" :key="index" > |
|||
<navigator target="miniProgram" hover-class="none" v-if="item.link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator"> |
|||
<image mode="widthFix" :src="item.image"></image> |
|||
</navigator> |
|||
<image mode="widthFix" :src="item.image" v-else :data-src="item.link" @tap="_jumpLink"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
mode: '', |
|||
bottom: '' |
|||
}; |
|||
}, |
|||
|
|||
props: { |
|||
|
|||
showType: { |
|||
type: String, |
|||
value: '' |
|||
}, |
|||
cubeData: { |
|||
type: Array, |
|||
value: '' |
|||
}, |
|||
cubeTitle: { |
|||
type: String, |
|||
value: '' |
|||
}, |
|||
show: { |
|||
type: Number, |
|||
value: '' |
|||
}, |
|||
meta: { |
|||
type: Object, |
|||
value: "" |
|||
} , |
|||
isAgent:{ |
|||
type:Number, |
|||
value:'' |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
var type = this.showType; |
|||
var mode = ''; |
|||
mode = type.split('_')[0]; |
|||
this.mode=mode; |
|||
}, |
|||
|
|||
//组件的方法 |
|||
methods: { |
|||
//图片跳链接 |
|||
_jumpLink(e) { |
|||
var src = e.currentTarget.dataset.src; |
|||
if (!src || src == 'uto_miniprogram') return; |
|||
if(src == '/pages/distribution/distributionCenter/distributionCenter'){ |
|||
var token = this.$cookieStorage.get('user_token'); |
|||
if(token){ |
|||
var is_agent = this.isAgent; |
|||
//如果不是分销员 |
|||
if(is_agent == 1){ |
|||
wx.navigateTo({ |
|||
url:'/pages/distribution/distributionCenter/distributionCenter' |
|||
}) |
|||
} else{ |
|||
wx.navigateTo({ |
|||
url:'/pages/distribution/applyDistribution/applyDistribution' |
|||
}) |
|||
} |
|||
|
|||
} else{ |
|||
var url = 'pages/index/index/index'; |
|||
wx.navigateTo({ |
|||
url: '/pages/user/register/register?url=' + url |
|||
}) |
|||
} |
|||
} else{ |
|||
wx.navigateTo({ |
|||
url: src |
|||
}); |
|||
} |
|||
|
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
|
|||
<style rel="stylesheet/less" lang="less"> |
|||
@import "index-cube"; |
|||
</style> |
|||
@ -1,166 +0,0 @@ |
|||
@import '../../common/css/global'; |
|||
.g-main { |
|||
position: relative; |
|||
|
|||
.m-lead { |
|||
font-size: 13px; |
|||
background: #ffffff; |
|||
padding:10px 15px; |
|||
|
|||
.ul-box { |
|||
|
|||
display: flex; |
|||
display: -webkit-flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
height: 100%; |
|||
.li-box { |
|||
position: relative; |
|||
flex: 1; |
|||
width: 1px; |
|||
height: 100%; |
|||
span { |
|||
display: inline-block; |
|||
font-size: 22px; |
|||
//padding-left: 6px; |
|||
//border-left: 4px solid #E7031C; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.hover { |
|||
border-bottom: 2px solid #333; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
span.active { |
|||
font-size: 17px; |
|||
font-weight: bold; |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
border-bottom: 2px solid #000000; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.grouping-tap-box { |
|||
height: 45px; |
|||
line-height: 45px; |
|||
display: flex; |
|||
align-items: center; |
|||
background: #FFFFFF; |
|||
margin-bottom: 10px; |
|||
color: #999999; |
|||
.tap-item { |
|||
flex: 1; |
|||
text-align: center; |
|||
|
|||
|
|||
&.active { |
|||
span { |
|||
position: relative; |
|||
color: @globalColor; |
|||
&:after { |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: -12px; |
|||
left: -10px; |
|||
right: -10px; |
|||
height: 2px; |
|||
background: @globalColor; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.m-content { |
|||
padding: 10px 15px; |
|||
padding-top: 0; |
|||
|
|||
&.g-bg { |
|||
background: #F3F3F3; |
|||
} |
|||
.m-main { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
flex-wrap: wrap; |
|||
align-content: space-between; |
|||
|
|||
image { |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
display: block; |
|||
} |
|||
.img-box { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
margin-bottom: 10px; |
|||
.description { |
|||
position: absolute; |
|||
width: 100%; |
|||
left: 0; |
|||
bottom: 0; |
|||
height: 30px; |
|||
line-height: 30px; |
|||
text-indent: 5px; |
|||
color: #fff; |
|||
background: rgba(0, 0, 0, .5); |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
white-space: nowrap; |
|||
font-size: 14px; |
|||
} |
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
.goods_box { |
|||
width: 49%; |
|||
background: #ffffff; |
|||
margin-bottom: 5px; |
|||
box-shadow:0px 1px 4px 0px rgba(210,210,210,0.5); |
|||
overflow: hidden; |
|||
.goods_image { |
|||
position: relative; |
|||
padding-top: 100%; |
|||
width: 100%; |
|||
|
|||
image { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
height: 100%; |
|||
width: 100%; |
|||
object-fit: cover; |
|||
object-position: center center; |
|||
} |
|||
} |
|||
|
|||
.title { |
|||
font-size: 13px; |
|||
color: #4a4a4a; |
|||
padding:0 10px; |
|||
height: 36px; |
|||
line-height: 18px; |
|||
margin-top: 5px; |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp:2; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.price { |
|||
color: #ea4448; |
|||
font-size: 14px; |
|||
padding: 6px 10px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,94 +0,0 @@ |
|||
<template> |
|||
<view class="g-main" :style="{marginBottom: meta.margin_bottom + 'px',background: meta.background_color}"> |
|||
<view class="m-lead" style="margin-bottom: 5px" v-if="groupingData.length == 1"> |
|||
<view class="ul-box"> |
|||
<view class="li-box" @tap="_changeItem" :data-index="index" v-for="(item, index) in groupingData" :key="index" > |
|||
<span>{{item.name}}</span> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="grouping-tap-box" v-else> |
|||
<view class="tap-item" :class="tapIndex == index ? 'active' : ''" @tap="_changeItem" :data-index="index" v-for="(item, index) in groupingData" :key="index"> |
|||
<span>{{item.name}}</span> |
|||
</view> |
|||
</view> |
|||
<view class="m-content" :class="groupingData.length != 1 ? 'g-bg' : ''"> |
|||
<view class="m-main" v-if="goods_arr.type && goods_arr.type == 'micro_page_componet_goods_group'"> |
|||
<view class="goods_box" :data-id="item.associate.id" @tap="_jumpToDetail" v-for="(item, index) in goods_arr.children" :key="index" > |
|||
<view class="goods_image"> |
|||
<image :src="item.associate.img"></image> |
|||
</view> |
|||
<view class="title">{{item.associate.name}}</view> |
|||
<view class="price">￥ {{item.associate.sell_price}}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="m-main" v-else> |
|||
<view class="img-box" :data-src="item.link" v-for="(item, index) in goods_arr.children" :key="index" @tap="_jumpImg"> |
|||
<image mode="widthFix" :src="item.image"></image> |
|||
<view class="description" v-if="item.name">{{item.name}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
currentDesc: 'news', |
|||
goods_arr: [], |
|||
tapIndex: 0 |
|||
}; |
|||
}, |
|||
props: { |
|||
groupingData: { |
|||
type: Array, |
|||
value: '' |
|||
}, |
|||
meta: { |
|||
type: Object, |
|||
value: "" |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
this.goods_arr=this.groupingData[0] |
|||
}, |
|||
|
|||
//组件的方法 |
|||
methods: { |
|||
|
|||
_changeItem(e) { |
|||
var index = e.currentTarget.dataset.index; |
|||
if (index == this.tapIndex) return; |
|||
this.goods_arr=this.groupingData[index]; |
|||
this.tapIndex=index; |
|||
}, |
|||
|
|||
_jumpToDetail(e) { |
|||
var id = e.currentTarget.dataset.id; |
|||
wx.navigateTo({ |
|||
url: `/pages/store/detail/detail?id=${id}` |
|||
}); |
|||
}, |
|||
|
|||
_jumpImg(e) { |
|||
var src = e.currentTarget.dataset.src; |
|||
if (!src || src == 'uto_miniprogram') return; |
|||
wx.navigateTo({ |
|||
url: src |
|||
}); |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
}; |
|||
|
|||
</script> |
|||
<style rel="stylesheet/less" lang="less"> |
|||
@import "index-grouping"; |
|||
</style> |
|||
@ -1,216 +0,0 @@ |
|||
//拼团 |
|||
@import '../../common/css/global'; |
|||
.groupon-item-box { |
|||
padding: 10px 15px; |
|||
background: #ffffff; |
|||
.title{ |
|||
padding: 10px 0px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
color: #000; |
|||
align-items: center; |
|||
|
|||
span:nth-child(1) { |
|||
font-size: 22px; |
|||
font-weight: bold; |
|||
display: inline-block; |
|||
//padding-left: 6px; |
|||
//border-left: 4px solid #E7031C; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
font-size: 12px; |
|||
display: flex; |
|||
align-items: center; |
|||
text{ |
|||
font-size: 15px; |
|||
font-weight: 700; |
|||
margin-left: 5px; |
|||
} |
|||
} |
|||
} |
|||
.item { |
|||
display: flex; |
|||
/*align-items: center;*/ |
|||
padding: 10px 0; |
|||
margin-bottom: 5px; |
|||
background: #ffffff; |
|||
overflow: hidden; |
|||
.left { |
|||
position: relative; |
|||
width: 120px; |
|||
.num { |
|||
font-size: 12px; |
|||
position: absolute; |
|||
width: 100%; |
|||
bottom: 0; |
|||
background: @mainColor; |
|||
opacity: .8; |
|||
text-align: center; |
|||
color: @countColor; |
|||
} |
|||
image { |
|||
display: block; |
|||
width: 100%; |
|||
} |
|||
.img-box { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 10px; |
|||
box-sizing: border-box; |
|||
justify-content: space-between; |
|||
image { |
|||
width: 47%; |
|||
} |
|||
} |
|||
} |
|||
.right { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
font-size: 14px; |
|||
margin-left: 12px; |
|||
flex: 1; |
|||
|
|||
.price-box { |
|||
.old-price { |
|||
font-size: 12px; |
|||
color: #9B9B9B; |
|||
text-decoration: line-through; |
|||
} |
|||
.marketing-time-box{ |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 14px; |
|||
|
|||
//兼容首页样式 |
|||
&.index{ |
|||
font-size: 12px; |
|||
} |
|||
/*.seckill-item{ |
|||
text-align: right; |
|||
.no-starts{ |
|||
display: none; |
|||
} |
|||
.text{ |
|||
display: inline-block; |
|||
margin: 2px 5px; |
|||
} |
|||
.tiem{ |
|||
display: inline-block; |
|||
} |
|||
.num-item{ |
|||
display: inline-block; |
|||
background: #FFFFFF; |
|||
color: #fe4545; |
|||
text-align: center; |
|||
width: 26px; |
|||
border-radius: 3px; |
|||
} |
|||
.zero{ |
|||
display: inline-block; |
|||
} |
|||
|
|||
.time-out{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
flex: 1; |
|||
|
|||
.tiem{ |
|||
color: #ffffff; |
|||
span{ |
|||
color: @countColor; |
|||
} |
|||
} |
|||
} |
|||
i{ |
|||
display: none; |
|||
} |
|||
} |
|||
.seckill { |
|||
&.seckill-item{ |
|||
.tiem{ |
|||
color: @countColor; |
|||
span{ |
|||
background: @mainColor; |
|||
color: @countColor; |
|||
} |
|||
} |
|||
} |
|||
.text{ |
|||
color: @countColor; |
|||
} |
|||
}*/ |
|||
|
|||
|
|||
.seckill-item { |
|||
text-align: right; |
|||
color: @countColor; |
|||
.time-out { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.num-item { |
|||
display: inline-block; |
|||
text-align: center; |
|||
width: 26px; |
|||
border-radius: 3px; |
|||
background:#FB5054; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.seckill-time-box { |
|||
.seckill-item { |
|||
text-align: left; |
|||
.time-out { |
|||
color: #000 !important; |
|||
display: block; |
|||
} |
|||
.tiem{ |
|||
color: #000; |
|||
margin: 5px 0; |
|||
} |
|||
i{ |
|||
display: none; |
|||
} |
|||
.my-class{ |
|||
margin: 5px 0; |
|||
color: #EA4448; |
|||
} |
|||
} |
|||
} |
|||
.meal-price { |
|||
display: flex; |
|||
align-items: flex-end; |
|||
.price { |
|||
flex: 1; |
|||
color: #FF2741; |
|||
span { |
|||
color: #4A4A4A; |
|||
|
|||
} |
|||
} |
|||
.btn { |
|||
color: #ffffff; |
|||
background: @mainColor; |
|||
padding: 5px 10px; |
|||
border-radius: 4px; |
|||
._span { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
i { |
|||
font-size: 12px; |
|||
} |
|||
&.no-start { |
|||
background: #26a96d; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,98 +0,0 @@ |
|||
<template> |
|||
<view class="groupon-item-box" :style="{marginBottom: meta.margin_bottom + 'px',background: meta.background_color}"> |
|||
<view class="title" data-src="/pages/store/groups/groups" @tap="_jumpImg"> |
|||
<span>超值拼团</span> |
|||
<span>更多 |
|||
<text class="iconfont icon-gengduo"></text> |
|||
</span> |
|||
</view> |
|||
<view v-for="(item, index) in indexData" :key="index" > |
|||
<view class="item" :data-id="item.associate.goods.id" @tap="_jumpToDetail"> |
|||
<view class="left"> |
|||
<image mode="widthFix" :src="item.associate.goods.img" alt></image> |
|||
<view :style="'background: ' + config.mainColor + '; color: ' + config.countColor" class="num"> |
|||
{{item.associate.number}}人团 |
|||
</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="name"> |
|||
{{item.associate.goods.name}} |
|||
</view> |
|||
<view class="price-box"> |
|||
<view> |
|||
<seckill :end="item.associate.ends_at" :starts="item.associate.starts_at" :server="server" typename="拼团"></seckill> |
|||
</view> |
|||
<view class="meal-price"> |
|||
<view class="price"> |
|||
￥{{item.associate.price}} <span class="old-price">￥{{item.associate.goods.sell_price}}</span> |
|||
</view> |
|||
<view class="btn" :style="'background: ' + config.mainColor"> |
|||
<span>去拼团 <i class="iconfont icon-Chevron"></i></span> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import seckill from "../seckill/seckill"; |
|||
|
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
|
|||
options: { |
|||
addGlobalClass: true |
|||
}, |
|||
|
|||
components: { |
|||
seckill |
|||
}, |
|||
|
|||
props: { |
|||
|
|||
indexData: { |
|||
type: Array, |
|||
value: '' |
|||
}, |
|||
config: { |
|||
type: Object, |
|||
value: '' |
|||
}, |
|||
server: { |
|||
type: String, |
|||
value: '' |
|||
}, |
|||
meta: { |
|||
type: Object, |
|||
value: "" |
|||
} |
|||
|
|||
}, |
|||
|
|||
//组件的方法 |
|||
methods: { |
|||
_jumpImg(e) { |
|||
var src = e.currentTarget.dataset.src; |
|||
if (!src || src == 'uto_miniprogram') return; |
|||
wx.navigateTo({ |
|||
url: src |
|||
}); |
|||
}, |
|||
|
|||
_jumpToDetail(e) { |
|||
var id = e.currentTarget.dataset.id; |
|||
wx.navigateTo({ |
|||
url: `/pages/store/detail/detail?id=${id}` |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style rel="stylesheet/less" lang="less"> |
|||
@import "index-groupon"; |
|||
</style> |
|||
@ -1,133 +0,0 @@ |
|||
@import '../../common/css/global'; |
|||
//秒杀 |
|||
.seckill-box{ |
|||
background: #FFFFFF; |
|||
padding:10px 15px; |
|||
.title{ |
|||
padding: 20px 0px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
color: #000; |
|||
align-items: center; |
|||
|
|||
span:nth-child(1) { |
|||
font-size: 22px; |
|||
font-weight: bold; |
|||
display: inline-block; |
|||
//padding-left: 6px; |
|||
//border-left: 4px solid #E7031C; |
|||
|
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
font-size: 12px; |
|||
display: flex; |
|||
align-items: center; |
|||
text{ |
|||
&.iconfont{ |
|||
font-size: 15px; |
|||
font-weight: 600; |
|||
margin-left: 5px; |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
.seckill-info{ |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 10px; |
|||
.left{ |
|||
width: 100px; |
|||
height: 100px; |
|||
image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
.right{ |
|||
flex: 1; |
|||
margin-left: 10px; |
|||
overflow: hidden; |
|||
.goods-name{ |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
font-size: 16px; |
|||
} |
|||
.price-box { |
|||
color: #e50303; |
|||
font-size: 18px; |
|||
.old{ |
|||
font-size: 12px; |
|||
color: #9c9c9c; |
|||
text-decoration: line-through; |
|||
} |
|||
|
|||
&.free-money{ |
|||
font-size: 14px; |
|||
color: #9C9C9C; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.money{ |
|||
display: flex; |
|||
align-items: center; |
|||
.new { |
|||
font-size: 18px; |
|||
color: @globalColor; |
|||
} |
|||
.old{ |
|||
font-size: 10px; |
|||
margin-left: 5px; |
|||
text-decoration: line-through; |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
.seckill-time{ |
|||
display: flex; |
|||
align-items: flex-end; |
|||
justify-content: space-between; |
|||
.marketing-time-box { |
|||
.seckill-item { |
|||
text-align: left !important; |
|||
color: #000 !important; |
|||
.time-out { |
|||
flex-direction: column; |
|||
color: #000 !important; |
|||
align-items: flex-start !important; |
|||
.tiem { |
|||
margin: 5px 0; |
|||
.num-item { |
|||
color: #ffffff !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
.free{ |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
flex: 1; |
|||
} |
|||
|
|||
.buy{ |
|||
width: 70px; |
|||
height: 25px; |
|||
border-radius: 50px; |
|||
color: #fff; |
|||
background: @mainColor; |
|||
font-size: 12px; |
|||
line-height: 25px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
@ -1,160 +0,0 @@ |
|||
<template> |
|||
<view class="seckill-box" :style="{marginBottom: meta.margin_bottom + 'px',background: meta.background_color}" v-if="indexData && indexData.length"> |
|||
<view class="title" data-src="/pages/store/seckill/seckill" @tap="_jumpImg"> |
|||
<span>限时秒杀</span> |
|||
<span> |
|||
更多 |
|||
<text class="iconfont icon-gengduo"></text> |
|||
</span> |
|||
</view> |
|||
<view v-for="(item, index) in indexData" :key="index" > |
|||
<view class="seckill-info" :data-id="item.associate.goods.id" @tap="_jumpToDetail"> |
|||
<view class="left"> |
|||
<image :src="item.image"></image> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="goods-name"> |
|||
{{item.associate.goods.name}} |
|||
</view> |
|||
<view class="price-box"> |
|||
<text>￥{{item.associate.seckill_price}}</text> |
|||
<text class="old">￥{{item.associate.goods.sell_price}}</text> |
|||
</view> |
|||
<view class="seckill-time"> |
|||
<view> |
|||
<seckill :end="item.associate.ends_at" :starts="item.associate.starts_at" :server="server" mold="index" @starts="isStarts" @end="isEnd" :data-index="index" :data-idx="bigIndex"></seckill> |
|||
</view> |
|||
<view :style="'background: ' + config.mainColor" class="buy"> |
|||
去抢购 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import seckill from "../seckill/seckill"; |
|||
|
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
components: { |
|||
seckill |
|||
}, |
|||
options: { |
|||
addGlobalClass: true |
|||
}, |
|||
props: { |
|||
indexData: { |
|||
type: Array, |
|||
value: '' |
|||
}, |
|||
config: { |
|||
type: null, |
|||
value: '' |
|||
}, |
|||
server: { |
|||
type: String, |
|||
value: '' |
|||
}, |
|||
bigIndex: { |
|||
type: Number, |
|||
value: '' |
|||
}, |
|||
meta: { |
|||
type: Object, |
|||
value: "" |
|||
} |
|||
}, |
|||
|
|||
//组件的方法 |
|||
methods: { |
|||
// |
|||
_jumpImg(e) { |
|||
var src = e.currentTarget.dataset.src; |
|||
if (!src || src == 'uto_miniprogram') return; |
|||
wx.navigateTo({ |
|||
url: src |
|||
}); |
|||
}, |
|||
|
|||
_jumpToDetail(e) { |
|||
var id = e.currentTarget.dataset.id; |
|||
wx.navigateTo({ |
|||
url: `/pages/store/detail/detail?id=${id}` |
|||
}); |
|||
}, |
|||
|
|||
// 秒杀结束 |
|||
isEnd(e) { |
|||
var index = e.index; |
|||
var idx = e.idx; |
|||
var myEventDetail = { |
|||
index: index, |
|||
idx: idx |
|||
}; |
|||
|
|||
// this.setData({ |
|||
// [`indexData[${index}].associate.seckill`]: null |
|||
// }) |
|||
|
|||
this.indexData[index]={associate:{seckill:null}}; |
|||
|
|||
this.$emit('endevent', myEventDetail); |
|||
}, |
|||
|
|||
// 秒杀开始 |
|||
isStarts(e) { |
|||
var index = e.index; |
|||
var idx = e.idx; |
|||
var myEventDetail = { |
|||
index: index, |
|||
idx: idx |
|||
}; |
|||
|
|||
|
|||
|
|||
if(this.indexData[index]==undefined|| |
|||
this.indexData[index].associate==undefined || |
|||
this.indexData[index].associate.init_status==undefined || |
|||
this.indexData[index].associate.init_status != 1){ |
|||
// this.setData({ |
|||
// [`indexData[${index}].associate.seckill.init_status`]:1 |
|||
// }) |
|||
this.indexData[index]={associate:{init_status:1}}; |
|||
|
|||
} |
|||
|
|||
this.$emit('startevent', myEventDetail); |
|||
}, |
|||
setData: function (obj) { |
|||
let that = this; |
|||
let keys = []; |
|||
let val, data; |
|||
Object.keys(obj).forEach(function (key) { |
|||
keys = key.split('.'); |
|||
val = obj[key]; |
|||
data = that.$data; |
|||
keys.forEach(function (key2, index) { |
|||
if (index + 1 == keys.length) { |
|||
that.$set(data, key2, val); |
|||
} else { |
|||
if (!data[key2]) { |
|||
that.$set(data, key2, {}); |
|||
} |
|||
} |
|||
|
|||
data = data[key2]; |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style rel="stylesheet/less" lang="less"> |
|||
@import "index-seckill"; |
|||
</style> |
|||
@ -1,260 +0,0 @@ |
|||
.module-box { |
|||
background: #ffffff; |
|||
padding: 10px 20px; |
|||
.meal-price { |
|||
border: 2px solid #979797; |
|||
height: 50px; |
|||
line-height: 48px; |
|||
text-align: center; |
|||
font-size: 16px; |
|||
text:first-child { |
|||
color: #e50303 |
|||
} |
|||
text:last-child { |
|||
text-decoration: line-through; |
|||
} |
|||
} |
|||
.module-title { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
color: #000; |
|||
align-items: center; |
|||
|
|||
span:nth-child(1) { |
|||
font-size: 22px; |
|||
font-weight: bold; |
|||
display: inline-block; |
|||
//padding-left: 6px; |
|||
//border-left: 4px solid #E7031C; |
|||
|
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
font-size: 12px; |
|||
display: flex; |
|||
align-items: center; |
|||
text{ |
|||
font-size: 15px; |
|||
font-weight: 600; |
|||
margin-left: 5px; |
|||
} |
|||
|
|||
} |
|||
} |
|||
.space-btween { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.module-content { |
|||
padding: 10px 0; |
|||
position: relative; |
|||
//套餐 |
|||
.meal_list { |
|||
overflow: auto; |
|||
white-space: nowrap; |
|||
width: 100%; |
|||
table, image { |
|||
width: 100% !important; |
|||
height: auto; |
|||
} |
|||
.store_list { |
|||
//top:0; |
|||
width: 26.4%; |
|||
position: relative; |
|||
display: inline-block; |
|||
margin-right: 10%; |
|||
view { |
|||
box-sizing: border-box; |
|||
} |
|||
image { |
|||
width: 100%; |
|||
height: 100px; |
|||
} |
|||
.description { |
|||
width: 100%; |
|||
margin-top: 5px; |
|||
font-size: 14px; |
|||
//height: 48px; |
|||
overflow: hidden; |
|||
word-break: break-all; |
|||
//word-spacing: ; |
|||
-webkit-line-clamp: 2; |
|||
text-overflow: ellipsis; |
|||
//display: -webkit-box; |
|||
//-webkit-box-orient: vertical; |
|||
//white-space: normal; |
|||
|
|||
} |
|||
.price { |
|||
font-size: 14px; |
|||
height: auto; |
|||
/*overflow: visible;*/ |
|||
white-space: normal; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
&:last-child { |
|||
margin-right: 0; |
|||
&:after { |
|||
display: none; |
|||
/*content: ; */ |
|||
} |
|||
} |
|||
&:after { |
|||
content: ""; |
|||
display: block; |
|||
position: absolute; |
|||
right: -28%; |
|||
top: 20%; |
|||
width: 18%; |
|||
|
|||
height: 10%; |
|||
background: url('https://ibrand-miniprogram.oss-cn-hangzhou.aliyuncs.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/uploading.png'); |
|||
background-size: 100% 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.add { |
|||
position: relative; |
|||
transform: translateY(120%); |
|||
width: 18px; |
|||
height: 18px; |
|||
margin-bottom: auto; |
|||
|
|||
&:last-child { |
|||
display: none; |
|||
} |
|||
.t { |
|||
|
|||
position: absolute; |
|||
top: 8px; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 2px; |
|||
background: #b2b2b2; |
|||
border-radius: 19px |
|||
} |
|||
|
|||
.l { |
|||
|
|||
position: absolute; |
|||
left: 8px; |
|||
top: 0; |
|||
height: 100%; |
|||
width: 2px; |
|||
background: #b2b2b2; |
|||
border-radius: 19px |
|||
} |
|||
} |
|||
.meal { |
|||
position: relative; |
|||
width: 25%; |
|||
|
|||
.goods_image { |
|||
position: relative; |
|||
width: 100%; |
|||
padding-top: 100%; |
|||
image { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
object-position: center; |
|||
} |
|||
} |
|||
|
|||
.goods_title { |
|||
margin-top: 10px; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 3; |
|||
-webkit-box-orient: vertical; |
|||
color: #000; |
|||
} |
|||
} |
|||
|
|||
.content { |
|||
margin-left: 120px; |
|||
height: 100%; |
|||
.content_title { |
|||
padding-right: 30px; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
font-size: 16px; |
|||
line-height: 18px; |
|||
} |
|||
|
|||
.content_info { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: baseline; |
|||
vertical-align: bottom; |
|||
|
|||
.price { |
|||
color: #e50303; |
|||
font-size: 18px; |
|||
} |
|||
.delPrice { |
|||
margin-right: auto; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.onlyPrice { |
|||
color: #9c9c9c; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
|
|||
.countDown { |
|||
margin-top: 7px; |
|||
.text { |
|||
font-size: 12px; |
|||
color: #4a4a4a; |
|||
} |
|||
|
|||
.release { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.time { |
|||
display: flex; |
|||
align-items: center; |
|||
text { |
|||
line-height: 19px; |
|||
margin: 0 3px; |
|||
} |
|||
.dot { |
|||
display: inline-block; |
|||
width: 19px; |
|||
height: 19px; |
|||
background: #6d6d6d; |
|||
font-size: 12px; |
|||
line-height: 19px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.btnBuy { |
|||
display: inline-block; |
|||
width: 70px; |
|||
height: 25px; |
|||
border-radius: 50px; |
|||
color: #ffffff; |
|||
background: #ea4448; |
|||
font-size: 12px; |
|||
line-height: 25px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,77 +0,0 @@ |
|||
<template> |
|||
<view class="module-box" :style="'margin-bottom: ' + meta.margin_bottom + 'px'" v-if="suitData && suitData.length"> |
|||
<view class="module-title" data-src="/pages/store/mealList/mealList" @tap="_jumpImg"> |
|||
<span>推荐套餐</span> |
|||
<span> |
|||
更多 |
|||
<text class="iconfont icon-gengduo"></text> |
|||
</span> |
|||
</view> |
|||
<view v-for="(items, idx) in suitData" :key="idx"> |
|||
<view class="module-content"> |
|||
<view class="meal_list"> |
|||
<view class="store_list" v-for="(item, index) in items.associate.items" :key="index" > |
|||
|
|||
<view @tap="jumpToDetail" :data-id="item.goods.id"> |
|||
<image class="slide-image" :src="item.goods.img"></image> |
|||
<view class="description">{{item.goods.name}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="meal-price" :data-suitid="items.associate_id" @tap="_jumpMeal"> |
|||
搭配套餐价=<text>￥{{items.associate.total}}</text>/<text>￥{{items.associate.origin_total}}</text> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
|
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
|
|||
options: { |
|||
addGlobalClass: true |
|||
}, |
|||
|
|||
props: { |
|||
suitData: { |
|||
type: Array, |
|||
value: '' |
|||
}, |
|||
show: { |
|||
type: Number, |
|||
value: '' |
|||
}, |
|||
meta: { |
|||
type: Object, |
|||
value: "" |
|||
}, |
|||
}, |
|||
//组件的方法 |
|||
methods: { |
|||
_jumpImg(e) { |
|||
var src = e.currentTarget.dataset.src; |
|||
if (!src || src == 'uto_miniprogram') return; |
|||
wx.navigateTo({ |
|||
url: src |
|||
}); |
|||
}, |
|||
|
|||
_jumpMeal(e) { |
|||
console.log(this.suitData); |
|||
var id = e.currentTarget.dataset.suitid; |
|||
wx.navigateTo({ |
|||
url: `/pages/store/meal/meal?id=${id}` |
|||
}); |
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style rel="stylesheet/less" lang="less"> |
|||
@import "index-suit"; |
|||
</style> |
|||
@ -1,75 +0,0 @@ |
|||
.waterfalls-flow{ |
|||
.title{ |
|||
padding: 10px 15px 10px 15px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
color: #000; |
|||
align-items: center; |
|||
background-color: #FFFFFF; |
|||
|
|||
span:nth-child(1) { |
|||
font-size: 22px; |
|||
font-weight: bold; |
|||
display: inline-block; |
|||
//padding-left: 6px; |
|||
//border-left: 4px solid #E7031C; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
font-size: 12px; |
|||
display: flex; |
|||
align-items: center; |
|||
text{ |
|||
font-size: 15px; |
|||
font-weight: 700; |
|||
margin-left: 5px; |
|||
} |
|||
} |
|||
} |
|||
.help-select-contet { |
|||
column-count: 2; //分为2列 |
|||
column-gap: 10px;//列之间间隔为10px |
|||
width: 100%; |
|||
padding:10px 15px; |
|||
} |
|||
.help-select-card { |
|||
background: #fff; |
|||
width:100%; |
|||
display: inline-block; /*内部卡片需要设置为inline-block,否则会截断显示，如图一*/ |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
margin-bottom: 10rpx; |
|||
image{ |
|||
width: 100%; |
|||
} |
|||
.goods-detail{ |
|||
padding: 10px 8px; |
|||
.name{ |
|||
color:#333333; |
|||
font-size: 12px; |
|||
height: 38px; |
|||
line-height: 18px; |
|||
margin-bottom:10px; |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 2; |
|||
overflow: hidden; |
|||
} |
|||
.money{ |
|||
color:#E7031C; |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
span{ |
|||
color:#999999; |
|||
font-size: 12px; |
|||
line-height: 17px; |
|||
text-decoration: line-through; |
|||
display: inline-block; |
|||
padding-left: 6px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
@ -1,99 +0,0 @@ |
|||
<template> |
|||
<view class="waterfalls-flow" :style="'margin-bottom: ' + meta.margin_bottom + 'px'"> |
|||
<view class="title" v-if="show && title" @tap="_jumpList"> |
|||
<span>{{title}}</span> |
|||
<span>更多 |
|||
<text class="iconfont icon-gengduo"></text> |
|||
</span> |
|||
</view> |
|||
<view class="help-select-contet"> |
|||
<view class="help-select-card" v-for="(item, index) in waterData" :key="index" > |
|||
<view v-if="index > 0" @tap="_jumpDeatil" :data-id="item.id"> |
|||
<image mode="widthFix" :src="item.img"></image> |
|||
<view class="goods-detail"> |
|||
<view class="name"> |
|||
{{item.name}} |
|||
</view> |
|||
<view class="money"> |
|||
￥{{item.sell_price}} |
|||
<span>￥{{item.market_price}}</span> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view v-else @tap="_jumpLink" :data-link="item.link"> |
|||
<image mode="widthFix" class="help-select-iamge" :src="item.image"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
<script> |
|||
|
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
|
|||
options: { |
|||
addGlobalClass: true |
|||
}, |
|||
props: { |
|||
|
|||
waterData: { |
|||
type: Array, |
|||
value: '' |
|||
}, |
|||
title: { |
|||
type: String, |
|||
value: '' |
|||
}, |
|||
show: { |
|||
type: Number, |
|||
value: '' |
|||
}, |
|||
meta: { |
|||
type: Object, |
|||
value: "" |
|||
} |
|||
|
|||
|
|||
}, |
|||
|
|||
//组件的方法 |
|||
methods: { |
|||
//内部方法建议以下划线开头 |
|||
_jumpLink(e) { |
|||
let link = e.currentTarget.dataset.link; |
|||
wx.navigateTo({ |
|||
url: link, |
|||
fail: err => { |
|||
wx.switchTab({ |
|||
url: link |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
//跳到商品详情页 |
|||
_jumpDeatil(e) { |
|||
let id = e.currentTarget.dataset.id; |
|||
wx.navigateTo({ |
|||
url: `/pages/store/detail/detail?id=${id}` |
|||
}); |
|||
}, |
|||
|
|||
_jumpList() { |
|||
wx.navigateTo({ |
|||
url: '/pages/store/list/list' |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
}; |
|||
</script> |
|||
|
|||
|
|||
<style rel="stylesheet/less" lang="less"> |
|||
@import "waterfalls-flow"; |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue