TmOct5/barter-app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

同步

Browse Source
This commit is contained in:
唐明明
2021-09-16 13:59:16 +08:00
parent 6a9b350413 6946d6bc82
commit 899dd2d9b1
171 changed files with 37420 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

302
pages/property/address/create.vue Normal file
View File

@@ -0,0 +1,302 @@
<template>
<view class="address-create" v-if="isloaded">
<view class="list-item">
<view class="item">收货人 <input placeholder-class="placeholder-style" maxlength="10" v-model="name"
placeholder="请输入收货人姓名" />
</view>
</view>
<view class="list-item">
<view class="item">联系电话 <input placeholder-class="placeholder-style" v-model="mobile" type="number" maxlength="11"
placeholder="请输入收货人手机号码" /></view>
</view>
<view class="list-item">
<view class="item">所在区域
<span @click="btnClick()">{{addressTxt || '请选择省市区县,乡镇等'}}</span>
</view>
</view>
<view class="list-item">
<view class="item">详细地址 <textarea placeholder-class="placeholder-style" v-model="address" auto-height
placeholder="请完善详细街道,楼牌号等" />
</view>
</view>
<view class="list-item moren">
<view class="item">
<view class="uni-list-cell-db">设置默认地址</view>
<switch @change="switchChange" :checked="is_default" color='#e93340' style="transform:scale(0.9)" />
</view>
</view>
<view class="besure" @click="besure">保存</view>
<selectAddress ref='selectAddress' :addressIdList='addressIdList' @selectAddress="successSelectAddress" />
<!-- <u-toast ref="uToast" /> -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import selectAddress from '@/components/yixuan-selectAddress/yixuan-selectAddress.vue'
import cityData from '@/static/yixuan-selectAddress/city.json'
import {
addAddresses,
getAddresses,
editAddresses
} from '@/apis/interfaces/address'
export default {
components: {
selectAddress
},
data() {
return {
name: '', //姓名
mobile: '', //电话
address: '', //详细地址
is_default: false, //默认 1=默认
addressTxt: '', // 已选择的地址显示 (页面显示)
addressIdList: [], // 向子组件传递参数数组[3,36,37] 即显示默认值【province_id，province_id，district_id】
addressId: '',
isloaded: false
};
},
onLoad(e) {
if (!!e.id) {
uni.setNavigationBarTitle({
title: '编辑地址'
})
this.addressId = e.id
this.getInfo(e.id)
} else {
this.isloaded = true
}
},
methods: {
// 根据地址id获取地址的详细信息
getInfo(id) {
getAddresses(id).then(res => {
const array = [res.province.region_id, res.city.region_id, res.district.region_id]
this.addressIdList = array
this.name = res.name
this.mobile = res.mobile
this.address = res.address
this.addressTxt = res.province.name + ' ' + res.city.name + ' ' + res.district.name
this.is_default = res.default
this.isloaded = true
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'primary',
duration: 3000
})
})
},
// 是否勾选默认
switchChange(e) {
this.is_default = e.target.value
},
// 点击省市区选择
btnClick() {
this.$refs.selectAddress.show()
},
besure() {
let params = {
name: this.name,
mobile: this.mobile,
address: this.address,
is_default: this.is_default ? 1 : 0,
province_id: this.addressIdList[0],
city_id: this.addressIdList[1],
district_id: this.addressIdList[2]
}
console.log(params,'params。。。')
if (params.name.trim() === '') {
uni.showToast({
title: '请重新核对姓名',
icon: 'none'
})
} else if (params.mobile.trim() === '' || params.mobile.trim().length !== 11) {
uni.showToast({
title: '请重新核对手机号码',
icon: 'none'
})
} else if (this.addressIdList[0] === undefined || this.addressIdList[1] === undefined || this.addressIdList[
2] === undefined) {
uni.showToast({
title: '请完善省市区信息',
icon: 'none'
})
} else if (params.address.trim() === '') {
uni.showToast({
title: '请完善详细的收货地址',
icon: 'none'
})
} else {
if (this.addressId) {
editAddresses(this.addressId, params).then(res => {
this.$refs.uToast.show({
title: res,
type: 'primary',
duration: 3000
})
uni.setStorageSync('refresh',true)
uni.navigateBack({})
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'primary',
duration: 3000
})
})
} else {
addAddresses(params).then(res => {
this.$refs.uToast.show({
title: res,
type: 'primary',
duration: 3000
})
uni.navigateBack({})
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'primary',
duration: 3000
})
})
}
}
},
// 选择成功回调
successSelectAddress(address) {
if (address[0].id) {
this.addressIdList = [address[0].id, address[1].id, address[2].id]
this.addressTxt = address[0].name + ' ' + address[1].name + ' ' + address[2].name
}
},
}
}
</script>
<style lang="scss">
.Create-addr {
line-height: 100vh;
background-color: #fff;
}
.list-item {
padding: 0 $padding*1.5;
background-color: #fff;
.item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: $padding 0;
border-bottom: solid #f8f8f8 1rpx;
font-size: $title-size - 2;
color: #333;
input,
textarea,
span,
.picker {
color: #353535;
font-size: $title-size - 1;
width: 74%;
}
.picker {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
.picker-item {
width: 33.33%;
border: solid 1rpx #ccc;
text-align: center;
}
}
.placeholder-style {
color: #ccc;
}
}
}
.moren {
border-top: $padding solid #f7f7f7;
}
.besure {
background-color: $text-price;
color: #fff;
text-align: center;
margin: $margin*1.5;
border-radius: $radius;
padding: $padding*1.3;
}
.popup {
min-height: 500rpx;
.popup-top {
position: relative;
font-size: $title-size - 4;
.title {
text-align: center;
padding: $padding*1.5 $padding*2;
border-bottom: solid 1rpx #f7f7f7;
}
.select {
position: absolute;
top: $padding;
right: $padding;
color: $text-price;
}
}
.addr-show {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
padding: 0 $padding *3;
font-size: $title-size;
.addr-show-item {
padding: $padding*1.5 0;
margin-right: $margin*2;
max-width: 33.33%;
overflow: hidden;
}
.picker-item-selected {
border-bottom: solid $text-price 4rpx;
}
}
.scroll-Y {
height: 60vh;
padding: $padding*2;
box-sizing: border-box;
.scroll-item {
padding: $padding*1.5 0;
border-bottom: solid .25rpx rgba($color: #000000, $alpha: 0.02);
color: #353535;
font-size: $title-size;
.pr20 {
padding-right: 20rpx;
}
}
}
}
</style>

270
pages/property/address/list.vue Normal file
View File

@@ -0,0 +1,270 @@
<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?'#e93340':'#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"></uni-fab>
</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:'#e93340'
}
};
},
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/property/address/create'
})
},
// 修改
edit(id) {
uni.navigateTo({
url: '/pages/property/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>

18
pages/property/index.vue
View File

@@ -3,10 +3,10 @@
<!-- 用户信息 -->
<view class="user">
<view class="user-tool">
<image src="@/static/icons/user_icon_00.png" mode="widthFix"></image>
<image src="@/static/icons/user_icon_00.png" mode="widthFix" />
</view>
<view class="user-content">
<image class="info-cover" src="../../static/dev/good_cover_00.jpg" mode="aspectFill"></image>
<image class="info-cover" src="../../static/dev/good_cover_00.jpg" mode="aspectFill" />
<view class="info-nickname">唐明明</view>
<view class="info-signa">潮流就是我的态度</view>
<view class="info-tags">
@@ -84,19 +84,19 @@
<view class="user-group">
<view class="group-flex group-flex-4">
<view class="item">
<image class="item-cover" src="@/static/icons/user_icon_01.png" mode="aspectFill"></image>
<image class="item-cover" src="@/static/icons/user_icon_01.png" mode="aspectFill" />
<view class="item-title">商品收藏</view>
</view>
<view class="item">
<image class="item-cover" src="@/static/icons/user_icon_02.png" mode="aspectFill"></image>
<image class="item-cover" src="@/static/icons/user_icon_02.png" mode="aspectFill" />
<view class="item-title">关注企业</view>
</view>
<view class="item">
<image class="item-cover" src="@/static/icons/user_icon_03.png" mode="aspectFill"></image>
<image class="item-cover" src="@/static/icons/user_icon_03.png" mode="aspectFill" />
<view class="item-title">我的优惠券</view>
</view>
<view class="item" @click="outLogin">
<image class="item-cover" src="@/static/icons/user_icon_04.png" mode="aspectFill"></image>
<view class="item" @click="$Router.push({name:'AddressList'})">
<image class="item-cover" src="@/static/icons/user_icon_04.png" mode="aspectFill" />
<view class="item-title">地址管理</view>
</view>
</view>
@@ -130,14 +130,14 @@
<view class="ranking-text">全站推广人数</view>
<view class="ranking-number">5</view>
</view>
<image class="tips" src="../../static/icons/property_icon_00.png" mode="aspectFill"></image>
<image class="tips" src="../../static/icons/property_icon_00.png" mode="aspectFill" />
</view>
<view class="ranking">
<view class="ranking-title">
<view class="ranking-text">推广企业</view>
<view class="ranking-number">5</view>
</view>
<image class="tips" src="../../static/icons/property_icon_01.png" mode="aspectFill"></image>
<image class="tips" src="../../static/icons/property_icon_01.png" mode="aspectFill" />
</view>
</view>