<template>
|
<view class="index">
|
<view class="index-c">
|
<view :style="{ width: '100%', height: statusbarHeight + 'px' }"></view>
|
<view class="index-c-title" :style="{ height: navHeight + 'px' }">
|
<text class="index-c-title-logo">我的</text>
|
</view>
|
<view class="info">
|
<view class="info-box">
|
<view class="info-box-head">
|
<view class="info-box-head-image">
|
<image src="/static/logo.png" mode="widthFix"></image>
|
</view>
|
<view class="info-box-head-info">
|
<view class="info-box-head-info-name">杨婷瑞</view>
|
<view class="info-box-head-info-type">
|
<view class="info-box-head-info-type-val">用工发布方</view>
|
<view class="info-box-head-info-type-wz">切换</view>
|
</view>
|
</view>
|
</view>
|
<view class="info-box-label">账户余额</view>
|
<view class="info-box-price">
|
<text>¥1000.00</text>
|
<view class="info-box-price-btn" @click="jumpTX">去提现</view>
|
</view>
|
</view>
|
</view>
|
<view class="statistics">
|
<view class="statistics-box">
|
<view class="statistics-item">
|
<text>248</text>
|
<text>总发单数</text>
|
</view>
|
<view class="statistics-x"></view>
|
<view class="statistics-item">
|
<text>1</text>
|
<text>待接单</text>
|
</view>
|
<view class="statistics-item">
|
<text>2</text>
|
<text>进行中</text>
|
</view>
|
<view class="statistics-item">
|
<text>2</text>
|
<text>待评价</text>
|
</view>
|
</view>
|
</view>
|
<view class="guanggao">
|
<view class="guanggao-image">
|
<image src="/static/image/share@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
<view class="paidan">
|
<view class="paidan-box">
|
<view class="paidan-label">接受系统自动派单</view>
|
<view class="paidan-right">
|
<text>关闭</text>
|
<u-switch activeColor="#00BC12" v-model="value"></u-switch>
|
</view>
|
</view>
|
</view>
|
<view class="list">
|
<view class="list-hz">
|
<view class="list-hz-item">
|
<text>服务介绍</text>
|
<u-icon name="arrow-right" color="#111111" size="18"></u-icon>
|
</view>
|
<view class="list-hz-item">
|
<text>收费标准</text>
|
<u-icon name="arrow-right" color="#111111" size="18"></u-icon>
|
</view>
|
<view class="list-hz-item">
|
<text>工人赚钱</text>
|
<view class="list-hz-item-r">
|
<text>可接用工订单</text>
|
<u-icon name="arrow-right" color="#111111" size="18"></u-icon>
|
</view>
|
</view>
|
<view class="list-hz-item">
|
<text>司机赚钱</text>
|
<view class="list-hz-item-r">
|
<text>可接用工订单</text>
|
<u-icon name="arrow-right" color="#111111" size="18"></u-icon>
|
</view>
|
</view>
|
<view class="list-hz-item">
|
<text>我能供餐</text>
|
<view class="list-hz-item-r">
|
<text>可接用工订单</text>
|
<u-icon name="arrow-right" color="#111111" size="18"></u-icon>
|
</view>
|
</view>
|
<view class="list-hz-item">
|
<text>关于我们</text>
|
<u-icon name="arrow-right" color="#111111" size="18"></u-icon>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
export default {
|
computed: {
|
...mapState(['navHeight', 'statusbarHeight'])
|
},
|
data() {
|
return {
|
value: false
|
}
|
},
|
methods: {
|
jumpTX() {
|
uni.navigateTo({
|
url: '/pages/withdrawal/withdrawal'
|
})
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page {
|
background: #F7F7F7;
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.index {
|
width: 100%;
|
.index-c {
|
width: 100%;
|
height: 520rpx;
|
background: linear-gradient(#00BC12 0%, #00BC12 83%, #ffffff 100%);
|
.list {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
.list-hz {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
background: #FFFFFF;
|
border-radius: 20rpx;
|
overflow: hidden;
|
.list-hz-item {
|
width: 100%;
|
height: 102rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: 1rpx solid #E5E5E5;
|
.list-hz-item-r {
|
display: flex;
|
align-items: center;
|
text {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #00BC12;
|
margin-right: 20rpx;
|
}
|
}
|
}
|
}
|
}
|
.paidan {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
margin-bottom: 20rpx;
|
.paidan-box {
|
width: 100%;
|
height: 100rpx;
|
background: #FFFFFF;
|
border-radius: 20rpx;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.paidan-label {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
.paidan-right {
|
display: flex;
|
align-items: center;
|
text {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #888888;
|
margin-right: 20rpx;
|
}
|
}
|
}
|
}
|
.guanggao {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
margin-bottom: 20rpx;
|
.guanggao-image {
|
width: 100%;
|
height: 140rpx;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
.statistics {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
margin-bottom: 20rpx;
|
.statistics-box {
|
width: 100%;
|
height: 168rpx;
|
background: #FFFFFF;
|
border-radius: 20rpx;
|
display: flex;
|
align-items: center;
|
.statistics-x {
|
width: 1rpx;
|
height: 100rpx;
|
border-right: 1rpx dashed #E5E5E5;
|
}
|
.statistics-item {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
text {
|
&:nth-child(1) {
|
font-weight: 600;
|
font-size: 36rpx;
|
color: #222222;
|
}
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #888888;
|
margin-top: 18rpx;
|
}
|
}
|
}
|
}
|
}
|
.info {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
.info-box {
|
width: 100%;
|
height: 336rpx;
|
padding: 40rpx;
|
box-sizing: border-box;
|
background: #FFFFFF;
|
border-radius: 20rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.info-box-price {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
text {
|
font-weight: 600;
|
font-size: 48rpx;
|
color: #222222;
|
}
|
.info-box-price-btn {
|
width: 148rpx;
|
height: 60rpx;
|
line-height: 60rpx;
|
text-align: center;
|
background: #00BC12;
|
border-radius: 30rpx;
|
font-weight: 500;
|
font-size: 28rpx;
|
color: #FFFFFF;
|
}
|
}
|
.info-box-label {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #888888;
|
margin-bottom: 16rpx;
|
}
|
.info-box-head {
|
width: 100%;
|
height: 108rpx;
|
display: flex;
|
align-items: center;
|
margin-bottom: 30rpx;
|
.info-box-head-image {
|
width: 108rpx;
|
height: 100%;
|
flex-shrink: 0;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
margin-right: 24rpx;
|
image {
|
width: 100%;
|
}
|
}
|
.info-box-head-info {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.info-box-head-info-name {
|
font-weight: 600;
|
font-size: 36rpx;
|
color: #222222;
|
}
|
.info-box-head-info-type {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
.info-box-head-info-type-val {
|
width: 144rpx;
|
height: 42rpx;
|
line-height: 42rpx;
|
text-align: center;
|
background: rgba(253,158,36,0.06);
|
border-radius: 8rpx;
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #FF7200;
|
border: 2rpx solid #FD9E24;
|
margin-right: 20rpx;
|
}
|
.info-box-head-info-type-wz {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #999999;
|
}
|
}
|
}
|
}
|
}
|
|
}
|
.index-c-title {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
.index-c-title-logo {
|
font-weight: bold;
|
font-size: 36rpx;
|
color: #FFFFFF;
|
}
|
.dingwei {
|
width: 36rpx;
|
height: 36rpx;
|
margin-right: 8rpx;
|
}
|
.qu {
|
width: 22rpx;
|
height: 22rpx;
|
}
|
}
|
}
|
}
|
</style>
|
