index.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  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. </head>
  17. <body>
  18. <div class="index_current" id="app" v-cloak>
  19. <van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="min-height:90vh;">
  20. <van-sticky @change="sticky">
  21. <div class="fleximg df cm bgcfff" v-if="topisshow"><img src="./static/images/logo-text.png" alt=""></div>
  22. </van-sticky>
  23. <van-cell>
  24. <template #title>
  25. <div class="df index_userinfo" @click="userinfobtn" v-cloak><img class="userimg" :src="PublicLib.CachePicture({picUrl:userphoto,domid:'indexuserheadimg'})" id="indexuserheadimg"><span class="f16">{{username}}</span><img class="grade" v-for="item,index in grade" v-if="index+1 === rankgrade" :src="item" alt=""></div>
  26. </template>
  27. <template #default>
  28. <div class="df index_userinfo defaultimg" @click="server"><img class="servce" src="./static/images/index-btn1.png" alt=""></div>
  29. </template>
  30. </van-cell>
  31. <van-swipe class="my-swipe" :autoplay="2000" indicator-color="rgba(255,255,255,.8)" v-cloak>
  32. <van-swipe-item v-for="item,index in banner" :key="index"><img width="100%" :src="PublicLib.CachePicture({picUrl:item.PicPath,domid:'banner' + index})" :id="'banner' + index" fit="cover" lazy-load></van-swipe-item>
  33. </van-swipe>
  34. <van-row class="block-padding bb8f7f7f7" v-cloak>
  35. <van-col span="6"><img class="toutiao-t fl" src="./static/images/logo-text.png" alt="" width="100%"></van-col>
  36. <van-col span="18">
  37. <van-swipe :autoplay="5000" style="height:.533333rem" vertical :show-indicators="false" :touchable="false">
  38. <van-swipe-item v-for="item,index in toutiao" :key="index">
  39. <div class="toutiao-txt c333 line1">创客{{item.RealName}}又收到{{item.Amount}}奖励</div>
  40. </van-swipe-item>
  41. </van-swipe>
  42. </van-col>
  43. </van-row>
  44. <van-grid class="main-btn bb8f7f7f7" :border="false" :icon-size="40" v-cloak>
  45. <van-grid-item class="gridicon" v-for="item,index in entrancelist" :text="item.Title" @click="entrance(item.Url)">
  46. <template v-slot:icon><img :src="PublicLib.CachePicture({picUrl:item.Icon,domid:'indexIcon' + index})" :id="'indexIcon' + index"></template>
  47. </van-grid-item>
  48. </van-grid>
  49. <div class="block-padding" v-cloak @click="achievement">
  50. <div class="df"><strong class="db f16 flex1">本月团队业绩</strong></div>
  51. <div class="index-card bgcfff bgimg">
  52. <div class="title df">
  53. <button class="view_detail f12 bgcfff rel"> 查看详情
  54. <van-icon class="abs" name="arrow"></van-icon>
  55. </button>
  56. </div>
  57. <div class="tc detail rel">
  58. <div class="index-num-b f18 b">{{(515421.38 + 945421.02).toFixed(2)}}</div>
  59. <div class="f12 c333">团队交易额(元)</div>
  60. <van-row class="pt16 pb8">
  61. <van-col span="12">
  62. <div class="index-num-b f16 b">12</div>
  63. <div class="f12 c333">新增创客</div>
  64. </van-col>
  65. <van-col span="12">
  66. <div class="index-num-b f16 b">85</div>
  67. <div class="f12 c333">活动商户</div>
  68. </van-col>
  69. </van-row><img class="abs people_bgimg" src="./static/images/index-bgimgpeople.png" alt="">
  70. </div>
  71. </div>
  72. </div>
  73. <div class="block-padding" v-cloak v-if="warehouse.length !== 0"><strong class="db f16">仓库管理</strong>
  74. <div class="warehouse">
  75. <div class="col df">
  76. <div class="posbox df rel" v-for="item in warehouse" :key="item.Id" @click="gowarehouse(item.Id,item.ProductName)"><img class="abs bgimg" src="./static/images/index-warehouse.png" alt="">
  77. <div>
  78. <div class="title f14 b">{{item.ProductName}}</div>
  79. <div class="tips mt8 f12">仓库剩余<span class="number">{{item.LaveNum}}</span><span>台</span></div>
  80. </div>
  81. <div class="roundpanel abs bgcfff cm"><img :src="item.Icon" alt=""></div>
  82. </div>
  83. </div>
  84. </div>
  85. </div>
  86. </van-pull-refresh>
  87. <van-tabbar v-model="active" active-color="#FF502A" v-cloak v-if="tabsisshow">
  88. <van-tabbar-item icon="home-o">首页
  89. <template #icon="props"><img :src="props.active ? icon1.active : icon1.inactive"></template>
  90. </van-tabbar-item>
  91. <van-tabbar-item icon="friends-o" @click="notice" :dot="isnotice">消息
  92. <template #icon="props"><img :src="props.active ? icon3.active : icon3.inactive"></template>
  93. </van-tabbar-item>
  94. <van-tabbar-item icon="setting-o" @click="user">我的
  95. <template #icon="props"><img :src="props.active ? icon4.active : icon4.inactive"></template>
  96. </van-tabbar-item>
  97. </van-tabbar>
  98. </div>
  99. <script src="./static/js/klm-vv.min.js"></script>
  100. <script src="./static/js/klm-axios-config.js"></script>
  101. <script>
  102. // 通过 CDN 引入时不会自动注册 Lazyload 组件
  103. // 可以通过下面的方式手动注册
  104. Vue.use(vant.Lazyload);
  105. // 在 #app 标签下渲染一个按钮组件
  106. let app = new Vue({
  107. el: '#app',
  108. data() {
  109. return {
  110. isLoading:false,
  111. topisshow:false,
  112. active: 0,
  113. username:'',
  114. rankgrade:1,
  115. userphoto:'',
  116. banner: [
  117. ],
  118. toutiao: [
  119. ],
  120. icon1: {
  121. active: './static/images/tab-icon1-active.png',
  122. inactive: './static/images/tab-icon1-no.png',
  123. },
  124. icon2: {
  125. active: './static/images/tab-icon2-active.png',
  126. inactive: './static/images/tab-icon2-no.png',
  127. },
  128. icon3: {
  129. active: './static/images/tab-icon3-active.png',
  130. inactive: './static/images/tab-icon3-no.png',
  131. },
  132. icon4: {
  133. active: './static/images/tab-icon4-active.png',
  134. inactive: './static/images/tab-icon4-no.png',
  135. },
  136. teamperformance: '0',
  137. addcustomer:'0',
  138. merchant:'0',
  139. grade:[
  140. './static/images/grade-k1.png',
  141. './static/images/grade-k2.png',
  142. './static/images/grade-k3.png',
  143. './static/images/grade-k4.png',
  144. './static/images/grade-k5.png',
  145. './static/images/grade-k6.png',
  146. './static/images/grade-k8.png',
  147. './static/images/grade-k9.png',
  148. ],
  149. entrancelist:[
  150. ],
  151. tabsisshow:false,
  152. warehouse:[],
  153. };
  154. },
  155. created() {
  156. this.tabsisshow = bottomtabisshow;
  157. this.getsuerinfo();
  158. this.getteamachievement();
  159. this.getquickentrance();
  160. this.gettopbanner();
  161. this.getheadline();
  162. this.getwarehouselist();
  163. },
  164. computed:{
  165. isnotice:function(){
  166. return PublicLib.getCookieInfo('noticeiscount') !== "";
  167. }
  168. },
  169. methods: {
  170. async onRefresh(){
  171. await this.getsuerinfo();
  172. await this.getteamachievement();
  173. await this.getquickentrance();
  174. await this.gettopbanner();
  175. await this.getheadline();
  176. await this.getwarehouselist();
  177. this.isLoading = false;
  178. },
  179. //- 吸顶状态
  180. sticky(status){
  181. this.topisshow = status
  182. },
  183. //- 获取用户个人信息
  184. async getsuerinfo(){
  185. const Id = PublicLib.getCookieInfo('userId');
  186. const res = await getRequest('/api/v1/users/myinfo',JSON.stringify({Id}));
  187. if(res.status === '1') {
  188. this.username = res.data.RealName;
  189. this.rankgrade = res.data.UserLevel;
  190. this.userphoto = res.data.HeadPhoto;
  191. };
  192. },
  193. //- 获取团队业绩
  194. async getteamachievement(){
  195. const UserId = PublicLib.getCookieInfo('userId');
  196. const res = await getRequest('/api/v1/usertradedaysummary/thismonth',JSON.stringify({UserId}));
  197. if(res.status === '1') {
  198. this.teamperformance = res.data.DirectTradeAmt;
  199. this.merchant = res.data.DirectDebitCapNum;
  200. this.addcustomer = res.data.AddCount;
  201. };
  202. },
  203. //- 获取快捷入口列表
  204. async getquickentrance(){
  205. PublicLib.ShowLoading({Message:''});
  206. const res = await getRequest('/api/v1/indexiconlist/list',JSON.stringify({PageSize:8,PageNum:1}));
  207. if(res.status === '1') {
  208. //- TODO:动态生成入口
  209. this.entrancelist = res.data;
  210. this.entrancelist = [
  211. {Icon:'./static/images/main-btn2@3x.png',Title:'特训营',Url:'trainingCamp'},
  212. {Icon:'./static/images/main-btn5@3x.png',Title:'我的创客',Url:'creater-list'},
  213. {Icon:'./static/images/main-btn6@3x.png',Title:'我的商户',Url:'merchant-list'},
  214. {Icon:'./static/images/main-btn8@3x.png',Title:'意见反馈',Url:'user-feedback'},
  215. ];
  216. PublicLib.HideLoading();
  217. }
  218. },
  219. //- 获取顶部banner
  220. async gettopbanner(){
  221. const UserId = PublicLib.getCookieInfo('userId');
  222. const res = await getRequest('/api/v1/advertisment/indextop',JSON.stringify({UserId,PageSize:8,PageNum:1}));
  223. if(res.status === '1') {
  224. this.banner = res.data
  225. }
  226. },
  227. //- 获取爽客邦头条信息
  228. async getheadline(){
  229. const UserId = PublicLib.getCookieInfo('userId');
  230. const res = await getRequest('/api/v1/sysrechargerecord/headline',JSON.stringify({UserId,PageSize:8,PageNum:1}));
  231. if(res.status === '1') {
  232. this.toutiao = res.data;
  233. };
  234. },
  235. //- 跳转特训营
  236. trainingCamp(){
  237. PublicLib.Goto({Url:'trainingCamp'});
  238. },
  239. //- 跳转商城
  240. mall(){
  241. PublicLib.Goto({Url:'mall'});
  242. },
  243. //- 跳转消息
  244. notice(){
  245. PublicLib.Goto({Url:'notice-center'});
  246. },
  247. //- 跳转我的
  248. user(){
  249. PublicLib.Goto({Url:'user-center'});
  250. },
  251. entrance(Url){
  252. //- 跳转对应的快捷入口页面
  253. PublicLib.Goto({Url});
  254. },
  255. bannerbtn(url){
  256. PublicLib.Goto({Url:url});
  257. },
  258. //- 跳转业绩
  259. achievement(){
  260. PublicLib.Goto({Url:'product-myperformance'});
  261. },
  262. //- 服务中心
  263. server(){
  264. PublicLib.Goto({Url:'user-service-list'});
  265. },
  266. //- 点击头部个人信息
  267. userinfobtn(){
  268. PublicLib.Goto({Url:'user-info'});
  269. },
  270. //- 获取仓库入口
  271. async getwarehouselist(){
  272. const UserId = PublicLib.getCookieInfo('userId');
  273. const res = await getRequest('/api/v1/storehouse/indexlist',JSON.stringify({UserId,PageSize:8,PageNum:1}));
  274. if(res.status === '1') {
  275. this.warehouse = res.data;
  276. }
  277. },
  278. //- 跳转对应仓库
  279. gowarehouse(id,name){
  280. PublicLib.putCookieInfo('warehouseId', id);
  281. PublicLib.putCookieInfo('warehouseName', name);
  282. PublicLib.Goto({Url:'warehouse-management'});
  283. }
  284. }
  285. });
  286. </script>
  287. </body>
  288. </html>