Merge branch 'dev' of xiongzhu/raex_front into master

.env.development

@@ -1,4 +1,4 @@
-VUE_APP_BASE_URL=https://www.raex.vip/
+VUE_APP_BASE_URL=https://test.raex.vip/
 NODE_ENV=development
 VUE_APP_PUBLIC_PATH=/
 ASSETS_PATH=raex

package.json

@@ -1,71 +1,72 @@
 {
-    "name": "nine-space",
-    "version": "0.1.0",
-    "private": true,
-    "scripts": {
-        "serve": "vue-cli-service serve",
-        "serveRaex": "vue-cli-service serve --mode development_raex",
-        "build": "vue-cli-service build",
-        "lint": "vue-cli-service lint"
-    },
-    "dependencies": {
-        "@better-scroll/core": "^2.4.2",
-        "@chenfengyuan/vue-qrcode": "^2.0.0-rc.1",
-        "@vant/area-data": "^1.1.3",
-        "@vueuse/core": "^8.7.5",
-        "ali-oss": "^6.16.0",
-        "axios": "^0.21.4",
-        "better-scroll": "^2.4.2",
-        "clipboard": "^2.0.8",
-        "compressorjs": "^1.1.1",
-        "core-js": "^3.6.5",
-        "crypto-js": "^4.1.1",
-        "date-fns": "^2.27.0",
-        "dayjs": "^1.10.7",
-        "echarts": "^4.9.0",
-        "element-ui": "^2.15.6",
-        "eruda": "^2.4.1",
-        "html2canvas": "^1.3.2",
-        "lodash": "^4.17.21",
-        "mathjs": "^9.5.1",
-        "mitt": "^3.0.0",
-        "qrcode": "^1.4.4",
-        "query-string": "^7.0.1",
-        "queue": "^6.0.2",
-        "register-service-worker": "^1.7.1",
-        "smoothscroll-polyfill": "^0.4.4",
-        "swiper": "^6.8.1",
-        "three": "^0.136.0",
-        "v-charts": "^1.19.0",
-        "vant": "^3.2.3",
-        "vconsole": "^3.9.4",
-        "vue": "^3.2.20",
-        "vue-clipboard2": "^0.3.3",
-        "vue-croppie": "^2.0.2",
-        "vue-lottie": "^0.2.1",
-        "vue-router": "^4.0.0-0",
-        "vue3-lottie": "^2.3.0",
-        "vuex": "^4.0.0-0"
-    },
-    "devDependencies": {
-        "@volar-plugins/prettier": "^1.1.4",
-        "@vue/cli-plugin-babel": "~4.5.0",
-        "@vue/cli-plugin-eslint": "~4.5.0",
-        "@vue/cli-plugin-router": "~4.5.0",
-        "@vue/cli-plugin-vuex": "~4.5.0",
-        "@vue/cli-service": "~4.5.0",
-        "@vue/compiler-sfc": "^3.0.0",
-        "@vue/composition-api": "^1.6.1",
-        "@vue/eslint-config-prettier": "^6.0.0",
-        "babel-eslint": "^10.1.0",
-        "eslint": "^6.7.2",
-        "eslint-plugin-prettier": "^3.3.1",
-        "eslint-plugin-vue": "^7.0.0",
-        "less": "^3.0.4",
-        "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-picture-cropper": "^0.5.1"
-    }
+  "name": "nine-space",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "serveRaex": "vue-cli-service serve --mode development_raex",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@better-scroll/core": "^2.4.2",
+    "@chenfengyuan/vue-qrcode": "^2.0.0-rc.1",
+    "@vant/area-data": "^1.1.3",
+    "@vueuse/core": "^8.7.5",
+    "ali-oss": "^6.16.0",
+    "axios": "^0.21.4",
+    "better-scroll": "^2.4.2",
+    "clipboard": "^2.0.8",
+    "compressorjs": "^1.1.1",
+    "core-js": "^3.6.5",
+    "crypto-js": "^4.1.1",
+    "date-fns": "^2.27.0",
+    "dayjs": "^1.10.7",
+    "echarts": "^4.9.0",
+    "element-ui": "^2.15.6",
+    "eruda": "^2.4.1",
+    "html2canvas": "^1.3.2",
+    "lodash": "^4.17.21",
+    "mathjs": "^9.5.1",
+    "mitt": "^3.0.0",
+    "qrcode": "^1.4.4",
+    "query-string": "^7.0.1",
+    "queue": "^6.0.2",
+    "register-service-worker": "^1.7.1",
+    "smoothscroll-polyfill": "^0.4.4",
+    "swiper": "^6.8.1",
+    "three": "^0.136.0",
+    "v-charts": "^1.19.0",
+    "vant": "^3.2.3",
+    "vconsole": "^3.9.4",
+    "vue": "^3.2.20",
+    "vue-clipboard2": "^0.3.3",
+    "vue-croppie": "^2.0.2",
+    "vue-lottie": "^0.2.1",
+    "vue-picture-cropper": "^0.5.1",
+    "vue-router": "^4.0.0-0",
+    "vue3-lottie": "^2.3.0",
+    "vuex": "^4.0.0-0"
+  },
+  "devDependencies": {
+    "@volar-plugins/prettier": "^1.1.4",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0",
+    "@vue/composition-api": "^1.6.1",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^7.0.0",
+    "less": "^3.0.4",
+    "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-picture-cropper": "^0.5.1"
+  }
 }

