Files
medicine_app/pages/peanut/mine.vue
2025-03-13 11:28:13 +08:00

980 lines
24 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view
style="
padding: 0 0;
font-size: 28rpx;
background-color: #39b4a84d !important;
"
class="commonPage commonPageBox"
>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<view class="bg_top">
<u-icon
@click="goSetting"
class="setIcon"
labelColor="#fff"
labelPos="bottom"
label="设置"
name="setting"
:style="`top:${(10 + statusBarHeight) * 2}rpx`"
color="#fff"
size="28"
></u-icon>
</view>
<view class="mine_box" :style="`top:${(45 + statusBarHeight) * 2}rpx`">
<view class="per_mes">
<image
@click="goUserInfo"
:src="userMes.avatar"
v-if="userMes.avatar != null"
class="per_mes_img color_shandow"
></image>
<view class="user_vip_box">
<view v-if="userMes.vip == 1" class="user_vip super">超级VIP</view>
<view v-if="userMes.vip == 2" class="user_vip">众妙之门VIP</view>
<view v-if="userMes.vip == 3" class="user_vip">吴门医述VIP</view>
</view>
<image
src="@/static/icon/home_icon_logo.png"
v-if="userMes.avatar == null"
class="per_mes_img color_shandow"
></image>
<view class="userInfoBox" style="width: calc(100% - 220rpx)">
<template>
<view class="name"
>昵称{{ userMes.nickname ? userMes.nickname : "未设置" }}</view
>
</template>
<template v-if="userMes.tel">
<view class="phone">手机号({{ userMes.tel }})</view>
</template>
<template v-if="userMes.email">
<view class="phone email">邮箱({{ userMes.email }})</view>
</template>
<!-- <text class="tong">累计读书5本
<span style="margin: 0 20upx;">|</span> 今日读50分钟
</text> -->
</view>
<br clear="both" />
</view>
<!-- <view class="now_vip" v-if="userMes.vip==0">
<text>
<image src="../../static/icon/mine_p.png" style="height: 44rpx;"></image>
开通会员畅享海量内容
</text>
<b class="kt_btn" @click="onPageJump('./opeVip')">开通VIP</b>
</view> -->
<!-- <view class="now_vip" v-if="userMes.vip==1">
<text>
<image src="../../static/icon/mine_v.png"></image>
尊贵的VIP会员
<font style="font-size: 14rpx;margin-left: 20rpx;">{{userMes.vipValidtime}}到期</font>
</text>
<b class="kt_btn" @click="onPageJump('./opeVip')">立即续费</b>
</view> -->
<view
style="
padding: 20rpx;
height: 200rpx;
display: flex;
align-items: center;
justify-content: space-between;
"
>
<view class="chong_zhi boxShadow box_fillet chongzhi_box">
<!-- <view
class="zhanghu"
@click="onPageJump('/pages/mine/wallet/index/index')"
>
我的账户
<image src="@/static/icon/icon_right.png" class="rightArrow"></image>
</view> -->
<view class="chong_list">
<view class="left">
<view
class="chong_list_item"
style="
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
"
@click="onPageJump('/pages/mine/wallet/index/index')"
>
<view class="pay_item_img">
天医币<u-icon
@click.native.stop="openInfo()"
name="question-circle"
style="float: right; margin: 0 6rpx"
></u-icon>
<!-- <image
style="width: 100%; height: 100%"
src="@/static/icon/pay_3.png"
mode="aspectFil"
>
</image> -->
</view>
<view class="text" style="line-height: 40rpx; display: flex">{{
userMes.peanutCoin ? userMes.peanutCoin : 0
}}</view>
</view>
<view
class="chong_list_item"
style="
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
"
@click="onPageJump('/pages/mine/wallet/jf/index')"
>
<view class="pay_item_img">
积分
<!-- <image
style="width: 100%; height: 100%"
src="@/static/icon/jifen2.png"
mode="aspectFil"
>
</image> -->
</view>
<view class="text" style="line-height: 40rpx">{{
userMes.jf ? userMes.jf : 0
}}</view>
</view>
</view>
<view
class="chong_list_item"
style="
display: flex;
align-items: center;
margin-right: 0;
justify-content: center;
"
>
<view
class="chong_btn"
v-if="iosHide"
@click="onPageJump('/pages/mine/wallet/recharge/index')"
> </view
></view
>
</view>
</view>
<view
class="chong_zhi boxShadow box_fillet vip_box"
>
<view v-if="!userMes.userVip" class="noVip">
<view class="zhanghu PM_font" style="text-align: center">
<image
class="vip_image"
src="@/static/icon/noquanyi.png"
mode="aspectFit"
>
</image>
<text style="color: #c4d3d4">VIP</text>
</view>
<swiper
:autoplay="true"
:interval="3000"
:duration="1000"
style="width: 100%; height: 60rpx"
>
<swiper-item
v-for="(item, index) in swiperList"
style="width: 100%; height: 100%"
>
<view
style="
background: linear-gradient(
130deg,
rgb(46, 103, 106) 0%,
rgb(114, 173, 146) 100%
)
text;
text-align: center;
"
:style="item.style"
v-html="item.name"
></view>
</swiper-item>
</swiper>
</view>
<view v-else class="noVip hasVip">
<view class="zhanghu PM_font" style="text-align: center">
<image
class="vip_image"
src="@/static/icon/quanyi.png"
mode="aspectFit"
>
</image>
<text style="">VIP</text>
</view>
<view class="time"
>{{ userMes.userVip.endTime.split(" ")[0] }}到期</view
>
</view>
</view>
</view>
<view class="list_box">
<view class="xiugai boxShadow box_fillet">
<common-list
:dataList="pageList"
@hancleClick="handleClickTab"
label="name"
>
<template slot="rightSlot" slot-scope="slotProps">
<text
class="fdButtonBox aui-text-success"
style="line-height: 40rpx"
>{{ slotProps.row.content }}</text
>
<view> </view>
</template>
</common-list>
</view>
</view>
</view>
<u-modal
:show="signShow"
:content="signContent"
:showCancelButton="true"
@cancel="signShow = false"
@confirm="signOut"
>
</u-modal>
<!-- 分享弹窗 -->
<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
<uni-popup-share @select="haveSelected"></uni-popup-share>
</uni-popup>
<u-popup :show="infoShow" mode="center" round="6" backgroundColor="#fff">
<view class="popup_box">
<view class="title">温馨提示</view>
<view class="content">
<view class="center">
&nbsp;&nbsp;&nbsp;&nbsp;天医币仅为我平台支付使用币种
一人民币=一天医币仅为了方便用户支付使用<br />天医币可以用于在我平台支付书籍或课程使用
<br />天医币这个名称是为适应我们平台的定位属性所起名称与区块链虚拟货币无任何关系
</view>
<view class="bottom">
<view
class="button_box"
style="
align-items: center;
justify-content: center;
"
>
<!-- <u-button
size="small"
text="不同意"
@click="protocolShow=false"
></u-button> -->
<u-button
style="width: 200rpx; float: center"
:plain="true"
text="知道啦"
color="#9b9b9b"
size="small"
@click="infoShow = false"
></u-button>
</view>
</view>
</view>
</view>
</u-popup>
<!-- <u-modal :show="infoShow" title="提示信息" :content=""></u-modal> -->
<music-play :playData="playData"></music-play>
<z-navigation></z-navigation>
</view>
</template>
<script>
import musicPlay from "@/components/music.vue";
import $http from "@/config/requestConfig.js";
// import appShare, { closeShare } from '@/uni_modules/zhouWei-APPshare/js_sdk/appShare';
import { mapState, mapMutations } from "vuex";
export default {
data() {
return {
swiperList: [
{ name: "开通会员畅享更多活动" },
{ name: "众妙之门视频" },
{
name: "吴门医述视频",
},
{ name: "专属视频视听" },
{
name: "读书相关权益",
},
{ name: "活动报名<text style='color:red'>(折扣价)</text>" },
],
infoShow: false, // 显示电子书相关
showEbook: false, // 显示电子书相关
userMes: {},
signShow: false,
signContent: "是否要退出登录?",
playData: {},
platform: null, // 设备系统
pageList: [
{
name: "我的订单",
url: "/pages/bookShop/orderList?type=mine",
type: "switchTab",
},
// {
// name: "购物车",
// url: "../peanut/shopping",
// type: "pageJump",
// },
{
name: "个人资料",
url: "/pages/mine/userInfo/persData",
type: "pageJump",
},
{
name: "地址管理",
url: "/pages/component/commonComponents/address/index?type=mine",
type: "pageJump",
},
{
name: "分享APP",
type: "share",
},
{
name: "关于我们",
url: "/pages/mine/aboutUs/index",
type: "pageJump",
},
//{ name: "设置", url: "/pages/mine/set/index", type: "pageJump" },
// { name: "退出登录", type: "quitLogin" },
// { name: "注销帐号", type: "loginOut" },
],
};
},
//第一次加载
onLoad(e) {
// 隐藏原生的tabbar
// uni.hideTabBar();
// #ifdef APP-PLUS
this.platform = uni.getSystemInfoSync().platform;
// #endif
},
computed: {
...mapState(["userInfo"]),
},
//页面显示
onShow() {
console.log(this.userInfo, "11111111111111");
// 隐藏原生的tabbar
// uni.hideTabBar();
this.getData();
},
async onTabItemTap() {
this.getData();
},
components: {
musicPlay,
},
//方法
methods: {
...mapMutations(["setUserInfo"]),
openInfo() {
this.infoShow = true;
},
goSetting() {
this.onPageJump("/pages/mine/set/index");
},
goUserInfo() {
this.onPageJump("/pages/mine/userInfo/persData");
},
handleClickTab(v) {
console.log("v at line 259:", v);
switch (v.type) {
case "pageJump":
this.onPageJump(v.url);
break;
case "switchTab":
this.switchTab(v.url);
break;
case "share":
//分享
this.newOnShare();
break;
case "quitLogin":
//退出登录
this.signShow = true;
break;
case "loginOut":
//注销账号
this.logout();
break;
}
},
haveSelected(data) {
console.log(data, " 选择的是");
if (data.index == 0) {
// 分享到好友
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 0,
href: this.$apkUrl,
title: "吴门医述",
summary: "我正在使用吴门医述提升自己,赶紧跟我一起来体验吧!",
imageUrl: "static/icon/home_icon_logo.png",
success: function (res) {
console.log("success:" + JSON.stringify(res));
},
fail: function (err) {
console.log("fail:" + JSON.stringify(err));
},
});
} else if (data.index == 1) {
// 分享到朋友圈
uni.share({
provider: "weixin",
scene: "WXSceneTimeline",
type: 0,
href: this.$apkUrl,
title: "吴门医述",
summary: "我正在使用吴门医述提升自己,赶紧跟我一起来体验吧!",
imageUrl: "static/icon/home_icon_logo.png",
success: function (res) {
console.log("success:" + JSON.stringify(res));
},
fail: function (err) {
console.log("fail:" + JSON.stringify(err));
},
});
}
},
switchTab(url) {
uni.switchTab({
url: url,
});
},
getData() {
// 获取个人信息
if (this.userInfo.id != undefined) {
this.$http.post("common/user/getUserInfo").then((res) => {
this.userMes = res.result;
if (this.userMes.userVip) {
// console.log(
// "this.userMes.vipValidtime at line 510:",
// this.userMes.vipValidtime
// );
// this.userMes.vipValidtime = this.userMes.vipValidtime.substring(
// 0,
// this.userMes.vipValidtime.indexOf(" ")
// );
}
});
}
},
// 新写分享
newOnShare() {
this.$refs.share.open();
},
// 注销账户
logout() {
let that = this;
uni.showModal({
title: "提示",
content: "确定要注销当前账户吗?",
success: function (res) {
if (res.confirm) {
uni.showModal({
title: "提示",
showCancel: false,
content: `注销申请已提交成功,请联系客服进行后续操作022-24142321`,
success: function (res1) {
if (res1.confirm) {
that.signOut();
}
},
});
} else if (res.cancel) {
// 取消操作
}
},
});
},
// 跳转
onGoing() {
uni.showToast({
icon: "none",
title: "开发中,敬请期待...",
});
},
onPageJump(url) {
console.log(url, "url");
uni.navigateTo({
url: url,
});
},
// 退出登录
signOut() {
this.signShow = false;
this.setUserInfo({
token: null,
});
uni.reLaunch({
url: "/pages/user/login/login",
});
},
},
};
</script>
<style lang="scss" scoped>
@import "@/style/mixin.scss";
.commonPage {
position: relative;
}
.per_mes {
position: relative;
margin: 0rpx 40rpx 60rpx 40rpx;
align-items: center;
display: flex;
align-items: center;
justify-content: space-between;
.per_mes_img {
// @include themeBorder(10rpx,10rpx,#4E79A3, #A6D8DC);
width: 140rpx;
height: 140rpx;
// background-color: #fff;
border-radius: 140rpx;
margin: 0 0 0 0;
float: left;
}
view {
float: left;
// margin-top: 20rpx;
.name {
width: 100%;
// display: inline-block;
font-weight: bold;
font-size: 38upx;
margin-bottom: 10rpx;
color: #fff !important;
}
.phone {
font-size: 28rpx;
color: #fff;
}
.tong {
color: #999;
font-size: 25upx;
}
.per_user_img {
display: inline-block;
width: 40upx;
height: 40upx;
margin-left: 10rpx;
vertical-align: super;
}
}
}
.now_vip {
background-color: #fff;
// border-radius: 20upx;
margin: 0 0 30upx 0;
padding: 0 30upx;
height: 120upx;
background-image: linear-gradient(90deg, #feeed6 0%, #f5ce99 100%);
image {
width: 46rpx;
height: 50rpx;
display: inline-block;
vertical-align: text-bottom;
margin: 0 10rpx 0 0;
}
text {
font-size: 30upx;
line-height: 120upx;
color: #977749;
font-weight: bold;
}
.kt_btn {
font-size: 26upx;
display: block;
float: right;
border-radius: 50rpx;
color: #fffbf6;
padding: 12rpx 26rpx;
margin: 33rpx 0 0 0;
background-image: linear-gradient(90deg, #dfa964 0%, #7f5218 100%);
}
}
.commonPageBox {
background-image: url("@/static/icon/mine_bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
// background-color: #d8f8e4 !important;
}
.chong_zhi {
box-shadow: none;
// border-bottom-left-radius: 0rpx !important;
// border-bottom-right-radius: 0rpx !important;
// background-color: #d8f8e4;
// margin: 0 0 30upx 0;
padding: 0 30upx;
height: auto;
.zhanghu {
width: 100%;
margin-bottom: 10rpx;
// line-height: 80rpx;
font-weight: bold;
display: flex;
align-items: center;
justify-content: space-between;
color: $themeColor;
font-weight: 700;
}
.noVip {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
.zhanghu {
font-size: 40rpx;
width: 120rpx;
margin-top: 20rpx;
margin-bottom: 0rpx;
text-align: center;
display: flex;
align-items: center;
// justify-content: space-around;
image {
width: 40rpx;
height: 40rpx;
}
}
}
.hasVip {
.time {
padding: 4rpx 20rpx;
font-size: 26rpx;
border-radius: 20rpx;
background: linear-gradient(
to right,
rgb(204, 229, 244) 0%,
rgb(197, 227, 215) 100%
) !important;
}
}
.chong_list {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 40rpx;
.left {
display: flex;
align-items: center;
}
.chong_list_item {
width: auto;
height: 100rpx;
margin-right: 60rpx;
text-align: center;
display: inline-block;
color: $themeColor;
.text {
font-size: 28rpx;
display: block;
font-weight: 700;
// margin: 0 0 10rpx 0;
color: $themeColor !important;
}
}
.chong_btn {
position: absolute;
font-size: 26rpx;
display: block;
top: 0px;
right: 0px;
float: right;
border-radius: 50rpx;
color: #fffbf6;
padding: 10rpx 32rpx;
// margin-top: -60rpx;
// margin: 20rpx 0 0 0;
background-image: linear-gradient(90deg, #258feb 0%, #d5ecdd 200%);
}
}
}
.xiugai {
border-radius: 20rpx !important;
margin: 0 20rpx;
// padding:0 40rpx;
background: #E2F5FA;
.nav_list {
background-color: #b7e0e2;
padding: 15rpx 0 15rpx 10rpx;
display: flex;
align-items: center;
font-size: 22rpx;
position: relative;
font-weight: bold;
border-bottom: 1px solid #e5e5e5;
&:active {
background-color: #f5f5f5;
}
text {
color: #333;
margin-left: 10rpx;
}
&::after {
content: "";
position: absolute;
right: 20rpx;
top: 50%;
transform: translateY(-50%);
width: 30rpx;
height: 30rpx;
background-image: url("@/static/icon/icon_right.png");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
}
.nav_list:nth-last-child(1) {
border-bottom: 0;
}
}
.box_fillet {
border-radius: 40rpx;
overflow: hidden;
// background: #fff;
}
.chongzhi_box {
position: relative;
width: calc(100% - 320rpx);
height: 100%;
float: left;
padding: 30rpx 20rpx 10rpx;
background-color: #E2F5FA;
border-radius: 20rpx;
}
.vip_box {
padding: 0;
float: right;
position: relative;
width: 300rpx;
height: 100%;
border-radius: 20rx;
// background: rgba(255, 255, 255, 0.85);
// padding: 30rpx 20rpx 10rpx;
// background-color: $themeBgColor;
// @include themeBorder(6rpx, 20rpx, #258feb, #a6d8dc);
@include themeBorder(
10rpx,
20rpx,
(
linear-gradient(#E2F5FA, #E2F5FA),
linear-gradient(to bottom left, #bed1b1, #a6d8dc)
)
);
.zhanghu {
font-size: 80rpx;
text-align: center;
line-height: 100%;
margin-bottom: 0;
}
}
/deep/.scroll-view-item:nth-child(2n-1) {
background-color: transparent !important;
}
uni-page-body {
// background: #d8f8e4 !important;
}
.bg_top {
// background-position: center center;
padding: 0 30rpx;
height: 30vh;
position: relative;
.setIcon {
position: absolute;
right: 30rpx;
// top: 30rpx;
}
}
.mine_box {
width: 100%;
position: absolute;
// top: 90rpx;
left: 0;
padding: 0 0rpx;
}
.list_box {
// background: #d8f8e4 !important;
padding: 20rpx 0;
margin-top: -10rpx;
}
.pay_item_img {
display: flex;
color: #333;
// color: #dac4b7;
align-items: center;
// width: 80rpx;
// height: 80rpx;
padding: 8rpx;
box-sizing: border-box;
font-weight: bold;
// float: left;
// margin-right: 20rpx;
margin: 0 auto;
margin-bottom: 10rpx;
//margin-top:-10rpx;
}
.popup_box {
padding-bottom: 20rpx;
width: 88vw;
overflow: hidden;
position: relative;
height: auto;
.title {
font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
font-weight: normal;
font-size: 46rpx;
color: $themeColor;
background-color: #f5f5f5;
// line-height: 46rpx;
padding: 20rpx;
// border-leradius: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.content {
font-size: 26rpx;
letter-spacing: 0.15rpx;
padding: 20rpx;
color: #3f3f3f;
.top {
margin: 30rpx 0;
}
.center {
line-height: 40rpx;
// padding:0 10rpx;
}
.bottom {
width: 100%;
margin-top: 60rpx;
font-size: 24rpx;
line-height: 26rpx;
color: #b0b0b0;
}
}
.button_box {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20rpx;
.u-button {
margin-left: 40rpx;
}
.u-button:nth-child(1) {
margin-left: 0;
}
}
}
.user_vip_box {
min-width: 130rpx;
position: absolute;
bottom: -20rpx;
display: flex;
align-items: center;
justify-content: center;
}
.user_vip {
font-size: 24rpx;
width: auto;
padding: 4rpx 10rpx;
font-weight: 800;
border-radius: 20rpx;
background: linear-gradient(
to right,
rgb(204, 229, 244) 0%,
rgb(197, 227, 215) 100%
);
}
.super {
background: linear-gradient(to right, #5bc9c1 0%, #268798 100%);
color: #f4f2e4;
}
</style>