258 lines
9.1 KiB
Vue
258 lines
9.1 KiB
Vue
<template>
|
|
<view class="waper">
|
|
<view class="banner">
|
|
<image class="bgImg" src="../../static/image/mine/myBgimg.png" mode=""></image>
|
|
<view class="info" v-if="userInfo">
|
|
<view class="img">
|
|
<image :src="userInfo.avatar" mode=""></image>
|
|
</view>
|
|
<view class="text" v-if="userInfo.token">
|
|
<view>{{userInfo.nickname}}</view>
|
|
<view @click="toUrl({ url: '/pages/my/myProfile' })">查看并编辑个人资料</view>
|
|
</view>
|
|
<view class="text" v-else @click="login">
|
|
<view>请登录</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="menu-box">
|
|
<!-- <image class="bgImg" src="../../static/image/mine/mineList.png" mode=""></image> -->
|
|
<view class="con-box">
|
|
<view class="waper_box">
|
|
<view class="waper_list" v-for="(i, index) in menuList" :key="index" v-if="!i.check || (configData && configData.examine == 'false')">
|
|
<view class="title">
|
|
<view>{{i.title}}</view>
|
|
</view>
|
|
<view class="cont">
|
|
<view class="list" v-for="(item, itemIndex) in i.list" :key="itemIndex" @click="toUrl(item)">
|
|
<view class="img">
|
|
<image :src="item.icon" mode=""></image>
|
|
</view>
|
|
<view class="text">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="btn" v-if="userInfo && userInfo.token">
|
|
<view @click="logOut">退出登录</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<uni-popup class="popupRefund" ref="popup" background-color="#fff">
|
|
<view class="popup-content">
|
|
<image class="bgImg" src="https://common/refundPopup.png" mode=""></image>
|
|
<view class="con">
|
|
<view class="title">温馨提示</view>
|
|
<view class="text">确定退出登录吗？</view>
|
|
<view class="btn-box">
|
|
<view class="close" @click="dialogClose">取消</view>
|
|
<view class="save" @click="dialogConfirm">确认</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
<tabbar name="mine"></tabbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabbar from '@/components/tabbar/index.vue'
|
|
export default {
|
|
components: { tabbar },
|
|
data () {
|
|
return {
|
|
userInfo: null,
|
|
configData: null,
|
|
menuList: [
|
|
{
|
|
title: '票务订单',
|
|
check: false,
|
|
list: [
|
|
{ name: '门票订单', icon: '../../static/image/mine/mpdd.png', url: '/pages/my/myOrder?index=' },
|
|
{ name: '商城订单', icon: '../../static/image/mine/scdd.png', url: '/pages/shop/order?index=0' },
|
|
{ name: '酒店订单', icon: '../../static/image/mine/jddd.png', url: '/pages/hotelOrder/list?index=1' },
|
|
]
|
|
},
|
|
{
|
|
title: '更多服务',
|
|
check: false,
|
|
list: [
|
|
{ name: '游客信息', icon: '../../static/image/mine/ykxx.png', url: '/pages/my/tourist' },
|
|
{ name: '我的收藏', icon: '../../static/image/mine/wdsc.png', url: '/pages/my/heart' },
|
|
{ name: '投诉建议', icon: '../../static/image/mine/tsjy.png', url: '/pages/my/complaint' },
|
|
{ name: '旅游年卡', icon: '../../static/image/mine/lynk.png', url: '/pages/my/annualCard' },
|
|
{ name: '一卡通', icon: '../../static/image/mine/ykt.png', url: '/pages/my/IPass' },
|
|
{ name: '联系客服', icon: '../../static/image/mine/lxkf.png', type: 'service' },
|
|
{ name: '投诉电话', icon: '../../static/image/mine/tsdh.png', type: 'complaint' },
|
|
{ name: '购物车', icon: '../../static/image/mine/gwc.png', url: '/pages/shop/cart' },
|
|
{ name: '收货地址', icon: '../../static/image/mine/shdz.png', url: '/pages/shop/addressList' }
|
|
]
|
|
}
|
|
]
|
|
}
|
|
},
|
|
onLoad () {
|
|
this.configData = uni.getStorageSync('configData');
|
|
},
|
|
onShow () {
|
|
this.getUesr();
|
|
},
|
|
methods: {
|
|
dialogConfirm() {
|
|
uni.removeStorageSync("ztc_token");
|
|
uni.removeStorageSync("user_nickname");
|
|
uni.removeStorageSync("user_avatar");
|
|
this.getUesr()
|
|
uni.showToast({ mask: true, title: '退出登录成功', icon: 'success' })
|
|
this.dialogClose()
|
|
},
|
|
dialogClose () {
|
|
this.$refs.popup.close()
|
|
},
|
|
logOut () {
|
|
this.$refs.popup.open()
|
|
},
|
|
getUesr () {
|
|
this.userInfo = {
|
|
nickname: uni.getStorageSync('user_nickname'),
|
|
avatar: uni.getStorageSync('user_avatar') ? this.$utils.setImgUrl(uni.getStorageSync('user_avatar')) : require('../../static/image/common/user.png'),
|
|
token: uni.getStorageSync('ztc_token')
|
|
}
|
|
},
|
|
login() {
|
|
uni.navigateTo({ url: '/pages/login/login' })
|
|
},
|
|
toUrl (info) {
|
|
if (info.url) {
|
|
if (!this.userInfo.token) {
|
|
uni.showToast({ title: '请登录后操作', icon: 'none', mask: true })
|
|
setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: '/pages/login/login'
|
|
})
|
|
}, 1500)
|
|
return false;
|
|
}
|
|
uni.navigateTo({ url: info.url })
|
|
} else {
|
|
if (info.type === 'service') {
|
|
uni.makePhoneCall({ phoneNumber: this.configData.phone }).catch((e) => {});
|
|
} else if (info.type === 'complaint') {
|
|
uni.makePhoneCall({ phoneNumber: this.configData.complaintPhone }).catch((e) => {});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.waper{
|
|
width: 100%;
|
|
.banner{
|
|
width: 100%; height: 400rpx; position: relative;
|
|
.bgImg {
|
|
width: 100%; height: 400rpx;
|
|
}
|
|
.info{
|
|
width: 100%; height: 148rpx; position: absolute; left: 0; bottom: 56rpx; box-sizing: border-box; padding: 0 32rpx; padding-left: 216rpx;
|
|
.img{
|
|
width: 148rpx; height: 148rpx; position: absolute; left: 32rpx; top: 0;
|
|
image{ border-radius: 50%; }
|
|
}
|
|
.text{
|
|
width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center;
|
|
view{
|
|
&:nth-child(1){ line-height: 56rpx; color: #333; font-size: 40rpx; font-weight: 500; }
|
|
&:nth-child(2){ margin-top: 10rpx; line-height: 34rpx; font-size: 24rpx; color: #666; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.card {
|
|
position: relative;
|
|
margin: -20rpx 32rpx 0;
|
|
width: 686rpx;
|
|
height: 212rpx;
|
|
.bgImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.title {
|
|
position: absolute;
|
|
top: 24rpx;
|
|
left: 40rpx;
|
|
.name {
|
|
font-weight: bold;
|
|
font-size: 42rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
.day {
|
|
margin-top: 12rpx;
|
|
font-size: 24rpx;
|
|
color: rgba(255,255,255,0.7);
|
|
}
|
|
}
|
|
.icon {
|
|
position: absolute;
|
|
width: 124rpx;
|
|
height: 124rpx;
|
|
top: -1rpx;
|
|
right: -1rpx;
|
|
}
|
|
}
|
|
.menu-box {
|
|
position: relative;
|
|
// margin-top: -78rpx;
|
|
.bgImg {
|
|
width: 750rpx;
|
|
height: 1088rpx;
|
|
}
|
|
.con-box {
|
|
padding-bottom: 40rpx;
|
|
// top: 52rpx;
|
|
width: 100%;
|
|
.waper_box{
|
|
width: 100%; box-sizing: border-box; padding: 0 32rpx;
|
|
// position: relative; margin-top: -20rpx;
|
|
.waper_list{
|
|
width: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 24rpx 0; margin-bottom: 20rpx;
|
|
.title{
|
|
box-sizing: border-box; padding-left: 24rpx;
|
|
view{ line-height: 50rpx; color: #333; font-size: 32rpx; font-weight: 500; position: relative; z-index: 3; }
|
|
}
|
|
.cont{
|
|
width: 100%; display: flex; flex-wrap: wrap;
|
|
.list{
|
|
width: 25%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 36rpx;
|
|
.img{ width: 64rpx; height: 64rpx; }
|
|
.text{ margin-top: 8rpx; color: #333; font-size: 24rpx; }
|
|
}
|
|
}
|
|
&:last-child{ margin-bottom: 0; }
|
|
&:first-child{
|
|
.cont {
|
|
width: 100%; box-sizing: border-box; padding: 0 54rpx;
|
|
.list {
|
|
width: 120rpx; margin-right: 108rpx;
|
|
&:last-child{ margin-right: 0; }
|
|
.img {
|
|
width: 80rpx !important;
|
|
height: 80rpx !important;
|
|
}
|
|
.text{
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.btn{
|
|
width: 100%; margin-top: 80rpx; box-sizing: border-box; padding: 0 60rpx;
|
|
view{ height: 90rpx; background: #03AE80; border-radius: 100rpx; line-height: 90rpx; text-align: center; font-weight: 500; font-size: 32rpx; color: #F6F9FF; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |