panxiaohe
/
ceres-uniapp-v2.0
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
多租户商城-商户小程序端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 Commits
1 Branch
0 Tags
7.9 MiB
 
 
 
Tree: 3ca41b8caf
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '3ca41b8caf'
${ noResults }
ceres-uniapp-v2.0/pages/tabbar/user/index.vue

538 lines
14 KiB
Raw Blame History

<template>
<view class="content u-skeleton">
<!-- 骨架屏 -->
<Skeleton
el-color="#efefef"
bg-color="#fff"
:loading="loading && isFirstComeIn"
:animation="true"
></Skeleton>
<view class="top-bg"></view>
<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="http://36.138.125.206:8081/ceres-local-file/image/head_default.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="http://36.138.125.206:8081/ceres-local-file/image/icon_common_grey_forward.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="http://36.138.125.206:8081/ceres-local-file/image/head_default.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>{{$t('user.growthvalue')}}</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-content">
<view class="title">{{$t('client.myorder')}}</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>
<!-- 第一个卡片 -->
<view class="service-box">
<view class="title">{{$t('user.myserver')}}</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>
<!-- 第二个卡片 -->
<view class="service-box">
<view class="title">{{$t('user.otherserver')}}</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>
</view>
</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: #FAFAFA;
}
.content {
height: 100%;
position: relative;
padding-bottom: 30rpx;
.service-box{
width: 690rpx;
//height: 196rpx !important;
display: flex;
flex-direction: column;
background: #FFFFFF;
border-radius: 30rpx;
margin-left: 30rpx;
margin-top: 28rpx;
.title{
color: #252744;
font-size: 32rpx;
margin-left: 30rpx;
margin-top: 36rpx;
}
}
.itemBox {
display: flex;
flex-flow: wrap;
padding-top: 30rpx;
width: 690rpx;
margin: 30rpx auto 0 auto;
}
/* background-color: #f8f8f8; */
.top-bg {
width: 100%;
height: 420rpx;
background: linear-gradient(0deg, #FAFAFA, #E5E6F6);
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: 46rpx;
height: 46rpx;
position: absolute;
top: 0;
right: 50rpx;
background: url("http://36.138.125.206:8081/ceres-local-file/image/notice.png") no-repeat center center;
background-size: contain;
.messNum {
background: #F54639;
border-radius: 50%;
color: #FFFFFF;
text-align: center;
margin: -10rpx 0 0 30rpx;
width: 30rpx;
height: 30rpx;
line-height: 30rpx;
font-size: 14rpx;
}
}
.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: 36rpx;
font-weight: bold;
color: #252744;
//color: rgba(255, 255, 255, 1);
}
.user-logoin-lable {
font-size: 24rpx;
font-weight: 400;
color: #252744;
margin-top: 20rpx;
}
.experience {
label {
font-size: 24rpx;
color: #252744;
}
.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, #252744 0%, #252744 100%);
font-size: 20rpx;
margin-left: 20rpx;
}
}
}
.user-info-right {
width: 14rpx;
height: 24rpx;
}
}
.order-content{
width: 690rpx;
//height: 196rpx !important;
display: flex;
flex-direction: column;
background: #FFFFFF;
border-radius: 30rpx;
margin-left: 30rpx;
z-index: 10;
.title{
color: #252744;
font-size: 32rpx;
margin-left: 30rpx;
margin-top: 36rpx;
}
}
.order-box {
width: 690rpx;
height: 196rpx !important;
//box-shadow: 0px 0px 10upx 0px rgba(51, 51, 51, 0.1);
display: flex;
flex-direction: row;
align-items: center;
.order-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
.quan {
position: absolute;
right: 42rpx;
top: -10rpx;
border: 1px solid red;
color: #FFFFFF;
background-color: red;
border-radius: 50%;
font-size: 14rpx;
width: 30upx;
height: 30upx;
line-height: 30upx;
text-align: center;
}
.order-item-image {
width: 56rpx;
height: 56rpx;
}
.order-item-text {
font-size: 24rpx;
margin-top: 23rpx;
font-weight: 400;
color: #252744;
}
}
}
.item-btn {
width: 25%;
box-sizing: border-box;
background-color: #FFFFFF;
text-align: center;
margin-bottom: 45rpx;
.item-btn-icon {
width: 48rpx;
height: 48rpx !important;
}
.item-btn-text {
font-size: 24rpx;
font-weight: 400;
margin-top: 12rpx;
flex: 1;
color: #595B6B;
}
.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>