second commit

.hbuilderx/launch.json

+{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
+  // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
+    "version": "0.0",
+    "configurations": [{
+     	"default" : 
+     	{
+     		"launchtype" : "local"
+     	},
+     	"mp-weixin" : 
+     	{
+     		"launchtype" : "local"
+     	},
+     	"type" : "uniCloud"
+     }
+    ]
+}

App.vue

+<script>
+	export default {
+		globalData: {
+			userInfo: null,
+			tabBar: [],
+			homePage: '/pages/login',
+			pages: ['/pages/login', '/pages/register', '/pages/guide_page1', '/pages/index', '/pages/recommend', '/pages/shopping_trolley', '/pages/my', '/pages/product_details1', '/pages/product_details2', '/pages/messages']
+		}
+	};
+</script>
+<style lang="scss">
+	
+	@import 'common/diygw-ui/iconfont.scss';
+	@import 'common/diygw-ui/index.scss';
+</style>

common/HttpService.js

+import ServiceBase from './ServiceBase';
+import Session from './Session';
+
+class Service extends ServiceBase {
+	constructor() {
+		super();
+		this.$$prefix = '';
+	}
+
+	/**
+	 * 初始化默认拦截器
+	 */
+	__initInterceptor() {}
+
+	//获取POST数据
+	postData(params, url) {
+		return this.post(url || this.$$path.data, params);
+	}
+
+	//获取GET数据
+	getData(params, url) {
+		return this.get(url || this.$$path.data, params);
+	}
+
+	//保存数据
+	saveData(params, url) {
+		return this.post(url || this.$$path.save, params);
+	}
+
+	//删除数据
+	delData(params, url) {
+		return this.post(url || this.$$path.del, params);
+	}
+}
+
+export default Service;

common/Login.js

+//登录相关方法
+var Login = {
+	//微信登录
+	weixin(thiz,dataset) {
+		if(uni.getUserProfile){
+			uni.getUserProfile({
+				lang: 'zh_CN',
+				desc: '用于登陆',
+				success: function (wxInfo) {
+					uni.login({
+						provider:'weixin',
+						success: function (res) {
+							let data={
+								code:res.code,
+								type: dataset.logintype,
+								userInfo: JSON.stringify(wxInfo.userInfo)
+							}
+							thiz.$http.post(dataset.loginurl,data).then(res=>{
+								if(res.code==200){
+									thiz.setData({
+										userInfo:res.data
+									})
+									thiz.$session.setUser(res.data)
+								}
+								if(thiz[dataset.callback]){
+									thiz[dataset.callback](res)
+								}
+							})
+						},
+						fail: function () {
+							wx.showModal({
+								title: '获取用户信息',
+								content: '请允许授权以便为您提供给服务',
+								success: function (res) {
+									if (res.confirm) {
+										thiz.navigateTo(dataset)
+									}
+								}
+							})
+						}
+					});
+				},
+				fail: function (res) {
+					wx.showModal({
+						title: '友情提示',
+						content: '已拒绝小程序获取信息',
+						showCancel: !1,
+					})
+				}
+			})
+		}else{
+			uni.showToast({
+				title: '登录失败，请在小程序上登录',
+				icon: 'none'
+			})
+		}
+	}
+}
+
+export default Login

common/Page.js

+import ValidateClazz from './Validate'
+import Login from './Login.js'
+import Pay from './Pay.js'
+export const Validate = (rules, messages) => new ValidateClazz(rules, messages)
+
+
+export function setData(dataset) {
+	for (let field in dataset) {
+		// 通过正则表达式  查找路径数据
+		const regex = /([\w$]+)|\[(:\d)\]/g
+		const patten = field.match(regex)
+		let result = this // 指向调用的数据 如data
+		// 遍历路径  逐级查找  最后一级用于直接赋值
+		for (let i = 0; i < patten.length - 1; i++) {
+		  const key = patten[i]
+		  result = result[key]
+		}
+		result[patten[patten.length - 1]] = dataset[field] 
+	}
+}
+
+export function navigateTo(e) {
+    let dataset = e.currentTarget?e.currentTarget.dataset:e
+	let  {id,type}= dataset
+	// #ifndef VUE3
+	let thiz = getApp().globalData.currentPage 
+	// #endif
+	// #ifdef VUE3
+	let thiz = this
+	// #endif
+	if(type == 'openmodal'){
+		thiz[id] = 'show'
+	}else if(type == 'closemodal'){
+		thiz[id] = ""
+	}else if(type == 'page'||type=='inner'||type=='href'){
+		thiz.$tools.navigateTo(dataset.url, dataset);
+	}else if(type=='submit'){
+		showToast('将执行表单提交动作')
+	}else if(type=='reset'){
+		showToast('将执行表单重置动作')
+	}else if(type=='tip'){
+		showToast(dataset.tip)
+	}else if(type=='confirm'){
+		uni.showModal({
+			title: '提示',
+			content: dataset.tip,
+			showCancel: !1,
+		});
+	}else if(type=='daohang'){
+		uni.openLocation({
+			latitude: Number(dataset.lat),
+			longitude: Number(dataset.lng),
+			address:dataset.address,
+			success: function () {
+				console.log('success');
+			}
+		});
+	}else if(type=='phone'){
+		thiz.$tools.makePhoneCall(e)
+	}else if(type=='previewImage'||type=='preview'){
+		uni.previewImage({
+			current: thiz.$tools.renderImage(dataset.img), // 当前显示图片的http链接
+			urls: [thiz.$tools.renderImage(dataset.img)] // 需要预览的图片http链接列表
+		})
+	}else if(type=='copy'){
+		uni.setClipboardData({
+			data: dataset.copy,
+			showToast:false,
+			success: function () {
+				showToast(dataset.tip||'复制成功','none')
+			}
+		});
+	}else if(type=='xcx'){
+		uni.navigateToMiniProgram({
+			appId: dataset.appid,
+			path: dataset.path,
+			success(res) {
+				// 打开成功
+			}
+		})
+	}else if(typeof thiz[type]=='function'){
+		thiz[type](dataset)
+	}else if(type=='login'){
+		let logintType = dataset.logintype;
+		if(Login[logintType]){
+			Login[logintType](thiz,dataset)
+		}else{
+			showToast(type+'登录有待实现')
+		}
+	}else if(type=='pay'){
+		Pay.pay(dataset)
+	}else{
+		showToast(type+'类型有待实现')
+	}
+}
+
+
+export function showModal(message,title='提示',iscancel=true) {
+	return new Promise((resolve) => {
+		uni.showModal({
+			title: title,
+			content: message,
+			showCancel: iscancel,
+			success: function (res) {
+				if (res.confirm) {
+					resolve(true)
+				} else if (res.cancel) {
+					resolve(false)
+				}
+			}
+		});
+    })
+}
+
+export function showToast(title,icon){
+	uni.showToast({
+		title: title,
+		icon: icon?icon:'none'
+	})
+}
+
+export function getPickerChildren(data,chindInex1,childIndex2){
+	if(chindInex1!=null && data[chindInex1] && data[chindInex1].children && data[chindInex1].children){
+		let children = data[chindInex1].children
+		//只判断一级
+		if(childIndex2==null){
+			if(children!=null && children.length>0){
+				return children.map(item=>item.label)
+			}else{
+				return []
+			}
+		}else{
+			//判断二级
+			//有可能并设置下级结点
+			if(children[childIndex2]==null){
+				return []
+			}
+			let children2 = children[childIndex2].children
+			if(children2!=null && children2.length>0){
+				return children2.map(item=>item.text)
+			}else{
+				return []
+			}
+		}
+	}else{
+		return []
+	}
+}
+
+
+//根据field获取数据
+export function getData(thiz,field){
+	// 通过正则表达式  查找路径数据
+	const regex = /([\w$]+)|\[(:\d)\]/g
+	const patten = field.match(regex)
+	let result = thiz // 指向调用的数据 如data
+	// 遍历路径  逐级查找  最后一级用于直接赋值
+	for (let i = 0; i < patten.length - 1; i++) {
+	  let key = patten[i]
+	  result = result[key]
+	}
+	return result[patten[patten.length - 1]]
+}
+export function uploadImage(thiz,field,fieldData,uploadUrl){
+	return new Promise((resolve) => {
+		if(!uploadUrl){
+			showToast('请配置上传地址')
+			resolve()
+			return;
+		}
+		uni.chooseImage({
+			sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
+			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有javascript:;
+			success: function (res) {
+				// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
+				let tempFilePaths = res.tempFilePaths;
+				for (let i = 0; i < tempFilePaths.length; i++) {
+					uni.uploadFile({
+						url: thiz.$http.setUrl(uploadUrl), //仅为示例，非真实的接口地址
+						filePath: tempFilePaths[0],
+						name: 'file',
+						header:{
+							Authorization : thiz.$session.getToken()||''
+						},
+						success(res) {
+							let data = thiz.$tools.fromJson(res.data);
+							let url = ''
+							if(data.url){
+								url = thiz.$tools.renderImage(data.url);
+							}
+							if(data.data &&thiz.$tools.isObject(data.data) && data.data.url){
+								url = thiz.$tools.renderImage(data.data.url);
+							}
+							let files = getData(thiz,fieldData).concat(url);
+							thiz.setData({
+								[fieldData]: files,
+								[field]: (files || []).join(',').replace(/^[]/, ''),
+							});
+							
+						},
+						complete(){
+							if(i==tempFilePaths.length-1){
+								resolve()
+							}
+						}
+					});
+				}
+			},
+		});
+	})
+}
+
+//页面点击时对参数进行了转义，要进行反转义
+export function getOption(option){
+	if(option !== null && typeof option === 'object'){
+		for (let key in option) {
+			option[key] = decodeURIComponent(option[key])
+		}
+	}
+	return option
+}
+
+export function setCurrentPage(page){
+    if(this.$session.getUser()){
+		page.userInfo = this.$session.getUser()
+	}
+	if(this.$session.getValue("redirect_page")){
+		let value = this.$session.getValue("redirect_page")
+		this.$session.setValue("redirect_page",null)
+		this.$tools.navigateTo(value.url, value);
+	}
+	getApp().globalData.currentPage = page
+}

common/Pay.js

+//微信小程序相关方法
+var Pay = {
+	async pay(param){
+		let page = getApp().globalData.currentPage
+		let session = page.$session;
+		if(!session.getToken() || !session.getUser().openid){
+			//如果参数自带openid跳过验证
+			if(!param.openid){ 
+				page.showToast('请先登录')
+				return;
+			}
+		}
+		if(!param.total){
+			page.showToast('请配置价格参数total')
+			return;
+		}
+		let data = await page.$http.post(param.url||'/api/wepay/order',{
+			total:param.total,
+			body:param.body,
+			openid:param.openid||session.getUser().openid,
+		},{},'json')
+		
+		if(data.code!=200){
+			page.showToast(data.msg)
+			return;
+		}
+		if(this[param.paytype]){
+			this[param.paytype](Object.assign(data,param))
+		}else{
+			page.showToast('请使用微信打开')
+			return;
+		}
+	},
+	//微信支付  
+	weixin(params = {}) {
+		uni.requestPayment({
+		  provider: 'wxpay',
+		  timeStamp: params.data.timeStamp,// 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
+		  nonceStr: params.data.nonceStr,// 支付签名随机串，不长于 32 位  
+		  package: params.data.package,// 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*） 
+		  signType: params.data.signType,// 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'  
+		  paySign: params.data.paySign,// 支付签名  
+		  success: res => {
+			  if(params.success && typeof params.success=='function'){
+				  params.success(res)
+			  }else{
+				  console.log('配置支付回调成功方法')
+			  }
+		  },
+		  fail: res => {
+			  if(params.fail && typeof params.fail=='function'){
+				  params.fail(res)
+			  }else{
+				  console.log('配置支付回调失败方法')
+			  }
+		  }
+		})
+	}
+}
+
+export default Pay
\ No newline at end of file

common/ServiceBase.js

+import __config from '../siteinfo'
+import Session from './Session'
+
+class ServiceBase {
+	constructor() {
+		Object.assign(this, {
+			$$basePath: __config.basePath
+		})
+		this.__init()
+	}
+
+	/**
+	 * __init
+	 */
+	__init() {
+		this.__initDefaults()
+		this.__initMethods()
+	}
+
+
+	
+	__initInterceptor(){
+		
+	}
+	/**
+	 * __initDefaults
+	 */
+	__initDefaults() {
+		// 方法名后缀字符串
+		this.suffix = ''
+
+		// 发起请求所支持的方法
+		this.instanceSource = {
+			method: [
+				'OPTIONS',
+				'GET',
+				'HEAD',
+				'POST',
+				'PUT',
+				'DELETE',
+				'TRACE',
+				'CONNECT',
+			]
+		}
+	}
+
+	/**
+	 * 遍历对象构造方法，方法名以小写字母+后缀名
+	 */
+	__initMethods() {
+		for (let key in this.instanceSource) {
+			this.instanceSource[key].forEach((method, index) => {
+				this[method.toLowerCase() + this.suffix] = (...args) => this.__defaultRequest(method, ...
+					args)
+			})
+		}
+	}
+
+	/**
+	 * 以uni.request作为底层方法
+	 * @param {String} method 请求方法
+	 * @param {String} url    接口地址
+	 * @param {Object} params 请求参数
+	 * @param {Object} header 设置请求的 header
+	 * @param {String} dataType 请求的数据类型
+	 */
+	__defaultRequest(method = '', url = '', params = {}, header = {}, dataType = 'json') {
+		const $$header = Object.assign({}, this.setHeaders(), header)
+		const $$url = this.setUrl(url,params)
+		if(params.url){
+			params.url = this.setUrl(params.url,params)
+		}
+
+		// 注入拦截器
+		const chainInterceptors = (promise, interceptors) => {
+			for (let i = 0, ii = interceptors.length; i < ii;) {
+				let thenFn = interceptors[i++]
+				let rejectFn = interceptors[i++]
+				promise = promise.then(thenFn, rejectFn)
+			}
+			return promise
+		}
+	
+
+		// 请求参数配置
+		const $$config = {
+			url: $$url,
+			data: params,
+			header: $$header,
+			method: method,
+			dataType: dataType,
+		}
+
+		let requestInterceptors = []
+		let responseInterceptors = []
+		let reversedInterceptors = this.setInterceptors()
+		let promise = this.__resolve($$config)
+
+		// 缓存拦截器
+		reversedInterceptors.forEach((n, i) => {
+			if (n.request || n.requestError) {
+				requestInterceptors.push(n.request, n.requestError)
+			}
+			if (n.response || n.responseError) {
+				responseInterceptors.unshift(n.response, n.responseError)
+			}
+		})
+
+		// 注入请求拦截器
+		promise = chainInterceptors(promise, requestInterceptors)
+
+		// 发起HTTPS请求
+		promise = promise.then(this.__http)
+
+		// 注入响应拦截器
+		promise = chainInterceptors(promise, responseInterceptors)
+
+		// 接口调用成功，res = {data: '开发者服务器返回的内容'}
+		promise = promise.then(res => res.data, err => err)
+
+		return promise
+	}
+
+	/**
+	 * __http - uni.request
+	 */
+	__http(obj) {
+		return new Promise((resolve, reject) => {
+			obj.success = (res) => resolve(res)
+			obj.fail = (res) => reject(res)
+			uni.request(obj)
+		})
+	}
+
+	/**
+	 * __resolve
+	 */
+	__resolve(res) {
+		return new Promise((resolve, reject) => {
+			resolve(res)
+		})
+	}
+
+	/**
+	 * __reject
+	 */
+	__reject(res) {
+		return new Promise((resolve, reject) => {
+			reject(res)
+		})
+	}
+
+	getPathValue(obj, desc) {
+	  var arr = desc.split('.');
+	  while (arr.length) {
+	    obj = obj[arr.shift()];
+	  }
+	  return obj;
+	}
+	
+	
+	getRestUrl(url,data){
+	  if(!data){
+		return url
+	  }else if(data !== null && typeof data === 'object'){
+		url = url.replace(/\{\{(.+?)\}\}/g, (_, key) => {
+			let name = key.trim()
+			return this.getPathValue(data,name)
+		})
+		url = url.replace(/\{(.+?)\}/g, (_, key) => {
+			let name = key.trim()
+			return this.getPathValue(data,name)
+		})
+		return url;
+	  }
+	  return url;
+	}
+	
+	/**
+	 * 设置请求路径
+	 */
+	setUrl(url,param) {
+	    let ishttp = /^http(s)?:\/\/.*/i.test(url);
+		url = this.getRestUrl(url,param)
+		if(ishttp){
+			return url
+		}
+		if(url.startsWith("/")||this.$$basePath.endsWith("/")){
+			return `${this.$$basePath}${this.$$prefix}${url}`
+		}else{
+			return `${this.$$basePath}/${this.$$prefix}${url}`
+		}
+	}
+
+	/**
+	 * 设置请求的 header , header 中不能设置 Referer
+	 */
+	setHeaders() {
+		return {
+			// 'Accept': 'application/json', 
+			// 'Content-type': 'application/json', 
+			'Content-type': 'application/x-www-form-urlencoded'
+		}
+	}
+
+	/**
+	 * 设置request拦截器
+	 */
+	setInterceptors() {
+		this.interceptors =  [{
+			request: (request) => {
+				request.header = request.header || {}
+				request.requestTimestamp = new Date().getTime()
+				if (Session.getToken()) {
+					request.header.Authorization = Session.getToken()
+				}
+				uni.showLoading({
+					title: request.data.loadmsg || '加载中...',
+				});
+				if (request.data['redirecturl']) {
+					Session.setRedirecturl(request.data['redirecturl']);
+					delete request.data['redirecturl'];
+				}
+				delete request.data['loadmsg'];
+				return request;
+			},
+			requestError: (requestError) => {
+				uni.hideToast()
+				return requestError
+			},
+			response: (response) => {
+				response.responseTimestamp = new Date().getTime()
+				uni.hideLoading();
+				if (response.data.code == 401||response.data.status == 401) {
+					Session.clearUser();
+					uni.reLaunch({
+						url: getApp().globalData.homePage
+					});
+				}
+				return response;
+			},
+			responseError: (responseError) => {
+				uni.hideLoading();
+				return responseError;
+			},
+		}]
+		this.__initInterceptor()
+		return this.interceptors
+	}
+}
+
+export default ServiceBase

