Onlife/components/smarttrading/coinCard/card.vue

<template>
    <view  :animation="animation">
      <view  class="card" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
        <view class="uni-flex uni-column">
            <view class="uni-flex-item">
                <view class="uni-flex uni-row">
                   <view class="uni-flex-item title" style="line-height: 34px;">我的 <label style=" font-weight: 800;padding: 0 6px; " :class="[coinType[index]]">{{coinType[index]}}</label>賬戶</view>
                   <view class="uni-flex-item" style="text-align: end;"> 
                        <button class="recharge" @click="$emit('recharge')" type="primary" size="mini" >充 值</button>
                        <button class="recharge" @click="$emit('changeMoney')" type="primary" style="margin-left: 10px;" size="mini" >轉 換</button>
                   </view>
                </view>
            </view>
            <view class="uni-flex-item" style="line-height: 32px; font-weight: 800;" :class="[coinType[index]]">
                <label class="coinName">{{coinType[index]}}</label>&nbsp;:&nbsp;
                <label style="padding-left: 12px; font-size: 16px;">{{balabces[coinType[index]]}}</label>
            </view>
            <view class="uni-flex-item" style="line-height: 32px; font-weight: 800;">
                 <label class="coinName">USDT</label>&nbsp;:&nbsp;
                <label class="usdt">{{balabces.USDT}}</label></view>
            <view class="uni-flex-item uni-flex uni-row">
				<!-- <view class="uni-flex uni-column uni-flex-item">
					<view class="uni-flex-item title" style="margin-top: 8px;">今日收益(USDT)</view>
					<view class="uni-flex-item val" style="margin-top: 8px;">{{incomes.todaysettlefee}}</view>
					<view class="uni-flex-item" style="text-align: end;"></view>
				</view> -->
				<view class="uni-flex uni-column uni-flex-item">
					<view class="uni-flex-item title" style="margin-top: 8px;">總收益(<text :class="[coinType[index]]">{{coinType[index]}}</text>)</view>
					<view class="uni-flex-item val" style="margin-top: 8px;">{{incomes.allsettlefee}}</view>
					<view class="uni-flex-item" style="text-align: end;"></view>
				</view>
				<view class="uni-flex uni-column uni-flex-item">
					<view class="uni-flex-item title" style="margin-top: 8px;">總花費(<text :class="[coinType[index]]">{{coinType[index]}}</text>)</view>
					<view class="uni-flex-item val" style="margin-top: 8px;">{{incomes.allpayedfee}}</view>
					<view class="uni-flex-item" style="text-align: end;"></view>
				</view>
				<view class="uni-flex-item uni-flex" style="align-items: center;">
					<button class="recharge" @click="$emit('blanceInfos')" type="primary" size="mini" style="line-height: 34px;padding: 0 10px;">賬戶詳細</button>
				</view>
			</view>
        </view>
      </view>
      <view class="A1"></view>
      <view class="A2"></view>
  </view>
</template>
 
<script>
export default {
  props: {
       balabces:{
            type:Object,
            default:()=>{
                return {
                    BNB:'0.00',
                    ETH:'0.00',
                    BTC:'0.00',
                    USDT:'0.00'
                }
            }
       },
    incomes:{
        type:Object,
        default:()=>{
            return {
                todaysettlefee:0,
                allsettlefee:0,
				allpayedfee:0
            }
        }
    }
  },
  data:()=>{
      return {
          startX: 0, // 觸摸開始時的Y座標
          moveX:0,
          animation:null,
          moveing:false,
          index:0,
          coinType:['BNB','ETH','BTC'],
      }  
  },
  methods:{
      handleTouchStart(e) {
        this.startX = 0
        this.startX = e.touches[0].clientX; // 獲取觸摸開始時的Y座標
      },
      handleTouchMove(e) {
        this.moveX = e.touches[0].clientX - this.startX; // 計算移動的Y距離
      },
      handleTouchEnd(){
          if(Math.abs(this.moveX) > 60 && !this.animation){
              this.moveX = 0
               this.animation = uni.createAnimation() .rotateY(90).step({duration: 330,timingFunction:"ease-in"}).export()
               setTimeout(()=>{
                   this.animation = null
                   this.animation = uni.createAnimation() .rotateY(0).step({duration: 330,timingFunction:"ease-in"}).export()
                   setTimeout(()=>{
                       this.index++
                       if(this.index > 2){
                          this.index = 0
                       }
					   this.$emit('nowCoinType',this.index)
                        this.animation = null
                   },330)
               },330)
               
               // .translate((this.moveX > 0?'100%':'-100%'), 0).step({ duration: 30, timingFunction: "step-end"})
               // .translate((this.moveX > 0?'-100%':'100%'), 0).step({ duration: 10,timingFunction: "step-end"})
               // .translate(0, 0).step({duration: 300,timingFunction:"ease-in"}).export()
               //    this.moveX = 0
               //    this.moveing = true
               //    setTimeout(()=>{
               //        this.index++
               //        if(this.index > 2){
               //            this.index = 0
               //        }
               //        this.moveing = false
               //        this.animation = null
               //    },300)
              
          }
      },
  }
 }
</script>
 
<style scoped lang="scss">
.card {
  width: 100%;
  padding: 12px;
  background-color: #fff;
  margin-top: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  z-index: 99;
  
  .title{
      font-size: 28rpx;
      color: #A4A4A4;
  }
  .tag{
      background-color: #4F5AD7;
      display: inline-block;
      padding: 0px 12px;
      border-radius: 24px;
      font-size: 16px;
      color: #fff;
  }
  .usdt{
      color:#1ABA84; 
      font-size: 18px; 
      padding-left: 12px;
  }
  .val{
      color: #222;
      font-size: 32rpx;
      font-weight: 600;
      text-indent: 4px;
  }
  .tag-1{
      background-color: #D8F9EE;
      display: inline-block;
      padding: 2px 12px;
      border-radius: 12px;
      font-size: 16px;
      color: #1ABA84;
  }
  .recharge{
      background-color: #4F5AD7; border-radius: 32px; font-weight: 800;
  }
}

  .A1,
  .A2 {
  	height: 24px;
  	background: #AAAAB1;
  	position: relative;
  	border-radius: 0 0 24px 24px;
  	width: 94%;
  	margin: -16px auto;
  	z-index: 10;
  
  }
  
  .A2 {
  	z-index: 9;
  	width: 86%;
  	margin-top: -16px;
  	background-color: #7C7D8B;
  }
  .BNB{
      color: #EEB80B !important;
  }
  .ETH{
      color: #5E81F3 !important;
  }
  .BTC{
      color: #F5921A !important;
  }
  .coinName{
      display: inline-block;width: 52px; text-align: center;
  }
</style>