475 lines
11 KiB
Vue
475 lines
11 KiB
Vue
<template>
|
||
<view>
|
||
<view class="hm-header-xian"></view>
|
||
<!-- 用户信息 -->
|
||
<view class="header">
|
||
<view class="user">
|
||
<image class="avatar" :src="userInfo.avatar.url" />
|
||
<view v-if="isLogin">
|
||
<view class="name" @click="goTo('user/detail/index')">
|
||
{{userInfo.phone}}
|
||
<view class="setting">
|
||
<u-icon color="#c0c4cc" size="24" name="setting"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else>
|
||
<!-- #ifdef H5 -->
|
||
<view class="name" @click="goTo('login/index',false)">
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
|
||
<view class="name" @click="login = true">
|
||
<!-- #endif -->
|
||
登录/注册
|
||
<view class="hm-dis-block-inline">
|
||
<u-icon color="#303133" name="arrow-right"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="center.vip == 1 && isLogin" class="vip">
|
||
<view class="icon">
|
||
<u-icon color="#fcbd71" bold size="20" name="level"></u-icon>
|
||
</view>
|
||
<view v-if="userInfo.v.value">
|
||
VIP{{userInfo.v.value}}
|
||
<view class="but">
|
||
<u-button @click="goTo('user/vip/index')" icon="play-right-fill" type="info" size="mini"
|
||
text="会员详情"></u-button>
|
||
</view>
|
||
</view>
|
||
<view v-else>
|
||
开通会员卡，各种优惠享不停
|
||
<view class="but">
|
||
<u-button @click="goTo('user/vip/open?action=vip')" icon="play-right-fill" type="info"
|
||
size="mini" text="立即开通"></u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="hm-p-lr-20 hm-m-t-20">
|
||
<view class="navbar">
|
||
<u-grid :border="false" col="4">
|
||
<u-grid-item @click="onTargetOrder(0)">
|
||
<image src="/static/user/order.png"></image>
|
||
<view class="text">全部订单</view>
|
||
</u-grid-item>
|
||
<u-grid-item @click="onTargetOrder(1)">
|
||
<u-badge :count="isLogin?orderCount.payment:0" :offset="[20, 20]"></u-badge>
|
||
<image src="/static/user/payment.png"></image>
|
||
<view class="text">待付款</view>
|
||
</u-grid-item>
|
||
<u-grid-item @click="onTargetOrder(2)">
|
||
<u-badge :count="isLogin?orderCount.comment:0" :offset="[20, 20]"></u-badge>
|
||
<image src="/static/user/evaluate.png"></image>
|
||
<view class="text">待评价</view>
|
||
</u-grid-item>
|
||
<u-grid-item @click="onTargetOrder(3)">
|
||
<u-badge :count="isLogin?orderCount.refund10:0" :offset="[20, 20]"></u-badge>
|
||
<image src="/static/user/refund.png"></image>
|
||
<view class="text">待退款</view>
|
||
</u-grid-item>
|
||
</u-grid>
|
||
</view>
|
||
</view>
|
||
<view class="hm-p-lr-20 hm-m-t-20">
|
||
<view class="menu">
|
||
<view class="navbar-list" v-for="(item, index) in center.menu" :key="index"
|
||
@click="goTo(item.path)">
|
||
<image :src="item.logo"></image>
|
||
{{item.title}}
|
||
<view class="arrow-right">
|
||
<u-icon color="#c0c4cc" name="arrow-right"></u-icon>
|
||
</view>
|
||
</view>
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view v-if="center.contact.is_open == 1" class="navbar-list">
|
||
<view v-if="center.contact.type == 'wechat'">
|
||
<button open-type="contact" class="hm-btn-normal">
|
||
<image src="/static/user/service.png"></image>
|
||
<text style="color: #303133;">联系我们</text>
|
||
<view class="arrow-right">
|
||
<u-icon color="#c0c4cc" name="arrow-right"></u-icon>
|
||
</view>
|
||
</button>
|
||
</view>
|
||
<view v-else @click="callMe(center.contact.phone)">
|
||
<image src="/static/user/service.png"></image>
|
||
联系我们
|
||
<view class="arrow-right">
|
||
<u-icon color="#c0c4cc" name="arrow-right"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="center.setting == 1" class="navbar-list">
|
||
<button open-type="openSetting" class="hm-btn-normal">
|
||
<image src="/static/user/setting.png"></image>
|
||
<text style="color: #303133;">权限设置</text>
|
||
<view class="arrow-right">
|
||
<u-icon color="#c0c4cc" name="arrow-right"></u-icon>
|
||
</view>
|
||
</button>
|
||
</view>
|
||
<view v-if="center.helper == 1" class="navbar-list" @click="helper">
|
||
<image src="/static/user/settle.png"></image>
|
||
商家助手
|
||
<view class="arrow-right">
|
||
<u-icon color="#c0c4cc" name="arrow-right"></u-icon>
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
</view>
|
||
</view>
|
||
<!--技术支持 -->
|
||
<view class="hm">
|
||
{{applet.copyright}} <text class="v">V{{applet.version}}</text>
|
||
</view>
|
||
<!-- #ifndef H5 -->
|
||
<u-popup :show="login" round="10" closeable @close="login = false">
|
||
<view class="hm-p-20 hm-border-b">{{applet.app_name}}</view>
|
||
<view class="app-img">
|
||
<image :src="applet.head_img"></image>
|
||
</view>
|
||
<view class="app-title">{{applet.signature}}</view>
|
||
<view class="hm-p-tb-20">
|
||
<view class="app-50">
|
||
<view class="but">
|
||
<u-button @click="login = false" type="info">暂不登录</u-button>
|
||
</view>
|
||
</view>
|
||
<view class="app-50">
|
||
<view class="but">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<u-button type="success" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
|
||
text="一键登录"></u-button>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-ALIPAY -->
|
||
<button
|
||
open-type="getAuthorize"
|
||
scope="phoneNumber"
|
||
onGetAuthorize="getPhoneNumber"
|
||
onError="handleAuthError"
|
||
>一键登录</button>
|
||
<!-- #endif -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!--
|
||
<view class="hm-col-tips hm-font-24 hm-text-center hm-p-tb-20">
|
||
授权登录即表示已阅读并同意<text class="hm-col-error">《会员须知》《隐私协议》</text>
|
||
</view>
|
||
-->
|
||
</u-popup>
|
||
<!-- #endif -->
|
||
</view>
|
||
</template>
|
||
<script>
|
||
const App = getApp();
|
||
export default {
|
||
data() {
|
||
return {
|
||
center: {}, //用户中心配置
|
||
isLogin: false,
|
||
userInfo: {
|
||
avatar: {
|
||
url: '/static/default-avatar.jpg'
|
||
},
|
||
v: {
|
||
value: 0
|
||
}
|
||
},
|
||
orderCount: {},
|
||
couponCount: {},
|
||
login: false,
|
||
applet: {},
|
||
};
|
||
},
|
||
components: {},
|
||
props: {},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad(options) {
|
||
let _this = this;
|
||
_this.getCenter();
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面显示
|
||
*/
|
||
onShow() {
|
||
let _this = this;
|
||
_this.login = false;
|
||
_this.isLogin = App.checkIsLogin();
|
||
_this.getApplet();
|
||
if (_this.isLogin) {
|
||
// 获取当前用户信息
|
||
_this.getUserDetail();
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
/**
|
||
* 一键授权登录
|
||
*/
|
||
getPhoneNumber: function(e) {
|
||
let _this = this;
|
||
// #ifdef MP-ALIPAY
|
||
my.getPhoneNumber({
|
||
protocols:{
|
||
isvAppId: _this.applet.component_appid
|
||
},
|
||
success: (res) => {
|
||
let rs = JSON.parse(res.response);
|
||
_this.login = false;
|
||
if(rs.response.code){
|
||
App.showError('错误代码：'+rs.response.subCode+'错误信息：'+rs.response.subMsg);
|
||
return false;
|
||
}
|
||
App.getPhoneNumber(rs, (msg) => {
|
||
_this.isLogin = true;
|
||
_this.getUserDetail();
|
||
App.showSuccess(msg);
|
||
});
|
||
}
|
||
});
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
App.getPhoneNumber(e, (msg) => {
|
||
_this.login = false;
|
||
_this.isLogin = true;
|
||
_this.getUserDetail();
|
||
App.showSuccess(msg);
|
||
});
|
||
// #endif
|
||
},
|
||
|
||
/**
|
||
* 打开商户端小程序
|
||
*/
|
||
helper: function() {
|
||
let _this = this;
|
||
if (_this.applet.helper_appid == '') {
|
||
App.showError('未配置助手小程序');
|
||
} else {
|
||
uni.navigateToMiniProgram({
|
||
appId: _this.applet.helper_appid,
|
||
success(res) { // 打开成功
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 拨打电话
|
||
*/
|
||
callMe(phone) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 获取当前用户信息
|
||
*/
|
||
getUserDetail() {
|
||
let _this = this;
|
||
App._get('user.index/detail', {}, result => {
|
||
_this.setData(result.data);
|
||
});
|
||
},
|
||
/**
|
||
* 获取用户中心配置
|
||
*/
|
||
getCenter() {
|
||
let _this = this;
|
||
App._get('applet/center', {}, result => {
|
||
_this.center = result.data;
|
||
});
|
||
},
|
||
/**
|
||
* 订单导航跳转
|
||
*/
|
||
onTargetOrder(order_type) {
|
||
let _this = this;
|
||
uni.setStorageSync('order_type', order_type);
|
||
App.goTo('order/index'); // 转跳指定的页面
|
||
},
|
||
|
||
/**
|
||
* 菜单列表导航跳转
|
||
*/
|
||
goTo(url) {
|
||
let _this = this;
|
||
if (url != 'login/index') {
|
||
if (!_this.onCheckLogin()) {
|
||
return false;
|
||
}
|
||
}
|
||
App.goTo(url); // 转跳指定的页面
|
||
},
|
||
|
||
/**
|
||
* 验证是否已登录
|
||
*/
|
||
onCheckLogin() {
|
||
let _this = this;
|
||
if (!_this.isLogin) {
|
||
App.showError('很抱歉，您还没有登录');
|
||
return false;
|
||
}
|
||
return true;
|
||
},
|
||
/**
|
||
* 获取当前小程序配置
|
||
*/
|
||
getApplet() {
|
||
let _this = this,
|
||
applet;
|
||
if (applet = uni.getStorageSync('applet')) {
|
||
_this.applet = applet;
|
||
} else {
|
||
App.getAppletBase(() => {
|
||
_this.getApplet();
|
||
});
|
||
}
|
||
}
|
||
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.header {
|
||
padding: 0 20rpx;
|
||
background-color: #fff;
|
||
|
||
.user {
|
||
height: 100rpx;
|
||
padding: 20rpx;
|
||
|
||
.avatar {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
float: left;
|
||
margin-right: 20rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.name {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
line-height: 100rpx;
|
||
color: #303133;
|
||
|
||
.setting {
|
||
float: right;
|
||
margin-top: 28rpx;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
|
||
.vip {
|
||
padding: 15rpx 40rpx;
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
background-color: #303133;
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
border-top-left-radius: 40rpx;
|
||
border-top-right-radius: 40rpx;
|
||
|
||
.icon {
|
||
display: inline-block;
|
||
float: left;
|
||
margin-top: 8rpx;
|
||
margin-right: 5rpx;
|
||
}
|
||
|
||
.but {
|
||
display: inline-block;
|
||
float: right;
|
||
margin-top: 6rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.navbar {
|
||
background-color: #fff;
|
||
border-radius: 15rpx;
|
||
padding: 30rpx 20rpx;
|
||
|
||
image {
|
||
height: 60rpx;
|
||
width: 60rpx;
|
||
}
|
||
|
||
.text {
|
||
color: #000;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.menu {
|
||
border-radius: 15rpx;
|
||
padding: 0 20rpx 30rpx 20rpx;
|
||
background-color: #fff;
|
||
|
||
.navbar-list {
|
||
padding-top: 30rpx;
|
||
line-height: 50rpx;
|
||
|
||
image {
|
||
float: left;
|
||
margin-right: 20rpx;
|
||
height: 50rpx;
|
||
width: 50rpx;
|
||
}
|
||
|
||
.text {
|
||
display: inline-block;
|
||
float: right;
|
||
margin-right: 10rpx;
|
||
font-size: 24rpx;
|
||
color: #fa3534;
|
||
}
|
||
|
||
.arrow-right {
|
||
display: inline-block;
|
||
float: right;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.app-img {
|
||
text-align: center;
|
||
|
||
image {
|
||
height: 120rpx;
|
||
width: 120rpx;
|
||
margin-top: 40rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.app-title {
|
||
color: #999;
|
||
padding: 10rpx 0rpx 20rpx 0rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.app-50 {
|
||
width: 50%;
|
||
text-align: center;
|
||
display: inline-block;
|
||
|
||
.but {
|
||
width: 50%;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
</style> |