小程序临时工具人

html

<!--components/problem/problem.wxml-->
<view class="problemBox">
<scroll-view scroll-x wx:for="{{problemInfo}}" wx:key="index" style="white-space:nowrap;margin-bottom:30rpx;background:#f0eff5;">
	<view class="problemItems questItems">
		<view class="flexCloum">
			<view class="circleBox">
				<view class="rank"></view>
				<view class="rankDesc">
					<view> <text class="num">{{item.data.length}}</text> <text class="item">项</text></view>
					<view class="skinQuestRank">{{level[item.level]}}</view>
				</view>
			</view>
			<image src="http://st.rulaizhi.com/wechat/minor.png" class="skinRank"  wx:if="{{item.level=='2'}}"></image>
			<image src="http://st.rulaizhi.com/wechat/serious.png" class="skinRank"  wx:if="{{item.level=='4'}}"></image>
			<image src="http://st.rulaizhi.com/wechat/mordeate.png" class="skinRank"  wx:if="{{item.level=='3'}}"></image>
		</view>
		<view class="questionList" wx:for="{{item.data}}" wx:for-item="detail" wx:key="index">
				<image src="{{tools.formateUrl(detail.labelChinese)}}" class="icons"></image>
			<text class="questionType">{{detail.labelChinese}}</text>
		</view>
		<view></view>
	</view>
