Loki
/
fish-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改秒杀页面和领取优惠券样式

master
Gao xiaosong 4 years ago
parent
4fb75be4b0
commit
db00f38234
12 changed files with 12168 additions and 2764 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8545
      assets/css/style.css
  2. 4835
      assets/css/style.less
  3. 199
      components/t-goods-item/t-goods-item.vue
  4. 680
      pages/activity/GoodsSeckill/index.vue
  5. 278
      pages/activity/GoodsSeckill/index2.vue
  6. 343
      pages/user/coupon/GetCoupon/index.vue
  7. 50
      pages/user/coupon/UserCoupon/index.vue
  8. BIN
      static/images/banner_coupon.png
  9. BIN
      static/images/bg_coupon_3x.png
  10. BIN
      static/images/bg_seckill.png
  11. BIN
      static/images/img_couponcentre_received_3x.png
  12. BIN
      static/images/img_seckill.png

8545
assets/css/style.css
View File

File diff suppressed because one or more lines are too long

4835
assets/css/style.less
View File

File diff suppressed because it is too large Load Diff

199
components/t-goods-item/t-goods-item.vue
Unescape View 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>

680
pages/activity/GoodsSeckill/index.vue
Unescape View File

@ -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 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> <view class="tui-countdown__box" v-if="item.status == 1">
<view class="noCommodity" style="background-color: #f5f5f5;" v-if="seckillList.length === 0 && page > 1"> <text>距离{{ item.status == 2 ? '结束还剩' : '开始还有' }}</text>
<view class="noPictrue"> <count-down :isDay="true" :tipText="'倒计时 '" :dayText="' 天 '" :hourText="' 时 '" :minuteText="' 分 '" :secondText="' 秒'" :datatime="datatime / 1000"></count-down>
<image src="@/static/images/noGood.png" class="image" />
</view> </view>
</view> </view>
</block>
<view class="tui-list__goods">
<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>
</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 export default {
}, name: 'GoodsSeckill',
props: {}, components: {
data: function () { CountDown,
return { },
headerImg: "", props: {},
timeList: [], data: function() {
sticky: false, return {
loading: false, headerImg: '',
datatime: 0, timeList: [],
active: 0, sticky: false,
seckillList: [], loading: false,
status: false, //砍价列表是否获取完成 false 未完成 true 完成 datatime: 0,
loadingList: false, //当前接口是否请求完成 false 完成 true 未完成 active: 0,
page: 1, //页码 seckillList: [],
limit: 5, //数量 status: false, //砍价列表是否获取完成 false 未完成 true 完成
title: [] loadingList: false, //当前接口是否请求完成 false 完成 true 未完成
}; page: 1, //页码
}, limit: 5, //数量
mounted: function () { title: [],
this.mountedStart(); opacity: 1,
}
},
mounted: function() {
this.mountedStart()
},
onReachBottom() {
!this.loadingList && this.getSeckillList()
},
filters: {
getStatusText(status) {
let text = ['活动已结束', '正在疯抢', '即将开抢'][status - 1]
return text
}, },
onReachBottom() { },
!this.loadingList && this.getSeckillList(); methods: {
changeTime: function(index) {
this.active = index
this.getSeckillList()
}, },
methods: { mountedStart: function() {
changeTime: function (index) { var that = this
this.active = index; uni.showLoading()
this.getSeckillList(); getSeckillConfig().then(res => {
}, that.$set(that, 'headerImg', res.data.lovely)
mountedStart: function () { that.$set(that, 'timeList', res.data.seckillTime)
var that = this; that.$set(that, 'active', res.data.seckillTimeIndex)
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 = []; let title = []
title = res.data.seckillTime.map((item, index) => { title = res.data.seckillTime.map((item, index) => {
return { return {
name: "div", name: 'div',
attrs: { attrs: {
class: "timeItem" class: 'timeItem',
}, },
children: [{ children: [
name: "div", {
attrs: { name: 'div',
class: "time" attrs: {
class: 'time',
},
children: [
{
type: 'text',
text: item.time,
}, },
children: [{ ],
type: "text", },
text: item.time {
}] name: 'div',
attrs: {
class: 'state',
}, },
{ children: [
name: "div", {
attrs: { type: 'text',
class: "state" text: item.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
} }
}); })
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; .tui-width__min {
padding: 0 0.2 * 100rpx; min-width: 150rpx;
font-weight: 800; }
height: 0.37 * 100rpx;
line-height: 0.37 * 100rpx; .tui-time {
} font-size: 32rpx;
} line-height: 32rpx;
} font-weight: bold;
}
.tui-status {
font-size: 24rpx;
line-height: 24rpx;
font-weight: 500;
padding-top: 16rpx;
}
.tui-time__active .tui-time {
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;
}
.timeItem .time { .tui-goods__left,
font-size: 0.32 * 100rpx; .tui-goods__right {
font-weight: bold; width: 49%;
height: .5 * 100rpx; }
line-height: .5 * 100rpx;
}
.timeItem .state { .tui-full__width {
height: 0.37 * 100rpx; width: 100% !important;
line-height: 0.37 * 100rpx; }
}
.activity { /*======商品列表 end=======*/
color: #333;
}
.flash-sale .list .item .grab { .tui-goods__item {
background-color: #999; 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
Unescape View 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>

343
pages/user/coupon/GetCoupon/index.vue
Unescape View File

@ -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>

50
pages/user/coupon/UserCoupon/index.vue
Unescape View File

@ -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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

BIN
static/images/bg_coupon_3x.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
static/images/bg_seckill.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
static/images/img_couponcentre_received_3x.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
static/images/img_seckill.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 936 B

Write Preview
Loading…
Cancel
Save