mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-11-21 09:56:54 +08:00
missing file
This commit is contained in:
Admin
Gitee
555
rc-busness/pages/personal/userpay.vue
Normal file
555
rc-busness/pages/personal/userpay.vue
Normal file
@@ -0,0 +1,555 @@
|
||||
<template>
|
||||
<div>
|
||||
<Myheader></Myheader>
|
||||
<div class="rc-main">
|
||||
<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="rc-usermaina">
|
||||
<div class="rc-title" id="qrcode" ref="qrcode" >
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="rc-paystype">
|
||||
<span>请选择支付方式</span>
|
||||
</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;
|
||||
}
|
||||
.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{
|
||||
img{
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
|
||||
}
|
||||
}
|
||||
.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%;
|
||||
.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{
|
||||
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 {
|
||||
margin-top: 53px;
|
||||
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) {
|
||||
|
||||
/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;
|
||||
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>
|
||||
Reference in New Issue
Block a user