From 366140201da4bb00cb189fbee46e92cd5fa193dd Mon Sep 17 00:00:00 2001
From: zhangjun1 <zhangjun@bd-apaas.com>
Date: Tue, 21 Jul 2020 16:16:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=A8=E8=8D=90=E7=AE=A1=E7=90=86=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/recommen/recommen-box.vue      | 315 +++++++++-----
 .../recommended/recommended-list.vue          |   4 +-
 .../recommended/recommened-selected-list.vue  | 399 ++++++++++++------
 3 files changed, 491 insertions(+), 227 deletions(-)

diff --git a/src/components/recommen/recommen-box.vue b/src/components/recommen/recommen-box.vue
index 41c206d..e5014d6 100644
--- a/src/components/recommen/recommen-box.vue
+++ b/src/components/recommen/recommen-box.vue
@@ -1,122 +1,243 @@
 <template>
-    <div class="box">
+  <div class="box" @click="change_check" :style="selected_flag?{height:'auto',cursor:'default',}:checked?{border:'solid 2px #b4c0f5'}:{}">
+    <div class="up_state" v-if="selected_flag" :style="data.state!==1?{backgroundColor:'#e3e5ef'}:{}">
+        <span>
+            <img src="../../assets/imgs/ic_failed.png" alt=""  v-if="data.state!==1">
+            <img src="../../assets/imgs/ic_true.png" alt="" v-if="data.state==1">
+            {{data.state==1?'该服务为正常上架状态':data.state==0?'该服务已下架，建议替换':data.state==2?'该服务还未上架':'该服务正在下架中，建议替换'}}
+        </span>
+        <span v-if="flag">
+            <i class="el-icon-caret-top" @click="rank_data(0,position=='start')" :style="position=='start'?{color:'#a9aec0'}:''"></i>
+            <i class="el-icon-caret-bottom" @click="rank_data(1,position=='end')" :style="position=='end'?{color:'#a9aec0'}:''"></i>
+            <i class="el-icon-delete-solid"  @click="rank_data(2)"></i>
+        </span>
+    </div>
+    <div :class="{box:true,gray:selected_flag&&data.state!==1}">
         <div class="box_header">
-            <img :src="data.cover" alt="">
-            <div class="box_title">
-                <p>{{data.name}} <span>共享</span></p>
-                <p>{{data.department_name}}</p>
-            </div>
-            <div class="star">
-                <i class="el-icon-star-on" style="color:#fac266;"></i>
-                <span>{{data.score}}</span>
-            </div>
-        </div>
-        <div class="box_body">
-            <p></p>
-            <p></p>
-            <p></p>
-            <p></p>
+        <img :src="data.cover" alt=""  v-if="data.cover"/>
+        <div :class="{box_title:true,up_box_title:selected_flag}" :style="data.cover?{}:{width:'calc(100% - 30px)'}">
             <p>
-                <span>
-                    <img src="" alt="">
-                    999
-                </span>
-                <span>
-                    <img src="" alt="">
-                    999
-                </span>
+            {{ data.name }} <span v-show="isMap">Map Service</span>
+            <span v-if="data.openness == 1" style="background-color: #e7fdfc;border: solid 1px #8bd6d0;color: #25bdb1;">共享</span
+            ><span v-if="data.openness == 2" style="background-color: #fffee8;border: solid 1px #e4c884;color: #ef9433;">受限</span
+            ><span v-if="data.openness == 3" style="background-color: #ffefef;border: solid 1px #d7a4a9;color: #e15260;">敏感</span>
             </p>
+            <p>{{ data.department_name }}</p>
+        </div>
+        <div class="star">
+            <i class="el-icon-star-on" style="color:#fac266;"></i>
+            <span>{{ data.score }}</span>
+        </div>
+        </div>
+        <div class="box_body">
+        <p>{{ data.descript }}</p>
+        <p>数据领域：{{ data.sectors_name }}</p>
+        <p>
+            服务类型：{{ data.data_service_type1_name }}
+            {{ data.data_service_type2_name }} {{ data.data_service_type3_name }}
+        </p>
+        <p>更新时间：{{ data.update_date.replace("T", " ").replace("Z", "") }}</p>
+        <p>
+            <span>
+            <img src="../../assets/imgs/icon_liulan.png" alt="" />
+            {{ data.view_count }}
+            </span>
+            <span>
+            <img src="../../assets/imgs/icon_huoqu1.png" alt="" />
+            {{ data.apply_count }}
+            </span>
+        </p>
         </div>