common/Session.js

+var SESSION_KEY = 'user_session_diygw_com';
+var REDIRECT_SESSION_KEY = 'redirect_session_diygw_com';
+
+var Session = {
+	getRedirecturl() {
+		return uni.getStorageSync(REDIRECT_SESSION_KEY) || null;
+	},
+
+	setRedirecturl(url) {
+		uni.setStorageSync(REDIRECT_SESSION_KEY, url);
+	},
+	getUser() {
+		return uni.getStorageSync(SESSION_KEY) || null;
+	},
+
+	setUser(session) {
+		uni.setStorageSync(SESSION_KEY, session);
+	},
+
+	clearUser() {
+		uni.removeStorageSync(SESSION_KEY);
+	},
+
+	getToken() {
+		var userInfo = this.getUser();
+		return userInfo ? userInfo.token : null
+	},
+
+	getOpenId() {
+		var userInfo = this.getUser();
+		return userInfo ? userInfo.openid : null
+	},
+	
+	setValue(key,value) {
+		uni.setStorageSync(key, value);
+	},
+	
+	getValue(key){
+		return uni.getStorageSync(key) || null;
+	}
+	
+}
+
+export default Session

common/Tools.js

+
+import __config from '../siteinfo'
+
+class Tools {
+
+	constructor() {
+		Object.assign(this, {
+			$$basePath: __config.basePath
+		})
+	}
+
+	/**
+	 * 返回文件后缀
+	 * @param  {Object} file
+	 * @return {String}
+	 */
+	getFilenameExt(file) {
+		const types = file.name.split('.')
+		return types[types.length - 1]
+	}
+
+	getCurrentDate() {
+		const date = new Date();
+		const year = date.getFullYear()
+		const month = date.getMonth() + 1
+		const day = date.getDate()
+		return [year, month, day].join('-')
+	}
+
+	getCurrentTime() {
+		const date = new Date();
+		const hour = date.getHours()
+		const minute = date.getMinutes()
+		return [hour, minute].join(':')
+	}
+
+	/**
+	 * 返回指定范围内的一个整数
+	 * @param  {Number} min
+	 * @param  {Number} max
+	 * @return {String}
+	 */
+	rand(min, max) {
+		return Math.floor(Math.random() * (max - min + 1) + min)
+	}
+
+	/**
+	 * 生成字符串组合
+	 * @param  {Number} size
+	 * @return {String}
+	 */
+	randString(size) {
+		let result = ''
+		let allChar = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
+
+		size = size || 1
+
+		while (size--) {
+			result += allChar.charAt(this.rand(0, allChar.length - 1))
+		}
+
+		return result
+	}
+
+	/**
+	 * 生成文件名
+	 * @param  {Object} file
+	 * @return {String}
+	 */
+	randFilename(file) {
+		return this.randString(this.rand(10, 100)) + Date.parse(new Date()) + '.' + this.getFilenameExt(file)
+	}
+
+	/**
+	 * 判断某个元素是否为字符串
+	 * @param  {String}  value
+	 * @return {Boolean}
+	 */
+	isString(value) {
+		return typeof value === 'string'
+	}
+
+	/**
+	 * 判断某个元素是否为函数
+	 * @param  {Function}  value
+	 * @return {Boolean}
+	 */
+	isFunction(value) {
+		return this.type(value) === 'function'
+	}
+
+	/**
+	 * 判断某个元素是否为数组
+	 * @param  {Array}  value
+	 * @return {Boolean}
+	 */
+	isArray(value) {
+		return Array.isArray(value)
+	}
+
+	/**
+	 * 判断某个元素是否为对象
+	 * @param  {Obejct}  value
+	 * @return {Boolean}
+	 */
+	isObject(value) {
+		return value !== null && typeof value === 'object'
+	}
+
+	/**
+	 * 判断某个元素是否为数值
+	 * @param  {Number}  value
+	 * @return {Boolean}
+	 */
+	isNumber(value) {
+		return typeof value === 'number'
+	}
+
+	/**
+	 * 判断某个元素是否为日期
+	 * @param  {Date}  value
+	 * @return {Boolean}
+	 */
+	isDate(value) {
+		return this.type(value) === '[object Date]'
+	}
+
+	/**
+	 * 判断某个元素是否为正则表达式
+	 * @param  {RegExp}  value
+	 * @return {Boolean}
+	 */
+	isRegExp(value) {
+		return this.type(value) === '[object RegExp]'
+	}
+
+	/**
+	 * 判断某个元素是否为File对象
+	 * @param  {Object}  obj
+	 * @return {Boolean}
+	 */
+	isFile(obj) {
+		return this.type(obj) === '[object File]'
+	}
+
+	/**
+	 * 判断某个元素是否为FormData对象
+	 * @param  {Object}  obj
+	 * @return {Boolean}
+	 */
+	isFormData(obj) {
+		return this.type(obj) === '[object FormData]'
+	}
+
+	/**
+	 * 判断某个元素是否为Blob对象
+	 * @param  {Object}  obj
+	 * @return {Boolean}
+	 */
+	isBlob(obj) {
+		return this.type(obj) === '[object Blob]'
+	}
+
+	/**
+	 * 判断某个元素是否为布尔值
+	 * @param  {boolean}  value
+	 * @return {Boolean}
+	 */
+	isBoolean(value) {
+		return typeof value === 'boolean'
+	}
+
+	/**
+	 * 判断某个元素是否为Promise对象
+	 * @param  {Function}  obj
+	 * @return {Boolean}
+	 */
+	isPromiseLike(obj) {
+		return obj && this.isFunction(obj.then)
+	}
+
+	/**
+	 * 判断数组类型
+	 * @param  {Array}  value
+	 * @return {Boolean}
+	 */
+	isTypedArray(value) {
+		const TYPED_ARRAY_REGEXP =
+			/^\[object (?:Uint8|Uint8Clamped|Uint16|Uint32|Int8|Int16|Int32|Float32|Float64)Array\]$/
+		return value && this.isNumber(value.length) && TYPED_ARRAY_REGEXP.test(this.type(value))
+	}
+
+	/**
+	 * 判断某个元素是否为ArrayBuffer对象
+	 * @param  {Object}  obj
+	 * @return {Boolean}
+	 */
+	isArrayBuffer(obj) {
+		return this.type(obj) === '[object ArrayBuffer]'
+	}
+
+	/**
+	 * 判断某个元素是否为defined
+	 * @param  {undefined}  value
+	 * @return {Boolean}
+	 */
+	isDefined(value) {
+		return typeof value !== 'undefined'
+	}
+
+	/**
+	 * 判断某个元素是否为undefined
+	 * @param  {undefined}  value
+	 * @return {Boolean}
+	 */
+	isUndefined(value) {
+		return typeof value === 'undefined'
+	}
+
+	/**
+	 * 判断某个元素是否为null
+	 * @param  {Null}  value
+	 * @return {Boolean}
+	 */
+	isNull(value) {
+		return value === null
+	}
+
+	/**
+	 * 判断某个元素是否为有限数
+	 * @param  {Number}  value
+	 * @return {Boolean}
+	 */
+	isFinite(value) {
+		return typeof value == 'number' && isFinite(value)
+	}
+
+	/**
+	 * 判断某个元素是否为自然数
+	 * @param  {Number}  value
+	 * @return {Boolean}
+	 */
+	isNaN(value) {
+		return this.isNumber(value) && value != +value
+	}
+
+	/**
+	 * 判断某个元素是否为错误类型
+	 * @param  {Object}  value
+	 * @return {Boolean}
+	 */
+	isError(value) {
+		return this.type(value) === '[object Error]'
+	}
+
+	/**
+	 * 删除字符串左右两端的空格
+	 * @param  {String} str
+	 * @return {String}
+	 */
+	trim(str) {
+		return this.isString(str) ? str.trim() : str
+	}
+
+	/**
+	 * 字符串转义
+	 * @param  {String} str
+	 * @return {String}
+	 */
+	escapeForRegexp(str) {
+		return str.replace(/([-()\[\]{}+?*.$\^|,:#<!\\])/g, '\\$1').replace(/\x08/g, '\\x08')
+	}
+
+	/**
+	 * 字符串转对象
+	 * @param  {String} str 'key1,key2,...'
+	 * @return {Object} in the form of {key1:true, key2:true, ...}
+	 */
+	makeMap(str) {
+		let obj = {},
+			items = str.split(',')
+		for (let i = 0; i < items.length; i++) {
+			obj[items[i]] = !0
+		}
+		return obj
+	}
+
+	/**
+	 * 判断数组中是否含有指定元素
+	 * @param  {Array} arr
+	 * @param  {Objext} obj
+	 * @return {Array}
+	 */
+	includes(arr, obj) {
+		return Array.prototype.indexOf.call(arr, obj) != -1
+	}
+
+	/**
+	 * 数组删除指定的元素，并返回元素的索引值
+	 * @param  {Array} array
+	 * @param  {String} value
+	 * @return {Number}
+	 */
+	arrayRemove(array, value) {
+		let index = array.indexOf(value)
+		if (index >= 0) {
+			array.splice(index, 1)
+		}
+		return index
+	}
+
+	/**
+	 * 日期增加分钟
+	 * @param  {Date} date
+	 * @param  {Number} minutes
+	 * @return {Date}
+	 */
+	addDateMinutes(date, minutes) {
+		date = new Date(date.getTime())
+		date.setMinutes(date.getMinutes() + minutes || 0)
+		return date
+	}
+
+	/**
+	 * 对象解析出JSON字符串
+	 * @param  {Object} obj
+	 * @param  {Number} pretty
+	 * @return {Object}
+	 */
+	toJson(obj, pretty) {
+		if (this.isUndefined(obj)) return undefined
+		if (!this.isNumber(pretty)) {
+			pretty = pretty ? 2 : null
+		}
+		return JSON.stringify(obj, null, pretty)
+	}
+
+	/**
+	 * JSON字符串解析成对象
+	 * @param  {String} json
+	 * @return {Object}
+	 */
+	fromJson(json) {
+		return this.isString(json) ? JSON.parse(decodeURIComponent(json).replace(new RegExp("&quot;", "gm"),
+			"\"")) : json
+	}
+
+	/**
+	 * 扩展对象
+	 * @return {Object}
+	 */
+	extend() {
+		let src, copyIsArray, copy, name, options, clone,
+			target = arguments[0] || {},
+			i = 1,
+			length = arguments.length,
+			deep = !1;
+
+		if (typeof target === 'boolean') {
+			deep = target
+			target = arguments[i] || {}
+			i++
+		}
+
+		if (typeof target !== 'object' && !this.isFunction(target)) {
+			target = {}
+		}
+
+		if (i === length) {
+			target = this
+			i--
+		}
+
+		for (; i < length; i++) {
+			if ((options = arguments[i]) != null) {
+				for (name in options) {
+					src = target[name]
+					copy = options[name]
+
+					if (target === copy) {
+						continue
+					}
+
+					if (deep && copy && (this.isPlainObject(copy) || (copyIsArray = this.isArray(copy)))) {
+						if (copyIsArray) {
+							copyIsArray = !1
+							clone = src && this.isArray(src) ? src : []
+						} else {
+							clone = src && this.isPlainObject(src) ? src : {}
+						}
+						target[name] = this.extend(deep, clone, copy)
+					} else if (copy !== undefined) {
+						target[name] = copy
+					}
+				}
+			}
+		}
+		return target
+	}
+
+	/**
+	 * 判断传入的参数是否为纯粹的对象，即直接量{}或new Object()创建的对象
+	 * @param  {[type]}  obj [description]
+	 * @return {Boolean}     [description]
+	 */
+	isPlainObject(obj) {
+		let getProto = Object.getPrototypeOf
+		let class2type = {}
+		let toString = class2type.toString
+		let hasOwn = class2type.hasOwnProperty
+		let fnToString = hasOwn.toString
+		let ObjectFunctionString = fnToString.call(Object)
+		let proto, Ctor
+		if (!obj || this.type(obj) !== '[object Object]') {
+			return !1
+		}
+		proto = getProto(obj)
+		if (!proto) {
+			return !0
+		}
+		Ctor = hasOwn.call(proto, 'constructor') && proto.constructor
+		return typeof Ctor === 'function' && fnToString.call(Ctor) === ObjectFunctionString
+	}
+
+	/**
+	 * 判断对象是否为空
+	 * @param  {Object}  obj
+	 * @return {Boolean}
+	 */
+	isEmptyObject(obj) {
+		for (let i in obj)
+			return !1
+		return !0
+	}
+
+	/**
+	 * 判断对象的类型
+	 * @param  {Object} obj
+	 * @return {String}
+	 */
+	type(obj) {
+		const toString = Object.prototype.toString
+
+		if (obj == null) {
+			return obj + ''
+		}
+
+		return typeof obj === 'object' || typeof obj === 'function' ? toString.call(obj) || 'object' : typeof obj
+	}
+
+	/**
+	 * 合并对象并返回一个新的对象，目标对象自身也会改变
+	 * @param  {Array} args
+	 * @return {Object}
+	 */
+	merge(...args) {
+		return Object.assign(...args)
+	}
+
+	/**
+	 * 拷贝对象并返回一个新的对象
+	 * @param  {Object} obj
+	 * @return {Object}
+	 */
+	clone(obj) {
+		if (typeof obj !== 'object' || !obj) {
+			return obj
+		}
+		let copy = {}
+		for (let attr in obj) {
+			if (obj.hasOwnProperty(attr)) {
+				copy[attr] = obj[attr]
+			}
+		}
+		return copy
+	}
+
+	getUrlParams(url) {
+		var _params = {},
+			qStart = url.indexOf('?'),
+			hStart = url.indexOf('#'),
+			q = url.substr(qStart + 1),
+			tmp,
+			parts,
+			i;
+
+		if (hStart === -1) hStart = url.length;
+
+		if (q) {
+			tmp = q.split('&');
+			i = tmp.length;
+			while (i--) {
+				parts = tmp[i].split('=');
+				_params[parts[0]] = decodeURIComponent(parts[1]).replace(/\+/g, ' ');
+				//_params[parts[0]] = parts[1];
+			}
+		}
+		return _params;
+	}
+
+	getUrlParam(url, name) {
+		return this.getUrlParams(url)[name];
+	}
+
+
+	/**
+	 * 删除对象上的指定属性并返回一个新的对象
+	 * @param  {Object} obj
+	 * @param  {Array} keys
+	 * @return {[type]}
+	 */
+	omit(obj, keys) {
+		let o = this.clone(obj)
+		keys.forEach(key => {
+			delete o[key]
+		})
+		return o
+	}
+
+	/**
+	 * 返回一个新数组，数组中的元素为指定属性的值
+	 * @param  {Array} arr
+	 * @param  {String} key
+	 * @return {Array}
+	 */
+	pluck(arr, key) {
+		if (typeof arr !== 'object' || arr.length === 0) {
+			return []
+		}
+		if (!key) {
+			return arr
+		}
+		return arr.map(a => a[key])
+	}
+
+	/**
+	 * 返回序列化的值
+	 * @param  {String} value
+	 * @return {String}
+	 */
+	serializeValue(value) {
+		if (this.isObject(value)) return this.isDate(value) ? value.toISOString() : this.toJson(value)
+		return value
+	}
+
+	/**
+	 * 编码URI
+	 * @param  {String} value
+	 * @param  {String} pctEncodeSpaces
+	 * @return {String}
+	 */
+	encodeUriQuery(value, pctEncodeSpaces) {
+		return encodeURIComponent(value)
+			.replace(/%40/gi, '@')
+			.replace(/%3A/gi, ':')
+			.replace(/%24/g, '$')
+			.replace(/%2C/gi, ',')
+			.replace(/%3B/gi, ';')
+			.replace(/%20/g, (pctEncodeSpaces ? '%20' : '+'))
+	}
+
+	/**
+	 * 对象序列化
+	 * @param  {Object} obj
+	 * @return {String}
+	 */
+	paramSerializer(obj) {
+		if (!obj) return ''
+		let that = this
+		let parts = []
+		for (let key in obj) {
+			//if(key=='url')continue;
+			const value = obj[key]
+			if (value === null || that.isUndefined(value)) return
+			if (that.isArray(value)) {
+				value.forEach(function(v) {
+					parts.push(that.encodeUriQuery(key) + '=' + that.encodeUriQuery(that.serializeValue(v)))
+				})
+			} else {
+				parts.push(that.encodeUriQuery(key) + '=' + that.encodeUriQuery(that.serializeValue(value)))
+			}
+		}
+		return parts.join('&')
+	}
+
+	/**
+	 * 拼接URL
+	 * @param  {String} obj
+	 * @param  {Object} obj
+	 * @return {String}
+	 */
+	buildUrl(url, obj) {
+		const serializedParams = this.paramSerializer(obj)
+		if (serializedParams.length > 0) {
+			url += ((url.indexOf('?') == -1) ? '?' : '&') + serializedParams
+		}
+		return url
+	}
+	
+	/**
+	 * 全局唯一标识符（uuid，Globally Unique Identifier）,也称作 uuid(Universally Unique IDentifier) 
+	 * 一般用于多个组件之间,给它一个唯一的标识符,或者v-for循环的时候,如果使用数组的index可能会导致更新列表出现问题
+	 * 最可能的情况是左滑删除item或者对某条信息流"不喜欢"并去掉它的时候,会导致组件内的数据可能出现错乱
+	 * v-for的时候,推荐使用后端返回的id而不是循环的index
+	 * @param {Number} len uuid的长度
+	 * @param {Boolean} firstU 将返回的首字母置为"u"
+	 * @param {Nubmer} radix 生成uuid的基数(意味着返回的字符串都是这个基数),2-二进制,8-八进制,10-十进制,16-十六进制
+	 */
+	guid(len = 32, firstU = true, radix = null) {
+		let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
+		let uuid = [];
+		radix = radix || chars.length;
+	
+		if (len) {
+			// 如果指定uuid长度,只是取随机的字符,0|x为位运算,能去掉x的小数位,返回整数位
+			for (let i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
+		} else {
+			let r;
+			// rfc4122标准要求返回的uuid中,某些位为固定的字符
+			uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
+			uuid[14] = '4';
+	
+			for (let i = 0; i < 36; i++) {
+				if (!uuid[i]) {
+					r = 0 | Math.random() * 16;
+					uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
+				}
+			}
+		}
+		// 移除第一个字符,并用u替代,因为第一个字符为数值时,该guuid不能用作id或者class
+		if (firstU) {
+			uuid.shift();
+			return 'u' + uuid.join('');
+		} else {
+			return uuid.join('');
+		}
+	}
+	
+	/**
+	 * 查询节点信息
+	 * 当前方法在支付宝小程序中无法获取组件跟接点的尺寸
+	 * 解决办法：为组件根部再套一个没有任何作用的view元素
+	 */
+	getRect(selector, all) {
+	  return new Promise((resolve) => {
+	    uni.createSelectorQuery()
+	      .in(this)[all ? 'selectAll' : 'select'](selector)
+	      .boundingClientRect(rect => {
+	        if (all && Array.isArray(rect) && rect.length) {
+	          resolve(rect)
+	        }
+	        if (!all && rect) {
+	          resolve(rect)
+	        }
+	      })
+	      .exec()
+	  })
+	} 
+	
+
+	renderUrl(url, defaultUrl) {
+		if (!url || url == "") {
+			url = defaultUrl;
+		}
+		if (url.indexOf("__weui-popup") > 0 || url.startsWith("tel:") || url.startsWith("http://") || url
+			.startsWith(
+				"https://")) {
+			return url;
+		}
+		if (url.indexOf("/pages/" + url) != 0) {
+			url = "/pages/" + url;
+		}
+		return url;
+	}
+
+	renderImage(path) {
+		if (!path) return ''
+		if (path.indexOf('http') !== -1) return path
+		path = `${this.$$basePath}${path}`;
+		if(path.indexOf("www.diygw.com/upload")>0){
+			path = path.replace("www.diygw.com","lib.diygw.com")
+		}
+		return path;
+	}
+
+	makePhoneCall(e) {
+		let phone = "";
+		if (e.currentTarget) {
+			var dataset = e.currentTarget.dataset;
+			phone = dataset.phone;
+		}else if(this.isObject(e) && e.phone){
+			phone = e.phone
+		}else{
+			phone = e
+		}
+		if (phone.indexOf("tel:") !== -1) {
+			phone = phone.substr(4);
+		}
+		uni.makePhoneCall({
+			phoneNumber: phone
+		})
+	}
+
+	navigateTo(url, params) {
+		if (url.startsWith("tel:")) {
+			this.makePhoneCall(url);
+		} else {
+			if (url.startsWith("http://") || url.startsWith("https://")) {
+				const $$url = this.buildUrl("/pages/webview", params)
+				return new Promise((resolve, reject) => {
+					uni.navigateTo({
+						url: $$url,
+						success: res => resolve(res),
+						fail: res => reject(res),
+					})
+				});
+			} else {
+				if (url.startsWith("pages/")){
+					url = "/" + url;
+				}
+				if (!url.startsWith("/pages/")) {
+					url = "/pages/" + url;
+				}
+				if (getApp().globalData.tabBar.indexOf(url) != -1) {
+					uni.switchTab({
+						url: url
+					});
+				} else if (params && params['redirect']) {
+					const $$url = this.buildUrl(url, params)
+					uni.redirectTo({
+						url: $$url,
+						success: (res)=>{
+							console.log("success"+res)
+						},
+						fail: (res)=>{
+							console.log("error"+res)
+						}
+					})
+				} else {
+					const $$url = this.buildUrl(url, params)
+					uni.navigateTo({
+						url: $$url,
+						success: (res)=>{
+							console.log("success"+res)
+						},
+						fail: (res)=>{
+							console.log("error"+res)
+							if(res&&res.errMsg&&res.errMsg.indexOf("limit")>0){
+								uni.redirectTo({
+									url: $$url,
+									success: (res)=>{
+										console.log("success"+res)
+									},
+									fail: (res)=>{
+										console.log("error"+res)
+									}
+								})
+							}
+						}
+					})
+				}
+			}
+
+		}
+	}
+	
+	
+	// 补0，如1 -> 01
+	padZero(num, targetLength = 2) {
+	    let str = `${num}`
+	    while (str.length < targetLength) {
+	        str = `0${str}`
+	    }
+	    return str
+	}
+	
+	parseTimeData(time) {
+		const SECOND = 1000
+		const MINUTE = 60 * SECOND
+		const HOUR = 60 * MINUTE
+		const DAY = 24 * HOUR
+	    const days = Math.floor(time / DAY)
+	    const hours = Math.floor((time % DAY) / HOUR)
+	    const minutes = Math.floor((time % HOUR) / MINUTE)
+	    const seconds = Math.floor((time % MINUTE) / SECOND)
+	    const milliseconds = Math.floor(time % SECOND)
+	    return {
+	        days,
+	        hours,
+	        minutes,
+	        seconds,
+	        milliseconds
+	    }
+	}
+	
+	parseFormat(format, timeData) {
+	    let {
+	        days,
+	        hours,
+	        minutes,
+	        seconds,
+	        milliseconds
+	    } = timeData
+	    // 如果格式化字符串中不存在DD(天)，则将天的时间转为小时中去
+	    if (format.indexOf('DD') === -1) {
+	        hours += days * 24
+	    } else {
+	        // 对天补0
+	        format = format.replace('DD', this.padZero(days))
+	    }
+	    // 其他同理于DD的格式化处理方式
+	    if (format.indexOf('HH') === -1) {
+	        minutes += hours * 60
+	    } else {
+	        format = format.replace('HH', this.padZero(hours))
+	    }
+	    if (format.indexOf('mm') === -1) {
+	        seconds += minutes * 60
+	    } else {
+	        format = format.replace('mm', this.padZero(minutes))
+	    }
+	    if (format.indexOf('ss') === -1) {
+	        milliseconds += seconds * 1000
+	    } else {
+	        format = format.replace('ss', this.padZero(seconds))
+	    }
+	    return format.replace('SSS', this.padZero(milliseconds, 3))
+	}
+	
+	isSameSecond(time1, time2) {
+	    return Math.floor(time1 / 1000) === Math.floor(time2 / 1000)
+	}
+	
+	addUnit(value = 'auto', unit = 'rpx') {
+	    return this.isNumber(value) ? `${value}${unit}` : value;
+	}
+	
+	// 获取父组件的参数，因为支付宝小程序不支持provide/inject的写法
+	// this.$parent在非H5中，可以准确获取到父组件，但是在H5中，需要多次this.$parent.$parent.xxx
+	// 这里默认值等于undefined有它的含义，因为最顶层元素(组件)的$parent就是undefined，意味着不传name
+	// 值(默认为undefined)，就是查找最顶层的$parent
+	getParent(parent,name = undefined) {
+		// 通过while历遍，这里主要是为了H5需要多层解析的问题
+		while (parent) {
+			// 父组件
+			if (parent.$options && parent.$options.name !== name) {
+				// 如果组件的name不相等，继续上一级寻找
+				parent = parent.$parent;
+				let tmp =  this.getParent(parent,name)
+				if(tmp){
+					return tmp;
+				}
+			} else {
+				return parent;
+			}
+		}
+		return false;
+	}
+	
+	os() {
+		return uni.getSystemInfoSync().platform;
+	}
+	
+	sys() {
+		return uni.getSystemInfoSync();
+	}
+}
+
+export default Tools

common/Validate.js

+/**
+ * 表单验证
+ 
+ * @param {Object} rules 验证字段的规则
+ *
+ */
+class Validate {
+	constructor(rules = {}) {
+		Object.assign(this, {
+			rules
+		})
+		this.__init()
+	}
+
+	/**
+	 * __init
+	 */
+	__init() {
+		this.__initMethods()
+		this.__initDefaults()
+		this.__initData()
+	}
+
+	/**
+	 * 初始化默认提示信息
+	 */
+	__initDefaults() {
+		this.defaults = {
+			messages: {
+				required: '这是必填字段。',
+				email: '请输入有效的电子邮件地址。',
+				tel: '请输入11位的手机号码。',
+				url: '请输入有效的网址。',
+				date: '请输入有效的日期。',
+				dateISO: '请输入有效的日期（ISO），例如：2009-06-23，1998/01/22。',
+				number: '请输入有效的数字。',
+				regexp: '请输入有效的正则匹配值。',
+				digits: '只能输入数字。',
+				idcard: '请输入18位的有效身份证。',
+				equalTo: '输入值必须和%s相同。',
+				contains: '输入值必须包含%s。',
+				minlength: '最少要输入%s个字符。',
+				maxlength: '最多可以输入%s个字符。',
+				rangelength: '请输入长度在%s到%s之间的字符。',
+				min: '请输入不小于%s的数值。',
+				max: '请输入不大于%s的数值。',
+				range: '请输入范围在%s到 {1} 之间的数值。',
+			}
+		}
+	}
+
+	/**
+	 * 初始化数据
+	 */
+	__initData() {
+		this.form = {}
+		this.errorList = []
+	}
+
+
+	/**
+	 * 初始化默认验证方法
+	 */
+	__initMethods() {
+		const that = this
+		that.methods = {
+			/**
+			 * 验证必填元素
+			 */
+			required: {
+				valid(value, param) {
+					if (!that.depend(param)) {
+						return 'dependency-mismatch'
+					} else if (typeof value === 'number') {
+						value = value.toString()
+					} else if (typeof value === 'boolean') {
+						return !0
+					}
+					return value.length > 0
+				},
+				message(param) {
+					return param.message || '这是必填字段。';
+				}
+			},
+			/**
+			 * 验证电子邮箱格式
+			 */
+			email: {
+				valid(value, param) {
+					return that.optional(value) ||
+						/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+						.test(value)
+				},
+				message(param) {
+					return param.message || '请输入有效的电子邮件地址。';
+				}
+			},
+			/**
+			 * 验证手机格式
+			 */
+			tel: {
+				valid(value, param) {
+					return that.optional(value) || /^1[34578]\d{9}$/.test(value)
+				},
+				message(param) {
+					return param.message || '请输入11位的手机号码。';
+				}
+
+			},
+			/**
+			 * 验证URL格式
+			 */
+			url: {
+				valid(value, param) {
+					return that.optional(value) ||
+						/^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i
+						.test(value)
+				},
+				message(param) {
+					return param.message || '请输入有效的网址。';
+				}
+			},
+			/**
+			 * 验证日期格式
+			 */
+			date: {
+				valid(value, param) {
+					return that.optional(value) || !/Invalid|NaN/.test(new Date(value).toString())
+				},
+				message(param) {
+					return param.message || '请输入有效的日期。';
+				}
+
+			},
+			/**
+			 * 验证ISO类型的日期格式
+			 */
+			dateISO: {
+				valid(value, param) {
+					return that.optional(value) ||
+						/^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/.test(value)
+				},
+				message(param) {
+					return param.message || '请输入有效的日期（ISO），例如：2009-06-23，1998/01/22。';
+				}
+			},
+			/**
+			 * 验证十进制数字
+			 */
+			number: {
+				valid(value, param) {
+					return that.optional(value) || /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value)
+				},
+				message(param) {
+					return param.message || '请输入有效的数字。';
+				}
+
+			},
+			/**
+			 * 验证整数
+			 */
+			digits: {
+				valid(value, param) {
+					return that.optional(value) || /^\d+$/.test(value)
+				},
+				message(param) {
+					return param.message || '只能输入整数。';
+				}
+			},
+			/**
+			 * 验证身份证号码
+			 */
+			idcard: {
+				valid(value, param) {
+					return that.optional(value) ||
+						/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value)
+				},
+				message(param) {
+					return param.message || '请输入18位的有效身份证。';
+				}
+			},
+			/**
+			 * 正则验证值
+			 */
+			regexp: {
+				valid(value, param) {
+					var regexp = ('string' === typeof param.regexp) ? new RegExp(param.regexp) : param.regexp;
+					return that.optional(value) || regexp.test(value)
+				},
+				message(param) {
+					return param.message || '请输入有效的正则匹配值';
+				}
+			},
+			/**
+			 * 验证两个输入框的内容是否相同
+			 */
+			equalTo: {
+				valid(value, param) {
+					return that.optional(value) || value === that.scope.detail.value[param.field]
+				},
+				message(param) {
+					return that.formatMessage(param.message || '输入值必须和%s相同。', [that.scope.detail.value[param
+						.field]]);
+				}
+			},
+			/**
+			 * 验证是否包含某个值
+			 */
+			contains: {
+				valid(value, param) {
+					return that.optional(value) || value.indexOf(param.value) >= 0
+				},
+				message(param) {
+					return that.formatMessage(param.message || '输入值必须包含%s。', [param.value]);
+				}
+			},
+			/**
+			 * 验证最小长度
+			 */
+			minlength: {
+				valid(value, param) {
+					return that.optional(value) || value.length >= param.value
+				},
+				message(param) {
+					return that.formatMessage(param.message || '最少要输入%s个字符。', [param.value]);
+				}
+
+			},
+			/**
+			 * 验证最大长度
+			 */
+			maxlength: {
+				valid(value, param) {
+					return that.optional(value) || value.length <= param.value
+				},
+				message(param) {
+					return that.formatMessage(param.message || '最多可以输入%s个字符。', [param.value]);
+				}
+			},
+			/**
+			 * 验证一个长度范围[min, max]
+			 */
+			rangelength: {
+				valid(value, param) {
+					return that.optional(value) || (value.length >= param.min && value.length <= param.max)
+				},
+				message(param) {
+					return that.formatMessage(param.message || '请输入长度在%s到%s之间的字符。', [param.min, param.max]);
+				}
+
+			},
+			/**
+			 * 验证最小值
+			 */
+			min: {
+				valid(value, param) {
+					return that.optional(value) || value >= param.value
+				},
+				message(param) {
+					return that.formatMessage(param.message || '请输入不小于%s的数值。', [param.value]);
+				}
+			},
+			/**
+			 * 验证最大值
+			 */
+			max: {
+				valid(value, param) {
+					return that.optional(value) || value <= param.value
+				},
+				message(param) {
+					return that.formatMessage(param.message || '请输入不大于%s的数值。', [param.value]);
+				}
+
+			},
+			/**
+			 * 验证一个值范围[min, max]
+			 */
+			range: {
+				valid(value, param) {
+					return that.optional(value) || (value >= param.min && value <= param.max)
+				},
+				message(param) {
+					return that.formatMessage(param.message || '请输入范围在%s到%s之间的数值。', [param.min, param.max]);
+				}
+
+			},
+		}
+	}
+
+	/**
+	 * 添加自定义验证方法
+	 * @param {String} name 方法名
+	 * @param {Function} method 函数体，接收两个参数(value, param)，value表示元素的值，param表示参数
+	 * @param {String} message 提示信息
+	 */
+	addMethod(name, method, message) {
+		this.methods[name] = method
+		this.defaults.messages[name] = message !== undefined ? message : this.defaults.messages[name]
+	}
+
+	/**
+	 * 判断验证方法是否存在
+	 */
+	isValidMethod(value) {
+		return this.methods.hasOwnProperty(value);
+	}
+
+	/**
+	 * 格式化提示信息模板
+	 */
+	formatMessage(message, parameters) {
+		if (!Array.isArray(parameters)) {
+			parameters = [parameters];
+		}
+
+		for (var i in parameters) {
+			message = message.replace('%s', parameters[i]);
+		}
+
+		return message;
+	}
+
+	/**
+	 * 格式化提示信息模板
+	 */
+	formatTpl(source, params) {
+		const that = this
+		if (arguments.length === 1) {
+			return function() {
+				let args = Array.from(arguments)
+				args.unshift(source)
+				return that.formatTpl.apply(this, args)
+			}
+		}
+		if (params === undefined) {
+			return source
+		}
+		if (arguments.length > 2 && params.constructor !== Array) {
+			params = Array.from(arguments).slice(1)
+		}
+		if (params.constructor !== Array) {
+			params = [params]
+		}
+		params.forEach(function(n, i) {
+			source = source.replace(new RegExp("\\{" + i + "\\}", "g"), function() {
+				return n
+			})
+		})
+		return source
+	}
+
+	/**
+	 * 判断规则依赖是否存在
+	 */
+	depend(param) {
+		switch (typeof param) {
+			case 'boolean':
+				param = param
+				break
+			case 'string':
+				param = !!param.length
+				break
+			case 'function':
+				param = param()
+			default:
+				param = !0
+		}
+		return param
+	}
+
+	/**
+	 * 判断输入值是否为空
+	 */
+	optional(value) {
+		return !this.methods.required.valid(value) && 'dependency-mismatch'
+	}
+
+	/**
+	 * 获取自定义字段的提示信息
+	 * @param {String} param 字段名
+	 * @param {Object} rule 规则
+	 */
+	customMessage(param, rule) {
+		if (!rule.parameters.message) {
+			rule.parameters.message = this.defaults.messages[rule.method];
+		}
+		if (rule.parameters.message.indexOf("%s") >= 0) {
+			return this.methods[rule.method].message
+		} else {
+			return rule.parameters.message;
+		}
+	}
+
+	/**
+	 * 获取某个指定字段的提示信息
+	 * @param {String} param 字段名
+	 * @param {Object} rule 规则
+	 */
+	defaultMessage(param, rule) {
+		let message = this.customMessage(param, rule) || this.defaults.messages[rule.method]
+		let type = typeof message
+
+		if (type === 'undefined') {
+			message = `Warning: No message defined for ${rule.method}.`
+		} else if (type === 'function') {
+			message = message.call(this, rule.parameters)
+		}
+
+		return message
+	}
+
+	/**
+	 * 缓存错误信息
+	 * @param {String} param 字段名
+	 * @param {Object} rule 规则
+	 * @param {String} value 元素的值
+	 */
+	formatTplAndAdd(param, rule, value) {
+		let msg = this.defaultMessage(param, rule)
+
+		this.errorList.push({
+			param: param,
+			msg: msg,
+			value: value,
+		})
+	}
+
+	/**
+	 * 验证某个指定字段的规则
+	 * @param {String} param 字段名
+	 * @param {Object} rules 规则
+	 * @param {Object} event 表单数据对象
+	 */
+	checkParam(param, rules, event) {
+
+		// 缓存表单数据对象
+		this.scope = event
+
+		// 缓存字段对应的值
+		const data = event.detail.value
+		const value = data[param] || ''
+
+		// 遍历某个指定字段的所有规则，依次验证规则，否则缓存错误信息
+		for (let method in rules) {
+
+			// 判断验证方法是否存在
+			if (this.isValidMethod(method)) {
+
+				// 缓存规则的属性及值
+				const rule = {
+					method: method,
+					parameters: rules[method]
+				}
+
+				// 调用验证方法
+				const result = this.methods[method].valid(value, rule.parameters)
+
+				// 若result返回值为dependency-mismatch，则说明该字段的值为空或非必填字段
+				if (result === 'dependency-mismatch') {
+					continue
+				}
+
+				this.setValue(param, method, result, value)
+
+				// 判断是否通过验证，否则缓存错误信息，跳出循环
+				if (!result) {
+					this.formatTplAndAdd(param, rule, value)
+					break
+				}
+			}
+		}
+	}
+
+	/**
+	 * 设置字段的默认验证值
+	 * @param {String} param 字段名
+	 */
+	setView(param) {
+		this.form[param] = {
+			$name: param,
+			$valid: true,
+			$invalid: false,
+			$error: {},
+			$success: {},
+			$viewValue: ``,
+		}
+	}
+
+	/**
+	 * 设置字段的验证值
+	 * @param {String} param 字段名
+	 * @param {String} method 字段的方法
+	 * @param {Boolean} result 是否通过验证
+	 * @param {String} value 字段的值
+	 */
+	setValue(param, method, result, value) {
+		const params = this.form[param]
+		params.$valid = result
+		params.$invalid = !result
+		params.$error[method] = !result
+		params.$success[method] = result
+		params.$viewValue = value
+	}
+
+	/**
+	 * 验证所有字段的规则，返回验证是否通过
+	 * @param {Object} event 表单数据对象
+	 */
+	checkForm(event) {
+		this.__initData()
+
+		for (let param in this.rules) {
+			this.setView(param)
+			this.checkParam(param, this.rules[param], event)
+		}
+
+		return this.valid()
+	}
+
+	/**
+	 * 返回验证是否通过
+	 */
+	valid() {
+		return this.size() === 0
+	}
+
+	/**
+	 * 返回错误信息的个数
+	 */
+	size() {
+		return this.errorList.length
+	}
+
+	/**
+	 * 返回所有错误信息
+	 */
+	validationErrors() {
+		return this.errorList
+	}
+}
+
+export default Validate

common/Wechat.js

+
+var jwx = {
+	getCode(){
+		let params= getApp().$tools.getUrlParams(location.search)
+		let code =  params.code; // 截取code
+		return code
+	},
+	async login() {
+		if(this.isWechat()){
+			//如果已经登录过不登录
+			if(!getApp().$session.getUser()){
+				//获取浏览器code
+				let code = this.getCode()
+				// 获取之前的code 
+				let oldCode = getApp().$session.getValue('wechatCode')
+				let pages = getCurrentPages()
+				let page = pages[pages.length-1]
+				// 如果没有code，就去请求获取code
+				if (code == null || code === '' || code == 'undefined' || code == oldCode) {
+					let globalOption = page.globalOption
+					if(!globalOption.url){
+						globalOption.url = page.route
+					}
+					//记住当前登录地址
+					getApp().$session.setValue("redirect_page",globalOption)
+					let local = window.location.href; // 获取页面url 
+					if(local.indexOf("#")>=0){
+						local = local.split("#")[0]
+					}
+					if(local.indexOf("?")>=0){
+						local = local.split("?")[0]
+					}
+					// 获取公众号appid
+					let appid  = getApp().$session.getValue('appid')
+					if(!appid){
+						let appdata =await getApp().$http.get('/api/wechat/getAppid',{},{},'json')
+						if(!appdata || (appdata && appdata.code!=200)){
+							getApp().showToast('获取公众号APPID配置错误')
+							return
+						}
+						appid = appdata.data.appid 
+						getApp().$session.setValue('appid',appid)
+					}		
+					
+					if(!appid){
+						getApp().showToast('获取公众号APPID配置错误')
+						return
+					}		
+					let uri = encodeURIComponent(local)
+					// 设置旧的code为0，避免死循环
+					getApp().$session.setValue('wechatCode',null)
+					location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=diygwwechatlogin#wechat_redirect`)
+				} else {
+					console.log('存在code，使用code换取用户信息')
+					// 保存最新code 
+					getApp().$session.setValue('wechatCode',code)
+					let accessdata = await getApp().$http.get('/api/wechat/login',{
+						code
+					},{},'json')
+					if(!accessdata|| (accessdata && accessdata.code!=200)){
+						getApp().showToast('获取用户信息失败')
+					}else{
+						getApp().$session.setUser(accessdata.data)
+						getApp().globalData.currentPage.userInfo = accessdata.data 
+						let href = location.href;
+						let params= getApp().$tools.getUrlParams(location.search)
+						href = href.replace("code="+params.code,"").replace("&state=diygwwechatlogin","")
+						if(href.indexOf("?#/")>0){
+							href = href.replace("?#/","#/")
+						}
+						location.replace(href)
+					}
+				}
+			}else{
+				getApp().globalData.currentPage.userInfo = getApp().$session.getUser()
+			}
+		}else{
+			getApp().showToast('请使用微信打开')
+		}
+	},
+	//判断是否在微信中    
+	isWechat() {
+		var ua = window.navigator.userAgent.toLowerCase();
+		if (ua.match(/micromessenger/i) == 'micromessenger') {
+			//console.log('是微信客户端')  
+			return true;
+		} else {
+			//console.log('不是微信客户端')  
+			return false;
+		}
+	},
+	// 初始化
+	initJssdk(callback) {
+		// 获取页面url
+		let url = window.location.href; 
+		if(url.indexOf("#")>=0){
+			url = url.split("#")[0]
+		}
+		//服务端进行签名
+		getApp().$http.post('/api/wechat/getSignPackage',{
+			url: url
+		},{},'json').then(res=>{
+			console.log('------签名返回数据------')
+			console.log(res.data)
+			//返回需要的参数appId,timestamp,noncestr,signature等  
+			//注入config权限配置
+			jWeixin.config({
+				debug: false,
+				appId: res.data.appId,
+				timestamp: res.data.timestamp,
+				nonceStr: res.data.nonceStr,
+				signature: res.data.signature,
+				jsApiList: res.data.jsApiList
+			});
+			jWeixin.ready(function() {
+				console.log('config注入成功')
+				if (callback) {
+					callback();
+				}
+			})
+		})
+	},
+	async pay(param){
+		if(!getApp().$session.getToken() || !getApp().$session.getUser().openid){
+			//如果参数自带openid跳过验证
+			if(!param.openid){
+				getApp().showToast('请先登录')
+				setTimeout(async ()=>{
+					await this.login()
+				},1500)
+				return;
+			}
+		}
+		if(!param.total){
+			getApp().showToast('请配置价格参数total')
+			return;
+		}
+		let data = await getApp().$http.post('/api/wepay/order',{
+			total:param.total,
+			body:param.body,
+			openid:param.openid||getApp().$session.getUser().openid,
+		},{},'json')
+		
+		if(data.code!=200){
+			getApp().showToast(data.msg)
+			return;
+		}
+		this.wxpay(Object.assign(data,param))
+	},
+	//在需要定位页面调用  
+	getlocation(callback) {
+		if (!this.isWechat()) {
+			getApp().showToast('请使用微信打开')
+			return;
+		}
+		this.initJssdk(function(res) {
+			jWeixin.ready(function() {
+				jWeixin.getLocation({
+					// type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'  
+					success(res) {
+						// console.log(res);  
+						callback(res)
+					},
+					fail(res) {
+						console.log(res)
+					},
+					// complete:function(res){  
+					//     console.log(res)  
+					// }  
+				});
+			});
+		});
+	},
+	openlocation(data, callback) { //打开位置  
+		if (!this.isWechat()) {
+			getApp().showToast('请使用微信打开')
+			return;
+		}
+		this.initJssdk(function(res) {
+			jWeixin.ready(function() {
+				jWeixin.openLocation({ //根据传入的坐标打开地图  
+					latitude: data.latitude,
+					longitude: data.longitude
+				});
+			});
+		});
+	},
+	chooseImage(callback) { //选择图片  
+		if (!this.isWechat()) {
+			getApp().showToast('请使用微信打开')
+			return;
+		}
+		//console.log(data);  
+		this.initJssdk(function(res) {
+			jWeixin.ready(function() {
+				jWeixin.chooseImage({
+					count: 1,
+					sizeType: ['compressed'],
+					sourceType: ['album'],
+					success(res) {
+						callback(res)
+					}
+				})
+			});
+		});
+	},
+	
+	//微信支付  
+	wxpay(params = {}) {
+		if (!this.isWechat()) {
+			getApp().showToast('请使用微信打开')
+			return;
+		}
+		this.initJssdk(function() {
+			jWeixin.chooseWXPay({
+				timestamp: params.data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符  
+				nonceStr: params.data.nonceStr, // 支付签名随机串，不长于 32 位  
+				package: params.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）  
+				signType: params.data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'  
+				paySign: params.data.paySign, // 支付签名  
+				success(res) {
+					if(params.success && typeof params.success=='function'){
+						params.success(res)
+					}else{
+						console.log('配置支付回调成功方法')
+					}
+				},
+				cancel(res) {
+					if(params.fail && typeof params.fail=='function'){
+						params.fail(res)
+					}else{
+						console.log('配置支付回调失败方法')
+					}
+				},
+				// complete:function(res){  
+				//     console.log(res)  
+				// }  
+			});
+		});
+	},
+	//在需要自定义分享的页面中调用
+	share(data) {
+		//每次都需要重新初始化配置，才可以进行分享  
+		this.initJssdk(function() {
+			var shareData = {
+				title: data && data.title ? data.title : 'DIY可视化',
+				desc: data && data.desc ? data.desc : 'DIY可视化设计生成UNIAPP源码',
+				link: data && data.link ? data.link : window.location.href,
+				imgUrl: data && data.imgUrl ? data.imgUrl : '',
+				success(res) {
+					//用户点击分享后的回调，这里可以进行统计，例如分享送金币之类的  
+					// request.post('/api/member/share');
+					console.log('设置成功')
+				},
+				cancel(res) {}
+			};
+			//分享给朋友接口  
+			jWeixin.onMenuShareAppMessage(shareData);
+			//分享到朋友圈接口  
+			jWeixin.onMenuShareTimeline(shareData);
+		});
+	},
+	// 选择通讯地址
+	chooseAddress(callback) {
+		this.initJssdk(function() {
+			jWeixin.openAddress({
+				success(res) {
+					callback(res)
+				}
+			})
+		})
+	}
+}
+
+export default jwx
\ No newline at end of file

common/diygw-ui/avatar.scss

+/* ==================
+          头像
+ ==================== */
+.diygw-avatar {
+  font-variant: small-caps;
+  display: inline-flex;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  background-color: #ccc;
+  color: var(--white);
+  white-space: nowrap;
+  position: relative;
+  width: 96rpx;
+  height: 96rpx;
+  background-size: cover;
+  background-position: center;
+  vertical-align: middle;
+  font-size: 32rpx;
+  
+  [class*="diy-icon-"]{
+    font-size: 56rpx;
+  }
+  &.bg-none{
+    background-color: inherit;
+  }
+
+  .diygw-avatar-img{
+    width:100%;
+    height:100%;
+  }
+
+}
+
+$avatar-sizes: (
+	"none": 64rpx,
+	"xs": 48rpx,
+	"sm": 64rpx,
+	"md": 96rpx,
+	"lg": 128rpx,
+	"xl": 200rpx,
+);
+
+$avatar-font-sizes: (
+	"none": 32rpx,
+	"xs": 24rpx,
+	"sm": 32rpx,
+	"md": 48rpx,
+	"lg": 72rpx,
+	"xl": 100rpx,
+);
+
+@mixin set-avatar($type) {
+  .diygw-avatar.#{$type} {
+    width: map-get($avatar-sizes, $type);
+    height: map-get($avatar-sizes, $type);
+    font-size: map-get($avatar-font-sizes, $type);
+    
+    [class*="diy-icon-"]{
+        font-size: map-get($avatar-font-sizes, $type);
+    }
+  }
+}
+
+@each $type in $diygw-sizes {
+  @include set-avatar($type);
+}
+
+.diygw-avatar .avatar-text {
+  font-size: 0.4em;
+}
+
+.diygw-avatar-group {
+  unicode-bidi: bidi-override;
+  padding: 0 10rpx 0 20rpx;
+  display: inline-block;
+}
+.diygw-avatar-group.rtl{
+  direction: rtl;
+  padding:0rpx;
+}
+.diygw-avatar-group .diygw-avatar {
+  margin-left: -30rpx;
+  vertical-align: middle;
+}
+
+.diygw-avatar-group .diygw-avatar.sm {
+  margin-left: -20rpx;
+}

common/diygw-ui/background.scss

+/* ==================
+          背景
+ ==================== */
+@import './var.scss';
+
+@mixin set-gradual-type($type) {
+  .bg-gradual-#{$type},.gradual-#{$type} {
+    background-image: var(--#{$type}Gradual)  !important;
+    color: var(--white)  !important;
+  }
+}
+
+@mixin set-bg-type($type) {
+  .bg-#{$type},.#{$type} {
+    background-color: var(--#{$type}) !important;
+    @if $type == 'gray' {
+      color: var(--black) !important;
+    } @else if $type == 'white' {
+      color: var(--black) !important;
+    } @else {
+      color: var(--white) !important;
+    }
+  }
+
+  .diygw-shadow[class*="-#{$type}"] {
+    box-shadow: var(--ShadowSize) var(--#{$type}Shadow);
+  }
+
+  .bg-#{$type}.light,.#{$type}.light {
+    color: var(--#{$type});
+    background-color: var(--#{$type}Light);
+  }
+}
+
+@each $type in $diygw-graduals {
+    @include set-gradual-type($type);
+}
+
+@each $type in $diygw-colors {
+    @include set-bg-type($type);
+}
+
+[class*="diygw-line"] {
+  background-color: transparent !important;
+}
+
+[class*="diygw-line"]::after {
+  content: " ";
+  display: block;
+  width: 200%;
+  height: 200%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 1rpx solid currentColor;
+  transform: scale(0.5);
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  border-radius: $diygw-radius;
+  z-index: 1;
+  pointer-events: none;
+
+}
+
+[class*="diygw-lines"]::after {
+  border: 6rpx solid currentColor;
+}
+
+
+.diygw-pzx{
+  width:100%;
+  margin:10rpx 0;
+}
+
+
+.bg-shadeTop {
+  background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
+  color: var(--white);
+}
+
+.bg-shadeBottom {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
+  color: var(--white);
+}
+
+.bg-img {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.bg-mask {
+  background-color: var(--black);
+  position: relative;
+}
+
+.bg-mask::after {
+  content: "";
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+  display: block;
+  background-color: rgba(0, 0, 0, 0.4);
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+}
+
+.bg-mask view,
+.bg-mask cover-view {
+  z-index: 5;
+  position: relative;
+}
+
+.bg-video {
+  position: relative;
+}
+
+.bg-video video {
+  display: block;
+  height: 100%;
+  width: 100%;
+  -o-object-fit: cover;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  z-index: 0;
+  pointer-events: none;
+}

common/diygw-ui/bar.scss

+/* ==================
+          操作条
+ ==================== */
+
+ .diygw-bottom{
+	position: fixed !important;
+	left:0;
+	bottom:0;
+	width:100%;
+	background: #fff;
+	z-index:999999;
+	border-top: 1rpx solid #eee;
+}
+ 
+.diygw-bar {
+	display: flex;
+	position: relative;
+	align-items: center;
+	min-height: 100rpx;
+	justify-content: space-between;
+}
+
+.diygw-bar .action {
+	display: flex;
+	align-items: center;
+	height: 100%;
+	justify-content: center;
+	max-width: 100%;
+}
+
+.diygw-bar .action.border-title {
+	position: relative;
+	top: -10rpx;
+}
+
+.diygw-bar .action.border-title text[class*="bg-"]:last-child {
+	position: absolute;
+	bottom: -0.5rem;
+	min-width: 2rem;
+	height: 6rpx;
+	left: 0;
+}
+
+.diygw-bar .action.sub-title {
+	position: relative;
+	top: -0.2rem;
+}
+
+.diygw-bar .action.sub-title text {
+	position: relative;
+	z-index: 1;
+}
+
+.diygw-bar .action.sub-title text[class*="bg-"]:last-child {
+	position: absolute;
+	display: inline-block;
+	bottom: -0.2rem;
+	border-radius: 6rpx;
+	width: 100%;
+	height: 0.6rem;
+	left: 0.6rem;
+	opacity: 0.3;
+	z-index: 0;
+}
+
+.diygw-bar .action.sub-title text[class*="text-"]:last-child {
+	position: absolute;
+	display: inline-block;
+	bottom: -0.7rem;
+	left: 0.5rem;
+	opacity: 0.2;
+	z-index: 0;
+	text-align: right;
+	font-weight: 900;
+	font-size: 36rpx;
+}
+
+.diygw-bar.justify-center .action.border-title text:last-child,
+.diygw-bar.justify-center .action.sub-title text:last-child {
+	left: 0;
+	right: 0;
+	margin: auto;
+	text-align: center;
+}
+
+.diygw-bar .action:first-child {
+	margin-left: 30rpx;
+	font-size: 30rpx;
+}
+
+.diygw-bar .action text.text-cut {
+	text-align: left;
+	width: 100%;
+}
+
+.diygw-bar .diygw-avatar:first-child {
+	margin-left: 20rpx;
+}
+
+.diygw-bar .action:first-child>text[class*="diygwIcon-"] {
+	margin-left: -0.3em;
+	margin-right: 0.3em;
+}
+
+.diygw-bar .action:last-child {
+	margin-right: 30rpx;
+}
+
+.diygw-bar .action>text[class*="diygwIcon-"],
+.diygw-bar .action>view[class*="diygwIcon-"] {
+	font-size:36rpx;
+}
+
+.diygw-bar .action>text[class*="diygwIcon-"]+text[class*="diygwIcon-"] {
+	margin-left: 0.5em;
+}
+
+.diygw-bar .content {
+	position: absolute;
+	text-align: center;
+	width: calc(100% - 340rpx);
+	left: 0;
+	right: 0;
+	bottom: 0;
+	top: 0;
+	margin: auto;
+	height: 60rpx;
+	font-size: 32rpx;
+	line-height: 60rpx;
+	cursor: none;
+	pointer-events: none;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.diygw-bar.ios .content {
+	bottom: 14rpx;
+	height: 60rpx;
+	font-size: 32rpx;
+	line-height: 60rpx;
+}
+
+.diygw-bar.btn-group {
+	justify-content: space-around;
+}
+
+.diygw-bar.btn-group button {
+	padding: 20rpx 32rpx;
+}
+
+.diygw-bar.btn-group button {
+	flex: 1;
+	margin: 0 20rpx;
+	max-width: 50%;
+}
+
+.diygw-bar .search-form {
+	background-color: #f5f5f5;
+	line-height: 64rpx;
+	height: 64rpx;
+	font-size: 24rpx;
+	color: var(--black);
+	flex: 1;
+	display: flex;
+	align-items: center;
+	margin: 0 30rpx;
+}
+
+.diygw-bar .search-form+.action {
+	margin-right: 30rpx;
+}
+
+.diygw-bar .search-form input {
+	flex: 1;
+	padding-right: 30rpx;
+	height: 64rpx;
+	line-height: 64rpx;
+	font-size: 16rpx;
+	background-color: transparent;
+}
+
+.diygw-bar .search-form [class*="diygwIcon-"] {
+	margin: 0 0.5em 0 0.8em;
+}
+
+.diygw-bar .search-form [class*="diygwIcon-"]::before {
+	top: 0px;
+}
+
+.diygw-bar.fixed,.nav.fixed {
+	position: fixed;
+	width: 100%;
+	top: 0;
+	z-index: 1024;
+	box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
+}
+
+.diygw-bar.foot {
+	position: fixed;
+	width: 100%;
+	bottom: 0;
+	z-index: 1024;
+	box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1);
+}
+
+.diygw-bar.tabbar {
+	padding: 0;
+	height: calc(100rpx + env(safe-area-inset-bottom) / 2);
+	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
+}
+
+.diygw-tabbar-height {
+	min-height: 100rpx;
+	height: calc(100rpx + env(safe-area-inset-bottom) / 2);
+}
+
+.diygw-bar.tabbar.shadow {
+	box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1);
+}
+
+.diygw-bar.tabbar .action {
+	font-size: 24rpx;
+	position: relative;
+	flex: 1;
+	text-align: center;
+	padding: 0;
+	display: block;
+	height: auto;
+	line-height: 1;
+	margin: 0;
+	overflow: initial;
+}
+
+.diygw-bar.tabbar.shop .action {
+	width: 280px;
+	flex: initial;
+}
+
+.diygw-bar.tabbar .action.add-action {
+	position: relative;
+	z-index: 2;
+	padding-top: 50rpx;
+	background-color: inherit;
+}
+
+.diygw-bar.tabbar .action.add-action [class*="diygwIcon-"] {
+	position: absolute;
+	width: 70rpx;
+	z-index: 2;
+	height: 70rpx;
+	border-radius: 50%;
+	line-height: 70rpx;
+	font-size: 50rpx;
+	top: -35rpx;
+	left: 0;
+	right: 0;
+	margin: auto;
+	padding: 0;
+}
+
+.diygw-bar.tabbar .action.add-action::after {
+	content: "";
+	position: absolute;
+	width: 100rpx;
+	height: 100rpx;
+	top: -50rpx;
+	left: 0;
+	right: 0;
+	margin: auto;
+	box-shadow: 0 -3rpx 8rpx rgba(0, 0, 0, 0.08);
+	border-radius: 50rpx;
+	background-color: inherit;
+	z-index: 0;
+}
+
+.diygw-bar.tabbar .action.add-action::before {
+	content: "";
+	position: absolute;
+	width: 100rpx;
+	height: 30rpx;
+	bottom: 30rpx;
+	left: 0;
+	right: 0;
+	margin: auto;
+	background-color: inherit;
+	z-index: 1;
+}
+
+.diygw-bar.tabbar .btn-group {
+	flex: 1;
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+	padding: 0 10rpx;
+}
+
+.diygw-bar.tabbar button.action::after {
+	border: 0;
+}
+
+.diygw-bar.tabbar .action [class*="diygwIcon-"] {
+	width: 100rpx;
+	position: relative;
+	display: block;
+	height: auto;
+	margin: 0 auto 10rpx;
+	text-align: center;
+	font-size: 40px;
+}
+
+.diygw-bar.tabbar .action .diygwIcon-diygw-image {
+	margin: 0 auto;
+}
+
+.diygw-bar.tabbar .action .diygwIcon-diygw-image image {
+	width: 50rpx;
+	height: 50rpx;
+	display: inline-block;
+}
+
+.diygw-bar.tabbar .submit {
+	align-items: center;
+	display: flex;
+	justify-content: center;
+	text-align: center;
+	position: relative;
+	flex: 2;
+	align-self: stretch;
+}
+
+.diygw-bar.tabbar .submit:last-child {
+	flex: 2.6;
+}
+
+.diygw-bar.tabbar .submit+.submit {
+	flex: 2;
+}
+
+.diygw-bar.tabbar.border .action::before {
+	content: " ";
+	width: 200%;
+	height: 200%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	transform: scale(0.5);
+	transform-origin: 0 0;
+	border-right: 1rpx solid rgba(0, 0, 0, 0.1);
+	z-index: 3;
+}
+
+.diygw-bar.tabbar.border .action:last-child:before {
+	display: none;
+}
+
+.diygw-bar.input {
+	padding-right: 20rpx;
+	background-color: var(--white);
+}
+
+.diygw-bar.input input {
+	overflow: initial;
+	line-height: 64rpx;
+	height: 64rpx;
+	min-height: 64rpx;
+	flex: 1;
+	font-size: 30rpx;
+	margin: 0 20rpx;
+}
+
+.diygw-bar.input .action {
+	margin-left: 20rpx;
+}
+
+.diygw-bar.input .action [class*="diygwIcon-"] {
+	font-size: 48rpx;
+}
+
+.diygw-bar.input input+.action {
+	margin-right: 20rpx;
+	margin-left: 0px;
+}
+
+.diygw-bar.input .action:first-child [class*="diygwIcon-"] {
+	margin-left: 0px;
+}

common/diygw-ui/button.scss

+/* ==================
+          按钮
+ ==================== */
+ @import './var.scss';
+
+
+.diygw-btn {
+  position: relative;
+  border: 0px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  line-height: 1;
+  text-align: center;
+  text-decoration: none;
+  overflow: visible;
+   border-radius: 0;
+  transform: translate(0px, 0px);
+}
+
+.diygw-btn::after {
+  display: none;
+}
+
+.diygw-btn:not([class*="bg-"]) {
+  background-color: transparent;
+}
+
+.diygw-btn[class*="line"] {
+  background-color: transparent;
+}
+
+.diygw-btn[class*="line"]::after {
+  content: " ";
+  display: block;
+  width: 200%;
+  height: 200%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 1rpx solid currentColor;
+  transform: scale(0.5);
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  border-radius: $diygw-radius;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.diygw-btn[class*="lines"]::after {
+  border: 6rpx solid currentColor;
+}
+
+.diygw-btn[class*="bg-"]::after {
+  display: none;
+}
+
+.diygw-btn .diygw-btn-icon {
+  border-radius: 500px;
+  padding: 0;
+  margin-right:6rpx;
+  font-size: inherit;
+}
+
+
+.diygw-btn.button-hover {
+  transform: translate(1rpx, 1rpx);
+}
+
+.block {
+  display: block;
+}
+
+.diygw-btn.block {
+  display: flex;
+  width: 100%;
+}
+
+.diygw-btn[disabled] {
+  opacity: 0.6;
+}
+
+@mixin set-button($type) {
+  @if $type == none {
+    .diygw-btn {
+      padding: 0 map-get($diygw-padding, $type);
+      font-size: map-get($diygw-font-sizes, $type);
+      height: map-get($diygw-height, $type);
+    }
+    .diygw-btn.diygw-icon {
+      width: map-get($diygw-height, $type);
+      height: map-get($diygw-height, $type);
+    }
+  } @else {
+    .diygw-btn.#{$type} {
+      padding: 0 map-get($diygw-padding, $type);
+      font-size: map-get($diygw-font-sizes, $type);
+      height: map-get($diygw-height, $type);
+    }
+    .diygw-btn.diygw-icon.#{$type} {
+      width: map-get($diygw-font-sizes, $type);
+      height: map-get($diygw-font-sizes, $type);
+    }
+  }
+}
+
+@each $type in $diygw-sizes {
+  @include set-button($type);
+}

common/diygw-ui/card.scss

+
+/* ==================
+         卡片
+ ==================== */
+
+.diygw-card {
+    overflow: hidden;
+    margin: 16rpx;
+    border-radius: 10rpx;
+}
+
+

common/diygw-ui/chat.scss

+
+/* ==================
+         聊天
+ ==================== */
+
+ .diygw-chat {
+	display: flex;
+	flex-direction: column;
+}
+
+.diygw-chat .diygw-item {
+	display: flex;
+	padding: 30rpx 30rpx 70rpx;
+	position: relative;
+}
+
+.diygw-chat .diygw-item>.diygw-avatar {
+	width: 80rpx;
+	height: 80rpx;
+}
+
+.diygw-chat .diygw-item>.main {
+	max-width: calc(100% - 260rpx);
+	margin: 0 40rpx;
+	display: flex;
+	align-items: center;
+}
+
+.diygw-chat .diygw-item>image {
+	height: 320rpx;
+}
+
+.diygw-chat .diygw-item>.main .content {
+	padding: 20rpx;
+	border-radius: 6rpx;
+	display: inline-flex;
+	max-width: 100%;
+	align-items: center;
+	font-size: 30rpx;
+	position: relative;
+	min-height: 80rpx;
+	line-height: 40rpx;
+	text-align: left;
+}
+
+.diygw-chat .diygw-item>.main .content:not([class*="bg-"]) {
+	background-color: var(--white);
+	color: var(--black);
+}
+
+.diygw-chat .diygw-item .date {
+	position: absolute;
+	font-size: 24rpx;
+	color: var(--grey);
+	width: calc(100% - 320rpx);
+	bottom: 20rpx;
+	left: 160rpx;
+}
+
+.diygw-chat .diygw-item .action {
+	padding: 0 30rpx;
+	display: flex;
+	align-items: center;
+}
+
+.diygw-chat .diygw-item>.main .content::after {
+	content: "";
+	top: 27rpx;
+	transform: rotate(45deg);
+	position: absolute;
+	z-index: 100;
+	display: inline-block;
+	overflow: hidden;
+	width: 24rpx;
+	height: 24rpx;
+	left: -12rpx;
+	right: initial;
+	background-color: inherit;
+}
+
+.diygw-chat .diygw-item.self>.main .content::after {
+	left: auto;
+	right: -12rpx;
+}
+
+.diygw-chat .diygw-item>.main .content::before {
+	content: "";
+	top: 30rpx;
+	transform: rotate(45deg);
+	position: absolute;
+	z-index: -1;
+	display: inline-block;
+	overflow: hidden;
+	width: 24rpx;
+	height: 24rpx;
+	left: -12rpx;
+	right: initial;
+	background-color: inherit;
+	filter: blur(5rpx);
+	opacity: 0.3;
+}
+
+.diygw-chat .diygw-item>.main .content:not([class*="bg-"])::before {
+	background-color: var(--black);
+	opacity: 0.1;
+}
+
+.diygw-chat .diygw-item.self>.main .content::before {
+	left: auto;
+	right: -12rpx;
+}
+
+.diygw-chat .diygw-item.self {
+	justify-content: flex-end;
+	text-align: right;
+}
+
+.diygw-chat .diygw-info {
+	display: inline-block;
+	margin: 20rpx auto;
+	font-size: 24rpx;
+	padding: 8rpx 12rpx;
+	background-color: rgba(0, 0, 0, 0.2);
+	border-radius: 6rpx;
+	color: var(--white);
+	max-width: 400rpx;
+	line-height: 1.4;
+}
\ No newline at end of file

common/diygw-ui/col.mp.scss

+
+@for $i from 1 through 24 {
+    .diygw-col-#{$i} {
+      width: (1 / 24 * $i * 100) * 1% !important;
+    }
+  
+    .diygw-col-offset-#{$i} {
+      margin-left: (1 / 24 * $i * 100) * 1%;
+    }
+  
+    .diygw-col-pull-#{$i} {
+      position: relative;
+      right: (1 / 24 * $i * 100) * 1%;
+    }
+  
+    .diygw-col-push-#{$i} {
+      position: relative;
+      left: (1 / 24 * $i * 100) * 1%;
+    }
+}

common/diygw-ui/col.scss

+
+[class*=diygw-col-] {
+  float: left;
+  box-sizing: border-box;
+  position: relative;
+}
+.diygw-col-0 {
+  width: auto;
+}
+.diygw-col-1 {
+  width: 4.1666666667% !important;
+}
+.diygw-col-offset-1 {
+  margin-left: 4.1666666667%;
+}
+.diygw-col-pull-1 {
+  position: relative;
+  right: 4.1666666667%;
+}
+.diygw-col-push-1 {
+  position: relative;
+  left: 4.1666666667%;
+}
+.diygw-col-2 {
+  width: 8.3333333333% !important;
+}
+.diygw-col-offset-2 {
+  margin-left: 8.3333333333%;
+}
+.diygw-col-pull-2 {
+  position: relative;
+  right: 8.3333333333%;
+}
+.diygw-col-push-2 {
+  position: relative;
+  left: 8.3333333333%;
+}
+.diygw-col-3 {
+  width: 12.5% !important;
+}
+.diygw-col-offset-3 {
+  margin-left: 12.5%;
+}
+.diygw-col-pull-3 {
+  position: relative;
+  right: 12.5%;
+}
+.diygw-col-push-3 {
+  position: relative;
+  left: 12.5%;
+}
+.diygw-col-4 {
+  width: 16.6666666667% !important;
+}
+.diygw-col-offset-4 {
+  margin-left: 16.6666666667%;
+}
+.diygw-col-pull-4 {
+  position: relative;
+  right: 16.6666666667%;
+}
+.diygw-col-push-4 {
+  position: relative;
+  left: 16.6666666667%;
+}
+.diygw-col-5 {
+  width: 20.8333333333% !important;
+}
+.diygw-col-offset-5 {
+  margin-left: 20.8333333333%;
+}
+.diygw-col-pull-5 {
+  position: relative;
+  right: 20.8333333333%;
+}
+.diygw-col-push-5 {
+  position: relative;
+  left: 20.8333333333%;
+}
+.diygw-col-6 {
+  width: 25% !important;
+}
+.diygw-col-offset-6 {
+  margin-left: 25%;
+}
+.diygw-col-pull-6 {
+  position: relative;
+  right: 25%;
+}
+.diygw-col-push-6 {
+  position: relative;
+  left: 25%;
+}
+.diygw-col-7 {
+  width: 29.1666666667% !important;
+}
+.diygw-col-offset-7 {
+  margin-left: 29.1666666667%;
+}
+.diygw-col-pull-7 {
+  position: relative;
+  right: 29.1666666667%;
+}
+.diygw-col-push-7 {
+  position: relative;
+  left: 29.1666666667%;
+}
+.diygw-col-8 {
+  width: 33.3333333333% !important;
+}
+.diygw-col-offset-8 {
+  margin-left: 33.3333333333%;
+}
+.diygw-col-pull-8 {
+  position: relative;
+  right: 33.3333333333%;
+}
+.diygw-col-push-8 {
+  position: relative;
+  left: 33.3333333333%;
+}
+.diygw-col-9 {
+  width: 37.5% !important;
+}
+.diygw-col-offset-9 {
+  margin-left: 37.5%;
+}
+.diygw-col-pull-9 {
+  position: relative;
+  right: 37.5%;
+}
+.diygw-col-push-9 {
+  position: relative;
+  left: 37.5%;
+}
+.diygw-col-10 {
+  width: 41.6666666667% !important;
+}
+.diygw-col-offset-10 {
+  margin-left: 41.6666666667%;
+}
+.diygw-col-pull-10 {
+  position: relative;
+  right: 41.6666666667%;
+}
+.diygw-col-push-10 {
+  position: relative;
+  left: 41.6666666667%;
+}
+.diygw-col-11 {
+  width: 45.8333333333% !important;
+}
+.diygw-col-offset-11 {
+  margin-left: 45.8333333333%;
+}
+.diygw-col-pull-11 {
+  position: relative;
+  right: 45.8333333333%;
+}
+.diygw-col-push-11 {
+  position: relative;
+  left: 45.8333333333%;
+}
+.diygw-col-12 {
+  width: 50% !important;
+}
+.diygw-col-offset-12 {
+  margin-left: 50%;
+}
+.diygw-col-pull-12 {
+  position: relative;
+  right: 50%;
+}
+.diygw-col-push-12 {
+  position: relative;
+  left: 50%;
+}
+.diygw-col-13 {
+  width: 54.1666666667% !important;
+}
+.diygw-col-offset-13 {
+  margin-left: 54.1666666667%;
+}
+.diygw-col-pull-13 {
+  position: relative;
+  right: 54.1666666667%;
+}
+.diygw-col-push-13 {
+  position: relative;
+  left: 54.1666666667%;
+}
+.diygw-col-14 {
+  width: 58.3333333333% !important;
+}
+.diygw-col-offset-14 {
+  margin-left: 58.3333333333%;
+}
+.diygw-col-pull-14 {
+  position: relative;
+  right: 58.3333333333%;
+}
+.diygw-col-push-14 {
+  position: relative;
+  left: 58.3333333333%;
+}
+.diygw-col-15 {
+  width: 62.5% !important;
+}
+.diygw-col-offset-15 {
+  margin-left: 62.5%;
+}
+.diygw-col-pull-15 {
+  position: relative;
+  right: 62.5%;
+}
+.diygw-col-push-15 {
+  position: relative;
+  left: 62.5%;
+}
+.diygw-col-16 {
+  width: 66.6666666667% !important;
+}
+.diygw-col-offset-16 {
+  margin-left: 66.6666666667%;
+}
+.diygw-col-pull-16 {
+  position: relative;
+  right: 66.6666666667%;
+}
+.diygw-col-push-16 {
+  position: relative;
+  left: 66.6666666667%;
+}
+.diygw-col-17 {
+  width: 70.8333333333% !important;
+}
+.diygw-col-offset-17 {
+  margin-left: 70.8333333333%;
+}
+.diygw-col-pull-17 {
+  position: relative;
+  right: 70.8333333333%;
+}
+.diygw-col-push-17 {
+  position: relative;
+  left: 70.8333333333%;
+}
+.diygw-col-18 {
+  width: 75% !important;
+}
+.diygw-col-offset-18 {
+  margin-left: 75%;
+}
+.diygw-col-pull-18 {
+  position: relative;
+  right: 75%;
+}
+.diygw-col-push-18 {
+  position: relative;
+  left: 75%;
+}
+.diygw-col-19 {
+  width: 79.1666666667% !important;
+}
+.diygw-col-offset-19 {
+  margin-left: 79.1666666667%;
+}
+.diygw-col-pull-19 {
+  position: relative;
+  right: 79.1666666667%;
+}
+.diygw-col-push-19 {
+  position: relative;
+  left: 79.1666666667%;
+}
+.diygw-col-20 {
+  width: 83.3333333333% !important;
+}
+.diygw-col-offset-20 {
+  margin-left: 83.3333333333%;
+}
+.diygw-col-pull-20 {
+  position: relative;
+  right: 83.3333333333%;
+}
+.diygw-col-push-20 {
+  position: relative;
+  left: 83.3333333333%;
+}
+.diygw-col-21 {
+  width: 87.5% !important;
+}
+.diygw-col-offset-21 {
+  margin-left: 87.5%;
+}
+.diygw-col-pull-21 {
+  position: relative;
+  right: 87.5%;
+}
+.diygw-col-push-21 {
+  position: relative;
+  left: 87.5%;
+}
+.diygw-col-22 {
+  width: 91.6666666667% !important;
+}
+.diygw-col-offset-22 {
+  margin-left: 91.6666666667%;
+}
+.diygw-col-pull-22 {
+  position: relative;
+  right: 91.6666666667%;
+}
+.diygw-col-push-22 {
+  position: relative;
+  left: 91.6666666667%;
+}
+.diygw-col-23 {
+  width: 95.8333333333% !important;
+}
+.diygw-col-offset-23 {
+  margin-left: 95.8333333333%;
+}
+.diygw-col-pull-23 {
+  position: relative;
+  right: 95.8333333333%;
+}
+.diygw-col-push-23 {
+  position: relative;
+  left: 95.8333333333%;
+}
+.diygw-col-24 {
+  width: 100% !important;
+}
+.diygw-col-offset-24 {
+  margin-left: 100%;
+}
+.diygw-col-pull-24 {
+  position: relative;
+  right: 100%;
+}
+.diygw-col-push-24 {
+  position: relative;
+  left: 100%;
+}
\ No newline at end of file

