user.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427
  1. <template>
  2. <view class="container user clearfix">
  3. <view class="user-section" :class="[!isShowNoLogin ? 'show' : 'none']">
  4. <view class="u-header">
  5. <image src="https://admin-b.caimei365.com/userfiles/1/images/photo/2020/03/%E6%88%91%E7%9A%84%20%E2%80%93%201%403x.png" mode=""></image>
  6. <view class="u-header-main">
  7. <view class="user-item">
  8. <view class="logo-m">
  9. <image :src="headpic" mode=""></image>
  10. </view>
  11. </view>
  12. <view class="user-item">
  13. <text class="u-h1">{{name}}</text>
  14. </view>
  15. <view class="user-item">
  16. <text class="u-p">账户余额:{{userMoney}}元</text>
  17. </view>
  18. </view>
  19. </view>
  20. <!-- 订单 -->
  21. <view class="user-order">
  22. <view class="tab-title">我的订单</view>
  23. <view class="order-section">
  24. <view class="order-item" @click="navigator('/pages/user/order/order-list?state=1')" hover-class="common-hover" :hover-stay-time="50">
  25. <view class="order-icon">
  26. <image src="../../../static/temp/order1@3x.png" mode=""></image>
  27. <text v-if="paymentCount >0"
  28. class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
  29. :class="[paymentCount < 10 ? 'goleft':'']">
  30. {{paymentCount == 99? '99+' : paymentCount}}
  31. </text>
  32. </view>
  33. <text class="order-t">待付款</text>
  34. </view>
  35. <view class="order-item" @click="navigator('/pages/user/order/order-list?state=2')" hover-class="common-hover" :hover-stay-time="50">
  36. <view class="order-icon">
  37. <image src="../../../static/temp/order2@3x.png" mode=""></image>
  38. <text v-if="waitShipmentsCount >0"
  39. class="uni-badge uni-badge-error uni-small uni-badge--small icon-num "
  40. :class="[waitShipmentsCount < 10 ? 'goleft':'']">
  41. {{waitShipmentsCount == 99? '99+' : waitShipmentsCount}}
  42. </text>
  43. </view>
  44. <text class="order-t">待发货</text>
  45. </view>
  46. <view class="order-item" @click="navigator('/pages/user/order/order-list?state=3')" hover-class="common-hover" :hover-stay-time="50">
  47. <view class="order-icon">
  48. <image src="../../../static/temp/order3@3x.png" mode=""></image>
  49. <text v-if="shipmentsCount >0"
  50. class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
  51. :class="[shipmentsCount < 10 ? 'goleft':'']">
  52. {{shipmentsCount == 99? '99+' : shipmentsCount}}
  53. </text>
  54. </view>
  55. <text class="order-t">已发货</text>
  56. </view>
  57. <view class="order-item" @click="navigator('/pages/user/order/order-list?state=4')" hover-class="common-hover" :hover-stay-time="50">
  58. <view class="order-icon">
  59. <image src="../../../static/temp/order4@3x.png" mode=""></image>
  60. <text v-if="salesReturnCount >0"
  61. class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
  62. :class="[salesReturnCount < 10 ? 'goleft':'']">
  63. {{salesReturnCount == 99? '99+' : salesReturnCount}}
  64. </text>
  65. </view>
  66. <text class="order-t">退货/款</text>
  67. </view>
  68. <view class="order-item" @click="navigator('/pages/user/order/order-list?state=0')" hover-class="common-hover" :hover-stay-time="50">
  69. <view class="order-icon">
  70. <image src="../../../static/temp/order5@3x.png" mode=""></image>
  71. </view>
  72. <text class="order-t">全部订单</text>
  73. </view>
  74. </view>
  75. </view>
  76. <!-- 底部跳转 -->
  77. <view class="foot-list">
  78. <view class="list-cell-item">
  79. <view class="list-cell" v-for="(item, index) in firstList" :key="index" @click="navigator(item.path)" hover-class="cell-hover" :hover-stay-time="50">
  80. <text class="cell-tit">{{item.name}}</text>
  81. <text class="cell-more iconfont icon-xiayibu"></text>
  82. </view>
  83. </view>
  84. <view class="list-cell-item">
  85. <view class="list-cell" v-for="(item, index) in twoList" :key="index" @click="navigator(item.path)" hover-class="cell-hover" :hover-stay-time="50">
  86. <text class="cell-tit">{{item.name}}</text>
  87. <text class="cell-more iconfont icon-xiayibu"></text>
  88. </view>
  89. </view>
  90. <view class="list-cell-item">
  91. <view class="list-cell" @click="navigator('/pages/user/regularPurchase/regularPurchase')" hover-class="cell-hover" :hover-stay-time="50">
  92. <text class="cell-tit">再次购买</text>
  93. <text class="cell-more iconfont icon-xiayibu"></text>
  94. </view>
  95. </view>
  96. <view class="list-cell-item">
  97. <view class="list-cell" @click="navigator('/pages/user/setting/setting')" hover-class="cell-hover" :hover-stay-time="50">
  98. <text class="cell-tit">用户设置</text>
  99. <text class="cell-more iconfont icon-xiayibu"></text>
  100. </view>
  101. </view>
  102. <view class="list-cell-item">
  103. <view class="list-cell" hover-class="cell-hover" :hover-stay-time="50">
  104. <text class="cell-tit">联系我们</text>
  105. <text class="cell-more" @click="toPhone">{{contactNumber}}</text>
  106. </view>
  107. <view class="list-cell last" @click="navigator('/pages/user/about/about')" hover-class="cell-hover" :hover-stay-time="50">
  108. <text class="cell-tit">关于我们</text>
  109. <text class="cell-more iconfont icon-xiayibu"></text>
  110. </view>
  111. </view>
  112. </view>
  113. </view>
  114. <no-login
  115. v-if="isShowNoLogin"
  116. :telPhone='telPhone'
  117. :alertType ='4'
  118. :path = 'true'
  119. >
  120. </no-login>
  121. </view>
  122. </template>
  123. <script>
  124. import uniBadge from '@/components/uni-badge/uni-badge.vue'
  125. import noLogin from '@/components/module/noLogin/nologin.vue'//未登录弹窗
  126. import { mapState,mapMutations } from 'vuex';
  127. export default{
  128. components: {
  129. uniBadge,
  130. noLogin
  131. },
  132. data() {
  133. return{
  134. name:'星范商城',
  135. headpic:'../../../static/temp/logo@3x.png',
  136. userMoney:888888.88,
  137. contactNumber:'',
  138. openid:'',
  139. aboutHtml:'',
  140. telPhone:'',
  141. paymentCount:0, //待付款角标
  142. waitShipmentsCount:0, //待收货角标
  143. shipmentsCount:0, //已发货角标
  144. salesReturnCount:'',//退货/款角标
  145. isShowNoLogin:false,
  146. firstList:[
  147. {name:'运营人员管理',path:'/pages/user/operator/list'},
  148. {name:'机构资料',path:'/pages/user-module/information'},
  149. {name:'收货地址管理',path:'/pages/user/address/address'}
  150. ],
  151. twoList:[
  152. {name:'账户余额明细',path:'/pages/user/account/account'},
  153. {name:'发票信息',path:'/pages/user/invoice/invoice'}
  154. ]
  155. }
  156. },
  157. onLoad(){
  158. },
  159. methods:{
  160. initData(){
  161. this.$api.get('/personal/myCentre',{openid:this.openid,userOrganizeID:this.userOrganizeID},
  162. response => {
  163. if (response.code == "1") {
  164. this.$store.commit('updateAllNum',response.data.cartCount)
  165. let user_data =response.data;
  166. if(user_data.userMoney == 0){
  167. this.userMoney = '0.00';
  168. }else{
  169. let i = user_data.userMoney.toString().lastIndexOf('.');
  170. let money;
  171. if(i==-1){
  172. money = this.$api.FormatMoney(user_data.userMoney); //会所剩余余额
  173. this.userMoney = money +'.00'
  174. }else{
  175. money = this.$api.FormatMoney(user_data.userMoney); //会所剩余余额
  176. this.userMoney = money
  177. }
  178. }
  179. this.name = user_data.name //会所名称
  180. if(user_data.headpic!=''){
  181. this.headpic = user_data.headpic //会所头像
  182. }
  183. this.contactNumber = user_data.contactNumber //联系电话
  184. this.paymentCount = this.showBadge(user_data.paymentCount);
  185. this.waitShipmentsCount = this.showBadge(user_data.waitShipmentsCount);
  186. this.shipmentsCount = this.showBadge(user_data.shipmentsCount);
  187. this.salesReturnCount = this.showBadge(user_data.salesReturnCount);
  188. } else {
  189. this.$util.msg(response.msg,2000);
  190. }
  191. }
  192. )
  193. },
  194. toPhone(){
  195. uni.makePhoneCall({
  196. phoneNumber:this.contactNumber //仅为示例
  197. });
  198. },
  199. navigator(url){
  200. this.$api.navigateTo(url)
  201. },
  202. showBadge(n){
  203. let num ='';
  204. if(n>100){num = 99}else{num = n;}
  205. return num;
  206. },
  207. onPullDownRefresh() {//下拉刷新
  208. this.initData()
  209. uni.stopPullDownRefresh()
  210. },
  211. onShow(){
  212. this.$api.getStorage().then((resolve) => {
  213. if(resolve.code == '1'){
  214. this.openid = resolve.openid
  215. this.isShowNoLogin = false;
  216. this.initData();
  217. }else{
  218. this.telPhone = resolve.tel;
  219. this.isShowNoLogin = true;
  220. this.$store.commit('updateAllNum',0)
  221. }
  222. })
  223. }
  224. }
  225. }
  226. </script>
  227. <style lang="scss">
  228. @import "@/uni.scss";
  229. page{
  230. background-color: #F7F7F7;
  231. }
  232. .user{
  233. width: 100%;
  234. height: 100%;
  235. position:relative;
  236. background: rgba(247, 247, 247, 1);
  237. }
  238. .user-section.none{
  239. display: none;
  240. }
  241. .user-section.show{
  242. display: block;
  243. }
  244. .u-header{
  245. width: 100%;
  246. height: 400rpx;
  247. position: relative;
  248. image{
  249. width: 100%;
  250. height: 400rpx;
  251. }
  252. }
  253. .u-header-main{
  254. width: 100%;
  255. height: 284rpx;
  256. padding: 58rpx 0;
  257. position: absolute;
  258. top: 0;
  259. left: 0;
  260. .user-item{
  261. width: 100%;
  262. display: flex;
  263. flex-direction: column;
  264. align-items: center;
  265. margin-bottom: 16rpx;
  266. .u-h1{
  267. width: 410rpx;
  268. font-size: $font-size-28;
  269. line-height: 40rpx;
  270. color: #FFFFFF;
  271. margin-bottom: 8rpx;
  272. -o-text-overflow: ellipsis;
  273. text-overflow: ellipsis;
  274. display: -webkit-box;
  275. word-break: break-all;
  276. -webkit-box-orient: vertical;
  277. -webkit-line-clamp: 1;
  278. overflow: hidden;
  279. align-items: center;
  280. }
  281. .u-p{
  282. font-size: $font-size-24;
  283. line-height: 40rpx;
  284. color: #FFFFFF;
  285. }
  286. }
  287. .logo-m{
  288. width: 144rpx;
  289. height: 144rpx;
  290. border: 2rpx solid #FFFFFF;
  291. border-radius: 100%;
  292. background: $bg-color;
  293. image{
  294. width: 144rpx;
  295. height: 144rpx;
  296. border-radius: 100%;
  297. }
  298. }
  299. }
  300. .user-order{
  301. width: 702rpx;
  302. height: auto;
  303. padding: 0 24rpx;
  304. background-color: $bg-color;
  305. margin-bottom: 24rpx;
  306. }
  307. .tab-title{
  308. font-size: $font-size-28;
  309. line-height: 80rpx;
  310. color: #333333;
  311. text-align:left;
  312. border-bottom: 1px solid #F8F8F8;
  313. }
  314. .order-section{
  315. display: flex;
  316. justify-content: space-around;
  317. align-items: center;
  318. flex-wrap:wrap;
  319. height: 99rpx;
  320. padding: 24rpx 0;
  321. }
  322. .order-item{
  323. display: flex;
  324. flex-direction: column;
  325. align-items: center;
  326. width: 98rpx;
  327. position: relative;
  328. margin-right: 53rpx;
  329. &:last-child{
  330. margin-right: 0;
  331. }
  332. .order-icon{
  333. width: 52rpx;
  334. height: 52rpx;
  335. position: relative;
  336. image{
  337. width: 52rpx;
  338. height: 52rpx;
  339. }
  340. .icon-num{
  341. position: absolute;
  342. right:-24rpx;
  343. top: -9rpx;
  344. }
  345. .icon-num.goleft{
  346. right: -12rpx;
  347. }
  348. }
  349. .order-t{
  350. line-height: 50rpx;
  351. font-size: $font-size-24;
  352. color: $text-color;
  353. }
  354. }
  355. .foot-list{
  356. width: 100%;
  357. // margin-bottom: 150rpx;
  358. }
  359. .list-cell-item{
  360. width: 702rpx;
  361. height: auto;
  362. margin-bottom: 24rpx;
  363. padding:0 24rpx;
  364. background: $bg-color;
  365. }
  366. .list-cell{
  367. display:flex;
  368. width: 100%;
  369. align-items:baseline;
  370. line-height:100rpx;
  371. position:relative;
  372. background: $bg-color;
  373. justify-content: center;
  374. // border-bottom: 1px solid #EBEBEB;
  375. &.cell-hover{
  376. background:#fafafa;
  377. }
  378. .cell-more{
  379. align-self: baseline;
  380. font-size:$font-size-28;
  381. color:$text-color;
  382. margin-left:10rpx;
  383. }
  384. .cell-tit{
  385. flex: 1;
  386. font-size: $font-size-28;
  387. color: $text-color;
  388. margin-right:10rpx;
  389. }
  390. .cell-tip{
  391. font-size: $font-size-28;
  392. color: $text-color;
  393. }
  394. }
  395. .list-cell.last{
  396. border-bottom: none;
  397. }
  398. .uni-badge--small {
  399. -webkit-transform: scale(.8);
  400. -ms-transform: scale(.8);
  401. transform: scale(.8);
  402. -webkit-transform-origin: center center;
  403. -ms-transform-origin: center center;
  404. transform-origin: center center;
  405. }
  406. .uni-badge {
  407. font-family: 'Helvetica Neue', Helvetica, sans-serif;
  408. -webkit-box-sizing: border-box;
  409. box-sizing: border-box;
  410. font-size: 12px;
  411. line-height: 1;
  412. display: inline-block;
  413. padding: 3px 6px;
  414. color: #333;
  415. border-radius: 100px;
  416. background-color: #f1f1f1;
  417. }
  418. .uni-badge-error {
  419. color: #fff;
  420. background-color: #dd524d;
  421. }
  422. </style>