移动端地址控件

最新推荐文章于 2023-06-07 10:50:28 发布
最新推荐文章于 2023-06-07 10:50:28 发布
阅读量1.2k 收藏
点赞数
分类专栏： 技术资料
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38747509/article/details/80416331
版权

html：

<!DOCTYPE html >
< html >

< head >
< meta charset= "UTF-8" >
< title >择天记活动 </ title >
< meta name= "keywords" content= "择天记活动 - 中国东方航空" >
< meta name= "description" content= "择天记活动 - 中国东方航空" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
/>
< script src= "dest/js/lib/flexible.min.js" > < / script >
< link href= "dest/css/index.css" rel= "stylesheet" >
< link rel= "stylesheet" href= "dest/css/sm.css" >
< script type= 'text/javascript' src= 'dest/js/lib/zepto.min.js' charset= 'utf-8' > < / script >
< script type= 'text/javascript' src= 'dest/js/lib/sm.min.js' charset= 'utf-8' > < / script >
< script type= "text/javascript" src= "dest/js/lib/sm-city-picker.min.js" charset= "utf-8" > < / script >
< script src= "//res.wx.qq.com/open/js/jweixin-1.2.0.js" > < / script >
</ head >

< body >
< div class= "content hide" id= "contain" >
<!-- 填写个人信息 -->
< div class= "information" v-show= "resSuccess" >
< div class= "infoBox" >
< p >恭喜您获得 </ p >
< p : style= "prizeBg" ></ p >
< p >请输入您的地址及联系方式 </ p >
< p >我们将在30个工作日内将礼包快递给您 </ p >
</ div >
< div slot= "checkBox" id= "checkBox" >
< form class= "infoSubBox" >
< div class= "formBox" >
< span >* </ span >
< input type= "number" placeholder= "手机号" id= "contactPhone" v-model= "formData.contactPhone" />
</ div >
< div class= "formBox" >
< span >* </ span >
< input type= "text" placeholder= "姓名（中文）" id= "contacter" v-model= "formData.contacter" />
</ div >
< div class= "formBox" >
< span >* </ span >
< input type= "text" readonly placeholder= "所在区域" id= "district" />
</ div >
< div class= "formBox" >
< span >* </ span >
< input type= "text" placeholder= "详细地址" id= "addrDetail" v-model= "formData.addrDetail" />
</ div >
</ form >
< div class= "insubBtn" @ click= "saveAddr" ></ div >
</ div >
< div class= "cover" v-show= "ifLoading" >
< div class= "loading" v-show= "ifLoading" ></ div >
</ div >
</ div >
<!-- 个人信息保存成功 -->
< div class= "personlSucc" v-show= "saveSucc" >
< div class= "shutDown" @ click= "shutdown" ></ div >
< div class= "perCenter" ></ div >
< div class= "perTip" >
您的个人信息
< br /> 保存成功
</ div >
</ div >
<!-- 领取失败 -->
< div class= "fail" v-show= "resfail" ></ div >
</ div >
< script src= "dest/js/lib/vue.js" > < / script >
< script type= "text/javascript" src= "./js/lib/axios.min.js?_=1526563504633" > < / script >
< script src= "dest/js/prize.min.js" > < / script >
</ body >

</ html >

js：

import 'es5';
import {
ga
} from 'ga';
import "./component/background"
import {
isInApp,
saveP,
parse_url,
message,
APPLogin
} from './lib/utils-fn.js';
import {
api
} from './lib/utils-config';
import {
wechatShare
} from './lib/wechat'
ga();

const {
prizeCode,
p = "",
hasPrize,
addr
} = parse_url();

p && saveP( p);
const prize = {
"zetianji2-xiaofeiji" : "东航毛绒小飞机",
"zetianji2-danji" : "东航蛋机",
"zetianji2-bijiben" : "择天记纪念笔记本",
"zetianji2-chongdianxian" : "择天记充电线",
"Thanks" : "谢谢参与"
};

