!53 2022-1-20 Jiamin

Merge pull request !53 from Admin/sit-jiamin-v2
This commit is contained in:
Admin 2022-01-20 05:49:09 +00:00 committed by Gitee
commit 8c4a8f4964
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
12 changed files with 813 additions and 541 deletions

View File

@ -0,0 +1,212 @@
@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{
display: flex;
justify-content: center;
font-size: 14px;
width: 100%;
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
height: 80px;
align-items: center;
padding:0 20px 0 20px;
span
{
width: 160px;
height: 48px;
border: 2px solid #E2001A;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
color: #E2001A;
}
em{
font-style: normal;
width: 164px;
height: 48px;
background: #E2001A;
cursor: pointer;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
margin-left: 40px;
}
}
.rc-max-width--xl{
h2{
display: none;
}
}
}
.rc-max-width--xl{
margin-top: 16px;
input{
width: 258px;
height: 34px;
border: none;
border-bottom: 1px solid #808285;
color: #999999;
font-size: 16px;
margin-left: 2px;
}
span{
font-size: 16px;
font-weight: bold;
width: 22%;
text-align: center;
color: #333333;
margin-top: 2px;
}
.rc-people{
width: 100%;
display: flex;
align-items: center;
span{
text-align: left;
}
}
// .rc-phone{
// }
// .rc-address{
// }
// .rc-useaddress{
// }
}
}
@media screen and (min-width: 769px)
{
.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{
// }
// .rc-useaddress{
// }
}
}

View File

@ -0,0 +1,89 @@
@media screen and (max-width:768px){
.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;
position: absolute;
bottom: 0;
padding:0 20px 0 20px;
span
{
width: 160px;
height: 48px;
border: 2px solid #E2001A;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
color: #E2001A;
}
em{
font-style: normal;
width: 164px;
height: 48px;
background: #E2001A;
cursor: pointer;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
margin-left: 40px;
}
}
.rc-max-width--xl{
margin-top: 16px;
input{
width: 258px;
height: 34px;
border: none;
border-bottom: 1px solid #808285;
color: #999999;
font-size: 16px;
margin-left: 2px;
}
span{
font-size: 16px;
font-weight: bold;
width: 22%;
text-align: center;
color: #333333;
margin-top: 2px;
}
.rc-people{
width: 100%;
display: flex;
align-items: center;
span{
text-align: left;
}
}
// .rc-phone{
// }
// .rc-address{
// }
// .rc-useaddress{
// }
}
}
@media screen and (min-width: 769px)
{
}

View File

