对一个列表进行操作（一个地址或者多个地址，默认以及选中状态的改变）

情况：

1.在地址栏中，我们填写完一个地址之后，会有以下集中情况

整个列表中，只有我们刚输入的一个列表的时候，我们给出的这个为默认地址
整个列表中，如果我们输入的多个地址中，都没有设置为默认地址，则使第一个输入的为默认地址，或者最后输入的一个为默认地址
整个列表中，如果我们设置了多个默认地址中，那么我们会默认为最设置的这条地址为默认地址
整个列表中，我们需要根据不同的情况来选择地址的时候，我们会通过一些方式（点击事件）来达到我们需要的选中的列表中的某一个地址

输入框输入的类容：

<el-radio v-model="logisticsSelectId" :label="item.id" >

</span>

<img

src="../../assets/image/address/close.png"

alt

class="icon"

@click="delAddress(item.id,index)"

<img

src="../../assets/image/address/edit.png"

alt

class="icon"

@click="editAddress(item.id,index)"

</div>

</p>

<p class="word">Whether to confirm deletion</p>

<span @click="canaelRemove()">Cancel</span>

</p>

</div>

</div>

</el-radio>

<p style="margin-left:15px;word-break:break-all;height:auto;zoom:1;display:block;float:left;width:850px"><span v-if="item.backupAddress">{{item.backupAddress}},</span>{{item.address}},{{item.city}},{{item.province}},{{item.countryNumber}}</p>

</div>

</p>

<p>

</p>

</div>

<div v-if="addressList.length>=1" :class="{showaddBtn:ishowaddBtn}">

<p @click="recoPersonAddresss" class="addPersonBtn">Add the address</p>

</div>

<div class="personAddress"

:close-on-click-modal="false"

@close="cancle"

:title="title"

width="800px"

size="mini"

:class="{showRecoPersonAddresss:isShowRecoPersonAddresss}"

<el-form

:model="form"

:rules="rules"

ref="form"

label-width="130px"

show-close="false"

label-position="top"

:inline="true"

class="demo-form-inline"

<el-form-item label="Name" prop="name" class="formName">

<el-input v-model="form.name" placeholder clearable @input="getInputValue" maxlength="60" ></el-input>

<p class="messageTips" :class="{nameTips:isNameTips}">Please enter the consignee's name</p>

</el-form-item>

<el-form-item label="Company" prop="companyName" class="formCompany">

<el-input v-model="form.companyName" clearable @input="getInputValue" maxlength="30"></el-input>

<p class="messageTips" :class="{CompanyTips:isCompanyTips}">Please select your country</p>

</el-form-item>

<el-form-item label="Country/Region" prop="countryNumber" :rules="rules.countryNumber" class="formCountry">

<el-select v-model="form.countryNumber" @change="changeCountry" filterable placeholder="" @input="getInputValue" >

<el-option

v-for="(item,index) in countryList"

:key="index"

:label="item.number"

:value="item.number">

</el-option>

</el-select>

<p class="messageTips" :class="{countryNumberTips:iscountryNumberTips}">Please enter your Company</p>

</el-form-item>

<el-form-item label="Province/State/District" prop="province" class="line2 formProvince">

<el-input v-model="form.province" clearable @input="getInputValue" maxlength="30"></el-input>

<p class="messageTips" :class="{provinceTips:isprovinceTips}">Please enter your province</p>

</el-form-item>

<el-form-item label="City" prop="city" class="line2 formCity">

<el-input v-model="form.city" clearable @input="getInputValue" maxlength="30"></el-input>

<p class="messageTips" :class="{cityTips:iscityTips}">Please enter your city</p>

</el-form-item>

<el-form-item label="Address1" prop="address" class="formAddress1">

<el-input v-model="form.address" clearable @input="getInputValue" maxlength="100"></el-input>

<p class="messageTips" :class="{addressTips:isaddressTips}">Please enter your address</p>

</el-form-item>

<el-form-item label="Address2" prop="backupAddress" class="formAddress2">

<el-input v-model="form.backupAddress" clearable @input="getInputValue" maxlength="100" ></el-input>

</el-form-item>

<el-form-item label="Telephone number" prop="phoneNumber" class="formPhone">

<el-input v-model="form.phoneNumber" clearable @input="getInputValue" maxlength="15"></el-input>

<p class="messageTips" :class="{phoneNumberTips:isphoneNumberTips}">Please enter your telephone number</p>

</el-form-item>

<el-form-item label="Postcode" prop="zipCode" class="formZipCode" >

<el-input v-model="form.zipCode" clearable @input="getInputValue" maxlength="10" ></el-input>

<p class="messageTips" :class="{zipCodeTips:iszipCodeTips}">Please enter the consignee's name</p>

</el-form-item>

<el-form-item label-width="0" style="margin-top:-15px;" class="defaultCode">

<el-checkbox v-model="form.defaultFlag"> Set as the default address</el-checkbox>

</el-form-item>

</el-form>

<el-button type="primary" @click="submitForm('form')" :class="{showBtn:ishowBtn}" :disabled="ishowBtn?false:true">{{btnValue}}</el-button>

<el-button class="cancelBtn" @click="cancle('form')">cancel</el-button>

</div>

</template>

页面数据解析：

el-radio 标签中包裹的是，我们填写完成之后显示的数据，也就是所说的成品数据（成品地址，同时也是支持编辑和删除的）
:class="{AddressList:isAddressList}" 是一个判断，默认值为false，目的就是在没有地址的情况下，此列表不显示，再有一条或者多条数据的时候显示（判断根据自己的实际情况而定）
v-for="(item,index) in addressList" :key="item.id" :class="{addressActive: isList[index],allbreakBorder:item.isAllBreakBorder}" @click.stop="showTimeActive(item,index)" for循环是循环里面有的地址信息，：key=item.id是给出一个唯一的标识，:class="" 绑定多个样式，isList[index]是拿到对应下标，独立给其添加一个样式，这个会结合 @click.stop="showTimeActive(item,index)"使用，使用的环境是，我们在多条数据中，想让某一条数据成为默认地址，我们需要先循环出来，清除所有的样式，然后进单独的添加一条样式。
allbreakBorder是设置的默认样式，而addressActive是点击之后设置的样式，在上一条中说了，清除样式的时候就是我们清除的isAllBreakBorder样式，单独添加的样式就是isList[index]样式（需要对应其数据）
@input 之前的博客中有记录过，是针对必要的输入框中是否有数据进行判断的，这个是根据自己的情况而定，个人采用的是@input
@change是下拉列表的选择，根据不同的数据进行监听，而改变其数据

数据：（以下需要的数据请自动选取）

import {

addAddress,

updateAddress,

getAddressInfo,

getAddressList,

deleteAddress

} from "@/api/user/index";

import countryMixin from "@/mixins/country";

