我的书签
添加书签
移除书签发布页
在这个项目中，不仅提供买家购买海外商品服务，还支持在海外的卖家发布商品，将一个小型的自由海外交易市场搬进手机。作为一个海外购物App，如何尽可能地保证卖家发布商品确实从海外购入，而非国内某工厂的仿冒品呢？这里就需要对发布商品的卖家做一个识别地理位置了。
发布效果图：
1、定位识别：
进入发布页面，系统识别用户是否在海外，位置检测在国外或港澳台地区时，会跳转到发布页，并需要资质申请，通过即可发布；如果在内地，则跳出温馨提示，不能发布商品。使用uexLocation插件获取当前经纬度的地理位置信息，写isInChina方法将中国所在地区的经纬度包含进去，判断获得经纬度是否在isInChina内。
如果在内地：
uexLocation.openLocation(locLevel, distanceFilter);uexLocation.onChange = function(latTemp, logTemp){lat = latTemp;log = logTemp;var isinchina=isInChina(lat, log);if(isinchina==true){time++;var country="中国";countryCode="CN";appcan.locStorage.setVal("country", country);appcan.locStorage.setVal("countryCode", countryCode);
如果在国外或港澳台地区：
uexLocation.getAddress(lat, log, 1);uexLocation.cbGetAddress = function(pCode, dataType, data){if(data.indexOf('香港') != -1 || data.indexOf('Hong Kong') != -1||data.indexOf('澳门') != -1 || data.indexOf('Macao') != -1||data.indexOf('台湾') != -1 || data.indexOf('Taiwan') != -1) //判断是否为港澳台地区
调用谷歌地图接口：
appcan.request.ajax({url :'https://www.google.com/maps/api/geocode/json?latlng='+lat+','+log+'&location_type=ROOFTOP&key=AIzaSyDg694kAk17qzDqzz9M3983lwmnT0OJyvk',type : 'GET',dataType : 'json',success : function(data) {console.log(JSON.stringify(data));var array=[];array=data.results[0].address_components;array.forEach(function(e){if(e.types[0]=="country"){var country=e.long_name;if(!/^[\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\u4e00-\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\u9fa5]+$/i.test(country)){country=namelist[country];}countryCode=e.short_name;appcan.locStorage.setVal("country", country);appcan.locStorage.setVal("countryCode", countryCode);}if(e.types[0]=="route"){var street=e.long_name;appcan.locStorage.setVal("street", street);}if(e.types[0]=="street_number"){var snumber=e.long_name;appcan.locStorage.setVal("snumber", snumber);}})location=data.results[0].formatted_address;appcan.locStorage.setVal("location", location);},error : function(errMessage) {//alert("errMessage:"+JSON.stringify(errMessage));uexWindow.toast("0", "5", "网络信号差", "2000");}});}}}if(uexWidgetOne.platformName == "iOS"){if(lat==0&&log==0){countryCode="0";appcan.locStorage.setVal("countryCode",countryCode);}}}
点击发布按钮时
appcan.button("#publish", "btn-act", function() {countryCode=appcan.locStorage.getVal("countryCode");if(userId!=null){//判断地理位置appcan.request.ajax({url :api+'/api/shoplive/checkQualification?deviceInfo='+deviceInfo+'&userId='+userId+'&countryCode='+countryCode,type : 'GET',dataType : 'json',success : function(data) {if(data.status==0){//在国内跳出提示页，不能发布商品appcan.locStorage.setVal("reminder", "1");appcan.window.open("reminder","html/reminder.html",10);}if(data.status==1){//在海外，判断是否通过资质申请appcan.request.ajax({url :api+'/api/user/me/'+userId,type : 'GET',dataType : 'json',success : function(data) {if(data.status==1){//通过资质申请，判断是否设置支付宝收款账号if(data.data.user.account) {uexWindow.open("publish","0","publish.html","0","0","0","0","200");}else{uexWindow.toast("0", "5", "为了您的钱款安全，请先设置支付宝收款账号", "2000");setTimeout(function() {appcan.window.open("myalinum","html/myalinum.html",10);}, 2000);}}if(data.status == 0){uexWindow.toast("1","5",data.msg,-1);}},error : function(errMessage) {//alert("errMessage:"+JSON.stringify(errMessage));}});}//没有通过资质申请 ，跳转到资质申请页if(data.status==2){uexWindow.toast("0", "5", data.msg, "2000");setTimeout(function() {appcan.window.open("apply","html/apply.html",0);}, 2000);}},error : function(errMessage) {//alert("errMessage:"+JSON.stringify(errMessage));}});} else{appcan.window.open("login","login.html",16);}})
2、上传图片可选拍照或从相册选取图片，调用到了uexImage和uexCamera插件，使用uexImage.openPicker方法打开照片选择器，uexCamera.open打开相机，说个题外话，uexCamera中可以用openViewCamera方法打开自定义View照相机，本项目中没有用到。
上传图片布局：
<div class="ub ub-ac" style="padding: .5em;line-height: 1.4em;"><div id="scenepic"><img src="image/choosePic.png" onclick="choose();" style="width: 6em;margin-top:.5em;margin-left:.5em; " /></div><p class="ub ub-f1" style="margin:0 1em;font-size:.9em;">为确保真实性，请添加现场购物的店面照片</p></div>
拍照或从相册选取图片
function choosepic(){
var data = {
min:1,
max:1,
quality:0.5,
detailedInfo:false
}
var json = JSON.stringify(data);
uexImage.openPicker(json);
uexImage.onPickerClosed=function(info){
img_url = JSON.parse(info).data[0];
uploadimg();
}
}
function takephoto(){
if(uexWidgetOne.platformName == "iOS" || uexWidgetOne.platformName == "ios"){
uexCamera.cbOpen=function (opCode, dataType, data){
img_url=data;
uploadimg();
}
uexCamera.open(0,50);
}else{
uexCamera.cbOpenInternal=function (opCode, dataType, data){//仅android
img_url=data;
uploadimg();
}
uexCamera.openInternal(0,50);
}
}
调用后台接口上传图片，返回原图和缩略图：
function uploadimg() {
appcan.request.ajax({
url : api+'/api/util/uploadImage?type=2',
type : 'POST',
dataType : 'json',
data : {
image : {
path : img_url
}
},
success : function(data, status) {
if (data.status == 1) {
appcan.window.openToast('上传成功', 1500, 5, 0);
thumb=data.url[0];
image=data.url[1];
have_img=true;
appcan.locStorage.setVal("have_img",have_img);
appcan.locStorage.setVal("thumb",thumb);
appcan.locStorage.setVal("image",image);
var html='<img src="'+api+thumb+'" class="shoplive_image" style="width:6em;height:6em;margin: .5em 1em;" onclick="openimg();"/>';
$("#scenepic").html(html);
} else {
appcan.window.openToast('上传失败', 1500, 5, 0);
}
},
error : function(err) {
appcan.window.openToast('上传失败', 1500, 5, 0);
}
})
}
3、其他数据布局，代码如下：
<form method="POST" name="card" action>
<div class="ub ub-f1 ub-ver" style="background-color: #FFFFFF;padding: .8em 0;margin-bottom: .8em;height: 8em;">
<div class="ub uinput3" style="height: 6em;">
<textarea id="desc" placeholder="填写店面名称、品牌、优惠等"></textarea>
</div>
</div>
<div class="ub ub-ac" style="background-color: #FFFFFF;margin-bottom: .8em;">
<div class="ub ub-f1" style="padding:1em 1.5em;width:4em;">
活动时间
</div>
<div class="ub ub-ac ub-pc" style="color: #BCBCBC;">
<div class="ub ub-ac ub-pc uinput4" id="deadtime" style="width:12em;">
<input id="hour" name="T1" type="number" min="0" max="99" onkeyup="value=value.replace(/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\D/g,'');return T1_onkeyup()"/>小时
<input id="minute" name="T2" type="number" onkeyup="if(event.keyCode !=37 && event.keyCode != 39){if (! /^[0-5]{0,1}[0-9]{1}$/ig.test(this.value)){this.value='';}}"/>分钟
</div>
</div>
</div>
<div class="ub ub-ac" style="background-color: #FFFFFF;margin-bottom: .8em;">
<div class="ub ub-f1" style="padding:1em 1.5em;width:4em;">
回国日期
</div>
<div class="ub ub-ac ub-pc" style="color: #BCBCBC;">
<div class="ub ub-ac ub-pc uinput1" id="backtime" style="width:10em;padding-right: .5em">
</div>
</div>
</div>
<div class="ub ub-ac" style="background-color: #FFFFFF;margin-bottom: .8em;">
<div class="ub ub-f1" style="padding:1em 1.5em;width:4em;">
所在位置
</div>
<div class="ub ub-ac ub-pc" style="color: #BCBCBC;">
<div class="ub ub-ac ub-pc" id="location" style="width:13em;padding-right: .5em">
</div>
</div>
</div>
</form>
4、调用后台接口创建淘现场，上传发布信息，这里使用appcan.locStorage.setVal设置一个值到本地存储，通过appcan.locStorage.remove 方法来清除localStorage中对应的值，js代码如下：
var uploadHttp=api + '/api/shoplive/add?userId='+userId+'&desc='
+desc+'&endTime='+h+'-'+ms+'&backTime='+backdate+'&latlng='
+lat+','+log+'&location_info='+locationInfo+'&country='+country+'&area='+area+'&image='+image+'&thumb='+thumb;
appcan.request.ajax({
url :encodeURI(uploadHttp),
type : 'get',
dataType : 'json',
success : function(data, status) {
if (data.status == 1) {
appcan.window.openToast('创建成功', 1500, 5, 0);
var shoplive_id=data.id;
appcan.locStorage.setVal("shoplive_id",shoplive_id);
appcan.window.open('share2', 'html/share2.html', 10);
uexWindow.evaluatePopoverScript("", "content", "remove()");
appcan.locStorage.remove("desc");
appcan.locStorage.remove("hour");
appcan.locStorage.remove("minute");
appcan.locStorage.remove("backdate");
appcan.locStorage.remove("have_img");
appcan.locStorage.remove("thumb");
appcan.locStorage.remove("image");
} else {
appcan.window.openToast('创建失败', 1500, 5, 0);
}
},
error : function(err) {
//appcan.window.openToast('创建失败', 1500, 5, 0);
uexWindow.toast("0", "5", "网络信号差", "2000");
}
})
