下载文档

发布页
更新时间:2016-04-25

在这个项目中,不仅提供买家购买海外商品服务,还支持在海外的卖家发布商品,将一个小型的自由海外交易市场搬进手机。作为一个海外购物App,如何尽可能地保证卖家发布商品确实从海外购入,而非国内某工厂的仿冒品呢?这里就需要对发布商品的卖家做一个识别地理位置了。

发布效果图:



1、定位识别:

进入发布页面,系统识别用户是否在海外,位置检测在国外或港澳台地区时,会跳转到发布页,并需要资质申请,通过即可发布;如果在内地,则跳出温馨提示,不能发布商品。使用uexLocation插件获取当前经纬度的地理位置信息,写isInChina方法将中国所在地区的经纬度包含进去,判断获得经纬度是否在isInChina内。

如果在内地:

  1. uexLocation.openLocation(locLevel, distanceFilter);
  2. uexLocation.onChange = function(latTemp, logTemp){
  3. lat = latTemp;
  4. log = logTemp;
  5. var isinchina=isInChina(lat, log);
  6. if(isinchina==true){
  7. time++;
  8. var country="中国";
  9. countryCode="CN";
  10. appcan.locStorage.setVal("country", country);
  11. appcan.locStorage.setVal("countryCode", countryCode);

如果在国外或港澳台地区:

  1. uexLocation.getAddress(lat, log, 1);
  2. uexLocation.cbGetAddress = function(pCode, dataType, data){
  3. if(data.indexOf('香港') != -1 || data.indexOf('Hong Kong') != -1||data.indexOf('澳门') != -1 || data.indexOf('Macao') != -1||data.indexOf('台湾') != -1 || data.indexOf('Taiwan') != -1) //判断是否为港澳台地区

调用谷歌地图接口:

  1. appcan.request.ajax({
  2. url :'https://www.google.com/maps/api/geocode/json?latlng='+lat+','+log+'&location_type=ROOFTOP&key=AIzaSyDg694kAk17qzDqzz9M3983lwmnT0OJyvk',
  3. type : 'GET',
  4. dataType : 'json',
  5. success : function(data) {
  6. console.log(JSON.stringify(data));
  7. var array=[];
  8. array=data.results[0].address_components;
  9. array.forEach(function(e){
  10. if(e.types[0]=="country")
  11. {
  12. var country=e.long_name;
  13. if(!/^[\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\u4e00-\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\u9fa5]+$/i.test(country)){
  14. country=namelist[country];
  15. }
  16. countryCode=e.short_name;
  17. appcan.locStorage.setVal("country", country);
  18. appcan.locStorage.setVal("countryCode", countryCode);
  19. }
  20. if(e.types[0]=="route")
  21. {
  22. var street=e.long_name;
  23. appcan.locStorage.setVal("street", street);
  24. }
  25. if(e.types[0]=="street_number")
  26. {
  27. var snumber=e.long_name;
  28. appcan.locStorage.setVal("snumber", snumber);
  29. }
  30. })
  31. location=data.results[0].formatted_address;
  32. appcan.locStorage.setVal("location", location);
  33. },
  34. error : function(errMessage) {
  35. //alert("errMessage:"+JSON.stringify(errMessage));
  36. uexWindow.toast("0", "5", "网络信号差", "2000");
  37. }
  38. });
  39. }
  40. }
  41. }
  42. if(uexWidgetOne.platformName == "iOS"){
  43. if(lat==0&&log==0){
  44. countryCode="0";
  45. appcan.locStorage.setVal("countryCode",countryCode);
  46. }
  47. }
  48. }

