2019年5月1日 音乐播放APP初步开发(三) 用户绑定玩具的实现

当用户登录成功之后,去添加玩具,扫码读取玩具信息,并完善绑定信息

在个人中心页面去点击“管理我的玩具”会跳转到玩具管理页面,点击“添加绑定玩具”,会跳转至扫码页面,去识别玩具的信息。

<ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right" id="toy_manage">
                        <span class="mui-icon mui-icon-weibo">管理我的玩具</span>
                    </a>
                </li>
                
            </ul>

监听触发事件:

document.getElementById(toy_manage).addEventListener(tap,function () {
                    mui.openWindow({
                                "url":"toy_manage.html",
                                "id":"toy_manage.html",
                                styles:{
                                    top:"0px",
                                    bottom:"0px"
                                },
                       
                            })
            })

实现的效果图:

2019年5月1日 音乐播放APP初步开发(三) 用户绑定玩具的实现

添加绑定玩具:

<li class="mui-table-view-cell mui-media">
                    <a href="javascript:;" id="add_toy">
                        <img class="mui-media-object mui-pull-left" src="image/add.jpg">
                        <div class="mui-media-body">
                            添加待绑定玩具
                            <p class="mui-ellipsis">点击扫描玩具二维码</p>
                        </div>
                    </a>
                </li>

监听触发事件:

document.getElementById(add_toy).addEventListener(tap,function () {
               mui.openWindow({
                           "url":"device.html",
                           "id":"device.html",
                           styles:{
                               top:"0px",
                               bottom:"0px"
                           },
                  
                       })     
            })
        

效果截图:

2019年5月1日 音乐播放APP初步开发(三) 用户绑定玩具的实现

创建扫码对象,并识别二维码:

2019年5月1日 音乐播放APP初步开发(三) 用户绑定玩具的实现
<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.css" rel="stylesheet" />
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">二维码/条形码</h1>
        </header>
        <div class="mui-content">
            <div id="bcid" style="width: 100%; height: 580px;"></div>
        </div>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init()

            function inmarked(type, result) {
                var text = "未知: ";
                switch (type) {
                    case plus.barcode.QR:
                        text = "QR: "
                        break;
                    case plus.barcode.EAN13:
                        text = EAN13: ;
                        break;
                    case plus.barcode.EAN8:
                        text = EAN8: ;
                        break;
                }
                alert(text+result);
                
                mui.post(window.serv_qr,{
                        "device_key":result
                    },function(data){
                        
                        if (data.code==0) {
                            //打开绑定玩具流程 开始创建玩具
                            mui.openWindow({
                                        "url":"bind_toy.html",
                                        "id":"bind_toy.html",
                                        styles:{
                                            top:"0px",
                                            bottom:"0px"
                                        },
                                        extras:data.data,
                               
                                    })
                        } else if(data.code==1){
                            //玩具已被绑定
                        }else if(data.code==2){
                            //未授权的设备
                        }
                        // mui.toast(data.msg)
                        console.log(JSON.stringify(data))
                    },json
                );
            }
            var scan = null;
            mui.plusReady(function() {
                scan = new plus.barcode.Barcode("bcid");
                scan.start();
                scan.onmarked = inmarked;
                // mui.back(); 
            })
        </script>
    </body>

</html>
二维码扫描页面

如果识别的二维码返回的状态码为0,则表示设备合法,可以继续完成信息绑定,为1则表示设备已经绑定过了,为2表示设备未授权。

状态码为0,跳转至信息绑定页面,填写信息

if (data.code==0) {
                            //打开绑定玩具流程 开始创建玩具
                            mui.openWindow({
                                        "url":"bind_toy.html",
                                        "id":"bind_toy.html",
                                        styles:{
                                            top:"0px",
                                            bottom:"0px"
                                        },
                                        extras:data.data,
                               
                                    })
                        } else if(data.code==1){
                            //玩具已被绑定
                        }else if(data.code==2){
                            //未授权的设备
                        }

在绑定玩具页面完成数据的采集:

2019年5月1日 音乐播放APP初步开发(三) 用户绑定玩具的实现
<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.css" rel="stylesheet" />
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">绑定玩具</h1>
        </header>
        <div class="mui-content">
            <form class="mui-input-group">
                <div class="mui-input-row">
                    <label>玩具名称</label>
                    <input type="text" id="toy_name" class="mui-input-clear" placeholder="请输入玩具名">
                </div>
                <div class="mui-input-row">
                    <label>持有人</label>
                    <input type="text" id="baby_name" class="mui-input-clear" placeholder="请输入使用者名称">
                </div>
                <div class="mui-input-row">
                    <label>管理者</label>
                    <input type="text" id="manage" class="mui-input-clear" placeholder="请输入家长称呼">
                </div>
                <div class="mui-button-row">
                    <button type="button" id="bind" class="mui-btn mui-btn-primary">绑定</button>
                    <button type="button"  class="mui-btn-yellow mui-action-back">取消</button>
                </div>
            </form>
        </div>
        <script src="js/mui.js"></script>
        <script type="text/javascript">
            mui.init()
            var d_data=null;
            mui.plusReady(function () {
                d_data=plus.webview.currentWebview()
                console.log(JSON.stringify(d_data))
            })
            
            document.getElementById(bind).addEventListener(tap,function () {
                   var toy_name=document.getElementById("toy_name").value;
                   var baby_name=document.getElementById("baby_name").value;
                   var manage=document.getElementById("manage").value;
                    mui.post(window.serv_bind,{
                            "toy_name":toy_name,
                            "baby_name":baby_name,
                            "manage":manage,
                            "device_key":d_data.device_key,
                            user_id:window.localStorage.getItem("user")
                        },function(data){
                            console.log(JSON.stringify(data))
                        },json
                    );
            })
        </script>
    </body>

