浏览代码

[edit][watch]

zhangwei 3 年之前
父节点
当前提交
5e31e74f97
共有 4 个文件被更改,包括 94 次插入71 次删除
  1. 54 58
      src/view/components/options-transactions.vue
  2. 9 3
      src/view/popup/index.vue
  3. 23 8
      src/view/popup/popup.vue
  4. 8 2
      src/view/popup/top-up/index.vue

+ 54 - 58
src/view/components/options-transactions.vue

@@ -10,57 +10,35 @@
         </div> -->
         <div class="list-wrapper" ref="listWrapper" @scroll="listScroll">
             <template v-if="!dataList.length">
-                <img
-                    class="icon-empty"
-                    :src="require('@/assets/svg/icon-empty-list.svg')"
-                />
+                <img class="icon-empty" :src="require('@/assets/svg/icon-empty-list.svg')" />
             </template>
             <div ref="listContent">
-                <div
-                    class="cell"
-                    v-for="(item, index) in dataList"
-                    :key="index"
-                >
+                <div class="cell" v-for="(item, index) in dataList" :key="index">
                     <div class="img-wrapper">
                         <!-- 收入-任务红包领取 -->
                         <template v-if="item.bizType == 1">
-                            <img
-                                class="icon-avatar"
-                                :src="item.bizData.avatarUrl"
-                            />
-                            <img
-                                class="icon-give"
-                                :src="
-                                    require('@/assets/svg/icon-giveaways.svg')
-                                "
-                            />
+                            <img class="icon-avatar" :src="item.bizData.avatarUrl" />
+                            <img class="icon-give" :src="
+                                require('@/assets/svg/icon-giveaways.svg')
+                            " />
                         </template>
                         <!-- 收入-任务红包结余退款, -->
                         <template v-else-if="item.bizType == 2">
-                            <img
-                                style="margin-left:-4px"
-                                :src="
-                                    require('@/assets/svg/icon-give-refund-list.svg')
-                                "
-                            />
+                            <img style="margin-left:-4px" :src="
+                                require('@/assets/svg/icon-give-refund-list.svg')
+                            " />
                         </template>
                         <!-- 收入-提现失败退款 -->
                         <template v-else-if="item.bizType == 3">
-                            <img
-                                style="margin-left:-4px"
-                                :src="
-                                    require('@/assets/svg/icon-withdraw-paypal-list.svg')
-                                "
-                            />
+                            <img style="margin-left:-4px" :src="
+                                require('@/assets/svg/icon-withdraw-paypal-list.svg')
+                            " />
                         </template>
                         <!-- 支出-paypal提现 -->
                         <template v-else-if="item.bizType == -1">
-                            <img
-                                style="margin-left:-4px"
-                                :src="
-                                    require('@/assets/svg/icon-withdraw-paypal-list.svg')
-                                "
-                            />
+                            <img style="margin-left:-4px" :src="
+                                require('@/assets/svg/icon-withdraw-paypal-list.svg')
+                            " />
                         </template>
                     </div>
                     <div class="info-wrapper">
@@ -79,7 +57,7 @@
                                     Withdrawal to PayPal
                                 </template>
                             </div>
-                            <div class="time">{{moment(item.createTimestamp).format('MM-DD HH:mm:ss')}}</div>
+                            <div class="time">{{ moment(item.createTimestamp).format('MM-DD HH:mm:ss') }}</div>
                         </div>
                         <div class="right">
                             <div class="msg">
@@ -88,9 +66,9 @@
                                     <!-- 提现状态(0:已申请,1:支付中,2:提现成功,3:提现失败) -->
                                     <template v-if="item.bizData.withdrawStatus == 1">
                                         <div class="balance">
-                                            -{{item.trxAmountValue/100}} 
-                                            <span>{{item.trxAmountCurrencyCode}}</span>
-                                            <img src="" alt="">
+                                            -{{ item.trxAmountValue || 0 }}
+                                            <span>{{ item.trxAmountCurrencyInfo.currencyName }}</span>
+                                            <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
                                         </div>
                                         <div class="desc">
                                             in progress
