index.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341
  1. <template>
  2. <view class="container">
  3. <view class="topBox">
  4. <view class="userBox flex">
  5. <view class="userInfo flex_item" @click="navTo('/pageExpert/users/user_info/index')">
  6. <view class="avatarBox">
  7. <image class="avatar" :src="userInfo.avatar || '/static/error/missing-face.png'"></image>
  8. <view class="level">{{userInfo.Staff && userInfo.Staff.is_expert == 1?'合作专家':'普通用户'}}</view>
  9. </view>
  10. <view class="nameBox">
  11. <view class="name">{{userInfo.Staff && userInfo.Staff.staff_name || userInfo.real_name || userInfo.nickname}}</view>
  12. <view class="phone">{{userInfo.Staff && userInfo.Staff.phone || userInfo.phone}}</view>
  13. <!-- <view class="phone">所属门店:360健康旗舰店</view> -->
  14. </view>
  15. </view>
  16. <image v-if="hasSwitch == true" class="set" src="/static/image/set.png" @click="switchUser"></image>
  17. </view>
  18. <view class="flex statistic">
  19. <view class="statTpl bg1" @click="navTo('/pageExpert/wallet/wallet')">
  20. <view class="statName">我的健康米</view>
  21. <view class="statNum">{{userInfo.now_money | formatNumber }}</view>
  22. </view>
  23. <view class="statTpl bg2" @click="navTo('/pageExpert/users/promoter-list/index')">
  24. <view class="statName">我的推广</view>
  25. <view class="statNum">{{userInfo.spread_count }}</view>
  26. </view>
  27. </view>
  28. </view>
  29. <view class="list-box">
  30. <view class="user-list flex" @click="navTo('/pageExpert/users/user_spread_code/index')">
  31. <image src="/static/image/img24.png" mode="widthFix" class="left-img"></image>
  32. <view class="">邀请好友</view>
  33. <image src="/static/image/img28.png" mode="" class="right-img"></image>
  34. </view>
  35. <view class="user-list flex" @click="navTo('/pageExpert/user/statistics')">
  36. <image src="/static/work/img07.png" mode="widthFix" class="left-img"></image>
  37. <view class="">咨询统计</view>
  38. <image src="/static/image/img28.png" mode="" class="right-img"></image>
  39. </view>
  40. <!-- <view class="user-list flex" @click="callService">
  41. <image src="/static/image/img27.png" mode="widthFix" class="left-img"></image>
  42. <view class="">客服</view>
  43. <image src="/static/image/img28.png" mode="" class="right-img"></image>
  44. </view> -->
  45. </view>
  46. <!-- 切换账号身份 -->
  47. <u-action-sheet :show="showSwitch" :actions="actions" title="请选择切换身份" :description="description" @close="showSwitch = false" @select="switchSelect"></u-action-sheet>
  48. <pageFooter @newDataStatus="newDataStatus"></pageFooter>
  49. </view>
  50. </template>
  51. <script>
  52. import pageFooter from "../components/pageFooter/index.vue";
  53. import { getUserInfo } from '@/api/user.js';
  54. import { toLogin } from '@/libs/login.js';
  55. import { getList } from '@/api/new_store.js'
  56. import { mapState, mapGetters} from "vuex";
  57. // #ifdef H5
  58. import Auth from '@/libs/wechat';
  59. // #endif
  60. // #ifdef MP
  61. import editUserModal from '@/components/eidtUserModal/index.vue';
  62. // #endif
  63. import { HTTP_REQUEST_URL } from '@/config/app';
  64. export default {
  65. components: {
  66. pageFooter,
  67. // #ifdef MP
  68. editUserModal
  69. // #endif
  70. // service
  71. },
  72. computed: {
  73. ...mapGetters({
  74. isLogin: 'isLogin'
  75. })
  76. },
  77. data() {
  78. return {
  79. userInfo:'',
  80. isFooter: false,
  81. //切换账号身份
  82. showSwitch:false,
  83. actions:[],
  84. description:'',
  85. hasSwitch:false,//账号是否有多个身份 true有多个身份
  86. };
  87. },
  88. created() {
  89. let that = this;
  90. // #ifdef MP
  91. // 小程序静默授权
  92. console.log(this.$store.getters.isLogin,'this.$store.getters.isLogin')
  93. if (!this.$store.getters.isLogin) {
  94. // Routine.getCode()
  95. // .then(code => {
  96. // Routine.silenceAuth(code).then(res => {
  97. // this.onLoadFun();
  98. // })
  99. // })
  100. // .catch(res => {
  101. // uni.hideLoading();
  102. // });
  103. }
  104. // #endif
  105. if (that.isLogin == false) {
  106. // #ifdef H5 || APP-PLUS
  107. toLogin()
  108. // #endif
  109. // #ifdef MP
  110. //this.isShowAuth = true;
  111. // #endif
  112. }
  113. // #ifdef APP-PLUS
  114. that.$set(that, 'pageHeight', app.globalData.windowHeight);
  115. // #endif
  116. },
  117. filters: {
  118. formatNumber(num) {
  119. num = Number(num);
  120. if (num == 0 || (num > 0 && num < 10000)) {
  121. return num + '';
  122. } else {
  123. return (num / 10000).toFixed(2) + '万';
  124. }
  125. }
  126. },
  127. onShow() {
  128. let that = this;
  129. if (that.isLogin) {
  130. this.loadData()
  131. };
  132. },
  133. methods: {
  134. // #ifdef MP
  135. editSuccess() {
  136. this.editModal = false;
  137. this.getUserInfo();
  138. },
  139. closeEdit() {
  140. this.editModal = false;
  141. },
  142. // #endif
  143. loadData(){
  144. let obj = this;
  145. getUserInfo().then(res => {
  146. obj.userInfo = res.data
  147. if(obj.userInfo.Staff && obj.userInfo.Staff.uid){
  148. //有多个身份
  149. obj.hasSwitch = true
  150. if(obj.userInfo.Staff.is_expert == 1){
  151. obj.actions = [{name:'用户端',url:'/pages/index/index'},{name:'专家端',url:'/pageExpert/index/index'}]
  152. }
  153. }else{
  154. obj.hasSwitch = false
  155. }
  156. obj.$store.commit("SETUID", res.data.uid);
  157. obj.$store.commit("UPDATE_USERINFO", res.data);
  158. });
  159. },
  160. //切换用户身份
  161. switchUser(){
  162. let obj = this;
  163. let switchInfo = uni.getStorageSync("switchInfo")
  164. console.log(switchInfo,'switchInfo')
  165. if(switchInfo){
  166. obj.description = '您当前在'+switchInfo.name
  167. }else{
  168. obj.description = '您当前在用户端'
  169. }
  170. this.showSwitch = true
  171. },
  172. //显示切换用户下拉框
  173. switchSelect(e){
  174. let switchInfo = uni.getStorageSync("switchInfo")
  175. if(switchInfo){
  176. if(switchInfo.name == e.name){
  177. uni.showToast({
  178. title: '您当前在'+ e.name,
  179. icon: 'none',
  180. })
  181. return
  182. }else{
  183. uni.setStorageSync('switchInfo', e);
  184. uni.reLaunch({
  185. url:e.url
  186. })
  187. }
  188. }else{
  189. if(e.name == '用户端'){
  190. uni.showToast({
  191. title: '您当前在用户端',
  192. icon: 'none'
  193. })
  194. }else{
  195. uni.setStorageSync('switchInfo', e);
  196. uni.reLaunch({
  197. url:e.url
  198. })
  199. }
  200. }
  201. },
  202. //联系客服
  203. callService(){
  204. this.$util.getCustomer(this.userInfo)
  205. },
  206. //跳转
  207. navTo(url) {
  208. if (this.isLogin == false) {
  209. toLogin()
  210. }else{
  211. uni.navigateTo({
  212. url:url
  213. })
  214. }
  215. },
  216. newDataStatus(val) {
  217. this.isFooter = val;
  218. },
  219. },
  220. };
  221. </script>
  222. <style scoped lang="scss">
  223. .container{
  224. width: 100%;
  225. height: 100%;
  226. background-color: #f1f7f4;
  227. }
  228. .topBox{
  229. width: 100%;
  230. padding: 15rpx 25rpx;
  231. background: url('/static/image/userBg.png') no-repeat;
  232. background-size: 100% 100%;
  233. padding-top: calc(88px + env(safe-area-inset-top));
  234. }
  235. .userBox{
  236. .userInfo{
  237. .avatarBox{
  238. position: relative;
  239. .avatar{
  240. width: 166rpx;
  241. height: 166rpx;
  242. border-radius: 100%;
  243. border: 4px solid #2AD5DD;
  244. }
  245. .level{
  246. position: absolute;
  247. background-color: #FFFFFF;
  248. border: 1px solid #2AD5DD;
  249. border-radius: 25rpx;
  250. font-size: 24rpx;
  251. color: #41B8C7;
  252. bottom: 0rpx;
  253. padding: 2rpx 0rpx;
  254. width: 150rpx;
  255. left: 8rpx;
  256. text-align: center;
  257. }
  258. }
  259. .nameBox{
  260. padding-left: 25rpx;
  261. .name{
  262. font-size: 40rpx;
  263. font-weight: bold;
  264. color: #262626;
  265. }
  266. .phone{
  267. font-size: 26rpx;
  268. color: #999999;
  269. padding-top: 15rpx;
  270. }
  271. }
  272. }
  273. .set{
  274. width: 90rpx;
  275. height: 90rpx;
  276. }
  277. }
  278. .statistic{
  279. margin-top: 50rpx;
  280. .statTpl{
  281. width: 50%;
  282. height: 210rpx;
  283. border-radius: 20rpx;
  284. }
  285. .bg1{
  286. background: url('/static/image/img16.png') no-repeat;
  287. background-size: 100% 100%;
  288. }
  289. .bg2{
  290. background: url('/static/image/img17.png') no-repeat;
  291. background-size: 100% 100%;
  292. }
  293. .bg3{
  294. background: url('/static/image/img18.png') no-repeat;
  295. background-size: 100% 100%;
  296. }
  297. .statName{
  298. font-size: 30rpx;
  299. padding-bottom: 14rpx;
  300. font-weight: bold;
  301. padding: 40rpx 0rpx 15rpx 37rpx;
  302. color: #FFFFFF;
  303. }
  304. .statNum{
  305. font-size: 60rpx;
  306. font-weight: bold;
  307. color:#FFFFFF;;
  308. padding: 0rpx 0rpx 0rpx 37rpx;
  309. }
  310. }
  311. .list-box {
  312. margin: 0rpx 25rpx;
  313. .user-list {
  314. border-radius: 28rpx;
  315. background: #ffffff;
  316. width: 100%;
  317. background: #ffffff;
  318. padding: 30rpx 30rpx;
  319. margin-bottom: 25rpx;
  320. .left-img {
  321. width: 40rpx;
  322. height: 40rpx;
  323. }
  324. view {
  325. padding-left: 20rpx;
  326. flex-grow: 1;
  327. font-size: 29rpx;
  328. font-weight: bold;
  329. color: #5d5d5d;
  330. }
  331. .right-img {
  332. width: 13rpx;
  333. height: 23rpx;
  334. }
  335. }
  336. }
  337. </style>