分销模块

src/components/tableList.vue

@@ -1109,6 +1109,13 @@
           >
             {{ scope.row[item.prop] }}
           </div>
+          <div
+            v-else-if="item.scope === 'openDialog'"
+            class="open_style"
+            @click="openDialog(scope.row)"
+          >
+            {{ item.name ? item.name : scope.row[item.prop] }}
+          </div>
           <div v-else-if="item.scope === 'changeCLS'">
             <div
               v-if="!scope.row['interfacePushId'] && !scope.row['periodPlush']"
@@ -2490,6 +2497,9 @@ export default {
     openBoxData(row) {
       this.$emit("openBoxFun", row);
     },
+    openDialog(row){
+      this.$emit("openDialog", row);
+    },
     diaviosTK(ids) {
       this.$api.inquireGoodsbanklist({ goodsId: ids }).then((res) => {
         res.data.forEach((item) => {

src/utils/request.js

@@ -8,7 +8,7 @@ import methods from '@/utils/methodsTool';
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 // 创建axios实例
 // export const baseURL = process.env.VUE_APP_BASE_API
-export const baseURL = 'http://192.168.1.24:5030/'
+export const baseURL = 'http://192.168.1.7:5030/'
 export const BASE_IMG_URL = process.env.VUE_APP_IMG_API
 const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分

src/views/Marketing/activitySystem/activityList/index.vue

@@ -15,6 +15,7 @@
       :navText="navText"
       :loading="loading"
       @addClick="addClick"
+      @openDialog="openDialog"
     >
       <template slot="btn" slot-scope="props">
         <el-button type="text" @click="editClick(props.scope.row)"
@@ -44,6 +45,55 @@
       @handleSizeChange="handleSizeChange"
       @handleCurrentChange="handleCurrentChange"
     />
+    <BaseDialog
+      width="500px"
+      :isShow.sync="isShow"
+      title="海报"
+      @close="close"
+      @submit="submit"
+      :isShowFooter="false"
+    >
+      <template>
+        <div class="posterUrl_style">
+          <img :src="$methodsTools.splitImgHost(posterUrl)" alt="" />
+          <div
+            class="code_style"
+            v-if="modelData.distribution && modelData.distribution.checked"
+            :style="{
+              top: modelData.distribution.top + 'px',
+              left: modelData.distribution.left + 'px',
+              width: modelData.distribution.width + 'px',
+              height: modelData.distribution.height + 'px',
+            }"
+          >
+            <img
+              v-if="modelData.distribution.name"
+              :style="modelData.distribution.css"
+              :src="$methodsTools.splitImgHost(modelData.distribution.name)"
+              alt=""
+            />
+          </div>
+
+          <div
+            class="code_style"
+            v-if="modelData.cardCode && modelData.cardCode.checked"
+            :style="{
+              top: modelData.cardCode.top + 'px',
+              left: modelData.cardCode.left + 'px',
+              width: modelData.cardCode.width + 'px',
+              height: modelData.cardCode.height + 'px',
+            }"
+          >
+            <img
+              v-if="modelData.cardCode.name"
+              :style="modelData.cardCode.css"
+              :src="$methodsTools.splitImgHost(modelData.cardCode.name)"
+              alt=""
+            />
+          </div>
+        </div>
+      </template>
+    </BaseDialog>
   </div>
 </template>
 
@@ -142,6 +192,13 @@ export default {
             },
           ],
         },
+        {
+          label: "海报",
+          name: "样式",
+          prop: "posterUrl",
+          hidden: true,
+          scope: "openDialog",
+        },
         {
           label: "备注",
           prop: "remark",
@@ -150,18 +207,56 @@ export default {
       ],
       tableData: [], //表单数据
       total: 0, //一共多少条
+      isShow: false,
+      posterUrl: "", //当前预览数据
+      modelData: {},
     };
   },
   created() {
     this.search();
   },
   methods: {
+    //打开海报预览窗口
+    openDialog(row) {
+      this.posterUrl = row.posterUrl;
+      this.isShow = true;
+      console.log(row);
+      // this.modelData = {
+      //   distribution: {
+      //     checked: true,
+      //     name: "oss/images/avatar/20230325/1679714327497/1679714327498_1756040408",
+      //     type: 3,
+      //     top: 476,
+      //     left: 114,
+      //     width: 121,
+      //     height: 121,
+      //     css: {
+      //       width: "100%",
+      //       height: "100%",
+      //     },
+      //   },
+      //   cardCode: {
+      //     checked: false,
+      //     name: "oss/images/avatar/20230325/1679714327497/1679714327498_1756040408",
+      //     type: 3,
+      //     top: 476,
+      //     left: 244,
+      //     width: 121,
+      //     height: 121,
+      //     css: {
+      //       width: "100%",
+      //       height: "100%",
+      //     },
+      //   },
+      // };
+    },
+    submit() {},
+    close() {},
     addClick() {
       this.$router.push({
         path: "activityInfo",
         status: "add",
       });
-      // this.$refs.model.showBox();
     },
     editClick(e, status) {
       this.$router.push({
@@ -245,96 +340,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/deep/.el-button {
-  border-radius: 8px;
-}
-/deep/.el-dialog {
-  border-radius: 8px;
-  .el-dialog__header {
-    padding: 0;
-    .hearders {
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 0px 18px 0px 20px;
-      border-bottom: 1px solid #e2e2e2;
-      .leftTitle {
-        font-size: 14px;
-        font-weight: bold;
-        color: #2f4378;
-      }
-      .rightBoxs {
-        display: flex;
-        align-items: center;
-        img {
-          width: 14px;
-          height: 14px;
-          margin-left: 13px;
-          cursor: pointer;
-        }
-      }
-    }
-  }
-  .el-dialog__footer {
-    padding: 0;
-    .dialog-footer {
-      padding: 0px 40px;
-      height: 70px;
-      border-top: 1px solid #e2e2e2;
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-    }
-  }
-}
-.imgBox {
-  width: 100%;
-  // height: 210px;
-  border: 1px solid #e2e2e2;
-  border-radius: 8px;
-  padding: 8px 8px 3px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  .imgLabel {
-    flex: 1;
-    width: 100%;
-    border: 1px dotted #e2e2e2;
-    color: #999;
-    font-size: 14px;
-    cursor: pointer;
-    border-radius: 8px;
-    .msPhoto {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      max-width: 100%;
-      max-height: 270px;
-      img {
-        max-width: 100%;
-        max-height: 270px;
-      }
-    }
-    .imgbbx {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
+.posterUrl_style {
+  width: 375px;
+  height: 667px;
+  position: relative;
+  margin-left: 50%;
+  transform: translateX(-50%);
+  & > .code_style {
+    position: absolute;
+    img {
       width: 100%;
       height: 100%;
-      i {
-        font-weight: bold;
-        margin: 14px 0;
-        font-size: 24px;
-      }
     }
   }
-  p {
-    margin: 5px 0px;
-  }
-}
-.numInputs {
-  width: 150px;
 }
 </style>

src/views/Marketing/distribution/commissionList/index.vue

@@ -28,6 +28,39 @@
       @handleSizeChange="handleSizeChange"
       @handleCurrentChange="handleCurrentChange"
     />
+    <BaseDialog
+      width="860px"
+      :isShow.sync="isShow"
+      title="佣金详情"
+      @close="close"
+      @submit="submit"
+      :isShowFooter="false"
+    >
+      <template>
+        <el-table row-key="id" :data="InfotableData" border style="width: 100%">
+          <template v-for="(item, index) in InfotableList">
+            <el-table-column
+              header-align="center"
+              :align="item.align ? item.align : 'center'"
+              :prop="item.prop"
+              :label="item.label"
+              :width="item.width || ''"
+            >
+              <template slot-scope="scope">
+                <div v-if="item.scope === 'options'">
+                  <template v-for="(itemt, indext) in item.options">
+                    <span v-if="itemt.value === scope.row[item.prop]">{{
+                      itemt.label
+                    }}</span>
+                  </template>
+                </div>
+                <span v-else>{{ scope.row[item.prop] }}</span>
+              </template>
+            </el-table-column>
+          </template>
+        </el-table>
+      </template>
+    </BaseDialog>
   </div>
 </template>
 
@@ -40,6 +73,7 @@ export default {
   components: { searchBoxNew, tableList, pagination },
   data() {
     return {
+      isShow: false,
       disabledBtn: false,
       loading: false, //当前表单加载是否加载动画
       navText: {
@@ -141,13 +175,69 @@ export default {
       ],
       tableData: [], //表单数据
       total: 0, //一共多少条
+      InfotableData: [],
+      InfotableList: [
+        {
+          label: "佣金ID",
+          prop: "name",
+          width: "120",
+        },
+        {
+          label: "所属订单",
+          prop: "name",
+          width: "120",
+        },
+        {
+          label: "下单人",
+          prop: "name",
+          width: "120",
+        },
+        {
+          label: "订单时间",
+          prop: "name",
+          width: "120",
+        },
+        {
+          label: "订单金额",
+          prop: "name",
+          width: "120",
+        },
+        {
+          label: "佣金分成方式",
+          prop: "name",
+          width: "120",
+        },
+        {
+          label: "佣金等级",
+          prop: "name",
+          width: "120",
+        },
+        {
+          label: "佣金金额（元）",
+          prop: "name",
+          width: "120",
+        },
+        {
+          label: "佣金结算时间",
+          prop: "name",
+          width: "120",
+        },
+        {
+          label: "佣金状态",
+          prop: "name",
+          width: "120",
+        },
+      ],
     };
   },
   created() {
     this.search();
   },
   methods: {
+    submit() {},
+    close() {},
     editClick(e) {
+      this.isShow = true;
       console.log("详情", e);
     },
     search(v) {