uk_front/pages/design/_id.vue

<template>
  <div>
    <bxh :bxhType="'design'" :design="+$route.params.id"></bxh>
    <ul class="handle_list">
      <!-- <li onclick="history.back(-1);">
        <img src="@/assets/img/bxh/return.png"/>Return</li> -->
      <li @click="openExportFrom">
        <img src="@/assets/img/bxh/export.png"/>Export
      </li>
      <li @click="openEmailFrom">
        <img src="@/assets/img/bxh/email.png"/>E-mail
      </li>
      <!-- <nuxt-link :to="{ name:'render-id',params:{id:+$route.params.id} }" tag="li">
        <img src="@/assets/img/bxh/photo.png"/>Render
      </nuxt-link> -->
    </ul>
    <export-dialog :emailForm="exportForm"  :visible.sync="exportDialogVisible" :labelWidth="70" :title="'Export'"></export-dialog>
    <!-- <design-form-dialog :formData="emailForm" :formConfig="formConfig"  :visible.sync="emailDialogVisible" @handleSend="sendMail" :rules="rules" :labelWidth="95" :title="'Email To info@promocollection.uk'"></design-form-dialog> -->
  </div>
</template>
  
<script>
export default {
  layout: "blank_layout",
  data() {
    return {
      exportDialogVisible:false,
      emailDialogVisible:false,
      exportForm:{
        Link:'',
        Artwork:'',
      },
      emailForm:{
        from:'',
        to:'',
        cc:'info@promocollection.uk',
        subject:'',
        job_name:'',
        link:'',
        pdf:'',
        notes:'',
      },
      // 表单配置
      formConfig: [
        {
          label: "From",
          prop: "from",
          type: "selectObj",
          selectList: {
            1:'',
            2:'on-reply@promocollection.uk'
          },
        },
        {
          label: "To",
          prop: "to",
          type: "input",
        },
        {
          label: "CC",
          prop: "cc",
          type: "selectObj",
          selectList: {
            1:'info@promocollection.com.au',
            2:'astro@promocollection.com.au',
            3:'grace@promocollection.com.au'
          },
        },
        {
          label: "Subject",
          prop: "subject",
          type: "input",
        },
        {
          label: "Job Name",
          prop: "job_name",
          type: "input",
        },
        {
          label: "Link",
          prop: "link",
          type: "input",
          readonly: true,
        },
        {
          label: "Artwork",
          prop: "pdf",
          type: "input",
          readonly: true,
        },
        {
          label: "Notes",
          prop: "notes",
          type: "tinymce",
          width: '100%',
          height: 200,
        },
      ],
      rules:{
        from: [{ required: true, message: "Please select", trigger: "change" }],
        to: [{ required: true, message: "The recipient is unknown. Specify another recipient", pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/,trigger: "blur" }],
        subject: [{ required: true, message: "Send this message without a subject?", trigger: "blur" }],
        job_name: [{ required: true, message: "Please fill in your job name！", trigger: "blur" }],
        link: [{ required: true, message: "Please enter", trigger: "blur" }],
        pdf: [{ required: true, message: "Please enter", trigger: "blur" }],
        notes: [{ required: true, message: "Please enter", trigger: "blur" }],
      },
      pdf_id:null
    };
  },
  mounted(){
    this.emailForm.link=this.exportForm.Link=window.location.origin+'/3D/'+this.$route.params.id
    this.emailForm.pdf=this.exportForm.Artwork=window.location.origin+'/pdf/'+this.$route.params.id
    if (this.$cookies.get('can-use-cookie')) {
      this.emailForm.from=this.$cookies.get("email")
      this.formConfig[0].selectList['1']=this.$cookies.get("email")
    }
  },
  methods: {
    openExportFrom() {
      this.exportDialogVisible=true
    },
    openEmailFrom() {
      this.emailDialogVisible=true
    },
    sendMail() {
      this.$axios.post("/api/bxh/email", this.emailForm).then(res =>{
        this.emailDialogVisible=false
        this.$confirm("send successfully", {
              confirmButtonText: "OK",
              showCancelButton: false,
              type: "success",
              center: true,
              showClose: false,
            }).then(() => {
            });
      }).catch(() => {
        
      });
    },
  },
};
</script>
  
<style lang="scss" scoped>
.handle_list {
  position: absolute;
  right: 30px;
  top: 11px;
  z-index: 1;
  display: flex;

  li {
    cursor: pointer;
    border: 1px solid rgb(201, 201, 201);
    margin-left: 5px;
    padding-right: 5px;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  img {
    width: 20px;
    padding: 5px;
  }
}
</style>