</scroll-view>
<view  style="margin-top:30rpx" >
	<view class="problemItems skinTypeLists" wx:for="{{tabData}}" wx:for-item="father_item" 
	wx:key="index"
	wx:for-index="father_index" 
	>
	<view>{{father_index}}</view>
		<view class="skinTitle" >
			<image src="http://st.rulaizhi.com/wechat/circle.png" class="littleCircle"></image>
			<text class="bold bigFont middleBox">{{father_item.labelChinese}}</text>
			<view class="skinFeature">
				<image src="http://st.rulaizhi.com/wechat/reactangle.png" class="fontBg">
				</image>
				<view class="skinType">
					<text class="mark">{{father_item.level}}</text>
					<image src="http://st.rulaizhi.com/wechat/minor.png" class="TypeRank"  wx:if="{{father_item.level=='轻度'}}"></image>
		    	<image src="http://st.rulaizhi.com/wechat/serious.png" class="TypeRank"  wx:if="{{father_item.level=='严重'}}"></image>
					<image src="http://st.rulaizhi.com/wechat/mordeate.png" class="TypeRank"  wx:if="{{father_item.level=='中度'}}"></image>
					<image src="http://st.rulaizhi.com/wechat/good.png" mode="widthFix" style="25rpx"  wx:if="{{father_item.level=='轻微'}}"></image>
				</view>
			</view>
		</view>
		<!--图像  -->
		<view class="photos">
			<image src="{{father_item.image}}" class="showPhoto"></image>
			<image src="{{father_item.layer}}" alt="" class="layer"></image>
		</view>
		<view class="coverTypeBox" wx:if="{{father_item.label != 'blackHead'&&father_item.label != 'sensitivity'&& father_item.label!='waterOil'}}">
			<!-- <view class="coverType" wx:for="{{detail.detailInfo}}" wx:for-item="innerDetail" >
				<image src="http://st.rulaizhi.com/wechat/blue.png" class="dot" wx:if=""></image>
				<text class="typeName">{{innerDetail.type}}</text>
			</view> -->
			<view class="coverType" wx:if="{{detail.label == 'wrinkles'}}">
				<image src="http://st.rulaizhi.com/wechat/blue.png" class="dot"></image>
				<text class="typeName">泪沟</text>
			</view>
			<view class="coverType" wx:if="{{detail.label == 'wrinkles'}}">
				<!-- <image src="http://st.rulaizhi.com/wechat/.png" class="dot"></image> -->
				<view class="dot" style="background:pink;border-radius:100%;display:inline-block"></view>
				<text class="typeName">法令纹</text>
			</view>
			<view class="coverType" wx:if="{{detail.label == 'pigmentations'}}">
				<!-- <image src="http://st.rulaizhi.com/wechat/.png" class="dot"></image> -->
				<view class="dot" style="background:blue;border-radius:100%;display:inline-block"></view>
				<text class="typeName">色素斑</text>
			</view>
			<view class="coverType"  wx:if="{{detail.label == 'wrinkles'}}">
				<image src="http://st.rulaizhi.com/wechat/orange.png" class="dot"></image>
				<text class="typeName">鱼尾纹</text>
			</view>
			<view class="coverType"  wx:if="{{detail.label == 'darkCircle'}}">
				<view class="dot" style="background:pink;border-radius:100%;display:inline-block"></view>
				<text class="typeName">血管型</text>
			</view>

		</view>
		<view class="sensitive">
			<image src="http://st.rulaizhi.com/wechat/fontBg.png" class="changeBg" wx:if="{{father_item.label != 'darkCircle'}}"></image>
			<text class="sensitiveDesc" wx:if="{{father_item.label =='acnes'}}">痘痘数：{{father_item.fixLevel}}个</text>
			<text class="sensitiveDesc" wx:if="{{father_item.label =='blackHead'}}">黑头数量：{{father_item.fixLevel}}个</text>
			<text class="sensitiveDesc" wx:if="{{father_item.label =='wrinkles'}}">细纹占比{{father_item.areaRatio}}%</text>
			<text class="sensitiveDesc" wx:if="{{father_item.label =='sensitivity'}}">敏感度占比：{{father_item.areaRatio}}%</text>
			<text class="sensitiveDesc" wx:if="{{father_item.label =='waterOil'}}">缺水面积占比：{{father_item.areaRatio}}%</text>
			<text class="sensitiveDesc" wx:if="{{father_item.label =='pigmentations'}}">色素斑占比：{{father_item.areaRatio}}%</text>
		</view>
		<!-- bar -->
		<view class="skinSensitive" wx:if="{{father_item.label =='sensitivity'}}">
			<view class="progress">
				<image src="http://st.rulaizhi.com/wechat/sensitiveProgress.png" class="progressSlider"></image>
				<image src="http://st.rulaizhi.com/wechat/sensitiveArea.png" class="slider" style="left:calc({{tools.slider(father_item.level) + '%'}} - 18rpx)"></image>
			</view>
			<view class="SkinColor">
				<text>耐受</text> <text>轻度</text> <text>中度</text> <text>重度</text>
			</view>
		</view>
	
		<!-- <view class="sensitive">
			<image src="http://st.rulaizhi.com/wechat/fontBg.png" class="changeBg"></image>
			<text class="sensitiveDesc">敏感面积占比：29%</text>
		</view> -->
		<view>
		<view class="skinDesc" wx:if="{{!father_item.detailInfo}}">
		</view>
		<view wx:if="{{father_item.detailInfo.length>0}}">
		<scroll-view scroll-x style="white-space:nowrap" >
			<view class="SkinProblemItems">
				<view class="itemsBox shadow {{tabData[father_index].flag === son_index ?'active':''}}"  wx:key="index" wx:for="{{father_item.detailInfo}}" wx:for-item="son_item"  wx:for-index="son_index"
				bindtap="checkDetail" data-findex="{{father_index}}" 
				 data-len="{{tabData.length}}"
				data-sindex="{{son_index}}">
				<text>
				</text>
					<image src="{{tools.formateUrl(son_item.type)}}" class="icon"></image>
					<view><text class="txt">{{son_item.type}}</text></view>
				</view>
			</view>
		</scroll-view>
	 <view wx:for="{{father_item.detailInfo}}" wx:key="index">
		<view class="skinDesc" wx:if="{{index==tabData[father_index].flag}}"  >
			{{tabData[father_index].detailInfo[index].description}}
		</view>
	</view>
	</view>
	</view>
		<view class="navigator">
			<navigator  wx:if="{{detail.labelChinese=='水油失衡'}}"  url="/pages/skinCareWay/skinCareWay?type=syph" hover-class="navigator-hover">我的水油平衡方案 ></navigator>
			<navigator  wx:if="{{detail.labelChinese=='细纹'}}" url="/pages/skinCareWay/skinCareWay?type=ksl" hover-class="navigator-hover">我的减龄嫩肤方案 ></navigator>
			<navigator  wx:if="{{detail.labelChinese=='痘痘'}}" url="/pages/skinCareWay/skinCareWay?type=qudou" hover-class="navigator-hover">我的祛痘方案 ></navigator>
			<navigator  wx:if="{{detail.labelChinese=='色素斑'}}" url="/pages/skinCareWay/skinCareWay?type=meibai" hover-class="navigator-hover">我的美白淡斑方案 ></navigator>
			<navigator  wx:if="{{detail.labelChinese=='黑头'}}" url="/pages/skinCareWay/skinCareWay?type=mkht" hover-class="navigator-hover">我的黑头改善方案 ></navigator>
			<navigator  wx:if="{{detail.labelChinese=='黑眼圈'}}" url="/pages/skinCareWay/skinCareWay?type=ksl" hover-class="navigator-hover">我的淡化黑眼圈方案 ></navigator>
		</view>
	</view>
