src/miniprogram-2/app.json

@@ -50,5 +50,19 @@
         "selectedIconPath": "pages/images/learn_selected.png"
       }
     ]
+  },
+  "permission": {
+    "scope.userLocation": {
+      "desc": "你的位置信息将用于小程序位置接口的效果展示"
+    },
+    "scope.userInfo": {
+      "desc": "你的个人信息将用于小程序个性化推荐"
+    },
+    "scope.album": {
+      "desc": "你的相册将用于小程序图片上传"
+    },
+    "scope.camera":{
+      "desc":"你的相机将用于小程序拍照"
+    }
   }
 }

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

@@ -6,7 +6,7 @@ Page({
    */
   data: {
       nowData:"",
-      rm4:"../images/recom_1_1.jpg"
+      r11:"../images/recom_1_1.jpg"
   },
   date:function(){
     var now=new Date();
@@ -17,8 +17,8 @@ Page({
     console.log(nowDate);
     return nowDate;
   },
-  bindrecViewTap(){
-    wx.redirectTo({
+  bindrec1ViewTap(){
+    wx.navigateTo({
       url:'../recommend/rec1'
     })
   },

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

@@ -8,7 +8,7 @@
 		<text>选择一个妆容开始美好的一天吧！</text>
 	</view>
 	<view class="mainrec">
-		<image bindtap="bindrecViewTap" src="{{rm4}} "/>
-		<image src="" style="height:100%"mode="widthFix"></image>
+		<image bindtap="bindrec1ViewTap" mode="widthFix" src="{{r11}} "/>
+		<!-- <image src="" style="height:100%"mode="widthFix"></image> -->
 	</view>
 </view>

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

@@ -5,10 +5,13 @@ Page({
    * 页面的初始数据
    */
   data: {
-    phopath:"../match/photo"
+    phopath:"../match/photo",
+    // imgList:"",
+    src:""
   },
+  //跳转photo
   bindphoViewTap(){
-    wx.redirecTo({
+    wx.navigateTo({
       url:'../match/photo'
     })
   },
@@ -32,6 +35,106 @@ Page({
       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)
+      }
+    })
+  },
+  //chooseMedia选图
+  img_w_show(sourceType){
+      var _this=this;
+      wx.chooseMedia({
+        count: 1, // 默认9
+        mediaType:['image'],//仅照片
+        //sizeType: ['original', 'compressed'], // 指定原图or压缩图
+        sourceType: [sourceType], // 来源是相册or相机
+        //camera:['front'],//前置相机
+        success: function (res) {
+          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
+          console.log(res);
+          var tempFilePaths = res.tempFiles['0']['tempFilePath'];
+          _this.setData({
+            src: (tempFilePaths?tempFilePaths:"")
+            //无法赋值-路径获取问题
+          })
+          // console.log("src:"+_this.data.src);
+          wx.setStorageSync('imgFilePath', _this.data.src);//存入缓存,实现数据转移
+          wx.pageScrollTo({//滚动到目标位置
+            scrollTop: 1200,
+            duration:300
+          })
+        }
+      })
+  },
+  //权限、拍照
+  sccamera(){
+    wx.authorize({
+      scope: 'scope.camera',
+      success () {
+        //用户允许授权，进行下一步操作
+        const cameraContext = wx.createCameraContext();//获取相机上下文？
+        wx.pageScrollTo({//滚动到目标位置
+          scrollTop: 700,
+          duration:300
+        })
+        
+        // cameraContext.takePhoto({//获取照片
+        //   quality: 'high',
+        //   success: (res) => {
+        //     // 将照片保存到本地
+        //     wx.saveImageToPhotosAlbum({
+        //       filePath: res.tempImagePath,
+        //       success: (res) => {
+        //         wx.showToast({
+        //           title: '保存成功'
+        //         });
+        //       },
+        //       error(e){
+        //         console.log(e.detail);
+        //       }
+        //     })
+        //   }
+
+        // })
+      }
+    })
+  },
+  //相机组件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)
+  },
   /**
    * 生命周期函数--监听页面加载
    */

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

@@ -1,24 +1,17 @@
 <!--pages/match/match.wxml-->
 <view class="container">
 	<view class="match_main">
-		<navigator url="../match/photo">
-			<view>点击开始拍照</view>
-		</navigator>
-		<!-- <text bindtap:"bindphoViewTap"/> -->
-	</view>
-	<!-- <view class="navi">
-		<view>
-			<text bindtap="bindmaiViewTap" >首页</text>
-		</view>
-		<view>
-			<text bindtap="bindmacViewTap" >匹配</text>
-		</view>
-		<view>
-			<text bindtap="bindhisViewTap" >历史</text>
+		<view class="choose_way" bindtap="tipwindow" >点击开始拍照</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>
+		<!-- 显示摄像头 -->
+		<button type="primary" bindtap="takePhoto">拍照</button>
+		<view class="match_display">
+			预览
+			<image mode="widthFix" src="{{src}}"></image>
+			<button type="primary" bindtap="bindphoViewTap">确定</button>
 		</view>
-		<view>
-			<text bindtap="bindrecViewTap" >推荐</text>
-		</view>
-	</view> -->
+	</view>
 </view>
-<text>pages/match/match.wxml</text>

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

@@ -1 +1,23 @@
-/* pages/match/match.wxss */
+/* pages/match/match.wxss */
+.match_main{
+	width:auto;
+	height: auto;
+	background-color: #ddcfc3;
+}
+.choose_way{
+	width:100%;
+	height:400px;
+	background-color: #ddcfc3;
+	text-align: center;
+	padding-top: 200px;
+}
+.match_display{
+	width:auto;
+	height:100px;
+	background-color: #ddcfc3;
+	text-align: center;
+	padding-top: 50px;
+}
+.match_sure{
+	text-align: center;
+}

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

@@ -0,0 +1,75 @@
+// pages/match/photo.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    imgFilePath:"",
+    src:""
+  },
+  
+  /**
+   * 生命周期函数--监听页面加载
+   * 获取match的照片缓存？
+   */
+  onLoad(options) {
+    var img = wx.getStorageSync('imgFilePath');
+    var that = this;
+    that.setData({
+      imgFilePath: img
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   * 获取日期给history？
+   */
+  onShow() {
+    const history = wx.getStorageSync('history') || []
+    history.unshift(Date.now())
+    wx.setStorageSync('history', history)
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

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

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

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

@@ -0,0 +1,7 @@
+<!--pages/match/photo.wxml-->
+<view class='container'>
+  <view class='imgwindow'>
+    <image class='imgwindow' mode='widthFix' src='{{imgFilePath}}'/>
+	<!-- 图片预览 -->
+  </view>
+</view>

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

@@ -0,0 +1 @@
+/* pages/match/photo.wxss */

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

@@ -1,19 +1,17 @@
 <!--pages/recommend/rec1.wxml-->
 <view class="container">
 	<view class="rec1">
-		<image src="{{r11}}"/>
-		<image src="" style="height:100%" mode="widthFix"></image>
-		<text>今天是一期早八通勤眼妆教程～
-3ce新品的这两盘好甜美夏日呀！！温柔低饱和的调调
-日常不出错的配色，新手友友也可以轻松驾驭
-樱花碎冰
-清冷低饱和嫩粉调～营造温柔粉调眼妆
-指腹蘸取里面的一颗粉棕色膏状眼影，涂抹眼窝
-眼妆就轻松搞定！早八人的福音呀
-西柚冰茶
-元气夏日果汁橘棕调，敲喜欢这个配色
-元气感拉满～轻松营造日常通勤眼妆
-日常又消肿
-快一起学起来叭！</text>
+		<image src="{{r11}}"style="height:100%" mode="widthFix"></image>
+		<text class="text">黄黑皮低饱和清冷妆这么高级！</text>
+<text class="text2">
+    这种低饱和妆容真的很有感觉！
+
+🌟大面积的腮红是重点（灰粉色会更自然）
+
+眼妆往细长狐狸眼的方向靠
+卧蚕也要画细长 眼妆浅色大面积晕染出上扬的形状就OK
+真的很有感觉！黄黑皮姐妹速速学起来！
+#黄黑皮 #黄黑皮妆容 #妆容分享 #今日妆容 #清冷感妆容
+</text>
 	</view>
 </view>

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

@@ -1 +1,46 @@
-/* pages/recommend/rec1.wxss */
+/* pages/recommend/rec1.wxss */
+.container{
+
+}
+.rec1{
+
+}
+
+.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/rec2.wxml

@@ -2,14 +2,21 @@
 <view class="container">
 	<view class="rec2">
 		<image src="{{r21}}" style="height:100%" mode="widthFix"></image>
-
-
-		<text>妆容小tips</text>
-<text>1、眼妆部分整体是裸棕大地色系的，先用浅灰色0大地，上眼消肿。再用橘棕色贴着睫毛根加深上眼脸。
-2、用刀锋刷沾取眼影画眼线，降低眼线存在感同时修饰眼型。
-橘粉底色的珠光色，用手指沾取，点涂在上眼
-脸中间。
-3、腮红用点彩刷沾取第三排中间的颜色，点涂在面中，余粉带过皇头
-4、口红只涂在上下唇内侧，用晕染刷晕染边缘再加深一遍重复晕染，唇峰点上口红用手指晕开！</text>
+		<text class = "text">美拉德是我的舒适区🍁</text>
+<text class = "text2">
+	秋日当然不能少了棕色系啦！
+	美拉德火是有道理的～
+	真的太好出片了
+	妆容整体就是棕色调为主
+	口红选择了MAC新出的热吻棒
+	这三只颜色和秋冬适配度太高了
+	#67狂野棕：冷冽裸茶棕 美区辣妹属性大开
+	#69痴情咖：复古焦糖棕 爆浆太妃糖 内里都是惊喜
+	#79任性莓：甜熟浆果迸发热辣莓色 灰调复古感 时髦爆棚
+	质地很特别 上嘴迅速成膜不拔干
+	很爱这种不显唇纹的哑光感吃饭也不用担心掉色严重
+	24小时在线 谁能不爱呢
+	#MAC热吻棒 #笔记灵感 #美式复古  #热吻吧显眼包 #美拉德
+</text>
 	</view>
 </view>

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

@@ -1 +1,45 @@
-/* pages/recommend/rec2.wxss */
+/* pages/recommend/rec2.wxss */
+.container{
+
+}
+.rec2{
+
+}
+.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/rec3.wxml

@@ -1,9 +1,9 @@
 <!--pages/recommend/rec3.wxml-->
 <view class="container">
 	<view class="rec3">
-		<image src="{{r31}}"/>
-		<image src="" style="height:100%" mode="widthFix"></image>
-		<text>妆容小tips
+		<image src="{{r31}}" style="height:100%" mode="widthFix"></image>
+		<text class = "text">新中式｜水是眼波横</text>
+<text class = "text2">
 1、唇妆涂的是TF黑金唇镜 22朝露，薄涂是很纯欲的樱花粉，厚涂是气质的玫瑰色。上嘴甜味氛围感拉满，很适合搭配白开水伪素颜淡妆。
 2、妆容统一杏粉色调，眼妆用消肿色简单带过，点彩刷沾取暖调粉色腮红，在面中大面积铺色打造白里透红的妆效</text>
 	</view>

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

@@ -1 +1,39 @@
-/* pages/recommend/rec3.wxss */
+/* pages/recommend/rec3.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.wxml

@@ -5,7 +5,7 @@
     autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
 			<block wx:for="{{imgUrls}}">
 				<swiper-item>
-					<image bindtap="bindrec1ViewTap" src="{{item}}" class="slide-image" />
+					<image bindtap="bindrec1ViewTap" mode="widthFix" src="{{item}}" class="slide-image" />
 				</swiper-item>
 			</block>
 		</swiper>
@@ -13,12 +13,12 @@
 			<text>推荐页面</text>
 		</view>
 			<view class="rec_main_4">
-				<image bindtap="bindrec2ViewTap" src="{{rm4}} "/>
-				<image src="" style="height:100%"mode="widthFix"></image>
+				<image bindtap="bindrec2ViewTap" mode="widthFix" src="{{rm4}} "/>
+				<!-- <image src="" style="height:100%"mode="widthFix"></image> -->
 			</view>
 			<view class="rec_main_5">
-				<image bindtap="bindrec3ViewTap" src="{{rm5}}"/>
-				<image src="" style="height:100%"mode="widthFix"></image>
+				<image bindtap="bindrec3ViewTap" mode="widthFix" src="{{rm5}}"/>
+				<!-- <image src="" style="height:100%"mode="widthFix"></image> -->
 			</view>
 	</view>
 </view>

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

@@ -1,5 +1,7 @@
 /* pages/recommend/recommend.wxss */
+
 swiper{
   width: 100%;
-  height: calc(100vw*9/16);
+  /* height: calc(100vw*9/16); */
+  height: 350px;
  }