会员中心模块开发
my/index.wxml進行用户界面的展示功能
my/index.js发起请求调用接口
//获取应用实例
var app = getApp();
Page({
data: {
},
onLoad() {
},
onShow() {
this.getInfo();
},
getInfo:function(){
var that = this;
wx.request({
url: app.buildUrl("/member/info"),
header: app.getRequestHeader(),
success: function (res) {
var resp = res.data;
if (resp.code != 200) {
app.alert({
"content": resp.msg});
return;
}
that.setData({
user_info:resp.data.info
});
}
});
}
});
web/api/Member.py實現接口
@route_api.route("/member/info")
def memberInfo():
resp = {
'code': 200, 'msg': '操作成功~', 'data': {
}}
member_info = g.member_info
resp['data']['info'] = {
"nickname":member_info.nickname,
"avatar_url":member_info.avatar
}
return jsonify(resp)
我的評價列表的展示
commentList.js,添加getCommentList接口
var app = getApp();
Page({
data: {
list: [
{
date: "2018-07-01 22:30:23",
order_number: "20180701223023001",
content: "记得周六发货",
},
{
date: "2018-07-01 22:30:23",
order_number: "20180701223023001",
content: "记得周六发货",
}
]
},
onLoad: function (options) {
// 生命周期函数--监听页面加载
},
onShow: function () {
this.getCommentList();
},
getCommentList:function(){
var that = this;
wx.request({
url: app.buildUrl("/my/comment/list"),
header: app.getRequestHeader(),
success: function (res) {
var resp = res.data;
if (resp.code != 200) {
app.alert({
"content": resp.msg});
return;
}
that.setData({
list: resp.data.list
});
}
});
}
});
api/my.py添加接口展示
from common.models.member.MemberComments import MemberComments
import json,datetime
@route_api.route("/my/comment/list" )
def myCommentList():
resp = {
'code': 200, 'msg': '操作成功~', 'data': {
}}
member_info = g.member_info
comment_list = MemberComments.query.filter_by( member_id=member_info.id )\
.order_by(MemberComments.id.desc()).all()
data_comment_list = []
if comment_list:
pay_order_ids = selectFilterObj( comment_list,"pay_order_id" )
pay_order_map = getDictFilterField( PayOrder,PayOrder.id,"id",pay_order_ids )
for item in comment_list:
tmp_pay_order_info = pay_order_map[ item.pay_order_id ]
tmp_data = {
"date":item.created_time.strftime("%Y-%m-%d %H:%M:%S"),
"content":item.content,
"order_number":tmp_pay_order_info.order_number
}
data_comment_list.append( tmp_data )
resp['data']['list'] = data_comment_list
return jsonify(resp)
我的收穫地址列表展現
addressList.wxml用於展現列表
- getList获取列表数据，
- addessSet增加地址，对应发送的请求接口是/my/address/set
- selectTap选中设置默认，对应发送的请求接口是/my/address/ops
<view class="container">
<view class="address-list">
<view class="a-address" wx:for-items="{
{addressList}}" wx:key="{
{index}}">
<view class="left-text {
{item.isDefault? 'active':''}}" bindtap="selectTap" data-id="{
{item.id}}">
<view class="name-tel">
{
{item.name}} {
{item.mobile}}
</view>
<view class="address-box">
{
{item.address}}
</view>
</view>
<view class="right-edit" bindtap="addessSet" data-id="{
{item.id}}"></view>
</view>
</view>
<view class="bottom-box">
<view class="add-btn" bindtap="addessSet">新增收货地址</view>
</view>
</view>
addressList.js中，使用getList從後端獲取數據
//获取应用实例
var app = getApp();
Page({
data: {
},
onShow: function () {
var that = this;
this.getList();
},
//选中谁就把谁设置为默认的
selectTap: function (e) {
var that = this;
wx.request({
url: app.buildUrl("/my/address/ops"),
header: app.getRequestHeader(),
method:'POST',
data:{
id:e.currentTarget.dataset.id,
act:'default'
},
success: function (res) {
var resp = res.data;
if (resp.code != 200) {
app.alert({
"content": resp.msg});
return;
}
that.setData({
list:resp.data.list
});
}
});
wx.navigateBack({
});
},
addressSet: function (e) {
wx.navigateTo({
url: "/pages/my/addressSet?id=" + e.currentTarget.dataset.id
})
},
getList:function(){
var that = this;
wx.request({
url: app.buildUrl("/my/address/index"),
header: app.getRequestHeader(),
success: function (res) {
var resp = res.data;
if (resp.code != 200) {
app.alert({
"content": resp.msg});
return;
}
that.setData({
list:resp.data.list
});
}
});
}
});
Address.py中添加後端處理
# -*- coding: utf-8 -*-
from web.controllers.api import route_api
from flask import request, jsonify,g
from application import app,db
from common.libs.UrlManager import UrlManager
from common.libs.Helper import getCurrentDate
from common.models.member.MemberAddress import MemberAddress
@route_api.route("/my/address/index")
def myAddressList():
resp = {
'code': 200, 'msg': '操作成功~', 'data': {
}}
member_info = g.member_info
list = MemberAddress.query.filter_by( status = 1, member_id = member_info.id )\
.order_by( MemberAddress.id.desc() ).all()
data_list = []
if list:
for item in list:
tmp_data = {
"id":item.id,
"nickname":item.nickname,
"mobile":item.mobile,
"is_default":item.is_default,
"address":"%s%s%s%s"%( item.province_str,item.city_str,item.area_str,item.address ),
}
data_list.append( tmp_data )
resp['data']['list'] = data_list
return jsonify(resp)
@route_api.route("/my/address/set",methods = [ "POST" ])
def myAddressSet():
resp = {
'code': 200, 'msg': '操作成功~', 'data': {
}}
req = request.values
id = int( req['id'] ) if 'id' in req and req['id'] else 0
nickname = req['nickname'] if 'nickname' in req else ''
address = req['address'] if 'address' in req else ''
mobile = req['mobile'] if 'mobile' in req else ''
province_id = int( req['province_id'] ) if ( 'province_id' in req and req['province_id'] ) else 0
province_str = req['province_str'] if 'province_str' in req else ''
city_id = int( req['city_id'] ) if ( 'city_id' in req and req['city_id'])else 0
city_str = req['city_str'] if 'city_str' in req else ''
district_id = int( req['district_id'] ) if ( 'district_id' in req and req['district_id'] ) else 0
district_str = req['district_str'] if 'district_str' in req else ''
member_info = g.member_info
if not nickname:
resp['code'] = -1
resp['msg'] = "请填写联系人姓名~~"
return jsonify(resp)
if not mobile:
resp['code'] = -1
resp['msg'] = "请填写手机号码~~"
return jsonify(resp)
if province_id < 1:
resp['code'] = -1
resp['msg'] = "请选择地区~~"
return jsonify(resp)
if city_id < 1:
resp['code'] = -1
resp['msg'] = "请选择地区~~"
return jsonify(resp)
if district_id < 1:
district_str = ''
if not address:
resp['code'] = -1
resp['msg'] = "请填写详细地址~~"
return jsonify(resp)
if not member_info:
resp['code'] = -1
resp['msg'] = "系统繁忙，请稍后再试~~"
return jsonify(resp)
address_info = MemberAddress.query.filter_by( id = id,member_id = member_info.id ).first()
if address_info:
model_address = address_info
else:
default_address_count = MemberAddress.query.filter_by( is_default = 1,member_id = member_info.id ,status = 1).count()
model_address = MemberAddress()
model_address.member_id = member_info.id
model_address.is_default = 1 if default_address_count == 0 else 0
model_address.created_time = getCurrentDate()
model_address.nickname = nickname
model_address.mobile = mobile
model_address.address = address
model_address.province_id = province_id
model_address.province_str = province_str
model_address.city_id = city_id
model_address.city_str = city_str
model_address.area_id = district_id
model_address.area_str = district_str
model_address.updated_time = getCurrentDate()
db.session.add(model_address )
db.session.commit()
return jsonify(resp)
@route_api.route("/my/address/info")
def myAddressInfo():
resp = {
'code': 200, 'msg': '操作成功~', 'data': {
}}
req = request.values
id = int( req['id'] ) if 'id' in req else 0
member_info = g.member_info
if id < 1 or not member_info:
resp['code'] = -1
resp['msg'] = "系统繁忙，请稍后再试~~"
return jsonify(resp)
address_info = MemberAddress.query.filter_by( id = id ).first()
if not address_info:
resp['code'] = -1
resp['msg'] = "系统繁忙，请稍后再试~~"
return jsonify(resp)
resp['data']['info'] = {
"nickname":address_info.nickname,
"mobile":address_info.mobile,
"address":address_info.address,
"province_id":address_info.province_id,
"province_str":address_info.province_str,
"city_id":address_info.city_id,
"city_str":address_info.city_str,
"area_id":address_info.area_id,
"area_str":address_info.area_str
}
return jsonify(resp)
@route_api.route("/my/address/ops",methods = [ "POST" ])
def myAddressOps():
resp = {
'code': 200, 'msg': '操作成功~', 'data': {
}}
req = request.values
id = int(req['id']) if 'id' in req else 0
act = req['act'] if 'act' in req else ''
member_info = g.member_info
if id < 1 or not member_info:
resp['code'] = -1
resp['msg'] = "系统繁忙，请稍后再试~~"
return jsonify(resp)
address_info = MemberAddress.query.filter_by(id=id,member_id = member_info.id).first()
if not address_info:
resp['code'] = -1
resp['msg'] = "系统繁忙，请稍后再试~~"
return jsonify(resp)
if act == "del":
address_info.status = 0
address_info.updated_time = getCurrentDate()
db.session.add(address_info)
db.session.commit()
elif act == "default":
MemberAddress.query.filter_by( member_id=member_info.id)\
.update({
'is_default' :0 })
address_info.is_default = 1
address_info.updated_time = getCurrentDate()
db.session.add(address_info)
db.session.commit()
return jsonify(resp)
addressSet.wxml用于地质创建和编辑
- getInfo用於獲取地址頁面數據，對應的後端請求對應的是Address.py下面的/my/address/info
- deleteAddress用於處理地址的刪除，對應的是/my/address/ops
- bindSave用於處理地址的保存
<view class="container">
<form bindsubmit="bindSave">
<view class="form-box">
<view class="row-wrap">
<view class="label">联系人</view>
<view class="label-right">
<input name="nickname" class="input" type="text" placeholder="姓名" value=""/>
</view>
</view>
<view class="row-wrap">
<view class="label">手机号码</view>
<view class="label-right">
<input name="mobile" class="input" maxlength="11" type="number" placeholder="11位手机号码" value=""/>
</view>
</view>
<view class="row-wrap" bindtap="selectCity">
<view class="label">选择地区</view>
<picker bindchange="bindPickerProvinceChange" range="{
{provinces}}">
<view class="picker {
{selProvince=='请选择'?'hui':''}}">
{
{selProvince}}
</view>
</picker>
<picker bindchange="bindPickerCityChange" range="{
{citys}}">
<view class="picker {
{selCity=='请选择'?'hui':''}}">
{
{selCity}}
</view>
</picker>
<picker bindchange="bindPickerChange" range="{
{districts}}">
<view class="picker {
{selDistrict=='请选择'?'hui':''}}">
{
{selDistrict}}
</view>
</picker>
</view>
<view class="addr-details">
<view class="label">详细地址</view>
<view class="label-right">
<textarea name="address" auto-height placeholder="街道门牌信息" value=""/>
</view>
</view>
</view>
<button type="warn" class="save-btn" formType="submit">保存</button>
<button type="default" class="save-btn" bindtap="deleteAddress">删除该地址</button>
<button type="default" class="cancel-btn" bindtap="bindCancel">取消</button>
</form>
</view>
addressSet.js用於發送請求
//获取应用实例
var commonCityData = require('../../utils/city.js');
var app = getApp();
Page({
data: {
info: [],
provinces: [],
citys: [],
districts: [],
selProvince: '请选择',
selCity: '请选择',
selDistrict: '请选择',
selProvinceIndex: 0,
selCityIndex: 0,
selDistrictIndex: 0
},
onLoad: function (e) {
var that = this;
that.setData({
id: e.id
});
this.initCityData(1);
},
onShow: function () {
this.getInfo();
},
//初始化城市数据
initCityData: function (level, obj) {
if (level == 1) {
var pinkArray = [];
for (var i = 0; i < commonCityData.cityData.length; i++) {
pinkArray.push(commonCityData.cityData[i].name);
}
this.setData({
provinces: pinkArray
});
} else if (level == 2) {
var pinkArray = [];
var dataArray = obj.cityList
for (var i = 0; i < dataArray.length; i++) {
pinkArray.push(dataArray[i].name);
}
this.setData({
citys: pinkArray
});
} else if (level == 3) {
var pinkArray = [];
var dataArray = obj.districtList
for (var i = 0; i < dataArray.length; i++) {
pinkArray.push(dataArray[i].name);
}
this.setData({
districts: pinkArray
});
}
},
bindPickerProvinceChange: function (event) {
var selIterm = commonCityData.cityData[event.detail.value];
this.setData({
selProvince: selIterm.name,
selProvinceIndex: event.detail.value,
selCity: '请选择',
selCityIndex: 0,
selDistrict: '请选择',
selDistrictIndex: 0
});
this.initCityData(2, selIterm);
},
bindPickerCityChange: function (event) {
var selIterm = commonCityData.cityData[this.data.selProvinceIndex].cityList[event.detail.value];
this.setData({
selCity: selIterm.name,
selCityIndex: event.detail.value,
selDistrict: '请选择',
selDistrictIndex: 0
});
this.initCityData(3, selIterm);
},
bindPickerChange: function (event) {
var selIterm = commonCityData.cityData[this.data.selProvinceIndex].cityList[this.data.selCityIndex].districtList[event.detail.value];
if (selIterm && selIterm.name && event.detail.value) {
this.setData({
selDistrict: selIterm.name,
selDistrictIndex: event.detail.value
})
}
},
bindCancel: function () {
wx.navigateBack({
});
},
bindSave: function (e) {
var that = this;
var nickname = e.detail.value.nickname;
var address = e.detail.value.address;
var mobile = e.detail.value.mobile;
if (nickname == "") {
app.tip({
content: '请填写联系人姓名~~'});
return
}
if (mobile == "") {
app.tip({
content: '请填写手机号码~~'});
return
}
if (this.data.selProvince == "请选择") {
app.tip({
content: '请选择地区~~'});
return
}
if (this.data.selCity == "请选择") {
app.tip({
content: '请选择地区~~'});
return
}
var city_id = commonCityData.cityData[this.data.selProvinceIndex].cityList[this.data.selCityIndex].id;
var district_id;
if (this.data.selDistrict == "请选择" || !this.data.selDistrict) {
district_id = '';
} else {
district_id = commonCityData.cityData[this.data.selProvinceIndex].cityList[this.data.selCityIndex].districtList[this.data.selDistrictIndex].id;
}
if (address == "") {
app.tip({
content: '请填写详细地址~~'});
return
}
wx.request({
url: app.buildUrl("/my/address/set"),
header: app.getRequestHeader(),
method: "POST",
data: {
id: that.data.id,
province_id: commonCityData.cityData[this.data.selProvinceIndex].id,
province_str: that.data.selProvince,
city_id: city_id,
city_str: that.data.selCity,
district_id: district_id,
district_str: that.data.selDistrict,
nickname: nickname,
address: address,
mobile: mobile,
},
success: function (res) {
var resp = res.data;
if (resp.code != 200) {
app.alert({
"content": resp.msg});
return;
}
// 跳转
wx.navigateBack({
});
}
})
},
deleteAddress: function (e) {
var that = this;
var params = {
"content": "确定删除？",
"cb_confirm": function () {
wx.request({
url: app.buildUrl("/my/address/ops"),
header: app.getRequestHeader(),
method: 'POST',
data: {
id: that.data.id,
act:'del'
},
success: function (res) {
var resp = res.data;
app.alert({
"content": resp.msg});
if (resp.code == 200) {
// 跳转
wx.navigateBack({
});
}
}
});
}
};
app.tip(params);
},
getInfo: function () {
var that = this;
if (that.data.id < 1) {
return;
}
wx.request({
url: app.buildUrl("/my/address/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});
return;
}
var info = resp.data.info;
that.setData({
info: info,
selProvince: info.province_str ? info.province_str : "请选择",
selCity: info.city_str ? info.city_str : "请选择",
selDistrict: info.area_str ? info.area_str : "请选择"
});
}
});
}
});