03-03 商品详情页

______egon新书python全套来袭请看：https://egonlin.com/book.html

商品详情页

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

小程序端：

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)