新增独立表单页面、优化页面

src/App.vue

@@ -51,6 +51,7 @@ export default {
 .order-placeholder {
     color: #909090;
 }
+.form-input-placeholder,
 .address-placeholder {
     color: #c9c9c9;
 }
@@ -111,21 +112,40 @@ export default {
     width: 710rpx;
     background-color: #fff;
     margin: 20rpx auto 0 auto;
-    .input-item {
+    .input-item,
+    .textarea-item {
         width: 100%;
-        height: 105rpx;
-        border-bottom: 2rpx solid #e8e7e7;
-        display: flex;
-        align-items: center;
-        padding: 0 30rpx;
         box-sizing: border-box;
-        line-height: 30rpx;
         .title-box {
             width: 150rpx;
             font-size: 30rpx;
             line-height: 30rpx;
             color: #2d2d2d;
         }
+    }
+    .textarea-item {
+        padding: 30rpx;
+        .textarea-box {
+            width: 100%;
+            box-sizing: border-box;
+            border: 2rpx solid #D8D8D8;
+            margin-top: 30rpx;
+        }
+        .textarea {
+            width: 100%;
+            box-sizing: border-box;
+            height: 170rpx;
+            padding: 10rpx;
+            font-size: 28rpx;
+        }
+    }
+    .input-item {
+        height: 105rpx;
+        border-bottom: 2rpx solid #e8e7e7;
+        display: flex;
+        align-items: center;
+        padding: 0 30rpx;
+        line-height: 30rpx;
         // input
         .input-box {
             width: 500rpx;

src/components/widgets/count-modify.vue

@@ -37,11 +37,11 @@ export default {
             } else {
                 this.number = 0;
             }
-            this.$emit("onSub", this.number);
+            this.$emit("change", this.number);
         },
         add() {
             this.number++;
-            this.$emit("onAdd", this.number);
+            this.$emit("change", this.number);
         },
     },
 };

src/pages/address/address.vue

@@ -49,7 +49,10 @@
             <view class="btn get-wechat-address" @click="getWechatAddress">
                 <text class="text">获取微信收货地址</text>
             </view>
-            <view class="btn add-address" @click="addAddress">
+            <view
+                class="btn add-address"
+                @click="$utils.toPage('/pages/address/edit')"
+            >
                 <text class="text">新增地址</text>
             </view>
         </view>
@@ -148,15 +151,8 @@ export default {
             });
             // #endif
         },
