1

mer_plat_admin/src/api/systemPcConfig.js

@@ -250,3 +250,23 @@ export function pcHomeNavigationGetApi() {
     method: 'get',
   });
 }
+/**
+ * 保存PC商城首页导航配置
+ */
+export function bannerSaveApi(tag,data) {
+  return request({
+    url: `/admin/platform/pc/shopping/home/banner/save/${tag}`,
+    method: 'post',
+    data,
+  });
+}
+
+/**
+ * 获取PC商城首页导航配置
+ */
+export function bannerGetApi(tag) {
+  return request({
+    url: `/admin/platform/pc/shopping/home/banner/get/${tag}`,
+    method: 'get',
+  });
+}

mer_plat_admin/src/components/FromList/index.vue

@@ -52,6 +52,19 @@
                 />
               </div>
             </div>
+			<div v-if="configData.isHighLight" class="info-item">
+							  <span class="text-14px">是否高亮</span>
+							  <div class="input-box">
+							    <el-switch
+							      v-model="item.isHighLight"
+							      :active-value="true"
+							      :inactive-value="false"
+							      active-text="显示"
+							      inactive-text="隐藏"
+							      @change="onchangeIsLight(item.isHighLight, index)"
+							    />
+							 </div>
+		     </div>
             <!-- 添加链接-->
             <div v-if="item.linkList && item.linkList.length">
               <div class="acea-row">
@@ -175,6 +188,11 @@ export default {
       this.activeIndex = index;
       this.configData.list[this.activeIndex].status = e;
     },
+	//状态切换
+	onchangeIsLight(e, index) {
+	  this.activeIndex = index;
+	  this.configData.list[this.activeIndex].isHighLight = e;
+	},
     linkUrl(e) {
       this.configData.list[this.activeIndex].linkUrl = e;
     },

mer_plat_admin/src/router/modules/operation.js

@@ -352,6 +352,12 @@ const operationRouter = {
           name: 'homeSettings',
           meta: { title: '首页设置', icon: '' },
         },
