TmOct5/BlockChainH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

[商城整个模块，及个人中心相应的模块调整]

Browse Source
This commit is contained in:
张冬雪
2021-10-27 14:18:46 +08:00
parent e6181694d2
commit 2c1f11afd7
77 changed files with 14646 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

271
pages/user/address/list.vue Normal file
View File

@@ -0,0 +1,271 @@
<template>
<view class="Address-list" v-if="loaded">
<!-- 收货地址列表 -->
<view class="addr-list" v-for="(item,index) in addressLists" v-if="addressLists.length>0" @tap="select(index)"
:key="index">
<view class="addr-name-phone"> <span class="name">{{item.name}}</span> <span class="phone">
{{item.mobile}}</span>
</view>
<view class="addr-des">{{item.full_address}}</view>
<view class="moren-edit-del">
<view class="moren" :style="item.default?'':'color:#cacaca'+'!important;'"
@click.stop="moren(item.default+','+item.address_id)">
<uni-icons class="uni-icons" type="checkbox-filled" size="20"
:color="item.default?'#8b64fd':'#cacaca'">
</uni-icons>
默认
</view>
<view class="edit-del">
<view class="edit" @click.stop="edit(item.address_id)">
<uni-icons class="uni-icons" type="compose" size="16" color="#666"></uni-icons>编辑
</view>
<view class="del" @click.stop="del(item.address_id)" v-if="type != 'selectSite'">
<uni-icons type="trash" size="16" color="#666"></uni-icons> 删除
</view>
</view>
</view>
</view>
<view>
<!-- 底部新增按钮 -->
<uni-fab horizontal="left" vertical="bottom" :pattern='pattern' @fabClick="fabClick" />
</view>
<!-- 没有收货地址 -->
<no-list v-if="addressLists.length === 0" name='no-addr' txt="您还没有收货地址哦~" />
<!-- 请求中... -->
<!-- <view>{{loading?'请求中....':'请求结束'}}</view> -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import {
addresses,
addAddresses,
getAddresses,
delAddresses,
defaultAddresses,
editAddresses
} from '@/apis/interfaces/address'
export default {
data() {
return {
addressLists: [],
type: '', //用于分辨是否从订单页面-选择地址 有值为订单页面来源 === 1 是返回上一页时候处理上一页参数
loaded: false, //默认页面不可渲染，请求接口后可以渲染
pattern: {
buttonColor: '#8b64fd'
}
};
},
onLoad(e) {
console.log(e)
if (e.type !== undefined) {
this.type = e.type
}
},
// 下拉刷新
onPullDownRefresh() {
// this.getAddr()
},
onShow() {
this.getAddr()
},
methods: {
// 新增
fabClick() {
uni.navigateTo({
url: '/pages/user/address/create'
})
},
// 修改
edit(id) {
uni.navigateTo({
url: '/pages/user/address/create?id=' + id
})
},
// 删除
del(id) {
let that = this
uni.showModal({
title: '是否确认删除',
success: (res) => {
if (res.confirm) {
delAddresses(id).then(res => {
that.$refs.uToast.show({
title: res,
type: 'primary',
duration: 3000
})
that.getAddr()
}).catch(err => {
that.$refs.uToast.show({
title: err.message,
type: 'primary',
duration: 3000
})
})
}
}
})
},
// 默认
moren(data) {
let defaultT = data.split(',')[0]
let id = data.split(',')[1]
if (defaultT === 'false') {
defaultAddresses(id).then(res => {
this.$refs.uToast.show({
title: res,
type: 'primary',
duration: 3000
})
setTimeout(res => {
this.getAddr()
}, 500)
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'primary',
duration: 3000
})
})
}
},
// 获取列表
getAddr() {
this.loaded = true
addresses().then(res => {
this.addressLists = res
uni.stopPullDownRefresh()
console.log(this.type === '1', this.type)
if (this.type == '1') {
if (this.addressLists.length === 0) {
let pages = getCurrentPages();
let nowPage = pages[pages.length - 1];
let prevPage = pages[pages.length - 2];
prevPage.$vm.address = '';
} else {
let pages = getCurrentPages();
let nowPage = pages[pages.length - 1];
let prevPage = pages[pages.length - 2];
prevPage.$vm.address = res[0];
}
}
uni.setStorageSync('refresh', false)
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'primary',
duration: 3000
})
})
},
// 选择地址跳转
select(index) {
if (this.type == '1') {
let pages = getCurrentPages();
let nowPage = pages[pages.length - 1];
let prevPage = pages[pages.length - 2];
prevPage.$vm.address = this.addressLists[index];
uni.navigateBack({
delta: 1
})
}
}
}
}
</script>
<style lang="scss" scoped>
.Address-list {
width: 100%;
min-height: 100vh;
padding: $padding;
box-sizing: border-box;
// margin-bottom: 150rpx;
.no-more-addr {
font-size: $title-size*0.9;
color: $text-price;
uni-icons {
padding-right: $padding*0.5;
}
}
// 地址列表
.addr-list {
box-shadow: 0 0 10rpx 0 rgba($color: #000000, $alpha: 0.1);
padding: $padding $padding*1.5;
background-color: #fff;
margin-bottom: $margin;
border-radius: $radius*0.5;
.name {
color: #353535;
font-weight: bold;
font-size: $title-size*1.1;
}
.phone {
margin-left: $margin*2;
}
.addr-des {
padding: $padding*.9 0 $padding*1 0;
font-size: $title-size-m;
border-bottom: solid #f8f8f8 1rpx;
color: $text-color;
}
.moren-edit-del {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding-top: $padding;
.moren,
.edit-del {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
font-size: $title-size*0.9;
color: $text-price;
.uni-icons {
padding-right: $padding*0.5;
}
.edit {
padding-right: $padding*1.5;
color: $text-color;
}
.del {
color: $text-color;
}
}
}
}
// 新增地址
.besure {
background-color: $text-price;
color: #fff;
text-align: center;
margin: $margin*1.5;
border-radius: $radius;
padding: $padding*1.3;
position: absolute;
}
}
</style>