老师 想要点击不同的地址进到编辑页面,在编辑页面中可以获取到进来的地址的id,要如何实现
来源:1-5 项目作业
lcy_18
2022-04-09 21:35:52
视频有类似的获取商店详情的信息通过route获取到商店id,我尝试了输出route.id是undefined,这里该如何获取到地址id呢


<template>
<div class="wrapper">
<div class="top">
<span class="iconfont top__icon"
@click="handleBackClick"></span>
<span class="top__title">编辑收货地址</span>
<span class="top__save"
@click="saveAddress">保存</span>
</div>
<form class="address">
<div class="address__same address__city">所在城市:<input type="text"
class="input"
placeholder="如厦门市"
v-model="city"></div>
<div class="address__same address__detail">详细地址:<input type="text"
class="input"
placeholder="如集美大学诚毅学院小高一"
v-model="detailAddress"></div>
<div class="address__same address__name">收货人:<input type="text"
class="input"
placeholder="请填写收货人的姓名"
v-model="name"></div>
<div class="address__same address__phone">联系电话:<input type="text"
class="input"
placeholder="请填写收货手机号"
v-model="phone"></div>
<div class="address__same address__default">是否设为默认地址: 是<input type="radio"
name="defaultElement"
value="1"
class="address__default__yes">否<input type="radio"
name="defaultElement"
value="0"
checked
class="address__default__no"></div>
</form>
<Toast v-if="showToast"
:message="toastMessage" />
</div>
</template>
<script>
import { useRouter, useRoute } from 'vue-router'
import { reactive, toRefs } from 'vue'
import { post } from '../../utils/request'
import Toast, { useToastEffect } from '../../components/Toast.vue'
// 处理编辑地址相关逻辑
const useNewAddressEffect = (changeToast) => {
const router = useRouter()
const data = reactive({
city: '',
detailAddress: '',
name: '',
phone: '',
defaultElement: 0
})
const saveAddress = async () => {
try {
const { city, detailAddress, name, phone } = data
if (city === '' || detailAddress === '' || name === '' || phone === '') {
changeToast('地址、收货人、电话不能为空')
return false
} else {
const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
if (reg.test(phone)) {
changeToast()
} else {
return changeToast('请输入正确的手机号')
}
}
const route = useRoute()
console.log('route:' + JSON.stringify(route))
const result = await post('/address/update', {
id: route.params.id,
city: data.city,
detailAddress: data.detailAddress,
name: data.name,
phone: data.phone,
defaultElement: data.defaultElement
})
if (result?.code === 1) {
changeToast('地址更新成功成功')
setTimeout(() => {
router.push({ name: 'Address' })
}, 2000)
} else {
changeToast('修改失败')
}
} catch (e) {
changeToast('请求失败')
}
}
const { city, detailAddress, name, phone, defaultElement } = toRefs(data)
return { city, detailAddress, name, phone, defaultElement, saveAddress }
}
// 点击回退逻辑
const useBackRouterEffect = () => {
const router = useRouter()
const handleBackClick = () => {
router.back()
}
return handleBackClick
}
export default {
name: 'UpdateAddress',
components: { Toast },
setup () {
const handleBackClick = useBackRouterEffect()
const { showToast, toastMessage, changeToast } = useToastEffect()
const { city, detailAddress, name, phone, defaultElement, saveAddress } = useNewAddressEffect(changeToast)
return { handleBackClick, showToast, toastMessage, city, detailAddress, name, phone, defaultElement, saveAddress }
}
}
</script>
<style lang="scss" scoped>
@import "../../style/viriables.scss";
.wrapper {
overflow-y: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #f8f8f8;
}
.top {
position: relative;
height: 0.44rem;
line-height: 0.44rem;
background: $bgColor;
margin-bottom: 0.12rem;
&__icon {
font-size: 0.22rem;
position: absolute;
left: 0.18rem;
}
&__title {
font-size: 0.16rem;
color: $content-fontcolor;
position: absolute;
left: 50%;
margin-left: -0.48rem;
}
&__save {
font-size: 0.14rem;
position: absolute;
right: 0.18rem;
}
}
.address {
box-sizing: border-box;
background: $bgColor;
padding: 0 0.18rem;
&__same {
height: 0.44rem;
line-height: 0.44rem;
border-bottom: 0.01rem solid $content-bgColor;
font-size: 0.14rem;
color: $medium-fontColor;
display: flex;
}
.input {
flex: 1;
border-style: none;
outline: medium;
}
&__default {
&__yes {
width: 0.5rem;
position: relative;
top: 0.16rem;
}
&__no {
width: 0.5rem;
position: relative;
top: 0.16rem;
}
}
}
</style>
1回答
好帮手慕慕子
2022-04-10
同学你好,只有部分代码,无法准确定位问题,老师这里给同学提供一个参考的实现思路,可以参考视频中老师讲解的点击附近店铺,跳转到shop页面的思路,如下:
1、配置动态路由,设置路径参数

2、进入shop页面时,传递对应的参数,如下:

3、结合useRoute获取传递过来的参数,示例:


同学可以重点检查下是否是前两步存在问题,对比修改下
祝学习愉快~
相似问题