校园二手交易系统(四):首页展示及商品详情页面
本次完成首页的商品展示以及商品详情页面,主要使用mybatisPlus,并无技术难点,主要实现效果如下
展示浏览排名前三的轮播:
使用elementUI的carousel走马灯
<el-carousel :interval="4000" type="card" height="440px" >
<el-carousel-item v-for="item in top3Goods" :key="item.id">
<div class="bgCo1">
<el-image :src="item.picturesurl" @click="jumpGoodsDetail(item.id)"></el-image>
</div>
</el-carousel-item>
</el-carousel>
通过每次点击商品增加商品被浏览次数来对浏览量前三排序
整体效果
商品详情页
使用element的rate组件完成评分功能
<el-rate
v-model="goodsDetail.score"
disabled
show-text
:texts="texts"
text-color="#ff9900"
>
</el-rate>