03-03 商品详情页

商品详情页

需求：点击礼物，进入礼物详情页，可以点击立即购买，然后返回礼物生成页

小程序端：

app.json

{
  "pages": [
    "pages/list/list",
    "pages/item/item"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#e50e38",
    "navigationBarTitleText": "百步生活",
    "navigationBarTextStyle": "#fff",
    "enablePullDownRefresh": false,
    "backgroundColor": "#e50e38"
  },
}

item.json

{
  "navigationBarTitleText": "详情页"
}

item.wxml

<view class="container">
  <swiper indicator-dots="true" autoplay="true" interval="5000" duration="1000">
      <block wx:for="{{imgUrls}}">
          <swiper-item>
              <image src="{{item}}" class="slideImage" />
          </swiper-item>
      </block>
  </swiper>
  <view class="name">{{name}}</view>
  <view class="brief">{{brief}}</view>
  <view class="price">¥{{price}}</view>
  <view class="buy" bindtap="buyproduct">立即购买</view>
</view>

item.wxss

.container{
  padding: 0;
}
.container .buy{
  width: 100%;
  height: 88rpx;
  background: #e50e38;
  text-align: center;
  color: #fff;
  line-height: 88rpx;
  position:fixed;
  bottom:0;
  font-size:30rpx;
  letter-spacing:3rpx;
}
.container swiper{
  width: 750rpx;
  height: 750rpx;
}
.slideImage{
  width: 750rpx;
  height: 750rpx;
}
.name{
  text-align: center;
  font-size: 28rpx;
  color: #000;
  line-height: 48rpx;
  padding-top: 20rpx;
}
.brief{
  text-align: center;
  font-size: 24rpx;
  color: #ccc;
  line-height: 48rpx;
}
.price{
  text-align: center;
  font-size: 24rpx;
  color: #e50e38;
  line-height: 48rpx;
}

item.js

