pk-mall/src/view/user/address/index.vue

<template>
	<el-dialog class="address" :show-close="true"  center v-model="updateFlag" title="修改地址">
	  <el-form ref="loginFormRef" :model="addressState" :rules="rules">
	    <div class="address-content">
	      <div class="address-view">
	        <div class="star">*</div>
	        <div>所在地区：</div>

	        <div>
	          <el-form-item prop="address">
	          <el-cascader  :props="props" :options=area.arr v-model="addressState.address" @change="handleChange"  clearable>
	          </el-cascader>
	          </el-form-item>


	        </div>
	      </div>
	      <div class="address-view" style="margin-top: 20px">
	        <div class="star">*</div>
	        <div>详细地址：</div>
	        <div>
	          <el-form-item prop="addressDetail">
	            <el-input
	                :rows="5"
	                type="textarea"
	                v-model.trim="addressState.addressDetail"
	            ></el-input>
	          </el-form-item>
	        </div>
	      </div>
	      <div class="address-view" style="margin-left: 16px">
	        <div class="star">*</div>
	        <div >收货人：</div>
	        <div>
	          <el-form-item prop="userName">
	            <el-input
	                v-model.trim="addressState.userName"
	            ></el-input>
	          </el-form-item>
	        </div>
	      </div>
	      <div class="address-view">
	        <div class="star">*</div>
	        <div>联系电话：</div>
	        <div>
	          <el-form-item prop="userPhone">
	            <el-input
	                v-model.trim="addressState.userPhone"
	            ></el-input>
	          </el-form-item>
	        </div>
	      </div>
        <div class="address-view">
          <div class="star">*</div>
          <div>默认地址：</div>
          <div>
            <el-switch v-model="value1" />
          </div>
        </div>
	    </div>
	    <div class="button-s">
	      <div class="style" @click="updateFlag=false">取消</div>
	      <div class="style colors" @click="updateTap()">确认修改</div>
	    </div>
	  </el-form>
	</el-dialog>
  <el-dialog class="address" :show-close="true"  center v-model="addressFlag" title="添加地址">
    <el-form ref="loginFormRef" :model="addressState" :rules="rules">
      <div class="address-content">
        <div class="address-view">
          <div class="star">*</div>
          <div>所在地区：</div>

          <div>
            <el-form-item prop="address">
            <el-cascader  :props="props" :options=area.arr v-model="addressState.address" @change="handleChange"  clearable>
            </el-cascader>
            </el-form-item>


          </div>
        </div>
        <div class="address-view" style="margin-top: 20px">
          <div class="star">*</div>
          <div>详细地址：</div>
          <div>
            <el-form-item prop="addressDetail">
              <el-input
                  :rows="5"
                  type="textarea"
                  v-model.trim="addressState.addressDetail"
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="address-view" style="margin-left: 16px">
          <div class="star">*</div>
          <div >收货人：</div>
          <div>
            <el-form-item prop="userName">
              <el-input
                  v-model.trim="addressState.userName"
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="address-view">
          <div class="star">*</div>
          <div>联系电话：</div>
          <div>
            <el-form-item prop="userPhone">
              <el-input
                  v-model.trim="addressState.userPhone"
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="address-view">
          <div class="star">*</div>
          <div>默认地址：</div>
          <div>
            <el-switch v-model="value1" />
          </div>
        </div>
      </div>
      <div class="button-s">
        <div class="style" @click="addressFlag=false">取消</div>
        <div class="style colors" @click="addressTap()">确认添加</div>
      </div>
    </el-form>
  </el-dialog>
  <div class="login-wrapper">
    <div>
      <indexHeaders/>
    </div>
    <div class="register">
      <div class="register-left">
        <UserNav :navIndexs="2"/>
      </div>
      <div class="register-content">
        <div class="collect-tops">
          <div class="icons">
            <img src="http://screen.zhousi.hdlkeji.com/aksdbn/img/address-icon.png">
          </div>
          <div style="flex: 1">收货地址</div>
          <div  class="add" @click="addressFlag=true;addClick()">新增</div>
        </div>
        <div class="tops">
          <div class="tops-order-text ">姓名</div>
          <div class="tops-order-text">手机号</div>
          <div class="tops-order-text">收货地址</div>
          <div class="tops-order-text">操作</div>
        </div>
        <div class="news-no" v-if="addressList.arr==''">
          <img src="http://screen.zhousi.hdlkeji.com/aksdbn/img/news-no-bg3.png">
          <div>暂无相关信息</div>
        </div>
        <div class="list" v-for="item in addressList.arr">

            <div class="evaluate-goods">
              <div class="order-info flexs overflow1">
                {{ item.name }}
              </div>
              <div class="order-money flexs color-s" >{{ item.mobile }}</div>
              <div class="order-status flexs" >{{ item.full_address }}</div>
             <div class="address-oper">
               <div @click="update(item)">修改</div>
               <div @click="del(item.id)">删除</div>
               <div @click="updateAddress(item)">设为默认</div>
             </div>
            </div>
        </div>

      </div>


    </div>
  </div>
  <RightSliderBar/>
  <Footer/>
