|
@@ -9,18 +9,31 @@
|
|
|
</view>
|
|
|
<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix"> </image>
|
|
|
<view v-if="!data.name" @click="handleToLogin" class="login-tip"> 点击登录 </view>
|
|
|
- <view v-if="data.name" @click="handleToInfo" class="user-info">
|
|
|
- <view class="u_title"> 用户名:{{ data.name }} </view>
|
|
|
+ <view v-if="data.name" class="user-info">
|
|
|
+ <view class="u_title"> {{ data.name }} </view>
|
|
|
+ <view class="u_title"> {{ data.phone }} </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view @click="handleToInfo" class="flex align-center">
|
|
|
- <text style="white-space: nowrap">个人信息</text>
|
|
|
- <view class="iconfont icon-right"></view>
|
|
|
- </view>
|
|
|
+ <view class="flex align-center"> </view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <view class="vip-card-box"> </view>
|
|
|
</view>
|
|
|
|
|
|
- <view class="content-section">
|
|
|
+ <view
|
|
|
+ class="content-section"
|
|
|
+ :style="[
|
|
|
+ {
|
|
|
+ transform: coverTransform,
|
|
|
+ transition: coverTransition,
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ @touchstart="coverTouchstart"
|
|
|
+ @touchmove="coverTouchmove"
|
|
|
+ @touchend="coverTouchend"
|
|
|
+ >
|
|
|
+ <image class="mine-image" src="@/static/images/mine/arc.png"></image>
|
|
|
+
|
|
|
<!-- <view class="mine-actions grid col-4 text-center">
|
|
|
<view class="action-item" @click="handleJiaoLiuQun">
|
|
|
<view class="iconfont icon-friendfill text-pink icon"></view>
|
|
@@ -44,25 +57,49 @@
|
|
|
<view class="list-cell list-cell-arrow" @click="handleToEditInfo">
|
|
|
<view class="menu-item-box">
|
|
|
<view class="iconfont icon-user menu-icon"></view>
|
|
|
- <view>编辑资料</view>
|
|
|
+ <view>个人资料</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="list-cell list-cell-arrow" @click="handleHelp">
|
|
|
+ <view class="list-cell list-cell-arrow" @click="handleToPwd">
|
|
|
<view class="menu-item-box">
|
|
|
- <view class="iconfont icon-help menu-icon"></view>
|
|
|
- <view>常见问题</view>
|
|
|
+ <view class="iconfont icon-password menu-icon"></view>
|
|
|
+ <view>修改密码</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="menu-list">
|
|
|
<view class="list-cell list-cell-arrow" @click="handleAbout">
|
|
|
<view class="menu-item-box">
|
|
|
<view class="iconfont icon-aixin menu-icon"></view>
|
|
|
<view>关于我们</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="list-cell list-cell-arrow" @click="handleToSetting">
|
|
|
+ <view class="list-cell list-cell-arrow" @click="handleHelp">
|
|
|
+ <view class="menu-item-box">
|
|
|
+ <view class="iconfont icon-help menu-icon"></view>
|
|
|
+ <view>常见问题</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-cell list-cell-arrow" @click="handleCleanTmp">
|
|
|
<view class="menu-item-box">
|
|
|
- <view class="iconfont icon-setting menu-icon"></view>
|
|
|
- <view>应用设置</view>
|
|
|
+ <view class="iconfont icon-clean menu-icon"></view>
|
|
|
+ <view>清理缓存</view>
|
|
|
+ <view style="margin: 0 15px 0 auto; font-size: 14px; color: #909399">{{ settingStores.$state.currentSize }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-cell list-cell-arrow" @click="handleToUpgrade">
|
|
|
+ <view class="menu-item-box">
|
|
|
+ <view class="iconfont icon-refresh menu-icon"></view>
|
|
|
+ <view>检查更新</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="cu-list menu">
|
|
|
+ <view class="cu-item item-box">
|
|
|
+ <view class="content text-center" @click="handleLogout">
|
|
|
+ <text class="text-black">退出登录</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -73,41 +110,53 @@
|
|
|
<script setup>
|
|
|
import config from "@/config";
|
|
|
import storage from "@/utils/storage";
|
|
|
-import { onLoad, onShow, onHide, onLaunch } from "@dcloudio/uni-app";
|
|
|
+import { onLoad, onShow, onHide, onLaunch, onNavigationBarButtonTap } from "@dcloudio/uni-app";
|
|
|
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
|
|
|
|
|
|
import useStores from "@/store/modules/user.js";
|
|
|
+import settingStore from "@/store/modules/setting.js";
|
|
|
const useStore = useStores();
|
|
|
+const settingStores = settingStore();
|
|
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
|
|
-const data = reactive({
|
|
|
- name: useStore.$state.name,
|
|
|
- version: getApp().globalData.config.appInfo.version,
|
|
|
-});
|
|
|
-
|
|
|
const avatar = computed(() => {
|
|
|
return useStore.$state.avatar;
|
|
|
});
|
|
|
+
|
|
|
const windowHeight = computed(() => {
|
|
|
return uni.getSystemInfoSync().windowHeight - 50;
|
|
|
});
|
|
|
|
|
|
-function handleToInfo() {
|
|
|
- proxy.$tab.navigateTo("/pages/mine/info/index");
|
|
|
-}
|
|
|
-function handleToEditInfo() {
|
|
|
- proxy.$tab.navigateTo("/pages/mine/info/edit");
|
|
|
-}
|
|
|
-function handleToSetting() {
|
|
|
- proxy.$tab.navigateTo("/pages/mine/setting/index");
|
|
|
-}
|
|
|
+const data = reactive({
|
|
|
+ name: useStore.$state.name,
|
|
|
+ phone: useStore.$state.phonenumber,
|
|
|
+ version: getApp().globalData.config.appInfo.version,
|
|
|
+
|
|
|
+ coverTransform: "translateY(0px)",
|
|
|
+ coverTransition: "0s",
|
|
|
+ moving: false,
|
|
|
+});
|
|
|
+
|
|
|
+const { coverTransform, coverTransition, moving } = toRefs(data);
|
|
|
+
|
|
|
+/**
|
|
|
+ * @点击登录
|
|
|
+ */
|
|
|
function handleToLogin() {
|
|
|
proxy.$tab.reLaunch("/pages/login");
|
|
|
}
|
|
|
+
|
|
|
+/**
|
|
|
+ * @点击头像
|
|
|
+ */
|
|
|
function handleToAvatar() {
|
|
|
proxy.$tab.navigateTo("/pages/mine/avatar/index");
|
|
|
}
|
|
|
+
|
|
|
+/**
|
|
|
+ * @退出登录
|
|
|
+ */
|
|
|
function handleLogout() {
|
|
|
proxy.$modal.confirm("确定注销并退出系统吗?").then(() => {
|
|
|
useStore.LogOut().then(() => {
|
|
@@ -115,19 +164,99 @@ function handleLogout() {
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
+
|
|
|
+/**
|
|
|
+ * @常见问题
|
|
|
+ */
|
|
|
function handleHelp() {
|
|
|
proxy.$tab.navigateTo("/pages/mine/help/index");
|
|
|
}
|
|
|
+
|
|
|
+/**
|
|
|
+ * @个人资料
|
|
|
+ */
|
|
|
+function handleToEditInfo() {
|
|
|
+ proxy.$tab.navigateTo("/pages/mine/info/index");
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * @修改密码
|
|
|
+ */
|
|
|
+function handleToPwd() {
|
|
|
+ proxy.$tab.navigateTo("/pages/mine/pwd/index");
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * @检查更新
|
|
|
+ */
|
|
|
+function handleToUpgrade() {
|
|
|
+ proxy.$modal.showToast("模块建设中~");
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * @关于我们
|
|
|
+ */
|
|
|
function handleAbout() {
|
|
|
proxy.$tab.navigateTo("/pages/mine/about/index");
|
|
|
}
|
|
|
-function handleJiaoLiuQun() {
|
|
|
- // proxy.$modal.showToast("QQ:1813914505");
|
|
|
- proxy.$modal.showToast("模块建设中~");
|
|
|
+
|
|
|
+/**
|
|
|
+ * @清理缓存
|
|
|
+ */
|
|
|
+function handleCleanTmp() {
|
|
|
+ // #ifdef H5
|
|
|
+ proxy.$modal.showToast("H5暂不支持此功能");
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ proxy.$setting.clearCache();
|
|
|
+ // #endif
|
|
|
}
|
|
|
-function handleBuilding() {
|
|
|
- proxy.$modal.showToast("模块建设中~");
|
|
|
+
|
|
|
+let startY = 0,
|
|
|
+ moveY = 0,
|
|
|
+ pageAtTop = true;
|
|
|
+
|
|
|
+function coverTouchstart(e) {
|
|
|
+ if (pageAtTop === false) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ coverTransition.value = "transform .1s linear";
|
|
|
+ startY = e.touches[0].clientY;
|
|
|
+}
|
|
|
+function coverTouchmove(e) {
|
|
|
+ moveY = e.touches[0].clientY;
|
|
|
+ let moveDistance = moveY - startY;
|
|
|
+ if (moveDistance < 0) {
|
|
|
+ moving.value = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ moving.value = true;
|
|
|
+ if (moveDistance >= 80 && moveDistance < 100) {
|
|
|
+ moveDistance = 80;
|
|
|
+ }
|
|
|
+ if (moveDistance > 0 && moveDistance <= 80) {
|
|
|
+ coverTransform.value = `translateY(${moveDistance}px)`;
|
|
|
+ }
|
|
|
+}
|
|
|
+function coverTouchend() {
|
|
|
+ if (moving.value === false) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ moving.value = false;
|
|
|
+ coverTransition.value = "transform 0.3s cubic-bezier(.21,1.93,.53,.64)";
|
|
|
+ coverTransform.value = "translateY(0px)";
|
|
|
}
|
|
|
+
|
|
|
+onLoad((options) => {});
|
|
|
+
|
|
|
+// 自定义导航事件
|
|
|
+onNavigationBarButtonTap((e) => {
|
|
|
+ console.log(e);
|
|
|
+ if (e.float == "right") {
|
|
|
+ proxy.$tab.navigateTo("/pages/mine/setting/index");
|
|
|
+ }
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
@@ -136,7 +265,7 @@ function handleBuilding() {
|
|
|
height: 100%;
|
|
|
|
|
|
.header-section {
|
|
|
- padding: 15px 15px 45px 15px;
|
|
|
+ padding: 55px 15px 0 15px;
|
|
|
background-color: #149eff;
|
|
|
color: white;
|
|
|
|
|
@@ -161,11 +290,33 @@ function handleBuilding() {
|
|
|
line-height: 30px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .vip-card-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ color: #f7d680;
|
|
|
+ height: 132px;
|
|
|
+ background: url("@/static/images/mine/vip-card.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ border-radius: 8px 8px 0 0;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ padding: 11px 13px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.content-section {
|
|
|
position: relative;
|
|
|
- top: -50px;
|
|
|
+ margin-top: -85px;
|
|
|
+ background-color: #f8f8f8;
|
|
|
+
|
|
|
+ .mine-image {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: -16px;
|
|
|
+ width: 100%;
|
|
|
+ height: 36upx;
|
|
|
+ }
|
|
|
|
|
|
.mine-actions {
|
|
|
margin: 0.625rem 0.625rem;
|
|
@@ -188,3 +339,18 @@ function handleBuilding() {
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.item-box {
|
|
|
+ background-color: #ffffff;
|
|
|
+ margin: 30rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ color: #303133;
|
|
|
+ font-size: 32rpx;
|
|
|
+}
|
|
|
+</style>
|