Commit a17da0b41adac4a92d09b92dfb458a0c12d52158

Authored by abson
1 parent 4ce0d138

测肤报告dialog

packageB/pages/AI-test-skin/success_result/success_result.js
1 1 /*
2 2 * @Author: abson
3 3 * @Date: 2022-02-16 15:36:47
4   - * @LastEditTime: 2022-02-18 14:00:54
  4 + * @LastEditTime: 2022-02-18 17:06:27
5 5 * @LastEditors: Please set LastEditors
6 6 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
7 7 * @FilePath: \MShopWeApp\packageB\pages\AI-test-skin\success_result\success_result.js
... ... @@ -20,9 +20,12 @@ Page({
20 20 data: {
21 21 tab: [{ id: 'zong_he', name: '综合肤质' }, { id: 'mao_kong', name: '毛孔' }, { id: 'hei_tou', name: '黑头' }, { id: 'se_ban', name: '色斑' }, { id: 'zhou_wen', name: '皱纹' }, { id: 'hei_yan_quan', name: '黑眼圈' }, { id: 'cuo_chuang', name: '痤疮' }, { id: 'ming_gan_ji', name: '敏感度' }],
22 22 currentIndex: 0,
23   - tab_id:'zong_he',
  23 + tab_id: 'zong_he',
24 24 iurl: setting.imghost,
25   - showDialog:false,
  25 + showDialog: false,
  26 + yanjing: true,
  27 + img_scale: true, //问题标注放大图片
  28 + img_scale_icon:true,
26 29 },
27 30  
28 31 /**
... ... @@ -52,6 +55,17 @@ Page({
52 55 tab_id,
53 56 })
54 57 },
  58 + click_yanjing() {
  59 + this.setData({
  60 + yanjing: !this.data.yanjing,
  61 + })
  62 + },
  63 + click_fangda() {
  64 + this.setData({
  65 + img_scale: !this.data.img_scale,
  66 + img_scale_icon:!this.data.yanjing,
  67 + })
  68 + },
55 69  
56 70 /**
57 71 * 生命周期函数--监听页面隐藏
... ... @@ -66,6 +80,24 @@ Page({
66 80 onUnload: function () {
67 81  
68 82 },
  83 + show_dailog() {
  84 + this.setData({
  85 + showDialog: true,
  86 + })
  87 + },
  88 +
  89 + close_dialog() {
  90 + this.setData({
  91 + showDialog: false,
  92 + })
  93 + },
  94 +
  95 + close_mask() {
  96 + this.setData({
  97 + showDialog: false,
  98 + img_scale: true,
  99 + })
  100 + },
69 101  
70 102 /**
71 103 * 页面相关事件处理函数--监听用户下拉动作
... ...
packageB/pages/AI-test-skin/success_result/success_result.wxml
... ... @@ -69,7 +69,7 @@
69 69 <view style="color: #45d4eb;">#01</view>
70 70 <view class="flex-space-between">
71 71 <text style="font-size: 42rpx;" class="bold">毛孔</text>
72   - <view class="fs26" style="display: flex;align-items: center;">
  72 + <view class="fs26" catchtap="show_dailog" style="display: flex;align-items: center;">
73 73 <text>问题标注</text>
74 74 <text class="iconfont icon-xia"></text>
75 75 </view>
... ... @@ -339,7 +339,7 @@
339 339 <view>
340 340 <view style="color: #45d4eb;">#05</view>
341 341 <view class="flex-space-between">
342   - <text style="font-size: 42rpx;" class="bold">黑眼圈</text>
  342 + <text style="font-size: 42rpx;" class="bold">黑眼圈</text>
343 343 <view class="fs26" style="display: flex;align-items: center;">
344 344 <text>问题标注</text>
345 345 <text class="iconfont icon-xia"></text>
... ... @@ -629,8 +629,46 @@
629 629 </view>
630 630 </scroll-view>
631 631  
632   -<view class="mask" wx:if="{{showDialog}}"></view>
  632 +<view class="mask" catchtap="close_mask" wx:if="{{showDialog}}"></view>
633 633 <cover-view class="share fs28">
634   - <text class="iconfont icon-zhuanfa1" style="padding: 0 10rpx;"></text>
635   - <text>分享</text>
636   -</cover-view>
637 634 \ No newline at end of file
  635 + <cover-view class="iconfont icon-zhuanfa1" style="padding: 0 10rpx;"></cover-view>
  636 + <cover-view>分享</cover-view>
  637 +</cover-view>
  638 +
  639 +<view class="dialog" wx:if="{{showDialog}}">
  640 + <block wx:if="{{img_scale}}">
  641 + <view class="dialog_img">
  642 + <view style="height: 100%;">
  643 + <image src="../../../images/1.jpg" style="width: 100%;height: 100%;"></image>
  644 + </view>
  645 + <view class="dialog_icon" catchtap="close_dialog" style="justify-content: flex-start;">
  646 + <text class="iconfont icon-guan mt20" style="z-index: 999;font-size: 20rpx;"></text>
  647 + </view>
  648 + <view class="dialog_icon">
  649 + <text catchtap="click_yanjing" class="iconfont {{yanjing?'icon-yanjing-kai':'icon-yanjing-guan'}} mgb20"></text>
  650 + <!-- <text class="iconfont icon-yanjing-guan mgb20"></text> -->
  651 + <text catchtap="click_fangda" class="iconfont icon-fangda mgb20"></text>
  652 + </view>
  653 + </view>
  654 + <view class="dialog_txt">
  655 + <view class="fs28" style="margin-right:15rpx;">毛孔较粗大</view>
  656 + <view style="margin-top:2rpx;display: flex;">
  657 + <view class="pp"></view>
  658 + <view class="pp"></view>
  659 + <view class="pp"></view>
  660 + <view class="pp"></view>
  661 + <view class="pp"></view>
  662 + <view class="pp"></view>
  663 + <view class="pp"></view>
  664 + <view class="pp"></view>
  665 + <view class="pp"></view>
  666 + </view>
  667 + </view>
  668 + </block>
  669 + <block wx:else>
  670 + <image style="width: 100%;height: 100%;" src="../../../images/1.jpg"></image>
  671 + <view class="dialog_icon">
  672 + <text catchtap="click_fangda" class="iconfont icon-suoxiao mgb20"></text>
  673 + </view>
  674 + </block>
  675 +</view>
638 676 \ No newline at end of file
... ...
packageB/pages/AI-test-skin/success_result/success_result.wxss
... ... @@ -11,16 +11,18 @@ page {
11 11 display: flex;
12 12 height: 100rpx;
13 13 }
  14 +
14 15 .share {
  16 + display: flex;
15 17 position: fixed;
16 18 bottom: 100rpx;
17 19 right: 0;
18   - padding: 20rpx;
19   - background-color: #fff;
20   - border: 2rpx solid #f0f0f0;
21   - /* color: #FFF; */
22   - border-radius: 40rpx 0 0 40rpx;
23   - z-index: 99;
  20 + padding: 20rpx;
  21 + background-color: #fff;
  22 + border: 2rpx solid #f0f0f0;
  23 + /* color: #FFF; */
  24 + border-radius: 40rpx 0 0 40rpx;
  25 + z-index: 99;
