|
|
@@ -5,106 +5,253 @@
|
|
|
</config>
|
|
|
<template>
|
|
|
<div>
|
|
|
+ <div class="procuct">
|
|
|
+ <div class="box-con" v-for="(item, index) in list" :key="index" @click="detail(item.cardCaseId)">
|
|
|
+ <div class="product-card">
|
|
|
+ <van-image width="80" height="115" :src="item.image" fit="cover" radius="6" />
|
|
|
+
|
|
|
+ <div class="product-content">
|
|
|
+ <div class="text1">{{ item.caseName }}</div>
|
|
|
+ <div class="text2">
|
|
|
+ <span>距结束</span>
|
|
|
+ <van-count-down class="val" :time="time" format="DD 天 HH:mm:ss" />
|
|
|
+ </div>
|
|
|
+ <div class="text2">
|
|
|
+ <span>已拼箱</span>
|
|
|
+ <span class="val">{{ item.preorder || 0 }}/{{ item.total || 0 }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex1"></div>
|
|
|
+ <div class="box">
|
|
|
+ <div class="price">
|
|
|
+ <van-icon size="10" :color="$colors.red" name="jiage" class-prefix="iconfont" />
|
|
|
+ <span>{{ item.price }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="button">
|
|
|
+ <van-button type="primary" size="small">管理拼箱</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="live">
|
|
|
+ <img
|
|
|
+ src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/wechat/icon_kapai_zhibo@3x.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <span>直播</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<van-empty
|
|
|
- image="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/wechat/kong_png_wofabude.png"
|
|
|
- description="你还没有发布商品哦～"
|
|
|
+ v-if="empty"
|
|
|
+ image="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/wechat/kong_png_wukabao.png"
|
|
|
+ description="暂无卡包信息哦～"
|
|
|
>
|
|
|
- <van-button type="primary" block @click="navigateTo('/pages/store/productEdit')">去发布</van-button>
|
|
|
</van-empty>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import PublishInfo from '../components/PublishInfo.vue';
|
|
|
+import { mapState } from 'vuex';
|
|
|
+import dayjs from 'dayjs';
|
|
|
+import store from '../mixins/store';
|
|
|
+import cardPage from '../mixins/cardPage';
|
|
|
export default {
|
|
|
- // components: { PublishInfo },
|
|
|
- name: 'MinePublish',
|
|
|
+ mixins: [store, cardPage],
|
|
|
data() {
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ caseStatus: '',
|
|
|
+ sort: '',
|
|
|
+ loading: false,
|
|
|
+ list: [],
|
|
|
+ sotrId: [],
|
|
|
+ empty: false,
|
|
|
+ isMineShop: false,
|
|
|
+ offsetTop: 0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['systemInfo', 'userStoreInfo']),
|
|
|
+ dropCaseStatusList() {
|
|
|
+ let list = [...this.caseStatusList];
|
|
|
+ list = list.filter(item => {
|
|
|
+ return this.isMineShop || item.value !== 'UNDO';
|
|
|
+ });
|
|
|
+ return [...list];
|
|
|
+ },
|
|
|
+ time() {
|
|
|
+ if (this.list.endTime) {
|
|
|
+ let date = dayjs(this.list.endTime, 'YYYY-MM-DD HH:mm:ss');
|
|
|
+
|
|
|
+ return date.diff(dayjs());
|
|
|
+ } else {
|
|
|
+ return 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ if (this.isLogin) {
|
|
|
+ this.loginMethods();
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
- // Applydetail() {
|
|
|
- // this.showLoading();
|
|
|
- // this.$http
|
|
|
- // .get('/orderInfo/get/' + this.$mp.query.id)
|
|
|
- // .then(res => {
|
|
|
- // this.hideLoading();
|
|
|
- // console.log(res);
|
|
|
- // this.cardCaseInfo = res.cardCase.collection;
|
|
|
- // this.ApplydetailList = res;
|
|
|
- // this.store = res.store;
|
|
|
- // this.cardBoxList = res.cardBoxList;
|
|
|
- // this.Boxes = res.cardBoxList;
|
|
|
- // })
|
|
|
- // .catch(e => {
|
|
|
- // this.hideLoading();
|
|
|
- // if (e.error) {
|
|
|
- // this.toast(e.rror);
|
|
|
- // }
|
|
|
- // });
|
|
|
- // }
|
|
|
+ detail(cardCaseId) {
|
|
|
+ this.navigateTo('/pages/store/productEdit?id=' + cardCaseId);
|
|
|
+ },
|
|
|
+ loginMethods() {
|
|
|
+ this.loading = true;
|
|
|
+ this.getStore().then(res => {
|
|
|
+ this.storeInfo = res;
|
|
|
+ this.getData();
|
|
|
+ setTimeout(() => {
|
|
|
+ this.offsetTop = this.systemInfo.statusBarHeight + 44;
|
|
|
+ }, 1000);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getStore() {
|
|
|
+ console.log(this.userStoreInfo);
|
|
|
+ if (this.userStoreInfo) {
|
|
|
+ if (this.userStoreInfo.id.toString() === this.$mp.options.id || !this.$mp.options.id) {
|
|
|
+ this.isMineShop = true;
|
|
|
+ return this.$store.dispatch('getUserStore');
|
|
|
+ } else {
|
|
|
+ this.isMineShop = false;
|
|
|
+ return this.getStoreById(this.$mp.options.id);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return this.$store.dispatch('getUserStore').then(res => {
|
|
|
+ if (res.id.toString() === this.$mp.options.id || !this.$mp.options.id) {
|
|
|
+ this.isMineShop = true;
|
|
|
+ return Promise.resolve(res);
|
|
|
+ } else {
|
|
|
+ this.isMineShop = false;
|
|
|
+ return this.getStoreById(this.$mp.options.id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getData() {
|
|
|
+ this.empty = false;
|
|
|
+ let data = {
|
|
|
+ storeId: this.storeInfo.id
|
|
|
+ };
|
|
|
+ if (this.caseStatus) {
|
|
|
+ data.caseStatuses = this.caseStatus;
|
|
|
+ } else {
|
|
|
+ data.caseStatuses = [...this.dropCaseStatusList]
|
|
|
+ .filter(item => {
|
|
|
+ return !!item.value;
|
|
|
+ })
|
|
|
+ .map(item => {
|
|
|
+ return item.value;
|
|
|
+ })
|
|
|
+ .join(',');
|
|
|
+ }
|
|
|
+ if (this.sort) {
|
|
|
+ data.sortStr = this.sort;
|
|
|
+ }
|
|
|
+ this.showLoading();
|
|
|
+ return this.$http.post('/store/findStoreCases', data).then(res => {
|
|
|
+ this.list = res.caseInfo;
|
|
|
+ console.log(this.list);
|
|
|
+ console.log(this.list.endTime);
|
|
|
+ if (res.caseInfo.length == 0) {
|
|
|
+ this.empty = true;
|
|
|
+ }
|
|
|
+ this.hideLoading();
|
|
|
+ return Promise.resolve();
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
- // created() {
|
|
|
- // this.Applydetail();
|
|
|
- // }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.box-con {
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 12px;
|
|
|
- .box-con-Cards {
|
|
|
- display: flex;
|
|
|
- img {
|
|
|
- width: 62px;
|
|
|
- height: 90px;
|
|
|
- border-radius: 6px;
|
|
|
- }
|
|
|
- .box-con-right {
|
|
|
- width: 78%;
|
|
|
- margin-left: 8px;
|
|
|
- .box-con-tit {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- color: #000000;
|
|
|
- margin: 5px 0 10px 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .box-con-today {
|
|
|
- .flex();
|
|
|
- height: 30px;
|
|
|
- background: #f5f7fa;
|
|
|
- border-radius: 6px;
|
|
|
- width: 142px;
|
|
|
- margin: 4px 0 11px 0;
|
|
|
- p {
|
|
|
+ margin: 20px 20px;
|
|
|
+}
|
|
|
+.product-card {
|
|
|
+ height: 115px;
|
|
|
+ .flex();
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.product-content {
|
|
|
+ flex-grow: 1;
|
|
|
+ margin-left: 10px;
|
|
|
+ align-self: stretch;
|
|
|
+ .flex-col();
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ .text1 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ .ellipsis();
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text2 {
|
|
|
+ padding: 2px 0;
|
|
|
+ .flex();
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #c8c9cc;
|
|
|
+ line-height: 24px;
|
|
|
+
|
|
|
+ &.val {
|
|
|
font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- color: #303133;
|
|
|
+ color: @prim;
|
|
|
}
|
|
|
}
|
|
|
- .box-con-money {
|
|
|
- .flex();
|
|
|
- justify-content: space-between;
|
|
|
- .box-con-num {
|
|
|
- .flex();
|
|
|
- img {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- }
|
|
|
- p {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: normal;
|
|
|
- color: #c8c9cc;
|
|
|
- }
|
|
|
- }
|
|
|
- p {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- color: #c8c9cc;
|
|
|
+
|
|
|
+ /deep/ .val {
|
|
|
+ .van-count-down {
|
|
|
+ --count-down-text-color: @prim;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}</style
|
|
|
->>
|
|
|
+
|
|
|
+ .flex1 {
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ .flex();
|
|
|
+ font-size: 24px;
|
|
|
+ font-family: 'OSP';
|
|
|
+ font-weight: normal;
|
|
|
+ color: #f42202;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.button {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.live {
|
|
|
+ padding: 4px 3px;
|
|
|
+ background-color: @prim;
|
|
|
+ border-radius: 4px;
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ left: -7px;
|
|
|
+
|
|
|
+ .flex();
|
|
|
+ img {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
xuqiang