</view>
</view>
<wxs module="tools">
var formateUrl = function(label){
  var iconList = [
      {name:'眉间纹',url:'../../image/mjw.png'},
      {name:'抬头纹',url:'../../image/ttw.png'},
      {name:'法令纹',url:'http://st.rulaizhi.com/wechat/flw.png'},
      {name:'泪沟',url:'http://st.rulaizhi.com/wechat/lg.png'},
      {name:'笑肌断层',url:'http://st.rulaizhi.com/wechat/dd.png'},
      {name:'鱼尾纹',url:'http://st.rulaizhi.com/wechat/ht.png'},
      {name:'黑痣',url:'http://st.rulaizhi.com/wechat/hz.png'},
			{name:'黄褐斑',url:'http://st.rulaizhi.com/wechat/hhb.png'},
			{name:'色素斑',url:'http://st.rulaizhi.com/wechat/qb.png'},
      {name:'雀斑',url:'http://st.rulaizhi.com/wechat/qb.png'},
			{name:'隐藏斑',url:'http://st.rulaizhi.com/wechat/ycb.png'},
			{name:'黑眼圈',url:'http://st.rulaizhi.com/wechat/hyq-su.png'},
			{name:'水油失衡',url:'http://st.rulaizhi.com/wechat/syph.png'},
      // {name:'细纹',url:'http://st.rulaizhi.com/wechat/xw.png'},
      {name:'敏感度',url:'http://st.rulaizhi.com/wechat/mg.png'},
      {name:'痘痘',url:'http://st.rulaizhi.com/wechat/dd.png'},
      // {name:'色素斑',url:'http://st.rulaizhi.com/wechat/hkb.png'},
      {name:'黑头',url:'http://st.rulaizhi.com/wechat/ht.png'},
			{name:'血管型',url:'http://st.rulaizhi.com/wechat/hyq-yg.png'},
			{name:'色素性',url:'http://st.rulaizhi.com/wechat/hyq-su.png'},
      {name:'水分',url:'http://st.rulaizhi.com/wechat/hyq-yg.png'},
			{name:'油分',url:'http://st.rulaizhi.com/wechat/sf.png'},
			{name:'红斑',url:'http://st.rulaizhi.com/wechat/yf.png'},
			{name:'细纹',url:'../../image/ttw.png'},
      {name:'粉刺',url:'http://st.rulaizhi.com/wechat/fc.png'},
			{name:'炎症性丘疹',url:'http://st.rulaizhi.com/wechat/yzqz.png'},
			{name:'汗管瘤',url:'../../image/hgl.png'},
		]
		var url = ''
    for(var i=0;i<iconList.length;i++ ){
      if(iconList[i].name == label){
        console.log(iconList[i].name,'sdgs')
				url =  iconList[i].url
				console.log(url,'pp')
      }
		}
		return url
	}
	var slider = function(key){
		 switch (key) {
			 case '耐受':
				 return 12
				 break;
				 case '轻度':
				 return 37
				 break;
				 case '中度':
				 return 62
				 break;
				 case '重度':
				 return 87
				 break;
			 default:
				 break;
		 }
	}
  module.exports = {
		formateUrl:formateUrl,
		slider:slider
	}
