<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<script src="../../assets/js/fontsize.js"></script>
<link rel="stylesheet" href="../../assets/css/weui.min.css">
<link rel="stylesheet" href="../../assets/css/api.css"/>
<link rel="stylesheet" href="../../assets/css/style.css">
<link rel="stylesheet" href="../../assets/icon/iconfont.css">
<link rel="stylesheet" href="../../assets/css/index.css">
<link rel="stylesheet" href="../../assets/css/doc.css">
<link rel="stylesheet" href="../../assets/css/pay_form_f.css">
<title></title>
<style>
.auth2_title {
font-size: 14px;
color: #424242;
margin: 0.57rem 0.62rem 0 0.62rem;
}
.photos {
display: flex;
align-items: center;
/*justify-content: space-around;*/
flex-wrap: wrap;
font-size: 14px;
color: #424242;
}
.photo_item {
display: flex;
align-items: center;
flex-direction: column;
margin: 0.84rem 0 0 0;
/*flex: 1;*/
width: 50%;
}
.photo_item_img {
height: 1.92rem;
width: 2.46rem;
border: 1px dashed #dcdcdc;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.1rem;
overflow: hidden;
margin-bottom: 0.28rem;
}
.photo_item_img .iconfont {
font-size: 33px;
color: #c1c1c1;
}
.photo_item_img img {
width: 100%;
}
.idcard_box input {
padding: 0.28rem 0;
width: 100%;
text-align: right;
}
.idcard_box .iconfont {
color: #E3C88D;
margin-right: 0.1rem;
}
.photo_re {
color: #AAAAAA;
font-size: 14px;
text-align: right;
margin: 0 0 0.47rem 0;
padding-right: 1.3rem;
}
.auth2_tips {
text-align: center;
font-size: 10px;
color: #AAAAAA;
margin-bottom: 0.65rem;
}
.save_btn {
position: relative;
width: 84%;
margin: 0.91rem auto 0.3rem auto;
border-radius: 0.1rem;
font-size: 15px;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div class="auth2_title">请上传就医证明，以便订单审核（为您保密）</div>
<div class="photos">
<div class="photo_item">
<div class="photo_item_img" @click="popupVisible=true">
<img v-if="img1" :src="img1"/>
<span v-else class="iconfont icon-xiangji"></span>
</div>
<div class="photo_type">诊断证明／医疗处置单</div>
</div>
<div class="photo_item">
<div class="photo_item_img" @click="popupVisible1=true">
<img v-if="img2" :src="img2"/>
<span v-else class="iconfont icon-xiangji"></span>
</div>
<div class="photo_type">药品处方</div>
</div>
<div class="photo_item">
<div class="photo_item_img" @click="popupVisible2=true">
<img v-if="img3" :src="img3"/>
<span v-else class="iconfont icon-xiangji"></span>
</div>
<div class="photo_type">药品照片</div>
</div>
<div class="photo_item">
<div class="photo_item_img" @click="popupVisible3=true">
<img v-if="img4" :src="img4"/>
<span v-else class="iconfont icon-xiangji"></span>
</div>
<div class="photo_type">
<div>病例</div>
</div>
</div>
</div>
<div class="photo_re">（选填）</div>
<!--<mt-popup v-model="popupVisible" position="bottom">-->
<!--<ul class="moreoul">-->
<!--<li @click="auth1('camera')">拍照</li>-->
<!--<li @click="auth1('album')">从相册中选择</li>-->
<!--<li @click="popupVisible=false" style="border-top: 2px solid #f0f0f0">取消</li>-->
<!--</ul>-->
<!--</mt-popup>-->
<!--<mt-popup v-model="popupVisible1" position="bottom">-->
<!--<ul class="moreoul">-->
<!--<li @click="auth2('camera')">拍照</li>-->
<!--<li @click="auth2('album')">从相册中选择</li>-->
<!--<li @click="popupVisible1=false" style="border-top: 2px solid #f0f0f0">取消</li>-->
<!--</ul>-->
<!--</mt-popup>-->
<!--<mt-popup v-model="popupVisible2" position="bottom">-->
<!--<ul class="moreoul">-->
<!--<li @click="auth3('camera')">拍照</li>-->
<!--<li @click="auth3('album')">从相册中选择</li>-->
<!--<li @click="popupVisible2=false" style="border-top: 2px solid #f0f0f0">取消</li>-->
<!--</ul>-->
<!--</mt-popup>-->
<!--<mt-popup v-model="popupVisible3" position="bottom">-->
<!--<ul class="moreoul">-->
<!--<li @click="auth4('camera')">拍照</li>-->
<!--<li @click="auth4('album')">从相册中选择</li>-->
<!--<li @click="popupVisible2=false" style="border-top: 2px solid #f0f0f0">取消</li>-->
<!--</ul>-->
<!--</mt-popup>-->
<div class="save_btn" @click="auth_next">提交</div>
<div class="auth2_tips">为提高审核速度，请最少上传1张清晰的图片</div>
</div>
</body>
</html>
<script type="text/javascript" src="../../assets/js/api.js"></script>
<script type="text/javascript" src="../../assets/js/vue.min.js"></script>
<script type="text/javascript" src="../../assets/js/index.js"></script>
<script type="text/javascript" src="../../assets/js/weui.min.js"></script>
<script type="text/javascript" src="../../assets/js/public.js"></script>
<script type="text/javascript" src="../../assets/js/fastclick.js"></script>
<script>
new FastClick(document.body);
</script>
<script type="text/javascript" src="../../assets/js/axios.min.js"></script>
<script type="text/javascript" src="../../assets/icon/iconfont.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
img1: '',
img2: '',
img3: '',
img4: '',
popupVisible: false,
popupVisible1: false,
popupVisible2: false,
popupVisible3: false,
configinfo: []
},
created: function () {
apiready = function () {
app.getsdk();
if ($api.getStorage('img1') || ($api.getStorage('img2')) || ($api.getStorage('img3')) || ($api.getStorage('img4'))) {
app.img1 = $api.getStorage('img1');
app.img2 = $api.getStorage('img2');
app.img3 = $api.getStorage('img3');
app.img4 = $api.getStorage('img4')
}
}
},
methods: {
// 获取微信配置
getsdk: function () {
var header = {
"XX-Device-Type": getDevice(),
'XX-Token': getToken(),
};
var post = {
apis: 'chooseImage,uploadImage'
};
getRequest('post', 'user/index/getSingture', post, header).then(function (res) {
alert(JSON.stringify(res))
if (res.data.code == 1) {
app.configinfo = res.data.data;
wx.config({
debug: debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: app.configinfo.appId, // 必填，公众号的唯一标识
timestamp: app.configinfo.timestamp, // 必填，生成签名的时间戳
nonceStr: app.configinfo.nonceStr, // 必填，生成签名的随机串
signature: app.configinfo.signature,// 必填，签名，见附录1
jsApiList: app.configinfo.jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
}
loadEnd()
})
},
//诊断证明／医疗处置单
auth1: function (type) {
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
wx.uploadImage({
localId: localIds, // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
app.img1=serverId
}
});
}
});
},
// 药品处方
auth2: function (type) {
app.popupVisible1 = false;
},
// 药品照片
auth3: function (type) {
app.popupVisible2 = false;
},
// 病例
auth4: function (type) {
app.popupVisible3 = false;
},
auth_next: function () {
if (app.img1 == '') {
toastMsg('请上传诊断证明／医疗处置单')
} else if (app.img2 == '') {
toastMsg('请上传药品处方')
} else if (app.img3 == '') {
toastMsg('请上传药品照片')
}
else {
api.sendEvent({
name: 'prove',
extra: {
diagnosis: app.img1,
drug_recipe: app.img2,
drug: app.img3,
ill_case: app.img4
}
});
api.closeWin();
}
},
}
})
</script>