liaoxinyu
/
jingheng_H5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
3 Commits
1 Branch
0 Tags
1.2 MiB
 
 
 
 
Tree: e1a8e5b4af
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'e1a8e5b4af'
${ noResults }
jingheng_H5/components/home-list/home-list.vue

708 lines
16 KiB
Raw Blame History

<template>
<view class="content">
<view class="left" v-for="(it,ix) in 2" :key='ix'>
<view class="item" v-show="index % 2 == ix" v-for="(item,index) in list" :key='index'>
<!-- #ifdef MP -->
<!-- 直播内容 -->
<view @click="goto" :data-url="'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id='+item.roomId" class="body body_live" v-if="item.listType == 'live' ">
<view class="top">
<image style="width: 100%; height: 100%;" :src="item.coverImg" mode="aspectFill"></image>
<view class="p1">
<view class="title_box" style="padding-left: 0;">
<view class="d-t">
<view class="left">
<text class="heng1"></text>
<text class="heng2"></text>
<text class="heng3"></text>
</view>
</view>
<view class="" style="font-size: 22rpx;">
{{item.status == '0'?'预告':item.status == '1'?'直播中':'已结束'}}
</view>
</view>
<!-- <view class="quan">
<text class="iconfont iconss"></text>
<text>优惠券疯抢中</text>
</view> -->
</view>
</view>
<view class="bot">
<view class="bot-header">
<image :src="item.business.logo" mode="aspectFill"></image>
</view>
<view class="bot-name">{{item.name}}</view>
<view class="bot-goods" v-if="item.goods.length">
<view class="bot-goods__title">{{item.goods[0].name}}</view>
<view class="bot-goods__price">{{item.goods[0].price}}</view>
</view>
</view>
</view>
<!-- #endif -->
<!-- 视频内容 -->
<view class="body body_video" @click="goto" :data-url="'/activity/shortvideo/detail?id='+item.id" v-if="item.listType == 'video'">
<view class="top">
<view class="player-box">
<text class="iconfont icon-bofang"></text>
</view>
<image style="width: 100%; height: 100%;" :src="item.coverimg" mode="aspectFill"></image>
<view class="p1">
<view class="title_box">
<view class="" style="font-size: 26rpx;">
{{ formatSeconds(Number(item.video_duration))||'00:00'}}
</view>
</view>
<view class="info" >
<view class="info-txt">{{item.name}}</view>
</view>
</view>
</view>
<view class="bot">
<view class="bot-hd">
<image :src="item.binfo.logo" mode="aspectFill"></image>
<view class="bot-hd__name">{{item.binfo.name || ''}}</view>
</view>
<view class="bot-bd" @click.stop.prevent="zan(item,index)">
<image class="flame-img" :src="event_rul + '/static/img/static/icon/flame-icon.svg'"></image>
<text class="iconfont" :class="item.iszan == 0 ? 'icon-aixin' : 'icon-aixin_shixin'"></text>
<text class="bot-bd__num">{{item.zan_num >= 10000 ? (item.zan_num / 10000).toFixed(1)+'万': item.zan_num}}</text>
</view>
</view>
</view>
<!-- 笔记内容 -->
<view class="body body_note" @click="goto" :data-url="'/activity/luntan/detail?id='+item.id" v-if="item.listType == 'note'">
<view class="note-item">
<image class="note-item__img" v-if="item.pics||item.coverimg" :src="item.pics||item.coverimg" mode="aspectFill"></image>
<view style="width: 100%; height: 330rpx; line-height: 330rpx; " v-else>
<view style="color: #ccc;">
<text style="font-size: 100rpx; color: #ccc;"
class="iconfont icon-tupianjiazaishibai"></text>
</view>
</view>
<view class="note-item__info">
<view class="note-item__info-title">{{item.title ||item.name|| '无'}}</view>
<view class="note-item__info-bd">
<view class="left" @click.stop="goto" :data-url="'/diary/info/info?id='+item.mid">
<image class="note-item__info-img" :src="item.headimg || item.binfo.logo"></image>
<view class="note-item__info-name">{{item.nickname || item.binfo.name ||''}}</view>
</view>
<view class="right" @click.stop.prevent="zan(item,index)">
<image class="flame-img" :src="event_rul + '/static/img/static/icon/flame-icon.svg'"></image>
<text v-if="!item.iszan" class="iconfont icon-aixin"></text>
<text v-else class="iconfont icon-aixin_shixin"></text>
<text class="note-item__info-num">{{item.zan || item.zan_num || 0}}</text>
</view>
</view>
</view>
</view>
</view>
<!-- 商品内容 -->
<view class="body body_shop" @click="goto" :data-url="'/pages/shop/product?id='+item.proid" v-if="item.listType == 'shop'">
<view class="top">
<image :src="item.pic" mode="aspectFill"></image>
</view>
<view class="shop-info">
<view class="shop-info__hd">
{{item.name ? item.name : ''}}
</view>
<view class="shop-info__bd">
<view class="left" v-show="item.sell_price">
<view class="shop-info__price">
<text class="ico">￥</text>
{{item.sell_price}}
</view>
<view class="shop-info__num">
已售{{ item.sales ? (item.sales >= 10000 ? (item.sales / 10000).toFixed(1) + '万': item.sales) : 0 }}件
</view>
</view>
<view class="iconfont icon-jiahao" @click.stop="buydialogChange" :data-proid="item.proid"></view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
var app = getApp();
export default {
props: {
list: {},
},
data() {
return {
anShow:false,
event_rul: app.globalData.event_url,
}
},
mounted() {
},
beforeDestroy(){
this.anShow = false;
},
methods: {
formatSeconds(time){
let newTime,hour,minite,seconds;
if(time >= 3600){
hour = parseInt(time/3600) < 10 ? '0' + parseInt(time/3600) : parseInt(time/3600);
minite = parseInt(time%3600/60) < 10 ? '0' + parseInt(time%3600/60):parseInt(time%3600/60);
seconds = time%3600%60 < 10 ? '0' + Math.round(time%3600%60) : Math.round(time%3600%60);
newTime = hour + ':' + minite + ':' + seconds;
}else if(time >= 60 && time < 3600){
minite = parseInt(time/60) < 10 ? '0' + parseInt(time/60) : parseInt(time/60);
seconds = time%60 < 10 ? '0' + Math.round(time%60) : Math.round(time%60);
newTime = minite + ':' + seconds;
}else if(time < 60 ){
seconds = time < 10 ? '0' + Math.round(time) : Math.round(time);
newTime = '00:'+ seconds;
}
return newTime;
},
zan: function (item,index) {
var that = this
if(item.binfo){
app.post('ApiShortvideo/zan',{id:item.id},function(res){
that.$emit('listZanFn',{index:index,show:!item.iszan?1:0,num:item.iszan?--item.zan_num:++item.zan_num})
});
}else{
app.post("ApiLuntan/zan", {id: item.id}, function (res) {
that.$emit('listZanFn',{index:index,show:!item.iszan?1:0,num:item.iszan?--item.zan:++item.zan})
});
}
},
buydialogChange: function(e) {
let proid = e.currentTarget.dataset.proid;
this.$emit("dialogChange",proid);
},
},
}
</script>
<style lang="scss">
.dh_box{
width: 338rpx;
background-color: #fff;
border-radius: 12rpx;
margin-bottom: 24rpx;
&-hd{
background: linear-gradient(90deg, #FF8A44 0%, #FF3B41 100%);
border-radius: 12rpx 12rpx 0rpx 0px;
padding: 18rpx 20rpx 16rpx;
}
&-title{
display: flex;
align-content: center;
justify-content: space-between;
font-size: 28rpx;
font-weight: 500;
color: #FFFFFF;
line-height: 40rpx;
.more {
font-size: 22rpx;
line-height: 32rpx;
padding-right: 30rpx;
position: relative;
&::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 12rpx;
height: 12rpx;
border-top: 1rpx solid #FFFFFF;
border-right: 1rpx solid #FFFFFF;
transform: rotate(45deg) translateX(-100%);
}
}
}
&-subtitle {
background: #FFE8E8;
border-radius: 6rpx;
padding: 0 14rpx;
font-size: 20rpx;
font-weight: 500;
color: #F93C41;
line-height: 30rpx;
margin-top: 8rpx;
}
&-bd {
padding: 10rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.goods-img {
width: 216rpx;
height: 224rpx;
border-radius: 10rpx;
}
.goods-title {
font-size: 22rpx;
color: #666666;
line-height: 32rpx;
margin-top: 18rpx;
}
.goods-tips {
display: flex;
align-items: center;
&__icon {
width: 28rpx;
height: 28rpx;
flex-shrink: 0;
margin-right: 10rpx;
}
&__txt {
font-size: 32rpx;
font-weight: 500;
color: #1BB149;
line-height: 44rpx;
}
}
}
.item {
width: 338rpx;
.flame-img {
width: 26rpx;
height: 30rpx;
margin-right: 10rpx;
}
.body {
border-radius: 12rpx;
position: relative;
overflow: hidden;
margin-bottom: 24rpx;
background-color: #ffffff;
}
.body_shop{
.top {
width: 100%;
height: 314rpx;
image {
width: 100%;
height: 100%;
}
}
.shop-info {
padding: 20rpx;
&__hd {
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;
}
&__bd{
margin-top: 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
.left{
flex: 1;
overflow: hidden;
display: flex;
align-items: center;
color: #ED5925;
font-size: 36rpx;
line-height: 50rpx;
font-weight: bold;
.ico{
font-size: 22rpx;
color: #ED5925;
line-height: 32rpx;
margin-right: 6rpx;
}
}
}
&__price {
flex-shrink: 0;
}
&__num {
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-left: 14rpx;
font-size: 20rpx;
color: #999999;
line-height: 28rpx;
}
.icon-jiahao {
flex-shrink: 0;
font-size: 44rpx;
color: #068150;
}
}
}
.body_note {
.note-item {
width: 100%;
height: 500rpx;
position: relative;
&__img {
width: 100%;
height: 100%;
}
&__info {
position: absolute;
bottom: 16rpx;
left: 16rpx;
right: 16rpx;
background: #FFF;
border-radius: 12rpx;
padding: 16rpx;
&-title {
margin-top: 8rpx;
font-size: 28rpx;
font-weight: 500;
color: #333333;
line-height: 40rpx;
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;
}
&-bd {
margin-top: 10rpx;
display: flex;
align-content: center;
justify-content: space-between;
color: #666666;
}
.left {
display: flex;
align-items: center;
}
&-img {
display: block;
width: 36rpx;
height: 36rpx;
margin-right: 6rpx;
flex-shrink: 0;
border-radius: 50%;
}
&-name {
flex: 1;
max-width: 140rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 24rpx;
}
.right {
display: flex;
align-items: center;
}
.icon-aixin,.icon-aixin_shixin {
font-size: 28rpx;
}
.icon-aixin_shixin {
color: #EC2828;
}
&-num {
margin-left: 8rpx;
font-size: 22rpx;
line-height: 28rpx;
}
}
}
}
.body_video {
.top {
border-radius: 10rpx;
width: 100%;
height: 376rpx;
position: relative;
.player-box {
position: absolute;
font-size: 100rpx;
left: 50%;
top: 50%;
width: 80rpx;
height: 80rpx;
background: rgba($color: #000000, $alpha: .3);
border-radius: 50%;
transform: translateX(-50%) translateY(-60%);
}
.icon-bofang {
position: absolute;
left: 50%;
top: 50%;
color: #FFF;
transform: translateX(-40%) translateY(-50%);
}
.info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 172rpx;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8600) 100%);
display: flex;
align-items: flex-end;
padding: 12rpx 20rpx;
&-txt {
font-size: 28rpx;
color: #FFFFFF;
line-height: 40rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
/* autoprefixer: ignore next */
-webkit-box-orient: vertical;
text-align: justify;
white-space: pre-wrap;
word-break: break-all;
}
}
}
.bot {
padding: 16rpx;
display: flex;
align-items: center;
justify-content: space-between;
&-hd {
display: flex;
align-items: center;
image {
border-radius: 50%;
width: 58rpx;
height: 58rpx;
margin-right: 6rpx;
flex-shrink: 0;
}
&__name {
font-size: 26rpx;
font-weight: 500;
color: #333333;
line-height: 36rpx;
max-width: 176rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
&-bd {
flex-shrink: 0;
color: #666666;
.icon-aixin,.icon-aixin_shixin {
font-size: 28rpx;
}
.icon-aixin_shixin {
color: #EC2828;
}
&__num {
margin-left: 2rpx;
font-size: 22rpx;
line-height: 28rpx;
}
}
.right {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10rpx 0;
margin-left: 20rpx;
.price {
font-weight: bold;
}
}
}
}
.body_live {
.top {
border-radius: 10rpx;
width: 100%;
height: 376rpx;
// background-color: red;
image {
width: 100%;
}
.quan {
position: absolute;
display: flex;
top: 280rpx;
padding: 4rpx 10rpx;
border-radius: 40rpx;
color: #fff;
left: 20rpx;
font-size: 24rpx;
background-color: rgba($color: #000000, $alpha: 0.4);
}
}
.bot {
padding: 32rpx 16rpx 16rpx;
position: relative;
&-header {
width: 58rpx;
height: 58rpx;
border-radius: 50%;
position: absolute;
overflow: hidden;
top: -29rpx;
left: 34rpx;
image {
width: 100%;
height: 100%;
}
}
&-name {
font-size: 26rpx;
font-weight: 500;
color: #333333;
line-height: 36rpx;
}
&-goods {
display: flex;
align-content: center;
font-size: 20rpx;
color: #999999;
line-height: 28rpx;
margin-top: 4rpx;
&__title {
max-width: 264rpx;
}
&__price {
flex-shrink: 0;
}
}
.left {
image {
border-radius: 10rpx;
width: 90rpx;
height: 90rpx;
background-color: pink;
}
}
.right {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10rpx 0;
margin-left: 20rpx;
.price {
font-weight: bold;
}
}
}
}
}
.content {
display: flex;
justify-content: space-between;
}
.title_box {
background-color: rgba($color: #000000, $alpha: .3);
padding: 0 10rpx;
border-radius: 4rpx;
display: flex;
color: #fff;
position: absolute;
top: 16rpx;
left: 16rpx;
height: 30rpx;
border-radius: 15rpx;
align-items: center;
.d-t {
width: 30rpx;
height: 30rpx;
border-radius: 50%;
display: flex;
margin-right: 10rpx;
align-items: center;
justify-content: space-around;
background-color: #fee103;
}
.left {
height: 18rpx;
display: flex;
width: 50rpx;
padding: 0 4rpx 2rpx;
align-items: flex-end;
justify-content: space-around;
.heng1,
.heng2,
.heng3 {
display: block;
width: 4rpx;
border-radius: 4rpx;
margin-right: 2rpx;
background-color: #fff;
}
.heng1 {
height: 18rpx;
animation: hengos .8s linear infinite;
}
.heng2 {
height: 10rpx;
animation: hengts .8s linear infinite;
}
.heng3 {
height: 18rpx;
animation: henghs .8s linear .2s infinite;
margin-right: 0;
}
}
}
@keyframes hengos {
0% {height: 18rpx;}
50% {height: 10rpx;}
100% {height: 18rpx;}
}
@keyframes hengts {
0% {height: 10rpx;}
50% {height: 18rpx;}
100% {height: 10rpx;}
}
@keyframes henghs {
0% {height: 18rpx;}
50% {height: 10rpx;}
100% {height: 18rpx;}
}
</style>