我的页面、个人资料、会员充值页面修改
This commit is contained in:
GaoHao
@@ -1,78 +1,74 @@
|
||||
<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>
|
||||
|
||||
<image class="topBack" :src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/myTopBack.png'" mode="aspectFill"></image>
|
||||
<view class="myContent">
|
||||
<view class="my_info flex-between">
|
||||
<view class="my_info_left">
|
||||
<image class="my_info_left_head" :src="userInfo.headImg" mode="aspectFill"></image>
|
||||
<view class="name">{{userInfo.nickName || '无'}}</view>
|
||||
</view>
|
||||
<image class="my_info_right_qr" v-if="userInfo" :src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_qRcode.png'" mode="aspectFill"></image>
|
||||
<view class="my_info_right" v-else>
|
||||
<text>免费入会</text>
|
||||
</view>
|
||||
</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 class="my_item my_assets">
|
||||
<view class="my_item_title">我的资产</view>
|
||||
<view class="my_assets_list">
|
||||
<view class="my_list_item" @click="clickTo(item,index)" v-for="(item,index) in myAssetsList" :key="index">
|
||||
<image class="my_list_item_icon" :src="item.icon" mode="aspectFill"></image>
|
||||
<view class="my_list_item_name">{{item.name}}</view>
|
||||
<view class="my_list_item_num">{{item.num || '**'}}</view>
|
||||
</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>
|
||||
|
||||
<view class="my_item my_fun">
|
||||
<view class="my_item_title">我的功能</view>
|
||||
<view class="my_fun_list">
|
||||
<view class="my_list_item" @click="clickTo(item,index)" v-for="(item,index) in myFunList" :key="index">
|
||||
<view class="my_list_item_left">
|
||||
<image class="my_list_item_icon" :src="item.icon" mode="aspectFill"></image>
|
||||
<view class="my_list_item_name">{{item.name}}</view>
|
||||
</view>
|
||||
<view class="my_list_item_right">
|
||||
<u-icon name="play-right-fill" color="#999999" size="12"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</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: '',
|
||||
myAssetsList: [
|
||||
{ name: "储值", type: "recharge", num: 0, icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/storedValue.png"},
|
||||
{ name: "积分", type: "my_coupon", num: 0, icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/points.png"},
|
||||
{ name: "优惠券", type: "my_coupon", num: 0, icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/coupon.png"},
|
||||
{ name: "权益卡", type: "my_coupon", num: 0, icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/equityCard.png"}
|
||||
],
|
||||
myFunList: [
|
||||
{ name: "我的优惠券", type: "my_coupon", icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_coupon.png"},
|
||||
{ name: "我的订单", type: "my_order", icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_order.png"},
|
||||
{ name: "收货地址", type: "", icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_address.png"},
|
||||
{ name: "个人资料", type: "my_info", icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/personal.png"},
|
||||
{ name: "我的会员卡", type: "my_member", icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_member.png"},
|
||||
{ name: "关于", type: "", icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/inRegard.png"},
|
||||
],
|
||||
};
|
||||
},
|
||||
onLoad() {},
|
||||
@@ -82,22 +78,9 @@
|
||||
},
|
||||
},
|
||||
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()
|
||||
@@ -106,115 +89,6 @@
|
||||
}
|
||||
},
|
||||
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
|
||||
@@ -233,152 +107,198 @@
|
||||
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()
|
||||
})
|
||||
// 下面初始数据
|
||||
init_fn() {
|
||||
|
||||
},
|
||||
orderHandle(type) {
|
||||
this.useStorage.set('orderType', type);
|
||||
uni.switchTab({
|
||||
url: '/pages/order/order'
|
||||
clickphone() {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: uni.cache.get('userInfo').custPhone
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
loginClick() {
|
||||
uni.cache.clear();
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
});
|
||||
},
|
||||
|
||||
clickTo(item, index) {
|
||||
switch (item.type) {
|
||||
case 'my_order':
|
||||
uni.switchTab({
|
||||
url: '/pages/order/order'
|
||||
});
|
||||
break
|
||||
case 'my_member':
|
||||
if (uni.cache.get('token')) {
|
||||
uni.pro.navigateTo('member/list')
|
||||
} else {
|
||||
this.loginClick()
|
||||
}
|
||||
break
|
||||
case 'recharge':
|
||||
uni.pro.navigateTo('member/index')
|
||||
break
|
||||
case 'my_coupon': //内部页面
|
||||
uni.pro.navigateTo('user/coupon')
|
||||
break;
|
||||
case 'my_info': //内部页面
|
||||
uni.pro.navigateTo('user/my_info')
|
||||
break;
|
||||
case 'scan_applet':
|
||||
uni.navigateToMiniProgram(JSON.parse(item.value))
|
||||
break
|
||||
|
||||
case 'absolute': //外链url
|
||||
uni.navigateTo({
|
||||
url: `/pages/webview/webview?url=${item.menuUrl}`
|
||||
});
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</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 {
|
||||
|
||||
.topBack{
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
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%;
|
||||
|
||||
.myContent{
|
||||
position: relative;
|
||||
|
||||
.boxtop_top {
|
||||
z-index: 1;
|
||||
padding: 298rpx 20rpx 0 20rpx;
|
||||
.my_info{
|
||||
height: 172rpx;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
padding: 0 32rpx;
|
||||
margin-top: 52rpx;
|
||||
|
||||
.boxtop_topleft {
|
||||
.flex-start {
|
||||
text {
|
||||
margin-left: 18rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
border-radius: 18rpx;
|
||||
.my_info_left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.my_info_left_head{
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
margin-right: 18rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.name{
|
||||
font-weight: 400;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
.my_info_right{
|
||||
width: 136rpx;
|
||||
height: 48rpx;
|
||||
background-color: #E3AD7F;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text{
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.my_info_right_qr{
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.my_item{
|
||||
background-color: #fff;
|
||||
padding: 22rpx 32rpx;
|
||||
border-radius: 18rpx;
|
||||
margin-top: 16rpx;
|
||||
.my_item_title{
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
}
|
||||
}
|
||||
|
||||
.my_assets{
|
||||
.my_item_title{
|
||||
margin-bottom: 26rpx;
|
||||
}
|
||||
.my_assets_list{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 38rpx;
|
||||
.my_list_item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.my_list_item_icon{
|
||||
width: 52rpx;
|
||||
height: 44rpx;
|
||||
}
|
||||
.my_list_item_name{
|
||||
font-weight: 500;
|
||||
font-size: 36rpx;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
margin-top: 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
.my_list_item_num{
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
font-size: 20rpx;
|
||||
color: #E3AD7F;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.userinfooneboxitem:nth-child(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.my_fun{
|
||||
.my_item_title{
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
.my_fun_list{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.my_list_item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 0 26rpx 0;
|
||||
border-bottom: 1rpx solid #E5E5E5;
|
||||
.my_list_item_left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.my_list_item_icon{
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
.my_list_item_name{
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
.my_list_item:last-child{
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user