调整小程序
This commit is contained in:
188
atguigu-tuan/pagesSeckill/seckill/seckill.vue
Normal file
188
atguigu-tuan/pagesSeckill/seckill/seckill.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<block v-if="empty">
|
||||
<u-navbar :background="{ background: 'rgb(255, 101, 0)' }" :border-bottom="false" :is-back="true"
|
||||
back-icon-color="#fff">
|
||||
<view class="u-font-xl u-flex u-row-center u-type-info-light u-flex-1">
|
||||
<view>限时秒杀</view>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<u-empty mode="data"></u-empty>
|
||||
</block>
|
||||
|
||||
<block v-else>
|
||||
<view class="gg">
|
||||
<!-- 利用background-image设置导航的线形渐变色彩 -->
|
||||
<u-navbar :background="{ background: 'rgb(255, 101, 0)' }" :border-bottom="false" :is-back="true"
|
||||
back-icon-color="#fff">
|
||||
<view class="u-font-xl u-flex u-row-center u-type-info-light u-flex-1">
|
||||
<view>限时秒杀</view>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<view class="gg-content">
|
||||
<view class="gg-content-header">
|
||||
<scroll-view :scroll-into-view="`scroll-${navId}`" enable-flex scroll-x>
|
||||
<view class="u-flex u-flex-nowrap u-p-r-20 u-p-t-20">
|
||||
<!-- 循环滚动内容 -->
|
||||
<view
|
||||
v-for="seckillTime in seckillTimeList"
|
||||
:id="`scroll-${seckillTime.id}`"
|
||||
:key="seckillTime.id"
|
||||
class="u-p-l-20 u-p-r-20"
|
||||
@click="changeNav(seckillTime.id, seckillTime.name)"
|
||||
>
|
||||
<view class="u-text-center" style="width: 140rpx;">
|
||||
<view class="u-font-xl u-type-info-light">{{ seckillTime.name }}</view>
|
||||
<!-- 1：已开抢 2：抢购中 3：即将开抢 -->
|
||||
<block v-if="seckillTime.timeStaus === 1">
|
||||
<u-tag
|
||||
:bg-color="seckillTime.id === navId ? '#ff0000' : '#fff'"
|
||||
:color="seckillTime.id === navId ? '#fff' : '#555'"
|
||||
mode="dark"
|
||||
shape="circle"
|
||||
text="已开抢"
|
||||
/>
|
||||
</block>
|
||||
<block v-if="seckillTime.timeStaus === 2">
|
||||
<u-tag
|
||||
:bg-color="seckillTime.id === navId ? '#19be6b' : '#fff'"
|
||||
:color="seckillTime.id === navId ? '#fff' : '#555'"
|
||||
mode="dark"
|
||||
shape="circle"
|
||||
text="抢购中"
|
||||
/>
|
||||
</block>
|
||||
<block v-if="seckillTime.timeStaus === 3">
|
||||
<u-tag
|
||||
:bg-color="seckillTime.id === navId ? '#fc0' : '#fff'"
|
||||
:color="seckillTime.id === navId ? '#fff' : '#555'"
|
||||
mode="dark"
|
||||
shape="circle"
|
||||
text="即将开抢"
|
||||
/>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="gg-sv-seckill-container">
|
||||
<view class="u-m-20 u-flex u-flex-1 gg-sv-list-container">
|
||||
<scroll-view class="gg-sv-list" scroll-y="true">
|
||||
<view v-for="seckillSku in seckillSkuList" :key="seckillSku.id" class="gg-sv-item">
|
||||
<u-image :src="seckillSku.imgUrl" border-radius="10rpx" height="400rpx" width="100%"/>
|
||||
<view class="u-font-xl u-p-t-10 u-p-b-10">{{ seckillSku.skuName }}</view>
|
||||
<view>限购数量：{{ seckillSku.seckillLimit }} 销售量：{{ seckillSku.seckillSale }}
|
||||
库存：{{ seckillSku.seckillStock }}
|
||||
</view>
|
||||
<view class="u-flex u-flex-1 u-row-between u-p-t-10 ">
|
||||
<view>
|
||||
价格：
|
||||
<text class="u-font-xl u-type-error">￥{{ seckillSku.seckillPrice }}</text>
|
||||
</view>
|
||||
<view>
|
||||
<u-button shape="circle" size="medium" type="error" @click="gotoProductItem(seckillSku.skuId)">
|
||||
立即抢购
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
seckillTimeList: [],
|
||||
timeName: '',
|
||||
navId: 0,
|
||||
seckillSkuList: [],
|
||||
empty: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 秒杀时间段获取
|
||||
async getSeckillTimeList() {
|
||||
const result = await this.$u.api.getFindAllSeckillTimeList();
|
||||
this.seckillTimeList = result;
|
||||
},
|
||||
// 秒杀商品列表
|
||||
async geSeckillSkuList(timeName) {
|
||||
const result = await this.$u.api.getFindSeckillSkuList({timeName});
|
||||
this.seckillSkuList = result;
|
||||
},
|
||||
// 跳转至商品详情
|
||||
gotoProductItem(id) {
|
||||
this.$u.route('/pages/homeItem/homeItem?skuId=' + id);
|
||||
},
|
||||
// 秒杀时间段进行导航切换
|
||||
changeNav(navId, timeName) {
|
||||
this.navId = navId;
|
||||
this.geSeckillSkuList(timeName);
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
// 获取秒杀时间段与第一个时间段的商品列表
|
||||
await this.getSeckillTimeList();
|
||||
if (this.seckillTimeList.length > 0) {
|
||||
this.navId = this.seckillTimeList[0].id;
|
||||
this.timeName = this.seckillTimeList[0].name;
|
||||
this.geSeckillSkuList(this.timeName);
|
||||
} else {
|
||||
this.empty = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
body {
|
||||
background-color: $u-bg-color;
|
||||
}
|
||||
|
||||
.gg {
|
||||
&-content {
|
||||
&-header {
|
||||
background-color: rgb(255, 101, 0);
|
||||
height: 300rpx;
|
||||
border-bottom-left-radius: 80rpx;
|
||||
border-bottom-right-radius: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&-sv-seckill-container {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 280rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-sv-list-container {
|
||||
background-color: $u-bg-color;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
&-sv-list {
|
||||
height: calc(100vh - 380rpx);
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
&-sv-item {
|
||||
padding: 20rpx;
|
||||
border-bottom: 10rpx solid white;
|
||||
border-radius: 20rpx;
|
||||
background-color: white;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: red !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user