var prizePage = new Vue({
el: "#contain",
data: {
//收货人
contacter: "",
//手机号
contactPhone: "",

district: "",
addrDetail: "",
province: "",
city: "",
//loading
ifLoading: false,
//奖品名字背景图
prizeBg: "",
//presizecode无奖品
resfail: false,
//presizecode有奖品
resSuccess: false,
//地址保存成功
saveSucc: false,
formData: {
contactPhone: '',
addrDetail: '',
contacter: '',
addr: ''
}
},
mounted() {
//替换奖品名字
this. choose( prizeCode);
// 增加地区选择弹窗
this. cityPopBox();
},
computed: {

},
methods: {
// 增加地区选择弹窗
cityPopBox() {
$( "#district"). cityPicker({
toolbarTemplate: '<header class="bar bar-nav"> \
<button class="button button-l' +
'ink pull-right close-picker">确定</button> \
<h1 class="title">' +
'选择收货地址</h1> \
</header>',
onClose : function ( data) {}
});
},
//替换奖品名字
choose( prizeCode) {
if ( prizeCode == "Thanks") {
this. resfail = true;
this. saveSucc = false;
this. resSuccess = false;
} else {
this. resSuccess = true;
this. saveSucc = false;
this. resfail = false;
this. prizeBg = {
background: `url(./images/ ${ prizeCode } .png) center center no-repeat`,
backgroundSize: "auto 100%"
};
}
},
saveAddr : function () {
var city = document. getElementById( 'district'). value. split( " ")[ 1];
var province = document. getElementById( 'district'). value. split( " ")[ 0];
var district = document. getElementById( 'district'). value. split( " ")[ 2];
if ( district == '') {
city = document. getElementById( 'district'). value. split( " ")[ 0];
province = document. getElementById( 'district'). value. split( " ")[ 0];
district = document. getElementById( 'district'). value. split( " ")[ 1];
}
this. ifLoading = true;
axios. post( api. baseUrl + api. addAddr, {
prizeCode: prizeCode,
province: province, //省
city: city, //市
district: district, //区
addrDetail: this. formData. addrDetail, //地址详情
contacter: this. formData. contacter, //收货人
contactPhone: this. formData. contactPhone, //手机号
bAdd: true,
PValue: p,
ActivityCode: "HThNyydb/x1HEfo/Z71KIw=="
})
. then( response => {
this. ifLoading = false;
const {
data
} = response;
switch ( data. BCode) {
case 0:
//message("保存成功");
this. saveSucc = true;
break;
case - 1:
APPLogin( data. Data. LoginRedirectUrl, '择天记2活动', 'HThNyydb/x1HEfo/Z71KIw==');
break;
case - 6:
message( "您似乎填错了什么");
break;
case - 10:
message( "服务排队中，请稍后再试");
setTimeout(() => {
location. href = location. href + "&ranNum=" + 10000 * Math. random();
}, 2000);
break;
}
})
},
//关闭
shutdown() {
this. saveSucc = false;
},
//验证手机号码
isPoneAvailable( e) {
var myreg = / ^ [ 1 ][ 3,4,5,7,8 ][ 0-9 ] {9} $ /;
if (! myreg. test( e. val())) {
return false;
} else {
return true;
}
}
}
})

