Gao xiaosong
4 years ago
12 changed files with 12168 additions and 2764 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,199 @@
|
||||
<template> |
||||
<view class="tui-goods__item" :class="{ 'tui-full__item': isList }" @tap="detail"> |
||||
<view class="tui-image__box" :class="{ 'tui-full__imgbox': isList }"> |
||||
<image class="tui-goods__img" :class="{ 'tui-full__img': isList }" :src="item.image" mode="widthFix"></image> |
||||
</view> |
||||
<view class="tui-goods__content" :class="{ 'tui-full__content': isList }"> |
||||
<view class="tui-goods__title">{{ item.title || '' }}</view> |
||||
<view class="progress cart-color"> |
||||
<view class="bg-red" :style="{ width: loading ? item.percent + '%' : '' }"></view> |
||||
<view class="piece font-color-red" v-text="'仅剩' + item.stock + '件'"></view> |
||||
</view> |
||||
<view class="tui-tag__box"><tui-tag plain size="24rpx" type="red" padding="8rpx 12rpx">限时价</tui-tag></view> |
||||
<view class="tui-box__bottom"> |
||||
<view class="tui-price__box"> |
||||
<view class="tui-price"> |
||||
<view class="tui-price__small">￥</view> |
||||
<view class="tui-price__large">{{ item.price || '' }}</view> |
||||
<!-- <view class="tui-price__small">.{{ decimalPrice }}</view> --> |
||||
</view> |
||||
<!-- <view class="tui-price__original">￥{{ item.factory || '0.00' }}</view> --> |
||||
</view> |
||||
<view> |
||||
<!-- <tui-button :width="status == 3 ? '146rpx' : '144rpx'" :height="status == 3 ? '60rpx' : '50rpx'" :size="status == 3 ? 26 : 24" :type="status == 1 ? 'gray' : 'danger'" :disabled="status == 1" :plain="status == 3"> |
||||
{{ status | getBtnText(item.subscribe) }} |
||||
</tui-button> --> |
||||
<view class="grab bg-color-red" v-if="item.status === 1 && item.stock > 0" @click="goDetail()">马上抢</view> |
||||
<view class="grab" v-if="item.status === 1 && item.stock <= 0">已售磬</view> |
||||
<view class="grab bg-color-red" v-if="item.status === 2">即将开始</view> |
||||
<view class="grab bg-color-red" v-if="item.status === 0">已结束</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'tGoodsItem', |
||||
props: { |
||||
item: { |
||||
type: Object, |
||||
default() { |
||||
return {} |
||||
}, |
||||
}, |
||||
//是否为列表展示 |
||||
isList: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
//status：1-已结束，2-正在进行，3-即将开枪 |
||||
status: { |
||||
type: Number, |
||||
default: 2, |
||||
}, |
||||
}, |
||||
filters: { |
||||
getBtnText(status, subscribe) { |
||||
status = status || 1 |
||||
let text = ['活动已结束', '立即抢购', '立即预约'][status - 1] |
||||
if (status == 3 && subscribe) { |
||||
text = '取消预约' |
||||
} |
||||
return text |
||||
}, |
||||
}, |
||||
computed: { |
||||
integerPrice: function() { |
||||
let price = this.item.sale || '0.00' |
||||
if (~price.indexOf('.')) { |
||||
return price.split('.')[0] |
||||
} |
||||
return price |
||||
}, |
||||
decimalPrice: function() { |
||||
let price = this.item.sale || '0.00' |
||||
if (~price.indexOf('.')) { |
||||
return price.split('.')[1] |
||||
} |
||||
return '00' |
||||
}, |
||||
}, |
||||
data() { |
||||
return {} |
||||
}, |
||||
methods: { |
||||
// detail() { |
||||
// //项目中应该传id |
||||
// this.tui.href(`../seckillDetail/seckillDetail?status=${this.status}`) |
||||
// }, |
||||
goDetail: function() { |
||||
this.$emit('goDetail', item) |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.tui-goods__item { |
||||
width: 100%; |
||||
padding: 20rpx 20rpx 36rpx; |
||||
box-sizing: border-box; |
||||
border-radius: 12rpx; |
||||
background-color: #fff; |
||||
margin-bottom: 4%; |
||||
position: relative; |
||||
} |
||||
.tui-full__item { |
||||
display: flex; |
||||
margin-bottom: 20rpx !important; |
||||
padding: 20rpx !important; |
||||
} |
||||
.tui-img__newguest { |
||||
position: absolute; |
||||
width: 96rpx; |
||||
height: 32rpx; |
||||
left: 0; |
||||
top: 8rpx; |
||||
} |
||||
.tui-image__box { |
||||
width: 100%; |
||||
height: 300rpx; |
||||
} |
||||
.tui-full__imgbox { |
||||
width: 240rpx !important; |
||||
height: 240rpx !important; |
||||
margin-right: 20rpx; |
||||
} |
||||
.tui-goods__img { |
||||
max-width: 100%; |
||||
max-height: 300rpx; |
||||
display: block; |
||||
border-radius: 8rpx; |
||||
} |
||||
.tui-full__img { |
||||
max-height: 240rpx !important; |
||||
} |
||||
.tui-goods__content { |
||||
width: 100%; |
||||
padding-top: 16rpx; |
||||
} |
||||
.tui-full__content { |
||||
height: 240rpx; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
padding-top: 0 !important; |
||||
} |
||||
.tui-goods__title { |
||||
font-size: 26rpx; |
||||
font-weight: 400; |
||||
color: #333; |
||||
word-break: break-all; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
display: -webkit-box; |
||||
-webkit-box-orient: vertical; |
||||
-webkit-line-clamp: 2; |
||||
margin-bottom: 20rpx; |
||||
} |
||||
.tui-tag__box { |
||||
display: flex; |
||||
padding-top: 25rpx; |
||||
padding-bottom: 25rpx; |
||||
} |
||||
.tui-box__bottom { |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
} |
||||
.tui-price__box { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
.tui-price { |
||||
display: flex; |
||||
align-items: flex-end; |
||||
color: #eb0909; |
||||
} |
||||
.tui-price__small { |
||||
font-size: 24rpx; |
||||
line-height: 24rpx; |
||||
} |
||||
.tui-price__large { |
||||
font-size: 34rpx; |
||||
line-height: 32rpx; |
||||
font-weight: 600; |
||||
} |
||||
.tui-price__original { |
||||
font-size: 24rpx; |
||||
line-height: 24rpx; |
||||
text-decoration: line-through; |
||||
color: #999; |
||||
padding-top: 10rpx; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,278 @@
|
||||
<template> |
||||
<view class="flash-sale" ref="container"> |
||||
<view class="header" v-if="headerImg"> |
||||
<image :src="headerImg" /> |
||||
</view> |
||||
<scroll-view scroll-y="false" scroll-x="true"> |
||||
<view class="timeScroll"> |
||||
<div class="logoPic"> |
||||
<image src="https://wx.yixiang.co/h5/img/baokuan.6313c8c8.png"></image> |
||||
</div> |
||||
<view v-for="(item, index) in timeList" :key="index"> |
||||
<view v-if="active == index" class="timeItem active" @click="setTime(index)"> |
||||
<view class="time">{{ item.time }}</view> |
||||
<view class="state">{{ item.state }}</view> |
||||
</view> |
||||
<view v-if="active != index" class="timeItem" @click="setTime(index)"> |
||||
<view class="time">{{ item.time }}</view> |
||||
<view class="state">{{ item.state }}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</scroll-view> |
||||
<view v-for="(item, index) in timeList" :key="index"> |
||||
<view v-if="active == index"> |
||||
<!-- <view class="countDown font-color-red acea-row row-center-wrapper"> |
||||
<view v-if="item.status === 0" class="activity">活动已结束</view> |
||||
<count-down :isDay="false" :tipText="'距结束仅剩 '" :dayText="false" :hourText="' : '" :minuteText="' : '" |
||||
:secondText="false" :datatime="datatime" v-if="item.status === 1"></count-down> |
||||
<view v-if="item.status === 2" class="activity">活动即将开始</view> |
||||
</view> --> |
||||
<view class="list"> |
||||
<view class="item acea-row row-between-wrapper" v-for="(itemSeckill, indexSeckill) in seckillList" :key="indexSeckill"> |
||||
<view class="pictrue"> |
||||
<image :src="itemSeckill.image" /> |
||||
</view> |
||||
<view class="text acea-row row-column-around"> |
||||
<view class="line1" v-text="itemSeckill.title"></view> |
||||
<view class="money"> |
||||
限时价 |
||||
<text class="num font-color-red">￥{{ itemSeckill.price || '' }}</text> |
||||
</view> |
||||
<view class="progress cart-color"> |
||||
<view class="bg-red" :style="{ width: loading ? itemSeckill.percent + '%' : '' }"></view> |
||||
<view class="piece font-color-red" v-text="'仅剩' + itemSeckill.stock + '件'"></view> |
||||
</view> |
||||
</view> |
||||
<view class="grab bg-color-red" v-if="item.status === 1 && itemSeckill.stock > 0" @click="goDetail(itemSeckill.id, item.status)">马上抢</view> |
||||
<view class="grab" v-if="item.status === 1 && itemSeckill.stock <= 0">已售磬</view> |
||||
<view class="grab bg-color-red" v-if="item.status === 2">即将开始</view> |
||||
<view class="grab bg-color-red" v-if="item.status === 0">已结束</view> |
||||
<!-- <view class="grab bg-color-red" @click="goDetail(itemSeckill.id,item.status)" v-if="item.status === 2">即将开始</view> --> |
||||
<!-- <view class="grab bg-color-red" @click="goDetail(itemSeckill.id,item.status)" v-if="item.status === 0">已结束</view> --> |
||||
</view> |
||||
</view> |
||||
<view class="noCommodity" style="background-color: #f5f5f5;" v-if="seckillList.length === 0 && page > 1"> |
||||
<view class="noPictrue"> |
||||
<image src="@/static/images/noGood.png" class="image" /> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
<script> |
||||
import { getSeckillConfig, getSeckillList } from '@/api/activity' |
||||
import CountDown from '@/components/CountDown' |
||||
// import { Tab, Tabs } from "vant-weapp"; |
||||
import Loading from '@/components/Loading' |
||||
|
||||
export default { |
||||
name: 'GoodsSeckill', |
||||
components: { |
||||
CountDown, |
||||
}, |
||||
props: {}, |
||||
data: function() { |
||||
return { |
||||
headerImg: '', |
||||
timeList: [], |
||||
sticky: false, |
||||
loading: false, |
||||
datatime: 0, |
||||
active: 0, |
||||
seckillList: [], |
||||
status: false, //砍价列表是否获取完成 false 未完成 true 完成 |
||||
loadingList: false, //当前接口是否请求完成 false 完成 true 未完成 |
||||
page: 1, //页码 |
||||
limit: 5, //数量 |
||||
title: [], |
||||
} |
||||
}, |
||||
mounted: function() { |
||||
this.mountedStart() |
||||
}, |
||||
onReachBottom() { |
||||
!this.loadingList && this.getSeckillList() |
||||
}, |
||||
methods: { |
||||
changeTime: function(index) { |
||||
this.active = index |
||||
this.getSeckillList() |
||||
}, |
||||
mountedStart: function() { |
||||
var that = this |
||||
uni.showLoading() |
||||
getSeckillConfig().then(res => { |
||||
that.$set(that, 'headerImg', res.data.lovely) |
||||
that.$set(that, 'timeList', res.data.seckillTime) |
||||
that.$set(that, 'active', res.data.seckillTimeIndex) |
||||
|
||||
let title = [] |
||||
title = res.data.seckillTime.map((item, index) => { |
||||
return { |
||||
name: 'div', |
||||
attrs: { |
||||
class: 'timeItem', |
||||
}, |
||||
children: [ |
||||
{ |
||||
name: 'div', |
||||
attrs: { |
||||
class: 'time', |
||||
}, |
||||
children: [ |
||||
{ |
||||
type: 'text', |
||||
text: item.time, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
name: 'div', |
||||
attrs: { |
||||
class: 'state', |
||||
}, |
||||
children: [ |
||||
{ |
||||
type: 'text', |
||||
text: item.state, |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
} |
||||
}) |
||||
that.$set(that, 'title', title) |
||||
that.datatime = that.timeList[that.active].stop |
||||
that.getSeckillList() |
||||
that.$nextTick(function() { |
||||
that.sticky = true |
||||
uni.hideLoading() |
||||
}) |
||||
}) |
||||
}, |
||||
setTime: function(index) { |
||||
var that = this |
||||
that.page = 1 |
||||
that.loadingList = false |
||||
that.status = false |
||||
that.active = index |
||||
that.datatime = that.timeList[that.active].stop |
||||
this.seckillList = [] |
||||
that.getSeckillList() |
||||
}, |
||||
getSeckillList: function() { |
||||
var that = this |
||||
if (that.loadingList) return |
||||
if (that.status) return |
||||
var time = that.timeList[that.active].id |
||||
getSeckillList(time, { |
||||
page: that.page, |
||||
limit: that.limit, |
||||
}).then(res => { |
||||
that.status = res.data.length < that.limit |
||||
that.seckillList.push.apply(that.seckillList, res.data) |
||||
that.page++ |
||||
uni.hideLoading() |
||||
}) |
||||
}, |
||||
goDetail: function(id, status) { |
||||
var that = this |
||||
var time = that.timeList[that.active].stop |
||||
this.$yrouter.push({ |
||||
path: '/pages/activity/SeckillDetails/index', |
||||
query: { |
||||
id, |
||||
time, |
||||
status, |
||||
}, |
||||
}) |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
<style scoped lang="less"> |
||||
.flash-sale { |
||||
background: #f5f5f5 !important; |
||||
height: 100%; |
||||
} |
||||
|
||||
.timeScroll { |
||||
display: flex; |
||||
align-items: center; |
||||
flex-direction: row; |
||||
} |
||||
|
||||
.list { |
||||
padding: 0 20rpx; |
||||
|
||||
.item { |
||||
padding: 0.25 * 100rpx; |
||||
border-bottom: 1px solid #f0f0f0; |
||||
height: auto; |
||||
position: relative; |
||||
background: #fff; |
||||
margin-bottom: 0.2 * 100rpx; |
||||
border-radius: 0.2 * 100rpx; |
||||
} |
||||
} |
||||
|
||||
.logoPic { |
||||
width: 75rpx; |
||||
height: 70rpx; |
||||
margin-left: 20rpx; |
||||
margin-right: 20rpx; |
||||
|
||||
image { |
||||
width: 75rpx; |
||||
height: 70rpx; |
||||
} |
||||
} |
||||
|
||||
.timeItem { |
||||
font-size: 0.22 * 100rpx; |
||||
color: #282828; |
||||
width: 150rpx; |
||||
text-align: center; |
||||
padding: 20rpx 0; |
||||
background-color: none; |
||||
|
||||
&.active { |
||||
.time { |
||||
color: #eb3729; |
||||
} |
||||
|
||||
.state { |
||||
background: linear-gradient(90deg, #00c17b, #00c17b); |
||||
color: #fff; |
||||
opacity: 1; |
||||
border-radius: 30rpx; |
||||
padding: 0 0.2 * 100rpx; |
||||
font-weight: 800; |
||||
height: 0.37 * 100rpx; |
||||
line-height: 0.37 * 100rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.timeItem .time { |
||||
font-size: 0.32 * 100rpx; |
||||
font-weight: bold; |
||||
height: 0.5 * 100rpx; |
||||
line-height: 0.5 * 100rpx; |
||||
} |
||||
|
||||
.timeItem .state { |
||||
height: 0.37 * 100rpx; |
||||
line-height: 0.37 * 100rpx; |
||||
} |
||||
|
||||
.activity { |
||||
color: #333; |
||||
} |
||||
|
||||
.flash-sale .list .item .grab { |
||||
background-color: #999; |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 99 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 936 B |
Loading…
Reference in new issue