integral_index.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
  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/api.css" />
  12. <link rel="stylesheet" type="text/css" href="../css/aui-win.css" />
  13. <link rel="stylesheet" type="text/css" href="css/vant-ui.css" />
  14. <link rel="stylesheet" type="text/css" href="css/iconfont.css">
  15. <link rel="stylesheet" type="text/css" href="css/main.css" />
  16. <script type="text/javascript" src="../script/aui-tab.js"></script>
  17. <script src="js/vue.js"></script>
  18. <script src="js/vant-ui.js"></script>
  19. <script src="js/main.js"></script>
  20. <title></title>
  21. </head>
  22. <style>
  23. .card-main {
  24. position: relative;
  25. top: -3.5rem;
  26. height: 100%
  27. }
  28. .card {
  29. display: flex;
  30. justify-content: center;
  31. height: 100%
  32. }
  33. .card-left {
  34. background-color: #EBEBEB;
  35. width: 1.5rem;
  36. border-top-left-radius: .3rem;
  37. }
  38. .type-list {
  39. padding: .1rem 0;
  40. font-size: .3rem;
  41. display: flex;
  42. justify-content: center;
  43. color: #333333;
  44. }
  45. .type-active {
  46. background-color: #fff;
  47. }
  48. .card-right {
  49. background-color: #fff;
  50. border-top-right-radius: .3rem;
  51. width: 5.5rem;
  52. }
  53. .shop-list {
  54. display: flex;
  55. padding: .2rem .15rem;
  56. }
  57. /*.shop-img {
  58. width: 1.5rem;
  59. height: 1.5rem;
  60. background-color: #000
  61. }*/
  62. .shop-list-right {
  63. display: flex;
  64. flex-direction: column;
  65. width: 3.4rem;
  66. justify-content: space-between;
  67. padding-left: .1rem;
  68. }
  69. .shop-title {
  70. display: flex;
  71. color: #333333;
  72. }
  73. .shop-title-p {
  74. font-size: .28rem;
  75. display: -webkit-box;
  76. -webkit-box-orient: vertical;
  77. -webkit-line-clamp: 2;
  78. overflow: hidden;
  79. width: 3.4rem;
  80. }
  81. .shop-integral {
  82. display: flex;
  83. align-items: flex-end;
  84. }
  85. .shop-integral-left {
  86. font-size: .25rem;
  87. width: 1.4rem;
  88. color: #666666;
  89. }
  90. .shop-integral-right {
  91. font-size: .25rem;
  92. color: #333333;
  93. }
  94. .shop-add {
  95. display: flex;
  96. align-items: flex-end;
  97. justify-content: space-between;
  98. }
  99. .shop-add-right {
  100. font-size: .25rem;
  101. color: #fff;
  102. background-color: #0098E2;
  103. padding: .05rem .1rem;
  104. border-radius: .1rem;
  105. }
  106. [v-cloak] {
  107. display: none;
  108. }
  109. </style>
  110. <body>
  111. <div id="app" style="background-color:#F5F5F5">
  112. <header class="aui-bar aui-bar-nav aui-bar-info" id="aui-header">
  113. <div>
  114. <a class="aui-btn aui-btn-info aui-pull-left" tapmode onclick="closeWin()"> <span
  115. class="aui-iconfont aui-icon-left"></span> </a>
  116. <div class="aui-title" id="aui-title">
  117. 积分商城
  118. </div>
  119. <a class="aui-btn aui-btn-info aui-pull-right" tapmode v-on:click="inSearchPage()"> <span
  120. class="aui-iconfont aui-icon-search"></span> </a>
  121. </div>
  122. </header>
  123. <div class="banner">
  124. </div>
  125. <div class="card-main">
  126. <div class="card">
  127. <div class="card-left" style="height:90%;overflow-y:scroll;padding-bottom:1rem;" v-cloak>
  128. <div v-bind:class="index==activeId?'type-active':''" class="type-list"
  129. v-for="(item,index) in typeList" :key="index" v-on:click="getId(item,index);getshopLists(item)">
  130. {{item.categoryName}}
  131. </div>
  132. </div>
  133. <div class="card-right" style="height:90%;overflow-y:scroll;padding-bottom:1rem;" v-cloak>
  134. <div style="display:flex;align-items:flex-end;margin:.1rem 0 0 .1rem" v-if="this.activeId==0">
  135. <div style="font-weight:800;margin-left:.1rem">
  136. 热销
  137. </div>
  138. <div style="font-size:.25rem;color:#7C7C7C;padding-bottom:.03rem;margin-left:.1rem">
  139. 大家都换,才是真的好用
  140. </div>
  141. </div>
  142. <div v-if="shopList.length!=0">
  143. <div class="shop-list" v-for="(list,index) in shopList" :key="index">
  144. <div class="shop-img" v-on:click="inDetails(list)">
  145. <img v-if="list.productImage==null" src="img/nothing.png"
  146. style="width:1.8rem;height:1.8rem">
  147. <img v-else :src="list.productImage" style="width:1.8rem;height:1.8rem">
  148. </div>
  149. <div class="shop-list-right">
  150. <div v-on:click="inDetails(list)">
  151. <div class="shop-title">
  152. <p class="shop-title-p">{{list.productName}}</p>
  153. </div>
  154. </div>
  155. <div class="shop-add">
  156. <div class="shop-add-left">
  157. <div style="color:#333333;font-size:.25rem;">
  158. 剩余库存:{{list.productQtyStock}}
  159. </div>
  160. <div style="color:#FF0000;font-size:.25rem;margin-top:.1rem">
  161. {{list.productPrice}}积分
  162. </div>
  163. <!-- <van-stepper v-model="list.defaultCount" input-width=".6rem" button-size=".4rem" integer min="1" max="999" v-on:change="inputNum(list)" /> -->
  164. <!-- <div class="but-sub" v-on:click="subQuantity(list)">-</div>
  165. <input type="number" v-model="list.defaultCount" v-on:input="inputNum(list)" v-on:Blur="outBlur(list)">
  166. <div class="but-add" v-on:click="addQuantity(list)">+</div> -->
  167. </div>
  168. <div class="shop-add-right" v-on:click="addShopCart(list)">
  169. 加入购物车
  170. </div>
  171. </div>
  172. </div>
  173. </div>
  174. </div>
  175. <div v-else style="display:flex;justify-content:center;color:#ccc;padding-top:1.5rem">
  176. 暂无商品
  177. </div>
  178. </div>
  179. </div>
  180. </div>
  181. </div>
  182. </body>
  183. <link rel="stylesheet" href="./mescroll/mescroll.min.css">
  184. <script type="text/javascript" src="./mescroll/mescroll.min.js"></script>
  185. <script type="text/javascript" src="../script/api.js"></script>
  186. <script type="text/javascript" src="../script/httpRequest.js"></script>
  187. <script type="text/javascript" src="../script/vue_plugins.js"></script>
  188. <script type="text/javascript">
  189. function closeWin() {
  190. api.closeWin({});
  191. }
  192. apiready = function () {
  193. api.parseTapmode();
  194. var header = $api.byId('aui-header');
  195. $api.fixStatusBar(header);
  196. new Vue({
  197. el: '#app',
  198. data: {
  199. typeList: [],
  200. shopList: [],
  201. activeId: 0
  202. },
  203. methods: {
  204. init: function () {
  205. this.getTypes();
  206. this.getshopLists();
  207. this.storeId = $api.getStorage('userid');
  208. this.status = $api.getStorage('status');
  209. // this.verifyBusiness();
  210. var _this = this;
  211. this.addEvent("refreshindex", function () {
  212. _this.getshopLists();
  213. _this.activeId = 0
  214. });
  215. },
  216. verifyBusiness: function () {
  217. var data = {
  218. "storeId": this.storeId,
  219. "url": "json",
  220. "type": "body"
  221. },
  222. _this = this,
  223. url = "verifyBusiness";
  224. this.$postuser(url, data, function (ret) {
  225. if (ret.code == 500) {
  226. api.alert({
  227. title: '系统提示',
  228. msg: ret.msg,
  229. }, function (ret, err) {
  230. if (ret) {
  231. _this.goWin("license_win", "license_win.html", {})
  232. }
  233. });
  234. }
  235. })
  236. },
  237. getTypes: function () {
  238. var data = {
  239. "url": "json",
  240. "type": "body"
  241. },
  242. _this = this,
  243. url = "getTypes";
  244. this.$post(url, data, function (ret) {
  245. _this.typeList = ret.productCategory;
  246. })
  247. },
  248. getshopLists: function (item) {
  249. if (!item) {
  250. var data = {
  251. "url": "json",
  252. "type": "body",
  253. "mainId": 0
  254. },
  255. _this = this,
  256. url = "getshopLists";
  257. this.$post(url, data, function (ret) {
  258. _this.shopList = ret.product;
  259. })
  260. } else {
  261. var data = {
  262. "url": "json",
  263. "type": "body",
  264. "mainId": item.mainId
  265. },
  266. _this = this,
  267. url = "getshopLists";
  268. this.$post(url, data, function (ret) {
  269. _this.shopList = ret.product;
  270. })
  271. }
  272. },
  273. getId: function (item, index) {
  274. this.activeId = index;
  275. },
  276. addShopCart: function (list) {
  277. if (this.status == 3) {
  278. api.alert({
  279. title: '系统提示',
  280. msg: '门店已冻结,请找相关业务经理解冻!',
  281. }, function (ret, err) {
  282. });
  283. return;
  284. }
  285. if (list.productQtyStock == 0 || list.productQtyStock == null) {
  286. api.toast({
  287. msg: '很抱歉,当前商品暂时缺货'
  288. });
  289. return
  290. }
  291. var data = {
  292. "url": "json",
  293. "type": "body",
  294. "productId": list.mainId,
  295. "storeId": this.storeId,
  296. "cartQty": 1,
  297. "cartType": "0",
  298. "productIntroduction": list.productName,
  299. "spec": list.productSpecs,
  300. "productPrice": list.productPrice,
  301. "productImage": list.productImage
  302. },
  303. _this = this,
  304. url = "addShopCart";
  305. this.$post(url, data, function (ret) {
  306. if (ret.code == 0 || ret.code == '0') {
  307. if (!ret.message) {
  308. api.toast({
  309. msg: '成功加入购物车'
  310. });
  311. } else {
  312. api.toast({
  313. msg: ret.message
  314. });
  315. }
  316. }
  317. })
  318. },
  319. inDetails: function (list) {
  320. this.goWin('integral_details', 'integral_details.html', {
  321. productId: list.mainId
  322. });
  323. },
  324. inSearchPage: function () {
  325. this.goWin('integral_search', 'integral_search.html');
  326. }
  327. },
  328. mounted: function () {
  329. this.init();
  330. },
  331. })
  332. }
  333. </script>
  334. </html>