@@ -98,32 +76,32 @@
                                     </template>
                                     <template v-else-if="item.bizData.withdrawStatus == 2">
                                         <div class="balance">
-                                            -{{item.trxAmountValue/100}}     
-                                            <span>{{item.trxAmountCurrencyCode}}</span>
-                                            <img src="" alt="">
+                                            -{{ item.trxAmountValue || 0 }}
+                                            <span>{{ item.trxAmountCurrencyInfo.currencyName }}</span>
+                                            <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
                                         </div>
                                     </template>
                                     <template v-else-if="item.bizData.withdrawStatus == 3">
                                         <div class="balance">
-                                            -{{item.trxAmountValue/100}}  
-                                            <span>{{item.trxAmountCurrencyCode}}</span>
-                                            <img src="" alt="">
+                                            -{{ item.trxAmountValue || 0 }}
+                                            <span>{{ item.trxAmountCurrencyInfo.currencyName }}</span>
+                                            <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
                                         </div>
                                         <div class="desc">
                                             Withdrawal failed
                                         </div>
                                     </template>
                                     <template v-else>
-                                        -{{item.trxAmountValue/100}}
-                                        <span>{{item.trxAmountCurrencyCode}}</span>
-                                            <img src="" alt="">
+                                        -{{ item.trxAmountValue || 0 }}
+                                        <span>{{ item.trxAmountCurrencyInfo.currencyName }}</span>
+                                        <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
                                     </template>
                                 </template>
                                 <!-- 收入 -->
                                 <template v-else>
-                                    {{item.trxAmountValue/100}}
-                                    <span>{{item.trxAmountCurrencyCode}}</span>
-                                            <img src="" alt="">
+                                    {{ item.trxAmountValue || 0 }}
+                                    <span>{{ item.trxAmountCurrencyInfo.currencyName }}</span>
+                                    <img :src="item.trxAmountCurrencyInfo.iconPath" alt="">
                                 </template>
                             </div>
                         </div>