common/diygw-ui/col_.scss

+
+
+@use 'sass:math';
+
+[class*=diygw-col-] {
+    float: left;
+    box-sizing: border-box;
+}
+.diygw-col-0{
+  width: auto;
+}
+
+
+
+@for $i from 1 through 24 {
+    .diygw-col-#{$i} {
+      width: (math.div(1, 24) * $i * 100) * 1% !important;
+    }
+  
+    .diygw-col-offset-#{$i} {
+      margin-left: (math.div(1, 24) * $i * 100) * 1%;
+    }
+  
+    .diygw-col-pull-#{$i} {
+      position: relative;
+      right: (math.div(1, 24) * $i * 100) * 1%;
+    }
+  
+    .diygw-col-push-#{$i} {
+      position: relative;
+      left: (math.div(1, 24) * $i * 100) * 1%;
+    }
+}
+
+

common/diygw-ui/collapse.scss

+/* ==================
+        折叠面板
+==================== */
+
+.diy-collapse-icon{
+    transition: transform 0.6s;
+}
+.diy-collapse-active{
+    transform: rotateZ(-180deg);
+}
\ No newline at end of file

common/diygw-ui/cubes.scss

+/* ==================
+         魔方布局
+ ==================== */
+.diygw-cubes {
+  width:100vw !important;
+  position: relative;
+  height:100vw;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  overflow: hidden;
+
+  .diygw-cube-item{
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    overflow: hidden;
+
+    .diygw-cube-img{
+      object-fit: cover;
+      height: 100%;
+      width: 100%;
+    }
+  }
+}
\ No newline at end of file

