[publish] 需求改版

src/view/components/component-zoom.vue

@@ -9,7 +9,7 @@ import { ref, defineProps, onMounted, watch } from 'vue'
 
 let props = defineProps({
     width: {
-        type: String,
+        type: [String, Number],
         default: '375'
     },
     fontSize: {

src/view/components/custom-card-horizontal-cover.vue

@@ -68,7 +68,7 @@
                 <div class="treasure-layout" v-else>
                     <div class="treasure-row-1">
                         <span class="left">Treasure</span>
-                        <component-zoom :width="160">
+                        <component-zoom width="160">
                             <span class="right">${{data.amountValue}}</span>
                         </component-zoom>
                     </div>
@@ -98,7 +98,7 @@
                 </div>
             </div>
             <div class="custom-card-prize">
-                <component-zoom :width="showBottom ? 210 : 300">
+                <component-zoom width="showBottom ? 210 : 300">
                     <span class="custom-card-prize-name" id="custom-name" >
                         <img class="custom-card-prize-gift-inline" :src="require('@/assets/subject/icon-gift-inline.svg')" />
                         {{data.customizedReward}}

src/view/iframe/publish/components/follow-input.vue

@@ -1,7 +1,7 @@
 <template>
 <!-- 发布器-@关注人 输入组件 -->
     <div class="follow-input-wrapper">
-        <div class="at-user-item" v-for="(item, index) in pageAtUserList" :key="index">
+        <div class="at-user-item" :style="{'padding': padding}" v-for="(item, index) in pageAtUserList" :key="index">
             <img :src="require('@/assets/svg/icon-del-follows-user.svg')" 
                 class="icon-del"
                 v-if="!isRequire || isRequire && index > 0"
@@ -78,6 +78,9 @@ const props = defineProps({
     isRequire: {
         type: Boolean,
         default: false
+    },
+    padding: {
+        type: String,
     }
 })
 
@@ -279,7 +282,6 @@ const onUserMouseLeave = (params, index) => {
             color: #1D9BF0;
             font-weight: 500;
             font-size: 15px;
-            padding: 4px 12px;
             position: relative;
             margin-right: 10px;
             background-color: #fff;

src/view/iframe/publish/components/form-input.vue

@@ -4,7 +4,7 @@
             {{prefix}}
         </div>
         <slot name="content"></slot>
-        <component-zoom :width="50" fontSize="14" :txt="suffix" v-if="suffix">
+        <component-zoom width="50" fontSize="14" :txt="suffix" v-if="suffix">
             <div class="suffix">
                 {{suffix}}
             </div>

src/view/iframe/publish/give-dialog.vue

@@ -118,7 +118,7 @@
                                                         <img class="icon"
                                                             v-if="currentIconCpd"
                                                             :src="currentIconCpd"/>
-                                                        <component-zoom :width="100" :txt="currentPrizeCpd">
+                                                        <component-zoom width="100" :txt="currentPrizeCpd">
                                                             <div class="text">
                                                                 {{currentPrizeCpd}}
                                                             </div>
@@ -170,60 +170,32 @@
                                             </div>
                                             
                                             <!-- 人数 -->
-                                            <div class="form-cell" v-if="selectModeInfo.type != PlayType.treasure">
+                                            <div class="form-cell">
                                                 <div class="cell-title">
                                                     <img class="title-icon" :src="require('@/assets/svg/icon-form-winners.svg')" />
-                                                    Winners
+                                                    {{selectModeInfo.type != PlayType.treasure ? 'Winners' : 'New Follower'}}
                                                 </div>
                                                 <div class="cell-content">
-                                                    <form-input suffix="People">
-                                                        <template v-slot:content>
-                                                            <input style="width: 120px"
-                                                                v-model="baseFormData.totalCount"
-                                                                placeholder="0"
-                                                                :disabled="baseFormData.rewardType === RewardType.custom"
-                                                                @input="onCountInput"
-                                                                @blur="onCountBlur"/>
-                                                        </template>
-                                                    </form-input>
+                                                    <div>
+                                                        <form-input :suffix="selectModeInfo.type != PlayType.treasure ? 'People' : 'Follower'">
+                                                            <template v-slot:content>
+                                                                <input style="width: 120px"
+                                                                    v-model="baseFormData.totalCount"
+                                                                    placeholder="0"
+                                                                    :disabled="baseFormData.rewardType === RewardType.custom"
+                                                                    @input="onCountInput"
+                                                                    @blur="onCountBlur"/>
+                                                            </template>
+                                                        </form-input>
+                                                        <div v-if="selectModeInfo.type == PlayType.treasure">
+                                                            <span>$0.02</span> Per New Follower
+                                                        </div>
+                                                    </div>
+
                                                     <div class="count-msg" v-show="selectModeInfo.type == PlayType.common">Recommend Winners 50～500</div>
                                                 </div>
                                             </div>
 
-                                            <!-- 新粉单价 -->
-                                            <div class="form-cell" v-if="selectModeInfo.type == PlayType.treasure">
-                                                <div class="cell-title">
-                                                    <img class="title-icon" :src="require('@/assets/svg/icon-form-cost.svg')" />
-                                                    Cost Per New Follower
-                                                </div>
-                                                <div class="cell-content flex">
-                                                    <form-input :suffix="baseFormData.rewardType === RewardType.custom || currentCurrencyInfo.currencyCode ? currentPrizeCpd : ''">
-                                                        <template v-slot:content>
-                                                            <input style="width: 120px"
-                                                                v-model="baseFormData.fansUnitAmountValue"
-                                                                placeholder="0"
-                                                                @input="onFansUnitAmountInput"
-                                                                @blur="onFansUnitAmountInput"/>
-                                                        </template>
-                                                    </form-input>
-                                                    <form-input class="margin-left-10" 
-                                                        prefix="=$"
-                                                        suffix="USD">
-                                                        <template v-slot:content>
-                                                            <input style="width: 80px"
-                                                                v-model="treasureFormData.usdEstimateFansUnitAmount"
-                                                                placeholder="0"
-                                                                @input="onUsdEstimateFansUnitAmountInput"
-                                                                @blur="onUsdEstimateFansUnitAmountInput"/>
-                                                        </template>
-                                                    </form-input>
-                                                    <div class="cost-txt" v-if="treasureFormData.addFans">
-                                                        <div>Approximately</div>
-                                                        {{treasureFormData.addFans}} New Follower
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            
                                             <!-- 开奖时间 -->
                                             <div class="form-cell" v-if="selectModeInfo.type == PlayType.lottery">
                                                 <div class="cell-title">
@@ -249,7 +221,8 @@
                                                     Follow
                                                 </div>
                                                 <div class="cell-content">
-                                                    <follow-input style="padding: 0"    
+                                                    <follow-input style="padding: 0"  
+                                                        padding="10px 12px"  
                                                         :isAddSelf="!isBack"
                                                         :atUserList="atUserList"
                                                         @addUser="addFollowUser"
@@ -278,6 +251,7 @@
                                                                 <div class="control"
                                                                     v-if="item.nodeType == 'textarea'">
                                                                     <follow-input
+                                                                        padding="4px 12px"  
                                                                         :isAddSelf="!isBack"
                                                                         :atUserList="atUserList"
                                                                         @addUser="addFollowUser"
@@ -366,7 +340,7 @@
                             <preview-sheet 
                                 :baseFormData="{
                                     ...baseFormData,
-                                    addFans: treasureFormData.addFans,
+                                    addFans: baseFormData.totalCount,
                                 }"
                                 :upGainAmountUsdValue="treasureFormData.upGainAmountUsdValue"
                                 :currentCurrencyInfo="currentCurrencyInfo"
@@ -654,7 +628,6 @@ let baseFormData = reactive({
     type: selectModeInfo.type,
     rewardType: RewardType.money,
     customizedReward: "",
-    fansUnitAmountValue: ""
 });
 
 const defaultCurrentCurrencyInfo = {
@@ -779,8 +752,7 @@ let toolBoxPageData = reactive({
 
 let treasureFormData = reactive({
     usdEstimateOrderAmount: '',
-    usdEstimateFansUnitAmount: '',
-    addFans: '',
+    fansUnitAmount: '',
     upGainAmountUsdValue: 0,
 })
 
@@ -1021,10 +993,7 @@ const resetFormIpt = (clearMode = true) => {
     baseFormData.validityDuration = "";
     baseFormData.rewardType = RewardType.money;
     baseFormData.customizedReward = "";
-    baseFormData.fansUnitAmountValue = "";
-    treasureFormData.addFans = "";
     treasureFormData.usdEstimateOrderAmount = "";
-    treasureFormData.usdEstimateFansUnitAmount = "";
 
     if(clearMode) {
         selectModeInfo.index = 0;
@@ -1203,14 +1172,13 @@ const submitRequest = async () => {
     // 提交参数
     let formData = {
         amountValue,
-        totalCount: selectModeInfo.type != PlayType.treasure ? totalCount : treasureFormData.addFans,
+        totalCount,
         finishConditions,
         receiveConditions,
         type: baseFormData.type,
         posterType: 1,
         validityDuration,
         rewardType,
-        fansUnitAmountValue: selectModeInfo.type == PlayType.treasure ? baseFormData.fansUnitAmountValue : ''
     };
     if(rewardType === RewardType.custom) {
         // 通用奖品 类型的活动，添加奖品名称
@@ -1445,10 +1413,6 @@ const calcUsdEstimate = (params) => {
             calcData.amount = baseFormData.amountValue;
             treasureFormData.usdEstimateOrderAmount = calcToken2UsdEstimate(calcData);
             break;
-        case 'FANS_AMOUNT':
-            calcData.amount = baseFormData.fansUnitAmountValue;
-            treasureFormData.usdEstimateFansUnitAmount = calcToken2UsdEstimate(calcData);
-            break;
     }
 }
 
@@ -1465,10 +1429,6 @@ const calcTokenEstimate = (params) => {
             calcData.amount = treasureFormData.usdEstimateOrderAmount;
             baseFormData.amountValue = calcUsd2TokenEstimate(calcData);
             break;
-        case 'FANS_AMOUNT':
-            calcData.amount = treasureFormData.usdEstimateFansUnitAmount;
-            baseFormData.fansUnitAmountValue = calcUsd2TokenEstimate(calcData);
-            break;
     }
 }
 
@@ -1495,16 +1455,19 @@ const calcUsd2TokenEstimate = (params) => {
 };
 
 /**
- * 预计新增粉丝数
+ * 计算粉丝单价
  */
-const calcAddFans = (params = {}) => {
-    let {totalAmount, unitPrice} = params;
-    if (totalAmount > 0 && unitPrice > 0) {
-        setUpGainAmountUsdValue(params);
+const calcFansUnitAmount = () => {
+    if(!baseFormData.totalCount || !baseFormData.amountValue) {
+        return;
+    }
 
-        let count = Math.floor(totalAmount / unitPrice);
-        return count;
+    let unitAmount = baseFormData.amountValue / baseFormData.totalCount;
+    if(currentCurrencyInfo.value.currencyCode != 'USD') {
+        unitAmount = calcToken2UsdEstimate({amount: unitAmount, usdPrice: currentCurrencyInfo.value.usdPrice });
     }
+
+    return unitAmount;
 };
 
 const setUpGainAmountUsdValue = (params) => {
@@ -1537,62 +1500,12 @@ const onUsdEstimateOrderAmountInput = () => {
 
     calcTokenEstimate({type: 'ORDER_AMOUNT'});
 
-    if(+treasureFormData.usdEstimateFansUnitAmount > val) {
-        treasureFormData.usdEstimateFansUnitAmount = val;
-        calcTokenEstimate({type: 'FANS_AMOUNT'});
-    }
-
-    onIptSetErrorTxt();
-
-    if(val && treasureFormData.usdEstimateFansUnitAmount) {
-        treasureFormData.addFans = calcAddFans({totalAmount: val, unitPrice: treasureFormData.usdEstimateFansUnitAmount});
-    }
-    return val;
-};
-
-/**
- * 粉丝单价 USD 输入
- */
-const onUsdEstimateFansUnitAmountInput = () => {
-    let val = treasureFormData.usdEstimateFansUnitAmount;
-    val = String(val).replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1');
-    if(val == '00') {
-        val = '0'
-    }
-
-    if(treasureFormData.usdEstimateOrderAmount !== '' && val > treasureFormData.usdEstimateOrderAmount) {
-        val = treasureFormData.usdEstimateOrderAmount
-    }
-
-    treasureFormData.usdEstimateFansUnitAmount = val;
-    calcTokenEstimate({type: 'FANS_AMOUNT'});
-
-    treasureFormData.addFans = calcAddFans({totalAmount: treasureFormData.usdEstimateOrderAmount, unitPrice: val});
-    
     onIptSetErrorTxt();
-    return val;
-}
 
-/**
- * 粉丝单价输入
- */
-const onFansUnitAmountInput = () => {
-    let val = baseFormData.fansUnitAmountValue;
-    val = String(val).replace(/^\D*(\d*(?:\.\d{0,18})?).*$/g, '$1');
-    if(val == '00') {
-        val = '0'
-    }
-
-    if(baseFormData.amountValue !== '' && +val > +baseFormData.amountValue) {
-        val = baseFormData.amountValue
+    if(selectModeInfo.type == PlayType.treasure) {
+        treasureFormData.fansUnitAmount = calcFansUnitAmount();
     }
 
-    baseFormData.fansUnitAmountValue = val;
-    calcUsdEstimate({type: 'FANS_AMOUNT'});
-
-    treasureFormData.addFans = calcAddFans({totalAmount: baseFormData.amountValue, unitPrice: val});
-
-    onIptSetErrorTxt();
     return val;
 };
 
@@ -1625,16 +1538,13 @@ const onAmountInput = () => {
     baseFormData.amountValue = val;
 
     calcUsdEstimate({type: 'ORDER_AMOUNT'});
-    onIptSetErrorTxt();
 
-    if(+baseFormData.fansUnitAmountValue > val) {
-        baseFormData.fansUnitAmountValue = val;
-        calcUsdEstimate({type: 'FANS_AMOUNT'});
+    if(selectModeInfo.type == PlayType.treasure) {
+        treasureFormData.fansUnitAmount = calcFansUnitAmount();
     }
 
-    if(val && baseFormData.fansUnitAmountValue) {
-        treasureFormData.addFans = calcAddFans({totalAmount: val, unitPrice: baseFormData.fansUnitAmountValue});
-    }
+    onIptSetErrorTxt();
+
     return val;
 };
 
@@ -1652,6 +1562,11 @@ const onCountInput = () => {
     } 
 
     baseFormData.totalCount = val;
+
+    if(selectModeInfo.type == PlayType.treasure) {
+        treasureFormData.fansUnitAmount = calcFansUnitAmount();
+    }
+
     onIptSetErrorTxt();
     return val;
 };
@@ -1763,7 +1678,8 @@ const checkTreasureAmountRange = (isInTemplate) => {
                             ${isInTemplate ? ('<span class="font-color-1D9BF0">$' + currentLuckDropConfig.minAvgUsdAmount +' per person.</span>' ): ('$' + currentLuckDropConfig.minAvgUsdAmount + ' per person.') }`
 
             const isAmountForbidden = currentLuckDropConfig?.minTotalUsdAmount ? +math.format(math.evaluate(baseFormData.amountValue * usdPrice)) < currentLuckDropConfig?.minTotalUsdAmount : false;
-            const isAvgForbidden = baseFormData.fansUnitAmountValue !== '' && currentLuckDropConfig?.minAvgUsdAmount ? baseFormData.fansUnitAmountValue < minAmount || +math.format(math.evaluate(baseFormData.fansUnitAmountValue * usdPrice)) < currentLuckDropConfig?.minAvgUsdAmount : false;
+            
+            const isAvgForbidden = treasureFormData.fansUnitAmount !== '' && currentLuckDropConfig?.minAvgUsdAmount ? treasureFormData.fansUnitAmount < minAmount || treasureFormData.fansUnitAmount < currentLuckDropConfig?.minAvgUsdAmount : false;
 
             forbiddenText = isAmountForbidden || isAvgForbidden ? txt : '';
         }
@@ -1772,6 +1688,7 @@ const checkTreasureAmountRange = (isInTemplate) => {
 };
 
 const treasureFormValidata = () => {
+    console.log('treasureFormValidata')
     isShowUsdMinMessage.value = false;
     let userList = atUserList.value.filter(item => item.name);
 
@@ -1782,9 +1699,9 @@ const treasureFormValidata = () => {
     } else if (iptErrMsgTxt.value = checkTreasureAmountRange()) {
         //amount 是否大于 最小总金额
         isShowUsdMinMessage.value = true;
-    } else if (!baseFormData.fansUnitAmountValue) {
-        // 输入粉丝单价
-        iptErrMsgTxt.value = '请输入粉丝单价';
+    } else if (!baseFormData.totalCount || baseFormData.totalCount == '0') {
+        // 输入Follower 
+        iptErrMsgTxt.value = "Enter the number of follower";
     } else if(iptErrMsgTxt.value  = checkTreasureAmountRange()) {
         // 粉丝单价是否 小于总金额规则 大于最小粉丝单价 、大于币种最小精度
         isShowUsdMinMessage.value = true;