1

src/components/sale/saleRight-form.vue

+<style>
+  .customRightDialog .drawerTop {
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: space-between;
+    background-color: #f0f5fb;
+    padding: 5px 10px;
+    align-items: center;
+  }
+
+  .customRightDialog .className {
+    margin-left: 10px;
+  }
+
+  .customRightDialog .classFirst {
+    color: #000000;
+    font-weight: bold;
+  }
+
+  .customRightDialog .role_Line {
+    width: 3px;
+    height: 11px;
+    margin-right: 10px;
+    background-color: #3fc4ff;
+    display: inline-block;
+  }
+
+  .info_Item {
+    margin: 20px 0;
+  }
+
+  .customHeader {
+    display: inline-block;
+    width: 55px;
+    height: 55px;
+  }
+
+</style>
+<template>
+  <q-dialog v-model="persistent" maximized full-height seamless position="right" @hide="closeperForm">
+    <q-card style="margin-top:61px;width:600px" class="no-border-radius customRightDialog">
+      <div class="drawerTop">
+        <div style="display: flex; align-items: center">
+          <div class="className">
+            <div class="classFirst">客户任务</div>
+          </div>
+        </div>
+      </div>
+      <div style="margin:20px">
+        <div class="classFirst">
+          <span class="role_Line"></span>基本信息
+        </div>
+        <div class="row info_Item">
+          <div class="col-6">
+            <span class="backInfo_Title">任务名称：</span>
+            <span class="backOtherInfo" v-if="objOption.TaskName">
+              {{ objOption.TaskName }}
+            </span>
+          </div>
+          <div class="col-6">
+            <span class="backInfo_Title">任务子标题：</span>
+            <span class="backOtherInfo">{{ objOption.TaskSubTitle }}</span>
+          </div>
+        </div>
+        <div class="row info_Item">
+          <div class="col-6">
+            <span class="backInfo_Title">奖品名称：</span>
+            <span class="backOtherInfo" v-if="objOption.TaskKudo">
+              {{ objOption.TaskKudo }}
+            </span>
+          </div>
+          <div class="col-6">
+            <span class="backInfo_Title">任务开始时间：</span>
+            <span class="backOtherInfo">{{ objOption.TaskStartTimeStr }}</span>
+          </div>
+        </div>
+        <div class="row info_Item">
+          <div class="col-6">
+            <span class="backInfo_Title">任务结束时间：</span>
+            <span class="backOtherInfo" v-if="objOption.TaskEndTimeStr">
+              {{ objOption.TaskEndTimeStr }}
+            </span>
+          </div>
+        </div>
+        <div class="row wrap" style="margin-top:20px;">
+          <div class="classFirst">
+            <span class="role_Line"></span>任务图片
+          </div>
+        </div>
+        <div class="row wrap" style="margin-top:20px;">
+          <div class="row col-12">
+            <div class="sale_ImgDiv" v-for="(sItem,sIndex) in objOption.TaskImageList" :key="sIndex">
+              <img :src="sItem" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div style="margin:30px 10px 0 0;text-align:right;">
+        <q-btn flat color="grey-10" class="q-mr-md" label="取消" @click="closeperForm()" />
+      </div>
+    </q-card>
+    <div class="dialog-out-close" @click="closeperForm"
+      style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
+      <q-icon name="iconfont icon-jujue1" size="26px" />
+    </div>
+  </q-dialog>
+</template>
+<script>
+  import {
+    GetCustomerTask
+  } from "../../api/sale/peemanagement";
+  export default {
+    components: {},
+    props: {
+      taskOption: {
+        type: Object,
+        default: null
+      }
+    },
+    data() {
+      return {
+        persistent: true,
+        objOption: {},
+      }
+    },
+    created() {},
+    mounted() {
+      this.initObj()
+    },
+    methods: {
+      //初始化表单
+      initObj() {
+        if (this.taskOption && this.taskOption.Id > 0) {
+          let msg = {
+            Id: this.taskOption.Id
+          }
+          GetCustomerTask(msg).then(res => {
+            if (res.Code == 1) {
+              this.objOption = res.Data;
+            }
+          })
+        }
+      },
+      //关闭弹窗
+      closeperForm() {
+        this.$emit('close');
+      },
+    },
+  }
+
+</script>

src/pages/sale/saleTask.vue

@@ -104,7 +104,7 @@
       </q-table>
     </div>
     <saleForm v-if="isShowTask" :taskOption="taskOption" @close="closeSaleForm" @success="RefreshPage"></saleForm>
-    <!-- <saleRightForm v-if="isShowRight" :taskOption="taskOption" @close="closeSaleForm"></saleRightForm> -->
+    <saleRightForm v-if="isShowRight" :taskOption="taskOption" @close="closeSaleForm"></saleRightForm>
   </div>
 </template>
 <script>
@@ -113,7 +113,7 @@
     RemoveCustomerTask
   } from '../../api/sale/peemanagement';
   import saleForm from '../../components/sale/sale-form';
-  // import saleRightForm from '../../components/sale/saleRight-form'
+  import saleRightForm from '../../components/sale/saleRight-form'
   export default {
     meta: {
       title: "营销任务"
@@ -269,7 +269,8 @@
         this.isShowRight = true
       },
       closeSaleForm() {
-        this.isShowTask = false
+        this.isShowTask = false;
+        this.isShowRight = false;
       },
       //获取数据
       getList() {