sociology_app/pages/medicaldes/recordDetail.vue

<template>
   
  <view class="container">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
    <z-nav-bar
      :title="prescriptDetail.title"
      bgColor="#3AB3AE"
      fontColor="#fff"
    ></z-nav-bar>
    <view
      class="uni-margin-wrap"
      v-if="
        prescriptDetail &&
        prescriptDetail.images &&
        prescriptDetail.images.length > 0
      "
    >
      <swiper
        class="swiper"
        circular
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
      >
        <swiper-item
          v-for="(item, index) in prescriptDetail.images"
          :key="index"
        >
          <view class="swiper-item">
            <image
              :src="item"
              mode="aspectFit"
              @click="previewImage(item)"
            ></image>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="contentBox">
      <view class="content">
        <uni-section
          class="mb-10"
          titleFontSize="18px"
          title="标题"
          type="line"
        >
          <view class="item">
            {{ prescriptDetail.title }}
          </view>
        </uni-section>
        <uni-section
          class="mb-10"
          titleFontSize="18px"
          title="内容"
          type="line"
          v-if="prescriptDetail.content && prescriptDetail.content != ''"
        >
          <view class="item" v-html="prescriptDetail.content"> </view>
        </uni-section>

        <!-- <uni-section class="mb-10" titleFontSize="18px" title="配伍" type="line">
					<view class="item" v-if="prescriptDetail.compatibility && prescriptDetail.compatibility != ''" v-html="prescriptDetail.compatibility">
					</view>
					<view class="item" v-else>
						暂无
					</view>
				</uni-section>
				
				<uni-section class="mb-10" titleFontSize="18px" title="文献" type="line">
					<view class="item" v-if="prescriptDetail.literature && prescriptDetail.literature != ''" v-html="prescriptDetail.literature">
					</view>
					<view class="item" v-else>
						暂无
					</view>
				</uni-section> -->
      </view>
    </view>
    <music-play :playData="playData"></music-play>
    <!-- <z-navigation></z-navigation> -->
  </view>
</template>

<script>
import musicPlay from "@/components/music.vue";
import $http from "@/config/requestConfig.js";
export default {
  data() {
    return {
      playData: {},
      prescriptDetail: {
        images: [],
      },
      id: null,
      indicatorDots: true,
      autoplay: true,
      interval: 5000,
      duration: 500,
    };
  },
  onLoad(e) {
    this.id = e.id;
  },
  onShow() {
    this.getDetail();
  },
  methods: {
    // 放大图片
    previewImage(url) {
      console.log(url);
      uni.previewImage({
        urls: [url],
        longPressActions: {
          itemList: ["很抱歉，暂不支持保存图片到本地"],
          success: function (res) {
            // console.log(res,'+++++')
          },
        },
      });
    },
    // 方剂详情
    getDetail() {
      $http
        .request({
          url: "book/medicaldes/getRecordById?id=" + this.id,
          method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
          data: {
            // loadAnimate: 'none', // 请求加载动画
            // 'prescriptId': this.prescriptId
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          console.log(res, "内容获取成功");
          if (res.code == 0) {
            this.prescriptDetail = res.result;
            if (this.prescriptDetail.image) {
              this.prescriptDetail.images =
                this.prescriptDetail.image.split(";");
            }
          }
        })
        .catch((e) => {
          // this.titleList = []
          console.log(e);
        });
    },
  },
  components: {
    musicPlay,
  },
};
</script>

<style lang="scss" scoped>
.contentBox {
  padding-bottom: 20rpx;
}

.mb-10 {
  margin-bottom: 10px;
}

.content {
  font-size: 28rpx;
}

.swiper-item {
  image {
    margin: 0 auto;
    height: 250rpx;
  }
}

.uni-margin-wrap {
  margin-bottom: 20rpx;
  padding-top: 20rpx;
  background-color: #fff;
}

.container {
  padding: 10rpx;

  // background-color: #fff;
  .item {
    color: #666;
    padding: 10rpx 20rpx;
    padding-bottom: 20rpx;
    line-height: 46rpx;
  }
}

.flexbox {
  display: flex;
}

/deep/ .uni-section-header__decoration.line {
  background-color: #18bc37;
}
</style>