增加个人中心页面

src/components/widgets/switch.vue

@@ -0,0 +1,50 @@
+<template>
+    <view
+        class="component-widget-switch"
+        :style="{ fontSize: utils.rpx2px(size) + 'px', color: state ? color[1] : color[0] }"
+        @click="changeState"
+    >
+        <text class="iconfont" :class="[state ? 'icon-kaiguan-kai' : 'icon-kaiguan-guan']"></text>
+    </view>
+</template>
+
+<script>
+export default {
+    name: "component-widget-switch",
+    data() {
+        return {
+            utils: this.$utils,
+            state: false,
+        };
+    },
+    props: {
+        size: {
+            type: Number,
+            default: 34,
+        },
+        color: {
+            type: Array,
+            default: ["#c7c7c7", "#8194f2"],
+        },
+        open: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    components: {},
+    created() {
+        this.state = this.open;
+    },
+    mounted() {},
+    destroyed() {},
+    methods: {
+        changeState() {
+            this.state = !this.state;
+            this.$emit("input", this.state);
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+</style>

src/pages.json

@@ -1,11 +1,5 @@
 {
 	"pages": [
-		{
-			"path": "pages/auth/auth",
-			"style": {
-				"navigationBarTitleText": "登录"
-			}
-		},
 		{
 			"path": "pages/index/index",
 			"style": {
@@ -13,6 +7,12 @@
 				"enablePullDownRefresh": true
 			}
 		},
+		{
+			"path": "pages/auth/auth",
+			"style": {
+				"navigationBarTitleText": "登录"
+			}
+		},
 		{
 			"path": "pages/order/order",
 			"style": {

src/pages/member/member.vue

@@ -1,16 +1,89 @@
 <template>
-    <app-layout title="我的" btnType="unset"></app-layout>
+    <app-layout btnType="unset" headerBackgroundColor="unset" :hasPaddingTop="false">
+        <view class="member-container">
+            <view class="page-background-image">
+                <image class="background-image" :src="backgroundImage" mode="aspectFill" />
+            </view>
+            <view class="main-container">
+                <view class="head">
+                    <view class="headimg">
+                        <image class="image" :src="userInfo.headimg" mode="aspectFill" />
+                    </view>
+                    <view class="detail">
+                        <view class="name">
+                            <text>{{ userInfo.username }}</text>
+                            <text class="type" :style="{ color: models.worker.getWorkerTypeTextColor(userInfo.type) }">{{
+                                models.worker.getWorkerTypeText(userInfo.type)
+                            }}</text>
+                        </view>
+                        <view class="line id">ID：{{ userInfo.id }}</view>
+                        <view class="line">注册时间：{{ userInfo.registerAt }}</view>
+                    </view>
+                    <view class="accept-switch">
+                        <widget-switch
+                            v-model="acceptOrderState"
+                            :color="['#ffffff', '#ffffff']"
+                            :size="54"
+                            :open="acceptOrderState"
+                        />
+                        <text class="current-state">{{ acceptOrderState ? "正在" : "暂停" }}接单</text>
+                    </view>
+                </view>
+                <view class="order-desc">
+                    <view class="service-data">
+                        <view class="section-text">
+                            <text>服务：</text>
+                            <text class="num">687</text>
+                            <text>次</text>
+                        </view>
+                        <view class="section-text">
+                            <text>好评率：</text>
+                            <text class="num">687</text>
+                            <text>%</text>
+                        </view>
+                        <view class="section-text">
+                            <text>评分：</text>
+                            <text class="num">5.00</text>
+                        </view>
+                    </view>
+                    <view class="balance-box">
+                        <view class="balance-section">
+                            <text class="title">可提现余额（元）</text>
+                            <text class="num">0.00</text>
+                        </view>
+                        <view class="balance-section">
+                            <text class="title">可提现余额（元）</text>
+                            <text class="num">0.00</text>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </app-layout>
 </template>
 
 <script>
 import AppLayout from "@/components/layout/layout";
+import WidgetSwitch from "@/components/widgets/switch";
 export default {
     name: "member",
     data() {
-        return {};
+        return {
+            models: this.$models,
+            backgroundImage: require("@/static/temp/member/1.png"),
+            userInfo: {
+                headimg: require("@/static/temp/member/2.png"),
+                username: "李师傅",
+                id: "212121212",
+                registerAt: "2022-11-1",
+                type: 2,
+            },
+            acceptOrderState: false,
+        };
     },
     components: {
         AppLayout,
+        WidgetSwitch,
     },
     onLoad() {},
     onShow() {},
@@ -21,4 +94,111 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.page-background-image {
+    width: 100%;
+    line-height: 0;
+    .background-image {
+        width: 100%;
+        height: 590rpx;
+    }
+}
+.member-container {
+    width: 100%;
+    .main-container {
+        position: relative;
+        width: 100%;
+        margin: -450rpx 0 0 0;
+        box-sizing: border-box;
+        padding: 0 20rpx;
+    }
+}
+.head {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .headimg {
+        .image {
+            width: 132rpx;
+            height: 132rpx;
+        }
+    }
+    .detail {
+        width: 380rpx;
+        color: #ffffff;
+        letter-spacing: 2rpx;
+        .name {
+            font-size: 36rpx;
+            line-height: 36rpx;
+            font-weight: bold;
+        }
+        .type {
+            display: inline-block;
+            font-size: 28rpx;
+            line-height: 28rpx;
+            margin-left: 30rpx;
+        }
+        .line {
+            font-size: 28rpx;
+            line-height: 28rpx;
+        }
+        .line.id {
+            margin: 12rpx 0 12rpx 0;
+        }
+    }
+    .accept-switch {
+        text-align: center;
+        .current-state {
+            font-size: 24rpx;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 24rpx;
+        }
+    }
+}
+.order-desc {
+    width: 100%;
+    margin-top: 90rpx;
+    background-color: #ffffff;
+    .service-data {
+        text-align: center;
+        padding: 40rpx 0;
+        box-sizing: border-box;
+        border-bottom: 3rpx solid #efefef;
+        .section-text {
+            display: inline-block;
+            margin: 0 22rpx;
+            font-size: 24rpx;
+            font-weight: bold;
+            color: #333333;
+        }
+        .num {
+            font-size: 36rpx;
+            color: #8b9aeb;
+        }
+    }
+    .balance-box {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 30rpx 0;
+        display: flex;
+        justify-content: space-between;
+        .balance-section {
+            width: 50%;
+            text-align: center;
+            color: #333333;
+        }
+        .title {
+            font-size: 24rpx;
+            line-height: 24rpx;
+        }
+        .num {
+            display: block;
+            font-size: 36rpx;
+            line-height: 36rpx;
+            margin-top: 30rpx;
+        }
+    }
+}
+</style>