mine.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679
  1. <template>
  2. <view class="mine tn-safe-area-inset-bottom">
  3. <!-- 顶部自定义导航 -->
  4. <view class="top-backgroup">
  5. <image src='../../static/bg4.png' mode='widthFix' class='backgroud-image'></image>
  6. </view>
  7. <view class="about__wrap" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
  8. <!-- 图标logo/头像 -->
  9. <view class="tn-flex tn-flex-col-center tn-margin-bottom" @click="tn('/minePages/set')" style="margin-top: -450rpx;justify-content: center;">
  10. <view class="justify-content-item" >
  11. <view class="tn-flex tn-flex-col-center tn-flex-row-left">
  12. <view class="logo-pic tn-shadow">
  13. <view class="logo-image">
  14. <!-- <tn-avatar src="../../static/me2.png" :badge="true" size="xl" badgeIcon="star"></tn-avatar> -->
  15. <image v-if="personInfo.profilePhotoUrl" class="tn-shadow-blur" style="width: 140rpx;height: 140rpx;background-size: cover;" :src="personInfo.profilePhotoUrl"></image>
  16. <image v-if="!personInfo.profilePhotoUrl" class="tn-shadow-blur" style="width: 140rpx;height: 140rpx;background-size: cover;" src="../../static/me2.png"></image>
  17. <!-- <view class="tn-shadow-blur" style="background-image:url('https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1664005699053-assets/web-upload/8645ea3a-e0a9-4422-8364-cc5ede305c9f.jpeg');width: 110rpx;height: 110rpx;background-size: cover;">
  18. </view> -->
  19. </view>
  20. </view>
  21. </view>
  22. </view>
  23. </view>
  24. <!-- 没有授权,则显示这个授权按钮-->
  25. <view class="tn-flex tn-flex-row-between" @click="tn('/pages/login/login')" v-if="showLogin">
  26. <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
  27. <tn-button shape="round" backgroundColor="#1d60b1" fontColor="#ffffff" padding="20rpx 0" width="40%" shadow>
  28. <text class="tn-icon-wechat tn-padding-right-xs tn-text-xl"></text>
  29. <text class="">立即登录</text>
  30. </tn-button>
  31. </view>
  32. </view>
  33. <view class="about-shadow tn-margin-top-lg tn-padding-top-sm tn-padding-bottom-sm tn-bg-white" v-if="!showLogin">
  34. <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding-sm" @click="tn('/minePages/set')">
  35. <view class="justify-content-item">
  36. <view class="" style="font-size: 16px;">
  37. 个人信息
  38. </view>
  39. </view>
  40. <view class="justify-content-item tn-text-lg tn-color-grey">
  41. <view class="tn-color-gray tn-padding-top-xs">
  42. <view class="tn-icon-right"></view>
  43. </view>
  44. </view>
  45. </view>
  46. <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding-sm">
  47. <view class="justify-content-item">
  48. <view class="" style="font-size: 16px;">
  49. 用户名
  50. </view>
  51. </view>
  52. <view class="justify-content-item tn-text-lg tn-color-grey">
  53. <view class="tn-color-gray tn-padding-top-xs">
  54. {{personInfo.userRealName||personInfo.contactNickName||(personInfo.userName?'用户'+personInfo.userName.slice(-4):'')||'未登录'}}
  55. </view>
  56. </view>
  57. </view>
  58. <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding-sm" @click="showModal1">
  59. <view class="justify-content-item">
  60. <view class="" style="font-size: 16px;">
  61. 联系方式
  62. </view>
  63. </view>
  64. <view class="justify-content-item tn-text-lg tn-color-grey">
  65. <view class="tn-color-gray tn-padding-top-xs">
  66. {{personInfo.contactMethod||personInfo.userName||''}}
  67. </view>
  68. </view>
  69. </view>
  70. <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding-sm" @click="showModal1">
  71. <view class="justify-content-item">
  72. <view class="" style="font-size: 16px;">
  73. 手机号
  74. </view>
  75. </view>
  76. <view class="justify-content-item tn-text-lg tn-color-grey">
  77. <view class="tn-color-gray tn-padding-top-xs">
  78. {{personInfo.userName||'未登录'}}
  79. </view>
  80. </view>
  81. </view>
  82. <!-- <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding" @click="showModal1">
  83. <view class="justify-content-item">
  84. <view class="tn-text-bold tn-text-lg">
  85. 所属公司
  86. </view>
  87. </view>
  88. <view class="justify-content-item tn-text-lg tn-color-grey">
  89. <view class="tn-color-gray tn-padding-top-xs">
  90. 未绑定
  91. </view>
  92. </view>
  93. </view> -->
  94. </view>
  95. <!-- 方式15 start-->
  96. <view class="tn-flex tn-flex-row-between tn-bg-white about-shadow tn-margin-top-xl">
  97. <view class="tn-padding-sm tn-margin-xs" @click="tn('/pages/mine/need')">
  98. <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center tn-margin-left">
  99. <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #F3F2F7;color: #7C8191;">
  100. <view class="tn-icon-like"></view>
  101. </view>
  102. <view class="tn-text-center">
  103. <text class="tn-text-ellipsis">我的需求</text>
  104. </view>
  105. </view>
  106. </view>
  107. <view class="tn-padding-sm tn-margin-xs" @click="tn('/pages/mine/share')">
  108. <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
  109. <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #F3F2F7;color: #7C8191;">
  110. <view class="tn-icon-share-triangle"></view>
  111. </view>
  112. <view class="tn-text-center">
  113. <text class="tn-text-ellipsis">我的供应</text>
  114. </view>
  115. </view>
  116. </view>
  117. <view class="tn-padding-sm tn-margin-xs" @click="tn('/pages/mine/coll')">
  118. <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center tn-margin-right">
  119. <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #F3F2F7;color: #7C8191;">
  120. <view class="tn-icon-star"></view>
  121. </view>
  122. <view class="tn-text-center">
  123. <text class="tn-text-ellipsis">我的收藏</text>
  124. </view>
  125. </view>
  126. </view>
  127. </view>
  128. <!-- 方式15 end-->
  129. <view class="about-shadow tn-margin-top-lg tn-margin-bottom-lg tn-padding-top-sm tn-padding-bottom-sm">
  130. <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
  131. <button class="tn-flex tn-flex-col-center tn-button--clear-style" @click="showFeedback">
  132. <view
  133. class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #7C8191;">
  134. <view class="tn-icon-message-fill"></view>
  135. </view>
  136. <view class="tn-flex tn-flex-row-between" style="width: 100%;">
  137. <view class="tn-margin-left-sm">我有问题</view>
  138. <view class="tn-color-gray tn-icon-right"></view>
  139. </view>
  140. </button>
  141. </tn-list-cell>
  142. <!-- <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="callPhoneNumber" data-number="18266666666">
  143. <view class="tn-flex tn-flex-col-center">
  144. <view
  145. class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #7C8191;">
  146. <view class="tn-icon-tel-circle-fill"></view>
  147. </view>
  148. <view class="tn-margin-left-sm tn-flex-1">技术支持</view>
  149. <view
  150. class="tn-margin-left-sm tn-color-cat tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-gray--light tn-round">
  151. 158****8888</view>
  152. </view>
  153. </tn-list-cell> -->
  154. <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="showInfo()">
  155. <view class="tn-flex tn-flex-col-center">
  156. <view
  157. class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #7C8191;">
  158. <view class="tn-icon-safe-fill"></view>
  159. </view>
  160. <view class="tn-margin-left-sm tn-flex-1">用户声明</view>
  161. <view class="tn-color-gray tn-icon-right"></view>
  162. </view>
  163. </tn-list-cell>
  164. <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="showInfo2()">
  165. <view class="tn-flex tn-flex-col-center">
  166. <view
  167. class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #7C8191;">
  168. <view class="tn-icon-lock"></view>
  169. </view>
  170. <view class="tn-margin-left-sm tn-flex-1">隐私协议</view>
  171. <view class="tn-color-gray tn-icon-right"></view>
  172. </view>
  173. </tn-list-cell>
  174. <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click=showAbout()>
  175. <view class="tn-flex tn-flex-col-center">
  176. <view
  177. class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #7C8191;">
  178. <view class="tn-icon-help"></view>
  179. </view>
  180. <view class="tn-margin-left-sm tn-flex-1">了解速立保</view>
  181. <view class="tn-color-gray tn-icon-right"></view>
  182. </view>
  183. </tn-list-cell>
  184. <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" v-if="!showLogin" @click="showLog()">
  185. <view class="tn-flex tn-flex-col-center">
  186. <view
  187. class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="color: #7C8191;">
  188. <view class="tn-icon-logout"></view>
  189. </view>
  190. <view class="tn-margin-left-sm tn-flex-1">注销账户</view>
  191. <view class="tn-color-gray tn-icon-right"></view>
  192. </view>
  193. </tn-list-cell>
  194. </view>
  195. </view>
  196. <uni-popup ref="alertDialog" type="dialog">
  197. <uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定" title="确定注销账户吗?" content=" " @confirm="logOff()"
  198. @close="dialogClose"></uni-popup-dialog>
  199. </uni-popup>
  200. <view class='tn-tabbar-height'></view>
  201. </view>
  202. </template>
  203. <script>
  204. import request from '../../utils/request'
  205. import {
  206. uniShowModal
  207. } from '../../utils/uni_api'
  208. export default {
  209. name: 'Mine',
  210. data() {
  211. return {
  212. personInfo: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')):{},
  213. showLogin: false,
  214. msgType:''
  215. }
  216. },
  217. onReady() {
  218. this.$nextTick(() => {
  219. if(!uni.getStorageSync('userNo')){
  220. this.showLogin = true;
  221. }
  222. this.getContentRectInfo()
  223. })
  224. },
  225. methods: {
  226. // 获取内容容器的信息
  227. getContentRectInfo() {
  228. let that = this;
  229. request.post('/slbWxma/getPersonlInfo', {
  230. }).then(res => {
  231. console.warn(res);
  232. if(res&&res.success){
  233. that.personInfo = res.resultMap.userInfo||{};
  234. uni.setStorageSync('userInfo', JSON.stringify(res.resultMap.userInfo));
  235. that.showLogin = false;
  236. }
  237. console.warn(res);
  238. })
  239. },
  240. // 跳转
  241. tn(e) {
  242. if(!uni.getStorageSync('userNo')){
  243. uni.navigateTo({
  244. url: '/pages/login/login',
  245. });
  246. return false;
  247. }
  248. uni.navigateTo({
  249. url: e,
  250. });
  251. },
  252. showFeedback(){
  253. uni.navigateTo({
  254. url: '/pages/mine/addFeed',
  255. });
  256. },
  257. // 收货地址
  258. navAddress() {
  259. uni.chooseAddress({
  260. })
  261. },
  262. // 震动跳转
  263. navThanks(e) {
  264. wx.vibrateShort();
  265. uni.navigateTo({
  266. url: '/pages/login/login'
  267. })
  268. },
  269. //拨打固定电话
  270. callPhoneNumber() {
  271. uni.navigateTo({
  272. url: '/pages/login/login'
  273. })
  274. // uni.makePhoneCall({
  275. // phoneNumber: "18219128888",
  276. // });
  277. },
  278. // 复制开源地址
  279. copySource() {
  280. uni.setClipboardData({
  281. data: "等待上传插件市场",
  282. })
  283. },
  284. showInfo(){
  285. uni.navigateTo({
  286. url: '/pages/login/info?counted=1'
  287. })
  288. // uni.navigateTo({
  289. // url:'/pages/webview/web-view?url='+encodeURIComponent('http://slb-m.dev.ml1993.com/webview?title=用户服务协议&url='+'https://test-oss.lx-device.com/userFeedback/1732866523422nfH.docx'),
  290. // })
  291. },
  292. showInfo2() {
  293. uni.navigateTo({
  294. url:'/pages/webview/web-view?url='+encodeURIComponent('http://slb-m.dev.ml1993.com/webview?title=隐私协议&url='+'https://test-oss.lx-device.com/userFeedback/1732866629261TEn.docx'),
  295. })
  296. // uni.navigateTo({
  297. // url:'/pages/webview/web-view?url='+'https://test-oss.lx-device.com/userFeedback/1732866629261TEn.docx',
  298. // })
  299. },
  300. showAbout(){
  301. uni.navigateTo({
  302. url: '/pages/mine/about'
  303. })
  304. },
  305. showLog(){
  306. let that = this;
  307. uniShowModal('确定注销账户吗?', '', {
  308. showCancel: true,
  309. success: (res) => {
  310. console.error(res);
  311. if(res.confirm){
  312. that.logOff();
  313. }
  314. }
  315. })
  316. },
  317. //注销
  318. logOff(){
  319. const that = this;
  320. request.post('/slbWxma/logOff', {
  321. userNo: uni.getStorageSync('userNo'),
  322. }).then(res => {
  323. if (res&&res.success) {
  324. uni.showToast({
  325. title: '注销成功',
  326. icon: 'none'
  327. })
  328. uni.reLaunch({
  329. url: '/pages/index/index'
  330. })
  331. }else{
  332. uni.showToast({
  333. title: res.msg,
  334. icon: 'none'
  335. })
  336. }
  337. })
  338. }
  339. }
  340. }
  341. </script>
  342. <style lang="scss" scoped>
  343. .mine{
  344. max-height: 100vh;
  345. }
  346. /* 底部安全边距 start*/
  347. .tn-tabbar-height {
  348. min-height: 120rpx;
  349. height: calc(140rpx + env(safe-area-inset-bottom) / 2);
  350. height: calc(140rpx + constant(safe-area-inset-bottom));
  351. }
  352. .tn-color-cat{
  353. color: #1D2541;
  354. }
  355. .tn-bg-cat{
  356. background-color: #1D2541;
  357. }
  358. /* 自定义导航栏内容 start */
  359. .custom-nav {
  360. height: 100%;
  361. &__back {
  362. margin: auto 5rpx;
  363. font-size: 40rpx;
  364. margin-right: 10rpx;
  365. flex-basis: 5%;
  366. width: 100rpx;
  367. position: absolute;
  368. }
  369. }
  370. /* 自定义导航栏内容 end */
  371. /* 顶部背景图 end */
  372. /* 用户头像 start */
  373. .logo-image {
  374. width: 140rpx;
  375. height: 140rpx;
  376. position: relative;
  377. overflow: hidden;
  378. border-radius: 50%;
  379. }
  380. .logo-pic {
  381. background-size: cover;
  382. background-repeat: no-repeat;
  383. // background-attachment:fixed;
  384. background-position: top;
  385. border: 8rpx solid rgba(255,255,255,0.05);
  386. box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
  387. border-radius: 50%;
  388. overflow: hidden;
  389. // background-color: #FFFFFF;
  390. }
  391. /* 页面 start*/
  392. .about-shadow {
  393. border-radius: 15rpx;
  394. box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  395. }
  396. .about {
  397. &__wrap {
  398. position: relative;
  399. z-index: 1;
  400. margin: 20rpx 30rpx;
  401. }
  402. }
  403. /* 页面 end*/
  404. /* 图标容器15 start */
  405. .icon15 {
  406. &__item {
  407. width: 30%;
  408. background-color: #FFFFFF;
  409. border-radius: 10rpx;
  410. padding: 30rpx;
  411. margin: 20rpx 10rpx;
  412. transform: scale(1);
  413. transition: transform 0.3s linear;
  414. transform-origin: center center;
  415. &--icon {
  416. width: 100rpx;
  417. height: 100rpx;
  418. font-size: 60rpx;
  419. border-radius: 50%;
  420. margin-bottom: 18rpx;
  421. position: relative;
  422. z-index: 1;
  423. &::after {
  424. content: " ";
  425. position: absolute;
  426. z-index: -1;
  427. width: 100%;
  428. height: 100%;
  429. left: 0;
  430. bottom: 0;
  431. border-radius: inherit;
  432. opacity: 1;
  433. transform: scale(1, 1);
  434. background-size: 100% 100%;
  435. }
  436. }
  437. }
  438. }
  439. /* 图标容器12 start */
  440. .tn-three{
  441. position: absolute;
  442. top: 50%;
  443. right: 50%;
  444. bottom: 50%;
  445. left: 50%;
  446. transform: translate(-38rpx, -16rpx) rotateX(30deg) rotateY(20deg) rotateZ(-30deg);
  447. text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
  448. }
  449. .icon20 {
  450. &__item {
  451. width: 30%;
  452. background-color: #FFFFFF;
  453. border-radius: 10rpx;
  454. padding: 30rpx;
  455. margin: 20rpx 10rpx;
  456. transform: scale(1);
  457. transition: transform 0.3s linear;
  458. transform-origin: center center;
  459. &--icon {
  460. width: 100rpx;
  461. height: 100rpx;
  462. font-size: 60rpx;
  463. border-radius: 50%;
  464. margin-bottom: 18rpx;
  465. position: relative;
  466. z-index: 1;
  467. &::after {
  468. content: " ";
  469. position: absolute;
  470. z-index: -1;
  471. width: 100%;
  472. height: 100%;
  473. left: 0;
  474. bottom: 0;
  475. border-radius: inherit;
  476. opacity: 1;
  477. transform: scale(1, 1);
  478. background-size: 100% 100%;
  479. background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
  480. }
  481. }
  482. }
  483. }
  484. .button-vip {
  485. width: 100%;
  486. height: 150rpx;
  487. border-radius: 15rpx;
  488. position: relative;
  489. z-index: 1;
  490. &::after {
  491. content: " ";
  492. position: absolute;
  493. z-index: -1;
  494. width: 100%;
  495. height: 100%;
  496. left: 0;
  497. bottom: 0;
  498. border-radius: inherit;
  499. opacity: 1;
  500. transform: scale(1, 1);
  501. background-size: 100% 100%;
  502. background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
  503. }
  504. }
  505. /* 图标容器12 start */
  506. .icon12 {
  507. &__item {
  508. width: 30%;
  509. background-color: #FFFFFF;
  510. border-radius: 10rpx;
  511. padding: 30rpx;
  512. margin: 20rpx 10rpx;
  513. transform: scale(1);
  514. transition: transform 0.3s linear;
  515. transform-origin: center center;
  516. &--icon {
  517. width: 15rpx;
  518. height: 15rpx;
  519. font-size: 50rpx;
  520. border-radius: 50%;
  521. margin-bottom: 38rpx;
  522. position: relative;
  523. z-index: 1;
  524. &::after {
  525. content: " ";
  526. position: absolute;
  527. z-index: -1;
  528. width: 100%;
  529. height: 100%;
  530. left: 0;
  531. bottom: 0;
  532. border-radius: inherit;
  533. opacity: 1;
  534. transform: scale(1, 1);
  535. background-size: 100% 100%;
  536. }
  537. }
  538. }
  539. }
  540. /* 图标容器1 start */
  541. .icon1 {
  542. &__item {
  543. // width: 30%;
  544. background-color: #FFFFFF;
  545. border-radius: 10rpx;
  546. padding: 30rpx;
  547. margin: 20rpx 10rpx;
  548. transform: scale(1);
  549. transition: transform 0.3s linear;
  550. transform-origin: center center;
  551. &--icon {
  552. width: 40rpx;
  553. height: 40rpx;
  554. font-size: 40rpx;
  555. border-radius: 50%;
  556. position: relative;
  557. z-index: 1;
  558. &::after {
  559. content: " ";
  560. position: absolute;
  561. z-index: -1;
  562. width: 100%;
  563. height: 100%;
  564. left: 0;
  565. bottom: 0;
  566. border-radius: inherit;
  567. opacity: 1;
  568. transform: scale(1, 1);
  569. background-size: 100% 100%;
  570. background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
  571. }
  572. }
  573. }
  574. }
  575. /* 图标容器1 end */
  576. /* 顶部背景图 start */
  577. .top-backgroup {
  578. height: 450rpx;
  579. z-index: -1;
  580. .backgroud-image {
  581. width: 100%;
  582. height: 450rpx;
  583. // z-index: -1;
  584. }
  585. }
  586. /* 顶部背景图 end */
  587. </style>