first

Dockerfile

@@ -0,0 +1,7 @@
+FROM nginx:1.16
+
+ENV TZ="Asia/Shanghai"
+ENV NGINX_PORT=80
+EXPOSE ${NGINX_PORT}
+COPY default.conf /etc/nginx/conf.d/
+COPY dist/  /usr/share/nginx/html/

docker-app-compose.yml

@@ -0,0 +1,14 @@
+version: '3'
+services:
+  sugarpark-h5inapp-promote-pages:                      # 指定服务的名称
+    image: "sugarpark-h5inapp-promote-pages:${app_tag_name}"                         # 镜像名 .注意：${app_tag_name} 变量名不能带'-'符号,第一个'-'后会认为是默认值，而非变量名的一部分。
+    restart: always
+    environment:                        # 环境变量
+      - VIRTUAL_HOST=''          # nginx-proxy 所用域名
+    networks:                           # 网络 (用于容器间通信)
+      - nginx-proxy
+
+networks:                               # 定义网络
+  nginx-proxy:
+    external:
+      name: nginx-proxy

src/components/DragImage/DragImage.vue

@@ -1,8 +1,9 @@
 <template>
-  <view class="con">
-    <movable-area class="area" :style="{ height: areaHeight }" @mouseenter="mouseenter" @mouseleave="mouseleave">
+  <div class="con">
+    <div class="area" :style="{ height: areaHeight }" @mouseenter="mouseenter" @mouseleave="mouseleave">
       <block v-for="(item, index) in imageList" :key="item.id">
-        <movable-view
+        <div
+		  :draggable="true"
           class="view"
           :x="item.x"
           :y="item.y"
@@ -11,40 +12,40 @@
           :disabled="item.disable"
 		  @click="previewImage(index)"
           @change="onChange($event, item)"
-          @longpress="touchstart(item)"
+          @="touchstart(item)"
           @touchend="touchend(item)"
           :style="{ width: viewWidth + 'px', height: viewWidth + 'px', 'z-index': item.zIndex, opacity: item.opacity }"
         >
-          <view class="area-con" :style="{ width: childWidth, height: childWidth, transform: 'scale(' + item.scale + ')' }">
+          <div class="area-con" :style="{ width: childWidth, height: childWidth, transform: 'scale(' + item.scale + ')' }">
             <image class="pre-image" :src="item.src" mode="aspectFill"></image>
-            <view class="del-con" @click="delImage(item, index)" @touchstart.stop="delImageMp(item, index)" @touchend.stop="nothing()" @mousedown.stop="nothing()" @mouseup.stop="nothing()" v-if="!chooseImage">
-              <view class="del-wrap">
+            <div class="del-con" @click="delImage(item, index)" @touchstart.stop="delImageMp(item, index)" @touchend.stop="nothing()" @mousedown.stop="nothing()" @mouseup.stop="nothing()" v-if="!chooseImage">
+              <div class="del-wrap">
                 <image
                   class="del-image"
                   src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAhdEVYdENyZWF0aW9uIFRpbWUAMjAyMDowNzoyNSAyMTo1NDoyOU4TkJAAAADcSURBVFhH7ZfRCoMwDEXLvkjwwVf/bH/emmAyN6glTW9WBjsgwm28OeCLpj81Sil7zvlJ90UiONS/yY5VogsO6XrBg3IEQ5a/s8vRSWUAKmLqp2w5jz5BiNQEGMo3GbloDLtFXJ1IkaEuhAiiY6gEIqB4yqACSk9piIBiKQ8VUFpLviKg3C2rESKgWERCBZSWiEfgIfffYvrrsAgoISJ3Apy3zuTxcSxLQkV6ykNEPKVQkZEyiAiiZKgDIaC4upACSlcn5fM/+WuDCAHF1E/Z/N9AhkMZnPNDPI+UDjPIXgAQIGjNAAAAAElFTkSuQmCC"
                 ></image>
-              </view>
-            </view>
-			<view class="choose" v-if="item.choosed">
+              </div>
+            </div>
+			<div class="choose" v-if="item.choosed">
 				{{item.chooseIndex}}
-			</view>
-          </view>
-        </movable-view>
+			</div>
+          </div>
+        </div>
       </block>
-      <view
+      <div
         class="add"
         v-if="imageList.length < number"
         :style="{ top: add.y, left: add.x, width: viewWidth + 'px', height: viewWidth + 'px' }"
         @click="addImages"
       >
-        <view class="add-wrap" :style="{ width: childWidth, height: childWidth }">
-          <image
+        <div class="add-wrap" :style="{ width: childWidth, height: childWidth }">
+          <img
             style="width: 216rpx;height: 216rpx;"
-           :src="`${assetsUrl}album-add.png`" mode="aspectFit"></image>
-        </view>
-      </view>
-    </movable-area>
-  </view>
+           :src="`${assetsUrl}album-add.png`" mode="aspectFit"></img>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>

src/public.scss

@@ -52,4 +52,5 @@
 	textarea,input{outline: none;border: none;}
 	#app{
 		background-color: $bgcolor1;
-	}
+	}
+	

src/router/index.js

@@ -96,7 +96,7 @@ const routes = [
     path: "/main",
     name: "main",
 	meta:{
-		keepAlive:false
+		keepAlive:true
 	},
     component: ()=>import("../views/main/main.vue"),
 	redirect: '/friends',
@@ -147,7 +147,7 @@ const routes = [
     path: "/guest",
     name: "guest",
   	meta:{
-  		keepAlive:true
+  		keepAlive:false
   	},
     component: ()=>import("../views/mine/guest.vue")
   },
@@ -159,6 +159,94 @@ const routes = [
   	},
     component: ()=>import("../views/search/search.vue")
   },
+  {
+    path: "/album",
+    name: "album",
+  	meta:{
+  		keepAlive:true
+  	},
+    component: ()=>import("../views/mine/album.vue")
+  },
+  {
+    path: "/faceVideo",
+    name: "faceVideo",
+  	meta:{
+  		keepAlive:true
+  	},
+    component: ()=>import("../views/faceVideo/faceVideo.vue")
+  },
+  {
+    path: "/chooseImage",
+    name: "chooseImage",
+  	meta:{
+  		keepAlive:true
+  	},
+    component: ()=>import("../views/mine/chooseImage.vue")
+  },
+  {
+    path: "/authReady",
+    name: "authReady",
+  	meta:{
+  		keepAlive:true
+  	},
+    component: ()=>import("../views/mine/authReady.vue")
+  },
+  {
+    path: "/setting",
+    name: "setting",
+  	meta:{
+  		keepAlive:true
+  	},
+    component: ()=>import("../views/setting/setting.vue")
+  },
+  {
+    path: "/vip",
+    name: "vip",
+  	meta:{
+  		keepAlive:true
+  	},
+    component: ()=>import("../views/vip/vip.vue")
+  },
+  {
+  	path: "/walletHome",
+  	name: "walletHome",
+  	component: () => import("../views/wallet/walletHome/index"),
+  },
+  {
+  	path: "/ydDetail",
+  	name: "ydDetail",
+  	component: () => import("../views/wallet/ydDetail/index"),
+  },
+  {
+  	path: "/walletWithdraw",
+  	name: "walletWithdraw",
+  	component: () => import("../views/wallet/walletWithdraw/index"),
+  },
+  {
+  	path: "/boundAli",
+  	name: "boundAli",
+  	component: () => import("../views/wallet/boundAli/index"),
+  },
+  {
+  	path: "/incomeDetail",
+  	name: "incomeDetail",
+  	component: () => import("../views/wallet/incomeDetail/index"),
+  },
+  {
+  	path: "/exchange",
+  	name: "exchange",
+  	component: () => import("../views/wallet/exchange/index"),
+  },
+  {
+  	path: "/exchangeSuccess",
+  	name: "exchangeSuccess",
+  	component: () => import("../views/wallet/exchangeSuccess/index"),
+  },
+  {
+  	path: "/withdrawResult",
+  	name: "withdrawResult",
+  	component: () => import("../views/wallet/withdrawResult/index"),
+  },
 ];
 
 const router = new VueRouter({
@@ -167,18 +255,18 @@ const router = new VueRouter({
   routes,
 });
 router.beforeEach((to,from,next)=>{
-	next();
-	// if(!localStorage.getItem('user')){
-	// 	if(to.name==='login'||(from.name==='login'&&to.name==='loginByPhone')||(from.name==='loginByPhone'&&to.name==='loginByCode')){
-	// 		next();
-	// 	}
-	// 	else {
-	// 		next({path:'/'});
-	// 	}
-	// }
-	// else{
-	// 	next();
-	// }
+	console.log(to,from)
+	if(!localStorage.getItem('user')){
+		if(to.name==='login'||(from.name==='login'&&to.name==='loginByPhone')||(from.name==='loginByPhone'&&to.name==='loginByCode')){
+			next();
+		}
+		else {
+			next({path:'/'});
+		}
+	}
+	else{
+		next();
+	}
 	
 });
 export default router;

src/store/index.js

@@ -17,7 +17,10 @@ export default new Vuex.Store({
 	videoCdn:null,
 	IMloadSig:null,
 	IMSDKReady:false,
-	chooseCitys:null
+	chooseCitys:null,
+	withdrawUserInfo:{},//新版钱包用户信息
+	withdrawInfo:{},//新版钱包用户提现相关信息
+	withdrawMyInfo:{},//新版钱包用户提现详情
   },
   mutations: {
 	setTabbarIndex(state,preload){
@@ -58,7 +61,16 @@ export default new Vuex.Store({
 	},
 	setIMSDKReady(state,preload){
 		state.IMSDKReady=preload;
-	}
+	},
+	setWithdrawUserInfo(state,payLoad){
+		  state.withdrawUserInfo=payLoad;
+	},
+	setWithdrawInfo(state,payLoad){
+		  state.withdrawInfo=payLoad;
+	},
+	setWithdrawMyInfo(state,payLoad){
+		  state.withdrawMyInfo=payLoad;
+	},
   },
   modules: {
   }

src/util/api.js

@@ -1,5 +1,5 @@
 import {post} from "./request.js";
-
+import {ajaxPost} from './request.js'
 const req = {
     /**
      * 登录
@@ -52,7 +52,8 @@ const req = {
 		friendsNoAuth:(params) => post("/loadUsersByIndexFirstNoAuth",'POST', params),//无登录体验数据
 	},
 	pay:{
-		creatWxOrder:(params) => post("/createWxpayOrderByMiniProgram",'POST', params),//创建微信订单
+		creatWxOrder:(params) => ajaxPost("/pay/createWxpayOrder",'POST', params),//创建微信订单
+		creatAliOrder:(params) => ajaxPost("/pay/createAlipayOrder",'POST', params),//创建支付宝订单
 	},
 	IM:{
 		loadSig:(params) => post("/loadSig",'POST', params),//创建微信订单
@@ -75,6 +76,18 @@ const req = {
 		editAlipay: (params) => post("/bag/editAlipay",'POST', params), // 绑定支付宝
 		loadMyWithdrawDetail: (params) => post("/bag/loadMyWithdrawDetail",'POST', params), // 查询单笔提现订单
 	},
+	/**
+	 * 人脸比对
+	 */
+	faceAuth:{
+		upload:(params) => post('/faceImage/upload',params),//上传图片
+		checkRealManFace:(params) => post('/realMan/checkRealManFace',params),//检查是否有效人脸照
+		compareFace:(params) => post('/realMan/compareFace',params),//人脸比对
+		realManMedia:(params) => post('/realManMediaBatchAsyncNew',params),//真人认证相册
+		checkChangeDay:(params) => post('/realMan/checkRealManChange',params),//检测今日是否可更换面容
+		realManChange:(params) => post('/realMan/realManChange',params),//更换面容照
+		realManFaceState:(params) => post('/realMan/face/state',params),//面容照状态
+	}
 };
 
 export default req;

src/util/faceAuth.js

@@ -0,0 +1,61 @@
+/**
+ * H5人脸识别
+ */
+const ACCOUNT_API_KEY = 'eace0e4a05504c36aaa25347fab319fa';
+const ACCOUNT_API_SECRET = 'aff4aaec717a472ea07e264d103abb4b';
+const baseUrl="https://h5.sugarpark.cn/";
+//const baseUrl="http://jliao-h5-web-test.internal.jiebide.xin/";
+//const baseUrl="http://192.168.1.139:17031/"
+import axios from "axios";
+export function getBiztoken(url){
+	return new Promise((resolve,reject)=>{
+		axios.post(baseUrl+'getSignature',{pathName:url}).then(res=>{
+			console.log(res,'then')
+			if(res.code===1000){
+				resolve(res.liveness_detection_url);
+			}
+			else{
+				reject(res);
+			}
+		}).catch(err=>{
+			console.log(err,'err')
+			reject(err);
+		})
+	})
+}
+export function getFaceResult(biztoken,result_id){
+	return new Promise((resolve,reject)=>{
+		axios.post(baseUrl+`getDetectionResult?biztoken=${biztoken}&result_id=${result_id}`).then(res=>{
+			switch(String(res.code)){
+				case '1000':
+					switch(res.liveness_status){
+						case 'ok':resolve(res);break;
+						case 'hack':resolve('活体检测未通过，原因：假造人脸(比如视频拍摄的是照片)');break;
+						case 'motion_failed':resolve('活体检测未通过，原因：动作序列检测未通过(针对交互活体检测)');break;
+						case 'short_time':resolve('活体检测未通过，原因：视频中连续有同一完整人脸的时长不足2s');break;
+						case 'no_face_detected':resolve('活体检测未通过，原因：视频中未检测到人脸');break;
+					}
+				break;
+				case '1102':resolve('biztoken过期');break;
+				case '1105':resolve('非法的result_id');break;
+				case '1106':resolve('非法的biztoken');break;
+				case '1107':resolve('非法的动作序列');break;
+				case '1108':resolve('biztoken人脸识别检测过期');break;
+				case '1109':resolve('检测重试超过限制次数');break;
+				case '1110':resolve('当次动作序列检测过期');break;
+				case '1200':resolve('输入参数无效');break;
+				case '2000':resolve('资源未找到');break;
+				case '2008':resolve('视频无效');break;
+				case '2011':resolve('人脸识别视频少于3s');break;
+				case '2012':resolve('人脸识别视频过期');break;
+				case '2014':resolve('人脸识别视频超过10s');break;
+				case '2015':resolve('人脸识别视频非现场拍摄');break;
+				case '2101':resolve('未发现识别结果');break;
+				case '4007':resolve('人脸识别失败');break;
+				case '4033':resolve('人脸识别视频超过10s');break;
+			}
+		}).catch(err=>{
+			reject(err);
+		})
+	})
+}

src/util/index.js

@@ -247,10 +247,259 @@ export function deviceSystem(){
     }
     return flag;
 }
-export function isWX(){
-	if (ua.toLowerCase().indexOf('micromessenger') !== -1) {
-		return 1;
-	}
-	return 0
+//将base64转换为文件
+export function dataURLtoFile(base64) {
+    var arr = base64.split(','),
+        bstr = atob(arr[1]),
+        n = bstr.length,
+        u8arr = new Uint8Array(n);
+    while (n--) {
+        u8arr[n] = bstr.charCodeAt(n)
+    }
+    return new File([u8arr], file.name, {
+        type: file.type
+    })
+}
+export function getPlatform() {
+  var u = navigator.userAgent;
+  var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
+  var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
+  let flag = "";
+  if (isAndroid) {
+    flag = "android";
+  } else if (isiOS) {
+    flag = "ios";
+  } else {
+    flag = "other";
+  }
+  // alert(flag)
+  return flag;
+}
+
+// 判断设备
+export function isWX() {
+  var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
+  let isWX = false
+  if (ua.match(/MicroMessenger/i) == "micromessenger") {
+    //在微信中打开
+    isWX = true
+  }
+  // alert(flag)
+  return isWX;
+}
+
+// 分享
+export function appShare() {
+  // console.log(111)
+  // console.log(getPlatform())
+  switch (getPlatform()) {
+    case "ios":
+      window.webkit.messageHandlers.ReactNativeWebView.postMessage({
+        action: "share",
+      });
+      break;
+    case "android":
+      AndroidZhenYan.callAndroid(JSON.stringify({ type: 2 })); // 分享
+      break;
+    default:
+      break;
+  }
+}
+
+// 设置localstorage
+export function setExpire(key, value, expire) {
+  let obj = {
+    data: value,
+    time: Date.now(),
+    expire: expire,
+  };
+  localStorage.setItem(key, JSON.stringify(obj));
+}
+// 获取localstorage
+export function getExpire(key) {
+  let val = localStorage.getItem(key);
+  if (!val) {
+    return null;
+  }
+  val = JSON.parse(val);
+  if (Date.now() - val.time > val.expire) {
+    localStorage.removeItem(key);
+    return null;
+  }
+  return val.data;
+}
+
+/**
+ * @param {string} mobile
+ * @returns {Object}
+ */
+export function isMobile(val) {
+  let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
+  if(val.substr(0,3)==='120'&&val.length===11){
+	  return true;
+  }
+  if (reg.test(val)) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+export function getDateFromat(time,fmt) {
+  var date=new Date(time);
+  var year=date.getFullYear();
+  var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
+  var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
+  var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
+  var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
+  var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
+  // 拼接
+  if (fmt == 'yyyy.MM.dd') {
+    return year+"."+month+"."+day;
+  } else {
+    return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
+  }
 }
 
+// 获取数组Keys
+export function getArrayKeys(arr, key) {
+  if (!arr) return [];
+  if (!key) {
+    key = "label";
+  }
+  let reArr = [];
+  for (let i = 0; i < arr.length; i++) {
+    reArr.push(arr[i][key]);
+  }
+  return reArr;
+}
+
+// 修改数组key
+export function updateArrayKeys(arr) {
+  if (!arr) return [];
+  let reArr = [];
+  arr.map((item) => {
+    reArr.push({
+      name: item.label,
+      value: item.value,
+    });
+  });
+  return reArr;
+}
+
+// 获取雷达图指示点
+export function getDarArrayKeys(arr) {
+  if (!arr) return [];
+  let reArr = [];
+  arr.map((item) => {
+    reArr.push({
+      name: item.label,
+    });
+  });
+  return reArr;
+}
+
+// 获取嵌套数组data
+export function getArrayDatas(arr, label) {
+  if (!arr) return [];
+  let reArr = [];
+
+  arr.map((item) => {
+    if (!item.datas) item.datas = [];
+    item.datas.map((data) => {
+      if (data.label === label) {
+        reArr.push(data.value);
+      }
+    });
+  });
+  return reArr;
+}
+
+// 获取嵌套数组data
+export function getArrayDatasRes(arr, label) {
+  if (!arr) return [];
+  let reArr = [];
+
+  arr.map((item) => {
+    if (item.name === label) {
+      item.datas.map((data) => {
+        reArr.push(data.value);
+      });
+    }
+  });
+  return reArr;
+}
+
+// 获取数组并删除无用data
+export function getObjDatas(arr, label) {
+  if (!arr) return [];
+  let reArr = [];
+  arr.map((item) => {
+    if (item.label === label) {
+      for (let key in item) {
+        if (key !== "label") {
+          reArr.push(item[key]);
+        }
+      }
+    }
+  });
+  // console.log(reArr)
+  return reArr;
+}
+
+export function formatTime(date, fmt) {
+  var o = {
+    "M+": date.getMonth() + 1, //月份
+    "d+": date.getDate(), //日
+    "h+": date.getHours(), //小时
+    "m+": date.getMinutes(), //分
+    "s+": date.getSeconds(), //秒
+    "q+": Math.floor((date.getMonth() + 3) / 3), //季度
+    S: date.getMilliseconds(), //毫秒
+  };
+  if (/(y+)/.test(fmt))
+    fmt = fmt.replace(
+      RegExp.$1,
+      (date.getFullYear() + "").substr(4 - RegExp.$1.length)
+    );
+  for (var k in o)
+    if (new RegExp("(" + k + ")").test(fmt))
+      fmt = fmt.replace(
+        RegExp.$1,
+        RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
+      );
+  return fmt;
+}
+export function isIphoneX(){
+	if(getPlatform()!=='ios'){
+		return false;
+	}
+	// if(window.screen.width==375&&window.screen.height==724){return true;}//iphoneX/12/13 mini 
+	// else if(window.screen.width==414&&window.screen.height==869){return true;}//iphoneXR/11/iphoneXS max
+	// else if(window.screen.width==390&&window.screen.height==753){return true;}//iphone12/13(pro)
+	// else if(window.screen.width==428&&window.screen.height==835){return true;}//iphone12/13 pro max
+	return true;
+}
+export function isSafari(){
+	if(/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent) && !/qqbrowse/.test(navigator.userAgent.toLocaleLowerCase())){
+		return true;
+	}
+	return false;
+}
+export function toDecimal2(x) {    
+	var f = parseFloat(x);    
+	if (isNaN(f)) {    
+		return false;    
+	}    
+	var f = Math.round(x*100)/10000;    
+	var s = f.toString();    
+	var rs = s.indexOf('.');    
+	if (rs < 0) {    
+		rs = s.length;    
+		s += '.';    
+	}    
+	while (s.length <= rs + 2) {    
+		s += '0';    
+	}    
+	return s;    
+}

src/util/request.js

@@ -5,7 +5,9 @@ import Vant from 'vant';
 import 'vant/lib/index.css';
 Vue.use(Vant);
 import $ from "jquery";
-import {deviceSystem,getSrcTypeS} from './index.js'
+import {deviceSystem,getSrcTypeS} from './index.js';
+const otherHost='http://jliao-h5-web-test.internal.jiebide.xin';//H5地址
+//const otherHost='http://192.168.1.253:17031'
 const ua=navigator.userAgent;
 var that=this;
 // 环境的切换
@@ -170,3 +172,32 @@ export function post(url,methods, params) {
       });
   });
 }
+
+/**
+ * jquery post方法，对应post请求用于调用第三方接口
+ * @param {String} url [请求的url地址]
+ * @param {Object} params [请求时携带的参数]
+ */
+export function ajaxPost(url,type,params){
+	return new Promise((resolve,reject)=>{
+		$.ajax({
+			type:type,
+			url:`${otherHost}${url}`,
+			data: JSON.stringify(params),
+			dataType: "json",
+			contentType: "application/json",
+			// 设置头部属性
+			beforeSend: function(request) {
+				request.setRequestHeader("LL_Ukn", "Ti26M9wy2y5xl5OCtc6Ohyy79b7pe9ikMqRZM3CwhpPJSMYnumUAYHNvqC1i5p2lTCkLkz9/v+rjNfM2hLjccQXxd7a6+zk6yyS4lSEXowzbL4jT/ETEi3bsrH7yPRAvEI8E0YTIMeCjwz0liuHXOw==");
+			},
+			success: function (data) {
+				  if(data.status==='Succ'){
+					  resolve(data.data);
+				  }
+				  else{
+					  reject(data.msg)
+				  }
+			}
+		})
+	})
+}

src/util/validate.js

