商品详情页
需求：点击礼物，进入礼物详情页，可以点击立即购买，然后返回礼物生成页
小程序端：
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)