更新两个组件

This commit is contained in:
TOP糯米 2023-02-21 21:55:13 +08:00
parent c5608d9311
commit ce73e8b95f
3 changed files with 130 additions and 70 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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%;