// pages/item/item.js
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgUrls: []
  },
  buyproduct:function(){
    var _this = this;
    var item = {
      \'name\': _this.data.name,
      \'price\': _this.data.price,
      \'img\': _this.data.imgUrls[0],
      \'brief\': _this.data.brief,
      \'num\': 1,
      \'image_id\': _this.data.image_id,
      \'product_id\': _this.data.id
    };
    var gifts = wx.getStorageSync(\'gifts\') || [];
    var _flag = false;
    for(var i=0;i<gifts.length;i++){
      if (gifts[i].product_id == _this.data.id){
          _flag=true
        }
    }
    if(!_flag){
      gifts.unshift(item);
    }
    wx.setStorageSync(\'gifts\', gifts);
    wx.reLaunch({
      url: \'/pages/index/index\'
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var _this = this;
    wx.showLoading({
      title: \'加载中\',
    });
    wx.request({
      url: app.globalData.apiDomain + \'/api/indexlist/detailProduct\',
      data: {
        product_id: options.id
      },
      header: {
        \'content-type\': \'application/json\' // 默认值
      },
      method:\'POST\',
      success:function(res){
        var imgUrl = "imgUrls[0]"
        _this.setData({
          [imgUrl]: res.data.data.image.m_url,
          brief:res.data.data.brief,
          name:res.data.data.name,
          price:res.data.data.price,
          image_id: res.data.data.image.image_id,
          id:res.data.data.product_id
        });
        console.log(_this.data.imgUrls)
        wx.hideLoading();
      }
    })
  }
})

服务端

1创建product.detailProduct.as_view()路由,通过请求传的商品id，返回该商品的详细信息

url.py

from django.contrib import admin
from django.urls import path
from django.conf.urls import url
from api.views import product

urlpatterns = [
    path(\'admin/\', admin.site.urls),
    url(r\'^api/indexlist/categoryList$\', product.caetgoryList.as_view()),
    url(r\'^api/indexlist/IndexProductList$\', product.ProductList.as_view()),
    url(r\'^api/indexlist/categoryProductsList$\', product.categoryProductsList.as_view()),
    url(r\'^api/indexlist/detailProduct$\', product.detailProduct.as_view()),
]

product.py

from rest_framework.views import APIView
from api import baseResponse
from api import models
from django.http import JsonResponse
from rest_framework.pagination import PageNumberPagination
import math
from api.MySer.MySer import ProductsSerializer,CategorySerializer
#分类列表接口
class caetgoryList(APIView):

    def get(self, request):
        #这里因为模拟数据，我这里将分类id固定
        data_obj = models.Category.objects.filter(cat_id__in=[6458,6460,6477,6486,6481,6500,6552]).order_by(\'p_order\')
        #序列化组件，序列化返回的数据
        data_list=CategorySerializer(instance=data_obj, many=True)
        data=data_list.data
        re_data = baseResponse.resdic("success", "查询成功",data)
        return JsonResponse(re_data)

#所有商品列表接口
class ProductList(APIView,):
    def post(self,request):
        params = request.data
        #判断是否有页数参数
        if params.get(\'page\'):
            page=params[\'page\']
            ret = models.Products.objects.all()
            count=ret.count()
            sums_page=math.ceil(count/10)
            next= page + 1 if (page+1) <sums_page else sums_page
            prev = page - 1 if (page - 1) > 0 else 1
            # 创建分页对象
            page_obj = PageNumberPagination()
            page_obj.page_size = 10
            page_obj.page_query_param = \'page\'
            # 定制传参
            page_obj.page_size_query_param = \'size\'
            # 最大一页的数据
            page_obj.max_page_size = 10
            # 在数据库中获取分页的数据
            page_list = page_obj.paginate_queryset(ret, request, view=self)
            # 对分页进行序列化
            data_list=ProductsSerializer(instance=page_list, many=True)
            p_data={}
            p_data[\'sums_page\'] = sums_page
            p_data[\'next\'] =next
            p_data[\'prev\'] = prev
            p_data[\'list\'] = data_list.data
            print(\'list\')
            print(type(data_list.data))
            re_data = baseResponse.resdic("success", "查询成功", p_data)
            return JsonResponse(re_data)

        else:
            re_data = baseResponse.resdic("error", "缺少参数")
            return JsonResponse(re_data)

#分类商品列表
class categoryProductsList(APIView):
    def post(self,request):
        params = request.data
        if params.get(\'page\') and  params.get(\'category_id\'):
            page=params[\'page\']
            category_id=params[\'category_id\']
            ret = models.Products.objects.filter(cat_id__cat_id=category_id)
            count=ret.count()
            sums_page=math.ceil(count/10)
            #值1 if 条件 else 值2
            next= page + 1 if (page+1) <sums_page else sums_page
            prev = page - 1 if (page - 1) > 0 else 1
            # 创建分页对象
            page_obj = PageNumberPagination()
            page_obj.page_size = 10
            page_obj.page_query_param = \'page\'
            # 定制传参
            page_obj.page_size_query_param = \'size\'
            # 最大一页的数据
            page_obj.max_page_size = 10
            # 在数据库中获取分页的数据
            page_list = page_obj.paginate_queryset(ret, request, view=self)
            # 对分页进行序列化
            data_list=ProductsSerializer(instance=page_list, many=True)
            p_data={}
            p_data[\'sums_page\'] = sums_page
            p_data[\'next\'] =next
            p_data[\'prev\'] = prev
            p_data[\'list\'] = data_list.data
            print(\'list\')
            print(data_list.data)
            re_data = baseResponse.resdic("success", "查询成功", p_data)
            return JsonResponse(re_data)
        else:
            re_data = baseResponse.resdic("error", "缺少参数")
            return JsonResponse(re_data)

#商品详情接口
class detailProduct(APIView):
    def post(self,request):
        params = request.data
        #判断是否有商品id
        if params[\'product_id\']:
            #获取该商品的所有信息
            ret = models.Products.objects.get(product_id=params[\'product_id\'])
            #将查表数据序列化
            data_list = ProductsSerializer(instance=ret, many=False)
            re_data = baseResponse.resdic("success", "查询成功", data_list.data)
            return JsonResponse(re_data)
        else:
            re_data = baseResponse.resdic("error", "缺少参数")
            return JsonResponse(re_data)