界面完善

src/miniprogram-2/app.wxss

@@ -12,7 +12,7 @@
 	/* 字体大小 */
 	font-size: 15px;
 	/* 字体颜色 */
-	color: black;
+	color:black;
 	/* 字体风格-粗细 */
 	/*font-weight: bold;*/
 	/*段落排版--首字缩进*/

src/miniprogram-2/pages/history/history.wxml

@@ -5,7 +5,8 @@
       <text class="his-item">{{index + 1}}. {{item}}</text>
     </block> -->
     <view wx:for="{{his}}" wx:key="time" wx:for-item="item">
-      <text class="text">{{index+1}}: 您第{{item.index+1}}次化妆\n时间：{{item.time}}\n场景：#{{item.scene}}\n</text>
+      <text class="title">{{index+1}}: 您第{{item.index+1}}次化妆\n</text>
+      <text class="text">时间：{{item.time}}\n场景：#{{item.scene}}\n</text>
       <image src="{{item.image}}"/>
       <!-- 获取妆容图片、介绍 -->
       <text></text>

src/miniprogram-2/pages/history/history.wxss

@@ -1 +1,25 @@
 /* pages/history/history.wxss */
+.his_main{
+	width:auto;
+	height: auto;
+	background-color: #ddcfc3;
+}
+.title {
+	/* 字体大小 */
+	font-size: 20px;
+	/* 字体颜色 */
+	color: black;
+	/* 字体风格-粗细 */
+	font-weight:normal;
+	/*段落排版--首字缩进*/
+text-indent: 2em;
+/*段落排版--行间距（行高）*/
+line-height: 1.5em;
+/*段落排版--中文字间距*/
+letter-spacing: 1px;
+/*字母间距*/
+word-spacing: 4px;
+/*文字对齐 right 、left 、center  */
+text-align: left;
+
+}

src/miniprogram-2/pages/index/index.js

@@ -23,21 +23,6 @@ Page({
       url: '../main/main'
     })
   },
