商品详情页 - 优质商品，值得拥有
<template>
<view class='u-rela u-skeleton'>
<!-- 商品信息 -->
<view class='goods-item'>
<u-image class='u-skeleton-rect' width='100%' height='500rpx'
:src='goodsInfo.cover_url'></u-image>
<view class='name u-line-1 u-p-t-20 u-p-b-20 u-skeleton-rect'>{{goodsInfo.title}}</view>
<view class='u-flex u-row-between'>
<view class='price u-skeleton-rect'>￥ {{goodsInfo.price}}</view>
<view class='sales u-skeleton-rect'>销量: {{goodsInfo.sales}}</view>
</view>
</view>
<pre><code> <!-- tab组件 -->
<u-tabs class='u-m-l-20 u-m-r-20 u-skeleton-rect' :list='list'
:is-scroll='false' :current='current' @change='changeTabs'></u-tabs>
<view class='content u-m-l-20 u-m-r-20 u-p-b-80 u-skeleton-rect'>
<!-- 商品详情 -->
<template v-if='current === 0'>
<u-parse :html='goodsInfo.details'></u-parse>
</template>
<!-- 商品评论 -->
<template v-if='current === 1'>
<view class='comment' v-for='(res, index) in commentList' :key='res.id'>
<view class='left'>
<image :src='res.user.avatar_url' mode='aspectFill'></image>
</view>
<view class='right'>
<view class='top'>
<view class='name'>{{ res.user.name }}</view>
</view>
<view class='content'>{{ res.content }}</view>
<view class='bottom'>
{{ res.created_at }}
</view>
</view>
</view>
</template>
<!-- 推荐商品 -->
<template v-if='current === 2'>
<u-row gutter='16'>
<u-col span='6' v-for='(item,index) in like_goodsList' :key='index'>
<goods_card :goods='item'></goods_card>
</u-col>
</u-row>
</template>
</view>
<view class='navigation'>
<view class='left'>
<view class='item u-text-center' @click='collectionHandle()'>
<u-icon name='star-fill' :size='40' :color='isCollect === 1 ? '#ed3f14' : ''></u-icon>
<view class='text u-line-1' v-if='isCollect !== 1'>收藏</view>
<view class='text u-line-1' style='color: #ed3f14;' v-else>已收藏</view>
</view>
<view class='item car' @click='toCart'>
<u-badge class='car-num' :count='cartCount' type='error' :offset='[-3, -6]'></u-badge>
<u-icon name='shopping-cart' :size='40' :color='$u.color['contentColor']'></u-icon>
<view class='text u-line-1'>购物车</view>
</view>
</view>
<view class='right'>
<view class='cart btn u-line-1' @click='addCart'>加入购物车</view>
<view class='buy btn u-line-1'>立即购买</view>
</view>
</view>
<!--引用组件-->
<u-skeleton :loading='loading' :animation='true' bgColor='#FFF'></u-skeleton>
</view>
</code></pre>
</template>
<script>
export default {
data() {
return {
goodsInfo: {}, // 商品信息
list: [{
name: '商品详情'
}, {
name: '商品评论',
count: 0,
}, {
name: '推荐商品'
}], // tab列表
current: 0, //当前选中的tab选项
commentList: [], // 评论列表
isCollect: 0, // 是否收藏
like_goodsList: [], // 推荐商品列表
loading: false, // 信息加载
cartCount: 0,// 购物车数量
goodsId: null,//商品Id
}
},
onLoad(options) {
// options是页面跳转时的参数
this.goodsId = options.id
// 初始化页面数据
this.getGoodsDetail()
// 初始化购物车
this.getCartsCount()
},
methods: {
// 获取商品信息
async getGoodsDetail() {
// this.loading = true
const res = await this.$u.api.goodsInfo(this.goodsId)
console.log(res.goods);
// this.loading = false
// // console.log(res)
// 获取评论数，用于显示在tab上
this.list[1].count = res.goods.comments.length
// // 获取商品信息
this.goodsInfo = res.goods
this.isCollect = res.goods.is_collect
// // 评论列表
this.commentList = res.goods.comments
console.log(this.commentList);
// // 推荐商品列表
this.like_goodsList = res.like_goods
},
// 切换tab选项
changeTabs(index) {
this.current = index
},
// 点击收藏以及取消
async collectionHandle() {
if (!this.$u.utils.isLogin()) return;
// 请求收藏API
await this.$u.api.goodsCollect(this.goodsId)
if (this.isCollect === 0) {
this.isCollect = 1
this.$u.toast('收藏成功')
} else {
this.isCollect = 0
this.$u.toast('取消收藏成功')
}
},
// 加入购物车
async addCart(){
if(!this.$u.utils.isLogin())return
if(this.$u.utils.isLogin()){
const params = {
goods_id: this.goodsId
}
await this.$u.api.cartAdd(params)
// 更新购物车数量
this.getCartsCount()
this.$u.toast('添加购物车成功')
}
},
// 获取购物车内数量,必须登录，不然就不显示数量
async getCartsCount(){
const token = this.vuex_token
if(!token){
return
}else{
const res = await this.$u.api.cartList()
console.log(res)
this.cartCount = res.data.length
}
},
// 点击购物车跳转到购物车页面
toCart(){
if(this.$u.utils.isLogin()){
this.$u.route({
// 挑战到tabbar用到switchTab
type: 'switchTab',
url:'pages/cart/cart'
})
}
}
}
}
</script>
<style lang='scss' scoped>
// 商品信息
.goods-item {
padding: 20rpx;
margin-bottom: 20rpx;
// 标题
.name {
font-size: 36rpx;
font-weight: bold;
margin-top: 20rpx;
margin-bottom: 20rpx;
width: 100%;
}
// 价格
.price {
width: 40%;
color: red;
padding-left: 20rpx;
font-weight: bold;
font-size: 32rpx;
}
// 销量
.sales {
width: 40%;
color: #888;
font-weight: bold;
font-size: 32rpx;
padding-right: 20rpx;
}
}
.content {
min-height: 360rpx;
}
// 底部
.navigation {
display: flex;
// margin-top: 100rpx;
border: solid 2rpx #f2f2f2;
background-color: #ffffff;
padding: 16rpx 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
.left {
display: flex;
font-size: 20rpx;
margin-right: 80rpx;
.item {
margin: 0 30rpx;
&.car {
text-align: center;
position: relative;
.car-num {
position: absolute;
top: -10rpx;
right: -10rpx;
}
}
}
}
.right {
display: flex;
font-size: 28rpx;
align-items: center;
.btn {
line-height: 66rpx;
padding: 0 30rpx;
border-radius: 36rpx;
color: #ffffff;
}
.cart {
background-color: #ed3f14;
margin-right: 30rpx;
}
.buy {
background-color: #ff7900;
}
}
}
</style>
<p>后端服务器模拟说明
内容：本文档为后端服务器模拟说明，旨在帮助开发者模拟后端服务器，实现前后端分离开发。</p>
<p>使用方法：</p>
<ol>
<li>下载并安装json-server</li>
</ol>
<p>在命令行中输入以下命令：</p>
<pre><code class="language-shell">npm install -g json-server
</code></pre>
<ol start="2">
<li>创建mock数据文件</li>
</ol>
<p>在项目根目录下创建一个<code>mock</code>文件夹，并在该文件夹下创建一个<code>db.json</code>文件，用于存储mock数据。</p>
<ol start="3">
<li>编写mock数据</li>
</ol>
<p>在<code>db.json</code>文件中编写mock数据。例如：</p>
<pre><code class="language-json">{
"goods": [
{
"id": 1,
"title": "商品1",
"cover_url": "https://img.yzcdn.cn/vant/cat.jpeg",
"price": 100,
"sales": 10,
"details": "<p>商品1详情</p>",
"comments": [
{
"id": 1,
"user": {
"name": "用户1",
"avatar_url": "https://img.yzcdn.cn/vant/cat.jpeg"
},
"content": "评论1",
"created_at": "2021-01-01 12:00:00"
},
{
"id": 2,
"user": {
"name": "用户2",
"avatar_url": "https://img.yzcdn.cn/vant/cat.jpeg"
},
"content": "评论2",
"created_at": "2021-01-02 12:00:00"
}
],
"is_collect": 0
},
{
"id": 2,
"title": "商品2",
"cover_url": "https://img.yzcdn.cn/vant/cat.jpeg",
"price": 200,
"sales": 20,
"details": "<p>商品2详情</p>",
"comments": [
{
"id": 3,
"user": {
"name": "用户3",
"avatar_url": "https://img.yzcdn.cn/vant/cat.jpeg"
},
"content": "评论3",
"created_at": "2021-01-03 12:00:00"
},
{
"id": 4,
"user": {
"name": "用户4",
"avatar_url": "https://img.yzcdn.cn/vant/cat.jpeg"
},
"content": "评论4",
"created_at": "2021-01-04 12:00:00"
}
],
"is_collect": 1
}
],
"users": [
{
"id": 1,
"username": "user1",
"password": "123456"
},
{
"id": 2,
"username": "user2",
"password": "123456"
}
],
"carts": [
{
"id": 1,
"user_id": 1,
"goods_id": 1,
"count": 2
},
{
"id": 2,
"user_id": 1,
"goods_id": 2,
"count": 1
}
]
}
</code></pre>
<ol start="4">
<li>启动json-server</li>
</ol>
<p>在命令行中进入项目根目录，并输入以下命令启动json-server：</p>
<pre><code class="language-shell">json-server --watch mock/db.json
</code></pre>
<p>其中，<code>--watch</code>参数表示监视文件变化并自动重新加载，<code>mock/db.json</code>表示mock数据文件路径。</p>
<ol start="5">
<li>修改API请求地址</li>
</ol>
<p>在API请求中将请求地址修改为<code>http://localhost:3000</code>，例如：</p>
<pre><code class="language-javascript">// 获取商品详情
async goodsInfo(id) {
const res = await this.$http.get(`/goods/${id}`)
return res.data
}
</code></pre>
<p>其中，<code>/goods/${id}</code>表示请求<code>http://localhost:3000/goods/${id}</code>地址的数据。</p>
<ol start="6">
<li>完成！</li>
</ol>
<p>现在您可以在前端页面中模拟后端服务器返回的数据了。</p>
原文地址: http://www.cveoy.top/t/topic/oytl 著作权归作者所有。请勿转载和采集!