Skip to content

M
mallapp
Commit ce399021 authored by zhengke's avatar zhengke
Browse files
Options

修改

parent e83c1e4a
Hide whitespace changes
Inline Side-by-side
Showing with 334 additions and 347 deletions
pages/user-center/user-center.vue
View file @ ce399021
<template>
<view class="userStyle" v-if="!isloading">
<view class="userBox" :style="{'margin-bottom':bottommargin}">
<view :style="{'background-image':'url('+meueData.user_center.top_pic_url+')',backgroundSize: '100% 330rpx'}" class="imgbg" >
<view style="display: flex;flex-direction: row;align-items: center;width: 100%;" v-if='meueData.user_center.top_style==1'>
<u-avatar :src="user_info.avatar" size='140' style='margin-left: 50rpx;'></u-avatar>
<Text style="color: #FFF;margin-left: 20rpx;font-size: 36rpx;" @click='login(user_info)'>{{user_info.nickname?user_info.nickname:'立即登录'}}</Text>
<view class="userStyle">
<view class="userBox" :style="{ 'margin-bottom': bottommargin }">
<view :style="{ 'background-image': 'url(' + meueData.user_center.top_pic_url + ')', backgroundSize: '100% 330rpx' }" class="imgbg">
<view style="display: flex;flex-direction: row;align-items: center;width: 100%;" v-if="meueData.user_center.top_style == 1">
<u-avatar :src="user_info.avatar" size="140" style="margin-left: 50rpx;"></u-avatar>
<Text style="color: #FFF;margin-left: 20rpx;font-size: 36rpx;" @click="login(user_info)">{{ user_info.nickname ? user_info.nickname : '立即登录' }}</Text>
</view>
<view style="display: flex;flex-direction: column;align-items: center;" v-if='meueData.user_center.top_style==2'>
<u-avatar :src="user_info.avatar" size='140' ></u-avatar>
<Text style="color: #FFF;margin-left: 20rpx;font-size: 36rpx;" @click='login(user_info)'>{{user_info.nickname?user_info.nickname:'立即登录'}}</Text>
<view style="display: flex;flex-direction: column;align-items: center;" v-if="meueData.user_center.top_style == 2">
<u-avatar :src="user_info.avatar" size="140"></u-avatar>
<Text style="color: #FFF;margin-left: 20rpx;font-size: 36rpx;" @click="login(user_info)">{{ user_info.nickname ? user_info.nickname : '立即登录' }}</Text>
</view>
<view class="ReceiptAdder" @click="goUrl('/pages/address/address')" :style="{'background':mainColor}">
<u-icon name="location" color="#fff" size="40" ></u-icon>
<Text style='color: #fff;font-size: 32;margin-left: 20rpx;'>收货地址</Text>
<view class="ReceiptAdder" @click="goUrl('/pages/address/address')" :style="{ background: mainColor }">
<u-icon name="location" color="#fff" size="40"></u-icon>
<Text style="color: #fff;font-size: 32;margin-left: 20rpx;">收货地址</Text>
</view>
</view>
<view class="footprint" v-if='meueData.user_center.is_foot_bar_status==1' >
<view class="footprint" v-if="meueData.user_center.is_foot_bar_status == 1">
<view class="footprint_item" @click="goUrl('/pages/favorite/favorite')">
<text>{{user_info.favorite}}</text>
<text>{{ user_info.favorite }}</text>
<view class="footprint_item_bottom">
<image :src='meueData.user_center.foot_bar[0].icon_url' style="width: 40rpx;height: 40rpx;"></image>
<Text style='margin-left: 10rpx;'>{{meueData.user_center.foot_bar[0].name}}</Text>
<image :src="meueData.user_center.foot_bar[0].icon_url" style="width: 40rpx;height: 40rpx;"></image>
<Text style="margin-left: 10rpx;">{{ meueData.user_center.foot_bar[0].name }}</Text>
</view>
</view>
<view style="width: 1px;height: 60rpx;background: #000000;"></view>
<view class="footprint_item" @click="goUrl('/pages/foot/index/index')">
<text>{{user_info.footprint}}</text>
<text>{{ user_info.footprint }}</text>
<view class="footprint_item_bottom">
<image :src='meueData.user_center.foot_bar[1].icon_url' style="width: 40rpx;height: 40rpx;"></image>
<Text style='margin-left: 10rpx;'>{{meueData.user_center.foot_bar[1].name}}</Text>
<image :src="meueData.user_center.foot_bar[1].icon_url" style="width: 40rpx;height: 40rpx;"></image>
<Text style="margin-left: 10rpx;">{{ meueData.user_center.foot_bar[1].name }}</Text>
</view>
</view>
</view>
<view class="account_bar" v-if="meueData.user_center.account_bar.status==1">
<view class="account_bar_item" v-if="meueData.user_center.account_bar.integral.status==1" >
<Text :style="{'color':secondary}">{{user_info.integral}}</Text>
<view class="account_bar" v-if="meueData.user_center.is_account_status == 1">
<view class="account_bar_item" v-for="(item,index) in meueData.user_center.account" @click="goUrl(item.link_url)" :key="index">
<Text :style="{ color: secondary }">0</Text>
<view class="footprint_item_bottom">
<image :src='meueData.user_center.account_bar.integral.icon' style="width: 26rpx;height: 26rpx;"></image>
<Text style='margin-left: 10rpx;'>{{meueData.user_center.account_bar.integral.text}}</Text>
<image :src="item.icon_url" style="width: 26rpx;height: 26rpx;"></image>
<Text style="margin-left: 10rpx;">{{ item.name }}</Text>
</view>
</view>
<view style="width: 1px;height: 60rpx;background: #f5f5f5;" v-if="meueData.user_center.account_bar.integral.status==1"></view>
<view class="account_bar_item" v-if="meueData.user_center.account_bar.balance.status==1" @click="goUrl('/pages/balance/balance')">
<Text :style="{'color':secondary}">{{user_info.balance}}</Text>
<view style="width: 1px;height: 60rpx;background: #f5f5f5;" v-if="meueData.user_center.account_bar.integral.status == 1"></view>
<!-- <view class="account_bar_item" v-if="meueData.user_center.account_bar.balance.status == 1" @click="goUrl('/pages/balance/balance')">
<Text :style="{ color: secondary }">{{ user_info.balance }}</Text>
<view class="footprint_item_bottom">
<image :src='meueData.user_center.account_bar.balance.icon' style="width: 26rpx;height: 26rpx;"></image>
<Text style='margin-left: 10rpx;'>{{meueData.user_center.account_bar.balance.text}}</Text>
<image :src="meueData.user_center.account_bar.balance.icon" style="width: 26rpx;height: 26rpx;"></image>
<Text style="margin-left: 10rpx;">{{ meueData.user_center.account_bar.balance.text }}</Text>
</view>
</view>
<view style="width: 1px;height: 60rpx;background: #f5f5f5;" v-if="meueData.user_center.account_bar.balance.status==1"></view>
<view class="account_bar_item" v-if="meueData.user_center.account_bar.coupon.status==1">
<Text :style="{'color':secondary}">{{user_info.coupon}}</Text>
<view style="width: 1px;height: 60rpx;background: #f5f5f5;" v-if="meueData.user_center.account_bar.balance.status == 1"></view>
<view class="account_bar_item" v-if="meueData.user_center.account_bar.coupon.status == 1">
<Text :style="{ color: secondary }">{{ user_info.coupon }}</Text>
<view class="footprint_item_bottom">
<image :src='meueData.user_center.account_bar.coupon.icon' style="width: 26rpx;height: 26rpx;"></image>
<Text style='margin-left: 10rpx;'>{{meueData.user_center.account_bar.coupon.text}}</Text>
<image :src="meueData.user_center.account_bar.coupon.icon" style="width: 26rpx;height: 26rpx;"></image>
<Text style="margin-left: 10rpx;">{{ meueData.user_center.account_bar.coupon.text }}</Text>
</view>
</view>
<view style="width: 1px;height: 60rpx;background: #f5f5f5;" v-if="meueData.user_center.account_bar.coupon.status==1"></view>
<view class="account_bar_item" v-if="meueData.user_center.account_bar.card.status==1">
<Text :style="{'color':secondary}">{{user_info.card}}</Text>
<view style="width: 1px;height: 60rpx;background: #f5f5f5;" v-if="meueData.user_center.account_bar.coupon.status == 1"></view>
<view class="account_bar_item" v-if="meueData.user_center.account_bar.card.status == 1">
<Text :style="{ color: secondary }">{{ user_info.card }}</Text>
<view class="footprint_item_bottom">
<image :src='meueData.user_center.account_bar.card.icon' style="width: 26rpx;height: 26rpx;"></image>
<Text style='margin-left: 10rpx;'>{{meueData.user_center.account_bar.card.text}}</Text>
<image :src="meueData.user_center.account_bar.card.icon" style="width: 26rpx;height: 26rpx;"></image>
<Text style="margin-left: 10rpx;">{{ meueData.user_center.account_bar.card.text }}</Text>
</view>
</view>
</view> -->
</view>
<view class="order_bar" v-if='meueData.user_center.is_order_bar_status==1'>
<u-section title="我的订单" sub-title="查看更多" style='width: 100%;padding: ;' @click="goUrl('/pages/order/index/index?status=0')"></u-section>
<view class="order_bar" v-if="meueData.user_center.is_order_bar_status == 1">
<u-section title="我的订单" sub-title="查看更多" style="width: 100%;padding: ;" @click="goUrl('/pages/order/index/index?status=0')"></u-section>
<view class="order_bar_list">
<view class="order_bar_item" v-for="(item, index) in meueData.user_center.order_bar" :key="index"
:name="item.name" @click="goUrl(item.link_url)">
<image :src='item.icon_url' style="width: 66rpx;height: 60rpx;"></image>
<Text style='margin-top: 10rpx;'>{{item.name}}</Text>
<view v-if='item.num>0' class='badge' :style="{'background':mainColor}">{{item.num}}</view>
<view class="order_bar_item" v-for="(item, index) in meueData.user_center.order_bar" :key="index" :name="item.name" @click="goUrl(item.link_url)">
<image :src="item.icon_url" style="width: 66rpx;height: 60rpx;"></image>
<Text style="margin-top: 10rpx;">{{ item.name }}</Text>
<view v-if="item.num > 0" class="badge" :style="{ background: mainColor }">{{ item.num }}</view>
</view>
</view>
</view>
<view :class="meueData.user_center.menu_style==1?'menus2':'menus'" v-if='meueData.user_center.is_menu_status==1'>
<view :class="meueData.user_center.menu_style==1?'menus_item2':'menus_item'" v-for="(item, index) in meueData.user_center.menus" :key="index"
:name="item.name" @click="goUrl(item.link_url)">
<image :src='item.icon_url' style="width: 48rpx;height: 48rpx;"></image>
<Text :style="{'margin-top':meueData.user_center.menu_style == 1 ? '0rpx':'10rpx','margin-left':meueData.user_center.menu_style == 1 ? '10rpx':'0rpx'}">
{{item.name}}
</Text>
<view :class="meueData.user_center.menu_style == 1 ? 'menus2' : 'menus'" v-if="meueData.user_center.is_menu_status == 1">
<view
:class="meueData.user_center.menu_style == 1 ? 'menus_item2' : 'menus_item'"
v-for="(item, index) in meueData.user_center.menus"
:key="index"
:name="item.name"
@click="goUrl(item.link_url)"
>
<image :src="item.icon_url" style="width: 48rpx;height: 48rpx;"></image>
<Text
:style="{ 'margin-top': meueData.user_center.menu_style == 1 ? '0rpx' : '10rpx', 'margin-left': meueData.user_center.menu_style == 1 ? '10rpx' : '0rpx' }"
>
{{ item.name }}
</Text>
</view>
</view>
<view class="copyright">
<image :src='meueData.copyright.pic_url' style="width: 95px;height: 28px;"></image>
<Text style='margin-top: 10rpx;'>{{meueData.copyright.description}}</Text>
<image :src="meueData.user_center.copyright.pic_url" style="width: 95px;height: 28px;"></image>
<Text style="margin-top: 10rpx;">{{ meueData.user_center.copyright.description }}</Text>
</view>
</view>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo"></auth>
<!-- <auth v-if="showAuth" @changeuserinfo="reloadUserinfo"></auth> -->
<tabbars></tabbars>
</view>
</template>
<script>
import tabbars from "@/components/tabbar/index";
import auth from "../../components/auth/index.vue";
export default{
data(){
return{
isloading: true,
pageTitle: "用户中心",
navHeight: 0,
contentHeight:0,
cstyle:{},
meueData:{},//菜单
user_info:{},//个人信息
bottommargin:0,
listbottom:0,
showAuth:false,
mainColor: "",
secondary:'',
u: {},
}
import tabbars from '@/components/tabbar/index';
import auth from '../../components/auth/index.vue';
export default {
data() {
return {
isloading: true,
pageTitle: '用户中心',
navHeight: 0,
contentHeight: 0,
cstyle: {},
meueData: {}, //菜单
user_info: {}, //个人信息
bottommargin: 0,
listbottom: 0,
showAuth: false,
mainColor: '',
secondary: '',
u: {}
};
},
components: {
tabbars,
auth
},
created() {
this.mainColor = this.$uiConfig.mainColor;
this.secondary = this.$uiConfig.secondary;
},
onLoad() {
this.navHeight = this.$navHeight - 2;
this.u = wx.getStorageSync('userinfo');
if (!this.u) {
this.u = {
nickName: '未登录',
avatarUrl: ''
};
this.showAuth = true;
}
this.cstyle = uni.getStorageSync('basedata') ? uni.getStorageSync('basedata').cat_style : [];
if (this.cstyle.cat_style == '4') {
}
},
mounted() {
let currentPages = getCurrentPages();
let c = this.$uiConfig.is_bang ? 80 : 52;
this.bottommargin = c - 2 + 'px';
this.listbottom = c - 2 + 50 + 'px';
this.contentHeight = this.$utils.calcContentHeight(c);
let u = '/' + currentPages[currentPages.length - 1].route;
let pages = wx.getStorageSync('basedata') ? wx.getStorageSync('basedata').bar_title : [];
console.log(wx.getStorageSync('basedata'), 'getetetettt');
// pages.forEach(x => {
// if (x.value == u) {
// this.pageTitle = x.new_name ? x.new_name : x.name;
// }
// });
uni.setNavigationBarTitle({
title: '用户中心'
});
this.userinfo();
this.getmeue();
},
methods: {
goHome() {
uni.redirectTo({ url: '/pages/index/main' });
},
components:{
tabbars,
auth
//获取用户信息
userinfo() {
this.request2(
{
url: '/api/Mall/GetUserCenter',
data: {}
},
res => {
uni.hideNavigationBarLoading();
//this.isloading = false;
}
);
},
created(){
this.mainColor = this.$uiConfig.mainColor;
this.secondary = this.$uiConfig.secondary;
//获取菜单配置
getmeue() {
uni.showNavigationBarLoading();
this.request2(
{
url: '/api/Mall/GetUserCenter',
data: {}
},
res => {
console.log(res, 'resssssss');
uni.hideNavigationBarLoading();
//this.isloading = false;
this.meueData = res.data.config;
// this.user_info = res.data.user_center;
}
);
},
onLoad() {
this.navHeight = this.$navHeight - 2;
this.u = wx.getStorageSync("userinfo");
if (!this.u) {
this.u = {
nickName: "未登录",
avatarUrl: ""
};
this.showAuth = true;
}
this.cstyle = uni.getStorageSync("basedata")
? uni.getStorageSync("basedata").cat_style
: [];
if (this.cstyle.cat_style == "4") {
}
goUrl(url) {
console.log(url);
uni.navigateTo({
url: url
});
},
mounted(){
let currentPages = getCurrentPages();
let c = this.$uiConfig.is_bang ? 80 : 52;
this.bottommargin = (c-2)+'px';
this.listbottom = (c-2+50)+'px';
this.contentHeight = this.$utils.calcContentHeight(c);
let u = "/" + currentPages[currentPages.length - 1].route;
let pages = wx.getStorageSync("basedata")
? wx.getStorageSync("basedata").bar_title
: [];
console.log(wx.getStorageSync("basedata"))
pages.forEach((x) => {
if (x.value == u) {
this.pageTitle = x.new_name ? x.new_name : x.name;
}
});
uni.setNavigationBarTitle({
title: this.pageTitle,
});
this.userinfo()
this.getmeue()
reloadUserinfo() {
this.u = uni.getStorageSync('userinfo');
this.showAuth = false;
},
methods:{
goHome() {
uni.redirectTo({ url: "/pages/index/main" });
},
userinfo() {
uni.showNavigationBarLoading();
let h = this.apiheader();
this.request(
{
url: "",
header:h,
data: {
r: "api/user/user-info",
},
},
(res) => {
uni.hideNavigationBarLoading()
this.isloading = false;
}
);
},
getmeue(){
uni.showNavigationBarLoading();
let h = this.apiheader();
this.request(
{
url: "",
header:h,
data: {
r: "api/user/config",
},
},
(res) => {
uni.hideNavigationBarLoading()
this.isloading = false;
this.meueData = res.data.config;
this.user_info = res.data.user_info;
}
);
},
goUrl(url){
console.log(url )
uni.navigateTo({
url: url
})
},
reloadUserinfo() {
this.u = uni.getStorageSync("userinfo");
this.showAuth=false
},
login(name){
if(!name){
this.showAuth = true;
}
login(name) {
if (!name) {
this.showAuth = true;
}
}
}
};
</script>
<style>
.body{
background: #f3f4f6;
}
.userStyle .userBox{
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
background: #f3f4f6;;
}
.userStyle .imgbg{
width: 100%;
height: 330rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.userStyle .headimg{
width: 140rpx;
height: 140rpx;
border-radius: 50%;
margin-left: 60rpx;
}
.userStyle .footprint{
width: 80%;
height:140rpx ;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
.userStyle .footprint_item{
width: 200rpx;
height: 90rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.userStyle .footprint_item_bottom{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.userStyle .account_bar{
width: 94%;
height: 110rpx;
border-radius: 10rpx;
background: #fff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
padding: 0 20rpx;
}
.userStyle .account_bar_item{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.userStyle .order_bar{
width: 94%;
border-radius: 10rpx;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
padding: 30rpx;
margin-top: 30rpx;
}
.userStyle .order_bar .order_bar_list{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.userStyle .order_bar_item{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20rpx;
position: relative
}
.userStyle .badge{
position: absolute;
right: -10rpx;
top: -10rpx;
padding:0 12rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 20rpx;
color: #fff;
height: 30rpx;
border-radius: 15rpx;
}
.userStyle .menus{
width: 94%;
border-radius: 10rpx;
background: #fff;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
margin-top: 30rpx;
}
.userStyle .menus2{
width: 94%;
border-radius: 10rpx;
background: #fff;
display: flex;
flex-direction: column;
margin-top: 20rpx;
}
.userStyle .menus .menus_item{
width: 25%;
height: 110rpx;
margin: 20rpx 0 10rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.userStyle .menus2 .menus_item2{
width: 100%;
height: 80rpx;
display: flex;
flex-direction: row;
align-items: center;
margin-left: 30rpx;
}
.userStyle .copyright{
padding: 70rpx 0;
display: flex;
flex-direction: column;
align-items: center;
}
.userStyle .ReceiptAdder{
position: absolute;
right: 0;
top:125rpx;
width: 230rpx;
height:80rpx ;
border-top-left-radius: 40rpx;
border-bottom-left-radius: 40rpx;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 20rpx;
}
.body {
background: #f3f4f6;
}
.userStyle .userBox {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
background: #f3f4f6;
}
.userStyle .imgbg {
width: 100%;
height: 330rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.userStyle .headimg {
width: 140rpx;
height: 140rpx;
border-radius: 50%;
margin-left: 60rpx;
}
.userStyle .footprint {
width: 80%;
height: 140rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
.userStyle .footprint_item {
width: 200rpx;
height: 90rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.userStyle .footprint_item_bottom {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.userStyle .account_bar {
width: 94%;
height: 110rpx;
border-radius: 10rpx;
background: #fff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
padding: 0 20rpx;
}
.userStyle .account_bar_item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
border-right:1px solid #d1d1d1;
}
.userStyle .account_bar_item:last-child{
border-right:0;
}
.userStyle .order_bar {
width: 94%;
border-radius: 10rpx;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
padding: 30rpx;
margin-top: 30rpx;
}
.userStyle .order_bar .order_bar_list {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.userStyle .order_bar_item {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20rpx;
position: relative;
}
.userStyle .badge {
position: absolute;
right: -10rpx;
top: -10rpx;
padding: 0 12rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 20rpx;
color: #fff;
height: 30rpx;
border-radius: 15rpx;
}
.userStyle .menus {
width: 94%;
border-radius: 10rpx;
background: #fff;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
margin-top: 30rpx;
}
.userStyle .menus2 {
width: 94%;
border-radius: 10rpx;
background: #fff;
display: flex;
flex-direction: column;
margin-top: 20rpx;
}
.userStyle .menus .menus_item {
width: 25%;
height: 110rpx;
margin: 20rpx 0 10rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.userStyle .menus2 .menus_item2 {
width: 100%;
height: 80rpx;
display: flex;
flex-direction: row;
align-items: center;
margin-left: 30rpx;
}
.userStyle .copyright {
padding: 70rpx 0;
display: flex;
flex-direction: column;
align-items: center;
}
.userStyle .ReceiptAdder {
position: absolute;
right: 0;
top: 125rpx;
width: 230rpx;
height: 80rpx;
border-top-left-radius: 40rpx;
border-bottom-left-radius: 40rpx;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 20rpx;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment