购物车

This commit is contained in:
summation
2022-01-20 19:22:35 +08:00
parent 2741a41024
commit 4809866df6
12 changed files with 1699 additions and 1781 deletions

View File

@@ -1,578 +1,303 @@
<template>
<div>
<div class="page_modules">
<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 class="cont_modules">
<tabs></tabs>
<el-row class="order_info">
<el-col :span="6" class="ph_hidden">
<ul class="li_inline">
<li class="sucess_img">
<img src="../../assets/image/usersucess.png" alt="" />
</li>
<li class="ready">
<p>订单提交成功</p>
<p>等待付款</p>
</li>
</ul>
</el-col>
<el-col :span="12" class="ph_hidden">&nbsp;</el-col>
<el-col :span="6" class="ready_right">
<div class="inline_right">
<p>付款金额:</p>
<p class="price">{{ userPayData.userprice }}</p>
</div>
<div class="rc-receiving">
<span>收货信息:</span>
<i>{{ userinformation }}</i>
<div class="inline_right">
<p>收货信息:</p>
<p>{{ userPayData.userinformation }}</p>
</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"
</el-col>
</el-row>
</div>
<div class="rc_contline"></div>
<div class="cont_modules">
<div class="pay_title color_red">请选择支付方式</div>
</div>
<div class="rc_contline"></div>
<div class="cont_modules">
<div class="pay_list">
<ul>
<li
class="pay_item"
v-for="(item, index) in userpaystype"
:key="index"
@click="selectGoods(item, index)"
:class="activeIndex == index ? 'active' : 'unactive'"
:class="activeIndex == index ? 'active' : ''"
>
<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>
<img :src="item.payimage" alt="" />
<span>{{ item.paytype }}支付</span>
</li>
</ul>
</div>
</div>
<div class="paycord">
<div id="qrcode" ref="qrcode" class="qrcode"></div>
<span>{{ paytype }}扫一扫立即支付</span>
</div>
<el-dialog :visible.sync="dialogSuccess" @close="closeDialogSuccess">
<div class="tc dl_cont">
<div class="dl_img">
<img src="../../assets/image/usersucess.png" alt="" />
</div>
<h3 class="title">支付成功</h3>
<p>您的商品我们正在抓紧打包请耐心等候</p>
<div class="line_dashed"></div>
<div class="userer">
<img
width="210"
height="210"
src="../../assets/image/rc-discount.png"
alt=""
/>
<p>微信扫一扫识别二维码</p>
<p class="tips">加入社群0元试用商品随单发放</p>
</div>
</div>
<div class="paycord" @click="usershow()" id="qrcode" ref="qrcode">
<!-- <img src="../../assets/image/rc-discount.png" alt="" />
<span>微信扫一扫立即支付</span> -->
</el-dialog>
<el-dialog :visible.sync="dialogFail" @close="closeDialogFail">
<div class="tc dl_cont">
<div class="dl_img">
<img src="../../assets/pay/fail.png" alt="" />
</div>
<h3 class="title">支付失败</h3>
<p>请返回商品结算页面重新支付</p>
</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>
</el-dialog>
</div>
</template>
<script>
import Myheader from "~/components/header.vue";
import QRCode from 'qrcodejs2'
import { generateOrderWX } from "../../ajax/getData";
import tabs from "@/components/tabs.vue";
// import QRCode from "qrcodejs2";
import { generateOrderAlipay, updateOrderWX } from "../../ajax/getData";
export default {
data() {
return {
userdata:null,
activeIndex: 0,
usermessage:'您的商品我们正在抓紧打包,请耐心等候!',
userprice: "¥167.00",
userinformation: "李某某 151****7917",
activeIndex: 0,
isSucess: false,
paytype: "微信",
userpaystype: [
{
price: "支付宝支付",
payimage: require("../../assets/image/rc-cat.png"),
catimage: require("../../assets/image/rc-left.png"),
paytype: "微信",
payimage: require("../../assets/pay/wx.png"),
},
{
price: "微信支付",
payimage: require("../../assets/image/rc-cat.png"),
catimage: require("../../assets/image/rc-left.png"),
paytype: "支付",
payimage: require("../../assets/pay/zfb.png"),
},
],
dialogInfo1:false,
dialogSuccess: true,
dialogFail: false,
userPayData: {},
};
},
computed: {},
mounted() {
this.userdata=this.$route.query.wxdata;
this.userpay(this.userdata);
console.log(this.userdata);
this.$nextTick(() => {
this.userpay();
})
this.userPayData = JSON.parse(this.$route.query.userPayData);
// this.qrcode(this.userPayData.wxPay);
},
methods: {
closeDialog(){
this.qrcode=null;
console.log('关闭的')
},
async userpay(userdata) {
console.log("-----");
let data = await generateOrderWX();
console.log();
this.qrcode(userdata);
closeDialogSuccess() {
this.qrcode = null;
// this.$router.push({
// path: "/index",
// });
},
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;
closeDialogFail() {
this.qrcode = null;
// this.$router.push({
// path: "/personal/useraddress",
// });
},
qrcode(e) {
let qrcode = new QRCode("qrcode", {
width: 260, // 设置宽度,单位像素
height: 260, // 设置高度,单位像素
text: e, // 设置二维码内容或跳转地址
});
},
async selectGoods(item, index) {
this.activeIndex = index;
this.paytype = item.paytype;
if (index == 1) {
//支付宝
let res = await generateOrderAlipay(this.userPayData.orderId);
if (res.success) {
this.qrcode(res.data);
}
}
},
//支付监听
async updateOrderWX() {
let res = await updateOrderWX();
if (res.success) {
this.dialogSuccess = true;
clearInterval(this.time);
} else {
this.dialogFail = true;
clearInterval(this.time);
}
},
},
components: {
Myheader,
tabs,
},
};
</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;
.sucess_img {
width: 96px;
height: 96px;
margin-right: 10px;
}
.rc-header{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
h3{
color:#333333;
font-size: 26px;
}
.rc-title{
.order_info {
padding: 10px 0;
}
.info {
display: flex;
justify-content: space-between;
}
.ready {
font-size: 20px;
color: #e2001a;
}
.ready_right {
line-height: 200%;
padding-top: 8px;
}
.price {
font-size: 20px;
color: #e2001a;
}
.pay_title {
font-size: 26px;
padding: 26px 0;
border-bottom: 1px solid #d7d7d7;
}
.pay_list {
padding: 20px 0;
.pay_item {
float: left;
margin-right: 20px;
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;
border: 1px solid #333333;
padding: 5px 20px;
cursor: pointer;
&.active {
border: 1px solid #e2001a;
color: #e2001a;
}
i{
font-size: 18px;
font-style: normal;
display: block;
margin-top: 32px;
color: #E1001A;
img {
margin-right: 5px;
width: 24px;
height: 24px;
}
}
}
.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;
&::after {
content: "";
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;
}
clear: both;
}
}
.rc-main {
.active {
border: 1px solid #E2001A;
cursor: pointer;
width: 200px;
height: 56px;
.paycord {
padding: 10px;
text-align: center;
.qrcode {
margin: 0 auto 10px;
width: 260px;
height: 260px;
}
}
.unactive {
border:1px solid #3D3D3D;
cursor: pointer;
width: 200px;
height: 56px;
.dl_width {
width: 440px;
}
width: 100%;
.rc-hearder {
width: 93%;
.dl_cont {
color: #333;
margin-top: -10px;
.title {
font-size: 26px;
font-weight: bold;
padding-bottom: 10px;
}
.line_dashed {
border-bottom: 2px dashed #999999;
margin: 10px 0;
}
.dl_img {
img {
width: 90px;
height: 90px;
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;
}
padding: 0px 0 20px;
}
.userer {
img {
margin: 0 auto;
}
}
.tips {
color: #e2001a;
margin-top: 30px;
font-size: 18px;
}
}
@media screen and (max-width: 768px) {
.ph_hidden {
display: none;
}
.ready_right {
width: 100%;
padding: 10px;
}
.pay_title {
padding: 10px;
}
.pay_list {
padding: 0;
.pay_item {
float: none;
border: none;
border-bottom: 1px solid #d7d7d7;
height: 50px;
margin-right: 0;
align-items: center;
justify-content: left;
justify-content: left;
&.active {
border: none;
border-bottom: 1px solid #d7d7d7;
}
}
}
.paycord {
display: none;
}
}
</style>