</template>

<script setup>
const value1=ref(false)
//记录访问次数
if(localStorage.getItem('USER__INFO__')){
  user_lsp().then((res)=>{
  })
}
import { provide, reactive, ref ,onMounted} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import UserNav from '@/components/User/UserNav.vue'
import indexHeaders from '@/components/Index/indexHeaders.vue'

import LeftSliderBar from '@/components/Index/LeftSliderBar.vue'
import RightSliderBar from '@/components/Index/RightSliderBar.vue'
import CountDate from '@/components/Index/CountDate.vue'
import Footer from '@/components/Tool/Footer.vue'
import {isLogin} from "@/utils";
import {useI18n} from "@/hooks/web/useI18n";
import {address_list, del_address, get_area, goods_cart_del, user_address_controller, user_lsp} from "@/api/menu1";
import {getStore} from "@/utils/storage";
const { t } = useI18n()
let addressFlag=ref(false)
let updateFlag=ref(false)
const guide = ref(['资讯中心'])
let guideIndex =ref(0)
const evaluateNav = ref(['全部订单','待付款','待收货','已完成'])
let nacIndex = ref(0)
let userAddress=ref('')
const address = ref([])
const loginFormRef=ref('')
const handleChange = (label) => {
  userAddress.value=label[2]
  address.value=label
  console.error(label)
}
const addClick=()=>{
	addressState.address=''
	addressState.addressDetail=''
	addressState.userName=''
	addressState.userPhone=''
	userAddress.value=''
  value1.value=false
}
const update=(item)=>{
	// let arr=[];
	// arr.push(item.area)
	const chars = item.area.split(',');
	let datas=[]
	for(var key in chars){
		if(key==2){
			userAddress.value=chars[key]
		}
		datas.push(parseInt(chars[key]))
	}
	updateFlag.value=true
	addressState.address=datas
	addressState.addressDetail=item.address
	addressState.userName=item.name
	addressState.userPhone=item.mobile
	addressState.id=item.id
  value1.value=item.is_default==1?true:false
}
const props={
  value: 'value',
  label: 'label',
  children: 'children',
}
const clickTap = (index) =>{
  nacIndex.value=index;
}
const changes=(value)=>{
  console.error(value)
}
onMounted(()=>{
  list();
})
const del=(id)=>{
  ElMessageBox({
    title: '提示',
    message: '确认删除该地址吗？',
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    callback: (action) => {
      if (action === 'confirm') {
        del_address({id:id}).then((res)=>{
          if(res.code==1){
            ElMessage.success('删除地址成功')
            list();

          }else{
            ElMessage.error(res.msg)

          }
        })

      }
    }
  })
}
const updateAddress=(item)=> {
  console.log(item);
  const chars = item.area.split(',');
  let datas=[]
  for(var key in chars){
    
    datas.push(parseInt(chars[key]))
  }
  let data={
    id:item.id,
    name:item.name,
    mobile:item.mobile,
    address:item.address,
    is_default:1,
    city:datas[2]
  }
  user_address_controller(data).then((res)=>{
    if(res.code==1){
      ElMessage.success('默认地址修改成功')
      // updateFlag.value=false
      // addressLists();
    }else{
      ElMessage.error(res.msg)

    }
  })
}
const updateTap=()=>{
  loginFormRef.value.validate(valid => {
    if (!valid) {
      return false
    }else{
      let data={
        id:addressState.id,
        name:addressState.userName,
        mobile:addressState.userPhone,
        address:addressState.addressDetail,
        is_default:value1.value==true?1:0,
        city:userAddress.value
      }
      user_address_controller(data).then((res)=>{
        if(res.code==1){
          ElMessage.success('修改成功')
		  updateFlag.value=false
          list();

        }else{
          ElMessage.error(res.msg)

        }
      })
    }
  })

}
const addressTap=()=>{
  loginFormRef.value.validate(valid => {
    if (!valid) {
      return false
    }else{
      let data={
        id:'',
        name:addressState.userName,
        mobile:addressState.userPhone,
        address:addressState.addressDetail,
        is_default:value1.value==true?1:0,
        city:userAddress.value
      }
      user_address_controller(data).then((res)=>{
        if(res.code==1){
          ElMessage.success('新增成功')
		  addressFlag.value=false
          list();

        }else{
          ElMessage.error(res.msg)

        }
      })
    }
  })

}
const addressList=reactive({
  arr:[]
})
const list=()=>{
  address_list().then((res)=>{
    addressList.arr=res.data
  })
}
const newsList =[
  { id: '1', src: 'http://screen.zhousi.hdlkeji.com/aksdbn/img/goods/seckill-goods.png' ,goods: 'http://screen.zhousi.hdlkeji.com/aksdbn/img/goods/seckill-bg.png' },
  { id: '2', src: 'http://screen.zhousi.hdlkeji.com/aksdbn/img/goods/seckill-bg2.png' ,goods: 'http://screen.zhousi.hdlkeji.com/aksdbn/img/goods/seckill-bg.png'},
  { id: '3', src: 'http://screen.zhousi.hdlkeji.com/aksdbn/img/goods/seckill-bg3.png' ,goods: 'http://screen.zhousi.hdlkeji.com/aksdbn/img/goods/seckill-bg.png'}
]
const addressState = reactive({
  address: '',
  addressDetail:'',
  userName:'',
  userPhone:'',
  id:'',
})
const rules = {
  name: [{ required: true, message: t('home.login.form.nameRequired'), trigger: 'blur' }],
  cardName: [{ required: true, message: t('home.login.form.cardNameRequired'), trigger: 'blur' }],
  cardBank: [{ required: true, message: t('home.login.form.cardBankRequired'), trigger: 'blur' }],
  cardNumber: [{ required: true, message: t('home.login.form.cardNumberRequired'), trigger: 'blur' }],
  address: [{ required: true, message: t('home.login.form.addressRequired'), trigger: 'blur' }],
  addressDetail: [{ required: true, message: t('home.login.form.addressDetailRequired'), trigger: 'blur' }],
  userName: [{ required: true, message: t('home.login.form.userNameRequireds'), trigger: 'blur' }],
  userPhone: [{ required: true, message: t('home.login.form.phoneRequired'), trigger: 'blur' }],
}
let area=reactive({
  arr:[]
})
get_area().then((res)=>{
  area.arr=res.data
})
isLogin()