@@ -206,6 +184,7 @@ const listScroll = (e) => {
 <style lang="scss" scoped>
 .com-wrapper {
     height: 100%;
+
     .com-nav-bar {
         padding: 14px;
         box-sizing: border-box;
@@ -213,24 +192,28 @@ const listScroll = (e) => {
         align-items: center;
         font-weight: 500;
         font-size: 13px;
+
         .icon {
             width: 16px;
             margin-right: 6px;
             cursor: pointer;
         }
     }
+
     .list-wrapper {
         width: 100%;
         // height: calc(100% - 51px);
-            height: 100%;
+        height: 100%;
         overflow-y: auto;
         position: relative;
+
         .icon-empty {
             position: absolute;
             left: 50%;
             top: 20%;
             transform: translateX(-50%);
         }
+
         .cell {
             display: flex;
             justify-content: space-between;
@@ -243,17 +226,20 @@ const listScroll = (e) => {
                 position: relative;
                 margin-right: 16px;
                 box-sizing: border-box;
+
                 .icon-avatar {
                     width: 34px;
                     height: 34px;
                     border-radius: 50%;
                 }
+
                 .icon-give {
                     position: absolute;
                     right: -4px;
                     bottom: 2px;
                 }
             }
+
             .info-wrapper {
                 flex: 1;
                 height: 100%;
@@ -263,28 +249,37 @@ const listScroll = (e) => {
                 border-bottom: 1px solid #d1d1d1;
                 box-sizing: border-box;
                 padding-right: 12px;
+
                 .left {
                     .nickname {
                         font-weight: 500;
                         font-size: 14px;
                         margin-bottom: 5px;
                     }
+
                     .time {
                         font-size: 12px;
                         color: #b6b6b6;
                     }
                 }
+
                 .right {
                     display: flex;
                     align-items: center;
                     cursor: pointer;
+
                     .msg {
                         font-weight: 500;
                         font-size: 14px;
-                        span{
+                        display: flex;
+                        align-items: center;
+
+                        span {
+                            margin-left: 3px;
                             color: #E29A2E;
                         }
-                        img{
+
+                        img {
                             width: 14px;
                             height: 14px;
                             margin-left: 4px;
@@ -294,9 +289,10 @@ const listScroll = (e) => {
                             text-align: right;
                             margin-bottom: 4px;
                         }
-                        .desc {
-                        }
+
+                        .desc {}
                     }
+
                     .icon {
                         width: 18px;
                         height: 24px;

+ 9 - 3
src/view/popup/index.vue

@@ -5,9 +5,14 @@
 </template>
 
 <script setup>
-import { reactive, onMounted  ,provide} from 'vue'
+import { reactive, onMounted, provide, watch } from 'vue'
+import { setStorage, getStorage } from '@/uilts/help'
+
+let withdraw_info = reactive(getStorage('withdraw_info') || {})
+watch(withdraw_info, (newVal) => {
+  setStorage('withdraw_info',newVal)
+})
 
-let withdraw_info = reactive({})
 provide('withdraw_info', withdraw_info)
 
 let state = reactive({
@@ -23,10 +28,11 @@ onMounted(() => {
 
 
 <style>
-.home_content{
+.home_content {
   width: 100%;
   height: 100%;
 }
+
 .popup_content {
   width: 375px;
   height: 600px;

+ 23 - 8
src/view/popup/popup.vue

@@ -78,7 +78,9 @@
                                                 </template>
                                                 <!-- 已完成 -->
                                                 <template v-else-if="item.status == 1">
-                                                    ${{ item.amount }}
+                                                    <span>{{ item.amount }}</span>
+                                                    <span>{{ item.currencySymbol || '' }}</span>
+                                                    <img :src="item.currencyIconPath" alt="">
                                                 </template>
                                                 <!-- 已过期 -->
                                                 <template v-else-if="item.status == 2">
@@ -87,7 +89,9 @@
                                             </template>
                                             <!-- 发出去的 -->
                                             <template v-else-if="item.type == 2">
-                                                -${{ item.amount }}
+                                                <span>-{{ item.amount }}</span>
+                                                <span>{{ item.currencySymbol || '' }}</span>
+                                                <img :src="item.currencyIconPath" alt="">
                                             </template>
                                         </div>
                                         <!-- 发出的红包显示 -->
@@ -510,28 +514,28 @@ body {
 
             .top-up-btn {
                 cursor: pointer;
-                border: 1px solid #ffb443;
+                border: 1px solid #389AFF;
                 color: #fff;
-                background: #FFB443;
+                background: #389AFF;
                 border-radius: 100px;
                 width: 110px;
                 height: 38px;
                 margin-left: 8px;
-                line-height: 38px;
+                line-height: 36px;
 
             }
 
             .withdraw-btn {
                 background: rgba(56, 154, 255, 0.01);
-                border: 1px solid #ffb443;
+                border: 1px solid #389AFF;
                 box-sizing: border-box;
                 width: 110px;
                 font-size: 15px;
                 height: 38px;
                 text-align: center;
-                line-height: 38px;
+                line-height: 36px;
                 border-radius: 100px;
-                color: #ffb443;
+                color: #389AFF;
                 display: inline-block;
                 cursor: pointer;
             }
@@ -645,6 +649,17 @@ body {
                                 font-weight: 500;
                                 font-size: 14px;
                                 text-align: right;
+                                display: flex;
+                                justify-content: flex-end;
+                                align-items: center;
+                                span{
+                                    margin-left: 3px;
+                                }
+                                img {
+                                    margin-left: 4px;
+                                    width: 14px;
+                                    height: 14px;
+                                }
                             }
 
                             .desc {

+ 8 - 2
src/view/popup/top-up/index.vue

@@ -3,8 +3,14 @@
 </template>
 
 <script setup>
-import { provide, reactive } from 'vue'
-let top_up_info = reactive({})
+import { provide, reactive, watch } from 'vue'
+import { setStorage, getStorage } from '@/uilts/help'
+let top_up_info = reactive(getStorage('top_up_info') || {})
+
+watch(top_up_info, (newVal) => {
+  setStorage('top_up_info', newVal)
+})
+
 provide('top_up_info', top_up_info)
 </script>