dy-hu
1 year ago
3 changed files with 5 additions and 516 deletions
-
9pages/tabbar/user/index.vue
-
506pages/tabbar/user/index2.vue
-
6pages_category_page2/userModule/personalDetails.vue
@ -1,506 +0,0 @@ |
|||||
<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