|
|
@@ -0,0 +1,206 @@
|
|
|
+<template>
|
|
|
+ <div class="search">
|
|
|
+ <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
|
|
|
+ <template v-for="(item, index) in list" :key="index">
|
|
|
+ <div class="activity">
|
|
|
+ <van-image
|
|
|
+ width="calc(50vw - 20px)"
|
|
|
+ height="calc(50vw - 20px)"
|
|
|
+ :src="getImg(item.pic)"
|
|
|
+ fit="cover"
|
|
|
+ />
|
|
|
+ <div class="stock">剩余数量:{{ item.stock }}张</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="text1">{{ item.name }}</div>
|
|
|
+ <div class="text2">
|
|
|
+ 集齐{{ item.num }}张{{ item.collectionName }}徽章, 可换取一张<span>{{
|
|
|
+ item.awardCollectionName
|
|
|
+ }}</span
|
|
|
+ >藏品
|
|
|
+ </div>
|
|
|
+ <van-button
|
|
|
+ size="small"
|
|
|
+ @click="getActivity(item, index)"
|
|
|
+ :disabled="!canGet(item) || item.stock === 0"
|
|
|
+ type="primary"
|
|
|
+ round
|
|
|
+ block
|
|
|
+ >{{ item.stock ? '领取' : '无库存' }}</van-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="status" :class="{ used: !canGet(item) }">{{ canGet(item) ? '已集齐' : '未集齐' }}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <van-empty v-if="empty" description="暂无活动哦~" :image="require('@assets/kong_png_wusousuo.png')" />
|
|
|
+ </van-list>
|
|
|
+
|
|
|
+ <order-open ref="box" :imgSrc="getImg(changeImgs(orderInfo.pic))"></order-open>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import OrderOpen from '../../components/order/OrderOpen.vue';
|
|
|
+import list from '../../mixins/list';
|
|
|
+import product from '../../mixins/product';
|
|
|
+export default {
|
|
|
+ components: { OrderOpen },
|
|
|
+ name: 'Search',
|
|
|
+ mixins: [list, product],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [],
|
|
|
+ empty: false,
|
|
|
+ url: '/activityCollection/all',
|
|
|
+ orderInfo: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ beforeData() {
|
|
|
+ return {
|
|
|
+ query: {
|
|
|
+ del: false
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ canGet(info) {
|
|
|
+ return info.collections && info.collections.length >= info.num;
|
|
|
+ },
|
|
|
+ afterData() {
|
|
|
+ if (this.isLogin) {
|
|
|
+ [...this.list].forEach((item, index) => {
|
|
|
+ console.log(item);
|
|
|
+ this.getCollect(item.collectionId).then(res => {
|
|
|
+ this.list[index] = { ...item, collections: res };
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getCollect(id) {
|
|
|
+ return this.$http
|
|
|
+ .post(
|
|
|
+ '/asset/all',
|
|
|
+ {
|
|
|
+ query: {
|
|
|
+ userId: this.$store.state.userInfo.id,
|
|
|
+ collectionId: Number(id),
|
|
|
+ projectId: this.$store.state.projectId,
|
|
|
+ status: 'NORMAL,TRADING,GIFTING'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ { body: 'json' }
|
|
|
+ )
|
|
|
+ .then(res => {
|
|
|
+ return Promise.resolve(res.content);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getActivity(info, index) {
|
|
|
+ this.$dialog
|
|
|
+ .confirm({
|
|
|
+ title: '提示',
|
|
|
+ message: `确认要使用${info.num}张${info.collectionName}兑换一张${info.awardCollectionName}吗?`,
|
|
|
+ confirmButtonText: '立即兑换'
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ return this.$http.post('/activityOrder/create?mintActivityId=' + info.id);
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.getData(true);
|
|
|
+ this.orderInfo = res;
|
|
|
+ this.show();
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ if (e && e.error) {
|
|
|
+ this.$toast(e.error);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ show() {
|
|
|
+ this.$refs.box.show = true;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.box.open();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.search {
|
|
|
+ padding-bottom: 50px;
|
|
|
+ background-color: @bg3;
|
|
|
+}
|
|
|
+.van-list {
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+.activity {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: top;
|
|
|
+ width: calc(50vw - 20px);
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 5px;
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .status {
|
|
|
+ font-size: 12px;
|
|
|
+ background-color: #f7931a;
|
|
|
+ color: @bg;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ border-radius: 0 8px 0 8px;
|
|
|
+ padding: 0 6px;
|
|
|
+ line-height: 18px;
|
|
|
+
|
|
|
+ &.used {
|
|
|
+ background-color: #939599;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .van-image {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .text1 {
|
|
|
+ font-size: 16px;
|
|
|
+ color: @text0;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ padding: 7px;
|
|
|
+ background-color: @bg;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text2 {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 16px;
|
|
|
+ margin-top: 5px;
|
|
|
+ color: @text0;
|
|
|
+ span {
|
|
|
+ color: @prim;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-button {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.stock {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: calc(50vw - 40px);
|
|
|
+ line-height: 20px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.6);
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.van-button--disabled {
|
|
|
+ background-color: #939599;
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+</style>
|