商品详情页 - 优质商品，值得拥有
<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>
</code></pre>
</view>
</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><strong>页面组件：</strong> 商品详情页</p>
<p><strong>功能说明：</strong></p>
<ol>
<li>
<p><strong>展示商品信息：</strong> - 显示商品图片、标题、价格、销量等信息。 - 使用 <code>u-image</code> 组件展示商品图片。 - 使用 <code>u-line-1</code> 和 <code>u-p-t-20</code> 等样式类控制文字样式和间距。</p>
</li>
<li>
<p><strong>Tab 切换：</strong> - 通过 <code>u-tabs</code> 组件实现 Tab 切换功能。 - 使用 <code>v-if</code> 指令根据当前选中的 Tab 选项动态展示不同内容。</p>
</li>
<li>
<p><strong>收藏/取消收藏：</strong> - 使用 <code>u-icon</code> 组件展示收藏图标，根据 <code>isCollect</code> 状态显示不同的图标样式。 - 使用 <code>collectionHandle()</code> 方法处理收藏/取消收藏操作，调用 <code>$u.api.goodsCollect()</code> 接口。</p>
</li>
<li>
<p><strong>加入购物车：</strong> - 使用 <code>addCart()</code> 方法处理加入购物车操作，调用 <code>$u.api.cartAdd()</code> 接口。 - 使用 <code>$u.utils.isLogin()</code> 检查用户是否登录。</p>
</li>
<li>
<p><strong>显示购物车数量：</strong> - 使用 <code>u-badge</code> 组件展示购物车数量，根据 <code>cartCount</code> 值显示不同数量。 - 使用 <code>getCartsCount()</code> 方法获取购物车数量。</p>
</li>
<li>
<p><strong>点击购物车图标跳转页面：</strong> - 使用 <code>toCart()</code> 方法跳转到购物车页面，使用 <code>$u.route()</code> 方法，并指定 <code>type</code> 为 <code>switchTab</code>。</p>
</li>
</ol>
<p>**关键代码：**javascript// 获取商品信息async getGoodsDetail() { const res = await this.$u.api.goodsInfo(this.goodsId) // ... 处理数据}</p>
<p>// 点击收藏以及取消async collectionHandle() { if (!this.$u.utils.isLogin()) return; await this.$u.api.goodsCollect(this.goodsId) // ... 更新 isCollect 状态}</p>
<p>// 加入购物车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) // ... 更新购物车数量 }}</p>
<p>// 获取购物车内数量async getCartsCount(){ const token = this.vuex_token if(!token){ return }else{ const res = await this.$u.api.cartList() this.cartCount = res.data.length }}</p>
<p>// 点击购物车跳转页面toCart(){ if(this.$u.utils.isLogin()){ this.$u.route({ type: 'switchTab', url:'pages/cart/cart' })</p>
原文地址: https://www.cveoy.top/t/topic/oyNX 著作权归作者所有。请勿转载和采集!