708 lines
18 KiB
Vue
708 lines
18 KiB
Vue
<template>
|
|
<view class="user user-page">
|
|
<view
|
|
v-if="$store.getters.token || userInfo.uid"
|
|
class="acea-row row-column"
|
|
>
|
|
<view class="my-hearder">
|
|
<view class="my-header-bg">
|
|
<rich-text :nodes="myHeaderBgHtml" />
|
|
</view>
|
|
<view class="my-header-body">
|
|
<view
|
|
:style="{
|
|
'padding-top': statusBarHeight
|
|
}"
|
|
class="title"
|
|
>
|
|
地标文化特产
|
|
</view>
|
|
<view class="info">
|
|
<view class="name-cont">
|
|
<view class="txt flex">
|
|
{{ userInfo.nickname }}
|
|
<image
|
|
:src="webUrl + '/page/my/img-vip.png'"
|
|
class="vip"
|
|
/>
|
|
</view>
|
|
<view class="qrcode" @click="getSpreadPoster">
|
|
<image :src="webUrl + '/icon/icon-qrcode.png'" class="code" />
|
|
<text class="code-txt">会员码</text>
|
|
</view>
|
|
</view>
|
|
<view class="avatar-cont" @click="goPersonalData()">
|
|
<image :src="userInfo.avatar" class="img" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="my-hdeader-bottom">
|
|
<view class="item" @click="linkTo('/pages/user/UserBill/index')">
|
|
<view class="number">
|
|
{{ userInfo.nowMoney ? force2Decimal(userInfo.nowMoney) : 0.00 }}
|
|
</view>
|
|
<view class="txt">
|
|
<image :src="webUrl + '/icon/icon-yue.png'" class="img" />
|
|
余额
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="number">
|
|
{{ userInfo.integral || 0 }}
|
|
</view>
|
|
<view class="txt">
|
|
<image :src="webUrl + '/icon/icon-jifen.png'" class="img" />
|
|
积分
|
|
</view>
|
|
</view>
|
|
<view class="item" @click="linkTo('')">
|
|
<view class="txt">
|
|
<image :src="webUrl + '/icon/icon-kefu.png'" class="img" />
|
|
官方客服
|
|
<button class="cus-btn" open-type="contact"></button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
v-if="userInfo.hotel !== null && userInfo.hotel.checkState === 'C1'"
|
|
class="hotel-btn"
|
|
@click="innTagClick"
|
|
>
|
|
<image :src="webUrl + '/page/my/img-my-hotel-btn.png'" class="img" />
|
|
</view>
|
|
</view>
|
|
<view class="my-wrapper wrapper">
|
|
<view class="myOrder">
|
|
<view class="title acea-row row-between-wrapper">
|
|
<view class="acea-row row-middle">
|
|
<text class="line"></text>
|
|
<text>我的订单</text>
|
|
</view>
|
|
<text @click="goMyOrder(0)" class="allOrder">
|
|
<text class="iconfont icon-jiantou"></text>
|
|
</text>
|
|
</view>
|
|
<view class="orderState acea-row row-middle">
|
|
<view @click="goMyOrder(1)" class="item">
|
|
<view class="pictrue">
|
|
<image
|
|
:src="webUrl+'/icon/icon-order-status1.png'"
|
|
class="icon-order"
|
|
/>
|
|
<text
|
|
v-if="orderStatusNum.unpaidCount > 0"
|
|
class="order-status-num"
|
|
>
|
|
{{ orderStatusNum.unpaidCount }}
|
|
</text>
|
|
</view>
|
|
<view>待付款</view>
|
|
</view>
|
|
<view @click="goMyOrder(2)" class="item">
|
|
<view class="pictrue">
|
|
<image
|
|
:src="webUrl+'/icon/icon-order-status2.png'"
|
|
class="icon-order"
|
|
/>
|
|
<text
|
|
v-if="orderStatusNum.unshippedCount > 0"
|
|
class="order-status-num"
|
|
>
|
|
{{ orderStatusNum.unshippedCount }}
|
|
</text>
|
|
</view>
|
|
<view>待发货</view>
|
|
</view>
|
|
<view @click="goMyOrder(3)" class="item">
|
|
<view class="pictrue">
|
|
<image
|
|
:src="webUrl+'/icon/icon-order-status3.png'"
|
|
class="icon-order"
|
|
/>
|
|
<text
|
|
v-if="orderStatusNum.receivedCount > 0"
|
|
class="order-status-num"
|
|
>
|
|
{{ orderStatusNum.receivedCount }}
|
|
</text>
|
|
</view>
|
|
<text>待收货/核销</text>
|
|
</view>
|
|
<view @click="goMyOrder(4)" class="item">
|
|
<view class="pictrue">
|
|
<image
|
|
:src="webUrl+'/icon/icon-order-status4.png'"
|
|
class="icon-order"
|
|
/>
|
|
<text
|
|
v-if="orderStatusNum.evaluatedCount > 0"
|
|
class="order-status-num"
|
|
>
|
|
{{ orderStatusNum.evaluatedCount }}
|
|
</text>
|
|
</view>
|
|
<text>待评价</text>
|
|
</view>
|
|
<view @click="goReturnList()" class="item">
|
|
<view class="pictrue">
|
|
<image
|
|
:src="webUrl+'/icon/icon-order-status5.png'"
|
|
class="icon-order"
|
|
/>
|
|
<text
|
|
v-if="orderStatusNum.refundCount > 0"
|
|
class="order-status-num"
|
|
>
|
|
{{ orderStatusNum.refundCount }}
|
|
</text>
|
|
</view>
|
|
<text>售后/退款</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 我的服务开始 -->
|
|
<view class="myService" style="margin-top: 30rpx !important;">
|
|
<view class="title acea-row row-middle">
|
|
<text class="line"></text>
|
|
<text>所有功能</text>
|
|
</view>
|
|
<view class="my-tool-wrap">
|
|
<view class="cont">
|
|
<view
|
|
v-for="(item, index) in toolList"
|
|
:key="index"
|
|
:class="{
|
|
'tool-item-left': [0, 3, 6, 9].includes(index),
|
|
'tool-item-right': [2, 5, 8, 11].includes(index)
|
|
}"
|
|
class="tool-item flex"
|
|
@click="toolItemClickHandle(item)"
|
|
>
|
|
<image
|
|
:src="webUrl + item.icon"
|
|
class="img"
|
|
/>
|
|
<view class="txt">
|
|
{{ item.text }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 我的服务结束 -->
|
|
<view v-if="bannerHtml" class="banner-wrap">
|
|
<rich-text :nodes="bannerHtml" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<uni-popup ref="popup" type="center">
|
|
<view
|
|
class="acea-row row-column row-middle"
|
|
style="position: relative;background-color: #fff;border-radius: 20rpx;"
|
|
>
|
|
<view
|
|
class="acea-row row-center"
|
|
style="border-radius: 50%;margin-top: -52rpx;background-color: #fff;"
|
|
>
|
|
<image
|
|
:src="userInfo.avatar"
|
|
style="width: 96rpx;height: 96rpx;border-radius: 50%;margin: 8rpx;"
|
|
/>
|
|
</view>
|
|
<view
|
|
class="acea-row row-column row-center"
|
|
style="margin-top: 20rpx;margin-bottom: 40rpx;"
|
|
>
|
|
<text style="text-align: center;">{{ userInfo.nickname }}</text>
|
|
<image
|
|
:src="spreadPoster.wap_poster"
|
|
style="width: 512rpx;height: 512rpx;"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapGetters, mapMutations} from "vuex";
|
|
import {
|
|
getSpreadImg,
|
|
getUserInfo,
|
|
getUserLevelInfo,
|
|
noticeList,
|
|
getUserCenterBanner
|
|
} from "@/api/user";
|
|
import {isWeixin} from "@/utils";
|
|
import cookie from "@/utils/store/cookie";
|
|
|
|
const NAME = "User";
|
|
var that;
|
|
export default {
|
|
name: NAME,
|
|
props: {},
|
|
data: function () {
|
|
return {
|
|
statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
isWeixin: false,
|
|
isInnOwer: false,//是否是客栈主
|
|
userLevelInfo: null,
|
|
unreadMsgList: [],
|
|
orderStatusNum: {
|
|
"completeCount": 0,
|
|
"evaluatedCount": 0,
|
|
"orderCount": 0,
|
|
"receivedCount": 0,
|
|
"refundCount": 0,
|
|
"sumPrice": 0,
|
|
"unpaidCount": 0,
|
|
"unshippedCount": 0
|
|
},
|
|
spreadPoster: {},
|
|
toolList: [
|
|
{
|
|
text: '我的优惠券',
|
|
url: '/pkg_user/views/myCoupons',
|
|
icon: '/icon/icon-coupon.png',
|
|
allowEnter: true
|
|
},
|
|
{
|
|
text: '物流地址',
|
|
url: '/pages/user/address/AddressManagement/index',
|
|
icon: '/icon/icon-addr.png',
|
|
allowEnter: true
|
|
},
|
|
{
|
|
text: '我的收藏',
|
|
url: '/pkg_user/views/myFavorite',
|
|
icon: '/icon/icon-star.png',
|
|
allowEnter: true
|
|
},
|
|
{
|
|
text: '银行卡管理',
|
|
url: '/pkg_user/views/bankCardList',
|
|
icon: '/icon/icon-card.png',
|
|
allowEnter: true
|
|
},
|
|
{
|
|
text: '账户明细',
|
|
url: '/pages/user/UserBill/index',
|
|
icon: '/icon/icon-coin.png',
|
|
allowEnter: true
|
|
},
|
|
{
|
|
text: '提现申请',
|
|
url: '/pkg_user/views/withdrawal',
|
|
icon: '/icon/icon-money.png',
|
|
allowEnter: true
|
|
},
|
|
{
|
|
text: '团队管理',
|
|
url: '/pages/user/promotion/UserPromotion/index',
|
|
icon: '/icon/icon-users.png',
|
|
allowEnter: true
|
|
},
|
|
{
|
|
text: '帮助中心',
|
|
url: '/pages/user/Message/Message',
|
|
icon: '/icon/icon-help.png',
|
|
allowEnter: true
|
|
},
|
|
{
|
|
text: '设置中心',
|
|
url: '/pkg_user/views/personalData',
|
|
icon: '/icon/icon-setting.png',
|
|
allowEnter: true
|
|
}
|
|
],
|
|
myHeaderBgHtml: `<img src="${this.$VUE_APP_RESOURCES_URL}/page/my/bg.png" style="diaplay: block;max-width: 100%">`,
|
|
bannerHtml: ''
|
|
};
|
|
},
|
|
computed: mapGetters(["userInfo"]),
|
|
watch: {
|
|
userInfo(newVal) {
|
|
this.$set(this, 'orderStatusNum', newVal.orderStatusNum);
|
|
}
|
|
},
|
|
onShow() {
|
|
if (this.$store.getters.token) {
|
|
uni.showLoading({
|
|
title: "加载中"
|
|
});
|
|
this.$store.dispatch("getUser", true);
|
|
//获取用户等级信息
|
|
this.getUserLevelInfo();
|
|
// this.User();
|
|
// this.MenuUser();
|
|
this.isWeixin = isWeixin();
|
|
this.getUnreadMsgList();
|
|
} else {
|
|
cookie.set("redirect", "/pages/user/User/index");
|
|
|
|
uni.reLaunch({
|
|
url: "/pages/authorization/index"
|
|
})
|
|
}
|
|
},
|
|
onHide() {
|
|
this.updateAuthorizationPage(false);
|
|
},
|
|
methods: {
|
|
...mapMutations(["updateAuthorizationPage"]),
|
|
goRoomLogs() {
|
|
uni.navigateTo({
|
|
url: "/pkg_common/views/roomLogs"
|
|
})
|
|
},
|
|
force2Decimal(v) {
|
|
return this.$force2Decimal(v);
|
|
},
|
|
innTagClick() {
|
|
// 跳转到客栈主页
|
|
this.$yrouter.push({
|
|
path: "/pagesInn/inn/innHome",
|
|
query: {
|
|
id: this.userInfo.hotel.id,
|
|
isMyInn: true
|
|
}
|
|
})
|
|
},
|
|
getSpreadPoster() {
|
|
var that = this;
|
|
if (!this.spreadPoster.wap_poster) {
|
|
uni.showLoading();
|
|
getSpreadImg({}).then(res => {
|
|
uni.hideLoading();
|
|
that.spreadPoster = res.data[0];
|
|
that.$refs.popup.open();
|
|
}, err => {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: err.msg || err.response.data.msg || err.response.data.message,
|
|
icon: "none",
|
|
duration: 2000
|
|
});
|
|
}
|
|
);
|
|
} else {
|
|
that.$refs.popup.open();
|
|
}
|
|
},
|
|
goReturnList() {
|
|
this.$yrouter.push("/pages/order/ReturnList/index");
|
|
},
|
|
goMyOrder(type) {
|
|
this.$yrouter.push({
|
|
path: "/pages/order/MyOrder/index",
|
|
query: {
|
|
type
|
|
}
|
|
});
|
|
},
|
|
goUserAccount() {
|
|
this.$yrouter.push({
|
|
path: "/pages/user/UserAccount/index"
|
|
});
|
|
},
|
|
goPersonalData() {
|
|
this.$yrouter.push("/pkg_user/views/personalData");
|
|
},
|
|
// 获取用户等级信息
|
|
getUserLevelInfo: function () {
|
|
var that = this;
|
|
getUserLevelInfo().then((res) => {
|
|
if (res.data) {
|
|
that.userLevelInfo = res.data;
|
|
}
|
|
uni.hideLoading();
|
|
}).catch(err => {
|
|
uni.hideLoading();
|
|
}).finally(() => {
|
|
uni.hideLoading();
|
|
});
|
|
// 海报
|
|
getUserCenterBanner().then(res => {
|
|
const { success, data } = res
|
|
if (success) {
|
|
if (data.userCenterBanner) {
|
|
this.bannerHtml = `<img src="${data.userCenterBanner}" style="display: block;max-width: 100%;" />`
|
|
}
|
|
}
|
|
})
|
|
},
|
|
User: function () {
|
|
let that = this;
|
|
debugger
|
|
getUserInfo().then(res => {
|
|
|
|
if (res.data) {
|
|
//that.user = res.data;
|
|
that.$set(that, 'orderStatusNum', res.data.orderStatusNum);
|
|
that.$forceUpdate();
|
|
console.log('orderStatusNum:' + JSON.stringify(res.data.orderStatusNum));
|
|
}
|
|
|
|
});
|
|
},
|
|
getUnreadMsgList: function () {
|
|
var params = {
|
|
limit: 99999,
|
|
page: 1,
|
|
readFlag: 'RF0'
|
|
}
|
|
// mescroll.endByPage(0, 0);
|
|
// return;
|
|
let that = this;
|
|
noticeList(params)
|
|
.then(res => {
|
|
|
|
that.unreadMsgList = res.data;
|
|
|
|
})
|
|
.catch(err => {
|
|
uni.showToast({
|
|
title: err + '',
|
|
icon: 'none',
|
|
mask: false,
|
|
duration: 1500
|
|
});
|
|
})
|
|
},
|
|
toolItemClickHandle(item) {
|
|
const url = item.url
|
|
if (!url || !item.allowEnter) {
|
|
return
|
|
}
|
|
uni.navigateTo({ url })
|
|
},
|
|
linkTo(url) {
|
|
if (!url) {
|
|
return
|
|
}
|
|
uni.navigateTo({ url })
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.innTag {
|
|
margin-left: -30rpx;
|
|
width: 196rpx;
|
|
height: 64rpx;
|
|
border-radius: 0px 32rpx 32rpx 0px;
|
|
background: #C51919;
|
|
}
|
|
.order-status-num {
|
|
min-width: 0.33 * 100rpx;
|
|
background-color: #fff;
|
|
color: #FE5261;
|
|
border-radius: 15px;
|
|
position: absolute;
|
|
right: -0.14 * 100rpx;
|
|
top: -0.15 * 100rpx;
|
|
font-size: 0.2 * 100rpx;
|
|
// padding: 0 0.08 * 100rpx;
|
|
border: 1px solid #FE5261;
|
|
}
|
|
.header {
|
|
background: linear-gradient(90deg, rgba(254, 150, 107, 1) 0%, rgba(255, 88, 75, 1) 100%);
|
|
}
|
|
.wrapper {
|
|
// background-color: #FFF;
|
|
margin: 0 30rpx;
|
|
z-index: 1;
|
|
border-radius: 0 0 16rpx 16rpx;
|
|
}
|
|
.user .wrapper {
|
|
padding: 0 !important;
|
|
}
|
|
.wrapper .nav {
|
|
position: relative;
|
|
margin-top: 40rpx;
|
|
box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
border-radius: 16rpx;
|
|
}
|
|
.myOrder {
|
|
border-radius: 24rpx;
|
|
background: #F6F6F6 !important;
|
|
}
|
|
.myService {
|
|
border-radius: 24rpx;
|
|
background: #F6F6F6 !important;
|
|
}
|
|
.user .wrapper .nav {
|
|
// min-height: 140rpx;
|
|
height: auto;
|
|
padding-top: 20rpx;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
.my-wrapper {
|
|
padding: 30upx;
|
|
&.wrapper {
|
|
padding: 0 0 30rpx 0 !important;
|
|
}
|
|
.my-tool-wrap {
|
|
padding: 0 24rpx 24upx 24upx;
|
|
.cont {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
padding: 32rpx 24rpx 0 24rpx;
|
|
border-radius: 24rpx;
|
|
background-color: #fff;
|
|
.tool-item {
|
|
width: 33.3333%;
|
|
margin: 0 0 42rpx 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.img {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
.txt {
|
|
padding: 0 0 0 6rpx;
|
|
color: #666;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
.tool-item-left {
|
|
justify-content: flex-start;
|
|
}
|
|
.tool-item-right {
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
}
|
|
.banner-wrap {
|
|
padding: 30rpx 0 0 0;
|
|
}
|
|
}
|
|
.user-page {
|
|
background-color: #fff;
|
|
.my-hearder {
|
|
position: relative;
|
|
.my-header-bg {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
.my-header-body {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 5;
|
|
}
|
|
.title {
|
|
height: 44px;
|
|
line-height: 44px;
|
|
font-size: 36upx;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
.info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 60rpx;
|
|
color: #fff;
|
|
.name-cont {
|
|
.txt {
|
|
align-items: flex-end;
|
|
margin: 0 0 32rpx 0;
|
|
font-size: 26px;
|
|
line-height: 26px;
|
|
.vip {
|
|
margin: 0 0 0 12rpx;
|
|
width: 48rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
.qrcode {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10rpx 16rpx;
|
|
border: 1rpx solid #FFFBD3;
|
|
border-radius: 8rpx;
|
|
background-color: #822629;
|
|
.code {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.code-txt {
|
|
display: inline-block;
|
|
padding: 0 0 0 16rpx;
|
|
margin: 0 0 0 16rpx;
|
|
border-left: 1px solid #FFFBD3;
|
|
line-height: 16px;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
}
|
|
.avatar-cont {
|
|
.img {
|
|
width: 78px;
|
|
height: 78px;
|
|
border-radius: 50%;
|
|
border: 2px solid #fff;
|
|
}
|
|
}
|
|
}
|
|
.my-hdeader-bottom {
|
|
position: absolute;
|
|
bottom: 30rpx;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 5;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
padding: 0 60rpx;
|
|
.item {
|
|
.number {
|
|
margin: 0 0 10rpx 0;
|
|
font-size: 26px;
|
|
color: #333;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
.txt {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.img {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin: 0 12rpx 0 0;
|
|
}
|
|
.cus-btn {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 20px;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.hotel-btn {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 120rpx;
|
|
z-index: 5;
|
|
.img {
|
|
width: 238rpx;
|
|
height: 78rpx;
|
|
}
|
|
}
|
|
}
|
|
.icon-order {
|
|
width: 52rpx;
|
|
height: 52rpx;
|
|
}
|
|
}
|
|
</style>
|