1054 lines
22 KiB
Vue
1054 lines
22 KiB
Vue
<template>
|
||
<view class="mine-container">
|
||
<view class="mineGroundImgView">
|
||
<image :src="`${imgPrefix}mine-ground.png`" mode="aspectFill" class="groundImg"></image>
|
||
<view class="userInfoView">
|
||
<view class="userLeft"
|
||
@click="userInfo.userID ? jumpTo('/pages/client/mine/userInfo') : jumpTo('/pages/client/auth/index')">
|
||
<image
|
||
:src="userInfo.userID && userInfo.avatar ? userInfo.avatar : `${imgPrefix}home-head.png`"
|
||
class="userAvatar" mode="aspectFill" />
|
||
<view style="margin-left: 16rpx;">
|
||
<view>
|
||
<view class="userName">
|
||
{{ userInfo.userID && userInfo.username ? userInfo.username : '嗨，你好呀' }}
|
||
</view>
|
||
</view>
|
||
<view class="userPhone" v-if="userInfo.phone">
|
||
{{ userInfo.phone }}
|
||
</view>
|
||
<!-- <view class="vipWrapper">
|
||
<image class="lableImg" :src="`${imgPrefix}home-vipLabel.png`" mode=""></image>
|
||
v{{ userInfo.vipLevel || 1 }}会员
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="logoutBtn" @click="showLogoutModal = true">
|
||
退出登录
|
||
</view>
|
||
<!-- <view class="userRight">
|
||
<view class="userRgihtItemView" @click="jumpTo('/pages/client/recharge/index?tab=points')">
|
||
<view class="num">
|
||
{{ displayTotalPoints }}
|
||
</view>
|
||
<view class="text">
|
||
积分
|
||
</view>
|
||
</view>
|
||
<view class="userRgihtItemView" @click="jumpTo(`/pages/client/recharge/my-card?user_id=${userInfo.id}`) ">
|
||
<view class="num">
|
||
{{ displayMembershipCount }}
|
||
</view>
|
||
<view class="text">
|
||
卡包
|
||
</view>
|
||
</view>
|
||
<view class="userRgihtItemView" @click="jumpTo(`/pages/client/coupon/list`)">
|
||
<view class="num">
|
||
{{ displayCouponCount }}
|
||
</view>
|
||
<view class="text">
|
||
券包
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="myPriceView">
|
||
<view style="display: flex;align-items: center;">
|
||
<image :src="`${imgPrefix}accountPrice.png`" class="priceImg"></image>
|
||
<text class="fs-24">我的余额：{{ displayWalletBalance !== '' ? displayWalletBalance : 0 }}元</text>
|
||
</view>
|
||
<view
|
||
@click="jumpTo(`/pages/client/recharge/index?user_id=${userInfo.userID}`)"
|
||
class="fs-24">
|
||
去充值
|
||
<image :src="`${imgPrefix}right-arrow.png`" class="arrowImg"></image>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- <view class="menuView">
|
||
<view class="menuItem" @click="jumpTo('/pages/client/petOrder/index')">
|
||
<image class="menuImg" :src="`${imgPrefix}mine-resaOrder.png`"></image>
|
||
<view class="menuTitle">
|
||
服务订单
|
||
</view>
|
||
</view>
|
||
<view class="menuItem" @click="jumpTo('/pages/client/order/list')">
|
||
<image class="menuImg" :src="`${imgPrefix}mine-shopOrder.png`"></image>
|
||
<view class="menuTitle">
|
||
商城订单
|
||
</view>
|
||
</view>
|
||
<view class="menuItem"
|
||
@click="jumpTo(`/pages/client/recharge/membership-code?yaoqing_code=${userInfo.yaoqing_code}&member_id=${userInfo.id}`)">
|
||
<image class="menuImg" :src="`${imgPrefix}home-invite .png`"></image>
|
||
<view class="menuTitle">
|
||
邀请有礼
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<!-- <view class="mine-slide">
|
||
<view class="recharge-slide">
|
||
<view class="scroll">
|
||
<view class="card-roll">
|
||
<image
|
||
class="file-pet"
|
||
:src="`${imgPrefix}myRecharge.png`"
|
||
mode="widthFix"
|
||
/>
|
||
<view
|
||
class="recharge"
|
||
@click="
|
||
jumpTo(
|
||
`/pages/client/recharge/index?wallet_id=${walletList.wallet_id}&user_id=${walletList.user_id}&balance=${walletList.balance}`
|
||
)
|
||
"
|
||
>
|
||
|
||
</view>
|
||
<view
|
||
class="use-record"
|
||
@click="
|
||
jumpTo(
|
||
`/pages/client/recharge/use-list?wallet_id=${walletList.wallet_id}&user_id=${walletList.user_id}`
|
||
)
|
||
"
|
||
>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
|
||
<!-- <view class="meber-m" @click="jumpTo(`/pages/richText/member-interests?userId=${userInfo.id}&nick_name=${userInfo.nick_name}`)">
|
||
<image class="meb-im" :src="`${imgPrefix}member-vip.png`" />
|
||
</view> -->
|
||
|
||
|
||
<view class="navView">
|
||
<view class="navItem" @click="jumpTo('/pages/client/order/list')">
|
||
<view class="navTitle">
|
||
商城订单
|
||
</view>
|
||
<image class="navArrow" :src="`${imgPrefix}right-arrow.png`"></image>
|
||
</view>
|
||
<!-- <view class="navItem" @click="jumpTo('/pageHome/selectPet/index')">
|
||
<view class="navTitle">
|
||
我的宠物
|
||
</view>
|
||
<image class="navArrow" :src="`${imgPrefix}right-arrow.png`"></image>
|
||
</view> -->
|
||
<view class="navItem" @click="jumpTo('/pageHome/selectAddress/index')">
|
||
<view class="navTitle">
|
||
收货地址
|
||
</view>
|
||
<image class="navArrow" :src="`${imgPrefix}right-arrow.png`"></image>
|
||
</view>
|
||
|
||
|
||
|
||
<view class="navItem" @click="showContact">
|
||
<view class="navTitle">
|
||
反馈建议
|
||
</view>
|
||
<image class="navArrow" :src="`${imgPrefix}right-arrow.png`"></image>
|
||
</view>
|
||
|
||
<view class="navItem" @click="jumpTo('/pages/client/news/index')">
|
||
<view class="navTitle">
|
||
系统消息
|
||
</view>
|
||
<image class="navArrow" :src="`${imgPrefix}right-arrow.png`"></image>
|
||
</view>
|
||
<view class="navItem" @click="jumpTo('/pages/client/mine/qualification')">
|
||
<view class="navTitle">
|
||
服务资质
|
||
</view>
|
||
<image class="navArrow" :src="`${imgPrefix}right-arrow.png`"></image>
|
||
</view>
|
||
<!-- <view class="navItem" @click="jumpTo(`/pages/client/mine/aboutus`)">
|
||
<view class="navTitle">
|
||
关于平台
|
||
</view>
|
||
<image class="navArrow" :src="`${imgPrefix}right-arrow.png`"></image>
|
||
</view> -->
|
||
<view class="navItem" style="border: none;" v-if="userInfo.phone" @click="showLogoutModal = true">
|
||
<view class="navTitle">
|
||
退出登录
|
||
</view>
|
||
<image class="navArrow" :src="`${imgPrefix}right-arrow.png`"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<pop-up-modal v-if="showLogoutModal" content="确定要退出登录吗？" @cancel="showLogoutModal = false" @confirm="logout" />
|
||
|
||
<contact-modal v-if="showContactModal" :data="configInfo" @close="showContactModal = false" />
|
||
|
||
<!-- 可拖动联系客服组件 -->
|
||
<DraggableContact ref="draggableContact" :onClick="handleContactClick" />
|
||
|
||
<WeChatCopyModal ref="wechatCopyModal" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import CommonCell from "@/components/CommonCell.vue";
|
||
import PopUpModal from "../../../components/PopUpModal.vue";
|
||
import ContactModal from "@/components/ContactModal.vue";
|
||
import WeChatCopyModal from "@/components/WeChatCopyModal.vue";
|
||
import DraggableContact from "@/components/DraggableContact.vue";
|
||
import {
|
||
loginOut,
|
||
getUserInfo,
|
||
} from "../../../api/user";
|
||
import appConfig from "@/constants/app.config";
|
||
import {
|
||
jumpToWeChat,
|
||
imgPrefix
|
||
} from "@/utils/common";
|
||
|
||
export default {
|
||
components: {
|
||
CommonCell,
|
||
PopUpModal,
|
||
ContactModal,
|
||
WeChatCopyModal,
|
||
DraggableContact,
|
||
},
|
||
data() {
|
||
return {
|
||
imageList: [{
|
||
id: "1",
|
||
image: `${imgPrefix}member-vip.png`,
|
||
},
|
||
{
|
||
id: "2",
|
||
image: `${imgPrefix}invite-friend.png`,
|
||
},
|
||
{
|
||
id: "3",
|
||
image: `${imgPrefix}Carousel.png`,
|
||
},
|
||
],
|
||
progress: 8000,
|
||
isLogin: true,
|
||
showLogoutModal: false,
|
||
showContactModal: false,
|
||
couponList: '',
|
||
configInfo: {
|
||
kefu_pic: "",
|
||
kefu_time: "",
|
||
},
|
||
appConfig,
|
||
imgPrefix,
|
||
};
|
||
},
|
||
computed: {
|
||
userInfo() {
|
||
return this.$store.state?.user?.userInfo || {};
|
||
},
|
||
// 显示积分，未登录或401时展示0
|
||
displayTotalPoints() {
|
||
const userInfo = this.$store.state?.user?.userInfo;
|
||
if (!userInfo) return 0;
|
||
const points = userInfo.totalPoints;
|
||
return points !== undefined && points !== null ? points : 0;
|
||
},
|
||
// 显示卡包数量，未登录或401时展示0
|
||
displayMembershipCount() {
|
||
const userInfo = this.$store.state?.user?.userInfo;
|
||
if (!userInfo) return 0;
|
||
const count = userInfo.membershipInstanceCount;
|
||
return count !== undefined && count !== null ? count : 0;
|
||
},
|
||
// 显示券包数量，未登录或401时展示0
|
||
displayCouponCount() {
|
||
const userInfo = this.$store.state?.user?.userInfo;
|
||
if (!userInfo) return 0;
|
||
const count = userInfo.couponCount;
|
||
return count !== undefined && count !== null ? count : 0;
|
||
},
|
||
// 显示余额
|
||
displayWalletBalance() {
|
||
const userInfo = this.$store.state?.user?.userInfo;
|
||
if (!userInfo) return '';
|
||
const balance = userInfo.walletBalance;
|
||
return balance !== undefined && balance !== null ? balance : '';
|
||
},
|
||
},
|
||
options: {
|
||
styleIsolation: "shared",
|
||
},
|
||
methods: {
|
||
// 切换tab时刷新数据（不需要调用 getUserInfo，因为 index/index.vue 的 onShow 已经统一调用了）
|
||
onShowFun() {
|
||
// getUserInfo 接口已在 index/index.vue 的 onShow 中统一调用，这里不需要重复调用
|
||
// 如果需要从其他页面返回时获取最新数据，可以在 index/index.vue 的 onShow 中调用
|
||
},
|
||
|
||
jumpTo(url) {
|
||
uni.navigateTo({
|
||
url,
|
||
});
|
||
},
|
||
|
||
shoppingMall() {
|
||
// this.$emit("changeTab", [pageId]);
|
||
uni.reLaunch({
|
||
url: "/pages/client/index/index?activePageId=shopPage",
|
||
});
|
||
},
|
||
logout() {
|
||
loginOut();
|
||
this.showLogoutModal = false;
|
||
// 清除Vuex中的用户状态
|
||
this.$store.dispatch('user/deleteToken');
|
||
this.$store.dispatch('user/clearUserInfo');
|
||
// 清除本地缓存
|
||
uni.clearStorageSync();
|
||
uni.reLaunch({
|
||
url: "/pages/client/auth/index",
|
||
});
|
||
},
|
||
showContact() {
|
||
jumpToWeChat();
|
||
// this.getConfig();
|
||
// this.showContactModal = true;
|
||
},
|
||
// 跳转微信客服 - 使用自定义弹窗（与商城页面一致）
|
||
handleContactClick() {
|
||
if (this.$refs.wechatCopyModal) {
|
||
this.$refs.wechatCopyModal.show({
|
||
title: '请添加客服号',
|
||
weChatCode: 'Wagoo2025'
|
||
});
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.mine-container {
|
||
background-color: #ffecf3;
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
height: calc(100vh - #{$app_tabbar_height + 26});
|
||
padding-top: 0;
|
||
|
||
.mineGroundImgView {
|
||
position: relative;
|
||
margin-top: -88rpx;
|
||
|
||
.groundImg {
|
||
width: 100%;
|
||
height: 552rpx;
|
||
padding-top: 88rpx;
|
||
box-sizing: content-box;
|
||
}
|
||
}
|
||
|
||
.userInfoView {
|
||
border-radius: 16rpx;
|
||
width: calc(100vw - 40rpx);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 28rpx 32rpx;
|
||
background-color: #fff;
|
||
margin: auto;
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: -30rpx;
|
||
|
||
.userLeft {
|
||
display: flex;
|
||
flex: 1;
|
||
align-items: center;
|
||
|
||
.userAvatar {
|
||
width: 92rpx;
|
||
height: 92rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.vipWrapper {
|
||
background-color: #FF19A0;
|
||
padding: 4rpx 8rpx;
|
||
border-radius: 50px;
|
||
font-size: 20rpx;
|
||
color: #fff;
|
||
margin-top: 16rpx;
|
||
display: inline-block;
|
||
|
||
.lableImg {
|
||
width: 24rpx;
|
||
height: 20rpx;
|
||
margin-right: 4rpx;
|
||
}
|
||
}
|
||
|
||
.userName {
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.userPhone {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 8rpx;
|
||
}
|
||
}
|
||
|
||
.logoutBtn {
|
||
background: linear-gradient(270deg, #FF19A0 0%, #FF6BB3 100%);
|
||
color: #fff;
|
||
padding: 16rpx 32rpx;
|
||
border-radius: 50rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.userRight {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
flex: 1;
|
||
text-align: center;
|
||
gap: 60rpx;
|
||
|
||
.userRgihtItemView {
|
||
|
||
.num {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.text {
|
||
font-size: 20rpx;
|
||
margin-top: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.myPriceView {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 20rpx;
|
||
width: calc(100vw - 40rpx);
|
||
margin: auto;
|
||
margin-top: 48rpx;
|
||
font-size: 24rpx;
|
||
box-sizing: border-box;
|
||
|
||
.priceImg {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
|
||
.menuView {
|
||
width: calc(100vw - 40rpx);
|
||
background-color: #fff;
|
||
margin: auto;
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
border-radius: 16rpx;
|
||
|
||
.menuItem {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 32rpx 0rpx;
|
||
border-radius: 16rpx;
|
||
|
||
.menuImg {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
}
|
||
|
||
.menuTitle {
|
||
margin-top: 14rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.navView {
|
||
width: calc(100vw - 40rpx);
|
||
background-color: #fff;
|
||
margin: auto;
|
||
margin-top:46rpx;
|
||
border-radius: 16rpx;
|
||
margin-bottom: 26rpx;
|
||
|
||
.navItem {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 36rpx 0rpx;
|
||
border-bottom: 0.001px solid rgb(173 173 173 / 10%);
|
||
width: calc(100% - 40rpx);
|
||
margin: auto;
|
||
|
||
.navTitle {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.navArrow {
|
||
width: 11rpx;
|
||
height: 18rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 可拖动联系客服组件无需额外样式 */
|
||
|
||
.arrowImg {
|
||
width: 11rpx;
|
||
height: 18rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
|
||
.place-view {
|
||
height: 200rpx;
|
||
}
|
||
|
||
.mine-info {
|
||
padding: 32rpx 40rpx;
|
||
box-sizing: border-box;
|
||
background: #ffecf3;
|
||
display: flex;
|
||
position: relative;
|
||
|
||
.mine-avator {
|
||
width: 92rpx;
|
||
height: 92rpx;
|
||
border-radius: 140rpx;
|
||
background: rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.mine-name {
|
||
color: #272427;
|
||
flex: 1;
|
||
margin: 0 24rpx;
|
||
|
||
.name-editor {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.name {
|
||
font-family: PingFangSC;
|
||
font-size: 36rpx;
|
||
font-weight: 500;
|
||
line-height: 36rpx;
|
||
letter-spacing: normal;
|
||
color: #272427;
|
||
}
|
||
|
||
.mine-edit {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.mine-phone {
|
||
margin-top: 16rpx;
|
||
// width: 110rpx;
|
||
// height: 32rpx;
|
||
/* 自动布局 */
|
||
display: flex;
|
||
|
||
align-items: center;
|
||
padding: 4rpx 8rpx;
|
||
|
||
.diamond {
|
||
width: 120rpx;
|
||
height: 32rpx;
|
||
|
||
}
|
||
|
||
// gap: 4rpx;
|
||
// z-index: 1;
|
||
// border-radius: 100rpx 100rpx 100rpx 0;
|
||
// background: #4A4A4A;
|
||
// .diamond {
|
||
// width: 24rpx;
|
||
// height: 24rpx;
|
||
// }
|
||
// .member {
|
||
// font-family: PingFang SC;
|
||
// font-size: 22rpx;
|
||
// color: #f7e8ca;
|
||
// }
|
||
}
|
||
|
||
.points {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 16rpx;
|
||
|
||
.growth {
|
||
font-family: PingFangSC;
|
||
font-size: 20rpx;
|
||
color: #3d3d3d;
|
||
}
|
||
|
||
.growthval {
|
||
font-family: PingFangSC;
|
||
font-size: 20rpx;
|
||
color: #3d3d3d;
|
||
margin-left: 4rpx;
|
||
}
|
||
|
||
.progress-bar {
|
||
margin-left: 4rpx;
|
||
width: 210rpx;
|
||
height: 12rpx;
|
||
background: #fff;
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress {
|
||
height: 100%;
|
||
background: #FF19A0;
|
||
/* 进度条的颜色 */
|
||
transition: width 0.5s ease;
|
||
/* 平滑过渡效果 */
|
||
}
|
||
}
|
||
}
|
||
|
||
.qrcode {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 55rpx;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
}
|
||
|
||
.card-holder {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
gap: 70rpx;
|
||
padding: 20rpx 30rpx;
|
||
// padding: 10rpx 0 30rpx 0;
|
||
background: #ffecf3;
|
||
|
||
.card-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.recharge1 {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.k {
|
||
font-family: PingFangSC;
|
||
font-size: 28rpx;
|
||
color: #6c6c6c;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.balance {
|
||
margin-top: 10rpx;
|
||
border: 1px solid #FF19A0;
|
||
width: 24px;
|
||
height: 11px;
|
||
border-radius: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.k {
|
||
font-family: PingFangSC;
|
||
font-size: 9px;
|
||
color: #FF19A0;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.n {
|
||
font-family: PingFang SC;
|
||
font-size: 36rpx;
|
||
color: #272427;
|
||
}
|
||
|
||
.k {
|
||
font-family: PingFangSC;
|
||
font-size: 28rpx;
|
||
color: #6c6c6c;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mine-slide {
|
||
flex: 1;
|
||
//
|
||
box-sizing: border-box;
|
||
background: #ffecf3;
|
||
|
||
.recharge-slide {
|
||
|
||
// display: flex;
|
||
// overflow-x: auto;
|
||
// white-space: nowrap;
|
||
.scroll {
|
||
display: flex;
|
||
|
||
.card-roll {
|
||
position: relative;
|
||
margin-bottom: -10rpx;
|
||
|
||
.file-pet {
|
||
width: 750rpx;
|
||
height: 192rpx;
|
||
}
|
||
|
||
.card {
|
||
font-family: PingFangSC;
|
||
font-size: 40rpx;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.amount {
|
||
position: absolute;
|
||
left: 56rpx;
|
||
top: 78rpx;
|
||
|
||
.surplus {
|
||
font-family: PingFangSC;
|
||
font-size: 60rpx;
|
||
font-weight: 500;
|
||
line-height: 64rpx;
|
||
letter-spacing: normal;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.effectiveTime {
|
||
display: flex;
|
||
margin-top: 16rpx;
|
||
|
||
.surplus {
|
||
font-family: PingFang SC;
|
||
font-size: 24rpx;
|
||
font-weight: normal;
|
||
line-height: 24rpx;
|
||
letter-spacing: normal;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.first {
|
||
font-family: PingFang SC;
|
||
font-size: 24rpx;
|
||
font-weight: normal;
|
||
line-height: 24rpx;
|
||
letter-spacing: normal;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.recharge {
|
||
position: absolute;
|
||
right: 52rpx;
|
||
top: 64rpx;
|
||
width: 90rpx;
|
||
// border: 1px solid #000;
|
||
height: 41rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 16rpx 24rpx;
|
||
gap: 20rpx;
|
||
border-radius: 179px;
|
||
|
||
.immediately {
|
||
font-family: PingFangSC;
|
||
font-size: 28rpx;
|
||
font-weight: normal;
|
||
line-height: 24rpx;
|
||
letter-spacing: normal;
|
||
color: #3a3d55;
|
||
}
|
||
}
|
||
|
||
.discount {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
width: 50rpx;
|
||
height: 20rpx;
|
||
/* 自动布局 */
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 8rpx 24rpx;
|
||
gap: 4rpx;
|
||
border-radius: 0 24rpx 0 24rpx;
|
||
background: linear-gradient(270deg, #ff3c4a 0%, #f4c24e 107%);
|
||
|
||
.break {
|
||
font-family: PingFangSC;
|
||
font-size: 20rpx;
|
||
font-weight: 500;
|
||
letter-spacing: normal;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.use-record {
|
||
position: absolute;
|
||
right: 51rpx;
|
||
top: 19rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
// border: 1px solid #000;
|
||
width: 142rpx;
|
||
height: 46rpx;
|
||
|
||
.record {
|
||
font-family: PingFang SC;
|
||
font-size: 24rpx;
|
||
font-weight: normal;
|
||
line-height: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
letter-spacing: normal;
|
||
color: #ffffff;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.s {
|
||
width: 11rpx;
|
||
height: 18rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.membership {
|
||
width: 94%;
|
||
margin: 0 auto;
|
||
|
||
// background: #000;
|
||
.swiper {
|
||
height: 159rpx;
|
||
}
|
||
|
||
image {
|
||
width: 100%;
|
||
// height: 219rpx;
|
||
}
|
||
}
|
||
|
||
.meber-m {
|
||
width: 94%;
|
||
margin: 0 auto;
|
||
|
||
.meb-im {
|
||
width: 100%;
|
||
height: 200rpx;
|
||
border-radius: 15rpx;
|
||
}
|
||
}
|
||
|
||
.mine-content {
|
||
flex: 1;
|
||
padding: 0 24rpx 24rpx;
|
||
box-sizing: border-box;
|
||
|
||
.mine-coupon {
|
||
background: #fff;
|
||
border-radius: 30rpx;
|
||
padding: 26rpx;
|
||
margin-top: 32rpx;
|
||
flex: 1;
|
||
|
||
&.service-coupon {
|
||
margin-right: 22rpx;
|
||
}
|
||
|
||
.coupon-icon {
|
||
width: calc(345 / 339 * 88rpx);
|
||
height: 88rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
|
||
.mine-file {
|
||
background: $app_color_main;
|
||
border-radius: 30rpx;
|
||
padding: 38rpx 40rpx 34rpx 40rpx;
|
||
margin: 0 0 48rpx;
|
||
|
||
.file-pet {
|
||
height: 124rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.file-add {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
}
|
||
|
||
.pet-add-info {
|
||
flex: 1;
|
||
|
||
.pet-add-tip {
|
||
margin-bottom: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mine-order {
|
||
background: #fff;
|
||
border-radius: 0 0 30rpx 30rpx;
|
||
padding: 40rpx 27rpx;
|
||
margin: 0 0 32rpx 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
// padding-right: 10rpx;
|
||
// gap: 20rpx;
|
||
.flex-center2 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-left: 100rpx;
|
||
}
|
||
|
||
.flex-center3 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-left: 90rpx;
|
||
}
|
||
|
||
.flex-center4 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-left: 106rpx;
|
||
}
|
||
|
||
|
||
.order-icon {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
}
|
||
|
||
.mine-order2 {
|
||
background: #fff;
|
||
// border-radius: 30rpx;
|
||
padding: 40rpx 32rpx;
|
||
border-top-left-radius: 20px;
|
||
border-top-right-radius: 20px;
|
||
|
||
// margin: 0 0 32rpx 0;
|
||
.flex-center1 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.order-icon {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
}
|
||
|
||
.mine-order3 {
|
||
background: #fff;
|
||
// border-radius: 30rpx;
|
||
padding: 40rpx 28rpx;
|
||
|
||
// border-bottom-left-radius: 20px;
|
||
// border-bottom-right-radius: 20px;
|
||
.flex-center1 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.flex-center2 {
|
||
// margin-right: -3rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
// .flex-center3{
|
||
// // margin-right: 18rpx;
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
// justify-content: center;
|
||
// align-items: center;
|
||
// }
|
||
// margin: 0 0 32rpx 0;
|
||
.order-icon {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.place-view {
|
||
height: 200rpx;
|
||
}
|
||
|
||
.mine-cell-wrapper {
|
||
border-radius: 30rpx;
|
||
overflow: hidden;
|
||
width: 690rpx;
|
||
// padding: 40rpx 44rpx;
|
||
// margin: 20rpx 0 32rpx 0;
|
||
height: 312rpx;
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
|
||
// &.logout {
|
||
// margin-top: 40rpx;
|
||
// }
|
||
}
|
||
|
||
::v-deep {
|
||
.cell-content {
|
||
color: #272427;
|
||
// font-weight: bold;
|
||
font-family: ali-puhui-bold, "Arial", sans-serif;
|
||
font-size: 30rpx !important;
|
||
}
|
||
}
|
||
}
|
||
</style> |