384 lines
9.2 KiB
Vue
384 lines
9.2 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- <view class="user-info-wrap" @click="clickinformation">
|
||
<view style="width: 108rpx; height: 108rpx;border-radius: 50%;">
|
||
<image style="width: 108rpx; height: 108rpx; border-radius: 50%;" v-if="userInfo.headImg"
|
||
:src="userInfo.headImg" mode="aspectFill">
|
||
</image>
|
||
<image style="width: 108rpx; height: 108rpx; border-radius: 50%;" v-else src="@/static/avatar.png"
|
||
mode="aspectFill">
|
||
</image>
|
||
</view>
|
||
<view class="info flex-colum-start">
|
||
<text class="phone">{{userInfo.nickName || '无'}}</text>
|
||
</view>
|
||
</view> -->
|
||
<navseat :opacity='opacity' class="navseat" title='个人中心' :iconshow="false" :titleshow='true'></navseat>
|
||
<view class="boxtop">
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<view :style="{'height':Topdistance+'px'}"></view>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view :style="{'height':HeighT.customBar+HeighT.heightBar+'px'}"></view>
|
||
<!-- #endif -->
|
||
<view class="boxtop_top flex-between">
|
||
<view class="boxtop_topleft">
|
||
<view class="flex-start" v-if="userInfo" @click="clickinformation">
|
||
<image style="width: 108rpx; height: 108rpx; border-radius: 50%;" v-if="userInfo.headImg"
|
||
:src="userInfo.headImg" mode="aspectFill">
|
||
</image>
|
||
<text>{{userInfo.nickName || '无'}}</text>
|
||
</view>
|
||
<view class="flex-start" v-else @click="loginClick">
|
||
<text>去登录</text>
|
||
</view>
|
||
</view>
|
||
<image style="width: 44rpx; height: 42.26rpx;" @click="clickphone()"
|
||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/user/kf.png" mode="aspectFill">
|
||
</view>
|
||
|
||
<image @click="memberlist" class="boxtop_botton"
|
||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/user/member.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="userinfoone" v-if="teblist.length!=0">
|
||
<view class="userinfoonebox">
|
||
<view class="userinfooneboxitem flex-between" @click="clickinfo(item,index)"
|
||
v-for="(item,index) in teblist" :key="index">
|
||
<view class="userinfooneboxitemleft flex-start">
|
||
<image :src="item.shareImg" mode="aspectFill"></image>
|
||
<text>{{item.name}}</text>
|
||
</view>
|
||
<u-icon name="arrow-right" color="#575B66" size="28"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<listitem :list='list' v-if="list.length!=0"></listitem>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import uploadImage from "@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js";
|
||
import listitem from "@/components/listitem.vue";
|
||
import navseat from '@/components/navseat.vue'
|
||
export default {
|
||
components: {
|
||
listitem,
|
||
navseat
|
||
},
|
||
data() {
|
||
return {
|
||
titlename: '个人中心',
|
||
opacity: false,
|
||
userInfo: {},
|
||
teblist: [],
|
||
list: [],
|
||
Topdistance: '',
|
||
};
|
||
},
|
||
onLoad() {},
|
||
computed: {
|
||
HeighT() { //手机类型的尺寸
|
||
return this.$store.getters.is_BarHeight
|
||
},
|
||
},
|
||
mounted() {
|
||
setTimeout(() => {
|
||
this.$nextTick(() => {
|
||
this.GetTop()
|
||
});
|
||
}, 1000)
|
||
// 当组件挂载完成后获取距离
|
||
|
||
},
|
||
onPageScroll(e) {
|
||
if (e.scrollTop <= 44) { //搜索导航栏
|
||
this.opacity = false
|
||
} else {
|
||
this.opacity = true
|
||
}
|
||
|
||
},
|
||
onShow() {
|
||
if (uni.cache.get('token')) {
|
||
this.init_fn()
|
||
this.loginwxuserInfo()
|
||
this.tbPlatformDict()
|
||
}
|
||
},
|
||
methods: {
|
||
clickphone() {
|
||
uni.makePhoneCall({
|
||
phoneNumber: uni.cache.get('userInfo').custPhone
|
||
});
|
||
},
|
||
clickinformation() {
|
||
uni.pro.navigateTo('user/information')
|
||
},
|
||
//获取元素距离顶部的距离
|
||
GetTop() {
|
||
this.$u.getRect('.content').then(res => {
|
||
console.log(1111, res)
|
||
this.Topdistance = res.height //滚动距离
|
||
})
|
||
},
|
||
memberlist() {
|
||
if (uni.cache.get('token')) {
|
||
uni.pro.navigateTo('member/list')
|
||
} else {
|
||
this.loginClick()
|
||
}
|
||
},
|
||
//退出登录
|
||
boxClick() {
|
||
uni.showModal({
|
||
title: '注意',
|
||
content: '确定要退出登录吗？',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
try {
|
||
await this.api.loginOut();
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
}
|
||
uni.cache.clear();
|
||
uni.reLaunch({
|
||
url: '/pages/login/login'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
loginClick() {
|
||
uni.cache.clear();
|
||
uni.reLaunch({
|
||
url: '/pages/login/login'
|
||
});
|
||
},
|
||
// 精选推荐
|
||
// 下面初始数据
|
||
init_fn() {
|
||
this.list = []
|
||
this.form = {
|
||
address: uni.cache.get('getLocationstorage').address, //地址
|
||
lng: uni.cache.get('getLocationstorage').lng,
|
||
lat: uni.cache.get('getLocationstorage').lat,
|
||
type: '', //品类
|
||
orderBy: 5, //0.今日上新 1.离我最近 2.销量优先 3.价格优先 4.热榜推荐
|
||
other: '', //附近1KM 1选中 0不选中
|
||
page: 1, //页数
|
||
size: 10, //页容量
|
||
dateType: '',
|
||
status: 'loadmore'
|
||
}
|
||
this.onLoadlist()
|
||
},
|
||
async onLoadlist() {
|
||
try {
|
||
let res = await this.api.indexlist(this.form)
|
||
if (res.data.pages < this.form.page) {
|
||
this.form.status = 'nomore'
|
||
return false;
|
||
} else {
|
||
this.form.status = 'loading';
|
||
this.form.page = ++this.form.page;
|
||
setTimeout(() => {
|
||
this.list = [...this.list, ...res.data.list];
|
||
this.form.status = 'loading';
|
||
if (res.data.pageNum == res.data.pages) {
|
||
this.form.status = 'nomore';
|
||
} else {
|
||
this.form.status = 'loading';
|
||
}
|
||
}, 500)
|
||
}
|
||
} catch (e) {}
|
||
},
|
||
clickinfo(item, index) {
|
||
switch (item.jumpType) {
|
||
case 'scan': //特殊处理点击
|
||
switch (item.value) {
|
||
case 'loginOut':
|
||
this.boxClick()
|
||
break;
|
||
}
|
||
break;
|
||
case 'scan_applet':
|
||
uni.navigateToMiniProgram(JSON.parse(item.value))
|
||
break
|
||
case 'relative': //内部页面
|
||
uni.pro.navigateTo(item.absUrl)
|
||
break;
|
||
case 'absolute': //外链url
|
||
uni.navigateTo({
|
||
url: `/pages/webview/webview?url=${item.menuUrl}`
|
||
});
|
||
break;
|
||
}
|
||
},
|
||
async loginwxuserInfo() {
|
||
let res = await this.api.loginwxuserInfo({
|
||
userId: uni.cache.get('userInfo').id
|
||
})
|
||
if (res.code == 0) {
|
||
uni.cache.set('userInfo', res.data);
|
||
this.userInfo = uni.cache.get('userInfo')
|
||
}
|
||
},
|
||
async tbPlatformDict() {
|
||
let res = await this.api.tbPlatformDict({
|
||
type: 'ownMenu'
|
||
})
|
||
// console.log(res)
|
||
if (res.code == 0) {
|
||
this.teblist = res.data
|
||
}
|
||
},
|
||
// / 更换头像
|
||
onChooseAvatar(e) {
|
||
uni.showLoading({
|
||
title: '上传中',
|
||
mask: true
|
||
})
|
||
console.log(e.detail.avatarUrl)
|
||
let file = e.detail.avatarUrl;
|
||
uploadImage(file, 'avatar',
|
||
result => {
|
||
//将上传后的图片以对象（官方要求的格式）的形式存入uni-file-picker的value值imageValue（imageValue值的结构为数组包对象）用于图片回显
|
||
// let objAge = {
|
||
// 'url': result,
|
||
// 'extname': 'png',
|
||
// 'name': 'imgss.png'
|
||
// };
|
||
// this.userlist.avatar.push(objAge)
|
||
this.userInfo.avatar = result
|
||
console.log(this.userInfo.avatar)
|
||
uni.hideLoading()
|
||
}, result => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
orderHandle(type) {
|
||
this.useStorage.set('orderType', type);
|
||
uni.switchTab({
|
||
url: '/pages/order/order'
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.user-info-wrap {
|
||
position: relative;
|
||
padding: 48rpx 32rpx 88rpx 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 750rpx;
|
||
background: #FFD158;
|
||
border-radius: 0rpx 0rpx 40rpx 0rpx;
|
||
|
||
.info {
|
||
flex: 1;
|
||
padding-left: $paddingSize;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.name {
|
||
input {
|
||
text-align: left;
|
||
font-size: 32upx;
|
||
}
|
||
}
|
||
|
||
.phone {
|
||
padding-top: 8upx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.user-info-wrap::after {
|
||
position: absolute;
|
||
content: '';
|
||
bottom: 40rpx;
|
||
right: 0;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
text-align: center;
|
||
background-image: radial-gradient(40rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #fff 40rpx);
|
||
}
|
||
|
||
.boxtop {
|
||
width: 100%;
|
||
height: 542rpx;
|
||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/user/user.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
|
||
.boxtop_top {
|
||
padding: 0 32rpx;
|
||
margin-top: 52rpx;
|
||
|
||
.boxtop_topleft {
|
||
.flex-start {
|
||
text {
|
||
margin-left: 18rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.boxtop_botton {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 0;
|
||
transform: translatex(-50%);
|
||
width: 654rpx;
|
||
height: 160rpx;
|
||
}
|
||
}
|
||
|
||
.userinfoone {
|
||
position: relative;
|
||
padding: 48rpx 28rpx;
|
||
width: 100%;
|
||
// top: -40rpx;
|
||
background: #F6F6F6;
|
||
// border-radius: 40rpx 0 0rpx 0rpx;
|
||
|
||
.userinfoonebox {
|
||
padding: 32rpx 20rpx 32rpx 52rpx;
|
||
border-radius: 22rpx;
|
||
background: #FFFFFF;
|
||
width: 100%;
|
||
|
||
.userinfooneboxitem {
|
||
width: 100%;
|
||
margin-top: 32rpx;
|
||
|
||
.userinfooneboxitemleft {
|
||
image {
|
||
width: 41.33rpx;
|
||
height: 36.9rpx;
|
||
}
|
||
|
||
text {
|
||
margin-left: 32rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.userinfooneboxitem:nth-child(1) {
|
||
margin-top: 0;
|
||
}
|
||
}
|
||
}
|
||
</style> |