src/components/PayBalance.vue

@@ -0,0 +1,64 @@
+<template>
+    <van-number-keyboard class="balance-keyboard" v-model="code" :show="showKeyboard" @blur="showKeyboard = false" />
+    <van-dialog
+        v-model:show="showPwdDialog"
+        title="请输入支付密码"
+        confirmButtonText="立即支付"
+        show-cancel-button
+        confirmButtonColor="#3ab200"
+        @cancel="(showPwdDialog = false), $toast.clear()"
+        @confirm="pay"
+    >
+        <div style="padding: 20px 0">
+            <van-password-input :value="code" :focused="showKeyboard" @focus="showKeyboard = true" gutter="4px" />
+        </div>
+    </van-dialog>
+</template>
+
+<script>
+import { ref, watch } from 'vue-demi';
+export default {
+    props: {
+        tradeCode: {
+            type: String,
+            default: ''
+        }
+    },
+    setup(props, context) {
+        const code = ref('');
+        const showPwdDialog = ref(false);
+        const showKeyboard = ref(false);
+
+        watch(code, val => {
+            context.emit('update:tradeCode', val);
+        });
+
+        const show = () => {
+            code.value = '';
+            showPwdDialog.value = true;
+        };
+
+        const pay = () => {
+            context.emit('pay');
+        };
+
+        return {
+            code,
+            showPwdDialog,
+            showKeyboard,
+            show,
+            pay
+        };
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.balance-keyboard {
+    z-index: 3000;
+}
+
+/deep/.van-password-input__security li {
+    border: 1px solid @text3;
+}
+</style>

src/components/PayMethodPick.vue

@@ -6,6 +6,7 @@
                 @click="pick(item)"
                 v-if="item.show && (item.key === 'BALANCE' ? showBalance : true)"
                 :key="index"
+                :class="{ not: !item.enabled }"
             >
                 <div class="img-icon">
                     <img class="icon" :src="item.icon" alt="" />

src/components/star/assetInfo.vue

@@ -156,6 +156,13 @@ export default {
                         id: this.info.createAssetId
                     }
                 });