@@ -0,0 +1,101 @@
+/**
+ * Created by PanJiaChen on 16/11/18.
+ */
+
+/**
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validUsername(str) {
+  const valid_map = ['admin', 'editor']
+  return valid_map.indexOf(str.trim()) >= 0
+}
+
+/**
+ * @param {string} url
+ * @returns {Boolean}
+ */
+export function validURL(url) {
+  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
+  return reg.test(url)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validLowerCase(str) {
+  const reg = /^[a-z]+$/
+  return reg.test(str)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validUpperCase(str) {
+  const reg = /^[A-Z]+$/
+  return reg.test(str)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validAlphabets(str) {
+  const reg = /^[A-Za-z]+$/
+  return reg.test(str)
+}
+
+/**
+ * @param {string} email
+ * @returns {Boolean}
+ */
+export function validEmail(email) {
+  const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+  return reg.test(email)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function isString(str) {
+  if (typeof str === 'string' || str instanceof String) {
+    return true
+  }
+  return false
+}
+
+/**
+ * @param {Array} arg
+ * @returns {Boolean}
+ */
+export function isArray(arg) {
+  if (typeof Array.isArray === 'undefined') {
+    return Object.prototype.toString.call(arg) === '[object Array]'
+  }
+  return Array.isArray(arg)
+}
+/**
+ * @param {String} str
+ * @returns {Boolean}
+ */
+export function validChinese(str){
+	return /^[\u4e00-\u9fa5]+$/.test(str)
+}
+/**
+ * @param {String} phone
+ * @returns {Boolean}
+ */
+export function validPhone(phone){ 
+	return /^1[3456789]\d{9}$/.test(phone)
+}

src/views/faceVideo/faceVideo.vue

@@ -1,33 +1,35 @@
 <template>
-	<view class="container">
-		<view id="topnav" class="topnav flex-between"  :style="{'height':`${topbarOffsetHeight-statusBarHeight}px`,'padding-top':`${statusBarHeight}px`}">
-			<view class="nav-item flex-center" @click="back">
-				<image :src="`${assetsUrl}back.png`" mode="widthFix" class="nav-img"></image>
-			</view>
-			<view class="nav-text font32 fw600">
+	<div class="container">
+		<div id="topnav" class="topnav flex-between">
+			<div class="nav-item flex-center" @click="back">
+				<img :src="`${assetsUrl}back.png`" mode="widthFix" class="nav-img"></img>
+			</div>
+			<div class="nav-text font32 fw600">
 				{{topbarTitle}}
-			</view>
-			<view class="nav-item"></view>
-		</view>
-		<view class="upload-box flex-center" @click="chooseMedia">
-			<image :src="`${assetsUrl}mine-camera.png`" mode="widthFix" class="upload-img"></image>
-			<view class="upload-text font28 fw400">选择视频</view>
-		</view>
-		<view class="tip font22 fw400">
+			</div>
+			<div class="nav-item"></div>
+		</div>
+		<div class="upload-box flex-center" @click="chooseMedia">
+			<img :src="`${assetsUrl}mine-camera.png`" mode="widthFix" class="upload-img"></img>
+			<div class="upload-text font28 fw400">选择视频</div>
+			<input ref="videofile" type="file" accept="video/mp4" class="file" @change="uploadVdo">
+		</div>
+		<div class="tip font22 fw400">
 			点击添加你的封面视频
-		</view>
-	</view>
+		</div>
+	</div>
 </template>
 
 <script>
 	import {getPolicy,computeSignature,getKey} from '@/util/oss.js';
+	import {assetsUrl} from '../../util/index.js';
 	import {encode} from '@/util/base64.js'
 	export default {
 		data() {
 			return {
 				topbarIcon:'back',
 				topbarTitle:'编辑封面视频',
-				assetsUrl:this.$util.assetsUrl,
+				assetsUrl,
 				topNavHeight:0,
 				options:{
 					completeUser:null,
@@ -42,121 +44,92 @@
 			};
 		},
 		mounted() {
-			this.computedScollviewHeight();
 		},
 		computed: {
-			statusBarHeight() {
-				return this.$store.state.statusBarHeight;
-			},
-			topbarOffsetHeight() {
-				return this.$store.state.topbarOffsetHeight;
-			},
 			userInfo(){
-				return this.$store.state.userInfo||JSON.parse(uni.getStorageSync('userInfo'))
+				return JSON.parse(localStorage('userInfo'));
 			}
 		},
 		methods:{
 			back(){
-				uni.navigateBack({
-					delta:1
-				})
-			},
-			/**
-			 * 计算scroll高度
-			 */
-			computedScollviewHeight() {
-				let query = uni.createSelectorQuery().in(this);
-				let heightLeaf =0;
-				query.select('#topnav').boundingClientRect(data => {
-					this.topNavHeight=data.height;
-					heightLeaf += data.height;
-				}).exec(() => {
-					let sysInfo = uni.getSystemInfoSync();
-					this.scrollHeight = sysInfo.windowHeight - heightLeaf;
-				});
-			
+				this.$router.back()
 			},
 			chooseMedia(){
 				const that=this;
-				uni.chooseMedia({
-					count: 1,
-				    mediaType: ['video'],
-				    sourceType: ['album', 'camera'],
-				    maxDuration: 30,
-				    camera: 'back',
-				    success:(res)=>{
-						console.log(res.tempFiles[0]);
-						uni.showLoading({
-							title:'正在上传',
-							mask:true
-						})
-						const policyText=getPolicy();
-						const policy=encode(JSON.stringify(policyText));
-						const key=getKey(0,res.tempFiles[0].tempFilePath.split('.')[1]);
-						that.$api.public.aliossToken({}).then(resuslt=>{
-							let formData={
-								key:key,
-								policy:policy,
-								OSSAccessKeyId:resuslt.data.accessKeyId,
-								signature:computeSignature(resuslt.data.accessKeySecret,policy),
-								'x-oss-security-token':resuslt.data.securityToken,
-								success_action_status:'200'
-							}
-							uni.uploadFile({
-								url: 'https://zhenyanapp-gen.oss-cn-qingdao.aliyuncs.com',
-								filePath:res.tempFiles[0].tempFilePath,
-								name: 'file',
-								header:{
-									"Content-Type": "multipart/form-data"
-								},
-								formData: formData,
-								success: (data) => {
-								    if (data.statusCode === 200) {
-									  let videoUrl=`${that.$store.state.videoCdn}/${key}`;
-									  let user=JSON.parse(uni.getStorageSync('user'));
-									  that.options.height=res.tempFiles[0].height;
-									  that.options.width=res.tempFiles[0].width;
-									  that.options.completeUser=user;
-									  that.options.pageHomeUserId=user.id;
-									  that.options.sizeMB=res.tempFiles[0].size/1024/1024;
-									  that.options.personalPageHomeVideoUrl=videoUrl;
-									  that.options.vdoTime=res.tempFiles[0].duration;
-									  that.$api.public.videoProcess(that.options).then(res=>{
-										  uni.hideLoading()
-										  if(res.status==='Succ'){
-											  
-											  uni.showToast({
-											  	icon:'success',
-												title:'上传成功'
-											  });
-											  setTimeout(()=>{
-												  uni.navigateBack({
-												  	delta:1
-												  })
-											  },1500)
-										  }
-										  else{
-											 uni.showToast({
-											 	icon:'none',
-											 	title:'上传失败，请重试！'
-											 }); 
-										  }
-									  })
-								    }
-								},
-								fail: err => {
-								    console.log(err);
-								  }
-							})
+				this.$refs.videofile.click();
+			},
+			uploadVdo(e){
+				let files=e.target.files,obj={},arr=[];
+				if(files && files[0]) {
+				    const file = files[0],that=this;
+					console.log(file)
+					this.ext=`.${file.name.split('.')[1]}`;
+					this.$toast.loading({
+					  message: '上传中',
+					  forbidClick: true,
+					  duration:0
+					});
+					this.$api.public.aliossToken({}).then(result=>{
+						const client=new this.$oss({
+							region: 'oss-cn-qingdao',
+							accessKeyId: result.data.accessKeyId,
+							accessKeySecret: result.data.accessKeySecret,
+							stsToken: result.data.securityToken,
+							bucket: 'zhenyanapp-gen',
+							refreshSTSToken: async () => {
+								const {data: res} = await this.$api.public.aliossToken({})
+								return {
+									accessKeyId: res.data.accessKeyId, // 自己账户的accessKeyId或临时秘钥
+									accessKeySecret: res.data.accessKeySecret, // 自己账户的accessKeySecret或临时秘钥
+									stsToken: res.data.securityToken, //  从STS服务获取的安全令牌（SecurityToken）。
+								}
+							},
+							refreshSTSTokenInterval: 3600 * 1000
+						});
+						let key=getKey(this.ext);
+						client.put(key,file).then(succ=>{
+							console.log(succ);
+							let videoUrl=`${localStorage.getItem('videoCdn')}/${key}`,options={};
+							let user=JSON.parse(localStorage.getItem('user'));
+							var videoObj = document.createElement("video");
+							videoObj.onloadedmetadata =  (evt)=>{
+								URL.revokeObjectURL(videoUrl);
+								console.log(videoObj.videoHeight,videoObj.videoWidth,videoObj.duration);
+								// 执行上传的方法，获取外网路径，上传进度等
+								options.height=videoObj.videoHeight;
+								options.width=videoObj.videoWidth;
+								options.completeUser=user;
+								options.pageHomeUserId=user.id;
+								options.sizeMB=file.size/1024/1024;
+								options.personalPageHomeVideoUrl=videoUrl;
+								options.vdoTime=videoObj.duration;
+								options.personalPageHomeVideoOperateEnum='UPLOAD'
+								this.$api.public.videoProcess(options).then(res=>{
+									if(res.status==='Succ'){
+										this.$toast('上传成功！');
+										this.$router.back();
+									}
+									else{
+										this.$toast('上传失败，请重试！');
+									}
+								})
+								this.$toast.clear();
+							};
+							videoObj.src = videoUrl;
+							videoObj.load();
+							
+						}).catch(err=>{
+							this.$toast('上传失败，请重试！');
 						})
-					}
-				})
+					})
+				}
 			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
+@import "../../public.scss";
 .container{
 	width: 100vw;
 	height: 100vh;
@@ -164,36 +137,37 @@
 	overflow: hidden;
 	position: relative;
 	.topnav {
-		padding: 0 10rpx;
+		padding: 0 5px;
 		position: fixed;
+		height: 60px;
 		top: 0;
 		left: 0;
 		width: 100vw;
 		z-index: 100;
 		background-color: $bgcolor1;
 		.nav-item{
-			width: 40rpx;
-			height: 40rpx;
-			margin-left: 16rpx;
+			width: 20px;
+			height: 20px;
+			padding: 10px;
 			
 			.nav-img{
-				width: 40rpx;
-				height: 40rpx;
+				width: 20px;
+				height: 20px;
 			}
 		}
 		.nav-text{
 			flex: 1;
 			color: $fontcolor5;
-			height: 40rpx;
+			height: 20px;
 			text-align: center;
 		}
 	}
 	.upload-box{
 		flex-direction: column;
-		width: 360rpx;
-		height: 360rpx;
+		width: 180px;
+		height: 180px;
 		background: #1F1A30;
-		border-radius: 16rpx;
+		border-radius: 8px;
 		position: absolute;
 		left: 0;
 		right: 0;
@@ -201,17 +175,22 @@
 		bottom: 0;
 		margin: auto;
 		.upload-img{
-			width: 80rpx;
-			height: 80rpx;
+			width: 40px;
+			height: 40px;
 		}
 		.upload-text{
 			color: #ffffff;
-			margin-top: 8rpx;
+			margin-top: 4px;
+		}
+		.file{
+			position: fixed;
+			top: -1000px;
+			left: -2000px;
 		}
 	}
 	.tip{
 		color: #7D7DA4;
-		margin-top: 40rpxs;
+		margin-top: 20px;
 	}
 }
 </style>

src/views/info/editCenter.vue

@@ -435,43 +435,6 @@
 					this.nickname=res.data.nick;
 				}).catch(err=>{})
 			},
-			confirm(e) {
-				this.tempFilePath = ''
-				this.cropFilePath = e.detail.tempFilePath;
-				const that=this;
-				const policyText=getPolicy();
-				const policy=encode(JSON.stringify(policyText));
-				const key=getKey(0,this.cropFilePath.split('.')[1]);
-				that.$api.public.aliossToken({}).then(resuslt=>{
-					let formData={
-						key:key,
-						policy:policy,
-						OSSAccessKeyId:resuslt.data.accessKeyId,
-						signature:computeSignature(resuslt.data.accessKeySecret,policy),
-						'x-oss-security-token':resuslt.data.securityToken,
-						success_action_status:'200'
-					}
-					uni.uploadFile({
-						url: 'https://zhenyanapp-gen.oss-cn-qingdao.aliyuncs.com',
-						filePath:this.cropFilePath,
-						name: 'file',
-						header:{
-							"Content-Type": "multipart/form-data"
-						},
-						formData: formData,
-						success: (data) => {
-						    if (data.statusCode === 200) {
-							  that.icon=`${that.$store.state.imageCdn}/${key}`;
-							  that.saveOptions.icon=`${that.$store.state.imageCdn}/${key}`;
-						    }
-						},
-						fail: err => {
-						    console.log(err);
-						  }
-					})
-				})
-				
-			},
 			cancel() {
 				console.log('canceled')
 			},

src/views/login/login.vue

@@ -1,6 +1,22 @@
 <template>
 	<div class="container">
-		<video :src="`${assetsUrl}login_bg${parseInt(Math.random()*6)+1}.mp4`" class="l-video" autoplay loop :controls="false" muted :enable-progress-gesture="false"></video>
+		<video 
+		ref="myvideo"
+		:src="`${assetsUrl}login_bg${parseInt(Math.random()*6)+1}.mp4`" 
+		class="l-video" 
+		autoplay 
+		loop 
+		:controls="false" 
+		muted 
+		webkit-playsinline="true"
+		playsinline="true"
+		x-webkit-airplay="allow"
+		x5-playsinline
+		:enable-progress-gesture="false"
+		@pause="onVideoPause"
+		>
+			
+		</video>
 		<img class="lv-logo" :src="`${assetsUrl}login-sugar.png`"/>
 		<img class="lv-phone" :src="`${assetsUrl}login-btn.png`" @click="toPhoneLogin"/>
 		<div class="lv-pro">
@@ -20,6 +36,9 @@
 		mounted() {
 		},
 		methods: {
+			onVideoPause(){//解决切换页面视频自动暂停
+				this.$refs.myvideo.play();
+			},
 			toPhoneLogin(){
 				this.$router.push('loginByPhone');
 			},
@@ -44,6 +63,8 @@
 		width: 100vw;
 		height: 100vh;
 		object-fit: cover;
+		position: fixed;
+		z-index: 1;
 	}
 	.lv-logo{
 		position: absolute;

src/views/login/loginByCode.vue

@@ -67,8 +67,8 @@
 							localStorage.setItem('userInfo',JSON.stringify(res.data));
 							localStorage.setItem('user',JSON.stringify(res.data.userToken.user));
 							this.$api.public.aliossCdn({}).then(cdnRes=>{
-								this.$store.commit('setImageCdn',cdnRes.data.pictureCdn);
-								this.$store.commit('setVideoCdn',cdnRes.data.videoCdn);
+								localStorage.setItem('imageCdn',cdnRes.data.pictureCdn);
+								localStorage.setItem('videoCdn',cdnRes.data.videoCdn);
 							})
 							if(res.data.isNew){
 								this.$router.replace({name:'sex'})

src/views/mine/album.vue

@@ -1,150 +1,166 @@
 <template>
 	<div class="container">
-		<div id="topnav" class="topnav flex-start" :style="{'height':`${topbarOffsetHeight-statusBarHeight}px`,'padding-top':`${statusBarHeight}px`,'background-color':`rgba(21, 17, 38,${topNavAlpha})`}" v-if="!cover.isFullScreen">
+		<div id="topnav" class="topnav flex-start">
 			<div class="nav-item flex-center" @click="back">
-				<image :src="`${assetsUrl}back.png`" mode="widthFix" class="nav-img"></image>
+				<img :src="`${assetsUrl}back.png`" mode="widthFix" class="nav-img"></img>
 			</div>
 			<div class="nav-text font32 fw600">
 				{{pageName}}
 			</div>
 			<div class="nav-item"></div>
 		</div>
-		<uni-popup ref="modalPopup" type="center">
-			<Popup :content1="popup.content1" :content2="popup.content2" :tip1="popup.tip1" :tip2="popup.tip2" :btntext="popup.btntext" @closePopup="closePopup" @toService="toService" :btnEvent="'toService'"></Popup>
-		</uni-popup>
-		<uni-popup ref="popup" type="bottom" @maskClick="popupMaskClick">
+		<van-popup ref="videoPopup" position="center" v-model="showVideoPopup">
+			<video :src="previewVideoUrl" class="big-vdo" autoplay="autoplay" muted="muted" loop="loop"></video>
+			<img :src="`${assetsUrl}album-delete.png`" class="popup-close" @click="showVideoPopup=false">
+		</van-popup>
+		<van-popup ref="popup" position="bottom" v-model="showPopup">
 			<div class="popup" @touchmove.prevent>
 				<div class="p-title-box flex-between">
 					<div class="p-title font36 fw600">
 						上传相册
 					</div>
-					<image :src="`${assetsUrl}info-figure-close.png`" mode="aspectFill" class="p-close" @click="closePopup"></image>
+					<img :src="`${assetsUrl}info-figure-close.png`" mode="aspectFill" class="p-close" @click="closePopup"></img>
 				</div>
 				<div class="p-title-tip font28 fw400">
 					上传清晰本人照片更容易交到好友哦
 				</div>
 				<div class="p-img-box flex-between">
 					<div class="p-img">
-						<image :src="`${assetsUrl}info-figure-img1.png`" mode="aspectFill" class="img"></image>
+						<img :src="`${assetsUrl}info-figure-img1.png`" mode="aspectFill" class="img"></img>
 						<div class="p-text font22 fw400">
 							五官清晰
 						</div>
 					</div>
 					<div class="p-img">
-						<image :src="`${assetsUrl}info-figure-img2.png`" mode="aspectFill" class="img"></image>
+						<img :src="`${assetsUrl}info-figure-img2.png`" mode="aspectFill" class="img"></img>
 						<div class="p-text font22 fw400">
 							半身照
 						</div>
 					</div>
 					<div class="p-img">
-						<image :src="`${assetsUrl}info-figure-img3.png`" mode="aspectFill" class="img"></image>
+						<img :src="`${assetsUrl}info-figure-img3.png`" mode="aspectFill" class="img"></img>
 						<div class="p-text font22 fw400">
 							风景和人
 						</div>
 					</div>
 				</div>
-				<div style="height: 60rpx;">
-					
+				<div style="height: 60px;position: relative;">
+					<input type="file" class="file" accept="image/png,image/jpg,image/jpeg" @change="uploadImg">
+					<div class="btn font32 fw600" @click="sure">
+						从相册上传
+					</div>
 				</div>
 			</div>
 			
-		</uni-popup>
-		<uni-popup ref="authPopup" type="bottom" @maskClick="authPopupMaskClick">
+		</van-popup>
+		<van-popup ref="authPopup" position="bottom" v-model="showAuthPopup">
 			<div class="auth-popup" @touchmove.prevent>
 				<div class="ap-title">
 					请上传本人正面清晰照片
 				</div>
 				<div class="ap-imgs flex-start">
 					<div class="ap-img-box">
-						<image :src="`${assetsUrl}auth-ap1.png`" mode="aspectFill" class="ap-img"></image>
+						<img :src="`${assetsUrl}auth-ap1.png`" mode="aspectFill" class="ap-img"></img>
 						<div class="ap-alpha flex-center">
-							<image :src="`${assetsUrl}auth-right.png`" mode="aspectFill" class="ap-right"></image>
+							<img :src="`${assetsUrl}auth-right.png`" mode="aspectFill" class="ap-right"></img>
 							<div class="ap-text font30 fw400">
 								清晰正脸
 							</div>
 						</div>
 					</div>
 					<div class="ap-img-box">
-						<image :src="`${assetsUrl}auth-ap2.png`" mode="aspectFill" class="ap-img"></image>
+						<img :src="`${assetsUrl}auth-ap2.png`" mode="aspectFill" class="ap-img"></img>
 						<div class="ap-alpha flex-center">
-							<image :src="`${assetsUrl}auth-right.png`" mode="aspectFill" class="ap-right"></image>
+							<img :src="`${assetsUrl}auth-right.png`" mode="aspectFill" class="ap-right"></img>
 							<div class="ap-text font30 fw400">
 								全身/半身
 							</div>
 						</div>
 					</div>
 					<div class="ap-img-box">
-						<image :src="`${assetsUrl}auth-ap3.png`" mode="aspectFill" class="ap-img"></image>
+						<img :src="`${assetsUrl}auth-ap3.png`" mode="aspectFill" class="ap-img"></img>
 						<div class="ap-alpha flex-center">
-							<image :src="`${assetsUrl}auth-right.png`" mode="aspectFill" class="ap-right"></image>
+							<img :src="`${assetsUrl}auth-right.png`" mode="aspectFill" class="ap-right"></img>
 							<div class="ap-text font30 fw400">
 								记得微笑
 							</div>
 						</div>
 					</div>
 					<div class="ap-img-box">
-						<image :src="`${assetsUrl}auth-ap4.png`" mode="aspectFill" class="ap-img"></image>
+						<img :src="`${assetsUrl}auth-ap4.png`" mode="aspectFill" class="ap-img"></img>
 						<div class="ap-alpha flex-center">
-							<image :src="`${assetsUrl}auth-right.png`" mode="aspectFill" class="ap-right"></image>
+							<img :src="`${assetsUrl}auth-right.png`" mode="aspectFill" class="ap-right"></img>
 							<div class="ap-text font30 fw400">
 								光线合适
 							</div>
 						</div>
 					</div>
 				</div>
-				<div style="height: 60rpx;">
-					
+				<div style="height: 60px;position: relative;">
+					<input type="file" class="file" accept="image/png,image/jpg,image/jpeg,video/mp4" @change="uploadImg">
+					<div class="btn font32 fw600" @click="sure">
+						从相册上传
+					</div>
 				</div>
 			</div>
 			
-		</uni-popup>
-		<scroll-div
-		scroll-y="true" 
-		:style="{'height': `${scrollHeight}px`,'padding-top':`${topNavHeight}px`}"
-		v-if="scrollHeight>0"
-		lower-threshold="200"
-		refresher-enabled="true"
-		:refresher-triggered="scrollTriggered"
-		:refresher-threshold="45" 
-		refresher-default-style="white"
-		refresher-background="#151126" 
-		@refresherrefresh="scrollRefresh" 
-		@refresherpulling="scrollPulling"
-		@refresherrestore="scrollRestore" 
-		@refresherabort="scrollAbort"
-		@scrolltolower="scrollToBottom"
-		class="scroll-div"
-		>
-			<drag-image :list="albumData" :number="1000" :custom="true" @addImage="toAddImg" @sortImage="sortImg" @delImage="deleteImg" :chooseImage="isChooseImage" @chooseEvent="chooseImageHandle"></drag-image>
-		</scroll-div>
-		<div class="btn-tip font24 fw400" v-if="!isChooseImage">
-			长按可拖动调整图片顺序
+		</van-popup>
+		<div class="list flex-start">
+			
+			<draggable v-model="albumData" ghost-class="ghost" animation="300" :move="onmove" draggable=".move-item">
+					<div class="move-item flex-center" @click="toAddImg" slot="header">
+						<van-image
+						  width="108"
+						  height="108"
+						  fit="cover"
+						  :src="`${assetsUrl}album-add.png`"
+						  style="background-color: #151126;"/>
+						</van-image>
+					</div>
+					<div class="move-item mover" v-for="(item, index) in albumData"  :key="index">
+						<van-image
+						  width="108"
+						  height="108"
+						  radius="10"
+						  fit="cover"
+						  :src="item.url"
+						  v-if="item.cate==='Img'"
+						  @click="previewImg(item.url)"/>
+						<video :src="item.url" autoplay="autoplay" muted="muted" loop="loop" @click="previewVdo(item.url)" v-else class="vdo"></video>
+						<div class="img-delete flex-center" @click="deleteImg(index)">
+						    <img class="del-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAhdEVYdENyZWF0aW9uIFRpbWUAMjAyMDowNzoyNSAyMTo1NDoyOU4TkJAAAADcSURBVFhH7ZfRCoMwDEXLvkjwwVf/bH/emmAyN6glTW9WBjsgwm28OeCLpj81Sil7zvlJ90UiONS/yY5VogsO6XrBg3IEQ5a/s8vRSWUAKmLqp2w5jz5BiNQEGMo3GbloDLtFXJ1IkaEuhAiiY6gEIqB4yqACSk9piIBiKQ8VUFpLviKg3C2rESKgWERCBZSWiEfgIfffYvrrsAgoISJ3Apy3zuTxcSxLQkV6ykNEPKVQkZEyiAiiZKgDIaC4upACSlcn5fM/+WuDCAHF1E/Z/N9AhkMZnPNDPI+UDjPIXgAQIGjNAAAAAElFTkSuQmCC"/>
+						</div>
+					</div>
+			</draggable>
+		</div>
+		<div class="btn-tip font24 fw400">
+			可拖动调整图片顺序
 		</div>
 		<div class="btn font32 fw600" @click="sure">
-			{{btnText}}
+			去认证
 		</div>
 	</div>
 </template>
 
 <script>
+	import draggable from "vuedraggable"
 	import TabBar from '@/components/TabBar/TabBar.vue';
+	import {assetsUrl} from '../../util/index.js';
 	import Popup from '@/components/Popup/Popup.vue';
 	import wxMap from '@/static/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js';
-	import DragImage from '@/components/DragImage/DragImage.vue';
 	import {getPolicy,computeSignature,getKey} from '@/util/oss.js';
 	import {encode} from '@/util/base64.js'
+	import { ImagePreview } from 'vant';
 	/**
 	 * 腾讯位置服务，手机账号：18996226740
 	 */
 	const wxMapSdk=new wxMap({key:'E5SBZ-T2YC3-CBL3F-YGFQQ-26PP2-ERFII'})
 	export default {
-		components:{TabBar,Popup,DragImage},
+		components:{TabBar,Popup,draggable},
 		data() {
 			return {
-				btnText:'去认证',
 				pageName:'编辑相册',
-				isChooseImage:false,//是否为选择图片模式
-				assetsUrl:this.$util.assetsUrl,
+				assetsUrl,
 				scrollHeight:0,
 				topNavHeight:0,
 				scrollRefreshing:false,
@@ -163,247 +179,128 @@
 					tip2:'',
 					btntext:''
 				},
+				
+				showPopup:false,
+				showAuthPopup:false,
+				showVideoPopup:false,
+				previewVideoUrl:''
 			};
 		},
-		computed: {
-			statusBarHeight() {
-				return this.$store.state.statusBarHeight;
-			},
-			topbarOffsetHeight() {
-				return this.$store.state.topbarOffsetHeight;
-			},
-			imageCdn(){
-				return this.$store.state.imageCdn;
-			},
-			videoCdn(){
-				return this.$store.state.videoCdn;
-			}
-		},
-		onLoad(options) {
-			if(options.type==='auth'){
-				this.isChooseImage=true;
-				this.btnText='前往认证';
-				this.pageName='选择照片';
-			}else{
-				this.isChooseImage=false;
-			}
-			this.computedScolldivHeight()
-			this.getAlbumData();
-		},
 		mounted() {
-			
-			
-		},
-		onPageScroll(e) {
-			
+			this.getAlbumData();
 		},
 		methods:{
 			back(){
-				uni.navigateBack({
-					delta:1
-				})
+				this.$router.back();
 			},
-			chooseImageHandle(data){
-				this.authChooseImages=data;
+			closePopup(){
+				this.showPopup=false;
+				this.showAuthPopup=false;
 			},
-			toAddImg(){
-				this.btnText='从相册上传';
-				if(this.isChooseImage){
-					this.$refs.authPopup.open();
-				}
-				else{
-					this.$refs.popup.open();
+			onmove(){
+				console.log(this.albumData[0].url);
+				let ids=[];
+				for(let i=0;i<this.albumData.length;i++){
+					ids.push(this.albumData[i].mediaId);
 				}
-				
-			},
-			popupMaskClick(){
-				this.btnText=this.isChooseImage?'前往认证':'去认证';
-			},
-			authPopupMaskClick(){
-				this.btnText=this.isChooseImage?'前往认证':'去认证';
+				this.sortImg(ids);
 			},
-			closePopup(){
-				this.$refs.popup.close();
-				this.$refs.modalPopup.close();
-				this.$refs.authPopup.close();
-				this.btnText=this.isChooseImage?'前往认证':'去认证';
+			toAddImg(){
+				this.showPopup=true;
 			},
 			sortImg(ids){
-				let user=JSON.parse(uni.getStorageSync('user'));
+				let user=JSON.parse(localStorage.getItem('user'));
 				this.$api.public.albumSort({
 					completeUser:user,
 					mediaIdsInSeq:ids
 				}).then(res=>{})
-			},
-			toService(){
-				this.$refs.popup.close();
-				uni.openCustomerServiceChat({
-				     extInfo:{
-				         url:'https://work.weixin.qq.com/kfid/kfca1b21d2f7e8a18e9',//客服链接
-				     },
-				     corpId:'wwa8f2a0d8a6dc0950',//企业ID
-				     fail(res){
-						 console.log(res)
-				         wx.showToast({
-				           title: '客服联系失败',
-				           icon:'none'
-				         })
-				     }
-				 })
-			},
-			/**
-			 * 计算scroll高度
-			 */
-			computedScolldivHeight() {
-				let query = uni.createSelectorQuery().in(this);
-				let heightLeaf =0;
-				query.select('#topnav').boundingClientRect(data => {
-					this.topNavHeight=data.height;
-					heightLeaf += data.height;
-				}).exec(() => {
-					let sysInfo = uni.getSystemInfoSync();
-					this.scrollHeight = sysInfo.windowHeight - heightLeaf;
-				});
-			
-			},
-			/**
-			 * 推荐下拉刷新、加载更多
-			 */
-			scrollRefresh(){
-				if (this.scrollRefreshing) 
-				{
-					return;
-				}
-				this.scrollRefreshing = true;
-				setTimeout(() => {
-					this.scrollTriggered = false;
-					this.scrollRefreshing = false;
-				}, 1000)
-				this.getAlbumData();
-			},
-			scrollPulling(e) {},
-			scrollRestore() {this.scrollTriggered = true;},
-			scrollAbort() {},
-			scrollToBottom(){
-
 			},
 			getAlbumData(){
-				let user=JSON.parse(uni.getStorageSync('user'));
+				let user=JSON.parse(localStorage.getItem('user'));
 				this.$api.public.album({uurd:user.id}).then(res=>{
 					for(let i=0;i<res.data.dms.length;i++){
 						res.data.dms[i].isMove=false;
 					}
-					let arr=[];
-					if(this.isChooseImage){
-						for(let i=0;i<res.data.dms.length;i++){
-							if(res.data.dms[i].cate==='Img'){
-								arr.push(res.data.dms[i])
-							}
-						}
-						this.albumData=arr;
-					
-					}
-					else{
-						this.albumData=res.data.dms;
-					}
+					this.albumData=res.data.dms;
 					
 				})
 			},
+			previewImg(url){
+				ImagePreview([url])
+			},
+			previewVdo(url){
+				this.previewVideoUrl=url;
+				this.showVideoPopup=true;
+			},
 			deleteImg(index){
-				this.$api.public.albumDelete({mediaId:this.albumData[index].mediaId}).then(res=>{})
+				this.$api.public.albumDelete({mediaId:this.albumData[index].mediaId}).then(res=>{
+					this.albumData.splice(index,1);
+				})
 			},
 			sure(){
-				if(this.btnText==='从相册上传'){
-					
-					this.addImg();
-				}
-				else{
-					this.popup={
-						content1:'进行认证流程需给客服回复关键词',
-						content2:'「真人认证」',
-						tip1:'',
-						tip2:'',
-						btntext:'联系客服去认证'
-					}
-					this.$refs.modalPopup.open();
-				}
+				this.$router.push({name:'chooseImage'});
 			},
-			
-			async addImg(){
-				const that=this;
-				this.closePopup();
-				
-				uni.chooseMedia({
-				  count: 9,
-				  mediaType: this.isChooseImage?['image']:['image','video'],
-				  sourceType: ['album', 'camera'],
-				  maxDuration: 30,
-				  camera: 'back',
-				  success(res) {
-					uni.showLoading({
-						mask:true,
-						title:"正在上传···"
-					})
-						let arr=[],obj={},imageCdn='',videoCdn='';
-						
-						
-						for(let i=0;i<res.tempFiles.length;i++){
-							obj={
-								cate:res.tempFiles[i].fileType==='image'?'Img':'Vdo',
-								cdt:'General',
-								env:'Album',
-								url:null
+			uploadImg(e){
+				let files=e.target.files,obj={},arr=[];
+				if(files && files[0]) {
+				    const file = files[0],that=this;
+					this.ext=`.${file.name.split('.')[1]}`;
+					this.$toast.loading({
+					  message: '上传中',
+					  forbidClick: true,
+					  duration:0
+					});
+					this.$api.public.aliossToken({}).then(result=>{
+						const client=new this.$oss({
+							region: 'oss-cn-qingdao',
+							accessKeyId: result.data.accessKeyId,
+							accessKeySecret: result.data.accessKeySecret,
+							stsToken: result.data.securityToken,
+							bucket: 'zhenyanapp-gen',
+							refreshSTSToken: async () => {
+								const {data: res} = await this.$api.public.aliossToken({})
+								return {
+									accessKeyId: res.data.accessKeyId, // 自己账户的accessKeyId或临时秘钥
+									accessKeySecret: res.data.accessKeySecret, // 自己账户的accessKeySecret或临时秘钥
+									stsToken: res.data.securityToken, //  从STS服务获取的安全令牌（SecurityToken）。
+								}
+							},
+							refreshSTSTokenInterval: 3600 * 1000
+						});
+						let key=getKey(this.ext);
+						obj={
+							cate:this.ext==='.mp4'?'Vdo':'Img',
+							cdt:'General',
+							env:'Album',
+							url:null
+						}
+						client.put(key,file).then(succ=>{
+							console.log(succ)
+							if(this.ext==='.png'||this.ext==='.jpg'){
+							    let link=`${localStorage.getItem('imageCdn')}/${key}`;
+							    obj.url=link;
+							}
+							else if(this.ext==='.mp4'){
+								let link=`${localStorage.getItem('videoCdn')}/${key}`;
+								obj.url=link;
+							}
+							else{
+								this.$toast('只支持上传jpg/png/mp4格式文件');
+								return;
 							}
-							const policyText=getPolicy();
-							const policy=encode(JSON.stringify(policyText));
-							const key=getKey(i,res.tempFiles[i].tempFilePath.split('.')[1]);
-							that.$api.public.aliossToken({}).then(resuslt=>{
-								let formData={
-									key:key,
-									policy:policy,
-									OSSAccessKeyId:resuslt.data.accessKeyId,
-									signature:computeSignature(resuslt.data.accessKeySecret,policy),
-									'x-oss-security-token':resuslt.data.securityToken,
-									success_action_status:'200'
+							arr.push(obj);
+							that.$api.public.albumAdd({addMediaParamList:arr}).then(mapResult=>{
+								if(mapResult.status==='Succ'){
+									that.getAlbumData();
+									uni.hideLoading();
 								}
-								uni.uploadFile({
-									url: 'https://zhenyanapp-gen.oss-cn-qingdao.aliyuncs.com',
-									filePath: res.tempFiles[i].tempFilePath,
-									name: 'file',
-									header:{
-										"Content-Type": "multipart/form-data"
-									},
-									formData: formData,
-									success: (data) => {
-									    if (data.statusCode === 200) {
-										  if(obj.cate==='Img'){
-											  let link=`${that.imageCdn}/${key}`;
-											  obj.url=link;
-										  }
-										  else if(obj.cate==='Vdo'){
-											  let link=`${that.videoCdn}/${key}`;
-											  obj.url=link;
-										  }
-										  arr.push(obj);
-										  if(arr.length===res.tempFiles.length){
-											    that.$api.public.albumAdd({addMediaParamList:arr}).then(mapResult=>{
-													if(mapResult.status==='Succ'){
-														that.getAlbumData();
-														uni.hideLoading();
-													}
-											    })
-										  }
-									    }
-									},
-									fail: err => {
-									    console.log(err);
-									  }
-								})
 							})
-							
-						}
-				  }
-				})
+							this.$toast.clear();
+							this.showPopup=false;
+						})
+					})
+				}
+				
 			},
 		}
 			
@@ -411,60 +308,76 @@
 </script>
 
 <style lang="scss" scoped>
+@import "../../public.scss";
 .container{
 	width: 100vw;
 	height: 100vh;
 	background-color: $bgcolor1;
 	position: relative;
+	overflow: auto;
 	.topnav {
-		padding: 0 10rpx;
+		padding: 0 5px;
 		position: fixed;
 		top: 0;
 		left: 0;
 		width: 100vw;
+		height:60px;
 		z-index: 100;
-		backdrop-filter: blur(10px);
 		.nav-item {
-			width: 40rpx;
-			height: 40rpx;
-			margin-left: 16rpx;
+			width: 20px;
+			height: 20px;
+			padding:10px;
 			.nav-img{
-				width: 40rpx;
-				height: 40rpx;
+				width: 20px;
+				height: 20px;
 			}
 			
 		}
 		.nav-text{
 			flex: 1;
 			color: $fontcolor5;
-			height: 40rpx;
+			height: 20px;
 			text-align: center;
 		}
 	}
+	.big-vdo{
+		width:90vw;
+		height:90vh;
+		object-fit:cover;
+		overflow:hidden
+	}
+	.popup-close{
+		width: 32px;
+		height: 32px;
+		position: absolute;
+		right: 10px;
+		top:10px;
+		z-index: 999;
+	}
 	.popup{
 		width: 100vw;
 		box-sizing: border-box;
-		padding: 56rpx 60rpx;
+		padding: 28px 30px;
 		background-color: $bgcolor3;
 		.p-title-box{
 			.p-title{
 				color: $fontcolor5;
 			}
 			.p-close{
-				width: 40rpx;
-				height: 40rpx;
+				width: 20px;
+				height: 20px;
 			}
 		}
 		.p-title-tip{
 			color: $fontcolor3;
-			margin-top: 16rpx;
+			margin-top: 8px;
 		}
 		.p-img-box{
-			margin-top: 80rpx;
+			margin-top: 40px;
 			.p-img{
 				.img{
-					width: 200rpx;
-					height: 200rpx;
+					width: 100px;
+					height: 100px;
 				}
 				.p-text{
 					color: $fontcolor2;
@@ -475,39 +388,39 @@
 	}
 	.auth-popup{
 		background-color: bgcolor1;
-		border-radius: 40rpx 40rpx 0rpx 0rpx;
+		border-radius: 20px 20px 0px 0px;
 		.ap-title{
 			color: #ffffff;
 			text-align: center;
 		}
 		.ap-imgs{
 			flex-wrap: wrap;
-			margin: 80rpx 64rpx 50rpx 64rpx;
+			margin: 40px 32px 25px 32px;
 			.ap-img-box{
-				width: 306rpx;
-				height: 306rpx;
-				border-radius: 8rpx;
+				width: 153px;
+				height: 153px;
+				border-radius: 4px;
 				overflow: hidden;
-				margin-right: 10rpx;
-				margin-bottom: 10rpx;
+				margin-right: 5px;
+				margin-bottom: 5px;
 				position: relative;
 				&:nth-of-type(2n){
-					margin-right: 0rpx;
+					margin-right: 0px;
 				}
 				.ap-img{
-					width: 306rpx;
-					height: 306rpx;
+					width: 153px;
+					height: 153px;
 				}
 				.ap-alpha{
 					position: absolute;
-					width: 306rpx;
-					height: 80rpx;
+					width: 153px;
+					height: 40px;
 					bottom: 0;
 					left: 0;
 					background: rgba(0,0,0,0.3);
 					.ap-right{
-						width: 48rpx;
-						height: 48rpx;
+						width: 24px;
+						height: 24px;
 					}
 					.ap-text{
 						color: #ffffff;
@@ -516,42 +429,47 @@
 			}
 		}
 	}
-	.scroll-div{
+	.list{
 		position: relative;
-		padding: 0rpx 30rpx;
+		padding: 0px 10px;
 		box-sizing: border-box;
-		.move-area{
-			position: absolute;
-			left: 0;
-			top: 0;
-			width: 100%;
-			flex-wrap: wrap;
-			align-items: flex-start !important;
-			.img-box{
-				width: 216rpx;
-				height: 216rpx;
-				border-radius: 8rpx;
-				position: relative;
-				z-index: 1;
-				margin-right: 19rpx;
-				margin-top: 20rpx;
-				&:nth-of-type(3n){
-					margin-right: 0rpx;
-				}
-				.img-add{
-					width: 216rpx;
-					height: 216rpx;
-					border-radius: 8rpx;
-				}
-				.img-delete{
-					position: absolute;
-					right: 16rpx;
-					top: 16rpx;
-					width: 40rpx;
-					height: 40rpx;
+		padding-top: 60px;
+		flex-wrap: wrap;
+		.move-item{
+			width: 108px;
+			height: 108px;
+			border-radius: 4px; 	
+			position: relative;
+			z-index: 1;
+			margin: 10px 5px 0px;
+			overflow: hidden;
+			display: inline-block;
+			// &:nth-of-type(3n){
+			// 	margin-right: 0px;
+			// }
+			.img-add{
+				width: 108px;
+				height: 108px;
+				border-radius: 4px;
+			}
+			.img-delete{
+				position: absolute;
+				right: 8px;
+				top: 8px;
+				width: 20px;
+				height: 20px;
+				background-color: rgba(0,0,0,0.3);
+				border-radius: 15px;
+				.del-image{
+					width: 12px;
+					height:12px;
 				}
 			}
-			
+			.vdo{
+				width: 108px;
+				height: 108px;
+				object-fit: cover;
+			}
 		}
 	}
 	.btn-tip{
@@ -559,28 +477,41 @@
 		z-index: 999;
 		left: 0;
 		right: 0;
-		bottom: 160rpx;
+		bottom: 80px;
 		margin: auto;
-		width: 630rpx;
-		height: 50rpx;
+		width: 315px;
+		height: 25px;
 		color: #9A9ABF;
 		text-align: center;
-		line-height: 50rpx;
+		line-height: 25px;
+	}
+	.file{
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		z-index: 1000;
+		height: 52px;
+		top: 15px;
+		opacity: 0;
 	}
 	.btn{
 		position: fixed;
 		z-index: 999;
 		left: 0;
 		right: 0;
-		bottom: 44rpx;
+		bottom: 22px;
 		margin: auto;
-		width: 630rpx;
-		height: 104rpx;
-		border-radius: 52rpx;
+		width: 315px;
+		height: 52px;
+		border-radius: 26px;
 		background-color: $primary;
 		color: $fontcolor5;
 		text-align: center;
-		line-height: 104rpx;
+		line-height: 52px;
 	}
 }
+.ghost{
+	opacity: 0;
+}
 </style>

src/views/mine/authReady.vue

@@ -0,0 +1,339 @@
+<template>
+	<div class="container">
+		<div id="topnav" class="topnav flex-start">
+			<div class="nav-item flex-center" @click="back">
+				<img :src="`${assetsUrl}back.png`" mode="widthFix" class="nav-img"></img>
+			</div>
+			<div class="nav-text font32 fw600">
+				{{pageName}}
+			</div>
+			<div class="nav-item font28"></div>
+		</div>
+		<div class="title font44 fw600" style="padding-top: 88px;">
+			即将开始面容识别
+		</div>
+		<div class="title font44 fw600" style="margin-top: 4px;">
+			请做好如下准备
+		</div>
+		<div class="notice-box">
+			<div class="notice-item">
+				<img :src="`${assetsUrl}auth-notice1.png`" class="notice-img">
+				<div class="notice-text">
+					光线明亮
+				</div>
+			</div>
+			<div class="notice-item">
+				<img :src="`${assetsUrl}auth-notice2.png`" class="notice-img">
+				<div class="notice-text">
+					正脸摘帽
+				</div>
+			</div>
+			<div class="notice-item">
+				<img :src="`${assetsUrl}auth-notice3.png`" class="notice-img">
+				<div class="notice-text">
+					衣着整洁
+				</div>
+			</div>
+		</div>
+		<div class="tips-box">
+			<div class="tip-title">
+				<img :src="`${assetsUrl}auth-light.png`" class="tt-img">
+				<div class="tt-text">温馨提示</div>
+			</div>
+			<div class="tip-content">
+				1. 请在光线明亮处拍摄正面，拍摄时请勿
+			</div>
+			<div class="tip-content">
+				2. 请拍摄较佳的面容，若面容形象较差，将会被禁止使用本平台！
+			</div>
+		</div>
+		<div class="ar-btn" @click="ready">
+			准备好了
+		</div>
+		<div class="ar-tip">
+			我们承诺将妥善保管您的面容未经您的授权不会另做他用
+		</div>
+	</div>
+</template>
+
+<script>
+	import {getBiztoken,getFaceResult} from '@/util/faceAuth.js';
+	import topBar from "@/components/TopBar/TopBar.vue";
+	import {isMobile,isIphoneX,isSafari,toDecimal2} from '@/util/index.js';
+	import {assetsUrl} from '../../util/index.js';
+	export default {
+	    name: "authReady",
+		components:{topBar},
+	    data() {
+			return{
+				pageName:'',
+				assetsUrl,
+				title:'认证准备',
+				pageType:''
+				
+			}
+		},
+		created() {
+			let authReadyType=localStorage.getItem('authReadyType'),isAuthed=localStorage.getItem('isAuthed');
+			if(location.href.indexOf('result_id')!==-1&&isAuthed==='false'){//获取活体检测结果
+				if(authReadyType==='authFace'){
+					this.getAuthResult();
+					localStorage.setItem('isAuthed','true')
+				}
+				else if(authReadyType==='changeFace'){
+					this.getChangeFaceResult();
+					localStorage.setItem('isAuthed','true')
+				}
+			}
+			
+			
+			
+		},
+		mounted() {
+			
+		},
+		methods:{
+			back(){
+				if(localStorage.getItem('isAuthed')==='true'){
+					this.$router.go(-2)
+				}
+				else{
+					this.$router.go(-1);
+				}
+				
+			},
+			ready(){
+				getBiztoken(`${window.location.origin}/authReady`).then(result=>{
+					localStorage.setItem('isAuthed','false');
+					window.location.href=result;
+				}).catch(err=>{
+					console.log(err)
+				});
+			},
+			getChangeFaceResult(){
+				let locationHref=location.href;
+				let str=locationHref.substr(locationHref.indexOf("?")+1);
+				let arr=str.split("&");
+				let bizToken="",resultId="";
+				for(let i=0;i<arr.length;i++){
+					let name=arr[i].substring(0,arr[i].indexOf("="));
+					let value=arr[i].substr(arr[i].indexOf("=")+1);
+					if(name==='biztoken'){
+						bizToken=value;
+					}
+					if(name==='result_id'){
+						resultId=value;
+					}
+				}
+				if(bizToken!==''&&resultId!==''){
+					this.$toast.loading({
+						message: '加载中...',
+						forbidClick: true,
+						duration:0
+					});
+					getFaceResult(bizToken,resultId).then(result=>{
+						if(result.passed===true){//识别通过
+							this.$api.faceAuth.upload({//上传base64到oss
+								originalFilename:result.request_id+'.jpg',
+								faceImagStr:result.base64_liveness_face_image
+							}).then(media=>{
+								this.$api.faceAuth.realManChange({
+									imgUrl:media.data
+								}).then(fares=>{
+									if(fares.data.succ){
+										this.$toast.success({
+											message: '提交成功',
+											forbidClick: true,
+											duration:0
+										});
+										this.$router.push({name:'authResult'})
+									}else{
+										this.$toast.clear();
+										this.$dialog.alert({
+											  message: fares.data.msg
+										});
+									}
+								})
+							})
+					
+						}else{//识别失败
+							this.$toast.clear();
+							this.$dialog.alert({
+								  message: result,
+							});
+						}
+					});
+				}
+			},
+			getAuthResult(){
+				let locationHref=location.href;
+				let str=locationHref.substr(locationHref.indexOf("?")+1);
+				let arr=str.split("&");
+				let bizToken="",resultId="";
+				for(let i=0;i<arr.length;i++){
+					let name=arr[i].substring(0,arr[i].indexOf("="));
+					let value=arr[i].substr(arr[i].indexOf("=")+1);
+					if(name==='biztoken'){
+						bizToken=value;
+					}
+					if(name==='result_id'){
+						resultId=value;
+					}
+				}
+				if(bizToken!==''&&resultId!==''){
+					this.$toast.loading({
+						message: '加载中...',
+						forbidClick: true,
+						duration:0
+					});
+					getFaceResult(bizToken,resultId).then(result=>{
+						if(result.passed===true){//识别通过
+							this.$api.faceAuth.upload({//上传base64到oss
+								originalFilename:result.request_id+'.jpg',
+								faceImagStr:result.base64_liveness_face_image
+							}).then(media=>{
+								let user=JSON.parse(localStorage.getItem('user'));
+								this.$api.faceAuth.realManMedia({
+									completeUser:user,
+									imgUrl:media.data,
+									mediaIds:localStorage.getItem('chooseAlbumIds').split(',')
+								}).then(realManRes=>{
+									if(realManRes.data.succ){
+										this.$toast.success({
+											message: '提交成功',
+											forbidClick: true,
+											duration:0
+										});
+										this.$router.push({name:'authResult'})
+									}
+									else{
+										this.$toast.clear();
+										this.$dialog.alert({
+											  message: realManRes.data.msg
+										});
+									}
+								})
+							})
+					
+						}else{//识别失败
+							this.$toast.clear();
+							this.$dialog.alert({
+								  message: result,
+							});
+						}
+					});
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.container{
+	width: 100vw;
+	height: 100vh;
+	background-color: #151126;
+	position: relative;
+	overflow: hidden;
+	z-index: 10;
+	.title{
+		color: #ffffff;
+		margin: 0 32px;
+	}
+	.topnav {
+		padding: 0 5px;
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height:60px;
+		z-index: 100;
+		.nav-item {
+			width:40px;
+			height: 40px;
+			padding:10px;
+			line-height: 40px;
+			color: #ffffff;
+			text-align: center;
+			.nav-img{
+				width: 20px;
+				height: 20px;
+			}
+			
+		}
+		.nav-text{
+			flex: 1;
+			color: #ffffff;
+			height: 20px;
+			text-align: center;
+		}
+	}
+	.notice-box{
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin: 0 32px;
+		margin-top: 60px;
+		.notice-item{
+			width: 76px;
+			.notice-img{
+				width: 76px;
+				height: 76px;
+			}
+			.notice-text{
+				margin-top: 12px;
+				color: #9A9ABF;
+				font-size: 14px;
+				text-align: center;
+			}
+		}
+	}
+	.tips-box{
+		margin: 0 32px;
+		background-color: #332D4C;
+		border-radius: 8px;
+		padding: 14px 16px;
+		margin-top:120px;
+		.tip-title{
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+			margin-bottom: 8px;
+			.tt-img{
+				width: 12px;
+				height: 12px;
+			}
+			.tt-text{
+				color: #9A9ABF;
+				font-size: 12px;
+				margin-left: 2px;
+			}
+		}
+		.tip-content{
+			color: #0ABDEF;
+			font-size: 12px;
+		}
+	}
+	.ar-btn{
+		width: 311px;
+		height: 52px;
+		background: #6C52F4;
+		border-radius: 28px;
+		line-height: 52px;
+		text-align: center;
+		font-size: 16px;
+		color: #ffffff;
+		font-weight: bold;
+		margin: 0 32px;
+		margin-top: 15px;
+	}
+	.ar-tip{
+		font-size: 11px;
+		font-weight: 400;
+		color: #7D7DA4;
+		margin-top: 12px;
+		text-align: center;
+	}
+}
+
+</style>

src/views/mine/chooseImage.vue

@@ -0,0 +1,464 @@
+<template>
+	<div class="container flex-start">
+		<div id="topnav" class="topnav flex-start">
+			<div class="nav-item flex-center" @click="back">
+				<img :src="`${assetsUrl}back.png`" mode="widthFix" class="nav-img"></img>
+			</div>
+			<div class="nav-text font32 fw600">
+				{{pageName}}
+			</div>
+			<div class="nav-item font28" @click="cancelChoose">重选</div>
+		</div>
+		<van-popup ref="authPopup"  position="bottom" v-model="showAuthPopup">
+			<div class="auth-popup" @touchmove.prevent>
+				<div class="ap-title">
+					请上传本人正面清晰照片
+				</div>
+				<div class="ap-imgs flex-start">
+					<div class="ap-img-box">
+						<img :src="`${assetsUrl}auth-ap1.png`" mode="aspectFill" class="ap-img"></img>
+						<div class="ap-alpha flex-center">
+							<img :src="`${assetsUrl}auth-right.png`" mode="aspectFill" class="ap-right"></img>
+							<div class="ap-text font30 fw400">
+								清晰正脸
+							</div>
+						</div>
+					</div>
+					<div class="ap-img-box">
+						<img :src="`${assetsUrl}auth-ap2.png`" mode="aspectFill" class="ap-img"></img>
+						<div class="ap-alpha flex-center">
+							<img :src="`${assetsUrl}auth-right.png`" mode="aspectFill" class="ap-right"></img>
+							<div class="ap-text font30 fw400">
+								全身/半身
+							</div>
+						</div>
+					</div>
+					<div class="ap-img-box">
+						<img :src="`${assetsUrl}auth-ap3.png`" mode="aspectFill" class="ap-img"></img>
+						<div class="ap-alpha flex-center">
+							<img :src="`${assetsUrl}auth-right.png`" mode="aspectFill" class="ap-right"></img>
+							<div class="ap-text font30 fw400">
+								记得微笑
+							</div>
+						</div>
+					</div>
+					<div class="ap-img-box">
+						<img :src="`${assetsUrl}auth-ap4.png`" mode="aspectFill" class="ap-img"></img>
+						<div class="ap-alpha flex-center">
+							<img :src="`${assetsUrl}auth-right.png`" mode="aspectFill" class="ap-right"></img>
+							<div class="ap-text font30 fw400">
+								光线合适
+							</div>
+						</div>
+					</div>
+				</div>
+				<div style="height: 60px;position: relative;">
+					<input ref="file" type="file" class="file" accept="image/png,image/jpg" @change="uploadImg">
+					<div class="btn font32 fw600" @click="addImg">
+						从相册上传
+					</div>
+				</div>
+			</div>
+			
+		</van-popup>
+		<div class="list flex-start">
+			<div class="move-item flex-center" @click="toAddImg" slot="header">
+				<van-image
+				  width="108"
+				  height="108"
+				  fit="cover"
+				  :src="`${assetsUrl}album-add.png`"
+				  style="background-color: #151126;"/>
+				</van-image>
+			</div>
+			<div class="move-item mover" v-for="(item, index) in albumData"  :key="index" @click="chooseImage(index)">
+				<van-image
+				  width="108"
+				  height="108"
+				  radius="10"
+				  fit="cover"
+				  :src="item.url"/>
+				</van-image>
+				<div class="choose" :style="{'background':`${item.choosed?'#FE3B49':'rgba(0,0,0,0.5)'}`}">
+					{{item.chooseNum||''}}
+				</div>
+			</div>
+		</div>
+		<!-- <div class="tip font22 fw400" style="margin-top: 20px;">
+			请选择正面清晰且美颜痕迹不重的本人照片
+		</div>
+		<div class="tip font22 fw400">
+			这样更容易通过认证哦~
+		</div> -->
+		<div class="btn font32 fw600" @click="sureChoose">
+			前往认证
+		</div>
+	</div>
+</template>
+
+<script>
+	import draggable from "vuedraggable"
+	import TabBar from '@/components/TabBar/TabBar.vue';
+	import {assetsUrl} from '../../util/index.js';
+	import Popup from '@/components/Popup/Popup.vue';
+	import wxMap from '@/static/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js';
+	import {getPolicy,computeSignature,getKey} from '@/util/oss.js';
+	import {encode} from '@/util/base64.js'
+	/**
+	 * 腾讯位置服务，手机账号：18996226740
+	 */
+	const wxMapSdk=new wxMap({key:'E5SBZ-T2YC3-CBL3F-YGFQQ-26PP2-ERFII'})
+	export default {
+		components:{TabBar,Popup,draggable},
+		data() {
+			return {
+				pageName:'选择照片',
+				assetsUrl,
+				scrollHeight:0,
+				topNavHeight:0,
+				scrollRefreshing:false,
+				scrollTriggered:true,
+				showNoData:false,
+				albumData:[],
+				authChooseImages:[],
+				moveItemAlbum:{},
+				moveItemIndex:null,
+				currentIndex:0,
+				isSort:false,
+				popup:{
+					content1:'',
+					content2:'',
+					tip1:'',
+					tip2:'',
+					btntext:''
+				},
+				showAuthPopup:false,
+				chooseAlbumIds:[]
+			};
+		},
+		mounted() {
+			this.getAlbumData();
+			localStorage.setItem('authReadyType','authFace');
+		},
+		methods:{
+			back(){
+				this.$router.back();
+			},
+			closePopup(){
+				this.showAuthPopup=false;
+			},
+			onmove(){
+				console.log(this.albumData[0].url);
+				let ids=[];
+				for(let i=0;i<this.albumData.length;i++){
+					ids.push(this.albumData[i].mediaId);
+				}
+				this.sortImg(ids);
+			},
+			toAddImg(){
+				this.showAuthPopup=true;
+			},
+			addImg(){
+				this.$refs.file.click();
+			},
+			sortImg(ids){
+				let user=JSON.parse(localStorage.getItem('user'));
+				this.$api.public.albumSort({
+					completeUser:user,
+					mediaIdsInSeq:ids
+				}).then(res=>{})
+			},
+			getAlbumData(){
+				let user=JSON.parse(localStorage.getItem('user'));
+				let arr=[];
+				this.$api.public.album({uurd:user.id}).then(res=>{
+					for(let i=0;i<res.data.dms.length;i++){
+						res.data.dms[i].choosed=false;
+						if(res.data.dms[i].cate==='Img'&&res.data.dms[i].authStatus!=='Succ'){
+							arr.push(res.data.dms[i])
+						}
+					}
+					this.albumData=arr;
+					
+				})
+			},
+			chooseImage(index){
+				this.$nextTick(()=>{
+					this.albumData[index].choosed=!this.albumData[index].choosed;
+					let arr=[],chooseNum=1;
+					for(let i=0;i<this.albumData.length;i++){
+						if(this.albumData[i].choosed){
+							this.albumData[i].chooseNum=chooseNum;
+							chooseNum++;
+							arr.push(this.albumData[i].mediaId)
+						}
+						else{
+							this.albumData[i].chooseNum=''
+						}
+					}
+					this.chooseAlbumIds=arr;	
+				})	
+			},
+			cancelChoose(){
+				for(let i=0;i<this.albumData.length;i++){
+					this.albumData[i].choosed=false;
+					this.albumData[i].chooseNum='';
+					this.chooseAlbumIds=[];
+				}
+			},
+			sureChoose(){
+				if(this.chooseAlbumIds.length===0){
+					this.$toast('未选择照片！');
+					return;
+				}
+				localStorage.setItem('chooseAlbumIds',this.chooseAlbumIds);
+				this.$router.push({name:'authReady'});
+			},
+			uploadImg(e){
+				let files=e.target.files,obj={},arr=[];
+				if(files && files[0]) {
+				    const file = files[0],that=this;
+					this.ext=`.${file.name.split('.')[1]}`;
+					this.$toast.loading({
+					  message: '上传中',
+					  forbidClick: true,
+					  duration:0
+					});
+					this.$api.public.aliossToken({}).then(result=>{
+						const client=new this.$oss({
+							region: 'oss-cn-qingdao',
+							accessKeyId: result.data.accessKeyId,
+							accessKeySecret: result.data.accessKeySecret,
+							stsToken: result.data.securityToken,
+							bucket: 'zhenyanapp-gen',
+							refreshSTSToken: async () => {
+								const {data: res} = await this.$api.public.aliossToken({})
+								return {
+									accessKeyId: res.data.accessKeyId, // 自己账户的accessKeyId或临时秘钥
+									accessKeySecret: res.data.accessKeySecret, // 自己账户的accessKeySecret或临时秘钥
+									stsToken: res.data.securityToken, //  从STS服务获取的安全令牌（SecurityToken）。
+								}
+							},
+							refreshSTSTokenInterval: 3600 * 1000
+						});
+						let key=getKey(this.ext);
+						obj={
+							cate:this.ext==='.mp4'?'Vdo':'Img',
+							cdt:'General',
+							env:'Album',
+							url:null
+						}
+						client.put(key,file).then(succ=>{
+							console.log(succ)
+							if(this.ext==='.png'||this.ext==='.jpg'){
+							    let link=`${localStorage.getItem('imageCdn')}/${key}`;
+							    obj.url=link;
+							}
+							else if(this.ext==='.mp4'){
+								let link=`${localStorage.getItem('videoCdn')}/${key}`;
+								obj.url=link;
+							}
+							else{
+								this.$toast('只支持上传jpg/png/mp4格式文件');
+								return;
+							}
+							arr.push(obj);
+							that.$api.public.albumAdd({addMediaParamList:arr}).then(mapResult=>{
+								if(mapResult.status==='Succ'){
+									that.getAlbumData();
+									uni.hideLoading();
+								}
+							})
+							this.$toast.clear();
+							this.showAuthPopup=false;
+						})
+					})
+				}
+				
+			},
+		}
+			
+	}
+</script>
+
+<style lang="scss" scoped>
+@import "../../public.scss";
+.container{
+	width: 100vw;
+	height: 100vh;
+	background-color: $bgcolor1;
+	position: relative;
+	overflow: auto;
+	flex-direction: column;
+	.topnav {
+		padding: 0 5px;
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height:60px;
+		z-index: 100;
+		.nav-item {
+			width:40px;
+			height: 40px;
+			padding:10px;
+			line-height: 40px;
+			color: #ffffff;
+			text-align: center;
+			.nav-img{
+				width: 20px;
+				height: 20px;
+			}
+			
+		}
+		.nav-text{
+			flex: 1;
+			color: $fontcolor5;
+			height: 20px;
+			text-align: center;
+		}
+	}
+	.auth-popup{
+		background-color: $bgcolor1;
+		overflow: hidden;
+		.ap-title{
+			color: #ffffff;
+			text-align: center;
+			padding-top: 20px;
+		}
+		.ap-imgs{
+			flex-wrap: wrap;
+			margin: 20px 32px 25px 32px;
+			.ap-img-box{
+				width: 153px;
+				height: 153px;
+				border-radius: 4px;
+				overflow: hidden;
+				margin-right: 5px;
+				margin-bottom: 5px;
+				position: relative;
+				&:nth-of-type(2n){
+					margin-right: 0px;
+				}
+				.ap-img{
+					width: 153px;
+					height: 153px;
+				}
+				.ap-alpha{
+					position: absolute;
+					width: 153px;
+					height: 40px;
+					bottom: 0;
+					left: 0;
+					background: rgba(0,0,0,0.3);
+					.ap-right{
+						width: 24px;
+						height: 24px;
+					}
+					.ap-text{
+						color: #ffffff;
+					}
+				}
+			}
+		}
+	}
+	.list{
+		position: relative;
+		padding: 0px 10px;
+		box-sizing: border-box;
+		padding-top: 60px;
+		flex-wrap: wrap;
+		.move-item{
+			width: 108px;
+			height: 108px;
+			border-radius: 4px; 	
+			position: relative;
+			z-index: 1;
+			margin: 10px 5px 0px;
+			overflow: hidden;
+			display: inline-block;
+			// &:nth-of-type(3n){
+			// 	margin-right: 0px;
+			// }
+			.img-add{
+				width: 108px;
+				height: 108px;
+				border-radius: 4px;
+			}
+			.img-delete{
+				position: absolute;
+				right: 8px;
+				top: 8px;
+				width: 20px;
+				height: 20px;
+				background-color: rgba(0,0,0,0.3);
+				border-radius: 15px;
+				.del-image{
+					width: 12px;
+					height:12px;
+				}
+			}
+			.choose{
+				position: absolute;
+				width: 20px;
+				height: 20px;
+				border-radius: 20px;
+				border: 1px solid #FFFFFF;
+				right: 4px;
+				top: 4px;
+				font-size:10px;
+				line-height: 20px;
+				text-align: center;
+				color: #ffffff;
+			}
+		}
+	}
+	.tip{
+		color: #7D7DA4;
+		width: 100%;
+		text-align: center;
+		
+	}
+	.btn-tip{
+		position: fixed;
+		z-index: 999;
+		left: 0;
+		right: 0;
+		bottom: 80px;
+		margin: auto;
+		width: 315px;
+		height: 25px;
+		color: #9A9ABF;
+		text-align: center;
+		line-height: 25px;
+	}
+	.file{
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		z-index: 1000;
+		height: 52px;
+		top: 15px;
+		opacity: 0;
+	}
+	.btn{
+		position: fixed;
+		z-index: 999;
+		left: 0;
+		right: 0;
+		bottom: 22px;
+		margin: auto;
+		width: 315px;
+		height: 52px;
+		border-radius: 26px;
+		background-color: $primary;
+		color: $fontcolor5;
+		text-align: center;
+		line-height: 52px;
+	}
+}
+.ghost{
+	opacity: 0;
+}
+</style>

src/views/mine/guest.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="container">
+	<div class="container" ref="scrolllist" @scroll.passive="scrollEvent">
 		<div id="topnav" class="topnav flex-between" >
 			<div class="nav-item flex-center" @click="back">
 				<img :src="`${assetsUrl}back.png`" mode="widthFix" class="nav-img"></img>
@@ -9,9 +9,10 @@
 			</div>
 			<div class="nav-item"></div>
 		</div>
-		<div class="list">
+		<div class="list" >
 			<div class="list-item flex-start" v-for="(item,index) in listData" :key="index" @click="toDetail(item.id)" >
 				<div class="list-head-box">
+					<div class="list-head-img-drop" v-if="userInfo.sex==='Male'&&!userInfo.vip||userInfo.sex==='Famale'&&!userInfo.realMan"></div>
 					<img :src="item.iconThumbnail" mode="aspectFill" class="list-head-img"></img>
 					<div class="list-head-dot" style="background-color: #38E825;" v-if="item.lastActiveTime<=30"></div>
 					<div class="list-head-dot" style="background-color: #0ABDEF;" v-else-if="item.lastActiveTime>30&&item.lastActiveTime<=1440"></div>
@@ -19,7 +20,11 @@
 				<div class="list-info-box">
 					<div class="name-box flex-between">
 						<div class="name flex-start">
-							<div class="name-text font28 fw600">
+							
+							<div class="name-text font28 fw600" v-if="userInfo.sex==='Male'&&!userInfo.vip||userInfo.sex==='Famale'&&!userInfo.realMan">
+								- - - - 
+							</div>
+							<div class="name-text font28 fw600" v-else>
 								{{item.nick}}
 							</div>
 							<img :src="`${assetsUrl}friends-vip.png`" mode="aspectFill" class="name-img" v-if="item.vip"></img>
@@ -36,12 +41,10 @@
 							{{item.ageInfo.age}}
 						</div>
 					</div>
-					<div class="tip-box font28 fw400 el" v-if="item.desc">
+					<div class="tip-box font28 fw400 el">
 						签名：{{item.desc}}
 					</div>
-					<div class="tip-box font28 fw400 el" v-else>
-						签名：暂无介绍
-					</div>
+
 				</div>
 				<div class="img-box flex-between" v-if="item.lastNews">
 					<img :src="item.lastNews.mediaUrls[0]" mode="aspectFill" class="ib1"></img>
@@ -81,6 +84,8 @@
 				scrollTotal:0,
 				showNoData:false,
 				user:null,
+				isLoad:false
+				
 				
 			};
 		},
@@ -91,11 +96,15 @@
 			longitude(){
 				return this.$store.state.longitude;
 			},
+			userInfo(){
+				return localStorage.getItem('userInfo');
+			}
 		},
 		mounted() {
 			this.pageType=this.$route.params.pagetype;
 			this.pageName=this.$route.params.name;
 			this.getGuestData();
+			
 		},
 		activated() {
 			this.pageType=this.$route.params.pagetype;
@@ -106,6 +115,18 @@
 			back(){
 				this.$router.back();
 			},
+			scrollEvent() {
+				let scrollHeight = event.target.scrollHeight;
+				let scrollTop = event.target.scrollTop;
+				let clientHeight = event.target.clientHeight;
+				let scrollBottom = scrollHeight - scrollTop - clientHeight;
+				if(scrollBottom<50&&!this.isLoad){
+					console.log('到底了')
+					this.getOptions.index++;
+					this.isLoad=true;
+					this.getGuestData();
+				}
+			},
 			getGuestData(){
 				let user=JSON.parse(localStorage.getItem('user'));
 				this.$api.public.guestor({
@@ -118,17 +139,34 @@
 					},
 					uponUserId:user.id
 				}).then(res=>{
-					if(res.data.users&&res.data.users.length===0){this.showNoData=true;}
+					
 					if(this.getOptions.index>1){
 						this.listData=[...this.listData,...res.data.users];
 					}
 					else{
 						this.listData=res.data.users;
 					}
+					if(this.listData&&this.listData.length===0){this.showNoData=true;}
 					this.scrollTotal=res.data.page.recordCount;
 					let arr=[],obj={latitude:0,longitude:0};
 					for(let i=0;i<this.listData.length;i++){
 						this.listData[i].lastActiveTime=this.$moment(new Date()).diff(this.listData[i].lastActive,'minutes');
+						if(this.listData[i].desc){
+							if(this.userInfo.sex==='Male'){
+								if(!this.userInfo.vip){
+									this.listData[i].desc='- - - -'
+								}
+							}
+							if(this.userInfo.sex==='Famale'){
+								if(!this.userInfo.realMan){
+									this.listData[i].desc='- - - -'
+								}
+							}
+						}
+						else{
+							this.listData[i].desc='暂无介绍';
+						}
+						
 						obj={latitude:0,longitude:0};
 						obj.latitude=this.listData[i].geo.lat;
 						obj.longitude=this.listData[i].geo.lon;
@@ -146,12 +184,12 @@
 								for(let j=0;j<dists.result.elements.length;j++){
 									this.listData[j].distance=(dists.result.elements[j].distance>1000?`${Math.floor(dists.result.elements[j].distance/100)/10}km`:`${dists.result.elements[j].distance}m`)
 								}
-								console.log(this.listData)
 							}
 						},fail:err=>{
 							console.log(err)
 						}
 					});
+					this.isLoad=false;
 				})
 			},
 			toDetail(id){
@@ -240,11 +278,22 @@
 			width: 68px;
 			height: 68px;
 			position: relative;
+			.list-head-img-drop{
+				backdrop-filter: blur(10px);
+				position: absolute;
+				left: 0;
+				top:0;
+				width: 68px;
+				height: 68px;
+				background-color: rgba(255, 255, 255, 0.1);
+				border-radius: 68px;
+			}
 			.list-head-img{
 				width: 68px;
 				height: 68px;
 				background-color: #ffffff;
 				border-radius: 68px;
+				
 			}
 			.list-head-dot{
 				width: 12px;

src/views/mine/mine.vue

@@ -7,6 +7,10 @@
 		<van-popup ref="vippopup" v-model="showVipPopup" type="center">
 			<VipPopup :swiperIndex="vipPopupIndex" @closePopup="closeVipPopup"></VipPopup>
 		</van-popup>
+		<van-popup ref="videoPopup" position="center" v-model="showVideoPopup">
+			<video :src="previewVideoUrl" class="big-vdo" autoplay="autoplay" muted="muted" loop="loop"></video>
+			<img :src="`${assetsUrl}album-delete.png`" class="popup-close" @click="showVideoPopup=false">
+		</van-popup>
 		<div id="topnav" class="topnav flex-start" :style="{'background-color':`rgba(21, 17, 38,${topNavAlpha})`}" v-if="!cover.isFullScreen">
 			<!-- <div class="nav-item">
 				<img :src="`${assetsUrl}mine-home.png`" mode="widthFix" class="nav-img"></img>
@@ -101,7 +105,7 @@
 						
 					</div>
 				</div>
-				<div class="vip-box flex-between" @click="toVip" v-if="userInfo.sex==='Male'">
+				<div class="vip-box flex-between" @click="toVip" v-if="userInfo.sex!=='Male'">
 					<div class="vip-left flex-start">
 						<img :src="`${assetsUrl}mine-vip.png`"  class="vip-img"></img>
 						<div class="vl-box flex-center">
@@ -148,14 +152,13 @@
 						  </template>
 						</van-image>
 						<video :src="currentPic.url" class="big-pic" 
-							autoplay 
-							loop 
+							autoplay="autoplay" 
+							loop="loop"
 							:controls="false" 
-							muted 
-							object-fit="fill" 
+							muted="muted"
 							v-if="currentPic.cate==='Vdo'"  
 							:style="{'height':`${currentPic.height}px`}"
-							@click="prediv">
+							@click="previewVdo(currentPic.url)">
 						</video>
 						<div  class="pics-list flex-start" v-if="pics.length>1">
 							<div class="pic-item flex-center"  v-for="(item,index) in pics" :key="index" @click="picItemClick(index)">
@@ -212,9 +215,9 @@
 					{name:'我看过的',num:0,dotnum:0,params:{pagetype:'MyVisit'},name:'我看过的'},
 				],
 				cards:[
-					// {title:'邀请好友',tip:'领取vip时长',bgImg:'mine-gift.png',class:"card1",path:"/pages/webdiv/webdiv?url=https://promote.sugarpark.cn"},
-					{title:'认证中心',tip:'提升人气秘密',bgImg:'mine-star.png',class:"card2",path:'/pages/auth/auth'},
-					{title:'我的钱包',tip:'充糖果、看收益',bgImg:'mine-money.png',class:"card3",path:'/pages/wallet/wallet'}
+					// {title:'邀请好友',tip:'领取vip时长',bgImg:'mine-gift.png',class:"card1",path:"https://promote.sugarpark.cn"},
+					{title:'认证中心',tip:'提升人气秘密',bgImg:'mine-star.png',class:"card2",path:'chooseImage'},
+					{title:'我的钱包',tip:'充糖果、看收益',bgImg:'mine-money.png',class:"card3",path:'walletHome'}
 				],
 				currentPic:null,
 				currentIndex:0,
@@ -234,19 +237,15 @@
 				showPopup:false,
 				showVipPopup:false,
 				showPayPopup:false,
+				showVideoPopup:false,
 				vipPopupIndex:-1,
 				onshowIsNot:false,
 				showVideo:true,
+				previewVideoUrl:''
 				
 			};
 		},
 		computed: {
-			statusBarHeight() {
-				return this.$store.state.statusBarHeight;
-			},
-			topbarOffsetHeight() {
-				return this.$store.state.topbarOffsetHeight;
-			},
 			platform(){
 				return this.$store.state.platform;
 			},
@@ -259,6 +258,11 @@
 			this.getMineDetail();
 			this.getPkgVideo();
 		},
+		activated() {
+			this.getMineData();
+			this.getMineDetail();
+			this.getPkgVideo();
+		},
 		methods:{
 			closePopup(){
 				
@@ -271,20 +275,37 @@
 				this.$refs.vippopup.close();
 			},
 			toEditVideo(){
-				
+				this.$router.push({name:'faceVideo'});
 			},
 			toSetting(){
-				
+				this.$router.push({name:'setting'});
 			},
 			toService(){
-				
+				window.location.href=`sugarpark://${encodeURIComponent('https://work.weixin.qq.com/kfid/kfca1b21d2f7e8a18e9')}`;
+			},
+			previewVdo(url){
+				this.previewVideoUrl=url;
+				this.showVideoPopup=true;
+			},
+			toCardsPath(path){
+				// if(path.indexOf('https')>-1){
+				// 	this.$dialog.confirm({
+				// 		title:'提示',
+				// 		message:'查看我的钱包请下载糖果公园APP',
+				// 		confirmButtonText:'前往下载',
+				// 		confirmButtonColor:'#6C52F4',
+				// 	}).then(()=>{
+				// 		window.location.href=`sugarpark://${encodeURIComponent('https://h5.sugarpark.cn/1/1.html')}`;
+				// 	})
+				// 	return;
+				// }
+				this.$router.push({name:path});
 			},
-
 			handleScroll(e){
 				this.topNavAlpha=e.detail.scrollTop/250;
 			},
 			toAlbum(){
-				
+				this.$router.push({name:'album'});
 			},
 			prediv(){
 				let arr=[];
@@ -320,6 +341,7 @@
 				this.$router.push({name:'editCenter'})
 			},
 			toVip(){
+				this.$router.push({name:'vip'})
 			},
 			touchStart(e){
 				this.startTime = Date.now()
@@ -474,6 +496,21 @@
 			background-color: rgba(0, 0, 0, 0.5);
 		}
 	}
+	.big-vdo{
+		width:95vw;
+		height:95vh;
+		object-fit:cover;
+		overflow:hidden;
+		background-color: $bgcolor1;
+	}
+	.popup-close{
+		width: 32px;
+		height: 32px;
+		position: absolute;
+		right: 10px;
+		top:10px;
+		z-index: 999;
+	}
 	.video-box{
 		width: 100vw;
 		transition: all 0.3s;
@@ -705,8 +742,9 @@
 				}
 				.big-pic{
 					width: 100%;
-					height:250px;
+					height:500px;
 					border-radius: 20px;
+					object-fit: cover;
 				}
 				.pics-list{
 					width: 100%;

src/views/setting/setting.vue

@@ -1,142 +1,113 @@
 <template>
-	<view class="container">
-		<view id="topnav" class="topnav flex-between"  :style="{'height':`${topbarOffsetHeight-statusBarHeight}px`,'padding-top':`${statusBarHeight}px`}">
-			<view class="nav-item flex-center" @click="back">
-				<image :src="`${assetsUrl}back.png`" mode="widthFix" class="nav-img"></image>
-			</view>
-			<view class="nav-text font32 fw600">
+	<div class="container">
+		<div id="topnav" class="topnav flex-between">
+			<div class="nav-item flex-center" @click="back">
+				<img :src="`${assetsUrl}back.png`" mode="widthFix" class="nav-img"></img>
+			</div>
+			<div class="nav-text font32 fw600">
 				{{topbarTitle}}
-			</view>
-			<view class="nav-item"></view>
-		</view>
-		<view class="setting-box flex-between" :style="{'margin-top':`${topNavHeight+15}px`}">
-			<view class="setting-item flex-between" @click="loginOut">
-				<view class="setting-text font28 fw600">
+			</div>
+			<div class="nav-item"></div>
+		</div>
+		<div class="setting-box flex-between">
+			<div class="setting-item flex-between" @click="loginOut">
+				<div class="setting-text font28 fw600">
 					退出登录
-				</view>
-				<image :src="`${assetsUrl}setting-more.png`" mode="widthFix" class="setting-icon"></image>
-			</view>
-		</view>
-	</view>
+				</div>
+				<img :src="`${assetsUrl}setting-more.png`" mode="widthFix" class="setting-icon"></img>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
+	import {assetsUrl} from '../../util/index.js';
 	export default {
 		data() {
 			return {
+				assetsUrl,
 				topbarIcon:'back',
-				topbarTitle:'设置',
-				assetsUrl:this.$util.assetsUrl,
-				topNavHeight:0,
+				topbarTitle:'设置'
 			};
 		},
 		mounted() {
-			this.computedScollviewHeight();
 		},
 		computed: {
-			statusBarHeight() {
-				return this.$store.state.statusBarHeight;
-			},
-			topbarOffsetHeight() {
-				return this.$store.state.topbarOffsetHeight;
-			},
 			userInfo(){
-				return this.$store.state.userInfo||JSON.parse(uni.getStorageSync('userInfo'))
+				return JSON.parse(localStorage.getItem('userInfo'))
 			}
 		},
 		methods:{
 			back(){
-				uni.navigateBack({
-					delta:1
-				})
-			},
-			/**
-			 * 计算scroll高度
-			 */
-			computedScollviewHeight() {
-				let query = uni.createSelectorQuery().in(this);
-				let heightLeaf =0;
-				query.select('#topnav').boundingClientRect(data => {
-					this.topNavHeight=data.height;
-					heightLeaf += data.height;
-				}).exec(() => {
-					let sysInfo = uni.getSystemInfoSync();
-					this.scrollHeight = sysInfo.windowHeight - heightLeaf;
-				});
-			
+				this.$router.back();
 			},
 			loginOut(){
-				uni.showModal({
+				this.$dialog.confirm({
 					title:'退出登录',
-					content:'退出登录后将清除所有本机数据，下次登录自动登录，是否继续？',
-					confirmColor:'#6C52F4',
-					confirmText:'继续',
-					success:(res)=>{
-						if(res.confirm){
-							uni.$TUIKit.logout();
-							uni.$TUIKit.destroy();
-							uni.setStorageSync('token','');
-							uni.setStorageSync('LL_Ukn','');
-							uni.setStorageSync('autoLogin','false');
-							uni.reLaunch({
-								url:'/pages/login/login'
-							})
-						}
-					}
-				})
+					message:'退出登录后将清除所有本机数据，下次登录自动登录，是否继续？',
+				}).then(()=>{
+					this.$TUIKit.logout();
+					this.$TUIKit.destroy();
+					localStorage.setItem('token','');
+					localStorage.setItem('LL_Ukn','');
+					localStorage.setItem('autoLogin','false');
+					this.$router.replace({name:'login'});
+				}).catch(()=>{})
 			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
+@import "../../public.scss";
 .container{
 	width: 100vw;
 	height: 100vh;
 	background-color: $bgcolor1;
 	overflow: hidden;
 	.topnav {
-		padding: 0 10rpx;
+		padding: 0 5px;
 		position: fixed;
+		height: 60px;
 		top: 0;
 		left: 0;
 		width: 100vw;
 		z-index: 100;
 		background-color: $bgcolor1;
 		.nav-item{
-			width: 40rpx;
-			height: 40rpx;
-			margin-left: 16rpx;
+			width: 20px;
+			height: 20px;
+			margin-left: 8px;
 			
 			.nav-img{
-				width: 40rpx;
-				height: 40rpx;
+				width: 20px;
+				height: 20px;
 			}
 		}
 		.nav-text{
 			flex: 1;
 			color: $fontcolor5;
-			height: 40rpx;
+			height: 20px;
 			text-align: center;
 		}
 	}
 	.setting-box{
-		margin: 16rpx;
-		border-radius: 8rpx;
+		margin: 60px 8px 0px 8px;
+		border-radius: 4px;
 		background-color: $bgcolor3;
 		
 		flex-direction: column;
 		.setting-item{
 			width: 100%;
-			height: 112rpx;
-			padding: 0rpx 32rpx;
+			height: 56px;
+			padding: 0px 16px;
 			box-sizing: border-box;
 			.setting-text{
 				color: $fontcolor5;
 			}
 			.setting-icon{
-				width: 24rpx;
-				height: 24rpx;
+				width: 12px;
+				height: 12px;
 			}
 		}
 	}

src/views/test/test.vue

@@ -4,6 +4,8 @@
 		<button @click="getDeviceInfo">DEVICEINFO</button>
 		<button @click="getDeviceToken">DEVICETOKEN</button>
 		<button @click="toShare">share</button>
+		<button @click="toOutLink">toOutLink</button>
+		<button @click="toOutLinkByBrowser">toOutLinkByBrowser</button>
 	</div>
 </template>
 
@@ -58,6 +60,9 @@
 			window.toShareInvoke=(data)=>{
 				this.$toast(JSON.stringify(data));
 			};
+			window.toOutLinkInvoke=(data)=>{
+				this.$toast(JSON.stringify(data));
+			}
 		},
 		methods:{
 			getIDFA(){
@@ -110,6 +115,18 @@
 					},
 					callback:'toShareInvoke'
 				}) 
+			},
+			toOutLink(){
+				window.webkit.messageHandlers.call.postMessage({
+					api:"com.js.urlJump",
+					data:{
+						url:'https://www.baidu.com'
+					},
+					callback:'toOutLinkInvoke'
+				}) 
+			},
+			toOutLinkByBrowser(){
+				window.location.href=`sugarpark://${encodeURIComponent('https://www.sugarpark.cn')}`
 			}
 			
 		}
@@ -119,5 +136,6 @@
 <style lang="scss" scoped>
 	button{
 		margin: 30px;
+		color:#ffffff
 	}
 </style>

src/views/vip/vip.vue

@@ -1,91 +1,95 @@
 <template>
 	<div class="container">
-		<div id="topnav" class="topnav flex-between"  :style="{'height':`${topbarOffsetHeight-statusBarHeight}px`,'padding-top':`${statusBarHeight}px`}">
+		<div id="topnav" class="topnav flex-between">
 			<div class="nav-item flex-center" @click="back">
-				<image :src="`${assetsUrl}back.png`" mode="widthFix" class="nav-img"></image>
+				<img :src="`${assetsUrl}back.png`" mode="widthFix" class="nav-img"></img>
 			</div>
 			<div class="nav-text font32 fw600">
 				{{topbarTitle}}
 			</div>
 			<div class="nav-item"></div>
 		</div>
-		<scroll-div
-		scroll-y="true" 
-		:style="{'height': `${scrollHeight}px`,'padding-top':`${topNavHeight}px`}"
-		v-if="scrollHeight>0"
-		lower-threshold="200"
-		refresher-enabled="true"
-		:refresher-triggered="scrollTriggered"
-		:refresher-threshold="45" 
-		refresher-default-style="white"
-		refresher-background="#151126" 
-		@refresherrefresh="scrollRefresh" 
-		@refresherpulling="scrollPulling"
-		@refresherrestore="scrollRestore" 
-		@refresherabort="scrollAbort"
-		@scrolltolower="scrollToBottom"
-		class="scroll-div"
-		>
-			<div class="top flex-between">
-				<div class="top-left">
-					<div class="user-box flex-start">
-						<image :src="userInfo.iconThumbnail" mode="aspectFit" class="head-img"></image>
-						<div class="user-info flex-center">
-							<div class="name font32 fw600">
-								{{userInfo.nick}}
-							</div>
-							<div class="phone font22 fw400">
-								{{userInfo.phone}}
-							</div>
+		<div class="top flex-between">
+			<div class="top-left">
+				<div class="user-box flex-start">
+					<img :src="userInfo.iconThumbnail" mode="aspectFit" class="head-img"></img>
+					<div class="user-info flex-center">
+						<div class="name font32 fw600">
+							{{userInfo.nick}}
+						</div>
+						<div class="phone font22 fw400">
+							{{userInfo.phone}}
 						</div>
 					</div>
-					<div class="tip font28 fw400">
-						开通会员享更多惊喜特权
-					</div>
 				</div>
-				<image :src="`${assetsUrl}vip-bg.png`" mode="aspectFit" class="top-right"></image>
+				<div class="tip font28 fw400">
+					开通会员享更多惊喜特权
+				</div>
 			</div>
-			<scroll-div scroll-x="true" class="tabs flex-start">
-				<div class="tab" :class="tabIndex===index?'active-tab':'no-active'" v-for="(item,index) in priceDatas.prices2" :key="index" @click="tabClick(index)">
-					<div class="tab-time font28 fw600">
-						{{item.name}}
-					</div>
-					<div class="tab-price">
-						<span style="font-size: 72rpx;">{{item.priceFenPerMonth/100}}</span><span class="font22 fw500">元/月</span>
-					</div>
-					<div class="tab-under font24 fw400">
-						{{item.originalPriceFenPerMonth/100}}元/月
-					</div>
-					<div class="tab-tag font20 fw600" v-if="tabIndex===index">
-						{{item.tags}}
-					</div>
+			<img :src="`${assetsUrl}vip-bg.png`" mode="aspectFit" class="top-right"></img>
+		</div>
+		<div class="tabs">
+			<div class="tab" :class="tabIndex===index?'active-tab':'no-active'" v-for="(item,index) in priceDatas.prices2" :key="index" @click="tabClick(index)">
+				<div class="tab-time font28 fw600">
+					{{item.name}}
 				</div>
-			</scroll-div>
-			<swiper :indicator-dots="false" :disable-touch="true" :vertical="true" :circular="true" :autoplay="true" :interval="2000" :duration="500" class="swiper">
-				<div class="swiper-model" @touchmove.stop="catchTouchMove">
-					<swiper-item class="swiper-item flex-start" v-for="(item,index) in promotions" :key="index" >
-						<div class="item-box flex-start">
-							<image :src="item.headImg" mode="aspectFit" class="item-img"></image>
-							<div class="item-text font24 fw400">
-								{{item.nick}}刚刚开通了会员
-							</div>
-						</div>
-					</swiper-item>
+				<div class="tab-price">
+					<span style="font-size: 36px;">{{item.priceFenPerMonth/100}}</span><span class="font22 fw500">元/月</span>
+				</div>
+				<div class="tab-under font24 fw400">
+					{{item.originalPriceFenPerMonth/100}}元/月
+				</div>
+				<div class="tab-tag fw600" v-if="tabIndex===index">
+					{{item.tags}}
 				</div>
-				
-			</swiper>
-			<div class="prot font22 fw400">
-				成为会员及代表同意<span style="color: #FFDDBD;" @click="toAddedService">《增值服务协议》</span>
 			</div>
-			<image :src="`${assetsUrl}vip-action.png`" mode="widthFix" class="action"></image>
-			<div class="qustion-title font30 fw500">
-				支付遇到问题
+		</div>
+		<div class="paytype-box flex-start">
+			<div class="pb-item flex-between" @click="payType='1'">
+				<div class="pb-left flex-start">
+					<img :src="`${assetsUrl}pay-wechat.png`" class="left-icon">
+					<span class="left-text">微信支付</span>
+				</div>
+				<div class="pb-right">
+					<img :src="`${assetsUrl}${payType==='1'?'pay-choose':'pay-nochoose'}.png`" :class="payType==='1'?'right-icon1':'right-icon'">
+				</div>
 			</div>
-			<div class="qustions font24 fw400">
-				1.如果支付成功，但是没有开通VIP，请<span style="color: #FFDDBD; margin-left: 4rpx;" @click="toService">联系客服</span>
+			<div class="pb-item flex-between" @click="payType='2'">
+				<div class="pb-left flex-start">
+					<img :src="`${assetsUrl}pay-ali.png`" class="left-icon">
+					<span class="left-text">支付宝支付</span>
+				</div>
+				<div class="pb-right">
+					<img :src="`${assetsUrl}${payType==='2'?'pay-choose':'pay-nochoose'}.png`" :class="payType==='2'?'right-icon1':'right-icon'">
+				</div>
 			</div>
-			
-		</scroll-div>
+		</div>
+		<van-notice-bar :scrollable="false" background="#151126">
+		  <van-swipe
+		    vertical
+		    class="swiper"
+		    :autoplay="3000" 
+		    :show-indicators="false">
+		    <van-swipe-item v-for="(item,index) in promotions" :key="index" class="swiper-item">
+				<div class="item-box flex-start">
+					<img :src="item.headImg" mode="aspectFit" class="item-img"></img>
+					<div class="item-text font24 fw400">
+						{{item.nick}}刚刚开通了会员
+					</div>
+				</div>
+			</van-swipe-item>
+		  </van-swipe>
+		</van-notice-bar>
+		<div class="prot font22 fw400">
+			成为会员及代表同意<span style="color: #FFDDBD;" class="font22" @click="toAddedService">《增值服务协议》</span>
+		</div>
+		<img :src="`${assetsUrl}vip-action.png`" mode="widthFix" class="action"></img>
+		<div class="qustion-title font30 fw500">
+			支付遇到问题
+		</div>
+		<div class="qustions font24 fw400">
+			1.如果支付成功，但是没有开通VIP，请<span style="color: #FFDDBD; margin-left: 4px;" class="font24" @click="toService">联系客服</span>
+		</div>
 		<div class="btn flex-between">
 			<div class="btn-left">
 				<div class="bl-total font24 fw500">
@@ -96,7 +100,7 @@
 				</div> -->
 			</div>
 			<div class="btn-right" @click="pay">
-				<image :src="`${assetsUrl}vip-btn.png`" mode="aspectFit" class="br-img"></image>
+				<img :src="`${assetsUrl}vip-btn.png`" mode="aspectFit" class="br-img"></img>
 				<div class="br-text font32 fw600">
 					立即支付
 				</div>
@@ -106,22 +110,21 @@
 </template>
 
 <script>
-	import TopBar from '@/components/TopBar/TopBar.vue';
+	import {assetsUrl,protocal} from '../../util/index.js';
 	export default {
-		components:{TopBar},
 		data() {
 			return {
 				topbarIcon:'back',
 				topbarTitle:'会员中心',
-				assetsUrl:this.$util.assetsUrl,
+				assetsUrl,
 				scrollRefreshing:false,
 				scrollTriggered:true,
 				scrollHeight:0,
-				topNavHeight:0,
 				tabIndex:0,
 				priceDatas:{},
 				promotions:[],
 				totalPrice:0,
+				payType:'1',
 				priceConfig:{
 					feeFen: null,
 					sceneId: null,
@@ -133,19 +136,12 @@
 			};
 		},
 		mounted() {
-			this.computedScolldivHeight();
 			this.getConfigData();
 			this.getPromotionsData();
 		},
 		computed: {
-			statusBarHeight() {
-				return this.$store.state.statusBarHeight;
-			},
-			topbarOffsetHeight() {
-				return this.$store.state.topbarOffsetHeight;
-			},
 			userInfo(){
-				return this.$store.state.userInfo||JSON.parse(uni.getStorageSync('userInfo'))
+				return JSON.parse(localStorage.getItem('userInfo'))
 			}
 		},
 		methods:{
@@ -153,51 +149,13 @@
 				return false;
 			},
 			back(){
-				uni.navigateBack({
-					delta:1
-				})
+				this.$router.back();
 			},
 			toAddedService(){
-				uni.navigateTo({
-					url:`/pages/webdiv/webdiv?url=${this.$util.protocal.addedService}`
-				})
-			},
-			/**
-			 * 计算scroll高度
-			 */
-			computedScolldivHeight() {
-				let query = uni.createSelectorQuery().in(this);
-				let heightLeaf =0;
-				query.select('#topnav').boundingClientRect(data => {
-					this.topNavHeight=data.height;
-					heightLeaf += data.height;
-				}).exec(() => {
-					let sysInfo = uni.getSystemInfoSync();
-					this.scrollHeight = sysInfo.windowHeight - heightLeaf;
-				});
-			
-			},
-			/**
-			 * 推荐下拉刷新、加载更多
-			 */
-			scrollRefresh(){
-				if (this.scrollRefreshing) 
-				{
-					return;
-				}
-				this.scrollRefreshing = true;
-				setTimeout(() => {
-					this.scrollTriggered = false;
-					this.scrollRefreshing = false;
-				}, 1000)
-				this.getConfigData();
+				window.location.href=protocal.addedService;
 			},
-			scrollPulling(e) {},
-			scrollRestore() {this.scrollTriggered = true;},
-			scrollAbort() {},
-			scrollToBottom(){},
 			getConfigData(){
-				let user=JSON.parse(uni.getStorageSync('user'));
+				let user=JSON.parse(localStorage.getItem('user'));
 				this.$api.public.priceBySceneConfigs({
 					completeUser:user,
 					scene:'Member'
@@ -208,7 +166,9 @@
 					this.priceConfig.scene=this.priceDatas.prices2[this.tabIndex].sceneCate;
 					this.priceConfig.sceneId=this.priceDatas.prices2[this.tabIndex].sceneId;
 					this.priceConfig.body=this.priceDatas.prices2[this.tabIndex].name;
-					this.priceConfig.userId=(this.$store.state.userInfo||JSON.parse(uni.getStorageSync('userInfo'))).id;
+					this.priceConfig.userId=JSON.parse(localStorage.getItem('userInfo')).id;
+					this.priceConfig.subject= this.priceDatas.prices2[this.tabIndex].name;
+					this.priceConfig.pkgCate='JyPark';
 				})
 			},
 			getPromotionsData(){
@@ -223,238 +183,283 @@
 				this.priceConfig.scene=this.priceDatas.prices2[index].sceneCate;
 				this.priceConfig.sceneId=this.priceDatas.prices2[index].sceneId;
 				this.priceConfig.body=this.priceDatas.prices2[index].name;
-				this.priceConfig.userId=(this.$store.state.userInfo||JSON.parse(uni.getStorageSync('userInfo'))).id;
+				this.priceConfig.userId=(this.$store.state.userInfo||JSON.parse(localStorage.getItem('userInfo'))).id;
+				this.priceConfig.subject= this.priceDatas.prices2[index].name;
+				this.priceConfig.pkgCate='JyPark';
 			},
 			pay(){
-				uni.getProvider({
-					service:'payment',
-					success:(provider)=>{
-						console.log(provider.provider)
-						this.$api.pay.creatWxOrder(this.priceConfig).then(res=>{
-							if(res.data.succ){
-								uni.requestPayment({
-									provider:provider.provider[0],
-									timeStamp: String(res.data.timeStamp),
-								    nonceStr: res.data.nonceStr,
-								    package: `prepay_id=${res.data.wxUniPrePayId}`,
-								    signType: 'MD5',
-								    paySign: res.data.paySign,
-								    success:(result)=>{
-										console.log(result)
-										if(result.errMsg==='requestPayment:ok'){
-											uni.showToast({
-												icon:'success',
-												title:'支付成功'
-											})
-										}
-									},
-								    fail:(err)=>{console.log(err)}
-								})
-							}
-						})
-					}
-				})
+				if(this.payType==='1'){
+					this.$api.pay.creatWxOrder(this.priceConfig).then(res=>{
+						if(res.succ){
+							localStorage.setItem('outTradeNo',res.outTradeNo)
+							this.$dialog.confirm({
+								title:'提示',
+								message:'是否充值成功'
+							}).then(()=>{
+								
+							}).catch(()=>{
+								
+							})
+							window.location.href=`sugarpark://${encodeURIComponent(res.mwebUrl)}`;
+						}
+						else{
+							this.$toast(res.msg);
+						}
+					}).catch(err=>{
+						this.$toast(err);
+					})
+				}
+				else if(this.payType==='2'){
+					this.$api.pay.creatAliOrder(this.priceConfig).then(res=>{
+						if(res.succ){
+							localStorage.setItem('outTradeNo',res.outTradeNo)
+							const div = document.createElement('div');
+							div.innerHTML = (res.respBody);  //res.respBody是返回的表单
+							document.body.appendChild(div);
+							document.forms[0].submit();
+							this.$dialog.confirm({
+								title:'提示',
+								message:'是否充值成功'
+							}).then(()=>{
+								
+							}).catch(()=>{
+								
+							})
+						}
+						else{
+							this.$toast(res.msg);
+						}
+					}).catch(err=>{
+						this.$toast(err);
+					})
+				}
+				
 				
 			},
 			toService(){
-				uni.openCustomerServiceChat({
-				     extInfo:{
-				         url:'https://work.weixin.qq.com/kfid/kfca1b21d2f7e8a18e9',//客服链接
-				     },
-				     corpId:'wwa8f2a0d8a6dc0950',//企业ID
-				     fail(res){
-						 console.log(res)
-				         wx.showToast({
-				           title: '客服联系失败',
-				           icon:'none'
-				         })
-				     }
-				 })
+				window.location.href=`sugarpark://${encodeURIComponent('https://work.weixin.qq.com/kfid/kfca1b21d2f7e8a18e9')}`;
 			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
+@import "../../public.scss";
 .container{
 	width: 100vw;
 	height: 100vh;
 	background-color: $bgcolor1;
-	overflow: hidden;
+	overflow: auto;
 	.topnav {
-		padding: 0 10rpx;
+		padding: 0 5px;
 		position: fixed;
+		height: 60px;
 		top: 0;
 		left: 0;
 		width: 100vw;
 		z-index: 100;
 		background-color: $bgcolor1;
 		.nav-item{
-			width: 40rpx;
-			height: 40rpx;
-			margin-left: 16rpx;
+			width: 20px;
+			height: 20px;
+			padding: 10px;
 			
 			.nav-img{
-				width: 40rpx;
-				height: 40rpx;
+				width: 20px;
+				height: 20px;
 			}
 		}
 		.nav-text{
 			flex: 1;
 			color: $fontcolor5;
-			height: 40rpx;
+			height: 20px;
 			text-align: center;
 		}
 	}
-	.scroll-div{
-		
-		.top{
-			.top-left{
-				padding-left: 44rpx;
-				.user-box{
-					.head-img{
-						width: 88rpx;
-						height: 88rpx;
-						border-radius: 88rpx;
-						background-color: #ffffff;
+	.top{
+		margin-top: 60px;
+		.top-left{
+			padding-left: 22px;
+			.user-box{
+				.head-img{
+					width: 44px;
+					height: 44px;
+					border-radius: 44px;
+					background-color: #ffffff;
+				}
+				.user-info{
+					flex-direction: column;
+					margin-left: 8px;
+					align-items: flex-start;
+					.name{
+						color: #ffffff;
 					}
-					.user-info{
-						flex-direction: column;
-						margin-left: 16rpx;
-						align-items: flex-start;
-						.name{
-							color: #ffffff;
-						}
-						.phone{
-							color: #FFDDBD;
-							margin-top: 10rpx;
-						}
+					.phone{
+						color: #FFDDBD;
+						margin-top: 5px;
 					}
 				}
-				.tip{
-					color: #79726B;
-					margin-top: 40rpx;
-				}
 			}
-			.top-right{
-				width: 300rpx;
-				height: 260rpx;
+			.tip{
+				color: #79726B;
+				margin-top: 20px;
 			}
 		}
-		.tabs{
-			white-space:nowrap;
-			.tab{
-				position: relative;
-				margin-right: 12rpx;
-				
-				border-radius: 40rpx;
-				display: inline-block;
-				transition: all .1s;
-				overflow: hidden;
-				&:nth-of-type(1){
-					margin-left: 32rpx;
-				}
-				&:nth-last-of-type(1){
-					margin-right: 32rpx;
-				}
-				.tab-time{
-					color: #FFDDBD;
-				}
-				.tab-price{
-					color: #FFDDBD;
-					margin-top: 24rpx;
-				}
-				.tab-under{
-					color: #FFDDBD;
-					text-decoration: line-through;
-					margin-top: 24rpx;
-				}
-				.tab-tag{
-					color: #201F1E;
-					background: #FFDDBD;
-					border-radius: 0rpx 40rpx 0px 16rpx;
-					width: 88rpx;
-					height: 36rpx;
-					line-height: 36rpx;
-					text-align: center;
-					position: absolute;
-					right: -1rpx;
-					top: -1rpx;
-				}
+		.top-right{
+			width: 150px;
+			height: 130px;
+		}
+	}
+	
+	.tabs{
+		white-space:nowrap;
+		overflow: auto;
+		margin-bottom: 24px;
+		.tab{
+			position: relative;
+			margin-right: 6px;
+			width: 111px;
+			height: 143px;
+			border-radius: 20px;
+			display: inline-block;
+			transition: all .1s;
+			overflow: hidden;
+			padding: 20px 12px;
+			box-sizing: border-box;
+			&:nth-of-type(1){
+				margin-left: 16px;
 			}
-			.no-active{
-				border: 1rpx solid #79726B;
-				padding: 40rpx 24rpx;
-				width: 188rpx;
+			&:nth-last-of-type(1){
+				margin-right: 16px;
 			}
-			.active-tab{
-				padding: 40rpx 24rpx;
-				width: 182rpx;
-				border: 4rpx solid #FFDDBD !important;
-				background-color: #221F1C !important;
+			.tab-time{
+				color: #FFDDBD;
 			}
-		}
-		.swiper{
-			margin: 48rpx 32rpx 16rpx 32rpx;
-			height: 80rpx;
-			position: relative;
-			.swiper-model{
-				position: absolute;
-				z-index: 100;
-				width: 100%;
-				height: 80rpx;
+			.tab-price{
+				color: #FFDDBD;
+				margin-top: 12px;
 			}
-			.swiper-item{
-				height: 80rpx;
-				.item-box{
-					padding: 20rpx 24rpx;
-					height: 80rpx;
-					.item-img{
-						width: 40rpx;
-						height: 40rpx;
-						border-radius: 40rpx;
-						background-color: #ffffff;
-					}
-					.item-text{
-						color: #ffffff;
-						margin-left: 16rpx;
-					}
-				}
+			.tab-under{
+				color: #FFDDBD;
+				text-decoration: line-through;
+				margin-top: 12px;
+			}
+			.tab-tag{
+				color: #201F1E;
+				background: #FFDDBD;
+				border-radius: 0px 20px 0px 8px;
+				width: 44px;
+				height: 20px;
+				font-size: 10px;
+				line-height: 24px;
+				text-align: center;
+				position: absolute;
+				right: -1px;
+				top: -1px;
 			}
 		}
-		.prot{
-			margin: 0 32rpx;
-			color: #ffffff;
+		.no-active{
+			border: 1px solid #79726B;
 		}
-		.action{
-			margin: 64rpx 32rpx;
-			width: 686rpx;
+		.active-tab{
+			border: 2px solid #FFDDBD !important;
+			background-color: #221F1C !important;
 		}
-		.qustion-title{
-			color: #ffffff;
-			margin: 0 32rpx;
+	}
+	.paytype-box{
+		flex-direction: column;
+		.pb-item{
+			width: 100%;
+			padding: 8px 16px;
+			box-sizing: border-box;
+			.pb-left{
+				.left-icon{
+					width:24px;
+					height:24px;
+					padding-right: 10px;
+				}
+				.left-text{
+					color: #ffffff;
+					font-size: 14px;
+				}
+			}
+			.pb-right{
+				.right-icon{
+					width:24px;
+					height:24px;
+				}
+				.right-icon1{
+					width: 26px;
+					height:24px;
+				}
+			}
+		}
+	}
+	.swiper{
+		
+		
+		height: 40px;
+		position: relative;
+		background-color: $bgcolor1;
+		.swiper-model{
+			position: absolute;
+			z-index: 100;
+			width: 100%;
+			height: 40px;
 		}
-		.qustions{
-			color: #79726B;
-			margin: 20rpx 32rpx 80rpx 32rpx;
-			padding-bottom: 284rpx;
+		.swiper-item{
+			background-color: $bgcolor1;
+			height: 40px;
+			.item-box{
+				height: 40px;
+				.item-img{
+					width: 20px;
+					height: 20px;
+					border-radius: 20px;
+					background-color: #ffffff;
+				}
+				.item-text{
+					color: #ffffff;
+					margin-left: 8px;
+				}
+			}
 		}
 	}
+	.prot{
+		
+		margin: 0 16px;
+		color: #ffffff;
+		margin-top: 8px;
+	}
+	.action{
+		margin: 32px 16px;
+		width: 343px;
+	}
+	.qustion-title{
+		color: #ffffff;
+		margin: 0 16px;
+	}
+	.qustions{
+		color: #79726B;
+		margin: 10px 16px 40px 16px;
+		padding-bottom: 142px;
+	}
+	
 	
 	.btn{
 		position: fixed;
 		bottom: 0;
 		left: 0;
 		z-index: 100;
-		width: 686rpx;
-		height: 128rpx;
-		margin: 0rpx 32rpx;
-		margin-bottom: 76rpx;
+		width: 343px;
+		height: 64px;
+		margin: 0px 16px;
+		margin-bottom: 38px;
 		background: linear-gradient(133deg, #1B1A1D 0%, #000000 100%);
-		border-radius: 64rpx;
-		border: 2rpx solid #979797;
+		border-radius: 32px;
+		border: 1px solid #979797;
 		.btn-left{
-			padding-left:48rpx;
+			padding-left:24px;
 			.bl-total{
 				color: #ffffff;
 			}
@@ -464,9 +469,9 @@
 		}
 		.btn-right{
 			position: relative;
-			width: 208rpx;
-			height: 96rpx;
-			padding-right: 20rpx;
+			width: 104px;
+			height: 48px;
+			padding-right: 10px;
 			
 			.br-img{
 				position: absolute;
@@ -475,18 +480,18 @@
 				top: 0;
 				bottom: 0;
 				margin: 0 auto;
-				width: 208rpx;
-				height: 96rpx;
+				width: 104px;
+				height: 48px;
 				z-index: 0;
 			}
 			.br-text{
 				color: #000000;
 				position: relative;
 				z-index: 1;
-				width: 208rpx;
-				height: 96rpx;
+				width: 104px;
+				height: 48px;
+				line-height: 48px;
 				text-align: center;
-				line-height: 96rpx;
 			}
 		}
 	}

src/views/wallet/boundAli/index.scss

@@ -0,0 +1,104 @@
+.container{
+	background-color: #FFFFFF;
+	width: 100vw;
+	min-height: 100vh;
+	.ba-content{
+		width: 100%;
+		min-height: 100vh;
+		padding: 0px 16px;
+		box-sizing: border-box;
+		.title{
+			text-align: left;
+			font-size: 24px;
+			font-family: PingFangSC-Medium, PingFang SC;
+			font-weight: bolder;
+			color: #333333;
+			padding-top: 66px;
+		}
+		.tip{
+			
+			margin-top: 15px;
+			display: flex;
+			justify-content: flex-start;
+			align-items: flex-start;
+			.tip-icon{
+				width: 6px;
+				height: 6px;
+				border-radius: 6px;
+				background-color: #F74C31;
+				margin: 8px 6px 0px 0px;
+			}
+			.tip-text{
+				flex: 1;
+				font-size: 14px;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #333333;
+			}
+		}
+		.form{
+			margin-top: 60px;
+			.form-item{
+				margin-top: 30px;
+				.fi-title{
+					font-size: 13px;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: #333333;
+					margin-bottom: 10px;
+				}
+				.fi-input-box{
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					border-bottom: 1px solid #EEEEEE;
+					padding: 10px 0px;
+					.input{
+						flex: 1;
+						border: none;
+						outline: none;
+						text-indent: 0;
+						height: 21px;
+						font-size: 15px;
+						font-family: PingFangSC-Medium, PingFang SC;
+						font-weight: bolder;
+					}
+					.clear{
+						width: 15px;
+						height: 15px;
+					}
+				}
+				.error-text{
+					font-size: 11px;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: #FF6A6A;
+					margin-top: 2px;
+					height: 10px;
+				}
+			}
+		}
+		.ba-btn{
+			width: 331px;
+			height: 48px;
+			background: #E3DDFE;
+			border-radius: 25px;
+			font-size: 16px;
+			font-family: PingFangSC-Semibold, PingFang SC;
+			font-weight: 600;
+			color: #FFFFFF;
+			line-height: 48px;
+			text-align: center;
+			margin: 0 auto;
+			margin-top: 100px;
+			transition: all .5s;
+		}
+	}
+	
+}
+input::-webkit-input-placeholder {  /* WebKit browsers*/ 
+    font-size: 15px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #D7D7D9;
+}

src/views/wallet/boundAli/index.vue

@@ -0,0 +1,168 @@
+<template>
+	<div class="container">
+		<top-bar :theme="topBarTheme" :title="topBarTitle"></top-bar>
+		<div class="ba-content">
+			<div class="title">
+				绑定支付宝
+			</div>
+			<div class="tip">
+				<div class="tip-icon"></div>
+				<div class="tip-text">
+					为了保证提现成功，务必确保输入的支付宝账号和姓名是匹配的。如果因为提现账号输入错误带来的损失自行承担，平台概不负责。
+				</div>
+				
+			</div>
+			<div class="form">
+				<div class="form-item">
+					<div class="fi-title">
+						支付宝账号
+					</div>
+					<div class="fi-input-box">
+						<input 
+						 v-on:keyup="aliCountInput($event)"
+						 v-model="aliCount"
+						 type="text" 
+						 placeholder="请填写支付宝账号（手机号或邮箱）" 
+						 class="input"
+						 :style="{'color':`${aliCountError?'#FF6A6A':'#333333'}`}">
+						<img src="~@/assets/wallet/clear.png" class="clear" @click="clearInput('aliCount')" v-if="aliCount!==null&&aliCount!==''">
+					</div>
+					<div class="error-text" :style="{'opacity':`${aliCountError?1:0}`}">
+						{{aliCountErrorText}}
+					</div>
+				</div>
+				<div class="form-item">
+					<div class="fi-title">
+						姓名
+					</div>
+					<div class="fi-input-box">
+						<input
+						v-on:blur="nameInput($event)"
+						v-on:keyup="nameInput($event)"
+						v-on:beforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^u4E00-u9FA5]/g,''))"
+						v-model="name" 
+						type="text" 
+						placeholder="请填写支付宝账号对应的姓名（中文）" 
+						class="input"
+						:style="{'color':`${nameError?'#FF6A6A':'#333333'}`}">
+						<img src="~@/assets/wallet/clear.png" class="clear" @click="clearInput('name')" v-if="name!==null&&name!==''">
+					</div>
+					<div class="error-text" :style="{'opacity':`${nameError?1:0}`}">
+						{{nameErrorText}}
+					</div>
+				</div>
+			</div>
+			<div class="ba-btn" :style="{'background-color':`${!aliCountError&&!nameError&&name!==''&&aliCount!==''?'#9580FF':'#E3DDFE'}`}" @click="bound">
+				确认绑定
+			</div>
+		</div>
+		
+		<div class="null-box">
+			
+		</div>
+	</div>
+</template>
+
+<script>
+	import topBar from "@/views/wallet/components/topBar.vue";
+	import {isMobile,isIphoneX,isSafari,toDecimal2} from '@/util/index.js';
+	import { validChinese, validPhone,validEmail } from "@/util/validate";
+	export default {
+	    name: "boundAli",
+		components:{topBar},
+	    data() {
+			return{
+				topBarTheme:'black',
+				topBarTitle:'绑定支付宝',
+				aliCount:'',
+				aliCountError:false,
+				aliCountErrorText:'',
+				name:'',
+				nameError:false,
+				nameErrorText:'',
+			}
+		},
+		mounted() {
+			this.aliCount=this.$store.state.withdrawInfo.aliPayId;
+			this.name=this.$store.state.withdrawInfo.aliPayUserName;
+		},
+		methods:{
+			clearInput(str){
+				if(str==='name'){
+					this.name='';
+					this.nameErrorText='';
+					this.nameError=false;
+				}
+				else if(str==="aliCount"){
+					this.aliCount='';
+					this.aliCountErrorText='';
+					this.aliCountError=false;
+				}
+			},
+			aliCountInput(e){
+				let value=e.target.value;
+				if(value===''||value===null){
+					this.aliCountErrorText='';
+					this.aliCountError=false;
+					return;
+				}
+				if(value.length<11){
+					this.aliCountError=true;
+					return;}
+				if(validPhone(value)||validEmail(value)){
+					this.aliCountErrorText='';
+					this.aliCountError=false;
+				}
+				else{
+					this.aliCountErrorText='账号必须为格式正确的手机号或邮箱';
+					this.aliCountError=true;
+				}
+			},
+			nameInput(e){
+				let value=e.target.value;
+				if(value===''){
+					this.nameErrorText='';
+					this.nameError=false;
+					return;
+				}
+				if(validChinese(value)){
+					this.nameErrorText='';
+					this.nameError=false;
+				}
+				else{
+					this.nameErrorText='姓名必须为中文';
+					this.nameError=true;
+				}
+			},
+			bound(){
+				if(this.name===''||this.name===null||this.aliCount===null||this.aliCount===''||this.nameError||this.aliCountError){
+					return;
+				}
+				this.$toast.loading({
+					message: '绑定中...',
+					forbidClick: true,
+					duration:0
+				});
+				this.$api.bag.editAlipay({alipayId:this.aliCount,alipayUserName:this.name}).then(res=>{
+					if(res.status==='Succ'){
+						this.$toast.clear();
+						if(res.data.succ){
+							this.$toast.success('绑定成功');
+							let obj=this.$store.state.withdrawInfo;
+							obj.aliPayUserName=this.name;
+							obj.aliPayId=this.aliCount;
+							this.$store.commit('setWithdrawInfo',obj)
+						}
+					}
+				}).catch(err=>{
+					this.$toast.clear();
+					this.$toast.fail(err.msg);
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import './index.scss';
+</style>

src/views/wallet/components/topBar.vue

@@ -0,0 +1,119 @@
+<template>
+	<div class="tb-container" :class="theme">
+		<img src="~@/assets/wallet/back1.png" class="back" :style="{'opacity':`${isBack?1:0}`}" @click="back" v-if="theme==='white'||theme==='main'">
+		<img src="~@/assets/wallet/back2.png" class="back" :style="{'opacity':`${isBack?1:0}`}" @click="back" v-else>
+		<div class="title" :class="theme" style="background-color: transparent;">
+			{{title}}
+		</div>
+		<div class="action-box" :style="{'opacity':`${action!==''?1:0}`}">
+			<div class="action" :style="{'color':`${theme==='white'?'#ffffff':'#000000'}`}" @click="actionClick">
+				{{actionText}}
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default{
+		props:{
+			theme:{
+				type:String,
+				default:'white'
+			},
+			title:{
+				type:String,
+				default:'我的钱包'
+			},
+			isBack:{
+				type:Boolean,
+				default:true
+			},
+			action:{
+				type:String,
+				default:''
+			},
+			actionText:{
+				type:String,
+				default:''
+			},
+			backAction:{
+				type:String,
+				default:''
+			}
+		},
+		data(){
+			return{
+				
+			}
+			
+		},
+		mounted() {
+
+		},
+		methods:{
+			actionClick(){
+				this.$emit(this.action)
+			},
+			back(){
+				if(this.backAction!==''){
+					this.$emit(this.backAction);
+				}
+				else{
+					this.$router.back();
+				}
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.white{
+		background-color: rgba(0, 0, 0, 0);
+		color: #ffffff;
+	}
+	.black{
+		background-color: #ffffff;
+		color: #333333;
+	}
+	.main{
+		background-color: #9580FF;
+		color:#ffffff;
+	}
+	.tb-container{
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100vw;
+		position: fixed;
+		top: 0;
+		z-index: 20;
+		transition: all .3s;
+		.back{
+			width: 16px;
+			height: 16px;
+			padding: 20px 25px;
+		}
+		.title{
+			font-size: 16px;
+			flex: 1;
+			text-align: center;
+			transition: all .3s;
+		}
+		.action-box{
+			width: 66px;
+			height: 25px;
+			background: rgba(209, 209, 209, 0.2);
+			border-radius: 100px 0px 0px 100px;
+			
+			.action{
+				transition: all .3s;
+				font-size: 12px;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				text-align: center;
+				line-height: 25px;
+			}
+		}
+	}
+</style>

src/views/wallet/exchange/index.scss

@@ -0,0 +1,235 @@
+.container{
+	background-color: #F7F7F7;
+	width: 100vw;
+	min-height: 100vh;
+	.panel{
+		background: #FFFFFF;
+		border-radius: 10px;
+		margin: 0 auto;
+		width: 315px;
+		padding: 32px 24px;
+		box-sizing: border-box;
+		
+		.p-title{
+			font-size: 18px;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: bolder;
+			color: #323038;
+			line-height: 25px;
+			text-align: center;
+		}
+		.p-text{
+			font-size: 14px;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #999999;
+			margin-top: 14px;
+			text-align: center;
+		}
+		.p-exc{
+			display: flex;
+			justify-content: space-around;
+			align-items: center;
+			margin-top:25px ;
+			.pe-pirce-box{
+				width: 90px;
+				height: 102px;
+				background: #F7F7F7;
+				border-radius: 6px;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				flex-direction: column;
+				.pe-num{
+					font-size: 30px;
+					font-family: DIN-Medium, DIN;
+					font-weight: bolder;
+					color: #333333;
+					margin-bottom: 10px;
+				}
+				.pe-yd{
+					width: 44px;
+					height: 44px;
+					margin-bottom: 10px;
+				}
+				.pe-unit{
+					font-size: 14px;
+					font-family: PingFangSC-Medium, PingFang SC;
+					font-weight: 500;
+					color: #333333;
+				}
+			}
+			.pe-exchange{
+				width: 33px;
+				height: 20px;
+			}
+		}
+		.p-btn{
+			width: 266px;
+			height: 48px;
+			background: #FFC107;
+			border-radius: 25px;
+			font-size: 16px;
+			font-family: PingFangSC-Medium, PingFang SC;
+			font-weight: 500;
+			color: #FFFFFF;
+			line-height: 48px;
+			text-align: center;
+			margin: 45px 0px 9px 0px;
+		}
+		.p-tip{
+			font-size: 12px;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #B1B1B3;
+			text-align: center;
+		}
+	}
+	.top-box{
+		.top_bg{
+			width: 100vw;
+			position: relative;
+			z-index: 0;
+		}
+		.top-info{
+			position: relative;
+			z-index: 10;
+			padding: 26px 16px;
+			display: flex;
+			justify-content: flex-start;
+			align-items: flex-start;
+			flex-direction: column;
+			margin-top: -160px;
+			.top-label{
+				font-size: 13px;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #FFFFFF;
+			}
+			.top-price-box{
+				
+				padding: 9px 0px;
+				display: flex;
+				justify-content: flex-start;
+				align-items: baseline;
+				.tpb-unit{
+					width: 20px;
+					height: 20px;
+				}
+				.tpb-num{
+					font-size: 48px;
+					font-family: DIN-Medium, DIN;
+					font-weight: 500;
+					color: #FFFFFF;
+				}
+				.rule{
+					padding: 2px 7px;
+					height: 18px;
+					background: rgba(0, 0, 0, 0.1);
+					border-radius: 9px;
+					font-size: 10px;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: #FFFFFF;
+					margin: 0px 0px 0px 5px;
+					transform: translateY(-5px);
+				}
+			}
+		}
+	}
+	.form-box{
+		position: relative;
+		width: 351px;
+		background: #FFFFFF;
+		border-radius: 10px;
+		box-sizing: border-box;
+		margin: 0px 12px;
+		margin-top: -20px;
+		z-index: 10;
+		
+		.form-title{
+			font-size: 16px;
+			font-family: PingFangSC-Medium, PingFang SC;
+			font-weight: bolder;
+			color: #333333;
+			padding: 16px 16px 0px 16px;
+		}
+		.form-input-box{
+			padding: 15px 16px 0px 16px;
+			padding-bottom: 9px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			border-bottom: 1px solid #EEEEEE;
+			.fib-left{
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				.fib-img{
+					width: 30px;
+					height: 30px;
+				}
+				.fib-input{
+					outline: none;
+					border: none;
+					width: 200px;
+					font-size: 30px;
+					font-family: DIN-Medium, DIN;
+					font-weight: bolder;
+					box-sizing: border-box;
+					transition: all .3s;
+				}
+			}
+		}
+		.tip-box{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 9px 16px 0px 16px;
+			margin-bottom: 60px;
+			.tip{
+				font-size: 12px;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+			}
+			.all{
+				font-size: 12px;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #795DB4;
+			}
+		}
+		.btn-box{
+			margin: 0 10px;
+			width: 331px;
+			height: 48px;
+			background: #E3DDFE;
+			border-radius: 25px;
+			font-size: 16px;
+			font-family: PingFangSC-Semibold, PingFang SC;
+			font-weight: 600;
+			color: #FFFFFF;
+			line-height: 48px;
+			text-align: center;
+			transition: all .3s;
+		}
+		.prot-box{
+			font-size: 11px;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #999999;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			margin-top: 15px;
+			padding-bottom: 18px;
+		}
+	}
+	
+}
+.van-cell{
+	padding-left: 0 !important;
+}
+input::-webkit-input-placeholder {  /* WebKit browsers*/ 
+    font-size: 16px;
+}

src/views/wallet/exchange/index.vue

@@ -0,0 +1,374 @@
+<template>
+	<div class="container">
+		<top-bar :theme="topBarTheme" 
+		:title="topBarTitle"
+		:backAction="'goHome'"
+		@goHome="goHome">
+		</top-bar>
+		<van-popup v-model="exchangePopup" round closeable>
+			<div class="panel">
+				<p class="p-title">兑换颜豆</p>
+				<p class="p-text">本次兑换将消耗<span style="color: #F74C31;">{{exchangeNum/10}}元</span>,兑换后不可反悔</p>
+				<div class="p-exc">
+					<div class="pe-pirce-box">
+						<p class="pe-num">{{exchangeNum/10}}</p>
+						<p class="pe-unit">元</p>
+					</div>
+					<img class="pe-exchange" src="~@/assets/wallet/exchange.png">
+					<div class="pe-pirce-box">
+						<img src="~@/assets/wallet/yd.png" class="pe-yd">
+						<p class="pe-unit" style="font-weight: bolder;">{{exchangeNum}}颜豆</p>
+					</div>
+				</div>
+				<div class="p-btn" @click="exchange">确认兑换</div>
+				<div class="p-tip">
+					点击“确认兑换”将进行面容识别,
+				</div>
+				<div class="p-tip">
+					以确保余额安全。
+				</div>
+			</div>
+		</van-popup>
+		<div class="top-box">
+			<img src="~@/assets/wallet/exchange_bg.png" class="top_bg">
+			<div class="top-info">
+				<div class="top-label">
+					可兑换金额(元)
+				</div>
+				<div class="top-price-box">
+					<img src="~@/assets/wallet/unit.png" class="tpb-unit">
+					<span class="tpb-num">{{totalMoney}}</span>
+					<span class="rule">1元=10颜豆</span>
+				</div>
+			</div>
+		</div>
+		<div class="form-box">
+			<div class="form-title">兑换颜豆</div>
+			<div class="form-input-box">
+				<div class="fib-left">
+					<img src="~@/assets/wallet/yd.png" class="fib-img">
+					 <input v-model="exchangeNum" 
+					 type="number" 
+					 class="fib-input"
+					 maxlength="5"
+					 v-on:keyup="numInput($event)"
+					 :style="{'color':`${inputError?'#FF6A6A':''}`}"
+					 placeholder="请输入要兑换的颜豆数量" />
+				</div>
+			</div>
+			<div class="tip-box">
+				<div class="tip" :style="{'color':`${inputError?'#FF6A6A':'#999999'}`}">
+					{{inputErrorText}}
+				</div>
+				<div class="all" @click="allEx">
+					全部兑换
+				</div>
+			</div>
+			<div class="btn-box" @click="showExchangePopup" :style="{'background':`${!inputError&&exchangeNum>0?'#FFC107':'#FFE699'}`}">
+				立即兑换
+			</div>
+			<div class="prot-box">
+				<span class="prot-text">点击“立即兑换”代表你同意<span style="color:#9580FF;text-decoration: underline;" @click="toLink('https://h5.sugarpark.cn/agreement/jx/yanbean-buy.html')">《颜豆购买协议》</span></span>
+			</div>
+		</div>
+
+		<div class="null-box">
+		
+		</div>
+	</div>
+</template>
+
+<script>
+	import topBar from "@/views/wallet/components/topBar.vue";
+	import {getBiztoken,getFaceResult} from '@/util/faceAuth.js'
+	import {isMobile,isIphoneX,isSafari,toDecimal2,dataURLtoFile} from '@/util/index.js';
+	export default {
+	    name: "exchange",
+		components:{topBar},
+	    data() {
+			return{
+				topBarTitle:'兑换颜豆',
+				topBarTheme:'white',
+				exchangePopup:false,
+				topBarActionText:'遇到问题',
+				exchangeNum:null,//颜豆数量
+				inputErrorText:'',
+				inputError:false,
+				totalMoney:0,
+			}
+		},
+		created() {
+			
+			if(location.href.indexOf('result_id')!==-1&&localStorage.exResultOrderId!==localStorage.createIncomeOrderId){//获取活体检测结果
+				this.getResult();
+			}
+			
+		},
+		mounted() {
+			this.totalMoney=parseInt(this.$store.state.withdrawMyInfo.canAmountFen);
+			this.$nextTick(() => {
+			      // 监听滚动条
+			      window.addEventListener("scroll", this.handleScroll);
+			});
+			if(this.totalMoney===0){
+				this.inputErrorText=`暂无可兑换颜豆`;
+				this.inputError=true;
+				return
+			}
+			this.inputErrorText=`当前最多可兑换颜豆${this.totalMoney*10}个`;
+			
+		},
+		computed:{
+			withdrawMyInfo(){
+				return this.$store.state.withdrawMyInfo;
+			}
+		},
+		methods:{
+			goHome(){
+				this.$router.replace({name:'walletHome'});
+			},
+			toLink(url){
+				window.open(url,'_blank');
+			},
+			numInput(e){
+				if(Number(e.target.value)%10>0){
+					this.inputError=true;
+					this.inputErrorText=`只能输入10的整数倍`;
+					return;
+				}
+				let value=Number(e.target.value/10);
+				if(this.totalMoney===0){
+					this.inputErrorText=`暂无可兑换颜豆`;
+					this.inputError=true;
+					return
+				}
+				if(value===0){
+					this.inputError=false;
+					this.inputErrorText=`当前最多可兑换颜豆${this.totalMoney*10}个`;
+					return;
+				}
+				
+				if(value>this.totalMoney){
+					this.inputError=true;
+					this.inputErrorText='当前超出可兑换数量'
+					return;
+				}
+				this.inputError=false;
+				this.inputErrorText=`当前最多可兑换颜豆${this.totalMoney*10}个`;
+			},
+			allEx(){
+				if(parseInt(this.totalMoney*10)===0){return;}
+				this.exchangeNum=parseInt(this.totalMoney*10);
+			},
+			showExchangePopup(){
+				if(this.exchangeNum===null||this.exchangeNum===''||this.inputError){
+					return;
+				}
+				this.exchangePopup=true;
+			},
+			handleScroll(){
+				
+			  let scrollTop =window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+			  if(scrollTop>30){
+				  this.topBarTheme='black';
+			  }else{
+				  this.topBarTheme='white';
+			  }
+			},
+			getResult(){
+				let locationHref=location.href;
+				let str=locationHref.substr(locationHref.indexOf("?")+1);
+				let arr=str.split("&");
+				let bizToken="",resultId="";
+				for(let i=0;i<arr.length;i++){
+					let name=arr[i].substring(0,arr[i].indexOf("="));
+					let value=arr[i].substr(arr[i].indexOf("=")+1);
+					if(name==='biztoken'){
+						bizToken=value;
+					}
+					if(name==='result_id'){
+						resultId=value;
+					}
+				}
+				if(bizToken!==''&&resultId!==''){
+					this.$toast.loading({
+						message: '加载中...',
+						forbidClick: true,
+						duration:0
+					});
+					getFaceResult(bizToken,resultId).then(result=>{
+						if(result.passed===true){//识别通过
+						this.$api.faceAuth.checkRealManFace({}).then(checkResult=>{//检查是否存有人脸照
+							if(checkResult.data.hasFace){//有人脸
+								this.$api.faceAuth.upload({//上传base64到oss
+									originalFilename:result.request_id+'.jpg',
+									faceImagStr:result.base64_liveness_face_image
+								}).then(media=>{
+									if(media.code===0){
+										this.$toast.loading({
+											message: '人脸比对中...',
+											forbidClick: true,
+											duration:0
+										});
+										this.$api.faceAuth.compareFace({
+											imgUrl:media.data,
+											scene:'IncomeExchangeCoin',
+											completeUser:this.$store.state.withdrawUserInfo,
+										}).then(compare=>{//进行人脸比对
+											if(compare.data.succ){//人脸比对成功
+												this.$toast.loading({
+													message: '兑换中...',
+													forbidClick: true,
+													duration:0
+												});
+												this.$api.bag.submitIncomeOrder({//提交兑换颜豆订单
+													completeUser:this.$store.state.withdrawUserInfo,
+													faceToken:compare.data.succToken,
+													orderId:localStorage.createIncomeOrderId,
+													}).then(res=>{
+													this.$toast.clear();
+													if(res.data.succ){
+														this.$router.replace({name:'exchangeSuccess',params:{id:localStorage.createIncomeOrderId}});
+													}
+													else{
+														if(res.data.needDone){
+															 this.$dialog.alert({
+															      message: res.data.needDone,
+															});
+														}
+														else{
+															this.$dialog.alert({
+															      message: res.data.msg,
+															});
+														}
+													}
+												}).catch(err=>{
+													this.$toast.clear();
+													this.$dialog.alert({
+														  message: err.msg
+													});
+												})
+											}else{//比对失败
+												this.$toast.clear();
+												this.$dialog.alert({
+												      message: compare.msg
+												});
+											}
+										}).catch(err=>{
+											this.$toast.clear();
+											this.$dialog.alert({
+												  message: err.msg
+											});
+										})
+									}
+									else{
+										this.$toast.clear();
+										this.$dialog.alert({
+										      message: media.msg
+										});
+									}
+									
+								}).catch(err=>{
+									this.$toast.clear();
+									this.$dialog.alert({
+									      message: err.msg
+									});
+								})
+							}
+							else{//无人脸直接兑换
+								this.$toast.loading({
+									message: '兑换中...',
+									forbidClick: true,
+									duration:0
+								});
+								this.$api.bag.submitIncomeOrder({//提交兑换颜豆订单
+									completeUser:this.$store.state.withdrawUserInfo,
+									faceToken:'faceToken',
+									orderId:localStorage.createIncomeOrderId,
+									}).then(res=>{
+									this.$toast.clear();
+									if(res.data.succ){
+										
+										this.$router.replace({name:'exchangeSuccess'});
+									}
+									else{
+										if(res.data.needDone){
+											 this.$dialog.alert({
+											      message: res.data.needDone,
+											});
+										}
+										else{
+											this.$dialog.alert({
+											      message: res.data.msg,
+											});
+										}
+									}
+								}).catch(err=>{
+									this.$toast.clear();
+									this.$dialog.alert({
+										  message: err.msg
+									});
+								})
+							}
+						}).catch(err=>{//人脸检查失败
+							this.$toast.clear();
+							this.$dialog.alert({
+							      message: err.msg
+							});
+						})
+							
+							
+						}else{//识别失败
+							this.$toast.clear();
+							this.$dialog.alert({
+							      message: result,
+							});
+						}
+					});
+				}
+			},
+			exchange(){
+				
+				this.$toast.loading({
+					message: '加载中...',
+					forbidClick: true,
+					duration:0
+				});
+				this.$api.bag.createIncomeOrder({coin:this.exchangeNum,completeUser:this.$store.state.withdrawUserInfo}).then(res=>{
+					if(res.status==='Succ'){
+						localStorage.setItem('createIncomeOrderId',res.data.orderId);//兑换颜豆订单保存本地
+						localStorage.setItem('exchangeNum',this.exchangeNum);//保存兑换颜豆数量
+						if(res.data.succ===true){
+							getBiztoken(`${window.location.origin}/exchange`).then(result=>{
+								window.location.href=result;
+							}).catch(err=>{
+								this.$toast.clear();
+								this.$toast.fail(err.msg);
+							});
+						}
+						else{
+							this.$toast.clear();
+							this.$dialog.alert({
+							      message: res.data.msg,
+							});
+						}
+					}
+					else{
+						this.$toast.clear();
+						this.$dialog.alert({
+						      message: res.msg,
+						});
+					}
+				}).catch(err=>{
+					this.$toast.clear();
+					this.$toast.fail(err.msg);
+				});
+			}
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import './index.scss';
+</style>

src/views/wallet/exchangeSuccess/index.scss

@@ -0,0 +1,107 @@
+.container{
+	background-color: #F7F7F7;
+	width: 100vw;
+	min-height: 100vh;
+	.top-box{
+		width: 100%;
+		height: 291px;
+		position: relative;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+		.top-bg{
+			position: absolute;
+			width: 100%;
+			height: 291px;
+			top: 0;
+			left: 0;
+			z-index: 0;
+		}
+		.top-icon{
+			position: relative;
+			z-index:1;
+			width: 71px;
+			height: 71px;
+			margin-top: 25px;
+		}
+		.top-text{
+			position: relative;
+			z-index:1;
+			font-size: 16px;
+			font-family: PingFangSC-Medium, PingFang SC;
+			font-weight: bold;
+			color: #FFFFFF;
+			margin-top: 25px;
+		}
+	}
+	.es-content{
+		position: relative;
+		z-index: 2;
+		width: 351px;
+		height: 211px;
+		background: #FFFFFF;
+		border-radius: 10px;
+		margin: -30px 12px 0px 12px;
+		.es-title{
+			font-size: 16px;
+			font-family: PingFangSC-Medium, PingFang SC;
+			font-weight: bold;
+			color: #333333;
+			padding:26px 0px 33px 0px;
+			text-align: center;
+			position: relative;
+			&::before{
+				content: '';
+				position: absolute;
+				left: 0;
+				right: 0;
+				top: 0;
+				bottom: 0;
+				margin: auto;
+				width: 6px;
+				height: 6px;
+				border-radius: 5px;
+				background-color: #795DB4;
+				transform: translate(-50px,-2px);
+			}
+			&::after{
+				content: '';
+				position: absolute;
+				left: 0;
+				right: 0;
+				top: 0;
+				bottom: 0;
+				margin: auto;
+				width: 6px;
+				height: 6px;
+				border-radius: 5px;
+				background-color: #795DB4;
+				transform: translate(50px,-2px);
+			}
+		}
+		.es-list{
+			display: flex;
+			justify-content: space-around;
+			align-items: center;
+			.es-card{
+				flex: 1;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				flex-direction: column;
+				.es-img{
+					width: 60px;
+					height: 60px;
+				}
+				.es-text{
+					font-size: 14px;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: #795DB4;
+					margin-top: 15px;
+				}
+			}
+		}
+	}
+}

src/views/wallet/exchangeSuccess/index.vue

@@ -0,0 +1,62 @@
+<template>
+	<div class="container">
+		<top-bar :theme="topBarTheme" :title="topBarTitle" :backAction="'goHome'" @goHome="goHome"></top-bar>
+		<div class="top-box">
+			<img src="~@/assets/wallet/es_bg.png" class="top-bg">
+			<img src="~@/assets/wallet/es_icon.png" class="top-icon">
+			<p class="top-text">您已成功兑换{{exchangeNum}}个颜豆</p>
+		</div>
+		<div class="es-content">
+			<div class="es-title">
+				万能的颜豆
+			</div>
+			<div class="es-list">
+				<div class="es-card">
+					<img src="~@/assets/wallet/es_1.png" class="es-img">
+					<p class="es-text">兑换权益卡</p>
+				</div>
+				<div class="es-card">
+					<img src="~@/assets/wallet/es_2.png" class="es-img">
+					<p class="es-text">发红包</p>
+				</div>
+				<div class="es-card">
+					<img src="~@/assets/wallet/es_3.png" class="es-img">
+					<p class="es-text">查看红包相册</p>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import topBar from "@/views/wallet/components/topBar.vue";
+	export default {
+	    name: "incomeDetail",
+		components:{topBar},
+	    data() {
+			return{
+				topBarTheme:'white',
+				topBarTitle:'',
+				exchangeNum:0,
+			}
+		},
+		mounted() {
+			this.exchangeNum=localStorage.exchangeNum||'0';
+			this.orderId=this.$route.params.id||localStorage.createWithdrawalOrderId;
+			localStorage.setItem('exResultOrderId',this.orderId);
+		},
+		methods:{
+			goHome(){
+				this.$router.replace({name:'walletHome'});
+			},
+			navClick(index){
+				if(index===this.navIndex){return}
+				this.navIndex=index;
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import './index.scss';
+</style>

src/views/wallet/incomeDetail/index.scss

@@ -0,0 +1,164 @@
+.container{
+	background-color: #F7F7F7;
+	width: 100vw;
+	min-height: 100vh;
+	.nav{
+		padding-top: 60px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		position: sticky;
+		top: 0;
+		background-color: #F7F7F7;
+		.nav-item{
+			flex: 1;
+			height: 45px;
+			line-height: 45px;
+			font-size: 15px;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			text-align: center;
+		}
+		.nav-line{
+			width: 22px;
+			height: 4px;
+			background: #9580FF;
+			position: absolute;
+			bottom: 0;
+			transition: all .3s;
+		}
+	}
+	.list{
+		padding: 0px 16px 0px 16px;
+		background-color: #ffffff;
+		.list-item{
+			background-color: #ffffff;
+			
+			display: flex;
+			justify-content: space-between;
+			align-items: flex-start;
+			
+			.li-head{
+				width: 35px;
+				height: 35px;
+				border-radius: 35px;
+				background-color: #CCCCCC;
+				margin: 16px 10px 0px 0px;
+			}
+			.li-panel{
+				flex: 1;
+				display: flex;
+				justify-content: space-between;
+				align-items: flex-start;
+				padding: 16px 0px;
+				border-top: 1px solid #eeeeee;
+				.li-left{
+					.li-user{
+						display: flex;
+						justify-content: flex-start;
+						align-items: center;
+						.li-user-name{
+							font-size: 13px;
+							font-family: PingFangSC-Regular, PingFang SC;
+							font-weight: 400;
+							color: #999999;
+							max-width: 160px;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space:nowrap;
+						}
+						.li-user-tag{
+							padding: 0px 5px;
+							height: 16px;
+							background: #F7F7F7;
+							border-radius: 8px;
+							margin-left: 5px;
+							display: flex;
+							justify-content: center;
+							align-items: center;
+							.sex-icon{
+								width: 12px;
+								height: 12px;
+								margin: 0 2px 0 0;
+							}
+							.sex-num{
+								font-size: 10px;
+								font-family: PingFangSC-Regular, PingFang SC;
+								font-weight: 400;
+								padding-right: 5px;
+								line-height: 13px;
+							}
+						}
+						
+					}
+					.li-title{
+						font-size: 13px;
+						font-family: PingFangSC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #999999;
+					}
+					.li-info{
+						font-size: 15px;
+						font-family: PingFangSC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #333333;
+						margin-top: 5px;
+					}
+					.li-time{
+						font-size: 13px;
+						font-family: PingFangSC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #999999;
+						margin-top: 6px;
+					}
+				}
+				.li-right{
+					display: flex;
+					flex-direction: column;
+					justify-content: flex-end;
+					align-items: flex-end;
+					.lir-tag{
+						font-size: 13px;
+						font-family: PingFangSC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #FA8C53;
+						margin-bottom: 3px;
+					}
+					.lir-num{
+						font-size: 18px;
+						font-family: PingFangSC-Medium, PingFang SC;
+						font-weight: bolder;
+					}
+				}
+			}
+			
+		}
+	}
+	.null{
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+		margin-top: 150px;
+		.null-img{
+			width: 147px;
+			height: 100px;
+		}
+		.null-text{
+			font-size: 12px;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #CCCCCC;
+			margin-top: 10px;
+		}
+	}
+	.no-more{
+		font-size: 12px;
+		font-family: PingFangSC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #AAAAAA;
+		text-align: center;
+		padding: 20px 0px;
+	}
+}

src/views/wallet/incomeDetail/index.vue

@@ -0,0 +1,190 @@
+<template>
+	<div class="container">
+		<top-bar :theme="topBarTheme" :title="topBarTitle"></top-bar>
+		<div class="nav">
+			<div class="nav-item" v-for="(item,index) in navs" :key="item" @click="navClick(index)" :style="{'color':`${navIndex===index?'#9580FF':'#333333'}`}">
+				{{item}}
+			</div>
+			<div class="nav-line" :style="{'left':`${navIndex*4.986666+2.213333}rem`}"></div>
+		</div>
+		<div class="list">
+			<div class="list-item" v-for="(item,index) in listData" :key="index" @click="toWithdrawDetail(item.id)">
+				<img class="li-head" :src="item.avatar" v-if="navIndex===0"/>
+				<img class="li-head" src="~@/assets/wallet/wd.png" v-if="navIndex===1"/>
+				<div class="li-panel" :style="{'border':`${index===0?'none':''}`}">
+					<div class="li-left">
+						<div class="li-user" v-if="navIndex===0">
+							<span class="li-user-name">{{item.nick}}</span>
+							<div class="li-user-tag">
+								<img src="~@/assets/wallet/sex_male.png"  class="sex-icon" v-if="item.sex==='Male'">
+								<img src="~@/assets/wallet/sex_famale.png"  class="sex-icon" v-if="item.sex==='Famale'">
+								<span class="sex-num" :style="{'color':`${item.sex==='Male'?'#4E95E8':'#FF67C6'}`}">{{item.age}}</span>
+							</div>
+							
+						</div>
+						<div class="li-title" v-if="navIndex===1">
+							提现
+						</div>
+						<p class="li-info">{{item.operCateDesc||item.accountDesc}}</p>
+						<p class="li-time">{{item.createTime}}</p>
+					</div>
+					<div class="li-right">
+						<template v-if="navIndex===1">
+							<div class="lir-tag" v-if="item.status==='Init'">
+								待审核
+							</div>
+							<div class="lir-tag" v-else-if="item.status==='Rejected'">
+								审核拒绝
+							</div>
+							<div class="lir-tag" v-else-if="item.status==='Failed'">
+								提现失败
+							</div>
+							<div class="lir-tag" v-else>
+								提现成功
+							</div>
+							<div class="lir-num" >
+								{{item.actualFetchFen*100/10000}}元
+							</div>
+						</template>
+						<template v-if="navIndex===0">
+							<div class="lir-tag">
+								{{!item.state?'':'未结算'}}
+							</div>
+							<div class="lir-num" style="color:#FA8C53;" v-if="item.incomeFen>0">
+								+{{parseFloat(item.incomeFen*100)/10000}}元
+							</div>
+							<div class="lir-num" v-if="item.incomeFen<0">
+								{{parseFloat(item.incomeFen*100)/10000}}元
+							</div>
+						</template>
+						
+					</div>
+				</div>
+				
+			</div>
+		</div>
+		<div class="null" v-if="listData.length===0">
+			<img src="~@/assets/wallet/null1.png" class="null-img">
+			<p class="null-text">你还没有{{navIndex===1?'收益':'提现记录'}}哦～</p>
+		</div>
+		<div class="no-more" v-if="listData.length===total&&total!==0">
+			没有更多了哦~
+		</div>
+		<div class="null-box">
+			
+		</div>
+	</div>
+</template>
+
+<script>
+	import topBar from "@/views/wallet/components/topBar.vue";
+	import {isMobile,isIphoneX,isSafari,toDecimal2} from '@/util/index.js';
+	export default {
+	    name: "incomeDetail",
+		components:{topBar},
+	    data() {
+			return{
+				topBarTheme:'black',
+				topBarTitle:'收益明细',
+				navs:['收益记录','提现记录'],
+				navIndex:0,
+				options:{
+					pageNum:1,
+					pageSize:20
+				},
+				listData:[],
+				total:0
+			}
+		},
+		mounted() {
+			window.addEventListener("scroll", this.handleScroll, true);
+			if(this.$route.params.active){
+				this.navIndex=Number(this.$route.params.active);
+			}
+			else if(sessionStorage.incomeDetailNavIndex){
+				this.navIndex=Number(sessionStorage.incomeDetailNavIndex);
+			}
+			switch(this.navIndex){
+				case 0:this.getIncomeList();break;
+				case 1:this.getWithdrawRecords();break;
+			}
+		},
+		methods:{
+			handleScroll(){
+				if(this.listData.length>=this.total){return;}
+				let scrollTop = document.documentElement.scrollTop;//滚动高度
+				let clientHeight = document.documentElement.clientHeight;//可视高度
+				let scrollHeight = document.documentElement.scrollHeight;//内容高度
+				if(scrollTop+clientHeight>=scrollHeight){
+					this.options.pageNum++;
+					if(this.navIndex===0){
+						this.getIncomeList();
+					}
+					else{
+						this.getWithdrawRecords();
+					}
+				}
+				
+			},
+			toWithdrawDetail(id){
+				if(this.navIndex===0){return;}
+				this.$router.push({name:'withdrawResult',params:{id:id,isRecord:true}});
+			},
+			navClick(index){
+				if(index===this.navIndex){return}
+				this.navIndex=index;
+				sessionStorage.setItem('incomeDetailNavIndex',index);
+				this.options.pageNum=1;
+				this.total=0;
+				this.listData=[];
+				if(this.navIndex===0){
+					this.getIncomeList();
+				}
+				else{
+					this.getWithdrawRecords();
+				}
+			},
+			getIncomeList(){
+				this.$toast.loading({
+					message: '加载中...',
+					forbidClick: true,
+					duration:0
+				});
+				this.$api.bag.incomeList(this.options).then(res=>{
+					if(res.status==='Succ'){
+						this.$toast.clear();
+						this.listData=[...this.listData,...res.data.list];
+						this.total=res.data.total
+					}
+				}).catch(err=>{
+					this.$toast.clear();
+					this.$toast.fail(err.msg);
+				});
+			},
+			getWithdrawRecords(){
+				this.$toast.loading({
+					message: '加载中...',
+					forbidClick: true,
+					duration:0
+				});
+				this.$api.bag.loadMyWithdrawRecords(this.options).then(res=>{
+					console.log(res)
+					if(res.status==='Succ'){
+						this.$toast.clear();
+						this.listData=[...this.listData,...res.data.records];
+						this.total=res.data.page.recordCount;
+						
+						
+					}
+				}).catch(err=>{
+					this.$toast.clear();
+					this.$toast.fail(err.msg);
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import './index.scss';
+</style>

src/views/wallet/walletHome/index.scss

@@ -0,0 +1,337 @@
+.container{
+	width: 100%;
+	background-color: #F7F7F7;
+	.panel{
+		background: #FFFFFF;
+		border-radius: 10px;
+		margin: 0 auto;
+		width: 315px;
+		padding: 32px 24px;
+		box-sizing: border-box;
+		.p-title{
+			font-size: 18px;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #323038;
+			line-height: 25px;
+			text-align: center;
+		}
+		.p-text{
+			font-size: 14px;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #999999;
+			margin-top: 14px;
+		}
+	}
+	.modal{
+		position: fixed;
+		z-index: 20;
+		width: 100vw;
+		height: 100vh;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: rgba($color: #000000, $alpha: 0.7);
+		backdrop-filter:blur(5px);
+		.m-panel{
+			width: 315px;
+			background-color: #ffffff;
+			border-radius: 20px;
+			padding: 30px;
+			box-sizing: border-box;
+			.m-title{
+				font-size: 20px;
+				line-height: 28px;
+				color: #1C1C1E;
+				font-weight: bold;
+			}
+			.phone-input{
+				border: none;
+				outline: none;
+				width: 255px;
+				height: 44px;
+				border-bottom: 0.5px solid #f1f1f1;
+				font-size: 22px;
+				margin-top: 48px;
+				&::placeholder{
+					font-size: 18px;
+					line-height: 25px;
+					color: #c5c5c5;
+				}
+			}
+			.warn{
+				color:#FF0000;
+				font-size: 11px;
+				line-height: 16px;
+				height: 16px;
+				margin-top: 8px;
+				transition: all 0.3s;
+				text-indent: 10px;
+			}
+			.m-inputbox{
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-top: 20px;
+				.code-input{
+					border: none;
+					outline: none;
+					width: 160px;
+					height: 44px;
+					border-bottom: 0.5px solid #f1f1f1;
+					font-size: 22px;
+					&::placeholder{
+						font-size: 18px;
+						line-height: 25px;
+						color: #c5c5c5;
+					}
+				}
+				.m-code{
+					font-size: 14px;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+				}
+			}
+			.main-btn{
+				width: 255px;
+				height: 44px;
+				background-color: #8F61FF;
+				color: #ffffff;
+				font-size: 16px;
+				line-height: 44px;
+				font-weight: bold;
+				border-radius: 30px;
+				text-align: center;
+				box-sizing: border-box;
+				
+			}
+			.v-btn{
+				background-color: #8F61FF;
+				color: #ffffff;
+				margin-top: 30px;
+			}
+		}
+	}
+	.top-box{
+		width: 100%;
+		position: relative;
+		.top-bg{
+			width: 100%;
+			
+		}
+		.top-info{
+			margin: 0px 12px 0px 12px;
+			border-radius: 10px;
+			position: relative;
+			z-index: 2;
+			margin-top:-40px;
+			color: #ffffff;
+			height: 30px;
+			transform: translateY(-160px);
+			font-size: 16px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+		}
+		.top-card{
+			background-color: #ffffff;
+			margin: 12px 10px 0px 12px;
+			border-radius: 10px;
+			position: relative;
+			z-index: 1;
+			margin-top:-150px;
+			
+			.line{
+				display: flex;
+				justify-content: flex-end;
+				align-items: center;
+				.tag{
+					width: 60px;
+					height: 32px;
+					background: #F4F2FF;
+					border-radius: 0px 10px 0px 10px;
+					font-size: 14px;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: #9580FF;
+					line-height: 32px;
+					text-align: center;
+				}
+			}
+			.line1{
+				display: flex;
+				justify-content: flex-start;
+				align-items: center;
+				padding: 0px 20px;
+				.yd{
+					width: 20px;
+					height: 20px;
+				}
+				.yd-text{
+					font-size: 14px;
+					color: #999999;
+					margin-left: 5px;
+					
+				}
+			}
+			.line2{
+				padding: 8px 20px;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				.label{
+					font-size: 48px;
+					font-family: DIN-Medium, DIN;
+					font-weight: bold;
+					color: #333333;
+					line-height: 54px;
+				}
+				.top-btn{
+					width: 100px;
+					height: 44px;
+					background: #9580FF;
+					border-radius: 24px;
+					font-size: 16px;
+					font-family: PingFangSC-Medium, PingFang SC;
+					font-weight: 500;
+					color: #FFFFFF;
+					line-height: 44px;
+					text-align: center;
+				}
+			}
+			.text{
+				font-size: 12px;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #B1B1B3;
+				line-height: 17px;
+				padding: 16px 20px;
+			}
+		}
+	}
+	.content-box{
+		margin-top: 30px;
+		.title-box{
+			padding: 0px 20px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			.title{
+				font-size: 16px;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #323038;
+			}
+			.right-box{
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				.right-text{
+					font-size: 14px;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: #999999;
+				}
+				.right{
+					width: 17px;
+					height: 15px;
+				}
+			}
+		}
+		.content-card{
+			margin: 20px 12px;
+			background: #FEFFFE;
+			border-radius: 8px;
+			padding: 37px 20px;
+			.tip-box{
+				display: flex;
+				justify-content: flex-start;
+				align-items: center;
+				.tip{
+					font-size: 13px;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: #999999;
+					line-height: 18px;
+				}
+				.tip-img{
+					width: 16px;
+					height: 16px;
+					margin-left: 8px;
+					
+				}
+			}
+			.content-label{
+				font-size: 48px;
+				font-family: DIN-Medium, DIN;
+				font-weight: bold;
+				color: #333333;
+				line-height: 54px;
+				margin-top: 9px;
+			}
+			.content-tabs{
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-top: 44px;
+				.ct-item{
+					flex: 1;
+					.cti-text{
+						font-size: 13px;
+						font-family: PingFangSC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #999999;
+						line-height: 18px;
+					}
+					.cti-num{
+						font-size: 20px;
+						font-family: DIN-Medium, DIN;
+						font-weight: 500;
+						color: #333333;
+						line-height: 22px;
+						margin-top: 8px;
+						font-weight: bolder;
+					}
+				}
+			}
+			.btn-box{
+				width: 100%;
+				box-sizing: border-box;
+				margin-top: 32px;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				.bb-item1{
+					width: 150px;
+					height: 44px;
+					border-radius: 25px;
+					border: 1px solid #E4DEFF;
+					font-size: 16px;
+					font-family: PingFangSC-Medium, PingFang SC;
+					font-weight: bolder;
+					color: #A796FF;
+					line-height: 44px;
+					text-align: center;
+				}
+				.bb-item2{
+					width: 150px;
+					height: 44px;
+					background: #FFC107;
+					border-radius: 25px;
+					font-size: 16px;
+					font-family: PingFangSC-Medium, PingFang SC;
+					font-weight: bolder;
+					color: #FFFFFF;
+					line-height: 44px;
+					text-align: center;
+				}
+			}
+		}
+	}
+	.null-box{
+		width: 100vw;
+		height: 34px;
+		background-color: #F7F7F7;
+	}
+}

src/views/wallet/walletHome/index.vue

@@ -0,0 +1,215 @@
+<template>
+	<div class="container">
+		<top-bar :theme="topBarTheme" :isBack="true"></top-bar>
+		<van-popup v-model="popup1" round closeable>
+			<div class="panel">
+				<p class="p-title">可提现金额(元)</p>
+				<p class="p-text">1.可提现金额可用于提现或者兑换颜豆；</p>
+				<p class="p-text">2.单次最低领取{{withdrawMyInfo.singleMinFen*100/10000}}元，每日累计最多领取{{withdrawMyInfo.singleDayLimitFen*100/10000}}元。</p>
+			</div>
+		</van-popup>
+		<van-popup v-model="popup2" round closeable>
+			<div class="panel">
+				<p class="p-title">暂不可提现金额(元)</p>
+				<p class="p-text">收益3天内无被举报、可疑行为，则3天后自动结算收益，将不可提现金额转为可提现金额。</p>
+			</div>
+		</van-popup>
+		<div class="top-box">
+			<img src="~@/assets/wallet/wallet_bg.png" alt="wallet" class="top-bg">
+			<div class="top-card">
+				<div class="line">
+					<div class="tag"  @click="toPage('ydDetail')">
+						明细
+					</div>
+				</div>
+				<div class="line1">
+					<img src="~@/assets/wallet/yd.png" class="yd">
+					<p class="yd-text">颜豆(个)</p>
+				</div>
+				<div class="line2">
+					<p class="label">
+						{{walletDetail.coinNum||'0'}}
+					</p>
+					<div class="top-btn" @click="toRecharge">
+						充值
+					</div>
+				</div>
+				<div class="text">
+					颜豆可用于兑换权益卡、礼物、解锁相册和查看红包照片。
+				</div>
+			</div>
+		</div>
+		<div class="content-box">
+			<div class="title-box">
+				<p class="title">我的收益</p>
+				<div class="right-box"  @click="toIncomeDetail('incomeDetail')">
+					<p class="right-text">收益明细</p>
+					<img src="~@/assets/wallet/right.png" class="right">
+				</div>
+			</div>
+			<div class="content-card">
+				<div class="tip-box">
+					<p class="tip">可提现金额(元)</p>
+					<img src="~@/assets/wallet/att.png" class="tip-img" @click="showPopup1">
+				</div>
+				<p class="content-label">{{walletDetail.canAmountFen||'0.00'}}</p>
+				<div class="content-tabs">
+					<div class="ct-item">
+						<p class="cti-text">累计已赚取(元)</p>
+						<p class="cti-num">{{walletDetail.totalAmountFen||'0.00'}}</p>
+					</div>
+					<div class="ct-item">
+						<div class="tip-box">
+							<p class="tip">暂不可提现金额(元)</p>
+							<img src="~@/assets/wallet/att.png" class="tip-img" @click="showPopup2">
+						</div>
+						<p class="cti-num">{{walletDetail.cannotAmountFen||'0.00'}}</p>
+					</div>
+				</div>
+				<div class="btn-box">
+					<div class="bb-item1" @click="toPage('walletWithdraw')">
+						提现
+					</div>
+					<div class="bb-item2" @click="toPage('exchange')">
+						兑换颜豆
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="null-box">
+			
+		</div>
+	</div>
+</template>
+
+<script>
+	import topBar from "../components/topBar.vue";
+	import {isMobile,isIphoneX,isSafari,toDecimal2} from '@/util/index.js';
+	export default {
+	    name: "index",
+		components:{topBar},
+	    data() {
+			return{
+				topBarTheme:'main',
+				popup1:false,
+				popup2:false,
+				timeStr:'获取验证码',
+				timer:null,
+				time:60,
+				phoneWarnTip:null,
+				codeWarnTip:null,
+				getCodeOption:{
+					authenticate: "authenticate",
+					phone: "",
+					scene: "VerCodeLogin",
+					token: "token",
+					flagH5:true
+				},
+				isGetCode:false,
+				verCodeOption:{
+					scene: "VerCodeLogin",
+					verCodeLogin:{
+						phone: "",
+						verCode: "",
+						flagH5:true
+					}
+				},
+				walletDetail:{},//我的钱包详情
+			}
+		},
+		computed:{
+			withdrawInfo(){
+				return this.$store.state.withdrawInfo||{};
+			},
+			withdrawMyInfo(){
+				return this.$store.state.withdrawMyInfo||{};
+			},
+			withdrawUserInfo(){
+				return this.$store.state.withdrawUserInfo||localStorage.getItem('user');
+			}
+		},
+		created() {
+		},
+		mounted() {
+			this.getMyInfo();
+			this.getWithdrawInfo();
+			
+		},
+		methods:{
+			showPopup1(){
+				this.popup1=true;
+			},
+			showPopup2(){
+				this.popup2=true;
+			},
+			toPage(path){
+				this.$router.push({name:path})
+			},
+			toIncomeDetail(path){
+				this.$router.push({name:path,params:{active:'0'}});
+			},
+			toRecharge(){
+				window.location.href=`${window.location.origin}/recharge?phone=${this.getCodeOption.phone||JSON.parse(localStorage.getItem('w_userInfo')).phone}`;
+			},
+			getWithdrawInfo(){
+				this.$toast.loading({
+					message: '加载中...',
+					forbidClick: true,
+					duration:0
+				});
+				this.$api.bag.loadMyWithdrawalInfo({completeUser:this.$store.state.withdrawUserInfo}).then(res=>{
+					if(res.status==='Succ'){
+						this.$toast.clear();
+						res.data.incomeCanWithdrawFen=toDecimal2(res.data.incomeCanWithdrawFen);
+						res.data.rule=res.data.rule.split('\n\n');
+						res.data.notice=res.data.notice.split('\n\n');
+						this.$store.commit('setWithdrawInfo',res.data);
+						localStorage.setItem('w_WithdrawInfo',JSON.stringify(res.data));
+					}
+				}).catch(err=>{
+					this.$toast.clear();
+					this.$toast.fail(err.msg);
+				});
+				
+			},
+			getMyInfo(){
+				this.$toast.loading({
+					message: '加载中...',
+					forbidClick: true,
+					duration:0
+				});
+				this.$api.bag.my().then(res=>{
+					if(res.status==='Succ'){
+						this.$toast.clear();
+						res.data.canAmountFen=toDecimal2(res.data.canAmountFen);
+						res.data.cannotAmountFen=toDecimal2(res.data.cannotAmountFen);
+						res.data.totalAmountFen=toDecimal2(res.data.totalAmountFen);
+						this.walletDetail=res.data;
+						this.$store.commit('setWithdrawMyInfo',res.data);
+						localStorage.setItem('w_WithdrawMyInfo',JSON.stringify(res.data));
+					}
+				}).catch(err=>{
+					this.$toast.clear();
+					this.$toast.fail(err.msg);
+				});
+				
+			},
+			safeQuit(){
+				this.$dialog.confirm({
+				  title: '提示',
+				  message: '安全退出将清除登录数据，是否确认退出？',
+				}).then(() => {
+					localStorage.clear();
+					window.location.href=window.location.origin+window.location.pathname
+				  }).catch(() => {
+					// on cancel
+				  });
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import './index.scss';
+</style>

src/views/wallet/walletWithdraw/index.scss

@@ -0,0 +1,255 @@
+.container{
+	background-color: #F7F7F7;
+	width: 100vw;
+	.panel{
+		background: #FFFFFF;
+		border-radius: 10px;
+		margin: 0 auto;
+		width: 315px;
+		padding: 32px 24px;
+		box-sizing: border-box;
+		
+		.p-title{
+			font-size: 18px;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #323038;
+			line-height: 25px;
+			text-align: center;
+		}
+		.p-text{
+			font-size: 14px;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #999999;
+			margin-top: 14px;
+		}
+		.p-box{
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			flex-direction: column;
+			.p-img{
+				width: 95px;
+				height: 80px;
+			}
+			.p-text{
+				text-align: center;
+			}
+			.p-large{
+				font-size: 18px;
+				font-family: PingFangSC-Medium, PingFang SC;
+				font-weight: bolder;
+				color: #323038;
+				margin: 15px 0px 14px 0px;
+			}
+			.p-btn{
+				width: 266px;
+				height: 48px;
+				background: #9580FF;
+				border-radius: 25px;
+				font-size: 16px;
+				font-family: PingFangSC-Medium, PingFang SC;
+				font-weight: 500;
+				color: #FFFFFF;
+				line-height: 48px;
+				text-align: center;
+				margin-top: 15px;
+			}
+		}
+		
+	}
+	.top-box{
+		.top_bg{
+			width: 100vw;
+			position: relative;
+			z-index: 0;
+		}
+		.top-info{
+			position: relative;
+			z-index: 10;
+			padding: 26px 16px;
+			display: flex;
+			justify-content: flex-start;
+			align-items: flex-start;
+			flex-direction: column;
+			margin-top: -160px;
+			.top-label{
+				font-size: 13px;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #FFFFFF;
+			}
+			.top-price-box{
+				
+				padding: 9px 0px;
+				display: flex;
+				justify-content: flex-start;
+				align-items: baseline;
+				.tpb-unit{
+					width: 20px;
+					height: 20px;
+				}
+				.tpb-num{
+					font-size: 48px;
+					font-family: DIN-Medium, DIN;
+					font-weight: 500;
+					color: #FFFFFF;
+				}
+			}
+		}
+	}
+	.form-box{
+		position: relative;
+		width: 351px;
+		background: #FFFFFF;
+		border-radius: 10px;
+		box-sizing: border-box;
+		margin: 0px 12px;
+		margin-top: -20px;
+		z-index: 10;
+		
+		.form-title{
+			font-size: 16px;
+			font-family: PingFangSC-Medium, PingFang SC;
+			font-weight: bolder;
+			color: #333333;
+			padding: 16px 16px 0px 16px;
+		}
+		.form-error{
+			height: 15px;
+			font-size: 12px;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #FF6A6A;
+			padding: 3px 16px 3px 16px;
+		}
+		.form-input-box{
+			padding: 15px 16px 0px 16px;
+			padding-bottom: 9px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			border-bottom: 1px solid #EEEEEE;
+			.fib-left{
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				.fib-img{
+					width: 30px;
+					height: 30px;
+				}
+				.fib-input{
+					outline: none;
+					border: none;
+					width: 180px;
+					font-size: 30px;
+					font-family: DIN-Medium, DIN;
+					font-weight: bolder;
+					box-sizing: border-box;
+					transition: all .3s;
+				}
+			}
+			.fib-right{
+				font-size: 13px;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #795DB4;
+			}
+		}
+		.form-type-box{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 22px 16px;
+			.ftb-label{
+				font-size: 13px;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #333333;
+			}
+			.ftb-option{
+				display: flex;
+				justify-content: flex-start;
+				align-items: center;
+				.ftb-ali{
+					width: 18px;
+					height: 18px;
+				}
+				.ftb-text{
+					font-size: 13px;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: #B1B1B3;
+					margin: 0px 4px 0px 4px;
+					line-height: 18px;
+				}
+				.ftb-link{
+					width: 15px;
+					height: 15px;
+					transform: translateY(1px);
+				}
+			}
+		}
+		.btn-box{
+			margin: 0 10px;
+			width: 331px;
+			height: 48px;
+			background: #E3DDFE;
+			border-radius: 25px;
+			font-size: 16px;
+			font-family: PingFangSC-Semibold, PingFang SC;
+			font-weight: 600;
+			color: #FFFFFF;
+			line-height: 48px;
+			text-align: center;
+			transition: all .3s;
+		}
+		.prot-box{
+			font-size: 11px;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #999999;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			margin-top: 15px;
+			padding-bottom: 18px;
+		}
+	}
+	.tip-box{
+		margin: 17px 12px;
+		width: 351px;
+		height: 332px;
+		background: #FFFFFF;
+		border-radius: 10px;
+		padding: 15px 19px;
+		box-sizing: border-box;
+		.tip-title{
+			font-size: 15px;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #B1B1B3;
+			margin-bottom: 10px;
+		}
+		.tip-text{
+			font-size: 13px;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #B1B1B3;
+			line-height: 18px;
+			margin-bottom: 15px;
+		}
+	}
+	.null-box{
+		width: 100vw;
+		height: 34px;
+		background-color: #F7F7F7;
+	}
+}
+.van-cell{
+	padding-left: 0 !important;
+}
+input::-webkit-input-placeholder {  /* WebKit browsers*/ 
+    font-size: 16px;
+}

src/views/wallet/walletWithdraw/index.vue

@@ -0,0 +1,442 @@
+<template>
+	<div class="container">
+		<top-bar :theme="topBarTheme" 
+		:title="topBarTitle" 
+		:action="'showQuestion'" 
+		:actionText="topBarActionText" 
+		@showQuestion="showQuestion"
+		:backAction="'goHome'"
+		@goHome="goHome">
+		</top-bar>
+		<van-popup v-model="topBarQuestionPopup" round closeable>
+			<div class="panel">
+				<p class="p-title">提现规则</p>
+				<p class="p-text" v-for="(item,index) in withdrawInfo.rule" :key="index">{{item}}</p>
+			</div>
+		</van-popup>
+		<van-popup v-model="showFacePanel" round closeable>
+			<div class="panel">
+				<div class="p-box">
+					<img src="~@/assets/wallet/valid.png" class="p-img">
+					<p class="p-large">请完成面容识别</p>
+					<p class="p-text">为保障您的收益资金安全，请在15分钟内完成本人验证。</p>
+					<div class="p-btn" @click="tofaceAuth">
+						去验证
+					</div>
+				</div>
+	
+			</div>
+		</van-popup>
+		<div class="top-box">
+			<img src="~@/assets/wallet/withdraw_bg.png" class="top_bg">
+			<div class="top-info">
+				<div class="top-label">
+					可提现金额(元)
+				</div>
+				<div class="top-price-box">
+					<img src="~@/assets/wallet/unit.png" class="tpb-unit">
+					<span class="tpb-num">{{withdrawInfo.incomeCanWithdrawFen}}</span>
+				</div>
+			</div>
+		</div>
+		<div class="form-box">
+			<div class="form-title">提现金额</div>
+			<div class="form-error" :style="{'opacity':`${inputError?1:0}`}">
+				{{inputErrorText}}
+			</div>
+			<div class="form-input-box">
+				<div class="fib-left">
+					<img src="~@/assets/wallet/unit_black.png" class="fib-img" v-if="!inputError">
+					<img src="~@/assets/wallet/unit_red.png" class="fib-img" v-else>
+					 <input v-model="withDrawNum" 
+					 type="digit" 
+					 class="fib-input"
+					 maxlength="5"
+					 v-on:keyup="numInput($event)"
+					 :style="{'color':`${inputError?'#FF6A6A':''}`}"
+					 :placeholder="`请输入${withdrawMyInfo.singleMinFen*100/10000}以上的整数`" />
+				</div>
+				<div class="fib-right" v-if="withdrawInfo.incomeCanWithdrawFen<=1000" @click="allWD">
+					全部提现
+				</div>
+			</div>
+			<div class="form-type-box">
+				<div class="ftb-label">
+					提现至
+				</div>
+				<div class="ftb-option" @click="toPage('boundAli')">
+					<img src="~@/assets/wallet/ali_pay.png" class="ftb-ali">
+					<p class="ftb-text" v-if="withdrawInfo.aliPayId&&withdrawInfo.aliPayId!==null&&withdrawInfo.aliPayId!==''">{{withdrawInfo.aliPayUserName}}({{withdrawInfo.aliPayId}})</p>
+					<p class="ftb-text" v-else>绑定支付宝</p>
+					<img src="~@/assets/wallet/ali_link.png" class="ftb-link">
+				</div>
+			</div>
+			<div class="btn-box" @click="withDraw" :style="{'background':`${!inputError&&withDrawNum>0?'#9580FF':'#E3DDFE'}`}">
+				提现
+			</div>
+			<div class="prot-box">
+				<span class="prot-text">点击“提现”代表你同意</span><span style="color:#9580FF;text-decoration: underline;" @click="toLink(withdrawInfo.agreeUrl)">《{{withdrawInfo.agree}}》</span>
+			</div>
+		</div>
+		<div class="tip-box">
+			<div class="tip-title">
+				提现须知
+			</div>
+			<p class="tip-text" v-for="(item,index) in withdrawInfo.notice" :key="index">{{item}}</p>
+		</div>
+		<div class="null-box">
+			
+		</div>
+	</div>
+</template>
+
+<script>
+	import topBar from "@/views/wallet/components/topBar.vue";
+	import {getBiztoken,getFaceResult} from '@/util/faceAuth.js';
+	import {isMobile,isIphoneX,isSafari,toDecimal2} from '@/util/index.js';
+	export default {
+		components:{topBar},
+	    name: "walletWithdraw",
+	    data() {
+			return{
+				topBarTitle:'提现',
+				topBarTheme:'white',
+				topBarQuestionPopup:false,
+				topBarActionText:'遇到问题',
+				withDrawNum:null,
+				totalNum:0,
+				inputErrorText:'',
+				inputError:false,
+				showFacePanel:false,
+			}
+		},
+		created() {
+			if(location.href.indexOf('result_id')!==-1&&localStorage.resultOrderId!==localStorage.createWithdrawalOrderId){//获取活体检测结果
+				this.getResult();
+			}
+		},
+		mounted() {
+			this.getMyInfo();
+			this.getWithdrawInfo();
+			this.$nextTick(() => {
+			      // 监听滚动条
+			      window.addEventListener("scroll", this.handleScroll);
+			});
+		},
+		computed:{
+			withdrawInfo(){
+				return this.$store.state.withdrawInfo;
+			},
+			withdrawMyInfo(){
+				return this.$store.state.withdrawMyInfo;
+			},
+		},
+		methods:{
+			goHome(){
+				this.$router.replace({name:'walletHome'});
+			},
+			showQuestion(){
+				this.topBarQuestionPopup=true;
+			},
+			toPage(path){
+				this.$router.push({name:path})
+			},
+			numInput(e){
+				let value=Number(e.target.value);
+				console.log(value,this.totalNum)
+				if(value===0){
+					this.inputError=false;
+					this.inputErrorText='';
+					return;
+				}
+				if(value>this.totalNum){
+					this.inputError=true;
+					this.inputErrorText='输入金额超出可提现金额'
+					return;
+				}
+				if(value>this.singelNum){
+					this.inputError=true;
+					this.inputErrorText='单次最高提现1000元'
+					return;
+				}
+				if(value<this.$store.state.withdrawMyInfo.singleMinFen*100/10000){
+					this.inputError=true;
+					this.inputErrorText=`输入金额不得小于${this.$store.state.withdrawMyInfo.singleMinFen*100/10000}元`
+					return;
+				}
+				this.inputError=false;
+				this.inputErrorText='';
+			},
+			allWD(){
+				if(parseInt(this.$store.state.withdrawInfo.incomeCanWithdrawFen)===0){return;}
+				if(parseInt(this.$store.state.withdrawInfo.incomeCanWithdrawFen)<500){
+					this.inputError=true;
+					this.inputErrorText=`输入金额不得小于${this.$store.state.withdrawMyInfo.singleMinFen*100/10000}元`
+				}
+				this.withDrawNum=parseInt(this.$store.state.withdrawInfo.incomeCanWithdrawFen);
+			},
+			withDraw(){
+				if(this.withDrawNum===''||this.withDrawNum===null||this.withDrawNum===0||this.inputError){
+					return;
+				}
+				if(!this.$store.state.withdrawInfo.aliPayId||this.$store.state.withdrawInfo.aliPayId===null||this.$store.state.withdrawInfo.aliPayId===''){
+					this.$dialog.confirm({
+						title:'提示',
+						message:'您还未绑定支付宝账号，是否前往绑定？',
+						confirmButtonColor:'#9580FF',
+						confirmButtonText:'前往',
+						showCancelButton:true
+					}).then(()=>{
+						this.$router.push({name:'boundAli'});
+					}).catch(()=>{});
+					return;
+				}
+				this.showFacePanel=true;
+			},
+			getResult(){
+				let locationHref=location.href;
+				let str=locationHref.substr(locationHref.indexOf("?")+1);
+				let arr=str.split("&");
+				let bizToken="",resultId="";
+				for(let i=0;i<arr.length;i++){
+					let name=arr[i].substring(0,arr[i].indexOf("="));
+					let value=arr[i].substr(arr[i].indexOf("=")+1);
+					if(name==='biztoken'){
+						bizToken=value;
+					}
+					if(name==='result_id'){
+						resultId=value;
+					}
+				}
+				if(bizToken!==''&&resultId!==''){
+					this.$toast.loading({
+						message: '加载中...',
+						forbidClick: true,
+						duration:0
+					});
+					getFaceResult(bizToken,resultId).then(result=>{
+						if(result.passed===true){//识别通过
+							this.$api.faceAuth.checkRealManFace({}).then(checkResult=>{//检查是否存有人脸照
+								if(checkResult.data.hasFace){//有人脸
+									this.$api.faceAuth.upload({//上传base64到oss
+										originalFilename:result.request_id+'.jpg',
+										faceImagStr:result.base64_liveness_face_image
+									}).then(media=>{
+										if(media.code===0){
+											this.$toast.loading({
+												message: '人脸比对中...',
+												forbidClick: true,
+												duration:0
+											});
+											this.$api.faceAuth.compareFace({
+												imgUrl:media.data,
+												scene:'ApplyWithdraw',
+												completeUser:this.$store.state.withdrawUserInfo,
+											}).then(compare=>{//进行人脸比对
+												if(compare.data.succ){//人脸比对成功
+													this.$toast.loading({
+														message: '提交中...',
+														forbidClick: true,
+														duration:0
+													});
+													this.$api.bag.isEffectiveWithdrawalOrder({completeUser:this.$store.state.withdrawUserInfo,orderId:localStorage.createWithdrawalOrderId}).then(ress=>{
+														if(ress.data.succ){
+															this.$api.bag.submitWithdrawalOrder({completeUser:this.$store.state.withdrawUserInfo,faceToken:compare.data.succToken,orderId:localStorage.createWithdrawalOrderId}).then(res=>{
+																this.$toast.clear();
+																if(res.data.succ){
+																	this.getMyInfo();
+																	this.$router.push({name:'withdrawResult',params:{id:localStorage.createWithdrawalOrderId,isRecord:false}});
+																}
+																else{
+																	if(res.data.needDone){
+																		 this.$dialog.alert({
+																		      message: res.data.needDone
+																		});
+																	}
+																	else{
+																		this.$dialog.alert({
+																		      message: res.data.msg
+																		});
+																	}
+																}
+															}).catch(err=>{
+																this.$dialog.alert({
+																      message: err.msg
+																});
+															})
+														}
+														else{
+															this.$toast.clear();
+															this.$dialog.alert({
+															      message: ress.data.msg
+															});
+														}
+													})
+												}else{//比对失败
+													this.$toast.clear();
+													this.$dialog.alert({
+													      message: compare.data.msg
+													});
+												}
+											}).catch(err=>{
+												this.$toast.clear();
+												this.$dialog.alert({
+													  message:err.msg
+												});
+											})
+										}
+										else{
+											this.$toast.clear();
+											this.$dialog.alert({
+											      message:media.data.msg
+											});
+										}
+										
+									}).catch(err=>{
+										this.$toast.clear();
+										this.$dialog.alert({
+										      message: err.msg
+										});
+									})
+								}
+								else{//无人脸直接兑换
+									this.$toast.loading({
+										message: '提交中...',
+										forbidClick: true,
+										duration:0
+									});
+									this.$api.bag.isEffectiveWithdrawalOrder({completeUser:this.$store.state.withdrawUserInfo,orderId:localStorage.createWithdrawalOrderId}).then(ress=>{
+										if(ress.data.succ){
+											this.$api.bag.submitWithdrawalOrder({completeUser:this.$store.state.withdrawUserInfo,faceToken:compare.data.succToken,orderId:localStorage.createWithdrawalOrderId}).then(res=>{
+												this.$toast.clear();
+												if(res.data.succ){
+													this.getMyInfo();
+													this.$router.push({name:'withdrawResult',params:{id:localStorage.createWithdrawalOrderId,isRecord:false}});
+												}
+												else{
+													if(res.data.needDone){
+														 this.$dialog.alert({
+														    message: res.data.needDone,
+														 	   //message: JSON.stringify(res),
+														 });
+													}
+													else{
+														this.$dialog.alert({
+														    message: res.data.msg,
+															// message: JSON.stringify(res),
+														});
+													}
+												}
+											})
+										}
+										else{
+											this.$toast.clear();
+											this.$dialog.alert({
+											    message: ress.data.msg,
+												// message: JSON.stringify(ress),
+											});
+										}
+									})
+								}
+							}).catch(err=>{//人脸检查失败
+								this.$toast.clear();
+								this.$dialog.alert({
+								      message: err.msg
+								});
+							})
+							
+						}else{//识别失败
+							this.$toast.clear();
+							this.$dialog.alert({
+							      message: result,
+							});
+						}
+					});
+				}
+			},
+			getWithdrawInfo(){
+				this.$toast.loading({
+					message: '加载中...',
+					forbidClick: true,
+					duration:0
+				});
+				this.$api.bag.loadMyWithdrawalInfo({completeUser:this.$store.state.withdrawUserInfo}).then(res=>{
+					if(res.status==='Succ'){
+						this.$toast.clear();
+						res.data.incomeCanWithdrawFen=toDecimal2(res.data.incomeCanWithdrawFen);
+						res.data.rule=res.data.rule.split('\n\n');
+						res.data.notice=res.data.notice.split('\n\n');
+						this.totalNum=res.data.incomeCanWithdrawFen;
+						this.$store.commit('setWithdrawInfo',res.data);
+						localStorage.setItem('w_WithdrawInfo',JSON.stringify(res.data));
+					}
+				}).catch(err=>{
+					this.$toast.clear();
+					this.$toast.fail(err.msg);
+				});
+				
+			},
+			getMyInfo(){
+				this.$toast.loading({
+					message: '加载中...',
+					forbidClick: true,
+					duration:0
+				});
+				this.$api.bag.my().then(res=>{
+					if(res.status==='Succ'){
+						this.$toast.clear();
+						res.data.canAmountFen=toDecimal2(res.data.canAmountFen);
+						res.data.cannotAmountFen=toDecimal2(res.data.cannotAmountFen);
+						res.data.totalAmountFen=toDecimal2(res.data.totalAmountFen);
+						this.walletDetail=res.data;
+						this.$store.commit('setWithdrawMyInfo',res.data);
+						localStorage.setItem('w_WithdrawMyInfo',JSON.stringify(res.data));
+					}
+				}).catch(err=>{
+					this.$toast.clear();
+					this.$toast.fail(err.msg);
+				});
+				
+			},
+			toLink(url){
+				window.location.href=url;
+			},
+			tofaceAuth(){
+				this.$toast.loading({
+					message: '加载中...',
+					forbidClick: true,
+					duration:0
+				});
+				this.$api.bag.createWithdrawalOrder({amountFen:this.withDrawNum*100,completeUser:this.$store.state.withdrawUserInfo}).then(res=>{
+					if(res.status==='Succ'){
+						localStorage.setItem('createWithdrawalOrderId',res.data.orderId);//兑换颜豆订单保存本地
+						this.$toast.clear();
+						if(res.data.succ){
+							getBiztoken(`${window.location.origin}/walletWithdraw`).then(result=>{
+								window.location.href=result;
+							}).catch(err=>{
+								console.log(err)
+							});
+						}
+					}
+				}).catch(err=>{
+					this.$toast.clear();
+					this.$toast.fail(err);
+				});
+			},
+			handleScroll(){
+				
+			  let scrollTop =window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+			  if(scrollTop>30){
+				  this.topBarTheme='black';
+			  }else{
+				  this.topBarTheme='white';
+			  }
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import './index.scss';
+</style>

src/views/wallet/withdrawResult/index.scss

@@ -0,0 +1,166 @@
+.container{
+	background-color: #F7F7F7;
+	width: 100vw;
+	min-height: 100vh;
+	.top-box{
+		width: 100%;
+		height: 291px;
+		position: relative;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+		.top-bg{
+			position: absolute;
+			width: 100%;
+			height: 291px;
+			top: 0;
+			left: 0;
+			z-index: 0;
+		}
+		.status-box{
+			margin-top: 30px;
+			position: relative;
+			z-index: 1;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			.status-img{
+				width: 17px;
+				height: 17px;
+			}
+			.status-text{
+				font-size: 16px;
+				font-family: PingFangSC-Medium, PingFang SC;
+				font-weight: 500;
+				color: #FFFFFF;
+				margin-left: 2px;
+			}
+		}
+		.status-num{
+			position: relative;
+			z-index: 1;
+			font-size: 36px;
+			font-family: DIN-Medium, DIN;
+			font-weight: bolder;
+			color: #FFFFFF;
+		}
+		
+	}
+	.wr-content{
+		position: relative;
+		z-index: 2;
+		width: 351px;
+		background: #FFFFFF;
+		border-radius: 10px;
+		margin: -30px 12px 20px 12px;
+		.wr-title{
+			font-size: 15px;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #B1B1B3;
+			padding: 10px 25px 15px 25px;
+			border-bottom: 1px solid #F5F5F5;
+		}
+		.steps{
+			padding: 22px 25px;
+			.step-item{
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding-top: 37px;
+				position: relative;
+				z-index: 1;
+				&:nth-of-type(1){
+					padding-top: 0;
+				}
+				.line{
+					content: '';
+					position: absolute;
+					top: -5px;
+					bottom: 0;
+					left:6px;
+					width: 2px;
+					height: 60px;
+					background: #795DB4;
+					z-index: 0;
+				}
+				.step-left{
+					display: flex;
+					justify-content: flex-start;
+					align-items: center;
+					.step-icon{
+						width: 15px;
+						height: 15px;
+						margin-right: 6px;
+						position: relative;
+						z-index: 1;
+					}
+					.step-text{
+						font-size: 15px;
+						font-family: PingFangSC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #795DB4;
+					}
+				}
+				.step-right{
+					font-size: 12px;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: #B1B1B3;
+				}
+			}
+		}
+		.wr-tips{
+			padding: 0px 24px 22px 24px;
+			height: 54px;
+			font-size: 13px;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #795DB4;
+		}
+	}
+	.fail-tip{
+		padding: 18px 19px;
+		width: 351px;
+		box-sizing: border-box;
+		background: #FFFFFF;
+		border-radius: 10px;
+		margin: 0px 12px 0px 12px;
+		font-size: 13px;
+		font-family: PingFangSC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #B1B1B3;
+		margin-bottom: 60px;
+	}
+	.wd-btn-normal{
+		width: 331px;
+		height: 48px;
+		background: #9580FF;
+		border-radius: 25px;
+		margin: 0px 22px 34px 22px;
+		font-size: 16px;
+		font-family: PingFangSC-Semibold, PingFang SC;
+		font-weight: 600;
+		color: #FFFFFF;
+		line-height: 48px;
+		text-align: center;
+	}
+	.wd-btn-error{
+		width: 331px;
+		height: 48px;
+		background: #FF6A6A;
+		border-radius: 25px;
+		margin: 0px 22px 34px 22px;
+		font-size: 16px;
+		font-family: PingFangSC-Semibold, PingFang SC;
+		font-weight: 600;
+		color: #FFFFFF;
+		line-height: 48px;
+		text-align: center;
+	}
+	.null-box{
+		width: 100vw;
+		height: 34px;
+	}
+}

src/views/wallet/withdrawResult/index.vue

@@ -0,0 +1,160 @@
+<template>
+	<div class="container">
+		<top-bar :theme="topBarTheme" :title="topBarTitle"></top-bar>
+		<div class="top-box">
+			<img src="~@/assets/wallet/es_bg_fail.png" class="top-bg" v-if="detailData.status==='Rejected'||detailData.status==='Failed'">
+			<img src="~@/assets/wallet/es_bg.png" class="top-bg" v-else>
+			<div class="status-box">
+				<img src="~@/assets/wallet/status1.png" class="status-img" v-if="detailData.status==='Init'||detailData.status==='Handing'">
+				<img src="~@/assets/wallet/status2.png" class="status-img" v-if="detailData.status==='Approved'||detailData.status==='Success'">
+				<img src="~@/assets/wallet/status3.png" class="status-img" v-if="detailData.status==='Rejected'||detailData.status==='Failed'">
+				<p class="status-text" v-if="detailData.status==='Init'">人工审核中</p>
+				<p class="status-text" v-if="detailData.status==='Approved'">审核通过</p>
+				<p class="status-text" v-if="detailData.status==='Rejected'">审核拒绝</p>
+				<p class="status-text" v-if="detailData.status==='Handing'">打款中</p>
+				<p class="status-text" v-if="detailData.status==='Success'">提现成功</p>
+				<p class="status-text" v-if="detailData.status==='Failed'">提现失败</p>
+			</div>
+			<div class="status-num">
+				{{detailData.actualFetchFen*100/10000||0}}元
+			</div>
+		</div>
+		<div class="wr-content">
+			<div class="wr-title">
+				提现进度
+			</div>
+			<div class="steps">
+				<div class="step-item">
+					<div class="step-left">
+						<img src="~@/assets/wallet/status4.png" class="step-icon">
+						<p class="step-text">提交申请</p>
+					</div>
+					<div class="step-right">
+						{{detailData.submitTime}}
+					</div>
+				</div>
+				<div class="step-item">
+					<div class="step-left">
+						<img src="~@/assets/wallet/status5.png" class="step-icon">
+						<p class="step-text">人工审核中</p>
+					</div>
+					<div class="step-right">
+						{{detailData.auditTime}}
+					</div>
+					<div class="line"></div>
+				</div>
+				<div class="step-item" v-if="detailData.status==='Handing'||detailData.status==='Success'">
+					<div class="step-left">
+						<img src="~@/assets/wallet/status5.png" class="step-icon">
+						<p class="step-text">打款中</p>
+					</div>
+					<div class="step-right">
+						{{detailData.handleTime}}
+					</div>
+					<div class="line"></div>
+				</div>
+				<div class="step-item" v-if="detailData.status==='Success'">
+					<div class="step-left">
+						<img src="~@/assets/wallet/status4.png" class="step-icon">
+						<p class="step-text">提现成功</p>
+					</div>
+					<div class="step-right">
+						{{detailData.handleTime}}
+					</div>
+					<div class="line"></div>
+				</div>
+				<div class="step-item" v-if="detailData.status==='Rejected'">
+					<div class="step-left">
+						<img src="~@/assets/wallet/status6.png" class="step-icon">
+						<p class="step-text" style="color: #FF6A6A;">审核拒绝</p>
+					</div>
+					<div class="step-right">
+						{{detailData.auditTime}}
+					</div>
+					<div class="line"></div>
+				</div>
+				<div class="step-item" v-if="detailData.status==='Failed'">
+					<div class="step-left">
+						<img src="~@/assets/wallet/status6.png" class="step-icon">
+						<p class="step-text" style="color: #FF6A6A;">提现失败</p>
+					</div>
+					<div class="step-right">
+						{{detailData.handleTime}}
+					</div>
+					<div class="line"></div>
+				</div>
+			</div>
+			<div class="wr-tips" v-if="detailData.status==='Init'||detailData.status==='Handing'">
+				我们将在3-10个工作日内处理你的提现申请，请耐心等待。关注微信公众号<span style="color: #FF6A6A;">“糖果公园APP”</span>可向客服查询提现进度。
+			</div>
+		</div>
+		<div class="fail-tip" v-if="detailData.needDone||detailData.auditMsg">
+			{{detailData.needDone||detailData.auditMsg}}
+		</div>
+		
+		<div class="wd-btn-error" v-if="detailData.status==='Failed'||detailData.status==='Rejected'" @click="reWithdraw">
+			重新提现
+		</div>
+		<div class="wd-btn-normal" v-else @click="back">
+			知道了
+		</div>
+		<div class="null-box">
+			
+		</div>
+	</div>
+</template>
+
+<script>
+	import topBar from "@/views/wallet/components/topBar.vue";
+	export default {
+	    name: "incomeDetail",
+		components:{topBar},
+	    data() {
+			return{
+				topBarTheme:'white',
+				topBarTitle:'',
+				orderId:null,
+				detailData:{},
+				routeFromIsRecord:false
+			}
+		},
+		mounted() {
+			this.orderId=this.$route.params.id||localStorage.createWithdrawalOrderId;
+			this.routeFromIsRecord=this.$route.params.isRecord;
+			if(!this.routeFromIsRecord){
+				localStorage.setItem('resultOrderId',this.orderId)
+			}
+			this.getDetailData();
+		},
+		methods:{
+			navClick(index){
+				if(index===this.navIndex){return}
+				this.navIndex=index;
+			},
+			reWithdraw(){
+				this.$router.replace({name:'walletWithdraw'})
+			},
+			back(){
+				if(this.routeFromIsRecord){
+					this.$router.back();
+				}
+				else{
+					this.$router.replace({name:'walletWithdraw'});
+				}
+			},
+			getDetailData(){
+				this.$api.bag.loadMyWithdrawDetail({id:this.orderId}).then(res=>{
+					if(res.data.succ){
+						this.detailData=res.data;
+					}
+				})
+			}
+		},
+		
+		
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import './index.scss';
+</style>

src/views/wallet/ydDetail/index.scss

@@ -0,0 +1,67 @@
+.container{
+	background-color: #F7F7F7;
+	width: 100vw;
+	min-height: 100vh;
+	.list{
+		padding: 60px 16px 0px 16px;
+		background-color: #ffffff;
+		.list-item{
+			padding:16px 0px;
+			background-color: #ffffff;
+			border-top: 1px solid #EEEEEE;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			&:nth-of-type(1){
+				border: none;
+			}
+			.li-left{
+				.li-info{
+					font-size: 15px;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: #333333;
+				}
+				.li-time{
+					font-size: 13px;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: #999999;
+					margin-top: 6px;
+				}
+			}
+			.li-right{
+				font-size: 18px;
+				font-family: PingFangSC-Medium, PingFang SC;
+				font-weight: bolder;
+			}
+		}
+	}
+	.null{
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+		padding-top: 252px;
+		.null-img{
+			width: 147px;
+			height: 100px;
+		}
+		.null-text{
+			font-size: 12px;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #CCCCCC;
+			margin-top: 10px;
+		}
+	}
+	.no-more{
+		font-size: 12px;
+		font-family: PingFangSC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #AAAAAA;
+		text-align: center;
+		padding: 20px 0px;
+	}
+}

src/views/wallet/ydDetail/index.vue

@@ -0,0 +1,88 @@
+<template>
+	<div class="container">
+		<top-bar :theme="topBarTheme" :title="topBarTitle"></top-bar>
+		<div class="list" v-if="listData.length>0">
+			<div class="list-item" v-for="(item,index) in listData" :key="index">
+				<div class="li-left">
+					<p class="li-info">{{item.desc}}</p>
+					<p class="li-time">{{item.createTime}}</p>
+				</div>
+				<div class="li-right" style="color:#FA8C53;" v-if="item.coinNum>0">
+					+{{item.coinNum}}
+				</div>
+				<div class="li-right" v-else>
+					{{item.coinNum}}
+				</div>
+			</div>
+		</div>
+		<div class="null"  v-if="listData.length===0">
+			<img src="~@/assets/wallet/null.png" class="null-img">
+			<p class="null-text">暂无明细</p>
+		</div>
+		<div class="no-more"  v-if="listData.length===total&&total!==0">
+			没有更多了哦~
+		</div>
+		<div class="null-box">
+			
+		</div>
+	</div>
+</template>
+
+<script>
+	import topBar from "@/views/wallet/components/topBar.vue";
+	import {isMobile,isIphoneX,isSafari,toDecimal2} from '@/util/index.js';
+	export default {
+		components:{topBar},
+	    name: "ydDetail",
+	    data() {
+			return{
+				topBarTheme:'black',
+				topBarTitle:'颜豆明细',
+				options:{
+					pageNum:1,
+					pageSize:20
+				},
+				listData:[],
+				total:0
+			}
+		},
+		mounted() {
+			window.addEventListener("scroll", this.handleScroll, true);
+			this.getCoinList();
+		},
+		methods:{
+			handleScroll(){
+				if(this.listData.length>=this.total){return;}
+				let scrollTop = document.documentElement.scrollTop;//滚动高度
+				let clientHeight = document.documentElement.clientHeight;//可视高度
+				let scrollHeight = document.documentElement.scrollHeight;//内容高度
+				if(scrollTop+clientHeight>=scrollHeight){
+					this.options.pageNum++;
+					this.getCoinList();
+				}
+				
+			},
+			getCoinList(){
+				this.$toast.loading({
+					message: '加载中...',
+					forbidClick: true,
+					duration:0
+				});
+				this.$api.bag.coinList(this.options).then(res=>{
+					if(res.status==='Succ'){
+						this.$toast.clear();
+						this.listData=[...this.listData,...res.data.list];
+						this.total=res.data.total
+					}
+				}).catch(err=>{
+					this.$toast.clear();
+					this.$toast.fail(err.msg);
+				});
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import './index.scss';
+</style>

src/views/webview/webview.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<web-div :src="link"></web-div>
+		<iframe :src="link" frameborder="0"></iframe>
 	</div>
 </template>
 
@@ -11,8 +11,8 @@
 				link:''
 			};
 		},
-		onLoad(options) {
-			this.link=options.url;
+		mounted() {
+			this.link=this.$route.params.url;
 		}
 	}
 </script>