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.
284 lines
6.6 KiB
284 lines
6.6 KiB
<template>
|
|
<view class="content">
|
|
<view class="nav">
|
|
<view :style="{height:h+'px'}"></view>
|
|
<view class="navContent">
|
|
<view class="searchBtn">
|
|
<image class="searchIcon" src="../../static/搜索.png"></image>
|
|
</view>
|
|
<text class="title">评级中心</text>
|
|
<view style="flex: 1;"></view>
|
|
</view>
|
|
</view>
|
|
<view class="splitLine"></view>
|
|
<view class="headContent" @click="toSettings">
|
|
<view class="avatarPanle">
|
|
<view class="avatarContent">
|
|
<u-avatar size="56" :src="src"></u-avatar>
|
|
<u-badge class="badge" :absolute="true" numberType="overflow" :offset="[1,-10]" max="99" :value="value"></u-badge>
|
|
</view>
|
|
</view>
|
|
<view class="namePanel">
|
|
<text>请先登录</text>
|
|
<image class="nextIcon" src="../../static/下一步.png"></image>
|
|
</view>
|
|
</view>
|
|
<view style="height: 30rpx;background-color: #F6F6F6;"></view>
|
|
<view class="orderPanel">
|
|
<view class="orderPanelTop">
|
|
<view>
|
|
我的订单
|
|
</view>
|
|
<view>
|
|
<view>全部</view>
|
|
<image class="nextIcon" src="../../static/下一步.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="orderItemPanel">
|
|
<view class="orderItem">
|
|
<image class="orderIcon" src="../../static/待确认.png"></image>
|
|
<u-badge class="badge" :absolute="true" numberType="overflow" :offset="[0,0]" max="99" :value="value"></u-badge>
|
|
<text class="orderItemTitel">待确认</text>
|
|
</view>
|
|
<view class="orderItem">
|
|
<image class="orderIcon" src="../../static/评级中.png"></image>
|
|
<u-badge class="badge" :absolute="true" numberType="overflow" :offset="[0,0]" max="99" :value="value"></u-badge>
|
|
<text class="orderItemTitel">评级中</text>
|
|
</view>
|
|
<view class="orderItem">
|
|
<image class="orderIcon" src="../../static/待付款.png"></image>
|
|
<u-badge class="badge" :absolute="true" numberType="overflow" :offset="[0,0]" max="99" :value="value"></u-badge>
|
|
<text class="orderItemTitel">待付款</text>
|
|
</view>
|
|
<view class="orderItem">
|
|
<image class="orderIcon" src="../../static/待收货.png"></image>
|
|
<u-badge class="badge" :absolute="true" numberType="overflow" :offset="[0,0]" max="99" :value="value"></u-badge>
|
|
<text class="orderItemTitel">待收货</text>
|
|
</view>
|
|
</view>
|
|
<view style="height: 30rpx;background-color: #F6F6F6;"></view>
|
|
<view class="servicePanel">
|
|
<view class="serviceTitlePanel" >
|
|
<view>
|
|
<view>快速评级</view>
|
|
<view>7days</view>
|
|
</view>
|
|
<view>
|
|
<view>
|
|
查看详情
|
|
</view>
|
|
<image class="nextIcon" src="../../static/下一步.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="serviceItemPanel">
|
|
<view class="serviceItem serviceItemSelected">
|
|
<image class="serviceItemIcon" src="../../static/全面评级.png"></image>
|
|
<text class="serviceItemTitle">全面评级</text>
|
|
</view>
|
|
<view class="serviceItem serviceItemNormal">
|
|
<image class="serviceItemIcon" src="../../static/全面评级.png"></image>
|
|
<text class="serviceItemTitle">全面评级</text>
|
|
</view>
|
|
</view>
|
|
<view class="serviceItemPanel">
|
|
<view class="serviceItem serviceItemNormal">
|
|
<image class="serviceItemIcon" src="../../static/全面评级.png"></image>
|
|
<text class="serviceItemTitle">全面评级</text>
|
|
</view>
|
|
<view class="serviceItem serviceItemNormal">
|
|
<image class="serviceItemIcon" src="../../static/全面评级.png"></image>
|
|
<text class="serviceItemTitle">全面评级</text>
|
|
</view>
|
|
</view>
|
|
<view class="agreetPanel">
|
|
<view class="agreetTop">
|
|
<image class="checkBtn" src="../../static/勾选.png"></image>
|
|
<text>阅读并同意</text>
|
|
<text>《相关协议》</text>
|
|
</view>
|
|
<view class="serviceNextBtn">
|
|
<text>下一步</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class=""></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
title: 'Hello',
|
|
h:0,
|
|
src:"https://cdn.uviewui.com/uview/album/1.jpg",
|
|
value:888,
|
|
type:"warning"
|
|
}
|
|
},
|
|
onLoad() {
|
|
let sysInfo = uni.getSystemInfoSync()
|
|
console.log(sysInfo)
|
|
this.h = sysInfo.statusBarHeight
|
|
},
|
|
onShow(){
|
|
// let sysInfo = uni.getStorageInfoSync()
|
|
// console.log(sysInfo)
|
|
// this.h = sysInfo.statusBarHeight
|
|
},
|
|
methods: {
|
|
toSettings(){
|
|
uni.navigateTo({
|
|
url:"../settings/settings"
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.nav{
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: white;
|
|
}
|
|
.navContent{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
height: 44px;
|
|
align-items: center;
|
|
}
|
|
|
|
.searchIcon{
|
|
width: 38rpx;
|
|
height: 36rpx;
|
|
margin-left: 34rpx;
|
|
}
|
|
.searchBtn{
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
}
|
|
.title{
|
|
text-align: center;
|
|
color: #333333;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
flex: 1;
|
|
}
|
|
.headContent{
|
|
height: 258rpx;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
|
|
}
|
|
.avatarPanle{
|
|
margin-top: 40rpx;
|
|
|
|
}
|
|
.avatarContent{
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
.badge{
|
|
background-color: #EA2B2B;
|
|
}
|
|
.nextIcon{
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
.namePanel{
|
|
margin-top: 20rpx;
|
|
font-size: 34rpx;
|
|
}
|
|
.orderIcon{
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
.orderPanel{
|
|
margin-top: 30rpx;
|
|
flex-direction: column;
|
|
}
|
|
.orderItem{
|
|
flex-direction: column;
|
|
position: relative;
|
|
align-items: center;
|
|
}
|
|
.orderItemPanel{
|
|
justify-content: space-around;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
.orderPanelTop{
|
|
justify-content: space-between;
|
|
margin-left: 32rpx;
|
|
margin-right: 32rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
.orderItemTitel{
|
|
margin-top: 12rpx;
|
|
font-size: 28rpx;
|
|
color: #555555;
|
|
}
|
|
.serviceItem{
|
|
width: 332rpx;
|
|
height: 160rpx;
|
|
border-radius: 6rpx;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
}
|
|
.serviceItemSelected{
|
|
border: #E7A23F 2rpx solid;
|
|
}
|
|
.serviceItemNormal{
|
|
border: #c3c3c3 2rpx solid;
|
|
}
|
|
.serviceItemIcon{
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
margin-bottom: 14rpx;
|
|
}
|
|
.servicePanel{
|
|
flex-direction: column;
|
|
}
|
|
.serviceItemPanel{
|
|
justify-content: space-around;
|
|
margin-top: 20rpx;
|
|
|
|
}
|
|
.serviceTitlePanel{
|
|
justify-content: space-between;
|
|
}
|
|
.checkBtn{
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
margin-right: 14rpx;
|
|
}
|
|
.agreetPanel{
|
|
flex-direction: column;
|
|
}
|
|
.agreetTop{
|
|
margin-left: 32rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
.serviceNextBtn{
|
|
margin-top: 20rpx;
|
|
height: 96rpx;
|
|
background-color: #E7A23F;
|
|
color: white;
|
|
margin-left: 32rpx;
|
|
margin-right: 32rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
</style>
|