|
@@ -1,40 +1,27 @@
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
+ <view :style="{ height: systemBar + 'px', backgroundColor: '#337bad' }" />
|
|
|
<view>
|
|
|
- <view class="head-wrap">
|
|
|
- <view class="content">
|
|
|
- <view class="avatar-wrap">
|
|
|
- <u-avatar :src="user_info.avatar" @click="onClickAvatar" size="80"></u-avatar>
|
|
|
- </view>
|
|
|
- <view class="user-nickname">
|
|
|
- <u--text
|
|
|
- size="18"
|
|
|
- bold
|
|
|
- :text="user_info.nickname ? user_info.nickname : 'fadsfdaf'"
|
|
|
- ></u--text>
|
|
|
- <u--text size="12" text="欢迎加入车旅程"></u--text>
|
|
|
+ <view class="head-info">
|
|
|
+ <view class="head-flex">
|
|
|
+ <view style="margin-right: 20rpx">
|
|
|
+ <u-avatar
|
|
|
+ :src="user_info.avatar"
|
|
|
+ size="80"
|
|
|
+ @tap="$Router.push('/pages/client/clientUser/personal')"
|
|
|
+ />
|
|
|
</view>
|
|
|
<view>
|
|
|
- <!-- 已登录 -->
|
|
|
- <!-- <view class="user-base" v-if="user_info.nickname"> -->
|
|
|
- <view class="user-base">
|
|
|
- <view class="btn-wrap">
|
|
|
- <u-icon
|
|
|
- size="30"
|
|
|
- @tap="$Router.push('/pages/client/clientUser/mine/setting')"
|
|
|
- name="setting"
|
|
|
- ></u-icon>
|
|
|
- </view>
|
|
|
+ <view class="nickname">{{ user_info.nickname }}</view>
|
|
|
+ <view class="flex">
|
|
|
+ <text class="setAuth" @tap="$Router.push('/pages/client/clientUser/mine/setting')">
|
|
|
+ 设置
|
|
|
+ </text>
|
|
|
+ <text class="setAuth">认证</text>
|
|
|
</view>
|
|
|
-
|
|
|
- <!-- 未登录 -->
|
|
|
- <!-- <view class="clickLogin" v-else @tap="$Router.push('/pages/login/index')">
|
|
|
- 点击登录/注册
|
|
|
- </view> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
- <!-- 收藏 -->
|
|
|
+ <!-- 列表 -->
|
|
|
<view class="Collect">
|
|
|
<u-grid :border="false" col="4">
|
|
|
<u-grid-item
|
|
@@ -45,14 +32,14 @@
|
|
|
<u-icon
|
|
|
:customStyle="{ paddingTop: 20 + 'rpx' }"
|
|
|
:name="listItem.name"
|
|
|
- :size="24"
|
|
|
+ :size="28"
|
|
|
color="#fff"
|
|
|
/>
|
|
|
<text class="grid-text">{{ listItem.title }}</text>
|
|
|
</u-grid-item>
|
|
|
</u-grid>
|
|
|
</view>
|
|
|
-
|
|
|
+ <!-- 订单 -->
|
|
|
<view class="order-out-box">
|
|
|
<view class="order-inner-box">
|
|
|
<u-grid :border="false" col="4" style="background-color: #fff">
|
|
@@ -61,11 +48,7 @@
|
|
|
:key="listIndex"
|
|
|
@tap="gotoOrder(listItem)"
|
|
|
>
|
|
|
- <u-icon
|
|
|
- :customStyle="{ paddingTop: 20 + 'rpx' }"
|
|
|
- :name="listItem.name"
|
|
|
- :size="34"
|
|
|
- ></u-icon>
|
|
|
+ <u-icon :name="listItem.name" :size="34" />
|
|
|
<text class="grid-text">{{ listItem.title }}</text>
|
|
|
</u-grid-item>
|
|
|
</u-grid>
|
|
@@ -74,175 +57,66 @@
|
|
|
</view>
|
|
|
|
|
|
<!-- 我的收益 -->
|
|
|
- <view class="income-out-box">
|
|
|
- <view class="income-inner-box" @click="handlerSkipMyProfit">
|
|
|
- <view class="income-head">
|
|
|
- <text class="my-income">我的钱包</text>
|
|
|
- <u-icon name="arrow-right" />
|
|
|
- </view>
|
|
|
- <view class="income-content">
|
|
|
- <u-grid :border="false" col="4" bgColor="#fff">
|
|
|
- <u-grid-item v-for="(listItem, listIndex) in incomeList" :key="listIndex">
|
|
|
- <view class="num-box">{{ listItem.num }}元</view>
|
|
|
- <view class="num-title">{{ listItem.title }}</view>
|
|
|
- </u-grid-item>
|
|
|
- </u-grid>
|
|
|
- </view>
|
|
|
+ <view class="income" @click="handlerSkipMyProfit">
|
|
|
+ <view class="income-head">
|
|
|
+ <text class="my-income">我的钱包</text>
|
|
|
+ <u-icon name="arrow-right" />
|
|
|
</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 预约列表 -->
|
|
|
- <view class="appointList">
|
|
|
- <u-cell
|
|
|
- icon="setting-fill"
|
|
|
- title="预约列表"
|
|
|
- isLink
|
|
|
- url="/pages/client/clientUser/mine/appoint/appoint"
|
|
|
- />
|
|
|
- <u-cell icon="setting-fill" title="我要开店" isLink />
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="other-out-box">
|
|
|
- <view class="other-inner-box">
|
|
|
- <u-cell-group :border="false">
|
|
|
- <u-cell
|
|
|
- v-for="(item, index) in listData"
|
|
|
- :key="index"
|
|
|
- size="large"
|
|
|
- :border="false"
|
|
|
- :icon="item.icon"
|
|
|
- :title="item.title"
|
|
|
- isLink
|
|
|
- :url="item.url"
|
|
|
- ></u-cell>
|
|
|
- <u-cell
|
|
|
- :border="false"
|
|
|
- icon="setting-fill"
|
|
|
- title="客服中心"
|
|
|
- size="large"
|
|
|
- isLink
|
|
|
- @tap="handleServiceCenterClick"
|
|
|
- />
|
|
|
- <u-cell
|
|
|
- :border="false"
|
|
|
- icon="setting-fill"
|
|
|
- title="商务合作"
|
|
|
- size="large"
|
|
|
- isLink
|
|
|
- @tap="handleBusinessCooperationClick"
|
|
|
- />
|
|
|
- <u-cell
|
|
|
- icon="setting-fill"
|
|
|
- title="意见反馈"
|
|
|
- size="large"
|
|
|
- isLink
|
|
|
- @tap="handleFeedbackClick"
|
|
|
- />
|
|
|
- </u-cell-group>
|
|
|
+ <view class="income-content">
|
|
|
+ <u-grid :border="false" col="4" bgColor="#fff">
|
|
|
+ <u-grid-item v-for="(listItem, listIndex) in incomeList" :key="listIndex">
|
|
|
+ <view class="num-box">{{ listItem.num }}元</view>
|
|
|
+ <view class="num-title">{{ listItem.title }}</view>
|
|
|
+ </u-grid-item>
|
|
|
+ </u-grid>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <TapList></TapList>
|
|
|
</view>
|
|
|
- <tabbar currentTab="clientMessage" />
|
|
|
+ <tabbar currentTab="clientMine" />
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { maintainUserInfo } from '@/api/client/mine.js';
|
|
|
-import RichTextWithCopy from '@/components/RichTextWithCopy/RichTextWithCopy';
|
|
|
import { collectList, oderList, incomeList, listData } from './mine';
|
|
|
-
|
|
|
+import TapList from './TapList.vue';
|
|
|
export default {
|
|
|
components: {
|
|
|
- RichTextWithCopy,
|
|
|
+ TapList,
|
|
|
},
|
|
|
-
|
|
|
data() {
|
|
|
return {
|
|
|
- content: '这里是客服中心内容,用户可以复制<br>第一行文本<br>第二行文本<br>第三行文本',
|
|
|
+ system: {},
|
|
|
+ systemBar: 0,
|
|
|
+ user_info: [],
|
|
|
collectList,
|
|
|
oderList,
|
|
|
incomeList,
|
|
|
listData,
|
|
|
- user_info: {}, // 个人信息
|
|
|
- avatar: '/pages/static', // 用于存储图片路径
|
|
|
};
|
|
|
},
|
|
|
-
|
|
|
- async mounted() {
|
|
|
- await this.handlerInitUserMessage();
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- /* 隐藏原生的tabbar */
|
|
|
- uni.hideTabBar({
|
|
|
- animation: false,
|
|
|
- });
|
|
|
+ mounted() {
|
|
|
+ this.handlerInitUserMessage();
|
|
|
},
|
|
|
methods: {
|
|
|
- // 获取当前用户信息
|
|
|
- handlerInitUserMessage() {
|
|
|
- maintainUserInfo().then(res => {
|
|
|
- this.user_info = res.data;
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 点击头像
|
|
|
- async onClickAvatar() {
|
|
|
- try {
|
|
|
- const res = await uni.showActionSheet({
|
|
|
- itemList: ['拍照', '从相册选择'],
|
|
|
- });
|
|
|
-
|
|
|
- if (res.tapIndex === 0) {
|
|
|
- // 用户选择拍照
|
|
|
- this.takePhoto();
|
|
|
- } else if (res.tapIndex === 1) {
|
|
|
- // 用户选择从相册选择
|
|
|
- this.chooseImage();
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.error(error);
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 拍照
|
|
|
- takePhoto() {
|
|
|
- uni.chooseImage({
|
|
|
- sourceType: ['camera'],
|
|
|
- count: 1,
|
|
|
+ getHeight() {
|
|
|
+ wx.getSystemInfo({
|
|
|
success: res => {
|
|
|
- const tempFilePaths = res.tempFilePaths;
|
|
|
- // 调用上传图片的方法
|
|
|
- this.uploadAvatar(tempFilePaths[0]);
|
|
|
- },
|
|
|
- fail: error => {
|
|
|
- console.error(error);
|
|
|
+ this.system = res;
|
|
|
},
|
|
|
});
|
|
|
+ this.systemBar = this.system.statusBarHeight;
|
|
|
+ console.log(this.systemBar);
|
|
|
},
|
|
|
- //从相册中选择
|
|
|
- chooseImage() {
|
|
|
- uni.chooseImage({
|
|
|
- sourceType: ['album'],
|
|
|
- count: 1,
|
|
|
- success: res => {
|
|
|
- const tempFilePaths = res.tempFilePaths;
|
|
|
- // 调用上传图片的方法
|
|
|
- this.uploadAvatar(tempFilePaths[0]);
|
|
|
- },
|
|
|
- fail: error => {
|
|
|
- console.error(error);
|
|
|
- },
|
|
|
+ // 获取当前用户信息
|
|
|
+ handlerInitUserMessage() {
|
|
|
+ maintainUserInfo().then(res => {
|
|
|
+ this.user_info = res.data;
|
|
|
});
|
|
|
},
|
|
|
|
|
|
- // 上传头像
|
|
|
- uploadAvatar(filePath) {
|
|
|
- // 在这里实现上传头像的逻辑,将filePath作为参数传入
|
|
|
- const newImagePath = api.uploadImage(filePath);
|
|
|
- this.user_info.avatar = newImagePath;
|
|
|
- this.$forceUpdate(); // 手动触发组件的重新渲染
|
|
|
- },
|
|
|
-
|
|
|
// 点击跳转到全部订单
|
|
|
gotoOrder(item) {
|
|
|
uni.navigateTo({
|
|
@@ -256,175 +130,14 @@ export default {
|
|
|
url: '/pages/client/clientUser/myProfit',
|
|
|
});
|
|
|
},
|
|
|
- // 点击 "客服中心" 菜单项
|
|
|
- handleServiceCenterClick() {
|
|
|
- uni.showModal({
|
|
|
- title: '客服中心',
|
|
|
- content: '<rich-text-with-copy :content="content"></rich-text-with-copy>',
|
|
|
- showCancel: false,
|
|
|
- confirmText: '知道了',
|
|
|
- richContent: true, // 使用富文本显示内容
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 点击 "商务合作" 菜单项
|
|
|
- handleBusinessCooperationClick() {
|
|
|
- uni.showModal({
|
|
|
- title: '商务合作',
|
|
|
- content: '111111111111111111',
|
|
|
- showCancel: false,
|
|
|
- confirmText: '知道了',
|
|
|
- richContent: true, // 使用富文本显示内容
|
|
|
- });
|
|
|
- },
|
|
|
+ },
|
|
|
|
|
|
- // 点击 "意见反馈" 菜单项
|
|
|
- handleFeedbackClick() {
|
|
|
- uni.showModal({
|
|
|
- title: '意见反馈',
|
|
|
- content: '',
|
|
|
- showCancel: false,
|
|
|
- confirmText: '提交',
|
|
|
- contentInput: true, // 使用输入框内容
|
|
|
- inputPlaceHolder: '请输入您的意见反馈,最多500个字符',
|
|
|
- inputMaxLength: 500, // 设置输入框最大长度
|
|
|
- success: res => {
|
|
|
- if (res.confirm) {
|
|
|
- // 获取用户输入的意见反馈内容
|
|
|
- const feedback = res.inputValue;
|
|
|
- console.log('用户的意见反馈内容:', feedback);
|
|
|
- // 在这里可以将用户的反馈内容进行处理,比如发送给服务器等操作
|
|
|
- }
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
+ onLoad() {
|
|
|
+ this.getHeight();
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.container {
|
|
|
- min-height: 100vh;
|
|
|
- background-color: #efefef;
|
|
|
-}
|
|
|
-
|
|
|
-/* 顶部登录 */
|
|
|
-.head-wrap {
|
|
|
- background-color: #c8c9cc;
|
|
|
- height: 390rpx;
|
|
|
- padding-top: 40rpx;
|
|
|
-
|
|
|
- .content {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 38rpx 0 0 36rpx;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .user-nickname {
|
|
|
- margin-left: -215rpx;
|
|
|
- margin-top: 50rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .clickLogin {
|
|
|
- font-size: 48rpx;
|
|
|
- color: #ffffff;
|
|
|
- margin-top: 40rpx;
|
|
|
- margin-left: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .avatar-wrap {
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
-
|
|
|
- .user-base {
|
|
|
- margin-left: 10rpx;
|
|
|
- vertical-align: middle;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-evenly;
|
|
|
-
|
|
|
- .btn-wrap {
|
|
|
- width: 160rpx;
|
|
|
- margin-top: 40rpx;
|
|
|
- margin-right: -25rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .Collect {
|
|
|
- margin-top: 10rpx;
|
|
|
-
|
|
|
- // 宫格颜色
|
|
|
- .grid-text {
|
|
|
- font-size: 30rpx;
|
|
|
- color: #fff;
|
|
|
- margin-top: 5rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .order-out-box {
|
|
|
- margin-top: 30rpx;
|
|
|
- padding: 10rpx 16rpx;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .order-inner-box {
|
|
|
- font-size: 30rpx;
|
|
|
- padding-bottom: 30rpx;
|
|
|
- background-color: $uni-bg-color;
|
|
|
- border-radius: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.income-out-box {
|
|
|
- margin-top: 110rpx;
|
|
|
- padding: 10rpx 16rpx;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .income-inner-box {
|
|
|
- padding: 20rpx;
|
|
|
- background-color: $uni-bg-color;
|
|
|
-
|
|
|
- .income-head {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .my-income {
|
|
|
- color: $uni-color-primary;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .income-content {
|
|
|
- .num-box {
|
|
|
- padding: 20rpx 0;
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: $uni-text-color;
|
|
|
- }
|
|
|
-
|
|
|
- .num-title {
|
|
|
- font-size: 28rpx;
|
|
|
- color: $uni-text-color-grey;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.other-out-box {
|
|
|
- margin-top: 10rpx;
|
|
|
- padding: 20rpx 16rpx;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .other-inner-box {
|
|
|
- background-color: $uni-bg-color;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.appointList {
|
|
|
- background-color: #fff;
|
|
|
- margin: 10rpx 16rpx 0 16rpx;
|
|
|
-}
|
|
|
-</style>
|
|
|
+@import './index.scss';
|
|
|
+</style>
|