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> <template>
<view class="userStyle" v-if="!isloading"> <view class="userStyle">
<view class="userBox" :style="{'margin-bottom':bottommargin}"> <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="{ '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'> <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> <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> <Text style="color: #FFF;margin-left: 20rpx;font-size: 36rpx;" @click="login(user_info)">{{ user_info.nickname ? user_info.nickname : '立即登录' }}</Text>
</view> </view>
<view style="display: flex;flex-direction: column;align-items: center;" v-if='meueData.user_center.top_style==2'> <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> <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> <Text style="color: #FFF;margin-left: 20rpx;font-size: 36rpx;" @click="login(user_info)">{{ user_info.nickname ? user_info.nickname : '立即登录' }}</Text>
</view> </view>
<view class="ReceiptAdder" @click="goUrl('/pages/address/address')" :style="{'background':mainColor}"> <view class="ReceiptAdder" @click="goUrl('/pages/address/address')" :style="{ background: mainColor }">
<u-icon name="location" color="#fff" size="40" ></u-icon> <u-icon name="location" color="#fff" size="40"></u-icon>
<Text style='color: #fff;font-size: 32;margin-left: 20rpx;'>收货地址</Text> <Text style="color: #fff;font-size: 32;margin-left: 20rpx;">收货地址</Text>
</view> </view>
</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')"> <view class="footprint_item" @click="goUrl('/pages/favorite/favorite')">
<text>{{user_info.favorite}}</text> <text>{{ user_info.favorite }}</text>
<view class="footprint_item_bottom"> <view class="footprint_item_bottom">
<image :src='meueData.user_center.foot_bar[0].icon_url' style="width: 40rpx;height: 40rpx;"></image> <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> <Text style="margin-left: 10rpx;">{{ meueData.user_center.foot_bar[0].name }}</Text>
</view> </view>
</view> </view>
<view style="width: 1px;height: 60rpx;background: #000000;"></view> <view style="width: 1px;height: 60rpx;background: #000000;"></view>
<view class="footprint_item" @click="goUrl('/pages/foot/index/index')"> <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"> <view class="footprint_item_bottom">
<image :src='meueData.user_center.foot_bar[1].icon_url' style="width: 40rpx;height: 40rpx;"></image> <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> <Text style="margin-left: 10rpx;">{{ meueData.user_center.foot_bar[1].name }}</Text>
</view> </view>
</view> </view>
</view> </view>
<view class="account_bar" v-if="meueData.user_center.account_bar.status==1"> <view class="account_bar" v-if="meueData.user_center.is_account_status == 1">
<view class="account_bar_item" v-if="meueData.user_center.account_bar.integral.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}">{{user_info.integral}}</Text> <Text :style="{ color: secondary }">0</Text>
<view class="footprint_item_bottom"> <view class="footprint_item_bottom">
<image :src='meueData.user_center.account_bar.integral.icon' style="width: 26rpx;height: 26rpx;"></image> <image :src="item.icon_url" style="width: 26rpx;height: 26rpx;"></image>
<Text style='margin-left: 10rpx;'>{{meueData.user_center.account_bar.integral.text}}</Text> <Text style="margin-left: 10rpx;">{{ item.name }}</Text>
</view> </view>
</view> </view>
<view style="width: 1px;height: 60rpx;background: #f5f5f5;" v-if="meueData.user_center.account_bar.integral.status==1"></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')"> <!-- <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> <Text :style="{ color: secondary }">{{ user_info.balance }}</Text>
<view class="footprint_item_bottom"> <view class="footprint_item_bottom">
<image :src='meueData.user_center.account_bar.balance.icon' style="width: 26rpx;height: 26rpx;"></image> <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> <Text style="margin-left: 10rpx;">{{ meueData.user_center.account_bar.balance.text }}</Text>
</view> </view>
</view> </view>
<view style="width: 1px;height: 60rpx;background: #f5f5f5;" v-if="meueData.user_center.account_bar.balance.status==1"></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"> <view class="account_bar_item" v-if="meueData.user_center.account_bar.coupon.status == 1">
<Text :style="{'color':secondary}">{{user_info.coupon}}</Text> <Text :style="{ color: secondary }">{{ user_info.coupon }}</Text>
<view class="footprint_item_bottom"> <view class="footprint_item_bottom">
<image :src='meueData.user_center.account_bar.coupon.icon' style="width: 26rpx;height: 26rpx;"></image> <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> <Text style="margin-left: 10rpx;">{{ meueData.user_center.account_bar.coupon.text }}</Text>
</view> </view>
</view> </view>
<view style="width: 1px;height: 60rpx;background: #f5f5f5;" v-if="meueData.user_center.account_bar.coupon.status==1"></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">
<view class="account_bar_item" v-if="meueData.user_center.account_bar.card.status==1"> <Text :style="{ color: secondary }">{{ user_info.card }}</Text>
<Text :style="{'color':secondary}">{{user_info.card}}</Text>
<view class="footprint_item_bottom"> <view class="footprint_item_bottom">
<image :src='meueData.user_center.account_bar.card.icon' style="width: 26rpx;height: 26rpx;"></image> <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> <Text style="margin-left: 10rpx;">{{ meueData.user_center.account_bar.card.text }}</Text>
</view> </view>
</view> </view> -->
</view> </view>
<view class="order_bar" v-if='meueData.user_center.is_order_bar_status==1'> <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> <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_list">
<view class="order_bar_item" v-for="(item, index) in meueData.user_center.order_bar" :key="index" <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)">
:name="item.name" @click="goUrl(item.link_url)"> <image :src="item.icon_url" style="width: 66rpx;height: 60rpx;"></image>
<image :src='item.icon_url' style="width: 66rpx;height: 60rpx;"></image> <Text style="margin-top: 10rpx;">{{ item.name }}</Text>
<Text style='margin-top: 10rpx;'>{{item.name}}</Text> <view v-if="item.num > 0" class="badge" :style="{ background: mainColor }">{{ item.num }}</view>
<view v-if='item.num>0' class='badge' :style="{'background':mainColor}">{{item.num}}</view>
</view> </view>
</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 ? '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" <view
:name="item.name" @click="goUrl(item.link_url)"> :class="meueData.user_center.menu_style == 1 ? 'menus_item2' : 'menus_item'"
<image :src='item.icon_url' style="width: 48rpx;height: 48rpx;"></image> v-for="(item, index) in meueData.user_center.menus"
<Text :style="{'margin-top':meueData.user_center.menu_style == 1 ? '0rpx':'10rpx','margin-left':meueData.user_center.menu_style == 1 ? '10rpx':'0rpx'}"> :key="index"
{{item.name}} :name="item.name"
</Text> @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> </view>
<view class="copyright"> <view class="copyright">
<image :src='meueData.copyright.pic_url' style="width: 95px;height: 28px;"></image> <image :src="meueData.user_center.copyright.pic_url" style="width: 95px;height: 28px;"></image>
<Text style='margin-top: 10rpx;'>{{meueData.copyright.description}}</Text> <Text style="margin-top: 10rpx;">{{ meueData.user_center.copyright.description }}</Text>
</view> </view>
</view> </view>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo"></auth> <!-- <auth v-if="showAuth" @changeuserinfo="reloadUserinfo"></auth> -->
<tabbars></tabbars> <tabbars></tabbars>
</view> </view>
</template> </template>
<script> <script>
import tabbars from "@/components/tabbar/index"; import tabbars from '@/components/tabbar/index';
import auth from "../../components/auth/index.vue"; import auth from '../../components/auth/index.vue';
export default{ export default {
data(){ data() {
return{ return {
isloading: true, isloading: true,
pageTitle: "用户中心", pageTitle: '用户中心',
navHeight: 0, navHeight: 0,
contentHeight:0, contentHeight: 0,
cstyle:{}, cstyle: {},
meueData:{},//菜单 meueData: {}, //菜单
user_info:{},//个人信息 user_info: {}, //个人信息
bottommargin:0, bottommargin: 0,
listbottom:0, listbottom: 0,
showAuth:false, showAuth: false,
mainColor: "", mainColor: '',
secondary:'', secondary: '',
u: {}, 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, userinfo() {
auth this.request2(
{
url: '/api/Mall/GetUserCenter',
data: {}
},
res => {
uni.hideNavigationBarLoading();
//this.isloading = false;
}
);
}, },
created(){ //获取菜单配置
this.mainColor = this.$uiConfig.mainColor; getmeue() {
this.secondary = this.$uiConfig.secondary; 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() { goUrl(url) {
this.navHeight = this.$navHeight - 2; console.log(url);
this.u = wx.getStorageSync("userinfo"); uni.navigateTo({
if (!this.u) { url: url
this.u = { });
nickName: "未登录",
avatarUrl: ""
};
this.showAuth = true;
}
this.cstyle = uni.getStorageSync("basedata")
? uni.getStorageSync("basedata").cat_style
: [];
if (this.cstyle.cat_style == "4") {
}
}, },
mounted(){ reloadUserinfo() {
let currentPages = getCurrentPages(); this.u = uni.getStorageSync('userinfo');
let c = this.$uiConfig.is_bang ? 80 : 52; this.showAuth = false;
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()
}, },
methods:{ login(name) {
goHome() { if (!name) {
uni.redirectTo({ url: "/pages/index/main" }); this.showAuth = true;
},
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;
}
} }
} }
} }
};
</script> </script>
<style> <style>
.body{ .body {
background: #f3f4f6; background: #f3f4f6;
} }
.userStyle .userBox{ .userStyle .userBox {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background: #f3f4f6;; background: #f3f4f6;
} }
.userStyle .imgbg{ .userStyle .imgbg {
width: 100%; width: 100%;
height: 330rpx; height: 330rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.userStyle .headimg{ .userStyle .headimg {
width: 140rpx; width: 140rpx;
height: 140rpx; height: 140rpx;
border-radius: 50%; border-radius: 50%;
margin-left: 60rpx; margin-left: 60rpx;
} }
.userStyle .footprint{ .userStyle .footprint {
width: 80%; width: 80%;
height:140rpx ; height: 140rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
}
} .userStyle .footprint_item {
.userStyle .footprint_item{ width: 200rpx;
width: 200rpx; height: 90rpx;
height: 90rpx; display: flex;
display: flex; flex-direction: column;
flex-direction: column; align-items: center;
align-items: center; justify-content: space-between;
justify-content: space-between; }
} .userStyle .footprint_item_bottom {
.userStyle .footprint_item_bottom{ display: flex;
display: flex; flex-direction: row;
flex-direction: row; align-items: center;
align-items: center; justify-content: center;
justify-content: center; }
} .userStyle .account_bar {
.userStyle .account_bar{ width: 94%;
width: 94%; height: 110rpx;
height: 110rpx; border-radius: 10rpx;
border-radius: 10rpx; background: #fff;
background: #fff; display: flex;
display: flex; flex-direction: row;
flex-direction: row; align-items: center;
align-items: center; justify-content: space-around;
justify-content: space-around; padding: 0 20rpx;
padding: 0 20rpx; }
.userStyle .account_bar_item {
} display: flex;
.userStyle .account_bar_item{ flex-direction: column;
align-items: center;
display: flex; justify-content: space-between;
flex-direction: column; border-right:1px solid #d1d1d1;
align-items: center; }
justify-content: space-between; .userStyle .account_bar_item:last-child{
} border-right:0;
.userStyle .order_bar{ }
width: 94%; .userStyle .order_bar {
border-radius: 10rpx; width: 94%;
background: #fff; border-radius: 10rpx;
display: flex; background: #fff;
flex-direction: column; display: flex;
align-items: center; flex-direction: column;
padding: 30rpx; align-items: center;
margin-top: 30rpx; padding: 30rpx;
} margin-top: 30rpx;
.userStyle .order_bar .order_bar_list{ }
width: 100%; .userStyle .order_bar .order_bar_list {
display: flex; width: 100%;
flex-direction: row; display: flex;
align-items: center; flex-direction: row;
justify-content: space-between; align-items: center;
justify-content: space-between;
} }
.userStyle .order_bar_item{ .userStyle .order_bar_item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-top: 20rpx; margin-top: 20rpx;
position: relative position: relative;
} }
.userStyle .badge{ .userStyle .badge {
position: absolute; position: absolute;
right: -10rpx; right: -10rpx;
top: -10rpx; top: -10rpx;
padding:0 12rpx; padding: 0 12rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 20rpx; font-size: 20rpx;
color: #fff; color: #fff;
height: 30rpx; height: 30rpx;
border-radius: 15rpx; border-radius: 15rpx;
} }
.userStyle .menus{ .userStyle .menus {
width: 94%; width: 94%;
border-radius: 10rpx; border-radius: 10rpx;
background: #fff; background: #fff;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
margin-top: 30rpx; margin-top: 30rpx;
} }
.userStyle .menus2{ .userStyle .menus2 {
width: 94%; width: 94%;
border-radius: 10rpx; border-radius: 10rpx;
background: #fff; background: #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: 20rpx; margin-top: 20rpx;
} }
.userStyle .menus .menus_item{ .userStyle .menus .menus_item {
width: 25%; width: 25%;
height: 110rpx; height: 110rpx;
margin: 20rpx 0 10rpx; margin: 20rpx 0 10rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.userStyle .menus2 .menus_item2{ .userStyle .menus2 .menus_item2 {
width: 100%; width: 100%;
height: 80rpx; height: 80rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin-left: 30rpx; margin-left: 30rpx;
}
} .userStyle .copyright {
.userStyle .copyright{ padding: 70rpx 0;
padding: 70rpx 0; display: flex;
display: flex; flex-direction: column;
flex-direction: column; align-items: center;
align-items: center; }
} .userStyle .ReceiptAdder {
.userStyle .ReceiptAdder{ position: absolute;
position: absolute; right: 0;
right: 0; top: 125rpx;
top:125rpx; width: 230rpx;
width: 230rpx; height: 80rpx;
height:80rpx ; border-top-left-radius: 40rpx;
border-top-left-radius: 40rpx; border-bottom-left-radius: 40rpx;
border-bottom-left-radius: 40rpx; display: flex;
display: flex; flex-direction: row;
flex-direction: row; align-items: center;
align-items: center; padding: 0 20rpx;
padding: 0 20rpx; }
}
</style> </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