common/diygw-ui/flex.scss

+/*  -- flex弹性布局 -- */
+
+.flex {
+	display: flex;
+}
+
+.basis-xs {
+	flex-basis: 20%;
+}
+
+.basis-sm {
+	flex-basis: 40%;
+}
+
+.basis-df {
+	flex-basis: 50%;
+}
+
+.basis-lg {
+	flex-basis: 60%;
+}
+
+.basis-xl {
+	flex-basis: 80%;
+}
+
+.flex1,.flex-sub {
+	flex: 1;
+}
+
+.flex-twice {
+	flex: 2;
+}
+
+.flex-treble {
+	flex: 3;
+}
+
+.flex-direction-column {
+	flex-direction: column;
+	.flex1{
+		flex: inherit;
+	}
+}
+
+.flex-direction-row-reverse {
+	flex-direction: row-reverse;
+}
+
+.flex-direction-column-reverse {
+	flex-direction: column-reverse;
+	.flex1{
+		flex: inherit;
+	}
+}
+
+
+.flex-wrap {
+	flex-wrap: wrap;
+}
+.flex-nowrap{
+	flex-wrap: nowrap;
+}
+.flex-wrap-reverse {
+	flex-wrap:wrap-reverse;
+}
+
+
+.align-start,.items-start {
+	align-items: flex-start;
+}
+
+.align-end,.items-end {
+	align-items: flex-end;
+}
+
+.align-center,.items-center {
+	align-items: center;
+}
+
+.align-stretch,.items-stretch {
+	align-items: stretch;
+}
+.align-baseline,.items-baseline {
+	align-items: baseline;
+}
+
+.self-start {
+	align-self: flex-start;
+}
+
+.self-center {
+	align-self: flex-center;
+}
+
+.self-end {
+	align-self: flex-end;
+}
+
+.self-stretch {
+	align-self: stretch;
+}
+
+.align-stretch {
+	align-items: stretch;
+}
+
+.justify-start {
+	justify-content: flex-start;
+}
+
+.justify-end {
+	justify-content: flex-end;
+}
+
+.justify-center {
+	justify-content: center;
+}
+
+.justify-between {
+	justify-content: space-between;
+}
+
+.justify-around {
+	justify-content: space-around;
+}
+.items-end{
+	align-items: flex-end;
+}
+.scroll-view{
+	overflow-x: auto;
+	flex-wrap: nowrap;
+	display: flex;
+	flex-direction: row !important;
+	>.flex{
+		overflow-x: auto;
+	}
+	[class*="diygw-col-"]{
+		flex-shrink: 0;
+	}
+}
\ No newline at end of file

