更新两个组件
This commit is contained in:
parent
c5608d9311
commit
ce73e8b95f
|
@ -1,6 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="agreement">
|
<view class="agreement">
|
||||||
<widget-check-box :checked="agree" />
|
<view @click="changeState">
|
||||||
|
<widget-check-box :checked="state" />
|
||||||
|
</view>
|
||||||
<view class="description">
|
<view class="description">
|
||||||
<text class="text">我已阅读并同意</text>
|
<text class="text">我已阅读并同意</text>
|
||||||
<text class="link">《熊熊安装服务协议》</text>
|
<text class="link">《熊熊安装服务协议》</text>
|
||||||
|
@ -14,7 +16,9 @@ import WidgetCheckBox from "@/components/widgets/checkbox";
|
||||||
export default {
|
export default {
|
||||||
name: "auth-agreement",
|
name: "auth-agreement",
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {
|
||||||
|
state: false,
|
||||||
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
agree: {
|
agree: {
|
||||||
|
@ -25,10 +29,17 @@ export default {
|
||||||
components: {
|
components: {
|
||||||
WidgetCheckBox,
|
WidgetCheckBox,
|
||||||
},
|
},
|
||||||
created() {},
|
created() {
|
||||||
|
this.state = this.agree;
|
||||||
|
},
|
||||||
mounted() {},
|
mounted() {},
|
||||||
destroyed() {},
|
destroyed() {},
|
||||||
methods: {},
|
methods: {
|
||||||
|
changeState() {
|
||||||
|
this.state = !this.state;
|
||||||
|
this.$emit("change", this.state);
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -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>
|
|
@ -40,20 +40,8 @@
|
||||||
:data="item"
|
:data="item"
|
||||||
/>
|
/>
|
||||||
</view>
|
</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>
|
||||||
<view class="demand">
|
<view class="demand">
|
||||||
<text class="title">留言</text>
|
<text class="title">留言</text>
|
||||||
|
@ -65,9 +53,7 @@
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
<view class="agreement-container">
|
<view class="agreement-container">
|
||||||
<view @click="isAgree = !isAgree">
|
<agreement :agree="agree" @change="changeAgreeState" />
|
||||||
<agreement :agree="isAgree" />
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view
|
<view
|
||||||
|
@ -86,8 +72,8 @@
|
||||||
import AppLayout from "@/components/layout/layout";
|
import AppLayout from "@/components/layout/layout";
|
||||||
import ServicePreviewItem from "@/components/service/preview-item";
|
import ServicePreviewItem from "@/components/service/preview-item";
|
||||||
import Agreement from "@/components/auth/agreement";
|
import Agreement from "@/components/auth/agreement";
|
||||||
import WidgetSwitch from "@/components/widgets/switch";
|
|
||||||
import WidgetTips from "@/components/widgets/tips";
|
import WidgetTips from "@/components/widgets/tips";
|
||||||
|
import ServiceInsurance from "@/components/service/insurance";
|
||||||
import { mapState } from "vuex";
|
import { mapState } from "vuex";
|
||||||
export default {
|
export default {
|
||||||
name: "order-create",
|
name: "order-create",
|
||||||
|
@ -98,7 +84,7 @@ export default {
|
||||||
datetime: "",
|
datetime: "",
|
||||||
message: "",
|
message: "",
|
||||||
insurance: false,
|
insurance: false,
|
||||||
isAgree: false,
|
agree: false,
|
||||||
serviceList: [
|
serviceList: [
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
|
@ -119,8 +105,8 @@ export default {
|
||||||
AppLayout,
|
AppLayout,
|
||||||
ServicePreviewItem,
|
ServicePreviewItem,
|
||||||
Agreement,
|
Agreement,
|
||||||
WidgetSwitch,
|
|
||||||
WidgetTips,
|
WidgetTips,
|
||||||
|
ServiceInsurance
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
...mapState({
|
||||||
|
@ -153,16 +139,14 @@ export default {
|
||||||
selectDateTime() {
|
selectDateTime() {
|
||||||
console.log("选择时间");
|
console.log("选择时间");
|
||||||
},
|
},
|
||||||
insuranceModal() {
|
changeInsuranceState(state) {
|
||||||
uni.showModal({
|
this.insurance = state;
|
||||||
title: "什么是意外保?",
|
},
|
||||||
content:
|
changeAgreeState(state) {
|
||||||
"意外保是中国人寿的保险产品,全面保证您的人身财产安全。",
|
this.agree = state;
|
||||||
showCancel: false,
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
pay() {
|
pay() {
|
||||||
if (!this.isAgree) {
|
if (!this.agree) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: "请先阅读并同意《熊熊安装服务协议》《隐私政策》",
|
title: "请先阅读并同意《熊熊安装服务协议》《隐私政策》",
|
||||||
icon: "none",
|
icon: "none",
|
||||||
|
@ -196,45 +180,8 @@ export default {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.insurance {
|
.insurance-box {
|
||||||
width: 100%;
|
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 {
|
.demand {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
Loading…
Reference in New Issue