+		{
+				  path: 'bannerSettings',
+				  component: () => import('@/views/systemSetting/pcConfig/bannerSettings/index'),
+				  name: 'bannerSettings',
+				  meta: { title: 'banner设置', icon: '' },
+		},
         {
           path: 'empower',
           component: () => import('@/views/systemSetting/pcConfig/empower/index'),

mer_plat_admin/src/views/systemSetting/pcConfig/bannerSettings/index.vue

@@ -0,0 +1,497 @@
+<template>
+  <div class="divBox">
+    <el-card class="box-card mb20" :body-style="{ padding: '0 20px 20px' }" shadow="never" :bordered="false">
+      <el-tabs class="list-tabs" v-model="currentTab">
+        <el-tab-pane v-for="(item, index) in tabList" :key="index" :name="item.value" :label="item.title" />
+      </el-tabs>
+      <!-- 表白墙banner-->
+      <template v-if="currentTab === '0'">
+				 <FromList :configObj="confessionListConfig"></FromList>
+				 <el-button v-hasPermi="['platform:pc:shopping:home:banner:save']" type="primary" @click="confessionBannerSave">{{
+					 loadingBtn ? '提交中 ...' : '保存'
+				 }}</el-button>
+      </template>
+      <!-- 游戏搭子banner-->
+      <!-- v-if="currentTab === '1'" -->
+      <template v-if="currentTab === '1'">
+        <FromList :configObj="gameStrategyListConfig"></FromList>
+        <el-button v-hasPermi="['platform:pc:shopping:home:banner:save']" type="primary" @click="gameStrategyBannerSave">{{
+          loadingBtn ? '提交中 ...' : '保存'
+        }}</el-button>
+      </template>
+	 <!-- 二手交易banner-->
+      <template v-if="currentTab === '2'">
+        <FromList :configObj="secondTransactionListConfig"></FromList>
+        <el-button v-hasPermi="['platform:pc:shopping:home:banner:save']" type="primary" @click="secondTransactionBannerSave">{{
+          loadingBtn ? '提交中 ...' : '保存'
+        }}</el-button>
+      </template>
+      <!-- 代取快递-->
+      <template v-if="currentTab === '3'">
+        <FromList :configObj="pickpExpressListConfig"></FromList>
+        <el-button v-hasPermi="['platform:pc:shopping:home:banner:save']" type="primary" @click="pickpExpressBannerSave">{{
+          loadingBtn ? '提交中 ...' : '保存'
+        }}</el-button>
+      </template>
+    </el-card>
+
+    <!--添加首页推荐模板-->
+    <el-drawer size="1000px" :visible.sync="drawer" direction="rtl" class="showHeader" :before-close="handleClose">
+      <div slot="title" class="demo-drawer_title">{{ dataForm.id ? '编辑推荐板块' : '添加推荐板块' }}</div>
+      <div v-if="drawer" class="demo-drawer__content detailSection">
+        <el-form
+          ref="dataForm"
+          v-loading="fullscreenLoading"
+          class="dataForm mt20"
+          :rules="ruleValidate"
+          :model="dataForm"
+          label-width="120px"
+          @submit.native.prevent
+        >
+          <el-form-item label="板块名称：" prop="name">
+            <el-input
+              v-model="dataForm.name"
+              maxlength="6"
+              size="small"
+              class="from-ipt-width"
+              placeholder="请输入板块名称"
+            />
+          </el-form-item>
+          <el-form-item label="广告图链接：">
+            <el-input v-model="dataForm.linkUrl" size="small" class="from-ipt-width" placeholder="请输入广告图链接" />
+          </el-form-item>
+          <el-form-item label="广告图(471*350)：" prop="imageUrl">
+            <div class="upLoadPicBox" @click="modalPicTap(false, 'dan')">
+              <div v-if="dataForm.imageUrl" class="pictrue"><img :src="dataForm.imageUrl" /></div>
+              <div v-else class="upLoad">
+                <i class="el-icon-camera cameraIconfont" />
+              </div>
+            </div>
+          </el-form-item>
+          <el-form-item label="排序：">
+            <el-input-number
+              v-model.trim="dataForm.sort"
+              :min="0"
+              :max="99"
+              :step="1"
+              step-strictly
+              label="排序"
+            ></el-input-number>
+          </el-form-item>
+          <el-form-item label="是否开启：">
+            <el-switch
+              :width="56"
+              v-model="dataForm.status"
+              :active-value="true"
+              :inactive-value="false"
+              active-text="开启"
+              inactive-text="关闭"
+            />
+          </el-form-item>
+          <el-form-item label="选择商品：" prop="playType">
+            <el-radio-group v-model="dataForm.playType" @input="handlePlayTypeChange">
+              <el-radio label="product">指定商品参与</el-radio>
+              <el-radio label="brand">指定品牌参与</el-radio>
+              <el-radio label="category">指定分类参与</el-radio>
+              <el-radio label="merchant">指定商户参与</el-radio>
+            </el-radio-group>
+            <product-association-form
+              :productAssociationType="dataForm.playType"
+              :formValidate="dataForm"
+              :multipleBrand="false"
+              :multipleCategory="false"
+              :isBatchDelete="false"
+              :multipleMer="multipleMer"
+              class="mt20"
+              @getProductAssociationData="getProductAssociationData"
+            ></product-association-form>
+          </el-form-item>
+          <el-form-item class="btn">
+            <div>
+              <div class="acea-row justify-content">
+                <el-button
+                  type="primary"
+                  v-debounceClick="
+                    () => {
+                      handleRecommendedSave('dataForm');
+                    }
+                  "
+                  >{{ loadingBtn ? '提交中 ...' : '保存' }}</el-button
+                >
+              </div>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+<script>
+import FromList from '@/components/FromList';
+import productAssociationForm from '@/components/productAssociationForm';
+import {
+  pcRecommendedAddApi,
+  pcRecommendedDeleteApi,
+  pcRecommendedEditApi,
+  pcRecommendedListApi,
+  pcRecommendedSwitchApi,
+  pcHomeBannerSaveApi,
+  pcHomeBannerGetApi,
+  pcHomeAdvertisementEditApi,
+  pcHomeAdvertisementGetApi,
+  pcHomeNavigationSaveApi,
+  pcHomeNavigationGetApi,
+  bannerSaveApi,
+  bannerGetApi
+} from '@/api/systemPcConfig';
+import { mapGetters } from 'vuex';
+import { checkPermi } from '@/utils/permission';
+import { advertisementDefault, bannerDefault, menuDefault } from '@/views/systemSetting/pcConfig/defaultPcConfig';
+const fromData = {
+  imageUrl: '',
+  name: '',
+  playType: 'product',
+  sort: 0,
+  status: false,
+  data: '',
+  id: 0,
+  linkUrl: '',
+  merIds: null,
+  proBrandList: [],
+  proCategorylist: [],
+};
+export default {
+  name: 'homeSettings',
+  components: { productAssociationForm, FromList },
+  data() {
+    // 自定义组件校验规则
+    let validatePlayTypeAndPlayProducts = (rule, value, callback) => {
+      if (value === '' || this.dataForm.playProducts.length === 0) {
+        callback(new Error('请选择参与类型和对应规则'));
+      } else {
+        callback();
+      }
+    };
+    return {
+      currentTab: '',
+      tabList: [
+        { value: '0', title: '表白墙' },
+        { value: '1', title: '游戏搭子' },
+        { value: '2', title: '二手交易' },
+        { value: '3', title: '代取快递' }
+      ],
+      drawer: false,
+      fullscreenLoading: false,
+      ruleValidate: {
+        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+        imageUrl: [{ required: true, message: '请选择图片', trigger: 'blur' }],
+        playType: [
+          {
+            required: true,
+            message: '请选择商品关联类型',
+            trigger: 'blur',
+            validator: validatePlayTypeAndPlayProducts,
+          },
+        ],
+      },
+      dataForm: Object.assign({}, fromData),
+      loadingBtn: false,
+      tableData: {
+        data: [],
+      },
+      listLoading: false,
+      productData: [], //选中的商品类型值
+      // 表白墙banner数据
+      confessionListConfig: Object.assign({}, bannerDefault()),
+      // banner数据游戏搭子
+	  gameStrategyListConfig: Object.assign({}, bannerDefault()),
+	  // banner数据二手交易
+	  secondTransactionListConfig: Object.assign({}, bannerDefault()),
+	   // banner数据二手交易
+      pickpExpressListConfig: Object.assign({}, bannerDefault()),
+	  
+      playValues: null, // 待添加的商品参与类型
+      //顶部菜单
+      menuListConfig: Object.assign({}, menuDefault()),
+      multipleMer: true,
+    };
+  },
+  mounted() {
+    // if (this.id > 0) {
+    //   this.getRecommendedInfo(this.id);
+    // }
+    if (checkPermi(['platform:pc:shopping:home:banner:get'])) {
+		this.currentTab = '0'; 
+		this.getPcHomeBanner(14);
+		this.getPcHomeBanner(15);
+		this.getPcHomeBanner(16);
+		this.getPcHomeBanner(17);
+	 }
+    // if (checkPermi(['platform:pc:shopping:home:recommended:list'])) this.getList();
+    // if (checkPermi(['platform:pc:shopping:home:advertisement:get'])) this.getAdvertisement();
+    // if (checkPermi(['platform:pc:shopping:home:navigation:get'])) this.getPcHomeNavigation();
+  },
+  watch: {
+    currentTab(newVal, oldVal) {
+      console.log('tab变化', newVal, oldVal)
+      this.getPcHomeBanner(14)
+    } 
+  },
+  computed: {
+    ...mapGetters(['merPlatProductClassify', 'productBrand']),
+    isEdit() {
+      return this.dataForm.id > 0 ? true : false;
+    },
+  },
+  methods: {
+    checkPermi,
+    //顶部菜单保存
+    handleMenuSave() {
+      this.menuListConfig.list.map((item, index) => {
+        item.sort = index + 1;
+      });
+      this.loadingBtn = true;
+      pcHomeNavigationSaveApi(this.menuListConfig.list)
+        .then((res) => {
+          this.$message.success('保存成功');
+          this.loadingBtn = false;
+          this.getPcHomeNavigation();
+        })
+        .catch(() => {
+          this.loadingBtn = false;
+        });
+    },
+    //获取顶部菜单
+    getPcHomeNavigation() {
+      pcHomeNavigationGetApi().then((res) => {
+        this.menuListConfig.list = res;
+      });
+    },
+    //首页推荐模板列表
+    getList(num) {
+      this.listLoading = true;
+      pcRecommendedListApi()
+        .then((res) => {
+          this.tableData.data = res;
+          this.listLoading = false;
+        })
+        .catch(() => {
+          this.listLoading = false;
+        });
+    },
+    //模板弹窗
+    handleClose() {
+      //this.$refs['formValidate'].resetFields();
+      this.drawer = false;
+    },
+    //新增模板
+    handleAdd() {
+      this.dataForm = Object.assign({}, fromData);
+      this.drawer = true;
+      this.loadingBtn = false;
+    },
+    //模板状态
+    onchangeIsShow(row) {
+      pcRecommendedSwitchApi(row.id).then((res) => {
+        this.$message.success('操作成功');
+        this.getList();
+      });
+    },
+    //编辑首页推荐模板
+    handleEdit(row) {
+      this.dataForm.id = row.id;
+      Object.assign(this.dataForm, row);
+
+      this.getRecommendedInfo(this.dataForm);
+      this.drawer = true;
+      this.loadingBtn = false;
+    },
+    //首页推荐模板数据
+    getRecommendedInfo() {
+      // 以下两个属性的转换为组件和业务之间的，后期优化选择器统一所有业务数据后再配合后台修改统一优化
+      this.dataForm.playType = this.dataForm.productAssociationType;
+      this.dataForm.playProducts = this.dataForm.data;
+      switch (this.dataForm.playType) {
+        case 'product':
+          this.dataForm.playProducts = this.dataForm.data;
+          break;
+        case 'brand':
+          this.dataForm.proBrandList = Number(this.dataForm.data);
+          break;
+        case 'category':
+          this.dataForm.proCategorylist = Number(this.dataForm.data);
+          break;
+        case 'merchant':
+          this.dataForm.merIds = this.multipleMer
+            ? this.dataForm.data.split(',').map((item) => Number(item))
+            : this.dataForm.data ? Number(this.dataForm.data): '';
+          break;
+      }
+    },
+    // 删除首页推荐
+    handleDelete(id, idx) {
+      this.$modalSure('删除该模块吗？').then(() => {
+        pcRecommendedDeleteApi(id).then((res) => {
+          this.$message.success('删除成功');
+          this.getList();
+        });
+      });
+    },
+    //选择商品类型中，商品列表、商户（merchant）选中回调
+    getProductAssociationData(res) {
+      this.playValues = res;
+      this.dataForm.playProducts = this.playValues;
+      this.dataForm.merIds = this.playValues;
+      this.dataForm.proBrandList = JSON.parse(JSON.stringify(this.playValues));
+    },
+    //上传图片
+    modalPicTap(multiple) {
+      const _this = this;
+      this.$modalUpload(
+        function (img) {
+          if (!img) return;
+          _this.dataForm.imageUrl = img[0].sattDir;
+        },
+        multiple,
+        'imageUrl',
+      );
+    },
+    //推荐模板保存
+    handleRecommendedSave(formName) {
+      if (this.playValues) {
+        // 如果编辑过数据那么再转换格式
+        if (this.dataForm.playType === 'product') {
+          this.dataForm.data = this.playValues.map((item) => item.id).join(',');
+        } else if (this.dataForm.playType === 'merchant') {
+          this.dataForm.data = this.multipleMer
+            ? this.playValues.map((item) => item).join(',')
+            : this.playValues.toString();
+        } else {
+          this.dataForm.data = this.playValues;
+        }
+        this.dataForm.productAssociationType = this.dataForm.playType;
+      }
+      if (this.dataForm.style == '') return this.$message.error('请上传氛围图');
+
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.loadingBtn = true;
+          this.isEdit
+            ? pcRecommendedEditApi(this.dataForm)
+                .then((res) => {
+                  this.$message.success('编辑成功');
+                  this.handleClose();
+                  this.getList();
+                })
+                .catch(() => {
+                  this.loadingBtn = false;
+                })
+            : pcRecommendedAddApi(this.dataForm)
+                .then((res) => {
+                  this.$message.success('新增成功');
+                  this.handleClose();
+                  this.getList();
+                })
+                .catch(() => {
+                  this.loadingBtn = false;
+                });
+        } else {
+          return false;
+        }
+      });
+    },
+    //广告语数据
+    getAdvertisement() {
+      pcHomeAdvertisementGetApi().then((res) => {
+        this.advertisementlistConfig.list[0].id = res.id;
+        this.advertisementlistConfig.list[0].imageUrl = res.imageUrl;
+        this.advertisementlistConfig.list[0].linkUrl = res.linkUrl;
+        this.advertisementlistConfig.list[0].status = res.status;
+      });
+    },
+    //广告语
+    handleAdvertisementSave() {
+      this.loadingBtn = true;
+      pcHomeAdvertisementEditApi({
+        id: this.advertisementlistConfig.list[0].id,
+        imageUrl: this.advertisementlistConfig.list[0].imageUrl,
+        linkUrl: this.advertisementlistConfig.list[0].linkUrl,
+        status: this.advertisementlistConfig.list[0].status,
+      })
+        .then((res) => {
+          this.$message.success('保存成功');
+          this.loadingBtn = false;
+          this.getAdvertisement();
+        })
+        .catch(() => {
+          this.loadingBtn = false;
+        });
+    },
+	//表白墙
+	confessionBannerSave(){
+		this.handleBannerSave(14,this.confessionListConfig)
+	},
+	//游戏搭子
+	gameStrategyBannerSave(){
+		this.handleBannerSave(15,this.gameStrategyListConfig)
+	},
+	//二手交易
+	secondTransactionBannerSave(){
+		this.handleBannerSave(16,this.secondTransactionListConfig)
+	},
+	//代取快递
+	pickpExpressBannerSave(){
+		this.handleBannerSave(17,this.pickpExpressListConfig)
+	},
+    //banner新增
+    handleBannerSave(tag,bannerListConfig) {
+       bannerListConfig.list.map((item, index) => {
+        item.sort = index + 1;
+      });
+      this.loadingBtn = true;
+      bannerSaveApi(tag,{ bannerList: bannerListConfig.list })
+        .then((res) => {
+          this.$message.success('保存成功');
+          this.loadingBtn = false;
+          this.getPcHomeBanner(tag);
+        })
+        .catch(() => {
+          this.loadingBtn = false;
+        });
+    },
+    //banner数据
+    getPcHomeBanner(tag) {
+      bannerGetApi(tag).then((res) => {
+		if(tag==14 ){
+          this.confessionListConfig.list = res.bannerList;
+		}
+		if(tag==15){
+		  this.gameStrategyListConfig.list = res.bannerList;
+		  }
+		if(tag==16){
+		  this.secondTransactionListConfig.list = res.bannerList;
+		}
+		if(tag==17){
+			this.pickpExpressListConfig.list = res.bannerList;
+		}
+      });
+    },
+    handlePlayTypeChange() {
+      this.playValues = '';
+      this.dataForm.playProducts = '';
+      this.dataForm.data = '';
+      this.dataForm.proBrandList = [];
+      this.dataForm.proCategorylist = [];
+      this.dataForm.merIds = null;
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.demo-drawer__content {
+  padding: 0 40px;
+}
+.selWidth {
+  width: 500px;
+}
+</style>

mer_plat_admin/src/views/systemSetting/pcConfig/defaultPcConfig.js

@@ -182,7 +182,7 @@ export const bannerDefault = () => {
       status: false,
       linkUrl: '',
       id: 0,
-      sort: 0,
+      sort: 0
     },
     modelMaxLength: 10,
     list: [
@@ -192,19 +192,21 @@ export const bannerDefault = () => {
         status: false,
         linkUrl: '',
         id: 0,
-        sort: 0,
+        sort: 0
       },
     ],
   };
 };
 
