deming/components/shop/recommend/index.vue
2020-08-08 12:07:50 +08:00

133 lines
3.3 KiB
Vue

<template>
<view class="recommend">
<view class="top">
<text>今日秒杀推荐</text>
<view class="more" @click="toOthersPage">
<text>查看更多</text>
<u-icon name="arrow-right" color="#999" size="22"></u-icon>
</view>
</view>
<view class="connect" @click="toOthersPage">
<view class="time" v-if="type == 'spike'">
<image src="/static/image/common/15.png"></image>
<text>{{ info.groupbuy_starttime_histime }}</text>
</view>
<view class="info">
<text class="u-line-1">{{ type == 'spike' ? info.groupbuy_name : '' }}</text>
<text class="u-line-2">{{ info.goods_name }}</text>
<view>
<text>¥{{ info.groupbuy_price }}</text>
<text>¥{{ info.goods_price }}</text>
</view>
</view>
<image class="img" :src="info.groupbuy_image1"></image>
</view>
</view>
</template>
<script>
export default {
name:"recommend",
data() {
return {
info: {}
}
},
props: ['recommendData', 'type'],
created() {
this.info = this.recommendData;
console.log(this.recommendData);
},
methods: {
toOthersPage() {
this.$u.route({
url: 'pageB/sdetails/index',
params: {
id: this.recommendData.goods_id,
// type: 3,
}
})
}
}
}
</script>
<style lang="scss" scoped>
.recommend{
margin-bottom: 20rpx;
padding: 0 30rpx;
background-color: #ffffff;
.top{
height: 90rpx;
display: flex;
align-items: center;
justify-content: space-between;
>text:first-child{
font-size: 30rpx;
color: #333;
}
.more {
display: flex;
align-items: center;
color: #999;
font-size: 20rpx;
}
}
.connect{
padding: 15rpx;
display: flex;
.time{
display: flex;
flex-direction: column;
align-items: center;
margin-right: 28rpx;
justify-content: center;
>image{
width: 90rpx;
height: 90rpx;
}
>text{
font-size: 36rpx;
margin-top: 25rpx;
color: #FDD360;
}
flex-shrink: 0;
}
.info{
width: 340rpx;
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;
text-decoration: line-through;
}
}
}
.img{
width: 213rpx;
height: 160rpx;
flex-shrink: 0;
margin-left: 13rpx;
}
}
}
</style>