|
|
@@ -2,300 +2,276 @@
|
|
|
<div class="content">
|
|
|
<back :title="titlename"></back>
|
|
|
<!-- table切换 -->
|
|
|
- <div class="tab">
|
|
|
- <div>
|
|
|
- <p @click="tab(1)" :class="[index==1?'active':'']">寄件人</p>
|
|
|
- <p @click="tab(2)" :class="[index==2?'active':'']" class="">收件人</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 寄件人 -->
|
|
|
- <div v-if="index==1">
|
|
|
- <div class="jjinfo" v-for="item in addressList">
|
|
|
- <div>
|
|
|
- <div class="jj">
|
|
|
- <div class="jjaddress">
|
|
|
- <p>寄</p>
|
|
|
- <div :id="'copytkl'+item.id">
|
|
|
- <p>{{item.name}} {{item.phone}}</p>
|
|
|
- <p>{{item.provinceAndCity}} {{item.address}}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="cz">
|
|
|
- <p @click="del(item.id)">
|
|
|
- <img src="../assets/images/del.png" alt="">
|
|
|
- <span>删除</span>
|
|
|
- </p>
|
|
|
- <p @click="linkEdit(item.id)">
|
|
|
- <img src="../assets/images/whrite.png" alt="">
|
|
|
- <span>编辑</span>
|
|
|
- </p>
|
|
|
- <p :id="'fz'+item.id" @click="copyLink(item.id)" data-clipboard-action="copy" :data-clipboard-target="'#copytkl'+item.id">
|
|
|
- <img src="../assets/images/copy.png" alt="">
|
|
|
- <span>复制</span>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 寄件 -->
|
|
|
- <div class="btn-jj">
|
|
|
- <van-button @click="link(1)" type="info" color="#00c4b8">添加寄件人</van-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
<!-- 收件人 -->
|
|
|
- <div v-if="index==2">
|
|
|
+ <div style="margin-top: 20px;">
|
|
|
<div class="jjinfo" v-for="item in addressList">
|
|
|
<div>
|
|
|
<div class="jj">
|
|
|
<div class="jjaddress">
|
|
|
<p style="background: #fa9c22;">收</p>
|
|
|
- <div :id="'copytkl'+item.id">
|
|
|
- <p>{{item.name}} {{item.phone}}</p>
|
|
|
- <p>{{item.provinceAndCity}} {{item.address}}</p>
|
|
|
+ <div :id="'copytkl' + item.id">
|
|
|
+ <p>{{ item.name }} {{ item.phone }}</p>
|
|
|
+ <p>{{ item.provinceAndCity }} {{ item.address }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="cz">
|
|
|
<p @click="del(item.id)">
|
|
|
<img src="../assets/images/del.png" alt="">
|
|
|
<span>删除</span>
|
|
|
- </p>
|
|
|
+ </p>
|
|
|
<p @click="linkEdit(item.id)">
|
|
|
<img src="../assets/images/whrite.png" alt="">
|
|
|
<span>编辑</span>
|
|
|
</p>
|
|
|
- <p :id="'fz'+item.id" @click="copyLink(item.id)" data-clipboard-action="copy" :data-clipboard-target="'#copytkl'+item.id">
|
|
|
+ <p :id="'fz' + item.id" @click="copyLink(item.id)" data-clipboard-action="copy"
|
|
|
+ :data-clipboard-target="'#copytkl' + item.id">
|
|
|
<img src="../assets/images/copy.png" alt="">
|
|
|
<span>复制</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!-- 寄件 -->
|
|
|
<div class="btn-jj">
|
|
|
<van-button type="info" @click="link(2)" color="#fa9c22">添加收件人</van-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {Toast,Dialog} from 'vant'
|
|
|
- export default{
|
|
|
- data(){
|
|
|
- return {
|
|
|
- titlename:"地址簿",
|
|
|
- index:1,
|
|
|
- userId:'',
|
|
|
- addressList:[]
|
|
|
- }
|
|
|
+import { Toast, Dialog } from 'vant'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ titlename: "收件人地址簿",
|
|
|
+ index: 1,
|
|
|
+ userId: '',
|
|
|
+ addressList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created: function () {
|
|
|
+ this.isLogin();
|
|
|
+ this.userId = localStorage.getItem("userId")
|
|
|
+ //获取参数
|
|
|
+ this.index = this.$route.query.active
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //复制
|
|
|
+ copyLink(id) {
|
|
|
+ let _this = this;
|
|
|
+ let clipboard = new this.clipboard("#fz" + id);
|
|
|
+ clipboard.on('success', function () {
|
|
|
+ //window.console.log('00')
|
|
|
+ });
|
|
|
+ clipboard.on('error', function () {
|
|
|
+ _this.$toast("复制失败")
|
|
|
+ });
|
|
|
+ },
|
|
|
+ tab(obj) {
|
|
|
+ this.index = obj
|
|
|
+ this.getData()
|
|
|
},
|
|
|
- created:function(){
|
|
|
- this.isLogin();
|
|
|
- this.userId = localStorage.getItem("userId")
|
|
|
- //获取参数
|
|
|
- this.index = this.$route.query.active
|
|
|
- this.getData();
|
|
|
+ link(obj) {
|
|
|
+ this.$router.push({ path: "/Newaddress", query: { type: obj } })
|
|
|
},
|
|
|
- methods:{
|
|
|
- //复制
|
|
|
- copyLink(id) {
|
|
|
- let _this = this;
|
|
|
- let clipboard = new this.clipboard("#fz"+id);
|
|
|
- clipboard.on('success', function () {
|
|
|
- //window.console.log('00')
|
|
|
- });
|
|
|
- clipboard.on('error', function () {
|
|
|
- _this.$toast("复制失败")
|
|
|
- });
|
|
|
- },
|
|
|
- tab(obj){
|
|
|
- this.index=obj
|
|
|
- this.getData()
|
|
|
- },
|
|
|
- link(obj){
|
|
|
- this.$router.push({path:"/Newaddress",query:{type:obj}})
|
|
|
- },
|
|
|
- getData(){
|
|
|
- Toast.loading({
|
|
|
- message: '加载中...',
|
|
|
- forbidClick: true,
|
|
|
- duration:0
|
|
|
- });
|
|
|
- this.$http.post(this.$store.state.host+"/personal/getAddressList.do",{userId:this.userId,type:this.index},{emulateJSON:true})
|
|
|
- .then(res=>{
|
|
|
- //发送成功
|
|
|
- if(res.body.msg=='success'){
|
|
|
- this.addressList = res.body.addressList
|
|
|
+ getData() {
|
|
|
+ Toast.loading({
|
|
|
+ message: '加载中...',
|
|
|
+ forbidClick: true,
|
|
|
+ duration: 0
|
|
|
+ });
|
|
|
+ this.$http.post(this.$store.state.host + "/personal/getAddressList.do", { userId: this.userId, type: 2 }, { emulateJSON: true })
|
|
|
+ .then(res => {
|
|
|
+ //发送成功
|
|
|
+ if (res.body.msg == 'success') {
|
|
|
+ this.addressList = res.body.addressList
|
|
|
}
|
|
|
Toast.clear()
|
|
|
- },res=>{
|
|
|
- //发送失败
|
|
|
+ }, res => {
|
|
|
+ //发送失败
|
|
|
Toast("网络错误!")
|
|
|
})
|
|
|
- Toast.clear()
|
|
|
- },
|
|
|
- del(id){
|
|
|
- Dialog.confirm({ title: '', message: '确定删除吗', })
|
|
|
- .then(() => {
|
|
|
+ Toast.clear()
|
|
|
+ },
|
|
|
+ del(id) {
|
|
|
+ Dialog.confirm({ title: '', message: '确定删除吗', })
|
|
|
+ .then(() => {
|
|
|
Toast.loading({
|
|
|
- message: '删除中...',
|
|
|
- forbidClick: true,
|
|
|
- duration:0
|
|
|
+ message: '删除中...',
|
|
|
+ forbidClick: true,
|
|
|
+ duration: 0
|
|
|
});
|
|
|
- this.$http.post(this.$store.state.host+"/personal/deleteAddressInfoById.do",{id:id},{emulateJSON:true})
|
|
|
- .then(res=>{
|
|
|
+ this.$http.post(this.$store.state.host + "/personal/deleteAddressInfoById.do", { id: id }, { emulateJSON: true })
|
|
|
+ .then(res => {
|
|
|
//发送成功
|
|
|
- if(res.body.msg=='success'){
|
|
|
+ if (res.body.msg == 'success') {
|
|
|
this.getData()
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
Toast("删除失败!")
|
|
|
}
|
|
|
- Toast.clear()
|
|
|
- },res=>{
|
|
|
- //发送失败
|
|
|
- Toast("网络错误!")
|
|
|
- })
|
|
|
+ Toast.clear()
|
|
|
+ }, res => {
|
|
|
+ //发送失败
|
|
|
+ Toast("网络错误!")
|
|
|
+ })
|
|
|
Toast.clear()
|
|
|
})
|
|
|
.catch(() => {
|
|
|
- // on cancel
|
|
|
+ // on cancel
|
|
|
})
|
|
|
- },
|
|
|
- //跳去编辑页
|
|
|
- linkEdit(id){
|
|
|
- this.$router.push({path:"/Editaddress",query:{id:id}})
|
|
|
- },
|
|
|
- adressLink(item){
|
|
|
- let jjInfo = {}
|
|
|
- jjInfo.jjname = item.name+' '+item.phone
|
|
|
- jjInfo.jjadd = item.provinceAndCity+' '+item.address
|
|
|
- jjInfo.sender = item.name
|
|
|
- jjInfo.senderPhone = item.phone
|
|
|
- jjInfo.sendAddr = item.provinceAndCity
|
|
|
- jjInfo.sendAddress = item.address
|
|
|
- this.$store.commit("getJjInfo",jjInfo)
|
|
|
- this.$router.push({path:"/Express"})
|
|
|
- },
|
|
|
- adressLinkSj(item){
|
|
|
- let sjInfo = {}
|
|
|
- sjInfo.sjname = item.name+' '+item.phone
|
|
|
- sjInfo.sjadd = item.provinceAndCity+' '+item.address
|
|
|
- sjInfo.receiver = item.name
|
|
|
- sjInfo.receiverPhone = item.phone
|
|
|
- sjInfo.receiveAddr = item.provinceAndCity
|
|
|
- sjInfo.receiveAddress = item.address
|
|
|
- this.$store.commit("getSjInfo",sjInfo)
|
|
|
- this.$router.push({path:"/Express"})
|
|
|
- }
|
|
|
},
|
|
|
- computed:{
|
|
|
-
|
|
|
+ //跳去编辑页
|
|
|
+ linkEdit(id) {
|
|
|
+ this.$router.push({ path: "/Editaddress", query: { id: id } })
|
|
|
+ },
|
|
|
+ adressLink(item) {
|
|
|
+ let jjInfo = {}
|
|
|
+ jjInfo.jjname = item.name + ' ' + item.phone
|
|
|
+ jjInfo.jjadd = item.provinceAndCity + ' ' + item.address
|
|
|
+ jjInfo.sender = item.name
|
|
|
+ jjInfo.senderPhone = item.phone
|
|
|
+ jjInfo.sendAddr = item.provinceAndCity
|
|
|
+ jjInfo.sendAddress = item.address
|
|
|
+ this.$store.commit("getJjInfo", jjInfo)
|
|
|
+ this.$router.push({ path: "/Express" })
|
|
|
+ },
|
|
|
+ adressLinkSj(item) {
|
|
|
+ let sjInfo = {}
|
|
|
+ sjInfo.sjname = item.name + ' ' + item.phone
|
|
|
+ sjInfo.sjadd = item.provinceAndCity + ' ' + item.address
|
|
|
+ sjInfo.receiver = item.name
|
|
|
+ sjInfo.receiverPhone = item.phone
|
|
|
+ sjInfo.receiveAddr = item.provinceAndCity
|
|
|
+ sjInfo.receiveAddress = item.address
|
|
|
+ this.$store.commit("getSjInfo", sjInfo)
|
|
|
+ this.$router.push({ path: "/Express" })
|
|
|
}
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
- .content{
|
|
|
- .tab{
|
|
|
- font-size: .36rem;
|
|
|
- color: #00c4b8;
|
|
|
- padding: .33rem;
|
|
|
- div{
|
|
|
- display: flex;
|
|
|
- border: .01rem solid #00c4b8;
|
|
|
- text-align: center;
|
|
|
- border-radius: .05rem;
|
|
|
- p{
|
|
|
- flex: 1;
|
|
|
- padding: .1rem 0rem;
|
|
|
- }
|
|
|
- p.active{
|
|
|
- background: #00c4b8;
|
|
|
- color: white;
|
|
|
- }
|
|
|
+.content {
|
|
|
+ .tab {
|
|
|
+ font-size: .36rem;
|
|
|
+ color: #00c4b8;
|
|
|
+ padding: .33rem;
|
|
|
+
|
|
|
+ div {
|
|
|
+ display: flex;
|
|
|
+ border: .01rem solid #00c4b8;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: .05rem;
|
|
|
+
|
|
|
+ p {
|
|
|
+ flex: 1;
|
|
|
+ padding: .1rem 0rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ p.active {
|
|
|
+ background: #00c4b8;
|
|
|
+ color: white;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
- .jjinfo{
|
|
|
- font-size: .36rem;
|
|
|
- color: #999999;
|
|
|
- padding: .0rem .33rem 0.33rem;
|
|
|
- word-break: break-word;
|
|
|
- >div{
|
|
|
- background: white;
|
|
|
- border-radius: .05rem;
|
|
|
- padding: .1rem .3rem;
|
|
|
- .jj{
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .jjinfo {
|
|
|
+ font-size: .36rem;
|
|
|
+ color: #999999;
|
|
|
+ padding: .0rem .33rem 0.33rem;
|
|
|
+ word-break: break-word;
|
|
|
+
|
|
|
+ >div {
|
|
|
+ background: white;
|
|
|
+ border-radius: .05rem;
|
|
|
+ padding: .1rem .3rem;
|
|
|
+
|
|
|
+ .jj {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: .2rem 0rem;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .jjaddress {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: .2rem 0rem;
|
|
|
- flex-wrap: wrap;
|
|
|
- .jjaddress{
|
|
|
- display: flex;
|
|
|
- padding: .1rem 0rem .2rem;
|
|
|
-
|
|
|
- >p{
|
|
|
- font-size: .24rem;
|
|
|
- font-weight: bold;
|
|
|
- display: inline-block;
|
|
|
- width:.5rem;
|
|
|
- height: .5rem;
|
|
|
- background: #00c4b8;
|
|
|
- text-align: center;
|
|
|
- line-height: .5rem;
|
|
|
- color: white;
|
|
|
- border-radius: 50%;
|
|
|
- margin-right: .3rem;
|
|
|
+ padding: .1rem 0rem .2rem;
|
|
|
+
|
|
|
+ >p {
|
|
|
+ font-size: .24rem;
|
|
|
+ font-weight: bold;
|
|
|
+ display: inline-block;
|
|
|
+ width: .5rem;
|
|
|
+ height: .5rem;
|
|
|
+ background: #00c4b8;
|
|
|
+ text-align: center;
|
|
|
+ line-height: .5rem;
|
|
|
+ color: white;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: .3rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ div {
|
|
|
+ //font-weight: bold;
|
|
|
+ max-width: 5.2rem;
|
|
|
+
|
|
|
+ p:nth-of-type(1) {
|
|
|
+ font-size: .3rem;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: .2rem;
|
|
|
}
|
|
|
- div{
|
|
|
- //font-weight: bold;
|
|
|
- max-width: 5.2rem;
|
|
|
- p:nth-of-type(1){
|
|
|
- font-size: .3rem;
|
|
|
- color: #333;
|
|
|
- margin-bottom: .2rem;
|
|
|
- }
|
|
|
- p:nth-of-type(2){
|
|
|
- font-size: .3rem;
|
|
|
- }
|
|
|
+
|
|
|
+ p:nth-of-type(2) {
|
|
|
+ font-size: .3rem;
|
|
|
}
|
|
|
}
|
|
|
- .cz{
|
|
|
- border-top: .01rem solid #ededed;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: row-reverse;
|
|
|
- font-size: .24rem;
|
|
|
- color: #999999;
|
|
|
- padding-top: .2rem;
|
|
|
- p{
|
|
|
- margin-left: .2rem;
|
|
|
- img{
|
|
|
- width:.22rem;
|
|
|
- height: .24rem;
|
|
|
- }
|
|
|
- span{
|
|
|
- position: relative;
|
|
|
- top: -.01rem;
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cz {
|
|
|
+ border-top: .01rem solid #ededed;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row-reverse;
|
|
|
+ font-size: .24rem;
|
|
|
+ color: #999999;
|
|
|
+ padding-top: .2rem;
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin-left: .2rem;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: .22rem;
|
|
|
+ height: .24rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ position: relative;
|
|
|
+ top: -.01rem;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- .btn-jj{
|
|
|
- padding: .33rem;
|
|
|
- button{
|
|
|
- width: 100%;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .btn-jj {
|
|
|
+ padding: .33rem;
|
|
|
+
|
|
|
+ button {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