common/diygw-ui/float.scss

+
+/* -- 浮动 --  */
+
+.cf::after,
+.cf::before {
+	content: " ";
+	display: table;
+}
+
+.cf::after {
+	clear: both;
+}
+
+.fl {
+	float: left;
+}
+
+.fr {
+	float: right;
+}

common/diygw-ui/floatbar.scss

+.diygw-floatbar,.right-top,.right-bottom,.left-top,.left-bottom {
+  position: fixed;
+  z-index: 9999;
+  white-space: nowrap;
+  align-items: center;
+  display: flex;
+  justify-content: space-around;
+
+  .diygw-grid.diygw-actions{
+      flex-direction: column;
+      .diygw-action{
+        padding:10rpx;
+      }
+      
+  }
+  &.inline{
+      .diygw-grid-inner{
+          flex-direction: row !important;
+          .diygw-grid-title{
+            margin-left:10rpx;
+          }
+      }
+  }
+}
+
+.right-top,.right-bottom {
+  right: 0px;
+}
+
+.left-top,.left-bottom {
+  left: 0px;
+}
+
+.left-top {
+  right: 0px;
+}

common/diygw-ui/form.scss

+
+
+/* ==================
+         表单
+ ==================== */
+.diygw-form{
+	flex-wrap: wrap;
+	width: 100%;
+}
+
+/* ==================
+         表单
+ ==================== */
+
+.diygw-form-item {
+	width: 100%;
+	&.diygw-col-0{
+		width: auto;
+	}
+	padding: 12rpx 32rpx;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	position: relative;
+	&.diygw-form-item-small{
+		padding:0px 12rpx;
+		[class*=diy-icon-] {
+			height:auto !important;
+		}
+		&:after {
+			right: 10rpx;
+			left: 10rpx;
+		}
+	}
+	&:after {
+		position: absolute;
+		box-sizing: border-box;
+		content: ' ';
+		pointer-events: none;
+		right: 24rpx;
+		bottom: 0;
+		left: 24rpx;
+		border-bottom: 1px solid #ebedf0;
+		-webkit-transform: scaleY(0.5);
+		transform: scaleY(0.5);
+	}
+
+	&.noborder::after{
+		display: none;
+	}
+
+	.title {
+		text-align: left;
+		width: var(--form-label-width);
+		padding:4px 0;
+		font-weight: bold;
+		word-wrap: break-word;
+		margin-right: 24rpx;
+		position: relative;
+
+		&.title-mb5{
+			margin-bottom: 10rpx;
+		}
+	}
+
+	.input {
+		flex: 1;
+		display: flex;
+		box-sizing: border-box;
+		align-items: center;
+		width: 100%;
+		min-width: 0;
+		margin: 0;
+		padding:12rpx 0px;
+		color: var(--black);
+		line-height: inherit;
+		text-align: left;
+		background-color: transparent;
+		resize: none;
+		position: relative;
+		.diygw-tag,[class*="diy-icon-"]{
+			margin-right: 10rpx;
+			max-height: 48rpx;
+		}
+		.icon-right{
+			width:50rpx;
+		}
+		.diygw-icon{
+			width:50rpx;
+			height:50rpx;
+			margin-right: 10rpx;
+		}
+	}
+
+
+	.input.flex{
+		padding-right:0px;
+		display: flex;
+		.flex1{
+			width: 100%;
+		}
+	}
+
+
+	textarea {
+		height: 4.6em;
+		width: 100%;
+		flex: 1;
+		resize: none;
+	}
+
+	text[class*="diygwIcon-"] {
+		font-size: 36rpx;
+		padding: 0;
+		box-sizing: border-box;
+	}
+
+	.align-start .title {
+		height: 1em;
+		margin-top: 32rpx;
+		line-height: 1em;
+	}
+
+	.input{
+		padding: 12rpx 0;
+		&.solid{
+			padding:12rpx 0 12rpx 20rpx;
+
+			&:after{
+				border-radius: 16rpx;
+			}
+
+			&.radius {
+				overflow: hidden;
+				&:after{
+					border-radius:50px;
+				}
+			}
+		}
+	}
+
+	&.flex-direction-column{
+		align-items: flex-start;
+		.title{
+			margin-right: 0px;
+			margin-bottom: 0px;
+		}
+	}
+
+}
+
+
+
+
+.diygw-form-item picker {
+	flex: 1;
+	padding-right: 40rpx;
+	overflow: hidden;
+	position: relative;
+
+	.picker-item{
+		height:48rpx;
+		line-height:48rpx;
+	}
+
+}
+
+.diygw-form-item picker::after {
+	font-family: "diygwui";
+	display: block;
+	content: "\e71a";
+	position: absolute;
+	font-size: 34rpx;
+	width: 30rpx;
+	color: #c0c4cc;
+	text-align: center;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	margin: auto;
+}
+
+.diygw-form-item textarea[disabled],
+.diygw-form-item textarea[disabled] .placeholder {
+	color: transparent;
+}
+
+
+.upload{
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	width: 160rpx;
+	height: 160rpx;
+	margin: 0 16rpx 16rpx 0;
+	background: #f7f8fa;
+	border-radius: 4rpx;
+	overflow: hidden;
+
+	.image{
+		width: 160rpx;
+		height: 160rpx;
+	}
+	.diy-icon-close{
+		position: absolute;
+		right:0;
+		top:0;
+		display: block;
+		width:36rpx;
+		font-size: 36rpx;
+		height: 36rpx;
+		color:#FFF;
+		background:rgba(0, 0, 0, 0.88);
+		border-radius: 0 0 0 12rpx;
+	}
+}
\ No newline at end of file

