更新两个组件

src/components/auth/agreement.vue

@@ -1,6 +1,8 @@
 <template>
     <view class="agreement">
-        <widget-check-box :checked="agree" />
+        <view @click="changeState">
+            <widget-check-box :checked="state" />
+        </view>
         <view class="description">
             <text class="text">我已阅读并同意</text>
             <text class="link">《熊熊安装服务协议》</text>
@@ -14,7 +16,9 @@ import WidgetCheckBox from "@/components/widgets/checkbox";
 export default {
     name: "auth-agreement",
     data() {
-        return {};
+        return {
+            state: false,
+        };
     },
     props: {
         agree: {
@@ -25,10 +29,17 @@ export default {
     components: {
         WidgetCheckBox,
     },
-    created() {},
+    created() {
+        this.state = this.agree;
+    },
     mounted() {},
     destroyed() {},
-    methods: {},
+    methods: {
+        changeState() {
+            this.state = !this.state;
+            this.$emit("change", this.state);
+        },
+    },
 };
 </script>
 

src/components/service/insurance.vue

@@ -0,0 +1,102 @@
+<template>
+    <view class="insurance" :style="{padding: padding}">
+        <view class="title-box">
+            <view class="title" @click="insuranceModal">
+                <text class="text">意外保</text>
+                <text class="iconfont icon-shuoming"></text>
+            </view>
+            <text class="desc">全面保证您的人身财产安全</text>
+        </view>
+        <view class="switch-container">
+            <text class="price">¥ 6.00</text>
+            <view @click="changeState">
+                <widget-switch :open="state" />
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import WidgetSwitch from "@/components/widgets/switch";
+export default {
+    name: "service-insurance",
+    data() {
+        return {
+            state: false,
+        };
+    },
+    components: {
+        WidgetSwitch,
+    },
+    props: {
+        insurance: {
+            type: Boolean,
+            default: false,
+        },
+        padding: {
+            type: String,
+            default: "38rpx 40rpx",
+        },
+    },
+    created() {
+        this.state = this.insurance;
+    },
+    mounted() {},
+    destroyed() {},
+    methods: {
+        changeState() {
+            this.state = !this.state;
+            this.$emit("change", this.state);
+        },
+        insuranceModal() {
+            uni.showModal({
+                title: "什么是意外保？",
+                content:
+                    "意外保是中国人寿的保险产品，全面保证您的人身财产安全。",
+                showCancel: false,
+            });
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.insurance {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    background-color: #ffffff;
+    .title-box {
+        .title {
+            font-size: 30rpx;
+            line-height: 30rpx;
+            .text {
+                font-weight: bold;
+                color: #010101;
+            }
+            .iconfont {
+                color: #8194f2;
+                margin-left: 8rpx;
+            }
+        }
+        .desc {
+            display: inline-block;
+            line-height: 22rpx;
+            font-size: 22rpx;
+            color: #333333;
+            margin-top: 16rpx;
+        }
+    }
+    .switch-container {
+        display: flex;
+        line-height: 100%;
+        .price {
+            font-size: 30rpx;
+            color: #ec7655;
+            margin-right: 38rpx;
+        }
+    }
+}
+</style>

src/pages/order/create.vue

@@ -40,20 +40,8 @@
                     :data="item"
                 />
             </view>
-            <view class="insurance">
+            <view class="insurance-box">
-                <view class="title-box">
+                <service-insurance :insurance="insurance" @change="changeInsuranceState" />
-                    <view class="title" @click="insuranceModal">
-                        <text class="text">意外保</text>
-                        <text class="iconfont icon-shuoming"></text>
-                    </view>
-                    <text class="desc">全面保证您的人身财产安全</text>
-                </view>
-                <view class="switch-container">
-                    <text class="price">¥ 6.00</text>
-                    <view @click="insurance = !insurance">
-                        <widget-switch :open="insurance" />
-                    </view>
-                </view>
             </view>
             <view class="demand">
                 <text class="title">留言</text>
@@ -65,9 +53,7 @@
                 />
             </view>
             <view class="agreement-container">
-                <view @click="isAgree = !isAgree">
+                <agreement :agree="agree" @change="changeAgreeState" />
-                    <agreement :agree="isAgree" />
-                </view>
             </view>
         </view>
         <view
@@ -86,8 +72,8 @@
 import AppLayout from "@/components/layout/layout";
 import ServicePreviewItem from "@/components/service/preview-item";
 import Agreement from "@/components/auth/agreement";
-import WidgetSwitch from "@/components/widgets/switch";
 import WidgetTips from "@/components/widgets/tips";
+import ServiceInsurance from "@/components/service/insurance";
 import { mapState } from "vuex";
 export default {
     name: "order-create",
@@ -98,7 +84,7 @@ export default {
             datetime: "",
             message: "",
             insurance: false,
-            isAgree: false,
+            agree: false,
             serviceList: [
                 {
                     id: 2,
@@ -119,8 +105,8 @@ export default {
         AppLayout,
         ServicePreviewItem,
         Agreement,
-        WidgetSwitch,
         WidgetTips,
+        ServiceInsurance
     },
     computed: {
         ...mapState({
@@ -153,16 +139,14 @@ export default {
         selectDateTime() {
             console.log("选择时间");
         },
-        insuranceModal() {
+        changeInsuranceState(state) {
-            uni.showModal({
+            this.insurance = state;
-                title: "什么是意外保？",
+        },
-                content:
+        changeAgreeState(state) {
-                    "意外保是中国人寿的保险产品，全面保证您的人身财产安全。",
+            this.agree = state;
-                showCancel: false,
-            });
         },
         pay() {
-            if (!this.isAgree) {
+            if (!this.agree) {
                 uni.showToast({
                     title: "请先阅读并同意《熊熊安装服务协议》《隐私政策》",
                     icon: "none",
@@ -196,45 +180,8 @@ export default {
         margin-top: 0;
     }
 }
-.insurance {
+.insurance-box {
     width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    box-sizing: border-box;
-    padding: 38rpx 40rpx;
-    background-color: #ffffff;
-    border-top: 2rpx solid #e8e7e7;
-    .title-box {
-        .title {
-            font-size: 30rpx;
-            line-height: 30rpx;
-            .text {
-                font-weight: bold;
-                color: #010101;
-            }
-            .iconfont {
-                color: #8194f2;
-                margin-left: 8rpx;
-            }
-        }
-        .desc {
-            display: inline-block;
-            line-height: 22rpx;
-            font-size: 22rpx;
-            color: #333333;
-            margin-top: 16rpx;
-        }
-    }
-    .switch-container {
-        display: flex;
-        line-height: 100%;
-        .price {
-            font-size: 30rpx;
-            color: #ec7655;
-            margin-right: 38rpx;
-        }
-    }
 }
 .demand {
     width: 100%;