|
|
@@ -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>
|
