index.vue

<template>
  <!-- 自定义列表 -->
  <div class="customList" v-if="loaded && comDataList.length>0" :style="{'padding':padding+'px','margin': margin+'px','border-radius': borderRadius + 'px','background':backgroundColor}">
    <div v-for="(item,index) in comDataList" :key="index" @click="itemClick(item,index)">
      <rich-text :nodes="item.comStr"></rich-text>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
function compiler(str, data) {
  //正则表达式  .+匹配{{}}所有字符 ？取消贪婪  g全局
  let regulation = /\{\{(.+?)\}\}/g;
  str = str.replace(regulation, function (_, val) {
    let key = val.trim();
    //调用 对象嵌套函数
    let value = data[key];
    return value;
  });
  return str;
}
import Vue from "vue";
import index from "@/api/index";
const app = getApp()
export default {
  name: "custom-list",
  props: {
    render: {
      type: Boolean,
      default: false,
    },
    datas: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      loaded: false,
    };
  },
  watch: {
    datas(newVal,oldVal) {
      if (newVal) {
        this.getList()
      }
    }
  },
  computed:{
    comStr(){
      return compiler(this.datas.componentData.comStr,this.datas.componentData.comData);
    },
    padding() {
      return this.datas.componentData.padding;
    },
    margin() {
      return this.datas.componentData.margin;
    },
    borderRadius() {
      return this.datas.componentData.borderRadius;
    },
    backgroundColor() {
      return this.datas.componentData.backgroundColor;
    },
    showCont() {
      return this.datas.componentData.showCont;
    },
    dataSourceObj() {
      return this.datas.componentData.dataSourceObj;
    },
    comDataList: {
      get() {
        return this.datas.componentData.comDataList || [];
      },
      set(newValue) {
        this.datas.componentData.comDataList = newValue;
      },
    },
  },
  created() {
    this.getList();
  },
  mounted() {},
  methods:{
    itemClick(item, index) {
      console.log(item,'--------------81')
      if (!item.bid) {
        return;
      }
      let paper = {
        bid : item.bid
      }
      let link = 'https://dk.taokor.cn/wchat/?token=${token}&scene=sso&toAppid=qOAhsauSaagQlxYdGbJL#/appraisalTwo?paper='+ encodeURIComponent(JSON.stringify(paper)) + `&mixid=${this.$store.state.mixid}`;
      console.log(link,'---link')
      app.$themeToLink({
        link : link,
        key: "1.5",
        name: link,
        type: 1.2,
      });
      // eval(this.datas.componentData.comMethods)
    },
    getList(){
      let query = {
        ...this.dataSourceObj,
        current: 1,
        size: this.showCont,
      }
      console.log(query,'------getList-----query')
      index.outDataSourceData(query).then(res=>{
        if(res.data.code == 200){
          this.comDataList = res.data.data.data || [];
          this.comDataList = this.comDataList.slice(0,this.showCont);
          if(this.comDataList && this.comDataList.length>0){
            this.comDataList.forEach((item,index)=>{
              item.comStr = compiler(this.datas.componentData.comStr,item);
            })
          }
        }
        this.loaded = true;
      })
    },
    getComStr(item){
      compiler(this.datas.componentData.comStr,item);
    }
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.customList {
}
</style>