panxiaohe
/
ceres-uniapp-v2.0
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

我的页面布局修改调整

master
dy-hu 11 months ago
parent
be0efe3a66
commit
66e13e1c5d
3 changed files with 5 additions and 516 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      pages/tabbar/user/index.vue
  2. 506
      pages/tabbar/user/index2.vue
  3. 6
      pages_category_page2/userModule/personalDetails.vue

9
pages/tabbar/user/index.vue
View File

@ -7,11 +7,6 @@
:loading="loading && isFirstComeIn"
:animation="true"
></Skeleton>
<!-- 我的 -->
<!-- <image
class="top-bg"
src="https://ceres.zkthink.com/static/img/user/topBg.png"
></image>-->
<view class="top-bg"></view>
<view class="page-content" >
<!-- 用户未登录 -->
@ -22,7 +17,7 @@
>
<image
class="user-image u-skeleton-circle"
src="https://ceres.zkthink.com/static/img/user/morentouxiang.png"
src="https://wechat.hnthee.com/ceres-local-file/image/head_default.png"
mode="widthFix"
></image>
<view class="user-info">
@ -57,7 +52,7 @@
<image
class="user-image"
v-else
src="https://ceres.zkthink.com/static/img/user/morentouxiang.png"
src="https://wechat.hnthee.com/ceres-local-file/image/head_default.png"
mode="widthFix"
>
</image>

506
pages/tabbar/user/index2.vue
View File

@ -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>

6
pages_category_page2/userModule/personalDetails.vue
View File

@ -6,7 +6,7 @@
<view class="personalHead-box flex-sp-between flex-display flex-items">
<label>{{$t('common.head')}}</label>
<image class="user-headImg" v-if="item.headImage" :src="item.headImage"></image>
<image class="user-headImg" v-else src="https://ceres.zkthink.com/static/img/user/morentouxiang.png">
<image class="user-headImg" v-else src="https://wechat.hnthee.com/ceres-local-file/image/head_default.png">
</image>
</view>
</view>
@ -37,7 +37,7 @@
<input class="nameInput" v-model="idCard" type="text" placeholder="请输入身份证" @blur="changeIdCard" />
</view>
</view>
<view class="iphoneNumback-box flex-items-plus">
<view class="iphoneNum-box flex-row-plus flex-sp-between flex-items">
<label style="width: 50%;">{{$t('common.mobilephone')}}</label>
@ -250,7 +250,7 @@
})
return false
}
NET.request(API.UpdateUser, {
idCard: newIdCard
}, 'POST').then(res => {

Write Preview
Loading…
Cancel
Save