Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
a93af27b 1 parent 63ce343c

🦄 refactor(捐花组件): 代码优化

Inline Side-by-side
Showing 1 changed file with 56 additions and 35 deletions
......@@ -2,12 +2,13 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-31 22:09:58
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-07 16:41:09
* @LastEditTime: 2022-06-09 00:43:28
* @FilePath: /tswj/src/components/DonateFlower/index.vue
* @Description: 捐花组件
-->
<template>
<van-popup v-model:show="show" :close-on-click-overlay="false" round position="bottom" :style="{ height: popupHeight, zIndex: 3000 }">
<van-popup v-model:show="show" :close-on-click-overlay="false" round position="bottom"
:style="{ height: popupHeight, zIndex: 3000 }">
<div class="donate-wrapper">
<div class="donate-title">
您所有捐助的爱心
......@@ -16,8 +17,9 @@
</div>
<div class="shortcut-choose-wrapper">
<van-row gutter="10">
<van-col v-for="(v, index) in checkList" :key="index" span="8">
<div :class="['base-item', donate_number === +index ? 'checked-item' : 'uncheck-item']" @click="donate_number = +index">
<van-col v-for="(v, index) in defaultOptions" :key="index" span="8">
<div :class="['base-item', donate_number === +index ? 'checked-item' : 'uncheck-item']"
@click="donate_number = +index">
{{ v }}
</div>
</van-col>
......@@ -32,7 +34,7 @@
</van-col>
</van-row>
</div>
<div v-if="userType === 'C' || userType === 'K'" class="donate-name">
<div v-if="userType === USER_TYPE.CHILDREN || userType === USER_TYPE.KINDERGARTEN" class="donate-name">
<van-row>
<van-col span="4" style="line-height: 2;">幼儿园</van-col>
<van-col span="18">
......@@ -40,7 +42,7 @@
</van-col>
</van-row>
</div>
<div v-if="userType === 'C'" class="donate-name">
<div v-if="userType === USER_TYPE.CHILDREN" class="donate-name">
<van-row>
<van-col span="4" style="line-height: 2;">助力人</van-col>
<van-col span="18">
......@@ -63,7 +65,7 @@
<van-checkbox v-model="agreed" checked-color="#ee0a24">同意&nbsp;</van-checkbox>
</div>
<div class="text">
<span @click="handleDA">捐赠协议</span>
<span @click="showDA=true">捐赠协议</span>
</div>
</div>
</van-col>
......@@ -81,8 +83,8 @@
</van-popup>
<div class="popup-wrapper">
<van-popup v-model:show="showDA" position="bottom" :style="{ height: '100%', zIndex: 4000 }">
<div class="agreementHtml" v-html="agreementHtml"></div>
<div class="bottom-btn" @click="closeDA">
<div class="agreementHtml" v-html="agreementHtml" />
<div class="bottom-btn" @click="showDA=false">
<div class="text">关闭</div>
</div>
</van-popup>
......@@ -97,6 +99,7 @@ import { useRouter } from 'vue-router'
import { $, Toast } from '@/utils/generatePackage'
import { addDonateAPI } from '@/api/C/donate.js'
import agreementHtml from './agreement'
import { USER_TYPE } from '@/constant'
const $router = useRouter();
const props = defineProps({
......@@ -107,26 +110,35 @@ const props = defineProps({
const emit = defineEmits(['on-close']);
let donate_number = ref(1);
const donateFlower = async () => {
const donateFlower = () => {
if (!agreed.value) {
Toast.fail('请选勾选同意按钮！');
return false;
}
// 捐钱接口
// 根据类型过滤提交数据
// C 儿童: 提交 perf_id,kg_id
// K 幼儿园: 提交 kg_id
// V 访客: 不提交 perf_id,kg_id
// 儿童: 提交 perf_id,kg_id
// 幼儿园: 提交 kg_id
// 访客
let params = {
qty: donate_number.value,
qty: donate_number.value,
donate_name: props.item.donate_name,
};
if (props.userType === 'C') { // 助力TA
params.perf_id = props.item.perf_id;
params.kg_id = props.item.kg_id;
} else if (props.userType === 'K') {
params.kg_id = props.item.kg_id;
switch (props.userType) {
case USER_TYPE.CHILDREN:
params.perf_id = props.item.perf_id;
params.kg_id = props.item.kg_id;
break;
case USER_TYPE.KINDERGARTEN:
params.kg_id = props.item.kg_id;
break;
case USER_TYPE.VISIT:
break;
}
addDonate(params);
}
const addDonate = async (params) => {
const { data } = await addDonateAPI(params);
if (data.id) {
closeBtn();
......@@ -190,7 +202,7 @@ onMounted(() => {
})
// 选择捐赠数量
const checkList = ref({
const defaultOptions = ref({
1: '1朵金花',
2: '2朵金花',
3: '3朵金花',
......@@ -199,21 +211,16 @@ const checkList = ref({
const agreed = ref(false);
// 显示捐赠协议弹框
const showDA = ref(false);
const handleDA = () => {
showDA.value = true
}
const closeDA = () => {
showDA.value = false
}
</script>
<style lang="less" scoped>
.donate-wrapper {
.donate-title {
padding: 1rem 1rem 0 1rem;
color: #999999;
padding: 1rem 1rem 0 1rem;
color: #999999;
text-align: center;
}
.shortcut-choose-wrapper {
padding: 1rem;
......@@ -241,12 +248,13 @@ const closeDA = () => {
padding: 1rem;
.donate-text {
background: #F4F4F4;
background: #F4F4F4;
border-radius: 3px;
padding: 0.5rem;
margin-left: 5%;
padding: 0.5rem;
margin-left: 5%;
width: 95%;
}
.donate-input {
border: 1px solid #B9B9B9;
border-radius: 5px;
......@@ -254,17 +262,29 @@ const closeDA = () => {
margin-left: 1rem;
}
}
.agree-wrapper {
margin: 1rem 0;
.agree-content {
display: flex;align-items: center; box-sizing: content-box;
display: flex;
align-items: center;
box-sizing: content-box;
.btn {
display: flex; flex-direction: column; justify-content: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.text {
display: flex; flex-direction: column; justify-content: center;
display: flex;
flex-direction: column;
justify-content: center;
span {
text-decoration: underline; color: #11D2B1;
text-decoration: underline;
color: #11D2B1;
}
}
}
......@@ -304,6 +324,7 @@ const closeDA = () => {
right: 0;
background-color: white;
box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.07);
.text {
text-align: center;
padding: 0.7rem;
......