|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div class="overlay" v-if="visible">
|
|
|
- <div class="content"
|
|
|
+ <div class="content"
|
|
|
:style="{height: showPreview ? previewDialogHeight + 'px' : dialogHeight +'px' }">
|
|
|
<div class="head">
|
|
|
<div class="left">
|
|
|
@@ -26,6 +26,7 @@
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
<template v-if="!showPreview">
|
|
|
+ <div id="editor" class=""></div>
|
|
|
<div class="form-wrapper">
|
|
|
<div class="form-base">
|
|
|
<div class="item">
|
|
|
@@ -60,20 +61,6 @@
|
|
|
:src="require('../../assets/svg/icon-require.svg')" />
|
|
|
Require
|
|
|
</div>
|
|
|
- <el-dropdown trigger="click">
|
|
|
- <img class="icon-button"
|
|
|
- :src="require('../../assets/svg/icon-add-option.svg')" />
|
|
|
- <template #dropdown>
|
|
|
- <el-dropdown-menu>
|
|
|
- <el-dropdown-item
|
|
|
- v-for="(item, index) in optionsList"
|
|
|
- :key="index"
|
|
|
- @click="addOption(item)">
|
|
|
- {{ item.label }}
|
|
|
- </el-dropdown-item>
|
|
|
- </el-dropdown-menu>
|
|
|
- </template>
|
|
|
- </el-dropdown>
|
|
|
</div>
|
|
|
<div
|
|
|
class="form-item"
|
|
|
@@ -97,25 +84,17 @@
|
|
|
'padding': '1px',
|
|
|
'line-height': '1'
|
|
|
}"/>
|
|
|
- <div
|
|
|
- class="inner"
|
|
|
- v-else
|
|
|
- @click="selectChange(item)">
|
|
|
- <img class="icon"
|
|
|
- v-if="item.checked"
|
|
|
- :src="require('../../assets/svg/icon-option-checked.svg')" />
|
|
|
- </div>
|
|
|
</div>
|
|
|
- <img class="icon-remove-button"
|
|
|
- @click="removeOption(item, index)"
|
|
|
- :src="require('../../assets/svg/icon-remove-option.svg')" />
|
|
|
+ <el-switch v-model="item.checked" />
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="submit-btn" @click="confirm">NEXT</div>
|
|
|
</div>
|
|
|
- <div class="submit-btn" @click="confirm">NEXT</div>
|
|
|
+ </template>
|
|
|
+ <template v-if="showPreview">
|
|
|
+ <preview-card :postData="publishRes"></preview-card>
|
|
|
</template>
|
|
|
<div v-show="showPreview">
|
|
|
- <preview-card></preview-card>
|
|
|
<paypal-button :amount="baseFormData.amountValue" @payPalFinsh="payPalFinsh"></paypal-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -125,8 +104,14 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, watch, reactive, defineProps, defineEmits } from "vue";
|
|
|
+import { ref, watch, reactive, defineProps, defineEmits, onMounted } from "vue";
|
|
|
import {postPublish, verifyPaypalResult} from "../../http/publishApi"
|
|
|
+// import Quill from 'quill';
|
|
|
+// import 'quill/dist/quill.snow.css'
|
|
|
+
|
|
|
+// const quillOptions = {
|
|
|
+// placeholder: 'Compose an epic...',
|
|
|
+// };
|
|
|
|
|
|
import previewCard from "./preview-card";
|
|
|
import paypalButton from "./paypal-button";
|
|
|
@@ -135,7 +120,7 @@ const paypalClientId = 'ASn7k0zqyS5AWYikVSfmamR-RFpjyU_QFJWSxOHHoWE04-RgHNO6nahn
|
|
|
|
|
|
let publishRes = reactive({})
|
|
|
|
|
|
-let visible = ref(true);
|
|
|
+let visible = ref(false);
|
|
|
let showPreview = ref(false);
|
|
|
let dialogHeight = ref(620);
|
|
|
let previewDialogHeight = ref(880)
|
|
|
@@ -146,33 +131,31 @@ let baseFormData = reactive({
|
|
|
totalCount: "",
|
|
|
});
|
|
|
|
|
|
-
|
|
|
-let optionsList = reactive([
|
|
|
- {
|
|
|
- label: "Follow",
|
|
|
+let formList = reactive([
|
|
|
+ {
|
|
|
+ label: "Follow",
|
|
|
icon: require('../../assets/svg/icon-follow.svg'),
|
|
|
nodeType: 'textarea',
|
|
|
type: 1,
|
|
|
text: '',
|
|
|
+ checked: true
|
|
|
},
|
|
|
- {
|
|
|
+ {
|
|
|
label: "Like",
|
|
|
icon: require('../../assets/svg/icon-like.svg'),
|
|
|
nodeType: 'div',
|
|
|
- type: 2,
|
|
|
- checked: false
|
|
|
+ type: 2,
|
|
|
+ checked: true
|
|
|
},
|
|
|
- {
|
|
|
+ {
|
|
|
label: "Retweet",
|
|
|
icon: require('../../assets/svg/icon-retweet.svg'),
|
|
|
nodeType: 'div',
|
|
|
type: 3,
|
|
|
- checked: false
|
|
|
+ checked: true
|
|
|
},
|
|
|
]);
|
|
|
|
|
|
-let formList = reactive([]);
|
|
|
-
|
|
|
const props = defineProps({
|
|
|
dialogVisible: {
|
|
|
type: Boolean,
|
|
|
@@ -185,6 +168,9 @@ watch(
|
|
|
(newVal) => {
|
|
|
console.log("watch", newVal);
|
|
|
visible.value = newVal;
|
|
|
+ if(newVal) {
|
|
|
+ // initQuill();
|
|
|
+ }
|
|
|
}
|
|
|
);
|
|
|
|
|
|
@@ -194,6 +180,7 @@ const close = () => {
|
|
|
if (showPreview.value) {
|
|
|
showPreview.value = false;
|
|
|
} else {
|
|
|
+ initParams();
|
|
|
emits("close", false);
|
|
|
}
|
|
|
};
|
|
|
@@ -218,11 +205,11 @@ const confirm = () => {
|
|
|
for(let i = 0; i < formList.length; i++) {
|
|
|
let item = {};
|
|
|
item.type = formList[i]['type'];
|
|
|
- if(item.type == 1 && formList[i]['text']) { // follow 参数
|
|
|
+ if(item.type == 1 && formList[i]['checked'] && formList[i]['text']) { // follow 参数
|
|
|
let relatedUsers = [];
|
|
|
let text = formList[i]['text'].replace(/\s*/g,""); // 删除空格
|
|
|
let textList = text.split('@');
|
|
|
-
|
|
|
+
|
|
|
for(let i = 0; i < textList.length; i++) {
|
|
|
let item = textList[i];
|
|
|
if(item) {
|
|
|
@@ -258,20 +245,11 @@ const confirm = () => {
|
|
|
})
|
|
|
};
|
|
|
|
|
|
-const addOption = (params) => {
|
|
|
- let hasItem = formList.find((item) => item.type == params.type);
|
|
|
- if (!formList.length || !hasItem) {
|
|
|
- formList.push({...params});
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-const removeOption = (params, index) => {
|
|
|
- formList.splice(index, 1);
|
|
|
-};
|
|
|
-
|
|
|
-const selectChange = (params) => {
|
|
|
- params.checked = !params.checked;
|
|
|
-};
|
|
|
+const initParams = () => {
|
|
|
+ baseFormData.amountValue = '';
|
|
|
+ baseFormData.totalCount = '';
|
|
|
+ formList[0].text = '';
|
|
|
+}
|
|
|
|
|
|
const payPalFinsh = (params) => {
|
|
|
let transaction = params.transaction;
|
|
|
@@ -287,14 +265,45 @@ const payPalFinsh = (params) => {
|
|
|
//支付状态 0：未支付，1：支付成功，2：支付失败，3：已关闭，4：已退款
|
|
|
if(res.data && res.data.payStatus == 1) {
|
|
|
emits("payPalFinsh", {publishRes});
|
|
|
+ showPreview.value = false;
|
|
|
+ initParams();
|
|
|
}
|
|
|
- }
|
|
|
+ }
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+// const initQuill = () => {
|
|
|
+// let container = document.getElementById('editor');
|
|
|
+// let editor = new Quill(container, quillOptions);
|
|
|
+
|
|
|
+// editor.on('text-change', () => {
|
|
|
+// if(editor.getText()) {
|
|
|
+// /**
|
|
|
+// * quill.insertText(5, 'Quill', {
|
|
|
+// 'color': '#ffff00',
|
|
|
+// 'italic': true
|
|
|
+// });
|
|
|
+// */
|
|
|
+// // editor.setContents([
|
|
|
+// // { insert: 'World!', attributes: { color: 'blue' } },
|
|
|
+// // ]);
|
|
|
+// }
|
|
|
+// console.log(editor.getText())
|
|
|
+// });
|
|
|
+// }
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ setPreviewDialogHeight();
|
|
|
+ // initQuill();
|
|
|
+})
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.ql-container {
|
|
|
+ height: 100px;
|
|
|
+}
|
|
|
.overlay {
|
|
|
position: fixed;
|
|
|
top: 0;
|
