基于uniapp开发的app和微信小程序模板框架
commit
4b0af76ac1
|
|
@ -0,0 +1,9 @@
|
||||||
|
/vendor
|
||||||
|
/node_modules
|
||||||
|
/public/storage
|
||||||
|
/unpackage
|
||||||
|
/.hbuilderx
|
||||||
|
Homestead.yaml
|
||||||
|
Homestead.json
|
||||||
|
.env
|
||||||
|
.idea
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
globalData:{
|
||||||
|
projectname:'', // 项目名称
|
||||||
|
lat:'', // 公司地址维度
|
||||||
|
lng:'' ,// 公司地址经度
|
||||||
|
hostapi:'http://maintain.7and5.cn' // 域名配置
|
||||||
|
},
|
||||||
|
// 优先于show方法
|
||||||
|
onLaunch: function() {
|
||||||
|
|
||||||
|
},
|
||||||
|
onShow: function() {
|
||||||
|
if(uni.getStorageSync('token')){
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onHide: function() {
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/*每个页面公共css */
|
||||||
|
|
||||||
|
/* 阿里巴巴矢量图标库 start */
|
||||||
|
@import url("./commons/icon-font.css");
|
||||||
|
/* 阿里巴巴矢量图标库 end */
|
||||||
|
/* 项目基础样式 start */
|
||||||
|
@import url("./commons/base.css");
|
||||||
|
/* 项目基础样式 end */
|
||||||
|
/* 项目页面样式 start */
|
||||||
|
@import url("./commons/style.css");
|
||||||
|
/* 项目页面样式 end */
|
||||||
|
|
||||||
|
/* 动画样式 start */
|
||||||
|
@import url("./commons/animate.min.css");
|
||||||
|
/* 动画样式 end */
|
||||||
|
|
||||||
|
page {background-color: #f7f7f7;}
|
||||||
|
</style>
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,388 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* @media screen and (height:812px){
|
||||||
|
}
|
||||||
|
@media screen and (height:844px){
|
||||||
|
}
|
||||||
|
@media screen and (height:896px){
|
||||||
|
}
|
||||||
|
@media screen and (min-height:926px){
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.bottoc{margin-top: 6rpx;color: #414141;}
|
||||||
|
.opc{opacity: 0.7;}
|
||||||
|
.width100{width: 100%;}
|
||||||
|
.width55{width: 55%;}
|
||||||
|
.width50{width: 50%;}
|
||||||
|
.width49{width: 49%;}
|
||||||
|
.width48_5{width: 48.5%;}
|
||||||
|
.width48{width: 48%;}
|
||||||
|
.width47{width: 47%;}
|
||||||
|
.width46{width: 46%;}
|
||||||
|
.width45{width: 45%;}
|
||||||
|
.width33{width: 33%;}
|
||||||
|
.width30{width: 30%;}
|
||||||
|
.width29{width: 29%;}
|
||||||
|
.width28{width: 28%;}
|
||||||
|
.width27{width: 27%;}
|
||||||
|
.width26{width: 26%;}
|
||||||
|
.width25{width: 25%;}
|
||||||
|
|
||||||
|
.posAll{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.45);z-index: 12;}
|
||||||
|
.posir{position: relative;}
|
||||||
|
.posia{position: absolute;}
|
||||||
|
.poszy{position: fixed;left: 0;right: 0;z-index: 3;}
|
||||||
|
.posiszy{position: fixed;left: 0;right: 0;z-index: 5;}
|
||||||
|
.posixzy{position: fixed;left: 0;right: 0;z-index: 2;bottom: 0;}
|
||||||
|
.posia-op{position: absolute;top: 0;right: 0;left: 0;bottom: 0;opacity: 0;}
|
||||||
|
.syxzo{top: 0;left: 0;right: 0;bottom: 0;opacity: 0;}
|
||||||
|
.posi-sticky{position: sticky;top: 0;z-index: 1;background-color: #FFFFFF;}
|
||||||
|
|
||||||
|
|
||||||
|
.dis{display: flex;}
|
||||||
|
.disac{display: flex;align-items: center;}
|
||||||
|
.disja{display: flex;justify-content: space-around;}
|
||||||
|
.disjb{display: flex;justify-content: space-between;}
|
||||||
|
.disje{display: flex;justify-content: flex-end;}
|
||||||
|
.disjbac{display: flex;justify-content: space-between;align-items: center;}
|
||||||
|
.disjcac{display: flex;justify-content: center;align-items: center;}
|
||||||
|
.fc{flex-direction: column;}
|
||||||
|
.fw{flex-wrap: wrap;}
|
||||||
|
.fe{justify-content: flex-end;}
|
||||||
|
.flexs{flex-shrink: 0;}
|
||||||
|
|
||||||
|
|
||||||
|
.wh42{width: 42rpx;height: 42rpx;}
|
||||||
|
.wh44{width: 44rpx;height: 44rpx;}
|
||||||
|
|
||||||
|
button:after{content: none!important;}
|
||||||
|
.borbot{border-bottom: 2rpx solid #E6E6E6;}
|
||||||
|
.borbot:last-child{border-bottom: none;}
|
||||||
|
.bbot{border-bottom: 2rpx solid #EEEEEE;}
|
||||||
|
.borbot-df{border: 2rpx solid #DFDFDF;}
|
||||||
|
.borbot-cc{border: 2rpx solid #CCCCCC;}
|
||||||
|
.bleft {border-left: 1rpx solid #EEEEEE;}
|
||||||
|
|
||||||
|
/* 行高 */
|
||||||
|
.line-h30{line-height: 30rpx;}
|
||||||
|
.line-h32{line-height: 32rpx;}
|
||||||
|
.line-h34{line-height: 34rpx;}
|
||||||
|
.line-h36{line-height: 36rpx;}
|
||||||
|
.line-h38{line-height: 38rpx;}
|
||||||
|
.line-h40{line-height: 40rpx;}
|
||||||
|
.line-h42{line-height: 42rpx;}
|
||||||
|
.line-h44{line-height: 44rpx;}
|
||||||
|
.line-h46{line-height: 46rpx;}
|
||||||
|
.line-h48{line-height: 48rpx;}
|
||||||
|
.line-h50{line-height: 50rpx;}
|
||||||
|
.line-h52{line-height: 52rpx;}
|
||||||
|
.line-h54{line-height: 54rpx;}
|
||||||
|
.line-h56{line-height: 56rpx;}
|
||||||
|
.line-h58{line-height: 58rpx;}
|
||||||
|
.line-h60{line-height: 60rpx;}
|
||||||
|
.line-h62{line-height: 62rpx;}
|
||||||
|
.line-h64{line-height: 64rpx;}
|
||||||
|
.line-h66{line-height: 66rpx;}
|
||||||
|
.line-h68{line-height: 60rpx;}
|
||||||
|
.line-h70{line-height: 70rpx;}
|
||||||
|
.line-h72{line-height: 72rpx;}
|
||||||
|
.line-h74{line-height: 74rpx;}
|
||||||
|
|
||||||
|
|
||||||
|
.clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||||
|
.clips2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||||
|
.clips3{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||||
|
.clips4{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||||
|
.clips5{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||||
|
.clips6{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||||
|
.clips7{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 7;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||||
|
.clips8{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 8;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||||
|
.clips9{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 9;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||||
|
.clips10{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 10;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||||
|
|
||||||
|
|
||||||
|
/* 字体大小 */
|
||||||
|
.fon20{font-size: 20rpx;}
|
||||||
|
.fon22{font-size: 22rpx;}
|
||||||
|
.fon24{font-size: 24rpx;}
|
||||||
|
.fon25{font-size: 25rpx;}
|
||||||
|
.fon26{font-size: 26rpx;}
|
||||||
|
.fon27{font-size: 27rpx;}
|
||||||
|
.fon28{font-size: 28rpx;}
|
||||||
|
.fon30{font-size: 30rpx;}
|
||||||
|
.fon32{font-size: 32rpx;}
|
||||||
|
.fon34{font-size: 34rpx;}
|
||||||
|
.fon36{font-size: 36rpx;}
|
||||||
|
.fon38{font-size: 38rpx;}
|
||||||
|
.fon40{font-size: 40rpx;}
|
||||||
|
.fon42{font-size: 42rpx;}
|
||||||
|
.fon44{font-size: 44rpx;}
|
||||||
|
.fon46{font-size: 46rpx;}
|
||||||
|
.fon48{font-size: 48rpx;}
|
||||||
|
.fon50{font-size: 50rpx;}
|
||||||
|
.fon52{font-size: 52rpx;}
|
||||||
|
.fon54{font-size: 54rpx;}
|
||||||
|
.fon56{font-size: 56rpx;}
|
||||||
|
.fon58{font-size: 58rpx;}
|
||||||
|
.fon60{font-size: 60rpx;}
|
||||||
|
.fon62{font-size: 62rpx;}
|
||||||
|
.fon64{font-size: 64rpx;}
|
||||||
|
.fon66{font-size: 66rpx;}
|
||||||
|
.fon68{font-size: 68rpx;}
|
||||||
|
.fon70{font-size: 70rpx;}
|
||||||
|
.fon72{font-size: 72rpx;}
|
||||||
|
|
||||||
|
/* 字体颜色 */
|
||||||
|
.colf{color: #FFFFFF;}
|
||||||
|
.colf6{color: #f6f6f6;}
|
||||||
|
.colb{color: #000000;}
|
||||||
|
.colc{color: #CCCCCC;}
|
||||||
|
.col3{color: #333333;}
|
||||||
|
.col34{color: #343434;}
|
||||||
|
.col6{color: #666666;}
|
||||||
|
.colf8{color: #F85050;}
|
||||||
|
.col9{color: #999999;}
|
||||||
|
.pcol{color: #3875F6;}
|
||||||
|
.col2c{color: #2C2C2C;}
|
||||||
|
.col80{color: #808080;}
|
||||||
|
.col7D{color: #7D7D7D;}
|
||||||
|
.colB3{color: #B3B3B3;}
|
||||||
|
.col5b{color: #5B5B5B;}
|
||||||
|
.colpeili{color: #868695;}
|
||||||
|
|
||||||
|
|
||||||
|
/* 字体位置 */
|
||||||
|
.tright{text-align: right;}
|
||||||
|
.tcenter{text-align: center;}
|
||||||
|
|
||||||
|
/* 文字空两格 */
|
||||||
|
.tindent{text-indent: 2em;}
|
||||||
|
|
||||||
|
/* 元素缩小 */
|
||||||
|
.scal13{transform: scale(1.3);}
|
||||||
|
.scal12{transform: scale(1.2);}
|
||||||
|
.scal11{transform: scale(1.1);}
|
||||||
|
.scal10{transform: scale(1);}
|
||||||
|
.scal09{transform: scale(.9);}
|
||||||
|
.scal08{transform: scale(.8);}
|
||||||
|
.scal07{transform: scale(.7);}
|
||||||
|
.scal06{transform: scale(.6);}
|
||||||
|
.scal05{transform: scale(.5);}
|
||||||
|
|
||||||
|
/* 行间距 */
|
||||||
|
.linh40{line-height: 40rpx;}
|
||||||
|
.linh50{line-height: 50rpx;}
|
||||||
|
.linh60{line-height: 60rpx;}
|
||||||
|
.linh70{line-height: 70rpx;}
|
||||||
|
|
||||||
|
/* 粗体 */
|
||||||
|
.bold{font-weight: bold;}
|
||||||
|
.bold400{font-weight: 400;}
|
||||||
|
.bold500{font-weight: 500;}
|
||||||
|
|
||||||
|
|
||||||
|
/* 背景颜色 */
|
||||||
|
.pbackc{background-color: #3875F6;}
|
||||||
|
.bacf{background-color: #FFFFFF;}
|
||||||
|
.bac0{background-color: #000000;}
|
||||||
|
.bcdb{background-color: #DBDBDB;}
|
||||||
|
.bcf8{background: #F85050;}
|
||||||
|
.bacf5{background: #F5F5F5;}
|
||||||
|
.bacf6{background-color: #f6f6f6;}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* 圆角 */
|
||||||
|
.radius10{border-radius: 10rpx;}
|
||||||
|
.radius15{border-radius: 15rpx;}
|
||||||
|
.radius20{border-radius: 20rpx;}
|
||||||
|
.radius30{border-radius: 30rpx;}
|
||||||
|
.radius35{border-radius: 35rpx;}
|
||||||
|
.radius40{border-radius: 40rpx;}
|
||||||
|
.radius45{border-radius: 45rpx;}
|
||||||
|
|
||||||
|
/* 上下左右---外边距 */
|
||||||
|
.mar10{margin: 10rpx;}
|
||||||
|
.mar20{margin: 20rpx;}
|
||||||
|
.mar25{margin: 25rpx;}
|
||||||
|
.mar30{margin: 30rpx;}
|
||||||
|
.mar32{margin: 32rpx;}
|
||||||
|
.mar36{margin: 36rpx;}
|
||||||
|
.mar40{margin: 40rpx;}
|
||||||
|
.mar50{margin: 50rpx;}
|
||||||
|
/* 上下---外边距 */
|
||||||
|
.mar-sx10{margin-top: 10rpx;margin-bottom: 10rpx;}
|
||||||
|
.mar-sx20{margin-top: 20rpx;margin-bottom: 20rpx;}
|
||||||
|
.mar-sx25{margin-top: 25rpx;margin-bottom: 25rpx;}
|
||||||
|
.mar-sx30{margin-top: 30rpx;margin-bottom: 30rpx;}
|
||||||
|
.mar-sx32{margin-top: 32rpx;margin-bottom: 32rpx;}
|
||||||
|
.mar-sx36{margin-top: 36rpx;margin-bottom: 36rpx;}
|
||||||
|
.mar-sx40{margin-top: 40rpx;margin-bottom: 40rpx;}
|
||||||
|
.mar-sx50{margin-top: 50rpx;margin-bottom: 50rpx;}
|
||||||
|
/* 左右---外边距 */
|
||||||
|
.mar-zy10{margin-left: 10rpx;margin-right: 10rpx;}
|
||||||
|
.mar-zy20{margin-left: 20rpx;margin-right: 20rpx;}
|
||||||
|
.mar-zy25{margin-left: 25rpx;margin-right: 25rpx;}
|
||||||
|
.mar-zy30{margin-left: 30rpx;margin-right: 30rpx;}
|
||||||
|
.mar-zy32{margin-left: 32rpx;margin-right: 32rpx;}
|
||||||
|
.mar-zy36{margin-left: 36rpx;margin-right: 36rpx;}
|
||||||
|
.mar-zy40{margin-left: 40rpx;margin-right: 40rpx;}
|
||||||
|
.mar-zy50{margin-left: 50rpx;margin-right: 50rpx;}
|
||||||
|
.mar-zy85{margin-left: 85rpx;margin-right: 85rpx;}
|
||||||
|
/* 上---外边距 */
|
||||||
|
.mar-s10{margin-top: 10rpx;}
|
||||||
|
.mar-s20{margin-top: 20rpx;}
|
||||||
|
.mar-s25{margin-top: 25rpx;}
|
||||||
|
.mar-s30{margin-top: 30rpx;}
|
||||||
|
.mar-s32{margin-top: 32rpx;}
|
||||||
|
.mar-s36{margin-top: 36rpx;}
|
||||||
|
.mar-s40{margin-top: 40rpx;}
|
||||||
|
.mar-s50{margin-top: 50rpx;}
|
||||||
|
.mar-s60{margin-top: 60rpx;}
|
||||||
|
.mar-s70{margin-top: 70rpx;}
|
||||||
|
.mar-s80{margin-top: 80rpx;}
|
||||||
|
.mar-s90{margin-top: 90rpx;}
|
||||||
|
.mar-s100{margin-top: 100rpx;}
|
||||||
|
.mar-s120{margin-top: 120rpx;}
|
||||||
|
.mar-s140{margin-top: 140rpx;}
|
||||||
|
.mar-s160{margin-top: 160rpx;}
|
||||||
|
.mar-s180{margin-top: 180rpx;}
|
||||||
|
/* 下---外边距 */
|
||||||
|
.mar-x10{margin-bottom: 10rpx;}
|
||||||
|
.mar-x20{margin-bottom: 20rpx;}
|
||||||
|
.mar-x25{margin-bottom: 25rpx;}
|
||||||
|
.mar-x30{margin-bottom: 30rpx;}
|
||||||
|
.mar-x32{margin-bottom: 32rpx;}
|
||||||
|
.mar-x36{margin-bottom: 36rpx;}
|
||||||
|
.mar-x40{margin-bottom: 40rpx;}
|
||||||
|
.mar-x50{margin-bottom: 50rpx;}
|
||||||
|
.mar-x60{margin-bottom: 60rpx;}
|
||||||
|
.mar-x70{margin-bottom: 70rpx;}
|
||||||
|
.mar-x80{margin-bottom: 80rpx;}
|
||||||
|
.mar-x90{margin-bottom: 90rpx;}
|
||||||
|
.mar-x100{margin-bottom: 100rpx;}
|
||||||
|
.mar-x120{margin-bottom: 120rpx;}
|
||||||
|
.mar-x140{margin-bottom: 140rpx;}
|
||||||
|
.mar-x160{margin-bottom: 160rpx;}
|
||||||
|
.mar-x180{margin-bottom: 180rpx;}
|
||||||
|
/* 左---外边距 */
|
||||||
|
.mar-z10{margin-left: 10rpx;}
|
||||||
|
.mar-z20{margin-left: 20rpx;}
|
||||||
|
.mar-z25{margin-left: 25rpx;}
|
||||||
|
.mar-z30{margin-left: 30rpx;}
|
||||||
|
.mar-z32{margin-left: 32rpx;}
|
||||||
|
.mar-z36{margin-left: 36rpx;}
|
||||||
|
.mar-z40{margin-left: 40rpx;}
|
||||||
|
.mar-z50{margin-left: 50rpx;}
|
||||||
|
/* 右---外边距 */
|
||||||
|
.mar-y10{margin-right: 10rpx;}
|
||||||
|
.mar-y20{margin-right: 20rpx;}
|
||||||
|
.mar-y25{margin-right: 25rpx;}
|
||||||
|
.mar-y30{margin-right: 30rpx;}
|
||||||
|
.mar-y32{margin-right: 32rpx;}
|
||||||
|
.mar-y36{margin-right: 36rpx;}
|
||||||
|
.mar-y40{margin-right: 40rpx;}
|
||||||
|
.mar-y50{margin-right: 50rpx;}
|
||||||
|
|
||||||
|
/* 上下左右---内边距 */
|
||||||
|
.pad10{padding: 10rpx;}
|
||||||
|
.pad20{padding: 20rpx;}
|
||||||
|
.pad25{padding: 25rpx;}
|
||||||
|
.pad30{padding: 30rpx;}
|
||||||
|
.pad32{padding: 32rpx;}
|
||||||
|
.pad36{padding: 36rpx;}
|
||||||
|
.pad40{padding: 40rpx;}
|
||||||
|
.pad50{padding: 50rpx;}
|
||||||
|
/* 上下---内边距 */
|
||||||
|
.pad-sx10{padding-top: 10rpx;padding-bottom: 10rpx;}
|
||||||
|
.pad-sx20{padding-top: 20rpx;padding-bottom: 20rpx;}
|
||||||
|
.pad-sx25{padding-top: 25rpx;padding-bottom: 25rpx;}
|
||||||
|
.pad-sx30{padding-top: 30rpx;padding-bottom: 30rpx;}
|
||||||
|
.pad-sx32{padding-top: 32rpx;padding-bottom: 32rpx;}
|
||||||
|
.pad-sx36{padding-top: 36rpx;padding-bottom: 36rpx;}
|
||||||
|
.pad-sx40{padding-top: 40rpx;padding-bottom: 40rpx;}
|
||||||
|
.pad-sx50{padding-top: 50rpx;padding-bottom: 50rpx;}
|
||||||
|
/* 左右---内边距 */
|
||||||
|
.pad-zy10{padding-left: 10rpx;padding-right: 10rpx;}
|
||||||
|
.pad-zy20{padding-left: 20rpx;padding-right: 20rpx;}
|
||||||
|
.pad-zy25{padding-left: 25rpx;padding-right: 25rpx;}
|
||||||
|
.pad-zy30{padding-left: 30rpx;padding-right: 30rpx;}
|
||||||
|
.pad-zy32{padding-left: 32rpx;padding-right: 32rpx;}
|
||||||
|
.pad-zy36{padding-left: 36rpx;padding-right: 36rpx;}
|
||||||
|
.pad-zy40{padding-left: 40rpx;padding-right: 40rpx;}
|
||||||
|
.pad-zy50{padding-left: 50rpx;padding-right: 50rpx;}
|
||||||
|
/* 上---内边距 */
|
||||||
|
.pad-s10{padding-top: 10rpx;}
|
||||||
|
.pad-s20{padding-top: 20rpx;}
|
||||||
|
.pad-s25{padding-top: 25rpx;}
|
||||||
|
.pad-s30{padding-top: 30rpx;}
|
||||||
|
.pad-s32{padding-top: 32rpx;}
|
||||||
|
.pad-s36{padding-top: 36rpx;}
|
||||||
|
.pad-s40{padding-top: 40rpx;}
|
||||||
|
.pad-s50{padding-top: 50rpx;}
|
||||||
|
.pad-s120{padding-top: 120rpx;}
|
||||||
|
.pad-s140{padding-top: 140rpx;}
|
||||||
|
.pad-s160{padding-top: 160rpx;}
|
||||||
|
.pad-s180{padding-top: 180rpx;}
|
||||||
|
/* 下---内边距 */
|
||||||
|
.pad-x10{padding-bottom: 10rpx;}
|
||||||
|
.pad-x20{padding-bottom: 20rpx;}
|
||||||
|
.pad-x25{padding-bottom: 25rpx;}
|
||||||
|
.pad-x30{padding-bottom: 30rpx;}
|
||||||
|
.pad-x32{padding-bottom: 32rpx;}
|
||||||
|
.pad-x36{padding-bottom: 36rpx;}
|
||||||
|
.pad-x40{padding-bottom: 40rpx;}
|
||||||
|
.pad-x50{padding-bottom: 50rpx;}
|
||||||
|
.pad-x120{padding-bottom: 120rpx;}
|
||||||
|
.pad-x140{padding-bottom: 140rpx;}
|
||||||
|
.pad-x160{padding-bottom: 160rpx;}
|
||||||
|
.pad-x180{padding-bottom: 180rpx;}
|
||||||
|
.pad-x260{padding-bottom: 260rpx;}
|
||||||
|
/* 左---内边距 */
|
||||||
|
.pad-z10{padding-left: 10rpx;}
|
||||||
|
.pad-z20{padding-left: 20rpx;}
|
||||||
|
.pad-z25{padding-left: 25rpx;}
|
||||||
|
.pad-z30{padding-left: 30rpx;}
|
||||||
|
.pad-z32{padding-left: 32rpx;}
|
||||||
|
.pad-z36{padding-left: 36rpx;}
|
||||||
|
.pad-z40{padding-left: 40rpx;}
|
||||||
|
.pad-z50{padding-left: 50rpx;}
|
||||||
|
/* 右---内边距 */
|
||||||
|
.pad-y10{padding-right: 10rpx;}
|
||||||
|
.pad-y20{padding-right: 20rpx;}
|
||||||
|
.pad-y25{padding-right: 25rpx;}
|
||||||
|
.pad-y30{padding-right: 30rpx;}
|
||||||
|
.pad-y32{padding-right: 32rpx;}
|
||||||
|
.pad-y36{padding-right: 36rpx;}
|
||||||
|
.pad-y40{padding-right: 40rpx;}
|
||||||
|
.pad-y50{padding-right: 50rpx;}
|
||||||
|
|
||||||
|
.pad-sx27-zy20{padding: 27rpx 20rpx;}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
scroll-view ::-webkit-scrollbar {
|
||||||
|
display: none !important;
|
||||||
|
width: 0 !important;
|
||||||
|
height: 0 !important;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,143 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: "iconfont"; /* Project id 3180711 */
|
||||||
|
src: url('https://at.alicdn.com/t/font_3180711_mjqzq7x5vu.woff2?t=1649586677823') format('woff2'),
|
||||||
|
url('https://at.alicdn.com/t/font_3180711_mjqzq7x5vu.woff?t=1649586677823') format('woff'),
|
||||||
|
url('https://at.alicdn.com/t/font_3180711_mjqzq7x5vu.ttf?t=1649586677823') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-family: "iconfont" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-add-picture05:before {
|
||||||
|
content: "\e639";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-add-picture04:before {
|
||||||
|
content: "\e636";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-add-picture03:before {
|
||||||
|
content: "\e642";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-add-picture02:before {
|
||||||
|
content: "\e8bc";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-add-picture01:before {
|
||||||
|
content: "\e62c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-sandian:before {
|
||||||
|
content: "\e769";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-nothing-collection:before {
|
||||||
|
content: "\e610";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-nothing-more:before {
|
||||||
|
content: "\e624";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-nothing-data:before {
|
||||||
|
content: "\e60c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-address-check:before {
|
||||||
|
content: "\e6c2";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-address-unchecked:before {
|
||||||
|
content: "\e623";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-navigate-now:before {
|
||||||
|
content: "\e640";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-send-goods:before {
|
||||||
|
content: "\e601";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-payment:before {
|
||||||
|
content: "\e602";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-finish:before {
|
||||||
|
content: "\e63f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-take:before {
|
||||||
|
content: "\e649";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-refund:before {
|
||||||
|
content: "\e613";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-customer-black:before {
|
||||||
|
content: "\ec2e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-customer:before {
|
||||||
|
content: "\e628";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-check:before {
|
||||||
|
content: "\e61e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-del-white:before {
|
||||||
|
content: "\e61f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-screen:before {
|
||||||
|
content: "\e60b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-search:before {
|
||||||
|
content: "\e653";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-caidan-mo:before {
|
||||||
|
content: "\e73e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-renwu-mo:before {
|
||||||
|
content: "\e73f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shopp-cart:before {
|
||||||
|
content: "\e73d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-caidan-active:before {
|
||||||
|
content: "\e608";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-renwu-acitve:before {
|
||||||
|
content: "\e67c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-home-mo:before {
|
||||||
|
content: "\e673";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-home-active:before {
|
||||||
|
content: "\e674";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-return:before {
|
||||||
|
content: "\e600";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-next:before {
|
||||||
|
content: "\e60e";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
/* 首页 */
|
||||||
|
.home-message-box {line-height: 60rpx;}
|
||||||
|
.home-message-box image {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 35rpx;
|
||||||
|
}
|
||||||
|
.home-message-box view {
|
||||||
|
position: absolute;
|
||||||
|
left: 14rpx;
|
||||||
|
top: -16rpx;
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
display: flex;justify-content: center;align-items: center;
|
||||||
|
border-radius: 100%;
|
||||||
|
font-size: 22rpx;
|
||||||
|
background-color: #e93030;
|
||||||
|
color: #FFFFFF;
|
||||||
|
transform: scale(.8);
|
||||||
|
}
|
||||||
|
.project-notice-box {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
margin: 20rpx 0;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
box-shadow: 6rpx 6rpx 20rpx rgba(0, 162, 234, 0.3);
|
||||||
|
margin-top: -70rpx;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
.home-fun-box {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
.fun-title::before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 7rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background: linear-gradient(to top, #FFFFFF 0%, #03affb 40%, #03affb 100%);
|
||||||
|
border-radius: 26%;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
.home-solution {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.solution-title {
|
||||||
|
bottom: 6rpx;
|
||||||
|
left: -40rpx;
|
||||||
|
right: -40rpx;
|
||||||
|
padding: 6rpx;
|
||||||
|
background-color: rgba(255,255,255,0.6);
|
||||||
|
transform: scale(.6);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.engineer-num {
|
||||||
|
position: absolute;
|
||||||
|
top: -16rpx;
|
||||||
|
right: -12rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
background-color: #f03232;
|
||||||
|
width: 36rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
display: flex;justify-content: center;align-items: center;
|
||||||
|
border-radius: 100%;
|
||||||
|
color: #FFFFFF;
|
||||||
|
transform: scale(.8);
|
||||||
|
|
||||||
|
}
|
||||||
|
/* 我的页面 */
|
||||||
|
.my-exit-btn{
|
||||||
|
height: 88rpx;
|
||||||
|
display: flex;justify-content: center;align-items: center;
|
||||||
|
border-radius: 88rpx;
|
||||||
|
background-color: #03affb;
|
||||||
|
color: #FFFFFF;
|
||||||
|
margin-top: 40rpx;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,420 @@
|
||||||
|
<template>
|
||||||
|
<view class="simple-address" v-if="showPopup" @touchmove.stop.prevent="clear">
|
||||||
|
<!-- 遮罩层 -->
|
||||||
|
<view
|
||||||
|
class="simple-address-mask"
|
||||||
|
@touchmove.stop.prevent="clear"
|
||||||
|
v-if="maskClick"
|
||||||
|
:class="[ani + '-mask', animation ? 'mask-ani' : '']"
|
||||||
|
:style="{
|
||||||
|
'background-color': maskBgColor
|
||||||
|
}"
|
||||||
|
@tap="hideMask(true)"
|
||||||
|
></view>
|
||||||
|
|
||||||
|
<view class="simple-address-content simple-address--fixed" :class="[type, ani + '-content', animation ? 'content-ani' : '']">
|
||||||
|
<view class="simple-address__header">
|
||||||
|
<view class="simple-address__header-btn-box" @click="pickerCancel">
|
||||||
|
<text class="simple-address__header-text" :style="{ color: cancelColor, fontSize: btnFontSize }">取消</text>
|
||||||
|
</view>
|
||||||
|
<view class="simple-address__header-btn-box" @click="pickerConfirm">
|
||||||
|
<text class="simple-address__header-text" :style="{ color: confirmColor || themeColor, fontSize: btnFontSize }">确定</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="simple-address__box">
|
||||||
|
<picker-view indicator-style="height: 70rpx;" class="simple-address-view" :value="pickerValue" @change="pickerChange">
|
||||||
|
<picker-view-column>
|
||||||
|
<!-- #ifndef APP-NVUE -->
|
||||||
|
<view class="picker-item" :style="{ fontSize: fontSize }" v-for="(item, index) in provinceDataList" :key="index">{{ item.label }}</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<text class="picker-item" :style="{ fontSize: fontSize }" v-for="(item, index) in provinceDataList" :key="index">{{ item.label }}</text>
|
||||||
|
<!-- #endif -->
|
||||||
|
</picker-view-column>
|
||||||
|
<picker-view-column>
|
||||||
|
<!-- #ifndef APP-NVUE -->
|
||||||
|
<view class="picker-item" :style="{ fontSize: fontSize }" v-for="(item, index) in cityDataList" :key="index">{{ item.label }}</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<text class="picker-item" :style="{ fontSize: fontSize }" v-for="(item, index) in cityDataList" :key="index">{{ item.label }}</text>
|
||||||
|
<!-- #endif -->
|
||||||
|
</picker-view-column>
|
||||||
|
<picker-view-column>
|
||||||
|
<!-- #ifndef APP-NVUE -->
|
||||||
|
<view class="picker-item" :style="{ fontSize: fontSize }" v-for="(item, index) in areaDataList" :key="index">{{ item.label }}</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<text class="picker-item" :style="{ fontSize: fontSize }" v-for="(item, index) in areaDataList" :key="index">{{ item.label }}</text>
|
||||||
|
<!-- #endif -->
|
||||||
|
</picker-view-column>
|
||||||
|
</picker-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* Simple-addres 地址联动组件
|
||||||
|
* @description 三级地址联动，支持（app）nvue、小程序、H5
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=1084
|
||||||
|
* @property {String} animation 是否开启动画
|
||||||
|
* @property {String} type = [bottom] 弹出层类型，暂时只支持底部弹出
|
||||||
|
* @property {Boolean} maskClick = [true | false] 是否允许点击遮罩层关闭
|
||||||
|
* @property {Boolean} show = [true | false] 显示或隐藏地址组件
|
||||||
|
* @property {String} maskBgColor 遮罩层背景颜色
|
||||||
|
* @property {String} cancelColor 取消按钮颜色，默认为：#1aad19
|
||||||
|
* @property {String} confirmColor 确认按钮颜色，默认为：themeColor
|
||||||
|
* @property {String} themeColor 主题颜色，后续会废弃该配置，建议使用`cancelColor`或`confirmColor`
|
||||||
|
* @property {String} btnFontSize 取消、确认按钮字体大小，默认为`uni.scss里的 $uni-font-size-base `
|
||||||
|
* @property {String} fontSize picker-item字体大小，默认为：28rpx
|
||||||
|
* @property {Array} pickerValueDefault 默认值，可以通过function queryIndex 获取
|
||||||
|
* @property {Function} queryIndex 根据自定义信息返回对应的index
|
||||||
|
* @property {Function} open 打开
|
||||||
|
* @example <simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor='#007AFF'></simple-address>
|
||||||
|
*/
|
||||||
|
|
||||||
|
import provinceData from './city-data/province.js';
|
||||||
|
import cityData from './city-data/city.js';
|
||||||
|
import areaData from './city-data/area.js';
|
||||||
|
export default {
|
||||||
|
name: 'simpleAddress',
|
||||||
|
props: {
|
||||||
|
mode: {
|
||||||
|
// 地址类型
|
||||||
|
// default 则代表老版本根据index索引获取数据
|
||||||
|
//
|
||||||
|
type: String,
|
||||||
|
default: 'default'
|
||||||
|
},
|
||||||
|
// 开启动画
|
||||||
|
animation: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
/* 弹出层类型，可选值；
|
||||||
|
bottom：底部弹出层
|
||||||
|
*/
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'bottom'
|
||||||
|
},
|
||||||
|
// maskClick
|
||||||
|
maskClick: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
show: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
maskBgColor: {
|
||||||
|
type: String,
|
||||||
|
default: 'rgba(0, 0, 0, 0.4)' //背景颜色 rgba(0, 0, 0, 0.4) 为空则调用 uni.scss
|
||||||
|
},
|
||||||
|
themeColor: {
|
||||||
|
type: String,
|
||||||
|
default: '' // 确认按钮颜色（向下兼容）
|
||||||
|
},
|
||||||
|
cancelColor: {
|
||||||
|
type: String,
|
||||||
|
default: '' // 取消按钮颜色
|
||||||
|
},
|
||||||
|
confirmColor: {
|
||||||
|
type: String,
|
||||||
|
default: '' // 确认按钮颜色
|
||||||
|
},
|
||||||
|
fontSize: {
|
||||||
|
type: String,
|
||||||
|
default: '28rpx' // picker-item字体大小
|
||||||
|
},
|
||||||
|
btnFontSize: {
|
||||||
|
type: String,
|
||||||
|
default: '' // 按钮的字体大小
|
||||||
|
},
|
||||||
|
/* 默认值 */
|
||||||
|
pickerValueDefault: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [0, 0, 0];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
ani: '',
|
||||||
|
showPopup: false,
|
||||||
|
pickerValue: [0, 0, 0],
|
||||||
|
provinceDataList: [],
|
||||||
|
cityDataList: [],
|
||||||
|
areaDataList: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
show(newValue) {
|
||||||
|
if (newValue) {
|
||||||
|
this.open();
|
||||||
|
} else {
|
||||||
|
this.close();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pickerValueDefault() {
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
this.handPickValueDefault(); // 对 pickerValueDefault 做兼容处理
|
||||||
|
this.provinceDataList = provinceData;
|
||||||
|
this.cityDataList = cityData[this.pickerValueDefault[0]];
|
||||||
|
this.areaDataList = areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]];
|
||||||
|
this.pickerValue = this.pickerValueDefault;
|
||||||
|
},
|
||||||
|
handPickValueDefault() {
|
||||||
|
if (this.pickerValueDefault !== [0, 0, 0]) {
|
||||||
|
if (this.pickerValueDefault[0] > provinceData.length - 1) {
|
||||||
|
this.pickerValueDefault[0] = provinceData.length - 1;
|
||||||
|
}
|
||||||
|
if (this.pickerValueDefault[1] > cityData[this.pickerValueDefault[0]].length - 1) {
|
||||||
|
this.pickerValueDefault[1] = cityData[this.pickerValueDefault[0]].length - 1;
|
||||||
|
}
|
||||||
|
if (this.pickerValueDefault[2] > areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]].length - 1) {
|
||||||
|
this.pickerValueDefault[2] = areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]].length - 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pickerChange(e) {
|
||||||
|
let changePickerValue = e.detail.value;
|
||||||
|
if (this.pickerValue[0] !== changePickerValue[0]) {
|
||||||
|
// 第一级发生滚动
|
||||||
|
this.cityDataList = cityData[changePickerValue[0]];
|
||||||
|
this.areaDataList = areaData[changePickerValue[0]][0];
|
||||||
|
changePickerValue[1] = 0;
|
||||||
|
changePickerValue[2] = 0;
|
||||||
|
} else if (this.pickerValue[1] !== changePickerValue[1]) {
|
||||||
|
// 第二级滚动
|
||||||
|
this.areaDataList = areaData[changePickerValue[0]][changePickerValue[1]];
|
||||||
|
changePickerValue[2] = 0;
|
||||||
|
}
|
||||||
|
this.pickerValue = changePickerValue;
|
||||||
|
this._$emit('onChange');
|
||||||
|
},
|
||||||
|
_$emit(emitName) {
|
||||||
|
let pickObj = {
|
||||||
|
label: this._getLabel(),
|
||||||
|
value: this.pickerValue,
|
||||||
|
cityCode: this._getCityCode(),
|
||||||
|
areaCode: this._getAreaCode(),
|
||||||
|
provinceCode: this._getProvinceCode(),
|
||||||
|
labelArr: this._getLabel().split('-')
|
||||||
|
};
|
||||||
|
this.$emit(emitName, pickObj);
|
||||||
|
},
|
||||||
|
_getLabel() {
|
||||||
|
let pcikerLabel =
|
||||||
|
this.provinceDataList[this.pickerValue[0]].label + '-' + this.cityDataList[this.pickerValue[1]].label + '-' + this.areaDataList[this.pickerValue[2]].label;
|
||||||
|
return pcikerLabel;
|
||||||
|
},
|
||||||
|
_getCityCode() {
|
||||||
|
return this.cityDataList[this.pickerValue[1]].value;
|
||||||
|
},
|
||||||
|
_getProvinceCode() {
|
||||||
|
return this.provinceDataList[this.pickerValue[0]].value;
|
||||||
|
},
|
||||||
|
_getAreaCode() {
|
||||||
|
return this.areaDataList[this.pickerValue[2]].value;
|
||||||
|
},
|
||||||
|
queryIndex(params = [], type = 'value') {
|
||||||
|
// params = [ 11 ,1101,110101 ];
|
||||||
|
// 1.获取省份的index
|
||||||
|
let provinceIndex = provinceData.findIndex(res => res[type] == params[0]);
|
||||||
|
let cityIndex = cityData[provinceIndex].findIndex(res => res[type] == params[1]);
|
||||||
|
let areaIndex = areaData[provinceIndex][cityIndex].findIndex(res => res[type] == params[2]);
|
||||||
|
return {
|
||||||
|
index: [provinceIndex, cityIndex, areaIndex],
|
||||||
|
data: {
|
||||||
|
province: provinceData[provinceIndex],
|
||||||
|
city: cityData[provinceIndex][cityIndex],
|
||||||
|
area: areaData[provinceIndex][cityIndex][areaIndex]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
clear() {},
|
||||||
|
hideMask() {
|
||||||
|
this._$emit('onCancel');
|
||||||
|
this.close();
|
||||||
|
},
|
||||||
|
pickerCancel() {
|
||||||
|
this._$emit('onCancel');
|
||||||
|
this.close();
|
||||||
|
},
|
||||||
|
pickerConfirm() {
|
||||||
|
this._$emit('onConfirm');
|
||||||
|
this.close();
|
||||||
|
},
|
||||||
|
open() {
|
||||||
|
this.showPopup = true;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.ani = 'simple-' + this.type;
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
close(type) {
|
||||||
|
if (!this.maskClick && type) return;
|
||||||
|
this.ani = '';
|
||||||
|
this.$nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.showPopup = false;
|
||||||
|
}, 300);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.simple-address {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple-address-mask {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
transition-property: opacity;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
opacity: 0;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
z-index: 99;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.mask-ani {
|
||||||
|
transition-property: opacity;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple-bottom-mask {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple-center-mask {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple-address--fixed {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
transition-property: transform;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
transform: translateY(460rpx);
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
z-index: 99;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple-address-content {
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple-content-bottom {
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
transform: translateY(500rpx);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-ani {
|
||||||
|
transition-property: transform, opacity;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple-bottom-content {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple-center-content {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple-address__header {
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom-color: #f2f2f2;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-width: 1rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple-address--fixed-top {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-top-color: $uni-border-color;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-top-width: 1rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple-address__header-btn-box {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 70rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple-address__header-text {
|
||||||
|
text-align: center;
|
||||||
|
font-size: $uni-font-size-base;
|
||||||
|
color: #1aad19;
|
||||||
|
line-height: 70rpx;
|
||||||
|
padding-left: 40rpx;
|
||||||
|
padding-right: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple-address__box {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple-address-view {
|
||||||
|
position: relative;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
width: 100%;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
width: 750rpx;
|
||||||
|
/* #endif */
|
||||||
|
height: 408rpx;
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-item {
|
||||||
|
text-align: center;
|
||||||
|
line-height: 70rpx;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,143 @@
|
||||||
|
/* eslint-disable */
|
||||||
|
var provinceData = [{
|
||||||
|
"label": "北京市",
|
||||||
|
"value": "11"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "天津市",
|
||||||
|
"value": "12"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "河北省",
|
||||||
|
"value": "13"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "山西省",
|
||||||
|
"value": "14"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "内蒙古自治区",
|
||||||
|
"value": "15"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "辽宁省",
|
||||||
|
"value": "21"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "吉林省",
|
||||||
|
"value": "22"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "黑龙江省",
|
||||||
|
"value": "23"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "上海市",
|
||||||
|
"value": "31"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "江苏省",
|
||||||
|
"value": "32"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "浙江省",
|
||||||
|
"value": "33"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "安徽省",
|
||||||
|
"value": "34"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "福建省",
|
||||||
|
"value": "35"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "江西省",
|
||||||
|
"value": "36"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "山东省",
|
||||||
|
"value": "37"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "河南省",
|
||||||
|
"value": "41"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "湖北省",
|
||||||
|
"value": "42"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "湖南省",
|
||||||
|
"value": "43"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "广东省",
|
||||||
|
"value": "44"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "广西壮族自治区",
|
||||||
|
"value": "45"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "海南省",
|
||||||
|
"value": "46"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "重庆市",
|
||||||
|
"value": "50"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "四川省",
|
||||||
|
"value": "51"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "贵州省",
|
||||||
|
"value": "52"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "云南省",
|
||||||
|
"value": "53"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "西藏自治区",
|
||||||
|
"value": "54"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "陕西省",
|
||||||
|
"value": "61"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "甘肃省",
|
||||||
|
"value": "62"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "青海省",
|
||||||
|
"value": "63"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "宁夏回族自治区",
|
||||||
|
"value": "64"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "新疆维吾尔自治区",
|
||||||
|
"value": "65"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "台湾",
|
||||||
|
"value": "66"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "香港",
|
||||||
|
"value": "67"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "澳门",
|
||||||
|
"value": "68"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "钓鱼岛",
|
||||||
|
"value": "69"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
export default provinceData;
|
||||||
|
|
@ -0,0 +1,107 @@
|
||||||
|
.lotus-address-picker {
|
||||||
|
font-size: 26rpx;
|
||||||
|
padding-top: 30rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
line-height: normal;
|
||||||
|
padding-right: 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.lotus-address-picker-box {
|
||||||
|
/*display: -webkit-box;
|
||||||
|
display: -webkit-flex;*/
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding-top: 10rpx;
|
||||||
|
padding-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
.lotus-address-picker-box-item {
|
||||||
|
height: 600upx;
|
||||||
|
overflow-y: auto;
|
||||||
|
width: 33.333%;
|
||||||
|
padding-left: 20rpx;
|
||||||
|
padding-right: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.lotus-address-picker2 {
|
||||||
|
color: #03affb;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.lotus-address-picker2:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 65%;
|
||||||
|
transform: translateY(-35%) rotate(-45deg);
|
||||||
|
width: 20rpx;
|
||||||
|
height: 10rpx;
|
||||||
|
border-left-width: 4rpx;
|
||||||
|
border-bottom-width: 4rpx;
|
||||||
|
border-left-style: solid;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-left-color: #03affb;
|
||||||
|
border-bottom-color: #03affb;
|
||||||
|
}
|
||||||
|
.lotus-address-mask {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 999;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
.lotus-address-box {
|
||||||
|
background: #fff;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.lotus-address-action {
|
||||||
|
font-size: 30rpx;
|
||||||
|
/*display: -webkit-box;
|
||||||
|
display: -webkit-flex;*/
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 25rpx 30rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.lotus-address-action:after {
|
||||||
|
content: " ";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 1px;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
color: #eee;
|
||||||
|
transform-origin: 0 0;
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
}
|
||||||
|
.lotus-address-action:before {
|
||||||
|
content: " ";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 1px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
color: #eee;
|
||||||
|
transform-origin: 0 100%;
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
}
|
||||||
|
.lotus-address-action-cancel {
|
||||||
|
color: #969696;
|
||||||
|
}
|
||||||
|
.lotus-address-action-affirm {
|
||||||
|
color: #03affb;
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,233 @@
|
||||||
|
<template>
|
||||||
|
<!--地址picker-->
|
||||||
|
<view :status="checkStatus" v-if="lotusAddressData.visible" class="lotus-address-mask">
|
||||||
|
<view :class="lotusAddressData.visible?'lotus-address-box':'lotus-address-box lotus-address-box-out'">
|
||||||
|
<view class="lotus-address-action">
|
||||||
|
<text @tap="cancelPicker" class="lotus-address-action-cancel">取消</text>
|
||||||
|
<text @tap="chosedVal" class="lotus-address-action-affirm">确认</text>
|
||||||
|
</view>
|
||||||
|
<view class="lotus-address-picker-box">
|
||||||
|
<!--省-->
|
||||||
|
<scroll-view scroll-y :scroll-into-view="'pid'+pChoseIndex" class="lotus-address-picker-box-item">
|
||||||
|
<view @tap="clickPicker(0,pIndex,pItem);" :id="'pid'+pIndex" :class="pIndex === pChoseIndex?'lotus-address-picker lotus-address-picker2':'lotus-address-picker'" v-for="(pItem,pIndex) in province" :key="pIndex">{{pItem}}</view>
|
||||||
|
</scroll-view>
|
||||||
|
<!--市-->
|
||||||
|
<scroll-view scroll-y :scroll-into-view="'cid'+cChoseIndex" class="lotus-address-picker-box-item">
|
||||||
|
<view @tap="clickPicker(1,cIndex,cItem);" :id="'cid'+cIndex" :class="cIndex === cChoseIndex?'lotus-address-picker lotus-address-picker2':'lotus-address-picker'" v-for="(cItem,cIndex) in city" :key="cIndex">{{cItem}}</view>
|
||||||
|
</scroll-view>
|
||||||
|
<!--区-->
|
||||||
|
<scroll-view scroll-y :scroll-into-view="'tid'+tChoseIndex" class="lotus-address-picker-box-item">
|
||||||
|
<view @tap="clickPicker(2,tIndex,tItem);" :id="'tid'+tIndex" :class="tIndex === tChoseIndex?'lotus-address-picker lotus-address-picker2':'lotus-address-picker'" v-for="(tItem,tIndex) in town" :key="tIndex">{{tItem}}</view>
|
||||||
|
</scroll-view>
|
||||||
|
<!--区END-->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!--地址picker END-->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {lotusAddressJson} from "./address-one.js";
|
||||||
|
export default {
|
||||||
|
props:['lotusAddressData'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
visible: false,
|
||||||
|
province:[],
|
||||||
|
city:[],
|
||||||
|
town:[],
|
||||||
|
provinceName:'',
|
||||||
|
cityName:'',
|
||||||
|
townName:'',
|
||||||
|
type:0,//0新增1编辑
|
||||||
|
pChoseIndex:-1,
|
||||||
|
cChoseIndex:-1,
|
||||||
|
tChoseIndex:-1
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
//取消
|
||||||
|
cancelPicker(){
|
||||||
|
const provinceCode = this.getTarId(this.provinceName);
|
||||||
|
const cityCode = this.getTarId(this.cityName);
|
||||||
|
const townCode = this.getTarId(this.townName);
|
||||||
|
this.visible = false;
|
||||||
|
this.$emit("choseVal",{
|
||||||
|
province:this.provinceName,
|
||||||
|
provinceCode,
|
||||||
|
city:this.cityName,
|
||||||
|
cityCode,
|
||||||
|
town:this.townName,
|
||||||
|
townCode,
|
||||||
|
isChose:0,
|
||||||
|
visible:false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//获取最后选择的省市区的值
|
||||||
|
chosedVal() {
|
||||||
|
this.type = 1;
|
||||||
|
const provinceCode = this.getTarId(this.provinceName);
|
||||||
|
const cityCode = this.getTarId(this.cityName);
|
||||||
|
const townCode = this.getTarId(this.townName);
|
||||||
|
this.visible = false;
|
||||||
|
let isChose = 0;
|
||||||
|
//已选省市区 isChose = 1
|
||||||
|
if((this.provinceName&&this.cityName)||(this.provinceName&&this.cityName&&this.townName)){
|
||||||
|
isChose = 1;
|
||||||
|
}
|
||||||
|
this.$emit("choseVal",{
|
||||||
|
province:this.provinceName,
|
||||||
|
provinceCode,
|
||||||
|
city:this.cityName,
|
||||||
|
cityCode,
|
||||||
|
town:this.townName,
|
||||||
|
townCode,
|
||||||
|
isChose,
|
||||||
|
visible:false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//获取省市区value
|
||||||
|
getTarId(name,type){
|
||||||
|
let id = 0;
|
||||||
|
lotusAddressJson.map((item,index)=>{
|
||||||
|
if(item.name === name){
|
||||||
|
id = item.value;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return id;
|
||||||
|
},
|
||||||
|
//获取市数据
|
||||||
|
getCityArr(parentId){
|
||||||
|
let city = [];
|
||||||
|
lotusAddressJson.map((item,index)=>{
|
||||||
|
if(item.parent === parentId){
|
||||||
|
city.push(item.name);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return city;
|
||||||
|
},
|
||||||
|
//获取区数据
|
||||||
|
getTownArr(parentId){
|
||||||
|
let town = [];
|
||||||
|
lotusAddressJson.map((item,index)=>{
|
||||||
|
if(index>34&&item.parent === parentId){
|
||||||
|
town.push(item.name);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return town;
|
||||||
|
},
|
||||||
|
//初始化数据
|
||||||
|
initFn(){
|
||||||
|
if(!this.province.length){
|
||||||
|
lotusAddressJson.map((item,index)=>{
|
||||||
|
if(index<=34){
|
||||||
|
this.province.push(item.name);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//已选择省市区，高亮显示对应选择省市区
|
||||||
|
const p = this._props.lotusAddressData.provinceName;
|
||||||
|
const c = this._props.lotusAddressData.cityName;
|
||||||
|
const t = this._props.lotusAddressData.townName;
|
||||||
|
//已选省
|
||||||
|
if(p){
|
||||||
|
this.pChoseIndex = this.getTarIndex(this.province,p);
|
||||||
|
}
|
||||||
|
//已选市
|
||||||
|
if(p&&c){
|
||||||
|
const pid = this.getTarId(p);
|
||||||
|
this.city = this.getCityArr(pid);
|
||||||
|
this.cChoseIndex = this.getTarIndex(this.city,c);
|
||||||
|
}
|
||||||
|
//已选区
|
||||||
|
if(p&&c&&t){
|
||||||
|
const cid= this.getTarId(c);
|
||||||
|
this.town = this.getTownArr(cid);
|
||||||
|
this.tChoseIndex = this.getTarIndex(this.town,t);
|
||||||
|
}
|
||||||
|
//未选省市区
|
||||||
|
if(!p&&!c&&!t){
|
||||||
|
this.pChoseIndex = -1;
|
||||||
|
this.cChoseIndex = -1;
|
||||||
|
this.tChoseIndex = -1;
|
||||||
|
this.city = [];
|
||||||
|
this.town = [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//获取已选省市区
|
||||||
|
getChosedData(){
|
||||||
|
const pid = this.getTarId(this.provinceName,'province');
|
||||||
|
this.city = this.getCityArr(pid);
|
||||||
|
const cid= this.getTarId(this.cityName,'city');
|
||||||
|
this.town = this.getTownArr(cid);
|
||||||
|
//已选省市区获取对应index
|
||||||
|
if(this.provinceName){
|
||||||
|
this.pChoseIndex = this.getTarIndex(this.province,this.provinceName);
|
||||||
|
}
|
||||||
|
if(this.cityName){
|
||||||
|
this.cChoseIndex = this.getTarIndex(this.city,this.cityName);
|
||||||
|
}
|
||||||
|
if(this.townName){
|
||||||
|
this.tChoseIndex = this.getTarIndex(this.town,this.townName);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//选择省市区交互
|
||||||
|
clickPicker(type,index,name){
|
||||||
|
//省
|
||||||
|
if(type === 0){
|
||||||
|
this.pChoseIndex = index;
|
||||||
|
this.provinceName = name;
|
||||||
|
this.cChoseIndex = -1;
|
||||||
|
this.tChoseIndex = -1;
|
||||||
|
this.cityName = '';
|
||||||
|
this.townName = '';
|
||||||
|
}
|
||||||
|
//市
|
||||||
|
if(type ===1){
|
||||||
|
this.cChoseIndex = index;
|
||||||
|
this.cityName = name;
|
||||||
|
this.tChoseIndex = -1;
|
||||||
|
this.townName = '';
|
||||||
|
}
|
||||||
|
//区
|
||||||
|
if(type === 2){
|
||||||
|
this.tChoseIndex = index;
|
||||||
|
this.townName = name;
|
||||||
|
}
|
||||||
|
//获取省市区数据
|
||||||
|
this.getChosedData();
|
||||||
|
},
|
||||||
|
//获取已选省市区index
|
||||||
|
getTarIndex(arr,tarName){
|
||||||
|
let cIndex = 0;
|
||||||
|
arr.map((item,index)=>{
|
||||||
|
if(item === tarName){
|
||||||
|
cIndex = index;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return cIndex;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
checkStatus(){
|
||||||
|
let t = null;
|
||||||
|
const _this = this;
|
||||||
|
if(!_this.visible){
|
||||||
|
_this.visible = _this._props.lotusAddressData.visible;
|
||||||
|
//获取省市区
|
||||||
|
_this.provinceName = _this._props.lotusAddressData.provinceName;
|
||||||
|
_this.cityName = _this._props.lotusAddressData.cityName;
|
||||||
|
_this.townName = _this._props.lotusAddressData.townName;
|
||||||
|
//生成初始化数据
|
||||||
|
_this.initFn();
|
||||||
|
t = _this.visible;
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
@import "./address-one.css";
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"address-special",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,136 @@
|
||||||
|
<template>
|
||||||
|
<picker mode="multiSelector"
|
||||||
|
:value="multiIndex"
|
||||||
|
:range="multiArray"
|
||||||
|
@change="handleValueChange"
|
||||||
|
@columnchange="handleColumnChange">
|
||||||
|
<slot></slot>
|
||||||
|
</picker>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const CHINA_REGIONS = require('./regions.json')
|
||||||
|
export default {
|
||||||
|
props:{
|
||||||
|
defaultRegions:{
|
||||||
|
type:Array,
|
||||||
|
default(){
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
defaultRegionCode:{
|
||||||
|
type:String
|
||||||
|
},
|
||||||
|
defaultRegion:[String,Array]
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
cityArr:CHINA_REGIONS[0].childs,
|
||||||
|
districtArr:CHINA_REGIONS[0].childs[0].childs,
|
||||||
|
multiIndex: [0, 0, 0],
|
||||||
|
isInitMultiArray:true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch:{
|
||||||
|
defaultRegion:{
|
||||||
|
handler(region,oldRegion){
|
||||||
|
if(Array.isArray(region)){
|
||||||
|
// 避免传的是字面量的时候重复触发
|
||||||
|
oldRegion = oldRegion || []
|
||||||
|
if(region.join('')!==oldRegion.join('')){
|
||||||
|
this.handleDefaultRegion(region)
|
||||||
|
}
|
||||||
|
}else if(region&®ion.length == 6){
|
||||||
|
this.handleDefaultRegion(region)
|
||||||
|
}else{
|
||||||
|
console.warn('defaultRegion非有效格式')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate:true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
multiArray(){
|
||||||
|
return this.pickedArr.map(arr=>arr.map(item=>item.name))
|
||||||
|
},
|
||||||
|
pickedArr(){
|
||||||
|
// 进行初始化
|
||||||
|
if(this.isInitMultiArray){
|
||||||
|
return [
|
||||||
|
CHINA_REGIONS,
|
||||||
|
CHINA_REGIONS[0].childs,
|
||||||
|
CHINA_REGIONS[0].childs[0].childs
|
||||||
|
]
|
||||||
|
}
|
||||||
|
return [CHINA_REGIONS,this.cityArr,this.districtArr];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleColumnChange(e){
|
||||||
|
this.isInitMultiArray = false;
|
||||||
|
const that = this;
|
||||||
|
let col = e.detail.column;
|
||||||
|
let row = e.detail.value;
|
||||||
|
that.multiIndex[col] = row;
|
||||||
|
try{
|
||||||
|
switch(col){
|
||||||
|
case 0:
|
||||||
|
if(CHINA_REGIONS[that.multiIndex[0]].childs.length==0){
|
||||||
|
that.cityArr = that.districtArr = [CHINA_REGIONS[that.multiIndex[0]]]
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
that.cityArr = CHINA_REGIONS[that.multiIndex[0]].childs
|
||||||
|
that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}catch(e){
|
||||||
|
// console.log(e);
|
||||||
|
that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[0].childs
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
handleValueChange(e){
|
||||||
|
// 结构赋值
|
||||||
|
let [index0,index1,index2] = e.detail.value;
|
||||||
|
let [arr0,arr1,arr2] = this.pickedArr;
|
||||||
|
let address = [arr0[index0],arr1[index1],arr2[index2]];
|
||||||
|
// console.log(address);
|
||||||
|
this.$emit('getRegion',address)
|
||||||
|
},
|
||||||
|
handleDefaultRegion(region){
|
||||||
|
const isCode = !Array.isArray(region)
|
||||||
|
this.isInitMultiArray = false;
|
||||||
|
let children = CHINA_REGIONS
|
||||||
|
for(let i=0;i<3;i++){
|
||||||
|
for(let j=0;j<children.length;j++){
|
||||||
|
let condition = isCode?children[j].code==region.slice(0,(i+1)*2):children[j].name.includes(region[i]);
|
||||||
|
if(condition){
|
||||||
|
// 匹配成功进行赋值
|
||||||
|
// console.log(i,j,children.length-1);
|
||||||
|
children = children[j].childs;
|
||||||
|
if(i==0){
|
||||||
|
this.cityArr = children
|
||||||
|
}else if(i==1){
|
||||||
|
this.districtArr = children
|
||||||
|
}
|
||||||
|
this.$set(this.multiIndex,i,j)
|
||||||
|
// console.log(this.multiIndex);
|
||||||
|
break;
|
||||||
|
}else{
|
||||||
|
// 首次匹配失败就用默认的初始化
|
||||||
|
// console.log(i,j,children.length-1);
|
||||||
|
if(i==0 && j==(children.length-1)){
|
||||||
|
this.isInitMultiArray = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,217 @@
|
||||||
|
<template>
|
||||||
|
<view class="level-container">
|
||||||
|
<h1 class="title">选择收货地址</h1>
|
||||||
|
<ul class="name-list">
|
||||||
|
<li :class="showIndex==0?'select':''" @click="anewSelect(0)">{{province}}</li>
|
||||||
|
<li :class="showIndex==1?'select':''" @click="anewSelect(1)" v-if="showIndex>=1">{{city}}</li>
|
||||||
|
<li :class="showIndex==2?'select':''" @click="anewSelect(2)" v-if="showIndex>=2">{{area}}</li>
|
||||||
|
<li :class="showIndex==3?'select':''" @click="anewSelect(3)" v-if="showIndex>=3">{{street}}</li>
|
||||||
|
</ul>
|
||||||
|
<ul v-if="showIndex==0" class="content" :style="'height:'+ heightCot + 'upx'">
|
||||||
|
<li @click="selectPro(indexp,itemp.label)" v-for="(itemp,indexp) in provinceData" :key="indexp">{{itemp.label}}</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul v-if="showIndex==1" class="content" :style="'height:'+ heightCot + 'upx'">
|
||||||
|
<li @click="selectCity(indexc,itemc.label)" v-for="(itemc,indexc) in cityData" :key="indexc">{{itemc.label}}</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul v-if="showIndex==2" class="content" :style="'height:'+ heightCot + 'upx'">
|
||||||
|
<li @click="selectaArea(indexa,itema.label)" v-for="(itema,indexa) in areaData" :key="indexa">{{itema.label}}</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul v-if="showIndex==3" class="content" :style="'height:'+ heightCot + 'upx'">
|
||||||
|
<li @click="selectStreet(indexs,items)" v-for="(items,indexs) in streetsData" :key="indexs">{{items}}</li>
|
||||||
|
</ul>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import provinceData from './city-data/province.js';
|
||||||
|
import getCity from './city-data/city.js';
|
||||||
|
import getArea from './city-data/area.js';
|
||||||
|
import getStreets from './city-data/streets.js';
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
province: "请选择",
|
||||||
|
city: "请选择",
|
||||||
|
area: "请选择",
|
||||||
|
street: "请选择",
|
||||||
|
cityDataAll: '', // 市的所有數據
|
||||||
|
getAreaAll: '', // 区的所有数据
|
||||||
|
getStreetsAll: '', // 街道的所有数据
|
||||||
|
presentIndex: [],
|
||||||
|
proIndex: 0,
|
||||||
|
cityIndex: 0,
|
||||||
|
areaIndex: 0,
|
||||||
|
|
||||||
|
provinceData: '', // 当前展示的省数据
|
||||||
|
cityData: '', // 当前展示的市数据
|
||||||
|
areaData: '', //当前展示的区数据
|
||||||
|
streetsData: '', //当前展示的区数据
|
||||||
|
showIndex: 0,
|
||||||
|
heightCot: 0,
|
||||||
|
bb: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
uni.getSystemInfo({
|
||||||
|
success: res => {
|
||||||
|
console.log(res.safeArea.height)
|
||||||
|
this.heightCot = (res.safeArea.height * 2) / 2
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// console.log(provinceData)
|
||||||
|
this.provinceData = provinceData;
|
||||||
|
this.cityDataAll = getCity;
|
||||||
|
this.getAreaAll = getArea;
|
||||||
|
this.getStreetsAll = getStreets
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
anewSelect(num) {
|
||||||
|
switch (num) {
|
||||||
|
case 0:
|
||||||
|
this.showIndex = 0;
|
||||||
|
this.areaData = [];
|
||||||
|
this.streetsData = [];
|
||||||
|
this.city = '请选择';
|
||||||
|
this.area = '请选择';
|
||||||
|
this.street = '请选择'
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
this.showIndex = 1;
|
||||||
|
this.areaData = [];
|
||||||
|
this.streetsData = [];
|
||||||
|
this.area = '请选择';
|
||||||
|
this.street = '请选择'
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
this.showIndex = 2;
|
||||||
|
this.streetsData = [];
|
||||||
|
this.street = '请选择'
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
console.log(11111);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selectPro(index, label) {
|
||||||
|
console.log(index)
|
||||||
|
const {
|
||||||
|
cityDataAll
|
||||||
|
} = this;
|
||||||
|
this.proIndex = index; // 当前省的下标
|
||||||
|
this.province = label;
|
||||||
|
this.cityData = cityDataAll[index];
|
||||||
|
this.showIndex = 1;
|
||||||
|
|
||||||
|
},
|
||||||
|
selectCity(index, label) {
|
||||||
|
const {
|
||||||
|
proIndex
|
||||||
|
} = this;
|
||||||
|
// console.log(this.getAreaAll)
|
||||||
|
this.city = label;
|
||||||
|
this.cityIndex = index; // 当前市的下标
|
||||||
|
this.areaData = this.getAreaAll[proIndex][index];
|
||||||
|
this.showIndex = 2;
|
||||||
|
},
|
||||||
|
selectaArea(index, label) {
|
||||||
|
const {
|
||||||
|
proIndex,
|
||||||
|
cityIndex
|
||||||
|
} = this;
|
||||||
|
this.area = label;
|
||||||
|
this.showIndex = 3;
|
||||||
|
console.log(index)
|
||||||
|
console.log(this.getStreetsAll[proIndex][cityIndex])
|
||||||
|
console.log(this.getStreetsAll[proIndex][cityIndex][index])
|
||||||
|
this.streetsData = this.getStreetsAll[proIndex][cityIndex][index]
|
||||||
|
},
|
||||||
|
selectStreet(index, label) {
|
||||||
|
this.street = label;
|
||||||
|
const {
|
||||||
|
province,
|
||||||
|
city,
|
||||||
|
area,
|
||||||
|
street
|
||||||
|
} = this;
|
||||||
|
this.$emit('conceal',{
|
||||||
|
province,
|
||||||
|
city,
|
||||||
|
area,
|
||||||
|
street
|
||||||
|
})
|
||||||
|
// this.showIndex = 4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
ul,li{
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.level-container {
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
.select {
|
||||||
|
color: red;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
width: 40upx;
|
||||||
|
height: 6upx;
|
||||||
|
background: red;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: -8upx;
|
||||||
|
margin-left: -20upx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
font-size: 26upx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content,
|
||||||
|
.name-list {
|
||||||
|
padding: 0 20upx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 32upx;
|
||||||
|
margin: 30upx 20upx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name-list {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-right: 40upx;
|
||||||
|
padding-bottom: 6upx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin-top: 20upx;
|
||||||
|
height: 600upx;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
li {
|
||||||
|
border-bottom: 1px solid #f1f1f1;
|
||||||
|
padding: 20upx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li:last-child {
|
||||||
|
border-bototm: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,139 @@
|
||||||
|
/* eslint-disable */
|
||||||
|
var provinceData = [{
|
||||||
|
"label": "北京市",
|
||||||
|
"value": "11"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "天津市",
|
||||||
|
"value": "12"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "河北省",
|
||||||
|
"value": "13"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "山西省",
|
||||||
|
"value": "14"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "内蒙古自治区",
|
||||||
|
"value": "15"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "辽宁省",
|
||||||
|
"value": "21"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "吉林省",
|
||||||
|
"value": "22"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "黑龙江省",
|
||||||
|
"value": "23"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "上海市",
|
||||||
|
"value": "31"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "江苏省",
|
||||||
|
"value": "32"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "浙江省",
|
||||||
|
"value": "33"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "安徽省",
|
||||||
|
"value": "34"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "福建省",
|
||||||
|
"value": "35"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "江西省",
|
||||||
|
"value": "36"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "山东省",
|
||||||
|
"value": "37"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "河南省",
|
||||||
|
"value": "41"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "湖北省",
|
||||||
|
"value": "42"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "湖南省",
|
||||||
|
"value": "43"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "广东省",
|
||||||
|
"value": "44"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "广西壮族自治区",
|
||||||
|
"value": "45"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "海南省",
|
||||||
|
"value": "46"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "重庆市",
|
||||||
|
"value": "50"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "四川省",
|
||||||
|
"value": "51"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "贵州省",
|
||||||
|
"value": "52"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "云南省",
|
||||||
|
"value": "53"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "西藏自治区",
|
||||||
|
"value": "54"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "陕西省",
|
||||||
|
"value": "61"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "甘肃省",
|
||||||
|
"value": "62"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "青海省",
|
||||||
|
"value": "63"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "宁夏回族自治区",
|
||||||
|
"value": "64"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "新疆维吾尔自治区",
|
||||||
|
"value": "65"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "台湾",
|
||||||
|
"value": "66"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "香港",
|
||||||
|
"value": "67"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "澳门",
|
||||||
|
"value": "68"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
export default provinceData;
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,194 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="img-outside-box">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<view v-if="ifTitle" class="img-title">标题</view>
|
||||||
|
<view :class="(imgList.length==showAmount*1 || imgList.length==showAmount*2) ? 'dis-jbac-fw' : 'dis-ac-fw'">
|
||||||
|
<!-- 图片列表 -->
|
||||||
|
<view class="img-box animated bounceIn"
|
||||||
|
:style="{
|
||||||
|
width: ['100%','100%','48.4%','31.4%','22.8%'][showAmount*1],
|
||||||
|
marginRight: (imgList.length==showAmount*1 && imgList.length==showAmount*2) ? '' : '20rpx'
|
||||||
|
}"
|
||||||
|
:class="[(showAmount*1-1==index || showAmount*2-1==index || showAmount*3-1==index || showAmount*4-1==index || showAmount*5-1==index || showAmount*6-1==index || showAmount*7-1==index || showAmount*8-1==index || showAmount*9-1==index || showAmount*10-1==index) ? 'img-box-right' : '',delIndex==index ? 'bounceOut' : '' ]"
|
||||||
|
v-for="(item,index) in imgList" :key="index" >
|
||||||
|
<!-- 图片 -->
|
||||||
|
<image @tap="preImg(index)"
|
||||||
|
class="picker-img"
|
||||||
|
:style="{
|
||||||
|
width: '100%',
|
||||||
|
height: imgH+'px',
|
||||||
|
borderRadius: imgR
|
||||||
|
}"
|
||||||
|
:src="item" mode="aspectFill" lazy-load>
|
||||||
|
</image>
|
||||||
|
<!-- 删除按钮 -->
|
||||||
|
<view class="img-del-box">
|
||||||
|
<view class="del-btn" :style="{
|
||||||
|
width: [60,60,60,50,40][showAmount*1]+'rpx',
|
||||||
|
height:[60,60,60,50,40][showAmount*1]+'rpx'
|
||||||
|
}"
|
||||||
|
@tap="delImg(index)"></view></view>
|
||||||
|
</view>
|
||||||
|
<!-- 添加图片按钮 -->
|
||||||
|
<view class="add-img-btn icon" :class="addIconList[addNum*1]"
|
||||||
|
v-if="imgList.length!=20"
|
||||||
|
:style="{
|
||||||
|
width: ['100%','100%','48.4%','31.4%','22.8%'][showAmount*1],
|
||||||
|
height: imgH+'px',
|
||||||
|
borderRadius: imgR}"
|
||||||
|
style="font-size: 90rpx;color: #CCCCCC;"
|
||||||
|
@tap="chooseImg">
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"img-one",
|
||||||
|
props: {
|
||||||
|
// 一排显示数量
|
||||||
|
showAmount: {
|
||||||
|
type:String,
|
||||||
|
default:'3'
|
||||||
|
},
|
||||||
|
// 是否显示图片标题
|
||||||
|
ifTitle: {
|
||||||
|
type: Boolean,
|
||||||
|
default:true
|
||||||
|
},
|
||||||
|
// 图片圆角
|
||||||
|
imgR: {
|
||||||
|
type:String,
|
||||||
|
default:'10rpx'
|
||||||
|
},
|
||||||
|
// 一次选择图片张数1~9
|
||||||
|
imgN: {
|
||||||
|
type:String,
|
||||||
|
default:'9'
|
||||||
|
},
|
||||||
|
// 哪种添加图标
|
||||||
|
addNum: {
|
||||||
|
type:String,
|
||||||
|
default:'0'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// #ifdef APP-PLUS || H5
|
||||||
|
let info = uni.createSelectorQuery().select(".add-img-btn");
|
||||||
|
info.boundingClientRect((data)=> { //data - 各种参数
|
||||||
|
// console.log(data.width) // 获取元素宽度
|
||||||
|
this.imgH = data.width;
|
||||||
|
}).exec()
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
// 获取选择图片按钮的宽，并设置选择图片按钮的高
|
||||||
|
const query = wx.createSelectorQuery().in(this)
|
||||||
|
query.select('.add-img-btn').boundingClientRect((rect) => {
|
||||||
|
this.imgH = rect.width;
|
||||||
|
}).exec()
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
imgList:[],//图片列表
|
||||||
|
imgH:'',//图片高度
|
||||||
|
delIndex:'-1',
|
||||||
|
// 添加按钮的icon图标
|
||||||
|
addIconList:['icon-add','icon-add-picture01','icon-add-picture02','icon-add-picture03','icon-add-picture04','icon-add-picture05'],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 选择图片
|
||||||
|
chooseImg() {
|
||||||
|
uni.chooseImage({
|
||||||
|
count: this.imgN*1,
|
||||||
|
sizeType: ['original', 'compressed'],
|
||||||
|
sourceType: ['album', 'camera'],
|
||||||
|
success: (res) => {
|
||||||
|
let files = res.tempFilePaths;
|
||||||
|
this.imgList = [...this.imgList,...files];
|
||||||
|
this.$emit('chooseEv',this.imgList);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 删除图片
|
||||||
|
delImg(index) {
|
||||||
|
this.delIndex = index;
|
||||||
|
setTimeout(()=>{
|
||||||
|
this.delIndex = '-1';
|
||||||
|
this.imgList.splice(index,1);
|
||||||
|
this.$emit('chooseEv',this.imgList);
|
||||||
|
},1000)
|
||||||
|
},
|
||||||
|
// 预览图片
|
||||||
|
preImg(index) {
|
||||||
|
uni.previewImage({
|
||||||
|
current: index,
|
||||||
|
urls: this.imgList
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.img-outside-box{padding-top: 20rpx;}
|
||||||
|
.img-title{font-size: 28rpx;margin-bottom: 20rpx;}
|
||||||
|
image {vertical-align: middle;}
|
||||||
|
.dis-ac-fw{display: flex;align-items: center;flex-wrap: wrap;}
|
||||||
|
.dis-jbac-fw{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
|
||||||
|
.img-box{margin-bottom: 20rpx;position: relative;}
|
||||||
|
.img-box-right {
|
||||||
|
margin-right: 0rpx!important;
|
||||||
|
}
|
||||||
|
.add-img-btn {
|
||||||
|
position: relative;
|
||||||
|
background-color: #DFDFDF;
|
||||||
|
display: flex;justify-content: center;align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
.icon-add::before,.icon-add::after {
|
||||||
|
content:'';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
width: 4rpx;
|
||||||
|
height: 50%;
|
||||||
|
background-color: #CCCCCC;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
}
|
||||||
|
.icon-add::after{
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 删除按钮 */
|
||||||
|
.img-del-box {
|
||||||
|
position: absolute;
|
||||||
|
top: 10rpx;
|
||||||
|
right: 10rpx;
|
||||||
|
}
|
||||||
|
.del-btn{
|
||||||
|
position: relative;
|
||||||
|
display: flex;justify-content: center;align-items: center;
|
||||||
|
background-color: rgba(0,0,0,.6);
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
.del-btn::before,.del-btn::after{
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
width: 2rpx;
|
||||||
|
height: 46%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 2rpx;
|
||||||
|
}
|
||||||
|
.del-btn::before{
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
.del-btn::after{
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
第一步：引入组件
|
||||||
|
|
||||||
|
import chooseImgOne from '@/components/choose-imgs/choose-img-one.vue';
|
||||||
|
|
||||||
|
第二步：注册组件
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
'choose-img':chooseImgOne
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
第三步：使用组件
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<choose-img
|
||||||
|
showAmount="3"
|
||||||
|
:ifTitle="false"
|
||||||
|
imgR="10rpx"
|
||||||
|
imgN="9"
|
||||||
|
addNum="0"
|
||||||
|
@chooseImg="chooseImg"
|
||||||
|
></choose-img>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
参数说明
|
||||||
|
|
||||||
|
showAmount：一排显示多少张，默认3张图
|
||||||
|
ifTitle：是否显示图片标题，默认不显示
|
||||||
|
imgR：图片圆角，默认10rpx
|
||||||
|
imgN：一次选择图片张数1~9，默认9
|
||||||
|
addNum：哪种添加图标，默认0
|
||||||
|
|
||||||
|
方法说明
|
||||||
|
|
||||||
|
export default {
|
||||||
|
methods:{
|
||||||
|
chooseImg(arrImg) {
|
||||||
|
console.log(arrImg);//返回的是数组图片
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
第一步：引入组件
|
||||||
|
|
||||||
|
import statusContainer from '@/components/containers/status-container.vue';
|
||||||
|
|
||||||
|
第二步：注册组件
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
statusContainer
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
第三步：使用组件
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-container
|
||||||
|
:ifReturn="true"
|
||||||
|
:ifTitle="true"
|
||||||
|
titlet="首页"
|
||||||
|
:ifTitleCenter="true"
|
||||||
|
titlec="#000000"
|
||||||
|
returnc="#333333"
|
||||||
|
backgroundc="#FFFFFF"
|
||||||
|
></status-container>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
参数说明
|
||||||
|
|
||||||
|
ifTitle：是否显示标题，默认true
|
||||||
|
titlet：标题文字，默认标题
|
||||||
|
ifTitleCenter：标题是否居中，默认居中
|
||||||
|
titlec：标题颜色，默认#000000
|
||||||
|
ifReturn：是否显示返回键，默认显示
|
||||||
|
returnc：返回键颜色，默认#333333
|
||||||
|
backgroundc：导航栏背景色，默认#FFFFFF
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-nav
|
||||||
|
:ifReturn="ifReturn"
|
||||||
|
:returnColor="returnc"
|
||||||
|
:titleColor="titlec"
|
||||||
|
:navBarTitle="titlet"
|
||||||
|
:ifTitle="ifTitle"
|
||||||
|
:ifCenter="ifTitleCenter"
|
||||||
|
:backgroudColor="backgroundc"></status-nav>
|
||||||
|
<view class="pad-zy20" :style="{paddingBottom: '70px'}">
|
||||||
|
<slot name="content"></slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import statusNav from '../status-navs/status-nav.vue';
|
||||||
|
export default {
|
||||||
|
name:"status-container",
|
||||||
|
components:{
|
||||||
|
statusNav
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
// 是否显示标题
|
||||||
|
ifTitle:{
|
||||||
|
type:Boolean,
|
||||||
|
default:true
|
||||||
|
},
|
||||||
|
// 标题文字
|
||||||
|
titlet:{
|
||||||
|
type:String,
|
||||||
|
default:'标题'
|
||||||
|
},
|
||||||
|
// 标题是否居中
|
||||||
|
ifTitleCenter:{
|
||||||
|
type:Boolean,
|
||||||
|
default:true
|
||||||
|
},
|
||||||
|
// 标题颜色
|
||||||
|
titlec:{
|
||||||
|
type:String,
|
||||||
|
default:'#000000'
|
||||||
|
},
|
||||||
|
// 是否显示返回键
|
||||||
|
ifReturn:{
|
||||||
|
type:Boolean,
|
||||||
|
default:true
|
||||||
|
},
|
||||||
|
// 返回键颜色
|
||||||
|
returnc:{
|
||||||
|
type:String,
|
||||||
|
default:"#333333"
|
||||||
|
},
|
||||||
|
// 导航栏背景色
|
||||||
|
backgroundc:{
|
||||||
|
type:String,
|
||||||
|
default:"#FFFFFF"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,295 @@
|
||||||
|
<template>
|
||||||
|
<view class="datetime-picker">
|
||||||
|
<view class="mask" :class="{ show: open }" @touchmove.stop.prevent catchtouchmove="true"></view>
|
||||||
|
<view class="wrap" :class="{ show: open }">
|
||||||
|
<view class="picker-header" @touchmove.stop.prevent catchtouchmove="true">
|
||||||
|
<view class="btn-picker cancel" @click="open = false">取消</view>
|
||||||
|
<view class="btn-picker submit" @click="_onSubmit">确定</view>
|
||||||
|
</view>
|
||||||
|
<view class="picker-body">
|
||||||
|
<picker-view :value="value" @change="_onChange">
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="column-item" v-for="item in years" :key="item">
|
||||||
|
{{ item + "年" }}
|
||||||
|
</view>
|
||||||
|
</picker-view-column>
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="column-item" v-for="item in months" :key="item">
|
||||||
|
{{ formatNum(item) + "月" }}
|
||||||
|
</view>
|
||||||
|
</picker-view-column>
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="column-item" v-for="item in days" :key="item">
|
||||||
|
{{ formatNum(item) + "日" }}
|
||||||
|
</view>
|
||||||
|
</picker-view-column>
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="column-item" v-for="item in hours" :key="item">
|
||||||
|
{{ formatNum(item) + "时" }}
|
||||||
|
</view>
|
||||||
|
</picker-view-column>
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="column-item" v-for="item in minutes" :key="item">
|
||||||
|
{{ formatNum(item) + "分" }}
|
||||||
|
</view>
|
||||||
|
</picker-view-column>
|
||||||
|
</picker-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "buuug7-simple-datetime-picker",
|
||||||
|
props: {
|
||||||
|
startYear: {
|
||||||
|
type: Number,
|
||||||
|
default: 2000,
|
||||||
|
},
|
||||||
|
endYear: {
|
||||||
|
type: Number,
|
||||||
|
default: 2030,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
open: false,
|
||||||
|
years: [],
|
||||||
|
months: [],
|
||||||
|
days: [],
|
||||||
|
hours: [],
|
||||||
|
minutes: [],
|
||||||
|
currentDate: new Date(),
|
||||||
|
year: "",
|
||||||
|
month: "",
|
||||||
|
day: "",
|
||||||
|
hour: "",
|
||||||
|
minute: "",
|
||||||
|
value: [0, 0, 0, 0, 0],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
month() {
|
||||||
|
this.initDays();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
this.initYears();
|
||||||
|
this.initMonths();
|
||||||
|
this.initDays();
|
||||||
|
this.initHours();
|
||||||
|
this.initMinutes();
|
||||||
|
this.setSelectValue();
|
||||||
|
},
|
||||||
|
|
||||||
|
initYears() {
|
||||||
|
const years = [];
|
||||||
|
for (let year = this.startYear; year <= this.endYear; year++) {
|
||||||
|
years.push(year);
|
||||||
|
if (this.currentDate.getFullYear() === year) {
|
||||||
|
this.$set(this.value, 0, year - this.startYear);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.years = years;
|
||||||
|
},
|
||||||
|
|
||||||
|
initMonths() {
|
||||||
|
const months = [];
|
||||||
|
for (let month = 1; month <= 12; month++) {
|
||||||
|
months.push(month);
|
||||||
|
if (this.currentDate.getMonth() + 1 === month) {
|
||||||
|
this.$set(this.value, 1, month - 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.months = months;
|
||||||
|
},
|
||||||
|
|
||||||
|
initDays() {
|
||||||
|
const value = this.value;
|
||||||
|
const selectedYear = this.years[value[0]];
|
||||||
|
const selectedMonth = this.months[value[1]];
|
||||||
|
const days = [];
|
||||||
|
const totalDays = new Date(selectedYear, selectedMonth, 0).getDate();
|
||||||
|
for (let day = 1; day <= totalDays; day++) {
|
||||||
|
days.push(day);
|
||||||
|
if (this.currentDate.getDate() === day) {
|
||||||
|
this.$set(value, 2, day - 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.days = days;
|
||||||
|
},
|
||||||
|
|
||||||
|
initHours() {
|
||||||
|
const hours = [];
|
||||||
|
for (let hour = 0; hour <= 23; hour++) {
|
||||||
|
hours.push(hour);
|
||||||
|
if (this.currentDate.getHours() === hour) {
|
||||||
|
this.$set(this.value, 3, hour);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.hours = hours;
|
||||||
|
},
|
||||||
|
|
||||||
|
initMinutes() {
|
||||||
|
const minutes = [];
|
||||||
|
for (let minute = 0; minute < 60; minute++) {
|
||||||
|
minutes.push(minute);
|
||||||
|
if (this.currentDate.getMinutes() === minute) {
|
||||||
|
this.$set(this.value, 4, minute);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.minutes = minutes;
|
||||||
|
},
|
||||||
|
|
||||||
|
show() {
|
||||||
|
this.open = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
hide() {
|
||||||
|
this.open = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
_onChange(e) {
|
||||||
|
this.value = e.detail.value;
|
||||||
|
this.setSelectValue();
|
||||||
|
},
|
||||||
|
|
||||||
|
setSelectValue() {
|
||||||
|
const v = this.value;
|
||||||
|
|
||||||
|
this.year = this.years[v[0]];
|
||||||
|
this.month = this.months[v[1]];
|
||||||
|
this.day = this.days[v[2]];
|
||||||
|
this.hour = this.hours[v[3]];
|
||||||
|
this.minute = this.minutes[v[4]];
|
||||||
|
},
|
||||||
|
|
||||||
|
_onSubmit() {
|
||||||
|
const {
|
||||||
|
year,
|
||||||
|
month,
|
||||||
|
day,
|
||||||
|
hour,
|
||||||
|
minute,
|
||||||
|
formatNum
|
||||||
|
} = this;
|
||||||
|
const result = {
|
||||||
|
year: formatNum(year),
|
||||||
|
month: formatNum(month),
|
||||||
|
day: formatNum(day),
|
||||||
|
hour: formatNum(hour),
|
||||||
|
minute: formatNum(minute),
|
||||||
|
};
|
||||||
|
this.$emit("submit", result);
|
||||||
|
this.hide();
|
||||||
|
},
|
||||||
|
|
||||||
|
formatNum(num) {
|
||||||
|
return num < 10 ? "0" + num : num + "";
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
$transition: all 0.3s ease;
|
||||||
|
$primary: #488ee9;
|
||||||
|
|
||||||
|
.datetime-picker {
|
||||||
|
position: relative;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
picker-view {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mask {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1000;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.6);
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
transition: $transition;
|
||||||
|
|
||||||
|
&.show {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap {
|
||||||
|
z-index: 1001;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
transition: $transition;
|
||||||
|
transform: translateY(100%);
|
||||||
|
|
||||||
|
&.show {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 8px;
|
||||||
|
background-color: darken(#fff, 2%);
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-body {
|
||||||
|
width: 100%;
|
||||||
|
height: 420rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-item {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-picker {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
line-height: 2;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #eee;
|
||||||
|
font-size: 14px;
|
||||||
|
// border-radius: 2px;
|
||||||
|
color: #000;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-picker.submit {
|
||||||
|
background-color: $primary;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,211 @@
|
||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="page-body">
|
||||||
|
<view class='wrapper'>
|
||||||
|
<view class='toolbar' @tap="format" style="height: 120px;overflow-y: auto;">
|
||||||
|
<!-- 字体加粗 -->
|
||||||
|
<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold"></view>
|
||||||
|
|
||||||
|
<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic"></view>
|
||||||
|
<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian"
|
||||||
|
data-name="underline"></view>
|
||||||
|
<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian"
|
||||||
|
data-name="strike"></view>
|
||||||
|
<view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi"
|
||||||
|
data-name="align" data-value="left"></view>
|
||||||
|
<view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi"
|
||||||
|
data-name="align" data-value="center"></view>
|
||||||
|
<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi"
|
||||||
|
data-name="align" data-value="right"></view>
|
||||||
|
<view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi"
|
||||||
|
data-name="align" data-value="justify"></view>
|
||||||
|
<view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height"
|
||||||
|
data-name="lineHeight" data-value="2"></view>
|
||||||
|
<view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing"
|
||||||
|
data-name="letterSpacing" data-value="2em"></view>
|
||||||
|
<view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju"
|
||||||
|
data-name="marginTop" data-value="20px"></view>
|
||||||
|
<view :class="formats.previewarginBottom ? 'ql-active' : ''"
|
||||||
|
class="iconfont icon-723bianjiqi_duanhouju" data-name="marginBottom" data-value="20px"></view>
|
||||||
|
<view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
|
||||||
|
<view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font"
|
||||||
|
data-name="fontFamily" data-value="Pacifico"></view>
|
||||||
|
<view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize"
|
||||||
|
data-name="fontSize" data-value="24px"></view>
|
||||||
|
|
||||||
|
<view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color"
|
||||||
|
data-name="color" data-value="#0000ff"></view>
|
||||||
|
<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
|
||||||
|
class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00ff00"></view>
|
||||||
|
|
||||||
|
<view class="iconfont icon-date" @tap="insertDate"></view>
|
||||||
|
<view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
|
||||||
|
<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie"
|
||||||
|
data-name="list" data-value="ordered"></view>
|
||||||
|
<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie"
|
||||||
|
data-name="list" data-value="bullet"></view>
|
||||||
|
<view class="iconfont icon-undo" @tap="undo"></view>
|
||||||
|
<view class="iconfont icon-redo" @tap="redo"></view>
|
||||||
|
|
||||||
|
<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
|
||||||
|
<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
|
||||||
|
<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
|
||||||
|
<view class="iconfont icon-charutupian" @tap="insertImage"></view>
|
||||||
|
<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1"
|
||||||
|
data-name="header" :data-value="1"></view>
|
||||||
|
<view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao"
|
||||||
|
data-name="script" data-value="sub"></view>
|
||||||
|
<view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao"
|
||||||
|
data-name="script" data-value="super"></view>
|
||||||
|
<view class="iconfont icon-shanchu" @tap="clear"></view>
|
||||||
|
<view :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl"
|
||||||
|
data-name="direction" data-value="rtl"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="editor-wrapper">
|
||||||
|
<editor id="editor" class="ql-container" placeholder="开始输入..." showImgSize showImgToolbar
|
||||||
|
showImgResize @statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady" @blur="getContents">
|
||||||
|
</editor>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:'editor',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
readOnly: false,
|
||||||
|
formats: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 失去焦点时，获取富文本的内容
|
||||||
|
getContents(html){
|
||||||
|
this.$emit('getContents',html);
|
||||||
|
},
|
||||||
|
readOnlyChange() {
|
||||||
|
this.readOnly = !this.readOnly
|
||||||
|
},
|
||||||
|
onEditorReady() {
|
||||||
|
uni.createSelectorQuery().select('#editor').context((res) => {
|
||||||
|
this.editorCtx = res.context
|
||||||
|
}).exec()
|
||||||
|
},
|
||||||
|
undo() {
|
||||||
|
this.editorCtx.undo()
|
||||||
|
},
|
||||||
|
redo() {
|
||||||
|
this.editorCtx.redo()
|
||||||
|
},
|
||||||
|
format(e) {
|
||||||
|
let {
|
||||||
|
name,
|
||||||
|
value
|
||||||
|
} = e.target.dataset
|
||||||
|
if (!name) return
|
||||||
|
// console.log('format', name, value)
|
||||||
|
this.editorCtx.format(name, value)
|
||||||
|
|
||||||
|
},
|
||||||
|
onStatusChange(e) {
|
||||||
|
const formats = e.detail
|
||||||
|
this.formats = formats
|
||||||
|
},
|
||||||
|
insertDivider() {
|
||||||
|
this.editorCtx.insertDivider({
|
||||||
|
success: function() {
|
||||||
|
console.log('insert divider success')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
clear() {
|
||||||
|
this.editorCtx.clear({
|
||||||
|
success: function(res) {
|
||||||
|
console.log("clear success")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
removeFormat() {
|
||||||
|
this.editorCtx.removeFormat()
|
||||||
|
},
|
||||||
|
insertDate() {
|
||||||
|
const date = new Date()
|
||||||
|
const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
|
||||||
|
this.editorCtx.insertText({
|
||||||
|
text: formatDate
|
||||||
|
})
|
||||||
|
},
|
||||||
|
insertImage() {
|
||||||
|
uni.chooseImage({
|
||||||
|
count: 1,
|
||||||
|
success: (res) => {
|
||||||
|
this.editorCtx.insertImage({
|
||||||
|
src: res.tempFilePaths[0],
|
||||||
|
alt: '图像',
|
||||||
|
success:()=> {
|
||||||
|
console.log('insert image success')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
uni.loadFontFace({
|
||||||
|
family: 'Pacifico',
|
||||||
|
source: 'url("https://sungd.github.io/Pacifico.ttf")'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import "./editor-icon.css";
|
||||||
|
|
||||||
|
.page-body {
|
||||||
|
height: calc(100vh - var(--window-top) - var(--status-bar-height));
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-wrapper {
|
||||||
|
height: calc(100vh - var(--window-top) - var(--status-bar-height) - 140px);
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 8px 8px;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-bottom: 0;
|
||||||
|
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.ql-container {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 12px 15px;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 30vh;
|
||||||
|
height: 100%;
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-active {
|
||||||
|
color: #06c;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
|
@ -0,0 +1,206 @@
|
||||||
|
<template>
|
||||||
|
<view class="foot-box"
|
||||||
|
:style="{
|
||||||
|
background: isGradualChange ? `linear-gradient( to ${direction}, ${colorOne} 0%, ${colorTwo} 20%, ${colorThree} 80%, ${colorFour} 100%)` : `url(${backgroundImage}) ${backgroundColor} `,
|
||||||
|
boxShadow: `-10rpx 0rpx 20rpx rgba( 0, 0, 0, ${boxShadowNum})`
|
||||||
|
}">
|
||||||
|
<!-- 后台动态改变的icon与标题 start -->
|
||||||
|
<view @tap="choosefoot(index)" class="item-box" v-for="(item,index) in footList" :key="index">
|
||||||
|
<image :class="isIcon==index ? 'bulge' : ''" :style="{width:[40,40,40,40,37][index]+'rpx',height:[40,40,40,40,40][index]+'rpx'}" :src="current == index ? item.selectedIconPath : item.iconPath" mode="widthFix"></image>
|
||||||
|
<view class="clips1" :class="current==index ? 'activeclass' : 'defaultclass'">{{item.title}}</view>
|
||||||
|
</view>
|
||||||
|
<!-- 后台动态改变的icon图 end -->
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:'foot-tab',
|
||||||
|
props:{
|
||||||
|
// 当前选中项
|
||||||
|
current:{
|
||||||
|
type:String,
|
||||||
|
default:'0'
|
||||||
|
},
|
||||||
|
// 默认哪个图标突出
|
||||||
|
isIcon:{
|
||||||
|
type:String,
|
||||||
|
default:'2'
|
||||||
|
},
|
||||||
|
// 底部导航背景图片
|
||||||
|
backgroundImage:{
|
||||||
|
type:String,
|
||||||
|
default:'http://img.netbian.com/file/2021/1212/232713y3bCy.jpg'
|
||||||
|
},
|
||||||
|
// 背景颜色
|
||||||
|
backgroundColor:{
|
||||||
|
type:String,
|
||||||
|
default:'#FFFFFF'
|
||||||
|
},
|
||||||
|
// 是否开启背景颜色渐变
|
||||||
|
isGradualChange:{
|
||||||
|
type:Boolean,
|
||||||
|
default:true
|
||||||
|
},
|
||||||
|
// 渐变方向
|
||||||
|
direction:{
|
||||||
|
type:String,
|
||||||
|
default:'right top'
|
||||||
|
},
|
||||||
|
// 第一种颜色
|
||||||
|
colorOne:{
|
||||||
|
type:String,
|
||||||
|
default:'#FFFFFF'
|
||||||
|
},
|
||||||
|
// 第二种颜色
|
||||||
|
colorTwo:{
|
||||||
|
type:String,
|
||||||
|
default:'#FFFFFF'
|
||||||
|
},
|
||||||
|
// 第三种颜色
|
||||||
|
colorThree:{
|
||||||
|
type:String,
|
||||||
|
default:'#FFFFFF'
|
||||||
|
},
|
||||||
|
// 第四种颜色
|
||||||
|
colorFour:{
|
||||||
|
type:String,
|
||||||
|
default:'#FFFFFF'
|
||||||
|
},
|
||||||
|
// 阴影大小0~1之间 0表示没有阴影
|
||||||
|
boxShadowNum:{
|
||||||
|
type:String,
|
||||||
|
default:'0.1'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
ifCustomerService:false,//是否存在客服 默认不存在客服
|
||||||
|
footList:[
|
||||||
|
{
|
||||||
|
iconPath: "/static/tabbar/icon-mo-home.png",
|
||||||
|
selectedIconPath: "/static/tabbar/icon-select-home.png",
|
||||||
|
title:'首页'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
iconPath: "/static/tabbar/icon-mo-fun.png",
|
||||||
|
selectedIconPath: "/static/tabbar/icon-select-fun.png",
|
||||||
|
title:'项目列表'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
iconPath: "/static/tabbar/icon-scan.png",
|
||||||
|
selectedIconPath: "/static/tabbar/icon-scan.png",
|
||||||
|
title:'扫码报修'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
iconPath: "/static/tabbar/icon-mo-news.png",
|
||||||
|
selectedIconPath: "/static/tabbar/icon-select-news.png",
|
||||||
|
title:'意见反馈'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
iconPath: "/static/tabbar/icon-mo-person.png",
|
||||||
|
selectedIconPath: "/static/tabbar/icon-select-person.png",
|
||||||
|
title:'我的'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
choosefoot(index){
|
||||||
|
if(index==0){
|
||||||
|
uni.reLaunch({url:'/pages/tabbar/pagehome/pagehome'})
|
||||||
|
} else {
|
||||||
|
// if(!this.$toolAll.tools.judgeAuth()) {
|
||||||
|
// 已授权
|
||||||
|
switch (index){
|
||||||
|
case 1:
|
||||||
|
uni.reLaunch({url:'/pages/tabbar/project-list/project-list'})
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
// #ifdef APP-PLUS, MP-WEIXIN
|
||||||
|
uni.scanCode({
|
||||||
|
onlyFromCamera:false, // 是否只能从相机扫码，不允许从相册选择图片
|
||||||
|
scanType: ['qrCode'], // barCode：一维码， qrCode：二维码， datamatrix：Data Matrix 码， pdf417：PDF417 条码
|
||||||
|
autoDecodeCharset:true, // 是否启用自动识别字符编码功能，默认为否
|
||||||
|
success: function (res) {
|
||||||
|
console.log('条码类型：' + res.scanType);
|
||||||
|
console.log('条码内容：' + res.result);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// #endif
|
||||||
|
// #ifdef H5
|
||||||
|
this.scanCode();
|
||||||
|
// #endif
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
uni.reLaunch({url:'/pages/tabbar/feedback/feedback'})
|
||||||
|
break;
|
||||||
|
case 4:
|
||||||
|
uni.reLaunch({url:'/pages/tabbar/my/my'})
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
// } else {
|
||||||
|
// // 未授权
|
||||||
|
// uni.navigateTo({
|
||||||
|
// url:'/pages/login/login'
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||||
|
/* 外框样式 start */
|
||||||
|
.foot-box{
|
||||||
|
height: 110rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
position: fixed;bottom: 0;left: 0;right: 0;z-index: 10;
|
||||||
|
display: flex;justify-content: space-around;
|
||||||
|
background-repeat: no-repeat;background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
/* 外框样式 end */
|
||||||
|
.item-box {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16rpx 10rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
height: 110rpx;
|
||||||
|
}
|
||||||
|
/* 图标样式 */
|
||||||
|
.item-box image {
|
||||||
|
width: 64rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
}
|
||||||
|
.item-box view{
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
/* 字体默认样式 */
|
||||||
|
.defaultclass {
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
/* 字体选中样式 */
|
||||||
|
.activeclass {
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
/* 凸出样式 */
|
||||||
|
.bulge {
|
||||||
|
position: absolute;
|
||||||
|
top: -30rpx;
|
||||||
|
width: 80rpx!important;
|
||||||
|
height: 80rpx!important;
|
||||||
|
border: 8rpx solid #FFFFFF;
|
||||||
|
border-radius: 100%;
|
||||||
|
vertical-align: middle;
|
||||||
|
box-shadow: 0rpx -3rpx 6rpx rgba(0,0,0,.1);
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
第一步：引入组件
|
||||||
|
|
||||||
|
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||||
|
|
||||||
|
第二步：注册组件
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
footTab
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
第三步：使用组件
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<foot-tab
|
||||||
|
current="0"
|
||||||
|
isIcon="2"
|
||||||
|
backgroundImage=""
|
||||||
|
></foot-tab>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
#参数说明
|
||||||
|
|
||||||
|
current：当前选中项，默认0表示第一项
|
||||||
|
isIcon：哪个图标突出，默认2表示从索引0开始数，第二个图标突出
|
||||||
|
backgroundImage：底部导航背景图片，默认空值
|
||||||
|
backgroundColor：背景颜色，默认#FFFFFF
|
||||||
|
isGradualChange：是否开启背景颜色渐变，默认开启
|
||||||
|
direction：渐变方向，默认right top
|
||||||
|
colorOne：第一种颜色，默认#FFFFFF
|
||||||
|
colorTwo：第二种颜色，默认#FFFFFF
|
||||||
|
colorThree：第三种颜色，默认#FFFFFF
|
||||||
|
colorFour：第四种颜色，默认#FFFFFF
|
||||||
|
boxShadowNum：阴影大小0~1之间 0表示没有阴影，默认0.1
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<template>
|
||||||
|
<view class="nothing">
|
||||||
|
<view class="nothing-box">
|
||||||
|
<image v-if="imgSrc!=''" class="nothing-img" :src="imgSrc" mode="aspectFill" lazy-load></image>
|
||||||
|
<i class="iconImg icon"
|
||||||
|
:class="['icon-nothing-more','icon-nothing-data','icon-nothing-collection'][currentType]"></i>
|
||||||
|
<view v-if="currentType!=1" class="nothing-con">{{content}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"nothing-page",
|
||||||
|
props:{
|
||||||
|
imgSrc:{ // 没有更多的图片
|
||||||
|
type:String,
|
||||||
|
default:''
|
||||||
|
},
|
||||||
|
content:{ // 没有更多的描述
|
||||||
|
type:String,
|
||||||
|
default:'暂无内容'
|
||||||
|
},
|
||||||
|
currentType:{ // 暂无更多 icon 图标
|
||||||
|
type:Number,
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.nothing{position: fixed;top: 0;bottom: 0;left: 0;right: 0;display: flex;justify-content: center;align-items: center;}
|
||||||
|
.nothing-box{display: flex;justify-content: center;flex-direction: column;align-items: center;}
|
||||||
|
.nothing-box .nothing-img{width: 470rpx;height: 270rpx;}
|
||||||
|
.iconImg {font-size: 280rpx;color: #999999;}
|
||||||
|
.nothing-con{font-size: 24rpx;font-family: PingFang SC;font-weight: 500;color: #999999;}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
<template>
|
||||||
|
<view :style="{
|
||||||
|
color: textColor,
|
||||||
|
fontSize: textFontSize,
|
||||||
|
fontWeight: `${ ifBold ? 'bold' : 0 }`,
|
||||||
|
textAlign: `${ ifCenter ? 'center' : 'left' }`,
|
||||||
|
padding: paddingStr
|
||||||
|
}">{{textStr}}</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"pitera",
|
||||||
|
props:{
|
||||||
|
// 内容
|
||||||
|
textStr: {
|
||||||
|
type:String,
|
||||||
|
default:'-- NO MORE --'
|
||||||
|
},
|
||||||
|
// 字体颜色
|
||||||
|
textColor: {
|
||||||
|
type:String,
|
||||||
|
default:'#999999'
|
||||||
|
},
|
||||||
|
// 字体大小
|
||||||
|
textFontSize: {
|
||||||
|
type: String,
|
||||||
|
default: '24rpx'
|
||||||
|
},
|
||||||
|
// 是否加粗
|
||||||
|
ifBold: {
|
||||||
|
type:Boolean,
|
||||||
|
default:false
|
||||||
|
},
|
||||||
|
// 是否居中
|
||||||
|
ifCenter: {
|
||||||
|
type:Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// 内边距的值
|
||||||
|
paddingStr: {
|
||||||
|
type:String,
|
||||||
|
default:'20rpx'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!-- 暂无更多组件参数的使用
|
||||||
|
|
||||||
|
组件一
|
||||||
|
<nothing-page
|
||||||
|
:imgSrc="图片路径可相对、可绝对、可网络"
|
||||||
|
:currentType="0,1,2,..."
|
||||||
|
:content="'-- NO MORE --'"></nothing-page>
|
||||||
|
|
||||||
|
组件二
|
||||||
|
<pitera
|
||||||
|
:textColor="'#999999'"
|
||||||
|
:textStr="'-- NO MORE --'"
|
||||||
|
:textFontSize="'24rpx'"
|
||||||
|
:ifBold="false"
|
||||||
|
:ifCenter="true"
|
||||||
|
:paddingStr="'20rpx'"></pitera>
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
第一步：引入组件
|
||||||
|
|
||||||
|
import scrollTextSlide from '@/components/scroll-views/scroll-text-slide.vue';
|
||||||
|
|
||||||
|
第二步：注册组件
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
scrollTextSlide
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
第三步：使用组件
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<scroll-text-slide></scroll-text-slide>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
参数说明
|
||||||
|
|
||||||
|
list：数据列表，默认['全部', '测试', '测试宽度', '测试宽度三号', '测试宽度四号小星星', '测试宽度五号']
|
||||||
|
activeIndex：选中索引，默认0
|
||||||
|
config：未选中、选中、下划线的样式，默认为以下对象：
|
||||||
|
{
|
||||||
|
color: '#999999',//默认时字体颜色
|
||||||
|
activeColor: '#000000',//选中时字体颜色
|
||||||
|
underLineColor: '#000000',//下滑线颜色
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,257 @@
|
||||||
|
<template>
|
||||||
|
<view class="_tab-box" :style="{fontSize: defaultConfig.fontSize + 'rpx', color: defaultConfig.color}">
|
||||||
|
<scroll-view id="_scroll" :scroll-x="true" class="scroll-view-h" scroll-with-animation :scroll-left="slider.scrollLeft">
|
||||||
|
<view class="_scroll-content">
|
||||||
|
<view class="_tab-item-box" :class="[defaultConfig.itemWidth ? '_clamp' : '_flex']">
|
||||||
|
<block v-for="(item, index) in tabList" :key="index" >
|
||||||
|
<view
|
||||||
|
class="_item"
|
||||||
|
:id="'_tab_'+index"
|
||||||
|
:class="{ '_active': tagIndex === index }"
|
||||||
|
:style="{color: tagIndex == index ? defaultConfig.activeColor : defaultConfig.color, 'width': defaultConfig.itemWidth ? defaultConfig.itemWidth + 'rpx' : ''}"
|
||||||
|
@click="tabClick(index)">{{ item[defaultConfig.key] || item }}</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<view class="_underline" :style="{
|
||||||
|
transform: 'translateX(' + slider.left + 'px)',
|
||||||
|
width: slider.width + 'px',
|
||||||
|
height: defaultConfig.underLineHeight + 'rpx',
|
||||||
|
backgroundColor: defaultConfig.underLineColor,
|
||||||
|
}" />
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'liuyuno-tabs',
|
||||||
|
props: {
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default: () => ['全部', '测试', '测试宽度', '测试宽度三号', '测试宽度四号小星星', '测试宽度五号']
|
||||||
|
},
|
||||||
|
// 选中索引
|
||||||
|
activeIndex: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
config: {
|
||||||
|
type: Object,
|
||||||
|
default:() => {
|
||||||
|
return {
|
||||||
|
color: '#999999',//默认时字体颜色
|
||||||
|
activeColor: '#000000',//选中时字体颜色
|
||||||
|
underLineColor: '#000000',//下滑线颜色
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabList: [],
|
||||||
|
tagIndex: 0,
|
||||||
|
slider: {
|
||||||
|
left: 0,
|
||||||
|
width: 0,
|
||||||
|
scrollLeft: 0
|
||||||
|
},
|
||||||
|
scorll: {},
|
||||||
|
defaultConfig: {
|
||||||
|
// 要显示的key
|
||||||
|
key: 'name',
|
||||||
|
// 字体大小 rpx
|
||||||
|
fontSize: 26,
|
||||||
|
// 字体颜色
|
||||||
|
color: '#313131',
|
||||||
|
// 激活字体颜色
|
||||||
|
activeColor: '#e54d42',
|
||||||
|
// item宽度 0为自动
|
||||||
|
itemWidth: 0,
|
||||||
|
// 下划线左右边距，文字宽度加边距 rpx
|
||||||
|
underLinePadding: 10,
|
||||||
|
// 下划线宽度 rpx 注意：设置了此值 underLinePadding 失效
|
||||||
|
underLineWidth: 0,
|
||||||
|
// 下划线高度 rpx
|
||||||
|
underLineHeight: 4,
|
||||||
|
// 下划线颜色
|
||||||
|
underLineColor: '#e54d42',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
list(value) {
|
||||||
|
this.updateData();
|
||||||
|
setTimeout(() => {
|
||||||
|
this.updateTabWidth();
|
||||||
|
}, 0);
|
||||||
|
},
|
||||||
|
config(value) {
|
||||||
|
this.updateConfig();
|
||||||
|
},
|
||||||
|
activeIndex(value) {
|
||||||
|
this.tagIndex = this.activeIndex;
|
||||||
|
this.tabToIndex(this.tagIndex);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.updateConfig();
|
||||||
|
this.tagIndex = this.activeIndex;
|
||||||
|
this.updateData();
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.calcScrollPosition();
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateData() {
|
||||||
|
let data = [];
|
||||||
|
if (typeof(this.list[0])=='string') {
|
||||||
|
this.list.forEach((item, index) => {
|
||||||
|
data.push({
|
||||||
|
name: item,
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.defaultConfig.key = 'name';
|
||||||
|
} else {
|
||||||
|
data = JSON.parse(JSON.stringify(this.list));
|
||||||
|
}
|
||||||
|
|
||||||
|
this.tabList = data;
|
||||||
|
},
|
||||||
|
updateConfig() {
|
||||||
|
this.defaultConfig = Object.assign(this.defaultConfig, this.config);
|
||||||
|
},
|
||||||
|
calcScrollPosition() {
|
||||||
|
|
||||||
|
const query = uni.createSelectorQuery().in(this);
|
||||||
|
|
||||||
|
query.select('#_scroll').boundingClientRect((res) => {
|
||||||
|
this.scorll = res;
|
||||||
|
this.updateTabWidth();
|
||||||
|
}).exec();
|
||||||
|
},
|
||||||
|
updateTabWidth(index = 0) {
|
||||||
|
let data = this.tabList;
|
||||||
|
|
||||||
|
if (data.length == 0) return false;
|
||||||
|
|
||||||
|
const query = uni.createSelectorQuery().in(this);
|
||||||
|
|
||||||
|
query.select('#_tab_' + index).boundingClientRect((res) => {
|
||||||
|
|
||||||
|
data[index]._slider = {
|
||||||
|
width: res.width,
|
||||||
|
left: res.left,
|
||||||
|
scrollLeft: res.left - (data[index - 1] ? data[index - 1]._slider.width : 0),
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.tagIndex == index) {
|
||||||
|
this.tabToIndex(this.tagIndex);
|
||||||
|
}
|
||||||
|
|
||||||
|
index++;
|
||||||
|
if (data.length > index) {
|
||||||
|
this.updateTabWidth(index);
|
||||||
|
}
|
||||||
|
}).exec();
|
||||||
|
},
|
||||||
|
|
||||||
|
tabToIndex(index) {
|
||||||
|
|
||||||
|
let _slider = this.tabList[index]._slider;
|
||||||
|
|
||||||
|
let width = uni.upx2px(this.defaultConfig.underLineWidth);
|
||||||
|
|
||||||
|
if (!width) {
|
||||||
|
if (this.defaultConfig.itemWidth) {
|
||||||
|
width = uni.upx2px(this.defaultConfig.itemWidth);
|
||||||
|
} else {
|
||||||
|
width = this.tabList[index][this.defaultConfig.key].length * uni.upx2px(this.defaultConfig.fontSize);
|
||||||
|
}
|
||||||
|
width += uni.upx2px(this.defaultConfig.underLinePadding) * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
let scorll_left = this.scorll.left || 0;
|
||||||
|
|
||||||
|
this.slider = {
|
||||||
|
left: _slider.left - scorll_left + (_slider.width - width) / 2,
|
||||||
|
width: width,
|
||||||
|
scrollLeft: _slider.scrollLeft - scorll_left,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
tabClick(index) {
|
||||||
|
this.tagIndex = index;
|
||||||
|
this.tabToIndex(index);
|
||||||
|
this.$emit('changeEv', index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
._tab-box {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
font-size: 26rpx;
|
||||||
|
position: relative;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
z-index: 10;
|
||||||
|
.scroll-view-h{
|
||||||
|
white-space:nowrap;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
._scroll-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position:relative;
|
||||||
|
|
||||||
|
._tab-item-box {
|
||||||
|
height: 100%;
|
||||||
|
&._flex {
|
||||||
|
display: flex;
|
||||||
|
._item {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&._clamp {
|
||||||
|
._item {
|
||||||
|
overflow:hidden;
|
||||||
|
text-overflow:ellipsis;
|
||||||
|
white-space:nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
._item {
|
||||||
|
height: 100%;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
color: #333;
|
||||||
|
&._active {
|
||||||
|
color: #e54d42;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
._underline {
|
||||||
|
height: 4rpx;
|
||||||
|
background-color: #e54d42;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
transition: .5s;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.uni-scroll-view::-webkit-scrollbar {
|
||||||
|
// 隐藏滚动条，但依旧具备可以滚动的功能
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
第一步：引入组件
|
||||||
|
|
||||||
|
import statusNav from '@/components/status-navs/status-nav.vue';
|
||||||
|
|
||||||
|
第二步：注册组件
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
statusNav
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
第三步：使用组件
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-nav
|
||||||
|
:ifReturn="true"
|
||||||
|
:ifTitle="true"
|
||||||
|
navBarTitle=""
|
||||||
|
:ifCenter="true"
|
||||||
|
titleColor="#000000"
|
||||||
|
returnc="#333333"
|
||||||
|
backgroudColor="#FFFFFF"
|
||||||
|
navBarHeight="40px"
|
||||||
|
clipNumber="1"
|
||||||
|
marginBottom="20rpx"
|
||||||
|
></status-nav>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
参数说明
|
||||||
|
|
||||||
|
ifTitle：是否显示标题，默认true
|
||||||
|
navBarTitle：导航栏标题，默认空值
|
||||||
|
ifCenter：标题是否居中，默认居中
|
||||||
|
titleColor：标题颜色，默认#000000
|
||||||
|
ifReturn：是否显示返回键，默认显示
|
||||||
|
returnc：返回键颜色，默认#333333
|
||||||
|
backgroudColor：状态栏、导航栏背景颜色，默认#FFFFFF
|
||||||
|
navBarHeight：导航栏高度，默认40px
|
||||||
|
clipNumber：标题最多几行显示，默认1
|
||||||
|
marginBottom：底部距离内容多高，默认20rpx
|
||||||
|
|
@ -0,0 +1,151 @@
|
||||||
|
<template>
|
||||||
|
<view class="status-box" :style="{marginBottom: marginBottom}">
|
||||||
|
<!-- 网络、电量栏 start -->
|
||||||
|
<view :style="{height: statusBarHeight+'px',background: backgroudColor}"></view>
|
||||||
|
<!-- 网络、电量栏 end -->
|
||||||
|
|
||||||
|
<!-- 头部状态栏 start -->
|
||||||
|
<view class="status-nav" :style="{background: backgroudColor,height:navBarHeight}">
|
||||||
|
<!-- 返回键 start -->
|
||||||
|
<view class="disjcac left-box" @tap="backEv" v-if="ifReturn" :style="{height: navBarHeight}" >
|
||||||
|
<slot name="leftcontent">
|
||||||
|
<i class="icon icon-return" style="font-size: 38rpx;" :style="{color: returnColor}"></i>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
<!-- 返回键 end -->
|
||||||
|
|
||||||
|
<!-- 标题 start -->
|
||||||
|
<view class=" tab-title "
|
||||||
|
:style="{
|
||||||
|
color: titleColor,
|
||||||
|
justifyContent: ifCenter ? 'center' : '',
|
||||||
|
padding: ifCenter ? '0px' : `${ifReturn ? '0 38' : '0 15'}px`}">
|
||||||
|
<view class="title-box" :class="['','clips1','clips2'][clipNumber*1]" :style="{maxWidth: ifCenter ? '360rpx' : '70%'}">
|
||||||
|
<!-- 有网络 -->
|
||||||
|
<view v-if="ifTitle && ifNet" >{{navBarTitle}}</view>
|
||||||
|
<!-- 无网络 -->
|
||||||
|
<view v-if="!ifNet">{{netText}}<text @tap="refreshEv" style="color: #3875F6;margin-left: 20rpx;">刷新</text></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 标题 end -->
|
||||||
|
|
||||||
|
<!-- 右侧图标 start -->
|
||||||
|
<view class="right-box disjcac" :style="{height: navBarHeight}">
|
||||||
|
<slot name="rightcontent"></slot>
|
||||||
|
</view>
|
||||||
|
<!-- 右侧图标 end -->
|
||||||
|
</view>
|
||||||
|
<!-- 头部状态栏 end -->
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:'status-nav',
|
||||||
|
props:{
|
||||||
|
//状态栏、导航栏背景颜色
|
||||||
|
backgroudColor:{
|
||||||
|
type:String,
|
||||||
|
default:'#FFFFFF'
|
||||||
|
},
|
||||||
|
// 默认导航栏高度
|
||||||
|
navBarHeight: {
|
||||||
|
type:String,
|
||||||
|
default:'40px'
|
||||||
|
},
|
||||||
|
//是否显示返回键
|
||||||
|
ifReturn:{
|
||||||
|
type:Boolean,
|
||||||
|
default:true
|
||||||
|
},
|
||||||
|
// 返回键颜色
|
||||||
|
returnColor: {
|
||||||
|
type:String,
|
||||||
|
default:'#000'
|
||||||
|
},
|
||||||
|
//是否显示标题
|
||||||
|
ifTitle:{
|
||||||
|
type:Boolean,
|
||||||
|
default:true
|
||||||
|
},
|
||||||
|
// 导航栏标题
|
||||||
|
navBarTitle: {
|
||||||
|
type:String,
|
||||||
|
default:''
|
||||||
|
},
|
||||||
|
// 标题最多几行显示
|
||||||
|
clipNumber: {
|
||||||
|
type:String,
|
||||||
|
default:'1'
|
||||||
|
},
|
||||||
|
//标题颜色
|
||||||
|
titleColor:{
|
||||||
|
type:String,
|
||||||
|
default:'#333333'
|
||||||
|
},
|
||||||
|
// 标题是否居中
|
||||||
|
ifCenter: {
|
||||||
|
type:Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// 底部距离内容多高
|
||||||
|
marginBottom: {
|
||||||
|
type:String,
|
||||||
|
default:'20rpx'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
||||||
|
ifNet:true ,// 是否有网络
|
||||||
|
netText:'当前无网络',
|
||||||
|
netTimer:null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// 网络监测
|
||||||
|
this.$toolAll.tools.networkStatus();
|
||||||
|
// 获取当前页面路径
|
||||||
|
this.$toolAll.tools.obtainPagePath();
|
||||||
|
setTimeout(()=>{
|
||||||
|
this.ifNet = uni.getStorageSync('isNet');
|
||||||
|
},500)
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 刷新网络事件
|
||||||
|
refreshEv(){
|
||||||
|
this.netText = '正在刷新...';
|
||||||
|
let outTime = 0;//十秒超时
|
||||||
|
this.netTimer = setInterval(()=>{
|
||||||
|
outTime++;
|
||||||
|
this.$toolAll.tools.networkStatus();
|
||||||
|
if(uni.getStorageSync('isNet')) {
|
||||||
|
clearInterval(this.netTimer);
|
||||||
|
this.ifNet = true;
|
||||||
|
}
|
||||||
|
if(outTime==10) {
|
||||||
|
clearInterval(this.netTimer);
|
||||||
|
this.netText = '刷新失败';
|
||||||
|
outTime = 0;
|
||||||
|
}
|
||||||
|
},1000)
|
||||||
|
},
|
||||||
|
//返回事件
|
||||||
|
backEv(){
|
||||||
|
uni.navigateBack({delta:1})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.disjcac{display: flex;justify-content: center;align-items: center;}
|
||||||
|
.clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||||
|
.clips2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||||
|
.status-box{position: sticky;top: 0;left: 0;right: 0;z-index: 10;}
|
||||||
|
.status-nav{width: 100%;position: relative;display: flex;align-items: center;}
|
||||||
|
.left-box {position: absolute;padding: 0 20rpx;}
|
||||||
|
.right-box {position: absolute;right: 0; padding: 0 20rpx;}
|
||||||
|
.tab-title {width: 100%;font-size: 32rpx;display: flex;font-weight: bold;}
|
||||||
|
.tab-title .title-box {margin-top: -4rpx;}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,124 @@
|
||||||
|
<template>
|
||||||
|
<!-- 选项卡列表 swiper高度自适应 -->
|
||||||
|
<view>
|
||||||
|
<view class="posi-sticky">
|
||||||
|
<scroll-text-slide @changeEv="tabTap" :activeIndex="activeIndex"></scroll-text-slide>
|
||||||
|
</view>
|
||||||
|
<swiper :style="{ height: swiperHeight + 'rpx' }" :current="swiperCurrent" @change="swiperChange">
|
||||||
|
<swiper-item style="height: 100%" v-for="(item, index) in tabs" :key="index">
|
||||||
|
<view :class="'list' + index">
|
||||||
|
<view class="item">
|
||||||
|
<!-- 列表数据 -->
|
||||||
|
<slot :listData="item.data"></slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import scrollTextSlide from '@/components/scroll-views/scroll-text-slide.vue';
|
||||||
|
export default {
|
||||||
|
name: "tabsSwiper",
|
||||||
|
components:{scrollTextSlide},
|
||||||
|
props: {
|
||||||
|
tabs: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeIndex: 0, // tabs索引
|
||||||
|
swiperCurrent: 0, // swiper索引
|
||||||
|
swiperHeight: 0, //swiper高度
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initSwiperHeight(".list0");
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 点击tabs
|
||||||
|
tabTap(index) {
|
||||||
|
this.activeIndex = index;
|
||||||
|
this.swiperCurrent = index;
|
||||||
|
let list = ".list" + index;
|
||||||
|
this.initSwiperHeight(list);
|
||||||
|
this.$emit('currentEv',index);
|
||||||
|
},
|
||||||
|
// 手势切换
|
||||||
|
swiperChange(e) {
|
||||||
|
this.activeIndex = e.detail.current;
|
||||||
|
let list = ".list" + e.detail.current;
|
||||||
|
this.initSwiperHeight(list);
|
||||||
|
this.$emit('currentEv',e.detail.current);
|
||||||
|
},
|
||||||
|
// 计算高度
|
||||||
|
initSwiperHeight(list) {
|
||||||
|
const query = uni.createSelectorQuery().in(this);
|
||||||
|
this.$nextTick(() => {
|
||||||
|
query
|
||||||
|
.select(list)
|
||||||
|
.boundingClientRect((data) => {
|
||||||
|
this.swiperHeight = Math.ceil(data.height / (uni.upx2px(data.height) / data
|
||||||
|
.height));
|
||||||
|
})
|
||||||
|
.exec();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.tabsSwiper {
|
||||||
|
padding: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.tabs-con {
|
||||||
|
color: #333;
|
||||||
|
transition: all 0.5s;
|
||||||
|
padding: 6rpx 40rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.des {
|
||||||
|
font-size: 20rpx;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
transition: all 0.5s;
|
||||||
|
box-shadow: 0 -2rpx 2rpx 2rpx #bcbec2;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 16rpx 16rpx 0 0;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
box-shadow: 0rpx 0rpx 2rpx 2rpx #bcbec2;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 16rpx;
|
||||||
|
border-radius: 0 0 16rpx 16rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 100rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,108 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="posi-sticky">
|
||||||
|
<scrollTextSlide @changeEv="tabTap" :list="tagList" :activeIndex="activeIndex"></scrollTextSlide>
|
||||||
|
</view>
|
||||||
|
<swiper :style="{height: swiperHeight-100 + 'px'}" class=" fon30" :current="activeIndex" @change="swiperChange">
|
||||||
|
<swiper-item v-for="(item,index) in list.length" :key="index">
|
||||||
|
<scroll-view scroll-y @scrolltolower="scrollBottomEv" style="height: 100%;">
|
||||||
|
<!-- 列表数据 -->
|
||||||
|
<view class="radius20 bacf6 disjb pad20 bbot" v-for="(item1,index1) in list[index]" :key="index1">
|
||||||
|
<image class="mar-y20 flexs" src="/static/del/500478055.png" mode="" style="width: 200rpx;height: 200rpx;"></image>
|
||||||
|
<view class="width100 disjb fc" style="height: 200rpx;">
|
||||||
|
<view>
|
||||||
|
<view class="clips2">{{item1.title}}{{index1}}</view>
|
||||||
|
<view class="fon24 col9 clips2">{{item1.content}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac fon28">
|
||||||
|
<view class="colf8 bold">￥{{item1.price}}</view>
|
||||||
|
<view class="col5b">销量：{{item1.xiaol}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="pad-sx40 col9 tcenter" v-if="ifloading" style="position: fixed;bottom: 0;left: 0;right: 0;z-index: 1;">加载中...</view>
|
||||||
|
</scroll-view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import scrollTextSlide from '@/components/scroll-views/scroll-text-slide.vue';
|
||||||
|
export default {
|
||||||
|
name:"swiper-tab-slide",
|
||||||
|
components:{
|
||||||
|
scrollTextSlide
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
ifloading:{
|
||||||
|
type:Boolean,
|
||||||
|
default:false
|
||||||
|
},
|
||||||
|
tagList:{
|
||||||
|
type:Array,
|
||||||
|
default:()=>{
|
||||||
|
return ['全部','男士外套','女士','孩童短裤','中年棉衣','老年']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
list:{
|
||||||
|
type:Array,
|
||||||
|
default:()=>{
|
||||||
|
return [
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeIndex:0,
|
||||||
|
swiperHeight:uni.getSystemInfoSync().windowHeight,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
tabTap(e) {
|
||||||
|
this.activeIndex = e;
|
||||||
|
},
|
||||||
|
swiperChange(e) {
|
||||||
|
this.activeIndex = e.detail.current;
|
||||||
|
},
|
||||||
|
scrollBottomEv(e) {
|
||||||
|
this.$emit('scrollBottom',this.activeIndex)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,171 @@
|
||||||
|
<template>
|
||||||
|
<view class="tabBlock" v-if="list.length > 0">
|
||||||
|
<scroll-view scroll-x="true" scroll-with-animation :scroll-left="tabsScrollLeft" @scroll="scroll">
|
||||||
|
<view class="tab" id="tab_list">
|
||||||
|
<!-- 循环体 -->
|
||||||
|
<view v-for="(item, index) in list" :key="index"
|
||||||
|
:class="['tab__item', {'tab__item--active': currentIndex === index}]"
|
||||||
|
:style="{color: (currentIndex === index ? `${itemColor}`: '')}" id="tab_item"
|
||||||
|
@click="select(item, index)">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<view v-if="!showTitleSlot">{{item.title}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 下划线 -->
|
||||||
|
<view class="tab__line"
|
||||||
|
:style="{background: lineColor, width: lineStyle.width, transform: lineStyle.transform,transitionDuration: lineStyle.transitionDuration}">
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
value: [Number, String],
|
||||||
|
list: { // 传值
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [
|
||||||
|
{title:'标题一'},
|
||||||
|
{title:'标题二'},
|
||||||
|
{title:'标题三'},
|
||||||
|
{title:'标题四'},
|
||||||
|
{title:'标题五'},
|
||||||
|
{title:'标题六'},
|
||||||
|
{title:'标题七'},
|
||||||
|
{title:'标题八'},
|
||||||
|
{title:'标题九'},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemColor: String, // tab内容颜色
|
||||||
|
lineColor: String, // 下划线颜色
|
||||||
|
lineAnimated: { // 是否展示下划线动画
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentIndex: 0,
|
||||||
|
lineStyle: {},
|
||||||
|
scrollLeft: 0,
|
||||||
|
tabsScrollLeft: 0,
|
||||||
|
duration: 0.3
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
showTitleSlot() {
|
||||||
|
return this.$scopedSlots.title
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
list() {
|
||||||
|
this.setTabList()
|
||||||
|
},
|
||||||
|
value() {
|
||||||
|
this.currentIndex = this.value
|
||||||
|
this.setTabList()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.currentIndex = this.value
|
||||||
|
this.setTabList()
|
||||||
|
if (!this.lineAnimated) {
|
||||||
|
this.duration = 0
|
||||||
|
}
|
||||||
|
console.log(this.$scopedSlots)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
select(item, index) {
|
||||||
|
this.$emit('changeEv', index)
|
||||||
|
},
|
||||||
|
setTabList() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (this.list.length > 0) {
|
||||||
|
this.setLine()
|
||||||
|
this.scrollIntoView()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
setLine() {
|
||||||
|
let lineWidth = 0,
|
||||||
|
lineLeft = 0
|
||||||
|
this.getElementData(`#tab_item`, (data) => {
|
||||||
|
let el = data[this.currentIndex]
|
||||||
|
this.$emit('tabheight',el.height)
|
||||||
|
lineWidth = el.width / 2
|
||||||
|
// lineLeft = el.width * (this.currentIndex + 0.5) // 此种只能针对每个item长度一致的
|
||||||
|
lineLeft = el.width / 2 + (-data[0].left) + el.left
|
||||||
|
this.lineStyle = {
|
||||||
|
width: `${lineWidth}px`,
|
||||||
|
transform: `translateX(${lineLeft}px) translateX(-50%)`,
|
||||||
|
transitionDuration: `${this.duration}s`
|
||||||
|
};
|
||||||
|
})
|
||||||
|
},
|
||||||
|
scrollIntoView() { // item滚动
|
||||||
|
let lineLeft = 0;
|
||||||
|
this.getElementData('#tab_list', (data) => {
|
||||||
|
let list = data[0]
|
||||||
|
this.getElementData(`#tab_item`, (data) => {
|
||||||
|
let el = data[this.currentIndex]
|
||||||
|
// lineLeft = el.width * (this.currentIndex + 0.5) - list.width / 2 - this.scrollLeft
|
||||||
|
lineLeft = el.width / 2 + (-list.left) + el.left - list.width / 2 - this.scrollLeft
|
||||||
|
this.tabsScrollLeft = this.scrollLeft + lineLeft
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getElementData(el, callback) {
|
||||||
|
uni.createSelectorQuery().in(this).selectAll(el).boundingClientRect().exec((data) => {
|
||||||
|
callback(data[0]);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
scroll(e) {
|
||||||
|
this.scrollLeft = e.detail.scrollLeft;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.tabBlock {
|
||||||
|
position: relative;
|
||||||
|
background: #fff;
|
||||||
|
.tab {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
font-size: 28rpx;
|
||||||
|
padding-bottom: 15rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
&__item {
|
||||||
|
// flex: 1;
|
||||||
|
// width: 20%;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 90rpx;
|
||||||
|
color: #868695;
|
||||||
|
&--active {
|
||||||
|
color: $uni-color-primary;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
&-title {
|
||||||
|
margin: 0 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tab__line {
|
||||||
|
display: block;
|
||||||
|
height: 6rpx;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20rpx;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
position: relative;
|
||||||
|
background: $uni-color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
第一步：引入组件
|
||||||
|
|
||||||
|
import swiperPu from '@/components/swipers/swiper-pu.vue';
|
||||||
|
|
||||||
|
第二步：注册组件
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
'custom-swiper':swiperPu
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
第三步：使用组件
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<custom-swiper></custom-swiper>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
参数说明
|
||||||
|
|
||||||
|
isplay：是否自动轮播，默认不轮播
|
||||||
|
isDot：是否显示指示点，默认显示
|
||||||
|
bannerList：默认轮播图片，默认值为以下数组：
|
||||||
|
[
|
||||||
|
{imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:''},
|
||||||
|
{imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:''},
|
||||||
|
{imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:''},
|
||||||
|
]
|
||||||
|
newHeight：swiper的高，默认200px
|
||||||
|
newBottom：指示点距离底部位置，默认18px
|
||||||
|
newRadius：图片圆角，默认0px
|
||||||
|
browseP：是否可预览，默认不能预览
|
||||||
|
|
@ -0,0 +1,132 @@
|
||||||
|
<template>
|
||||||
|
<view class="banner-box">
|
||||||
|
<swiper :current="bcurrent" @change="changeBanner" :style="{height: newHeight}" :autoplay="isplay" :circular="true" :interval="3000" :duration="500">
|
||||||
|
<swiper-item v-for="(item,index) in bannerList" :key="index">
|
||||||
|
<view @tap="chooseImg(index,item.url)" class="img-box">
|
||||||
|
<image :style="{borderRadius:newRadius,height:newHeight}" class="img animated fadeIn" :src="item.imgSrc" mode="aspectFill"></image>
|
||||||
|
<image @tap.stop="playVideo(index)" v-if="item.isVideo && isVedio" class="posia animated bounceIn" style="width: 126rpx;height: 126rpx;z-index: 1;" src="/static/public/video.png" mode=""></image>
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
<!-- 指示点 -->
|
||||||
|
<view v-if="isDot" class="dot-box" :style="{bottom:newBottom}">
|
||||||
|
<view :class="bcurrent==indexd ? 'dotActive' : 'dotMo'"
|
||||||
|
v-for="(itemd,indexd) in bannerList.length" :key="indexd"
|
||||||
|
@tap="chooseDot(indexd)"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"swiper-pu",
|
||||||
|
props:{
|
||||||
|
isplay:{
|
||||||
|
type:Boolean,
|
||||||
|
default:false
|
||||||
|
},
|
||||||
|
isDot:{//是否显示指示点
|
||||||
|
type:Boolean,
|
||||||
|
default:true
|
||||||
|
},
|
||||||
|
bannerList:{//默认轮播图片
|
||||||
|
type:Array,
|
||||||
|
default:function(){
|
||||||
|
return [
|
||||||
|
{imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:''},
|
||||||
|
{imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:''},
|
||||||
|
{imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:''},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
newHeight:{//swiper的高
|
||||||
|
type:String,
|
||||||
|
default:'200px'
|
||||||
|
},
|
||||||
|
newBottom:{//指示点距离底部位置
|
||||||
|
type:String,
|
||||||
|
default:'18px'
|
||||||
|
},
|
||||||
|
newRadius:{//图片圆角
|
||||||
|
type:String,
|
||||||
|
default:'0px'
|
||||||
|
},
|
||||||
|
browseP:{//是否可预览
|
||||||
|
type:Boolean,
|
||||||
|
default:false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
bcurrent: 0, // 默认当前选中项
|
||||||
|
isShowVideo:false, // 是否显示视频
|
||||||
|
autoplay:false, // 是否开启自动轮播
|
||||||
|
isVedio:uni.getStorageSync('is_vedio') // 是否是视频
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 图片点击事件
|
||||||
|
chooseImg(index,url){
|
||||||
|
// console.log('当前banner图',index);
|
||||||
|
this.bcurrent = index
|
||||||
|
if(this.browseP){
|
||||||
|
let imgList = []
|
||||||
|
this.bannerList.forEach(item=>{
|
||||||
|
let nurl = ''
|
||||||
|
let obj = {}
|
||||||
|
if(this.isVedio) {
|
||||||
|
item.url=='' ? nurl = item.imgSrc : nurl = item.url
|
||||||
|
obj = {
|
||||||
|
url:nurl,
|
||||||
|
type:item.isVideo?'video':'image',
|
||||||
|
poster:item.poster
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
nurl = item.imgSrc
|
||||||
|
obj = {
|
||||||
|
url:nurl,
|
||||||
|
type:'image',
|
||||||
|
poster:item.poster
|
||||||
|
}
|
||||||
|
}
|
||||||
|
imgList.push(obj)
|
||||||
|
})
|
||||||
|
// 预览图片和视频
|
||||||
|
uni.previewMedia({
|
||||||
|
current:this.bcurrent,
|
||||||
|
sources:imgList
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// 有链接，跳转链接
|
||||||
|
uni.navigateTo({
|
||||||
|
url:`/${url}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 切换后获取当前索引
|
||||||
|
changeBanner(e){
|
||||||
|
this.bcurrent = e.detail.current//当前的指示点下标
|
||||||
|
// console.log(this.bcurrent);
|
||||||
|
},
|
||||||
|
// 点击当前指示点
|
||||||
|
chooseDot(index){
|
||||||
|
this.bcurrent = index;
|
||||||
|
},
|
||||||
|
playVideo(index){
|
||||||
|
// console.log('播放视频');
|
||||||
|
uni.navigateTo({
|
||||||
|
url:`/pagesB/video/playVideo?src=${this.bannerList[index].url}&posterSrc=${this.bannerList[index].poster}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.banner-box{position: relative;}
|
||||||
|
.img-box{position: relative;display: flex;justify-content: center;align-items: center;}
|
||||||
|
.img{width:100%;vertical-align: bottom;}
|
||||||
|
.dot-box{position: absolute;bottom: 36rpx;display: flex;justify-content: center;width: 100%;}
|
||||||
|
.dotActive{width: 20rpx;height: 20rpx;margin-right: 10rpx;border-radius: 20rpx; background-color: rgba(255, 255, 255, 1);}
|
||||||
|
.dotMo{width: 20rpx;height: 20rpx;margin-right: 10rpx;border-radius: 100%;background-color: rgba(191, 191, 191, 0.8);}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
const arrTool = {
|
||||||
|
/**
|
||||||
|
* @description 一维数组变二维数组
|
||||||
|
* @param {Array} arr
|
||||||
|
* @param {Number} size
|
||||||
|
*/
|
||||||
|
oneArrToTwo(arr, size) {
|
||||||
|
var arrTwo = []
|
||||||
|
for (var i = 0; i < arr.length; i = i + size) {
|
||||||
|
arrTwo.push(arr.slice(i, i + size))
|
||||||
|
}
|
||||||
|
return arrTwo // 新的二维数组
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default arrTool;
|
||||||
|
|
@ -0,0 +1,201 @@
|
||||||
|
function getLocalFilePath(path) {
|
||||||
|
if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf(
|
||||||
|
'_downloads') === 0) {
|
||||||
|
return path
|
||||||
|
}
|
||||||
|
if (path.indexOf('file://') === 0) {
|
||||||
|
return path
|
||||||
|
}
|
||||||
|
if (path.indexOf('/storage/emulated/0/') === 0) {
|
||||||
|
return path
|
||||||
|
}
|
||||||
|
if (path.indexOf('/') === 0) {
|
||||||
|
var localFilePath = plus.io.convertAbsoluteFileSystem(path)
|
||||||
|
if (localFilePath !== path) {
|
||||||
|
return localFilePath
|
||||||
|
} else {
|
||||||
|
path = path.substr(1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return '_www/' + path
|
||||||
|
}
|
||||||
|
|
||||||
|
function dataUrlToBase64(str) {
|
||||||
|
var array = str.split(',')
|
||||||
|
return array[array.length - 1]
|
||||||
|
}
|
||||||
|
|
||||||
|
var index = 0
|
||||||
|
|
||||||
|
function getNewFileId() {
|
||||||
|
return Date.now() + String(index++)
|
||||||
|
}
|
||||||
|
|
||||||
|
function biggerThan(v1, v2) {
|
||||||
|
var v1Array = v1.split('.')
|
||||||
|
var v2Array = v2.split('.')
|
||||||
|
var update = false
|
||||||
|
for (var index = 0; index < v2Array.length; index++) {
|
||||||
|
var diff = v1Array[index] - v2Array[index]
|
||||||
|
if (diff !== 0) {
|
||||||
|
update = diff > 0
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return update
|
||||||
|
}
|
||||||
|
// 图片路径转base64
|
||||||
|
export function pathToBase64(path) {
|
||||||
|
return new Promise(function(resolve, reject) {
|
||||||
|
if (typeof window === 'object' && 'document' in window) {
|
||||||
|
if (typeof FileReader === 'function') {
|
||||||
|
var xhr = new XMLHttpRequest()
|
||||||
|
xhr.open('GET', path, true)
|
||||||
|
xhr.responseType = 'blob'
|
||||||
|
xhr.onload = function() {
|
||||||
|
if (this.status === 200) {
|
||||||
|
let fileReader = new FileReader()
|
||||||
|
fileReader.onload = function(e) {
|
||||||
|
resolve(e.target.result)
|
||||||
|
}
|
||||||
|
fileReader.onerror = reject
|
||||||
|
fileReader.readAsDataURL(this.response)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
xhr.onerror = reject
|
||||||
|
xhr.send()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
var canvas = document.createElement('canvas')
|
||||||
|
var c2x = canvas.getContext('2d')
|
||||||
|
var img = new Image
|
||||||
|
img.onload = function() {
|
||||||
|
canvas.width = img.width
|
||||||
|
canvas.height = img.height
|
||||||
|
c2x.drawImage(img, 0, 0)
|
||||||
|
resolve(canvas.toDataURL())
|
||||||
|
canvas.height = canvas.width = 0
|
||||||
|
}
|
||||||
|
img.onerror = reject
|
||||||
|
img.src = path
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (typeof plus === 'object') {
|
||||||
|
plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), function(entry) {
|
||||||
|
entry.file(function(file) {
|
||||||
|
var fileReader = new plus.io.FileReader()
|
||||||
|
fileReader.onload = function(data) {
|
||||||
|
resolve(data.target.result)
|
||||||
|
}
|
||||||
|
fileReader.onerror = function(error) {
|
||||||
|
reject(error)
|
||||||
|
}
|
||||||
|
fileReader.readAsDataURL(file)
|
||||||
|
}, function(error) {
|
||||||
|
reject(error)
|
||||||
|
})
|
||||||
|
}, function(error) {
|
||||||
|
reject(error)
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
|
||||||
|
wx.getFileSystemManager().readFile({
|
||||||
|
filePath: path,
|
||||||
|
encoding: 'base64',
|
||||||
|
success: function(res) {
|
||||||
|
resolve('data:image/png;base64,' + res.data)
|
||||||
|
},
|
||||||
|
fail: function(error) {
|
||||||
|
reject(error)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
reject(new Error('not support'))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// base64转图片路径
|
||||||
|
export function base64ToPath(base64) {
|
||||||
|
return new Promise(function(resolve, reject) {
|
||||||
|
if (typeof window === 'object' && 'document' in window) {
|
||||||
|
base64 = base64.split(',')
|
||||||
|
var type = base64[0].match(/:(.*?);/)[1]
|
||||||
|
var str = atob(base64[1])
|
||||||
|
var n = str.length
|
||||||
|
var array = new Uint8Array(n)
|
||||||
|
while (n--) {
|
||||||
|
array[n] = str.charCodeAt(n)
|
||||||
|
}
|
||||||
|
return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([array], {
|
||||||
|
type: type
|
||||||
|
})))
|
||||||
|
}
|
||||||
|
var extName = base64.split(',')[0].match(/data\:\S+\/(\S+);/)
|
||||||
|
if (extName) {
|
||||||
|
extName = extName[1]
|
||||||
|
} else {
|
||||||
|
reject(new Error('base64 error'))
|
||||||
|
}
|
||||||
|
var fileName = getNewFileId() + '.' + extName
|
||||||
|
if (typeof plus === 'object') {
|
||||||
|
var basePath = '_doc'
|
||||||
|
var dirPath = 'uniapp_temp'
|
||||||
|
var filePath = basePath + '/' + dirPath + '/' + fileName
|
||||||
|
if (!biggerThan(plus.os.name === 'Android' ? '1.9.9.80627' : '1.9.9.80472', plus.runtime
|
||||||
|
.innerVersion)) {
|
||||||
|
plus.io.resolveLocalFileSystemURL(basePath, function(entry) {
|
||||||
|
entry.getDirectory(dirPath, {
|
||||||
|
create: true,
|
||||||
|
exclusive: false,
|
||||||
|
}, function(entry) {
|
||||||
|
entry.getFile(fileName, {
|
||||||
|
create: true,
|
||||||
|
exclusive: false,
|
||||||
|
}, function(entry) {
|
||||||
|
entry.createWriter(function(writer) {
|
||||||
|
writer.onwrite = function() {
|
||||||
|
resolve(filePath)
|
||||||
|
}
|
||||||
|
writer.onerror = reject
|
||||||
|
writer.seek(0)
|
||||||
|
writer.writeAsBinary(dataUrlToBase64(base64))
|
||||||
|
}, reject)
|
||||||
|
}, reject)
|
||||||
|
}, reject)
|
||||||
|
}, reject)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
var bitmap = new plus.nativeObj.Bitmap(fileName)
|
||||||
|
bitmap.loadBase64Data(base64, function() {
|
||||||
|
bitmap.save(filePath, {}, function() {
|
||||||
|
bitmap.clear()
|
||||||
|
resolve(filePath)
|
||||||
|
}, function(error) {
|
||||||
|
bitmap.clear()
|
||||||
|
reject(error)
|
||||||
|
})
|
||||||
|
}, function(error) {
|
||||||
|
bitmap.clear()
|
||||||
|
reject(error)
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
|
||||||
|
var filePath = wx.env.USER_DATA_PATH + '/' + fileName
|
||||||
|
wx.getFileSystemManager().writeFile({
|
||||||
|
filePath: filePath,
|
||||||
|
data: dataUrlToBase64(base64),
|
||||||
|
encoding: 'base64',
|
||||||
|
success: function() {
|
||||||
|
resolve(filePath)
|
||||||
|
},
|
||||||
|
fail: function(error) {
|
||||||
|
reject(error)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
reject(new Error('not support'))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,891 @@
|
||||||
|
var ERROR_CONF = {
|
||||||
|
KEY_ERR: 311,
|
||||||
|
KEY_ERR_MSG: 'key格式错误',
|
||||||
|
PARAM_ERR: 310,
|
||||||
|
PARAM_ERR_MSG: '请求参数信息有误',
|
||||||
|
SYSTEM_ERR: 600,
|
||||||
|
SYSTEM_ERR_MSG: '系统错误',
|
||||||
|
WX_ERR_CODE: 1000,
|
||||||
|
WX_OK_CODE: 200
|
||||||
|
};
|
||||||
|
var BASE_URL = 'https://apis.map.qq.com/ws/';
|
||||||
|
var URL_SEARCH = BASE_URL + 'place/v1/search';
|
||||||
|
var URL_SUGGESTION = BASE_URL + 'place/v1/suggestion';
|
||||||
|
var URL_GET_GEOCODER = BASE_URL + 'geocoder/v1/';
|
||||||
|
var URL_CITY_LIST = BASE_URL + 'district/v1/list';
|
||||||
|
var URL_AREA_LIST = BASE_URL + 'district/v1/getchildren';
|
||||||
|
var URL_DISTANCE = BASE_URL + 'distance/v1/';
|
||||||
|
var URL_DIRECTION = BASE_URL + 'direction/v1/';
|
||||||
|
var MODE = {
|
||||||
|
driving: 'driving',
|
||||||
|
transit: 'transit'
|
||||||
|
};
|
||||||
|
var EARTH_RADIUS = 6378136.49;
|
||||||
|
var Utils = {
|
||||||
|
safeAdd(x, y) {
|
||||||
|
var lsw = (x & 0xffff) + (y & 0xffff);
|
||||||
|
var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
|
||||||
|
return (msw << 16) | (lsw & 0xffff)
|
||||||
|
},
|
||||||
|
bitRotateLeft(num, cnt) {
|
||||||
|
return (num << cnt) | (num >>> (32 - cnt))
|
||||||
|
},
|
||||||
|
md5cmn(q, a, b, x, s, t) {
|
||||||
|
return this.safeAdd(this.bitRotateLeft(this.safeAdd(this.safeAdd(a, q), this.safeAdd(x, t)), s), b)
|
||||||
|
},
|
||||||
|
md5ff(a, b, c, d, x, s, t) {
|
||||||
|
return this.md5cmn((b & c) | (~b & d), a, b, x, s, t)
|
||||||
|
},
|
||||||
|
md5gg(a, b, c, d, x, s, t) {
|
||||||
|
return this.md5cmn((b & d) | (c & ~d), a, b, x, s, t)
|
||||||
|
},
|
||||||
|
md5hh(a, b, c, d, x, s, t) {
|
||||||
|
return this.md5cmn(b ^ c ^ d, a, b, x, s, t)
|
||||||
|
},
|
||||||
|
md5ii(a, b, c, d, x, s, t) {
|
||||||
|
return this.md5cmn(c ^ (b | ~d), a, b, x, s, t)
|
||||||
|
},
|
||||||
|
binlMD5(x, len) {
|
||||||
|
x[len >> 5] |= 0x80 << (len % 32);
|
||||||
|
x[((len + 64) >>> 9 << 4) + 14] = len;
|
||||||
|
var i;
|
||||||
|
var olda;
|
||||||
|
var oldb;
|
||||||
|
var oldc;
|
||||||
|
var oldd;
|
||||||
|
var a = 1732584193;
|
||||||
|
var b = -271733879;
|
||||||
|
var c = -1732584194;
|
||||||
|
var d = 271733878;
|
||||||
|
for (i = 0; i < x.length; i += 16) {
|
||||||
|
olda = a;
|
||||||
|
oldb = b;
|
||||||
|
oldc = c;
|
||||||
|
oldd = d;
|
||||||
|
a = this.md5ff(a, b, c, d, x[i], 7, -680876936);
|
||||||
|
d = this.md5ff(d, a, b, c, x[i + 1], 12, -389564586);
|
||||||
|
c = this.md5ff(c, d, a, b, x[i + 2], 17, 606105819);
|
||||||
|
b = this.md5ff(b, c, d, a, x[i + 3], 22, -1044525330);
|
||||||
|
a = this.md5ff(a, b, c, d, x[i + 4], 7, -176418897);
|
||||||
|
d = this.md5ff(d, a, b, c, x[i + 5], 12, 1200080426);
|
||||||
|
c = this.md5ff(c, d, a, b, x[i + 6], 17, -1473231341);
|
||||||
|
b = this.md5ff(b, c, d, a, x[i + 7], 22, -45705983);
|
||||||
|
a = this.md5ff(a, b, c, d, x[i + 8], 7, 1770035416);
|
||||||
|
d = this.md5ff(d, a, b, c, x[i + 9], 12, -1958414417);
|
||||||
|
c = this.md5ff(c, d, a, b, x[i + 10], 17, -42063);
|
||||||
|
b = this.md5ff(b, c, d, a, x[i + 11], 22, -1990404162);
|
||||||
|
a = this.md5ff(a, b, c, d, x[i + 12], 7, 1804603682);
|
||||||
|
d = this.md5ff(d, a, b, c, x[i + 13], 12, -40341101);
|
||||||
|
c = this.md5ff(c, d, a, b, x[i + 14], 17, -1502002290);
|
||||||
|
b = this.md5ff(b, c, d, a, x[i + 15], 22, 1236535329);
|
||||||
|
a = this.md5gg(a, b, c, d, x[i + 1], 5, -165796510);
|
||||||
|
d = this.md5gg(d, a, b, c, x[i + 6], 9, -1069501632);
|
||||||
|
c = this.md5gg(c, d, a, b, x[i + 11], 14, 643717713);
|
||||||
|
b = this.md5gg(b, c, d, a, x[i], 20, -373897302);
|
||||||
|
a = this.md5gg(a, b, c, d, x[i + 5], 5, -701558691);
|
||||||
|
d = this.md5gg(d, a, b, c, x[i + 10], 9, 38016083);
|
||||||
|
c = this.md5gg(c, d, a, b, x[i + 15], 14, -660478335);
|
||||||
|
b = this.md5gg(b, c, d, a, x[i + 4], 20, -405537848);
|
||||||
|
a = this.md5gg(a, b, c, d, x[i + 9], 5, 568446438);
|
||||||
|
d = this.md5gg(d, a, b, c, x[i + 14], 9, -1019803690);
|
||||||
|
c = this.md5gg(c, d, a, b, x[i + 3], 14, -187363961);
|
||||||
|
b = this.md5gg(b, c, d, a, x[i + 8], 20, 1163531501);
|
||||||
|
a = this.md5gg(a, b, c, d, x[i + 13], 5, -1444681467);
|
||||||
|
d = this.md5gg(d, a, b, c, x[i + 2], 9, -51403784);
|
||||||
|
c = this.md5gg(c, d, a, b, x[i + 7], 14, 1735328473);
|
||||||
|
b = this.md5gg(b, c, d, a, x[i + 12], 20, -1926607734);
|
||||||
|
a = this.md5hh(a, b, c, d, x[i + 5], 4, -378558);
|
||||||
|
d = this.md5hh(d, a, b, c, x[i + 8], 11, -2022574463);
|
||||||
|
c = this.md5hh(c, d, a, b, x[i + 11], 16, 1839030562);
|
||||||
|
b = this.md5hh(b, c, d, a, x[i + 14], 23, -35309556);
|
||||||
|
a = this.md5hh(a, b, c, d, x[i + 1], 4, -1530992060);
|
||||||
|
d = this.md5hh(d, a, b, c, x[i + 4], 11, 1272893353);
|
||||||
|
c = this.md5hh(c, d, a, b, x[i + 7], 16, -155497632);
|
||||||
|
b = this.md5hh(b, c, d, a, x[i + 10], 23, -1094730640);
|
||||||
|
a = this.md5hh(a, b, c, d, x[i + 13], 4, 681279174);
|
||||||
|
d = this.md5hh(d, a, b, c, x[i], 11, -358537222);
|
||||||
|
c = this.md5hh(c, d, a, b, x[i + 3], 16, -722521979);
|
||||||
|
b = this.md5hh(b, c, d, a, x[i + 6], 23, 76029189);
|
||||||
|
a = this.md5hh(a, b, c, d, x[i + 9], 4, -640364487);
|
||||||
|
d = this.md5hh(d, a, b, c, x[i + 12], 11, -421815835);
|
||||||
|
c = this.md5hh(c, d, a, b, x[i + 15], 16, 530742520);
|
||||||
|
b = this.md5hh(b, c, d, a, x[i + 2], 23, -995338651);
|
||||||
|
a = this.md5ii(a, b, c, d, x[i], 6, -198630844);
|
||||||
|
d = this.md5ii(d, a, b, c, x[i + 7], 10, 1126891415);
|
||||||
|
c = this.md5ii(c, d, a, b, x[i + 14], 15, -1416354905);
|
||||||
|
b = this.md5ii(b, c, d, a, x[i + 5], 21, -57434055);
|
||||||
|
a = this.md5ii(a, b, c, d, x[i + 12], 6, 1700485571);
|
||||||
|
d = this.md5ii(d, a, b, c, x[i + 3], 10, -1894986606);
|
||||||
|
c = this.md5ii(c, d, a, b, x[i + 10], 15, -1051523);
|
||||||
|
b = this.md5ii(b, c, d, a, x[i + 1], 21, -2054922799);
|
||||||
|
a = this.md5ii(a, b, c, d, x[i + 8], 6, 1873313359);
|
||||||
|
d = this.md5ii(d, a, b, c, x[i + 15], 10, -30611744);
|
||||||
|
c = this.md5ii(c, d, a, b, x[i + 6], 15, -1560198380);
|
||||||
|
b = this.md5ii(b, c, d, a, x[i + 13], 21, 1309151649);
|
||||||
|
a = this.md5ii(a, b, c, d, x[i + 4], 6, -145523070);
|
||||||
|
d = this.md5ii(d, a, b, c, x[i + 11], 10, -1120210379);
|
||||||
|
c = this.md5ii(c, d, a, b, x[i + 2], 15, 718787259);
|
||||||
|
b = this.md5ii(b, c, d, a, x[i + 9], 21, -343485551);
|
||||||
|
a = this.safeAdd(a, olda);
|
||||||
|
b = this.safeAdd(b, oldb);
|
||||||
|
c = this.safeAdd(c, oldc);
|
||||||
|
d = this.safeAdd(d, oldd)
|
||||||
|
}
|
||||||
|
return [a, b, c, d]
|
||||||
|
},
|
||||||
|
binl2rstr(input) {
|
||||||
|
var i;
|
||||||
|
var output = '';
|
||||||
|
var length32 = input.length * 32;
|
||||||
|
for (i = 0; i < length32; i += 8) {
|
||||||
|
output += String.fromCharCode((input[i >> 5] >>> (i % 32)) & 0xff)
|
||||||
|
}
|
||||||
|
return output
|
||||||
|
},
|
||||||
|
rstr2binl(input) {
|
||||||
|
var i;
|
||||||
|
var output = [];
|
||||||
|
output[(input.length >> 2) - 1] = undefined;
|
||||||
|
for (i = 0; i < output.length; i += 1) {
|
||||||
|
output[i] = 0
|
||||||
|
}
|
||||||
|
var length8 = input.length * 8;
|
||||||
|
for (i = 0; i < length8; i += 8) {
|
||||||
|
output[i >> 5] |= (input.charCodeAt(i / 8) & 0xff) << (i % 32)
|
||||||
|
}
|
||||||
|
return output
|
||||||
|
},
|
||||||
|
rstrMD5(s) {
|
||||||
|
return this.binl2rstr(this.binlMD5(this.rstr2binl(s), s.length * 8))
|
||||||
|
},
|
||||||
|
rstrHMACMD5(key, data) {
|
||||||
|
var i;
|
||||||
|
var bkey = this.rstr2binl(key);
|
||||||
|
var ipad = [];
|
||||||
|
var opad = [];
|
||||||
|
var hash;
|
||||||
|
ipad[15] = opad[15] = undefined;
|
||||||
|
if (bkey.length > 16) {
|
||||||
|
bkey = this.binlMD5(bkey, key.length * 8)
|
||||||
|
}
|
||||||
|
for (i = 0; i < 16; i += 1) {
|
||||||
|
ipad[i] = bkey[i] ^ 0x36363636;
|
||||||
|
opad[i] = bkey[i] ^ 0x5c5c5c5c
|
||||||
|
}
|
||||||
|
hash = this.binlMD5(ipad.concat(this.rstr2binl(data)), 512 + data.length * 8);
|
||||||
|
return this.binl2rstr(this.binlMD5(opad.concat(hash), 512 + 128))
|
||||||
|
},
|
||||||
|
rstr2hex(input) {
|
||||||
|
var hexTab = '0123456789abcdef';
|
||||||
|
var output = '';
|
||||||
|
var x;
|
||||||
|
var i;
|
||||||
|
for (i = 0; i < input.length; i += 1) {
|
||||||
|
x = input.charCodeAt(i);
|
||||||
|
output += hexTab.charAt((x >>> 4) & 0x0f) + hexTab.charAt(x & 0x0f)
|
||||||
|
}
|
||||||
|
return output
|
||||||
|
},
|
||||||
|
str2rstrUTF8(input) {
|
||||||
|
return unescape(encodeURIComponent(input))
|
||||||
|
},
|
||||||
|
rawMD5(s) {
|
||||||
|
return this.rstrMD5(this.str2rstrUTF8(s))
|
||||||
|
},
|
||||||
|
hexMD5(s) {
|
||||||
|
return this.rstr2hex(this.rawMD5(s))
|
||||||
|
},
|
||||||
|
rawHMACMD5(k, d) {
|
||||||
|
return this.rstrHMACMD5(this.str2rstrUTF8(k), str2rstrUTF8(d))
|
||||||
|
},
|
||||||
|
hexHMACMD5(k, d) {
|
||||||
|
return this.rstr2hex(this.rawHMACMD5(k, d))
|
||||||
|
},
|
||||||
|
md5(string, key, raw) {
|
||||||
|
if (!key) {
|
||||||
|
if (!raw) {
|
||||||
|
return this.hexMD5(string)
|
||||||
|
}
|
||||||
|
return this.rawMD5(string)
|
||||||
|
}
|
||||||
|
if (!raw) {
|
||||||
|
return this.hexHMACMD5(key, string)
|
||||||
|
}
|
||||||
|
return this.rawHMACMD5(key, string)
|
||||||
|
},
|
||||||
|
getSig(requestParam, sk, feature, mode) {
|
||||||
|
var sig = null;
|
||||||
|
var requestArr = [];
|
||||||
|
Object.keys(requestParam).sort().forEach(function(key) {
|
||||||
|
requestArr.push(key + '=' + requestParam[key])
|
||||||
|
});
|
||||||
|
if (feature == 'search') {
|
||||||
|
sig = '/ws/place/v1/search?' + requestArr.join('&') + sk
|
||||||
|
}
|
||||||
|
if (feature == 'suggest') {
|
||||||
|
sig = '/ws/place/v1/suggestion?' + requestArr.join('&') + sk
|
||||||
|
}
|
||||||
|
if (feature == 'reverseGeocoder') {
|
||||||
|
sig = '/ws/geocoder/v1/?' + requestArr.join('&') + sk
|
||||||
|
}
|
||||||
|
if (feature == 'geocoder') {
|
||||||
|
sig = '/ws/geocoder/v1/?' + requestArr.join('&') + sk
|
||||||
|
}
|
||||||
|
if (feature == 'getCityList') {
|
||||||
|
sig = '/ws/district/v1/list?' + requestArr.join('&') + sk
|
||||||
|
}
|
||||||
|
if (feature == 'getDistrictByCityId') {
|
||||||
|
sig = '/ws/district/v1/getchildren?' + requestArr.join('&') + sk
|
||||||
|
}
|
||||||
|
if (feature == 'calculateDistance') {
|
||||||
|
sig = '/ws/distance/v1/?' + requestArr.join('&') + sk
|
||||||
|
}
|
||||||
|
if (feature == 'direction') {
|
||||||
|
sig = '/ws/direction/v1/' + mode + '?' + requestArr.join('&') + sk
|
||||||
|
}
|
||||||
|
sig = this.md5(sig);
|
||||||
|
return sig
|
||||||
|
},
|
||||||
|
location2query(data) {
|
||||||
|
if (typeof data == 'string') {
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
var query = '';
|
||||||
|
for (var i = 0; i < data.length; i++) {
|
||||||
|
var d = data[i];
|
||||||
|
if (!!query) {
|
||||||
|
query += ';'
|
||||||
|
}
|
||||||
|
if (d.location) {
|
||||||
|
query = query + d.location.lat + ',' + d.location.lng
|
||||||
|
}
|
||||||
|
if (d.latitude && d.longitude) {
|
||||||
|
query = query + d.latitude + ',' + d.longitude
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return query
|
||||||
|
},
|
||||||
|
rad(d) {
|
||||||
|
return d * Math.PI / 180.0
|
||||||
|
},
|
||||||
|
getEndLocation(location) {
|
||||||
|
var to = location.split(';');
|
||||||
|
var endLocation = [];
|
||||||
|
for (var i = 0; i < to.length; i++) {
|
||||||
|
endLocation.push({
|
||||||
|
lat: parseFloat(to[i].split(',')[0]),
|
||||||
|
lng: parseFloat(to[i].split(',')[1])
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return endLocation
|
||||||
|
},
|
||||||
|
getDistance(latFrom, lngFrom, latTo, lngTo) {
|
||||||
|
var radLatFrom = this.rad(latFrom);
|
||||||
|
var radLatTo = this.rad(latTo);
|
||||||
|
var a = radLatFrom - radLatTo;
|
||||||
|
var b = this.rad(lngFrom) - this.rad(lngTo);
|
||||||
|
var distance = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLatFrom) * Math.cos(
|
||||||
|
radLatTo) * Math.pow(Math.sin(b / 2), 2)));
|
||||||
|
distance = distance * EARTH_RADIUS;
|
||||||
|
distance = Math.round(distance * 10000) / 10000;
|
||||||
|
return parseFloat(distance.toFixed(0))
|
||||||
|
},
|
||||||
|
getWXLocation(success, fail, complete) {
|
||||||
|
wx.getLocation({
|
||||||
|
type: 'gcj02',
|
||||||
|
success: success,
|
||||||
|
fail: fail,
|
||||||
|
complete: complete
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getLocationParam(location) {
|
||||||
|
if (typeof location == 'string') {
|
||||||
|
var locationArr = location.split(',');
|
||||||
|
if (locationArr.length === 2) {
|
||||||
|
location = {
|
||||||
|
latitude: location.split(',')[0],
|
||||||
|
longitude: location.split(',')[1]
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
location = {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return location
|
||||||
|
},
|
||||||
|
polyfillParam(param) {
|
||||||
|
param.success = param.success || function() {};
|
||||||
|
param.fail = param.fail || function() {};
|
||||||
|
param.complete = param.complete || function() {}
|
||||||
|
},
|
||||||
|
checkParamKeyEmpty(param, key) {
|
||||||
|
if (!param[key]) {
|
||||||
|
var errconf = this.buildErrorConfig(ERROR_CONF.PARAM_ERR, ERROR_CONF.PARAM_ERR_MSG + key + '参数格式有误');
|
||||||
|
param.fail(errconf);
|
||||||
|
param.complete(errconf);
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
},
|
||||||
|
checkKeyword(param) {
|
||||||
|
return !this.checkParamKeyEmpty(param, 'keyword')
|
||||||
|
},
|
||||||
|
checkLocation(param) {
|
||||||
|
var location = this.getLocationParam(param.location);
|
||||||
|
if (!location || !location.latitude || !location.longitude) {
|
||||||
|
var errconf = this.buildErrorConfig(ERROR_CONF.PARAM_ERR, ERROR_CONF.PARAM_ERR_MSG + ' location参数格式有误');
|
||||||
|
param.fail(errconf);
|
||||||
|
param.complete(errconf);
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
buildErrorConfig(errCode, errMsg) {
|
||||||
|
return {
|
||||||
|
status: errCode,
|
||||||
|
message: errMsg
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleData(param, data, feature) {
|
||||||
|
if (feature == 'search') {
|
||||||
|
var searchResult = data.data;
|
||||||
|
var searchSimplify = [];
|
||||||
|
for (var i = 0; i < searchResult.length; i++) {
|
||||||
|
searchSimplify.push({
|
||||||
|
id: searchResult[i].id || null,
|
||||||
|
title: searchResult[i].title || null,
|
||||||
|
latitude: searchResult[i].location && searchResult[i].location.lat || null,
|
||||||
|
longitude: searchResult[i].location && searchResult[i].location.lng || null,
|
||||||
|
address: searchResult[i].address || null,
|
||||||
|
category: searchResult[i].category || null,
|
||||||
|
tel: searchResult[i].tel || null,
|
||||||
|
adcode: searchResult[i].ad_info && searchResult[i].ad_info.adcode || null,
|
||||||
|
city: searchResult[i].ad_info && searchResult[i].ad_info.city || null,
|
||||||
|
district: searchResult[i].ad_info && searchResult[i].ad_info.district || null,
|
||||||
|
province: searchResult[i].ad_info && searchResult[i].ad_info.province || null
|
||||||
|
})
|
||||||
|
}
|
||||||
|
param.success(data, {
|
||||||
|
searchResult: searchResult,
|
||||||
|
searchSimplify: searchSimplify
|
||||||
|
})
|
||||||
|
} else if (feature == 'suggest') {
|
||||||
|
var suggestResult = data.data;
|
||||||
|
var suggestSimplify = [];
|
||||||
|
for (var i = 0; i < suggestResult.length; i++) {
|
||||||
|
suggestSimplify.push({
|
||||||
|
adcode: suggestResult[i].adcode || null,
|
||||||
|
address: suggestResult[i].address || null,
|
||||||
|
category: suggestResult[i].category || null,
|
||||||
|
city: suggestResult[i].city || null,
|
||||||
|
district: suggestResult[i].district || null,
|
||||||
|
id: suggestResult[i].id || null,
|
||||||
|
latitude: suggestResult[i].location && suggestResult[i].location.lat || null,
|
||||||
|
longitude: suggestResult[i].location && suggestResult[i].location.lng || null,
|
||||||
|
province: suggestResult[i].province || null,
|
||||||
|
title: suggestResult[i].title || null,
|
||||||
|
type: suggestResult[i].type || null
|
||||||
|
})
|
||||||
|
}
|
||||||
|
param.success(data, {
|
||||||
|
suggestResult: suggestResult,
|
||||||
|
suggestSimplify: suggestSimplify
|
||||||
|
})
|
||||||
|
} else if (feature == 'reverseGeocoder') {
|
||||||
|
var reverseGeocoderResult = data.result;
|
||||||
|
var reverseGeocoderSimplify = {
|
||||||
|
address: reverseGeocoderResult.address || null,
|
||||||
|
latitude: reverseGeocoderResult.location && reverseGeocoderResult.location.lat || null,
|
||||||
|
longitude: reverseGeocoderResult.location && reverseGeocoderResult.location.lng || null,
|
||||||
|
adcode: reverseGeocoderResult.ad_info && reverseGeocoderResult.ad_info.adcode || null,
|
||||||
|
city: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.city ||
|
||||||
|
null,
|
||||||
|
district: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component
|
||||||
|
.district || null,
|
||||||
|
nation: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component
|
||||||
|
.nation || null,
|
||||||
|
province: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component
|
||||||
|
.province || null,
|
||||||
|
street: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component
|
||||||
|
.street || null,
|
||||||
|
street_number: reverseGeocoderResult.address_component && reverseGeocoderResult
|
||||||
|
.address_component.street_number || null,
|
||||||
|
recommend: reverseGeocoderResult.formatted_addresses && reverseGeocoderResult
|
||||||
|
.formatted_addresses.recommend || null,
|
||||||
|
rough: reverseGeocoderResult.formatted_addresses && reverseGeocoderResult.formatted_addresses
|
||||||
|
.rough || null
|
||||||
|
};
|
||||||
|
if (reverseGeocoderResult.pois) {
|
||||||
|
var pois = reverseGeocoderResult.pois;
|
||||||
|
var poisSimplify = [];
|
||||||
|
for (var i = 0; i < pois.length; i++) {
|
||||||
|
poisSimplify.push({
|
||||||
|
id: pois[i].id || null,
|
||||||
|
title: pois[i].title || null,
|
||||||
|
latitude: pois[i].location && pois[i].location.lat || null,
|
||||||
|
longitude: pois[i].location && pois[i].location.lng || null,
|
||||||
|
address: pois[i].address || null,
|
||||||
|
category: pois[i].category || null,
|
||||||
|
adcode: pois[i].ad_info && pois[i].ad_info.adcode || null,
|
||||||
|
city: pois[i].ad_info && pois[i].ad_info.city || null,
|
||||||
|
district: pois[i].ad_info && pois[i].ad_info.district || null,
|
||||||
|
province: pois[i].ad_info && pois[i].ad_info.province || null
|
||||||
|
})
|
||||||
|
}
|
||||||
|
param.success(data, {
|
||||||
|
reverseGeocoderResult: reverseGeocoderResult,
|
||||||
|
reverseGeocoderSimplify: reverseGeocoderSimplify,
|
||||||
|
pois: pois,
|
||||||
|
poisSimplify: poisSimplify
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
param.success(data, {
|
||||||
|
reverseGeocoderResult: reverseGeocoderResult,
|
||||||
|
reverseGeocoderSimplify: reverseGeocoderSimplify
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} else if (feature == 'geocoder') {
|
||||||
|
var geocoderResult = data.result;
|
||||||
|
var geocoderSimplify = {
|
||||||
|
title: geocoderResult.title || null,
|
||||||
|
latitude: geocoderResult.location && geocoderResult.location.lat || null,
|
||||||
|
longitude: geocoderResult.location && geocoderResult.location.lng || null,
|
||||||
|
adcode: geocoderResult.ad_info && geocoderResult.ad_info.adcode || null,
|
||||||
|
province: geocoderResult.address_components && geocoderResult.address_components.province ||
|
||||||
|
null,
|
||||||
|
city: geocoderResult.address_components && geocoderResult.address_components.city || null,
|
||||||
|
district: geocoderResult.address_components && geocoderResult.address_components.district ||
|
||||||
|
null,
|
||||||
|
street: geocoderResult.address_components && geocoderResult.address_components.street || null,
|
||||||
|
street_number: geocoderResult.address_components && geocoderResult.address_components
|
||||||
|
.street_number || null,
|
||||||
|
level: geocoderResult.level || null
|
||||||
|
};
|
||||||
|
param.success(data, {
|
||||||
|
geocoderResult: geocoderResult,
|
||||||
|
geocoderSimplify: geocoderSimplify
|
||||||
|
})
|
||||||
|
} else if (feature == 'getCityList') {
|
||||||
|
var provinceResult = data.result[0];
|
||||||
|
var cityResult = data.result[1];
|
||||||
|
var districtResult = data.result[2];
|
||||||
|
param.success(data, {
|
||||||
|
provinceResult: provinceResult,
|
||||||
|
cityResult: cityResult,
|
||||||
|
districtResult: districtResult
|
||||||
|
})
|
||||||
|
} else if (feature == 'getDistrictByCityId') {
|
||||||
|
var districtByCity = data.result[0];
|
||||||
|
param.success(data, districtByCity)
|
||||||
|
} else if (feature == 'calculateDistance') {
|
||||||
|
var calculateDistanceResult = data.result.elements;
|
||||||
|
var distance = [];
|
||||||
|
for (var i = 0; i < calculateDistanceResult.length; i++) {
|
||||||
|
distance.push(calculateDistanceResult[i].distance)
|
||||||
|
}
|
||||||
|
param.success(data, {
|
||||||
|
calculateDistanceResult: calculateDistanceResult,
|
||||||
|
distance: distance
|
||||||
|
})
|
||||||
|
} else if (feature == 'direction') {
|
||||||
|
var direction = data.result.routes;
|
||||||
|
param.success(data, direction)
|
||||||
|
} else {
|
||||||
|
param.success(data)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
buildWxRequestConfig(param, options, feature) {
|
||||||
|
var that = this;
|
||||||
|
options.header = {
|
||||||
|
"content-type": "application/json"
|
||||||
|
};
|
||||||
|
options.method = 'GET';
|
||||||
|
options.success = function(res) {
|
||||||
|
var data = res.data;
|
||||||
|
if (data.status === 0) {
|
||||||
|
that.handleData(param, data, feature)
|
||||||
|
} else {
|
||||||
|
param.fail(data)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
options.fail = function(res) {
|
||||||
|
res.statusCode = ERROR_CONF.WX_ERR_CODE;
|
||||||
|
param.fail(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg))
|
||||||
|
};
|
||||||
|
options.complete = function(res) {
|
||||||
|
var statusCode = +res.statusCode;
|
||||||
|
switch (statusCode) {
|
||||||
|
case ERROR_CONF.WX_ERR_CODE: {
|
||||||
|
param.complete(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg));
|
||||||
|
break
|
||||||
|
}
|
||||||
|
case ERROR_CONF.WX_OK_CODE: {
|
||||||
|
var data = res.data;
|
||||||
|
if (data.status === 0) {
|
||||||
|
param.complete(data)
|
||||||
|
} else {
|
||||||
|
param.complete(that.buildErrorConfig(data.status, data.message))
|
||||||
|
}
|
||||||
|
break
|
||||||
|
}
|
||||||
|
default: {
|
||||||
|
param.complete(that.buildErrorConfig(ERROR_CONF.SYSTEM_ERR, ERROR_CONF.SYSTEM_ERR_MSG))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return options
|
||||||
|
},
|
||||||
|
locationProcess(param, locationsuccess, locationfail, locationcomplete) {
|
||||||
|
var that = this;
|
||||||
|
locationfail = locationfail || function(res) {
|
||||||
|
res.statusCode = ERROR_CONF.WX_ERR_CODE;
|
||||||
|
param.fail(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg))
|
||||||
|
};
|
||||||
|
locationcomplete = locationcomplete || function(res) {
|
||||||
|
if (res.statusCode == ERROR_CONF.WX_ERR_CODE) {
|
||||||
|
param.complete(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg))
|
||||||
|
}
|
||||||
|
};
|
||||||
|
if (!param.location) {
|
||||||
|
that.getWXLocation(locationsuccess, locationfail, locationcomplete)
|
||||||
|
} else if (that.checkLocation(param)) {
|
||||||
|
var location = Utils.getLocationParam(param.location);
|
||||||
|
locationsuccess(location)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
class QQMapWX {
|
||||||
|
constructor(options) {
|
||||||
|
if (!options.key) {
|
||||||
|
throw Error('key值不能为空')
|
||||||
|
}
|
||||||
|
this.key = options.key
|
||||||
|
};
|
||||||
|
search(options) {
|
||||||
|
var that = this;
|
||||||
|
options = options || {};
|
||||||
|
Utils.polyfillParam(options);
|
||||||
|
if (!Utils.checkKeyword(options)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
var requestParam = {
|
||||||
|
keyword: options.keyword,
|
||||||
|
orderby: options.orderby || '_distance',
|
||||||
|
page_size: options.page_size || 10,
|
||||||
|
page_index: options.page_index || 1,
|
||||||
|
output: 'json',
|
||||||
|
key: that.key
|
||||||
|
};
|
||||||
|
if (options.address_format) {
|
||||||
|
requestParam.address_format = options.address_format
|
||||||
|
}
|
||||||
|
if (options.filter) {
|
||||||
|
requestParam.filter = options.filter
|
||||||
|
}
|
||||||
|
var distance = options.distance || "1000";
|
||||||
|
var auto_extend = options.auto_extend || 1;
|
||||||
|
var region = null;
|
||||||
|
var rectangle = null;
|
||||||
|
if (options.region) {
|
||||||
|
region = options.region
|
||||||
|
}
|
||||||
|
if (options.rectangle) {
|
||||||
|
rectangle = options.rectangle
|
||||||
|
}
|
||||||
|
var locationsuccess = function(result) {
|
||||||
|
if (region && !rectangle) {
|
||||||
|
requestParam.boundary = "region(" + region + "," + auto_extend + "," + result.latitude + "," +
|
||||||
|
result.longitude + ")";
|
||||||
|
if (options.sig) {
|
||||||
|
requestParam.sig = Utils.getSig(requestParam, options.sig, 'search')
|
||||||
|
}
|
||||||
|
} else if (rectangle && !region) {
|
||||||
|
requestParam.boundary = "rectangle(" + rectangle + ")";
|
||||||
|
if (options.sig) {
|
||||||
|
requestParam.sig = Utils.getSig(requestParam, options.sig, 'search')
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
requestParam.boundary = "nearby(" + result.latitude + "," + result.longitude + "," + distance +
|
||||||
|
"," + auto_extend + ")";
|
||||||
|
if (options.sig) {
|
||||||
|
requestParam.sig = Utils.getSig(requestParam, options.sig, 'search')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
wx.request(Utils.buildWxRequestConfig(options, {
|
||||||
|
url: URL_SEARCH,
|
||||||
|
data: requestParam
|
||||||
|
}, 'search'))
|
||||||
|
};
|
||||||
|
Utils.locationProcess(options, locationsuccess)
|
||||||
|
};
|
||||||
|
getSuggestion(options) {
|
||||||
|
var that = this;
|
||||||
|
options = options || {};
|
||||||
|
Utils.polyfillParam(options);
|
||||||
|
if (!Utils.checkKeyword(options)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
var requestParam = {
|
||||||
|
keyword: options.keyword,
|
||||||
|
region: options.region || '全国',
|
||||||
|
region_fix: options.region_fix || 0,
|
||||||
|
policy: options.policy || 0,
|
||||||
|
page_size: options.page_size || 10,
|
||||||
|
page_index: options.page_index || 1,
|
||||||
|
get_subpois: options.get_subpois || 0,
|
||||||
|
output: 'json',
|
||||||
|
key: that.key
|
||||||
|
};
|
||||||
|
if (options.address_format) {
|
||||||
|
requestParam.address_format = options.address_format
|
||||||
|
}
|
||||||
|
if (options.filter) {
|
||||||
|
requestParam.filter = options.filter
|
||||||
|
}
|
||||||
|
if (options.location) {
|
||||||
|
var locationsuccess = function(result) {
|
||||||
|
requestParam.location = result.latitude + ',' + result.longitude;
|
||||||
|
if (options.sig) {
|
||||||
|
requestParam.sig = Utils.getSig(requestParam, options.sig, 'suggest')
|
||||||
|
}
|
||||||
|
wx.request(Utils.buildWxRequestConfig(options, {
|
||||||
|
url: URL_SUGGESTION,
|
||||||
|
data: requestParam
|
||||||
|
}, "suggest"))
|
||||||
|
};
|
||||||
|
Utils.locationProcess(options, locationsuccess)
|
||||||
|
} else {
|
||||||
|
if (options.sig) {
|
||||||
|
requestParam.sig = Utils.getSig(requestParam, options.sig, 'suggest')
|
||||||
|
}
|
||||||
|
wx.request(Utils.buildWxRequestConfig(options, {
|
||||||
|
url: URL_SUGGESTION,
|
||||||
|
data: requestParam
|
||||||
|
}, "suggest"))
|
||||||
|
}
|
||||||
|
};
|
||||||
|
reverseGeocoder(options) {
|
||||||
|
var that = this;
|
||||||
|
options = options || {};
|
||||||
|
Utils.polyfillParam(options);
|
||||||
|
var requestParam = {
|
||||||
|
coord_type: options.coord_type || 5,
|
||||||
|
get_poi: options.get_poi || 0,
|
||||||
|
output: 'json',
|
||||||
|
key: that.key
|
||||||
|
};
|
||||||
|
if (options.poi_options) {
|
||||||
|
requestParam.poi_options = options.poi_options
|
||||||
|
}
|
||||||
|
var locationsuccess = function(result) {
|
||||||
|
requestParam.location = result.latitude + ',' + result.longitude;
|
||||||
|
if (options.sig) {
|
||||||
|
requestParam.sig = Utils.getSig(requestParam, options.sig, 'reverseGeocoder')
|
||||||
|
}
|
||||||
|
wx.request(Utils.buildWxRequestConfig(options, {
|
||||||
|
url: URL_GET_GEOCODER,
|
||||||
|
data: requestParam
|
||||||
|
}, 'reverseGeocoder'))
|
||||||
|
};
|
||||||
|
Utils.locationProcess(options, locationsuccess)
|
||||||
|
};
|
||||||
|
geocoder(options) {
|
||||||
|
var that = this;
|
||||||
|
options = options || {};
|
||||||
|
Utils.polyfillParam(options);
|
||||||
|
if (Utils.checkParamKeyEmpty(options, 'address')) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
var requestParam = {
|
||||||
|
address: options.address,
|
||||||
|
output: 'json',
|
||||||
|
key: that.key
|
||||||
|
};
|
||||||
|
if (options.region) {
|
||||||
|
requestParam.region = options.region
|
||||||
|
}
|
||||||
|
if (options.sig) {
|
||||||
|
requestParam.sig = Utils.getSig(requestParam, options.sig, 'geocoder')
|
||||||
|
}
|
||||||
|
wx.request(Utils.buildWxRequestConfig(options, {
|
||||||
|
url: URL_GET_GEOCODER,
|
||||||
|
data: requestParam
|
||||||
|
}, 'geocoder'))
|
||||||
|
};
|
||||||
|
getCityList(options) {
|
||||||
|
var that = this;
|
||||||
|
options = options || {};
|
||||||
|
Utils.polyfillParam(options);
|
||||||
|
var requestParam = {
|
||||||
|
output: 'json',
|
||||||
|
key: that.key
|
||||||
|
};
|
||||||
|
if (options.sig) {
|
||||||
|
requestParam.sig = Utils.getSig(requestParam, options.sig, 'getCityList')
|
||||||
|
}
|
||||||
|
wx.request(Utils.buildWxRequestConfig(options, {
|
||||||
|
url: URL_CITY_LIST,
|
||||||
|
data: requestParam
|
||||||
|
}, 'getCityList'))
|
||||||
|
};
|
||||||
|
getDistrictByCityId(options) {
|
||||||
|
var that = this;
|
||||||
|
options = options || {};
|
||||||
|
Utils.polyfillParam(options);
|
||||||
|
if (Utils.checkParamKeyEmpty(options, 'id')) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
var requestParam = {
|
||||||
|
id: options.id || '',
|
||||||
|
output: 'json',
|
||||||
|
key: that.key
|
||||||
|
};
|
||||||
|
if (options.sig) {
|
||||||
|
requestParam.sig = Utils.getSig(requestParam, options.sig, 'getDistrictByCityId')
|
||||||
|
}
|
||||||
|
wx.request(Utils.buildWxRequestConfig(options, {
|
||||||
|
url: URL_AREA_LIST,
|
||||||
|
data: requestParam
|
||||||
|
}, 'getDistrictByCityId'))
|
||||||
|
};
|
||||||
|
calculateDistance(options) {
|
||||||
|
var that = this;
|
||||||
|
options = options || {};
|
||||||
|
Utils.polyfillParam(options);
|
||||||
|
if (Utils.checkParamKeyEmpty(options, 'to')) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
var requestParam = {
|
||||||
|
mode: options.mode || 'walking',
|
||||||
|
to: Utils.location2query(options.to),
|
||||||
|
output: 'json',
|
||||||
|
key: that.key
|
||||||
|
};
|
||||||
|
if (options.from) {
|
||||||
|
options.location = options.from
|
||||||
|
}
|
||||||
|
if (requestParam.mode == 'straight') {
|
||||||
|
var locationsuccess = function(result) {
|
||||||
|
var locationTo = Utils.getEndLocation(requestParam.to);
|
||||||
|
var data = {
|
||||||
|
message: "query ok",
|
||||||
|
result: {
|
||||||
|
elements: []
|
||||||
|
},
|
||||||
|
status: 0
|
||||||
|
};
|
||||||
|
for (var i = 0; i < locationTo.length; i++) {
|
||||||
|
data.result.elements.push({
|
||||||
|
distance: Utils.getDistance(result.latitude, result.longitude, locationTo[i]
|
||||||
|
.lat, locationTo[i].lng),
|
||||||
|
duration: 0,
|
||||||
|
from: {
|
||||||
|
lat: result.latitude,
|
||||||
|
lng: result.longitude
|
||||||
|
},
|
||||||
|
to: {
|
||||||
|
lat: locationTo[i].lat,
|
||||||
|
lng: locationTo[i].lng
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
var calculateResult = data.result.elements;
|
||||||
|
var distanceResult = [];
|
||||||
|
for (var i = 0; i < calculateResult.length; i++) {
|
||||||
|
distanceResult.push(calculateResult[i].distance)
|
||||||
|
}
|
||||||
|
return options.success(data, {
|
||||||
|
calculateResult: calculateResult,
|
||||||
|
distanceResult: distanceResult
|
||||||
|
})
|
||||||
|
};
|
||||||
|
Utils.locationProcess(options, locationsuccess)
|
||||||
|
} else {
|
||||||
|
var locationsuccess = function(result) {
|
||||||
|
requestParam.from = result.latitude + ',' + result.longitude;
|
||||||
|
if (options.sig) {
|
||||||
|
requestParam.sig = Utils.getSig(requestParam, options.sig, 'calculateDistance')
|
||||||
|
}
|
||||||
|
wx.request(Utils.buildWxRequestConfig(options, {
|
||||||
|
url: URL_DISTANCE,
|
||||||
|
data: requestParam
|
||||||
|
}, 'calculateDistance'))
|
||||||
|
};
|
||||||
|
Utils.locationProcess(options, locationsuccess)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
direction(options) {
|
||||||
|
var that = this;
|
||||||
|
options = options || {};
|
||||||
|
Utils.polyfillParam(options);
|
||||||
|
if (Utils.checkParamKeyEmpty(options, 'to')) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
var requestParam = {
|
||||||
|
output: 'json',
|
||||||
|
key: that.key
|
||||||
|
};
|
||||||
|
if (typeof options.to == 'string') {
|
||||||
|
requestParam.to = options.to
|
||||||
|
} else {
|
||||||
|
requestParam.to = options.to.latitude + ',' + options.to.longitude
|
||||||
|
}
|
||||||
|
var SET_URL_DIRECTION = null;
|
||||||
|
options.mode = options.mode || MODE.driving;
|
||||||
|
SET_URL_DIRECTION = URL_DIRECTION + options.mode;
|
||||||
|
if (options.from) {
|
||||||
|
options.location = options.from
|
||||||
|
}
|
||||||
|
if (options.mode == MODE.driving) {
|
||||||
|
if (options.from_poi) {
|
||||||
|
requestParam.from_poi = options.from_poi
|
||||||
|
}
|
||||||
|
if (options.heading) {
|
||||||
|
requestParam.heading = options.heading
|
||||||
|
}
|
||||||
|
if (options.speed) {
|
||||||
|
requestParam.speed = options.speed
|
||||||
|
}
|
||||||
|
if (options.accuracy) {
|
||||||
|
requestParam.accuracy = options.accuracy
|
||||||
|
}
|
||||||
|
if (options.road_type) {
|
||||||
|
requestParam.road_type = options.road_type
|
||||||
|
}
|
||||||
|
if (options.to_poi) {
|
||||||
|
requestParam.to_poi = options.to_poi
|
||||||
|
}
|
||||||
|
if (options.from_track) {
|
||||||
|
requestParam.from_track = options.from_track
|
||||||
|
}
|
||||||
|
if (options.waypoints) {
|
||||||
|
requestParam.waypoints = options.waypoints
|
||||||
|
}
|
||||||
|
if (options.policy) {
|
||||||
|
requestParam.policy = options.policy
|
||||||
|
}
|
||||||
|
if (options.plate_number) {
|
||||||
|
requestParam.plate_number = options.plate_number
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (options.mode == MODE.transit) {
|
||||||
|
if (options.departure_time) {
|
||||||
|
requestParam.departure_time = options.departure_time
|
||||||
|
}
|
||||||
|
if (options.policy) {
|
||||||
|
requestParam.policy = options.policy
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var locationsuccess = function(result) {
|
||||||
|
requestParam.from = result.latitude + ',' + result.longitude;
|
||||||
|
if (options.sig) {
|
||||||
|
requestParam.sig = Utils.getSig(requestParam, options.sig, 'direction', options.mode)
|
||||||
|
}
|
||||||
|
wx.request(Utils.buildWxRequestConfig(options, {
|
||||||
|
url: SET_URL_DIRECTION,
|
||||||
|
data: requestParam
|
||||||
|
}, 'direction'))
|
||||||
|
};
|
||||||
|
Utils.locationProcess(options, locationsuccess)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
module.exports = QQMapWX;
|
||||||
|
|
@ -0,0 +1,329 @@
|
||||||
|
const tools = require('../tools.js')
|
||||||
|
// 解决微信小程序
|
||||||
|
var QQMapWX = require('./qqmap-wx-jssdk.min.js');
|
||||||
|
// 腾讯地图
|
||||||
|
var qqmapsdk = new QQMapWX({
|
||||||
|
key: 'QNHBZ-55RKF-OMFJJ-NPU7O-EPSDH-ACBAA'
|
||||||
|
});
|
||||||
|
// 解决H5跨域
|
||||||
|
const jsonp = function(url, data) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
// 1.初始化url
|
||||||
|
let dataString = url.indexOf('?') === -1 ? '?' : '&'
|
||||||
|
let callbackName = `jsonpCB_${ Date.now() }`;
|
||||||
|
url += `${ dataString }callback=${ callbackName }`
|
||||||
|
if(data) {
|
||||||
|
// 2.有请求参数，依次添加到url
|
||||||
|
for(let k in data) {
|
||||||
|
url += `&${ k }=${ data[k] }`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let scriptNode = document.createElement('script');
|
||||||
|
scriptNode.src = url;
|
||||||
|
// 3. callback
|
||||||
|
window[callbackName] = (result) => {
|
||||||
|
result ? resolve(result) : reject('没有返回数据');
|
||||||
|
delete window[callbackName];
|
||||||
|
document.body.removeChild(scriptNode);
|
||||||
|
}
|
||||||
|
// 4. 异常情况
|
||||||
|
scriptNode.addEventListener('error', () => {
|
||||||
|
reject('接口返回数据失败');
|
||||||
|
delete window[callbackName];
|
||||||
|
document.body.removeChild(scriptNode);
|
||||||
|
}, false)
|
||||||
|
// 5. 开始请求
|
||||||
|
document.body.appendChild(scriptNode)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const yayaMap = {
|
||||||
|
// 判断app、小程序是否开启GPS定位服务
|
||||||
|
checkOpenGPSServiceByAndroidIOS() {
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
let system = uni.getSystemInfoSync(); // 获取系统信息
|
||||||
|
if (system.platform === 'android') { // 判断平台
|
||||||
|
var context = plus.android.importClass("android.content.Context");
|
||||||
|
var locationManager = plus.android.importClass("android.location.LocationManager");
|
||||||
|
var main = plus.android.runtimeMainActivity();
|
||||||
|
var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
|
||||||
|
if (!mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)) {
|
||||||
|
uni.showModal({
|
||||||
|
title: '提示',
|
||||||
|
content: '请打开定位服务功能',
|
||||||
|
showCancel: false, // 不显示取消按钮
|
||||||
|
success() {
|
||||||
|
if (!mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)) {
|
||||||
|
var Intent = plus.android.importClass('android.content.Intent');
|
||||||
|
var Settings = plus.android.importClass('android.provider.Settings');
|
||||||
|
var intent = new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS);
|
||||||
|
main.startActivity(intent); // 打开系统设置GPS服务页面
|
||||||
|
} else {
|
||||||
|
console.log('GPS功能已开启');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else if (system.platform === 'ios') {
|
||||||
|
console.log("苹果");
|
||||||
|
var cllocationManger = plus.ios.import("CLLocationManager");
|
||||||
|
var enable = cllocationManger.locationServicesEnabled();
|
||||||
|
var status = cllocationManger.authorizationStatus();
|
||||||
|
plus.ios.deleteObject(cllocationManger);
|
||||||
|
if (enable && status != 2) {
|
||||||
|
console.log("手机系统的定位已经打开");
|
||||||
|
} else {
|
||||||
|
console.log("手机系统的定位没有打开");
|
||||||
|
uni.showModal({
|
||||||
|
title: '提示',
|
||||||
|
content: '请前往设置-隐私-定位服务打开定位服务功能',
|
||||||
|
showCancel: false, // 不显示取消按钮
|
||||||
|
success() {
|
||||||
|
var UIApplication = plus.ios.import("UIApplication");
|
||||||
|
var application2 = UIApplication.sharedApplication();
|
||||||
|
var NSURL2 = plus.ios.import("NSURL");
|
||||||
|
// var setting2 = NSURL2.URLWithString("prefs:root=LOCATION_SERVICES");
|
||||||
|
// var setting2 = NSURL2.URLWithString("App-Prefs:root=LOCATION_SERVICES");
|
||||||
|
var setting2 = NSURL2.URLWithString("app-settings:");
|
||||||
|
//var setting2 = NSURL2.URLWithString("App-Prefs:root=Privacy&path=LOCATION");
|
||||||
|
// var setting2 = NSURL2.URLWithString("App-Prefs:root=Privacy&path=LOCATION_SERVICES");
|
||||||
|
application2.openURL(setting2);
|
||||||
|
plus.ios.deleteObject(setting2);
|
||||||
|
plus.ios.deleteObject(NSURL2);
|
||||||
|
plus.ios.deleteObject(application2);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
wx.getSetting({
|
||||||
|
success: (res) => {
|
||||||
|
console.log(res,99);
|
||||||
|
if (!res.authSetting['scope.userLocation']) {
|
||||||
|
//打开提示框，提示前往设置页面
|
||||||
|
uni.showModal({
|
||||||
|
title:'为了更好的体验，请开启定位服务',
|
||||||
|
confirmText:'开启',
|
||||||
|
cancelText:'关闭',
|
||||||
|
success:(res)=> {
|
||||||
|
if(res.confirm) {
|
||||||
|
wx.openSetting({success (res) {}})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
// 平台判断
|
||||||
|
platformEv(){
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
this.getAddress();
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
this.getAddressWx();
|
||||||
|
// #endif
|
||||||
|
// #ifdef H5
|
||||||
|
this.getAddressH5();
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description app获取经纬度和详细地址方法
|
||||||
|
*/
|
||||||
|
getAddress(){
|
||||||
|
uni.getLocation({
|
||||||
|
type: 'gcj02',
|
||||||
|
geocode:true,
|
||||||
|
success: (res)=> {
|
||||||
|
// console.log(res,'地址信息');
|
||||||
|
let params = {
|
||||||
|
latitude:res.latitude,
|
||||||
|
longitude:res.longitude,
|
||||||
|
address:`${res.address.province}${res.address.city}${res.address.district || ''}${res.address.street || ''}${res.address.streetNum || ''}${res.address.poiName || ''}`
|
||||||
|
}
|
||||||
|
console.log(params,'APP');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 微信获取经纬度和详细地址方法
|
||||||
|
*/
|
||||||
|
getAddressWx(){
|
||||||
|
uni.getLocation({
|
||||||
|
type: 'gcj02',
|
||||||
|
geocode:true,
|
||||||
|
success: (res)=> {
|
||||||
|
// console.log(res,'地址信息');
|
||||||
|
qqmapsdk.reverseGeocoder({
|
||||||
|
location: {latitude: res.latitude, longitude: res.longitude},
|
||||||
|
success:(res)=> {
|
||||||
|
// console.log(res,'WX');
|
||||||
|
let params = {
|
||||||
|
latitude:res.result.location.lat,
|
||||||
|
longitude:res.result.location.lng,
|
||||||
|
address:`${res.result.address}`
|
||||||
|
}
|
||||||
|
console.log(params,'WX');
|
||||||
|
},
|
||||||
|
fail(err) {
|
||||||
|
console.log(err)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description H5获取经纬度和详细地址方法
|
||||||
|
*/
|
||||||
|
getAddressH5(){
|
||||||
|
uni.showLoading({
|
||||||
|
title: '定位中...',
|
||||||
|
mask:true
|
||||||
|
});
|
||||||
|
uni.getLocation({
|
||||||
|
type: 'gcj02', // wgs84 gcj02
|
||||||
|
altitude: true,
|
||||||
|
// geocode: true, // wgs84
|
||||||
|
success: (res)=> {
|
||||||
|
let str = `output=jsonp&key=QNHBZ-55RKF-OMFJJ-NPU7O-EPSDH-ACBAA&location=${res.latitude},${res.longitude}`
|
||||||
|
jsonp('https://apis.map.qq.com/ws/geocoder/v1/?'+str,{}).then(res=>{
|
||||||
|
// console.log(res,'H5');
|
||||||
|
uni.hideLoading();
|
||||||
|
if(res.status == 0){
|
||||||
|
let params = {
|
||||||
|
latitude:res.result.location.lat,
|
||||||
|
longitude:res.result.location.lng,
|
||||||
|
address:`${res.result.address}`
|
||||||
|
}
|
||||||
|
console.log(params,'H5');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 打开地图导航
|
||||||
|
*/
|
||||||
|
openLocation(latitude,longitude,name,address){
|
||||||
|
uni.openLocation({
|
||||||
|
latitude: parseFloat(latitude),
|
||||||
|
longitude: parseFloat(longitude),
|
||||||
|
name:name,
|
||||||
|
address:address,
|
||||||
|
success: ()=> {
|
||||||
|
console.log('success');
|
||||||
|
},
|
||||||
|
fail:(err)=> {
|
||||||
|
console.log(err)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 传入目的地的经纬度、地点名称、详细地址，打开地图导航到达目的地
|
||||||
|
*/
|
||||||
|
goFlag:true,
|
||||||
|
goThere(latitude=30.656693,longitude=104.136425,name="大向天诚有限责任公司",address="四川省成都市成华区双店路B口"){
|
||||||
|
if(this.goFlag){
|
||||||
|
this.goFlag = false;
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
wx.getLocation({//获取当前经纬度
|
||||||
|
type: 'wgs84', //返回可以用于wx.openLocation的经纬度，官方提示bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息
|
||||||
|
success: (res)=> {
|
||||||
|
wx.openLocation({//使用微信内置地图查看位置。
|
||||||
|
latitude: parseFloat(latitude),//要去的纬度-地址
|
||||||
|
longitude: parseFloat(longitude),//要去的经度-地址
|
||||||
|
name: name,
|
||||||
|
address: address,
|
||||||
|
fail:err=>{
|
||||||
|
tools.showToast('地址信息错误');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef APP-PLUS || H5
|
||||||
|
uni.openLocation({
|
||||||
|
latitude: parseFloat(latitude),
|
||||||
|
longitude: parseFloat(longitude),
|
||||||
|
name:name,
|
||||||
|
address:address,
|
||||||
|
success:()=> {
|
||||||
|
console.log('success');
|
||||||
|
},
|
||||||
|
fail:err=>{
|
||||||
|
console.log(err)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// #endif
|
||||||
|
setTimeout(()=>{
|
||||||
|
this.goFlag = true;
|
||||||
|
},2000)
|
||||||
|
} else {
|
||||||
|
tools.showToast('请勿多次点击');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 经纬度===>地址
|
||||||
|
*/
|
||||||
|
getLocation(lat,lng){
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
uni.getLocation({
|
||||||
|
type:'gcj02',
|
||||||
|
geocode:true,
|
||||||
|
success:(res)=> {
|
||||||
|
console.log(res)
|
||||||
|
qqmapsdk.reverseGeocoder({
|
||||||
|
location: {
|
||||||
|
latitude: res.latitude,
|
||||||
|
longitude: res.longitude
|
||||||
|
},
|
||||||
|
success:(res)=> {
|
||||||
|
console.log(res);
|
||||||
|
resolve(res)
|
||||||
|
},
|
||||||
|
fail:(res)=> {
|
||||||
|
if(res.status == 1000){
|
||||||
|
uni.showToast({
|
||||||
|
title:'请勿频繁查询，稍后再试',
|
||||||
|
icon:'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
reject(res)
|
||||||
|
},
|
||||||
|
complete:(res)=> {
|
||||||
|
// console.log(res);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 地址===>经纬度
|
||||||
|
*/
|
||||||
|
getAddressLocation(address) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
qqmapsdk.geocoder({
|
||||||
|
address:address,
|
||||||
|
success: (res)=> {
|
||||||
|
resolve(res)
|
||||||
|
},
|
||||||
|
fail: (res)=> {
|
||||||
|
if(res.status == 1000){
|
||||||
|
uni.showToast({
|
||||||
|
title:'请勿频繁查询，稍后再试',
|
||||||
|
icon:'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
reject(res)
|
||||||
|
},
|
||||||
|
complete: (res)=> {
|
||||||
|
// console.log(res);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
export default yayaMap;
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
import request from './requst.js';
|
||||||
|
export function uploadImg(data) {
|
||||||
|
return request.upload("/universal/api.upload/upload", data);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,180 @@
|
||||||
|
// 清理所有缓存并前往登录授权页
|
||||||
|
const goLogin = () => {
|
||||||
|
uni.clearStorageSync();
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/login/login'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let flag = true;
|
||||||
|
// 刷新token并跳转到当前页面
|
||||||
|
const refreshTokenPage = () => {
|
||||||
|
uni.login({
|
||||||
|
provider: 'weixin',
|
||||||
|
success: (result)=> {
|
||||||
|
uni.request({
|
||||||
|
url: `${getApp().globalData.hostapi}user/login`,
|
||||||
|
method: 'post',
|
||||||
|
data: {code:result.code},
|
||||||
|
success: res => {
|
||||||
|
if(res.data.data.token!=''){
|
||||||
|
flag = true;
|
||||||
|
uni.setStorageSync('token',res.data.data.token); // 缓存token
|
||||||
|
uni.setStorageSync('openid',res.data.data.openid)//缓存openid
|
||||||
|
uni.setStorageSync('expire',res.data.data.expire); // 缓存失效时间（时间戳格式）
|
||||||
|
uni.reLaunch({ // 重新进入当前页面
|
||||||
|
url:uni.getStorageSync('page-path-options')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 请求错误处理
|
||||||
|
const checkError = (e) => {
|
||||||
|
// console.error("----接口错误----", e)
|
||||||
|
if (e.data) {
|
||||||
|
if (e.data.code) {
|
||||||
|
switch (Number(e.data.code)) {
|
||||||
|
case 500:
|
||||||
|
// 接口错误
|
||||||
|
console.log('500接口错误');
|
||||||
|
case 4003:
|
||||||
|
// 参数错误
|
||||||
|
console.log('4003参数错误');
|
||||||
|
break;
|
||||||
|
case 4004:
|
||||||
|
// 记录不存在
|
||||||
|
console.log('4004记录不存在');
|
||||||
|
break;
|
||||||
|
case 5001:
|
||||||
|
// xxx错误
|
||||||
|
console.log('5001xxx错误');
|
||||||
|
break;
|
||||||
|
case 5050:
|
||||||
|
// 服务器错误，请稍后重试
|
||||||
|
console.log('5050服务器错误，请稍后重试');
|
||||||
|
// 调用到登录页
|
||||||
|
goLogin();
|
||||||
|
break;
|
||||||
|
case 5051:
|
||||||
|
// 未知错误
|
||||||
|
console.log('5051未知错误');
|
||||||
|
break;
|
||||||
|
case 6001:
|
||||||
|
// token验证失败或已失效
|
||||||
|
console.log('6001token验证失败或已失效');
|
||||||
|
if(flag) {
|
||||||
|
flag = false;
|
||||||
|
// 调用刷新token事件并跳转到当前页面
|
||||||
|
refreshTokenPage();
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 封装request的(GET、POST)请求
|
||||||
|
const request = (method, url, options) => {
|
||||||
|
let methods = '';
|
||||||
|
let headers = {};
|
||||||
|
switch (method) {
|
||||||
|
case 'get':
|
||||||
|
methods = 'GET'
|
||||||
|
headers = {
|
||||||
|
'Content-Type': 'application/json; charset=UTF-8',
|
||||||
|
'Authorization': 'Bearer '+uni.getStorageSync('token') || ''
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'post':
|
||||||
|
methods = 'POST'
|
||||||
|
headers = {
|
||||||
|
'Content-Type': 'application/json; charset=UTF-8',
|
||||||
|
'Authorization': 'Bearer '+uni.getStorageSync('token') || ''
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'postForm':
|
||||||
|
methods = 'POST'
|
||||||
|
headers = {
|
||||||
|
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
|
||||||
|
'Authorization': 'Bearer '+uni.getStorageSync('token') || ''
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
uni.request({
|
||||||
|
url: `${getApp().globalData.hostapi}${url}`,
|
||||||
|
method: methods,
|
||||||
|
data: options,
|
||||||
|
header: headers,
|
||||||
|
success: res => {
|
||||||
|
console.log(`${url}返的结果===>`,res);
|
||||||
|
if (res.statusCode == 200) {
|
||||||
|
if (res.data.code == 0) {
|
||||||
|
// 接口调用成功
|
||||||
|
resolve(res.data);
|
||||||
|
} else {
|
||||||
|
// 接口返回错误信息
|
||||||
|
checkError(res);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 接口返回错误信息
|
||||||
|
checkError(res);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: e => {
|
||||||
|
// 接口请求错误
|
||||||
|
checkError(e, reject);
|
||||||
|
},
|
||||||
|
complete: rest => {
|
||||||
|
// 是否成功，都会执行
|
||||||
|
console.log(rest,100);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 上传文件 封装请求
|
||||||
|
const uploadFile = (url, options) => {
|
||||||
|
let tempData = options || {}
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
uni.uploadFile({
|
||||||
|
url: `${getApp().globalData.hostapi}${url}`,
|
||||||
|
filePath: tempData.path,
|
||||||
|
name: 'image',
|
||||||
|
fileType:'image',
|
||||||
|
formData: tempData,
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'multipart/form-data;charset=UTF-8',
|
||||||
|
'Authorization': 'Bearer '+uni.getStorageSync('token') || ''
|
||||||
|
},
|
||||||
|
success: res => {
|
||||||
|
if (res.statusCode == 200) {
|
||||||
|
let temp = JSON.parse(res.data)
|
||||||
|
if (temp.code == 0) {
|
||||||
|
resolve(temp)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
get: (url, options) => {
|
||||||
|
return request('get', url, options)
|
||||||
|
},
|
||||||
|
// JOSN格式
|
||||||
|
post: (url, options) => {
|
||||||
|
return request('post', url, options)
|
||||||
|
},
|
||||||
|
// form-data格式
|
||||||
|
postForm: (url, options) => {
|
||||||
|
return request('postForm', url, options)
|
||||||
|
},
|
||||||
|
// 上传
|
||||||
|
upload: (url, options) => {
|
||||||
|
return uploadFile(url, options)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,202 @@
|
||||||
|
const yayaTime = {
|
||||||
|
/**
|
||||||
|
* @description 获取未来七天星期几，几号
|
||||||
|
*/
|
||||||
|
weekDate(){
|
||||||
|
let date = new Date()
|
||||||
|
let year = date.getFullYear()
|
||||||
|
let month = date.getMonth()+1
|
||||||
|
let day = date.getDate()
|
||||||
|
let nth = date.getDay()//星期几
|
||||||
|
console.log(year,month,day,nth);
|
||||||
|
let xingq = ['周日','周一','周二','周三','周四','周五','周六']
|
||||||
|
console.log(`${year}-${month}-${day} ${xingq[nth]}`);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 将时间转换成几天前，几个月前，几小时前等
|
||||||
|
*/
|
||||||
|
timeago(datetime) {
|
||||||
|
if(datetime == undefined || datetime == ''){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
var timePublish = new Date(datetime.replace(/-/gi, '/'));
|
||||||
|
var timeNow = new Date();
|
||||||
|
var minute = 1000 * 60;
|
||||||
|
var hour = minute * 60;
|
||||||
|
var day = hour * 24;
|
||||||
|
var month = day * 30;
|
||||||
|
var result = "0";
|
||||||
|
var diffValue = timeNow - timePublish;
|
||||||
|
var diffMonth = diffValue / month;
|
||||||
|
var diffWeek = diffValue / (7 * day);
|
||||||
|
var diffDay = diffValue / day;
|
||||||
|
var diffHour = diffValue / hour;
|
||||||
|
var diffMinute = diffValue / minute;
|
||||||
|
|
||||||
|
if (diffValue < 0) {
|
||||||
|
console.log('错误时间')
|
||||||
|
}
|
||||||
|
else if (diffDay > 1) {
|
||||||
|
var year = timePublish.getFullYear();
|
||||||
|
var month = timePublish.getMonth() + 1;
|
||||||
|
var date = timePublish.getDate();
|
||||||
|
var hours = timePublish.getHours();
|
||||||
|
var minutes = timePublish.getMinutes();
|
||||||
|
var seconds = timePublish.getSeconds();
|
||||||
|
if(month<=9){month = '0'+month}
|
||||||
|
if(date<=9){date = '0'+date}
|
||||||
|
if(hours<=9){hours = '0'+hours}
|
||||||
|
if(minutes<=9){minutes = '0'+minutes}
|
||||||
|
if(seconds<=9){seconds = '0'+seconds}
|
||||||
|
result = year+'-'+month+'-'+date;
|
||||||
|
|
||||||
|
}
|
||||||
|
else if (diffMonth > 1) {
|
||||||
|
result = parseInt(diffMonth) + "月前";
|
||||||
|
}
|
||||||
|
else if (diffWeek > 1) {
|
||||||
|
result = parseInt(diffWeek) + "周前";
|
||||||
|
}
|
||||||
|
else if (diffDay > 1 ) {
|
||||||
|
result = parseInt(diffDay) + "天前";
|
||||||
|
}
|
||||||
|
else if (diffHour > 1) {
|
||||||
|
result = parseInt(diffHour) + "小时前";
|
||||||
|
}
|
||||||
|
else if (diffMinute > 1) {
|
||||||
|
result = parseInt(diffMinute) + "分钟前";
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
result = "刚刚";
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 时间戳===>日期
|
||||||
|
*/
|
||||||
|
timestampToTime(timestamp) {
|
||||||
|
var date = timestamp.toString().length==13 ? new Date(timestamp*1) : new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
|
||||||
|
var Y = date.getFullYear();
|
||||||
|
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
|
||||||
|
var D = date.getDate() < 10 ? '0'+date.getDate() : date.getDate();
|
||||||
|
var h = date.getHours() < 10 ? '0'+date.getHours() : date.getHours();
|
||||||
|
var m = date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes();
|
||||||
|
var s = date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds();
|
||||||
|
return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' +s;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 返回当前时间
|
||||||
|
*/
|
||||||
|
returnCurrentTime(format,type) {
|
||||||
|
let date = new Date();
|
||||||
|
let year = date.getFullYear(); // 年
|
||||||
|
let month = date.getMonth() + 1; // 月
|
||||||
|
let day = date.getDate(); // 日
|
||||||
|
let time = date.getHours(); // 时
|
||||||
|
let minu = date.getSeconds(); // 分
|
||||||
|
let second = date.getMinutes(); // 秒
|
||||||
|
|
||||||
|
let newTime = '';
|
||||||
|
switch (type){
|
||||||
|
case 0:
|
||||||
|
newTime = `${year}${format}${month < 10? '0' + month : month}${format}${day < 10 ? '0' + day : day} ${time < 10 ? '0' + time : time}:${minu < 10 ? '0' + minu : minu}`; // 2022-03-31 16:05
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
newTime = `${year}${format}${month < 10? '0' + month : month}${format}${day < 10 ? '0' + day : day} ${time < 10 ? '0' + time : time}:${minu < 10 ? '0' + minu : minu}:${second < 10 ? '0' + second : second}`; // 2022-03-31 16:10:07
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return newTime;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 日期===>时间戳
|
||||||
|
*/
|
||||||
|
timeToTimestamp(time){
|
||||||
|
var date = new Date(time);
|
||||||
|
var timestamp = date.getTime();//精确到毫秒
|
||||||
|
return timestamp
|
||||||
|
// var date = new Date('2014-04-23 18:55:49:123');
|
||||||
|
// 有三种方式获取
|
||||||
|
// var time1 = date.getTime();//精确到毫秒
|
||||||
|
// var time2 = date.valueOf();//精确到毫秒
|
||||||
|
// var time3 = Date.parse(date);//只能精确到秒，毫秒用000替代
|
||||||
|
// console.log(time1);//1398250549123
|
||||||
|
// console.log(time2);//1398250549123
|
||||||
|
// console.log(time3);//1398250549000
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 返回时间xx天xx小时xx分钟
|
||||||
|
*/
|
||||||
|
returnTimeFormat(startTime,endTime){
|
||||||
|
let currentTimestamp = this.timeToTimestamp(endTime) - this.timeToTimestamp(startTime);
|
||||||
|
let timeStr = '';
|
||||||
|
var day = parseInt((currentTimestamp % (1000 * 60 * 60 * 24 * 12)) / (1000 * 60 * 60 * 24));
|
||||||
|
var hours = parseInt((currentTimestamp % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||||
|
var seconds = parseInt((currentTimestamp % (1000 * 60 * 60)) / (1000 * 60));
|
||||||
|
day = day < 10 ? ('0' + day) : day;
|
||||||
|
hours = hours < 10 ? ('0' + hours) : hours;
|
||||||
|
seconds = seconds < 10 ? ('0' + seconds) : seconds;
|
||||||
|
if(day*1==0) {
|
||||||
|
if(hours*1==0) {
|
||||||
|
seconds*1==0 ? timeStr = 0 : timeStr = `${seconds}分钟`;
|
||||||
|
} else {
|
||||||
|
timeStr = `${hours}小时${seconds}分钟`;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
timeStr = `${day}天${hours}小时${seconds}分钟`;
|
||||||
|
}
|
||||||
|
return timeStr;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 时间戳转时分秒 00 : 00 : 00
|
||||||
|
*/
|
||||||
|
formatDuring(mss) {
|
||||||
|
// let dangTime = Math.round(new Date()/1000)//获取当前时间戳
|
||||||
|
var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||||
|
var seconds = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
|
||||||
|
var minutes = (mss % (1000 * 60)) / 1000;
|
||||||
|
hours = hours < 10 ? ('0' + hours) : hours;
|
||||||
|
seconds = seconds < 10 ? ('0' + seconds) : seconds;
|
||||||
|
minutes = minutes < 10 ? ('0' + minutes) : minutes;
|
||||||
|
return hours + ' : ' + seconds + ' : ' + minutes;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 开启倒计时
|
||||||
|
*/
|
||||||
|
dayTime(endTime,startTime=''){
|
||||||
|
let totalSecond = '';
|
||||||
|
// 本地倒计时
|
||||||
|
// if(startTime=='') totalSecond = Math.floor((new Date(endTime).getTime() - new Date().getTime())/1000);
|
||||||
|
// 解决苹果手机问题
|
||||||
|
let date = endTime;
|
||||||
|
date = endTime.replace(/-/g,'/')
|
||||||
|
// 服务器倒计时
|
||||||
|
if(startTime!='') totalSecond = Math.floor((new Date(date).getTime() - startTime)/1000);
|
||||||
|
// 总秒数
|
||||||
|
let second = totalSecond;
|
||||||
|
// 天数
|
||||||
|
let day = Math.floor(second / 3600 / 24);
|
||||||
|
let dayStr = day.toString();
|
||||||
|
if(dayStr.length == 1) dayStr = '0' + dayStr;
|
||||||
|
// 小时
|
||||||
|
let hr = Math.floor((second - day * 3600 * 24) / 3600);
|
||||||
|
let hrStr = hr.toString();
|
||||||
|
if(hrStr.length == 1) hrStr = '0' + hrStr;
|
||||||
|
// 分钟
|
||||||
|
let min = Math.floor((second - day * 3600 * 24 - hr * 3600) / 60);
|
||||||
|
let minStr = min.toString();
|
||||||
|
if(minStr.length == 1) minStr = '0' + minStr;
|
||||||
|
// 秒
|
||||||
|
let sec = second - day * 3600 * 24 - hr * 3600 - min * 60;
|
||||||
|
let secStr = sec.toString();
|
||||||
|
if(secStr.length == 1) secStr = '0' + secStr;
|
||||||
|
|
||||||
|
let newTime = '';
|
||||||
|
if(dayStr==0) {
|
||||||
|
newTime = hrStr +'时'+ minStr +'分'+ secStr +'秒';
|
||||||
|
} else {
|
||||||
|
newTime = dayStr +'天'+ hrStr +'时'+ minStr +'分'+ secStr +'秒';
|
||||||
|
}
|
||||||
|
return newTime;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
export default yayaTime;
|
||||||
|
|
@ -0,0 +1,525 @@
|
||||||
|
const tools = {
|
||||||
|
timer:'',
|
||||||
|
/**
|
||||||
|
* @description 埋点倒计时
|
||||||
|
*/
|
||||||
|
daoTime(){
|
||||||
|
let daoTime = uni.getStorageSync('daoTime')
|
||||||
|
if(daoTime==''){//初次判断倒计时是否为空
|
||||||
|
uni.setStorageSync('daoTime',60)//设置倒计时
|
||||||
|
daoTime = uni.getStorageSync('daoTime')
|
||||||
|
this.timer = setInterval(()=>{
|
||||||
|
uni.setStorageSync('daoTime',daoTime--)//设置倒计时
|
||||||
|
if(uni.getStorageSync('daoTime')<=0 || uni.getStorageSync('maiList').length==5){
|
||||||
|
uni.removeStorageSync('daoTime')//清空倒计时
|
||||||
|
clearInterval(this.timer)//关闭倒计时
|
||||||
|
// console.log('上/报，埋点');
|
||||||
|
uni.removeStorageSync('maiList')//清空上报参数
|
||||||
|
this.daoTime()//重新倒计时
|
||||||
|
}
|
||||||
|
},1000)
|
||||||
|
} else {//继续当前倒计时倒计
|
||||||
|
this.timer = setInterval(()=>{
|
||||||
|
uni.setStorageSync('daoTime',daoTime--)//设置倒计时
|
||||||
|
if(uni.getStorageSync('daoTime')<=0 || uni.getStorageSync('maiList').length==5){
|
||||||
|
uni.removeStorageSync('daoTime')//清空倒计时
|
||||||
|
clearInterval(this.timer)//关闭倒计时
|
||||||
|
// console.log('上报，埋点');
|
||||||
|
uni.removeStorageSync('maiList')//清空上报参数
|
||||||
|
this.daoTime()//重新倒计时
|
||||||
|
}
|
||||||
|
},1000)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 关闭倒计时
|
||||||
|
*/
|
||||||
|
closeTimer(){
|
||||||
|
clearInterval(this.timer)
|
||||||
|
console.log('倒计时清空了');
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 获取微信扫码后的结果，并解析
|
||||||
|
*/
|
||||||
|
unescapeEv(op) {
|
||||||
|
let str = unescape(op.q);
|
||||||
|
return str;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 手机号验证
|
||||||
|
*/
|
||||||
|
isPhone:function(phone){
|
||||||
|
// 手机号正则表达式
|
||||||
|
let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
|
||||||
|
return !reg_tel.test(phone);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 电子邮箱验证
|
||||||
|
*/
|
||||||
|
isEmail(email){
|
||||||
|
let reg_email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
|
||||||
|
return !reg_email.test(email);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 身份证验证
|
||||||
|
*/
|
||||||
|
isIdentity(identity) {
|
||||||
|
let reg_identity = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
|
||||||
|
return !reg_identity.test(identity);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 手机号中间四位用"****"带替
|
||||||
|
*/
|
||||||
|
hideMPhone(phone){
|
||||||
|
return `${phone.substr(0, 3)}****${phone.substr(7)}`
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 手机号中间加字符
|
||||||
|
*/
|
||||||
|
phoneAddChat(phone,startNum=3,endNum=7,character=' '){
|
||||||
|
let phoneStr = phone;
|
||||||
|
phoneStr = phoneStr.replace(/\s*/g, "");
|
||||||
|
var phoneArr = [];
|
||||||
|
for(var i = 0; i < phoneStr.length; i++){
|
||||||
|
if (i==startNum||i==endNum){
|
||||||
|
phoneArr.push(`${character}` + phoneStr.charAt(i));
|
||||||
|
} else {
|
||||||
|
phoneArr.push(phoneStr.charAt(i));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
phone = phoneArr.join("");
|
||||||
|
return phone;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 昵称从第一个字开始，后面的都用"*"代替
|
||||||
|
*/
|
||||||
|
hideName(name,num){
|
||||||
|
return `${name.substr(0, 1)}****${name.substr(name.length-1)}`
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 金额转换各三位数使用英文","隔开
|
||||||
|
*/
|
||||||
|
changeNum(num){
|
||||||
|
if (num) {
|
||||||
|
// 针对整数部分进行格式化处理，这是此方法的核心，也是稍难理解的一个地方，逆向的来思考或者采用简单的事例来实现就容易多了
|
||||||
|
/*
|
||||||
|
也可以这样想象，现在有一串数字字符串在你面前，如果让你给他家千分位的逗号的话，你是怎么来思考和操作的?
|
||||||
|
字符串长度为0/1/2/3时都不用添加
|
||||||
|
字符串长度大于3的时候，从右往左数，有三位字符就加一个逗号，然后继续往前数，直到不到往前数少于三位字符为止
|
||||||
|
*/
|
||||||
|
num = num+''; // 数字转换为字符串，数字是没有.length属性的
|
||||||
|
for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++) {
|
||||||
|
num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3))
|
||||||
|
}
|
||||||
|
// 将数据（符号、整数部分、小数部分）整体组合返回
|
||||||
|
return num;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 整数添加.00，小数就不添加
|
||||||
|
*/
|
||||||
|
addXiaoShu(num){
|
||||||
|
console.log(num,120);
|
||||||
|
let str = num.toString();
|
||||||
|
if(str.length > 9){
|
||||||
|
str = str*1;
|
||||||
|
str = str.toFixed(2);
|
||||||
|
str = str+'';
|
||||||
|
}
|
||||||
|
return str.includes('.') ? str : str = num + '.00';
|
||||||
|
},
|
||||||
|
// type:+加、-减、*乘、/除
|
||||||
|
// len:小数后保留几位
|
||||||
|
/**
|
||||||
|
* @description 数字换算解决失精度问题
|
||||||
|
*/
|
||||||
|
operationEv(num1,num2,type,len=0){
|
||||||
|
// 将数字转化成字符串
|
||||||
|
num1 = num1.toString();
|
||||||
|
num2 = num2.toString();
|
||||||
|
// 获取小数点的位置
|
||||||
|
var index1 = num1.indexOf(".");
|
||||||
|
var index2 = num2.indexOf(".");
|
||||||
|
// 如果小数点存在，那么就再获取各自的小数位数
|
||||||
|
var ws1 = 0;
|
||||||
|
var ws2 = 0;
|
||||||
|
if(index1 != -1){
|
||||||
|
ws1 = num1.split(".")[1].length;
|
||||||
|
}
|
||||||
|
if(index2 != -1){
|
||||||
|
ws2 = num2.split(".")[1].length;
|
||||||
|
}
|
||||||
|
// 看谁的小数位数大，谁的小数位数小
|
||||||
|
var bigger = (ws1 > ws2) ? ws1 : ws2;
|
||||||
|
var smaller = (ws1 < ws2) ? ws1 : ws2;
|
||||||
|
// 计算得到需要补齐的0的个数
|
||||||
|
var zerosCount = bigger - smaller;
|
||||||
|
// 好了，现在不管三七二十，全部去除小数点
|
||||||
|
num1 = num1.replace(".","");
|
||||||
|
num2 = num2.replace(".","");
|
||||||
|
// 比较num1和num2谁大，比较方法就是看谁是smaller，是smaller的一方就补0
|
||||||
|
if(ws1 == smaller){
|
||||||
|
for (var i = 0; i < zerosCount; i++) {
|
||||||
|
num1 += "0";
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
for (var i = 0; i < zerosCount; i++) {
|
||||||
|
num2 += "0";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 开始计算
|
||||||
|
var sum = "";
|
||||||
|
if(type=="+"){
|
||||||
|
// 加
|
||||||
|
sum = parseInt(num1) + parseInt(num2);
|
||||||
|
}
|
||||||
|
if(type=="-"){
|
||||||
|
// 减
|
||||||
|
sum = parseInt(num1) - parseInt(num2);
|
||||||
|
}
|
||||||
|
if(type=="*"){
|
||||||
|
// 乘
|
||||||
|
sum = parseInt(num1) * parseInt(num2);
|
||||||
|
}
|
||||||
|
if(type=="/"){
|
||||||
|
// 除
|
||||||
|
sum = parseInt(num1) / parseInt(num2);
|
||||||
|
}
|
||||||
|
// 根据较大的小数位数计算倍数
|
||||||
|
var beishu = 1;
|
||||||
|
for (var i = 0; i < bigger; i++) {
|
||||||
|
beishu = beishu*10;
|
||||||
|
}
|
||||||
|
sum = sum/beishu;
|
||||||
|
if(type=="*"){
|
||||||
|
switch (bigger){
|
||||||
|
case 1:
|
||||||
|
sum = sum / 10;
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
sum = sum / 100;
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
sum = sum / 1000;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(type=="/"){
|
||||||
|
switch (bigger){
|
||||||
|
case 1:
|
||||||
|
sum = sum * 10;
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
sum = sum * 100;
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
sum = sum * 1000;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
len!=0 ? sum = sum.toFixed(len) : '';
|
||||||
|
return sum;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 金额输入框验证
|
||||||
|
*/
|
||||||
|
checkPrice(number,zong){
|
||||||
|
let reg = /^[0-9]*$/;//数字正则表达式
|
||||||
|
let newObj = {}
|
||||||
|
zong = parseInt(zong).toString()//取小数点左边的整数
|
||||||
|
if(!reg.test(number)){//不是数字时
|
||||||
|
newObj = {
|
||||||
|
len:zong.length,//动态设置长度
|
||||||
|
val:zong//动态设置值正整数的总金额
|
||||||
|
}
|
||||||
|
} else {//是数字时
|
||||||
|
newObj = {
|
||||||
|
len:zong.length,
|
||||||
|
val:number//动态设置当前输入的值
|
||||||
|
}
|
||||||
|
if(number*1 > zong*1){//输入的金额大于总金额
|
||||||
|
newObj.val = zong//赋值总金额
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return newObj
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 文本提示
|
||||||
|
*/
|
||||||
|
showToast: function(msg, icon='none',time) {
|
||||||
|
// 弹框显示时间：默认2秒
|
||||||
|
var newTime = 2000
|
||||||
|
if (time) {newTime = time;}
|
||||||
|
return uni.showToast({
|
||||||
|
title: msg,
|
||||||
|
icon: icon,
|
||||||
|
duration:newTime
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 富文本处理
|
||||||
|
*/
|
||||||
|
escape2Html(str) {
|
||||||
|
var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' };
|
||||||
|
return str.replace(/&(lt|gt|nbsp|amp|quot|src);/ig, function (all, t) {
|
||||||
|
return arrEntities[t];
|
||||||
|
})
|
||||||
|
.replace('<section', '<div')
|
||||||
|
.replace(/\<img/g, '<img @tap="pre" style="max-width:100%!important;height:auto" ')
|
||||||
|
.replace(/src=\"/g,'src="https://oss.hmzfyy.cn');
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 检查网络状态
|
||||||
|
*/
|
||||||
|
networkStatus(){
|
||||||
|
uni.getNetworkType({
|
||||||
|
success: (res)=> {
|
||||||
|
console.log('当前网络状态：',res.networkType);//none：当前无网络连接
|
||||||
|
if(res.networkType=='none'){
|
||||||
|
uni.setStorageSync('isNet',false)
|
||||||
|
} else {
|
||||||
|
uni.setStorageSync('isNet',true);
|
||||||
|
// 微信小程序原生API性能优化
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
// 连网下，检测小程序是否有更新
|
||||||
|
this.checkUpdate();
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description app、小程序的检测版本并更新
|
||||||
|
*/
|
||||||
|
checkUpdate(){
|
||||||
|
// 检测app
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
|
||||||
|
// #endif
|
||||||
|
//检测小程序
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
var self = this;
|
||||||
|
// 获取小程序更新机制兼容
|
||||||
|
if (wx.canIUse('getUpdateManager')) {
|
||||||
|
const updateManager = wx.getUpdateManager();//1. 检查小程序是否有新版本发布
|
||||||
|
updateManager.onCheckForUpdate(function(res) {// 请求完新版本信息的回调
|
||||||
|
if (res.hasUpdate) {
|
||||||
|
//检测到新版本，需要更新，给出提示
|
||||||
|
wx.showModal({
|
||||||
|
title: '更新提示',
|
||||||
|
content: '检测到新版本，是否下载新版本并重启小程序？',
|
||||||
|
success: function(res) {
|
||||||
|
if (res.confirm) {
|
||||||
|
//2. 用户确定下载更新小程序，小程序下载及更新静默进行
|
||||||
|
self.downLoadAndUpdate(updateManager)
|
||||||
|
// 清除所有缓存
|
||||||
|
uni.clearStorage();
|
||||||
|
uni.clearStorageSync();
|
||||||
|
} else if (res.cancel) {
|
||||||
|
//用户点击取消按钮的处理，如果需要强制更新，则给出二次弹窗，如果不需要，则这里的代码都可以删掉了
|
||||||
|
wx.showModal({
|
||||||
|
title: '温馨提示~',
|
||||||
|
content: '本次版本更新涉及到新的功能添加，旧版本无法正常访问的哦~',
|
||||||
|
showCancel:false,//隐藏取消按钮
|
||||||
|
confirmText:"确定更新",//只保留确定更新按钮
|
||||||
|
success: function(res) {
|
||||||
|
if (res.confirm) {
|
||||||
|
//下载新版本，并重新应用
|
||||||
|
self.downLoadAndUpdate(updateManager)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else { // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
|
||||||
|
wx.showModal({
|
||||||
|
title: '提示',
|
||||||
|
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
// 下载小程序新版本并重启应用
|
||||||
|
downLoadAndUpdate(updateManager){
|
||||||
|
var self = this;
|
||||||
|
wx.showLoading(); //静默下载更新小程序新版本
|
||||||
|
updateManager.onUpdateReady(function () {
|
||||||
|
wx.hideLoading(); //新的版本已经下载好，调用 applyUpdate 应用新版本并重启
|
||||||
|
updateManager.applyUpdate();
|
||||||
|
// 清除缓存
|
||||||
|
uni.clearStorageSync();
|
||||||
|
uni.clearStorage();
|
||||||
|
})
|
||||||
|
updateManager.onUpdateFailed(function () { // 新的版本下载失败
|
||||||
|
wx.showModal({
|
||||||
|
title: '已经有新版本了哟~',
|
||||||
|
content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~',
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 文本复制
|
||||||
|
*/
|
||||||
|
clickCopy(data){
|
||||||
|
uni.setClipboardData({
|
||||||
|
data: data,
|
||||||
|
success: ()=> {
|
||||||
|
uni.showToast({title: '复制成功',duration: 2000,icon: 'none'});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
authTimer:null,
|
||||||
|
/**
|
||||||
|
* @description 判断是否授权，没授权，前往登录页面授权
|
||||||
|
*/
|
||||||
|
judgeAuth(){
|
||||||
|
let auth = false;
|
||||||
|
clearTimeout(this.authTimer);
|
||||||
|
if(!uni.getStorageSync('token')) {
|
||||||
|
this.showToast('请登录');
|
||||||
|
this.authTimer = setTimeout(()=>{
|
||||||
|
uni.navigateTo({url:'/pages/login/login'});
|
||||||
|
},2000)
|
||||||
|
} else {
|
||||||
|
auth = true;
|
||||||
|
}
|
||||||
|
return auth;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 判断当前环境：清空日志输出
|
||||||
|
*/
|
||||||
|
currentContext(){
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
if(uni.getSystemInfoSync().platform != "devtools"){//devtools：开发版 值域为：ios、android、mac（3.1.10+）、windows（3.1.10+）、linux（3.1.10+）
|
||||||
|
// console.log = () =>{}
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
// 微信小程序原生API性能优化
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
let hInfo = wx.getAccountInfoSync();
|
||||||
|
// console.log(hInfo.envVersion);//develop:开发版 trial：体验版 release：正式版
|
||||||
|
if(hInfo.miniProgram.envVersion == "release"){
|
||||||
|
// 清除所有输出日志
|
||||||
|
console.log = () =>{};
|
||||||
|
// 开启埋点倒计时
|
||||||
|
// this.daoTime();
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 禁止小程序使用右上角分享
|
||||||
|
*/
|
||||||
|
disableShareEv(){
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
wx.hideShareMenu({
|
||||||
|
menus: ['shareAppMessage', 'shareTimeline']
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 获取当前页面完整url
|
||||||
|
*/
|
||||||
|
obtainPagePath(){
|
||||||
|
let pages = getCurrentPages();
|
||||||
|
// 获取纯页面路径
|
||||||
|
let route = pages[pages.length - 1].route;
|
||||||
|
uni.setStorageSync('url',route);
|
||||||
|
// 获取当前页面url，带参数
|
||||||
|
let routeParam = pages[pages.length - 1].$page.fullPath;
|
||||||
|
// console.log(routeParam.options,'获取当前url参数');
|
||||||
|
uni.setStorageSync('page-path-options',routeParam);
|
||||||
|
console.log(uni.getStorageSync('page-path-options'),'当前页面完整路径');
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 拨打电话
|
||||||
|
* @param {Number} phone
|
||||||
|
*/
|
||||||
|
countCustomer(phone=10086){
|
||||||
|
const res = uni.getSystemInfoSync();
|
||||||
|
if(res.platform=='ios'){
|
||||||
|
uni.makePhoneCall({
|
||||||
|
phoneNumber:phone*1,
|
||||||
|
success: () => {},
|
||||||
|
fail: () => {}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
uni.showActionSheet({
|
||||||
|
itemList:[phone,'立即呼叫'],
|
||||||
|
itemColor:'#3875F6',
|
||||||
|
success: (res) => {
|
||||||
|
if(res.tapIndex==1){
|
||||||
|
uni.makePhoneCall({
|
||||||
|
phoneNumber:phone
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 图片选择
|
||||||
|
* @param {Number} count
|
||||||
|
*/
|
||||||
|
uploadImg(count=1) {
|
||||||
|
let imgArr = [];
|
||||||
|
uni.chooseImage({
|
||||||
|
count:count,
|
||||||
|
sizeType:['compressed'],
|
||||||
|
sourceType:['album','camera'],
|
||||||
|
success: (res) => {
|
||||||
|
let files = res.tempFilePaths
|
||||||
|
console.log(files);
|
||||||
|
files.forEach(item=>{
|
||||||
|
imgArr.push(item);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return imgArr;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 打开小程序获取用户信息权限
|
||||||
|
*/
|
||||||
|
wxOpenSet() {
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
// 用户信息
|
||||||
|
uni.authorize({
|
||||||
|
scope:'scope.userInfo',
|
||||||
|
success: (res) => {},
|
||||||
|
fail: (res) => {
|
||||||
|
uni.showModal({
|
||||||
|
content:'检测到您没打开获取信息功能权限，是否去设置打开？',
|
||||||
|
confirmText: "确认",
|
||||||
|
cancelText:'取消',
|
||||||
|
success: (res) => {
|
||||||
|
if(res.confirm){
|
||||||
|
uni.openSetting({
|
||||||
|
success: (res) => {
|
||||||
|
console.log(res);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
console.log('取消');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
tools
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
import App from './App';
|
||||||
|
import store from './store'
|
||||||
|
Vue.prototype.$store = store
|
||||||
|
|
||||||
|
import statusContainer from './components/containers/status-container.vue';//引入头部状态栏、导航栏、内容容器组件
|
||||||
|
Vue.component('status-container',statusContainer);//全局注册头部状态栏、导航栏、内容容器组件
|
||||||
|
|
||||||
|
import nothingPage from './components/nothing/nothing-page.vue';//引入无内容组件
|
||||||
|
Vue.component('nothing-page',nothingPage);//全局注册无内容组件
|
||||||
|
|
||||||
|
// 常用便捷式公共方法
|
||||||
|
import tools from '@/jsFile/tools.js';
|
||||||
|
Vue.prototype.$toolAll = tools;
|
||||||
|
|
||||||
|
// 响应数据
|
||||||
|
import requst from '@/jsFile/requst.js';
|
||||||
|
Vue.prototype.$requst = requst;
|
||||||
|
|
||||||
|
App.mpType = 'app';
|
||||||
|
|
||||||
|
const app = new Vue({
|
||||||
|
store,
|
||||||
|
...App
|
||||||
|
})
|
||||||
|
app.$mount()
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
{
|
||||||
|
"name" : "app适配微信小程序",
|
||||||
|
"appid" : "__UNI__768F35C",
|
||||||
|
"description" : "这是一款基于uniapp开发的app和微信小程序的模板框架",
|
||||||
|
"versionName" : "1.0.0",
|
||||||
|
"versionCode" : "100",
|
||||||
|
"transformPx" : false,
|
||||||
|
"app-plus" : {
|
||||||
|
"usingComponents" : true,
|
||||||
|
"compilerVersion" : 3,
|
||||||
|
/* 5+App特有相关 */
|
||||||
|
"modules" : {
|
||||||
|
"Payment" : {},
|
||||||
|
"Share" : {}
|
||||||
|
},
|
||||||
|
/* 模块配置 */
|
||||||
|
"distribute" : {
|
||||||
|
/* 应用发布信息 */
|
||||||
|
"android" : {
|
||||||
|
/* android打包配置 */
|
||||||
|
"permissions" : [
|
||||||
|
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||||
|
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"ios" : {},
|
||||||
|
/* ios打包配置 */
|
||||||
|
"sdkConfigs" : {
|
||||||
|
"maps" : {},
|
||||||
|
"payment" : {
|
||||||
|
"weixin" : {
|
||||||
|
"__platform__" : [ "ios", "android" ],
|
||||||
|
"appid" : "wx2654bc27c419ada6",
|
||||||
|
"UniversalLinks" : ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"push" : {},
|
||||||
|
"geolocation" : {},
|
||||||
|
"share" : {
|
||||||
|
"weixin" : {
|
||||||
|
"appid" : "wx2654bc27c419ada6",
|
||||||
|
"UniversalLinks" : ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"ad" : {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splashscreen" : {
|
||||||
|
"alwaysShowBeforeRender" : false,
|
||||||
|
"waiting" : false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/* SDK配置 */
|
||||||
|
"quickapp" : {},
|
||||||
|
/* 快应用特有相关 */
|
||||||
|
"mp-weixin" : {
|
||||||
|
/* 小程序特有相关 */
|
||||||
|
"appid" : "wx705dfb975654e53a",
|
||||||
|
"setting" : {
|
||||||
|
"urlCheck" : true,
|
||||||
|
"es6" : true
|
||||||
|
},
|
||||||
|
"usingComponents" : true,
|
||||||
|
"permission" : {
|
||||||
|
"scope.userLocation" : {
|
||||||
|
"desc" : "您的位置信息将用于小程序位置接口的效果展示"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"mp-baidu" : {
|
||||||
|
"appid" : "24346353"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
{
|
||||||
|
"name": "轮播视频和图片",
|
||||||
|
"version": "1.0.1",
|
||||||
|
"lockfileVersion": 2,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {
|
||||||
|
"": {
|
||||||
|
"name": "轮播视频和图片",
|
||||||
|
"version": "1.0.1",
|
||||||
|
"dependencies": {
|
||||||
|
"moment": "^2.29.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"id": "zhuge-swiper",
|
||||||
|
"name": "轮播视频和图片",
|
||||||
|
"version": "1.0.1",
|
||||||
|
"description": "自动轮播视频和图片组件。播放视频时停止轮播，手动滑动swiper时视频停止播放",
|
||||||
|
"keywords": [
|
||||||
|
"vue",
|
||||||
|
"swiper",
|
||||||
|
"zhuge"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
{
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "pages/tabbar/pagehome/pagehome",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom", //禁用原生导航栏，微信小程序可用
|
||||||
|
"navigationBarTextStyle": "black",
|
||||||
|
"app-plus": {
|
||||||
|
"titleNView": false, //禁用原生导航栏，APP和H5可用
|
||||||
|
"bounce": "none",
|
||||||
|
"scrollIndicator": "none"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/tabbar/my/my",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "个人中心",
|
||||||
|
"navigationStyle": "custom" //禁用原生导航栏，微信小程序可用
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
"path": "pages/tabbar/project-list/project-list",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "项目列表",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}, {
|
||||||
|
"path": "pages/tabbar/feedback/feedback",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "意见反馈",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"subPackages": [{ //A包
|
||||||
|
"root": "pagesA",
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"path" : "my-address/my-address",
|
||||||
|
"style" : {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{ //B包
|
||||||
|
"root": "pagesB",
|
||||||
|
"pages": []
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"preloadRule": {
|
||||||
|
"pages/tabbar/pagehome/pagehome": {
|
||||||
|
"network": "all",
|
||||||
|
"packages": ["pagesA"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"globalStyle": {
|
||||||
|
"navigationBarTextStyle": "black",
|
||||||
|
"navigationBarBackgroundColor": "#FFFFFF", //导航栏背景色
|
||||||
|
"navigationStyle": "custom", //禁用原生导航栏，微信小程序可用
|
||||||
|
"backgroundColor":"#FFFFFF",//下拉显示出来的窗口的背景色
|
||||||
|
"backgroundTextStyle":"light",//下拉 loading 的样式，仅支持 dark / light
|
||||||
|
"transparentTitle":"none",//导航栏整体（前景、背景）透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明
|
||||||
|
"app-plus": {
|
||||||
|
"titleNView": false, //禁用原生导航栏，APP和H5可用
|
||||||
|
"bounce": "none",
|
||||||
|
"scrollIndicator": "none"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"condition" : { //模式配置，仅开发期间生效
|
||||||
|
"current": 0, //当前激活的模式(list 的索引项)
|
||||||
|
"list": [
|
||||||
|
{
|
||||||
|
"name": "", //模式名称
|
||||||
|
"path": "", //启动页面，必选
|
||||||
|
"query": "" //启动参数，在页面的onLoad函数里面得到
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,81 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<swiperTabSlide @scrollBottom="scrollBottomEv" :list="dataList" :ifloading="ifloading"></swiperTabSlide>
|
||||||
|
<!-- 底部tab -->
|
||||||
|
<foot-tab :current="3"></foot-tab>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import swiperTabSlide from '@/components/swiper-tab/swiper-tab-slide.vue';
|
||||||
|
// 底部组件
|
||||||
|
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
'foot-tab' :footTab,
|
||||||
|
swiperTabSlide
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dataList:[
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99},
|
||||||
|
],
|
||||||
|
],
|
||||||
|
ifloading:false,
|
||||||
|
flag:true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
scrollBottomEv(e){
|
||||||
|
if(this.flag){
|
||||||
|
this.flag = false;
|
||||||
|
this.ifloading = true;
|
||||||
|
setTimeout(()=>{
|
||||||
|
for (let i = 0; i < 2; i++) {
|
||||||
|
let obj = {
|
||||||
|
title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99
|
||||||
|
}
|
||||||
|
this.dataList[e].push(obj);
|
||||||
|
}
|
||||||
|
this.ifloading = false;
|
||||||
|
this.flag = true;
|
||||||
|
},1000)
|
||||||
|
// 重新渲染组件
|
||||||
|
this.$forceUpdate();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<template>
|
||||||
|
<view class="pad-x180">
|
||||||
|
<!-- 底部tab -->
|
||||||
|
<foot-tab :current='4'></foot-tab>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 底部组件
|
||||||
|
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||||
|
export default {
|
||||||
|
components:{'foot-tab' :footTab},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-container :ifReturn="false" titlet="首页">
|
||||||
|
<view slot="content">
|
||||||
|
<swiper-tab id="tab" :list="dataList" v-model="current" @changeEv="clickTab"></swiper-tab>
|
||||||
|
<chooseImgOne @chooseEv="chooseEv"></chooseImgOne>
|
||||||
|
</view>
|
||||||
|
</status-container>
|
||||||
|
<!-- 底部tab -->
|
||||||
|
<foot-tab></foot-tab>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
|
||||||
|
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||||
|
import chooseImgOne from '@/components/choose-imgs/choose-img-one.vue';
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
'foot-tab' :footTab,
|
||||||
|
swiperTab,
|
||||||
|
chooseImgOne
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
current:0,
|
||||||
|
dataList:[
|
||||||
|
{title:'标题一'},
|
||||||
|
{title:'标题二标题二'},
|
||||||
|
{title:'标题三'},
|
||||||
|
{title:'标题四'},
|
||||||
|
{title:'标题五'},
|
||||||
|
{title:'标题六标题六标题六'},
|
||||||
|
{title:'标题七'},
|
||||||
|
{title:'标题八'},
|
||||||
|
{title:'标题九'},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// tab点击事件
|
||||||
|
clickTab(index){
|
||||||
|
this.current = index;
|
||||||
|
},
|
||||||
|
// 图片选择事件
|
||||||
|
chooseEv(arr) {
|
||||||
|
console.log(arr,'图片数组');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
page{background-color: #f7f7f7;}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
<template>
|
||||||
|
<view class="pad-x160">
|
||||||
|
<!-- 底部tab -->
|
||||||
|
<foot-tab :current="1"></foot-tab>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 底部组件
|
||||||
|
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
'foot-tab' :footTab
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,213 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-container titlet="我的地址">
|
||||||
|
<view slot="content">
|
||||||
|
<!-- 方式一 start -->
|
||||||
|
<view class="disjbac width100 pad-sx20 bbot" @tap="openPicker">
|
||||||
|
<view>{{region}}</view>
|
||||||
|
<i class="icon icon-next col9" style="font-size: 30rpx;"></i>
|
||||||
|
</view>
|
||||||
|
<addressOne @choseVal="choseValue" :lotusAddressData="lotusAddressData"></addressOne>
|
||||||
|
<!-- 方式一 end -->
|
||||||
|
|
||||||
|
<!-- 方式二 start -->
|
||||||
|
<view class="disjbac width100 pad-sx20 bbot" @tap="chooseRegion">
|
||||||
|
<view>{{region1}}</view>
|
||||||
|
<i class="icon icon-next col9" style="font-size: 30rpx;"></i>
|
||||||
|
</view>
|
||||||
|
<!-- 方式二 end -->
|
||||||
|
|
||||||
|
<!-- 方式三 start -->
|
||||||
|
<view class="disjbac width100 pad-sx20 bbot" @tap="chooseAddress1">
|
||||||
|
<view>{{region2}}</view>
|
||||||
|
<i class="icon icon-next col9" style="font-size: 30rpx;"></i>
|
||||||
|
</view>
|
||||||
|
<!-- 方式三 end -->
|
||||||
|
|
||||||
|
<!-- 方式四 start -->
|
||||||
|
<addressThree :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
|
||||||
|
<h2>点击选择省市区</h2>
|
||||||
|
</addressThree>
|
||||||
|
<view class="disjbac width100 pad-sx20 bbot">
|
||||||
|
<view>{{regionName}}</view>
|
||||||
|
<i class="icon icon-next col9" style="font-size: 30rpx;"></i>
|
||||||
|
</view>
|
||||||
|
<!-- 方式四 end -->
|
||||||
|
|
||||||
|
<!-- 方式五 start -->
|
||||||
|
<view class="disjbac width100 pad-sx20 bbot" @tap="openAddres">
|
||||||
|
<view>默认打开地址</view>
|
||||||
|
<i class="icon icon-next col9" style="font-size: 30rpx;"></i>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac width100 pad-sx20 bbot" @tap="openAddres2">
|
||||||
|
<view>自定义：根据省市区名称打开地址</view>
|
||||||
|
<i class="icon icon-next col9" style="font-size: 30rpx;"></i>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac width100 pad-sx20 bbot" @tap="openAddres3">
|
||||||
|
<view>自定义：根据省市区“code”打开地址</view>
|
||||||
|
<i class="icon icon-next col9" style="font-size: 30rpx;"></i>
|
||||||
|
</view>
|
||||||
|
<textarea v-model="pickerText" cols="30" rows="10"></textarea>
|
||||||
|
<!--
|
||||||
|
mask-bg-color="rgba(0, 229, 238, 0.4)" // 自定义遮罩层背景颜色
|
||||||
|
-->
|
||||||
|
<addressFour ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></addressFour>
|
||||||
|
<!-- 方式五 end -->
|
||||||
|
</view>
|
||||||
|
</status-container>
|
||||||
|
<addressTwo @conceal="conceal" v-if="popup"></addressTwo>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import addressOne from '@/components/choose-address/address-one/address-one.vue';
|
||||||
|
import addressTwo from '@/components/choose-address/address-two/address-two.vue';
|
||||||
|
import addressThree from '@/components/choose-address/address-three/address-three.vue';
|
||||||
|
import addressFour from '@/components/choose-address/address-four/address-four.vue';
|
||||||
|
import yayaMap from '@/jsFile/map/yaya-map.js';
|
||||||
|
import yayaTime from '@/jsFile/time/yaya-time.js';
|
||||||
|
import statusContainer from '@/components/containers/status-container.vue';
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
addressOne,
|
||||||
|
addressTwo,
|
||||||
|
addressThree,
|
||||||
|
addressFour,
|
||||||
|
statusContainer
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
lotusAddressData:{
|
||||||
|
visible:false,
|
||||||
|
provinceName:'',
|
||||||
|
cityName:'',
|
||||||
|
townName:'',
|
||||||
|
},
|
||||||
|
region:'四川省成都市成华区双店路B口',
|
||||||
|
newProvice:'',
|
||||||
|
newCity:'',
|
||||||
|
newDistrict:'',
|
||||||
|
region1:'四川省成都市成华区双店路B口',
|
||||||
|
region2:'请选择地址',
|
||||||
|
popup:false,
|
||||||
|
region3:'请选择地址',
|
||||||
|
region4:[],
|
||||||
|
defaultRegion:['广东省','广州市','番禺区'],
|
||||||
|
defaultRegionCode:'440113',
|
||||||
|
cityPickerValueDefault: [0, 0, 1],
|
||||||
|
pickerText: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getDistrict();
|
||||||
|
yayaMap.getAddressH5();
|
||||||
|
yayaTime.weekDate();
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
regionName(){
|
||||||
|
// 转为字符串
|
||||||
|
return this.region4.map(item=>item.name).join(' ')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 选择地区
|
||||||
|
chooseRegion(){
|
||||||
|
uni.getLocation({
|
||||||
|
type: 'gcj02', //返回可以用于uni.openLocation的经纬度
|
||||||
|
success: (res)=> {
|
||||||
|
const latitude = res.latitude;
|
||||||
|
const longitude = res.longitude;
|
||||||
|
console.log(latitude,longitude,78);
|
||||||
|
uni.chooseLocation({
|
||||||
|
success: (res)=> {
|
||||||
|
console.log(res,81);
|
||||||
|
console.log('位置名称：' + res.name);
|
||||||
|
console.log('详细地址：' + res.address);
|
||||||
|
console.log('纬度：' + res.latitude);
|
||||||
|
console.log('经度：' + res.longitude);
|
||||||
|
this.region1 = `${res.address || ''}${res.name}`
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getDistrict() {
|
||||||
|
uni.getLocation({
|
||||||
|
success:(res)=> {
|
||||||
|
uni.request({
|
||||||
|
url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=B2ABZ-SIDKS-WD2O3-6CJ2U-CDZOT-U3FKF`,
|
||||||
|
header: {
|
||||||
|
'Content-Type':'application/json'
|
||||||
|
},
|
||||||
|
success:(res)=> {
|
||||||
|
console.log('地址数据：',res)
|
||||||
|
this.newProvice = res.data.result.address_component.province
|
||||||
|
this.newCity = res.data.result.address_component.city
|
||||||
|
this.newDistrict = res.data.result.address_component.district
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//打开picker
|
||||||
|
openPicker() {
|
||||||
|
this.lotusAddressData.visible = true;
|
||||||
|
this.lotusAddressData.provinceName = this.newProvice;
|
||||||
|
this.lotusAddressData.cityName = this.newCity;
|
||||||
|
this.lotusAddressData.townName = this.newDistrict;
|
||||||
|
},
|
||||||
|
//回传已选的省市区的值
|
||||||
|
choseValue(res){
|
||||||
|
//res数据源包括已选省市区与省市区code
|
||||||
|
// console.log(res);
|
||||||
|
this.lotusAddressData.visible = res.visible;//visible为显示与关闭组件标识true显示false隐藏
|
||||||
|
//res.isChose = 1省市区已选 res.isChose = 0;未选
|
||||||
|
if(res.isChose){
|
||||||
|
this.lotusAddressData.provinceName = res.province;//省
|
||||||
|
this.lotusAddressData.cityName = res.city;//市
|
||||||
|
this.lotusAddressData.townName = res.town;//区
|
||||||
|
this.region = `${res.province}${res.city}${res.town}`; //region为已选的省市区的值
|
||||||
|
}
|
||||||
|
},
|
||||||
|
chooseAddress1(){
|
||||||
|
this.popup = true;
|
||||||
|
},
|
||||||
|
conceal(param) {
|
||||||
|
// 获取到传过来的 省 市 区 县数据
|
||||||
|
console.log(param);
|
||||||
|
this.region2 = `${param.province}${param.city}${param.area}${param.street}`
|
||||||
|
// 选择完毕后隐藏
|
||||||
|
this.popup = false;
|
||||||
|
},
|
||||||
|
// 获取选择的地区
|
||||||
|
handleGetRegion(region){
|
||||||
|
this.region4 = region
|
||||||
|
},
|
||||||
|
openAddres() {
|
||||||
|
this.cityPickerValueDefault = [0,0,1]
|
||||||
|
this.$refs.simpleAddress.open();
|
||||||
|
},
|
||||||
|
openAddres2() {
|
||||||
|
// 根据 label 获取
|
||||||
|
var index = this.$refs.simpleAddress.queryIndex(['湖北省', '随州市', '曾都区'], 'label');
|
||||||
|
console.log(index);
|
||||||
|
this.cityPickerValueDefault = index.index;
|
||||||
|
this.$refs.simpleAddress.open();
|
||||||
|
},
|
||||||
|
openAddres3() {
|
||||||
|
// 根据value 获取
|
||||||
|
var index = this.$refs.simpleAddress.queryIndex([13, 1302, 130203], 'value');
|
||||||
|
console.log(index);
|
||||||
|
this.cityPickerValueDefault = index.index;
|
||||||
|
this.$refs.simpleAddress.open();
|
||||||
|
},
|
||||||
|
onConfirm(e) {
|
||||||
|
this.pickerText = JSON.stringify(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<custom-editor @getContents="getContents"></custom-editor>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import editor from '@/components/editor/editor.vue';
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
'custom-editor':editor
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 失去焦点时，获取富文本的内容
|
||||||
|
getContents(html){
|
||||||
|
console.log(html,89);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
{
|
||||||
|
"description": "项目配置文件",
|
||||||
|
"packOptions": {
|
||||||
|
"ignore": []
|
||||||
|
},
|
||||||
|
"setting": {
|
||||||
|
"urlCheck": true,
|
||||||
|
"es6": true,
|
||||||
|
"enhance": true,
|
||||||
|
"postcss": true,
|
||||||
|
"preloadBackgroundData": false,
|
||||||
|
"minified": true,
|
||||||
|
"newFeature": false,
|
||||||
|
"coverView": true,
|
||||||
|
"nodeModules": false,
|
||||||
|
"autoAudits": false,
|
||||||
|
"showShadowRootInWxmlPanel": true,
|
||||||
|
"scopeDataCheck": false,
|
||||||
|
"uglifyFileName": false,
|
||||||
|
"checkInvalidKey": true,
|
||||||
|
"checkSiteMap": true,
|
||||||
|
"uploadWithSourceMap": true,
|
||||||
|
"compileHotReLoad": false,
|
||||||
|
"lazyloadPlaceholderEnable": false,
|
||||||
|
"useMultiFrameRuntime": true,
|
||||||
|
"useApiHook": true,
|
||||||
|
"useApiHostProcess": true,
|
||||||
|
"babelSetting": {
|
||||||
|
"ignore": [],
|
||||||
|
"disablePlugins": [],
|
||||||
|
"outputPath": ""
|
||||||
|
},
|
||||||
|
"useIsolateContext": false,
|
||||||
|
"userConfirmedBundleSwitch": false,
|
||||||
|
"packNpmManually": false,
|
||||||
|
"packNpmRelationList": [],
|
||||||
|
"minifyWXSS": true,
|
||||||
|
"disableUseStrict": false,
|
||||||
|
"minifyWXML": true,
|
||||||
|
"showES6CompileOption": false,
|
||||||
|
"useCompilerPlugins": false,
|
||||||
|
"ignoreUploadUnusedFiles": true
|
||||||
|
},
|
||||||
|
"compileType": "miniprogram",
|
||||||
|
"libVersion": "2.22.0",
|
||||||
|
"appid": "wx987dc41899f719e8",
|
||||||
|
"projectname": "%E4%BD%A9%E4%B8%BD%E5%95%86%E5%9F%8E",
|
||||||
|
"debugOptions": {
|
||||||
|
"hidedInDevtools": []
|
||||||
|
},
|
||||||
|
"scripts": {},
|
||||||
|
"staticServerOptions": {
|
||||||
|
"baseURL": "",
|
||||||
|
"servePath": ""
|
||||||
|
},
|
||||||
|
"isGameTourist": false,
|
||||||
|
"condition": {
|
||||||
|
"search": {
|
||||||
|
"list": []
|
||||||
|
},
|
||||||
|
"conversation": {
|
||||||
|
"list": []
|
||||||
|
},
|
||||||
|
"game": {
|
||||||
|
"list": []
|
||||||
|
},
|
||||||
|
"plugin": {
|
||||||
|
"list": []
|
||||||
|
},
|
||||||
|
"gamePlugin": {
|
||||||
|
"list": []
|
||||||
|
},
|
||||||
|
"miniprogram": {
|
||||||
|
"list": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!-- 暂无更多组件参数的使用
|
||||||
|
|
||||||
|
组件一
|
||||||
|
<nothing-page
|
||||||
|
:imgSrc="图片路径可相对、可绝对、可网络"
|
||||||
|
:currentType="0,1,2,..."
|
||||||
|
:content="'-- NO MORE --'"></nothing-page>
|
||||||
|
|
||||||
|
组件二
|
||||||
|
<pitera
|
||||||
|
:textColor="'#999999'"
|
||||||
|
:textStr="'-- NO MORE --'"
|
||||||
|
:textFontSize="'24rpx'"
|
||||||
|
:ifBold="false"
|
||||||
|
:ifCenter="true"
|
||||||
|
:paddingStr="'20rpx'"></pitera>
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 867 B |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 752 B |
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 794 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue