123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>列表-收货地址-创业帮</title>
- <meta name="keywords" content="列表-收货地址-创业帮">
- <meta name="description" content="列表-收货地址-创业帮">
- <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,shrink-to-fit=no,user-scalable=no" name="viewport" viewport="cover">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
- <meta content="telephone=no" name="format-detection">
- <meta content="email=no" name="format-detection">
- <meta name="apple-mobile-web-app-title" content="列表-收货地址-创业帮">
- <meta http-equiv="Cache-Control" content="no-siteapp">
- <link rel="stylesheet" href="./static/css/main.css">
- <style>
- .mall-bottom{padding:0 .3733rem;height:54px;}
- .mall-bottom button{border-radius:999px !important; height:80% !important;}
- </style>
- </head>
- <body class="bgc-back pt0 ovh" style="padding-top:0;">
- <div id="app">
- <van-nav-bar class="user_rank_explan_title user_title_normal f16 rightbtn" title="收货地址" @click-left="back" v-if="toptitleisshow" left-arrow v-cloak>
- <template #left><img src="./static/images/icon-comback@2x.png" alt=""></template>
- </van-nav-bar>
- <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :class="list.length === 0 ? 'isnodata':''">
- <div class="address-list" style="height:calc(100vh - 20px);" v-cloak>
- <div class="address_list_add_addressbtn bgcfff df" @click="onAdd">
- <div class="add df"><img src="./static/images/address-add.png" alt=""><span class="f14 c333">新增收货地址</span></div>
- <van-icon name="arrow"></van-icon>
- </div>
- <van-list v-model="loading" :finished="finished" @load="onLoad" :immediate-check="false">
- <van-empty class="custom-image" image="./static/images/empty-img.png" description="暂无数据" v-if="isnodata"></van-empty>
- <van-address-list v-model="chosenAddressId" :list="list" @select="onSelected">
- <template #item-bottom="item">
- <div class="bottombox df">
- <div>
- <button class="c999" v-if="item.isDefault">默认地址</button>
- </div>
- <div class="option df">
- <div class="edit df" @click="onEdit(event,item.id)"><img src="./static/images/address-edit.png" alt=""><span class="f12 c666">编辑</span></div>
- <div class="delete df" @click="onDel(event,item.id)"><img src="./static/images/address-delete.png" alt=""><span class="f12 c666">删除</span></div>
- </div>
- </div>
- </template>
- </van-address-list>
- </van-list>
- </div>
- </van-pull-refresh>
- <van-goods-action class="mall-bottom" v-if="!iscenter">
- <van-goods-action-button type="default" color="#FFD500" style="color:#333;" text="确认" @click="onClickButton"></van-goods-action-button>
- </van-goods-action>
- </div>
- <script src="./static/js/klm-vv.min.js"></script>
- <script src="./static/js/appfunc.min.js"></script>
- <script src="./static/js/klm-axios-config.js"></script>
- <script src="./static/js/publicfn.js"></script>
- <script>
- function OnStart(){
- app.gettwoaddresslist();
- };
- // 通过 CDN 引入时不会自动注册 Lazyload 组件
- // 可以通过下面的方式手动注册
- Vue.use(vant.Lazyload);
-
- // 在 #app 标签下渲染一个按钮组件
- let app = new Vue({
- el: '#app',
- data() {
- return {
- isnodata:false,
- toptitleisshow:false,
- active: 0,
- chosenAddressId: 0,
- list: [
- ],
- checkaddressId:'',
- pageinfo:{
- PageSize:10,
- PageNum:1
- },
- loading: false,
- finished: false,
- refreshing: false,
- iscenter:false,
- };
- },
- created() {
- this.toptitleisshow = toptitleisshow;
- this.getaddresslist('refresh');
- if(PublicLib.getCookieInfo('iscentergoing') === 'true'){
- this.iscenter = true;
- PublicLib.putCookieInfo('iscentergoing','');
- };
- },
- methods: {
- onLoad() {
- if (this.refreshing) {
- this.refreshing = false;
- }
- this.pageinfo.PageNum++;
- this.getaddresslist();
- },
- onRefresh() {
- this.pageinfo.PageNum = 1;
- // 清空列表数据
- this.finished = false;
- // 重新加载数据
- // 将 loading 设置为 true,表示处于加载状态
- this.loading = true;
- if (this.refreshing) {
- this.refreshing = false;
- }
- this.getaddresslist('refresh');
- //- this.onLoad();
- },
- giveToast(str){
- vant.Toast(str);
- },
- onAdd() {
- PublicLib.putCookieInfo('addresstype', 1);
- PublicLib.Goto({Url:'mall-address-detail'});
- },
- onEdit(e,id) {
- e.stopPropagation()
- PublicLib.putCookieInfo('addresstype', 0);
- PublicLib.putCookieInfo('editaddressId', id);
- PublicLib.Goto({Url:'mall-address-detail'});
- },
- async onDel(e,Id) {
- e.stopPropagation();
- const UserId = PublicLib.getCookieInfo('userId');
- const res = await postRequest('api/v1/useraddress/delete?t='+Math.random(6),JSON.stringify({Id,UserId}));
- if(res.status !== '1'){
- return tips(res.info);
- }else{
- tips('删除地址成功');
- this.list.forEach((item,index)=>{
- if(item.Id === Id){
- this.list.splice(index,1);
- };
- });
- };
- },
- onSelected(item) {
- this.checkaddressId = item.Id;
- },
- back(){
- PublicLib.GoBack({Level:1});
- },
- //- 点击确定按钮
- onClickButton(){
- if(this.checkaddressId === '') return tips('请选择收货地址');
- PublicLib.putCookieInfo('addressId', this.checkaddressId);
- this.back();
- },
- async getaddresslist(type='onload'){
- const UserId = PublicLib.getCookieInfo('userId');
- const res = await getRequest('api/v1/useraddress/list?t='+Math.random(6),JSON.stringify({UserId,...this.pageinfo}));
- if(res.status !== '1') return tips('获取收货地址列表失败,请重试!');
- if(res.data.length<this.pageinfo.PageSize) {
- this.finished = true;
- };
- if(type==='refresh'){
- this.list =this.addressfn(res.data);
- this.refreshing = false;
- }
- if(type==='onload'){
- this.list.push(...this.addressfn(res.data));
- }
- //- this.list.push(...this.addressfn(res.data));
- this.loading = false;
- if(this.list.length === 0) {this.isnodata = true}else{this.isnodata = false};
- },
- async gettwoaddresslist(){
- this.pageinfo.PageNum = 1;
- const UserId = PublicLib.getCookieInfo('userId');
- const res = await getRequest('api/v1/useraddress/list?t='+Math.random(6),JSON.stringify({UserId,...this.pageinfo}));
- if(res.status !== '1') return tips('获取收货地址列表失败,请重试!');
- if(res.data.length<this.pageinfo.PageSize) {
- this.finished = true;
- };
- this.list = this.addressfn(res.data);
- this.loading = false;
- if(this.list.length === 0) {this.isnodata = true}else{this.isnodata = false};
- },
- //- 地址列表处理函数
- addressfn(data){
- data.forEach((item,index)=>{
- item.name = item.RealName;
- item.address = item.Areas.split(',').join('') + item.Address;
- item.tel = item.Mobile;
- item.id = item.Id;
- item.isDefault = item.IsDefault;
- if(item.IsDefault) {
- this.chosenAddressId = item.Id;
- this.checkaddressId = item.Id;
- };
- });
- return data;
- },
-
- }
- });
- </script>
- </body>
- </html>
|