mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 02:06:38 +08:00
578 lines
12 KiB
Vue
578 lines
12 KiB
Vue
<template>
|
||
<div>
|
||
<Myheader></Myheader>
|
||
<div class="rc-main">
|
||
<div class="online" style="height:3px;width:93%;margin:0 auto;background:#DDDDDD;margin-top:0.23rem"></div>
|
||
<div class="rc-hearder">
|
||
<div class="rc-userpay">
|
||
<div class="paysucess">
|
||
<span>订单提交成功等待付款</span>
|
||
|
||
</div>
|
||
<div class="rc-all">
|
||
<div class="rc-payprice">
|
||
<span>付款金额:</span>
|
||
<i>{{ userprice }}</i>
|
||
</div>
|
||
<div class="rc-receiving">
|
||
<span>收货信息:</span>
|
||
<i>{{ userinformation }}</i>
|
||
</div>
|
||
</div>
|
||
<div class="online" style="height:3px;width:100%;background:#DDDDDD;"></div>
|
||
<div class="rc-usermaina">
|
||
<div class="rc-title" id="qrcode" ref="qrcode" >
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="rc-paystype">
|
||
<span>请选择支付方式</span>
|
||
</div>
|
||
|
||
<div class="online" style="height:3px;width:100%;background:#DDDDDD;"></div>
|
||
<div class="paystype">
|
||
<div
|
||
class="payAlipay"
|
||
v-for="(item, index) in userpaystype"
|
||
:key="index"
|
||
@click="selectGoods(item, index)"
|
||
:class="activeIndex == index ? 'active' : 'unactive'"
|
||
>
|
||
<div class="rc-payype">
|
||
<img :src="item.payimage" alt="" />
|
||
<span>{{ item.price }}</span>
|
||
</div>
|
||
<div class="user-righticon">
|
||
<img src="../../assets/image/rc-left.png" alt="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="paycord" @click="usershow()" id="qrcode" ref="qrcode">
|
||
<!-- <img src="../../assets/image/rc-discount.png" alt="" />
|
||
<span>微信扫一扫立即支付</span> -->
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<el-dialog
|
||
:visible.sync="dialogInfo1"
|
||
hegight="700px"
|
||
@close='closeDialog'
|
||
>
|
||
|
||
<div class="rc-header">
|
||
<div class="rc-titled" >
|
||
<img src="../../assets/image/usersucess.png" alt="">
|
||
</div>
|
||
<div class="rc-logmain">
|
||
<h3>支付成功</h3>
|
||
<span>{{usermessage}}</span>
|
||
|
||
</div>
|
||
|
||
<div class="userer">
|
||
|
||
<img src="../../assets/image/rc-discount.png" alt="">
|
||
<span>微信扫一扫，识别二维码</span>
|
||
<i>加入社群0元试用商品随单发放</i>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Myheader from "~/components/header.vue";
|
||
import QRCode from 'qrcodejs2'
|
||
import { generateOrderWX } from "../../ajax/getData";
|
||
export default {
|
||
data() {
|
||
return {
|
||
userdata:null,
|
||
activeIndex: 0,
|
||
usermessage:'您的商品我们正在抓紧打包，请耐心等候！',
|
||
userprice: "￥167.00",
|
||
userinformation: "李某某 151****7917",
|
||
userpaystype: [
|
||
{
|
||
price: "支付宝支付",
|
||
payimage: require("../../assets/image/rc-cat.png"),
|
||
catimage: require("../../assets/image/rc-left.png"),
|
||
},
|
||
{
|
||
price: "微信支付",
|
||
payimage: require("../../assets/image/rc-cat.png"),
|
||
catimage: require("../../assets/image/rc-left.png"),
|
||
},
|
||
],
|
||
dialogInfo1:false,
|
||
};
|
||
},
|
||
mounted() {
|
||
this.userdata=this.$route.query.wxdata;
|
||
this.userpay(this.userdata);
|
||
console.log(this.userdata);
|
||
this.$nextTick(() => {
|
||
|
||
this.userpay();
|
||
})
|
||
},
|
||
methods: {
|
||
|
||
closeDialog(){
|
||
this.qrcode=null;
|
||
console.log('关闭的')
|
||
},
|
||
|
||
async userpay(userdata) {
|
||
|
||
console.log("-----");
|
||
let data = await generateOrderWX();
|
||
console.log();
|
||
this.qrcode(userdata);
|
||
},
|
||
qrcode (e) {
|
||
console.log(e);
|
||
let qrcode = new QRCode('qrcode',{
|
||
width: 150, // 设置宽度，单位像素
|
||
height: 150, // 设置高度，单位像素
|
||
text: e// 设置二维码内容或跳转地址
|
||
})
|
||
|
||
},
|
||
selectGoods(item,index){
|
||
let _that=this
|
||
_that.dialogInfo1=true;
|
||
_that.activeIndex=index;
|
||
if(item.price=='微信支付'){
|
||
// this.userpay();
|
||
|
||
}
|
||
},
|
||
usershow(){
|
||
console.log('这是支付')
|
||
this.dialogInfo1=true;
|
||
}
|
||
},
|
||
components: {
|
||
Myheader,
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped >
|
||
@media screen and (max-width: 768px) {
|
||
|
||
.rc-usermaina{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
display: none;
|
||
}
|
||
.rc-userpay{
|
||
display: none;
|
||
}
|
||
/deep/.el-dialog {
|
||
width:80%;
|
||
height: 500px;
|
||
}
|
||
.rc-header{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
h3{
|
||
color:#333333;
|
||
font-size: 26px;
|
||
}
|
||
.rc-title{
|
||
display: flex;
|
||
margin-top: 30px;
|
||
display: none;
|
||
img{
|
||
width: 96px;
|
||
height: 96px;
|
||
margin-left: 40px;
|
||
|
||
}
|
||
}
|
||
.rc-titled{
|
||
img{
|
||
width: 96px;
|
||
height: 96px;
|
||
|
||
}
|
||
}
|
||
.userer{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
img{
|
||
width: 96px;
|
||
height: 96px;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
|
||
}
|
||
|
||
span{
|
||
font-size: 16px;
|
||
|
||
color: #333333;
|
||
}
|
||
i{
|
||
font-size: 18px;
|
||
font-style: normal;
|
||
display: block;
|
||
margin-top: 32px;
|
||
color: #E1001A;
|
||
}
|
||
}
|
||
}
|
||
.rc-main {
|
||
width: 100%;
|
||
margin-top: 24%;
|
||
.paysucess{
|
||
display: none;
|
||
}
|
||
.paycord{
|
||
display: none;
|
||
}
|
||
.rc-hearder {
|
||
width: 93%;
|
||
margin: 0 auto;
|
||
i em {
|
||
font-style: normal;
|
||
}
|
||
.rc-userpay {
|
||
width: 100%;
|
||
// height: 96px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
.rc-all{
|
||
height: 96px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
// display: none;
|
||
}
|
||
.rc-payprice {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
span {
|
||
font-size: 14px;
|
||
|
||
color: #333333;
|
||
}
|
||
i {
|
||
font-size: 14px;
|
||
font-style: normal;
|
||
|
||
color: #e1001a;
|
||
}
|
||
}
|
||
.rc-receiving {
|
||
margin-top: 8px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
span {
|
||
font-size: 14px;
|
||
|
||
color: #333333;
|
||
}
|
||
i {
|
||
font-style: normal;
|
||
color: #666666;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
strong {
|
||
font-size: 16px;
|
||
display: block;
|
||
margin-top: 53px;
|
||
color: #e1001a;
|
||
}
|
||
}
|
||
|
||
.rc-paystype {
|
||
height:64px;
|
||
display: flex;
|
||
align-items: center;
|
||
span {
|
||
font-size: 16px;
|
||
|
||
color: #e1001a;
|
||
}
|
||
}
|
||
|
||
.payAlipay {
|
||
.user-righticon{
|
||
display: flex;
|
||
align-items: center;
|
||
img{
|
||
width: 8px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 80px;
|
||
border-bottom: 1px solid #d8d8d8;
|
||
.rc-payype {
|
||
display: flex;
|
||
align-items: center;
|
||
img {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
span {
|
||
color: #333333;
|
||
font-size: 14px;
|
||
margin-left: 16px;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
||
.rc-usermaina{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
display: block;
|
||
}
|
||
|
||
/deep/.el-dialog {
|
||
width: 440px;
|
||
height: 677px;
|
||
}
|
||
.rc-header{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
h3{
|
||
color:#333333;
|
||
font-size: 26px;
|
||
}
|
||
.rc-titled{
|
||
img{
|
||
width: 96px;
|
||
height: 96px;
|
||
|
||
}
|
||
}
|
||
|
||
.rc-title{
|
||
position: absolute;
|
||
left: 50%;
|
||
margin-left: -75px;
|
||
display: block;
|
||
top: 59%;
|
||
img{
|
||
width: 96px;
|
||
height: 96px;
|
||
|
||
}
|
||
}
|
||
.userer{
|
||
img{
|
||
width: 210px;
|
||
height: 210px;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
|
||
}
|
||
|
||
span{
|
||
font-size: 16px;
|
||
|
||
color: #333333;
|
||
}
|
||
i{
|
||
font-size: 18px;
|
||
font-style: normal;
|
||
display: block;
|
||
margin-top: 32px;
|
||
color: #E1001A;
|
||
}
|
||
}
|
||
}
|
||
.rc-main {
|
||
.active {
|
||
border: 1px solid #E2001A;
|
||
cursor: pointer;
|
||
width: 200px;
|
||
height: 56px;
|
||
|
||
}
|
||
.unactive {
|
||
border:1px solid #3D3D3D;
|
||
cursor: pointer;
|
||
width: 200px;
|
||
height: 56px;
|
||
}
|
||
width: 100%;
|
||
.rc-hearder {
|
||
width: 93%;
|
||
margin: 0 auto;
|
||
i em {
|
||
font-style: normal;
|
||
}
|
||
.rc-userpay {
|
||
width: 100%;
|
||
height: 96px;
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
.paysucess{
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
span{
|
||
font-size: 20px;
|
||
display: block;
|
||
width: 61%;
|
||
color: #E2001A;
|
||
}
|
||
}
|
||
.rc-all{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
.rc-payprice {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
span {
|
||
font-size: 16px;
|
||
|
||
color: #333333;
|
||
}
|
||
i {
|
||
font-size: 16px;
|
||
font-style: normal;
|
||
|
||
color: #e1001a;
|
||
}
|
||
}
|
||
.rc-receiving {
|
||
margin-top: 8px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
span {
|
||
font-size: 16px;
|
||
|
||
color: #333333;
|
||
}
|
||
i {
|
||
font-style: normal;
|
||
color: #666666;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
strong {
|
||
font-size: 16px;
|
||
display: block;
|
||
margin-top: 53px;
|
||
color: #e1001a;
|
||
}
|
||
}
|
||
.paystype{
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
|
||
}
|
||
.rc-paystype {
|
||
height: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
span {
|
||
font-size: 26px;
|
||
|
||
color: #E2001A;
|
||
}
|
||
|
||
}
|
||
|
||
.payAlipay {
|
||
|
||
margin-left: 20px;
|
||
.user-righticon{
|
||
display: none;
|
||
|
||
img{
|
||
width: 8px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 56px;
|
||
|
||
.rc-payype {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 16px;
|
||
color: #E2001A;
|
||
justify-content: center;
|
||
width: 100%;
|
||
img {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
span {
|
||
|
||
margin-left: 16px;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
|
||
.paycord{
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
img{
|
||
width: 260px;
|
||
height: 260px;
|
||
display: block;
|
||
}
|
||
span{
|
||
font-size: 20px;
|
||
display: block;
|
||
color: #333333;
|
||
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
</style> |