|
{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="format-detection" content="telephone=no,email=no,address=no">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>店员销售</title>
<link href="https://res.wx.qq.com/open/libs/weui/0.4.3/weui.min.css" rel="stylesheet" type="text/css" />
<style>
input:required:invalid {
color: #E64340;
}
input:required:valid {
color: rgb(0, 0, 0);
}
</style>
</head>
<body>
<div class="container" >
<div class="weui_cells_title">机器信息</div>
<div class="weui_cells weui_cells_form">
<div class="weui_cell weui_cell_select weui_select_after">
<div class="weui_cell_hd"><label for="" class="weui_label">型号</label></div>
<div class="weui_cell_bd weui_cell_primary">
<select id="model" class="weui_select" name="select">
{% for model in models %}
<option value="{{ model.model_id }}">{{ model.model_name }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="weui_cell">
<div class="weui_cell_hd"><label for="" class="weui_label">机身码</label></div>
<div class="weui_cell_bd weui_cell_primary">
<input id="code" class="weui_input" type="text" value="" placeholder="请输入机身码">
</div>
<a id="scan" href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default">扫码</a>
</div>
</div>
<div class="weui_cells_title">消费者信息</div>
<div class="weui_cells weui_cells_form">
<div class="weui_cell">
<div class="weui_cell_hd"><label for="" class="weui_label">姓名</label></div>
<div class="weui_cell_bd weui_cell_primary">
<input id="name" class="weui_input" type="text" value="" placeholder="请输入消费者姓名">
</div>
</div>
<div class="weui_cell weui_cell_select weui_select_after">
<div class="weui_cell_hd"><label for="" class="weui_label">性别</label></div>
<div class="weui_cell_bd weui_cell_primary">
<select id="sex" class="weui_select" name="select">
<option value="1">男</option>
<option value="0">女</option>
</select>
</div>
</div>
<div class="weui_cell weui_cell_select weui_select_after">
<div class="weui_cell_hd"><label for="" class="weui_label">年龄</label></div>
<div class="weui_cell_bd weui_cell_primary">
<select id="age" class="weui_select" name="select">
<option value="1">20周岁以下</option>
<option value="2">20~30周岁</option>
<option value="3">30~40周岁</option>
<option value="4">40~50周岁</option>
<option value="5">50周岁以上</option>
</select>
</div>
</div>
<div class="weui_cell">
<div class="weui_cell_hd"><label for="" class="weui_label">手机号</label></div>
<div class="weui_cell_bd weui_cell_primary">
<input id="phone" class="weui_input" type="text" required="required" pattern="[0-9]{11}" value="" placeholder="请输入消费者手机号">
</div>
</div>
</div>
<br>
<button id="submit" class="weui_btn weui_btn_warn">确认</button>
<div class="weui_dialog_alert" id="dialog" style="display: none">
<div class="weui_mask"></div>
<div class="weui_dialog">
<div class="weui_dialog_hd"><strong id="title" class="weui_dialog_title">弹窗标题</strong></div>
<div id="content" class="weui_dialog_bd">弹窗内容，告知当前页面信息等</div>
<div class="weui_dialog_ft">
<a href="javascript:;" class="weui_btn_dialog primary">确定</a>
</div>
</div>
</div>
<div id="toast" style="display: none;">
<div class="weui_mask_transparent"></div>
<div class="weui_toast">
<i class="weui_icon_toast"></i>
<p class="weui_toast_content">已完成</p>
</div>
</div>
</div>
<script src="//cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>
<script>
$(function() {
function show_error_dialog(title, content) {
$('#dialog #title').text(title);
$('#dialog #content').text(content);
$('#dialog').show();
}
function data_check() {
var clerk_id = "{{ clerk_info.clerk_id }}";
if (!clerk_id) {
show_error_dialog('微信授权', '微信授权失败，请重新打开页面');
return false;
}
var code = $('#code').val();
if (!code) {
show_error_dialog('机身码', '机身码错误，请检查重新输入');
return false;
}
var name = $('#name').val();
if (!name) {
show_error_dialog('姓名', '姓名错误，请检查重新输入');
return false;
}
var phone_valid = $('#phone').is(':valid');
if (!phone_valid) {
show_error_dialog('手机号', '手机号错误，请检查重新输入');
return false;
}
return {
clerk_id: clerk_id,
model_id: $('#model option:checked').val(),
code: code,
name: name,
sex: $('#sex option:checked').val(),
age: $('#age option:checked').val(),
phone: $('#phone').val(),
}
}
$('#submit').click(function () {
var check_result = data_check();
if (check_result){
$.ajax({
type: 'POST',
url: '{{ domain }}api/clerk/sale/submit',
data: check_result,
success: function(data) {
if (data.status == 200) {
$('#toast').show();
setTimeout(function () {
$('#toast').hide();
}, 1000);
} else {
show_error_dialog('错误', data.description);
}
}
})
}
});
$('#dialog .weui_btn_dialog').click(function () {
$('#dialog').hide();
})
});
</script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="{% static 'tamron/js/jswe.js' %}?v=11"></script>
<script>
V.initWxData({
imgUrl: 'http://pai.ai/static/pai2/img/paiai_96_96.png',
link: 'http://api.pai.ai/wx_oauth2?redirect_url=http://tamron.xfoto.com.cn/page/clerk',
desc: '店员授权',
title: '店员授权',
timeLine: ''
}, true);
V.hideOptionMenu();
$('#scan').click(function () {
V.scanQRCode({
needResult: 1
});
});
V.wxScanQRCodeSuccess = function (res) {
var resultStr = res.resultStr;
var results = resultStr.split(',');
var codeStr = results[results.length - 1];
$('#code').val(codeStr);
}
</script>
</body>
</html>
|