catherinawwww
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移植SUI Mobile省市区选择器至PC端，使用select完成地区联动
ROVAST的专栏
11-10 7709
没了解过sui的童鞋可以先去了解下，很好用的一个H5 UI框架。 一、sui省市区选择器简单介绍 其中，sui的拓展组件中有一个地区选择器，仿的ios中的select样式，效果如下 地址：http://m.sui.taobao.org/extends/#city-picker 我们更改地区的选择发现其中input的值会跟着变化为对应的【省 市 县】。 二、
jquery移动端时间控件
05-06
为了提供良好的用户体验，开发者经常需要使用专门针对移动端优化的组件，其中时间控件是一个常见的需求。"jQuery移动端时间控件"就是为了满足这种需求而设计的，它允许用户方便地选择日期、时间和日期时间组合，适用...
选择地址移动端弹窗 address-picker
王燕欣的博客
08-16 648
选择地址三级联动 移动端弹窗
（超全！超详细！！！）移动开发、AndroidStudio中的常用十大控件
Moonsev的博客
06-07 4208
本文用于介绍AndroidStudio常用的十大控件：TextView、EditText、Button、ImageView、CheckBox、RadioButton、Spinner、ListView、ProgressBar、Switch。可帮助初学者快速了解这些控件的常用属性和对应java中的常用方法。
移动端表格控件_移动端控件（二）-浮层（Action sheet）
weixin_29534421的博客
01-04 754
什么是浮层Action sheet是对控制或（操作）行动做出响应的一种特殊警示样式，它提供了一组前后操作相关的两个或多个选项。Action sheet一般用于让人们发起某项任务，或在执行可能具有破坏性操作之前进行请求确认。在手机端，Action sheet通常从屏幕底部向上滑出；在pad或者PC端，它可以向气泡一样弹出。——iOS Human Interface Guidelines安卓和iOS规...
移动端vue+vant+高德地图实现拖拽选址，周边选址，搜索选址，自动定位，选择城市功能，获取地址经纬度，详细地址
Hzq88888的博客
10-24 1万+
所有文件直接引用，有时候自动定位会报错，需要升级https站点，localhost下可以定位成功
移动端html时间控件
06-04
在移动端开发中，特别是在HTML5应用中，设计和实现一个跨平台的时间控件是至关重要的。这个主题主要涉及如何在Android和iOS设备上创建自定义的HTML时间选择器，以提供用户友好的交互体验。以下是对这个话题的详细...
基于图像识别的移动端应用控件检测方法.pdf
08-26
【图像识别技术在移动端应用控件检测中的应用】 随着移动应用市场的快速发展，应用程序的质量控制变得至关重要。GUI（图形用户界面）自动化测试是确保移动应用稳定性和功能性的关键手段，尤其是在面临海量输入组合...
移动端地址选择
09-24
1. 日期选择器：移动端通常使用滑动日历控件或者输入框配合日期选择弹窗来完成日期选择。例如，Mui框架提供了`.mui.picker.css`和对应的JavaScript组件，可以方便地实现这一功能。 2. 日期格式：日期的显示格式应...
移动端日期和时间选择控件lCalendar-master.zip
05-05
在移动应用开发中，日期和时间选择控件是不可或缺的一部分，它们用于用户输入或选择日期和时间，常见于各种表单、日历应用或者预订系统等。`lCalendar-master`是一个专为移动端设计的日期和时间选择器，适用于...
jQuery移动端的收货地址中国省市县级联选择插件
03-19
适用于移动端的选择收货地址的插件，非移动端也可以使用
移动端时间选择控件
01-17
一款好用的手机端时间选择控件,在做一个项目的时候,在网上找了一些都不好用,这个很不错,支持多种格式的时间,不求赚分,只希望跟多人能得到好的体验
移动端日期时间选择控件
02-18
移动端日期时间选择控件
手机移动端控件
03-07
移动端网页控件,是日历控件的基础js代码
地址控件
04-15
NULL 博文链接：https://exswang.iteye.com/blog/1771173
[原创首发] js手机移动端选择插件 mobile-select
热门推荐
onlyhom's notebook
02-27 8万+
mobile-select 一款多功能的手机移动端选择组件，支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等。mobileSelect.js是一个js移动端选择控件，不依赖任何库;可传入普通数组或者json数组;可根据传入的参数长度，自动渲染出对应的列数，支持单项到多项选择;自动识别是否级联;选择成功后，提供自定义回调函数callback()返回当前选择
web学习笔记15-移动端地址选择控件@v1.0简单版
点柈
01-04 723
&nbsp;&nbsp;&nbsp;&nbsp;好久都没有写东西了，现在干的活都是重复和简单的活，能总结出来的东西还是不太多。 &nbsp;&nbsp;&nbsp;&nbsp;目前做电商平台，其中用到选择地址的控件，不过不是自己写的，最近花时间重新自己做一个，目前就先吧功能样式，功能完成第一版，之后再进行优化和升级，最终做成组件或者是插件形式，调用只需要几行代码去完成，不过这些都是后话了，目前显示...
地址选择控件
04-09
地址选择控件，仿通讯录样式.数据加载使用volley框架
vue实现移动端省市区选择
12-30
本文实例为大家分享了vue实现移动端省市区选择的具体代码，供大家参考，具体内容如下 效果： 安装： npm install v-distpicker --save 组件代码： 所在地区 {{city}} <v-distpicker type=mob
vue移动端时间控件
最新发布
08-18
要在Vue移动端使用时间控件，可以按照以下步骤进行操作： 第一步：在main.js中引入时间控件的js文件。例如，可以使用import语句将datePicker.js文件引入进来，路径自己设置。然后使用Vue.use(datePicker)将该控件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值