You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
332 lines
13 KiB
332 lines
13 KiB
<!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,viewport-fit=cover"/> |
|
<link href="../../../lib/css/mui.min.css" rel="stylesheet"/> |
|
<link rel="stylesheet" type="text/css" href="../../../lib/css/basic.css"/> |
|
<link rel="stylesheet" href="../css/appeal2.css"/> |
|
<script type="text/javascript" src="../../../lib/js/rem-layout.js"></script> |
|
<script type="text/javascript" src="../../../lib/js/mui.min.js"></script> |
|
<script type="text/javascript" src="../../../lib/js/vue.js"></script> |
|
<script type="text/javascript" src="../../../lib/js/app.js"></script> |
|
<!--baseJs--> |
|
<script type="text/javascript" src="../js/ajax/appeal_ajax.js"></script> |
|
<script src="../js/base/requestUrl.js"></script> |
|
</head> |
|
|
|
<style> |
|
.appeal-upload { |
|
overflow: hidden; |
|
border: #333333 solid 1.5px; |
|
} |
|
|
|
.appeal-img { |
|
height: 90% !important; |
|
width: 100% !important; |
|
} |
|
</style> |
|
|
|
<body> |
|
<div id='data-info'> |
|
<header class="mui-bar mui-bar-nav app-header"> |
|
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> |
|
<h1 class="mui-title">{{langue.title}}</h1> |
|
</header> |
|
|
|
<div class="mui-content"> |
|
<h3>{{langue.appealRemark}}</h3> |
|
<div class="appeal-explain"> |
|
<textarea v-model="remark" class="appeal-textarea" rows="8" |
|
:placeholder="langue.appealPlaceholder"></textarea> |
|
</div> |
|
<h3>{{langue.appealImgTitle}}</h3> |
|
<div class="appeal-upload" data-index='0'> |
|
<div class="img-box"> |
|
<div v-show="appeal_urls[0] == null"> |
|
<img src="../img/upload.png"/> |
|
<span>{{langue.tapUpload}}</span> |
|
</div> |
|
<div v-show="appeal_urls[0] != null"> |
|
<img class="appeal-img" :src="base_file_url + appeal_urls[0]"/> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="appeal-upload" style="margin-top: 0.2rem;" v-if="appeal_urls[0] != null" data-index='1'> |
|
<div class="img-box"> |
|
<div v-show="appeal_urls[1] == null"> |
|
<img src="../img/upload.png"/> |
|
<span>{{langue.tapUpload}}</span> |
|
</div> |
|
<div v-show="appeal_urls[1] != null"> |
|
<img class="appeal-img" :src="base_file_url + appeal_urls[1]"/> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="appeal-upload" style="margin-top: 0.2rem;" v-if="appeal_urls[1] != null" data-index='2'> |
|
<div class="img-box"> |
|
<div v-show="appeal_urls[2] == null"> |
|
<img src="../img/upload.png"/> |
|
<span>{{langue.tapUpload}}</span> |
|
</div> |
|
<div v-show="appeal_urls[2] != null"> |
|
<img class="appeal-img" :src="base_file_url + appeal_urls[2]"/> |
|
</div> |
|
</div> |
|
</div> |
|
<p class="note"> |
|
{{langue.uploadRemark}} |
|
</p> |
|
<div class="btn"> |
|
<button class="app-btn mui-btn-outlined" id='appeal-btn'>{{langue.submitAppeal}}</button> |
|
</div> |
|
</div> |
|
</div> |
|
</body> |
|
|
|
<script type="text/javascript"> |
|
var langues = { |
|
zh_CN: { |
|
title: '申诉', |
|
appealRemark: '申诉说明', |
|
appealPlaceholder: '请输入申诉说明，200字以内', |
|
appealImgTitle: '上传凭证', |
|
tapUpload: '点击上传', |
|
uploadRemark: '*请确保凭证清晰可见，并承诺提供的信息真实有效，如 有虚假行为，账户将被封禁。', |
|
submitAppeal: '提交申诉', |
|
selectPhone: '从手机相册选择', |
|
cancel: '取消', |
|
appealRemarkNull: '请输入申诉说明！', |
|
appealImgNull: '请选择申诉凭证！', |
|
imgTooLarge: '图片过大，请重新选择！', |
|
imgUploadError: '加载图片失败 ', |
|
uploadWait: '上传图片中...', |
|
netError: '网络异常，请刷新重试！', |
|
waiting: '等待中...', |
|
submitAppealSuccess: '申诉已提交，请耐心等待工作人员审核！', |
|
logInElse: '您的账号在别处登录！', |
|
}, |
|
zh_HK: { |
|
title: '申訴', |
|
appealRemark: '申訴說明', |
|
appealPlaceholder: '請輸入申訴說明，200字以內', |
|
appealImgTitle: '上傳憑證', |
|
tapUpload: '點擊上傳', |
|
uploadRemark: '*請確保憑證清晰可見，並承諾提供的資訊真實有效，如 有虛假行為，帳戶將被封禁。', |
|
submitAppeal: '提交申訴', |
|
selectPhone: '從手機相冊選擇', |
|
cancel: '取消', |
|
appealRemarkNull: '請輸入申訴說明！', |
|
appealImgNull: '請選擇申訴憑證！', |
|
imgTooLarge: '圖片過大，請重新選擇！', |
|
imgUploadError: '加載圖片失敗', |
|
uploadWait: '上傳圖片中...', |
|
netError: '網路異常，請刷新重試！', |
|
waiting: '等待中...', |
|
submitAppealSuccess: '申訴已提交，請耐心等待工作人員審核！', |
|
logInElse: '您的帳號在別處登錄！', |
|
}, |
|
en_US: { |
|
title: 'appeal', |
|
appealRemark: 'Appeal statement', |
|
appealPlaceholder: 'Please enter the complaint description, within 200 words', |
|
appealImgTitle: 'upload certificate', |
|
tapUpload: 'Click upload', |
|
uploadRemark: '*Please ensure that the voucher is clearly visible and that the information provided is true and valid. If there is a false act, the account will be banned.', |
|
submitAppeal: 'Submit an appeal', |
|
selectPhone: 'Select from mobile phone album', |
|
cancel: 'cancel', |
|
appealRemarkNull: 'Please enter your complaint description! ', |
|
appealImgNull: 'Please choose the appeal voucher! ', |
|
imgTooLarge: 'The picture is too big, please choose again! ', |
|
imgUploadError: 'Load image failed', |
|
uploadWait: 'Upload image...', |
|
netError: 'Network exception, please refresh and try again! ', |
|
waiting: 'Waiting...', |
|
submitAppealSuccess: 'The complaint has been submitted, please be patient and wait for the staff to review! ', |
|
logInElse: 'Your account is logged in elsewhere! ', |
|
} |
|
}; |
|
//2、页面上所有需要国际化的文字，包括提示，都通过Vue去引用，例子： |
|
var langueKey = app.getLanguageLocalStorage(); //获取国际化语种 |
|
var langue = langues[langueKey]; // 获取国际化语种数据 |
|
//3、每个页面都需要加上以下的方法： |
|
window.addEventListener('switchLangueData', function (e) { |
|
//dataInfo为Vue对象的名称 |
|
dataInfo.langue = langues[e.detail]; |
|
}); |
|
</script> |
|
|
|
<script type="text/javascript"> |
|
/**vue**/ |
|
var dataInfo = new Vue({ |
|
el: '#data-info', |
|
data: { |
|
langue: langue, |
|
orderId: '', //订单id |
|
remark: '', //申诉说明 |
|
appeal_urls: [], //申诉图片路径 |
|
base_file_url: app.walletFileUrl, //服务器文件路径前缀 |
|
}, |
|
}); |
|
</script> |
|
|
|
<script type="text/javascript"> |
|
/**mui.plusReady**/ |
|
mui.plusReady(function () { |
|
var self = plus.webview.currentWebview(); |
|
dataInfo.orderId = self.orderId; |
|
}); |
|
</script> |
|
|
|
<script type="text/javascript"> |
|
/**事件绑定**/ |
|
|
|
//上传按钮 |
|
mui('.mui-content').on('tap', '.appeal-upload', function () { |
|
//图片选择框索引 |
|
var index = this.getAttribute('data-index'); |
|
//弹出选择手机相册框 |
|
if (mui.os.plus) { |
|
var buttons = [{ |
|
title: dataInfo.langue.selectPhone |
|
}]; |
|
plus.nativeUI.actionSheet({ |
|
cancel: dataInfo.langue.cancel, |
|
buttons: buttons |
|
}, function (b) { /*actionSheet 按钮点击事件*/ |
|
switch (b.index) { |
|
case 0: |
|
break; |
|
case 1: |
|
galleryImg(index); |
|
/*打开相册*/ |
|
break; |
|
default: |
|
break; |
|
} |
|
}) |
|
} |
|
}); |
|
|
|
//申诉按钮 |
|
document.getElementById("appeal-btn").addEventListener("tap", function () { |
|
if (dataInfo.remark == '') { |
|
mui.toast(dataInfo.langue.appealRemarkNull); |
|
return; |
|
} |
|
if (dataInfo.appeal_urls.length <= 0) { |
|
mui.toast(dataInfo.langue.appealImgNull); |
|
return; |
|
} |
|
//提交申诉 |
|
appeal(); |
|
}); |
|
</script> |
|
|
|
<script type="text/javascript"> |
|
/**function**/ |
|
|
|
//本地相册选择 |
|
function galleryImg(index) { |
|
plus.gallery.pick(function (path) { |
|
//通过H5+API获取文件 |
|
plus.io.resolveLocalFileSystemURL(path, |
|
//获取成功回调函数 |
|
function (entry) { |
|
//通过entry对象操作文件 |
|
entry.file(function (file) { |
|
//如果文件过大，显示提示信息 |
|
if (file.size > 1000000) { |
|
mui.toast(dataInfo.langue.imgTooLarge); |
|
return; |
|
} |
|
//上传图片 |
|
uploadAppealFile(path, index); |
|
}); |
|
}, |
|
//获取失败回调 |
|
function (e) { |
|
mui.toast(dataInfo.langue.imgUploadError + e.message); |
|
}); |
|
}); |
|
}; |
|
|
|
//上传图片 |
|
function uploadAppealFile(imgurl, index) { |
|
plus.nativeUI.showWaiting(dataInfo.langue.uploadWait) |
|
var task = plus.uploader.createUpload(appealAjax.UPLOAD_APPEAL_FILE.getUrl, { |
|
method: appealAjax.UPLOAD_APPEAL_FILE.getType |
|
}, |
|
function (t, status) { //上传完成 |
|
//200成功状态 |
|
if (status == 200) { |
|
//解析返回数据 |
|
var path = JSON.parse(t.responseText); |
|
//后台返回成功 |
|
if (path.code == 200) { |
|
//返回图片处理后的文件名，根据索引插入数组中 |
|
Vue.set(dataInfo.appeal_urls, index, path.data.toString()); |
|
} else if (path.code == 201 || data.code == 202) { //未登录 |
|
//未登录，跳转登录页面 |
|
app.openWin(requestUrl.LOGIN.getUrl, requestUrl.LOGIN.getId); |
|
} else { |
|
mui.toast(dataInfo.langue.netError); |
|
} |
|
} else { |
|
mui.toast(dataInfo.langue.netError); |
|
} |
|
plus.nativeUI.closeWaiting(); |
|
} |
|
); |
|
//添加其他参数 |
|
var flag = task.addFile(imgurl, { |
|
key: "appealFile" |
|
}); |
|
//设置请求头 |
|
task.setRequestHeader('X-Requested-Token', app.getTokenStorage()); |
|
task.start(); |
|
} |
|
|
|
//提交申诉 |
|
function appeal() { |
|
plus.nativeUI.showWaiting(dataInfo.langue.waiting); |
|
mui.ajax(appealAjax.APPEAL.getUrl, { |
|
headers: { |
|
"X-Requested-Token": app.getTokenStorage() // token头部 |
|
}, |
|
data: { |
|
urls: dataInfo.appeal_urls.toString(), |
|
remark: dataInfo.remark, |
|
orderId: dataInfo.orderId, |
|
}, |
|
dataType: 'json', |
|
type: appealAjax.APPEAL.getType, |
|
timeout: 10000, //超时时间设置为10秒 |
|
success: function (data) { |
|
plus.nativeUI.closeWaiting(); |
|
if (data.code == "200") { |
|
mui.toast(dataInfo.langue.submitAppealSuccess); |
|
//刷新上一页的订单信息 |
|
var opoenr = plus.webview.currentWebview().opener(); |
|
opoenr.evalJS('reloadOrder()'); |
|
mui.back(); |
|
} else if (data.code == 201) { |
|
//未登录，跳转登录页面 |
|
app.openWin(requestUrl.LOGIN.getUrl, requestUrl.LOGIN.getId); |
|
} else if (data.code == 202) { |
|
mui.toast(dataInfo.langue.logInElse); |
|
//未登录，跳转登录页面 |
|
app.openWin(requestUrl.LOGIN.getUrl, requestUrl.LOGIN.getId); |
|
} else { |
|
mui.toast(data.msg); |
|
} |
|
} |
|
}); |
|
} |
|
</script> |
|
|
|
</html> |