会员中心模块开发

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 : "请选择"
                });
            }
        });
    }
});

转载请注明：虚坏叔叔 » python flask实战订餐系统微信小程序-58会员中心模块开发