24 26 }
25 27  
26 28 .tab_scroll_item {
... ... @@ -110,14 +112,16 @@ page {
110 112 width: 100%;
111 113 height: 100%;
112 114 top: 0;
113   - bottom: 0;
114   - left: 0;
115   - right: 0;
  115 + bottom: 0;
  116 + left: 0;
  117 + right: 0;
116 118 background-color: rgba(0, 0, 0, .6);
117 119 }
  120 +
118 121 .ll::after {
119 122 content: "\e650";
120 123 }
  124 +
121 125 .analyse .analyse_center image {
122 126 height: 100%;
123 127 width: 100%;
... ... @@ -364,4 +368,56 @@ page {
364 368 /* width: 160rpx; */
365 369 flex-direction: column;
366 370 align-items: center;
367   -}
368 371 \ No newline at end of file
  372 +}
  373 +
  374 +.dialog {
  375 + position: fixed;
  376 + top: 50%;
  377 + right: 50%;
  378 + transform: translate(50%, -50%);
  379 + height: 70%;
  380 + width: 80%;
  381 + border-radius: 30rpx;
  382 +}
  383 +
  384 +.dialog .dialog_img {
  385 + height: 80%;
  386 + position: relative;
  387 +}
  388 +
  389 +.dialog .dialog_txt {
  390 + height: 20%;
  391 + display: flex;
  392 + align-items: center;
  393 + justify-content: center;
  394 + background-color: #fff;
  395 +}
  396 +
  397 +.dialog .dialog_icon {
  398 + position: absolute;
  399 + right: 30rpx;
  400 + top: 0;
  401 + display: flex;
  402 + flex-direction: column;
  403 + justify-content: flex-end;
  404 + height: 100%;
  405 +}
  406 +
  407 +.dialog .iconfont {
  408 + display: flex;
  409 + justify-content: center;
  410 + align-items: center;
  411 + color: #fff;
  412 + background-color: #1f1919;
  413 + border-radius: 50%;
  414 + width: 50rpx;
  415 + height: 50rpx;
  416 +}
  417 +
  418 +.pp {
  419 + width: 8rpx;
  420 + height: 35rpx;
  421 + margin-right: 5rpx;
  422 + border-radius: 3rpx;
  423 + background: #2cb344;
  424 +}
... ...