移动端页面修改

jialh

2024-12-12 2df0108fa8d914876fc9a6435f9184b3e9bce86c

 pages/user/user.vue

@@ -11,126 +11,159 @@
            </view>
         </view>
      </view>

      <view class="vip-card-box">
         <view class="vip-content">
            <view class="vip-title">
               VIP会员
      <!-- 登录状态 -->
      <view class="isLogin" v-if="userName">
         <view class="vip-card-box">
            <view class="vip-content">
               <view class="vip-title">
                  VIP会员
               </view>
               <button class="open-vip-btn" @click="goVip">立即开通</button>
            </view>
            <button class="open-vip-btn" @click="goVip">立即开通</button>
            <view class="vip-description">
               领取会员卡，即可享受会员专享特权
            </view>
         </view>
         <view class="vip-description">
            领取会员卡，即可享受会员专享特权

         <view class="cover-container">
            <image class="arc" src="/static/arc.png"></image>
            <!-- 浏览历史 -->
            <view class="history-section icon">
               <list-cell icon="icon-shoucang_xuanzhongzhuangtai" iconColor="#54b4ef" title="收藏记录"
                  @eventClick="navTo('/pages/user/reportCenter')"></list-cell>
               <list-cell icon="icon-dizhi" iconColor="#5fcda2" title="我的企业"
                  @eventClick="navTo('/pages/user/company')"></list-cell>
               <list-cell icon="icon-shezhi1" iconColor="#e07472" title="我的设置" border=""
                  @eventClick="navTo('/pages/set/set')"></list-cell>
            </view>
         </view>
         <!-- 退出登录按钮 -->
         <view class="logout-section">
            <button class="logout-button" @click="logout">退出登录</button>
         </view>
      </view>

      <view class="cover-container">
         <image class="arc" src="/static/arc.png"></image>
         <!-- 浏览历史 -->
         <view class="history-section icon">
            <list-cell icon="icon-shoucang_xuanzhongzhuangtai" iconColor="#54b4ef" title="收藏记录"
               @eventClick="navTo('/pages/user/reportCenter')"></list-cell>
            <list-cell icon="icon-dizhi" iconColor="#5fcda2" title="我的企业"
               @eventClick="navTo('/pages/user/company')"></list-cell>
            <list-cell icon="icon-shezhi1" iconColor="#e07472" title="我的设置" border=""
               @eventClick="navTo('/pages/set/set')"></list-cell>
      <!-- 未登录状态 -->
      <view class="isLogin" v-else>
         <view class="vip-card-box">
            <view class="vip-content">
               <view class="vip-title">
                  VIP会员
               </view>
               <button class="open-vip-btn" @click="toLogin">立即开通</button>
            </view>
            <view class="vip-description">
               领取会员卡，即可享受会员专享特权
            </view>
         </view>

         <view class="cover-container">
            <image class="arc" src="/static/arc.png"></image>
            <!-- 浏览历史 -->
            <view class="history-section icon" @click="toLogin">
               <list-cell icon="icon-shoucang_xuanzhongzhuangtai" iconColor="#54b4ef" title="收藏记录"></list-cell>
               <list-cell icon="icon-dizhi" iconColor="#5fcda2" title="我的企业"></list-cell>
               <list-cell icon="icon-shezhi1" iconColor="#e07472" title="我的设置" border=""></list-cell>
            </view>
         </view>
      </view>

      <!-- 退出登录按钮 -->
      <view class="logout-section">
         <button class="logout-button" @click="logout">退出登录</button>
      </view>
		
   </view>
</template>

<script>
import listCell from '@/components/mix-list-cell';
import { mapState } from 'vuex';
   import listCell from '@/components/mix-list-cell';
   import {
      mapState
   } from 'vuex';

