dashboard.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  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 user-info">
  37. <span class="username">{{userInfo.name}}</span>
  38. <!-- 机构类型 -->
  39. <span class="agency" :class="[userIdentityTag.type]" v-html="userIdentityTag.name"></span>
  40. <span class="vip-icon" v-if="GLOBAL_USER_IDENTITY === 2" :class="[userIdentityTag.type]" v-html="userIdentityTag.type.toUpperCase()"></span>
  41. <!-- 升级 -->
  42. <a class="update" href="/user/setting/upgrade.html" v-if="userInfo.userIdentity === 4" onclick="_czc.push(['_trackEvent','个人中心','升级入口','点击','','Um_Event_ClubUpgrade'])">
  43. 去升级资质机构
  44. <div class="name-tips">采美豆</div>
  45. </a>
  46. </div>
  47. <div class="msg"><span>资料完整度:<em class="red">{{degree}}</em></span><a href="/user/setting/information.html">立即完善</a></div>
  48. </div>
  49. <div class="message">
  50. <a href="/user/message/list.html">
  51. <i class="icon mIcon">
  52. <span v-if="unReadMessageCount>0" :class="[unReadMessageCount < 10 ? 'circular':'ellipse']">{{unReadMessageCount >= 99 ? '99+' : unReadMessageCount}}</span>
  53. </i>
  54. </a>
  55. </div>
  56. </div>
  57. <div class="svip-content clear">
  58. <div class="title order">超级会员</div>
  59. <div class="section">
  60. <div v-html="svipTips"></div>
  61. <a v-if="true" href="/user/member.html" :class="vipInfo.vipFlag === 0 ? 'btn' : 'link'">
  62. <span v-if="vipInfo.vipFlag === 0" onclick="_czc.push(['_trackEvent','立即开通','超级会员','跳转会员中心','','Um_Event_RegisterSuper'])">立即开通</span>
  63. <span v-else>进入会员中心&gt;</span>
  64. </a>
  65. </div>
  66. </div>
  67. <div class="user-content clear">
  68. <div class="title order">我的资产</div>
  69. <div class="section">
  70. <div class="user-main account">
  71. <a href="javascript:void(0);" class="account-cell">
  72. <span>账户余额:</span>
  73. <span class="red">{{toFixedFn(userInfo.ableUserMoney)}}</span>
  74. </a>
  75. <a href="/user/beans.html" class="account-cell">
  76. <span>采美豆:</span>
  77. <span class="red">{{ userInfo.userBeans }}</span>
  78. </a>
  79. <a href="/user/coupon.html" class="account-cell">
  80. <span>优惠券:</span>
  81. <span class="red">{{ couponNum }}</span>
  82. </a>
  83. </div>
  84. </div>
  85. </div>
  86. <div class="user-content clear">
  87. <div class="title order">我的收藏</div>
  88. <div class="section">
  89. <div class="user-main collec">
  90. <a href="/user/collection.html" class="account-collec">
  91. <img src="/img/account/icon-collection@2x.png" alt="">
  92. <p>收藏商品</p>
  93. </a>
  94. </div>
  95. </div>
  96. </div>
  97. <div class="user-content clear">
  98. <div class="title order">我的订单</div>
  99. <div class="section">
  100. <div class="user-main tabs">
  101. <div class="tabs-left mfw">
  102. <div v-if="!isPC" class="item">
  103. <a href="javascript:void(0);" @click="orderListPath(0)">
  104. <span class="p">全部订单</span>
  105. </a>
  106. </div>
  107. <div class="item">
  108. <a href="javascript:void(0);" @click="orderListPath(1)">
  109. <i class="icon icon-1">
  110. <span v-if="confirmedCount>0" :class="[confirmedCount < 10 ? 'circular':'ellipse']">{{confirmedCount >= 99 ? '99+' : confirmedCount}}</span>
  111. </i>
  112. <span class="p">待确认</span>
  113. </a>
  114. </div>
  115. <div class="item">
  116. <a href="javascript:void(0);" @click="orderListPath(2)">
  117. <i class="icon icon-2">
  118. <span v-if="paymentCount>0" :class="[paymentCount < 10 ? 'circular':'ellipse']">{{paymentCount >= 99 ? '99+' : paymentCount}}</span>
  119. </i>
  120. <span class="p">待付款</span>
  121. </a>
  122. </div>
  123. <div class="item">
  124. <a href="javascript:void(0);" @click="orderListPath(3)">
  125. <i class="icon icon-3">
  126. <span v-if="waitShipmentsCount>0" :class="[waitShipmentsCount < 10 ? 'circular':'ellipse']">{{waitShipmentsCount >= 99 ? '99+' : waitShipmentsCount}}</span>
  127. </i>
  128. <span class="p">待发货</span>
  129. </a>
  130. </div>
  131. <div class="item">
  132. <a href="javascript:void(0);" @click="orderListPath(4)">
  133. <i class="icon icon-4">
  134. <span v-if="shipmentsCount>0" :class="[shipmentsCount < 10 ? 'circular':'ellipse']">{{shipmentsCount >= 99 ? '99+' : shipmentsCount}}</span>
  135. </i>
  136. <span class="p">已发货</span>
  137. </a>
  138. </div>
  139. <div class="item">
  140. <a href="javascript:void(0);" @click="orderListPath(5)">
  141. <i class="icon icon-5">
  142. <span v-if="salesReturnCount>0" :class="[salesReturnCount < 10 ? 'circular':'ellipse']">{{salesReturnCount >= 99 ? '99+' : salesReturnCount}}</span>
  143. </i>
  144. <span class="p">退货/款</span>
  145. </a>
  146. </div>
  147. </div>
  148. <div v-if="isPC" class="tabs-right"><a href="javascript:void(0);" @click="orderListPath(0)">全部订单<span class="icon mIcon"></span></a></div>
  149. </div>
  150. </div>
  151. </div>
  152. <!--美博会活动标题-->
  153. <!-- <div class=" user-content coupon">-->
  154. <!-- <a href="/user/beautyfair.html" id="meibohui" onclick="_czc.push(['_trackEvent','美博会','点击','用户访问','','meibohui'])">-->
  155. <!-- <img src="https://static.caimei365.com/app/meibohui/www/activity-in-pc.jpg" class="coupon_img" v-if="isPC"/>-->
  156. <!-- <img src="https://static.caimei365.com/app/meibohui/www/activity-in-h5.jpg" class="coupon_img" v-else>-->
  157. <!-- </a>-->
  158. <!-- </div>-->
  159. <div class="user-content">
  160. <div class="title">今日推荐</div>
  161. <div class="section">
  162. <div class="user-main product clear">
  163. <a class="product-item" v-for="(item, index) in productList" :key="index" :href="item.link" target="_blank">
  164. <div class="product-img">
  165. <img :src="item.image" :alt="item.title">
  166. </div>
  167. <div class="product-name"><p>{{item.title}}</p></div>
  168. </a>
  169. </div>
  170. </div>
  171. </div>
  172. <div class="user-content">
  173. <div class="title">最新动态<a href="/info/center-3-1.html" target="_blank">全部动态<i class="icon mIcon"></i></a></div>
  174. <div class="section">
  175. <div class="user-main news">
  176. <a class="new-list" v-for="(item, index) in newsList" :key="index" :href="item.link" target="_blank">
  177. <p class="text">{{item.title}}</p>
  178. <p class="time">{{item.addTime}}</p>
  179. </a>
  180. </div>
  181. </div>
  182. </div>
  183. </template>
  184. </div>
  185. </div>
  186. <!-- 采美豆弹窗 -->
  187. <div class="cmbeans-alert-box" v-if="isShowBeansAlet" :class="isShowBeansAlet ? 'show' : 'hide'">
  188. <template v-if="beansType == 12">
  189. <div class="cmbeans-alert-image">
  190. <img src="/img/account/icon-beans-12@2x.png" alt="">
  191. <i class="icon mIcon" @click.stop="handleClickCancel"></i>
  192. </div>
  193. </template>
  194. <template v-else>
  195. <div class="cmbeans-alert-content" :style="{'background-image': 'url('+bgImagePath+')'}">
  196. <div class="cmbeans-alert-content-text">恭喜您获得采美豆!</div>
  197. <div class="cmbeans-alert-content-bean">
  198. <div class="cmbeans-alert-main">
  199. <img v-if="isPC" class="cmbeans-alert-icon" src="/img/account/bean-icon@3x.png" mode="">
  200. <img v-else class="cmbeans-alert-icon" src="/img/account/bean-icon-h5@3x.png" mode="">
  201. <div class="cmbeans-alert-text">
  202. <span class="icon-add">+</span>
  203. <span class="icon-text">{{ beanNumber }}</span>
  204. </div>
  205. </div>
  206. </div>
  207. <div class="cmbeans-alert-content-tips">
  208. <div class="tips">采美豆可抵扣运费</div>
  209. </div>
  210. <i class="icon mIcon" @click.stop="handleClickCancel"></i>
  211. </div>
  212. </template>
  213. </div>
  214. </div>
  215. <!--loading-->
  216. <div v-else class="loading">
  217. <img src="/img/base/loading.gif">
  218. </div>
  219. </div>
  220. <!-- 引入底部 -->
  221. <template th:replace="components/footer"></template>
  222. <template th:replace="components/foot-link"></template>
  223. <script charset="utf-8" type="text/javascript" th:src="@{/lib/datapicker/moment-2.29.min.js(v=${version})}"></script>
  224. <script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
  225. <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/user.service.js(v=${version})}"></script>
  226. <script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/dashboard.js(v=${version})}"></script>
  227. </body>
  228. </html>