新闻

src/components/product/NewsInfo.vue

@@ -0,0 +1,72 @@
+<template>
+    <router-link
+        :to="{
+            path: '/newsDetail',
+            query: {
+                id: info.id
+            }
+        }"
+        class="news"
+    >
+        <van-image
+            width="calc(100vw - 32px)"
+            height="calc(37vw - 12px)"
+            :radius="30"
+            :src="getImg(info.pic)"
+            fit="cover"
+        />
+        <div class="news-content">
+            <div class="text1">{{ info.title }}</div>
+            <div class="text2">{{ info.subtitle }}</div>
+        </div>
+    </router-link>
+</template>
+
+<script>
+export default {
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.news {
+    background: #1c1e25;
+    border-radius: 30px;
+    overflow: hidden;
+    margin: 16px;
+    display: block;
+    .van-image {
+        display: block;
+    }
+
+    .news-content {
+        padding: 10px 16px;
+        .text1 {
+            font-size: 14px;
+            font-weight: bold;
+            line-height: 24px;
+            color: #ffffff;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .text2 {
+            color: #939599;
+            line-height: 17px;
+            font-size: 12px;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+            margin-top: 2px;
+        }
+    }
+}
+</style>

src/views/product/NewsDetail.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="news">
+        <div class="detail" v-html="info.detail"></div>
+        <div class="news-btn" v-if="info.link">
+            <van-button round block type="primary" @click="buy">去购买</van-button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            info: {}
+        };
+    },
+    mounted() {
+        this.$http.get('/news/get/' + this.$route.query.id).then(res => {
+            this.info = res;
+        });
+    },
+    methods: {
+        buy() {
+            if (this.info.linkType === 'collections') {
+                this.$router.push(`/productSearch?search=${this.info.linkContent}&source=TRANSFER`);
+            }
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.news {
+    background-color: #181818;
+    box-sizing: border-box;
+    .detail {
+        background-color: #181818;
+        /deep/ p {
+            background-color: #181818;
+            margin: 0;
+            img {
+                display: block;
+            }
+        }
+    }
+    padding-bottom: 100px;
+}
+
+.news-btn {
+    position: fixed;
+    z-index: 20;
+    background: #181818;
+    padding: 9px 68px;
+    .flex();
+    left: 0;
+    right: 0;
+    bottom: 0;
+    .bottom(9px);
+
+    /deep/.van-button {
+        &.van-button--disabled {
+            background: #303133;
+            color: #939599;
+            opacity: 1;
+        }
+    }
+}
+</style>