Merge branch 'dev' of cloud.wodcloud.com:apaas/apaas-v3-ui into dev

src/components/recommen/recommen-box.vue

 <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>

src/pages/message-management/recommended/recommended-list.vue

@@ -206,10 +206,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')
     },
   },
 };