-        addAddress() {
-            uni.navigateTo({
-                url: "/pages/address/edit",
-            });
-        },
         editAddress(id) {
-            uni.navigateTo({
+            this.$utils.toPage("/pages/address/edit?id=" + id);
-                url: "/pages/address/edit?id=" + id,
-            });
         },
         deleteAddress(id, index) {
             uni.showModal({

src/pages/address/edit.vue

@@ -33,7 +33,7 @@
                         class="input"
                         v-model="detail"
                         placeholder="请输入详细地址，如8栋5单元18a"
-                        placeholder-class="address-placeholder"
+                        placeholder-class="form-input-placeholder"
                     />
                 </view>
             </view>
@@ -46,7 +46,7 @@
                         class="input"
                         v-model="name"
                         placeholder="请输入姓名"
-                        placeholder-class="address-placeholder"
+                        placeholder-class="form-input-placeholder"
                     />
                 </view>
             </view>
@@ -82,7 +82,7 @@
                         class="input"
                         v-model="mobile"
                         placeholder="请输入手机号码"
-                        placeholder-class="address-placeholder"
+                        placeholder-class="form-input-placeholder"
                     />
                 </view>
             </view>

src/pages/index/index.vue

@@ -83,6 +83,7 @@
                     class="service-item"
                     v-for="(item, index) in bussinessServiceList"
                     :key="index"
+                    @click="$utils.toPage(item.page)"
                 >
                     <image
                         class="service-icon"
@@ -219,14 +220,14 @@ export default {
                 {
                     id: 14,
                     icon: require("@/static/temp/index/b1.png"),
-                    title: "管道疏通",
+                    title: "工程安装",
-                    page: "",
+                    page: "/pages/single/project",
                 },
                 {
                     id: 15,
                     icon: require("@/static/temp/index/b2.png"),
-                    title: "货物配送",
+                    title: "企业合作安装",
-                    page: "",
+                    page: "/pages/single/business",
                 },
             ],
         };

src/pages/member/member.vue

@@ -18,7 +18,7 @@
         </view>
         <view class="menu-container">
             <view class="form-widget-group">
-                <view class="widget-item" @click="addressPage">
+                <view class="widget-item" @click="$utils.toPage('/pages/address/address?openType=list')">
                     <text class="iconfont icon-dingwei icon"></text>
                     <text class="title limit-line clamp-1">我的地址</text>
                     <text class="iconfont icon-jinru more"></text>
@@ -45,12 +45,18 @@
                     <text class="title limit-line clamp-1">我是师傅</text>
                     <text class="iconfont icon-jinru more"></text>
                 </view>
-                <view class="widget-item" @click="projectPage">
+                <view
+                    class="widget-item"
+                    @click="$utils.toPage('/pages/single/project')"
+                >
                     <text class="iconfont icon-cailiaogongcheng icon"></text>
                     <text class="title limit-line clamp-1">工程安装</text>
                     <text class="iconfont icon-jinru more"></text>
                 </view>
-                <view class="widget-item">
+                <view
+                    class="widget-item"
+                    @click="$utils.toPage('/pages/single/business')"
+                >
                     <text class="iconfont icon-qiye icon"></text>
                     <text class="title limit-line clamp-1">企业安装合作</text>
                     <text class="iconfont icon-jinru more"></text>
@@ -87,18 +93,7 @@ export default {
     onReady() {},
     onReachBottom() {},
     onPullDownRefresh() {},
-    methods: {
+    methods: {},
-        addressPage() {
-            uni.navigateTo({
-                url: "/pages/address/address?openType=list",
-            });
-        },
-        projectPage() {
-            uni.navigateTo({
-                url: "/pages/single/project",
-            });
-        },
-    },
 };
 </script>
 

src/pages/order/create.vue

@@ -136,17 +136,17 @@ export default {
         },
         selectAddress() {
             const that = this;
-            uni.navigateTo({
+            this.$utils.toPage(
-                url:
+                "/pages/address/address?openType=choose&id=" + that.addressId,
-                    "/pages/address/address?openType=choose&id=" +
+                {
-                    that.addressId,
                     events: {
                         setAddress(address) {
                             that.addressId = address.id;
                             that.addressText = address.address + address.detail;
                         },
                     },
-            });
+                }
+            );
         },
         selectDateTime() {
             console.log("选择时间");

src/pages/service/cate.vue

@@ -93,9 +93,7 @@ export default {
     onPullDownRefresh() {},
     methods: {
         clickItem(id) {
-            uni.navigateTo({
+            this.$utils.toPage("/pages/service/list?id=" + id);
-                url: "/pages/service/list?id=" + id,
-            });
         },
     },
 };

src/pages/service/detail.vue

@@ -128,7 +128,8 @@ export default {
                     require("@/static/temp/cate/5.png"),
                     require("@/static/temp/cate/5.png"),
                 ],
-                content: "<p>这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容</p>",
+                content:
+                    "<p>这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容这是服务内容</p>",
             },
         };
     },
