|
|
@@ -1,25 +1,48 @@
|
|
|
<template>
|
|
|
- <view class="mine-container">
|
|
|
-
|
|
|
- <view class="mine-header">
|
|
|
- <img :src="userInfo.avatar" alt="" style="width: 136rpx;height: 136rpx;">
|
|
|
- <view class="header-info">
|
|
|
- <text class="info-name">{{ userInfo.nickName }}</text>
|
|
|
- <text class="info-id">ID: {{ data.volunteerId }}</text>
|
|
|
- <text class="info-edit" @click="handLsetTing" v-if="userType == 1">设置> </text>
|
|
|
+ <view class="mine-container" :style="{ height: `${windowHeight}px` }">
|
|
|
+ <view class="mine-top-bgc"></view>
|
|
|
+ <view class="mine-box">
|
|
|
+ <view class="mine-user">
|
|
|
+ <view class="user-name-box">
|
|
|
+ <view class="user-avatar">
|
|
|
+ <up-avatar :src="userInfo.avatar" shape="square"></up-avatar>
|
|
|
+ </view>
|
|
|
+ <view class="user-name">{{ userInfo.nickName }}</view>
|
|
|
+ <view class="grid-box" v-for="(listItem, listIndex) in setTing" :key="listIndex">
|
|
|
+ <!-- <up-badge :isDot="true" type="success" class="item-badge"></up-badge> -->
|
|
|
+ <up-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.iconName" :size="22"
|
|
|
+ @click="handLsetTing"></up-icon>
|
|
|
+ <text class="grid-text">{{ listItem.name }}</text>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <up-divider></up-divider>
|
|
|
+ <view class="service-list">
|
|
|
+ <up-grid :border="false" col="4">
|
|
|
+ <up-grid-item v-for="(listItem, listIndex) in serviceList" :key="listIndex"
|
|
|
+ @click="onClick(listItem)">
|
|
|
+ <view class="grid-box">
|
|
|
+ <!-- <up-badge :isDot="true" type="success" class="item-badge"></up-badge> -->
|
|
|
+ <up-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.iconName"
|
|
|
+ :size="22"></up-icon>
|
|
|
+ <text class="grid-text">{{ listItem.name }}</text>
|
|
|
+ </view>
|
|
|
+ </up-grid-item>
|
|
|
+ </up-grid>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="list-box">
|
|
|
<view class="mine-card price-card" v-if="userType == 2">
|
|
|
<view v-for="(item, index) in priceList" :key="item.key" class="price-item"
|
|
|
- :style="{ alignItems: index === 0 ? 'flex-start' : 'flex-end' }" @click="onClick(item)">
|
|
|
+ :style="{ alignItems: index === 0 ? 'flex-start' : 'flex-end' }">
|
|
|
<view class="price-name flex-center"> {{ item.name }} </view>
|
|
|
<view class="price-data flex-center">
|
|
|
{{ index === 0 ? '¥' : '' }}<up-count-to :startVal="0" :endVal="data[item.key]"
|
|
|
:decimals="item.decimals"></up-count-to>
|
|
|
</view>
|
|
|
- <text class="grid-min-price" v-if="item.key === 'balance'">待入账 ¥{{ data[item.balance] }}</text>
|
|
|
+ <text class="grid-min-price" v-if="item.key === 'balance'">待入账 ¥{{ data[item.key] }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -72,293 +95,281 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { onMounted, ref } from 'vue';
|
|
|
-import {
|
|
|
- onLoad,
|
|
|
- onShow
|
|
|
-} from '@dcloudio/uni-app';
|
|
|
-import store from "@/store"
|
|
|
-import { getVolunteerAccountInfo,volunteerOrderStatistics } from "@/api/mine";
|
|
|
-
|
|
|
-const userInfo = ref({
|
|
|
- avatar: '/static/serverImg/mine/user.png'
|
|
|
-})
|
|
|
-
|
|
|
-const rateValue = ref(3)
|
|
|
-const priceList = [{
|
|
|
- name: '账户余额',
|
|
|
- key: 'balance',
|
|
|
- decimals: 2,
|
|
|
- balance:'orderFrozenBalance',
|
|
|
- page: '/pages_mine/pages/wallet/index'
|
|
|
-},
|
|
|
-{
|
|
|
- name: '订单总数',
|
|
|
- key: 'orderCount',
|
|
|
- decimals: 0
|
|
|
-}
|
|
|
-]
|
|
|
-const orderList = ref([{
|
|
|
- name: '预约单',
|
|
|
- key: 'reservationCount'
|
|
|
-},
|
|
|
-
|
|
|
-{
|
|
|
- name: '进行单',
|
|
|
- key: 'doingCount'
|
|
|
-
|
|
|
-},
|
|
|
-{
|
|
|
- name: '完成单',
|
|
|
- key: 'finishedCount'
|
|
|
-
|
|
|
-},
|
|
|
-{
|
|
|
- name: '取消单',
|
|
|
- key: 'cancelCount'
|
|
|
-
|
|
|
-}
|
|
|
-]);
|
|
|
-const data = ref({
|
|
|
- balance: 0.0,
|
|
|
- reservationCount: 0,
|
|
|
- doingCount:0,
|
|
|
- finishedCount:0,
|
|
|
- cancelCount:0,
|
|
|
- orderCount:0,
|
|
|
-});
|
|
|
-
|
|
|
-const userType = uni.getStorageSync('userType') //读取本地存储
|
|
|
-
|
|
|
-const adminList = ref(
|
|
|
- [
|
|
|
- // {
|
|
|
- // name: '待服务',
|
|
|
- // iconName: '/static/serverImg/mine/icon1.png',
|
|
|
- // page: '/pages/classify',
|
|
|
- // value: 1
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: '进行中',
|
|
|
- // iconName: '/static/serverImg/mine/icon2.png',
|
|
|
- // page: '/pages/classify',
|
|
|
- // value: 2
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: '已完成',
|
|
|
- // iconName: '/static/serverImg/mine/icon3.png',
|
|
|
- // page: '/pages/classify',
|
|
|
- // value: 3
|
|
|
- // },
|
|
|
- {
|
|
|
- name: '差评申述',
|
|
|
- iconName: '/static/serverImg/mine/icon4.png',
|
|
|
- page: '/pages_mine/pages/bad/index'
|
|
|
- },
|
|
|
- // {
|
|
|
- // name: '钱包',
|
|
|
- // iconName: '/static/serverImg/mine/icon5.png',
|
|
|
- // page: '/pages_mine/pages/wallet/index'
|
|
|
- // },
|
|
|
- {
|
|
|
- name: '帮助与客服',
|
|
|
- iconName: '/static/serverImg/mine/icon6.png',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '用户端',
|
|
|
- iconName: '/static/serverImg/mine/icon6.png',
|
|
|
- },
|
|
|
+ import {
|
|
|
+ onMounted,
|
|
|
+ ref
|
|
|
+ } from 'vue';
|
|
|
+ import {
|
|
|
+ getVolunteerAccount
|
|
|
+ } from '@/api/volunteer.js'
|
|
|
+ import {
|
|
|
+ onLoad,
|
|
|
+ onShow
|
|
|
+ } from '@dcloudio/uni-app';
|
|
|
+ import store from "@/store"
|
|
|
+ const userType = uni.getStorageSync('userType') //读取本地存储
|
|
|
+
|
|
|
+ // 用户/志愿者 识别标识
|
|
|
+ const userOrWorker = uni.getStorageSync('storage_data').vuex_userOrWorker //读取本地存储
|
|
|
+
|
|
|
+ const userInfo = ref({});
|
|
|
+
|
|
|
+ const setTing = ref(
|
|
|
+ [{
|
|
|
+ iconName: 'setting-fill',
|
|
|
+ value: 1,
|
|
|
+ }, ]);
|
|
|
+
|
|
|
+ const serviceList = ref(
|
|
|
+ [{
|
|
|
+ name: '待服务',
|
|
|
+ iconName: 'clock',
|
|
|
+ page: '/pages/classify',
|
|
|
+ value: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '进行中',
|
|
|
+ iconName: 'car',
|
|
|
+ page: '/pages/classify',
|
|
|
+ value: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '已完成',
|
|
|
+ iconName: 'car-fill',
|
|
|
+ page: '/pages/classify',
|
|
|
+ value: 3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '差评申述',
|
|
|
+ iconName: 'edit-pen',
|
|
|
+ page: '/pages_mine/pages/bad/index'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '钱包',
|
|
|
+ iconName: 'rmb-circle',
|
|
|
+ page: '/pages_mine/pages/wallet/index'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '帮助与客服',
|
|
|
+ iconName: 'kefu-ermai',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '服务地址',
|
|
|
+ iconName: 'map',
|
|
|
+ page: '/pages_mine/pages/serviceInforMation/index'
|
|
|
+ },
|
|
|
+ ]);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ const serviceList2 = ref([{
|
|
|
+ name: '待服务',
|
|
|
+ iconName: 'clock',
|
|
|
+ page: '/pages/classify',
|
|
|
+ value: 1
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ name: '进行中',
|
|
|
+ iconName: 'car',
|
|
|
+ page: '/pages/classify',
|
|
|
+ value: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '已完成',
|
|
|
+ iconName: 'car-fill',
|
|
|
+ page: '/pages/classify',
|
|
|
+ value: 3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '评论',
|
|
|
+ iconName: 'edit-pen',
|
|
|
+ // page: '/pages/myCenter/bad'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '钱包',
|
|
|
+ iconName: 'rmb-circle',
|
|
|
+ page: '/pages_mine/pages/wallet/index'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '帮助与客服',
|
|
|
+ iconName: 'kefu-ermai',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '浏览记录',
|
|
|
+ iconName: 'eye',
|
|
|
+ page: '/pages_mine/pages/wallet/index'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '收藏',
|
|
|
+ iconName: 'star',
|
|
|
+ },
|
|
|
]);
|
|
|
-const userList = ref(
|
|
|
- [{
|
|
|
- name: '待服务',
|
|
|
- iconName: 'clock',
|
|
|
- page: '/pages/classify',
|
|
|
- value: 1
|
|
|
- },
|
|
|
- {
|
|
|
- name: '进行中',
|
|
|
- iconName: 'car',
|
|
|
- page: '/pages/classify',
|
|
|
- value: 2
|
|
|
- },
|
|
|
- {
|
|
|
- name: '已完成',
|
|
|
- iconName: 'car-fill',
|
|
|
- page: '/pages/classify',
|
|
|
- value: 3
|
|
|
- },
|
|
|
- {
|
|
|
- name: '评论',
|
|
|
- iconName: 'edit-pen',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '钱包',
|
|
|
- iconName: 'rmb-circle',
|
|
|
- page: '/pages_mine/pages/wallet/index'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '浏览记录',
|
|
|
- iconName: 'eye',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '收藏',
|
|
|
- iconName: 'star',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '帮助与客服',
|
|
|
- iconName: 'kefu-ermai',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '地址',
|
|
|
- iconName: 'kefu-ermai',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '志愿者',
|
|
|
- iconName: 'kefu-ermai',
|
|
|
- },
|
|
|
+
|
|
|
+ const priceList = [{
|
|
|
+ name: '余额',
|
|
|
+ key: 'balance',
|
|
|
+ decimals: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '订单总数',
|
|
|
+ key: 'orderCount',
|
|
|
+ decimals: 0
|
|
|
+ }
|
|
|
+ ]
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ const orderList = ref([{
|
|
|
+ name: '预约单',
|
|
|
+ key: 'orderCount'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ name: '进行单',
|
|
|
+ key: 'orderCount'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '完成单',
|
|
|
+ key: 'orderCount'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '取消单',
|
|
|
+ key: 'orderCount'
|
|
|
+
|
|
|
+ }
|
|
|
]);
|
|
|
|
|
|
+ const avatarSrc = ref('/static/my/客服.png');
|
|
|
+ const data = ref({
|
|
|
+ balance: 0.0,
|
|
|
+ orderCount: 0,
|
|
|
+ });
|
|
|
+ const rateValue = ref(3);
|
|
|
+ const onClick = (record) => {
|
|
|
+ console.log('record', record, record.page);
|
|
|
+ if (record.page && record.value) {
|
|
|
+ const app = getApp();
|
|
|
+ app.globalData.switchTabParams = {
|
|
|
+ tabKey: record.value
|
|
|
+ };
|
|
|
+ // JS跳转
|
|
|
+ uni.switchTab({
|
|
|
+ url: record.page
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (record.page) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: record.page
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
-const onClick = (record) => {
|
|
|
- console.log('record', record, record.page);
|
|
|
- if(record.page){
|
|
|
- uni.navigateTo({
|
|
|
- url: record.page
|
|
|
- })
|
|
|
+ onMounted(getDetails)
|
|
|
}
|
|
|
- // if (record.page && record.value) {
|
|
|
- // const app = getApp();
|
|
|
- // app.globalData.switchTabParams = {
|
|
|
- // tabKey: record.value
|
|
|
- // };
|
|
|
- // // JS跳转
|
|
|
- // uni.switchTab({
|
|
|
- // url: record.page
|
|
|
- // });
|
|
|
- // return;
|
|
|
- // }
|
|
|
-}
|
|
|
|
|
|
+ const getDetails = async () => {
|
|
|
+ try {
|
|
|
+ // const res = await getVolunteerAccount();
|
|
|
+ // console.log('res',res);
|
|
|
|
|
|
+ } catch (error) {
|
|
|
+ console.log('error', error);
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-const getDetails = async () => {
|
|
|
- try {
|
|
|
- // const res = await getVolunteerAccount();
|
|
|
- // console.log('res',res);
|
|
|
|
|
|
- } catch (error) {
|
|
|
- console.log('error', error);
|
|
|
|
|
|
+ const geUserInfo = () => {
|
|
|
+ console.log(store.state, '>>>>99');
|
|
|
+ userInfo.value = store.state.user
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-const handLsetTing = () => {
|
|
|
+ // 设置
|
|
|
+ const handLsetTing = () => {
|
|
|
console.log('123')
|
|
|
uni.navigateTo({
|
|
|
url: '/pages_mine/pages/setupUser/index'
|
|
|
})
|
|
|
}
|
|
|
+ onShow(() => {
|
|
|
+ geUserInfo();
|
|
|
|
|
|
+ })
|
|
|
+</script>
|
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .mine-card {
|
|
|
+ border-radius: 8px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ padding: 12px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
|
|
|
-const geUserInfo = () => {
|
|
|
- console.log(store.state, '>>>>99');
|
|
|
- // userInfo.value = store.state.user
|
|
|
- store.dispatch('GetInfo').then((res) => {
|
|
|
- userInfo.value = store.state.user
|
|
|
- console.log(store.state.user, '>>>>99');
|
|
|
-
|
|
|
-
|
|
|
+ .mine-container {
|
|
|
+ position: fixed;
|
|
|
+ top: 0px;
|
|
|
+ left: 0px;
|
|
|
+ right: 0px;
|
|
|
+ bottom: 0px;
|
|
|
+ background: rgba(245, 245, 245, 1);
|
|
|
+
|
|
|
+ .mine-top-bgc {
|
|
|
+ height: 120px;
|
|
|
+ background: linear-gradient(180deg, rgba(255, 219, 171, 1) 0%, rgba(242, 151, 99, 1) 100%);
|
|
|
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-onShow(() => {
|
|
|
- geUserInfo();
|
|
|
- init();
|
|
|
-})
|
|
|
-
|
|
|
-const init = async() => {
|
|
|
- try {
|
|
|
- uni.showLoading({
|
|
|
- title: '数据加载中...'
|
|
|
- });
|
|
|
-
|
|
|
- if(userType === 2){
|
|
|
- const res1 = await getVolunteerAccountInfo();
|
|
|
- const res2 = await volunteerOrderStatistics();
|
|
|
- data.value = {
|
|
|
- ...res1.data,
|
|
|
- ...res2.data
|
|
|
- }
|
|
|
- console.log(11,res1,res2,data.value);
|
|
|
-
|
|
|
}
|
|
|
- } catch (error) {
|
|
|
- console.log('error', error);
|
|
|
- uni.showToast({
|
|
|
- title: error.msg,
|
|
|
- icon: 'error',
|
|
|
- });
|
|
|
- } finally {
|
|
|
- uni.hideLoading();
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
+ .mine-box {
|
|
|
+ position: absolute;
|
|
|
+ top: 40px;
|
|
|
+ left: 12px;
|
|
|
+ right: 12px;
|
|
|
+ bottom: 0px;
|
|
|
+ overflow-y: auto;
|
|
|
|
|
|
-</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
-.mine-container {
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background: rgba(245, 245, 245, 1);
|
|
|
- overflow-y: auto;
|
|
|
-
|
|
|
- .mine-header {
|
|
|
- padding: 42rpx 44rpx;
|
|
|
- background: #fff;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .header-info {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- margin-left: 36rpx;
|
|
|
+ .mine-user {
|
|
|
+ border-radius: 8px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ margin-bottom: 12px;
|
|
|
|
|
|
- .info-name {
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 54rpx;
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- }
|
|
|
+ .user-name-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 12px 12px 0;
|
|
|
|
|
|
- .info-id {
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 400;
|
|
|
- letter-spacing: 0rpx;
|
|
|
- line-height: 42rpx;
|
|
|
- color: rgba(153, 153, 153, 1);
|
|
|
- }
|
|
|
+ .user-avatar {}
|
|
|
|
|
|
- .info-edit {
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 400;
|
|
|
- letter-spacing: 0rpx;
|
|
|
- line-height: 36rpx;
|
|
|
- color: #3366ff;
|
|
|
+ .user-name {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 21.09px;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .service-img {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.list-box {
|
|
|
padding: 16rpx 40rpx;
|
|
|
|
|
|
- .price-card {
|
|
|
+
|
|
|
+ .grid-box {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
@@ -368,25 +379,90 @@ const init = async() => {
|
|
|
align-items: center;
|
|
|
flex-direction: column;
|
|
|
|
|
|
- .price-name {
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 42rpx;
|
|
|
- color: rgba(102, 102, 102, 1);
|
|
|
- }
|
|
|
+ .user-name-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
|
|
|
- .price-data {
|
|
|
- font-size: 48rpx;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 72rpx;
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
+ padding: 12px 12px 0;
|
|
|
+
|
|
|
+ .user-avatar {}
|
|
|
+
|
|
|
+ .user-name {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 21.09px;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .grid-min-price {
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 36rpx;
|
|
|
- color: rgba(153, 153, 153, 1);
|
|
|
+ .service-img {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .service-list {
|
|
|
+ padding-bottom: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid-text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #909399;
|
|
|
+ padding: 10rpx 0 20rpx 0rpx;
|
|
|
+ /* #ifndef APP-PLUS */
|
|
|
+ box-sizing: border-box;
|
|
|
+ /* #endif */
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .grid-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .item-badge {
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-box {
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ // padding: 12px;
|
|
|
+
|
|
|
+ .price-item {
|
|
|
+ width: 50%;
|
|
|
+ padding: 12px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .user-name-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ padding: 12px 12px 0;
|
|
|
+
|
|
|
+ .user-avatar {}
|
|
|
+
|
|
|
+ .user-name {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 21.09px;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -460,35 +536,105 @@ const init = async() => {
|
|
|
|
|
|
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .status-card {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(3, 1fr);
|
|
|
- gap: 48rpx;
|
|
|
+ .service-list {
|
|
|
+ padding-bottom: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid-text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #909399;
|
|
|
+ padding: 10rpx 0 20rpx 0rpx;
|
|
|
+ /* #ifndef APP-PLUS */
|
|
|
+ box-sizing: border-box;
|
|
|
+ /* #endif */
|
|
|
+ }
|
|
|
|
|
|
- /* 网格项之间的间距 */
|
|
|
- .status-card-item {
|
|
|
+ .grid-box {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
flex-direction: column;
|
|
|
+ position: relative;
|
|
|
|
|
|
- .grid-img-box {
|
|
|
- padding: 35rpx;
|
|
|
- border-radius: 50%;
|
|
|
- background: rgba(249, 250, 251, 1);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-bottom: 18rpx;
|
|
|
+ .item-badge {
|
|
|
+ position: absolute;
|
|
|
}
|
|
|
|
|
|
- .grid-text {
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 42rpx;
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-box {
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ // padding: 12px;
|
|
|
+
|
|
|
+ .price-item {
|
|
|
+ width: 50%;
|
|
|
+ padding: 12px;
|
|
|
+
|
|
|
+ .price-name {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 23.17px;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-data {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 23.44px;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid-min-price {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 17.38px;
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-item:first-child {
|
|
|
+ border-right: 1px solid #dcdfe6;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .rate-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .rate-left {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ line-height: 20.27px;
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: left;
|
|
|
+
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rate-rigth {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ line-height: 20.27px;
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+
|
|
|
+ .rate-count {
|
|
|
+ color: rgba(237, 123, 47, 1);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -548,21 +694,4 @@ const init = async() => {
|
|
|
}
|
|
|
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-.mine-card {
|
|
|
- border-radius: 24rpx;
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
- box-shadow: 0rpx 0rpx 0rpx rgba(0, 0, 0, 0), 0rpx 0rpx 0rpx rgba(0, 0, 0, 0), 0rpx 4rpx 16rpx rgba(0, 0, 0, 0.05);
|
|
|
- margin-bottom: 16rpx;
|
|
|
- padding: 40rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.count-title {
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 48rpx;
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- margin-bottom: 32rpx;
|
|
|
-}
|
|
|
</style>
|
贾宇博