<template>
|
<view class="bg">
|
<view class="head-bg padding-lr">
|
<view @click="getProfile" class="user-info flex align-center justify-between">
|
<view class="flex align-center">
|
<image class="round head-img" :src="userInfo.avatar ? userInfo.avatar : '../../static/head.png'"
|
mode="aspectFill">
|
</image>
|
<view class="mobile"> {{ userInfo.nick_name ? userInfo.nick_name : '请登录' }} </view>
|
</view>
|
<!-- <view v-if="userInfo.token" @click="navTo('edituser')" class="flex align-center info-edit">
|
<view class="edit">编辑资料</view>
|
<u-icon name="arrow-right" color="#848B9E" size="24"></u-icon>
|
</view> -->
|
</view>
|
<view class="flex vip-bg justify-between align-center">
|
<view @click="navTo('mycombolist')" class="taocan">
|
<view class="title">我的权益</view>
|
<view class="desc">对话次数： {{ num }} </view>
|
</view>
|
<button @click="rede" class="cu-btn">兑换码</button>
|
</view>
|
</view>
|
<view class="mine-list padding-lr">
|
<view @click="shar" class="flex item align-center">
|
<u-icon name="/static/icon/mine-share.png" size="18"></u-icon>
|
<view class="flex align-center justify-between solid-bottom margin-left-sm">
|
<view class="title">分享好友</view>
|
<view class="flex align-center">
|
<view class="desc">分享有豪礼</view>
|
<u-icon name="arrow-right" color="#848B9E" size="16"></u-icon>
|
</view>
|
</view>
|
</view>
|
|
<view @click="toVip" class="flex item align-center" v-if="showPay">
|
<u-icon name="/static/icon/mine-gift.png" size="20"></u-icon>
|
<view class="flex align-center justify-between solid-bottom margin-left-sm">
|
<view class="title">开通权益</view>
|
<view class="flex align-center">
|
<view class="desc">享专属特权</view>
|
<u-icon name="arrow-right" color="#848B9E" size="16"></u-icon>
|
</view>
|
</view>
|
</view>
|
|
<view @click="navTo('help')" class="flex item align-center">
|
<u-icon name="/static/icon/mine-xin.png" size="20"></u-icon>
|
<view class="flex align-center justify-between solid-bottom margin-left-sm">
|
<view class="title">使用指南</view>
|
<view class="flex align-center">
|
<view class="desc">提问的艺术</view>
|
<u-icon name="arrow-right" color="#848B9E" size="16"></u-icon>
|
</view>
|
</view>
|
</view>
|
<view @click="toAgreement" class="flex item align-center">
|
<u-icon name="/static/icon/mine-xin.png" size="20"></u-icon>
|
<view class="flex align-center justify-between solid-bottom margin-left-sm">
|
<view class="title">用户协议</view>
|
<view class="flex align-center">
|
<view class="desc"></view>
|
<u-icon name="arrow-right" color="#848B9E" size="16"></u-icon>
|
</view>
|
</view>
|
</view>
|
<view @click="toPolicy" class="flex item align-center">
|
<u-icon name="/static/icon/mine-xin.png" size="20"></u-icon>
|
<view class="flex align-center justify-between solid-bottom margin-left-sm">
|
<view class="title">隐私政策</view>
|
<view class="flex align-center">
|
<view class="desc"></view>
|
<u-icon name="arrow-right" color="#848B9E" size="16"></u-icon>
|
</view>
|
</view>
|
</view>
|
|
|
<view @click="logout" class="flex item align-center">
|
<u-icon name="/static/icon/quit.png" size="18"></u-icon>
|
<view class="flex align-center justify-between solid-bottom margin-left-sm">
|
<view class="title">退出登录</view>
|
<view class="flex align-center">
|
<u-icon name="error" color="#848B9E" size="16"></u-icon>
|
</view>
|
</view>
|
</view>
|
<!-- #ifdef MP-WEIXIN -->
|
<button open-type="share" class="flex item align-center">
|
<u-icon name="/static/icon/mine-share.png" size="18"></u-icon>
|
<view class="flex align-center justify-between solid-bottom margin-left-sm">
|
<view class="title">分享好友</view>
|
<view class="flex align-center">
|
<!-- Todo -->
|
<view v-if="config.is_share == 1" class="desc">邀请新用户兑换 {{config.share_reward_num}} 次</view>
|
<u-icon name="arrow-right" color="#848B9E" size="16"></u-icon>
|
</view>
|
</view>
|
</button>
|
<button open-type="contact" class="flex item align-center">
|
<u-icon name="/static/icon/mine-service.png" size="18"></u-icon>
|
<view class="flex align-center justify-between solid-bottom margin-left-sm">
|
<view class="title">联系客服</view>
|
<view class="flex align-center">
|
<!-- <view class="desc">朋友扫码使用可赚钱</view> -->
|
<u-icon name="arrow-right" color="#848B9E" size="16"></u-icon>
|
</view>
|
</view>
|
</button>
|
<button open-type="feedback" class="flex item align-center">
|
<u-icon name="/static/icon/mine-xin.png" size="18"></u-icon>
|
<view class="flex align-center justify-between solid-bottom margin-left-sm">
|
<view class="title">问题反馈</view>
|
<view class="flex align-center">
|
<u-icon name="arrow-right" color="#848B9E" size="16"></u-icon>
|
</view>
|
</view>
|
</button>
|
<!-- #endif -->
|
</view>
|
<uni-popup ref="popup" type="dialog">
|
<uni-popup-dialog ref="inputClose" mode="input" title="兑换码" :value="rede_code" placeholder="请输入兑换码"
|
@confirm="dialogInputConfirm"></uni-popup-dialog>
|
</uni-popup>
|
<daxiang-getUserProfile ref="getUserProfile"></daxiang-getUserProfile>
|
<m-tabbar v-if="showTab" fixed fill :current="tabIndex" :tabbar="tabbar"></m-tabbar>
|
</view>
|
</template>
|
|
<script>
|
import {
|
mapState
|
} from 'vuex';
|
import mixin from "@/mixin/checkLoaded";
|
export default {
|
mixins: [mixin],
|
data() {
|
return {
|
showContact: false,
|
showDevNav: false,
|
rede_code: '',
|
loginCode: "",
|
showTab: false,
|
tabIndex: 0,
|
res_data:'123',
|
isPC:false
|
};
|
},
|
computed: {
|
showPay: function () {
|
let platform = 'h5';
|
// #ifdef APP-PLUS
|
platform = 'app';
|
// #endif
|
// #ifdef MP-WEIXIN
|
platform = 'wxmp';
|
// #endif
|
// #ifdef H5
|
if (/MicroMessenger/i.test(navigator.userAgent)) {
|
platform = 'gzh';
|
}else{
|
// 如果不是微信浏览器环境，则显示退出登陆的按钮
|
if (!this.userInfo.token) { //判断是否有用户登陆来进行退出登陆的显示与隐藏
|
this.isPC = false
|
}else{
|
this.isPC = true
|
}
|
|
}
|
// #endif
|
return (!!this.userInfo.token)
|
// return (platform == 'gzh' && this.$store.state.config.wxGzhPay == 1) || (platform == 'wxmp' && this.$store.state.config.mpPay == 1)
|
},
|
...mapState(['userInfo', 'num', 'config','tabbar'])
|
},
|
onLoad(options) {
|
this.getTabIndex()
|
// #ifdef MP-WEIXIN
|
if (!this.userInfo.token) {
|
uni.showLoading({
|
title: "同步服务器状态..."
|
})
|
uni.login({
|
success: (res) => {
|
console.log(res)
|
this.$request('/api/Member/wxMpQuickLogin', 'POST', {
|
code: res.code
|
}).then(rs => {
|
console.log(rs)
|
uni.setStorageSync('userInfo', rs.data)
|
uni.setStorageSync('token', rs.token)
|
rs.data.token = rs.token
|
this.$store.commit('login', rs.data);
|
uni.hideLoading()
|
}).catch(err => {
|
uni.hideLoading()
|
console.log(err)
|
this.$failToast(err, 'error')
|
})
|
}
|
})
|
}
|
// #endif
|
},
|
onShareAppMessage() {
|
return {
|
title: '快来和ChatFox聊天呀',
|
path: '/pages/index/home?share_m_id=' + this.userInfo.member_id,
|
imageUrl: 'https://s1.ax1x.com/2023/03/19/ppYVZRK.jpg'
|
}
|
},
|
methods: {
|
getTabIndex() {
|
let list = this.tabbar.list;
|
for (var i = 0; i < list.length; i++) {
|
if (list[i].pagePath == '/pages/mine/mine') {
|
this.tabIndex = i
|
this.showTab = true
|
}
|
}
|
},
|
toVip() {
|
if (!this.userInfo.token) {
|
uni.navigateTo({
|
url: "/pages/login/newlogin"
|
})
|
return
|
}
|
uni.navigateTo({
|
url:"/pages/vip/vip"
|
})
|
},
|
toAgreement() {
|
uni.navigateTo({
|
url:'../content/content?content_id=1'
|
})
|
},
|
toPolicy() {
|
uni.navigateTo({
|
url:'../content/content?content_id=2'
|
})
|
},
|
navTo(id) {
|
switch (id) {
|
case "help":
|
uni.navigateTo({
|
url: '/pages/content/help'
|
})
|
break;
|
}
|
},
|
shar(){
|
uni.navigateTo({
|
url:'/pages/shar/shar'
|
})
|
},
|
showContactPop() {
|
this.showContact ? this.showContact = false : this.showContact = true;
|
},
|
call() {
|
uni.makePhoneCall({
|
phoneNumber: '010-86203046'
|
})
|
},
|
getProfile(e) {
|
// #ifdef MP-WEIXIN
|
//与 uni.getUserProfile的参数一致
|
this.$refs.getUserProfile.open({
|
desc: '授权登录',
|
success: e => {
|
console.log(e)
|
this.$request('/api/Member/syncUserInfo', 'POST', {
|
nick_name: e.userInfo.nickName,
|
avatar: e.userInfo.avatarUrl
|
}).then(res => {
|
if (res.status == 200) {
|
res.data.token = this.$store.state.token
|
uni.setStorageSync('userInfo', res.data)
|
this.$store.commit('syncUserInfo', res.data);
|
this.$failToast('登录成功', 'success')
|
}
|
})
|
},
|
fail: err => {
|
console.log(err)
|
}
|
});
|
// #endif
|
// #ifndef MP-WEIXIN
|
if (!this.userInfo.member_id) {
|
uni.reLaunch({
|
url: "/pages/login/login"
|
})
|
}
|
// #endif
|
},
|
rede() {
|
if (!this.userInfo.token) {
|
uni.navigateTo({
|
url: "/pages/login/newlogin"
|
})
|
return
|
}
|
this.$refs.popup.open()
|
},
|
dialogInputConfirm(val) {
|
if (!val) {
|
uni.showModal({
|
content: "请输入兑换码！"
|
});
|
return
|
}
|
uni.showLoading({
|
title: '兑换中...'
|
})
|
this.$request('/api/Redemption/rede', 'POST', {
|
code: val
|
}).then(res => {
|
console.log(res)
|
if (res.status == 200) {
|
this.$refs.inputClose.close()
|
uni.hideLoading()
|
uni.showModal({
|
content: "已兑换成功"
|
})
|
this.rede_code = ""
|
this.$store.commit('syncUserNum', res.data.num)
|
} else {
|
this.$refs.inputClose.close()
|
uni.hideLoading()
|
uni.showModal({
|
content: res.status == 201 ? res.msg : '核销失败'
|
})
|
}
|
})
|
},
|
logout() {
|
uni.showModal({
|
title: '提示',
|
content: '确定退出登录吗？',
|
success: function (res) {
|
if (res.confirm) {
|
uni.removeStorageSync('userInfo')
|
uni.removeStorageSync('token')
|
this.$store.commit('logout')
|
uni.navigateTo({
|
url: this.tabbar.list[0].pagePath
|
})
|
} else if (res.cancel) {
|
console.log('用户点击取消');
|
}
|
}.bind(this)//可处理uni.shuowModal的异步（即拿不到data里面数据的解决办法）
|
});
|
|
}
|
},
|
};
|
</script>
|
|
<style>
|
/*每个页面公共css */
|
@import url("@/static/style/color-ui.css");
|
</style>
|
|
<style scoped>
|
.bg{
|
/* #ifndef H5 */
|
padding-top: var(--status-bar-height);
|
margin-top: 60rpx;
|
/* #endif */
|
background: url('@/static/img/mine/mine-bg.png') no-repeat;
|
background-size: 100%;
|
/*width: 100%;*/
|
}
|
</style>
|
<style lang="scss" scoped>
|
.solid-bottom::after{
|
border: none;
|
}
|
.head-bg {
|
.user-info {
|
/* #ifdef H5 */
|
padding-top: 60rpx;
|
/* #endif */
|
/* #ifndef H5 */
|
padding-top: 30rpx;
|
|
/* #endif */
|
.head-img {
|
width: 120rpx;
|
height: 120rpx;
|
}
|
|
.mobile {
|
padding-left: 23rpx;
|
font-size: 36rpx;
|
font-weight: bold;
|
color: #111;
|
}
|
|
.info-edit {
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #848b9e;
|
line-height: 18rpx;
|
padding-right: 12rpx;
|
}
|
}
|
|
.vip-bg {
|
background-image: linear-gradient(to right, #3428a8 5%, #ae6acd 95%);
|
border-radius: 32rpx;
|
height: 133rpx;
|
padding: 108rpx 56rpx;
|
margin-top: 50rpx;
|
|
.taocan {
|
color: #ffffff;
|
|
.title {
|
font-size: 48rpx;
|
font-weight: bold;
|
}
|
|
.desc {
|
font-size: 32rpx;
|
font-weight: 500;
|
line-height: 33rpx;
|
padding-top: 19rpx;
|
}
|
}
|
|
.cu-btn {
|
padding: 24rpx 32rpx;
|
background: #6c60d5;
|
border-radius: 16rpx;
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #fff;
|
}
|
}
|
}
|
|
.mine-list {
|
margin-top: 36rpx;
|
button {
|
border: none;
|
margin: 0;
|
padding: 0;
|
background-color: inherit;
|
}
|
|
button::after {
|
border: none;
|
}
|
|
.item {
|
background: #fff;
|
margin-bottom: 32rpx;
|
padding: 24rpx 32rpx;
|
border-radius: 24rpx;
|
|
.solid-bottom {
|
width: 100%;
|
}
|
|
.title {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #111;
|
line-height: 56rpx;
|
}
|
|
.desc {
|
padding-right: 12rpx;
|
font-size: 28rpx;
|
color: #848b9e;
|
line-height: 40rpx;
|
}
|
}
|
}
|
</style>
|
