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