mina/pages/food/info.wxml
<import src="../../wxParse/wxParse.wxml" />
<view class="container">
<!--商品轮播图-->
<view class="swiper-container">
<swiper class="swiper_box" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">
<block wx:for="{{info.pics}}" wx:key="id">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150" mode="aspectFit" lazy-load="true"/>
</swiper-item>
</block>
</swiper>
<view class="dots">
<block wx:for="{{info.pics}}" wx:key="unique">
<view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
</block>
</view>
</view>
<!--商品基本介绍-->
<view class="goods-info">
<view class="goods-title">{{info.name}}</view>
<view class="goods-price" style="padding-left:35rpx;">￥ {{info.price}}</view>
<view class="goods-price" style="color:#999;font-size:24rpx;">购买{{info.total_count}}次</view>
<view class="goods-price" style="color:#999;font-size:24rpx;">共收到 {{info.comment_count}} 次好评</view>
<view class="goods-info-fx">
<image src='/images/qd.png' />
<button open-type="share">分享</button>
<text>分享有赏</text>
</view>
</view>
<view class="goods-des-info">
<view class="label-title">商品介绍</view>
<view class="goods-text">
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>
</view>
<!--用户评价-->
<view class="goods-des-info" style="margin-top:35rpx;" wx:if="{{commentList}}">
<view class="label-title" style="border-bottom:1px solid #eee;">大家评价<text style="color:red">（{{commentCount}}）</text></view>
<view class="goods-text" style="margin-top:15rpx;border-bottom:1px solid #eee;" wx:for="{{commentList}}">
<view style="width:100rpx;float:left;">
<image style="width: 100rpx; height: 100rpx;" src="{{item.user.avatar_url}}"></image>
<view style="text-align:center;width:100rpx;">{{item.score}}</view>
</view>
<view style="width:550rpx;float:left;margin-left:35rpx;">
<view>{{item.content}}</view>
<view style="color: #B0B0B0;font-size:24rpx;">{{item.date}}</view>
</view>
</view>
</view>
<!--底部-->
<view class="footer-box">
<view class="shop-cart-btn" bindtap="goShopCar">
<view class="shop-num">({{shopCarNum}})</view>
<view style='position:absolute;bottom:10rpx;'> 购物车 </view>
</view>
<view class="join-shop-cart" bindtap="toAddShopCar">加入购物车</view>
<view class="now-buy" bindtap="tobuy">立即购买</view>
</view>
<!--购买和收藏弹窗-->
<view class="show-popup" hidden="{{hideShopPopup}}" >
<view class="popup-mask" bindtap="closePopupTap"></view>
<view class="popup-contents">
<view class="pop-goods-info">
<view class="pop-img-box">
<image src="{{info.main_image}}" class="goods-thumbnail"/>
</view>
<view class="pop-goods-des">
<view class="pop-goods-title">{{info.name}}</view>
<view class="pop-goods-price">￥ {{info.price}}</view>
</view>
<view class="pop-goods-close" bindtap="closePopupTap"></view>
</view>
<view class="buy-num-box">
<view class="num-label">购买数量</view>
<view class="num-box">
<view class="num-jian {{buyNumber == buyNumMin ? 'hui': ''}}" bindtap="numJianTap">-</view>
<view class="num-input">
<input type="number" value="{{buyNumber}}" disabled/>
</view>
<view class="num-jia {{buyNumber== buyNumMax ? 'hui': ''}}" bindtap="numJiaTap">+</view>
</view>
</view>
<view class="popup-join-btn" wx:if="{{shopType =='addShopCar'}}" bindtap="addShopCar">
加入购物车
</view>
<view class="popup-join-btn" wx:if="{{shopType =='tobuy'}}" bindtap="buyNow">
立即购买
</view>
</view>
</view>
</view>
mina/pages/food/info.js
//index.js
//获取应用实例
var app = getApp();
var WxParse = require('../../wxParse/wxParse.js');
var utils = require('../../utils/util.js');
Page({
data: {
autoplay: true,
interval: 3000,
duration: 1000,
swiperCurrent: 0,
hideShopPopup: true,
buyNumber: 1,
buyNumMin: 1,
buyNumMax: 1,
canSubmit: false, // 选中时候是否允许加入购物车
shopCarInfo: {},
shopType: "addShopCar",//购物类型，加入购物车或立即购买，默认为加入购物车,
id: 0,
shopCarNum: 4,
commentCount:2
},
onLoad: function (e) {
var that = this;
that.setData({
id: e.id
});
},
onShow:function(){
this.getInfo();
this.getComments();
},
goShopCar: function () {
wx.reLaunch({
url: "/pages/cart/index"
});
},
toAddShopCar: function () {
this.setData({
shopType: "addShopCar"
});
this.bindGuiGeTap();
},
tobuy: function () {
this.setData({
shopType: "tobuy"
});
this.bindGuiGeTap();
},
addShopCar: function () {
var that = this;
var data = {
"id": this.data.info.id,
"number": this.data.buyNumber
};
wx.request({
url: app.buildUrl("/cart/set"),
header: app.getRequestHeader(),
method: 'POST',
data: data,
success: function (res) {
var resp = res.data;
app.alert({"content": resp.msg});
that.setData({
hideShopPopup: true
});
}
});
},
buyNow: function () {
var data = {
goods: [
{
"id": this.data.info.id,
"price": this.data.info.price,
"number": this.data.buyNumber
}
]
};
this.setData({
hideShopPopup: true
});
wx.navigateTo({
url: "/pages/order/index?data=" + JSON.stringify(data)
});
},
/**
* 规格选择弹出框
*/
bindGuiGeTap: function () {
this.setData({
hideShopPopup: false
});
},
/**
* 规格选择弹出框隐藏
*/
closePopupTap: function () {
this.setData({
hideShopPopup: true
})
},
numJianTap: function () {
if (this.data.buyNumber <= this.data.buyNumMin) {
return;
}
var currentNum = this.data.buyNumber;
currentNum--;
this.setData({
buyNumber: currentNum
});
},
numJiaTap: function () {
if (this.data.buyNumber >= this.data.buyNumMax) {
return;
}
var currentNum = this.data.buyNumber;
currentNum++;
this.setData({
buyNumber: currentNum
});
},
//事件处理函数
swiperchange: function (e) {
this.setData({
swiperCurrent: e.detail.current
})
},
getInfo: function () {
var that = this;
wx.request({
url: app.buildUrl("/food/info"),
header: app.getRequestHeader(),
data: {
id: that.data.id
},
success: function (res) {
var resp = res.data;
if (resp.code != 200) {
app.alert({"content": resp.msg});
wx.navigateTo({
url: "/pages/food/index"
});
return;
}
that.setData({
info: resp.data.info,
buyNumMax: resp.data.info.stock,
shopCarNum:resp.data.cart_number
});
WxParse.wxParse('article', 'html', resp.data.info.summary, that, 5);
}
});
},
getComments:function(){
var that = this;
wx.request({
url: app.buildUrl("/food/comments"),
header: app.getRequestHeader(),
data: {
id: that.data.id
},
success: function (res) {
var resp = res.data;
if (resp.code != 200) {
app.alert({"content": resp.msg});
return;
}
that.setData({
commentList: resp.data.list,
commentCount: resp.data.count,
});
}
});
},
onShareAppMessage: function () {
var that = this;
return {
title: that.data.info.name,
path: '/pages/food/info?id=' + that.data.info.id,
success: function (res) {
// 转发成功
wx.request({
url: app.buildUrl("/member/share"),
header: app.getRequestHeader(),
method: 'POST',
data: {
url: utils.getCurrentPageUrlWithArgs()
},
success: function (res) {
}
});
},
fail: function (res) {
// 转发失败
}
}
}
});
web/controllers/api/Food.py
@route_api.route("/food/info" )
def foodInfo():
resp = {'code': 200, 'msg': '操作成功~', 'data': {}}
req = request.values
id = int(req['id']) if 'id' in req else 0
food_info = Food.query.filter_by( id = id ).first()
if not food_info or not food_info.status :
resp['code'] = -1
resp['msg'] = "美食已下架"
return jsonify(resp)
member_info = g.member_info
cart_number = 0
if member_info:
cart_number = MemberCart.query.filter_by( member_id = member_info.id ).count()
resp['data']['info'] = {
"id":food_info.id,
"name":food_info.name,
"summary":food_info.summary,
"total_count":food_info.total_count,
"comment_count":food_info.comment_count,
'main_image':UrlManager.buildImageUrl( food_info.main_image ),
"price":str( food_info.price ),
"stock":food_info.stock,
"pics":[ UrlManager.buildImageUrl( food_info.main_image ) ]
}
resp['data']['cart_number'] = cart_number
return jsonify(resp)