1623 lines
36 KiB
Vue
1623 lines
36 KiB
Vue
<template>
|
||
<view class="user-index">
|
||
<view class="page-bg"></view>
|
||
<view class="header" :style="'margin-top: ' + statusBarHeight + 'px'"></view>
|
||
<view class="main-header">
|
||
<image class="bg-image" :src="bgImage" mode="scaleToFill"></image>
|
||
<image src="../../static/icon/bai-xin.png" class="star star2"></image>
|
||
<image src="../../static/icon/bai-xin.png" class="star star3"></image>
|
||
<!-- 用户信息 -->
|
||
<view class="user-info" @click="onLogin">
|
||
<view class="avatar">
|
||
<u-avatar :src="userInfo.avatar" :size="64" mode="aspectFill"></u-avatar>
|
||
<!-- <image v-if="userInfo.gradeId >= 4" class="huangguan" src="https://oss.jimeigroup.cn/static/huangguan.png" mode="widthFix"></image> -->
|
||
</view>
|
||
<view class="user-content">
|
||
<view class="nick-name">
|
||
<!-- {{ userInfo.certification }} -->
|
||
<text>{{ userInfo.nickname }}</text>
|
||
<image v-if="userInfo.sex == 1" src="../../static/icon/sex_man.png" mode="widthFix"></image>
|
||
<image v-if="userInfo.sex == 2" src="../../static/icon/sex_woman.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="user-id" v-if="userIdPrefix && userInfo.userId">
|
||
{{ userInfo.mobile }}</view>
|
||
<view class="roles-box">
|
||
<view class="login-tips" v-if="userInfo.gradeName">
|
||
<!-- <view class="certification" v-if="isLogin">
|
||
<u-tag size="mini" plain v-if="userInfo.certification == 1" borderColor="#ff0000" color="#ff0000" text="已实名"></u-tag>
|
||
<u-tag size="mini" plain v-else @click="toCertification" type="info" borderColor="#666666" color="#666666" text="未实名"></u-tag>
|
||
</view> -->
|
||
<template>
|
||
<u-tag type="warning" size="mini" v-if="userInfo.gradeId >= 4" text="公司员工"></u-tag>
|
||
<u-tag size="mini" plain type="info" v-else-if="userInfo.gradeId == 3" text="普通会员"></u-tag>
|
||
<u-tag size="mini" plain type="info" v-else-if="userInfo.gradeId == 2" text="注册用户"></u-tag>
|
||
</template>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="switch" @click="navTo('sub_pages/dealer/dealer')">
|
||
<u-switch size="24" :value="userInfo.gradeId >= 7" active-color="#eb9e4c"></u-switch>
|
||
<view class="switch-text">{{userInfo.gradeId >= 7?'已开通婚介': '开通婚介'}}</view>
|
||
</view> -->
|
||
<!-- <view class="setting">
|
||
<image src="../../static/icon/setting.png"></image>
|
||
</view> -->
|
||
</view>
|
||
|
||
<view class="main">
|
||
<!-- 开通会员 -->
|
||
<!-- <view class="buy-user">
|
||
<view class="desc">购买会员，解锁更多功能</view>
|
||
<view class="asset-left flex-box dis-flex flex-x-around">
|
||
<view class="asset-left-item">
|
||
<view class="item-name dis-flex flex-x-center">
|
||
<image class="buy-user-icon" src="../../static/icon/buy-user-23.png" mode="widthFix">
|
||
</image>
|
||
<text>无限畅聊</text>
|
||
</view>
|
||
<view class="item-name dis-flex flex-x-center">
|
||
<image class="buy-user-icon" src="../../static/icon/buy-user-24.png" mode="widthFix">
|
||
</image>
|
||
<text>精准搜素</text>
|
||
</view>
|
||
<view class="item-name dis-flex flex-x-center">
|
||
<image class="buy-user-icon" src="../../static/icon/buy-user-25.png" mode="widthFix">
|
||
</image>
|
||
<text>搜索优先</text>
|
||
</view>
|
||
<view class="item-name dis-flex flex-x-center">
|
||
<image class="buy-user-icon" src="../../static/icon/buy-user-26.png" mode="widthFix">
|
||
</image>
|
||
<text>会员标志</text>
|
||
</view>
|
||
</view>
|
||
<view class="asset-left-item" style="display: flex;align-items: center; margin-right: 28rpx;">
|
||
<u-button text="去解锁" size="small" color="linear-gradient(to bottom, #010002, #681752)"
|
||
@click="navTo('sub_pages/user/grade/grade')"></u-button>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<!-- 公告栏 -->
|
||
<!-- <view class="gonggao">
|
||
<view class="service-title">
|
||
<text class="text">恭喜梁女士和张先生牵手成功</text>
|
||
</view>
|
||
</view> -->
|
||
<!-- 模块列表 -->
|
||
<!-- <view class="service">
|
||
<view class="item" @click="navTo('sub_pages/wallet/balance/log')">
|
||
<image src="../../static/icon/wallet.png" mode="heightFix"></image>
|
||
<text>我的钱包</text>
|
||
</view>
|
||
<view class="item" @click="navTo('pages/order/index')">
|
||
<image src="../../static/icon/order.png" mode="heightFix"></image>
|
||
<text>我的订单</text>
|
||
</view>
|
||
<view class="item" @click="navTo('sub_pages/wallet/gift/gift')">
|
||
<image src="../../static/icon/gift2.png" mode="heightFix"></image>
|
||
<text>我的礼物</text>
|
||
</view>
|
||
<view class="item" @click="navTo('sub_pages/member/detail/detail?userId=' + userInfo.userId)">
|
||
<image src="../../static/icon/release.png" mode="heightFix"></image>
|
||
<text>我的发布</text>
|
||
</view>
|
||
<view class="item" @click="onShowOffline">
|
||
<image src="../../static/icon/marriage.png" mode="heightFix"></image>
|
||
<text>线下人工牵线</text>
|
||
</view>
|
||
<view class="item" @click="onShowOfflineVip">
|
||
<image src="../../static/icon/vip5.png" mode="heightFix"></image>
|
||
<text>线下尊享会员</text>
|
||
</view>
|
||
<view class="item" @click="navTo('sub_pages/user/poster/poster')">
|
||
<image src="../../static/icon/invite.png" mode="heightFix"></image>
|
||
<text>邀好友赚钱</text>
|
||
</view>
|
||
</view> -->
|
||
|
||
<view class="my-service">
|
||
<u-cell-group v-if="userInfo.gradeId == 15" :border="false">
|
||
<u-cell icon="https://oss-aishangjia.oss-cn-shenzhen.aliyuncs.com/v2_rwv2os.png" isLink title="房源管理" @click="$push('sub_pages/house/house')"></u-cell>
|
||
<u-cell icon="https://oss-aishangjia.oss-cn-shenzhen.aliyuncs.com/v2_rwv26y.png" isLink title="访客记录"></u-cell>
|
||
<u-cell icon="https://oss-aishangjia.oss-cn-shenzhen.aliyuncs.com/v2_rwv26x.png" isLink title="浏览历史"></u-cell>
|
||
<u-cell icon="https://oss-aishangjia.oss-cn-shenzhen.aliyuncs.com/v2_rwv26y%20%281%29.png" isLink title="我的收藏"></u-cell>
|
||
<u-cell icon="https://oss-aishangjia.oss-cn-shenzhen.aliyuncs.com/v2_rwv26x%20%281%29.png" isLink title="关于我们"></u-cell>
|
||
<u-cell icon="https://oss-aishangjia.oss-cn-shenzhen.aliyuncs.com/v2_rwv26x%20%282%29.png" isLink title="联系专属经纪人" :border="false" @click="showMyMatchmaker"></u-cell>
|
||
</u-cell-group>
|
||
<u-cell-group v-else :border="false">
|
||
<u-cell icon="https://oss-aishangjia.oss-cn-shenzhen.aliyuncs.com/v2_rwv26x.png" isLink title="浏览历史"></u-cell>
|
||
<u-cell icon="https://oss-aishangjia.oss-cn-shenzhen.aliyuncs.com/v2_rwv26y%20%281%29.png" isLink title="收藏房源"></u-cell>
|
||
<u-cell icon="https://oss-aishangjia.oss-cn-shenzhen.aliyuncs.com/v2_rwv26x%20%281%29.png" isLink title="关于我们"></u-cell>
|
||
<u-cell icon="https://oss-aishangjia.oss-cn-shenzhen.aliyuncs.com/v2_rwv26w.png" isLink title="预约看房记录"></u-cell>
|
||
<u-cell icon="https://oss-aishangjia.oss-cn-shenzhen.aliyuncs.com/v2_rwv26x%20%282%29.png" isLink title="联系专属经纪人" :border="false" @click="showMyMatchmaker"></u-cell>
|
||
</u-cell-group>
|
||
</view>
|
||
<!-- 退出登录 -->
|
||
<view v-if="isLogin" class="my-logout">
|
||
<view class="logout-btn" @click="handleLogout()">
|
||
<text>退出登录</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<u-toast ref="uToast" />
|
||
<u-popup :show="showMatchmaker" mode="center" :round="10" :closeable="true" @close="showMatchmaker = false">
|
||
<view class="matchamker">
|
||
<view class="userinfo">
|
||
<u-avatar class="avatar" size="70" :src="userRefereeList[0].dealerAvatar"></u-avatar>
|
||
<view class="matchamker-name">Mr.WANG</view>
|
||
<view class="desc">
|
||
我是您的专属经纪人，我叫XXX，有什么需要可以联系我哦
|
||
</view>
|
||
</view>
|
||
<view class="btn-contant">
|
||
<u-button text="马上联系" color="linear-gradient(#27b0fd, #3f72f4);" :disabled="disabled"
|
||
shape="circle" @click="contact(userRefereeList[0].dealerPhone)"></u-button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-popup :show="showOffline" mode="center" :round="10" :closeable="true" @close="closeOffline">
|
||
<view class="offline">
|
||
<view class="head">
|
||
<view class="info">
|
||
<text class="title">{{ current.name }}</text>
|
||
<text class="sub-title">{{ current.roleName }}</text>
|
||
</view>
|
||
<view class="desc">{{ current.comments }}</view>
|
||
<view class="buy" v-if="current.price">
|
||
<view class="item" v-for="(d,i) in current.price" :key="i"
|
||
:class="priceId == d.id ? 'active' : ''" @click="onPlan(d)">
|
||
￥{{ d.price }}
|
||
<view class="nums">{{ d.name }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer">
|
||
<view class="btn-wrapper">
|
||
<u-button text="立即购买" color="linear-gradient(to bottom, #010002, #681752)" :disabled="disabled"
|
||
shape="circle"
|
||
@click="$push('pages/checkout/checkout',{priceId,planId,comments,price})"></u-button>
|
||
</view>
|
||
<view class="xieyi">
|
||
购买即同意爱尚客网<text @click="$push('pages/article/detail/detail?id=116')">《人工牵线协议》</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-popup :show="showOfflineVip" mode="center" :round="10" :closeable="true" @close="showOfflineVip = false">
|
||
<view class="offline-vip">
|
||
<view class="head">
|
||
<view class="info">
|
||
<text class="title">{{ current.name }}</text>
|
||
<text class="sub-title">{{ current.roleName }}</text>
|
||
</view>
|
||
<view class="desc">{{ current.comments }}</view>
|
||
<view class="buy" v-if="current.price">
|
||
<view class="item" v-for="(d,i) in current.price" :key="i"
|
||
:class="priceId == d.id ? 'active' : ''" @click="onPlanVip(d,i)">
|
||
￥{{ d.price }}
|
||
<view class="nums">{{ d.name }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="triangle" :style="'margin-left: '+ marginLeft +'rpx;'"></view>
|
||
<view class="plan-desc" v-for="(d,i) in current.price" :key="i" v-if="priceId == d.id">
|
||
<view>赠送以下提升课程：</view>
|
||
<view>{{ d.comments }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer">
|
||
<view class="btn-wrapper">
|
||
<u-button text="立即购买" color="linear-gradient(to bottom, #010002, #681752)" :disabled="disabled"
|
||
shape="circle"
|
||
@click="$push('pages/checkout/checkout',{priceId,planId,comments,price})"></u-button>
|
||
</view>
|
||
<view class="xieyi">
|
||
购买即同意爱尚客网<text @click="$push('pages/article/detail/detail?id=116')">《人工牵线协议》</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import store from '@/store/index.js'
|
||
import storage from '@/utils/storage'
|
||
import * as UserPlanApi from '@/api/love-user-plan.js'
|
||
import * as UserRefereeApi from '@/api/user-referee.js'
|
||
import * as UserPlanEquityApi from '@/api/love-user-plan-equity.js'
|
||
import {
|
||
getUser,
|
||
updateUser
|
||
} from '@/api/user.js'
|
||
import {
|
||
login,
|
||
getPhoneNumber,
|
||
getWxOpenId
|
||
} from '@/api/login.js'
|
||
import {
|
||
listUserReferee
|
||
} from '@/api/user-referee.js'
|
||
import {
|
||
username,
|
||
userIdPrefix
|
||
} from '@/config.js';
|
||
import {
|
||
getMobile
|
||
} from '@/utils/util.js'
|
||
import http from '@/api'
|
||
|
||
// 订单操作
|
||
const orderNavbar = [
|
||
// { id: 'all', name: '全部订单', icon: 'qpdingdan' },
|
||
{
|
||
id: 'payment',
|
||
name: '待付款',
|
||
icon: 'daifukuan',
|
||
count: 0
|
||
},
|
||
{
|
||
id: 'delivery',
|
||
name: '待配送',
|
||
icon: 'daifahuo',
|
||
count: 0
|
||
},
|
||
{
|
||
id: 'received',
|
||
name: '待收货',
|
||
icon: 'daishouhuo',
|
||
count: 0
|
||
},
|
||
{
|
||
id: 'comment',
|
||
name: '待评价',
|
||
icon: 'lingquan',
|
||
count: 0
|
||
},
|
||
]
|
||
/**
|
||
* 我的服务
|
||
* id: 标识; name: 标题名称; icon: 图标; type 类型(link和button); url: 跳转的链接
|
||
*/
|
||
const service = [{
|
||
id: 'get_order',
|
||
name: '订单管理',
|
||
icon: 'qpdingdan',
|
||
type: 'link',
|
||
url: 'pages/order/index'
|
||
},
|
||
{
|
||
id: 'equipment',
|
||
name: '设备管理',
|
||
icon: 'shouhuodizhi',
|
||
type: 'link',
|
||
url: 'pages/user/equipment/index'
|
||
},
|
||
{
|
||
id: 'help',
|
||
name: '使用帮助',
|
||
icon: 'bangzhu',
|
||
type: 'link',
|
||
url: 'pages/help/index'
|
||
},
|
||
{
|
||
id: 'administration',
|
||
name: '关于我们',
|
||
icon: 'sy-yh',
|
||
type: 'link',
|
||
url: 'pages/help/about'
|
||
},
|
||
]
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
userIdPrefix,
|
||
bgImage: 'https://oss-aishangjia.oss-cn-shenzhen.aliyuncs.com/v2_rww72n.jpg',
|
||
// #ifdef MP-ALIPAY
|
||
canIUseAuthButton: my.canIUse('button.open-type.getAuthorize'),
|
||
// #endif
|
||
// 首次加载
|
||
isFirstload: true,
|
||
statusBarHeight: 25,
|
||
|
||
// 是否已登录
|
||
isLogin: false,
|
||
superAdmin: false,
|
||
agentAdmin: false,
|
||
isAdmin: false,
|
||
isTemp: false,
|
||
isKitchen: false,
|
||
isGoods: false,
|
||
// 系统设置
|
||
setting: {},
|
||
// 当前用户信息
|
||
userInfo: {
|
||
nickname: '未登录',
|
||
userId: '',
|
||
gradeName: '注册会员'
|
||
},
|
||
isZxhy: false,
|
||
roleName: '注册会员',
|
||
userRefereeList: [],
|
||
form: {},
|
||
// 账户资产
|
||
assets: {
|
||
balance: '--',
|
||
points: '--',
|
||
coupon: '--',
|
||
browse: '--',
|
||
collection: '--',
|
||
follow: '--'
|
||
},
|
||
// 我的服务
|
||
service,
|
||
// 订单操作
|
||
orderNavbar,
|
||
// 当前用户待处理的订单数量
|
||
todoCounts: {
|
||
payment: 0,
|
||
deliver: 0,
|
||
received: 0,
|
||
notice: 10
|
||
},
|
||
plan: 0,
|
||
planId: 0,
|
||
priceId: 0,
|
||
priceName: '',
|
||
price: 0,
|
||
current: {},
|
||
marginLeft: 60,
|
||
disabled: false,
|
||
showMatchmaker: false,
|
||
showOffline: false,
|
||
showOfflineVip: false
|
||
}
|
||
},
|
||
onLoad() {
|
||
// 设置navbar标题、颜色
|
||
uni.setNavigationBarColor({
|
||
frontColor: '#ffffff',
|
||
backgroundColor: '#101010'
|
||
})
|
||
},
|
||
onShow() {
|
||
this.getUserInfo()
|
||
this.getOpenId()
|
||
this.getUserReferee()
|
||
},
|
||
onPullDownRefresh() {
|
||
setTimeout(function() {
|
||
uni.stopPullDownRefresh();
|
||
this.getUserInfo()
|
||
}, 500);
|
||
},
|
||
methods: {
|
||
// 跳转页面
|
||
navTo(url) {
|
||
const app = this
|
||
// 未登录状态
|
||
if (!app.isLogin) {
|
||
return this.$navTo('pages/login/index')
|
||
}
|
||
app.$navTo(url)
|
||
},
|
||
getOpenId() {
|
||
uni.login({
|
||
success: (res) => {
|
||
console.log(res);
|
||
getWxOpenId({
|
||
code: res.code
|
||
}).then(response => {
|
||
console.log("response: ", response);
|
||
if (response.code == 401) {
|
||
this.handleLogout()
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
toCertification() {
|
||
if (this.userInfo.certification != 1) {
|
||
this.$navTo('sub_pages/certification/id-card/id-card')
|
||
}
|
||
|
||
},
|
||
getUserInfo() {
|
||
const {
|
||
form
|
||
} = this
|
||
const app = this
|
||
uni.getSystemInfo({
|
||
success(data) {
|
||
if (data) {
|
||
app.statusBarHeight = data.statusBarHeight + 50
|
||
}
|
||
}
|
||
})
|
||
getUser().then(res => {
|
||
if (res.code == 0 && res.data.username != 'www') {
|
||
console.log("获取用户信息: ", res.data);
|
||
app.form = res.data
|
||
app.userInfo = res.data
|
||
store.dispatch('setUserInfo', res.data)
|
||
// uni.setStorageSync('gradeId',res.data.gradeId)
|
||
// uni.setStorageSync('gradeName',res.data.gradeName)
|
||
app.isLogin = true
|
||
|
||
|
||
|
||
// const roleName = res.data.roles[0].roleName
|
||
// app.roleName = roleName
|
||
// storage.set('roleName',roleName)
|
||
|
||
// // 判断会员身份
|
||
// const roleName = storage.get('roleName')
|
||
// if(roleName == '尊享会员'){
|
||
// app.roleName = roleName
|
||
// return false
|
||
// }
|
||
// const exclusive = app.form.roles.filter(d => d.roleName == '尊享会员')
|
||
// const ordinary = app.form.roles.filter(d => d.roleName == '普通会员')
|
||
// if(ordinary){
|
||
// console.log("111111: ",111111);
|
||
// app.roleName = '普通会员'
|
||
// storage.set('roleName',d.roleName)
|
||
// }
|
||
// if(exclusive){
|
||
// console.log("222222: ",222222);
|
||
// app.roleName = '尊享会员'
|
||
// storage.set('roleName',d.roleName)
|
||
// }
|
||
} else {
|
||
app.isLogin = false
|
||
// app.handleLogout()
|
||
}
|
||
})
|
||
|
||
},
|
||
getUserReferee() {
|
||
const app = this
|
||
const userId = uni.getStorageSync('userId')
|
||
UserRefereeApi.listUserReferee({
|
||
userId
|
||
}).then(res => {
|
||
app.userRefereeList = res.data
|
||
})
|
||
},
|
||
showMyMatchmaker() {
|
||
// 未登录状态
|
||
if (!this.isLogin) {
|
||
return this.$navTo('pages/login/index')
|
||
}
|
||
this.showMatchmaker = true
|
||
},
|
||
onShowOffline() {
|
||
const app = this
|
||
// 未登录状态
|
||
if (!app.isLogin) {
|
||
return this.$navTo('pages/login/index')
|
||
}
|
||
UserPlanApi.listUserPlan({
|
||
roleId: 273
|
||
}).then(res => {
|
||
app.current = res.data[0]
|
||
// 设置默认值
|
||
app.current.price.map((d, i) => {
|
||
if (i == 0) {
|
||
app.priceId = d.id
|
||
app.planId = d.planId
|
||
app.price = d.price
|
||
}
|
||
})
|
||
})
|
||
app.showOffline = true
|
||
},
|
||
onShowOfflineVip() {
|
||
const app = this
|
||
// 未登录状态
|
||
if (!app.isLogin) {
|
||
return this.$navTo('pages/login/index')
|
||
}
|
||
UserPlanApi.listUserPlan({
|
||
roleId: 274
|
||
}).then(res => {
|
||
app.current = res.data[0]
|
||
// 设置默认值
|
||
app.current.price.map((d, i) => {
|
||
if (i == 0) {
|
||
app.priceId = d.id
|
||
app.planId = d.planId
|
||
app.price = d.price
|
||
}
|
||
})
|
||
})
|
||
app.showOfflineVip = true
|
||
},
|
||
onPlan(item, index) {
|
||
console.log("item: ", item);
|
||
this.priceId = item.id
|
||
this.priceName = item.name
|
||
this.planId = item.planId
|
||
this.price = item.price
|
||
this.comments = this.current.name
|
||
},
|
||
onPlanVip(item, index) {
|
||
console.log("itemVip: ", item);
|
||
this.priceId = item.id
|
||
this.priceName = item.name
|
||
this.planId = item.planId
|
||
this.price = item.price
|
||
this.comments = this.current.name
|
||
console.log("this.current: ", this.current);
|
||
if (index == 0) {
|
||
this.marginLeft = 60
|
||
}
|
||
if (index == 1) {
|
||
this.marginLeft = 280
|
||
}
|
||
if (index == 2) {
|
||
this.marginLeft = 497
|
||
}
|
||
},
|
||
closeOffline() {
|
||
this.showOffline = false
|
||
},
|
||
closeOfflineVip() {
|
||
this.showOfflineVip = false
|
||
},
|
||
// 跳转到服务页面
|
||
handleService({
|
||
url
|
||
}) {
|
||
if (url.slice(0, 4) == 'http') {
|
||
wx.openCustomerServiceChat({
|
||
extInfo: {
|
||
url: 'https://work.weixin.qq.com/kfid/kfc1693a8d29b84bc5e'
|
||
},
|
||
corpId: 'ww1c3f872ba0a39228',
|
||
success(res) {}
|
||
})
|
||
return;
|
||
}
|
||
if (!this.isLogin) {
|
||
return false;
|
||
}
|
||
console.log("url: ", url);
|
||
this.$navTo(url)
|
||
},
|
||
onLogin() {
|
||
const app = this
|
||
// 未登录状态
|
||
if (!app.isLogin) {
|
||
return this.$navTo('pages/login/index')
|
||
}
|
||
// 跳转登录页面
|
||
this.$push('sub_pages/user/personal/index')
|
||
},
|
||
onUpdateAvatar() {
|
||
const {
|
||
form,
|
||
isLogin
|
||
} = this
|
||
const app = this
|
||
// #ifdef MP-ALIPAY
|
||
console.log("// 自动获取头像昵称: ");
|
||
return false;
|
||
// 自动获取头像昵称
|
||
my.getOpenUserInfo({
|
||
fail: (res) => {
|
||
console.log("res1: ", res);
|
||
},
|
||
success: (res) => {
|
||
let user = JSON.parse(res.response).response // 以下方的报文格式解析两层 response
|
||
// 获取头像昵称
|
||
if (user && user.avatar) {
|
||
form.avatar = user.avatar
|
||
form.nickname = user.nickName
|
||
updateUser(form).then(res => {
|
||
console.log("res3: ", res);
|
||
app.userInfo.avatar = user.avatar
|
||
app.userInfo.nickname = user.nickName
|
||
app.showToast('更新成功')
|
||
})
|
||
}
|
||
}
|
||
});
|
||
// #endif
|
||
},
|
||
// 显示toast信息
|
||
showToast(title, duration = 2000) {
|
||
this.$refs.uToast.show({
|
||
title,
|
||
duration
|
||
})
|
||
},
|
||
// 绑定手机号码
|
||
bindPhone() {
|
||
const app = this
|
||
const {
|
||
form
|
||
} = this
|
||
my.getPhoneNumber({
|
||
success: (res) => {
|
||
let encryptedData = res.response;
|
||
getPhoneNumber({
|
||
encryptedData
|
||
}).then(response => {
|
||
console.log("授权手机号码: ", response);
|
||
const json = JSON.parse(response.data)
|
||
if (json.mobile) {
|
||
// 执行登录
|
||
updateUser({
|
||
phone: json.mobile
|
||
}).then(res => {
|
||
app.$toast('绑定成功')
|
||
app.userInfo.phone = json.mobile
|
||
})
|
||
} else {
|
||
app.bindPhone()
|
||
}
|
||
})
|
||
},
|
||
fail: (res) => {
|
||
console.log(res);
|
||
},
|
||
});
|
||
},
|
||
contact(phone) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone
|
||
})
|
||
},
|
||
handleLogout() {
|
||
// http.setConfig((config) => {
|
||
// config.header = {};
|
||
// config.header = {
|
||
// AppId: appId,
|
||
// tenantId: tenantId
|
||
// };
|
||
// return config
|
||
// })
|
||
uni.clearStorage()
|
||
uni.clearStorageSync()
|
||
uni.redirectTo({
|
||
url: '/pages/login/index'
|
||
})
|
||
},
|
||
|
||
onApply() {
|
||
if (!this.isLogin) {
|
||
return false;
|
||
}
|
||
this.$navTo('pages/wallet/balance/log')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.user-index {
|
||
background-color: #f3f3f3;
|
||
height: 100vh;
|
||
}
|
||
|
||
.container {
|
||
padding-bottom: 60rpx;
|
||
}
|
||
|
||
.page-bg {
|
||
width: 750rpx;
|
||
height: calc(100rpx + var(--status-bar-height));
|
||
display: block;
|
||
background: url('https://oss-aishangjia.oss-cn-shenzhen.aliyuncs.com/v2_rww72n.jpg');
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: -100;
|
||
}
|
||
|
||
// 页面头部
|
||
.main-header {
|
||
// background-color: #FBF7EF;
|
||
position: absolute;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 480rpx;
|
||
background-size: 100% 100%;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.bg-image {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 0;
|
||
}
|
||
|
||
.star {
|
||
position: absolute;
|
||
opacity: 0.1;
|
||
color: #fff;
|
||
}
|
||
|
||
.star1 {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
right: 80rpx;
|
||
top: 34rpx;
|
||
}
|
||
|
||
.star2 {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
left: 40rpx;
|
||
top: 10rpx;
|
||
}
|
||
|
||
.star3 {
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
left: 130rpx;
|
||
top: 70rpx;
|
||
}
|
||
|
||
|
||
.user-info {
|
||
display: flex;
|
||
height: 120rpx;
|
||
padding-left: 30rpx;
|
||
z-index: 1;
|
||
|
||
.avatar {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
.huangguan{
|
||
position: absolute;
|
||
top: -40rpx;
|
||
bottom: 0rpx;
|
||
right: -10rpx;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
padding: 4rpx;
|
||
}
|
||
|
||
.user-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
margin-left: 30rpx;
|
||
color: #ffffff;
|
||
|
||
.nick-name {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
max-width: 270rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
|
||
image {
|
||
margin-left: 10rpx;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
}
|
||
|
||
.user-id {
|
||
font-weight: 300;
|
||
color: #efefef;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.mobile {
|
||
margin-top: 15rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.user-grade {
|
||
align-self: baseline;
|
||
display: flex;
|
||
align-items: center;
|
||
background: #3c3c3c;
|
||
margin-top: 12rpx;
|
||
border-radius: 10rpx;
|
||
padding: 4rpx 12rpx;
|
||
|
||
.user-grade_icon .image {
|
||
display: block;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.user-grade_name {
|
||
margin-left: 5rpx;
|
||
font-size: 26rpx;
|
||
color: #EEE0C3;
|
||
}
|
||
|
||
}
|
||
|
||
.roles-box {
|
||
display: flex;
|
||
|
||
.login-tips {
|
||
margin-top: 12rpx;
|
||
margin-right: 6rpx;
|
||
font-size: 30rpx;
|
||
display: flex;
|
||
|
||
.certification {
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
|
||
.switch {
|
||
display: flex;
|
||
color: #ffffff;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 50rpx 50rpx 0 0;
|
||
// font-size: 24rpx;
|
||
z-index: 999;
|
||
|
||
image {
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
}
|
||
|
||
.switch-text {
|
||
z-index: 9999;
|
||
color: #eb9e4c;
|
||
margin-top: 6rpx;
|
||
}
|
||
}
|
||
|
||
.setting {
|
||
color: #cecece;
|
||
position: absolute;
|
||
right: 2vh;
|
||
top: 1vh;
|
||
|
||
image {
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 角标组件
|
||
.item-badge {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 55rpx;
|
||
// background: $main-bg;
|
||
background: #fa2209;
|
||
color: #fff;
|
||
border-radius: 100%;
|
||
min-width: 38rpx;
|
||
height: 38rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 1rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
|
||
.main {
|
||
position: absolute;
|
||
top: 330rpx;
|
||
left: 25rpx;
|
||
z-index: 999;
|
||
padding-bottom: 200rpx;
|
||
|
||
// 开通会员
|
||
.buy-user {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin: 22rpx auto 22rpx auto;
|
||
padding: 22rpx 0;
|
||
width: 700rpx;
|
||
box-shadow: 0 1rpx 5rpx 0px #eaebec;
|
||
border-radius: 24rpx;
|
||
background: #fff;
|
||
|
||
.desc {
|
||
padding-top: 5rpx;
|
||
padding-left: 32rpx;
|
||
font-size: 28rpx;
|
||
color: #545454;
|
||
}
|
||
|
||
.asset-right {
|
||
width: 170rpx;
|
||
border-left: 1rpx solid #eee;
|
||
}
|
||
|
||
.asset-right-item {
|
||
text-align: center;
|
||
color: #545454;
|
||
|
||
.item-icon {
|
||
font-size: 44rpx;
|
||
}
|
||
|
||
.item-name {
|
||
margin-top: 14rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.asset-left-item {
|
||
text-align: center;
|
||
padding-left: 28rpx;
|
||
display: flex;
|
||
|
||
.item-value {
|
||
font-size: 34rpx;
|
||
// color: #febd45;
|
||
}
|
||
|
||
.item-name {
|
||
color: #545454;
|
||
margin-top: 14rpx;
|
||
font-size: 24rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
margin: 30rpx 25rpx 20rpx 0;
|
||
}
|
||
|
||
.buy-user-icon {
|
||
width: 40rpx;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
// 公共栏
|
||
.gonggao {
|
||
margin: 24rpx auto 24rpx auto;
|
||
padding: 30rpx 0;
|
||
width: 700rpx;
|
||
box-shadow: 0 1rpx 5rpx 0px #eaebec;
|
||
border-radius: 24rpx;
|
||
background: #fff;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
|
||
text {
|
||
padding-left: 30rpx;
|
||
font-size: 28rpx;
|
||
color: #545454;
|
||
}
|
||
|
||
image {
|
||
width: 40rpx;
|
||
margin-left: 30rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
// 功能列表
|
||
.service {
|
||
margin: 24rpx auto 24rpx auto;
|
||
padding: 20rpx 0;
|
||
width: 700rpx;
|
||
box-shadow: 0 1rpx 5rpx 0px #eaebec;
|
||
border-radius: 24rpx;
|
||
background: #fff;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 165rpx;
|
||
padding-left: 8rpx;
|
||
margin: 12rpx 0;
|
||
font-size: 26rpx;
|
||
color: #545454;
|
||
|
||
image {
|
||
height: 50rpx;
|
||
width: 50rpx;
|
||
}
|
||
|
||
text {
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 我的钱包
|
||
.my-asset {
|
||
display: flex;
|
||
margin: 22rpx auto 22rpx auto;
|
||
padding: 22rpx 0;
|
||
width: 92%;
|
||
box-shadow: 0 1rpx 5rpx 0px #eaebec;
|
||
border-radius: 24rpx;
|
||
background: #fff;
|
||
|
||
.asset-right {
|
||
width: 170rpx;
|
||
border-left: 1rpx solid #eee;
|
||
}
|
||
|
||
.asset-right-item {
|
||
text-align: center;
|
||
color: #545454;
|
||
|
||
.item-icon {
|
||
font-size: 44rpx;
|
||
}
|
||
|
||
.item-name {
|
||
margin-top: 14rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.asset-left-item {
|
||
text-align: center;
|
||
color: #666;
|
||
padding: 0 42rpx;
|
||
|
||
.item-value {
|
||
font-size: 34rpx;
|
||
color: $main-bg;
|
||
}
|
||
|
||
.item-name {
|
||
margin-top: 14rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
// 订单操作
|
||
.order-navbar {
|
||
display: flex;
|
||
margin: 20rpx auto 20rpx auto;
|
||
padding: 0rpx 0 6rpx 0;
|
||
width: 94%;
|
||
// box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
||
font-size: 30rpx;
|
||
border-radius: 5rpx;
|
||
background: #fff;
|
||
|
||
&-item {
|
||
position: relative;
|
||
width: 25%;
|
||
|
||
.item-icon {
|
||
text-align: center;
|
||
margin: 0 auto;
|
||
padding: 10rpx 0;
|
||
color: #545454;
|
||
font-size: 44rpx;
|
||
}
|
||
|
||
.item-name {
|
||
font-size: 28rpx;
|
||
color: #545454;
|
||
text-align: center;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
|
||
// 我的服务
|
||
.my-service {
|
||
margin: 24rpx auto 0 auto;
|
||
padding: 20rpx 0;
|
||
width: 700rpx;
|
||
box-shadow: 0 1rpx 5rpx 0px #eaebec;
|
||
border-radius: 24rpx;
|
||
background: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.admin {
|
||
color: #ff0000;
|
||
}
|
||
|
||
.item {
|
||
width: 640rpx;
|
||
margin: auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
line-height: 80rpx;
|
||
height: 80rpx;
|
||
border-bottom: 1rpx solid #f3f3f3;
|
||
|
||
.service-title {
|
||
font-size: 28rpx;
|
||
color: #545454;
|
||
|
||
.icon {
|
||
padding-right: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.service-content {
|
||
|
||
.service-info {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
.item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
line-height: 52rpx;
|
||
color: #999999;
|
||
|
||
.desc {
|
||
color: #999999;
|
||
}
|
||
|
||
.money {
|
||
color: #3c3c3c;
|
||
font-weight: bold;
|
||
font-size: 50rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
margin-bottom: -20rpx;
|
||
|
||
.shop-service-item {
|
||
position: relative;
|
||
width: 33.33%;
|
||
float: left;
|
||
margin-bottom: 30rpx;
|
||
|
||
.item-icon {
|
||
text-align: center;
|
||
margin: 0 auto;
|
||
padding: 14rpx 0;
|
||
color: $main-bg;
|
||
font-size: 44rpx;
|
||
}
|
||
|
||
.item-name {
|
||
font-size: 28rpx;
|
||
color: #545454;
|
||
text-align: center;
|
||
}
|
||
|
||
}
|
||
|
||
.service-item {
|
||
position: relative;
|
||
width: 25%;
|
||
float: left;
|
||
margin-bottom: 30rpx;
|
||
|
||
.item-icon {
|
||
text-align: center;
|
||
margin: 0 auto;
|
||
padding: 14rpx 0;
|
||
color: $main-bg;
|
||
font-size: 44rpx;
|
||
}
|
||
|
||
.item-name {
|
||
font-size: 28rpx;
|
||
color: #545454;
|
||
text-align: center;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
// 退出登录
|
||
.my-logout {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 30rpx;
|
||
|
||
.logout-btn {
|
||
width: 360rpx;
|
||
margin: 0 auto;
|
||
font-size: 28rpx;
|
||
color: #616161;
|
||
border-radius: 20rpx;
|
||
border: 1px solid #dcdcdc;
|
||
padding: 16rpx 0;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
// 绑定手机号 样式1
|
||
.my-mobile {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 16rpx 40rpx;
|
||
background: #FCEBD1;
|
||
|
||
.info {
|
||
color: #cd8c0c;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.btn-bind {
|
||
list-style-type: none;
|
||
padding: 0px 16px !important;
|
||
background-color: #EAB766;
|
||
color: #fff;
|
||
border-radius: 30rpx;
|
||
font-size: 26rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
// 绑定手机号 样式2
|
||
.my-mobile2 {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin: 20rpx auto 20rpx auto;
|
||
padding: 12rpx 40rpx;
|
||
width: 94%;
|
||
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
||
font-size: 30rpx;
|
||
border-radius: 5rpx;
|
||
background: #fff;
|
||
|
||
.info {
|
||
// color: #cd8c0c;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.btn-bind {
|
||
padding: 8rpx 24rpx;
|
||
background-color: #EAB766;
|
||
color: #fff;
|
||
border-radius: 30rpx;
|
||
font-size: 26rpx;
|
||
text-align: center;
|
||
|
||
button::after {
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.flex-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.more {
|
||
padding-right: 20rpx;
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.main-header-btn {
|
||
width: 700rpx;
|
||
position: absolute;
|
||
bottom: 0;
|
||
z-index: 9999;
|
||
clear: both;
|
||
display: flex;
|
||
color: #ffffff;
|
||
justify-content: space-around;
|
||
padding: 12rpx 0;
|
||
}
|
||
|
||
.matchamker {
|
||
background: url('https://oss-aishangjia.oss-cn-shenzhen.aliyuncs.com/v2_rww72n.jpg');
|
||
background-size: 100% auto;
|
||
background-repeat: no-repeat;
|
||
border-radius: 20rpx;
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 500rpx;
|
||
height: 670rpx;
|
||
padding: 30rpx;
|
||
|
||
.userinfo {
|
||
position: absolute;
|
||
top: 270rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.avatar {
|
||
margin: auto;
|
||
border: 6rpx solid #ffffff;
|
||
}
|
||
|
||
.matchamker-name {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
text-align: center;
|
||
}
|
||
|
||
.desc {
|
||
padding: 10rpx;
|
||
width: 350rpx;
|
||
height: 100rpx;
|
||
overflow: hidden;
|
||
color: #b3b3b3;
|
||
font-size: 26rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.btn-contant {
|
||
position: absolute;
|
||
width: 360rpx;
|
||
margin: 50rpx auto;
|
||
bottom: 0;
|
||
padding: 0 20rpx;
|
||
}
|
||
}
|
||
|
||
.offline {
|
||
border-radius: 20rpx;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
width: 600rpx;
|
||
height: 600rpx;
|
||
padding: 30rpx;
|
||
|
||
.head {
|
||
padding-top: 10rpx;
|
||
width: 600rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.sub-title {
|
||
padding-top: 8rpx;
|
||
padding-left: 40rpx;
|
||
color: #7f006f;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
.desc {
|
||
color: #999999;
|
||
font-size: 26rpx;
|
||
line-height: 3rem;
|
||
}
|
||
|
||
.buy {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 20rpx;
|
||
|
||
.item {
|
||
width: 160rpx;
|
||
height: 200rpx;
|
||
background-color: #ffffff;
|
||
border: 1rpx solid #dbdbdb;
|
||
border-radius: 12rpx;
|
||
color: #333333;
|
||
text-align: center;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
|
||
.nums {
|
||
font-size: 24rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
background-color: #999999;
|
||
color: #ffffff;
|
||
padding: 0 14rpx;
|
||
border-radius: 12rpx 0 12rpx 0;
|
||
}
|
||
}
|
||
|
||
.active {
|
||
background-color: #460c47;
|
||
color: #ffc7d3;
|
||
|
||
.nums {
|
||
background-color: #ff0000;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.offline-vip {
|
||
border-radius: 20rpx;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
width: 600rpx;
|
||
height: 780rpx;
|
||
padding: 30rpx;
|
||
|
||
.head {
|
||
padding-top: 10rpx;
|
||
width: 600rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.sub-title {
|
||
padding-top: 8rpx;
|
||
padding-left: 40rpx;
|
||
color: #7f006f;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
.desc {
|
||
color: #999999;
|
||
font-size: 26rpx;
|
||
line-height: 3rem;
|
||
}
|
||
|
||
.buy {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 20rpx;
|
||
|
||
.item {
|
||
width: 160rpx;
|
||
height: 200rpx;
|
||
background-color: #ffffff;
|
||
border: 1rpx solid #dbdbdb;
|
||
border-radius: 12rpx;
|
||
color: #333333;
|
||
text-align: center;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
|
||
.nums {
|
||
font-size: 24rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
background-color: #999999;
|
||
color: #ffffff;
|
||
padding: 0 14rpx;
|
||
border-radius: 12rpx 0 12rpx 0;
|
||
}
|
||
}
|
||
|
||
.active {
|
||
background-color: #460c47;
|
||
color: #ffc7d3;
|
||
|
||
.nums {
|
||
background-color: #ff0000;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.plan-desc {
|
||
padding: 20rpx;
|
||
width: 560rpx;
|
||
height: 100rpx;
|
||
font-size: 26rpx;
|
||
color: #333333;
|
||
background-color: #dfd3e0;
|
||
}
|
||
|
||
.triangle {
|
||
width: 0;
|
||
height: 0;
|
||
margin-top: 20rpx;
|
||
border-bottom: 20rpx solid #dfd3e0;
|
||
border-right: 20rpx solid transparent;
|
||
border-left: 20rpx solid transparent;
|
||
}
|
||
}
|
||
|
||
|
||
.footer {
|
||
.btn-wrapper {
|
||
width: 360rpx;
|
||
margin: 50rpx auto;
|
||
// display: flex;
|
||
// align-items: center;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.xieyi {
|
||
font-size: 26rpx;
|
||
text-align: center;
|
||
color: #999999;
|
||
|
||
text {
|
||
color: #7f006f;
|
||
}
|
||
}
|
||
}
|
||
|
||
.follow-btn {
|
||
width: 100rpx;
|
||
padding: 4rpx 20rpx;
|
||
color: #ffffff;
|
||
font-size: 24rpx;
|
||
border-radius: 50rpx;
|
||
display: flex;
|
||
margin-right: 10rpx;
|
||
background: linear-gradient(#47076b, #8d1a50);
|
||
text-align: center;
|
||
image {
|
||
width: 24rpx;
|
||
height: 66rpx;
|
||
margin-right: 6rpx;
|
||
}
|
||
}
|
||
|
||
.unfollow-btn {
|
||
width: 100rpx;
|
||
padding: 4rpx 20rpx;
|
||
color: #ffffff;
|
||
font-size: 24rpx;
|
||
border-radius: 50rpx;
|
||
margin-right: 10rpx;
|
||
background: linear-gradient(#b3b3b3, #cccccc);
|
||
text-align: center;
|
||
image {
|
||
width: 24rpx;
|
||
height: 66rpx;
|
||
margin-right: 6rpx;
|
||
}
|
||
}
|
||
</style> |