1

components.d.ts

@@ -10,6 +10,15 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     Confirm: typeof import('./src/components/Toast/Confirm.vue')['default']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     Footer: typeof import('./src/components/mobile/footer.vue')['default']
     Header: typeof import('./src/components/mobile/header.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
@@ -18,6 +27,7 @@ declare module '@vue/runtime-core' {
     IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
     IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
     IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
+    MemberTable: typeof import('./src/components/MemberTable.vue')['default']
     Mobile: typeof import('./src/components/mobile/index.vue')['default']
     Pc: typeof import('./src/components/pc/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
@@ -26,4 +36,7 @@ declare module '@vue/runtime-core' {
     Toast: typeof import('./src/components/Toast/Toast.vue')['default']
     WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }

src/views/pc/information/index.vue

@@ -1,26 +1,300 @@
-<script setup lang="ts">
-import { showConfirm } from '@/components/Toast'
-import { ref, computed, onMounted } from 'vue'
-import { useUserStore } from '@/stores/user'
-import { openPay, getOrderInfo, wxLogin } from '@/api/api'
-import { useRoute } from 'vue-router'
-import { GetRequest, getWeChatCode, getRemark } from '@/utils/index'
-import { useI18n } from 'vue-i18n'
-const route = useRoute()
-const { locale: language, t } = useI18n()
-const userStore = useUserStore();
-const isEur = userStore.isEur
-</script>
 <template>
-  <div class="pcPage">mobilePage
+  <div class="info-layout">
+    <div class="info">
+      <div class="s-tx">
+        <div class="card-img avatar" :class="info.incrementNum ? 'vip' : 'pub'" :style="{backgroundImage: info.head? `url(${info.head})`:`#e6e6e6`}"></div>
+        <div class="member-icon" v-if="info.incrementNum"></div>
+      </div>
+      <div>
+        <p class="nickname"><span>{{info.nickName||'--'}}</span></p>
+        <div class="contact-info">
+          <p><h-icon type="phone" class="info-icon" />{{info.userName||'--'}}</p>
+          <p><h-icon type="mail"  class="info-icon" />{{info.email||'--'}}</p>
+        </div>
+        <div class="ctrls-w">
+          <a href="javascript:;" @click="changeShowStatus('informationEdit')">编辑资料></a>
+          <a href="javascript:;" @click="changeShowStatus('editAddress')">编辑地址></a>
+          <a href="javascript:;" @click="changeShowStatus('changePassword')">修改密码></a>
+        </div>
+        <div class="pay-btn">
+          <span class="member-tag"></span>
+          去充值
+        </div>
+      </div>
+    </div>
+    
+    <div class="bottom-info">
+      <div class="bottom-info-right">
+        <div class="card info-right-card">
+          <div class="card-header">信息概览</div>
+          <div class="account-info">
+            <div class="info-item">
+              <div class="value">
+                <p>{{ info.incrementNum || 0 }}</p><span></span>
+              </div>
+              <p class="label">会员数量个</p>
+            </div>
+            <div class="info-item">
+              <div class="value">
+                <p>{{ info.downloadNumTotal - info.downloadNum }}</p><span></span>
+              </div>
+              <p class="label">过期下载次</p>
+            </div>
+            <div class="info-item">
+              <div class="value">
+                <p>{{ totalScene }}</p><span></span>
+              </div>
+              <p class="label">拍摄照片个</p>
+            </div>
+            <div class="info-item">
+              <div class="value">
+                <p>{{ info.cameraCount }}</p><span></span>
+              </div>
+              <p class="label">相机数量台</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 会员表格 -->
+    <MemberTable />
   </div>
 </template>
 
+<script setup lang="ts">
+import { ref, onMounted, defineOptions } from 'vue'
+import MemberTable from '@/components/MemberTable.vue'
+
+defineOptions({
+  name: 'InformationPage'
+})
+
+// 模拟数据结构
+const info = ref({
+  head: '',
+  nickName: '用户昵称',
+  userName: '手机号码',
+  email: '邮箱地址',
+  incrementNum: 1,
+  downloadNumTotal: 100,
+  downloadNum: 20,
+  cameraCount: 5
+})
+
+const showStatus = ref('')
+const totalScene = ref(10)
+
+const changeShowStatus = (component: string) => {
+  showStatus.value = component
+}
+
+onMounted(() => {
+  // 页面初始化逻辑
+})
+</script>
+
 <style lang="less" scoped>
-.pcPage {
-  background: #f7f7f7;
-  max-width: 100vw;
-  display: block;
-  color:#202020;
+.info-layout {
+  background: #f4f4f6!important;
+  min-height: 100vh;
+  padding-top: 0!important;
+}
+
+.card {
+  background: #fff;
+  padding: 30px;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  
+  .card-header {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: #333;
+  }
+}
+
+.info {
+  background: #fff;
+  padding: 30px;
+  font-size: 14px;
+  position: relative;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  
+  & > div {
+    display: inline-block;
+    vertical-align: middle;
+  }
+  
+  .s-tx {
+    position: relative;
+  }
+  
+  .avatar {
+    width: 100px;
+    height: 100px;
+    background-size: cover;
+    background-position: center center;
+    border-radius: 50%;
+    margin-right: 20px;
+    border: 2px solid;
+
+    &.vip {
+      border-color: #D8AF7C;
+    }
+
+    &.pub {
+      border-color: rgb(222,228,228);
+    }
+  }
+  
+  .member-icon {
+    width: 32px;
+    height: 32px;
+    background: url('@/assets/images/information/avatar_vip.png') no-repeat center center;
+    background-size: cover;
+    position: absolute;
+    right: 20px;
+    bottom: 0;
+  }
+  
+  .nickname {
+    width: calc(100% - 40px);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+  }
+  
+  .contact-info {
+    margin: 13px 0;
+    display: flex;
+    
+    & > p {
+      width: 150px;
+      display: flex;
+      align-items: center;
+      
+      .info-icon {
+        font-size: 16px;
+        margin-right: 6px;
+      }
+    }
+  }
+  
+  .ctrls-w {
+    a {
+      display: inline-block;
+      width: 150px;
+      color: #15bec8;
+      text-decoration: none;
+      
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.bottom-info {
+  margin: 30px 0;
+  display: flex;
+  
+  .bottom-info-right {
+    flex: 1;
+    background: #fff;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    
+    .strong {
+      font-size: 24px;
+      margin: 0 5px;
+      font-weight: bold;
+    }
+    
+    .account-info {
+      display: flex;
+    }
+    
+    .info-item {
+      padding-top: 40px;
+      flex: 1;
+      position: relative;
+      
+      &::after {
+        content: '';
+        display: block;
+        width: 1px;
+        height: 45px;
+        background: #ebebeb;
+        position: absolute;
+        top: 48px;
+        right: 0;
+      }
+      
+      &:last-child {
+        &::after {
+          display: none;
+        }
+      }
+      
+      .value {
+        font-size: 30px;
+        line-height: 36px;
+        text-align: center;
+        
+        p {
+          display: inline-block;
+        }
+        
+        span {
+          font-size: 14px;
+          line-height: 20px;
+          display: inline-block;
+          margin-left: 2px;
+        }
+      }
+      
+      .label {
+        font-size: 14px;
+        color: #909090;
+        line-height: 20px;
+        margin-top: 20px;
+        text-align: center;
+      }
+    }
+  }
+}
+
+.pay-btn {
+  width: 140px;
+  line-height: 40px;
+  background: linear-gradient(90deg, #FEE2B0 0%, #C89756 100%);
+  margin: 0 auto;
+  cursor: pointer;
+  font-weight: 400;
+  position: absolute;
+  bottom: 74px;
+  right: 30px;
+  color: #572D06;
+  text-align: center;
+  border-radius: 4px;
+  font-size: 16px;
+  text-decoration: none;
+  
+  .member-tag {
+    display: block;
+    width: 16px;
+    height: 16px;
+    background: linear-gradient(135deg, #D8AF7C 0%, #C89756 100%);
+    border-radius: 2px;
+    position: absolute;
+    right: 16px;
+    top: 0;
+  }
 }
 </style>