xinyin025/smart-admin
1
0
Fork 0
mirror of https://gitee.com/lab1024/smart-admin.git synced 2025-10-02 18:26:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'sit-Carl' of https://gitee.com/carl_Ming_1/smart-admin into sit-Carl-V3

Browse Source
This commit is contained in:
Carl 2022-01-21 14:53:12 +08:00
commit 70bc271022
33 changed files with 3513 additions and 2644 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
rc-busness/ajax/getData.js
View File

@ -517,6 +517,7 @@ export const goodsmessage = (productCode) => {
//地址的添加 //id/详细地址/ 收货人姓名/收货人电话号码/省份id/城市id/区域编码 //地址的添加 //id/详细地址/ 收货人姓名/收货人电话号码/省份id/城市id/区域编码
export const editaddress = (memberId, detailAddress,recipient,tel,provinceId,cityId,districtId) => { export const editaddress = (memberId, detailAddress,recipient,tel,provinceId,cityId,districtId) => {
var data = { var data = {
memberId:844350, memberId:844350,
provinceId:25, provinceId:25,
@ -528,7 +529,7 @@ export const goodsmessage = (productCode) => {
zipCode:'214423', zipCode:'214423',
default:false, 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) => { export const editupdate = (userid,) => {
var data = { // var data = {
// memberId:userid,
memberId:'3242', // id:id,
id:'620111', // isDefault:isDefault,
provinceId:'', // }
cityId:'', return fetch('memberAddress?type=update', userid, 'POST' )
districtId:'',
detailAddress:'江西省萍乡市',
recipient:'刘佳敏',
recipientPhone:'13407998521',
zipCode:'',
isDefault:'',
}
return fetch('memberAddress?type=update', data, 'POST' )
} }
//修改密码 //修改密码
@ -615,3 +608,16 @@ export const getOrderList = (user, status) => {
return fetch('/api/getOrderList', data) return fetch('/api/getOrderList', data)
} }
//购物车操作
export const memberAddress = (type,data) => {
return fetch('memberAddress?type='+type, data, 'POST' )
}
//支付宝支付二维码
export const generateOrderAlipay = (data) => {
return fetch('generateOrderAlipay', data, 'POST' )
}

64
rc-busness/assets/css/addaddress.less
View File

@ -2,16 +2,6 @@
@media screen and (max-width:768px){ @media screen and (max-width:768px){
.usercontend{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.rc-useaddress{
textarea{
display: none;
}
}
.rc-button{ .rc-button{
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -46,6 +36,17 @@
margin-left: 40px; 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{ .rc-max-width--xl{
h2{ h2{
display: none; display: none;
@ -55,7 +56,7 @@
} }
.rc-max-width--xl{ .rc-max-width--xl{
margin-top: 16px; padding: 24px 20px 0 20px;
input{ input{
width: 258px; width: 258px;
height: 34px; height: 34px;
@ -100,6 +101,40 @@
@media screen and (min-width: 769px) @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{ .usercontend{
display: flex; display: flex;
align-items: center; align-items: center;
@ -197,12 +232,11 @@
// .rc-phone{ // .rc-phone{
// } // }
// .rc-address{ .rc-address{
position: relative;
// } }
// .rc-useaddress{
// }

167
rc-busness/assets/css/editaddress.less
View File

@ -1,3 +1,6 @@
@media screen and (max-width:768px){ @media screen and (max-width:768px){
.rc-button{ .rc-button{
display: flex; display: flex;
@ -7,8 +10,6 @@
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1); box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
height: 80px; height: 80px;
align-items: center; align-items: center;
position: absolute;
bottom: 0;
padding:0 20px 0 20px; padding:0 20px 0 20px;
span span
{ {
@ -35,8 +36,27 @@
margin-left: 40px; 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{ .rc-max-width--xl{
margin-top: 16px; padding: 24px 20px 0 20px;
input{ input{
width: 258px; width: 258px;
height: 34px; height: 34px;
@ -61,8 +81,6 @@
span{ span{
text-align: left; text-align: left;
} }
} }
// .rc-phone{ // .rc-phone{
@ -83,7 +101,146 @@
@media screen and (min-width: 769px) @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;
}
}
} }

98
rc-busness/assets/css/global.less
View File

@ -8,6 +8,33 @@ body{
.fade-leave-active { .fade-leave-active {
opacity: 0; 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 { .userloding {
background: url(../image/onloading.png) center center no-repeat; background: url(../image/onloading.png) center center no-repeat;
width: 3.12rem; width: 3.12rem;
@ -260,6 +287,7 @@ img, picture {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer;
} }
} }
@ -473,6 +501,7 @@ img, picture {
li{ li{
margin-top: .5rem; margin-top: .5rem;
height:4.125rem; height:4.125rem;
cursor: pointer;
img{ img{
width:22px; width:22px;
height:auto; height:auto;
@ -597,3 +626,72 @@ img, picture {
} }
} }
} }
.rc_contline {
border-bottom: 3px solid #f6f6f6;
height: 0px;
margin: 0;
clear: both;
}
.page_modules {
padding-top: 60px;
}
.cont_modules {
margin: 0 auto;
max-width: 1400px;
}
.inline_right {
display: flex;
justify-content: space-between;
width: 100%;
}
.inline_mid {
display: flex;
justify-content: space-around;
width: 100%;
}
.inline_left {
display: flex;
justify-content: space-evenly;
width: 100%;
}
.li_inline {
li {
display: inline-block;
vertical-align: middle;
}
}
.color_red {
color: #E2001A;
}
.tc {
text-align: center;
}
.tr {
text-align: right;
}
.el-dialog{
width: 90%;
max-width: 440px;
}
#tns2-iw{ height: 90px;}
.rc-carousel:not(.rc-carousel--loaded){visibility:visible!important}
@media screen and (max-width: 768px) {
.el-message-box{
width: 300px;
}
.el-dialog{
width: 90%;
}
}

70
rc-busness/assets/css/openaddress.less
View File

@ -1,10 +1,7 @@
.rc-margin-bottom--lg{ .rc-margin-bottom--lg{
margin: 0; margin: 0;
} }
@media screen and (max-width:768px){ @media screen and (max-width:768px){
.online{ .online{
width:100%; width:100%;
@ -46,7 +43,11 @@ color: #FFFFFF;
} }
.rc-max-width--xl{ .rc-max-width--xl{
padding: 24px 20px 24px 20px; padding: 0px 20px 24px 20px;
min-height: 60vh;
.rc-cat{
margin-top: 20px;
}
.rc-title { .rc-title {
display: flex; display: flex;
align-items: center; align-items: center;
@ -61,9 +62,7 @@ color: #FFFFFF;
margin-left: 8px; 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 { .usercontend {
display:inline-block; display:inline-block;
} }
.usercontshow{
.rc-button{
display: none;
}
}
.usercontend{ .usercontend{
margin-top: 40px; margin-top: 40px;
@ -134,15 +135,17 @@ color: #FFFFFF;
display: none; display: none;
} }
.useredit{ .useredit{
width: 680px; width: 640px;
height: 164px; height: 166px;
background: #FFFFFF; background: #FFFFFF;
border: 1px solid #D7D7D7; border: 1px solid #D7D7D7;
opacity: 1;
border-radius: 3px; border-radius: 3px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
display:inline-block;
margin-left: 35px;
img{ img{
width: 31px; width: 31px;
height: 31px; height: 31px;
@ -153,6 +156,13 @@ span{
font-size: 18px; font-size: 18px;
} }
.alledit{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
} }
.usercontend{ .usercontend{
.useradd{ .useradd{
@ -210,6 +220,7 @@ img{
top: 24px; top: 24px;
span { span {
border-bottom: 1px solid #666666; border-bottom: 1px solid #666666;
cursor: pointer;
} }
span:first-child { span:first-child {
margin-right: 16px; margin-right: 16px;
@ -235,32 +246,7 @@ img{
.rc-button { .rc-button {
height: 80px; display: none;
background: #ffffff;
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
opacity: 1;
display: flex;
align-items: center;
justify-content: center;
display: block;
.rc-footbutton {
width: 164px;
height: 48px;
border: 2px solid #e2001a;
opacity: 1;
border-radius: 30px;
display: flex;
align-items: center;
background: #e2001a;
span {
display: block;
text-align: center;
color: white;
font-size: 16px;
width: 100%;
}
}
} }
.rc-header { .rc-header {
display: flex; display: flex;

366
rc-busness/assets/css/orderquantity.less Normal file
View 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;
}
}
}
}
}

36
rc-busness/assets/css/producted.less
View File

@ -144,10 +144,6 @@
} }
} }
} }
/deep/.el-dialog {
width: 80%;
position: relative;
}
.rc-discount { .rc-discount {
position: relative; position: relative;
width: 100%; width: 100%;
@ -169,8 +165,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #e1001a; color: #e1001a;
padding-right: 21px; width: 34%;
width: 30%;
float: left; float: left;
height: 100%; height: 100%;
i { i {
@ -190,7 +185,7 @@
.rc-right { .rc-right {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 36px; padding-left: 20px;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
i { i {
@ -204,7 +199,7 @@
} }
span { span {
display: block; display: block;
margin-top: 8px; margin-top: 2px;
} }
em { em {
font-style: normal; font-style: normal;
@ -405,11 +400,6 @@
} }
} }
} }
/deep/.el-dialog {
width: 440px;
height: 432px;
position: relative;
}
.rc-discount { .rc-discount {
position: relative; position: relative;
img { img {
@ -430,8 +420,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #e1001a; color: #e1001a;
padding-right: 21px; width: 34%;
width: 30%;
float: left; float: left;
height: 100%; height: 100%;
i { i {
@ -451,7 +440,7 @@
.rc-right { .rc-right {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 36px; padding-left: 20px;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
i { i {
@ -465,7 +454,7 @@
} }
span { span {
display: block; display: block;
margin-top: 8px; margin-top: 2px;
} }
em { em {
font-style: normal; font-style: normal;
@ -587,3 +576,16 @@
} }
} }
.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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
rc-busness/assets/pay/wx.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
rc-busness/assets/pay/zfb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

168
rc-busness/components/addressInput.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="ts-area-picker-container"> <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"> <input type="hidden" :value="returnValue">
<div class="ts-area-picker-desktop" v-if="show"> <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(1)">{{ returnValueArr[1]?returnValueArr[1].name:'请选择' }}</li>
<li @click="switchTab(2)">{{ returnValueArr[2]?returnValueArr[2].name:'请选择' }}</li> <li @click="switchTab(2)">{{ returnValueArr[2]?returnValueArr[2].name:'请选择' }}</li>
</ul> </ul>
<div class="close" @click="hideAddress"></div> <div class="close" @click="pcHideAddress"></div>
</div> </div>
<div class="ts-area-picker-values"> <div class="ts-area-picker-values">
<ul> <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) }"> <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> </li>
</ul> </ul>
</div> </div>
@ -37,6 +37,9 @@
</div> </div>
</template> </template>
<script> <script>
import {
areaData
} from "~/config/area.js";
export default { export default {
props:["defaultValues"], props:["defaultValues"],
data(){ data(){
@ -46,46 +49,21 @@ export default {
returnValue:"", returnValue:"",
returnValueArr:[], returnValueArr:[],
show:false, show:false,
columns:[ columns:areaData,
{
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'
}
],
curDisplayingColIndex:0, curDisplayingColIndex:0,
curDisplayingCol:[] curDisplayingCol:[]
} }
}, },
methods:{ methods:{
initAddress(){ initAddress(){
this.show=true;
//Initilizing //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"}] // 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}]; 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) if(this.defaultValues && this.defaultValues.length>0)
defaultValues=this.defaultValues;
this.$children.forEach(function(vueComponent){
if(vueComponent._name=="<VanPicker>")
{ {
self.onChange(vueComponent,defaultValues); //Important defaultValues = this.defaultValues;
this.onConfirm(defaultValues);
} }
});
//mobile end
//PC
this.switchTab(this.curDisplayingColIndex);
//PC end
//Initilizing end //Initilizing end
}, },
pickValue(pickId,pickName){ pickValue(pickId,pickName){
@ -132,20 +110,48 @@ export default {
//Handling City //Handling City
let matchedCity=_self.fitlerValuesInArray(curSelection.province,_self.columns[index].values); let matchedCity=_self.fitlerValuesInArray(curSelection.province,_self.columns[index].values);
picker.setColumnValues(index,matchedCity); picker.setColumnValues(index,matchedCity);
if(_self.inArray(ele,matchedCity))
{
curSelection.city=ele.id;
}
else
{
console.log('502 : Invalid City Options');
curSelection.city=matchedCity[0].id; curSelection.city=matchedCity[0].id;
}
//Handling City end //Handling City end
break; break;
default: default:
//Handling Area //Handling Area
let matchedArea=_self.fitlerValuesInArray(curSelection.city,_self.columns[index].values); let matchedArea=_self.fitlerValuesInArray(curSelection.city,_self.columns[index].values);
picker.setColumnValues(index,matchedArea); picker.setColumnValues(index,matchedArea);
if(_self.inArray(ele,matchedArea))
{
curSelection.area=ele.id;
}
else if(matchedArea.length)
{
console.log('503 : Invalid Area Options');
curSelection.area=matchedArea[0].id; curSelection.area=matchedArea[0].id;
}
//Handling Area end //Handling Area end
break; 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(){ validatePickedValues(){
let _self=this; let _self=this;
let provinceId=''; let provinceId='';
@ -197,18 +203,24 @@ export default {
let tmpArr = []; let tmpArr = [];
this.displayValue=''; this.displayValue='';
values.forEach(function(ele,index){ values.forEach(function(ele,index){
if(!ele || !ele.name)
{
ele={id:'',name:''};
}
_self.displayValue = _self.displayValue + ele.name + " "; _self.displayValue = _self.displayValue + ele.name + " ";
tmpArr.push(ele.id); tmpArr.push(ele.id);
returnVal.push(ele); returnVal.push(ele);
}); });
this.returnValueArr=returnVal; this.returnValueArr=returnVal;
this.returnValue=tmpArr.join("|"); this.returnValue=tmpArr.join("|");
this.$emit('getmenu',this.returnValueArr);
this.hideAddress(); this.hideAddress();
}, },
onCancel() { onCancel() {
}, },
fitlerValuesInArray(stringStartWith,dataColArea){ fitlerValuesInArray(stringStartWith,dataColArea){
stringStartWith=stringStartWith+"-";
let result=[]; let result=[];
dataColArea.forEach(function(ele){ dataColArea.forEach(function(ele){
if(ele.id.indexOf(stringStartWith)===0) if(ele.id.indexOf(stringStartWith)===0)
@ -220,6 +232,36 @@ export default {
}, },
popAddress() { popAddress() {
this.show=true; 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() { hideAddress() {
this.show=false; this.show=false;
@ -229,10 +271,10 @@ export default {
if(tabIndex==0){ if(tabIndex==0){
this.curDisplayingCol = this.columns[tabIndex].values; this.curDisplayingCol = this.columns[tabIndex].values;
} }
//Check can switch to next tab
let lastValidatedTabIndex=this.validatePickedValues(); let lastValidatedTabIndex=this.validatePickedValues();
if(lastValidatedTabIndex<(tabIndex-1)) if(lastValidatedTabIndex<(tabIndex-1))
{ {
//TODO show warning here
let errorEle=document.querySelector(".ts-area-picker-values"); let errorEle=document.querySelector(".ts-area-picker-values");
errorEle.classList.add("error"); errorEle.classList.add("error");
let _self = this; let _self = this;
@ -246,6 +288,9 @@ export default {
} }
tabIndex=lastValidatedTabIndex+1; tabIndex=lastValidatedTabIndex+1;
} }
//Check can switch to next tab end
//Building column values for current
this.curDisplayingColIndex=tabIndex; this.curDisplayingColIndex=tabIndex;
let filteredData=this.columns[tabIndex].values; let filteredData=this.columns[tabIndex].values;
if(tabIndex>0 && this.returnValueArr[tabIndex-1]) //pass if(tabIndex>0 && this.returnValueArr[tabIndex-1]) //pass
@ -254,7 +299,13 @@ export default {
filteredData=this.fitlerValuesInArray(pickedId,this.columns[tabIndex].values); filteredData=this.fitlerValuesInArray(pickedId,this.columns[tabIndex].values);
} }
this.curDisplayingCol=filteredData; 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){ areaTabLi.forEach(function(ele,index){
if(tabIndex==index){ if(tabIndex==index){
ele.classList.add('active'); ele.classList.add('active');
@ -262,11 +313,11 @@ export default {
else else
ele.classList.remove('active'); ele.classList.remove('active');
}) })
//Filling style end
} }
}, },
mounted(){ mounted(){
this.initAddress();
}, },
components:{ components:{
@ -275,13 +326,13 @@ export default {
</script> </script>
<style lang="less" scoped> <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{ .ts-area-picker-value-displayer{
width:40rem;
} }
.ts-area-picker-tmp-value{ .ts-area-picker-tmp-value{
border-bottom:1px solid #D7D7D7; border-bottom:1px solid #D7D7D7;
padding:0 2.5rem; padding:0;
box-sizing: border-box; box-sizing: border-box;
position:relative; position:relative;
ul{ ul{
@ -291,10 +342,11 @@ export default {
li{ li{
display:inline-block; display:inline-block;
color:#333333; color:#333333;
width:3.125rem; width:8rem;
padding: 1.25rem 0; padding: 1.25rem 0;
margin-right:4rem; margin-right:.75rem;
cursor: pointer; cursor: pointer;
text-align: center;
&.active{ &.active{
color:#E2001A; color:#E2001A;
border-bottom:4px solid #E2001A; border-bottom:4px solid #E2001A;
@ -314,7 +366,8 @@ export default {
} }
.ts-area-picker-values{ .ts-area-picker-values{
width:100%; width:100%;
height:100%; height:78%;
overflow:auto;
&.error{ &.error{
position:relative; position:relative;
width:100%; width:100%;
@ -333,21 +386,25 @@ export default {
} }
} }
ul{ ul{
padding:1rem 2.5rem 2rem 2.5rem; padding:1rem .5rem 2rem 2.5rem;
margin:0; margin:0;
} }
li{ li{
display:inline-block; display:inline-block;
margin-top:1rem; margin-top:1rem;
margin-right:3.875rem; margin-right:.875rem;
color:#333; color:#333;
width:8rem;
cursor:pointer; cursor:pointer;
&.nth-child(6n){ &:nth-child(4n){
margin-right:0; margin-right:0;
} }
&.active{ &.active{
color:#E2001A; color:#E2001A;
border-bottom:4px solid #E2001A; span{
display:inline-block;
border-bottom: 4px solid #E2001A;
}
} }
} }
} }
@ -400,6 +457,17 @@ export default {
} }
.ts-area-picker-desktop{ .ts-area-picker-desktop{
display:none; 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) @media screen and (min-width:769px)
@ -410,15 +478,19 @@ export default {
.ts-area-picker-mobile{ .ts-area-picker-mobile{
display:none; display:none;
} }
.ts-area-picker-container,.ts-area-picker-value-displayer{
width:40rem;
}
.ts-area-picker-desktop{ .ts-area-picker-desktop{
position:absolute;
top:0;
left:0;
display:block; display:block;
width:100%; width:100%;
height:19.25rem; height:19.25rem;
border:1px solid #808285; border:1px solid #808285;
overflow:hidden; overflow:hidden;
} background:#fff;
.ts-area-picker-values{
} }
} }
@keyframes flash-error @keyframes flash-error

24
rc-busness/components/header.vue
View File

@ -76,7 +76,7 @@
<a href="https://royalcanin.com.cn/dogs" class="rc-list__header" data-ref="nav-link" role="menuitem" title="犬">犬</a> <a href="https://royalcanin.com.cn/dogs" class="rc-list__header" data-ref="nav-link" role="menuitem" title="犬">犬</a>
</li> </li>
<li class="rc-list__item"> <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>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="https://royalcanin.com.cn/about" class="rc-list__header" data-ref="nav-link" role="menuitem" title="关于我们">关于我们</a> <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> <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"> <ul class="rc-list rc-list--blank rc-list--align test" role="menu">
<li class="rc-list__item"> <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>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="https://royalcanin.com.cn/cats/breeds" class="rc-list__link" role="menuitem">品种</a> <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> <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"> <ul class="rc-list rc-list--blank rc-list--align test" role="menu">
<li class="rc-list__item"> <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>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="https://royalcanin.com.cn/dogs/breeds" class="rc-list__link" role="menuitem">品种</a> <a href="https://royalcanin.com.cn/dogs/breeds" class="rc-list__link" role="menuitem">品种</a>
@ -131,13 +131,13 @@
</li> </li>
<li class="rc-list__item rc-list__item--group"> <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"> <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"> <ul class="rc-list rc-list--blank rc-list--align test" role="menu">
<li class="rc-list__item"> <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>
<li class="rc-list__item"> <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>
</ul> </ul>
</li> </li>
@ -207,7 +207,7 @@
<a href="https://royalcanin.com.cn/cats" class="rc-list__header" title="Cat" role="menuitem">猫</a> <a href="https://royalcanin.com.cn/cats" class="rc-list__header" title="Cat" role="menuitem">猫</a>
</li> </li>
<li class="rc-list__item"> <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>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="https://royalcanin.com.cn/cats/breeds" class="rc-list__link ca" role="menuitem" title="Breeds">品种</a> <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> <a href="https://royalcanin.com.cn/dogs" class="rc-list__header" title="Dog" role="menuitem">犬</a>
</li> </li>
<li class="rc-list__item"> <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>
<li class="rc-list__item"> <li class="rc-list__item">
<a href="https://royalcanin.com.cn/dogs/breeds" class="rc-list__link ca" role="menuitem" title="Breeds">品种</a> <a href="https://royalcanin.com.cn/dogs/breeds" class="rc-list__link ca" role="menuitem" title="Breeds">品种</a>
@ -252,19 +252,19 @@
</li> </li>
<li class="rc-list__item rc-list__item--group"> <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"> <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"> <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> <button class="rc-list__link rc-icon rc-left--xs rc-iconography" data-toggle="nav-list-3" role="button">返回</button>
</li> </li>
<li class="rc-list__item rc-md-down"> <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>
<li class="rc-list__item"> <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>
<li class="rc-list__item"> <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> </li>
</ul> </ul>
</li> </li>

6
rc-busness/components/rc-footer.vue
View File

@ -48,15 +48,15 @@
</ul> </ul>
</li> </li>
<li class="rc-list__item rc-list__item--group" role="none"> <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> </a>
<ul class="rc-list rc-list--blank rc-list--align" id="nav-footer-3" aria-labelledby="nav-footer-top-3" role="menu"> <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"> <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>
<li class="rc-list__item"> <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> </li>
</ul> </ul>
</li> </li>

16
rc-busness/config/area.js Normal file
View File

File diff suppressed because one or more lines are too long

12
rc-busness/config/async/fetch.js
View File

@ -20,14 +20,20 @@ export default async(url = '', data = {}, type = 'GET', method = 'fetch') => {
} }
if (window.fetch && 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 = { let requestConfig = {
method: type, method: type,
headers: { headers: {
// 'Accept': 'text/plain', // 'Accept': 'text/plain',
'Content-Type': 'application/json' 'Content-Type': 'application/json',
'x-access-token': token
}, },
mode: 'cors', mode: 'cors',
// channelId:'H5@2021', // channelId:'H5@2021',
cache: 'force-cache' cache: 'force-cache'

127
rc-busness/pages/address/address.vue Normal file
View 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>

104
rc-busness/pages/index.vue
View File

@ -5,9 +5,43 @@
<!-- Suppose in header end --> <!-- Suppose in header end -->
<div class="ts-banner-swiper-container"> <div class="ts-banner-swiper-container">
<swiper :options="headerSwiperOption"> <swiper :options="headerSwiperOption">
<swiper-slide v-for="(banner, index) in showingBanners" :key="index"> <swiper-slide>
<a :href="banner.link" target="_blank"> <a href="#" target="_blank">
<img :src="banner.src" class="useraimg"/> <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> </a>
</swiper-slide> </swiper-slide>
</swiper> </swiper>
@ -49,7 +83,7 @@
<swiper-slide v-for="(item, index) in catlistvideo" :key="index"> <swiper-slide v-for="(item, index) in catlistvideo" :key="index">
<div class="rc-video"> <div class="rc-video">
<div class="uservideo"> <div class="uservideo">
<video controls="" :poster=item.catimage> <video controls="" :poster=item.catimage preload="none">
<source :src=item.video type="video/mp4"> <source :src=item.video type="video/mp4">
</video> </video>
</div> </div>
@ -65,7 +99,7 @@
<div class="sw-center" > <div class="sw-center" >
<div class="rc-click" @click="selectproduce(item,index)"> <div class="rc-click" @click="selectproduce(item,index)">
<div class="uservideo"> <div class="uservideo">
<video controls="controls" :poster=item.catimage> <video controls="controls" :poster=item.catimage preload="none">
<source :src= item.video type="video/ogg"> <source :src= item.video type="video/ogg">
</video> </video>
</div> </div>
@ -279,7 +313,7 @@
<swiper-slide v-for="(item, key) in doglistvideo" :key="key"> <swiper-slide v-for="(item, key) in doglistvideo" :key="key">
<div class="rc-video"> <div class="rc-video">
<div class="uservideo"> <div class="uservideo">
<video controls="" :poster=item.catimage> <video controls="" :poster=item.catimage preload="none">
<source :src=item.video type="video/mp4"> <source :src=item.video type="video/mp4">
</video> </video>
</div> </div>
@ -295,7 +329,7 @@
<div class="sw-center" > <div class="sw-center" >
<div class="rc-click" @click="selectproduce(item,index)"> <div class="rc-click" @click="selectproduce(item,index)">
<div class="uservideo"> <div class="uservideo">
<video controls="controls"> <video controls="controls" preload="none" :poster="item.catimage">
<source :src= item.video type="video/ogg"> <source :src= item.video type="video/ogg">
</video> </video>
</div> </div>
@ -740,19 +774,16 @@
doggan:[], doggan:[],
dogtype:[ dogtype:[
{ {
title: "幼犬", title: "离乳期",
}, },
{ {
title: "成犬", title: "幼年",
}, },
{ {
title: "老年犬", title: "成年",
}, },
{ {
title: "品种犬", title: "老年",
},
{
title: "亚健康",
} }
], ],
anchor:'', anchor:'',
@ -823,22 +854,17 @@
], ],
discoun: [ discoun: [
{ {
title: "幼猫", title: "<4月龄",
}, },
{ {
title: "成猫", title: "4-12月龄",
}, },
{ {
title: "老年猫", title: "1-7岁",
}, },
{ {
title: "品种猫", title: ">7岁"
}
},
{
title: "亚健康猫"
},
], ],
discountlist: [ discountlist: [
@ -1065,7 +1091,11 @@
centeredSlides: true, centeredSlides: true,
speed:1000, speed:1000,
spaceBetween: 0, spaceBetween: 0,
autoplay: true, autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
pagination: { pagination: {
el: '#homeBannerSwiperPagnation', el: '#homeBannerSwiperPagnation',
clickable:true clickable:true
@ -1370,13 +1400,14 @@
userdogShi(){ userdogShi(){
this.activeIndex5=(this.activeIndex5?this.activeIndex5:0); this.activeIndex5=(this.activeIndex5?this.activeIndex5:0);
let apiDogSize=this.userdoglist[this.activeIndex5].title; let apiDogSize=this.userdoglist[this.activeIndex5].title;
let apiDogFoodType=this.dogtype[this.quanshiCurIndex].title; let apiDogAgeType=this.dogtype[this.quanshiCurIndex].title;
this.userstype=1; this.userstype=1;
let petType={ let petType={
petType:1, petType:1,
categoryName:"皇家犬湿粮", tagStatus:2,
name:apiDogFoodType, tagUsedAge:apiDogAgeType,
name:apiDogSize
} }
for(let i =0;i<this.userserachlist.length;i++){ for(let i =0;i<this.userserachlist.length;i++){
if(!this.userserachlist.includes(petType)){ if(!this.userserachlist.includes(petType)){
@ -1389,12 +1420,14 @@
userdogGan(){ userdogGan(){
this.activeIndex6=(this.activeIndex6?this.activeIndex6:0); this.activeIndex6=(this.activeIndex6?this.activeIndex6:0);
let apiDogSize=this.userdoglist[this.activeIndex6].title; let apiDogSize=this.userdoglist[this.activeIndex6].title;
let apiDogFoodType=this.dogtype[this.quanganCurIndex].title; let apiDogAgeType=this.dogtype[this.quanganCurIndex].title;
this.userstype=1; this.userstype=1;
let petType={ let petType={
petType:1, petType:1,
name:apiDogFoodType, tagStatus:1,
tagUsedAge:apiDogAgeType,
name:apiDogSize
} }
for(let i =0;i<this.userserachlist.length;i++){ for(let i =0;i<this.userserachlist.length;i++){
if(!this.userserachlist.includes(petType)){ if(!this.userserachlist.includes(petType)){
@ -1565,10 +1598,11 @@
catclickGan(){ catclickGan(){
this.userstype=0; this.userstype=0;
this.maoganCurIndex=this.maoganCurIndex?this.maoganCurIndex:0; this.maoganCurIndex=this.maoganCurIndex?this.maoganCurIndex:0;
let apiCatType=this.discoun[this.maoganCurIndex].title; let apiCatAgeType=this.discoun[this.maoshiCurIndex].title;
let petType={ let petType={
petType:0, petType:0,
name:apiCatType, tagStatus:1,//干
tagUsedAge:apiCatAgeType,
} }
for(let i =0;i<this.userserachlist.length;i++){ for(let i =0;i<this.userserachlist.length;i++){
if(!this.userserachlist.includes(petType)){ if(!this.userserachlist.includes(petType)){
@ -1580,11 +1614,11 @@
catclickShi(){ catclickShi(){
this.userstype=0; this.userstype=0;
this.maoshiCurIndex=this.maoshiCurIndex?this.maoshiCurIndex:0; this.maoshiCurIndex=this.maoshiCurIndex?this.maoshiCurIndex:0;
let apiCatType=this.discoun[this.maoshiCurIndex].title; let apiCatAgeType=this.discoun[this.maoshiCurIndex].title;
let petType={ let petType={
petType:0, petType:0,
categoryName:"皇家猫湿粮", tagStatus:2,//湿
name:apiCatType, tagUsedAge:apiCatAgeType,
} }
for(let i =0;i<this.userserachlist.length;i++){ for(let i =0;i<this.userserachlist.length;i++){
if(!this.userserachlist.includes(petType)){ if(!this.userserachlist.includes(petType)){

894
rc-busness/pages/myorder/userrecord.vue
View File

File diff suppressed because it is too large Load Diff

415
rc-busness/pages/personal/settlement.less Normal file
View 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;
}
}
}
}

358
rc-busness/pages/personal/settlement.vue
View File

@ -1,59 +1,62 @@
<template> <template>
<div> <div class="settlement">
<Myheader></Myheader> <Myheader></Myheader>
<tabs></tabs>
<div class="online"></div>
<div class="rc-main" v-for="(item,index) in goldmedal" :key="index" > <div class="rc-main">
<div class="rc-border"></div> <tabs></tabs>
<div class="address-list">
<div <div
class="mypersonal" class="mypersonal"
v-for="(dataaddress, index) in useraddress" v-for="(item, index) in useraddress"
:key="index" :key="index"
:class="item.isDefault ? 'active' : ''"
@click="selectAddress(item)"
> >
<div class="edit" @click="editAddress(item)">
<i class="el-icon-edit"></i>编辑
</div>
<div class="my-delivery"> <div class="my-delivery">
<span>{{ dataaddress.state }}</span> <span>{{ item.recipient }}</span>
<i>{{ dataaddress.tel }}</i> <i>{{ item.recipientPhone }}</i>
</div> </div>
<div class="per-delivery"> <div class="per-delivery">
<span>{{ dataaddress.address }}</span> <span>{{ item.address }}</span>
</div> </div>
</div> </div>
<div class="online" style="height:3px;width:100%;background:#DDDDDD;"></div> <div class="mypersonal">
<div> <div
<div class="rc-center"> class="my-delivery"
@click="addAddress"
style="justify-content: center"
>
<i class="el-icon-plus"></i>
<span>添加收货地址</span>
</div>
</div>
</div>
</div>
<div class="rc-contline"></div>
<div class="rc-main" v-for="(item, index) in goldmedal" :key="index">
<div class="rc-usermain"> <div class="rc-usermain">
<div class="rc-image"> <div class="rc-image">
<img :src="item.catimage" alt="" /> <img :src="item.productImg" alt="" />
</div> </div>
<div class="rc-right"> <div class="rc-right">
<div class="rc-usercenter"> <div class="rc-usercenter">
<em>{{ item.usereat }}</em> <h3>{{ item.productName }}</h3>
<div class="rc-userright"> <p>规格:{{ item.specifications }}</p>
<span>规格:{{ item.num }}</span>
</div>
</div> </div>
<div class="rc-userbottom"> <div class="rc-userbottom">
<span>数量:{{ item.specification }}件</span> <p>￥{{ item.productPrice }}</p>
<i>￥{{ item.userprice }}</i> <p>X{{ item.buyCount }}</p>
<div class="rc-bottom"> <p class="price">￥{{ item.productPrice }}</p>
<span>联系客服申请售后</span>
</div> </div>
</div> </div>
<div class="rc-bottomm">
<span>联系客服申请售后</span>
</div>
<!-- <div class="rc-userbottomm">
<i>￥{{ item.userprice }}</i>
<span>{{ item.orderstype }}</span>
<i>￥{{ item.userprice }}</i>
</div> -->
</div> </div>
</div> </div>
<div class="rc-contline"></div>
</div> <div class="rc-main">
<div class="rc-merchandise"> <div class="rc-merchandise">
<ul> <ul>
<li> <li>
@ -66,103 +69,78 @@
</li> </li>
<li> <li>
<span>商品总价:</span> <span>商品总价:</span>
<i>{{ shopprice.promotion }}</i> <i class="red">{{ sumPrice }}</i>
</li> </li>
<li> <li>
<span>配送费用:</span> <span>配送费用:</span>
<i>{{ shopprice.payment }}</i> <i class="red">{{ shopprice.payment }}</i>
</li> </li>
</ul> </ul>
</div> </div>
</div>
<div class="rc-contline"></div>
<div class="rc-main">
<div class="rc-foot"> <div class="rc-foot">
<div class="rc-foo"> <div class="rc-foo">
<div style="padding-top:55px"> <div>
<i>合计金额:</i> <i>合计金额:</i>
<em>￥167.00</em> <em>{{ sumPrice }}</em>
</div> </div>
<div style="padding-bottom:40px"> <div style="font-weight: bold">
<span>再次购买</span> <span @click="jiesuan()">提交订单</span>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
<el-dialog :visible.sync="dialogAdd" class="diallog_width" width="'100%">
<div class="rc-button"> <div class="tc dl_cont" v-if="dialogAdd">
<div class="rc-left"> <myAddress
<span>总计：</span> @isClose="dialogCtrl"
<em>￥167.00</em> :editAddressData="editAddressData"
</div> ></myAddress>
<strong ref="rccolor" @click="jiesuan">结算</strong>
</div> </div>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import Myheader from "~/components/header.vue"; import Myheader from "~/components/header.vue";
import {userin} from "../../ajax/getData"; import { userin, memberAddress, generateOrderWX } from "../../ajax/getData";
import tabs from "@/components/tabs.vue"; import tabs from "@/components/tabs.vue";
import myAddress from "../address/address.vue";
import itemMixin from "../../../smart-admin-web/src/components/main/components/side-menu/item-mixin";
export default { export default {
middleware: 'metaTitle', middleware: "metaTitle",
meta: {title: '订单结算'}, meta: { title: "订单结算" },
data() { data() {
return { return {
goldmedal:[], goldmedal: [],
addressstype: null, addressstype: null,
orderstatus: '', orderstatus: "",
userisdelivery:'待收货', userisdelivery: "待收货",
userdelivery: "派送中", userdelivery: "派送中",
isshow:true, isshow: true,
leftico: require("../../assets/image/rc-left.png"), leftico: require("../../assets/image/rc-left.png"),
orderNumber:'', orderNumber: "",
dialogAdd: false,
// delivery: [ editAddressData: {},
// { curAddress: {},
// state: "派送中", saveType: "",
// time: "2021-11-21",
// address: "广州天河—刘某某【15124617917】正在派送中",
// },
// ],
useraddress: [ useraddress: [
{ // {
state: "李某某", // state: "李某某",
tel: "15124117917", // tel: "15124117917",
address: "广东省 广州市 天河区 天河客运站118号", // address: "广东省 广州市 天河区 天河客运站118号",
}, // isdefault: true,
{ // },
state: "李某某", // {
tel: "15124117917", // state: "李某某",
address: "广东省 广州市 天河区 天河客运站118号", // tel: "15124117917",
}, // address: "广东省 广州市 天河区 天河客运站118号",
{ // isdefault: false,
state: "李某某", // },
tel: "15124117917",
address: "广东省 广州市 天河区 天河客运站118号",
},
{
state: "李某某",
tel: "15124117917",
address: "广东省 广州市 天河区 天河客运站118号",
},
],
goldmedal: [
{
ordernumber: "1111111111111111111",
orderstype: 1,
index:0,
usereat: "英国短毛猫成猫全价湿粮",
num: "5kg",
specification: "1",
userprice: "167.00",
catimage: require("../../assets/image/rc-win.png"),
},
], ],
shopprice: { shopprice: {
price: "标准快递", price: "标准快递",
@ -170,49 +148,177 @@ export default {
promotion: "￥167.00", promotion: "￥167.00",
payment: "￥0.00 ", payment: "￥0.00 ",
}, },
information: {
reference: "1111111111111111",
ordertime: "2012-12-01 11:20:00",
paymentmethod: "微信支付",
distribution: "快递",
trackingnumber: "11111111111111",
catimage: require("../../assets/image/rc-left.png"),
},
}; };
}, },
computed: {
// 总价计算
sumPrice() {
return this.goldmedal.reduce((pre, cur) => {
console.log(pre);
return pre + cur.buyCount * cur.productPrice;
}, 0);
},
},
methods: { methods: {
jiesuan(){ async getAddressList() {
// let userdata=this.$route.query.wxdata let memberId = JSON.parse(localStorage.getItem("userInfo")).data.id;
let { data } = await memberAddress("getAll", { memberId: memberId });
data.forEach((item) => {
item.address =
item.provinceName +
item.cityName +
item.districtName +
item.detailAddress;
});
this.useraddress = data;
},
editAddress(item) {
this.editAddressData = {
memberId: item.memberId,
name: item.recipient,
tel: item.recipientPhone,
detailAddress: item.detailAddress,
id: item.id,
city: item.cityName,
districtId: item.districtName,
saveType: "edit",
};
this.dialogAdd = true;
},
addAddress() {
this.editAddressData = {};
this.dialogAdd = true;
},
selectAddress(cur) {
this.useraddress.forEach((item) => {
if (item.id == cur.id) {
item.isDefault = true;
} else {
item.isDefault = false;
}
});
},
dialogCtrl(parm) {
this.dialogAdd = parm;
this.getAddressList();
},
async jiesuan() {
let orderAddress = this.useraddress.filter((item) => item.isDefault);
let postData = [];
this.goldmedal.forEach((item) => {
let oneProduct = {
productName: item.productName,
buyCount: item.buyCount,
productId: item.productCode,
payAmount: item.productPrice,
memberId: item.memberId,
phoneNumber: item.mobile,
// couponId: "NGQ2022P12",
// couponTypeId: "4",
// couponName: "内购券",
// couponAmount: "0.3175",
// couponCode: "0007792402",
orderAddress: {
addressPhoneNumber: orderAddress[0].recipientPhone,
addressUserName: orderAddress[0].recipient,
addressProvinceName: orderAddress[0].provinceName,
addressCityName: orderAddress[0].cityName,
addressCountyName: orderAddress[0].districtName,
addressDetailInfo: orderAddress[0].detailAddress,
},
};
postData.push(oneProduct);
});
// let postData = [
// {
// productName: this.goldmedal.productName,
// buyCount: "2",
// productId: "20030200",
// payAmount: "147.00",
// memberId: "844350",
// phoneNumber: "18112621098",
// couponId: "NGQ2022P12",
// couponTypeId: "4",
// couponName: "内购券",
// couponAmount: "0.3175",
// couponCode: "0007792402",
// orderAddress: {
// addressPhoneNumber:orderAddress[0].recipientPhone,
// addressUserName:orderAddress[0].recipient,
// addressProvinceName: orderAddress[0].provinceName,
// addressCityName:orderAddress[0].cityName,
// addressCountyName: orderAddress[0].districtName,
// addressDetailInfo: orderAddress[0].detailAddress,
// },
// },
// // {
// // productName: "幼猫全价粮",
// // buyCount: "2",
// // productId: "20030200",
// // payAmount: "147.00",
// // memberId: "844350",
// // phoneNumber: "18112621098",
// // couponId: "NGQ2022P12",
// // couponTypeId: "4",
// // couponName: "内购券",
// // couponAmount: "0.3175",
// // couponCode: "0007792402",
// // orderAddress: {
// // addressPhoneNumber: "13602898745",
// // addressUserName: "张三",
// // addressProvinceName: "江苏省",
// // addressCityName: "无锡市",
// // addressCountyName: "江阴市",
// // addressDetailInfo: "东苑一村",
// // },
// // },
// ];
let res = await generateOrderWX(postData);
if (res.success) {
let userPayData = {
orderId: res.data,
userprice: postData[0].payAmount,
userinformation:
postData[0].orderAddress.addressUserName +
" " +
postData[0].orderAddress.addressPhoneNumber,
wxPay: "weixin://wxpay/bizpayurl?pr=4RJbokxzz",
};
this.$router.push({ this.$router.push({
path: "/personal/userpay", path: "/personal/userpay",
query: { query: {
wxdata:userdata userPayData:JSON.stringify(userPayData),
}, },
}); });
}, }
async canceldanhao(orderNumber){ },
let data=await userin(orderNumber); async canceldanhao(orderNumber) {
let data = await userin(orderNumber);
console.log(data); console.log(data);
// this.goldmedal=data; // this.goldmedal=data;
console.log(this.goldmedal); console.log(this.goldmedal);
}, },
}, },
mounted() { mounted() {
this.addressstype = this.$route.query.stype; this.goldmedal = JSON.parse(this.$route.query.list);
this.orderNumber=this.$route.query.orderNumber; console.log(this.$route);
this.canceldanhao(this.orderNumber) this.getAddressList();
console.log(this.$refs.rccolor) // this.addressstype = this.$route.query.stype;
this.$refs.rccolor.style.background='gray'; // this.orderNumber = this.$route.query.orderNumber;
// this.canceldanhao(this.orderNumber);
// console.log(this.$refs.rccolor);
// this.$refs.rccolor.style.background = "gray";
}, },
components: { components: {
Myheader, Myheader,
tabs tabs,
myAddress,
}, },
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import "./settlement.less";
@import url("../../assets/css/global.less"); @import url("../../assets/css/global.less");
@import url("../../assets/css/settlement.less"); // @import url("../../assets/css/settlement.less");
</style> </style>

376
rc-busness/pages/personal/useraddress.vue
View File

@ -2,8 +2,8 @@
<div> <div>
<Myheader></Myheader> <Myheader></Myheader>
<div class="rc-top"></div> <div class="rc-top"></div>
<div class="rc-header"> <div class="online bold"></div>
<div class="rc-main"> <div class="usercontshow rc-max-width--xl">
<div class="rc-headera"> <div class="rc-headera">
<span <span
v-for="(item, index) in discountlist" v-for="(item, index) in discountlist"
@ -15,6 +15,7 @@
</span> </span>
</div> </div>
<div class="online bold"></div>
<div class="rc-userheader"> <div class="rc-userheader">
<span v-for="(item, index) in message" :key="index"> <span v-for="(item, index) in message" :key="index">
{{item.title}} {{item.title}}
@ -22,7 +23,7 @@
</div> </div>
<div class="rc-center" v-for="(item, index) in goldmedal" :key="index"> <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 class="rc-title">
<div> <div>
<i>订单编号:</i><span>{{ item.orderNumber }}</span> <i>订单编号:</i><span>{{ item.orderNumber }}</span>
@ -41,15 +42,13 @@
<div class="rc-usercenter"> <div class="rc-usercenter">
<em>{{ item.usereat }}</em> <em>{{ item.usereat }}</em>
<div class="rc-userright"> <div class="rc-userright">
<span>规格:{{ userlist.num }}</span> <span>规格:{{ item.num }}</span>
</div> </div>
</div> </div>
<div class="rc-userbottom"> <div class="rc-userbottom">
<span>数量:{{ userlist.pcs}}件</span> <span>数量:{{ item.pcs}}件</span>
<i>￥{{ userlist.ecPrice }}</i> <i>￥{{ item.ecPrice }}</i>
</div> </div>
<div class="rc-userbottomm"> <div class="rc-userbottomm">
<i>￥{{ item.userprice }}</i> <i>￥{{ item.userprice }}</i>
<span>{{item.orderstype}}</span> <span>{{item.orderstype}}</span>
@ -62,10 +61,9 @@
<span @click="userfind()">查看订单</span> <span @click="userfind()">查看订单</span>
</div> </div>
</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="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> <span @click="userfind(item)">{{item.status=='0'?'立即支付':item.status=='1'?'查看订单':item.status=='2'?'查看订单':item.status=='3'?'查看订单':'异常订单'}}</span>
</div> -->
</div> </div>
</div> </div>
</div> </div>
@ -300,360 +298,6 @@ async canceldanhao(orderNumber){
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import url("../../assets/css/global.less");
// 手机端 @import url("../../assets/css/orderquantity.less");
@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;
}
}
}
}
}
}
</style> </style>

731
rc-busness/pages/personal/userpay.vue
View File

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

506
rc-busness/pages/productdetails/producted.vue
View File

@ -1,49 +1,92 @@
<template> <template>
<div> <div>
<div class="user" v-for="(item,index) in newlist" :key="index"> <div class="user">
<Myheader></Myheader> <Myheader></Myheader>
<unlogin></unlogin> <unlogin></unlogin>
<tabs></tabs> <tabs></tabs>
<div class="online" id="fixed-catbar-seperator"></div> <div class="online" id="fixed-catbar-seperator"></div>
<div class="rc-top"></div> <div class="rc-top"></div>
<div class="rc-usermain ts-product-detail rc-max-width--xl rc-layout-container rc-two-column rc-border-bottom rc-border-colour--brand4"> <div
class="
rc-usermain
ts-product-detail
rc-max-width--xl
rc-layout-container rc-two-column rc-border-bottom
rc-border-colour--brand4
"
>
<div class="rc-column"> <div class="rc-column">
<div data-js-carousel="" data-image-gallery="true"> <div data-js-carousel="" data-image-gallery="true">
<div class="rc-carousel rc-carousel__gallery-image" data-zoom-container="328b2e5f-6904-4cac-9709-51ed18d2500f" data-zoom-factor="2"> <div
class="rc-carousel rc-carousel__gallery-image"
data-zoom-container="328b2e5f-6904-4cac-9709-51ed18d2500f"
data-zoom-factor="2"
>
<!-- Big images--> <!-- Big images-->
<div v-for="(item, index) in productAttachmentList" :key="index">
<div> <div>
<div> <img :src="item.attachmentPath" />
<img src="https://cdn.royalcanin-weshare-online.io/m2kia2QBG95Xk-RBC8jn/v1/medium-maxi-giant-pos-2012-packshots-ma-ad-shn-packshot?w=420&fm=jpg&auto=compress" alt="Product alt text" /> <!-- <img
src="https://cdn.royalcanin-weshare-online.io/m2kia2QBG95Xk-RBC8jn/v1/medium-maxi-giant-pos-2012-packshots-ma-ad-shn-packshot?w=420&fm=jpg&auto=compress"
alt="Product alt text"
/> -->
</div> </div>
</div> </div>
<div> <!-- <div>
<div> <div>
<img src="https://cdn.royalcanin-weshare-online.io/m2kia2QBG95Xk-RBC8jn/v1/medium-maxi-giant-pos-2012-packshots-ma-ad-shn-packshot?w=420&fm=jpg&auto=compress" alt="Product alt text" /> <img src="https://cdn.royalcanin-weshare-online.io/m2kia2QBG95Xk-RBC8jn/v1/medium-maxi-giant-pos-2012-packshots-ma-ad-shn-packshot?w=420&fm=jpg&auto=compress" alt="Product alt text" />
</div> </div>
</div> </div> -->
<!-- Big images end--> <!-- Big images end-->
</div> </div>
<div class="rc-carousel__gallery-thumbnails-wrapper"> <div class="rc-carousel__gallery-thumbnails-wrapper">
<div class="rc-carousel rc-carousel__gallery-thumbnails"> <div class="rc-carousel rc-carousel__gallery-thumbnails">
<!-- Thunb images--> <!-- Thunb images-->
<div class="rc-carousel__gallery-thumbnail"> <div class="rc-carousel__gallery-thumbnail tns-item tns-slide-active"
<figure class="rc-img--square" style="background-image: url('https://cdn.royalcanin-weshare-online.io/m2kia2QBG95Xk-RBC8jn/v1/medium-maxi-giant-pos-2012-packshots-ma-ad-shn-packshot?w=64&fm=jpg&auto=compress')"> v-for="(item, index) in productAttachmentList"
<figcaption class="rc-screen-reader-text">Product caption text</figcaption> :key="index"
>
<div class="rc-img--square">
<img :src="item.attachmentPath" />
</div>
</div>
<!-- <div class="rc-carousel__gallery-thumbnail">
<figure
class="rc-img--square"
style="
background-image: url('https://cdn.royalcanin-weshare-online.io/m2kia2QBG95Xk-RBC8jn/v1/medium-maxi-giant-pos-2012-packshots-ma-ad-shn-packshot?w=64&fm=jpg&auto=compress');
"
>
<figcaption class="rc-screen-reader-text">
Product caption text
</figcaption>
</figure> </figure>
</div> </div>
<div class="rc-carousel__gallery-thumbnail"> <div class="rc-carousel__gallery-thumbnail">
<figure class="rc-img--square" style="background-image: url('https://cdn.royalcanin-weshare-online.io/UCEUa2QBaxEApS7L_-Xz/v2/fbn-2013-graphiccodes-packshots-siam-ad-int-fbn-packshot?w=64&fm=jpg&auto=compress')"> <figure
<figcaption class="rc-screen-reader-text">Product caption text</figcaption> class="rc-img--square"
style="
background-image: url('https://cdn.royalcanin-weshare-online.io/UCEUa2QBaxEApS7L_-Xz/v2/fbn-2013-graphiccodes-packshots-siam-ad-int-fbn-packshot?w=64&fm=jpg&auto=compress');
"
>
<figcaption class="rc-screen-reader-text">
Product caption text
</figcaption>
</figure> </figure>
</div> </div> -->
<!-- Thunb images end--> <!-- Thunb images end-->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="ts-product-header rc-column" id="328b2e5f-6904-4cac-9709-51ed18d2500f"> <div
class="ts-product-header rc-column"
id="328b2e5f-6904-4cac-9709-51ed18d2500f"
v-for="(item, index) in newlist"
:key="index"
>
<div class="usermain"> <div class="usermain">
<div class="online bold rc-md-down"></div> <div class="online bold rc-md-down"></div>
<div class="rc-main"> <div class="rc-main">
@ -57,7 +100,9 @@
<div class="rc-productdetail"> <div class="rc-productdetail">
<i class="ts-row-title">商品价格：</i> <i class="ts-row-title">商品价格：</i>
<span class="ts-realprice">￥{{ item.rsp }}</span> <span class="ts-realprice">￥{{ item.rsp }}</span>
<span class="ts-remove ts-ecprice">￥{{ item.ecPrice }} </span> <span class="ts-remove ts-ecprice"
>￥{{ item.ecPrice }}
</span>
</div> </div>
<div class="rc-productdetai"> <div class="rc-productdetai">
<div> <div>
@ -83,7 +128,7 @@
{{ item.title }} {{ item.title }}
</em> --> </em> -->
<em class='active'> <em class="active">
{{ item.specifications }} {{ item.specifications }}
</em> </em>
</div> </div>
@ -91,9 +136,17 @@
<div class="rc-main"> <div class="rc-main">
<div class="rc-produnnum"> <div class="rc-produnnum">
<div><i class="ts-row-title">商品数量：</i></div> <div><i class="ts-row-title">商品数量：</i></div>
<img src="../../assets/image/userjian.png" alt="" @click="sub()" /> <img
<strong>{{sales_num}}</strong> src="../../assets/image/userjian.png"
<img src="../../assets/image/userjia.png" alt="" @click="plus()" /> alt=""
@click="sub()"
/>
<strong>{{ sales_num }}</strong>
<img
src="../../assets/image/userjia.png"
alt=""
@click="plus()"
/>
</div> </div>
</div> </div>
<div class="rc-main rc-md-up"> <div class="rc-main rc-md-up">
@ -105,56 +158,59 @@
<ul> <ul>
<li> <li>
<span <span
><i class="ts-row-title">服务说明：</i><i>当天14点前完成付款即日安排发货;当天14点后完成付款次日安排发货(周日及国家法定节假日顺延至下一个工作日发货,活动期间发货或有延迟敬请理解)</i></span ><i class="ts-row-title">服务说明：</i
><i
>当天14点前完成付款即日安排发货;当天14点后完成付款次日安排发货(周日及国家法定节假日顺延至下一个工作日发货,活动期间发货或有延迟敬请理解)</i
></span
> >
</li> </li>
<li> <li>
<span <span
><i class="ts-row-title">商品运费：</i><i>全场包邮(港澳除外)</i></span ><i class="ts-row-title">商品运费：</i
><i>全场包邮(港澳除外)</i></span
> >
</li> </li>
<li> <li>
<span <span
><i class="ts-row-title">商品编号：</i><i>{{ item.brandCode }}</i></span ><i class="ts-row-title">商品编号：</i
><i>{{ item.brandCode }}</i></span
> >
</li> </li>
</ul> </ul>
</div> </div>
<div class="rc-button" v-if="!userbuy"> <div class="rc-button" v-if="userbuy">
<span @click="usertanchu(item,0)">加入购物车</span> <span @click="usertanchu(item, 0)">加入购物车</span>
<span @click="usertanchu(item,1)">立即购买</span> <span @click="usertanchu(item, 1)">立即购买</span>
</div> </div>
</div> </div>
<div class="online bold rc-md-down"></div> <div class="online bold rc-md-down"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="rc-footimage rc-main"> <div class="rc-footimage rc-main">
<img :src=item.showImgFile alt=""> <!-- <img :src="item.showImgFile" alt="" /> -->
</div> </div>
<div class="rc-fixright" > <div class="rc-fixright">
<ul > <ul>
<li v-for="(userfixed,index) in fixedlist" :key="index" @click="lianxi(userfixed,index)"> <li
<img :src="userfixed.catimage" alt=""> v-for="(userfixed, index) in fixedlist"
<span> {{userfixed.title}}</span> :key="index"
@click="lianxi(userfixed, index)"
>
<img :src="userfixed.catimage" alt="" />
<span> {{ userfixed.title }}</span>
</li> </li>
</ul> </ul>
<div class="tuntop" @click="toTop" v-show="gotop"> <div class="tuntop" @click="toTop" v-show="gotop">
<img src="../../assets/image/turntop.png" alt=""> <img src="../../assets/image/turntop.png" alt="" />
<span>回到顶部</span> <span>回到顶部</span>
</div> </div>
</div> </div>
<Myfooter v-on:litentop='showmesg'></Myfooter> <Myfooter v-on:litentop="showmesg"></Myfooter>
</div> </div>
<el-dialog <el-dialog :visible.sync="dialogInfo1" @close="userclose">
:visible.sync="dialogInfo1"
hegight="700px"
@close='userclose'
>
<div class="rs-dis"> <div class="rs-dis">
<div <div
class="rc-discount" class="rc-discount"
@ -172,7 +228,7 @@
<i> <i>
{{ item.couponDesc }} {{ item.couponDesc }}
</i> </i>
<div class="rc-main" id="rc-main"> <div>
<span>有效期</span> <span>有效期</span>
<em>{{ item.validTo }}</em> <em>{{ item.validTo }}</em>
</div> </div>
@ -180,40 +236,29 @@
<span @click="usergetconf(item)">立即领取</span> <span @click="usergetconf(item)">立即领取</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
<el-dialog <el-dialog :visible.sync="dialogInfo2" @close="userclose">
:visible.sync="dialogInfo2"
@close='userclose'
>
<div class="rc-headera"> <div class="rc-headera">
<div class="rc-title"> <div class="rc-title">
<img src="../../assets/error.png" alt=""> <img src="../../assets/error.png" alt="" />
</div> </div>
<div class="rc-logmain"> <div class="rc-logmain">
<h3>温馨提示</h3> <h3>温馨提示</h3>
<span>请先点击下方进行登录/注册</span> <span>请先点击下方进行登录/注册</span>
</div> </div>
<nuxt-link :to="`/userlogin/login/`"> <nuxt-link :to="`/userlogin/login/`">
<div class="userer"> <div class="userer">
<span>立即登录</span> <span>立即登录</span>
</div> </div>
</nuxt-link> </nuxt-link>
</div> </div>
</el-dialog> </el-dialog>
<div class="rc-button rc-md-down"> <div class="rc-button rc-md-down">
<span @click="usertanchu(item,0)">加入购物车</span> <span @click="usertanchu(item, 0)">加入购物车</span>
<span @click="usertanchu(item,1)">立即购买</span> <span @click="usertanchu(item, 1)">立即购买</span>
</div> </div>
</div> </div>
</template> </template>
@ -221,35 +266,42 @@
<script> <script>
import Myheader from "~/components/header.vue"; import Myheader from "~/components/header.vue";
import tabs from "@/components/tabs.vue"; import tabs from "@/components/tabs.vue";
import unlogin from "~/components/unlogin.vue"; import unlogin from "~/components/unlogin.vue";
import { mapMutations } from "vuex"; import { mapMutations } from "vuex";
import Myfooter from "~/components/rc-footer.vue"; import Myfooter from "~/components/rc-footer.vue";
import { goodsmessage,getConfig,postCourseId,getdraw,alldiscount } from "../../ajax/getData"; import {
const settings = require("@/config"); goodsmessage,
getConfig,
postCourseId,
getdraw,
alldiscount,
} from "../../ajax/getData";
const settings = require("@/config");
export default { export default {
// middleware: 'metaTitle', // middleware: 'metaTitle',
// // middleware: 'metaTitle', // // middleware: 'metaTitle',
// meta: {title: '产品详情'}, // meta: {title: '产品详情'},
data() { data() {
return { return {
tableLabelTest:[], tableLabelTest: [],
userimage: require("../../assets/image/unused.png"), userimage: require("../../assets/image/unused.png"),
activeIndexa:0, activeIndexa: 0,
gotop: false, gotop: false,
dialogInfo1:false, dialogInfo1: false,
name: [], name: [],
userlist:[], userlist: [],
drawlist:[],//用户可以领取的优惠券 drawlist: [], //用户可以领取的优惠券
alldraw:[], alldraw: [],
userlistmenu:[], userlistmenu: [],
msg:['11111111'], msg: ["11111111"],
parent_msg:['111'], parent_msg: ["111"],
usermessage:[], usermessage: [],
dialogInfo2:false, dialogInfo2: false,
productCode:'',//商品code productCode: "", //商品code
productlist:[], productlist: [],
userbuy:true, userbuy: true,
sales_num:1, sales_num: 1,
productAttachmentList: [],
usernewlist: [ usernewlist: [
{ {
price: "30", price: "30",
@ -272,23 +324,17 @@ export default {
{ {
title: "购物车", title: "购物车",
catimage: require("../../assets/buy.png"), catimage: require("../../assets/buy.png"),
}, },
{ {
title: "在线客服", title: "在线客服",
catimage: require("../../assets/service.png"), catimage: require("../../assets/service.png"),
}, },
{ {
title: "营养专家", title: "营养专家",
catimage: require("../../assets/consult.png"), catimage: require("../../assets/consult.png"),
}, },
], ],
newlist: [ newlist: [
{ {
price: "167.00", price: "167.00",
@ -309,104 +355,106 @@ export default {
}, },
], ],
}; };
}, },
components: { components: {
Myheader, Myheader,
tabs, tabs,
unlogin, unlogin,
Myfooter Myfooter,
}, },
mounted() { mounted() {
window.addEventListener("scroll", this.handleScroll, true); window.addEventListener("scroll", this.handleScroll, true);
if(this.usermessage!=='' ||this.usermessage.data!==undefined){ if (this.usermessage !== "" || this.usermessage.data !== undefined) {
this.usermessage= JSON.parse(localStorage.getItem("userInfo")); this.usermessage = JSON.parse(localStorage.getItem("userInfo"));
let stype=this.$route.query.stype; let stype = this.$route.query.stype;
this.productCode=this.$route.query.productCode; this.productCode = this.$route.query.productCode;
console.log(this.productCode) // console.log(this.productCode);
this.userquery(this.productCode); this.userquery(this.productCode);
console.log(this.userlistmenu) // console.log(this.userlistmenu);
this.$nextTick(()=>{ this.$nextTick(() => {});
if (stype == 1) {
}) this.userbuy = true;
if(stype==1){ } else if (stype == 2) {
this.userbuy=true; // console.log("这是要消失的");
}else if(stype==2){
console.log('这是要消失的')
this.$nextTick(() => { this.$nextTick(() => {
this.userbuy=false; this.userbuy = false;
});
})
} }
} }
}, },
methods: { methods: {
...mapMutations(["changemessage"]), ...mapMutations(["changemessage"]),
handleScroll(e) handleScroll(e) {
{ let fixedCatbarSeperator = document.querySelector(
let fixedCatbarSeperator = document.querySelector("#fixed-catbar-seperator"); "#fixed-catbar-seperator"
let scrolltop = document.documentElement.scrollTop || document.body.scrollTop; );
if(fixedCatbarSeperator!=='null' ){ let scrolltop =
if((scrolltop-fixedCatbarSeperator.offsetTop)) document.documentElement.scrollTop || document.body.scrollTop;
{ if (fixedCatbarSeperator !== "null") {
this.gotop = true if (scrolltop - fixedCatbarSeperator.offsetTop) {
} this.gotop = true;
else } else {
{
this.gotop = false; this.gotop = false;
} }
} }
}, },
lianxi(item,index){ lianxi(item, index) {
console.log(item,index); console.log(item, index);
if(item.title=='在线客服'){ if (item.title == "在线客服") {
var option = { var option = {
customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'} customer: {
} id: "",
name: "",
email: "",
mobile: "",
memberId: "999999",
},
};
dis_livchat(option); dis_livchat(option);
} }
if(item.title=='购物车'){ if (item.title == "购物车") {
console.log('---12314');
this.$router.push({ this.$router.push({
path: "../../myorder/userrecord", path: "../../myorder/userrecord",
}); });
} }
if(item.title=='营养专家'){ if (item.title == "营养专家") {
var option = { var option = {
customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'} customer: {
} id: "",
name: "",
email: "",
mobile: "",
memberId: "999999",
},
};
dis_livchat(option); dis_livchat(option);
} }
}, },
toTop() { toTop() {
let top = document.documentElement.scrollTop || document.body.scrollTop; let top = document.documentElement.scrollTop || document.body.scrollTop;
// 实现滚动效果 // 实现滚动效果
const timeTop = setInterval(() => { const timeTop = setInterval(() => {
document.body.scrollTop = document.documentElement.scrollTop = top -= 400; document.body.scrollTop =
document.documentElement.scrollTop =
top -=
400;
if (top <= 0) { if (top <= 0) {
clearInterval(timeTop); clearInterval(timeTop);
} }
}, 10); }, 10);
}, },
showmesg(){ showmesg() {
console.log('-----');
this.toTop(); this.toTop();
}, },
toTop() { toTop() {
let top = document.documentElement.scrollTop || document.body.scrollTop; let top = document.documentElement.scrollTop || document.body.scrollTop;
// 实现滚动效果 // 实现滚动效果
const timeTop = setInterval(() => { const timeTop = setInterval(() => {
document.body.scrollTop = document.documentElement.scrollTop = top -= 400; document.body.scrollTop =
document.documentElement.scrollTop =
top -=
400;
if (top <= 0) { if (top <= 0) {
clearInterval(timeTop); clearInterval(timeTop);
} }
@ -414,193 +462,161 @@ this.usermessage= JSON.parse(localStorage.getItem("userInfo"));
}, },
//领取优惠券 //领取优惠券
usergetconf(item){ usergetconf(item) {
console.log(item); console.log(item);
if(this.usermessage.data!==''||this.usermessage.data!==undefined){ if (this.usermessage.data !== "" || this.usermessage.data !== undefined) {
this.getconf(this.usermessage.data.id,item.couponId); this.getconf(this.usermessage.data.id, item.couponId);
} }
}, },
//获取用户领取的优惠券 //获取用户领取的优惠券
async getconf(memberId,couponId) { async getconf(memberId, couponId) {
let data = await getConfig(memberId,couponId); let data = await getConfig(memberId, couponId);
if(data){ if (data) {
this.$message({ this.$message({
type: 'warning', type: "warning",
message: data.msg message: data.msg,
}); });
console.log(data); console.log(data);
} }
}, },
// changeName(newName){ // changeName(newName){
// this.name = newName; // this.name = newName;
// }, // },
userclose() {
userclose(){ this.userlist = [];
console.log('这是关闭的');
this.userlist=[];
}, },
async userquery() { async userquery() {
console.log("-----");
let data = await goodsmessage(this.productCode); let data = await goodsmessage(this.productCode);
if(data){ if (data) {
this.newlist=data.data; this.newlist = data.data;
} }
this.productAttachmentList = this.newlist[0].productAttachmentList;
this.userlistmenu=this.newlist[0].productAttachmentList; this.userlistmenu = this.newlist[0].productAttachmentList;
let changemess=JSON.stringify(this.userlistmenu); let changemess = JSON.stringify(this.userlistmenu);
console.log(changemess); console.log(changemess);
this.changemessage({ data: changemess }); this.changemessage({ data: changemess });
this.parent_msg=this.userlistmenu; this.parent_msg = this.userlistmenu;
console.log( this.userlistmenu) console.log(this.userlistmenu);
}, },
//获取用户领取的优惠券 //获取用户领取的优惠券
async userdraw(mobile) { async userdraw(mobile) {
let data = await getdraw(mobile); let data = await getdraw(mobile);
if(data){ if (data) {
this.drawlist=data.data; this.drawlist = data.data;
} }
}, },
//获取所有的优惠券 //获取所有的优惠券
async alldrawlist(memberId) { async alldrawlist(memberId) {
let data = await alldiscount(memberId); let data = await alldiscount(memberId);
let userlist=[]; let userlist = [];
let menulsit=[]; let menulsit = [];
if(data){ if (data) {
this.alldraw=data; this.alldraw = data;
// console.log(this.alldraw.data); // console.log(this.alldraw.data);
let alllist=[]; let alllist = [];
this.userlist=this.alldraw.data; this.userlist = this.alldraw.data;
this.userlist.forEach((element,index)=>{ this.userlist.forEach((element, index) => {
if(typeof element.productCodes=='string'){ if (typeof element.productCodes == "string") {
userlist.push(element); userlist.push(element);
// let s=element.productCodes.split(','); // let s=element.productCodes.split(',');
// console.log(s.indexOf(this.productCode) != -1 ) // console.log(s.indexOf(this.productCode) != -1 )
// console.log('这是字符串') // console.log('这是字符串')
} }
});
}) let menualist = [];
let menualist=[]; userlist.filter((item) => {
userlist.filter(item=>{
console.log(item); console.log(item);
item.productCodes=item.productCodes.split(',') item.productCodes = item.productCodes.split(",");
item.productCodes.forEach(element=>{ item.productCodes.forEach((element) => {
if(element==this.productCode &&item.activityId!==10){ if (element == this.productCode && item.activityId !== 10) {
console.log(element) console.log(element);
console.log(this.productCode) console.log(this.productCode);
menualist.push(item); menualist.push(item);
console.log('----'); console.log("----");
} }
}) });
});
this.usernewlist = menualist;
})
this.usernewlist=menualist;
console.log(this.usernewlist); console.log(this.usernewlist);
} }
}, },
plus(num,index){ plus(num, index) {
this.sales_num = parseInt(this.sales_num) + 1;
this.sales_num= parseInt(this.sales_num) + 1; },
console.log( this.sales_num);
} ,
// 数量减方法 // 数量减方法
sub(num,index){ sub(num, index) {
if( this.sales_num <= 1){ if (this.sales_num <= 1) {
this.sales_num = 1; this.sales_num = 1;
} } else {
else{
this.sales_num = parseInt(this.sales_num) - 1; this.sales_num = parseInt(this.sales_num) - 1;
} }
}, },
async courseId(item) { async courseId(item) {
console.log(item);
console.log(this.usermessage);
// let userid=JSON.parse(location.getItem('userInfo')); // let userid=JSON.parse(location.getItem('userInfo'));
// let mobile=JSON.parse(location.getItem('userInfo')); // let mobile=JSON.parse(location.getItem('userInfo'));
// console.log(userid,mobile); // console.log(userid,mobile);
let data = await postCourseId( this.productCode,this.sales_num,this.usermessage.data.id,this.usermessage.data.mobile,item.picFile,item.productName,item.basePrice,item.specifications); let data = await postCourseId(
if(data){ this.productCode,
this.productlist=data; this.sales_num,
this.usermessage.data.id,
this.usermessage.data.mobile,
item.picFile,
item.productName,
item.basePrice,
item.specifications
);
if (data) {
this.productlist = data;
} }
console.log(data);
}, },
usertanchu(item,orderm){ usertanchu(item, orderm) {
let user = localStorage.getItem("userInfo");
let user= localStorage.getItem("userInfo"); if (user == undefined || user == null || user == "") {
if(user==undefined||user==null||user==''){ this.dialogInfo2 = true;
this.dialogInfo2=true; return;
return } else {
}else{
this.courseId(item); this.courseId(item);
if(orderm==0){ if (orderm == 0) {
this.$message({ this.$message({
type: 'warning', type: "warning",
message: '加入购物车成功' message: "加入购物车成功",
}); });
} }
if(orderm==1){ if (orderm == 1) {
this.$router.push({ this.$router.push({
path: "/myorder/userrecord", path: "/myorder/userrecord",
}); });
} }
} }
},
userget() {
let user = localStorage.getItem("userInfo");
if (user == undefined || user == null || user == "") {
}, this.dialogInfo2 = true;
userget(){ return;
} else {
let user= localStorage.getItem("userInfo");
if(user==undefined||user==null||user==''){
this.dialogInfo2=true;
return
}else{
this.userdraw(this.usermessage.data.mobile); this.userdraw(this.usermessage.data.mobile);
this.alldrawlist(this.usermessage.data.id); this.alldrawlist(this.usermessage.data.id);
this.dialogInfo1=true; this.dialogInfo1 = true;
} }
}, },
selectsearch(item, index) { selectsearch(item, index) {
this.activeIndexa = index;
this.activeIndexa=index;
}, },
}, },
onceproduct(){ onceproduct() {},
},
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

12
rc-busness/pages/productdetails/productlist.vue
View File

@ -516,12 +516,12 @@ export default {
this.$refs.userstandard[0].style.margin = 0 + "px"; this.$refs.userstandard[0].style.margin = 0 + "px";
}); });
this.userst(); this.userst();
this.activeIndex = stype; // this.activeIndex = stype;
if (stype !== "" && stype !== undefined) { // if (stype !== "" && stype !== undefined) {
this.onmessage(stype); // this.onmessage(stype);
} else { // } else {
this.usetmessage(); // this.usetmessage();
} // }
}, },
methods: { methods: {
async usersearch(stype, usertype) { async usersearch(stype, usertype) {

119
rc-busness/pages/useraddress/addaddress.vue
View File

@ -7,31 +7,30 @@
<h2>新增收货地址</h2> <h2>新增收货地址</h2>
<div class="rc-max-width--xl rc-people"> <div class="rc-max-width--xl rc-people">
<span>收货人:</span> <span>收货人:</span>
<input type="text" placeholder="请输入收货人姓名"> <input type="text" placeholder="请输入收货人姓名" v-model="userpeople">
</div> </div>
<div class="rc-max-width--xl rc-phone"> <div class="rc-max-width--xl rc-phone">
<span>手机号码:</span> <span>手机号码:</span>
<input type="text" placeholder="请输入11位手机号码"> <input type="text" placeholder="请输入11位手机号码" v-model="tel" :error-message="usertel">
</div> </div>
<div class="rc-max-width--xl rc-address"> <div class="rc-max-width--xl rc-address">
<span>所在地区:</span> <span>所在地区:</span>
<input type="text" placeholder="请选择所在地区"> <!-- <input type="text" placeholder="请选择所在地区"> -->
<addressInput @getmenu="onGetMenu" @closeDialog = "handleClose1" :dialogInfo1="dialogInfo1"></addressInput>
</div> </div>
<div class="rc-max-width--xl rc-useaddress"> <div class="rc-max-width--xl rc-useaddress">
<span>详细地址:</span> <span>详细地址:</span>
<input type="text" placeholder="小区、门牌号等" class="userinput"> <input type="text" placeholder="小区、门牌号等" class="userinput" v-model="alladdress">
<textarea rows="10" cols="30" placeholder="请输入详细地址"> <textarea rows="10" cols="30" placeholder="请输入详细地址">
</textarea> </textarea>
</div> </div>
<addressInput @getmenu="onGetMenu" @closeDialog = "handleClose1" :dialogInfo1="dialogInfo1"></addressInput> </div>
</div> </div>
<div class="rc-button"> <div class="rc-button">
<span @click="openclose()">取消</span> <span @click="openclose()">取消</span>
<em @click="openclose()">确认</em> <em @click="register()">确认</em>
</div>
</div> </div>
<!-- <div class="rc-button"> <!-- <div class="rc-button">
<div class="rc-footbutton" @click="onAdd()"> <div class="rc-footbutton" @click="onAdd()">
@ -49,16 +48,21 @@
<script> <script>
import Myheader from '~/components/header.vue' import Myheader from '~/components/header.vue'
import MyFooter from '~/components/rc-footer.vue'
import addressInput from '~/components/addressInput.vue' import addressInput from '~/components/addressInput.vue'
import MyFooter from '~/components/rc-footer.vue'
import {editaddress} from "../../ajax/getData";
export default { export default {
data() { data() {
return { return {
chosenAddressId: "1", chosenAddressId: "1",
usermessage:null,
checked: true, checked: true,
tel: "",
alladdress:'',
userid: null, userid: null,
usermessage:null, usermessage:null,
dialogInfo1:false, dialogInfo1:false,
userpeople:'',
list: [ list: [
{ {
id: 1, id: 1,
@ -85,41 +89,69 @@ export default {
methods: { methods: {
onGetMenu(values){ onGetMenu(values){
console.log(values,+'111111'); 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(){ handleClose1(){
this.dialogInfo1 = false this.dialogInfo1 = false
}, },
onEdit(item, index) {
// let userid = item.id; register(){
console.log(item); console.log(this.tel)
this.$router.push({ if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel) || this.tel === "") {
path: "/useraddress/editaddress", this.$message({
query: { type: 'warning',
id: item, message: '手机号码输入有误'
},
}); });
}, return
onAdd(item, index) { }else if(this.alladdress===''){
// let userid = item.id; this.$message({
// console.log(item); type: 'warning',
this.$router.push({ message: '请输入详细地址'
path: "/useraddress/addaddress",
// query: {
// id: userid,
// },
}); });
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: '地址添加成功'
});
}
}, },
//删除地址
// 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) { // async editaddress(user) {
// user.data.id=844350 // user.data.id=844350
@ -134,8 +166,23 @@ export default {
MyFooter, MyFooter,
addressInput 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() { 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.usermessage = JSON.parse(localStorage.getItem("userInfo"));
// this.editaddress(this.usermessage); // this.editaddress(this.usermessage);

130
rc-busness/pages/useraddress/editaddress.vue
View File

@ -2,23 +2,23 @@
<div> <div>
<Myheader></Myheader> <Myheader></Myheader>
<div class="rc-top"></div> <div class="rc-top"></div>
<div class="usercontend">
<div class="rc-max-width--xl rc-main"> <div class="rc-max-width--xl">
<div class="rc-max-width--xl rc-people"> <div class="rc-max-width--xl rc-people">
<span>收货人:</span> <span>收货人:</span>
<input type="text" placeholder="李某某"> <input type="text" placeholder="" v-model="recipient">
</div> </div>
<div class="rc-max-width--xl rc-phone"> <div class="rc-max-width--xl rc-phone">
<span>手机号码:</span> <span>手机号码:</span>
<input type="text" placeholder="15279944631"> <input type="text" placeholder="" v-model="recipientPhone">
</div> </div>
<div class="rc-max-width--xl rc-address"> <div class="rc-max-width--xl rc-address">
<span>所在地区:</span> <span>所在地区:</span>
<input type="text" placeholder="请选择所在地区"> <addressInput @getmenu="onGetMenu" @closeDialog = "handleClose1" :dialogInfo1="dialogInfo1" :defaultValues="defaultValues"></addressInput>
</div> </div>
<div class="rc-max-width--xl rc-useaddress"> <div class="rc-max-width--xl rc-useaddress">
<span>详细地址:</span> <span>详细地址:</span>
<input type="text" placeholder="天河客运站"> <input type="text" placeholder="" v-model="detailAddress" >
</div> </div>
</div> </div>
@ -27,12 +27,14 @@
<span>新增收货地址</span> <span>新增收货地址</span>
</div> </div>
</div> --> </div> -->
</div>
<div class="rc-button"> <div class="rc-button">
<span @click="openclose()">取消</span> <span @click="openclose()">取消</span>
<em @click="openclose()">确认</em> <em @click="register()">确认</em>
</div> </div>
<!-- <MyFooter></MyFooter> --> <MyFooter></MyFooter>
</div> </div>
</template> </template>
@ -40,13 +42,22 @@
import Myheader from '~/components/header.vue' import Myheader from '~/components/header.vue'
import MyFooter from '~/components/rc-footer.vue' import MyFooter from '~/components/rc-footer.vue'
import { editupdate} from "../../ajax/getData";
import addressInput from '~/components/addressInput.vue'
export default { export default {
data() { data() {
return { return {
chosenAddressId: "1", chosenAddressId: "1",
checked: true, checked: true,
userid: null, userid: null,
dialogInfo1:false,
usermessage:null, usermessage:null,
useradrname:[],
detailAddress:'',
recipientPhone:'',
recipient:'',
addressid:'',
defaultValues:[],
list: [ list: [
{ {
id: 1, id: 1,
@ -71,29 +82,66 @@ export default {
}; };
}, },
methods: { methods: {
onEdit(item, index) { onGetMenu(values){
// let userid = item.id; console.log(values,+'111111');
console.log(item);
this.$router.push({
path: "/useraddress/editaddress",
query: {
id: item,
}, },
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
onAdd(item, index) { }else if(this.alladdress===''){
// let userid = item.id; this.$message({
// console.log(item); type: 'warning',
this.$router.push({ message: '请输入详细地址'
path: "/useraddress/addaddress",
// query: {
// id: userid,
// },
}); });
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: '地址修改成功'
});
}
}, },
//删除地址 //删除地址
// async userdelete(item) { // async userdelete(item) {
// console.log(item.memberId); // console.log(item.memberId);
@ -114,13 +162,37 @@ export default {
components: { components: {
Myheader, Myheader,
MyFooter, 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() { mounted() {
//地址的查询 this.userid = JSON.parse(localStorage.getItem("userInfo")).data.id;
// this.usermessage = JSON.parse(localStorage.getItem("userInfo")); this.recipient=this.$route.query.recipient
// this.editaddress(this.usermessage); this.recipientPhone=this.$route.query.recipientPhone
// this.userid = this.usermessage.data.id; this.detailAddress=this.$route.query.detailAddress
this.id=this.$route.query.id;
}, },
}; };
</script> </script>

120
rc-busness/pages/useraddress/openaddress.vue
View File

@ -10,15 +10,15 @@
<div class="rc-center"> <div class="rc-center">
<div class=" rc-title"> <div class=" rc-title">
<em> <em>
{{ item.name }} {{ item.recipient }}
</em> </em>
<span> <span>
{{ item.tel }} {{ item.recipientPhone }}
</span> </span>
</div> </div>
<div class="rc-address"> <div class="rc-address">
<span> <span>
{{ item.address }} {{item.provinceName}}{{ item.districtName }}{{item.detailAddress}}
</span> </span>
</div> </div>
<div class="rc-footer"> <div class="rc-footer">
@ -47,17 +47,19 @@
</div> </div>
<div class="usercontshow useredit"> <div class="usercontshow useredit">
<div class="usercontshow alledit" @click="onAdd()">
<img src="../../assets/image/userselect.png" alt=""> <img src="../../static/images/adddress.png" alt="">
<span>添加收货地址</span> <span>添加收货地址</span>
</div>
</div>
</div> </div>
<div class="rc-button"> <div class="rc-button">
<div class="rc-footbutton" @click="onAdd()"> <div class="rc-footbutton" @click="onAdd()">
<span>新增收货地址</span> <span>新增收货地址</span>
</div> </div>
</div> </div>
</div>
<MyFooter></MyFooter> <MyFooter></MyFooter>
</div> </div>
</template> </template>
@ -65,44 +67,55 @@
<script> <script>
import Myheader from '~/components/header.vue' import Myheader from '~/components/header.vue'
import MyFooter from '~/components/rc-footer.vue' import MyFooter from '~/components/rc-footer.vue'
import { selectaddress,editupdate,editdelete} from "../../ajax/getData";
export default { export default {
data() { data() {
return { return {
chosenAddressId: "1", chosenAddressId: "1",
checked: true, checked: true,
userid: null, userid: null,
userlist:[],
usermessage:null, usermessage:null,
list: [ 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: { 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) { onEdit(item, index) {
// let userid = item.id; // let userid = item.id;
console.log(item); console.log(item);
// debugger
this.$router.push({ this.$router.push({
path: "/useraddress/editaddress", path: "/useraddress/editaddress",
query: { 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) { async userdelete(item) {
// console.log(item.memberId); console.log(item.memberId);
// let data = await editdelete(this.userid, item.id); let data = await editdelete(this.userid, item.id);
// this.editaddress(this.usermessage); this.editaddress();
// console.log(data); console.log(data);
// }, },
//查询人的所有地址 //查询人的所有地址
// async editaddress(user) { async editaddress(user) {
// user.data.id=844350 // user.data.id=844350;
// let data = await selectaddress(user.data.id); let data = await selectaddress(this.userid);
// this.list=data.data; console.log(data);
this.list=data.data;
// console.log(this.list); // console.log(this.list);
// console.log(data); console.log(data);
// }, },
}, },
components: { components: {
Myheader, Myheader,
@ -143,9 +175,11 @@ export default {
mounted() { mounted() {
//地址的查询 //地址的查询
// this.usermessage = JSON.parse(localStorage.getItem("userInfo")); this.usermessage = JSON.parse(localStorage.getItem("userInfo"));
// this.editaddress(this.usermessage); this.userid = this.usermessage.data.id;
// this.userid = this.usermessage.data.id; console.log(this.userid);
this.editaddress(this.userid);
}, },
}; };
</script> </script>

BIN
rc-busness/static/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
rc-busness/static/images/adddress.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
rc-busness/static/images/banner/four.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 85 KiB

After

Width:  |  Height:  |  Size: 50 KiB

BIN
rc-busness/static/images/banner/one.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 170 KiB

After

Width:  |  Height:  |  Size: 90 KiB

BIN
rc-busness/static/images/banner/three.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 60 KiB

BIN
rc-busness/static/images/banner/two.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 286 KiB

After

Width:  |  Height:  |  Size: 66 KiB