|
|
|
|
@ -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"
|
|
|
|
|
@ -94,6 +109,16 @@
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main__details-option--line flex flex-middle">
|
|
|
|
|
<span class="line-txt">数量</span>
|
|
|
|
|
<div class="line-btns">
|
|
|
|
|
<el-input-number v-model="curBuyNum" :min="1"></el-input-number>
|
|
|
|
|
</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>
|
|
|
|
|
@ -102,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
|
|
|
|
|
@ -113,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,
|
|
|
|
|
@ -136,8 +175,11 @@ export default {
|
|
|
|
|
recommendedData: [],
|
|
|
|
|
skuData: {},
|
|
|
|
|
detailData: {
|
|
|
|
|
isEnable: false,
|
|
|
|
|
pictureList: [],
|
|
|
|
|
productActivityVO: {},
|
|
|
|
|
},
|
|
|
|
|
surplus: {},
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
async created() {
|
|
|
|
|
@ -149,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: {
|
|
|
|
|
/**
|
|
|
|
|
@ -185,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;
|
|
|
|
|
},
|
|
|
|
|
@ -411,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;
|
|
|
|
|
@ -444,7 +573,7 @@ export default {
|
|
|
|
|
border-color: #ccc;
|
|
|
|
|
}
|
|
|
|
|
.attr-item__active {
|
|
|
|
|
border: 1px solid #FF512B;
|
|
|
|
|
border: 1px solid #ff512b;
|
|
|
|
|
}
|
|
|
|
|
.attr-item__disabled {
|
|
|
|
|
color: #999999;
|
|
|
|
|
@ -454,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 {
|
|
|
|
|
@ -470,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;
|
|
|
|
|
@ -484,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%;
|
|
|
|
|
|
ch
3 years ago
