From c5608d931195f2af457e780b85eb790991394279 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?TOP=E7=B3=AF=E7=B1=B3?= <1130395124@qq.com>
Date: Tue, 21 Feb 2023 18:40:39 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8F=91=E5=B8=83=E9=9C=80?=
 =?UTF-8?q?=E6=B1=82=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                 |  37 ++++++-
 src/pages.json              |   6 ++
 src/pages/demand/demand.vue | 197 ++++++++++++++++++++++++++++++++++++
 3 files changed, 238 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/demand/demand.vue

diff --git a/src/App.vue b/src/App.vue
index 80b54b3..d7ebf65 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -128,7 +128,7 @@ export default {
         .textarea-box {
             width: 100%;
             box-sizing: border-box;
-            border: 2rpx solid #D8D8D8;
+            border: 2rpx solid #d8d8d8;
             margin-top: 30rpx;
         }
         .textarea {
@@ -160,7 +160,6 @@ export default {
             display: flex;
         }
         .checkbox-item {
-            width: 116rpx;
             height: 50rpx;
             background: rgba(139, 155, 235, 0);
             box-sizing: border-box;
@@ -169,6 +168,7 @@ export default {
             margin-right: 15rpx;
             font-size: 28rpx;
             color: #2d2d2d;
+            padding: 0 32rpx;
             line-height: 48rpx;
         }
         .checkbox-item.active {
@@ -177,6 +177,39 @@ export default {
             color: #8194f2;
         }
     }
+    .upload-item {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 0 30rpx;
+        .image-box {
+            width: 133.2rpx;
+            height: 133.2rpx;
+            background: rgba(184, 180, 179, 0);
+            border: 1px solid #999999;
+            box-sizing: border-box;
+            margin: 0 25rpx 25rpx 0;
+            .image {
+                width: 100%;
+                height: 100%;
+            }
+        }
+        .image-box.upload {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            color: #999999;
+            .iconfont {
+                font-size: 50rpx;
+                line-height: 50rpx;
+            }
+            .text {
+                font-size: 24rpx;
+                margin-top: 18rpx;
+                line-height: 24rpx;
+            }
+        }
+    }
 }
 .save-form-btn {
     width: 100%;
diff --git a/src/pages.json b/src/pages.json
index a1f2405..c833596 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -43,6 +43,12 @@
 				"navigationBarTitleText": "确认订单"
 			}
 		},
+		{
+			"path": "pages/demand/demand",
+			"style": {
+				"navigationBarTitleText": "发布需求"
+			}
+		},
 		{
 			"path": "pages/member/member",
 			"style": {
diff --git a/src/pages/demand/demand.vue b/src/pages/demand/demand.vue
new file mode 100644
index 0000000..edad5c1
--- /dev/null
+++ b/src/pages/demand/demand.vue
@@ -0,0 +1,197 @@
+<template>
+    <app-layout
+        headerBackgroundColor="#F6F6F6"
+        backgroundColor="#F6F6F6"
+        :title="pageTitle"
+        textColor="dark"
+    >
+        <view class="step-desc">
+            <text class="text active">发布需求</text>
+            <text class="text normal">
+                — 多位师傅报价/议价 — 选择师傅 — 师傅上门
+            </text>
+        </view>
+        <view class="tips-container">
+            <widget-tips
+                backgroundColor="unset"
+                textColor="#FFA800"
+                text="如需钻孔上墙，为避免影响邻居，请提前与物业确认能否施工，再协商上门时间"
+            />
+        </view>
+        <view class="demand-container step-1" v-if="step == 1">
+            <view class="form-container">
+                <view class="input-item price-type">
+                    <view class="title-box">
+                        <text>选择报价方式</text>
+                    </view>
+                    <view class="input-box">
+                        <view class="checkbox">
+                            <view
+                                class="checkbox-item"
+                                :class="[type == 1 ? 'active' : '']"
+                                @click="type = 1"
+                            >
+                                <text>多位师傅报价</text>
+                            </view>
+                            <view
+                                class="checkbox-item"
+                                :class="[type == 2 ? 'active' : '']"
+                                @click="type = 2"
+                            >
+                                <text>议价</text>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="form-container explain">
+                <view class="textarea-item">
+                    <view class="title-box">
+                        <text>需求说明</text>
+                    </view>
+                    <view class="textarea-box">
+                        <textarea
+                            v-model="explain"
+                            class="textarea"
+                            placeholder="请您详细填写需求说明"
+                            placeholder-class="form-input-placeholder"
+                        />
+                    </view>
+                </view>
+                <view class="upload-item">
+                    <block v-for="(item, index) in uploadImages" :key="index">
+                        <view class="image-box">
+                            <image
+                                class="image"
+                                :src="item.src"
+                                mode="aspectFill"
+                            />
+                        </view>
+                    </block>
+                    <view class="image-box upload" @click="chooseImage">
+                        <text class="iconfont icon-shangchuantupian"></text>
+                        <text class="text">上传图片</text>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="demand-container step-2" v-if="step == 2">
+            基本信息（报价）
+        </view>
+        <view class="demand-container step-3" v-if="step == 3">
+            基本信息（议价）
+        </view>
+    </app-layout>
+</template>
+
+<script>
+import AppLayout from "@/components/layout/layout";
+import WidgetTips from "@/components/widgets/tips";
+export default {
+    name: "demand",
+    data() {
+        return {
+            pageTitle: "发布需求",
+            step: 1,
+            type: 1,
+            uploadImages: [
+                {
+                    src: require("@/static/temp/cate/1.png"),
+                },
+                {
+                    src: require("@/static/temp/cate/1.png"),
+                },
+                {
+                    src: require("@/static/temp/cate/1.png"),
+                },
+                {
+                    src: require("@/static/temp/cate/1.png"),
+                },
+            ],
+        };
+    },
+    components: {
+        AppLayout,
+        WidgetTips,
+    },
+    onLoad() {},
+    onShow() {},
+    onReady() {},
+    onReachBottom() {},
+    onPullDownRefresh() {},
+    methods: {
+        toStep(step) {
+            if (step == 1) {
+                this.pageTitle = "发布需求";
+            } else if (step == 2 || step == 3) {
+                this.pageTitle = "基本信息";
+            }
+            this.step = step;
+            uni.setNavigationBarTitle({
+                title: this.pageTitle,
+            });
+        },
+        chooseImage() {
+            uni.chooseImage({
+                sizeType: ["compressed"],
+                sourceType: ["album"],
+                success(res) {
+                    console.log(JSON.stringify(res.tempFilePaths));
+                },
+            });
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.step-desc {
+    width: 710rpx;
+    background: #ffffff;
+    margin: 0 auto;
+    text-align: center;
+    padding: 22rpx 0;
+    line-height: 0;
+    .text {
+        font-size: 26rpx;
+        font-weight: bold;
+        line-height: 26rpx;
+    }
+    .text.normal {
+        color: #a0a0a0;
+    }
+    .text.active {
+        color: #8b9beb;
+        margin-right: 8rpx;
+    }
+}
+.tips-container {
+    width: 710rpx;
+    margin: 0 auto;
+}
+.form-container {
+    width: 100%;
+    margin-top: 0;
+}
+.form-container.explain {
+    margin-top: 25rpx;
+    .textarea-box {
+        border: none;
+        .textarea {
+            height: 190rpx;
+            padding: 0;
+        }
+    }
+}
+.price-type {
+    .title-box {
+        width: 180rpx;
+        flex-shrink: 0;
+        margin-right: 30rpx;
+    }
+    .input-box {
+        width: 100%;
+        flex-shrink: 1;
+    }
+}
+</style>
\ No newline at end of file