-         <el-checkbox v-model="checked" @change="change_check()"></el-checkbox>
     </div>
+    <el-checkbox
+      v-if="flag&&!selected_flag"
+      class="select_box"
+      v-model="checked"
+      @change="change_check()"
+    ></el-checkbox>
+  </div>
 </template>
 
 <script>
 export default {
-    props: ['data','flag'],
-    components: {
-
-    },
-    data() {
-        return {
-            checked:false
-        };
+  props: ["data", "flag","selected_flag","position","isMap"],//flag是true表示编辑页 selected_flag是true表示已选择列表 position表示位置end或者start来对应上下排序按钮 isMap是true 表示是地图
+  components: {},
+  data() {
+    return {
+      checked: false,
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {
+      if(this.data.checked){
+          this.checked=true
+      }
+  },
+  mounted() {},
+  methods: {
+    change_check() {
+      if(!this.flag){
+          return
+      }
+      this.checked=!this.checked
+      var temp ={
+          check:this.checked,
+          id:this.data.id,
+          data:this.data
+      }
+      this.$emit("change_value", temp);
     },
-    watch: {
-
-    },
-    computed: {
-
-    },
-    created() {
-
-    },
-    mounted() {
-
-    },
-    methods: {
-        change_check(){
-            this.$emit('change_value',data)
+    rank_data(val,flag){
+        if(flag){
+            return
         }
-    },
+        var temp ={
+            act:val,
+            id:this.data.id,
+            position:this.position
+        }
+        if(val == 0){
+            //向上排序
+            this.$emit("rank_value", temp);
+        }else if(val == 1){
+            //向下排序
+            this.$emit("rank_value", temp);
+        }else{
+            //删除数据
+            this.$emit("rank_value", temp);
+        }
+    }
+  },
 };
 </script>
 
 <style scoped>
-.box{
-    width: 100%;
-    height: 260px;
-    background-color: #ffffff;
-	box-shadow: 0px 3px 10px 0px 
-		rgba(3, 10, 37, 0.05);
-	border-radius: 10px;
-	border: solid 1px #f4f7fc;
-    position: relative;
-}
-.box_header{
-    width: 100%;
-    height: 93px;
-    overflow: hidden;
-    background-color: #f9fafc;
-    position: relative;
-}
-.box_header img{
-    width: 63px;
-    height: 63px;
-    float: left;
-}
-.box_header .box_title{
-    float: left;
-    width: calc(100% - 100px);
-    font-size: 16px;
-    color: #0d1847;
-}
-.box_title p:nth-of-type(2){
-    color: #58617a;
-    font-size: 14px;
+.box {
+  width: 100%;
+  height: 260px;
+  background-color: #ffffff;
+  box-shadow: 0px 3px 10px 0px rgba(3, 10, 37, 0.05);
+  border-radius: 10px;
+  border: solid 1px #f4f7fc;
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
 }
-.star{
-    position: absolute;
-    right: 18px;
-    bottom: 18px;
-    font-size: 18px;
-	color: #ea7d19;
-    font-weight: 600;
+.gray{
+    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
+    filter: grayscale(100%);
 }
-.box_body{
-    padding: 0 20px;
+.box_header {
+  width: 100%;
+  height: 93px;
+  overflow: hidden;
+  border-radius: 10px 10px 0 0;
+  background-color: #f9fafc;
+  position: relative;
 }
-.box_body p{
-    font-size: 14px;
-    color: #8890a7;
+.box_header img {
+  width: 63px;
+  height: 63px;
+  margin: 19px;
+  float: left;
+}
+.box_header .box_title {
+  float: left;
+  width: calc(100% - 132px);
+  font-size: 16px;
+  color: #0d1847;
+  margin-top: 19px;
+}
+.box_header .up_box_title{
+    width: calc(100% - 112px);
+}
+.box_title p:nth-of-type(1) span {
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  font-size: 12px;
+  display: inline-block;
+  padding: 0 9px;
+  border-radius: 4px;
+}
+.box_title p:nth-of-type(1) span:nth-of-type(1) {
+  width: 91px;
+  text-align: center;
+  background-color: #5362ee;
+  color: #e6ebfe;
+  padding: 0;
+}
+.box_title p:nth-of-type(2) {
+  color: #58617a;
+  font-size: 14px;
+  margin-top: 6px;
+}
+.star {
+  position: absolute;
+  right: 18px;
+  bottom: 18px;
+  font-size: 18px;
+  color: #ea7d19;
+  font-weight: 600;
+}
+.box_body {
+  padding: 7px 20px;
+}
+.box_body p {
+  font-size: 14px;
+  line-height: 31px;
+  color: #8890a7;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.box_body p:nth-of-type(5) {
+  border-top: 1px solid #e3e5ef;
 }
-.box_body p:nth-of-type(5){
-    border-top: 1px solid #e3e5ef;
+.box_body p:nth-of-type(5) span {
+  float: left;
 }
-.box_body p:nth-of-type(5) span{
-    float: left;
+.box_body p:nth-of-type(5) span:nth-of-type(1) img {
+  width: 12px;
+  height: 8px;
 }
-.box_body p:nth-of-type(5) span:nth-of-type(2){
+.box_body p:nth-of-type(5) span:nth-of-type(2) img {
+  width: 10px;
+  height: 10px;
+}
+.box_body p:nth-of-type(5) span:nth-of-type(2) {
+  float: right;
+}
+.select_box {
+  position: absolute;
+  top: 9px;
+  right: 9px;
+}
+.up_state{
+    width: 100%;
+	height: 34px;
+    line-height: 34px;
+    font-size: 12px;
+	background-color: #e6ebfe;
+    color: #58617a;
+	border-radius: 10px 10px 0px 0px;
+    padding: 0 15px;
+}
+.up_state img{
+    width: 12px;
+    vertical-align: -2px;
+}
+.up_state span:nth-of-type(2){
     float: right;
 }
+.up_state span i{
+    margin-left: 10px;
+    font-size: 14px;
+    color: #626de9;
+    cursor: pointer;
+}
+.up_state span i:nth-last-of-type(1){
+    color: #8890a7;
+}
 </style>
diff --git a/src/pages/message-management/recommended/recommended-list.vue b/src/pages/message-management/recommended/recommended-list.vue
index d6f475d..70fd6ba 100644
--- a/src/pages/message-management/recommended/recommended-list.vue
+++ b/src/pages/message-management/recommended/recommended-list.vue
@@ -204,10 +204,10 @@ export default {
       this.initList(this.tempFilter);
     },
     detailAction(item) {
-      console.log(`查看${item.ad_name}`);
+      this.$router.push('/message/recommend_selected?ad_type='+item.ad_type+'&id='+item.id+'&look=1')
     },
     editAction(item) {
-      console.log(`编辑${item.ad_name}`);
+      this.$router.push('/message/recommend_selected?ad_type='+item.ad_type+'&id='+item.id+'&look=2')
     },
   },
 };
diff --git a/src/pages/message-management/recommended/recommened-selected-list.vue b/src/pages/message-management/recommended/recommened-selected-list.vue
index 80cf309..8192b87 100644
--- a/src/pages/message-management/recommended/recommened-selected-list.vue
+++ b/src/pages/message-management/recommended/recommened-selected-list.vue
@@ -1,105 +1,226 @@
 <template>
-    <div class="yygl_container">
-        <p class="now_page_title">
-            我的服务 / 111 /
-            <span>服务详情</span>
-        </p>
-        <div class="select_box">
-            <p class="box_title">
-                <span></span>
-                推荐位管理
-            </p>
-            <screen-type :data="filtdata" @getselect="getselect"></screen-type>
-            <div class="select_box_contain">
-                <recommen-box :data="item" v-for="(item,index) in select_able_arr" :key="index+50000" class="select_box_in"></recommen-box>
-            </div>
-        </div>
+  <div class="yygl_container recommened">
+    <p class="now_page_title">
+      消息与推送管理 / 推荐位管理 /
+      <span>{{ look_flag ? "编辑" : "详情" }}</span>
+    </p>
+    <div class="select_box">
+      <p class="box_title">
+        <span></span>
+        推荐位管理
+      </p>
+      <screen-type :data="filtdata" @getselect="getselect"></screen-type>
+      <div class="select_box_contain">
+        <recommen-box
+          @change_value="change_value"
+          :data="item"
+          v-for="(item, index) in select_able_arr"
+          :key="index + 50000"
+          class="select_box_in"
+          :flag="look_flag"
+          :isMap="$route.query.ad_type=='hgmap'"
+        ></recommen-box>
+      </div>
+    </div>
 
-        <div class="selected_box">
-            <p class="box_title">
-                <span></span>
-                已选择列表
-            </p>
+    <div class="selected_box">
+      <p class="box_title">
+        <span></span>
+        已选择列表
+      </p>
+      <div class="select_box_contain select_box_contain_selected">
+        <recommen-box
+          @rank_value="rank_value"
+          :data="item"
+          v-for="(item, index) in selected_arr"
+          :key="index + 50000"
+          class="select_box_in select_box_in_selected"
+          :selected_flag="true"
+          :flag="look_flag"
+          :isMap="$route.query.ad_type=='hgmap'"
+          :position="index==0?'start':index==selected_arr.length-1?'end':index"
+        ></recommen-box>
+        <div class="apass_button btn_recommon" v-if="look_flag">
+            <el-button>取消</el-button>
+            <el-button type="primary" @click="onSubmit">确定</el-button>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-import screenType from '@/components/recommen/screen-type'
-import recommenBox from '@/components/recommen/recommen-box'
+import screenType from "@/components/recommen/screen-type";
+import recommenBox from "@/components/recommen/recommen-box";
 export default {
-    props: [],
-    components: {
-        screenType,
-        recommenBox,
+  props: [],
+  components: {
+    screenType,
+    recommenBox,
+  },
+  data() {
+    return {
+      filtdata: [],
+      filter_name_arr: {
+        organizations: "数据来源机构",
+        serviceDomain: "数据领域",
+        serviceTypeInfo: "数据服务类型",
+      },
+      select_able_arr: [],
+      selected_arr: [],
+      look_flag: false,
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {
+    if (this.$route.query.look == 1) {
+      this.look_flag = false;
+    } else {
+      this.look_flag = true;
+    }
+    this.get_select_data();
+    this.get_select_list();
+    this.get_selected_list();
+  },
+  mounted() {},
+  methods: {
+    onSubmit(){
+        var temp_str = ''
+        this.selected_arr.forEach((e,idx) => {
+            if(idx==this.selected_arr.length-1){
+                temp_str = temp_str + e.id
+            }else{
+                temp_str = temp_str + e.id+','
+            }
+        });
+        this.$http
+        .post(`/apaas/service/v3/recommend/manage/featured/update`,{
+            id:parseInt(this.$route.query.id),
+            service_ids:temp_str
+        })
+        .then((response) => {
+            if(response.data.success){
+                this.$message.success('编辑成功')
+                this.$router.push('/message/recommended')
+            }else{
+                this.$message.error(response.data.errMsg)
+            }
+        })
     },
-    data() {
-        return {
-            filtdata:[],
-            filter_name_arr:{
-                organizations:'数据来源机构',
-                serviceDomain:'数据领域',
-                serviceTypeInfo:'数据服务类型'
-            },
-            select_able_arr:[],
-        };
+    change_value(val) {
+      console.log(val);
+      if(val.check){
+          this.selected_arr.push(val.data)
+      }else{
+          var temp = ''
+          this.selected_arr.forEach((e,index) => {
+              if(e.id==val.id){
+                  temp = index
+              }
+          });
+          this.selected_arr.splice(temp,1)
+      }
     },
-    watch: {
-
+    rank_value(val) {
+      console.log(val);
+      var index = val.position=='start'?0:val.position=='end'?this.selected_arr.length-1:val.position
+      if(val.act==2){
+          this.selected_arr.splice(index,1)
+      }else if(val.act==1){
+          var temp = this.selected_arr.splice(index,1)
+          this.selected_arr.splice(index+1, 0, temp[0])
+      }else if(val.act==0){
+          var temp = this.selected_arr.splice(index,1)
+          this.selected_arr.splice(index-1, 0, temp[0])
+      }
     },
-    computed: {
-
+    get_select_data() {
+      this.$http
+        .get(`/apaas/serviceapp/v3/servicemarket/profileInfo?serviceType=5`)
+        .then((response) => {
+          this.filtdata = [];
+          for (const key in response.data.data) {
+            if (response.data.data[key].childDomains) {
+              response.data.data[key].flag = false;
+            }
+            this.filtdata.push({
+              name: this.filter_name_arr[key],
+              arr: response.data.data[key],
+              key: key,
+            });
+          }
+        });
     },
-    created() {
-        this.get_select_data()
-        this.get_select_list()
+    getselect(val) {
+      console.log(val);
+      this.get_select_list(
+        val.word,
+        val.serviceTypeInfo.join(),
+        val.serviceDomain.join(),
+        val.organizations.join()
+      );
     },
-    mounted() {
-
+    get_select_list(word = "", data_type = "", sectors = "", org = "") {
+      this.$http
+        .get(
+          `/apaas/service/v3/recommend/manage/featured/service/fliter?ad_type=hotdata&keyword=${word}&data_type=${data_type}&sectors=${sectors}&org=${org}`
+        )
+        .then((response) => {
+          if (response.data.success) {
+            this.select_able_arr = response.data.data;
+          }
+        });
     },
-    methods: {
-        get_select_data(){
-            this.$http
-            .get(`/apaas/serviceapp/v3/servicemarket/profileInfo?serviceType=5`)
-            .then((response) => {
-                this.filtdata = []
-                for (const key in response.data.data) {
-                    if(response.data.data[key].childDomains){
-                        response.data.data[key].flag = false
-                    }
-                    this.filtdata.push(
-                        {
-                            name:this.filter_name_arr[key],
-                            arr:response.data.data[key],
-                            key:key
-                        }
-                    )
-                }
-            })
-        },
-        getselect(val){
-            console.log(val);
-            this.get_select_list(val.word,val.serviceTypeInfo.join(),val.serviceDomain.join(),val.organizations.join())
-        },
-        get_select_list(word='',data_type='',sectors='',org=''){
-            this.$http
-            .get(`/apaas/service/v3/recommend/manage/featured/service/fliter?ad_type=hotdata&keyword=${word}&data_type=${data_type}&sectors=${sectors}&org=${org}`)
-            .then((response) => {
-                if(response.data.success){
-                    this.select_able_arr = response.data.data
-                }
-            })
-        },
+    get_selected_list() {
+      this.$http
+        .get(`/apaas/service/v3/recommend/manage/featured/services/${this.$route.query.ad_type}`)
+        .then((response) => {
+          if (response.data.success) {
+            this.selected_arr = response.data.data;
+          }
+        });
     },
+  },
 };
 </script>
 
+<style>
+.recommened ::-webkit-scrollbar {
+  width: 0px; /*对垂直流动条有效*/
+  height: 0px; /*对水平流动条有效*/
+}
+
+/*定义滚动条的轨道颜色、内阴影及圆角*/
+.recommened ::-webkit-scrollbar-track {
+  background-color: #fff;
+  border-radius: 3px;
+}
+
+/*定义滑块颜色、内阴影及圆角*/
+.recommened ::-webkit-scrollbar-thumb {
+  border-radius: 7px;
+  background-color: #e8e8e8;
+}
+
+/*定义两端按钮的样式*/
+.recommened ::-webkit-scrollbar-button {
+  background-color: #fff;
+}
+
+/*定义右下角汇合处的样式*/
+.recommened ::-webkit-scrollbar-corner {
+  background: #fff;
+}
+</style>
+
 <style scoped>
 .yygl_container {
-  height: calc(100vh - 84px);
   overflow: hidden;
   background-color: #f6f7fb;
   padding: 20px;
+  padding-top: 0px;
+  height: calc(100vh - 84px);
 }
 .now_page_title {
   margin: 15px 0;
@@ -107,55 +228,77 @@ export default {
 }
 .now_page_title span {
   color: #242c43;
+  font-weight: 600;
+}
+.select_box {
+  float: left;
+  width: calc((100% - 20px)*0.771);
+  height: calc(100% - 56px);
+  overflow: hidden;
+  margin-right: 20px;
+  background-color: #ffffff;
+  box-shadow: 0px 3px 6px 0px #f4f7fc;
+  border-radius: 12px;
+}
+.selected_box {
+  float: left;
+  width: calc((100% - 20px)*0.229);
+  background-color: #ffffff;
+  box-shadow: 0px 3px 6px 0px #f4f7fc;
+  border-radius: 12px;
+  height: calc(100% - 56px);
+  overflow: hidden;
+}
+.box_title {
+  height: 60px;
+  line-height: 60px;
+  border-bottom: 1px solid #e3e5ef;
+  font-size: 16px;
+  color: #58617a;
+  font-weight: 600;
+}
+.box_title span {
+  width: 4px;
+  height: 16px;
+  background-color: #515fe7;
+  border-radius: 2px;
+  display: inline-block;
+  vertical-align: -2px;
+  margin-left: 30px;
+  margin-right: 10px;
+}
+.select_box_contain {
+  padding: 30px;
+  width: 100%;
+  height: calc(100% - 120px);
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.select_box_contain_selected{
+    height: calc(100% - 60px);
+}
+.select_box_in {
+  width: calc((100% - 40px) / 3);
+  float: left;
+  margin-right: 20px;
+  margin-bottom: 30px;
+}
+.select_box_in_selected{
+    float: none;
+}
+.select_box_contain .select_box_in:nth-of-type(3n) {
+  margin-right: 0px;
+}
+.selected_box .select_box_in {
+  width: 100%;
+  margin-right: 0;
+}
+.selected_box .select_box_contain {
+  padding: 15px;
 }
-.select_box{
-    float: left;
-    width: calc(100% - 400px); 
-    margin-right: 20px;
-    background-color: #ffffff;
-	box-shadow: 0px 3px 6px 0px 
-		#f4f7fc;
-	border-radius: 12px;
-}
-.selected_box{
-    float: left;
-    width: 380px; 
-    background-color: #ffffff;
-	box-shadow: 0px 3px 6px 0px 
-		#f4f7fc;
-	border-radius: 12px;
-}
-.box_title{
-    height:60px;
-    line-height: 60px;
-    border-bottom: 1px solid #e3e5ef;
-    font-size: 16px;
-    color: #58617a;
-    font-weight: 600;
-}
-.box_title span{
-    width: 4px;
-	height: 16px;
-	background-color: #515fe7;
-	border-radius: 2px;
-    display: inline-block;
-    vertical-align: -2px;
-    margin-left: 30px;
-    margin-right: 10px;
-}
-.select_box_contain{
-    padding: 30px;
-    width: 100%;
-    overflow: hidden;
-}
-.select_box_in{
-    width: calc((100% - 40px)/3);
-    height: 100px;
-    float: left;
-    background-color: #ccc;
-    margin-right: 20px;
-}
-.select_box_contain .select_box_in:nth-of-type(3n){
-    margin-right: 0px;
+.btn_recommon {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 22px;
 }
 </style>
-- 
2.26.0