修改秒杀页面和领取优惠券样式
This commit is contained in:
Gao xiaosong
8545
assets/css/style.css
8545
assets/css/style.css
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
199
components/t-goods-item/t-goods-item.vue
Normal file
199
components/t-goods-item/t-goods-item.vue
Normal file
@ -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>
|
||||||
@ -1,277 +1,479 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="flash-sale" ref="container">
|
<view class="container">
|
||||||
<view class="header" v-if="headerImg">
|
<view class="tui-bg__box">
|
||||||
<image :src="headerImg" />
|
<image src="@/static/images/bg_seckill.png" class="tui-bg__img" mode="widthFix" :style="{ opacity: opacity }"></image>
|
||||||
</view>
|
</view>
|
||||||
<scroll-view scroll-y="false" scroll-x="true">
|
<view class="tui-header__bg">
|
||||||
<view class="timeScroll">
|
<image src="@/static/images/bg_seckill.png" class="tui-bg__img" mode="widthFix"></image>
|
||||||
<div class="logoPic">
|
<scroll-view class="tui-time-slot" scroll-x>
|
||||||
<image src="https://wx.yixiang.co/h5/img/baokuan.6313c8c8.png"></image>
|
<view class="tui-time__list" :class="{ 'tui-flex__between': timeList.length < 6 }">
|
||||||
</div>
|
<view class="tui-time__item" :class="[timeList.length < 6 ? 'tui-flex__1' : 'tui-width__min', index == active ? 'tui-time__active' : '']" v-for="(item, index) in timeList" :key="index" @tap="setTime(index)">
|
||||||
<view v-for="(item, index) in timeList" :key="index">
|
<view class="tui-time">{{ item.time }}</view>
|
||||||
<view v-if="active==index" class="timeItem active" @click="setTime(index)">
|
<view class="tui-status">{{ item.state }}</view>
|
||||||
<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>
|
</view>
|
||||||
</view>
|
</scroll-view>
|
||||||
</scroll-view>
|
</view>
|
||||||
<view v-for="(item, index) in timeList" :key="index">
|
<view class="tui-body">
|
||||||
<view v-if="active == index">
|
<block v-for="(item, index) in timeList" :key="index">
|
||||||
<!-- <view class="countDown font-color-red acea-row row-center-wrapper">
|
<view class="tui-status__box" v-if="active == index">
|
||||||
<view v-if="item.status === 0" class="activity">活动已结束</view>
|
<view class="tui-full__width" v-if="item.status == 0">
|
||||||
<count-down :isDay="false" :tipText="'距结束仅剩 '" :dayText="false" :hourText="' : '" :minuteText="' : '"
|
<tui-divider gradual width="80%" backgroundColor="#fff" :height="34">
|
||||||
:secondText="false" :datatime="datatime" v-if="item.status === 1"></count-down>
|
<view class="tui-divider__status">
|
||||||
<view v-if="item.status === 2" class="activity">活动即将开始</view>
|
<image src="@/static/images/img_seckill.png" mode="widthFix"></image>
|
||||||
</view> -->
|
<text class="tui-color__red">{{ item.time }}</text>
|
||||||
<view class="list">
|
<text>{{ item.state }}</text>
|
||||||
<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>
|
||||||
<view class="progress cart-color">
|
</tui-divider>
|
||||||
<view class="bg-red" :style="{ width: loading ? itemSeckill.percent + '%' : '' }"></view>
|
</view>
|
||||||
<view class="piece font-color-red" v-text="'仅剩' + itemSeckill.stock + '件'"></view>
|
<view class="tui-full__width" v-if="item.status == 2">
|
||||||
|
<tui-divider gradual width="80%" backgroundColor="#fff" :height="34">
|
||||||
|
<view class="tui-divider__status">
|
||||||
|
<image src="@/static/images/img_seckill.png" mode="widthFix"></image>
|
||||||
|
<text class="tui-color__red">{{ item.time }}</text>
|
||||||
|
<text>{{ item.state }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</tui-divider>
|
||||||
<view class="grab bg-color-red" v-if="item.status === 1 && itemSeckill.stock > 0" @click="goDetail(itemSeckill.id,item.status)">马上抢</view>
|
</view>
|
||||||
<view class="grab" v-if="item.status === 1 && itemSeckill.stock <= 0">已售磬</view>
|
<view class="tui-countdown__box" v-if="item.status == 1">
|
||||||
<view class="grab bg-color-red" v-if="item.status === 2">即将开始</view>
|
<text>距离{{ item.status == 2 ? '结束还剩' : '开始还有' }}</text>
|
||||||
<view class="grab bg-color-red" v-if="item.status === 0">已结束</view>
|
<count-down :isDay="true" :tipText="'倒计时 '" :dayText="' 天 '" :hourText="' 时 '" :minuteText="' 分 '" :secondText="' 秒'" :datatime="datatime / 1000"></count-down>
|
||||||
<!-- <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>
|
</view>
|
||||||
<view class="noCommodity" style="background-color: #f5f5f5;" v-if="seckillList.length === 0 && page > 1">
|
</block>
|
||||||
<view class="noPictrue">
|
|
||||||
<image src="@/static/images/noGood.png" class="image" />
|
<view class="tui-list__goods">
|
||||||
</view>
|
<view class="tui-goods__left">
|
||||||
|
<block v-for="(item, index) in seckillList" :key="index">
|
||||||
|
<t-goods-item v-if="index % 2 == 0" :item="item" :isList="false" @goDetail="goDetail"></t-goods-item>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<view class="tui-goods__right">
|
||||||
|
<block v-for="(item, index) in seckillList" :key="index">
|
||||||
|
<t-goods-item v-if="index % 2 !== 0" :item="item" :isList="false" @goDetail="goDetail"></t-goods-item>
|
||||||
|
</block>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import {
|
import { getSeckillConfig, getSeckillList } from '@/api/activity'
|
||||||
getSeckillConfig,
|
import CountDown from '@/components/CountDown'
|
||||||
getSeckillList
|
|
||||||
} from "@/api/activity";
|
|
||||||
import CountDown from "@/components/CountDown";
|
|
||||||
// import { Tab, Tabs } from "vant-weapp";
|
|
||||||
import Loading from "@/components/Loading";
|
|
||||||
|
|
||||||
export default {
|
// import { Tab, Tabs } from "vant-weapp";
|
||||||
name: "GoodsSeckill",
|
import Loading from '@/components/Loading'
|
||||||
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 = [];
|
export default {
|
||||||
title = res.data.seckillTime.map((item, index) => {
|
name: 'GoodsSeckill',
|
||||||
return {
|
components: {
|
||||||
name: "div",
|
CountDown,
|
||||||
attrs: {
|
},
|
||||||
class: "timeItem"
|
props: {},
|
||||||
},
|
data: function() {
|
||||||
children: [{
|
return {
|
||||||
name: "div",
|
headerImg: '',
|
||||||
attrs: {
|
timeList: [],
|
||||||
class: "time"
|
sticky: false,
|
||||||
},
|
loading: false,
|
||||||
children: [{
|
datatime: 0,
|
||||||
type: "text",
|
active: 0,
|
||||||
text: item.time
|
seckillList: [],
|
||||||
}]
|
status: false, //砍价列表是否获取完成 false 未完成 true 完成
|
||||||
},
|
loadingList: false, //当前接口是否请求完成 false 完成 true 未完成
|
||||||
{
|
page: 1, //页码
|
||||||
name: "div",
|
limit: 5, //数量
|
||||||
attrs: {
|
title: [],
|
||||||
class: "state"
|
opacity: 1,
|
||||||
},
|
|
||||||
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
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
},
|
||||||
|
mounted: function() {
|
||||||
|
this.mountedStart()
|
||||||
|
},
|
||||||
|
onReachBottom() {
|
||||||
|
!this.loadingList && this.getSeckillList()
|
||||||
|
},
|
||||||
|
filters: {
|
||||||
|
getStatusText(status) {
|
||||||
|
let text = ['活动已结束', '正在疯抢', '即将开抢'][status - 1]
|
||||||
|
return text
|
||||||
|
},
|
||||||
|
},
|
||||||
|
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(item) {
|
||||||
|
var that = this
|
||||||
|
var time = that.timeList[that.active].stop
|
||||||
|
this.$yrouter.push({
|
||||||
|
path: '/pages/activity/SeckillDetails/index',
|
||||||
|
query: {
|
||||||
|
id: item.id,
|
||||||
|
time,
|
||||||
|
status: item.status,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onPageScroll(e) {
|
||||||
|
let scrollTop = e.scrollTop
|
||||||
|
if (scrollTop <= 2) {
|
||||||
|
this.opacity = 1
|
||||||
|
} else {
|
||||||
|
if (this.opacity <= 0) return
|
||||||
|
this.opacity = 1 - scrollTop / 40
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.flash-sale {
|
.tui-bg__box {
|
||||||
background: #f5f5f5 !important;
|
width: 100%;
|
||||||
height: 100%;
|
height: 210rpx;
|
||||||
}
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.timeScroll {
|
.tui-header__bg {
|
||||||
display: flex;
|
width: 100%;
|
||||||
align-items: center;
|
height: 120rpx;
|
||||||
flex-direction: row;
|
position: fixed;
|
||||||
}
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 3;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.list {
|
.tui-bg__img {
|
||||||
padding: 0 20rpx;
|
width: 100%;
|
||||||
|
height: 210rpx;
|
||||||
|
display: block;
|
||||||
|
transition: opacity 0.1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
.item {
|
.tui-body {
|
||||||
padding: .25*100rpx;
|
width: 100%;
|
||||||
border-bottom: 1px solid #f0f0f0;
|
position: relative;
|
||||||
height: auto;
|
margin-top: 120rpx;
|
||||||
position: relative;
|
z-index: 2;
|
||||||
background: #fff;
|
padding: 0 25rpx;
|
||||||
margin-bottom: .2*100rpx;
|
box-sizing: border-box;
|
||||||
border-radius: .2*100rpx;
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.logoPic {
|
.tui-time-slot {
|
||||||
width: 75rpx;
|
width: 100%;
|
||||||
height: 70rpx;
|
height: 120rpx;
|
||||||
margin-left: 20rpx;
|
position: absolute;
|
||||||
margin-right: 20rpx;
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
image {
|
.tui-time__list {
|
||||||
width: 75rpx;
|
min-width: 100%;
|
||||||
height: 70rpx;
|
height: 120rpx;
|
||||||
}
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.timeItem {
|
.tui-flex__between {
|
||||||
font-size: 0.22 * 100rpx;
|
justify-content: space-between;
|
||||||
color: #282828;
|
}
|
||||||
width: 150rpx;
|
|
||||||
text-align: center;
|
|
||||||
padding: 20rpx 0;
|
|
||||||
background-color: none;
|
|
||||||
|
|
||||||
&.active {
|
.tui-time__item {
|
||||||
.time {
|
flex-shrink: 0;
|
||||||
color: #eb3729;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
color: #ffb2b2;
|
||||||
|
}
|
||||||
|
|
||||||
.state {
|
.tui-flex__1 {
|
||||||
background: linear-gradient(90deg, #00c17b, #00c17b);
|
flex: 1 !important;
|
||||||
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 {
|
.tui-width__min {
|
||||||
font-size: 0.32 * 100rpx;
|
min-width: 150rpx;
|
||||||
font-weight: bold;
|
}
|
||||||
height: .5 * 100rpx;
|
|
||||||
line-height: .5 * 100rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeItem .state {
|
.tui-time {
|
||||||
height: 0.37 * 100rpx;
|
font-size: 32rpx;
|
||||||
line-height: 0.37 * 100rpx;
|
line-height: 32rpx;
|
||||||
}
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
.activity {
|
.tui-status {
|
||||||
color: #333;
|
font-size: 24rpx;
|
||||||
}
|
line-height: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
padding-top: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.flash-sale .list .item .grab {
|
.tui-time__active .tui-time {
|
||||||
background-color: #999;
|
color: #fff;
|
||||||
}
|
font-size: 36rpx;
|
||||||
|
line-height: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-time__active .tui-status {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-status__box {
|
||||||
|
width: 100%;
|
||||||
|
height: 146rpx;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
box-shadow: 0 3rpx 20rpx rgba(183, 183, 183, 0.1);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-full__width {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-divider__status {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-divider__status image {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-color__red {
|
||||||
|
color: #eb0909;
|
||||||
|
padding-right: 6rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-countdown__box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #333;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-countdown__box text {
|
||||||
|
padding-right: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*======商品列表 start=======*/
|
||||||
|
.tui-list__goods {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
padding-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-goods__left,
|
||||||
|
.tui-goods__right {
|
||||||
|
width: 49%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-full__width {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*======商品列表 end=======*/
|
||||||
|
|
||||||
|
.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>
|
</style>
|
||||||
|
|||||||
278
pages/activity/GoodsSeckill/index2.vue
Normal file
278
pages/activity/GoodsSeckill/index2.vue
Normal file
@ -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>
|
||||||
@ -1,35 +1,45 @@
|
|||||||
<template>
|
<template>
|
||||||
<view ref="container">
|
<view ref="container">
|
||||||
<div class="coupon-list" v-if="couponsList.length > 0">
|
<image src="@/static/images/banner_coupon.png" mode="widthFix" class="tui-coupon-banner"></image>
|
||||||
<div
|
<view class="tui-coupon-list">
|
||||||
class="item acea-row row-center-wrapper"
|
<view class="tui-coupon-item tui-top20" v-for="(item, index) in couponsList" :key="index">
|
||||||
v-for="(item, index) in couponsList"
|
<image src="@/static/images/bg_coupon_3x.png" class="tui-coupon-bg" mode="widthFix"></image>
|
||||||
:key="index"
|
<view class="tui-coupon-item-left">
|
||||||
>
|
<view class="tui-coupon-price-box" :class="{ 'tui-color-grey': item.isUse }">
|
||||||
<div class="money" :class="item.isUse ? 'moneyGray' : ''">
|
<view class="tui-coupon-price-sign">￥</view>
|
||||||
<div>
|
<view class="tui-coupon-price" :class="{ 'tui-price-small': false }">{{ item.couponPrice }}</view>
|
||||||
￥
|
</view>
|
||||||
<span class="num">{{ item.couponPrice }}</span>
|
<view class="tui-coupon-intro">满{{ item.useMinPrice }}元可用</view>
|
||||||
</div>
|
</view>
|
||||||
<div class="pic-num">满{{ item.useMinPrice }}元可用</div>
|
<view class="tui-coupon-item-right">
|
||||||
</div>
|
<view class="tui-coupon-content">
|
||||||
<div class="text">
|
<view class="tui-coupon-title-box">
|
||||||
<div class="condition line1">
|
<view class="tui-coupon-btn" v-if="item.ctype === 0" :class="{ 'tui-bg-grey': item.isUse }">通用劵</view>
|
||||||
<span class="line-title bg-color-check" v-if="item.ctype === 0">通用劵</span>
|
<view class="tui-coupon-btn" v-else-if="item.ctype === 1" :class="{ 'tui-bg-grey': item.isUse }">商品券</view>
|
||||||
<span class="line-title bg-color-check" v-else-if="item.ctype === 1">商品券</span>
|
<view class="tui-coupon-btn" v-else :class="{ 'tui-bg-grey': item.isUse }">未知</view>
|
||||||
<span class="line-title bg-color-check" v-else>未知</span>
|
<view class="tui-coupon-title">{{ item.cname }}</view>
|
||||||
<span>{{ item.cname }}</span>
|
</view>
|
||||||
</div>
|
<view class="tui-coupon-rule">
|
||||||
<div class="data acea-row row-between-wrapper">
|
<view class="tui-rule-box tui-padding-btm">
|
||||||
<div v-if="item.endTime !== 0">{{ item.startTime }}-{{ item.endTime }}</div>
|
<view class="tui-coupon-circle"></view>
|
||||||
<div v-else>不限时</div>
|
<view class="tui-coupon-text">不可叠加使用</view>
|
||||||
<div class="bnt gray" v-if="item.isUse === true">已领取</div>
|
</view>
|
||||||
<div class="bnt gray" v-else-if="item.isUse === 2">已领完</div>
|
<view class="tui-rule-box">
|
||||||
<div class="bnt bg-color-red" v-else @click="getCoupon(item.id, index)">立即领取</div>
|
<view class="tui-coupon-circle"></view>
|
||||||
</div>
|
<view class="tui-coupon-text" v-if="item.endTime !== 0">{{ item.endTime }} 到期</view>
|
||||||
</div>
|
<!-- <view class="tui-coupon-text" v-if="item.endTime !== 0">{{ item.startTime }} - {{ item.endTime }}</view> -->
|
||||||
</div>
|
<view class="tui-coupon-text" v-else>不限时</view>
|
||||||
</div>
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tui-btn-box">
|
||||||
|
<tui-button type="danger" width="152rpx" height="52rpx" :size="24" shape="circle" :plain="true" v-if="item.isUse === true">已领取</tui-button>
|
||||||
|
<tui-button type="danger" width="152rpx" height="52rpx" :size="24" shape="circle" :plain="true" v-else-if="item.isUse === 2">已领完</tui-button>
|
||||||
|
<tui-button type="danger" width="152rpx" height="52rpx" :size="24" shape="circle" v-else @click="getCoupon(item.id, index)">立即领取</tui-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<Loading :loaded="loadend" :loading="loading"></Loading>
|
<Loading :loaded="loadend" :loading="loading"></Loading>
|
||||||
<!--暂无优惠券-->
|
<!--暂无优惠券-->
|
||||||
@ -41,14 +51,14 @@
|
|||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { getCoupon, getCouponReceive } from "@/api/user";
|
import { getCoupon, getCouponReceive } from '@/api/user'
|
||||||
import Loading from "@/components/Loading";
|
import Loading from '@/components/Loading'
|
||||||
import DataFormatT from "@/components/DataFormatT";
|
import DataFormatT from '@/components/DataFormatT'
|
||||||
export default {
|
export default {
|
||||||
name: "getCoupon",
|
name: 'getCoupon',
|
||||||
components: {
|
components: {
|
||||||
Loading,
|
Loading,
|
||||||
DataFormatT
|
DataFormatT,
|
||||||
},
|
},
|
||||||
props: {},
|
props: {},
|
||||||
data: function() {
|
data: function() {
|
||||||
@ -57,51 +67,254 @@ export default {
|
|||||||
limit: 10,
|
limit: 10,
|
||||||
couponsList: [],
|
couponsList: [],
|
||||||
loading: false,
|
loading: false,
|
||||||
loadend: false
|
loadend: false,
|
||||||
};
|
}
|
||||||
},
|
},
|
||||||
mounted: function() {
|
mounted: function() {
|
||||||
this.getUseCoupons();
|
this.getUseCoupons()
|
||||||
},
|
},
|
||||||
onReachBottom() {
|
onReachBottom() {
|
||||||
!this.loading && this.getUseCoupons();
|
!this.loading && this.getUseCoupons()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getCoupon: function(id, index) {
|
getCoupon: function(id, index) {
|
||||||
let that = this;
|
let that = this
|
||||||
let list = that.couponsList;
|
let list = that.couponsList
|
||||||
getCouponReceive(id)
|
getCouponReceive(id)
|
||||||
.then(function(res) {
|
.then(function(res) {
|
||||||
list[index].isUse = true;
|
list[index].isUse = true
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: "领取成功",
|
title: '领取成功',
|
||||||
icon: "success",
|
icon: 'success',
|
||||||
duration: 2000
|
duration: 2000,
|
||||||
});
|
})
|
||||||
})
|
})
|
||||||
.catch(function(err) {
|
.catch(function(err) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title:
|
title: err.msg || err.response.data.msg || err.response.data.message,
|
||||||
err.msg || err.response.data.msg || err.response.data.message,
|
icon: 'none',
|
||||||
icon: "none",
|
duration: 2000,
|
||||||
duration: 2000
|
})
|
||||||
});
|
})
|
||||||
});
|
|
||||||
},
|
},
|
||||||
getUseCoupons: function() {
|
getUseCoupons: function() {
|
||||||
let that = this;
|
let that = this
|
||||||
if (that.loading) return; //阻止下次请求（false可以进行请求）；
|
if (that.loading) return //阻止下次请求（false可以进行请求）；
|
||||||
if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
|
if (that.loadend) return //阻止结束当前请求（false可以进行请求）；
|
||||||
that.loading = true;
|
that.loading = true
|
||||||
let q = { page: that.page, limit: that.limit };
|
let q = { page: that.page, limit: that.limit }
|
||||||
getCoupon(q).then(res => {
|
getCoupon(q).then(res => {
|
||||||
that.loading = false;
|
that.loading = false
|
||||||
//apply();js将一个数组插入另一个数组;
|
//apply();js将一个数组插入另一个数组;
|
||||||
that.couponsList.push.apply(that.couponsList, res.data);
|
that.couponsList.push.apply(that.couponsList, res.data)
|
||||||
that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
|
that.loadend = res.data.length < that.limit //判断所有数据是否加载完成；
|
||||||
that.page = that.page + 1;
|
that.page = that.page + 1
|
||||||
});
|
})
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
page {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-coupon-list {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 25rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-coupon-banner {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-coupon-item {
|
||||||
|
width: 100%;
|
||||||
|
height: 210rpx;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-right: 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-coupon-bg {
|
||||||
|
width: 100%;
|
||||||
|
height: 210rpx;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-coupon-sign {
|
||||||
|
height: 110rpx;
|
||||||
|
width: 110rpx;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 9;
|
||||||
|
top: -30rpx;
|
||||||
|
right: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-coupon-item-left {
|
||||||
|
width: 218rpx;
|
||||||
|
height: 210rpx;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-coupon-price-box {
|
||||||
|
display: flex;
|
||||||
|
color: #e41f19;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-coupon-price-sign {
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-coupon-price {
|
||||||
|
font-size: 70rpx;
|
||||||
|
line-height: 68rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-price-small {
|
||||||
|
font-size: 58rpx !important;
|
||||||
|
line-height: 56rpx !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-coupon-intro {
|
||||||
|
background: #f7f7f7;
|
||||||
|
padding: 8rpx 10rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 26rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #666;
|
||||||
|
margin-top: 18rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-coupon-item-right {
|
||||||
|
flex: 1;
|
||||||
|
height: 210rpx;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-left: 24rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-coupon-content {
|
||||||
|
width: 82%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-coupon-title-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-coupon-btn {
|
||||||
|
padding: 6rpx;
|
||||||
|
background: #ffebeb;
|
||||||
|
color: #e41f19;
|
||||||
|
font-size: 25rpx;
|
||||||
|
line-height: 25rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transform: scale(0.9);
|
||||||
|
transform-origin: 0 center;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-color-grey {
|
||||||
|
color: #888 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-bg-grey {
|
||||||
|
background: #f0f0f0 !important;
|
||||||
|
color: #888 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-coupon-title {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-coupon-rule {
|
||||||
|
padding-top: 52rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-rule-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
transform: scale(0.8);
|
||||||
|
transform-origin: 0 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-padding-btm {
|
||||||
|
padding-bottom: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-coupon-circle {
|
||||||
|
width: 8rpx;
|
||||||
|
height: 8rpx;
|
||||||
|
background: rgb(160, 160, 160);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-coupon-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 28rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #666;
|
||||||
|
padding-left: 8rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-top20 {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-coupon-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-coupon-radio {
|
||||||
|
transform: scale(0.7);
|
||||||
|
transform-origin: 100% center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tui-btn-box {
|
||||||
|
position: absolute;
|
||||||
|
width: 146rpx;
|
||||||
|
height: 52rpx;
|
||||||
|
right: 20rpx;
|
||||||
|
bottom: 40rpx;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -1,12 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view ref="container">
|
<view ref="container">
|
||||||
<div class="coupon-list" v-if="couponsList.length > 0">
|
<div class="coupon-list" v-if="couponsList.length > 0">
|
||||||
<div
|
<div class="item acea-row row-center-wrapper" v-cloak v-for="(item, index) in couponsList" :key="index">
|
||||||
class="item acea-row row-center-wrapper"
|
|
||||||
v-cloak
|
|
||||||
v-for="(item, index) in couponsList"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<div class="money" :class="item._type === 0 ? 'moneyGray' : ''">
|
<div class="money" :class="item._type === 0 ? 'moneyGray' : ''">
|
||||||
<div>
|
<div>
|
||||||
￥<span class="num">{{ item.couponPrice }}</span>
|
￥<span class="num">{{ item.couponPrice }}</span>
|
||||||
@ -15,7 +10,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<div class="condition line1">
|
<div class="condition line1">
|
||||||
{{ item.couponTitle }}
|
{{ item.couponTitle }}
|
||||||
</div>
|
</div>
|
||||||
<div class="data acea-row row-between-wrapper">
|
<div class="data acea-row row-between-wrapper">
|
||||||
<div v-if="item.endTime === 0">不限时</div>
|
<div v-if="item.endTime === 0">不限时</div>
|
||||||
@ -27,10 +22,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--暂无优惠券-->
|
<!--暂无优惠券-->
|
||||||
<view
|
<view class="noCommodity" v-if="couponsList.length === 0 && loading === true">
|
||||||
class="noCommodity"
|
|
||||||
v-if="couponsList.length === 0 && loading === true"
|
|
||||||
>
|
|
||||||
<view class="noPictrue">
|
<view class="noPictrue">
|
||||||
<image src="@/static/images/noCoupon.png" class="image" />
|
<image src="@/static/images/noCoupon.png" class="image" />
|
||||||
</view>
|
</view>
|
||||||
@ -38,43 +30,43 @@
|
|||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { getCouponsUser } from "@/api/user";
|
import { getCouponsUser } from '@/api/user'
|
||||||
import DataFormatT from "@/components/DataFormatT";
|
import DataFormatT from '@/components/DataFormatT'
|
||||||
|
|
||||||
const NAME = "UserCoupon";
|
const NAME = 'UserCoupon'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "UserCoupon",
|
name: 'UserCoupon',
|
||||||
components: {
|
components: {
|
||||||
DataFormatT
|
DataFormatT,
|
||||||
},
|
},
|
||||||
props: {},
|
props: {},
|
||||||
data: function() {
|
data: function() {
|
||||||
return {
|
return {
|
||||||
couponsList: [],
|
couponsList: [],
|
||||||
loading: false
|
loading: false,
|
||||||
};
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
$yroute: function(n) {
|
$yroute: function(n) {
|
||||||
var that = this;
|
var that = this
|
||||||
if (n.name === NAME) {
|
if (n.name === NAME) {
|
||||||
that.getUseCoupons();
|
that.getUseCoupons()
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
mounted: function() {
|
mounted: function() {
|
||||||
this.getUseCoupons();
|
this.getUseCoupons()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getUseCoupons: function() {
|
getUseCoupons: function() {
|
||||||
let that = this,
|
let that = this,
|
||||||
type = 0;
|
type = 0
|
||||||
getCouponsUser(type).then(res => {
|
getCouponsUser(type).then(res => {
|
||||||
that.couponsList = res.data;
|
that.couponsList = res.data
|
||||||
that.loading = true;
|
that.loading = true
|
||||||
});
|
})
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
BIN
static/images/banner_coupon.png
Normal file
BIN
static/images/banner_coupon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
BIN
static/images/bg_coupon_3x.png
Normal file
BIN
static/images/bg_coupon_3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
static/images/bg_seckill.png
Normal file
BIN
static/images/bg_seckill.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
static/images/img_couponcentre_received_3x.png
Normal file
BIN
static/images/img_couponcentre_received_3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
static/images/img_seckill.png
Normal file
BIN
static/images/img_seckill.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 936 B |
Reference in New Issue
Block a user