export default {

mixins: [countryMixin],

data() {

return {

// dialogShow: true,

logisticsSelectId: "",

btnValue:"New Shipping Address",

newaddress:"设为默认",

isList:false,

activeshow:false,

isremoved:false,

ishowBtn:false,

isAddressList:false,

isShowRecoPersonAddresss:false,

isAllBreakBorder:false,

isNameTips:false,

isCompanyTips:false,

iscountryNumberTips:false,

isprovinceTips:false,

iscityTips:false,

isaddressTips:false,

isphoneNumberTips:false,

iszipCodeTips:false,

ishowaddBtn:false,

nodeDisabled:"",

removeId:"",

removeIndex:"",

form: {},

rules: {

zipCode: [

{

required: true,

message: "Please enter your postcode",

crigger: ["change", "blur"]

}

]

countryList: [],

addressList: [],

title: "",

addressId: "",

addressEditIndex:0

};

created() {

//页面加载的时候进行判断，页面是否有数据显示，该怎么显示，显示那些数据

this.getAddressList();

//判断数据是否为空，进行数据显示和隐藏（有简单的写法）

if(this.addressList == ''){

this.isShowRecoPersonAddresss = false;

}else{

this.isShowRecoPersonAddresss = true;

}

// 判断添加按钮的显示与隐藏

if(this.ishowaddBtn == true){

this.isShowRecoPersonAddresss =true;

}else{

this.isShowRecoPersonAddresss =false;

}

wadth(){

methods: {

// 获取地址栏列表的数据

getAddressList() {

getAddressList().then(res => {

res.data.forEach((item)=>{

　　　　//判断其是否是默认地址，defaultFlag是用来判断是否是默认地址的标识（根据个人数据情况而定）

if(item.defaultFlag){

this.logisticsSelectId=item.id;

this.$emit('defaultValueId',item); // 子向父传值（本页面显示可删除）

item.isAllBreakBorder = true; // 是默认地址则添加样式isAllBreakBorder

} else{

item.isAllBreakBorder = false; //不是则不添加

}

})

this.addressList = res.data; //获取请求来的数据，并进行接收

this.$emit('showAddressList',this.addressList); // 传值（本页面显示可删除）

if(this.addressList.length>=1){ //判断数据的长度

this.isShowRecoPersonAddresss =true;

}else if(this.addressList.length == 0){

this.isShowRecoPersonAddresss =false;

this.isAddressList = true;

}else{

}

//默认地址（传出默认地址的值）

});

　　//监听确认按钮的值，并进行对应操作

handleAdd() {

this.addressId=''

this.addressEditIndex=0

this.title = "Add shipping address";

this.dialogShow = true;

this.form = {};

this.form.defaultFlag=false;

this.$nextTick(() => {

this.$refs['form'].clearValidate();

});

//编辑，在编辑状态下改变确认按钮的值，并把对应的值吗，传入数据中，同时，在点击保存的时候，也要把对应的值传回列表中

editAddress(id,index) {

this.isShowRecoPersonAddresss = false;

if(this.btnValue = "New Shipping Address"){

this.btnValue="confirm";

}else{

}

this.title = "Modify shipping address";

this.addressId=id

this.addressEditIndex=index;

this.ishowBtn= true;

getAddressInfo(id).then(res => {

this.form = res.data;

});

this.dialogShow = true;

this.$nextTick(() => {

this.$refs['form'].clearValidate();

});

//个人信息添加栏

recoPersonAddresss(){

this.isShowRecoPersonAddresss = false;

// 点击进行传值（传递选择的地址列表）

showTimeActive(item, index){

this.isList = [];

for(var i=0; i<this.addressList.length;i++){

this.addressList[i].defaultFlag = false;

this.addressList[i].isAllBreakBorder = false;

}

this.isList[index] = true;

item.defaultFlag =true;

this.$emit('parentlist',item);

delAddress(id, index) {

this.isremoved = true;

this.removeId=id,

this.removeIndex=index,

// 删除地址

removed(){

const that = this;

deleteAddress(this.removeId).then(res => {

if (res.code == 200) {

that.addressList.splice(this.removeIndex, 1);

that.$message.success("delete sucess");

this.isremoved =false;

}

});

if(this.addAddress){

this.isShowRecoPersonAddresss = true;

}else{

this.isShowRecoPersonAddresss=false;

}

if(this.addressList.length==0){

this.isAddressList = true;

}else{

this.isAddressList = false;

}

location.reload()

// 关闭删除地址弹框

canaelRemove(){

this.isremoved =false;

对输入框中的必要数据进行监听，是否都填写，否则给出提示，有简单的写法

getInputValue(){

if(this.form.name && this.form.companyName && this.form.countryNumber && this.form.province && this.form.city && this.form.address && this.form.phoneNumber && this.form.zipCode){

this.ishowBtn = true;

}else{

if(this.form.name){

this.isNameTips = false;

}

if(this.form.companyName){

this.isCompanyTips=false;

}

if(this.form.countryNumber){

this.iscountryNumberTips=false;

}

if(this.form.city){

this.iscityTips=false;

}

if(this.form.province){

this.isprovinceTips=false;

}

if(this.form.address){

this.isaddressTips=false;

}

if(this.form.phoneNumber){

this.isphoneNumberTips=false;

}

if(this.form.zipCode){

this.iszipCodeTips = false;

}

this.ishowBtn =false;

}

getInputcompanyVal(){

if(!this.form.name){

this.isNameTips = true;

}else{

this.isNameTips = false;

}

getCountryVal(){

if(!this.form.name){

this.isNameTips = true;

}

if(!this.form.companyName){

this.isCompanyTips=true;

}

getInputProviceVal(){

if(!this.form.name){

this.isNameTips = true;

}

if(!this.form.companyName){

this.isCompanyTips = true;

}

if(!this.form.countryNumber){

this.iscountryNumberTips = true;

}

getInputCityVal(){

if(!this.form.name){

this.isNameTips = true;

}

if(!this.form.companyName){

this.isCompanyTips = true;

}

if(!this.form.countryNumber){

this.iscountryNumberTips = true;

}

if(!this.form.province){

this.isprovinceTips= true;

}

getInputAddressVal(){

if(!this.form.name){

this.isNameTips = true;

}

if(!this.form.companyName){

this.isCompanyTips = true;

}

if(!this.form.countryNumber){

this.iscountryNumberTips = true;

}

if(!this.form.province){

this.isprovinceTips= true;

}

if(!this.form.city){

this.iscityTips=true;

}

getInputTelVal(){

if(!this.form.name){

this.isNameTips = true;

}

if(!this.form.companyName){

this.isCompanyTips = true;

}

if(!this.form.countryNumber){

this.iscountryNumberTips = true;

}

if(!this.form.province){

this.isprovinceTips= true;

}

if(!this.form.city){

this.iscityTips=true;

}

if(!this.form.address){

this.isaddressTips=true;

}

getInputPostVal(){

if(!this.form.name){

this.isNameTips = true;

}

if(!this.form.companyName){

this.isCompanyTips = true;

}

if(!this.form.countryNumber){

this.iscountryNumberTips = true;

}

if(!this.form.province){

this.isprovinceTips= true;

}

if(!this.form.city){

this.iscityTips=true;

}

if(!this.form.address){

this.isaddressTips=true;

}

if(!this.form.phoneNumber){

this.isphoneNumberTips=true;

}

nameVal(){

//提交

submitForm(formName) {

if(this.btnValue = "New Shipping Address"){

this.$refs[formName].validate(valid => {

if (valid) {

var form = JSON.parse(JSON.stringify(this.form));

if(this.addressList.length ==0 && !form.defaultFlag){

form.defaultFlag=true;

this.isAllBreakBorder = true;

}else if(this.addressList.length >=1 && form.defaultFlag){

for(var i=0;i<this.addressList.length;i++){

if(this.addressList[i].defaultFlag){

this.addressList[i].defaultFlag = false;

this.isAllBreakBorder = false;

}

}else if(this.addressList.length >=1 && !form.defaultFlag){

for(var i=0;i<this.addressList.length;i++){

if(this.addressList[i].defaultFlag){

this.addressList[i].defaultFlag = false;

this.isAllBreakBorder = false;

}else{

this.addressList[i].defaultFlag = false;

this.isAllBreakBorder = false;

}

if(!form.defaultFlag){

form.defaultFlag=false;

}else{

}

if (this.addressId) {

updateAddress(this.addressId,form).then(res => {

this.$message.success("save success");

this.dialogShow = false;

this.getAddressList()

this.$forceUpdate()

});

} else {

addAddress(form).then(res => {

this.$message.success("save success");

this.dialogShow = false;

this.getAddressList();

this.$forceUpdate()

});

}

this.ishowaddBtn = true;

} else {

}

});

if(this.ishowaddBtn == true){

this.isShowRecoPersonAddresss =true;

}

if(this.addressList.length==0){

this.isAddressList = false;

}

this.handleAdd();

}else{

}

location.reload();

canelRemoveTip(){

if(this.addressList.length>=1){

this.isShowRecoPersonAddresss = true;

}else{

this.isShowRecoPersonAddresss = false;

}

this.isremoved = false ;

cancle() {

this.$refs["form"].clearValidate();

this.$emit("close");

this.ishowBtn =false;

this.picType = "";

this.dialogShow = false;

this.form.name="";

this.form.companyName =''

this.form.countryNumber =''

this.form.province = ''

this.form.city =''

this.form.backupAddress =''

this.form.address =''

this.form.phoneNumber = ''

this.form.zipCode =''

if(this.addressList.length>0){

this.isShowRecoPersonAddresss=true;

}

};

</script>

样式: 对应的样式自取

.logisics-page {

.el-dialog__body {

padding: 10px 27px;

}

.el-form--inline .el-form-item {

margin-right: 23px;

margin-left: 0px;

.el-input__inner {

border: 1px solid rgba(81, 81, 81, 1);

}

.el-radio__label {

width: 100%;

display: inline-block;

padding-left: 5px;

}

.el-checkbox__input.is-checked+.el-checkbox__label{

color:#272727;

font-weight: 500;

}

.el-select{

width: 100%;

}

.el-form--inline.el-form--label-top .el-form-item__content{width: 100%; height: 40px; line-height: 40px;}

.el-form-item:nth-of-type(1) .el-form-item__content , .el-form-item:nth-of-type(2) .el-form-item__content{width:526px; }

.logisics-page .el-form--inline .el-form-item .el-input__inner{border:1px solid #E2E2E2;}

body .el-radio__input.is-checked .el-radio__inner{border-color:#D8511C !important ; background: #D8511C !important;}

.shopaddress-right .el-form-item:nth-of-type(6n) .el-form-item__content ,.el-form-item:nth-of-type(6n) .el-form-item__content .el-input__inner{width: 800px !important;}

body .el-form--label-top .el-form-item__label{ height: 24px; line-height: 24px;}

.address-list .el-radio .el-radio__input{ margin-left: 27px; margin-top: 15px;display: none; }

</style>

.logisics-page {

.no-address {

margin: 30px 0;

}

.address-list {

margin-bottom: 20px;

max-height:307px !important;

overflow-y:scroll ;

.address-item {

margin: 10px 0;

padding: 15px 25px;

height: auto;

zoom: 1;

overflow: hidden;

margin-right: 5px;

.el-radio {

display: flex;

flex-direction: row;

align-items: center;

margin-right: 0;

.el-radio__input {

display: flex;

justify-content: center;

align-items: center;

}

.name {

font-weight: 500;

color: #333;

line-height: 24px;

height: 24px;

width: 100%;

display: flex;

align-items: center;

justify-content: space-between;

.icon {

float: right;

margin-left: 20px;

cursor: pointer;

}

.name-block {

font-size: 18px;

font-weight: bold;

color: #3D3D3D;

}

.txt {

font-size: 12px;

font-weight: 300;

color: #999;

line-height: 2;

width:calc(100% - 20px);

// overflow: hidden;

// text-overflow: ellipsis;

// display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

// white-space: normal;

height: auto;

zoom: 1;

padding:0px 0px 15px 0px;

}

.add-btn {

color:#fff;

margin-top: 30px;

margin-bottom:5px;

cursor: pointer;

background: #ff8200;

width: 150px;

height: 30px;

line-height: 30px;

border-radius: 10px;

text-align: center;

}

.el-form--inline {

.el-form-item {

&.line1 {

width: 100%;

margin-top: -20px;

}

&.line2 {

width: 176px;

margin-right: 10px;

}

.logisics-page .title{padding-bottom: 33px; border-bottom: 1px solid #eee; }

.personAddress{display: block}

.showaddBtn{display: block;}

.addPersonBtn{width: 200px; height: 30px; line-height: 30px;text-align: center; background-color: #D8511C; color: #fff;cursor: pointer;}

.showRecoPersonAddresss{display: none !important;}

.title{margin: 33px 43px 0px 0px; font-size: 18px; font-weight: bold;}

.logisics-page .el-form { margin-top: 28px;}

.formName ,.formCompany {width: 100% !important; clear: both;}

.messageTips{display: none ;}

.formName{ position: relative;}

.nameTips ,.CompanyTips ,.countryNumberTips ,.provinceTips ,.cityTips,.addressTips ,.phoneNumberTips ,.zipCodeTips{display:block !important; position: absolute; font-size:12px; color:#d8511c; bottom:-13px; z-index: 2000;}

.formProvince {margin-left: 16px;}

.el-form-item{margin-right: 0; margin-bottom: 16px;}

.formAddress1{width: 800px;float: left; clear: both;}

// .el-form-item:nth-of-type(3n){margin-right: 0 !important;float: left;}

// .el-form-item:nth-of-type(4n){float: left;}

// .el-form-item:nth-of-type(5n){width: 255px;float: left !important; margin-right: 300px !important; margin-left: 7px !important;}

// .el-form-item:nth-of-type(6n) { clear: both;width: 800px;margin-right: 300px !important;margin-left: 0px !important;}

.formAddress2{width: 800px;float: left; clear: both;

.el-form-item__content{width: 800px !important;

.el-input{width: 800px;}

}

.formPhone {clear: left; margin-left: 0px !important;float: left;}

.formZipCode {float: left;}

.defaultCode{clear: both;float: left;}

// .el-form-item:nth-of-type(8n){ clear: both;float: left;}

// .el-form-item:nth-of-type(9n){ clear: right;}

// .el-form-item:nth-of-type(10n){clear: both;}

.dialog-footer{clear: both;

// .cancelBtn:hover{ color: #fff;}

}

.logisics-page .el-form--inline .el-form-item.line2{width: auto !important ;}

.el-button{width: 200px; height: 40px !important; line-height: 40px !important; padding: 0px !important; background-color: #B0B0B0;font-size: 14px; font-family:"微软雅黑"; color: #fff;border: none;}

.el-button:last-child{ background-color: #FAFAFA;font-size: 14px; font-family:"微软雅黑"; color: #414141;border: 1px solid #BBBBBB;}

.AddressList{ height: 0px !important;}

.address-list{width: calc(100% - 34px);}

.address-item{border: 1px solid #EBEBEB; border-radius: 4px;}

.address-item:hover .name ,.address-item:hover .txt {color: #D8511C !important; cursor: pointer;}

.is-checked{color: #D8511C;}

.addressActive{border:3px solid #ff8758; border-radius: 0; box-sizing: border-box;}

.allbreakBorder{border: 3px solid #ff8758;box-sizing: border-box;}

.address-list .name{margin-left: 0px; }

.address-list .name span .personman{display: block;width: 14px; height: 14px; float: left; margin-top: 5px; margin-right: 12px;}

.address-list .txt{ margin-top: 18px !important;}

.address-list .txt p{ margin-bottom: 20px;font-size: 14px; color: #414141;width: auto; float: left; margin-right: 10px;}

// .address-list .txt p span:first-child{ margin-right: 12px;}

.address-list .txt p:nth-of-type(1){width: 900px;float: left;}

.removeTip{

width: 100%; height: 100%; position: fixed;z-index: 99999;top:0;left:0; background-color:rgba(81, 81, 81, 0.51);display:none;

.container{

width: 515px; height: 315px ; position: absolute; top: calc(50% - 158px); left:calc(50% - 258px); background-color: #fff;

.img{ width: 220px;height: 104px; margin:57px 142px 29px 142px ;}

.word{width: 100%; text-align: center; margin-bottom: 31px;}

.btnFooter{

width: 100%;height: 74px; position: absolute; bottom: 0px; background-color: #f5f5f5;

.btngroup{width: 280px; height: 40px; margin: 14px auto;

span{width: 128px; height: 40px; line-height: 40px; margin-right: 24px;display: block;float: left;text-align: center;cursor: pointer;}

& :first-child{background-color: #EA5920; color: #fff;}

& :last-child{ background-color: #B0B0B0; color: #fff; margin-right: 0;}

}

.cancel{ position: absolute;right: 10px; top: 10px; cursor: pointer;}

}

.removed{display: block !important;}

.showBtn{background-color: #D8511C;}

::-webkit-scrollbar{

width: 7px; /*对垂直流动条有效*/

color:#f8f8f8;

}

::-webkit-scrollbar-thumb{

border-radius: 7px;

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);

background-color: #f8f8f8;

}

</style>

posted @ 2021-08-16 12:29 一封未寄出的信阅读(403) 评论(0) 编辑收藏举报

刷新页面返回顶部

落幕

用自己的话描述工作中和学习中遇到并解决的问题

对一个列表进行操作（一个地址或者多个地址，默认以及选中状态的改变）

公告