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> |