msb-mca
/
shop-pc
2.1k
2
Code Issues Pull Requests Projects Releases Wiki Activity

feat:完成为你竞选

Browse Source
merge-requests/31/head
张征 2 years ago
parent 82772ab10e
commit bbd5d7b308
5 changed files with 270 additions and 76 deletions
Show Stats Download Patch File Download Diff File

BIN
assets/img/goods/tips.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 553 B

81
components/UiChosen.vue
Unescape View File

@ -0,0 +1,81 @@
<template>
<div class="chosen">
<div class="chosen-title flex flex-between flex-middle">
<h3 class="chosen-title--txt">为你精选</h3>
<div class="chosen-title--btn flex" @click="getRecommendedGoodsList()">
<img src="@/assets/img/goods/each.png" alt="切换推荐" />
<span>换一组</span>
</div>
</div>
<div class="chosen-list">
<UiGoodsItem
:item="item"
v-for="item in recommendedData"
:key="item.id"
></UiGoodsItem>
</div>
</div>
</template>
<script>
import { ApiGetRecommendedGoodsList } from "@/plugins/api/goods";
import UiGoodsItem from "@/components/UiGoodsItem.vue";
export default {
components: { UiGoodsItem },
data() {
return {
recommendedData: [],
};
},
created() {
this.getRecommendedGoodsList();
},
methods: {
async getRecommendedGoodsList() {
let vm = this;
let res = await ApiGetRecommendedGoodsList();
vm.recommendedData = res.result;
},
},
};
</script>
<style lang="scss" scoped>
.chosen {
width: 100%;
padding: 30px 0 40px;
background: #f8f8f8;
&-title {
@include layout-box;
&--txt {
font-size: 24px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #333333;
}
&--btn {
width: 140px;
cursor: pointer;
img {
width: 27px;
height: 27px;
margin-right: 5px;
}
span {
font-size: 18px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #999999;
}
}
}
&-list {
@include layout-box;
padding-top: 40px;
display: grid;
grid-template-columns: repeat(auto-fill, 232px);
justify-content: space-between;
grid-row-gap: 10px;
}
}
</style>

4
layouts/module/header/index.vue
Unescape View File

@ -199,10 +199,6 @@ export default {
tabPath: "/",
tabList: [
{ label: "首页", value: "/" },
{
label: "爆款推荐",
value: `/goods/list?id=recommend`,
},
{
label: "开发书籍",
value: `/goods/list?id=6&levelType=${CATEGROY_LEVEL.ONE}`,

195
pages/goods/detail/_id.vue
Unescape View File

@ -11,7 +11,7 @@
Java从入门到项目实战
</p>
</nav>
<main class="main flex">
<main class="main flex" v-if="detailData.isEnable">
<aside class="main__preview">
<img
class="main__preview-big"
@ -56,9 +56,24 @@
{{ detailData.name }}
</p>
<div class="main__details-msg">
<div class="main__details-msg--price flex">
<div class="main__details-msg--price flex flex-middle">
<span class="msg-txt">售价</span>
<UiMoney :money="detailData.startingPrice"></UiMoney>
<div
v-if="
detailData.productActivityVO.isActivity &&
!detailData.productActivityVO.isStartActivity
"
class="main__details-msg--skill flex flex-column flex-bottom"
>
<span class="skill-txt">即将开始秒杀</span>
<div class="skill-2" v-if="isToday()">
<span>08</span>
<span>08</span>
<span>08</span>
</div>
<span class="skill-1" v-else>{{ getBeginTime() }}</span>
</div>
</div>
<div class="hr"></div>
<div class="main__details-msg--service flex flex-middle">
@ -73,7 +88,7 @@
/>
</div>
</div>
<div class="main__details-option">
<div class="main__details-option" v-if="skuData.stock">
<div
class="main__details-option--line flex flex-middle"
v-for="(item, index) in detailData.attributeGroupList"
@ -101,6 +116,10 @@
</div>
</div>
</div>
<div class="main__details-none flex flex-middle" v-else>
<img src="@/assets/img/goods/tips.png" alt="" />
<span>此商品暂无库存啦~看看其他的吧</span>
</div>
<div class="main__details-pay">
<UiButton type="yellow_line">加入购物车</UiButton>
<UiButton type="yellow_panel" @click="buyNow">立即购买</UiButton>
@ -108,7 +127,11 @@
</article>
</main>
<section class="section flex">
<main v-else class="main">
<img class="main-none-img" src="@/assets/img/goods/none.png" alt="" />
<p class="main-none-txt">商品已下架啦，去逛逛别的吧~</p>
</main>
<section class="section flex" v-if="detailData.isEnable">
<div class="section-recommend">
<p class="section-title">看了又看</p>
<UiGoodsItem
@ -119,22 +142,32 @@
</div>
<div class="section-details">
<p class="section-title">商品详情</p>
<div class="rich" v-html="detailData.detail"></div>
<div
class="rich"
v-html="detailData.detail"
v-if="detailData.detail"
></div>
<div class="section-details--none" v-else>
<img src="@/assets/img/goods/none.png" alt="" />
<p>暂无详情</p>
</div>
</div>
</section>
<UiChosen v-else></UiChosen>
</div>
</template>
<script>
import UiMoney from "@/components/UiMoney.vue";
import UiButton from "@/components/UiButton.vue";
import UiGoodsItem from "@/components/UiGoodsItem.vue";
import UiChosen from "@/components/UiChosen.vue";
import {
ApiGetGoodsDetail,
ApiGetGoodsSkus,
ApiGetRecommendedGoodsList,
} from "@/plugins/api/goods";
export default {
componetns: { UiMoney, UiButton, UiGoodsItem },
componetns: { UiMoney, UiButton, UiGoodsItem, UiChosen },
data() {
return {
curBuyNum: 1,
@ -142,8 +175,11 @@ export default {
recommendedData: [],
skuData: {},
detailData: {
isEnable: false,
pictureList: [],
productActivityVO: {},
},
surplus: {},
};
},
async created() {
@ -155,9 +191,6 @@ export default {
vm.detailData = res1.result;
vm.skuData = res2.result;
vm.recommendedData = res3.result;
console.log(`res1`, res1.result);
console.log(`res2`, res2.result);
console.log(`res3`, res3.result);
},
computed: {
/**
@ -191,6 +224,68 @@ export default {
},
},
methods: {
/* 获取倒计时 */
getSurplus(startTime, endTime) {
let nowtime = new Date(startTime), //获取当前时间
endtime = new Date(endTime); //定义结束时间
let leftObj = {};
leftObj["lefttime"] = endtime.getTime() - nowtime.getTime(); //距离结束时间的毫秒数
leftObj["leftd"] = Math.floor(
leftObj["lefttime"] / (1000 * 60 * 60 * 24)
); //计算天数
leftObj["lefth"] = Math.floor(
(leftObj["lefttime"] / (1000 * 60 * 60)) % 24
); //计算小时数
leftObj["leftm"] = Math.floor((leftObj["lefttime"] / (1000 * 60)) % 60); //计算分钟数
leftObj["lefts"] = Math.floor((leftObj["lefttime"] / 1000) % 60); //计算秒数
return leftObj;
},
setSurplus() {
let vm = this;
let startTime = new Date(
vm.detailData.productActivityVO.currentTime
).getTime();
let endTime = new Date(
vm.detailData.productActivityVO.activityEndTime
).getTime();
vm.surplus = getSurplus(startTime, endTime);
if (vm.timer) {
return false;
}
vm.timer = setInterval(() => {
vm.startTime += 1000;
vm.surplus = getSurplus(vm.startTime, vm.endTime);
if (vm.surplus.lefttime <= 0) {
clearInterval(vm.timer);
location.reload();
}
}, 1000);
},
isToday() {
let vm = this;
let begin = new Date(
vm.detailData.productActivityVO.activityStartTime
).getTime();
let now = new Date(vm.detailData.productActivityVO.currentTime).getTime();
if (new Date(begin).toDateString() === new Date(now).toDateString()) {
return true;
} else if (new Date(begin) < new Date()) {
return false;
}
},
getBeginTime() {
let vm = this;
let begin = new Date(
vm.detailData.productActivityVO.activityStartTime
).getTime();
let timestr = new Date(begin);
let month = timestr.getMonth() + 1;
let date = timestr.getDate();
let hour = timestr.getHours();
let minute = timestr.getMinutes();
let datetime = `${month}月${date}日 ${hour}:${minute} 开始`;
return datetime;
},
onActiveImg(i) {
this.activeImg = i;
},
@ -417,6 +512,34 @@ export default {
&--price {
padding-bottom: 30px;
}
&--skill {
margin-left: auto;
.skill-1 {
font-size: 16px;
font-family: PingFang SC-常规体, PingFang SC;
font-weight: normal;
color: #e83710;
}
.skill-2 {
margin-top: 6px;
span {
display: inline-block;
width: 22px;
height: 22px;
background: #e83710;
border-radius: 2px;
font-size: 14px;
font-family: PingFang SC-常规体, PingFang SC;
font-weight: normal;
color: #ffffff;
text-align: center;
line-height: 22px;
}
}
}
.hr {
width: 673px;
height: 1px;
@ -460,6 +583,27 @@ export default {
}
}
&-none {
width: 713px;
height: 40px;
background: #f3f3f3;
margin-top: 20px;
padding: 0 20px;
img {
width: 18px;
height: 18px;
margin-right: 12px;
}
span {
font-size: 14px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #666666;
}
}
&-pay {
margin-top: 40px;
button {
@ -476,6 +620,21 @@ export default {
}
}
}
&-none-img {
display: block;
width: 228px;
height: 144px;
margin: 60px auto 20px;
}
&-none-txt {
width: 100%;
text-align: center;
font-size: 14px;
font-family: PingFang SC-常规体, PingFang SC;
font-weight: normal;
color: #999999;
margin-bottom: 50px;
}
}
.section {
width: 1200px;
@ -490,6 +649,24 @@ export default {
}
&-details {
width: 960px;
&--none {
img {
display: block;
width: 228px;
height: 144px;
margin: 133px auto 20px;
}
p {
width: 100%;
text-align: center;
font-size: 14px;
font-family: PingFang SC-常规体, PingFang SC;
font-weight: normal;
color: #999999;
}
}
}
&-title {
width: 100%;

66
pages/goods/list/index.vue
Unescape View File

@ -70,23 +70,7 @@
<img class="main-none-img" src="@/assets/img/goods/none.png" alt="" />
<p class="main-none-txt">没有搜到你想要的商品哦，换个关键词试试</p>
</main>
<section class="section">
<div class="section-title flex flex-between flex-middle">
<h3 class="section-title--txt">为你精选</h3>
<div class="section-title--btn flex" @click="getRecommendedGoodsList()">
<img src="@/assets/img/goods/each.png" alt="切换推荐" />
<span>换一组</span>
</div>
</div>
<div class="section-list">
<UiGoodsItem
:item="item"
v-for="item in recommendedData"
:key="item.id"
></UiGoodsItem>
</div>
</section>
<UiChosen></UiChosen>
</div>
</template>
<script>
@ -94,12 +78,12 @@ import {
ApiGetGoodsList,
ApiGetCategoryOneList,
ApiGetCategoryTwoAndGoods,
ApiGetRecommendedGoodsList,
} from "@/plugins/api/goods";
import Sort from "./module/SortItem.vue";
import UiGoodsItem from "@/components/UiGoodsItem.vue";
import UiChosen from '@/components/UiChosen.vue';
export default {
components: { Sort, UiGoodsItem },
components: { Sort, UiGoodsItem,UiChosen },
data() {
return {
navActive: 0,
@ -109,7 +93,6 @@ export default {
// 0:综合,1:desc,2:asc,3:上新
sortType: 0,
categoryOneList: [],
recommendedData: [],
levelType: "",
levelId: "",
params: {
@ -130,18 +113,12 @@ export default {
this.levelType = this.$route.query.levelType || "";
this.levelId = this.$route.query.id || "";
this.levelType == 2 ? (this.params.categoryId = this.levelId) : "";
this.getRecommendedGoodsList();
if (this.levelType == 1) {
this.getCategoryTwoAndGoods();
} else {
this.getGoodsListData();
}
},
async getRecommendedGoodsList() {
let vm = this;
let res = await ApiGetRecommendedGoodsList();
vm.recommendedData = res.result;
},
async getCategoryOneList() {
let res = await ApiGetCategoryOneList();
this.categoryOneList = res.result;
@ -309,42 +286,5 @@ export default {
color: #999999;
}
}
.section {
width: 100%;
padding: 30px 0 40px;
background: #f8f8f8;
&-title {
@include layout-box;
&--txt {
font-size: 24px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #333333;
}
&--btn {
width: 140px;
cursor: pointer;
img {
width: 27px;
height: 27px;
margin-right: 5px;
}
span {
font-size: 18px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #999999;
}
}
}
&-list {
@include layout-box;
padding-top: 40px;
display: grid;
grid-template-columns: repeat(auto-fill, 232px);
justify-content: space-between;
grid-row-gap: 10px;
}
}
</style>

Write Preview
Loading…
Cancel
Save