|
|
@@ -4,29 +4,45 @@
|
|
|
<view class="head" @click="$navTo('/pages/personalProfile/index')">
|
|
|
<view class="flex fd_c">
|
|
|
<view class="text-36 text-070202 text-500">用户名称用户名称</view>
|
|
|
- <image class="vip_icon" src="/static/logo.png"></image>
|
|
|
+ <view class="vip_year_bg"> lv.1年 </view>
|
|
|
+ <!-- <view class="vip_bg">普通会员</view> -->
|
|
|
</view>
|
|
|
- <image class="image" src="/static/logo.png"></image>
|
|
|
+ <!--
|
|
|
+ 未登录时头像
|
|
|
+ /static/image/my/no_login_avatar.png
|
|
|
+ -->
|
|
|
+ <image
|
|
|
+ class="image"
|
|
|
+ src="/static/image/my/my_default_avatar.png"
|
|
|
+ ></image>
|
|
|
</view>
|
|
|
|
|
|
<view class="info">
|
|
|
- <view class="info_item">
|
|
|
- <view class="text-40 text-400 text-070202">1322</view>
|
|
|
+ <view class="info_item" @click="$navTo('/pages/myTakeOrder/index')">
|
|
|
+ <view class="text-40 text-400 text-070202">
|
|
|
+ {{ tagList.takeOrders || 0 }}
|
|
|
+ </view>
|
|
|
<view class="text-24 text-500 text-C8C9C6 mgt-8">我的接单</view>
|
|
|
</view>
|
|
|
<view class="line"></view>
|
|
|
- <view class="info_item">
|
|
|
- <view class="text-40 text-400 text-070202">322</view>
|
|
|
+ <view class="info_item" @click="$navTo('/pages/myBounty/index')">
|
|
|
+ <view class="text-40 text-400 text-070202">
|
|
|
+ {{ tagList.myBounty || 0 }}
|
|
|
+ </view>
|
|
|
<view class="text-24 text-500 text-C8C9C6 mgt-8">我的悬赏</view>
|
|
|
</view>
|
|
|
<view class="line"></view>
|
|
|
- <view class="info_item">
|
|
|
- <view class="text-40 text-400 text-070202">32</view>
|
|
|
+ <view class="info_item" @click="$navTo('/pages/activateVIP/index')">
|
|
|
+ <view class="text-40 text-400 text-070202">
|
|
|
+ {{ tagList.myVip || 0 }}
|
|
|
+ </view>
|
|
|
<view class="text-24 text-500 text-C8C9C6 mgt-8">开通会员</view>
|
|
|
</view>
|
|
|
<view class="line"></view>
|
|
|
- <view class="info_item">
|
|
|
- <view class="text-40 text-400 text-070202">22</view>
|
|
|
+ <view class="info_item" @click="$navTo('/pages/inviteFriends/index')">
|
|
|
+ <view class="text-40 text-400 text-070202">
|
|
|
+ {{ tagList.invite || 0 }}
|
|
|
+ </view>
|
|
|
<view class="text-24 text-500 text-C8C9C6 mgt-8">邀请好友</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -46,12 +62,38 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <image class="radio-16 h-128 w mgt-24" src="/static/logo.png"></image>
|
|
|
- <image class="radio-16 h-144 w mgt-24" src="/static/logo.png"></image>
|
|
|
+ <view class="new_hand">
|
|
|
+ <view class="top">
|
|
|
+ <view class="flex ai_center">
|
|
|
+ <view class="lv">V1</view>
|
|
|
+ <view class="mgl-12 text-white text-24 text-400">新手上路</view>
|
|
|
+ </view>
|
|
|
+ <view class="btn"> 查看攻略 </view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom">
|
|
|
+ <view class="progress_bg flex1">
|
|
|
+ <view
|
|
|
+ class="progress_bar"
|
|
|
+ :style="{
|
|
|
+ width: `${progressBar * 100}%`,
|
|
|
+ borderRadius: progressBar === 1 ? '64rpx' : '64rpx 0 0 64rpx',
|
|
|
+ }"
|
|
|
+ ></view>
|
|
|
+ </view>
|
|
|
+ <view class="mgl-16 text-18 text-400 text-white"
|
|
|
+ >等级越高赚钱越多
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <image
|
|
|
+ class="radio-16 h-144 w mgt-24"
|
|
|
+ src="/static/image/my/post_reward.png"
|
|
|
+ ></image>
|
|
|
|
|
|
<view class="w mgt-24 pdb-30">
|
|
|
<view
|
|
|
- class="w h-96 flex jc_between ai_center mgt-8 menu_item"
|
|
|
+ class="w h-96 flex jc_between ai_center mgt-8 border-bottom-F2F2F7"
|
|
|
v-for="item in menuList"
|
|
|
:key="item.name"
|
|
|
@click="$navTo(item.pagePath)"
|
|
|
@@ -61,9 +103,15 @@
|
|
|
<view class="mgl-20 text-28 text-400 text-303030">
|
|
|
{{ item.name }}
|
|
|
</view>
|
|
|
- <view v-if="item.name === '我的消息'" class="badge">99+</view>
|
|
|
+ <view v-if="item.badge" class="badge">{{
|
|
|
+ badgeNum(item.badge)
|
|
|
+ }}</view>
|
|
|
</view>
|
|
|
- <image class="w-48 h-48" src="/static/logo.png" mode="scaleToFill" />
|
|
|
+ <image
|
|
|
+ class="w-48 h-48"
|
|
|
+ src="/static/image/common/right_arrow_icon.png"
|
|
|
+ mode="scaleToFill"
|
|
|
+ />
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -74,64 +122,57 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
title: "我的",
|
|
|
- tagList: [
|
|
|
- {
|
|
|
- icon: "/static/logo.png",
|
|
|
- name: "我的接单",
|
|
|
- pagePath: "/pages/myTakeOrder/index",
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "/static/logo.png",
|
|
|
- name: "我的悬赏",
|
|
|
- pagePath: "/pages/myBounty/index",
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "/static/logo.png",
|
|
|
- name: "开通会员",
|
|
|
- pagePath: "/pages/activateVIP/index",
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "/static/logo.png",
|
|
|
- name: "邀请好友",
|
|
|
- pagePath: "/pages/inviteFriends/index",
|
|
|
- },
|
|
|
- ],
|
|
|
+ progressBar: 0.2, //新手上路 进度条%
|
|
|
+ tagList: {
|
|
|
+ takeOrders: 1322, //我的接单
|
|
|
+ myBounty: 322, //我的悬赏
|
|
|
+ myVip: 32, //开通会员
|
|
|
+ invite: 22, //邀请好友
|
|
|
+ },
|
|
|
+
|
|
|
menuList: [
|
|
|
{
|
|
|
- icon: "/static/logo.png",
|
|
|
+ icon: "/static/image/my/tools_icon.png",
|
|
|
name: "我的工具包",
|
|
|
pagePath: "/pages/myTools/index",
|
|
|
},
|
|
|
{
|
|
|
- icon: "/static/logo.png",
|
|
|
+ icon: "/static/image/my/message_icon.png",
|
|
|
name: "我的消息",
|
|
|
pagePath: "/pages/myMessage/index",
|
|
|
+ badge: 100,
|
|
|
},
|
|
|
{
|
|
|
- icon: "/static/logo.png",
|
|
|
+ icon: "/static/image/my/safeguard_rights_icon.png",
|
|
|
name: "维权",
|
|
|
pagePath: "/pages/safeguardRights/index",
|
|
|
},
|
|
|
{
|
|
|
- icon: "/static/logo.png",
|
|
|
+ icon: "/static/image/my/earnings_icon.png",
|
|
|
name: "收益统计",
|
|
|
pagePath: "/pages/statisticsEarnings/index",
|
|
|
},
|
|
|
{
|
|
|
- icon: "/static/logo.png",
|
|
|
+ icon: "/static/image/my/shop_icon.png",
|
|
|
name: "我的店铺",
|
|
|
pagePath: "/pages/myShop/index",
|
|
|
+ badge: 10,
|
|
|
},
|
|
|
{
|
|
|
- icon: "/static/logo.png",
|
|
|
+ icon: "/static/image/my/setting_icon.png",
|
|
|
name: "系统设置",
|
|
|
pagePath: "/pages/setting/index",
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
},
|
|
|
+ computed: {},
|
|
|
onLoad() {},
|
|
|
- methods: {},
|
|
|
+ methods: {
|
|
|
+ badgeNum(num) {
|
|
|
+ return num > 99 ? "99+" : num;
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
@@ -147,8 +188,8 @@ export default {
|
|
|
width: 100vw;
|
|
|
height: 568rpx;
|
|
|
flex-shrink: 0;
|
|
|
-// background: linear-gradient(to bottom, #ffd8bf, #ffffff);
|
|
|
- background: linear-gradient(180deg, #ffd8bf 10%, #fff 65%);
|
|
|
+ // background: linear-gradient(to bottom, #ffd8bf, #ffffff);
|
|
|
+ background: linear-gradient(180deg, #ffd8bf 10%, #fff 65%);
|
|
|
|
|
|
.head {
|
|
|
margin-top: 134rpx;
|
|
|
@@ -228,10 +269,6 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.menu_item {
|
|
|
- border-bottom: 2rpx solid #f2f2f7;
|
|
|
-}
|
|
|
-
|
|
|
.badge {
|
|
|
display: inline-flex;
|
|
|
height: 40rpx;
|
|
|
@@ -250,4 +287,106 @@ export default {
|
|
|
left: 188rpx;
|
|
|
top: -20rpx;
|
|
|
}
|
|
|
+
|
|
|
+.vip_year_bg {
|
|
|
+ margin-top: 16rpx;
|
|
|
+ width: 112rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ background: url("/static//image/my/vip_year_bg.png");
|
|
|
+ background-size: cover;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #ffffff;
|
|
|
+ font-family: "MiSans VF";
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ letter-spacing: 0.66rpx;
|
|
|
+ padding-left: 42rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.vip_bg {
|
|
|
+ margin-top: 16rpx;
|
|
|
+ width: 144rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ background: url("/static//image/my/vip_bg.png");
|
|
|
+ background-size: cover;
|
|
|
+ padding-left: 42rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ font-family: "MiSans VF";
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ letter-spacing: -0.66rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.new_hand {
|
|
|
+ margin-top: 24rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 128rpx;
|
|
|
+ background: url("/static//image/my/new_hand_bg.png");
|
|
|
+ background-size: cover;
|
|
|
+ padding-top: 24rpx;
|
|
|
+ padding-left: 22rpx;
|
|
|
+
|
|
|
+ .top {
|
|
|
+ height: 48rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .lv {
|
|
|
+ width: 68rpx;
|
|
|
+ height: 38rpx;
|
|
|
+ background: url("/static//image/my/grade_bg.png");
|
|
|
+ background-size: cover;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14rpx;
|
|
|
+ color: #fff;
|
|
|
+ padding-left: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 132rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ border-radius: 24rpx 0 0 24rpx;
|
|
|
+ background: linear-gradient(90deg, #ffffffcc 0%, #ffffff66 100%);
|
|
|
+ box-shadow: 0 8rpx 24rpx 0 #d07b1780;
|
|
|
+
|
|
|
+ color: #cc730d;
|
|
|
+ text-align: center;
|
|
|
+ font-family: "Source Han Sans CN";
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 14rpx;
|
|
|
+
|
|
|
+ .progress_bg {
|
|
|
+ height: 12rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ border-radius: 64rpx;
|
|
|
+ background: #ffcc91;
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress_bar {
|
|
|
+ // width: 62rpx;
|
|
|
+ width: 0;
|
|
|
+ height: 12rpx;
|
|
|
+ // flex-shrink: 0;
|
|
|
+ border-radius: 64rpx 0 0 64rpx;
|
|
|
+ background: #cc730d;
|
|
|
+ }
|
|
|
+
|
|
|
+ .full_bar {
|
|
|
+ border-radius: 64rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
