Merge branch 'master' of http://git.izouma.com/xiongzhu/raex_front

package.json

@@ -65,6 +65,7 @@
         "less-loader": "^5.0.0",
         "prettier": "^2.2.1",
         "style-resources-loader": "^1.4.1",
-        "vue-cli-plugin-style-resources-loader": "^0.1.5"
+        "vue-cli-plugin-style-resources-loader": "^0.1.5",
+        "vue-picture-cropper": "^0.5.1"
     }
 }

src/components/PictureCropper.vue

@@ -0,0 +1,104 @@
+<template>
+    <van-overlay :show="show">
+        <VuePictureCropper
+            :boxStyle="{
+                width: '100%',
+                height: '100%',
+                backgroundColor: '#f8f8f8',
+                margin: 'auto'
+            }"
+            :img="pic"
+            :options="{
+                viewMode: 1,
+                dragMode: 'crop',
+                aspectRatio: 1 / 1
+            }"
+        />
+
+        <div class="btns">
+            <van-button type="primary" plain @click="cancel">取消</van-button>
+            <van-button type="primary" @click="getResult"> 确认</van-button>
+        </div>
+    </van-overlay>
+</template>
+
+<script>
+import VuePictureCropper, { cropper } from 'vue-picture-cropper';
+export default {
+    data() {
+        return {
+            show: false,
+            pic: '',
+            result: {}
+        };
+    },
+    methods: {
+        init(img = '') {
+            this.pic = img;
+            this.show = true;
+        },
+        cancel() {
+            this.show = false;
+            this.$emit('updateImg', '');
+        },
+        async getResult() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            // 获取生成的base64图片地址
+            const base64 = cropper.getDataURL();
+            // 获取生成的blob文件信息
+            const blob = await cropper.getBlob();
+            // 获取生成的file文件信息
+            const file = await cropper.getFile({
+                fileName: '测试文件名，可不传'
+            });
+            console.log({ base64, blob, file });
+            // 把base64赋给结果展示区
+            this.result.dataURL = base64;
+            this.result.blobURL = URL.createObjectURL(blob);
+            console.log(this.result);
+            this.updateFile({ file: file }, file.type).then(img => {
+                this.$toast.clear();
+                this.show = false;
+                this.$emit('updateImg', img);
+            });
+            // 隐藏裁切弹窗
+            // this.isShowDialog = false;
+        }
+    },
+    components: {
+        VuePictureCropper
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.van-overlay {
+    z-index: 99;
+}
+.btns {
+    position: absolute;
+    padding: 9px 48px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    .bottom(9px);
+    background-color: #222426;
+    .flex();
+    padding: 9px 16px;
+    z-index: 30;
+    justify-content: space-between;
+    .van-button {
+        width: 120px;
+    }
+}
+/deep/.cropper-view-box {
+    outline-color: @prim;
+}
+
+/deep/.cropper-point {
+    background-color: @prim;
+}
+</style>

src/views/Mine.vue

@@ -140,13 +140,9 @@
         </div>
         <driver />
         <div class="orderList prim">
-            <div
-                class="menu-info"
-                :style="{ width: $store.state.review ? '100%' : '50%' }"
-                @click="$router.push('/rank')"
-            >
-                <img src="@assets/info_icon_top50.png" alt="" />
-                <span>TOP50&nbsp;探索官</span>
+            <div class="menu-info" :style="{ width: $store.state.review ? '100%' : '50%' }" @click="wait">
+                <img src="@assets/info_icon_lingqishangcheng.png" alt="" />
+                <span>灵气商城</span>
             </div>
             <div class="menu-info" @click="share" v-if="!$store.state.review">
                 <van-badge :dot="shareProduct.openQuota" :offset="[-15, 5]">

src/views/asset/Consignment.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="top">
         <div class="top-content">
-            <div class="title">寄售说明</div>
+            <div class="title">拍卖说明</div>
             <ul class="name">
                 <li>1. 数字艺术品申请拍卖上架后，如5个工作日（120小时）内若未被交易，则自动下架</li>
                 <li>2. 拍卖价格为单个数字艺术品价格</li>
@@ -21,7 +21,7 @@
             </ul>
             <div class="border border1"></div>
             <div class="content">
-                <div class="title">寄售价格(元）<span>最高定价100000.00(超过20000的需要签署委托协议)</span></div>
+                <div class="title">拍卖价格(元）<span>最高定价100000.00(超过20000的需要签署委托协议)</span></div>
                 <!-- <van-field type="number" input-align="center" placeholder="请输入价格" v-model="price" /> -->
                 <van-stepper
                     v-model="price"
@@ -37,7 +37,7 @@
                 />
                 <div class="title">预计收入(元）</div>
                 <div class="info-item">
-                    <span>寄售定价</span>
+                    <span>拍卖定价</span>
                     <span class="val">{{ sellPrice }}</span>
                 </div>
                 <div class="info-item">
@@ -87,7 +87,7 @@
             />
             <div class="bottom-content">
                 <div class="btn1" @click="$router.go(-1)">取消</div>
-                <div class="btn2" @click="submit">确认寄售</div>
+                <div class="btn2" @click="submit">确认拍卖</div>
             </div>
         </div>
         <div class="border"></div>
@@ -189,7 +189,7 @@ export default {
             } else if (Number(this.price)) {
                 this.$dialog
                     .confirm({
-                        title: '寄售',
+                        title: '拍卖',
                         message: `商品将以<span style='color:#ff4f50;font-weight:bold;font-size:18px;margin:0 5px'>${this.price}</span>的价格上架`,
                         allowHtml: true
                     })

src/views/asset/Detail.vue

@@ -495,6 +495,7 @@
                     <van-button @click="publish" color="#FF7F1F" block round>竞价拍卖</van-button>
                     <van-button @click="Add" color="#FFBF27" block round>赠送</van-button>
                     <van-button @click="showLock = true" color="#515976" block round>封存</van-button>
+                    <van-button @click="starCreate" color="#5D7DFF" block round> 铸造星图</van-button>
                 </div>
             </van-action-sheet>
         </div>
@@ -764,6 +765,14 @@ export default {
                 this.$router.push('/giveSearch?id=' + this.info.id);
             }
         },
+        starCreate() {
+            this.$router.push({
+                name: 'starCreate',
+                query: {
+                    chooseId: this.assetId
+                }
+            });
+        },
         Exhibition() {
             // this.$toast.loading({
             //     message: '加载中...',

src/views/star/Create.vue

@@ -59,7 +59,7 @@
                 </div>
 
                 <div class="btn" v-if="chooseId">
-                    <van-button @click="step = 1" type="primary" block round>确认销毁，下一步</van-button>
+                    <van-button @click="sureCancel" type="primary" block round>确认销毁，下一步</van-button>
                 </div>
             </van-list>
         </van-pull-refresh>
@@ -133,6 +133,7 @@
             <Vue3Lottie :width="200" :animationData="star2JSON" />
             <div class="lottie-text">星图铸造中</div>
         </div>
+        <picture-cropper ref="cropperRef" @updateImg="updateImg"></picture-cropper>
     </div>
 </template>
 
@@ -141,36 +142,80 @@ import product from '../../mixins/product';
 import list from '../../mixins/list';
 import { Vue3Lottie } from 'vue3-lottie';
 import 'vue3-lottie/dist/style.css';
-import zuzhaoJSON from '../../assets/lottie/zuzhao.json';
-import starJSON from '../../assets/lottie/star.json';
-import star1JSON from '../../assets/lottie/star1.json';
 import star2JSON from '../../assets/lottie/star2.json';
+import pictureCropper from '../../components/PictureCropper.vue';
+import { getCurrentInstance, onMounted, reactive, ref } from 'vue-demi';
+import { useRouter } from 'vue-router';
 
 export default {
     mixins: [product, list],
     components: {
-        Vue3Lottie
+        Vue3Lottie,
+        pictureCropper
     },
     data() {
-        return {
-            step: 0,
-            steps: ['销毁藏品', '上传星图', '星图铸造', '提交审核'],
-            empty: false,
-            list: [],
-            chooseId: 0,
-            refreshing: false,
-            url: '/asset/all',
-            form: {},
-            photoAssetId: 0,
-            info: {},
-            nots: [],
-            zuzhaoJSON,
-            starJSON,
-            star1JSON,
-            star2JSON
+        return { empty: false, list: [], refreshing: false, url: '/asset/all', photoAssetId: 0, info: {}, star2JSON };
+    },
+    setup() {
+        //剪切图片
+        const form = reactive({
+            pic: []
+        });
+        const updateImg = (img = '') => {
+            if (img) {
+                form.pic[0].status = 'done';
+                form.pic[0].url = img;
+                form.pic[0].content = img;
+            } else {
+                form.pic = [];
+            }
+        };
+        const cropperRef = ref(null);
+        const afterRead = (file, e) => {
+            cropperRef.value.init(file.content);
+            file.status = 'uploading';
+            file.name = file.file.name;
+            file.type = file.file.type;
+        };
+
+        //屏蔽的藏品
+        const nots = ref([]);
+        const {
+            appContext: {
+                config: { globalProperties: gobal }
+            }
+        } = getCurrentInstance();
+        onMounted(() => {
+            gobal.$http.get('/sysConfig/get/xingtu_not').then(res => {
+                if (res.value) {
+                    nots.value = res.value.split(',');
+                }
+            });
+        });
+
+        //步骤
+        const step = ref(0);
+        //步骤名称
+        const steps = ref(['销毁藏品', '上传星图', '星图铸造', '提交审核']);
+
+        //选择消除藏品
+        const chooseId = ref(0);
+        const router = useRouter();
+        if (router.currentRoute.value.query.chooseId) {
+            chooseId.value = router.currentRoute.value.query.chooseId;
+            step.value = 1;
+        }
+        const choose = id => {
+            if (chooseId.value == id) {
+                chooseId.value = 0;
+            } else {
+                chooseId.value = id;
+            }
         };
+
+        return { form, updateImg, cropperRef, afterRead, nots, step, steps, chooseId, choose };
     },
-    inject: ['barHeight'],
+    inject: ['barHeight', 'changeScroll'],
     computed: {
         showList() {
             let list = [...this.list];
@@ -186,13 +231,6 @@ export default {
             });
         }
     },
-    mounted() {
-        this.$http.get('/sysConfig/get/xingtu_not').then(res => {
-            if (res.value) {
-                this.nots = res.value.split(',');
-            }
-        });
-    },
     methods: {
         beforeData() {
             return {
@@ -204,30 +242,12 @@ export default {
                 sort: 'id,desc'
             };
         },
-        choose(id) {
-            if (this.chooseId == id) {
-                this.chooseId = 0;
-            } else {
-                this.chooseId = id;
-            }
-        },
         onRefresh() {
             this.isLoading = true;
             this.getData().then(() => {
                 this.isLoading = false;
             });
         },
-        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() {
             let form = {
                 ...this.form,
@@ -260,6 +280,10 @@ export default {
                         this.$toast(e.error);
                     }
                 });
+        },
+        sureCancel() {
+            this.changeScroll(0);
+            this.step = 1;
         }
     }
 };

src/views/user/Rank.vue

@@ -10,6 +10,11 @@
             <div class="text2">{{ time }}</div>
         </div>
         <div class="rank-content">
+            <div class="tabs">
+                <div class="tab" @click="active = 0" :class="{ active: active === 0 }">持仓总值排名</div>
+                <div class="tab" @click="wait" :class="{ active: active === 1 }">绿洲灵气值排名</div>
+                <img class="tab-img" :class="{ 'tab-img-right': active === 1 }" src="@assets/rank-left.png" alt="" />
+            </div>
             <div class="tr">
                 <div class="th">排行</div>
                 <div class="th">用户头像</div>
@@ -42,7 +47,8 @@ export default {
     data() {
         return {
             list: [],
-            time: ''
+            time: '',
+            active: 0
         };
     },
     mounted() {
@@ -154,17 +160,18 @@ export default {
 
 .rank-content {
     height: 100%;
-    background-color: #fff;
-    border-radius: 16px 16px 0 0;
+    // border-radius: 16px 16px 0 0;
     flex-grow: 1;
     position: relative;
     z-index: 1;
     .bottom(15px);
     overflow: hidden;
+    padding-top: 6px;
     .tr {
         overflow: hidden;
         position: relative;
         padding: 0 30px;
+        background-color: #fff;
         .flex();
         .th {
             font-size: 12px;
@@ -238,4 +245,55 @@ export default {
         }
     }
 }
+
+.tabs {
+    height: 50px;
+    .flex();
+    position: relative;
+    background: #f2f2f2;
+    border-radius: 16px 16px 0 0;
+    .tab {
+        width: 50%;
+        line-height: 50px;
+        font-size: 12px;
+        color: #939599;
+        position: relative;
+        z-index: 1;
+        box-sizing: border-box;
+        &.active {
+            font-size: 16px;
+            font-weight: bold;
+            color: #3ab200;
+        }
+
+        &:nth-child(1) {
+            padding-left: 46px;
+            &.active {
+                padding-left: 36px;
+            }
+        }
+
+        &:nth-child(2) {
+            padding-left: 36px;
+            &.active {
+                padding-left: 46px;
+            }
+        }
+    }
+
+    .tab-img {
+        width: 50%;
+        display: block;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        z-index: 0;
+        transition: left ease-in-out 0.3s;
+
+        &.tab-img-right {
+            left: 50%;
+            transform: rotateY(180deg);
+        }
+    }
+}
 </style>

yarn.lock

@@ -3255,6 +3255,11 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+cropperjs@^1.5.12:
+  version "1.5.12"
+  resolved "https://registry.yarnpkg.com/cropperjs/-/cropperjs-1.5.12.tgz#d9c0db2bfb8c0d769d51739e8f916bbc44e10f50"
+  integrity sha512-re7UdjE5UnwdrovyhNzZ6gathI4Rs3KGCBSc8HCIjUo5hO42CtzyblmWLj6QWVw7huHyDMfpKxhiO2II77nhDw==
+
 croppie@^2.6.4:
   version "2.6.5"
   resolved "https://registry.npmjs.org/croppie/-/croppie-2.6.5.tgz"
@@ -9521,6 +9526,13 @@ vue-lottie@^0.2.1:
   dependencies:
     lottie-web "^5.1.9"
 
+vue-picture-cropper@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/vue-picture-cropper/-/vue-picture-cropper-0.5.1.tgz#4b49e78f8e1386ce355002f8d84078bf03b6d22f"
+  integrity sha512-hHwTRsmpHazd1ZVDZA7hMm2FSAUSfnagi60orxX5qsEhx3dxwb8jOv8weC6pz9YMitQs8US7KTbusi01UeRTkg==
+  dependencies:
+    cropperjs "^1.5.12"
+
 vue-router@^4.0.0-0:
   version "4.0.12"
   resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.0.12.tgz"