1

src/components/blindDate/PPPlusStyle.vue

+<template>
+  <div class="goodsClass">
+    <div class="head-title">版面设置</div>
+    <div style="margin-top: 10px; background: #fff; padding: 20px">
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="版面设置" name="third">
+          <div class="app-style">
+            <div>
+              <div flex="dir:left">
+                <div
+                  :class="item.Style != currentStyle ? 'hoverClass' : ''"
+                  v-for="(item, index) in styleList"
+                  :key="index"
+                  flex="main:center"
+                >
+                  <div
+                    flex="main:center"
+                    class="image-box"
+                    style="border: 1px solid rgb(242, 244, 245)"
+                  >
+                    <div>
+                      <div class="cat-style-model"></div>
+                      <img :src="item.src" style="width: 100%" />
+                    </div>
+                    <div
+                      v-if="item.Style === currentStyle"
+                      class="style-img active"
+                    ></div>
+                    <div @click="SelectStyle(item.Style)" class="text">
+                      启用该样式
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div>
+              <el-button
+                :loading="saveBtnLoad"
+                @click="SaveStyle"
+                style="margin-top: 10px"
+                size="small"
+                type="primary"
+                >保存</el-button
+              >
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import draggable from "vuedraggable";
+export default {
+  name: "goodsClass",
+  components: {
+    draggable,
+  },
+  data() {
+    return {
+      activeName: "third",
+      styleList: [
+        {
+          Style: 1,
+          src: require("../../assets/img/blindDate/cardmode.png"),
+        },
+        {
+          Style: 2,
+          src: require("../../assets/img/blindDate/listmode.png"),
+        },
+      ],
+      currentStyle: 1,
+      saveBtnLoad: false,
+    };
+  },
+  created() {
+    this.getStyle();
+  },
+  methods: {
+    SaveStyle() {
+      this.saveBtnLoad = true;
+      let data = localStorage.getItem("mall_userInfo");
+      let id = JSON.parse(data).MallBaseId;
+      this.apipost(
+        "/api/Tenant/SetMiaiPPPlusStyle",
+        { MiaiPPPlusStyle: this.currentStyle, MallBaseId: id },
+        (res) => {
+          this.saveBtnLoad = false;
+          if (res.data.resultCode === 1) {
+            this.getStyle();
+            this.Success(res.data.message);
+          } else {
+            this.Error(res.data.message);
+          }
+        },
+        null
+      );
+    },
+    SelectStyle(Style) {
+      this.currentStyle = Style;
+    },
+    getStyle() {
+      this.apipost("/api/Tenant/GetMiniPrograme", {}, (res) => {
+        if (res.data.resultCode == 1) {
+          this.currentStyle = res.data.data.MiaiPPPlusStyle;
+          console.log(244, this.currentStyle, res.data.data.MiaiPPPlusStyle);
+        }
+      });
+    },
+
+    handleClick(val) {},
+  },
+};
+</script>
+
+<style>
+.goodsClass .noIcon {
+  background-image: url("../../assets/img/default.png");
+  background-size: cover;
+  background-position: center center;
+  width: 30px;
+  height: 30px;
+  border-radius: 0%;
+}
+.goodsClass .el-form-item__label {
+  position: relative;
+  top: -3px;
+}
+.goodsClass .app-style .hoverClass:hover .text {
+  display: block;
+}
+.goodsClass .app-style .hoverClass:hover .cat-style-model {
+  display: block;
+}
+.goodsClass .app-style .style-img {
+  background-image: url("../../assets/img/userman/select.png");
+  background-size: cover;
+  background-position: center center;
+  width: 80px;
+  height: 80px;
+  border-radius: 0%;
+}
+.goodsClass .app-style .image-box .active {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 99;
+}
+.goodsClass .app-style .image-box .text {
+  cursor: pointer;
+  background: #409eff;
+  text-align: center;
+  position: absolute;
+  top: 245px;
+  left: auto;
+  line-height: 30px;
+  width: 90px;
+  color: #fff;
+  z-index: 999;
+  display: none;
+}
+.goodsClass .app-style .cat-style-model {
+  background-color: rgba(0, 0, 0, 0.5);
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  -webkit-border-radius: 25px;
+  -moz-border-radius: 25px;
+  border-radius: 25px;
+  z-index: 1;
+  display: none;
+}
+.goodsClass .app-style .image-box {
+  width: 340px;
+  border: 1px solid #f2f4f5;
+  cursor: pointer;
+  border-radius: 25px;
+  margin-right: 5px;
+  padding: 30px 0;
+  position: relative;
+}
+.goodsClass .app-style .tab-box .active {
+  background: #409eff;
+  color: #ffffff;
+}
+.goodsClass .app-style .tab-box .btn {
+  cursor: pointer;
+  padding: 7px 15px;
+  margin-right: 10px;
+  border: 1px solid #e3e3e3;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.goodsClass .app-style .tab-box {
+  margin-bottom: 20px;
+}
+.goodsClass .app-transfer .middle {
+  border-radius: 36px;
+  width: 36px;
+  height: 36px;
+  margin: 0 30px;
+  font-size: 10px;
+}
+.goodsClass .app-transfer .transfer .cat-next {
+  color: #353535;
+  text-align: right;
+  font-size: 10px;
+  padding: 0;
+}
+.vue-line-clamp {
+  display: block;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.goodsClass .nopadding .el-card__body {
+  padding: 0 !important;
+  height: 500px;
+  overflow: auto;
+}
+.goodsClass .itemActive {
+  background-color: #f5f5f5;
+}
+.goodsClass .nodataicon {
+  background-position: center center;
+  width: 30px;
+  height: 30px;
+  border-radius: 0%;
+  background-image: url("../../assets/img/userman/jqqd.png");
+  background-size: cover;
+  margin-right: 10px;
+}
+.goodsClass .cat-icon {
+  background-position: center center;
+  width: 30px;
+  height: 30px;
+  border-radius: 0%;
+}
+.goodsClass .searchInput {
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+}
+.goodsClass .searchInput .el-input__inner {
+  border: none;
+  outline: none;
+  height: 30px !important;
+  line-height: 30px !important;
+}
+.goodsClass .searchInput {
+  line-height: normal;
+  display: inline-table;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 250px;
+  margin-right: 20px;
+}
+.goodsClass .cat-id {
+  width: 55px;
+  color: #999;
+  font-size: 14px;
+  margin-left: 5px;
+}
+.goodsClass .cat-name-info {
+  width: 100px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.goodsClass .cat-icon {
+  margin-right: 10px;
+}
+.goodsClass .cat-list .el-card {
+  display: inline-block;
+}
+.goodsClass .cat-list .card-item-box {
+  margin-right: 5px;
+  height: 552px;
+}
+.goodsClass .cat-list .el-card:first-of-type {
+  margin-left: 0;
+}
+.goodsClass .cat-list {
+  white-space: nowrap;
+}
+.goodsClass {
+  cursor: pointer;
+}
+</style>

src/router/index.js

@@ -298,6 +298,11 @@ export default new Router({
       path: '/recruitStick',
       name: 'recruitStick',
       component: resolve => require(['@/components/blindDate/recruitStick'], resolve),
+    },
+    {
+      path: '/PPPlusStyle',
+      name: 'PPPlusStyle',
+      component: resolve => require(['@/components/blindDate/PPPlusStyle'], resolve),//拼拼plus展示样式
     }, {
       path: '/registrationList',
       name: 'registrationList',