点击发布按钮时

  1. appcan.button("#publish", "btn-act", function() {
  2. countryCode=appcan.locStorage.getVal("countryCode");
  3. if(userId!=null){
  4. //判断地理位置
  5. appcan.request.ajax({
  6. url :api+'/api/shoplive/checkQualification?deviceInfo='+deviceInfo+'&userId='+userId+'&countryCode='+countryCode,
  7. type : 'GET',
  8. dataType : 'json',
  9. success : function(data) {
  10. if(data.status==0){
  11. //在国内跳出提示页,不能发布商品
  12. appcan.locStorage.setVal("reminder", "1");
  13. appcan.window.open("reminder","html/reminder.html",10);
  14. }
  15. if(data.status==1){
  16. //在海外,判断是否通过资质申请
  17. appcan.request.ajax({
  18. url :api+'/api/user/me/'+userId,
  19. type : 'GET',
  20. dataType : 'json',
  21. success : function(data) {
  22. if(data.status==1){
  23. //通过资质申请,判断是否设置支付宝收款账号
  24. if(data.data.user.account) {
  25. uexWindow.open("publish","0","publish.html","0","0","0","0","200");
  26. }else{
  27. uexWindow.toast("0", "5", "为了您的钱款安全,请先设置支付宝收款账号", "2000");
  28. setTimeout(function() {
  29. appcan.window.open("myalinum","html/myalinum.html",10);
  30. }, 2000);
  31. }
  32. }if(data.status == 0){
  33. uexWindow.toast("1","5",data.msg,-1);
  34. }
  35. },
  36. error : function(errMessage) {
  37. //alert("errMessage:"+JSON.stringify(errMessage));
  38. }
  39. });
  40. }
  41. //没有通过资质申请 ,跳转到资质申请页
  42. if(data.status==2){
  43. uexWindow.toast("0", "5", data.msg, "2000");
  44. setTimeout(function() {
  45. appcan.window.open("apply","html/apply.html",0);
  46. }, 2000);
  47. }
  48. },
  49. error : function(errMessage) {
  50. //alert("errMessage:"+JSON.stringify(errMessage));
  51. }
  52. });
  53. } else{
  54. appcan.window.open("login","login.html",16);
  55. }
  56. })

2、上传图片可选拍照或从相册选取图片,调用到了uexImage和uexCamera插件,使用uexImage.openPicker方法打开照片选择器,uexCamera.open打开相机,说个题外话,uexCamera中可以用openViewCamera方法打开自定义View照相机,本项目中没有用到。

上传图片布局:

  1. <div class="ub ub-ac" style="padding: .5em;line-height: 1.4em;">
  2. <div id="scenepic">
  3. <img src="image/choosePic.png" onclick="choose();" style="width: 6em;margin-top:.5em;margin-left:.5em; " />
  4. </div>
  5. <p class="ub ub-f1" style="margin:0 1em;font-size:.9em;">为确保真实性,请添加现场购物的店面照片</p>
  6. </div>

拍照或从相册选取图片

  1. function choosepic(){
  2. var data = {
  3. min:1,
  4. max:1,
  5. quality:0.5,
  6. detailedInfo:false
  7. }
  8. var json = JSON.stringify(data);
  9. uexImage.openPicker(json);
  10. uexImage.onPickerClosed=function(info){
  11. img_url = JSON.parse(info).data[0];
  12. uploadimg();
  13. }
  14. }
  15. function takephoto(){
  16. if(uexWidgetOne.platformName == "iOS" || uexWidgetOne.platformName == "ios"){
  17. uexCamera.cbOpen=function (opCode, dataType, data){
  18. img_url=data;
  19. uploadimg();
  20. }
  21. uexCamera.open(0,50);
  22. }else{
  23. uexCamera.cbOpenInternal=function (opCode, dataType, data){//仅android
  24. img_url=data;
  25. uploadimg();
  26. }
  27. uexCamera.openInternal(0,50);
  28. }
  29. }

调用后台接口上传图片,返回原图和缩略图:

  1. function uploadimg() {
  2. appcan.request.ajax({
  3. url : api+'/api/util/uploadImage?type=2',
  4. type : 'POST',
  5. dataType : 'json',
  6. data : {
  7. image : {
  8. path : img_url
  9. }
  10. },
  11. success : function(data, status) {
  12. if (data.status == 1) {
  13. appcan.window.openToast('上传成功', 1500, 5, 0);
  14. thumb=data.url[0];
  15. image=data.url[1];
  16. have_img=true;
  17. appcan.locStorage.setVal("have_img",have_img);
  18. appcan.locStorage.setVal("thumb",thumb);
  19. appcan.locStorage.setVal("image",image);
  20. var html='<img src="'+api+thumb+'" class="shoplive_image" style="width:6em;height:6em;margin: .5em 1em;" onclick="openimg();"/>';
  21. $("#scenepic").html(html);
  22. } else {
  23. appcan.window.openToast('上传失败', 1500, 5, 0);
  24. }
  25. },
  26. error : function(err) {
  27. appcan.window.openToast('上传失败', 1500, 5, 0);
  28. }
  29. })
  30. }