common/diygw-ui/grid.scss

+
+
+/* grid布局 */
+
+.diygw-grid {
+	display: flex;
+	flex-wrap: wrap;
+	flex: 1;
+
+    &.scroll-view{
+		flex-wrap: nowrap;
+	}
+	
+	[class*="bg-"] .diygw-avatar{
+		color: #fff;
+	}
+}
+
+
+.diygw-grid-inner{
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+	flex-direction: column;
+	text-align: center;
+	padding:20rpx;
+	position: relative;
+	background-position: center;
+	background-repeat: no-repeat;
+}
+
+.diygw-grid-inner.border::after {
+	position: absolute;
+	box-sizing: border-box;
+	content: ' ';
+	pointer-events: none;
+	top: -50%;
+	right: -50%;
+	bottom: -50%;
+	left: -50%;
+	border: 0 solid #ebedf0;
+	-webkit-transform: scale(0.5);
+	transform: scale(0.5);
+	z-index: 1;
+	border-width: 0 1rpx 1rpx 0;
+}
+
+.diygw-grid-icon{
+	width:48px;
+	height:48px;
+}
+.diygw-grid.col-1 {
+	.diygw-grid-item{
+		width: 100%;
+	}
+
+}
+
+.diygw-grid.col-2{
+	.diygw-grid-item{
+		width: 50%;
+	}
+
+}
+
+.diygw-grid.col-3{
+	.diygw-grid-item{
+		width: 33.33%;
+	}
+
+}
+
+.diygw-grid.col-4 {
+	.diygw-grid-item{
+		width: 25%;
+	}
+
+}
+
+.diygw-grid.col-5 {
+	.diygw-grid-item{
+		width: 20%;
+	}
+
+}
+
+.diygw-grid .diygw-avatar{
+	background-color: transparent;
+	font-size: 80rpx;
+	color:#333;
+	.diygw-tag[class*="diy-icon-"]{
+		font-size: 20rpx;
+	}
+}
+
+
+.diygw-grid.diygw-actions{
+	background: inherit;
+	align-items: center;
+
+	button.diygw-action{
+		border: 0px;
+		background:none;
+		position: relative;
+		border: 0px;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		line-height: 1;
+		text-align: center;
+		text-decoration: none;
+		overflow: visible;
+		transform: translate(0px, 0px);
+	}
+	button.diygw-action::after {
+		display: none;
+	}
+
+	.diygw-action{
+		flex:1;
+		padding: 6rpx 0;
+
+		&[class*="bg-"]{
+			flex:2;
+			[class*="diy-icon-"]{
+				color: inherit;
+			}
+		}
+		&.radius-right{
+			margin-right: 10rpx;
+		}
+		&.radius-left{
+			margin-left: 10rpx;
+		}
+		&.radius{
+			margin-right: 10rpx;
+			margin-left: 10rpx;
+		}
+		.diygw-grid-inner{
+			padding:0;
+			flex:1;
+		}
+		.diygw-avatar{
+			width:60rpx;
+			height:60rpx;
+			font-size:60rpx;
+		}
+		.diygw-grid-inner.border::after{
+			border-width: 0 1rpx 0 0;
+		}
+
+		.diygw-grid-title{
+			&.not-avatar{
+				font-size:16px;
+				line-height: 80rpx;
+			}
+		}
+
+		&.addon {
+			position: relative;
+			z-index: 2;
+			padding-top: 60rpx;
+			background-color: inherit;
+
+			.diygw-grid-title{
+				z-index: 2;
+			}
+
+			.diygw-grid-icon {
+				position: absolute;
+				max-width: 70rpx;
+				z-index: 2;
+				max-height: 70rpx;
+				border-radius: 50%;
+				line-height:70rpx;
+				font-size: 50rpx;
+				top: -64rpx;
+				left: 0;
+				right: 0;
+				margin: auto;
+				padding: 0;
+			}
+
+			
+
+			&:before {
+				position: absolute;
+				width: 100rpx;
+				height: 100rpx;
+				top: -24rpx;
+				left: 0;
+				right: 0;
+				margin: auto;
+				content: "";
+				box-shadow: 0 -4rpx 8rpx rgba(0, 0, 0, 0.08);
+				border-radius: 50rpx;
+				background-color: inherit;
+				z-index: 0;
+			}
+		}
+	}
+	.diygw-action:last-child{
+		.diygw-grid-inner.border::after,.diygw-grid-inner.border::solid-right{
+			border-width: 0;
+		}
+	}
+}

common/diygw-ui/header.scss

+.diygw-custom {
+	display: block;
+	position: relative;
+}
+
+.diygw-custom .diygw-bar .content {
+	width: calc(100% - 440rpx);
+}
+
+
+.diygw-custom .diygw-bar .content image {
+	height: 60rpx;
+	width: 240rpx;
+}
+
+.diygw-custom .diygw-bar {
+	min-height: 0px;
+	padding-right: 220rpx;
+	box-shadow: 0rpx 0rpx 0rpx;
+	z-index: 9999;
+}
+
+.diygw-custom .diygw-bar .border-custom {
+	position: relative;
+	background: rgba(0, 0, 0, 0.15);
+	border-radius: 1000rpx;
+	height: 60rpx;
+}
+
+.diygw-custom .diygw-bar .border-custom::after {
+	content: " ";
+	width: 200%;
+	height: 200%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	border-radius: inherit;
+	transform: scale(0.5);
+	transform-origin: 0 0;
+	pointer-events: none;
+	box-sizing: border-box;
+	border: 1rpx solid var(--white);
+	opacity: 0.5;
+}
+
+.diygw-custom .diygw-bar .border-custom::before {
+	content: " ";
+	width: 1rpx;
+	height: 110%;
+	position: absolute;
+	top: 22.5%;
+	left: 0;
+	right: 0;
+	margin: auto;
+	transform: scale(0.5);
+	transform-origin: 0 0;
+	pointer-events: none;
+	box-sizing: border-box;
+	opacity: 0.6;
+	background-color: var(--white);
+}
+
+.diygw-custom .diygw-bar .border-custom text {
+	display: block;
+	flex: 1;
+	margin: auto !important;
+	text-align: center;
+	font-size: 34rpx;
+}
+
+

