topnuomi
/
xx-applets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新两个组件

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/auth/agreement.vue
View File

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

102
src/components/service/insurance.vue Normal file
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>

79
src/pages/order/create.vue
View File

@ -40,20 +40,8 @@
:data="item"
/>
</view>
<view class="insurance">
<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="insurance = !insurance">
<widget-switch :open="insurance" />
</view>
</view>
<view class="insurance-box">
<service-insurance :insurance="insurance" @change="changeInsuranceState" />
</view>
<view class="demand">
<text class="title">留言</text>
@ -65,9 +53,7 @@
/>
</view>
<view class="agreement-container">
<view @click="isAgree = !isAgree">
<agreement :agree="isAgree" />
</view>
<agreement :agree="agree" @change="changeAgreeState" />
</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() {
uni.showModal({
title: "什么是意外保？",
content:
"意外保是中国人寿的保险产品，全面保证您的人身财产安全。",
showCancel: false,
});
changeInsuranceState(state) {
this.insurance = state;
},
changeAgreeState(state) {
this.agree = state;
},
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%;