From 58a5424d962e00a134662297d973bdf45b58a24e Mon Sep 17 00:00:00 2001 From: queenwuli <942534046@qq.com> Date: Tue, 22 Dec 2020 15:10:26 +0800 Subject: [PATCH] gx --- hive-app/pages/member/projectPlan.vue | 187 ++++++++++++++++++++++++++ hive-app/App.vue | 2 hive-app/pages.json | 11 + hive-app/pages/workbench/selectService.vue | 4 hive-app/pages/member/detail.vue | 6 hive-app/pages/member/skinDetectionDetail.vue | 179 +++++++++++++++++++++++++ 6 files changed, 384 insertions(+), 5 deletions(-) diff --git a/hive-app/App.vue b/hive-app/App.vue index 2fbeb49..a501543 100644 --- a/hive-app/App.vue +++ b/hive-app/App.vue @@ -16,5 +16,5 @@ /*每个页面公共css */ @import url("./common/styles/index"); @import url("./static/iconfont/iconfont.css"); -/* @import url("//at.alicdn.com/t/font_2263696_a9xwl9mgtk.css"); */ +@import url("//at.alicdn.com/t/font_2263696_rvcb5as2o0r.css"); </style> diff --git a/hive-app/pages.json b/hive-app/pages.json index 6f0ee9f..e2ab8de 100644 --- a/hive-app/pages.json +++ b/hive-app/pages.json @@ -275,6 +275,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 b4f7d68..3b2a115 100644 --- a/hive-app/pages/member/detail.vue +++ b/hive-app/pages/member/detail.vue @@ -41,8 +41,10 @@ </navigator> </view> <view class="detail-item"> - <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail2.png"></image> - <text class="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/member/skinDetectionDetail.vue b/hive-app/pages/member/skinDetectionDetail.vue index b49fab0..b6618c7 100644 --- a/hive-app/pages/member/skinDetectionDetail.vue +++ b/hive-app/pages/member/skinDetectionDetail.vue @@ -1,15 +1,194 @@ <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: 110, + }" + @tabClick="tabClick($event)" + /> + </view> + <view class="content" v-if="tabIndex==0"> + <view class="flex flex-v align-center font-13"> + <image class="content-header-img" src="../../static/images/head-img.jpg"></image> + <view class="flex mt-10"> + <text>姓名: 哦豁</text> + <text class="ml-10">性别: 女</text> + </view> + <text class="mt-5 gray">生成时间: 2020-12-21 18:22</text> + </view> + <view class="mt-20"> + <view class="flex align-center"> + <text class="iconfont icondd big-dot"></text> + <text class="font-15 font-bold">AI诊断结果(平均概率)</text> + </view> + <view class="font-13 flex ml-15 mt-10"> + <view class="flex align-center"> + <text class="iconfont icondd small-dot red"></text> + <text>敏感肌肤: 50%</text> + </view> + <view class="flex align-center ml-20"> + <text class="iconfont icondd small-dot red"></text> + <text>衰老性皮肤: 50%</text> + </view> + </view> + </view> + <view class="mt-20"> + <view class="flex align-center"> + <text class="iconfont icondd big-dot"></text> + <text class="font-15 font-bold">问题分析</text> + </view> + <view class="flex problem-row align-center" v-for="item in 2"> + <view> + <image class="skin-img" src="../../static/images/head-img.jpg"></image> + </view> + <view class="flex flex-v"> + <view> + <text class="iconfont icondd small-dot"></text> + <text class="font-14">敏感肌肤</text> + </view> + <text class="font-10 ml-10 mt-10 dark-gray">症状描述:</text> + <text class="font-10 ml-10 mt-5 gray">皮肤较薄,对外界刺激很敏感,敏感性症状可见于其他各种皮肤中,受到外界刺激时,会出现肌肤泛红,发热,瘙痒、刺痛等。</text> + </view> + </view> + </view> + </view> + <view class="content" v-else> + <view class="content-title center"> + <text class="font-16 font-bold blue">敏感肌肤</text> + </view> + <view class="flex content-row"> + <text class="iconfont icondd big-dot mt-10"></text> + <view class="flex flex-v content-row-right mr-10"> + <text class="font-15 font-bold">症状描述:</text> + <text class="gray mt-5 font-13">皮肤较薄,对外界刺激很敏感,敏感性症状可见于其他各种皮肤中,受到外界刺激时,会出现肌肤泛红,发热,瘙痒、刺痛等。</text> + </view> + </view> + <view class="flex content-row"> + <text class="iconfont icondd big-dot mt-10"></text> + <view class="flex flex-v content-row-right mr-10"> + <text class="font-15 font-bold">建议护理:</text> + <text class="gray mt-5 font-13">使用肽妍多肽护理精华液深层清洁护理。</text> + </view> + </view> + <view class="flex content-row"> + <text class="iconfont icondd big-dot mt-10"></text> + <view class="flex flex-v content-row-right mr-10"> + <text class="font-15 font-bold">建议使用产品:</text> + <view class="font-13 gray flex align-center mt-10"> + <text class="iconfont iconchanpin mr-5"></text> + <text>抗皱肽原液</text> + </view> + <view class="font-13 gray flex align-center mt-10"> + <text class="iconfont iconchanpin mr-5"></text> + <text>眼部赋活肽原液</text> + </view> + <view class="font-13 gray flex align-center mt-10"> + <text class="iconfont iconchanpin mr-5"></text> + <text>多肽头皮护理营养精华液</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: '解决方案' + } + ], + tabIndex:0 + } + }, onLoad(options) { uni.setNavigationBarTitle({ title: options.title }); + }, + methods:{ + tabClick(index){ + this.tabIndex=index + } } } </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{ + background: #FFFFFF; + margin: 10px; + padding: 10px 0; + border: 1px solid #EDEAF4; + border-radius: 4px; + box-shadow:0 6px 6px rgba(237,234,244,0.5); + } + .content-header-img{ + width: 80px; + height: 80px; + border-radius: 50%; + } + .big-dot{ + font-size: 20px; + } + .small-dot{ + font-size: 10px; + } + .skin-img{ + width: 120px; + height: 120px; + border-radius: 4px; + } + .problem-row{ + padding: 10px 0; + border-bottom: 1px solid #EDEAF4; + margin: 0 10px; + } + .problem-row:nth-last-child(1){ + border: 0; + } + .content-title{ + border-bottom: 1px solid #EDEAF4; + margin: 0 10px; + padding-bottom: 10px; + } + .content-row-right{ + padding: 10px 0; + border-bottom: 1px solid #EDEAF4; + } + .content-row:nth-last-child(1) .content-row-right{ + border: 0; + } </style> diff --git a/hive-app/pages/workbench/selectService.vue b/hive-app/pages/workbench/selectService.vue index 9d7f428..3d432d7 100644 --- a/hive-app/pages/workbench/selectService.vue +++ b/hive-app/pages/workbench/selectService.vue @@ -16,7 +16,7 @@ <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> + <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> @@ -40,7 +40,7 @@ <view class="flex flex-v ml-10 flex-1"> <text class="font-12">面部护理</text> <text class="font-10 gray mt-5">时长: 30分钟</text> - <view class="mt-5 flex align-center justify-between"> + <view class="flex align-center justify-between"> <text class="font-12 blue">剩余次数: 2次</text> <view class="flex align-center justify-end mt-10"> <text class="iconfont iconjian blue-outline-btn-circle mr-10"></text> -- Gitblit v1.9.1