my.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568
  1. <template>
  2. <view class="my">
  3. <MyNav title="我的" bgColor="" :backIcon="false"></MyNav>
  4. <view class="topCard" :style="{backgroundImage:'url('+imgurl+')'}">
  5. <!-- 用户名 -->
  6. <view class="user">
  7. <view v-if="admin.avatar">
  8. <button class="avatar" open-type="chooseAvatar" @click="handleGetWechatUserInfo">
  9. <image class="user-avatar" style="height: 176rpx;width: 176rpx;border-radius: 50%;"
  10. :src="admin.avatar? admin.avatar : '/static/icon/avatar.png'" />
  11. </button>
  12. <view class="userinfo" @click="goPersonData">
  13. <text class="unlogin">{{admin.nickname}}</text>
  14. </view>
  15. </view>
  16. <view v-else>
  17. <image class="user-avatar" src="/static/icon/avatar.png" style="height: 176rpx;width: 176rpx;">
  18. </image>
  19. <view class="userinfo">
  20. <text class="unlogin" v-if="!islogin" @click="login">请点击登录</text>
  21. </view>
  22. </view>
  23. <image src="/static/icon/setting.png" @click="goSetting"
  24. style="width: 44rpx;height: 44rpx; position: absolute;top:0rpx;right: 24rpx;"></image>
  25. </view>
  26. <!-- 会员 -->
  27. <view class="membership" @click="goJoin">
  28. <view class="flex">
  29. <view style="display: flex;align-items: center;">
  30. <image style="width: 68rpx ;height: 62rpx;" src="../../static/icon/vip.png"></image>
  31. <text class="join">加入会员</text>
  32. </view>
  33. <view style="display: flex;align-items: center;">
  34. <text class="gojoin">去加入</text>
  35. <image style="width: 12rpx ;height: 20rpx;" src="../../static/icon/right05.png"></image>
  36. </view>
  37. </view>
  38. </view>
  39. <!-- 订单 -->
  40. <view class="orders">
  41. <view class="nav">
  42. <view class="myorder">我的订单</view>
  43. <view class="more">
  44. <text style="margin-right: 8rpx;" @click="goMyorders(0)">查看更多</text>
  45. <image style="width: 12rpx ;height: 20rpx;" src="../../static/icon/right05.png"></image>
  46. </view>
  47. </view>
  48. <view class="content">
  49. <view class="flexbox" @click="goMyorders(1)">
  50. <view
  51. style="width: 56rpx; height: 56rpx; display: flex;align-items: center;justify-content: center; ">
  52. <image style="width: 56rpx ;height: 42rpx;" src="../../static/icon/exchange.png"></image>
  53. </view>
  54. <text>待兑换</text>
  55. </view>
  56. <view class="flexbox" @click="goMyorders(2)">
  57. <view
  58. style="width: 56rpx; height: 56rpx;display: flex;align-items: center;justify-content: center; ">
  59. <image style="width: 54rpx ;height: 52rpx;" src="../../static/icon/shipments.png"></image>
  60. </view>
  61. <text>待发货</text>
  62. </view>
  63. <view class="flexbox" @click="goMyorders(3)">
  64. <view
  65. style="width: 56rpx; height: 56rpx;display: flex;align-items: center;justify-content: center; ">
  66. <image style="width: 56rpx ;height: 56rpx;" src="../../static/icon/Receipt.png"></image>
  67. </view>
  68. <text>待收货</text>
  69. </view>
  70. <view class="flexbox" @click="goMyorders(4)">
  71. <view
  72. style="width: 56rpx; height: 56rpx;display: flex;align-items: center;justify-content: center; ">
  73. <image style="width: 54rpx ;height: 54rpx;" src="../../static/icon/finish.png"></image>
  74. </view>
  75. <text>已完成</text>
  76. </view>
  77. </view>
  78. </view>
  79. </view>
  80. <!-- 列表 -->
  81. <view style="padding:0 30rpx;">
  82. <view class="list" v-for="(item,index) in list" :key="index" @click="goDetail(index)">
  83. <view class="title">{{item.title}}</view>
  84. <view class="container">{{item.content}}</view>
  85. <image src="../../static/icon/right.png"></image>
  86. </view>
  87. </view>
  88. <u-modal @close="closeMask" closeOnClickOverlay="true" :show="modal.show" :title="modal.title"
  89. :show-confirm-button="false">
  90. <view>
  91. <button class="avatar" open-type="chooseAvatar" @chooseavatar="handleChooseAvatar">
  92. <image class="user-avatar" style="height: 176rpx;width: 176rpx;border-radius: 50%;"
  93. :src="modal.avatar?modal.avatar:'/static/icon/avatar.png'" />
  94. </button>
  95. <input class="avatar" type="nickname" :value="modal.nickname" placeholder="填写昵称"
  96. @change="handleChangeNickname">
  97. <button class="confirm" @click="handleConfirmWechatUserInfo">提交</button>
  98. </view>
  99. </u-modal>
  100. <!-- 底部导航栏 -->
  101. <view style="height: 140rpx; width: 100%;"></view>
  102. <tab-bar checked="my"></tab-bar>
  103. </view>
  104. </template>
  105. <script>
  106. // 引入组件
  107. import TabBar from '../../components/TabBar/tabbar.vue'
  108. import MyNav from "@/components/my-nav/my-nav.vue"
  109. export default {
  110. // 注册组件
  111. components: {
  112. TabBar,
  113. MyNav
  114. },
  115. data() {
  116. return {
  117. modal: {
  118. show: false,
  119. title: '用户信息获取',
  120. nickname: '',
  121. avatar: ''
  122. },
  123. admin: '',
  124. // 顶部背景图
  125. imgurl: 'http://t9.9026.com/imgs/bg@2x.png',
  126. // 是否登录
  127. islogin: false,
  128. // 列表内容
  129. list: [{
  130. title: '积分',
  131. content: '积分兑换奖品'
  132. }, {
  133. title: '奖品',
  134. content: '查看所有奖品'
  135. }, {
  136. title: '点赞',
  137. content: '查看所有点赞'
  138. }]
  139. };
  140. },
  141. onShow() {
  142. this.admin = this.$store.getters.userInfo
  143. console.log(this.admin);
  144. },
  145. methods: {
  146. //关闭遮罩层
  147. closeMask() {
  148. this.modal.show = false
  149. },
  150. // 微信获取头像
  151. handleGetWechatUserInfo() {
  152. console.log(1111);
  153. this.modal.show = true
  154. this.modal.nickname = this.admin.nickname
  155. this.modal.avatar = this.admin.avatar
  156. },
  157. //提交微信名称和头像
  158. handleConfirmWechatUserInfo() {
  159. if (!this.modal.avatar) {
  160. this.$u.toast('请上传头像')
  161. return
  162. }
  163. if (!this.modal.nickname) {
  164. this.$u.toast('请填写昵称')
  165. return
  166. }
  167. this.$loading('数据提交中...')
  168. this.$api.my.update({
  169. avatar: this.modal.avatar,
  170. nickname: this.modal.nickname
  171. }).then(res => {
  172. this.$hideLoading()
  173. this.$store.dispatch('user/info', res.data)
  174. this.admin = this.$store.getters.userInfo
  175. this.modal.show = false
  176. })
  177. },
  178. // 微信获取头像
  179. handleChooseAvatar(e) {
  180. console.log(e.detail);
  181. this.modal.avatar = e.detail.avatarUrl
  182. },
  183. handleChangeNickname(res) {
  184. this.modal.nickname = res.detail.value
  185. },
  186. // 跳转登录页
  187. login() {
  188. uni.navigateTo({
  189. url: '/pages/login/login'
  190. })
  191. },
  192. // 跳转个人信息
  193. goPersonData() {
  194. uni.navigateTo({
  195. url: '/pages/my/PersonalData/personalData'
  196. })
  197. },
  198. // 跳转设置页面
  199. goSetting() {
  200. if (this.admin == undefined) {
  201. uni.navigateTo({
  202. url: '/pages/login/login'
  203. })
  204. } else {
  205. uni.navigateTo({
  206. url: '/pages/my/setting/setting'
  207. })
  208. }
  209. },
  210. // 跳转积分页
  211. goDetail(index) {
  212. if (this.admin == undefined) {
  213. uni.navigateTo({
  214. url: '/pages/login/login'
  215. })
  216. } else {
  217. if (index == 0) {
  218. uni.navigateTo({
  219. url: '/pages/my/integral/integral'
  220. })
  221. } else if (index == 1) {
  222. uni.navigateTo({
  223. url: '/pages/my/prize/prize'
  224. })
  225. } else {
  226. uni.navigateTo({
  227. url: '/pages/my/Kudos/Kudos'
  228. })
  229. }
  230. }
  231. },
  232. // 跳转订单页
  233. goMyorders(index) {
  234. if (this.admin == undefined) {
  235. uni.navigateTo({
  236. url: '/pages/login/login'
  237. })
  238. } else {
  239. switch (index) {
  240. case 0:
  241. uni.navigateTo({
  242. url: '/pages/my/myorders/orders'
  243. })
  244. break;
  245. case 1:
  246. uni.navigateTo({
  247. url: '/pages/my/myorders/orders?isActive=' + 1
  248. })
  249. break;
  250. case 2:
  251. uni.navigateTo({
  252. url: '/pages/my/myorders/orders?isActive=' + 2
  253. })
  254. break;
  255. case 3:
  256. uni.navigateTo({
  257. url: '/pages/my/myorders/orders?isActive=' + 3
  258. })
  259. break;
  260. case 4:
  261. uni.navigateTo({
  262. url: '/pages/my/myorders/orders?isActive=' + 4
  263. })
  264. break;
  265. }
  266. }
  267. },
  268. //获取当前页面路径
  269. getPageUrl() {
  270. const pages = getCurrentPages();
  271. console.log(pages,'--------->pages')
  272. if(pages.length==1){
  273. const currentPage = pages[0];
  274. let pageUrl = `/${currentPage.route}`;
  275. return pageUrl
  276. console.log('当前页面url:', pageUrl);
  277. }else{
  278. const currentPage = pages[pages.length - 1];
  279. let pageUrl = `/${currentPage.route}`;
  280. return pageUrl
  281. console.log('当前页面url:', pageUrl);
  282. }
  283. },
  284. // 跳转其他小程序
  285. goJoin() {
  286. let _this = this
  287. wx.navigateToMiniProgram({
  288. appId: 'wx255b58f0992b3c53', //appid
  289. path: 'newUIMain/enrollment/enrollment', //path
  290. extraData: { //参数
  291. foo: 'bar'
  292. },
  293. // envVersion: 'develop', //开发版develop 开发版 trial 体验版 release 正式版
  294. success(res) {
  295. let page = _this.getPageUrl()
  296. let user_id = ''
  297. if (_this.admin != null) {
  298. user_id = _this.admin.id
  299. } else {
  300. user_id = 0
  301. }
  302. console.log('成功', page)
  303. _this.$api.my.userMemberAdd({
  304. user_id,
  305. page,
  306. }).then(res => {
  307. console.log(res.data);
  308. })
  309. // 打开成功
  310. },
  311. fail(e) {
  312. console.log(e, '失败')
  313. }
  314. })
  315. },
  316. // 上传头像
  317. uploadAvatar() {
  318. // let img = []
  319. // uni.chooseImage({
  320. // count: 1, //默认9
  321. // sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  322. // sourceType: ['album'], //从相册选择
  323. // success: function (res) {
  324. // console.log(JSON.stringify(res.tempFilePaths));
  325. // img = res.tempFilePaths[0]
  326. // uni.uploadFile({
  327. // //后端接口地址
  328. // url: `${baseUrl}` + '/api/attachment/upload',
  329. // //图片临时地址
  330. // filePath: img,
  331. // // 上传文件类型
  332. // formData: {
  333. // tag: 'avatar'
  334. // },
  335. // success: (res) => {
  336. // //后端返回的图片名称
  337. // let data = JSON.parse(res.data)
  338. // // _this.formData.avatar = data.data.file
  339. // },
  340. // })
  341. // },
  342. // });
  343. }
  344. }
  345. }
  346. </script>
  347. <style lang="scss" scoped>
  348. $pageColor:#F9F9F9;
  349. $bgColor:#FFFFFF;
  350. .my {
  351. height: 100%;
  352. background-color: $pageColor;
  353. }
  354. .avatar {
  355. width: 176rpx;
  356. height: 176rpx;
  357. border-radius: 50%;
  358. }
  359. .topCard {
  360. width: 100%;
  361. border-radius: 0rpx 0rpx 16rpx 16rpx;
  362. padding: 40rpx 30rpx 38rpx 30rpx;
  363. box-sizing: border-box;
  364. background-position: center;
  365. background-repeat: no-repeat;
  366. background-size: cover;
  367. .user {
  368. width: 690rpx;
  369. height: 176rpx;
  370. position: relative;
  371. margin-bottom: 38rpx;
  372. .user-avatar {
  373. object-fit: cover;
  374. object-position: center;
  375. }
  376. .userinfo {
  377. position: absolute;
  378. top: 38rpx;
  379. left: 200rpx;
  380. .unlogin {
  381. width: 220rpx;
  382. font-size: 44rpx;
  383. font-family: PingFang-SC-Heavy, PingFang-SC;
  384. font-weight: 500;
  385. color: #FFFFFF;
  386. display: block;
  387. margin-top: 20rpx;
  388. }
  389. .username {
  390. width: 184rpx;
  391. height: 44rpx;
  392. font-size: 44rpx;
  393. font-family: PingFang-SC-Heavy, PingFang-SC;
  394. font-weight: 500;
  395. color: #FFFFFF;
  396. line-height: 44rpx;
  397. display: block;
  398. margin-bottom: 24rpx;
  399. }
  400. .userId {
  401. font-size: 32rpx;
  402. font-family: PingFang-SC-Medium, PingFang-SC;
  403. font-weight: 400;
  404. color: #FFFFFF;
  405. line-height: 32rpx;
  406. }
  407. }
  408. }
  409. .membership {
  410. width: 690rpx;
  411. height: 110rpx;
  412. background: $bgColor;
  413. border-radius: 8rpx;
  414. display: flex;
  415. align-items: center;
  416. padding-left: 28rpx;
  417. padding-right: 24rpx;
  418. box-sizing: border-box;
  419. margin-bottom: 24rpx;
  420. .flex {
  421. display: flex;
  422. align-items: center;
  423. justify-content: space-between;
  424. height: 68rpx;
  425. width: 650rpx;
  426. .join {
  427. font-size: 36rpx;
  428. font-family: PingFang-SC-Bold, PingFang-SC;
  429. font-weight: 600;
  430. color: #627885;
  431. margin-left: 8rpx;
  432. }
  433. .gojoin {
  434. font-size: 30rpx;
  435. font-family: PingFang-SC-Bold, PingFang-SC;
  436. font-weight: 600;
  437. color: #627885;
  438. margin-right: 8rpx;
  439. }
  440. }
  441. }
  442. .orders {
  443. width: 690rpx;
  444. background: $bgColor;
  445. border-radius: 8rpx;
  446. padding: 40rpx 30rpx 36rpx 36rpx;
  447. box-sizing: border-box;
  448. .nav {
  449. height: 50rpx;
  450. width: 633rpx;
  451. display: flex;
  452. align-items: center;
  453. justify-content: space-between;
  454. .myorder {
  455. font-size: 28rpx;
  456. font-family: PingFang-SC-Heavy, PingFang-SC;
  457. font-weight: 800;
  458. color: #333333;
  459. }
  460. .more {
  461. font-size: 28rpx;
  462. font-family: PingFang-SC-Bold, PingFang-SC;
  463. font-weight: bold;
  464. color: #627885;
  465. }
  466. }
  467. .content {
  468. display: flex;
  469. align-items: center;
  470. justify-content: space-between;
  471. padding: 0 20rpx;
  472. margin-top: 72rpx;
  473. .flexbox {
  474. display: flex;
  475. flex-direction: column;
  476. align-items: center;
  477. text {
  478. margin-top: 16rpx;
  479. font-size: 28rpx;
  480. font-family: PingFang-SC-Medium, PingFang-SC;
  481. font-weight: 500;
  482. color: #627885;
  483. }
  484. }
  485. }
  486. }
  487. }
  488. .list {
  489. width: 100%;
  490. padding-top: 32rpx;
  491. padding-bottom: 32rpx;
  492. border-bottom: 2rpx solid #F0F0F0;
  493. display: flex;
  494. flex-direction: column;
  495. justify-content: center;
  496. position: relative;
  497. &:first-child {
  498. padding-top: 50rpx;
  499. }
  500. .title {
  501. font-size: 36rpx;
  502. font-family: PingFang-SC-Bold, PingFang-SC;
  503. font-weight: bold;
  504. color: #333333;
  505. margin-bottom: 16rpx;
  506. }
  507. .container {
  508. font-size: 28rpx;
  509. font-family: PingFang-SC-Medium, PingFang-SC;
  510. font-weight: 500;
  511. color: #333333;
  512. }
  513. image {
  514. width: 12rpx;
  515. height: 20rpx;
  516. position: absolute;
  517. top: 70rpx;
  518. right: 0rpx;
  519. }
  520. }
  521. </style>