Skip to content

G
group-buy-ui
Commit c22a0e33 authored by beisir's avatar beisir
Browse files
Options

feat:0元购列表修改

parent 1b25d10c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 362 additions and 17515 deletions
package-lock.json
View file @ c22a0e33
This diff is collapsed.
src/App.vue
View file @ c22a0e33
......@@ -32,6 +32,7 @@ export default {
header: {
immediate: true,
handler(val, oldVal) {
console.log(val);
if (val !== oldVal) {
document.body.className = val ? 'has-header' : '';
}
......
src/api/groupBuy.js
View file @ c22a0e33
......@@ -16,5 +16,11 @@ export default {
return http.get(`${talosHost}/api/kdsp/addr/receiver/list`, data, {
hideLoading: true
});
},
// 入口活动列表
getGroupList(data) {
return http.get(`http://yapi.quantgroups.com/mock/479/goods/group-list`, data, {
hideLoading: true
});
}
};
src/router/groupBuy.js
View file @ c22a0e33
......@@ -4,5 +4,11 @@ module.exports = [
name: 'groupBuySkuInfo',
component: () => import('../views/goodsDetail/index.vue'),
meta: { title: '组团0元购' }
},
{
path: '/groupBuy/list',
name: 'groupBuyList',
component: () => import('../views/goodsList/index.vue'),
meta: { title: '0元购大牌' }
}
];
src/style/var.less
View file @ c22a0e33
// page Colors
@page-color-base: #F7F8FA;
@page-color-base: #f7f8fa;
// Color Palette
@black: #333333;
......@@ -10,26 +10,26 @@
@gray-4: #999999;
@gray-5: #666666;
@gray-6: #f8f8f8;
@gray-7: #D8D8D8;
@gray-7: #d8d8d8;
@red: #ec1500;
@red-light: #ec3333;
@red-dark: #ee0a24;
@orange: #faab0c;
@red-btn:#FF5D00;
@red-btn: #ff5d00;
@grey-border: #f2f3f5;
// Gradient Colors
@gradient-red: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
@gradient-pink: linear-gradient(180deg, #fff7f0 0%, #ffe4dc 100%);
@primary-bg: {
background-image: linear-gradient(269deg, #FF4B00 12%, #FF7705 86%);
background-image: linear-gradient(269deg, #FF5D00 12%, #FF1900 86%);
}
background-image: linear-gradient(269deg, #ff4b00 12%, #ff7705 86%);
background-image: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
};
@cherry-color-error: #dd524d;
@text-color-red:#E81800;
@text-color-light: #FF5A4B;
@text-color-red: #e81800;
@text-color-light: #ff5a4b;
// Component Colors
@text-color: @black;
@text-grey: @gray-4;
......@@ -59,13 +59,13 @@
@padding-xl: @padding-unit * 8;
@padding-sd: @padding-xs + 4;
@font-color-disabled: #C0C4CC;
@font-color-disabled: #c0c4cc;
@font-color-dark: #333333;
@font-color-light: #909399;
@font-color-red: #F23E33;
@font-color-red: #f23e33;
// Font
@font-size-list: 10,11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 24, 26, 28, 30, 52, 40;
@font-size-list: 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 24, 26, 28, 30, 52, 40;
.generate-text(15);
.generate-text(@n, @i: 1) when (@i =< @n) {
......@@ -77,9 +77,9 @@
.generate-text(@n, @i + 1);
}
@font-weight-bold: 600;
@font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
@font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial,
Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
@font-din: 'din';
@deep: ~'>>>';
......@@ -99,33 +99,44 @@
@page-row-spacing: 15px;
/* 行为相关颜色 */
@color-primary:#fa436a;
@color-primary: #fa436a;
// 灰色
// 主要操作按钮背景色
@background-primary: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
@background-coupon: linear-gradient(270deg, #F76B1C 0%, #FFC049 100%);
@background-coupon: linear-gradient(270deg, #f76b1c 0%, #ffc049 100%);
/*文字颜色*/
@font-color-dark: #333333;
@font-color-base: #606266;
@font-color-light: #909399;
@font-color-disabled: #C0C4CC;
@font-color-disabled: #c0c4cc;
@font-color-spec: #4399fc;
@font-color-search: #EC1500;
@font-color-red: #F23E33;
@font-color-search: #ec1500;
@font-color-red: #f23e33;
// @font-color-red: #EC3333;
@font-color-red: #F23E33;
@font-color-red: #f23e33;
// Font
@font-size-11: 11px;
@font-size-12: 12px;
@font-size-13: 14px;
@font-size-14: 14px;
@font-size-16: 16px;
@font-size-18: 18px;
@font-size-20: 20px;
@font-size-26: 26px;
@font-size-28: 28px;
@font-size-30: 30px;
@font-size-32: 32px;
@font-size-36: 36px;
// 边框
@border-sm: 2rpx;
@border-md: 4rpx;
@border-gray: #999;
@border-red: #EC1500;
@border-red: #ec1500;
/* 边框颜色 */
@border-color-dark: #DCDFE6;
@border-color-base: #E4E7ED;
@border-color-light: #EBEEF5;
@border-color-search: #EC1500;
@border-color-dark: #dcdfe6;
@border-color-base: #e4e7ed;
@border-color-light: #ebeef5;
@border-color-search: #ec1500;
src/views/goodsList/index.less 0 → 100644
View file @ c22a0e33
.group {
height: 100%;
font-size: @font-size-14;
&-banner {
position: relative;
height: 380px;
.banner-image {
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.banner-mark {
width: 40%;
height: 30px;
line-height: 30px;
border-radius: 15px;
color: #fff;
}
}
&-bottom {
padding-left: 12px;
padding-right: 12px;
.group-list {
background-color: @white;
border-radius: 10px;
overflow: hidden;
}
.list-title {
height: 49px;
line-height: 49px;
border-bottom: solid 1px #d8d8d8;
display: flex;
align-items: center;
justify-content: space-between;
.list-title-text {
padding-left: 8px;
font-size: 17px;
}
}
.list-count {
padding-right: 12px;
display: flex;
justify-content: center;
align-items: center;
.colon {
display: inline-block;
margin: 0 4px;
color: #ee0a24;
}
.block {
display: inline-block;
width: 16px;
height: 16px;
line-height: 16px;
color: #fff;
font-size: 9.6px;
text-align: center;
background-color: #e82424;
border-radius: 3.2px;
}
&-label {
font-size: 12px;
color: #333333;
}
}
@{deep} .cr-card {
.cr-card__header__thumb {
width: 108px;
height: 108px;
background-color: #f7f8f9;
border-radius: 6px;
overflow: hidden;
}
.cr-card__header__tag {
font-size: @font-size-12;
color: @white;
width: 45px;
height: 18px;
line-height: 18px;
text-align: center;
background-image: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
border-radius: 6px 0 6px 0;
}
.cr-card__header__content__title {
line-height: 22px;
}
.cr-card__header__content__desc {
margin-top: 4px;
}
.group-progress {
width: 163px;
overflow: hidden;
border-radius: 5px;
}
.group-price-top {
margin: 0;
}
}
}
}
src/views/goodsList/index.vue 0 → 100644
View file @ c22a0e33
<template>
<div class="group">
<!-- 配置头部动态信息 start -->
<div class="group-banner">
<!-- 动态活动背景图 -->
<cr-image width="100%" height="100%" class="banner-image" :src="gpImagePath" />
<!-- 顶部mark框 -->
<div class="banner-mark">135****8888刚刚获得华为P40</div>
<!-- 头像列表 -->
<div class="banner-portrait" />
<!-- 中间提示 文字 -->
<div class="banner-prompt">已有40万+人拿到商品</div>
</div>
<!-- 配置头部动态信息 end -->
<!-- 下方列表展示信息 start -->
<div class="group-bottom" :style="{ backgroundColor: gpBackColor }">
<div class="" />
<div class="group-list">
<div class="list-title">
<b class="list-title-text">今日拼团</b>
<div class="list-count">
<span class="list-count-label">距结束：</span>
<cr-count-down :time="gpCountDown" format="{d}天{h}时{m}分{s}秒">
<template #default="timeData">
<span class="block">{{ timeData.h | filterTime }}</span>
<span class="colon">:</span>
<span class="block">{{ timeData.m | filterTime }}</span>
<span class="colon">:</span>
<span class="block">{{ timeData.s | filterTime }}</span>
</template>
</cr-count-down>
</div>
</div>
<cr-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
<cr-card
v-for="(item, index) in goodsList"
:key="index"
:thumb="item.thumbImageUrl || item.imageUrl"
class="group-item"
img-height="108"
>
<!-- @click="handleBtnClick(item)" -->
<template #tag>3人团</template>
<template #title>{{ item.goodsName }}</template>
<template #desc>
<cr-progress
class="group-progress"
stroke-width="5"
color="#EC1500"
track-color="#F7F8F9"
:show-pivot="false"
:percentage="handleProgressByStatus(item)"
/>
</template>
<template #priceTop>
<div class="group-price-top">已拼2333团</div>
</template>
<template #price>
<p class="cr-card__number__normal-price">￥{{ item.activityPrice }}</p>
</template>
<template #originPrice>
<del v-if="item.price" class="cr-card__number__origin-price">
￥{{ item.price }}
</del>
</template>
<template #footer>
<cr-button size="small" type="danger" shape="circle" class="good-list_btn">
马上参团
</cr-button>
</template>
</cr-card>
<!-- <cr-cell v-for="item in list" :key="item" :title="item" /> -->
</cr-list>
</div>
<!-- 下方列表展示信息 end -->
</div>
</div>
</template>
<script>
import groupBuyApi from '@/api/groupBuy';
import gpImagePath from '@/assets/images/groupBuy/bg-top.png';
export default {
// beforeRouteEnter(to, from, next) {
// next(vm => {});
// },
// eslint-disable-next-line vue/name-property-casing
name: 'groupBuyList',
filters: {
filterTime(time) {
return time > 9 ? time : '0' + time;
}
},
data() {
return {
gpImagePath,
gpBackColor: '#FA494E',
gpCountDown: 30 * 60 * 60 * 1000,
goodsList: [],
loading: false,
finished: false
};
},
computed: {},
created() {},
mounted() {
// todo 曝光埋点
},
methods: {
onLoad() {
// 异步更新数据
// setTimeout 仅做示例，真实场景中一般为 ajax 请求
// setTimeout(() => {
// for (let i = 0; i < 10; i++) {
// this.list.push(this.list.length + 1);
// }
// // 加载状态结束
// this.loading = false;
// // 数据全部加载完成
// if (this.list.length >= 40) {
// this.finished = true;
// }
// }, 1000);
this.getGoodsList();
},
handleProgressByStatus(item) {
if (!item) return 0;
let percentage = 0;
const { showSaleCount, goodsCount } = item;
percentage = (goodsCount / (goodsCount + showSaleCount)) * 100;
percentage = percentage < 0 ? 0 : percentage;
// percentage = !this.topicCfg.hasStart ? 0 : percentage;
return Math.round(percentage * 100) / 100;
},
async getGoodsList() {
// const { pageSize, pageNo, activityId } = this;
// const { goodsSpecialId, templateDetailId } = this.topicCfg;
this.loading = true;
this.finished = false;
try {
const [res] = await groupBuyApi.getGroupList({
// goodsSpecialId,
// pageSize,
// pageNo,
// activityId,
// templateDetailId
});
console.log(res);
if (res.size) {
this.loading = false;
this.showLoading = false;
this.goodsList = res.items || [];
if (!res.hasNext) {
this.finished = true;
} else {
this.pageNo++;
}
}
} catch (error) {
this.loading = false;
this.finished = true;
}
}
}
};
</script>
<style lang="less" src="./index.less" scoped></style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment