星图

src/components/star/Info.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="star-info">
+        <van-image width="100%" height="calc(50vw - 24px)" :src="getImg(changeImgs([info.pic], 600))" fit="cover" />
+
+        <div class="content">
+            <div class="name">{{ info.picName }}</div>
+            <div class="status">{{ getLabelName(info.status, statusOptions) }}</div>
+        </div>
+    </div>
+</template>
+
+<script>
+import product from '../../mixins/product';
+import star from '../../mixins/star';
+export default {
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    mixins: [product, star]
+};
+</script>
+
+<style lang="less" scoped>
+.star-info {
+    width: calc(50vw - 24px);
+    background: #373b3e;
+    border-radius: 8px;
+    overflow: hidden;
+    margin: 8px;
+    display: inline-block;
+}
+
+.content {
+    padding: 6px 10px;
+    .name {
+        font-size: 14px;
+        color: #ffffff;
+        line-height: 24px;
+    }
+    .status {
+        font-size: 12px;
+        color: #939599;
+        line-height: 18px;
+        margin-top: 8px;
+    }
+}
+</style>

src/components/star/assetInfo.vue

@@ -0,0 +1,339 @@
+<template>
+    <div class="product" @click="goAsset">
+        <van-image
+            v-if="opened === false"
+            width="21.3vw"
+            height="21.3vw"
+            radius="8"
+            :src="require('../../assets/manghe.png')"
+            fit="cover"
+        />
+        <template v-else>
+            <van-image
+                class="icon-img"
+                radius="8"
+                width="21.3vw"
+                height="21.3vw"
+                :src="getImg(changeImgs(pic))"
+                fit="cover"
+            />
+        </template>
+
+        <div class="number" v-if="info.number && opened">编号：{{ info.number }}</div>
+        <img src="../../assets/png-touxing.png" class="touying" alt="" />
+        <template v-if="opened && !isMore">
+            <!-- <div class="status status1" v-if="info.consignment">寄售中</div> -->
+            <img v-if="isLock" class="status-img" src="../../assets/png-shangsuo.png" alt="" />
+            <img v-else-if="info.consignment" class="status-img" src="../../assets/png-jishouzhong.png" alt="" />
+            <img
+                v-else-if="info.status === 'NORMAL' && info.publicShow"
+                class="status-img"
+                src="../../assets/png-jinzhanshi.png"
+                alt=""
+            />
+            <img
+                v-else-if="info.status === 'AUCTIONING'"
+                class="status-img"
+                src="../../assets/png-paimaizhong.png"
+                alt=""
+            />
+            <!-- <img v-if="info.consignment" class="status-img" src="../../assets/png-jishouzhong.png" alt="" />
+            <div class="status" v-else-if="info.status === 'NORMAL'">
+                {{ info.publicShow ? '仅展示' : '未展示' }}
+            </div>
+            <div class="status" v-else>
+                {{ getLabelName(info.status, assetStatusOptions) }}
+            </div> -->
+        </template>
+        <img v-else-if="!isMore" class="status-img" src="../../assets/png-kaiqi.png" alt="" />
+        <div class="num-icon" v-else>
+            <span>×{{ num }}</span>
+        </div>
+        <!-- <div class="status status2" v-else>待开启</div> -->
+        <div class="content">
+            <div class="name van-ellipsis">
+                {{ !opened ? '盲盒待开启' : info.name }}
+            </div>
+            <!-- <template v-if="opened">
+                <div class="price-content" v-if="info.consignment">
+                    <div class="price">
+                        <img src="@assets/jiage_huang.png" alt="" />
+                        <span>{{ info.sellPrice }}</span>
+                    </div>
+                </div>
+                <div class="status" v-else-if="info.status === 'NORMAL'">
+                    {{ info.publicShow ? '仅展示' : '未展示' }}
+                </div>
+                <div class="status" v-else>
+                    {{ getLabelName(info.status, assetStatusOptions) }}
+                </div>
+            </template>
+            <div v-else class="status" style="min-height: 24px;"></div> -->
+            <div class="text">
+                <div class="minter">
+                    <!-- <van-image width="18" height="18" radius="18" :src="info.minterAvatar" fit="cover" /> -->
+                    <span class="van-ellipsis">{{ info.minter }}</span>
+                </div>
+                <!-- <van-image width="18" height="18" :radius="100" :src="info.minterAvatar" fit="cover" />
+                <span>{{ info.minter }}</span> -->
+                <!-- <div class="text1" v-if="info.type === 'BLIND_BOX'">
+          <span>{{ info.sale }}/ </span>
+          <span>{{ info.stock }}</span>
+        </div>
+        <div class="flex1"></div>
+        <like-button :isLike="info.liked" @click="likeProduct">
+          {{ info.likes }}
+        </like-button> -->
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import asset from '../../mixins/asset';
+import product from '../../mixins/product';
+
+export default {
+    mixins: [asset, product],
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        },
+        num: {
+            type: Number,
+            default: 1
+        }
+    },
+    computed: {
+        isMore() {
+            return this.num > 1;
+        },
+        pic() {
+            if (this.info.pic) {
+                return [this.info.pic];
+            } else {
+                return [];
+            }
+        }
+    },
+    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('取消收藏');
+                });
+            }
+        },
+        goAsset() {
+            if (this.info.createAssetId) {
+                this.$router.push({
+                    path: '/assetDetail',
+                    query: {
+                        id: this.info.createAssetId
+                    }
+                });
+            } else {
+                this.$router.push({
+                    path: '/starCreateResult',
+                    query: {
+                        id: this.info.id
+                    }
+                });
+            }
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.product {
+    width: 25.6vw;
+    padding-top: 5.3vw;
+    // margin: 8px;
+    // background-color: #1c1e25;
+    display: inline-block;
+    border-radius: 8px;
+    overflow: hidden;
+    position: relative;
+    min-height: 35.8vw;
+
+    &:nth-child(3n + 1) {
+        padding-right: 7.5vw;
+    }
+    &:nth-child(3n + 2) {
+        padding-right: 7.5vw;
+    }
+
+    .icon-img {
+        overflow: hidden;
+        display: block;
+        z-index: 1;
+        box-shadow: 2px -2px 4px 0px rgba(0, 0, 0, 0.3);
+    }
+    .more-img {
+        position: absolute;
+        top: calc(5.3vw - 5px);
+        left: 5px;
+        z-index: 0;
+    }
+    .content {
+        // padding: 6px 10px 8px;
+        padding: 5.3vw 0 0;
+
+        .name {
+            font-size: @font1;
+            color: #ffffff;
+            line-height: 4.5vw;
+            width: calc(21.3vw + 16px);
+        }
+
+        .price {
+            font-size: @font4;
+            font-family: OSP;
+            color: @prim;
+            line-height: 18px;
+            padding: 12px 0;
+
+            img {
+                display: inline-block;
+                width: 8px;
+            }
+        }
+        .status {
+            line-height: 24px;
+            padding: 10px 0 8px;
+            color: @text3;
+            font-size: @font2;
+        }
+    }
+
+    .text {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .text1 {
+            font-weight: 400;
+            color: @text3;
+            line-height: 117px;
+            span {
+                &:last-child {
+                    color: #fff;
+                    font-size: @font1;
+                }
+            }
+        }
+    }
+}
+.price-content {
+    display: flex;
+    align-items: center;
+    .text1 {
+        font-size: @font1;
+        color: @text3;
+        line-height: 12px;
+    }
+}
+
+.minter {
+    display: flex;
+    font-size: @font1;
+    color: @text3;
+    line-height: 4.5vw;
+    align-items: center;
+    overflow: hidden;
+    span {
+        // margin-left: 4px;
+    }
+    .van-image {
+        flex-shrink: 0;
+    }
+}
+
+.number {
+    position: absolute;
+    top: calc(26.6vw - 17px);
+    left: 0;
+    width: 21.3vw;
+    font-size: 10px;
+    color: @text3;
+    line-height: 17px;
+    background-color: fade(#000, 80%);
+    padding: 0 5px;
+    box-sizing: border-box;
+    border-radius: 0 0 8px 8px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    z-index: 2;
+}
+.touying {
+    position: absolute;
+    width: 25.6vw;
+    height: 6.4vw;
+    left: 0;
+    top: 21.3vw;
+    z-index: 0;
+}
+.status-img {
+    width: 22px;
+    height: 14px;
+    position: absolute;
+    left: 0;
+    top: 5.3vw;
+    z-index: 3;
+}
+.status {
+    background-color: #fff;
+    font-size: 12px;
+    font-weight: bold;
+    color: @text3;
+    position: absolute;
+    top: 4px;
+    left: 3px;
+    line-height: 14px;
+    border-radius: 9px;
+    z-index: 3;
+    padding: 0 10px;
+    transform: scaleX(0.8);
+    &.status1 {
+        color: #3ab200;
+    }
+    &.status2 {
+        color: #ff4f50;
+    }
+}
+.num-icon {
+    font-size: 12px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 14px;
+    padding: 0 6px;
+    background: #b65dff;
+    backdrop-filter: blur(39px);
+    position: absolute;
+    top: 5.3vw;
+    left: 0;
+    border-radius: 8px 0 8px 0;
+    z-index: 2;
+    span {
+        transform: scale(0.8);
+    }
+}
+</style>

src/mixins/product.js

@@ -79,7 +79,6 @@ export default {
     },
     methods: {
         changeImgs(list = []) {
-            // console.log(list);
             return list.map(item => {
                 if (item.type === 'video/mp4') {
                     return item.thumb;

src/mixins/star.js

@@ -0,0 +1,11 @@
+export default {
+    data() {
+        return {
+            statusOptions: [
+                { label: '审核中', value: 'PENDING' },
+                { label: '通过', value: 'SUCCESS' },
+                { label: '失败', value: 'FAIL' }
+            ]
+        };
+    }
+};

src/views/Mine.vue

@@ -259,7 +259,7 @@ export default {
                                 page: 0,
                                 size: 1,
                                 userId: this.$store.state.userInfo.id,
-                                status: 'NORMAL,TRADING,GIFTING,MINTING'
+                                status: 'NORMAL,TRADING,GIFTING,MINTING,AUCTIONING'
                             }
                         },
                         { body: 'json' }

src/views/StarMap.vue

@@ -28,11 +28,41 @@
                 </p>
             </div>
         </div>
+
+        <van-list class="list" v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
+            <van-empty
+                v-if="empty"
+                description="没有符合兑换的藏品哦~"
+                :image="require('../assets/empty_img_asset.png')"
+            />
+            <star-info v-for="(item, index) in list" :key="index" :info="item"></star-info>
+        </van-list>
     </div>
 </template>
 
 <script>
-export default {};
+import list from '../mixins/list';
+import StarInfo from '../components/star/Info.vue';
+export default {
+    mixins: [list],
+    components: {
+        StarInfo
+    },
+    data() {
+        return {
+            url: '/photoAsset/all'
+        };
+    },
+    methods: {
+        beforeData() {
+            return {
+                query: {
+                    userId: this.$store.state.userInfo.id
+                }
+            };
+        }
+    }
+};
 </script>
 
 <style lang="less" scoped>
@@ -127,4 +157,7 @@ export default {};
         background: linear-gradient(180deg, rgba(39, 43, 46, 0) 0%, #272b2e 100%);
     }
 }
+.list {
+    padding: 8px 8px 100px;
+}
 </style>

src/views/Store.vue

@@ -95,6 +95,22 @@
             <template v-for="(item, index) in showList" :key="index">
                 <coupon-info :info="item" v-if="active == 'coupon'"></coupon-info>
                 <show-info v-model:info="list[index]" v-else-if="active == 'showRoom'"></show-info>
+                <div
+                    class="asset-list"
+                    v-else-if="type == 'xingtu'"
+                    :style="{
+                        backgroundImage:
+                            active !== 'coupon' && active !== 'showRoom' && showList.length > 0
+                                ? `url(${require('../assets/png-zhantai.png')})`
+                                : ''
+                    }"
+                >
+                    <star-asset-info
+                        :info="asset"
+                        v-for="(asset, assetIndex) in item"
+                        :key="assetIndex"
+                    ></star-asset-info>
+                </div>
                 <div
                     class="asset-list"
                     v-else
@@ -163,6 +179,7 @@ import ShowInfo from '../components/asset/showInfo.vue';
 import CouponInfo from '../components/CouponInfo.vue';
 import asset from '../mixins/asset';
 import coupon from '../mixins/coupon';
+import starAssetInfo from '../components/star/assetInfo.vue';
 export default {
     name: 'store',
     mixins: [asset, coupon],
@@ -171,7 +188,8 @@ export default {
         AssetInfo,
         AssetInfoSe,
         CouponInfo,
-        ShowInfo
+        ShowInfo,
+        starAssetInfo
     },
     data() {
         return {
@@ -210,6 +228,11 @@ export default {
                             value: '',
                             type: ''
                         },
+                        {
+                            label: '个人铸造',
+                            value: 'xingtu',
+                            type: ''
+                        },
                         {
                             label: '拍卖中',
                             value: 'paimai',
@@ -327,7 +350,9 @@ export default {
             return 'createdAt,desc';
         },
         url() {
-            if (this.type === 'lock') {
+            if (this.type === 'xingtu') {
+                return '/photoAsset/all';
+            } else if (this.type === 'lock') {
                 return '/asset/all';
             } else if (this.active === 'coupon') {
                 return '/userCoupon/all';
@@ -591,6 +616,9 @@ export default {
                         lock: true
                     };
                 }
+                if (this.type === 'xingtu') {
+                    form = {};
+                }
             } else if (this.active == 'showRoom') {
                 form = {
                     publish: this.type

src/views/star/Create.vue

@@ -69,7 +69,7 @@
                 :border="false"
                 name="uploader"
                 label="上传图片"
-                :rules="[{ required: true, message: '请上传凭证' }]"
+                :rules="[{ required: true, message: '请上传图片' }]"
             >
                 <template #label>
                     <div class="title">
@@ -92,7 +92,7 @@
                 name="图片名称"
                 label="图片名称"
                 placeholder="请输入图片名称"
-                v-model="form.name"
+                v-model="form.picName"
                 required
                 :rules="[{ required: true, message: '请填写图片名称' }]"
             />
@@ -102,7 +102,7 @@
                 name="图片介绍"
                 label="图片介绍"
                 placeholder="请输入图片介绍，让大家更了解～"
-                v-model="form.detail"
+                v-model="form.picDesc"
                 clearable
                 rows="4"
                 autosize
@@ -148,7 +148,8 @@ export default {
         beforeData() {
             return {
                 query: {
-                    userId: this.$store.state.userInfo.id
+                    userId: this.$store.state.userInfo.id,
+                    status: 'NORMAL,TRADING,GIFTING,MINTING,AUCTIONING'
                 },
                 sort: 'id,desc'
             };
@@ -167,14 +168,45 @@ export default {
             });
         },
         afterRead(file, e) {
+            console.log(file);
             file.status = 'uploading';
             this.updateFile(file, 'id', 1000).then(img => {
                 console.log(img);
                 file.url = img;
                 file.status = 'done';
+                file.name = file.file.name;
+                file.type = file.file.type;
             });
         },
-        submit() {}
+        submit() {
+            let form = {
+                ...this.form,
+                userId: this.$store.state.userInfo.id,
+                destroyAssetId: this.chooseId,
+                status: 'PENDING'
+            };
+            form.pic = {
+                name: form.pic[0].name,
+                url: form.pic[0].url,
+                type: form.pic[0].type,
+                thumb: null
+            };
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.$http
+                .post('/photoAsset/save', form, { body: 'json' })
+                .then(res => {
+                    this.$toast.clear();
+                    this.$router.replace('/starCreateResult?id=' + res.id);
+                })
+                .catch(e => {
+                    if (e.error) {
+                        this.$toast(e.error);
+                    }
+                });
+        }
     }
 };
 </script>

src/views/star/CreateResult.vue

@@ -7,13 +7,19 @@
         </div>
 
         <div class="btn">
-            <van-button type="primary" plain round block>继续上传</van-button>
+            <van-button @click="create" type="primary" plain round block>继续上传</van-button>
         </div>
     </div>
 </template>
 
 <script>
-export default {};
+export default {
+    methods:{
+        create(){
+            this.$router.push('/starCreate')
+        }
+    }
+};
 </script>
 
 <style lang="less" scoped>