123

dcc

2024-06-28 25b2ba1cf86bc3439e7ad2acf2cd4a9ea7e4b0ed

 src/page/c2cOrder/payment/index.vue

@@ -1,6 +1,6 @@
<template>
  <div id="full">
    <order-nav/>
    <order-nav />
    <div class="mt-10 text-center tabBackground text-black">
      <div>
        <h1 class="font-700 font-40">请向卖家付款</h1>
@@ -18,28 +18,45 @@
        <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">联系卖家</span>
          <img
            class="w-36 h-34 mr-22"
            src="~@/assets/image/c2c/Vector.png"
            alt=""
          />
          <span class="font-32">联系卖家</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">离开APP,登录您与APP上的验证姓名相匹配的银行账户或其他支付方式，转到卖家的以下账户。</div>
        <div class="font-28">
          离开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>
            <div
              class="w-6 h-28 rounded-xl mr-20"
              style="background: #e7bb41"
            ></div>
            <span class="ml-8 font-30 text-black">银行卡</span>
          </div>
          <van-cell-group>
@@ -47,7 +64,11 @@
              <template #default>
                <div class="flex justify-end">
                  <span class="mr-14">鸿运当头</span>
                  <img class="relative top-8 w-25 h-29" src="~@/assets/image/c2c/Group1168.png" alt="">
                  <img
                    class="relative top-8 w-25 h-29"
                    src="~@/assets/image/c2c/Group1168.png"
                    alt=""
                  />
                </div>
              </template>
            </van-cell>
@@ -55,7 +76,11 @@
              <template #default>
                <div class="flex justify-end">
                  <span class="mr-14">请点击右上角按钮联系商家索取</span>
                  <img class="relative top-8 w-25 h-29" src="~@/assets/image/c2c/Group1168.png" alt="">
                  <img
                    class="relative top-8 w-25 h-29"
                    src="~@/assets/image/c2c/Group1168.png"
                    alt=""
                  />
                </div>
              </template>
            </van-cell>
@@ -63,7 +88,11 @@
              <template #default>
                <div class="flex justify-end">
                  <span class="mr-14">请仔细阅读下方交易条款</span>
                  <img class="relative top-8 w-25 h-29" src="~@/assets/image/c2c/Group1168.png" alt="">
                  <img
                    class="relative top-8 w-25 h-29"
                    src="~@/assets/image/c2c/Group1168.png"
                    alt=""
                  />
                </div>
              </template>
            </van-cell>
@@ -71,42 +100,50 @@
              <template #default>
                <div class="flex justify-end">
                  <span class="mr-14">请按照下方交易条款提供相关资料</span>
                  <img class="relative top-8 w-25 h-29" src="~@/assets/image/c2c/Group1168.png" alt="">
                  <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">付款后，返回 XX APP，务必点击下方按钮“我已付款”通知卖家。</div>
        <div class="mt-39 font-28">
          付款后，返回 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"
      >遇到问题？</van-button>
        class="w-244 h-80 mr-16 rounded-2xl text-black bg-grey border-none"
        type="primary"
        @click="show = true"
        >遇到问题？</van-button
      >
      <van-button
          class="flex-1 h-80 rounded-2xl bg-blue text-white border-none"
          type="primary"
          @click="onPayed"
      >我已付款，通知卖家</van-button>
        class="flex-1 h-80 rounded-2xl bg-blue text-white border-none"
        type="primary"
        @click="onPayed"
        >我已付款，通知卖家</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";
import otcApi from '@/API/otc';
import otcApi from "@/API/otc";

export default {
  name: "payMent",
@@ -115,39 +152,41 @@
    detail: {
      type: Object,
      default() {
        return {}
      }
    }
        return {};
      },
    },
  },
  data() {
    return {
     show: false,
    }
      show: false,
    };
  },
  methods: {
    back() {
      this.show = false;
    },
    onPayed() {
      otcApi.ctcOrderPayFinish({}).then(res => {
        console.log(res)
        this.$router.push({path: '/paymentDetail?id=' + this.$route.query.order_no})
      })
    }
      otcApi.ctcOrderPayFinish({}).then((res) => {
        console.log(res);
        this.$router.push({
          path: "/paymentDetail?id=" + this.$route.query.order_no,
        });
      });
    },
  },
  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>
@@ -162,14 +201,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 {
@@ -179,16 +218,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>