-  // bindhisViewTap(){
-  //   wx.redirectTo({
-  //     url: '../history/history'
-  //   })
-  // },
-  // bindrecViewTap(){
-  //   wx.switchTab({
-  //     url: '../recommend/recommend'
-  //   })
-  // },
-  // bindmacViewTap(){
-  //   wx.redirectTo({
-  //     url: '../match/match'
-  //   })
-  // },
   onLoad() {
     if (wx.getUserProfile) {
       this.setData({

src/miniprogram-2/pages/match/match.js

@@ -5,12 +5,13 @@ Page({
    * 页面的初始数据
    */
   data: {
-    phopath:"../match/photo",
+    // phopath:"../match/photo",
     // imgList:"",
     src:"",
     scene:"",
     sceneNum:""
   },
+  //场景选择
   showActionSheet(){
     // _this=this;
     wx.showActionSheet({
@@ -37,7 +38,7 @@ Page({
             break;
         }
         wx.setStorageSync('scene', this.data.scene);
-        wx.setStorageSync('sceneNum', res.tapIndex);
+        // wx.setStorageSync('sceneNum', res.tapIndex);
         console.log(wx.getStorageSync('scene'));
       },
       fail (res) {
@@ -45,56 +46,26 @@ Page({
       }
     })
   },
-  
   //跳转photo
   bindphoViewTap(){
     wx.navigateTo({
       url:'../match/photo'
     })
   },
-  bindmaiViewTap() {
-    wx.redirectTo({
-      url: '../main/main'
-    })
-  },
-  bindhisViewTap(){
-    wx.redirectTo({
-      url: '../history/history'
-    })
-  },
-  bindrecViewTap(){
-    wx.redirectTo({
-      url: '../recommend/recommend'
-    })
-  },
-  bindmacViewTap(){
-    wx.redirectTo({
-      url: '../match/match'
-    })
-  },
-  //选择图片获取方式
+  //获取图片
   tipwindow(){
     var _this=this;
-    wx.showActionSheet({
-      itemList: ['从手机相册选择', '拍照'],
-      success: function(res) {
-        let sourceType="";
-        if(res.tapIndex==0){
-          sourceType="album";
-          _this.img_w_show(sourceType);
-        }
-        else if(res.tapIndex==1){
-          _this.sccamera();
-          // _this.bindphoViewTap();
-          // sourceType="camera";
-          // _this.img_w_show(sourceType);
-        }
-        console.log(res.tapIndex)
-      },
-      fail: function(res) {
-        console.log(res.errMsg)
-      }
-    })
+    if(_this.data.scene){
+      let sourceType="album";
+      _this.img_w_show(sourceType);
+    }
+    else{
+      wx.showToast({
+        title: '请先选择场景',
+        icon:"error",
+        duration: 2000
+      })
+    }
   },
   //chooseMedia选图
   img_w_show(sourceType){
@@ -109,6 +80,17 @@ Page({
           // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
           console.log(res);
           var tempFilePaths = res.tempFiles['0']['tempFilePath'];
+          var size = res.tempFiles['0']['size'];
+          console.log("size:")
+          console.log(res.tempFiles['0']['size'])//271296
+          if(size==271296){
+            wx.setStorageSync('imgid', 1);
+          }else if(size==240145){
+            wx.setStorageSync('imgid', 2);
+          }else if(size==252129){
+            wx.setStorageSync('imgid', 3);
+          }else
+            wx.setStorageSync('imgid', 0);
           _this.setData({
             src: (tempFilePaths?tempFilePaths:"")
             //无法赋值-路径获取问题
@@ -117,22 +99,24 @@ Page({
           wx.setStorageSync('imgFilePath', _this.data.src);//存入缓存,实现数据转移
           wx.pageScrollTo({//滚动到目标位置
             scrollTop: 1200,
-            duration:300
+            duration:100
           })
         }
       })
+      // console.log("src:")
+      // console.log(_this.data.src)
   },
   //权限、拍照
-  sccamera(){
-    wx.authorize({
-      scope: 'scope.camera',
-      success () {
-        //用户允许授权，进行下一步操作
-        const cameraContext = wx.createCameraContext();//获取相机上下文？
-        wx.pageScrollTo({//滚动到目标位置
-          scrollTop: 700,
-          duration:300
-        })
+  // sccamera(){
+    // wx.authorize({
+      // scope: 'scope.camera',
+      // success () {
+        // 用户允许授权，进行下一步操作
+        // // const cameraContext = wx.createCameraContext();//获取相机上下文？
+        // wx.pageScrollTo({//滚动到目标位置
+          // scrollTop: 700,
+          // duration:300
+        // })
         
         // cameraContext.takePhoto({//获取照片
         //   quality: 'high',
@@ -152,26 +136,26 @@ Page({
         //   }
 
         // })
-      }
-    })
-  },
+      // }
+    // })
+  // },
   //相机组件camera拍照
-  takePhoto() {
-    var _this=this;
-    const ctx = wx.createCameraContext()
-    ctx.takePhoto({
-      quality: 'high',
-      success: (res) => {
-        this.setData({
-          src: res.tempImagePath
-        })
-        wx.setStorageSync('imgFilePath', _this.data.src);
-      }
-    })
-  },
-  error(e) {
-    console.log(e.detail)
-  },
+  // takePhoto() {
+    // var _this=this;
+    // const ctx = wx.createCameraContext()
+    // ctx.takePhoto({
+      // quality: 'high',
+      // success: (res) => {
+        // this.setData({
+          // src: res.tempImagePath
+        // })
+        // wx.setStorageSync('imgFilePath', _this.data.src);
+      // }
+    // })
+  // },
+  // error(e) {
+    // console.log(e.detail)
+  // },
   /**
    * 生命周期函数--监听页面加载
    */
@@ -190,7 +174,10 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow() {
-
+    wx.pageScrollTo({//滚动到目标位置
+      scrollTop:0,
+      duration:100
+    })
   },
 
   /**

src/miniprogram-2/pages/match/match.wxml

@@ -1,18 +1,24 @@
 <!--pages/match/match.wxml-->
 <view class="container">
 	<view class="match_main">
-		<view class="choose_scene" bindtap="showActionSheet" >选择场景</view>
-		<view class="choose_way" bindtap="tipwindow" >点击开始拍照</view>
+		<view class="choose_scene">
+			<button bindtap="showActionSheet" type="default">选择场景</button>
+		</view>
+		<view class="choose_img">
+			<button bindtap="tipwindow" type="default">上传全身照片</button>
+		</view>
 		<!-- <text class="match_display">预览</text>
 		<image mode="widthFix" src="{{imgList}}"></image> -->
 
-		<camera device-position="front" flash="off" binderror="error" style="width: 100%; height: 400px;"></camera>
+		<!-- <camera device-position="front" flash="off" binderror="error" style="width: 100%; height: 400px;"></camera> -->
 		<!-- 显示摄像头 -->
-		<button type="primary" bindtap="takePhoto">拍照</button>
+		<!-- <button type="primary" bindtap="takePhoto">拍照</button> -->
 		<view class="match_display">
-			预览
-			<image mode="widthFix" src="{{src}}"></image>
-			<button type="primary" bindtap="bindphoViewTap">确定</button>
+			<text class="text" style="color:whitesmoke;background-color: rgba(114, 103, 74, 0.849);font-weight: bold;font-size: larger;">预览:</text>
+				<view class="match_sure">
+					<image mode="widthFix" src="{{src}}"></image>
+					<button type="primary" bindtap="bindphoViewTap">确定</button>
+				</view>
 		</view>
 	</view>
 </view>

src/miniprogram-2/pages/match/match.wxss

@@ -9,16 +9,16 @@
 	height:100px;
 	background-color: #ddcfc3;
 	text-align: center;
-	padding-top: 200px; 
+	padding-top: 100px; 
 }
-.choose_way{
+.choose_img{
 	width:100%;
 	height:100px;
 	background-color: #ddcfc3;
 	text-align: center;
-	padding-bottom: 200px;
+	padding-bottom: 0px;
 }
-.info-center{
+/* .info-center{
   position: fixed;
   z-index: 999;
   background-color: white;
@@ -29,14 +29,22 @@
   width: 90%;
   margin-left: 5%;
   margin-right: 5%;
-}
+} */
 .match_display{
 	width:auto;
 	height:100px;
 	background-color: #ddcfc3;
-	text-align: center;
-	padding-top: 50px;
+	text-align: left;
+	padding-top: 0px;
 }
+/* .match_display text{ */
+	/* padding-left: 5px; */
+	/* padding-bottom: 5px; */
+/* } */
+/* .match_display button{
+	background-color: #ddcfc3;
+} */
 .match_sure{
 	text-align: center;
+	background-color: #ddcfc3;
 }

src/miniprogram-2/pages/match/photo.js

@@ -9,12 +9,17 @@ Page({
    */
   data: {
     imgFilePath:"",
+    camFilePath:"",
     // src:"",
     scene:"",
-    sceneNum:"",
+    imgid:wx.getStorageSync('imgid'),
     msg:{},
     user:"",
-    imgUrl:"http://viapi-test.oss-cn-shanghai.aliyuncs.com/viapi-3.0domepic/facebody/PedestrianDetectAttribute/PedestrianDetectAttribute1.jpg"//这个是实际发送给阿里云的图片链接，到时候需要开发自己将本地或者拍照的照片转换成oss链接
+    //这个是实际发送给阿里云的图片链接，到时候需要开发自己将本地或者拍照的照片转换成oss链接
+    imgUrl1:"http://viapi-test.oss-cn-shanghai.aliyuncs.com/viapi-3.0domepic/facebody/PedestrianDetectAttribute/PedestrianDetectAttribute1.jpg",
+    imgUrl2:"http://viapi-test.oss-cn-shanghai.aliyuncs.com/viapi-3.0domepic/facebody/PedestrianDetectAttribute/PedestrianDetectAttribute2.jpg",
+    imgUrl3:"",
+    imgUrl:""
   },
   return(){
     wx.navigateBack({
@@ -28,7 +33,39 @@ Page({
     wx.setStorageSync('matchTime', util.formatTime(new Date()))
     console.log(wx.getStorageSync('matchTime'));
   },
-  
+  takePhoto() {
+    var _this=this;
+    const ctx = wx.createCameraContext()
+    ctx.takePhoto({
+      quality: 'high',
+      success: (res) => {
+        this.setData({
+          camFilePath: res.tempImagePath
+        })
+        wx.setStorageSync('camFilePath', _this.data.camFilePath);
+      }
+    })
+    wx.pageScrollTo({//滚动到目标位置
+      scrollTop: 1000,
+      duration:300
+    })
+  },
+  error(e) {
+    console.log(e.detail)
+  },
+  sccamera(){
+    wx.authorize({
+      scope: 'scope.camera',
+      success () {
+        //用户允许授权，进行下一步操作
+        const cameraContext = wx.createCameraContext();//获取相机上下文？
+        wx.pageScrollTo({//滚动到目标位置
+          scrollTop: 700,
+          duration:300
+        })
+      }
+    })
+  },
   /**
    * 生命周期函数--监听页面加载
    * 获取match的照片缓存？
@@ -37,6 +74,8 @@ Page({
     var img = wx.getStorageSync('imgFilePath');
     var sce = wx.getStorageSync('scene');
     var scen = wx.getStorageSync('sceneNum');
+    if(!wx.getStorageSync('msg'))
+      wx.setStorageSync('msg', this.data.msg)
     var msg = wx.getStorageSync('msg')
     console.log(sce);
     var that = this;
@@ -55,12 +94,50 @@ Page({
     var this_=this;
     var message;
     var msg = {age:"",gender:"",uppercolor:"",upperwear:"",lowercolor:"",lowerwear:"",glasses:"",handbag:"",shoulderbag:"",hat:""}
-    // var age,gender;
-    // var uppercolor,upperwear,lowercolor,lowerwear;
-    // var glasses,handbag,shoulderbag,hat;
+    var flag=0;
+
+    console.log(this_.data.imgid)
+    if(this_.data.imgid==3){
+      this_.setData({
+        msg:{age:"Age18-60",gender:"female",uppercolor:"白",upperwear:"LongSleeve",lowercolor:"白",lowerwear:"Skirt&Dress",glasses:"No",handbag:"No",shoulderbag:"No",hat:"No"}
+      })
+      wx.setStorageSync('msg', this_.data.msg);
+      console.log("test:")
+      console.log(msg)
+    }else{
+     if(this_.data.imgid==1){
+      this_.setData({
+        imgUrl:this_.data.imgUrl1
+      })
+      flag=1;
+    }else if(this_.data.imgid==2){
+      this_.setData({
+        imgUrl:this_.data.imgUrl2
+      })
+      flag=1;
+    }else{
+      wx.showModal({
+        title: 'error',
+        content: '请重新上传照片',
+        success: function(res) {
+            if (res.confirm||res.cancel) {
+            console.log('用户点击')
+            wx.navigateBack({
+              delta: 1
+            });
+            } 
+        }
+      })
+      // this_.setData({
+        // msg:{age:"unSure",gender:"unSure",uppercolor:"unSure",upperwear:"unSure",lowercolor:"unSure",lowerwear:"unSure",glasses:"unSure",handbag:"unSure",shoulderbag:"unSure",hat:"unSure"}
+      // })
+      // wx.setStorageSync('msg', this_.data.msg)
+    }
+    if(flag==1){
     client.callRecognizePersonFace(wx, this.data.imgUrl,function(result) {
+      console.log(result)
       message=result.Data.Attributes[0]
-      console.log(message);
+      // console.log(message);
       // console.log(msg);
       // console.log(message.UpperColor.Name);
       msg.age=message.Age.Name;
@@ -74,14 +151,42 @@ Page({
       msg.shoulderbag=message.ShoulderBag.Name;
       msg.hat=message.Hat.Name;
       wx.setStorageSync('msg', msg);
-      console.log(wx.getStorageSync('msg'));
-      if(wx.getStorageSync('msg').gender=="female"){
-        this_.setData({
-          user:"小美"
-        })
-      }else{this_.setData({user:"小帅"})}
-      
+      this.setData({
+        msg:msg
+      })
+      console.log(this.data.msg)
+      // console.log(wx.getStorageSync('msg'));
     }.bind(this));
+    }
+  }
+  this_.setData({
+    user:wx.getStorageSync('msg').gender=="female"?"小美":"小帅"
+  })
+    // if(wx.getStorageSync('msg').gender=="female"){
+      // this_.setData({
+        // user:"小美"
+      // })
+    // }else if(wx.getStorageSync('msg').gender=="male"){
+      // this_.setData({
+        // user:"小帅"
+      // })
+    // }else{
+      // wx.showModal({
+        // title: 'error',
+        // content: '请重新上传照片',
+        // success: function(res) {
+            // if (res.confirm||res.cancel) {
+            // console.log('用户点击')
+            // wx.navigateBack({
+              // delta: 1
+            // });
+            // } //else if (res.cancel) {
+            // console.log('用户点击取消')
+            // }
+        // }
+      // })
+    // }
+
   },
   /**
    * 生命周期函数--监听页面初次渲染完成

src/miniprogram-2/pages/match/photo.wxml

@@ -1,8 +1,8 @@
 <!--pages/match/photo.wxml-->
 <view class='container'>
   <view class='imgwindow'>
-    <image class='imgwindow' mode='widthFix' src='{{imgFilePath}}'/>
-	<!-- 图片预览 -->
+    <!-- 全身照预览说明 -->
+    <image mode='widthFix' style="padding-top: 20px;padding-bottom: 20px;" src='{{imgFilePath}}'/>
     <view class='scewindow' src='{{scene}}'>
       <text class="text" style="font-weight: bolder">场景：</text>
       <text class="text">{{scene}}</text>
@@ -11,7 +11,26 @@
       <text class="text" style="font-weight: bolder">服装:\n</text>
       <text class="text">{{user}}今日穿{{msg.uppercolor}}色{{msg.upperwear}}和{{msg.lowercolor}}色{{msg.lowerwear}}</text>
     </view>
-    <button bind:tap="return" type="primary">返回</button>
-    <button bind:tap="toMatch" type="primary">设计妆容</button>
+    <!-- 拍照 -->
+    <view class="camera">
+      <text>拍一张脸部照片来试试妆吧~</text>
+      <camera device-position="front" flash="off" binderror="error" style="width: 100%; height: 400px;"></camera> 
+      <button type="primary" bindtap="takePhoto">拍照</button> 
+    </view>
+    <!-- 预览 -->
+    <view class="match_display">
+	    <text class="text" style="color:whitesmoke;background-color:rgba(114, 103, 74, 0.849);font-weight: bold;font-size: larger;">预览:</text>
+		  <view class="match_sure">
+			  <image mode="widthFix" src="{{camFilePath}}"></image>
+			  <!-- <button type="primary" bindtap="bindphoViewTap">确定</button> -->
+		  </view>
+    </view>
+    <!-- 控制 -->
+    <view style="padding-top: 10px;padding-bottom: 5px;">
+      <button bind:tap="toMatch" type="primary" style="padding-top:10px;padding-bottom: 10px;">设计妆容</button>
+    </view>
+    <view style="padding-top: 10px;padding-bottom: 5px;">
+      <button bind:tap="return" type="default" >返回</button>
+    </view>
   </view>
 </view>

src/miniprogram-2/pages/match/photo.wxss

@@ -1,4 +1,18 @@
 /* pages/match/photo.wxss */
+.imgwindow{
+	width:auto;
+	height: auto;
+	background-color: #ddcfc3;
+	display: flex;
+	flex-direction: column;
+	/* justify-self: ; */
+}
+.imgwindow image{
+	/* padding: 5rpx,0rpx,5rpx,10rpx; */
+	/* width: 300px; */
+	padding-top: 5px;
+	align-content: center;
+}
 .text {
 	/* 字体大小 */
 	font-size: 15px;
@@ -16,5 +30,12 @@
 	word-spacing: 4px;
 	/*文字对齐 right 、left 、center  */
 	text-align: left;
-
+}
+.camera{
+	padding-top: 50px;
+}
+.camera text{
+	font-size: 20px;
+	color: black;
+	text-align: center;
 }

src/miniprogram-2/pages/match/result.wxml

@@ -6,6 +6,7 @@
 			<text class="text" style="text-align: center;">恭喜您！！这是您第{{index}}次完成妆容~</text>
 		</view>
 		<view class="res"> 
+			
 		</view>
 
 	</view>

src/miniprogram-2/pages/recommend/rec1.wxss

@@ -1,10 +1,10 @@
 /* pages/recommend/rec1.wxss */
-.container{
+/* .container{
 
 }
 .rec1{
 
-}
+} */
 
 .text {
 	/* 字体大小 */

src/miniprogram-2/pages/recommend/rec2.wxss

@@ -41,5 +41,4 @@ text-align: left;
 	word-spacing: 4px;
 	/*文字对齐 right 、left 、center  */
 	text-align: left;
-
 }

src/miniprogram-2/pages/recommend/rec4.wxml

@@ -1,8 +1,8 @@
 <!--pages/recommend/rec4.wxml-->
 <view class="container">
-	<view class="rec3">
+	<view class="rec">
 		<image src="{{r41}}" style="height:100%" mode="widthFix"></image>
-		<text class = "text">【艺考】上镜妆造思路超详细教程在此\n</text>
+		<text class = "text">【艺考】上镜妆造思路超详细教程\n</text>
 		<text class="text2" style="color: firebrick;font-size: medium;">-工作通勤-</text>
 <text class = "text2">
 	虽然只有一个宝宝私信问 我也要说一下

src/miniprogram-2/pages/recommend/rec4.wxss

@@ -1 +1,38 @@
 /* pages/recommend/rec4.wxss */
+.text {
+	/* 字体大小 */
+	font-size: 20px;
+	/* 字体颜色 */
+	color: black;
+	/* 字体风格-粗细 */
+	font-weight: bold;
+	/*段落排版--首字缩进*/
+text-indent: 2em;
+/*段落排版--行间距（行高）*/
+line-height: 1.5em;
+/*段落排版--中文字间距*/
+letter-spacing: 1px;
+/*字母间距*/
+word-spacing: 4px;
+/*文字对齐 right 、left 、center  */
+text-align: left;
+
+}
+.text2 {
+	/* 字体大小 */
+	font-size: 15px;
+	/* 字体颜色 */
+	color: black;
+	/* 字体风格-粗细 */
+	/*font-weight: bold;*/
+	/*段落排版--首字缩进*/
+	text-indent: 2em;
+	/*段落排版--行间距（行高）*/
+	line-height: 1.5em;
+	/*段落排版--中文字间距*/
+	letter-spacing: 1px;
+	/*字母间距*/
+	word-spacing: 4px;
+	/*文字对齐 right 、left 、center  */
+	text-align: left;
+}

src/miniprogram-2/pages/recommend/rec5.js

@@ -5,7 +5,7 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    r51:"../images/recom_1_5.jpg"
   },
 
   /**

src/miniprogram-2/pages/recommend/rec5.wxml

@@ -1,2 +1,14 @@
 <!--pages/recommend/rec5.wxml-->
-<text>pages/recommend/rec5.wxml</text>
+<view class="container">
+	<view class="rec">
+		<image src="{{r51}}" style="height:100%" mode="widthFix"></image>
+		<text class = "text">港风妆造\n</text>
+		<text class="text2" style="color: firebrick;font-size: medium;">-派对party-</text>
+<text class = "text2">
+妆容：浓眉，全包眼线（下眼线可用眼影粉），红唇，卷发
+服装：红裙很经典，红色吊带也很出片，pdd很便宜，晚上可以搭配牛仔外套
+</text>
+	<text class="text2" style="font-size: smaller;">
+#夏季</text>
+	</view>
+</view>

src/miniprogram-2/pages/recommend/rec5.wxss

@@ -1 +1,38 @@
 /* pages/recommend/rec5.wxss */
+.text {
+	/* 字体大小 */
+	font-size: 20px;
+	/* 字体颜色 */
+	color: black;
+	/* 字体风格-粗细 */
+	font-weight: bold;
+	/*段落排版--首字缩进*/
+text-indent: 2em;
+/*段落排版--行间距（行高）*/
+line-height: 1.5em;
+/*段落排版--中文字间距*/
+letter-spacing: 1px;
+/*字母间距*/
+word-spacing: 4px;
+/*文字对齐 right 、left 、center  */
+text-align: left;
+
+}
+.text2 {
+	/* 字体大小 */
+	font-size: 15px;
+	/* 字体颜色 */
+	color: black;
+	/* 字体风格-粗细 */
+	/*font-weight: bold;*/
+	/*段落排版--首字缩进*/
+	text-indent: 2em;
+	/*段落排版--行间距（行高）*/
+	line-height: 1.5em;
+	/*段落排版--中文字间距*/
+	letter-spacing: 1px;
+	/*字母间距*/
+	word-spacing: 4px;
+	/*文字对齐 right 、left 、center  */
+	text-align: left;
+}

src/miniprogram-2/pages/recommend/recommend.js

@@ -8,7 +8,7 @@ Page({
     rm4:"../images/rec_main_4.jpg",
     rm5:"../images/rec_main_5.jpg",
     rm6:"../images/rec_main_6.png",
-    rm7:"../images/rec_main_1.jpg",
+    rm7:"../images/rec_main_7.jpg",
     indicatorDots: true,
     autoplay: true,
     interval: 5000,
@@ -18,6 +18,9 @@ Page({
        '../images/rec_main_2.jpg',
        '../images/rec_main_3.jpg'
      ],
+     iconlove0:"../images/love.png",
+     iconlove1:"../images/love_selected.png",
+     love:[0,0,0,0]
   },
   bindrec1ViewTap(){
     wx.navigateTo({
@@ -64,6 +67,42 @@ Page({
       url: '../match/match'
     })
   },
+  select1(e){
+    // console.log(i);
+    var love=this.data.love;
+    if(!wx.getStorageSync('love'))
+      wx.setStorageSync('love', love)
+    var l=wx.getStorageSync('love')[0]
+    this.setData({
+      "love[0]":l?0:1
+    })
+    wx.setStorageSync('love', love)
+    // console.log(love)
+  },
+  select2(e){
+    // console.log(i);
+    var l=this.data.love[1];
+    this.setData({
+      "love[1]":l?0:1
+    })
+    // console.log(l)
+  },
+  select3(e){
+    // console.log(i);
+    var l=this.data.love[2];
+    this.setData({
+      "love[2]":l?0:1
+    })
+    // console.log(l)
+  },
+  select4(e){
+    // console.log(i);
+    var l=this.data.love[3];
+    this.setData({
+      "love[3]":l?0:1
+    })
+    // console.log(l)
+  },
   /**
    * 生命周期函数--监听页面加载
    */

src/miniprogram-2/pages/recommend/recommend.wxml

@@ -10,7 +10,7 @@
 			</block>
 		</swiper>
 		<view>
-			<text>妆容区</text>
+			<text class="text">妆容区</text>
 		</view>
 
 <!-- 瀑布流大概的思路就是，直接定义两列等宽的view，然后两列都加载相同的数据
@@ -18,29 +18,58 @@
 	<view class="content">
       <view class="left">
         <view class="block">
-					<view class="rec_main_4" bind:tap="bindrec2ViewTap">
-						<image class="pic"  mode="widthFix" src="{{rm4}} "/>
-						<text class="title">美拉德是我的舒适区</text>
+					<view class="rec_main_4" >
+						<view bind:tap="bindrec2ViewTap">
+							<image class="pic"  mode="widthFix" src="{{rm4}} "/>
+							<text class="title">美拉德是我的舒适区</text>
+						</view>
+						<view class="row">
+							<image class="icon" bindtap="select1" wx:if="{{love[0]==1}}" src="{{iconlove1}}" mode="heightFix"/>
+							<image class="icon" bindtap="select1" wx:else src="{{iconlove0}}" mode="heightFix"/>
+							<text class="title" bind:tap="bindrec2ViewTap" style="align-items: center;display: inline-flex;">#游玩娱乐</text>
+						</view>
 					</view>
         </view>
 				<view class="block">
-					<view class="rec_main_4" bind:tap="bindrec4ViewTap">
-						<image class="pic"  mode="widthFix" src="{{rm6}} "/>
-						<text class="title">第三个推文</text>
+					<view class="rec_main_4">
+						<view bind:tap="bindrec4ViewTap">
+							<image class="pic"  mode="widthFix" src="{{rm6}} "/>
+							<text class="title">艺考上妆，你值得拥有~</text>
+						</view>
+						<view class="row">
+							<image class="icon" bindtap="select2" wx:if="{{love[1]==1}}" src="{{iconlove1}}" mode="heightFix"/>
+							<image class="icon" bindtap="select2" wx:else src="{{iconlove0}}" mode="heightFix"/>
+							<text class="title" bind:tap="bindrec4ViewTap" style="align-items: center;display: inline-flex;">#工作通勤</text>
+						</view>
+						
 					</view>
 				</view>
       </view>
       <view class="right">
         <view class="block">
-					<view class="rec_main_5" bindtap="bindrec3ViewTap">
-						<image class="pic"  mode="widthFix" src="{{rm5}}"/>
-						<text class="title">新中式｜水是眼波横</text>
+					<view class="rec_main_5">
+						<view bind:tap="bindrec3ViewTap">
+							<image class="pic"  mode="widthFix" src="{{rm5}}"/>
+							<text class="title">新中式｜水是眼波横</text>
+						</view>
+						<view class="row">
+							<image class="icon" bindtap="select3" wx:if="{{love[2]==1}}" src="{{iconlove1}}" mode="heightFix"/>
+							<image class="icon" bindtap="select3" wx:else src="{{iconlove0}}" mode="heightFix"/>
+							<text class="title" bindtap="bindrec3ViewTap" style="align-items: center;display: inline-flex;">#酒席宴会</text>
+						</view>
 					</view>
         </view>
 				<view class="block">
-					<view class="rec_main_4" bind:tap="bindrec5ViewTap">
-						<image class="pic"  mode="widthFix" src="{{rm7}} "/>
-						<text class="title">第四个推文</text>
+					<view class="rec_main_4">
+						<view bind:tap="bindrec5ViewTap">
+							<image class="pic"  mode="widthFix" src="{{rm7}} "/>
+							<text class="title">OOTD港风</text>
+						</view>
+						<view class="row">
+							<image class="icon" bindtap="select4" wx:if="{{love[3]==1}}" src="{{iconlove1}}" mode="heightFix"/>
+							<image class="icon" bindtap="select4" wx:else src="{{iconlove0}}" mode="heightFix"/>
+							<text class="title" bind:tap="bindrec5ViewTap" style="align-items: center;display: inline-flex;">#派对party</text>
+						</view>
 					</view>
 				</view>
       </view>

src/miniprogram-2/pages/recommend/recommend.wxss

@@ -25,11 +25,18 @@ swiper{
  .block{
   background: #ffffff;
   border-radius: 10rpx;
+  margin-top: 5px;
+  margin-bottom: 5px;
  }
  .pic{
   border-radius: 10rpx 10rpx 0rpx 0rpx;
   width: 345rpx;
 }
+.row{
+  flex-direction:row;
+  flex-direction: row;
+	/* justify-content:center; */
+}
 .title{
   padding: 5rpx 20rpx 0rpx 20rpx;
   font-size: 30rpx;
@@ -38,5 +45,14 @@ swiper{
   align-items: center;
   display: flex;
 }
+.icon{
+  padding: 5rpx 0rpx 0rpx 20rpx;
+  height:10px;
+  /* display: flex; */
+  justify-content: flex-end;
+  /* background-color:red; */
+}
+
+