2 days ago 584860d11b454774b60c71b63d221b5481c0f3bd
src/page/user/compontents/cash-list.vue
@@ -4,108 +4,21 @@
      {{ $t("hj162e") }}!
    </div>
    <div v-else>
      <ul
        class="table-list"
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
      >
        <li class="list-body" v-for="item in list" :key="item.key">
      <ul class="table-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading"
        infinite-scroll-distance="10">
        <li class="list-body" v-for="(item, index) in list" :key="index">
          <div class="order-info-box">
            <div class="order-title">
            <div class="order-title" @click="openDetail(item)">
              <span class="main"> {{ $t("hjtxyhk") }} </span>
              <span class="payNumber">{{ $USD }}{{ item.withAmt }}</span>
              <span class="red pull-right">
                {{
                  item.withStatus == 1
                    ? $t("hjtxcg")
                    : item.withStatus == 2
                    ? $t("hjtxsb")
                    : item.withStatus == 3
                    ? $t("hjddqx")
                    : $t("hjshz")
                }}
                <i
                  v-if="item.withStatus == 1"
                  class="iconfont icon-tongguo4 animated bounceIn"
                ></i>
                <i
                  v-if="item.withStatus == 0"
                  class="iconfont icon-dengdai animated bounceInDown"
                ></i>
                <i
                  v-if="item.withStatus == 2"
                  class="iconfont icon-failure animated bounceInDown"
                ></i>
                <i
                  v-if="item.withStatus == 3"
                  class="iconfont icon-iconfontweitongguo animated bounceInDown"
                ></i>
              <span class="payNumber">
                {{ item.withAmt | _toLocaleString }}
              </span>
              <!-- <span class="secondary ">123456789</span> -->
            </div>
            <div class="order-info">
              <p class="clearfix">
                <span class="col-xs-6">
                  {{ $t("hj44") }}:
                  <b class="space"> {{ $USD }} {{ item.withFee }} </b>
                </span>
                <!-- <span class="col-xs-6">实际到账金额:<b class="space" style="font-size:0.26rem">{{item.withAmt - item.withFee}}</b>元</span>                         -->
              </p>
              <p class="clearfix">
                <span class="col-xs-12"
                  >{{ $t("hj247") }}:<b class="space"
                    >{{ item.bankName }}-{{ item.bankAddress }}</b
                  ></span
                >
              </p>
              <p class="clearfix">
                <span class="col-xs-12"
                  >{{ $t("hjkh") }}:<b class="space">{{ item.bankNo }}</b></span
                >
              </p>
              <p v-if="item.withStatus == 3" class="clearfix">
                <span class="col-xs-12"
                  >{{ $t("hjqxyy") }}:<b class="space">{{
                    item.withMsg
                  }}</b></span
                >
              </p>
              <p v-if="item.withStatus == 2" class="clearfix">
                <span class="col-xs-12"
                  >{{ $t("hj201") }}:<b class="space">{{
                    item.withMsg
                  }}</b></span
                >
              </p>
              <p class="clearfix">
                <span class="secondary col-xs-6"
                  >{{ $t("sj") }}:
                  <b v-if="item.applyTime">{{
                    new Date(item.applyTime) | timeFormat
                  }}</b>
                  <b v-else></b>
                </span>
              </p>
            </div>
            <div v-if="item.withStatus == 0" class="order-foot clearfix">
              <div @click="cancle(item.id)" class="foot-btn">
                <i class="font-icon"></i>
                {{ $t("hjqxtx") }}
              </div>
              <span class="pull-right" :class="getWithdrawStatusClass(item.withStatus)">
                {{ getWithdrawStatusText(item.withStatus) }}
                <i class="iconfont animated" :class="getWithdrawStatusIconClass(item.withStatus)"></i>
              </span>
            </div>
          </div>
          <!-- <div class="capital">
              <div class="pro">
                  股票:300092/开山股份 <span class="pull-right">金额:50.241</span>
              </div>
              <div class=" clearfix">
                  <div class="col-xs-8">01-21 13:22</div>
                  <div class="col-xs-4 ">
                      <span class="pull-right">交易状态</span>
                  </div>
              </div>
          </div> -->
        </li>
      </ul>
      <div v-show="loading" class="load-all text-center">
@@ -116,12 +29,26 @@
        {{ $t("hj236") }}
      </div>
    </div>
    <van-popup v-model="detailVisible" position="bottom" round closeable :style="{ maxHeight: '75%' }"
      class="withdraw-detail-popup">
      <div class="detail-popup-inner">
        <div class="detail-popup-title">{{ $t("hj238") }}</div>
        <div class="detail-popup-body">
          <div v-for="row in detailRows" :key="row.key" class="detail-row">
            <span class="detail-label">{{ row.label }}</span>
            <span class="detail-value">{{ row.value }}</span>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
