From 88a2df42a4d286137c25dc839ff93d617a41dda8 Mon Sep 17 00:00:00 2001 From: li-guang <153605324@qq.com> Date: Mon, 21 Dec 2020 18:06:04 +0800 Subject: [PATCH] 会员 项目套餐 --- hive-app/pages/member/projectPlan.vue | 187 ++++++++++++++++++++++++++++++++++++++++++++++ hive-app/pages.json | 11 ++ hive-app/pages/workbench/selectService.vue | 7 + hive-app/pages/member/detail.vue | 6 + 4 files changed, 206 insertions(+), 5 deletions(-) diff --git a/hive-app/pages.json b/hive-app/pages.json index d7124a0..96bea94 100644 --- a/hive-app/pages.json +++ b/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": { diff --git a/hive-app/pages/member/detail.vue b/hive-app/pages/member/detail.vue index cf80247..d820db5 100644 --- a/hive-app/pages/member/detail.vue +++ b/hive-app/pages/member/detail.vue @@ -44,8 +44,10 @@ </navigator> </view> <view class="detail-item"> - <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail2.png"></image> - <text class="font-14 mt-5">项目/套餐</text> + <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" > diff --git a/hive-app/pages/member/projectPlan.vue b/hive-app/pages/member/projectPlan.vue new file mode 100644 index 0000000..9468108 --- /dev/null +++ b/hive-app/pages/member/projectPlan.vue @@ -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> diff --git a/hive-app/pages/workbench/selectService.vue b/hive-app/pages/workbench/selectService.vue index e1482bc..8358b22 100644 --- a/hive-app/pages/workbench/selectService.vue +++ b/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> -- Gitblit v1.9.1