You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
508 lines
10 KiB
508 lines
10 KiB
<template>
|
|
<view class="container">
|
|
<!-- 头部 -->
|
|
<view class="headzone">
|
|
<!-- 头像 -->
|
|
<view class="avtarzone">
|
|
<view class="avatar-bg">
|
|
<image class="avatar" mode="aspectFit" src="../static/tx.svg"></image>
|
|
</view>
|
|
</view>
|
|
<!-- 用户信息 -->
|
|
<view class="ubinfo">
|
|
<view class="ubi-uname">用户名</view>
|
|
<view class="ubi-verify">
|
|
<view class="mbtxt">手机号：13812345678</view>
|
|
<view class="mbstatus verify" v-if="hasverify">认证</view>
|
|
<view class="mbstatus unverfiy" v-else>未认证</view>
|
|
</view>
|
|
</view>
|
|
<!-- 服务状态 -->
|
|
<view class="devinfo">
|
|
<view class="dev-txt" :class="hasverify?'verify':'unverfiy'">有效期： 0个月</view>
|
|
<view class="dev-txt" :class="hasverify?'verify':'unverfiy'">设备数： 0台</view>
|
|
</view>
|
|
</view>
|
|
<!-- 交易中心的快速连接 -->
|
|
<view class="gtcenter">
|
|
<view class="gttxt">全国文化大数据交易中心</view>
|
|
<view class="gtlinks">快速跳转</view>
|
|
</view>
|
|
|
|
<!-- 服务内容 -->
|
|
<view class="fwnr">
|
|
<!-- // first -->
|
|
<view class="fw-one">
|
|
<view class="fwo-item">
|
|
<view class="fwulb">
|
|
<text class="fwname">订购服务</text>
|
|
<text class="fwnote">服务开通/续费</text>
|
|
</view>
|
|
<image class="fwubg" src="../static/dgfw.svg"></image>
|
|
</view>
|
|
<view class="fwo-item">
|
|
<view class="fwulb">
|
|
<text class="fwname">入网信息</text>
|
|
<text class="fwnote">信息登记/修改</text>
|
|
</view>
|
|
<image class="fwubg" src="../static/rwxx.svg"></image>
|
|
</view>
|
|
</view>
|
|
<!-- 我的订单 -->
|
|
<view class="my-service">
|
|
<view class="service-title">我的订单</view>
|
|
<view class="service-content clearfix">
|
|
<block>
|
|
<view class="service-item">
|
|
<view class="item-icon">
|
|
<image class="icon-img" src="../static/m_dzf.svg"></image>
|
|
</view>
|
|
<view class="item-name">待支付</view>
|
|
</view>
|
|
</block>
|
|
<block>
|
|
<view class="service-item">
|
|
<view class="item-icon">
|
|
<image class="icon-img" src="../static/m_dsh.svg"></image>
|
|
</view>
|
|
<view class="item-name">待审核</view>
|
|
</view>
|
|
</block>
|
|
<block>
|
|
<view class="service-item">
|
|
<view class="item-icon">
|
|
<image class="icon-img" src="../static/m_ywc.svg"></image>
|
|
</view>
|
|
<view class="item-name">已完成</view>
|
|
</view>
|
|
</block>
|
|
<block>
|
|
<view class="service-item">
|
|
<view class="item-icon">
|
|
<image class="icon-img" src="../static/m_qbdd.svg"></image>
|
|
</view>
|
|
<view class="item-name">全部订单</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<!-- 其他工具 -->
|
|
<view class="othtools">
|
|
<view class="service-title">其他工具</view>
|
|
<view class="service-content clearfix">
|
|
<!-- 生效记录 -->
|
|
<block>
|
|
<view class="service-item">
|
|
<view class="item-icon">
|
|
<image class="icon-img" src="../static/t_sxjl.svg"></image>
|
|
</view>
|
|
<view class="item-name">生效记录</view>
|
|
</view>
|
|
</block>
|
|
<!-- 我的发票 -->
|
|
<block>
|
|
<view class="service-item">
|
|
<view class="item-icon">
|
|
<image class="icon-img" src="../static/t_wdfp.svg"></image>
|
|
</view>
|
|
<view class="item-name">我的发票</view>
|
|
</view>
|
|
</block>
|
|
<!-- 我的设备 -->
|
|
<block>
|
|
<view class="service-item">
|
|
<view class="item-icon">
|
|
<image class="icon-img" src="../static/t_wdsb.svg"></image>
|
|
</view>
|
|
<view class="item-name">我的设备</view>
|
|
</view>
|
|
</block>
|
|
<!-- 检查开关 -->
|
|
<block>
|
|
<view class="service-item">
|
|
<view class="item-icon">
|
|
<image class="icon-img" src="../static/t_jckg.svg"></image>
|
|
</view>
|
|
<view class="item-name">检查开关</view>
|
|
</view>
|
|
</block>
|
|
<!-- 设置密码 -->
|
|
<block>
|
|
<view class="service-item">
|
|
<view class="item-icon">
|
|
<image class="icon-img" src="../static/t_szmm.svg"></image>
|
|
</view>
|
|
<view class="item-name">设置密码</view>
|
|
</view>
|
|
</block>
|
|
<!-- 系统帮助 -->
|
|
<block>
|
|
<view class="service-item">
|
|
<view class="item-icon">
|
|
<image class="icon-img" src="../static/t_xtbz.svg"></image>
|
|
</view>
|
|
<view class="item-name">系统帮助</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- LOGOUT -->
|
|
<!-- 退出登录 -->
|
|
<view v-if="isLogin" class="my-logout">
|
|
<view class="logout-btn" @click="handleLogout()">
|
|
<text>退出登录</text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
//认证标识
|
|
hasverify: false,
|
|
//
|
|
isLogin: true,
|
|
}
|
|
},
|
|
methods: {
|
|
// 退出登录
|
|
handleLogout() {
|
|
const app = this
|
|
uni.showModal({
|
|
title: '友情提示',
|
|
content: '您确定要退出登录吗?',
|
|
success(res) {
|
|
if (res.confirm) {
|
|
store.dispatch('Logout', {})
|
|
.then(result => app.onRefreshPage())
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
position: relative;
|
|
background-color: #F4F4F4;
|
|
}
|
|
|
|
.headzone {
|
|
background-color: #0F476E;
|
|
// height: 460rpx;
|
|
height: 28vh;
|
|
width: 100%;
|
|
padding: 10%;
|
|
// margin-bottom: 22rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
// 黄色的圆
|
|
.avtarzone {
|
|
background-color: #FEBD45;
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
float: left;
|
|
margin: 0 auto;
|
|
|
|
|
|
//白色的圆
|
|
.avatar-bg {
|
|
float: left;
|
|
background-color: #fff;
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 50%;
|
|
margin: 20rpx;
|
|
}
|
|
|
|
.avatar {
|
|
display: inline-block;
|
|
margin: 13rpx;
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
}
|
|
}
|
|
|
|
.ubinfo {
|
|
color: #fff;
|
|
width: 64% !important;
|
|
float: left;
|
|
margin-left: 16rpx;
|
|
|
|
.ubi-uname {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
//用户认证状态
|
|
.ubi-verify {
|
|
margin-top: 20rpx;
|
|
height: 36rpx;
|
|
line-height: 36rpx;
|
|
|
|
.mbtxt {
|
|
display: block;
|
|
float: left;
|
|
width: 74%;
|
|
}
|
|
|
|
.mbstatus {
|
|
display: block;
|
|
float: left;
|
|
width: 26%;
|
|
text-align: center;
|
|
padding: 0 5rpx 0;
|
|
height: 100%;
|
|
line-height: 100%;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.devinfo {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
margin-top: 26rpx;
|
|
height: 48rpx;
|
|
line-height: 42rpx;
|
|
text-align: center;
|
|
color: #efefef;
|
|
|
|
.dev-txt {
|
|
margin-left: 22rpx;
|
|
width: 42%;
|
|
float: left;
|
|
padding-left: 10rpx;
|
|
padding-right: 10rpx;
|
|
}
|
|
|
|
}
|
|
|
|
// 状态类
|
|
.unverfiy {
|
|
background-color: #CECECE;
|
|
border: 1rpx solid #CECECE;
|
|
}
|
|
|
|
.verify {
|
|
background-color: #C6A94D;
|
|
border: 1rpx solid #C6A94D;
|
|
}
|
|
}
|
|
|
|
// 快速连接
|
|
.gtcenter {
|
|
position: absolute;
|
|
top: 400rpx;
|
|
left: 5%;
|
|
width: 90%;
|
|
height: 88rpx;
|
|
background-color: #FEBD45;
|
|
// margin: 0 auto;
|
|
border-radius: 44rpx;
|
|
padding: 0 10rpx 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
border: #034373;
|
|
box-shadow: 1rpx soild #0F476E;
|
|
|
|
.gttxt {
|
|
color: #034373;
|
|
font-size: 40rpx;
|
|
font-weight: 800;
|
|
line-height: 88rpx;
|
|
padding-left: 26rpx;
|
|
}
|
|
|
|
.gtlinks {
|
|
background-color: #F9DE8F;
|
|
height: 48rpx;
|
|
line-height: 46rpx;
|
|
margin-top: 14rpx;
|
|
margin-left: 16rpx;
|
|
padding: 0 20rpx 0 20rpx;
|
|
border-radius: 38%;
|
|
border: #F9DE8F;
|
|
}
|
|
}
|
|
|
|
// 服务内容
|
|
.fwnr {
|
|
margin-top: 60rpx;
|
|
background-color: #f4f4f4;
|
|
min-height: 82vh;
|
|
|
|
//
|
|
.fw-one {
|
|
// height: 96rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 10rpx auto;
|
|
|
|
.fwo-item {
|
|
width: 42%;
|
|
height: 206rpx;
|
|
border-radius: 12%;
|
|
margin-left: 5%;
|
|
background-color: #fff;
|
|
|
|
.fwulb {
|
|
margin-top: 60rpx;
|
|
margin-left: 20rpx;
|
|
height: 60rpx;
|
|
display: block;
|
|
float: left;
|
|
width: 60%;
|
|
|
|
.fwname {
|
|
display: flex;
|
|
font-size: 32rpx;
|
|
color: #034373;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.fwnote {
|
|
font-size: 22rpx;
|
|
}
|
|
}
|
|
|
|
// background image
|
|
.fwubg {
|
|
margin-top: 60rpx;
|
|
width: 102rpx;
|
|
height: 102rpx;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 我的服务
|
|
.my-service {
|
|
margin: 22rpx auto 22rpx auto;
|
|
padding: 22rpx 0;
|
|
width: 94%;
|
|
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
|
border-radius: 20rpx;
|
|
background: #fff;
|
|
|
|
.service-title {
|
|
padding-left: 24rpx;
|
|
margin-bottom: 20rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.service-content {
|
|
margin-bottom: -20rpx;
|
|
|
|
.service-item {
|
|
position: relative;
|
|
width: 25%;
|
|
float: left;
|
|
margin-bottom: 30rpx;
|
|
|
|
.item-icon {
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
padding: 14rpx 0;
|
|
color: #ff3800;
|
|
font-size: 44rpx;
|
|
}
|
|
|
|
.icon-img {
|
|
width: 62rpx;
|
|
height: 62rpx;
|
|
}
|
|
|
|
.item-name {
|
|
font-size: 28rpx;
|
|
color: #545454;
|
|
text-align: center;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
.othtools {
|
|
margin: 22rpx auto 22rpx auto;
|
|
padding: 22rpx 0;
|
|
width: 94%;
|
|
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
|
border-radius: 20rpx;
|
|
background: #fff;
|
|
|
|
.service-title {
|
|
padding-left: 24rpx;
|
|
margin-bottom: 20rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.service-content {
|
|
margin-bottom: -20rpx;
|
|
|
|
.service-item {
|
|
position: relative;
|
|
width: 25%;
|
|
float: left;
|
|
margin-bottom: 30rpx;
|
|
|
|
.item-icon {
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
padding: 14rpx 0;
|
|
color: #ff3800;
|
|
font-size: 44rpx;
|
|
}
|
|
|
|
.icon-img {
|
|
width: 62rpx;
|
|
height: 62rpx;
|
|
}
|
|
|
|
.item-name {
|
|
font-size: 28rpx;
|
|
color: #545454;
|
|
text-align: center;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 退出登录
|
|
.my-logout {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 50rpx;
|
|
|
|
.logout-btn {
|
|
width: 60%;
|
|
margin: 0 auto;
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
background-color: #0F476E;
|
|
border-radius: 20rpx;
|
|
border: 1px solid #dcdcdc;
|
|
padding: 16rpx 0;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|