</wxs>

js

// components/problem/problem.js
import {getProblem} from '../../utils/api/skinAnalysis'
const app = getApp()
Component({
  //一些组件选项
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },

  //组件的对外属性，属性设置中可包含三个字段,type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数    
  properties: {
  },
  //组件的内部数据，和 properties 一同用于组件的模版渲染
  data:{
    // problemInfo:[],
    scrollActive:0,
    info:1,
    rank:[{'serious':'重度'},{'serious':'中度'},{'serious':'轻度'},{'serious':'良好'}],
    level:['0','0','轻度','中度','重度'],
    iconList:[
      {name:'waterOil',url:'http://st.rulaizhi.com/wechat/sysh.png'},
      {name:'pore',url:'http://st.rulaizhi.com/wechat/sysh.png'},
      {name:'pigmentations',url:'http://st.rulaizhi.com/wechat/ssb.png'},
      {name:'fatGranule',url:'http://st.rulaizhi.com/wechat/zfl.png'},
      {name:'pigmentations',url:'http://st.rulaizhi.com/wechat/hhb.png'},
      {name:'blackHead',url:'http://st.rulaizhi.com/wechat/ht.png'},
      {name:'darkCircle',url:'http://st.rulaizhi.com/wechat/hyq.png'},
      // {name:'waterOil',url:'http://st.rulaizhi.com/wechat/sysh.png'},
      // {name:'waterOil',url:'http://st.rulaizhi.com/wechat/sysh.png'},
      // {name:'waterOil',url:'http://st.rulaizhi.com/wechat/sysh.png'},
    ],
    tabData:[],
    problemInfo: [{
      "data": [{
        "label": "blackHead",
        "labelChinese": "黑头",
        "level": "轻度",
        "fixLevel": 2,
        "type": null,
        "number": 39,
        "facePart": null,
        "description": "轻度黑头也很烦人呢，平时要注意面部补水及清洁控油哦。",
        "areaRatio": null,
        "layer": "http://skintest.hetyj.com/e78c1b18bb6af88421a44db97270513a.png",
        "image": "http://st.dev.rulaizhi.com/faceImg/1604133729916.png",
        "detailInfo": null
      }, {
        "label": "fatGranule",
        "labelChinese": "脂肪粒",
        "level": "轻",
        "fixLevel": 2,
        "type": null,
        "number": null,
        "facePart": null,
        "description": null,
        "areaRatio": null,
        "layer": "http://skintest.hetyj.com/30d955fceaed184d628fc7da249f192f.png",
        "image": "http://st.dev.rulaizhi.com/faceImg/1604133729916.png",
        "detailInfo": [{
          "label": "fatGranule",
          "labelChinese": "脂肪粒",
          "level": "轻",
          "fixLevel": 2,
          "type": "栗丘疹",
          "number": 4,
          "facePart": null,
          "description": "脂肪粒是因为油脂分泌过多无法排除在肌肤表层堆积形成的，因为使用了过于油腻的护肤品，才诱发了脂肪粒。可用维生素E涂抹脂肪粒处，并按摩至吸收长期使用即可。",
          "areaRatio": null,
          "layer": null,
          "image": null,
          "detailInfo": null
        }]
      }],
      "level": 2
    }, {
      "data": [{
        "label": "wrinkles",
        "labelChinese": "细纹",
        "level": "重度",
        "fixLevel": 4,
        "type": null,
        "number": null,
        "facePart": null,
        "description": null,
        "areaRatio": "0",
        "layer": "http://skintest.hetyj.com/949ae2af0d2ec9102987d7cb984a9db1.png",
        "image": "http://st.dev.rulaizhi.com/faceImg/1604133729916.png",
        "detailInfo": [{
          "label": "wrinkles",
          "labelChinese": "细纹",
          "level": "中度",
          "fixLevel": 3,
          "type": "泪沟",
          "number": null,
          "facePart": null,
          "description": "泪沟会严重影响眼部美观，每天早晚擦完眼霜，用食指在眼部轻柔打圈向上提拉皮肤，可以慢慢淡化泪沟。
",
          "areaRatio": "0",
          "layer": null,
          "image": null,
          "detailInfo": null
        }, {
          "label": "wrinkles",
          "labelChinese": "细纹",
          "level": "重度",
          "fixLevel": 4,
          "type": "抬头纹",
          "number": null,
          "facePart": null,
          "description": "防治抬头纹，早晚要用温和洗面奶清除脸上的污垢，洗脸时额头部分用洁面仪竖向揉搓。饮食上也要多吃含有胶原蛋白的食物，能使皮肤富有弹性，延缓衰老哦~",
          "areaRatio": "0",
          "layer": null,
          "image": null,
          "detailInfo": null
        }]
      }, {
        "label": "sensitivity",
        "labelChinese": "敏感度",
        "level": "重度",
        "fixLevel": 4,
        "type": null,
        "number": null,
        "facePart": "左脸",
        "description": "肌肤耐受性较好的你在选择护肤品时可以大胆一些哦，另外保持良好的睡眠和心情都能为肌肤增加活力抵抗外来侵害。
",
        "areaRatio": "62.54",
        "layer": "http://skintest.hetyj.com/04455b6ee3baeaee6b1b4cc10f375834.jpg",
        "image": "http://st.dev.rulaizhi.com/faceImg/1604133729916.png",
        "detailInfo": null
      }],
      "level": 4
    }],
  },
  //组件的方法，包括事件响应函数和任意的自定义方法 
  methods: {
   
  //  109346647074553856
  getProblemInfo(){
    let res = this.data.problemInfo;
    let result = []
    // 先合并
    for(let i=0;i<res.length;i++){
      result = result.concat(res[i].data)
    }
    // 添加falg
    for(let i=0;i<result.length;i++){
         result[i].flag = 0
      //  if(result[i].detailInfo){

          // console.log(22)
          // let inner = result[i].detailInfo;
          // console.log(inner,'inner')
          // for(let j= 0;j<inner.length;j++){
          //    inner[j].flag = '00'
          // }
      //  }
    }
    console.log(result,'hahha')
    this.setData({
            problemInfo:res,
            tabData:result
          })
  },
  // 点击查看
  checkDetail(e){
    console.log(e,'ppplllmmk')
    let f = e.currentTarget.dataset.findex
    let s = e.currentTarget.dataset.sindex
    let tabdata = this.data.tabData
    tabdata[f].flag = s
     this.setData({
       tabData:tabdata
     })
  }

     
},
  // 组件生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function(){
    this.getProblemInfo()
  },
  moved: function(){},
  detached: function(){},

})

