星图支付

.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/components/PayBalance.vue

@@ -0,0 +1,60 @@
+<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;
+}
+</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/pay.vue

@@ -0,0 +1,278 @@
+<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">29.90</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 {
+    props: {
+        orderId: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+            show: false,
+            payMethod: '',
+            tradeCode: ''
+        };
+    },
+    components: {
+        PayMethodPick,
+        PayBalance
+    },
+    methods: {
+        pay() {
+            if (!this.tradeCode) {
+                this.$refs.payBalance.show();
+            } else {
+                this.tradeCode = '';
+            }
+            console.log(this.tradeCode);
+            console.log(this.payMethod);
+            // switch (this.payMethod) {
+            //     case 'ALIPAY':
+            //         this.$toast.loading('支付中');
+            //         this.$http
+            //             .post('/payOrder/v2/recharge', { 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/balance', { id: this.orderId, tradeCode: this.tradeCode })
+            //             .then(res => {
+            //                 this.$toast.success('支付成功');
+            //                 setTimeout(() => {
+            //                     this.$router.replace('/orderDetail?id=' + this.orderId);
+            //                 }, 1000);
+            //             })
+            //             .catch(e => {
+            //                 this.tradeCode = '';
+            //                 this.$toast(e.error || '支付失败');
+            //             });
+            //         break;
+            //     case 'UNION':
+            //         window.open(
+            //             resolveUrl(this.$baseUrl, `/payOrder/v2/recharge/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/recharge/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/recharge/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/star/Create.vue

@@ -134,6 +134,8 @@
             <div class="lottie-text">星图铸造中</div>
         </div>
         <picture-cropper ref="cropperRef" @updateImg="updateImg"></picture-cropper>
+
+        <star-pay></star-pay>
     </div>
 </template>
 
@@ -146,12 +148,14 @@ 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';
+import starPay from '../../components/star/pay.vue';
 
 export default {
     mixins: [product, list],
     components: {
         Vue3Lottie,
-        pictureCropper
+        pictureCropper,
+        starPay
     },
     data() {
         return { empty: false, list: [], refreshing: false, url: '/asset/all', photoAssetId: 0, info: {}, star2JSON };