dy-hu
11 months ago
7 changed files with 751 additions and 201 deletions
-
8App.vue
-
5locale/en.json
-
5locale/zh-Hans.json
-
4pages/tabbar/category/index.vue
-
239pages/tabbar/user/index.data.js
-
185pages/tabbar/user/index.vue
-
506pages/tabbar/user/index2.vue
@ -0,0 +1,506 @@ |
|||
<template> |
|||
<view class="content u-skeleton"> |
|||
<!-- 骨架屏 --> |
|||
<Skeleton |
|||
el-color="#efefef" |
|||
bg-color="#fff" |
|||
:loading="loading && isFirstComeIn" |
|||
:animation="true" |
|||
></Skeleton> |
|||
<!-- 我的 --> |
|||
<image |
|||
class="top-bg" |
|||
src="https://ceres.zkthink.com/static/img/user/topBg.png" |
|||
></image> |
|||
<view class="page-content" > |
|||
<!-- 用户未登录 --> |
|||
<view |
|||
class="user-info-box" |
|||
@click="$jump('../../../pages_category_page2/userModule/login')" |
|||
v-if="userItem.name===undefined " |
|||
> |
|||
<image |
|||
class="user-image u-skeleton-circle" |
|||
src="https://ceres.zkthink.com/static/img/user/morentouxiang.png" |
|||
mode="widthFix" |
|||
></image> |
|||
<view class="user-info"> |
|||
<view class="user-logoin-title u-skeleton-fillet">{{$t('common.clicktologin')}}</view> |
|||
<view class="user-logoin-lable u-skeleton-fillet">{{$t('common.clicklogintips')}}</view> |
|||
</view> |
|||
<image |
|||
class="user-info-right" |
|||
src="https://ceres.zkthink.com/static/img/user/back.png" |
|||
></image> |
|||
<view class="notice"> |
|||
<view |
|||
class="messNum" |
|||
v-if="userItem.notRead>0" |
|||
>{{ userItem.notRead }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 用户已登陆 --> |
|||
<view |
|||
class="user-info-box " |
|||
v-else |
|||
> |
|||
<image |
|||
class="user-image u-skeleton-fillet" |
|||
@click="handleJump('../../../pages_category_page2/userModule/personalDetails')" |
|||
v-if="userItem.headImage" |
|||
:src="userItem.headImage" |
|||
mode="widthFix" |
|||
style="border-radius: 50%;" |
|||
></image> |
|||
<image |
|||
class="user-image" |
|||
v-else |
|||
src="https://ceres.zkthink.com/static/img/user/morentouxiang.png" |
|||
mode="widthFix" |
|||
> |
|||
</image> |
|||
<view class="user-info"> |
|||
<view |
|||
class="user-logoin-title" |
|||
v-if="userItem.name" |
|||
>{{ userItem.name }} |
|||
</view> |
|||
<view |
|||
class="experience flex-items" |
|||
@click="handleJump('../../../pages_category_page1/memberCenter/index')" |
|||
> |
|||
<label>成长值</label> |
|||
<view class="experienceValue">{{ userItem.growth || 0 }} / {{ userItem.nextLevelGrowth || 0 }}</view> |
|||
</view> |
|||
</view> |
|||
<view |
|||
class="notice" |
|||
@click="handleJump('../../../pages_category_page2/userModule/messageCenter')" |
|||
> |
|||
<view |
|||
class="messNum" |
|||
v-if="userItem.notRead>0" |
|||
>{{ userItem.notRead > 99 ? '99+' : userItem.notRead }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 订单卡片 --> |
|||
<view class="order-box"> |
|||
<view |
|||
class="order-item" |
|||
v-for="orderCardItem in orderCardList" |
|||
:key="orderCardItem.id" |
|||
@click="handleJump(orderCardItem.jumpUrl)" |
|||
> |
|||
<image |
|||
class="order-item-image u-skeleton-circle" |
|||
:src="orderCardItem.icon" |
|||
mode="widthFix" |
|||
> |
|||
</image> |
|||
<view class="order-item-text u-skeleton-fillet">{{ orderCardItem.labelkey ? $t(orderCardItem.labelkey) : orderCardItem.label }}</view> |
|||
<view |
|||
class="quan" |
|||
v-if="userItem[orderCardItem.key]>0" |
|||
> |
|||
{{ userItem[orderCardItem.key] }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 第一个卡片 --> |
|||
<view class="itemBox"> |
|||
<view |
|||
class="item-btn" |
|||
v-for="item in fastCardOneList" |
|||
:key="item.id" |
|||
@click="handleJump(item.jumpUrl)" |
|||
> |
|||
<image |
|||
class="item-btn-icon u-skeleton-circle" |
|||
:src="item.icon" |
|||
mode="widthFix" |
|||
> |
|||
</image> |
|||
<view class="item-btn-text u-skeleton-fillet">{{ item.labelkey ? $t(item.labelkey) : item.label }}</view> |
|||
</view> |
|||
</view> |
|||
<!-- 第二个卡片 --> |
|||
<view class="itemBox"> |
|||
<view |
|||
class="item-btn" |
|||
v-for="item in fastCardTwoList" |
|||
:key="item.id" |
|||
@click="handleJump(item.jumpUrl)" |
|||
> |
|||
<image |
|||
class="item-btn-icon u-skeleton-circle" |
|||
:src="item.icon" |
|||
mode="widthFix" |
|||
></image> |
|||
<view class="item-btn-text u-skeleton-fillet">{{ item.labelkey ? $t(item.labelkey) : item.label }}</view> |
|||
</view> |
|||
<!-- <button open-type="contact" |
|||
class="item-btn btnNone"> |
|||
<image class="item-btn-icon" |
|||
src="https://ceres.zkthink.com/static/img/user/service.png" |
|||
mode="widthFix"></image> |
|||
<view class="item-btn-text">平台客服</view> |
|||
</button>--> |
|||
</view> |
|||
</view> |
|||
<view class="copyright"> |
|||
<text >中科鑫智 版权所有</text> |
|||
<text >粤ICP备19086489号-3</text> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import Skeleton from "../../../components/Skeleton"; |
|||
import { fastCardOneList, fastCardTwoList, orderCardList } from "./index.data"; |
|||
import { Services } from '../../../utils/services' |
|||
import { Encrypt } from '../../../utils/secret' |
|||
|
|||
const NET = require('../../../utils/request') |
|||
const API = require('../../../config/api') |
|||
export default { |
|||
data() { |
|||
return { |
|||
isFirstComeIn: true, |
|||
loading: true, |
|||
orderCardList: orderCardList, |
|||
fastCardOneList: fastCardOneList, |
|||
fastCardTwoList: fastCardTwoList, |
|||
cacheUserItem: {}, |
|||
userItem: { |
|||
headImage:'', |
|||
name:undefined |
|||
}, |
|||
} |
|||
}, |
|||
components:{Skeleton}, |
|||
onShow() { |
|||
this.isFirstComeIn=true |
|||
if (uni.getStorageSync('storage_key')) { |
|||
this.cacheUserItem = uni.getStorageSync('storage_key'); |
|||
} |
|||
this.handleGetUser() |
|||
}, |
|||
methods: { |
|||
/** |
|||
* 处理跳转 |
|||
* @param url |
|||
*/ |
|||
handleJump(url) { |
|||
if (JSON.stringify(this.cacheUserItem) === '{}') { |
|||
return this.$jump('../../../pages_category_page2/userModule/login') |
|||
} |
|||
if (url.startsWith('function')) { |
|||
const [key, funcName] = url.split(':') |
|||
this[funcName]() |
|||
} else { |
|||
this.$jump(url) |
|||
} |
|||
}, |
|||
/** |
|||
* 获取用户信息 |
|||
*/ |
|||
handleGetUser() { |
|||
this.loading = true |
|||
NET.request(API.GetUser, {}, 'GET').then(res => { |
|||
this.userItem = res.data |
|||
uni.setStorageSync('storage_userInfo', this.userItem); |
|||
this.isFirstComeIn=false |
|||
this.loading = true |
|||
}) |
|||
}, |
|||
/** |
|||
* 客服 |
|||
* @return {Promise<void>} |
|||
*/ |
|||
async flyToService() { |
|||
(await Services()).flyToService(); |
|||
}, |
|||
/** |
|||
* 商家入驻 |
|||
*/ |
|||
handleApplySettle() { |
|||
const res = uni.getStorageSync('storage_key'); |
|||
let token = Encrypt(res.token) |
|||
let username = this.userItem.name |
|||
let url = null |
|||
// #ifdef H5 |
|||
window.location.href = API.SettledMerchantPrefix + `/#/?username=${ username }&user=${ token }` |
|||
// #endif |
|||
// #ifdef APP-PLUS |
|||
plus.runtime.openURL(API.SettledMerchantPrefix + `/#/?username=${ username }&user=${ token }`, function (e) { |
|||
}) |
|||
// #endif |
|||
// #ifdef MP-WEIXIN |
|||
url = API.SettledMerchantPrefix |
|||
uni.navigateTo({ |
|||
url: `../../../pages_category_page1/linkOthers/index?url=${ url }&username=${ username }&user=${ token }` |
|||
// 此处的链接为小程序上面新建的webview页面路径，参数url为要跳转外链的地址 |
|||
// url: '../../../pages_category_page1/linkOthers/index?url=' + encodeURIComponent(url) |
|||
// url:'../../../pages_category_page2/userModule/coupon' |
|||
}) |
|||
// #endif |
|||
// #ifdef MP-ALIPAY |
|||
url = API.SettledMerchantPrefix |
|||
uni.navigateTo({ |
|||
url: `../../../pages_category_page1/linkOthers/index?url=${ url }&username=${ username }&user=${ token }` |
|||
// 此处的链接为小程序上面新建的webview页面路径，参数url为要跳转外链的地址 |
|||
// url: '../../../pages_category_page1/linkOthers/index?url=' + encodeURIComponent(url) |
|||
// url:'../../../pages_category_page2/userModule/coupon' |
|||
}) |
|||
// #endif |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
page { |
|||
background: #f8f8f8; |
|||
} |
|||
|
|||
.content { |
|||
height: 100%; |
|||
position: relative; |
|||
padding-bottom: 150rpx; |
|||
|
|||
.itemBox { |
|||
display: flex; |
|||
flex-flow: wrap; |
|||
padding-top: 30rpx; |
|||
background: #FFFFFF; |
|||
width: 690rpx; |
|||
margin: 30rpx auto 0 auto; |
|||
} |
|||
|
|||
/* background-color: #f8f8f8; */ |
|||
.top-bg { |
|||
width: 100%; |
|||
height: 400rpx; |
|||
margin-top: -50rpx; |
|||
} |
|||
|
|||
.page-content { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
z-index: 10; |
|||
margin-top: -320upx; |
|||
|
|||
.user-info-box { |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
padding: 30upx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
position: relative; |
|||
|
|||
.notice { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
position: absolute; |
|||
top: 0; |
|||
right: 50rpx; |
|||
background: url("https://ceres.zkthink.com/static/images/notice.png") no-repeat center center; |
|||
background-size: contain; |
|||
|
|||
.messNum { |
|||
background: #C83732; |
|||
border-radius: 50%; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
margin: 0rpx 0 0 30rpx; |
|||
width: 30rpx; |
|||
height: 30rpx; |
|||
line-height: 30rpx; |
|||
font-size: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.user-image { |
|||
width: 126upx; |
|||
height: 126upx; |
|||
} |
|||
|
|||
.user-info { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding-left: 20upx; |
|||
box-sizing: border-box; |
|||
z-index: 10; |
|||
|
|||
.user-logoin-title { |
|||
font-size: 36upx; |
|||
font-weight: 500; |
|||
color: rgba(255, 255, 255, 1); |
|||
} |
|||
|
|||
.user-logoin-lable { |
|||
font-size: 24upx; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 1); |
|||
margin-top: 20upx; |
|||
} |
|||
|
|||
.experience { |
|||
label { |
|||
font-size: 26rpx; |
|||
color: #FFFFFF; |
|||
opacity: 0.7; |
|||
} |
|||
|
|||
.experienceValue { |
|||
width: auto; |
|||
padding: 0 28rpx; |
|||
height: 40rpx; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
border-radius: 25rpx; |
|||
line-height: 40rpx; |
|||
border: 2rpx solid rgba(0, 0, 0, 0); |
|||
background: linear-gradient(88deg, #C5AA7B 0%, #F5DEB2 100%); |
|||
font-size: 20rpx; |
|||
margin-left: 20rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.user-info-right { |
|||
width: 30upx; |
|||
height: 30upx; |
|||
} |
|||
} |
|||
|
|||
.order-box { |
|||
width: 690upx; |
|||
height: 196upx !important; |
|||
background: rgba(255, 255, 255, 1); |
|||
box-shadow: 0px 0px 10upx 0px rgba(51, 51, 51, 0.1); |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
margin-left: 30upx; |
|||
z-index: 10; |
|||
|
|||
.order-item { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: relative; |
|||
|
|||
.quan { |
|||
position: absolute; |
|||
right: 40upx; |
|||
top: 10upx; |
|||
border: 1px solid red; |
|||
color: #FFFFFF; |
|||
background-color: red; |
|||
border-radius: 50%; |
|||
font-size: 16rpx; |
|||
width: 30upx; |
|||
height: 30upx; |
|||
line-height: 30upx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.order-item-image { |
|||
width: 90upx; |
|||
height: 90upx; |
|||
} |
|||
|
|||
.order-item-text { |
|||
font-size: 28upx; |
|||
margin-top: 10upx; |
|||
font-weight: 500; |
|||
color: rgba(102, 102, 102, 1); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.item-btn { |
|||
width: 25%; |
|||
box-sizing: border-box; |
|||
background-color: #fff; |
|||
text-align: center; |
|||
margin-bottom: 40rpx; |
|||
|
|||
.item-btn-icon { |
|||
width: 90upx; |
|||
height: 90upx !important; |
|||
} |
|||
|
|||
.item-btn-text { |
|||
font-size: 28upx; |
|||
font-weight: 500; |
|||
flex: 1; |
|||
color: rgba(102, 102, 102, 1); |
|||
} |
|||
|
|||
.messNum { |
|||
margin-left: 10rpx; |
|||
font-size: 16rpx; |
|||
background-color: red; |
|||
color: #FFFFFF; |
|||
width: 30rpx; |
|||
height: 30rpx; |
|||
border-radius: 50%; |
|||
margin-top: -5rpx; |
|||
line-height: 30rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.item-btn-right { |
|||
width: 24upx; |
|||
height: 24upx; |
|||
} |
|||
|
|||
} |
|||
|
|||
.btnNone { |
|||
margin: 0; |
|||
padding: 0; |
|||
line-height: normal; |
|||
|
|||
&::after { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
.mt20 { |
|||
margin-top: 20upx; |
|||
} |
|||
|
|||
.mt1 { |
|||
margin-top: 1upx; |
|||
} |
|||
} |
|||
|
|||
.copyright { |
|||
text-align: center; |
|||
padding: 30rpx 0 20rpx; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
display: none; |
|||
|
|||
text { |
|||
display: block; |
|||
font-size: 20rpx; |
|||
line-height: 30rpx; |
|||
color: #C5CACF; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue