1006 lines
33 KiB
Vue
1006 lines
33 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- 会员信息 -->
|
||
<!-- :class="{active : startedAt == ''}" -->
|
||
<view class="user active" style="height: 110px;">
|
||
<image class="user-back" src="@/static/imgs/user_back.png"></image>
|
||
<view class="user-cont" v-if="userLogin">
|
||
<view class="user-head">
|
||
<image class="user-avatar" @click="updImg" :src="avatar ? avatar : '../../static/imgs/default_myHead.png'" mode="aspectFill"></image>
|
||
<image v-if="identity.order != '1'" class="user-ancrown" src="@/static/icons/ancrown.png" mode=""></image>
|
||
</view>
|
||
<view class="user-text">
|
||
<view class="user-top">
|
||
<view class="user-name">
|
||
{{nickName}}
|
||
</view>
|
||
<view class="user-icon">
|
||
<image v-if="userData.is_partner" src="@/static/icons/userIcon_01.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<image v-if="identity.order == '2'" class="user-identity" src="@/static/icons/member_02.png" mode="widthFix"></image>
|
||
<image v-else-if="identity.order == '3'" class="user-identity" src="@/static/icons/member_03.png" mode="widthFix"></image>
|
||
<image v-else-if="identity.order == '4'" class="user-identity" src="@/static/icons/member_04.png" mode="widthFix"></image>
|
||
<image v-else class="user-identity" src="@/static/icons/member_01.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="user-cont" v-else @click="$Router.push({name: 'Login'})">
|
||
<image class="user-head" src="@/static/imgs/default_myHead.png"></image>
|
||
<view class="user-text">
|
||
<view class="not-sign">
|
||
请先登录
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="user-member" :class="{active : startedAt == ''}">
|
||
<view class="member-cont" @click="memberTab">
|
||
<view class="member-name">
|
||
<image src="@/static/icons/memberIcon.png"></image>
|
||
<view class="member-tips" v-if="userLogin">
|
||
<text class="tips-name">{{identity.name}}</text>
|
||
<text class="tips-text">锶享{{identity.name}}</text>
|
||
</view>
|
||
<view class="member-tips" v-else>
|
||
<text class="tips-name">开通会员</text>
|
||
<text class="tips-text">开通锶享会员</text>
|
||
</view>
|
||
</view>
|
||
<view class="member-btn" @click.stop="judge('UserTips')">
|
||
<text v-if="!userLogin">立即登录</text>
|
||
<text v-else-if="identity.order == '1'">立即开通</text>
|
||
<text v-else>查看权益</text>
|
||
</view>
|
||
<view class="member-see" v-if="startedAt != ''">
|
||
<view class="member-number">
|
||
{{identityShow.times.serial}}
|
||
</view>
|
||
<view class="member-date">
|
||
有效期： {{identityShow.times.ended_at}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
<!-- :class="{active : startedAt == ''}" -->
|
||
<view class="region active">
|
||
<!-- 订单 -->
|
||
<view class="orders">
|
||
<view class="order-left" @click="$Router.push({name: 'OrderIndex', params: { listType: '' }})">
|
||
<image class="order-line" src="@/static/icons/order_line.png"></image>
|
||
<image src="@/static/icons/order_01.png" mode="widthFix"></image>
|
||
<view class="text-text">全部订单</view>
|
||
<!-- <view class="text-number" v-if="caseOrder.all">{{ caseOrder.all }}</view> -->
|
||
</view>
|
||
<view class="order-right">
|
||
<view class="order-item" @click="$Router.push({name: 'OrderIndex', params: { listType: 'unpay' }})">
|
||
<image src="@/static/icons/order_04.png" mode="widthFix"></image>
|
||
<view class="text-text">待支付</view>
|
||
<view class="text-number" v-if="caseOrder.unpay">{{ caseOrder.unpay }}</view>
|
||
</view>
|
||
<view class="order-item" @click="$Router.push({name: 'OrderIndex', params: { listType: 'paid' }})">
|
||
<image src="@/static/icons/order_02.png" mode="widthFix"></image>
|
||
<view class="text-text">待发货</view>
|
||
<view class="text-number" v-if="caseOrder.paid">{{ caseOrder.paid }}</view>
|
||
</view>
|
||
<view class="order-item" @click="$Router.push({name: 'OrderIndex', params: { listType: 'delivered' }})">
|
||
<image src="@/static/icons/order_03.png" mode="widthFix"></image>
|
||
<view class="text-text">已发货</view>
|
||
<view class="text-number" v-if="caseOrder.delivered">{{ caseOrder.delivered }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 操作按钮 -->
|
||
<view class="tools">
|
||
<view class="title">常用功能</view>
|
||
<view class="tools-label">
|
||
<view class="tools-item" @click="$Router.push({name: 'UserCode'})">
|
||
<image src="@/static/icons/toolIcon_04.png" mode="widthFix"></image>
|
||
<view class="tools-name">邀请码</view>
|
||
</view>
|
||
<!-- <view class="tools-item" @click="$Router.push({name: 'UserCensus'})">
|
||
<image src="@/static/icons/toolIcon_14.png" mode="widthFix"></image>
|
||
<view class="tools-name">统计数据</view>
|
||
</view> -->
|
||
<view class="tools-item" @click="$Router.push({name: 'Friend'})">
|
||
<image src="@/static/icons/toolIcon_05.png" mode="widthFix"></image>
|
||
<view class="tools-name">我的推荐</view>
|
||
</view>
|
||
<view class="tools-item" @click="$Router.push({name: 'UserProduct'})">
|
||
<image src="@/static/icons/toolIcon_10.png" mode="widthFix"></image>
|
||
<view class="tools-name">锶源昆仑</view>
|
||
</view>
|
||
<view class="tools-item" @click="outLogin">
|
||
<image src="@/static/icons/toolIcon_12.png" mode="widthFix"></image>
|
||
<view class="tools-name">退出登录</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bottom-tips">
|
||
锶源昆仑天然饮用水<text>-</text>昆仑山古海冰泉
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { userIndex, setting } from '@/apis/interfaces/user'
|
||
import { uploads } from '@/apis/interfaces/uploading'
|
||
import { openSee } from '@/apis/interfaces/member'
|
||
import { authFollow } from '@/apis/interfaces/authUrl'
|
||
export default {
|
||
data() {
|
||
return {
|
||
popStatus : false, //流程判断弹出层状态
|
||
userData : '', //用户信息
|
||
identity : '', //用户身份
|
||
identityShow: '',
|
||
userLogin : '', //登录状态
|
||
avatar : '', //头像
|
||
nickName : '', //昵称
|
||
sign : '', //喝水打卡
|
||
nowStatus : '', //判断状态
|
||
identityData: '', //会员身份信息
|
||
caseOrder : '', //订单
|
||
account : '', //账户
|
||
inviteCount : '', //激活码
|
||
nameState : false,
|
||
memberType : false,
|
||
waterState : false, //水滴状态
|
||
startedAt : '', //有效期
|
||
serviceMobile: ''
|
||
};
|
||
},
|
||
onShow() {
|
||
// 存储环境-会员中心
|
||
getApp().globalData.envType = 'userPage'
|
||
|
||
if(this.$store.getters.getToken) {
|
||
this.userLogin = true
|
||
// 获取用户信息
|
||
this.userInfo();
|
||
|
||
// 获取会员身份信息
|
||
this.identityInfo();
|
||
}
|
||
},
|
||
|
||
methods:{
|
||
// 退出登录
|
||
outLogin(){
|
||
this.$store.commit('setToken', '')
|
||
this.$Router.replaceAll({name: 'Index'})
|
||
},
|
||
|
||
// 参加体验官活动
|
||
joinClick(){
|
||
this.waterState = false
|
||
this.$Router.push({name: 'Index'})
|
||
},
|
||
|
||
// 用户信息
|
||
userInfo() {
|
||
userIndex().then(res => {
|
||
this.userData = res
|
||
this.account = res.account
|
||
this.avatar = res.avatar
|
||
this.nickName = res.nickname
|
||
this.sign = res.sign
|
||
this.identity = res.identity
|
||
this.identityShow = res.identityShow
|
||
this.startedAt = res.identityShow.times.serial
|
||
this.nowStatus = res.nowStatus
|
||
this.caseOrder = res.count.orders
|
||
this.serviceMobile = res.service.mobile
|
||
this.inviteCount = res.invite_count
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
},
|
||
|
||
// 会员身份信息
|
||
identityInfo() {
|
||
openSee().then(res => {
|
||
this.identityData = res.identity
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
},
|
||
|
||
// 流程判断
|
||
judge(name) {
|
||
if(this.$store.getters.getToken) {
|
||
this.$Router.push({name: 'memberIndex'})
|
||
}else {
|
||
// 去登录
|
||
this.$Router.push({name: 'Login'})
|
||
}
|
||
},
|
||
|
||
// 建立档案跳转
|
||
establish() {
|
||
this.popStatus = false
|
||
this.$Router.push({name: 'personalIndex'})
|
||
},
|
||
|
||
// 是否有档案
|
||
reportClick(name) {
|
||
if(this.userData.status.isCase) {
|
||
this.$Router.push({name, params: { caseid: this.caseOrder.case_id }})
|
||
return
|
||
}
|
||
this.popStatus = true
|
||
},
|
||
|
||
// 建立档案
|
||
archives() {
|
||
if(this.$store.getters.getToken) {
|
||
switch (this.nowStatus.value) {
|
||
// 关注公众号
|
||
case 'isSubscribe':
|
||
// 获取微信授权信息
|
||
authFollow({
|
||
url: '/wechat'
|
||
}).then(res => {
|
||
window.location.href = res
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
break;
|
||
// 创建档案
|
||
default:
|
||
this.$Router.push({name: 'Attestation', params: { hasCase: this.userData.status.isCase }})
|
||
break;
|
||
}
|
||
return
|
||
}
|
||
// 去登录
|
||
this.$Router.push({name: 'Login'})
|
||
},
|
||
|
||
// 上传图片
|
||
updImg(){
|
||
uni.chooseImage({
|
||
count : 1,
|
||
success : path => {
|
||
uploads([{
|
||
uri : path.tempFilePaths[0]
|
||
}]).then(res => {
|
||
this.avatar = res.url[0]
|
||
// 上传头像
|
||
this.settingInfo('avatar', res.path[0])
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
// 修改昵称弹出
|
||
nameClick() {
|
||
this.nameState = !this.nameState
|
||
},
|
||
|
||
// 输入昵称
|
||
nameInput(val) {
|
||
this.nickName = val.detail.value
|
||
},
|
||
|
||
// 修改提交
|
||
nameSubmit() {
|
||
// 上传头像
|
||
this.settingInfo('nickname', this.nickName);
|
||
},
|
||
|
||
// 上传用户信息
|
||
settingInfo(key, value) {
|
||
setting(key, {
|
||
value: value
|
||
}).then(res => {
|
||
this.nameState = false
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
|
||
// 展示会员卡
|
||
memberTab(){
|
||
if(this.$store.getters.getToken) {
|
||
if(this.identity.order != 1)this.memberType = !this.memberType
|
||
return
|
||
}
|
||
this.$Router.push({ name: 'uricacidIndex' });
|
||
},
|
||
|
||
// 拨打电话
|
||
phoneCall(){
|
||
uni.makePhoneCall({
|
||
phoneNumber: this.serviceMobile
|
||
});
|
||
},
|
||
|
||
// 查看版本信息
|
||
edition(){
|
||
uni.showToast({
|
||
title: '版本 V1.0.0',
|
||
icon: 'none'
|
||
});
|
||
},
|
||
|
||
// 退出登录
|
||
outLogin() {
|
||
this.$store.commit('setToken', '')
|
||
this.$Router.push({name: 'User'})
|
||
this.userLogin = false
|
||
this.startedAt = ''
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content{
|
||
overflow: hidden;
|
||
background-color: #f5f5f5;
|
||
height: calc(100vh - 94rpx);
|
||
// height: calc(100vh - 98rpx);
|
||
}
|
||
// 用户信息
|
||
.user{
|
||
position: relative;
|
||
height: 420rpx;
|
||
&.active {
|
||
height: 340rpx;
|
||
}
|
||
.user-back {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
.user-cont {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
padding: $padding;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
z-index: 9;
|
||
display: flex;
|
||
height: 188rpx;
|
||
.user-head {
|
||
position: relative;
|
||
width: 110rpx;
|
||
height: 110rpx;
|
||
border-radius: 50%;
|
||
border: 6rpx solid #ffe0a8;
|
||
margin-top: 10rpx;
|
||
box-sizing: border-box;
|
||
.user-avatar {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
.user-ancrown {
|
||
position: absolute;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
right: 0;
|
||
top: -34rpx;
|
||
}
|
||
}
|
||
.user-text {
|
||
height: 120rpx;
|
||
width: calc(100% - 120rpx);
|
||
padding-left: $padding;
|
||
box-sizing: border-box;
|
||
.not-sign {
|
||
background-color: rgba(0,0,0,.4);
|
||
display: inline-block;
|
||
color: #ffffff;
|
||
border-radius: 50rpx;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
padding: 0 40rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
.user-sign {
|
||
height: 68rpx;
|
||
line-height: 68rpx;
|
||
font-size: $title-size + 2;
|
||
border: 2rpx solid #0d224b;
|
||
color: #0d224b;
|
||
display: inline-block;
|
||
padding: 0 $padding;
|
||
border-radius: $radius-m;
|
||
margin-top: $margin + 10;
|
||
}
|
||
.user-top {
|
||
display: flex;
|
||
line-height: 70rpx;
|
||
.user-name {
|
||
color: #ffffff;
|
||
font-size: $title-size + 8;
|
||
padding-right: 10rpx;
|
||
}
|
||
.user-icon{
|
||
& image {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
margin: 14rpx 0 0 8rpx;
|
||
}
|
||
}
|
||
}
|
||
.user-identity {
|
||
margin-top: 5rpx;
|
||
width: 130rpx;
|
||
}
|
||
}
|
||
.user-clock {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50rpx;
|
||
background-color: rgba(0, 0, 0, 0.2);
|
||
color: #ffe8be;
|
||
border: 2rpx solid #989dff;
|
||
border-right: none;
|
||
line-height: 60rpx;
|
||
border-radius: 50rpx 0 0 50rpx;
|
||
padding: 0 15rpx 0 20rpx;
|
||
font-size: $title-size-m;
|
||
display: flex;
|
||
image {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin: 12rpx 5rpx 0 0;
|
||
}
|
||
}
|
||
}
|
||
.account {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 100rpx;
|
||
color: #ffffff;
|
||
display: flex;
|
||
height: 88rpx;
|
||
width: 100%;
|
||
padding: 10rpx 0;
|
||
.account-label {
|
||
flex: 4;
|
||
text-align: center;
|
||
font-size: $title-size-lg;
|
||
.label-number {
|
||
font-size: $title-size + 2;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
.user-member {
|
||
margin: 0 30rpx;
|
||
position: relative;
|
||
width: calc(100% - 60rpx);
|
||
height: 180rpx;
|
||
top: 200rpx;
|
||
left: 0;
|
||
background-image: linear-gradient(to right, #2a3353 , #4e4f7b);
|
||
border-radius: $radius $radius 0 0;
|
||
&.active {
|
||
height: 140rpx;
|
||
}
|
||
.member-back {
|
||
position: absolute;
|
||
height: 100%;
|
||
width: 100%;
|
||
border-radius: $radius $radius 0 0;
|
||
}
|
||
.member-cont {
|
||
height: 100%;
|
||
width: 100%;
|
||
padding: $padding $padding - 10;
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
z-index: 9;
|
||
.member-name {
|
||
font-size: $title-size + 5;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
& image {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
vertical-align: -6rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
.member-tips {
|
||
font-size: $title-size;
|
||
line-height: 54rpx;
|
||
color: #ffeabb;
|
||
.tips-name {
|
||
font-size: $title-size;
|
||
font-weight: 600;
|
||
margin-right: 10rpx;
|
||
position: relative;
|
||
padding-right: 30rpx;
|
||
&::after {
|
||
position: absolute;
|
||
content: '';
|
||
right: 5rpx;
|
||
top: calc(50% - 5rpx);
|
||
width: 10rpx;
|
||
height: 10rpx;
|
||
border-radius: 50%;
|
||
background-color: #ffeabb;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.member-btn {
|
||
position: absolute;
|
||
top: $padding - 2;
|
||
right: $padding - 10;
|
||
background-image: linear-gradient(to right, #ffe8b9 , #ffedd5);
|
||
color: #414571;
|
||
z-index: 11;
|
||
font-size: $title-size-m;
|
||
padding: 0 $padding - 5;
|
||
line-height: 62rpx;
|
||
border-radius: $radius + 30;
|
||
font-weight: 600;
|
||
}
|
||
.tips-see {
|
||
margin-top: 30rpx;
|
||
}
|
||
.member-see {
|
||
width: 100%;
|
||
position: absolute;
|
||
bottom: 38rpx;
|
||
left: 0;
|
||
display: flex;
|
||
padding: 0 $padding;
|
||
box-sizing: border-box;
|
||
line-height: 40rpx;
|
||
color: #ffedd1;
|
||
font-size: $title-size-sm;
|
||
.member-number {
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 内容区域
|
||
.region {
|
||
position: relative;
|
||
z-index: 10;
|
||
top: 100rpx;
|
||
bottom: 0;
|
||
width: 100%;
|
||
transition: .5s;
|
||
margin-top: -164rpx;
|
||
&.active {
|
||
top: 140rpx;
|
||
}
|
||
// &::after {
|
||
// content: '';
|
||
// border: 14rpx solid #3d4167;
|
||
// border-left: 14rpx solid transparent;
|
||
// border-bottom: 14rpx solid transparent;
|
||
// border-top-right-radius: 6rpx;
|
||
// transform: rotate(135deg);
|
||
// position: absolute;
|
||
// top: -14rpx;
|
||
// left: calc(50% - 7rpx);
|
||
// }
|
||
// &.active::after {
|
||
// opacity: 0;
|
||
// transition: .2s;
|
||
// }
|
||
}
|
||
// 账户
|
||
.water {
|
||
background: #ffffff;
|
||
border-radius: $radius * 2;
|
||
padding: $padding 0;
|
||
box-sizing: border-box;
|
||
margin-bottom: $margin;
|
||
.water-title {
|
||
font-weight: 600;
|
||
margin-bottom: $margin;
|
||
padding: 0 $padding;
|
||
box-sizing: border-box
|
||
}
|
||
.water-list {
|
||
display: flex;
|
||
.water-item {
|
||
flex: 3;
|
||
text-align: center;
|
||
.water-number {
|
||
font-size: $title-size + 10;
|
||
position: relative;
|
||
.water-tips {
|
||
position: absolute;
|
||
right: 40rpx;
|
||
top: -5rpx;
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
}
|
||
.water-name {
|
||
font-size: $title-size-m;
|
||
color: #868686;
|
||
margin-top: 5rpx;
|
||
}
|
||
&:nth-child(2) {
|
||
position: relative;
|
||
&::after,
|
||
&::before {
|
||
position: absolute;
|
||
content: '';
|
||
width: 2rpx;
|
||
height: 75%;
|
||
background-color: #e9e9e9;
|
||
top: 15%;
|
||
}
|
||
&::after {
|
||
left: 0;
|
||
}
|
||
&::before {
|
||
right: 0;
|
||
}
|
||
}
|
||
&:last-child {
|
||
color: #f63e39;
|
||
.water-name {
|
||
color: #f63e39;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 订单
|
||
.orders{
|
||
background: #ffffff;
|
||
border-radius: $radius * 2 $radius * 2 0 0;
|
||
padding: $padding + 10 0 $padding;
|
||
box-sizing: border-box;
|
||
margin-bottom: $margin;
|
||
display: flex;
|
||
.order-left {
|
||
width: 25%;
|
||
text-align: center;
|
||
padding: 10rpx 0rpx 10rpx 0;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
image{
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
&:last-child {
|
||
position: relative;
|
||
}
|
||
.text-text{
|
||
font-size: $title-size-m;
|
||
color: $text-color;
|
||
margin-top: 10rpx;
|
||
}
|
||
.order-line {
|
||
width: 20rpx;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
right: -10rpx;
|
||
}
|
||
.text-number {
|
||
position: absolute;
|
||
top: -5rpx;
|
||
left: 60%;
|
||
background-color: #f3ad47;
|
||
color: #FFFFFF;
|
||
border-radius: $radius $radius $radius 0;
|
||
font-size: $title-size-sm - 4;
|
||
padding: 0 8rpx;
|
||
text-align: center;
|
||
line-height: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
.order-right {
|
||
display: flex;
|
||
width: 75%;
|
||
.order-item {
|
||
width: 33.33%;
|
||
text-align: center;
|
||
position: relative;
|
||
padding: 10rpx 0;
|
||
image{
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
&:last-child {
|
||
position: relative;
|
||
}
|
||
.text-text{
|
||
font-size: $title-size-m;
|
||
color: $text-color;
|
||
margin-top: 10rpx;
|
||
}
|
||
.text-number {
|
||
position: absolute;
|
||
top: -5rpx;
|
||
left: 65%;
|
||
background-color: #eb504c;
|
||
color: #FFFFFF;
|
||
border-radius: $radius $radius $radius 0;
|
||
font-size: $title-size-sm - 4;
|
||
padding: 0 8rpx;
|
||
text-align: center;
|
||
line-height: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 操作按钮
|
||
.tools{
|
||
background: white;
|
||
margin-bottom: 30rpx;
|
||
.title {
|
||
font-size: $title-size;
|
||
font-weight: bold;
|
||
color: $text-color;
|
||
line-height: 110rpx;
|
||
padding: 0 $padding;
|
||
}
|
||
.tools-label {
|
||
overflow: hidden;
|
||
}
|
||
.tools-item {
|
||
font-size: $title-size;
|
||
margin: 10rpx 0 $margin + 10;
|
||
color: $text-color;
|
||
width: 25%;
|
||
float: left;
|
||
text-align: center;
|
||
&:last-child{
|
||
border: none;
|
||
}
|
||
.tools-name {
|
||
font-size: $title-size-m;
|
||
margin-top: 5rpx;
|
||
}
|
||
image {
|
||
width: 46rpx;
|
||
height: 46rpx;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
.healthys-label {
|
||
padding: $padding 0;
|
||
.tools-item {
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 弹出
|
||
.nameBack {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba($color: #000000, $alpha: .4);
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 99;
|
||
}
|
||
|
||
.namePop {
|
||
position: fixed;
|
||
left: 100rpx;
|
||
right: 100rpx;
|
||
top: 40%;
|
||
background-color: #FFFFFF;
|
||
z-index: 100;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
padding: 0 30rpx;
|
||
border-radius: 100rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
.namePop-input {
|
||
flex: 1;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
.namePop-btn {
|
||
color: $mian-color;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.nameClose {
|
||
width: 54rpx;
|
||
height: 54rpx;
|
||
position: fixed;
|
||
left: calc(50% - 27rpx);
|
||
top: calc(40% + 140rpx);
|
||
z-index: 101;
|
||
}
|
||
|
||
.bottom-tips {
|
||
width: 100%;
|
||
font-size: $title-size-sm;
|
||
color: $text-gray;
|
||
text-align: center;
|
||
z-index: 1000;
|
||
line-height: 100rpx;
|
||
padding: 20rpx 0;
|
||
clear: both;
|
||
text {
|
||
font-size: $title-size + 6;
|
||
padding: 0 10rpx;
|
||
}
|
||
}
|
||
|
||
// 未开通会员显示
|
||
.noTools {
|
||
overflow: hidden;
|
||
padding: 0 $padding;
|
||
box-sizing: border-box;
|
||
.noTools-item {
|
||
background: white;
|
||
box-shadow: 0 0 5rpx 5rpx rgba($color: $border-color, $alpha: .5);
|
||
border-radius: $radius;
|
||
line-height: 100rpx;
|
||
padding: 0 $padding;
|
||
font-size: $title-size;
|
||
margin-bottom: $margin;
|
||
color: $text-color;
|
||
display: flex;
|
||
&:last-child{
|
||
border: none;
|
||
}
|
||
.noTools-name {
|
||
flex: 1;
|
||
display: flex;
|
||
font-weight: 600;
|
||
image {
|
||
width: 42rpx;
|
||
height: 42rpx;
|
||
margin: 28rpx 20rpx 0 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 弹出层提示
|
||
.publicBack {
|
||
position: fixed;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
left: 0;
|
||
top: 0;
|
||
background-color: rgba(0,0,0,.5);
|
||
z-index: 99;
|
||
}
|
||
.publicPop {
|
||
left: 50%;
|
||
top: 50%;
|
||
width: 440rpx;
|
||
height: 680rpx;
|
||
margin-left: -220rpx;
|
||
margin-top: -340rpx;
|
||
position: fixed;
|
||
z-index: 100;
|
||
.publicPop-cont {
|
||
height: 600rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: $radius;
|
||
padding: $padding;
|
||
box-sizing: border-box;
|
||
.publicPop-img {
|
||
width: 100%;
|
||
}
|
||
.publicPop-text {
|
||
color: $text-gray;
|
||
font-size: $title-size;
|
||
text-align: center;
|
||
text {
|
||
color: #000000;
|
||
font-size: $title-size + 8;
|
||
display: block;
|
||
font-weight: 600;
|
||
margin: 20rpx 0 10rpx;
|
||
}
|
||
}
|
||
.publicPop-btn {
|
||
background-color: #1d37e2;
|
||
border-radius: $radius-m;
|
||
text-align: center;
|
||
line-height: 78rpx;
|
||
color: #FFFFFF;
|
||
margin-top: $margin;
|
||
font-size: $title-size;
|
||
}
|
||
}
|
||
.publicPop-close {
|
||
text-align: center;
|
||
margin-top: 22rpx;
|
||
image {
|
||
width: 58rpx;
|
||
height: 58rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 赠送水滴提示弹出
|
||
.waterBack {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 999;
|
||
background-color: rgba(0,0,0,.4);
|
||
}
|
||
.waterCont {
|
||
position: fixed;
|
||
left: 50%;
|
||
top: 50%;
|
||
width: 500rpx;
|
||
margin-left: -250rpx;
|
||
margin-top: -300rpx;
|
||
text-align: center;
|
||
z-index: 1000;
|
||
background-color: #ffffff;
|
||
border-radius: $radius;
|
||
overflow: hidden;
|
||
.waterCont-name {
|
||
line-height: 90rpx;
|
||
font-weight: 600;
|
||
}
|
||
.waterCont-text {
|
||
border-top: 2rpx solid #ececec;
|
||
border-bottom: 2rpx solid #ececec;
|
||
text-align: justify;
|
||
padding: $padding - 10 $padding;
|
||
box-sizing: border-box;
|
||
line-height: 44rpx;
|
||
color: #484848;
|
||
font-size: $title-size-lg;
|
||
}
|
||
.waterCont-btn {
|
||
line-height: 90rpx;
|
||
display: flex;
|
||
.waterCont-label {
|
||
flex: 2;
|
||
text-align: center;
|
||
&:last-child {
|
||
border-left: 2rpx solid #ececec;
|
||
color: #f63e39;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|