mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-03 02:36:39 +08:00
Admin
Gitee
commit
792a91f245
@ -615,3 +615,16 @@ export const getOrderList = (user, status) => {
|
|||||||
return fetch('/api/getOrderList', data)
|
return fetch('/api/getOrderList', data)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//购物车操作
|
||||||
|
export const memberAddress = (type,data) => {
|
||||||
|
return fetch('memberAddress?type='+type, data, 'POST' )
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//支付宝支付二维码
|
||||||
|
export const generateOrderAlipay = (data) => {
|
||||||
|
return fetch('generateOrderAlipay', data, 'POST' )
|
||||||
|
}
|
||||||
|
|
||||||
@ -597,3 +597,72 @@ img, picture {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.rc_contline {
|
||||||
|
border-bottom: 3px solid #f6f6f6;
|
||||||
|
height: 0px;
|
||||||
|
margin: 0;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page_modules {
|
||||||
|
padding-top: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cont_modules {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 1400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline_right {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline_mid {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline_left {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.li_inline {
|
||||||
|
li {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.color_red {
|
||||||
|
color: #E2001A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tc {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tr {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.el-dialog{
|
||||||
|
width: 90%;
|
||||||
|
max-width: 440px;
|
||||||
|
}
|
||||||
|
#tns2-iw{ height: 90px;}
|
||||||
|
.rc-carousel:not(.rc-carousel--loaded){visibility:visible!important}
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.el-message-box{
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
.el-dialog{
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@ -1,310 +1,11 @@
|
|||||||
|
|
||||||
|
|
||||||
.rc-margin-bottom--lg{
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width:768px){
|
@media screen and (max-width:768px){
|
||||||
.online{
|
|
||||||
width:100%;
|
|
||||||
background:#d7d7d7;
|
|
||||||
margin-top:1.5rem;
|
|
||||||
height:.06rem;
|
|
||||||
&.bold{
|
|
||||||
height:8px;
|
|
||||||
background:#f6f6f6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.useredit{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.rc-button{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 375px;
|
|
||||||
height: 80px;
|
|
||||||
background: #FFFFFF;
|
|
||||||
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
|
|
||||||
opacity: 1;
|
|
||||||
border-radius: 0px;
|
|
||||||
}
|
|
||||||
.rc-footbutton {
|
|
||||||
width: 164px;
|
|
||||||
height: 48px;
|
|
||||||
border: 2px solid #E2001A;
|
|
||||||
opacity: 1;
|
|
||||||
border-radius: 30px;
|
|
||||||
background: #E2001A;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #FFFFFF;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
.rc-max-width--xl{
|
|
||||||
padding: 24px 20px 24px 20px;
|
|
||||||
.rc-title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
color: #333333;
|
|
||||||
font-size: 14px;
|
|
||||||
em {
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-center{
|
|
||||||
padding-top: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.rc-address {
|
|
||||||
margin-top: 8px;
|
|
||||||
text-overflow: -o-ellipsis-lastline;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
.rc-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
.rc-right {
|
|
||||||
span {
|
|
||||||
border-bottom: 1px solid #666666;
|
|
||||||
}
|
|
||||||
span:first-child {
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
img{
|
|
||||||
width: 43px;
|
|
||||||
}
|
|
||||||
.rc-foot{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
color: #333333;
|
|
||||||
font-size: 14px;
|
|
||||||
span{
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 769px)
|
@media screen and (min-width: 769px)
|
||||||
|
|
||||||
{
|
{
|
||||||
.usercontend {
|
|
||||||
display:inline-block;
|
|
||||||
}
|
|
||||||
.usercontshow{
|
|
||||||
.rc-button{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.usercontend{
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
|
||||||
.online{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.rc-button{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.useredit{
|
|
||||||
width: 680px;
|
|
||||||
height: 164px;
|
|
||||||
background: #FFFFFF;
|
|
||||||
border: 1px solid #D7D7D7;
|
|
||||||
opacity: 1;
|
|
||||||
border-radius: 3px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
img{
|
|
||||||
width: 31px;
|
|
||||||
height: 31px;
|
|
||||||
|
|
||||||
}
|
|
||||||
span{
|
|
||||||
color: #333333;
|
|
||||||
font-size: 18px;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.usercontend{
|
|
||||||
.useradd{
|
|
||||||
width: 680px;
|
|
||||||
height: 164px;
|
|
||||||
background: #FFFFFF;
|
|
||||||
border-radius: 3px;
|
|
||||||
img{
|
|
||||||
width: 31px;
|
|
||||||
height: 31px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
.rc-max-width--xl{
|
|
||||||
|
|
||||||
.rc-center{
|
|
||||||
margin-top: 24px;
|
|
||||||
margin-left: 24px;
|
|
||||||
}
|
|
||||||
.rc-cat{
|
|
||||||
width: 640px;
|
|
||||||
border: 1px solid #D7D7D7;
|
|
||||||
border-radius: 3px;
|
|
||||||
position: relative;
|
|
||||||
margin-left: 40px;
|
|
||||||
height: 164px;
|
|
||||||
}
|
|
||||||
.rc-title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
color: #333333;
|
|
||||||
font-size: 20px;
|
|
||||||
em {
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
margin-left: 32px;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
.rc-right {
|
|
||||||
position: absolute;
|
|
||||||
right: 24px;
|
|
||||||
top: 24px;
|
|
||||||
span {
|
|
||||||
border-bottom: 1px solid #666666;
|
|
||||||
}
|
|
||||||
span:first-child {
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
img{
|
|
||||||
width: 43px;
|
|
||||||
}
|
|
||||||
.rc-foot{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
color: #333333;
|
|
||||||
font-size: 16px;
|
|
||||||
margin-top: 16px;
|
|
||||||
span{
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
.rc-max-width--xl{
|
|
||||||
|
|
||||||
|
|
||||||
.rc-button {
|
|
||||||
height: 80px;
|
|
||||||
background: #ffffff;
|
|
||||||
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
|
|
||||||
opacity: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
.rc-footbutton {
|
|
||||||
width: 164px;
|
|
||||||
height: 48px;
|
|
||||||
border: 2px solid #e2001a;
|
|
||||||
opacity: 1;
|
|
||||||
border-radius: 30px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background: #e2001a;
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
|
||||||
color: white;
|
|
||||||
font-size: 16px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
color: #333333;
|
|
||||||
em {
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-address {
|
|
||||||
margin-top: 16px;
|
|
||||||
text-overflow: -o-ellipsis-lastline;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
font-size: 20px;
|
|
||||||
color: #333333;
|
|
||||||
|
|
||||||
}
|
|
||||||
.rc-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
margin-top: 8px;
|
|
||||||
.rc-right {
|
|
||||||
span {
|
|
||||||
border-bottom: 1px solid #666666;
|
|
||||||
}
|
|
||||||
span:first-child {
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
BIN
rc-busness/assets/pay/fail.png
Normal file
BIN
rc-busness/assets/pay/fail.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
rc-busness/assets/pay/wx.png
Normal file
BIN
rc-busness/assets/pay/wx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
rc-busness/assets/pay/zfb.png
Normal file
BIN
rc-busness/assets/pay/zfb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
File diff suppressed because it is too large
Load Diff
414
rc-busness/pages/personal/settlement.less
Normal file
414
rc-busness/pages/personal/settlement.less
Normal file
@ -0,0 +1,414 @@
|
|||||||
|
ul li ol li em strong i {
|
||||||
|
list-style: none;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-header {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.settlement {
|
||||||
|
padding-top: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.rc-main {
|
||||||
|
width: 92%;
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 1400px;
|
||||||
|
|
||||||
|
.rc-userbottomm {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-border {
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 1px solid #d7d7d7;
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-receiving {
|
||||||
|
width: 100%;
|
||||||
|
height: 80px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
em {
|
||||||
|
font-style: normal;
|
||||||
|
color: #e1001a;
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #666666;
|
||||||
|
font-size: 16px;
|
||||||
|
display: block;
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.delivery {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 140px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.viewdetails {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #444444;
|
||||||
|
font-size: 18px;
|
||||||
|
display: block;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 8px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.to-delivery {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
// margin-left: 16px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-style: normal;
|
||||||
|
margin-left: 8px;
|
||||||
|
display: block;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bo-delivery {
|
||||||
|
span {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #666666;
|
||||||
|
display: block;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-list {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.mypersonal {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
border: 1px solid #808285;
|
||||||
|
height: 118px;
|
||||||
|
width: 320px;
|
||||||
|
padding: 15px;
|
||||||
|
color: #333333;
|
||||||
|
margin: 20px 40px 20px 0;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
border: 1px solid #E2001A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
right: 8px;
|
||||||
|
display: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.edit {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-delivery {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
margin-left: 3px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-style: normal;
|
||||||
|
margin-left: 3px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.per-delivery {
|
||||||
|
span {
|
||||||
|
color: #666666;
|
||||||
|
display: block;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.rc-usermain {
|
||||||
|
display: flex;
|
||||||
|
padding: 20px 0;
|
||||||
|
|
||||||
|
.rc-image {
|
||||||
|
border: 1px solid #d8d8d8;
|
||||||
|
margin-right: 20px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-right {
|
||||||
|
.rc-usercenter {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
h3,
|
||||||
|
.price {
|
||||||
|
font-style: normal;
|
||||||
|
display: block;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 17px;
|
||||||
|
color: #e1001a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-userright {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
color: #666666;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
margin-top: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-userbottom {
|
||||||
|
display: flex;
|
||||||
|
width: 60%;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.price {
|
||||||
|
font-style: normal;
|
||||||
|
color: #e1001a;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-merchandise {
|
||||||
|
|
||||||
|
padding: 15px 0;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
display: block;
|
||||||
|
content: '';
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
width: 25%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
line-height: 40px;
|
||||||
|
float: right;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-style: normal;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
font-style: normal;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li .red {
|
||||||
|
color: #e1001a;
|
||||||
|
font-size: 20px;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-payment {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 80px;
|
||||||
|
|
||||||
|
.u-trackingnumber {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 18px;
|
||||||
|
font-style: normal;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 8px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 18px;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-style: normal;
|
||||||
|
color: #666666;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
font-style: normal;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-foot {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.rc-foo {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: self-end;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-style: normal;
|
||||||
|
color: #333333;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
em {
|
||||||
|
font-style: normal;
|
||||||
|
color: #e1001a;
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
width: 164px;
|
||||||
|
margin-top: 36px;
|
||||||
|
background: #e2001a;
|
||||||
|
line-height: 48px;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
height: 48px;
|
||||||
|
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.diallog_width{
|
||||||
|
width: 100%;
|
||||||
|
max-width: 440px;
|
||||||
|
}
|
||||||
|
.el-dialog{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
//手机端
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
|
||||||
|
.diallog_width{
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
.rc-main {
|
||||||
|
.address-list {
|
||||||
|
display: contents;
|
||||||
|
|
||||||
|
.mypersonal {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rc-usermain {
|
||||||
|
.rc-right { display: table}
|
||||||
|
}
|
||||||
|
.rc-merchandise{
|
||||||
|
padding: 15px 0 120px;
|
||||||
|
ul{
|
||||||
|
float: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rc-foot{
|
||||||
|
.rc-foo{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: self-end;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
background: #fff;
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -1,59 +1,62 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="settlement">
|
||||||
<Myheader></Myheader>
|
<Myheader></Myheader>
|
||||||
<tabs></tabs>
|
|
||||||
<div class="online"></div>
|
|
||||||
|
|
||||||
<div class="rc-main" v-for="(item,index) in goldmedal" :key="index" >
|
<div class="rc-main">
|
||||||
<div class="rc-border"></div>
|
<tabs></tabs>
|
||||||
|
|
||||||
|
<div class="address-list">
|
||||||
<div
|
<div
|
||||||
class="mypersonal"
|
class="mypersonal"
|
||||||
v-for="(dataaddress, index) in useraddress"
|
v-for="(item, index) in useraddress"
|
||||||
:key="index"
|
:key="index"
|
||||||
|
:class="item.isDefault ? 'active' : ''"
|
||||||
|
@click="selectAddress(item)"
|
||||||
>
|
>
|
||||||
|
<div class="edit" @click="editAddress(item)">
|
||||||
|
<i class="el-icon-edit"></i>编辑
|
||||||
|
</div>
|
||||||
<div class="my-delivery">
|
<div class="my-delivery">
|
||||||
<span>{{ dataaddress.state }}</span>
|
<span>{{ item.recipient }}</span>
|
||||||
<i>{{ dataaddress.tel }}</i>
|
<i>{{ item.recipientPhone }}</i>
|
||||||
</div>
|
</div>
|
||||||
<div class="per-delivery">
|
<div class="per-delivery">
|
||||||
<span>{{ dataaddress.address }}</span>
|
<span>{{ item.address }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="online" style="height:3px;width:100%;background:#DDDDDD;"></div>
|
<div class="mypersonal">
|
||||||
<div>
|
<div
|
||||||
<div class="rc-center">
|
class="my-delivery"
|
||||||
|
@click="addAddress"
|
||||||
|
style="justify-content: center"
|
||||||
|
>
|
||||||
|
<i class="el-icon-plus"></i>
|
||||||
|
<span>添加收货地址</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rc-contline"></div>
|
||||||
|
<div class="rc-main" v-for="(item, index) in goldmedal" :key="index">
|
||||||
<div class="rc-usermain">
|
<div class="rc-usermain">
|
||||||
<div class="rc-image">
|
<div class="rc-image">
|
||||||
<img :src="item.catimage" alt="" />
|
<img :src="item.productImg" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-right">
|
<div class="rc-right">
|
||||||
<div class="rc-usercenter">
|
<div class="rc-usercenter">
|
||||||
<em>{{ item.usereat }}</em>
|
<h3>{{ item.productName }}</h3>
|
||||||
<div class="rc-userright">
|
<p>规格:{{ item.specifications }}</p>
|
||||||
<span>规格:{{ item.num }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-userbottom">
|
<div class="rc-userbottom">
|
||||||
<span>数量:{{ item.specification }}件</span>
|
<p>￥{{ item.productPrice }}</p>
|
||||||
<i>￥{{ item.userprice }}</i>
|
<p>X{{ item.buyCount }}</p>
|
||||||
<div class="rc-bottom">
|
<p class="price">￥{{ item.productPrice }}</p>
|
||||||
<span>联系客服申请售后</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-bottomm">
|
|
||||||
<span>联系客服申请售后</span>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="rc-userbottomm">
|
|
||||||
<i>￥{{ item.userprice }}</i>
|
|
||||||
<span>{{ item.orderstype }}</span>
|
|
||||||
<i>￥{{ item.userprice }}</i>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="rc-contline"></div>
|
||||||
</div>
|
<div class="rc-main">
|
||||||
|
|
||||||
<div class="rc-merchandise">
|
<div class="rc-merchandise">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
@ -66,103 +69,77 @@
|
|||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>商品总价:</span>
|
<span>商品总价:</span>
|
||||||
<i>{{ shopprice.promotion }}</i>
|
<i class="red">{{ sumPrice }}</i>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>配送费用:</span>
|
<span>配送费用:</span>
|
||||||
<i>{{ shopprice.payment }}</i>
|
<i class="red">{{ shopprice.payment }}</i>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rc-contline"></div>
|
||||||
|
<div class="rc-main">
|
||||||
<div class="rc-foot">
|
<div class="rc-foot">
|
||||||
<div class="rc-foo">
|
<div class="rc-foo">
|
||||||
<div style="padding-top:55px">
|
<div>
|
||||||
<i>合计金额:</i>
|
<i>合计金额:</i>
|
||||||
<em>￥167.00</em>
|
<em>{{ sumPrice }}</em>
|
||||||
</div>
|
</div>
|
||||||
<div style="padding-bottom:40px">
|
<div style="font-weight: bold">
|
||||||
<span>再次购买</span>
|
<span @click="jiesuan()">提交订单</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<el-dialog :visible.sync="dialogAdd" class="diallog_width" width="'100%">
|
||||||
<div class="rc-button">
|
<div class="tc dl_cont" v-if="dialogAdd">
|
||||||
<div class="rc-left">
|
<!-- <myAddress
|
||||||
<span>总计：</span>
|
@isClose="dialogCtrl"
|
||||||
<em>￥167.00</em>
|
:editAddressData="editAddressData"
|
||||||
</div>
|
></myAddress> -->
|
||||||
<strong ref="rccolor" @click="jiesuan">结算</strong>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Myheader from "~/components/header.vue";
|
import Myheader from "~/components/header.vue";
|
||||||
import {userin} from "../../ajax/getData";
|
import { userin, memberAddress, generateOrderWX } from "../../ajax/getData";
|
||||||
import tabs from "@/components/tabs.vue";
|
import tabs from "@/components/tabs.vue";
|
||||||
|
// import myAddress from "../address/address.vue";
|
||||||
|
import itemMixin from "../../../smart-admin-web/src/components/main/components/side-menu/item-mixin";
|
||||||
export default {
|
export default {
|
||||||
middleware: 'metaTitle',
|
middleware: "metaTitle",
|
||||||
meta: {title: '订单结算'},
|
meta: { title: "订单结算" },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
goldmedal:[],
|
goldmedal: [],
|
||||||
addressstype: null,
|
addressstype: null,
|
||||||
orderstatus: '',
|
orderstatus: "",
|
||||||
userisdelivery:'待收货',
|
userisdelivery: "待收货",
|
||||||
userdelivery: "派送中",
|
userdelivery: "派送中",
|
||||||
isshow:true,
|
isshow: true,
|
||||||
leftico: require("../../assets/image/rc-left.png"),
|
leftico: require("../../assets/image/rc-left.png"),
|
||||||
orderNumber:'',
|
orderNumber: "",
|
||||||
|
dialogAdd: false,
|
||||||
// delivery: [
|
editAddressData: {},
|
||||||
// {
|
curAddress: {},
|
||||||
// state: "派送中",
|
saveType: "",
|
||||||
// time: "2021-11-21",
|
|
||||||
// address: "广州天河—刘某某【15124617917】正在派送中",
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
|
|
||||||
useraddress: [
|
useraddress: [
|
||||||
{
|
// {
|
||||||
state: "李某某",
|
// state: "李某某",
|
||||||
tel: "15124117917",
|
// tel: "15124117917",
|
||||||
address: "广东省 广州市 天河区 天河客运站118号",
|
// address: "广东省 广州市 天河区 天河客运站118号",
|
||||||
},
|
// isdefault: true,
|
||||||
{
|
// },
|
||||||
state: "李某某",
|
// {
|
||||||
tel: "15124117917",
|
// state: "李某某",
|
||||||
address: "广东省 广州市 天河区 天河客运站118号",
|
// tel: "15124117917",
|
||||||
},
|
// address: "广东省 广州市 天河区 天河客运站118号",
|
||||||
{
|
// isdefault: false,
|
||||||
state: "李某某",
|
// },
|
||||||
tel: "15124117917",
|
|
||||||
address: "广东省 广州市 天河区 天河客运站118号",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
state: "李某某",
|
|
||||||
tel: "15124117917",
|
|
||||||
address: "广东省 广州市 天河区 天河客运站118号",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
|
|
||||||
goldmedal: [
|
|
||||||
{
|
|
||||||
ordernumber: "1111111111111111111",
|
|
||||||
orderstype: 1,
|
|
||||||
index:0,
|
|
||||||
usereat: "英国短毛猫成猫全价湿粮",
|
|
||||||
num: "5kg",
|
|
||||||
specification: "1",
|
|
||||||
userprice: "167.00",
|
|
||||||
catimage: require("../../assets/image/rc-win.png"),
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
shopprice: {
|
shopprice: {
|
||||||
price: "标准快递",
|
price: "标准快递",
|
||||||
@ -170,49 +147,177 @@ export default {
|
|||||||
promotion: "￥167.00",
|
promotion: "￥167.00",
|
||||||
payment: "￥0.00 ",
|
payment: "￥0.00 ",
|
||||||
},
|
},
|
||||||
information: {
|
|
||||||
reference: "1111111111111111",
|
|
||||||
ordertime: "2012-12-01 11:20:00",
|
|
||||||
paymentmethod: "微信支付",
|
|
||||||
distribution: "快递",
|
|
||||||
trackingnumber: "11111111111111",
|
|
||||||
catimage: require("../../assets/image/rc-left.png"),
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
// 总价计算
|
||||||
|
sumPrice() {
|
||||||
|
return this.goldmedal.reduce((pre, cur) => {
|
||||||
|
console.log(pre);
|
||||||
|
return pre + cur.buyCount * cur.productPrice;
|
||||||
|
}, 0);
|
||||||
|
},
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
jiesuan(){
|
async getAddressList() {
|
||||||
// let userdata=this.$route.query.wxdata
|
let memberId = JSON.parse(localStorage.getItem("userInfo")).data.id;
|
||||||
|
let { data } = await memberAddress("getAll", { memberId: memberId });
|
||||||
|
data.forEach((item) => {
|
||||||
|
item.address =
|
||||||
|
item.provinceName +
|
||||||
|
item.cityName +
|
||||||
|
item.districtName +
|
||||||
|
item.detailAddress;
|
||||||
|
});
|
||||||
|
this.useraddress = data;
|
||||||
|
},
|
||||||
|
editAddress(item) {
|
||||||
|
this.editAddressData = {
|
||||||
|
memberId: item.memberId,
|
||||||
|
name: item.recipient,
|
||||||
|
tel: item.recipientPhone,
|
||||||
|
detailAddress: item.detailAddress,
|
||||||
|
id: item.id,
|
||||||
|
city: item.cityName,
|
||||||
|
districtId: item.districtName,
|
||||||
|
saveType: "edit",
|
||||||
|
};
|
||||||
|
this.dialogAdd = true;
|
||||||
|
},
|
||||||
|
addAddress() {
|
||||||
|
this.editAddressData = {};
|
||||||
|
this.dialogAdd = true;
|
||||||
|
},
|
||||||
|
selectAddress(cur) {
|
||||||
|
this.useraddress.forEach((item) => {
|
||||||
|
if (item.id == cur.id) {
|
||||||
|
item.isDefault = true;
|
||||||
|
} else {
|
||||||
|
item.isDefault = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
dialogCtrl(parm) {
|
||||||
|
this.dialogAdd = parm;
|
||||||
|
this.getAddressList();
|
||||||
|
},
|
||||||
|
async jiesuan() {
|
||||||
|
let orderAddress = this.useraddress.filter((item) => item.isDefault);
|
||||||
|
let postData = [];
|
||||||
|
this.goldmedal.forEach((item) => {
|
||||||
|
let oneProduct = {
|
||||||
|
productName: item.productName,
|
||||||
|
buyCount: item.buyCount,
|
||||||
|
productId: item.productCode,
|
||||||
|
payAmount: item.productPrice,
|
||||||
|
memberId: item.memberId,
|
||||||
|
phoneNumber: item.mobile,
|
||||||
|
// couponId: "NGQ2022P12",
|
||||||
|
// couponTypeId: "4",
|
||||||
|
// couponName: "内购券",
|
||||||
|
// couponAmount: "0.3175",
|
||||||
|
// couponCode: "0007792402",
|
||||||
|
orderAddress: {
|
||||||
|
addressPhoneNumber: orderAddress[0].recipientPhone,
|
||||||
|
addressUserName: orderAddress[0].recipient,
|
||||||
|
addressProvinceName: orderAddress[0].provinceName,
|
||||||
|
addressCityName: orderAddress[0].cityName,
|
||||||
|
addressCountyName: orderAddress[0].districtName,
|
||||||
|
addressDetailInfo: orderAddress[0].detailAddress,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
postData.push(oneProduct);
|
||||||
|
});
|
||||||
|
// let postData = [
|
||||||
|
// {
|
||||||
|
// productName: this.goldmedal.productName,
|
||||||
|
// buyCount: "2",
|
||||||
|
// productId: "20030200",
|
||||||
|
// payAmount: "147.00",
|
||||||
|
// memberId: "844350",
|
||||||
|
// phoneNumber: "18112621098",
|
||||||
|
// couponId: "NGQ2022P12",
|
||||||
|
// couponTypeId: "4",
|
||||||
|
// couponName: "内购券",
|
||||||
|
// couponAmount: "0.3175",
|
||||||
|
// couponCode: "0007792402",
|
||||||
|
// orderAddress: {
|
||||||
|
// addressPhoneNumber:orderAddress[0].recipientPhone,
|
||||||
|
// addressUserName:orderAddress[0].recipient,
|
||||||
|
// addressProvinceName: orderAddress[0].provinceName,
|
||||||
|
// addressCityName:orderAddress[0].cityName,
|
||||||
|
// addressCountyName: orderAddress[0].districtName,
|
||||||
|
// addressDetailInfo: orderAddress[0].detailAddress,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// // {
|
||||||
|
// // productName: "幼猫全价粮",
|
||||||
|
// // buyCount: "2",
|
||||||
|
// // productId: "20030200",
|
||||||
|
// // payAmount: "147.00",
|
||||||
|
// // memberId: "844350",
|
||||||
|
// // phoneNumber: "18112621098",
|
||||||
|
// // couponId: "NGQ2022P12",
|
||||||
|
// // couponTypeId: "4",
|
||||||
|
// // couponName: "内购券",
|
||||||
|
// // couponAmount: "0.3175",
|
||||||
|
// // couponCode: "0007792402",
|
||||||
|
// // orderAddress: {
|
||||||
|
// // addressPhoneNumber: "13602898745",
|
||||||
|
// // addressUserName: "张三",
|
||||||
|
// // addressProvinceName: "江苏省",
|
||||||
|
// // addressCityName: "无锡市",
|
||||||
|
// // addressCountyName: "江阴市",
|
||||||
|
// // addressDetailInfo: "东苑一村",
|
||||||
|
// // },
|
||||||
|
// // },
|
||||||
|
// ];
|
||||||
|
let res = await generateOrderWX(postData);
|
||||||
|
if (res.success) {
|
||||||
|
let userPayData = {
|
||||||
|
orderId: res.data,
|
||||||
|
userprice: postData[0].payAmount,
|
||||||
|
userinformation:
|
||||||
|
postData[0].orderAddress.addressUserName +
|
||||||
|
" " +
|
||||||
|
postData[0].orderAddress.addressPhoneNumber,
|
||||||
|
wxPay: "weixin://wxpay/bizpayurl?pr=4RJbokxzz",
|
||||||
|
};
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
path: "/personal/userpay",
|
path: "/personal/userpay",
|
||||||
query: {
|
query: {
|
||||||
wxdata:userdata
|
userPayData:JSON.stringify(userPayData),
|
||||||
},
|
},
|
||||||
|
|
||||||
});
|
});
|
||||||
},
|
}
|
||||||
async canceldanhao(orderNumber){
|
},
|
||||||
let data=await userin(orderNumber);
|
async canceldanhao(orderNumber) {
|
||||||
|
let data = await userin(orderNumber);
|
||||||
console.log(data);
|
console.log(data);
|
||||||
// this.goldmedal=data;
|
// this.goldmedal=data;
|
||||||
console.log(this.goldmedal);
|
console.log(this.goldmedal);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.addressstype = this.$route.query.stype;
|
this.goldmedal = JSON.parse(this.$route.query.list);
|
||||||
this.orderNumber=this.$route.query.orderNumber;
|
console.log(this.$route);
|
||||||
this.canceldanhao(this.orderNumber)
|
this.getAddressList();
|
||||||
console.log(this.$refs.rccolor)
|
// this.addressstype = this.$route.query.stype;
|
||||||
this.$refs.rccolor.style.background='gray';
|
// this.orderNumber = this.$route.query.orderNumber;
|
||||||
|
// this.canceldanhao(this.orderNumber);
|
||||||
|
// console.log(this.$refs.rccolor);
|
||||||
|
// this.$refs.rccolor.style.background = "gray";
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Myheader,
|
Myheader,
|
||||||
tabs
|
tabs,
|
||||||
|
// myAddress,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
@import "./settlement.less";
|
||||||
@import url("../../assets/css/global.less");
|
@import url("../../assets/css/global.less");
|
||||||
@import url("../../assets/css/settlement.less");
|
// @import url("../../assets/css/settlement.less");
|
||||||
</style>
|
</style>
|
||||||
@ -1,578 +1,303 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="page_modules">
|
||||||
<Myheader></Myheader>
|
<Myheader></Myheader>
|
||||||
<div class="rc-main">
|
<div class="cont_modules">
|
||||||
<div class="online" style="height:3px;width:93%;margin:0 auto;background:#DDDDDD;margin-top:0.23rem"></div>
|
<tabs></tabs>
|
||||||
<div class="rc-hearder">
|
<el-row class="order_info">
|
||||||
<div class="rc-userpay">
|
<el-col :span="6" class="ph_hidden">
|
||||||
<div class="paysucess">
|
<ul class="li_inline">
|
||||||
<span>订单提交成功等待付款</span>
|
<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"> </el-col>
|
||||||
|
<el-col :span="6" class="ready_right">
|
||||||
|
<div class="inline_right">
|
||||||
|
<p>付款金额:</p>
|
||||||
|
<p class="price">{{ userPayData.userprice }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-all">
|
<div class="inline_right">
|
||||||
<div class="rc-payprice">
|
<p>收货信息:</p>
|
||||||
<span>付款金额:</span>
|
<p>{{ userPayData.userinformation }}</p>
|
||||||
<i>{{ userprice }}</i>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-receiving">
|
</el-col>
|
||||||
<span>收货信息:</span>
|
</el-row>
|
||||||
<i>{{ userinformation }}</i>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="rc_contline"></div>
|
||||||
|
<div class="cont_modules">
|
||||||
|
<div class="pay_title color_red">请选择支付方式</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="online" style="height:3px;width:100%;background:#DDDDDD;"></div>
|
<div class="rc_contline"></div>
|
||||||
<div class="rc-usermaina">
|
<div class="cont_modules">
|
||||||
<div class="rc-title" id="qrcode" ref="qrcode" >
|
<div class="pay_list">
|
||||||
</div>
|
<ul>
|
||||||
</div>
|
<li
|
||||||
|
class="pay_item"
|
||||||
</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"
|
v-for="(item, index) in userpaystype"
|
||||||
:key="index"
|
:key="index"
|
||||||
@click="selectGoods(item, index)"
|
@click="selectGoods(item, index)"
|
||||||
:class="activeIndex == index ? 'active' : 'unactive'"
|
:class="activeIndex == index ? 'active' : ''"
|
||||||
>
|
>
|
||||||
<div class="rc-payype">
|
|
||||||
<img :src="item.payimage" alt="" />
|
<img :src="item.payimage" alt="" />
|
||||||
<span>{{ item.price }}</span>
|
<span>{{ item.paytype }}支付</span>
|
||||||
</div>
|
</li>
|
||||||
<div class="user-righticon">
|
</ul>
|
||||||
<img src="../../assets/image/rc-left.png" alt="" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="paycord">
|
||||||
<div class="paycord" @click="usershow()" id="qrcode" ref="qrcode">
|
<div id="qrcode" ref="qrcode" class="qrcode"></div>
|
||||||
<!-- <img src="../../assets/image/rc-discount.png" alt="" />
|
<span>{{ paytype }}扫一扫立即支付</span>
|
||||||
<span>微信扫一扫立即支付</span> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<el-dialog :visible.sync="dialogSuccess" @close="closeDialogSuccess">
|
||||||
|
<div class="tc dl_cont">
|
||||||
<el-dialog
|
<div class="dl_img">
|
||||||
:visible.sync="dialogInfo1"
|
<img src="../../assets/image/usersucess.png" alt="" />
|
||||||
hegight="700px"
|
|
||||||
@close='closeDialog'
|
|
||||||
>
|
|
||||||
|
|
||||||
<div class="rc-header">
|
|
||||||
<div class="rc-titled" >
|
|
||||||
<img src="../../assets/image/usersucess.png" alt="">
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-logmain">
|
<h3 class="title">支付成功</h3>
|
||||||
<h3>支付成功</h3>
|
<p>您的商品我们正在抓紧打包，请耐心等候！</p>
|
||||||
<span>{{usermessage}}</span>
|
<div class="line_dashed"></div>
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="userer">
|
<div class="userer">
|
||||||
|
<img
|
||||||
<img src="../../assets/image/rc-discount.png" alt="">
|
width="210"
|
||||||
<span>微信扫一扫，识别二维码</span>
|
height="210"
|
||||||
<i>加入社群0元试用商品随单发放</i>
|
src="../../assets/image/rc-discount.png"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<p>微信扫一扫，识别二维码</p>
|
||||||
|
<p class="tips">加入社群0元试用商品随单发放</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</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>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Myheader from "~/components/header.vue";
|
import Myheader from "~/components/header.vue";
|
||||||
import QRCode from 'qrcodejs2'
|
import tabs from "@/components/tabs.vue";
|
||||||
import { generateOrderWX } from "../../ajax/getData";
|
// import QRCode from "qrcodejs2";
|
||||||
|
|
||||||
|
import { generateOrderAlipay, updateOrderWX } from "../../ajax/getData";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
userdata:null,
|
|
||||||
activeIndex: 0,
|
activeIndex: 0,
|
||||||
usermessage:'您的商品我们正在抓紧打包，请耐心等候！',
|
isSucess: false,
|
||||||
userprice: "￥167.00",
|
paytype: "微信",
|
||||||
userinformation: "李某某 151****7917",
|
|
||||||
userpaystype: [
|
userpaystype: [
|
||||||
{
|
{
|
||||||
price: "支付宝支付",
|
paytype: "微信",
|
||||||
payimage: require("../../assets/image/rc-cat.png"),
|
payimage: require("../../assets/pay/wx.png"),
|
||||||
catimage: require("../../assets/image/rc-left.png"),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
price: "微信支付",
|
paytype: "支付宝",
|
||||||
payimage: require("../../assets/image/rc-cat.png"),
|
payimage: require("../../assets/pay/zfb.png"),
|
||||||
catimage: require("../../assets/image/rc-left.png"),
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
dialogInfo1:false,
|
dialogSuccess: true,
|
||||||
|
dialogFail: false,
|
||||||
|
userPayData: {},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
computed: {},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.userdata=this.$route.query.wxdata;
|
this.userPayData = JSON.parse(this.$route.query.userPayData);
|
||||||
this.userpay(this.userdata);
|
// this.qrcode(this.userPayData.wxPay);
|
||||||
console.log(this.userdata);
|
|
||||||
this.$nextTick(() => {
|
|
||||||
|
|
||||||
this.userpay();
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
closeDialogSuccess() {
|
||||||
closeDialog(){
|
this.qrcode = null;
|
||||||
this.qrcode=null;
|
// this.$router.push({
|
||||||
console.log('关闭的')
|
// path: "/index",
|
||||||
},
|
// });
|
||||||
|
|
||||||
async userpay(userdata) {
|
|
||||||
|
|
||||||
console.log("-----");
|
|
||||||
let data = await generateOrderWX();
|
|
||||||
console.log();
|
|
||||||
this.qrcode(userdata);
|
|
||||||
},
|
},
|
||||||
qrcode (e) {
|
closeDialogFail() {
|
||||||
console.log(e);
|
this.qrcode = null;
|
||||||
let qrcode = new QRCode('qrcode',{
|
// this.$router.push({
|
||||||
width: 150, // 设置宽度，单位像素
|
// path: "/personal/useraddress",
|
||||||
height: 150, // 设置高度，单位像素
|
// });
|
||||||
text: e// 设置二维码内容或跳转地址
|
},
|
||||||
})
|
qrcode(e) {
|
||||||
|
let qrcode = new QRCode("qrcode", {
|
||||||
},
|
width: 260, // 设置宽度，单位像素
|
||||||
selectGoods(item,index){
|
height: 260, // 设置高度，单位像素
|
||||||
let _that=this
|
text: e, // 设置二维码内容或跳转地址
|
||||||
_that.dialogInfo1=true;
|
});
|
||||||
_that.activeIndex=index;
|
},
|
||||||
if(item.price=='微信支付'){
|
async selectGoods(item, index) {
|
||||||
// this.userpay();
|
this.activeIndex = index;
|
||||||
|
this.paytype = item.paytype;
|
||||||
|
if (index == 1) {
|
||||||
|
//支付宝
|
||||||
|
let res = await generateOrderAlipay(this.userPayData.orderId);
|
||||||
|
if (res.success) {
|
||||||
|
this.qrcode(res.data);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
usershow(){
|
//支付监听
|
||||||
console.log('这是支付')
|
async updateOrderWX() {
|
||||||
this.dialogInfo1=true;
|
let res = await updateOrderWX();
|
||||||
|
if (res.success) {
|
||||||
|
this.dialogSuccess = true;
|
||||||
|
clearInterval(this.time);
|
||||||
|
} else {
|
||||||
|
this.dialogFail = true;
|
||||||
|
clearInterval(this.time);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
},
|
||||||
components: {
|
components: {
|
||||||
Myheader,
|
Myheader,
|
||||||
|
tabs,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped >
|
<style lang="less" scoped >
|
||||||
@media screen and (max-width: 768px) {
|
.sucess_img {
|
||||||
|
width: 96px;
|
||||||
.rc-usermaina{
|
height: 96px;
|
||||||
width: 100%;
|
margin-right: 10px;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.rc-userpay{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
/deep/.el-dialog {
|
|
||||||
width:80%;
|
|
||||||
height: 500px;
|
|
||||||
}
|
}
|
||||||
.rc-header{
|
.order_info {
|
||||||
display: flex;
|
padding: 10px 0;
|
||||||
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 {
|
.info {
|
||||||
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;
|
display: flex;
|
||||||
justify-content: space-between;
|
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) {
|
.ready {
|
||||||
.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;
|
font-size: 20px;
|
||||||
display: block;
|
color: #e2001a;
|
||||||
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 {
|
.ready_right {
|
||||||
height: 100px;
|
line-height: 200%;
|
||||||
display: flex;
|
padding-top: 8px;
|
||||||
align-items: center;
|
}
|
||||||
span {
|
.price {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #e2001a;
|
||||||
|
}
|
||||||
|
.pay_title {
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
|
padding: 26px 0;
|
||||||
color: #E2001A;
|
border-bottom: 1px solid #d7d7d7;
|
||||||
}
|
}
|
||||||
|
.pay_list {
|
||||||
}
|
padding: 20px 0;
|
||||||
|
.pay_item {
|
||||||
.payAlipay {
|
float: left;
|
||||||
|
margin-right: 20px;
|
||||||
margin-left: 20px;
|
|
||||||
.user-righticon{
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
img{
|
|
||||||
width: 8px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
|
||||||
height: 56px;
|
|
||||||
|
|
||||||
.rc-payype {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #E2001A;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 100%;
|
border: 1px solid #333333;
|
||||||
|
padding: 5px 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
&.active {
|
||||||
|
border: 1px solid #e2001a;
|
||||||
|
color: #e2001a;
|
||||||
|
}
|
||||||
img {
|
img {
|
||||||
width: 32px;
|
margin-right: 5px;
|
||||||
height: 32px;
|
width: 24px;
|
||||||
border-radius: 50%;
|
height: 24px;
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
clear: both;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.paycord {
|
||||||
.paycord{
|
padding: 10px;
|
||||||
width: 100%;
|
text-align: center;
|
||||||
display: flex;
|
.qrcode {
|
||||||
justify-content: center;
|
margin: 0 auto 10px;
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
img{
|
|
||||||
width: 260px;
|
width: 260px;
|
||||||
height: 260px;
|
height: 260px;
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
span{
|
}
|
||||||
font-size: 20px;
|
.dl_width {
|
||||||
display: block;
|
width: 440px;
|
||||||
color: #333333;
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
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>
|
</style>
|
||||||
@ -516,12 +516,12 @@ export default {
|
|||||||
this.$refs.userstandard[0].style.margin = 0 + "px";
|
this.$refs.userstandard[0].style.margin = 0 + "px";
|
||||||
});
|
});
|
||||||
this.userst();
|
this.userst();
|
||||||
this.activeIndex = stype;
|
// this.activeIndex = stype;
|
||||||
if (stype !== "" && stype !== undefined) {
|
// if (stype !== "" && stype !== undefined) {
|
||||||
this.onmessage(stype);
|
// this.onmessage(stype);
|
||||||
} else {
|
// } else {
|
||||||
this.usetmessage();
|
// this.usetmessage();
|
||||||
}
|
// }
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async usersearch(stype, usertype) {
|
async usersearch(stype, usertype) {
|
||||||
|
|||||||
@ -1,12 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Myheader></Myheader>
|
<Myheader></Myheader>
|
||||||
<div class="rc-top"></div>
|
<div class="usermain">
|
||||||
<div class="online bold"></div>
|
<div class="rc-main" v-for="(item, index) in list" :key="index">
|
||||||
<div class="usercontshow rc-max-width--xl">
|
|
||||||
<div class="usercontend" v-for="(item, index) in list" :key="index">
|
|
||||||
<div class="usercontshow usermain" >
|
|
||||||
<div class="rc-cat" >
|
|
||||||
<div class="rc-center">
|
<div class="rc-center">
|
||||||
<div class=" rc-title">
|
<div class=" rc-title">
|
||||||
<em>
|
<em>
|
||||||
@ -36,33 +32,17 @@
|
|||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="online bold rc-md-down"></div>
|
|
||||||
<!-- <div class="usercontend useradd">
|
|
||||||
<img src="../../assets/image/userselect.png" alt="">
|
|
||||||
<span>添加收货地址</span>
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="usercontshow useredit">
|
|
||||||
|
|
||||||
<img src="../../assets/image/userselect.png" alt="">
|
|
||||||
<span>添加收货地址</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-button">
|
<div class="rc-button">
|
||||||
<div class="rc-footbutton" @click="onAdd()">
|
<div class="rc-footbutton" @click="onAdd()">
|
||||||
<span>新增收货地址</span>
|
<span>新增收货地址</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<MyFooter></MyFooter>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
import Myheader from '~/components/header.vue'
|
import Myheader from '~/components/header.vue'
|
||||||
import MyFooter from '~/components/rc-footer.vue'
|
import MyFooter from '~/components/rc-footer.vue'
|
||||||
export default {
|
export default {
|
||||||
@ -79,23 +59,29 @@ export default {
|
|||||||
tel: "13000000000",
|
tel: "13000000000",
|
||||||
address: "浙江省杭州市西湖区文三路 138 号",
|
address: "浙江省杭州市西湖区文三路 138 号",
|
||||||
isDefault: true,
|
isDefault: true,
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
name: "李四",
|
name: "李四",
|
||||||
tel: "1310000000",
|
tel: "1310000000",
|
||||||
|
isDefault: false,
|
||||||
address: "浙江省杭州市拱墅区莫干山路 50 号",
|
address: "浙江省杭州市拱墅区莫干山路 50 号",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
name: "李四",
|
name: "李四",
|
||||||
tel: "1310000000",
|
tel: "1310000000",
|
||||||
|
isDefault: false,
|
||||||
address: "浙江省杭州市拱墅区莫干山路 50 号",
|
address: "浙江省杭州市拱墅区莫干山路 50 号",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
changeadddress(item,index){
|
||||||
|
console.log(item)
|
||||||
|
},
|
||||||
onEdit(item, index) {
|
onEdit(item, index) {
|
||||||
// let userid = item.id;
|
// let userid = item.id;
|
||||||
console.log(item);
|
console.log(item);
|
||||||
@ -138,7 +124,6 @@ export default {
|
|||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Myheader,
|
Myheader,
|
||||||
MyFooter
|
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user