From 5958353383c76c2ab544efb3920d8d8e9baa7296 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=A6=E4=B9=A0=E5=BE=88=E5=B7=AE=E5=95=A6?=
 <17633066053@163.com>
Date: Fri, 31 Mar 2023 15:22:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A5=BC=E5=B1=82=E8=A3=85=E4=BF=AE=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../indexDecorate/modelList/mixModel.vue      |  53 ++++
 .../modelList/mixs/mix-brand.vue              | 131 ++++++++
 .../modelList/mixs/mix-goods.vue              | 124 ++++++++
 .../src/views/page-decoration/modelConfig.js  |  24 +-
 .../page-decoration/modelList/mixModel.vue    | 288 +++++++++++++++++-
 .../modelList/mixs/mix-brand.vue              |  27 +-
 .../modelList/mixs/mix-goods.vue              |   3 +-
 7 files changed, 626 insertions(+), 24 deletions(-)
 create mode 100644 buyer/src/components/indexDecorate/modelList/mixModel.vue
 create mode 100644 buyer/src/components/indexDecorate/modelList/mixs/mix-brand.vue
 create mode 100644 buyer/src/components/indexDecorate/modelList/mixs/mix-goods.vue

diff --git a/buyer/src/components/indexDecorate/modelList/mixModel.vue b/buyer/src/components/indexDecorate/modelList/mixModel.vue
new file mode 100644
index 00000000..506fb726
--- /dev/null
+++ b/buyer/src/components/indexDecorate/modelList/mixModel.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="mix-model">
+    <!-- 左侧 -->
+    <div class="left-card">
+      <left :data="data" />
+    </div>
+    <!-- 右侧 -->
+    <div class="right-card">
+      <right :data="data" />
+    </div>
+  </div>
+</template>
+
+<script>
+import left from './mixs/mix-goods'
+import right from './mixs/mix-brand'
+export default {
+  name: "mixModel",
+  data() {
+    return {}
+  },
+  props: {
+    data: {
+      type: Object,
+      default: {}
+    }
+  },
+  components: {
+    left,
+    right
+  },
+  mounted() {
+
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+.mix-model{
+  display: flex;
+  justify-content:space-between;
+}
+.left-card,.right-card{
+  width: 584px;
+  height: 344px;
+  border-radius: 10px;
+  opacity: 1;
+  background: #FFFFFF;
+  box-shadow: 0px 1px 13px 0px #E5E5E5;
+  position: relative;
+}
+</style>
diff --git a/buyer/src/components/indexDecorate/modelList/mixs/mix-brand.vue b/buyer/src/components/indexDecorate/modelList/mixs/mix-brand.vue
new file mode 100644
index 00000000..520d1cbc
--- /dev/null
+++ b/buyer/src/components/indexDecorate/modelList/mixs/mix-brand.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="flex" v-if="data.options.right.model == 'brand'">
+    <div class="left-side" >
+      <img :src="data.options.right.data.image.src" alt="">
+    </div>
+    <div>
+      <div class="badge-box flex">
+        <div class="round">
+          <Icon type="ios-arrow-forward" />
+        </div>
+
+
+      </div>
+      <div class="flex goods-list">
+        <div class="goods-item flex" :key="index" v-for="(item,index) in data.options.right.data.list">
+          <div class="goods-thumbnail">
+            <img :src="item.img" alt="">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "mix-goods",
+  data() {
+    return {}
+  },
+  props: {
+    data: {
+      type: Object,
+      default: {}
+    }
+  },
+  components: {},
+  mounted() {
+
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+.goods-detail{
+
+}
+.goods-detail-title{
+  font-size: 13px;
+  font-weight: normal;
+  line-height: 16px;
+  text-align: center;
+  letter-spacing: 0px;
+  color: #333333;
+}
+.goods-detail-price{
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 17px;
+  letter-spacing: 0px;
+  color: #F31947;
+  margin-top: 8px;
+  margin-bottom:10px;
+}
+.goods-thumbnail{
+  margin-left: 7px;
+  display: flex;
+  align-items: center;
+  >img{
+    width:90px;
+    height: 90px;
+  }
+}
+.badge-box{
+  margin-top: 33px;
+  justify-content:right;
+  >.round{
+    width: 17.5px;
+    height: 17.5px;
+    opacity: 1;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 17.5px;
+    border: 0.7px solid #333333;
+    margin-right: 17.5px;
+  }
+}
+.goods-list{
+  flex-wrap: wrap;
+  justify-content:space-between;
+  padding: 0 16px;
+}
+.goods-item{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width:50%;
+  height: 85px;
+  border-radius: 9.8px;
+  opacity: 1;
+  transition: .35s;
+  background: #FFFFFF;
+  margin-bottom:9px;
+
+
+}
+.left-side {
+  >img{
+    width: 254px;
+    height: 344px;
+    border-radius: 9.8px 0px 0px 9.8px;
+    opacity: 1;
+  }
+}
+.badge {
+  width: 50px;
+  height: 27px;
+  line-height:27px;
+  border-radius: 13.3px 0px 0px 13.3px;
+  opacity: 1;
+  background: #F31947;
+  font-size: 12.6px;
+  font-weight: normal;
+  text-align: center;
+  letter-spacing: 0px;
+  color: #FFFFFF;
+  margin-top: 26px;
+  margin-bottom:17px;
+}
+</style>
diff --git a/buyer/src/components/indexDecorate/modelList/mixs/mix-goods.vue b/buyer/src/components/indexDecorate/modelList/mixs/mix-goods.vue
new file mode 100644
index 00000000..72006bf2
--- /dev/null
+++ b/buyer/src/components/indexDecorate/modelList/mixs/mix-goods.vue
@@ -0,0 +1,124 @@
+<template>
+    <div class="flex" v-if="data.options.left.model == 'goods'">
+      <div class="left-side" >
+        <img :src="data.options.left.data.image.src" alt="">
+      </div>
+      <div>
+          <div class="badge-box flex">
+            <div class="badge">
+              {{data.options.left.data.badge}}
+            </div>
+          </div>
+          <div class="flex goods-list">
+            <div class="goods-item flex" :key="index" v-for="(item,index) in data.options.left.data.list">
+              <div class="goods-thumbnail">
+                <img :src="item.img" alt="">
+              </div>
+              <div class="goods-detail">
+                <div class="goods-detail-title">{{item.title}}</div>
+                <div class="goods-detail-price">{{item.price | unitPrice('¥')}}</div>
+              </div>
+            </div>
+          </div>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "mix-goods",
+  data() {
+    return {}
+  },
+  props: {
+    data: {
+      type: Object,
+      default: {}
+    }
+  },
+  components: {},
+  mounted() {
+
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+.goods-detail{
+
+}
+.goods-detail-title{
+  font-size: 13px;
+  font-weight: normal;
+  line-height: 16px;
+  text-align: center;
+  letter-spacing: 0px;
+  color: #333333;
+}
+.goods-detail-price{
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 17px;
+  letter-spacing: 0px;
+  color: #F31947;
+  margin-top: 8px;
+  margin-bottom:10px;
+}
+.goods-thumbnail{
+  margin-left: 7px;
+  display: flex;
+  align-items: center;
+  >img{
+    width:90px;
+    height: 90px;
+  }
+}
+.badge-box{
+
+  justify-content:right;
+}
+.goods-list{
+  flex-wrap: wrap;
+  justify-content:space-between;
+  padding: 0 16px;
+}
+.goods-item{
+  display: flex;
+  align-items: center;
+  width: 173.6px;
+  height: 119px;
+  border-radius: 9.8px;
+  opacity: 1;
+  transition: .35s;
+  background: #FFFFFF;
+  margin-bottom:9px;
+  &:hover{
+    box-shadow: 0px 1px 6px 0px #E5E5E5;
+  }
+
+}
+.left-side {
+  >img{
+    border-radius: 10px 0px 0px 10px;
+    display: block;
+    width: 196.7px;
+    height: 343.7px;
+  }
+}
+.badge {
+  width: 50px;
+  height: 27px;
+  line-height:27px;
+  border-radius: 13.3px 0px 0px 13.3px;
+  opacity: 1;
+  background: #F31947;
+  font-size: 12.6px;
+  font-weight: normal;
+  text-align: center;
+  letter-spacing: 0px;
+  color: #FFFFFF;
+  margin-top: 26px;
+  margin-bottom:17px;
+}
+</style>
diff --git a/manager/src/views/page-decoration/modelConfig.js b/manager/src/views/page-decoration/modelConfig.js
index 83148675..f92c5e35 100644
--- a/manager/src/views/page-decoration/modelConfig.js
+++ b/manager/src/views/page-decoration/modelConfig.js
@@ -789,7 +789,8 @@ export const modelData = [{
         data:{
           image:{
             url:"",
-            src:require('@/assets/mix-bg1.png')
+            src:require('@/assets/mix-bg1.png'),
+            size:"197 * 344"
           },
           list:[
             {
@@ -817,7 +818,11 @@ export const modelData = [{
               url:"",
             },
           ],
-          badge:"精选",
+          badge:{
+            label:"精选",
+            url:""
+          }
+
         }
       },
       right:{
@@ -825,7 +830,8 @@ export const modelData = [{
         data:{
           image:{
             url:"",
-            src:require('@/assets/mix-bg2.png')
+            src:require('@/assets/mix-bg2.png'),
+            size:"254 * 344"
           },
           list:[
             {
@@ -847,6 +853,18 @@ export const modelData = [{
               img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
               url:"",
             },
+            {
+              img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
+              title:"商品标题",
+              price:"120",
+              url:"",
+            },
+            {
+              img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
+              title:"商品标题",
+              price:"120",
+              url:"",
+            },
           ],
           badge:"",
         }
diff --git a/manager/src/views/page-decoration/modelList/mixModel.vue b/manager/src/views/page-decoration/modelList/mixModel.vue
index a6d8c6c0..0874b1aa 100644
--- a/manager/src/views/page-decoration/modelList/mixModel.vue
+++ b/manager/src/views/page-decoration/modelList/mixModel.vue
@@ -1,23 +1,179 @@
 <template>
-    <div class="mix-model">
-      <!-- 左侧 -->
-      <div class="left-card">
-        <left :data="data" />
-      </div>
-      <!-- 右侧 -->
-      <div class="right-card">
-        <right :data="data" />
+  <div class="mix-model">
+    <!-- 左侧 -->
+    <div class="left-card">
+      <left :data="data"/>
+      <div class="setup-box">
+        <div>
+          <Button
+            size="small"
+            @click.stop="handleSelectModel('left')"
+          >编辑
+          </Button
+          >
+        </div>
       </div>
     </div>
+    <!-- 右侧 -->
+    <div class="right-card">
+      <right :data="data"/>
+      <div class="setup-box">
+        <div>
+          <Button
+            size="small"
+            @click.stop="handleSelectModel('right')"
+          >编辑
+          </Button
+          >
+        </div>
+      </div>
+    </div>
+    <Modal
+      v-model="showModal"
+      title="装修"
+      draggable
+      width="800"
+      :z-index="100"
+      :mask-closable="false"
+    >
+      <div v-if="current">
+        <div class="modal-tab-bar">
+          <div>
+            当前模块 :
+            <ButtonGroup>
+              <Button :type="current.model == 'goods' ? 'primary' : 'default'">商品</Button>
+              <Button :type="current.model == 'brand' ? 'primary' : 'default'">品牌</Button>
+            </ButtonGroup>
+          </div>
+
+          <div class="flex">
+
+            <div>
+              图片 :
+            </div>
+            <div>
+              <img class="image" :src="current.data.image.src" alt="">
+              <div>
+                <div>推荐尺寸：{{ current.data.image.size }}</div>
+                <div class="link-src">
+                  链接地址：
+                  <Input style="width: 200px;" v-model="current.data.image.url" disabled/>
+                </div>
+                <Button
+                  size="small"
+                  type="primary"
+                  @click="handleSelectImg(current.data.image)"
+                >选择图片
+                </Button
+                >
+                <Button
+                  size="small"
+                  class="ml_10"
+                  type="primary"
+                  @click="handleSelectLink('image')"
+                >选择链接
+                </Button
+                >
+              </div>
+            </div>
+          </div>
+          <div class="flex" v-if="current.model == 'goods'">
+            <div>
+              标签 :
+            </div>
+            <Input style="width:200px" type="text" v-model="current.data.badge.label"/>
+            <Input style="width:100px; margin-left:10px" disabled type="text" v-model="current.data.badge.value"/>
+            <Button
+              size="small"
+              class="ml_10"
+              type="primary"
+              @click="handleSelectLink('badge')"
+            >选择链接
+            </Button
+            >
+          </div>
+          <div class="flex column-list">
+            <div
+              v-for="(item, index) in current.data.list"
+              :key="index"
+              class="draggable"
+            >
+              <div class="flex">
+                <img :src="item.img" class="column-img"/>
+                <Button
+                  size="small"
+                  class="ml_10"
+                  type="primary"
+                  v-if="current.model == 'goods'"
+                  @click="handleSelectGoods('list',index)"
+                >选择商品
+                </Button
+                >
+                <div>
+                  <div style="margin-bottom: 10px">
+                    <Input v-model="item.url" />
+                  </div>
+                  <Button
+                    size="small"
+                    class="ml_10"
+                    type="primary"
+                    v-if="current.model == 'brand'"
+                    @click="handleSelectLink('list',index)"
+                  >
+                    选择链接
+                  </Button
+                  >
+                  <Button
+                    size="small"
+                    class="ml_10"
+                    type="primary"
+                    v-if="current.model == 'brand'"
+                    @click="handleSelectImg('list',index)"
+                  >选择图片
+                  </Button
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Modal>
+
+    <!-- 选择商品。链接 -->
+    <liliDialog
+      ref="liliDialog"
+      @selectedLink="selectedLink"
+      @selectedGoodsData="selectedGoodsData"
+    ></liliDialog>
+
+    <!-- 选择图片 -->
+    <Modal width="1200px" v-model="picModelFlag" footer-hide>
+      <ossManage
+        @callback="callbackSelected"
+        :isComponent="true"
+        ref="ossManage"
+      />
+    </Modal>
+  </div>
 </template>
 
 <script>
 import left from './mixs/mix-goods'
 import right from './mixs/mix-brand'
+import ossManage from "@/views/sys/oss-manage/ossManage.vue";
+
 export default {
   name: "mixModel",
   data() {
-    return {}
+    return {
+      showModal: false,
+      current: "", //当前选择的模块
+      picModelFlag: false,
+      selectedData: "", //选中的数据
+      goodsIndex: 0, // 商品索引
+      align: ""
+    }
   },
   props: {
     data: {
@@ -27,26 +183,128 @@ export default {
   },
   components: {
     left,
-    right
+    right,
+    ossManage
   },
   mounted() {
 
   },
-  methods: {}
+  methods: {
+    handleSelectImg() {
+      // 选择图片
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+    },
+
+    handleSelectGoods(val, index) {
+      this.$refs.liliDialog.open("goods");
+      this.$refs.liliDialog.singleGoods();
+      this.selectedData = val
+      this.goodsIndex = index
+    },
+    handleSelectLink(val, index) {
+      // 调起选择链接弹窗
+      this.$refs.liliDialog.open("link");
+      this.selectedData = val
+      this.goodsIndex = index
+
+    },
+    // 回显图片
+    callbackSelected(val) {
+      this.picModelFlag = false;
+      this.current.data.image.src = val.url;
+
+    },
+    // 选择商品回调
+    selectedGoodsData(val) {
+      console.log(val)
+      this.$nextTick(() => {
+        this.data.options[this.align].data.list[this.goodsIndex].img = val[0].thumbnail
+        this.data.options[this.align].data.list[this.goodsIndex].title = val[0].goodsName
+        this.data.options[this.align].data.list[this.goodsIndex].price = val[0].price
+        this.data.options[this.align].data.list[this.goodsIndex].url = val[0].url
+      })
+      console.log(this.data.options[this.align].data.list[this.goodsIndex])
+      this.$forceUpdate();
+    },
+    // 选择链接回调
+    selectedLink(val) {
+      console.log(val)
+      this.data.options[this.align].data[this.selectedData].url = this.$options.filters.formatLinkType(val);
+      console.log(this.data.options[this.align].data[this.selectedData]);
+    },
+    /*
+    * 点击不同模块进行编辑
+    * 判断也很简单，就是第一个第二个模块进行判断
+    *
+    * */
+    handleSelectModel(align) {
+      this.align = align;
+      this.current = this.data.options[align]
+      console.log(this.data.options[align])
+      this.showModal = true
+
+    },
+  }
 }
 </script>
 
 <style scoped lang="scss">
-.mix-model{
-  display: flex;
-  justify-content:space-between;
+@import "./setup-box.scss";
+
+.link-src {
+  margin: 10px 0;
 }
-.left-card,.right-card{
+
+.mix-model {
+  display: flex;
+  justify-content: space-between;
+}
+
+.left-card, .right-card {
   width: 584px;
   height: 344px;
   border-radius: 10px;
   opacity: 1;
   background: #FFFFFF;
   box-shadow: 0px 1px 13px 0px #E5E5E5;
+  position: relative;
+
+  &:hover {
+    .setup-box {
+      display: block;
+    }
+  }
+}
+
+.column-img {
+  width: 100px;
+  height: 100px;
+}
+
+.column-list {
+  flex-wrap: wrap;
+
+  > div {
+    width: 50%;
+  }
+}
+
+.image {
+  max-width: 100px;
+}
+
+
+.modal-tab-bar {
+  > .flex {
+    align-items: center;
+    margin: 10px 0;
+  }
+}
+
+.draggable {
+  > .flex {
+    align-items: center;
+  }
 }
 </style>
diff --git a/manager/src/views/page-decoration/modelList/mixs/mix-brand.vue b/manager/src/views/page-decoration/modelList/mixs/mix-brand.vue
index 02a6c460..520d1cbc 100644
--- a/manager/src/views/page-decoration/modelList/mixs/mix-brand.vue
+++ b/manager/src/views/page-decoration/modelList/mixs/mix-brand.vue
@@ -4,6 +4,13 @@
       <img :src="data.options.right.data.image.src" alt="">
     </div>
     <div>
+      <div class="badge-box flex">
+        <div class="round">
+          <Icon type="ios-arrow-forward" />
+        </div>
+
+
+      </div>
       <div class="flex goods-list">
         <div class="goods-item flex" :key="index" v-for="(item,index) in data.options.right.data.list">
           <div class="goods-thumbnail">
@@ -66,7 +73,18 @@ export default {
   }
 }
 .badge-box{
+  margin-top: 33px;
   justify-content:right;
+  >.round{
+    width: 17.5px;
+    height: 17.5px;
+    opacity: 1;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 17.5px;
+    border: 0.7px solid #333333;
+    margin-right: 17.5px;
+  }
 }
 .goods-list{
   flex-wrap: wrap;
@@ -76,16 +94,15 @@ export default {
 .goods-item{
   display: flex;
   align-items: center;
-  width: 173.6px;
-  height: 119px;
+  justify-content: center;
+  width:50%;
+  height: 85px;
   border-radius: 9.8px;
   opacity: 1;
   transition: .35s;
   background: #FFFFFF;
   margin-bottom:9px;
-  &:hover{
-    box-shadow: 0px 1px 6px 0px #E5E5E5;
-  }
+
 
 }
 .left-side {
diff --git a/manager/src/views/page-decoration/modelList/mixs/mix-goods.vue b/manager/src/views/page-decoration/modelList/mixs/mix-goods.vue
index 7c792e99..f176dac8 100644
--- a/manager/src/views/page-decoration/modelList/mixs/mix-goods.vue
+++ b/manager/src/views/page-decoration/modelList/mixs/mix-goods.vue
@@ -6,7 +6,7 @@
       <div>
           <div class="badge-box flex">
             <div class="badge">
-              {{data.options.left.data.badge}}
+              {{data.options.left.data.badge.label}}
             </div>
           </div>
           <div class="flex goods-list">
@@ -75,6 +75,7 @@ export default {
   }
 }
 .badge-box{
+
   justify-content:right;
 }
 .goods-list{