dashboard.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. <!DOCTYPE html>
  2. <html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3. xsi:schemaLocation="https://www.thymeleaf.org ">
  4. <head>
  5. <title>采美365网</title>
  6. <template th:replace="components/head-link"></template>
  7. <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
  8. <link th:href="@{/css/user-center/dashboard.css(v=${version})}" rel="stylesheet" type="text/css">
  9. <template th:replace="components/analysis"></template>
  10. </head>
  11. <body>
  12. <!-- 引用头部 -->
  13. <template th:replace="components/header"></template>
  14. <!-- 我的采美 -->
  15. <div id="dashboard">
  16. <div class="navLayout" v-cloak>
  17. <div v-if="isPC" class="crumbs">
  18. <span>我的采美</span>
  19. </div>
  20. <div class="wrap clear">
  21. <!--左侧导航-->
  22. <template th:replace="user-center/components/tableft"></template>
  23. <div class="right">
  24. <!--loading-->
  25. <div v-if="isRequset" class="loading">
  26. <img src="/img/base/loading.gif">
  27. </div>
  28. <template v-else>
  29. <div class="user-header mfbt">
  30. <div class="logo">
  31. <input ref="clubUseLogo" class="logo-file" type="file" accept="image/png,image/jpeg,image/gif,image/jpg" @change="uploadUserPuploadAvatar">
  32. <i class="file icon mIcon" v-if="userInfo.image == null"></i>
  33. <img v-else :src="userInfo.image == null ? '' : userInfo.image" alt="">
  34. </div>
  35. <div class="account">
  36. <div class="name">
  37. <span>{{userInfo.name}}</span>
  38. <a href="/user/setting/upgrade.html" v-if="userInfo.userIdentity === 4 && isPC" onclick="_czc.push(['_trackEvent','个人中心','升级入口','点击','','Um_Event_ClubUpgrade'])">
  39. 去升级会员机构
  40. <div class="name-tips">采美豆</div>
  41. </a>
  42. </div>
  43. <div class="msg"><span>资料完整度:<em class="red">{{degree}}</em></span><a href="/user/setting/information.html">立即完善</a></div>
  44. <div class="upgrade">
  45. <a href="/user/setting/upgrade.html" v-if="userInfo.userIdentity === 4 && !isPC" onclick="_czc.push(['_trackEvent','个人中心','升级入口','点击','','Um_Event_ClubUpgrade'])">
  46. 去升级会员机构
  47. <div class="name-tips">采美豆</div>
  48. </a>
  49. </div>
  50. </div>
  51. <div class="message">
  52. <a href="/user/message/list.html">
  53. <i class="icon mIcon">
  54. <span v-if="unReadMessageCount>0" :class="[unReadMessageCount < 10 ? 'circular':'ellipse']">{{unReadMessageCount >= 99 ? '99+' : unReadMessageCount}}</span>
  55. </i>
  56. </a>
  57. </div>
  58. </div>
  59. <div class="user-content clear">
  60. <div class="title order">我的资产</div>
  61. <div class="section">
  62. <div class="user-main account">
  63. <a href="javascript:void(0);" class="account-cell">
  64. <span>账户余额:</span>
  65. <span class="red">{{toFixedFn(userInfo.ableUserMoney)}}</span>
  66. </a>
  67. <a href="/user/beans.html" class="account-cell">
  68. <span>采美豆:</span>
  69. <span class="red">{{ userInfo.userBeans }}</span>
  70. </a>
  71. <a href="/user/coupon.html" class="account-cell">
  72. <span>优惠券:</span>
  73. <span class="red">{{ couponNum }}</span>
  74. </a>
  75. </div>
  76. </div>
  77. </div>
  78. <div class="user-content clear">
  79. <div class="title order">我的收藏</div>
  80. <div class="section">
  81. <div class="user-main collec">
  82. <a href="/user/collection.html" class="account-collec">
  83. <img src="/img/account/icon-collection@2x.png" alt="">
  84. <p>收藏商品</p>
  85. </a>
  86. </div>
  87. </div>
  88. </div>
  89. <div class="user-content clear">
  90. <div class="title order">我的订单</div>
  91. <div class="section">
  92. <div class="user-main tabs">
  93. <div class="tabs-left mfw">
  94. <div v-if="!isPC" class="item">
  95. <a href="javascript:void(0);" @click="orderListPath(0)">
  96. <span class="p">全部订单</span>
  97. </a>
  98. </div>
  99. <div class="item">
  100. <a href="javascript:void(0);" @click="orderListPath(1)">
  101. <i class="icon icon-1">
  102. <span v-if="confirmedCount>0" :class="[confirmedCount < 10 ? 'circular':'ellipse']">{{confirmedCount >= 99 ? '99+' : confirmedCount}}</span>
  103. </i>
  104. <span class="p">待确认</span>
  105. </a>
  106. </div>
  107. <div class="item">
  108. <a href="javascript:void(0);" @click="orderListPath(2)">
  109. <i class="icon icon-2">
  110. <span v-if="paymentCount>0" :class="[paymentCount < 10 ? 'circular':'ellipse']">{{paymentCount >= 99 ? '99+' : paymentCount}}</span>
  111. </i>
  112. <span class="p">待付款</span>
  113. </a>
  114. </div>
  115. <div class="item">
  116. <a href="javascript:void(0);" @click="orderListPath(3)">
  117. <i class="icon icon-3">
  118. <span v-if="waitShipmentsCount>0" :class="[waitShipmentsCount < 10 ? 'circular':'ellipse']">{{waitShipmentsCount >= 99 ? '99+' : waitShipmentsCount}}</span>
  119. </i>
  120. <span class="p">待发货</span>
  121. </a>
  122. </div>
  123. <div class="item">
  124. <a href="javascript:void(0);" @click="orderListPath(4)">
  125. <i class="icon icon-4">
  126. <span v-if="shipmentsCount>0" :class="[shipmentsCount < 10 ? 'circular':'ellipse']">{{shipmentsCount >= 99 ? '99+' : shipmentsCount}}</span>
  127. </i>
  128. <span class="p">已发货</span>
  129. </a>
  130. </div>
  131. <div class="item">
  132. <a href="javascript:void(0);" @click="orderListPath(5)">
  133. <i class="icon icon-5">
  134. <span v-if="salesReturnCount>0" :class="[salesReturnCount < 10 ? 'circular':'ellipse']">{{salesReturnCount >= 99 ? '99+' : salesReturnCount}}</span>
  135. </i>
  136. <span class="p">退货/款</span>
  137. </a>
  138. </div>
  139. </div>
  140. <div v-if="isPC" class="tabs-right"><a href="javascript:void(0);" @click="orderListPath(0)">全部订单<span class="icon mIcon"></span></a></div>
  141. </div>
  142. </div>
  143. </div>
  144. <!--美博会活动标题-->
  145. <!-- <div class=" user-content coupon">-->
  146. <!-- <a href="/user/beautyfair.html" id="meibohui" onclick="_czc.push(['_trackEvent','美博会','点击','用户访问','','meibohui'])">-->
  147. <!-- <img src="https://static.caimei365.com/app/meibohui/www/activity-in-pc.jpg" class="coupon_img" v-if="isPC"/>-->
  148. <!-- <img src="https://static.caimei365.com/app/meibohui/www/activity-in-h5.jpg" class="coupon_img" v-else>-->
  149. <!-- </a>-->
  150. <!-- </div>-->
  151. <div class="user-content">
  152. <div class="title">今日推荐</div>
  153. <div class="section">
  154. <div class="user-main product clear">
  155. <a class="product-item" v-for="(item, index) in productList" :key="index" :href="item.link" target="_blank">
  156. <div class="product-img">
  157. <img :src="item.image" :alt="item.title">
  158. </div>
  159. <div class="product-name"><p>{{item.title}}</p></div>
  160. </a>
  161. </div>
  162. </div>
  163. </div>
  164. <div class="user-content">
  165. <div class="title">最新动态<a href="/info/center-3-1.html" target="_blank">全部动态<i class="icon mIcon"></i></a></div>
  166. <div class="section">
  167. <div class="user-main news">
  168. <a class="new-list" v-for="(item, index) in newsList" :key="index" :href="item.link" target="_blank">
  169. <p class="text">{{item.title}}</p>
  170. <p class="time">{{item.addTime}}</p>
  171. </a>
  172. </div>
  173. </div>
  174. </div>
  175. </template>
  176. </div>
  177. </div>
  178. <!-- 采美豆弹窗 -->
  179. <div class="cmbeans-alert-box" v-if="isShowBeansAlet" :class="isShowBeansAlet ? 'show' : 'hide'">
  180. <template v-if="beansType == 12">
  181. <div class="cmbeans-alert-image">
  182. <img src="/img/account/icon-beans-12@2x.png" alt="">
  183. <i class="icon mIcon" @click.stop="handleClickCancel"></i>
  184. </div>
  185. </template>
  186. <template v-else>
  187. <div class="cmbeans-alert-content" :style="{'background-image': 'url('+bgImagePath+')'}">
  188. <div class="cmbeans-alert-content-text">恭喜您获得采美豆!</div>
  189. <div class="cmbeans-alert-content-bean">
  190. <div class="cmbeans-alert-main">
  191. <img v-if="isPC" class="cmbeans-alert-icon" src="/img/account/bean-icon@3x.png" mode="">
  192. <img v-else class="cmbeans-alert-icon" src="/img/account/bean-icon-h5@3x.png" mode="">
  193. <div class="cmbeans-alert-text">
  194. <span class="icon-add">+</span>
  195. <span class="icon-text">{{ beanNumber }}</span>
  196. </div>
  197. </div>
  198. </div>
  199. <div class="cmbeans-alert-content-tips">
  200. <div class="tips">采美豆可抵扣运费</div>
  201. </div>
  202. <i class="icon mIcon" @click.stop="handleClickCancel"></i>
  203. </div>
  204. </template>
  205. </div>
  206. </div>
  207. <!--loading-->
  208. <div v-else class="loading">
  209. <img src="/img/base/loading.gif">
  210. </div>
  211. </div>
  212. <!-- 引入底部 -->
  213. <template th:replace="components/footer"></template>
  214. <template th:replace="components/foot-link"></template>
  215. <script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
  216. <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/user.service.js(v=${version})}"></script>
  217. <script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/dashboard.js(v=${version})}"></script>
  218. </body>
  219. </html>