购物车支付

src/components/PayMethodPick.vue

@@ -1,22 +1,29 @@
 <template>
     <div>
         <template v-for="(item, index) in payConfig" :key="index">
-            <div
-                class="pay-item"
-                @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="" />
+            <div v-if="!cart">
+                <div class="pay-item" @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="" />
+                    </div>
+                    <span>{{ item.name }}</span>
+                    <img class="choose-icon"
+                        :src="item.enabled ? (checked === item.key ? (isStar ? icons[3] : icons[1]) : icons[0]) : icons[2]"
+                        alt="" />
+                </div>
+            </div>
+            <div v-else>
+                <div class="pay-items" @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="" />
+                    </div>
+                    <span>{{ item.name }}</span>
+                    <img class="choose-icon"
+                        :src="item.enabled ? (checked === item.key ? (isStar ? icons[3] : icons[1]) : icons[0]) : icons[2]"
+                        alt="" />
                 </div>
-                <span>{{ item.name }}</span>
-                <img
-                    class="choose-icon"
-                    :src="item.enabled ? (checked === item.key ? (isStar ? icons[3] : icons[1]) : icons[0]) : icons[2]"
-                    alt=""
-                />
             </div>
         </template>
     </div>
@@ -37,6 +44,10 @@ export default {
         isStar: {
             type: Boolean,
             default: false
+        },
+        cart: {
+            type: Boolean,
+            default: false
         }
     },
     computed: {
@@ -126,17 +137,20 @@ export default {
     align-items: center;
     height: 60px;
     border-bottom: 1px solid @tabBorder;
+
     .icon {
         height: 24px;
         width: 24px;
         object-fit: contain;
         display: block;
     }
+
     .img-icon {
         // width: 45px;
         .flex();
         justify-content: center;
     }
+
     span {
         font-size: 14px;
         font-weight: bold;
@@ -145,6 +159,47 @@ export default {
         flex-grow: 1;
         padding: 0 10px;
     }
+
+    .choose-icon {
+        width: 24px;
+        height: 24px;
+    }
+
+    &.not {
+        span {
+            color: @text3;
+        }
+    }
+}
+
+.pay-items {
+    display: flex;
+    align-items: center;
+    height: 48px;
+    padding: 0px 16px;
+    background: #FFFFFF;
+    .icon {
+        height: 24px;
+        width: 24px;
+        object-fit: contain;
+        display: block;
+    }
+
+    .img-icon {
+        // width: 45px;
+        .flex();
+        justify-content: center;
+    }
+
+    span {
+        font-size: 14px;
+        font-weight: bold;
+        color: @text0;
+        line-height: 24px;
+        flex-grow: 1;
+        padding: 0 10px;
+    }
+
     .choose-icon {
         width: 24px;
         height: 24px;

src/router/index.js

@@ -777,6 +777,13 @@ const routes = [{
             menuPage: true
         }
     },
+    {
+        path: '/shoppingCartSubmit',
+        name: 'shoppingCartSubmit',
+        component: () => import('../views/user/ShoppingCartSubmit.vue'),
+        meta: {
+        }
+    },
     {
         path: '/minePoint',
         name: 'minePoint',

src/views/product/Detail.vue

@@ -368,6 +368,7 @@
                     </div>
                     <div class="btn van-safe-area-bottom" ref="btn" v-else-if="info.onShelf && info.salable">
                         <div class="btn-list">
+                            <!-- btn-lists -->
                             <!-- <div class="price-content">
                     <div class="price">
                         <img src="@assets/jiage_huang.png" alt="" />
@@ -386,6 +387,7 @@
                 </div>
                 <div class="flex1"></div> -->
                             <div class="btns">
+                                <!-- btnsTwo -->
                                 <van-button class="no-btn" v-if="isAppointment" block round>
                                     <div class="appoint">
                                         <span>即将开售</span>
@@ -446,21 +448,35 @@
                                 <van-button v-else-if="assignment && info.totalQuota && userInfo.vipPoint > 0"
                                     type="primary" block round @click="checkBuy">立即购买
                                 </van-button>
-
                                 <van-button v-else type="primary" block round @click="buy">
                                     {{ info.couponPayment ? '立即兑换' : '立即购买' }}
                                 </van-button>
+                                <!-- <div v-else class="add_to_cart_btns">
+                                    <div class="add_to_cart_btn_left">
+                                        <img :src="require('@assets/icon_gouwuchebtn@3x.png')" alt=""
+                                            class="add_to_cart_btn_img">
+                                        <div class="add_to_cart_btn_text">购物车</div>
+                                    </div>
+                                    <div v-if="info.couponPayment" @click="buy" class="status-texts">
+                                        立即兑换
+                                    </div>
+                                    <div v-else @click="buy" class="add_to_cart_btn_right">
+                                        <div class="add_to_cart_btn_right_cart">加入购物车</div>
+                                        <div class="add_to_cart_btn_right_buy">立即购买</div>
+                                    </div>
+                                </div> -->
                             </div>
                         </div>
                     </div>
-
-                    <div class="van-safe-area-bottom add_to_cart_btn"
+                    <!-- add_to_cart_btn -->
+                    <div class="btn van-safe-area-bottom"
                         v-else-if="info.type !== 'PICTURE' || info.minterId !== info.ownerId">
-                        <div class="add_to_cart_btn_left">
+                        <!-- <div class="add_to_cart_btn_left">
                             <img :src="require('@assets/icon_gouwuchebtn@3x.png')" alt="" class="add_to_cart_btn_img">
                             <div class="add_to_cart_btn_text">购物车</div>
-                        </div>
-                        <div class="status-texts">仅展示</div>
+                        </div> -->
+                        <!-- <div class="status-texts">仅展示</div> -->
+                        <div class="status-text">仅展示</div>
                     </div>
                 </template>
 
@@ -1945,6 +1961,16 @@ export default {
     }
 }
 
+.btn-lists {
+    padding: 9px 16px;
+    background: #181818;
+
+    .btnsTwo {
+        position: relative;
+        min-height: 38px;
+    }
+}
+
 .btn {
     position: fixed;
     z-index: 20;
@@ -2062,6 +2088,63 @@ export default {
     }
 }
 
+.add_to_cart_btns {
+    display: flex;
+    justify-content: space-between;
+
+    .add_to_cart_btn_img {
+        width: 24px;
+        height: 24px;
+        margin-bottom: 2px;
+        padding-left: 3px;
+    }
+
+    .add_to_cart_btn_text {
+        font-size: 10px;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 10px;
+    }
+
+    .status-texts {
+        width: calc(77.5vw);
+        height: 38px;
+        background: #00FE1E;
+        border-radius: 19px;
+        font-size: 16px;
+        font-weight: bold;
+        color: #000000;
+        line-height: 38px;
+        text-align: center;
+    }
+}
+
+.add_to_cart_btn_right {
+    display: flex;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 38px;
+
+    .add_to_cart_btn_right_cart {
+        width: calc(38.5vw);
+        height: 38px;
+        border-radius: 100px 0px 0px 100px;
+        border: 1px solid #00FE1E;
+        box-sizing: border-box;
+        color: #00FE1E;
+        text-align: center;
+    }
+
+    .add_to_cart_btn_right_buy {
+        width: calc(38.5vw);
+        height: 38px;
+        background: #00FE1E;
+        border-radius: 0px 100px 100px 0px;
+        color: #000000;
+        text-align: center;
+    }
+}
+
 .share-content {
     display: flex;
     margin-top: 20px;

src/views/user/ShoppingCart.vue

@@ -71,7 +71,7 @@
                 </div>
             </div>
         </div>
-        <div class="shopping_cart_btn">
+        <div class="shopping_cart_btn van-safe-area-bottom">
             <div class="shopping_cart_btn_left" @click="checkAll">
                 <img :src="checkAllStatus ? select : unchecked" alt="" class="shopping_cart_btn_left_img">
                 <div>全选</div>
@@ -171,15 +171,16 @@ export default {
             if (this.totalSettlement == 0) {
                 return
             } else {
-                Dialog.confirm({
-                    title: '有藏品已售罄,无法购买！',
-                    confirmButtonText: '一键删除',
-                    cancelButtonText: '再想想',
-                    confirmButtonColor: '#FF4F50',
-                    cancelButtonColor: '#626366'
-                }).then(() => {
-
-                }).catch(() => { })
+                this.$router.push('/shoppingCartSubmit')
+                // Dialog.confirm({
+                //     title: '有藏品已售罄,无法购买！',
+                //     confirmButtonText: '一键删除',
+                //     cancelButtonText: '再想想',
+                //     confirmButtonColor: '#FF4F50',
+                //     cancelButtonColor: '#626366'
+                // }).then(() => {
+
+                // }).catch(() => { })
             }
         },
         del() {

src/views/user/ShoppingCartSubmit.vue

@@ -0,0 +1,220 @@
+<template>
+    <div class="page">
+        <div class="page_top">
+            <div class="page_top_con" v-for="(item, index) in collectionList" :key="index">
+                <div class="pageTitle">{{ item.myName }}</div>
+                <div class="collection_information">
+                    <!-- <van-image width="80" height="80" :radius="6" :src="getImg(changeImgs(info.pic))" fit="cover" /> -->
+                    <van-image width="80" height="80" :radius="8" :src="item.img" fit="cover" />
+                    <div class="collection_information_right">
+                        <div class="collection_information_right_name">{{ item.name }}</div>
+                        <div class="collection_information_right_no" v-if="item.type == 'DOMAIN'">剩余时长：{{ item.endTime }}
+                        </div>
+                        <div class="collection_information_right_no" v-else>{{ item.number }}</div>
+                        <div class="collection_information_right_price_one">¥{{ item.price }}</div>
+                    </div>
+                </div>
+                <div class="collection_price">
+                    <div class="collection_price_left">作品费用</div>
+                    <div class="collection_price_right">¥{{ item.price }}</div>
+                </div>
+                <div class="collection_price">
+                    <div class="collection_price_left">GAS费用</div>
+                    <div class="collection_price_right">¥1</div>
+                </div>
+            </div>
+        </div>
+        <pay-method-pick v-model="payType" cart></pay-method-pick>
+        <div class="page_btn van-safe-area-bottom">
+            <div class="page_btn_left">
+                <div class="page_btn_left_amount">总计</div>
+                <img :src="require('@assets/icon_jiagecat@3x.png')" alt="" class="page_btn_left_img">
+                <div class="page_btn_left_price">2000</div>
+            </div>
+            <div class="page_btn_right">
+                <div class="page_btn_right_one">立即支付</div>
+                <div class="page_btn_right_two">共2件</div>
+            </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), (payName = '1')), $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 PayMethodPick from '../../components/PayMethodPick';
+export default {
+    components: { PayMethodPick },
+    data() {
+        return {
+            payType: null,
+            tradeCode: '',
+            showKeyboard: false,
+            showPwdDialog: false,
+            collectionList: [
+                {
+                    type: 'DOMAIN',
+                    check: false,
+                    img: require('@assets/1091676369057_.pic@3x.png'),
+                    name: 'R.nft',
+                    endTime: '188天7时13分',
+                    myName: '持有者名称',
+                    price: 1000
+                },
+                {
+                    type: 'Collection',
+                    check: false,
+                    img: require('@assets/10561663573720_.pic_hd4@3x.png'),
+                    myImg: require('@assets/1091676369057_.pic@3x.png'),
+                    name: '游戏《百分之一》精美的礼物',
+                    myName: '持有者名称',
+                    endTime: '188天7时13分',
+                    price: 199,
+                    number: 7
+                },
+            ],
+        }
+    },
+}
+</script>
+<style lang="less" scoped>
+.page {
+    background-color: @bg3;
+    padding-bottom: 170px;
+
+    .page_top_con {
+        padding: 10px 16px 13px;
+        box-sizing: border-box;
+        background: #FFFFFF;
+        margin-bottom: 9px;
+
+        .pageTitle {
+            font-size: 14px;
+            font-weight: 400;
+            color: #000000;
+            line-height: 24px;
+            margin-bottom: 8px;
+        }
+
+        .collection_information {
+            display: flex;
+            margin-bottom: 17px;
+
+            .collection_information_right {
+                margin-left: 10px;
+
+                .collection_information_right_name {
+                    font-size: 14px;
+                    font-weight: bold;
+                    color: #000000;
+                    line-height: 24px;
+                    margin-bottom: 2px;
+                }
+
+                .collection_information_right_no {
+                    font-size: 12px;
+                    font-weight: 400;
+                    color: #939599;
+                    line-height: 24px;
+                    margin-bottom: 6px;
+                }
+
+                .collection_information_right_price_one {
+                    font-size: 14px;
+                    font-weight: bold;
+                    color: #000000;
+                    line-height: 24px;
+                }
+            }
+        }
+
+        .collection_price {
+            height: 49px;
+            display: flex;
+            align-items: center;
+            border-top: 1px solid #F5F7FA;
+            justify-content: space-between;
+
+            .collection_price_left {
+                font-size: 14px;
+                font-weight: 400;
+                color: #000000;
+            }
+
+            .collection_price_right {
+                font-size: 14px;
+                font-weight: 500;
+                color: #3AB200;
+            }
+        }
+    }
+}
+
+.page_btn {
+    width: 100%;
+    height: 56px;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0px 16px;
+    box-sizing: border-box;
+    background: #FFFFFF;
+
+    .page_btn_left {
+        display: flex;
+
+        .page_btn_left_amount {
+            font-size: 14px;
+            font-weight: 400;
+            color: #939599;
+            line-height: 24px;
+            margin-right: 6px;
+            padding-top: 3px;
+        }
+
+        .page_btn_left_img {
+            width: 11px;
+            height: 11px;
+            padding-top: 10px;
+        }
+
+        .page_btn_left_price {
+            font-size: 32px;
+            font-family: OSP-DIN, OSP;
+            font-weight: normal;
+            color: #3AB200;
+            line-height: 24px;
+        }
+    }
+
+    .page_btn_right {
+        width: 132px;
+        height: 38px;
+        background: #3AB200;
+        border-radius: 22px;
+        text-align: center;
+
+        .page_btn_right_one {
+            font-size: 16px;
+            font-weight: bold;
+            color: #FFFFFF;
+            line-height: 24px;
+        }
+
+        .page_btn_right_two {
+            font-size: 10px;
+            font-weight: 400;
+            color: #FFFFFF;
+            line-height: 10px;
+        }
+    }
+}
+</style>