</html>
bind_toy.html

监听绑定数据事件:

document.getElementById(bind).addEventListener(tap,function () {
                   var toy_name=document.getElementById("toy_name").value;
                   var baby_name=document.getElementById("baby_name").value;
                   var manage=document.getElementById("manage").value;
                    mui.post(window.serv_bind,{
                            "toy_name":toy_name,
                            "baby_name":baby_name,
                            "manage":manage,
                            "device_key":d_data.device_key,
                            user_id:window.localStorage.getItem("user")
                        },function(data){
                            console.log(JSON.stringify(data))
                        },json
                    );
            })

实现效果图:

2019年5月1日 音乐播放APP初步开发(三) 用户绑定玩具的实现2019年5月1日 音乐播放APP初步开发(三) 用户绑定玩具的实现

后端接收数据,进行逻辑处理:

from flask import Blueprint,request,jsonify
from setting import mongoDB,RET
from bson.objectid import ObjectId

#用户绑定玩具信息
@device_code.route(/bind_toy,methods=["POST",])
def bind_toy():
    toy_info=request.form.to_dict()
    #{‘toy_name‘: ‘球球‘, ‘baby_name‘: ‘小火车‘, ‘manage‘: ‘父皇‘, ‘device_key‘: ‘ec0891dff4ce7ccca4222dfc8667b8a5‘, ‘user_id‘: ‘5cc6c0992893361a88b7018a‘}

    chat_window=mongoDB.chats.insert_one({
        "user_list":[],             #存储当前聊天的两个对象
        "chat_list":[]              #聊天的记录
    })                              #创建一个空的聊天框表

    user_info = mongoDB.users.find_one({"_id": ObjectId(toy_info["user_id"])})  #获取当前用户的信息
    # {‘_id‘: ObjectId(‘5cc6c0992893361a88b7018a‘), ‘user‘: ‘lisa‘, ‘nick‘: ‘情深缘浅‘, ‘pwd‘: ‘ec6a6536ca304edf844d1d248a4f08dc‘, ‘gender‘: ‘2‘, ‘avatar‘: ‘girl.jpg‘, ‘friend_list‘: [], ‘bind_toy‘: []}

    toy_info["bind_user"]=toy_info.pop("user_id")  #将字典里的字段user_id替换为 bind_user
    toy_info["avatar"]="toy.jpg"                   #设置玩具的头像
    toy_info["friend_list"]=[                      #玩具的好友列表
        {
            "friend_id":toy_info["bind_user"],                 #好友id         5cc6c0992893361a88b7018a
            "friend_name":user_info.get("nick"),               #好友名字       情深缘浅
            "friend_nick":toy_info.pop("manage"),              #好友昵称       父皇
            "friend_avatar":user_info.get("avatar"),           #好友头像       girl.jpg
            "friend_type":"app",                               #好友类型  区分接收消息类型
            "friend_chat":str(chat_window.inserted_id)         #聊天对话框
        }
    ]
    #玩具的好友列表

    toy=mongoDB.toys.insert_one(toy_info)               #创建玩具

    user_info["bind_toy"].append(str(toy.inserted_id))  #用户信息中绑定玩具的ID

    user_add_toy={
        "friend_id": toy_info["bind_user"],          # 好友id         5cc6c0992893361a88b7018a
        "friend_name": toy_info.get("toy_name"),     # 好友名字       情深缘浅
        "friend_nick": toy_info.get("baby_name"),    # 好友昵称       父皇
        "friend_avatar": toy_info.get("avatar"),     # 好友头像       girl.jpg
        "friend_type": "toy",                        # 好友类型       区分接收消息类型
        "friend_chat": str(chat_window.inserted_id)  # 聊天对话框
    }


    user_info["friend_list"].append(user_add_toy)    #设置用户的好友列表

    mongoDB.users.update_one({"_id": ObjectId(toy_info["bind_user"])},{"$set":user_info})
    #更新用户表的信息

    mongoDB.chats.update_one({"_id":chat_window.inserted_id},{"$set":{"user_list":
        [str(toy.inserted_id),str(user_info.get("_id"))]
                                                                      }})
    print(user_info)

    RET["code"]=0
    RET["msg"]="玩具绑定完成"
    RET["data"]={}
    return jsonify(RET)

绑定完成,前端调试信息输出如下:

2019年5月1日 音乐播放APP初步开发(三) 用户绑定玩具的实现

后台数据库同步实现数据记录的更新:

2019年5月1日 音乐播放APP初步开发(三) 用户绑定玩具的实现

2019年5月1日 音乐播放APP初步开发(三) 用户绑定玩具的实现2019年5月1日 音乐播放APP初步开发(三) 用户绑定玩具的实现

 

2019年5月1日 音乐播放APP初步开发(三) 用户绑定玩具的实现

上一篇:JavaScript函数调用规则


下一篇:基于.net core微服务(Consul、Ocelot、Docker、App.Metrics+InfluxDB+Grafana、Exceptionless、数据一致性、Jenkins)