picsucaidetail.vue 1.8 KB
<template>
  <div class="container">
    <div class="flextwo sharetopk" @click="back">
      <div class="leftrow leftrowkimg">
        <img src="../../../assets/leftrow.png" alt />
      </div>
      <div class="sharemiddle">素材详情</div>
      <div class="sharebtn">
        <!-- <img src="../../../assets/sharebtn.png" alt /> -->
      </div>
    </div>
    <div class="picbox" @click="previewimg">
      <img :src="contentdetail.content" alt />
      <!-- <div class="touying">带投影版本</div> -->
    </div>

    <!-- 预览图片 -->
    <van-image-preview v-model="show" :images="images"></van-image-preview>

    <!-- <div class="suciabot">
      <div class="sucaibtn">保存图片</div>
    </div>-->
  </div>
</template>

<script>
import Vue from "vue";
import { ImagePreview } from "vant";
Vue.use(ImagePreview);
export default {
  data() {
    return {
      id: '',
      contentdetail: "",
      show: false,
      images: []
    }
  },
  created() {
    document.title = '唐元集公众号'
    this.id = this.$route.query.id;
    this.getvideodetail()
  },
  methods: {
    previewimg() {
      let arr = [];
      arr.push(this.contentdetail.content)
      this.images = arr;
      this.show = true;

    },
    back() {
      this.$router.go(-1)
    },
    getvideodetail() {
      let that = this;
      var url = "/api/user/material_detail";
      let param = {
        material_id: this.id
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          that.contentdetail = res.data.material;
          console.log(that.contentdetail)

        })
        .catch(function (err) {
          console.log(err);
        });
    },

  }
}
</script>

<style scoped>
@import "../../../style/usercenter.css";
</style>