@@ -157,9 +158,7 @@ export default {
             });
         },
         createOrder() {
-            uni.navigateTo({
+            this.$utils.toPage("/pages/order/create");
-                url: "/pages/order/create",
-            });
         },
         changeTab(e) {
             this.tabIndex = e.detail.current;

src/pages/service/list.vue

@@ -118,14 +118,10 @@ export default {
     onPullDownRefresh() {},
     methods: {
         createOrder() {
-            uni.navigateTo({
+            this.$utils.toPage("/pages/order/create");
-                url: "/pages/order/create",
-            });
         },
         clickItem(id) {
-            uni.navigateTo({
+            this.$utils.toPage("/pages/service/detail?id=" + id);
-                url: "/pages/service/detail?id=" + id,
-            });
         },
     },
 };

src/pages/single/business.vue

@@ -1,6 +1,70 @@
 <template>
-    <app-layout headerBackgroundColor="#00418c" textColor="light">
+    <app-layout
-        
+        headerBackgroundColor="#F6F6F6"
+        title="企业合作安装"
+        textColor="dark"
+        backgroundColor="#F6F6F6"
+    >
+        <view class="background">
+            <image class="image" :src="background" mode="widthFix" />
+        </view>
+        <view class="form-container">
+            <view class="input-item">
+                <view class="title-box">
+                    <text>品牌</text>
+                </view>
+                <view class="input-box">
+                    <input
+                        class="input"
+                        v-model="brand"
+                        placeholder="请输入贵公司品牌"
+                        placeholder-class="form-input-placeholder"
+                    />
+                </view>
+            </view>
+            <view class="input-item">
+                <view class="title-box">
+                    <text>联系人</text>
+                </view>
+                <view class="input-box">
+                    <input
+                        class="input"
+                        v-model="name"
+                        placeholder="请输入姓名"
+                        placeholder-class="form-input-placeholder"
+                    />
+                </view>
+            </view>
+            <view class="input-item">
+                <view class="title-box">
+                    <text>联系手机</text>
+                </view>
+                <view class="input-box">
+                    <input
+                        class="input"
+                        v-model="mobile"
+                        placeholder="请输入您的手机号"
+                        placeholder-class="form-input-placeholder"
+                    />
+                </view>
+            </view>
+            <view class="textarea-item">
+                <view class="title-box">
+                    <text>合作内容</text>
+                </view>
+                <view class="textarea-box">
+                    <textarea
+                        v-model="content"
+                        class="textarea"
+                        placeholder="请输入合作内容"
+                        placeholder-class="form-input-placeholder"
+                    />
+                </view>
+            </view>
+        </view>
+        <view class="save-form-btn">
+            <view class="btn" @click="save">保存</view>
+        </view>
     </app-layout>
 </template>
 
@@ -9,7 +73,13 @@ import AppLayout from "@/components/layout/layout";
 export default {
     name: "single-business",
     data() {
-        return {};
+        return {
+            background: require("@/static/temp/single/2.png"),
+            brand: "",
+            name: "",
+            mobile: "",
+            content: "",
+        };
     },
     components: {
         AppLayout,
@@ -19,8 +89,47 @@ export default {
     onReady() {},
     onReachBottom() {},
     onPullDownRefresh() {},
-    methods: {},
+    methods: {
+        save() {
+            console.log("保存");
+        },
+    },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.background {
+    z-index: 5;
+    width: 100%;
+    line-height: 0;
+    .image {
+        width: 100%;
+    }
+}
+.form-container {
+    z-index: 10;
+    position: relative;
+    margin-top: -85rpx;
+}
+.carry-style,
+.count-style {
+    .title-box {
+        width: 200rpx;
+    }
+    .input-box {
+        width: auto;
+    }
+}
+.carry-style {
+    .input-box {
+        padding-left: 15rpx;
+    }
+}
+.count-style {
+    justify-content: space-between;
+}
+.save-form-btn {
+    margin-top: 40rpx;
+    padding-bottom: 100rpx;
+}
+</style>

src/pages/single/project.vue

@@ -1,26 +1,190 @@
 <template>
-    <app-layout headerBackgroundColor="#00418c" textColor="light">
+    <app-layout
-        
+        headerBackgroundColor="#F6F6F6"
+        title="工程安装"
+        textColor="dark"
+        backgroundColor="#F6F6F6"
+    >
+        <view class="background">
+            <image class="image" :src="background" mode="widthFix" />
+        </view>
+        <view class="form-container">
+            <view class="input-item">
+                <view class="title-box">
+                    <text>工程类型</text>
+                </view>
+                <view class="input-box">
+                    <input
+                        class="input"
+                        v-model="projectType"
+                        placeholder="请输入工程的类型，例如：酒店"
+                        placeholder-class="form-input-placeholder"
+                    />
+                </view>
+            </view>
+            <view class="input-item">
+                <view class="title-box">
+                    <text>产品类型</text>
+                </view>
+                <view class="input-box">
+                    <input
+                        class="input"
+                        v-model="productType"
+                        placeholder="请输入产品类型"
+                        placeholder-class="form-input-placeholder"
+                    />
+                </view>
+            </view>
+            <view class="input-item">
+                <view class="title-box">
+                    <text>联系人</text>
+                </view>
+                <view class="input-box">
+                    <input
+                        class="input"
+                        v-model="name"
+                        placeholder="请输入姓名"
+                        placeholder-class="form-input-placeholder"
+                    />
+                </view>
+            </view>
+            <view class="input-item">
+                <view class="title-box">
+                    <text>联系手机</text>
+                </view>
+                <view class="input-box">
+                    <input
+                        class="input"
+                        v-model="mobile"
+                        placeholder=" 请输入联系手机号"
+                        placeholder-class="form-input-placeholder"
+                    />
+                </view>
+            </view>
+            <view class="input-item count-style">
+                <view class="title-box">
+                    <text>需要师傅数量</text>
+                </view>
+                <view class="input-box">
+                    <widget-count-modify
+                        :initNumber="number"
+                        @change="changeNumber"
+                    />
+                </view>
+            </view>
+            <view class="input-item carry-style">
+                <view class="title-box">
+                    <text>是否需要搬运</text>
+                </view>
+                <view class="input-box">
+                    <view class="checkbox">
+                        <view
+                            class="checkbox-item"
+                            :class="[needCarry == 1 ? 'active' : '']"
+                            @click="needCarry = 1"
+                        >
+                            <text>是</text>
+                        </view>
+                        <view
+                            class="checkbox-item"
+                            :class="[needCarry == 0 ? 'active' : '']"
+                            @click="needCarry = 0"
+                        >
+                            <text>否</text>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view class="textarea-item">
+                <view class="title-box">
+                    <text>补充说明</text>
+                </view>
+                <view class="textarea-box">
+                    <textarea
+                        v-model="content"
+                        class="textarea"
+                        placeholder="请输入补充说明"
+                        placeholder-class="form-input-placeholder"
+                    />
+                </view>
+            </view>
+        </view>
+        <view class="save-form-btn">
+            <view class="btn" @click="save">保存</view>
+        </view>
     </app-layout>
 </template>
 
 <script>
 import AppLayout from "@/components/layout/layout";
+import WidgetCountModify from "@/components/widgets/count-modify";
 export default {
     name: "single-project",
     data() {
-        return {};
+        return {
+            background: require("@/static/temp/single/1.png"),
+            projectType: "",
+            productType: "",
+            number: 1,
+            name: "",
+            mobile: "",
+            needCarry: 1,
+            content: "",
+        };
     },
     components: {
         AppLayout,
+        WidgetCountModify,
     },
     onLoad() {},
     onShow() {},
     onReady() {},
     onReachBottom() {},
     onPullDownRefresh() {},
-    methods: {},
+    methods: {
+        changeNumber(data) {
+            this.number = data;
+        },
+        save() {
+            console.log("保存");
+        },
+    },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.background {
+    z-index: 5;
+    width: 100%;
+    line-height: 0;
+    .image {
+        width: 100%;
+    }
+}
+.form-container {
+    z-index: 10;
+    position: relative;
+    margin-top: -130rpx;
+}
+.carry-style,
+.count-style {
+    .title-box {
+        width: 200rpx;
+    }
+    .input-box {
+        width: auto;
+    }
+}
+.carry-style {
+    .input-box {
+        padding-left: 15rpx;
+    }
+}
+.count-style {
+    justify-content: space-between;
+}
+.save-form-btn {
+    margin-top: 40rpx;
+    padding-bottom: 100rpx;
+}
+</style>