activation.html 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519
  1. <!DOCTYPE html>
  2. <html class="">
  3. <!--STATUS OK-->
  4. <head>
  5. <meta name="referrer" content="always" />
  6. <meta charset='utf-8' />
  7. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  8. <meta http-equiv="x-dns-prefetch-control" content="on">
  9. <meta name="description" content="">
  10. <meta name="format-detection" content="telephone=no" />
  11. <link rel="stylesheet" type="text/css" href="css/vant-ui.css" />
  12. <link rel="stylesheet" type="text/css" href="css/iconfont.css">
  13. <link rel="stylesheet" type="text/css" href="css/main.css" />
  14. <link rel="stylesheet" type="text/css" href="css/style.css" />
  15. <script src="js/vue.js"></script>
  16. <script src="js/vant-ui.js"></script>
  17. <script src="js/main.js"></script>
  18. <title></title>
  19. </head>
  20. <style>
  21. #app {
  22. background: linear-gradient(180deg, rgba(0, 160, 234, 1), rgba(0, 95, 163, 1)) !important;
  23. }
  24. .login {
  25. padding-bottom: 0rem;
  26. height: auto;
  27. padding-top: .01rem;
  28. background: none;
  29. }
  30. .login .loginFix {
  31. position: absolute;
  32. }
  33. .login .loginBox {
  34. width: 90%;
  35. height: auto;
  36. padding: 10px;
  37. padding-bottom: 1rem;
  38. }
  39. .pull-right {
  40. width: .15rem !important;
  41. height: .3rem !important;
  42. }
  43. .brandList {
  44. display: flex;
  45. width: 100%;
  46. flex-wrap: wrap;
  47. margin-top: .8rem;
  48. }
  49. .brandList .brandItem,
  50. .brandList .choose {
  51. width: 40%;
  52. margin: .1rem .3rem;
  53. }
  54. .brandItem {
  55. height: .6rem;
  56. }
  57. .anniu {
  58. width: 90%;
  59. height: .86rem;
  60. background-color: #00a0ea;
  61. border-radius: 5rem;
  62. color: #fff;
  63. font-size: .31rem;
  64. margin-top: .5rem;
  65. display: flex;
  66. justify-content: center;
  67. align-items: center;
  68. }
  69. .getCodeBtn {
  70. width: 150px;
  71. background-color: #00a0ea;
  72. padding: 5px;
  73. color: #fff;
  74. border-radius: 8px 5px;
  75. text-align: center;
  76. }
  77. .dontSend {
  78. background-color: #ccc !important;
  79. color: #999 !important;
  80. }
  81. .hasClick {
  82. border: 1px solid#ccc;
  83. padding: 0.05rem;
  84. }
  85. .noclick {
  86. padding: 0.05rem;
  87. }
  88. </style>
  89. <body>
  90. <div id="app" style="overflow-y: scroll" v-cloak>
  91. <div class="login" id="aui-header">
  92. <div class="loginBox">
  93. <div class="labelTitle flex a-center" style="margin-top: 0.3rem;">
  94. <b class="i2"></b> 选择地址
  95. </div>
  96. <div class="labelValue flex a-center">
  97. <input placeholder="点击选择地区" v-model="userDistrct" readonly="readonly" v-on:click="goMap" />
  98. </div>
  99. <div class="labelTitle flex a-center" style="margin-top: 0.3rem;">
  100. <b class="i2"></b> 详细地址
  101. </div>
  102. <div class="labelValue flex a-center">
  103. <input placeholder="请输入详细地址" v-model="userAddress" readonly="readonly" v-on:click="goMap" />
  104. </div>
  105. </div>
  106. <!-- 合作经销商 -->
  107. <div class="login">
  108. <div class="loginBox">
  109. <div class="labelTitle flex a-center" style="margin-top: 0;">
  110. <b class="i1"></b> 合作供应商
  111. </div>
  112. <div class="labelValue flex a-center">
  113. <input placeholder="请选择合作经销商" readonly="readonly" v-on:click="choosePosterM"
  114. v-model="choosePoster.name" />
  115. <img src="./image/009.png" class="pull-right" />
  116. </div>
  117. <div class="labelValue flex a-center">
  118. <input placeholder="请选择签约任务" readonly="readonly" v-model="chooseLv.name"
  119. v-on:click="choosesignLv" />
  120. <img src="./image/009.png" class="pull-right" />
  121. </div>
  122. <div class="biaoti" style="margin-top: 0.4rem;"><img src="image/xiantiao.png" alt=""><span
  123. style="margin-top: -0.175rem">合作品牌</span><img src="image/xiantiao1.png" alt="">
  124. </div>
  125. <div class="brandList">
  126. <img v-for="(brand,index) in choosePoster.meberArr" class="brandItem" :src="brand.url" alt=""
  127. v-bind:class="chooseBrands == index ? 'hasClick' : 'noclick'"
  128. v-on:click="chooseBrand(index)">
  129. <!--<img class="brandItem" src="image/015.png" alt="">
  130. <img class="brandItem" src="image/016.png" alt="">
  131. <img class="brandItem" src="image/017.png" alt="">-->
  132. </div>
  133. </div>
  134. </div>
  135. </div>
  136. <div class="login">
  137. <div class="loginBox">
  138. <div class="flex a-center checkedXieyi" style="padding-left:0.3rem">
  139. <van-checkbox v-model="xyChecked">
  140. </van-checkbox>
  141. <p style="margin-left:5px" v-on:click="lookPdf(0)">同意用户协议</p>
  142. </div>
  143. <div class="flex a-center checkedXieyi" style="padding-left:0.3rem">
  144. <van-checkbox v-model="zcChecked">
  145. </van-checkbox>
  146. <p style="margin-left:5px" v-on:click="lookPdf(1)">同意隐私政策</p>
  147. </div>
  148. <div style="display: flex;justify-content: center;">
  149. <div class="anniu" v-if="inclick" v-on:click="startRegizeUser">
  150. <div>
  151. 提交解冻
  152. </div>
  153. </div>
  154. <div class="anniu" v-if="!inclick" style="background:#ccc">
  155. <div>
  156. 提交解冻
  157. </div>
  158. </div>
  159. </div>
  160. </div>
  161. </div>
  162. </div>
  163. </div>
  164. </body>
  165. <script type="text/javascript" src="../script/aui_compress.min.js"></script>
  166. <script type="text/javascript" src="../script/jquery-1.11.0.min.js"></script>
  167. <script type="text/javascript" src="../script/api.js"></script>
  168. <script type="text/javascript" src="../script/httpRequest.js"></script>
  169. <script type="text/javascript" src="../script/vue_plugins.js"></script>
  170. <script type="text/javascript">
  171. var vm;
  172. apiready = function () {
  173. vm = new Vue({
  174. el: '#app',
  175. data: {
  176. // 选择省市区
  177. UIActionSelector: '',
  178. map: '', // 百度地图SDK
  179. // 选择省市区的文件
  180. file: 'widget://res/city.json',
  181. userDistrct: '', // 点击选择地址
  182. userAddress: '', // 用户地址
  183. distrctArr: [], // 保存的地址
  184. userLat: '', // 纬度
  185. userLon: '', // 经度
  186. posterList: [], // 经销商列表
  187. choosePoster: {}, // 选择的经销商
  188. chooseLv: {
  189. name: '点击选择签约任务'
  190. }, // 签约任务
  191. signList: [], // 签约任务lsit
  192. wait: 60,
  193. chooseBrands: 100, // 选择的品牌
  194. xyChecked: false,
  195. zcChecked: false,
  196. ptfurl0: 'widget://res/xy.pdf',
  197. ptfurl1: 'widget://res/zc.pdf',
  198. pdfReader: '',
  199. urldata1: '',
  200. urldata2: '',
  201. inclick: true,
  202. tishi1: 0,
  203. tishi2: 0,
  204. storeId: ''
  205. },
  206. methods: {
  207. getBrandNum: function (index) {
  208. return this.chooseBrands.indexOf(index) >= 0;
  209. },
  210. // 初始化数据
  211. init: function () {
  212. var _this = this;
  213. this.pdfReader = api.require('pdfReader');
  214. this.UIActionSelector = api.require('UIActionSelector');
  215. this.map = api.require('bMap');
  216. if (api.systemType == 'ios') {
  217. this.map.initMapSDK(function (ret) {
  218. if (ret.status) { }
  219. });
  220. }
  221. this.getSignLv();
  222. this.addEvent('chooseDistict', function (ret) {
  223. if (ret) {
  224. _this.userDistrct = ret.value.p + ret.value.c + ret.value.d;
  225. _this.distrctArr = [ret.value.p, ret.value.c, ret.value.d];
  226. _this.userAddress = ret.value.a;
  227. _this.userLat = ret.value.lat;
  228. _this.userlon = ret.value.lon;
  229. }
  230. _this.getPosterByDistrict();
  231. api.closeWin({
  232. name: 'map_win'
  233. });
  234. })
  235. this.storeId = $api.getStorage('userid');
  236. },
  237. // 点击获取用户地址
  238. getUserDistrict: function () {
  239. var _this = this;
  240. this.chooseRegion(this.UIActionSelector, 3, this.file, function (ret) {
  241. if (ret.eventType == 'ok') {
  242. _this.userDistrct = ret.level1 + ' ' + ret.level2 + ' ' + ret.level3;
  243. _this.distrctArr = [ret.level1, ret.level2, ret.level3];
  244. _this.getPosterByDistrict();
  245. }
  246. })
  247. },
  248. // 根据地理位置获取经纬度
  249. getLatLotByAddress: function (c) {
  250. var _this = this;
  251. this.map.getCoordsFromName({
  252. city: this.distrctArr[0],
  253. address: this.userAddress
  254. }, function (ret, err) {
  255. if (ret.status) {
  256. _this.userLat = ret.lat;
  257. _this.userlon = ret.lon;
  258. c(true);
  259. } else {
  260. c(false);
  261. }
  262. });
  263. },
  264. goMap: function () {
  265. this.goWin('map_win', 'map_win.html', {
  266. d: this.distrctArr[2]
  267. });
  268. },
  269. // 根据用户选择的省市区获取对应的经销商和品牌
  270. getPosterByDistrict: function () {
  271. var data = {
  272. "province": this.distrctArr[0],
  273. "city": this.distrctArr[1],
  274. "area": this.distrctArr[2],
  275. url: 'json',
  276. type: 'body'
  277. },
  278. _this = this;
  279. this.choosePoster = {};
  280. this.$post('getUpuserByProvideUrl', data, function (ret) {
  281. if (ret.code == 0 || ret.code == '0') {
  282. // 对数据进行处理
  283. ret.Data.data.map(function (meber, index) {
  284. var meberArr = new Array();
  285. meber.regionBrandList.map(function (brand, brandIndex) {
  286. if (meber.brandAndUrl != null) {
  287. var url = eval('meber.brandAndUrl.' + brand);
  288. meberArr.push({
  289. name: brand,
  290. url: url
  291. })
  292. } else {
  293. meberArr.push({
  294. name: brand,
  295. url: './image/logo1.png'
  296. })
  297. }
  298. })
  299. meber.meberArr = meberArr
  300. })
  301. _this.posterList = ret.Data.data;
  302. }
  303. })
  304. },
  305. // 获取签约级别
  306. getSignLv: function () {
  307. var url = "getSignLvU",
  308. _this = this;
  309. this.$post(url, {
  310. url: "json",
  311. type: 'body'
  312. }, function (ret) {
  313. if (ret.code == 0 || ret.code == '0') {
  314. ret.date.map(function (n, index) {
  315. n.name = n.signLv;
  316. })
  317. _this.signList = ret.date;
  318. }
  319. })
  320. },
  321. // 选择签约级别
  322. choosesignLv: function () {
  323. var _this = this;
  324. this.chooseRegion(this.UIActionSelector, 1, this.signList, function (ret) {
  325. if (ret.eventType == 'ok') {
  326. _this.chooseLv = ret.selectedInfo[0];
  327. }
  328. })
  329. },
  330. // 选择合作经销商
  331. choosePosterM: function () {
  332. var data = this.posterList,
  333. _this = this;
  334. if (data.length == 0) {
  335. api.toast({
  336. msg: '该地区暂未维护经销商'
  337. });
  338. return;
  339. }
  340. this.chooseRegion(this.UIActionSelector, 1, data, function (ret) {
  341. if (ret.eventType == 'ok') {
  342. _this.choosePoster = ret.selectedInfo[0];
  343. if (_this.choosePoster.meberArr.length == 1) {
  344. _this.chooseBrands = 0;
  345. } else {
  346. _this.chooseBrands = 100;
  347. }
  348. }
  349. })
  350. },
  351. // 选择品牌
  352. chooseBrand: function (index) {
  353. this.chooseBrands = index;
  354. },
  355. // 使用搞得api获取经纬度
  356. getLocationByAmap: function (c) {
  357. var url = "http://restapi.amap.com/v3/geocode/geo?key=389880a06e3f893ea46036f030c94700&s=rsv3&city=35&address=" + this.distrctArr[0] + this.distrctArr[1] + this.distrctArr[2] + this.userAddress;
  358. console.log(url);
  359. var _this = this;
  360. api.ajax({
  361. url: url,
  362. method: 'get',
  363. data: ''
  364. }, function (ret, err) {
  365. if (ret) {
  366. if (ret.status == 1 || ret.status == '1') {
  367. if (ret.geocodes[0].location.indexOf(',') >= 0) {
  368. var latlon = ret.geocodes[0].location.split(',');
  369. _this.userlon = latlon[0];
  370. _this.userLat = latlon[1];
  371. c(true);
  372. } else {
  373. c(false)
  374. }
  375. } else {
  376. c(false)
  377. }
  378. } else {
  379. c(false)
  380. }
  381. });
  382. },
  383. // 点击注册提交
  384. startRegizeUser: function () {
  385. var _this = this;
  386. if (_this.distrctArr.length == 0) {
  387. api.toast({
  388. msg: '请完善地址'
  389. });
  390. return;
  391. }
  392. if (_this.userAddress == '') {
  393. api.toast({
  394. msg: '请完善详细地址'
  395. });
  396. return;
  397. }
  398. if (_this.choosePoster.name == '') {
  399. api.toast({
  400. msg: '请完善合作供应商'
  401. });
  402. return;
  403. }
  404. if (_this.chooseLv.name == '点击选择签约任务') {
  405. api.toast({
  406. msg: '请完善签约等级'
  407. });
  408. return;
  409. }
  410. if (_this.chooseBrands == 100) {
  411. api.toast({
  412. msg: '请选择轮胎品牌'
  413. });
  414. return;
  415. }
  416. if (this.xyChecked == false) {
  417. api.toast({
  418. msg: '请勾选同意用户协议',
  419. });
  420. return;
  421. }
  422. if (this.zcChecked == false) {
  423. api.toast({
  424. msg: '请勾选同意隐私政策',
  425. });
  426. return;
  427. }
  428. if (_this.userName == '无' && _this.tishi1 == 0) {
  429. api.alert({
  430. title: '温馨提示',
  431. msg: '请正确输入门店名称',
  432. }, function (ret, err) {
  433. _this.tishi1 = 1
  434. });
  435. return;
  436. }
  437. if (_this.userPerson == '无' && _this.tishi2 == 0) {
  438. api.alert({
  439. title: '温馨提示',
  440. msg: '请正确输入联系人',
  441. }, function (ret, err) {
  442. _this.tishi2 = 1
  443. });
  444. return;
  445. }
  446. var data = {
  447. "storeId": this.storeId,
  448. "brand": _this.choosePoster.meberArr[_this.chooseBrands].name,
  449. "kunnr": _this.choosePoster.kunnr,
  450. "agentName":_this.choosePoster.name,
  451. "signLv": _this.chooseLv.name,
  452. "numTask": _this.chooseLv.numTask,
  453. "province": _this.distrctArr[0],
  454. "city": _this.distrctArr[1],
  455. "district": _this.distrctArr[2],
  456. "addressInfo": _this.userAddress,
  457. "jd": _this.userlon,
  458. "wd": _this.userLat,
  459. "url": 'json',
  460. "type": 'body'
  461. }
  462. _this.inclick = false;
  463. _this.$post("storeUnfreezeProposer", data, function (ret) {
  464. if (ret.code == 0 || ret.code == "0") {
  465. setTimeout(_this.showAlert("已成功提交,请等待经销商审核", function () {
  466. api.closeWin({});
  467. }), 5000);
  468. }
  469. })
  470. },
  471. // 查看pdf
  472. lookPdf: function (index) {
  473. this.pdfReader.open({
  474. path: index == 0 ? this.ptfurl0 : this.ptfurl1,
  475. hidden: {
  476. print: true,
  477. export: true,
  478. bookmark: true,
  479. email: true
  480. },
  481. backBtn: {
  482. size: { //JSON对象;左上角按钮的大小配置
  483. w: 20, //数字类型;左上角按钮的宽;默认:60
  484. h: 20 //数字类型;左上角按钮的高;默认:40
  485. },
  486. title: { //JSON对象;按钮标题配置
  487. text: "返回", //字符串类型;标题文本;默认:‘’
  488. },
  489. corner: 5 //数字类型;左上角按钮圆角大小;默认值:5.0
  490. }
  491. });
  492. }
  493. },
  494. filters: {},
  495. mounted: function () {
  496. this.init();
  497. }
  498. })
  499. }
  500. </script>
  501. </html>