Главная Обзор Помощь
Вход
liujiankang
/
static
Следить 1
В избранное 0
Ответвить 0
Файлы Обсуждения 0 Запросы на слияние 0 Вики
Дерево: beb2652b5e
Ветки Метки
static
/
watero
/
view
/
gift_card_user_exchange.html

gift_card_user_exchange.html 14 KB
История Исходник

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282 
  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. 	<meta charset="UTF-8">
    5. 

  5. 	<title>用户提货</title>
    6. 

  6. 	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    7. 

  7. 	<meta name="apple-mobile-web-app-capable" content="yes">
    8. 

  8. 	<meta name="apple-mobile-web-app-status-bar-style" content="black">
    9. 

  9. 	<link rel="stylesheet" type="text/css" href="/css/mui.min.css">
    10. 

  10. 	<link rel="stylesheet" type="text/css" href="/css/iconfont.css" />
    11. 

  11. 	<link rel="stylesheet" type="text/css" href="/css/style.css" />
    12. 

  12. 	<style>
    13. 

  13. 		.head {height: 60px;}
    14. 

  14. 		#head {line-height: 60px;}
    15. 

  15. 		h3{margin-top:5px;margin-bottom: 0;}
    16. 

  16. 		.icon-fuxuankuang a{color: #24cae9;text-decoration:underline;}
    17. 

  17. 		.icon-daifahuo,.icon-lease2,.icon-jiage,.icon-lipin{font-size: 15px;padding-left: 25px;}
    18. 

  18. 		.icon-fuxuankuang{font-size: 12px;padding:5px 5px 5px 22px;}
    19. 

  19. 		.icon-fuxuankuang:before{font-size: 14px;margin-top: 5px;margin-right: 3px;}
    20. 

  20. 		.icon-daifahuo:before,.icon-lease2:before,.icon-jiage:before,.icon-lipin:before{font-size: 19px;color: #24cae9;position: absolute;left: 0;width: 20px;height: 18px;}
    21. 

  21. 		.try_price{color: #f1436c;}
    22. 

  22. 		.ul_radio{width: 100%;text-align: left;}
    23. 

  23. 		.ul_radio li{width:21%;height: 55px;margin: 0 1%;border: 1px solid rgba(0,0,0,.1);border-radius: 5px; display: inline-block;position: relative;font-family:"iconfont" !important;font-style:normal;-webkit-font-smoothing: antialiased;}
    24. 

  24. 		.ul_radio .active:after{position: absolute;right: 0;bottom: 0;content: "\e66f";color: #f1436c;line-height: 1;font-size: 20px;}
    25. 

  25. 		.radio1{background: url(//s.iamberry.com/watero/images/cp-1.jpg) center center /auto 85% no-repeat;}
    26. 

  26. 		.radio2{background: url(//s.iamberry.com/watero/images/cp-2.jpg) center center /auto 85% no-repeat;}
    27. 

  27. 		.radio3{background: url(//s.iamberry.com/watero/images/cp-3.jpg) center center /auto 85% no-repeat;}
    28. 

  28. 		.radio4{background: url(//s.iamberry.com/watero/images/cp-4.jpg) center center /auto 85% no-repeat;}
    29. 

  29. 		.head-img {position: absolute;bottom: 15px;right: 13px;width: 60px;height: 60px;border-radius: 30px;border: 3px solid #E5E5E5;}
    30. 

  30. 		.mui-table-view .mui-media .mui-media-body{height: 41px;line-height: 41px;color: #333;}
    31. 

  31. 		.mui-table-view .mui-media .mui-media-body>span{color: #f1436c;}
    32. 

  32. 		.my-table-view-try{border-top: .6em solid #f0f0f0;border-bottom: .6em solid #f0f0f0;padding-bottom: 10px;}
    33. 

  33. 		.my-table-view-try .mui-table-view-cell{padding:10px 13px 10px 30px !important;font-size: 12px;}
    34. 

  34. 		.mui-table-view-cell:after,.mui-table-view:before,.mui-table-view:after,.mui-input-group .mui-input-row:after,.mui-input-group:before,.mui-input-group:after{display: none;}
    35. 

  35. 		.mui-table-view-cell>a:not(.mui-btn){margin: -15px -25px;}
    36. 

  36. 		.mui-table-view-cell>a .mui-pull-right{color: #999;font-size: 14px;}
    37. 

  37. 		#btn_submit{color: #fff;font-size: 18px;background: #24cae9;margin-bottom: 0;border: 0;}
    38. 

  38. 		.mui-btn-block.mui-active,.btn-pull-code.mui-active{background-color: #c8c8c8 !important;}
    39. 

  39. 		.icon-fuxuankuang.mui-active:before{color: #c8c8c8;}
    40. 

  40. 		.mui-content-padded{margin: 10px 13px;}
    41. 

  41. 		.mui-input-group .mui-input-row {height: 50px;padding: 5px 0;border: 1px solid rgba(0,0,0,.1);margin:10px 0;}
    42. 

  42. 		.mui-input-row label{color: #666;width:27%;font-size: 15px;}
    43. 

  43. 		.mui-input-row label~input{width:73%;}
    44. 

  44. 		.mui-input-row label~input::-webkit-input-placeholder{font-size: 15px;}
    45. 

  45. 		.triangle-down {width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #ccc;}
    46. 

  46. 		.my-arrowright{position: absolute;right: 18px;top: 28px;color: #666;pointer-events:none;}
    47. 

  47. 		.mui-btn-red{background-color: #e9004c;}
    48. 

  48. 		.tips{padding-bottom: 65px;}
    49. 

  49. 

  50. 		.gift-card-title{padding-top:60px;background:url(//s.iamberry.com/watero/images/gift-card-tit-bg.jpg) top center /100% no-repeat #71d8ec;}
    51. 

  51. 		.gift-card-title .mui-table-view-cell.mui-active{background:transparent;}
    52. 

  52. 		.gift-card-title .mui-table-view-cell>a:not(.mui-btn){color: #fff;}
    53. 

  53. 		.gift-card-title .mui-table-view-cell>a:not(.mui-btn).mui-active{background:transparent;}
    54. 

  54. 		.gift-card-title .mui-navigate-right:after{color: #fff;font-size: 20px;right: 7px;}
    55. 

  55. 		.gift-card-title .mui-table-view-cell{color: #fff;}
    56. 

  56. 		.mui-table-view-cell.mui-collapse .mui-collapse-content{background: #71d8ec;}
    57. 

  57. 		.accordion{float: right;margin:2px 15px 0 0;font-size: 12px;color: #fff;}
    58. 

  58. 		.my-btn-hand{display:block;width: 100%;height: 55px;background-color: #c5c5c5;color: #fff;border: 0;border-radius: 0;}
    59. 

  59. 		.my-btn-hand.active{background-color: #1cc9f4;}
    60. 

  60. 		.my-div{padding:10px 0;border-bottom: 1px solid rgba(0,0,0,.1);margin-bottom:10px;}
    61. 

  61. 		.my-div.noline{padding: 5px 0;border-bottom:0;margin-bottom: 5px;}
    62. 

  62. 		.my-btn-exchange{background: #ddf2f8 !important;text-align: center;border: 0 !important;margin-bottom:0 !important;}
    63. 

  63. 		.btn-pull-code{position: absolute;right: 10px;top:7px;height:34px;padding:0 6px;border-radius: 5px; line-height: 34px;font-size: 12px; color: #fff; background: #24cae9;}
    64. 

  64. 		.btn-pull-code .active{background: #c8c8c8;}
    65. 

  65. 		.mui-btn-block.mui-active,.btn-pull-code.mui-active{background-color: #e3ecee !important;}
    66. 

  66. 		.mui-h5, h5 {margin-left: 30px;}
    67. 

  67. 		.mui-h6{font-size:14px;}
    68. 

  68. 	</style>
    69. 

  69. 	<script>
    70. 

  70.         // 屏蔽分享
    71. 

  71.         window.hiddenAllWechatMenu = true;
    72. 

  72. 	</script>
    73. 

  73. </head>
    74. 

  74. <body style="background: #fff;">
    75. 

  75. <div class="loading-bg">
    76. 

  76. 	<div class="mui-loading">
    77. 

  77. 		<div class="mui-spinner">
    78. 

  78. 		</div>
    79. 

  79. 		&nbsp;&nbsp;加载中...
    80. 

  80. 	</div>
    81. 

  81. </div>
    82. 

  82. 

  83. <div class="mui-content" style="background: #fff;">
    84. 

  84. 	<div class="tips">
    85. 

  85. 		<div class="mui-content-padded">
    86. 

  86. 			<div class="my-div">
    87. 

  87. 				<span class="iconfont icon-lipin">提货信息</span>
    88. 

  88. 			</div>
    89. 

  89. 			<div class="mui-h6">
    90. 

  90. 				提货产品：美国watero净饮水一体机
    91. 

  91. 			</div>
    92. 

  92. 			<form class="mui-input-group">
    93. 

  93. 				<div style="display: table;width: 100%;padding: 10px 0;">
    94. 

  94. 					<div style="display: table-cell;width: 20%;vertical-align: middle;color: #8f8f94;">选择颜色:</span></div><div style="display:table-cell;width:70%;text-align: right;">
    95. 

  95. 					<ul class="ul_radio">
    96. 

  96. 						<!-- <li class="radio1 active"></li>
    97. 

  97.                         <li class="radio2"></li>
    98. 

  98.                         <li class="radio3"></li>
    99. 

  99.                         <li class="radio4"></li> -->
    100. 

  100. 					</ul>
    101. 

  101. 				</div>
    102. 

  102. 				</div>
    103. 

  103. 			</form>
    104. 

  104. 			<ul class="mui-table-view" style="border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1);margin:10px 0;">
    105. 

  105. 				<li class="mui-table-view-cell" style="padding: 15px 15px;">
    106. 

  106. 					<a class="mui-navigate-right" id="go-gift-details" href="//w.iamberry.com/watero/wechat/product/desc?productId=34&colorId=2">
    107. 

  107. 						查看产品详情
    108. 

  108. 					</a>
    109. 

  109. 				</li>
    110. 

  110. 			</ul>
    111. 

  111. 			<div class="my-div">
    112. 

  112. 				<span class="iconfont icon-lease2">收货信息</span>
    113. 

  113. 			</div>
    114. 

  114. 			<ul class="mui-table-view">
    115. 

  115. 				<li class="mui-table-view-cell">
    116. 

  116. 					<a class="mui-navigate-right" id="open-wechat-addres-a">
    117. 

  117. 						收货地址<span class="mui-h5">请选择收货地址</span>
    118. 

  118. 						<!-- <ul class="ft-12" style="color: #333;">
    119. 

  119. 							<li>收  货  人：林林</li>
    120. 

  120. 							<li>手 机 号：15999999999</li>
    121. 

  121. 							<li>详细地址：广东省深圳市福田区莲花街道特区报业大厦12B</li>
    122. 

  122. 						</ul> -->
    123. 

  123. 					</a>
    124. 

  124. 				</li>
    125. 

  125. 			</ul>
    126. 

  126. 			<!-- <div style="padding:8px 0;margin-top:4px;border-top: 1px solid rgba(0,0,0,.1);">
    127. 

  127.                 <span class="iconfont icon-daifahuo">礼品卡兑换码</span>
    128. 

  128.             </div>
    129. 

  129.             <div>
    130. 

  130.                 <input type="text" value="" placeholder="请输入兑换密码" class="my-btn-exchange" id="ipt-exchange"/>
    131. 

  131.             </div> -->
    132. 

  132. 			<!-- 				<form class="mui-input-group">
    133. 

  133.                                 <div class="mui-input-row">
    134. 

  134.                                     <label>手机号</label>
    135. 

  135.                                     <input type="tel" maxlength="11" class="mui-input-clear" placeholder="请输入手机号" id="ipt-phone">
    136. 

  136.                                 </div>
    137. 

  137.                                 <div class="mui-input-row">
    138. 

  138.                                     <label>验证码</label>
    139. 

  139.                                     <input type="text" maxlength="4" placeholder="请输入验证码" id="ipt-code">
    140. 

  140.                                     <span class="btn-pull-code" id="pull-code">获取验证码</span>
    141. 

  141.                                 </div>
    142. 

  142.                             </form> -->
    143. 

  143. 			<!-- 				<div class="mui-h6">
    144. 

  144.                                 说明：成功兑换后，可再次扫描提货卡上二维码查看兑换记录！
    145. 

  145.                             </div> -->
    146. 

  146. 		</div>
    147. 

  147. 	</div>
    148. 

  148. </div>
    149. 

  149. <div class="buy-footer">
    150. 

  150. 	<button type="button" data-loading-icon="mui-spinner mui-spinner-custom" data-loading-text="提交中" class="mui-btn mui-btn-block mui-btn-outlined mui-active" id="btn_submit" disabled="disabled">确认提货</button>
    151. 

  151. </div>
    152. 

  152. <script src="/js/mui.min.js"></script>
    153. 

  153. <script src="/js/jquery-2.1.1.min.js"></script>
    154. 

  154. <script src="/js/shop/main.js"></script>
    155. 

  155. <script src="/js/shop/wechat-utils-1.0.js?v=201706001"></script>
    156. 

  156. <script type="text/javascript">
    157. 

  157.     var check = false,alert_msg='';
    158. 

  158.     var mobile=/^(13|14|15|18)[0-9]{9}$/; //11位手机号码
    159. 

  159.     var code = /^[0-9]{4}$/; //4位数字
    160. 

  160.     var en_num=/^[A-Za-z0-9]{7}$/;//简体中文英文数字
    161. 

  161.     mui.ready(function(){
    162. 

  162.         mui.ajax(base_path + '/giftCard/card/product/details?dates=' + new Date().getTime(), {
    163. 

  163.             data: {},
    164. 

  164.             dataType: 'json',
    165. 

  165.             type: 'post',
    166. 

  166.             timeout: 15000,
    167. 

  167.             success: function(dt) {
    168. 

  168.                 //console.log(dt);
    169. 

  169.                 if(dt.isRedirect) {
    170. 

  170.                     location.href = dt.redirectURL;
    171. 

  171.                 } else {
    172. 

  172.                     if(dt.returnCode=="200" && dt.resultCode=="200"){
    173. 

  173.                         var table = document.body.querySelector('.ul_radio');
    174. 

  174.                         mui(dt.returnMsg.colors).each(function(index) {
    175. 

  175.                             var li = document.createElement('li');
    176. 

  176.                             if(index==0){
    177. 

  177.                                 li.className ='radio'+this.colorId+' active';
    178. 

  178.                             }else{
    179. 

  179.                                 li.className ='radio'+this.colorId;
    180. 

  180.                             }
    181. 

  181.                             li.setAttribute("id",this.colorId);
    182. 

  182.                             table.appendChild(li);
    183. 

  183.                         });
    184. 

  184.                         //遍历产品颜色单选
    185. 

  185.                         $(".ul_radio li").each(function() {
    186. 

  186.                             $(this).on("tap", function() {
    187. 

  187.                                 $(this).addClass("active");
    188. 

  188.                                 $(this).siblings().removeClass("active");
    189. 

  189.                             });
    190. 

  190.                         });
    191. 

  191. 

  192.                     }else{
    193. 

  193.                         mui.alert(dt.resultMsg);
    194. 

  194.                     }
    195. 

  195.                 }
    196. 

  196.             },
    197. 

  197.             error: function(xhr, type, errorThrown) {
    198. 

  198.                 console.log(xhr)
    199. 

  199.             }
    200. 

  200.         });
    201. 

  201.         document.querySelector('.loading-bg').style.display='none';
    202. 

  202.     });
    203. 

  203.     var address='',nickname='',ads_tel='';
    204. 

  204.     // 获取微信共享地址
    205. 

  205.     mui('body').on('tap', '#open-wechat-addres-a', function() {
    206. 

  206.         editAddrV1(
    207. 

  207.             function(res) {
    208. 

  208.                 // 用户成功拉出地址 
    209. 

  209.                 address = res.provinceName + "-" + res.cityName + "-" + res.countryName + "-" + res.detailInfo;
    210. 

  210.                 nickname=res.userName;
    211. 

  211.                 ads_tel= res.telNumber;
    212. 

  212.                 wechatAddr.status = true;
    213. 

  213.                 wechatAddr.detailInfo = address;
    214. 

  214.                 wechatAddr.postalCode = res.postalCode;
    215. 

  215.                 wechatAddr.userName = res.userName;
    216. 

  216.                 wechatAddr.userTel = res.telNumber;
    217. 

  217.                 wechatAddr.nationalCode = res.nationalCode;
    218. 

  218.                 $("#open-wechat-addres-a").empty().append('<ul class="ft-12" style="color: #333;"><li>收  货  人：'+ wechatAddr.userName +'</li><li>手 机 号：' + wechatAddr.userTel + '</li><li>详细地址：'+ wechatAddr.detailInfo+'</li></ul>');
    219. 

  219.                 $("#btn_submit").removeClass("mui-active").removeAttr('disabled');
    220. 

  220.             },
    221. 

  221.             function() {
    222. 

  222.                 if($('#open-wechat-addres-a').html() != null && $('#open-wechat-addres-a').html() != '') {
    223. 

  223.                     wechatAddr.status = true;
    224. 

  224.                 } else {
    225. 

  225.                     wechatAddr.status = false;
    226. 

  226.                     // 用户取消拉出地址
    227. 

  227.                     $('#open-wechat-addres-a').html('收货地址<span class="mui-h5">请选择收货地址</span>');
    228. 

  228.                     mui.alert("您取消了选择收货地址!");
    229. 

  229.                 }
    230. 

  230.             }
    231. 

  231.         );
    232. 

  232. 

  233.     });
    234. 

  234.     mui('body').on('tap', '#btn_submit', function() {
    235. 

  235.         var th=this;
    236. 

  236.         if(wechatAddr.status){
    237. 

  237.             //开始提交，改变按钮样式并锁定
    238. 

  238.             mui(this).button('loading');
    239. 

  239.             var param = {
    240. 

  240.                 "cardPwd": getParam('cardPwd'),
    241. 

  241.                 "userMachineColorId":$(".ul_radio .active").attr("id") ,
    242. 

  242.                 "userMachineAddressInfo": address,
    243. 

  243.                 "userMachineAddressName": nickname,
    244. 

  244.                 "userMachineAddressTel":ads_tel,
    245. 

  245.             };
    246. 

  246.             $.ajax({
    247. 

  247.                 type: 'post',
    248. 

  248.                 url: base_path+'/giftCard/card/exchange?dates=' + new Date().getTime(),
    249. 

  249.                 data: param,
    250. 

  250.                 dataType: 'json',
    251. 

  251.                 timeout: 15000,
    252. 

  252.                 success: function(dt) {
    253. 

  253.                     //console.log(dt);
    254. 

  254.                     if(dt.resultCode=="200" && dt.returnCode=="200") {
    255. 

  255.                         //成功后跳转页面
    256. 

  256.                         mui.openWindow({url: '/watero/view/gift_card_exchange_details.html?psw='+getParam('cardPwd')})
    257. 

  257.                     } else {
    258. 

  258.                         //失败后还原按钮,并弹出警告
    259. 

  259.                         mui.alert(dt.returnMsg.returnMsg);
    260. 

  260.                         mui(th).button('reset');
    261. 

  261.                     }
    262. 

  262.                 },
    263. 

  263.                 error: function(xhr, type, errorThrown) {
    264. 

  264.                     //异常处理；还原提交按钮，并弹出警告
    265. 

  265.                     console.log(xhr);
    266. 

  266.                     mui.alert("请检查网络或刷新页面重试！");
    267. 

  267.                     mui(th).button('reset');
    268. 

  268.                 }
    269. 

  269.             });
    270. 

  270.         }else{
    271. 

  271.             //文本框值校验未通过，并弹出警告
    272. 

  272.             mui.alert('请选择地址');
    273. 

  273.         }
    274. 

  274.     });
    275. 

  275.     mui('body').on('tap', '#go-gift-details', function() {
    276. 

  276.         var th=this;
    277. 

  277.         mui.openWindow({url: th.getAttribute("href")})
    278. 

  278.     });
    279. 

  279. </script>
    280. 

  280. </body>
    281. 

  281. </html>
    282. 

  282.