老师 想要点击不同的地址进到编辑页面,在编辑页面中可以获取到进来的地址的id,要如何实现

来源:1-5 项目作业

lcy_18

2022-04-09 21:35:52

视频有类似的获取商店详情的信息通过route获取到商店id,我尝试了输出route.id是undefined,这里该如何获取到地址id呢

https://img.mukewang.com/climg/62518ac409b382e404530514.jpg

https://img.mukewang.com/climg/62518b1b09bc4be004390339.jpg

<template>

  <div class="wrapper">

    <div class="top">

      <span class="iconfont top__icon"

            @click="handleBackClick">&#xe8ef;</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">是否设为默认地址:&nbsp;&nbsp;是<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、配置动态路由,设置路径参数

https://img.mukewang.com/climg/62524cf70984fb2810070161.jpg

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

https://img.mukewang.com/climg/62524d8a0905fcb605650308.jpg

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

https://img.mukewang.com/climg/62524f8a093b5dc808100440.jpg

https://img.mukewang.com/climg/62524f9809157ded11140220.jpg

同学可以重点检查下是否是前两步存在问题,对比修改下

祝学习愉快~

0

0 学习 · 15276 问题

查看课程