收货地址
1. 添加收货地址
a> 采用微信自带的形式 : uni.chooseAddress
***但是要注意，在 manifest.json的mp-weixin节点中
加上：
"requiredPrivateInfos": ["getLocation", "chooseLocation", "chooseAddress"]b> 用户自定义去设置
2. 选择收货地址
a> 我的==>地址 进入列表
不能点击某一行【不具备选择能力】==》修改和删除能力
b> 确认订单==>地址 进入列表
选择、修改、删除
address-list（包括获取微信地址、点击某地址给订单页修改path地址）
<template>
<view class='path'>
<view v-if='addressData.length == 0'>
<view>暂无收货地址</view>
</view>
<view v-else>
<view class='path-item' v-for='(item,index) in addressData' :key='item.id' @click="selectAddress(item)">
<view class='path-name'>
<!-- <image src="../static/img/address.png" mode=""></image> -->
<view>
<view>{{ item.name }} {{item.mobile}}</view>
<view>{{item.province}} - {{ item.city }} - {{ item.county }} - {{ item.address }}</view>
</view>
<view class="" @click.shop="update(item)">
修改
</view>
<!-- <image src="../static/img/bianji.png" mode=""></image> -->
</view>
<view class='path-default'>
<!-- <u-checkbox-group v-if="item.defaulted">
<u-checkbox :value='item.defaulted'>
</u-checkbox>
</u-checkbox-group> -->
<u-radio-group v-model='item.defaulted' v-if="item.defaulted">
<u-radio :name='item.defaulted'></u-radio>
</u-radio-group>
<view @click='delAddress({id:item.id,index})'>删除</view>
<!-- <image src="../static/img/logout.png" mode=""></image> -->
</view>
</view>
</view>
<button class='add-path' @click='addAddress'>添加收货地址</button>
</view>
</template>
<script>
import {
address,
addressList,
deleteAddress
} from '@/untils/api/address.js'
export default {
data() {
return {
type: 0, //收货地址类型
list: ['1', '2', '3'],
addressData: [], //收货地址列表
}
},
onLoad(e) {
this.type = e.type;
},
async onShow() {
let res = await addressList();
this.addressData = res.data;
},
methods: {
//添加收货地址
addAddress() {
uni.showModal({
title: '提示',
content: '是否使用微信地址?',
success: (res) => {
if (res.confirm) {
uni.chooseAddress({
success(params) {
let data = {
name: params.userName,
mobile: params.telNumber,
province: params.provinceName,
city: params.cityName,
county: params.countyName,
address: params.detailInfo,
defaulted: 0
}
address(data).then(res => {
console.log(res)
})
}
})
} else {
//用户采用自定义地址
uni.navigateTo({
url: '/address/add-address'
})
}
}
})
},
//删除收货地址
delAddress(params) {
let {
id,
index
} = params;
let that = this;
uni.showModal({
title: '提示',
content: '删除收货地址?',
success(res) {
if (res.confirm) {
deleteAddress(id).then(res => {
if (res.code == '200') {
that.addressData.splice(index, 1);
}
})
}
}
})
},
selectAddress(item) {
if (!this.type) return;
// 获取当前页面的栈实例
let currentPage = getCurrentPages()
// 获取上一个页面
let parent = currentPage[currentPage.length - 2]
// 当前页面直接修改上一个页面的数据
parent.$vm.path = item;
uni.navigateBack();
},
update(item) {
let obj = JSON.stringify(item)
uni.navigateTo({
url: `/address/add-address?params=${obj}`
})
},
}
}
</script>address=>三级联动
<view class="">
<u-form :model='userInfo' ref="uForm">
<u-form-item label="收货人" prop="name">
<u-input v-model="userInfo.name" />
</u-form-item>
<u-form-item label="手机号码" prop="mobile">
<u-input v-model="userInfo.mobile" />
</u-form-item>
<u-form-item label="所在地区">
<u-cell :value="cityVal" @click="show=true"></u-cell>
<u-picker :show="show" ref="uPicker" :columns="columns" @cancel='show=false' @confirm='confirm'
@change='changeHandel'></u-picker>
</u-form-item>
<u-form-item label="详细地址">
<u--textarea v-model="userInfo.address" placeholder="请输入详细地址信息"></u--textarea>
</u-form-item>
<u-form-item label="设为默认地址">
<!-- <u-checkbox-group v-model="[checked]">
<u-checkbox :name='checked' @change="onChange">
</u-checkbox>
</u-checkbox-group> -->
<u-switch v-model="inactiveValue" @change="onChange"></u-switch>
<!-- <u-radio :name='checked' @click="onChange"></u-radio> -->
</u-form-item>
<u-form-item>
<u-button class='add-path' @click="submit">提交</u-button>
</u-form-item>
</u-form>
</view>
</template>
<script>
import {
addressList
} from '@/untils/address.js';
import {
address,
updateAddress
} from '@/untils/api/address.js';
export default {
data() {
return {
//数据项
userInfo: {
name: '',
mobile: '',
province: '',
city: '',
county: '',
address: '',
defaulted: 0,
},
cityVal: '省/市/区',
show: false,
inactiveValue: false,
// 三级联动
columns: [],
type: 0, //上一个页面的类型
// 详细地址文本域
address: '',
rules: {
name: [{
type: 'string',
required: true,
message: '请输入姓名',
// 可以单个或者同时写两个触发验证方式
trigger: ['blur', 'change']
}],
intro: [{
required: true,
type: 'string',
message: '请填写手机号',
trigger: ['blur', 'change']
}]
}
}
},
onLoad(e) {
if (e.params) {
this.type = 1;
// 证明是从点击修改页进来的
this.userInfo = JSON.parse(e.params)
this.inactiveValue = this.userInfo.defaulted == 1 ? true : false
this.cityVal = this.userInfo.province + '/' + this.userInfo.city + '/' + this.userInfo.county
}
this.handelData()
},
methods: {
// 初始化三级联动数据
handelData() {
let province = [];
let city = [];
let county = [];
addressList.forEach(item => {
province.push(item.value)
// 第一个省的二级
if (item.code == '110000') {
item.children.forEach(child => {
city.push(child.value)
// 三级
if (child.code == '110100') {
child.children.forEach(el => {
county.push(el.value)
})
}
})
}
})
this.columns.push(province, city, county)
},
confirm(e) {
// 选择三级联动的数据
let [province, city, county] = e.value;
this.show = false;
this.cityVal = province + '/' + city + '/' + county;
this.userInfo.province = province;
this.userInfo.city = city;
this.userInfo.county = county;
},
onChange(e) {
this.inactiveValue = e
if (e) {
this.userInfo.defaulted = 1
} else {
this.userInfo.defaulted = 0
}
console.log(this.userInfo.defaulted)
},
changeHandel(e) {
/*
columnIndex: 0
index: 1
indexs: (3) [1, 0, 0]
value: (3) ["天津市", "北京市", "东城区"]
values: (3) [Array(33), Array(1), Array(16), __ob__: Observer]
*/
let {
columnIndex,
index,
indexs,
value,
values
} = e
const picker = this.$refs.uPicker
// 省数据的切换
if (columnIndex == 0) {
addressList.forEach(item => {
if (value[0] == item.value) {
let city = [];
let flag = item.children[0].value
item.children.forEach(el => {
city.push(el.value)
if (city[0] == flag) {
let county = []
el.children.forEach(v => {
county.push(v.value)
})
picker.setColumnValues(2, county)
}
})
picker.setColumnValues(1, city)
}
})
} else if (columnIndex == 1) { //市数据的切换
addressList.forEach(item => {
if (value[0] == item.value) {
let city = [];
let flag = value[1]
item.children.forEach(el => {
city.push(el.value)
if (el.value == flag) {
let county = []
el.children.forEach(v => {
county.push(v.value)
})
picker.setColumnValues(2, county)
}
})
}
})
}
},
// 保存新增收货地址
async submit() {
//修改收货地址
if (this.type == 1) {
let res = await updateAddress(this.userInfo);
uni.navigateBack();
return;
}
let res = address(this.userInfo)
console.log(res)
},
}
}
</script>二十一、修饰符
1. 你知道那些修饰符
2. 在什么情况下使用过修饰符
用户在确认订单页面==》选择收货地址时，本身选择了后可以返回上一个页面（确认订单页面），但是用户也可以点击修改操作，
那么这个修改操作就需要阻止冒泡行为
.prevent
3. v-model 本身是oninput事件如果要修改成change事件怎么修改==》修饰符
<input v-model.lazy="msg">
大概列表：https://blog.csdn.net/m0_64969829/article/details/122881221
<body ondragstart="return false" oncontextmenu="return false">//防止鼠标右键点击出现菜单，防止拖拽图片
<img src="" alt="">
<img src="" alt="">
</body>我的页面
上下拉优化-懒加载
相关作者
这个人很懒，什么都没有留下
- 获取点赞0
- 文章阅读量264
评论（）