商品详情

app.json

@@ -1,10 +1,10 @@
 {
   "pages": [
       "pages/index/index",
+      "pages/prodDetail/prodDetail",
       "pages/all/all",
       "pages/cart/cart",
       "pages/my/personalCenter/personalCenter",
-      "pages/detail/detail",
       "pages/login/login",
       "pages/Mall/sortCommodity/sortCommodity",
       "pages/Mall/presaleCommodity/presaleCommodity",

components/product-list/product-list.js

@@ -96,6 +96,12 @@ Component({
             if(this.data.position === 'presale') this.getPresaleCommodity();
             if(this.data.position === 'sort' || this.data.position === 'index') this.getClassifyCommodity();
         },
+        // 进入商品详情
+        goProdDetail(e){
+           wx.navigateTo({
+             url: '/pages/prodDetail/prodDetail?prod='+ encodeURIComponent(JSON.stringify(e.currentTarget.dataset.prod)),
+           })
+        },
     },
     ready: function(){
         this.observerFunction();

components/product-list/product-list.wxml

@@ -1,7 +1,7 @@
 <!--components/product-list/product-list.wxml-->
 <scroll-view class="scrollView {{position === 'index'&&'scrollViewIndex'}}" scroll-y bindscrolltolower="onReachBottom">
     <view class="products">
-        <view class="goods-item" wx:for="{{goodsList}}" wx:key="index">
+        <view class="goods-item" wx:for="{{goodsList}}" wx:key="index" data-prod="{{item}}" catchtap="goProdDetail">
             <view class="goods-image">
                 <image src="{{item.prodPicList[0].picUrl}}" mode="aspectFill" class="goods-image-inner"></image>
             </view>

pages/detail/detail.js

@@ -1 +0,0 @@
-Page({})

pages/detail/detail.json

@@ -1,4 +0,0 @@
-{
-  "navigationStyle": "custom",
-  "usingComponents": {}
-}

pages/detail/detail.wxml

@@ -1,3 +0,0 @@
-<view>
-  detail
-</view>

pages/prodDetail/prodDetail.js

@@ -0,0 +1,105 @@
+import { API } from "../../service/api"
+
+// pages/prodDetail/prodDetail.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+  // 获取商品详情
+  getProdDetail(e){
+      let data = {
+        pageNum:1,
+        pageSize:1,
+        mercId:e.mercId,
+        prodId:e.prodId,
+        mercProdId:e.mercProdId
+      }
+      API.getProdDetail(data).then(res=>{
+            this.setData({
+              prodDetail:res
+            });
+      })
+  },
+  // 进入购物车
+  goCard(){
+      wx.navigateTo({
+        url: '/pages/cart/cart',
+      })
+  },
+  // 添加购物车、立即购买
+  addCard(e){
+      console.log(e);
+    let prodInfo = this.data.prodDetail;
+    if(e.currentProduct?.dataset.buy){
+        prodInfo.buy = true;
+    }
+    this.setData({
+        showAddCartModal: true,
+        currentProduct:prodInfo
+    });
+  },
+  // 关闭商品属性模态框
+  handleCloseAddCartModal() {
+    this.setData({ showAddCartModal: false });
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    let prod = JSON.parse(decodeURIComponent(options.prod));
+    this.getProdDetail(prod);
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/prodDetail/prodDetail.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "addCartModel":"/components/addCartModel/addCartModel"
+  },
+  "navigationBarTitleText":"商品详情"
+}

pages/prodDetail/prodDetail.wxml

@@ -0,0 +1,36 @@
+<!--pages/prodDetail/prodDetail.wxml-->
+<view>
+    <!-- banner -->
+    <swiper class="swiper" indicator-dots="{{true}}" indicator-color="#FFFFFF" 	indicator-active-color="#CCCCCC" autoplay circular>
+        <block wx:for="{{prodDetail.prodPicList}}" wx:key='{{item.id}}'>
+            <swiper-item class="swiperItem">
+                <image class="banner" src="{{item.picUrl}}" mode="widthFix"/>
+            </swiper-item>
+       </block>
+    </swiper>
+
+    <!-- 商品信息 -->
+    <view class="prodPrice">￥{{prodDetail.prodAttrList[0].prodAttrPrice.price}}</view>
+
+    <text class="prodName">{{prodDetail.prodName}}</text>
+
+    <!-- 商品详情 -->
+    <view class="prodDetail">
+       <text class="tab">商品详情</text>
+       <rich-text class="prodDescribe" nodes="{{prodDetail.description}}"/>
+    </view>
+
+    <!-- 底部按钮 -->
+    <view class="bottomView">
+       <view>
+          <image class="card" src="/images/mall/card.png" mode="" catchtap="goCard"/>
+       </view>
+       <view>
+          <image class="button" src="/images/index/add-cart.png" mode="widthFix" catchtap="addCard"/>
+          <image class="button" src="/images/index/buy-now.png" mode="widthFix" data-buy="{{true}}" catchtap="addCard" />
+       </view>
+    </view>
+
+    <!-- 商品属性模态框 -->
+    <addCartModel visible="{{showAddCartModal}}" product="{{currentProduct}}" bindclose="handleCloseAddCartModal"></addCartModel>
+</view>

pages/prodDetail/prodDetail.wxss

@@ -0,0 +1,67 @@
+/* pages/prodDetail/prodDetail.wxss */
+.swiper{
+    width: 100%;
+}
+.swiperItem{
+    width: 100%;
+}
+.swiperItem .banner{
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+/* 商品信息 */
+.prodPrice{
+    color: #FFFFFF;
+    font-size: 36rpx;
+    height: 86rpx;
+    line-height: 86rpx;
+    background: #89C6BE;
+    padding-left:30rpx;
+}
+.prodName{
+    padding: 0 30rpx;
+    line-height: 80rpx;
+}
+
+/* 商品详情 */
+.prodDetail{
+    margin-top: 50rpx;
+}
+.prodDetail .tab{
+    font-size: 30rpx;
+    color: #FFFFFF;
+    background: #89C6BE;
+    margin-left: 30rpx;
+    padding: 5rpx 20rpx;
+    border-radius: 20rpx;
+    letter-spacing: 10rpx;
+    display: inline-block;
+}
+.prodDetail .prodDescribe{
+   width: 100%;
+   display: block;
+}
+
+/* 底部按钮 */
+.bottomView{
+    width: 100%;
+    height: 126rpx;
+    background: #DFEFEC;
+    display: flex;
+    align-items: center;
+    justify-content:space-between;
+    position: fixed;
+    left:0;
+    bottom:0;
+}
+.bottomView .card{
+    width: 59rpx;
+    height: 59rpx;
+    margin-left: 20rpx;
+}
+.bottomView .button{
+    width: 156rpx;
+    margin:0 20rpx;
+}