|
@@ -3,43 +3,73 @@
|
|
|
<div class="content"
|
|
|
:style="{height: showPreview ? previewDialogHeight + 'px' : dialogHeight +'px' }">
|
|
|
<div class="head">
|
|
|
- <div class="close-btn" @click="close">
|
|
|
- {{ showPreview ? "🔙" : "× " }}
|
|
|
+ <div class="left">
|
|
|
+ <div class="close-btn" @click="close">
|
|
|
+ <img class="icon-close" v-if="!showPreview" :src="require('../../assets/svg/icon-close.svg')" />
|
|
|
+ <img class="icon-close" v-else :src="require('../../assets/svg/icon-back.svg')" />
|
|
|
+ </div>
|
|
|
+ <div class="title">
|
|
|
+ Giveaways
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <img class="icon-question" :src="require('../../assets/svg/icon-question.svg')">
|
|
|
</div>
|
|
|
<div class="body">
|
|
|
- <div class="left"></div>
|
|
|
+ <div class="left">
|
|
|
+ <div class="gift-pack-wrapper">
|
|
|
+ <img class="icon" :src="require('../../assets/svg/icon-gift-pack.svg')">
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <img class="icon" :src="require('../../assets/svg/icon-wallet.svg')">
|
|
|
+ <img class="icon" :src="require('../../assets/svg/icon-setting.svg')">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="right">
|
|
|
<template v-if="!showPreview">
|
|
|
<div class="form-wrapper">
|
|
|
<div class="form-base">
|
|
|
<div class="item">
|
|
|
- <div class="label">USD</div>
|
|
|
+ <div class="label">
|
|
|
+ <img class="icon"
|
|
|
+ :src="require('../../assets/svg/icon-usd.svg')" />
|
|
|
+ USD
|
|
|
+ </div>
|
|
|
<el-input
|
|
|
- v-model="baseFormData.amount"
|
|
|
+ v-model="baseFormData.amountValue"
|
|
|
placeholder="$0.00"
|
|
|
+ oninput = "value=value.replace(/[^\d]/g,'')"
|
|
|
:input-style="{ 'box-shadow': 'none' }"/>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
- <div class="label">Quantity</div>
|
|
|
+ <div class="label">
|
|
|
+ <img class="icon"
|
|
|
+ :src="require('../../assets/svg/icon-quantity.svg')" />
|
|
|
+ Quantity
|
|
|
+ </div>
|
|
|
<el-input
|
|
|
- v-model="baseFormData.quantity"
|
|
|
+ v-model="baseFormData.totalCount"
|
|
|
placeholder="Enter quantity"
|
|
|
+ oninput = "value=value.replace(/[^\d]/g,'')"
|
|
|
:input-style="{ 'box-shadow': 'none' }"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="form-require">
|
|
|
<div class="bar">
|
|
|
- <div class="label">Require</div>
|
|
|
+ <div class="label">
|
|
|
+ <img class="icon"
|
|
|
+ :src="require('../../assets/svg/icon-require.svg')" />
|
|
|
+ Require
|
|
|
+ </div>
|
|
|
<el-dropdown trigger="click">
|
|
|
- <div class="button">+</div>
|
|
|
+ <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.type }}
|
|
|
+ {{ item.label }}
|
|
|
</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</template>
|
|
@@ -50,37 +80,44 @@
|
|
|
v-for="(item, index) in formList"
|
|
|
:key="index">
|
|
|
<div class="label">
|
|
|
- {{ item.type }}
|
|
|
+ <img class="icon"
|
|
|
+ :src="item.icon" />
|
|
|
+ {{ item.label }}
|
|
|
</div>
|
|
|
<div class="control">
|
|
|
<el-input
|
|
|
- v-model="formData[item.type]"
|
|
|
- v-if="item.type == 'Follow'"
|
|
|
- placeholder="Please input"
|
|
|
+ :type="item.nodeType"
|
|
|
+ rows="2"
|
|
|
+ resize="none"
|
|
|
+ v-model="item.text"
|
|
|
+ v-if="item.nodeType == 'textarea'"
|
|
|
+ placeholder="Enter account number"
|
|
|
:input-style="{
|
|
|
'box-shadow': 'none',
|
|
|
+ 'padding': '1px',
|
|
|
+ 'line-height': '1'
|
|
|
}"/>
|
|
|
<div
|
|
|
class="inner"
|
|
|
v-else
|
|
|
@click="selectChange(item)">
|
|
|
- {{formData[item.type]? "✅": "❌"}}
|
|
|
+ <img class="icon"
|
|
|
+ v-if="item.checked"
|
|
|
+ :src="require('../../assets/svg/icon-option-checked.svg')" />
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="btn"
|
|
|
- @click="removeOption(item, index)">
|
|
|
- ×
|
|
|
- </div>
|
|
|
+ <img class="icon-remove-button"
|
|
|
+ @click="removeOption(item, index)"
|
|
|
+ :src="require('../../assets/svg/icon-remove-option.svg')" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="submit-btn" @click="confirm">NEXT</div>
|
|
|
</template>
|
|
|
- <template v-else>
|
|
|
+ <div v-show="showPreview">
|
|
|
<preview-card></preview-card>
|
|
|
- <paypal-button :amount="baseFormData.amount" @payPalFinsh="payPalFinsh"></paypal-button>
|
|
|
- </template>
|
|
|
+ <paypal-button :amount="baseFormData.amountValue" @payPalFinsh="payPalFinsh"></paypal-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -88,38 +125,53 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-/* eslint-disable */
|
|
|
-import { ref, watch, reactive, onMounted } from "vue";
|
|
|
+import { ref, watch, reactive, defineProps, defineEmits } from "vue";
|
|
|
+import {postPublish, verifyPaypalResult} from "../../http/publishApi"
|
|
|
+
|
|
|
import previewCard from "./preview-card";
|
|
|
import paypalButton from "./paypal-button";
|
|
|
|
|
|
+const paypalClientId = 'ASn7k0zqyS5AWYikVSfmamR-RFpjyU_QFJWSxOHHoWE04-RgHNO6nahn0GyHUaUAEBxj-aKgtSrq4O4G';
|
|
|
+
|
|
|
+let publishRes = reactive({})
|
|
|
+
|
|
|
let visible = ref(true);
|
|
|
let showPreview = ref(false);
|
|
|
let dialogHeight = ref(620);
|
|
|
let previewDialogHeight = ref(880)
|
|
|
|
|
|
let baseFormData = reactive({
|
|
|
- amount: "",
|
|
|
- quantity: "",
|
|
|
+ amountCurrencyCode: "USD",
|
|
|
+ amountValue: "",
|
|
|
+ totalCount: "",
|
|
|
});
|
|
|
|
|
|
-let formData = reactive({
|
|
|
- Follow: "",
|
|
|
- Like: false,
|
|
|
- Retweet: false,
|
|
|
-});
|
|
|
|
|
|
let optionsList = reactive([
|
|
|
- { type: "Follow" },
|
|
|
- { type: "Like" },
|
|
|
- { type: "Retweet" },
|
|
|
+ {
|
|
|
+ label: "Follow",
|
|
|
+ icon: require('../../assets/svg/icon-follow.svg'),
|
|
|
+ nodeType: 'textarea',
|
|
|
+ type: 1,
|
|
|
+ text: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "Like",
|
|
|
+ icon: require('../../assets/svg/icon-like.svg'),
|
|
|
+ nodeType: 'div',
|
|
|
+ type: 2,
|
|
|
+ checked: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "Retweet",
|
|
|
+ icon: require('../../assets/svg/icon-retweet.svg'),
|
|
|
+ nodeType: 'div',
|
|
|
+ type: 3,
|
|
|
+ checked: false
|
|
|
+ },
|
|
|
]);
|
|
|
|
|
|
-let formList = reactive([
|
|
|
- { type: "Follow" },
|
|
|
- { type: "Like" },
|
|
|
- { type: "Retweet" },
|
|
|
-]);
|
|
|
+let formList = reactive([]);
|
|
|
|
|
|
const props = defineProps({
|
|
|
dialogVisible: {
|
|
@@ -130,13 +182,13 @@ const props = defineProps({
|
|
|
|
|
|
watch(
|
|
|
() => props.dialogVisible,
|
|
|
- (newVal, oldVal) => {
|
|
|
+ (newVal) => {
|
|
|
console.log("watch", newVal);
|
|
|
visible.value = newVal;
|
|
|
}
|
|
|
);
|
|
|
|
|
|
-const emits = defineEmits(["close", "confirm"]);
|
|
|
+const emits = defineEmits(["close", "confirm", "payPalFinsh"]);
|
|
|
|
|
|
const close = () => {
|
|
|
if (showPreview.value) {
|
|
@@ -150,22 +202,66 @@ const setPreviewDialogHeight = () => {
|
|
|
let clientHeight = document.documentElement.clientHeight;
|
|
|
let gapSafe = 80;
|
|
|
|
|
|
- if(clientHeight - gapSafe >= previewDialogHeight.value) {
|
|
|
-
|
|
|
- } else {
|
|
|
+ if(previewDialogHeight.value > clientHeight - gapSafe) {
|
|
|
previewDialogHeight.value = clientHeight - gapSafe;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const confirm = () => {
|
|
|
- setPreviewDialogHeight();
|
|
|
- showPreview.value = true;
|
|
|
+ let {amountValue = 0, totalCount = 0, amountCurrencyCode} = baseFormData;
|
|
|
+ if(!amountValue || !totalCount) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ amountValue = amountValue * 100; // 元转分
|
|
|
+
|
|
|
+ let finishConditions = [];
|
|
|
+ for(let i = 0; i < formList.length; i++) {
|
|
|
+ let item = {};
|
|
|
+ item.type = formList[i]['type'];
|
|
|
+ if(item.type == 1 && 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) {
|
|
|
+ relatedUsers.push({name: item});
|
|
|
+ }
|
|
|
+ }
|
|
|
+ item.relatedUsers = relatedUsers;
|
|
|
+ finishConditions.push(item);
|
|
|
+ } else if(formList[i]['checked']){
|
|
|
+ finishConditions.push(item);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log('finishConditions', finishConditions);
|
|
|
+ let formData = {
|
|
|
+ amountCurrencyCode,
|
|
|
+ amountValue,
|
|
|
+ totalCount,
|
|
|
+ finishConditions
|
|
|
+ }
|
|
|
+ let data = {
|
|
|
+ params: {
|
|
|
+ postBizData: JSON.stringify(formData),
|
|
|
+ postSrc: 1, //1 twitter
|
|
|
+ postType: 1, //1 红包
|
|
|
+ }
|
|
|
+ }
|
|
|
+ postPublish(data).then((res) => {
|
|
|
+ if(res.code == 0) {
|
|
|
+ publishRes = res.data;
|
|
|
+ setPreviewDialogHeight();
|
|
|
+ showPreview.value = true;
|
|
|
+ }
|
|
|
+ })
|
|
|
};
|
|
|
|
|
|
const addOption = (params) => {
|
|
|
let hasItem = formList.find((item) => item.type == params.type);
|
|
|
if (!formList.length || !hasItem) {
|
|
|
- formList.push(params);
|
|
|
+ formList.push({...params});
|
|
|
}
|
|
|
};
|
|
|
|
|
@@ -173,17 +269,29 @@ const removeOption = (params, index) => {
|
|
|
formList.splice(index, 1);
|
|
|
};
|
|
|
|
|
|
-const selectChange = (params, index) => {
|
|
|
- formData[params.type] = !formData[params.type];
|
|
|
+const selectChange = (params) => {
|
|
|
+ params.checked = !params.checked;
|
|
|
};
|
|
|
|
|
|
-const payPalFinsh = () => {
|
|
|
- emits("close", false);
|
|
|
+const payPalFinsh = (params) => {
|
|
|
+ let transaction = params.transaction;
|
|
|
+ console.log('transaction', transaction)
|
|
|
+ verifyPaypalResult({
|
|
|
+ params: {
|
|
|
+ paypalTransactionId: transaction.id,
|
|
|
+ postId: publishRes.postId,
|
|
|
+ paypalClientId: paypalClientId
|
|
|
+ }
|
|
|
+ }).then((res) => {
|
|
|
+ if(res.code == 0) {
|
|
|
+ //支付状态 0:未支付,1:支付成功,2:支付失败,3:已关闭,4:已退款
|
|
|
+ if(res.data && res.data.payStatus == 1) {
|
|
|
+ emits("payPalFinsh", {publishRes});
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
-onMounted(() => {
|
|
|
-});
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -215,11 +323,22 @@ onMounted(() => {
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 14px;
|
|
|
|
|
|
- .close-btn {
|
|
|
- width: max-content;
|
|
|
- font-size: 20px;
|
|
|
- margin-left: 20px;
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .close-btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: max-content;
|
|
|
+ margin-right: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-question {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
@@ -236,6 +355,26 @@ onMounted(() => {
|
|
|
|
|
|
.left {
|
|
|
width: 50px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .gift-pack-wrapper {
|
|
|
+ width: 100%;
|
|
|
+ height: 54px;
|
|
|
+ background: #F5F5F5;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ .icon {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 26px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.right {
|
|
@@ -254,7 +393,7 @@ onMounted(() => {
|
|
|
align-items: center;
|
|
|
|
|
|
.item {
|
|
|
- width: 220px;
|
|
|
+ width: 250px;
|
|
|
height: 60px;
|
|
|
border: 1px solid #e1e1e1;
|
|
|
box-sizing: border-box;
|
|
@@ -267,10 +406,13 @@ onMounted(() => {
|
|
|
.label {
|
|
|
font-weight: 500;
|
|
|
font-size: 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .img {
|
|
|
+ .icon {
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
+ margin-right: 8px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -290,15 +432,16 @@ onMounted(() => {
|
|
|
justify-content: space-between;
|
|
|
line-height: 50px;
|
|
|
|
|
|
- .button {
|
|
|
- width: 22px;
|
|
|
- height: 22px;
|
|
|
- background: #4a99e9;
|
|
|
- border-radius: 5px;
|
|
|
+ .label {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- color: #fff;
|
|
|
+ .icon {
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-button {
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
@@ -314,6 +457,11 @@ onMounted(() => {
|
|
|
.label {
|
|
|
width: 100px;
|
|
|
color: rgba(0, 0, 0, 0.6);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .icon {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.control {
|
|
@@ -326,11 +474,12 @@ onMounted(() => {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
box-sizing: border-box;
|
|
|
- padding-left: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .btn {
|
|
|
+ .icon-remove-button {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|