3、其他数据布局,代码如下:

  1. <form method="POST" name="card" action>
  2. <div class="ub ub-f1 ub-ver" style="background-color: #FFFFFF;padding: .8em 0;margin-bottom: .8em;height: 8em;">
  3. <div class="ub uinput3" style="height: 6em;">
  4. <textarea id="desc" placeholder="填写店面名称、品牌、优惠等"></textarea>
  5. </div>
  6. </div>
  7. <div class="ub ub-ac" style="background-color: #FFFFFF;margin-bottom: .8em;">
  8. <div class="ub ub-f1" style="padding:1em 1.5em;width:4em;">
  9. 活动时间
  10. </div>
  11. <div class="ub ub-ac ub-pc" style="color: #BCBCBC;">
  12. <div class="ub ub-ac ub-pc uinput4" id="deadtime" style="width:12em;">
  13. <input id="hour" name="T1" type="number" min="0" max="99" onkeyup="value=value.replace(/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\D/g,'');return T1_onkeyup()"/>小时
  14. <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='';}}"/>分钟
  15. </div>
  16. </div>
  17. </div>
  18. <div class="ub ub-ac" style="background-color: #FFFFFF;margin-bottom: .8em;">
  19. <div class="ub ub-f1" style="padding:1em 1.5em;width:4em;">
  20. 回国日期
  21. </div>
  22. <div class="ub ub-ac ub-pc" style="color: #BCBCBC;">
  23. <div class="ub ub-ac ub-pc uinput1" id="backtime" style="width:10em;padding-right: .5em">
  24. </div>
  25. </div>
  26. </div>
  27. <div class="ub ub-ac" style="background-color: #FFFFFF;margin-bottom: .8em;">
  28. <div class="ub ub-f1" style="padding:1em 1.5em;width:4em;">
  29. 所在位置
  30. </div>
  31. <div class="ub ub-ac ub-pc" style="color: #BCBCBC;">
  32. <div class="ub ub-ac ub-pc" id="location" style="width:13em;padding-right: .5em">
  33. </div>
  34. </div>
  35. </div>
  36. </form>

4、调用后台接口创建淘现场,上传发布信息,这里使用appcan.locStorage.setVal设置一个值到本地存储,通过appcan.locStorage.remove 方法来清除localStorage中对应的值,js代码如下:

  1. var uploadHttp=api + '/api/shoplive/add?userId='+userId+'&desc='
  2. +desc+'&endTime='+h+'-'+ms+'&backTime='+backdate+'&latlng='
  3. +lat+','+log+'&location_info='+locationInfo+'&country='+country+'&area='+area+'&image='+image+'&thumb='+thumb;
  4. appcan.request.ajax({
  5. url :encodeURI(uploadHttp),
  6. type : 'get',
  7. dataType : 'json',
  8. success : function(data, status) {
  9. if (data.status == 1) {
  10. appcan.window.openToast('创建成功', 1500, 5, 0);
  11. var shoplive_id=data.id;
  12. appcan.locStorage.setVal("shoplive_id",shoplive_id);
  13. appcan.window.open('share2', 'html/share2.html', 10);
  14. uexWindow.evaluatePopoverScript("", "content", "remove()");
  15. appcan.locStorage.remove("desc");
  16. appcan.locStorage.remove("hour");
  17. appcan.locStorage.remove("minute");
  18. appcan.locStorage.remove("backdate");
  19. appcan.locStorage.remove("have_img");
  20. appcan.locStorage.remove("thumb");
  21. appcan.locStorage.remove("image");
  22. } else {
  23. appcan.window.openToast('创建失败', 1500, 5, 0);
  24. }
  25. },
  26. error : function(err) {
  27. //appcan.window.openToast('创建失败', 1500, 5, 0);
  28. uexWindow.toast("0", "5", "网络信号差", "2000");
  29. }
  30. })