|
|
@@ -48,13 +48,25 @@
|
|
|
<!-- 内容 -->
|
|
|
<div class="body">
|
|
|
<!-- 充值组件 -->
|
|
|
- <top-up v-if="showComType == 'topUp'"
|
|
|
+ <top-up
|
|
|
+ v-if="showComType == 'topUp'"
|
|
|
:asyncIng="asyncIng"
|
|
|
:currentCurrencyInfo="tempCurrentCurrencyInfo"
|
|
|
- @topUpDone="topUpDone"></top-up>
|
|
|
+ @topUpDone="topUpDone">
|
|
|
+ </top-up>
|
|
|
+
|
|
|
+ <!-- 自定义红包封面 -->
|
|
|
+ <giveaway-poster
|
|
|
+ v-else-if="showComType == 'poster'"
|
|
|
+ :baseFormData="baseFormData"
|
|
|
+ :currentCurrencyInfo="currentCurrencyInfo"
|
|
|
+ :customPosterInfo="customPosterInfo"
|
|
|
+ @selectImage="selectImage"
|
|
|
+ @confirmData="confirmData">
|
|
|
+ </giveaway-poster>
|
|
|
|
|
|
<!-- 表单填写容器 -->
|
|
|
- <div class="body-content" v-if="showComType != 'topUp'">
|
|
|
+ <div class="body-content" v-else>
|
|
|
|
|
|
<!-- 货币列表 -->
|
|
|
<div class="currency-pop" v-show="showCurrencyPop">
|
|
|
@@ -165,9 +177,39 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="giveaway-poster" @click="customCoverImg">
|
|
|
+ <div class="show-img">
|
|
|
+ <div
|
|
|
+ :style="{
|
|
|
+ 'zoom': 55 / 500,
|
|
|
+ 'position': 'absolute',
|
|
|
+ 'width': '345px',
|
|
|
+ }">
|
|
|
+ <custom-card-cover
|
|
|
+ :data="{
|
|
|
+ totalCount: baseFormData.totalCount,
|
|
|
+ amountValue: baseFormData.amountValue,
|
|
|
+ tokenSymbol: currentCurrencyInfo.tokenSymbol,
|
|
|
+ currencyIconUrl: currentCurrencyInfo.iconPath,
|
|
|
+ type: baseFormData.type,
|
|
|
+ validityDuration: baseFormData.validityDuration,
|
|
|
+ customPosterUrl: customPosterData && customPosterData.after && customPosterData.after.imagePath || '',
|
|
|
+ }">
|
|
|
+ </custom-card-cover>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="show-font">
|
|
|
+ <span>Giveaway Poster</span>
|
|
|
+ <img class="new" :src=" require('@/assets/svg/img-new.svg') " />
|
|
|
+ </div>
|
|
|
+ <div class="show-placeholder">Replace</div>
|
|
|
+ <div class="arrow">
|
|
|
+ <img :src=" require('@/assets/svg/icon-cell-arrow-right.svg') " />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<!-- 提示 -->
|
|
|
<ul class="tips-wrapper">
|
|
|
- <li class="row">
|
|
|
+ <li class="row" style="white-space:nowrap;">
|
|
|
Rewards can only be claimed after the target user completes all tasks you set.
|
|
|
</li>
|
|
|
<li class="row">
|
|
|
@@ -264,6 +306,7 @@
|
|
|
:postData="publishRes"
|
|
|
:baseFormData="baseFormData"
|
|
|
:amountFontSize="previewFontSize"
|
|
|
+ :customPosterInfo="customPosterData"
|
|
|
></preview-card>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -366,24 +409,58 @@
|
|
|
@cancel="messageBoxCancel"
|
|
|
@confirm="messageBoxConfirm"
|
|
|
></message-box>
|
|
|
+
|
|
|
+ <!-- 裁剪 -->
|
|
|
+ <div class="dialog" v-if="cropperDialog">
|
|
|
+ <div class="corp-title">
|
|
|
+ <img class="back" :src="require('@/assets/svg/icon-back.svg')" @click="hiddenDialog" />
|
|
|
+ <span>Crop</span>
|
|
|
+ </div>
|
|
|
+ <div class="corp-content">
|
|
|
+ <vue-cropper
|
|
|
+ ref="refCropper"
|
|
|
+ :img="cropperOption.img"
|
|
|
+ :output-type="cropperOption.outputType"
|
|
|
+ :infoTrue="cropperOption.infoTrue"
|
|
|
+ :full="cropperOption.full"
|
|
|
+ :fixed="cropperOption.fixed"
|
|
|
+ :fixed-number="cropperOption.fixedNumber"
|
|
|
+ :auto-crop="cropperOption.autoCrop"
|
|
|
+ :auto-crop-width="cropperOption.autoCropWidth"
|
|
|
+ :auto-crop-height="cropperOption.autoCropHeight"
|
|
|
+ :center-box="cropperOption.centerBox"
|
|
|
+ :high="cropperOption.high"
|
|
|
+ :max-img-size="cropperOption.max">
|
|
|
+ </vue-cropper>
|
|
|
+ </div>
|
|
|
+ <div class="corp-footer">
|
|
|
+ <button v-if="cropperLoading" class="confirm disable">
|
|
|
+ <img :src=" require('@/assets/svg/icon-btn-loading.svg') " />
|
|
|
+ <span>Confirm</span>
|
|
|
+ </button>
|
|
|
+ <button v-else class="confirm" @click="confirmImage">Confirm</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-mask" v-if="cropperDialog"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, watch, reactive, defineProps, defineEmits, onMounted, nextTick, provide } from "vue";
|
|
|
+import { ref, watch, reactive, defineProps, defineEmits, onMounted, nextTick, provide, getCurrentInstance } from "vue";
|
|
|
import { postPublish, verifyPaypalResult, syncChainTokenRechargeRecord, getCurrencyInfoByCode } from "@/http/publishApi";
|
|
|
import { getInviteGuildInfo, getInviteGuildInfoByOpenApi, saveInviteGuildInfo } from "@/http/discordApi";
|
|
|
import { payCalcFee, getPayConfig } from "@/http/pay";
|
|
|
import { getFrontConfig } from "@/http/account";
|
|
|
+import { uploadSignature, uploadFile } from '@/http/media';
|
|
|
import {setChromeStorage, getChromeStorage} from "@/uilts/chromeExtension"
|
|
|
import { debounce, getBit } from "@/uilts/help"
|
|
|
import Report from "@/log-center/log"
|
|
|
import { ElMessage, ElLoading } from "element-plus";
|
|
|
import "element-plus/es/components/message/style/css";
|
|
|
import "element-plus/es/components/loading/style/css";
|
|
|
-
|
|
|
+import 'vue-cropper/dist/index.css'
|
|
|
+import { VueCropper } from "vue-cropper";
|
|
|
import {create, all} from "mathjs";
|
|
|
-
|
|
|
import messageBox from "@/view/components/message-box.vue";
|
|
|
import currencyList from "@/view/components/currency-list.vue";
|
|
|
import currencySelect from "@/view/components/currency-select.vue";
|
|
|
@@ -392,7 +469,11 @@ import followInput from "@/view/iframe/publish/components/follow-input";
|
|
|
import paypalButton from "@/view/iframe/publish/components/paypal-button";
|
|
|
import topUp from "@/view/iframe/publish/components/top-up.vue";
|
|
|
import topUp2 from "@/view/iframe/publish/components/top-up2.vue";
|
|
|
-import GlobalTip from '@/view/components/global-tip.vue'
|
|
|
+import giveawayPoster from '@/view/iframe/publish/components/giveaway-poster.vue';
|
|
|
+import GlobalTip from '@/view/components/global-tip.vue'
|
|
|
+import customCardCover from '@/view/components/custom-card-cover.vue'
|
|
|
+
|
|
|
+const currentInstance = getCurrentInstance();
|
|
|
|
|
|
const config = {
|
|
|
number: 'BigNumber',
|
|
|
@@ -422,6 +503,26 @@ let dialogStyle = reactive({
|
|
|
dialogContentWidth: 1100
|
|
|
})
|
|
|
|
|
|
+let cropperOption = ref({
|
|
|
+ img: '',
|
|
|
+ full: true,
|
|
|
+ infoTrue: true,
|
|
|
+ fixed: true,
|
|
|
+ fixedNumber: [16, 8.396],
|
|
|
+ outputType: 'jpeg',
|
|
|
+ autoCrop: true,
|
|
|
+ autoCropWidth: 99999,
|
|
|
+ autoCropHeight: 99999,
|
|
|
+ centerBox: true,
|
|
|
+ high: true,
|
|
|
+ max: 99999,
|
|
|
+})
|
|
|
+let cropperDialog = ref(false)
|
|
|
+let cropperLoading = ref(false)
|
|
|
+let cropperType = ref('before')
|
|
|
+let customPosterInfo = ref({})
|
|
|
+let customPosterData = ref({})
|
|
|
+
|
|
|
// 当前展示组件内容 default(表单) preview(预览) topUp(充值)
|
|
|
let showComType = ref("default");
|
|
|
let currentComData = {
|
|
|
@@ -434,6 +535,9 @@ let currentComData = {
|
|
|
topUp: {
|
|
|
title: "Deposit",
|
|
|
},
|
|
|
+ poster: {
|
|
|
+ title: "Giveaway Poster",
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
// 机器人开关
|
|
|
@@ -837,6 +941,14 @@ const goTopUp = () => {
|
|
|
showComType.value = 'topUp';
|
|
|
}
|
|
|
|
|
|
+/*
|
|
|
+ * 自定义封面
|
|
|
+ */
|
|
|
+const customCoverImg = () => {
|
|
|
+ customPosterInfo.value = {}
|
|
|
+ showComType.value = 'poster';
|
|
|
+}
|
|
|
+
|
|
|
/**
|
|
|
* 充值done事件
|
|
|
*/
|
|
|
@@ -942,10 +1054,22 @@ const submitRequest = async () => {
|
|
|
receiveConditions,
|
|
|
payAmountValue: amountValue,
|
|
|
type: baseFormData.type,
|
|
|
+ posterType: 1,
|
|
|
validityDuration
|
|
|
};
|
|
|
submitIng.value = true;
|
|
|
|
|
|
+ // 自定义封面
|
|
|
+ if (Object.keys(customPosterData.value).length > 0) {
|
|
|
+ formData['posterType'] = 2;
|
|
|
+ if (customPosterData.value && customPosterData.value.after) {
|
|
|
+ formData['customPosterInstalled'] = customPosterData.value.after.objectKey || ''
|
|
|
+ }
|
|
|
+ if (customPosterData.value && customPosterData.value.before) {
|
|
|
+ formData['customPosterUninstalled'] = customPosterData.value.before.objectKey || ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
// 法币支付需要计算费率
|
|
|
if(formData.amountCurrencyCode == "USD") {
|
|
|
let payAmountRes = await getPayAmount(amountValue);
|
|
|
@@ -1589,6 +1713,77 @@ const selectPublishMode = (params, index) => {
|
|
|
setInputErrorMsg();
|
|
|
}
|
|
|
|
|
|
+// 截图相关
|
|
|
+const showDialog = () => {
|
|
|
+ cropperDialog.value = true;
|
|
|
+}
|
|
|
+const hiddenDialog = () => {
|
|
|
+ cropperDialog.value = false;
|
|
|
+}
|
|
|
+const selectImage = (option) => {
|
|
|
+ // 设置图片
|
|
|
+ cropperOption.value.img = option.file
|
|
|
+ // 选取比例
|
|
|
+ if (option && option.type && option.type == 2) {
|
|
|
+ cropperType.value = 'after';
|
|
|
+ cropperOption.value.fixedNumber = [1, 1];
|
|
|
+ } else {
|
|
|
+ cropperType.value = 'before';
|
|
|
+ cropperOption.value.fixedNumber = [16, 8.396];
|
|
|
+ }
|
|
|
+ nextTick(() => {
|
|
|
+ showDialog()
|
|
|
+ })
|
|
|
+}
|
|
|
+const confirmImage = () => {
|
|
|
+ let contentType = 'image/jpeg';
|
|
|
+ cropperLoading.value = true;
|
|
|
+ currentInstance.ctx.$refs.refCropper.getCropBlob(imgData => {
|
|
|
+ uploadSignature({
|
|
|
+ params: {
|
|
|
+ bizType: 1,
|
|
|
+ fileType: 1,
|
|
|
+ contentType: contentType,
|
|
|
+ fileSuffix: 'jpg',
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ let { code, data } = res;
|
|
|
+ if (code === 0) {
|
|
|
+ let reader = new FileReader()
|
|
|
+ reader.readAsArrayBuffer(imgData)
|
|
|
+ reader.onload = function(e) {
|
|
|
+ let execFile = e.target.result;
|
|
|
+ uploadFile({
|
|
|
+ url: data.url,
|
|
|
+ data: new Blob([execFile]),
|
|
|
+ headers: {
|
|
|
+ 'Authorization': data.authorization,
|
|
|
+ 'x-amz-date': data.date,
|
|
|
+ 'Content-Type': contentType
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ let { status } = res
|
|
|
+ if (status == 200) {
|
|
|
+ successImage(data)
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+ cropperLoading.value = false;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+const successImage = (data) => {
|
|
|
+ hiddenDialog()
|
|
|
+ // setPosterInfo
|
|
|
+ customPosterInfo.value[cropperType.value] = data;
|
|
|
+}
|
|
|
+const confirmData = (data) => {
|
|
|
+ close()
|
|
|
+ customPosterData.value = customPosterInfo.value;
|
|
|
+}
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
setFrontConfig();
|
|
|
setPayConfig();
|
|
|
@@ -1859,11 +2054,11 @@ onMounted(() => {
|
|
|
img {
|
|
|
-webkit-user-drag: none;
|
|
|
width: 220px;
|
|
|
- height: 160px;
|
|
|
+ height: 90px;
|
|
|
}
|
|
|
}
|
|
|
.form-base {
|
|
|
- margin-top: 14px;
|
|
|
+ margin-top: 20px;
|
|
|
border: 1px solid #D1D9DD;
|
|
|
border-radius: 14px;
|
|
|
box-sizing: border-box;
|
|
|
@@ -2104,7 +2299,48 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
+ .giveaway-poster {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: row;
|
|
|
+ cursor: pointer;
|
|
|
+ height: 84px;
|
|
|
+ margin-top: 20px;
|
|
|
+ border-radius: 14px;
|
|
|
+ border: 1px solid #D1D9DD;
|
|
|
+ .show-img {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 45px;
|
|
|
+ height: 60px;
|
|
|
+ margin-left: 14px;
|
|
|
+ margin-right: 14px;
|
|
|
+ }
|
|
|
+ .show-font {
|
|
|
+ position: relative;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 500;
|
|
|
+ .new {
|
|
|
+ width: 40px;
|
|
|
+ height: 18px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .show-placeholder {
|
|
|
+ flex: 1;
|
|
|
+ color: #1D9BF0;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .arrow {
|
|
|
+ width: 18px;
|
|
|
+ height: 24px;
|
|
|
+ margin-left: 2px;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
.tips-wrapper {
|
|
|
margin: 16px 0 0 12px !important;
|
|
|
padding: 0px !important;
|
|
|
@@ -2286,4 +2522,77 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.dialog {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2002;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 800px;
|
|
|
+ height: calc(100% - 100px);
|
|
|
+ border-radius: 20px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ .corp-title {
|
|
|
+ display: flex;
|
|
|
+ height: 48px;
|
|
|
+ align-items: center;
|
|
|
+ .back {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin: 0 12px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .corp-content {
|
|
|
+ width: 472px;
|
|
|
+ margin: auto;
|
|
|
+ height: calc(100% - 130px);
|
|
|
+ }
|
|
|
+ .corp-footer {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: right;
|
|
|
+ height: 80px;
|
|
|
+ text-align: right;
|
|
|
+ padding-right: 30px;
|
|
|
+ .confirm {
|
|
|
+ cursor: pointer;
|
|
|
+ border: 0;
|
|
|
+ width: 200px;
|
|
|
+ height: 50px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ border-radius: 25px;
|
|
|
+ background: #1D9BF0;
|
|
|
+ &.disable {
|
|
|
+ background: #D9D9D9;
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.dialog-mask {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2001;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+}
|
|
|
+:deep() .vue-cropper {
|
|
|
+ background-image: none;
|
|
|
+}
|
|
|
+:deep() .cropper-modal {
|
|
|
+ background: rgba(0, 0, 0, .05);
|
|
|
+}
|
|
|
</style>
|
