mall.html 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>商城-创业帮</title>
  6. <meta name="keywords" content="商城-创业帮">
  7. <meta name="description" content="商城-创业帮">
  8. <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,shrink-to-fit=no,user-scalable=no" name="viewport" viewport="cover">
  9. <meta name="apple-mobile-web-app-capable" content="yes">
  10. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  11. <meta content="telephone=no" name="format-detection">
  12. <meta content="email=no" name="format-detection">
  13. <meta name="apple-mobile-web-app-title" content="商城-创业帮">
  14. <meta http-equiv="Cache-Control" content="no-siteapp">
  15. <link rel="stylesheet" href="./static/css/main.css">
  16. <style>
  17. .van-card__thumb .van-image{
  18. height:100%;
  19. width:100%;
  20. }
  21. </style>
  22. </head>
  23. <body class="pt0 pb0" style="padding-top:0;">
  24. <div id="app">
  25. <van-nav-bar class="bottom_line mall_title" title="创业帮商城" v-if="toptitleisshow" right-text="我的订单" @click-right="rightbtn"></van-nav-bar>
  26. <div class="mall ovh-x" v-cloak ref="wrapper2">
  27. <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :class="products.length === 0 ? 'isnodata':''" style="height:100%;">
  28. <van-list v-model="loading" :finished="finished" finished-text="没有更多数据了" @load="onLoad" :immediate-check="false">
  29. <van-empty class="custom-image" image="./static/images/empty-img.png" description="暂无数据" v-if="isnodata"></van-empty>
  30. <van-card class="van-hairline--bottom" :price="item.Price | tofixed2" :desc="item.Details" :title="item.ProductName" v-for="item,index in products" :key="index" :lazy-load="true" @click="gomalldetail(item.Id)">
  31. <template v-slot:thumb>
  32. <van-image :src="item.ListPicPath">
  33. <template v-slot:loading>
  34. <van-loading type="spinner" size="20"></van-loading>
  35. </template>
  36. </van-image>
  37. </template>
  38. </van-card>
  39. </van-list>
  40. </van-pull-refresh>
  41. </div>
  42. <van-tabbar v-model="active" active-color="#333" inactive-color="#999" v-cloak v-if="tabsisshow">
  43. <van-tabbar-item icon="home-o" @click="index">首页
  44. <template #icon="props"><img :src="props.active ? icon1.active : icon1.inactive"></template>
  45. </van-tabbar-item>
  46. <van-tabbar-item icon="search">商城
  47. <template #icon="props"><img :src="props.active ? icon2.active : icon2.inactive"></template>
  48. </van-tabbar-item>
  49. <van-tabbar-item icon="friends-o" @click="notice" :dot="isnotice">消息
  50. <template #icon="props"><img :src="props.active ? icon3.active : icon3.inactive"></template>
  51. </van-tabbar-item>
  52. <van-tabbar-item icon="setting-o" @click="user">我的
  53. <template #icon="props"><img :src="props.active ? icon4.active : icon4.inactive"></template>
  54. </van-tabbar-item>
  55. </van-tabbar>
  56. </div>
  57. <script src="./static/js/klm-vv.min.js"></script>
  58. <script src="./static/js/appfunc.min.js"></script>
  59. <script src="./static/js/klm-axios-config.js"></script>
  60. <script src="./static/js/publicfn.js"> </script>
  61. <script>
  62. function OnStart(){
  63. app.verificationrealauth();
  64. };
  65. // 通过 CDN 引入时不会自动注册 Lazyload 组件
  66. // 可以通过下面的方式手动注册
  67. Vue.use(vant.Lazyload);
  68. // 在 #app 标签下渲染一个按钮组件
  69. let app = new Vue({
  70. el: '#app',
  71. data() {
  72. return {
  73. test:'',
  74. isnodata:false,
  75. toptitleisshow:false,
  76. realauth:false,
  77. active: 1,
  78. products:[],
  79. pageinfo:{
  80. PageSize:20,
  81. PageNum:1
  82. },
  83. loading: false,
  84. finished: false,
  85. refreshing: false,
  86. icon1: {
  87. active: './static/images/tab-icon1-active1@3x.png',
  88. inactive: './static/images/tab-icon1-no@3x.png',
  89. },
  90. icon2: {
  91. active: './static/images/tab-icon2-active1@3x.png',
  92. inactive: './static/images/tab-icon2-no@3x.png',
  93. },
  94. icon3: {
  95. active: './static/images/tab-icon3-active1@3x.png',
  96. inactive: './static/images/tab-icon3-no@3x.png',
  97. },
  98. icon4: {
  99. active: './static/images/tab-icon4-active1@3x.png',
  100. inactive: './static/images/tab-icon4-no@3x.png',
  101. },
  102. tabsisshow:'',
  103. leader:0,
  104. };
  105. },
  106. created() {
  107. this.toptitleisshow = toptitleisshow;
  108. this.tabsisshow = bottomtabisshow;
  109. this.getmalllist();
  110. this.verificationrealauth();
  111. if(JSON.parse(PublicLib.getCookieInfo('userInfo')).LeaderLevel){
  112. this.leader = JSON.parse(PublicLib.getCookieInfo('userInfo')).LeaderLevel;
  113. };
  114. },
  115. computed:{
  116. isnotice:function(){
  117. return PublicLib.getCookieInfo('noticeiscount') !== "";
  118. }
  119. },
  120. beforeUpdate(){
  121. this.$nextTick(() => {
  122. this.$refs.wrapper2.style.height = `${document.documentElement.clientHeight}px`;
  123. });
  124. },
  125. methods: {
  126. //- 获取商城列表
  127. async getmalllist(){
  128. //- PublicLib.ShowLoading({Message:''});
  129. const res = await getRequest('api/v1/products/list?t='+Math.random(6),JSON.stringify(this.pageinfo));
  130. if(res.status !== '1') return tips('获取商品列表失败,请重试!')
  131. //- PublicLib.HideLoading();
  132. if (res.data.length < this.pageinfo.PageSize) {
  133. this.finished = true;
  134. };
  135. this.products.push(...res.data);
  136. this.loading = false;
  137. if(this.products.length === 0) {this.isnodata = true}else{this.isnodata = false};
  138. },
  139. //- 第一次获取商城列表
  140. async getfirstmalllist(){
  141. //- PublicLib.ShowLoading({Message:''});
  142. const res = await getRequest('api/v1/products/list?t='+Math.random(6),JSON.stringify(this.pageinfo));
  143. if(res.status !== '1') return tips('获取商品列表失败,请重试!')
  144. //- PublicLib.HideLoading();
  145. if (res.data.length < this.pageinfo.PageSize) {
  146. this.finished = true;
  147. };
  148. this.products = res.data;
  149. this.loading = false;
  150. this.refreshing = false;
  151. if(this.products.length === 0) {this.isnodata = true}else{this.isnodata = false};
  152. },
  153. onLoad() {
  154. if (this.refreshing) {
  155. this.products = [];
  156. this.refreshing = false;
  157. this.pageinfo.PageNum = 0;
  158. }
  159. this.pageinfo.PageNum++;
  160. this.getmalllist();
  161. },
  162. onRefresh() {
  163. // 清空列表数据
  164. this.finished = false;
  165. // 重新加载数据
  166. // 将 loading 设置为 true,表示处于加载状态
  167. this.loading = true;
  168. this.getfirstmalllist();
  169. },
  170. async verificationrealauth(){
  171. const Id = PublicLib.getCookieInfo('userId');
  172. const userinfo = await getRequest('api/v1/users/personalinfo',JSON.stringify({Id}));
  173. //- 是否实名认证完毕
  174. if(userinfo.data.AuthFlag !== 1) {
  175. this.realauth = true;
  176. }else{
  177. this.realauth = false;
  178. };
  179. },
  180. //- 跳转商品详情
  181. gomalldetail(id){
  182. if(this.realauth){
  183. PublicLib.ShowDialog({
  184. Title:'暂未实名认证',
  185. Message:'是否去实名认证?',
  186. ConfirmText:'去实名',
  187. CancelText:'暂不实名',
  188. ConfirmAction:'app.goAuth()',
  189. CanelAction:''
  190. });
  191. return;
  192. };
  193. console.log(this.leader,id);
  194. if(this.leader === 2 && id === 28){
  195. return tips('已经成为大盟主,请勿下单小盟主');
  196. };
  197. PublicLib.putCookieInfo('malldetailId', id);
  198. PublicLib.Goto({Url:'mall-detail'});
  199. },
  200. goAuth(){
  201. PublicLib.Goto({Url:'user-realauth'});
  202. },
  203. //- 跳转我的
  204. user(){
  205. PublicLib.Goto({Url:'user-center'});
  206. },
  207. //- 跳转主页
  208. index(){
  209. PublicLib.Goto({Url:'index'});
  210. },
  211. //- 跳转消息
  212. notice(){
  213. PublicLib.Goto({Url:'notice-center'});
  214. },
  215. //- 我的订单
  216. rightbtn(){
  217. PublicLib.Goto({Url:'mall-deal-list'});
  218. }
  219. }
  220. });
  221. </script>
  222. </body>
  223. </html>