会员 项目套餐

li-guang

2020-12-21 88a2df42a4d286137c25dc839ff93d617a41dda8

会员 项目套餐

 hive-app/pages.json

@@ -231,6 +231,17 @@
                    "scrollIndicator": "none"
                }
            }
        },
        {
            "path": "pages/member/projectPlan",
            "style": {
                "navigationBarTitleText": "项目套餐",
                "navigationBarBackgroundColor":"#FFFFFF",
                "navigationBarTextStyle":"black",
                "app-plus":{ 
                    "scrollIndicator": "none"
                }
            }
        }
    ],
    "globalStyle": {

 hive-app/pages/member/detail.vue

@@ -44,8 +44,10 @@
                    </navigator>
                </view>
                <view class="detail-item">
                    <navigator url="./projectPlan" hover-class="none" >
                    <image class="detail-icon"  mode="aspectFit" src="../../static/images/member-detail2.png"></image>
                    <text class="font-14 mt-5">项目/套餐</text>
                    </navigator>
                </view>
                <view class="detail-item">
                    <navigator url="./membershipCard" hover-class="none" >

 hive-app/pages/member/projectPlan.vue

New file
@@ -0,0 +1,187 @@
<template>
    <!-- 项目套餐 -->
    <view>
        <!-- #ifndef H5 -->
        <view class="status_bar"></view>
        <!-- #endif -->
        <view>
            <h-tabs
                class="tab"
                :tabData="tabs" 
                :config="{
                    color: '#abb1cc',
                    activeColor: '#518EFF',
                    underLineColor: '#518EFF',
                    underLineHeight: 6,
                    fontSize: '30',
                    underLineWidth: 60,
                }"
            />
        </view>
        <view class="content">
            <view class="content-box">
                <view class="content-box-title">
                    <text>项目</text>
                </view>
                <view class="flex align-center content-box-row" v-for="item in 2">
                    <image class="product-img" mode="aspectFill" src="../../static/images/product.jpg"></image>
                    <view class="flex flex-v ml-10 flex-1">
                        <view class="font-12 flex align-center justify-between">
                            <text>面部护理</text>
                            <text class="red">即将过期</text>
                        </view>
                        <text class="font-10 gray mt-5">时长: 30分钟</text>
                        <text class="font-10 gray mt-5">有效期至: 2021-01-02</text>
                        <view class="mt-5 flex align-center justify-between">
                            <text class="font-12 blue">剩余次数: 2次</text>
                            <navigator url="./" hover-class="none" class="right">
                                <button class="blue-btn small-btn">立即预约</button>
                            </navigator>
                        </view>
                    </view>
                </view>
            </view>
			
            <view class="content-box mt-10">
                <view class="content-box-title">
                    <text>套餐</text>
                </view>
                <view class="flex flex-v content-box-row" v-for="item in 2">
                    <view class="font-14 flex align-center justify-between">
                        <text>时尚补水套餐</text>
                        <text class="red">即将过期</text>
                    </view>
                    <view class="flex align-center mt-5">
                        <image class="product-img" mode="aspectFill" src="../../static/images/product.jpg"></image>
                        <view class="flex flex-v ml-10 flex-1">
                            <text class="font-12">面部护理</text>
                            <text class="font-10 gray mt-5">时长: 30分钟</text>
                            <text class="font-10 gray mt-5">有效期至: 2021-01-02</text>
                            <view class="mt-5 flex align-center justify-between">
                                <text class="font-12 blue">剩余次数: 2次</text>
                                <navigator url="./" hover-class="none" class="right">
                                    <button class="blue-btn small-btn">立即预约</button>
                                </navigator>
                            </view>
                        </view>
                    </view>
                    <view class="flex align-center mt-10">
                        <image class="product-img" mode="aspectFill" src="../../static/images/product.jpg"></image>
                        <view class="flex flex-v ml-10 flex-1">
                            <text class="font-12">面部护理</text>
                            <text class="font-10 gray mt-5">时长: 30分钟</text>
                            <text class="font-10 gray mt-5">有效期至: 2021-01-02</text>
                            <view class="mt-5 flex align-center justify-between">
                                <text class="font-12 blue">剩余次数: 2次</text>
                                <navigator url="./" hover-class="none" class="right">
                                    <button class="blue-btn small-btn">立即预约</button>
                                </navigator>
                            </view>
                        </view>
                    </view>
                    <view class="font-12 mt-5">
                        <text>有效期至: 2021-01-03</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import HTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
    export default {
        components: {
            HTabs
        },
        data() {
          return {
            tabs:[
                {
                    state: 1,
                    name: '全部'
                },
                {
                    state: 2,
                    name: '有效'
                },
                {
                    state: 3,
                    name: '1个月内过期'
                },
                {
                    state: 4,
                    name: '失效'
                },
            ],
          }  
        }
    }
</script>

<style>
    page{
        background: #F6F6F8;
    }
    .tab{
        background: #FFFFFF;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        box-shadow:0 6px 6px rgba(237,234,244,0.5);
    }
    .content{
        padding: 10px;
    }
    .content-box{
        background: #FFFFFF;
        padding: 10px;
        border: 1px solid #EDEAF4;
        border-radius: 4px;
        box-shadow:0 6px 6px rgba(237,234,244,0.5);
    }
    .content-box-title{
        padding: 10px 5px;
        border-bottom: 1px solid #EDEAF4;
    }
    .content-box-row{
        padding: 10px 0;
        border-bottom: 1px solid #EDEAF4;
    }
    .content-box-row:nth-last-child(1){
        border: 0;
        padding-bottom: 0;
    }
    .product-img{
        width: 80px;
        height: 80px;
        border-radius: 4px;
    }
    .shopping{
        background: #FFFFFF;
        padding: 10px 10px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .shopping-icon{
        font-size: 28px;
        position: relative;
    }
    .shopping-icon-num{
        width: 20px;
        height: 20px;
        background: #518EFF;
        border-radius: 50%;
        color: #FFFFFF;
        position: absolute;
        right: -10px;
        top: -10px;
    }
    .btn{
        border-radius: 20px;
        line-height: 34px;
        padding: 0 24px;
        font-size: 14px;
    }
</style>

 hive-app/pages/workbench/selectService.vue

@@ -16,9 +16,10 @@
                        <text class="font-10 gray mt-5">有效期至: 2021-01-02</text>
                        <view class="mt-5 flex align-center justify-between">
                            <text class="font-12 blue">剩余次数: 2次</text>
                            <view>
                                <text class="iconfont iconjian blue-outline-btn-circle mr-20"></text>
                                <text class="iconfont iconjia blue-btn-circle"></text>
                            <view class="flex align-center justify-end mt-10">
                                <text class="iconfont iconjian blue-outline-btn-circle mr-10"></text>
                                <text>1</text>
                                <text class="iconfont iconjia blue-btn-circle ml-10"></text>
                            </view>
                        </view>
                    </view>