Files
sociology_app/pages/mine/mine/index.vue
2024-10-29 10:07:53 +08:00

1516 lines
35 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><page-meta
:page-font-size="$baseFontSize() + 'px'"
:root-font-size="$baseFontSize() + 'px'"
></page-meta>
<view style="
height: 100vh;
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">
<view style="display: flex; align-items: center; flex-direction: column">
<image @click="goUserInfo" :src="userMes.avatar" v-if="userMes.avatar != null"
class="per_mes_img color_shandow"></image>
</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% - 120rpx)">
<view class="name">昵称{{ userMes.nickname ? userMes.nickname : "未设置" }}</view>
<view class="name" v-if="!userMes.userVip" style="
font-size: 28rpx;
font-weight: 500;
color: #606266 !important;
">普通用户</view>
<view style="display: flex; align-items: center" v-else-if="userMes.userVip&&$platform=='ios'">
<view class="user_vip_box1">
<view v-if="userMes.vip == 1" class="user_vip super user_vip_super">超级VIP</view>
<view v-if="userMes.vip == 3" class="user_vip user_vip_zmzm">众妙之门VIP</view>
<view v-if="userMes.vip == 2" class="user_vip user_vip_wumen">吴门医述VIP</view>
</view>
<view class="viptime" v-if="userMes.vip != 0">会员时长{{
userMes.userVip.endTime.split(" ")[0]
}}&nbsp;到期</view>
</view>
<!-- -->
<!-- <view class="phone" v-if="userMes.tel">手机号({{ userMes.tel }})</view>
<view class="phone email" v-if="userMes.email">邮箱({{ userMes.email }})</view>
-->
<!-- <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 v-if="$platform=='android'" style="
padding: 20rpx 20rpx 0;
height: auto;
display: flex;
align-items: center;
justify-content: space-between;
">
<template>
<view v-if="!userMes.userVip" :class="`chong_zhi boxShadow box_fillet vip_box`"
@click="onPageJump('/pages/mine/vip/index')">
<view class="noVip">
<view class="zhanghu PM_font" style="text-align: center">
<image class="vip_image" src="@/static/icon/mine_p.png" mode="aspectFit">
</image>
<text style="color: #452808; letter-spacing: 2rpx">超级VIP</text>
</view>
<view style="margin-left: 20rpx">加入会员畅享更多专属权益</view>
<view class="right_arrow" style="color: #fff">
<!-- <image src="@/static/icon/mine_p.png" mode="aspectFit"> </image> -->
>
</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>
<view v-else :class="`chong_zhi boxShadow box_fillet vip_box hasVipBox ${
userMes.vip == 1
? 'hasVipSuper'
: userMes.vip == 2
? 'hasVipWumen'
: userMes.vip == 3
? 'hasVipZmZm'
: ''
}`" @click="onPageJump('/pages/mine/vip/index')">
<view class="current_identity">当前身份</view>
<view class="hasVip" style="position: relative">
<view class="zhanghu" style="text-align: center">
<view class="vbg" v-if="userMes.vip == 2 || userMes.vip == 3">V</view>
<image v-if="userMes.vip == 1" class="vip_image" src="@/static/icon/quanyi.png"
mode="aspectFit">
</image>
<!-- <image
v-if="userMes.vip == 3"
class="vip_image"
src="@/static/icon/quanyiZM.png"
mode="aspectFit"
>
</image>
<image
v-if="userMes.vip == 2"
class="vip_image"
src="@/static/icon/quanyi.png"
mode="aspectFit"
>
</image> -->
<view v-if="userMes.vip == 1" class="vip_info">
<view class="PM_font vip_name">超级VIP</view>
</view>
<view v-if="userMes.vip == 3" class="vip_info">
<view class="PM_font vip_name">众妙之门VIP</view>
</view>
<view v-if="userMes.vip == 2" class="vip_info">
<view class="PM_font vip_name">吴门医述VIP</view>
</view>
<view class="viptime">会员时长{{
userMes.userVip.endTime.split(" ")[0]
}}&nbsp;到期</view>
</view>
<view class="zhanghu quanyi" style="text-align: center">
<!-- <image
class="vip_image"
src="@/static/icon/quanyi.png"
mode="aspectFit"
>
</image> -->
<view v-if="userMes.vip == 1" class="vip_info vip_info_bottom">
<view style="color: #d33b1b">尊享 5 项专属特权</view>
<view class="xufei">立即续费</view>
</view>
<view v-if="userMes.vip == 2" class="vip_info vip_info_bottom">
<view style="">尊享 4 项专属特权,</view>
<view class="xufei">立即续费</view>
</view>
<view v-if="userMes.vip == 3" class="vip_info vip_info_bottom">
<view style="">尊享 4 项专属特权</view>
<view class="xufei">立即续费</view>
</view>
</view>
</view>
</view>
</template>
</view>
<view style="
padding: 20rpx;
height: auto;
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>
<!-- v-if="iosHide" -->
<!-- <view v-if="iosHide" class="chong_list_item">
<b>{{ userMes.conponsCount }}</b>
优惠券
</view> -->
<!-- <b class="chong_btn" @click="onPageJump('../sdkDemo/pay')"> </b> -->
<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>
<!-- <view class="list_box order_box">
<view class="xiugai boxShadow box_fillet">
<view class="title">我的订单</view>
<view class="cate_box">
<view class="cate_item_box" v-for="(v, i) in orderList"
@click="goOrderList(`/pages/bookShop/orderList`, 'mine', i)">
<view class="cate_item_border">
<image :src="v.imgUrl" mode="aspectFill" style="width: 58rpx; height: 58rpx"></image>
<u-badge type="error" max="99" :value="v.badge.value"
style="position: absolute; top: -10rpx; right: -10rpx"></u-badge>
</view>
<view class="cate_item_name">{{ v.title }}</view>
</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 class="nav_list" @click="onPageJump('../clock/clockList')">
<text>我的打卡</text>
</view> -->
<!-- <view class="nav_list" @click="onPageJump('../listen/home')" v-if="iosHide">
<text>我的听书</text>
</view> -->
<!-- 暂时去掉 -->
<!-- <view class="nav_list" @click="onPageJump('../listen/setListen')" v-if="iosHide">
<text>听书设置</text>
</view> -->
<!-- <view class="nav_list" @click="onPageJump('../peanut/myComments')">
<text>我的评价</text>
</view> -->
<!-- 暂时去掉 -->
<!-- <view v-if="showEbook" class="nav_list" @click="onPageJump('../eBook/bookBuy')">
<text>电子书购买记录</text>
</view> -->
<!-- <view v-if="showEbook" class="nav_list" @click="onPageJump('../eBook/bookRecord')">
<text>阅读记录</text>
</view> -->
<!-- <view class="nav_list" @click="onGoing()">
<text>帮助与反馈11111</text>
</view> -->
<!-- <view class="nav_list" @click="newOnShare" v-if="isAndorid"> -->
</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 {
come: "1",
orderList: [{
title: "全部",
value: -1,
badge: {},
imgUrl: require("@/static/icon/ordericon1.png"),
},
{
title: "待付款",
value: 0,
badge: {},
imgUrl: require("@/static/icon/ordericon2.png"),
},
{
title: "待发货",
value: 1,
badge: {},
imgUrl: require("@/static/icon/ordericon3.png"),
},
{
title: "待收货",
value: 2,
badge: {},
imgUrl: require("@/static/icon/ordericon4.png"),
},
{
title: "已完成",
value: 3,
badge: {},
imgUrl: require("@/static/icon/ordericon5.png"),
},
],
swiperList: [{
name: "开通会员畅享更多活动"
},
{
name: "众妙之门视频"
},
{
name: "吴门医述视频",
},
{
name: "专属视频视听"
},
{
name: "读书相关权益",
},
{
name: "活动报名<text style='color:red'>(折扣价)</text>"
},
],
infoShow: false, // 显示电子书相关
showEbook: false, // 显示电子书相关
userMes: {},
signShow: false,
signContent: "是否要退出登录?",
playData: {},
isAndorid: true,
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/homePage/index/workOrder",
type: "workOrder"
},
//{ name: "设置", url: "/pages/mine/set/index", type: "pageJump" },
// { name: "退出登录", type: "quitLogin" },
// { name: "注销帐号", type: "loginOut" },
],
};
},
//第一次加载
onLoad(e) {
// 隐藏原生的tabbar
// uni.hideTabBar();
// #ifdef APP-PLUS
this.getOS();
this.platform = uni.getSystemInfoSync().platform;
// console.log('操纵系统',this.platform)
// #endif
},
computed: {
...mapState(["userInfo"]),
},
//页面显示
onShow() {
console.log(this.userInfo, "11111111111111");
// 隐藏原生的tabbar
// uni.hideTabBar();
this.getBookList();
this.getData();
},
async onTabItemTap() {
this.getBookList();
this.getData();
},
components: {
musicPlay,
},
//方法
methods: {
...mapMutations(["setUserInfo"]),
getBookList(flag, refreshflag) {
this.isLoadingHide = false;
var that = this;
// 根据tab不同获取最新书评、最热书评、书集列表
// uni.showLoading({
// title: '加载中'
// });
// 顶部红点数量
$http
.request({
url: "common/buyOrder/getBuyOrderNumByStatus",
method: "POST",
data: {
userId: that.userInfo.id,
come: this.come,
},
header: {
//默认 无 说明:请求头
"Content-Type": "application/json",
},
})
.then((res) => {
// 订单状态
// * 0: 待付款
// * 1: 待发货
// * 2: 已发货
// * 3已完成
// * 4: 交易失败
// * 5: 已过期
console.log("res at line 757:", res);
that.map = res.data;
that.orderList.map((e) => {
if (e.value == 0 || e.value == 1 || e.value == 2) {
var numList = that.map.filter((v) => v.order_status == e.value);
console.log("num at line 771:", numList);
if (numList.length > 0) {
e.badge = {
value: numList[0].num,
};
}
} else {
e.badge = {};
}
});
// this.$set('this.ordersTabs',)
that.$forceUpdate();
})
.catch((e) => {
console.log(e);
});
},
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;
case "workOrder":
uni.navigateTo({
url: `${v.url}?name=userPage`
})
// this.onPageJump(v.url);
break;
}
},
// 获得操作系统
getOS() {
let oprateOs = "";
oprateOs = uni.getSystemInfoSync().platform;
// console.log(oprateOs)
if (oprateOs == "android") {
this.isAndorid = true;
} else {
this.isAndorid = false;
}
},
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/fengziIcon.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/fengziIcon.png",
success: function(res) {
console.log("success:" + JSON.stringify(res));
},
fail: function(err) {
console.log("fail:" + JSON.stringify(err));
},
});
}
},
goOrderList(url, type, index) {
uni.setStorageSync("orderStatus", index);
console.log("url at line 644:", url);
uni.switchTab({
url: url,
success: function(res) {},
});
},
switchTab(url) {
console.log("url at line 644:", 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";
.per_mes {
// height: 200rpx;
position: relative;
margin: 0rpx 20rpx 0rpx 20rpx;
align-items: center;
display: flex;
align-items: center;
justify-content: space-between;
.per_mes_img {
// @include themeBorder(10rpx,10rpx,#4E79A3, #A6D8DC);
width: 90rpx;
height: 90rpx;
// background-color: #fff;
border-radius: 90rpx;
margin: 0 0 0 0;
float: left;
}
view {
float: left;
// margin-top: 20rpx;
.name {
width: 100%;
// display: inline-block;
font-weight: bold;
font-size: 30rpx;
margin-bottom: 10rpx;
color: #333 !important;
}
.phone {
font-weight: bold;
font-size: 28rpx;
color: #333;
}
.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;
font-size: 44rpx;
// 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;
padding: 0 20rpx;
// justify-content: space-between;
// flex-direction: column;
.zhanghu {
font-size: 42rpx;
width: auto;
display: inline-block;
// margin-top: 20rpx;
margin-bottom: 0rpx;
text-align: center;
display: flex;
align-items: center;
// justify-content: space-around;
image {
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
}
}
}
.chong_list {
display: flex;
align-items: center;
font-size: 30rpx;
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: 30rpx;
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: 20rpx;
float: right;
border-radius: 50rpx;
color: #fffbf6;
padding: 10rpx 32rpx;
// margin-top: -60rpx;
// margin: 20rpx 0 0 0;
background-image: linear-gradient(90deg, #3ab3ae 0%, #d5ecdd 200%);
}
}
}
.xiugai {
border-radius: 20rpx !important;
margin: 0 20rpx;
// padding:0 40rpx;
background: rgba(255, 255, 255, 0.65);
.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%);
height: 100%;
float: left;
padding: 20rpx 20rpx;
background-color: #edf6f5ad;
border-radius: 20rpx;
}
.vip_box {
padding: 20rpx 0;
float: right;
position: relative;
width: 100%;
height: auto;
border-radius: 10rx !important;
// background: rgba(255, 255, 255, 0.85);
// padding: 30rpx 20rpx 10rpx;
// background-color: $themeBgColor;
// @include themeBorder(6rpx, 20rpx, #3ab3ae, #a6d8dc);
// #FFE9BB
background-image: linear-gradient(80deg, #eaeff2 0%, #c2d0db 100%);
.PM_font {
color: #476379;
}
// @include themeBorder(
// 10rpx,
// 20rpx,
// (
// linear-gradient(#edf6f5ad, #edf6f5ad),
// 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: 0;
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 {
z-index: 10;
// min-width: 130rpx;
// margin-top: -20rpx;
// position: absolute;
// bottom: -20rpx;
display: flex;
align-items: center;
justify-content: center;
}
.user_vip {
font-size: 24rpx;
width: auto;
padding: 1rpx 20rpx;
font-weight: 800;
border-radius: 40rpx;
// background: linear-gradient(
// to right,
// rgb(204, 229, 244) 0%,
// rgb(197, 227, 215) 100%
// );
}
.user_vip_box1 {
.user_vip {
// padding: 0;
font-size: 20rpx;
margin-right: 10rpx;
}
.user_vip_super {
background-image: linear-gradient(90deg, #fff0dc 0%, #f8e483 100%);
}
.user_vip_wumen {
background-image: linear-gradient(90deg, #c4e8fe 0%, #60bcff 100%);
}
.user_vip_zmzm {
background-image: linear-gradient(90deg, #aff7d6 0%, #edf5f1 100%);
}
}
.super {
// background: linear-gradient(to right, #fff0dc 0%, #f8e483 100%);
color: #f4a04c;
}
.cate_box {
width: 100%;
height: auto;
// background: $themeColor;
background-repeat: no-repeat;
display: flex;
justify-content: center;
background-size: 100% 100%;
// background-image: url("@/static/icon/cate_bg.png");
box-shadow: 0rpx 0rpx 6rpx 0rpx #f9f6ea;
border-radius: 7rpx;
display: flex;
align-items: center;
justify-content: space-around;
padding: 5rpx 0rpx 20rpx;
box-sizing: border-box;
.cate_item_box {
min-width: 110rpx;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.cate_item_border {
position: relative;
// width: 75rpx;
// height: 98rpx;
// background-size: 100% 100%;
// background-image: url("@/static/icon/homePage/cate_bg.png");
// border-radius: 4rpx;
display: flex;
align-items: center;
justify-content: center;
image {
// height: 56rpx;
}
}
.cate_item_name {
margin-top: 6rpx;
// font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
font-weight: normal;
font-size: 28rpx;
color: #000000;
// line-height: 46rpx;
text-align: center;
// color: #fff;
}
}
}
.order_box {
.title {
padding: 20rpx 20rpx 10rpx;
font-size: 30rpx;
font-weight: bold;
}
}
.viptime {
// padding: 15rpx 20rpx;
font-size: 24rpx;
margin-top: 4rpx;
border-radius: 50rpx;
// background: rgba(255, 255, 255, 0.65);
// color: #6d6d6d !important;
color: rgb(211, 59, 27) !important;
// margin-top: 10rpx;
line-height: 20rpx;
}
.right_arrow {
background: #4b6579;
width: 40rpx;
height: 40rpx;
border-radius: 40rpx;
display: flex;
align-items: center;
justify-content: center;
padding: 10rpx;
position: absolute;
right: 20rpx;
image {
width: 100%;
height: 100%;
}
}
.current_identity {
top: 0;
line-height: 32rpx;
position: absolute;
padding: 2rpx 10rpx;
border: 4rpx solid #fff;
border-bottom-right-radius: 20rpx;
border-top-left-radius: 20rpx;
font-size: 20rpx;
font-weight: bold;
}
.hasVipBox {
padding-top: 45rpx;
padding-bottom: 0rpx;
box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 0.45);
border-radius: 20rpx;
.vip_name {
font-size: 60rpx;
}
.vip_info {
display: flex;
align-items: center;
font-size: 24rpx;
padding: 0 30rpx;
}
.viptime {
text-align: left;
padding: 0 30rpx;
font-size: 24rpx;
color: #333 !important;
// margin-top: 10rpx;
font-weight: 500;
margin-bottom: 20rpx;
}
}
.vbg {
font-size: 300px;
font-weight: 800;
position: absolute;
color: #3e9d78bd !important;
right: -40rpx;
top: -10px;
}
.xufei {
position: absolute;
height: 46rpx;
right: 20rpx;
color: rgba(244, 43, 51, 0.85) !important;
font-size: 24rpx;
border-radius: 50rpx;
line-height: 46rpx;
padding: 0rpx 20rpx;
background: rgba(255, 255, 255, 1);
}
.hasVipSuper {
border: 2rpx solid #fff1ca;
background-image: linear-gradient(90deg, #fff0dc 0%, #f8e483 100%);
.current_identity {
background-color: #fdefb5;
color: #c47029;
}
.PM_font {
color: #f4a04c;
}
}
.hasVipZmZm {
// border: 2rpx solid rgb(112, 179, 177);
box-shadow: 0px 0px 5px 1px RGBA(235, 247, 243, 0.45);
background-image: linear-gradient(90deg, #aff7d6 0%, #edf5f1 100%);
// color: #38710A;
.viptime {
color: #486a65;
}
.vip_name {
letter-spacing: 1px;
}
.current_identity {
background-color: #a9ddc4;
color: #20575c;
}
.PM_font {
color: #3e9d78;
}
.viptime {
color: #9acbce;
}
.hasVip .quanyi {
border-color: #b7f6ed;
color: #ffd598;
}
.xufei {
background-image: linear-gradient(90deg, #f6dc95 0%, #ffc45e 100%);
color: #3d2700 !important;
}
.vip_info_bottom {
color: #486a65;
}
}
.hasVipWumen {
background-image: linear-gradient(90deg, #c4e8fe 0%, #60bcff 100%);
// border: 2rpx solid rgb(112, 179, 177);
box-shadow: 0px 0px 5px 1px RGBA(235, 247, 243, 0.45);
// color: #38710A;
.viptime {
color: #486a65;
}
.vip_name {
letter-spacing: 1px;
}
.current_identity {
background-color: #e8f9ff;
color: #243a61;
}
.PM_font {
color: #127dff;
}
.viptime {
color: #1d3a65;
}
.hasVip .quanyi {
border-color: #e3f7fe;
color: #ffd598;
}
.xufei {
background-image: linear-gradient(90deg, #f6dc95 0%, #ffc45e 100%);
color: #3d2700 !important;
}
.vip_info_bottom {
color: #3583C3;
}
.vbg {
color: #d1effc !important;
}
}
.hasVip {
position: relative;
display: block !important;
.zhanghu {
display: block;
}
.vip_image {
position: absolute;
right: 20rpx;
top: -20rpx;
width: 120rpx;
height: 120rpx;
// margin-right: 10rpx;
}
.zhanghu {}
.quanyi {
border-top: 1rpx solid #f2d494;
width: 100% !important;
width: 100% !important;
}
}
.vip_info_bottom {
height: 64rpx;
}
</style>