【微信小程序】黑马优购--05商品详情

7.商品详情页面

接口文档

7.1效果

7.2获取分类id 

在商品列表页面wxml中加个超链接把id传过去

 <view class="first_tab">
      <navigator class="goods_item" wx:for="{
  {goodsList}}" wx:key="goods_id" url="/pages/goos_detail/goos_detail?goods_id={
  {item.goods_id}}">

7.3获取数据 

// pages/goos_detail/goos_detail.js
import { request } from "../../request/index";
Page({

  /**
   * 页面的初始数据
   */
  data: {
    goodsObj:{}   
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    const {goods_id}=options;
    // console.log(goods_id);
    this.getGoodsDetail(goods_id);
  },

  // 获取商品详情数据
  async getGoodsDetail(goods_id){
    const goodsObj= await request({url:"/goods/detail",data:{goods_id}});
    // console.log(res);
    this.setData({
      goodsObj
    })
  }

})

7.4接口数据和页面分析 

 7.5轮播图的动态渲染

/* pages/goos_detail/goos_detail.wxss */
.detail_swiper swiper{
  /* 因为原图尺寸是1:1，所以设置轮播图高等于宽 */
  height: 65vw;
  text-align: center;
}
.detail_swiper image{
  width: 60%;
}

<!--pages/goos_detail/goos_detail.wxml-->
<view class="detail_swiper">
  <swiper circular autoplay indicator-dots>
    <swiper-item wx:for="{
  {goodsObj.data.message.pics}}" wx:key="pics_id">
      <image mode="widthFix" src="{
  {item.pics_mid}}"></image>
    </swiper-item>
  </swiper>
</view>

 7.6价格&名称&图文详情动态渲染

<view class="goods_price">￥{
  {goodsObj.data.message.goods_price}}</view>
<view class="goods_name_row">
  <view class="goods_name">{
  {goodsObj.data.message.goods_name}}</view>
  <view class="goods_collect">
    <text class="iconfont icon-shoucang1"></text>
    <view class="collect_text">收藏</view>
  </view>
</view>

<view class="goods_info">
  <view class="goods_info_title">图文详情</view>
  <view class="goods_info_content">
    <!-- 标签字符串变成标签要通过 富文本 -->
    <rich-text nodes="{
  {goodsObj.data.message.goods_introduce}}"></rich-text>
  </view>
</view>

.goods_price{
  padding: 15rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: var(--themeColor);
}
.goods_name_row{
  display: flex;
  border-top: 5rpx solid #dededd;
  border-bottom: 5rpx solid #dedede;
  padding: 10rpx 0;
}
.goods_name{
  flex: 5;
  color: #000;
  font-size: 30rpx;
  padding: 0 10rpx;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.goods_collect{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-left: 1rpx solid #000;
}

.goods_info_title{
  font-size