main.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>生活服务</title>
  6. <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
  7. <meta content="yes" name="apple-mobile-web-app-capable"/>
  8. <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
  9. <meta content="telephone=no" name="format-detection"/>
  10. <link href="../css/style.css" rel="stylesheet" type="text/css"/>
  11. <link href="../css/html.css" rel="stylesheet" type="text/css"/>
  12. <link href="../css/element-ui.css" rel="stylesheet" type="text/css"/>
  13. <link rel="stylesheet" type="text/css" href="../css/aui-slide.css" />
  14. <link href="../css/vueBox.css" rel="stylesheet" type="text/css"/>
  15. <!--<script type="text/javascript" src="../script/jquery.min.js"></script>-->
  16. <!--<script type="text/javascript" src="../script/slider.js"></script>-->
  17. <style>
  18. .aui-voice {
  19. width: 40px;
  20. height: 40px;
  21. margin-top: -10px;
  22. }
  23. .marquee_box {
  24. width: 75%;
  25. }
  26. [v-cloak] {
  27. display: none
  28. }
  29. .aui-slide-page-line {
  30. height: 2px !important;
  31. }
  32. .aui-slide-node img {
  33. height: 180px !important;
  34. }
  35. .bannerImg {
  36. width: 100%;
  37. height: 190px;
  38. }
  39. </style>
  40. </head>
  41. <body>
  42. <section class="aui-flexView" id="app">
  43. <div class="zmq-header" style="display: none">
  44. <div class="zmq-flex">
  45. <img class="zmq-logo-img" src="../image/drawable-xhdpi/logo12.png" />
  46. <div class="zmq-header-search">
  47. <img src="../image/drawable-xhdpi/search.png" class="zmq-search-img"/>找订单,查库存
  48. </div>
  49. </div>
  50. </div>
  51. <section class="aui-scrollView">
  52. <div class="zmq-card">
  53. <!--<div class="m-slider" data-ydui-slider>
  54. <div class="slider-wrapper">
  55. <div class="slider-item">
  56. <a href="javascript:;"> <img src="../image/drawable-xhdpi/banner.png"> </a>
  57. </div>
  58. <div class="slider-item">
  59. <a href="javascript:;"> <img src="../image/drawable-xhdpi/banner.png"> </a>
  60. </div>
  61. <div class="slider-item">
  62. <a href="javascript:;"> <img src="../image/drawable-xhdpi/banner.png"> </a>
  63. </div>
  64. </div>
  65. <div class="slider-pagination"></div>
  66. </div>-->
  67. <div id="aui-slide3">
  68. <el-carousel ref = "carousel" trigger="click" arrow="always" height="190px" v-on:change="onChange">
  69. <el-carousel-item v-for="(b,i) in bannerList" :key="i">
  70. <img class="bannerImg" v-lazy= "b.imgPath" v-on:click="lookBanner(b.linkId)"/>
  71. </el-carousel-item>
  72. </el-carousel>
  73. </div>
  74. <!--<div id="aui-slide3">
  75. <el-carousel trigger="click" arrow="always" height="190px">
  76. <el-carousel-item >
  77. <img class="bannerImg" src= "../image/drawable-xhdpi/banner.png" />
  78. </el-carousel-item>
  79. </el-carousel>
  80. </div>-->
  81. <!-- 公告啦 -->
  82. <div class="vueBox" style="margin-top: -2px;">
  83. <div class="marquee">
  84. <div class="marquee_title">
  85. <span><img class="aui-voice" src="../image/news.png"></span>
  86. </div>
  87. <div class="marquee_box" v-cloak>
  88. <ul class="marquee_list" :class="{marquee_top:animate}">
  89. <li style="font-size: 12px;" class="zmq-line-1" v-for="(item, index) in marqueeList" v-on:click="goInfo(item)">
  90. {{item.title}}
  91. </li>
  92. </ul>
  93. </div>
  94. </div>
  95. </div>
  96. <div class="aui-grids">
  97. <a href="javascript:;" class="aui-grids-item" onclick="goWin('storeList1_win')">
  98. <div class="aui-grids-item-icon">
  99. <img src="../image/drawable-xhdpi/icon01.png" alt="">
  100. </div>
  101. <div class="aui-grids-item-text">
  102. 采购下单
  103. </div> </a>
  104. <a href="javascript:;" class="aui-grids-item" onclick="goWin('kucunjjs_win')">
  105. <div class="aui-grids-item-icon">
  106. <img src="../image/drawable-xhdpi/icon02.png" alt="">
  107. </div>
  108. <div class="aui-grids-item-text">
  109. 云端查货
  110. </div> </a>
  111. <a href="javascript:;" class="aui-grids-item" onclick="goWin('orderList_win')">
  112. <div class="aui-grids-item-icon">
  113. <img src="../image/drawable-xhdpi/icon03.png" alt="">
  114. </div>
  115. <div class="aui-grids-item-text">
  116. 订单管理
  117. </div> </a>
  118. <a href="javascript:;" class="aui-grids-item" onclick="goWin('orderCar_win')">
  119. <div class="aui-grids-item-icon">
  120. <div class="aui-badge">
  121. {{carNum}}
  122. </div>
  123. <img src="../image/drawable-xhdpi/icon04.png" alt="">
  124. </div>
  125. <div class="aui-grids-item-text">
  126. 订单维护
  127. </div> </a>
  128. </div>
  129. </div>
  130. <div class="zmq-card zmq-margin-top-10 zmq-padding-top-10">
  131. <div class="aui-list-cell">
  132. <a href="javascript:;" class="aui-list-cell-item">
  133. <div class="aui-list-cell-item-info aui-list-cell-item-img" v-on:click="scan1(0)">
  134. <h2 class="zmq-btn-title"><img class="zmq-btn-img" src="../image/drawable-xhdpi/scanIcon.png" />扫码入库</h2>
  135. <span class="zmq-btn-msg"> <em>扫码入库,赚取积分,兑换商品</em></span>
  136. </div> </a>
  137. <a href="javascript:;" class="aui-list-cell-item">
  138. <div class="aui-list-cell-item-info aui-list-cell-item-info-one" v-on:click="scan1(1)">
  139. <h2 class="zmq-btn-title"><img class="zmq-btn-img" src="../image/drawable-xhdpi/scanList.png" />扫码销售</h2>
  140. <!--<h2 class="zmq-btn-title"><img class="zmq-btn-img" src="../image/drawable-xhdpi/scanin.png" />进销存</h2>-->
  141. <!--<span class="zmq-btn-msg-1"><em>进销存</em></span>-->
  142. </div>
  143. <div class="aui-list-cell-item-info aui-list-cell-item-info-two" onclick="goWin('handKucun_win')">
  144. <!--<h2>扫码明细</h2>-->
  145. <h2 class="zmq-btn-title"><img class="zmq-btn-img" src="../image/drawable-xhdpi/scanin.png" />店面库存</h2>
  146. <!--<span class="zmq-btn-msg-1"></span>-->
  147. </div> </a>
  148. </div>
  149. </div>
  150. <!-- 车友俱乐部 -->
  151. <div class="zmq-card zmq-margin-top-10 zmq-padding-top-10" v-on:click="lookJF">
  152. <img class="zmq-width-90" src="../image/banner4.png">
  153. <span class="zmq-btn-msg zmq-btn-bottom"> <em>零售商俱乐部</em></span>
  154. </div>
  155. </section>
  156. <!-- 手工录入 -->
  157. </section>
  158. </body>
  159. <script type="text/javascript" src="../script/api.js"></script>
  160. <script type="text/javascript" src="../script/vue.js"></script>
  161. <script type="text/javascript" src="../script/jquery.min.js"></script>
  162. <!--<script type="text/javascript" src="../script/elememt-ui.js"></script>-->
  163. <script type="text/javascript" src="https://unpkg.com/element-ui@2.0.11/lib/index.js"></script>
  164. <script type="text/javascript" src="../script/vue-lazyload.js"></script>
  165. <script type="text/javascript" src="../script/httpRequest.js"></script>
  166. <script type="text/javascript" src="../script/vue_plugins.js"></script>
  167. <script type="text/javascript">
  168. apiready = function() {
  169. api.showProgress({
  170. });
  171. new Vue({
  172. el : '#app',
  173. data : {
  174. // 用户id
  175. retailerId : '',
  176. // 购物车数量
  177. carNum : '',
  178. reid : '',
  179. // 扫码
  180. FNScanner : '',
  181. xwScanner : '',
  182. // 入库扫码
  183. getStoreUrl0705 : 'addOrgoScanUrl',
  184. // 出库扫码
  185. outStoreUrl : 'outScanUrl',
  186. // 获取新闻
  187. getNewsUrl : 'getNews',
  188. // 新闻
  189. animate : false,
  190. marqueeList : [],
  191. // 获取banner
  192. bannerUrl : 'getBannerUrl',
  193. bannerList : [],
  194. carouselPlay : "",
  195. orc : '', // 百度orc的接口
  196. xwScanner : '',
  197. },
  198. methods : {
  199. init : function() {
  200. var _this = this;
  201. this.xwScanner = api.require('xwScanner');
  202. this.FNScanner = api.require('FNScanner');
  203. this.orc = api.require('baiduOCRRecognizer');
  204. this.retailerId = $api.getStorage("retailerid");
  205. this.getNews();
  206. this.getBanner();
  207. this.getUserInfo(function(ret) {
  208. if ( typeof ret.retailerDto == 'undefined' || ret.retailerDto == null) {
  209. _this.showAlert("系统检测您账户信息出现异常,请重新完善。", function() {
  210. // TODO 完善信息
  211. })
  212. } else {
  213. _this.reid = ret.retailerDto.id;
  214. _this.getCarNum(ret.retailerDto.id, function(num) {
  215. _this.carNum = num.length;
  216. })
  217. }
  218. });
  219. this.addEvent("openFrameGroup", function() {
  220. _this.getUserInfo(function(ret) {
  221. _this.getCarNum(ret.retailerDto.id, function(num) {
  222. _this.carNum = num.length;
  223. })
  224. });
  225. _this.getNews();
  226. _this.getBanner();
  227. })
  228. // 刷新购物车数量
  229. this.addEvent("refushCar", function() {
  230. _this.getCarNum(_this.reid, function(num) {
  231. _this.carNum = num.length;
  232. })
  233. })
  234. // 配置下拉刷新
  235. this.configHeaderRefush(function() {
  236. _this.getUserInfo(function(ret) {
  237. _this.getCarNum(ret.retailerDto.id, function(num) {
  238. _this.carNum = num.length;
  239. })
  240. });
  241. _this.getNews();
  242. _this.getBanner();
  243. })
  244. },
  245. // 获取banner列表
  246. getBanner : function() {
  247. var _this = this;
  248. var data = {
  249. retailer_id : _this.retailerId,
  250. url : 'json',
  251. type : 'body'
  252. };
  253. this.$post(this.bannerUrl, data, function(ret) {
  254. if (ret.code == 0) {
  255. _this.bannerList = ret.list;
  256. }
  257. })
  258. },
  259. // 点击banner查看详情
  260. lookBanner : function(id) {
  261. var page = {
  262. id : id
  263. }
  264. this.goWin("banner_win", "./order/banner_win.html", page);
  265. },
  266. // 展示公告 -- 获取公告
  267. showMarquee : function() {
  268. var _this = this;
  269. this.animate = true;
  270. setTimeout(function() {
  271. _this.marqueeList.push(_this.marqueeList[0]);
  272. _this.marqueeList.shift();
  273. _this.animate = false;
  274. }, 500)
  275. },
  276. // 跳转新闻列表
  277. goInfo : function(news) {
  278. var page = {
  279. n : JSON.stringify(news)
  280. }
  281. this.goWin("news_win", "./order/news_win.html", page);
  282. },
  283. // 获取新闻
  284. getNews : function() {
  285. var data = {
  286. }, _this = this;
  287. this.$post(this.getNewsUrl, "", function(ret) {
  288. if (ret.code == 0) {
  289. _this.marqueeList = ret.page.records;
  290. if (_this.marqueeList.length > 2) {
  291. setInterval(_this.showMarquee, 2000);
  292. }
  293. }
  294. })
  295. },
  296. // 百度
  297. scan1 : function(type) {
  298. var _this = this;
  299. api.actionSheet({
  300. title : '请选择途径',
  301. cancelTitle : '取消',
  302. buttons : ['自动扫码', '图片识别', '人工录入']
  303. }, function(ret, err) {
  304. var index = ret.buttonIndex;
  305. if (index == 1) {// 自动扫码
  306. _this.scan12(type)
  307. } else if (index == 2) {
  308. _this.scan_orc(type)
  309. } else if (index == 3) {
  310. // 手动录入
  311. api.prompt({
  312. buttons : ['确定']
  313. }, function(ret, err) {
  314. var index = ret.buttonIndex;
  315. var text = ret.text;
  316. });
  317. }
  318. });
  319. },
  320. // orc
  321. scan_orc : function(type) {
  322. var _this = this;
  323. api.getPicture({
  324. sourceType : 'album',
  325. encodingType : 'jpg',
  326. mediaValue : 'pic',
  327. destinationType : 'url',
  328. allowEdit : true,
  329. quality : 100,
  330. saveToPhotoAlbum : false
  331. }, function(ret, err) {
  332. if (ret) {
  333. url = ret.data;
  334. api.showProgress({
  335. msg : '正在识别中'
  336. });
  337. _this.orc.init({
  338. appKey : 'l4VgvxAuSPAHWtiHicMh9HEq',
  339. appSecret : 'zO8cF7Nq4hmcpnIlwlYCyMHSBQecOQUI',
  340. }, function(ret) {
  341. });
  342. _this.orc.recognizeAccurateBasic({
  343. // path:'widget://image/text.png',
  344. path : url,
  345. DetectDirection : true,
  346. }, function(ret, err) {
  347. api.hideProgress();
  348. api.alert({
  349. msg : JSON.stringify(ret)
  350. });
  351. });
  352. }
  353. })
  354. },
  355. // 扫码
  356. scan12 : function(type) {
  357. var _this = this;
  358. var url = type == 0 ? this.getStoreUrl0705 : this.outStoreUrl;
  359. this.scan(this.FNScanner, function(ret) {
  360. return;
  361. var data = {
  362. serialNumber : ret,
  363. retailerId : _this.retailerId,
  364. url : 'json',
  365. type : 'body'
  366. }
  367. _this.$post(url, data, function(retMsg) {
  368. if (retMsg.code == 0) {
  369. var page = {
  370. content : ret,
  371. type : type,
  372. i : 'scan'
  373. }
  374. goWin("orderPlace_win", page);
  375. } else {
  376. if (type == 0) {
  377. // 入库
  378. _this.showModal("未完善该商品", "系统检测到该码对应的商品不存在系统中,是否要完善该物料商品?", ["确认", "取消"], function(index) {
  379. if (index == 1) {
  380. var option = {
  381. msg : ret,
  382. }
  383. goWin("orderScan_win.html", option);
  384. }
  385. })
  386. }
  387. }
  388. });
  389. })
  390. },
  391. lookJF : function() {
  392. this.goWin('jifen_win', './order/jifen_win.html', '');
  393. },
  394. onChange : function() {
  395. // 触发了这个事件以后,让他手动加载
  396. if (this.carouselPlay != "") {
  397. clearInterval(this.carouselPlay);
  398. }
  399. var _this = this;
  400. this.carouselPlay = setInterval(function() {// 手动计时器解决移动端autoplay失效的问题
  401. _this.$refs.carousel.next();
  402. }, 3000);
  403. }
  404. },
  405. mounted : function() {
  406. this.init();
  407. Vue.use(VueLazyload, {
  408. preLoad : 1.0,
  409. error : '../image/noimg.png',
  410. loading : '../image/page.gif',
  411. attempt : 3,
  412. });
  413. }
  414. })
  415. }
  416. function goWin(winName, page) {
  417. api.openWin({
  418. name : winName,
  419. url : './order/' + winName + '.html',
  420. pageParam : page
  421. });
  422. }
  423. function gg() {
  424. api.openWin({
  425. name : 'jjs',
  426. url : '../jjs/index.html'
  427. });
  428. }
  429. </script>
  430. </html>