@ -8,30 +8,6 @@ body{
.fade-leave-active { .fade-leave-active {
opacity: 0; opacity: 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;
@ -393,12 +369,15 @@ img, picture {
} }
.ts-scrollable{ .ts-scrollable{
li{ li{
// width: 4.125rem; width: 6rem;
overflow: hidden;
padding: 0 0.62rem; padding: 0 0.62rem;
height: 1.625rem; height: 1.625rem;
margin-left: .5rem; margin-left: .5rem;
font-size:.75rem; font-size:.75rem;
line-height: 1.375rem; text-overflow:ellipsis;
white-space:nowrap;
line-height: 1.625rem;
} }
&::-webkit-scrollbar{ &::-webkit-scrollbar{
display:none; display:none;
@ -410,6 +389,7 @@ img, picture {
/* pc端 */ /* pc端 */
@media screen and (min-width: 769px) @media screen and (min-width: 769px)
{ {
/deep/.van-tabs__wrap /deep/.van-tabs__wrap
{ {
max-width: 768px; max-width: 768px;

View File

@ -5,29 +5,10 @@
/deep/.van-swipe__indicator--active{ /deep/.van-swipe__indicator--active{
background-color: #E1001A; background-color: #E1001A;
} }
.rc-ma{
.ts-carousel-indicator{ .ul-zhuan{
/deep/.swiper-pagination-bullet{
margin-left:.5rem;
}
/deep/.swiper-pagination-bullet-active{
background:#E2001A;
}
&.center{
width:100%;
text-align: center;
}
}
.ts-position-identifier{
}
.ul-zhuan,.ul-dog{
li{ li{
background: unset; background: unset;;
img{
border-radius: 50%;
}
&.active {
img{ img{
border: 3px solid #E2001A; border: 3px solid #E2001A;
} }
@ -50,30 +31,6 @@
width:auto; width:auto;
} }
} }
.ul-dog{
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
flex-direction: row;
span{
margin-top: .5rem;
display: block;
}
img{
width: 9.5rem;
height: auto;
display: block;
}
li{
cursor: pointer;
font-size: 16px;
text-align: center;
margin-top:3rem;
margin-left:3rem;
}
}
@media screen and (max-width:768px){ @media screen and (max-width:768px){
.ul-dog{ .ul-dog{
justify-content: space-evenly; justify-content: space-evenly;
@ -217,6 +174,7 @@
.uservideo{ .uservideo{
width: 100%; width: 100%;
height:auto; height:auto;
max-height: 15.68rem;
display: block; display: block;
video{ video{
max-width:100%; max-width:100%;
@ -264,10 +222,6 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
max-width: 60%; max-width: 60%;
text-align: center; text-align: center;
word-break: keep-all;
height: 2.625rem;
display: flex;
align-items: center;
} }
em{ em{
font-style: normal; font-style: normal;
@ -381,13 +335,6 @@
// height: 29.31rem; // height: 29.31rem;
object-fit: cover; object-fit: cover;
} }
.ts-banner-swiper-container{
position:relative;
.ts-carousel-indicator{
position:absolute;
bottom:.4rem;
}
}
.van-swipe-item { .van-swipe-item {
color: #fff; color: #fff;
height: 100%; height: 100%;

View File

@ -26,10 +26,7 @@ span{
} }
} }
} }
.rc-usermain{ .rc-max-width--xl{
width: 92%;
margin: 0 auto;
ul{ ul{
height: 70px; height: 70px;
display: block; display: block;

View File

@ -9,10 +9,18 @@ ul li ol li em strong i {
//rc-main start //rc-main start
margin-top:.23rem; margin-top:.23rem;
.usersearch { .usersearch {
.ts-scrollable-container{
h2{
font-weight: bold;
color: #333333;
}
}
margin: 0 auto; margin: 0 auto;
overflow: hidden; overflow: hidden;
} }
//rc-main end //rc-main end
} }
@ -24,6 +32,53 @@ ul li ol li em strong i {
.usercontentshow{ .usercontentshow{
position: relative; position: relative;
.rc-productcat {
display: flex;
align-items: center;
flex-wrap: nowrap;
ol{
display: flex;
align-items: center;
flex-flow: row;
.ts-standard-btn{
width: 7.87rem;
height: 2.25rem;
background: #FFFFFF;
border-radius: 6.25rem;
background: none;
display: flex;
align-items: center;
justify-content: center;
margin-left: 1rem;
color: #999999;
img {
height: 1rem;
}
span {
margin-left: 0.18rem;
}
}
}
.userrccat{
width: 32%;
height: 34px;
background: #ffffff;
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 0;
font-size: 14px;
span {
margin-left: 3px;
}
img {
width: 24px;
height: 16px;
}
border: 2px solid #E2001A;
}
}
.userrccat{ .userrccat{
width: 32%; width: 32%;
height: 34px; height: 34px;
@ -93,48 +148,7 @@ ul li ol li em strong i {
height: 617px; height: 617px;
background: white; background: white;
z-index: 999; z-index: 999;
.rc-productcat {
display: flex;
align-items: center;
flex-wrap: nowrap;
.rc-cat {
width: 32%;
height: 34px;
background: #ffffff;
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 0;
font-size: 14px;
span {
margin-left: 3px;
}
img {
width: 24px;
height: 16px;
}
}
.userrccat{
width: 32%;
height: 34px;
background: #ffffff;
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 0;
font-size: 14px;
span {
margin-left: 3px;
}
img {
width: 24px;
height: 16px;
}
border: 2px solid #E2001A;
}
}
} }
@ -219,6 +233,7 @@ ul li ol li em strong i {
justify-content: center; justify-content: center;
font-size: .14rem; font-size: .14rem;
margin-right:.2rem; margin-right:.2rem;
margin-left: 16px;
span { span {
margin-left: 3px; margin-left: 3px;
} }
@ -303,6 +318,7 @@ ul li ol li em strong i {
//pc端 //pc端
@media screen and (min-width: 768px){ @media screen and (min-width: 768px){
.userrccat{ .userrccat{
width: 327px; width: 327px;
height: 48px; height: 48px;
@ -328,6 +344,7 @@ ul li ol li em strong i {
} }
.online{ .online{
width:100%; width:100%;
margin-top: 17px;
&.bold{ &.bold{
height:0.5rem; height:0.5rem;
margin-top: 5rem; margin-top: 5rem;
@ -379,6 +396,12 @@ ul li ol li em strong i {
.rc-bottom{ .rc-bottom{
.rc-productcat { .rc-productcat {
ol{
display: flex;
align-items: center;
flex-flow: row;
}
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -485,7 +508,7 @@ border-radius: 30px;
margin-left: 16px; margin-left: 16px;
} }
span { span {
margin-left: 0px; margin-left: 4px;
} }
img { img {
width: 24px; width: 24px;
@ -542,18 +565,38 @@ border-radius: 30px;
} }
*/ */
.ts-scrollable-container{ .ts-scrollable-container{
overflow-y: hidden;
overflow-x: clip;
width: 100%; width: 100%;
margin-top: 18px;
h2{ h2{
display: flex; display: flex;
align-items: center; align-items: center;
width: 4%; width: 4%;
} }
.ts-scrollable{ .ts-scrollable{
overflow-y: hidden;
overflow-x: clip;
width: 100%; width: 100%;
ol{
display: flex;
align-items: center;
}
.ts-standard-btn{
width: 237px;
height: 48px;
background: #FFFFFF;
border-radius: 30px;
background: none;
display: flex;
align-items: center;
justify-content: center;
margin-left: 40px;
img {
width: 24px;
height: 24px;
}
span {
margin-left: 8px;
}
}
} }
} }

View File

@ -14,15 +14,6 @@ ul li ol li em strong i {
position: relative; position: relative;
margin-top: 5.25rem; margin-top: 5.25rem;
.usersearch {
width: 100%;
margin: 0 auto;
overflow: hidden;
margin-top: 20px;
.rc-padding--md{
padding: 0;
}
}
.active{ .active{
border: 2px solid #E2001A; border: 2px solid #E2001A;
color: #E2001A; color: #E2001A;
@ -38,6 +29,22 @@ ul li ol li em strong i {
} }
//手机端 //手机端
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.usersearch {
width: 100%;
margin: 0 auto;
overflow: hidden;
margin-top: 20px;
.ts-scrollable-container{
h2{
font-weight: bold;
color: #333333;
}
}
.rc-padding--md{
padding: 0;
}
}
.rc-button .rc-button
{ {
display: flex; display: flex;
@ -47,6 +54,9 @@ ul li ol li em strong i {
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;
span span
{ {
width: 160px; width: 160px;
@ -129,8 +139,9 @@ strong{
color: #333333; color: #333333;
margin-top: 1.5rem; margin-top: 1.5rem;
h2{ h2{
font-size: 18px; font-size: 16px;
font-weight: bold; font-weight: bold;
color: #333333;
} }
span { span {
font-size: 14px; font-size: 14px;
@ -168,6 +179,9 @@ strong{
// 我想搜 // 我想搜
.usercontentshow{ .usercontentshow{
position: relative; position: relative;
.rc-column{
padding-bottom: 0;
}
.rc-productcat { .rc-productcat {
display: flex; display: flex;
align-items: center; align-items: center;
@ -189,13 +203,15 @@ justify-content: center;
margin-left: 1rem; margin-left: 1rem;
color: #999999; color: #999999;
img { img {
width: 1.5rem;
height: 1rem; height: 1rem;
} }
span { span {
margin-left: 0.18rem; margin-left: 0.18rem;
} }
} }
li:first-child{
margin-left: 0;
}
} }
//筛选 //筛选
.userselect{ .userselect{
@ -220,7 +236,7 @@ margin-left: 0.18rem;
} }
.ts-scrollable-container{ .ts-scrollable-container{
margin-top: 0.93rem; margin-top: 1rem;
} }
} }
@ -236,6 +252,7 @@ margin-left: 0.18rem;
} }
h2{ h2{
margin-left: 0; margin-left: 0;
font-weight: bold;
} }
} }
@ -275,22 +292,10 @@ border-radius: 100px;
.rc-bottom{ .rc-bottom{
position: fixed; position: fixed;
background: white; background: white;
height: 617px;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 9; z-index: 9;
ol li{
background: none;
width: 7.87rem;
height: 2.25rem;
background: #FFFFFF;
border-radius: 6.25rem;
background: none;
display: flex;
align-items: center;
justify-content: center;
margin-left: 1rem;
}
} }
.rc-bottoma{ .rc-bottoma{
@ -376,7 +381,25 @@ border-radius: 100px;
} }
//pc端 //pc端
@media screen and (min-width: 768px){ @media screen and (min-width: 768px){
.usersearch {
width: 100%;
margin: 0 auto;
overflow: hidden;
margin-top: 40px;
.ts-scrollable-container{
h2{
font-weight: bold;
color: #333333;
}
}
.rc-padding--md{
padding: 0;
}
}
.online{
margin-top: 47px;
}
/deep/.el-dialog__header { /deep/.el-dialog__header {
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -392,6 +415,7 @@ border-radius: 100px;
display: flex; display: flex;
align-items: center; align-items: center;
width: 6%; width: 6%;
color: #333333;
} }
.ts-scrollable{ .ts-scrollable{
// overflow-y: hidden; // overflow-y: hidden;
@ -501,9 +525,10 @@ margin-left: 8px;
color: #333333; color: #333333;
margin-top: 12px; margin-top: 12px;
h2 { h2 {
font-size: 18px; font-size: 26px;
font-weight: bold;
color: #333333; color: #333333;
margin-left: 12px; margin: 0;
} }
span { span {
font-size: 14px; font-size: 14px;
@ -597,13 +622,16 @@ border-radius: 30px;
/deep/.van-search__content--square{ /deep/.van-search__content--square{
background: white; background: white;
} }
/deep/.van-search{
padding-left: 0;
}
.van-search__content--square{ .van-search__content--square{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: white; background: white;
border: 1px solid #D7D7D7; border: 1px solid #D7D7D7;
height: 80px; height: 50px;
width: 1200px; width: 1200px;
border-radius: 200px; border-radius: 200px;
} }
@ -648,9 +676,11 @@ border-radius: 30px;
} }
.rc-product { .rc-product {
h2 { h2 {
font-size: 18px; font-size: 26px;
font-weight: bold;
color: #333333; color: #333333;
margin-left: 12px; margin: 0;
} }
} }
.rc-productcat { .rc-productcat {

View File

@ -11,17 +11,19 @@
<div class="usercontentshow" ref="usercontent"> <div class="usercontentshow" ref="usercontent">
<div class="rc-product ts-scrollable-container"> <div class="rc-product ts-scrollable-container">
<div class="rc-productcat ts-scrollable"> <div class="rc-productcat ts-scrollable">
<div <ol>
class="rc-cat" <li
v-for="(item, index) in userproduct" v-for="(item, index) in userproduct"
:key="index" :key="index"
ref="userclicks"
@click="selectGoods(item, index)" @click="selectGoods(item, index)"
:class="activeIndex == index ? 'active' : 'unactive'" :class="activeIndex == index ? 'active' : 'unactive'"
class="ts-standard-btn"
ref="userstandard"
> >
<img :src="item.catimage" alt="" /> <img :src="item.catimage" alt="" />
<span>{{ item.title }}</span> <span>{{ item.title }}</span>
</div> </li>
</ol>
</div> </div>
</div> </div>
<div class="online rc-md-up"></div> <div class="online rc-md-up"></div>
@ -297,11 +299,13 @@
<em>确认</em> <em>确认</em>
</div> </div>
</el-dialog> </el-dialog>
<MyFooter></MyFooter>
</div> </div>
</template> </template>
<script> <script>
import Myheader from "~/components/header.vue"; import Myheader from "~/components/header.vue";
import MyFooter from '~/components/rc-footer.vue'
import { import {
userstype, userstype,
biaome, biaome,
@ -314,7 +318,7 @@ export default {
value: "", value: "",
isLoading: true, isLoading: true,
userstype: [], userstype: [],
activeIndex: "0", activeIndex: "-1",
allacindex: 0, allacindex: 0,
userishwo: true, userishwo: true,
userishwo1: true, userishwo1: true,
@ -504,16 +508,20 @@ export default {
}, },
components: { components: {
Myheader, Myheader,
MyFooter
}, },
mounted() { mounted() {
let stype = this.$route.query.stype; let stype = this.$route.query.stype;
this.$nextTick(() => {
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) {
@ -743,6 +751,9 @@ export default {
this.activeIndexa = index; this.activeIndexa = index;
}, },
selectage(item, index) { selectage(item, index) {
if(this.activeIndex=='-1'){
this.activeIndex=0;
}
let tagUsedAge = {}; let tagUsedAge = {};
this.activeIndexc = index; this.activeIndexc = index;
this.userishwo1 = !this.userishwo1; this.userishwo1 = !this.userishwo1;
@ -766,6 +777,9 @@ export default {
}, },
selectagc(item, index) { selectagc(item, index) {
// let tagFunction = {}; // let tagFunction = {};
if(this.activeIndex=='-1'){
this.activeIndex=0;
}
this.activeIndexd = index; this.activeIndexd = index;
this.userishwo2 = !this.userishwo2; this.userishwo2 = !this.userishwo2;
if (item.checked == false) { if (item.checked == false) {
@ -796,6 +810,9 @@ export default {
this.usersearch(this.userserachlist, this.activeIndex1); this.usersearch(this.userserachlist, this.activeIndex1);
}, },
selectagd(item, index) { selectagd(item, index) {
if(this.activeIndex=='-1'){
this.activeIndex=0;
}
let tagBreed = {}; let tagBreed = {};
this.activeIndexe = index; this.activeIndexe = index;
this.userishwo3 = !this.userishwo3; this.userishwo3 = !this.userishwo3;
@ -818,6 +835,9 @@ export default {
this.usersearch(this.userserachlist, this.activeIndex1); this.usersearch(this.userserachlist, this.activeIndex1);
}, },
selectproduct(item, index) { selectproduct(item, index) {
if(this.activeIndex=='-1'){
this.activeIndex=0;
}
this.activeIndexb = index; this.activeIndexb = index;
// console.log(this.userishwo=!this.userishwo) // console.log(this.userishwo=!this.userishwo)
if (item.checked == false) { if (item.checked == false) {

View File

@ -1,81 +1,137 @@
<template> <template>
<van-address-edit <div>
:area-list="areaList" <Myheader></Myheader>
show-postal <div class="rc-top"></div>
show-delete <div class="usercontend">
show-set-default <div class="rc-max-width--xl">
show-search-result <h2>新增收货地址</h2>
:search-result="searchResult" <div class="rc-max-width--xl rc-people">
:area-columns-placeholder="['请选择', '请选择', '请选择']" <span>收货人:</span>
@save="onSave" <input type="text" placeholder="请输入收货人姓名">
@delete="onDelete" </div>
@change-detail="onChangeDetail" <div class="rc-max-width--xl rc-phone">
/> <span>手机号码:</span>
<input type="text" placeholder="请输入11位手机号码">
</div>
<div class="rc-max-width--xl rc-address">
<span>所在地区:</span>
<input type="text" placeholder="请选择所在地区">
</div>
<div class="rc-max-width--xl rc-useaddress">
<span>详细地址:</span>
<input type="text" placeholder="小区、门牌号等" class="userinput">
<textarea rows="10" cols="30" placeholder="请输入详细地址">
</textarea>
</div>
</div>
<div class="rc-button">
<span @click="openclose()">取消</span>
<em @click="openclose()">确认</em>
</div>
</div>
<!-- <div class="rc-button">
<div class="rc-footbutton" @click="onAdd()">
<span>新增收货地址</span>
</div>
</div> -->
<MyFooter></MyFooter>
</div>
</template> </template>
<script> <script>
import { editaddress } from "../../ajax/getData";
import { Toast } from 'vant'; import Myheader from '~/components/header.vue'
import { areaList } from '@vant/area-data'; import MyFooter from '~/components/rc-footer.vue'
export default { export default {
data() { data() {
return { return {
areaList, chosenAddressId: "1",
searchResult: [], checked: true,
userid: null, userid: null,
addressdetail:'', usermessage:null,
} list: [
{
id: 1,
name: "张三",
tel: "13000000000",
address: "浙江省杭州市西湖区文三路 138 号",
isDefault: true,
},
{
id: 2,
name: "李四",
tel: "1310000000",
address: "浙江省杭州市拱墅区莫干山路 50 号",
},
{
id: 3,
name: "李四",
tel: "1310000000",
address: "浙江省杭州市拱墅区莫干山路 50 号",
},
],
};
}, },
methods: { methods: {
async onSave(content) { onEdit(item, index) {
// Toast('save'); // let userid = item.id;
console.log(content); console.log(item);
let recipient=content.name; this.$router.push({
let tel=content.tel; path: "/useraddress/editaddress",
let provinceId=Number(content.areaCode.substring(0,2)+'0000')//id query: {
let cityId=Number(content.areaCode.substring(0,4)+'00') //id id: item,
let districtId=Number(content.areaCode);// },
console.log(provinceId,cityId,districtId);
console.log(content.areaCode.substring(0,2)+'0000');//
console.log(content.areaCode.substring(0,4)+'00'); //id
console.log(content.areaCode) //
//id / id/id/
let data = await editaddress(this.userid,this.addressdetail,recipient,tel,provinceId,cityId,districtId);
if(data){
this.$message({
type: 'warning',
message: '地址保存成功'
}); });
}
console.log(data);
}, },
onDelete() { onAdd(item, index) {
// let userid = item.id;
Toast('delete'); // console.log(item);
this.$router.push({
path: "/useraddress/addaddress",
// query: {
// id: userid,
// },
});
}, },
onChangeDetail(val){
this.addressdetail=val;
}
}, //
mounted(){ // async userdelete(item) {
let user= JSON.parse(localStorage.getItem("userInfo")); // console.log(item.memberId);
// this.userid=user.data.id; // let data = await editdelete(this.userid, item.id);
this.userid=3242 // this.editaddress(this.usermessage);
// console.log(data);
// },
//
// async editaddress(user) {
// user.data.id=844350
// let data = await selectaddress(user.data.id);
// this.list=data.data;
// console.log(this.list);
// console.log(data);
// },
}, },
components: { components: {
Myheader,
MyFooter
}, },
mounted() {
} //
// this.usermessage = JSON.parse(localStorage.getItem("userInfo"));
// this.editaddress(this.usermessage);
// this.userid = this.usermessage.data.id;
},
};
</script> </script>
<style> <style lang="less" scoped >
@import url("../../assets/css/global.less");
@import url("../../assets/css/addaddress.less");
</style> </style>

View File

@ -1,99 +1,131 @@
<template> <template>
<van-address-edit <div>
:area-list="areaList" <Myheader></Myheader>
show-postal <div class="rc-top"></div>
show-set-default
show-search-result
:search-result="searchResult"
:address-info="AddressInfo"
:area-columns-placeholder="['请选择', '请选择', '请选择']"
@save="onSave"
@change-detail="onChangeDetail"
>
<!-- <div class="main">
<span>我的</span>
<div class="rc-max-width--xl rc-main">
<div class="rc-max-width--xl rc-people">
<span>收货人:</span>
<input type="text" placeholder="李某某">
</div>
<div class="rc-max-width--xl rc-phone">
<span>手机号码:</span>
<input type="text" placeholder="15279944631">
</div>
<div class="rc-max-width--xl rc-address">
<span>所在地区:</span>
<input type="text" placeholder="请选择所在地区">
</div>
<div class="rc-max-width--xl rc-useaddress">
<span>详细地址:</span>
<input type="text" placeholder="天河客运站">
</div>
</div>
<!-- <div class="rc-button">
<div class="rc-footbutton" @click="onAdd()">
<span>新增收货地址</span>
</div>
</div> --> </div> -->
<div class="rc-button">
<span @click="openclose()">取消</span>
<em @click="openclose()">确认</em>
</div>
<!-- <MyFooter></MyFooter> -->
</van-address-edit> </div>
</template> </template>
<script> <script>
import { Toast } from 'vant';
import { areaList } from '@vant/area-data'; import Myheader from '~/components/header.vue'
import { editupdate } from "../../ajax/getData"; import MyFooter from '~/components/rc-footer.vue'
export default { export default {
data() { data() {
return { return {
areaList, chosenAddressId: "1",
searchResult: [], checked: true,
AddressInfo:{// userid: null,
name:'',// usermessage:null,
tel:'',// list: [
province:'',// {
city:'',// id: 1,
country:'',// name: "张三",
address:'', tel: "13000000000",
areaCode:'',//codeID address: "浙江省杭州市西湖区文三路 138 号",
addressDetail:'',// isDefault: true,
isDefault:false,//
}, },
{
} id: 2,
name: "李四",
tel: "1310000000",
address: "浙江省杭州市拱墅区莫干山路 50 号",
},
{
id: 3,
name: "李四",
tel: "1310000000",
address: "浙江省杭州市拱墅区莫干山路 50 号",
},
],
};
}, },
methods: { methods: {
onEdit(item, index) {
// let userid = item.id;
console.log(item);
this.$router.push({
path: "/useraddress/editaddress",
query: {
id: item,
},
});
},
onAdd(item, index) {
// let userid = item.id;
// console.log(item);
this.$router.push({
path: "/useraddress/addaddress",
// query: {
// id: userid,
// },
});
},
valf(){
setTimeout(()=>{
let s=this.$route.query.id;
console.log(s);
this.AddressInfo.name= s.recipient,
this.AddressInfo.tel=s.recipientPhone,
this.AddressInfo.province=s.name
this.AddressInfo.city=s.name
this.AddressInfo.addressDetail=s.detailAddress
this.AddressInfo.isDefault=s.isDefault,
this.AddressInfo.country='江西省'
this.AddressInfo.address='江西省'
},100)
},
async onSave(content) {
let data = await editupdate(this.tel);
console.log(data);
console.log(content);
// Toast('save');
console.log(content.areaCode.substring(0,2)+'0000');//
console.log(content.areaCode.substring(0,4)+'00'); //id
console.log(content.areaCode) //
}, //
onDelete() { // async userdelete(item) {
Toast('delete'); // console.log(item.memberId);
}, // let data = await editdelete(this.userid, item.id);
onChangeDetail(val){ // this.editaddress(this.usermessage);
// console.log(data);
// },
console.log(this.searchResult); //
console.log(val); // async editaddress(user) {
} // user.data.id=844350
}, // let data = await selectaddress(user.data.id);
mounted(){ // this.list=data.data;
this.valf(); // console.log(this.list);
this.searchResult = [ // console.log(data);
{ // },
name: '黄龙万科中心',
address: '杭州市西湖区',
},
];
}, },
components: { components: {
Myheader,
MyFooter,
}, },
mounted() {
} //
// this.usermessage = JSON.parse(localStorage.getItem("userInfo"));
// this.editaddress(this.usermessage);
// this.userid = this.usermessage.data.id;
},
};
</script> </script>
<style> <style lang="less" scoped >
@import url("../../assets/css/global.less");
@import url("../../assets/css/editaddress.less");
</style> </style>

View File

@ -4,24 +4,24 @@
<div class="usermain"> <div class="usermain">
<div class="rc-main" v-for="(item, index) in list" :key="index"> <div class="rc-main" v-for="(item, index) in list" :key="index">
<div class="rc-center"> <div class="rc-center">
<div class="rc-header"> <div class=" rc-title">
<em> <em>
{{ item.recipient }} {{ item.name }}
</em> </em>
<span> <span>
{{ item.recipientPhone }} {{ item.tel }}
</span> </span>
</div> </div>
<div class="rc-address"> <div class="rc-address">
<span> <span>
{{ item.detailAddress }} {{ item.address }}
</span> </span>
</div> </div>
<div class="rc-footer"> <div class="rc-footer">
<div class="rc-foot"> <div class="rc-foot">
<img src="../../assets/image/userselect.png" alt="">
<span>设置为默认收货地址</span> <span>设置为默认收货地址</span>
<!-- <van-switch v-model="checked" /> -->
</div> </div>
<div class="rc-right"> <div class="rc-right">
<span @click="onEdit(item, index)">编辑</span> <span @click="onEdit(item, index)">编辑</span>
@ -79,13 +79,8 @@ export default {
}; };
}, },
methods: { methods: {
onAdd() {
Toast("新增地址");
this.$router.push({ path: "/useraddress/addaddress" });
},
onEdit(item, index) { onEdit(item, index) {
let userid = item.id; // let userid = item.id;
console.log(item); console.log(item);
this.$router.push({ this.$router.push({
path: "/useraddress/editaddress", path: "/useraddress/editaddress",
@ -94,22 +89,35 @@ export default {
}, },
}); });
}, },
// onAdd(item, index) {
async userdelete(item) { // let userid = item.id;
console.log(item.memberId); // console.log(item);
let data = await editdelete(this.userid, item.id); this.$router.push({
this.editaddress(this.usermessage); path: "/useraddress/addaddress",
console.log(data); // query: {
// id: userid,
// },
});
}, },
//
// async userdelete(item) {
// console.log(item.memberId);
// let data = await editdelete(this.userid, item.id);
// this.editaddress(this.usermessage);
// console.log(data);
// },
// //
async editaddress(user) { // async editaddress(user) {
user.data.id=844350 // user.data.id=844350
let data = await selectaddress(user.data.id); // let data = await selectaddress(user.data.id);
this.list=data.data; // this.list=data.data;
console.log(this.list); // console.log(this.list);
console.log(data); // console.log(data);
}, // },
}, },
components: { components: {
Myheader, Myheader,
@ -117,178 +125,14 @@ export default {
mounted() { mounted() {
// //
this.usermessage = JSON.parse(localStorage.getItem("userInfo")); // this.usermessage = JSON.parse(localStorage.getItem("userInfo"));
this.editaddress(this.usermessage); // this.editaddress(this.usermessage);
this.userid = this.usermessage.data.id; // this.userid = this.usermessage.data.id;
}, },
}; };
</script> </script>
<style lang="less" scoped > <style lang="less" scoped >
.rc-main { @import url("../../assets/css/global.less");
width: 93%; @import url("../../assets/css/openaddress.less");
margin: 0 auto;
margin-top: 8px;
}
//
@media screen and(min-width: 320px) and(max-width:768px) {
.rc-button {
height: 80px;
background: #ffffff;
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
opacity: 1;
display: flex;
align-items: center;
justify-content: center;
.rc-footbutton {
width: 164px;
height: 48px;
border: 2px solid #e2001a;
opacity: 1;
border-radius: 30px;
display: flex;
align-items: center;
background: #e2001a;
span {
display: block;
text-align: center;
color: white;
font-size: 16px;
width: 100%;
}
}
}
.rc-header {
display: flex;
align-items: center;
color: #333333;
em {
font-style: normal;
font-size: 14px;
}
span {
display: block;
margin-left: 8px;
}
}
.rc-address {
margin-top: 8px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 14px;
color: #333333;
}
.rc-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 20px;
margin-top: 8px;
.rc-right {
span {
border-bottom: 1px solid #666666;
}
span:first-child {
margin-right: 16px;
}
}
}
}
//pc
@media screen and (min-width: 768px) and (max-width: 1920px) {
.usermain{
width: 90%;
margin: 0 auto;
}
.rc-main{
width: 45%;
height: 164px;
margin-top: 60px;
background: #FFFFFF;
border: 1px solid #D7D7D7;
opacity: 1;
border-radius: 3px;
margin-left: 40px;
float: left;
.rc-center{
margin-top: 24px;
margin-left: 24px;
}
}
.rc-button {
height: 80px;
background: #ffffff;
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
opacity: 1;
display: flex;
align-items: center;
justify-content: center;
display: block;
.rc-footbutton {
width: 164px;
height: 48px;
border: 2px solid #e2001a;
opacity: 1;
border-radius: 30px;
display: flex;
align-items: center;
background: #e2001a;
span {
display: block;
text-align: center;
color: white;
font-size: 16px;
width: 100%;
}
}
}
.rc-header {
display: flex;
align-items: center;
color: #333333;
em {
font-style: normal;
font-size: 14px;
}
span {
display: block;
margin-left: 8px;
}
}
.rc-address {
margin-top: 8px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 14px;
color: #333333;
}
.rc-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 20px;
margin-top: 8px;
.rc-right {
span {
border-bottom: 1px solid #666666;
}
span:first-child {
margin-right: 16px;
}
}
}
}
</style> </style>

View File

@ -34,7 +34,7 @@
v-for="(item, index) in searchdata" v-for="(item, index) in searchdata"
:key="index" :key="index"
@click="selectsearch(item, index)" @click="selectsearch(item, index)"
:class="activeIndexa == index ? 'active' : 'unactive'" :class="activeIndexa == index"
> >
{{ item.title }} {{ item.title }}
</li> </li>
@ -218,6 +218,9 @@
{{ item.tagName }} {{ item.tagName }}
</li> </li>
</ol> </ol>
</div>
</div>
</div> </div>
<div class="rc-button"> <div class="rc-button">
<span @click="openclose()">取消</span> <span @click="openclose()">取消</span>
@ -225,8 +228,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<el-dialog :visible.sync="dialogInfo1" hegight="700px" v-if="!isadrond"> <el-dialog :visible.sync="dialogInfo1" hegight="700px" v-if="!isadrond">
<div class="usersearch"> <div class="usersearch">
<div class="usercontentshow" ref="usercontent"> <div class="usercontentshow" ref="usercontent">
@ -312,11 +313,13 @@
</el-dialog> </el-dialog>
</div> </div>
<!-- rc-main end --> <!-- rc-main end -->
<MyFooter></MyFooter>
</div> </div>
</template> </template>
<script> <script>
import Myheader from "~/components/header.vue"; import Myheader from "~/components/header.vue";
import MyFooter from '~/components/rc-footer.vue'
import { biaome, userstype, searchchanpin } from "../../ajax/getData"; import { biaome, userstype, searchchanpin } from "../../ajax/getData";
export default { export default {
data() { data() {
@ -520,6 +523,7 @@ export default {
}, },
components: { components: {
Myheader, Myheader,
MyFooter
}, },
mounted() { mounted() {
this.usetmessage(); this.usetmessage();
@ -595,9 +599,13 @@ export default {
if (element.name == "品种") { if (element.name == "品种") {
pinzhong.push(element); pinzhong.push(element);
this.catageb = pinzhong; this.catageb = pinzhong;
this.catageb=this.catageb.sort((n1,n2)=>{
return n1.sort-n2.sort;
})
this.catageb.forEach((element) => { this.catageb.forEach((element) => {
element.checked = false; element.checked = false;
}); });
// console.log(this.catageb);
} }
if (element.name == "功能") { if (element.name == "功能") {
gonneg.push(element); gonneg.push(element);
@ -605,6 +613,7 @@ export default {
this.catagea.forEach((element) => { this.catagea.forEach((element) => {
element.checked = false; element.checked = false;
}); });
console.log(this.catagea);
} }
if (element.name == "年龄") { if (element.name == "年龄") {
age.push(element); age.push(element);
@ -831,6 +840,9 @@ export default {
this.usetmessage(item.title); this.usetmessage(item.title);
}, },
selectage(item, index) { selectage(item, index) {
if(this.activeIndex=='-1'){
this.activeIndex=0;
}
// debugger; // debugger;
// this.userishwo1 = !this.userishwo1; // this.userishwo1 = !this.userishwo1;
let tagUsedAge = {}; let tagUsedAge = {};
@ -863,6 +875,9 @@ export default {
this.activeIndexc = index; this.activeIndexc = index;
}, },
selectagc(item, index) { selectagc(item, index) {
if(this.activeIndex=='-1'){
this.activeIndex=0;
}
// let tagFunction = { // let tagFunction = {
// petType: this.activeIndex1, // petType: this.activeIndex1,
// tagFunction: item.tagName, // tagFunction: item.tagName,
@ -886,6 +901,9 @@ export default {
this.activeIndexd = index; this.activeIndexd = index;
}, },
selectagd(item, index) { selectagd(item, index) {
if(this.activeIndex=='-1'){
this.activeIndex=0;
}
let tagBreed = {}; let tagBreed = {};
if (item.checked == false) { if (item.checked == false) {
item.checked = true; item.checked = true;
@ -916,6 +934,10 @@ export default {
}, },
selectproduct(item, index) { selectproduct(item, index) {
this.activeIndexb = index; this.activeIndexb = index;
console.log(this.activeIndex);
if(this.activeIndex=='-1'){
this.activeIndex=0;
}
if (item.checked == false) { if (item.checked == false) {
item.checked = true; item.checked = true;
this.$refs.chosebox[index].className = "active"; this.$refs.chosebox[index].className = "active";