+            } else if (this.info.orderStatus === 'NOT_PAID') {
+                this.$router.push({
+                    path: '/starCreate',
+                    query: {
+                        id: this.info.id
+                    }
+                });
             } else {
                 this.$router.push({
                     path: '/starCreateResult',

src/components/star/pay.vue

@@ -0,0 +1,275 @@
+<template>
+    <div>
+        <van-action-sheet v-model:show="show" :closeable="false" class="recharge-dialog">
+            <div class="title">
+                <div class="text">支付信息</div>
+                <div class="close" @click="show = false">
+                    <img src="@assets/icon_dialog_close.png" />
+                </div>
+            </div>
+            <div class="content">
+                <div class="amount">
+                    <div class="text">铸造费(元)</div>
+                    <div class="num">{{ price }}</div>
+                </div>
+                <div class="line"></div>
+                <div class="title-methods">支付方式</div>
+                <div style="padding: 0 16px">
+                    <pay-method-pick v-model="payMethod"></pay-method-pick>
+                </div>
+            </div>
+            <div class="btn-wrapper">
+                <van-button type="primary" :color="$colors.prim" round block class="btn-recharge" @click="pay">
+                    立即支付
+                </van-button>
+            </div>
+        </van-action-sheet>
+        <pay-balance v-model:tradeCode="tradeCode" ref="payBalance" @pay="pay"></pay-balance>
+    </div>
+</template>
+
+<script>
+import PayMethodPick from '../PayMethodPick.vue';
+import PayBalance from '../PayBalance.vue';
+import resolveUrl from 'resolve-url';
+export default {
+    data() {
+        return {
+            show: false,
+            payMethod: '',
+            tradeCode: '',
+            price: 0,
+            orderId: 0
+        };
+    },
+    components: {
+        PayMethodPick,
+        PayBalance
+    },
+    methods: {
+        init(price, orderId) {
+            this.price = price;
+            this.orderId = orderId;
+            this.show = true;
+        },
+        hide() {
+            this.show = false;
+        },
+        pay() {
+            switch (this.payMethod) {
+                case 'ALIPAY':
+                    this.$toast.loading('支付中');
+                    this.$http
+                        .post('/payOrder/v2/pic/ali', { id: this.orderId })
+                        .then(res => {
+                            this.openScheme(res);
+                            setTimeout(() => {
+                                this.$toast.clear();
+                            }, 1000);
+                        })
+                        .catch(e => {
+                            this.$toast(e.error || '支付失败');
+                        });
+                    break;
+                case 'BALANCE':
+                    if (!this.tradeCode) {
+                        this.$refs.payBalance.show();
+                        return;
+                    }
+                    this.$toast.loading('支付中');
+                    this.$http
+                        .post('/payOrder/v2/pic/balance', { id: this.orderId, tradeCode: this.tradeCode })
+                        .then(res => {
+                            this.$toast.success('支付成功');
+                            this.show = false;
+                            this.$emit('payNext');
+                        })
+                        .catch(e => {
+                            this.tradeCode = '';
+                            this.$toast(e.error || '支付失败');
+                            this.show = false;
+                        });
+                    break;
+                case 'UNION':
+                    window.open(
+                        resolveUrl(this.$baseUrl, `/payOrder/v2/pic/sandQuick?id=${this.orderId}`)
+                            .replace('www.raex.vip', 'jump.raex.vip')
+                            .replace('test.raex.vip', 'jumptest.raex.vip'),
+                        '_blank'
+                    );
+                    break;
+                case 'QUICK_BIND':
+                    this.$toast.loading('支付中');
+                    this.$http
+                        .get('/payOrder/v2/pic/sandQuickBind', {
+                            id: this.orderId
+                        })
+                        .then(res => {
+                            this.$toast.clear();
+                            this.openScheme(res);
+                        })
+                        .catch(e => {
+                            this.$toast.clear();
+                            this.$toast(e.error || '支付失败');
+                        });
+                    break;
+                case 'ALI':
+                    this.$toast.loading('支付中');
+                    this.$http
+                        .post('/payOrder/v2/pic/ali', { id: this.orderId })
+                        .then(res => {
+                            this.openScheme(res);
+                            setTimeout(() => {
+                                this.$toast.clear();
+                            }, 1000);
+                        })
+                        .catch(e => {
+                            this.$toast(e.error || '支付失败');
+                        });
+                    break;
+                case 'SYXPAY':
+                    this.$router.push({
+                        name: 'bankPay',
+                        query: {
+                            id: this.orderId,
+                            type: 'star'
+                        }
+                    });
+            }
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.recharge-dialog {
+    overflow: auto;
+    .content {
+        flex-basis: calc(80vh - 150px);
+        flex-grow: 1;
+        overflow: auto;
+        //height: calc(100vh - 300px);
+    }
+    .title {
+        height: 50px;
+        position: relative;
+        &::after {
+            .setBottomLine();
+        }
+        .flex();
+        .text {
+            margin-left: 16px;
+            font-size: 14px;
+            color: black;
+            font-weight: bold;
+            flex-grow: 1;
+        }
+        .close {
+            padding: 10px 16px;
+            img {
+                width: 24px;
+                height: 24px;
+            }
+        }
+    }
+    .amount {
+        background: #f5f7fa;
+        border-radius: 4px;
+        margin: 16px;
+        .flex-col();
+        align-items: center;
+        padding: 18px 0;
+        .text {
+            font-size: 14px;
+            color: #939599;
+            line-height: 24px;
+        }
+        .num {
+            margin-top: 7px;
+            font-size: 36px;
+            font-family: OSP;
+            color: #000000;
+            line-height: 36px;
+        }
+    }
+    .line {
+        background: @bg3;
+        height: 1px;
+        margin: 0 16px;
+    }
+    .title-methods {
+        font-size: 14px;
+        line-height: 24px;
+        font-weight: bold;
+        margin-left: 16px;
+        margin-top: 20px;
+        margin-right: 16px;
+        .bank-name {
+            font-size: 14px;
+            color: @text3;
+            font-weight: normal;
+            float: right;
+        }
+    }
+    .btn-wrapper {
+        height: 56px;
+        min-height: 56px;
+        .flex();
+        padding-bottom: env(safe-area-inset-bottom);
+        position: relative;
+        &::after {
+            .setTopLine();
+        }
+        .btn-recharge {
+            // flex-grow: 1;
+            // height: 38px;
+            // border-radius: 19px;
+            // background: #373a60;
+            // font-size: 16px;
+            // color: white;
+            // font-weight: bold;
+            // .flex();
+            // justify-content: center;
+            margin: 0 48px;
+            ::v-deep(.van-button__content) {
+                font-weight: bold;
+            }
+        }
+    }
+    .iap-row {
+        .flex();
+        padding: 0 15px;
+        margin-top: 15px;
+        .iap-item {
+            flex-basis: 0;
+            flex-grow: 1;
+            height: 50px;
+            border-radius: 8px;
+            background-color: @bg3;
+            color: @text1;
+            .flex-col();
+            align-items: center;
+            justify-content: center;
+            margin-left: 15px;
+            .name {
+                font-size: 14px;
+            }
+            .price {
+                margin-top: 2px;
+                font-size: 13px;
+                color: @text3;
+            }
+            &:first-child {
+                margin-left: 0;
+            }
+            &.active {
+                background: @prim;
+                color: white;
+                .price {
+                    color: rgba(255, 255, 255, 0.5);
+                }
+            }
+        }
+    }
+}
+</style>

src/plugins/keeps.js

@@ -0,0 +1,28 @@
+import { onActivated, ref, nextTick, inject } from 'vue';
+import { onBeforeRouteLeave } from 'vue-router';
+
+const useKeep = (names = [], checkSave) => {
+    const setKeeps = inject('setKeeps');
+    const bodyScroll = inject('bodyScroll');
+    const changeScroll = inject('changeScroll');
+    const scrollTop = ref(0);
+
+    onActivated(() => {
+        nextTick(() => {
+            changeScroll(scrollTop.value || 0);
+        });
+    });
+
+    onBeforeRouteLeave((to, from, next) => {
+        if (checkSave && checkSave(to, from)) {
+            scrollTop.value = bodyScroll.value;
+            setKeeps(['index', 'starMap']);
+        } else {
+            scrollTop.value = 0;
+            setKeeps(['index', 'starMap'], false);
+        }
+        next();
+    });
+};
+
+export default useKeep;

src/plugins/list.js

@@ -0,0 +1,78 @@
+import { ref } from 'vue';
+import { getCurrentInstance } from 'vue';
+
+function useList(url, beforeData = {}, httpType) {
+    const {
+        appContext: {
+            config: { globalProperties: global }
+        }
+    } = getCurrentInstance();
+
+    const empty = ref(false);
+    const loading = ref(false);
+    const finished = ref(false);
+    const page = ref(0);
+    const totalElements = ref(0);
+    const size = ref(20);
+    const list = ref([]);
+    const getData = (isRefresh = false) => {
+        if (isRefresh) {
+            page.value = 0;
+            list.value = [];
+        }
+        loading.value = true;
+        finished.value = false;
+        empty.value = false;
+
+        let data = { page: page.value, size: size.value, sort: 'createdAt,desc' };
+        if (beforeData) {
+            data = {
+                ...data,
+                ...beforeData
+            };
+        }
+
+        if (httpType === 'get') {
+            return global.$http.get(url, data, { body: 'json' }).then(res => {
+                if (res.first) {
+                    list.value = [];
+                }
+                list.value = [...list.value, ...res.content];
+                empty.value = res.empty;
+                loading.value = false;
+                finished.value = res.last;
+                if (!finished.value) {
+                    page.value = page.value + 1;
+                }
+                totalElements.value = Number(res.totalElements);
+            });
+        } else {
+            return global.$http.post(url, data, { body: 'json' }).then(res => {
+                if (res.first) {
+                    list.value = [];
+                }
+                list.value = [...list.value, ...res.content];
+                empty.value = res.empty;
+                loading.value = false;
+                finished.value = res.last;
+                if (!finished.value) {
+                    page.value = page.value + 1;
+                }
+                totalElements.value = Number(res.totalElements);
+            });
+        }
+    };
+
+    return {
+        empty,
+        loading,
+        finished,
+        page,
+        totalElements,
+        size,
+        list,
+        getData
+    };
+}
+
+export default useList;

src/views/StarMap.vue

@@ -45,60 +45,49 @@
     </van-pull-refresh>
 </template>
 
-<script>
-import list from '../mixins/list';
+<script setup>
+//获取列表
+import useList from '../plugins/list';
+let beforeData = {
+    query: {
+        onShelf: true,
+        del: false,
+        type: 'PICTURE'
+    },
+    sort: 'id,desc'
+};
+const { empty, loading, finished, list, getData } = useList('/collection/all', beforeData);
+
+//keepAlive
+import useKeep from '../plugins/keeps';
+useKeep(['index', 'starMap'], (to, from) => {
+    return !to.meta.menuPage;
+});
+
+import { inject, ref } from 'vue-demi';
+
+//置顶
+const bodyScroll = inject('bodyScroll');
+const changeScroll = inject('changeScroll');
+const goTop = () => {
+    changeScroll(0, true);
+};
+
+//下拉刷新
+const isLoading = ref(false);
+const onRefresh = () => {
+    getData(true).then(() => {
+        isLoading.value = false;
+    });
+};
+
+//藏品组件
 import ProductInfo from '../components/product/productInfo.vue';
+</script>
+
+<script>
 export default {
-    name: 'starMap',
-    mixins: [list],
-    inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll', 'bodyScroll'],
-    components: {
-        ProductInfo
-    },
-    data() {
-        return {
-            url: '/collection/all',
-            scrollTop: 0
-        };
-    },
-    methods: {
-        beforeData() {
-            return {
-                query: {
-                    onShelf: true,
-                    del: false,
-                    type: 'PICTURE'
-                },
-                sort: 'id,desc'
-            };
-        },
-        goTop() {
-            this.changeScroll(0, true);
-        },
-        onRefresh() {
-            this.getData(true).then(() => {
-                this.isLoading = false;
-            });
-            // setTimeout(() => {
-
-            // }, 1000);
-        }
-    },
-    activated() {
-        this.$nextTick(() => {
-            this.changeScroll(this.scrollTop || 0);
-        });
-    },
-    beforeRouteLeave(to, from, next) {
-        if (!to.meta.menuPage) {
-            this.scrollTop = this.scrollWrapper.scrollTop;
-            this.setKeeps(['index', 'starMap']);
-        } else {
-            this.scrollTop = 0;
-            this.setKeeps(['index', 'starMap'], false);
-        }
-        next();
-    }
+    name: 'starMap'
 };
 </script>
 

src/views/Submit.vue

@@ -51,25 +51,7 @@
                 <!-- <wx-open-launch-weapp id="launch-btn" :username="launchName" :path="launchPath"> </wx-open-launch-weapp> -->
             </div>
         </div>
-        <van-number-keyboard v-model="tradeCode" :show="showKeyboard" @blur="showKeyboard = false" />
-        <van-dialog
-            v-model:show="showPwdDialog"
-            title="请输入支付密码"
-            confirmButtonText="立即支付"
-            show-cancel-button
-            confirmButtonColor="#3ab200"
-            @cancel="(showPwdDialog = false), $toast.clear()"
-            @confirm="pay"
-        >
-            <div style="padding: 20px 0">
-                <van-password-input
-                    :value="tradeCode"
-                    :focused="showKeyboard"
-                    @focus="showKeyboard = true"
-                    gutter="4px"
-                />
-            </div>
-        </van-dialog>
+        <pay-balance v-model:tradeCode="tradeCode" @pay="pay" ref="payBalance"></pay-balance>
     </div>
 </template>
 
@@ -446,7 +428,7 @@ export default {
             } else if (this.payType === 'BALANCE') {
                 if (!this.tradeCode) {
                     this.$toast.clear();
-                    this.showPwdDialog = true;
+                    this.$refs.payBalance.show();
                     return;
                 }
                 this.$toast.loading({

src/views/asset/Consignment.vue

@@ -3,7 +3,7 @@
         <div class="top-content">
             <div class="title">拍卖说明</div>
             <ul class="name">
-                <li>1. 数字艺术品申请拍卖上架后，如5个工作日（120小时）内若未被交易，则自动下架</li>
+                <li>1. 数字艺术品申请拍卖上架后，如5日（120小时）内若未被交易，则自动下架</li>
                 <li>2. 拍卖价格为单个数字艺术品价格</li>
                 <li>3. 竞拍者将会看到数字艺术品的版权情况及数字权益的使用情况</li>
                 <li>4. 委托拍卖成功交易后，数字艺术品的点赞数量将会被清除</li>

src/views/asset/Detail.vue

@@ -726,21 +726,21 @@ export default {
                 .then(() => {
                     if (!this.info.consignment) {
                         Dialog.confirm({
-                            title: '寄售上架',
-                            message: '确定寄售上架吗？'
+                            title: '一口价拍卖',
+                            message: '确定一口价拍卖吗？'
                         }).then(() => {
                             this.$router.push('/Consignment?id=' + this.info.id);
                         });
                     } else {
                         Dialog.confirm({
-                            title: '取消寄售',
-                            message: '确定取消寄售吗？'
+                            title: '取消一口价拍卖',
+                            message: '确定取消一口价拍卖吗？'
                         })
                             .then(() => {
                                 return this.$http.post(`/asset/cancelConsignment?id=${this.info.id}`);
                             })
                             .then(res => {
-                                this.$toast.success('取消寄售');
+                                this.$toast.success('取消一口价拍卖');
                                 setTimeout(() => {
                                     this.getProduct();
                                 }, 1000);

src/views/pay/BankPay.vue

@@ -74,6 +74,10 @@ export default {
             this.$http.get('/auctionOrder/get/' + this.orderId).then(res => {
                 this.price = res.totalPrice;
             });
+        } else if (this.type === 'star') {
+            this.$http.get('/photoAsset/get/' + this.orderId).then(res => {
+                this.price = res.price;
+            });
         } else {
             this.$http.get('/order/get/' + this.orderId).then(res => {
                 this.price = res.totalPrice;
@@ -161,6 +165,20 @@ export default {
                     .catch(e => {
                         this.$toast(e.error);
                     });
+            } else if (this.type === 'star') {
+                this.$http
+                    .post('/payOrder/v2/pic/agreement?id=' + this.orderId, {
+                        bindCardId: this.bankInfo.bindCardId
+                    })
+                    .then(res => {
+                        this.payOrder = res;
+                        if (res.needCaptcha) {
+                            this.onSubmit(e);
+                        }
+                    })
+                    .catch(e => {
+                        this.$toast(e.error);
+                    });
             } else {
                 this.$http
                     .post('/payOrder/v2/agreement', {
@@ -212,6 +230,8 @@ export default {
                             } else {
                                 this.$router.replace('/auctionOrderDetail?id=' + this.orderId);
                             }
+                        } else if (this.type === 'star') {
+                            this.$router.go(-1);
                         } else {
                             this.$router.replace({ name: 'orderDetail', query: { id: this.orderId } });
                         }

src/views/star/Create.vue

@@ -125,16 +125,26 @@
                     7.最终解释权归RAEX绿洲宇宙平台所有。
                 </div>
             </div>
-            <div class="btn btns">
+            <!-- //未下单 -->
+            <div class="btn btns" v-if="!orderId">
                 <van-button type="primary" @click="step = 0" plain round> 上一步</van-button>
                 <van-button round type="primary" native-type="submit">提交铸造</van-button>
             </div>
+            <div class="btn btns" v-else>
+                <van-button type="primary" @click="$router.go(-1)" plain round> 返回</van-button>
+                <van-button round type="primary" @click="payEvent" v-if="orderStatus === 'NOT_PAID'"
+                    >立即支付</van-button
+                >
+                <van-button round type="primary" v-else-if="!orderId" native-type="submit">提交铸造</van-button>
+            </div>
         </van-form>
         <div class="zhuzao" v-else-if="step === 2">
             <Vue3Lottie :width="200" :animationData="star2JSON" />
             <div class="lottie-text">星图铸造中</div>
         </div>
         <picture-cropper ref="cropperRef" @updateImg="updateImg"></picture-cropper>
+
+        <star-pay ref="pay" @payNext="payNext"></star-pay>
     </div>
 </template>
 
@@ -145,14 +155,17 @@ import { Vue3Lottie } from 'vue3-lottie';
 import 'vue3-lottie/dist/style.css';
 import star2JSON from '../../assets/lottie/star2.json';
 import pictureCropper from '../../components/PictureCropper.vue';
-import { getCurrentInstance, onMounted, reactive, ref } from 'vue-demi';
+import { getCurrentInstance, onMounted, reactive, ref, watch } from 'vue-demi';
 import { useRouter } from 'vue-router';
+import starPay from '../../components/star/pay.vue';
+import { usePageVisibility } from '@vant/use';
 
 export default {
     mixins: [product, list],
     components: {
         Vue3Lottie,
-        pictureCropper
+        pictureCropper,
+        starPay
     },
     data() {
         return { empty: false, list: [], refreshing: false, url: '/asset/all', photoAssetId: 0, info: {}, star2JSON };
@@ -160,7 +173,9 @@ export default {
     setup() {
         //剪切图片
         const form = reactive({
-            pic: []
+            pic: [],
+            picName: '',
+            picDesc: ''
         });
         const updateImg = (img = '') => {
             if (img) {
@@ -173,28 +188,13 @@ export default {
         };
         const cropperRef = ref(null);
         const afterRead = (file, e) => {
-            console.log(file)
+            console.log(file);
             cropperRef.value.init(file.content, file);
             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);
         //步骤名称
@@ -215,7 +215,107 @@ export default {
             }
         };
 
-        return { form, updateImg, cropperRef, afterRead, nots, step, steps, chooseId, choose };
+        //未支付订单
+        const orderId = ref(0);
+        const pay = ref(0);
+        const orderStatus = ref('');
+        onMounted(() => {
+            if (router.currentRoute.value.query.id) {
+                orderId.value = router.currentRoute.value.query.id;
+                getAsset();
+            }
+        });
+
+        //获取藏品
+        const getAsset = () => {
+            pay.value.hide();
+            gobal.$toast.loading('加载中');
+            gobal.$http
+                .get('/photoAsset/get/' + orderId.value)
+                .then(res => {
+                    gobal.$toast.clear();
+                    if (res.orderStatus === 'NOT_PAID') {
+                        form.pic = [res.pic];
+                        form.picName = res.picName;
+                        form.picDesc = res.picDesc;
+                        price.value = res.price;
+                        step.value = 1;
+                        orderStatus.value = res.orderStatus;
+                        payEvent();
+                    } else if (!res.del) {
+                        payNext();
+                    }
+                })
+                .catch(e => {
+                    gobal.$toast.clear();
+                    if (e.error) {
+                        gobal.$toast(e.error);
+                    }
+                });
+        };
+
+        //支付
+        const payEvent = () => {
+            pay.value.init(price.value, orderId.value);
+        };
+
+        //屏蔽的藏品
+        const nots = ref([]);
+        const price = ref(0); //铸造价格
+        const {
+            appContext: {
+                config: { globalProperties: gobal }
+            }
+        } = getCurrentInstance();
+        onMounted(() => {
+            gobal.$http.get('/sysConfig/get/xingtu_not,pic_price').then(res => {
+                if (res.xingtu_not) {
+                    nots.value = res.xingtu_not.value.split(',');
+                }
+                if (res.pic_price && !orderId.value) {
+                    price.value = Number(res.pic_price.value);
+                }
+            });
+        });
+
+        //支付成功
+        const payNext = () => {
+            step.value = 2;
+            setTimeout(() => {
+                router.replace({
+                    path: '/starCreateResult',
+                    query: {
+                        id: orderId.value
+                    }
+                });
+            }, 3000);
+        };
+
+        //页面获取焦点刷新
+        const pageVisibility = usePageVisibility();
+        watch(pageVisibility, value => {
+            if (orderId.value) {
+                getAsset();
+            }
+        });
+
+        return {
+            form,
+            updateImg,
+            cropperRef,
+            afterRead,
+            nots,
+            step,
+            steps,
+            chooseId,
+            choose,
+            price,
+            pay,
+            orderStatus,
+            orderId,
+            payEvent,
+            payNext
+        };
     },
     inject: ['barHeight', 'changeScroll'],
     computed: {
@@ -264,6 +364,10 @@ export default {
                 type: form.pic[0].type,
                 thumb: null
             };
+            if (this.price) {
+                form.destroyed = true;
+                form.price = this.price;
+            }
             this.$toast.loading({
                 message: '加载中...',
                 forbidClick: true
@@ -272,10 +376,16 @@ export default {
                 .post('/photoAsset/save', form, { body: 'json' })
                 .then(res => {
                     this.$toast.clear();
-                    this.step = 2;
-                    setTimeout(() => {
-                        this.$router.replace('/starCreateResult?id=' + res.id);
-                    }, 3000);
+                    if (this.price) {
+                        this.orderStatus = res.orderStatus;
+                        this.orderId = res.id;
+                        this.payEvent();
+                    } else {
+                        this.step = 2;
+                        setTimeout(() => {
+                            this.$router.replace('/starCreateResult?id=' + res.id);
+                        }, 3000);
+                    }
                 })
                 .catch(e => {
                     if (e.error) {

src/views/star/CreateResult.vue

@@ -31,15 +31,13 @@ export default {
                     sub: '审核失败，请重新铸造上传',
                     color: '#F53809'
                 };
-            } else if (this.status === 'PENDING') {
+            } else {
                 return {
                     img: require('@assets/png-fuhe.png'),
                     title: '提交成功',
                     sub: '<p>1. 绿洲宇宙的探索者，您的作品正在进行星图铸造！您可以在藏品室“个人作品”中查看您的星图！</p><p>2. 星图的铸造及审核冷却期为24小时，这期间不得进行展示与馈赠。完成铸造及审核后，即可进行展示与馈赠。</p><p>3. 赶快前往绿洲宇宙，在您的元宇宙空间及展厅中展示您的作品吧！</p>',
                     color: '#43CE00'
                 };
-            } else {
-                return '';
             }
         }
     },
@@ -58,10 +56,7 @@ export default {
             if (this.status === 'FAIL') {
                 this.$http.post('/photoAsset/del/' + this.id);
                 this.$router.replace({
-                    name: 'starCreate',
-                    query: {
-                        id: this.id
-                    }
+                    name: 'starCreate'
                 });
             } else {
                 this.$router.replace('/starCreate');