|
|
@@ -0,0 +1,308 @@
|
|
|
+<template>
|
|
|
+ <router-link
|
|
|
+ :to="{
|
|
|
+ path: '/activityDetail',
|
|
|
+ query: {
|
|
|
+ id: info.id
|
|
|
+ }
|
|
|
+ }"
|
|
|
+ class="news-record"
|
|
|
+ :class="{ isLight: type === 'light' }"
|
|
|
+ >
|
|
|
+ <van-badge :content="badgeContent" :offset="[-5, 2]">
|
|
|
+ <van-image :src="getImg(info.cover)" :radius="8" width="46" height="46" fit="cover" />
|
|
|
+ </van-badge>
|
|
|
+ <div class="content">
|
|
|
+ <div class="name van-ellipsis">{{ info.name }}</div>
|
|
|
+ <div class="sales-list">
|
|
|
+ <div class="sales">
|
|
|
+ <span>限量{{ info.total }}份</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="bottom">
|
|
|
+ <div class="miner">
|
|
|
+ <span style="margin-left: 0">{{ time }}</span>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <van-button type="primary" size="mini" round plain>{{ isGoning ? '进行中' : '查看' }}</van-button>
|
|
|
+ </router-link>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import product from '../../mixins/product';
|
|
|
+export default {
|
|
|
+ mixins: [product],
|
|
|
+ props: {
|
|
|
+ info: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {};
|
|
|
+ }
|
|
|
+ },
|
|
|
+ type: {
|
|
|
+ type: String,
|
|
|
+ default: 'dark'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ time() {
|
|
|
+ if (this.info.createdAt) {
|
|
|
+ return this.dayjs(this.info.createdAt).format('YYYY-MM-DD HH:mm');
|
|
|
+ }
|
|
|
+
|
|
|
+ return '';
|
|
|
+ },
|
|
|
+ isNew() {
|
|
|
+ if (this.info.createdAt) {
|
|
|
+ let time = this.dayjs(this.info.createdAt).add(1, 'day');
|
|
|
+ return this.dayjs().isBefore(time);
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ badgeContent() {
|
|
|
+ if (this.isNew) {
|
|
|
+ return 'NEW';
|
|
|
+ } else {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ isGoning() {
|
|
|
+ if (this.info.onShelf) {
|
|
|
+ if (
|
|
|
+ (this.info.scheduleSale && this.dayjs().isAfter(this.dayjs(this.info.startTime))) ||
|
|
|
+ !this.info.scheduleSale
|
|
|
+ ) {
|
|
|
+ return this.info.stock && this.info.stock > 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if (this.info.startTime) {
|
|
|
+ var x = this.dayjs(this.info.startTime, 'YYYY-MM-DD HH:mm:ss');
|
|
|
+ var y = this.dayjs();
|
|
|
+ let d = this.dayjs.duration(x.diff(y));
|
|
|
+ let day = parseInt(d.asDays());
|
|
|
+ if (day <= 0) {
|
|
|
+ this.getTime(this.info.startTime);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ likeProduct() {
|
|
|
+ if (!this.info.liked) {
|
|
|
+ this.$http.get(`/collection/${this.info.id}/like`).then(() => {
|
|
|
+ this.$emit('update:info', {
|
|
|
+ ...this.info,
|
|
|
+ liked: true,
|
|
|
+ likes: this.info.likes + 1
|
|
|
+ });
|
|
|
+ this.$toast.success('收藏成功');
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
|
|
|
+ this.$emit('update:info', {
|
|
|
+ ...this.info,
|
|
|
+ liked: false,
|
|
|
+ likes: this.info.likes - 1
|
|
|
+ });
|
|
|
+ this.$toast.success('取消收藏');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+/deep/.van-badge {
|
|
|
+ z-index: 20;
|
|
|
+
|
|
|
+ --van-badge-font-size: 8px;
|
|
|
+ &.van-badge--dot {
|
|
|
+ border: 1px solid #ffffff;
|
|
|
+ --van-badge-dot-size: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.news-record {
|
|
|
+ position: relative;
|
|
|
+ background-color: var(--bg2);
|
|
|
+ display: inline-block;
|
|
|
+ border-radius: 12px;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 12px 16px;
|
|
|
+ overflow: hidden;
|
|
|
+ .flex();
|
|
|
+
|
|
|
+ .bg {
|
|
|
+ position: absolute;
|
|
|
+ width: 92px;
|
|
|
+ height: 116px;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-image {
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .xianliang {
|
|
|
+ position: absolute;
|
|
|
+ top: 16px;
|
|
|
+ left: 16px;
|
|
|
+ font-size: @font1;
|
|
|
+ color: @prim;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ // border-radius: 13px !important;
|
|
|
+ z-index: 4;
|
|
|
+ padding: 0 10px !important;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ margin-right: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-image {
|
|
|
+ display: block;
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ margin-left: 12px;
|
|
|
+ align-self: stretch;
|
|
|
+ .flex-col();
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-grow: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-right: 12px;
|
|
|
+ .name {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: var(--text0);
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sales-list {
|
|
|
+ margin-top: 8px;
|
|
|
+ .flex();
|
|
|
+ }
|
|
|
+
|
|
|
+ .sales {
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: @font1;
|
|
|
+ border-radius: 4px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ padding: 0 10px;
|
|
|
+ line-height: 20px;
|
|
|
+ height: 20px;
|
|
|
+ display: inline-block;
|
|
|
+ background-color: @bg3;
|
|
|
+ color: #8a8a8e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sales + .sales {
|
|
|
+ margin-left: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ display: flex;
|
|
|
+ // margin-top: 14px;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .miner {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: @text3;
|
|
|
+ font-size: @font1;
|
|
|
+ margin-left: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: @font4;
|
|
|
+ color: @text0;
|
|
|
+ line-height: 20px;
|
|
|
+ font-family: OSP;
|
|
|
+ img {
|
|
|
+ width: 8px;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-bg {
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ // &.isLight {
|
|
|
+ // .content {
|
|
|
+ // .name {
|
|
|
+ // color: #000000;
|
|
|
+ // }
|
|
|
+ // .bottom {
|
|
|
+ // .miner {
|
|
|
+ // color: #939599;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ &:not(:last-child) {
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ height: 1px;
|
|
|
+ background-color: var(--border);
|
|
|
+ position: absolute;
|
|
|
+ left: 74px;
|
|
|
+ right: 16px;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.status {
|
|
|
+ font-size: @font2;
|
|
|
+ color: @text0;
|
|
|
+}
|
|
|
+.sold {
|
|
|
+ background-color: @bg2;
|
|
|
+ font-size: @font1;
|
|
|
+ color: @text3;
|
|
|
+ padding: 0 17px;
|
|
|
+ border-radius: 13px;
|
|
|
+ line-height: 24px;
|
|
|
+ position: absolute;
|
|
|
+ top: 16px;
|
|
|
+ left: 16px;
|
|
|
+ z-index: 3;
|
|
|
+}
|
|
|
+.van-button {
|
|
|
+ background: var(--btnplaintBg);
|
|
|
+ border: 1px solid var(--btnplaintBorder);
|
|
|
+ min-width: 68px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+</style>
|
