元域名1.0

src/components/order/DomainInfo.vue

@@ -0,0 +1,216 @@
+<template>
+    <div class="orderInfo">
+        <div class="order-top">
+            <span>{{ info.domainName }}</span>
+            <span class="status">{{ getLabelName(info.status, statusDomain) }}</span>
+        </div>
+        <!-- <div class="order">
+            <van-image :radius="6" width="80" height="80" :src="getImg(changeImgs(info.pic))" fit="cover" />
+
+            <div class="content">
+                <div class="name van-multi-ellipsis--l2">
+                    {{ info.name }}
+                </div>
+                <div class="text" v-if="info.number">编号:{{ info.number }}</div>
+                <div class="flex1"></div>
+                <div class="price">¥{{ info.price }}</div>
+            </div>
+        </div> -->
+        <div class="total-price">
+            <div class="total-price_left">{{ info.createdAt }}</div>
+            <div class="total-price_right">
+                <div class="total-price_right_one">实际支付</div>
+                <div class="total-price_right_two">¥{{ info.price }}</div>
+            </div>
+            <!-- <span class="time flex1"></span>
+            <span></span>
+            <span></span> -->
+        </div>
+        <!-- 
+        <div class="btns">
+            <van-button color="@text3" @click.prevent="del" plain size="mini" round> 删除订单 </van-button>
+        </div> -->
+    </div>
+</template>
+
+<script>
+import order from '../../mixins/order';
+import product from '../../mixins/product';
+export default {
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    // setup() {
+    //     const click = function () {
+    //         // console.log('wyt6w');
+    //     };
+
+    //     return { click };
+    // },
+    mixins: [order, product],
+    methods: {
+        delInit() {
+            this.$emit('delFn');
+        },
+        del() {
+            this.Dialog.confirm({
+                title: '确定删除吗？',
+                message: '删除此记录将消失'
+            }).then(() => {
+                this.$http
+                    .post('/order/hide/', {
+                        id: this.info.id
+                    })
+                    .then(() => {
+                        this.$toast.success('删除成功');
+                        setTimeout(() => {
+                            this.delInit();
+                        }, 1000);
+                    });
+            });
+            // this.$http
+            //     .post('/order/hide/', {
+            //         id: this.info.id
+            //     })
+            //     .then(() => {
+            //         this.$toast.success('删除成功');
+            //         setTimeout(() => {
+            //             this.delInit();
+            //         }, 1000);
+            //     });
+        },
+        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('取消收藏');
+                });
+            }
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.orderInfo {
+    background: @bg;
+    border-radius: 12px;
+    color: @text0;
+    padding: 12px 10px 10px;
+    margin: 20px 16px 0;
+    display: block;
+}
+.order-top {
+    padding: 0px 10px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    height: 44px;
+    background: #f5f7fa;
+    border-radius: 8px;
+    align-items: center;
+    margin-bottom: 12px;
+    span {
+        font-size: 16px;
+        color: #000000;
+        font-weight: bold;
+        line-height: 24px;
+    }
+
+    .status {
+        font-size: 14px;
+        font-weight: 400;
+        color: #3ab200;
+        line-height: 24px;
+    }
+}
+
+.order {
+    display: flex;
+    padding: 16px 0;
+    .van-image {
+        flex-shrink: 0;
+    }
+    .content {
+        flex-grow: 1;
+        margin-left: 10px;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        .name {
+            font-size: @font2;
+            font-weight: bold;
+            line-height: 22px;
+        }
+        .text {
+            font-size: @font2;
+            color: @text3;
+            line-height: 24px;
+            margin-top: 4px;
+        }
+
+        .price {
+            font-size: @font2;
+            font-weight: bold;
+            line-height: 24px;
+        }
+    }
+}
+.total-price {
+    height: 24px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0px 10px;
+    box-sizing: border-box;
+    .total-price_left {
+        font-size: 12px;
+        font-weight: 400;
+        color: #c8c9cc;
+        line-height: 24px;
+    }
+    .total-price_right {
+        display: flex;
+        .total-price_right_one {
+            font-size: 12px;
+            font-weight: bold;
+            color: #000000;
+            line-height: 24px;
+            margin-right: 10px;
+        }
+        .total-price_right_two {
+            font-size: 16px;
+            font-weight: bold;
+            color: #3ab200;
+            line-height: 24px;
+        }
+    }
+}
+.btns {
+    border-top: 1px solid #202122;
+    padding: 16px 0;
+    display: flex;
+    flex-direction: row-reverse;
+    .van-button {
+        padding: 3px 17px;
+    }
+}
+</style>

