mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 18:26:38 +08:00
Merge branch 'sit-Carl' of https://gitee.com/carl_Ming_1/smart-admin into sit-Carl-V3
This commit is contained in:
Carl
commit
70bc271022
@ -517,6 +517,7 @@ export const goodsmessage = (productCode) => {
|
||||
|
||||
//地址的添加 //id/详细地址/ 收货人姓名/收货人电话号码/省份id/城市id/区域编码
|
||||
export const editaddress = (memberId, detailAddress,recipient,tel,provinceId,cityId,districtId) => {
|
||||
|
||||
var data = {
|
||||
memberId:844350,
|
||||
provinceId:25,
|
||||
@ -528,7 +529,7 @@ export const goodsmessage = (productCode) => {
|
||||
zipCode:'214423',
|
||||
default:false,
|
||||
}
|
||||
return fetch('memberAddress?type=add', data, 'POST' )
|
||||
return fetch('memberAddress?type=add', memberId, 'POST' )
|
||||
}
|
||||
|
||||
//删除
|
||||
@ -541,21 +542,13 @@ export const goodsmessage = (productCode) => {
|
||||
}
|
||||
|
||||
//地址的编辑
|
||||
export const editupdate = (mobile, pet,address) => {
|
||||
var data = {
|
||||
|
||||
memberId:'3242',
|
||||
id:'620111',
|
||||
provinceId:'',
|
||||
cityId:'',
|
||||
districtId:'',
|
||||
detailAddress:'江西省萍乡市',
|
||||
recipient:'刘佳敏',
|
||||
recipientPhone:'13407998521',
|
||||
zipCode:'',
|
||||
isDefault:'',
|
||||
}
|
||||
return fetch('memberAddress?type=update', data, 'POST' )
|
||||
export const editupdate = (userid,) => {
|
||||
// var data = {
|
||||
// memberId:userid,
|
||||
// id:id,
|
||||
// isDefault:isDefault,
|
||||
// }
|
||||
return fetch('memberAddress?type=update', userid, 'POST' )
|
||||
}
|
||||
|
||||
//修改密码
|
||||
@ -615,3 +608,16 @@ export const getOrderList = (user, status) => {
|
||||
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' )
|
||||
}
|
||||
|
||||
@ -2,50 +2,51 @@
|
||||
|
||||
|
||||
@media screen and (max-width:768px){
|
||||
.usercontend{
|
||||
.rc-button{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
|
||||
height: 80px;
|
||||
align-items: center;
|
||||
padding:0 20px 0 20px;
|
||||
span
|
||||
{
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
border: 2px solid #E2001A;
|
||||
border-radius: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #E2001A;
|
||||
}
|
||||
em{
|
||||
font-style: normal;
|
||||
width: 164px;
|
||||
height: 48px;
|
||||
background: #E2001A;
|
||||
cursor: pointer;
|
||||
border-radius: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #FFFFFF;
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
.usercontend{
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
min-height: 70vh;
|
||||
.rc-useaddress{
|
||||
textarea{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.rc-button{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
|
||||
height: 80px;
|
||||
align-items: center;
|
||||
padding:0 20px 0 20px;
|
||||
span
|
||||
{
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
border: 2px solid #E2001A;
|
||||
border-radius: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #E2001A;
|
||||
}
|
||||
em{
|
||||
font-style: normal;
|
||||
width: 164px;
|
||||
height: 48px;
|
||||
background: #E2001A;
|
||||
cursor: pointer;
|
||||
border-radius: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #FFFFFF;
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.rc-max-width--xl{
|
||||
h2{
|
||||
display: none;
|
||||
@ -55,7 +56,7 @@
|
||||
}
|
||||
|
||||
.rc-max-width--xl{
|
||||
margin-top: 16px;
|
||||
padding: 24px 20px 0 20px;
|
||||
input{
|
||||
width: 258px;
|
||||
height: 34px;
|
||||
@ -100,6 +101,40 @@
|
||||
|
||||
@media screen and (min-width: 769px)
|
||||
{
|
||||
.rc-button{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
|
||||
height: 80px;
|
||||
align-items: center;
|
||||
padding:0 20px 0 20px;
|
||||
span
|
||||
{
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
border: 2px solid #E2001A;
|
||||
border-radius: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #E2001A;
|
||||
}
|
||||
em{
|
||||
font-style: normal;
|
||||
width: 164px;
|
||||
height: 48px;
|
||||
background: #E2001A;
|
||||
cursor: pointer;
|
||||
border-radius: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #FFFFFF;
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
.usercontend{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -197,12 +232,11 @@
|
||||
// .rc-phone{
|
||||
|
||||
// }
|
||||
// .rc-address{
|
||||
.rc-address{
|
||||
position: relative;
|
||||
|
||||
// }
|
||||
// .rc-useaddress{
|
||||
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width:768px){
|
||||
.rc-button{
|
||||
display: flex;
|
||||
@ -7,8 +10,6 @@
|
||||
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
|
||||
height: 80px;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding:0 20px 0 20px;
|
||||
span
|
||||
{
|
||||
@ -35,8 +36,27 @@
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
.usercontend{
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
min-height: 70vh;
|
||||
.rc-useaddress{
|
||||
textarea{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.rc-max-width--xl{
|
||||
h2{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.rc-max-width--xl{
|
||||
margin-top: 16px;
|
||||
padding: 24px 20px 0 20px;
|
||||
input{
|
||||
width: 258px;
|
||||
height: 34px;
|
||||
@ -61,8 +81,6 @@
|
||||
span{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
// .rc-phone{
|
||||
|
||||
@ -82,8 +100,147 @@
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px)
|
||||
{
|
||||
{
|
||||
.rc-button{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
|
||||
height: 80px;
|
||||
align-items: center;
|
||||
padding:0 20px 0 20px;
|
||||
span
|
||||
{
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
border: 2px solid #E2001A;
|
||||
border-radius: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #E2001A;
|
||||
}
|
||||
em{
|
||||
font-style: normal;
|
||||
width: 164px;
|
||||
height: 48px;
|
||||
background: #E2001A;
|
||||
cursor: pointer;
|
||||
border-radius: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #FFFFFF;
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
.usercontend{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
.rc-button{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
|
||||
height: 80px;
|
||||
align-items: center;
|
||||
|
||||
padding:0 20px 0 20px;
|
||||
span
|
||||
{
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
border: 2px solid #E2001A;
|
||||
border-radius: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #E2001A;
|
||||
}
|
||||
em{
|
||||
font-style: normal;
|
||||
width: 164px;
|
||||
height: 48px;
|
||||
background: #E2001A;
|
||||
cursor: pointer;
|
||||
border-radius: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #FFFFFF;
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
h2{
|
||||
font-size: 26px;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
.rc-useaddress{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
textarea{
|
||||
width: 680px;
|
||||
height: 118px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #808285;
|
||||
opacity: 1;
|
||||
border-radius: 0px;
|
||||
padding-top: 12px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.userinput{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.rc-max-width--xl{
|
||||
margin-top: 16px;
|
||||
input{
|
||||
width: 680px;
|
||||
height: 45px;
|
||||
border: 1px solid #808285;
|
||||
color: #999999;
|
||||
font-size: 16px;
|
||||
margin-left: 2px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
span{
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
width: 10%;
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.rc-people{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
// .rc-phone{
|
||||
|
||||
// }
|
||||
.rc-address{
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -8,6 +8,33 @@ body{
|
||||
.fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
.ts-no-data{
|
||||
text-align: center;
|
||||
margin:3rem 0;
|
||||
}
|
||||
.ts-mask{
|
||||
width:100%;
|
||||
height:100%;
|
||||
position: fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index:99;
|
||||
|
||||
.ts-mask-bg{
|
||||
background-color:#000;
|
||||
opacity:.6;
|
||||
width:100%;
|
||||
height:100%;
|
||||
z-index:0;
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
}
|
||||
}
|
||||
.userloding {
|
||||
background: url(../image/onloading.png) center center no-repeat;
|
||||
width: 3.12rem;
|
||||
@ -260,6 +287,7 @@ img, picture {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@ -473,6 +501,7 @@ img, picture {
|
||||
li{
|
||||
margin-top: .5rem;
|
||||
height:4.125rem;
|
||||
cursor: pointer;
|
||||
img{
|
||||
width:22px;
|
||||
height:auto;
|
||||
@ -596,4 +625,73 @@ img, picture {
|
||||
//margin-right:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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,10 +1,7 @@
|
||||
|
||||
|
||||
.rc-margin-bottom--lg{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width:768px){
|
||||
.online{
|
||||
width:100%;
|
||||
@ -46,7 +43,11 @@ color: #FFFFFF;
|
||||
|
||||
}
|
||||
.rc-max-width--xl{
|
||||
padding: 24px 20px 24px 20px;
|
||||
padding: 0px 20px 24px 20px;
|
||||
min-height: 60vh;
|
||||
.rc-cat{
|
||||
margin-top: 20px;
|
||||
}
|
||||
.rc-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -61,9 +62,7 @@ color: #FFFFFF;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
.rc-center{
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -112,17 +111,19 @@ color: #FFFFFF;
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px)
|
||||
@media screen and (min-width: 768px)
|
||||
|
||||
{
|
||||
.rc-max-width--xl{
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.rc-button{
|
||||
|
||||
display: none;
|
||||
}
|
||||
.usercontend {
|
||||
display:inline-block;
|
||||
}
|
||||
.usercontshow{
|
||||
.rc-button{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.usercontend{
|
||||
margin-top: 40px;
|
||||
@ -134,15 +135,17 @@ color: #FFFFFF;
|
||||
display: none;
|
||||
}
|
||||
.useredit{
|
||||
width: 680px;
|
||||
height: 164px;
|
||||
width: 640px;
|
||||
height: 166px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #D7D7D7;
|
||||
opacity: 1;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display:inline-block;
|
||||
margin-left: 35px;
|
||||
|
||||
img{
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
@ -153,6 +156,13 @@ span{
|
||||
font-size: 18px;
|
||||
|
||||
}
|
||||
.alledit{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
.usercontend{
|
||||
.useradd{
|
||||
@ -210,6 +220,7 @@ img{
|
||||
top: 24px;
|
||||
span {
|
||||
border-bottom: 1px solid #666666;
|
||||
cursor: pointer;
|
||||
}
|
||||
span:first-child {
|
||||
margin-right: 16px;
|
||||
@ -235,32 +246,7 @@ img{
|
||||
|
||||
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
.rc-header {
|
||||
display: flex;
|
||||
|
||||
366
rc-busness/assets/css/orderquantity.less
Normal file
366
rc-busness/assets/css/orderquantity.less
Normal file
@ -0,0 +1,366 @@
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width:768px){
|
||||
.active {
|
||||
font-size: 14px;
|
||||
color: #e2001a;
|
||||
cursor: pointer;
|
||||
}
|
||||
.unactive {
|
||||
font-size: 14px;
|
||||
color: #444444;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.usercontshow{
|
||||
padding: 0 1.5rem;
|
||||
.online{
|
||||
margin: 0;
|
||||
&.bold{
|
||||
height: 0.5rem;
|
||||
}
|
||||
}
|
||||
.rc-usermaina{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.rc-headera {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 64px;
|
||||
align-items: center;
|
||||
}
|
||||
.rc-userheader{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rc-center {
|
||||
width: 100%;
|
||||
height: 245px;
|
||||
margin-top: 8px;
|
||||
.rc-usermain {
|
||||
.pc-bottom{
|
||||
display: none;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
.rc-image {
|
||||
border: 1px solid #D8D8D8;
|
||||
margin-top: 17px;
|
||||
;
|
||||
img {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
display: block;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.rc-right {
|
||||
|
||||
.rc-userbottomm{
|
||||
display: none;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin-left: 16px;
|
||||
justify-content: center;
|
||||
em
|
||||
{
|
||||
font-style: normal;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
margin-top: 18px;
|
||||
font-weight: bold;
|
||||
|
||||
color: #E1001A;
|
||||
}
|
||||
}
|
||||
.rc-userright {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
span{
|
||||
display: block;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
.rc-userbottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 8px;
|
||||
span{
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
}
|
||||
i{
|
||||
font-style: normal;
|
||||
color: #E1001A;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rc-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 24px;
|
||||
span {
|
||||
display: block;
|
||||
width: 130px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
color: #e2001a;
|
||||
height: 40px;
|
||||
border: 2px solid #e2001a;
|
||||
justify-content: center;
|
||||
border-radius: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
span:last-child{
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rc-title {
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #d8d8d8;
|
||||
justify-content: space-between;
|
||||
span{
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
margin-left: 8px;
|
||||
}
|
||||
em{
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
|
||||
color: #333333;
|
||||
}
|
||||
i{
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
|
||||
color: #333333;
|
||||
}
|
||||
.rc-usertitle strong{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@media screen and (min-width: 769px)
|
||||
{
|
||||
.active {
|
||||
font-size: 18px;
|
||||
color: #e2001a;
|
||||
cursor: pointer;
|
||||
// margin-left: 40px;
|
||||
}
|
||||
.unactive {
|
||||
font-size: 18px;
|
||||
color: #444444;
|
||||
cursor: pointer;
|
||||
// margin-left: 80px;
|
||||
}
|
||||
.usercontshow{
|
||||
.rc-headera {
|
||||
display: flex;
|
||||
height: 64px;
|
||||
align-items: center;
|
||||
border: 1px solid #D7D7D7;
|
||||
border-radius: 3px 3px 0px 0px;
|
||||
font-size: 18px;
|
||||
span:first-child{
|
||||
margin-left: 40px;
|
||||
}
|
||||
span{
|
||||
margin-left: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.rc-userheader{
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
background: #F6F6F6;
|
||||
border: 1px solid #D7D7D7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 18px;
|
||||
span:first-child{
|
||||
margin-left: 173px;
|
||||
}
|
||||
span:last-child{
|
||||
margin-right: 87px;
|
||||
}
|
||||
}
|
||||
|
||||
.rc-center {
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
border: 1px solid #D7D7D7;
|
||||
.rc-usermain {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 164px;
|
||||
.rc-usercenter{
|
||||
width: 25%;
|
||||
em{
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.rc-image {
|
||||
border: 1px solid #D8D8D8;
|
||||
margin-left: 40px;
|
||||
|
||||
img {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
display: block;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.rc-right {
|
||||
.rc-userbottom{
|
||||
display: none;
|
||||
}
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
margin-left: 16px;
|
||||
|
||||
em
|
||||
{
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
margin-top: 18px;
|
||||
|
||||
color: #E1001A;
|
||||
}
|
||||
}
|
||||
.rc-userright {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #666666;
|
||||
font-size: 16px;
|
||||
span{
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
.rc-userbottomm {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 58%;
|
||||
font-size: 20px;
|
||||
color: #E1001A;
|
||||
font-weight: bold;
|
||||
i{
|
||||
font-style: normal;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.pc-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-right: 40px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 130px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 40px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: #e2001a;
|
||||
height: 40px;
|
||||
border: 2px solid #e2001a;
|
||||
justify-content: center;
|
||||
border-radius: 30px;
|
||||
}
|
||||
span:last-child{
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rc-bottom {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.rc-title {
|
||||
height: 55px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #d8d8d8;
|
||||
justify-content: space-between;
|
||||
span{
|
||||
font-size: 16px;
|
||||
color: #999999;
|
||||
margin-left: 8px;
|
||||
}
|
||||
strong{
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #444444;
|
||||
}
|
||||
em{
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
|
||||
color: #333333;
|
||||
}
|
||||
i{
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
margin-left: 40px;
|
||||
|
||||
color: #333333;
|
||||
}
|
||||
.rc-usertitle{
|
||||
margin-right: 73px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
em{
|
||||
display: block;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -144,10 +144,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/.el-dialog {
|
||||
width: 80%;
|
||||
position: relative;
|
||||
}
|
||||
.rc-discount {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@ -169,8 +165,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #e1001a;
|
||||
padding-right: 21px;
|
||||
width: 30%;
|
||||
width: 34%;
|
||||
float: left;
|
||||
height: 100%;
|
||||
i {
|
||||
@ -190,7 +185,7 @@
|
||||
.rc-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 36px;
|
||||
padding-left: 20px;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
i {
|
||||
@ -204,7 +199,7 @@
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
em {
|
||||
font-style: normal;
|
||||
@ -405,11 +400,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/.el-dialog {
|
||||
width: 440px;
|
||||
height: 432px;
|
||||
position: relative;
|
||||
}
|
||||
.rc-discount {
|
||||
position: relative;
|
||||
img {
|
||||
@ -430,8 +420,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #e1001a;
|
||||
padding-right: 21px;
|
||||
width: 30%;
|
||||
width: 34%;
|
||||
float: left;
|
||||
height: 100%;
|
||||
i {
|
||||
@ -451,7 +440,7 @@
|
||||
.rc-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 36px;
|
||||
padding-left: 20px;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
i {
|
||||
@ -465,7 +454,7 @@
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
em {
|
||||
font-style: normal;
|
||||
@ -586,4 +575,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.rc-carousel__gallery-thumbnail{
|
||||
display: inline;
|
||||
.rc-img--square{
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
}
|
||||
&.rc-carousel__gallery-thumbnail--active{
|
||||
.rc-img--square{
|
||||
border: 1px solid #E2001A;
|
||||
}
|
||||
}
|
||||
}
|
||||
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 |
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="ts-area-picker-container">
|
||||
<input class="ts-area-picker-value-displayer" placeholder="请选择收货地址" @focus="initAddress" v-model="displayValue"></input>
|
||||
<input class="ts-area-picker-value-displayer" placeholder="请选择收货地址" @focus="popAddress" v-model="displayValue"></input>
|
||||
<input type="hidden" :value="returnValue">
|
||||
|
||||
<div class="ts-area-picker-desktop" v-if="show">
|
||||
@ -10,12 +10,12 @@
|
||||
<li @click="switchTab(1)">{{ returnValueArr[1]?returnValueArr[1].name:'请选择' }}</li>
|
||||
<li @click="switchTab(2)">{{ returnValueArr[2]?returnValueArr[2].name:'请选择' }}</li>
|
||||
</ul>
|
||||
<div class="close" @click="hideAddress"></div>
|
||||
<div class="close" @click="pcHideAddress"></div>
|
||||
</div>
|
||||
<div class="ts-area-picker-values">
|
||||
<ul>
|
||||
<li v-for="(item, index) in curDisplayingCol" :key="item.id" @click="pickValue(item.id,item.name)" v-bind:class="{ active:(returnValueArr[curDisplayingColIndex]?returnValueArr[curDisplayingColIndex].id==item.id:false) }">
|
||||
{{ item.name }}
|
||||
<span>{{ item.name }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -37,6 +37,9 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
areaData
|
||||
} from "~/config/area.js";
|
||||
export default {
|
||||
props:["defaultValues"],
|
||||
data(){
|
||||
@ -46,46 +49,21 @@ export default {
|
||||
returnValue:"",
|
||||
returnValueArr:[],
|
||||
show:false,
|
||||
columns:[
|
||||
{
|
||||
values:[{id:"001",name:"省份1"},{id:"002",name:"省份2"}],
|
||||
className:'col1'
|
||||
},
|
||||
{
|
||||
values:[{id:"001-001",name:"省份1-城市1"},{id:"001-002",name:"省份1-城市2"},{id:"002-001",name:"省份2-城市1"},{id:"002-002",name:"省份2-城市2"}],
|
||||
className:'col2'
|
||||
},
|
||||
{
|
||||
values:[{id:"001-001-001",name:"省份1-城市1-区1"},{id:"001-002-002",name:"省份1-城市2-区2"},{id:"002-001-001",name:"省份2-城市1-区1"},{id:"002-002-002",name:"省份2-城市2-区2"}],
|
||||
className:'col3'
|
||||
}
|
||||
],
|
||||
columns:areaData,
|
||||
curDisplayingColIndex:0,
|
||||
curDisplayingCol:[]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
initAddress(){
|
||||
this.show=true;
|
||||
//Initilizing
|
||||
|
||||
//mobile
|
||||
let self=this;
|
||||
// defaultValues : array[{id:"_ID_IN_columns_of_province",name:"_NAME_IN_columns"},{id:"_ID_IN_columns_of_city",name:"_NAME_IN_columns"},{id:"_ID_IN_columns_of_area",name:"_NAME_IN_columns"}]
|
||||
let defaultValues = [{id:this.columns[0].values[0].id, name:this.columns[0].values[0].name},{id:this.columns[1].values[0].id, name:this.columns[1].values[0].name},{id:this.columns[2].values[0].id, name:this.columns[2].values[0].name}];
|
||||
if(this.defaultValues)
|
||||
defaultValues=this.defaultValues;
|
||||
this.$children.forEach(function(vueComponent){
|
||||
if(vueComponent._name=="<VanPicker>")
|
||||
{
|
||||
self.onChange(vueComponent,defaultValues); //Important
|
||||
}
|
||||
});
|
||||
//mobile end
|
||||
|
||||
//PC
|
||||
this.switchTab(this.curDisplayingColIndex);
|
||||
//PC end
|
||||
if(this.defaultValues && this.defaultValues.length>0)
|
||||
{
|
||||
defaultValues = this.defaultValues;
|
||||
this.onConfirm(defaultValues);
|
||||
}
|
||||
//Initilizing end
|
||||
},
|
||||
pickValue(pickId,pickName){
|
||||
@ -132,20 +110,48 @@ export default {
|
||||
//Handling City
|
||||
let matchedCity=_self.fitlerValuesInArray(curSelection.province,_self.columns[index].values);
|
||||
picker.setColumnValues(index,matchedCity);
|
||||
curSelection.city=matchedCity[0].id;
|
||||
if(_self.inArray(ele,matchedCity))
|
||||
{
|
||||
curSelection.city=ele.id;
|
||||
}
|
||||
else
|
||||
{
|
||||
console.log('502 : Invalid City Options');
|
||||
curSelection.city=matchedCity[0].id;
|
||||
}
|
||||
//Handling City end
|
||||
break;
|
||||
default:
|
||||
//Handling Area
|
||||
let matchedArea=_self.fitlerValuesInArray(curSelection.city,_self.columns[index].values);
|
||||
picker.setColumnValues(index,matchedArea);
|
||||
curSelection.area=matchedArea[0].id;
|
||||
if(_self.inArray(ele,matchedArea))
|
||||
{
|
||||
curSelection.area=ele.id;
|
||||
}
|
||||
else if(matchedArea.length)
|
||||
{
|
||||
console.log('503 : Invalid Area Options');
|
||||
curSelection.area=matchedArea[0].id;
|
||||
}
|
||||
//Handling Area end
|
||||
break;
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
inArray(needle,haystack){
|
||||
if(!needle || !needle.id)
|
||||
return false;
|
||||
if(!haystack || haystack.length<haystack)
|
||||
return false;
|
||||
for(var i in haystack){
|
||||
if(haystack[i].id==needle.id){
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
validatePickedValues(){
|
||||
let _self=this;
|
||||
let provinceId='';
|
||||
@ -197,18 +203,24 @@ export default {
|
||||
let tmpArr = [];
|
||||
this.displayValue='';
|
||||
values.forEach(function(ele,index){
|
||||
if(!ele || !ele.name)
|
||||
{
|
||||
ele={id:'',name:''};
|
||||
}
|
||||
_self.displayValue = _self.displayValue + ele.name + " ";
|
||||
tmpArr.push(ele.id);
|
||||
returnVal.push(ele);
|
||||
});
|
||||
this.returnValueArr=returnVal;
|
||||
this.returnValue=tmpArr.join("|");
|
||||
this.$emit('getmenu',this.returnValueArr);
|
||||
this.hideAddress();
|
||||
},
|
||||
onCancel() {
|
||||
|
||||
},
|
||||
fitlerValuesInArray(stringStartWith,dataColArea){
|
||||
stringStartWith=stringStartWith+"-";
|
||||
let result=[];
|
||||
dataColArea.forEach(function(ele){
|
||||
if(ele.id.indexOf(stringStartWith)===0)
|
||||
@ -220,6 +232,36 @@ export default {
|
||||
},
|
||||
popAddress() {
|
||||
this.show=true;
|
||||
let _self=this;
|
||||
|
||||
//mobile
|
||||
//const picker = this.selectComponent('.ts-area-picker-mobile-component');
|
||||
this.defaultValues.forEach(function(ele,index){
|
||||
let tmpPointer=parseInt(_self.inArray(ele,_self.columns[index].values));
|
||||
if(tmpPointer)
|
||||
{
|
||||
_self.columns[index].defaultIndex = tmpPointer;
|
||||
}
|
||||
});
|
||||
|
||||
// setTimeout(function(){
|
||||
// //debugger;
|
||||
// _self.$children.forEach(function(vueComponent){
|
||||
// if(vueComponent._name=="<VanPicker>")
|
||||
// {
|
||||
// _self.onChange(vueComponent,_self.returnValueArr); //Important
|
||||
// }
|
||||
// });
|
||||
// },500);
|
||||
//mobile end
|
||||
|
||||
//PC
|
||||
this.curDisplayingColIndex=0;
|
||||
this.switchTab(this.curDisplayingColIndex);
|
||||
//PC end
|
||||
},
|
||||
pcHideAddress() {
|
||||
this.onConfirm(this.returnValueArr);
|
||||
},
|
||||
hideAddress() {
|
||||
this.show=false;
|
||||
@ -229,10 +271,10 @@ export default {
|
||||
if(tabIndex==0){
|
||||
this.curDisplayingCol = this.columns[tabIndex].values;
|
||||
}
|
||||
//Check can switch to next tab
|
||||
let lastValidatedTabIndex=this.validatePickedValues();
|
||||
if(lastValidatedTabIndex<(tabIndex-1))
|
||||
{
|
||||
//TODO show warning here
|
||||
let errorEle=document.querySelector(".ts-area-picker-values");
|
||||
errorEle.classList.add("error");
|
||||
let _self = this;
|
||||
@ -246,6 +288,9 @@ export default {
|
||||
}
|
||||
tabIndex=lastValidatedTabIndex+1;
|
||||
}
|
||||
//Check can switch to next tab end
|
||||
|
||||
//Building column values for current
|
||||
this.curDisplayingColIndex=tabIndex;
|
||||
let filteredData=this.columns[tabIndex].values;
|
||||
if(tabIndex>0 && this.returnValueArr[tabIndex-1]) //pass
|
||||
@ -254,7 +299,13 @@ export default {
|
||||
filteredData=this.fitlerValuesInArray(pickedId,this.columns[tabIndex].values);
|
||||
}
|
||||
this.curDisplayingCol=filteredData;
|
||||
if(this.curDisplayingCol && this.curDisplayingCol.length<=0)
|
||||
{
|
||||
this.onConfirm(this.returnValueArr);
|
||||
}
|
||||
//Building column values for current end
|
||||
|
||||
//Filling style
|
||||
areaTabLi.forEach(function(ele,index){
|
||||
if(tabIndex==index){
|
||||
ele.classList.add('active');
|
||||
@ -262,11 +313,11 @@ export default {
|
||||
else
|
||||
ele.classList.remove('active');
|
||||
})
|
||||
|
||||
//Filling style end
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
|
||||
this.initAddress();
|
||||
},
|
||||
components:{
|
||||
|
||||
@ -275,13 +326,13 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ts-area-picker-container{display:inline-block;}
|
||||
.ts-area-picker-container{display:inline-block;position:relative;}
|
||||
.ts-area-picker-value-displayer{
|
||||
width:40rem;
|
||||
|
||||
}
|
||||
.ts-area-picker-tmp-value{
|
||||
border-bottom:1px solid #D7D7D7;
|
||||
padding:0 2.5rem;
|
||||
padding:0;
|
||||
box-sizing: border-box;
|
||||
position:relative;
|
||||
ul{
|
||||
@ -291,10 +342,11 @@ export default {
|
||||
li{
|
||||
display:inline-block;
|
||||
color:#333333;
|
||||
width:3.125rem;
|
||||
width:8rem;
|
||||
padding: 1.25rem 0;
|
||||
margin-right:4rem;
|
||||
margin-right:.75rem;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
&.active{
|
||||
color:#E2001A;
|
||||
border-bottom:4px solid #E2001A;
|
||||
@ -314,7 +366,8 @@ export default {
|
||||
}
|
||||
.ts-area-picker-values{
|
||||
width:100%;
|
||||
height:100%;
|
||||
height:78%;
|
||||
overflow:auto;
|
||||
&.error{
|
||||
position:relative;
|
||||
width:100%;
|
||||
@ -333,21 +386,25 @@ export default {
|
||||
}
|
||||
}
|
||||
ul{
|
||||
padding:1rem 2.5rem 2rem 2.5rem;
|
||||
padding:1rem .5rem 2rem 2.5rem;
|
||||
margin:0;
|
||||
}
|
||||
li{
|
||||
display:inline-block;
|
||||
margin-top:1rem;
|
||||
margin-right:3.875rem;
|
||||
margin-right:.875rem;
|
||||
color:#333;
|
||||
width:8rem;
|
||||
cursor:pointer;
|
||||
&.nth-child(6n){
|
||||
&:nth-child(4n){
|
||||
margin-right:0;
|
||||
}
|
||||
&.active{
|
||||
color:#E2001A;
|
||||
border-bottom:4px solid #E2001A;
|
||||
span{
|
||||
display:inline-block;
|
||||
border-bottom: 4px solid #E2001A;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -401,6 +458,17 @@ export default {
|
||||
.ts-area-picker-desktop{
|
||||
display:none;
|
||||
}
|
||||
.ts-area-picker-value-displayer{
|
||||
width: 258px;
|
||||
height: 34px;
|
||||
border: none;
|
||||
border-bottom: 1px
|
||||
solid #808285;
|
||||
color: #999999;
|
||||
font-size: 16px;
|
||||
margin-left: 2px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width:769px)
|
||||
{
|
||||
@ -410,15 +478,19 @@ export default {
|
||||
.ts-area-picker-mobile{
|
||||
display:none;
|
||||
}
|
||||
.ts-area-picker-container,.ts-area-picker-value-displayer{
|
||||
width:40rem;
|
||||
}
|
||||
.ts-area-picker-desktop{
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
display:block;
|
||||
width:100%;
|
||||
height:19.25rem;
|
||||
border:1px solid #808285;
|
||||
overflow:hidden;
|
||||
}
|
||||
.ts-area-picker-values{
|
||||
|
||||
background:#fff;
|
||||
}
|
||||
}
|
||||
@keyframes flash-error
|
||||
|
||||
@ -76,7 +76,7 @@
|
||||
<a href="https://royalcanin.com.cn/dogs" class="rc-list__header" data-ref="nav-link" role="menuitem" title="犬">犬</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#/tailored-nutrition" class="rc-list__header" data-ref="nav-link" role="menuitem" title="定制营养方案">定制营养方案</a>
|
||||
<a href="/productdetails/productlist/" class="rc-list__header" data-ref="nav-link" role="menuitem" title="定制营养方案">定制营养方案</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="https://royalcanin.com.cn/about" class="rc-list__header" data-ref="nav-link" role="menuitem" title="关于我们">关于我们</a>
|
||||
@ -92,7 +92,7 @@
|
||||
<a href="https://royalcanin.com.cn/cats" class="rc-list__header rc-margin--none" role="menuitem">猫</a>
|
||||
<ul class="rc-list rc-list--blank rc-list--align test" role="menu">
|
||||
<li class="rc-list__item">
|
||||
<a href="#/cats/products" class="rc-list__link" role="menuitem">产品</a>
|
||||
<a href="/productdetails/productlist/?stype=0" class="rc-list__link" role="menuitem">产品</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="https://royalcanin.com.cn/cats/breeds" class="rc-list__link" role="menuitem">品种</a>
|
||||
@ -113,7 +113,7 @@
|
||||
<a href="https://royalcanin.com.cn/dogs" class="rc-list__header rc-margin--none" role="menuitem">犬</a>
|
||||
<ul class="rc-list rc-list--blank rc-list--align test" role="menu">
|
||||
<li class="rc-list__item">
|
||||
<a href="#dogs/products" class="rc-list__link" role="menuitem">产品</a>
|
||||
<a href="/productdetails/productlist/?stype=1" class="rc-list__link" role="menuitem">产品</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="https://royalcanin.com.cn/dogs/breeds" class="rc-list__link" role="menuitem">品种</a>
|
||||
@ -131,13 +131,13 @@
|
||||
</li>
|
||||
<li class="rc-list__item rc-list__item--group">
|
||||
<img src="../assets/showimage/sub-nav-3.jpg" class="ts-head-img rc-margin-bottom--xs">
|
||||
<a href="/" class="rc-list__header rc-margin--none" role="menuitem">定制营养方案</a>
|
||||
<a href="/productdetails/productlist/" class="rc-list__header rc-margin--none" role="menuitem">定制营养方案</a>
|
||||
<ul class="rc-list rc-list--blank rc-list--align test" role="menu">
|
||||
<li class="rc-list__item">
|
||||
<a href="#cats/products" class="rc-list__link" role="menuitem">猫系列</a>
|
||||
<a href="/productdetails/productlist/?stype=0" class="rc-list__link" role="menuitem">猫系列</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#dogs/products" class="rc-list__link" role="menuitem">狗系列</a>
|
||||
<a href="/productdetails/productlist/?stype=1" class="rc-list__link" role="menuitem">狗系列</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
@ -207,7 +207,7 @@
|
||||
<a href="https://royalcanin.com.cn/cats" class="rc-list__header" title="Cat" role="menuitem">猫</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#cats/products" class="rc-list__link ca" role="menuitem" title="Products">产品</a>
|
||||
<a href="/productdetails/productlist/?stype=0" class="rc-list__link ca" role="menuitem" title="Products">产品</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="https://royalcanin.com.cn/cats/breeds" class="rc-list__link ca" role="menuitem" title="Breeds">品种</a>
|
||||
@ -234,7 +234,7 @@
|
||||
<a href="https://royalcanin.com.cn/dogs" class="rc-list__header" title="Dog" role="menuitem">犬</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#dogs/products" class="rc-list__link ca" role="menuitem" title="Products">产品</a>
|
||||
<a href="/productdetails/productlist/?stype=1" class="rc-list__link ca" role="menuitem" title="Products">产品</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="https://royalcanin.com.cn/dogs/breeds" class="rc-list__link ca" role="menuitem" title="Breeds">品种</a>
|
||||
@ -252,19 +252,19 @@
|
||||
</li>
|
||||
|
||||
<li class="rc-list__item rc-list__item--group">
|
||||
<a href="https://royalcanin.com.cn/tailored-nutrition" class="rc-list__header" role="menuitem" id="mega-nav-header-3" data-toggle="nav-list-3">定制营养方案</a>
|
||||
<a href="/productdetails/productlist/" class="rc-list__header" role="menuitem" id="mega-nav-header-3" data-toggle="nav-list-3">定制营养方案</a>
|
||||
<ul class="rc-list rc-list--blank rc-list--align" id="nav-list-3" aria-labelledby="mega-nav-menu-3" role="menu">
|
||||
<li class="rc-list__item rc-md-down">
|
||||
<button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-3" role="button">返回</button>
|
||||
</li>
|
||||
<li class="rc-list__item rc-md-down">
|
||||
<a href="https://royalcanin.com.cn/tailored-nutrition" class="rc-list__header" title="Nutrition" role="menuitem">定制营养方案</a>
|
||||
<a href="/productdetails/productlist/" class="rc-list__header" title="Nutrition" role="menuitem">定制营养方案</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#cats/products" class="rc-list__link ca" role="menuitem">猫系列</a>
|
||||
<a href="/productdetails/productlist/?stype=0" class="rc-list__link ca" role="menuitem">猫系列</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#dogs/products" class="rc-list__link ca" role="menuitem">狗系列</a>
|
||||
<a href="/productdetails/productlist/?stype=1" class="rc-list__link ca" role="menuitem">狗系列</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@ -48,15 +48,15 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li class="rc-list__item rc-list__item--group" role="none">
|
||||
<a href="#tailored-nutrition" class="rc-list__header" role="menuitem" id="nav-footer-top-3" data-toggle="nav-footer-3"
|
||||
<a href="/productdetails/productlist/" class="rc-list__header" role="menuitem" id="nav-footer-top-3" data-toggle="nav-footer-3"
|
||||
>定制营养方案
|
||||
</a>
|
||||
<ul class="rc-list rc-list--blank rc-list--align" id="nav-footer-3" aria-labelledby="nav-footer-top-3" role="menu">
|
||||
<li class="rc-list__item">
|
||||
<a href="#cats/products" class="rc-list__link" data-ref="nav-link" role="menuitem">猫系列</a>
|
||||
<a href="/productdetails/productlist/?stype=0" class="rc-list__link" data-ref="nav-link" role="menuitem">猫系列</a>
|
||||
</li>
|
||||
<li class="rc-list__item">
|
||||
<a href="#dogs/products" class="rc-list__link" data-ref="nav-link" role="menuitem">狗系列</a>
|
||||
<a href="/productdetails/productlist/?style=1" class="rc-list__link" data-ref="nav-link" role="menuitem">狗系列</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
16
rc-busness/config/area.js
Normal file
16
rc-busness/config/area.js
Normal file
File diff suppressed because one or more lines are too long
@ -20,14 +20,20 @@ export default async(url = '', data = {}, type = 'GET', method = 'fetch') => {
|
||||
}
|
||||
|
||||
if (window.fetch && method === 'fetch') {
|
||||
let token='';
|
||||
let tokenStr = localStorage.getItem("userInfo");
|
||||
if(tokenStr){
|
||||
tokenStr = JSON.parse(tokenStr);
|
||||
if(tokenStr && tokenStr.xaccessToken)
|
||||
token=tokenStr.xaccessToken;
|
||||
}
|
||||
let requestConfig = {
|
||||
|
||||
method: type,
|
||||
headers: {
|
||||
// 'Accept': 'text/plain',
|
||||
'Content-Type': 'application/json'
|
||||
'Content-Type': 'application/json',
|
||||
'x-access-token': token
|
||||
},
|
||||
|
||||
mode: 'cors',
|
||||
// channelId:'H5@2021',
|
||||
cache: 'force-cache'
|
||||
|
||||
127
rc-busness/pages/address/address.vue
Normal file
127
rc-busness/pages/address/address.vue
Normal file
@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div>
|
||||
<van-address-edit
|
||||
:area-list="areaList"
|
||||
:address-info="{
|
||||
name: editAddressData.name,
|
||||
tel: editAddressData.tel,
|
||||
addressDetail: editAddressData.detailAddress,
|
||||
areaCode: areaCode,
|
||||
}"
|
||||
show-delete
|
||||
show-set-default
|
||||
show-search-result
|
||||
:search-result="searchResult"
|
||||
@save="onSave"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Toast } from "vant";
|
||||
import { areaList } from "@vant/area-data";
|
||||
var _ = require("lodash");
|
||||
import { memberAddress } from "../../ajax/getData";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
areaList,
|
||||
searchResult: [],
|
||||
areaCode: "",
|
||||
};
|
||||
},
|
||||
props: ["editAddressData"],
|
||||
computed: {},
|
||||
methods: {
|
||||
async onSave(content) {
|
||||
// Toast('save');
|
||||
let provinceId = Number(content.areaCode.substring(0, 2)); //省份id
|
||||
let cityId = Number(content.areaCode.substring(2, 4)); //城市id
|
||||
let districtId = Number(content.areaCode.substring(4, 7)); //区域编码
|
||||
//id 详细地址 /收货人姓名 电话号码 省份id/城市id/区域编码
|
||||
let memberId = JSON.parse(localStorage.getItem("userInfo")).data.id;
|
||||
let postData = {
|
||||
memberId,
|
||||
provinceId: 25,
|
||||
cityId: 36,
|
||||
districtId: 418,
|
||||
// provinceId,
|
||||
// cityId,
|
||||
// districtId,
|
||||
detailAddress: content.addressDetail,
|
||||
recipient: content.name,
|
||||
recipientPhone: content.tel,
|
||||
default: content.default,
|
||||
};
|
||||
let saveType = this.editAddressData.saveType ? "update" : "add";
|
||||
let data = await memberAddress(saveType, postData);
|
||||
if (data) {
|
||||
this.$message({
|
||||
type: "warning",
|
||||
message: data.msg,
|
||||
});
|
||||
if (data.code == "0") {
|
||||
this.$emit("isClose", false);
|
||||
}
|
||||
}
|
||||
},
|
||||
async onDelete() {
|
||||
// Toast("delete");
|
||||
let postData = {
|
||||
ids: this.editAddressData.id,
|
||||
memberId: this.editAddressData.memberId,
|
||||
};
|
||||
let data = await memberAddress("delete", postData);
|
||||
if (data) {
|
||||
this.$message({
|
||||
type: "warning",
|
||||
message: data.msg,
|
||||
});
|
||||
if (data.code == "0") {
|
||||
this.$emit("isClose", false);
|
||||
}
|
||||
}
|
||||
},
|
||||
async areaCodeInit() {
|
||||
var city = this.editAddressData.city;
|
||||
var district = this.editAddressData.district;
|
||||
this.areaCode = "1310001";
|
||||
// _.forEach(this.areaList.city_list, (o, c) => {
|
||||
// if (o == city) {
|
||||
// // let cityId = String(_.take(c, 2));
|
||||
// let cityId = c.substring(0, 4);
|
||||
// _.forEach(this.areaList.county_list, (i, a) => {
|
||||
// if (i == district) {
|
||||
// // let districtId = String(_.take(a, 2));
|
||||
// let districtId = a.substring(0, 4);
|
||||
// if (cityId == districtId) {
|
||||
// this.areaCode = a;
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.areaCodeInit();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.van-area {
|
||||
width: 400px;
|
||||
margin: 0 auto;
|
||||
border: 1px solid #808285;
|
||||
}
|
||||
.van-popup {
|
||||
background-color: transparent;
|
||||
}
|
||||
.van-overlay {
|
||||
background-color: transparent;
|
||||
}
|
||||
.v-modal {
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
@ -5,9 +5,43 @@
|
||||
<!-- Suppose in header end -->
|
||||
<div class="ts-banner-swiper-container">
|
||||
<swiper :options="headerSwiperOption">
|
||||
<swiper-slide v-for="(banner, index) in showingBanners" :key="index">
|
||||
<a :href="banner.link" target="_blank">
|
||||
<img :src="banner.src" class="useraimg"/>
|
||||
<swiper-slide>
|
||||
<a href="#" target="_blank">
|
||||
<picture>
|
||||
<source media="(max-width: 768px)" srcset="/images/banner/one.jpg">
|
||||
<source media="(min-width: 769px)" srcset="/images/banner/pc-banner1.png">
|
||||
<img src="/images/banner/one.jpg">
|
||||
</picture>
|
||||
</a>
|
||||
</swiper-slide>
|
||||
|
||||
<swiper-slide>
|
||||
<a href="#" target="_blank">
|
||||
<picture>
|
||||
<source media="(max-width: 768px)" srcset="/images/banner/two.jpg">
|
||||
<source media="(min-width: 769px)" srcset="/images/banner/pc-banner2.png">
|
||||
<img src="/images/banner/two.jpg">
|
||||
</picture>
|
||||
</a>
|
||||
</swiper-slide>
|
||||
|
||||
<swiper-slide>
|
||||
<a href="#" target="_blank">
|
||||
<picture>
|
||||
<source media="(max-width: 768px)" srcset="/images/banner/three.jpg">
|
||||
<source media="(min-width: 769px)" srcset="/images/banner/pc-banner3.png">
|
||||
<img src="/images/banner/three.jpg">
|
||||
</picture>
|
||||
</a>
|
||||
</swiper-slide>
|
||||
|
||||
<swiper-slide>
|
||||
<a href="#" target="_blank">
|
||||
<picture>
|
||||
<source media="(max-width: 768px)" srcset="/images/banner/four.jpg">
|
||||
<source media="(min-width: 769px)" srcset="/images/banner/pc-banner4.png">
|
||||
<img src="/images/banner/four.jpg">
|
||||
</picture>
|
||||
</a>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
@ -49,7 +83,7 @@
|
||||
<swiper-slide v-for="(item, index) in catlistvideo" :key="index">
|
||||
<div class="rc-video">
|
||||
<div class="uservideo">
|
||||
<video controls="" :poster=item.catimage>
|
||||
<video controls="" :poster=item.catimage preload="none">
|
||||
<source :src=item.video type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
@ -65,7 +99,7 @@
|
||||
<div class="sw-center" >
|
||||
<div class="rc-click" @click="selectproduce(item,index)">
|
||||
<div class="uservideo">
|
||||
<video controls="controls" :poster=item.catimage>
|
||||
<video controls="controls" :poster=item.catimage preload="none">
|
||||
<source :src= item.video type="video/ogg">
|
||||
</video>
|
||||
</div>
|
||||
@ -279,7 +313,7 @@
|
||||
<swiper-slide v-for="(item, key) in doglistvideo" :key="key">
|
||||
<div class="rc-video">
|
||||
<div class="uservideo">
|
||||
<video controls="" :poster=item.catimage>
|
||||
<video controls="" :poster=item.catimage preload="none">
|
||||
<source :src=item.video type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
@ -295,7 +329,7 @@
|
||||
<div class="sw-center" >
|
||||
<div class="rc-click" @click="selectproduce(item,index)">
|
||||
<div class="uservideo">
|
||||
<video controls="controls">
|
||||
<video controls="controls" preload="none" :poster="item.catimage">
|
||||
<source :src= item.video type="video/ogg">
|
||||
</video>
|
||||
</div>
|
||||
@ -739,22 +773,19 @@
|
||||
userserachlist:[{}],
|
||||
doggan:[],
|
||||
dogtype:[
|
||||
{
|
||||
title: "幼犬",
|
||||
},
|
||||
{
|
||||
title: "成犬",
|
||||
},
|
||||
{
|
||||
title: "老年犬",
|
||||
},
|
||||
{
|
||||
title: "品种犬",
|
||||
},
|
||||
{
|
||||
title: "亚健康",
|
||||
}
|
||||
],
|
||||
{
|
||||
title: "离乳期",
|
||||
},
|
||||
{
|
||||
title: "幼年",
|
||||
},
|
||||
{
|
||||
title: "成年",
|
||||
},
|
||||
{
|
||||
title: "老年",
|
||||
}
|
||||
],
|
||||
anchor:'',
|
||||
dogshi:[],
|
||||
catlist:[],
|
||||
@ -823,22 +854,17 @@
|
||||
],
|
||||
discoun: [
|
||||
{
|
||||
title: "幼猫",
|
||||
title: "<4月龄",
|
||||
},
|
||||
{
|
||||
title: "成猫",
|
||||
title: "4-12月龄",
|
||||
},
|
||||
{
|
||||
title: "老年猫",
|
||||
},
|
||||
{
|
||||
title: "品种猫",
|
||||
|
||||
|
||||
title: "1-7岁",
|
||||
},
|
||||
{
|
||||
title: "亚健康猫"
|
||||
},
|
||||
title: ">7岁"
|
||||
}
|
||||
],
|
||||
|
||||
discountlist: [
|
||||
@ -1065,7 +1091,11 @@
|
||||
centeredSlides: true,
|
||||
speed:1000,
|
||||
spaceBetween: 0,
|
||||
autoplay: true,
|
||||
autoplay: {
|
||||
delay: 3000,
|
||||
stopOnLastSlide: false,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: '#homeBannerSwiperPagnation',
|
||||
clickable:true
|
||||
@ -1370,13 +1400,14 @@
|
||||
userdogShi(){
|
||||
this.activeIndex5=(this.activeIndex5?this.activeIndex5:0);
|
||||
let apiDogSize=this.userdoglist[this.activeIndex5].title;
|
||||
let apiDogFoodType=this.dogtype[this.quanshiCurIndex].title;
|
||||
let apiDogAgeType=this.dogtype[this.quanshiCurIndex].title;
|
||||
|
||||
this.userstype=1;
|
||||
let petType={
|
||||
petType:1,
|
||||
categoryName:"皇家犬湿粮",
|
||||
name:apiDogFoodType,
|
||||
tagStatus:2,
|
||||
tagUsedAge:apiDogAgeType,
|
||||
name:apiDogSize
|
||||
}
|
||||
for(let i =0;i<this.userserachlist.length;i++){
|
||||
if(!this.userserachlist.includes(petType)){
|
||||
@ -1389,12 +1420,14 @@
|
||||
userdogGan(){
|
||||
this.activeIndex6=(this.activeIndex6?this.activeIndex6:0);
|
||||
let apiDogSize=this.userdoglist[this.activeIndex6].title;
|
||||
let apiDogFoodType=this.dogtype[this.quanganCurIndex].title;
|
||||
let apiDogAgeType=this.dogtype[this.quanganCurIndex].title;
|
||||
|
||||
this.userstype=1;
|
||||
let petType={
|
||||
petType:1,
|
||||
name:apiDogFoodType,
|
||||
tagStatus:1,
|
||||
tagUsedAge:apiDogAgeType,
|
||||
name:apiDogSize
|
||||
}
|
||||
for(let i =0;i<this.userserachlist.length;i++){
|
||||
if(!this.userserachlist.includes(petType)){
|
||||
@ -1565,10 +1598,11 @@
|
||||
catclickGan(){
|
||||
this.userstype=0;
|
||||
this.maoganCurIndex=this.maoganCurIndex?this.maoganCurIndex:0;
|
||||
let apiCatType=this.discoun[this.maoganCurIndex].title;
|
||||
let apiCatAgeType=this.discoun[this.maoshiCurIndex].title;
|
||||
let petType={
|
||||
petType:0,
|
||||
name:apiCatType,
|
||||
tagStatus:1,//干
|
||||
tagUsedAge:apiCatAgeType,
|
||||
}
|
||||
for(let i =0;i<this.userserachlist.length;i++){
|
||||
if(!this.userserachlist.includes(petType)){
|
||||
@ -1580,11 +1614,11 @@
|
||||
catclickShi(){
|
||||
this.userstype=0;
|
||||
this.maoshiCurIndex=this.maoshiCurIndex?this.maoshiCurIndex:0;
|
||||
let apiCatType=this.discoun[this.maoshiCurIndex].title;
|
||||
let apiCatAgeType=this.discoun[this.maoshiCurIndex].title;
|
||||
let petType={
|
||||
petType:0,
|
||||
categoryName:"皇家猫湿粮",
|
||||
name:apiCatType,
|
||||
tagStatus:2,//湿
|
||||
tagUsedAge:apiCatAgeType,
|
||||
}
|
||||
for(let i =0;i<this.userserachlist.length;i++){
|
||||
if(!this.userserachlist.includes(petType)){
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
415
rc-busness/pages/personal/settlement.less
Normal file
415
rc-busness/pages/personal/settlement.less
Normal file
@ -0,0 +1,415 @@
|
||||
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;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.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,168 +1,146 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="settlement">
|
||||
<Myheader></Myheader>
|
||||
<tabs></tabs>
|
||||
<div class="online"></div>
|
||||
|
||||
<div class="rc-main" v-for="(item,index) in goldmedal" :key="index" >
|
||||
<div class="rc-border"></div>
|
||||
|
||||
<div class="rc-main">
|
||||
<tabs></tabs>
|
||||
|
||||
<div class="address-list">
|
||||
<div
|
||||
class="mypersonal"
|
||||
v-for="(dataaddress, index) in useraddress"
|
||||
v-for="(item, index) in useraddress"
|
||||
: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">
|
||||
<span>{{ dataaddress.state }}</span>
|
||||
<i>{{ dataaddress.tel }}</i>
|
||||
<span>{{ item.recipient }}</span>
|
||||
<i>{{ item.recipientPhone }}</i>
|
||||
</div>
|
||||
<div class="per-delivery">
|
||||
<span>{{ dataaddress.address }}</span>
|
||||
<span>{{ item.address }}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="online" style="height:3px;width:100%;background:#DDDDDD;"></div>
|
||||
<div>
|
||||
<div class="rc-center">
|
||||
<div class="rc-usermain">
|
||||
<div class="rc-image">
|
||||
<img :src="item.catimage" alt="" />
|
||||
</div>
|
||||
<div class="rc-right">
|
||||
<div class="rc-usercenter">
|
||||
<em>{{ item.usereat }}</em>
|
||||
<div class="rc-userright">
|
||||
<span>规格:{{ item.num }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rc-userbottom">
|
||||
<span>数量:{{ item.specification }}件</span>
|
||||
<i>￥{{ item.userprice }}</i>
|
||||
<div class="rc-bottom">
|
||||
<span>联系客服申请售后</span>
|
||||
<div class="mypersonal">
|
||||
<div
|
||||
class="my-delivery"
|
||||
@click="addAddress"
|
||||
style="justify-content: center"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
<span>添加收货地址</span>
|
||||
</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 class="rc-merchandise">
|
||||
<ul>
|
||||
<li>
|
||||
<span>配送方式:</span>
|
||||
<i>{{ shopprice.price }}</i>
|
||||
</li>
|
||||
<li>
|
||||
<span> 活动促销:</span>
|
||||
<i>{{ shopprice.distribution }}</i>
|
||||
</li>
|
||||
<li>
|
||||
<span>商品总价:</span>
|
||||
<i>{{ shopprice.promotion }}</i>
|
||||
</li>
|
||||
<li>
|
||||
<span>配送费用:</span>
|
||||
<i>{{ shopprice.payment }}</i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="rc-foot">
|
||||
<div class="rc-foo">
|
||||
<div style="padding-top:55px">
|
||||
<i>合计金额:</i>
|
||||
<em>￥167.00</em>
|
||||
</div>
|
||||
<div style="padding-bottom:40px">
|
||||
<span>再次购买</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rc-button">
|
||||
<div class="rc-left">
|
||||
<span>总计：</span>
|
||||
<em>￥167.00</em>
|
||||
</div>
|
||||
<strong ref="rccolor" @click="jiesuan">结算</strong>
|
||||
|
||||
</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-image">
|
||||
<img :src="item.productImg" alt="" />
|
||||
</div>
|
||||
<div class="rc-right">
|
||||
<div class="rc-usercenter">
|
||||
<h3>{{ item.productName }}</h3>
|
||||
<p>规格:{{ item.specifications }}</p>
|
||||
</div>
|
||||
<div class="rc-userbottom">
|
||||
<p>￥{{ item.productPrice }}</p>
|
||||
<p>X{{ item.buyCount }}</p>
|
||||
<p class="price">￥{{ item.productPrice }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rc-contline"></div>
|
||||
<div class="rc-main">
|
||||
<div class="rc-merchandise">
|
||||
<ul>
|
||||
<li>
|
||||
<span>配送方式:</span>
|
||||
<i>{{ shopprice.price }}</i>
|
||||
</li>
|
||||
<li>
|
||||
<span> 活动促销:</span>
|
||||
<i>{{ shopprice.distribution }}</i>
|
||||
</li>
|
||||
<li>
|
||||
<span>商品总价:</span>
|
||||
<i class="red">{{ sumPrice }}</i>
|
||||
</li>
|
||||
<li>
|
||||
<span>配送费用:</span>
|
||||
<i class="red">{{ shopprice.payment }}</i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rc-contline"></div>
|
||||
<div class="rc-main">
|
||||
<div class="rc-foot">
|
||||
<div class="rc-foo">
|
||||
<div>
|
||||
<i>合计金额:</i>
|
||||
<em>{{ sumPrice }}</em>
|
||||
</div>
|
||||
<div style="font-weight: bold">
|
||||
<span @click="jiesuan()">提交订单</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog :visible.sync="dialogAdd" class="diallog_width" width="'100%">
|
||||
<div class="tc dl_cont" v-if="dialogAdd">
|
||||
<myAddress
|
||||
@isClose="dialogCtrl"
|
||||
:editAddressData="editAddressData"
|
||||
></myAddress>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Myheader from "~/components/header.vue";
|
||||
import {userin} from "../../ajax/getData";
|
||||
import tabs from "@/components/tabs.vue";
|
||||
import { userin, memberAddress, generateOrderWX } from "../../ajax/getData";
|
||||
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 {
|
||||
middleware: 'metaTitle',
|
||||
meta: {title: '订单结算'},
|
||||
middleware: "metaTitle",
|
||||
meta: { title: "订单结算" },
|
||||
data() {
|
||||
return {
|
||||
goldmedal:[],
|
||||
goldmedal: [],
|
||||
addressstype: null,
|
||||
orderstatus: '',
|
||||
userisdelivery:'待收货',
|
||||
orderstatus: "",
|
||||
userisdelivery: "待收货",
|
||||
userdelivery: "派送中",
|
||||
isshow:true,
|
||||
isshow: true,
|
||||
leftico: require("../../assets/image/rc-left.png"),
|
||||
orderNumber:'',
|
||||
|
||||
// delivery: [
|
||||
// {
|
||||
// state: "派送中",
|
||||
// time: "2021-11-21",
|
||||
// address: "广州天河—刘某某【15124617917】正在派送中",
|
||||
// },
|
||||
// ],
|
||||
|
||||
orderNumber: "",
|
||||
dialogAdd: false,
|
||||
editAddressData: {},
|
||||
curAddress: {},
|
||||
saveType: "",
|
||||
useraddress: [
|
||||
{
|
||||
state: "李某某",
|
||||
tel: "15124117917",
|
||||
address: "广东省 广州市 天河区 天河客运站118号",
|
||||
},
|
||||
{
|
||||
state: "李某某",
|
||||
tel: "15124117917",
|
||||
address: "广东省 广州市 天河区 天河客运站118号",
|
||||
},
|
||||
{
|
||||
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"),
|
||||
},
|
||||
// {
|
||||
// state: "李某某",
|
||||
// tel: "15124117917",
|
||||
// address: "广东省 广州市 天河区 天河客运站118号",
|
||||
// isdefault: true,
|
||||
// },
|
||||
// {
|
||||
// state: "李某某",
|
||||
// tel: "15124117917",
|
||||
// address: "广东省 广州市 天河区 天河客运站118号",
|
||||
// isdefault: false,
|
||||
// },
|
||||
],
|
||||
shopprice: {
|
||||
price: "标准快递",
|
||||
@ -170,49 +148,177 @@ export default {
|
||||
promotion: "￥167.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: {
|
||||
jiesuan(){
|
||||
// let userdata=this.$route.query.wxdata
|
||||
async getAddressList() {
|
||||
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({
|
||||
path: "/personal/userpay",
|
||||
query: {
|
||||
wxdata:userdata
|
||||
},
|
||||
|
||||
});
|
||||
},
|
||||
async canceldanhao(orderNumber){
|
||||
let data=await userin(orderNumber);
|
||||
console.log(data);
|
||||
// this.goldmedal=data;
|
||||
console.log(this.goldmedal);
|
||||
},
|
||||
path: "/personal/userpay",
|
||||
query: {
|
||||
userPayData:JSON.stringify(userPayData),
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
async canceldanhao(orderNumber) {
|
||||
let data = await userin(orderNumber);
|
||||
console.log(data);
|
||||
// this.goldmedal=data;
|
||||
console.log(this.goldmedal);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.addressstype = this.$route.query.stype;
|
||||
this.orderNumber=this.$route.query.orderNumber;
|
||||
this.canceldanhao(this.orderNumber)
|
||||
console.log(this.$refs.rccolor)
|
||||
this.$refs.rccolor.style.background='gray';
|
||||
this.goldmedal = JSON.parse(this.$route.query.list);
|
||||
console.log(this.$route);
|
||||
this.getAddressList();
|
||||
// this.addressstype = this.$route.query.stype;
|
||||
// this.orderNumber = this.$route.query.orderNumber;
|
||||
// this.canceldanhao(this.orderNumber);
|
||||
// console.log(this.$refs.rccolor);
|
||||
// this.$refs.rccolor.style.background = "gray";
|
||||
},
|
||||
components: {
|
||||
Myheader,
|
||||
tabs
|
||||
tabs,
|
||||
myAddress,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "./settlement.less";
|
||||
@import url("../../assets/css/global.less");
|
||||
@import url("../../assets/css/settlement.less");
|
||||
// @import url("../../assets/css/settlement.less");
|
||||
</style>
|
||||
@ -2,8 +2,8 @@
|
||||
<div>
|
||||
<Myheader></Myheader>
|
||||
<div class="rc-top"></div>
|
||||
<div class="rc-header">
|
||||
<div class="rc-main">
|
||||
<div class="online bold"></div>
|
||||
<div class="usercontshow rc-max-width--xl">
|
||||
<div class="rc-headera">
|
||||
<span
|
||||
v-for="(item, index) in discountlist"
|
||||
@ -15,6 +15,7 @@
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<div class="online bold"></div>
|
||||
<div class="rc-userheader">
|
||||
<span v-for="(item, index) in message" :key="index">
|
||||
{{item.title}}
|
||||
@ -22,7 +23,7 @@
|
||||
|
||||
</div>
|
||||
<div class="rc-center" v-for="(item, index) in goldmedal" :key="index">
|
||||
<div class="rc-usermaina" v-for="(userlist,index) in item.orderDetailList" :key="index" >
|
||||
<div class="rc-usermaina" >
|
||||
<div class="rc-title">
|
||||
<div>
|
||||
<i>订单编号:</i><span>{{ item.orderNumber }}</span>
|
||||
@ -41,15 +42,13 @@
|
||||
<div class="rc-usercenter">
|
||||
<em>{{ item.usereat }}</em>
|
||||
<div class="rc-userright">
|
||||
<span>规格:{{ userlist.num }}</span>
|
||||
<span>规格:{{ item.num }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rc-userbottom">
|
||||
<span>数量:{{ userlist.pcs}}件</span>
|
||||
<i>￥{{ userlist.ecPrice }}</i>
|
||||
<span>数量:{{ item.pcs}}件</span>
|
||||
<i>￥{{ item.ecPrice }}</i>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="rc-userbottomm">
|
||||
<i>￥{{ item.userprice }}</i>
|
||||
<span>{{item.orderstype}}</span>
|
||||
@ -62,14 +61,13 @@
|
||||
<span @click="userfind()">查看订单</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="rc-bottom">
|
||||
<div class="rc-bottom">
|
||||
<span @click="userpay(item,index)">{{item.status=='0'?'取消订单':item.status=='1'?'确认收货':item.status=='2'?'再次购买':item.status=='3'?'再次购买':'异常订单'}}</span>
|
||||
<span @click="userfind(item)">{{item.status=='0'?'立即支付':item.status=='1'?'查看订单':item.status=='2'?'查看订单':item.status=='3'?'查看订单':'异常订单'}}</span>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -300,360 +298,6 @@ async canceldanhao(orderNumber){
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
// 手机端
|
||||
@media screen and(min-width: 320px) and(max-width:768px) {
|
||||
.active {
|
||||
font-size: 14px;
|
||||
color: #e2001a;
|
||||
cursor: pointer;
|
||||
}
|
||||
.unactive {
|
||||
font-size: 14px;
|
||||
color: #444444;
|
||||
cursor: pointer;
|
||||
}
|
||||
.rc-header {
|
||||
|
||||
|
||||
width: 100%;
|
||||
.rc-main {
|
||||
width: 92%;
|
||||
margin: 0 auto;
|
||||
.rc-usermaina{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.rc-headera {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 64px;
|
||||
align-items: center;
|
||||
}
|
||||
.rc-userheader{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rc-center {
|
||||
width: 100%;
|
||||
height: 245px;
|
||||
margin-top: 8px;
|
||||
.rc-usermain {
|
||||
.pc-bottom{
|
||||
display: none;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
.rc-image {
|
||||
border: 1px solid #D8D8D8;
|
||||
margin-top: 17px;
|
||||
;
|
||||
img {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
display: block;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.rc-right {
|
||||
|
||||
.rc-userbottomm{
|
||||
display: none;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin-left: 16px;
|
||||
justify-content: center;
|
||||
em
|
||||
{
|
||||
font-style: normal;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
margin-top: 18px;
|
||||
font-weight: bold;
|
||||
|
||||
color: #E1001A;
|
||||
}
|
||||
}
|
||||
.rc-userright {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
span{
|
||||
display: block;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
.rc-userbottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 8px;
|
||||
span{
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
}
|
||||
i{
|
||||
font-style: normal;
|
||||
color: #E1001A;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rc-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 24px;
|
||||
span {
|
||||
display: block;
|
||||
width: 130px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
color: #e2001a;
|
||||
height: 40px;
|
||||
border: 2px solid #e2001a;
|
||||
justify-content: center;
|
||||
border-radius: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
span:last-child{
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rc-title {
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #d8d8d8;
|
||||
justify-content: space-between;
|
||||
span{
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
margin-left: 8px;
|
||||
}
|
||||
em{
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
|
||||
color: #333333;
|
||||
}
|
||||
i{
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
|
||||
color: #333333;
|
||||
}
|
||||
.rc-usertitle strong{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// /* 最小768px最大1920 *pc端/
|
||||
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
||||
.active {
|
||||
font-size: 18px;
|
||||
color: #e2001a;
|
||||
cursor: pointer;
|
||||
// margin-left: 40px;
|
||||
}
|
||||
.unactive {
|
||||
font-size: 18px;
|
||||
color: #444444;
|
||||
cursor: pointer;
|
||||
// margin-left: 80px;
|
||||
}
|
||||
.rc-header {
|
||||
.rc-main {
|
||||
width: 92%;
|
||||
margin: 0 auto;
|
||||
|
||||
.rc-headera {
|
||||
display: flex;
|
||||
height: 64px;
|
||||
align-items: center;
|
||||
border: 1px solid #D7D7D7;
|
||||
border-radius: 3px 3px 0px 0px;
|
||||
font-size: 18px;
|
||||
span:first-child{
|
||||
margin-left: 40px;
|
||||
}
|
||||
span{
|
||||
margin-left: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.rc-userheader{
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
background: #F6F6F6;
|
||||
border: 1px solid #D7D7D7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 18px;
|
||||
span:first-child{
|
||||
margin-left: 173px;
|
||||
}
|
||||
span:last-child{
|
||||
margin-right: 87px;
|
||||
}
|
||||
}
|
||||
|
||||
.rc-center {
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
border: 1px solid #D7D7D7;
|
||||
.rc-usermain {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 164px;
|
||||
.rc-usercenter{
|
||||
width: 25%;
|
||||
em{
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.rc-image {
|
||||
border: 1px solid #D8D8D8;
|
||||
margin-left: 40px;
|
||||
|
||||
img {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
display: block;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.rc-right {
|
||||
.rc-userbottom{
|
||||
display: none;
|
||||
}
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
margin-left: 16px;
|
||||
|
||||
em
|
||||
{
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
margin-top: 18px;
|
||||
|
||||
color: #E1001A;
|
||||
}
|
||||
}
|
||||
.rc-userright {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #666666;
|
||||
font-size: 16px;
|
||||
span{
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
.rc-userbottomm {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 58%;
|
||||
font-size: 20px;
|
||||
color: #E1001A;
|
||||
font-weight: bold;
|
||||
i{
|
||||
font-style: normal;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.pc-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-right: 40px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 130px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 40px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: #e2001a;
|
||||
height: 40px;
|
||||
border: 2px solid #e2001a;
|
||||
justify-content: center;
|
||||
border-radius: 30px;
|
||||
}
|
||||
span:last-child{
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rc-bottom {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.rc-title {
|
||||
height: 55px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #d8d8d8;
|
||||
justify-content: space-between;
|
||||
span{
|
||||
font-size: 16px;
|
||||
color: #999999;
|
||||
margin-left: 8px;
|
||||
}
|
||||
strong{
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #444444;
|
||||
}
|
||||
em{
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
|
||||
color: #333333;
|
||||
}
|
||||
i{
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
margin-left: 40px;
|
||||
|
||||
color: #333333;
|
||||
}
|
||||
.rc-usertitle{
|
||||
margin-right: 73px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
em{
|
||||
display: block;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import url("../../assets/css/global.less");
|
||||
@import url("../../assets/css/orderquantity.less");
|
||||
</style>
|
||||
@ -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"> </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>
|
||||
File diff suppressed because it is too large
Load Diff
@ -516,12 +516,12 @@ export default {
|
||||
this.$refs.userstandard[0].style.margin = 0 + "px";
|
||||
});
|
||||
this.userst();
|
||||
this.activeIndex = stype;
|
||||
if (stype !== "" && stype !== undefined) {
|
||||
this.onmessage(stype);
|
||||
} else {
|
||||
this.usetmessage();
|
||||
}
|
||||
// this.activeIndex = stype;
|
||||
// if (stype !== "" && stype !== undefined) {
|
||||
// this.onmessage(stype);
|
||||
// } else {
|
||||
// this.usetmessage();
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
async usersearch(stype, usertype) {
|
||||
|
||||
@ -7,32 +7,31 @@
|
||||
<h2>新增收货地址</h2>
|
||||
<div class="rc-max-width--xl rc-people">
|
||||
<span>收货人:</span>
|
||||
<input type="text" placeholder="请输入收货人姓名">
|
||||
<input type="text" placeholder="请输入收货人姓名" v-model="userpeople">
|
||||
</div>
|
||||
<div class="rc-max-width--xl rc-phone">
|
||||
<span>手机号码:</span>
|
||||
<input type="text" placeholder="请输入11位手机号码">
|
||||
<input type="text" placeholder="请输入11位手机号码" v-model="tel" :error-message="usertel">
|
||||
</div>
|
||||
<div class="rc-max-width--xl rc-address">
|
||||
<span>所在地区:</span>
|
||||
<input type="text" placeholder="请选择所在地区">
|
||||
<!-- <input type="text" placeholder="请选择所在地区"> -->
|
||||
<addressInput @getmenu="onGetMenu" @closeDialog = "handleClose1" :dialogInfo1="dialogInfo1"></addressInput>
|
||||
</div>
|
||||
<div class="rc-max-width--xl rc-useaddress">
|
||||
<span>详细地址:</span>
|
||||
<input type="text" placeholder="小区、门牌号等" class="userinput">
|
||||
<input type="text" placeholder="小区、门牌号等" class="userinput" v-model="alladdress">
|
||||
<textarea rows="10" cols="30" placeholder="请输入详细地址">
|
||||
|
||||
</textarea>
|
||||
</div>
|
||||
|
||||
<addressInput @getmenu="onGetMenu" @closeDialog = "handleClose1" :dialogInfo1="dialogInfo1"></addressInput>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="rc-button">
|
||||
<span @click="openclose()">取消</span>
|
||||
<em @click="openclose()">确认</em>
|
||||
<em @click="register()">确认</em>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="rc-button">
|
||||
<div class="rc-footbutton" @click="onAdd()">
|
||||
<span>新增收货地址</span>
|
||||
@ -48,17 +47,22 @@
|
||||
|
||||
<script>
|
||||
|
||||
import Myheader from '~/components/header.vue'
|
||||
import MyFooter from '~/components/rc-footer.vue'
|
||||
import Myheader from '~/components/header.vue'
|
||||
import addressInput from '~/components/addressInput.vue'
|
||||
import MyFooter from '~/components/rc-footer.vue'
|
||||
import {editaddress} from "../../ajax/getData";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chosenAddressId: "1",
|
||||
usermessage:null,
|
||||
checked: true,
|
||||
tel: "",
|
||||
alladdress:'',
|
||||
userid: null,
|
||||
usermessage:null,
|
||||
dialogInfo1:false,
|
||||
userpeople:'',
|
||||
list: [
|
||||
{
|
||||
id: 1,
|
||||
@ -85,40 +89,68 @@ export default {
|
||||
methods: {
|
||||
onGetMenu(values){
|
||||
console.log(values,+'111111');
|
||||
let user=values[2].id;
|
||||
user=user.split('-');
|
||||
this.provinceId=user[0];
|
||||
this.cityId=user[1];
|
||||
this.districtId=user[2];
|
||||
},
|
||||
handleClose1(){
|
||||
this.dialogInfo1 = false
|
||||
},
|
||||
onEdit(item, index) {
|
||||
// let userid = item.id;
|
||||
console.log(item);
|
||||
this.$router.push({
|
||||
path: "/useraddress/editaddress",
|
||||
query: {
|
||||
id: item,
|
||||
},
|
||||
});
|
||||
|
||||
register(){
|
||||
console.log(this.tel)
|
||||
if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel) || this.tel === "") {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '手机号码输入有误'
|
||||
});
|
||||
return
|
||||
}else if(this.alladdress===''){
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '请输入详细地址'
|
||||
});
|
||||
return
|
||||
}
|
||||
else if(this.userpeople===''){
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '请输入姓名'
|
||||
});
|
||||
return
|
||||
}
|
||||
|
||||
else{
|
||||
this.editaddress();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
//添加
|
||||
async editaddress(item) {
|
||||
// this.userid
|
||||
let useradd={
|
||||
memberId:this.userid,
|
||||
detailAddress:this.alladdress,
|
||||
recipient:this.userpeople,
|
||||
recipientPhone:this.tel,
|
||||
provinceId:this.provinceId,
|
||||
cityId:this.cityId,
|
||||
districtId:this.districtId
|
||||
|
||||
}
|
||||
let data = await editaddress(useradd);
|
||||
if(data){
|
||||
console.log(data);
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '地址添加成功'
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
onAdd(item, index) {
|
||||
// let userid = item.id;
|
||||
// console.log(item);
|
||||
this.$router.push({
|
||||
path: "/useraddress/addaddress",
|
||||
// query: {
|
||||
// id: userid,
|
||||
// },
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
|
||||
//删除地址
|
||||
// async userdelete(item) {
|
||||
// console.log(item.memberId);
|
||||
// let data = await editdelete(this.userid, item.id);
|
||||
// this.editaddress(this.usermessage);
|
||||
// console.log(data);
|
||||
// },
|
||||
|
||||
//查询人的所有地址
|
||||
// async editaddress(user) {
|
||||
@ -134,8 +166,23 @@ export default {
|
||||
MyFooter,
|
||||
addressInput
|
||||
},
|
||||
computed:{
|
||||
usertel() {
|
||||
if (this.tel === "") {
|
||||
return "";
|
||||
} else if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel)) {
|
||||
return "手机号格式错误";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
this.usermessage = JSON.parse(localStorage.getItem("userInfo"));
|
||||
// this.editaddress(this.usermessage);
|
||||
this.userid = this.usermessage.data.id;
|
||||
//地址的查询
|
||||
// this.usermessage = JSON.parse(localStorage.getItem("userInfo"));
|
||||
// this.editaddress(this.usermessage);
|
||||
|
||||
@ -2,23 +2,23 @@
|
||||
<div>
|
||||
<Myheader></Myheader>
|
||||
<div class="rc-top"></div>
|
||||
|
||||
<div class="rc-max-width--xl rc-main">
|
||||
<div class="usercontend">
|
||||
<div class="rc-max-width--xl">
|
||||
<div class="rc-max-width--xl rc-people">
|
||||
<span>收货人:</span>
|
||||
<input type="text" placeholder="李某某">
|
||||
<input type="text" placeholder="" v-model="recipient">
|
||||
</div>
|
||||
<div class="rc-max-width--xl rc-phone">
|
||||
<span>手机号码:</span>
|
||||
<input type="text" placeholder="15279944631">
|
||||
<input type="text" placeholder="" v-model="recipientPhone">
|
||||
</div>
|
||||
<div class="rc-max-width--xl rc-address">
|
||||
<span>所在地区:</span>
|
||||
<input type="text" placeholder="请选择所在地区">
|
||||
<addressInput @getmenu="onGetMenu" @closeDialog = "handleClose1" :dialogInfo1="dialogInfo1" :defaultValues="defaultValues"></addressInput>
|
||||
</div>
|
||||
<div class="rc-max-width--xl rc-useaddress">
|
||||
<span>详细地址:</span>
|
||||
<input type="text" placeholder="天河客运站">
|
||||
<input type="text" placeholder="" v-model="detailAddress" >
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -27,12 +27,14 @@
|
||||
<span>新增收货地址</span>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="rc-button">
|
||||
|
||||
|
||||
</div>
|
||||
<div class="rc-button">
|
||||
<span @click="openclose()">取消</span>
|
||||
<em @click="openclose()">确认</em>
|
||||
<em @click="register()">确认</em>
|
||||
</div>
|
||||
<!-- <MyFooter></MyFooter> -->
|
||||
|
||||
<MyFooter></MyFooter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -40,13 +42,22 @@
|
||||
|
||||
import Myheader from '~/components/header.vue'
|
||||
import MyFooter from '~/components/rc-footer.vue'
|
||||
import { editupdate} from "../../ajax/getData";
|
||||
import addressInput from '~/components/addressInput.vue'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chosenAddressId: "1",
|
||||
checked: true,
|
||||
userid: null,
|
||||
dialogInfo1:false,
|
||||
usermessage:null,
|
||||
useradrname:[],
|
||||
detailAddress:'',
|
||||
recipientPhone:'',
|
||||
recipient:'',
|
||||
addressid:'',
|
||||
defaultValues:[],
|
||||
list: [
|
||||
{
|
||||
id: 1,
|
||||
@ -71,26 +82,63 @@ export default {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onEdit(item, index) {
|
||||
// let userid = item.id;
|
||||
console.log(item);
|
||||
this.$router.push({
|
||||
path: "/useraddress/editaddress",
|
||||
query: {
|
||||
id: item,
|
||||
},
|
||||
});
|
||||
onGetMenu(values){
|
||||
console.log(values,+'111111');
|
||||
},
|
||||
onAdd(item, index) {
|
||||
// let userid = item.id;
|
||||
// console.log(item);
|
||||
this.$router.push({
|
||||
path: "/useraddress/addaddress",
|
||||
// query: {
|
||||
// id: userid,
|
||||
// },
|
||||
});
|
||||
handleClose1(){
|
||||
this.dialogInfo1 = false
|
||||
},
|
||||
|
||||
register(){
|
||||
console.log(this.tel)
|
||||
if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.recipientPhone) || this.recipientPhone === "") {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '手机号码输入有误'
|
||||
});
|
||||
return
|
||||
}else if(this.alladdress===''){
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '请输入详细地址'
|
||||
});
|
||||
return
|
||||
}
|
||||
else if(this.userpeople===''){
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '请输入姓名'
|
||||
});
|
||||
return
|
||||
}
|
||||
|
||||
else{
|
||||
this.editaddress();
|
||||
}
|
||||
},
|
||||
|
||||
//更改
|
||||
async editaddress(item) {
|
||||
let useradd={
|
||||
memberId:this.userid,
|
||||
id:this.id,
|
||||
provinceId:'',//省份id,
|
||||
cityId:'',//城市id,
|
||||
districtId:'',//区域id,
|
||||
detailAddress:this.detailAddress, //详细地址
|
||||
recipient:this.recipient, //收件人姓名
|
||||
recipientPhone:this.recipientPhone, //收件人电话
|
||||
}
|
||||
let data = await editupdate(useradd);
|
||||
if(data){
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '地址修改成功'
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
@ -114,13 +162,37 @@ export default {
|
||||
components: {
|
||||
Myheader,
|
||||
MyFooter,
|
||||
addressInput
|
||||
},
|
||||
created(){
|
||||
let provinceName=this.$route.query.provinceName;
|
||||
let districtName=this.$route.query.districtName;
|
||||
let cityName=this.$route.query.cityName
|
||||
let provinceId=this.$route.query.provinceId;
|
||||
let districtNameid=this.$route.query.districtId;
|
||||
let cityId=this.$route.query.cityId;
|
||||
this.defaultValues=[
|
||||
{
|
||||
id:provinceId,
|
||||
name:provinceName
|
||||
},
|
||||
{
|
||||
id:cityId,
|
||||
name:cityName
|
||||
},
|
||||
{
|
||||
id:districtNameid,
|
||||
name:districtName
|
||||
}
|
||||
];
|
||||
|
||||
},
|
||||
mounted() {
|
||||
//地址的查询
|
||||
// this.usermessage = JSON.parse(localStorage.getItem("userInfo"));
|
||||
// this.editaddress(this.usermessage);
|
||||
// this.userid = this.usermessage.data.id;
|
||||
this.userid = JSON.parse(localStorage.getItem("userInfo")).data.id;
|
||||
this.recipient=this.$route.query.recipient
|
||||
this.recipientPhone=this.$route.query.recipientPhone
|
||||
this.detailAddress=this.$route.query.detailAddress
|
||||
this.id=this.$route.query.id;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -10,15 +10,15 @@
|
||||
<div class="rc-center">
|
||||
<div class=" rc-title">
|
||||
<em>
|
||||
{{ item.name }}
|
||||
{{ item.recipient }}
|
||||
</em>
|
||||
<span>
|
||||
{{ item.tel }}
|
||||
{{ item.recipientPhone }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="rc-address">
|
||||
<span>
|
||||
{{ item.address }}
|
||||
{{item.provinceName}}{{ item.districtName }}{{item.detailAddress}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="rc-footer">
|
||||
@ -47,17 +47,19 @@
|
||||
</div>
|
||||
|
||||
<div class="usercontshow useredit">
|
||||
|
||||
<img src="../../assets/image/userselect.png" alt="">
|
||||
<div class="usercontshow alledit" @click="onAdd()">
|
||||
<img src="../../static/images/adddress.png" alt="">
|
||||
<span>添加收货地址</span>
|
||||
</div>
|
||||
<div class="rc-button">
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="rc-button">
|
||||
<div class="rc-footbutton" @click="onAdd()">
|
||||
<span>新增收货地址</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<MyFooter></MyFooter>
|
||||
</div>
|
||||
</template>
|
||||
@ -65,44 +67,55 @@
|
||||
<script>
|
||||
import Myheader from '~/components/header.vue'
|
||||
import MyFooter from '~/components/rc-footer.vue'
|
||||
import { selectaddress,editupdate,editdelete} from "../../ajax/getData";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chosenAddressId: "1",
|
||||
checked: true,
|
||||
userid: null,
|
||||
userlist:[],
|
||||
usermessage:null,
|
||||
list: [
|
||||
{
|
||||
id: 1,
|
||||
name: "张三",
|
||||
tel: "13000000000",
|
||||
address: "浙江省杭州市西湖区文三路 138 号",
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "李四",
|
||||
tel: "1310000000",
|
||||
address: "浙江省杭州市拱墅区莫干山路 50 号",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "李四",
|
||||
tel: "1310000000",
|
||||
address: "浙江省杭州市拱墅区莫干山路 50 号",
|
||||
},
|
||||
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeadddress(item,index){
|
||||
console.log(item,index);
|
||||
console.log(item.isDefault)
|
||||
if(item.isDefault==false){
|
||||
item.isDefault=true
|
||||
}else{
|
||||
item.isDefault=false;
|
||||
}
|
||||
|
||||
this.editupdate(this.userid,item.id,item.isDefault)
|
||||
setTimeout(() => {
|
||||
this.editaddress();
|
||||
}, 200);
|
||||
//
|
||||
|
||||
},
|
||||
onEdit(item, index) {
|
||||
// let userid = item.id;
|
||||
console.log(item);
|
||||
// debugger
|
||||
this.$router.push({
|
||||
path: "/useraddress/editaddress",
|
||||
query: {
|
||||
id: item,
|
||||
recipient: item.recipient,
|
||||
recipientPhone:item.recipientPhone,
|
||||
detailAddress:item.detailAddress,
|
||||
id:item.id,
|
||||
provinceName:item.provinceName,
|
||||
districtName:item.cityName,
|
||||
cityName:item.districtName,
|
||||
provinceId:item.provinceId,
|
||||
districtId:item.districtId,
|
||||
cityId:item.cityId,
|
||||
|
||||
},
|
||||
});
|
||||
},
|
||||
@ -117,24 +130,43 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
//更改地址
|
||||
async editupdate(userid,addressid,isDefault) {
|
||||
let useradd={
|
||||
memberId:userid,
|
||||
id:addressid,
|
||||
isDefault:isDefault,
|
||||
}
|
||||
|
||||
let data = await editupdate(useradd);
|
||||
if(data){
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '更改成功'
|
||||
});
|
||||
}
|
||||
// if(data){
|
||||
// this.editaddress();
|
||||
// }
|
||||
|
||||
},
|
||||
|
||||
//删除地址
|
||||
// async userdelete(item) {
|
||||
// console.log(item.memberId);
|
||||
// let data = await editdelete(this.userid, item.id);
|
||||
// this.editaddress(this.usermessage);
|
||||
// console.log(data);
|
||||
// },
|
||||
|
||||
async userdelete(item) {
|
||||
console.log(item.memberId);
|
||||
let data = await editdelete(this.userid, item.id);
|
||||
this.editaddress();
|
||||
console.log(data);
|
||||
},
|
||||
//查询人的所有地址
|
||||
// async editaddress(user) {
|
||||
// user.data.id=844350
|
||||
// let data = await selectaddress(user.data.id);
|
||||
// this.list=data.data;
|
||||
// console.log(this.list);
|
||||
// console.log(data);
|
||||
// },
|
||||
async editaddress(user) {
|
||||
// user.data.id=844350;
|
||||
let data = await selectaddress(this.userid);
|
||||
console.log(data);
|
||||
this.list=data.data;
|
||||
// console.log(this.list);
|
||||
console.log(data);
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Myheader,
|
||||
@ -143,9 +175,11 @@ export default {
|
||||
|
||||
mounted() {
|
||||
//地址的查询
|
||||
// this.usermessage = JSON.parse(localStorage.getItem("userInfo"));
|
||||
// this.editaddress(this.usermessage);
|
||||
// this.userid = this.usermessage.data.id;
|
||||
this.usermessage = JSON.parse(localStorage.getItem("userInfo"));
|
||||
this.userid = this.usermessage.data.id;
|
||||
console.log(this.userid);
|
||||
this.editaddress(this.userid);
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -153,4 +187,4 @@ export default {
|
||||
<style lang="less" scoped >
|
||||
@import url("../../assets/css/global.less");
|
||||
@import url("../../assets/css/openaddress.less");
|
||||
</style>
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 1.1 KiB |
BIN
rc-busness/static/images/adddress.png
Normal file
BIN
rc-busness/static/images/adddress.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 85 KiB After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 170 KiB After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 286 KiB After Width: | Height: | Size: 66 KiB |
Loading…
Reference in New Issue
Block a user