|
|
@@ -1,149 +1,164 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
|
|
- xsi:schemaLocation="https://www.thymeleaf.org ">
|
|
|
-<head>
|
|
|
- <title>采美365网-支付订单</title>
|
|
|
- <template th:replace="components/head-link"></template>
|
|
|
- <link th:href="@{/css/pay/caimei-paylist.css(v=${version})}" rel="stylesheet" type="text/css">
|
|
|
- <template th:replace="components/analysis"></template>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
-<!-- 引用头部 -->
|
|
|
-<template th:replace="components/header"></template>
|
|
|
-<!-- 内容 -->
|
|
|
-<div class="pay-container weixin clear" id="payContainer" >
|
|
|
- <div v-if="loginLoading" class="loading" :style="{opacity: loginLoading ? '1' :'0'}">
|
|
|
- <img src="/img/base/loading.gif">
|
|
|
- </div>
|
|
|
- <div class="container" :class="{active: isRequest}" v-show="isRequest">
|
|
|
- <div class="pay-content">
|
|
|
- <div class="pay-title" v-if="!showPayUnder">
|
|
|
- <div class="pay-title-le">支付订单</div>
|
|
|
- </div>
|
|
|
- <div class="pay-list-title" v-if="isPC">
|
|
|
- <div class="pay-list-view t1">商品信息</div>
|
|
|
- <div class="pay-list-view t2">单价(元)</div>
|
|
|
- <div class="pay-list-view t3">规格</div>
|
|
|
- <div class="pay-list-view t3">数量</div>
|
|
|
- <div class="pay-list-view t4">小计(元)</div>
|
|
|
- </div>
|
|
|
- <div class="pay-list-cell clear" v-for="(list, index) in list" :key="index" :style="{paddingBottom : !isPC && list.paystaut == 0 ? '13.4vw' : '20px'}">
|
|
|
- <div class="list-cell-title">
|
|
|
- <div class="list-cell-logo">
|
|
|
- <img :src="list.shopLogo" alt="">
|
|
|
- </div>
|
|
|
- <div class="list-cell-name" v-text="list.shopName"></div>
|
|
|
- </div>
|
|
|
- <div class="list-cell-content clear" v-for="(pros, prosIndex) in list.orderProductList" :key="prosIndex">
|
|
|
- <div class="list-cell-pros p1">
|
|
|
- <div class="cell-pros-image">
|
|
|
- <img :src="pros.image" alt="">
|
|
|
- <span v-if="pros.giftType==2" class="tip">赠品</span>
|
|
|
- </div>
|
|
|
- <div class="cell-pros-name">
|
|
|
- <p v-text="pros.name"></p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="list-cell-pros p2">
|
|
|
- <span v-if="!isPC">单价:</span>
|
|
|
- <p>￥{{pros.price | NumFormat}}</p>
|
|
|
- </div>
|
|
|
- <div class="list-cell-pros p3">
|
|
|
- <span v-if="!isPC">规格:</span>
|
|
|
- <p>{{ pros.productUnit }}</p>
|
|
|
- </div>
|
|
|
- <div class="list-cell-pros p3">
|
|
|
- <span v-if="!isPC">数量:</span>
|
|
|
- <p>{{ pros.num }}</p>
|
|
|
- </div>
|
|
|
- <div class="list-cell-pros p4">
|
|
|
- <span v-if="!isPC">小计(元):</span>
|
|
|
- <p>￥{{pros.totalAmount | NumFormat}}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="list-cell-button">
|
|
|
- <div class="list-cell-vleft btn">
|
|
|
- <div class="list-cell-btn" v-if="list.onlinePay === 0 || list.onlinePay === 1" @click="handlePayOrder(list.shopOrderId)">线上支付</div>
|
|
|
- <div class="list-cell-btn none" v-if="list.onlinePay === 0 || list.onlinePay === 2" @click="handleAlert(list)">线下转账</div>
|
|
|
- <div class="list-cell-msg" v-if="list.obligation >0">
|
|
|
- 待付：<span class="red">￥{{list.obligation | NumFormat}}</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="list-cell-button">
|
|
|
- <div class="list-cell-msg">
|
|
|
- 运费：<span class="none">{{ list.postageInfo }}</span>
|
|
|
- </div>
|
|
|
- <div class="list-cell-msg" v-if="list.receiptAmount >0">
|
|
|
- 已付：
|
|
|
- <span class="none">
|
|
|
- ￥{{list.receiptAmount | NumFormat}}
|
|
|
- <span v-if="list.accountAmount > 0">
|
|
|
- (余额抵扣：￥{{list.accountAmount | NumFormat}})
|
|
|
- </span>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="list-cell-button">
|
|
|
- <div class="list-cell-msg" v-if="list.couponAmount >0">
|
|
|
- 优惠：<span class="none">￥{{list.couponAmount | NumFormat}}</span>
|
|
|
- </div>
|
|
|
- <div class="list-cell-msg" v-if="list.promotionFullReduction >0">
|
|
|
- 促销满减：<span class="none">￥{{list.promotionFullReduction | NumFormat}}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="pay-alert-content" v-if="isPayBigAlert" :class="isPayBigAlert ? 'show' : 'none'">
|
|
|
- <div class="pay-big-alert">
|
|
|
- <div class="title"><p>线下转账信息</p><i class="icon-close" @click.stop="closeBigAlert"></i></div>
|
|
|
- <div class="content" v-if="shopPay.bankAccount">
|
|
|
- <div class="content-top">
|
|
|
- <div class="content-viw">
|
|
|
- 待付金额：<span class="red">￥{{ obligation | NumFormat }}</span>
|
|
|
- </div>
|
|
|
- <div class="content-viw">
|
|
|
- 开户行：<span class="none">{{ shopPay.bankName }}</span>
|
|
|
- </div>
|
|
|
- <div class="content-viw">
|
|
|
- 银行卡号：<span class="none">{{ shopPay.bankAccount }}</span>
|
|
|
- </div>
|
|
|
- <div class="content-viw">
|
|
|
- 公司名称：<span class="none">{{ shopPay.bankAccountName }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="content-bot">
|
|
|
- <p>请将订单款项转账至上述账号，转账完成后</p>
|
|
|
- <p>截图支付凭证，并在订单页面上传支付凭证。</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="content" v-else>
|
|
|
- <div class="content-top">
|
|
|
- <div class="content-viw">
|
|
|
- <img class="wx_code" src="/img/base/Wecha.png" alt="微信客服">
|
|
|
- </div>
|
|
|
- <div class="content-viw none">
|
|
|
- 待付金额：<span class="red">￥{{ obligation | NumFormat }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="content-bot">
|
|
|
- <p>请用微信扫码添加采美客服</p>
|
|
|
- <p>客服会为您推荐最合适的线下转账方式。</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</div>
|
|
|
-<!-- 引入底部 -->
|
|
|
-<template th:replace="components/footer"></template>
|
|
|
-<template th:replace="components/foot-link"></template>
|
|
|
-<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
|
|
|
-<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/pay.service.js(v=${version})}"></script>
|
|
|
-<script charset="utf-8" type="text/javascript" th:src="@{/lib/qrcode.min.js(v=${version})}"></script>
|
|
|
-<script charset="utf-8" type="text/javascript" th:src="@{/js/mixins/bankMixins.js(v=${version})}"></script>
|
|
|
-<script charset="utf-8" type="text/javascript" th:src="@{/js/pay/caimei-paylist.js(v=${version})}"></script>
|
|
|
-
|
|
|
-</body>
|
|
|
-</html>
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
|
|
+ xsi:schemaLocation="https://www.thymeleaf.org ">
|
|
|
+<head>
|
|
|
+ <title>采美365网-支付订单</title>
|
|
|
+ <template th:replace="components/head-link"></template>
|
|
|
+ <link th:href="@{/css/pay/caimei-paylist.css(v=${version})}" rel="stylesheet" type="text/css">
|
|
|
+ <template th:replace="components/analysis"></template>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<!-- 引用头部 -->
|
|
|
+<template th:replace="components/header"></template>
|
|
|
+<!-- 内容 -->
|
|
|
+<div class="pay-container weixin clear" id="payContainer" >
|
|
|
+ <div v-if="loginLoading" class="loading" :style="{opacity: loginLoading ? '1' :'0'}">
|
|
|
+ <img src="/img/base/loading.gif">
|
|
|
+ </div>
|
|
|
+ <div class="container" :class="{active: isRequest}" v-show="isRequest">
|
|
|
+ <div class="pay-content">
|
|
|
+ <div class="pay-title" v-if="!showPayUnder">
|
|
|
+ <div class="pay-title-le">支付订单</div>
|
|
|
+ </div>
|
|
|
+ <div class="pay-list-title" v-if="isPC">
|
|
|
+ <div class="pay-list-view t1">商品信息</div>
|
|
|
+ <div class="pay-list-view t2">单价(元)</div>
|
|
|
+ <div class="pay-list-view t3">规格</div>
|
|
|
+ <div class="pay-list-view t3">数量</div>
|
|
|
+ <div class="pay-list-view t4">小计(元)</div>
|
|
|
+ </div>
|
|
|
+ <div class="pay-list-cell clear" v-for="(list, index) in list" :key="index" :style="{paddingBottom : !isPC && list.paystaut == 0 ? '13.4vw' : '20px'}">
|
|
|
+ <div class="list-cell-title">
|
|
|
+ <div class="list-cell-logo">
|
|
|
+ <img :src="list.shopLogo" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="list-cell-name" v-text="list.shopName"></div>
|
|
|
+ </div>
|
|
|
+ <div class="list-cell-content clear" v-for="(pros, prosIndex) in list.orderProductList" :key="prosIndex">
|
|
|
+ <div class="list-cell-pros p1">
|
|
|
+ <div class="cell-pros-image">
|
|
|
+ <img :src="pros.image" alt="">
|
|
|
+ <span v-if="pros.giftType==2" class="tip">赠品</span>
|
|
|
+ </div>
|
|
|
+ <div class="cell-pros-name">
|
|
|
+ <p v-text="pros.name"></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list-cell-pros p2">
|
|
|
+ <span v-if="!isPC">单价:</span>
|
|
|
+ <p>￥{{pros.price | NumFormat}}</p>
|
|
|
+ </div>
|
|
|
+ <div class="list-cell-pros p3">
|
|
|
+ <span v-if="!isPC">规格:</span>
|
|
|
+ <p>{{ pros.productUnit }}</p>
|
|
|
+ </div>
|
|
|
+ <div class="list-cell-pros p3">
|
|
|
+ <span v-if="!isPC">数量:</span>
|
|
|
+ <p>{{ pros.num }}</p>
|
|
|
+ </div>
|
|
|
+ <div class="list-cell-pros p4">
|
|
|
+ <span v-if="!isPC">小计(元):</span>
|
|
|
+ <p>￥{{pros.totalAmount | NumFormat}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list-cell-button">
|
|
|
+ <div class="list-cell-vleft btn">
|
|
|
+ <div class="list-cell-btn" v-if="list.onlinePay === 0 || list.onlinePay === 1" @click="handlePayOrder(list.shopOrderId)">线上支付</div>
|
|
|
+ <div class="list-cell-btn none" v-if="list.onlinePay === 0 || list.onlinePay === 2" @click="handleAlert(list)">线下转账</div>
|
|
|
+ <div class="list-cell-msg" v-if="list.obligation >0">
|
|
|
+ 待付：<span class="red">￥{{list.obligation | NumFormat}}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list-cell-button">
|
|
|
+ <div class="list-cell-msg">
|
|
|
+ 运费：<span class="none">{{ list.postageInfo }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="list-cell-msg" v-if="list.receiptAmount >0">
|
|
|
+ 已付：
|
|
|
+ <span class="none">
|
|
|
+ ￥{{list.receiptAmount | NumFormat}}
|
|
|
+ <span v-if="list.accountAmount > 0">
|
|
|
+ (余额抵扣：￥{{list.accountAmount | NumFormat}})
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list-cell-button">
|
|
|
+ <div class="list-cell-msg" v-if="list.couponAmount >0">
|
|
|
+ 优惠：<span class="none">￥{{list.couponAmount | NumFormat}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="list-cell-msg" v-if="list.promotionFullReduction >0">
|
|
|
+ 促销满减：<span class="none">￥{{list.promotionFullReduction | NumFormat}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pay-alert-content" v-if="isPayBigAlert" :class="isPayBigAlert ? 'show' : 'none'">
|
|
|
+ <div class="pay-big-alert">
|
|
|
+ <div class="title"><p>线下转账信息</p><i class="icon-close" @click.stop="closeBigAlert"></i></div>
|
|
|
+ <div class="content" v-if="shopPay.bankAccount">
|
|
|
+ <div class="content-top">
|
|
|
+ <div class="content-viw">
|
|
|
+ 待付金额：<span class="red">￥{{ obligation | NumFormat }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="content-viw">
|
|
|
+ 开户行：<span class="none">{{ shopPay.bankName }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="content-viw">
|
|
|
+ 银行卡号：<span class="none">{{ shopPay.bankAccount }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="content-viw">
|
|
|
+ 公司名称：<span class="none">{{ shopPay.bankAccountName }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-bot">
|
|
|
+ <p>请将订单款项转账至上述账号，转账完成后</p>
|
|
|
+ <p>截图支付凭证，并在订单页面上传支付凭证。</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content" v-else>
|
|
|
+ <template v-if="obligation > 5000">
|
|
|
+ <div class="content-top">
|
|
|
+ <div class="content-viw">
|
|
|
+ <img class="wx_code" src="/img/base/Wecha.png" alt="微信客服">
|
|
|
+ </div>
|
|
|
+ <div class="content-viw none">
|
|
|
+ 待付金额：<span class="red">￥{{ obligation | NumFormat }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-bot">
|
|
|
+ <p>请用微信扫码添加采美客服</p>
|
|
|
+ <p>客服会为您推荐最合适的线下转账方式。</p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="content-top">
|
|
|
+ <div class="content-viw">
|
|
|
+ <img class="wx_code" src="https://static.caimei365.com/app/img/icon/icon-vxPaycode@2x.jpg" alt="深圳市采美信息技术有限公司">
|
|
|
+ </div>
|
|
|
+ <div class="content-viw none">
|
|
|
+ 待付金额：<span class="red">￥{{ obligation | NumFormat }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-bot">
|
|
|
+ <p>请用微信扫码后输入订单金额付款。</p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<!-- 引入底部 -->
|
|
|
+<template th:replace="components/footer"></template>
|
|
|
+<template th:replace="components/foot-link"></template>
|
|
|
+<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
|
|
|
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/pay.service.js(v=${version})}"></script>
|
|
|
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/qrcode.min.js(v=${version})}"></script>
|
|
|
+<script charset="utf-8" type="text/javascript" th:src="@{/js/mixins/bankMixins.js(v=${version})}"></script>
|
|
|
+<script charset="utf-8" type="text/javascript" th:src="@{/js/pay/caimei-paylist.js(v=${version})}"></script>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