css

/* components/problem/problem.wxss */
.problemBox .problemItems{
  background: #f0eff5;
  padding: 10rpx 20rpx;

  border-radius: 10rpx;
}
.shadow{
  box-shadow:0px 0px 12rpx #999;
}
.questItems{
  display: flex;
  justify-content: flex-start;
  align-items: center;

}
.problemBox .skinTypeLists{
  padding:30rpx 50rpx;
  margin-bottom: 50rpx;
}
.flexCloum,.questionList{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.circleBox{
  position: relative;
  flex: 0 0 112rpx;
  margin-bottom: 10rpx;
}
.rank{
   105rpx;
  height: 105rpx;
  background: #fff;
  border-radius: 100%;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
.rankDesc{
  position:absolute;
  top:0rpx ;
  left:29rpx;
}
.skinRank{
   50rpx;
  height: 25rpx;
}
.num{
  font-size: 50rpx;
  color: #bd5a5e;
}
.item{
  font-size: 17rpx;
  color: #8e8e93;
}
.skinQuestRank{
  font-size: 21rpx;
}
.questionList{
  margin-left: 50rpx;
  margin-right: 30rpx;
}
.icons{
   85rpx;
  height: 85rpx;
  margin-bottom:10rpx;
}
.questionType{
 font-size: 20rpx;
}
.skinTitle{
  display: flex;
  align-items: center;
  margin-bottom: 22rpx;
} 
.skinTitle .middleBox{
  margin: 0 20rpx;
}  
.skinTitle .skinFeature{
    /*  75rpx; */
    position: relative;
    height: 35rpx;
    display: inline-block;
}
.skinTitle .skinFeature .fontBg{
    160rpx;
   height: 30rpx;
}
.skinTitle>.littleCircle{
   30rpx;
  height: 30rpx;
}
.skinTitle .skinType{
  position: absolute;
   top: 0;
   left: 20rpx;
   right: 20rpx;
   bottom: 0;
  font-size: 22rpx;
  margin: auto;
  line-height: 35rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* color: #f0eff5; */
  /* text-align: center; */
}
.TypeRank{
   60rpx;
  height: 20rpx;
}
.photos{
  /*  530rpx; */
  height:390rpx;
  position: relative;

}
.showPhoto,.layer{
  position: absolute;
  top: 0;
  left: 0;
   100%;
  height: 100%;
  border-radius: 25rpx;
  /* background: #333; */
}
.layer{
  z-index: 1000 !important;
}
.coverType{
  margin-right: 50rpx;
}
.coverTypeBox{
  display: flex;
  justify-content:flex-start;
 font-size: 17rpx;
 height: 20rpx;
 margin-top:10rpx;
}
.dot{
   10rpx;
  height: 10rpx;
  margin-right: 12rpx;
}
.sensitive{
  margin:27rpx 0;
  position: relative;
}
.changeBg{
   260rpx;
  height: 50rpx;
  z-index: 1000;
}
.sensitiveDesc{
  color: #bd5a5e;
  font-size: 22rpx;
  position: absolute;
  left: 20rpx;
  top: 10rpx;
}

.skinSensitive{
  /* 420rpx; */
   display: flex;
   flex-direction: column;
   align-content: center;
   justify-content: center;
}
.skinSensitive .progress{
  position: relative;
} 
.skinSensitive .slider{
  position: absolute;
   35rpx;
  height: 35rpx;
  top: 8rpx;
}
.progress .progressSlider{
  100%;
  height: 15rpx;
}
 .SkinColor{
  margin-top: 10rpx;
  display: flex;
  justify-content: space-around;
  font-size:22rpx ;
  color: #8e8e93;
}
.skinDesc{
  padding: 20rpx 0;
  font-size: 22rpx;
  line-height: 30rpx;
  color: #8e8e93;
}
  .navigator{
   display: flex;
   justify-content:flex-end;
   color: #e27473;
   margin-top: 10rpx;
   letter-spacing:3rpx;
   font-size: 22rpx;
}
.SkinProblemItems{
  /* margin-top: 20rpx; */
  /* display: flex; */
}
.SkinProblemItems .itemsBox{
   111rpx;
  height: 123rpx;
  background: #f0eff5;
  border-radius:8rpx;
  /* display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; */
  text-align: center;
  display: inline-block;
  margin-right: 40rpx;
  padding:15rpx 0 10rpx;
}
 .itemsBox .icon{
    80rpx;
   height: 80rpx;
 }
.itemsBox.active{
  background: #fff;
  color: #e27473;
}
.txt{
  font-size: 22rpx;
  /* margin-top: 5rpx; */
}