cxc/yshopb2c-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Gao xiaosong
2021-04-09 00:34:18 +08:00
parent 4fb75be4b0
commit db00f38234
12 changed files with 12173 additions and 2769 deletions
Download Patch File Download Diff File Expand all files Collapse all files

692
pages/activity/GoodsSeckill/index.vue
View File

@ -1,277 +1,479 @@
<template>
<view class="flash-sale" ref="container">
<view class="header" v-if="headerImg">
<image :src="headerImg" />
<view class="container">
<view class="tui-bg__box">
<image src="@/static/images/bg_seckill.png" class="tui-bg__img" mode="widthFix" :style="{ opacity: opacity }"></image>
</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 class="tui-header__bg">
<image src="@/static/images/bg_seckill.png" class="tui-bg__img" mode="widthFix"></image>
<scroll-view class="tui-time-slot" scroll-x>
<view class="tui-time__list" :class="{ 'tui-flex__between': timeList.length < 6 }">
<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 class="tui-time">{{ item.time }}</view>
<view class="tui-status">{{ 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>
</scroll-view>
</view>
<view class="tui-body">
<block v-for="(item, index) in timeList" :key="index">
<view class="tui-status__box" v-if="active == index">
<view class="tui-full__width" v-if="item.status == 0">
<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 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>
</tui-divider>
</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 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> -->
</tui-divider>
</view>
<view class="tui-countdown__box" v-if="item.status == 1">
<text>距离{{ item.status == 2 ? '结束还剩' : '开始还有' }}</text>
<count-down :isDay="true" :tipText="'倒计时 '" :dayText="' 天 '" :hourText="' 时 '" :minuteText="' 分 '" :secondText="' 秒'" :datatime="datatime / 1000"></count-down>
</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>
</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>
</template>
<script>
import {
getSeckillConfig,
getSeckillList
} from "@/api/activity";
import CountDown from "@/components/CountDown";
// import { Tab, Tabs } from "vant-weapp";
import Loading from "@/components/Loading";
import { getSeckillConfig, getSeckillList } from '@/api/activity'
import CountDown from '@/components/CountDown'
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);
// import { Tab, Tabs } from "vant-weapp";
import Loading from '@/components/Loading'
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
}
});
}
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: [],
opacity: 1,
}
};
},
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>
<style scoped lang="less">
.flash-sale {
background: #f5f5f5 !important;
height: 100%;
}
.tui-bg__box {
width: 100%;
height: 210rpx;
position: fixed;
left: 0;
top: 0;
z-index: 1;
}
.timeScroll {
display: flex;
align-items: center;
flex-direction: row;
}
.tui-header__bg {
width: 100%;
height: 120rpx;
position: fixed;
left: 0;
top: 0;
z-index: 3;
overflow: hidden;
}
.list {
padding: 0 20rpx;
.tui-bg__img {
width: 100%;
height: 210rpx;
display: block;
transition: opacity 0.1s linear;
}
.item {
padding: .25*100rpx;
border-bottom: 1px solid #f0f0f0;
height: auto;
position: relative;
background: #fff;
margin-bottom: .2*100rpx;
border-radius: .2*100rpx;
}
}
.tui-body {
width: 100%;
position: relative;
margin-top: 120rpx;
z-index: 2;
padding: 0 25rpx;
box-sizing: border-box;
}
.logoPic {
width: 75rpx;
height: 70rpx;
margin-left: 20rpx;
margin-right: 20rpx;
.tui-time-slot {
width: 100%;
height: 120rpx;
position: absolute;
left: 0;
top: 0;
}
image {
width: 75rpx;
height: 70rpx;
}
}
.tui-time__list {
min-width: 100%;
height: 120rpx;
display: flex;
align-items: center;
}
.timeItem {
font-size: 0.22 * 100rpx;
color: #282828;
width: 150rpx;
text-align: center;
padding: 20rpx 0;
background-color: none;
.tui-flex__between {
justify-content: space-between;
}
&.active {
.time {
color: #eb3729;
}
.tui-time__item {
flex-shrink: 0;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
color: #ffb2b2;
}
.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;
}
}
}
.tui-flex__1 {
flex: 1 !important;
}
.timeItem .time {
font-size: 0.32 * 100rpx;
font-weight: bold;
height: .5 * 100rpx;
line-height: .5 * 100rpx;
}
.tui-width__min {
min-width: 150rpx;
}
.timeItem .state {
height: 0.37 * 100rpx;
line-height: 0.37 * 100rpx;
}
.tui-time {
font-size: 32rpx;
line-height: 32rpx;
font-weight: bold;
}
.activity {
color: #333;
}
.tui-status {
font-size: 24rpx;
line-height: 24rpx;
font-weight: 500;
padding-top: 16rpx;
}
.flash-sale .list .item .grab {
background-color: #999;
}
.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;
}
.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>

278
pages/activity/GoodsSeckill/index2.vue Normal file
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>