+
+
 /**
  * 首页广告
  */
 export const advertisementDefault = () => {
   return {
     tips: '图片宽度建议为1920px',
-    isShowAddBtn: false, //添加按钮
+    isShowAddBtn: true, //添加按钮
     isShowEdit: false, //删除按钮
     isShowStatus: true, //开启状态
     isShowLinkUrl: true, //链接地址
@@ -228,39 +230,44 @@ export const advertisementDefault = () => {
     ],
   };
 };
-
 /**
  * 首页顶部菜单
  */
 export const menuDefault = () => {
   return {
-    tips: '最多可开启6个板块，链接支持输入内部链接/外部链接',
+    tips: '最多可开启10个板块，链接支持输入内部链接/外部链接',
     isShowAddBtn: true, //添加按钮
     isShowEdit: true, //删除按钮
     isShowStatus: true, //开启状态
     isShowLinkUrl: true, //链接地址
     isShowLinkUrlChose: false, //选择地址选项
-    isShowImageUrl: false, //图片地址
+    isShowImageUrl: true, //图片地址
+	//isShowImageUrl: true, //图片地址
+	isHighLight: true, //图片地址
     isShowMoreLinkUrl: false, //多条链接
     // modelMaxLength: 10,
-    maxLength: 6,
+    maxLength: 10,
     placeWords: '请输入名称（最多6个字）',
     linkPlaceWords: '支持输入内部链接/外部链接',
     title: '名称',
     defaultList: {
+	  imageUrl: '',
       status: false,
       linkUrl: '',
       id: 0,
       sort: 0,
       name: '',
+	  isHighLight: false
     },
     list: [
       {
+		imageUrl: '',
         status: false,
         linkUrl: '',
         id: 0,
         sort: 0,
         name: '',
+		isHighLight: false
       },
     ],
   };

mer_plat_admin/src/views/systemSetting/pcConfig/homeSettings/index.vue

@@ -16,7 +16,7 @@
       </template>
       <!-- 首页banner-->
       <!-- v-if="currentTab === '1'" -->
-      <template>
+      <template v-if="currentTab === '1'">
         <FromList :configObj="bannerListConfig"></FromList>
         <el-button v-hasPermi="['platform:pc:shopping:home:banner:save']" type="primary" @click="handleBannerSave">{{
           loadingBtn ? '提交中 ...' : '保存'
@@ -221,12 +221,8 @@ export default {
       tabList: [
         // { value: '0', title: '首页广告' },
         { value: '1', title: '首页banner' },
-        // { value: '2', title: '首页推荐' },
-        // { value: '3', title: '顶部菜单' },
-        { value: '14', title: '表白墙banner' },
-        { value: '15', title: '游戏搭子banner' },
-        { value: '16', title: '二手交易banner' },
-        { value: '17', title: '代取快递banner' },
+        { value: '2', title: '首页推荐' },
+        { value: '3', title: '导航菜单' }
       ],
       drawer: false,
       fullscreenLoading: false,