sociology_app/pages/component/commonComponents/goodsNav.vue

<template>
   
  <view class="goods_nav">
    <!-- 公共组件-每个页面必须引入 -->

    <view class="left">
      <view
        v-for="(v, i) in iconList"
        class="icon_item"
        v-if="iconList.length > 0"
      >
        <u-icon
          :name="v.icon"
          :color="v.infoColor"
          size="22"
          v-if="v.iconType"
          style="margin: 0 auto"
          @click="clickIcon(v)"
        ></u-icon>

        <uni-icons
          :type="v.icon"
          size="22"
          :color="v.infoColor"
          style="margin: 0 auto"
          v-else
        >
        </uni-icons>
        <view :style="`color:${v.infoColor};`">{{ v.text }}</view>
      </view>
      <slot name="leftSlot"></slot>
    </view>
    <view class="right">
      <view
        class="button"
        v-for="(v, i) in customButton"
        :style="`background:${v.backgroundColor} !important;color:${v.color};width:${v.width}`"
        @click="submit(v)"
      >
        {{ v.text }}
      </view>
    </view>

    <slot name="bottomSlot"></slot>
    <!-- <view>{{ detailInfo.content }}</view> -->
  </view>
</template>

<script>
import $http from "@/config/requestConfig.js";
import { mapState } from "vuex";
export default {
  props: ["iconList", "customButton"],
  components: {},
  data() {
    return {};
  },
  onLoad(options) {},
  onHide() {},
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    submit(v) {
      this.$emit("submit", v);
    },
    clickIcon(v) {
      this.$emit("clickIcon", v);
    },
    showPreview(e) {
      console.log("e at line 56:", e);
      let conimg = e.target.dataset.nodes;
      let imgs = conimg.match(/<img[^>]+>/g); //选择节点中的img
      console.log("imgs at line 59:", imgs);
      let imgList = [];
      //遍历img标签的src里面的内容放在定义的数组imgList中
      for (var j = 0; j < imgs.length; j++) {
        imgs[j].replace(
          /<img[^>]*src=['"]([^'"]+)[^>]*>/gi,
          function (match, capture) {
            imgList.push(capture);
          },
        );
      }
      console.log("imgList.push at line 64:", imgList);

      //最后一步就是所有图片放在预览的方法previewImage中就可以了
      // uni.previewImage({
      //     current: imgList,
      //     urls: imgList,
      // })
      uni.previewImage({
        urls: imgList,
        longPressActions: {
          itemList: ["很抱歉，暂不支持保存图片到本地"],
          success: function (res) {
            // console.log(res,'+++++')
          },
        },
      });
    },

    // 放大图片
    previewImage(url) {
      console.log(url);
      uni.previewImage({
        urls: [url],
        longPressActions: {
          itemList: ["很抱歉，暂不支持保存图片到本地"],
          success: function (res) {
            // console.log(res,'+++++')
          },
        },
      });
    },
    // getSearch() {
    // 	$http.request({
    // 		url: "book/prescript/searchPrescript",
    // 		method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
    // 		data: {
    // 			loadAnimate: 'none', // 请求加载动画
    // 			'keywords': this.searchValue,
    // 			type: this.currentCateIndex + 1
    // 		},
    // 		header: { //默认 无 说明：请求头
    // 			'Content-Type': 'application/json'
    // 		},
    // 	}).then(res => {
    // 		console.log(res, '搜索结果')
    // 		if (res.code == 0 && res.list.length >= 0) {
    // 			this.showSearchList = true
    // 			this.searchList = res.list
    // 		} else {
    // 			this.searchList = []
    // 		}
    // 	}).catch(e => {
    // 		// this.dataList = []
    // 		this.searchList = []
    // 		console.log(e)
    // 	})
    // },
    // search(res) {
    // 	console.log(res, 'res')
    // 	// uni.showToast({
    // 	// 	title: '搜索：' + res,
    // 	// 	icon: 'none'
    // 	// })
    // 	if (res == '') {
    // 		this.showSearchList = false
    // 		this.searchList = []
    // 	} else {
    // 		this.getSearch()
    // 	}

    // },
    // input(res) {
    // 	console.log('----input:', res)
    // 	if (res == '') {
    // 		this.searchList = []
    // 	} else {
    // 		this.getSearch()
    // 	}
    // },
    // clear(res) {
    // 	console.log('----clear:', res)
    // 	// uni.showToast({
    // 	// 	title: 'clear事件，清除值为：',
    // 	// 	icon: 'none'
    // 	// })
    // 	this.searchValue = ''
    // 	this.showSearchList = false
    // },
    // blur(res) {
    // 	// console.log('----blur:', res)
    // 	// if (res == '') {
    // 	// 	this.showSearchList = false
    // 	// 	this.searchList = []
    // 	// } else {
    // 	// 	this.getSearch()
    // 	// }
    // },
    // focus(e) {
    // 	console.log('----focus:')
    // 	// uni.showToast({
    // 	// 	title: 'focus事件，输出值为：' + e.value,
    // 	// 	icon: 'none'
    // 	// })
    // 	// 等于1 就是有权限
    // 	// this.showSearchList = true

    // },
    // cancel(res) {
    // 	uni.showToast({
    // 		title: '点击取消，输入值为：' + res.value,
    // 		icon: 'none'
    // 	})
    // }
  },
  onBackPress() {
    // #ifdef APP-PLUS
    plus.key.hideSoftKeybord();
    // #endif
  },
};
</script>

<style lang="scss" scoped>
.goods_nav {
  background-color: #fff;
  width: 100%;
  padding: 20rpx 20rpx 20rpx 30rpx;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left {
    height: 100%;
    float: left;
    display: flex;
    align-items: center;
  }
}

.richDetail {
  width: 100%;
  height: 100%;
}

.button {
  float: right;
  width: 240rpx;
  border-radius: 100rpx;
  line-height: 70rpx;
  text-align: center;
  margin-left: 20rpx;
  background: linear-gradient(90deg, rgb(254, 96, 53), rgb(239, 18, 36));

  color: rgb(255, 255, 255);
}

.icon_item {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
</style>