From 25b2ba1cf86bc3439e7ad2acf2cd4a9ea7e4b0ed Mon Sep 17 00:00:00 2001
From: dcc <dcc@163.com>
Date: Fri, 28 Jun 2024 09:28:04 +0800
Subject: [PATCH] 123
---
src/page/c2cOrder/payment/index.vue | 140 +++++++++++++++++++++++++++++-----------------
1 files changed, 89 insertions(+), 51 deletions(-)
diff --git a/src/page/c2cOrder/payment/index.vue b/src/page/c2cOrder/payment/index.vue
index 8a3bb2e..4adc75e 100644
--- a/src/page/c2cOrder/payment/index.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.9.3