import * as api from "@/axios/api";
import { _toLocaleString } from "@/utils/filter";
export default {
  components: {},
@@ -132,24 +59,133 @@
      list: [],
      pageNum: 1,
      pageSize: 15,
      detailVisible: false,
      detailItem: null
    };
  },
  computed: {
    detailRows() {
      return this.buildDetailRows(this.detailItem);
    }
  },
  watch: {},
  computed: {},
  created() {},
  created() { },
  mounted() {
    this.getListDetail();
  },
  methods: {
    getWithdrawStatusClass(status) {
      return status == 1 ? "green" : "red";
    },
    getWithdrawStatusIconClass(status) {
      if (status == 1) return "icon-tongguo4 bounceIn";
      if (status == 2) return "icon-failure bounceInDown";
      if (status == 3) return "icon-iconfontweitongguo bounceInDown";
      return "icon-dengdai bounceInDown";
    },
    getWithdrawStatusText(status) {
      if (status == 1) return this.$t("hjtxcg");
      if (status == 2) return this.$t("hjtxsb");
      if (status == 3) return this.$t("hjddqx");
      return this.$t("hjshz");
    },
    openDetail(item) {
      this.detailItem = item ? { ...item } : null;
      this.detailVisible = true;
    },
    /** 与精简前列表展示字段一致,不包含其它接口字段 */
    buildDetailRows(item) {
      if (!item || typeof item !== "object") return [];
      const dash = "—";
      const amt =
        item.withAmt !== undefined && item.withAmt !== null && item.withAmt !== ""
          ? _toLocaleString(item.withAmt)
          : dash;
      const fee =
        item.withFee !== undefined && item.withFee !== null && item.withFee !== ""
          ? _toLocaleString(item.withFee)
          : dash;
      const bankParts = [item.bankName, item.bankAddress].filter(
        v => v !== undefined && v !== null && String(v).trim() !== ""
      );
      const bankLine = bankParts.length ? bankParts.join("-") : dash;
      const bankNo =
        item.bankNo !== undefined &&
          item.bankNo !== null &&
          String(item.bankNo).trim() !== ""
          ? String(item.bankNo)
          : dash;
      let timeStr = dash;
      if (item.applyTime) {
        timeStr = this.$moment(item.applyTime).format("DD-MM-YYYY hh:mm:ss A");
      }
      const rows = [
        {
          key: "withAmt",
          label: this.$t("hjtxyhk"),
          value: amt
        },
        {
          key: "withStatus",
          label: this.$t("状态"),
          value: this.getWithdrawStatusText(item.withStatus)
        },
        {
          key: "withFee",
          label: this.$t("hj44"),
          value: fee
        },
        {
          key: "bank",
          label: this.$t("hj247"),
          value: bankLine
        },
        {
          key: "bankNo",
          label: this.$t("hjkh"),
          value: bankNo
        }
      ];
      if (item.withStatus == 3) {
        rows.push({
          key: "withMsg-cancel",
          label: this.$t("hjqxyy"),
          value:
            item.withMsg !== undefined &&
              item.withMsg !== null &&
              String(item.withMsg).trim() !== ""
              ? String(item.withMsg)
              : dash
        });
      }
      if (item.withStatus == 2) {
        rows.push({
          key: "withMsg-fail",
          label: this.$t("hj201"),
          value:
            item.withMsg !== undefined &&
              item.withMsg !== null &&
              String(item.withMsg).trim() !== ""
              ? String(item.withMsg)
              : dash
        });
      }
      rows.push({
        key: "applyTime",
        label: this.$t("sj"),
        value: timeStr
      });
      return rows;
    },
    async getListDetail() {
      let opt = {
        withStatus: "", // 提现状态 0已提交,1转账成功,2转账失败
        withStatus: "",
        pageNum: this.pageNum,
        pageSize: 15,
        pageSize: 15
      };
      let data = await api.withdrawList(opt);
      if (data.status === 0) {
        data.data.list.forEach((element) => {
        data.data.list.forEach(element => {
          this.list.push(element);
        });
      } else {
@@ -161,16 +197,13 @@
        return;
      }
      this.loading = true;
      // 加载下一页
      this.pageNum++;
      await this.getListDetail();
      this.loading = false;
    },
    async cancle(val) {
      // 取消提现
      // MessageBox.confirm('您确定要平仓吗?').then(async action => {
      let opt = {
        withId: val,
        withId: val
      };
      let data = await api.canceloutMoney(opt);
      if (data.status === 0) {
@@ -180,19 +213,84 @@
      } else {
        Toast(data.msg);
      }
      // });
    },
  },
    }
  }
};
</script>
<style lang="less" scoped>
.wrapper {
  // padding-top: 0.9rem;
  background-color: #fff !important;
  height: 95vh;
}
.payNumber {
  font-size: 0.3rem;
  color: #ff8000;
}
.order-info--compact {
  padding-bottom: 0;
}
.detail-btn-wrap {
  padding: 0.12rem 0.2rem 0.2rem;
}
.detail-btn {
  font-size: 0.26rem;
}
/deep/ .withdraw-detail-popup .van-popup__close-icon {
  color: #666;
}
.detail-popup-inner {
  padding: 0.36rem 0.32rem 0.48rem;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.detail-popup-title {
  font-size: 0.34rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 0.28rem;
  color: #14181f;
}
.detail-popup-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.22rem 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.28rem;
  line-height: 1.45;
}
.detail-row:last-child {
  border-bottom: none;
}
.detail-label {
  color: #888;
  flex: 0 0 38%;
  padding-right: 0.2rem;
  word-break: break-word;
}
.detail-value {
  color: #333;
  flex: 1;
  text-align: right;
  word-break: break-word;
}
.table-list {
@@ -207,7 +305,6 @@
    .capital {
      padding: 0.2rem;
      // border-radius: 0.2rem;
      border-bottom: 0.01rem solid #3f444a;
      div {