my.vue 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <template>
  2. <view class="content-view">
  3. <view style="width: 90%;background-color: #ffffff;margin-top: 180rpx;border-radius: 20rpx;
  4. box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2);display: flex;flex-direction: column;align-items: center;">
  5. <image style="width: 200rpx;height: 200rpx;margin-top: -100rpx;" src="/static/my/icon1.png"></image>
  6. <view style="margin-top: 10rpx;display: flex;flex-direction: row;justify-content: space-between;
  7. align-items: center;">
  8. <view style="background-color: #a0d9f6;width: fit-content;padding: 0rpx 20rpx;height: fit-content;
  9. border-radius: 20rpx;box-shadow: 2px 2px 0px 0 rgba(0, 0, 0);font-size: 26rpx;margin-right: 50rpx;">用户</view>
  10. <button class="transparent-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
  11. <text style="color: black;">{{phoneNum===''||phoneNum===null?'点击一键登录':phoneNum}}</text>
  12. </button>
  13. </view>
  14. </view>
  15. <view style="width: 90%;background-color: #ffffff;margin-top: 30rpx;border-radius: 20rpx;
  16. box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2);display: flex;flex-direction: column;">
  17. <text style="font-size: 36rpx;margin: 40rpx;">我的服务</text>
  18. <view @click="navToDetail(1)" style="display: flex;height: 90rpx;flex-direction: row;align-items: center;border-bottom: 1px solid #b2b2b2;margin: 0rpx 10rpx;">
  19. <image style="width: 60rpx;height: 60rpx;margin-left: 30rpx;" src="/static/my/icon2.png"></image>
  20. <text style="font-size: 28rpx;margin-left: 20rpx;">线索二维码</text>
  21. </view>
  22. <view @click="navToDetail(2)" style="display: flex;height: 90rpx;flex-direction: row;align-items: center;border-bottom: 1px solid #b2b2b2;margin: 0rpx 10rpx;">
  23. <image style="width: 60rpx;height: 60rpx;margin-left: 30rpx;" src="/static/my/icon3.png"></image>
  24. <text style="font-size: 28rpx;margin-left: 20rpx;">切换账号</text>
  25. </view>
  26. </view>
  27. </view>
  28. </template>
  29. <script>
  30. export default {
  31. data() {
  32. return {
  33. phoneNum:uni.getStorageSync('phonenumber')
  34. }
  35. },
  36. methods: {
  37. getPhoneNumber (e) {
  38. let _this = this
  39. if(e.detail.code !== undefined){
  40. _this.$http.post('appraisal/WeiXin/getPhoneNumber',{openid:uni.getStorageSync('openId'),code:e.detail.code}).then(res=>{
  41. console.log(res)
  42. this.phoneNum = res.data.phoneNumber;
  43. uni.setStorageSync('phonenumber',res.data.phoneNumber);
  44. }).catch(err=>{
  45. })
  46. }
  47. },
  48. navToDetail(type){
  49. if(type === 1){
  50. uni.navigateTo({
  51. url:'/pages/applicationList/index'
  52. })
  53. }
  54. if(type === 2){
  55. uni.navigateTo({
  56. url:'/pages/onlionAppointmentList/onlionAppointmentList'
  57. })
  58. }
  59. }
  60. }
  61. }
  62. </script>
  63. <style>
  64. .content-view{
  65. width: 100%;
  66. height: 100vh; /* 视口高度 */
  67. background-color: aliceblue;
  68. display: flex;
  69. flex-direction: column;
  70. align-items: center;
  71. }
  72. .transparent-btn {
  73. background-color: transparent !important;
  74. }
  75. .transparent-btn::after{
  76. border: none !important;
  77. }
  78. </style>