From f20a554bdb24e9dfde9dc6a69d78595944f61d15 Mon Sep 17 00:00:00 2001
From: mark <mark18340872469@163.com>
Date: 星期二, 25 十月 2022 14:53:57 +0800
Subject: [PATCH] 设备管理 样式调整
---
src/views/productDetail/components/ConfirmOrder.vue | 206 ++++++++++++++++++++++++++++++++-------------------
1 files changed, 128 insertions(+), 78 deletions(-)
diff --git a/src/views/productDetail/components/ConfirmOrder.vue b/src/views/productDetail/components/ConfirmOrder.vue
index 9378241..7dbcee9 100644
--- a/src/views/productDetail/components/ConfirmOrder.vue
+++ b/src/views/productDetail/components/ConfirmOrder.vue
@@ -17,9 +17,10 @@
<el-table-column
prop="productName"
label="浜у搧鍚嶇О"
+ width="200"
></el-table-column>
- <el-table-column label="閰嶇疆璇︽儏">
+ <el-table-column label="閰嶇疆璇︽儏" width="250">
<template slot-scope="scope">
<div style="text-align: left">
<p v-if="scope.row.moduleNames.length > 0">
@@ -30,13 +31,13 @@
>{{ item + " " }}</span
>
</p>
- <p>
+ <p v-if="scope.row.ChCount">
閫氶亾鏁伴噺锛�
- <span>{{ scope.row.chCount || 0 }}</span>
+ <span>{{ scope.row.ChCount }}</span>
</p>
- <p>
+ <p v-if="scope.row.authCount">
鎺堟潈鏁伴噺锛�
- <span>{{ scope.row.authCount || 0 }}</span>
+ <span>{{ scope.row.authCount }}</span>
</p>
<p v-if="scope.row.sdkNames.length > 0">
绠楁硶锛�
@@ -46,6 +47,7 @@
>{{ item + " " }}</span
>
</p>
+
<p>
鏈嶅姟鏃堕暱锛�
<span>{{ scope.row.serveYear + "骞�" }}</span>
@@ -54,7 +56,7 @@
</template>
</el-table-column>
<el-table-column prop="devCount" label="璐拱鏁伴噺"></el-table-column>
- <el-table-column pro="devIdList" label="缁戝畾璁惧">
+ <el-table-column pro="devIdList" label="缁戝畾璁惧" width="250">
<template slot-scope="scope">
<div>
<p v-for="item in scope.row.devIdList" :key="item">
@@ -64,7 +66,11 @@
</template>
</el-table-column>
<el-table-column label="浼樻儬" prop="discount"></el-table-column>
- <el-table-column label="灏忚" prop="productPrice"></el-table-column>
+ <el-table-column label="灏忚">
+ <template>
+ {{ orderInfo.orderMoney }}
+ </template>
+ </el-table-column>
</el-table>
</div>
<div class="title">鏀粯鏂瑰紡</div>
@@ -75,12 +81,12 @@
@click="checkPayway('offpay')"
>
<img
- src="/images/product/姹囨鐏�.png"
+ src="/images/product/pay2.png"
class="moneyIcon"
v-if="this.payWay === 'ali'"
alt=""
/>
- <img class="moneyIcon" src="/images/product/姹囨.png" v-else alt="" />
+ <img class="moneyIcon" src="/images/product/pay.png" v-else alt="" />
<span>绾夸笅姹囨</span>
</div>
<div
@@ -89,17 +95,17 @@
@click="checkPayway('ali')"
>
<img
- src="/images/product/鏀粯瀹�.png"
+ src="/images/product/alipay.png"
v-if="this.payWay === 'ali'"
alt=""
/>
- <img src="/images/product/鏀粯瀹濈伆.png" v-else alt="" />
+ <img src="/images/product/alipay2.png" v-else alt="" />
</div>
</div>
<div class="total">
<div class="money">
- 搴斾粯娆�<span class="number">{{ sum }}鍏�</span>
+ 搴斾粯娆�<span class="number">{{ orderInfo.orderMoney }}鍏�</span>
</div>
<div class="policy">
@@ -128,69 +134,45 @@
<el-button type="primary" @click="assureOnlinePay">瀹屾垚鏀粯</el-button>
</div>
</el-dialog>
- <el-dialog
- class="offpay-instruct-dialog"
- :visible="offPayInstruVisible"
- :show-close="true"
- @close="offPayInstruVisible = false"
- >
- <div slot="title" class="dialog-title">绾夸笅姹囨璇存槑</div>
- <div class="offPay-instruct">
- <h5>璇峰皢娆鹃」姹囧叆浠ヤ笅閾惰璐︽埛锛�</h5>
- <ul>
- <li><label>寮�鎴烽摱琛岋細</label>鍖椾含閾惰澶槼瀹敮琛�</li>
- <li><label>璐� 鍙凤細</label>2000 0031 2025 0000 9136 746</li>
- <li><label>寮�鎴疯琛屽彿锛�</label>313100001792</li>
- <li>
- <label>娆鹃」锛�</label>
- <span class="main-color">{{ sum }}鍏�</span>
- </li>
- </ul>
- <div class="dash-line"></div>
- <ul class="userinfo">
- <li>
- <label>鎮ㄧ殑鐧诲綍鐢ㄦ埛鍚嶏細</label>
- {{ this.username }}
- </li>
- <li>
- <label>鎮ㄧ殑璁㈠崟鍙凤細</label>
- {{ orderId }}
- </li>
- </ul>
- <div class="attentions">
- <p class="title">娉ㄦ剰浜嬮」锛�</p>
- <p>1銆佽鍦ㄨ浆璐︽椂鍔″繀鎻愪緵鐢ㄦ埛鍚嶅拰璁㈠崟缂栧彿锛�</p>
- <p>
- 2銆佽浆璐﹀悗锛岃鍔″繀鐐瑰嚮鈥滄敮浠樺畬鎴�/涓婁紶鍑瘉鈥濇彁浜よ浆璐︿俊鎭紝浠ヤ究璐㈠姟纭锛岃储鍔＄‘璁ゆ椂闂翠负鎻愪氦鍚庣殑1-3涓伐浣滄棩锛�
- </p>
- <p>3銆佹偍鍙互鍦ㄢ�滄垜鐨勮鍗曗�濈偣鍑汇�愭彁浜や粯娆惧嚟璇併�戯紝鏌ョ湅鏈〉涓殑鍐呭</p>
- </div>
- <div class="btns text-center">
- <el-button
- class="btn-cancle"
- @click="offPayInstruVisible = false"
- style="margin-right: 20px"
- >鍙栨秷</el-button
- >
- <router-link
- :to="`/Layout/ManageOrder?confirmOrder=offPay&orderId=${orderId}`"
- >
- <el-button class="btn-assure" type="primary"
- >鏀粯瀹屾垚/涓婁紶鍑瘉</el-button
- >
- </router-link>
- </div>
- </div>
- </el-dialog>
+
+ <div class="offerpay" v-if="showOffpayInstruct || showUploadBox">
+ <OffpayInstruct
+ v-if="showOffpayInstruct"
+ @close="showOffpayInstruct = false"
+ :offerData="{
+ username: username,
+ sum: orderInfo.orderMoney,
+ orderId: orderId,
+ }"
+ @confirm="confirmOrder"
+ ></OffpayInstruct>
+ <UploadBox
+ :orderId="orderId"
+ @close="showUploadBox = false"
+ @back="back"
+ v-if="showUploadBox"
+ @closeAll="closeAll"
+ >
+ </UploadBox>
+ </div>
+
+ <div class="mask" v-if="showOffpayInstruct || showUploadBox"></div>
</div>
</template>
<script>
import { getOrderById } from "@/api/product";
import { resumePay } from "@/api/order";
+import OffpayInstruct from "@/views/productDetail/components/OffpayInstruct";
+import UploadBox from "@/views/productDetail/components/UploadBox";
+
export default {
props: {
orderId: {},
+ },
+ components: {
+ OffpayInstruct,
+ UploadBox,
},
data() {
return {
@@ -202,14 +184,9 @@
username: "",
offPayInstruVisible: false,
onlinePayVisible: false,
+ showOffpayInstruct: false,
+ showUploadBox: false,
};
- },
- computed: {
- sum() {
- let sum = 0;
- sum = this.orders.reduce((prev, next) => prev + next.productPrice, 0);
- return this.numeral(sum).format("0,0.00");
- },
},
mounted() {
this.getResumeList();
@@ -217,8 +194,8 @@
},
methods: {
assureOnlinePay() {
- this.onlinePayVisible = false;
- this.$router.replace("/Layout/ManageOrder");
+ this.$emit("close");
+ this.$router.replace("/personalCenter?id=0");
},
getResumeList() {
getOrderById(this.orderId).then((res) => {
@@ -232,13 +209,26 @@
this.payWay = payway;
},
forPay() {
+ if (!this.policyChecked) {
+ this.$notify({
+ type: "error",
+ message: "璇风‘璁ょ敤鎴锋潯娆�",
+ });
+ return;
+ }
let orderId = this.orderId;
let payMethod = this.payWay;
let _this = this;
if (this.orderInfo.orderMoney == 0) {
resumePay({ orderId, payMethod: 5 }).then((res) => {
if (res.success) {
- this.$router.replace("/Layout/ManageOrder");
+ this.$router.push("/trialCenter");
+ this.$notify({
+ type: "success",
+ message: "鎴愬姛璇曠敤",
+ duration: 2500,
+ offset: 57,
+ });
}
});
return;
@@ -255,7 +245,7 @@
resumePay({ orderId, payMethod: 1 })
.then((res) => {
if (res.success) {
- this.offPayInstruVisible = true;
+ this.showOffpayInstruct = true;
}
})
.catch((e) => {
@@ -278,6 +268,18 @@
},
close() {
this.$emit("close");
+ },
+ closeAll() {
+ this.showUploadBox = false;
+ this.$emit("close");
+ },
+ confirmOrder() {
+ this.showOffpayInstruct = false;
+ this.showUploadBox = true;
+ },
+ back() {
+ this.showOffpayInstruct = true;
+ this.showUploadBox = false;
},
},
};
@@ -385,7 +387,7 @@
.policy {
margin-top: 10px;
display: flex;
- justify-content: end;
+ justify-content: flex-end;
align-items: center;
font-size: 14px;
@@ -399,6 +401,54 @@
}
}
}
+
+ .btns {
+ position: absolute;
+ right: 20px;
+ bottom: 20px;
+ display: flex;
+ justify-content: flex-end;
+ text-align: center;
+ line-height: 40px;
+
+ .confirm {
+ margin-left: 10px;
+ width: 104px;
+ height: 40px;
+ background: #0065ff;
+ color: #fff;
+ }
+
+ .cancel {
+ width: 104px;
+ height: 40px;
+ border: 1px solid #0065ff;
+ color: #0065ff;
+ }
+ }
+
+ .offerpay {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ margin-top: -331px;
+ margin-left: -223px;
+ width: 446px;
+ height: 662px;
+ background: #ffffff;
+ z-index: 2;
+ }
+
+ .mask {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: #000000;
+ opacity: 0.2;
+ z-index: 1;
+ }
}
</style>
--
Gitblit v1.8.0