1. 移动端咨询详情页；2. 移动端咨询支付成功；

assets/css/consult/user/_id.scss

@@ -470,6 +470,7 @@
                         width: 124px;
                         height: 40px;
                         padding: 0;
+                        border: none;
                         background: #308eff;
                         border-radius: 6px;
                         font-size: 14px;
@@ -823,8 +824,8 @@
 .consult-detail-wrapper-mobile {
     position: relative;
     width: 100%;
-    padding-bottom: calc(56px + 8px + constant(safe-area-inset-bottom));
-    padding-bottom: calc(56px + 8px + env(safe-area-inset-bottom));
+    padding-bottom: calc(36px + constant(safe-area-inset-bottom));
+    padding-bottom: calc(36px + env(safe-area-inset-bottom));
     display: flex;
     flex-direction: column;
     .pay-wrapper {
@@ -863,6 +864,7 @@
             margin-top: 6px;
             width: 122px;
             height: 44px;
+            border: none;
             background: #308eff;
             border-radius: 6px;
             font-size: 15px;
@@ -871,6 +873,373 @@
             color: #ffffff;
         }
     }
+    .userinfo-wrapper {
+        width: 100%;
+        padding: 20px 10px;
+        background: #fff;
+        .user-content {
+            width: 100%;
+            display: flex;
+            .avatar {
+                flex-shrink: 0;
+                width: 118px;
+                height: 118px;
+                border-radius: 3px;
+                object-fit: cover;
+            }
+            .user-intro-content {
+                flex: 1;
+                margin-left: 10px;
+                .nickname-content {
+                    height: 24px;
+                    display: flex;
+                    align-items: center;
+                    .nickname {
+                        max-width: calc(100vw - 118px - 20px - 36px);
+                        font-size: 17px;
+                        font-family: PingFangSC, PingFangSC-Medium;
+                        font-weight: 500;
+                        color: #222222;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                    }
+                    .user-level {
+                        flex-shrink: 0;
+                        width: 34px;
+                        height: 20px;
+                        margin-left: 2px;
+                    }
+                }
+                .description-text {
+                    width: 100%;
+                    line-height: 18px;
+                    margin-top: 7px;
+                    font-size: 13px;
+                    font-family: PingFangSC, PingFangSC-Regular;
+                    color: #666666;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    white-space: pre-wrap;
+                    -webkit-box-orient: vertical;
+                    -webkit-line-clamp: 4;
+                    word-break: break-all;
+                }
+            }
+        }
+        .stats-content {
+            margin-top: 12px;
+            width: 100%;
+            height: 18px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .stats-info {
+                display: flex;
+                align-items: center;
+                .stats-item {
+                    font-size: 13px;
+                    font-family: PingFangSC, PingFangSC-Regular;
+                    color: #666666;
+                    margin-right: 12px;
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                    span {
+                        color: #308eff;
+                    }
+                }
+            }
+            .other-user-info {
+                font-size: 13px;
+                font-family: PingFangSC, PingFangSC-Regular;
+                color: #999999;
+            }
+        }
+    }
+    .consult-list-wrapper {
+        margin-top: 0;
+        .consult-list {
+            position: relative;
+            width: 100%;
+            .consult-item {
+                margin: 0 10px;
+                padding-bottom: 16px;
+                margin-bottom: 10px;
+                background: #ffffff;
+                border-radius: 8px;
+                overflow: hidden;
+                &:last-child {
+                    margin-bottom: 0;
+                }
+                .consult-item-header {
+                    position: relative;
+                    width: 100%;
+                    padding: 0 14px;
+                    height: 50px;
+                    line-height: 50px;
+                    background: rgba(34, 34, 34, 0.08);
+                    font-size: 14px;
+                    font-family: PingFangSC, PingFangSC-Semibold;
+                    font-weight: 600;
+                    color: #222222;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+                .consult-item-pay {
+                    width: 100%;
+                    height: 32px;
+                    padding: 0 16px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    .expand-wrapper {
+                        display: flex;
+                        align-items: center;
+                        font-size: 13px;
+                        font-family: PingFangSC, PingFangSC-Medium;
+                        font-weight: 500;
+                        text-align: left;
+                        color: #222222;
+                        cursor: pointer;
+                        .expand-icon {
+                            width: 15px;
+                            height: 15px;
+                        }
+                    }
+                    .price-wrapper {
+                        display: flex;
+                        align-items: center;
+                        .price-text {
+                            margin-right: 16px;
+                            font-size: 13px;
+                            font-family: PingFangSC, PingFangSC-Semibold;
+                            font-weight: 600;
+                            color: #ff6600;
+                        }
+                        .pay-btn {
+                            width: 100px;
+                            height: 32px;
+                            padding: 0;
+                            border: none;
+                            background: #308eff;
+                            border-radius: 5px;
+                            font-size: 12px;
+                            font-family: PingFangSC, PingFangSC-Medium;
+                            font-weight: 500;
+                            color: #ffffff;
+                        }
+                    }
+                }
+                .consult-item-content {
+                    position: relative;
+                    margin-top: 15px;
+                    margin-bottom: 11px;
+                    .content-info {
+                        width: 100%;
+                        max-height: 69px;
+                        line-height: 23px;
+                        padding: 0 16px;
+                        font-size: 13px;
+                        font-family: PingFangSC, PingFangSC-Regular;
+                        color: #222222;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        display: -webkit-box;
+                        white-space: normal;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: 3;
+                    }
+                    .content-info-expand {
+                        width: 100%;
+                        line-height: 23px;
+                        padding: 0 16px;
+                        font-size: 13px;
+                        font-family: PingFangSC, PingFangSC-Regular;
+                        color: #222222;
+                        display: flex;
+                        flex-direction: column;
+                        align-items: center;
+                        img {
+                            max-width: 100%;
+                            margin-top: 16px;
+                            object-fit: scale-down;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .why-me-wrapper {
+        .why-me-content {
+            width: calc(100vw - 20px);
+            margin: 3px 10px 0;
+            padding: 20px 10px;
+            font-size: 15px;
+            font-family: PingFangSC, PingFangSC-Regular;
+            color: #222222;
+            line-height: 27px;
+            background: #ffffff;
+            border-radius: 8px;
+            white-space: pre-wrap;
+        }
+    }
+    .skill-list-wrapper {
+        .skill-list {
+            position: relative;
+            width: calc(100vw - 20px);
+            display: flex;
+            margin: 10px 10px 0;
+            overflow-x: scroll;
+            overflow-y: hidden;
+            -webkit-overflow-scrolling: touch;
+            &::-webkit-scrollbar {
+                display: none;
+            }
+            .skill-item {
+                flex-shrink: 0;
+                width: 260px;
+                height: 260px;
+                margin-right: 10px;
+                background: #ffffff;
+                overflow: hidden;
+                border-radius: 9px;
+                box-shadow: 0px 5px 14px 0px rgba(6,10,28,0.06); 
+                display: flex;
+                flex-direction: column;
+                &:last-child {
+                    margin-right: 0;
+                }
+                .cover {
+                    width: 100%;
+                    height: 135px;
+                    overflow: hidden;
+                    object-fit: scale-down;
+                }
+                .owner-wrapper {
+                    width: 100%;
+                    height: 20px;
+                    margin-top: 15px;
+                    padding: 0 10px;
+                    display: flex;
+                    align-items: center;
+                    .avatar {
+                        flex-shrink: 0;
+                        width: 20px;
+                        height: 20px;
+                        overflow: hidden;
+                        border-radius: 50%;
+                    }
+                    .nickname {
+                        flex: 1;
+                        line-height: 20px;
+                        margin-left: 5px;
+                        font-size: 14px;
+                        font-family: PingFangSC, PingFangSC-Regular;
+                        font-weight: 400;
+                        color: #666666;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                    }
+                }
+                .title {
+                    width: 100%;
+                    height: 38px;
+                    margin-top: 11px;
+                    padding: 0 10px;
+                    line-height: 19px;
+                    font-size: 14px;
+                    font-family: PingFangSC, PingFangSC-Medium;
+                    font-weight: 500;
+                    color: #333333;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    white-space: normal;
+                    -webkit-box-orient: vertical;
+                    -webkit-line-clamp: 2;
+                    word-break: break-all;
+                    &:hover {
+                        color: #308eff;
+                    }
+                }
+                .price-wrapper {
+                    width: 100%;
+                    height: 15px;
+                    margin-top: 10px;
+                    padding: 0 10px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    .price-text {
+                        font-size: 17px;
+                        line-height: 15px;
+                        font-family: PingFangSC, PingFangSC-Semibold;
+                        font-weight: 600;
+                        color: #ff6600;
+                    }
+                    .buy-num {
+                        font-size: 14px;
+                        font-family: PingFangSC, PingFangSC-Regular;
+                        font-weight: 400;
+                        color: #999999;
+                    }
+                }
+            }
+        }
+    }
+    .common-card-mobile {
+        position: relative;
+        width: 100%;
+        margin-top: 15px;
+        .common-title-mobile {
+            position: relative;
+            width: 100%;
+            height: 42px;
+            padding-left: 16px;
+            display: flex;
+            align-items: center;
+            font-size: 15px;
+            font-family: PingFangSC, PingFangSC-Semibold;
+            font-weight: 600;
+            color: #222222;
+            &:after {
+                position: absolute;
+                content: " ";
+                top: 13px;
+                left: 0;
+                width: 2px;
+                height: 16px;
+                background: #308eff;
+                border-radius: 2px;
+            }
+        }
+    }
+    .consult-btn {
+        position: fixed;
+        width: 170px;
+        height: 52px;
+        bottom: 51px;
+        left: calc(50% - 88px);
+        border-radius: 26px;
+        background: #308eff;
+        opacity: 0.95;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        font-family: PingFangSC, PingFangSC-Medium;
+        font-weight: 500;
+        color: #ffffff;
+        img {
+            width: 16px;
+            height: 16px;
+            margin-right: 4px;
+        }
+    }
 }
 // 时间选择 dialog
 .time-dialog-title {
@@ -1091,6 +1460,9 @@
     .select-consult-list {
         position: relative;
         width: 100%;
+        max-height: 170px;
+        overflow-x: hidden;
+        overflow-y: scroll;
         .select-consult-item {
             width: 100%;
             height: 50px;
@@ -1169,3 +1541,298 @@
         color: #999999;
     }
 }
+// 移动端：时间选择 drawer
+.mobile-time-dialog-title,
+.mobile-select-consult-title {
+    width: 100%;
+    height: 28px;
+    line-height: 28px;
+    font-size: 20px;
+    font-family: PingFangSC, PingFangSC-Semibold;
+    font-weight: 600;
+    text-align: center;
+    color: #222222;
+}
+.mobile-time-dialog-content {
+    position: relative;
+    width: 100%;
+    padding: 0 16px;
+    .title {
+        flex-shrink: 0;
+        height: 20px;
+        line-height: 20px;
+        font-size: 14px;
+        font-family: PingFangSC, PingFangSC-Semibold;
+        font-weight: 600;
+        color: #222222;
+    }
+    .date-wrapper {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        .date-list-wrapper {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            overflow-x: scroll;
+            overflow-y: hidden;
+            // padding-right: 10px;
+            -webkit-overflow-scrolling: touch;
+            &::-webkit-scrollbar {
+                display: none;
+            }
+            .date-item {
+                flex-shrink: 0;
+                position: relative;
+                width: 80px;
+                height: 48px;
+                line-height: 48px;
+                font-size: 15px;
+                font-family: PingFangSC, PingFangSC-Regular;
+                text-align: center;
+                color: #666666;
+                cursor: pointer;
+                &.active {
+                    font-family: PingFangSC, PingFangSC-Semibold;
+                    font-weight: 600;
+                    text-align: center;
+                    color: #308eff;
+                    &:after {
+                        position: absolute;
+                        content: " ";
+                        bottom: 0;
+                        left: calc(50% - 11.5px);
+                        width: 23px;
+                        height: 2px;
+                        opacity: 1;
+                        background: #308eff;
+                        border-radius: 2px;
+                    }
+                }
+            }
+        }
+    }
+    .time-wrapper {
+        width: 100%;
+        margin-top: 24px;
+        display: flex;
+        flex-direction: column;
+        .time-list-wrapper {
+            position: relative;
+            width: 100%;
+            margin-top: 8px;
+            .time-list-item {
+                position: relative;
+                width: 100%;
+                // margin-left: 8px;
+                display: flex;
+                align-items: center;
+                overflow-x: scroll;
+                overflow-y: hidden;
+                // padding-right: 12px;
+                -webkit-overflow-scrolling: touch;
+                &::-webkit-scrollbar {
+                    display: none;
+                }
+                .time-item {
+                    flex-shrink: 0;
+                    width: 97px;
+                    height: 45px;
+                    line-height: 43px;
+                    margin-right: 8px;
+                    background: #ffffff;
+                    border: 1px solid rgba(0,0,0,0.07);
+                    border-radius: 6px;
+                    box-shadow: 0px 3px 12px 0px rgba(8,27,50,0.05);
+                    font-size: 15px;
+                    font-family: PingFangSC, PingFangSC-Regular;
+                    font-weight: 400;
+                    text-align: center;
+                    color: #666666;
+                    cursor: pointer;
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                    &.active {
+                        font-family: PingFangSC, PingFangSC-Semibold;
+                        font-weight: 600;
+                        color: #308eff;
+                        border: 1px solid #308eff;
+                        box-shadow: none;
+                    }
+                }
+                .time-empty {
+                    width: 100%;
+                    // margin-top: 8px;
+                    height: 45px;
+                    line-height: 45px;
+                    font-size: 15px;
+                    font-family: PingFangSC, PingFangSC-Regular;
+                    font-weight: 400;
+                    text-align: center;
+                    color: #666666;
+                }
+            }
+        }
+    }
+    .action-wrapper {
+        width: 100%;
+        margin-top: 40px;
+        display: flex;
+        align-items: center;
+        // justify-content: center;
+        .confirm-btn {
+            width: calc(100vw - 40px);
+            height: 46px;
+            background: #308eff;
+            border-radius: 6px;
+            font-size: 15px;
+            font-family: PingFangSC, PingFangSC-Medium;
+            font-weight: 500;
+            color: #ffffff;
+            border: none !important;
+        }
+    }
+}
+// 移动端：咨询选择 drawer
+.mobile-select-consult-content {
+    position: relative;
+    width: 100%;
+    padding: 0 16px;
+    .select-consult-list {
+        position: relative;
+        width: 100%;
+        .select-consult-item {
+            width: 100%;
+            height: 50px;
+            padding: 0 16px;
+            margin-bottom: 10px;
+            border: 1px solid #f1f1f1;
+            display: flex;
+            align-items: center;
+            font-size: 15px;
+            font-family: PingFangSC, PingFangSC-Regular;
+            color: #222222;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            cursor: pointer;
+            &.active {
+                border-color: #308eff;
+                color: #308eff;
+            }
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+    .time-wrapper {
+        width: 100%;
+        height: 59px;
+        margin-top: 27px;
+        box-shadow: 0px -1px 0px 0px #f4f4f4 inset; 
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        cursor: pointer;
+        .time-title {
+            font-size: 16px;
+            font-family: PingFangSC, PingFangSC-Regular;
+            font-weight: 400;
+            color: #333333;
+            display: flex;
+            align-items: center;
+            img {
+                width: 24px;
+                height: 24px;
+                margin-right: 10px;
+            }
+        }
+        .selected-time {
+            font-size: 16px;
+            font-family: PingFangSC, PingFangSC-Regular;
+            font-weight: 400;
+            color: #999999;
+            letter-spacing: 0px;
+            display: flex;
+            align-items: center;
+            img {
+                width: 15px;
+                height: 15px;
+                margin-right: 3px;
+            }
+        }
+    }
+    .action-wrapper {
+        width: 100%;
+        margin-top: 40px;
+        display: flex;
+        align-items: center;
+        // justify-content: center;
+        .confirm-btn {
+            width: calc(100vw - 40px);
+            height: 46px;
+            background: #308eff;
+            border-radius: 6px;
+            font-size: 15px;
+            font-family: PingFangSC, PingFangSC-Medium;
+            font-weight: 500;
+            color: #ffffff;
+            border: none !important;
+        }
+    }
+    .tips-text {
+        width: 100%;
+        margin-top: 9px;
+        line-height: 18px;
+        font-size: 13px;
+        font-family: PingFangSC, PingFangSC-Regular;
+        font-weight: 400;
+        text-align: center;
+        color: #999999;
+    }
+}
+// 支付成功 dialog
+.pay-success-title {
+    width: 100%;
+    height: 21px;
+    line-height: 21px;
+    font-size: 15px;
+    font-family: PingFangSC, PingFangSC-Medium;
+    font-weight: 500;
+    text-align: center;
+    color: #222222;
+}
+.pay-success-content {
+    position: relative;
+    padding: 0 20px;
+    .pay-success-text {
+        width: 100%;
+        line-height: 20px;
+        font-size: 14px;
+        font-family: PingFangSC, PingFangSC-Regular;
+        font-weight: 400;
+        text-align: center;
+        color: #333333;
+    }
+    .action-wrapper {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 36px;
+        .confirm-btn {
+            width: 100%;
+            height: 40px;
+            padding: 0;
+            border: none;
+            background: #308eff;
+            border-radius: 6px;
+            font-size: 14px;
+            font-family: PingFangSC, PingFangSC-Medium;
+            font-weight: 500;
+            text-align: center;
+            color: #ffffff;
+        }
+    }
+}

pages/frontend/consult/user/_id.vue

@@ -1,8 +1,7 @@
 <template>
     <ErrorPage404 v-if="!isExist"></ErrorPage404>
     <div :class="mobile ? 'mobileMain' : ''"
-        :style="{marginTop: mainMarginTop}"
-        style="margin-bottom: 30px !important;"
+        :style="{marginTop: mainMarginTop, marginBottom: mobile ? '0 !important' : '30px !important'}"
         v-else>
         <div class="consult-detail-wrapper" v-if="!mobile">
             <div class="userinfo-wrapper">
@@ -36,13 +35,14 @@
                             </div>
                             <div class="experience-text">
                                 <img src="@/assets/img/consult/experience-icon@2x.png">
-                                <span>工作年限：{{ consultDetail.user.work_year_name}}</span>
+                                <span>工作年限：{{ consultDetail.user.work_year_name }}</span>
                             </div>
                             <el-button class="all-buy-btn" @click="handleClickAllBuyBtn">付费咨询</el-button>
                         </div>
                         <div class="stats-content">
-                            <div v-if="consultDetail.user.zx_rating" class="rating-text">响应率：<span>{{ consultDetail.user.zxRatingText }}</span></div>
-                            <div v-if="consultDetail.user.zx_total_num" class="num-text">约聊人数：<span>{{ consultDetail.user.zx_total_num }}人</span></div>
+                            <div class="rating-text">响应度：<span>{{ consultDetail.user.zxRatingText }}</span></div>
+                            <div class="num-text">回复率：<span>{{ consultDetail.user.zxRatingPercent }}</span></div>
+                            <!-- <div v-if="consultDetail.user.zx_total_num" class="num-text">约聊人数：<span>{{ consultDetail.user.zx_total_num }}人</span></div> -->
                         </div>
                         <!-- 行家自述内容 -->
                         <div class="self-description-content">
@@ -211,7 +211,94 @@
             </div>
         </div>
         <div class="consult-detail-wrapper-mobile" v-else>
-
+            <!-- 用户信息 -->
+            <div class="userinfo-wrapper">
+                <div class="user-content">
+                    <img :src="consultDetail.user.icon_url" alt="avatar" class="avatar">
+                    <div class="user-intro-content">
+                        <div class="nickname-content">
+                            <span class="nickname">{{ consultDetail.user.nickname }}</span>
+                            <img class="user-level" v-if="consultDetail.user.freework_level == 3" src="@/assets/img/common/cert-f3@2x.png">
+                            <img class="user-level" v-if="consultDetail.user.freework_level == 2" src="@/assets/img/common/cert-f2@2x.png">
+                        </div>
+                        <div ref="descriptionText" class="description-text">{{ consultDetail.sale_summary }}</div>
+                    </div>
+                </div>
+                <div class="stats-content">
+                    <div class="stats-info">
+                        <div class="stats-item">响应度：<span>{{ consultDetail.user.zxRatingText }}</span></div>
+                        <div class="stats-item">回复率：<span>{{ consultDetail.user.zxRatingPercent }}</span></div>
+                    </div>
+                    <div class="other-user-info">工作年限：{{ consultDetail.user.work_year_name }} {{ consultDetail.user.city_op_name }}</div>
+                </div>
+            </div>
+            <!-- 话题列表 -->
+            <div class="consult-list-wrapper common-card-mobile">
+                <div class="common-title-mobile">擅长话题</div>
+                <div class="consult-list">
+                    <div
+                        class="consult-item"
+                        v-for="(item, index) in consultDetail.sale_list"
+                        :key="item.sale_id">
+                        <div class="consult-item-header">{{ item.title }}</div>
+                        <div class="consult-item-content">
+                            <!-- 展开时 -->
+                            <div class="content-info-expand" v-show="item.expand">
+                                <div style="width: 100%; white-space: pre-wrap;">{{ item.content }}</div>
+                                <img v-if="item.img_array.length && item.img_array[0]" :src="item.img_array[0]" alt="">
+                            </div>
+                            <!-- 收起时 -->
+                            <div class="content-info" v-show="!item.expand">{{ item.content }}</div>
+                        </div>
+                        <div class="consult-item-pay">
+                            <div class="expand-wrapper" @click="handleClickExpand(index)">
+                                <span v-show="item.showExpand">{{ item.expand ? '收起' : '展开' }}</span>
+                                <img v-show="item.showExpand" class="expand-icon" :src="item.expand ? ExpandTopIcon : ExpandDownIcon" alt="expand">
+                            </div>
+                            <div class="price-wrapper">
+                                <div class="price-text">￥{{ item.price }}</div>
+                                <el-button
+                                    :loading="item.loading"
+                                    @click="handleClickPay(item.sale_id, index)"
+                                    class="pay-btn">付费咨询</el-button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 为什么选择我 -->
+            <div class="why-me-wrapper common-card-mobile">
+                <div class="common-title-mobile">为什么选择我</div>
+                <div class="why-me-content">{{ consultDetail.sale_summary_choose || '' }}</div>
+            </div>
+            <!-- 技能商品 -->
+            <div class="skill-list-wrapper common-card-mobile">
+                <div class="common-title-mobile">技能商品</div>
+                <div class="skill-list" v-if="skillList.length">
+                    <div
+                        class="skill-item"
+                        v-for="item in skillList"
+                        :key="item.sale_id"
+                        @click="handleClickSkillItem(item.sale_id)">
+                        <img class="cover" :src="`${item.coverImage}?x-oss-process=image/resize,w_800`" alt="skillCover,cover">
+                        <div class="owner-wrapper">
+                            <img class="avatar" :src="item.user.icon_url" alt="avatar">
+                            <div class="nickname">{{ item.user.nickname }}</div>
+                        </div>
+                        <div class="title">{{ item.title }}</div>
+                        <div class="price-wrapper">
+                            <div class="price-text">￥{{ item.price }}</div>
+                            <div class="buy-num">{{ item.buy_num }}人已学习</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="skill-empty"></div>
+            </div>
+            <!-- 发起咨询按钮 -->
+            <div class="consult-btn" @click="handleClickMobileAllBuyBtn">
+                <img src="@/assets/img/consult/consult-btn-icon@2x.png" alt="">
+                <span>发起咨询</span>
+            </div>
         </div>
         <!-- 约聊时间选择 modal -->
         <el-dialog
@@ -361,6 +448,144 @@
                 <div class="tips-text">超过48小时未确认将全额退款</div>
             </div>
         </el-dialog>
+        <!-- 移动端：约聊时间选择 modal -->
+        <el-drawer
+            :visible.sync="isShowMobileSelectTimeDialog"
+            direction="btt"
+            size="380px">
+            <div class="mobile-time-dialog-title" slot="title">选择预约时间</div>
+            <div class="mobile-time-dialog-content">
+                <div class="date-wrapper">
+                    <div class="title">日期</div>
+                    <div class="date-list-wrapper">
+                        <div
+                            class="date-item"
+                            :class="currentDateIndex === index ? 'active' : ''"
+                            v-for="(item, index) in orderTime"
+                            :key="index"
+                            @click="handleClickDialogDate(index)">
+                            {{ item.date }}
+                        </div>
+                    </div>
+                </div>
+                <div class="time-wrapper">
+                    <div class="title">时间</div>
+                    <div class="time-list-wrapper">
+                        <div
+                            class="time-list-item"
+                            v-show="currentDateIndex === index"
+                            v-for="(item, index) in orderTime"
+                            :key="`time-${index}`">
+                            <!-- empty info -->
+                            <div class="time-empty" v-if="item.time.length === 1 && item.time[0].date === '00:00'">
+                                当前日期无服务
+                            </div>
+                            <template v-else>
+                                <div
+                                    class="time-item"
+                                    :class="selectedOrderTime === timeItem.value ? 'active' : ''"
+                                    v-for="timeItem in item.time"
+                                    :key="timeItem.value"
+                                    @click="handleClickDialogTime(timeItem.value)">
+                                    {{ timeItem.date }}
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                </div>
+                <div class="action-wrapper">
+                    <el-button
+                        class="confirm-btn"
+                        @click="handleClickDialogConfirm">确认</el-button>
+                </div>
+            </div>
+        </el-drawer>
+        <!-- 移动端：选择话题 & 时间 drawer -->
+        <el-dialog
+            :visible.sync="isShowMobileSelectConsultDialog"
+            width="85%"
+            center
+            @close="handleSelectConsultClose">
+            <div class="select-consult-title" slot="title">选择咨询话题</div>
+            <div class="select-consult-content">
+                <div class="select-consult-list">
+                    <div
+                        class="select-consult-item"
+                        :class="{ 'active': item.sale_id == selectedConsultItem.sale_id }"
+                        v-for="(item, index) in consultDetail.sale_list"
+                        :key="`select-consult-${item.sale_id}`"
+                        @click="handleSelectConsultItem(item, index)">
+                        {{ item.title }}
+                    </div>
+                </div>
+                <div class="time-wrapper" @click="handleClickSelectTime">
+                    <div class="time-title">
+                        <img src="@/assets/img/consult/time-icon@2x.png" alt="">
+                        <span>预约时间</span>
+                    </div>
+                    <div class="selected-time">
+                        <span>{{ selectedOrderTime2 || '选择时间' }}</span>
+                        <img src="@/assets/img/consult/right-arrow@2x.png" alt="">
+                    </div>
+                </div>
+                <div class="action-wrapper">
+                    <el-button
+                        class="confirm-btn"
+                        @click="handleSelectConsultConfirm">{{ selectedConsultItem.sale_id ? `￥${selectedConsultItem.price}向TA咨询` : '选择话题' }}</el-button>
+                </div>
+                <div class="tips-text">超过48小时未确认将全额退款</div>
+            </div>
+        </el-dialog>
+        <!-- <el-drawer
+            :visible.sync="isShowMobileSelectConsultDialog"
+            direction="btt"
+            size="500px">
+            <div class="mobile-select-consult-title" slot="title">选择咨询话题</div>
+            <div class="mobile-select-consult-content">
+                <div class="select-consult-list">
+                    <div
+                        class="select-consult-item"
+                        :class="{ 'active': item.sale_id == selectedConsultItem.sale_id }"
+                        v-for="(item, index) in consultDetail.sale_list"
+                        :key="`select-consult-${item.sale_id}`"
+                        @click="handleSelectConsultItem(item, index)">
+                        {{ item.title }}
+                    </div>
+                </div>
+                <div class="time-wrapper" @click="handleClickSelectTime">
+                    <div class="time-title">
+                        <img src="@/assets/img/consult/time-icon@2x.png" alt="">
+                        <span>预约时间</span>
+                    </div>
+                    <div class="selected-time">
+                        <span>{{ selectedOrderTime2 || '选择时间' }}</span>
+                        <img src="@/assets/img/consult/right-arrow@2x.png" alt="">
+                    </div>
+                </div>
+                <div class="action-wrapper">
+                    <el-button
+                        class="confirm-btn"
+                        @click="handleSelectConsultConfirm">{{ selectedConsultItem.sale_id ? `￥${selectedConsultItem.price}向TA咨询` : '选择话题' }}</el-button>
+                </div>
+                <div class="tips-text">超过48小时未确认将全额退款</div>
+            </div>
+        </el-drawer> -->
+        <!-- 支付成功 dialog -->
+        <el-dialog
+            :visible.sync="isShowPaySuccess"
+            width="85%"
+            top="calc(50vh - 130px)"
+            center>
+            <div class="pay-success-title" slot="title">支付成功</div>
+            <div class="pay-success-content">
+                <div class="pay-success-text">等待服务方接单，届时请留意手机短信。具体订单信息，请登录电脑端查看。</div>
+                <div class="action-wrapper">
+                    <el-button
+                        class="confirm-btn"
+                        @click="handleClickPayConfirm">确定</el-button>
+                </div>
+            </div>
+        </el-dialog>
     </div>
 </template>
 
@@ -429,11 +654,17 @@ export default {
             commentContent: '',
             // 是否展示选择咨询 dialog
             isShowSelectConsultDialog: false,
+            // 是否展示移动端选择咨询 dialog
+            isShowMobileSelectConsultDialog: false,
             // 选择的咨询话题
             selectedConsultItem: {},
             selectedConsultIndex: -1,
             // 从选中咨询 dialog 选择的时间
-            selectedOrderTime2: ''
+            selectedOrderTime2: '',
+            // 是否展示移动端时间选择 modal
+            isShowMobileSelectTimeDialog: false,
+            // 是否展示支付成功
+            isShowPaySuccess: false
         }
     },
     components: {
@@ -478,7 +709,7 @@ export default {
         },
         mainMarginTop () {
             if (this.mobile && this.showWxHeader) {
-                return '64px !important'
+                return '0px !important'
             } else if (this.mobile) {
                 return '0px !important'
             } else {
@@ -509,11 +740,15 @@ export default {
             }, 800)
         }
 
-        // 获取评论列表
-        this.commentPagination.wid = this.uid
-        this._getCommentList()
-        // 监听页面滚动
-        window.addEventListener('scroll', this._handleScroll, true)
+        if (!this.mobile) {
+            // 获取评论列表
+            this.commentPagination.wid = this.uid
+            this._getCommentList()
+            // 监听页面滚动
+            window.addEventListener('scroll', this._handleScroll, true)
+        } else {
+            window.proginnMobile = this
+        }
     },
     methods: {
         /**
@@ -631,7 +866,11 @@ export default {
                     }
                     self.orderTime = orderTime
                     self.actionSaleId = saleId
-                    self.isShowSelectTimeDialog = true
+                    if (self.mobile) {
+                        self.isShowMobileSelectTimeDialog = true
+                    } else {
+                        self.isShowSelectTimeDialog = true
+                    }
                 }
                 console.log(res)
             })
@@ -686,7 +925,11 @@ export default {
                     consultItem.orderTime[0].time[0].date !== '00:00') {
                     this.selectedOrderTime = consultItem.orderTime[0].time[0].value
                 }
-                this.isShowSelectTimeDialog = true
+                if (this.mobile) {
+                    this.isShowMobileSelectTimeDialog = true
+                } else {
+                    this.isShowSelectTimeDialog = true
+                }
             } else {
                 this._getConsultTime(saleId, index)
             }
@@ -717,7 +960,7 @@ export default {
                 return
             }
 
-            if (this.isShowSelectConsultDialog) {
+            if (this.isShowSelectConsultDialog || this.isShowMobileSelectConsultDialog) {
                 // 从选择咨询话题 modal 中打开
                 this.selectedOrderTime2 = this.selectedOrderTime
             } else {
@@ -729,13 +972,28 @@ export default {
                     next: '/wo/purchased?type=3'
                 }
                 if (!this.userinfo || !this.userinfo.nickname) {
-                    location.href = this.baseUrl + "/?loginbox=show&next=" + encodeURIComponent(location.href)
+                    // 未登录
+                    if (this.deviceType.android || this.deviceType.ios) {
+                        // 端
+                        location.href = "proginn://login?backToPage=true";
+                    } else {
+                        // web
+                        location.href = this.baseUrl + "/?loginbox=show&next=" + encodeURIComponent(location.href)
+                    }
                 } else {
-                    location.href = `/pay?${qs.stringify(query)}`
+                    // 跳转支付
+                    if (this.deviceType.android || this.deviceType.ios) {
+                        // 端
+                        location.href = "proginn://pay?" + qs.stringify(query)
+                    } else {
+                        // web
+                        location.href = `/pay?${qs.stringify(query)}`
+                    }
                 }
             }
 
             this.isShowSelectTimeDialog = false
+            this.isShowMobileSelectTimeDialog = false
         },
         /**
          * 点击约聊 modal 的取消
@@ -961,15 +1219,64 @@ export default {
                 product_type: 503,
                 product_id: this.selectedConsultItem.sale_id,
                 obj: this.selectedOrderTime2,
-                next: location.href + '?act=pay'
+                next: '/wo/purchased?type=3'
             }
             if (!this.userinfo || !this.userinfo.nickname) {
-                location.href = this.baseUrl + "/?loginbox=show&next=" + encodeURIComponent(location.href)
+                // 未登录
+                if (this.deviceType.android || this.deviceType.ios) {
+                    // 端
+                    location.href = "proginn://login?backToPage=true";
+                } else {
+                    // web
+                    location.href = this.baseUrl + "/?loginbox=show&next=" + encodeURIComponent(location.href)
+                }
             } else {
-                location.href = `/pay?${qs.stringify(query)}`
+                // 跳转支付
+                if (this.deviceType.android || this.deviceType.ios) {
+                    // 端
+                    location.href = "proginn://pay?" + qs.stringify(query)
+                } else {
+                    // web
+                    location.href = `/pay?${qs.stringify(query)}`
+                }
             }
 
             this.isShowSelectConsultDialog = false
+            this.isShowMobileSelectConsultDialog = false
+        },
+        /**
+         * 点击 mobile 的一项技能时
+         */
+        handleClickSkillItem (saleId) {
+            location.href = `/s/${saleId}`
+            // if (this.deviceType.android || this.deviceType.ios) {
+            //     // 端跳转
+            //     let jumpUrl = `${this.baseUrl}/s/${saleId}`
+            //     location.href = `proginn://webview?url=${jumpUrl}`
+            // } else {
+            //     // web 跳转
+            //     location.href = `/s/${saleId}`
+            // }
+        },
+        /**
+         * 点击移动端 - 全部咨询按钮
+         */
+        handleClickMobileAllBuyBtn () {
+            this.isShowMobileSelectConsultDialog = true
+        },
+        /**
+         * 展示支付成功
+         */
+        showPaySuccess () {
+            const self = this
+            this.isShowPaySuccess = true
+
+            setTimeout(() => {
+                self.isShowPaySuccess = false
+            }, 5000)
+        },
+        handleClickPayConfirm () {
+            this.isShowPaySuccess = false
         }
     }
 }