first commit

huzheng12

2024-05-06 3ed2cb78a690b64c3b2646d35e1500081186dfa3

 src/page/c2cOrder/payment/Payment.vue

@@ -1,11 +1,14 @@
<template>
  <div id="full">
    <order-nav/>
    <order-nav />
    <div class="mt-10 text-center tabBackground text-black">
      <div>
        <h1 class="font-700 font-40">{{$t('请向卖家付款')}}</h1>
        <div v-if="time" class="flex justify-center items-center mt-18 font-30 font-700">
          <span>{{$t('订单将在')}}</span>
        <h1 class="font-700 font-40">{{ $t("请向卖家付款") }}</h1>
        <div
          v-if="time"
          class="flex justify-center items-center mt-18 font-30 font-700"
        >
          <span>{{ $t("订单将在") }}</span>
          <van-count-down class="flex font-700" :time="time">
            <template #default="timeData">
              <span class="block">{{ timeData.hours }}</span>
@@ -13,125 +16,171 @@
              <span class="block">{{ timeData.minutes }}</span>
            </template>
          </van-count-down>
          <span>{{$t('后取消')}}</span>
          <span>{{ $t("后取消") }}</span>
        </div>
        <div class="flex justify-center items-end mt-42 font-64 font-700">
          <span class="relative bottom-5 font-48">￥</span>
          <span>{{ (totalPrice * 1).toLocaleString() }}.00</span>
          <img class="relative bottom-10 left-25 w-30 h-33" src="~@/assets/image/c2c/Group1168.png" alt="">
          <img
            class="relative bottom-10 left-25 w-30 h-33"
            src="~@/assets/image/c2c/Group1168.png"
            alt=""
          />
        </div>
        <div class="flex justify-center items-center mt-44">
          <img class="w-36 h-34 mr-22" src="~@/assets/image/c2c/Vector.png" alt="">
          <span class=" font-32">{{$t('联系卖家')}}</span>
          <img
            class="w-36 h-34 mr-22"
            src="~@/assets/image/c2c/Vector.png"
            alt=""
          />
          <span class="font-32">{{ $t("联系卖家") }}</span>
        </div>
      </div>
    </div>
    <div class="w-full pt-46 pb-58 mt-40" style="background: #fafafa">
      <div class="ml-50 pl-38 pr-32 msg  relative">
        <div class="circle absolute top-0 left-0 z-10 w-45 h-45 flex justify-center items-center bg-blue text-white font-26"
             style="border-radius: 50%">1
      <div class="ml-50 pl-38 pr-32 msg relative">
        <div
          class="circle absolute top-0 left-0 z-10 w-45 h-45 flex justify-center items-center bg-blue text-white font-26"
          style="border-radius: 50%"
        >
          1
        </div>
        <div
            class="circle absolute bottom-28 left-0 z-10 w-45 h-45 flex justify-center items-center bg-blue text-white font-26"
            style="border-radius: 50%">2
          class="circle absolute bottom-28 left-0 z-10 w-45 h-45 flex justify-center items-center bg-blue text-white font-26"
          style="border-radius: 50%"
        >
          2
        </div>
        <div class="font-28">{{$t('离开APP,登录您与APP上的验证姓名相匹配的银行账户或其他支付方式，转到卖家的以下账户。')}}</div>
        <div class="font-28">
          {{
            $t(
              "离开APP,登录您与APP上的验证姓名相匹配的银行账户或其他支付方式，转到卖家的以下账户。"
            )
          }}
        </div>
        <div class="mt-50 pt-32 px-22 pb-38 bg-white rounded-2xl msg-wrapper">
          <div class="flex items-center">
            <div class="w-6 h-28 rounded-xl mr-20" style="background: #E7BB41;"></div>
            <span class="ml-8 font-30 text-black">{{$t('银行卡')}}</span>
            <div
              class="w-6 h-28 rounded-xl mr-20"
              style="background: #e7bb41"
            ></div>
            <span class="ml-8 font-30 text-black">{{ $t("银行卡") }}</span>
          </div>
          <van-cell-group>
            <van-cell class="order-number"  :title="$t('姓名')">
            <van-cell class="order-number" :title="$t('姓名')">
              <template #default>
                <div class="flex justify-end">
                  <span class="mr-14">{{$t('鸿运当头')}}</span>
                  <img class="relative top-8 w-25 h-29" src="~@/assets/image/c2c/Group1168.png" alt="">
                  <span class="mr-14">{{ $t("鸿运当头") }}</span>
                  <img
                    class="relative top-8 w-25 h-29"
                    src="~@/assets/image/c2c/Group1168.png"
                    alt=""
                  />
                </div>
              </template>
            </van-cell>
            <van-cell class="order-number"  :title="$t('银行卡号')">
            <van-cell class="order-number" :title="$t('银行卡号')">
              <template #default>
                <div class="flex justify-end">
                  <span class="mr-14">{{$t('请点击右上角按钮联系商家索取')}}</span>
                  <img class="relative top-8 w-25 h-29" src="~@/assets/image/c2c/Group1168.png" alt="">
                  <span class="mr-14">{{
                    $t("请点击右上角按钮联系商家索取")
                  }}</span>
                  <img
                    class="relative top-8 w-25 h-29"
                    src="~@/assets/image/c2c/Group1168.png"
                    alt=""
                  />
                </div>
              </template>
            </van-cell>
            <van-cell class="order-number" :title="$t('银行名称')">
              <template #default>
                <div class="flex justify-end">
                  <span class="mr-14">{{$t('请仔细阅读下方交易条款')}}</span>
                  <img class="relative top-8 w-25 h-29" src="~@/assets/image/c2c/Group1168.png" alt="">
                  <span class="mr-14">{{ $t("请仔细阅读下方交易条款") }}</span>
                  <img
                    class="relative top-8 w-25 h-29"
                    src="~@/assets/image/c2c/Group1168.png"
                    alt=""
                  />
                </div>
              </template>
            </van-cell>
            <van-cell class="order-number" :title="$t('开户支行')">
              <template #default>
                <div class="flex justify-end">
                  <span class="mr-14">{{$t('请按照下方交易条款提供相关资料')}}</span>
                  <img class="relative top-8 w-25 h-29" src="~@/assets/image/c2c/Group1168.png" alt="">
                  <span class="mr-14">{{
                    $t("请按照下方交易条款提供相关资料")
                  }}</span>
                  <img
                    class="relative top-8 w-25 h-29"
                    src="~@/assets/image/c2c/Group1168.png"
                    alt=""
                  />
                </div>
              </template>
            </van-cell>
          </van-cell-group>
        </div>
        <div class="mt-39 font-28">{{$t('付款后，返回 XX APP，务必点击下方按钮“我已付款”通知卖家。')}}</div>
        <div class="mt-39 font-28">
          {{ $t("付款后，返回 XX APP，务必点击下方按钮“我已付款”通知卖家。") }}
        </div>
      </div>
    </div>
    <div class="mt-92 px-40 flex font-30">
      <van-button
          class="w-244 h-80 mr-16 rounded-2xl text-black bg-grey border-none"
          type="primary"
          @click="show = true"
      >{{$t('遇到问题？')}}</van-button>
        class="w-244 h-80 mr-16 rounded-2xl text-black bg-grey border-none"
        type="primary"
        @click="show = true"
        >{{ $t("遇到问题？") }}</van-button
      >
      <van-button
          class="flex-1 h-80 rounded-2xl bg-blue text-white border-none"
          type="primary"
          @click="$router.push({path: '/paymentDetail'})"
      >{{$t('我已付款，通知卖家')}}</van-button>
        class="flex-1 h-80 rounded-2xl bg-blue text-white border-none"
        type="primary"
        @click="$router.push({ path: '/paymentDetail' })"
        >{{ $t("我已付款，通知卖家") }}</van-button
      >
    </div>
