deming/components/shop/recommend/index.vue

133 lines
3.3 KiB
Vue
Raw Normal View History

2020-06-11 09:34:23 +08:00
<template>
<view class="recommend">
<view class="top">
2020-08-06 10:48:21 +08:00
<text>今日秒杀推荐</text>
<view class="more" @click="toOthersPage">
2020-08-07 19:56:47 +08:00
<text>查看更多</text>
2020-08-06 10:48:21 +08:00
<u-icon name="arrow-right" color="#999" size="22"></u-icon>
</view>
2020-06-11 09:34:23 +08:00
</view>
2020-08-08 12:07:50 +08:00
<view class="connect" @click="toOthersPage">
2020-07-17 17:34:42 +08:00
<view class="time" v-if="type == 'spike'">
2020-07-15 16:21:43 +08:00
<image src="/static/image/common/15.png"></image>
<text>{{ info.groupbuy_starttime_histime }}</text>
2020-06-11 09:34:23 +08:00
</view>
<view class="info">
2020-07-17 17:34:42 +08:00
<text class="u-line-1">{{ type == 'spike' ? info.groupbuy_name : '' }}</text>
2020-07-15 16:21:43 +08:00
<text class="u-line-2">{{ info.goods_name }}</text>
2020-06-11 09:34:23 +08:00
<view>
2020-07-15 16:21:43 +08:00
<text>{{ info.groupbuy_price }}</text>
<text>{{ info.goods_price }}</text>
2020-06-11 09:34:23 +08:00
</view>
</view>
2020-07-15 16:21:43 +08:00
<image class="img" :src="info.groupbuy_image1"></image>
2020-06-11 09:34:23 +08:00
</view>
</view>
</template>
<script>
export default {
2020-07-15 16:21:43 +08:00
name:"recommend",
data() {
return {
info: {}
}
},
props: ['recommendData', 'type'],
created() {
this.info = this.recommendData;
2020-08-06 10:48:21 +08:00
console.log(this.recommendData);
},
methods: {
toOthersPage() {
this.$u.route({
url: 'pageB/sdetails/index',
params: {
2020-08-08 12:07:50 +08:00
id: this.recommendData.goods_id,
// type: 3,
2020-08-06 10:48:21 +08:00
}
})
}
2020-07-15 16:21:43 +08:00
}
2020-06-11 09:34:23 +08:00
}
</script>
<style lang="scss" scoped>
.recommend{
2020-08-06 10:48:21 +08:00
margin-bottom: 20rpx;
padding: 0 30rpx;
background-color: #ffffff;
2020-06-11 09:34:23 +08:00
.top{
height: 90rpx;
display: flex;
align-items: center;
justify-content: space-between;
>text:first-child{
font-size: 30rpx;
color: #333;
}
2020-08-06 10:48:21 +08:00
.more {
display: flex;
align-items: center;
color: #999;
2020-08-07 19:56:47 +08:00
font-size: 20rpx;
2020-08-06 10:48:21 +08:00
}
2020-06-11 09:34:23 +08:00
}
.connect{
2020-08-06 10:48:21 +08:00
padding: 15rpx;
2020-06-11 09:34:23 +08:00
display: flex;
.time{
display: flex;
flex-direction: column;
align-items: center;
2020-07-15 16:21:43 +08:00
margin-right: 28rpx;
2020-06-11 09:34:23 +08:00
justify-content: center;
>image{
width: 90rpx;
height: 90rpx;
}
>text{
font-size: 36rpx;
margin-top: 25rpx;
color: #FDD360;
}
flex-shrink: 0;
}
.info{
2020-07-15 16:21:43 +08:00
width: 340rpx;
2020-06-11 09:34:23 +08:00
display: flex;
flex-direction: column;
>text:nth-child(1){
font-size: 28rpx;
color: #333;
}
>text:nth-child(2){
margin-top: 17rpx;
line-height: 36rpx;
font-size: 24rpx;
color: #666;
}
>view{
margin-top: 24rpx;
display: flex;
align-items: flex-end;
>text:first-child{
font-size: 27rpx;
color: #FF3131;
}
>text:last-child{
font-size: 24rpx;
color: #999;
margin-left: 33rpx;
2020-07-15 16:21:43 +08:00
text-decoration: line-through;
2020-06-11 09:34:23 +08:00
}
}
}
.img{
width: 213rpx;
height: 160rpx;
flex-shrink: 0;
margin-left: 13rpx;
}
}
}
</style>