export default {
   components: {
      listCell
   },
   data() {
      return {
         avator: uni.getStorageSync('avator'),
         userName: uni.getStorageSync('userName'),
         coverTransform: 'translateY(0px)',
         coverTransition: '0s',
         moving: false,
      }
   },
   onLoad() { },
   computed: {
      ...mapState(['hasLogin', 'userInfo'])
   },
   methods: {
      navTo(item) {
         uni.navigateTo({
            url: item
         })
   export default {
      components: {
         listCell
      },
      goVip() {
         uni.navigateTo({
            url: '/pages/user/vip'
         })

      data() {
         return {
            avator: uni.getStorageSync('avator'),
            userName: uni.getStorageSync('userName'),
            coverTransform: 'translateY(0px)',
            coverTransition: '0s',
            moving: false,
         }
      },
      logout() {
         // 调用退出登录接口
         this.$http.post('/User/Logout').then(res => {
            if (res.Check) {
               // 清除本地存储的用户信息
               uni.clearStorageSync();
               // 提示用户已退出登录
               this.$msg('已退出登录');
      onLoad() {},
      computed: {
         ...mapState(['hasLogin', 'userInfo'])
      },
      methods: {
         navTo(item) {
            uni.navigateTo({
               url: item
            })
         },
         goVip() {
            uni.navigateTo({
               url: '/pages/user/vip'
            })
         },
         toLogin() {
            uni.navigateTo({
               url: '/pages/public/quick'
            })
         },
         logout() {
            // 调用退出登录接口
            this.$http.post('/User/Logout').then(res => {
               if (res.Check) {
                  // 清除本地存储的用户信息
                  uni.clearStorageSync();
                  // 提示用户已退出登录
                  this.$msg('已退出登录');

               // 跳转到登录页面或其他页面
               setTimeout(() => {
                  uni.reLaunch({
                     url: '/pages/public/quick'
                  });
               }, 500);
            } else {
               // 处理退出登录失败的情况
               this.$msg('退出登录失败');
            }
         }).catch(error => {
            // 处理网络请求错误
            console.error('请求失败', error);
            this.$msg('网络请求失败，请稍后再试');
         });
                  // 跳转到登录页面或其他页面
                  setTimeout(() => {
                     uni.reLaunch({
                        url: '/pages/index/index'
                     });
                  }, 500);
               } else {
                  // 处理退出登录失败的情况
                  this.$msg('退出登录失败');
               }
            }).catch(error => {
               // 处理网络请求错误
               console.error('请求失败', error);
               this.$msg('网络请求失败，请稍后再试');
            });
         }
      }
   }
}
</script>

<style lang='scss'>
%flex-center {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
   %flex-center {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
   }

%section {
   display: flex;
   justify-content: space-around;
   align-content: center;
   background: #fff;
   border-radius: 10upx;
}
   %section {
      display: flex;
      justify-content: space-around;
      align-content: center;
      background: #fff;
      border-radius: 10upx;
   }

.user-section {
   height: 320upx;
   padding: 100upx 30upx 0;
   position: relative;
   background: url('/static/index/beijing.png') center no-repeat;
   background-size: cover;
   /* 背景图片覆盖整个区域 */
   .user-section {
      height: 320upx;
      padding: 100upx 30upx 0;
      position: relative;
      background: url('../../static/index/beijing.png') center no-repeat;
      background-size: cover;
      /* 背景图片覆盖整个区域 */

   /* .bg {
      /* .bg {
      position: absolute;
      left: 0;
      top: 0;
@@ -139,178 +172,178 @@
      filter: blur(1px);
      opacity: .7;
   } */
}

.user-info-box {
   height: 180upx;
   display: flex;
   align-items: center;
   position: relative;
   z-index: 1;

   .portrait {
      width: 130upx;
      height: 130upx;
      border: 5upx solid #fff;
      border-radius: 50%;
   }

   .username {
      font-size: $font-lg + 6upx;
      color: $font-color-dark;
      margin-left: 20upx;
   }
}

.vip-card-box {
   display: flex;
   flex-direction: column;
   color: #36343c;
   background: #b6ceff;
   border-radius: 16upx;
   overflow: hidden;
   position: relative;
   padding: 20upx 24upx;
   margin: 20upx 30upx;

   .vip-content {
      align-items: center;
      margin-bottom: 20upx;

      .vip-title {
         font-size: $font-base + 2upx;
         color: #36343c;
         float: left;
         line-height: 80upx;
      }

      .open-vip-btn {
         float: right;
         height: 80upx;
         text-align: center;
         line-height: 80upx;
         font-size: 28upx;
         color: #36343c;
         border-radius: 20px;
         background: linear-gradient(left, #f9e6af, #ffd465);
      }
   }

   .vip-description {
      font-size: $font-sm;
      color: #36343c;
   }
}

.cover-container {
   background: $page-color-base;
   margin-top: 30upx;
   padding: 0 30upx;
   position: relative;
   background: #f5f5f5;
   padding-bottom: 20upx;

   .arc {
      position: absolute;
      left: 0;
      top: -34upx;
      width: 100%;
      height: 36upx;
   }
}

.logout-section {
   margin-top: 30upx;
   padding: 0 30upx;

   .logout-button {
      width: 100%;
      background-color: #3D9AFF;
      color: white;
      font-size: $font-base + 2upx;
      border: none;
      border-radius: 8upx;
      padding: 10upx 0;
      line-height: 68upx;
   }
}

.tj-sction {
   @extend %section;

   .tj-item {
      @extend %flex-center;
      flex-direction: column;
      height: 140upx;
      font-size: $font-sm;
      color: #75787d;
   }

   .num {
      font-size: $font-lg;
      color: $font-color-dark;
      margin-bottom: 8upx;
   }
}

.order-section {
   @extend %section;
   padding: 28upx 0;
   margin-top: 20upx;

   .order-item {
      @extend %flex-center;
      width: 120upx;
      height: 120upx;
      border-radius: 10upx;
      font-size: $font-sm;
      color: $font-color-dark;
   }

   .yticon {
      font-size: 48upx;
      margin-bottom: 18upx;
      color: #fa436a;
   }

   .icon-shouhoutuikuan {
      font-size: 44upx;
   }
}

.history-section {
   padding: 30upx 0 0;
   margin-top: 20upx;
   background: #fff;
   border-radius: 10upx;

   .sec-header {
   .user-info-box {
      height: 180upx;
      display: flex;
      align-items: center;
      font-size: $font-base;
      color: $font-color-dark;
      line-height: 40upx;
      margin-left: 30upx;
      position: relative;
      z-index: 1;

      .portrait {
         width: 130upx;
         height: 130upx;
         border: 5upx solid #fff;
         border-radius: 50%;
      }

      .username {
         font-size: $font-lg + 6upx;
         color: white;
         margin-left: 20upx;
      }
   }

   .vip-card-box {
      display: flex;
      flex-direction: column;
      color: #36343c;
      background: #b6ceff;
      border-radius: 16upx;
      overflow: hidden;
      position: relative;
      padding: 20upx 24upx;
      margin: 20upx 30upx;

      .vip-content {
         align-items: center;
         margin-bottom: 20upx;

         .vip-title {
            font-size: $font-base + 2upx;
            color: #36343c;
            float: left;
            line-height: 80upx;
         }

         .open-vip-btn {
            float: right;
            height: 80upx;
            text-align: center;
            line-height: 80upx;
            font-size: 28upx;
            color: #36343c;
            border-radius: 20px;
            background: linear-gradient(left, #f9e6af, #ffd465);
         }
      }

      .vip-description {
         font-size: $font-sm;
         color: #36343c;
      }
   }

   .cover-container {
      background: $page-color-base;
      margin-top: 30upx;
      padding: 0 30upx;
      position: relative;
      background: #f5f5f5;
      padding-bottom: 20upx;

      .arc {
         position: absolute;
         left: 0;
         top: -34upx;
         width: 100%;
         height: 36upx;
      }
   }

   .logout-section {
      margin-top: 30upx;
      padding: 0 30upx;

      .logout-button {
         width: 100%;
         background-color: #3D9AFF;
         color: white;
         font-size: $font-base + 2upx;
         border: none;
         border-radius: 8upx;
         padding: 10upx 0;
         line-height: 68upx;
      }
   }

   .tj-sction {
      @extend %section;

      .tj-item {
         @extend %flex-center;
         flex-direction: column;
         height: 140upx;
         font-size: $font-sm;
         color: #75787d;
      }

      .num {
         font-size: $font-lg;
         color: $font-color-dark;
         margin-bottom: 8upx;
      }
   }

   .order-section {
      @extend %section;
      padding: 28upx 0;
      margin-top: 20upx;

      .order-item {
         @extend %flex-center;
         width: 120upx;
         height: 120upx;
         border-radius: 10upx;
         font-size: $font-sm;
         color: $font-color-dark;
      }

      .yticon {
         font-size: 48upx;
         margin-bottom: 18upx;
         color: #fa436a;
      }

      .icon-shouhoutuikuan {
         font-size: 44upx;
         color: #5eba8f;
         margin-right: 16upx;
      }
   }

   .history-section {
      padding: 30upx 0 0;
      margin-top: 20upx;
      background: #fff;
      border-radius: 10upx;

      .sec-header {
         display: flex;
         align-items: center;
         font-size: $font-base;
         color: $font-color-dark;
         line-height: 40upx;
         margin-left: 30upx;

         .yticon {
            font-size: 44upx;
            color: #5eba8f;
            margin-right: 16upx;
            line-height: 40upx;
         }
      }

      .h-list {
         white-space: nowrap;
         padding: 30upx 30upx 0;

         image {
            display: inline-block;
            width: 160upx;
            height: 160upx;
            margin-right: 20upx;
            border-radius: 10upx;
         }
      }
   }

   .h-list {
      white-space: nowrap;
      padding: 30upx 30upx 0;

      image {
         display: inline-block;
         width: 160upx;
         height: 160upx;
         margin-right: 20upx;
         border-radius: 10upx;
      }
   }
}
</style>