10

App.vue

@@ -74,6 +74,7 @@ export default {
 </script>
 
 <style lang="scss">
+	@import "uview-ui/index.scss";
 /*全局公共样式和字体图标*/
 @import '/static/css/cmy.css';
 view,

api/index.js

@@ -1,4 +1,11 @@
 import request from '@/utils/request'
+export function crtItemList(data,id) {
+	return request({
+		url: '/api/article/list/'+id,
+		method: 'get',
+		data
+	});
+}
 
 // 促销商品
 export function groom4(data) {
@@ -49,4 +56,11 @@ export function getStoreInfo(data) {
 		method: 'get',
 		data
 	});
-}
+}
+export function details(data,id) {
+	return request({
+		url: '/api/article/details/'+id,
+		method: 'get',
+		data
+	});
+}

api/set.js

@@ -85,3 +85,12 @@ export function getArea(data,id) {
 		data
 	})
 }
+
+//交易密码设置
+export function transaction(data) {
+        return request({
+                url: '/api/transaction',
+                method: 'post',
+                data
+        });
+}

api/user.js

@@ -1,5 +1,7 @@
 import request from '@/utils/request'
-import { upFilse } from '@/utils/request';
+import {
+	upFilse
+} from '@/utils/request';
 
 // 订单统计信息
 export function orderData(data) {
@@ -103,10 +105,10 @@ export function delcollect(data) {
 }
 
 //上传图片
-export function upload(data){
+export function upload(data) {
 	return upFilse({
-		url:'/api/upload/image',
-		method:'post',
+		url: '/api/upload/image',
+		method: 'post',
 		data
 	})
 }
@@ -121,36 +123,36 @@ export function edit(data) {
 }
 
 // 推广的人数
-export function getSpreadPeople(data){
+export function getSpreadPeople(data) {
 	return request({
-		url:'/api/spread/people',
-		method:'post',
+		url: '/api/spread/people',
+		method: 'post',
 		data
 	})
 }
 //我的会员
-export function getMyTvillage(data){
+export function getMyTvillage(data) {
 	return request({
-		url:'/api/mytvillage',
-		method:'get',
+		url: '/api/mytvillage',
+		method: 'get',
 		data
 	})
 }
 
 //推广佣金/提现总和 
 //3=佣金,4=提现
-export function getSpreadCount(data,type) {
+export function getSpreadCount(data, type) {
 	return request({
-		url:'/api/spread/count/'+type,
-		method:'get',
+		url: '/api/spread/count/' + type,
+		method: 'get',
 		data
 	})
 }
 //我的实体店
 export function getMyStore(data) {
 	return request({
-		url:'/api/mystore',
-		method:'get',
+		url: '/api/mystore',
+		method: 'get',
 		data
 	})
 }
@@ -159,8 +161,8 @@ export function getMyStore(data) {
 //编辑门店
 export function editStore(data) {
 	return request({
-		url:'/api/store_edit',
-		method:'post',
+		url: '/api/store_edit',
+		method: 'post',
 		data
 	})
 }
@@ -180,4 +182,20 @@ export function getVip(data) {
 		method: 'get',
 		data
 	});
-}
+}
+
+export function transfer(data) {
+	return request({
+		url: '/api/transfer',
+		method: 'post',
+		data
+	});
+}
+
+export function nickname(data) {
+	return request({
+		url: '/api/nickname',
+		method: 'get',
+		data
+	});
+}

api/wallet.js

@@ -1,9 +1,9 @@
 import request from '@/utils/request'
 
 // 获取用户消费记录
-export function spreadCommission(data,state) {
+export function spreadCommission(data, state) {
 	return request({
-		url: '/api/spread/commission/'+state,
+		url: '/api/spread/commission/' + state,
 		method: 'get',
 		data
 	});
@@ -98,5 +98,10 @@ export function balance(data) {
 	});
 }
 
-
-
+export function zhuanList(data) {
+	return request({
+		url: '/api/transfer_list',
+		method: 'post',
+		data
+	});
+}

main.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import store from './store'
 import App from './App'
+import uView from "./uview-ui";
 /**
  *  所有测试用数据均存放于根目录json.js
  *  
@@ -29,6 +30,7 @@ const prePage = ()=>{
 	// #endif
 	return prePage.$vm;
 }
+Vue.use(uView);
 
 Vue.config.productionTip = false
 Vue.prototype.$fire = new Vue();

manifest.json

@@ -1,5 +1,5 @@
 {
-    "name" : "基础项目",
+    "name" : "永省购",
     "appid" : "__UNI__7E72005",
     "description" : "",
     "versionName" : "1.0.0",
@@ -58,7 +58,7 @@
     "mp-weixin" : {
         /* 小程序特有相关 */
         "usingComponents" : true,
-        "appid" : "",
+        "appid" : "wx772958447aff07ff",
         "setting" : {
             "urlCheck" : true
         }
@@ -79,7 +79,7 @@
             "proxy" : {
                 "/api" : {
                     // "target" : "http://www.zjxwcm.cn/api",
-					"target" : "http://ysg.frp.liuniu946.com/api",
+                    "target" : "https://ysg.liuniu946.com/api",
                     // "changeOrigin": true,
                     "pathRewrite" : {
                         "/api" : "" // rewrite path

pages.json

@@ -1,4 +1,7 @@
 {
+	"easycom": {
+		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
+	},
 	"pages": [{
 			"path": "pages/index/index",
 			"style": {
@@ -18,6 +21,49 @@
 		// 		}
 		// 	}
 		// },
+		{
+			"path": "pages/index/loveitem",
+			"style": {
+				"navigationBarTitleText": "",
+				"app-plus": {
+					"titleNView": {
+						"type": "transparent"
+					}
+				}
+			}
+		},
+		{
+			"path": "pages/index/info",
+			"style": {
+				"navigationBarTitleText": "详情",
+				"app-plus": {
+					"titleNView": {
+						"type": "transparent"
+					}
+				}
+			}
+		},
+		{
+			"path": "pages/contract/agreement",
+			"style": {
+				"navigationBarTitleText": "注册协议"
+			}
+		},
+		{
+			"path": "pages/contract/privacy",
+			"style": {
+				"navigationBarTitleText": "隐私政策"
+			}
+		},
+		{
+			"path": "pages/contract/start",
+			"style": {
+				"navigationBarTitleText": "授权页",
+				"app-plus": {
+					"titleNView": false
+				}
+			}
+		},
 		{
 			"path": "pages/public/register",
 			"style": {
@@ -341,7 +387,7 @@
 				},
 				// #endif
 				"navigationBarTitleText": "编辑门店"
-		
+
 			}
 		},
 		{
@@ -353,7 +399,7 @@
 				},
 				// #endif
 				"navigationBarTitleText": "门店详情"
-		
+
 			}
 		},
 		{
@@ -365,7 +411,7 @@
 				},
 				// #endif
 				"navigationBarTitleText": "申请店长"
-		
+
 			}
 		},
 		{
@@ -450,6 +496,12 @@
 				"navigationBarTitleText": "充值"
 			}
 		},
+		{
+			"path": "pages/money/moneyPwd",
+			"style": {
+				"navigationBarTitleText": "交易密码"
+			}
+		},
 		{
 			"path": "pages/category/category",
 			"style": {
@@ -488,6 +540,18 @@
 			"style": {
 				"navigationBarTitleText": "邀请好友"
 			}
+		},
+		{
+			"path": "pages/user/yuezz",
+			"style": {
+				"navigationBarTitleText": "余额转账"
+			}
+		},
+		{
+			"path": "pages/user/zzjl",
+			"style": {
+				"navigationBarTitleText": "转账记录"
+			}
 		}
 	],
 	"globalStyle": {

pages/cart/cart.vue

@@ -81,8 +81,7 @@
 	</view>
 </template>
 
-<script>
-	import weixinObj from "@/plugin/jweixin-module/index.js";
+<script>	
 import { getCartList, getCartNum, cartDel } from '@/api/user.js';
 import { mapState } from 'vuex';
 import uniNumberBox from '@/components/uni-number-box.vue';
@@ -96,7 +95,8 @@ export default {
 			total: 0, //总价格
 			allChecked: false, //全选状态  true|false
 			empty: false, //空白页现实  true|false
-			cartList: []
+			cartList: [],
+			mer_id:0,//商户id
 		};
 	},
 	onShow() {
@@ -104,7 +104,7 @@ export default {
 		if (this.hasLogin) {
 			this.loadData();
 		}
-		weixinObj.hideAllNonBaseMenuItem();
+		
 	},
 	watch: {
 		//显示空白页
@@ -282,6 +282,7 @@ export default {
 			let list = this.cartList;
 			let goodsData = [];
 			list.forEach(item => {
+				console.log(item,'7777')
 				if (item.checked) {
 					goodsData.push(item.id);
 				}

pages/category/category.vue

@@ -18,7 +18,6 @@
 </template>
 
 <script>
-import weixinObj from "@/plugin/jweixin-module/index.js";
 import { getCategoryList } from '@/api/product.js';
 export default {
 	data() {
@@ -27,11 +26,12 @@ export default {
 			tabScrollTop: 0,
 			currentId: 9,
 			flist: [],
+			mer_id:0,//商户id
 		};
 	},
 	onLoad() {
 		this.loadData();
-		weixinObj.hideAllNonBaseMenuItem();
+		
 	},
 	// 监听导航栏输入框点击事件
 	onNavigationBarSearchInputClicked(e) {

pages/contract/agreement.vue

@@ -0,0 +1,167 @@
+<template>
+	<view class="box">
+		<view class="title pt20 pb30">永省购商城用户/会员注册协议</view>
+		<view class="content">欢迎您访问并使用永省购商城服务平台！本协议是您与永省购商城平台所有者就永省购商城平台服务的相关事宜所订立的协议。</view>
+		<view class="content">
+			为维护您自身权益，请您仔细阅读本协议，您点击“同意并继续”按钮后，本协议即构成对双方具有约束力的法律文件； 阅读本协议过程中，
+			如您不同意本协议或其中任何条款的约定，您应立即停止注册程序。
+		</view>
+		<view class="title">一、定义</view>
+		<view class="content">1.1 、永省购商城平台：指由浙江龍信贸易有限公司运营的网络交易平台， 包括公众号，小程序，域名为www.tzlxsc.com的网站及App。</view>
+		<view class="content">1.2 、永省购商城平台用户：指永省购商城平台各项服务的使用者。</view>
+		<view class="content">1.3 、永省购商城平台会员：指与永省购商城平台签订《永省购商城平台服务协议》并完成注册流程的用户。</view>
+		<view class="content">1.4 、永省购商城平台供应商： 指通过永省购商城平台发布货物信息或/并通过该平台销售货物的会员。</view>
+		<view class="content">1.5 、永省购商城平台采购商： 指通过永省购商城平台发布采购货物信息或/并通过该平台采购货物的会员。</view>
+		<view class="content">1.6 、永省购商城平台托运方： 指通过永省购商城平台发布发货信息或/并通过该平台委托承运商运输货物的会员。</view>
+		<view class="content">1.7 、永省购商城平台承运商： 指通过永省购商城平台发布车辆信息或/并通过该平台接受托运方的委托，提供运输服务的会员。</view>
+		<view class="title">二、账户注册、注册信息的保管与使用</view>
+		<view class="content">2.1 、注册者资格</view>
+		<view class="content">
+			您确认，在您开始注册程序使用永省购商城平台服务前，您是具备中华人民共和国法律规定的完全民事权利能力和完全民事行为能力的自然人、法人或其他组织。
+			若您不具备前述主体资格，则您及您的监护人应当承担因此而导致的一切后果。
+		</view>
+		<view class="content">2.2 、账户说明</view>
+		<view class="content">2.2.1 当您按照注册页面提示填写信息、阅读并同意本协议且完成会员注册程序后，您才能成为永省购商城平台的会员。</view>
+		<view class="content">
+			2.2.2
+			您确认，您所填写/提供的注册资料是真实、准确、完整、合法有效的，且您保证本平台可以通过该等信息与您本人进行联系。如您的注册信息有变更，请及时予以更新。如您提供的注册资料不合法、不真实、不准确、不详尽，因此而引起的责任、后果将全部由您承担。
+		</view>
+		<view class="content">2.3 注册信息的保管与使用</view>
+		<view class="content">
+			2.3.1 您提供的注册信息，永省购商城平台（以下也简称为“本平台”）将按照中华人民共和国法律、
+			法规的相关规定，采取技术和制度等手段为您妥善保管。除非得到您的授权或者按照法律及其程序要求进行透露外，本平台将保证您的信息安全。
+		</view>
+		<view class="content">
+			2.3.2
+			本平台承诺仅根据本平台的服务目的使用您的信息。服务目的包括但不限于交易确认、客户回访、政策更新、发送促销信息等，除此之外，本平台将对您的信息保密。如您认为本平台超越了正常服务范围使用了您的信息，请您立即与本平台的客服中心联系，本平台将立即予以核实、纠正。
+		</view>
+		<view class="content">
+			2.3.3
+			在您注册成功后，将产生用户名和密码等账户信息，您的账户信息由您保管，您可以根据本平台的规定改变您的密码等账户信息。本平台任何时候均不会主动要求您提供您的账户。因此，
+			请您务必保管好您的账户，谨慎合理的使用您的用户名和密码。如果因为您主动泄露、
+			遭受他人攻击、诈骗或因管理不善造成账户（包括但不限于注册账户和密码、支付账户和密码等）被复制、盗用及其他行为而导致的损失及后果，均由您自行承担。
+		</view>
+		<view class="content">2.3.4 您不得将在本平台注册获得的账户转让或借给他人使用，否则，由此产生的全部责任均由您承担。</view>
+		<view class="content">
+			2.3.5 除本平台存在过错外，您应对您账户下的所有行为后果（包括但不限于在线签署各类协议、发布信息、出售或购买商品、提供或接受物流运输服务、披露信息等）负责。
+		</view>
+		<view class="title">三、永省购商城平台的权利和义务</view>
+		<view class="content">
+			3.1 永省购商城平台有义务在现有技术上维护整永省购商城平台网站的正常运行，保障交易数据 的安全、可靠，按约定的服务内容和标准向您提供服务，并保证努力提升和改进技术。
+		</view>
+		<view class="content">3.2 若您在本平台做出下列行为的，本平台有权做出相应的处理，并且无须事先通知您 或取得您的同意：</view>
+		<view class="content">
+			3.2.1 本平台有权审阅或审查您的注册资料、信息发布、采购交易、物流服务行为，若 发现存在任何问题或疑问，本平台均有权向您发出询问及要求改正的通知或者直接作出删除
+			信息、冻结或关闭账户、取消订单等处理；
+		</view>
+		<view class="content">
+			3.2.2 若您存在以下行为或违反本协议其他约定或违反国家法律、法规、地方规章的行 为时，
+			本平台有权删除信息、禁止您发言、限制您出售或订购、限制提供或接受物流运输服务、注销您的账户，并且有权按照相关法律规定移交有关司法、行政机关处理：
+		</view>
+		<view class="content">
+			①发布或以电子邮件或以其他方式传送存在欺诈、虚假等恶意内容的信息或侵犯公共利 益、可能严重损害永省购商城平台利益、侵犯其他用户合法利益及他人人身财产权利内容的信息；
+		</view>
+		<view class="content">②进行与网上购物无关或不是以购物为目的或与提供或接受物流运输服务无关，试图扰乱正常购物、物流秩序；</view>
+		<view class="content">③干扰或破坏永省购商城平台或与永省购商城平台相连的服务器和网络。</view>
+		<view class="content">
+			3.4 若您在永省购商城平台上的采购交易、物流服务与其他用户发生纠纷或诉讼的，用户通过司法机关或行政机关依照法定程序要求永省购商城平台提供相关数据，
+			永省购商城平台应积极配合并提供有关资料。
+		</view>
+		<view class="title">四、会员的权利和义务</view>
+		<view class="content">
+			4.1
+			会员有权根据本协议的约定，以及永省购商城平台网站上发布的相关规则在永省购商城平台上查询商品信息、订购具体商品、查询物流信息、提供或接受物流服务、发表使用体验、参与商品讨论、
+			物流体验、 参加永省购商城平台网站的有关活动，以及使用永省购商城平台提供的其他服务。
+		</view>
+		<view class="content">4.2 会员应当保证在出售/购买商品提供/接受物流运输服务过程中遵守诚实信用原则，不扰乱网上交易的正常秩序。</view>
+		<view class="content">4.3 会员同意严格遵守以下义务：</view>
+		<view class="content">
+			①不得传输或发表： 煽动抗拒、 破坏宪法和法律、 行政法规实施的言论，煽动颠覆国家政权，推翻社会主义制度的言论，煽动分裂国家、破坏国家统一的言论，煽动民族仇恨、民
+			族歧视、破坏民族团结的言论；
+		</view>
+		<view class="content">②不得利用永省购商城平台从事洗钱、窃取商业秘密、窃取个人信息等违法犯罪活动；</view>
+		<view class="content">③不得捏造或者歪曲事实，散步谣言，扰乱社会秩序；</view>
+		<view class="content">④不得传输或发表任何封建迷信、邪教、淫秽、色情、赌博、暴力、恐怖、教唆犯罪等 不文明的信息资料；</view>
+		<view class="content">⑤不得公然侮辱他人或者捏造事实诽谤他人或者进行其他恶意共计；</view>
+		<view class="content">⑥其他违反宪法和法律、行政法规规定的。</view>
+		<view class="content">4.4 未经永省购商城平台书面同意，会员不得在永省购商城平台网站上发布任何形式的广告。</view>
+		<view class="content">4.5 遵守永省购商城平台制定的规则。</view>
+		<view class="title">五、责任限制</view>
+		<view class="content">
+			5.1
+			永省购商城平台仅限在“按现状”和“按现有”的基础上向用户提供永省购商城平台服务。但无法对由于信息网络设备维护、连接故障、电脑、通讯或其他系统的故障，罢工，暴乱、骚乱，灾难性天气（如火灾、洪水、风暴等），爆炸，战争、政府行为，司法行政机关的命令或因第三方原因而造成的损害结果承担责任。
+		</view>
+		<view class="content">
+			5.2 在法律法规所允许的限度内，因使用永省购商城平台服务而引起的任何损害或经济损失，
+			永省购商城平台承担的全部责任均不超过就用户出售/购买的与该索赔有关的商品、提供/接受的物流运输服务等所实际获得的直接收益。
+		</view>
+		<view class="title">六、知识产权</view>
+		<view class="content">
+			6.1 永省购商城平台网站上所刊登的资料信息（如文字、图标、标识、按钮图标、图像、数据 编辑和软件）均是永省购商城平台运营方及其关联方的财产，受中国和国际知识产权法的保护。
+		</view>
+		<view class="content">
+			6.2 除法律另有强制性规定外，未经永省购商城平台运营方明确的特别书面许可，任何单位 或个人均不得以任何方式非法地全部或部分复制、转载、引用或用作其他用途。
+		</view>
+		<view class="content">6.3 会员在永省购商城平台上发表的文章、言论仅代表其本人的观点，与永省购商城平台无关，因此所产生的责任由作者本人承担。</view>
+		<view class="content">七、协议的变更</view>
+		<view class="content">
+			永省购商城可根据国家法律法规变化及维护交易秩序、保护消费者权益需要，不时修改本协议、补充协议，变更后的协议、补充协议（下称“变更事项”）将通过法定程序并以本协议约定的方式通知您。
+		</view>
+		<view class="content">如您不同意变更事项，您有权于变更事项确定的生效日前联系永省购商城客服反馈意见。如反馈意见得以采纳，永省购商城将酌情调整变更事项。</view>
+		<view class="content">
+			如您对已生效的变更事项仍不同意的，
+			您应当于变更事项确定的生效之日起停止使用永省购商城平台服务，变更事项对您不产生效力；如您在变更事项生效后仍继续使用永省购商城平台服务，则视为您同意已生效的变更事项。
+		</view>
+		<view class="title">八、通知</view>
+		<view class="content">您同意永省购商城以以下合理的方式向您送达各类通知：</view>
+		<view class="content">（一）公示的文案；</view>
+		<view class="content">（二）站内信、客户端推送的消息；</view>
+		<view class="content">（三）根据您预留于永省购商城平台的联系方式发出的电子邮件、短信、函件等。</view>
+		<view class="title">九、协议终止</view>
+		<view class="content">
+			9.1
+			会员有权向永省购商城平台提出注销账户的申请，经永省购商城平台运营方审核同意后，由永省购商城平台注销该申请注销的账户，则本协议即告终止。账户注销后，永省购商城平台没有义务为申请注销者保留或披露账户中的任何信息。
+		</view>
+		<view class="content">9.2 出现下列情况时，永省购商城平台可以通过注销您的账户的方式单方解除本协议：</view>
+		<view class="content">①您违反本协议约定，永省购商城平台运营者依据违约条款终止本协议的；</view>
+		<view class="content">②您盗用他人账户、发布违禁信息、 骗取他人财物、销售假冒伪劣产品、扰乱市场秩序、 采取不正当手段牟利等行为，永省购商城平台对您的账户予以查封的；</view>
+		<view class="content">③除上述情形外，因您多次违反永省购商城平台的相关规定且情节严重，永省购商城平台对您的账户予以查封的；</view>
+		<view class="content">④永省购商城平台认为需要终止本协议的其他情况。</view>
+		<view class="content">9.3 本协议终止后，永省购商城平台仍享有下列权利：</view>
+		<view class="content">①继续保存您的注册信息及您使用永省购商城平台服务期间的所有交易信息；</view>
+		<view class="content">②您在永省购商城平台服务期间存在违法行为或违反本协议的行为的，永省购商城平台运营者仍有追究您责任的权利。</view>
+		<view class="title">十、法律适用、争议解决及其他</view>
+		<view class="content">
+			10.1 法律适用：本协议的订立、执行、解释、修订、补充及争议均适用中华人民共和 国法律（不包括香港、澳门、台湾地区）。如法律无相关规定的，参照商业惯例及/或行业惯 例。
+		</view>
+		<view class="content">
+			10.2 争议解决：本协议履行过程中若发生争议，由永省购商城平台与您友好协商解决。协商 不成时，任何一方均可向永省购商城平台所有者住所地人民法院（即浙江省台州市椒江区人民法院）提
+			起诉讼。
+		</view>
+		<view class="content">10.3 本协议内容中以黑体、加粗等方式显著标识的条款，请您着重阅读。</view>
+		<view class="title">十一、协议的修改</view>
+		<view class="content">
+			11.1
+			永省购商城有权随时修改本协议的任何条款，一旦本协议的内容发生变动，永省购商城将会直接在永省购商城站上公布修改之后的协议内容，该公布行为视为永省购商城已经通知用户修改内容。永省购商城也可通过其他适当方式向用户提示修改内容。
+		</view>
+		<view class="content pb30">11.2	如果不同意永省购商城对本协议相关条款所做的修改，\用户有权停止使用网络服务。如果用户继续使用网络服务，则视为用户接受永省购商城对本协议相关条款所做的修改。</view>
+	</view>
+</template>
+
+<script></script>
+
+<style>
+	.box{
+		padding: 30rpx;
+	}
+.title {
+	font-size: 32rpx;
+	font-weight: 700;
+	line-height: 2;
+}
+.content {
+	font-size: 28rpx;
+	color: #666;
+	line-height: 2;
+}
+</style>

pages/contract/privacy.vue

@@ -0,0 +1,253 @@
+<template>
+	<view class="box">
+		<view class="title">“永省购线上商城”隐私政策</view>
+		  <view class="pb10">公司名称：台州市利上投资管理有限公司</view>
+		  <view class="pb10">注册地址：浙江省台州市路桥区路桥街道南南官大道20号
+</view>
+		  <view class="pb10">办公地址：浙江省台州市路桥区路桥街道南南官大道20号
+</view>
+		  <view class="pb10">联系电话：15372102688
+
+</view>
+		  <view class="pb10">更新时间:2021年11月22日</view>
+		  <view class="pb10">生效时间:2021年11月22日</view>
+		<view class="title">提示条款</view>
+		<view class="content">
+			“永省购商城”及其关联公司（以下简称“我们”）深知个人信息对您的重要性，并会尽力保护您的个人信息安全可靠，我们致力于维持您对我们的信任，恪守以下原则，保护您的个人信息：权责一致原则，目的明确原则，选择同意原则，最少够用原则，确保安全原则，主体参与原则，公开透明原则等等。同时我们承诺，我们将按业界成熟的安全解决方案，采取相应的安全保护措施来保护您的个人信息。鉴此，我们制定本《隐私政策》（下称“本政策
+			/本隐私政策”）并提醒您：
+		</view>
+		<view class="content">
+			本政策适用于“永省购商城”产品或服务。如我们关联公司的产品或服务中使用了“永省购商城”提供的产品或服务（例如直接使用“永省购商城”账户登录）但未设独立隐私政策的，则本政策同样适用于该部分产品或服务。
+			需要特别说明的是，本政策不适用于其他第三方向您提供的服务，也不适用于“永省购商城”中已另行独立设置隐私政策的产品或服务。
+		</view>
+		<view class="content">
+			在使用“永省购商城”各项产品或服务前，请您务必仔细阅读并透彻理解本政策，在确认充分理解并同意后使用相关产品或服务。一旦您开始使用“永省购商城”各项产品或服务，即表示您已充分理解并同意本政策。如对本政策内容有任何疑问、意见或建议，您可通过“永省购商城”提供的各种联系方式与我们联系。
+		</view>
+		<view class="title">本隐私政策部分将帮助您了解以下内容：</view>
+		<view class="content">1、我们如何收集和使用您的个人信息</view>
+		<view class="content">2、我们如何使用 Cookie 和同类技术</view>
+		<view class="content">3、我们如何共享、转让、公开披露您的个人信息</view>
+		<view class="content">4、我们如何保护您的个人信息</view>
+		<view class="content">5、您如何管理您的个人信息</view>
+		<view class="content">6、我们如何处理未成年人的个人信息</view>
+		<view class="content">7、您的个人信息如何在全球范围转移</view>
+		<view class="content">8、本隐私政策如何更新</view>
+		<view class="content">9、如何联系我们</view>
+		<view class="title">一、我们如何收集和使用您的个人信息</view>
+		<view class="content">
+			个人信息是指以电子或者其他方式记录的能够单独或者与其他信息结合识别特定自然人身份或者反映特定自然人活动情况的各种信息，我们会出于本政策所述的以下目的，收集和使用您的个人信息：
+		</view>
+		<view class="title">（一） 帮助您成为我们的用户</view>
+		<view class="content">为完成创建账号，以便我们为您提供服务，您需要提供以下信息：您的手机号码、头像、昵称、性别，并创建用户名和密码。</view>
+		<view class="title">（二）为您展示和推送商品或服务</view>
+		<view class="content">
+			为改善我们的产品或服务、向您提供个性化的信息搜索及交易服务，我们会根据您的浏览及搜索记录、设备信息、位置信息、交易信息，提取您的浏览、搜索偏好、行为习惯、位置信息等特征，基于特征标签进行间接人群画像并展示、推送信息。
+		</view>
+		<view class="content">如果您不想接受我们给您发送的商业广告，您可随时通过点击相应按钮取消。</view>
+		<view class="title">（三）向您提供商品或服务</view>
+		<view class="content">1、您向我们提供的信息</view>
+		<view class="content">
+			您在注册账户或使用我们的服务时，向我们提供的相关个人信息，例如电话号码、电子邮件、银行卡号或支付宝账号等；您通过我们的服务向其他方提供的共享信息，以及您使用我们的服务时所储存的信息。向“永省购商城”提供该其他方的前述个人信息之前，您需确保您已经取得其授权同意。您在使用我们的人脸识别分类服务时明确同意开启人物相册功能后向我们提供的本地相册信息。
+		</view>
+		<view class="content">2、我们在您使用服务过程中收集的信息</view>
+		<view class="content">为向您提供更契合您需求的页面展示和搜索结果、了解产品适配性、识别账号异常状态，我们会收集关于您使用</view>
+		<view class="content">的服务以及使用方式的信息并将这些信息进行关联，这些信息包括：</view>
+		<view class="content">
+			设备信息：我们会根据您在软件安装及使用中授予的具体权限，接收并记录您所使用的设备相关信息（例如设备型号、操作系统版本、设备设置、唯一设备标识符等软硬件特征信息）、设备所在位置相关信息（例如IP
+			地址、GPS位置以及能够提供相关信息的Wi-Fi
+			接入点、蓝牙和基站等传感器信息）。日志信息：当您使用我们的网站或客户端提供的产品或服务时，我们会自动收集您对我们服务的详细使用情况，作为有关网络日志保存。例如您的搜索查询内容、IP地址、浏览器的类型、电信运营商、使用的语言、访问日期和时间及您访问的网页记录等。请注意，单独的设备信息、日志信息等是无法识别特定自然人身份的信息。如果我们将这类非个人信息与其他信息结合用于识别特定自然人身份，或者将其与个人信息结合使用，则在结合使用期间，这类非个人信息将被视为个人信息，除取得您授权或法律法规另有规定外，我们会将该类个人信息做匿名化、去标识化处理。当您与我们联系时，我们可能会保存您的通信/通话记录和内容或您留下的联系方式等信息，以便与您联系或帮助您解决问题，或记录相关问题的处理方案及结果。
+		</view>
+		<view class="content">3、我们通过间接获得方式收集到的您的个人信息</view>
+		<view class="content">
+			您可通过“永省购商城”账号在我们提供的链接入口使用我们关联公司提供的产品或服务，为便于我们基于关联账号共同向您提供一站式服务并便于您统一进行管理，我们在“永省购商城”集中展示您的信息或推荐您感兴趣的信息。当您通过我们产品或服务使用上述服务时，您授权我们根据实际业务及合作需要从我们关联公司处接收、汇总、分析我们确认其来源合法或您授权同意其向我们提供的您的个人信息或交易信息。如您拒绝提供上述信息或拒绝授权，可能无法使用我们关联公司的相应产品或服务，或者无法展示相关信息，但不影响使用“永省购商城”扫人/找人、贴标签、聊天等核心服务。
+		</view>
+		<view class="title">（四）为您提供安全保障</view>
+		<view class="content">
+			为提高您使用我们及我们关联公司、合作伙伴提供服务的安全性，保护您或其他用户或公众的人身财产安全免遭侵害，更好地预防钓鱼网站、欺诈、网络漏洞、计算机病毒、网络攻击、网络侵入等安全风险，更准确地识别违反法律法规或“永省购商城”相关协议规则的情况，我们可能使用或整合您的用户信息、交易信息、设备信息、有关网络日志以及我们关联公司、合作伙伴取得您授权或依据法律共享的信息，来综合判断您账户及交易风险、进行身份验证、检测及防范安全事件，并依法采取必要的记录、审计、分析、处置措施。
+		</view>
+		<view class="title">（五）其他用途</view>
+		<view class="content">我们将信息用于本政策未载明的其他用途，或者将基于特定目的收集而来的信息用于其他目的时，会事先征求您的同意。</view>
+		<view class="title">（六）征得授权同意的例外</view>
+		<view class="content">根据相关法律法规规定，以下情形中收集您的个人信息无需征得您的授权同意：</view>
+		<view class="content">1、与国家安全、国防安全有关的；</view>
+		<view class="content">2、与公共安全、公共卫生、重大公共利益有关的；</view>
+		<view class="content">3、与犯罪侦查、起诉、审判和判决执行等有关的；</view>
+		<view class="content">4、出于维护个人信息主体或其他个人的生命、财产等重大合法权益但又很难得到您本人同意的；</view>
+		<view class="content">5、所收集的个人信息是您自行向社会公众公开的；</view>
+		<view class="content">6、从合法公开披露的信息中收集个人信息的，如合法的新闻报道、政府信息公开等渠道；</view>
+		<view class="content">7、根据您的要求签订合同所必需的；</view>
+		<view class="content">8、用于维护所提供的产品或服务的安全稳定运行所必需的，例如发现、处置产品或服务的故障；</view>
+		<view class="content">9、为合法的新闻报道所必需的；</view>
+		<view class="content">10、学术研究机构基于公共利益开展统计或学术研究所必要，且对外提供学术研究或描述的结果时，对结果中所</view>
+		<view class="content">包含的个人信息进行去标识化处理的；</view>
+		<view class="content">11、法律法规规定的其他情形。</view>
+		<view class="content">如我们停止运营“永省购商城”产品或服务，我们将及时停止继续收集您个人信息的活动，将停止运营的通知以逐</view>
+		<view class="content">一送达或公告的形式通知您，对所持有的个人信息进行删除或匿名化处理。</view>
+		<view class="title">二、我们如何使用 Cookie 和同类技术</view>
+		<view class="title">（一）Cookie</view>
+		<view class="content">
+			为确保网站正常运转、为您获得更轻松的访问体验、向您推荐您可能感兴趣的内容，我们会在您的计算机或移动设备上存储名为 Cookie 的小数据文件。Cookie
+			通常包含标识符、站点名称以及一些号码和字符。借助于Cookie，网站能够存储您的偏好等数据。
+		</view>
+		<view class="title">（二）网站信标和像素标签</view>
+		<view class="content">
+			除 Cookie
+			外，我们还会在网站上使用网站信标和像素标签等其他同类技术。例如，我们向您发送的电子邮件可能含有链接至我们网站内容的地址链接，如果您点击该链接，我们则会跟踪此次点击，帮助我们了解您的产品或
+			服务偏好以便于我们主动改善客户服务体验。网站信标通常是一种嵌入到网站或电子邮件中的透明图像。借助于电子邮件中的像素标签，我们能够获知电子邮件是否被打开。如果您不希望自己的活动以这种方式被追踪，则可以随时从我们的寄信名单中退订。
+		</view>
+		<view class="title">三、我们如何共享、转让、公开披露您的个人信息</view>
+		<view class="title">（一）共享</view>
+		<view class="content">我们不会与“永省购商城”服务提供者以外的公司、组织和个人共享您的个人信息，但以下情况除外：</view>
+		<view class="content">1、在获取明确同意的情况下共享：获得您的明确同意后，我们会与其他方共享您的个人信息。</view>
+		<view class="content">2、在法定情形下的共享：我们可能会根据法律法规规定、诉讼争议解决需要，或按行政、司法机关依法提出的要求，对外共享您的个人信息。</view>
+		<view class="content">
+			3、与关联公司间共享：为便于我们基于关联账号共同向您提供服务，推荐您可能感兴趣的信息或保护“永省购商城”关联公司或其他用户或公众的人身财产安全免遭侵害，您的个人信息可能会与我们的关联公司共享。我们只会共享必要的个人信息（如为便于您使用“永省购商城”账号使用我们关联公司产品或服务，我们会向关联公司共享您必要的账户信息），如果我们共享您的个人敏感信息或关联公司改变个人信息的使用及处理目的，将再次征求您的授权同意。
+		</view>
+		<view class="content">
+			4、与授权合作伙伴共享：仅为实现本隐私政策中声明的目的，我们的某些服务将由我们和授权合作伙伴共同提供。我们可能会与合作伙伴共享您的某些个人信息，以提供更好的客户服务和用户体验。例如安排合作伙伴提供服务。我们仅会出于合法、正当、必要、特定、明确的目的共享您的个人信息，并且只会共享提供服务所必要的个人信息。我们的合作伙伴无权将共享的个人信息用于与产品或服务无关的其他用途。
+			目前，我们的授权合作伙伴包括以下类型：
+		</view>
+		<view class="content">
+			（1）广告、分析服务类的授权合作伙伴。除非得到您的许可，否则我们不会将您的个人身份信息（指可以识别您身份的信息，例如姓名或电子邮箱，通过这些信息可以联系到您或识别您的身份）与提供广告、分析服务的合作伙伴共享。我们会向这些合作伙伴提供有关其广告覆盖面和有效性的信息，而不会提供您的个人身份信息，或者我们将这些信息进行汇总，以便它不会识别您个人。例如，只有在广告主同意遵守我们的广告发布准则后，我们才可能会告诉广告主他们广告的效果如何，或者有多少人看了他们广告或在看到广告后安装了应用，或者向这些合作伙伴提供不能识别个人身份的统计信息（例如“男性，25-29岁，位于北京”），帮助他们了解其受众或顾客。
+		</view>
+		<view class="content">
+			（2）供应商、服务提供商和其他合作伙伴。我们将信息发送给支持我们业务的供应商、服务提供商和其他合作伙伴，这些支持包括提供技术基础设施服务、分析我们服务的使用方式、衡量广告和服务的有效性、提供客户服务、支付便利或进行学术研究和调查。
+			对我们与之共享个人信息的公司、组织和个人，我们会与其签署严格的数据保护协定，要求他们按照我们的说明、本隐私政策以及其他任何相关的保密和安全措施来处理个人信息。
+		</view>
+		<view class="title">（二）转让</view>
+		<view class="content">我们不会将您的个人信息转让给任何公司、组织和个人，但以下情况除外：</view>
+		<view class="content">1、在获取明确同意的情况下转让：获得您的明确同意后，我们会向其他方转让您的个人信息；</view>
+		<view class="content">
+			2、在涉及合并、收购或破产清算情形，或其他涉及合并、收购或破产清算情形时，如涉及到个人信息转让，我们会要求新的持有您个人信息的公司、组织继续受本政策的约束，否则我们将要求该公司、组织和个人重新向您征求授权同意。
+		</view>
+		<view class="title">（三）公开披露</view>
+		<view class="content">我们仅会在以下情况下，公开披露您的个人信息：</view>
+		<view class="content">1、获得您明确同意或基于您的主动选择，我们可能会公开披露您的个人信息；</view>
+		<view class="content">
+			2、如果我们确定您出现违反法律法规或严重违反“永省购商城”相关协议规则的情况，或为保护“永省购商城”及其关联公司用户或公众的人身财产安全免遭侵害，我们可能依据法律法规或“永省购商城”相关协议规则征得您同意的情况下披露关于您的个人信息，包括相关违规行为以及“永省购商城”已对您采取的措施。
+		</view>
+		<view class="title">（四）共享、转让、公开披露个人信息时事先征得授权同意的例外</view>
+		<view class="content">以下情形中，共享、转让、公开披露您的个人信息无需事先征得您的授权同意：</view>
+		<view class="content">1、与国家安全、国防安全有关的；</view>
+		<view class="content">2、与公共安全、公共卫生、重大公共利益有关的；</view>
+		<view class="content">3、与犯罪侦查、起诉、审判和判决执行等有关的；</view>
+		<view class="content">4、出于维护您或其他个人的生命、财产等重大合法权益但又很难得到本人同意的；</view>
+		<view class="content">5、您自行向社会公众公开的个人信息；</view>
+		<view class="content">6、从合法公开披露的信息中收集个人信息的，如合法的新闻报道、政府信息公开等渠道。</view>
+		<view class="content">
+			根据法律规定，共享、转让经去标识化处理的个人信息，且确保数据接收方无法复原并重新识别个人信息主体的，不属于个人信息的对外共享、转让及公开披露行为，对此类数据的保存及处理将无需另行向您通知并征得您的同意。
+		</view>
+		<view class="title">四、我们如何保护您的个人信息安全</view>
+		<view class="content">
+			（一）我们已采取符合业界通用解决方案、合理可行的安全防护措施保护您提供的个人信息安全，防止个人信息遭到未经授权访问、公开披露、使用、修改、损坏或丢失。例如，在您的浏览器与服务器之间交换数据（如信用卡信息）时受
+			SSL（Secure Socket
+			Layer）协议加密保护；我们会使用加密技术提高个人信息的安全性；我们会使用受信赖的保护机制防止个人信息遭到恶意攻击；我们会部署访问控制机制，尽力确保只有授权人员才可访问个人信息；以及我们会举办安全和隐私保护培训课程，加强员工对于保护个人信息重要性的认识。
+		</view>
+		<view class="content">
+			（二）我们有行业先进的以数据为核心，围绕数据生命周期进行的数据安全管理体系，从组织建设、制度设计、人员管理、产品技术等方面多维度提升整个系统的安全性。
+		</view>
+		<view class="content">
+			（三）我们会采取合理可行的措施，尽力避免收集无关的个人信息。我们只会在达成本政策所述目的所需的期限内保留您的个人信息，除非需要延长保留期或受到法律的允许。
+		</view>
+		<view class="content">
+			（四）互联网并非绝对安全的环境，我们强烈建议您不要使用非“永省购商城”推荐的通信方式发送个人信息。您可以通过我们的服务建立联系和相互分享。当您通过我们的服务创建交流、交易或分享时，您可以自主选择沟通、交易或分享的对象，作为能够看到您的交易内容、联络方式、交流信息或分享内容等相关信息的第三方。
+			如您发现自己的个人信息尤其是您的账户或密码发生泄露，请您立即联络“永省购商城”用户服务的相关人员，以便我们根据您的申请采取相应措施。
+			请注意，您在使用我们服务时自愿共享甚至公开分享的信息，可能会涉及您或他人的个人信息甚至个人敏感信息，如您选择上传包含个人信息的图片。请您更加谨慎地考虑，是否在使用我们的服务时共享甚至公开分享相关信息。
+			请使用复杂密码，协助我们保证您的账号安全。我们将尽力保障您发送给我们的任何信息的安全性。 同时，我们还将按照监管部门要求，上报个人信息安全事件的处置情况。
+		</view>
+		<view class="title">五、您如何管理您的个人信息</view>
+		<view class="content">您可以通过以下方式访问及管理您的个人信息：</view>
+		<view class="content">（一）访问您的个人信息</view>
+		<view class="content">
+			您有权访问您的个人信息，法律法规规定的例外情况除外。您可以通过以下方式自行访问您的个人信息：
+			个人资料—如果您希望访问或编辑您个人资料中的昵称、头像、签名、性别等，您可以通过登录账户通过-“编辑”执行此类操作。
+			如果您无法通过上述路径访问该等个人信息，您可以加入QQ群““永省购商城”用户反馈群‘与我们取得联系。
+		</view>
+		<view class="content">（二）更正或补充您的个人信息</view>
+		<view class="content">
+			当您发现我们处理的关于您的个人信息有错误时，您有权要求我们做出更正或补充。您可以通过本条“（一）访问您的个人信息”中列明的方式提出更正或补充申请。
+		</view>
+		<view class="content">（三）删除您的个人信息</view>
+		<view class="content">您可以通过本条“（一）访问您的个人信息”中列明的方式删除您的部分个人信息。</view>
+		<view class="content">在以下情形中，您可以向我们提出删除个人信息的请求：</view>
+		<view class="content">1、如果我们处理个人信息的行为违反法律法规；</view>
+		<view class="content">2、如果我们收集、使用您的个人信息，却未征得您的明确同意；</view>
+		<view class="content">3、如果我们处理个人信息的行为严重违反了与您的约定；</view>
+		<view class="content">4、如果您不再使用我们的产品或服务；</view>
+		<view class="content">5、如果我们永久不再为您提供产品或服务。</view>
+		<view class="content">
+			若我们决定响应您的删除请求，我们还将同时尽可能通知从我们处获得您的个人信息的主体，要求其及时删除，除非法律法规另有规定，或这些主体获得您的独立授权。
+			当您从我们的服务中删除信息后，我们可能不会立即从备份系统中删除相应的信息，但会在备份更新时删除这些信息。
+		</view>
+		<view class="content">（四）改变您授权同意的范围</view>
+		<view class="content">
+			每个业务功能需要一些基本的个人信息才能得以完成（见本隐私政策“第一条”）。除此之外，对于额外个人信息的收集和使用，您可以在设置或与“永省购商城”客服联系给予或收回您的授权同意。
+			当您收回同意后，我们将不再处理相应的个人信息。但您收回同意的决定，不会影响此前基于您的授权而开展的个人信息处理。
+		</view>
+		<view class="content">（五）约束信息系统自动决策</view>
+		<view class="content">
+			在某些业务功能中，我们可能仅依据信息系统、算法等在内的非人工自动决策机制做出决定。如果这些决定显著影响您的合法权益，您有权要求我们做出解释，我们也将在不侵害“永省购商城”商业秘密或其他用户权益、社会公共利益的前提下提供申诉方法。
+		</view>
+		<view class="content">（六）响应您的上述请求</view>
+		<view class="content">
+			为保障安全，您可能需要提供书面请求，或以其他方式证明您的身份。我们可能会先要求您验证自己的身份，然后再处理您的请求。
+			我们将在30天内做出答复。如您不满意，还可以通过“永省购商城”客服发起投诉。
+			对于您合理的请求，我们原则上不收取费用，但对多次重复、超出合理限度的请求，我们将视情收取一定成本费用。对于那些无端重复、需要过多技术手段（例如，需要开发新系统或从根本上改变现行惯例）、给他人合法权益带来风险或者非常不切实际的请求，我们可能会予以拒绝。
+			在以下情形中，按照法律法规要求，我们将无法响应您的请求：
+		</view>
+		<view class="content">1、与国家安全、国防安全有关的；</view>
+		<view class="content">2、与公共安全、公共卫生、重大公共利益有关的；</view>
+		<view class="content">3、与犯罪侦查、起诉、审判和执行判决等有关的；</view>
+		<view class="content">4、有充分证据表明个人信息主体存在主观恶意或滥用权利的；</view>
+		<view class="content">5、响应您的请求将导致您或其他个人、组织的合法权益受到严重损害的；</view>
+		<view class="content">6、涉及商业秘密的。</view>
+		<view class="title">六、我们如何处理未成年人的个人信息</view>
+		<view class="content">
+			如果没有父母或监护人的同意，未成年人不得创建自己的用户账户。如您为未成年人的，建议您请您的父母或监护人仔细阅读本隐私政策，并在征得您的父母或监护人同意的前提下使用我们的服务或向我们提供信息。
+			对于经父母或监护人同意使用我们的产品或服务而收集未成年人个人信息的情况，我们只会在法律法规允许、父母或监护人明确同意或者保护未成年人所必要的情况下使用、共享、转让或披露此信息。
+		</view>
+		<view class="title">七、您的个人信息如何在全球范围转移</view>
+		<view class="content">我们在中华人民共和国境内运营中收集和产生的个人信息，存储在中国境内，以下情形除外：</view>
+		<view class="content">1、法律法规有明确规定；</view>
+		<view class="content">2、获得您的明确授权；</view>
+		<view class="content">3、您通过互联网进行跨境直播/发布动态等个人主动行为。</view>
+		<view class="content">针对以上情形，我们会确保依据本隐私政策对您的个人信息提供足够的保护。</view>
+		<view class="title">八、本隐私政策如何更新</view>
+		<view class="content">我们的隐私政策可能变更。</view>
+		<view class="content">
+			未经您明确同意，我们不会限制您按照本隐私政策所应享有的权利。对于重大变更，我们会提供显著的通知（包括我们会通过“永省购商城”公示的方式进行通知甚至向您提供弹窗提示）。
+			本政策所指的重大变更包括但不限于：
+		</view>
+		<view class="content">1、我们的服务模式发生重大变化。如处理个人信息的目的、处理的个人信息类型、个人信息的使用方式等；</view>
+		<view class="content">2、我们在控制权等方面发生重大变化。如并购重组等引起的所有者变更等；</view>
+		<view class="content">3、个人信息共享、转让或公开披露的主要对象发生变化；</view>
+		<view class="content">4、您参与个人信息处理方面的权利及其行使方式发生重大变化；</view>
+		<view class="content">5、我们负责处理个人信息安全的责任部门、联络方式及投诉渠道发生变化时；</view>
+		<view class="content">6、个人信息安全影响评估报告表明存在高风险时。</view>
+		<view class="content pb30">我们还会将本隐私政策的旧版本存档，供您查阅。</view>
+	</view>
+</template>
+
+<script>
+	export default {};
+</script>
+
+<style>
+	.box{
+		padding: 30rpx;
+	}
+.title {
+	font-size: 32rpx;
+	font-weight: 700;
+	line-height: 2;
+	
+}
+.content {
+	font-size: 28rpx;
+	color: #666;
+	line-height: 2;
+}
+.pb10{
+	font-size: 28rpx;
+}
+</style>

pages/contract/start.vue

@@ -0,0 +1,138 @@
+<template>
+	<view class="start">
+		<view class="background"></view>
+		<view class="popup">
+			<view class="title">温馨提示</view>
+			<scroll-view :scroll-y="true" class="content">
+				<text>欢迎使用永省购线上商城。我们非常重视您的用户权益和个人信息的保护，在您使用永省购线上商城服务前，请认真阅读</text>
+				<text class="money" @click="goUser">《用户协议》</text>
+				<text>和</text>
+				<text class="money" @click="goYs">《隐私政策》</text>
+				<text>
+					全部条款。我们将通过上述协议向您说明我们如何为您提供服务并保障您的用户权益，
+					如何收集、使用、保存、共享和保护您的相关信息，以及我们为您提供的访问、更正、删除和申诉您信息相关问题的方式。
+					我们会严格按照您的授权，在上述协议约定的范围内收集、存储和使用您的注册信息、设备信息、位置信息、日志信息或其他经您授权的信息。
+					您点击“同意并继续”视为您已同意上述协议的全部内容
+				</text>
+			</scroll-view>
+			<view class="button flex">
+				<text class="disagree" @click="disagree">不同意</text>
+				<text class="agree" @click="agree">同意并继续</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {};
+	},
+	onLoad() {
+		let agree = uni.getStorageSync('agree');
+		console.log(agree,'111111111')
+		if (agree) {
+			// this.agree()
+			uni.redirectTo({ url: '/pages/index/index' });
+		}
+	},
+	methods: {
+		//前往用户协议
+		goUser() {
+			uni.navigateTo({ url: './agreement' });
+		},
+		goYs() {
+			uni.navigateTo({ url: './privacy' });
+		},
+		//不同意
+		disagree() {
+			plus.runtime.quit();
+		},
+		//同意
+		agree() {
+			uni.setStorageSync('agree', true);
+			uni.switchTab({
+				url: '/pages/index/index',
+				success(e) {
+					console.log(e);
+				},
+				fail(e) {
+					console.log(e);
+				}
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.money {
+	color: $base-color;
+}
+.disagree {
+	padding: 10rpx 30rpx;
+	font-size: 28rpx;
+	width: 200rpx;
+	height: 64rpx;
+	color: $base-color;
+	border-radius: 999rpx;
+	border: 2rpx solid $base-color;
+}
+.agree {
+	padding: 10rpx 30rpx;
+	width: 210rpx;
+	height: 64rpx;
+	font-size: 28rpx;
+	color: #fff;
+	background-color: $base-color;
+	border-radius: 999rpx;
+	border: 2rpx solid $base-color;
+}
+.button {
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 0;
+	display: flex;
+	padding: 24rpx;
+	justify-content: center;
+	text-align: center;
+	justify-content: space-around;
+}
+.content {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 100rpx;
+	bottom: 120rpx;
+	z-index: 0;
+	font-size: 28rpx;
+	padding: 0 50rpx;
+	line-height: 44rpx;
+}
+.title {
+	font-size: 36rpx;
+	padding: 20rpx 50rpx;
+}
+.background {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	z-index: 0;
+	background-color: rgba(0, 0, 0, 0.4);
+}
+.popup {
+	position: absolute;
+	z-index: 0;
+	left: 50%;
+	top: 50%;
+	transform: translate3d(-50%, -50%, 0);
+	width: 600rpx;
+	height: 700rpx;
+	background-color: #fff;
+	border-radius: 30rpx;
+}
+</style>

pages/index/info.vue

@@ -0,0 +1,66 @@
+<template>
+	<view class="container">
+	<view class="notice-item">
+		<jyf-parser :html="description" ref="article"></jyf-parser>
+	</view>
+	</view>
+</template>
+
+<script>
+	import { details } from '@/api/index.js';
+	import jyfParser from "@/components/jyf-parser/jyf-parser.vue";
+	export default{
+		components: {
+		   jyfParser
+		 },
+		data(){
+			return{
+				id:'',
+				list:"",
+				description:'',
+				type:0,
+				
+			}
+		},
+		onLoad(option) {
+			this.id = option.id;
+				this.loadData();
+		},
+		methods:{
+			loadData(){
+				let obj = this;
+			details({},obj.id).then(function(e) {
+				obj.list = e.data;
+				if(obj.list.content != null){
+					obj.description = obj.list.content.replace(/<img/g,"<img style='max-width:100%;height:auto;'");
+				}//小程序商品详情图超出屏幕问题
+			});
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+page {
+	min-height: 100%;
+	background:#FFFFFF;
+}
+.notice_name {
+	font-size: 35rpx !important;
+	color: #303133;
+	padding: 25rpx 25rpx 0rpx 25rpx;
+	margin-bottom: 25rpx;
+}
+.course-video{
+			width: 100%;
+			height: 500rpx;
+		}
+.notice-item {
+	width: 100%;
+	height: 100%;
+	color: #666666;
+	padding: 35rpx 35rpx;
+	font-size: 23rpx;
+	padding-bottom: 30rpx;
+}
+</style>

pages/index/loveitem.vue

@@ -0,0 +1,228 @@
+<template>
+	<view class="content">
+		<view class="js" style="height: 20rpx;">
+
+		</view>
+		<view class="list-box" v-for="(item,index) in science" :key='index' @click="Jump(item.id)">
+			<view class="box-left">
+				<image :src="item.image_input[0]" mode="" class="left-img"></image>
+			</view>
+			<view class="box-right">
+				<view class="right-top word1_ellipsis clamp">
+					{{item.title}}
+				</view>
+				<view class="right-center clamp2">
+					{{item.synopsis}}
+				</view>
+				<!-- <view class="right-foot">
+					已阅读人数：{{item.visit || 0}}
+				</view> -->
+			</view>
+		</view>
+		<uni-load-more :status="loadingType"></uni-load-more>
+	</view>
+</template>
+
+<script>
+	import {
+		crtItemList
+	} from '@/api/index.js';
+	export default {
+		data() {
+			return {
+				keyword: '',
+				science: [],
+				cartId: '',
+				page: 1,
+				limit: 10,
+				loadingType: 'more'
+			}
+		},
+		onLoad(opt) {
+			this.cartId = opt.id
+			if (this.cartId == 17) {
+				uni.setNavigationBarTitle({
+					title: '爱心项目'
+				})
+			} else if (this.cartId == 18) {
+				uni.setNavigationBarTitle({
+					title: '造血干细胞捐献'
+				})
+			} else if (this.cartId == 19) {
+				uni.setNavigationBarTitle({
+					title: '器官遗体捐献'
+				})
+			}
+			this.loadData();
+		},
+		filters: {
+			time(val) {
+				let arr = val.split(' ')
+				return arr[0]
+			}
+		},
+		onReachBottom() {
+			this.loadData()
+		},
+		methods: {
+			loadData() {
+				let obj = this;
+				if (obj.loadingType == 'noMore' || obj.loadingType == 'loading') {
+
+					return
+
+				}
+				obj.loadingType = 'loading'
+				crtItemList({
+					pages: 1,
+					limit: 20
+				}, obj.cartId).then(({
+					data
+				}) => {
+					console.log(data);
+					obj.science = obj.science.concat(data)
+					obj.page++
+					if (obj.limit == data.length) {
+						obj.loadingType = 'more'
+					} else {
+						obj.loadingType = 'noMore'
+
+					}
+
+					console.log(obj.science, '999999999999999999')
+				});
+			},
+			Jump(id) {
+				uni.navigateTo({
+					url: "/pages/index/info?id=" + id
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	//搜索框
+	.Search-box {
+		padding-left: 20rpx;
+		padding-right: 20rpx;
+		height: 100rpx;
+		background: #ffffff;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		.Search-box-sort {
+			font-size: 30rpx;
+
+			font-weight: 500;
+			color: rgba(102, 102, 102, 1);
+
+			.sort-text {
+				width: 57rpx;
+				height: 29rpx;
+				font-size: 30rpx;
+				font-weight: 500;
+				color: rgba(51, 51, 51, 1);
+				line-height: 58rpx;
+				margin-right: 19rpx;
+			}
+
+			.sort-img {
+				width: 21rpx;
+				height: 11rpx;
+				margin-bottom: 4rpx;
+			}
+		}
+
+		.Search-box-size {
+			width: 630rpx;
+			height: 65rpx;
+			border-radius: 32rpx;
+			background-color: #f1f1f1;
+			padding-left: 36rpx;
+			display: flex;
+			align-items: center;
+
+			.box-img {
+				height: 32rpx;
+				width: 32rpx;
+				margin-right: 16rpx;
+			}
+
+			.box-word {
+				width: 100%;
+				font-size: 22rpx;
+				font-weight: 500;
+				color: rgba(205, 203, 203, 1);
+				line-height: 55rpx;
+			}
+		}
+	}
+
+	.content {
+		line-height: 1;
+
+		.list-box {
+			width: 725rpx;
+			height: 200rpx;
+			margin: 0 auto 20rpx;
+			background: #FFFFFF;
+			box-shadow: 0px 5rpx 5rpx 0px rgba(35, 24, 21, 0.06);
+			border-radius: 7rpx;
+			padding: 0 20rpx;
+			display: flex;
+			align-items: center;
+
+			.box-left {
+				width: 230rpx;
+				height: 145rpx;
+				margin-right: 20rpx;
+
+				.left-img {
+					width: 230rpx;
+					height: 145rpx;
+				}
+			}
+
+			.box-right {
+				width: 430rpx;
+				height: 145rpx;
+				position: relative;
+
+				.right-top {
+					font-size: 25rpx;
+					font-weight: bold;
+					color: #333333;
+					margin-bottom: 24rpx;
+				}
+
+				.right-center {
+					width: 362rpx;
+					// height: 53rpx;
+					font-size: 21rpx;
+					font-weight: bold;
+					color: #999999;
+					line-height: 33rpx;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					display: -webkit-box;
+					-webkit-line-clamp: 2; //在第几行显示...
+					-webkit-box-orient: vertical;
+				}
+
+				.right-foot {
+					font-size: 21rpx;
+					font-weight: bold;
+					color: #999999;
+					line-height: 31rpx;
+					text-align: right;
+					// margin-top: 13rpx;
+					position: absolute;
+					right: 0;
+					bottom: 0;
+				}
+			}
+		}
+	}
+</style>

pages/money/moneyPwd.vue

@@ -0,0 +1,165 @@
+<template>
+	<view class="container">
+		<view class="row b-b" v-if="userInfo.transaction">
+			<text class="tit">原密码</text>
+			<input class="input" v-model="oldPassword" type="text" placeholder="请填写原密码" placeholder-class="placeholder" />
+		</view>
+		<!-- <view class="row b-b">
+			<text class="tit">验证码</text>
+			<input class="input" v-model="captcha" type="text" placeholder="请填写验证码" placeholder-class="placeholder" />
+			<view class="code" @click="verification">{{ countDown == 0 ? '验证码' : countDown }}</view>
+		</view> -->
+		<view class="row b-b">
+			<text class="tit">新密码</text>
+			<input class="input" v-model="password" type="password" placeholder="请填写6位新密码" placeholder-class="placeholder" />
+		</view>
+		<view class="row b-b">
+			<text class="tit">再次输入</text>
+			<input class="input" v-model="yzpassword" type="password" placeholder="请重新填写6位新密码" placeholder-class="placeholder" />
+		</view>
+		<button class="add-btn" :class="{'bg-gray':loding}" @click="loding?'':confirm()">提交</button>
+	</view>
+</template>
+
+<script>
+// import { verify } from '@/api/login.js';
+import { mapState } from 'vuex';
+import { transaction } from '@/api/set.js';
+export default {
+	data() {
+		return {
+			time: '', //保存倒计时对象
+			countDown: 0, //倒计时
+			// account: '', //手机号
+			// captcha: '', //验证码
+			oldPassword:'',//老密码
+			password: '' ,//新密码
+			yzpassword:'',//重复输入
+			loding:false,//是否载入中
+		};
+	},
+	computed: {
+		...mapState('user',['userInfo'])
+	},
+	onLoad() {
+		if(this.userInfo.phone == null){
+			this.account = '';
+		}else{
+			this.account = this.userInfo.phone;
+			this.show = false;
+		}
+	},
+	watch: {
+		// 监听倒计时
+		countDown(i) {
+			if (i == 0) {
+				clearInterval(this.time);
+			}
+		}
+	},
+	methods: {
+		confirm(e) {
+			const reg = /^[0-9]{6}$/;
+			console.log(this.yzpassword)
+			if(!reg.test(this.yzpassword)){
+				uni.showModal({
+					title: '错误',
+					content: '请输入6位数字支付密码',
+					showCancel: false,
+				});
+				return false
+			}
+			if(this.yzpassword!=this.password){
+				uni.showModal({
+					title: '错误',
+					content: '密码不一致请重新输入',
+					showCancel: false,
+				});
+				return  false
+			}
+			this.loding = true;
+			transaction({
+				pass: this.password,
+				oldpass: this.oldPassword,
+			})
+				.then(({ data }) => {
+					this.loding = false;
+					uni.showModal({
+						title: '提示',
+						content: '修改成功',
+						showCancel: false,
+						confirmText: '返回个人中心',
+						success: res => {
+							uni.switchTab({
+								url:'/pages/user/user'
+							})
+						}
+					});
+					
+				})
+				.catch(err => {
+					this.loding = false;
+					console.log(err);
+				});
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+page {
+	background: $page-color-base;
+}
+.container {
+	padding-top: 30rpx;
+}
+.row {
+	display: flex;
+	align-items: center;
+	position: relative;
+	padding: 0 30rpx;
+	height: 110rpx;
+	background: #fff;
+
+	.tit {
+		flex-shrink: 0;
+		width: 120rpx;
+		font-size: 30rpx;
+		color: $font-color-dark;
+	}
+	.input {
+		flex: 1;
+		font-size: 30rpx;
+		color: $font-color-dark;
+	}
+	.iconlocation {
+		font-size: 36rpx;
+		color: $font-color-light;
+	}
+}
+.add-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 690rpx;
+	height: 80rpx;
+	margin: 60rpx auto;
+	font-size: $font-lg;
+	color: #fff;
+	background: #ff4c4c;
+	border-radius: 10rpx;
+	// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
+}
+
+.bg-gray{
+	background-color: $color-gray;
+}
+.code {
+	color: #5dbc7c;
+	font-size: 23rpx;
+	border-left: 1px solid #eeeeee;
+	width: 150rpx;
+	flex-shrink: 0;
+	text-align: center;
+}
+</style>

pages/money/pay.vue

@@ -12,14 +12,18 @@
 					<text class="tit">微信支付</text>
 					<text>推荐使用微信支付</text>
 				</view>
-				<label class="radio"><radio value="" color="#5dbc7c" :checked="payType == 1"></radio></label>
+				<label class="radio">
+					<radio value="" color="#5dbc7c" :checked="payType == 1"></radio>
+				</label>
 			</view>
 			<!-- #endif -->
 			<!-- #ifdef APP-PLUS -->
 			<view class="type-item b-b" @click="changePayType(2)">
 				<text class="icon iconfont iconzhifubao"></text>
 				<view class="con"><text class="tit">支付宝支付</text></view>
-				<label class="radio"><radio value="" color="#5dbc7c" :checked="payType == 2"></radio></label>
+				<label class="radio">
+					<radio value="" color="#5dbc7c" :checked="payType == 2"></radio>
+				</label>
 			</view>
 			<!-- #endif -->
 			<view class="type-item" @click="changePayType(3)">
@@ -28,7 +32,9 @@
 					<text class="tit">余额支付</text>
 					<text>可用余额 ¥{{ now_money }}</text>
 				</view>
-				<label class="radio"><radio value="" color="#5dbc7c" :checked="payType == 3"></radio></label>
+				<label class="radio">
+					<radio value="" color="#5dbc7c" :checked="payType == 3"></radio>
+				</label>
 			</view>
 		</view>
 		<text class="mix-btn" :class="{ clickbg: payLoding }" @click="!payLoding ? confirm() : ''">确认支付</text>
@@ -36,385 +42,420 @@
 </template>
 
 <script>
-import { balance } from '@/api/wallet.js';
-import { createOrderkey, computedOrderkey, orderPay } from '@/api/order.js';
-import { getUserInfo } from '@/api/user.js';
+	import {
+		balance
+	} from '@/api/wallet.js';
+	import {
+		createOrderkey,
+		computedOrderkey,
+		orderPay
+	} from '@/api/order.js';
+	import {
+		getUserInfo
+	} from '@/api/user.js';
 
-// #ifdef H5
+	// #ifdef H5
+
+	import weixinObj from '@/plugin/jweixin-module/index.js';
+	// #endif
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex';
+	export default {
+		data() {
+			return {
 
-import weixinObj from '@/plugin/jweixin-module/index.js';
-// #endif
-import { mapState, mapMutations } from 'vuex';
-export default {
-	data() {
-		return {
-			
-			// #ifdef H5
-			payName: 'weixin',
-			payType: 1, //支付类型
-			// #endif
-			// #ifdef MP-WEIXIN
-			payName: 'weixin',
-			payType: 1, //支付类型
-			// #endif
-			// #ifdef APP-PLUS
-			payType: 3,
-			payName: 'yue',
-			// #endif
-			orderInfo: {},
-			money: 0.0, //订单金额
-			now_money: 0.0, //余额
-			orderKey: '',
-			orderId: '', //保存订单id
-			payLoding: false, //判断是否支付中
-			type: '', //判断是否从订单中进入
-			// #ifdef H5
-			froms: '', //保存h5中数据来源对象
-			// #endif
-			pinkid: '', //保存拼团商品id
-			checkedAuto: 0, //判断是否为自动拼团
-			topify: '',
-			is_drop: '',
-			mer_id:'',//商户id
-		};
-	},
-	computed: {
-		// #ifdef H5
-		...mapState(['weichatObj']),
-		// #endif
-		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
-	},
-	onLoad(options) {
-		if(options.isdrop) {
-			this.is_drop = options.isdrop
-		}
-		this.mer_id = options.mer_id
- 		this.checkedAuto = options.checked || 0;
-		this.topify = options.topify || 0;
-		if (options.type == 1) {
-			this.type = 1;
-			this.orderId = options.ordid;
-			this.money = options.money;
-		} else {
-			this.orderKey = options.key;
-			let prepage = this.$api.prePage();
-			computedOrderkey({
-				orderkey: this.orderKey,
-				couponId: prepage.couponChecked.id, //优惠券编号
-				addressId: prepage.addressData.id, //地址编号
-				useIntegral: prepage.checkedPoints ? 1 : 0,
-				is_drop: this.is_drop,
-			}).then(({ data }) => {
-				// 获取支付金额
-				this.money = data.result.pay_price;
-			});
-		}
-		// 保存pinkid
-		if (options.pinkid) {
-			this.pinkid = options.pinkid;
-		}
-		// 载入余额
-		if ('now_money' in this.userInfo) {
-			this.now_money = this.userInfo.now_money;
-		} else {
-			balance({}).then(({ data }) => {
-				// 获取余额
-				this.now_money = data.now_money;
-			});
-		}
-	},
-	methods: {
-		...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
-		//选择支付方式
-		changePayType(type) {
-			this.payType = type;
-			if (this.payType == 1) {
-				this.payName = 'weixin';
-			}
-			if (this.payType == 2) {
-				this.payName = 'ali';
-			}
-			if (this.payType == 3) {
-				this.payName = 'yue';
-			}
-			// if (this.payType == 4) {
-			// 	this.payName = 'consumer';
-			// }
-		},
-		// 支付金额
-		orderMoneyPay() {
-			let obj = this;
-			orderPay({
-				uni: obj.orderId,
 				// #ifdef H5
-				from: obj.froms ? 'weixin' : 'H5', //来源
+				payName: 'weixin',
+				payType: 1, //支付类型
 				// #endif
 				// #ifdef MP-WEIXIN
-				from: 'routine', //来源
+				payName: 'weixin',
+				payType: 1, //支付类型
 				// #endif
 				// #ifdef APP-PLUS
-				from: 'app', //来源
+				payType: 3,
+				payName: 'yue',
 				// #endif
-				paytype: obj.payName ,//支付类型  weixin-微信 yue-余额
-				is_drop: obj.is_drop,
-				mer_id: obj.mer_id
-			})
-				.then(e => {
-					console.log(e,'zhifu+++++++++')
-					// 判断是否为余额支付
-					if (obj.payName == 'yue' && e.data.status == 'SUCCESS') {
-						if (e.status == 200) {
-							obj.paySuccessTo();
-						} else {
-							obj.$api.msg(msg);
-						}
-					}
-					if (obj.payName == 'weixin' || obj.payName == 'routine') {
-						let da = e.data.result.jsConfig;
-						let data = {
-							// #ifdef H5
-							timestamp: da.timestamp,
-							// #endif
-							// #ifdef MP
-							timeStamp: da.timestamp,
-							// #endif
-							nonceStr: da.nonceStr,
-							package: da.package,
-							signType: da.signType,
-							paySign: da.paySign,
-							success: function(res) {
-								obj.paySuccessTo();
-							},
-							fail: () => {
-								uni.navigateTo({
-									url: '/pages/order/order?state=0'
-								});
-							}
-						};
-						// #ifdef H5
-						if (obj.payName == 'weixin') {
-							weixinObj.chooseWXPay(data);
-						}
-						// #endif
-						// #ifdef MP-WEIXIN
-						if (obj.payName == 'routine') {
-							wx.requestPayment(data);
-						}
-						// #endif
-					}
-					uni.hideLoading();
-					obj.payLoding = false;
-				})
-				.catch(e => {
-					// 支付完成
-					uni.hideLoading();
-					obj.payLoding = false;
-					console.log(e);
-				});
+				// orderInfo: {},
+				money: 0.0, //订单金额
+				now_money: 0.0, //余额
+				orderKey: '',
+				orderId: '', //保存订单id
+				payLoding: false, //判断是否支付中
+				type: '', //判断是否从订单中进入
+				// #ifdef H5
+				froms: '', //保存h5中数据来源对象
+				// #endif
+				pinkid: '', //保存拼团商品id
+				checkedAuto: 0, //判断是否为自动拼团
+				topify: '',
+				is_gift: '',
+				mer_id: '', //商户id
+			};
 		},
-		// 支付成功跳转
-		paySuccessTo() {
-			getUserInfo({})
-				.then(({ data }) => {
-					console.log(data,"data")
-					this.setUserInfo(data);
-				})
-				.catch(e => {
-					console.log(e);
-				});
-			uni.hideLoading();
-			uni.redirectTo({
-				url: '/pages/money/paySuccess?orderid=' + this.orderId
-			});
+		computed: {
+			// #ifdef H5
+			...mapState(['weichatObj']),
+			// #endif
+			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
 		},
-		//确认支付
-		confirm: async function() {
-			let obj = this;
-			uni.showLoading({
-				title: '支付中',
-				mask: true
-			});
-			// 判断是否余额不足
-			if (obj.payName == 'yue' && +obj.now_money < obj.money) {
-				uni.hideLoading();
-				uni.showModal({
-					title: '提示',
-					content: '账户余额不足！',
-					showCancel: false,
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
+		onLoad(options) {
+			if (options.isgift) {
+				this.is_gift = options.isgift
+			}
+			this.mer_id = options.mer_id
+			this.checkedAuto = options.checked || 0;
+			this.topify = options.topify || 0;
+			if (options.type == 1) {
+				this.type = 1;
+				this.orderId = options.ordid;
+				this.money = options.money;
+			} else {
+				this.orderKey = options.key;
+				let prepage = this.$api.prePage();
+				computedOrderkey({
+					orderkey: this.orderKey,
+					couponId: prepage.couponChecked.id, //优惠券编号
+					addressId: prepage.addressData.id, //地址编号
+					useIntegral: prepage.checkedPoints ? 1 : 0,
+					is_drop: this.is_drop,
+				}).then(({
+					data
+				}) => {
+					// 获取支付金额
+					this.money = data.result.pay_price;
 				});
-				return;
 			}
-			// 支付中
-			obj.payLoding = true;
-			// #ifdef H5
-			// 获取当前是否为微信浏览器
-			obj.froms = uni.getStorageSync('weichatBrowser') || '';
-			// #endif
-			// 判断是否为未支付订单中跳转进入
-			if (obj.type != 1) {
-				// 初次生成订单
-				obj.firstCreateOrder();
+			// 保存pinkid
+			if (options.pinkid) {
+				this.pinkid = options.pinkid;
+			}
+			// 载入余额
+			if ('now_money' in this.userInfo) {
+				this.now_money = this.userInfo.now_money;
 			} else {
-				// 已经生成订单未支付
-				obj.orderMoneyPay();
+				balance({}).then(({
+					data
+				}) => {
+					// 获取余额
+					this.now_money = data.now_money;
+				});
 			}
 		},
-		// 初次订单创建
-		firstCreateOrder() {
-			let obj = this;
-			// 获取下单页面数据
-			let prepage = obj.$api.prePage();
+		methods: {
+			...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
+			//选择支付方式
+			changePayType(type) {
+				this.payType = type;
+				if (this.payType == 1) {
+					this.payName = 'weixin';
+				}
+				if (this.payType == 2) {
+					this.payName = 'ali';
+				}
+				if (this.payType == 3) {
+					this.payName = 'yue';
+				}
+				// if (this.payType == 4) {
+				// 	this.payName = 'consumer';
+				// }
+			},
+			// 支付金额
+			orderMoneyPay() {
+				let obj = this;
+				console.log('支付金额')
+				orderPay({
+						uni: obj.orderId,
+						// #ifdef H5
+						from: obj.froms ? 'weixin' : 'H5', //来源
+						// #endif
+						// #ifdef MP-WEIXIN
+						from: 'routine', //来源
+						// #endif
+						// #ifdef APP-PLUS
+						from: 'app', //来源
+						// #endif
+						paytype: obj.payName, //支付类型  weixin-微信 yue-余额
+						is_gift: obj.is_gift,
+						mer_id: obj.mer_id
+					})
+					.then(e => {
+						console.log(e, 'zhifu+++++++++')
+						// 判断是否为余额支付
+						if (obj.payName == 'yue' && e.data.status == 'SUCCESS') {
+							if (e.status == 200) {
+								obj.paySuccessTo();
+							} else {
+								obj.$api.msg(msg);
+							}
+						}
+						if (obj.payName == 'weixin' || obj.payName == 'routine') {
+							let da = e.data.result.jsConfig;
+							let data = {
+								// #ifdef H5
+								timestamp: da.timestamp,
+								// #endif
+								// #ifdef MP
+								timeStamp: da.timestamp,
+								// #endif
+								nonceStr: da.nonceStr,
+								package: da.package,
+								signType: da.signType,
+								paySign: da.paySign,
+								success: function(res) {
+									obj.paySuccessTo();
+								},
+								fail: () => {
+									uni.navigateTo({
+										url: '/pages/order/order?state=0'
+									});
+								}
+							};
+							// #ifdef H5
+							if (obj.payName == 'weixin') {
+								weixinObj.chooseWXPay(data);
+							}
+							// #endif
+							// #ifdef MP-WEIXIN
+							if (obj.payName == 'routine') {
+								wx.requestPayment(data);
+							}
+							if (obj.payName == 'weixin') {
+								console.log('开始支付')
+								wx.requestPayment(data);
 
-			let data = {
-				real_name: prepage.addressData.real_name, //联系人名称
-				phone: prepage.addressData.phone, //联系人号码
-				couponId: prepage.couponChecked.id, //优惠券编号
-				addressId: prepage.addressData.id, //支付地址id
-				useIntegral: prepage.checkedPoints ? 1 : 0, //是否积分抵扣1为是0为否
-				payType: obj.payName, //支付类型  weixin-微信 yue-余额
-				mark: prepage.desc, //备注
-				// #ifdef H5
-				from: obj.froms ? 'weixin' : 'H5', //来源
-				// #endif
-				// #ifdef MP-WEIXIN
-				from: 'routine', //来源
-				// #endif
-				// #ifdef APP-PLUS
-				from: 'app', //来源
-				// #endif
-				shipping_type: 1, //提货方式 1 快递 2自提
-				automatic: obj.checkedAuto,
-				topify: this.topify,
-				is_drop: obj.is_drop,
-				mer_id: obj.mer_id
-			};
-			// 判断是否拼团商品
-			if (obj.pinkid) {
-				data.pinkId = obj.pinkid;
-			}
-			// 生成订单
-			createOrderkey(data, obj.orderKey)
-				.then(({ data, status, msg }) => {
-					// 判断是否支付失败
-					if (data.status == 'ORDER_EXIST') {
-						uni.showModal({
-							title: '提示',
-							content: msg,
-							showCancel: false
-						});
+							}
+							// #endif
+						}
 						uni.hideLoading();
 						obj.payLoding = false;
-						return;
-					}
-					// 保存订单号
-					obj.orderId = data.result.orderId;
-					// 判断是否为余额支付
-					if (obj.payName == 'yue') {
-						if (status == 200 && data.status == 'SUCCESS') {
-							obj.paySuccessTo();
+					})
+					.catch(e => {
+						// 支付完成
+						uni.hideLoading();
+						obj.payLoding = false;
+						console.log(e);
+					});
+			},
+			// 支付成功跳转
+			paySuccessTo() {
+				getUserInfo({})
+					.then(({
+						data
+					}) => {
+						console.log(data, "data")
+						this.setUserInfo(data);
+					})
+					.catch(e => {
+						console.log(e);
+					});
+				uni.hideLoading();
+				uni.redirectTo({
+					url: '/pages/money/paySuccess?orderid=' + this.orderId
+				});
+			},
+			//确认支付
+			confirm: async function() {
+				let obj = this;
+				uni.showLoading({
+					title: '支付中',
+					mask: true
+				});
+				// 判断是否余额不足
+				if (obj.payName == 'yue' && +obj.now_money < obj.money) {
+					uni.hideLoading();
+					uni.showModal({
+						title: '提示',
+						content: '账户余额不足！',
+						showCancel: false,
+						success: res => {},
+						fail: () => {},
+						complete: () => {}
+					});
+					return;
+				}
+				// 支付中
+				obj.payLoding = true;
+				// #ifdef H5
+				// 获取当前是否为微信浏览器
+				obj.froms = uni.getStorageSync('weichatBrowser') || '';
+				// #endif
+				// 判断是否为未支付订单中跳转进入
+				if (obj.type != 1) {
+					// 初次生成订单
+					obj.firstCreateOrder();
+				} else {
+					// 已经生成订单未支付
+					obj.orderMoneyPay();
+				}
+			},
+			// 初次订单创建
+			firstCreateOrder() {
+				let obj = this;
+				// 获取下单页面数据
+				let prepage = obj.$api.prePage();
+
+				let data = {
+					real_name: prepage.addressData.real_name, //联系人名称
+					phone: prepage.addressData.phone, //联系人号码
+					couponId: prepage.couponChecked.id, //优惠券编号
+					addressId: prepage.addressData.id, //支付地址id
+					useIntegral: prepage.checkedPoints ? 1 : 0, //是否积分抵扣1为是0为否
+					payType: obj.payName, //支付类型  weixin-微信 yue-余额
+					mark: prepage.desc, //备注
+					// #ifdef H5
+					from: obj.froms ? 'weixin' : 'H5', //来源
+					// #endif
+					// #ifdef MP-WEIXIN
+					from: 'routine', //来源
+					// #endif
+					// #ifdef APP-PLUS
+					from: 'app', //来源
+					// #endif
+					shipping_type: 1, //提货方式 1 快递 2自提
+					automatic: obj.checkedAuto,
+					topify: this.topify,
+					is_gift: obj.is_gift,
+					mer_id: obj.mer_id
+				};
+				// 判断是否拼团商品
+				if (obj.pinkid) {
+					data.pinkId = obj.pinkid;
+				}
+				// 生成订单
+				createOrderkey(data, obj.orderKey)
+					.then(({
+						data,
+						status,
+						msg
+					}) => {
+						// 判断是否支付失败
+						if (data.status == 'ORDER_EXIST') {
+							uni.showModal({
+								title: '提示',
+								content: msg,
+								showCancel: false
+							});
+							uni.hideLoading();
+							obj.payLoding = false;
+							return;
+						}
+						// 保存订单号
+						obj.orderId = data.result.orderId;
+						// 判断是否为余额支付
+						if (obj.payName == 'yue') {
+							if (status == 200 && data.status == 'SUCCESS') {
+								obj.paySuccessTo();
+							} else {
+								obj.$api.msg(msg);
+							}
 						} else {
-							obj.$api.msg(msg);
+							// 立即支付
+							obj.orderMoneyPay();
 						}
-					} else {
-						// 立即支付
-						obj.orderMoneyPay();
-					}
-				})
-				.catch(e => {
-					uni.hideLoading();
-					obj.payLoding = false;
-					console.log(e);
-				});
+					})
+					.catch(e => {
+						uni.hideLoading();
+						obj.payLoding = false;
+						console.log(e);
+					});
+			}
 		}
-	}
-};
+	};
 </script>
 
 <style lang="scss">
-.app {
-	width: 100%;
-}
-
-.price-box {
-	background-color: #fff;
-	height: 265upx;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	font-size: 28upx;
-	color: #909399;
-
-	.price {
-		font-size: 50upx;
-		color: #303133;
-		margin-top: 12upx;
-		&:before {
-			content: '￥';
-			font-size: 40upx;
-		}
+	.app {
+		width: 100%;
 	}
-}
 
-.pay-type-list {
-	margin-top: 20upx;
-	background-color: #fff;
-	padding-left: 60upx;
-	.type-item {
-		height: 120upx;
-		padding: 20upx 0;
+	.price-box {
+		background-color: #fff;
+		height: 265upx;
 		display: flex;
-		justify-content: space-between;
+		flex-direction: column;
+		justify-content: center;
 		align-items: center;
-		padding-right: 60upx;
-		font-size: 30upx;
-		position: relative;
-	}
+		font-size: 28upx;
+		color: #909399;
 
-	.icon {
-		width: 100upx;
-		font-size: 52upx;
-	}
-	.iconyue {
-		color: #fe8e2e;
-	}
-	.iconweixin {
-		color: #36cb59;
-	}
-	.iconzhifubao {
-		color: #01aaef;
+		.price {
+			font-size: 50upx;
+			color: #303133;
+			margin-top: 12upx;
+
+			&:before {
+				content: '￥';
+				font-size: 40upx;
+			}
+		}
 	}
-	.tit {
-		font-size: $font-lg;
-		color: $font-color-dark;
-		margin-bottom: 4upx;
+
+	.pay-type-list {
+		margin-top: 20upx;
+		background-color: #fff;
+		padding-left: 60upx;
+
+		.type-item {
+			height: 120upx;
+			padding: 20upx 0;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding-right: 60upx;
+			font-size: 30upx;
+			position: relative;
+		}
+
+		.icon {
+			width: 100upx;
+			font-size: 52upx;
+		}
+
+		.iconyue {
+			color: #fe8e2e;
+		}
+
+		.iconweixin {
+			color: #36cb59;
+		}
+
+		.iconzhifubao {
+			color: #01aaef;
+		}
+
+		.tit {
+			font-size: $font-lg;
+			color: $font-color-dark;
+			margin-bottom: 4upx;
+		}
+
+		.con {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			font-size: $font-sm;
+			color: $font-color-light;
+		}
 	}
-	.con {
-		flex: 1;
+
+	.mix-btn {
 		display: flex;
-		flex-direction: column;
-		font-size: $font-sm;
-		color: $font-color-light;
+		align-items: center;
+		justify-content: center;
+		width: 630upx;
+		height: 80upx;
+		margin: 80upx auto 30upx;
+		font-size: $font-lg;
+		color: #fff;
+		background-color: $base-color;
+		border-radius: 10upx;
+		/* box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4); */
 	}
-}
-.mix-btn {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 630upx;
-	height: 80upx;
-	margin: 80upx auto 30upx;
-	font-size: $font-lg;
-	color: #fff;
-	background-color: $base-color;
-	border-radius: 10upx;
-	/* box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4); */
-}
 
-.clickbg {
-	background-color: $color-gray !important;
-}
+	.clickbg {
+		background-color: $color-gray !important;
+	}
 </style>

pages/money/wallet.vue

@@ -5,11 +5,21 @@
 				<image src="../../static/img/qbbg.png" mode=""></image>
 				<view class="money"><text class="money-icon">￥</text>{{ userInfo.now_money | getMoneyStyle }}</view>
 			</view>
+			<view class="yuezz" @click="navto('/pages/user/yuezz')">
+				余额转账
+			</view>
+			<view class="zzjl" @click="navto('/pages/user/zzjl')">
+				转账记录
+			</view>
 		</view>
 		<view class="navbar">
-			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)" v-if="item.text!=='全部'">{{ item.text }}</view>
+			<view v-for="(item, index) in navList" :key="index" class="nav-item"
+				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)" v-if="item.text!=='全部'">
+				{{ item.text }}
+			</view>
 		</view>
-		<swiper :current="tabCurrentIndex" :style="{'height':maxheight+'px'}" class="swiper-box" duration="300" @change="changeTab">
+		<swiper :current="tabCurrentIndex" :style="{'height':maxheight+'px'}" class="swiper-box" duration="300"
+			@change="changeTab">
 			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
 				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
 					<!-- 空白页 -->
@@ -39,321 +49,382 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex';
-import { spreadCommission, userBalance } from '@/api/wallet.js';
-import { getMoneyStyle } from '@/utils/rocessor.js';
-import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
-import empty from '@/components/empty';
-export default {
-	filters: {
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex';
+	import {
+		spreadCommission,
+		userBalance
+	} from '@/api/wallet.js';
+	import {
 		getMoneyStyle
-	},
-	components: {
-		empty,
-		uniLoadMore
-	},
-	onReady() {
-		// 初始化获取页面宽度
-		uni.createSelectorQuery()
-			.select('.content')
-			.fields(
-				{
-					size: true
-				},
-				data => {
-					console.log(data);
-					console.log(Math.floor((data.width / 750) * 300));
-					// 保存头部高度
-					this.maxheight =data.height - Math.floor((data.width / 750) * 570);
-					console.log(this.maxheight);
-				}
-			)
-			.exec();
-	},
-	data() {
-		return {
-			// 头部图高度
-			maxheight:'',
-			tabCurrentIndex: 0,
-			navList: [
-				{
-					state: 2,
-					text: '收入',
-					loadingType: 'more',
-					orderList: [],
-					page: 1, //当前页数
-					limit: 10 //每次信息条数
-				},
-				{
-					state: 1,
-					text: '支出',
-					loadingType: 'more',
-					orderList: [
-					],
-					page: 1, //当前页数
-					limit: 10 //每次信息条数
-				},
-				
-			],
-			money: ''
-		};
-	},
-	computed: {
-		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
-	},
-	onLoad(options) {},
-	onShow() {
-		this.loadData();
-		// 获取用户余额
-		
-	},
-	methods: {
-		// 页面跳转
-		navto(e) {
-			uni.navigateTo({
-				url: e
-			});
+	} from '@/utils/rocessor.js';
+	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
+	import empty from '@/components/empty';
+	export default {
+		filters: {
+			getMoneyStyle
 		},
-		//获取收入支出信息
-		async loadData(source) {
-			//这里是将订单挂载到tab列表下
-			let index = this.tabCurrentIndex;
-			let navItem = this.navList[index];
-			let state = navItem.state;
-			if (source === 'tabChange' && navItem.loaded === true) {
-				//tab切换只有第一次需要加载数据
-				return;
-			}
-			if (navItem.loadingType === 'loading') {
-				//防止重复加载
-				return;
-			}
-			// 修改当前对象状态为加载中
-			navItem.loadingType = 'loading';
-
-			spreadCommission(
-				{
-					page: navItem.page,
-					limit: navItem.limit
-				},
-				state
-			)
-				.then(({ data }) => {
-					console.log(data);
-					// if (data.count > 0) {
-					// 	navItem.orderList = navItem.orderList.concat(data.list);
-					// 	console.log(navItem.orderList);
-					// 	navItem.page++;
-					// }
-					if (data.length > 0) {
-						navItem.orderList = navItem.orderList.concat(data[0].list);
-						console.log(navItem.orderList);
-						navItem.page++;
-					}
-					if (navItem.limit == data.length) {
-						//判断是否还有数据， 有改为 more， 没有改为noMore
-						navItem.loadingType = 'more';
-						return;
-					} else {
-						//判断是否还有数据， 有改为 more， 没有改为noMore
-						navItem.loadingType = 'noMore';
+		components: {
+			empty,
+			uniLoadMore
+		},
+		onReady() {
+			// 初始化获取页面宽度
+			uni.createSelectorQuery()
+				.select('.content')
+				.fields({
+						size: true
+					},
+					data => {
+						console.log(data);
+						console.log(Math.floor((data.width / 750) * 300));
+						// 保存头部高度
+						this.maxheight = data.height - Math.floor((data.width / 750) * 570);
+						console.log(this.maxheight);
 					}
-					uni.hideLoading();
-					this.$set(navItem, 'loaded', true);
-					
-				})
-				.catch(e => {
-					console.log(e);
-				});
+				)
+				.exec();
 		},
+		data() {
+			return {
+				// 头部图高度
+				maxheight: '',
+				tabCurrentIndex: 0,
+				navList: [{
+						state: 2,
+						text: '收入',
+						loadingType: 'more',
+						orderList: [],
+						page: 1, //当前页数
+						limit: 10 //每次信息条数
+					},
+					{
+						state: 1,
+						text: '支出',
+						loadingType: 'more',
+						orderList: [],
+						page: 1, //当前页数
+						limit: 10 //每次信息条数
+					},
 
-		//swiper 切换
-		changeTab(e) {
-			this.tabCurrentIndex = e.target.current;
-			this.loadData('tabChange');
+				],
+				money: ''
+			};
+		},
+		computed: {
+			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
 		},
-		//顶部tab点击
-		tabClick(index) {
-			this.tabCurrentIndex = index;
+		onLoad(options) {},
+		onShow() {
+			this.loadData();
+			// 获取用户余额
+
 		},
-		addmoney() {
-			uni.navigateTo({
-				url: '/pages/money/recharge'
-			})
+		methods: {
+			// 页面跳转
+			navto(e) {
+				uni.navigateTo({
+					url: e
+				});
+			},
+			//获取收入支出信息
+			async loadData(source) {
+				//这里是将订单挂载到tab列表下
+				let index = this.tabCurrentIndex;
+				let navItem = this.navList[index];
+				let state = navItem.state;
+				if (source === 'tabChange' && navItem.loaded === true) {
+					//tab切换只有第一次需要加载数据
+					return;
+				}
+				if (navItem.loadingType === 'loading') {
+					//防止重复加载
+					return;
+				}
+				// 修改当前对象状态为加载中
+				navItem.loadingType = 'loading';
+
+				spreadCommission({
+							page: navItem.page,
+							limit: navItem.limit
+						},
+						state
+					)
+					.then(({
+						data
+					}) => {
+						console.log(data);
+						// if (data.count > 0) {
+						// 	navItem.orderList = navItem.orderList.concat(data.list);
+						// 	console.log(navItem.orderList);
+						// 	navItem.page++;
+						// }
+						if (data.length > 0) {
+							navItem.orderList = navItem.orderList.concat(data[0].list);
+							console.log(navItem.orderList);
+							navItem.page++;
+						}
+						if (navItem.limit == data.length) {
+							//判断是否还有数据， 有改为 more， 没有改为noMore
+							navItem.loadingType = 'more';
+							return;
+						} else {
+							//判断是否还有数据， 有改为 more， 没有改为noMore
+							navItem.loadingType = 'noMore';
+						}
+						uni.hideLoading();
+						this.$set(navItem, 'loaded', true);
+
+					})
+					.catch(e => {
+						console.log(e);
+					});
+			},
+
+			//swiper 切换
+			changeTab(e) {
+				this.tabCurrentIndex = e.target.current;
+				this.loadData('tabChange');
+			},
+			//顶部tab点击
+			tabClick(index) {
+				this.tabCurrentIndex = index;
+			},
+			addmoney() {
+				uni.navigateTo({
+					url: '/pages/money/recharge'
+				})
+			}
 		}
-	}
-};
+	};
 </script>
 
 <style lang="scss">
-page {
-	background: #ffffff;
-	height: 100%;
-}
-.content-money {
-	padding-bottom: 30rpx;
-	background: $page-color-base;
-	.moneyTx {
-		position: absolute;
-		top: 150rpx;
-		right: 0rpx;
-		width: 150rpx;
-		padding: 10rpx 30rpx;
-		border: 2px solid #ffffff;
-		border-top-left-radius: 99rpx;
-		border-bottom-left-radius: 99rpx;
-		color: #ffffff;
-		line-height: 1;
-		font-size: $font-base;
+	page {
+		background: #ffffff;
+		height: 100%;
 	}
-	.buttom-box {
-		background-color: #ffffff;
-		text-align: center;
-		margin: 0 30rpx;
-		padding: 20rpx 0;
-		border-radius: $border-radius-sm;
-		margin-top: -60rpx;
-		.buttom {
-			font-size: $font-lg;
-			flex-grow: 1;
+
+	.content-money {
+		padding-bottom: 30rpx;
+		background: $page-color-base;
+		position: relative;
+		.yuezz {
+			width: 139rpx;
+			line-height: 50rpx;
+			background: #fff;
+			border-radius: 7rpx;
+			position: absolute;
+			top: 20rpx;
+			right: 0;
+			text-align: center;
+			font-size: 26rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #E83F30;
 		}
-		.interval {
-			width: 2px;
-			height: 60rpx;
-			background-color: #eeeeee;
+
+		.zzjl {
+			width: 139rpx;
+			line-height: 50rpx;
+			background: #fff;
+			border-radius: 7rpx;
+			position: absolute;
+			top: 90rpx;
+			right: 0;
+			text-align: center;
+			font-size: 26rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #E83F30;
 		}
-		.icon {
-			height: 50rpx;
-			width: 48rpx;
-			margin: 0 auto;
-			.icon-img {
-				width: 100%;
-				height: 100%;
+
+		.moneyTx {
+			position: absolute;
+			top: 150rpx;
+			right: 0rpx;
+			width: 150rpx;
+			padding: 10rpx 30rpx;
+			border: 2px solid #ffffff;
+			border-top-left-radius: 99rpx;
+			border-bottom-left-radius: 99rpx;
+			color: #ffffff;
+			line-height: 1;
+			font-size: $font-base;
+		}
+
+		.buttom-box {
+			background-color: #ffffff;
+			text-align: center;
+			margin: 0 30rpx;
+			padding: 20rpx 0;
+			border-radius: $border-radius-sm;
+			margin-top: -60rpx;
+
+			.buttom {
+				font-size: $font-lg;
+				flex-grow: 1;
+			}
+
+			.interval {
+				width: 2px;
+				height: 60rpx;
+				background-color: #eeeeee;
+			}
+
+			.icon {
+				height: 50rpx;
+				width: 48rpx;
+				margin: 0 auto;
+
+				.icon-img {
+					width: 100%;
+					height: 100%;
+				}
 			}
 		}
 	}
-}
-.money-box {
-	// background-color: $base-color;
-	// padding-top: var(--status-bar-height);
-	height: 400rpx;
-	color: #FF4C4C;
-	text-align: center;
-	position: relative;
-	image {
-		position: absolute;
-		top: 0;
-		right: 0;
-		height: 100%;
-		width: 100%;
-		// z-index: 1;
-	}
-	.text {
-		padding-top: 147rpx;
-		font-size: $font-sm;
-		position: relative;
-	}
-	.money {
-		padding-top: 175rpx;
-		// margin: auto 0;
-		font-size: 56rpx;
-		font-weight: bold;
+
+	.money-box {
+		// background-color: $base-color;
+		// padding-top: var(--status-bar-height);
+		height: 400rpx;
 		color: #FF4C4C;
+		text-align: center;
 		position: relative;
-		.money-icon {
-			font-size: 38rpx;
+
+		image {
+			position: absolute;
+			top: 0;
+			right: 0;
+			height: 100%;
+			width: 100%;
+			// z-index: 1;
+		}
+
+		.text {
+			padding-top: 147rpx;
+			font-size: $font-sm;
+			position: relative;
+		}
+
+		.money {
+			padding-top: 175rpx;
+			// margin: auto 0;
+			font-size: 56rpx;
 			font-weight: bold;
 			color: #FF4C4C;
+			position: relative;
+
+			.money-icon {
+				font-size: 38rpx;
+				font-weight: bold;
+				color: #FF4C4C;
+			}
 		}
 	}
-}
-
-.navbar {
-	display: flex;
-	height: 40px;
-	padding: 0 5px;
-	background: #fff;
-	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
-	position: relative;
-	z-index: 10;
-	.nav-item {
-		flex: 1;
+
+	.navbar {
 		display: flex;
-		justify-content: center;
-		align-items: center;
-		height: 100%;
-		font-size: 15px;
-		color: #999999;
+		height: 40px;
+		padding: 0 5px;
+		background: #fff;
+		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
 		position: relative;
-		&.current {
-			color: $base-color;
-			&:after {
-				content: '';
-				position: absolute;
-				left: 50%;
-				bottom: 0;
-				transform: translateX(-50%);
-				width: 44px;
-				height: 0;
-				border-bottom: 2px solid $base-color;
+		z-index: 10;
+
+		.nav-item {
+			flex: 1;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 100%;
+			font-size: 15px;
+			color: #999999;
+			position: relative;
+
+			&.current {
+				color: $base-color;
+
+				&:after {
+					content: '';
+					position: absolute;
+					left: 50%;
+					bottom: 0;
+					transform: translateX(-50%);
+					width: 44px;
+					height: 0;
+					border-bottom: 2px solid $base-color;
+				}
 			}
 		}
 	}
-}
-// 列表
-
-.swiper-box {
-	padding-top: 10rpx;
-	.order-item {
-		padding: 20rpx 30rpx;
-		line-height: 1.5;
-		position: relative;
-		// border-bottom: 1rpx black solid;
-		.title-box {
-			.title {
+
+	// 列表
+
+	.swiper-box {
+		padding-top: 10rpx;
+
+		.order-item {
+			padding: 20rpx 30rpx;
+			line-height: 1.5;
+			position: relative;
+
+			// border-bottom: 1rpx black solid;
+			.title-box {
+				.title {
+					font-size: $font-lg;
+					color: $font-color-base;
+				}
+
+				.time {
+					font-size: $font-base;
+					color: $font-color-light;
+				}
+			}
+
+			.money {
+				// color: #fd5b23;
+				color: #901B21;
 				font-size: $font-lg;
-				color: $font-color-base;
 			}
-			.time {
-				font-size: $font-base;
-				color: $font-color-light;
+
+			.jg {
+				width: 701rpx;
+				height: 2rpx;
+				background: #F0F4F8;
+				margin: 0 auto;
+				position: absolute;
+				bottom: 0;
 			}
 		}
-		.money {
-			// color: #fd5b23;
-			color: #901B21;
-			font-size: $font-lg;
-		}
-		.jg {
-			width: 701rpx;
-			height: 2rpx;
-			background: #F0F4F8;
-			margin: 0 auto;
-			position: absolute;
-			bottom: 0;
+	}
+
+	.list-scroll-content {
+		height: 100%;
+	}
+
+	.content {
+		height: 100%;
+
+		.empty-content {
+			background-color: #ffffff;
 		}
 	}
-}
-.list-scroll-content {
-	height: 100%;
-}
-.content {
-	height: 100%;
-	.empty-content {
-		background-color: #ffffff;
+
+	.add-btn {
+		position: fixed;
+		bottom: 51rpx;
+		right: 39rpx;
+		width: 674rpx;
+		height: 88rpx;
+		background: $base-color;
+		border-radius: 44rpx;
+		color: #fff;
+		text-align: center;
+		line-height: 88rpx;
+		font-size: 34rpx;
 	}
-}
-.add-btn {
-	position: fixed;
-	bottom: 51rpx;
-	right: 39rpx;
-	width: 674rpx;
-	height: 88rpx;
-	background: $base-color;
-	border-radius: 44rpx;
-	color: #fff;
-	text-align: center;
-	line-height: 88rpx;
-	font-size: 34rpx;
-}
 </style>

pages/order/createOrder.vue

@@ -218,7 +218,8 @@ export default {
 			integralShow: false, //是否显示积分抵扣金额
 			payType: true, //是否可支付
 			pinkid: '', //保存拼团商品id
-			isdrop: 0,
+			isgift: 0,
+		
 		};
 	},
 	onLoad(option) {
@@ -231,9 +232,9 @@ export default {
 			this.cartId = option.id;
 			this.loadData();
 		}
-		if(option.isdrop) {
-			this.isdrop = option.isdrop*1
-			console.log(this.isdrop,)
+		if(option.isgift) {
+			this.isgift = option.isgift*1
+			console.log(this.isgift,)
 		}
 		this.userinfo();
 	},
@@ -291,7 +292,8 @@ export default {
 				useIntegral: this.checkedPoints ? 1 : 0, //是否积分抵扣
 				couponId: this.couponChecked.id, //优惠券编号
 				addressId: this.addressData.id ,//地址编号
-				is_drop: this.isdrop
+				is_gift: this.isgift,
+				mer_id:this.mer_id
 			})
 				.then(({ data }) => {
 					console.log(data,'111');
@@ -371,7 +373,7 @@ export default {
 				return false;
 			}
 			console.log(this.isdrop,'dddddddddddddddddddddddddd')
-			let url =  '/pages/money/pay?key='+ this.orderKey + '&isdrop=' + this.isdrop + '&mer_id=' + this.mer_id
+			let url =  '/pages/money/pay?key='+ this.orderKey + '&isgift=' + this.isgift + '&mer_id=' + this.mer_id
 			if(this.pinkid){
 				url += '&pinkid='+this.pinkid
 			}

pages/product/construction.vue

@@ -83,7 +83,7 @@ export default {
 			getProducts({
 				page: obj.page,
 				limit: obj.limit,
-				is_drop: 1
+				is_gift: 1
 			}).then(({data}) => {
 				console.log(data,'is_drop++++++++++++++++')
 				let list = data.map(item => {

pages/product/list.vue

@@ -6,21 +6,25 @@
 				<text>销量优先</text>
 				<view class="p-box">
 					<text :class="{ active: numberOrder === 1 && filterIndex === 1 }" class="iconfont iconfold"></text>
-					<text :class="{ active: numberOrder === 2 && filterIndex === 1 }" class="iconfont iconfold xia"></text>
+					<text :class="{ active: numberOrder === 2 && filterIndex === 1 }"
+						class="iconfont iconfold xia"></text>
 				</view>
 			</view>
 			<view class="nav-item" :class="{ current: filterIndex === 2 }" @click="tabClick(2)">
 				<text>价格</text>
 				<view class="p-box">
 					<text :class="{ active: priceOrder === 1 && filterIndex === 2 }" class="iconfont iconfold"></text>
-					<text :class="{ active: priceOrder === 2 && filterIndex === 2 }" class="iconfont iconfold xia"></text>
+					<text :class="{ active: priceOrder === 2 && filterIndex === 2 }"
+						class="iconfont iconfold xia"></text>
 				</view>
 			</view>
 			<text class="cate-item iconfont iconapps" @click="toggleCateMask('show')"></text>
 		</view>
 		<view class="goods-list">
 			<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navToDetailPage(item)">
-				<view class="image-wrapper"><image :src="item.image" mode="aspectFill"></image></view>
+				<view class="image-wrapper">
+					<image :src="item.image" mode="aspectFill"></image>
+				</view>
 				<text class="title clamp">{{ item.title }}</text>
 				<view class="price-box">
 					<text class="price">{{ item.price }}</text>
@@ -30,12 +34,14 @@
 		</view>
 		<uni-load-more :status="loadingType"></uni-load-more>
 
-		<view class="cate-mask" :class="cateMaskState === 0 ? 'none' : cateMaskState === 1 ? 'show' : ''" @click="toggleCateMask">
+		<view class="cate-mask" :class="cateMaskState === 0 ? 'none' : cateMaskState === 1 ? 'show' : ''"
+			@click="toggleCateMask">
 			<view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
 				<scroll-view scroll-y class="cate-list">
 					<view v-for="item in cateList" :key="item.id">
 						<view class="cate-item b-b two">{{ item.cate_name }}</view>
-						<view v-for="tItem in item.children" :key="tItem.id" class="cate-item b-b" :class="{ active: tItem.id == cateId }" @click="changeCate(tItem)">
+						<view v-for="tItem in item.children" :key="tItem.id" class="cate-item b-b"
+							:class="{ active: tItem.id == cateId }" @click="changeCate(tItem)">
 							{{ tItem.cate_name }}
 						</view>
 					</view>
@@ -46,380 +52,412 @@
 </template>
 
 <script>
-		import weixinObj from "@/plugin/jweixin-module/index.js";
-import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
-import { getProducts } from '@/api/product.js';
-import { getCategoryList } from '@/api/product.js';
-import { mapState, mapMutations } from 'vuex';
-export default {
-	components: {
-		uniLoadMore
-	},
-	data() {
-		return {
-			cateMaskState: 0, //分类面板展开状态
-			headerPosition: 'fixed',
-			headerTop: '0px',
-			loadingType: 'more', //加载更多状态
-			filterIndex: 0, //查询类型
-			numberOrder: 0, //1 销量从低到高 2销量从高到低
-			limit: 6, //每次加载数据条数
-			page: 0, //当前页数
-			cateId: 0, //已选三级分类id
-			priceOrder: 0, //1 价格从低到高 2价格从高到低
-			cateList: [], //分类列表
-			goodsList: [] //商品列表
-		};
-	},
-
-	onLoad(options) {
-		// #ifdef H5
-		this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
-		// #endif
-		this.cateId = options.tid;
-		this.loadCateList(options.fid, options.sid);
-		this.loadData();
-		weixinObj.hideAllNonBaseMenuItem();
-		
-	},
-	onPageScroll(e) {
-		//兼容iOS端下拉时顶部漂移
-		if (e.scrollTop >= 0) {
-			this.headerPosition = 'fixed';
-		} else {
-			this.headerPosition = 'absolute';
-		}
-	},
-	//下拉刷新
-	onPullDownRefresh() {
-		this.loadData('refresh');
-	},
-	//监听页面是否滚动到底部加载更多
-	onReachBottom() {
-		this.loadData();
-	},
-	computed: {
-		...mapState('user', ['hasLogin', 'userInfo']),
-	},
-	methods: {
-		//加载分类
-		async loadCateList(fid, sid) {
-			let obj = this;
-			getCategoryList({}).then(function(e) {
-				console.log(e);
-				e.data.forEach(function(e) {
-					if (e.id == fid) {
-						obj.cateList = e.children;
-						return;
-					}
-				});
-				console.log(obj.cateList);
-			});
+
+	
+	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
+	import {
+		getProducts
+	} from '@/api/product.js';
+	import {
+		getCategoryList
+	} from '@/api/product.js';
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex';
+	export default {
+		components: {
+			uniLoadMore
 		},
-		//加载商品 ，带下拉刷新和上滑加载
-		async loadData(type = 'add', loading) {
-			let obj = this;
-			let data = {
-				page: obj.page,
-				limit: obj.limit,
-				sid: obj.cateId //分类id
+		data() {
+			return {
+				cateMaskState: 0, //分类面板展开状态
+				headerPosition: 'fixed',
+				headerTop: '0px',
+				loadingType: 'more', //加载更多状态
+				filterIndex: 0, //查询类型
+				numberOrder: 0, //1 销量从低到高 2销量从高到低
+				limit: 6, //每次加载数据条数
+				page: 0, //当前页数
+				cateId: 0, //已选三级分类id
+				priceOrder: 0, //1 价格从低到高 2价格从高到低
+				cateList: [], //分类列表
+				goodsList: [] //商品列表
 			};
-			//没有更多直接返回
-			if (type === 'add') {
-				if (obj.loadingType === 'nomore') {
-					return;
-				}
-				obj.loadingType = 'loading';
+		},
+
+		onLoad(options) {
+			// #ifdef H5
+			this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
+			// #endif
+			this.cateId = options.tid;
+			this.loadCateList(options.fid, options.sid);
+			this.loadData();
+			
+
+		},
+		onPageScroll(e) {
+			//兼容iOS端下拉时顶部漂移
+			if (e.scrollTop >= 0) {
+				this.headerPosition = 'fixed';
 			} else {
-				obj.loadingType = 'more';
-			}
-			if (type === 'refresh') {
-				// 清空数组
-				obj.goodsList = [];
-				obj.page = 1
-			}
-			if (this.filterIndex == 1) {
-				console.log( obj.salesOrder);
-				data.salesOrder = obj.numberOrder == 1 ? 'asc' : 'desc';
-			}
-			if (this.filterIndex == 2) {
-				console.log( obj.priceOrder);
-				data.priceOrder = obj.priceOrder == 1 ? 'asc' : 'desc';
+				this.headerPosition = 'absolute';
 			}
-			getProducts(data).then(function(e) {
-				console.log(e.data);
-				obj.goodsList = obj.goodsList.concat(e.data);
-				//判断是否还有下一页，有是more  没有是nomore
-				if (obj.limit==e.data.length) {
-					obj.page++
-					obj.loadingType='more'
-				} else{
-					obj.loadingType='nomore'
+		},
+		//下拉刷新
+		onPullDownRefresh() {
+			this.loadData('refresh');
+		},
+		//监听页面是否滚动到底部加载更多
+		onReachBottom() {
+			this.loadData();
+		},
+		computed: {
+			...mapState('user', ['hasLogin', 'userInfo']),
+		},
+		methods: {
+			//加载分类
+			async loadCateList(fid, sid) {
+				let obj = this;
+				getCategoryList({}).then(function(e) {
+					console.log(e);
+					e.data.forEach(function(e) {
+						if (e.id == fid) {
+							obj.cateList = e.children;
+							return;
+						}
+					});
+					console.log(obj.cateList);
+				});
+			},
+			//加载商品 ，带下拉刷新和上滑加载
+			async loadData(type = 'add', loading) {
+				let obj = this;
+				let data = {
+					page: obj.page,
+					limit: obj.limit,
+					sid: obj.cateId //分类id
+				};
+				//没有更多直接返回
+				if (type === 'add') {
+					if (obj.loadingType === 'nomore') {
+						return;
+					}
+					obj.loadingType = 'loading';
+				} else {
+					obj.loadingType = 'more';
 				}
 				if (type === 'refresh') {
-					if (loading == 1) {
-						uni.hideLoading();
+					// 清空数组
+					obj.goodsList = [];
+					obj.page = 1
+				}
+				if (this.filterIndex == 1) {
+					console.log(obj.salesOrder);
+					data.salesOrder = obj.numberOrder == 1 ? 'asc' : 'desc';
+				}
+				if (this.filterIndex == 2) {
+					console.log(obj.priceOrder);
+					data.priceOrder = obj.priceOrder == 1 ? 'asc' : 'desc';
+				}
+				getProducts(data).then(function(e) {
+					console.log(e.data);
+					obj.goodsList = obj.goodsList.concat(e.data);
+					//判断是否还有下一页，有是more  没有是nomore
+					if (obj.limit == e.data.length) {
+						obj.page++
+						obj.loadingType = 'more'
 					} else {
-						uni.stopPullDownRefresh();
+						obj.loadingType = 'nomore'
+					}
+					if (type === 'refresh') {
+						if (loading == 1) {
+							uni.hideLoading();
+						} else {
+							uni.stopPullDownRefresh();
+						}
 					}
+				});
+			},
+			//筛选点击
+			tabClick(index) {
+				// 防止重复点击综合排序
+				if (this.filterIndex === 0 && this.filterIndex === index) {
+					return;
 				}
-			});
-		},
-		//筛选点击
-		tabClick(index) {
-			// 防止重复点击综合排序
-			if (this.filterIndex === 0 && this.filterIndex === index) {
-				return;
-			}
-			this.filterIndex = index;
-			// 判断是否为销量优先
-			if (index === 1) {
-				this.numberOrder = this.numberOrder === 1 ? 2 : 1;
-			}
-			// 判断是否为价格优先
-			if (index === 2) {
-				this.priceOrder = this.priceOrder === 1 ? 2 : 1;
-			}
-			// 初始化页数
-			this.page = 1;
-			// 初始化数组
-			uni.pageScrollTo({
-				duration: 300,
-				scrollTop: 0
-			});
-			this.loadData('refresh', 1);
-			uni.showLoading({
-				title: '正在加载'
-			});
-		},
-		//显示分类面板
-		toggleCateMask(type) {
-			let timer = type === 'show' ? 10 : 300;
-			let state = type === 'show' ? 1 : 0;
-			this.cateMaskState = 2;
-			setTimeout(() => {
-				this.cateMaskState = state;
-			}, timer);
-		},
-		//分类点击
-		changeCate(item) {
-			this.cateId = item.id;
-			// 显示右侧分类
-			this.toggleCateMask();
-			// 滚轮返回顶部
-			uni.pageScrollTo({
-				duration: 300,
-				scrollTop: 0
-			});
-			// 初始化查询页数
-			this.page = 1
-			// 重新加载数据
-			this.loadData('refresh', 1);
-			uni.showLoading({
-				title: '正在加载'
-			});
-		},
-		//详情
-		navToDetailPage(item) {
-			let id = item.id;
-			let url = `/pages/product/product?id=${id}`
-			if(this.userInfo.uid) {
-				url = url + '&spread=' + this.userInfo.uid
-			}
-			uni.navigateTo({
-				url: url
-			});
-		},
-		stopPrevent() {}
-	}
-};
+				this.filterIndex = index;
+				// 判断是否为销量优先
+				if (index === 1) {
+					this.numberOrder = this.numberOrder === 1 ? 2 : 1;
+				}
+				// 判断是否为价格优先
+				if (index === 2) {
+					this.priceOrder = this.priceOrder === 1 ? 2 : 1;
+				}
+				// 初始化页数
+				this.page = 1;
+				// 初始化数组
+				uni.pageScrollTo({
+					duration: 300,
+					scrollTop: 0
+				});
+				this.loadData('refresh', 1);
+				uni.showLoading({
+					title: '正在加载'
+				});
+			},
+			//显示分类面板
+			toggleCateMask(type) {
+				let timer = type === 'show' ? 10 : 300;
+				let state = type === 'show' ? 1 : 0;
+				this.cateMaskState = 2;
+				setTimeout(() => {
+					this.cateMaskState = state;
+				}, timer);
+			},
+			//分类点击
+			changeCate(item) {
+				this.cateId = item.id;
+				// 显示右侧分类
+				this.toggleCateMask();
+				// 滚轮返回顶部
+				uni.pageScrollTo({
+					duration: 300,
+					scrollTop: 0
+				});
+				// 初始化查询页数
+				this.page = 1
+				// 重新加载数据
+				this.loadData('refresh', 1);
+				uni.showLoading({
+					title: '正在加载'
+				});
+			},
+			//详情
+			navToDetailPage(item) {
+				let id = item.id;
+				let url = `/pages/product/product?id=${id}`
+				if (this.userInfo.uid) {
+					url = url + '&spread=' + this.userInfo.uid
+				}
+				uni.navigateTo({
+					url: url
+				});
+			},
+			stopPrevent() {}
+		}
+	};
 </script>
 
 <style lang="scss">
-page,
-.content {
-	background: $page-color-base;
-}
-.content {
-	padding-top: 96rpx;
-}
-
-.navbar {
-	position: fixed;
-	left: 0;
-	top: var(--window-top);
-	display: flex;
-	width: 100%;
-	height: 80rpx;
-	background: #fff;
-	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
-	z-index: 10;
-	.nav-item {
-		flex: 1;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		height: 100%;
-		font-size: 30rpx;
-		color: $font-color-dark;
-		position: relative;
-		&.current {
-			color: $base-color;
-			&:after {
-				content: '';
-				position: absolute;
-				left: 50%;
-				bottom: 0;
-				transform: translateX(-50%);
-				width: 120rpx;
-				height: 0;
-				border-bottom: 4rpx solid $base-color;
-			}
-		}
+	page,
+	.content {
+		background: $page-color-base;
 	}
-	.p-box {
+
+	.content {
+		padding-top: 96rpx;
+	}
+
+	.navbar {
+		position: fixed;
+		left: 0;
+		top: var(--window-top);
 		display: flex;
-		flex-direction: column;
-		.iconfont {
+		width: 100%;
+		height: 80rpx;
+		background: #fff;
+		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
+		z-index: 10;
+
+		.nav-item {
+			flex: 1;
 			display: flex;
-			align-items: center;
 			justify-content: center;
-			width: 30rpx;
-			height: 14rpx;
-			line-height: 1;
-			margin-left: 4rpx;
-			font-size: 26rpx;
-			color: #888;
-			&.active {
+			align-items: center;
+			height: 100%;
+			font-size: 30rpx;
+			color: $font-color-dark;
+			position: relative;
+
+			&.current {
 				color: $base-color;
+
+				&:after {
+					content: '';
+					position: absolute;
+					left: 50%;
+					bottom: 0;
+					transform: translateX(-50%);
+					width: 120rpx;
+					height: 0;
+					border-bottom: 4rpx solid $base-color;
+				}
 			}
 		}
-		.xia {
-			transform: scaleY(-1);
+
+		.p-box {
+			display: flex;
+			flex-direction: column;
+
+			.iconfont {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 30rpx;
+				height: 14rpx;
+				line-height: 1;
+				margin-left: 4rpx;
+				font-size: 26rpx;
+				color: #888;
+
+				&.active {
+					color: $base-color;
+				}
+			}
+
+			.xia {
+				transform: scaleY(-1);
+			}
 		}
-	}
-	.cate-item {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		height: 100%;
-		width: 80rpx;
-		position: relative;
-		font-size: 44rpx;
-		&:after {
-			content: '';
-			position: absolute;
-			left: 0;
-			top: 50%;
-			transform: translateY(-50%);
-			border-left: 1px solid #ddd;
-			width: 0;
-			height: 36rpx;
+
+		.cate-item {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 100%;
+			width: 80rpx;
+			position: relative;
+			font-size: 44rpx;
+
+			&:after {
+				content: '';
+				position: absolute;
+				left: 0;
+				top: 50%;
+				transform: translateY(-50%);
+				border-left: 1px solid #ddd;
+				width: 0;
+				height: 36rpx;
+			}
 		}
 	}
-}
-
-/* 分类 */
-.cate-mask {
-	position: fixed;
-	left: 0;
-	top: var(--window-top);
-	bottom: 0;
-	width: 100%;
-	background: rgba(0, 0, 0, 0);
-	z-index: 95;
-	transition: 0.3s;
-
-	.cate-content {
-		width: 630rpx;
-		height: 100%;
-		background: #fff;
-		float: right;
-		transform: translateX(100%);
+
+	/* 分类 */
+	.cate-mask {
+		position: fixed;
+		left: 0;
+		top: var(--window-top);
+		bottom: 0;
+		width: 100%;
+		background: rgba(0, 0, 0, 0);
+		z-index: 95;
 		transition: 0.3s;
-	}
-	&.none {
-		display: none;
-	}
-	&.show {
-		background: rgba(0, 0, 0, 0.4);
 
 		.cate-content {
-			transform: translateX(0);
+			width: 630rpx;
+			height: 100%;
+			background: #fff;
+			float: right;
+			transform: translateX(100%);
+			transition: 0.3s;
+		}
+
+		&.none {
+			display: none;
+		}
+
+		&.show {
+			background: rgba(0, 0, 0, 0.4);
+
+			.cate-content {
+				transform: translateX(0);
+			}
 		}
 	}
-}
-.cate-list {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	.cate-item {
-		display: flex;
-		align-items: center;
-		height: 90rpx;
-		padding-left: 30rpx;
-		font-size: 28rpx;
-		color: #555;
-		position: relative;
-	}
-	.two {
-		height: 64rpx;
-		color: #303133;
-		font-size: 30rpx;
-		background: #f8f8f8;
-	}
-	.active {
-		color: $base-color;
-	}
-}
-
-/* 商品列表 */
-.goods-list {
-	display: flex;
-	flex-wrap: wrap;
-	padding: 0 30rpx;
-	background: #fff;
-	.goods-item {
+
+	.cate-list {
 		display: flex;
 		flex-direction: column;
-		width: 48%;
-		padding-bottom: 40rpx;
-		&:nth-child(2n + 1) {
-			margin-right: 4%;
+		height: 100%;
+
+		.cate-item {
+			display: flex;
+			align-items: center;
+			height: 90rpx;
+			padding-left: 30rpx;
+			font-size: 28rpx;
+			color: #555;
+			position: relative;
 		}
-	}
-	.image-wrapper {
-		width: 100%;
-		height: 330rpx;
-		border-radius: 3px;
-		overflow: hidden;
-		image {
-			width: 100%;
-			height: 100%;
-			opacity: 1;
+
+		.two {
+			height: 64rpx;
+			color: #303133;
+			font-size: 30rpx;
+			background: #f8f8f8;
+		}
+
+		.active {
+			color: $base-color;
 		}
 	}
-	.title {
-		font-size: $font-lg;
-		color: $font-color-dark;
-		line-height: 80rpx;
-	}
-	.price-box {
+
+	/* 商品列表 */
+	.goods-list {
 		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding-right: 10rpx;
-		font-size: 24rpx;
-		color: $font-color-light;
-	}
-	.price {
-		font-size: $font-lg;
-		color: $uni-color-primary;
-		line-height: 1;
-		&:before {
-			content: '￥';
-			font-size: 26rpx;
+		flex-wrap: wrap;
+		padding: 0 30rpx;
+		background: #fff;
+	
+	.goods-item {
+			display: flex;
+			flex-direction: column;
+			width: 48%;
+			padding-bottom: 40rpx;
+
+			&:nth-child(2n + 1) {
+				margin-right: 4%;
+			}
+		}
+
+		.image-wrapper {
+			width: 100%;
+			height: 330rpx;
+			border-radius: 3px;
+			overflow: hidden;
+
+			image {
+				width: 100%;
+				height: 100%;
+				opacity: 1;
+			}
+		}
+
+		.title {
+			font-size: $font-lg;
+			color: $font-color-dark;
+			line-height: 80rpx;
+		}
+
+		.price-box {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding-right: 10rpx;
+			font-size: 24rpx;
+			color: $font-color-light;
+		}
+
+		.price {
+			font-size: $font-lg;
+			color: $uni-color-primary;
+			line-height: 1;
+
+			&:before {
+				content: '￥';
+				font-size: 26rpx;
+			}
 		}
 	}
-}
 </style>

pages/product/product.vue

@@ -46,11 +46,11 @@
 						</text>
 					</view>
 				</view>
-				<view class="attr-list" v-if="showDrop">
+				<!-- <view class="attr-list" v-if="showDrop">
 					<view class="item-list">
 						<text class="selected">上门安装</text>
 					</view>
-				</view>
+				</view> -->
 				<view class="mun-box">
 					<text>购买数量</text>
 					<view class="num">
@@ -171,7 +171,7 @@
 					s: '' //秒
 				},
 				userInfo: '',
-				is_drop: false, //是否上门安装
+				is_gift: false, //是否上门安装
 				showDrop: false //商品是否具有安装属性
 			};
 		},
@@ -213,34 +213,34 @@
 			...mapState(['weichatObj', 'baseURL', 'urlFile'])
 		},
 		// 分享
-		// onShareAppMessage(options) {
-		// 	// 设置菜单中的转发按钮触发转发事件时的转发内容
-		// 	let pages = getCurrentPages(); //获取加载的页面
-		// 	let currentPage = pages[pages.length - 1]; //获取当前页面的对象
-		// 	let url = currentPage.route; //当前页面url
-		// 	let item = currentPage.options; //如果要获取url中所带的参数可以查看options
-		// 	let shareObj = {
-		// 		title: this.goodsObjact.store_name + '   价格：' + this.goodsObjact.price, // 默认是小程序的名称(可以写slogan等)
-		// 		path: url + '?id=' + item.id + '&spread=' + this.userInfo.uid, // 默认是当前页面，必须是以‘/’开头的完整路径
-		// 		imageUrl: this.goodsObjact.image,
-		// 		success: function(res) {
-		// 			// 转发成功之后的回调
-		// 			if (res.errMsg == 'shareAppMessage:ok') {}
-		// 		},
-		// 		fail: function() {
-		// 			// 转发失败之后的回调
-		// 			if (res.errMsg == 'shareAppMessage:fail cancel') {
-		// 				// 用户取消转发
-		// 			} else if (res.errMsg == 'shareAppMessage:fail') {
-		// 				// 转发失败，其中 detail message 为详细失败信息
-		// 			}
-		// 		}
-		// 	};
-
-		// 	return shareObj;
-		// },
+		onShareAppMessage(options) {
+			// 设置菜单中的转发按钮触发转发事件时的转发内容
+			let pages = getCurrentPages(); //获取加载的页面
+			let currentPage = pages[pages.length - 1]; //获取当前页面的对象
+			let url = currentPage.route; //当前页面url
+			let item = currentPage.options; //如果要获取url中所带的参数可以查看options
+			let shareObj = {
+				title: this.goodsObjact.store_name + '   价格：' + this.goodsObjact.price, // 默认是小程序的名称(可以写slogan等)
+				path: url + '?id=' + item.id + '&spread=' + this.userInfo.uid, // 默认是当前页面，必须是以‘/’开头的完整路径
+				imageUrl: this.goodsObjact.image,
+				success: function(res) {
+					// 转发成功之后的回调
+					if (res.errMsg == 'shareAppMessage:ok') {}
+				},
+				fail: function() {
+					// 转发失败之后的回调
+					if (res.errMsg == 'shareAppMessage:fail cancel') {
+						// 用户取消转发
+					} else if (res.errMsg == 'shareAppMessage:fail') {
+						// 转发失败，其中 detail message 为详细失败信息
+					}
+				}
+			};
+
+			return shareObj;
+		},
 		methods: {
-			// #ifdef H5
+			// #ifdef MP-WEIXIN
 			IndexShare() {
 				let obj = this
 				// console.log('dddddddffffffffffffff')
@@ -275,9 +275,9 @@
 			//选择是否上门安装
 			dropClick(val) {
 				if (val == 1) {
-					this.is_drop = true;
+					this.is_gift = true;
 				} else {
-					this.is_drop = false;
+					this.is_gift = false;
 				}
 			},
 			//选择数量
@@ -355,6 +355,7 @@
 			},
 			//加入购物车
 			Addcar(item) {
+				console.log(item,'777')
 				let obj = this;
 				cartAdd({
 						cartNum: '1', //商品数量
@@ -389,15 +390,15 @@
 						obj.good_list = data.good_list; //保存猜你喜欢列表
 						obj.reply = data.reply; //保存评论列表
 						let goods = data.storeInfo;
-						if (goods.is_drop == 1) {
+						if (goods.is_gift == 1) {
 							obj.showAdd = false;
 							obj.showDrop = true;
-							obj.is_drop = true;
+							obj.is_gift = true;
 						}
 						obj.mer_id = data.mer_id;
 						console.log(obj.mer_id,'商户编号')
 						obj.goodsObjact = goods;
-						obj.IndexShare()
+						// obj.IndexShare()
 						if (obj.goodsObjact.description != null) {
 							obj.description = obj.goodsObjact.description.replace(/\<img/gi,
 								'<img class="rich-img"');
@@ -453,7 +454,7 @@
 						console.log(obj.list, '秒杀商品数据++++++++++');
 						obj.reply = data.reply; //保存评论列表
 						let goods = data.storeInfo;
-						if (goods.is_drop == 1) {
+						if (goods.is_gift == 1) {
 							obj.showDrop = true;
 						}
 						obj.goodsNumberMax = goods.num;
@@ -509,22 +510,22 @@
 					new: 1,
 					productId: obj.goodsid, //商品编号
 					uniqueId: obj.uniqueId,
-					is_drop: obj.is_drop ? 1 : 0,
+					is_gift: obj.is_gift ? 1 : 0,
 					mer_id: obj.mer_id //商户编号
 				};
-
 				if (obj.type == 2) {
 					data.new = 0;
 				}
+				console.log(data,'777');
 				cartAdd(data)
 					.then(function(e) {
 						let da = e.data;
 						if (obj.type == 1) {
 							// 跳转到支付页
-							let a = obj.is_drop ? 1 : 0;
+							let a = obj.is_gift ? 1 : 0;
 							console.log(a);
 							uni.navigateTo({
-								url: '/pages/order/createOrder?id=' + da.cartId + '&isdrop=' + a
+								url: '/pages/order/createOrder?id=' + da.cartId + '&isgift=' + a
 							});
 						}
 						if (obj.type == 2) {

pages/public/login.vue

@@ -194,14 +194,12 @@ export default {
 				password: obj.passward
 			})
 				.then(function(e) {
-					uni.setStorageSync('token', e.data.token);
-					// obj.$store.commit('hasLogin', true);
-					obj.login()
+					uni.setStorageSync('token', e.data.token)
 					getUserInfo({}).then(e => {
 						obj.login();
 						// 保存返回用户数据
 						obj.setUserInfo(e.data);
-						let ur = uni.getStorageSync('present') || '/pages/index/index';
+						let ur = '/pages/index/index';
 						//成功跳转首页
 						uni.switchTab({
 							url: ur,

pages/public/wxLogin.vue

@@ -1,217 +1,160 @@
 <template>
 	<view class="content">
-		<!-- #ifdef MP -->
-		<image class="bg-img" src="/static/img/img09.png" mode=" scaleToFill"></image>
+		<!-- #ifndef H5 -->
+		<!-- <image class="bg-img" :src="baseURL+urlFile+'/img/img09.png'" mode=" scaleToFill"></image> -->
 		<view class="logo-img-box">
-			<image class="logo-img" src="/static/img/logo.png" mode=" aspectFit"></image>
-			<button class="userInfo" type="warn" open-type="getUserInfo" @getuserinfo="userInfoData">
+			<image class="logo-img" src="../../static/img/logo.jpg" mode=" aspectFit"></image>
+			<button class="userInfo" type="warn" @click="isclick?'':userInfoData()" :class="{'nocaction': isclick}">
 				<text class="iconfont iconweixin"></text>
-				<text>微信授权登录</text>
+				<text>
+				微信授权登录
+				</text>
 			</button>
 		</view>
 		<!-- #endif -->
-		<view class="Mask" v-show="MaskShow">
-			<view class="Mask-box">
-				<view class="title">申请获取您的手机号</view>
-				<view class="text">为了方便您的取货和我们的送货，并获取更多优惠活动,需要您的手机授权</view>
-				<view class="btn_box">
-					<button class="weixin" @click="ToIndex()">取消</button>
-					<button class="weixin" open-type="getPhoneNumber" @getphonenumber="PhoneNumber">手机号授权</button>
-				</view>
-			</view>
-		</view>
 	</view>
 </template>
 
 <script>
+	import { getUserInfo } from '@/api/login.js';
 // #ifdef H5
 import { loginWinxin } from '@/utils/wxAuthorized';
 // #endif
 // #ifdef MP-WEIXIN
+import { loginWinxinMp } from '@/utils/wxMinProgram';
 import { wechatMpAuth } from '@/api/wx';
 // #endif
-import { mapMutations } from 'vuex';
-import { getUserInfo, bangding } from '@/api/login.js';
+import { mapMutations,mapState } from 'vuex';
 export default {
 	data() {
 		return {
-			userInfo: {}, //授权用户信息
-			code: '', //授权code
-			loding: false, //判断是否在点击中
-			MaskShow: false // 手机号授权弹窗
+			userInfo:{},//授权用户信息
+			code:'',//授权code
+			isclick: false,//是否点击了
 		};
 	},
 	onLoad(option) {
 		this.loadData();
 	},
+	computed: {
+		// ...mapState(['baseURL','urlFile']) 
+	},
 	methods: {
+		// ...mapMutations(['login', 'setUserInfo']),
+		...mapMutations('user',['login', 'setUserInfo']),
 		loadData() {
+			let obj = this;
 			// #ifdef H5
 			loginWinxin();
 			// #endif
+			// #ifdef MP-WEIXIN
+			loginWinxinMp().then(() => {
+					wx.login({
+						success(e) {
+							console.log(e,'loginWinxinMp');
+							obj.code = e.code;
+						},
+						fill:function (e) {
+							console.log(e)
+						}
+					})
+			});
+			// #endif
 		},
-		// #ifndef H5
 		// 用户确认授权
-		userInfoData(e) {
-			const that = this;
-			// #ifdef MP-WEIXIN
-			if (!this.loding) {
-				wx.getUserProfile({
-					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
-					success: res => {
-						that.userInfo = res;
-						that.loadMp();
-					},
-					fail: err => {
-						console.log('getUserProfile出错', err);
-					}
-				});
+		userInfoData(){
+			let that = this
+			if(that.isclick) {
+				return 
 			}
-			// #endif
+			that.isclick = true
+			wx.getUserProfile({
+				desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
+				success: res => {
+					console.log(res,'that.userInfo+++++++++++++++++++')
+					that.userInfo = res;
+					uni.showLoading({
+						title: '授权中',
+						mask: true
+					});
+					that.loadMp();
+				},
+				fail: err => {
+					that.isclick = false
+					uni.showToast({
+						title: '您拒绝了请求,不能正常使用小程序',
+						icon: 'error',
+						duration: 2000
+					});
+					return;
+				}
+			});
+			// this.userInfo = e;
+			// console.log(e,'用户确认授权')
+			// this.loadMp()
+				
 		},
-		// #endif
 		// #ifdef MP-WEIXIN
-		loadMp(option) {
+		loadMp() {
 			let obj = this;
-			obj.loding = true;
 			// 获取登录授权页数据
 			let user = obj.userInfo;
+			console.log(user)
 			// 获取推广人id
 			let spread_spid = uni.getStorageSync('spread') || '';
-			// let spread_code = uni.getStorageSync('spread_code') || '';
-			uni.showLoading({
-				title: '授权中',
-				mask: true
-			});
-			wx.login({
-				success(e) {
-					wechatMpAuth({
-						code: e.code,
-						iv: user.iv,
-						encryptedData: user.encryptedData,
-						spread_spid: spread_spid,
-						// #ifdef MP
-						spread_code: spread_code
-						// #endif
-					})
-						.then(({ data }) => {
-							obj.loding = false;
-							obj.wchatAuth(data);
-							console.log(data);
-						})
-						.catch(e => {
-							obj.loding = false;
-							uni.hideLoading();
-						});
-				},
-				fill: function(e) {
-					obj.loding = false;
-					console.log(e);
-				}
+			// #ifdef MP
+			let spread_code = uni.getStorageSync('spread_code') || '';
+			// #endif
+			
+			wechatMpAuth({
+				code: obj.code,
+				iv: user.iv,
+				encryptedData: user.encryptedData,
+				spread_spid: spread_spid,
+				// #ifdef MP
+				spread_code: spread_code,
+				// #endif
+			}).then(({ data }) => {
+				obj.wchatAuth(data);
+				console.log(data,'wechatMpAuth++++++++++++++++++++++++++')
+				
+			}).catch( err => {
+				// obj.loding = false;
+				// uni.hideLoading();
 			});
 		},
+		// #endif
 		wchatAuth(data) {
 			let obj = this;
 			// 保存token
 			uni.setStorageSync('token', data.token);
+			console.log(data.token,'token++++++++++++++')
 			// 获取用户基础信息
-			getUserInfo({})
-				.then(e => {
-					uni.hideLoading();
-					obj.login();
-					// 保存返回用户数据
-					obj.setUserInfo(e.data);
-					obj.ToIndex();
-					// if (e.data.phone == null || !e.data.phone ) {
-					// 	obj.MaskShow = true;
-					// } else {
-					// 	obj.ToIndex();
-					// }
-				})
-				.catch(e => {
-					uni.hideLoading();
-				});
-		},
-		// #endif
-		ToIndex() {
-			let obj = this;
-			let ur = uni.getStorageSync('present') || '/pages/index/index';
-			// 用于处理缓存bug
-			if (ur == 'pages/product/product') {
-				ur = '/pages/index/index';
-			}
-			uni.switchTab({
-				url: ur,
-				fail(e) {
-					uni.navigateTo({
-						url: ur,
-						fail(e) {
-							uni.navigateTo({
-								url: '/pages/index/index'
-							});
-						}
-					});
+			getUserInfo({}).then(e => {
+				console.log('userInfo+++++++++++',e)
+				obj.login();
+				uni.hideLoading();
+				// 保存返回用户数据
+				obj.setUserInfo(e.data);
+				let ur = uni.getStorageSync('present') || '/pages/index/index';
+				// 用于处理缓存bug
+				if (ur=='pages/shop/product') {
+					ur = '/pages/index/index'
 				}
-			});
-		},
-		// 绑定手机号
-		PhoneNumber(e) {
-			let obj = this;
-			obj.MaskShow = false;
-			(obj.iv = e.detail.iv), (obj.encryptedData = e.detail.encryptedData);
-
-			uni.setStorageSync('code', obj.code);
-			bangding({
-				flag: 1,
-				cache_key: obj.cache_key,
-				code: obj.code,
-				iv: obj.iv,
-				encryptedData: obj.encryptedData
-			}).then(function(e) {
-				if (e.data.is_bind == 1) {
-					console.log('bangding1');
-					bangding({
-						flag: 1,
-						cache_key: obj.cache_key,
-						code: obj.code,
-						iv: obj.iv,
-						encryptedData: obj.encryptedData,
-						step: 1
-					})
-						.then(function(e) {
-							// 获取用户基础信息
-							obj.GetUser();
-							obj.$api.msg(e.msg);
-							obj.$nextTick(function() {
-								obj.ToIndex();
-							});
-						})
-						.catch(e => {
-							console.log(e);
+				uni.switchTab({
+					url: ur,
+					fail(e) {
+						uni.navigateTo({
+							url: ur,
+							fail(e) {
+								uni.navigateTo({
+									url: '/pages/index/index',
+								});
+							}
 						});
-				} else {
-					console.log('bangding2');
-					obj.$api.msg(e.msg);
-					// 获取用户基础信息
-					obj.GetUser();
-					obj.$api.msg(e.msg);
-					obj.$nextTick(function() {
-						obj.ToIndex();
-					});
-				}
-			});
-		},
-		GetUser() {
-			// 获取用户基础信息
-			getUserInfo({})
-				.then(({ data }) => {
-					this.setUserInfo(data);
-					console.log(data, 11);
-					console.log(uni.getStorageSync('userInfo'), 55);
-				})
-				.catch(e => {
-					console.log(e);
+					}
 				});
+			});
 		}
 	}
 };
@@ -221,51 +164,7 @@ export default {
 page,
 .content {
 	height: 100%;
-}
-
-.Mask {
-	position: fixed;
-	top: 0;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(51, 51, 51, 0.7);
-	.Mask-box {
-		margin: auto;
-		margin-top: 320rpx;
-		padding: 50rpx 30rpx;
-		width: 90%;
-		height: 450rpx;
-		top: 500rpx;
-		left: 10%;
-		background-color: #ffffff;
-		border-radius: 15rpx;
-		.title {
-			text-align: center;
-			font-size: 35rpx;
-			font-weight: 700;
-		}
-		.text {
-			font-size: 30rpx;
-			color: #848484;
-			padding-top: 50rpx;
-		}
-		.btn_box {
-			margin: 70rpx 0 0 0;
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-		}
-	}
-}
-
-.weixin {
-	// background: linear-gradient(90deg, rgba(36, 214, 78, 1), rgba(45, 187, 89, 1));
-	background: $base-color;
-	width: 40%;
-	color: #ffffff;
-	border-radius: 50rpx;
-	border: none;
-	margin: 0 20rpx;
+	background-color: #fff;
 }
 .bg-img,
 .logo-img-box {
@@ -284,8 +183,11 @@ page,
 .userInfo {
 	margin: 0 100rpx;
 	margin-top: 50rpx;
-	color: #ffffff;
+	color: #FFFFFF;
 	border-radius: 99rpx;
 	background-color: $base-color !important;
 }
+.nocaction {
+	background-color: #999;
+}
 </style>

pages/set/userinfo.vue

@@ -51,7 +51,7 @@
   	</view> -->
   	<view class="submit-box flex" >
   		<view class="submit" @click="edit">确认修改</view>
-  		<!-- <view class="submit" @click="toLogout">退出登录</view> -->
+  		<view class="submit dl" @click="toLogout">退出登录</view>
   	</view>
   	
   </view>
@@ -140,8 +140,8 @@
   					if (e.confirm) {
   						logout({}).then(e => {
   							obj.logout();
-  							uni.navigateTo({
-  								url:'/pages/public/login'
+  							uni.switchTab({
+  								url:'/pages/index/index'
   							})
   						})
   						.catch(e => {
@@ -259,6 +259,8 @@
   	}
   }
   .submit-box{
+	  display: flex;
+	  flex-direction: column;
   		 padding-top: 157rpx;
   		.submit{
   			margin: 40rpx auto;
@@ -269,6 +271,10 @@
   			padding:26rpx 0rpx;
   			border-radius: 50rpx;
   		}
+		.dl{
+			background-color: #FFFFFF;
+			color: #ff4c4b;
+		}
   	}
     .jg {
       margin-bottom: 20rpx;

pages/store/apply.vue

@@ -5,8 +5,14 @@
 			<view class="title">开通会员</view>
 			<view class="card">
 				<view class="card-top flex">
-					<view class="avtur"><image :src="userInfo.avatar || '/static/error/missing-face.png'" mode=""></image></view>
+					<view class="avtur">
+						<image :src="userInfo.avatar || '/static/error/missing-face.png'" mode=""></image>
+					</view>
 					<view class="main">
+						<view class="pic">
+
+
+						</view>
 						<view class="name">{{ userInfo.nickname }}</view>
 						<view class="tip" v-if="userInfo.pay_valid_time == null">尚未开通会员</view>
 						<view class="tip" v-else>
@@ -14,13 +20,22 @@
 							<text else>会员已过期</text>
 						</view>
 					</view>
+
+				</view>
+				<view class="daili-box">
+					<view class="daili-top">
+						区域代理
+					</view>
+					<view class="daili-bottom">
+						￥568/永久 终身区域代理
+					</view>
 				</view>
-				<view class="bottom flex" style="z-index: 9; margin-top: 94rpx;">
+				<!-- <view class="bottom flex" style="z-index: 9; margin-top: 94rpx;">
 					<view class="font">
 						<view class="font-title"></view>
 						<view class="font-tip"></view>
 					</view>
-				</view>
+				</view> -->
 			</view>
 		</view>
 		<view class="vip">
@@ -30,7 +45,8 @@
 				<!-- <view class="img" style="margin-left: 45rpx;"><image class="img" src="../../static/img/vip-right.png"></image></view> -->
 			</view>
 			<view class="money-box flex">
-				<view class="money" v-for="(item, index) in payList" @click="changevip(item, index)" :class="{ current: index == choose }">
+				<view class="money" v-for="(item, index) in payList" @click="changevip(item, index)"
+					:class="{ current: index == choose }">
 					<view class="money-name">{{ item.explain }}</view>
 					<view class="now-money">
 						￥
@@ -43,39 +59,86 @@
 					</view>
 				</view>
 			</view>
-			<view class="city">
-				<picker mode="selector" :range="provincial" range-key="name" :value="myProvincial.id" @change="changeArea($event, 1)">
-					<view v-if="myProvincial.name != ''">{{ myProvincial.name }}</view>
-					<view v-else class="font-color-gray">请选择省</view>
-				</picker>
+			<view class="bge">
+
 			</view>
-			<view v-if="myProvincial.check">
-				<view class="city">
-					<picker mode="selector" :range="municipal" range-key="name" :value="myMunicipal.id" @change="changeArea($event, 2)">
-						<view v-if="myMunicipal.name != ''">{{ myMunicipal.name }}</view>
-						<view v-else class="font-color-gray">请选择市</view>
-					</picker>
+			<view class="city city1">
+				<view class="title1">
+					请选择代理区域
+
 				</view>
-				<view v-if="myMunicipal.check">
-					<view class="city">
-						<picker mode="selector" :range="county" range-key="name" :value="myCounty.id" @change="changeArea($event, 3)">
-							<view v-if="myCounty.name != ''">{{ myCounty.name }}</view>
-							<view v-else class="font-color-gray">请选择区</view>
+				<view class="row">
+					<view class="row1">
+						<text class="tit">代理省份</text>
+						<picker mode="selector" :range="provincial" range-key="name" :value="myProvincial.id"
+							@change="changeArea($event, 1)">
+							<view v-if="myProvincial.name != ''">{{ myProvincial.name }}</view>
+							<view v-else class="font-color-gray">请选择省</view>
 						</picker>
+						<view class="right">
+							<image src="../../static/img/img39.png" mode=""></image>
+						</view>
 					</view>
-					<view v-if="myCounty.check && level >= 4">
-						<view class="city">
-							<picker mode="selector" :range="town" range-key="name" :value="myTown.id" @change="changeArea($event, 4)">
-								<view v-if="myTown.name != ''">{{ myTown.name }}</view>
-								<view v-else class="font-color-gray">请选择镇</view>
+
+
+					<view class="row" v-if="myProvincial.check">
+						<view class="row1">
+							<text class="tit">代理市区</text>
+							<picker mode="selector" :range="municipal" range-key="name" :value="myMunicipal.id"
+								@change="changeArea($event, 2)">
+								<view v-if="myMunicipal.name != ''">{{ myMunicipal.name }}</view>
+								<view v-else class="font-color-gray">请选择市</view>
 							</picker>
+							<view class="right">
+								<image src="../../static/img/img39.png" mode=""></image>
+							</view>
 						</view>
-						<view v-if="myTown.check && level >= 5">
-							<view class="city">
-								<picker mode="selector" :range="village" range-key="name" :value="myVillage.id" @change="changeArea($event, 5)">
-									<view v-if="myVillage.name != ''">{{ myVillage.name }}</view>
-									<view v-else class="font-color-gray">请选择村</view>
+
+
+
+
+						<view class="row" v-if="myMunicipal.check">
+							<view class="row1">
+								<text class="tit">代理街道</text>
+								<picker mode="selector" :range="county" range-key="name" :value="myCounty.id"
+									@change="changeArea($event, 3)">
+									<view v-if="myCounty.name != ''">{{ myCounty.name }}</view>
+									<view v-else class="font-color-gray">请选择区</view>
 								</picker>
+								<view class="right">
+									<image src="../../static/img/img39.png" mode=""></image>
+								</view>
+							</view>
+
+
+
+
+							<view class="row" v-if="myCounty.check && level >= 4">
+								<view class="row1">
+									<text class="tit">代理村镇</text>
+									<picker mode="selector" :range="town" range-key="name" :value="myTown.id"
+										@change="changeArea($event, 4)">
+										<view v-if="myTown.name != ''">{{ myTown.name }}</view>
+										<view v-else class="font-color-gray">请选择镇</view>
+									</picker>
+									<view class="right">
+										<image src="../../static/img/img39.png" mode=""></image>
+									</view>
+								</view>
+
+								<view class="row" v-if="myTown.check && level >= 5">
+									<view class="row1 flex">
+										<text class="tit">省市区</text>
+										<picker mode="selector" :range="village" range-key="name" :value="myVillage.id"
+											@change="changeArea($event, 5)">
+											<view v-if="myVillage.name != ''">{{ myVillage.name }}</view>
+											<view v-else class="font-color-gray">请选择村</view>
+										</picker>
+										<view class="right">
+											<image src="../../static/img/img39.png" mode=""></image>
+										</view>
+									</view>
+								</view>
 							</view>
 						</view>
 					</view>
@@ -96,7 +159,9 @@
 				<view class="popup-pay">
 					<view class="paybox-top flex">
 						<view class="type">选择支付方式</view>
-						<view class="image" @click="close"><image src="https://zhibo.liuniu946.com/img/x.png" mode="aspectFill"></image></view>
+						<view class="image" @click="close">
+							<image src="https://zhibo.liuniu946.com/img/x.png" mode="aspectFill"></image>
+						</view>
 					</view>
 					<!-- #ifndef APP-PLUS -->
 					<view class="paybox-main flex">
@@ -104,7 +169,10 @@
 							<image src="https://zhibo.liuniu946.com/img/weixin.png" mode="aspectFill"></image>
 							<view class="zf">微信支付</view>
 						</view>
-						<label class="radio1" @click="changePayType(1)"><radio style="transform:scale(0.7)" value="" :checked="payType == 1" color="#FE4141"></radio></label>
+						<label class="radio1" @click="changePayType(1)">
+							<radio style="transform:scale(0.7)" value="" :checked="payType == 1" color="#FE4141">
+							</radio>
+						</label>
 					</view>
 					<!-- #endif -->
 					<!-- #ifdef APP-PLUS -->
@@ -113,7 +181,10 @@
 							<view class="icon iconfont iconzhifubao"></view>
 							<view class="zf">支付宝支付</view>
 						</view>
-						<label class="radio1" @click="changePayType(3)"><radio style="transform:scale(0.7)" value="" :checked="payType == 3" color="#FE4141"></radio></label>
+						<label class="radio1" @click="changePayType(3)">
+							<radio style="transform:scale(0.7)" value="" :checked="payType == 3" color="#FE4141">
+							</radio>
+						</label>
 					</view>
 					<!-- #endif -->
 					<view class="paybox-main flex">
@@ -122,7 +193,8 @@
 							<view class="zf">余额支付</view>
 						</view>
 						<label class="radio" @click="changePayType(2)">
-							<radio style="transform:scale(0.7)" class="rad" value="" :checked="payType == 2" color="#FE4141"></radio>
+							<radio style="transform:scale(0.7)" class="rad" value="" :checked="payType == 2"
+								color="#FE4141"></radio>
 						</label>
 					</view>
 				</view>
@@ -138,849 +210,1043 @@
 				</view>
 			</view>
 		</uni-popup>
+		<view class="" style="height: 100rpx;">
+			
+		</view>
 	</view>
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex';
-import { becomeVip, getVip } from '@/api/user.js';
-import { getRegion } from '@/api/set.js';
-import { getUserInfo } from '@/api/user.js';
-import { timeComputed } from '@/utils/rocessor.js';
-// #ifdef H5
-import weixinObj from '@/plugin/jweixin-module/index.js';
-// #endif
-
-export default {
-	computed: {
-		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
-		...mapState('address', ['provincial', 'municipal', 'county', 'town', 'village'])
-	},
-	onLoad(option) {
-		this.state = option.state;
-		this.getVip();
-		this.init(0, 1);
-		this.checkedAuto = +this.userInfo.red_packet == 0 ? false : true;
-		if (this.userInfo.pay_valid_time != null) {
-			let TimeObj = timeComputed(this.userInfo.pay_valid_time * 1000);
-			this.type = TimeObj.type == 0 ? true : false;
-			this.day = TimeObj.day;
-		}
-	},
-	data() {
-		return {
-			timeEnd: true, //判断会员是否超时
-			state: '',
-			// #ifndef APP-PLUS
-			payType: 1,
-			payName: 'weixin',
-			// #endif
-			// #ifdef APP-PLUS
-			payType: 2,
-			payName: 'yue',
-			// #endif
-			name: '',
-			payList: [],
-			froms: '',
-			money: 0,
-			now_money: '', // 当前余额
-			payLoding: false, //判断是否支付中
-			choose: 0,
-			level_id: '',
-			myProvincial: {
-				id: 0,
-				name: '',
-				check: false //是否选择完
-			}, //省数据
-			myMunicipal: {
-				id: 0,
-				name: '',
-				check: false //是否选择完
-			}, //市数据
-			myCounty: {
-				id: 0,
-				name: '',
-				check: false //是否选择完
-			}, //区数据
-			myTown: {
-				id: 0,
-				name: '',
-				check: false //是否选择完
-			}, //镇数据
-			myVillage: {
-				id: 0,
-				name: ''
-			}, //村数据
-			level: 5
-		};
-	},
-	methods: {
-		...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
-		...mapMutations('address', ['setProvincial', 'setMunicipal', 'setCounty', 'setTown', 'setVillage']),
-		// 获取vip等级
-		getVip() {
-			getVip({}).then(({ data }) => {
-				data.forEach((sj, index) => {
-					console.log(sj, '123456');
-					if (sj.explain == '村代') {
-						sj.level = 5;
-					}
-					if (sj.explain == '镇代') {
-						sj.level = 4;
-					}
-					if (sj.explain == '区代') {
-						sj.level = 3;
-					}
-					sj.sq = (sj.money * 0.33).toFixed(0);
-					sj.yuan = (sj.sq * 1 + sj.money * 1).toFixed(2);
-				});
-				this.payList = data;
-				// 设置默认选中的对象
-				this.level_id = data[0].id;
-				this.money = data[0].money;
-				console.log(this.payList);
-			});
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex';
+	import {
+		becomeVip,
+		getVip
+	} from '@/api/user.js';
+	import {
+		getRegion
+	} from '@/api/set.js';
+	import {
+		getUserInfo
+	} from '@/api/user.js';
+	import {
+		timeComputed
+	} from '@/utils/rocessor.js';
+	// #ifdef H5
+	import weixinObj from '@/plugin/jweixin-module/index.js';
+	// #endif
+
+	export default {
+		computed: {
+			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
+			...mapState('address', ['provincial', 'municipal', 'county', 'town', 'village'])
 		},
-		submit() {
-			if (this.money == 0) {
-				uni.showModal({
-					title: '提示',
-					content: '请选择要开通的会员'
-				});
-			} else {
-				console.log('打开支付弹窗');
-				this.$refs.popupPay.open();
+		onLoad(option) {
+			this.state = option.state;
+			this.getVip();
+			this.init(0, 1);
+			this.checkedAuto = +this.userInfo.red_packet == 0 ? false : true;
+			console.log(this.userInfo, '222')
+			if (this.userInfo.pay_valid_time != null) {
+				let TimeObj = timeComputed(this.userInfo.pay_valid_time * 1000);
+				this.type = TimeObj.type == 0 ? true : false;
+				this.day = TimeObj.day;
 			}
 		},
-		close() {
-			this.$refs.popupPay.close();
-		},
-		changePayType(type) {
-			this.payType = type;
-			console.log('this.payType', this.payType);
-			if (this.payType == 1) {
-				this.payName = 'weixin';
-				console.log('weixin', this.payName);
-			}
-			if (this.payType == 2) {
-				this.payName = 'yue';
-				console.log('yue', this.payName);
-			}
-			if (this.payType == 3) {
-				this.payName = 'ali';
-				console.log('ali', this.payName);
-			}
-		},
-		readyPay() {
-			this.pay();
-		},
-		changevip(item, index) {
-			this.level_id = item.id;
-			this.level = item.level;
-			this.choose = index;
-			this.money = item.money;
-			if (item.level == 4) {
-				this.myVillage = {
+		data() {
+			return {
+				timeEnd: true, //判断会员是否超时
+				state: '',
+				// #ifndef APP-PLUS
+				payType: 1,
+				payName: 'weixin',
+				// #endif
+				// #ifdef APP-PLUS
+				payType: 2,
+				payName: 'yue',
+				// #endif
+				name: '',
+				payList: [],
+				froms: '',
+				money: 0,
+				now_money: '', // 当前余额
+				payLoding: false, //判断是否支付中
+				choose: 0,
+				level_id: '',
+				myProvincial: {
 					id: 0,
-					name: ''
-				}; 
-			}
-			if (item.level == 3) {
-				this.myTown = {
+					name: '',
+					check: false //是否选择完
+				}, //省数据
+				myMunicipal: {
+					id: 0,
+					name: '',
+					check: false //是否选择完
+				}, //市数据
+				myCounty: {
+					id: 0,
+					name: '',
+					check: false //是否选择完
+				}, //区数据
+				myTown: {
+					id: 0,
+					name: '',
+					check: false //是否选择完
+				}, //镇数据
+				myVillage: {
 					id: 0,
 					name: ''
-				}; 
-			}
+				}, //村数据
+				level: 5
+			};
 		},
-		getUserInfoB() {
-			getUserInfo({})
-				.then(({ data }) => {
-					this.setUserInfo(data);
-					if (this.state == 1) {
-						uni.navigateTo({
-							url: '/pages/vip/success'
-						});
-					} else {
-						uni.navigateBack();
-					}
-				})
-				.catch(e => {
-					console.log(e);
+		methods: {
+			...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
+			...mapMutations('address', ['setProvincial', 'setMunicipal', 'setCounty', 'setTown', 'setVillage']),
+			// 获取vip等级
+			getVip() {
+				getVip({}).then(({
+					data
+				}) => {
+					data.forEach((sj, index) => {
+						console.log(sj, '123456');
+						if (sj.explain == '村代') {
+							sj.level = 5;
+						}
+						if (sj.explain == '镇代') {
+							sj.level = 4;
+						}
+						if (sj.explain == '区代') {
+							sj.level = 3;
+						}
+						sj.sq = (sj.money * 0.33).toFixed(0);
+						sj.yuan = (sj.sq * 1 + sj.money * 1).toFixed(2);
+					});
+					this.payList = data;
+					// 设置默认选中的对象
+					this.level_id = data[0].id;
+					this.money = data[0].money;
+					console.log(this.payList);
 				});
-		},
-		pay() {
-			let obj = this;
-			console.log('点击');
-			try {
+			},
+			submit() {
+				if (this.money == 0) {
+					uni.showModal({
+						title: '提示',
+						content: '请选择要开通的会员'
+					});
+				} else {
+					console.log('打开支付弹窗');
+					this.$refs.popupPay.open();
+				}
+			},
+			close() {
+				this.$refs.popupPay.close();
+			},
+			changePayType(type) {
+				this.payType = type;
+				console.log('this.payType', this.payType);
+				if (this.payType == 1) {
+					this.payName = 'weixin';
+					console.log('weixin', this.payName);
+				}
+				if (this.payType == 2) {
+					this.payName = 'yue';
+					console.log('yue', this.payName);
+				}
+				if (this.payType == 3) {
+					this.payName = 'ali';
+					console.log('ali', this.payName);
+				}
+			},
+			readyPay() {
+				this.pay();
+			},
+			changevip(item, index) {
+				this.level_id = item.id;
+				this.level = item.level;
+				this.choose = index;
+				this.money = item.money;
+				this.myProvincial = {
+					id: 0,
+					name: ''
+				};
+				// if (item.level == 4) {
+				// 	this.myVillage = {
+				// 		id: 0,
+				// 		name: ''
+				// 	}; 
+				// }
+				// if (item.level == 3) {
+				// 	this.myTown = {
+				// 		id: 0,
+				// 		name: ''
+				// 	}; 
+				// }
+			},
+			getUserInfoB() {
+				getUserInfo({})
+					.then(({
+						data
+					}) => {
+						this.setUserInfo(data);
+						if (this.state == 1) {
+							uni.navigateTo({
+								url: '/pages/vip/success'
+							});
+						} else {
+							uni.navigateBack();
+						}
+					})
+					.catch(e => {
+						console.log(e);
+					});
+			},
+			pay() {
 				let obj = this;
-				if(obj.level == 3 && obj.myCounty.id ==""){
-					this.$api.msg("请选择要代理的区")
-					return;
-				}
-				if(obj.level == 4 && obj.myTown.id == ""){
-					this.$api.msg("请选择要代理的镇")
-					return;
-				}
-				if(obj.level == 5 && obj.myVillage.id == ""){
-					this.$api.msg("请选择要代理的村")
-					return;
-				}
-				if(obj.level > 1){
-					this.$api.msg("您的等级已超过所需等级")
-					return;
-				}
-				obj.payLoding = true;
-				// #ifdef H5
-				// 获取当前是否为微信浏览器
-				obj.froms = uni.getStorageSync('weichatBrowser') || '';
-				// #endif
-				uni.showLoading({
-					title: '支付中',
-					mask: true
-				});
-				let data = {
-					pay_type: this.payName,
-					level_id: obj.level_id,
+				console.log('点击');
+				try {
+					let obj = this;
+					if (obj.level == 3 && obj.myCounty.id == "") {
+						this.$api.msg("请选择要代理的区")
+						return;
+					}
+					if (obj.level == 4 && obj.myTown.id == "") {
+						this.$api.msg("请选择要代理的镇")
+						return;
+					}
+					if (obj.level == 5 && obj.myVillage.id == "") {
+						this.$api.msg("请选择要代理的村")
+						return;
+					}
+					if (obj.userInfo.level > 1) {
+						this.$api.msg("您的等级已超过所需等级")
+						return;
+					}
+					obj.payLoding = true;
 					// #ifdef H5
-					from: obj.froms ? 'weixin' : 'H5', //来源
-					// #endif
-					// #ifdef MP-WEIXIN
-					from: 'routine', //来源
-					// #endif
-					// #ifdef APP-PLUS
-					from: 'app' //来源
+					// 获取当前是否为微信浏览器
+					obj.froms = uni.getStorageSync('weichatBrowser') || '';
 					// #endif
-				};
-				if(obj.level == 3){
-					data.city_id = obj.myCounty.id
-				}
-				if(obj.level == 4){
-					data.city_id = obj.myTown.id
-				}
-				if(obj.level == 5){
-					data.city_id = obj.myVillage.id
-				}
-				console.log(data, '传值');
-				becomeVip(data).then(({ data }) => {
-					console.log('fufei', data);
-					uni.hideLoading();
-					if (obj.payName == 'ali') {
-						const url = data.data;
-						console.log(url, 'url');
-						uni.requestPayment({
-							provider: 'alipay',
-							orderInfo: url,
-							success: res => {
-								console.log(res);
-								uni.showToast({
-									title: '充值成功',
-									duration: 2000
-								});
-							},
-							fail: e => {
-								console.log(e);
-							},
-							complete: () => {}
-						});
-						obj.payLoding = false;
+					uni.showLoading({
+						title: '支付中',
+						mask: true
+					});
+					let data = {
+						pay_type: this.payName,
+						level_id: obj.level_id,
+						// #ifdef H5
+						from: obj.froms ? 'weixin' : 'H5', //来源
+						// #endif
+						// #ifdef MP-WEIXIN
+						from: 'routine', //来源
+						// #endif
+						// #ifdef APP-PLUS
+						from: 'app' //来源
+						// #endif
+					};
+					if (obj.level == 3) {
+						data.city_id = obj.myCounty.id
 					}
-					if (data.status == 'PAY_ERROR') {
-						console.log(data);
+					if (obj.level == 4) {
+						data.city_id = obj.myTown.id
 					}
-					if (data.status == 'SUCCESS') {
-						obj.$refs.popupPay.close();
-						obj.getUserInfoB();
+					if (obj.level == 5) {
+						data.city_id = obj.myVillage.id
 					}
-					console.log('-----', data);
-					let da = data.result.jsConfig;
-					if (obj.payName == 'weixin' || obj.payName == 'routine') {
-						// let da = data.result.jsConfig;
-						console.log('--da--', da);
-						let data = {
-							// #ifdef H5
-							timestamp: da.timestamp,
-							// #endif
+					console.log(data, '传值');
+					becomeVip(data).then(({
+						data
+					}) => {
+						console.log('fufei', data);
+						uni.hideLoading();
+						if (obj.payName == 'ali') {
+							const url = data.data;
+							console.log(url, 'url');
+							uni.requestPayment({
+								provider: 'alipay',
+								orderInfo: url,
+								success: res => {
+									console.log(res);
+									uni.showToast({
+										title: '充值成功',
+										duration: 2000
+									});
+								},
+								fail: e => {
+									console.log(e);
+								},
+								complete: () => {}
+							});
+							obj.payLoding = false;
+						}
+						if (data.status == 'PAY_ERROR') {
+							console.log(data);
+						}
+						if (data.status == 'SUCCESS') {
+							obj.$refs.popupPay.close();
+							obj.getUserInfoB();
+						}
+						console.log('-----', data);
+						let da = data.result.jsConfig;
+						if (obj.payName == 'weixin' || obj.payName == 'routine') {
+							// let da = data.result.jsConfig;
+							console.log('--da--', da);
+							let data = {
+								// #ifdef H5
+								timestamp: da.timestamp,
+								// #endif
+								// #ifdef MP
+								timeStamp: da.timestamp,
+								// #endif
+								nonceStr: da.nonceStr,
+								package: da.package,
+								signType: da.signType,
+								paySign: da.paySign,
+								success: function(res) {
+									console.log(res);
+									obj.getUserInfoB();
+								},
+								fail: e => {
+									console.log(e);
+								}
+							};
+							console.log('--data--', data);
 							// #ifdef MP
-							timeStamp: da.timestamp,
+							wx.requestPayment(data);
 							// #endif
-							nonceStr: da.nonceStr,
-							package: da.package,
-							signType: da.signType,
-							paySign: da.paySign,
-							success: function(res) {
-								console.log(res);
-								obj.getUserInfoB();
-							},
-							fail: e => {
-								console.log(e);
+							// #ifdef H5
+							if (obj.payName == 'weixin') {
+								weixinObj.chooseWXPay(data);
 							}
-						};
-						console.log('--data--', data);
-						// #ifdef MP
-						wx.requestPayment(data);
-						// #endif
+							// #endif
+						}
+
+						uni.hideLoading();
 						// #ifdef H5
-						if (obj.payName == 'weixin') {
-							weixinObj.chooseWXPay(data);
+						if (data.status == 'PAY_ERROR') {
+							console.log(data);
+						}
+						if (data.status == 'SUCCESS') {
+							obj.$refs.popupPay.close();
+							obj.getUserInfoB();
 						}
 						// #endif
+					});
+				} catch (e) {
+					console.log('fufiecw', e);
+					//TODO handle the exception
+				}
+			},
+			init(id, type) {
+				getRegion({}, id).then(({
+					data
+				}) => {
+					console.log(type);
+					if (type == 1) {
+						this.setProvincial(data);
 					}
-
-					uni.hideLoading();
-					// #ifdef H5
-					if (data.status == 'PAY_ERROR') {
+					if (type == 2) {
+						this.setMunicipal(data);
+					}
+					if (type == 3) {
+						if (this.level == 3) {
+							data = data.filter(e => {
+								console.log(e);
+								return e.agent_uid == null;
+							});
+						}
 						console.log(data);
+						this.setCounty(data);
 					}
-					if (data.status == 'SUCCESS') {
-						obj.$refs.popupPay.close();
-						obj.getUserInfoB();
+					if (type == 4) {
+						console.log('zheng');
+						if (this.level == 4) {
+							data = data.filter(e => {
+								console.log(e);
+								return e.agent_uid == null;
+							});
+						}
+						console.log(data);
+						this.setTown(data);
+					}
+					if (type == 5) {
+						if (this.level == 5) {
+							data = data.filter(e => {
+								console.log(e);
+								return e.agent_uid == null;
+							});
+						}
+						console.log(data);
+						this.setVillage(data);
 					}
-					// #endif
 				});
-			} catch (e) {
-				console.log('fufiecw', e);
-				//TODO handle the exception
-			}
-		},
-		init(id, type) {
-			getRegion({}, id).then(({ data }) => {
-				console.log(type);
+			},
+			changeArea(e, type) {
+				console.log(type, '123456');
 				if (type == 1) {
-					this.setProvincial(data);
+					let index = e.detail.value;
+					this.myProvincial.id = this.provincial[index].city_id;
+					this.myProvincial.name = this.provincial[index].name;
+					this.myProvincial.check = true;
+					this.myMunicipal = {
+						id: 0,
+						name: '',
+						check: false //是否选择完
+					};
+					this.init(this.myProvincial.id, 2);
 				}
 				if (type == 2) {
-					this.setMunicipal(data);
+					let index = e.detail.value;
+					this.myMunicipal.id = this.municipal[index].city_id;
+					this.myMunicipal.name = this.municipal[index].name;
+					this.myMunicipal.check = true;
+					this.myCounty = {
+						id: 0,
+						name: '',
+						check: false //是否选择完
+					};
+					this.init(this.myMunicipal.id, 3);
 				}
 				if (type == 3) {
-					if (this.level == 3) {
-						data = data.filter(e => {
-							console.log(e);
-							return e.agent_uid == null;
-						});
-					}
-					console.log(data);
-					this.setCounty(data);
+					let index = e.detail.value;
+					this.myCounty.id = this.county[index].city_id;
+					this.myCounty.name = this.county[index].name;
+					this.myCounty.check = true;
+					this.myTown = {
+						id: 0,
+						name: '',
+						check: false //是否选择完
+					};
+					this.init(this.myCounty.id, 4);
 				}
 				if (type == 4) {
-					console.log('zheng');
-					if (this.level == 4) {
-						data = data.filter(e => {
-							console.log(e);
-							return e.agent_uid == null;
-						});
-					}
-					console.log(data);
-					this.setTown(data);
+					let index = e.detail.value;
+					this.myTown.id = this.town[index].city_id;
+					this.myTown.name = this.town[index].name;
+					this.myTown.check = true;
+					this.myVillage = {
+						id: 0,
+						name: '',
+						check: false //是否选择完
+					};
+					this.init(this.myTown.id, 5);
 				}
 				if (type == 5) {
-					if (this.level == 5) {
-						data = data.filter(e => {
-							console.log(e);
-							return e.agent_uid == null;
-						});
-					}
-					console.log(data);
-					this.setVillage(data);
+					let index = e.detail.value;
+					this.myVillage.id = this.village[index].city_id;
+					this.myVillage.name = this.village[index].name;
 				}
-			});
-		},
-		changeArea(e, type) {
-			console.log(type, '123456');
-			if (type == 1) {
-				let index = e.detail.value;
-				this.myProvincial.id = this.provincial[index].city_id;
-				this.myProvincial.name = this.provincial[index].name;
-				this.myProvincial.check = true;
-				this.myMunicipal = {
-					id: 0,
-					name: '',
-					check: false //是否选择完
-				};
-				this.init(this.myProvincial.id, 2);
-			}
-			if (type == 2) {
-				let index = e.detail.value;
-				this.myMunicipal.id = this.municipal[index].city_id;
-				this.myMunicipal.name = this.municipal[index].name;
-				this.myMunicipal.check = true;
-				this.myCounty = {
-					id: 0,
-					name: '',
-					check: false //是否选择完
-				};
-				this.init(this.myMunicipal.id, 3);
-			}
-			if (type == 3) {
-				let index = e.detail.value;
-				this.myCounty.id = this.county[index].city_id;
-				this.myCounty.name = this.county[index].name;
-				this.myCounty.check = true;
-				this.myTown = {
-					id: 0,
-					name: '',
-					check: false //是否选择完
-				};
-				this.init(this.myCounty.id, 4);
-			}
-			if (type == 4) {
-				let index = e.detail.value;
-				this.myTown.id = this.town[index].city_id;
-				this.myTown.name = this.town[index].name;
-				this.myTown.check = true;
-				this.myVillage = {
-					id: 0,
-					name: '',
-					check: false //是否选择完
-				};
-				this.init(this.myTown.id, 5);
-			}
-			if (type == 5) {
-				let index = e.detail.value;
-				this.myVillage.id = this.village[index].city_id;
-				this.myVillage.name = this.village[index].name;
 			}
 		}
-	}
-};
+	};
 </script>
 
 <style lang="scss">
-.outBottom {
-	width: 190rpx;
-	height: 69rpx;
-	background: #3a3a3b;
-	border-radius: 35rpx;
-	color: #ffffff;
-	line-height: 69rpx;
-	text-align: center;
-	font-size: 27rpx;
-	font-family: PingFang SC;
-	font-weight: 500;
-}
-.top {
-	.bg {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		width: 100%;
-		height: 626rpx;
-		image {
-			width: 100%;
-			height: 100%;
-		}
-	}
-	.title {
-		position: relative;
-		z-index: 10;
-		width: 100%;
-		padding-top: 20rpx;
+	.outBottom {
+		width: 190rpx;
+		height: 69rpx;
+		background: #3a3a3b;
+		border-radius: 35rpx;
+		color: #ffffff;
+		line-height: 69rpx;
 		text-align: center;
-		font-size: 34rpx;
+		font-size: 27rpx;
 		font-family: PingFang SC;
-		font-weight: bold;
-		color: #333333;
+		font-weight: 500;
 	}
-	.card {
-		position: relative;
-		margin: 20rpx auto 0;
-		z-index: 10;
-		width: 655rpx;
-		// height: 324rpx;
-		background: linear-gradient(225deg, #ffeed2 0%, #fed591 100%);
-		border-radius: 24rpx;
-		padding: 28rpx 25rpx 30rpx 36rpx;
-		.card-top {
-			justify-content: flex-start;
-			.avtur {
-				width: 90rpx;
-				height: 90rpx;
-				border-radius: 50%;
-				margin-right: 10rpx;
-				image {
-					width: 100%;
-					height: 100%;
+
+	.top {
+		.bg {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			width: 100%;
+			height: 626rpx;
+
+			image {
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		.title {
+			position: relative;
+			z-index: 10;
+			width: 100%;
+			padding-top: 20rpx;
+			text-align: center;
+			font-size: 34rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #333333;
+		}
+
+		.card {
+
+			margin: 20rpx auto 0;
+			width: 655rpx;
+			// height: 324rpx;
+			background: linear-gradient(225deg, #ffeed2 0%, #fed591 100%);
+			border-radius: 24rpx;
+			padding: 28rpx 25rpx 30rpx 36rpx;
+			display: flex;
+			flex-direction: column;
+
+			.card-top {
+				display: flex;
+
+				justify-content: flex-start;
+
+				.avtur {
+					width: 90rpx;
+					height: 90rpx;
 					border-radius: 50%;
+					margin-right: 10rpx;
+
+					image {
+						width: 100%;
+						height: 100%;
+						border-radius: 50%;
+					}
+				}
+
+				.name {
+					font-size: 30rpx;
+					font-weight: 500;
+					color: #333333;
+				}
+
+				.tip {
+					font-size: 20rpx;
+					font-weight: 500;
+					color: #333333;
+					opacity: 0.52;
+				}
+			}
+
+			.daili-box {
+				margin-top: 60rpx;
+				display: flex;
+				justify-content: space-between;
+
+				flex-direction: column;
+
+				.daili-top {
+					font-size: 34rpx;
+					line-height: 45rpx;
+					font-weight: bold;
+					color: #333333;
+				}
+
+				.daili-bottom {
+					line-height: 45rpx;
+					font-size: 30rpx;
+					font-weight: bold;
+					color: #333333;
 				}
 			}
-			.name {
+
+			.btn {
+				position: absolute;
+				top: 40rpx;
+				right: 24rpx;
+				width: 190rpx;
+				height: 69rpx;
+				background: #3a3a3b;
+				border-radius: 35rpx;
 				font-size: 30rpx;
 				font-family: PingFang SC;
 				font-weight: 500;
+				color: #ffffff;
+				line-height: 69rpx;
+				text-align: center;
+			}
+		}
+
+		.bottom {
+			margin-top: 40rpx;
+
+			.font-title {
+				font-size: 30rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
 				color: #333333;
 			}
-			.tip {
-				font-size: 20rpx;
+
+			.font-tip {
+				font-size: 22rpx;
 				font-family: PingFang SC;
 				font-weight: 500;
-				color: #333333;
-				opacity: 0.52;
+				color: #343434;
 			}
 		}
-		.btn {
-			position: absolute;
-			top: 40rpx;
-			right: 24rpx;
-			width: 190rpx;
-			height: 69rpx;
-			background: #3a3a3b;
-			border-radius: 35rpx;
-			font-size: 30rpx;
-			font-family: PingFang SC;
-			font-weight: 500;
-			color: #ffffff;
-			line-height: 69rpx;
-			text-align: center;
-		}
-	}
-	.bottom {
-		margin-top: 40rpx;
-		.font-title {
+
+		.turn {
+			width: 108rpx;
+			height: 51rpx;
+			background: #ffffff;
+			border-radius: 26rpx;
+			padding: 10rpx;
 			font-size: 30rpx;
 			font-family: PingFang SC;
 			font-weight: bold;
 			color: #333333;
-		}
-		.font-tip {
-			font-size: 22rpx;
-			font-family: PingFang SC;
-			font-weight: 500;
-			color: #343434;
+			display: flex;
+			align-items: center;
+
+			.yuan {
+				display: inline-block;
+				width: 35rpx;
+				height: 35rpx;
+				background: linear-gradient(112deg, #ffe5bb, #fed591);
+				border-radius: 50%;
+				margin-right: 12rpx;
+			}
 		}
 	}
-	.turn {
-		width: 108rpx;
-		height: 51rpx;
+
+	.vip {
+
+		margin: 20rpx 20rpx 0 20rpx;
+		
 		background: #ffffff;
-		border-radius: 26rpx;
-		padding: 10rpx;
-		font-size: 30rpx;
-		font-family: PingFang SC;
-		font-weight: bold;
-		color: #333333;
-		display: flex;
-		align-items: center;
-		.yuan {
-			display: inline-block;
-			width: 35rpx;
-			height: 35rpx;
-			background: linear-gradient(112deg, #ffe5bb, #fed591);
-			border-radius: 50%;
-			margin-right: 12rpx;
-		}
-	}
-}
-.vip {
-	margin-top: 20rpx;
-	background: #ffffff;
-	padding-bottom: 54rpx;
-	.system-title {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		padding-top: 40rpx;
-		.title {
-			font-size: 32rpx;
-			font-family: PingFang SC;
-			font-weight: bold;
-			color: #1d2023;
-		}
+		margin-bottom: 54rpx;
 
-		.img {
-			width: 170rpx;
-			height: 2rpx;
-			display: block;
-		}
-	}
-	.item-box {
-		margin-top: 40rpx;
-		justify-content: center;
-		align-items: center;
-		.item {
-			flex: 1;
+		.system-title {
 			display: flex;
-			flex-direction: column;
+			justify-content: center;
 			align-items: center;
-			image {
-				width: 100rpx;
-				height: 100rpx;
-			}
-			.item-title {
-				margin-top: 14rpx;
-				font-size: 24rpx;
+			padding-top: 40rpx;
+
+			.title {
+				font-size: 32rpx;
 				font-family: PingFang SC;
-				font-weight: 500;
-				color: #333333;
+				font-weight: bold;
+				color: #1d2023;
 			}
-			.item-tip {
-				margin-top: 10rpx;
-				font-size: 20rpx;
-				font-family: PingFang SC;
-				font-weight: 500;
-				color: #999999;
+
+			.img {
+				width: 170rpx;
+				height: 2rpx;
+				display: block;
 			}
 		}
-	}
-	.money-box {
-		margin-top: 40rpx;
-		justify-content: center;
-		align-items: center;
-		padding: 0 47rpx 160rpx 25rpx;
-		.current {
-			border: 1rpx solid #fed591 !important;
-			background: #fff8ec !important;
+
+		.item-box {
+			margin-top: 40rpx;
+			justify-content: center;
+			align-items: center;
+
+			.item {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+
+				image {
+					width: 100rpx;
+					height: 100rpx;
+				}
+
+				.item-title {
+					margin-top: 14rpx;
+					font-size: 24rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #333333;
+				}
+
+				.item-tip {
+					margin-top: 10rpx;
+					font-size: 20rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #999999;
+				}
+			}
 		}
-		.money {
-			margin-left: 22rpx;
-			flex: 1;
-			display: flex;
-			flex-direction: column;
+
+		.money-box {
+			margin-top: 40rpx;
+			justify-content: center;
 			align-items: center;
-			width: 204rpx;
-			height: 296rpx;
-			background: #f5f5f5;
-			border: 1rpx solid #ffffff;
-			border-radius: 20rpx;
-			position: relative;
-			.tj {
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: 90rpx;
-				height: 44rpx;
-				text-align: center;
-				line-height: 44rpx;
-				font-size: 25rpx;
-				font-family: PingFang SC;
-				font-weight: 500;
-				color: #ffffff;
-				.tj-bg {
+			padding: 0 47rpx 50rpx 25rpx;
+
+			.current {
+				border: 1rpx solid #fed591 !important;
+				background: #fff8ec !important;
+			}
+
+			.money {
+				margin-left: 22rpx;
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				width: 204rpx;
+				height: 296rpx;
+				background: #f5f5f5;
+				border: 1rpx solid #ffffff;
+				border-radius: 20rpx;
+				position: relative;
+
+				.tj {
+					position: absolute;
+					top: 0;
+					left: 0;
 					width: 90rpx;
 					height: 44rpx;
+					text-align: center;
+					line-height: 44rpx;
+					font-size: 25rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #ffffff;
+
+					.tj-bg {
+						width: 90rpx;
+						height: 44rpx;
+					}
+
+					text {
+						display: inline-block;
+						position: relative;
+						top: -56rpx;
+					}
 				}
-				text {
-					display: inline-block;
-					position: relative;
-					top: -56rpx;
+
+				.money-name {
+					margin-top: 58rpx;
+					font-size: 33rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #644931;
+				}
+
+				.now-money {
+					font-size: 30rpx;
+					font-family: FZCuHeiSongS-B-GB;
+					font-weight: 400;
+					color: #f7cf9c;
+
+					text {
+						font-size: 50rpx;
+					}
+				}
+
+				.bf-money {
+					font-size: 33rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					text-decoration: line-through;
+					color: #9a5a12;
+					opacity: 0.35;
+				}
+
+				.moneyc {
+					background: #f7cf9c !important;
+					color: #ffffff !important;
+				}
+
+				.money-tip {
+					margin-top: 10rpx;
+					width: 158rpx;
+					height: 45rpx;
+					background: #f5f5f5;
+					border: 1px solid #f7cf9c;
+					border-radius: 23rpx;
+					padding: 5rpx 10rpx;
+					font-size: 25rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #f7cf9c;
+
+					image {
+						position: relative;
+						top: 2rpx;
+						width: 23rpx;
+						height: 23rpx;
+					}
 				}
 			}
-			.money-name {
-				margin-top: 58rpx;
-				font-size: 33rpx;
-				font-family: PingFang SC;
+		}
+	}
+
+	.box-buttom {
+		width: 750rpx;
+		height: 98rpx;
+
+		// position: absolute;
+		// buttom:0;
+		position: fixed;
+		bottom: 0;
+		right: 0;
+		// position: absolute;
+		// buttom:100rpx;
+		display: flex;
+		align-items: center;
+		background: #34332f;
+
+		.price-left {
+			display: flex;
+
+			.entrepreneurship {
+				font-size: 24rpx;
 				font-weight: 500;
-				color: #644931;
-			}
-			.now-money {
-				font-size: 30rpx;
-				font-family: FZCuHeiSongS-B-GB;
-				font-weight: 400;
-				color: #f7cf9c;
+				color: #bbbbbb;
+				margin-left: 16rpx;
+
 				text {
-					font-size: 50rpx;
+					font-size: 30rpx;
+					color: #ffffff;
 				}
 			}
-			.bf-money {
-				font-size: 33rpx;
+		}
+
+		.price-right {
+			position: absolute;
+			bottom: 0;
+			right: 0;
+			// position: fixed;
+			// buttom: 0;
+			// right: 0;
+			width: 280rpx;
+			height: 108rpx;
+			background: #fed591;
+			font-size: 36rpx;
+			font-weight: bold;
+			color: #000000;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+
+		.price-right1 {
+			position: absolute;
+			bottom: 0;
+			right: 0;
+			// position: fixed;
+			// buttom: 0;
+			// right: 0;
+			width: 280rpx;
+			height: 108rpx;
+			background: #b5b5b5;
+			font-size: 36rpx;
+			font-weight: bold;
+			color: #ffffff;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+	}
+
+	.popup-box {
+		width: 100%;
+		height: 450rpx;
+		background: #ffffff;
+	}
+
+	.popup-pay {
+		position: relative;
+		justify-content: space-between;
+		padding: 0rpx 25rpx 32rpx 25rpx;
+
+		.paybox-top {
+			padding-top: 38rpx;
+			width: 100%;
+
+			.type {
+				font-size: 28rpx;
 				font-family: PingFang SC;
-				font-weight: 500;
-				text-decoration: line-through;
-				color: #9a5a12;
-				opacity: 0.35;
-			}
-			.moneyc {
-				background: #f7cf9c !important;
-				color: #ffffff !important;
+				font-weight: bold;
+				color: #333333;
 			}
-			.money-tip {
-				margin-top: 10rpx;
-				width: 158rpx;
-				height: 45rpx;
-				background: #f5f5f5;
-				border: 1px solid #f7cf9c;
-				border-radius: 23rpx;
-				padding: 5rpx 10rpx;
-				font-size: 25rpx;
-				font-family: PingFang SC;
-				font-weight: 500;
-				color: #f7cf9c;
+
+			.image {
+				padding-right: 24rpx;
+				padding-bottom: 10rpx;
+
 				image {
-					position: relative;
-					top: 2rpx;
-					width: 23rpx;
-					height: 23rpx;
+					width: 16rpx;
+					height: 16rpx;
 				}
 			}
 		}
-	}
-}
-.box-buttom {
-	width: 750rpx;
-	height: 98rpx;
-
-	// position: absolute;
-	// buttom:0;
-	position: fixed;
-	bottom: 0;
-	right: 0;
-	// position: absolute;
-	// buttom:100rpx;
-	display: flex;
-	align-items: center;
-	background: #34332f;
-	.price-left {
-		display: flex;
-		.entrepreneurship {
-			font-size: 24rpx;
-			font-weight: 500;
-			color: #bbbbbb;
-			margin-left: 16rpx;
-			text {
-				font-size: 30rpx;
-				color: #ffffff;
+
+		.paybox-main {
+			width: 100%;
+			margin-top: 54rpx;
+
+			.zftype {
+				padding-left: 5rpx;
+
+				image {
+					width: 38rpx;
+					height: 40rpx;
+				}
+
+				.zf {
+					padding-left: 18rpx;
+					font-size: 28rpx;
+					font-family: PingFang SC;
+					font-weight: 400;
+					color: #3f454b;
+				}
 			}
 		}
 	}
-	.price-right {
-		position: absolute;
-		bottom: 0;
-		right: 0;
-		// position: fixed;
-		// buttom: 0;
-		// right: 0;
-		width: 280rpx;
-		height: 108rpx;
-		background: #fed591;
-		font-size: 36rpx;
-		font-weight: bold;
-		color: #000000;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-	.price-right1 {
-		position: absolute;
-		bottom: 0;
-		right: 0;
-		// position: fixed;
-		// buttom: 0;
-		// right: 0;
-		width: 280rpx;
-		height: 108rpx;
-		background: #b5b5b5;
-		font-size: 36rpx;
-		font-weight: bold;
-		color: #ffffff;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-}
-.popup-box {
-	width: 100%;
-	height: 450rpx;
-	background: #ffffff;
-}
-.popup-pay {
-	position: relative;
-	justify-content: space-between;
-	padding: 0rpx 25rpx 32rpx 25rpx;
-	.paybox-top {
-		padding-top: 38rpx;
+
+	.buttom {
 		width: 100%;
-		.type {
+		height: 113rpx;
+		padding-top: 20rpx;
+		align-items: center;
+
+		.heji {
+			height: 100%;
+			width: 50%;
+			padding-left: 23rpx;
+			padding-top: 20rpx;
 			font-size: 28rpx;
 			font-family: PingFang SC;
-			font-weight: bold;
-			color: #333333;
-		}
-		.image {
-			padding-right: 24rpx;
-			padding-bottom: 10rpx;
-			image {
-				width: 16rpx;
-				height: 16rpx;
-			}
-		}
-	}
-	.paybox-main {
-		width: 100%;
-		margin-top: 54rpx;
-		.zftype {
-			padding-left: 5rpx;
-			image {
-				width: 38rpx;
-				height: 40rpx;
-			}
-			.zf {
-				padding-left: 18rpx;
-				font-size: 28rpx;
+			font-weight: 400;
+			color: #3f454b;
+
+			text {
+				font-size: 24rpx;
 				font-family: PingFang SC;
-				font-weight: 400;
-				color: #3f454b;
+				font-weight: bold;
+				color: #ff0000;
+
+				.money {
+					font-size: 36rpx;
+				}
 			}
 		}
+
+		.zhifu {
+			width: 50%;
+			height: 92rpx;
+			background: linear-gradient(180deg, #fd4646, #ff3535);
+			text-align: center;
+			line-height: 92rpx;
+			font-size: 32rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #ffffff;
+		}
 	}
-}
-.buttom {
-	width: 100%;
-	height: 113rpx;
-	padding-top: 20rpx;
-	align-items: center;
-	.heji {
-		height: 100%;
-		width: 50%;
-		padding-left: 23rpx;
-		padding-top: 20rpx;
-		font-size: 28rpx;
-		font-family: PingFang SC;
-		font-weight: 400;
-		color: #3f454b;
-		text {
-			font-size: 24rpx;
+
+	.ling-box {
+		position: relative;
+		z-index: 10;
+		width: 654rpx;
+		height: auto;
+		background: #fff8ec;
+		border: 1px solid #fed591;
+		border-radius: 24rpx;
+		margin: 20rpx auto 0;
+		padding: 20rpx 24rpx 15rpx 42rpx;
+
+		.ling-title {
+			font-size: 30rpx;
 			font-family: PingFang SC;
 			font-weight: bold;
-			color: #ff0000;
-			.money {
-				font-size: 36rpx;
-			}
+			color: #644931;
+		}
+
+		.ling-tip {
+			font-size: 22rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #644931;
+			line-height: 24px;
+			opacity: 0.67;
 		}
+
 	}
-	.zhifu {
-		width: 50%;
-		height: 92rpx;
-		background: linear-gradient(180deg, #fd4646, #ff3535);
-		text-align: center;
-		line-height: 92rpx;
-		font-size: 32rpx;
-		font-family: PingFang SC;
-		font-weight: bold;
-		color: #ffffff;
+
+	.bge {
+		width: 750rpx;
+		height: 20rpx;
+		background-color: #F3F3F3
 	}
-}
-.ling-box {
-	position: relative;
-	z-index: 10;
-	width: 654rpx;
-	height: auto;
-	background: #fff8ec;
-	border: 1px solid #fed591;
-	border-radius: 24rpx;
-	margin: 20rpx auto 0;
-	padding: 20rpx 24rpx 15rpx 42rpx;
-	.ling-title {
-		font-size: 30rpx;
-		font-family: PingFang SC;
-		font-weight: bold;
-		color: #644931;
+
+	.city {
+		display: flex;
+		align-items: center;
+		
+
+		.title1 {
+			margin: 20rpx 0;
+			font-weight: bold;
+			font-size: 30rpx;
+			color: black;
+		}
+
+		.row {
+			display: flex;
+			flex-direction: column;
+			width: 100%;
+			position: relative;
+			background: #fff;
+			border: #F3F3F3 solid 1rpx;
+
+			.row1 {
+				height: 80rpx;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				line-height: 80rpx;
+				.ccc {
+					width: 100%;
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+
+					height: 80rpx;
+
+				}
+
+				.tit {
+					padding-left: 20rpx;
+					flex-shrink: 0;
+					font-weight: bold;
+					font-size: 32rpx;
+					color: $font-color-dark;
+				}
+
+				.right {
+							margin-right: 20rpx;
+					width: 24rpx;
+					height: 24rpx;
+
+					image {
+						height: 100%;
+						width: 100%;
+					}
+				}
+			}
+		}
+
+		uni-view {
+
+			display: flex;
+
+
+			font-size: 32rpx;
+			color: grey;
+			margin-top: 10rpx
+		}
 	}
-	.ling-tip {
-		font-size: 22rpx;
-		font-family: PingFang SC;
-		font-weight: 500;
-		color: #644931;
-		line-height: 24px;
-		opacity: 0.67;
+
+	.city1 {
+		display: flex;
+		flex-direction: column;
+
 	}
-}
 </style>

pages/store/storeDetail.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script>
-		import weixinObj from "@/plugin/jweixin-module/index.js";
+
 import empty from '@/components/empty';
 import { getStoreInfo } from '@/api/index.js';
 import { orderData, getUserInfo, getMyStore } from '@/api/user.js';
@@ -57,7 +57,7 @@ export default {
 		} else {
 			this.getMyStore();
 		}
-		weixinObj.hideAllNonBaseMenuItem();
+		
 	},
 	methods: {
 		navTo(url) {

pages/user/shareQrCode.vue

@@ -1,14 +1,22 @@
 <template>
 	<view class="andr-shQ-padL30 andr-shQ-padR30 andr-shQ-Flex andr-shQ-FlexDirC">
 		<view class="andr-shQ-w100B andr-shQ-Flex andr-shQ-JusCC">
-			<swiper class="imgw750h375 matop"  :indicator-dots="false" :current="current" @change="currentChange" >
-				<swiper-item v-for="(item, index) in rwmListArr" :key="index"><image :src="item.wap_poster" mode="aspectFit" class="imgw750h375" /></swiper-item>
+			<swiper class="imgw750h375 matop" :indicator-dots="false" :current="current" @change="currentChange">
+				<swiper-item v-for="(item, index) in rwmListArr" :key="index">
+					<!-- #ifdef MP-WEIXIN -->
+					<image :src="item.poster" mode="aspectFit" class="imgw750h375" />
+					<!-- #endif -->
+					<!-- #ifdef H5 -->
+					<image :src="item.wap_poster" mode="aspectFit" class="imgw750h375" />
+					<!-- #endif -->
+					
+				</swiper-item>
 			</swiper>
 		</view>
 		<view class="baocun" @click="comfirm(userInfo.uid+'')">复制邀请码</view>
 		<!-- #ifdef H5 -->
 		<!-- <view class="baocun">长按二维码保存图片</view> -->
-		
+
 		<!-- #endif -->
 		<!-- #ifdef MP-WEIXIN -->
 		<view class="baocun" @click="seav">保存图片并转发</view>
@@ -17,294 +25,330 @@
 	</view>
 </template>
 <script>
-	// import weixinObj from "@/plugin/jweixin-module/index.js";
-import { mapState } from 'vuex';
-import { spreadBanner } from '@/api/user.js';
-import { interceptor, saveUrl } from '@/utils/loginUtils';
-// #ifdef H5
-import { weixindata, weixinlocation,shareLoad } from '@/utils/wxAuthorized';
-// #endif
-export default {
-	data() {
-		return {
-			rwmListArr: [],
-			current: 0,
-			imgSrc: ''
-		};
-	},
-	onLoad(option) {
-		uni.showLoading({
-			title: '邀请图生成中',
-			mask: true
-		});
-		// 判断是否强制登录
-		this.loadCodeList();
-		// #ifdef MP-WEIXIN
-		uni.authorize({
-			scope: 'scope.writePhotosAlbum',
-			complete() {}
-		});
-		// #endif
-		// #ifdef H5
-		
-		// weixinObj.showAllNonBaseMenuItem();
-		this.IndexShare()
-		// wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
-		// let path = '/#/pages/index/index' + '?';
-		// console.log(obj.Path)
-		// // 保存邀请人
-		// path += 'spread=' + this.userInfo.uid;
-		//   wx.updateAppMessageShareData({ 
-		//     title: this.userInfo.nickname + '邀请您进入Xingwang鑫旺', // 分享标题
-		//     desc: '欢迎加入Xingwang鑫旺', // 分享描述
-		//     link: this.baseURL + path, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
-		//     imgUrl: '../../static/img/logo.png', // 分享图标
-		//     success: function () {
-		//       // 设置成功
-		//     }
-		//   })
-		// });
-		// #endif
-	},
-	onShow() {
-		if (this.loginInterceptor && !this.hasLogin) {
-			saveUrl();
-			// 登录拦截
-			interceptor();
-		}
-	},
-    //下拉刷新
-    onPullDownRefresh() {
-    	let obj = this;
-    	//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
-    	setTimeout(function() {
-    		obj.loadCodeList();
-    		uni.stopPullDownRefresh(); //停止下拉刷新动画
-    	}, 1000);
-    },
-	computed: {
-		...mapState(['weichatObj', 'baseURL', 'urlFile']),
-		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
-	},
-	methods: {
-		comfirm(text) {
-			// let text = this.userInfo.uid
-			console.log(text);
-			const result = this.uniCopy(text);
-			if (result === false) {
-				uni.showToast({
-					title: '不支持'
-				});
-			} else {
-				uni.showToast({
-					title: '复制成功',
-					icon: 'none'
-				});
-			}
-			// this.$refs.popup.close();
+	import {
+		mapState
+	} from 'vuex';
+	import {
+		spreadBanner
+	} from '@/api/user.js';
+	import {
+		interceptor,
+		saveUrl
+	} from '@/utils/loginUtils';
+	// #ifdef H5
+	import {
+		weixindata,
+		weixinlocation,
+		shareLoad
+	} from '@/utils/wxAuthorized';
+	// #endif
+	export default {
+		data() {
+			return {
+				rwmListArr: [],
+				current: 0,
+				imgSrc: ''
+			};
 		},
-		uniCopy(content) {
-			/**
-			 * 小程序端 和 app端的复制逻辑
-			 */
-			//#ifndef H5
-			uni.setClipboardData({
-				data: content,
-				success: function() {
-					console.log('success');
-					return true;
-				}
+		onLoad(option) {
+			uni.showLoading({
+				title: '邀请图生成中',
+				mask: true
+			});
+			// 判断是否强制登录
+			this.loadCodeList();
+			// #ifdef MP-WEIXIN
+			uni.authorize({
+				scope: 'scope.writePhotosAlbum',
+				complete() {}
 			});
-			//#endif
-		
-			/**
-			 * H5端的复制逻辑
-			 */
+			// #endif
 			// #ifdef H5
-			if (!document.queryCommandSupported('copy')) {
-				//为了兼容有些浏览器 queryCommandSupported 的判断
-				// 不支持
-				return false;
-			}
-			let textarea = document.createElement('textarea');
-			textarea.value = content;
-			textarea.readOnly = 'readOnly';
-			document.body.appendChild(textarea);
-			textarea.select(); // 选择对象
-			textarea.setSelectionRange(0, content.length); //核心
-			let result = document.execCommand('copy'); // 执行浏览器复制命令
-			textarea.remove();
-			return result;
+
+			
+			// #ifdef H5
+			weixinObj.showAllNonBaseMenuItem();
+			this.IndexShare()
 			// #endif
+			// #ifdef MP-WEIXIN
+			wx.showAllNonBaseMenuItem();
+			wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
+			let path = '/#/pages/index/index' + '?';
+			console.log(obj.Path)
+			// 保存邀请人
+			path += 'spread=' + this.userInfo.uid;
+			  wx.updateAppMessageShareData({ 
+			    title: this.userInfo.nickname + '邀请您进入Xingwang鑫旺', // 分享标题
+			    desc: '欢迎加入Xingwang鑫旺', // 分享描述
+			    link: this.baseURL + path, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
+			    imgUrl: '../../static/img/logo.png', // 分享图标
+			    success: function () {
+			      // 设置成功
+			    }
+			  })
+			});
+			// #endif
+			
+			
+			// #endif
+		},
+		onShow() {
+			if (this.loginInterceptor && !this.hasLogin) {
+				saveUrl();
+				// 登录拦截
+				interceptor();
+			}
+		},
+		//下拉刷新
+		onPullDownRefresh() {
+			let obj = this;
+			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
+			setTimeout(function() {
+				obj.loadCodeList();
+				uni.stopPullDownRefresh(); //停止下拉刷新动画
+			}, 1000);
+		},
+		computed: {
+			...mapState(['weichatObj', 'baseURL', 'urlFile']),
+			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
 		},
-		loadCodeList() {
-			let self = this;
-			// 加载二维码信息
-			// let andrUid = uni.getStorageSync('andrUid')||'';
-			spreadBanner({
+		methods: {
+			comfirm(text) {
+				// let text = this.userInfo.uid
+				console.log(text);
+				const result = this.uniCopy(text);
+				if (result === false) {
+					uni.showToast({
+						title: '不支持'
+					});
+				} else {
+					uni.showToast({
+						title: '复制成功',
+						icon: 'none'
+					});
+				}
+				// this.$refs.popup.close();
+			},
+			uniCopy(content) {
+				/**
+				 * 小程序端 和 app端的复制逻辑
+				 */
+				//#ifndef H5
+				uni.setClipboardData({
+					data: content,
+					success: function() {
+						console.log('success');
+						return true;
+					}
+				});
+				//#endif
+
+				/**
+				 * H5端的复制逻辑
+				 */
 				// #ifdef H5
-				type: 2,
-				// #endif
-				// #ifdef MP
-				type: 1,
+				if (!document.queryCommandSupported('copy')) {
+					//为了兼容有些浏览器 queryCommandSupported 的判断
+					// 不支持
+					return false;
+				}
+				let textarea = document.createElement('textarea');
+				textarea.value = content;
+				textarea.readOnly = 'readOnly';
+				document.body.appendChild(textarea);
+				textarea.select(); // 选择对象
+				textarea.setSelectionRange(0, content.length); //核心
+				let result = document.execCommand('copy'); // 执行浏览器复制命令
+				textarea.remove();
+				return result;
 				// #endif
-			}).then(e => {
-				if (e.status == 200) {
-					console.log(e.data)
-					self.rwmListArr = e.data;
+			},
+			loadCodeList() {
+				let self = this;
+				// 加载二维码信息
+				// let andrUid = uni.getStorageSync('andrUid')||'';
+				spreadBanner({
 					// #ifdef H5
-					self.imgSrc = self.rwmListArr[0].wap_poster;
+					type: 2,
 					// #endif
-					// #ifdef MP-WEIXIN
-					self.imgSrc = self.rwmListArr[0].poster;
+					// #ifdef MP
+					type: 1,
 					// #endif
+				}).then(e => {
+					if (e.status == 200) {
+						console.log(e.data)
+						self.rwmListArr = e.data;
+						console.log(e.data, ' e.data++++++++++++++')
+
+						// #ifdef H5
+						self.imgSrc = self.rwmListArr[0].wap_poster;
+						// #endif
+						// #ifdef MP-WEIXIN
+						self.imgSrc = self.rwmListArr[0].poster;
+						// #endif
+					}
+					uni.hideLoading();
+				});
+			},
+			currentChange(e) {
+				this.current = e.detail.current;
+			},
+			// #ifdef H5
+			IndexShare() {
+				let obj = this;
+				let pages = getCurrentPages();
+				// 获取当前页面
+				let page = pages[pages.length - 1];
+				let path = '/#/pages/index/index' + '?';
+				// 保存传值
+				for (let i in page.options) {
+					path += i + '=' + page.options[i] + '&';
 				}
-				uni.hideLoading();
-			});
-		},
-		currentChange(e) {
-			this.current = e.detail.current;
-		},
-		// #ifdef H5
-		IndexShare() {
-			let obj = this;
-			let pages = getCurrentPages();
-			// 获取当前页面
-			let page = pages[pages.length - 1];
-			let path = '/#/pages/index/index' + '?';
-			// 保存传值
-			for (let i in page.options) {
-				path += i + '=' + page.options[i] + '&';
-			}
-			console.log(obj.Path)
-			// 保存邀请人
-			path += 'spread=' + this.userInfo.uid;
-			let data = {
-				link: this.baseURL + path,
-				title: this.userInfo.nickname + '邀请您进入Xingwang鑫旺',
-				desc:'欢迎加入Xingwang鑫旺',
-				imgUrl: ''
-			};
-			console.log(data,'分享数据');
-			shareLoad(data);
-		},
-		// #endif
-		// #ifdef MP-WEIXIN
-		seav() {
-			uni.getImageInfo({
-				src: this.imgSrc,
-				complete: function (result) {
-					let path = result.path;
-					uni.getSetting({
-						success(res) {
-							console.log(res)
-							if (!res.authSetting['scope.writePhotosAlbum']) {
-								uni.authorize({
-									scope:'scope.writePhotosAlbum',
-									success(res) {
-										uni.saveImageToPhotosAlbum({
-											filePath:path,
-											complete(result) {
-											}
-										});
-									},
-									complete(result) {
-									    uni.showToast({
-									         title: '请先授权保存图片',
-									         duration: 2000,
-											 icon:'none'
-									    });
-										obj.seav();
-									}
-								})
-							}else{
-								uni.saveImageToPhotosAlbum({
-									filePath:path,
-									complete(result) {
-									     uni.showToast({
-									         title: '保存图片成功！',
-									         duration: 2000,
-											 icon:'none'
-									     });
-									}
-								});
+				console.log(obj.Path)
+				// 保存邀请人
+				path += 'spread=' + this.userInfo.uid;
+				let data = {
+					link: this.baseURL + path,
+					title: this.userInfo.nickname + '邀请您进入Xingwang鑫旺',
+					desc: '欢迎加入Xingwang鑫旺',
+					imgUrl: ''
+				};
+				console.log(data, '分享数据');
+				shareLoad(data);
+			},
+			// #endif
+			// #ifdef MP-WEIXIN
+			seav() {
+				uni.getImageInfo({
+					src: this.imgSrc,
+					complete: function(result) {
+						let path = result.path;
+						uni.getSetting({
+							success(res) {
+								console.log(res)
+								if (!res.authSetting['scope.writePhotosAlbum']) {
+									uni.authorize({
+										scope: 'scope.writePhotosAlbum',
+										success(res) {
+											uni.saveImageToPhotosAlbum({
+												filePath: path,
+												complete(result) {}
+											});
+										},
+										complete(result) {
+											uni.showToast({
+												title: '请先授权保存图片',
+												duration: 2000,
+												icon: 'none'
+											});
+											obj.seav();
+										}
+									})
+								} else {
+									uni.saveImageToPhotosAlbum({
+										filePath: path,
+										complete(result) {
+											uni.showToast({
+												title: '保存图片成功！',
+												duration: 2000,
+												icon: 'none'
+									  });
+										}
+									});
+								}
 							}
-						}
-					});
-				}
-			});
+						});
+					}
+				});
+			}
+			// #endif
 		}
-		// #endif
-	}
-};
+	};
 </script>
 
 <style lang="scss">
-.imgw750h375 {
-	width: 700rpx;
-	height: 958rpx;
-}
-.matop{
-	margin-top: 40rpx;
-}
-.andr-shQ-padL30 {
-	padding-left: 30rpx;
-}
-.andr-shQ-padR30 {
-	padding-right: 30rpx;
-}
-.andr-shQ-Flex {
-	display: flex;
-}
-.andr-shQ-FlexDirC {
-	flex-direction: column;
-}
-.andr-shQ-w100B {
-	width: 100%;
-}
-.andr-shQ-JusCC {
-	justify-content: center;
-}
-.andr-shQ-marginT30 {
-	margin-top: 30rpx;
-}
-.andr-shQ-bgc06B163 {
-	background-color: $base-color;
-}
-.andr-shQ-cFFF {
-	color: #ffffff;
-}
-.andr-shQ-bdR50 {
-	border-radius: 50rpx;
-}
-.andr-shQ-h86 {
-	height: 86rpx;
-}
-.andr-shQ-AIC {
-	align-items: center;
-}
-.baocun {
-	color: #ffffff;
-	background: $base-color;
-	text-align: center;
-	width: 80%;
-	margin: 50rpx auto;
-	font-size: 28rpx;
-	padding: 25rpx 0rpx;
-	border-radius: 50rpx;
-}
-.btn{
-	padding: 0rpx 0rpx !important;
-	margin: 0rpx auto;
-	margin-bottom: 100rpx;
-}
-/* #ifdef H5 */
-.cbnagan {
-	width: 80%;
-	background: $base-color;
-	margin: 50rpx auto;
-	font-size: 28rpx;
-	text-align: center;
-}
-/* #endif */
+	.imgw750h375 {
+		width: 700rpx;
+		height: 958rpx;
+	}
+
+	.matop {
+		margin-top: 40rpx;
+	}
+
+	.andr-shQ-padL30 {
+		padding-left: 30rpx;
+	}
+
+	.andr-shQ-padR30 {
+		padding-right: 30rpx;
+	}
+
+	.andr-shQ-Flex {
+		display: flex;
+	}
+
+	.andr-shQ-FlexDirC {
+		flex-direction: column;
+	}
+
+	.andr-shQ-w100B {
+		width: 100%;
+	}
+
+	.andr-shQ-JusCC {
+		justify-content: center;
+	}
+
+	.andr-shQ-marginT30 {
+		margin-top: 30rpx;
+	}
+
+	.andr-shQ-bgc06B163 {
+		background-color: $base-color;
+	}
+
+	.andr-shQ-cFFF {
+		color: #ffffff;
+	}
+
+	.andr-shQ-bdR50 {
+		border-radius: 50rpx;
+	}
+
+	.andr-shQ-h86 {
+		height: 86rpx;
+	}
+
+	.andr-shQ-AIC {
+		align-items: center;
+	}
+
+	.baocun {
+		color: #ffffff;
+		background: $base-color;
+		text-align: center;
+		width: 80%;
+		margin: 50rpx auto;
+		font-size: 28rpx;
+		padding: 25rpx 0rpx;
+		border-radius: 50rpx;
+	}
+
+	.btn {
+		padding: 0rpx 0rpx !important;
+		margin: 0rpx auto;
+		margin-bottom: 100rpx;
+	}
+
+	/* #ifdef H5 */
+	.cbnagan {
+		width: 80%;
+		background: $base-color;
+		margin: 50rpx auto;
+		font-size: 28rpx;
+		text-align: center;
+	}
+
+	/* #endif */
 </style>

pages/user/user.vue

@@ -3,7 +3,9 @@
 		<view class="vheigh"></view>
 		<scroll-view class="content-box" scroll-y="true">
 			<view class="user-section">
-				<view class="bg"><image src="/static/img/user-bg.png" mode=""></image></view>
+				<view class="bg">
+					<image src="/static/img/user-bg.png" mode=""></image>
+				</view>
 				<view class="user-info-box ">
 					<view class="detail flex">
 						<view class="portrait-box" @click="navTo('/pages/set/userinfo')">
@@ -14,24 +16,36 @@
 							<!-- <view class="font-size-sm" v-if="userInfo.spread_uid">邀请码:{{ userInfo.spread_uid }}</view> -->
 							<view class="user-lv">
 								<view class="lv-1" v-if="userInfo.level == 1">普通会员</view>
-								<view class="lv-2" v-if="userInfo.level == 2"><image src="../../static/img/lv02.png" mode=""></image></view>
-								<view class="lv-3" v-if="userInfo.level == 3"><image src="../../static/img/lv03.png" mode=""></image></view>
-								<view class="lv-3" v-if="userInfo.level == 4"><image src="../../static/img/lv04.png" mode=""></image></view>
+								<view class="lv-2" v-if="userInfo.level == 2">
+									<image src="../../static/img/lv02.png" mode=""></image>
+								</view>
+								<view class="lv-3" v-if="userInfo.level == 3">
+									<image src="../../static/img/lv03.png" mode=""></image>
+								</view>
+								<view class="lv-3" v-if="userInfo.level == 4">
+									<image src="../../static/img/lv04.png" mode=""></image>
+								</view>
 							</view>
-							<view class="" v-if="hasLogin && (!Array.isArray(userInfo.agent))" style="padding-top: 5rpx; font-size: 30rpx; font-weight: 500;" @click="navTo('/pages/set/userinfo')">
-								代理区域 >
+							<view class="" v-if="hasLogin && (!Array.isArray(userInfo.agent))"
+								style="padding-top: 5rpx; font-size: 30rpx; font-weight: 500;"
+								@click="navTo('/pages/set/userinfo')">
+								代理区域
 							</view>
 						</view>
 						<view class="info-box" v-else>
-							<view class="username-t">{{ userInfo.nickname || '游客' }} <image src="../../static/img/lv03.png" mode=""></image></view>
+							<view class="username-t">{{ userInfo.nickname || '游客' }}
+								<image src="../../static/img/lv03.png" mode=""></image>
+							</view>
 							<view class="user-get">
 								本月业绩：￥<text style="font-weight: bold;">{{userInfo.store_sum | 0}}</text>
 							</view>
-							<view class="" v-if="!Array.isArray(userInfo.agent)" style="padding-top: 5rpx; font-size: 30rpx; font-weight: 500;" @click="navTo('/pages/set/userinfo')">
+							<view class="" v-if="!Array.isArray(userInfo.agent)"
+								style="padding-top: 5rpx; font-size: 30rpx; font-weight: 500;"
+								@click="navTo('/pages/set/userinfo')">
 								代理区域 >
 							</view>
 						</view>
-						
+
 					</view>
 					<view class="my-info flex" @click="navTo('/pages/set/userinfo')" v-if="hasLogin">
 						<image src="../../static/icon/i6.png" mode=""></image>
@@ -43,10 +57,12 @@
 			<view class="item-box item-box-b">
 				<view class="box-title flex borde-b">
 					<view class="title"><text>我的订单</text></view>
-					<view class="link" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover"><text class="iconfont iconenter"></text></view>
+					<view class="link" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover"><text
+							class="iconfont iconenter"></text></view>
 				</view>
 				<view class="order-section">
-					<view class="order-item" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover" :hover-stay-time="50">
+					<view class="order-item" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover"
+						:hover-stay-time="50">
 						<view class=" icon position-relative">
 							<image class="icon-img" src="/static/icon/i1.png" mode="aspectFit"></image>
 							<view class="corner" v-if="orderInfo.unpaid_count > 0">
@@ -55,7 +71,8 @@
 						</view>
 						<text>待付款</text>
 					</view>
-					<view class="order-item" @click="navTo('/pages/order/order?state=1')" hover-class="common-hover" :hover-stay-time="50">
+					<view class="order-item" @click="navTo('/pages/order/order?state=1')" hover-class="common-hover"
+						:hover-stay-time="50">
 						<view class=" icon position-relative">
 							<image class="icon-img" src="/static/icon/i2.png" mode="aspectFit"></image>
 							<view class="corner" v-if="orderInfo.unshipped_count > 0">
@@ -64,7 +81,8 @@
 						</view>
 						<text>待发货</text>
 					</view>
-					<view class="order-item" @click="navTo('/pages/order/order?state=2')" hover-class="common-hover" :hover-stay-time="50">
+					<view class="order-item" @click="navTo('/pages/order/order?state=2')" hover-class="common-hover"
+						:hover-stay-time="50">
 						<view class="icon position-relative">
 							<image class="icon-img" src="/static/icon/i3.png" mode="aspectFit"></image>
 							<view class="corner" v-if="orderInfo.received_count > 0">
@@ -73,7 +91,8 @@
 						</view>
 						<text>待收货</text>
 					</view>
-					<view class="order-item" @click="navTo('/pages/order/order?state=4')" hover-class="common-hover" :hover-stay-time="50">
+					<view class="order-item" @click="navTo('/pages/order/order?state=4')" hover-class="common-hover"
+						:hover-stay-time="50">
 						<view class="icon position-relative">
 							<image class="icon-img" src="/static/icon/i4.png" mode="aspectFit"></image>
 							<!-- <view class="corner" v-if="orderInfo.complete_count > 0">
@@ -86,7 +105,9 @@
 			</view>
 			<!-- 升级店长 -->
 			<navigator url="/pages/store/apply" v-if="userInfo.level < 3">
-				<view class="up-box"><image src="/static/img/upto.png" mode=""></image></view>
+				<view class="up-box">
+					<image src="/static/img/upto01.png" mode=""></image>
+				</view>
 			</navigator>
 			<view>
 				<!-- <view class="tj-sction">
@@ -106,44 +127,69 @@
 
 				<view class="item-box item-box-a">
 					<view class="order-section">
-						<view class="order-item" @click="navTo('/pages/user/award')" hover-class="common-hover" :hover-stay-time="50">
-							<view class="icon icon-b"><image class="icon-img" src="/static/icon/u2.png" mode="aspectFit"></image></view>
+						<view class="order-item" @click="navTo('/pages/user/award')" hover-class="common-hover"
+							:hover-stay-time="50">
+							<view class="icon icon-b">
+								<image class="icon-img" src="/static/icon/u2.png" mode="aspectFit"></image>
+							</view>
 							<text>收益中心</text>
 						</view>
-						<view class="order-item" @click="navTo('/pages/money/wallet')" hover-class="common-hover" :hover-stay-time="50">
-							<view class="icon icon-b"><image class="icon-img" src="/static/icon/u1.png" mode="aspectFit"></image></view>
+						<view class="order-item" @click="navTo('/pages/money/wallet')" hover-class="common-hover"
+							:hover-stay-time="50">
+							<view class="icon icon-b">
+								<image class="icon-img" src="/static/icon/u1.png" mode="aspectFit"></image>
+							</view>
 							<text>我的钱包</text>
 						</view>
-						<view class="order-item" @click="navTo('/pages/user/minMember')" hover-class="common-hover" :hover-stay-time="50" v-if="userInfo.level > 2">
-							<view class="icon icon-b"><image class="icon-img" src="/static/icon/u3.png" mode="aspectFit"></image></view>
+						<view class="order-item" @click="navTo('/pages/user/minMember')" hover-class="common-hover"
+							:hover-stay-time="50" v-if="userInfo.level > 2">
+							<view class="icon icon-b">
+								<image class="icon-img" src="/static/icon/u3.png" mode="aspectFit"></image>
+							</view>
 							<text>我的会员</text>
 						</view>
-						<view class="order-item" @click="navTo('/pages/user/extension')" hover-class="common-hover" :hover-stay-time="50" v-if="userInfo.level == 2">
-							<view class="icon icon-b"><image class="icon-img" src="/static/icon/minmen.png" mode="aspectFit"></image></view>
+						<view class="order-item" @click="navTo('/pages/user/extension')" hover-class="common-hover"
+							:hover-stay-time="50" v-if="userInfo.level == 2">
+							<view class="icon icon-b">
+								<image class="icon-img" src="/static/icon/minmen.png" mode="aspectFit"></image>
+							</view>
 							<text>我的推广</text>
 						</view>
-						<view class="order-item" @click="navTo('/pages/user/applyMember')" hover-class="common-hover" :hover-stay-time="50" v-if="userInfo.level < 2">
-							<view class="icon icon-b"><image class="icon-img" src="/static/icon/u3.png" mode="aspectFit"></image></view>
+						<!-- <view class="order-item" @click="navTo('/pages/user/applyMember')" hover-class="common-hover"
+							:hover-stay-time="50" v-if="userInfo.level < 2">
+							<view class="icon icon-b">
+								<image class="icon-img" src="/static/icon/u3.png" mode="aspectFit"></image>
+							</view>
 							<text>申请会员</text>
-						</view>
-						<view class="order-item" @click="navTo('/pages/user/shareQrCode')" hover-class="common-hover" :hover-stay-time="50">
-							<view class="icon icon-b"><image class="icon-img" src="/static/icon/u4.png" mode="aspectFit"></image></view>
+						</view> -->
+						<view class="order-item" @click="navTo('/pages/user/shareQrCode')" hover-class="common-hover"
+							:hover-stay-time="50">
+							<view class="icon icon-b">
+								<image class="icon-img" src="/static/icon/u4.png" mode="aspectFit"></image>
+							</view>
 							<text>邀请好友</text>
 						</view>
 					</view>
 				</view>
 				<view class="history-section icon">
 					<uni-list>
-						<uni-list-item title="我的实体店" @click="navTo('/pages/store/storeDetail')" thumb="/static/icon/img13.png" v-if="userInfo.level == 3"></uni-list-item>
-						<uni-list-item title="我的推广" @click="navTo('/pages/user/extension')" thumb="/static/icon/img11.png" v-if="userInfo.level != 2"></uni-list-item>
-						<uni-list-item title="收货地址" @click="navTo('/pages/set/address')" thumb="/static/icon/img12.png"></uni-list-item>
+						<uni-list-item title="我的实体店" @click="navTo('/pages/store/storeDetail')"
+							thumb="/static/icon/img13.png" v-if="userInfo.level == 3"></uni-list-item>
+						<uni-list-item title="我的推广" @click="navTo('/pages/user/extension')"
+							thumb="/static/icon/img11.png" v-if="userInfo.level != 2"></uni-list-item>
+						<uni-list-item title="交易密码" @click="navTo('/pages/money/moneyPwd')"
+							thumb="/static/icon/i8.png" v-if="userInfo.uid"></uni-list-item>
+						<uni-list-item title="收货地址" @click="navTo('/pages/set/address')" thumb="/static/icon/img12.png">
+						</uni-list-item>
 						<uni-list-item title="联系客服" @click="showPopup" thumb="/static/icon/img02.png"></uni-list-item>
 						<!-- <uni-list-item title="关于我们" @click="navTo('/pages/shareQrCode/index')" thumb="/static/icon/img09.png"></uni-list-item> -->
 					</uni-list>
 				</view>
 				<uni-popup ref="popup" type="center">
 					<view class="popup-box">
-						<view class="img"><image src="../../static/img/img009.png" mode=""></image></view>
+						<view class="img">
+							<image src="../../static/img/img009.png" mode=""></image>
+						</view>
 						<view class="mian">
 							<view class="delivery">
 								<view class="title">已经为您定制专属客服</view>
@@ -163,695 +209,769 @@
 	</view>
 </template>
 <script>
-	import weixinObj from "@/plugin/jweixin-module/index.js";
-import { mapState, mapMutations } from 'vuex';
-import uniList from '@/components/uni-list/uni-list.vue';
-import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
-import { orderData, getUserInfo, getMyStore } from '@/api/user.js';
-import { saveUrl, interceptor } from '@/utils/loginUtils.js';
-import { logout } from '@/api/set.js';
-// import uniCopy from '@/js_sdk/xb-copy/uni-copy.js';
-let startY = 0,
-	moveY = 0,
-	pageAtTop = true;
-export default {
-	components: {
-		uniList,
-		uniListItem
-	},
-	data() {
-		return {
-			coverTransform: 'translateY(0px)',
-			coverTransition: '0s',
-			moving: false,
-			userDowm: 0, //卡片升级专属高度
-			userMaxDowm: 0, //卡片最高高度
-			text: 'Zjxwcm'
-		};
-	},
-	onShow() {
-		// 判断是否已经登录
-		if (this.hasLogin) {
-			this.loadBaseData();
-			this.getMyStore();
-		}
-		weixinObj.hideAllNonBaseMenuItem();
-	},
-	onReady() {
-		// 初始化获取页面宽度
-		uni.createSelectorQuery()
-			.select('.container')
-			.fields(
-				{
-					size: true
-				},
-				data => {
-					// 计算最多下拉的高度
-					this.userDowm = Math.floor((data.width / 750) * 185);
-					// 计算最大触发修改高度事件
-					this.userMaxDowm = Math.floor((data.width / 750) * 250);
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex';
+	import uniList from '@/components/uni-list/uni-list.vue';
+	import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
+	import {
+		orderData,
+		getUserInfo,
+		getMyStore
+	} from '@/api/user.js';
+	import {
+		saveUrl,
+		interceptor
+	} from '@/utils/loginUtils.js';
+	import {
+		logout
+	} from '@/api/set.js';
+	// import uniCopy from '@/js_sdk/xb-copy/uni-copy.js';
+	let startY = 0,
+		moveY = 0,
+		pageAtTop = true;
+	export default {
+		components: {
+			uniList,
+			uniListItem
+		},
+		data() {
+			return {
+				coverTransform: 'translateY(0px)',
+				coverTransition: '0s',
+				moving: false,
+				userDowm: 0, //卡片升级专属高度
+				userMaxDowm: 0, //卡片最高高度
+				text: 'Zjxwcm'
+			};
+		},
+		onShow() {
+			// 判断是否已经登录
+			if (this.hasLogin) {
+				this.loadBaseData();
+				this.getMyStore();
+			}
+
+		},
+		onReady() {
+			// 初始化获取页面宽度
+			uni.createSelectorQuery()
+				.select('.container')
+				.fields({
+						size: true
+					},
+					data => {
+						// 计算最多下拉的高度
+						this.userDowm = Math.floor((data.width / 750) * 185);
+						// 计算最大触发修改高度事件
+						this.userMaxDowm = Math.floor((data.width / 750) * 250);
+					}
+				)
+				.exec();
+		},
+		// #ifndef MP
+		// onNavigationBarButtonTap(e) {
+		// 	const index = e.index;
+		// 	if (index === 0) {
+		// 		this.navTo('/pages/set/set');
+		// 	} else if (index === 1) {
+		// 		// #ifdef APP-PLUS
+		// 		const pages = getCurrentPages();
+		// 		const page = pages[pages.length - 1];
+		// 		const currentWebview = page.$getAppWebview();
+		// 		currentWebview.hideTitleNViewButtonRedDot({
+		// 			index
+		// 		});
+		// 		// #endif
+		// 		uni.navigateTo({
+		// 			url: '/pages/user/notice'
+		// 		});
+		// 	}
+		// },
+		// #endif
+		computed: {
+			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
+		},
+		methods: {
+			...mapMutations('user', ['setUserInfo', 'logout']),
+			uniCopy(content) {
+				/**
+				 * 小程序端 和 app端的复制逻辑
+				 */
+				//#ifndef H5
+				uni.setClipboardData({
+					data: content,
+					success: function() {
+						console.log('success');
+						return true;
+					}
+				});
+				//#endif
+
+				/**
+				 * H5端的复制逻辑
+				 */
+				// #ifdef H5
+				if (!document.queryCommandSupported('copy')) {
+					//为了兼容有些浏览器 queryCommandSupported 的判断
+					// 不支持
+					return false;
 				}
-			)
-			.exec();
-	},
-	// #ifndef MP
-	// onNavigationBarButtonTap(e) {
-	// 	const index = e.index;
-	// 	if (index === 0) {
-	// 		this.navTo('/pages/set/set');
-	// 	} else if (index === 1) {
-	// 		// #ifdef APP-PLUS
-	// 		const pages = getCurrentPages();
-	// 		const page = pages[pages.length - 1];
-	// 		const currentWebview = page.$getAppWebview();
-	// 		currentWebview.hideTitleNViewButtonRedDot({
-	// 			index
-	// 		});
-	// 		// #endif
-	// 		uni.navigateTo({
-	// 			url: '/pages/user/notice'
-	// 		});
-	// 	}
-	// },
-	// #endif
-	computed: {
-		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
-	},
-	methods: {
-		...mapMutations('user', ['setUserInfo','logout']),
-		uniCopy(content) {
+				let textarea = document.createElement('textarea');
+				textarea.value = content;
+				textarea.readOnly = 'readOnly';
+				document.body.appendChild(textarea);
+				textarea.select(); // 选择对象
+				textarea.setSelectionRange(0, content.length); //核心
+				let result = document.execCommand('copy'); // 执行浏览器复制命令
+				textarea.remove();
+				return result;
+				// #endif
+			},
+			showPopup() {
+				this.$refs.popup.open();
+			},
+			cancel() {
+				this.$refs.popup.close();
+			},
+			comfirm(text) {
+				console.log(text);
+				const result = this.uniCopy(text);
+				if (result === false) {
+					uni.showToast({
+						title: '不支持'
+					});
+				} else {
+					uni.showToast({
+						title: '复制成功',
+						icon: 'none'
+					});
+				}
+				this.$refs.popup.close();
+			},
+			...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
+			// 加载初始数据
+			loadBaseData() {
+				getUserInfo({})
+					.then(({
+						data
+					}) => {
+						console.log(data, 'userInfo+++++++++++++++++++')
+						this.setUserInfo(data);
+						// 获取用户数据完毕后在获取订单数据防止多次跳转到登录页
+						orderData({})
+							.then(({
+								data
+							}) => {
+								this.setOrderInfo(data);
+							})
+							.catch(e => {
+								this.setOrderInfo({
+									complete_count: 0, //完成
+									received_count: 0, //待收货
+									unshipped_count: 0, //待发货
+									order_count: 0, //订单总数
+									unpaid_count: 0 //待付款
+								});
+							});
+					})
+					.catch(e => {
+						console.log(e);
+					});
+			},
 			/**
-			 * 小程序端 和 app端的复制逻辑
+			 * 统一跳转接口,拦截未登录路由
+			 * navigator标签现在默认没有转场动画，所以用view
 			 */
-			//#ifndef H5
-			uni.setClipboardData({
-				data: content,
-				success: function() {
-					console.log('success');
-					return true;
+			navTo(url) {
+				if (!this.hasLogin) {
+					// 保存地址
+					saveUrl();
+					// 登录拦截
+					interceptor();
+				} else {
+					uni.navigateTo({
+						url
+					});
 				}
-			});
-			//#endif
+			},
 
 			/**
-			 * H5端的复制逻辑
+			 *  会员卡下拉和回弹
+			 *  1.关闭bounce避免ios端下拉冲突
+			 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
+			 *    transition设置0.1秒延迟，让css来过渡这段空窗期
+			 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
 			 */
-			// #ifdef H5
-			if (!document.queryCommandSupported('copy')) {
-				//为了兼容有些浏览器 queryCommandSupported 的判断
-				// 不支持
-				return false;
-			}
-			let textarea = document.createElement('textarea');
-			textarea.value = content;
-			textarea.readOnly = 'readOnly';
-			document.body.appendChild(textarea);
-			textarea.select(); // 选择对象
-			textarea.setSelectionRange(0, content.length); //核心
-			let result = document.execCommand('copy'); // 执行浏览器复制命令
-			textarea.remove();
-			return result;
-			// #endif
-		},
-		showPopup() {
-			this.$refs.popup.open();
-		},
-		cancel() {
-			this.$refs.popup.close();
-		},
-		comfirm(text) {
-			console.log(text);
-			const result = this.uniCopy(text);
-			if (result === false) {
-				uni.showToast({
-					title: '不支持'
-				});
-			} else {
-				uni.showToast({
-					title: '复制成功',
-					icon: 'none'
-				});
-			}
-			this.$refs.popup.close();
-		},
-		...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
-		// 加载初始数据
-		loadBaseData() {
-			getUserInfo({})
-				.then(({ data }) => {
-					console.log(data,'userInfo+++++++++++++++++++')
-					this.setUserInfo(data);
-					// 获取用户数据完毕后在获取订单数据防止多次跳转到登录页
-					orderData({})
-						.then(({ data }) => {
-							this.setOrderInfo(data);
-						})
-						.catch(e => {
-							this.setOrderInfo({
-								complete_count: 0, //完成
-								received_count: 0, //待收货
-								unshipped_count: 0, //待发货
-								order_count: 0, //订单总数
-								unpaid_count: 0 //待付款
-							});
-						});
-				})
-				.catch(e => {
-					console.log(e);
-				});
-		},
-		/**
-		 * 统一跳转接口,拦截未登录路由
-		 * navigator标签现在默认没有转场动画，所以用view
-		 */
-		navTo(url) {
-			if (!this.hasLogin) {
-				// 保存地址
-				saveUrl();
-				// 登录拦截
-				interceptor();
-			} else {
-				uni.navigateTo({
-					url
-				});
-			}
-		},
+			coverTouchstart(e) {
+				// console.log(e);
+				if (pageAtTop === false) {
+					return;
+				}
 
-		/**
-		 *  会员卡下拉和回弹
-		 *  1.关闭bounce避免ios端下拉冲突
-		 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
-		 *    transition设置0.1秒延迟，让css来过渡这段空窗期
-		 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
-		 */
-		coverTouchstart(e) {
-			// console.log(e);
-			if (pageAtTop === false) {
-				return;
-			}
+				this.coverTransition = 'transform .1s linear';
+				startY = e.touches[0].clientY;
+			},
+			coverTouchmove(e) {
+				// console.log(e);
+				moveY = e.touches[0].clientY;
+				let moveDistance = moveY - startY;
+				let maxDowm = this.userMaxDowm;
+				let Dowm = this.userDowm;
+				if (moveDistance < 0) {
+					this.moving = false;
+					return;
+				}
+				this.moving = true;
+				if (moveDistance >= Dowm && moveDistance < maxDowm) {
+					moveDistance = Dowm;
+				}
 
-			this.coverTransition = 'transform .1s linear';
-			startY = e.touches[0].clientY;
-		},
-		coverTouchmove(e) {
-			// console.log(e);
-			moveY = e.touches[0].clientY;
-			let moveDistance = moveY - startY;
-			let maxDowm = this.userMaxDowm;
-			let Dowm = this.userDowm;
-			if (moveDistance < 0) {
+				if (moveDistance > 0 && moveDistance <= Dowm) {
+					this.coverTransform = `translateY(${moveDistance}px)`;
+				}
+			},
+			coverTouchend() {
+				if (this.moving === false) {
+					return;
+				}
 				this.moving = false;
-				return;
-			}
-			this.moving = true;
-			if (moveDistance >= Dowm && moveDistance < maxDowm) {
-				moveDistance = Dowm;
-			}
-
-			if (moveDistance > 0 && moveDistance <= Dowm) {
-				this.coverTransform = `translateY(${moveDistance}px)`;
-			}
-		},
-		coverTouchend() {
-			if (this.moving === false) {
-				return;
-			}
-			this.moving = false;
-			this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
-			this.coverTransform = 'translateY(0px)';
-		},
-		getMyStore() {
-			getMyStore().then(res => {
-				console.log('getMyStore', res);
-			});
-		},
-		outlogin() {
-			let obj = this;
-			uni.showModal({
-				content: '确定要退出登录么',
-				success: e => {
-					if (e.confirm) {
-						logout({}).then(e => {
-							obj.logout();
-							uni.navigateTo({
-								url:'/pages/public/login'
-							})
-						})
-						.catch(e => {
-							console.log(e);
-						});
+				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
+				this.coverTransform = 'translateY(0px)';
+			},
+			getMyStore() {
+				getMyStore().then(res => {
+					console.log('getMyStore', res);
+				});
+			},
+			outlogin() {
+				let obj = this;
+				uni.showModal({
+					content: '确定要退出登录么',
+					success: e => {
+						if (e.confirm) {
+							logout({}).then(e => {
+									obj.logout();
+									uni.navigateTo({
+										url: '/pages/public/login'
+									})
+								})
+								.catch(e => {
+									console.log(e);
+								});
+						}
 					}
-				}
-			});
+				});
+			}
 		}
-	}
-};
+	};
 </script>
 <style lang="scss">
-page {
-	height: 100%;
-	background-color: $page-color-base;
-}
-%flex-center {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-}
-%section {
-	display: flex;
-	justify-content: space-around;
-	align-content: center;
-	background: #fff;
-	border-radius: 10rpx;
-}
-.container {
-	height: 100%;
-	background-color: #fff;
-}
-.content-box {
-	height: 100%;
-}
-.vheigh {
-	height: var(--status-bar-height);
-	background-color: $base-color;
-}
-.user-section {
-	height: 420rpx;
-	padding: 50rpx 0rpx 0 30rpx;
-	position: relative;
-	.bg {
-		position: absolute;
-		left: 0;
-		top: 0;
-		width: 100%;
+	page {
 		height: 100%;
-		// z-index: 1;
-		// background-color: $base-color;
-		image {
-			width: 100%;
-			height: 100%;
-		}
+		background-color: $page-color-base;
+	}
+
+	%flex-center {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+
+	%section {
+		display: flex;
+		justify-content: space-around;
+		align-content: center;
+		background: #fff;
+		border-radius: 10rpx;
+	}
+
+	.container {
+		height: 100%;
+		background-color: #fff;
 	}
-}
-.user-info-box {
-	height: 180rpx;
-	color: white;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	position: relative;
-	z-index: 1;
-	.detail {
-		height: 130rpx;
-		.portrait-box {
+
+	.content-box {
+		height: 100%;
+	}
+
+	.vheigh {
+		height: var(--status-bar-height);
+		background-color: $base-color;
+	}
+
+	.user-section {
+		height: 420rpx;
+		padding: 50rpx 0rpx 0 30rpx;
+		position: relative;
+
+		.bg {
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
 			height: 100%;
-			.portrait {
-				width: 130rpx;
+
+			// z-index: 1;
+			// background-color: $base-color;
+			image {
+				width: 100%;
 				height: 100%;
-				border: 5rpx solid #fff;
-				border-radius: 50%;
 			}
 		}
-		.info-box {
-			margin-left: 20rpx;
-			line-height: 1.5;
-			.username {
-				font-size: $font-lg + 6rpx;
+	}
+
+	.user-info-box {
+		height: 180rpx;
+		color: white;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		position: relative;
+		z-index: 1;
+
+		.detail {
+			height: 130rpx;
+
+			.portrait-box {
 				height: 100%;
-				image {
-					display: inline-block;
-					width: 147rpx;
-					height: 32rpx;
+
+				.portrait {
+					width: 130rpx;
+					height: 100%;
+					border: 5rpx solid #fff;
+					border-radius: 50%;
 				}
 			}
-			.username-t {
-				font-size: $font-lg + 6rpx;
-				// height: 32rpx;
-				display: flex;
-				align-items: center;
-				image {
-					display: inline-block;
-					margin-left: 10rpx;
-					width: 147rpx;
-					height: 32rpx;
+
+			.info-box {
+				margin-left: 20rpx;
+				line-height: 1.5;
+
+				.username {
+					font-size: $font-lg + 6rpx;
+					height: 100%;
+
+					image {
+						display: inline-block;
+						width: 147rpx;
+						height: 32rpx;
+					}
 				}
-			}
-			.user-get {
-				font-size: $font-lg ;
-				text {
+
+				.username-t {
 					font-size: $font-lg + 6rpx;
+					// height: 32rpx;
+					display: flex;
+					align-items: center;
+
+					image {
+						display: inline-block;
+						margin-left: 10rpx;
+						width: 147rpx;
+						height: 32rpx;
+					}
 				}
-			}
-			.user-lv {
-				display: flex;
-				.lv-1 {
-					text-align: center;
-					width: 97rpx;
-					line-height: 32rpx;
-					border: 1px solid #ffffff;
-					border-radius: 8rpx;
-					font-size: 20rpx;
-					font-family: Source Han Sans CN;
-					font-weight: 400;
-					color: #ffffff;
+
+				.user-get {
+					font-size: $font-lg;
+
+					text {
+						font-size: $font-lg + 6rpx;
+					}
 				}
-				.lv-2,
-				.lv-3 {
-					width: 147rpx;
-					height: 32rpx;
-					image {
-						height: 100%;
-						width: 100%;
+
+				.user-lv {
+					display: flex;
+
+					.lv-1 {
+						text-align: center;
+						width: 150rpx;
+						line-height: 32rpx;
+						border: 1px solid #ffffff;
+						border-radius: 8rpx;
+						font-size: 20rpx;
+						font-family: Source Han Sans CN;
+						font-weight: 400;
+						color: #ffffff;
+					}
+
+					.lv-2,
+					.lv-3 {
+						width: 147rpx;
+						height: 32rpx;
+
+						image {
+							height: 100%;
+							width: 100%;
+						}
 					}
 				}
 			}
 		}
-	}
-	.config {
-		font-size: 48rpx;
-		height: 130rpx;
-		.setting {
-			margin-right: 51rpx;
-		}
-	}
-	.my-info {
-		width: 194rpx;
-		height: 64rpx;
-		background: #ffffff;
-		border-radius: 32rpx 0rpx 0rpx 32rpx;
-		justify-content: center;
-		image {
-			width: 30rpx;
-			height: 30rpx;
+
+		.config {
+			font-size: 48rpx;
+			height: 130rpx;
+
+			.setting {
+				margin-right: 51rpx;
+			}
 		}
-		.title {
-			padding-left: 9rpx;
-			font-size: 28rpx;
-			font-family: PingFang SC;
-			font-weight: 500;
-			color: #ff4c4c;
+
+		.my-info {
+			width: 194rpx;
+			height: 64rpx;
+			background: #ffffff;
+			border-radius: 32rpx 0rpx 0rpx 32rpx;
+			justify-content: center;
+
+			image {
+				width: 30rpx;
+				height: 30rpx;
+			}
+
+			.title {
+				padding-left: 9rpx;
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #ff4c4c;
+			}
 		}
 	}
-}
-
-.vip-card-box {
-	display: flex;
-	flex-direction: column;
-	color: #f7d680;
-	height: 240rpx;
-	background: linear-gradient(left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
-	border-radius: 16rpx 16rpx 0 0;
-	overflow: hidden;
-	position: relative;
-	padding: 20rpx 24rpx;
-	.card-bg {
-		position: absolute;
-		top: 20rpx;
-		right: 0;
-		width: 380rpx;
-		height: 260rpx;
-	}
-	.b-btn {
-		position: absolute;
-		right: 20rpx;
-		top: 16rpx;
-		width: 132rpx;
-		height: 40rpx;
-		text-align: center;
-		line-height: 40rpx;
-		font-size: 22rpx;
-		color: #36343c;
-		border-radius: 20px;
-		background: linear-gradient(left, #f9e6af, #ffd465);
-		z-index: 1;
-	}
-	.tit {
-		font-size: $font-base + 2rpx;
+
+	.vip-card-box {
+		display: flex;
+		flex-direction: column;
 		color: #f7d680;
-		margin-bottom: 28rpx;
-		.iconfont {
-			color: #f6e5a3;
-			margin-right: 16rpx;
+		height: 240rpx;
+		background: linear-gradient(left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
+		border-radius: 16rpx 16rpx 0 0;
+		overflow: hidden;
+		position: relative;
+		padding: 20rpx 24rpx;
+
+		.card-bg {
+			position: absolute;
+			top: 20rpx;
+			right: 0;
+			width: 380rpx;
+			height: 260rpx;
 		}
-	}
-	.e-b {
-		font-size: $font-sm;
-		color: #d8cba9;
-		margin-top: 10rpx;
-	}
-}
-.cover-container {
-	background: $page-color-base;
-	margin-top: -150rpx;
-	padding: 0 30rpx;
-	position: relative;
-	background: #f5f5f5;
-	padding-bottom: 20rpx;
-	.arc {
-		position: absolute;
-		left: 0;
-		top: -34rpx;
-		width: 100%;
-		height: 36rpx;
-	}
-}
-.tj-sction {
-	@extend %section;
-	.tj-item {
-		@extend %flex-center;
-		flex-direction: column;
-		height: 140rpx;
-		font-size: $font-sm;
-		color: #75787d;
-	}
-	.num {
-		font-size: $font-lg;
-		color: $font-color-dark;
-		margin-bottom: 8rpx;
-	}
-}
-
-.item-box {
-	// width: 710rpx;
-	// height: 221rpx;
-	// background: #FFFFFF;
-	// box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
-	// border-radius: 20rpx;
-	// position: relative;
-	// top: -150rpx;
-	// left: 0;
-	// right: 0;
-	// margin: 0 auto -150rpx;
-	margin: 20rpx 0;
-	.box-title {
-		background-color: #fff;
-		line-height: 1;
-		// padding: 30rpx;
-		padding: 0 36rpx 0 35rpx;
-		height: 73rpx;
-		border-radius: 20rpx 20rpx 0 0;
-		.title {
-			font-weight: bold;
-			font-size: 30rpx;
-			font-family: PingFang SC;
-			font-weight: bold;
-			color: #333333;
+
+		.b-btn {
+			position: absolute;
+			right: 20rpx;
+			top: 16rpx;
+			width: 132rpx;
+			height: 40rpx;
+			text-align: center;
+			line-height: 40rpx;
+			font-size: 22rpx;
+			color: #36343c;
+			border-radius: 20px;
+			background: linear-gradient(left, #f9e6af, #ffd465);
+			z-index: 1;
 		}
-		.link {
-			font-size: $font-base - 2rpx;
-			color: $font-color-light;
+
+		.tit {
+			font-size: $font-base + 2rpx;
+			color: #f7d680;
+			margin-bottom: 28rpx;
+
+			.iconfont {
+				color: #f6e5a3;
+				margin-right: 16rpx;
+			}
+		}
+
+		.e-b {
+			font-size: $font-sm;
+			color: #d8cba9;
+			margin-top: 10rpx;
 		}
 	}
-	.order-section {
-		height: 146rpx;
+
+	.cover-container {
+		background: $page-color-base;
+		margin-top: -150rpx;
+		padding: 0 30rpx;
+		position: relative;
+		background: #f5f5f5;
+		padding-bottom: 20rpx;
+
+		.arc {
+			position: absolute;
+			left: 0;
+			top: -34rpx;
+			width: 100%;
+			height: 36rpx;
+		}
+	}
+
+	.tj-sction {
 		@extend %section;
-		// padding: 28rpx 0;
-		.order-item {
+
+		.tj-item {
 			@extend %flex-center;
-			width: 120rpx;
-			height: 146rpx;
-			border-radius: 10rpx;
+			flex-direction: column;
+			height: 140rpx;
 			font-size: $font-sm;
-			color: $font-color-dark;
+			color: #75787d;
 		}
-		.iconfont {
-			font-size: 48rpx;
-			margin-bottom: 18rpx;
-			color: #fa436a;
-		}
-		.icon-shouhoutuikuan {
-			font-size: 44rpx;
+
+		.num {
+			font-size: $font-lg;
+			color: $font-color-dark;
+			margin-bottom: 8rpx;
 		}
-		.icon {
-			height: 50rpx;
-			width: 48rpx;
-			margin-bottom: 18rpx;
-			background-size: 100%;
-			background-repeat: no-repeat;
-			background-position: center;
-			.icon-img {
-				width: 100%;
-				height: 100%;
+	}
+
+	.item-box {
+		// width: 710rpx;
+		// height: 221rpx;
+		// background: #FFFFFF;
+		// box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+		// border-radius: 20rpx;
+		// position: relative;
+		// top: -150rpx;
+		// left: 0;
+		// right: 0;
+		// margin: 0 auto -150rpx;
+		margin: 20rpx 0;
+
+		.box-title {
+			background-color: #fff;
+			line-height: 1;
+			// padding: 30rpx;
+			padding: 0 36rpx 0 35rpx;
+			height: 73rpx;
+			border-radius: 20rpx 20rpx 0 0;
+
+			.title {
+				font-weight: bold;
+				font-size: 30rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #333333;
+			}
+
+			.link {
+				font-size: $font-base - 2rpx;
+				color: $font-color-light;
 			}
 		}
-		.icon-b {
-			height: 70rpx;
-			width: 70rpx;
+
+		.order-section {
+			height: 146rpx;
+			@extend %section;
+
+			// padding: 28rpx 0;
+			.order-item {
+				@extend %flex-center;
+				width: 120rpx;
+				height: 146rpx;
+				border-radius: 10rpx;
+				font-size: $font-sm;
+				color: $font-color-dark;
+			}
+
+			.iconfont {
+				font-size: 48rpx;
+				margin-bottom: 18rpx;
+				color: #fa436a;
+			}
+
+			.icon-shouhoutuikuan {
+				font-size: 44rpx;
+			}
+
+			.icon {
+				height: 50rpx;
+				width: 48rpx;
+				margin-bottom: 18rpx;
+				background-size: 100%;
+				background-repeat: no-repeat;
+				background-position: center;
+
+				.icon-img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+			.icon-b {
+				height: 70rpx;
+				width: 70rpx;
+			}
 		}
 	}
-}
-
-.history-section {
-	// padding: 30rpx 0 0;
-	margin-top: 20rpx;
-	background: #fff;
-	border-radius: 10rpx;
-	.sec-header {
-		display: flex;
-		align-items: center;
-		font-size: $font-base;
-		color: $font-color-dark;
-		line-height: 40rpx;
-		margin-left: 30rpx;
-		padding-top: 30rpx;
-		.iconfont {
-			font-size: 44rpx;
-			color: $color-red;
-			margin-right: 16rpx;
+
+	.history-section {
+		// padding: 30rpx 0 0;
+		margin-top: 20rpx;
+		background: #fff;
+		border-radius: 10rpx;
+
+		.sec-header {
+			display: flex;
+			align-items: center;
+			font-size: $font-base;
+			color: $font-color-dark;
 			line-height: 40rpx;
+			margin-left: 30rpx;
+			padding-top: 30rpx;
+
+			.iconfont {
+				font-size: 44rpx;
+				color: $color-red;
+				margin-right: 16rpx;
+				line-height: 40rpx;
+			}
 		}
-	}
-	.h-list {
-		white-space: nowrap;
-		padding: 30rpx 30rpx 0;
-		.h-list-image {
-			display: inline-block;
-			width: 160rpx;
-			height: 160rpx;
-			margin-right: 20rpx;
-			border-radius: 10rpx;
+
+		.h-list {
+			white-space: nowrap;
+			padding: 30rpx 30rpx 0;
+
+			.h-list-image {
+				display: inline-block;
+				width: 160rpx;
+				height: 160rpx;
+				margin-right: 20rpx;
+				border-radius: 10rpx;
+			}
 		}
 	}
-}
-.up-box {
-	margin: 21rpx auto;
-	width: 710rpx;
-	height: 90rpx;
-	background: linear-gradient(73deg, #ffffff 0%, #fffbeb 0%, #fff1da 0%, #fed591 100%);
-	border-radius: 20rpx;
-	image {
-		width: 100%;
-		height: 100%;
+
+	.up-box {
+		margin: 21rpx auto;
+		width: 710rpx;
+		height: 90rpx;
+		background: linear-gradient(73deg, #ffffff 0%, #fffbeb 0%, #fff1da 0%, #fed591 100%);
 		border-radius: 20rpx;
+
+		image {
+			width: 100%;
+			height: 100%;
+			border-radius: 20rpx;
+		}
 	}
-}
-.item-box-b {
-	width: 710rpx;
-	height: 221rpx;
-	background: #ffffff;
-	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.5);
-	border-radius: 20rpx;
-	position: relative;
-	top: -150rpx;
-	left: 0;
-	right: 0;
-	margin: 0 auto -150rpx;
-}
-.popup-box {
-	width: 522rpx;
-	height: 605rpx;
-	background-color: #ffffff;
-	border-radius: 20rpx;
-	position: relative;
-	.img {
+
+	.item-box-b {
+		width: 710rpx;
+		height: 221rpx;
+		background: #ffffff;
+		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.5);
+		border-radius: 20rpx;
 		position: relative;
-		top: -56rpx;
+		top: -150rpx;
 		left: 0;
-		width: 522rpx;
-		height: 132rpx;
-		display: flex;
-		justify-content: center;
-		image {
-			border-radius: 20rpx 20rpx 0 0;
-			width: 450rpx;
-			height: 132rpx;
-		}
+		right: 0;
+		margin: 0 auto -150rpx;
 	}
 
-	.mian {
-		margin-top: -44rpx;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		// padding: 32rpx 32rpx;
+	.popup-box {
+		width: 522rpx;
+		height: 605rpx;
 		background-color: #ffffff;
-		border-radius: 0 0 20rpx 20rpx;
-		text-align: center;
+		border-radius: 20rpx;
+		position: relative;
 
-		.delivery {
-			font-size: 40rpx;
-			color: #333333;
+		.img {
+			position: relative;
+			top: -56rpx;
+			left: 0;
+			width: 522rpx;
+			height: 132rpx;
 			display: flex;
-			align-items: center;
-			flex-direction: column;
-			.title {
-			}
+			justify-content: center;
+
 			image {
-				margin-top: 48rpx;
-				width: 172rpx;
-				height: 160rpx;
+				border-radius: 20rpx 20rpx 0 0;
+				width: 450rpx;
+				height: 132rpx;
 			}
 		}
 
-		.nocancel {
-			font-size: 32rpx;
-			color: #333333;
-			margin-top: 14rpx;
-		}
-
-		.comfirm-box {
-			margin-top: 52rpx;
+		.mian {
+			margin-top: -44rpx;
 			display: flex;
-			// margin-bottom: 32rpx;
+			flex-direction: column;
+			align-items: center;
+			// padding: 32rpx 32rpx;
+			background-color: #ffffff;
+			border-radius: 0 0 20rpx 20rpx;
+			text-align: center;
 
-			// justify-content: space-around;
-			.cancel {
+			.delivery {
+				font-size: 40rpx;
+				color: #333333;
 				display: flex;
 				align-items: center;
-				justify-content: center;
-				width: 197rpx;
-				height: 74rpx;
-				border: 1px solid #dcc786;
-				border-radius: 38rpx;
+				flex-direction: column;
+
+				.title {}
 
+				image {
+					margin-top: 48rpx;
+					width: 172rpx;
+					height: 160rpx;
+				}
+			}
+
+			.nocancel {
 				font-size: 32rpx;
-				color: #605128;
+				color: #333333;
+				margin-top: 14rpx;
 			}
 
-			.comfirm {
-				margin-left: 32rpx;
+			.comfirm-box {
+				margin-top: 52rpx;
 				display: flex;
-				align-items: center;
-				justify-content: center;
-				width: 197rpx;
-				height: 74rpx;
-				background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
-				border-radius: 38px;
-				font-size: 32rpx;
-				color: #605128;
+				// margin-bottom: 32rpx;
+
+				// justify-content: space-around;
+				.cancel {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					width: 197rpx;
+					height: 74rpx;
+					border: 1px solid #dcc786;
+					border-radius: 38rpx;
+
+					font-size: 32rpx;
+					color: #605128;
+				}
+
+				.comfirm {
+					margin-left: 32rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					width: 197rpx;
+					height: 74rpx;
+					background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
+					border-radius: 38px;
+					font-size: 32rpx;
+					color: #605128;
+				}
 			}
 		}
 	}
-}
-.outlogin {
-	margin: 40rpx auto;
-	width: 500rpx;
-	background-color: #fff;
-	color: #ff4c4b;
-	border: 1px solid #ff4c4b;
-	text-align: center;
-	padding: 10rpx 0rpx;
-	border-radius: 50rpx;
-}
+
+	.outlogin {
+		margin: 40rpx auto;
+		width: 500rpx;
+		background-color: #fff;
+		color: #ff4c4b;
+		border: 1px solid #ff4c4b;
+		text-align: center;
+		padding: 10rpx 0rpx;
+		border-radius: 50rpx;
+	}
 </style>

pages/user/yuezz.vue

@@ -0,0 +1,279 @@
+<template>
+ 	<view class="content">
+ 		<view class="content-money">
+ 			<view class="flex">
+ 				<view class="buttom">
+ 					<view class="icon">{{ userInfo.now_money | getMoneyStyle }}</view>
+ 					<text class="text">可转金额</text>
+ 				</view>
+ 			</view>
+ 		</view>
+ 		<view class="name" v-if="name != ''">
+ 			用户昵称：{{name}}
+ 		</view>
+		<view class="item-wrap" style="padding: 0 20rpx;background-color: #fff;">
+			<u-form ref="uForm" class="item">
+				<u-form-item label-width='150' label="用户编号"><u-input type="text" v-model="card" @blur="userName"/></u-form-item>
+				<u-form-item label-width='150' label="支付密码"><u-input type="password" v-model="password" /></u-form-item>
+			</u-form>
+		</view>
+ 		
+ 		<view class="row-box">
+ 			<view class="title">转账金额</view>
+ 			<view class="row">
+ 				<text class="tit">￥</text>
+ 				<input class="input" type="number" v-model="withdrawal" placeholder='转入金额' placeholder-class="placeholder" />
+ 				<view class="buttom" @click="withdrawal = userInfo.now_money">全部转账</view>
+ 			</view>
+ 		</view>
+ 		
+ 		<button class="add-btn up" :class="{'action':loding}" @click="!loding?confirm():''">转入</button>
+ 	</view>
+ </template>
+ 
+ <script>
+ import { getMoneyStyle } from '@/utils/rocessor.js';
+ import { getUserInfo,transfer,nickname } from '@/api/user.js';
+ import { mapMutations,mapState } from 'vuex';
+ export default {
+ 	filters: {
+ 		getMoneyStyle
+ 	},
+ 	data() {
+ 		return {
+ 			money: '0.00', //可提现金额
+ 			withdrawal: '', //提现金额
+ 			password:'',//支付密码
+ 			card:'',//转账卡号
+ 			name:'',
+ 			// #ifdef H5
+ 			weichatBsrowser: false,
+ 			// #endif
+ 			loding:false,
+ 		};
+ 	},
+ 	onLoad(options) {
+ 		// #ifdef H5
+ 		this.weichatBsrowser = uni.getStorageSync('weichatBrowser');
+ 		// #endif
+ 		this.dataUp();
+ 	},
+ 	computed: {
+ 		...mapState('user', ['userInfo']) 
+ 	},
+ 	methods: {
+ 		...mapMutations('user', ['setUserInfo', 'login']),
+ 		// 更新数据
+ 		dataUp(){
+ 			let obj = this;
+ 			getUserInfo({}).then((e) => {
+ 				obj.login();
+ 				// 保存返回用户数据
+ 				obj.setUserInfo(e.data);
+ 			}).catch((e) => {
+ 				console.log(e);
+ 			})
+ 		},
+ 		// 切换选中对象
+ 		tabRadio(e) {
+ 			this.type = e.detail.value;
+ 		},
+ 		userName() {
+ 			if(this.card != ''){
+ 				nickname({uid:this.card}).then(data => {
+ 					this.name = data.msg
+ 				}).catch(err => {
+					this.$api.msg('请确认用户编号是否正确')
+				})
+ 			}
+ 			console.log(this.card)
+ 		},
+ 		// 提交
+ 		confirm() {
+ 			let obj = this;
+ 			obj.loding = true;
+ 			if(obj.withdrawal == 0){
+ 				obj.loding = false;
+ 				uni.showModal({
+ 					title:"提示",
+ 					content:"转账金额不要为0"
+ 				})
+ 				return;
+ 			}
+ 			if(obj.card == obj.userInfo.uid){
+ 				obj.loding = false;
+ 				uni.showModal({
+ 					title:"提示",
+ 					content:"不要输入自己的用户编号"
+ 				})
+ 			}else{
+ 				
+ 				let data = {
+ 					to_uid:obj.card, //编号
+ 					pass: obj.password, //交易密码
+ 					merber: obj.withdrawal //金额
+ 				}
+ 				transfer(data)
+ 					.then(e => {
+ 						// 允许按钮点击
+ 						obj.loding = false;
+ 						// 初始化提现金额
+ 						obj.withdrawal = ''
+ 						uni.showToast({
+ 							title: '提交成功',
+ 							duration: 2000,
+ 							position: 'top'
+ 						});
+ 						obj.dataUp();
+ 					})
+ 					.catch(e => {
+ 						obj.$api.msg(e.msg)
+ 						obj.loding = false;
+ 						console.log();
+ 					});
+ 			}
+ 			
+ 		}
+ 	}
+ };
+ </script>
+ 
+ <style lang="scss">
+ page {
+ 	height: 100%;
+ }
+ .content-money {
+ 	padding: 30rpx 0;
+ 	background: #ffffff;
+ }
+ 
+.item{
+ 	padding: 0 $page-row-spacing;
+ 	background-color: #FFFFFF;
+	
+ }
+ .flex {
+ 	background-color: #ffffff;
+ 	text-align: center;
+ 	margin: 0 30rpx;
+ 	border-radius: $border-radius-sm;
+ 	justify-content: center;
+ 	.buttom {
+ 		font-size: $font-lg;
+ 		width: 50%;
+ 	}
+ 	.interval {
+ 		width: 2px;
+ 		height: 60rpx;
+ 		background-color: #eeeeee;
+ 	}
+ 	.icon {
+ 		background-size: 100%;
+ 		font-size: 42rpx;
+ 		color: $font-color-dark;
+ 		font-weight: bold;
+ 		background-repeat: no-repeat;
+ 		background-position: center;
+ 	}
+ 	.text {
+ 		color: $font-color-light;
+ 	}
+ }
+ 
+ .row-box {
+ 	margin-top: 30rpx;
+ 	padding: 20rpx 30rpx;
+ 	background: #fff;
+ 	.title {
+ 		font-size: $font-base + 2rpx;
+ 		color: $font-color-dark;
+ 	}
+ 	.row {
+ 		display: flex;
+ 		align-items: center;
+ 		position: relative;
+ 		height: 80rpx;
+ 		.tit {
+ 			flex-shrink: 0;
+ 			width: 40rpx;
+ 			font-size: 30rpx;
+ 			color: $font-color-dark;
+ 		}
+ 		.input {
+ 			flex: 1;
+ 			font-size: 30rpx;
+ 			color: $font-color-dark;
+ 		}
+ 		.iconlocation {
+ 			font-size: 36rpx;
+ 			color: $font-color-light;
+ 		}
+ 
+ 		.buttom {
+ 			color: $base-color;
+ 			font-size: $font-base;
+ 		}
+ 	}
+ }
+ .add-btn {
+ 	background: $base-color;
+ 	display: flex;
+ 	align-items: center;
+ 	justify-content: center;
+ 	width: 690rpx;
+ 	height: 80rpx;
+ 	margin: 0 auto;
+ 	margin-top: 30rpx;
+ 	font-size: $font-lg;
+ 	border-radius: 10rpx;
+ 	color: #fff;
+ 	// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
+ }
+ .name {
+ 	background: #fff;
+ 	padding: 30rpx;
+ }
+ .list {
+ 	padding-left: 30rpx;
+ 	margin-top: 30rpx;
+ 	background-color: #ffffff;
+ 	.box {
+ 		display: flex;
+ 		align-items: center;
+ 		width: 100%;
+ 		height: 120rpx;
+ 		border-bottom: 1px solid $border-color-light;
+ 		.icon {
+ 			font-size: 48rpx;
+ 			padding-right: 20rpx;
+ 			.icon-img {
+ 				height: 50rpx;
+ 				width: 50rpx;
+ 			}
+ 		}
+ 		.iconweixin1 {
+ 			color: #18bf16;
+ 		}
+ 		.iconzhifubao {
+ 			color: #08aaec;
+ 		}
+ 		.title-box {
+ 			flex-grow: 1;
+ 			text-align: left;
+ 			.title {
+ 				font-size: $font-base + 2rpx;
+ 				color: $font-color-base;
+ 			}
+ 			.node {
+ 				font-size: $font-sm;
+ 				color: $font-color-light;
+ 			}
+ 		}
+ 	}
+ }
+ /deep/ .uni-radio-input {
+ 	width: 45rpx;
+ 	height: 45rpx;
+ }
+ </style>
+ 

pages/user/zzjl.vue

@@ -0,0 +1,230 @@
+<template>
+	<view class="content">
+		<view class="navbar">
+			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
+		</view>
+		<swiper :style="{'height':height}" :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
+			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
+				<scroll-view :style="{'height':height}" class="list-scroll-content" scroll-y @scrolltolower="loadData">
+					<!-- 空白页 -->
+					<view class="emptyBox" v-if="tabItem.loaded === true && tabItem.orderList.length === 0"><empty ></empty></view>
+
+					<!-- 订单列表 -->
+					<view class="box" v-for="(item, index) in tabItem.orderList" :key="index" >
+						<view class="i-top b-b flex">
+							<view class="time">订单编号：{{ item.order_id }}</view>
+						</view>
+						<view class="order-item flex">
+							<view class="title-box">
+								<view class="title" v-if="tabCurrentIndex == 0">
+									<text>转给{{'“' + item.to_user + '”' }}</text>
+								</view>
+								<view class="title" v-if="tabCurrentIndex == 1">
+									<text>{{'“' + item.to_user + '”'}}转入</text>
+								</view>
+								<view class="time">
+									<text>{{ item._add_time }}</text>
+								</view>
+							</view>
+							<view class="money">
+								<text>{{ item.money }}</text>
+							</view>
+						</view>
+						
+					</view>
+					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+import empty from '@/components/empty';
+import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
+import { zhuanList } from '@/api/wallet.js';
+export default {
+	components: {
+		empty,
+		uniLoadMore
+	},
+	data() {
+		return {
+			height:'',
+			tabCurrentIndex: 0,
+			navList: [
+				{
+					state: 0,
+					text: '转出',
+					loadingType: 'more',
+					orderList: [],
+					page: 1, //当前页数
+					limit: 10 //每次信息条数
+				},
+				{
+					state: 1,
+					text: '转入',
+					loadingType: 'more',
+					orderList: [],
+					page: 1, //当前页数
+					limit: 10 //每次信息条数
+				}
+			]
+		};
+	},
+	onLoad(options) {},
+	onShow() {
+		this.loadData();
+	},
+	onReady(res) {
+		var obj = this;
+		uni.getSystemInfo({
+			success: resu => {
+				const query = uni.createSelectorQuery();
+				query.select('.swiper-box').boundingClientRect();
+				query.exec(function(res) {
+					console.log(res, 'ddddddddddddd');
+					obj.height = resu.windowHeight - res[0].top + 'px';
+					console.log('打印页面的剩余高度', obj.height);
+				});
+			},
+			fail: res => {}
+		});
+	},
+	methods: {
+		//获取收入支出信息
+		async loadData(source) {
+			//这里是将订单挂载到tab列表下
+			let index = this.tabCurrentIndex;
+			let navItem = this.navList[index];
+			let state = navItem.state;
+			if (source === 'tabChange' && navItem.loaded === true) {
+				//tab切换只有第一次需要加载数据
+				return;
+			}
+			if (navItem.loadingType === 'loading') {
+				//防止重复加载
+				return;
+			}
+			// 修改当前对象状态为加载中
+			navItem.loadingType = 'loading';
+
+			zhuanList({
+				page: navItem.page,
+				limit: navItem.limit,
+				pm: navItem.state
+			})
+				.then(({ data }) => {
+					console.log(data.data);
+					if (data.data.length > 0) {
+						navItem.orderList = navItem.orderList.concat(data.data);
+						console.log(navItem.orderList);
+						navItem.page++;
+					}
+					if (navItem.limit == data.length) {
+						//判断是否还有数据， 有改为 more， 没有改为noMore
+						navItem.loadingType = 'more';
+						return;
+					} else {
+						//判断是否还有数据， 有改为 more， 没有改为noMore
+						navItem.loadingType = 'noMore';
+					}
+					uni.hideLoading();
+					this.$set(navItem, 'loaded', true);
+				})
+				.catch(e => {
+					console.log(e);
+				});
+		},
+		//swiper 切换
+		changeTab(e) {
+			this.tabCurrentIndex = e.target.current;
+			this.loadData('tabChange');
+		},
+		//顶部tab点击
+		tabClick(index) {
+			this.tabCurrentIndex = index;
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+page,.center {
+	background: #f8f8f8;
+	height: 100%;
+}
+.emptyBox {
+	width: 100%;
+	height: 100%;
+}
+.navbar {
+	display: flex;
+	height: 40px;
+	padding: 0 5px;
+	background: #fff;
+	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
+	position: relative;
+	z-index: 10;
+	.nav-item {
+		flex: 1;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+		font-size: 15px;
+		color: $font-color-dark;
+		position: relative;
+		&.current {
+			color: #ff4c4c;
+			&:after {
+				content: '';
+				position: absolute;
+				left: 50%;
+				bottom: 0;
+				transform: translateX(-50%);
+				width: 44px;
+				height: 0;
+				border-bottom: 2px solid #ff4c4c;
+			}
+		}
+	}
+}
+.i-top {
+	background-color: #ffffff;
+	width: 100%;
+	height: 80rpx;
+	padding: 0 30rpx;
+	font-size: $font-base;
+	color: $font-color-dark;
+	position: relative;
+	margin-top: 20rpx;
+}
+.box {
+	background-color: #fff;
+	margin-top: 10rpx;
+}
+.swiper-box {
+	padding-top: 10rpx;
+	.order-item {
+		padding: 20rpx 30rpx;
+		line-height: 1.5;
+		.title-box {
+			.title {
+				font-size: $font-lg;
+				color: $font-color-base;
+			}
+			.time {
+				font-size: $font-base;
+				color: $font-color-light;
+			}
+		}
+		.money {
+			color: #fd5b23;
+			font-size: $font-lg;
+		}
+	}
+}
+
+</style>
+

store/index.js

@@ -8,7 +8,7 @@ Vue.use(Vuex)
 const store = new Vuex.Store({
 	state: {
 		// baseURL:"http://yrh.liuniu946.com",//'http://eb.shuibo.net',//请求地址配置 
-		baseURL:'http://xw.liuniu946.com',//请求地址配置 
+		baseURL:'https://ysg.liuniu946.com',//请求地址配置 
 		// baseURL:'http://www.zjxwcm.cn',
 		urlFile:'/index',//项目部署所在文件夹
 		userInfo: {}, //登录信息

uni.scss

@@ -1,3 +1,4 @@
+@import 'uview-ui/theme.scss';
 /* 页面左右间距 */
 $page-row-spacing: 30rpx;
 //页面基础颜色

utils/newRequest.js

@@ -1,7 +1,7 @@
 import store from '../store'
 let service = {
-	// baseURL: store.state.baseURL, // 请求头
-	baseURL: '', // 请求头
+	baseURL: store.state.baseURL, // 请求头
+	// baseURL: '', // 请求头
 	header: {
 		'Content-Type': "application/x-www-form-urlencoded"
 	},
@@ -52,8 +52,10 @@ let service = {
 			if (requestData.url.indexOf('http') > -1) {
 				url = requestData.url
 			} else {
+				console.log('静茹修改',service.baseURL ,requestData.url);
 				url = service.baseURL + requestData.url
 			}
+			console.log(url,'请求地址');
 			// 数据复制用于请求
 			uni.request({
 				url: url,

utils/wxAuthorized.js

@@ -9,7 +9,9 @@ import {
 } from './platform.js'
 import store from '../store';
 // 保存wx对象
-import weixinObj from "@/plugin/jweixin-module/index.js";
+	// #ifdef H5
+	import weixinObj from "@/plugin/jweixin-module/index.js";
+	// #endif
 // 保存分享数据
 let shareData = '';
 // 保存注册返回appId数据

utils/wxMinProgram.js

@@ -0,0 +1,33 @@
+import store from '../store';
+//微信登录
+/**
+ * @param {string} 当前页面地址信息
+ */
+export function loginWinxinMp() {
+	let pages = getCurrentPages();
+	// 获取跳转前页面
+	let page = pages[pages.length - 2];
+	let queryUrl = '';
+	for (let key in page.options) {
+		queryUrl += key + '=' + page.options[key] + "&";
+	}
+	// 获取当页面路由地址
+	let path ='/' + page.route + '?' + queryUrl;
+	// 保存跳转前页面
+	uni.setStorageSync('present', path);
+	return new Promise(function (resolve,reject) {
+		wx.login({
+			success(e) {
+				// uni.showModal({
+				// 	title:'zhi1',
+				// 	content:JSON.stringify(e)
+				// })
+				console.log(e);
+				resolve(e)
+			},
+			fill:function (e) {
+				reject(e);
+			}
+		})
+	})
+};

uview-ui/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 www.uviewui.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

uview-ui/README.md

@@ -0,0 +1,106 @@
+<p align="center">
+    <img alt="logo" src="https://uviewui.com/common/logo.png" width="120" height="120" style="margin-bottom: 10px;">
+</p>
+<h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">uView</h3>
+<h3 align="center">多平台快速开发的UI框架</h3>
+
+
+## 说明
+
+uView UI，是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水
+
+## 特性
+
+- 兼容安卓，iOS，微信小程序，H5，QQ小程序，百度小程序，支付宝小程序，头条小程序
+- 60+精选组件，功能丰富，多端兼容，让您快速集成，开箱即用
+- 众多贴心的JS利器，让您飞镖在手，召之即来，百步穿杨
+- 众多的常用页面和布局，让您专注逻辑，事半功倍
+- 详尽的文档支持，现代化的演示效果
+- 按需引入，精简打包体积
+
+
+## 安装
+
+```bash
+# npm方式安装
+npm i uview-ui
+```
+
+## 快速上手
+
+1. `main.js`引入uView库
+```js
+// main.js
+import uView from 'uview-ui';
+Vue.use(uView);
+```
+
+2. `App.vue`引入基础样式(注意style标签需声明scss属性支持)
+```css
+/* App.vue */
+<style lang="scss">
+@import "uview-ui/index.scss";
+</style>
+```
+
+3. `uni.scss`引入全局scss变量文件
+```css
+/* uni.scss */
+@import "uview-ui/theme.scss";
+```
+
+4. `pages.json`配置easycom规则(按需引入)
+
+```js
+// pages.json
+{
+	"easycom": {
+		// npm安装的方式不需要前面的"@/"，下载安装的方式需要"@/"
+		// npm安装方式
+		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
+		// 下载安装方式
+		// "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
+	},
+	// 此为本身已有的内容
+	"pages": [
+		// ......
+	]
+}
+```
+
+请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容 
+
+## 使用方法
+配置easycom规则后，自动按需引入，无需`import`组件，直接引用即可。
+
+```html
+<template>
+	<u-button>按钮</u-button>
+</template>
+```
+
+请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容 
+
+## 链接
+
+- [官方文档](https://uviewui.com/)
+- [更新日志](https://uviewui.com/components/changelog.html)
+- [升级指南](https://uviewui.com/components/changelog.html)
+- [关于我们](https://uviewui.com/cooperation/about.html)
+
+## 预览
+
+您可以通过**微信**扫码，查看最佳的演示效果。
+<br>
+<br>
+<img src="https://uviewui.com/common/weixin_mini_qrcode.png" width="220" height="220" >
+
+<!-- ## 捐赠uView的研发
+
+uView文档和源码全部开源免费，如果您认为uView帮到了您的开发工作，您可以捐赠uView的研发工作，捐赠无门槛，哪怕是一杯可乐也好(相信这比打赏主播更有意义)。
+
+<img src="https://uviewui.com/common/wechat.png" width="220" >
+<img style="margin-left: 100px;" src="https://uviewui.com/common/alipay.png" width="220" >
+ -->
+## 版权信息
+uView遵循[MIT](https://en.wikipedia.org/wiki/MIT_License)开源协议，意味着您无需支付任何费用，也无需授权，即可将uView应用到您的产品中。

uview-ui/components/u-action-sheet/u-action-sheet.vue

@@ -0,0 +1,190 @@
+<template>
+	<u-popup mode="bottom" :border-radius="borderRadius" :popup="false" v-model="value" :maskCloseAble="maskCloseAble"
+	    length="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="popupClose" :z-index="uZIndex">
+		<view class="u-tips u-border-bottom" v-if="tips.text" :style="[tipsStyle]">
+			{{tips.text}}
+		</view>
+		<block v-for="(item, index) in list" :key="index">
+			<view 
+				@touchmove.stop.prevent 
+				@tap="itemClick(index)" 
+				:style="[itemStyle(index)]" 
+				class="u-action-sheet-item u-line-1" 
+				:class="[index < list.length - 1 ? 'u-border-bottom' : '']"
+				:hover-stay-time="150"
+			>
+				<text>{{item.text}}</text>
+				<text class="u-action-sheet-item__subtext u-line-1" v-if="item.subText">{{item.subText}}</text>
+			</view>
+		</block>
+		<view class="u-gab" v-if="cancelBtn">
+		</view>
+		<view @touchmove.stop.prevent class="u-actionsheet-cancel u-action-sheet-item" hover-class="u-hover-class"
+		    :hover-stay-time="150" v-if="cancelBtn" @tap="close">{{cancelText}}</view>
+	</u-popup>
+</template>
+
+<script>
+	/**
+	 * actionSheet 操作菜单
+	 * @description 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
+	 * @tutorial https://www.uviewui.com/components/actionSheet.html
+	 * @property {Array<Object>} list 按钮的文字数组，见官方文档示例
+	 * @property {Object} tips 顶部的提示文字，见官方文档示例
+	 * @property {String} cancel-text 取消按钮的提示文字
+	 * @property {Boolean} cancel-btn 是否显示底部的取消按钮（默认true）
+	 * @property {Number String} border-radius 弹出部分顶部左右的圆角值，单位rpx（默认0）
+	 * @property {Boolean} mask-close-able 点击遮罩是否可以关闭（默认true）
+	 * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
+	 * @property {Number String} z-index z-index值（默认1075）
+	 * @property {String} cancel-text 取消按钮的提示文字
+	 * @event {Function} click 点击ActionSheet列表项时触发
+	 * @event {Function} close 点击取消按钮时触发
+	 * @example <u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
+	 */
+	export default {
+		name: "u-action-sheet",
+		props: {
+			// 点击遮罩是否可以关闭actionsheet
+			maskCloseAble: {
+				type: Boolean,
+				default: true
+			},
+			// 按钮的文字数组，可以自定义颜色和字体大小，字体单位为rpx
+			list: {
+				type: Array,
+				default () {
+					// 如下
+					// return [{
+					// 	text: '确定',
+					// 	color: '',
+					// 	fontSize: ''
+					// }]
+					return [];
+				}
+			},
+			// 顶部的提示文字
+			tips: {
+				type: Object,
+				default () {
+					return {
+						text: '',
+						color: '',
+						fontSize: '26'
+					}
+				}
+			},
+			// 底部的取消按钮
+			cancelBtn: {
+				type: Boolean,
+				default: true
+			},
+			// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
+			safeAreaInsetBottom: {
+				type: Boolean,
+				default: false
+			},
+			// 通过双向绑定控制组件的弹出与收起
+			value: {
+				type: Boolean,
+				default: false
+			},
+			// 弹出的顶部圆角值
+			borderRadius: {
+				type: [String, Number],
+				default: 0
+			},
+			// 弹出的z-index值
+			zIndex: {
+				type: [String, Number],
+				default: 0
+			},
+			// 取消按钮的文字提示
+			cancelText: {
+				type: String,
+				default: '取消'
+			}
+		},
+		computed: {
+			// 顶部提示的样式
+			tipsStyle() {
+				let style = {};
+				if (this.tips.color) style.color = this.tips.color;
+				if (this.tips.fontSize) style.fontSize = this.tips.fontSize + 'rpx';
+				return style;
+			},
+			// 操作项目的样式
+			itemStyle() {
+				return (index) => {
+					let style = {};
+					if (this.list[index].color) style.color = this.list[index].color;
+					if (this.list[index].fontSize) style.fontSize = this.list[index].fontSize + 'rpx';
+					// 选项被禁用的样式
+					if (this.list[index].disabled) style.color = '#c0c4cc';
+					return style;
+				}
+			},
+			uZIndex() {
+				// 如果用户有传递z-index值，优先使用
+				return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
+			}
+		},
+		methods: {
+			// 点击取消按钮
+			close() {
+				// 发送input事件，并不会作用于父组件，而是要设置组件内部通过props传递的value参数
+				// 这是一个vue发送事件的特殊用法
+				this.popupClose();
+				this.$emit('close');
+			},
+			// 弹窗关闭
+			popupClose() {
+				this.$emit('input', false);
+			},
+			// 点击某一个item
+			itemClick(index) {
+				// disabled的项禁止点击
+				if(this.list[index].disabled) return;
+				this.$emit('click', index);
+				this.$emit('input', false);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+
+	.u-tips {
+		font-size: 26rpx;
+		text-align: center;
+		padding: 34rpx 0;
+		line-height: 1;
+		color: $u-tips-color;
+	}
+
+	.u-action-sheet-item {
+		@include vue-flex;;
+		line-height: 1;
+		justify-content: center;
+		align-items: center;
+		font-size: 32rpx;
+		padding: 34rpx 0;
+		flex-direction: column;
+	}
+	
+	.u-action-sheet-item__subtext {
+		font-size: 24rpx;
+		color: $u-tips-color;
+		margin-top: 20rpx;
+	}
+
+	.u-gab {
+		height: 12rpx;
+		background-color: rgb(234, 234, 236);
+	}
+
+	.u-actionsheet-cancel {
+		color: $u-main-color;
+	}
+</style>

uview-ui/components/u-alert-tips/u-alert-tips.vue

@@ -0,0 +1,256 @@
+<template>
+	<view class="u-alert-tips" v-if="show" :class="[
+		!show ? 'u-close-alert-tips': '',
+		type ? 'u-alert-tips--bg--' + type + '-light' : '',
+		type ? 'u-alert-tips--border--' + type + '-disabled' : '',
+	]" :style="{
+		backgroundColor: bgColor,
+		borderColor: borderColor
+	}">
+		<view class="u-icon-wrap">
+			<u-icon v-if="showIcon" :name="uIcon" :size="description ? 40 : 32" class="u-icon" :color="uIconType" :custom-style="iconStyle"></u-icon>
+		</view>
+		<view class="u-alert-content" @tap.stop="click">
+			<view class="u-alert-title" :style="[uTitleStyle]">
+				{{title}}
+			</view>
+			<view v-if="description" class="u-alert-desc" :style="[descStyle]">
+				{{description}}
+			</view>
+		</view>
+		<view class="u-icon-wrap">
+			<u-icon @click="close" v-if="closeAble && !closeText" hoverClass="u-type-error-hover-color" name="close" color="#c0c4cc"
+			 :size="22" class="u-close-icon" :style="{
+				top: description ? '18rpx' : '24rpx'
+			}"></u-icon>
+		</view>
+		<text v-if="closeAble && closeText" class="u-close-text" :style="{
+			top: description ? '18rpx' : '24rpx'
+		}">{{closeText}}</text>
+	</view>
+</template>
+
+<script>
+	/**
+	 * alertTips 警告提示
+	 * @description 警告提示，展现需要关注的信息
+	 * @tutorial https://uviewui.com/components/alertTips.html
+	 * @property {String} title 显示的标题文字
+	 * @property {String} description 辅助性文字，颜色比title浅一点，字号也小一点，可选
+	 * @property {String} type 关闭按钮(默认为叉号icon图标)
+	 * @property {String} icon 图标名称
+	 * @property {Object} icon-style 图标的样式，对象形式
+	 * @property {Object} title-style 标题的样式，对象形式
+	 * @property {Object} desc-style 描述的样式，对象形式
+	 * @property {String} close-able 用文字替代关闭图标，close-able为true时有效
+	 * @property {Boolean} show-icon 是否显示左边的辅助图标
+	 * @property {Boolean} show 显示或隐藏组件
+	 * @event {Function} click 点击组件时触发
+	 * @event {Function} close 点击关闭按钮时触发
+	 */
+	export default {
+		name: 'u-alert-tips',
+		props: {
+			// 显示文字
+			title: {
+				type: String,
+				default: ''
+			},
+			// 主题，success/warning/info/error
+			type: {
+				type: String,
+				default: 'warning'
+			},
+			// 辅助性文字
+			description: {
+				type: String,
+				default: ''
+			},
+			// 是否可关闭
+			closeAble: {
+				type: Boolean,
+				default: false
+			},
+			// 关闭按钮自定义文本
+			closeText: {
+				type: String,
+				default: ''
+			},
+			// 是否显示图标
+			showIcon: {
+				type: Boolean,
+				default: false
+			},
+			// 文字颜色，如果定义了color值，icon会失效
+			color: {
+				type: String,
+				default: ''
+			},
+			// 背景颜色
+			bgColor: {
+				type: String,
+				default: ''
+			},
+			// 边框颜色
+			borderColor: {
+				type: String,
+				default: ''
+			},
+			// 是否显示
+			show: {
+				type: Boolean,
+				default: true
+			},
+			// 左边显示的icon
+			icon: {
+				type: String,
+				default: ''
+			},
+			// icon的样式
+			iconStyle: {
+				type: Object,
+				default() {
+					return {}
+				}
+			},
+			// 标题的样式
+			titleStyle: {
+				type: Object,
+				default() {
+					return {}
+				}
+			},
+			// 描述文字的样式
+			descStyle: {
+				type: Object,
+				default() {
+					return {}
+				}
+			},
+		},
+		data() {
+			return {
+			}
+		},
+		computed: {
+			uTitleStyle() {
+				let style = {};
+				// 如果有描述文字的话，标题进行加粗
+				style.fontWeight = this.description ? 500 : 'normal';
+				// 将用户传入样式对象和style合并，传入的优先级比style高，同属性会被覆盖
+				return this.$u.deepMerge(style, this.titleStyle);
+			},
+			uIcon() {
+				// 如果有设置icon名称就使用，否则根据type主题，推定一个默认的图标
+				return this.icon ? this.icon : this.$u.type2icon(this.type);
+			},
+			uIconType() {
+				// 如果有设置图标的样式，优先使用，没有的话，则用type的样式
+				return Object.keys(this.iconStyle).length ? '' : this.type;
+			}
+		},
+		methods: {
+			// 点击内容
+			click() {
+				this.$emit('click');
+			},
+			// 点击关闭按钮
+			close() {
+				this.$emit('close');
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-alert-tips {
+		@include vue-flex;
+		align-items: center;
+		padding: 16rpx 30rpx;
+		border-radius: 8rpx;
+		position: relative;
+		transition: all 0.3s linear;
+		border: 1px solid #fff;
+		
+		&--bg--primary-light {
+			background-color: $u-type-primary-light;
+		}
+		
+		&--bg--info-light {
+			background-color: $u-type-info-light;
+		}
+		
+		&--bg--success-light {
+			background-color: $u-type-success-light;
+		}
+		
+		&--bg--warning-light {
+			background-color: $u-type-warning-light;
+		}
+		
+		&--bg--error-light {
+			background-color: $u-type-error-light;
+		}
+		
+		&--border--primary-disabled {
+			border-color: $u-type-primary-disabled;
+		}
+		
+		&--border--success-disabled {
+			border-color: $u-type-success-disabled;
+		}
+		
+		&--border--error-disabled {
+			border-color: $u-type-error-disabled;
+		}
+		
+		&--border--warning-disabled {
+			border-color: $u-type-warning-disabled;
+		}
+		
+		&--border--info-disabled {
+			border-color: $u-type-info-disabled;
+		}
+	}
+
+	.u-close-alert-tips {
+		opacity: 0;
+		visibility: hidden;
+	}
+
+	.u-icon {
+		margin-right: 16rpx;
+	}
+
+	.u-alert-title {
+		font-size: 28rpx;
+		color: $u-main-color;
+	}
+
+	.u-alert-desc {
+		font-size: 26rpx;
+		text-align: left;
+		color: $u-content-color;
+	}
+
+	.u-close-icon {
+		position: absolute;
+		top: 20rpx;
+		right: 20rpx;
+	}
+
+	.u-close-hover {
+		color: red;
+	}
+	
+	.u-close-text {
+		font-size: 24rpx;
+		color: $u-tips-color;
+		position: absolute;
+		top: 20rpx;
+		right: 20rpx;
+		line-height: 1;
+	}
+</style>

uview-ui/components/u-avatar-cropper/u-avatar-cropper.vue

@@ -0,0 +1,290 @@
+<template>
+	<view class="content">
+		<view class="cropper-wrapper" :style="{ height: cropperOpt.height + 'px' }">
+			<canvas
+				class="cropper"
+				:disable-scroll="true"
+				@touchstart="touchStart"
+				@touchmove="touchMove"
+				@touchend="touchEnd"
+				:style="{ width: cropperOpt.width, height: cropperOpt.height, backgroundColor: 'rgba(0, 0, 0, 0.8)' }"
+				canvas-id="cropper"
+				id="cropper"
+			></canvas>
+			<canvas
+				class="cropper"
+				:disable-scroll="true"
+				:style="{
+					position: 'fixed',
+					top: `-${cropperOpt.width * cropperOpt.pixelRatio}px`,
+					left: `-${cropperOpt.height * cropperOpt.pixelRatio}px`,
+					width: `${cropperOpt.width * cropperOpt.pixelRatio}px`,
+					height: `${cropperOpt.height * cropperOpt.pixelRatio}`
+				}"
+				canvas-id="targetId"
+				id="targetId"
+			></canvas>
+		</view>
+		<view class="cropper-buttons safe-area-padding" :style="{ height: bottomNavHeight + 'px' }">
+			<!-- #ifdef H5 -->
+			<view class="upload" @tap="uploadTap">选择图片</view>
+			<!-- #endif -->
+			<!-- #ifndef H5 -->
+			<view class="upload" @tap="uploadTap">重新选择</view>
+			<!-- #endif -->
+			<view class="getCropperImage" @tap="getCropperImage(false)">确定</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import WeCropper from './weCropper.js';
+export default {
+	props: {
+		// 裁剪矩形框的样式，其中可包含的属性为lineWidth-边框宽度(单位rpx)，color: 边框颜色，
+		// mask-遮罩颜色，一般设置为一个rgba的透明度，如"rgba(0, 0, 0, 0.35)"
+		boundStyle: {
+			type: Object,
+			default() {
+				return {
+					lineWidth: 4,
+					borderColor: 'rgb(245, 245, 245)',
+					mask: 'rgba(0, 0, 0, 0.35)'
+				};
+			}
+		}
+		// // 裁剪框宽度，单位rpx
+		// rectWidth: {
+		// 	type: [String, Number],
+		// 	default: 400
+		// },
+		// // 裁剪框高度，单位rpx
+		// rectHeight: {
+		// 	type: [String, Number],
+		// 	default: 400
+		// },
+		// // 输出图片宽度，单位rpx
+		// destWidth: {
+		// 	type: [String, Number],
+		// 	default: 400
+		// },
+		// // 输出图片高度，单位rpx
+		// destHeight: {
+		// 	type: [String, Number],
+		// 	default: 400
+		// },
+		// // 输出的图片类型，如果发现裁剪的图片很大，可能是因为设置为了"png"，改成"jpg"即可
+		// fileType: {
+		// 	type: String,
+		// 	default: 'jpg',
+		// },
+		// // 生成的图片质量
+		// // H5上无效，目前不考虑使用此参数
+		// quality: {
+		// 	type: [Number, String],
+		// 	default: 1
+		// }
+	},
+	data() {
+		return {
+			// 底部导航的高度
+			bottomNavHeight: 50,
+			originWidth: 200,
+			width: 0,
+			height: 0,
+			cropperOpt: {
+				id: 'cropper',
+				targetId: 'targetCropper',
+				pixelRatio: 1,
+				width: 0,
+				height: 0,
+				scale: 2.5,
+				zoom: 8,
+				cut: {
+					x: (this.width - this.originWidth) / 2,
+					y: (this.height - this.originWidth) / 2,
+					width: this.originWidth,
+					height: this.originWidth
+				},
+				boundStyle: {
+					lineWidth: uni.upx2px(this.boundStyle.lineWidth),
+					mask: this.boundStyle.mask,
+					color: this.boundStyle.borderColor
+				}
+			},
+			// 裁剪框和输出图片的尺寸，高度默认等于宽度
+			// 输出图片宽度，单位px
+			destWidth: 200,
+			// 裁剪框宽度，单位px
+			rectWidth: 200,
+			// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
+			fileType: 'jpg',
+			src: '', // 选择的图片路径，用于在点击确定时，判断是否选择了图片
+		};
+	},
+	onLoad(option) {
+		let rectInfo = uni.getSystemInfoSync();
+		this.width = rectInfo.windowWidth;
+		this.height = rectInfo.windowHeight - this.bottomNavHeight;
+		this.cropperOpt.width = this.width;
+		this.cropperOpt.height = this.height;
+		this.cropperOpt.pixelRatio = rectInfo.pixelRatio;
+
+		if (option.destWidth) this.destWidth = option.destWidth;
+		if (option.rectWidth) {
+			let rectWidth = Number(option.rectWidth);
+			this.cropperOpt.cut = {
+				x: (this.width - rectWidth) / 2,
+				y: (this.height - rectWidth) / 2,
+				width: rectWidth,
+				height: rectWidth
+			};
+		}
+		this.rectWidth = option.rectWidth;
+		if (option.fileType) this.fileType = option.fileType;
+		// 初始化
+		this.cropper = new WeCropper(this.cropperOpt)
+			.on('ready', ctx => {
+				// wecropper is ready for work!
+			})
+			.on('beforeImageLoad', ctx => {
+				// before picture loaded, i can do something
+			})
+			.on('imageLoad', ctx => {
+				// picture loaded
+			})
+			.on('beforeDraw', (ctx, instance) => {
+				// before canvas draw,i can do something
+			});
+		// 设置导航栏样式，以免用户在page.json中没有设置为黑色背景
+		uni.setNavigationBarColor({
+			frontColor: '#ffffff',
+			backgroundColor: '#000000'
+		});
+		uni.chooseImage({
+			count: 1, // 默认9
+			sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
+			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+			success: res => {
+				this.src = res.tempFilePaths[0];
+				//  获取裁剪图片资源后，给data添加src属性及其值
+				this.cropper.pushOrign(this.src);
+			}
+		});
+	},
+	methods: {
+		touchStart(e) {
+			this.cropper.touchStart(e);
+		},
+		touchMove(e) {
+			this.cropper.touchMove(e);
+		},
+		touchEnd(e) {
+			this.cropper.touchEnd(e);
+		},
+		getCropperImage(isPre = false) {
+			if(!this.src) return this.$u.toast('请先选择图片再裁剪');
+
+			let cropper_opt = {
+				destHeight: Number(this.destWidth), // uni.canvasToTempFilePath要求这些参数为数值
+				destWidth: Number(this.destWidth),
+				fileType: this.fileType
+			};
+			this.cropper.getCropperImage(cropper_opt, (path, err) => {
+				if (err) {
+					uni.showModal({
+						title: '温馨提示',
+						content: err.message
+					});
+				} else {
+					if (isPre) {
+						uni.previewImage({
+							current: '', // 当前显示图片的 http 链接
+							urls: [path] // 需要预览的图片 http 链接列表
+						});
+					} else {
+						uni.$emit('uAvatarCropper', path);
+						this.$u.route({
+							type: 'back'
+						});
+					}
+				}
+			});
+		},
+		uploadTap() {
+			const self = this;
+			uni.chooseImage({
+				count: 1, // 默认9
+				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
+				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+				success: (res) => {
+					self.src = res.tempFilePaths[0];
+					//  获取裁剪图片资源后，给data添加src属性及其值
+
+					self.cropper.pushOrign(this.src);
+				}
+			});
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.content {
+	background: rgba(255, 255, 255, 1);
+}
+
+.cropper {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 11;
+}
+
+.cropper-buttons {
+	background-color: #000000;
+	color: #eee;
+}
+
+.cropper-wrapper {
+	position: relative;
+	@include vue-flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	width: 100%;
+	background-color: #000;
+}
+
+.cropper-buttons {
+	width: 100vw;
+	@include vue-flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	font-size: 28rpx;
+}
+
+.cropper-buttons .upload,
+.cropper-buttons .getCropperImage {
+	width: 50%;
+	text-align: center;
+}
+
+.cropper-buttons .upload {
+	text-align: left;
+	padding-left: 50rpx;
+}
+
+.cropper-buttons .getCropperImage {
+	text-align: right;
+	padding-right: 50rpx;
+}
+</style>

uview-ui/components/u-avatar-cropper/weCropper.js

@@ -0,0 +1,1265 @@
+/**
+ * we-cropper v1.3.9
+ * (c) 2020 dlhandsome
+ * @license MIT
+ */
+(function(global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+		typeof define === 'function' && define.amd ? define(factory) :
+		(global.WeCropper = factory());
+}(this, (function() {
+	'use strict';
+
+	var device = void 0;
+	var TOUCH_STATE = ['touchstarted', 'touchmoved', 'touchended'];
+
+	function firstLetterUpper(str) {
+		return str.charAt(0).toUpperCase() + str.slice(1)
+	}
+
+	function setTouchState(instance) {
+		var arg = [],
+			len = arguments.length - 1;
+		while (len-- > 0) arg[len] = arguments[len + 1];
+
+		TOUCH_STATE.forEach(function(key, i) {
+			if (arg[i] !== undefined) {
+				instance[key] = arg[i];
+			}
+		});
+	}
+
+	function validator(instance, o) {
+		Object.defineProperties(instance, o);
+	}
+
+	function getDevice() {
+		if (!device) {
+			device = uni.getSystemInfoSync();
+		}
+		return device
+	}
+
+	var tmp = {};
+
+	var ref = getDevice();
+	var pixelRatio = ref.pixelRatio;
+
+	var DEFAULT = {
+		id: {
+			default: 'cropper',
+			get: function get() {
+				return tmp.id
+			},
+			set: function set(value) {
+				if (typeof(value) !== 'string') {
+					console.error(("id：" + value + " is invalid"));
+				}
+				tmp.id = value;
+			}
+		},
+		width: {
+			default: 750,
+			get: function get() {
+				return tmp.width
+			},
+			set: function set(value) {
+				if (typeof(value) !== 'number') {
+					console.error(("width：" + value + " is invalid"));
+				}
+				tmp.width = value;
+			}
+		},
+		height: {
+			default: 750,
+			get: function get() {
+				return tmp.height
+			},
+			set: function set(value) {
+				if (typeof(value) !== 'number') {
+					console.error(("height：" + value + " is invalid"));
+				}
+				tmp.height = value;
+			}
+		},
+		pixelRatio: {
+			default: pixelRatio,
+			get: function get() {
+				return tmp.pixelRatio
+			},
+			set: function set(value) {
+				if (typeof(value) !== 'number') {
+					console.error(("pixelRatio：" + value + " is invalid"));
+				}
+				tmp.pixelRatio = value;
+			}
+		},
+		scale: {
+			default: 2.5,
+			get: function get() {
+				return tmp.scale
+			},
+			set: function set(value) {
+				if (typeof(value) !== 'number') {
+					console.error(("scale：" + value + " is invalid"));
+				}
+				tmp.scale = value;
+			}
+		},
+		zoom: {
+			default: 5,
+			get: function get() {
+				return tmp.zoom
+			},
+			set: function set(value) {
+				if (typeof(value) !== 'number') {
+					console.error(("zoom：" + value + " is invalid"));
+				} else if (value < 0 || value > 10) {
+					console.error("zoom should be ranged in 0 ~ 10");
+				}
+				tmp.zoom = value;
+			}
+		},
+		src: {
+			default: '',
+			get: function get() {
+				return tmp.src
+			},
+			set: function set(value) {
+				if (typeof(value) !== 'string') {
+					console.error(("src：" + value + " is invalid"));
+				}
+				tmp.src = value;
+			}
+		},
+		cut: {
+			default: {},
+			get: function get() {
+				return tmp.cut
+			},
+			set: function set(value) {
+				if (typeof(value) !== 'object') {
+					console.error(("cut：" + value + " is invalid"));
+				}
+				tmp.cut = value;
+			}
+		},
+		boundStyle: {
+			default: {},
+			get: function get() {
+				return tmp.boundStyle
+			},
+			set: function set(value) {
+				if (typeof(value) !== 'object') {
+					console.error(("boundStyle：" + value + " is invalid"));
+				}
+				tmp.boundStyle = value;
+			}
+		},
+		onReady: {
+			default: null,
+			get: function get() {
+				return tmp.ready
+			},
+			set: function set(value) {
+				tmp.ready = value;
+			}
+		},
+		onBeforeImageLoad: {
+			default: null,
+			get: function get() {
+				return tmp.beforeImageLoad
+			},
+			set: function set(value) {
+				tmp.beforeImageLoad = value;
+			}
+		},
+		onImageLoad: {
+			default: null,
+			get: function get() {
+				return tmp.imageLoad
+			},
+			set: function set(value) {
+				tmp.imageLoad = value;
+			}
+		},
+		onBeforeDraw: {
+			default: null,
+			get: function get() {
+				return tmp.beforeDraw
+			},
+			set: function set(value) {
+				tmp.beforeDraw = value;
+			}
+		}
+	};
+
+	var ref$1 = getDevice();
+	var windowWidth = ref$1.windowWidth;
+
+	function prepare() {
+		var self = this;
+
+		// v1.4.0 版本中将不再自动绑定we-cropper实例
+		self.attachPage = function() {
+			var pages = getCurrentPages();
+			// 获取到当前page上下文
+			var pageContext = pages[pages.length - 1];
+			// 把this依附在Page上下文的wecropper属性上，便于在page钩子函数中访问
+			Object.defineProperty(pageContext, 'wecropper', {
+				get: function get() {
+					console.warn(
+						'Instance will not be automatically bound to the page after v1.4.0\n\n' +
+						'Please use a custom instance name instead\n\n' +
+						'Example: \n' +
+						'this.mycropper = new WeCropper(options)\n\n' +
+						'// ...\n' +
+						'this.mycropper.getCropperImage()'
+					);
+					return self
+				},
+				configurable: true
+			});
+		};
+
+		self.createCtx = function() {
+			var id = self.id;
+			var targetId = self.targetId;
+
+			if (id) {
+				self.ctx = self.ctx || uni.createCanvasContext(id);
+				self.targetCtx = self.targetCtx || uni.createCanvasContext(targetId);
+			} else {
+				console.error("constructor: create canvas context failed, 'id' must be valuable");
+			}
+		};
+
+		self.deviceRadio = windowWidth / 750;
+	}
+
+	var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !==
+		'undefined' ? self : {};
+
+
+
+
+
+	function createCommonjsModule(fn, module) {
+		return module = {
+			exports: {}
+		}, fn(module, module.exports), module.exports;
+	}
+
+	var tools = createCommonjsModule(function(module, exports) {
+		/**
+		 * String type check
+		 */
+		exports.isStr = function(v) {
+			return typeof v === 'string';
+		};
+		/**
+		 * Number type check
+		 */
+		exports.isNum = function(v) {
+			return typeof v === 'number';
+		};
+		/**
+		 * Array type check
+		 */
+		exports.isArr = Array.isArray;
+		/**
+		 * undefined type check
+		 */
+		exports.isUndef = function(v) {
+			return v === undefined;
+		};
+
+		exports.isTrue = function(v) {
+			return v === true;
+		};
+
+		exports.isFalse = function(v) {
+			return v === false;
+		};
+		/**
+		 * Function type check
+		 */
+		exports.isFunc = function(v) {
+			return typeof v === 'function';
+		};
+		/**
+		 * Quick object check - this is primarily used to tell
+		 * Objects from primitive values when we know the value
+		 * is a JSON-compliant type.
+		 */
+		exports.isObj = exports.isObject = function(obj) {
+			return obj !== null && typeof obj === 'object'
+		};
+
+		/**
+		 * Strict object type check. Only returns true
+		 * for plain JavaScript objects.
+		 */
+		var _toString = Object.prototype.toString;
+		exports.isPlainObject = function(obj) {
+			return _toString.call(obj) === '[object Object]'
+		};
+
+		/**
+		 * Check whether the object has the property.
+		 */
+		var hasOwnProperty = Object.prototype.hasOwnProperty;
+		exports.hasOwn = function(obj, key) {
+			return hasOwnProperty.call(obj, key)
+		};
+
+		/**
+		 * Perform no operation.
+		 * Stubbing args to make Flow happy without leaving useless transpiled code
+		 * with ...rest (https://flow.org/blog/2017/05/07/Strict-Function-Call-Arity/)
+		 */
+		exports.noop = function(a, b, c) {};
+
+		/**
+		 * Check if val is a valid array index.
+		 */
+		exports.isValidArrayIndex = function(val) {
+			var n = parseFloat(String(val));
+			return n >= 0 && Math.floor(n) === n && isFinite(val)
+		};
+	});
+
+	var tools_7 = tools.isFunc;
+	var tools_10 = tools.isPlainObject;
+
+	var EVENT_TYPE = ['ready', 'beforeImageLoad', 'beforeDraw', 'imageLoad'];
+
+	function observer() {
+		var self = this;
+
+		self.on = function(event, fn) {
+			if (EVENT_TYPE.indexOf(event) > -1) {
+				if (tools_7(fn)) {
+					event === 'ready' ?
+						fn(self) :
+						self[("on" + (firstLetterUpper(event)))] = fn;
+				}
+			} else {
+				console.error(("event: " + event + " is invalid"));
+			}
+			return self
+		};
+	}
+
+	function wxPromise(fn) {
+		return function(obj) {
+			var args = [],
+				len = arguments.length - 1;
+			while (len-- > 0) args[len] = arguments[len + 1];
+
+			if (obj === void 0) obj = {};
+			return new Promise(function(resolve, reject) {
+				obj.success = function(res) {
+					resolve(res);
+				};
+				obj.fail = function(err) {
+					reject(err);
+				};
+				fn.apply(void 0, [obj].concat(args));
+			})
+		}
+	}
+
+	function draw(ctx, reserve) {
+		if (reserve === void 0) reserve = false;
+
+		return new Promise(function(resolve) {
+			ctx.draw(reserve, resolve);
+		})
+	}
+
+	var getImageInfo = wxPromise(uni.getImageInfo);
+
+	var canvasToTempFilePath = wxPromise(uni.canvasToTempFilePath);
+
+	var base64 = createCommonjsModule(function(module, exports) {
+		/*! http://mths.be/base64 v0.1.0 by @mathias | MIT license */
+		(function(root) {
+
+			// Detect free variables `exports`.
+			var freeExports = 'object' == 'object' && exports;
+
+			// Detect free variable `module`.
+			var freeModule = 'object' == 'object' && module &&
+				module.exports == freeExports && module;
+
+			// Detect free variable `global`, from Node.js or Browserified code, and use
+			// it as `root`.
+			var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal;
+			if (freeGlobal.global === freeGlobal || freeGlobal.window === freeGlobal) {
+				root = freeGlobal;
+			}
+
+			/*--------------------------------------------------------------------------*/
+
+			var InvalidCharacterError = function(message) {
+				this.message = message;
+			};
+			InvalidCharacterError.prototype = new Error;
+			InvalidCharacterError.prototype.name = 'InvalidCharacterError';
+
+			var error = function(message) {
+				// Note: the error messages used throughout this file match those used by
+				// the native `atob`/`btoa` implementation in Chromium.
+				throw new InvalidCharacterError(message);
+			};
+
+			var TABLE = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+			// http://whatwg.org/html/common-microsyntaxes.html#space-character
+			var REGEX_SPACE_CHARACTERS = /[\t\n\f\r ]/g;
+
+			// `decode` is designed to be fully compatible with `atob` as described in the
+			// HTML Standard. http://whatwg.org/html/webappapis.html#dom-windowbase64-atob
+			// The optimized base64-decoding algorithm used is based on @atk’s excellent
+			// implementation. https://gist.github.com/atk/1020396
+			var decode = function(input) {
+				input = String(input)
+					.replace(REGEX_SPACE_CHARACTERS, '');
+				var length = input.length;
+				if (length % 4 == 0) {
+					input = input.replace(/==?$/, '');
+					length = input.length;
+				}
+				if (
+					length % 4 == 1 ||
+					// http://whatwg.org/C#alphanumeric-ascii-characters
+					/[^+a-zA-Z0-9/]/.test(input)
+				) {
+					error(
+						'Invalid character: the string to be decoded is not correctly encoded.'
+					);
+				}
+				var bitCounter = 0;
+				var bitStorage;
+				var buffer;
+				var output = '';
+				var position = -1;
+				while (++position < length) {
+					buffer = TABLE.indexOf(input.charAt(position));
+					bitStorage = bitCounter % 4 ? bitStorage * 64 + buffer : buffer;
+					// Unless this is the first of a group of 4 characters…
+					if (bitCounter++ % 4) {
+						// …convert the first 8 bits to a single ASCII character.
+						output += String.fromCharCode(
+							0xFF & bitStorage >> (-2 * bitCounter & 6)
+						);
+					}
+				}
+				return output;
+			};
+
+			// `encode` is designed to be fully compatible with `btoa` as described in the
+			// HTML Standard: http://whatwg.org/html/webappapis.html#dom-windowbase64-btoa
+			var encode = function(input) {
+				input = String(input);
+				if (/[^\0-\xFF]/.test(input)) {
+					// Note: no need to special-case astral symbols here, as surrogates are
+					// matched, and the input is supposed to only contain ASCII anyway.
+					error(
+						'The string to be encoded contains characters outside of the ' +
+						'Latin1 range.'
+					);
+				}
+				var padding = input.length % 3;
+				var output = '';
+				var position = -1;
+				var a;
+				var b;
+				var c;
+				var buffer;
+				// Make sure any padding is handled outside of the loop.
+				var length = input.length - padding;
+
+				while (++position < length) {
+					// Read three bytes, i.e. 24 bits.
+					a = input.charCodeAt(position) << 16;
+					b = input.charCodeAt(++position) << 8;
+					c = input.charCodeAt(++position);
+					buffer = a + b + c;
+					// Turn the 24 bits into four chunks of 6 bits each, and append the
+					// matching character for each of them to the output.
+					output += (
+						TABLE.charAt(buffer >> 18 & 0x3F) +
+						TABLE.charAt(buffer >> 12 & 0x3F) +
+						TABLE.charAt(buffer >> 6 & 0x3F) +
+						TABLE.charAt(buffer & 0x3F)
+					);
+				}
+
+				if (padding == 2) {
+					a = input.charCodeAt(position) << 8;
+					b = input.charCodeAt(++position);
+					buffer = a + b;
+					output += (
+						TABLE.charAt(buffer >> 10) +
+						TABLE.charAt((buffer >> 4) & 0x3F) +
+						TABLE.charAt((buffer << 2) & 0x3F) +
+						'='
+					);
+				} else if (padding == 1) {
+					buffer = input.charCodeAt(position);
+					output += (
+						TABLE.charAt(buffer >> 2) +
+						TABLE.charAt((buffer << 4) & 0x3F) +
+						'=='
+					);
+				}
+
+				return output;
+			};
+
+			var base64 = {
+				'encode': encode,
+				'decode': decode,
+				'version': '0.1.0'
+			};
+
+			// Some AMD build optimizers, like r.js, check for specific condition patterns
+			// like the following:
+			if (
+				typeof undefined == 'function' &&
+				typeof undefined.amd == 'object' &&
+				undefined.amd
+			) {
+				undefined(function() {
+					return base64;
+				});
+			} else if (freeExports && !freeExports.nodeType) {
+				if (freeModule) { // in Node.js or RingoJS v0.8.0+
+					freeModule.exports = base64;
+				} else { // in Narwhal or RingoJS v0.7.0-
+					for (var key in base64) {
+						base64.hasOwnProperty(key) && (freeExports[key] = base64[key]);
+					}
+				}
+			} else { // in Rhino or a web browser
+				root.base64 = base64;
+			}
+
+		}(commonjsGlobal));
+	});
+
+	function makeURI(strData, type) {
+		return 'data:' + type + ';base64,' + strData
+	}
+
+	function fixType(type) {
+		type = type.toLowerCase().replace(/jpg/i, 'jpeg');
+		var r = type.match(/png|jpeg|bmp|gif/)[0];
+		return 'image/' + r
+	}
+
+	function encodeData(data) {
+		var str = '';
+		if (typeof data === 'string') {
+			str = data;
+		} else {
+			for (var i = 0; i < data.length; i++) {
+				str += String.fromCharCode(data[i]);
+			}
+		}
+		return base64.encode(str)
+	}
+
+	/**
+	 * 获取图像区域隐含的像素数据
+	 * @param canvasId canvas标识
+	 * @param x 将要被提取的图像数据矩形区域的左上角 x 坐标
+	 * @param y 将要被提取的图像数据矩形区域的左上角 y 坐标
+	 * @param width 将要被提取的图像数据矩形区域的宽度
+	 * @param height 将要被提取的图像数据矩形区域的高度
+	 * @param done 完成回调
+	 */
+	function getImageData(canvasId, x, y, width, height, done) {
+		uni.canvasGetImageData({
+			canvasId: canvasId,
+			x: x,
+			y: y,
+			width: width,
+			height: height,
+			success: function success(res) {
+				done(res, null);
+			},
+			fail: function fail(res) {
+				done(null, res);
+			}
+		});
+	}
+
+	/**
+	 * 生成bmp格式图片
+	 * 按照规则生成图片响应头和响应体
+	 * @param oData 用来描述 canvas 区域隐含的像素数据 { data, width, height } = oData
+	 * @returns {*} base64字符串
+	 */
+	function genBitmapImage(oData) {
+		//
+		// BITMAPFILEHEADER: http://msdn.microsoft.com/en-us/library/windows/desktop/dd183374(v=vs.85).aspx
+		// BITMAPINFOHEADER: http://msdn.microsoft.com/en-us/library/dd183376.aspx
+		//
+		var biWidth = oData.width;
+		var biHeight = oData.height;
+		var biSizeImage = biWidth * biHeight * 3;
+		var bfSize = biSizeImage + 54; // total header size = 54 bytes
+
+		//
+		//  typedef struct tagBITMAPFILEHEADER {
+		//  	WORD bfType;
+		//  	DWORD bfSize;
+		//  	WORD bfReserved1;
+		//  	WORD bfReserved2;
+		//  	DWORD bfOffBits;
+		//  } BITMAPFILEHEADER;
+		//
+		var BITMAPFILEHEADER = [
+			// WORD bfType -- The file type signature; must be "BM"
+			0x42, 0x4D,
+			// DWORD bfSize -- The size, in bytes, of the bitmap file
+			bfSize & 0xff, bfSize >> 8 & 0xff, bfSize >> 16 & 0xff, bfSize >> 24 & 0xff,
+			// WORD bfReserved1 -- Reserved; must be zero
+			0, 0,
+			// WORD bfReserved2 -- Reserved; must be zero
+			0, 0,
+			// DWORD bfOffBits -- The offset, in bytes, from the beginning of the BITMAPFILEHEADER structure to the bitmap bits.
+			54, 0, 0, 0
+		];
+
+		//
+		//  typedef struct tagBITMAPINFOHEADER {
+		//  	DWORD biSize;
+		//  	LONG  biWidth;
+		//  	LONG  biHeight;
+		//  	WORD  biPlanes;
+		//  	WORD  biBitCount;
+		//  	DWORD biCompression;
+		//  	DWORD biSizeImage;
+		//  	LONG  biXPelsPerMeter;
+		//  	LONG  biYPelsPerMeter;
+		//  	DWORD biClrUsed;
+		//  	DWORD biClrImportant;
+		//  } BITMAPINFOHEADER, *PBITMAPINFOHEADER;
+		//
+		var BITMAPINFOHEADER = [
+			// DWORD biSize -- The number of bytes required by the structure
+			40, 0, 0, 0,
+			// LONG biWidth -- The width of the bitmap, in pixels
+			biWidth & 0xff, biWidth >> 8 & 0xff, biWidth >> 16 & 0xff, biWidth >> 24 & 0xff,
+			// LONG biHeight -- The height of the bitmap, in pixels
+			biHeight & 0xff, biHeight >> 8 & 0xff, biHeight >> 16 & 0xff, biHeight >> 24 & 0xff,
+			// WORD biPlanes -- The number of planes for the target device. This value must be set to 1
+			1, 0,
+			// WORD biBitCount -- The number of bits-per-pixel, 24 bits-per-pixel -- the bitmap
+			// has a maximum of 2^24 colors (16777216, Truecolor)
+			24, 0,
+			// DWORD biCompression -- The type of compression, BI_RGB (code 0) -- uncompressed
+			0, 0, 0, 0,
+			// DWORD biSizeImage -- The size, in bytes, of the image. This may be set to zero for BI_RGB bitmaps
+			biSizeImage & 0xff, biSizeImage >> 8 & 0xff, biSizeImage >> 16 & 0xff, biSizeImage >> 24 & 0xff,
+			// LONG biXPelsPerMeter, unused
+			0, 0, 0, 0,
+			// LONG biYPelsPerMeter, unused
+			0, 0, 0, 0,
+			// DWORD biClrUsed, the number of color indexes of palette, unused
+			0, 0, 0, 0,
+			// DWORD biClrImportant, unused
+			0, 0, 0, 0
+		];
+
+		var iPadding = (4 - ((biWidth * 3) % 4)) % 4;
+
+		var aImgData = oData.data;
+
+		var strPixelData = '';
+		var biWidth4 = biWidth << 2;
+		var y = biHeight;
+		var fromCharCode = String.fromCharCode;
+
+		do {
+			var iOffsetY = biWidth4 * (y - 1);
+			var strPixelRow = '';
+			for (var x = 0; x < biWidth; x++) {
+				var iOffsetX = x << 2;
+				strPixelRow += fromCharCode(aImgData[iOffsetY + iOffsetX + 2]) +
+					fromCharCode(aImgData[iOffsetY + iOffsetX + 1]) +
+					fromCharCode(aImgData[iOffsetY + iOffsetX]);
+			}
+
+			for (var c = 0; c < iPadding; c++) {
+				strPixelRow += String.fromCharCode(0);
+			}
+
+			strPixelData += strPixelRow;
+		} while (--y)
+
+		var strEncoded = encodeData(BITMAPFILEHEADER.concat(BITMAPINFOHEADER)) + encodeData(strPixelData);
+
+		return strEncoded
+	}
+
+	/**
+	 * 转换为图片base64
+	 * @param canvasId canvas标识
+	 * @param x 将要被提取的图像数据矩形区域的左上角 x 坐标
+	 * @param y 将要被提取的图像数据矩形区域的左上角 y 坐标
+	 * @param width 将要被提取的图像数据矩形区域的宽度
+	 * @param height 将要被提取的图像数据矩形区域的高度
+	 * @param type 转换图片类型
+	 * @param done 完成回调
+	 */
+	function convertToImage(canvasId, x, y, width, height, type, done) {
+		if (done === void 0) done = function() {};
+
+		if (type === undefined) {
+			type = 'png';
+		}
+		type = fixType(type);
+		if (/bmp/.test(type)) {
+			getImageData(canvasId, x, y, width, height, function(data, err) {
+				var strData = genBitmapImage(data);
+				tools_7(done) && done(makeURI(strData, 'image/' + type), err);
+			});
+		} else {
+			console.error('暂不支持生成\'' + type + '\'类型的base64图片');
+		}
+	}
+
+	var CanvasToBase64 = {
+		convertToImage: convertToImage,
+		// convertToPNG: function (width, height, done) {
+		//   return convertToImage(width, height, 'png', done)
+		// },
+		// convertToJPEG: function (width, height, done) {
+		//   return convertToImage(width, height, 'jpeg', done)
+		// },
+		// convertToGIF: function (width, height, done) {
+		//   return convertToImage(width, height, 'gif', done)
+		// },
+		convertToBMP: function(ref, done) {
+			if (ref === void 0) ref = {};
+			var canvasId = ref.canvasId;
+			var x = ref.x;
+			var y = ref.y;
+			var width = ref.width;
+			var height = ref.height;
+			if (done === void 0) done = function() {};
+
+			return convertToImage(canvasId, x, y, width, height, 'bmp', done)
+		}
+	};
+
+	function methods() {
+		var self = this;
+
+		var boundWidth = self.width; // 裁剪框默认宽度，即整个画布宽度
+		var boundHeight = self.height; // 裁剪框默认高度，即整个画布高度
+
+		var id = self.id;
+		var targetId = self.targetId;
+		var pixelRatio = self.pixelRatio;
+
+		var ref = self.cut;
+		var x = ref.x;
+		if (x === void 0) x = 0;
+		var y = ref.y;
+		if (y === void 0) y = 0;
+		var width = ref.width;
+		if (width === void 0) width = boundWidth;
+		var height = ref.height;
+		if (height === void 0) height = boundHeight;
+
+		self.updateCanvas = function(done) {
+			if (self.croperTarget) {
+				//  画布绘制图片
+				self.ctx.drawImage(
+					self.croperTarget,
+					self.imgLeft,
+					self.imgTop,
+					self.scaleWidth,
+					self.scaleHeight
+				);
+			}
+			tools_7(self.onBeforeDraw) && self.onBeforeDraw(self.ctx, self);
+
+			self.setBoundStyle(self.boundStyle); //	设置边界样式
+
+			self.ctx.draw(false, done);
+			return self
+		};
+
+		self.pushOrigin = self.pushOrign = function(src) {
+			self.src = src;
+
+			tools_7(self.onBeforeImageLoad) && self.onBeforeImageLoad(self.ctx, self);
+
+			return getImageInfo({
+					src: src
+				})
+				.then(function(res) {
+					var innerAspectRadio = res.width / res.height;
+					var customAspectRadio = width / height;
+
+					self.croperTarget = res.path;
+
+					if (innerAspectRadio < customAspectRadio) {
+						self.rectX = x;
+						self.baseWidth = width;
+						self.baseHeight = width / innerAspectRadio;
+						self.rectY = y - Math.abs((height - self.baseHeight) / 2);
+					} else {
+						self.rectY = y;
+						self.baseWidth = height * innerAspectRadio;
+						self.baseHeight = height;
+						self.rectX = x - Math.abs((width - self.baseWidth) / 2);
+					}
+
+					self.imgLeft = self.rectX;
+					self.imgTop = self.rectY;
+					self.scaleWidth = self.baseWidth;
+					self.scaleHeight = self.baseHeight;
+
+					self.update();
+
+					return new Promise(function(resolve) {
+						self.updateCanvas(resolve);
+					})
+				})
+				.then(function() {
+					tools_7(self.onImageLoad) && self.onImageLoad(self.ctx, self);
+				})
+		};
+
+		self.removeImage = function() {
+			self.src = '';
+			self.croperTarget = '';
+			return draw(self.ctx)
+		};
+
+		self.getCropperBase64 = function(done) {
+			if (done === void 0) done = function() {};
+
+			CanvasToBase64.convertToBMP({
+				canvasId: id,
+				x: x,
+				y: y,
+				width: width,
+				height: height
+			}, done);
+		};
+
+		self.getCropperImage = function(opt, fn) {
+			var customOptions = opt;
+
+			var canvasOptions = {
+				canvasId: id,
+				x: x,
+				y: y,
+				width: width,
+				height: height
+			};
+
+			var task = function() {
+				return Promise.resolve();
+			};
+
+			if (
+				tools_10(customOptions) &&
+				customOptions.original
+			) {
+				// original mode
+				task = function() {
+					self.targetCtx.drawImage(
+						self.croperTarget,
+						self.imgLeft * pixelRatio,
+						self.imgTop * pixelRatio,
+						self.scaleWidth * pixelRatio,
+						self.scaleHeight * pixelRatio
+					);
+
+					canvasOptions = {
+						canvasId: targetId,
+						x: x * pixelRatio,
+						y: y * pixelRatio,
+						width: width * pixelRatio,
+						height: height * pixelRatio
+					};
+
+					return draw(self.targetCtx)
+				};
+			}
+
+			return task()
+				.then(function() {
+					if (tools_10(customOptions)) {
+						canvasOptions = Object.assign({}, canvasOptions, customOptions);
+					}
+
+					if (tools_7(customOptions)) {
+						fn = customOptions;
+					}
+
+					var arg = canvasOptions.componentContext ?
+						[canvasOptions, canvasOptions.componentContext] :
+						[canvasOptions];
+
+					return canvasToTempFilePath.apply(null, arg)
+				})
+				.then(function(res) {
+					var tempFilePath = res.tempFilePath;
+
+					return tools_7(fn) ?
+						fn.call(self, tempFilePath, null) :
+						tempFilePath
+				})
+				.catch(function(err) {
+					if (tools_7(fn)) {
+						fn.call(self, null, err);
+					} else {
+						throw err
+					}
+				})
+		};
+	}
+
+	/**
+	 * 获取最新缩放值
+	 * @param oldScale 上一次触摸结束后的缩放值
+	 * @param oldDistance 上一次触摸结束后的双指距离
+	 * @param zoom 缩放系数
+	 * @param touch0 第一指touch对象
+	 * @param touch1 第二指touch对象
+	 * @returns {*}
+	 */
+	var getNewScale = function(oldScale, oldDistance, zoom, touch0, touch1) {
+		var xMove, yMove, newDistance;
+		// 计算二指最新距离
+		xMove = Math.round(touch1.x - touch0.x);
+		yMove = Math.round(touch1.y - touch0.y);
+		newDistance = Math.round(Math.sqrt(xMove * xMove + yMove * yMove));
+
+		return oldScale + 0.001 * zoom * (newDistance - oldDistance)
+	};
+
+	function update() {
+		var self = this;
+
+		if (!self.src) {
+			return
+		}
+
+		self.__oneTouchStart = function(touch) {
+			self.touchX0 = Math.round(touch.x);
+			self.touchY0 = Math.round(touch.y);
+		};
+
+		self.__oneTouchMove = function(touch) {
+			var xMove, yMove;
+			// 计算单指移动的距离
+			if (self.touchended) {
+				return self.updateCanvas()
+			}
+			xMove = Math.round(touch.x - self.touchX0);
+			yMove = Math.round(touch.y - self.touchY0);
+
+			var imgLeft = Math.round(self.rectX + xMove);
+			var imgTop = Math.round(self.rectY + yMove);
+
+			self.outsideBound(imgLeft, imgTop);
+
+			self.updateCanvas();
+		};
+
+		self.__twoTouchStart = function(touch0, touch1) {
+			var xMove, yMove, oldDistance;
+
+			self.touchX1 = Math.round(self.rectX + self.scaleWidth / 2);
+			self.touchY1 = Math.round(self.rectY + self.scaleHeight / 2);
+
+			// 计算两指距离
+			xMove = Math.round(touch1.x - touch0.x);
+			yMove = Math.round(touch1.y - touch0.y);
+			oldDistance = Math.round(Math.sqrt(xMove * xMove + yMove * yMove));
+
+			self.oldDistance = oldDistance;
+		};
+
+		self.__twoTouchMove = function(touch0, touch1) {
+			var oldScale = self.oldScale;
+			var oldDistance = self.oldDistance;
+			var scale = self.scale;
+			var zoom = self.zoom;
+
+			self.newScale = getNewScale(oldScale, oldDistance, zoom, touch0, touch1);
+
+			//  设定缩放范围
+			self.newScale <= 1 && (self.newScale = 1);
+			self.newScale >= scale && (self.newScale = scale);
+
+			self.scaleWidth = Math.round(self.newScale * self.baseWidth);
+			self.scaleHeight = Math.round(self.newScale * self.baseHeight);
+			var imgLeft = Math.round(self.touchX1 - self.scaleWidth / 2);
+			var imgTop = Math.round(self.touchY1 - self.scaleHeight / 2);
+
+			self.outsideBound(imgLeft, imgTop);
+
+			self.updateCanvas();
+		};
+
+		self.__xtouchEnd = function() {
+			self.oldScale = self.newScale;
+			self.rectX = self.imgLeft;
+			self.rectY = self.imgTop;
+		};
+	}
+
+	var handle = {
+		//  图片手势初始监测
+		touchStart: function touchStart(e) {
+			var self = this;
+			var ref = e.touches;
+			var touch0 = ref[0];
+			var touch1 = ref[1];
+
+			if (!self.src) {
+				return
+			}
+
+			setTouchState(self, true, null, null);
+
+			// 计算第一个触摸点的位置，并参照改点进行缩放
+			self.__oneTouchStart(touch0);
+
+			// 两指手势触发
+			if (e.touches.length >= 2) {
+				self.__twoTouchStart(touch0, touch1);
+			}
+		},
+
+		//  图片手势动态缩放
+		touchMove: function touchMove(e) {
+			var self = this;
+			var ref = e.touches;
+			var touch0 = ref[0];
+			var touch1 = ref[1];
+
+			if (!self.src) {
+				return
+			}
+
+			setTouchState(self, null, true);
+
+			// 单指手势时触发
+			if (e.touches.length === 1) {
+				self.__oneTouchMove(touch0);
+			}
+			// 两指手势触发
+			if (e.touches.length >= 2) {
+				self.__twoTouchMove(touch0, touch1);
+			}
+		},
+
+		touchEnd: function touchEnd(e) {
+			var self = this;
+
+			if (!self.src) {
+				return
+			}
+
+			setTouchState(self, false, false, true);
+			self.__xtouchEnd();
+		}
+	};
+
+	function cut() {
+		var self = this;
+		var boundWidth = self.width; // 裁剪框默认宽度，即整个画布宽度
+		var boundHeight = self.height;
+		// 裁剪框默认高度，即整个画布高度
+		var ref = self.cut;
+		var x = ref.x;
+		if (x === void 0) x = 0;
+		var y = ref.y;
+		if (y === void 0) y = 0;
+		var width = ref.width;
+		if (width === void 0) width = boundWidth;
+		var height = ref.height;
+		if (height === void 0) height = boundHeight;
+
+		/**
+		 * 设置边界
+		 * @param imgLeft 图片左上角横坐标值
+		 * @param imgTop 图片左上角纵坐标值
+		 */
+		self.outsideBound = function(imgLeft, imgTop) {
+			self.imgLeft = imgLeft >= x ?
+				x :
+				self.scaleWidth + imgLeft - x <= width ?
+				x + width - self.scaleWidth :
+				imgLeft;
+
+			self.imgTop = imgTop >= y ?
+				y :
+				self.scaleHeight + imgTop - y <= height ?
+				y + height - self.scaleHeight :
+				imgTop;
+		};
+
+		/**
+		 * 设置边界样式
+		 * @param color	边界颜色
+		 */
+		self.setBoundStyle = function(ref) {
+			if (ref === void 0) ref = {};
+			var color = ref.color;
+			if (color === void 0) color = '#04b00f';
+			var mask = ref.mask;
+			if (mask === void 0) mask = 'rgba(0, 0, 0, 0.3)';
+			var lineWidth = ref.lineWidth;
+			if (lineWidth === void 0) lineWidth = 1;
+
+			var half = lineWidth / 2;
+			var boundOption = [{
+					start: {
+						x: x - half,
+						y: y + 10 - half
+					},
+					step1: {
+						x: x - half,
+						y: y - half
+					},
+					step2: {
+						x: x + 10 - half,
+						y: y - half
+					}
+				},
+				{
+					start: {
+						x: x - half,
+						y: y + height - 10 + half
+					},
+					step1: {
+						x: x - half,
+						y: y + height + half
+					},
+					step2: {
+						x: x + 10 - half,
+						y: y + height + half
+					}
+				},
+				{
+					start: {
+						x: x + width - 10 + half,
+						y: y - half
+					},
+					step1: {
+						x: x + width + half,
+						y: y - half
+					},
+					step2: {
+						x: x + width + half,
+						y: y + 10 - half
+					}
+				},
+				{
+					start: {
+						x: x + width + half,
+						y: y + height - 10 + half
+					},
+					step1: {
+						x: x + width + half,
+						y: y + height + half
+					},
+					step2: {
+						x: x + width - 10 + half,
+						y: y + height + half
+					}
+				}
+			];
+
+			// 绘制半透明层
+			self.ctx.beginPath();
+			self.ctx.setFillStyle(mask);
+			self.ctx.fillRect(0, 0, x, boundHeight);
+			self.ctx.fillRect(x, 0, width, y);
+			self.ctx.fillRect(x, y + height, width, boundHeight - y - height);
+			self.ctx.fillRect(x + width, 0, boundWidth - x - width, boundHeight);
+			self.ctx.fill();
+
+			boundOption.forEach(function(op) {
+				self.ctx.beginPath();
+				self.ctx.setStrokeStyle(color);
+				self.ctx.setLineWidth(lineWidth);
+				self.ctx.moveTo(op.start.x, op.start.y);
+				self.ctx.lineTo(op.step1.x, op.step1.y);
+				self.ctx.lineTo(op.step2.x, op.step2.y);
+				self.ctx.stroke();
+			});
+		};
+	}
+
+	var version = "1.3.9";
+
+	var WeCropper = function WeCropper(params) {
+		var self = this;
+		var _default = {};
+
+		validator(self, DEFAULT);
+
+		Object.keys(DEFAULT).forEach(function(key) {
+			_default[key] = DEFAULT[key].default;
+		});
+		Object.assign(self, _default, params);
+
+		self.prepare();
+		self.attachPage();
+		self.createCtx();
+		self.observer();
+		self.cutt();
+		self.methods();
+		self.init();
+		self.update();
+
+		return self
+	};
+
+	WeCropper.prototype.init = function init() {
+		var self = this;
+		var src = self.src;
+
+		self.version = version;
+
+		typeof self.onReady === 'function' && self.onReady(self.ctx, self);
+
+		if (src) {
+			self.pushOrign(src);
+		} else {
+			self.updateCanvas();
+		}
+		setTouchState(self, false, false, false);
+
+		self.oldScale = 1;
+		self.newScale = 1;
+
+		return self
+	};
+
+	Object.assign(WeCropper.prototype, handle);
+
+	WeCropper.prototype.prepare = prepare;
+	WeCropper.prototype.observer = observer;
+	WeCropper.prototype.methods = methods;
+	WeCropper.prototype.cutt = cut;
+	WeCropper.prototype.update = update;
+
+	return WeCropper;
+
+})));

uview-ui/components/u-back-top/u-back-top.vue

@@ -0,0 +1,153 @@
+<template>
+	<view @tap="backToTop" class="u-back-top" :class="['u-back-top--mode--' + mode]" :style="[{
+		bottom: bottom + 'rpx',
+		right: right + 'rpx',
+		borderRadius: mode == 'circle' ? '10000rpx' : '8rpx',
+		zIndex: uZIndex,
+		opacity: opacity
+	}, customStyle]">
+		<view class="u-back-top__content" v-if="!$slots.default && !$slots.$default">
+			<u-icon @click="backToTop" :name="icon" :custom-style="iconStyle"></u-icon>
+			<view class="u-back-top__content__tips">
+				{{tips}}
+			</view>
+		</view>
+		<slot v-else />
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'u-back-top',
+		props: {
+			// 返回顶部的形状，circle-圆形，square-方形
+			mode: {
+				type: String,
+				default: 'circle'
+			},
+			// 自定义图标
+			icon: {
+				type: String,
+				default: 'arrow-upward'
+			},
+			// 提示文字
+			tips: {
+				type: String,
+				default: ''
+			},
+			// 返回顶部滚动时间
+			duration: {
+				type: [Number, String],
+				default: 100
+			},
+			// 滚动距离
+			scrollTop: {
+				type: [Number, String],
+				default: 0
+			},
+			// 距离顶部多少距离显示，单位rpx
+			top: {
+				type: [Number, String],
+				default: 400
+			},
+			// 返回顶部按钮到底部的距离，单位rpx
+			bottom: {
+				type: [Number, String],
+				default: 200
+			},
+			// 返回顶部按钮到右边的距离，单位rpx
+			right: {
+				type: [Number, String],
+				default: 40
+			},
+			// 层级
+			zIndex: {
+				type: [Number, String],
+				default: '9'
+			},
+			// 图标的样式，对象形式
+			iconStyle: {
+				type: Object,
+				default() {
+					return {
+						color: '#909399',
+						fontSize: '38rpx'
+					}
+				}
+			},
+			// 整个组件的样式
+			customStyle: {
+				type: Object,
+				default() {
+					return {}
+				}
+			}
+		},
+		watch: {
+			showBackTop(nVal, oVal) {
+				// 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
+				// 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
+				if(nVal) {
+					this.uZIndex = this.zIndex;
+					this.opacity = 1;
+				} else {
+					this.uZIndex = -1;
+					this.opacity = 0;
+				}
+			}
+		},
+		computed: {
+			showBackTop() {
+				// 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
+				// 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
+				return this.scrollTop > uni.upx2px(this.top);
+			},
+		},
+		data() {
+			return {
+				// 不透明度，为了让组件有一个显示和隐藏的过渡动画
+				opacity: 0,
+				// 组件的z-index值，隐藏时设置为-1，就会看不到
+				uZIndex: -1
+			}
+		},
+		methods: {
+			backToTop() {
+				uni.pageScrollTo({
+					scrollTop: 0,
+					duration: this.duration
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-back-top {
+		width: 80rpx;
+		height: 80rpx;
+		position: fixed;
+		z-index: 9;
+		@include vue-flex;
+		flex-direction: column;
+		justify-content: center;
+		background-color: #E1E1E1;
+		color: $u-content-color;
+		align-items: center;
+		transition: opacity 0.4s;
+		
+		&__content {
+			@include vue-flex;
+			flex-direction: column;
+			align-items: center;
+			
+			&__tips {
+				font-size: 24rpx;
+				transform: scale(0.8);
+				line-height: 1;
+			}
+		}
+	}
+</style>

uview-ui/components/u-badge/u-badge.vue

@@ -0,0 +1,216 @@
+<template>
+	<view v-if="show" class="u-badge" :class="[
+			isDot ? 'u-badge-dot' : '', 
+			size == 'mini' ? 'u-badge-mini' : '',
+			type ? 'u-badge--bg--' + type : ''
+		]" :style="[{
+			top: offset[0] + 'rpx',
+			right: offset[1] + 'rpx',
+			fontSize: fontSize + 'rpx',
+			position: absolute ? 'absolute' : 'static',
+			color: color,
+			backgroundColor: bgColor
+		}, boxStyle]"
+	>
+		{{showText}}
+	</view>
+</template>
+
+<script>
+	/**
+	 * badge 角标
+	 * @description 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。
+	 * @tutorial https://www.uviewui.com/components/badge.html
+	 * @property {String Number} count 展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为0且show-zero为false时隐藏
+	 * @property {Boolean} is-dot 不展示数字，只有一个小点（默认false）
+	 * @property {Boolean} absolute 组件是否绝对定位，为true时，offset参数才有效（默认true）
+	 * @property {String Number} overflow-count 展示封顶的数字值（默认99）
+	 * @property {String} type 使用预设的背景颜色（默认error）
+	 * @property {Boolean} show-zero 当数值为 0 时，是否展示 Badge（默认false）
+	 * @property {String} size Badge的尺寸，设为mini会得到小一号的Badge（默认default）
+	 * @property {Array} offset 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，单位rpx。absolute为true时有效（默认[20, 20]）
+	 * @property {String} color 字体颜色（默认#ffffff）
+	 * @property {String} bgColor 背景颜色，优先级比type高，如设置，type参数会失效
+	 * @property {Boolean} is-center 组件中心点是否和父组件右上角重合，优先级比offset高，如设置，offset参数会失效（默认false）
+	 * @example <u-badge type="error" count="7"></u-badge>
+	 */
+	export default {
+		name: 'u-badge',
+		props: {
+			// primary,warning,success,error,info
+			type: {
+				type: String,
+				default: 'error'
+			},
+			// default, mini
+			size: {
+				type: String,
+				default: 'default'
+			},
+			//是否是圆点
+			isDot: {
+				type: Boolean,
+				default: false
+			},
+			// 显示的数值内容
+			count: {
+				type: [Number, String],
+			},
+			// 展示封顶的数字值
+			overflowCount: {
+				type: Number,
+				default: 99
+			},
+			// 当数值为 0 时，是否展示 Badge
+			showZero: {
+				type: Boolean,
+				default: false
+			},
+			// 位置偏移
+			offset: {
+				type: Array,
+				default: () => {
+					return [20, 20]
+				}
+			},
+			// 是否开启绝对定位，开启了offset才会起作用
+			absolute: {
+				type: Boolean,
+				default: true
+			},
+			// 字体大小
+			fontSize: {
+				type: [String, Number],
+				default: '24'
+			},
+			// 字体演示
+			color: {
+				type: String,
+				default: '#ffffff'
+			},
+			// badge的背景颜色
+			bgColor: {
+				type: String,
+				default: ''
+			},
+			// 是否让badge组件的中心点和父组件右上角重合，配置的话，offset将会失效
+			isCenter: {
+				type: Boolean,
+				default: false
+			}
+		},
+		computed: {
+			// 是否将badge中心与父组件右上角重合
+			boxStyle() {
+				let style = {};
+				if(this.isCenter) {
+					style.top = 0;
+					style.right = 0;
+					// Y轴-50%，意味着badge向上移动了badge自身高度一半，X轴50%，意味着向右移动了自身宽度一半
+					style.transform = "translateY(-50%) translateX(50%)";
+				} else {
+					style.top = this.offset[0] + 'rpx';
+					style.right = this.offset[1] + 'rpx';
+					style.transform = "translateY(0) translateX(0)";
+				}
+				// 如果尺寸为mini，后接上scal()
+				if(this.size == 'mini') {
+					style.transform = style.transform + " scale(0.8)";
+				}
+				return style;
+			},
+			// isDot类型时，不显示文字
+			showText() {
+				if(this.isDot) return '';
+				else {
+					if(this.count > this.overflowCount) return `${this.overflowCount}+`;
+					else return this.count;
+				}
+			},
+			// 是否显示组件
+			show() {
+				// 如果count的值为0，并且showZero设置为false，不显示组件
+				if(this.count == 0 && this.showZero == false) return false;
+				else return true;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-badge {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center;
+		line-height: 24rpx;
+		padding: 4rpx 8rpx;
+		border-radius: 100rpx;
+		z-index: 9;
+		
+		&--bg--primary {
+			background-color: $u-type-primary;
+		}
+		
+		&--bg--error {
+			background-color: $u-type-error;
+		}
+		
+		&--bg--success {
+			background-color: $u-type-success;
+		}
+		
+		&--bg--info {
+			background-color: $u-type-info;
+		}
+		
+		&--bg--warning {
+			background-color: $u-type-warning;
+		}
+	}
+	
+	.u-badge-dot {
+		height: 16rpx;
+		width: 16rpx;
+		border-radius: 100rpx;
+		line-height: 1;
+	}
+	
+	.u-badge-mini {
+		transform: scale(0.8);
+		transform-origin: center center;
+	}
+	
+	// .u-primary {
+	// 	background: $u-type-primary;
+	// 	color: #fff;
+	// }
+	
+	// .u-error {
+	// 	background: $u-type-error;
+	// 	color: #fff;
+	// }
+	
+	// .u-warning {
+	// 	background: $u-type-warning;
+	// 	color: #fff;
+	// }
+	
+	// .u-success {
+	// 	background: $u-type-success;
+	// 	color: #fff;
+	// }
+	
+	// .u-black {
+	// 	background: #585858;
+	// 	color: #fff;
+	// }
+	
+	.u-info {
+		background-color: $u-type-info;
+		color: #fff;
+	}
+</style>

uview-ui/components/u-button/u-button.vue

@@ -0,0 +1,596 @@
+<template>
+	<button
+		id="u-wave-btn"
+		class="u-btn u-line-1 u-fix-ios-appearance"
+		:class="[
+			'u-size-' + size,
+			plain ? 'u-btn--' + type + '--plain' : '',
+			loading ? 'u-loading' : '',
+			shape == 'circle' ? 'u-round-circle' : '',
+			hairLine ? showHairLineBorder : 'u-btn--bold-border',
+			'u-btn--' + type,
+			disabled ? `u-btn--${type}--disabled` : '',
+		]"
+		:hover-start-time="Number(hoverStartTime)"
+		:hover-stay-time="Number(hoverStayTime)"
+		:disabled="disabled"
+		:form-type="formType"
+		:open-type="openType"
+		:app-parameter="appParameter"
+		:hover-stop-propagation="hoverStopPropagation"
+		:send-message-title="sendMessageTitle"
+		send-message-path="sendMessagePath"
+		:lang="lang"
+		:data-name="dataName"
+		:session-from="sessionFrom"
+		:send-message-img="sendMessageImg"
+		:show-message-card="showMessageCard"
+		@getphonenumber="getphonenumber"
+		@getuserinfo="getuserinfo"
+		@error="error"
+		@opensetting="opensetting"
+		@launchapp="launchapp"
+		:style="[customStyle, {
+			overflow: ripple ? 'hidden' : 'visible'
+		}]"
+		@tap.stop="click($event)"
+		:hover-class="getHoverClass"
+		:loading="loading"
+	>
+		<slot></slot>
+		<view
+			v-if="ripple"
+			class="u-wave-ripple"
+			:class="[waveActive ? 'u-wave-active' : '']"
+			:style="{
+				top: rippleTop + 'px',
+				left: rippleLeft + 'px',
+				width: fields.targetWidth + 'px',
+				height: fields.targetWidth + 'px',
+				'background-color': rippleBgColor || 'rgba(0, 0, 0, 0.15)'
+			}"
+		></view>
+	</button>
+</template>
+
+<script>
+/**
+ * button 按钮
+ * @description Button 按钮
+ * @tutorial https://www.uviewui.com/components/button.html
+ * @property {String} size 按钮的大小
+ * @property {Boolean} ripple 是否开启点击水波纹效果
+ * @property {String} ripple-bg-color 水波纹的背景色，ripple为true时有效
+ * @property {String} type 按钮的样式类型
+ * @property {Boolean} plain 按钮是否镂空，背景色透明
+ * @property {Boolean} disabled 是否禁用
+ * @property {Boolean} hair-line 是否显示按钮的细边框(默认true)
+ * @property {Boolean} shape 按钮外观形状，见文档说明
+ * @property {Boolean} loading 按钮名称前是否带 loading 图标(App-nvue 平台，在 ios 上为雪花，Android上为圆圈)
+ * @property {String} form-type 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
+ * @property {String} open-type 开放能力
+ * @property {String} data-name 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
+ * @property {String} hover-class 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果(App-nvue 平台暂不支持)
+ * @property {Number} hover-start-time 按住后多久出现点击态，单位毫秒
+ * @property {Number} hover-stay-time 手指松开后点击态保留时间，单位毫秒
+ * @property {Object} custom-style 对按钮的自定义样式，对象形式，见文档说明
+ * @event {Function} click 按钮点击
+ * @event {Function} getphonenumber open-type="getPhoneNumber"时有效
+ * @event {Function} getuserinfo 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo
+ * @event {Function} error 当使用开放能力时，发生错误的回调
+ * @event {Function} opensetting 在打开授权设置页并关闭后回调
+ * @event {Function} launchapp 打开 APP 成功的回调
+ * @example <u-button>月落</u-button>
+ */
+export default {
+	name: 'u-button',
+	props: {
+		// 是否细边框
+		hairLine: {
+			type: Boolean,
+			default: true
+		},
+		// 按钮的预置样式，default，primary，error，warning，success
+		type: {
+			type: String,
+			default: 'default'
+		},
+		// 按钮尺寸，default，medium，mini
+		size: {
+			type: String,
+			default: 'default'
+		},
+		// 按钮形状，circle（两边为半圆），square（带圆角）
+		shape: {
+			type: String,
+			default: 'square'
+		},
+		// 按钮是否镂空
+		plain: {
+			type: Boolean,
+			default: false
+		},
+		// 是否禁止状态
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		// 是否加载中
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		// 开放能力，具体请看uniapp稳定关于button组件部分说明
+		// https://uniapp.dcloud.io/component/button
+		openType: {
+			type: String,
+			default: ''
+		},
+		// 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
+		// 取值为submit（提交表单），reset（重置表单）
+		formType: {
+			type: String,
+			default: ''
+		},
+		// 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
+		// 只微信小程序、QQ小程序有效
+		appParameter: {
+			type: String,
+			default: ''
+		},
+		// 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效
+		hoverStopPropagation: {
+			type: Boolean,
+			default: false
+		},
+		// 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。只微信小程序有效
+		lang: {
+			type: String,
+			default: 'en'
+		},
+		// 会话来源，open-type="contact"时有效。只微信小程序有效
+		sessionFrom: {
+			type: String,
+			default: ''
+		},
+		// 会话内消息卡片标题，open-type="contact"时有效
+		// 默认当前标题，只微信小程序有效
+		sendMessageTitle: {
+			type: String,
+			default: ''
+		},
+		// 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
+		// 默认当前分享路径，只微信小程序有效
+		sendMessagePath: {
+			type: String,
+			default: ''
+		},
+		// 会话内消息卡片图片，open-type="contact"时有效
+		// 默认当前页面截图，只微信小程序有效
+		sendMessageImg: {
+			type: String,
+			default: ''
+		},
+		// 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，
+		// 用户点击后可以快速发送小程序消息，open-type="contact"时有效
+		showMessageCard: {
+			type: Boolean,
+			default: false
+		},
+		// 手指按（触摸）按钮时按钮时的背景颜色
+		hoverBgColor: {
+			type: String,
+			default: ''
+		},
+		// 水波纹的背景颜色
+		rippleBgColor: {
+			type: String,
+			default: ''
+		},
+		// 是否开启水波纹效果
+		ripple: {
+			type: Boolean,
+			default: false
+		},
+		// 按下的类名
+		hoverClass: {
+			type: String,
+			default: ''
+		},
+		// 自定义样式，对象形式
+		customStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
+		dataName: {
+			type: String,
+			default: ''
+		},
+		// 节流，一定时间内只能触发一次
+		throttleTime: {
+			type: [String, Number],
+			default: 1000
+		},
+		// 按住后多久出现点击态，单位毫秒
+		hoverStartTime: {
+			type: [String, Number],
+			default: 20
+		},
+		// 手指松开后点击态保留时间，单位毫秒
+		hoverStayTime: {
+			type: [String, Number],
+			default: 150
+		},
+	},
+	computed: {
+		// 当没有传bgColor变量时，按钮按下去的颜色类名
+		getHoverClass() {
+			// 如果开启水波纹效果，则不启用hover-class效果
+			if (this.loading || this.disabled || this.ripple || this.hoverClass) return '';
+			let hoverClass = '';
+			hoverClass = this.plain ? 'u-' + this.type + '-plain-hover' : 'u-' + this.type + '-hover';
+			return hoverClass;
+		},
+		// 在'primary', 'success', 'error', 'warning'类型下，不显示边框，否则会造成四角有毛刺现象
+		showHairLineBorder() {
+			if (['primary', 'success', 'error', 'warning'].indexOf(this.type) >= 0 && !this.plain) {
+				return '';
+			} else {
+				return 'u-hairline-border';
+			}
+		}
+	},
+	data() {
+		return {
+			rippleTop: 0, // 水波纹的起点Y坐标到按钮上边界的距离
+			rippleLeft: 0, // 水波纹起点X坐标到按钮左边界的距离
+			fields: {}, // 波纹按钮节点信息
+			waveActive: false // 激活水波纹
+		};
+	},
+	methods: {
+		// 按钮点击
+		click(e) {
+			// 进行节流控制，每this.throttle毫秒内，只在开始处执行
+			this.$u.throttle(() => {
+				// 如果按钮时disabled和loading状态，不触发水波纹效果
+				if (this.loading === true || this.disabled === true) return;
+				// 是否开启水波纹效果
+				if (this.ripple) {
+					// 每次点击时，移除上一次的类，再次添加，才能触发动画效果
+					this.waveActive = false;
+					this.$nextTick(function() {
+						this.getWaveQuery(e);
+					});
+				}
+				this.$emit('click', e);
+			}, this.throttleTime);
+		},
+		// 查询按钮的节点信息
+		getWaveQuery(e) {
+			this.getElQuery().then(res => {
+				// 查询返回的是一个数组节点
+				let data = res[0];
+				// 查询不到节点信息，不操作
+				if (!data.width || !data.width) return;
+				// 水波纹的最终形态是一个正方形(通过border-radius让其变为一个圆形)，这里要保证正方形的边长等于按钮的最长边
+				// 最终的方形（变换后的圆形）才能覆盖整个按钮
+				data.targetWidth = data.height > data.width ? data.height : data.width;
+				if (!data.targetWidth) return;
+				this.fields = data;
+				let touchesX = '',
+					touchesY = '';
+				// #ifdef MP-BAIDU
+				touchesX = e.changedTouches[0].clientX;
+				touchesY = e.changedTouches[0].clientY;
+				// #endif
+				// #ifdef MP-ALIPAY
+				touchesX = e.detail.clientX;
+				touchesY = e.detail.clientY;
+				// #endif
+				// #ifndef MP-BAIDU || MP-ALIPAY
+				touchesX = e.touches[0].clientX;
+				touchesY = e.touches[0].clientY;
+				// #endif
+				// 获取触摸点相对于按钮上边和左边的x和y坐标，原理是通过屏幕的触摸点（touchesY），减去按钮的上边界data.top
+				// 但是由于`transform-origin`默认是center，所以这里再减去半径才是水波纹view应该的位置
+				// 总的来说，就是把水波纹的矩形（变换后的圆形）的中心点，移动到我们的触摸点位置
+				this.rippleTop = touchesY - data.top - data.targetWidth / 2;
+				this.rippleLeft = touchesX - data.left - data.targetWidth / 2;
+				this.$nextTick(() => {
+					this.waveActive = true;
+				});
+			});
+		},
+		// 获取节点信息
+		getElQuery() {
+			return new Promise(resolve => {
+				let queryInfo = '';
+				// 获取元素节点信息，请查看uniapp相关文档
+				// https://uniapp.dcloud.io/api/ui/nodes-info?id=nodesrefboundingclientrect
+				queryInfo = uni.createSelectorQuery().in(this);
+				//#ifdef MP-ALIPAY
+				queryInfo = uni.createSelectorQuery();
+				//#endif
+				queryInfo.select('.u-btn').boundingClientRect();
+				queryInfo.exec(data => {
+					resolve(data);
+				});
+			});
+		},
+		// 下面为对接uniapp官方按钮开放能力事件回调的对接
+		getphonenumber(res) {
+			this.$emit('getphonenumber', res);
+		},
+		getuserinfo(res) {
+			this.$emit('getuserinfo', res);
+		},
+		error(res) {
+			this.$emit('error', res);
+		},
+		opensetting(res) {
+			this.$emit('opensetting', res);
+		},
+		launchapp(res) {
+			this.$emit('launchapp', res);
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+.u-btn::after {
+	border: none;
+}
+
+.u-btn {
+	position: relative;
+	border: 0;
+	//border-radius: 10rpx;
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+	// 避免边框某些场景可能被“裁剪”，不能设置为hidden
+	overflow: visible;
+	line-height: 1;
+	@include vue-flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	padding: 0 40rpx;
+	z-index: 1;
+	box-sizing: border-box;
+	transition: all 0.15s;
+	
+	&--bold-border {
+		border: 1px solid #ffffff;
+	}
+	
+	&--default {
+		color: $u-content-color;
+		border-color: #c0c4cc;
+		background-color: #ffffff;
+	}
+	
+	&--primary {
+		color: #ffffff;
+		border-color: $u-type-primary;
+		background-color: $u-type-primary;
+	}
+	
+	&--success {
+		color: #ffffff;
+		border-color: $u-type-success;
+		background-color: $u-type-success;
+	}
+	
+	&--error {
+		color: #ffffff;
+		border-color: $u-type-error;
+		background-color: $u-type-error;
+	}
+	
+	&--warning {
+		color: #ffffff;
+		border-color: $u-type-warning;
+		background-color: $u-type-warning;
+	}
+	
+	&--default--disabled {
+		color: #ffffff;
+		border-color: #e4e7ed;
+		background-color: #ffffff;
+	}
+	
+	&--primary--disabled {
+		color: #ffffff!important;
+		border-color: $u-type-primary-disabled!important;
+		background-color: $u-type-primary-disabled!important;
+	}
+	
+	&--success--disabled {
+		color: #ffffff!important;
+		border-color: $u-type-success-disabled!important;
+		background-color: $u-type-success-disabled!important;
+	}
+	
+	&--error--disabled {
+		color: #ffffff!important;
+		border-color: $u-type-error-disabled!important;
+		background-color: $u-type-error-disabled!important;
+	}
+	
+	&--warning--disabled {
+		color: #ffffff!important;
+		border-color: $u-type-warning-disabled!important;
+		background-color: $u-type-warning-disabled!important;
+	}
+	
+	&--primary--plain {
+		color: $u-type-primary!important;
+		border-color: $u-type-primary-disabled!important;
+		background-color: $u-type-primary-light!important;
+	}
+	
+	&--success--plain {
+		color: $u-type-success!important;
+		border-color: $u-type-success-disabled!important;
+		background-color: $u-type-success-light!important;
+	}
+	
+	&--error--plain {
+		color: $u-type-error!important;
+		border-color: $u-type-error-disabled!important;
+		background-color: $u-type-error-light!important;
+	}
+	
+	&--warning--plain {
+		color: $u-type-warning!important;
+		border-color: $u-type-warning-disabled!important;
+		background-color: $u-type-warning-light!important;
+	}
+}
+
+.u-hairline-border:after {
+	content: ' ';
+	position: absolute;
+	pointer-events: none;
+	// 设置为border-box，意味着下面的scale缩小为0.5，实际上缩小的是伪元素的内容（border-box意味着内容不含border）
+	box-sizing: border-box;
+	// 中心点作为变形(scale())的原点
+	-webkit-transform-origin: 0 0;
+	transform-origin: 0 0;
+	left: 0;
+	top: 0;
+	width: 199.8%;
+	height: 199.7%;
+	-webkit-transform: scale(0.5, 0.5);
+	transform: scale(0.5, 0.5);
+	border: 1px solid currentColor;
+	z-index: 1;
+}
+
+.u-wave-ripple {
+	z-index: 0;
+	position: absolute;
+	border-radius: 100%;
+	background-clip: padding-box;
+	pointer-events: none;
+	user-select: none;
+	transform: scale(0);
+	opacity: 1;
+	transform-origin: center;
+}
+
+.u-wave-ripple.u-wave-active {
+	opacity: 0;
+	transform: scale(2);
+	transition: opacity 1s linear, transform 0.4s linear;
+}
+
+.u-round-circle {
+	border-radius: 100rpx;
+}
+
+.u-round-circle::after {
+	border-radius: 100rpx;
+}
+
+.u-loading::after {
+	background-color: hsla(0, 0%, 100%, 0.35);
+}
+
+.u-size-default {
+	font-size: 30rpx;
+	height: 80rpx;
+	line-height: 80rpx;
+}
+
+.u-size-medium {
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+	width: auto;
+	font-size: 26rpx;
+	height: 70rpx;
+	line-height: 70rpx;
+	padding: 0 80rpx;
+}
+
+.u-size-mini {
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+	width: auto;
+	font-size: 22rpx;
+	padding-top: 1px;
+	height: 50rpx;
+	line-height: 50rpx;
+	padding: 0 20rpx;
+}
+
+.u-primary-plain-hover {
+	color: #ffffff !important;
+	background: $u-type-primary-dark !important;
+}
+
+.u-default-plain-hover {
+	color: $u-type-primary-dark !important;
+	background: $u-type-primary-light !important;
+}
+
+.u-success-plain-hover {
+	color: #ffffff !important;
+	background: $u-type-success-dark !important;
+}
+
+.u-warning-plain-hover {
+	color: #ffffff !important;
+	background: $u-type-warning-dark !important;
+}
+
+.u-error-plain-hover {
+	color: #ffffff !important;
+	background: $u-type-error-dark !important;
+}
+
+.u-info-plain-hover {
+	color: #ffffff !important;
+	background: $u-type-info-dark !important;
+}
+
+.u-default-hover {
+	color: $u-type-primary-dark !important;
+	border-color: $u-type-primary-dark !important;
+	background-color: $u-type-primary-light !important;
+}
+
+.u-primary-hover {
+	background: $u-type-primary-dark !important;
+	color: #fff;
+}
+
+.u-success-hover {
+	background: $u-type-success-dark !important;
+	color: #fff;
+}
+
+.u-info-hover {
+	background: $u-type-info-dark !important;
+	color: #fff;
+}
+
+.u-warning-hover {
+	background: $u-type-warning-dark !important;
+	color: #fff;
+}
+
+.u-error-hover {
+	background: $u-type-error-dark !important;
+	color: #fff;
+}
+</style>

uview-ui/components/u-calendar/u-calendar.vue

@@ -0,0 +1,639 @@
+<template>
+	<u-popup closeable :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto"
+	 :safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex" :border-radius="borderRadius" :closeable="closeable">
+		<view class="u-calendar">
+			<view class="u-calendar__header">
+				<view class="u-calendar__header__text" v-if="!$slots['tooltip']">
+					{{toolTip}}
+				</view>
+				<slot v-else name="tooltip" />
+			</view>
+			<view class="u-calendar__action u-flex u-row-center">
+				<view class="u-calendar__action__icon">
+					<u-icon v-if="changeYear" name="arrow-left-double" :color="yearArrowColor" @click="changeYearHandler(0)"></u-icon>
+				</view>
+				<view class="u-calendar__action__icon">
+					<u-icon v-if="changeMonth" name="arrow-left" :color="monthArrowColor" @click="changeMonthHandler(0)"></u-icon>
+				</view>
+				<view class="u-calendar__action__text">{{ showTitle }}</view>
+				<view class="u-calendar__action__icon">
+					<u-icon v-if="changeMonth" name="arrow-right" :color="monthArrowColor" @click="changeMonthHandler(1)"></u-icon>
+				</view>
+				<view class="u-calendar__action__icon">
+					<u-icon v-if="changeYear" name="arrow-right-double" :color="yearArrowColor" @click="changeYearHandler(1)"></u-icon>
+				</view>
+			</view>
+			<view class="u-calendar__week-day">
+				<view class="u-calendar__week-day__text" v-for="(item, index) in weekDayZh" :key="index">{{item}}</view>
+			</view>
+			<view class="u-calendar__content">
+				<!-- 前置空白部分 -->
+				<block v-for="(item, index) in weekdayArr" :key="index">
+					<view class="u-calendar__content__item"></view>
+				</block>
+				<view class="u-calendar__content__item" :class="{
+					'u-hover-class':openDisAbled(year,month,index+1),
+					'u-calendar__content--start-date': (mode == 'range' && startDate==`${year}-${month}-${index+1}`) || mode== 'date',
+					'u-calendar__content--end-date':(mode== 'range' && endDate==`${year}-${month}-${index+1}`) || mode == 'date'
+				}" :style="{backgroundColor: getColor(index,1)}" v-for="(item, index) in daysArr" :key="index"
+				 @tap="dateClick(index)">
+					<view class="u-calendar__content__item__inner" :style="{color: getColor(index,2)}">
+						<view>{{ index + 1 }}</view>
+					</view>
+					<view class="u-calendar__content__item__tips" :style="{color:activeColor}" v-if="mode== 'range' && startDate==`${year}-${month}-${index+1}` && startDate!=endDate">{{startText}}</view>
+					<view class="u-calendar__content__item__tips" :style="{color:activeColor}" v-if="mode== 'range' && endDate==`${year}-${month}-${index+1}`">{{endText}}</view>
+				</view>
+				<view class="u-calendar__content__bg-month">{{month}}</view>
+			</view>
+			<view class="u-calendar__bottom">
+				<view class="u-calendar__bottom__choose">
+					<text>{{mode == 'date' ? activeDate : startDate}}</text>
+					<text v-if="endDate">至{{endDate}}</text>
+				</view>
+				<view class="u-calendar__bottom__btn">
+					<u-button :type="btnType" shape="circle" size="default" @click="btnFix(false)">确定</u-button>
+				</view>
+			</view>
+		</view>
+	</u-popup>
+</template>
+<script>
+	/**
+	 * calendar 日历
+	 * @description 此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中。
+	 * @tutorial http://uviewui.com/components/calendar.html
+	 * @property {String} mode 选择日期的模式，date-为单个日期，range-为选择日期范围
+	 * @property {Boolean} v-model 布尔值变量，用于控制日历的弹出与收起
+	 * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
+	 * @property {Boolean} change-year 是否显示顶部的切换年份方向的按钮(默认true)
+	 * @property {Boolean} change-month 是否显示顶部的切换月份方向的按钮(默认true)
+	 * @property {String Number} max-year 可切换的最大年份(默认2050)
+	 * @property {String Number} min-year 最小可选日期(默认1950)
+	 * @property {String Number} min-date 可切换的最小年份(默认1950-01-01)
+	 * @property {String Number} max-date 最大可选日期(默认当前日期)
+	 * @property {String Number} 弹窗顶部左右两边的圆角值，单位rpx(默认20)
+	 * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭日历(默认true)
+	 * @property {String} month-arrow-color 月份切换按钮箭头颜色(默认#606266)
+	 * @property {String} year-arrow-color 年份切换按钮箭头颜色(默认#909399)
+	 * @property {String} color 日期字体的默认颜色(默认#303133)
+	 * @property {String} active-bg-color 起始/结束日期按钮的背景色(默认#2979ff)
+	 * @property {String Number} z-index 弹出时的z-index值(默认10075)
+	 * @property {String} active-color 起始/结束日期按钮的字体颜色(默认#ffffff)
+	 * @property {String} range-bg-color 起始/结束日期之间的区域的背景颜色(默认rgba(41,121,255,0.13))
+	 * @property {String} range-color 选择范围内字体颜色(默认#2979ff)
+	 * @property {String} start-text 起始日期底部的提示文字(默认 '开始')
+	 * @property {String} end-text 结束日期底部的提示文字(默认 '结束')
+	 * @property {String} btn-type 底部确定按钮的主题(默认 'primary')
+	 * @property {String} toolTip 顶部提示文字，如设置名为tooltip的slot，此参数将失效(默认 '选择日期')
+	 * @property {Boolean} closeable 是否显示右上角的关闭图标(默认true)
+	 * @example <u-calendar v-model="show" :mode="mode"></u-calendar>
+	 */
+	
+	export default {
+		name: 'u-calendar',
+		props: {
+			safeAreaInsetBottom: {
+				type: Boolean,
+				default: false
+			},
+			// 是否允许通过点击遮罩关闭Picker
+			maskCloseAble: {
+				type: Boolean,
+				default: true
+			},
+			// 通过双向绑定控制组件的弹出与收起
+			value: {
+				type: Boolean,
+				default: false
+			},
+			// 弹出的z-index值
+			zIndex: {
+				type: [String, Number],
+				default: 0
+			},
+			// 是否允许切换年份
+			changeYear: {
+				type: Boolean,
+				default: true
+			},
+			// 是否允许切换月份
+			changeMonth: {
+				type: Boolean,
+				default: true
+			},
+			// date-单个日期选择，range-开始日期+结束日期选择
+			mode: {
+				type: String,
+				default: 'date'
+			},
+			// 可切换的最大年份
+			maxYear: {
+				type: [Number, String],
+				default: 2050
+			},
+			// 可切换的最小年份
+			minYear: {
+				type: [Number, String],
+				default: 1950
+			},
+			// 最小可选日期(不在范围内日期禁用不可选)
+			minDate: {
+				type: [Number, String],
+				default: '1950-01-01'
+			},
+			/**
+			 * 最大可选日期
+			 * 默认最大值为今天，之后的日期不可选
+			 * 2030-12-31
+			 * */
+			maxDate: {
+				type: [Number, String],
+				default: ''
+			},
+			// 弹窗顶部左右两边的圆角值
+			borderRadius: {
+				type: [String, Number],
+				default: 20
+			},
+			// 月份切换按钮箭头颜色
+			monthArrowColor: {
+				type: String,
+				default: '#606266'
+			},
+			// 年份切换按钮箭头颜色
+			yearArrowColor: {
+				type: String,
+				default: '#909399'
+			},
+			// 默认日期字体颜色
+			color: {
+				type: String,
+				default: '#303133'
+			},
+			// 选中|起始结束日期背景色
+			activeBgColor: {
+				type: String,
+				default: '#2979ff'
+			},
+			// 选中|起始结束日期字体颜色
+			activeColor: {
+				type: String,
+				default: '#ffffff'
+			},
+			// 范围内日期背景色
+			rangeBgColor: {
+				type: String,
+				default: 'rgba(41,121,255,0.13)'
+			}, 
+			// 范围内日期字体颜色
+			rangeColor: {
+				type: String,
+				default: '#2979ff'
+			},
+			// mode=range时生效，起始日期自定义文案
+			startText: {
+				type: String,
+				default: '开始'
+			},
+			// mode=range时生效，结束日期自定义文案
+			endText: {
+				type: String,
+				default: '结束'
+			},
+			//按钮样式类型
+			btnType: {
+				type: String,
+				default: 'primary'
+			},
+			// 当前选中日期带选中效果
+			isActiveCurrent: {
+				type: Boolean,
+				default: true
+			},
+			// 切换年月是否触发事件 mode=date时生效
+			isChange: {
+				type: Boolean,
+				default: false
+			},
+			// 是否显示右上角的关闭图标
+			closeable: {
+				type: Boolean,
+				default: true
+			},
+			// 顶部的提示文字
+			toolTip: {
+				type: String,
+				default: '选择日期'
+			}
+		},
+		data() {
+			return {
+				// 星期几,值为1-7
+				weekday: 1, 
+				weekdayArr:[],
+				// 当前月有多少天
+				days: 0, 
+				daysArr:[],
+				showTitle: '',
+				year: 2020,
+				month: 0,
+				day: 0,
+				startYear: 0,
+				startMonth: 0,
+				startDay: 0,
+				endYear: 0,
+				endMonth: 0,
+				endDay: 0,
+				today: '',
+				activeDate: '',
+				startDate: '',
+				endDate: '',
+				isStart: true,
+				min: null,
+				max: null,
+				weekDayZh: ['日', '一', '二', '三', '四', '五', '六']
+			};
+		},
+		computed: {
+			dataChange() {
+				return `${this.mode}-${this.minDate}-${this.maxDate}`;
+			},
+			uZIndex() {
+				// 如果用户有传递z-index值，优先使用
+				return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
+			}
+		},
+		watch: {
+			dataChange(val) {
+				this.init()
+			}
+		},
+		created() {
+			this.init()
+		},
+		methods: {
+			getColor(index, type) {
+				let color = type == 1 ? '' : this.color;
+				let day = index + 1
+				let date = `${this.year}-${this.month}-${day}`
+				let timestamp = new Date(date.replace(/\-/g, '/')).getTime();
+				let start = this.startDate.replace(/\-/g, '/')
+				let end = this.endDate.replace(/\-/g, '/')
+				if ((this.isActiveCurrent && this.activeDate == date) || this.startDate == date || this.endDate == date) {
+					color = type == 1 ? this.activeBgColor : this.activeColor;
+				} else if (this.endDate && timestamp > new Date(start).getTime() && timestamp < new Date(end).getTime()) {
+					color = type == 1 ? this.rangeBgColor : this.rangeColor;
+				}
+				return color;
+			},
+			init() {
+				let now = new Date();
+				this.year = now.getFullYear();
+				this.month = now.getMonth() + 1;
+				this.day = now.getDate();
+				this.today = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
+				this.activeDate = this.today;
+				this.min = this.initDate(this.minDate);
+				this.max = this.initDate(this.maxDate || this.today);
+				this.startDate = "";
+				this.startYear = 0;
+				this.startMonth = 0;
+				this.startDay = 0;
+				this.endYear = 0;
+				this.endMonth = 0;
+				this.endDay = 0;
+				this.endDate = "";
+				this.isStart = true;
+				this.changeData();
+			},
+			//日期处理
+			initDate(date) {
+				let fdate = date.split('-');
+				return {
+					year: Number(fdate[0] || 1920),
+					month: Number(fdate[1] || 1),
+					day: Number(fdate[2] || 1)
+				}
+			},
+			openDisAbled: function(year, month, day) {
+				let bool = true;
+				let date = `${year}/${month}/${day}`;
+				// let today = this.today.replace(/\-/g, '/');
+				let min = `${this.min.year}/${this.min.month}/${this.min.day}`;
+				let max = `${this.max.year}/${this.max.month}/${this.max.day}`;
+				let timestamp = new Date(date).getTime();
+				if (timestamp >= new Date(min).getTime() && timestamp <= new Date(max).getTime()) {
+					bool = false;
+				}
+				return bool;
+			},
+			generateArray: function(start, end) {
+				return Array.from(new Array(end + 1).keys()).slice(start);
+			},
+			formatNum: function(num) {
+				return num < 10 ? '0' + num : num + '';
+			},
+			//一个月有多少天
+			getMonthDay(year, month) {
+				let days = new Date(year, month, 0).getDate();
+				return days;
+			},
+			getWeekday(year, month) {
+				let date = new Date(`${year}/${month}/01 00:00:00`);
+				return date.getDay();
+			},
+			checkRange(year) {
+				let overstep = false;
+				if (year < this.minYear || year > this.maxYear) {
+					uni.showToast({
+						title: "日期超出范围啦~",
+						icon: 'none'
+					})
+					overstep = true;
+				}
+				return overstep;
+			},
+			changeMonthHandler(isAdd) {
+				if (isAdd) {
+					let month = this.month + 1;
+					let year = month > 12 ? this.year + 1 : this.year;
+					if (!this.checkRange(year)) {
+						this.month = month > 12 ? 1 : month;
+						this.year = year;
+						this.changeData();
+					}
+
+				} else {
+					let month = this.month - 1;
+					let year = month < 1 ? this.year - 1 : this.year;
+					if (!this.checkRange(year)) {
+						this.month = month < 1 ? 12 : month;
+						this.year = year;
+						this.changeData();
+					}
+				}
+			},
+			changeYearHandler(isAdd) {
+				let year = isAdd ? this.year + 1 : this.year - 1;
+				if (!this.checkRange(year)) {
+					this.year = year;
+					this.changeData();
+				}
+			},
+			changeData() {
+				this.days = this.getMonthDay(this.year, this.month);
+				this.daysArr=this.generateArray(1,this.days)
+				this.weekday = this.getWeekday(this.year, this.month);
+				this.weekdayArr=this.generateArray(1,this.weekday)
+				this.showTitle = `${this.year}年${this.month}月`;
+				if (this.isChange && this.mode == 'date') {
+					this.btnFix(true);
+				}
+			},
+			dateClick: function(day) {
+				day += 1;
+				if (!this.openDisAbled(this.year, this.month, day)) {
+					this.day = day;
+					let date = `${this.year}-${this.month}-${day}`;
+					if (this.mode == 'date') {
+						this.activeDate = date;
+					} else {
+						let compare = new Date(date.replace(/\-/g, '/')).getTime() < new Date(this.startDate.replace(/\-/g, '/')).getTime()
+						if (this.isStart || compare) {
+							this.startDate = date;
+							this.startYear = this.year;
+							this.startMonth = this.month;
+							this.startDay = this.day;
+							this.endYear = 0;
+							this.endMonth = 0;
+							this.endDay = 0;
+							this.endDate = "";
+							this.activeDate = "";
+							this.isStart = false;
+						} else {
+							this.endDate = date;
+							this.endYear = this.year;
+							this.endMonth = this.month;
+							this.endDay = this.day;
+							this.isStart = true;
+						}
+					}
+				}
+			},
+			close() {
+				// 修改通过v-model绑定的父组件变量的值为false，从而隐藏日历弹窗
+				this.$emit('input', false);
+			},
+			getWeekText(date) {
+				date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`);
+				let week = date.getDay();
+				return '星期' + ['日', '一', '二', '三', '四', '五', '六'][week];
+			},
+			btnFix(show) {
+				if (!show) {
+					this.close();
+				}
+				if (this.mode == 'date') {
+					let arr = this.activeDate.split('-')
+					let year = this.isChange ? this.year : Number(arr[0]);
+					let month = this.isChange ? this.month : Number(arr[1]);
+					let day = this.isChange ? this.day : Number(arr[2]);
+					//当前月有多少天
+					let days = this.getMonthDay(year, month);
+					let result = `${year}-${this.formatNum(month)}-${this.formatNum(day)}`;
+					let weekText = this.getWeekText(result);
+					let isToday = false;
+					if (`${year}-${month}-${day}` == this.today) {
+						//今天
+						isToday = true;
+					}
+					this.$emit('change', {
+						year: year,
+						month: month,
+						day: day,
+						days: days,
+						result: result,
+						week: weekText,
+						isToday: isToday,
+						// switch: show //是否是切换年月操作
+					});
+				} else {
+					if (!this.startDate || !this.endDate) return;
+					let startMonth = this.formatNum(this.startMonth);
+					let startDay = this.formatNum(this.startDay);
+					let startDate = `${this.startYear}-${startMonth}-${startDay}`;
+					let startWeek = this.getWeekText(startDate)
+
+					let endMonth = this.formatNum(this.endMonth);
+					let endDay = this.formatNum(this.endDay);
+					let endDate = `${this.endYear}-${endMonth}-${endDay}`;
+					let endWeek = this.getWeekText(endDate);
+					this.$emit('change', {
+						startYear: this.startYear,
+						startMonth: this.startMonth,
+						startDay: this.startDay,
+						startDate: startDate,
+						startWeek: startWeek,
+						endYear: this.endYear,
+						endMonth: this.endMonth,
+						endDay: this.endDay,
+						endDate: endDate,
+						endWeek: endWeek
+					});
+				}
+			}
+		}
+	};
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+	
+	.u-calendar {
+		color: $u-content-color;
+		
+		&__header {
+			width: 100%;
+			box-sizing: border-box;
+			font-size: 30rpx;
+			background-color: #fff;
+			color: $u-main-color;
+			
+			&__text {
+				margin-top: 30rpx;
+				padding: 0 60rpx;
+				@include vue-flex;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+		
+		&__action {
+			padding: 40rpx 0 40rpx 0;
+			
+			&__icon {
+				margin: 0 16rpx;
+			}
+			
+			&__text {
+				padding: 0 16rpx;
+				color: $u-main-color;
+				font-size: 32rpx;
+				line-height: 32rpx;
+				font-weight: bold;
+			}
+		}
+	
+		&__week-day {
+			@include vue-flex;
+			align-items: center;
+			justify-content: center;
+			padding: 6px 0;
+			overflow: hidden;
+			
+			&__text {
+				flex: 1;
+				text-align: center;
+			}
+		}
+	
+		&__content {
+			width: 100%;
+			@include vue-flex;
+			flex-wrap: wrap;
+			padding: 6px 0;
+			box-sizing: border-box;
+			background-color: #fff;
+			position: relative;
+			
+			&--end-date {
+				border-top-right-radius: 8rpx;
+				border-bottom-right-radius: 8rpx;
+			}
+			
+			&--start-date {
+				border-top-left-radius: 8rpx;
+				border-bottom-left-radius: 8rpx;
+			}
+			
+			&__item {
+				width: 14.2857%;
+				@include vue-flex;
+				align-items: center;
+				justify-content: center;
+				padding: 6px 0;
+				overflow: hidden;
+				position: relative;
+				z-index: 2;
+				
+				&__inner {
+					height: 84rpx;
+					@include vue-flex;
+					align-items: center;
+					justify-content: center;
+					flex-direction: column;
+					font-size: 32rpx;
+					position: relative;
+					border-radius: 50%;
+					
+					&__desc {
+						width: 100%;
+						font-size: 24rpx;
+						line-height: 24rpx;
+						transform: scale(0.75);
+						transform-origin: center center;
+						position: absolute;
+						left: 0;
+						text-align: center;
+						bottom: 2rpx;
+					}
+				}
+				
+				&__tips {
+					width: 100%;
+					font-size: 24rpx;
+					line-height: 24rpx;
+					position: absolute;
+					left: 0;
+					transform: scale(0.8);
+					transform-origin: center center;
+					text-align: center;
+					bottom: 8rpx;
+					z-index: 2;
+				}
+			}
+			
+			&__bg-month {
+				position: absolute;
+				font-size: 130px;
+				line-height: 130px;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -50%);
+				color: #e4e7ed;
+				z-index: 1;
+			}
+		}
+	
+		&__bottom {
+			width: 100%;
+			@include vue-flex;
+			align-items: center;
+			justify-content: center;
+			flex-direction: column;
+			background-color: #fff;
+			padding: 0 40rpx 30rpx;
+			box-sizing: border-box;
+			font-size: 24rpx;
+			color: $u-tips-color;
+			
+			&__choose {
+				height: 50rpx;
+			}
+			
+			&__btn {
+				width: 100%;
+			}
+		}
+	}
+</style>

uview-ui/components/u-car-keyboard/u-car-keyboard.vue

@@ -0,0 +1,257 @@
+<template>
+	<view class="u-keyboard" @touchmove.stop.prevent="() => {}">
+		<view class="u-keyboard-grids">
+			<block>
+				<view class="u-keyboard-grids-item" v-for="(group, i) in abc ? EngKeyBoardList : areaList" :key="i">
+					<view :hover-stay-time="100" @tap="carInputClick(i, j)" hover-class="u-carinput-hover" class="u-keyboard-grids-btn"
+					 v-for="(item, j) in group" :key="j">
+						{{ item }}
+					</view>
+				</view>
+				<view @touchstart="backspaceClick" @touchend="clearTimer" :hover-stay-time="100" class="u-keyboard-back"
+				 hover-class="u-hover-class">
+					<u-icon :size="38" name="backspace" :bold="true"></u-icon>
+				</view>
+				<view :hover-stay-time="100" class="u-keyboard-change" hover-class="u-carinput-hover" @tap="changeCarInputMode">
+					<text class="zh" :class="[!abc ? 'active' : 'inactive']">中</text>
+					/
+					<text class="en" :class="[abc ? 'active' : 'inactive']">英</text>
+				</view>
+			</block>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "u-keyboard",
+		props: {
+			// 是否打乱键盘按键的顺序
+			random: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				// 车牌输入时，abc=true为输入车牌号码，bac=false为输入省份中文简称
+				abc: false
+			};
+		},
+		computed: {
+			areaList() {
+				let data = [
+					'京',
+					'沪',
+					'粤',
+					'津',
+					'冀',
+					'豫',
+					'云',
+					'辽',
+					'黑',
+					'湘',
+					'皖',
+					'鲁',
+					'苏',
+					'浙',
+					'赣',
+					'鄂',
+					'桂',
+					'甘',
+					'晋',
+					'陕',
+					'蒙',
+					'吉',
+					'闽',
+					'贵',
+					'渝',
+					'川',
+					'青',
+					'琼',
+					'宁',
+					'挂',
+					'藏',
+					'港',
+					'澳',
+					'新',
+					'使',
+					'学'
+				];
+				let tmp = [];
+				// 打乱顺序
+				if (this.random) data = this.$u.randomArray(data);
+				// 切割成二维数组
+				tmp[0] = data.slice(0, 10);
+				tmp[1] = data.slice(10, 20);
+				tmp[2] = data.slice(20, 30);
+				tmp[3] = data.slice(30, 36);
+				return tmp;
+			},
+			EngKeyBoardList() {
+				let data = [
+					1,
+					2,
+					3,
+					4,
+					5,
+					6,
+					7,
+					8,
+					9,
+					0,
+					'Q',
+					'W',
+					'E',
+					'R',
+					'T',
+					'Y',
+					'U',
+					'I',
+					'O',
+					'P',
+					'A',
+					'S',
+					'D',
+					'F',
+					'G',
+					'H',
+					'J',
+					'K',
+					'L',
+					'Z',
+					'X',
+					'C',
+					'V',
+					'B',
+					'N',
+					'M'
+				];
+				let tmp = [];
+				if (this.random) data = this.$u.randomArray(data);
+				tmp[0] = data.slice(0, 10);
+				tmp[1] = data.slice(10, 20);
+				tmp[2] = data.slice(20, 30);
+				tmp[3] = data.slice(30, 36);
+				return tmp;
+			}
+		},
+		methods: {
+			// 点击键盘按钮
+			carInputClick(i, j) {
+				let value = '';
+				// 不同模式，获取不同数组的值
+				if (this.abc) value = this.EngKeyBoardList[i][j];
+				else value = this.areaList[i][j];
+				this.$emit('change', value);
+			},
+			// 修改汽车牌键盘的输入模式，中文|英文
+			changeCarInputMode() {
+				this.abc = !this.abc;
+			},
+			// 点击退格键
+			backspaceClick() {
+				this.$emit('backspace');
+				clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
+				this.timer = null;
+				this.timer = setInterval(() => {
+					this.$emit('backspace');
+				}, 250);
+			},
+			clearTimer() {
+				clearInterval(this.timer);
+				this.timer = null;
+			},
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+
+	.u-keyboard-grids {
+		background: rgb(215, 215, 217);
+		padding: 24rpx 0;
+		position: relative;
+	}
+
+	.u-keyboard-grids-item {
+		@include vue-flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.u-keyboard-grids-btn {
+		text-decoration: none;
+		width: 62rpx;
+		flex: 0 0 64rpx;
+		height: 80rpx;
+		/* #ifndef APP-NVUE */
+		display: inline-flex;		
+		/* #endif */
+		font-size: 36rpx;
+		text-align: center;
+		line-height: 80rpx;
+		background-color: #fff;
+		margin: 8rpx 5rpx;
+		border-radius: 8rpx;
+		box-shadow: 0 2rpx 0rpx #888992;
+		font-weight: 500;
+		justify-content: center;
+	}
+
+	.u-carinput-hover {
+		background-color: rgb(185, 188, 195) !important;
+	}
+
+	.u-keyboard-back {
+		position: absolute;
+		width: 96rpx;
+		right: 22rpx;
+		bottom: 32rpx;
+		height: 80rpx;
+		background-color: rgb(185, 188, 195);
+		@include vue-flex;
+		align-items: center;
+		border-radius: 8rpx;
+		justify-content: center;
+		box-shadow: 0 2rpx 0rpx #888992;
+	}
+
+	.u-keyboard-change {
+		font-size: 24rpx;
+		box-shadow: 0 2rpx 0rpx #888992;
+		position: absolute;
+		width: 96rpx;
+		left: 22rpx;
+		line-height: 1;
+		bottom: 32rpx;
+		height: 80rpx;
+		background-color: #ffffff;
+		@include vue-flex;
+		align-items: center;
+		border-radius: 8rpx;
+		justify-content: center;
+	}
+
+	.u-keyboard-change .inactive.zh {
+		transform: scale(0.85) translateY(-10rpx);
+	}
+
+	.u-keyboard-change .inactive.en {
+		transform: scale(0.85) translateY(10rpx);
+	}
+
+	.u-keyboard-change .active {
+		color: rgb(237, 112, 64);
+		font-size: 30rpx;
+	}
+
+	.u-keyboard-change .zh {
+		transform: translateY(-10rpx);
+	}
+
+	.u-keyboard-change .en {
+		transform: translateY(10rpx);
+	}
+</style>

uview-ui/components/u-card/u-card.vue

@@ -0,0 +1,299 @@
+<template>
+	<view
+		class="u-card"
+		@tap.stop="click"
+		:class="{ 'u-border': border, 'u-card-full': full, 'u-card--border': borderRadius > 0 }"
+		:style="{
+			borderRadius: borderRadius + 'rpx',
+			margin: margin,
+			boxShadow: boxShadow
+		}"
+	>
+		<view
+			v-if="showHead"
+			class="u-card__head"
+			:style="[{padding: padding + 'rpx'}, headStyle]"
+			:class="{
+				'u-border-bottom': headBorderBottom
+			}"
+			@tap="headClick"
+		>
+			<view v-if="!$slots.head" class="u-flex u-row-between">
+				<view class="u-card__head--left u-flex u-line-1" v-if="title">
+					<image
+						:src="thumb"
+						class="u-card__head--left__thumb"
+						mode="aspectfull"
+						v-if="thumb"
+						:style="{ 
+							height: thumbWidth + 'rpx', 
+							width: thumbWidth + 'rpx', 
+							borderRadius: thumbCircle ? '100rpx' : '6rpx' 
+						}"
+					></image>
+					<text
+						class="u-card__head--left__title u-line-1"
+						:style="{
+							fontSize: titleSize + 'rpx',
+							color: titleColor
+						}"
+					>
+						{{ title }}
+					</text>
+				</view>
+				<view class="u-card__head--right u-line-1" v-if="subTitle">
+					<text
+						class="u-card__head__title__text"
+						:style="{
+							fontSize: subTitleSize + 'rpx',
+							color: subTitleColor
+						}"
+					>
+						{{ subTitle }}
+					</text>
+				</view>
+			</view>
+			<slot name="head" v-else />
+		</view>
+		<view @tap="bodyClick" class="u-card__body" :style="[{padding: padding + 'rpx'}, bodyStyle]"><slot name="body" /></view>
+		<view
+			v-if="showFoot"
+			class="u-card__foot"
+			 @tap="footClick"
+			:style="[{padding: $slots.foot ? padding + 'rpx' : 0}, footStyle]"
+			:class="{
+				'u-border-top': footBorderTop
+			}"
+		>
+			<slot name="foot" />
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * card 卡片
+ * @description 卡片组件一般用于多个列表条目，且风格统一的场景
+ * @tutorial https://www.uviewui.com/components/card.html
+ * @property {Boolean} full 卡片与屏幕两侧是否留空隙（默认false）
+ * @property {String} title 头部左边的标题
+ * @property {String} title-color 标题颜色（默认#303133）
+ * @property {String | Number} title-size 标题字体大小，单位rpx（默认30）
+ * @property {String} sub-title 头部右边的副标题
+ * @property {String} sub-title-color 副标题颜色（默认#909399）
+ * @property {String | Number} sub-title-size 副标题字体大小（默认26）
+ * @property {Boolean} border 是否显示边框（默认true）
+ * @property {String | Number} index 用于标识点击了第几个卡片
+ * @property {String} box-shadow 卡片外围阴影，字符串形式（默认none）
+ * @property {String} margin 卡片与屏幕两边和上下元素的间距，需带单位，如"30rpx 20rpx"（默认30rpx）
+ * @property {String | Number} border-radius 卡片整体的圆角值，单位rpx（默认16）
+ * @property {Object} head-style 头部自定义样式，对象形式
+ * @property {Object} body-style 中部自定义样式，对象形式
+ * @property {Object} foot-style 底部自定义样式，对象形式
+ * @property {Boolean} head-border-bottom 是否显示头部的下边框（默认true）
+ * @property {Boolean} foot-border-top 是否显示底部的上边框（默认true）
+ * @property {Boolean} show-head 是否显示头部（默认true）
+ * @property {Boolean} show-head 是否显示尾部（默认true）
+ * @property {String} thumb 缩略图路径，如设置将显示在标题的左边，不建议使用相对路径
+ * @property {String | Number} thumb-width 缩略图的宽度，高等于宽，单位rpx（默认60）
+ * @property {Boolean} thumb-circle 缩略图是否为圆形（默认false）
+ * @event {Function} click 整个卡片任意位置被点击时触发
+ * @event {Function} head-click 卡片头部被点击时触发
+ * @event {Function} body-click 卡片主体部分被点击时触发
+ * @event {Function} foot-click 卡片底部部分被点击时触发
+ * @example <u-card padding="30" title="card"></u-card>
+ */
+export default {
+	name: 'u-card',
+	props: {
+		// 与屏幕两侧是否留空隙
+		full: {
+			type: Boolean,
+			default: false
+		},
+		// 标题
+		title: {
+			type: String,
+			default: ''
+		},
+		// 标题颜色
+		titleColor: {
+			type: String,
+			default: '#303133'
+		},
+		// 标题字体大小，单位rpx
+		titleSize: {
+			type: [Number, String],
+			default: '30'
+		},
+		// 副标题
+		subTitle: {
+			type: String,
+			default: ''
+		},
+		// 副标题颜色
+		subTitleColor: {
+			type: String,
+			default: '#909399'
+		},
+		// 副标题字体大小，单位rpx
+		subTitleSize: {
+			type: [Number, String],
+			default: '26'
+		},
+		// 是否显示外部边框，只对full=false时有效(卡片与边框有空隙时)
+		border: {
+			type: Boolean,
+			default: true
+		},
+		// 用于标识点击了第几个
+		index: {
+			type: [Number, String, Object],
+			default: ''
+		},
+		// 用于隔开上下左右的边距，带单位的写法，如："30rpx 30rpx"，"20rpx 20rpx 30rpx 30rpx"
+		margin: {
+			type: String,
+			default: '30rpx'
+		},
+		// card卡片的圆角
+		borderRadius: {
+			type: [Number, String],
+			default: '16'
+		},
+		// 头部自定义样式，对象形式
+		headStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 主体自定义样式，对象形式
+		bodyStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 底部自定义样式，对象形式
+		footStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 头部是否下边框
+		headBorderBottom: {
+			type: Boolean,
+			default: true
+		},
+		// 底部是否有上边框
+		footBorderTop: {
+			type: Boolean,
+			default: true
+		},
+		// 标题左边的缩略图
+		thumb: {
+			type: String,
+			default: ''
+		},
+		// 缩略图宽高，单位rpx
+		thumbWidth: {
+			type: [String, Number],
+			default: '60'
+		},
+		// 缩略图是否为圆形
+		thumbCircle: {
+			type: Boolean,
+			default: false
+		},
+		// 给head，body，foot的内边距
+		padding: {
+			type: [String, Number],
+			default: '30'
+		},
+		// 是否显示头部
+		showHead: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示尾部
+		showFoot: {
+			type: Boolean,
+			default: true
+		},
+		// 卡片外围阴影，字符串形式
+		boxShadow: {
+			type: String,
+			default: 'none'
+		}
+	},
+	data() {
+		return {};
+	},
+	methods: {
+		click() {
+			this.$emit('click', this.index);
+		},
+		headClick() {
+			this.$emit('head-click', this.index);
+		},
+		bodyClick() {
+			this.$emit('body-click', this.index);
+		},
+		footClick() {
+			this.$emit('foot-click', this.index);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+	
+.u-card {
+	position: relative;
+	overflow: hidden;
+	font-size: 28rpx;
+	background-color: #ffffff;
+	box-sizing: border-box;
+	
+	&-full {
+		// 如果是与屏幕之间不留空隙，应该设置左右边距为0
+		margin-left: 0 !important;
+		margin-right: 0 !important;
+		width: 100%;
+	}
+	
+	&--border:after {
+		border-radius: 16rpx;
+	}
+
+	&__head {
+		&--left {
+			color: $u-main-color;
+			
+			&__thumb {
+				margin-right: 16rpx;
+			}
+			
+			&__title {
+				max-width: 400rpx;
+			}
+		}
+
+		&--right {
+			color: $u-tips-color;
+			margin-left: 6rpx;
+		}
+	}
+
+	&__body {
+		color: $u-content-color;
+	}
+
+	&__foot {
+		color: $u-tips-color;
+	}
+}
+</style>

uview-ui/components/u-cell-group/u-cell-group.vue

@@ -0,0 +1,70 @@
+<template>
+	<view class="u-cell-box">
+		<view class="u-cell-title" v-if="title" :style="[titleStyle]">
+			{{title}}
+		</view>
+		<view class="u-cell-item-box" :class="{'u-border-bottom u-border-top': border}">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * cellGroup 单元格父组件Group
+	 * @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。搭配u-cell-item
+	 * @tutorial https://www.uviewui.com/components/cell.html
+	 * @property {String} title 分组标题
+	 * @property {Boolean} border 是否显示外边框（默认true）
+	 * @property {Object} title-style 分组标题的的样式，对象形式，如{'font-size': '24rpx'} 或 {'fontSize': '24rpx'}
+	 * @example <u-cell-group title="设置喜好">
+	 */
+	export default {
+		name: "u-cell-group",
+		props: {
+			// 分组标题
+			title: {
+				type: String,
+				default: ''
+			},
+			// 是否显示分组list上下边框
+			border: {
+				type: Boolean,
+				default: true
+			},
+			// 分组标题的样式，对象形式，注意驼峰属性写法
+			// 类似 {'font-size': '24rpx'} 和 {'fontSize': '24rpx'}
+			titleStyle: {
+				type: Object,
+				default () {
+					return {};
+				}
+			}
+		},
+		data() {
+			return {
+				index: 0,
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-cell-box {
+		width: 100%;
+	}
+
+	.u-cell-title {
+		padding: 30rpx 32rpx 10rpx 32rpx;
+		font-size: 30rpx;
+		text-align: left;
+		color: $u-tips-color;
+	}
+
+	.u-cell-item-box {
+		background-color: #FFFFFF;
+		flex-direction: row;
+	}
+</style>

uview-ui/components/u-cell-item/u-cell-item.vue

@@ -0,0 +1,316 @@
+<template>
+	<view
+		@tap="click"
+		class="u-cell"
+		:class="{ 'u-border-bottom': borderBottom, 'u-border-top': borderTop, 'u-col-center': center, 'u-cell--required': required }"
+		hover-stay-time="150"
+		:hover-class="hoverClass"
+		:style="{
+			backgroundColor: bgColor
+		}"
+	>
+		<u-icon :size="iconSize" :name="icon" v-if="icon" :custom-style="iconStyle" class="u-cell__left-icon-wrap"></u-icon>
+		<view class="u-flex" v-else>
+			<slot name="icon"></slot>
+		</view>
+		<view
+			class="u-cell_title"
+			:style="[
+				{
+					width: titleWidth ? titleWidth + 'rpx' : 'auto'
+				},
+				titleStyle
+			]"
+		>
+			<block v-if="title !== ''">{{ title }}</block>
+			<slot name="title" v-else></slot>
+
+			<view class="u-cell__label" v-if="label || $slots.label" :style="[labelStyle]">
+				<block v-if="label !== ''">{{ label }}</block>
+				<slot name="label" v-else></slot>
+			</view>
+		</view>
+
+		<view class="u-cell__value" :style="[valueStyle]">
+			<block class="u-cell__value" v-if="value !== ''">{{ value }}</block>
+			<slot v-else></slot>
+		</view>
+		<view class="u-flex u-cell_right" v-if="$slots['right-icon']">
+			<slot name="right-icon"></slot>
+		</view>
+		<u-icon v-if="arrow" name="arrow-right" :style="[arrowStyle]" class="u-icon-wrap u-cell__right-icon-wrap"></u-icon>
+	</view>
+</template>
+
+<script>
+/**
+ * cellItem 单元格Item
+ * @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。搭配u-cell-group使用
+ * @tutorial https://www.uviewui.com/components/cell.html
+ * @property {String} title 左侧标题
+ * @property {String} icon 左侧图标名，只支持uView内置图标，见Icon 图标
+ * @property {Object} icon-style 左边图标的样式，对象形式
+ * @property {String} value 右侧内容
+ * @property {String} label 标题下方的描述信息
+ * @property {Boolean} border-bottom 是否显示cell的下边框（默认true）
+ * @property {Boolean} border-top 是否显示cell的上边框（默认false）
+ * @property {Boolean} center 是否使内容垂直居中（默认false）
+ * @property {String} hover-class 是否开启点击反馈，none为无效果（默认true）
+ * // @property {Boolean} border-gap border-bottom为true时，Cell列表中间的条目的下边框是否与左边有一个间隔（默认true）
+ * @property {Boolean} arrow 是否显示右侧箭头（默认true）
+ * @property {Boolean} required 箭头方向，可选值（默认right）
+ * @property {Boolean} arrow-direction 是否显示左边表示必填的星号（默认false）
+ * @property {Object} title-style 标题样式，对象形式
+ * @property {Object} value-style 右侧内容样式，对象形式
+ * @property {Object} label-style 标题下方描述信息的样式，对象形式
+ * @property {String} bg-color 背景颜色（默认transparent）
+ * @property {String Number} index 用于在click事件回调中返回，标识当前是第几个Item
+ * @property {String Number} title-width 标题的宽度，单位rpx
+ * @example <u-cell-item icon="integral-fill" title="会员等级" value="新版本"></u-cell-item>
+ */
+export default {
+	name: 'u-cell-item',
+	props: {
+		// 左侧图标名称(只能uView内置图标)，或者图标src
+		icon: {
+			type: String,
+			default: ''
+		},
+		// 左侧标题
+		title: {
+			type: [String, Number],
+			default: ''
+		},
+		// 右侧内容
+		value: {
+			type: [String, Number],
+			default: ''
+		},
+		// 标题下方的描述信息
+		label: {
+			type: [String, Number],
+			default: ''
+		},
+		// 是否显示下边框
+		borderBottom: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示上边框
+		borderTop: {
+			type: Boolean,
+			default: false
+		},
+		// 多个cell中，中间的cell显示下划线时，下划线是否给一个到左边的距离
+		// 1.4.0版本废除此参数，默认边框由border-top和border-bottom提供，此参数会造成干扰
+		// borderGap: {
+		// 	type: Boolean,
+		// 	default: true
+		// },
+		// 是否开启点击反馈，即点击时cell背景为灰色，none为无效果
+		hoverClass: {
+			type: String,
+			default: 'u-cell-hover'
+		},
+		// 是否显示右侧箭头
+		arrow: {
+			type: Boolean,
+			default: true
+		},
+		// 内容是否垂直居中
+		center: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示左边表示必填的星号
+		required: {
+			type: Boolean,
+			default: false
+		},
+		// 标题的宽度，单位rpx
+		titleWidth: {
+			type: [Number, String],
+			default: ''
+		},
+		// 右侧箭头方向，可选值：right|up|down，默认为right
+		arrowDirection: {
+			type: String,
+			default: 'right'
+		},
+		// 控制标题的样式
+		titleStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 右侧显示内容的样式
+		valueStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 描述信息的样式
+		labelStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 背景颜色
+		bgColor: {
+			type: String,
+			default: 'transparent'
+		},
+		// 用于识别被点击的是第几个cell
+		index: {
+			type: [String, Number],
+			default: ''
+		},
+		// 是否使用lable插槽
+		useLabelSlot: {
+			type: Boolean,
+			default: false
+		},
+		// 左边图标的大小，单位rpx，只对传入icon字段时有效
+		iconSize: {
+			type: [Number, String],
+			default: 34
+		},
+		// 左边图标的样式，对象形式
+		iconStyle: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+	},
+	data() {
+		return {
+
+		};
+	},
+	computed: {
+		arrowStyle() {
+			let style = {};
+			if (this.arrowDirection == 'up') style.transform = 'rotate(-90deg)';
+			else if (this.arrowDirection == 'down') style.transform = 'rotate(90deg)';
+			else style.transform = 'rotate(0deg)';
+			return style;
+		}
+	},
+	methods: {
+		click() {
+			this.$emit('click', this.index);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+.u-cell {
+	@include vue-flex;
+	align-items: center;
+	position: relative;
+	/* #ifndef APP-NVUE */
+	box-sizing: border-box;
+	/* #endif */
+	width: 100%;
+	padding: 26rpx 32rpx;
+	font-size: 28rpx;
+	line-height: 54rpx;
+	color: $u-content-color;
+	background-color: #fff;
+	text-align: left;
+}
+
+.u-cell_title {
+	font-size: 28rpx;
+}
+
+.u-cell__left-icon-wrap {
+	margin-right: 10rpx;
+	font-size: 32rpx;
+}
+
+.u-cell__right-icon-wrap {
+	margin-left: 10rpx;
+	color: #969799;
+	font-size: 28rpx;
+}
+
+.u-cell__left-icon-wrap,
+.u-cell__right-icon-wrap {
+	@include vue-flex;
+	align-items: center;
+	height: 48rpx;
+}
+
+.u-cell-border:after {
+	position: absolute; 
+	/* #ifndef APP-NVUE */
+	box-sizing: border-box;
+	content: ' ';
+	pointer-events: none;
+	border-bottom: 1px solid $u-border-color;
+	/* #endif */
+	right: 0;
+	left: 0;
+	top: 0;
+	transform: scaleY(0.5);
+}
+
+.u-cell-border {
+	position: relative;
+}
+
+.u-cell__label {
+	margin-top: 6rpx;
+	font-size: 26rpx;
+	line-height: 36rpx;
+	color: $u-tips-color;
+	/* #ifndef APP-NVUE */
+	word-wrap: break-word;
+	/* #endif */
+}
+
+.u-cell__value {
+	overflow: hidden;
+	text-align: right;
+	/* #ifndef APP-NVUE */
+	vertical-align: middle;
+	/* #endif */
+	color: $u-tips-color;
+	font-size: 26rpx;
+}
+
+.u-cell__title,
+.u-cell__value {
+	flex: 1;
+}
+
+.u-cell--required {
+	/* #ifndef APP-NVUE */
+	overflow: visible;
+	/* #endif */
+	@include vue-flex;
+	align-items: center;
+}
+
+.u-cell--required:before {
+	position: absolute;
+	/* #ifndef APP-NVUE */
+	content: '*';
+	/* #endif */
+	left: 8px;
+	margin-top: 4rpx;
+	font-size: 14px;
+	color: $u-type-error;
+}
+
+.u-cell_right {
+	line-height: 1;
+}
+</style>

uview-ui/components/u-checkbox-group/u-checkbox-group.vue

@@ -0,0 +1,123 @@
+<template>
+	<view class="u-checkbox-group u-clearfix">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	import Emitter from '../../libs/util/emitter.js';
+	/**
+	 * checkboxGroup 开关选择器父组件Group
+	 * @description 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
+	 * @tutorial https://www.uviewui.com/components/checkbox.html
+	 * @property {String Number} max 最多能选中多少个checkbox（默认999）
+	 * @property {String Number} size 组件整体的大小，单位rpx（默认40）
+	 * @property {Boolean} disabled 是否禁用所有checkbox（默认false）
+	 * @property {String Number} icon-size 图标大小，单位rpx（默认20）
+	 * @property {Boolean} label-disabled 是否禁止点击文本操作checkbox(默认false)
+	 * @property {String} width 宽度，需带单位
+	 * @property {String} width 宽度，需带单位
+	 * @property {String} shape 外观形状，shape-方形，circle-圆形(默认circle)
+	 * @property {Boolean} wrap 是否每个checkbox都换行（默认false）
+	 * @property {String} active-color 选中时的颜色，应用到所有子Checkbox组件（默认#2979ff）
+	 * @event {Function} change 任一个checkbox状态发生变化时触发，回调为一个对象
+	 * @example <u-checkbox-group></u-checkbox-group>
+	 */
+	export default {
+		name: 'u-checkbox-group',
+		mixins: [Emitter],
+		props: {
+			// 最多能选中多少个checkbox
+			max: {
+				type: [Number, String],
+				default: 999
+			},
+			// 所有选中项的 name
+			// value: {
+			// 	default: Array,
+			// 	default() {
+			// 		return []
+			// 	}
+			// },
+			// 是否禁用所有复选框
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			// 在表单内提交时的标识符
+			name: {
+				type: [Boolean, String],
+				default: ''
+			},
+			// 是否禁止点击提示语选中复选框
+			labelDisabled: {
+				type: Boolean,
+				default: false
+			},
+			// 形状，square为方形，circle为原型
+			shape: {
+				type: String,
+				default: 'square'
+			},
+			// 选中状态下的颜色
+			activeColor: {
+				type: String,
+				default: '#2979ff'
+			},
+			// 组件的整体大小
+			size: {
+				type: [String, Number],
+				default: 34
+			},
+			// 每个checkbox占u-checkbox-group的宽度
+			width: {
+				type: String,
+				default: 'auto'
+			},
+			// 是否每个checkbox都换行
+			wrap: { 
+				type: Boolean,
+				default: false
+			},
+			// 图标的大小，单位rpx
+			iconSize: {
+				type: [String, Number],
+				default: 20
+			},
+		},
+		data() {
+			return {
+			}
+		},
+		created() {
+			// 如果将children定义在data中，在微信小程序会造成循环引用而报错
+			this.children = [];
+		},
+		methods: {
+			emitEvent() {
+				let values = [];
+				this.children.map(val => {
+					if(val.value) values.push(val.name);
+				})
+				this.$emit('change', values);
+				// 发出事件，用于在表单组件中嵌入checkbox的情况，进行验证
+				// 由于头条小程序执行迟钝，故需要用几十毫秒的延时
+				setTimeout(() => {
+					// 将当前的值发送到 u-form-item 进行校验
+					this.dispatch('u-form-item', 'on-form-change', values);
+				}, 60)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+
+	.u-checkbox-group {
+		/* #ifndef MP || APP-NVUE */
+		display: inline-flex;
+		flex-wrap: wrap;
+		/* #endif */
+	}
+</style>

uview-ui/components/u-checkbox/u-checkbox.vue

@@ -0,0 +1,284 @@
+<template>
+	<view class="u-checkbox" :style="[checkboxStyle]">
+		<view class="u-checkbox__icon-wrap" @tap="toggle" :class="[iconClass]" :style="[iconStyle]">
+			<u-icon class="u-checkbox__icon-wrap__icon" name="checkbox-mark" :size="checkboxIconSize" :color="iconColor"/>
+		</view>
+		<view class="u-checkbox__label" @tap="onClickLabel" :style="{
+			fontSize: $u.addUnit(labelSize)
+		}">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * checkbox 复选框
+	 * @description 该组件需要搭配checkboxGroup组件使用，以便用户进行操作时，获得当前复选框组的选中情况。
+	 * @tutorial https://www.uviewui.com/components/checkbox.html
+	 * @property {String Number} icon-size 图标大小，单位rpx（默认20）
+	 * @property {String Number} label-size label字体大小，单位rpx（默认28）
+	 * @property {String Number} name checkbox组件的标示符
+	 * @property {String} shape 形状，见官网说明（默认circle）
+	 * @property {Boolean} disabled 是否禁用
+	 * @property {Boolean} label-disabled 是否禁止点击文本操作checkbox
+	 * @property {String} active-color 选中时的颜色，如设置CheckboxGroup的active-color将失效
+	 * @event {Function} change 某个checkbox状态发生变化时触发，回调为一个对象
+	 * @example <u-checkbox v-model="checked" :disabled="false">天涯</u-checkbox>
+	 */
+	export default {
+		name: "u-checkbox",
+		props: {
+			// checkbox的名称
+			name: {
+				type: [String, Number],
+				default: ''
+			},
+			// 形状，square为方形，circle为原型
+			shape: {
+				type: String,
+				default: ''
+			},
+			// 是否为选中状态
+			value: {
+				type: Boolean,
+				default: false
+			},
+			// 是否禁用
+			disabled: {
+				type: [String, Boolean],
+				default: ''
+			},
+			// 是否禁止点击提示语选中复选框
+			labelDisabled: {
+				type: [String, Boolean],
+				default: ''
+			},
+			// 选中状态下的颜色，如设置此值，将会覆盖checkboxGroup的activeColor值
+			activeColor: {
+				type: String,
+				default: ''
+			},
+			// 图标的大小，单位rpx
+			iconSize: {
+				type: [String, Number],
+				default: ''
+			},
+			// label的字体大小，rpx单位
+			labelSize: {
+				type: [String, Number],
+				default: ''
+			},
+			// 组件的整体大小
+			size: {
+				type: [String, Number],
+				default: ''
+			},
+		},
+		data() {
+			return {
+				parentDisabled: false,
+				newParams: {},
+			};
+		},
+		created() {
+			// 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环应用
+			this.parent = this.$u.$parent.call(this, 'u-checkbox-group');
+			// 如果存在u-checkbox-group，将本组件的this塞进父组件的children中
+			this.parent && this.parent.children.push(this);
+		},
+		computed: {
+			// 是否禁用，如果父组件u-checkbox-group禁用的话，将会忽略子组件的配置
+			isDisabled() {
+				return this.disabled !== '' ? this.disabled : this.parent ? this.parent.disabled : false;
+			},
+			// 是否禁用label点击
+			isLabelDisabled() {
+				return this.labelDisabled !== '' ? this.labelDisabled : this.parent ? this.parent.labelDisabled : false;
+			},
+			// 组件尺寸，对应size的值，默认值为34rpx
+			checkboxSize() {
+				return this.size ? this.size : (this.parent ? this.parent.size : 34);
+			},
+			// 组件的勾选图标的尺寸，默认20
+			checkboxIconSize() {
+				return this.iconSize ? this.iconSize : (this.parent ? this.parent.iconSize : 20);
+			},
+			// 组件选中激活时的颜色
+			elActiveColor() {
+				return this.activeColor ? this.activeColor : (this.parent ? this.parent.activeColor : 'primary');
+			},
+			// 组件的形状
+			elShape() {
+				return this.shape ? this.shape : (this.parent ? this.parent.shape : 'square');
+			},
+			iconStyle() {
+				let style = {};
+				// 既要判断是否手动禁用，还要判断用户v-model绑定的值，如果绑定为false，那么也无法选中
+				if (this.elActiveColor && this.value && !this.isDisabled) {
+					style.borderColor = this.elActiveColor; 
+					style.backgroundColor = this.elActiveColor;
+				}
+				style.width = this.$u.addUnit(this.checkboxSize);
+				style.height = this.$u.addUnit(this.checkboxSize);
+				return style;
+			},
+			// checkbox内部的勾选图标，如果选中状态，为白色，否则为透明色即可
+			iconColor() {
+				return this.value ? '#ffffff' : 'transparent';
+			},
+			iconClass() {
+				let classes = [];
+				classes.push('u-checkbox__icon-wrap--' + this.elShape);
+				if (this.value == true) classes.push('u-checkbox__icon-wrap--checked');
+				if (this.isDisabled) classes.push('u-checkbox__icon-wrap--disabled');
+				if (this.value && this.isDisabled) classes.push('u-checkbox__icon-wrap--disabled--checked');
+				// 支付宝小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
+				return classes.join(' ');
+			},
+			checkboxStyle() {
+				let style = {};
+				if(this.parent && this.parent.width) {
+					style.width = this.parent.width;
+					// #ifdef MP
+					// 各家小程序因为它们特殊的编译结构，使用float布局
+					style.float = 'left';
+					// #endif
+					// #ifndef MP
+					// H5和APP使用flex布局
+					style.flex = `0 0 ${this.parent.width}`;
+					// #endif
+				}
+				if(this.parent && this.parent.wrap) {
+					style.width = '100%';
+					// #ifndef MP
+					// H5和APP使用flex布局，将宽度设置100%，即可自动换行
+					style.flex = '0 0 100%';
+					// #endif
+				}
+				return style;
+			}
+		},
+		methods: {
+			onClickLabel() {
+				if (!this.isLabelDisabled && !this.isDisabled) {
+					this.setValue();
+				}
+			},
+			toggle() {
+				if (!this.isDisabled) {
+					this.setValue();
+				}
+			},
+			emitEvent() {
+				this.$emit('change', {
+					value: !this.value,
+					name: this.name
+				})
+				// 执行父组件u-checkbox-group的事件方法
+				// 等待下一个周期再执行，因为this.$emit('input')作用于父组件，再反馈到子组件内部，需要时间
+				setTimeout(() => {
+					if(this.parent && this.parent.emitEvent) this.parent.emitEvent();
+				}, 80);
+			},
+			// 设置input的值，这里通过input事件，设置通过v-model绑定的组件的值
+			setValue() {
+				// 判断是否超过了可选的最大数量
+				let checkedNum = 0;
+				if(this.parent && this.parent.children) {
+					// 只要父组件的某一个子元素的value为true，就加1(已有的选中数量)
+					this.parent.children.map(val => {
+						if (val.value) checkedNum++;
+					})
+				}
+				// 如果原来为选中状态，那么可以取消
+				if (this.value == true) {
+					this.emitEvent();
+					this.$emit('input', !this.value);
+				} else {
+					// 如果超出最多可选项，提示
+					if(this.parent && checkedNum >= this.parent.max) {
+						return this.$u.toast(`最多可选${this.parent.max}项`);
+					}
+					// 如果原来为未选中状态，需要选中的数量少于父组件中设置的max值，才可以选中
+					this.emitEvent();
+					this.$emit('input', !this.value);
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+
+	.u-checkbox {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		align-items: center;
+		overflow: hidden;
+		user-select: none;
+		line-height: 1.8;
+		
+		&__icon-wrap {
+			color: $u-content-color;
+			flex: none;
+			display: -webkit-flex;
+			@include vue-flex;
+			align-items: center;
+			justify-content: center;
+			box-sizing: border-box;
+			width: 42rpx;
+			height: 42rpx;
+			color: transparent;
+			text-align: center;
+			transition-property: color, border-color, background-color;
+			font-size: 20px;
+			border: 1px solid #c8c9cc;
+			transition-duration: 0.2s;
+			
+			/* #ifdef MP-TOUTIAO */
+			// 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
+			&__icon {
+				line-height: 0;
+			}
+			/* #endif */
+			
+			&--circle {
+				border-radius: 100%;
+			}
+			
+			&--square {
+				border-radius: 6rpx;
+			}
+			
+			&--checked {
+				color: #fff;
+				background-color: $u-type-primary;
+				border-color: $u-type-primary;
+			}
+			
+			&--disabled {
+				background-color: #ebedf0;
+				border-color: #c8c9cc;
+			}
+			
+			&--disabled--checked {
+				color: #c8c9cc !important;
+			}
+		}
+	
+		&__label {
+			word-wrap: break-word;
+			margin-left: 10rpx;
+			margin-right: 24rpx;
+			color: $u-content-color;
+			font-size: 30rpx;
+			
+			&--disabled {
+				color: #c8c9cc;
+			}
+		}
+	}
+</style>

uview-ui/components/u-circle-progress/u-circle-progress.vue

@@ -0,0 +1,220 @@
+<template>
+	<view
+		class="u-circle-progress"
+		:style="{
+			width: widthPx + 'px',
+			height: widthPx + 'px',
+			backgroundColor: bgColor
+		}"
+	>
+		<!-- 支付宝小程序不支持canvas-id属性，必须用id属性 -->
+		<canvas
+			class="u-canvas-bg"
+			:canvas-id="elBgId"
+			:id="elBgId"
+			:style="{
+				width: widthPx + 'px',
+				height: widthPx + 'px'
+			}"
+		></canvas>
+		<canvas
+			class="u-canvas"
+			:canvas-id="elId"
+			:id="elId"
+			:style="{
+				width: widthPx + 'px',
+				height: widthPx + 'px'
+			}"
+		></canvas>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+/**
+ * circleProgress 环形进度条
+ * @description 展示操作或任务的当前进度，比如上传文件，是一个圆形的进度条。注意：此组件的percent值只能动态增加，不能动态减少。
+ * @tutorial https://www.uviewui.com/components/circleProgress.html
+ * @property {String Number} percent 圆环进度百分比值，为数值类型，0-100
+ * @property {String} inactive-color 圆环的底色，默认为灰色(该值无法动态变更)（默认#ececec）
+ * @property {String} active-color 圆环激活部分的颜色(该值无法动态变更)（默认#19be6b）
+ * @property {String Number} width 整个圆环组件的宽度，高度默认等于宽度值，单位rpx（默认200）
+ * @property {String Number} border-width 圆环的边框宽度，单位rpx（默认14）
+ * @property {String Number} duration 整个圆环执行一圈的时间，单位ms（默认呢1500）
+ * @property {String} type 如设置，active-color值将会失效
+ * @property {String} bg-color 整个组件背景颜色，默认为白色
+ * @example <u-circle-progress active-color="#2979ff" :percent="80"></u-circle-progress>
+ */
+export default {
+	name: 'u-circle-progress',
+	props: {
+		// 圆环进度百分比值
+		percent: {
+			type: Number,
+			default: 0,
+			// 限制值在0到100之间
+			validator: val => {
+				return val >= 0 && val <= 100;
+			}
+		},
+		// 底部圆环的颜色（灰色的圆环）
+		inactiveColor: {
+			type: String,
+			default: '#ececec'
+		},
+		// 圆环激活部分的颜色
+		activeColor: {
+			type: String,
+			default: '#19be6b'
+		},
+		// 圆环线条的宽度，单位rpx
+		borderWidth: {
+			type: [Number, String],
+			default: 14
+		},
+		// 整个圆形的宽度，单位rpx
+		width: {
+			type: [Number, String],
+			default: 200
+		},
+		// 整个圆环执行一圈的时间，单位ms
+		duration: {
+			type: [Number, String],
+			default: 1500
+		},
+		// 主题类型
+		type: {
+			type: String,
+			default: ''
+		},
+		// 整个圆环进度区域的背景色
+		bgColor: {
+			type: String,
+			default: '#ffffff'
+		}
+	},
+	data() {
+		return {
+			// #ifdef MP-WEIXIN
+			elBgId: 'uCircleProgressBgId', // 微信小程序中不能使用this.$u.guid()形式动态生成id值，否则会报错
+			elId: 'uCircleProgressElId',
+			// #endif
+			// #ifndef MP-WEIXIN
+			elBgId: this.$u.guid(), // 非微信端的时候，需用动态的id，否则一个页面多个圆形进度条组件数据会混乱
+			elId: this.$u.guid(),
+			// #endif
+			widthPx: uni.upx2px(this.width), // 转成px后的整个组件的背景宽度
+			borderWidthPx: uni.upx2px(this.borderWidth), // 转成px后的圆环的宽度
+			startAngle: -Math.PI / 2, // canvas画圆的起始角度，默认为3点钟方向，定位到12点钟方向
+			progressContext: null, // 活动圆的canvas上下文
+			newPercent: 0, // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用
+			oldPercent: 0 // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用
+		};
+	},
+	watch: {
+		percent(nVal, oVal = 0) {
+			if (nVal > 100) nVal = 100;
+			if (nVal < 0) oVal = 0;
+			// 此值其实等于this.percent，命名一个新
+			this.newPercent = nVal;
+			this.oldPercent = oVal;
+			setTimeout(() => {
+				// 无论是百分比值增加还是减少，需要操作还是原来的旧的百分比值
+				// 将此值减少或者新增到新的百分比值
+				this.drawCircleByProgress(oVal);
+			}, 50);
+		}
+	},
+	created() {
+		// 赋值，用于加载后第一个画圆使用
+		this.newPercent = this.percent;
+		this.oldPercent = 0;
+	},
+	computed: {
+		// 有type主题时，优先起作用
+		circleColor() {
+			if (['success', 'error', 'info', 'primary', 'warning'].indexOf(this.type) >= 0) return this.$u.color[this.type];
+			else return this.activeColor;
+		}
+	},
+	mounted() {
+		// 在h5端，必须要做一点延时才起作用，this.$nextTick()无效(HX2.4.7)
+		setTimeout(() => {
+			this.drawProgressBg();
+			this.drawCircleByProgress(this.oldPercent);
+		}, 50);
+	},
+	methods: {
+		drawProgressBg() {
+			let ctx = uni.createCanvasContext(this.elBgId, this);
+			ctx.setLineWidth(this.borderWidthPx); // 设置圆环宽度
+			ctx.setStrokeStyle(this.inactiveColor); // 线条颜色
+			ctx.beginPath(); // 开始描绘路径
+			// 设置一个原点(110,110)，半径为100的圆的路径到当前路径
+			let radius = this.widthPx / 2;
+			ctx.arc(radius, radius, radius - this.borderWidthPx, 0, 2 * Math.PI, false);
+			ctx.stroke(); // 对路径进行描绘
+			ctx.draw();
+		},
+		drawCircleByProgress(progress) {
+			// 第一次操作进度环时将上下文保存到了this.data中，直接使用即可
+			let ctx = this.progressContext;
+			if (!ctx) {
+				ctx = uni.createCanvasContext(this.elId, this);
+				this.progressContext = ctx;
+			}
+			// 表示进度的两端为圆形
+			ctx.setLineCap('round');
+			// 设置线条的宽度和颜色
+			ctx.setLineWidth(this.borderWidthPx);
+			ctx.setStrokeStyle(this.circleColor);
+			// 将总过渡时间除以100，得出每修改百分之一进度所需的时间
+			let time = Math.floor(this.duration / 100);
+			// 结束角的计算依据为：将2π分为100份，乘以当前的进度值，得出终止点的弧度值，加起始角，为整个圆从默认的
+			// 3点钟方向开始画图，转为更好理解的12点钟方向开始作图，这需要起始角和终止角同时加上this.startAngle值
+			let endAngle = ((2 * Math.PI) / 100) * progress + this.startAngle;
+			ctx.beginPath();
+			// 半径为整个canvas宽度的一半
+			let radius = this.widthPx / 2;
+			ctx.arc(radius, radius, radius - this.borderWidthPx, this.startAngle, endAngle, false);
+			ctx.stroke();
+			ctx.draw();
+			// 如果变更后新值大于旧值，意味着增大了百分比
+			if (this.newPercent > this.oldPercent) {
+				// 每次递增百分之一
+				progress++;
+				// 如果新增后的值，大于需要设置的值百分比值，停止继续增加
+				if (progress > this.newPercent) return;
+			} else {
+				// 同理于上面
+				progress--;
+				if (progress < this.newPercent) return;
+			}
+			setTimeout(() => {
+				// 定时器，每次操作间隔为time值，为了让进度条有动画效果
+				this.drawCircleByProgress(progress);
+			}, time);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+.u-circle-progress {
+	position: relative;
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+	align-items: center;
+	justify-content: center;
+}
+
+.u-canvas-bg {
+	position: absolute;
+}
+
+.u-canvas {
+	position: absolute;
+}
+</style>

uview-ui/components/u-col/u-col.vue

@@ -0,0 +1,156 @@
+<template>
+	<view class="u-col" :class="[
+		'u-col-' + span
+	]" :style="{
+		padding: `0 ${Number(gutter)/2 + 'rpx'}`,
+		marginLeft: 100 / 12 * offset + '%',
+		flex: `0 0 ${100 / 12 * span}%`,
+		alignItems: uAlignItem,
+		justifyContent: uJustify,
+		textAlign: textAlign
+	}"
+	 @tap="click">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	/**
+	 * col 布局单元格
+	 * @description 通过基础的 12 分栏，迅速简便地创建布局（搭配<u-row>使用）
+	 * @tutorial https://www.uviewui.com/components/layout.html
+	 * @property {String Number} span 栅格占据的列数，总12等分（默认0）
+	 * @property {String} text-align 文字水平对齐方式（默认left）
+	 * @property {String Number} offset 分栏左边偏移，计算方式与span相同（默认0）
+	 * @example <u-col span="3"><view class="demo-layout bg-purple"></view></u-col>
+	 */
+	export default {
+		name: "u-col",
+		props: {
+			// 占父容器宽度的多少等分，总分为12份
+			span: {
+				type: [Number, String],
+				default: 12
+			},
+			// 指定栅格左侧的间隔数(总12栏)
+			offset: {
+				type: [Number, String],
+				default: 0
+			},
+			// 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`)
+			justify: {
+				type: String,
+				default: 'start'
+			},
+			// 垂直对齐方式，可选值为top、center、bottom
+			align: {
+				type: String,
+				default: 'center'
+			},
+			// 文字对齐方式
+			textAlign: {
+				type: String,
+				default: 'left'
+			},
+			// 是否阻止事件传播
+			stop: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				gutter: 20, // 给col添加间距，左右边距各占一半，从父组件u-row获取
+			}
+		},
+		created() {
+			this.parent = false;
+		},
+		mounted() {
+			// 获取父组件实例，并赋值给对应的参数
+			this.parent = this.$u.$parent.call(this, 'u-row');
+			if (this.parent) {
+				this.gutter = this.parent.gutter;
+			}
+		},
+		computed: {
+			uJustify() {
+				if (this.justify == 'end' || this.justify == 'start') return 'flex-' + this.justify;
+				else if (this.justify == 'around' || this.justify == 'between') return 'space-' + this.justify;
+				else return this.justify;
+			},
+			uAlignItem() {
+				if (this.align == 'top') return 'flex-start';
+				if (this.align == 'bottom') return 'flex-end';
+				else return this.align;
+			}
+		},
+		methods: {
+			click(e) {
+				this.$emit('click');
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import "../../libs/css/style.components.scss";
+
+	.u-col {
+		/* #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO */
+		float: left;
+		/* #endif */
+	}
+
+	.u-col-0 {
+		width: 0;
+	}
+
+	.u-col-1 {
+		width: calc(100%/12);
+	}
+
+	.u-col-2 {
+		width: calc(100%/12 * 2);
+	}
+
+	.u-col-3 {
+		width: calc(100%/12 * 3);
+	}
+
+	.u-col-4 {
+		width: calc(100%/12 * 4);
+	}
+
+	.u-col-5 {
+		width: calc(100%/12 * 5);
+	}
+
+	.u-col-6 {
+		width: calc(100%/12 * 6);
+	}
+
+	.u-col-7 {
+		width: calc(100%/12 * 7);
+	}
+
+	.u-col-8 {
+		width: calc(100%/12 * 8);
+	}
+
+	.u-col-9 {
+		width: calc(100%/12 * 9);
+	}
+
+	.u-col-10 {
+		width: calc(100%/12 * 10);
+	}
+
+	.u-col-11 {
+		width: calc(100%/12 * 11);
+	}
+
+	.u-col-12 {
+		width: calc(100%/12 * 12);
+	}
+</style>

uview-ui/components/u-collapse-item/u-collapse-item.vue

@@ -0,0 +1,204 @@
+<template>
+	<view class="u-collapse-item" :style="[itemStyle]">
+		<view :hover-stay-time="200" class="u-collapse-head" @tap.stop="headClick" :hover-class="hoverClass" :style="[headStyle]">
+			<block v-if="!$slots['title-all']">
+				<view v-if="!$slots['title']" class="u-collapse-title u-line-1" :style="[{ textAlign: align ? align : 'left' },
+					isShow && activeStyle && !arrow ? activeStyle : '']">
+					{{ title }}
+				</view>
+				<slot v-else name="title" />
+				<view class="u-icon-wrap">
+					<u-icon v-if="arrow" :color="arrowColor" :class="{ 'u-arrow-down-icon-active': isShow }"
+					 class="u-arrow-down-icon" name="arrow-down"></u-icon>
+				</view>
+			</block>
+			<slot v-else name="title-all" />
+		</view>
+		<view class="u-collapse-body" :style="[{
+				height: isShow ? height + 'px' : '0'
+			}]">
+			<view class="u-collapse-content" :id="elId" :style="[bodyStyle]">
+				<slot></slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * collapseItem 手风琴Item
+	 * @description 通过折叠面板收纳内容区域（搭配u-collapse使用）
+	 * @tutorial https://www.uviewui.com/components/collapse.html
+	 * @property {String} title 面板标题
+	 * @property {String Number} index 主要用于事件的回调，标识那个Item被点击
+	 * @property {Boolean} disabled 面板是否可以打开或收起（默认false）
+	 * @property {Boolean} open 设置某个面板的初始状态是否打开（默认false）
+	 * @property {String Number} name 唯一标识符，如不设置，默认用当前collapse-item的索引值
+	 * @property {String} align 标题的对齐方式（默认left）
+	 * @property {Object} active-style 不显示箭头时，可以添加当前选择的collapse-item活动样式，对象形式
+	 * @event {Function} change 某个item被打开或者收起时触发
+	 * @example <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">{{item.body}}</u-collapse-item>
+	 */
+	export default {
+		name: "u-collapse-item",
+		props: {
+			// 标题
+			title: {
+				type: String,
+				default: ''
+			},
+			// 标题的对齐方式
+			align: {
+				type: String,
+				default: 'left'
+			},
+			// 是否可以点击收起
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			// collapse显示与否
+			open: {
+				type: Boolean,
+				default: false
+			},
+			// 唯一标识符
+			name: {
+				type: [Number, String],
+				default: ''
+			},
+			//活动样式
+			activeStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 标识当前为第几个
+			index: {
+				type: [String, Number],
+				default: ''
+			}
+		},
+		data() {
+			return {
+				isShow: false,
+				elId: this.$u.guid(),
+				height: 0, // body内容的高度
+				headStyle: {}, // 头部样式，对象形式
+				bodyStyle: {}, // 主体部分样式
+				itemStyle: {}, // 每个item的整体样式
+				arrowColor: '', // 箭头的颜色
+				hoverClass: '', // 头部按下时的效果样式类
+				arrow: true, // 是否显示右侧箭头
+				
+			};
+		},
+		watch: {
+			open(val) {
+				this.isShow = val;
+			}
+		},
+		created() {
+			this.parent = false;
+			// 获取u-collapse的信息，放在u-collapse是为了方便，不用每个u-collapse-item写一遍
+			this.isShow = this.open;
+		},
+		methods: {
+			// 异步获取内容，或者动态修改了内容时，需要重新初始化
+			init() {
+				this.parent = this.$u.$parent.call(this, 'u-collapse');
+				if(this.parent) {
+					this.nameSync = this.name ? this.name : this.parent.childrens.length;
+					this.parent.childrens.push(this);
+					this.headStyle = this.parent.headStyle;
+					this.bodyStyle = this.parent.bodyStyle;
+					this.arrowColor = this.parent.arrowColor;
+					this.hoverClass = this.parent.hoverClass;
+					this.arrow = this.parent.arrow;
+					this.itemStyle = this.parent.itemStyle;
+				}
+				this.$nextTick(() => {
+					this.queryRect();
+				});
+			},
+			// 点击collapsehead头部
+			headClick() {
+				if (this.disabled) return;
+				if (this.parent && this.parent.accordion == true) {
+					this.parent.childrens.map(val => {
+						// 自身不设置为false，因为后面有this.isShow = !this.isShow;处理了
+						if (this != val) {
+							val.isShow = false;
+						}
+					});
+				}
+
+				this.isShow = !this.isShow;
+				// 触发本组件的事件
+				this.$emit('change', {
+					index: this.index,
+					show: this.isShow
+				})
+				// 只有在打开时才发出事件
+				if (this.isShow) this.parent && this.parent.onChange();
+				this.$forceUpdate();
+			},
+			// 查询内容高度
+			queryRect() {
+				// $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://www.uviewui.com/js/getRect.html
+				// 组件内部一般用this.$uGetRect，对外的为this.$u.getRect，二者功能一致，名称不同
+				this.$uGetRect('#' + this.elId).then(res => {
+					this.height = res.height;
+				})
+			}
+		},
+		mounted() {
+			this.init();
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-collapse-head {
+		position: relative;
+		@include vue-flex;
+		justify-content: space-between;
+		align-items: center;
+		color: $u-main-color;
+		font-size: 30rpx;
+		line-height: 1;
+		padding: 24rpx 0;
+		text-align: left;
+	}
+
+	.u-collapse-title {
+		flex: 1;
+		overflow: hidden;
+	}
+
+	.u-arrow-down-icon {
+		transition: all 0.3s;
+		margin-right: 20rpx;
+		margin-left: 14rpx;
+	}
+
+	.u-arrow-down-icon-active {
+		transform: rotate(180deg);
+		transform-origin: center center;
+	}
+
+	.u-collapse-body {
+		overflow: hidden;
+		transition: all 0.3s;
+	}
+
+	.u-collapse-content {
+		overflow: hidden;
+		font-size: 28rpx;
+		color: $u-tips-color;
+		text-align: left;
+	}
+</style>

uview-ui/components/u-collapse/u-collapse.vue

@@ -0,0 +1,99 @@
+<template>
+	<view class="u-collapse">
+		<slot />
+	</view>
+</template>
+
+<script>
+	/**
+	 * collapse 手风琴
+	 * @description 通过折叠面板收纳内容区域
+	 * @tutorial https://www.uviewui.com/components/collapse.html
+	 * @property {Boolean} accordion 是否手风琴模式（默认true）
+	 * @property {Boolean} arrow 是否显示标题右侧的箭头（默认true）
+	 * @property {String} arrow-color 标题右侧箭头的颜色（默认#909399）
+	 * @property {Object} head-style 标题自定义样式，对象形式
+	 * @property {Object} body-style 主体自定义样式，对象形式
+	 * @property {String} hover-class 样式类名，按下时有效（默认u-hover-class）
+	 * @event {Function} change 当前激活面板展开时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array)
+	 * @example <u-collapse></u-collapse>
+	 */
+	export default {
+		name:"u-collapse",
+		props: {
+			// 是否手风琴模式
+			accordion: {
+				type: Boolean,
+				default: true
+			},
+			// 头部的样式
+			headStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 主体的样式
+			bodyStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 每一个item的样式
+			itemStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 是否显示右侧的箭头
+			arrow: {
+				type: Boolean,
+				default: true
+			},
+			// 箭头的颜色
+			arrowColor: {
+				type: String,
+				default: '#909399'
+			},
+			// 标题部分按压时的样式类，"none"为无效果
+			hoverClass: {
+				type: String,
+				default: 'u-hover-class'
+			}
+		},
+		created() {
+			this.childrens = []
+		},
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+			// 重新初始化一次内部的所有子元素的高度计算，用于异步获取数据渲染的情况
+			init() {
+				this.childrens.forEach((vm, index) => {
+					vm.init();
+				})
+			},
+			// collapse item被点击，由collapse item调用父组件方法
+			onChange() {
+				let activeItem = [];
+				this.childrens.forEach((vm, index) => {
+					if (vm.isShow) {
+						activeItem.push(vm.nameSync);
+					}
+				})
+				// 如果是手风琴模式，只有一个匹配结果，也即activeItem长度为1，将其转为字符串
+				if (this.accordion) activeItem = activeItem.join('');
+				this.$emit('change', activeItem);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+</style>

uview-ui/components/u-column-notice/u-column-notice.vue

@@ -0,0 +1,237 @@
+<template>
+	<view
+		class="u-notice-bar"
+		:style="{
+			background: computeBgColor,
+			padding: padding
+		}"
+		:class="[
+			type ? `u-type-${type}-light-bg` : ''
+		]"
+	>
+		<view class="u-icon-wrap">
+			<u-icon class="u-left-icon" v-if="volumeIcon" name="volume-fill" :size="volumeSize" :color="computeColor"></u-icon>
+		</view>
+		<swiper :disable-touch="disableTouch" @change="change" :autoplay="autoplay && playState == 'play'" :vertical="vertical" circular :interval="duration" class="u-swiper">
+			<swiper-item v-for="(item, index) in list" :key="index" class="u-swiper-item">
+				<view
+					class="u-news-item u-line-1"
+					:style="[textStyle]"
+					@tap="click(index)"
+					:class="['u-type-' + type]"
+				>
+					{{ item }}
+				</view>
+			</swiper-item>
+		</swiper>
+		<view class="u-icon-wrap">
+			<u-icon @click="getMore" class="u-right-icon" v-if="moreIcon" name="arrow-right" :size="26" :color="computeColor"></u-icon>
+			<u-icon @click="close" class="u-right-icon" v-if="closeIcon" name="close" :size="24" :color="computeColor"></u-icon>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	props: {
+		// 显示的内容，数组
+		list: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		// 显示的主题，success|error|primary|info|warning
+		type: {
+			type: String,
+			default: 'warning'
+		},
+		// 是否显示左侧的音量图标
+		volumeIcon: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示右侧的右箭头图标
+		moreIcon: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示右侧的关闭图标
+		closeIcon: {
+			type: Boolean,
+			default: false
+		},
+		// 是否自动播放
+		autoplay: {
+			type: Boolean,
+			default: true
+		},
+		// 文字颜色，各图标也会使用文字颜色
+		color: {
+			type: String,
+			default: ''
+		},
+		// 背景颜色
+		bgColor: {
+			type: String,
+			default: ''
+		},
+		// 滚动方向，row-水平滚动，column-垂直滚动
+		direction: {
+			type: String,
+			default: 'row'
+		},
+		// 是否显示
+		show: {
+			type: Boolean,
+			default: true
+		},
+		// 字体大小，单位rpx
+		fontSize: {
+			type: [Number, String],
+			default: 26
+		},
+		// 滚动一个周期的时间长，单位ms
+		duration: {
+			type: [Number, String],
+			default: 2000
+		},
+		// 音量喇叭的大小
+		volumeSize: {
+			type: [Number, String],
+			default: 34
+		},
+		// 水平滚动时的滚动速度，即每秒滚动多少rpx，这有利于控制文字无论多少时，都能有一个恒定的速度
+		speed: {
+			type: Number,
+			default: 160
+		},
+		// 水平滚动时，是否采用衔接形式滚动
+		isCircular: {
+			type: Boolean,
+			default: true
+		},
+		// 滚动方向，horizontal-水平滚动，vertical-垂直滚动
+		mode: {
+			type: String,
+			default: 'horizontal'
+		},
+		// 播放状态，play-播放，paused-暂停
+		playState: {
+			type: String,
+			default: 'play'
+		},
+		// 是否禁止用手滑动切换
+		// 目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序
+		disableTouch: {
+			type: Boolean,
+			default: true
+		},
+		// 通知的边距
+		padding: {
+			type: [Number, String],
+			default: '18rpx 24rpx'
+		}
+	},
+	computed: {
+		// 计算字体颜色，如果没有自定义的，就用uview主题颜色
+		computeColor() {
+			if (this.color) return this.color;
+			// 如果是无主题，就默认使用content-color
+			else if(this.type == 'none') return '#606266';
+			else return this.type;
+		},
+		// 文字内容的样式
+		textStyle() {
+			let style = {};
+			if (this.color) style.color = this.color;
+			else if(this.type == 'none') style.color = '#606266';
+			style.fontSize = this.fontSize + 'rpx';
+			return style;
+		},
+		// 垂直或者水平滚动
+		vertical() {
+			if(this.mode == 'horizontal') return false;
+			else return true;
+		},
+		// 计算背景颜色
+		computeBgColor() {
+			if (this.bgColor) return this.bgColor;
+			else if(this.type == 'none') return 'transparent';
+		}
+	},
+	data() {
+		return {
+			// animation: false
+		};
+	},
+	methods: {
+		// 点击通告栏
+		click(index) {
+			this.$emit('click', index);
+		},
+		// 点击关闭按钮
+		close() {
+			this.$emit('close');
+		},
+		// 点击更多箭头按钮
+		getMore() {
+			this.$emit('getMore');
+		},
+		change(e) {
+			let index = e.detail.current;
+			if(index == this.list.length - 1) {
+				this.$emit('end');
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+
+.u-notice-bar {
+	width: 100%;
+	@include vue-flex;
+	align-items: center;
+	justify-content: center;
+	flex-wrap: nowrap;
+	padding: 18rpx 24rpx;
+	overflow: hidden;
+}
+
+.u-swiper {
+	font-size: 26rpx;
+	height: 32rpx;
+	@include vue-flex;
+	align-items: center;
+	flex: 1;
+	margin-left: 12rpx;
+}
+
+.u-swiper-item {
+	@include vue-flex;
+	align-items: center;
+	overflow: hidden;
+}
+
+.u-news-item {
+	overflow: hidden;
+}
+
+.u-right-icon {
+	margin-left: 12rpx;
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+	align-items: center;
+}
+
+.u-left-icon {
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+	align-items: center;
+}
+</style>

uview-ui/components/u-count-down/u-count-down.vue

@@ -0,0 +1,318 @@
+<template>
+	<view class="u-countdown">
+		<view class="u-countdown-item" :style="[itemStyle]" v-if="showDays && (hideZeroDay || (!hideZeroDay && d != '00'))">
+			<view class="u-countdown-time" :style="[letterStyle]">
+				{{ d }}
+			</view>
+		</view>
+		<view
+			class="u-countdown-colon"
+			:style="{fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator == 'colon' ? '4rpx' : 0}"
+			v-if="showDays && (hideZeroDay || (!hideZeroDay && d != '00'))"
+		>
+			{{ separator == 'colon' ? ':' : '天' }}
+		</view>
+		<view class="u-countdown-item" :style="[itemStyle]" v-if="showHours">
+			<view class="u-countdown-time" :style="{ fontSize: fontSize + 'rpx', color: color}">
+				{{ h }}
+			</view>
+		</view>
+		<view
+			class="u-countdown-colon"
+			:style="{fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator == 'colon' ? '4rpx' : 0}"
+			v-if="showHours"
+		>
+			{{ separator == 'colon' ? ':' : '时' }}
+		</view>
+		<view class="u-countdown-item" :style="[itemStyle]" v-if="showMinutes">
+			<view class="u-countdown-time" :style="{ fontSize: fontSize + 'rpx', color: color}">
+				{{ i }}
+			</view>
+		</view>
+		<view
+			class="u-countdown-colon"
+			:style="{fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator == 'colon' ? '4rpx' : 0}"
+			v-if="showMinutes"
+		>
+			{{ separator == 'colon' ? ':' : '分' }}
+		</view>
+		<view class="u-countdown-item" :style="[itemStyle]" v-if="showSeconds">
+			<view class="u-countdown-time" :style="{ fontSize: fontSize + 'rpx', color: color}">
+				{{ s }}
+			</view>
+		</view>
+		<view
+			class="u-countdown-colon"
+			:style="{fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator == 'colon' ? '4rpx' : 0}"
+			v-if="showSeconds && separator == 'zh'"
+		>
+			秒
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * countDown 倒计时
+ * @description 该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。
+ * @tutorial https://www.uviewui.com/components/countDown.html
+ * @property {String Number} timestamp 倒计时，单位为秒
+ * @property {Boolean} autoplay 是否自动开始倒计时，如果为false，需手动调用开始方法。见官网说明（默认true）
+ * @property {String} separator 分隔符，colon为英文冒号，zh为中文（默认colon）
+ * @property {String Number} separator-size 分隔符的字体大小，单位rpx（默认30）
+ * @property {String} separator-color 分隔符的颜色（默认#303133）
+ * @property {String Number} font-size 倒计时字体大小，单位rpx（默认30）
+ * @property {Boolean} show-border 是否显示倒计时数字的边框（默认false）
+ * @property {Boolean} hide-zero-day 当"天"的部分为0时，隐藏该字段 （默认true）
+ * @property {String} border-color 数字边框的颜色（默认#303133）
+ * @property {String} bg-color 倒计时数字的背景颜色（默认#ffffff）
+ * @property {String} color 倒计时数字的颜色（默认#303133）
+ * @property {String} height 数字高度值(宽度等同此值)，设置边框时看情况是否需要设置此值，单位rpx（默认auto）
+ * @property {Boolean} show-days 是否显示倒计时的"天"部分（默认true）
+ * @property {Boolean} show-hours 是否显示倒计时的"时"部分（默认true）
+ * @property {Boolean} show-minutes 是否显示倒计时的"分"部分（默认true）
+ * @property {Boolean} show-seconds 是否显示倒计时的"秒"部分（默认true）
+ * @event {Function} end 倒计时结束
+ * @event {Function} change 每秒触发一次，回调为当前剩余的倒计秒数
+ * @example <u-count-down ref="uCountDown" :timestamp="86400" :autoplay="false"></u-count-down>
+ */
+export default {
+	name: 'u-count-down',
+	props: {
+		// 倒计时的时间，秒为单位
+		timestamp: {
+			type: [Number, String],
+			default: 0
+		},
+		// 是否自动开始倒计时
+		autoplay: {
+			type: Boolean,
+			default: true
+		},
+		// 用英文冒号(colon)或者中文(zh)当做分隔符，false的时候为中文，如："11:22"或"11时22秒"
+		separator: {
+			type: String,
+			default: 'colon'
+		},
+		// 分隔符的大小，单位rpx
+		separatorSize: {
+			type: [Number, String],
+			default: 30
+		},
+		// 分隔符颜色
+		separatorColor: {
+			type: String,
+			default: "#303133"
+		},
+		// 字体颜色
+		color: {
+			type: String,
+			default: '#303133'
+		},
+		// 字体大小，单位rpx
+		fontSize: {
+			type: [Number, String],
+			default: 30
+		},
+		// 背景颜色
+		bgColor: {
+			type: String,
+			default: '#fff'
+		},
+		// 数字框高度，单位rpx
+		height: {
+			type: [Number, String],
+			default: 'auto'
+		},
+		// 是否显示数字框
+		showBorder: {
+			type: Boolean,
+			default: false
+		},
+		// 边框颜色
+		borderColor: {
+			type: String,
+			default: '#303133'
+		},
+		// 是否显示秒
+		showSeconds: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示分钟
+		showMinutes: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示小时
+		showHours: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示“天”
+		showDays: {
+			type: Boolean,
+			default: true
+		},
+		// 当"天"的部分为0时，不显示
+		hideZeroDay: {
+			type: Boolean,
+			default: false
+		}
+	},
+	watch: {
+		// 监听时间戳的变化
+		timestamp(newVal, oldVal) {
+			// 如果倒计时间发生变化，清除定时器，重新开始倒计时
+			this.clearTimer();
+			this.start();
+		}
+	},
+	data() {
+		return {
+			d: '00', // 天的默认值
+			h: '00', // 小时的默认值
+			i: '00', // 分钟的默认值
+			s: '00', // 秒的默认值
+			timer: null ,// 定时器
+			seconds: 0, // 记录不停倒计过程中变化的秒数
+		};
+	},
+	computed: {
+		// 倒计时item的样式，item为分别的时分秒部分的数字
+		itemStyle() {
+			let style = {};
+			if(this.height) {
+				style.height = this.height + 'rpx';
+				style.width = this.height + 'rpx';
+			}
+			if(this.showBorder) {
+				style.borderStyle = 'solid';
+				style.borderColor = this.borderColor;
+				style.borderWidth = '1px';
+			}
+			if(this.bgColor) {
+				style.backgroundColor = this.bgColor;
+			}
+			return style;
+		},
+		// 倒计时数字的样式
+		letterStyle() {
+			let style = {};
+			if(this.fontSize) style.fontSize = this.fontSize +  'rpx';
+			if(this.color) style.color = this.color;
+			return style;
+		}
+	},
+	mounted() {
+		// 如果自动倒计时
+		this.autoplay && this.timestamp && this.start();
+	},
+	methods: {
+		// 倒计时
+		start() {
+			// 避免可能出现的倒计时重叠情况
+			this.clearTimer();
+			if (this.timestamp <= 0) return;
+			this.seconds = Number(this.timestamp);
+			this.formatTime(this.seconds);
+			this.timer = setInterval(() => {
+				this.seconds--;
+				// 发出change事件
+				this.$emit('change', this.seconds);
+				if (this.seconds < 0) {
+					return this.end();
+				}
+				this.formatTime(this.seconds);
+			}, 1000);
+		},
+		// 格式化时间
+		formatTime(seconds) {
+			// 小于等于0的话，结束倒计时
+			seconds <= 0 && this.end();
+			let [day, hour, minute, second] = [0, 0, 0, 0];
+			day = Math.floor(seconds / (60 * 60 * 24));
+			// 判断是否显示“天”参数，如果不显示，将天部分的值，加入到小时中
+			// hour为给后面计算秒和分等用的(基于显示天的前提下计算)
+			hour = Math.floor(seconds / (60 * 60)) - day * 24;
+			// showHour为需要显示的小时
+			let showHour = null;
+			if(this.showDays) {
+				showHour = hour;
+			} else {
+				// 如果不显示天数，将“天”部分的时间折算到小时中去
+				showHour = Math.floor(seconds / (60 * 60));
+			}
+			minute = Math.floor(seconds / 60) - hour * 60 - day * 24 * 60;
+			second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60;
+			// 如果小于10，在前面补上一个"0"
+			showHour = showHour < 10 ? '0' + showHour : showHour;
+			minute = minute < 10 ? '0' + minute : minute;
+			second = second < 10 ? '0' + second : second;
+			day = day < 10 ? '0' + day : day;
+			this.d = day;
+			this.h = showHour;
+			this.i = minute;
+			this.s = second;
+		},
+		// 停止倒计时
+		end() {
+			this.clearTimer();
+			this.$emit('end', {});
+		},
+		// 清除定时器
+		clearTimer() {
+			if(this.timer) {
+				// 清除定时器
+				clearInterval(this.timer);
+				this.timer = null;
+			}
+		}
+	},
+	beforeDestroy() {
+		clearInterval(this.timer);
+		this.timer = null;
+	}
+};
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+
+	.u-countdown {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;		
+		/* #endif */
+		align-items: center;
+	}
+
+	.u-countdown-item {
+		@include vue-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 2rpx;
+		border-radius: 6rpx;
+		white-space: nowrap;
+		transform: translateZ(0);
+	}
+
+	.u-countdown-time {
+		margin: 0;
+		padding: 0;
+		line-height: 1;
+	}
+
+	.u-countdown-colon {
+		@include vue-flex;
+		justify-content: center;
+		padding: 0 5rpx;
+		line-height: 1;
+		align-items: center;
+		padding-bottom: 4rpx;
+	}
+
+	.u-countdown-scale {
+		transform: scale(0.9);
+		transform-origin: center center;
+	}
+</style>

uview-ui/components/u-count-to/u-count-to.vue

@@ -0,0 +1,241 @@
+<template>
+	<view
+		class="u-count-num"
+		:style="{
+			fontSize: fontSize + 'rpx',
+			fontWeight: bold ? 'bold' : 'normal',
+			color: color
+		}"
+	>
+		{{ displayValue }}
+	</view>
+</template>
+
+<script>
+/**
+ * countTo 数字滚动
+ * @description 该组件一般用于需要滚动数字到某一个值的场景，目标要求是一个递增的值。
+ * @tutorial https://www.uviewui.com/components/countTo.html
+ * @property {String Number} start-val 开始值
+ * @property {String Number} end-val 结束值
+ * @property {String Number} duration 滚动过程所需的时间，单位ms（默认2000）
+ * @property {Boolean} autoplay 是否自动开始滚动（默认true）
+ * @property {String Number} decimals 要显示的小数位数，见官网说明（默认0）
+ * @property {Boolean} use-easing 滚动结束时，是否缓动结尾，见官网说明（默认true）
+ * @property {String} separator 千位分隔符，见官网说明
+ * @property {String} color 字体颜色（默认#303133）
+ * @property {String Number} font-size 字体大小，单位rpx（默认50）
+ * @property {Boolean} bold 字体是否加粗（默认false）
+ * @event {Function} end 数值滚动到目标值时触发
+ * @example <u-count-to ref="uCountTo" :end-val="endVal" :autoplay="autoplay"></u-count-to>
+ */
+export default {
+	name: 'u-count-to',
+	props: {
+		// 开始的数值，默认从0增长到某一个数
+		startVal: {
+			type: [Number, String],
+			default: 0
+		},
+		// 要滚动的目标数值，必须
+		endVal: {
+			type: [Number, String],
+			default: 0,
+			required: true
+		},
+		// 滚动到目标数值的动画持续时间，单位为毫秒（ms）
+		duration: {
+			type: [Number, String],
+			default: 2000
+		},
+		// 设置数值后是否自动开始滚动
+		autoplay: {
+			type: Boolean,
+			default: true
+		},
+		// 要显示的小数位数
+		decimals: {
+			type: [Number, String],
+			default: 0
+		},
+		// 是否在即将到达目标数值的时候，使用缓慢滚动的效果
+		useEasing: {
+			type: Boolean,
+			default: true
+		},
+		// 十进制分割
+		decimal: {
+			type: [Number, String],
+			default: '.'
+		},
+		// 字体颜色
+		color: {
+			type: String,
+			default: '#303133'
+		},
+		// 字体大小
+		fontSize: {
+			type: [Number, String],
+			default: 50
+		},
+		// 是否加粗字体
+		bold: {
+			type: Boolean,
+			default: false
+		},
+		// 千位分隔符，类似金额的分割(￥23,321.05中的",")
+		separator: {
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			localStartVal: this.startVal,
+			displayValue: this.formatNumber(this.startVal),
+			printVal: null,
+			paused: false, // 是否暂停
+			localDuration: Number(this.duration),
+			startTime: null, // 开始的时间
+			timestamp: null, // 时间戳
+			remaining: null, // 停留的时间
+			rAF: null,
+			lastTime: 0 // 上一次的时间
+		};
+	},
+	computed: {
+		countDown() {
+			return this.startVal > this.endVal;
+		}
+	},
+	watch: {
+		startVal() {
+			this.autoplay && this.start();
+		},
+		endVal() {
+			this.autoplay && this.start();
+		}
+	},
+	mounted() {
+		this.autoplay && this.start();
+	},
+	methods: {
+		easingFn(t, b, c, d) {
+			return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
+		},
+		requestAnimationFrame(callback) {
+			const currTime = new Date().getTime();
+			// 为了使setTimteout的尽可能的接近每秒60帧的效果
+			const timeToCall = Math.max(0, 16 - (currTime - this.lastTime));
+			const id = setTimeout(() => {
+				callback(currTime + timeToCall);
+			}, timeToCall);
+			this.lastTime = currTime + timeToCall;
+			return id;
+		},
+
+		cancelAnimationFrame(id) {
+			clearTimeout(id);
+		},
+		// 开始滚动数字
+		start() {
+			this.localStartVal = this.startVal;
+			this.startTime = null;
+			this.localDuration = this.duration;
+			this.paused = false;
+			this.rAF = this.requestAnimationFrame(this.count);
+		},
+		// 暂定状态，重新再开始滚动；或者滚动状态下，暂停
+		reStart() {
+			if (this.paused) {
+				this.resume();
+				this.paused = false;
+			} else {
+				this.stop();
+				this.paused = true;
+			}
+		},
+		// 暂停
+		stop() {
+			this.cancelAnimationFrame(this.rAF);
+		},
+		// 重新开始(暂停的情况下)
+		resume() {
+			this.startTime = null;
+			this.localDuration = this.remaining;
+			this.localStartVal = this.printVal;
+			this.requestAnimationFrame(this.count);
+		},
+		// 重置
+		reset() {
+			this.startTime = null;
+			this.cancelAnimationFrame(this.rAF);
+			this.displayValue = this.formatNumber(this.startVal);
+		},
+		count(timestamp) {
+			if (!this.startTime) this.startTime = timestamp;
+			this.timestamp = timestamp;
+			const progress = timestamp - this.startTime;
+			this.remaining = this.localDuration - progress;
+			if (this.useEasing) {
+				if (this.countDown) {
+					this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration);
+				} else {
+					this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration);
+				}
+			} else {
+				if (this.countDown) {
+					this.printVal = this.localStartVal - (this.localStartVal - this.endVal) * (progress / this.localDuration);
+				} else {
+					this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration);
+				}
+			}
+			if (this.countDown) {
+				this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal;
+			} else {
+				this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal;
+			}
+			this.displayValue = this.formatNumber(this.printVal);
+			if (progress < this.localDuration) {
+				this.rAF = this.requestAnimationFrame(this.count);
+			} else {
+				this.$emit('end');
+			}
+		},
+		// 判断是否数字
+		isNumber(val) {
+			return !isNaN(parseFloat(val));
+		},
+		formatNumber(num) {
+			// 将num转为Number类型，因为其值可能为字符串数值，调用toFixed会报错
+			num = Number(num);
+			num = num.toFixed(Number(this.decimals));
+			num += '';
+			const x = num.split('.');
+			let x1 = x[0];
+			const x2 = x.length > 1 ? this.decimal + x[1] : '';
+			const rgx = /(\d+)(\d{3})/;
+			if (this.separator && !this.isNumber(this.separator)) {
+				while (rgx.test(x1)) {
+					x1 = x1.replace(rgx, '$1' + this.separator + '$2');
+				}
+			}
+			return x1 + x2;
+		},
+		destroyed() {
+			this.cancelAnimationFrame(this.rAF);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+
+.u-count-num {
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+	text-align: center;
+}
+</style>

uview-ui/components/u-divider/u-divider.vue

@@ -0,0 +1,153 @@
+<template>
+	<view class="u-divider" :style="{
+		height: height == 'auto' ? 'auto' : height + 'rpx',
+		backgroundColor: bgColor,
+		marginBottom: marginBottom + 'rpx',
+		marginTop: marginTop + 'rpx'
+	}" @tap="click">
+		<view class="u-divider-line" :class="[type ? 'u-divider-line--bordercolor--' + type : '']" :style="[lineStyle]"></view>
+		<view v-if="useSlot" class="u-divider-text" :style="{
+			color: color,
+			fontSize: fontSize + 'rpx'
+		}"><slot /></view>
+		<view class="u-divider-line" :class="[type ? 'u-divider-line--bordercolor--' + type : '']" :style="[lineStyle]"></view>
+	</view>
+</template>
+
+<script>
+/**
+ * divider 分割线
+ * @description 区隔内容的分割线，一般用于页面底部"没有更多"的提示。
+ * @tutorial https://www.uviewui.com/components/divider.html
+ * @property {String Number} half-width 文字左或右边线条宽度，数值或百分比，数值时单位为rpx
+ * @property {String} border-color 线条颜色，优先级高于type（默认#dcdfe6）
+ * @property {String} color 文字颜色（默认#909399）
+ * @property {String Number} fontSize 字体大小，单位rpx（默认26）
+ * @property {String} bg-color 整个divider的背景颜色（默认呢#ffffff）
+ * @property {String Number} height 整个divider的高度，单位rpx（默认40）
+ * @property {String} type 将线条设置主题色（默认primary）
+ * @property {Boolean} useSlot 是否使用slot传入内容，如果不传入，中间不会有空隙（默认true）
+ * @property {String Number} margin-top 与前一个组件的距离，单位rpx（默认0）
+ * @property {String Number} margin-bottom 与后一个组件的距离，单位rpx（0）
+ * @event {Function} click divider组件被点击时触发
+ * @example <u-divider color="#fa3534">长河落日圆</u-divider>
+ */
+export default {
+	name: 'u-divider',
+	props: {
+		// 单一边divider横线的宽度(数值)，单位rpx。或者百分比
+		halfWidth: {
+			type: [Number, String],
+			default: 150
+		},
+		// divider横线的颜色，如设置，
+		borderColor: {
+			type: String,
+			default: '#dcdfe6'
+		},
+		// 主题色，可以是primary|info|success|warning|error之一值
+		type: {
+			type: String,
+			default: 'primary'
+		},
+		// 文字颜色
+		color: {
+			type: String,
+			default: '#909399'
+		},
+		// 文字大小，单位rpx
+		fontSize: {
+			type: [Number, String],
+			default: 26
+		},
+		// 整个divider的背景颜色
+		bgColor: {
+			type: String,
+			default: '#ffffff'
+		},
+		// 整个divider的高度单位rpx
+		height: {
+			type: [Number, String],
+			default: 'auto'
+		},
+		// 上边距
+		marginTop: {
+			type: [String, Number],
+			default: 0
+		},
+		// 下边距
+		marginBottom: {
+			type: [String, Number],
+			default: 0
+		},
+		// 是否使用slot传入内容，如果不用slot传入内容，先的中间就不会有空隙
+		useSlot: {
+			type: Boolean,
+			default: true
+		}
+	},
+	computed: {
+		lineStyle() {
+			let style = {};
+			if(String(this.halfWidth).indexOf('%') != -1) style.width = this.halfWidth;
+			else style.width = this.halfWidth + 'rpx';
+			// borderColor优先级高于type值
+			if(this.borderColor) style.borderColor = this.borderColor;
+			return style;
+		}
+	},
+	methods: {
+		click() {
+			this.$emit('click');
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+.u-divider {
+	width: 100%;
+	position: relative;
+	text-align: center;
+	@include vue-flex;
+	justify-content: center;
+	align-items: center;
+	overflow: hidden;
+	flex-direction: row;
+}
+
+.u-divider-line {
+	border-bottom: 1px solid $u-border-color;
+	transform: scale(1, 0.5);
+	transform-origin: center;
+	
+	&--bordercolor--primary {
+		border-color: $u-type-primary;
+	}
+	
+	&--bordercolor--success {
+		border-color: $u-type-success;
+	}
+	
+	&--bordercolor--error {
+		border-color: $u-type-primary;
+	}
+	
+	&--bordercolor--info {
+		border-color: $u-type-info;
+	}
+	
+	&--bordercolor--warning {
+		border-color: $u-type-warning;
+	}
+}
+
+.u-divider-text {
+	white-space: nowrap;
+	padding: 0 16rpx;
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+}
+</style>

uview-ui/components/u-dropdown-item/u-dropdown-item.vue

@@ -0,0 +1,132 @@
+<template>
+	<view class="u-dropdown-item" v-if="active" @touchmove.stop.prevent="() => {}" @tap.stop.prevent="() => {}">
+		<block v-if="!$slots.default && !$slots.$default">
+			<scroll-view scroll-y="true" :style="{
+				height: $u.addUnit(height)
+			}">
+				<view class="u-dropdown-item__options">
+					<u-cell-group>
+						<u-cell-item @click="cellClick(item.value)" :arrow="false" :title="item.label" v-for="(item, index) in options"
+						 :key="index" :title-style="{
+							color: value == item.value ? activeColor : inactiveColor
+						}">
+							<u-icon v-if="value == item.value" name="checkbox-mark" :color="activeColor" size="32"></u-icon>
+						</u-cell-item>
+					</u-cell-group>
+				</view>
+			</scroll-view>
+		</block>
+		<slot v-else />
+	</view>
+</template>
+
+<script>
+	/**
+	 * dropdown-item 下拉菜单
+	 * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
+	 * @tutorial http://uviewui.com/components/dropdown.html
+	 * @property {String | Number} v-model 双向绑定选项卡选择值
+	 * @property {String} title 菜单项标题
+	 * @property {Array[Object]} options 选项数据，如果传入了默认slot，此参数无效
+	 * @property {Boolean} disabled 是否禁用此选项卡（默认false）
+	 * @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）
+	 * @property {String | Number} height 弹窗下拉内容的高度(内容超出将会滚动)（默认auto）
+	 * @example <u-dropdown-item title="标题"></u-dropdown-item>
+	 */
+	export default {
+		name: 'u-dropdown-item',
+		props: {
+			// 当前选中项的value值
+			value: {
+				type: [Number, String, Array],
+				default: ''
+			},
+			// 菜单项标题
+			title: {
+				type: [String, Number],
+				default: ''
+			},
+			// 选项数据，如果传入了默认slot，此参数无效
+			options: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			// 是否禁用此菜单项
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			// 下拉弹窗的高度
+			height: {
+				type: [Number, String],
+				default: 'auto'
+			},
+		},
+		data() {
+			return {
+				active: false, // 当前项是否处于展开状态
+				activeColor: '#2979ff', // 激活时左边文字和右边对勾图标的颜色
+				inactiveColor: '#606266', // 未激活时左边文字和右边对勾图标的颜色
+			}
+		},
+		computed: {
+			// 监听props是否发生了变化，有些值需要传递给父组件u-dropdown，无法双向绑定
+			propsChange() {
+				return `${this.title}-${this.disabled}`;
+			}
+		},
+		watch: {
+			propsChange(n) {
+				// 当值变化时，通知父组件重新初始化，让父组件执行每个子组件的init()方法
+				// 将所有子组件数据重新整理一遍
+				if (this.parent) this.parent.init();
+			}
+		},
+		created() {
+			// 父组件的实例
+			this.parent = false;
+		},
+		methods: {
+			init() {
+				// 获取父组件u-dropdown
+				let parent = this.$u.$parent.call(this, 'u-dropdown');
+				if (parent) {
+					this.parent = parent;
+					// 将子组件的激活颜色配置为父组件设置的激活和未激活时的颜色
+					this.activeColor = parent.activeColor;
+					this.inactiveColor = parent.inactiveColor;
+					// 将本组件的this，放入到父组件的children数组中，让父组件可以操作本(子)组件的方法和属性
+					// push进去前，显判断是否已经存在了本实例，因为在子组件内部数据变化时，会通过父组件重新初始化子组件
+					let exist = parent.children.find(val => {
+						return this === val;
+					})
+					if (!exist) parent.children.push(this);
+					if (parent.children.length == 1) this.active = true;
+					// 父组件无法监听children的变化，故将子组件的title，传入父组件的menuList数组中
+					parent.menuList.push({
+						title: this.title,
+						disabled: this.disabled
+					});
+				}
+			},
+			// cell被点击
+			cellClick(value) {
+				// 修改通过v-model绑定的值
+				this.$emit('input', value);
+				// 通知父组件(u-dropdown)收起菜单
+				this.parent.close();
+				// 发出事件，抛出当前勾选项的value
+				this.$emit('change', value);
+			}
+		},
+		mounted() {
+			this.init();
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+</style>

uview-ui/components/u-dropdown/u-dropdown.vue

@@ -0,0 +1,298 @@
+<template>
+	<view class="u-dropdown">
+		<view class="u-dropdown__menu" :style="{
+			height: $u.addUnit(height)
+		}" :class="{
+			'u-border-bottom': borderBottom
+		}">
+			<view class="u-dropdown__menu__item" v-for="(item, index) in menuList" :key="index" @tap.stop="menuClick(index)">
+				<view class="u-flex">
+					<text class="u-dropdown__menu__item__text" :style="{
+						color: item.disabled ? '#c0c4cc' : (index === current || highlightIndex == index) ? activeColor : inactiveColor,
+						fontSize: $u.addUnit(titleSize)
+					}">{{item.title}}</text>
+					<view class="u-dropdown__menu__item__arrow" :class="{
+						'u-dropdown__menu__item__arrow--rotate': index === current
+					}">
+						<u-icon :custom-style="{display: 'flex'}" :name="menuIcon" :size="$u.addUnit(menuIconSize)" :color="index === current || highlightIndex == index ? activeColor : '#c0c4cc'"></u-icon>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="u-dropdown__content" :style="[contentStyle, {
+			transition: `opacity ${duration / 1000}s linear`,
+			top: $u.addUnit(height),
+			height: contentHeight + 'px'
+		}]"
+		 @tap="maskClick" @touchmove.stop.prevent>
+			<view @tap.stop.prevent class="u-dropdown__content__popup" :style="[popupStyle]">
+				<slot></slot>
+			</view>
+			<view class="u-dropdown__content__mask"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * dropdown 下拉菜单
+	 * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
+	 * @tutorial http://uviewui.com/components/dropdown.html
+	 * @property {String} active-color 标题和选项卡选中的颜色（默认#2979ff）
+	 * @property {String} inactive-color 标题和选项卡未选中的颜色（默认#606266）
+	 * @property {Boolean} close-on-click-mask 点击遮罩是否关闭菜单（默认true）
+	 * @property {Boolean} close-on-click-self 点击当前激活项标题是否关闭菜单（默认true）
+	 * @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）
+	 * @property {String | Number} height 标题菜单的高度，单位任意（默认80）
+	 * @property {String | Number} border-radius 菜单展开内容下方的圆角值，单位任意（默认0）
+	 * @property {Boolean} border-bottom 标题菜单是否显示下边框（默认false）
+	 * @property {String | Number} title-size 标题的字体大小，单位任意，数值默认为rpx单位（默认28）
+	 * @event {Function} open 下拉菜单被打开时触发
+	 * @event {Function} close 下拉菜单被关闭时触发
+	 * @example <u-dropdown></u-dropdown>
+	 */
+	export default {
+		name: 'u-dropdown',
+		props: {
+			// 菜单标题和选项的激活态颜色
+			activeColor: {
+				type: String,
+				default: '#2979ff'
+			},
+			// 菜单标题和选项的未激活态颜色
+			inactiveColor: {
+				type: String,
+				default: '#606266'
+			},
+			// 点击遮罩是否关闭菜单
+			closeOnClickMask: {
+				type: Boolean,
+				default: true
+			},
+			// 点击当前激活项标题是否关闭菜单
+			closeOnClickSelf: {
+				type: Boolean,
+				default: true
+			},
+			// 过渡时间
+			duration: {
+				type: [Number, String],
+				default: 300
+			},
+			// 标题菜单的高度，单位任意，数值默认为rpx单位
+			height: {
+				type: [Number, String],
+				default: 80
+			},
+			// 是否显示下边框
+			borderBottom: {
+				type: Boolean,
+				default: false
+			},
+			// 标题的字体大小
+			titleSize: {
+				type: [Number, String],
+				default: 28
+			},
+			// 下拉出来的内容部分的圆角值
+			borderRadius: {
+				type: [Number, String],
+				default: 0
+			},
+			// 菜单右侧的icon图标
+			menuIcon: {
+				type: String,
+				default: 'arrow-down'
+			},
+			// 菜单右侧图标的大小
+			menuIconSize: {
+				type: [Number, String],
+				default: 26
+			}
+		},
+		data() {
+			return {
+				showDropdown: true, // 是否打开下来菜单,
+				menuList: [], // 显示的菜单
+				active: false, // 下拉菜单的状态
+				// 当前是第几个菜单处于激活状态，小程序中此处不能写成false或者""，否则后续将current赋值为0，
+				// 无能的TX没有使用===而是使用==判断，导致程序认为前后二者没有变化，从而不会触发视图更新
+				current: 99999,
+				// 外层内容的样式，初始时处于底层，且透明
+				contentStyle: {
+					zIndex: -1,
+					opacity: 0
+				},
+				// 让某个菜单保持高亮的状态
+				highlightIndex: 99999,
+				contentHeight: 0
+			}
+		},
+		computed: {
+			// 下拉出来部分的样式
+			popupStyle() {
+				let style = {};
+				// 进行Y轴位移，展开状态时，恢复原位。收齐状态时，往上位移100%，进行隐藏
+				style.transform = `translateY(${this.active ? 0 : '-100%'})`
+				style['transition-duration'] = this.duration / 1000 + 's';
+				style.borderRadius = `0 0 ${this.$u.addUnit(this.borderRadius)} ${this.$u.addUnit(this.borderRadius)}`;
+				return style;
+			}
+		},
+		created() {
+			// 引用所有子组件(u-dropdown-item)的this，不能在data中声明变量，否则在微信小程序会造成循环引用而报错
+			this.children = [];
+		},
+		mounted() {
+			this.getContentHeight();
+		},
+		methods: {
+			init() {
+				// 当某个子组件内容变化时，触发父组件的init，父组件再让每一个子组件重新初始化一遍
+				// 以保证数据的正确性
+				this.menuList = [];
+				this.children.map(child => {
+					child.init();
+				})
+			},
+			// 点击菜单
+			menuClick(index) {
+				// 判断是否被禁用
+				if (this.menuList[index].disabled) return;
+				// 如果点击时的索引和当前激活项索引相同，意味着点击了激活项，需要收起下拉菜单
+				if (index === this.current && this.closeOnClickSelf) {
+					this.close();
+					// 等动画结束后，再移除下拉菜单中的内容，否则直接移除，也就没有下拉菜单收起的效果了
+					setTimeout(() => {
+						this.children[index].active = false;
+					}, this.duration)
+					return;
+				}
+				this.open(index);
+			},
+			// 打开下拉菜单
+			open(index) {
+				// 重置高亮索引，否则会造成多个菜单同时高亮
+				// this.highlightIndex = 9999;
+				// 展开时，设置下拉内容的样式
+				this.contentStyle = {
+					zIndex: 11,
+				}
+				// 标记展开状态以及当前展开项的索引
+				this.active = true;
+				this.current = index;
+				// 历遍所有的子元素，将索引匹配的项标记为激活状态，因为子元素是通过v-if控制切换的
+				// 之所以不是因display: none，是因为nvue没有display这个属性
+				this.children.map((val, idx) => {
+					val.active = index == idx ? true : false;
+				})
+				this.$emit('open', this.current);
+			},
+			// 设置下拉菜单处于收起状态
+			close() {
+				this.$emit('close', this.current);
+				// 设置为收起状态，同时current归位，设置为空字符串
+				this.active = false;
+				this.current = 99999;
+				// 下拉内容的样式进行调整，不透明度设置为0
+				this.contentStyle = {
+					zIndex: -1,
+					opacity: 0
+				}
+			},
+			// 点击遮罩
+			maskClick() {
+				// 如果不允许点击遮罩，直接返回
+				if (!this.closeOnClickMask) return;
+				this.close();
+			},
+			// 外部手动设置某个菜单高亮
+			highlight(index = undefined) {
+				this.highlightIndex = index !== undefined ? index : 99999;
+			},
+			// 获取下拉菜单内容的高度
+			getContentHeight() {
+				// 这里的原理为，因为dropdown组件是相对定位的，它的下拉出来的内容，必须给定一个高度
+				// 才能让遮罩占满菜单一下，直到屏幕底部的高度
+				// this.$u.sys()为uView封装的获取设备信息的方法
+				let windowHeight = this.$u.sys().windowHeight;
+				this.$uGetRect('.u-dropdown__menu').then(res => {
+					// 这里获取的是dropdown的尺寸，在H5上，uniapp获取尺寸是有bug的(以前提出修复过，后来又出现了此bug，目前hx2.8.11版本)
+					// H5端bug表现为元素尺寸的top值为导航栏底部到到元素的上边沿的距离，但是元素的bottom值确是导航栏顶部到元素底部的距离
+					// 二者是互相矛盾的，本质原因是H5端导航栏非原生，uni的开发者大意造成
+					// 这里取菜单栏的botton值合理的，不能用res.top，否则页面会造成滚动
+					this.contentHeight = windowHeight - res.bottom;
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+
+	.u-dropdown {
+		flex: 1;
+		width: 100%;
+		position: relative;
+
+		&__menu {
+			@include vue-flex;
+			position: relative;
+			z-index: 11;
+			height: 80rpx;
+
+			&__item {
+				flex: 1;
+				@include vue-flex;
+				justify-content: center;
+				align-items: center;
+
+				&__text {
+					font-size: 28rpx;
+					color: $u-content-color;
+				}
+
+				&__arrow {
+					margin-left: 6rpx;
+					transition: transform .3s;
+					align-items: center;
+					@include vue-flex;
+
+					&--rotate {
+						transform: rotate(180deg);
+					}
+				}
+			}
+		}
+
+		&__content {
+			position: absolute;
+			z-index: 8;
+			width: 100%;
+			left: 0px;
+			bottom: 0;
+			overflow: hidden;
+			
+
+			&__mask {
+				position: absolute;
+				z-index: 9;
+				background: rgba(0, 0, 0, .3);
+				width: 100%;
+				left: 0;
+				top: 0;
+				bottom: 0;
+			}
+
+			&__popup {
+				position: relative;
+				z-index: 10;
+				transition: all 0.3s;
+				transform: translate3D(0, -100%, 0);
+				overflow: hidden;
+			}
+		}
+
+	}
+</style>

uview-ui/components/u-empty/u-empty.vue

@@ -0,0 +1,193 @@
+<template>
+	<view class="u-empty" v-if="show" :style="{
+		marginTop: marginTop + 'rpx'
+	}">
+		<u-icon
+			:name="src ? src : 'empty-' + mode"
+			:custom-style="iconStyle"
+			:label="text ? text : icons[mode]"
+			label-pos="bottom"
+			:label-color="color"
+			:label-size="fontSize"
+			:size="iconSize"
+			:color="iconColor"
+			margin-top="14"
+		></u-icon>
+		<view class="u-slot-wrap">
+			<slot name="bottom"></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * empty 内容为空
+	 * @description 该组件用于需要加载内容，但是加载的第一页数据就为空，提示一个"没有内容"的场景， 我们精心挑选了十几个场景的图标，方便您使用。
+	 * @tutorial https://www.uviewui.com/components/empty.html
+	 * @property {String} color 文字颜色（默认#c0c4cc）
+	 * @property {String} text 文字提示（默认“无内容”）
+	 * @property {String} src 自定义图标路径，如定义，mode参数会失效
+	 * @property {String Number} font-size 提示文字的大小，单位rpx（默认28）
+	 * @property {String} mode 内置的图标，见官网说明（默认data）
+	 * @property {String Number} img-width 图标的宽度，单位rpx（默认240）
+	 * @property {String} img-height 图标的高度，单位rpx（默认auto）
+	 * @property {String Number} margin-top 组件距离上一个元素之间的距离（默认0）
+	 * @property {Boolean} show 是否显示组件（默认true）
+	 * @event {Function} click 点击组件时触发
+	 * @event {Function} close 点击关闭按钮时触发
+	 * @example <u-empty text="所谓伊人，在水一方" mode="list"></u-empty>
+	 */
+	export default {
+		name: "u-empty",
+		props: {
+			// 图标路径
+			src: {
+				type: String,
+				default: ''
+			},
+			// 提示文字
+			text: {
+				type: String,
+				default: ''
+			},
+			// 文字颜色
+			color: {
+				type: String,
+				default: '#c0c4cc'
+			},
+			// 图标的颜色
+			iconColor: {
+				type: String,
+				default: '#c0c4cc'
+			},
+			// 图标的大小
+			iconSize: {
+				type: [String, Number],
+				default: 120
+			},
+			// 文字大小，单位rpx
+			fontSize: {
+				type: [String, Number],
+				default: 26
+			},
+			// 选择预置的图标类型
+			mode: {
+				type: String,
+				default: 'data'
+			},
+			//  图标宽度，单位rpx
+			imgWidth: {
+				type: [String, Number],
+				default: 120
+			},
+			// 图标高度，单位rpx
+			imgHeight: {
+				type: [String, Number],
+				default: 'auto'
+			},
+			// 是否显示组件
+			show: {
+				type: Boolean,
+				default: true
+			},
+			// 组件距离上一个元素之间的距离
+			marginTop: {
+				type: [String, Number],
+				default: 0
+			},
+			iconStyle: {
+				type: Object,
+				default() {
+					return {}
+				}
+			}
+		},
+		data() {
+			return {
+				icons: {
+					car: '购物车为空',
+					page: '页面不存在',
+					search: '没有搜索结果',
+					address: '没有收货地址',
+					wifi: '没有WiFi',
+					order: '订单为空',
+					coupon: '没有优惠券',
+					favor: '暂无收藏',
+					permission: '无权限',
+					history: '无历史记录',
+					news: '无新闻列表',
+					message: '消息列表为空',
+					list: '列表为空',
+					data: '数据为空'
+				},
+				// icons: [{
+				// 	icon: 'car',
+				// 	text: '购物车为空'
+				// },{
+				// 	icon: 'page',
+				// 	text: '页面不存在'
+				// },{
+				// 	icon: 'search',
+				// 	text: '没有搜索结果'
+				// },{
+				// 	icon: 'address',
+				// 	text: '没有收货地址'
+				// },{
+				// 	icon: 'wifi',
+				// 	text: '没有WiFi'
+				// },{
+				// 	icon: 'order',
+				// 	text: '订单为空'
+				// },{
+				// 	icon: 'coupon',
+				// 	text: '没有优惠券'
+				// },{
+				// 	icon: 'favor',
+				// 	text: '暂无收藏'
+				// },{
+				// 	icon: 'permission',
+				// 	text: '无权限'
+				// },{
+				// 	icon: 'history',
+				// 	text: '无历史记录'
+				// },{
+				// 	icon: 'news',
+				// 	text: '无新闻列表'
+				// },{
+				// 	icon: 'message',
+				// 	text: '消息列表为空'
+				// },{
+				// 	icon: 'list',
+				// 	text: '列表为空'
+				// },{
+				// 	icon: 'data',
+				// 	text: '数据为空'
+				// }],
+
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+
+	.u-empty {
+		@include vue-flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+	}
+
+	.u-image {
+		margin-bottom: 20rpx;
+	}
+
+	.u-slot-wrap {
+		@include vue-flex;
+		justify-content: center;
+		align-items: center;
+		margin-top: 20rpx;
+	}
+</style>

uview-ui/components/u-field/u-field.vue

@@ -0,0 +1,384 @@
+<template>
+	<view class="u-field" :class="{'u-border-top': borderTop, 'u-border-bottom': borderBottom }">
+		<view class="u-field-inner" :class="[type == 'textarea' ? 'u-textarea-inner' : '', 'u-label-postion-' + labelPosition]">
+			<view class="u-label" :class="[required ? 'u-required' : '']" :style="{
+				justifyContent: justifyContent, 
+				flex: labelPosition == 'left' ? `0 0 ${labelWidth}rpx` : '1'
+			}">
+				<view class="u-icon-wrap" v-if="icon">
+					<u-icon size="32" :custom-style="iconStyle" :name="icon" :color="iconColor" class="u-icon"></u-icon>
+				</view>
+				<slot name="icon"></slot>
+				<text class="u-label-text" :class="[this.$slots.icon || icon ? 'u-label-left-gap' : '']">{{ label }}</text>
+			</view>
+			<view class="fild-body">
+				<view class="u-flex-1 u-flex" :style="[inputWrapStyle]">
+					<textarea v-if="type == 'textarea'" class="u-flex-1 u-textarea-class" :style="[fieldStyle]" :value="value"
+					 :placeholder="placeholder" :placeholderStyle="placeholderStyle" :disabled="disabled" :maxlength="inputMaxlength"
+					 :focus="focus" :autoHeight="autoHeight" :fixed="fixed" @input="onInput" @blur="onBlur" @focus="onFocus" @confirm="onConfirm"
+					 @tap="fieldClick" />
+					<input
+						v-else
+						:style="[fieldStyle]"
+						:type="type"
+						class="u-flex-1 u-field__input-wrap"
+						:value="value"
+						:password="password || this.type === 'password'"
+						:placeholder="placeholder"
+						:placeholderStyle="placeholderStyle"
+						:disabled="disabled"
+						:maxlength="inputMaxlength"
+						:focus="focus"
+						:confirmType="confirmType"
+						@focus="onFocus"
+						@blur="onBlur"
+						@input="onInput"
+						@confirm="onConfirm"
+						@tap="fieldClick"
+					/>
+				</view>
+				<u-icon :size="clearSize" v-if="clearable && value != '' && focused" name="close-circle-fill" color="#c0c4cc" class="u-clear-icon" @click="onClear"/>
+				<view class="u-button-wrap"><slot name="right" /></view>
+				<u-icon v-if="rightIcon" @click="rightIconClick" :name="rightIcon" color="#c0c4cc" :style="[rightIconStyle]" size="26" class="u-arror-right" />
+			</view>
+		</view>
+		<view v-if="errorMessage !== false && errorMessage != ''" class="u-error-message" :style="{
+			paddingLeft: labelWidth + 'rpx'
+		}">{{ errorMessage }}</view>
+	</view>
+</template>
+
+<script>
+/**
+ * field 输入框
+ * @description 借助此组件，可以实现表单的输入， 有"text"和"textarea"类型的，此外，借助uView的picker和actionSheet组件可以快速实现上拉菜单，时间，地区选择等， 为表单解决方案的利器。
+ * @tutorial https://www.uviewui.com/components/field.html
+ * @property {String} type 输入框的类型（默认text）
+ * @property {String} icon label左边的图标，限uView的图标名称
+ * @property {Object} icon-style 左边图标的样式，对象形式
+ * @property {Boolean} right-icon 输入框右边的图标名称，限uView的图标名称（默认false）
+ * @property {Boolean} required 是否必填，左边您显示红色"*"号（默认false）
+ * @property {String} label 输入框左边的文字提示
+ * @property {Boolean} password 是否密码输入方式(用点替换文字)，type为text时有效（默认false）
+ * @property {Boolean} clearable 是否显示右侧清空内容的图标控件(输入框有内容，且获得焦点时才显示)，点击可清空输入框内容（默认true）
+ * @property {Number String} label-width label的宽度，单位rpx（默认130）
+ * @property {String} label-align label的文字对齐方式（默认left）
+ * @property {Object} field-style 自定义输入框的样式，对象形式
+ * @property {Number | String} clear-size 清除图标的大小，单位rpx（默认30）
+ * @property {String} input-align 输入框内容对齐方式（默认left）
+ * @property {Boolean} border-bottom 是否显示field的下边框（默认true）
+ * @property {Boolean} border-top 是否显示field的上边框（默认false）
+ * @property {String} icon-color 左边通过icon配置的图标的颜色（默认#606266）
+ * @property {Boolean} auto-height 是否自动增高输入区域，type为textarea时有效（默认true）
+ * @property {String Boolean} error-message 显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
+ * @property {String} placeholder 输入框的提示文字
+ * @property {String} placeholder-style placeholder的样式(内联样式，字符串)，如"color: #ddd"
+ * @property {Boolean} focus 是否自动获得焦点（默认false）
+ * @property {Boolean} fixed 如果type为textarea，且在一个"position:fixed"的区域，需要指明为true（默认false）
+ * @property {Boolean} disabled 是否不可输入（默认false）
+ * @property {Number String} maxlength 最大输入长度，设置为 -1 的时候不限制最大长度（默认140）
+ * @property {String} confirm-type 设置键盘右下角按钮的文字，仅在type="text"时生效（默认done）
+ * @event {Function} input 输入框内容发生变化时触发
+ * @event {Function} focus 输入框获得焦点时触发
+ * @event {Function} blur 输入框失去焦点时触发
+ * @event {Function} confirm 点击完成按钮时触发
+ * @event {Function} right-icon-click 通过right-icon生成的图标被点击时触发
+ * @event {Function} click 输入框被点击或者通过right-icon生成的图标被点击时触发，这样设计是考虑到传递右边的图标，一般都为需要弹出"picker"等操作时的场景，点击倒三角图标，理应发出此事件，见上方说明
+ * @example <u-field v-model="mobile" label="手机号" required :error-message="errorMessage"></u-field>
+ */
+export default {
+	name:"u-field",
+	props: {
+		icon: String,
+		rightIcon: String,
+		// arrowDirection: {
+		// 	type: String,
+		// 	default: 'right'
+		// },
+		required: Boolean,
+		label: String,
+		password: Boolean,
+		clearable: {
+			type: Boolean,
+			default: true
+		},
+		// 左边标题的宽度单位rpx
+		labelWidth: {
+			type: [Number, String],
+			default: 130
+		},
+		// 对齐方式，left|center|right
+		labelAlign: {
+			type: String,
+			default: 'left'
+		},
+		inputAlign: {
+			type: String,
+			default: 'left'
+		},
+		iconColor: {
+			type: String,
+			default: '#606266'
+		},
+		autoHeight: {
+			type: Boolean,
+			default: true
+		},
+		errorMessage: {
+			type: [String, Boolean],
+			default: ''
+		},
+		placeholder: String,
+		placeholderStyle: String,
+		focus: Boolean,
+		fixed: Boolean,
+		value: [Number, String],
+		type: {
+			type: String,
+			default: 'text'
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		maxlength: {
+			type: [Number, String],
+			default: 140
+		},
+		confirmType: {
+			type: String,
+			default: 'done'
+		},
+		// lable的位置，可选为 left-左边，top-上边
+		labelPosition: {
+			type: String,
+			default: 'left'
+		},
+		// 输入框的自定义样式
+		fieldStyle: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		// 清除按钮的大小
+		clearSize: {
+			type: [Number, String],
+			default: 30
+		},
+		// lable左边的图标样式，对象形式
+		iconStyle: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		// 是否显示上边框
+		borderTop: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示下边框
+		borderBottom: {
+			type: Boolean,
+			default: true
+		},
+		// 是否自动去除两端的空格
+		trim: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		return {
+			focused: false,
+			itemIndex: 0,
+		};
+	},
+	computed: {
+		inputWrapStyle() {
+			let style = {};
+			style.textAlign = this.inputAlign;
+			// 判断lable的位置，如果是left的话，让input左边两边有间隙
+			if(this.labelPosition == 'left') {
+				style.margin = `0 8rpx`;
+			} else {
+				// 如果lable是top的，input的左边就没必要有间隙了
+				style.marginRight = `8rpx`;
+			}
+			return style;
+		},
+		rightIconStyle() {
+			let style = {};
+			if (this.arrowDirection == 'top') style.transform = 'roate(-90deg)';
+			if (this.arrowDirection == 'bottom') style.transform = 'roate(90deg)';
+			else style.transform = 'roate(0deg)';
+			return style;
+		},
+		labelStyle() {
+			let style = {};
+			if(this.labelAlign == 'left') style.justifyContent = 'flext-start';
+			if(this.labelAlign == 'center') style.justifyContent = 'center';
+			if(this.labelAlign == 'right') style.justifyContent = 'flext-end';
+			return style;
+		},
+		// uni不支持在computed中写style.justifyContent = 'center'的形式，故用此方法
+		justifyContent() {
+			if(this.labelAlign == 'left') return 'flex-start';
+			if(this.labelAlign == 'center') return 'center';
+			if(this.labelAlign == 'right') return 'flex-end';
+		},
+		// 因为uniapp的input组件的maxlength组件必须要数值，这里转为数值，给用户可以传入字符串数值
+		inputMaxlength() {
+			return Number(this.maxlength)
+		},
+		// label的位置
+		fieldInnerStyle() {
+			let style = {};
+			if(this.labelPosition == 'left') {
+				style.flexDirection = 'row';
+			} else {
+				style.flexDirection = 'column';
+			}
+			
+			return style;
+		}
+	},
+	methods: {
+		onInput(event) {
+			let value = event.detail.value;
+			// 判断是否去除空格
+			if(this.trim) value = this.$u.trim(value);
+			this.$emit('input', value);
+		},
+		onFocus(event) {
+			this.focused = true;
+			this.$emit('focus', event);
+		},
+		onBlur(event) {
+			// 最开始使用的是监听图标@touchstart事件，自从hx2.8.4后，此方法在微信小程序出错
+			// 这里改为监听点击事件，手点击清除图标时，同时也发生了@blur事件，导致图标消失而无法点击，这里做一个延时
+			setTimeout(() => {
+				this.focused = false;
+			}, 100)
+			this.$emit('blur', event);
+		},
+		onConfirm(e) {
+			this.$emit('confirm', e.detail.value);
+		},
+		onClear(event) {
+			this.$emit('input', '');
+		},
+		rightIconClick() {
+			this.$emit('right-icon-click');
+			this.$emit('click');
+		},
+		fieldClick() {
+			this.$emit('click');
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+	
+.u-field {
+	font-size: 28rpx;
+	padding: 20rpx 28rpx;
+	text-align: left;
+	position: relative;
+	color: $u-main-color;
+}
+
+.u-field-inner {
+	@include vue-flex;
+	align-items: center;
+}
+
+.u-textarea-inner {
+	align-items: flex-start;
+}
+
+.u-textarea-class {
+	min-height: 96rpx;
+	width: auto;
+	font-size: 28rpx;
+}
+
+.fild-body {
+	@include vue-flex;
+	flex: 1;
+	align-items: center;
+}
+
+.u-arror-right {
+	margin-left: 8rpx;
+}
+
+.u-label-text {
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+}
+
+.u-label-left-gap {
+	margin-left: 6rpx;
+}
+
+.u-label-postion-top {
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+.u-label {
+	width: 130rpx;
+	flex: 1 1 130rpx;
+	text-align: left;
+	position: relative;
+	@include vue-flex;
+	align-items: center;
+}
+
+.u-required::before {
+	content: '*';
+	position: absolute;
+	left: -16rpx;
+	font-size: 14px;
+	color: $u-type-error;
+	height: 9px;
+	line-height: 1;
+}
+
+.u-field__input-wrap {
+	position: relative;
+	overflow: hidden;
+	font-size: 28rpx;
+	height: 48rpx;
+	flex: 1;
+	width: auto;
+}
+
+.u-clear-icon {
+	@include vue-flex;
+	align-items: center;
+}
+
+.u-error-message {
+	color: $u-type-error;
+	font-size: 26rpx;
+	text-align: left;
+}
+
+.placeholder-style {
+	color: rgb(150, 151, 153);
+}
+
+.u-input-class {
+	font-size: 28rpx;
+}
+
+.u-button-wrap {
+	margin-left: 8rpx;
+}
+</style>

uview-ui/components/u-form-item/u-form-item.vue

@@ -0,0 +1,431 @@
+<template>
+	<view class="u-form-item" :class="{'u-border-bottom': elBorderBottom, 'u-form-item__border-bottom--error': validateState === 'error' && showError('border-bottom')}">
+		<view class="u-form-item__body" :style="{
+			flexDirection: elLabelPosition == 'left' ? 'row' : 'column'
+		}">
+			<!-- 微信小程序中，将一个参数设置空字符串，结果会变成字符串"true" -->
+			<view class="u-form-item--left" :style="{
+				width: uLabelWidth,
+				flex: `0 0 ${uLabelWidth}`,
+				marginBottom: elLabelPosition == 'left' ? 0 : '10rpx',
+			}">
+				<!-- 为了块对齐 -->
+				<view class="u-form-item--left__content" v-if="required || leftIcon || label">
+					<!-- nvue不支持伪元素before -->
+					<text v-if="required" class="u-form-item--left__content--required">*</text>
+					<view class="u-form-item--left__content__icon" v-if="leftIcon">
+						<u-icon :name="leftIcon" :custom-style="leftIconStyle"></u-icon>
+					</view>
+					<view class="u-form-item--left__content__label" :style="[elLabelStyle, {
+						'justify-content': elLabelAlign == 'left' ? 'flex-start' : elLabelAlign == 'center' ? 'center' : 'flex-end'
+					}]">
+						{{label}}
+					</view>
+				</view>
+			</view>
+			<view class="u-form-item--right u-flex">
+				<view class="u-form-item--right__content">
+					<view class="u-form-item--right__content__slot ">
+						<slot />
+					</view>
+					<view class="u-form-item--right__content__icon u-flex" v-if="$slots.right || rightIcon">
+						<u-icon :custom-style="rightIconStyle" v-if="rightIcon" :name="rightIcon"></u-icon>
+						<slot name="right" />
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="u-form-item__message" v-if="validateState === 'error' && showError('message')" :style="{
+			paddingLeft: elLabelPosition == 'left' ? $u.addUnit(elLabelWidth) : '0',
+		}">{{validateMessage}}</view>
+	</view>
+</template>
+
+<script>
+	import Emitter from '../../libs/util/emitter.js';
+	import schema from '../../libs/util/async-validator';
+	// 去除警告信息
+	schema.warning = function() {};
+
+	/**
+	 * form-item 表单item
+	 * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
+	 * @tutorial http://uviewui.com/components/form.html
+	 * @property {String} label 左侧提示文字
+	 * @property {Object} prop 表单域model对象的属性名，在使用 validate、resetFields 方法的情况下，该属性是必填的
+	 * @property {Boolean} border-bottom 是否显示表单域的下划线边框
+	 * @property {String} label-position 表单域提示文字的位置，left-左侧，top-上方
+	 * @property {String Number} label-width 提示文字的宽度，单位rpx（默认90）
+	 * @property {Object} label-style lable的样式，对象形式
+	 * @property {String} label-align lable的对齐方式
+	 * @property {String} right-icon 右侧自定义字体图标(限uView内置图标)或图片地址
+	 * @property {String} left-icon 左侧自定义字体图标(限uView内置图标)或图片地址
+	 * @property {Object} left-icon-style 左侧图标的样式，对象形式
+	 * @property {Object} right-icon-style 右侧图标的样式，对象形式
+	 * @property {Boolean} required 是否显示左边的"*"号，这里仅起展示作用，如需校验必填，请通过rules配置必填规则(默认false)
+	 * @example <u-form-item label="姓名"><u-input v-model="form.name" /></u-form-item>
+	 */
+
+	export default {
+		name: 'u-form-item',
+		mixins: [Emitter],
+		inject: {
+			uForm: {
+				default () {
+					return null
+				}
+			}
+		},
+		props: {
+			// input的label提示语
+			label: {
+				type: String,
+				default: ''
+			},
+			// 绑定的值
+			prop: {
+				type: String,
+				default: ''
+			},
+			// 是否显示表单域的下划线边框
+			borderBottom: {
+				type: [String, Boolean],
+				default: ''
+			},
+			// label的位置，left-左边，top-上边
+			labelPosition: {
+				type: String,
+				default: ''
+			},
+			// label的宽度，单位rpx
+			labelWidth: {
+				type: [String, Number],
+				default: ''
+			},
+			// lable的样式，对象形式
+			labelStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// lable字体的对齐方式
+			labelAlign: {
+				type: String,
+				default: ''
+			},
+			// 右侧图标
+			rightIcon: {
+				type: String,
+				default: ''
+			},
+			// 左侧图标
+			leftIcon: {
+				type: String,
+				default: ''
+			},
+			// 左侧图标的样式
+			leftIconStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 左侧图标的样式
+			rightIconStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 是否显示左边的必填星号，只作显示用，具体校验必填的逻辑，请在rules中配置
+			required: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				initialValue: '', // 存储的默认值
+				// isRequired: false, // 是否必填，由于人性化考虑，必填"*"号通过props的required配置，不再通过rules的规则自动生成
+				validateState: '', // 是否校验成功
+				validateMessage: '', // 校验失败的提示语
+				// 有错误时的提示方式，message-提示信息，border-如果input设置了边框，变成呈红色，
+				errorType: ['message'],
+				fieldValue: '', // 获取当前子组件input的输入的值
+				// 父组件的参数，在computed计算中，无法得知this.parent发生变化，故将父组件的参数值，放到data中
+				parentData: {
+					borderBottom: true,
+					labelWidth: 90,
+					labelPosition: 'left',
+					labelStyle: {},
+					labelAlign: 'left',
+				}
+			};
+		},
+		watch: {
+			validateState(val) {
+				this.broadcastInputError();
+			},
+			// 监听u-form组件的errorType的变化
+			"uForm.errorType"(val) {
+				this.errorType = val;
+				this.broadcastInputError();
+			},
+		},
+		computed: {
+			// 计算后的label宽度，由于需要多个判断，故放到computed中
+			uLabelWidth() {
+				// 如果用户设置label为空字符串(微信小程序空字符串最终会变成字符串的'true')，意味着要将label的位置宽度设置为auto
+				return this.elLabelPosition == 'left' ? (this.label === 'true' || this.label === '' ? 'auto' : this.$u.addUnit(this
+					.elLabelWidth)) : '100%';
+			},
+			showError() {
+				return type => {
+					// 如果errorType数组中含有none，或者toast提示类型
+					if (this.errorType.indexOf('none') >= 0) return false;
+					else if (this.errorType.indexOf(type) >= 0) return true;
+					else return false;
+				}
+			},
+			// label的宽度
+			elLabelWidth() {
+				// label默认宽度为90，优先使用本组件的值，如果没有(如果设置为0，也算是配置了值，依然起效)，则用u-form的值
+				return (this.labelWidth != 0 || this.labelWidth != '') ? this.labelWidth : (this.parentData.labelWidth ? this.parentData
+					.labelWidth :
+					90);
+			},
+			// label的样式
+			elLabelStyle() {
+				return Object.keys(this.labelStyle).length ? this.labelStyle : (this.parentData.labelStyle ? this.parentData.labelStyle :
+					{});
+			},
+			// label的位置，左侧或者上方
+			elLabelPosition() {
+				return this.labelPosition ? this.labelPosition : (this.parentData.labelPosition ? this.parentData.labelPosition :
+					'left');
+			},
+			// label的对齐方式
+			elLabelAlign() {
+				return this.labelAlign ? this.labelAlign : (this.parentData.labelAlign ? this.parentData.labelAlign : 'left');
+			},
+			// label的下划线
+			elBorderBottom() {
+				// 子组件的borderBottom默认为空字符串，如果不等于空字符串，意味着子组件设置了值，优先使用子组件的值
+				return this.borderBottom !== '' ? this.borderBottom : this.parentData.borderBottom ? this.parentData.borderBottom :
+					true;
+			}
+		},
+		methods: {
+			broadcastInputError() {
+				// 子组件发出事件，第三个参数为true或者false，true代表有错误
+				this.broadcast('u-input', 'on-form-item-error', this.validateState === 'error' && this.showError('border'));
+			},
+			// 判断是否需要required校验
+			setRules() {
+				let that = this;
+				// 由于人性化考虑，必填"*"号通过props的required配置，不再通过rules的规则自动生成
+				// 从父组件u-form拿到当前u-form-item需要验证 的规则
+				// let rules = this.getRules();
+				// if (rules.length) {
+				// 	this.isRequired = rules.some(rule => {
+				// 		// 如果有必填项，就返回，没有的话，就是undefined
+				// 		return rule.required;
+				// 	});
+				// }
+
+				// blur事件
+				this.$on('on-form-blur', that.onFieldBlur);
+				// change事件
+				this.$on('on-form-change', that.onFieldChange);
+			},
+
+			// 从u-form的rules属性中，取出当前u-form-item的校验规则
+			getRules() {
+				// 父组件的所有规则
+				let rules = this.parent.rules;
+				rules = rules ? rules[this.prop] : [];
+				// 保证返回的是一个数组形式
+				return [].concat(rules || []);
+			},
+
+			// blur事件时进行表单校验
+			onFieldBlur() {
+				this.validation('blur');
+			},
+
+			// change事件进行表单校验
+			onFieldChange() {
+				this.validation('change');
+			},
+
+			// 过滤出符合要求的rule规则
+			getFilteredRule(triggerType = '') {
+				let rules = this.getRules();
+				// 整体验证表单时，triggerType为空字符串，此时返回所有规则进行验证
+				if (!triggerType) return rules;
+				// 历遍判断规则是否有对应的事件，比如blur，change触发等的事件
+				// 使用indexOf判断，是因为某些时候设置的验证规则的trigger属性可能为多个，比如['blur','change']
+				// 某些场景可能的判断规则，可能不存在trigger属性，故先判断是否存在此属性
+				return rules.filter(res => res.trigger && res.trigger.indexOf(triggerType) !== -1);
+			},
+
+			// 校验数据
+			validation(trigger, callback = () => {}) {
+				// 检验之间，先获取需要校验的值
+				this.fieldValue = this.parent.model[this.prop];
+				// blur和change是否有当前方式的校验规则
+				let rules = this.getFilteredRule(trigger);
+				// 判断是否有验证规则，如果没有规则，也调用回调方法，否则父组件u-form会因为
+				// 对count变量的统计错误而无法进入上一层的回调
+				if (!rules || rules.length === 0) {
+					return callback('');
+				}
+				// 设置当前的装填，标识为校验中
+				this.validateState = 'validating';
+				// 调用async-validator的方法
+				let validator = new schema({
+					[this.prop]: rules
+				});
+				validator.validate({
+					[this.prop]: this.fieldValue
+				}, {
+					firstFields: true
+				}, (errors, fields) => {
+					// 记录状态和报错信息
+					this.validateState = !errors ? 'success' : 'error';
+					this.validateMessage = errors ? errors[0].message : '';
+					// 调用回调方法
+					callback(this.validateMessage);
+				});
+			},
+
+			// 清空当前的u-form-item
+			resetField() {
+				this.parent.model[this.prop] = this.initialValue;
+				// 设置为`success`状态，只是为了清空错误标记
+				this.validateState = 'success';
+			}
+		},
+
+		// 组件创建完成时，将当前实例保存到u-form中
+		mounted() {
+			// 支付宝、头条小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环应用
+			this.parent = this.$u.$parent.call(this, 'u-form');
+			if (this.parent) {
+				// 历遍parentData中的属性，将parent中的同名属性赋值给parentData
+				Object.keys(this.parentData).map(key => {
+					this.parentData[key] = this.parent[key];
+				});
+				// 如果没有传入prop，或者uForm为空(如果u-form-input单独使用，就不会有uForm注入)，就不进行校验
+				if (this.prop) {
+					// 将本实例添加到父组件中
+					this.parent.fields.push(this);
+					this.errorType = this.parent.errorType;
+					// 设置初始值
+					this.initialValue = this.fieldValue;
+					// 添加表单校验，这里必须要写在$nextTick中，因为u-form的rules是通过ref手动传入的
+					// 不在$nextTick中的话，可能会造成执行此处代码时，父组件还没通过ref把规则给u-form，导致规则为空
+					this.$nextTick(() => {
+						this.setRules();
+					})
+				}
+			}
+		},
+
+		// 组件销毁前，将实例从u-form的缓存中移除
+		beforeDestroy() {
+			// 如果当前没有prop的话表示当前不要进行删除（因为没有注入）
+			if (this.parent && this.prop) {
+				this.parent.fields.map((item, index) => {
+					if (item === this) this.parent.fields.splice(index, 1);
+				})
+			}
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+
+	.u-form-item {
+		@include vue-flex;
+		// align-items: flex-start;
+		padding: 20rpx 0;
+		font-size: 28rpx;
+		color: $u-main-color;
+		box-sizing: border-box;
+		line-height: $u-form-item-height;
+		flex-direction: column;
+
+		&__border-bottom--error:after {
+			border-color: $u-type-error;
+		}
+
+		&__body {
+			@include vue-flex;
+		}
+
+		&--left {
+			@include vue-flex;
+			align-items: center;
+
+			&__content {
+				position: relative;
+				@include vue-flex;
+				align-items: center;
+				padding-right: 10rpx;
+				flex: 1;
+
+				&__icon {
+					margin-right: 8rpx;
+				}
+
+				&--required {
+					position: absolute;
+					left: -16rpx;
+					vertical-align: middle;
+					color: $u-type-error;
+					padding-top: 6rpx;
+				}
+
+				&__label {
+					@include vue-flex;
+					align-items: center;
+					flex: 1;
+				}
+			}
+		}
+
+		&--right {
+			flex: 1;
+
+			&__content {
+				@include vue-flex;
+				align-items: center;
+				flex: 1;
+
+				&__slot {
+					flex: 1;
+					/* #ifndef MP */
+					@include vue-flex;
+					align-items: center;
+					/* #endif */
+				}
+
+				&__icon {
+					margin-left: 10rpx;
+					color: $u-light-color;
+					font-size: 30rpx;
+				}
+			}
+		}
+
+		&__message {
+			font-size: 24rpx;
+			line-height: 24rpx;
+			color: $u-type-error;
+			margin-top: 12rpx;
+		}
+	}
+</style>

uview-ui/components/u-form/u-form.vue

@@ -0,0 +1,134 @@
+<template>
+	<view class="u-form"><slot /></view>
+</template>
+
+<script>
+	/**
+	 * form 表单
+	 * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
+	 * @tutorial http://uviewui.com/components/form.html
+	 * @property {Object} model 表单数据对象
+	 * @property {Boolean} border-bottom 是否显示表单域的下划线边框
+	 * @property {String} label-position 表单域提示文字的位置，left-左侧，top-上方
+	 * @property {String Number} label-width 提示文字的宽度，单位rpx（默认90）
+	 * @property {Object} label-style lable的样式，对象形式
+	 * @property {String} label-align lable的对齐方式
+	 * @property {Object} rules 通过ref设置，见官网说明
+	 * @property {Array} error-type 错误的提示方式，数组形式，见上方说明(默认['message'])
+	 * @example <u-form :model="form" ref="uForm"></u-form>
+	 */
+
+export default {
+	name: 'u-form',
+	props: {
+		// 当前form的需要验证字段的集合
+		model: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 验证规则
+		// rules: {
+		// 	type: [Object, Function, Array],
+		// 	default() {
+		// 		return {};
+		// 	}
+		// },
+		// 有错误时的提示方式，message-提示信息，border-如果input设置了边框，变成呈红色，
+		// border-bottom-下边框呈现红色，none-无提示
+		errorType: {
+			type: Array,
+			default() {
+				return ['message', 'toast']
+			}
+		},
+		// 是否显示表单域的下划线边框
+		borderBottom: {
+			type: Boolean,
+			default: true
+		},
+		// label的位置，left-左边，top-上边
+		labelPosition: {
+			type: String,
+			default: 'left'
+		},
+		// label的宽度，单位rpx
+		labelWidth: {
+			type: [String, Number],
+			default: 90
+		},
+		// lable字体的对齐方式
+		labelAlign: {
+			type: String,
+			default: 'left'
+		},
+		// lable的样式，对象形式
+		labelStyle: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+	},
+	provide() {
+		return {
+			uForm: this
+		};
+	},
+	data() {
+		return {
+			rules: {}
+		};
+	},
+	created() {
+		// 存储当前form下的所有u-form-item的实例
+		// 不能定义在data中，否则微信小程序会造成循环引用而报错
+		this.fields = [];
+	},
+	methods: {
+		setRules(rules) {
+			this.rules = rules;
+		},
+		// 清空所有u-form-item组件的内容，本质上是调用了u-form-item组件中的resetField()方法
+		resetFields() {
+			this.fields.map(field => {
+				field.resetField();
+			});
+		},
+		// 校验全部数据
+		validate(callback) {
+			return new Promise(resolve => {
+				// 对所有的u-form-item进行校验
+				let valid = true; // 默认通过
+				let count = 0; // 用于标记是否检查完毕
+				let errorArr = []; // 存放错误信息
+				this.fields.map(field => {
+					// 调用每一个u-form-item实例的validation的校验方法
+					field.validation('', error => {
+						// 如果任意一个u-form-item校验不通过，就意味着整个表单不通过
+						if (error) {
+							valid = false;
+							errorArr.push(error);
+						}
+						// 当历遍了所有的u-form-item时，调用promise的then方法
+						if (++count === this.fields.length) {
+							resolve(valid); // 进入promise的then方法
+							// 判断是否设置了toast的提示方式，只提示最前面的表单域的第一个错误信息
+							if(this.errorType.indexOf('none') === -1 && this.errorType.indexOf('toast') >= 0 && errorArr.length) {
+								this.$u.toast(errorArr[0]);
+							}
+							// 调用回调方法
+							if (typeof callback == 'function') callback(valid);
+						}
+					});
+				});
+			});
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../libs/css/style.components.scss";
+</style>

uview-ui/components/u-full-screen/u-full-screen.vue

@@ -0,0 +1,52 @@
+<template>
+	<u-modal v-model="show" :show-cancel-button="true" confirm-text="升级" title="发现新版本" @cancel="cancel" @confirm="confirm">
+		<view class="u-update-content">
+			<rich-text :nodes="content"></rich-text>
+		</view>
+	</u-modal>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				show: false,
+				content: `
+					1. 修复badge组件的size参数无效问题<br>
+					2. 新增Modal模态框组件<br>
+					3. 新增压窗屏组件，可以在APP上以弹窗的形式遮盖导航栏和底部tabbar<br>
+					4. 修复键盘组件在微信小程序上遮罩无效的问题
+				`,
+			}
+		},
+		onReady() {
+			this.show = true;
+		},
+		methods: {
+			cancel() {
+				this.closeModal();
+			},
+			confirm() {
+				this.closeModal();
+			},
+			closeModal() {
+				uni.navigateBack();
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+	
+	.u-full-content {
+		background-color: #00C777;
+	}
+	
+	.u-update-content {
+		font-size: 26rpx;
+		color: $u-content-color;
+		line-height: 1.7;
+		padding: 30rpx;
+	}
+</style>

uview-ui/components/u-gap/u-gap.vue

@@ -0,0 +1,54 @@
+<template>
+	<view class="u-gap" :style="[gapStyle]"></view>
+</template>
+
+<script>
+/**
+ * gap 间隔槽
+ * @description 该组件一般用于内容块之间的用一个灰色块隔开的场景，方便用户风格统一，减少工作量
+ * @tutorial https://www.uviewui.com/components/gap.html
+ * @property {String} bg-color 背景颜色（默认#f3f4f6）
+ * @property {String Number} height 分割槽高度，单位rpx（默认30）
+ * @property {String Number} margin-top 与前一个组件的距离，单位rpx（默认0）
+ * @property {String Number} margin-bottom 与后一个组件的距离，单位rpx（0）
+ * @example <u-gap height="80" bg-color="#bbb"></u-gap>
+ */
+export default {
+	name: "u-gap",
+	props: {
+		bgColor: {
+			type: String,
+			default: 'transparent ' // 背景透明
+		},
+		// 高度
+		height: {
+			type: [String, Number],
+			default: 30
+		},
+		// 与上一个组件的距离
+		marginTop: {
+			type: [String, Number],
+			default: 0
+		},
+		// 与下一个组件的距离
+		marginBottom: {
+			type: [String, Number],
+			default: 0
+		},
+	},
+	computed: {
+		gapStyle() {
+			return {
+				backgroundColor: this.bgColor,
+				height: this.height + 'rpx',
+				marginTop: this.marginTop + 'rpx',
+				marginBottom: this.marginBottom + 'rpx'
+			};
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+</style>

uview-ui/components/u-grid-item/u-grid-item.vue

@@ -0,0 +1,126 @@
+<template>
+	<view class="u-grid-item" :hover-class="parentData.hoverClass"
+	 :hover-stay-time="200" @tap="click" :style="{
+			background: bgColor,
+			width: width,
+		}">
+		<view class="u-grid-item-box" :style="[customStyle]" :class="[parentData.border ? 'u-border-right u-border-bottom' : '']">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * gridItem 提示
+	 * @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。搭配u-grid使用
+	 * @tutorial https://www.uviewui.com/components/grid.html
+	 * @property {String} bg-color 宫格的背景颜色（默认#ffffff）
+	 * @property {String Number} index 点击宫格时，返回的值
+	 * @property {Object} custom-style 自定义样式，对象形式
+	 * @event {Function} click 点击宫格触发
+	 * @example <u-grid-item></u-grid-item>
+	 */
+	export default {
+		name: "u-grid-item",
+		props: {
+			// 背景颜色
+			bgColor: {
+				type: String,
+				default: '#ffffff'
+			},
+			// 点击时返回的index
+			index: {
+				type: [Number, String],
+				default: ''
+			},
+			// 自定义样式，对象形式
+			customStyle: {
+				type: Object,
+				default() {
+					return {
+						padding: '30rpx 0'
+					}
+				}
+			}
+		},
+		data() {
+			return {
+				parentData: {
+					hoverClass: '', // 按下去的时候，是否显示背景灰色
+					col: 3, // 父组件划分的宫格数
+					border: true, // 是否显示边框，根据父组件决定
+				}
+			};
+		},
+		created() {
+			// 父组件的实例
+			this.updateParentData();
+			// this.parent在updateParentData()中定义
+			this.parent.children.push(this);
+		},
+		computed: {
+			// 每个grid-item的宽度
+			width() {
+				return 100 / Number(this.parentData.col) + '%';
+			},
+		},
+		methods: {
+			// 获取父组件的参数
+			updateParentData() {
+				// 此方法写在mixin中
+				this.getParentData('u-grid');
+			},
+			click() {
+				this.$emit('click', this.index);
+				this.parent && this.parent.click(this.index);
+			}
+		}
+	};
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+	
+	.u-grid-item {
+		box-sizing: border-box;
+		background: #fff;
+		@include vue-flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		flex-direction: column;
+		
+		/* #ifdef MP */
+		position: relative;
+		float: left;
+		/* #endif */
+	}
+
+	.u-grid-item-hover {
+		background: #f7f7f7 !important;
+	}
+
+	.u-grid-marker-box {
+		position: absolute;
+		/* #ifndef APP-NVUE */
+		display: inline-flex;		
+		/* #endif */
+		line-height: 0;
+	}
+
+	.u-grid-marker-wrap {
+		position: absolute;
+	}
+
+	.u-grid-item-box {
+		padding: 30rpx 0;
+		@include vue-flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		flex: 1;
+		width: 100%;
+		height: 100%;
+	}
+</style>

uview-ui/components/u-grid/u-grid.vue

@@ -0,0 +1,108 @@
+<template>
+	<view class="u-grid" :class="{'u-border-top u-border-left': border}" :style="[gridStyle]"><slot /></view>
+</template>
+
+<script>
+/**
+ * grid 宫格布局
+ * @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。
+ * @tutorial https://www.uviewui.com/components/grid.html
+ * @property {String Number} col 宫格的列数（默认3）
+ * @property {Boolean} border 是否显示宫格的边框（默认true）
+ * @property {Boolean} hover-class 点击宫格的时候，是否显示按下的灰色背景（默认false）
+ * @event {Function} click 点击宫格触发
+ * @example <u-grid :col="3" @click="click"></u-grid>
+ */
+export default {
+	name: 'u-grid',
+	props: {
+		// 分成几列
+		col: {
+			type: [Number, String],
+			default: 3
+		},
+		// 是否显示边框
+		border: {
+			type: Boolean,
+			default: true
+		},
+		// 宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右
+		align: {
+			type: String,
+			default: 'left'
+		},
+		// 宫格按压时的样式类，"none"为无效果
+		hoverClass: {
+			type: String,
+			default: 'u-hover-class'
+		}
+	},
+	data() {
+		return {
+			index: 0,
+		}
+	},
+	watch: {
+		// 当父组件需要子组件需要共享的参数发生了变化，手动通知子组件
+		parentData() {
+			if(this.children.length) {
+				this.children.map(child => {
+					// 判断子组件(u-radio)如果有updateParentData方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
+					typeof(child.updateParentData) == 'function' && child.updateParentData();
+				})
+			}
+		},
+	},
+	created() {
+		// 如果将children定义在data中，在微信小程序会造成循环引用而报错
+		this.children = [];
+	},
+	computed: {
+		// 计算父组件的值是否发生变化
+		parentData() {
+			return [this.hoverClass, this.col, this.size, this.border];
+		},
+		// 宫格对齐方式
+		gridStyle() {
+			let style = {};
+			switch(this.align) {
+				case 'left':
+					style.justifyContent = 'flex-start';
+					break;
+				case 'center':
+					style.justifyContent = 'center';
+					break;
+				case 'right':
+					style.justifyContent = 'flex-end';
+					break;
+				default: style.justifyContent = 'flex-start';
+			};
+			return style;
+		}
+	},
+	methods: {
+		click(index) {
+			this.$emit('click', index);
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../libs/css/style.components.scss";
+
+.u-grid {
+	width: 100%;
+	/* #ifdef MP */
+	position: relative;
+	box-sizing: border-box;
+	overflow: hidden;
+	/* #endif */
+	
+	/* #ifndef MP */
+	@include vue-flex;
+	flex-wrap: wrap;
+	align-items: center;
+	/* #endif */
+}
+</style>

uview-ui/components/u-icon/u-icon.vue

@@ -0,0 +1,336 @@
+<template>
+	<view :style="[customStyle]" class="u-icon" @tap="click" :class="['u-icon--' + labelPos]">
+		<image class="u-icon__img" v-if="isImg" :src="name" :mode="imgMode" :style="[imgStyle]"></image>
+		<text v-else class="u-icon__icon" :class="customClass" :style="[iconStyle]" :hover-class="hoverClass"
+			  @touchstart="touchstart">
+			<text v-if="showDecimalIcon" :style="[decimalIconStyle]" :class="decimalIconClass" :hover-class="hoverClass"
+				  class="u-icon__decimal">
+			</text>
+		</text>
+		<!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
+		<text v-if="label !== ''" class="u-icon__label" :style="{
+			color: labelColor,
+			fontSize: $u.addUnit(labelSize),
+			marginLeft: labelPos == 'right' ? $u.addUnit(marginLeft) : 0,
+			marginTop: labelPos == 'bottom' ? $u.addUnit(marginTop) : 0,
+			marginRight: labelPos == 'left' ? $u.addUnit(marginRight) : 0,
+			marginBottom: labelPos == 'top' ? $u.addUnit(marginBottom) : 0,
+		}">{{ label }}
+		</text>
+	</view>
+</template>
+
+<script>
+/**
+ * icon 图标
+ * @description 基于字体的图标集，包含了大多数常见场景的图标。
+ * @tutorial https://www.uviewui.com/components/icon.html
+ * @property {String} name 图标名称，见示例图标集
+ * @property {String} color 图标颜色（默认inherit）
+ * @property {String | Number} size 图标字体大小，单位rpx（默认32）
+ * @property {String | Number} label-size label字体大小，单位rpx（默认28）
+ * @property {String} label 图标右侧的label文字（默认28）
+ * @property {String} label-pos label文字相对于图标的位置，只能right或bottom（默认right）
+ * @property {String} label-color label字体颜色（默认#606266）
+ * @property {Object} custom-style icon的样式，对象形式
+ * @property {String} custom-prefix 自定义字体图标库时，需要写上此值
+ * @property {String | Number} margin-left label在右侧时与图标的距离，单位rpx（默认6）
+ * @property {String | Number} margin-top label在下方时与图标的距离，单位rpx（默认6）
+ * @property {String | Number} margin-bottom label在上方时与图标的距离，单位rpx（默认6）
+ * @property {String | Number} margin-right label在左侧时与图标的距离，单位rpx（默认6）
+ * @property {String} label-pos label相对于图标的位置，只能right或bottom（默认right）
+ * @property {String} index 一个用于区分多个图标的值，点击图标时通过click事件传出
+ * @property {String} hover-class 图标按下去的样式类，用法同uni的view组件的hover-class参数，详情见官网
+ * @property {String} width 显示图片小图标时的宽度
+ * @property {String} height 显示图片小图标时的高度
+ * @property {String} top 图标在垂直方向上的定位
+ * @property {String} top 图标在垂直方向上的定位
+ * @property {String} top 图标在垂直方向上的定位
+ * @property {Boolean} show-decimal-icon 是否为DecimalIcon
+ * @property {String} inactive-color 背景颜色，可接受主题色，仅Decimal时有效
+ * @property {String | Number} percent 显示的百分比，仅Decimal时有效
+ * @event {Function} click 点击图标时触发
+ * @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
+ */
+export default {
+	name: 'u-icon',
+	props: {
+		// 图标类名
+		name: {
+			type: String,
+			default: ''
+		},
+		// 图标颜色，可接受主题色
+		color: {
+			type: String,
+			default: ''
+		},
+		// 字体大小，单位rpx
+		size: {
+			type: [Number, String],
+			default: 'inherit'
+		},
+		// 是否显示粗体
+		bold: {
+			type: Boolean,
+			default: false
+		},
+		// 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
+		index: {
+			type: [Number, String],
+			default: ''
+		},
+		// 触摸图标时的类名
+		hoverClass: {
+			type: String,
+			default: ''
+		},
+		// 自定义扩展前缀，方便用户扩展自己的图标库
+		customPrefix: {
+			type: String,
+			default: 'uicon'
+		},
+		// 图标右边或者下面的文字
+		label: {
+			type: [String, Number],
+			default: ''
+		},
+		// label的位置，只能右边或者下边
+		labelPos: {
+			type: String,
+			default: 'right'
+		},
+		// label的大小
+		labelSize: {
+			type: [String, Number],
+			default: '28'
+		},
+		// label的颜色
+		labelColor: {
+			type: String,
+			default: '#606266'
+		},
+		// label与图标的距离(横向排列)
+		marginLeft: {
+			type: [String, Number],
+			default: '6'
+		},
+		// label与图标的距离(竖向排列)
+		marginTop: {
+			type: [String, Number],
+			default: '6'
+		},
+		// label与图标的距离(竖向排列)
+		marginRight: {
+			type: [String, Number],
+			default: '6'
+		},
+		// label与图标的距离(竖向排列)
+		marginBottom: {
+			type: [String, Number],
+			default: '6'
+		},
+		// 图片的mode
+		imgMode: {
+			type: String,
+			default: 'widthFix'
+		},
+		// 自定义样式
+		customStyle: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		// 用于显示图片小图标时，图片的宽度
+		width: {
+			type: [String, Number],
+			default: ''
+		},
+		// 用于显示图片小图标时，图片的高度
+		height: {
+			type: [String, Number],
+			default: ''
+		},
+		// 用于解决某些情况下，让图标垂直居中的用途
+		top: {
+			type: [String, Number],
+			default: 0
+		},
+		// 是否为DecimalIcon
+		showDecimalIcon: {
+			type: Boolean,
+			default: false
+		},
+		// 背景颜色，可接受主题色，仅Decimal时有效
+		inactiveColor: {
+			type: String,
+			default: '#ececec'
+		},
+		// 显示的百分比，仅Decimal时有效
+		percent: {
+			type: [Number, String],
+			default: '50'
+		}
+	},
+	computed: {
+		customClass() {
+			let classes = []
+			classes.push(this.customPrefix + '-' + this.name)
+			// uView的自定义图标类名为u-iconfont
+			if (this.customPrefix == 'uicon') {
+				classes.push('u-iconfont')
+			} else {
+				classes.push(this.customPrefix)
+			}
+			// 主题色，通过类配置
+			if (this.showDecimalIcon && this.inactiveColor && this.$u.config.type.includes(this.inactiveColor)) {
+				classes.push('u-icon__icon--' + this.inactiveColor)
+			} else if (this.color && this.$u.config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
+			// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
+			// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
+			//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
+			classes = classes.join(' ')
+			//#endif
+			return classes
+		},
+		iconStyle() {
+			let style = {}
+			style = {
+				fontSize: this.size == 'inherit' ? 'inherit' : this.$u.addUnit(this.size),
+				fontWeight: this.bold ? 'bold' : 'normal',
+				// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
+				top: this.$u.addUnit(this.top)
+			}
+			// 非主题色值时，才当作颜色值
+			if (this.showDecimalIcon && this.inactiveColor && !this.$u.config.type.includes(this.inactiveColor)) {
+				style.color = this.inactiveColor
+			} else if (this.color && !this.$u.config.type.includes(this.color)) style.color = this.color
+
+			return style
+		},
+		// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
+		isImg() {
+			return this.name.indexOf('/') !== -1
+		},
+		imgStyle() {
+			let style = {}
+			// 如果设置width和height属性，则优先使用，否则使用size属性
+			style.width = this.width ? this.$u.addUnit(this.width) : this.$u.addUnit(this.size)
+			style.height = this.height ? this.$u.addUnit(this.height) : this.$u.addUnit(this.size)
+			return style
+		},
+		decimalIconStyle() {
+			let style = {}
+			style = {
+				fontSize: this.size == 'inherit' ? 'inherit' : this.$u.addUnit(this.size),
+				fontWeight: this.bold ? 'bold' : 'normal',
+				// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
+				top: this.$u.addUnit(this.top),
+				width: this.percent + '%'
+			}
+			// 非主题色值时，才当作颜色值
+			if (this.color && !this.$u.config.type.includes(this.color)) style.color = this.color
+			return style
+		},
+		decimalIconClass() {
+			let classes = []
+			classes.push(this.customPrefix + '-' + this.name)
+			// uView的自定义图标类名为u-iconfont
+			if (this.customPrefix == 'uicon') {
+				classes.push('u-iconfont')
+			} else {
+				classes.push(this.customPrefix)
+			}
+			// 主题色，通过类配置
+			if (this.color && this.$u.config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
+			else classes.push('u-icon__icon--primary')
+			// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
+			// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
+			//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
+			classes = classes.join(' ')
+			//#endif
+			return classes
+		}
+	},
+	methods: {
+		click() {
+			this.$emit('click', this.index)
+		},
+		touchstart() {
+			this.$emit('touchstart', this.index)
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+@import "../../libs/css/style.components.scss";
+@import '../../iconfont.css';
+
+.u-icon {
+	display: inline-flex;
+	align-items: center;
+
+	&--left {
+		flex-direction: row-reverse;
+		align-items: center;
+	}
+
+	&--right {
+		flex-direction: row;
+		align-items: center;
+	}
+
+	&--top {
+		flex-direction: column-reverse;
+		justify-content: center;
+	}
+
+	&--bottom {
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	&__icon {
+		position: relative;
+
+		&--primary {
+			color: $u-type-primary;
+		}
+
+		&--success {
+			color: $u-type-success;
+		}
+
+		&--error {
+			color: $u-type-error;
+		}
+
+		&--warning {
+			color: $u-type-warning;
+		}
+
+		&--info {
+			color: $u-type-info;
+		}
+	}
+
+	&__decimal {
+		position: absolute;
+		top: 0;
+		left: 0;
+		display: inline-block;
+		overflow: hidden;
+	}
+
+	&__img {
+		height: auto;
+		will-change: transform;
+	}
+
+	&__label {
+		line-height: 1;
+	}
+}
+</style>

uview-ui/components/u-image/u-image.vue

@@ -0,0 +1,266 @@
+<template>
+	<view class="u-image" @tap="onClick" :style="[wrapStyle, backgroundStyle]">
+		<image
+			v-if="!isError"
+			:src="src"
+			:mode="mode"
+			@error="onErrorHandler"
+			@load="onLoadHandler"
+			:lazy-load="lazyLoad"
+			class="u-image__image"
+			:style="{
+				borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius)
+			}"
+		></image>
+		<view
+			v-if="showLoading && loading"
+			class="u-image__loading"
+			:style="{
+				borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius),
+				backgroundColor: this.bgColor
+			}"
+		>
+			<slot v-if="$slots.loading" name="loading" />
+			<u-icon v-else :name="loadingIcon" :width="width" :height="height"></u-icon>
+		</view>
+		<view
+			v-if="showError && isError && !loading"
+			class="u-image__error"
+			:style="{
+				borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius)
+			}"
+		>
+			<slot v-if="$slots.error" name="error" />
+			<u-icon v-else :name="errorIcon" :width="width" :height="height"></u-icon>
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * Image 图片
+ * @description 此组件为uni-app的image组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
+ * @tutorial https://uviewui.com/components/image.html
+ * @property {String} src 图片地址
+ * @property {String} mode 裁剪模式，见官网说明
+ * @property {String | Number} width 宽度，单位任意，如果为数值，则为rpx单位（默认100%）
+ * @property {String | Number} height 高度，单位任意，如果为数值，则为rpx单位（默认 auto）
+ * @property {String} shape 图片形状，circle-圆形，square-方形（默认square）
+ * @property {String | Number} border-radius 圆角值，单位任意，如果为数值，则为rpx单位（默认 0）
+ * @property {Boolean} lazy-load 是否懒加载，仅微信小程序、App、百度小程序、字节跳动小程序有效（默认 true）
+ * @property {Boolean} show-menu-by-longpress 是否开启长按图片显示识别小程序码菜单，仅微信小程序有效（默认 false）
+ * @property {String} loading-icon 加载中的图标，或者小图片（默认 photo）
+ * @property {String} error-icon 加载失败的图标，或者小图片（默认 error-circle）
+ * @property {Boolean} show-loading 是否显示加载中的图标或者自定义的slot（默认 true）
+ * @property {Boolean} show-error 是否显示加载错误的图标或者自定义的slot（默认 true）
+ * @property {Boolean} fade 是否需要淡入效果（默认 true）
+ * @property {String Number} width 传入图片路径时图片的宽度
+ * @property {String Number} height 传入图片路径时图片的高度
+ * @property {Boolean} webp 只支持网络资源，只对微信小程序有效（默认 false）
+ * @property {String | Number} duration 搭配fade参数的过渡时间，单位ms（默认 500）
+ * @event {Function} click 点击图片时触发
+ * @event {Function} error 图片加载失败时触发
+ * @event {Function} load 图片加载成功时触发
+ * @example <u-image width="100%" height="300rpx" :src="src"></u-image>
+ */
+export default {
+	name: 'u-image',
+	props: {
+		// 图片地址
+		src: {
+			type: String,
+			default: ''
+		},
+		// 裁剪模式
+		mode: {
+			type: String,
+			default: 'aspectFill'
+		},
+		// 宽度，单位任意
+		width: {
+			type: [String, Number],
+			default: '100%'
+		},
+		// 高度，单位任意
+		height: {
+			type: [String, Number],
+			default: 'auto'
+		},
+		// 图片形状，circle-圆形，square-方形
+		shape: {
+			type: String,
+			default: 'square'
+		},
+		// 圆角，单位任意
+		borderRadius: {
+			type: [String, Number],
+			default: 0
+		},
+		// 是否懒加载，微信小程序、App、百度小程序、字节跳动小程序
+		lazyLoad: {
+			type: Boolean,
+			default: true
+		},
+		// 开启长按图片显示识别微信小程序码菜单
+		showMenuByLongpress: {
+			type: Boolean,
+			default: true
+		},
+		// 加载中的图标，或者小图片
+		loadingIcon: {
+			type: String,
+			default: 'photo'
+		},
+		// 加载失败的图标，或者小图片
+		errorIcon: {
+			type: String,
+			default: 'error-circle'
+		},
+		// 是否显示加载中的图标或者自定义的slot
+		showLoading: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示加载错误的图标或者自定义的slot
+		showError: {
+			type: Boolean,
+			default: true
+		},
+		// 是否需要淡入效果
+		fade: {
+			type: Boolean,
+			default: true
+		},
+		// 只支持网络资源，只对微信小程序有效
+		webp: {
+			type: Boolean,
+			default: false
+		},
+		// 过渡时间，单位ms
+		duration: {
+			type: [String, Number],
+			default: 500
+		},
+		// 背景颜色，用于深色页面加载图片时，为了和背景色融合
+		bgColor: {
+			type: String,
+			default: '#f3f4f6'
+		}
+	},
+	data() {
+		return {
+			// 图片是否加载错误，如果是，则显示错误占位图
+			isError: false,
+			// 初始化组件时，默认为加载中状态
+			loading: true,
+			// 不透明度，为了实现淡入淡出的效果
+			opacity: 1,
+			// 过渡时间，因为props的值无法修改，故需要一个中间值
+			durationTime: this.duration,
+			// 图片加载完成时，去掉背景颜色，因为如果是png图片，就会显示灰色的背景
+			backgroundStyle: {}
+		};
+	},
+	watch: {
+		src: {
+			immediate: true,
+			handler (n) {
+				if(!n) {
+					// 如果传入null或者''，或者false，或者undefined，标记为错误状态
+					this.isError = true;
+					this.loading = false;
+				} else {
+					this.isError = false;
+				}
+			}
+		}
+	},
+	computed: {
+		wrapStyle() {
+			let style = {};
+			// 通过调用addUnit()方法，如果有单位，如百分比，px单位等，直接返回，如果是纯粹的数值，则加上rpx单位
+			style.width = this.$u.addUnit(this.width);
+			style.height = this.$u.addUnit(this.height);
+			// 如果是配置了圆形，设置50%的圆角，否则按照默认的配置值
+			style.borderRadius = this.shape == 'circle' ? '50%' : this.$u.addUnit(this.borderRadius);
+			// 如果设置圆角，必须要有hidden，否则可能圆角无效
+			style.overflow = this.borderRadius > 0 ? 'hidden' : 'visible';
+			if (this.fade) {
+				style.opacity = this.opacity;
+				style.transition = `opacity ${Number(this.durationTime) / 1000}s ease-in-out`;
+			}
+			return style;
+		}
+	},
+	methods: {
+		// 点击图片
+		onClick() {
+			this.$emit('click');
+		},
+		// 图片加载失败
+		onErrorHandler(err) {
+			this.loading = false;
+			this.isError = true;
+			this.$emit('error', err);
+		},
+		// 图片加载完成，标记loading结束
+		onLoadHandler() {
+			this.loading = false;
+			this.isError = false;
+			this.$emit('load');
+			// 如果不需要动画效果，就不执行下方代码，同时移除加载时的背景颜色
+			// 否则无需fade效果时，png图片依然能看到下方的背景色
+			if (!this.fade) return this.removeBgColor();
+			// 原来opacity为1(不透明，是为了显示占位图)，改成0(透明，意味着该元素显示的是背景颜色，默认的灰色)，再改成1，是为了获得过渡效果
+			this.opacity = 0;
+			// 这里设置为0，是为了图片展示到背景全透明这个过程时间为0，延时之后延时之后重新设置为duration，是为了获得背景透明(灰色)
+			// 到图片展示的过程中的淡入效果
+			this.durationTime = 0;
+			// 延时50ms，否则在浏览器H5，过渡效果无效
+			setTimeout(() => {
+				this.durationTime = this.duration;
+				this.opacity = 1;
+				setTimeout(() => {
+					this.removeBgColor();
+				}, this.durationTime);
+			}, 50);
+		},
+		// 移除图片的背景色
+		removeBgColor() {
+			// 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
+			this.backgroundStyle = {
+				backgroundColor: 'transparent'
+			};
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.u-image {
+	position: relative;
+	transition: opacity 0.5s ease-in-out;
+
+	&__image {
+		width: 100%;
+		height: 100%;
+	}
+
+	&__loading,
+	&__error {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		@include vue-flex;
+		align-items: center;
+		justify-content: center;
+		background-color: $u-bg-color;
+		color: $u-tips-color;
+		font-size: 46rpx;
+	}
+}
+</style>

uview-ui/components/u-index-anchor/u-index-anchor.vue

@@ -0,0 +1,89 @@
+<template>
+	<!-- 支付宝小程序使用$u.getRect()获取组件的根元素尺寸，所以在外面套一个"壳" -->
+	<view>
+		<view class="u-index-anchor-wrapper" :id="$u.guid()" :style="[wrapperStyle]">
+			<view class="u-index-anchor " :class="[active ? 'u-index-anchor--active' : '']" :style="[customAnchorStyle]">
+				<slot v-if="useSlot" />
+				<block v-else>
+					<text>{{ index }}</text>
+				</block>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * indexAnchor 索引列表锚点
+	 * @description 通过折叠面板收纳内容区域,搭配<u-index-anchor>使用
+	 * @tutorial https://www.uviewui.com/components/indexList.html#indexanchor-props
+	 * @property {Boolean} use-slot 是否使用自定义内容的插槽（默认false）
+	 * @property {String Number} index 索引字符，如果定义了use-slot，此参数自动失效
+	 * @property {Object} custStyle 自定义样式，对象形式，如"{color: 'red'}"
+	 * @event {Function} default 锚点位置显示内容，默认为索引字符
+	 * @example <u-index-anchor :index="item" />
+	 */
+	export default {
+		name: "u-index-anchor",
+		props: {
+			useSlot: {
+				type: Boolean,
+				default: false
+			},
+			index: {
+				type: String,
+				default: ''
+			},
+			customStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			}
+		},
+		data() {
+			return {
+				active: false,
+				wrapperStyle: {},
+				anchorStyle: {}
+			}
+		},
+		created() {
+			this.parent = false;
+		},
+		mounted() {
+			this.parent = this.$u.$parent.call(this, 'u-index-list');
+			if(this.parent) {
+				this.parent.children.push(this);
+				this.parent.updateData();
+			}
+		},
+		computed: {
+			customAnchorStyle() {
+				return Object.assign(this.anchorStyle, this.customStyle);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-index-anchor {
+		box-sizing: border-box;
+		padding: 14rpx 24rpx;
+		color: #606266;
+		width: 100%;
+		font-weight: 500;
+		font-size: 28rpx;
+		line-height: 1.2;
+		background-color: rgb(245, 245, 245);
+	}
+
+	.u-index-anchor--active {
+		right: 0;
+		left: 0;
+		color: #2979ff;
+		background-color: #fff;
+	}
+</style>

uview-ui/components/u-index-list/u-index-list.vue

@@ -0,0 +1,315 @@
+<template>
+	<!-- 支付宝小程序使用$u.getRect()获取组件的根元素尺寸，所以在外面套一个"壳" -->
+	<view>
+		<view class="u-index-bar">
+			<slot />
+			<view v-if="showSidebar" class="u-index-bar__sidebar" @touchstart.stop.prevent="onTouchMove" @touchmove.stop.prevent="onTouchMove"
+			 @touchend.stop.prevent="onTouchStop" @touchcancel.stop.prevent="onTouchStop">
+				<view v-for="(item, index) in indexList" :key="index" class="u-index-bar__index" :style="{zIndex: zIndex + 1, color: activeAnchorIndex === index ? activeColor : ''}"
+				 :data-index="index">
+					{{ item }}
+				</view>
+			</view>
+			<view class="u-indexed-list-alert" v-if="touchmove && indexList[touchmoveIndex]" :style="{
+				zIndex: alertZIndex
+			}">
+				<text>{{indexList[touchmoveIndex]}}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	var indexList = function() {
+		var indexList = [];
+		var charCodeOfA = 'A'.charCodeAt(0);
+		for (var i = 0; i < 26; i++) {
+			indexList.push(String.fromCharCode(charCodeOfA + i));
+		}
+		return indexList;
+	};
+
+	/**
+	 * indexList 索引列表
+	 * @description 通过折叠面板收纳内容区域,搭配<u-index-anchor>使用
+	 * @tutorial https://www.uviewui.com/components/indexList.html#indexanchor-props
+	 * @property {Number String} scroll-top 当前滚动高度，自定义组件无法获得滚动条事件，所以依赖接入方传入
+	 * @property {Array} index-list 索引字符列表，数组（默认A-Z）
+	 * @property {Number String} z-index 锚点吸顶时的层级（默认965）
+	 * @property {Boolean} sticky 是否开启锚点自动吸顶（默认true）
+	 * @property {Number String} offset-top 锚点自动吸顶时与顶部的距离（默认0）
+	 * @property {String} highlight-color 锚点和右边索引字符高亮颜色（默认#2979ff）
+	 * @event {Function} select 选中右边索引字符时触发
+	 * @example <u-index-list :scrollTop="scrollTop"></u-index-list>
+	 */
+	export default {
+		name: "u-index-list",
+		props: {
+			sticky: {
+				type: Boolean,
+				default: true
+			},
+			zIndex: {
+				type: [Number, String],
+				default: ''
+			},
+			scrollTop: {
+				type: [Number, String],
+				default: 0,
+			},
+			offsetTop: {
+				type: [Number, String],
+				default: 0
+			},
+			indexList: {
+				type: Array,
+				default () {
+					return indexList()
+				}
+			},
+			activeColor: {
+				type: String,
+				default: '#2979ff'
+			}
+		},
+		created() {
+			// #ifdef H5
+			this.stickyOffsetTop = this.offsetTop ? uni.upx2px(this.offsetTop) : 44;
+			// #endif
+			// #ifndef H5
+			this.stickyOffsetTop = this.offsetTop ? uni.upx2px(this.offsetTop) : 0;
+			// #endif
+			// 只能在created生命周期定义children，如果在data定义，会因为循环引用而报错
+			this.children = [];
+		},
+		data() {
+			return {
+				activeAnchorIndex: 0,
+				showSidebar: true,
+				// children: [],
+				touchmove: false,
+				touchmoveIndex: 0,
+			}
+		},
+		watch: {
+			scrollTop() {
+				this.updateData()
+			}
+		},
+		computed: {
+			// 弹出toast的z-index值
+			alertZIndex() {
+				return this.$u.zIndex.toast;
+			}
+		},
+		methods: {
+			updateData() {
+				this.timer && clearTimeout(this.timer);
+				this.timer = setTimeout(() => {
+					this.showSidebar = !!this.children.length;
+					this.setRect().then(() => {
+						this.onScroll();
+					});
+				}, 0);
+			},
+			setRect() {
+				return Promise.all([
+					this.setAnchorsRect(),
+					this.setListRect(),
+					this.setSiderbarRect()
+				]);
+			},
+			setAnchorsRect() {
+				return Promise.all(this.children.map((anchor, index) => anchor
+					.$uGetRect('.u-index-anchor-wrapper')
+					.then((rect) => {
+						Object.assign(anchor, {
+							height: rect.height,
+							top: rect.top
+						});
+					})));
+			},
+			setListRect() {
+				return this.$uGetRect('.u-index-bar').then((rect) => {
+					Object.assign(this, {
+						height: rect.height,
+						top: rect.top + this.scrollTop
+					});
+				});
+			},
+			setSiderbarRect() {
+				return this.$uGetRect('.u-index-bar__sidebar').then(rect => {
+					this.sidebar = {
+						height: rect.height,
+						top: rect.top
+					};
+				});
+			},
+			getActiveAnchorIndex() {
+				const {
+					children
+				} = this;
+				const {
+					sticky
+				} = this;
+				for (let i = this.children.length - 1; i >= 0; i--) {
+					const preAnchorHeight = i > 0 ? children[i - 1].height : 0;
+					const reachTop = sticky ? preAnchorHeight : 0;
+					if (reachTop >= children[i].top) {
+						return i;
+					}
+				}
+				return -1;
+			},
+			onScroll() {
+				const {
+					children = []
+				} = this;
+				if (!children.length) {
+					return;
+				}
+				const {
+					sticky,
+					stickyOffsetTop,
+					zIndex,
+					scrollTop,
+					activeColor
+				} = this;
+				const active = this.getActiveAnchorIndex();
+				this.activeAnchorIndex = active;
+				if (sticky) {
+					let isActiveAnchorSticky = false;
+					if (active !== -1) {
+						isActiveAnchorSticky =
+							children[active].top <= 0;
+					}
+					children.forEach((item, index) => {
+						if (index === active) {
+							let wrapperStyle = '';
+							let anchorStyle = {
+								color: `${activeColor}`
+							};
+							if (isActiveAnchorSticky) {
+								wrapperStyle = {
+									height: `${children[index].height}px`
+								};
+								anchorStyle = {
+									position: 'fixed',
+									top: `${stickyOffsetTop}px`,
+									zIndex: `${zIndex ? zIndex : this.$u.zIndex.indexListSticky}`,
+									color: `${activeColor}`
+								};
+							}
+							item.active = active;
+							item.wrapperStyle = wrapperStyle;
+							item.anchorStyle = anchorStyle;
+						} else if (index === active - 1) {
+							const currentAnchor = children[index];
+							const currentOffsetTop = currentAnchor.top;
+							const targetOffsetTop = index === children.length - 1 ?
+								this.top :
+								children[index + 1].top;
+							const parentOffsetHeight = targetOffsetTop - currentOffsetTop;
+							const translateY = parentOffsetHeight - currentAnchor.height;
+							const anchorStyle = {
+								position: 'relative',
+								transform: `translate3d(0, ${translateY}px, 0)`,
+								zIndex: `${zIndex ? zIndex : this.$u.zIndex.indexListSticky}`,
+								color: `${activeColor}`
+							};
+							item.active = active;
+							item.anchorStyle = anchorStyle;
+						} else {
+							item.active = false;
+							item.anchorStyle = '';
+							item.wrapperStyle = '';
+						}
+					});
+				}
+			},
+			onTouchMove(event) {
+				this.touchmove = true;
+				const sidebarLength = this.children.length;
+				const touch = event.touches[0];
+				const itemHeight = this.sidebar.height / sidebarLength;
+				let clientY = 0;
+				clientY = touch.clientY;
+				let index = Math.floor((clientY - this.sidebar.top) / itemHeight);
+				if (index < 0) {
+					index = 0;
+				} else if (index > sidebarLength - 1) {
+					index = sidebarLength - 1;
+				}
+				this.touchmoveIndex = index;
+				this.scrollToAnchor(index);
+			},
+			onTouchStop() {
+				this.touchmove = false;
+				this.scrollToAnchorIndex = null;
+			},
+			scrollToAnchor(index) {
+				if (this.scrollToAnchorIndex === index) {
+					return;
+				}
+				this.scrollToAnchorIndex = index;
+				const anchor = this.children.find((item) => item.index === this.indexList[index]);
+				if (anchor) {
+					this.$emit('select', anchor.index);
+					uni.pageScrollTo({
+						duration: 0,
+						scrollTop: anchor.top + this.scrollTop
+					});
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-index-bar {
+		position: relative
+	}
+
+	.u-index-bar__sidebar {
+		position: fixed;
+		top: 50%;
+		right: 0;
+		@include vue-flex;
+		flex-direction: column;
+		text-align: center;
+		transform: translateY(-50%);
+		user-select: none;
+		z-index: 99;
+	}
+
+	.u-index-bar__index {
+		font-weight: 500;
+		padding: 8rpx 18rpx;
+		font-size: 22rpx;
+		line-height: 1
+	}
+
+	.u-indexed-list-alert {
+		position: fixed;
+		width: 120rpx;
+		height: 120rpx;
+		right: 90rpx;
+		top: 50%;
+		margin-top: -60rpx;
+		border-radius: 24rpx;
+		font-size: 50rpx;
+		color: #fff;
+		background-color: rgba(0, 0, 0, 0.65);
+		@include vue-flex;
+		justify-content: center;
+		align-items: center;
+		padding: 0;
+		z-index: 9999999;
+	}
+
+	.u-indexed-list-alert text {
+		line-height: 50rpx;
+	}
+</style>

uview-ui/components/u-input/u-input.vue

@@ -0,0 +1,387 @@
+<template>
+	<view
+		class="u-input"
+		:class="{
+			'u-input--border': border,
+			'u-input--error': validateState
+		}"
+		:style="{
+			padding: `0 ${border ? 20 : 0}rpx`,
+			borderColor: borderColor,
+			textAlign: inputAlign
+		}"
+		@tap.stop="inputClick"
+	>
+		<textarea
+			v-if="type == 'textarea'"
+			class="u-input__input u-input__textarea"
+			:style="[getStyle]"
+			:value="defaultValue"
+			:placeholder="placeholder"
+			:placeholderStyle="placeholderStyle"
+			:disabled="disabled"
+			:maxlength="inputMaxlength"
+			:fixed="fixed"
+			:focus="focus"
+			:autoHeight="autoHeight"
+			:selection-end="uSelectionEnd"
+			:selection-start="uSelectionStart"
+			:cursor-spacing="getCursorSpacing"
+			:show-confirm-bar="showConfirmbar"
+			@input="handleInput"
+			@blur="handleBlur"
+			@focus="onFocus"
+			@confirm="onConfirm"
+		/>
+		<input
+			v-else
+			class="u-input__input"
+			:type="type == 'password' ? 'text' : type"
+			:style="[getStyle]"
+			:value="defaultValue"
+			:password="type == 'password' && !showPassword"
+			:placeholder="placeholder"
+			:placeholderStyle="placeholderStyle"
+			:disabled="disabled || type === 'select'"
+			:maxlength="inputMaxlength"
+			:focus="focus"
+			:confirmType="confirmType"
+			:cursor-spacing="getCursorSpacing"
+			:selection-end="uSelectionEnd"
+			:selection-start="uSelectionStart"
+			:show-confirm-bar="showConfirmbar"
+			@focus="onFocus"
+			@blur="handleBlur"
+			@input="handleInput"
+			@confirm="onConfirm"
+		/>
+		<view class="u-input__right-icon u-flex">
+			<view class="u-input__right-icon__clear u-input__right-icon__item" @tap="onClear" v-if="clearable && value != '' && focused">
+				<u-icon size="32" name="close-circle-fill" color="#c0c4cc"/>
+			</view>
+			<view class="u-input__right-icon__clear u-input__right-icon__item" v-if="passwordIcon && type == 'password'">
+				<u-icon size="32" :name="!showPassword ? 'eye' : 'eye-fill'" color="#c0c4cc" @click="showPassword = !showPassword"/>
+			</view>
+			<view class="u-input__right-icon--select u-input__right-icon__item" v-if="type == 'select'" :class="{
+				'u-input__right-icon--select--reverse': selectOpen
+			}">
+				<u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import Emitter from '../../libs/util/emitter.js';
+
+/**
+ * input 输入框
+ * @description 此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件u-form而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。
+ * @tutorial http://uviewui.com/components/input.html
+ * @property {String} type 模式选择，见官网说明
+ * @property {Boolean} clearable 是否显示右侧的清除图标(默认true)
+ * @property {} v-model 用于双向绑定输入框的值
+ * @property {String} input-align 输入框文字的对齐方式(默认left)
+ * @property {String} placeholder placeholder显示值(默认 '请输入内容')
+ * @property {Boolean} disabled 是否禁用输入框(默认false)
+ * @property {String Number} maxlength 输入框的最大可输入长度(默认140)
+ * @property {String Number} selection-start 光标起始位置，自动聚焦时有效，需与selection-end搭配使用（默认-1）
+ * @property {String Number} maxlength 光标结束位置，自动聚焦时有效，需与selection-start搭配使用（默认-1）
+ * @property {String Number} cursor-spacing 指定光标与键盘的距离，单位px(默认0)
+ * @property {String} placeholderStyle placeholder的样式，字符串形式，如"color: red;"(默认 "color: #c0c4cc;")
+ * @property {String} confirm-type 设置键盘右下角按钮的文字，仅在type为text时生效(默认done)
+ * @property {Object} custom-style 自定义输入框的样式，对象形式
+ * @property {Boolean} focus 是否自动获得焦点(默认false)
+ * @property {Boolean} fixed 如果type为textarea，且在一个"position:fixed"的区域，需要指明为true(默认false)
+ * @property {Boolean} password-icon type为password时，是否显示右侧的密码查看图标(默认true)
+ * @property {Boolean} border 是否显示边框(默认false)
+ * @property {String} border-color 输入框的边框颜色(默认#dcdfe6)
+ * @property {Boolean} auto-height 是否自动增高输入区域，type为textarea时有效(默认true)
+ * @property {String Number} height 高度，单位rpx(text类型时为70，textarea时为100)
+ * @example <u-input v-model="value" :type="type" :border="border" />
+ */
+export default {
+	name: 'u-input',
+	mixins: [Emitter],
+	props: {
+		value: {
+			type: [String, Number],
+			default: ''
+		},
+		// 输入框的类型，textarea，text，number
+		type: {
+			type: String,
+			default: 'text'
+		},
+		inputAlign: {
+			type: String,
+			default: 'left'
+		},
+		placeholder: {
+			type: String,
+			default: '请输入内容'
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		maxlength: {
+			type: [Number, String],
+			default: 140
+		},
+		placeholderStyle: {
+			type: String,
+			default: 'color: #c0c4cc;'
+		},
+		confirmType: {
+			type: String,
+			default: 'done'
+		},
+		// 输入框的自定义样式
+		customStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true
+		fixed: {
+			type: Boolean,
+			default: false
+		},
+		// 是否自动获得焦点
+		focus: {
+			type: Boolean,
+			default: false
+		},
+		// 密码类型时，是否显示右侧的密码图标
+		passwordIcon: {
+			type: Boolean,
+			default: true
+		},
+		// input|textarea是否显示边框
+		border: {
+			type: Boolean,
+			default: false
+		},
+		// 输入框的边框颜色
+		borderColor: {
+			type: String,
+			default: '#dcdfe6'
+		},
+		autoHeight: {
+			type: Boolean,
+			default: true
+		},
+		// type=select时，旋转右侧的图标，标识当前处于打开还是关闭select的状态
+		// open-打开，close-关闭
+		selectOpen: {
+			type: Boolean,
+			default: false
+		},
+		// 高度，单位rpx
+		height: {
+			type: [Number, String],
+			default: ''
+		},
+		// 是否可清空
+		clearable: {
+			type: Boolean,
+			default: true
+		},
+		// 指定光标与键盘的距离，单位 px
+		cursorSpacing: {
+			type: [Number, String],
+			default: 0
+		},
+		// 光标起始位置，自动聚焦时有效，需与selection-end搭配使用
+		selectionStart: {
+			type: [Number, String],
+			default: -1
+		},
+		// 光标结束位置，自动聚焦时有效，需与selection-start搭配使用
+		selectionEnd: {
+			type: [Number, String],
+			default: -1
+		},
+		// 是否自动去除两端的空格
+		trim: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示键盘上方带有”完成“按钮那一栏
+		showConfirmbar:{
+			type:Boolean,
+			default:true
+		}
+	},
+	data() {
+		return {
+			defaultValue: this.value,
+			inputHeight: 70, // input的高度
+			textareaHeight: 100, // textarea的高度
+			validateState: false, // 当前input的验证状态，用于错误时，边框是否改为红色
+			focused: false, // 当前是否处于获得焦点的状态
+			showPassword: false, // 是否预览密码
+			lastValue: '', // 用于头条小程序，判断@input中，前后的值是否发生了变化，因为头条中文下，按下键没有输入内容，也会触发@input时间
+		};
+	},
+	watch: {
+		value(nVal, oVal) {
+			this.defaultValue = nVal;
+			// 当值发生变化，且为select类型时(此时input被设置为disabled，不会触发@input事件)，模拟触发@input事件
+			if(nVal != oVal && this.type == 'select') this.handleInput({
+				detail: {
+					value: nVal
+				}
+			})
+		},
+	},
+	computed: {
+		// 因为uniapp的input组件的maxlength组件必须要数值，这里转为数值，给用户可以传入字符串数值
+		inputMaxlength() {
+			return Number(this.maxlength);
+		},
+		getStyle() {
+			let style = {};
+			// 如果没有自定义高度，就根据type为input还是textare来分配一个默认的高度
+			style.minHeight = this.height ? this.height + 'rpx' : this.type == 'textarea' ?
+				this.textareaHeight + 'rpx' : this.inputHeight + 'rpx';
+			style = Object.assign(style, this.customStyle);
+			return style;
+		},
+		//
+		getCursorSpacing() {
+			return Number(this.cursorSpacing);
+		},
+		// 光标起始位置
+		uSelectionStart() {
+			return String(this.selectionStart);
+		},
+		// 光标结束位置
+		uSelectionEnd() {
+			return String(this.selectionEnd);
+		}
+	},
+	created() {
+		// 监听u-form-item发出的错误事件，将输入框边框变红色
+		this.$on('on-form-item-error', this.onFormItemError);
+	},
+	methods: {
+		/**
+		 * change 事件
+		 * @param event
+		 */
+		handleInput(event) {
+			let value = event.detail.value;
+			// 判断是否去除空格
+			if(this.trim) value = this.$u.trim(value);
+			// vue 原生的方法 return 出去
+			this.$emit('input', value);
+			// 当前model 赋值
+			this.defaultValue = value;
+			// 过一个生命周期再发送事件给u-form-item，否则this.$emit('input')更新了父组件的值，但是微信小程序上
+			// 尚未更新到u-form-item，导致获取的值为空，从而校验混论
+			// 这里不能延时时间太短，或者使用this.$nextTick，否则在头条上，会造成混乱
+			setTimeout(() => {
+				// 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
+				// #ifdef MP-TOUTIAO
+				if(this.$u.trim(value) == this.lastValue) return ;
+				this.lastValue = value;
+				// #endif
+				// 将当前的值发送到 u-form-item 进行校验
+				this.dispatch('u-form-item', 'on-form-change', value);
+			}, 40)
+		},
+		/**
+		 * blur 事件
+		 * @param event
+		 */
+		handleBlur(event) {
+			// 最开始使用的是监听图标@touchstart事件，自从hx2.8.4后，此方法在微信小程序出错
+			// 这里改为监听点击事件，手点击清除图标时，同时也发生了@blur事件，导致图标消失而无法点击，这里做一个延时
+			setTimeout(() => {
+				this.focused = false;
+			}, 100)
+			// vue 原生的方法 return 出去
+			this.$emit('blur', event.detail.value);
+			setTimeout(() => {
+				// 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
+				// #ifdef MP-TOUTIAO
+				if(this.$u.trim(value) == this.lastValue) return ;
+				this.lastValue = value;
+				// #endif
+				// 将当前的值发送到 u-form-item 进行校验
+				this.dispatch('u-form-item', 'on-form-blur', event.detail.value);
+			}, 40)
+		},
+		onFormItemError(status) {
+			this.validateState = status;
+		},
+		onFocus(event) {
+			this.focused = true;
+			this.$emit('focus');
+		},
+		onConfirm(e) {
+			this.$emit('confirm', e.detail.value);
+		},
+		onClear(event) {
+			this.$emit('input', '');
+		},
+		inputClick() {
+			this.$emit('click');
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+
+.u-input {
+	position: relative;
+	flex: 1;
+	@include vue-flex;
+
+	&__input {
+		//height: $u-form-item-height;
+		font-size: 28rpx;
+		color: $u-main-color;
+		flex: 1;
+	}
+
+	&__textarea {
+		width: auto;
+		font-size: 28rpx;
+		color: $u-main-color;
+		padding: 10rpx 0;
+		line-height: normal;
+		flex: 1;
+	}
+
+	&--border {
+		border-radius: 6rpx;
+		border-radius: 4px;
+		border: 1px solid $u-form-item-border-color;
+	}
+
+	&--error {
+		border-color: $u-type-error!important;
+	}
+
+	&__right-icon {
+
+		&__item {
+			margin-left: 10rpx;
+		}
+
+		&--select {
+			transition: transform .4s;
+
+			&--reverse {
+				transform: rotate(-180deg);
+			}
+		}
+	}
+}
+</style>

uview-ui/components/u-keyboard/u-keyboard.vue

@@ -0,0 +1,217 @@
+<template>
+	<u-popup class="" :mask="mask" :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto"
+	 :safeAreaInsetBottom="safeAreaInsetBottom" @close="popupClose" :zIndex="uZIndex">
+		<slot />
+		<view class="u-tooltip" v-if="tooltip">
+			<view class="u-tooltip-item u-tooltip-cancel" hover-class="u-tooltip-cancel-hover" @tap="onCancel">
+				{{cancelBtn ? cancelText : ''}}
+			</view>
+			<view v-if="showTips" class="u-tooltip-item u-tooltip-tips">
+				{{tips ? tips : mode == 'number' ? '数字键盘' : mode == 'card' ? '身份证键盘' : '车牌号键盘'}}
+			</view>
+			<view v-if="confirmBtn" @tap="onConfirm" class="u-tooltip-item u-tooltips-submit" hover-class="u-tooltips-submit-hover">
+				{{confirmBtn ? confirmText : ''}}
+			</view>
+		</view>
+		<block v-if="mode == 'number' || mode == 'card'">
+			<u-number-keyboard :random="random" @backspace="backspace" @change="change" :mode="mode" :dotEnabled="dotEnabled"></u-number-keyboard>
+		</block>
+		<block v-else>
+			<u-car-keyboard :random="random" @backspace="backspace" @change="change"></u-car-keyboard>
+		</block>
+	</u-popup>
+</template>
+
+<script>
+	/**
+	 * keyboard 键盘
+	 * @description 此为uViw自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3中模式，都有可以打乱按键顺序的选项。
+	 * @tutorial https://www.uviewui.com/components/keyboard.html
+	 * @property {String} mode 键盘类型，见官网基本使用的说明（默认number）
+	 * @property {Boolean} dot-enabled 是否显示"."按键，只在mode=number时有效（默认true）
+	 * @property {Boolean} tooltip 是否显示键盘顶部工具条（默认true）
+	 * @property {String} tips 工具条中间的提示文字，见上方基本使用的说明，如不需要，请传""空字符
+	 * @property {Boolean} cancel-btn 是否显示工具条左边的"取消"按钮（默认true）
+	 * @property {Boolean} confirm-btn 是否显示工具条右边的"完成"按钮（默认true）
+	 * @property {Boolean} mask 是否显示遮罩（默认true）
+	 * @property {String} confirm-text 确认按钮的文字
+	 * @property {String} cancel-text 取消按钮的文字
+	 * @property {Number String} z-index 弹出键盘的z-index值（默认1075）
+	 * @property {Boolean} random 是否打乱键盘按键的顺序（默认false）
+	 * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
+	 * @property {Boolean} mask-close-able 是否允许点击遮罩收起键盘（默认true）
+	 * @event {Function} change 按键被点击(不包含退格键被点击)
+	 * @event {Function} cancel 键盘顶部工具条左边的"取消"按钮被点击
+	 * @event {Function} confirm 键盘顶部工具条右边的"完成"按钮被点击
+	 * @event {Function} backspace 键盘退格键被点击
+	 * @example <u-keyboard mode="number" v-model="show"></u-keyboard> 
+	 */
+	export default {
+		name: "u-keyboard",
+		props: {
+			// 键盘的类型，number-数字键盘，card-身份证键盘，car-车牌号键盘
+			mode: {
+				type: String,
+				default: 'number'
+			},
+			// 是否显示键盘的"."符号
+			dotEnabled: {
+				type: Boolean,
+				default: true
+			},
+			// 是否显示顶部工具条
+			tooltip: {
+				type: Boolean,
+				default: true
+			},
+			// 是否显示工具条中间的提示
+			showTips: {
+				type: Boolean,
+				default: true
+			},
+			// 工具条中间的提示文字
+			tips: {
+				type: String,
+				default: ''
+			},
+			// 是否显示工具条左边的"取消"按钮
+			cancelBtn: {
+				type: Boolean,
+				default: true
+			},
+			// 是否显示工具条右边的"完成"按钮
+			confirmBtn: {
+				type: Boolean,
+				default: true
+			},
+			// 是否打乱键盘按键的顺序
+			random: {
+				type: Boolean,
+				default: false
+			},
+			// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
+			safeAreaInsetBottom: {
+				type: Boolean,
+				default: false
+			},
+			// 是否允许通过点击遮罩关闭键盘
+			maskCloseAble: {
+				type: Boolean,
+				default: true
+			},
+			// 通过双向绑定控制键盘的弹出与收起
+			value: {
+				type: Boolean,
+				default: false
+			},
+			// 是否显示遮罩，某些时候数字键盘时，用户希望看到自己的数值，所以可能不想要遮罩
+			mask: {
+				type: Boolean,
+				default: true
+			},
+			// z-index值
+			zIndex: {
+				type: [Number, String],
+				default: ''
+			},
+			// 取消按钮的文字
+			cancelText: {
+				type: String,
+				default: '取消'
+			},
+			// 确认按钮的文字
+			confirmText: {
+				type: String,
+				default: '确认'
+			}
+		},
+		data() {
+			return {
+				//show: false
+			}
+		},
+		computed: {
+			uZIndex() {
+				return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
+			}
+		},
+		methods: {
+			change(e) {
+				this.$emit('change', e);
+			},
+			// 键盘关闭
+			popupClose() {
+				// 通过发送input这个特殊的事件名，可以修改父组件传给props的value的变量，也即双向绑定
+				this.$emit('input', false);
+			},
+			// 输入完成
+			onConfirm() {
+				this.popupClose();
+				this.$emit('confirm');
+			},
+			// 取消输入
+			onCancel() {
+				this.popupClose();
+				this.$emit('cancel');
+			},
+			// 退格键
+			backspace() {
+				this.$emit('backspace');
+			},
+			// 关闭键盘
+			// close() {
+			// 	this.show = false;
+			// },
+			// // 打开键盘
+			// open() {
+			// 	this.show = true;
+			// }
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-keyboard {
+		position: relative;
+		z-index: 1003;
+	}
+
+	.u-tooltip {
+		@include vue-flex;
+		justify-content: space-between;
+	}
+
+	.u-tooltip-item {
+		color: #333333;
+		flex: 0 0 33.333333%;
+		text-align: center;
+		padding: 20rpx 10rpx;
+		font-size: 28rpx;
+	}
+
+	.u-tooltips-submit {
+		text-align: right;
+		flex-grow: 1;
+		flex-wrap: 0;
+		padding-right: 40rpx;
+		color: $u-type-primary;
+	}
+
+	.u-tooltip-cancel {
+		text-align: left;
+		flex-grow: 1;
+		flex-wrap: 0;
+		padding-left: 40rpx;
+		color: #888888;
+	}
+
+	.u-tooltips-submit-hover {
+		color: $u-type-success;
+	}
+
+	.u-tooltip-cancel-hover {
+		color: #333333;
+	}
+</style>

uview-ui/components/u-line-progress/u-line-progress.vue

@@ -0,0 +1,147 @@
+<template>
+	<view class="u-progress" :style="{
+		borderRadius: round ? '100rpx' : 0,
+		height: height + 'rpx',
+		backgroundColor: inactiveColor
+	}">
+		<view :class="[
+			type ? `u-type-${type}-bg` : '',
+			striped ? 'u-striped' : '',
+			striped && stripedActive ? 'u-striped-active' : ''
+		]" class="u-active" :style="[progressStyle]">
+			<slot v-if="$slots.default || $slots.$default" />
+			<block v-else-if="showPercent">
+				{{percent + '%'}}
+			</block>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * lineProgress 线型进度条
+	 * @description 展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。
+	 * @tutorial https://www.uviewui.com/components/lineProgress.html
+	 * @property {String Number} percent 进度条百分比值，为数值类型，0-100
+	 * @property {Boolean} round 进度条两端是否为半圆（默认true）
+	 * @property {String} type 如设置，active-color值将会失效
+	 * @property {String} active-color 进度条激活部分的颜色（默认#19be6b）
+	 * @property {String} inactive-color 进度条的底色（默认#ececec）
+	 * @property {Boolean} show-percent 是否在进度条内部显示当前的百分比值数值（默认true）
+	 * @property {String Number} height 进度条的高度，单位rpx（默认28）
+	 * @property {Boolean} striped 是否显示进度条激活部分的条纹（默认false）
+	 * @property {Boolean} striped-active 条纹是否具有动态效果（默认false）
+	 * @example <u-line-progress :percent="70" :show-percent="true"></u-line-progress>
+	 */
+	export default {
+		name: "u-line-progress",
+		props: {
+			// 两端是否显示半圆形
+			round: {
+				type: Boolean,
+				default: true
+			},
+			// 主题颜色
+			type: {
+				type: String,
+				default: ''
+			},
+			// 激活部分的颜色
+			activeColor: {
+				type: String,
+				default: '#19be6b'
+			},
+			inactiveColor: {
+				type: String,
+				default: '#ececec'
+			},
+			// 进度百分比，数值
+			percent: {
+				type: Number,
+				default: 0
+			},
+			// 是否在进度条内部显示百分比的值
+			showPercent: {
+				type: Boolean,
+				default: true
+			},
+			// 进度条的高度，单位rpx
+			height: {
+				type: [Number, String],
+				default: 28
+			},
+			// 是否显示条纹
+			striped: {
+				type: Boolean,
+				default: false
+			},
+			// 条纹是否显示活动状态
+			stripedActive: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+
+			}
+		},
+		computed: {
+			progressStyle() {
+				let style = {};
+				style.width = this.percent + '%';
+				if(this.activeColor) style.backgroundColor = this.activeColor;
+				return style;
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-progress {
+		overflow: hidden;
+		height: 15px;
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		align-items: center;
+		width: 100%;
+		border-radius: 100rpx;
+	}
+
+	.u-active {
+		width: 0;
+		height: 100%;
+		align-items: center;
+		@include vue-flex;
+		justify-items: flex-end;
+		justify-content: space-around;
+		font-size: 20rpx;
+		color: #ffffff;
+		transition: all 0.4s ease;
+	}
+
+	.u-striped {
+		background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+		background-size: 39px 39px;
+	}
+
+	.u-striped-active {
+		animation: progress-stripes 2s linear infinite;
+	}
+
+	@keyframes progress-stripes {
+		0% {
+			background-position: 0 0;
+		}
+
+		100% {
+			background-position: 39px 0;
+		}
+	}
+</style>

uview-ui/components/u-line/u-line.vue

@@ -0,0 +1,84 @@
+<template>
+	<view class="u-line" :style="[lineStyle]">
+		
+	</view>
+</template>
+
+<script>
+	/**
+	 * line 线条
+	 * @description 此组件一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单
+	 * @tutorial https://www.uviewui.com/components/line.html
+	 * @property {String} color 线条的颜色(默认#e4e7ed)
+	 * @property {String} length 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带rpx单位的值等
+	 * @property {String} direction 线条的方向，row-横向，col-竖向(默认row)
+	 * @property {String} border-style 线条的类型，solid-实线，dashed-方形虚线，dotted-圆点虚线(默认solid)
+	 * @property {Boolean} hair-line 是否显示细线条(默认true)
+	 * @property {String} margin 线条与上下左右元素的间距，字符串形式，如"30rpx"
+	 * @example <u-line color="red"></u-line>
+	 */
+	export default {
+		name: 'u-line',
+		props: {
+			color: {
+				type: String,
+				default: '#e4e7ed'
+			},
+			// 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带rpx单位的值等
+			length: {
+				type: String,
+				default: '100%'
+			},
+			// 线条方向，col-竖向，row-横向
+			direction: {
+				type: String,
+				default: 'row'
+			},
+			// 是否显示细边框
+			hairLine: {
+				type: Boolean,
+				default: true
+			},
+			// 线条与上下左右元素的间距，字符串形式，如"30rpx"、"20rpx 30rpx"
+			margin: {
+				type: String,
+				default: '0'
+			},
+			// 线条的类型，solid-实线，dashed-方形虚线，dotted-圆点虚线
+			borderStyle: {
+				type: String,
+				default: 'solid'
+			}
+		},
+		computed: {
+			lineStyle() {
+				let style = {};
+				style.margin = this.margin;
+				// 如果是水平线条，边框高度为1px，再通过transform缩小一半，就是0.5px了
+				if(this.direction == 'row') {
+					// 此处采用兼容分开写，兼容nvue的写法
+					style.borderBottomWidth = '1px';
+					style.borderBottomStyle = this.borderStyle;
+					style.width = this.$u.addUnit(this.length);
+					if(this.hairLine) style.transform = 'scaleY(0.5)';
+				} else {
+					// 如果是竖向线条，边框宽度为1px，再通过transform缩小一半，就是0.5px了
+					style.borderLeftWidth = '1px';
+					style.borderLeftStyle = this.borderStyle;
+					style.height = this.$u.addUnit(this.length);
+					if(this.hairLine) style.transform = 'scaleX(0.5)';
+				}
+				style.borderColor = this.color;
+				return style;
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+	
+	.u-line {
+		vertical-align: middle;
+	}
+</style>

uview-ui/components/u-link/u-link.vue

@@ -0,0 +1,89 @@
+<template>
+	<text class="u-link" @tap.stop="openLink" :style="{
+		color: color,
+		fontSize: fontSize + 'rpx',
+		borderBottom: underLine ? `1px solid ${lineColor ? lineColor : color}` : 'none',
+		paddingBottom: underLine ? '0rpx' : '0'
+	}">
+		<slot></slot>
+	</text>
+</template>
+
+<script>
+	/**
+	 * link 超链接
+	 * @description 该组件为超链接组件，在不同平台有不同表现形式：在APP平台会通过plus环境打开内置浏览器，在小程序中把链接复制到粘贴板，同时提示信息，在H5中通过window.open打开链接。
+	 * @tutorial https://www.uviewui.com/components/link.html
+	 * @property {String} color 文字颜色（默认#606266）
+	 * @property {String Number} font-size 字体大小，单位rpx（默认28）
+	 * @property {Boolean} under-line 是否显示下划线（默认false）
+	 * @property {String} href 跳转的链接，要带上http(s)
+	 * @property {String} line-color 下划线颜色，默认同color参数颜色 
+	 * @property {String} mp-tips 各个小程序平台把链接复制到粘贴板后的提示语（默认“链接已复制，请在浏览器打开”）
+	 * @example <u-link href="http://www.uviewui.com">蜀道难，难于上青天</u-link>
+	 */
+	export default {
+		name: "u-link",
+		props: {
+			// 文字颜色
+			color: {
+				type: String,
+				default: '#2979ff'
+			},
+			// 字体大小，单位rpx
+			fontSize: {
+				type: [String, Number],
+				default: 28
+			},
+			// 是否显示下划线
+			underLine: {
+				type: Boolean,
+				default: false
+			},
+			// 要跳转的链接
+			href: {
+				type: String,
+				default: ''
+			},
+			// 小程序中复制到粘贴板的提示语
+			mpTips: {
+				type: String,
+				default: '链接已复制，请在浏览器打开'
+			},
+			// 下划线颜色
+			lineColor: {
+				type: String,
+				default: ''
+			}
+		},
+		methods: {
+			openLink() {
+				// #ifdef APP-PLUS
+				plus.runtime.openURL(this.href)
+				// #endif
+				// #ifdef H5
+				window.open(this.href)
+				// #endif
+				// #ifdef MP
+				uni.setClipboardData({
+					data: this.href,
+					success: () => {
+						uni.hideToast();
+						this.$nextTick(() => {
+							this.$u.toast(this.mpTips);
+						})
+					}
+				});
+				// #endif
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-link {
+		line-height: 1;
+	}
+</style>

uview-ui/components/u-loading-page/u-loading-page.vue

@@ -0,0 +1,25 @@
+<template>
+	<view class="u-loading-page">
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			
+		},
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	
+</style>

uview-ui/components/u-loading/u-loading.vue

@@ -0,0 +1,103 @@
+<template>
+	<view v-if="show" class="u-loading" :class="mode == 'circle' ? 'u-loading-circle' : 'u-loading-flower'" :style="[cricleStyle]">
+	</view>
+</template>
+
+<script>
+	/**
+	 * loading 加载动画
+	 * @description 警此组件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
+	 * @tutorial https://www.uviewui.com/components/loading.html
+	 * @property {String} mode 模式选择，见官网说明（默认circle）
+	 * @property {String} color 动画活动区域的颜色，只对 mode = flower 模式有效（默认#c7c7c7）
+	 * @property {String Number} size 加载图标的大小，单位rpx（默认34）
+	 * @property {Boolean} show 是否显示动画（默认true）
+	 * @example <u-loading mode="circle"></u-loading>
+	 */
+	export default {
+		name: "u-loading",
+		props: {
+			// 动画的类型
+			mode: {
+				type: String,
+				default: 'circle'
+			},
+			// 动画的颜色
+			color: {
+				type: String,
+				default: '#c7c7c7'
+			},
+			// 加载图标的大小，单位rpx
+			size: {
+				type: [String, Number],
+				default: '34'
+			},
+			// 是否显示动画
+			show: {
+				type: Boolean,
+				default: true
+			}
+		},
+		computed: {
+			// 加载中圆圈动画的样式
+			cricleStyle() {
+				let style = {};
+				style.width = this.size + 'rpx';
+				style.height = this.size + 'rpx';
+				if (this.mode == 'circle') style.borderColor = `#e4e4e4 #e4e4e4 #e4e4e4 ${this.color ? this.color : '#c7c7c7'}`;
+				return style;
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-loading-circle {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		vertical-align: middle;
+		width: 28rpx;
+		height: 28rpx;
+		background: 0 0;
+		border-radius: 50%;
+		border: 2px solid;
+		border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
+		animation: u-circle 1s linear infinite;
+	}
+
+	.u-loading-flower {
+		width: 20px;
+		height: 20px;
+		display: inline-block;
+		vertical-align: middle;
+		-webkit-animation: a 1s steps(12) infinite;
+		animation: u-flower 1s steps(12) infinite;
+		background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
+		background-size: 100%;
+	}
+
+	@keyframes u-flower {
+		0% {
+			-webkit-transform: rotate(0deg);
+			transform: rotate(0deg);
+		}
+
+		to {
+			-webkit-transform: rotate(1turn);
+			transform: rotate(1turn);
+		}
+	}
+
+	@-webkit-keyframes u-circle {
+		0% {
+			transform: rotate(0);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+</style>

uview-ui/components/u-loadmore/u-loadmore.vue

@@ -0,0 +1,203 @@
+<template>
+	<view class="u-load-more-wrap" :style="{
+		backgroundColor: bgColor,
+		marginBottom: marginBottom + 'rpx',
+		marginTop: marginTop + 'rpx',
+		height: $u.addUnit(height)
+	}">
+		<u-line color="#d4d4d4" length="50"></u-line>
+		<!-- 加载中和没有更多的状态才显示两边的横线 -->
+		<view :class="status == 'loadmore' || status == 'nomore' ? 'u-more' : ''" class="u-load-more-inner">
+			<view class="u-loadmore-icon-wrap">
+				<u-loading class="u-loadmore-icon" :color="iconColor" :mode="iconType == 'circle' ? 'circle' : 'flower'" :show="status == 'loading' && icon"></u-loading>
+			</view>
+			<!-- 如果没有更多的状态下，显示内容为dot（粗点），加载特定样式 -->
+			<view class="u-line-1" :style="[loadTextStyle]" :class="[(status == 'nomore' && isDot == true) ? 'u-dot-text' : 'u-more-text']" @tap="loadMore">
+				{{ showText }}
+			</view>
+		</view>
+		<u-line color="#d4d4d4" length="50"></u-line>
+	</view>
+</template>
+
+<script>
+	/**
+	 * loadmore 加载更多
+	 * @description 此组件一般用于标识页面底部加载数据时的状态。
+	 * @tutorial https://www.uviewui.com/components/loadMore.html
+	 * @property {String} status 组件状态（默认loadmore）
+	 * @property {String} bg-color 组件背景颜色，在页面是非白色时会用到（默认#ffffff）
+	 * @property {Boolean} icon 加载中时是否显示图标（默认true）
+	 * @property {String} icon-type 加载中时的图标类型（默认circle）
+	 * @property {String} icon-color icon-type为circle时有效，加载中的动画图标的颜色（默认#b7b7b7）
+	 * @property {Boolean} is-dot status为nomore时，内容显示为一个"●"（默认false）
+	 * @property {String} color 字体颜色（默认#606266）
+	 * @property {String Number} margin-top 到上一个相邻元素的距离
+	 * @property {String Number} margin-bottom 到下一个相邻元素的距离
+	 * @property {Object} load-text 自定义显示的文字，见上方说明示例
+	 * @event {Function} loadmore status为loadmore时，点击组件会发出此事件
+	 * @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
+	 */
+	export default {
+		name: "u-loadmore",
+		props: {
+			// 组件背景色
+			bgColor: {
+				type: String,
+				default: 'transparent'
+			},
+			// 是否显示加载中的图标
+			icon: {
+				type: Boolean,
+				default: true
+			},
+			// 字体大小
+			fontSize: {
+				type: String,
+				default: '28'
+			},
+			// 字体颜色
+			color: {
+				type: String, 
+				default: '#606266'
+			},
+			// 组件状态，loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
+			status: {
+				type: String,
+				default: 'loadmore'
+			},
+			// 加载中状态的图标，flower-花朵状图标，circle-圆圈状图标
+			iconType: {
+				type: String,
+				default: 'circle'
+			},
+			// 显示的文字
+			loadText: {
+				type: Object,
+				default () {
+					return {
+						loadmore: '加载更多',
+						loading: '正在加载...',
+						nomore: '没有更多了'
+					}
+				}
+			},
+			// 在“没有更多”状态下，是否显示粗点
+			isDot: {
+				type: Boolean,
+				default: false
+			},
+			// 加载中显示圆圈动画时，动画的颜色
+			iconColor: {
+				type: String,
+				default: '#b7b7b7'
+			},
+			// 上边距
+			marginTop: {
+				type: [String, Number],
+				default: 0
+			},
+			// 下边距
+			marginBottom: {
+				type: [String, Number],
+				default: 0
+			},
+			// 高度，单位rpx
+			height: {
+				type: [String, Number],
+				default: 'auto'
+			}
+		},
+		data() {
+			return {
+				// 粗点
+				dotText: "●"
+			}
+		},
+		computed: {
+			// 加载的文字显示的样式
+			loadTextStyle() {
+				return {
+					color: this.color,
+					fontSize: this.fontSize + 'rpx',
+					position: 'relative',
+					zIndex: 1,
+					backgroundColor: this.bgColor,
+					// 如果是加载中状态，动画和文字需要距离近一点
+				}
+			},
+			// 加载中圆圈动画的样式
+			cricleStyle() {
+				return {
+					borderColor: `#e5e5e5 #e5e5e5 #e5e5e5 ${this.circleColor}`
+				}
+			},
+			// 加载中花朵动画形式
+			// 动画由base64图片生成，暂不支持修改
+			flowerStyle() {
+				return {
+				}
+			},
+			// 显示的提示文字
+			showText() {
+				let text = '';
+				if(this.status == 'loadmore') text = this.loadText.loadmore;
+				else if(this.status == 'loading') text = this.loadText.loading;
+				else if(this.status == 'nomore' && this.isDot) text = this.dotText;
+				else text = this.loadText.nomore;
+				return text;
+			}
+		},
+		methods: {
+			loadMore() {
+				// 只有在“加载更多”的状态下才发送点击事件，内容不满一屏时无法触发底部上拉事件，所以需要点击来触发
+				if(this.status == 'loadmore') this.$emit('loadmore');
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+	
+	/* #ifdef MP */
+	// 在mp.scss中，赋予了u-line为flex: 1，这里需要一个明确的长度，所以重置掉它
+	// 在组件内部，把组件名(u-line)当做选择器，在微信开发工具会提示不合法，但不影响使用
+	u-line {
+		flex: none;
+	}
+	/* #endif */
+	
+	.u-load-more-wrap {
+		@include vue-flex;
+		justify-content: center;
+		align-items: center;
+	}
+	
+	.u-load-more-inner {
+		@include vue-flex;
+		justify-content: center;
+		align-items: center;
+		padding: 0 12rpx;
+	}
+	
+	.u-more {
+		position: relative;
+		@include vue-flex;
+		justify-content: center;
+	}
+	
+	.u-dot-text {
+		font-size: 28rpx;
+	}
+	
+	.u-loadmore-icon-wrap {
+		margin-right: 8rpx;
+	}
+	
+	.u-loadmore-icon {
+		@include vue-flex;
+		align-items: center;
+		justify-content: center;
+	}
+</style>

uview-ui/components/u-mask/u-mask.vue

@@ -0,0 +1,123 @@
+<template>
+	<view class="u-mask" hover-stop-propagation :style="[maskStyle, zoomStyle]" @tap="click" @touchmove.stop.prevent="() => {}" :class="{
+		'u-mask-zoom': zoom,
+		'u-mask-show': show
+	}">
+		<slot />
+	</view>
+</template>
+
+<script>
+	/**
+	 * mask 遮罩
+	 * @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
+	 * @tutorial https://www.uviewui.com/components/mask.html
+	 * @property {Boolean} show 是否显示遮罩（默认false）
+	 * @property {String Number} z-index z-index 层级（默认1070）
+	 * @property {Object} custom-style 自定义样式对象，见上方说明
+	 * @property {String Number} duration 动画时长，单位毫秒（默认300）
+	 * @property {Boolean} zoom 是否使用scale对遮罩进行缩放（默认true）
+	 * @property {Boolean} mask-click-able 遮罩是否可点击，为false时点击不会发送click事件（默认true）
+	 * @event {Function} click mask-click-able为true时，点击遮罩发送此事件
+	 * @example <u-mask :show="show" @click="show = false"></u-mask>
+	 */
+	export default {
+		name: "u-mask",
+		props: {
+			// 是否显示遮罩
+			show: {
+				type: Boolean,
+				default: false
+			},
+			// 层级z-index
+			zIndex: {
+				type: [Number, String],
+				default: ''
+			},
+			// 用户自定义样式
+			customStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 遮罩的动画样式， 是否使用使用zoom进行scale进行缩放
+			zoom: {
+				type: Boolean,
+				default: true
+			},
+			// 遮罩的过渡时间，单位为ms
+			duration: {
+				type: [Number, String],
+				default: 300
+			},
+			// 是否可以通过点击遮罩进行关闭
+			maskClickAble: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				zoomStyle: {
+					transform: ''
+				},
+				scale: 'scale(1.2, 1.2)'
+			}
+		},
+		watch: {
+			show(n) {
+				if(n && this.zoom) {
+					// 当展示遮罩的时候，设置scale为1，达到缩小(原来为1.2)的效果
+					this.zoomStyle.transform = 'scale(1, 1)';
+				} else if(!n && this.zoom) {
+					// 当隐藏遮罩的时候，设置scale为1.2，达到放大(因为显示遮罩时已重置为1)的效果
+					this.zoomStyle.transform = this.scale;
+				}
+			}
+		},
+		computed: {
+			maskStyle() {
+				let style = {};
+				style.backgroundColor = "rgba(0, 0, 0, 0.6)";
+				if(this.show) style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.mask;
+				else style.zIndex = -1;
+				style.transition = `all ${this.duration / 1000}s ease-in-out`;
+				// 判断用户传递的对象是否为空，不为空就进行合并
+				if (Object.keys(this.customStyle).length) style = { 
+					...style,
+					...this.customStyle
+				};
+				return style;
+			}
+		},
+		methods: {
+			click() {
+				if (!this.maskClickAble) return;
+				this.$emit('click');
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		opacity: 0;
+		transition: transform 0.3s;
+	}
+
+	.u-mask-show {
+		opacity: 1;
+	}
+	
+	.u-mask-zoom {
+		transform: scale(1.2, 1.2);
+	}
+</style>

uview-ui/components/u-message-input/u-message-input.vue

@@ -0,0 +1,311 @@
+<template>
+	<view class="u-char-box">
+		<view class="u-char-flex">
+			<input :disabled="disabledKeyboard" :value="valueModel" type="number" :focus="focus" :maxlength="maxlength" class="u-input" @input="getVal"/>
+			<view v-for="(item, index) in loopCharArr" :key="index">
+				<view :class="[breathe && charArrLength == index ? 'u-breathe' : '', 'u-char-item',
+				charArrLength === index && mode == 'box' ? 'u-box-active' : '',
+				mode === 'box' ? 'u-box' : '']" :style="{
+					fontWeight: bold ? 'bold' : 'normal',
+					fontSize: fontSize + 'rpx',
+					width: width + 'rpx',
+					height: width + 'rpx',
+					color: inactiveColor,
+					borderColor: charArrLength === index && mode == 'box' ? activeColor : inactiveColor
+				}">
+					<view class="u-placeholder-line" :style="{
+							display: charArrLength === index ? 'block' : 'none',
+							height: width * 0.5 +'rpx'
+						}"
+						v-if="mode !== 'middleLine'"
+					></view>
+					<view v-if="mode === 'middleLine' && charArrLength <= index" :class="[breathe && charArrLength == index ? 'u-breathe' : '', charArrLength === index ? 'u-middle-line-active' : '']"
+					 class="u-middle-line" :style="{height: bold ? '4px' : '2px', background: charArrLength === index ? activeColor : inactiveColor}"></view>
+					<view v-if="mode === 'bottomLine'" :class="[breathe && charArrLength == index ? 'u-breathe' : '', charArrLength === index ? 'u-buttom-line-active' : '']"
+					 class="u-bottom-line" :style="{height: bold ? '4px' : '2px', background: charArrLength === index ? activeColor : inactiveColor}"></view>
+					<block v-if="!dotFill"> {{ charArr[index] ? charArr[index] : ''}}</block>
+					<block v-else>
+						<text class="u-dot">{{ charArr[index] ? '●' : ''}}</text>
+					</block>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * messageInput 验证码输入框
+	 * @description 该组件一般用于验证用户短信验证码的场景，也可以结合uView的键盘组件使用
+	 * @tutorial https://www.uviewui.com/components/messageInput.html
+	 * @property {String Number} maxlength 输入字符个数（默认4）
+	 * @property {Boolean} dot-fill 是否用圆点填充（默认false）
+	 * @property {String} mode 模式选择，见上方"基本使用"说明（默认box）
+	 * @property {String Number} value 预置值
+	 * @property {Boolean} breathe 是否开启呼吸效果，见上方说明（默认true）
+	 * @property {Boolean} focus 是否自动获取焦点（默认false）
+	 * @property {Boolean} bold 字体和输入横线是否加粗（默认true）
+	 * @property {String Number} font-size 字体大小，单位rpx（默认60）
+	 * @property {String} active-color 当前激活输入框的样式（默认#2979ff）
+	 * @property {String} inactive-color 非激活输入框的样式，文字颜色同此值（默认#606266）
+	 * @property {String | Number} width 输入框宽度，单位rpx，高等于宽（默认80）
+	 * @property {Boolean} disabled-keyboard 禁止点击输入框唤起系统键盘（默认false）
+	 * @event {Function} change 输入内容发生改变时触发，具体见官网说明
+	 * @event {Function} finish 输入字符个数达maxlength值时触发，见官网说明
+	 * @example <u-message-input mode="bottomLine"></u-message-input>
+	 */
+	export default {
+		name: "u-message-input",
+		props: {
+			// 最大输入长度
+			maxlength: {
+				type: [Number, String],
+				default: 4
+			},
+			// 是否用圆点填充
+			dotFill: {
+				type: Boolean,
+				default: false
+			},
+			// 显示模式，box-盒子模式，bottomLine-横线在底部模式，middleLine-横线在中部模式
+			mode: {
+				type: String,
+				default: "box"
+			},
+			// 预置值
+			value: {
+				type: [String, Number],
+				default: ''
+			},
+			// 当前激活输入item，是否带有呼吸效果
+			breathe: {
+				type: Boolean,
+				default: true
+			},
+			// 是否自动获取焦点
+			focus: {
+				type: Boolean,
+				default: false
+			},
+			// 字体是否加粗
+			bold: {
+				type: Boolean,
+				default: false
+			},
+			// 字体大小
+			fontSize: {
+				type: [String, Number],
+				default: 60
+			},
+			// 激活样式
+			activeColor: {
+				type: String,
+				default: '#2979ff'
+			},
+			// 未激活的样式
+			inactiveColor: {
+				type: String,
+				default: '#606266'
+			},
+			// 输入框的大小，单位rpx，宽等于高
+			width: {
+				type: [Number, String],
+				default: '80'
+			},
+			// 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true
+			disabledKeyboard: {
+				type: Boolean,
+				default: false
+			}
+		},
+		watch: {
+			// maxlength: {
+			// 	// 此值设置为true，会在组件加载后无需maxlength变化就会执行一次本监听函数，无需再created生命周期中处理
+			// 	immediate: true,
+			// 	handler(val) {
+			// 		this.maxlength = Number(val);
+			// 	}
+			// }, 
+			value: {
+				immediate: true,
+				handler(val) {
+					// 转为字符串
+					val = String(val);
+					// 超出部分截掉
+					this.valueModel = val.substring(0, this.maxlength);
+				}
+			},
+		},
+		data() {
+			return {
+				valueModel: ""
+			}
+		},
+		computed: {
+			// 是否显示呼吸灯效果
+			animationClass() {
+				return (index) => {
+					if (this.breathe && this.charArr.length == index) return 'u-breathe';
+					else return '';
+				}
+			},
+			// 用于显示字符
+			charArr() {
+				return this.valueModel.split('');
+			},
+			charArrLength() {
+				return this.charArr.length;
+			},
+			// 根据长度，循环输入框的个数，因为头条小程序数值不能用于v-for
+			loopCharArr() {
+				return new Array(this.maxlength);
+			}
+		},
+		methods: {
+			getVal(e) {
+				let {
+					value
+				} = e.detail
+				this.valueModel = value;
+				// 判断长度是否超出了maxlength值，理论上不会发生，因为input组件设置了maxlength属性值
+				if (String(value).length > this.maxlength) return;
+				// 未达到maxlength之前，发送change事件，达到后发送finish事件
+				this.$emit('change', value);
+				if (String(value).length == this.maxlength) {
+					this.$emit('finish', value);
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+
+	@keyframes breathe {
+		0% {
+			opacity: 0.3;
+		}
+
+		50% {
+			opacity: 1;
+		}
+
+		100% {
+			opacity: 0.3;
+		}
+	}
+
+	.u-char-box {
+		text-align: center;
+	}
+
+	.u-char-flex {
+		@include vue-flex;
+		justify-content: center;
+		flex-wrap: wrap;
+		position: relative;
+	}
+
+	.u-input {
+		position: absolute;
+		top: 0;
+		left: -100%;
+		width: 200%;
+		height: 100%;
+		text-align: left;
+		z-index: 9;
+		opacity: 0;
+		background: none;
+	}
+
+	.u-char-item {
+		position: relative;
+		width: 90rpx;
+		height: 90rpx;
+		margin: 10rpx 10rpx;
+		font-size: 60rpx;
+		font-weight: bold;
+		color: $u-main-color;
+		line-height: 90rpx;
+		@include vue-flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.u-middle-line {
+		border: none;
+	}
+
+	.u-box {
+		box-sizing: border-box;
+		border: 2rpx solid #cccccc;
+		border-radius: 6rpx;
+	}
+
+	.u-box-active {
+		overflow: hidden;
+		animation-timing-function: ease-in-out;
+		animation-duration: 1500ms;
+		animation-iteration-count: infinite;
+		animation-direction: alternate;
+		border: 2rpx solid $u-type-primary;
+	}
+
+	.u-middle-line-active {
+		background: $u-type-primary;
+	}
+
+	.u-breathe {
+		animation: breathe 2s infinite ease;
+	}
+
+	.u-placeholder-line {
+		/* #ifndef APP-NVUE */
+		display: none;
+		/* #endif */
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		width: 2rpx;
+		height: 40rpx;
+		background: #333333;
+		animation: twinkling 1.5s infinite ease;
+	}
+
+	.u-animation-breathe {
+		animation-name: breathe;
+	}
+
+	.u-dot {
+		font-size: 34rpx;
+		line-height: 34rpx;
+	}
+
+	.u-middle-line {
+		height: 4px;
+		background: #000000;
+		width: 80%;
+		position: absolute;
+		border-radius: 2px;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	.u-buttom-line-active {
+		background: $u-type-primary;
+	}
+
+	.u-bottom-line {
+		height: 4px;
+		background: #000000;
+		width: 80%;
+		position: absolute;
+		border-radius: 2px;
+		bottom: 0;
+		left: 50%;
+		transform: translate(-50%);
+	}
+</style>

uview-ui/components/u-modal/u-modal.vue

@@ -0,0 +1,283 @@
+<template>
+	<view>
+		<u-popup :zoom="zoom" mode="center" :popup="false" :z-index="uZIndex" v-model="value" :length="width"
+		 :mask-close-able="maskCloseAble" :border-radius="borderRadius" @close="popupClose" :negative-top="negativeTop">
+			<view class="u-model">
+				<view v-if="showTitle" class="u-model__title u-line-1" :style="[titleStyle]">{{ title }}</view>
+				<view class="u-model__content">
+					<view :style="[contentStyle]" v-if="$slots.default  || $slots.$default">
+						<slot />
+					</view>
+					<view v-else class="u-model__content__message" :style="[contentStyle]">{{ content }}</view>
+				</view>
+				<view class="u-model__footer u-border-top" v-if="showCancelButton || showConfirmButton">
+					<view v-if="showCancelButton" :hover-stay-time="100" hover-class="u-model__btn--hover" class="u-model__footer__button"
+					 :style="[cancelBtnStyle]" @tap="cancel">
+						{{cancelText}}
+					</view>
+					<view v-if="showConfirmButton || $slots['confirm-button']" :hover-stay-time="100" :hover-class="asyncClose ? 'none' : 'u-model__btn--hover'"
+					 class="u-model__footer__button hairline-left" :style="[confirmBtnStyle]" @tap="confirm">
+						<slot v-if="$slots['confirm-button']" name="confirm-button"></slot>
+						<block v-else>
+							<u-loading mode="circle" :color="confirmColor" v-if="loading"></u-loading>
+							<block v-else>
+								{{confirmText}}
+							</block>
+						</block>
+					</view>
+				</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	/**
+	 * modal 模态框
+	 * @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作
+	 * @tutorial https://www.uviewui.com/components/modal.html
+	 * @property {Boolean} value 是否显示模态框
+	 * @property {String | Number} z-index 层级
+	 * @property {String} title 模态框标题（默认"提示"）
+	 * @property {String | Number} width 模态框宽度（默认600）
+	 * @property {String} content 模态框内容（默认"内容"）
+	 * @property {Boolean} show-title 是否显示标题（默认true）
+	 * @property {Boolean} async-close 是否异步关闭，只对确定按钮有效（默认false）
+	 * @property {Boolean} show-confirm-button 是否显示确认按钮（默认true）
+	 * @property {Stringr | Number} negative-top modal往上偏移的值
+	 * @property {Boolean} show-cancel-button 是否显示取消按钮（默认false）
+	 * @property {Boolean} mask-close-able 是否允许点击遮罩关闭modal（默认false）
+	 * @property {String} confirm-text 确认按钮的文字内容（默认"确认"）
+	 * @property {String} cancel-text 取消按钮的文字内容（默认"取消"）
+	 * @property {String} cancel-color 取消按钮的颜色（默认"#606266"）
+	 * @property {String} confirm-color 确认按钮的文字内容（默认"#2979ff"）
+	 * @property {String | Number} border-radius 模态框圆角值，单位rpx（默认16）
+	 * @property {Object} title-style 自定义标题样式，对象形式
+	 * @property {Object} content-style 自定义内容样式，对象形式
+	 * @property {Object} cancel-style 自定义取消按钮样式，对象形式
+	 * @property {Object} confirm-style 自定义确认按钮样式，对象形式
+	 * @property {Boolean} zoom 是否开启缩放模式（默认true）
+	 * @event {Function} confirm 确认按钮被点击
+	 * @event {Function} cancel 取消按钮被点击
+	 * @example <u-modal :src="title" :content="content"></u-modal>
+	 */
+	export default {
+		name: 'u-modal',
+		props: {
+			// 是否显示Modal
+			value: {
+				type: Boolean,
+				default: false
+			},
+			// 层级z-index
+			zIndex: {
+				type: [Number, String],
+				default: ''
+			},
+			// 标题
+			title: {
+				type: [String],
+				default: '提示'
+			},
+			// 弹窗宽度，可以是数值(rpx)，百分比，auto等
+			width: {
+				type: [Number, String],
+				default: 600
+			},
+			// 弹窗内容
+			content: {
+				type: String,
+				default: '内容'
+			},
+			// 是否显示标题
+			showTitle: {
+				type: Boolean,
+				default: true
+			},
+			// 是否显示确认按钮
+			showConfirmButton: {
+				type: Boolean,
+				default: true
+			},
+			// 是否显示取消按钮
+			showCancelButton: {
+				type: Boolean,
+				default: false
+			},
+			// 确认文案
+			confirmText: {
+				type: String,
+				default: '确认'
+			},
+			// 取消文案
+			cancelText: {
+				type: String,
+				default: '取消'
+			},
+			// 确认按钮颜色
+			confirmColor: {
+				type: String,
+				default: '#2979ff'
+			},
+			// 取消文字颜色
+			cancelColor: {
+				type: String,
+				default: '#606266'
+			},
+			// 圆角值
+			borderRadius: {
+				type: [Number, String],
+				default: 16
+			},
+			// 标题的样式
+			titleStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 内容的样式
+			contentStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 取消按钮的样式
+			cancelStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 确定按钮的样式
+			confirmStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 是否开启缩放效果
+			zoom: {
+				type: Boolean,
+				default: true
+			},
+			// 是否异步关闭，只对确定按钮有效
+			asyncClose: {
+				type: Boolean,
+				default: false
+			},
+			// 是否允许点击遮罩关闭modal
+			maskCloseAble: {
+				type: Boolean,
+				default: false
+			},
+			// 给一个负的margin-top，往上偏移，避免和键盘重合的情况
+			negativeTop: {
+				type: [String, Number],
+				default: 0
+			}
+		},
+		data() {
+			return {
+				loading: false, // 确认按钮是否正在加载中
+			}
+		},
+		computed: {
+			cancelBtnStyle() {
+				return Object.assign({
+					color: this.cancelColor
+				}, this.cancelStyle);
+			},
+			confirmBtnStyle() {
+				return Object.assign({
+					color: this.confirmColor
+				}, this.confirmStyle);
+			},
+			uZIndex() {
+				return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
+			}
+		},
+		watch: {
+			// 如果是异步关闭时，外部修改v-model的值为false时，重置内部的loading状态
+			// 避免下次打开的时候，状态混乱
+			value(n) {
+				if (n === true) this.loading = false;
+			}
+		},
+		methods: {
+			confirm() {
+				// 异步关闭
+				if (this.asyncClose) {
+					this.loading = true;
+				} else {
+					this.$emit('input', false);
+				}
+				this.$emit('confirm');
+			},
+			cancel() {
+				this.$emit('cancel');
+				this.$emit('input', false);
+				// 目前popup弹窗关闭有一个延时操作，此处做一个延时
+				// 避免确认按钮文字变成了"确定"字样，modal还没消失，造成视觉不好的效果
+				setTimeout(() => {
+					this.loading = false;
+				}, 300);
+			},
+			// 点击遮罩关闭modal，设置v-model的值为false，否则无法第二次弹起modal
+			popupClose() {
+				this.$emit('input', false);
+			},
+			// 清除加载中的状态
+			clearLoading() {
+				this.loading = false;
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+
+	.u-model {
+		height: auto;
+		overflow: hidden;
+		font-size: 32rpx;
+		background-color: #fff;
+
+		&__btn--hover {
+			background-color: rgb(230, 230, 230);
+		}
+
+		&__title {
+			padding-top: 48rpx;
+			font-weight: 500;
+			text-align: center;
+			color: $u-main-color;
+		}
+
+		&__content {
+			&__message {
+				padding: 48rpx;
+				font-size: 30rpx;
+				text-align: center;
+				color: $u-content-color;
+			}
+		}
+
+		&__footer {
+			@include vue-flex;
+
+			&__button {
+				flex: 1;
+				height: 100rpx;
+				line-height: 100rpx;
+				font-size: 32rpx;
+				box-sizing: border-box;
+				cursor: pointer;
+				text-align: center;
+				border-radius: 4rpx;
+			}
+		}
+	}
+</style>

uview-ui/components/u-navbar/u-navbar.vue

@@ -0,0 +1,315 @@
+<template>
+	<view class="">
+		<view class="u-navbar" :style="[navbarStyle]" :class="{ 'u-navbar-fixed': isFixed, 'u-border-bottom': borderBottom }">
+			<view class="u-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
+			<view class="u-navbar-inner" :style="[navbarInnerStyle]">
+				<view class="u-back-wrap" v-if="isBack" @tap="goBack">
+					<view class="u-icon-wrap">
+						<u-icon :name="backIconName" :color="backIconColor" :size="backIconSize"></u-icon>
+					</view>
+					<view class="u-icon-wrap u-back-text u-line-1" v-if="backText" :style="[backTextStyle]">{{ backText }}</view>
+				</view>
+				<view class="u-navbar-content-title" v-if="title" :style="[titleStyle]">
+					<view
+					    class="u-title u-line-1"
+					    :style="{
+							color: titleColor,
+							fontSize: titleSize + 'rpx',
+							fontWeight: titleBold ? 'bold' : 'normal'
+						}">
+						{{ title }}
+					</view>
+				</view>
+				<view class="u-slot-content">
+					<slot></slot>
+				</view>
+				<view class="u-slot-right">
+					<slot name="right"></slot>
+				</view>
+			</view>
+		</view>
+		<!-- 解决fixed定位后导航栏塌陷的问题 -->
+		<view class="u-navbar-placeholder" v-if="isFixed && !immersive" :style="{ width: '100%', height: Number(navbarHeight) + statusBarHeight + 'px' }"></view>
+	</view>
+</template>
+
+<script>
+	// 获取系统状态栏的高度
+	let systemInfo = uni.getSystemInfoSync();
+	let menuButtonInfo = {};
+	// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
+	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
+	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+	// #endif
+	/**
+	 * navbar 自定义导航栏
+	 * @description 此组件一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uniapp自带的导航栏。
+	 * @tutorial https://www.uviewui.com/components/navbar.html
+	 * @property {String Number} height 导航栏高度(不包括状态栏高度在内，内部自动加上)，注意这里的单位是px（默认44）
+	 * @property {String} back-icon-color 左边返回图标的颜色（默认#606266）
+	 * @property {String} back-icon-name 左边返回图标的名称，只能为uView自带的图标（默认arrow-left）
+	 * @property {String Number} back-icon-size 左边返回图标的大小，单位rpx（默认30）
+	 * @property {String} back-text 返回图标右边的辅助提示文字
+	 * @property {Object} back-text-style 返回图标右边的辅助提示文字的样式，对象形式（默认{ color: '#606266' }）
+	 * @property {String} title 导航栏标题，如设置为空字符，将会隐藏标题占位区域
+	 * @property {String Number} title-width 导航栏标题的最大宽度，内容超出会以省略号隐藏，单位rpx（默认250）
+	 * @property {String} title-color 标题的颜色（默认#606266）
+	 * @property {String Number} title-size 导航栏标题字体大小，单位rpx（默认32）
+	 * @property {Function} custom-back 自定义返回逻辑方法
+	 * @property {String Number} z-index 固定在顶部时的z-index值（默认980）
+	 * @property {Boolean} is-back 是否显示导航栏左边返回图标和辅助文字（默认true）
+	 * @property {Object} background 导航栏背景设置，见官网说明（默认{ background: '#ffffff' }）
+	 * @property {Boolean} is-fixed 导航栏是否固定在顶部（默认true）
+	 * @property {Boolean} immersive 沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效（默认false）
+	 * @property {Boolean} border-bottom 导航栏底部是否显示下边框，如定义了较深的背景颜色，可取消此值（默认true）
+	 * @example <u-navbar back-text="返回" title="剑未配妥，出门已是江湖"></u-navbar>
+	 */
+	export default {
+		name: "u-navbar",
+		props: {
+			// 导航栏高度，单位px，非rpx
+			height: {
+				type: [String, Number],
+				default: ''
+			},
+			// 返回箭头的颜色
+			backIconColor: {
+				type: String,
+				default: '#606266'
+			},
+			// 左边返回的图标
+			backIconName: {
+				type: String,
+				default: 'nav-back'
+			},
+			// 左边返回图标的大小，rpx
+			backIconSize: {
+				type: [String, Number],
+				default: '44'
+			},
+			// 返回的文字提示
+			backText: {
+				type: String,
+				default: ''
+			},
+			// 返回的文字的 样式
+			backTextStyle: {
+				type: Object,
+				default () {
+					return {
+						color: '#606266'
+					}
+				}
+			},
+			// 导航栏标题
+			title: {
+				type: String,
+				default: ''
+			},
+			// 标题的宽度，如果需要自定义右侧内容，且右侧内容很多时，可能需要减少这个宽度，单位rpx
+			titleWidth: {
+				type: [String, Number],
+				default: '250'
+			},
+			// 标题的颜色
+			titleColor: {
+				type: String,
+				default: '#606266'
+			},
+			// 标题字体是否加粗
+			titleBold: {
+				type: Boolean,
+				default: false
+			},
+			// 标题的字体大小
+			titleSize: {
+				type: [String, Number],
+				default: 32
+			},
+			isBack: {
+				type: [Boolean, String],
+				default: true
+			},
+			// 对象形式，因为用户可能定义一个纯色，或者线性渐变的颜色
+			background: {
+				type: Object,
+				default () {
+					return {
+						background: '#ffffff'
+					}
+				}
+			},
+			// 导航栏是否固定在顶部
+			isFixed: {
+				type: Boolean,
+				default: true
+			},
+			// 是否沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效
+			immersive: {
+				type: Boolean,
+				default: false
+			},
+			// 是否显示导航栏的下边框
+			borderBottom: {
+				type: Boolean,
+				default: true
+			},
+			zIndex: {
+				type: [String, Number],
+				default: ''
+			},
+			// 自定义返回逻辑
+			customBack: {
+				type: Function,
+				default: null
+			}
+		},
+		data() {
+			return {
+				menuButtonInfo: menuButtonInfo,
+				statusBarHeight: systemInfo.statusBarHeight
+			};
+		},
+		computed: {
+			// 导航栏内部盒子的样式
+			navbarInnerStyle() {
+				let style = {};
+				// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
+				style.height = this.navbarHeight + 'px';
+				// // 如果是各家小程序，导航栏内部的宽度需要减少右边胶囊的宽度
+				// #ifdef MP
+				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
+				style.marginRight = rightButtonWidth + 'px';
+				// #endif
+				return style;
+			},
+			// 整个导航栏的样式
+			navbarStyle() {
+				let style = {};
+				style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.navbar;
+				// 合并用户传递的背景色对象
+				Object.assign(style, this.background);
+				return style;
+			},
+			// 导航中间的标题的样式
+			titleStyle() {
+				let style = {};
+				// #ifndef MP
+				style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
+				style.right = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
+				// #endif
+				// #ifdef MP
+				// 此处是为了让标题显示区域即使在小程序有右侧胶囊的情况下也能处于屏幕的中间，是通过绝对定位实现的
+				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
+				style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
+				style.right = rightButtonWidth - (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + rightButtonWidth +
+					'px';
+				// #endif
+				style.width = uni.upx2px(this.titleWidth) + 'px';
+				return style;
+			},
+			// 转换字符数值为真正的数值
+			navbarHeight() {
+				// #ifdef APP-PLUS || H5
+				return this.height ? this.height : 44;
+				// #endif
+				// #ifdef MP
+				// 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
+				// 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
+				// return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
+				let height = systemInfo.platform == 'ios' ? 44 : 48;
+				return this.height ? this.height : height;
+				// #endif
+			}
+		},
+		created() {},
+		methods: {
+			goBack() {
+				// 如果自定义了点击返回按钮的函数，则执行，否则执行返回逻辑
+				if (typeof this.customBack === 'function') {
+					// 在微信，支付宝等环境(H5正常)，会导致父组件定义的customBack()函数体中的this变成子组件的this
+					// 通过bind()方法，绑定父组件的this，让this.customBack()的this为父组件的上下文
+					this.customBack.bind(this.$u.$parent.call(this))();
+				} else {
+					uni.navigateBack();
+				}
+			}
+		}
+	};
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+
+	.u-navbar {
+		width: 100%;
+	}
+
+	.u-navbar-fixed {
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 0;
+		z-index: 991;
+	}
+
+	.u-status-bar {
+		width: 100%;
+	}
+
+	.u-navbar-inner {
+		@include vue-flex;
+		justify-content: space-between;
+		position: relative;
+		align-items: center;
+	}
+
+	.u-back-wrap {
+		@include vue-flex;
+		align-items: center;
+		flex: 1;
+		flex-grow: 0;
+		padding: 14rpx 14rpx 14rpx 24rpx;
+	}
+
+	.u-back-text {
+		padding-left: 4rpx;
+		font-size: 30rpx;
+	}
+
+	.u-navbar-content-title {
+		@include vue-flex;
+		align-items: center;
+		justify-content: center;
+		flex: 1;
+		position: absolute;
+		left: 0;
+		right: 0;
+		height: 60rpx;
+		text-align: center;
+		flex-shrink: 0;
+	}
+
+	.u-navbar-centent-slot {
+		flex: 1;
+	}
+
+	.u-title {
+		line-height: 60rpx;
+		font-size: 32rpx;
+		flex: 1;
+	}
+
+	.u-navbar-right {
+		flex: 1;
+		@include vue-flex;
+		align-items: center;
+		justify-content: flex-end;
+	}
+
+	.u-slot-content {
+		flex: 1;
+		@include vue-flex;
+		align-items: center;
+	}
+</style>

uview-ui/components/u-notice-bar/u-notice-bar.vue

@@ -0,0 +1,272 @@
+<template>
+	<view class="u-notice-bar-wrap" v-if="isShow" :style="{
+		borderRadius: borderRadius + 'rpx',
+	}">
+		<block v-if="mode == 'horizontal' && isCircular">
+			<u-row-notice
+				:type="type"
+				:color="color"
+				:bgColor="bgColor"
+				:list="list"
+				:volumeIcon="volumeIcon"
+				:moreIcon="moreIcon"
+				:volumeSize="volumeSize"
+				:closeIcon="closeIcon"
+				:mode="mode"
+				:fontSize="fontSize"
+				:speed="speed"
+				:playState="playState"
+				:padding="padding"
+				@getMore="getMore"
+				@close="close"
+				@click="click"
+			></u-row-notice>
+		</block>
+		<block v-if="mode == 'vertical' || (mode == 'horizontal' && !isCircular)">
+			<u-column-notice
+				:type="type"
+				:color="color"
+				:bgColor="bgColor"
+				:list="list"
+				:volumeIcon="volumeIcon"
+				:moreIcon="moreIcon"
+				:closeIcon="closeIcon"
+				:mode="mode"
+				:volumeSize="volumeSize"
+				:disable-touch="disableTouch"
+				:fontSize="fontSize"
+				:duration="duration"
+				:playState="playState"
+				:padding="padding"
+				@getMore="getMore"
+				@close="close"
+				@click="click"
+				@end="end"
+			></u-column-notice>
+		</block>
+	</view>
+</template>
+<script>
+/**
+ * noticeBar 滚动通知
+ * @description 该组件用于滚动通告场景，有多种模式可供选择
+ * @tutorial https://www.uviewui.com/components/noticeBar.html
+ * @property {Array} list 滚动内容，数组形式，见上方说明
+ * @property {String} type 显示的主题（默认warning）
+ * @property {Boolean} volume-icon 是否显示小喇叭图标（默认true）
+ * @property {Boolean} more-icon 是否显示右边的向右箭头（默认false）
+ * @property {Boolean} close-icon 是否显示关闭图标（默认false）
+ * @property {Boolean} autoplay 是否自动播放（默认true）
+ * @property {String} color 文字颜色
+ * @property {String Number} bg-color 背景颜色
+ * @property {String} mode 滚动模式（默认horizontal）
+ * @property {Boolean} show 是否显示（默认true）
+ * @property {String Number} font-size 字体大小，单位rpx（默认28）
+ * @property {String Number} volume-size 左边喇叭的大小（默认34）
+ * @property {String Number} duration 滚动周期时长，只对步进模式有效，横向衔接模式无效，单位ms（默认2000）
+ * @property {String Number} speed 水平滚动时的滚动速度，即每秒移动多少距离，只对水平衔接方式有效，单位rpx（默认160）
+ * @property {String Number} font-size 字体大小，单位rpx（默认28）
+ * @property {Boolean} is-circular mode为horizontal时，指明是否水平衔接滚动（默认true）
+ * @property {String} play-state 播放状态，play - 播放，paused - 暂停（默认play）
+ * @property {String Nubmer} border-radius 通知栏圆角（默认为0）
+ * @property {String Nubmer} padding 内边距，字符串，与普通的内边距css写法一直（默认"18rpx 24rpx"）
+ * @property {Boolean} no-list-hidden 列表为空时，是否显示组件（默认false）
+ * @property {Boolean} disable-touch 是否禁止通过手动滑动切换通知，只有mode = vertical，或者mode = horizontal且is-circular = false时有效（默认true）
+ * @event {Function} click 点击通告文字触发，只有mode = vertical，或者mode = horizontal且is-circular = false时有效
+ * @event {Function} close 点击右侧关闭图标触发
+ * @event {Function} getMore 点击右侧向右图标触发
+ * @event {Function} end 列表的消息每次被播放一个周期时触发，只有mode = vertical，或者mode = horizontal且is-circular = false时有效
+ * @example <u-notice-bar :more-icon="true" :list="list"></u-notice-bar>
+ */
+export default {
+	name: "u-notice-bar",
+	props: {
+		// 显示的内容，数组
+		list: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		// 显示的主题，success|error|primary|info|warning
+		type: {
+			type: String,
+			default: 'warning'
+		},
+		// 是否显示左侧的音量图标
+		volumeIcon: {
+			type: Boolean,
+			default: true
+		},
+		// 音量喇叭的大小
+		volumeSize: {
+			type: [Number, String],
+			default: 34
+		},
+		// 是否显示右侧的右箭头图标
+		moreIcon: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示右侧的关闭图标
+		closeIcon: {
+			type: Boolean,
+			default: false
+		},
+		// 是否自动播放
+		autoplay: {
+			type: Boolean,
+			default: true
+		},
+		// 文字颜色，各图标也会使用文字颜色
+		color: {
+			type: String,
+			default: ''
+		},
+		// 背景颜色
+		bgColor: {
+			type: String,
+			default: ''
+		},
+		// 滚动方向，horizontal-水平滚动，vertical-垂直滚动
+		mode: {
+			type: String,
+			default: 'horizontal'
+		},
+		// 是否显示
+		show: {
+			type: Boolean,
+			default: true
+		},
+		// 字体大小，单位rpx
+		fontSize: {
+			type: [Number, String],
+			default: 28
+		},
+		// 滚动一个周期的时间长，单位ms
+		duration: {
+			type: [Number, String],
+			default: 2000
+		},
+		// 水平滚动时的滚动速度，即每秒滚动多少rpx，这有利于控制文字无论多少时，都能有一个恒定的速度
+		speed: {
+			type: [Number, String],
+			default: 160
+		},
+		// 水平滚动时，是否采用衔接形式滚动
+		// 水平衔接模式，采用的是swiper组件，水平滚动
+		isCircular: {
+			type: Boolean,
+			default: true
+		},
+		// 播放状态，play-播放，paused-暂停
+		playState: {
+			type: String,
+			default: 'play'
+		},
+		// 是否禁止用手滑动切换
+		// 目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序
+		disableTouch: {
+			type: Boolean,
+			default: true
+		},
+		// 滚动通知设置圆角
+		borderRadius: {
+			type: [Number, String],
+			default: 0
+		},
+		// 通知的边距
+		padding: {
+			type: [Number, String],
+			default: '18rpx 24rpx'
+		},
+		// list列表为空时，是否显示组件
+		noListHidden: {
+			type: Boolean,
+			default: true
+		}
+	},
+	computed: {
+		// 如果设置show为false，或者设置了noListHidden为true，且list长度又为零的话，隐藏组件
+		isShow() {
+			if(this.show == false || (this.noListHidden == true && this.list.length == 0)) return false;
+			else return true;
+		}
+	},
+	methods: {
+		// 点击通告栏
+		click(index) {
+			this.$emit('click', index);
+		},
+		// 点击关闭按钮
+		close() {
+			this.$emit('close');
+		},
+		// 点击更多箭头按钮
+		getMore() {
+			this.$emit('getMore');
+		},
+		// 滚动一个周期结束，只对垂直，或者水平步进形式有效
+		end() {
+			this.$emit('end');
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+
+.u-notice-bar-wrap {
+	overflow: hidden;
+}
+
+.u-notice-bar {
+	padding: 18rpx 24rpx;
+	overflow: hidden;
+}
+
+.u-direction-row {
+	@include vue-flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.u-left-icon {
+	@include vue-flex;
+	align-items: center;
+}
+
+.u-notice-box {
+	flex: 1;
+	@include vue-flex;
+	overflow: hidden;
+	margin-left: 12rpx;
+}
+
+.u-right-icon {
+	margin-left: 12rpx;
+	@include vue-flex;
+	align-items: center;
+}
+
+.u-notice-content {
+	line-height: 1;
+	white-space: nowrap;
+	font-size: 26rpx;
+	animation: u-loop-animation 10s linear infinite both;
+	text-align: right;
+	// 这一句很重要，为了能让滚动左右连接起来
+	padding-left: 100%;
+}
+
+@keyframes u-loop-animation {
+	0% {
+		transform: translate3d(0, 0, 0);
+	}
+
+	100% {
+		transform: translate3d(-100%, 0, 0);
+	}
+}
+</style>

uview-ui/components/u-number-box/u-number-box.vue

@@ -0,0 +1,363 @@
+<template>
+	<view class="u-numberbox">
+		<view class="u-icon-minus" @touchstart.stop.prevent="btnTouchStart('minus')" @touchend.stop.prevent="clearTimer" :class="{ 'u-icon-disabled': disabled || inputVal <= min }"
+		    :style="{
+				background: bgColor,
+				height: inputHeight + 'rpx',
+				color: color
+			}">
+			<u-icon name="minus" :size="size"></u-icon>
+		</view>
+		<input :disabled="disabledInput || disabled" :cursor-spacing="getCursorSpacing" :class="{ 'u-input-disabled': disabled }"
+		    v-model="inputVal" class="u-number-input" @blur="onBlur" @focus="onFocus"
+		    type="number" :style="{
+				color: color,
+				fontSize: size + 'rpx',
+				background: bgColor,
+				height: inputHeight + 'rpx',
+				width: inputWidth + 'rpx'
+			}" />
+		<view class="u-icon-plus" @touchstart.stop.prevent="btnTouchStart('plus')" @touchend.stop.prevent="clearTimer" :class="{ 'u-icon-disabled': disabled || inputVal >= max }"
+		    :style="{
+				background: bgColor,
+				height: inputHeight + 'rpx',
+				color: color
+			}">
+			<u-icon name="plus" :size="size"></u-icon>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * numberBox 步进器
+	 * @description 该组件一般用于商城购物选择物品数量的场景。注意：该输入框只能输入大于或等于0的整数，不支持小数输入
+	 * @tutorial https://www.uviewui.com/components/numberBox.html
+	 * @property {Number} value 输入框初始值（默认1）
+	 * @property {String} bg-color 输入框和按钮的背景颜色（默认#F2F3F5）
+	 * @property {Number} min 用户可输入的最小值（默认0）
+	 * @property {Number} max 用户可输入的最大值（默认99999）
+	 * @property {Number} step 步长，每次加或减的值（默认1）
+	 * @property {Boolean} disabled 是否禁用操作，禁用后无法加减或手动修改输入框的值（默认false）
+	 * @property {Boolean} disabled-input 是否禁止输入框手动输入值（默认false）
+	 * @property {Boolean} positive-integer 是否只能输入正整数（默认true）
+	 * @property {String | Number} size 输入框文字和按钮字体大小，单位rpx（默认26）
+	 * @property {String} color 输入框文字和加减按钮图标的颜色（默认#323233）
+	 * @property {String | Number} input-width 输入框宽度，单位rpx（默认80）
+	 * @property {String | Number} input-height 输入框和按钮的高度，单位rpx（默认50）
+	 * @property {String | Number} index 事件回调时用以区分当前发生变化的是哪个输入框
+	 * @property {Boolean} long-press 是否开启长按连续递增或递减(默认true)
+	 * @property {String | Number} press-time 开启长按触发后，每触发一次需要多久，单位ms(默认250)
+	 * @property {String | Number} cursor-spacing 指定光标于键盘的距离，避免键盘遮挡输入框，单位rpx（默认200）
+	 * @event {Function} change 输入框内容发生变化时触发，对象形式
+	 * @event {Function} blur 输入框失去焦点时触发，对象形式
+	 * @event {Function} minus 点击减少按钮时触发(按钮可点击情况下)，对象形式
+	 * @event {Function} plus 点击增加按钮时触发(按钮可点击情况下)，对象形式
+	 * @example <u-number-box :min="1" :max="100"></u-number-box>
+	 */
+	export default {
+		name: "u-number-box",
+		props: {
+			// 预显示的数字
+			value: {
+				type: Number,
+				default: 1
+			},
+			// 背景颜色
+			bgColor: {
+				type: String,
+				default: '#F2F3F5'
+			},
+			// 最小值
+			min: {
+				type: Number,
+				default: 0
+			},
+			// 最大值
+			max: {
+				type: Number,
+				default: 99999
+			},
+			// 步进值，每次加或减的值
+			step: {
+				type: Number,
+				default: 1
+			},
+			// 是否禁用加减操作
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			// input的字体大小，单位rpx
+			size: {
+				type: [Number, String],
+				default: 26
+			},
+			// 加减图标的颜色
+			color: {
+				type: String,
+				default: '#323233'
+			},
+			// input宽度，单位rpx
+			inputWidth: {
+				type: [Number, String],
+				default: 80
+			},
+			// input高度，单位rpx
+			inputHeight: {
+				type: [Number, String],
+				default: 50
+			},
+			// index索引，用于列表中使用，让用户知道是哪个numberbox发生了变化，一般使用for循环出来的index值即可
+			index: {
+				type: [Number, String],
+				default: ''
+			},
+			// 是否禁用输入框，与disabled作用于输入框时，为OR的关系，即想要禁用输入框，又可以加减的话
+			// 设置disabled为false，disabledInput为true即可
+			disabledInput: {
+				type: Boolean,
+				default: false
+			},
+			// 输入框于键盘之间的距离
+			cursorSpacing: {
+				type: [Number, String],
+				default: 100
+			},
+			// 是否开启长按连续递增或递减
+			longPress: {
+				type: Boolean,
+				default: true
+			},
+			// 开启长按触发后，每触发一次需要多久
+			pressTime: {
+				type: [Number, String],
+				default: 250
+			},
+			// 是否只能输入大于或等于0的整数(正整数)
+			positiveInteger: {
+				type: Boolean,
+				default: true
+			}
+		},
+		watch: {
+			value(v1, v2) {
+				// 只有value的改变是来自外部的时候，才去同步inputVal的值，否则会造成循环错误
+				if(!this.changeFromInner) {
+					this.inputVal = v1;
+					// 因为inputVal变化后，会触发this.handleChange()，在其中changeFromInner会再次被设置为true，
+					// 造成外面修改值，也导致被认为是内部修改的混乱，这里进行this.$nextTick延时，保证在运行周期的最后处
+					// 将changeFromInner设置为false
+					this.$nextTick(function(){
+						this.changeFromInner = false;
+					})
+				}
+			},
+			inputVal(v1, v2) {
+				// 为了让用户能够删除所有输入值，重新输入内容，删除所有值后，内容为空字符串
+				if (v1 == '') return;
+				let value = 0;
+				// 首先判断是否数值，并且在min和max之间，如果不是，使用原来值
+				let tmp = this.$u.test.number(v1);
+				if (tmp && v1 >= this.min && v1 <= this.max) value = v1;
+				else value = v2;
+				// 判断是否只能输入大于等于0的整数
+				if(this.positiveInteger) {
+					// 小于0，或者带有小数点，
+					if(v1 < 0 || String(v1).indexOf('.') !== -1) {
+						value = v2;
+						// 双向绑定input的值，必须要使用$nextTick修改显示的值
+						this.$nextTick(() => {
+							this.inputVal = v2;
+						})
+					}
+				}
+				// 发出change事件
+				this.handleChange(value, 'change');
+			}
+		},
+		data() {
+			return {
+				inputVal: 1, // 输入框中的值，不能直接使用props中的value，因为应该改变props的状态
+				timer: null, // 用作长按的定时器
+				changeFromInner: false, // 值发生变化，是来自内部还是外部
+				innerChangeTimer: null, // 内部定时器
+			};
+		},
+		created() {
+			this.inputVal = Number(this.value);
+		},
+		computed: {
+			getCursorSpacing() {
+				// 先将值转为px单位，再转为数值
+				return Number(uni.upx2px(this.cursorSpacing));
+			}
+		},
+		methods: {
+			// 点击退格键
+			btnTouchStart(callback) {
+				// 先执行一遍方法，否则会造成松开手时，就执行了clearTimer，导致无法实现功能
+				this[callback]();
+				// 如果没开启长按功能，直接返回
+				if (!this.longPress) return;
+				clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
+				this.timer = null;
+				this.timer = setInterval(() => {
+					// 执行加或减函数
+					this[callback]();
+				}, this.pressTime);
+			},
+			clearTimer() {
+				this.$nextTick(() => {
+					clearInterval(this.timer);
+					this.timer = null;
+				})
+			},
+			minus() {
+				this.computeVal('minus');
+			},
+			plus() {
+				this.computeVal('plus');
+			},
+			// 为了保证小数相加减出现精度溢出的问题
+			calcPlus(num1, num2) {
+				let baseNum, baseNum1, baseNum2;
+				try {
+					baseNum1 = num1.toString().split('.')[1].length;
+				} catch (e) {
+					baseNum1 = 0;
+				}
+				try {
+					baseNum2 = num2.toString().split('.')[1].length;
+				} catch (e) {
+					baseNum2 = 0;
+				}
+				baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
+				let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2; //精度
+				return ((num1 * baseNum + num2 * baseNum) / baseNum).toFixed(precision);
+			},
+			// 为了保证小数相加减出现精度溢出的问题
+			calcMinus(num1, num2) {
+				let baseNum, baseNum1, baseNum2;
+				try {
+					baseNum1 = num1.toString().split('.')[1].length;
+				} catch (e) {
+					baseNum1 = 0;
+				}
+				try {
+					baseNum2 = num2.toString().split('.')[1].length;
+				} catch (e) {
+					baseNum2 = 0;
+				}
+				baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
+				let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2;
+				return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision);
+			},
+			computeVal(type) {
+				uni.hideKeyboard();
+				if (this.disabled) return;
+				let value = 0;
+				// 减
+				if (type === 'minus') {
+					value = this.calcMinus(this.inputVal, this.step);
+				} else if (type === 'plus') {
+					value = this.calcPlus(this.inputVal, this.step);
+				}
+				// 判断是否小于最小值和大于最大值
+				if (value < this.min || value > this.max) {
+					return;
+				}
+				this.inputVal = value;
+				this.handleChange(value, type);
+			},
+			// 处理用户手动输入的情况
+			onBlur(event) {
+				let val = 0;
+				let value = event.detail.value;
+				// 如果为非0-9数字组成，或者其第一位数值为0，直接让其等于min值
+				// 这里不直接判断是否正整数，是因为用户传递的props min值可能为0
+				if (!/(^\d+$)/.test(value) || value[0] == 0) val = this.min;
+				val = +value;
+				if (val > this.max) {
+					val = this.max;
+				} else if (val < this.min) {
+					val = this.min;
+				}
+				this.$nextTick(() => {
+					this.inputVal = val;
+				})
+				this.handleChange(val, 'blur');
+			},
+			// 输入框获得焦点事件
+			onFocus() {
+				this.$emit('focus');
+			},
+			handleChange(value, type) {
+				if (this.disabled) return;
+				// 清除定时器，避免造成混乱
+				if(this.innerChangeTimer) {
+					clearTimeout(this.innerChangeTimer);
+					this.innerChangeTimer = null;
+				}
+				// 发出input事件，修改通过v-model绑定的值，达到双向绑定的效果
+				this.changeFromInner = true;
+				// 一定时间内，清除changeFromInner标记，否则内部值改变后
+				// 外部通过程序修改value值，将会无效
+				this.innerChangeTimer = setTimeout(() => {
+					this.changeFromInner = false;
+				}, 150);
+				this.$emit('input', Number(value));
+				this.$emit(type, {
+					// 转为Number类型
+					value: Number(value),
+					index: this.index
+				})
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+
+	.u-numberbox {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.u-number-input {
+		position: relative;
+		text-align: center;
+		padding: 0;
+		margin: 0 6rpx;
+		@include vue-flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.u-icon-plus,
+	.u-icon-minus {
+		width: 60rpx;
+		@include vue-flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.u-icon-plus {
+		border-radius: 0 8rpx 8rpx 0;
+	}
+
+	.u-icon-minus {
+		border-radius: 8rpx 0 0 8rpx;
+	}
+
+	.u-icon-disabled {
+		color: #c8c9cc !important;
+		background: #f7f8fa !important;
+	}
+
+	.u-input-disabled {
+		color: #c8c9cc !important;
+		background-color: #f2f3f5 !important;
+	}
+</style>

uview-ui/components/u-number-keyboard/u-number-keyboard.vue

@@ -0,0 +1,158 @@
+<template>
+	<view class="u-keyboard" @touchmove.stop.prevent="() => {}">
+		<view class="u-keyboard-grids">
+			<view
+			    class="u-keyboard-grids-item"
+			    :class="[btnBgGray(index) ? 'u-bg-gray' : '', index <= 2 ? 'u-border-top' : '', index < 9 ? 'u-border-bottom' : '', (index + 1) % 3 != 0 ? 'u-border-right' : '']"
+			    :style="[itemStyle(index)]"
+			    v-for="(item, index) in numList"
+			    :key="index"
+			    :hover-class="hoverClass(index)"
+			    :hover-stay-time="100"
+			    @tap="keyboardClick(item)">
+				<view class="u-keyboard-grids-btn">{{ item }}</view>
+			</view>
+			<view class="u-keyboard-grids-item u-bg-gray" hover-class="u-hover-class" :hover-stay-time="100" @touchstart.stop="backspaceClick"
+			    @touchend="clearTimer">
+				<view class="u-keyboard-back u-keyboard-grids-btn">
+					<u-icon name="backspace" :size="38" :bold="true"></u-icon>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			// 键盘的类型，number-数字键盘，card-身份证键盘
+			mode: {
+				type: String,
+				default: 'number'
+			},
+			// 是否显示键盘的"."符号
+			dotEnabled: {
+				type: Boolean,
+				default: true
+			},
+			// 是否打乱键盘按键的顺序
+			random: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				backspace: 'backspace', // 退格键内容
+				dot: '.', // 点
+				timer: null, // 长按多次删除的事件监听
+				cardX: 'X' // 身份证的X符号
+			};
+		},
+		computed: {
+			// 键盘需要显示的内容
+			numList() {
+				let tmp = [];
+				if (!this.dotEnabled && this.mode == 'number') {
+					if (!this.random) {
+						return [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
+					} else {
+						return this.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]);
+					}
+				} else if (this.dotEnabled && this.mode == 'number') {
+					if (!this.random) {
+						return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0];
+					} else {
+						return this.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0]);
+					}
+				} else if (this.mode == 'card') {
+					if (!this.random) {
+						return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0];
+					} else {
+						return this.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0]);
+					}
+				}
+			},
+			// 按键的样式，在非乱序&&数字键盘&&不显示点按钮时，index为9时，按键占位两个空间
+			itemStyle() {
+				return index => {
+					let style = {};
+					if (this.mode == 'number' && !this.dotEnabled && index == 9) style.flex = '0 0 66.6666666666%';
+					return style;
+				};
+			},
+			// 是否让按键显示灰色，只在非乱序&&数字键盘&&且允许点按键的时候
+			btnBgGray() {
+				return index => {
+					if (!this.random && index == 9 && (this.mode != 'number' || (this.mode == 'number' && this.dotEnabled))) return true;
+					else return false;
+				};
+			},
+			hoverClass() {
+				return index => {
+					if (!this.random && index == 9 && (this.mode == 'number' && this.dotEnabled || this.mode == 'card')) return 'u-hover-class';
+					else return 'u-keyboard-hover';
+				}
+			}
+		},
+		methods: {
+			// 点击退格键
+			backspaceClick() {
+				this.$emit('backspace');
+				clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
+				this.timer = null;
+				this.timer = setInterval(() => {
+					this.$emit('backspace');
+				}, 250);
+			},
+			clearTimer() {
+				clearInterval(this.timer);
+				this.timer = null;
+			},
+			// 获取键盘显示的内容
+			keyboardClick(val) {
+				// 允许键盘显示点模式和触发非点按键时，将内容转为数字类型
+				if (this.dotEnabled && val != this.dot && val != this.cardX) val = Number(val);
+				this.$emit('change', val);
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+
+	.u-keyboard {
+		position: relative;
+		z-index: 1003;
+	}
+
+	.u-keyboard-grids {
+		@include vue-flex;
+		flex-wrap: wrap;
+	}
+
+	.u-keyboard-grids-item {
+		flex: 0 0 33.3333333333%;
+		text-align: center;
+		font-size: 50rpx;
+		color: #333;
+		@include vue-flex;
+		align-items: center;
+		justify-content: center;
+		height: 110rpx;
+		font-weight: 500;
+	}
+
+	.u-bg-gray {
+		background-color: $u-border-color;
+	}
+
+	.u-keyboard-back {
+		font-size: 36rpx;
+	}
+
+	.u-keyboard-hover {
+		background-color: #e7e6eb;
+	}
+</style>

uview-ui/components/u-parse/libs/CssHandler.js

@@ -0,0 +1,100 @@
+const cfg = require('./config.js'),
+	isLetter = c => (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z');
+
+function CssHandler(tagStyle) {
+	var styles = Object.assign(Object.create(null), cfg.userAgentStyles);
+	for (var item in tagStyle)
+		styles[item] = (styles[item] ? styles[item] + ';' : '') + tagStyle[item];
+	this.styles = styles;
+}
+CssHandler.prototype.getStyle = function(data) {
+	this.styles = new parser(data, this.styles).parse();
+}
+CssHandler.prototype.match = function(name, attrs) {
+	var tmp, matched = (tmp = this.styles[name]) ? tmp + ';' : '';
+	if (attrs.class) {
+		var items = attrs.class.split(' ');
+		for (var i = 0, item; item = items[i]; i++)
+			if (tmp = this.styles['.' + item])
+				matched += tmp + ';';
+	}
+	if (tmp = this.styles['#' + attrs.id])
+		matched += tmp + ';';
+	return matched;
+}
+module.exports = CssHandler;
+
+function parser(data, init) {
+	this.data = data;
+	this.floor = 0;
+	this.i = 0;
+	this.list = [];
+	this.res = init;
+	this.state = this.Space;
+}
+parser.prototype.parse = function() {
+	for (var c; c = this.data[this.i]; this.i++)
+		this.state(c);
+	return this.res;
+}
+parser.prototype.section = function() {
+	return this.data.substring(this.start, this.i);
+}
+// 状态机
+parser.prototype.Space = function(c) {
+	if (c == '.' || c == '#' || isLetter(c)) {
+		this.start = this.i;
+		this.state = this.Name;
+	} else if (c == '/' && this.data[this.i + 1] == '*')
+		this.Comment();
+	else if (!cfg.blankChar[c] && c != ';')
+		this.state = this.Ignore;
+}
+parser.prototype.Comment = function() {
+	this.i = this.data.indexOf('*/', this.i) + 1;
+	if (!this.i) this.i = this.data.length;
+	this.state = this.Space;
+}
+parser.prototype.Ignore = function(c) {
+	if (c == '{') this.floor++;
+	else if (c == '}' && !--this.floor) {
+		this.list = [];
+		this.state = this.Space;
+	}
+}
+parser.prototype.Name = function(c) {
+	if (cfg.blankChar[c]) {
+		this.list.push(this.section());
+		this.state = this.NameSpace;
+	} else if (c == '{') {
+		this.list.push(this.section());
+		this.Content();
+	} else if (c == ',') {
+		this.list.push(this.section());
+		this.Comma();
+	} else if (!isLetter(c) && (c < '0' || c > '9') && c != '-' && c != '_')
+		this.state = this.Ignore;
+}
+parser.prototype.NameSpace = function(c) {
+	if (c == '{') this.Content();
+	else if (c == ',') this.Comma();
+	else if (!cfg.blankChar[c]) this.state = this.Ignore;
+}
+parser.prototype.Comma = function() {
+	while (cfg.blankChar[this.data[++this.i]]);
+	if (this.data[this.i] == '{') this.Content();
+	else {
+		this.start = this.i--;
+		this.state = this.Name;
+	}
+}
+parser.prototype.Content = function() {
+	this.start = ++this.i;
+	if ((this.i = this.data.indexOf('}', this.i)) == -1) this.i = this.data.length;
+	var content = this.section();
+	for (var i = 0, item; item = this.list[i++];)
+		if (this.res[item]) this.res[item] += ';' + content;
+		else this.res[item] = content;
+	this.list = [];
+	this.state = this.Space;
+}

uview-ui/components/u-parse/libs/MpHtmlParser.js

@@ -0,0 +1,580 @@
+/**
+ * html 解析器
+ * @tutorial https://github.com/jin-yufeng/Parser
+ * @version 20201029
+ * @author JinYufeng
+ * @listens MIT
+ */
+const cfg = require('./config.js'),
+	blankChar = cfg.blankChar,
+	CssHandler = require('./CssHandler.js'),
+	windowWidth = uni.getSystemInfoSync().windowWidth;
+var emoji;
+
+function MpHtmlParser(data, options = {}) {
+	this.attrs = {};
+	this.CssHandler = new CssHandler(options.tagStyle, windowWidth);
+	this.data = data;
+	this.domain = options.domain;
+	this.DOM = [];
+	this.i = this.start = this.audioNum = this.imgNum = this.videoNum = 0;
+	options.prot = (this.domain || '').includes('://') ? this.domain.split('://')[0] : 'http';
+	this.options = options;
+	this.state = this.Text;
+	this.STACK = [];
+	// 工具函数
+	this.bubble = () => {
+		for (var i = this.STACK.length, item; item = this.STACK[--i];) {
+			if (cfg.richOnlyTags[item.name]) return false;
+			item.c = 1;
+		}
+		return true;
+	}
+	this.decode = (val, amp) => {
+		var i = -1,
+			j, en;
+		while (1) {
+			if ((i = val.indexOf('&', i + 1)) == -1) break;
+			if ((j = val.indexOf(';', i + 2)) == -1) break;
+			if (val[i + 1] == '#') {
+				en = parseInt((val[i + 2] == 'x' ? '0' : '') + val.substring(i + 2, j));
+				if (!isNaN(en)) val = val.substr(0, i) + String.fromCharCode(en) + val.substr(j + 1);
+			} else {
+				en = val.substring(i + 1, j);
+				if (cfg.entities[en] || en == amp)
+					val = val.substr(0, i) + (cfg.entities[en] || '&') + val.substr(j + 1);
+			}
+		}
+		return val;
+	}
+	this.getUrl = url => {
+		if (url[0] == '/') {
+			if (url[1] == '/') url = this.options.prot + ':' + url;
+			else if (this.domain) url = this.domain + url;
+		} else if (this.domain && url.indexOf('data:') != 0 && !url.includes('://'))
+			url = this.domain + '/' + url;
+		return url;
+	}
+	this.isClose = () => this.data[this.i] == '>' || (this.data[this.i] == '/' && this.data[this.i + 1] == '>');
+	this.section = () => this.data.substring(this.start, this.i);
+	this.parent = () => this.STACK[this.STACK.length - 1];
+	this.siblings = () => this.STACK.length ? this.parent().children : this.DOM;
+}
+MpHtmlParser.prototype.parse = function() {
+	if (emoji) this.data = emoji.parseEmoji(this.data);
+	for (var c; c = this.data[this.i]; this.i++)
+		this.state(c);
+	if (this.state == this.Text) this.setText();
+	while (this.STACK.length) this.popNode(this.STACK.pop());
+	return this.DOM;
+}
+// 设置属性
+MpHtmlParser.prototype.setAttr = function() {
+	var name = this.attrName.toLowerCase(),
+		val = this.attrVal;
+	if (cfg.boolAttrs[name]) this.attrs[name] = 'T';
+	else if (val) {
+		if (name == 'src' || (name == 'data-src' && !this.attrs.src)) this.attrs.src = this.getUrl(this.decode(val, 'amp'));
+		else if (name == 'href' || name == 'style') this.attrs[name] = this.decode(val, 'amp');
+		else if (name.substr(0, 5) != 'data-') this.attrs[name] = val;
+	}
+	this.attrVal = '';
+	while (blankChar[this.data[this.i]]) this.i++;
+	if (this.isClose()) this.setNode();
+	else {
+		this.start = this.i;
+		this.state = this.AttrName;
+	}
+}
+// 设置文本节点
+MpHtmlParser.prototype.setText = function() {
+	var back, text = this.section();
+	if (!text) return;
+	text = (cfg.onText && cfg.onText(text, () => back = true)) || text;
+	if (back) {
+		this.data = this.data.substr(0, this.start) + text + this.data.substr(this.i);
+		let j = this.start + text.length;
+		for (this.i = this.start; this.i < j; this.i++) this.state(this.data[this.i]);
+		return;
+	}
+	if (!this.pre) {
+		// 合并空白符
+		var flag, tmp = [];
+		for (let i = text.length, c; c = text[--i];)
+			if (!blankChar[c]) {
+				tmp.unshift(c);
+				if (!flag) flag = 1;
+			} else {
+				if (tmp[0] != ' ') tmp.unshift(' ');
+				if (c == '\n' && flag == void 0) flag = 0;
+			}
+		if (flag == 0) return;
+		text = tmp.join('');
+	}
+	this.siblings().push({
+		type: 'text',
+		text: this.decode(text)
+	});
+}
+// 设置元素节点
+MpHtmlParser.prototype.setNode = function() {
+	var node = {
+			name: this.tagName.toLowerCase(),
+			attrs: this.attrs
+		},
+		close = cfg.selfClosingTags[node.name];
+	if (this.options.nodes.length) node.type = 'node';
+	this.attrs = {};
+	if (!cfg.ignoreTags[node.name]) {
+		// 处理属性
+		var attrs = node.attrs,
+			style = this.CssHandler.match(node.name, attrs, node) + (attrs.style || ''),
+			styleObj = {};
+		if (attrs.id) {
+			if (this.options.compress & 1) attrs.id = void 0;
+			else if (this.options.useAnchor) this.bubble();
+		}
+		if ((this.options.compress & 2) && attrs.class) attrs.class = void 0;
+		switch (node.name) {
+			case 'a':
+			case 'ad': // #ifdef APP-PLUS
+			case 'iframe':
+				// #endif
+				this.bubble();
+				break;
+			case 'font':
+				if (attrs.color) {
+					styleObj['color'] = attrs.color;
+					attrs.color = void 0;
+				}
+				if (attrs.face) {
+					styleObj['font-family'] = attrs.face;
+					attrs.face = void 0;
+				}
+				if (attrs.size) {
+					var size = parseInt(attrs.size);
+					if (size < 1) size = 1;
+					else if (size > 7) size = 7;
+					var map = ['xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large'];
+					styleObj['font-size'] = map[size - 1];
+					attrs.size = void 0;
+				}
+				break;
+			case 'embed':
+				// #ifndef APP-PLUS
+				var src = node.attrs.src || '',
+					type = node.attrs.type || '';
+				if (type.includes('video') || src.includes('.mp4') || src.includes('.3gp') || src.includes('.m3u8'))
+					node.name = 'video';
+				else if (type.includes('audio') || src.includes('.m4a') || src.includes('.wav') || src.includes('.mp3') || src.includes(
+						'.aac'))
+					node.name = 'audio';
+				else break;
+				if (node.attrs.autostart)
+					node.attrs.autoplay = 'T';
+				node.attrs.controls = 'T';
+				// #endif
+				// #ifdef APP-PLUS
+				this.bubble();
+				break;
+				// #endif
+			case 'video':
+			case 'audio':
+				if (!attrs.id) attrs.id = node.name + (++this[`${node.name}Num`]);
+				else this[`${node.name}Num`]++;
+				if (node.name == 'video') {
+					if (this.videoNum > 3)
+						node.lazyLoad = 1;
+					if (attrs.width) {
+						styleObj.width = parseFloat(attrs.width) + (attrs.width.includes('%') ? '%' : 'px');
+						attrs.width = void 0;
+					}
+					if (attrs.height) {
+						styleObj.height = parseFloat(attrs.height) + (attrs.height.includes('%') ? '%' : 'px');
+						attrs.height = void 0;
+					}
+				}
+				if (!attrs.controls && !attrs.autoplay) attrs.controls = 'T';
+				attrs.source = [];
+				if (attrs.src) {
+					attrs.source.push(attrs.src);
+					attrs.src = void 0;
+				}
+				this.bubble();
+				break;
+			case 'td':
+			case 'th':
+				if (attrs.colspan || attrs.rowspan)
+					for (var k = this.STACK.length, item; item = this.STACK[--k];)
+						if (item.name == 'table') {
+							item.flag = 1;
+							break;
+						}
+		}
+		if (attrs.align) {
+			if (node.name == 'table') {
+				if (attrs.align == 'center') styleObj['margin-inline-start'] = styleObj['margin-inline-end'] = 'auto';
+				else styleObj['float'] = attrs.align;
+			} else styleObj['text-align'] = attrs.align;
+			attrs.align = void 0;
+		}
+		// 压缩 style
+		var styles = style.split(';');
+		style = '';
+		for (var i = 0, len = styles.length; i < len; i++) {
+			var info = styles[i].split(':');
+			if (info.length < 2) continue;
+			let key = info[0].trim().toLowerCase(),
+				value = info.slice(1).join(':').trim();
+			if (value[0] == '-' || value.includes('safe'))
+				style += `;${key}:${value}`;
+			else if (!styleObj[key] || value.includes('import') || !styleObj[key].includes('import'))
+				styleObj[key] = value;
+		}
+		if (node.name == 'img') {
+			if (attrs.src && !attrs.ignore) {
+				if (this.bubble())
+					attrs.i = (this.imgNum++).toString();
+				else attrs.ignore = 'T';
+			}
+			if (attrs.ignore) {
+				style += ';-webkit-touch-callout:none';
+				styleObj['max-width'] = '100%';
+			}
+			var width;
+			if (styleObj.width) width = styleObj.width;
+			else if (attrs.width) width = attrs.width.includes('%') ? attrs.width : parseFloat(attrs.width) + 'px';
+			if (width) {
+				styleObj.width = width;
+				attrs.width = '100%';
+				if (parseInt(width) > windowWidth) {
+					styleObj.height = '';
+					if (attrs.height) attrs.height = void 0;
+				}
+			}
+			if (styleObj.height) {
+				attrs.height = styleObj.height;
+				styleObj.height = '';
+			} else if (attrs.height && !attrs.height.includes('%'))
+				attrs.height = parseFloat(attrs.height) + 'px';
+		}
+		for (var key in styleObj) {
+			var value = styleObj[key];
+			if (!value) continue;
+			if (key.includes('flex') || key == 'order' || key == 'self-align') node.c = 1;
+			// 填充链接
+			if (value.includes('url')) {
+				var j = value.indexOf('(');
+				if (j++ != -1) {
+					while (value[j] == '"' || value[j] == "'" || blankChar[value[j]]) j++;
+					value = value.substr(0, j) + this.getUrl(value.substr(j));
+				}
+			}
+			// 转换 rpx
+			else if (value.includes('rpx'))
+				value = value.replace(/[0-9.]+\s*rpx/g, $ => parseFloat($) * windowWidth / 750 + 'px');
+			else if (key == 'white-space' && value.includes('pre') && !close)
+				this.pre = node.pre = true;
+			style += `;${key}:${value}`;
+		}
+		style = style.substr(1);
+		if (style) attrs.style = style;
+		if (!close) {
+			node.children = [];
+			if (node.name == 'pre' && cfg.highlight) {
+				this.remove(node);
+				this.pre = node.pre = true;
+			}
+			this.siblings().push(node);
+			this.STACK.push(node);
+		} else if (!cfg.filter || cfg.filter(node, this) != false)
+			this.siblings().push(node);
+	} else {
+		if (!close) this.remove(node);
+		else if (node.name == 'source') {
+			var parent = this.parent();
+			if (parent && (parent.name == 'video' || parent.name == 'audio') && node.attrs.src)
+				parent.attrs.source.push(node.attrs.src);
+		} else if (node.name == 'base' && !this.domain) this.domain = node.attrs.href;
+	}
+	if (this.data[this.i] == '/') this.i++;
+	this.start = this.i + 1;
+	this.state = this.Text;
+}
+// 移除标签
+MpHtmlParser.prototype.remove = function(node) {
+	var name = node.name,
+		j = this.i;
+	// 处理 svg
+	var handleSvg = () => {
+		var src = this.data.substring(j, this.i + 1);
+		node.attrs.xmlns = 'http://www.w3.org/2000/svg';
+		for (var key in node.attrs) {
+			if (key == 'viewbox') src = ` viewBox="${node.attrs.viewbox}"` + src;
+			else if (key != 'style') src = ` ${key}="${node.attrs[key]}"` + src;
+		}
+		src = '<svg' + src;
+		var parent = this.parent();
+		if (node.attrs.width == '100%' && parent && (parent.attrs.style || '').includes('inline'))
+			parent.attrs.style = 'width:300px;max-width:100%;' + parent.attrs.style;
+		this.siblings().push({
+			name: 'img',
+			attrs: {
+				src: 'data:image/svg+xml;utf8,' + src.replace(/#/g, '%23'),
+				style: node.attrs.style,
+				ignore: 'T'
+			}
+		})
+	}
+	if (node.name == 'svg' && this.data[j] == '/') return handleSvg(this.i++);
+	while (1) {
+		if ((this.i = this.data.indexOf('</', this.i + 1)) == -1) {
+			if (name == 'pre' || name == 'svg') this.i = j;
+			else this.i = this.data.length;
+			return;
+		}
+		this.start = (this.i += 2);
+		while (!blankChar[this.data[this.i]] && !this.isClose()) this.i++;
+		if (this.section().toLowerCase() == name) {
+			// 代码块高亮
+			if (name == 'pre') {
+				this.data = this.data.substr(0, j + 1) + cfg.highlight(this.data.substring(j + 1, this.i - 5), node.attrs) + this.data
+					.substr(this.i - 5);
+				return this.i = j;
+			} else if (name == 'style')
+				this.CssHandler.getStyle(this.data.substring(j + 1, this.i - 7));
+			else if (name == 'title')
+				this.DOM.title = this.data.substring(j + 1, this.i - 7);
+			if ((this.i = this.data.indexOf('>', this.i)) == -1) this.i = this.data.length;
+			if (name == 'svg') handleSvg();
+			return;
+		}
+	}
+}
+// 节点出栈处理
+MpHtmlParser.prototype.popNode = function(node) {
+	// 空白符处理
+	if (node.pre) {
+		node.pre = this.pre = void 0;
+		for (let i = this.STACK.length; i--;)
+			if (this.STACK[i].pre)
+				this.pre = true;
+	}
+	var siblings = this.siblings(),
+		len = siblings.length,
+		childs = node.children;
+	if (node.name == 'head' || (cfg.filter && cfg.filter(node, this) == false))
+		return siblings.pop();
+	var attrs = node.attrs;
+	// 替换一些标签名
+	if (cfg.blockTags[node.name]) node.name = 'div';
+	else if (!cfg.trustTags[node.name]) node.name = 'span';
+	// 处理列表
+	if (node.c && (node.name == 'ul' || node.name == 'ol')) {
+		if ((node.attrs.style || '').includes('list-style:none')) {
+			for (let i = 0, child; child = childs[i++];)
+				if (child.name == 'li')
+					child.name = 'div';
+		} else if (node.name == 'ul') {
+			var floor = 1;
+			for (let i = this.STACK.length; i--;)
+				if (this.STACK[i].name == 'ul') floor++;
+			if (floor != 1)
+				for (let i = childs.length; i--;)
+					childs[i].floor = floor;
+		} else {
+			for (let i = 0, num = 1, child; child = childs[i++];)
+				if (child.name == 'li') {
+					child.type = 'ol';
+					child.num = ((num, type) => {
+						if (type == 'a') return String.fromCharCode(97 + (num - 1) % 26);
+						if (type == 'A') return String.fromCharCode(65 + (num - 1) % 26);
+						if (type == 'i' || type == 'I') {
+							num = (num - 1) % 99 + 1;
+							var one = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX'],
+								ten = ['X', 'XX', 'XXX', 'XL', 'L', 'LX', 'LXX', 'LXXX', 'XC'],
+								res = (ten[Math.floor(num / 10) - 1] || '') + (one[num % 10 - 1] || '');
+							if (type == 'i') return res.toLowerCase();
+							return res;
+						}
+						return num;
+					})(num++, attrs.type) + '.';
+				}
+		}
+	}
+	// 处理表格
+	if (node.name == 'table') {
+		var padding = parseFloat(attrs.cellpadding),
+			spacing = parseFloat(attrs.cellspacing),
+			border = parseFloat(attrs.border);
+		if (node.c) {
+			if (isNaN(padding)) padding = 2;
+			if (isNaN(spacing)) spacing = 2;
+		}
+		if (border) attrs.style = `border:${border}px solid gray;${attrs.style || ''}`;
+		if (node.flag && node.c) {
+			// 有 colspan 或 rowspan 且含有链接的表格转为 grid 布局实现
+			attrs.style = `${attrs.style || ''};${spacing ? `;grid-gap:${spacing}px` : ';border-left:0;border-top:0'}`;
+			var row = 1,
+				col = 1,
+				colNum,
+				trs = [],
+				children = [],
+				map = {};
+			(function f(ns) {
+				for (var i = 0; i < ns.length; i++) {
+					if (ns[i].name == 'tr') trs.push(ns[i]);
+					else f(ns[i].children || []);
+				}
+			})(node.children)
+			for (let i = 0; i < trs.length; i++) {
+				for (let j = 0, td; td = trs[i].children[j]; j++) {
+					if (td.name == 'td' || td.name == 'th') {
+						while (map[row + '.' + col]) col++;
+						var cell = {
+							name: 'div',
+							c: 1,
+							attrs: {
+								style: (td.attrs.style || '') + (border ? `;border:${border}px solid gray` + (spacing ? '' :
+									';border-right:0;border-bottom:0') : '') + (padding ? `;padding:${padding}px` : '')
+							},
+							children: td.children
+						}
+						if (td.attrs.colspan) {
+							cell.attrs.style += ';grid-column-start:' + col + ';grid-column-end:' + (col + parseInt(td.attrs.colspan));
+							if (!td.attrs.rowspan) cell.attrs.style += ';grid-row-start:' + row + ';grid-row-end:' + (row + 1);
+							col += parseInt(td.attrs.colspan) - 1;
+						}
+						if (td.attrs.rowspan) {
+							cell.attrs.style += ';grid-row-start:' + row + ';grid-row-end:' + (row + parseInt(td.attrs.rowspan));
+							if (!td.attrs.colspan) cell.attrs.style += ';grid-column-start:' + col + ';grid-column-end:' + (col + 1);
+							for (var k = 1; k < td.attrs.rowspan; k++) map[(row + k) + '.' + col] = 1;
+						}
+						children.push(cell);
+						col++;
+					}
+				}
+				if (!colNum) {
+					colNum = col - 1;
+					attrs.style += `;grid-template-columns:repeat(${colNum},auto)`
+				}
+				col = 1;
+				row++;
+			}
+			node.children = children;
+		} else {
+			attrs.style = `border-spacing:${spacing}px;${attrs.style || ''}`;
+			if (border || padding)
+				(function f(ns) {
+					for (var i = 0, n; n = ns[i]; i++) {
+						if (n.name == 'th' || n.name == 'td') {
+							if (border) n.attrs.style = `border:${border}px solid gray;${n.attrs.style || ''}`;
+							if (padding) n.attrs.style = `padding:${padding}px;${n.attrs.style || ''}`;
+						} else f(n.children || []);
+					}
+				})(childs)
+		}
+		if (this.options.autoscroll) {
+			var table = Object.assign({}, node);
+			node.name = 'div';
+			node.attrs = {
+				style: 'overflow:scroll'
+			}
+			node.children = [table];
+		}
+	}
+	this.CssHandler.pop && this.CssHandler.pop(node);
+	// 自动压缩
+	if (node.name == 'div' && !Object.keys(attrs).length && childs.length == 1 && childs[0].name == 'div')
+		siblings[len - 1] = childs[0];
+}
+// 状态机
+MpHtmlParser.prototype.Text = function(c) {
+	if (c == '<') {
+		var next = this.data[this.i + 1],
+			isLetter = c => (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z');
+		if (isLetter(next)) {
+			this.setText();
+			this.start = this.i + 1;
+			this.state = this.TagName;
+		} else if (next == '/') {
+			this.setText();
+			if (isLetter(this.data[++this.i + 1])) {
+				this.start = this.i + 1;
+				this.state = this.EndTag;
+			} else this.Comment();
+		} else if (next == '!' || next == '?') {
+			this.setText();
+			this.Comment();
+		}
+	}
+}
+MpHtmlParser.prototype.Comment = function() {
+	var key;
+	if (this.data.substring(this.i + 2, this.i + 4) == '--') key = '-->';
+	else if (this.data.substring(this.i + 2, this.i + 9) == '[CDATA[') key = ']]>';
+	else key = '>';
+	if ((this.i = this.data.indexOf(key, this.i + 2)) == -1) this.i = this.data.length;
+	else this.i += key.length - 1;
+	this.start = this.i + 1;
+	this.state = this.Text;
+}
+MpHtmlParser.prototype.TagName = function(c) {
+	if (blankChar[c]) {
+		this.tagName = this.section();
+		while (blankChar[this.data[this.i]]) this.i++;
+		if (this.isClose()) this.setNode();
+		else {
+			this.start = this.i;
+			this.state = this.AttrName;
+		}
+	} else if (this.isClose()) {
+		this.tagName = this.section();
+		this.setNode();
+	}
+}
+MpHtmlParser.prototype.AttrName = function(c) {
+	if (c == '=' || blankChar[c] || this.isClose()) {
+		this.attrName = this.section();
+		if (blankChar[c])
+			while (blankChar[this.data[++this.i]]);
+		if (this.data[this.i] == '=') {
+			while (blankChar[this.data[++this.i]]);
+			this.start = this.i--;
+			this.state = this.AttrValue;
+		} else this.setAttr();
+	}
+}
+MpHtmlParser.prototype.AttrValue = function(c) {
+	if (c == '"' || c == "'") {
+		this.start++;
+		if ((this.i = this.data.indexOf(c, this.i + 1)) == -1) return this.i = this.data.length;
+		this.attrVal = this.section();
+		this.i++;
+	} else {
+		for (; !blankChar[this.data[this.i]] && !this.isClose(); this.i++);
+		this.attrVal = this.section();
+	}
+	this.setAttr();
+}
+MpHtmlParser.prototype.EndTag = function(c) {
+	if (blankChar[c] || c == '>' || c == '/') {
+		var name = this.section().toLowerCase();
+		for (var i = this.STACK.length; i--;)
+			if (this.STACK[i].name == name) break;
+		if (i != -1) {
+			var node;
+			while ((node = this.STACK.pop()).name != name) this.popNode(node);
+			this.popNode(node);
+		} else if (name == 'p' || name == 'br')
+			this.siblings().push({
+				name,
+				attrs: {}
+			});
+		this.i = this.data.indexOf('>', this.i);
+		this.start = this.i + 1;
+		if (this.i == -1) this.i = this.data.length;
+		else this.state = this.Text;
+	}
+}
+module.exports = MpHtmlParser;

uview-ui/components/u-parse/libs/config.js

@@ -0,0 +1,80 @@
+/* 配置文件 */
+var cfg = {
+	// 出错占位图
+	errorImg: null,
+	// 过滤器函数
+	filter: null,
+	// 代码高亮函数
+	highlight: null,
+	// 文本处理函数
+	onText: null,
+	// 实体编码列表
+	entities: {
+		quot: '"',
+		apos: "'",
+		semi: ';',
+		nbsp: '\xA0',
+		ensp: '\u2002',
+		emsp: '\u2003',
+		ndash: '–',
+		mdash: '—',
+		middot: '·',
+		lsquo: '‘',
+		rsquo: '’',
+		ldquo: '“',
+		rdquo: '”',
+		bull: '•',
+		hellip: '…'
+	},
+	blankChar: makeMap(' ,\xA0,\t,\r,\n,\f'),
+	boolAttrs: makeMap('allowfullscreen,autoplay,autostart,controls,ignore,loop,muted'),
+	// 块级标签，将被转为 div
+	blockTags: makeMap('address,article,aside,body,caption,center,cite,footer,header,html,nav,pre,section'),
+	// 将被移除的标签
+	ignoreTags: makeMap('area,base,canvas,frame,iframe,input,link,map,meta,param,script,source,style,svg,textarea,title,track,wbr'),
+	// 只能被 rich-text 显示的标签
+	richOnlyTags: makeMap('a,colgroup,fieldset,legend'),
+	// 自闭合的标签
+	selfClosingTags: makeMap('area,base,br,col,circle,ellipse,embed,frame,hr,img,input,line,link,meta,param,path,polygon,rect,source,track,use,wbr'),
+	// 信任的标签
+	trustTags: makeMap('a,abbr,ad,audio,b,blockquote,br,code,col,colgroup,dd,del,dl,dt,div,em,fieldset,h1,h2,h3,h4,h5,h6,hr,i,img,ins,label,legend,li,ol,p,q,source,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,title,ul,video'),
+	// 默认的标签样式
+	userAgentStyles: {
+		address: 'font-style:italic',
+		big: 'display:inline;font-size:1.2em',
+		blockquote: 'background-color:#f6f6f6;border-left:3px solid #dbdbdb;color:#6c6c6c;padding:5px 0 5px 10px',
+		caption: 'display:table-caption;text-align:center',
+		center: 'text-align:center',
+		cite: 'font-style:italic',
+		dd: 'margin-left:40px',
+		mark: 'background-color:yellow',
+		pre: 'font-family:monospace;white-space:pre;overflow:scroll',
+		s: 'text-decoration:line-through',
+		small: 'display:inline;font-size:0.8em',
+		u: 'text-decoration:underline'
+	}
+}
+
+function makeMap(str) {
+	var map = Object.create(null),
+		list = str.split(',');
+	for (var i = list.length; i--;)
+		map[list[i]] = true;
+	return map;
+}
+
+// #ifdef MP-WEIXIN
+if (wx.canIUse('editor')) {
+	cfg.blockTags.pre = void 0;
+	cfg.ignoreTags.rp = true;
+	Object.assign(cfg.richOnlyTags, makeMap('bdi,bdo,caption,rt,ruby'));
+	Object.assign(cfg.trustTags, makeMap('bdi,bdo,caption,pre,rt,ruby'));
+}
+// #endif
+
+// #ifdef APP-PLUS
+cfg.ignoreTags.iframe = void 0;
+Object.assign(cfg.trustTags, makeMap('embed,iframe'));
+// #endif
+
+module.exports = cfg;

uview-ui/components/u-parse/libs/handler.wxs

@@ -0,0 +1,22 @@
+var inline = {
+	abbr: 1,
+	b: 1,
+	big: 1,
+	code: 1,
+	del: 1,
+	em: 1,
+	i: 1,
+	ins: 1,
+	label: 1,
+	q: 1,
+	small: 1,
+	span: 1,
+	strong: 1,
+	sub: 1,
+	sup: 1
+}
+module.exports = {
+	use: function(item) {
+		return !item.c && !inline[item.name] && (item.attrs.style || '').indexOf('display:inline') == -1
+	}
+}

uview-ui/components/u-parse/libs/trees.vue

@@ -0,0 +1,505 @@
+<template>
+	<view :class="'interlayer '+(c||'')" :style="s">
+		<block v-for="(n, i) in nodes" v-bind:key="i">
+			<!--图片-->
+			<view v-if="n.name=='img'" :class="'_img '+n.attrs.class" :style="n.attrs.style" :data-attrs="n.attrs" @tap.stop="imgtap">
+				<rich-text v-if="ctrl[i]!=0" :nodes="[{attrs:{src:loading&&(ctrl[i]||0)<2?loading:(lazyLoad&&!ctrl[i]?placeholder:(ctrl[i]==3?errorImg:n.attrs.src||'')),alt:n.attrs.alt||'',width:n.attrs.width||'',style:'-webkit-touch-callout:none;max-width:100%;display:block'+(n.attrs.height?';height:'+n.attrs.height:'')},name:'img'}]" />
+				<image class="_image" :src="lazyLoad&&!ctrl[i]?placeholder:n.attrs.src" :lazy-load="lazyLoad"
+				 :show-menu-by-longpress="!n.attrs.ignore" :data-i="i" :data-index="n.attrs.i" data-source="img" @load="loadImg"
+				 @error="error" />
+			</view>
+			<!--文本-->
+			<text v-else-if="n.type=='text'" decode>{{n.text}}</text>
+			<!--#ifndef MP-BAIDU-->
+			<text v-else-if="n.name=='br'">\n</text>
+			<!--#endif-->
+			<!--视频-->
+			<view v-else-if="((n.lazyLoad&&!n.attrs.autoplay)||(n.name=='video'&&!loadVideo))&&ctrl[i]==undefined" :id="n.attrs.id"
+			 :class="'_video '+(n.attrs.class||'')" :style="n.attrs.style" :data-i="i" @tap.stop="_loadVideo" />
+			<video v-else-if="n.name=='video'" :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :autoplay="n.attrs.autoplay||ctrl[i]==0"
+			 :controls="n.attrs.controls" :loop="n.attrs.loop" :muted="n.attrs.muted" :poster="n.attrs.poster" :src="n.attrs.source[ctrl[i]||0]"
+			 :unit-id="n.attrs['unit-id']" :data-id="n.attrs.id" :data-i="i" data-source="video" @error="error" @play="play" />
+			<!--音频-->
+			<audio v-else-if="n.name=='audio'" :ref="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :author="n.attrs.author"
+			 :autoplay="n.attrs.autoplay" :controls="n.attrs.controls" :loop="n.attrs.loop" :name="n.attrs.name" :poster="n.attrs.poster"
+			 :src="n.attrs.source[ctrl[i]||0]" :data-i="i" :data-id="n.attrs.id" data-source="audio" @error.native="error"
+			 @play.native="play" />
+			<!--链接-->
+			<view v-else-if="n.name=='a'" :id="n.attrs.id" :class="'_a '+(n.attrs.class||'')" hover-class="_hover" :style="n.attrs.style"
+			 :data-attrs="n.attrs" @tap.stop="linkpress">
+				<trees class="_span" c="_span" :nodes="n.children" />
+			</view>
+			<!--广告-->
+			<!--<ad v-else-if="n.name=='ad'" :class="n.attrs.class" :style="n.attrs.style" :unit-id="n.attrs['unit-id']" :appid="n.attrs.appid" :apid="n.attrs.apid" :type="n.attrs.type" :adpid="n.attrs.adpid" data-source="ad" @error="error" />-->
+			<!--列表-->
+			<view v-else-if="n.name=='li'" :id="n.attrs.id" :class="n.attrs.class" :style="(n.attrs.style||'')+';display:flex;flex-direction:row'">
+				<view v-if="n.type=='ol'" class="_ol-bef">{{n.num}}</view>
+				<view v-else class="_ul-bef">
+					<view v-if="n.floor%3==0" class="_ul-p1">█</view>
+					<view v-else-if="n.floor%3==2" class="_ul-p2" />
+					<view v-else class="_ul-p1" style="border-radius:50%">█</view>
+				</view>
+				<trees class="_li" c="_li" :nodes="n.children" :lazyLoad="lazyLoad" :loading="loading" />
+			</view>
+			<!--表格-->
+			<view v-else-if="n.name=='table'&&n.c&&n.flag" :id="n.attrs.id" :class="n.attrs.class" :style="(n.attrs.style||'')+';display:grid'">
+				<trees v-for="(cell,n) in n.children" v-bind:key="n" :class="cell.attrs.class" :c="cell.attrs.class" :style="cell.attrs.style"
+				 :s="cell.attrs.style" :nodes="cell.children" />
+			</view>
+			<view v-else-if="n.name=='table'&&n.c" :id="n.attrs.id" :class="n.attrs.class" :style="(n.attrs.style||'')+';display:table'">
+				<view v-for="(tbody, o) in n.children" v-bind:key="o" :class="tbody.attrs.class" :style="(tbody.attrs.style||'')+(tbody.name[0]=='t'?';display:table-'+(tbody.name=='tr'?'row':'row-group'):'')">
+					<view v-for="(tr, p) in tbody.children" v-bind:key="p" :class="tr.attrs.class" :style="(tr.attrs.style||'')+(tr.name[0]=='t'?';display:table-'+(tr.name=='tr'?'row':'cell'):'')">
+						<trees v-if="tr.name=='td'" :nodes="tr.children" />
+						<trees v-else v-for="(td, q) in tr.children" v-bind:key="q" :class="td.attrs.class" :c="td.attrs.class" :style="(td.attrs.style||'')+(td.name[0]=='t'?';display:table-'+(td.name=='tr'?'row':'cell'):'')"
+						 :s="(td.attrs.style||'')+(td.name[0]=='t'?';display:table-'+(td.name=='tr'?'row':'cell'):'')" :nodes="td.children" />
+					</view>
+				</view>
+			</view>
+			<!--#ifdef APP-PLUS-->
+			<iframe v-else-if="n.name=='iframe'" :style="n.attrs.style" :allowfullscreen="n.attrs.allowfullscreen" :frameborder="n.attrs.frameborder"
+			 :width="n.attrs.width" :height="n.attrs.height" :src="n.attrs.src" />
+			<embed v-else-if="n.name=='embed'" :style="n.attrs.style" :width="n.attrs.width" :height="n.attrs.height" :src="n.attrs.src" />
+			<!--#endif-->
+			<!--富文本-->
+			<!--#ifdef MP-WEIXIN || MP-QQ || APP-PLUS-->
+			<rich-text v-else-if="handler.use(n)" :id="n.attrs.id" :class="'_p __'+n.name" :nodes="[n]" />
+			<!--#endif-->
+			<!--#ifndef MP-WEIXIN || MP-QQ || APP-PLUS-->
+			<rich-text v-else-if="!n.c" :id="n.attrs.id" :nodes="[n]" style="display:inline" />
+			<!--#endif-->
+			<trees v-else :class="(n.attrs.id||'')+' _'+n.name+' '+(n.attrs.class||'')" :c="(n.attrs.id||'')+' _'+n.name+' '+(n.attrs.class||'')"
+			 :style="n.attrs.style" :s="n.attrs.style" :nodes="n.children" :lazyLoad="lazyLoad" :loading="loading" />
+		</block>
+	</view>
+</template>
+<script module="handler" lang="wxs" src="./handler.wxs"></script>
+<script>
+	global.Parser = {};
+	import trees from './trees'
+	const errorImg = require('../libs/config.js').errorImg;
+	export default {
+		components: {
+			trees
+		},
+		name: 'trees',
+		data() {
+			return {
+				ctrl: [],
+				placeholder: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="225"/>',
+				errorImg,
+				loadVideo: typeof plus == 'undefined',
+				// #ifndef MP-ALIPAY
+				c: '',
+				s: ''
+				// #endif
+			}
+		},
+		props: {
+			nodes: Array,
+			lazyLoad: Boolean,
+			loading: String,
+			// #ifdef MP-ALIPAY
+			c: String,
+			s: String
+			// #endif
+		},
+		mounted() {
+			for (this.top = this.$parent; this.top.$options.name != 'parser'; this.top = this.top.$parent);
+			this.init();
+		},
+		// #ifdef APP-PLUS
+		beforeDestroy() {
+			this.observer && this.observer.disconnect();
+		},
+		// #endif
+		methods: {
+			init() {
+				for (var i = this.nodes.length, n; n = this.nodes[--i];) {
+					if (n.name == 'img') {
+						this.top.imgList.setItem(n.attrs.i, n.attrs['original-src'] || n.attrs.src);
+						// #ifdef APP-PLUS
+						if (this.lazyLoad && !this.observer) {
+							this.observer = uni.createIntersectionObserver(this).relativeToViewport({
+								top: 500,
+								bottom: 500
+							});
+							setTimeout(() => {
+								this.observer.observe('._img', res => {
+									if (res.intersectionRatio) {
+										for (var j = this.nodes.length; j--;)
+											if (this.nodes[j].name == 'img')
+												this.$set(this.ctrl, j, 1);
+										this.observer.disconnect();
+									}
+								})
+							}, 0)
+						}
+						// #endif
+					} else if (n.name == 'video' || n.name == 'audio') {
+						var ctx;
+						if (n.name == 'video') {
+							ctx = uni.createVideoContext(n.attrs.id
+								// #ifndef MP-BAIDU
+								, this
+								// #endif
+							);
+						} else if (this.$refs[n.attrs.id])
+							ctx = this.$refs[n.attrs.id][0];
+						if (ctx) {
+							ctx.id = n.attrs.id;
+							this.top.videoContexts.push(ctx);
+						}
+					}
+				}
+				// #ifdef APP-PLUS
+				// APP 上避免 video 错位需要延时渲染
+				setTimeout(() => {
+					this.loadVideo = true;
+				}, 1000)
+				// #endif
+			},
+			play(e) {
+				var contexts = this.top.videoContexts;
+				if (contexts.length > 1 && this.top.autopause)
+					for (var i = contexts.length; i--;)
+						if (contexts[i].id != e.currentTarget.dataset.id)
+							contexts[i].pause();
+			},
+			imgtap(e) {
+				var attrs = e.currentTarget.dataset.attrs;
+				if (!attrs.ignore) {
+					var preview = true,
+						data = {
+							id: e.target.id,
+							src: attrs.src,
+							ignore: () => preview = false
+						};
+					global.Parser.onImgtap && global.Parser.onImgtap(data);
+					this.top.$emit('imgtap', data);
+					if (preview) {
+						var urls = this.top.imgList,
+							current = urls[attrs.i] ? parseInt(attrs.i) : (urls = [attrs.src], 0);
+						uni.previewImage({
+							current,
+							urls
+						})
+					}
+				}
+			},
+			loadImg(e) {
+				var i = e.currentTarget.dataset.i;
+				if (this.lazyLoad && !this.ctrl[i]) {
+					// #ifdef QUICKAPP-WEBVIEW
+					this.$set(this.ctrl, i, 0);
+					this.$nextTick(function() {
+						// #endif
+						// #ifndef APP-PLUS
+						this.$set(this.ctrl, i, 1);
+						// #endif
+						// #ifdef QUICKAPP-WEBVIEW
+					})
+					// #endif
+				} else if (this.loading && this.ctrl[i] != 2) {
+					// #ifdef QUICKAPP-WEBVIEW
+					this.$set(this.ctrl, i, 0);
+					this.$nextTick(function() {
+						// #endif
+						this.$set(this.ctrl, i, 2);
+						// #ifdef QUICKAPP-WEBVIEW
+					})
+					// #endif
+				}
+			},
+			linkpress(e) {
+				var jump = true,
+					attrs = e.currentTarget.dataset.attrs;
+				attrs.ignore = () => jump = false;
+				global.Parser.onLinkpress && global.Parser.onLinkpress(attrs);
+				this.top.$emit('linkpress', attrs);
+				if (jump) {
+					// #ifdef MP
+					if (attrs['app-id']) {
+						return uni.navigateToMiniProgram({
+							appId: attrs['app-id'],
+							path: attrs.path
+						})
+					}
+					// #endif
+					if (attrs.href) {
+						if (attrs.href[0] == '#') {
+							if (this.top.useAnchor)
+								this.top.navigateTo({
+									id: attrs.href.substring(1)
+								})
+						} else if (attrs.href.indexOf('http') == 0 || attrs.href.indexOf('//') == 0) {
+							// #ifdef APP-PLUS
+							plus.runtime.openWeb(attrs.href);
+							// #endif
+							// #ifndef APP-PLUS
+							uni.setClipboardData({
+								data: attrs.href,
+								success: () =>
+									uni.showToast({
+										title: '链接已复制'
+									})
+							})
+							// #endif
+						} else
+							uni.navigateTo({
+								url: attrs.href,
+								fail() {
+									uni.switchTab({
+										url: attrs.href,
+									})
+								}
+							})
+					}
+				}
+			},
+			error(e) {
+				var target = e.currentTarget,
+					source = target.dataset.source,
+					i = target.dataset.i;
+				if (source == 'video' || source == 'audio') {
+					// 加载其他 source
+					var index = this.ctrl[i] ? this.ctrl[i].i + 1 : 1;
+					if (index < this.nodes[i].attrs.source.length)
+						this.$set(this.ctrl, i, index);
+					if (e.detail.__args__)
+						e.detail = e.detail.__args__[0];
+				} else if (errorImg && source == 'img') {
+					this.top.imgList.setItem(target.dataset.index, errorImg);
+					this.$set(this.ctrl, i, 3);
+				}
+				this.top && this.top.$emit('error', {
+					source,
+					target,
+					errMsg: e.detail.errMsg
+				});
+			},
+			_loadVideo(e) {
+				this.$set(this.ctrl, e.target.dataset.i, 0);
+			}
+		}
+	}
+</script>
+
+<style>
+	/* 在这里引入自定义样式 */
+
+	/* 链接和图片效果 */
+	._a {
+		display: inline;
+		padding: 1.5px 0 1.5px 0;
+		color: #366092;
+		word-break: break-all;
+	}
+
+	._hover {
+		text-decoration: underline;
+		opacity: 0.7;
+	}
+
+	._img {
+		display: inline-block;
+		max-width: 100%;
+		overflow: hidden;
+	}
+
+	/* #ifdef MP-WEIXIN */
+	:host {
+		display: inline;
+	}
+
+	/* #endif */
+
+	/* #ifndef MP-ALIPAY || APP-PLUS */
+	.interlayer {
+		display: inherit;
+		flex-direction: inherit;
+		flex-wrap: inherit;
+		align-content: inherit;
+		align-items: inherit;
+		justify-content: inherit;
+		width: 100%;
+		white-space: inherit;
+	}
+
+	/* #endif */
+
+	._b,
+	._strong {
+		font-weight: bold;
+	}
+
+	/* #ifndef MP-ALIPAY */
+	._blockquote,
+	._div,
+	._p,
+	._ol,
+	._ul,
+	._li {
+		display: block;
+	}
+
+	/* #endif */
+
+	._code {
+		font-family: monospace;
+	}
+
+	._del {
+		text-decoration: line-through;
+	}
+
+	._em,
+	._i {
+		font-style: italic;
+	}
+
+	._h1 {
+		font-size: 2em;
+	}
+
+	._h2 {
+		font-size: 1.5em;
+	}
+
+	._h3 {
+		font-size: 1.17em;
+	}
+
+	._h5 {
+		font-size: 0.83em;
+	}
+
+	._h6 {
+		font-size: 0.67em;
+	}
+
+	._h1,
+	._h2,
+	._h3,
+	._h4,
+	._h5,
+	._h6 {
+		display: block;
+		font-weight: bold;
+	}
+
+	._image {
+		display: block;
+		width: 100%;
+		height: 360px;
+		margin-top: -360px;
+		opacity: 0;
+	}
+
+	._ins {
+		text-decoration: underline;
+	}
+
+	._li {
+		flex: 1;
+		width: 0;
+	}
+
+	._ol-bef {
+		width: 36px;
+		margin-right: 5px;
+		text-align: right;
+	}
+
+	._ul-bef {
+		display: block;
+		margin: 0 12px 0 23px;
+		line-height: normal;
+	}
+
+	._ol-bef,
+	._ul-bef {
+		flex: none;
+		user-select: none;
+	}
+
+	._ul-p1 {
+		display: inline-block;
+		width: 0.3em;
+		height: 0.3em;
+		overflow: hidden;
+		line-height: 0.3em;
+	}
+
+	._ul-p2 {
+		display: inline-block;
+		width: 0.23em;
+		height: 0.23em;
+		border: 0.05em solid black;
+		border-radius: 50%;
+	}
+
+	._q::before {
+		content: '"';
+	}
+
+	._q::after {
+		content: '"';
+	}
+
+	._sub {
+		font-size: smaller;
+		vertical-align: sub;
+	}
+
+	._sup {
+		font-size: smaller;
+		vertical-align: super;
+	}
+
+	/* #ifdef MP-ALIPAY || APP-PLUS || QUICKAPP-WEBVIEW */
+	._abbr,
+	._b,
+	._code,
+	._del,
+	._em,
+	._i,
+	._ins,
+	._label,
+	._q,
+	._span,
+	._strong,
+	._sub,
+	._sup {
+		display: inline;
+	}
+
+	/* #endif */
+
+	/* #ifdef MP-WEIXIN || MP-QQ */
+	.__bdo,
+	.__bdi,
+	.__ruby,
+	.__rt {
+		display: inline-block;
+	}
+
+	/* #endif */
+	._video {
+		position: relative;
+		display: inline-block;
+		width: 300px;
+		height: 225px;
+		background-color: black;
+	}
+
+	._video::after {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		margin: -15px 0 0 -15px;
+		content: '';
+		border-color: transparent transparent transparent white;
+		border-style: solid;
+		border-width: 15px 0 15px 30px;
+	}
+</style>