common/diygw-ui/image.scss

+/* ==================
+          图片
+ ==================== */
+
+ image {
+	max-width: 100%;
+	display: inline-block;
+	position: relative;
+	z-index: 0;
+}
+
+image.loading::before {
+	content: "";
+	background-color: #f5f5f5;
+	display: block;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	z-index: -2;
+}
+
+image.loading::after {
+	content: "\e7f1";
+	font-family: "diygwIcon";
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 32rpx;
+	height: 32rpx;
+	line-height: 32rpx;
+	right: 0;
+	bottom: 0;
+	z-index: -1;
+	font-size: 32rpx;
+	margin: auto;
+	color: #ccc;
+	-webkit-animation: diygwIcon-spin 2s infinite linear;
+	animation: diygwIcon-spin 2s infinite linear;
+	display: block;
+}
\ No newline at end of file

common/diygw-ui/index.scss

+@import './mixins.scss';
+@import './var.scss';
+body,page {
+	--red: #e54d42;
+	--orange: #f37b1d;
+	--yellow: #fbbd08;
+	--olive: #8dc63f;
+	--green: #07c160;
+	--cyan: #1cbbb4;
+	--blue: #0081ff;
+	--purple: #6739b6;
+	--mauve: #9c26b0;
+	--pink: #e03997;
+	--brown: #a5673f;
+	--grey: #8799a3;
+	--black: #333333;
+	--darkGray: #666666;
+	--gray: #aaaaaa;
+	--ghostWhite: #f1f1f1;
+	--white: #ffffff;
+	/* 浅色 */
+	--redLight: #fadbd9;
+	--orangeLight: #fde6d2;
+	--yellowLight: #fef2ce;
+	--oliveLight: #e8f4d9;
+	--greenLight: #d7f0db;
+	--cyanLight: #d2f1f0;
+	--blueLight: #cce6ff;
+	--purpleLight: #e1d7f0;
+	--mauveLight: #ebd4ef;
+	--pinkLight: #f9d7ea;
+	--brownLight: #ede1d9;
+	--greyLight: #e7ebed;
+	/* 渐变色 */
+	--redGradual: linear-gradient(45deg, #f43f3b, #ec008c);
+	--orangeGradual: linear-gradient(45deg, #ff9700, #ed1c24);
+	--greenGradual: linear-gradient(45deg, #39b54a, #8dc63f);
+	--purpleGradual: linear-gradient(45deg, #9000ff, #5e00ff);
+	--pinkGradual: linear-gradient(45deg, #ec008c, #6739b6);
+	--blueGradual: linear-gradient(45deg, #0081ff, #1cbbb4);
+
+	/* 阴影透明色 */
+	--ShadowSize: 0px 0px 8rpx;
+	--whiteShadow: rgba(0, 0, 0, 0.15);
+	--redShadow: rgba(204, 69, 59, 0.2);
+	--orangeShadow: rgba(217, 109, 26, 0.2);
+	--yellowShadow: rgba(224, 170, 7, 0.2);
+	--oliveShadow: rgba(124, 173, 55, 0.2);
+	--greenShadow: rgba(48, 156, 63, 0.3);
+	--cyanShadow: rgba(28, 187, 180, 0.2);
+	--blueShadow: rgba(0, 102, 204, 0.2);
+	--purpleShadow: rgba(88, 48, 156, 0.2);
+	--mauveShadow: rgba(133, 33, 150, 0.2);
+	--pinkShadow: rgba(199, 50, 134, 0.2);
+	--brownShadow: rgba(140, 88, 53, 0.2);
+	--greyShadow: rgba(114, 130, 138, 0.2);
+	--grayShadow: rgba(114, 130, 138, 0.2);
+	--blackShadow: rgba(26, 26, 26, 0.16);
+	--primary-font-size:24rpx;
+	--form-label-width:5em;
+	font-size:24rpx;
+}
+::-webkit-scrollbar {
+	width: 4px;
+	height: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+	background: #bfbfbf;
+	border-radius: 6px;
+}
+
+::-webkit-scrollbar-corner {
+	display: none;
+}
+
+[class*=diygw-] {
+	font-size: inherit;
+}
+view,
+scroll-view,
+swiper,
+button,
+input,
+textarea,
+label,
+navigator,
+image {
+	box-sizing: border-box;
+}
+.htmlcontent{
+	white-space: pre-line;
+	width: 100%;
+}
+.clearfix{
+	box-sizing: border-box;
+	clear: both;
+	&::before,&::after{
+		clear: both;
+		display: table;
+	}
+}
+
+.scroll-view ::-webkit-scrollbar,.uni-scroll-view::-webkit-scrollbar,.uni-scroll-view-content::-webkit-scrollbar,.scroll-view::-webkit-scrollbar,scroll-view::-webkit-scrollbar{
+	width: 0;
+	height: 0;
+	color: transparent;
+	display: none;
+}
+
+.hidden{
+	display: none  !important;
+}
+.pointer{
+	cursor: pointer;
+}
+.container{
+	background-size: cover;
+	background-position:top center;
+	min-height: 100vh;
+}
+.placeholder{
+	color:#c0c4cc
+}
+.diygw-bg{
+	position: relative;
+	&::after{
+		content: "";
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		left: 0;
+		z-index: -1;
+		bottom: 0;
+		opacity: 1;
+		-webkit-transform: scale(1, 1);
+		transform: scale(1, 1);
+		background-size: 100% 100%;
+		background-image: var(--diygw-image);
+	}
+}
+.response {
+	width: 100%;
+	&>div {
+		width: 100%;
+		height: 100%;
+		background-repeat: no-repeat;
+	}
+}
+.diygw-autoview{
+	position: relative;
+}
+.uni-tabbar-bottom,.uni-page-head,.uni-picker-container{
+	z-index:999999
+}
+.uni-sample-toast,uni-toast,uni-modal,.uni-modal{
+	z-index:9999999 !important;
+}
+.uni-picker-container{
+	z-index:9999999 !important
+}
+.diygw-autoview{
+	position: relative;
+	overflow: hidden;
+}
+.diygw-dropdown {
+	overflow: inherit !important;
+}
+
+.diygw-absolute,.diygw-absolute-bottom{
+	position: absolute !important;
+	z-index: 999;
+}
+.diygw-absolute-bottom{
+	top:inherit !important;
+	bottom:0
+}
+
+.diygw-top{
+	position: fixed !important;
+	z-index:999999;
+	left:0px;
+	top:0px;
+	width:100%;
+}
+.diygw-ellipsis{
+    overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.not-border{
+	border:0 !important;
+	&::after,&::before{
+		border:0 !important;
+	}
+	&.diygw-tag{
+		padding-left:0;
+	}
+}
+.font-normal{
+	font-weight: normal;
+}
+
+.font-bold{
+	font-weight: bold;
+}
+.border{
+	border:0;
+}
+.width-auto{
+	width: auto !important;
+}
+[class*=diy-icon-]{
+	font-family: "diygwui" !important;
+	font-size: 32rpx;
+	font-style: normal;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+@each $direction in $diygw-directions {
+	@include set-border($direction);
+}
+@each $size in $diygw-sizes {
+	@include set-margin($size);
+	@include set-padding($size);
+}
+@import './col.scss';
+@import './shadow.scss';
+@import './bar.scss';
+@import './button.scss';
+@import './radius.scss';
+@import './text.scss';
+@import './flex.scss';
+@import './form.scss';
+@import './tag.scss';
+@import './radio.scss';
+@import './grid.scss';
+@import './card.scss';
+@import './swiper.scss';
+@import './avatar.scss';
+@import './background.scss';
+@import './title.scss';
+@import './floatbar.scss';
+@import './modal.scss';
+@import './list.scss';
+@import './timeline.scss';
+@import './steps.scss';
+@import './tabs.scss';
+@import './noticebar.scss';
+@import './progress.scss';
+@import './collapse.scss';
+@import './cubes.scss';
+@import './search.scss';
+
+.diy-sticky-100{
+	width: 100% !important;
+	background-color: #fff;
+	&.diygw-absolute,.diygw-top,.diygw-bottom,.left-bottom,.left-top,.right-bottom,.right-top{
+		position: static !important;
+	}
+}
\ No newline at end of file

common/diygw-ui/list.scss

+
+/* ==================
+          列表
+ ==================== */
+
+
+.diygw-list {
+	width: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-wrap: wrap;
+
+	&.scroll-view{
+		.uni-scroll-view{
+			width: 100%;
+		}
+		
+		overflow-x: auto;
+		flex-wrap: nowrap !important;
+		flex-direction: row !important;
+		.diygw-item{
+			flex-shrink: 0;
+			&.solid-bottom::after{
+				border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
+			}
+		}
+	}
+	
+	&.not-remark{
+		.content{
+			flex-direction: row !important;
+			align-items: center;
+		}
+	}
+
+	.diygw-item {
+		position: relative;
+		display: flex;
+		padding: 20rpx 20rpx;
+        justify-content: flex-end;
+		align-content: center;
+        align-items: stretch;
+		
+		.diygw-avatar{
+			flex-shrink: 0;
+			font-size: 96rpx;
+		}
+
+		&.col-100{
+			width: 100%;
+			&.diygw-card{
+				width: calc(100% - 32rpx);
+			}
+		}
+		&.col-50{
+			width: 50%;
+			&.diygw-card{
+				width: calc(50% - 32rpx);
+			}
+
+			&.solid-bottom:nth-child(2n+1)::after{
+				border-right: 1rpx solid rgba(0, 0, 0, 0.1);
+			}
+		}
+		&.col-33{
+			width: 33.33%;
+			&.diygw-card{
+				width: calc(33.33% - 32rpx);
+			}
+
+			&.solid-bottom:nth-child(3n+1)::after{
+				border-right: 1rpx solid rgba(0, 0, 0, 0.1);
+			}
+
+			&.solid-bottom:nth-child(3n+2)::after{
+				border-right: 1rpx solid rgba(0, 0, 0, 0.1);
+			}
+		}
+
+		&.col-25{
+			width: 25%;
+			&.diygw-card{
+				width: calc(25% - 32rpx);
+			}
+
+			&.solid-bottom:nth-child(4n+1)::after{
+				border-right: 1rpx solid rgba(0, 0, 0, 0.1);
+			}
+
+			&.solid-bottom:nth-child(4n+2)::after{
+				border-right: 1rpx solid rgba(0, 0, 0, 0.1);
+			}
+
+			&.solid-bottom:nth-child(4n+3)::after{
+				border-right: 1rpx solid rgba(0, 0, 0, 0.1);
+			}
+		}
+
+	
+		&.arrow {
+			padding-right: 80rpx !important;
+
+			&:before {
+				position: absolute;
+				top: 0;
+				right: 30rpx;
+				bottom: 0;
+				display: block;
+				margin: auto;
+				width: 30rpx;
+				height: 30rpx;
+				color: #8799a3;
+				content: "\e71a";
+				text-align: center;
+				font-size: 17px;	
+				font-family: diygwui;
+				line-height: 30rpx;
+			}
+			
+			&[class*="bg-"]{
+				&:before {
+					color:#fff;
+				}
+			}
+		}
+
+		.content{
+			flex: 1;
+			padding:4rpx 0 4rpx 12rpx;
+			display: flex;
+			justify-content: space-between;
+			flex-direction: column;
+			.title{
+				font-size: 28rpx;
+			}
+
+			.remark{
+				overflow: hidden;
+				text-overflow: ellipsis;
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+				
+				word-break: break-all; word-wrap:break-word;
+			}
+		}
+
+		&.flex-direction-column-reverse,&.flex-direction-column{
+			align-items: center;
+			.content{
+				padding:4rpx 0;
+				text-align: center;
+			}
+		}
+	}
+	.diygw-avatar{
+		background-color: inherit;
+		color: #333;
+	}
+	
+	&.small{
+		.diygw-avatar{
+			width: 48rpx !important;
+			height: 48rpx !important;
+			font-size: 48rpx  !important;
+		}
+		.content{
+			flex-direction: row !important;
+			align-items: center;
+		}
+	}
+
+	.solid-small-bottom::after{
+		width: calc(200% - 80rpx);
+        left: 20rpx;
+    }
+
+
+	[class*="bg-"] .diygw-avatar{
+		color: #fff;
+	}
+}
+
+.diygw-list{
+	.uni-scroll-view{
+		width: 100%;
+	}
+	&.scroll-view,.uni-scroll-view-content{
+		flex-wrap: nowrap !important;
+		flex-direction: row !important;
+		&::-webkit-scrollbar {
+			display: none; 
+		}
+		.diygw-grid-item{
+			flex-shrink: 0;
+		}
+	}
+}

common/diygw-ui/load.sccs

+
+.diygw-load {
+	display: block;
+	line-height: 3em;
+	text-align: center;
+}
+
+.diygw-load::before {
+	font-family: "diygwIcon";
+	display: inline-block;
+	margin-right: 6rpx;
+}
+
+.diygw-load.loading::before {
+	content: "\e67a";
+	animation: diygwIcon-spin 2s infinite linear;
+}
+
+.diygw-load.loading::after {
+	content: "加载中...";
+}
+
+.diygw-load.over::before {
+	content: "\e64a";
+}
+
+.diygw-load.over::after {
+	content: "没有更多了";
+}
+
+.diygw-load.erro::before {
+	content: "\e658";
+}
+
+.diygw-load.erro::after {
+	content: "加载失败";
+}
+
+.diygw-load.load-icon::before {
+	font-size: 32rpx;
+}
+
+.diygw-load.load-icon::after {
+	display: none;
+}
+
+.diygw-load.load-icon.over {
+	display: none;
+}
+
+.diygw-load.load-modal {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 140rpx;
+	left: 0;
+	margin: auto;
+	width: 260rpx;
+	height: 260rpx;
+	background-color: var(--white);
+	border-radius: 10rpx;
+	box-shadow: 0 0 0rpx 2000rpx rgba(0, 0, 0, 0.5);
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	justify-content: center;
+	font-size: 28rpx;
+	z-index: 9999;
+	line-height: 2.4em;
+}
+
+.diygw-load.load-modal [class*="diygwIcon-"] {
+	font-size: 60rpx;
+}
+
+.diygw-load.load-modal image {
+	width: 70rpx;
+	height: 70rpx;
+}
+
+.diygw-load.load-modal::after {
+	content: "";
+	position: absolute;
+	background-color: var(--white);
+	border-radius: 50%;
+	width: 200rpx;
+	height: 200rpx;
+	font-size: 20rpx;
+	border-top: 6rpx solid rgba(0, 0, 0, 0.05);
+	border-right: 6rpx solid rgba(0, 0, 0, 0.05);
+	border-bottom: 6rpx solid rgba(0, 0, 0, 0.05);
+	border-left: 6rpx solid var(--orange);
+	animation: diygwIcon-spin 1s infinite linear;
+	z-index: -1;
+}
\ No newline at end of file

common/diygw-ui/test.scss

+body{
+	font-size: 50rpx;
+}
\ No newline at end of file