You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
3.0 KiB
130 lines
3.0 KiB
<template>
|
|
<view class="themes-miao-s bg-color-white">
|
|
<themes-chunk-title title="团购活动" :iconSrc="event_rul + '/static/theme/avtivity-icon.svg'" tengtx="group purchase"></themes-chunk-title>
|
|
<scroll-view :scroll-x="true" class="miao-cont">
|
|
<block v-for="item in shopTuangou" :key="item.id">
|
|
<view class="miao-cont__item al-item-center flex-colum j-between" @click="goto"
|
|
:data-url="'/activity/tuangou/product?id=' + item.proid">
|
|
<image class="miao-cont__item-img" :src="item.pic" mode="aspectFill"></image>
|
|
<view class="miao-cont__item-title">{{ item.name }}</view>
|
|
<view class="miao-cont__item-bottom">
|
|
<view class="miao-cont__item-price">
|
|
<view class="miao-cont__item-current"><text class="price-symbol">低至¥</text><text>{{ item.min_price }}</text></view>
|
|
<view class="miao-cont__item-original"><text class="price-symbol">¥</text><text>{{ item.sell_price }}</text></view>
|
|
</view>
|
|
<text class="iconfont icon-jiahao"></text>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from "vuex";
|
|
import themesChunkTitle from './themes-chunk-title.vue'
|
|
|
|
var app = getApp();
|
|
export default{
|
|
components: {
|
|
themesChunkTitle
|
|
},
|
|
props:{
|
|
shopTuangou: {
|
|
type: Array,
|
|
default: function() {
|
|
return [];
|
|
},
|
|
},
|
|
},
|
|
data(){
|
|
return {
|
|
event_rul: app.globalData.event_url,
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['opt'])
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.themes-miao-s {
|
|
width: 100%;
|
|
margin-top: 28rpx;
|
|
border-radius: 20rpx;
|
|
box-sizing: border-box;
|
|
padding: 0 0 30rpx 30rpx;
|
|
.miao-cont {
|
|
white-space: nowrap;
|
|
& ::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
&__item {
|
|
width: 220rpx;
|
|
flex-shrink: 0;
|
|
margin-right: 40rpx;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
display: inline-flex;
|
|
&:last-child {
|
|
margin-right: 30rpx;
|
|
}
|
|
&-img {
|
|
width: 156rpx;
|
|
height: 156rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
&-title {
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 36rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
/* autoprefixer: ignore next */
|
|
-webkit-box-orient: vertical;
|
|
text-align: justify;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
|
|
}
|
|
&-bottom {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 4rpx;
|
|
}
|
|
&-price {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
&-current {
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
color: #ED5925;
|
|
line-height: 50rpx;
|
|
.price-symbol {
|
|
font-size: 22rpx;
|
|
line-height: 32rpx;
|
|
margin-right: 4rpx;
|
|
}
|
|
}
|
|
&-original {
|
|
margin: 0 0 6rpx 4rpx;
|
|
font-size: 20rpx;
|
|
font-weight: 500;
|
|
color: #999999;
|
|
line-height: 28rpx;
|
|
text-decoration: line-through;
|
|
}
|
|
.icon-jiahao {
|
|
font-size: 44rpx;
|
|
color: #FD4440;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|