</script>

<style lang="less" scoped >
.flexs{
	flex:1;
	text-align: center;
}
.button-s{
  display: flex;
  justify-content: center;
  .colors{
    background-color: #3171B8!important;
    color: #fff!important;
  }
  .style{
    cursor: pointer;
    width: 140px;
    height: 30px;
    background: #FFFFFF;
    color: #3171B8;
    font-size: 16px;
    text-align: center;
    line-height: 30px;
    margin-right: 25px;
    border: 1px solid #3171B8;
  }
}
.address-content{
  padding: 0 70px;
  .star{
    color: #EE341A;
    margin: 0 10px 0 0px;
  }
  .address-view{
    display: flex;
    line-height: 36px;
  }
}
/deep/ .el-textarea__inner{
  width: 387px;
}
/deep/ .address-view .el-input{
  width: 387px;
  height: 36px;
  background: #FFFFFF;
  font-size: 16px;
}
.login-wrapper{
  background-color: #F7F8FA;
  .register{
    display: flex;
    padding: 0 260px 40px 260px;
    .register-content{
      .tops{
        height: 50px;
        background: #F0F2F5;
        margin: 20px 20px 0 20px;
        display: flex;
        color: #333;
        font-size: 16px;
        line-height: 50px;
      .tops-order-text{
        flex: 1;
        text-align: center;
      }
      .tops-order-text:nth-child(1) {
        flex: 0 0 170px;
      }
      .tops-order-text:nth-child(2) {
        flex: 0 0 200px;
      }
      }
      .collect-tops{
        .add{
          color: #4171B3;
          font-size: 16px;
          cursor: pointer;
        }
        display: flex;
        font-size: 18px;
        color: #333;
        justify-content: space-between;
        //border-bottom: 1px solid #f4f4f4;
        height: 65px;
        line-height: 65px;
        padding: 0 20px;
        div{
          margin-right: 10px;
        }
        .icons{
          margin-top: 8px;
          img{
            width: 29px;
            height: 29px;
          }
        }
      }
      .address-oper{
        // width: 100%;
			  // text-align: center;
        color: #4171B3;
        font-size: 16px;
        display: flex;
        margin: 0 auto;
        // justify-content: center;
        div{
          margin-right: 10px;
          cursor: pointer;
        }
      }
      .evaluate-nav{
        display: flex;

        .evaluate-nav-view{
          cursor: pointer;
          padding: 0 30px;
          height: 50px;
          line-height: 50px;
          color: #333333;
          font-size: 18px;
          box-sizing: border-box;
          .line{
            width: 80px;
            margin-left: -10px;
            height: 5px;
            background: linear-gradient(270deg, #FFFFFF 0%, #4171B3 100%);
            border-radius: 3px;
          }
        }
      }
      background-color: #fff;
      margin: 10px 0 0 10px;
      width: 100%;
      min-height: 700px;
      .news-no{
        margin: 120px auto;
        text-align: center;
        font-size: 20px;
        color: #999;
        img{
          width: 225px;
          height: 168px;
        }
      }
      .list{
        // height: 66px;
        background: #FFFFFF;
        border-bottom: 1px solid #D7DBE0;
        // padding: 0 60px 0 0;
        // margin: 20px 20px 0 20px;
        line-height: 66px;
        .evaluate-goods{
          display: flex;
          color: #333;
          font-size: 16px;
          margin: 20px 20px 0 20px;
		  // justify-content: space-between;
          .color-s{
            color: #333330;
            font-size: 16px;
          }
          .order-button{
            width: 100px;
            height: 36px;
            background: #4171B3;
            border-radius: 2px;
            line-height: 140px;
          }
          .order-status{
            text-align: center;
            // width:400px!important;
            max-width: 400px;
            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;
            line-height: normal;
            margin-top: 23px;
            //margin-right: 100px;
          }
          .order-money{
            //width: 200px;
            flex: 0 0 200px;
            // width: 300px;
            text-align: center;

            .order-button{
              width: 100px;
              height: 36px;
              background: #4171B3;
              border-radius: 2px;
              text-align: center;
              line-height: 36px;
              color: #fff;
              font-size: 16px;
              margin: 50px auto;
            }
          }
          .order-info{
            flex: 0 0 170px;
			      text-align: center;
            .order-img{
              img{
                width: 100px;
                height: 100px;
              }
            }
            .order-name{
              font-size: 18px;
              color: #333;
              margin-left: 10px;
              line-height: 24px;
            }
          }

        }
        .list-tops{
          height: 34px;
          background: #F0F2F5;
          display: flex;
          line-height: 34px;
          padding: 0 70px 0 20px;
          .list-time{
            color: #999;
            font-size: 14px;
          }
          .orderNo{
            color: #999;
            font-size: 14px;
            margin-left: 20px;
          }
          .money-text{
            color: #333333;
            margin-left: 160px;
            font-size: 16px;
          }
          .money-status{
            color: #333333;
            margin-left: 190px;
            font-size: 16px;
          }
          .money-oper{
            color: #333333;
            margin-left: 180px;
            font-size: 16px;
          }
        }
        .list-right{
          text-align: right;
          .list-btn{
            color: #4171B3;
            cursor: pointer;
            font-size: 16px;
          }
          .time{
            color: #999;
            font-size: 16px;
          }
        }
        .list-cen{
          flex: 1;
          .content{
            color: #999;
            font-size: 16px;
            margin-left: 20px;
          }
          .name{
            color: #333;
            font-size: 20px;
          }
        }
        .list-img img{
          width: 90px;
          height: 70px;
        }
      }
    }
    .register-left{
      width: 320px;
      height: 100px;
      background: #FFFFFF;
      border-radius: 2px;
      margin-top: 10px;
      text-align: center;
      .colorStyle{
        color: #4B71AE!important;
      }
      .register-list{
        cursor: pointer;
        height: 100px;
        line-height: 100px;
        color: #333;
        font-size: 22px;
      }
    }
  }
}
</style>