<!--  遇到问题  -->
    <!--  遇到问题  -->
    <div>
      <van-popup  class="w-full h-full" v-model="show" position="right">
        <question @back="back" :time="time"/>
      <van-popup class="w-full h-full" v-model="show" position="right">
        <question @back="back" :time="time" />
      </van-popup>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";
import {Cell, CellGroup, CountDown,Button,Popup,} from "vant"
import { mapState } from "vuex";
import { Cell, CellGroup, CountDown, Button, Popup } from "vant";
import OrderNav from "@/components/order-nav/OrderNav";
import Question from "@/page/c2cOrder/payment/components/Question";

export default {
  name: "Payment",
  props: ['time'],
  props: ["time"],
  data() {
    return {
     show: false,
    }
      show: false,
    };
  },
  methods: {
    back() {
      this.show = false;
    }
    },
  },
  computed: {
    ...mapState('c2cBuy', ["totalPrice"])
    ...mapState("c2cBuy", ["totalPrice"]),
  },
  components: {
    [CountDown.name]: CountDown,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Button.name]:Button,
    [Popup.name]:Popup,
    [Button.name]: Button,
    [Popup.name]: Popup,
    OrderNav,
    Question,
  }
}
  },
};
</script>

<style lang="scss" scoped>
@@ -146,14 +195,14 @@
  .van-cell {
    margin-top: 28px;

    .van-cell__title, .van-cell__value {
    .van-cell__title,
    .van-cell__value {
      font-size: 26px;
    }
  }
}

.msg {

  //border-left: 1px solid #EAEBEE;

  &:after {
@@ -163,16 +212,15 @@
    left: 0;
    width: 1px;
    height: 93%;
    background: #EAEBEE;
    background: #eaebee;
  }
}

.msg-wrapper {
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.circle {
  transform: translateX(-50%);
}

</style>