src/mixins/order.js

@@ -7,6 +7,10 @@ export default {
                 { label: '已完成', value: 'FINISH' },
                 { label: '已取消', value: 'CANCELLED' }
             ],
+            statusDomain: [
+                { label: '已完成', value: 'SUCCESS' },
+                { label: '审核中', value: 'PENDING' },
+            ],
             payMethodOptions: [
                 { label: '微信', value: 'WEIXIN' },
                 { label: '支付宝', value: 'ALIPAY' }

src/router/index.js

@@ -569,6 +569,14 @@ const routes = [
             menuPage: true
         }
     },
+    {
+        path: '/domainSubmit',
+        name: 'domainSubmit',
+        component: () => import('../views/DomainSubmit.vue'),
+        meta: {
+            menuPage: true
+        }
+    },
     {
         path: '/givesubmit',
         name: 'givesubmit',

src/views/DomainName.vue

@@ -180,13 +180,13 @@ export default {
             this.action = 2;
             this.paddingTop = 70;
             this.heightBgNumber = 100;
-            this.moreHeight = -320
+            this.moreHeight = -320;
         },
         learnMore() {
             this.action = 3;
             this.heightNumber = 180;
             this.heightBgNumber = 100;
-            this.moreHeight = -320
+            this.moreHeight = -320;
         },
         getSearch() {
             if (this.value == '') {
@@ -211,20 +211,12 @@ export default {
         },
         buy(index) {
             if (!this.list[index].sold) {
-                this.$http
-                    .post('/domainOrder/create', {
-                        userId: this.userInfo.id,
+                this.$router.push({
+                    path: '/domainSubmit',
+                    query: {
                         domain: this.list[index].domain
-                    })
-                    .then(res => {
-                        this.$toast.success('购买成功');
-                        setTimeout(() => {
-                            this.$router.back();
-                        }, 1500);
-                    })
-                    .catch(e => {
-                        this.$toast(e.error);
-                    });
+                    }
+                });
             } else {
                 return;
             }

src/views/DomainSubmit.vue

@@ -0,0 +1,264 @@
+<template>
+    <div class="domain_submit">
+        <div class="domain_submit_top">
+            <img
+                :src="require('@assets/icon_fanhui@3x (1).png')"
+                alt=""
+                class="domain_submit_top_img"
+                @click="$router.go(-1)"
+            />
+            <div>购买域名</div>
+        </div>
+        <div class="domain_submit_name">{{ domain }}</div>
+        <div class="domain_submit_price">
+            <div class="domain_submit_price_one">实际支付：</div>
+            <div class="domain_submit_price_two">
+                <img :src="require('@assets/icon_jiage@3x.png')" alt="" class="domain_submit_price_two_img" />
+                <div>{{ price }}</div>
+            </div>
+        </div>
+        <div class="domain_submit_mode">
+            <div
+                class="domain_submit_mode_con"
+                @click="payType = item.type"
+                v-for="(item, index) in payInfos"
+                :key="index"
+            >
+                <div class="domain_submit_mode_con_left">
+                    <van-image
+                        :src="item.icon"
+                        width="24px"
+                        height="24px"
+                        fit="cover"
+                        class="domain_submit_mode_con_left_img"
+                    />
+                    <div class="domain_submit_mode_con_left_title">{{ item.name }}</div>
+                </div>
+                <img
+                    class="domain_submit_mode_con_right_img"
+                    :src="payType === item.type ? icons[0] : icons[1]"
+                    alt=""
+                />
+            </div>
+        </div>
+        <div class="domain_submit_btn">
+            <div class="domain_submit_btn_con" @click="showPwdDialog = true">确认支付</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>
+    </div>
+</template>
+<script>
+import { mapState } from 'vuex';
+export default {
+    data() {
+        return {
+            payType: 'BALANCE',
+            showPwdDialog: false,
+            showKeyboard: false,
+            tradeCode: '',
+            domain: '',
+            price: 40,
+            payInfos: [
+                {
+                    icon: require('@assets/icon-balance@3x.png'),
+                    name: '余额',
+                    type: 'BALANCE'
+                },
+                // {
+                //     icon: require('@assets/bianzu@3x.png'),
+                //     name: '支付宝',
+                //     type: 'ALIPAY'
+                // },
+                // {
+                //     icon: require('@assets/icon-shouxinyi@3x.png'),
+                //     name: '首信快捷支付',
+                //     type: 'QUICK'
+                // },
+                // {
+                //     icon: require('@assets/icon-yinlian@3x.png'),
+                //     name: '银联',
+                //     type: 'H5PAY'
+                // }
+            ],
+            icons: [require('@assets/icon_gouxuan_preone@3x.png'), require('@assets/icon_gouxuan_huise@3x.png')]
+        };
+    },
+    computed: {
+        ...mapState(['userInfo'])
+    },
+    mounted() {
+        this.domain = this.$route.query.domain;
+    },
+    methods: {
+        pay() {
+            this.$http
+                .post('/domainOrder/create', {
+                    userId: this.userInfo.id,
+                    domain: this.domain,
+                    price: this.price
+                })
+                .then(res => {
+                    if (this.tradeCode == "") {
+                        this.showPwdDialog = true;
+                        this.$toast('请输入交易密码');
+                        return;
+                    }
+                    this.$http
+                        .post('/payOrder/v2/domain/balance', {
+                            id: res.id,
+                            tradeCode: this.tradeCode
+                        })
+                        .then(res => {
+                            this.$toast.success('支付成功');
+                            setTimeout(() => {
+                                this.$router.replace('/home');
+                            }, 1000);
+                        })
+                        .catch(e => {
+                            this.tradeCode = '';
+                            this.$toast(e.error || '支付失败');
+                        });
+                })
+                .catch(e => {
+                    this.$toast(e.error);
+                });
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.domain_submit {
+    padding-top: var(--safe-top);
+    width: 100%;
+    height: 100vh;
+    background: #030001;
+    position: relative;
+    .domain_submit_top {
+        position: relative;
+        text-align: center;
+        padding-top: 24px;
+        font-size: 14px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 24px;
+        margin-bottom: 46px;
+    }
+    .domain_submit_top_img {
+        width: 24px;
+        height: 24px;
+        position: absolute;
+        top: 24px;
+        left: 20px;
+    }
+    .domain_submit_name {
+        font-size: 24px;
+        text-align: center;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 24px;
+        margin-bottom: 50px;
+    }
+    .domain_submit_price {
+        width: 100%;
+        height: 48px;
+        padding: 0px 16px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .domain_submit_price_one {
+            font-size: 14px;
+            font-weight: 400;
+            color: #4f4d4d;
+            line-height: 24px;
+        }
+        .domain_submit_price_two {
+            display: flex;
+            font-size: 32px;
+            font-weight: normal;
+            color: #ffffff;
+            line-height: 24px;
+            .domain_submit_price_two_img {
+                width: 11px;
+                height: 11px;
+                padding-top: 12px;
+                margin-right: 2px;
+            }
+        }
+    }
+    .domain_submit_mode {
+        width: 100%;
+        padding: 0px 16px;
+        box-sizing: border-box;
+        margin-top: 11px;
+        .domain_submit_mode_con {
+            width: 100%;
+            height: 48px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .domain_submit_mode_con_left {
+                display: flex;
+                .domain_submit_mode_con_left_img {
+                    margin-right: 10px;
+                }
+                .domain_submit_mode_con_left_title {
+                    font-size: 14px;
+                    font-weight: bold;
+                    color: #ffffff;
+                    line-height: 24px;
+                }
+            }
+            .domain_submit_mode_con_right_img {
+                width: 24px;
+                height: 24px;
+            }
+        }
+    }
+    .domain_submit_btn {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        bottom: 43px;
+        padding: 0px 48px;
+        box-sizing: border-box;
+        .domain_submit_btn_con {
+            width: 100%;
+            height: 38px;
+            border-radius: 30px;
+            background: #db14e2;
+            font-size: 16px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 38px;
+            text-align: center;
+        }
+    }
+    .van-number-keyboard {
+        z-index: 9999;
+    }
+    :deep(.van-password-input__item) {
+        background: @bg3;
+    }
+}
+</style>

src/views/order/Orders.vue

@@ -18,6 +18,9 @@
                     <div class="btn" :class="{ active: type === 'BLI' }" @click="this.$toast('升级改版中')">
                         绿洲易拍
                     </div>
+                    <div class="btn" :class="{ active: type === 'METANAME' }" @click="changeActive('METANAME')">
+                        元域名
+                    </div>
                 </div>
                 <!-- <img src="@assets/icon／search@3x.png" alt="" class="top_img"/> -->
             </div>
@@ -42,6 +45,21 @@
             >
                 <van-tab v-for="(item, index) in tab" :key="index" :title="item.name" :name="item.status"></van-tab>
             </van-tabs>
+            <van-tabs
+                v-model:active="status"
+                :ellipsis="false"
+                line-width="16"
+                line-height="2"
+                @click="changeStatus"
+                v-if="type == 'METANAME'"
+            >
+                <van-tab
+                    v-for="(item, index) in domainTab"
+                    :key="index"
+                    :title="item.name"
+                    :name="item.status"
+                ></van-tab>
+            </van-tabs>
         </van-sticky>
 
         <van-list
@@ -71,12 +89,24 @@
             ></order-info-act>
             <van-empty v-if="empty" description="你还没有订单哦~" :image="require('@assets/kong_png_wudingdan.png')" />
         </van-list>
+        <van-list
+            class="list"
+            v-model:loading="loading"
+            :finished="finished"
+            finished-text=""
+            @load="getData"
+            v-if="type == 'METANAME'"
+        >
+            <domain-info @delFn="delFn" v-for="item in list" :key="item.id" :info="item"></domain-info>
+            <van-empty v-if="empty" description="你还没有订单哦~" :image="require('@assets/kong_png_wudingdan.png')" />
+        </van-list>
     </van-pull-refresh>
 </template>
 
 <script>
 import OrderInfo from '../../components/order/OrderInfo.vue';
 import OrderInfoAct from '../../components/order/OrderInfoAct.vue';
+import DomainInfo from '../../components/order/DomainInfo.vue';
 import list from '../../mixins/list';
 export default {
     name: 'discover',
@@ -84,7 +114,8 @@ export default {
     mixins: [list],
     components: {
         OrderInfo,
-        OrderInfoAct
+        OrderInfoAct,
+        DomainInfo
     },
     data() {
         return {
@@ -107,6 +138,20 @@ export default {
                     name: '已完成'
                 }
             ],
+            domainTab: [
+                {
+                    status: 'SUCCESS,PENDING',
+                    name: '全部'
+                },
+                {
+                    status: 'PENDING',
+                    name: '审核中'
+                },
+                {
+                    status: 'SUCCESS',
+                    name: '已完成'
+                }
+            ],
             tab: [
                 {
                     status: 'DELIVERY,PENDING,RECEIVE,AIR_DROP,FINISH',
@@ -143,16 +188,25 @@ export default {
     },
     methods: {
         beforeData() {
-            return {
-                query: {
-                    userId: this.$store.state.userInfo.id,
-                    status: this.status,
-                    type: this.type,
-                    hide: false,
-                    del: false,
-                    companyId: 1
+            if (this.type == 'METANAME') {
+                return {
+                    query: {
+                        userId: this.$store.state.userInfo.id,
+                        status: this.status
+                    }
+                };
+            } else {
+                return {
+                    query: {
+                        userId: this.$store.state.userInfo.id,
+                        status: this.status,
+                        type: this.type,
+                        hide: false,
+                        del: false,
+                        companyId: 1
+                    }
                 }
-            };
+            }
         },
         delFn() {
             console.log('删除成功');
@@ -182,6 +236,8 @@ export default {
                 (this.url = '/mintOrder/all'), (this.status = 'DELIVERY,PENDING,RECEIVE,AIR_DROP,FINISH');
             } else if (this.type == '') {
                 (this.url = '/order/all'), (this.status = 'PROCESSING,FINISH');
+            } else if (this.type == 'METANAME') {
+                (this.url = '/domainOrder/all'), (this.status = 'SUCCESS,PENDING');
             }
             this.getData(true);
         },
@@ -205,6 +261,7 @@ export default {
         height: 24px;
     }
     .top-btn {
+        overflow-x: auto;
         flex-grow: 1;
         .flex();
         .btn {
@@ -215,7 +272,7 @@ export default {
             line-height: 24px;
             display: inline-block;
             vertical-align: text-bottom;
-
+            flex-shrink: 0;
             &.active {
                 color: #000000;
                 font-weight: bold;