|
|
@@ -1,291 +1,270 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <view :style="{ height: systemBar + 'px', backgroundColor: '#337bad' }" />
|
|
|
- <view>
|
|
|
- <view class="head-info">
|
|
|
- <view class="head-flex">
|
|
|
- <view class="flex">
|
|
|
- <view style="margin-right: 20rpx">
|
|
|
- <!-- <u-avatar :src="avatar" size="80" @tap="$Router.push('/pages/client/clientUser/personal')" /> -->
|
|
|
- <u-avatar :src="avatar" size="80" @click='handlerReviewImg' />
|
|
|
- </view>
|
|
|
- <view>
|
|
|
- <view class="nickname">{{ nickname }}</view>
|
|
|
- <view class="flex">
|
|
|
- <text class="setAuth" @tap="$Router.push('/PageMine/setting/index')">
|
|
|
- 设置
|
|
|
- </text>
|
|
|
- <!-- <text class="setAuth">认证</text> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="container">
|
|
|
+ <view class="head-info">
|
|
|
+ <view class="head-flex">
|
|
|
+ <view class="flex">
|
|
|
+ <view style="margin-right: 20rpx">
|
|
|
+ <!-- <u-avatar :src="avatar" size="80" @tap="$Router.push('/pages/client/clientUser/personal')" /> -->
|
|
|
+ <u-avatar :src="avatar" size="80" @click='handlerReviewImg' />
|
|
|
+ </view>
|
|
|
+ <view class="nickname"> {{ nickname }} </view>
|
|
|
+ </view>
|
|
|
|
|
|
- <view @tap="$Router.push('/PageMine/setting/index')">
|
|
|
- <u-icon name="setting" color="#ffffff" size="26"></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 列表 -->
|
|
|
- <view class="Collect">
|
|
|
- <u-grid :border="false" col="4">
|
|
|
- <u-grid-item v-for="(listItem, listIndex) in collectList" :key="listIndex"
|
|
|
- @tap="$Router.push(listItem.url)">
|
|
|
- <u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :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">
|
|
|
- <u-grid-item v-for="(listItem, listIndex) in oderList" :key="listIndex"
|
|
|
- @tap="gotoOrder(listItem)">
|
|
|
- <u-icon :name="listItem.name" :size="34" />
|
|
|
- <text class="grid-text">{{ listItem.title }}</text>
|
|
|
- </u-grid-item>
|
|
|
- </u-grid>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class='setting-img-box' @tap="$Router.push('/PageMine/setting/index')">
|
|
|
+ <image class='setting-img' src='@/static/user/mine/icon_user_mine_setting.png'></image>
|
|
|
+ <!-- <u-icon name="setting" color="#000" size="26"></u-icon> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 收藏 积分 购物车 优惠券 -->
|
|
|
|
|
|
- <!-- 我的收益 -->
|
|
|
- <!-- <view class="income" @click="handlerSkipMyProfit"> -->
|
|
|
- <view class="income">
|
|
|
- <!-- <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="collect-box">
|
|
|
+ <u-grid :border="false" col="4">
|
|
|
+ <u-grid-item v-for="(listItem, listIndex) in collectList" :key="listIndex" @tap="$Router.push(listItem.url)">
|
|
|
+ <u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="28" color="#000" />
|
|
|
+ <text class="grid-text">{{ listItem.title }}</text>
|
|
|
+ </u-grid-item>
|
|
|
+ </u-grid>
|
|
|
+ </view>
|
|
|
|
|
|
- </view>
|
|
|
- <!-- 列表 -->
|
|
|
- <TapList></TapList>
|
|
|
+ <view class="order-out-box">
|
|
|
+ <view class="order-inner-box">
|
|
|
+ <u-grid :border="false" col="4" style="background-color: #fff">
|
|
|
+ <u-grid-item v-for="(listItem, listIndex) in oderList" :key="listIndex" @tap="gotoOrder(listItem)">
|
|
|
+ <u-icon :name="listItem.name" :size="34" />
|
|
|
+ <text class="grid-text">{{ listItem.title }}</text>
|
|
|
+ </u-grid-item>
|
|
|
+ </u-grid>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
|
|
|
- </view>
|
|
|
- <tabbar currentTab="clientMine" />
|
|
|
- </view>
|
|
|
+ <!-- 我的收益 -->
|
|
|
+ <view class="income" @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>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 列表 -->
|
|
|
+ <TapList></TapList>
|
|
|
+
|
|
|
+ <tabbar currentTab="clientMine" />
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- mapGetters
|
|
|
- } from 'vuex';
|
|
|
- import TapList from './components/TapList.vue';
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- TapList
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- system: {},
|
|
|
- systemBar: 0,
|
|
|
- collectList: [{
|
|
|
- name: 'photo',
|
|
|
- title: '收藏',
|
|
|
- url: '/PageMine/favourite',
|
|
|
- },
|
|
|
- // {
|
|
|
- // name: 'lock',
|
|
|
- // title: '积分',
|
|
|
- // url: '/pages/client/clientUser/myScore/index',
|
|
|
- // },
|
|
|
- {
|
|
|
- name: 'star',
|
|
|
- title: '购物车',
|
|
|
- url: '/PageMine/shopCar',
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'hourglass',
|
|
|
- title: '优惠券',
|
|
|
- url: '/PageMine/coupon',
|
|
|
- },
|
|
|
- ],
|
|
|
- oderList: [{
|
|
|
- name: 'order',
|
|
|
- title: '全部订单',
|
|
|
- type: 0,
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'bag-fill',
|
|
|
- title: '已发货',
|
|
|
- type: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'car-fill',
|
|
|
- title: '已完成',
|
|
|
- type: 2,
|
|
|
- }
|
|
|
- // {
|
|
|
- // name: 'heart',
|
|
|
- // title: '待评价',
|
|
|
- // type: 3,
|
|
|
- // },
|
|
|
- ],
|
|
|
- incomeList: [{
|
|
|
- num: '0.00',
|
|
|
- title: '总收益',
|
|
|
- },
|
|
|
- {
|
|
|
- num: '0.00',
|
|
|
- title: '本月收益',
|
|
|
- },
|
|
|
- {
|
|
|
- num: '0.00',
|
|
|
- title: '本周收益',
|
|
|
- },
|
|
|
- {
|
|
|
- num: '0.00',
|
|
|
- title: '可提现',
|
|
|
- },
|
|
|
- ]
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters(['userId', 'gender', 'avatar', 'nickname'])
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getHeight() {
|
|
|
- wx.getSystemInfo({
|
|
|
- success: res => {
|
|
|
- this.system = res;
|
|
|
- },
|
|
|
- });
|
|
|
- this.systemBar = this.system.statusBarHeight;
|
|
|
- },
|
|
|
- // 点击跳转到全部订单
|
|
|
- gotoOrder(item) {
|
|
|
- this.$store.commit('order/GET_ORDER_TYPE', item)
|
|
|
- uni.navigateTo({
|
|
|
- url: `/PageMine/orderModules/index`,
|
|
|
- });
|
|
|
- },
|
|
|
- // 点击跳转到我的收益
|
|
|
- // handlerSkipMyProfit() {
|
|
|
- // uni.navigateTo({
|
|
|
- // url: '/pages/client/clientUser/myProfit',
|
|
|
- // });
|
|
|
- // },
|
|
|
- // 点击预览图片
|
|
|
- handlerReviewImg() {
|
|
|
- uni.previewImage({
|
|
|
- urls: [this.avatar],
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
- this.getHeight();
|
|
|
- },
|
|
|
- };
|
|
|
+ import {
|
|
|
+ mapGetters
|
|
|
+ } from 'vuex';
|
|
|
+ import TapList from './components/TapList.vue';
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ TapList
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ system: {},
|
|
|
+ systemBar: 0,
|
|
|
+ collectList: [{
|
|
|
+ name: 'photo',
|
|
|
+ title: '收藏',
|
|
|
+ url: '/PageMine/favourite',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'lock',
|
|
|
+ title: '积分',
|
|
|
+ url: '/pages/client/clientUser/myScore/index',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'star',
|
|
|
+ title: '购物车',
|
|
|
+ url: '/PageMine/shopCar',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'hourglass',
|
|
|
+ title: '优惠券',
|
|
|
+ url: '/PageMine/coupon',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ oderList: [{
|
|
|
+ name: 'order',
|
|
|
+ title: '全部订单',
|
|
|
+ type: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'bag-fill',
|
|
|
+ title: '已发货',
|
|
|
+ type: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'car-fill',
|
|
|
+ title: '已完成',
|
|
|
+ type: 2,
|
|
|
+ }
|
|
|
+ // {
|
|
|
+ // name: 'heart',
|
|
|
+ // title: '待评价',
|
|
|
+ // type: 3,
|
|
|
+ // },
|
|
|
+ ],
|
|
|
+ incomeList: [{
|
|
|
+ num: '0.00',
|
|
|
+ title: '总收益',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ num: '0.00',
|
|
|
+ title: '本月收益',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ num: '0.00',
|
|
|
+ title: '本周收益',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ num: '0.00',
|
|
|
+ title: '可提现',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['userId', 'gender', 'avatar', 'nickname'])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getHeight() {
|
|
|
+ wx.getSystemInfo({
|
|
|
+ success: res => {
|
|
|
+ this.system = res;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ this.systemBar = this.system.statusBarHeight;
|
|
|
+ },
|
|
|
+ // 点击跳转到全部订单
|
|
|
+ gotoOrder(item) {
|
|
|
+ this.$store.commit('order/GET_ORDER_TYPE', item)
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/PageMine/orderModules/index`,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 点击跳转到我的收益
|
|
|
+ handlerSkipMyProfit() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/PageMine/profit/index',
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 点击预览图片
|
|
|
+ handlerReviewImg() {
|
|
|
+ uni.previewImage({
|
|
|
+ urls: [this.avatar],
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.getHeight();
|
|
|
+ },
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .container {
|
|
|
- min-height: 100vh;
|
|
|
- background-color: #efefef;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .flex {
|
|
|
- display: flex;
|
|
|
- }
|
|
|
+ .container {
|
|
|
|
|
|
- .head-info {
|
|
|
- background-color: #337bad;
|
|
|
- height: 360rpx;
|
|
|
- padding: 20rpx;
|
|
|
- position: relative;
|
|
|
+ .flex {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
|
|
|
- .head-flex {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
+ .head-info {
|
|
|
+ padding: 200rpx 22rpx 0;
|
|
|
+ background: linear-gradient(180deg, #D4E2FF 0%, #E6EAFB 53%, #F2F2F2);
|
|
|
|
|
|
- .nickname {
|
|
|
- font-size: 36rpx;
|
|
|
- color: #ffffff;
|
|
|
- margin-bottom: 8rpx;
|
|
|
- margin-top: 20rpx;
|
|
|
- }
|
|
|
+ .head-flex {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .nickname {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #0C1223;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .setting-img-box{
|
|
|
+ padding-top:4rpx;
|
|
|
+ .setting-img{
|
|
|
+ width:48rpx;
|
|
|
+ height:48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .setAuth {
|
|
|
- width: 90rpx;
|
|
|
- height: 40rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- display: block;
|
|
|
- cursor: pointer;
|
|
|
- margin-right: 10rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- text-align: center;
|
|
|
- border-radius: 20rpx;
|
|
|
- background-color: rgba(255, 255, 255, 0.4);
|
|
|
- }
|
|
|
- }
|
|
|
+ .collect-box {
|
|
|
+ width: 100%;
|
|
|
|
|
|
- .Collect {
|
|
|
- .grid-text {
|
|
|
- font-size: 30rpx;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
+ .grid-text {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .order-out-box {
|
|
|
- width: 94%;
|
|
|
- position: absolute;
|
|
|
- bottom: -80rpx;
|
|
|
+ .order-out-box {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 44rpx;
|
|
|
|
|
|
- .order-inner-box {
|
|
|
- padding: 20rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- background-color: $uni-bg-color;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .order-inner-box {
|
|
|
+ padding: 30rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ background-color: $uni-bg-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .income {
|
|
|
- padding: 20rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- // margin: 100rpx 20rpx 20rpx 20rpx;
|
|
|
- margin: 40rpx 20rpx 20rpx 20rpx;
|
|
|
- // background-color: $uni-bg-color;
|
|
|
+ .income {
|
|
|
+ padding: 22rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ width: calc(100% - 44rpx);
|
|
|
+ background-color: $uni-bg-color;
|
|
|
+ margin-top:24rpx;
|
|
|
+ .income-head {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- .income-head {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ .my-income {
|
|
|
+ color: $uni-color-primary;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .my-income {
|
|
|
- color: $uni-color-primary;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- }
|
|
|
+ .income-content {
|
|
|
+ margin: 15rpx 0;
|
|
|
|
|
|
- .income-content {
|
|
|
- margin: 15rpx 0;
|
|
|
+ .num-box {
|
|
|
+ padding: 20rpx 0;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: $uni-text-color;
|
|
|
+ }
|
|
|
|
|
|
- .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .num-title {
|
|
|
- font-size: 28rpx;
|
|
|
- color: $uni-text-color-grey;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .flex {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
|
|
|
- .flex {
|
|
|
- display: flex;
|
|
|
- }
|
|
|
</style>
|
