123

dcc

2024-06-29 68a34d95db63a264e7a577051d586ea496c63ca0

 src/page/c2cOrder/payment/components/TradeSuccessDetail.vue

@@ -1,55 +1,70 @@
<template>
  <div style="z-index: 100;overflow: auto;background: rgb(245, 245, 245)"
       class="fixed top-0 left-0 w-full h-full bg-white">
    <div class="pt-12" style="background: #1D91FF">
  <div
    style="z-index: 100; overflow: auto; background: rgb(245, 245, 245)"
    class="fixed top-0 left-0 w-full h-full bg-white"
  >
    <div class="pt-12" style="background: #1d91ff">
      <order-nav>
        <template #default>
          <div class="flex items-center chat flex justify-center">
            <van-badge class="w-35 h-33 mr-22" :content="6">
              <img class="w-full h-full" src="~@/assets/image/c2c/Vector-white.png" alt="">
              <img
                class="w-full h-full"
                src="~@/assets/image/c2c/Vector-white.png"
                alt=""
              />
            </van-badge>
            <span class="font-28 text-white">{{ $t('联系卖家')}}</span>
            <span class="font-28 text-white">{{ $t("联系卖家") }}</span>
          </div>
        </template>
      </order-nav>
      <div class="flex justify-between items-center mt-20 px-32 pb-50 text-white">
      <div
        class="flex justify-between items-center mt-20 px-32 pb-50 text-white"
      >
        <div>
          <div class="font-52">交易成功</div>
          <div class="mt-26 font-26">您已成功购买 2,352.22 USDT</div>
        </div>
        <div>
          <img class="w-92 h-92" src="~@/assets/image/c2c/Group181.png" alt="">
          <img
            class="w-92 h-92"
            src="~@/assets/image/c2c/Group181.png"
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="pt-46 pb-30 bg-white">
      <order-data
          :count="count"
          :total-price="totalPrice"
          :order-number="orderNumber"
          :create-order-time="createOrderTime"
          client-type="买家昵称"
          seller-name="钱多多爱妞商行"
        :count="count"
        :total-price="totalPrice"
        :order-number="orderNumber"
        :create-order-time="createOrderTime"
        client-type="买家昵称"
        seller-name="钱多多爱妞商行"
      >
        <div class="w-full h-16 mb-40" style="background: rgb(245, 245, 245)"></div>
        <div
          class="w-full h-16 mb-40"
          style="background: rgb(245, 245, 245)"
        ></div>
      </order-data>
    </div>
    <div class="px-32 mt-16 bg-white py-39">
      <h2 class="font-400 font-30">交易方式</h2>
      <div class="flex items-center mt-28">
        <div class="w-6 h-28 border-ra" style="background: #E7BB41;"></div>
        <div class="w-6 h-28 border-ra" style="background: #e7bb41"></div>
        <span class="ml-9 font-22 text-grey">银行卡</span>
      </div>
    </div>
    <van-divider/>
    <evaluation class="pb-60 bg-white"/>
    <van-divider />
    <evaluation class="pb-60 bg-white" />
    <div class="mt-16">
      <div class="flex justify-between items-center h-100 px-32 bg-white">
        <div>
          <span class="font-30 text-black">关注此用户</span>
        </div>
        <div class="switch">
          <van-switch v-model="checked"/>
          <van-switch v-model="checked" />
        </div>
      </div>
      <div class="flex justify-between items-center h-100 px-32 mt-16 bg-white">
@@ -57,7 +72,7 @@
          <span class="font-30 text-black">对订单存在疑问</span>
        </div>
        <div>
          <van-icon name="arrow" class="font-700"/>
          <van-icon name="arrow" class="font-700" />
        </div>
      </div>
    </div>
@@ -65,17 +80,8 @@
</template>

<script>
import {
  mapState
} from "vuex";
import {
  Badge,
  Divider,
  Cell,
  CellGroup,
  Switch,
  Icon,
} from "vant";
import { mapState } from "vuex";
import { Badge, Divider, Cell, CellGroup, Switch, Icon } from "vant";
import OrderNav from "@/components/order-nav/OrderNav";
import OrderData from "@/page/c2cOrder/components/order-data/OrderData";
import Evaluation from "@/page/c2cOrder/payment/components/Evaluation";
@@ -85,10 +91,15 @@
  data() {
    return {
      checked: false,
    }
    };
  },
  computed: {
    ...mapState('c2cBuy', ['count', 'totalPrice', 'orderNumber', 'createOrderTime'])
    ...mapState("c2cBuy", [
      "count",
      "totalPrice",
      "orderNumber",
      "createOrderTime",
    ]),
  },
  components: {
    [Badge.name]: Badge,
@@ -100,8 +111,8 @@
    OrderNav,
    OrderData,
    Evaluation,
  }
}
  },
};
</script>

<style lang="scss" scoped>
@@ -117,7 +128,7 @@
  }

  .van-nav-bar {
    background: #1D91FF;
    background: #1d91ff;
  }

  .van-cell {
@@ -136,14 +147,13 @@
}

.switch {
  transform: scale(.7) translateX(20px);
  transform: scale(0.7) translateX(20px);
}

.chat {
  width: 232px;
  height: 64px;
  background: linear-gradient(310.03deg, #1D91FF 14.76%, #B6DBFF 84.98%);
  background: linear-gradient(310.03deg, #1d91ff 14.76%, #b6dbff 84.98%);
  border-radius: 36px 0px 0px 36px;
}

</style>