星图

.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

src/views/StarMap.vue

@@ -36,9 +36,7 @@
             </div>
 
             <div class="create">
-                <van-button color="#00B897" round @click="$router.push('/starCreate')" block>
-                    点击立即铸造链上星图
-                </van-button>
+                <van-button color="#00B897" round @click="createStar" block> 点击立即铸造链上星图 </van-button>
             </div>
 
             <img class="content-bg" src="@assets/png-huise-bg@3x.png" alt="" />
@@ -55,6 +53,14 @@
         </van-list>
 
         <img src="../assets/png-zhiding.png" @click="goTop" class="goTop" v-if="bodyScroll > 200" alt="" />
+
+        <van-action-sheet
+            v-model:show="showAction"
+            :actions="actions"
+            cancel-text="取消"
+            close-on-click-action
+            @select="onSelect"
+        />
     </van-pull-refresh>
 </template>
 
@@ -96,6 +102,24 @@ const onRefresh = () => {
 
 //藏品组件
 import ProductInfo from '../components/product/productInfo.vue';
+
+function createStar() {
+    showAction.value = true;
+    //
+}
+
+const showAction = ref(false);
+const actions = ref([{ name: '消耗藏品铸造 ' }, { name: '支付铸造' }]);
+import { useRouter } from 'vue-router';
+const router = useRouter();
+function onSelect(info) {
+    router.push({
+        path: '/starCreate',
+        query: {
+            type: info.name === '消耗藏品铸造 ' ? 'destory' : 'money'
+        }
+    });
+}
 </script>
 
 <script>

src/views/star/Create.vue

@@ -2,12 +2,14 @@
     <div class="container">
         <van-sticky :offset-top="barHeight">
             <div class="steps">
-                <div class="step" :class="{ active: step >= index }" v-for="(item, index) in steps" :key="index">
-                    <div class="box">
-                        <div>{{ index + 1 }}</div>
+                <template v-for="(item, index) in steps" :key="index">
+                    <div class="step" :class="{ active: step >= item.step }">
+                        <div class="box">
+                            <div>{{ index + 1 }}</div>
+                        </div>
+                        <div class="step-text">{{ item.name }}</div>
                     </div>
-                    <div class="step-text">{{ item }}</div>
-                </div>
+                </template>
             </div>
         </van-sticky>
 
@@ -129,8 +131,10 @@
             </div>
             <!-- //未下单 -->
             <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>
+                <van-button type="primary" v-if="pageType !== 'money'" @click="step = 0" plain round>
+                    上一步</van-button
+                >
+                <van-button class="btn1" 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>
@@ -158,7 +162,7 @@ import 'vue3-lottie/dist/style.css';
 import star2JSON from '../../assets/lottie/star2.json';
 import pictureCropper from '../../components/PictureCropper.vue';
 import { getCurrentInstance, onMounted, reactive, ref, watch } from 'vue-demi';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import starPay from '../../components/star/pay.vue';
 import { usePageVisibility } from '@vant/use';
 
@@ -173,6 +177,51 @@ export default {
         return { empty: false, list: [], refreshing: false, url: '/asset/all', photoAssetId: 0, info: {}, star2JSON };
     },
     setup() {
+        //步骤
+        const step = ref(0);
+        //步骤名称
+        const steps = ref([
+            {
+                name: '销毁藏品',
+                step: 0
+            },
+            {
+                name: '上传星图',
+                step: 1
+            },
+            {
+                name: '星图铸造',
+                step: 2
+            },
+            {
+                name: '提交审核',
+                step: 3
+            }
+        ]);
+        //页面铸造方式(销毁藏品/支付)
+        const pageType = ref('destory');
+        const route = useRoute();
+        if (route.query.type) {
+            pageType.value = route.query.type;
+        }
+        if (pageType.value === 'money') {
+            steps.value = [
+                {
+                    name: '上传星图',
+                    step: 1
+                },
+                {
+                    name: '星图铸造',
+                    step: 2
+                },
+                {
+                    name: '提交审核',
+                    step: 3
+                }
+            ];
+            step.value = 1;
+        }
+
         //剪切图片
         const form = reactive({
             pic: [],
@@ -197,11 +246,6 @@ export default {
             file.type = file.file.type;
         };
 
-        //步骤
-        const step = ref(0);
-        //步骤名称
-        const steps = ref(['销毁藏品', '上传星图', '星图铸造', '提交审核']);
-
         //选择消除藏品
         const chooseId = ref(0);
         const router = useRouter();
@@ -302,6 +346,7 @@ export default {
         });
 
         return {
+            pageType,
             form,
             updateImg,
             cropperRef,
@@ -356,23 +401,26 @@ export default {
             let form = {
                 ...this.form,
                 userId: this.$store.state.userInfo.id,
-                destroyAssetId: this.chooseId,
                 status: 'PENDING',
                 ownerId: this.$store.state.userInfo.id
             };
+
+            //销毁藏品
+            if (this.pageType === 'destory') {
+                form.destroyAssetId = this.chooseId;
+                form.destroyed = true;
+                form.price = 0;
+            } else {
+                //支付金额
+                form.destroyed = false;
+                form.price = this.price || 0;
+            }
             form.pic = {
                 name: form.pic[0].name,
                 url: form.pic[0].url,
                 type: form.pic[0].type,
                 thumb: null
             };
-            if (this.price) {
-                form.destroyed = true;
-                form.price = this.price;
-            } else {
-                form.destroyed = true;
-                form.price = 0;
-            }
             this.$toast.loading({
                 message: '加载中...',
                 forbidClick: true
@@ -381,7 +429,7 @@ export default {
                 .post('/photoAsset/save', form, { body: 'json' })
                 .then(res => {
                     this.$toast.clear();
-                    if (this.price) {
+                    if (res.price) {
                         this.orderStatus = res.orderStatus;
                         this.orderId = res.id;
                         this.payEvent();
@@ -417,6 +465,7 @@ export default {
     background: #fcdfa2;
     height: 72px;
     .flex();
+    justify-content: center;
     .step {
         width: 25vw;
         .flex-col();
@@ -580,6 +629,10 @@ export default {
             flex-grow: 1;
             margin-left: 16px;
         }
+
+        &.btn1 {
+            flex-grow: 1;
+        }
     }
 }
 .van-form {