发布页

在这个项目中,不仅提供买家购买海外商品服务,还支持在海外的卖家发布商品,将一个小型的自由海外交易市场搬进手机。作为一个海外购物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");  
}   
})
还需要帮助吗? 联系我们
最新更新 8th Jul 2021