前端 - 把别人的后端接口数据导入到自己新的接口项目，接口请求后为什么不管点击哪个模块都会跳转到同一个页面?

Question

把别人的后端接口数据导入到自己新的接口项目后，接口地址改成自己的之后,写service.stype == 10 || service.stype == 15 || service.stype == 20，然后不管点击哪个模块都是跳转到同一个页面是为什么？
例如点击开心取药或上门助浴都是跳转到下方的那个页面

前端代码:

<template>
<view>
<block v-if="service.stype == 10 || service.stype == 15 || service.stype == 20 ">
    <view class="pub-box">
        <view class="pub-box-bd">
            <view class="weui-cell weui-cell_input">
                .....//功能1
            </view>
            <view class="weui-cell weui-cell_input">
                ....//功能2
            </view>
            <view class="weui-cell weui-cell_input" @click="onClientChange">
                ....//功能3
            </view>
        </view>
    </view>
</block>
</template>

<script setup>部分数据：

import { ref, reactive ,computed,toRaw} from 'vue'
import {onLoad} from '@dcloudio/uni-app'
const app = getApp()
onLoad((options) => {
    console.log(options,'options')
    main_load(options)
})
//页面服务详情数据
const service = ref({})

const main_load = (options) => {
    app.globalData.utils.request({
        url:'/Service/order',
        data:{
            svid:options.svid
        },
        success:(res) => {
            console.log(res)
            service.value = res.data.service; 
        }
    })
}

后端部分数据：

{
    "code": 10000,
    "msg": "",
    "time": "1707110701",
    "data": {
        "now": 1707110701,
        "services": [
            {
                "id": 1,
                "code": "dp",
                "stype": "40",
                "name": "代跑取药",
                "intro": "人工带跑取药，省时省力",
                "price": "0.01",
                "priceo": "100.00",
                "use_switch": 1,
                "stype_text": "Stype 40"
            },
            {
                "id": 2,
                "code": "pz",
                "stype": "15",
                "name": "就医陪诊（半天）",
                "intro": "就医陪诊，值得托付",
                "price": "0.01",
                "priceo": "150.00",
                "use_switch": 1,
                "stype_text": "Stype 15"
            }
        ]
    }
}

②

{
    "code": 10000,
    "msg": "",
    "time": "1700982698",
    "data": {
        "now": 1700982698,
        "navs": [
            {
                "id": 3,
                "stype": "1",
                "stype_link": "/pages/service/index?svid=1&hid=5",
                "title": "开心取药",
                "tcolor": "",
                "cat_text": "",
                "stype_text": "Stype 1"
            },
            {
                "id": 4,
                "stype": "1",
                "stype_link": "/pages/service/index?svid=4&hid=5",
                "title": "上门助浴",
                "tcolor": "",
                "cat_text": "",
                "stype_text": "Stype 1"
            }
        ],
    }
}

..

Answer 1

### 解答

问题出现的原因是在你的前端代码中，`service.stype` 的值并未根据点击的模块动态更新，而是一直保持为初始加载时的值或者是最后一次请求返回的服务详情中的 `stype` 值。这导致了不管点击哪个模块，只要 `service.stype` 的值符合 `10`, `15`, 或 `20` 中的任意一个，就会渲染同一个页面块。

具体来说，问题出在以下几个方面：

1. **service 数据未根据点击事件更新**：
   你的代码中只有一个地方更新了 `service`，即 `main_load` 函数中根据 `options.svid` 请求数据。这意味着无论用户点击哪个模块，只要 `svid` 相同，`service` 的值就会一样。

2. **错误的条件判断**：
   你的模板代码 `<block v-if="service.stype == 10 || service.stype == 15 || service.stype == 20 ">` 只会检查 `service.stype` 是否为 10, 15, 或 20，并不根据导航项的 `stype` 来动态渲染内容。

### 解决方案

为了解决这个问题，你需要确保每个导航项点击时能够正确加载对应的服务详情，并且根据服务的 `stype` 动态渲染不同的页面内容。以下是可能的解决方案：

1. **修改导航项的点击事件**：
   为每个导航项添加点击事件处理器，确保点击时能够更新 `service` 的值。

2. **动态渲染页面内容**：
   根据 `service.stype` 的值动态渲染不同的页面内容，而不是只检查固定的几个值。

例如，你可以修改你的导航项点击事件处理器如下：

<template>
<view>

<block v-for="nav in navs" :key="nav.id">
  <view @click="onNavClick(nav)">
    {{ nav.title }}
  </view>
</block>
<block v-if="service.stype">
  <!-- 根据 service.stype 动态渲染内容 -->
  <view v-if="service.stype == 10">
    <!-- 渲染 stype 为 10 的内容 -->
  </view>
  <view v-else-if="service.stype == 15">
    <!-- 渲染 stype 为 15 的内容 -->
  </view>
  <view v-else-if="service.stype == 20">
    <!-- 渲染 stype 为 20 的内容 -->
  </view>
  <!-- 其他 stype 的处理 -->
</block>

</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const app = getApp()
const navs = ref([
// 导航项数据，从后端获取或静态定义
])
const service = ref({})

const onNavClick = (nav) => {
main_load({ svid: nav.svid })
}

const main_load = (options) => {
app.globalData.utils.request({

url: '/Service/order',
data: {
  svid: options.svid
},
success: (res) => {
  console.log(res)
  service.value = res.data.service; 
}

})
}

onLoad(() => {
// 初始加载逻辑，可能需要从后端获取导航项数据
// 例如：app.globalData.utils.request({ url: '/path/to/navs', success: (res) => { navs.value = res.data.navs } })
})
</script>

注意：这里的 `navs` 数据需要从后端获取或者静态定义，确保包含所有导航项的信息。