HS_MZAP/src/views/placeManage/placeTabletInfo.vue

<template>
  <van-nav-bar
    fixed
    title="牌位详细信息"
    left-arrow
    @click-left="onClickLeft"
    :style="{ 'background-color': selectColor }"
  />
  <div class="main">
    <div class="banner">
      <img src="../../../public/loginbg/banner.jpg" alt="" />
    </div>
    <div class="info">
      <p class="miniTitle">牌位信息-{{ dataitem.brandName }}</p>
      <van-row justify="space-between">
        <van-col span="24">
          <van-row class="item">
            <van-col span="24">
              <van-row justify="space-between">
                <van-field
                  v-model="dataitem.brandName"
                  center
                  readonly
                  clearable
                  label="名称:"
                  input-align="right"
                />
              </van-row>
            </van-col>
          </van-row>
          <van-row class="item">
            <van-col span="24">
              <van-row justify="space-between">
                <van-field
                  v-model="data.siteName.name"
                  center
                  readonly
                  clearable
                  label="场所名称:"
                  input-align="right"
                />
              </van-row>
            </van-col>
          </van-row>
          <van-row class="item">
            <van-col span="24">
              <van-row justify="space-between">
                <van-field
                  v-model="dataitem.memorialTabletHolder"
                  center
                  readonly
                  clearable
                  label="场所联系人:"
                  input-align="right"
                />
              </van-row>
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-field
              v-model="dataitem.memorialTabletHolderPhone"
              center
              readonly
              clearable
              label="联系方式:"
              input-align="right"
            />
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-field
              v-model="dataitem.contactInformation"
              center
              readonly
              clearable
              label="供奉牌位人:"
              input-align="right"
            />
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-field
              v-model="dataitem.siteContact"
              center
              readonly
              clearable
              label="牌位人电话:"
              input-align="right"
            />
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-field
              v-model="dataitem.udCard"
              center
              readonly
              clearable
              label="身份证号:"
              input-align="right"
            />
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-field
              v-model="dataitem.currentResidence"
              center
              readonly
              clearable
              label="籍贯:"
              input-align="right"
            />
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-field
              v-model="dataitem.nativePlace"
              center
              readonly
              clearable
              label="现居地:"
              input-align="right"
            />
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-field
              v-model="dataitem.currentResidenceDel"
              center
              readonly
              clearable
              label="现居地详情:"
              input-align="right"
            />
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-field
              v-model="dataitem.relationship"
              center
              readonly
              clearable
              label="与供奉牌位关系:"
              input-align="right"
            />
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-field
              v-model="dataitem.sacrificeExpenses"
              center
              readonly
              clearable
              label="供奉费用(元/年):"
              input-align="right"
            />
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-field
              v-model="dataitem.information"
              center
              readonly
              clearable
              label="被供奉者信息:"
              input-align="right"
            />
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row>
            <van-field
                  center
                  readonly
                  clearable
                  label="牌位照片："
                  label-align="top"
                >
                  <template #input>
                    <van-image v-for="(item, index) in data.pic" :key="index" width="100" height="100" :src="item" />
                  </template>
                </van-field>
          </van-row>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { onMounted, reactive, ref } from "vue";
import $base from "@/utils/config";
export default {
  setup() {
    const data = reactive({
      siteName: {},
      pic: [],
    });
    // 导航栏颜色
    const selectColor = ref(window.localStorage.getItem("MZ_COLOR"));
    //牌位数据
    let dataitem = ref({});
    //数据接收
    const router = useRouter();
    onMounted(() => {
      var item = JSON.parse(router.currentRoute.value.query.data);
      dataitem.value = item;
      data.siteName = dataitem.value.siteName;
      let pic = [];
      pic = dataitem.value.pic.split("|");
      dataitem.value.pic = pic;
      data.pic = dataitem.value.pic;
      let picList = [];
      data.pic.forEach((item1) => {
        // item1 = `${$base}`+item1
        picList.push(`${$base}` + item1);
      });
      data.pic = picList;
      // console.log(data.pic);
    });
    //返回
    const onClickLeft = () => {
      history.back();
    };
    return {
      onClickLeft,
      data,
      dataitem,
      selectColor,
    };
  },
};
</script>

<style lang="less">
</style>