无任何接口对接，本地动态数据（即静态渲染）
commit
cc128219a8
|
|
@ -0,0 +1,48 @@
|
|||
<script>
|
||||
export default {
|
||||
globalData:{
|
||||
projectname:'', // 项目名称
|
||||
lat:'', // 公司地址维度
|
||||
lng:'' ,// 公司地址经度
|
||||
hostapi:'https://www.baidu.com' // 域名配置
|
||||
},
|
||||
// 优先于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: #f4f4f4;}
|
||||
.textc{
|
||||
color: #dd062f;
|
||||
}
|
||||
.backc{
|
||||
background-color: #dd062f;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,418 @@
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* @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 #EEEEEE;}
|
||||
.borbot:last-child{border-bottom: none;}
|
||||
.bbot{border-bottom: 2rpx solid #EEEEEE;}
|
||||
.tbot{border-top: 2rpx solid #EEEEEE;}
|
||||
.borbot-df{border: 2rpx solid #DFDFDF;}
|
||||
.borbot-cc{border: 2rpx solid #CCCCCC;}
|
||||
.bleft {border-left: 2rpx solid #EEEEEE;}
|
||||
.bbt-d9{border-bottom: 2rpx solid #d9d9d9;}
|
||||
|
||||
/* 行高 */
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
/* 圆圈中间一个原点 start */
|
||||
.mo-item {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 100%;
|
||||
border: 2rpx solid #000000;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.active-item{
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 2rpx solid #FF0000;
|
||||
}
|
||||
.active-item::before{
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 100%;
|
||||
background-color: #FF0000;
|
||||
}
|
||||
/* 圆圈中间一个原点 end */
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 3180711 */
|
||||
src: url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.woff2?t=1651830764889') format('woff2'),
|
||||
url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.woff?t=1651830764889') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.ttf?t=1651830764889') format('truetype');
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-del:before {
|
||||
content: "\e718";
|
||||
}
|
||||
|
||||
.icon-cut:before {
|
||||
content: "\e609";
|
||||
}
|
||||
|
||||
.icon-add:before {
|
||||
content: "\e60a";
|
||||
}
|
||||
|
||||
.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-shop-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,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,78 @@
|
|||
<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: '0px'}">
|
||||
<slot name="content"></slot>
|
||||
</view>
|
||||
<view v-if="ifCustomer"><customer-one></customer-one></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import statusNav from '../status-navs/status-nav.vue';
|
||||
import customerOne from '@/components/customer/customer-one';
|
||||
export default {
|
||||
name:"status-container",
|
||||
components:{
|
||||
statusNav,
|
||||
customerOne
|
||||
},
|
||||
props:{
|
||||
ifCustomer:{
|
||||
type:Boolean,
|
||||
default:true
|
||||
},
|
||||
// 是否显示标题
|
||||
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,65 @@
|
|||
<template>
|
||||
<view>
|
||||
<view @tap="lianK" :style="{background:publicColor || '#e00c34',right:nright+'rpx',bottom:nbottom+'rpx'}" :class="isSmall?'smallImg':''" class="fw posir customer-box disjcac">
|
||||
<image src="/static/public/icon-customer.png" style="width: 118rpx;height: 120rpx;" mode="" lazy-load></image>
|
||||
<button class="fon24 posia" style="opacity: 0;top: 0;left: 0;right: 0;bottom: 0;" open-type="contact">客服</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"customer-one",
|
||||
props:{
|
||||
nright:{//距离右边多宽
|
||||
type:Number,
|
||||
default:30
|
||||
},
|
||||
nbottom:{//距离底部多高
|
||||
type:Number,
|
||||
default:170
|
||||
},
|
||||
isSmall:{//是否是大图
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
nid:{//内容id
|
||||
type:String,
|
||||
default:'0'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 主题颜色
|
||||
publicColor() {
|
||||
return 'linear-gradient(to right top,#df0b33 0%,#fe4a69 100%)'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods:{
|
||||
lianK(){
|
||||
// wx.openCustomerServiceChat({
|
||||
// extInfo: {url: `https://work.weixin.qq.com/kfid/kfcb3bba5b57d9a42ba?enc_scene=ENC616HXDjLYNcmsR49PBE75UERg8Ncv3dygpYjfnh3XVvA&scene_param=${uni.getStorageSync('openid')}`},
|
||||
// corpId: 'ww1f86f258d4ff5817',
|
||||
// success(res) {}
|
||||
// })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.smallImg{transform: scale(.8);margin-right: -10rpx;}
|
||||
.customer-box {
|
||||
position: fixed;z-index: 2;
|
||||
width: 135rpx;height: 135rpx;
|
||||
border-radius: 40%;
|
||||
box-shadow: 0rpx 0rpx 10rpx rgba(0,0,0,.5);
|
||||
animation: scale_name 1s linear alternate infinite;
|
||||
}
|
||||
@keyframes scale_name{
|
||||
from{transform: scale(1);}
|
||||
to{transform: scale(1.2);}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<view>
|
||||
<view @tap="lianK" :style="{background:publicColor || '#e00c34',right:nright+'rpx',bottom:nbottom+'rpx'}" :class="isSmall?'smallImg':''" class="fw posir customer-box" style="position: fixed;z-index: 2; width: 120rpx;height: 120rpx;border-radius: 100%;display: flex;justify-content: center;align-items: center;box-shadow: 0rpx 0rpx 20rpx rgba(0,0,0,.22);">
|
||||
<image class="posia" src="/static/public/icon-customer.png" style="width: 50rpx;height: 50rpx;top: 20rpx;" mode="" lazy-load></image>
|
||||
<view class="colf fon20 posia" style="bottom: 20rpx;">在线客服</view>
|
||||
<button class="fon24 posia" style="opacity: 0;top: 0;left: 0;right: 0;bottom: 0;" open-type="contact">客服</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"public-customer",
|
||||
props:{
|
||||
nright:{//距离右边多宽
|
||||
type:Number,
|
||||
default:30
|
||||
},
|
||||
nbottom:{//距离底部多高
|
||||
type:Number,
|
||||
default:260
|
||||
},
|
||||
isSmall:{//是否是大图
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
nid:{//内容id
|
||||
type:String,
|
||||
default:'0'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 主题颜色
|
||||
publicColor() {
|
||||
return this.$store.state.publicColor
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods:{
|
||||
lianK(){
|
||||
// wx.openCustomerServiceChat({
|
||||
// extInfo: {url: `https://work.weixin.qq.com/kfid/kfcb3bba5b57d9a42ba?enc_scene=ENC616HXDjLYNcmsR49PBE75UERg8Ncv3dygpYjfnh3XVvA&scene_param=${uni.getStorageSync('openid')}`},
|
||||
// corpId: 'ww1f86f258d4ff5817',
|
||||
// success(res) {}
|
||||
// })
|
||||
this.$requst.post('user/rand-bind-service').then(res=>{})
|
||||
this.$toolAll.tools.closeTimer()//清空埋点倒计时
|
||||
this.$requst.post('user/record',{type:'other',action:'ask',id:this.nid}).then(res=>{},error=>{})
|
||||
// 调用tools.js中的种植埋点事件
|
||||
this.$toolAll.tools.plantPoint(5);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.smallImg{transform: scale(.8);margin-right: -10rpx;}
|
||||
.customer-box {
|
||||
animation: scale_name 1s linear alternate infinite;
|
||||
}
|
||||
@keyframes scale_name{
|
||||
from{transform: scale(1);}
|
||||
to{transform: scale(1.2);}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,204 @@
|
|||
<template>
|
||||
<view class="foot-box"
|
||||
:style="{
|
||||
background: isGradualChange ? `linear-gradient( to ${direction}, ${colorOne} 0%, ${colorTwo} 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">
|
||||
<view class="item-image-box disjcac" :class="current*1===index ? 'activeImg' : 'moImg'">
|
||||
<view class="item-spot disjcac fon24" v-if="index==2 && num*1">{{num}}</view>
|
||||
<image :class="isIcon==index ? 'bulge' : ''" :style="{width:[39,41,39,32][index]+'rpx',height:[40,41,38,38][index]+'rpx'}" :src="current == index ? item.selectedIconPath : item.iconPath" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="clips1 fon24" :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'
|
||||
},
|
||||
// 点的数量
|
||||
num: {
|
||||
type:String,
|
||||
default:'10'
|
||||
},
|
||||
// 默认哪个图标突出
|
||||
isIcon:{
|
||||
type:String,
|
||||
default:'-1'
|
||||
},
|
||||
// 底部导航背景图片
|
||||
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:'top'
|
||||
},
|
||||
// 第一种颜色
|
||||
colorOne:{
|
||||
type:String,
|
||||
default:'#ff3574'
|
||||
},
|
||||
// 第二种颜色
|
||||
colorTwo:{
|
||||
type:String,
|
||||
default:'#fd5745'
|
||||
},
|
||||
// 阴影大小0~1之间 0表示没有阴影
|
||||
boxShadowNum:{
|
||||
type:String,
|
||||
default:'0.1'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ifCustomerService:false,//是否存在客服 默认不存在客服
|
||||
footList:[
|
||||
{
|
||||
iconPath: "/static/tabbar/icon-home.png",
|
||||
selectedIconPath: "/static/tabbar/icon-home.png",
|
||||
title:'首页'
|
||||
},
|
||||
{
|
||||
iconPath: "/static/tabbar/icon-cate.png",
|
||||
selectedIconPath: "/static/tabbar/icon-cate.png",
|
||||
title:'分类'
|
||||
},
|
||||
{
|
||||
iconPath: "/static/tabbar/icon-cart.png",
|
||||
selectedIconPath: "/static/tabbar/icon-cart.png",
|
||||
title:'购物车'
|
||||
},
|
||||
{
|
||||
iconPath: "/static/tabbar/icon-my.png",
|
||||
selectedIconPath: "/static/tabbar/icon-my.png",
|
||||
title:'我的'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// 缓存状态栏+标题栏的高度
|
||||
const query = wx.createSelectorQuery().in(this)
|
||||
query.select('.foot-box').boundingClientRect((rect) => {
|
||||
this.$store.commit('footHeightEv',rect.height);
|
||||
}).exec()
|
||||
},
|
||||
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/cate/cate'})
|
||||
break;
|
||||
case 2:
|
||||
uni.reLaunch({url:'/pages/tabbar/cart/cart'})
|
||||
break;
|
||||
case 3:
|
||||
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: 130rpx;
|
||||
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%;
|
||||
}
|
||||
.item-image-box{
|
||||
position: relative;
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
.activeImg {
|
||||
background-color: #dd062f;
|
||||
}
|
||||
.moImg {
|
||||
background-color: transparent;
|
||||
}
|
||||
.item-box .clips1{
|
||||
margin-top: 10rpx;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
.item-spot {
|
||||
position: absolute;
|
||||
right: -14rpx;
|
||||
top: -4rpx;
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
border-radius: 100%;
|
||||
background-color: #FFFFFF;
|
||||
color: #e4143b;
|
||||
}
|
||||
/* 字体默认样式 */
|
||||
.defaultclass {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
/* 字体选中样式 */
|
||||
.activeclass {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
/* 凸出样式 */
|
||||
.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,82 @@
|
|||
<template>
|
||||
<view>
|
||||
<block v-for="(item,index) in list" :key="index">
|
||||
<view @tap="chooseEv(item.url,index)" class="disjbac fon28" :class="[ifLastLine ? 'bbot' : 'borbot',ifIcon ? 'pad-sx25' : 'pad-sx25']" :style="{borderBottomColor: ifLine ? linec : '#FFFFFF'}">
|
||||
<view class="disac flexs pad-y40">
|
||||
<image class="mar-y20 flexs" v-if="item.iconsrc && ifIcon" :src="item.iconsrc" mode="aspectFill" lazy-load :style="{width:item.iconWidth+'rpx',height:item.iconHeight+'rpx'}"></image>
|
||||
<view :style="{color:titlec,fontSize: fonts+'rpx'}" class="clips1">{{item.title}}</view>
|
||||
</view>
|
||||
<view class="disac">
|
||||
<view v-if="item.content" class="clips1" :style="{color:item.contentColor}">{{item.content}}</view>
|
||||
<i v-if="item.ifNext" class="icon icon-next" style="color: #999999;font-size: 28rpx;margin-left: 10rpx;"></i>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'column-function',
|
||||
props:{
|
||||
list:{
|
||||
type:Array,
|
||||
default:()=>{
|
||||
return [
|
||||
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题一',content:'',contentColor:'#999999',ifNext:true},
|
||||
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题二',content:'',contentColor:'#999999',ifNext:true},
|
||||
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题三',content:'',contentColor:'#999999',ifNext:true},
|
||||
]
|
||||
}
|
||||
},
|
||||
// 标题颜色
|
||||
titlec:{
|
||||
type:String,
|
||||
default:'#000000'
|
||||
},
|
||||
// 是否显示左侧图标
|
||||
ifIcon:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
// 是否显示下划线
|
||||
ifLine:{
|
||||
type:Boolean,
|
||||
default:true
|
||||
},
|
||||
// 下划线颜色
|
||||
linec:{
|
||||
type:String,
|
||||
default:"#EEEEEE"
|
||||
},
|
||||
// 是否显示最后一条下划线
|
||||
ifLastLine:{
|
||||
type:Boolean,
|
||||
default:true
|
||||
},
|
||||
fonts:{
|
||||
type:String,
|
||||
default:'28rpx'
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 列表选择事件
|
||||
chooseEv(url,index) {
|
||||
// if(url) {
|
||||
// uni.navigateTo({url})
|
||||
// }
|
||||
// 抛出事件
|
||||
this.$emit('chooseEv',{url,index})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
第一步：引入组件
|
||||
|
||||
import columnFunction from '@/components/function-list/column/column-function.vue';
|
||||
|
||||
第二步：注册组件
|
||||
|
||||
export default {
|
||||
components:{
|
||||
columnFunction
|
||||
}
|
||||
}
|
||||
|
||||
第三步：使用组件
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<column-function @chooseEv="chooseEv"></column-function>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
参数说明
|
||||
|
||||
list：列表数据，默认以下数组：
|
||||
[
|
||||
{iconsrc:'',iconWidth:60,iconHeight:60,title:'标题一',content:'',contentColor:'#999999',ifNext:true},
|
||||
{iconsrc:'',iconWidth:60,iconHeight:60,title:'标题二',content:'',contentColor:'#999999',ifNext:true},
|
||||
{iconsrc:'',iconWidth:60,iconHeight:60,title:'标题三',content:'',contentColor:'#999999',ifNext:true},
|
||||
]
|
||||
titlec：标题颜色，默认#000000
|
||||
ifIcon：是否显示左侧图标，默认false
|
||||
ifLine：是否显示下划线，默认true
|
||||
linec：下划线颜色，默认#EEEEEE
|
||||
ifLastLine：是否显示最后一条下划线，默认true
|
||||
|
||||
方法使用
|
||||
|
||||
export default {
|
||||
methods:{
|
||||
chooseEv(obj) {
|
||||
console.log(obj);
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<template>
|
||||
<view class="disac fw" :style="{paddingBottom:itemTop,backgroundColor: backc}">
|
||||
<block v-for="(item,index) in list" :key="index">
|
||||
<view @tap="chooseGe(item.url,index)" class="disjcac fc pad-s30" :style="{width:['50%','50%','50%','33.3%','25%','20%'][rowNum],paddingTop:itemTop}">
|
||||
<view class="disjcac icon-box" :style="{width:iconwh,height:iconwh}" :class="ifShadow ? 'haveShadow' : ''">
|
||||
<image :src="item.iconsrc" mode="aspectFill" :style="{width: item.iconWidth +'rpx',height: item.iconHeight +'rpx'}"></image>
|
||||
</view>
|
||||
<view class="clips1" :style="{color:titlec,fontSize:fonts,marginTop:titleTop}">{{item.title}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'column-function',
|
||||
props:{
|
||||
list:{
|
||||
type:Array,
|
||||
default:()=>{
|
||||
return [
|
||||
{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题一'},
|
||||
{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题二'},
|
||||
{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题三'},
|
||||
{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题四'},
|
||||
{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题五'},
|
||||
{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题五'},
|
||||
{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题五'},
|
||||
]
|
||||
}
|
||||
},
|
||||
ifShadow:{
|
||||
type:Boolean,
|
||||
default:true
|
||||
},
|
||||
// 背景颜色
|
||||
backc:{
|
||||
type:String,
|
||||
default:'transparent'
|
||||
},
|
||||
// 一排显示数量
|
||||
rowNum:{
|
||||
type:String,
|
||||
default:'5'
|
||||
},
|
||||
// 标题颜色
|
||||
titlec:{
|
||||
type:String,
|
||||
default:'#000000'
|
||||
},
|
||||
// 字体大小
|
||||
fonts:{
|
||||
type:String,
|
||||
default:'24rpx'
|
||||
},
|
||||
// 字体距离图标的距离
|
||||
titleTop:{
|
||||
type:String,
|
||||
default:'20rpx'
|
||||
},
|
||||
// item的顶部距离
|
||||
itemTop:{
|
||||
type:String,
|
||||
default:'30rpx'
|
||||
},
|
||||
// iconbox宽高
|
||||
iconwh:{
|
||||
type:String,
|
||||
default:'110rpx'
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
// 找图标高度最大值
|
||||
maxHeight() {
|
||||
let arr = [];
|
||||
this.list.forEach(item=>{arr.push(item.iconHeight);})
|
||||
let max = arr.reduce((a,b)=>{return b > a ? b : a})
|
||||
return max;
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
// 列表选择事件
|
||||
chooseGe(url,index) {
|
||||
// 抛出事件
|
||||
this.$emit('chooseGe',{url,index})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.icon-box{
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
border-radius: 42%;
|
||||
|
||||
}
|
||||
.haveShadow{
|
||||
background: linear-gradient(to top,#ff3574 0%,#fd5648 100%);
|
||||
box-shadow: 0rpx 10rpx 10rpx rgba(255, 53, 116, 0.6);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
第一步：引入组件
|
||||
|
||||
import gongGeFunction from '@/components/function-list/gong-ge/gong-ge-function.vue';
|
||||
|
||||
第二步：注册组件
|
||||
|
||||
export default {
|
||||
components:{
|
||||
gongGeFunction
|
||||
}
|
||||
}
|
||||
|
||||
第三步：使用组件
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<gong-ge-function @chooseGe="chooseGe"></gong-ge-function>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
参数说明
|
||||
|
||||
list：列表数据，默认以下数组：
|
||||
[
|
||||
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题一'},
|
||||
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题二'},
|
||||
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题三'},
|
||||
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题四'},
|
||||
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题五'},
|
||||
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题五'},
|
||||
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题五'},
|
||||
]
|
||||
rowNum：一排显示数量，默认5
|
||||
titlec：标题颜色，默认#000000
|
||||
fonts：字体大小，默认28rpx
|
||||
titleTop：字体距离图标的距离，默认20rpx
|
||||
itemTop：item的顶部距离，默认30rpx
|
||||
|
||||
方法使用
|
||||
|
||||
export default {
|
||||
methods:{
|
||||
chooseGe(obj) {
|
||||
console.log(obj);
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="fon36 colb bold mar-x40" v-if="ifTitle">{{title}}</view>
|
||||
<view class="disjbac fw">
|
||||
<view class="width48_5 fon30 mar-x30" @tap="goDetail(index)" v-for="(item,index) in dataList" :key="index">
|
||||
<view class="" style="height: 342rpx;">
|
||||
<image class="radius30 width100" :src="item.imgsrc" mode="aspectFill" style="height: 342rpx;"></image>
|
||||
</view>
|
||||
<view class="pad-zy20">
|
||||
<view class="line-h50 mar-sx25 clips2" style="height: 90rpx;">{{item.title}}</view>
|
||||
<view class="textc disjbac">
|
||||
<view class="">￥{{item.price}}</view>
|
||||
<i @tap.stop="addCartEv(index)" class="icon icon-shop-cart" style="font-size: 40rpx;"></i>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"list-one",
|
||||
props:{
|
||||
// 是否显示标题
|
||||
ifTitle:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
// 标题内容
|
||||
title:{
|
||||
type:String,
|
||||
default:'热门推荐'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataList:[
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖入海盐太妃糖入海盐太妃糖入海盐太妃糖入海盐太妃糖',price:'2,000'},
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
|
||||
]
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
// 加入购物车
|
||||
addCartEv(id) {
|
||||
this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)')
|
||||
},
|
||||
// 去详情
|
||||
goDetail(id) {
|
||||
uni.navigateTo({
|
||||
url:'/pagesB/shop-detail/shop-detail'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -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,411 @@
|
|||
<template>
|
||||
<view class="pad-x120">
|
||||
<view class="slide-box mar-x20 animated" v-for="(item, index) in listData" :key="index" :class="item.ifExit ? 'fadeInUp' : 'fadeOutDown'" :style="{display: item.ifShow ? 'flex' : 'none'}">
|
||||
<view class="slide-list"
|
||||
@touchstart="touchStart($event, index)"
|
||||
@touchend="touchEnd($event, index)"
|
||||
@touchmove="touchMove($event, index)"
|
||||
@tap="recover(index)"
|
||||
:style="{ transform: 'translate3d(' + item.slide_x + 'px, 0, 0)' }">
|
||||
<view class="now-message-info" :style="{ width: windowWidth + 'px' }" @click="clickItemMethod(item)">
|
||||
<!-- <view class="mo-item flexs" @tap.stop="chooseEv(index)" :class="item.ifcheck ? 'active-item' : ''"></view> -->
|
||||
<label class="radio"><radio :checked="item.ifcheck" color="#ff3673" style="transform: scale(.8);"/></label>
|
||||
<view class="shopp-img imgH mar-y20 mar-z10" @tap.stop="chooseEv(index)">
|
||||
<image class="shopp-img imgH width100" :src="item.image" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="imgH disjb fc fon24 width100">
|
||||
<view class="">
|
||||
<view class="fon28 bold clips2">{{item.title}}</view>
|
||||
<view class="clips2 line-h40">单位：{{item.content}}</view>
|
||||
</view>
|
||||
<view class="disjbac">
|
||||
<!-- 商品价格 -->
|
||||
<view class="fon24 textc bold">￥<span class="fon28 ">{{$toolAll.tools.changeNum(item.price)}}</span></view>
|
||||
<!-- 商品数量 -->
|
||||
<view class="disac">
|
||||
<!-- 减数量 -->
|
||||
<i class="icon icon-cut countBtn disjcac" @tap.stop="addCutEv(index,0)" :style="{backgroundColor: item.num==minNum || item.slide_x!=0 ? '#cccccc' : '#ff3673'}"></i>
|
||||
<!-- 实际数量 -->
|
||||
<input type="digit" @blur="blurEv(index,$event)" @focus="focusEv(item.num)" class="fon24 tcenter countInput borbot-cc" :disabled="item.slide_x!=0" v-model="item.num">
|
||||
<!-- 加数量 -->
|
||||
<i class="icon icon-add countBtn disjcac" @tap.stop="addCutEv(index,1)" :style="{backgroundColor: item.num==maxNum || item.slide_x!=0 ? '#cccccc' : '#ff3673'}"></i>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group-btn">
|
||||
<view class="btn-div" v-for="(value, key) in button" :key="key"
|
||||
@tap.stop="clickMethod(item, value, index,key)" :style="{background: value.background}">
|
||||
{{value.title}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部导航 -->
|
||||
<view class="disjbac cart-foot-box fon24" :style="{bottom: footHeight+'px'}">
|
||||
<label class="disac" @tap="chooseAll"><radio :checked="allChoose" color="#ff3673" style="transform: scale(.8);"/><text>全选</text></label>
|
||||
<view class="disac">
|
||||
<view class="fon24 mar-y30">合计：<span>￥{{$toolAll.tools.changeNum(allPrice)}}</span></view>
|
||||
<view class="fon32 cart-submit-btn" :style="{background: !buyNum ? '#cccccc' : 'linear-gradient(to right,#ff3771 0%,#fd5549 100%)'}" @tap="submitEv">{{allPrice==0 ? '去购物' : `提交订单 (${buyNum})`}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<nothing-page v-if="!ifLoading && !listData.length" content="你的购物车：这也空空，那也空空(*^▽^*)"></nothing-page>
|
||||
<pitera textStr="——到底啦——"></pitera>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters,mapMutations } from 'vuex'//引入mapState
|
||||
import pitera from '@/components/nothing/pitera';
|
||||
export default {
|
||||
components:{
|
||||
pitera
|
||||
},
|
||||
name: 'mark-slide-list',
|
||||
props: {
|
||||
list: { //数据list
|
||||
type: Array,
|
||||
default () {
|
||||
return [
|
||||
{id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||||
{id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||||
{id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||||
{id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||||
{id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||||
{id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||||
];
|
||||
}
|
||||
},
|
||||
button: { //按钮数据list
|
||||
type: Array,
|
||||
default () {
|
||||
return [
|
||||
// {title: '分享',background: '#c4c7cd'},
|
||||
{title: '删除',background: 'linear-gradient(to right,#ff3771 0%,#fd5549 100%)'}
|
||||
];
|
||||
}
|
||||
},
|
||||
customB:{
|
||||
type:String,
|
||||
default:'0'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
windowWidth() {
|
||||
return uni.getSystemInfoSync().windowWidth;
|
||||
},
|
||||
// 总价及合计
|
||||
allPrice() {
|
||||
let allPrice = 0;
|
||||
this.listData.forEach(item=>{
|
||||
if(item.ifcheck) {
|
||||
allPrice += this.$toolAll.tools.operationEv(item.price,item.num,'*',2)*1;
|
||||
}
|
||||
})
|
||||
// return this.$toolAll.tools.addXiaoShu(allPrice);
|
||||
return allPrice.toString();
|
||||
},
|
||||
// 要删除的数量
|
||||
buyNum() {
|
||||
let buyNum = 0;
|
||||
this.listData.forEach(item=>{
|
||||
if(item.ifcheck) {
|
||||
buyNum += 1;
|
||||
}
|
||||
})
|
||||
return buyNum;
|
||||
},
|
||||
// 全选
|
||||
allChoose() {
|
||||
let ifAll = false;
|
||||
if(this.listData.length) {
|
||||
let temparr = this.listData.filter(item=>{return item.ifcheck==false})
|
||||
temparr.length==0 ? ifAll = true : ifAll = false;
|
||||
}
|
||||
return ifAll
|
||||
},
|
||||
...mapState({
|
||||
footHeight: state => state.moduleA.footHeight,
|
||||
}),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
listData: [],
|
||||
start_slide_x: 0,
|
||||
btnWidth: 0,
|
||||
startX: 0,
|
||||
LastX: 0,
|
||||
startTime: 0,
|
||||
itemIndex: 0,
|
||||
originalNum:0,//当前输入框原值
|
||||
maxNum:20,//最大可输入数量
|
||||
minNum:1,//最小可输入数量
|
||||
ifLoading:true,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.listData = this.list;
|
||||
this.ifLoading = false;
|
||||
},
|
||||
methods: {
|
||||
getList(){
|
||||
// for (let i = 0; i < 10; i++) {
|
||||
// this.listData.push({id: 1,image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title: '标题',content: '描述描述描述描述描述描述',slide_x: 0,price:199,num:1,ifcheck:false,ifExit:true,ifShow:true})
|
||||
// }
|
||||
},
|
||||
// 全选事件
|
||||
chooseAll(){
|
||||
let exit = this.listData.filter(item=>item.ifcheck==false);
|
||||
if(exit.length){
|
||||
this.listData.forEach(item=>item.ifcheck = true);
|
||||
} else {
|
||||
this.listData.forEach(item=>{item.ifcheck = false});
|
||||
}
|
||||
},
|
||||
// 去购物、去结算、删除
|
||||
submitEv(){
|
||||
if(this.allPrice==0) {
|
||||
// 去购物
|
||||
console.log('去购物');
|
||||
} else {
|
||||
// 去结算
|
||||
console.log('去结算');
|
||||
uni.navigateTo({
|
||||
url:'/pagesB/settlement/settlement'
|
||||
})
|
||||
}
|
||||
},
|
||||
// 选中事件
|
||||
chooseEv(index) {
|
||||
this.listData[index].ifcheck = !this.listData[index].ifcheck;
|
||||
},
|
||||
// 去商品详情事件
|
||||
goDetail(id) {
|
||||
uni.navigateTo({
|
||||
url:'/pagesB/shop-detail/shop-detail'
|
||||
})
|
||||
},
|
||||
// 数量加减事件
|
||||
addCutEv(index,num) {
|
||||
if(this.listData[index].slide_x==0){
|
||||
if(num) {
|
||||
// 加 ，如果当前商品数量不等于最大值
|
||||
if(this.listData[index].num != this.maxNum) {
|
||||
this.listData[index].num++;
|
||||
}
|
||||
} else {
|
||||
// 减 ，如果当前商品数量大于最小值
|
||||
if(this.listData[index].num > this.minNum) {
|
||||
this.listData[index].num--;
|
||||
}
|
||||
}
|
||||
console.log(this.allPrice,'总价');
|
||||
}
|
||||
},
|
||||
// 输入框获取焦点事件
|
||||
focusEv(num) {
|
||||
// 储存当前商品的原始数值
|
||||
this.originalNum = num;
|
||||
},
|
||||
// 输入框失去焦点事件
|
||||
blurEv(index,e) {
|
||||
// 失去焦点时，获取当前输入框里的数值
|
||||
let currentNum = e.detail.value*1;
|
||||
// 如果当前输入框的值不等于0或空，并且当前输入框的值大于最大值，当前商品的数量 = 最大值， 否则为当前输入框输入的值
|
||||
this.listData[index].num = currentNum ? currentNum > this.maxNum ? this.maxNum : currentNum : this.originalNum;
|
||||
},
|
||||
clone(data) {
|
||||
const type = typeof data
|
||||
let obj;
|
||||
if (type === 'array') {
|
||||
obj = [];
|
||||
} else if (type === 'object') {
|
||||
obj = {};
|
||||
} else {
|
||||
// 不再具有下一层次
|
||||
return data;
|
||||
}
|
||||
if (type === 'array') {
|
||||
for (let i = 0, len = data.length; i < len; i++) {
|
||||
obj.push(this.clone(data[i]));
|
||||
}
|
||||
} else if (type === 'object') {
|
||||
// 对原型上的方法也拷贝了....
|
||||
for (const key in data) {
|
||||
obj[key] = this.clone(data[key]);
|
||||
}
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
|
||||
// 滑动开始
|
||||
touchStart(e, index) {
|
||||
if (this.itemIndex == index) {
|
||||
this.itemIndex = index
|
||||
}
|
||||
//记录手指放上去的时间
|
||||
this.startTime = e.timeStamp;
|
||||
//记录滑块的初始位置
|
||||
this.start_slide_x = this.listData[index].slide_x;
|
||||
// 按钮宽度
|
||||
//#ifdef MP-WEIXIN
|
||||
uni.createSelectorQuery().in(this).selectAll('.group-btn').boundingClientRect(res => {
|
||||
if (res != null) {
|
||||
this.btnWidth = res[index].width * -1;
|
||||
}
|
||||
}).exec();
|
||||
//#endif
|
||||
//#ifdef H5 || APP-PLUS
|
||||
uni.createSelectorQuery()
|
||||
.selectAll('.group-btn')
|
||||
.boundingClientRect()
|
||||
.exec(res => {
|
||||
if (res[0] != null) {
|
||||
this.btnWidth = res[0][index].width * -1;
|
||||
}
|
||||
});
|
||||
//#endif
|
||||
// 记录上一次开始时手指所处位置
|
||||
this.startX = e.touches[0].pageX;
|
||||
// 记录上一次手指位置
|
||||
this.lastX = this.startX;
|
||||
//初始化非当前滑动消息列的位置
|
||||
for (var i in this.listData) {
|
||||
if (index != i) {
|
||||
this.listData[i].slide_x = 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 滑动中
|
||||
touchMove(e, index) {
|
||||
const endX = e.touches[0].pageX;
|
||||
const distance = endX - this.lastX;
|
||||
// 预测滑块所处位置
|
||||
const duang = this.listData[index].slide_x + distance;
|
||||
// 如果在可行区域内
|
||||
if (duang <= 0 && duang >= this.btnWidth) {
|
||||
this.listData[index].slide_x = duang;
|
||||
}
|
||||
// 此处手指所处位置将成为下次手指移动时的上一次位置
|
||||
this.lastX = endX;
|
||||
},
|
||||
// 滑动结束
|
||||
touchEnd(e, index) {
|
||||
let distance = 10;
|
||||
const endTime = e.timeStamp;
|
||||
const x_end_distance = this.startX - this.lastX;
|
||||
if (Math.abs(endTime - this.startTime) > 200) {
|
||||
distance = this.btnWidth / -2;
|
||||
}
|
||||
// 判断手指最终位置与手指开始位置的位置差距
|
||||
if (x_end_distance > distance) {
|
||||
this.listData[index].slide_x = this.btnWidth;
|
||||
} else if (x_end_distance < distance * -1) {
|
||||
this.listData[index].slide_x = 0;
|
||||
} else {
|
||||
this.listData[index].slide_x = this.start_slide_x;
|
||||
}
|
||||
},
|
||||
// 点击回复原状
|
||||
recover(index) {
|
||||
this.listData[index].slide_x = 0;
|
||||
},
|
||||
/**
|
||||
* 点击按钮触发事件
|
||||
* @param {Object} item 列表数据
|
||||
* @param {Object} buttonItem 按钮数据
|
||||
* @param {Object} index 列表数据key
|
||||
*/
|
||||
clickMethod(item, buttonItem, index,key) {
|
||||
// this.$emit("change", item, buttonItem, index);
|
||||
// if(key) {
|
||||
// 进入删除
|
||||
// 修改为不存在的商品
|
||||
this.listData[index].ifExit = false;
|
||||
// 修改该商品不被选中
|
||||
this.listData[index].ifcheck = false;
|
||||
setTimeout(()=>{
|
||||
// 隐藏该商品
|
||||
this.listData[index].ifShow = false;
|
||||
},1000)
|
||||
setTimeout(()=>{
|
||||
// 重构数组列表，去除不存在的商品
|
||||
this.listData = this.listData.filter(item=>item.ifExit==true);
|
||||
},1000)
|
||||
// }
|
||||
},
|
||||
/**
|
||||
* 点击按钮触发事件
|
||||
* @param {Object} item 列表数据
|
||||
*/
|
||||
clickItemMethod(item) {
|
||||
this.$emit("click", item)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.slide-box {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
/* border-radius: 10rpx; */
|
||||
}
|
||||
.slide-list {
|
||||
transition: all 100ms;
|
||||
transition-timing-function: ease-out;
|
||||
min-width: 200%;
|
||||
}
|
||||
|
||||
.now-message-info {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
clear: both;
|
||||
padding: 20rpx;
|
||||
background: #ffffff;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.imgH{height: 180rpx;}
|
||||
.shopp-img{width: 180rpx;border-radius: 10rpx;}
|
||||
|
||||
.group-btn {
|
||||
float: left;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 220rpx;
|
||||
min-width: 100rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-div {
|
||||
height: 220rpx;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 0 50rpx;
|
||||
font-size: 34rpx;
|
||||
line-height: 220rpx;
|
||||
}
|
||||
|
||||
.top {
|
||||
background-color: #c4c7cd;
|
||||
}
|
||||
|
||||
.removeM {
|
||||
background-color: #ff3b32;
|
||||
}
|
||||
.countBtn{font-size: 36rpx;width: 40rpx;height: 40rpx;background-color: #000000;color: #FFFFFF; border-radius: 10rpx;}
|
||||
.countInput{background-color: #FFFFFF;width: 80rpx;height: 40rpx!important; border-radius: 10rpx;padding: 0rpx 0;margin: 0 10rpx;}
|
||||
.cart-foot-box{position: fixed;bottom: 0;right: 0;left: 0;background-color: #FFFFFF; padding: 20rpx 20rpx;box-shadow: -6rpx 0rpx 10rpx rgba(0, 0, 0, 0);}
|
||||
.cart-submit-btn{
|
||||
|
||||
color: #FFFFFF;
|
||||
background-color: #cccccc;
|
||||
padding: 20rpx 30rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
|
||||
.shopping-manage{position: fixed;right: 20rpx;bottom: 320rpx;width: 80rpx;height: 80rpx; border-radius: 100%;background-color: rgba(0, 0, 0, .6);color: #FFFFFF;font-size: 24rpx;display: flex;justify-content: center;align-items: center;}
|
||||
</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:'50px'
|
||||
},
|
||||
//是否显示返回键
|
||||
ifReturn:{
|
||||
type:Boolean,
|
||||
default:true
|
||||
},
|
||||
// 返回键颜色
|
||||
returnColor: {
|
||||
type:String,
|
||||
default:'#000000'
|
||||
},
|
||||
//是否显示标题
|
||||
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,176 @@
|
|||
<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
|
||||
lineWidth = el.width;
|
||||
// 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: transparent;
|
||||
.tab {
|
||||
position: relative;
|
||||
display: flex;
|
||||
font-size: 30rpx;
|
||||
height: 64rpx;
|
||||
// padding-bottom: 15rpx;
|
||||
white-space: nowrap;
|
||||
&__item {
|
||||
// flex: 1;
|
||||
// width: 20%;
|
||||
padding: 0 20rpx;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
line-height: 64rpx;
|
||||
color: #333333;
|
||||
margin-right: 20rpx;
|
||||
&--active {
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
&-title {
|
||||
margin: 0 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab__line {
|
||||
display: block;
|
||||
// height: 6rpx;
|
||||
position: absolute;
|
||||
height: 64rpx;
|
||||
bottom: 0rpx;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
// border-radius: 6rpx;
|
||||
background: #ff3673;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="posi-sticky pad-x20 pad-zy20" :style="{top: newTop +'px'}">
|
||||
<!-- <scrollTextSlide @changeEv="tabTap" :list="tagList" :activeIndex="activeIndex"></scrollTextSlide> -->
|
||||
<swiper-tab-jl :list="tagList" v-model="activeIndex" @changeEv="tabTap" itemColor="#FFFFFF"></swiper-tab-jl>
|
||||
</view>
|
||||
<swiper :style="{height: swiperHeight + 'px'}" class="fon30" style="background-color: #f4f4f4;" :current="activeIndex" @change="swiperChange">
|
||||
<swiper-item v-for="(item,index) in list.length" :key="index" class="pad-s30">
|
||||
<scroll-view scroll-y @scrolltolower="scrollBottomEv" style="height: 100%;">
|
||||
<!-- 列表数据 -->
|
||||
<view class="radius20 bacf pad-zy30 mar-x25 mar-zy40" @tap="goDetail" v-for="(item1,index1) in list[index]" :key="index1">
|
||||
<view class="disjbac bbot pad30" style="margin: 0 -30rpx;">
|
||||
<view class="">订单号：2928392832</view>
|
||||
<view class="" :style="{color: ['#f83030','#f83030','#f83030','#a0a0a0','#a0a0a0'][0]}">{{['已下单','制作中','已发货','已完成','已取消'][0]}}</view>
|
||||
</view>
|
||||
<view class="disjb borbot pad-sx30" v-for="(item2,index2) in 2" :key="index2">
|
||||
<image class="mar-y30 flexs radius40" src="https://s6.jpg.cm/2022/05/06/Lx4T45.jpg" mode="" style="width: 210rpx;height: 210rpx;"></image>
|
||||
<view class="width100 disjb fc" style="height: 210rpx;">
|
||||
<view class="clips2 fon24">{{item1.title}}</view>
|
||||
<view class="">
|
||||
<view class="fon24 mar-x30" style="color: #8c8c9b;">单位：{{item1.title}}</view>
|
||||
<view class="disjbac ">
|
||||
<view class="textc bold">￥{{$toolAll.tools.changeNum(item1.price)}}</view>
|
||||
<view class="fon24" style="color: #8c8c9b;">x1</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="disjbac tbot pad30" style="margin: 0 -30rpx;">
|
||||
<view class="bold" style="color: #f83030;">合计：￥2390.00</view>
|
||||
<!-- <view class="btn" @tap.stop="cancleEv">取消订单</view> -->
|
||||
<view class="btn csbtn" @tap.stop="buyEv">再次购买</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>
|
||||
<view class="pad-sx40"><pitera textStr="——到底啦——"></pitera></view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import scrollTextSlide from '@/components/scroll-views/scroll-text-slide.vue';
|
||||
import swiperTabJl from '@/components/swiper-tab/swiper-tab-jl.vue';
|
||||
import pitera from '@/components/nothing/pitera';
|
||||
export default {
|
||||
name:"swiper-tab-slide",
|
||||
components:{
|
||||
// scrollTextSlide,
|
||||
swiperTabJl,
|
||||
pitera
|
||||
},
|
||||
props:{
|
||||
ifloading:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
tagList:{
|
||||
type:Array,
|
||||
default:()=>{
|
||||
return ['全部','男士外套','女士','孩童短裤','中年棉衣','老年']
|
||||
}
|
||||
},
|
||||
tagIndex:{
|
||||
type:String,
|
||||
default:'0'
|
||||
},
|
||||
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,
|
||||
newTop:uni.getSystemInfoSync().statusBarHeight + 50
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// 缓存状态栏+标题栏的高度
|
||||
const query = wx.createSelectorQuery().in(this)
|
||||
query.select('.posi-sticky').boundingClientRect((rect) => {
|
||||
console.log(rect.height);
|
||||
this.swiperHeight = this.swiperHeight - this.newTop - rect.height;
|
||||
}).exec()
|
||||
this.activeIndex = this.tagIndex*1;
|
||||
},
|
||||
methods:{
|
||||
tabTap(e) {
|
||||
this.activeIndex = e;
|
||||
},
|
||||
swiperChange(e) {
|
||||
this.activeIndex = e.detail.current;
|
||||
},
|
||||
scrollBottomEv(e) {
|
||||
this.$emit('scrollBottom',this.activeIndex)
|
||||
},
|
||||
// 去详情
|
||||
goDetail(){
|
||||
uni.navigateTo({
|
||||
url:'/pagesB/order-detail/order-detail'
|
||||
})
|
||||
},
|
||||
// 取消订单
|
||||
cancleEv(){
|
||||
console.log('取消订单');
|
||||
},
|
||||
// 再次购买
|
||||
buyEv(){
|
||||
uni.navigateTo({
|
||||
url:'/pagesB/settlement/settlement'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.btn{
|
||||
width: 150rpx;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
color: #8c8c9b;
|
||||
border: 2rpx solid #d3d3d3;
|
||||
border-radius: 20rpx;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.csbtn{
|
||||
border: none;
|
||||
background: linear-gradient(to right,#ff3772 0%,#fd5549 100%);
|
||||
color: #FFFFFF;
|
||||
box-shadow: 0rpx 6rpx 10rpx rgba(255, 55, 114, .3);
|
||||
}
|
||||
</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,139 @@
|
|||
<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="item-dot" :style="{backgroundColor: bcurrent==indexd ? activec : defaultc}"
|
||||
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
|
||||
},
|
||||
activec:{
|
||||
type:String,
|
||||
default:'#dd062f'
|
||||
},
|
||||
defaultc:{
|
||||
type:String,
|
||||
default:'#FFFFFF'
|
||||
}
|
||||
},
|
||||
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%;}
|
||||
.item-dot {width: 20rpx;height: 20rpx;margin-right: 16rpx;border-radius: 100%;}
|
||||
</style>
|
||||
|
|
@ -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,609 @@
|
|||
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 获取字符串中的数字
|
||||
*/
|
||||
obtainCount(str) {
|
||||
return parseInt(str.replace(/[^0-9]/ig,""))
|
||||
},
|
||||
/**
|
||||
* @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,'添加小数点后两位小数');
|
||||
let str = num.toString();
|
||||
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 [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, p1) => {
|
||||
return `<img mode="widthFix" style="max-width:100%!important;height:auto" src='${p1.indexOf('http') > -1 ? p1 : 'https://oss.hmzfyy.cn' + p1}' />`
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @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
|
||||
},
|
||||
/**
|
||||
* @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 保存图片
|
||||
* @param {String} src
|
||||
*/
|
||||
saveImg(src) {
|
||||
// #ifdef APP-PLUS
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: src,
|
||||
success:(resimg)=> {}
|
||||
});
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
let exist = src.slice(0,4);
|
||||
if(exist=='http') {
|
||||
uni.downloadFile({
|
||||
url: src,
|
||||
success: (res) => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: ()=> {},
|
||||
fail: () => {
|
||||
uni.showToast({title:'保存失败',icon:'error'})
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
} else {
|
||||
wx.saveFile({
|
||||
tempFilePath: src,
|
||||
success:(wximg)=> {}
|
||||
})
|
||||
}
|
||||
// #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" : "wxa02e44170bc722cd",
|
||||
"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,181 @@
|
|||
{
|
||||
"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/cart/cart",
|
||||
"style": {
|
||||
"navigationBarTitleText": "购物车",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/tabbar/cate/cate",
|
||||
"style": {
|
||||
"navigationBarTitleText": "分类",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}
|
||||
],
|
||||
"subPackages": [{ //A包
|
||||
"root": "pagesA",
|
||||
"pages": [
|
||||
{
|
||||
"path" : "shopping-cart-slide/shopping-cart-slide",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "order-list/order-list",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
{ //B包
|
||||
"root": "pagesB",
|
||||
"pages": [
|
||||
{
|
||||
"path" : "login/login",
|
||||
"style" : {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "login/xiey",
|
||||
"style" : {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}
|
||||
,{
|
||||
"path" : "shop-detail/shop-detail",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "buy-read/buy-read",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "disclaimers/disclaimers",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "business-profile/business-profile",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "search/search",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "settlement/settlement",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "finish/finish",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "order-detail/order-detail",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"preloadRule": {
|
||||
"pages/tabbar/my/my": {
|
||||
"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,41 @@
|
|||
<template>
|
||||
<view class="pad-x160">
|
||||
<status-container :ifReturn="false" titlet="购物车" :ifCustomer='false'>
|
||||
<view slot="content" style="margin: 0rpx -20rpx 0 -20rpx;">
|
||||
<cart-slide ref="cart"></cart-slide>
|
||||
</view>
|
||||
</status-container>
|
||||
<!-- 底部tab -->
|
||||
<view class="foot-box"><foot-tab current="2"></foot-tab></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 底部组件
|
||||
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||
import cartSlide from '@/components/shopping-carts/cart-slide';
|
||||
export default {
|
||||
components:{
|
||||
'foot-tab' :footTab,
|
||||
cartSlide
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
this.$refs.cart.getList();
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
<template>
|
||||
<view>
|
||||
<status-container :ifReturn="false" titlet="分类">
|
||||
<view slot="content" style="margin: -20rpx -20rpx 0 -20rpx;">
|
||||
<view class="dis">
|
||||
<view>
|
||||
<scroll-view scroll-y :style="{height: scrollHeight +'px'}" class="bacf">
|
||||
<view class="pad-x160">
|
||||
<view class="flexs clips1 pad-z20 fon24"
|
||||
@tap="chooseCate(index)" :style="{backgroundColor: current==index ? '#ff3673' : '#FFFFFF',color: current==index ? '#FFFFFF' : '#000000'}"
|
||||
v-for="(item,index) in cateList" :key="index" style="min-width: 160rpx;height: 86rpx;line-height: 86rpx;box-sizing: border-box;" >{{item.title}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="pad-zy20">
|
||||
<view class="pad-sx20" :style="{width: newWidth+'px'}">
|
||||
<swiper-tab-jl :list="secendCateList" v-model="activeIndex" @changeEv="clickTab" itemColor="#FFFFFF"></swiper-tab-jl>
|
||||
</view>
|
||||
<view class="disac bbt-d9 pad-sx30" @tap="goDetail(index)" v-for="(item,index) in dataList" :key="index">
|
||||
<image class="radius30 flexs borbot-cc" :src="item.imgsrc" mode="aspectFill" style="width: 240rpx;height: 240rpx;"></image>
|
||||
<view class="width100 disjb fc mar-z20" style="height: 240rpx;">
|
||||
<view class="fon30 colb clips2">{{item.title}}</view>
|
||||
<view class="">
|
||||
<view class="fon36 textc mar-x36">￥{{$toolAll.tools.changeNum(item.price)}}</view>
|
||||
<view @tap.stop="addCartEv(index)" class="colf disjcac fon24 radius30 cate-btn">
|
||||
<i class="icon icon-shop-cart mar-y10" style="font-size: 36rpx;"></i>
|
||||
立即选购
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mar-s40"><pitera textStr="——到底啦——"></pitera></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</status-container>
|
||||
<!-- 底部tab -->
|
||||
<foot-tab current="1"></foot-tab>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import listOne from '@/components/list/list-one';
|
||||
import pitera from '@/components/nothing/pitera';
|
||||
import swiperTabJl from '@/components/swiper-tab/swiper-tab-jl.vue';
|
||||
// 底部组件
|
||||
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||
export default {
|
||||
components:{
|
||||
'foot-tab' :footTab,
|
||||
listOne,
|
||||
pitera,
|
||||
swiperTabJl
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
current:0,
|
||||
scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
|
||||
newWidth:uni.getSystemInfoSync().windowWidth - 100,
|
||||
cateList:[
|
||||
{id:1,title:'推荐套装'},
|
||||
{id:1,title:'推荐套装'},
|
||||
{id:1,title:'推荐套装'},
|
||||
{id:1,title:'推荐套装'},
|
||||
{id:1,title:'推荐套装'},
|
||||
{id:1,title:'推荐套装'},
|
||||
{id:1,title:'推荐套装'},
|
||||
{id:1,title:'推荐套装'},
|
||||
{id:1,title:'推荐套装'},
|
||||
{id:1,title:'推荐套装'},
|
||||
],
|
||||
secendCateList:[
|
||||
{title:'标题一'},
|
||||
{title:'标题二标题二'},
|
||||
{title:'标题三'},
|
||||
{title:'标题四'},
|
||||
{title:'标题五'},
|
||||
{title:'标题六标题六标题六'},
|
||||
{title:'标题七'},
|
||||
{title:'标题八'},
|
||||
{title:'标题九'},
|
||||
],
|
||||
activeIndex:0,
|
||||
dataList:[
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题',price:199},
|
||||
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
|
||||
],
|
||||
ifloading:false,
|
||||
flag:true
|
||||
}
|
||||
},
|
||||
onLoad(op) {
|
||||
if(op.index) {
|
||||
this.current = op.index;
|
||||
}
|
||||
},
|
||||
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();
|
||||
}
|
||||
},
|
||||
// 一级分类选择
|
||||
chooseCate(index) {
|
||||
this.current = index;
|
||||
},
|
||||
goDetail(id) {
|
||||
uni.navigateTo({
|
||||
url:'/pagesB/shop-detail/shop-detail'
|
||||
})
|
||||
},
|
||||
addCartEv(id) {
|
||||
this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)')
|
||||
},
|
||||
// tab点击事件
|
||||
clickTab(index){
|
||||
this.activeIndex = index;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.cate-btn{background: linear-gradient(to right,#ff3772 0%,#fd5549 100%);width: 170rpx;height: 60rpx;box-shadow: 0rpx 6rpx 10rpx rgba(255, 55, 114, .3);}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<template>
|
||||
<view class="pad-x180">
|
||||
<status-nav :ifReturn="false" titleColor="#FFFFFF" navBarTitle="个人中心" backgroudColor="transparent"></status-nav>
|
||||
<view class="head-box" :style="{paddingTop: padt+'px'}" style="background: linear-gradient( to top, #ff3574 0%, #fd5646 100%);position: fixed;top: 0;left: 0;right: 0;z-index: 2;">
|
||||
<view class="mar-zy40 mar-s20 mar-x90 disac colf fon36">
|
||||
<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" mode="aspectFill" style="width: 126rpx;height: 126rpx;border-radius: 100%;border: 6rpx solid #FFFFFF;"></image>
|
||||
<view class="mar-z30">Anita Rose</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pad-zy40" :style="{paddingTop: headHeight+'px'}" style="position: relative;z-index: 3;">
|
||||
<view class="bacf radius20" style="margin-top: -80rpx;">
|
||||
<view class="pad-zy30">
|
||||
<column-function :ifLine="false" :list="list1" fonts="36" @chooseEv="chooseEv"></column-function>
|
||||
</view>
|
||||
<gong-ge-function rowNum="4" :ifShadow="false" :list="list" @chooseGe="chooseGe" iconwh="50rpx" titleTop="10rpx"></gong-ge-function>
|
||||
</view>
|
||||
<view class="bacf radius20 mar-s20">
|
||||
<view class="pad-zy30 pad-sx20">
|
||||
<column-function :ifLine="false" :list="list2" fonts="30" :ifIcon="true" @chooseEv="chooseEv"></column-function>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 添加微信 -->
|
||||
<view class="" v-if="ifWx" :style="{top: padt+'px'}" @tap="ifWx=false" style="position: fixed;right: 0;bottom: 0;left: 0;background-color: rgba(0, 0, 0, 0.86);z-index: 4;">
|
||||
<view class="pad-s120 pad-zy50">
|
||||
<view class="bacf pad20 disjcac" style="width: 420rpx;height: 420rpx;margin: 0 auto;">
|
||||
<image :src="imgsrc" style="width: 380rpx;height: 380rpx;" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="colf line-h56 mar30">
|
||||
<view class="fon36">请扫描二维码添加微信告知您的订单号并支付定金 ，发货前请支付尾款。</view>
|
||||
<view class="fon24 tcenter">（支付定金后，我们才会开始制作哦，如您有特别的要求可以在微信上提出哦！）</view>
|
||||
<view class="fon36 tcenter">祝您幸福美满！</view>
|
||||
</view>
|
||||
<view @tap.stop="saveImg" class="navigate-to-where radius30 colf fon36 tcenter mar-s50 bold mar-zy30">保存二维码</view>
|
||||
</view>
|
||||
</view>
|
||||
<customer-one></customer-one>
|
||||
<!-- 底部tab -->
|
||||
<foot-tab current="3"></foot-tab>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import statusNav from '@/components/status-navs/status-nav';
|
||||
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||
import gongGeFunction from '@/components/function-list/gong-ge/gong-ge-function';
|
||||
import columnFunction from '@/components/function-list/column/column-function';
|
||||
import customerOne from '@/components/customer/customer-one';
|
||||
export default {
|
||||
components:{
|
||||
'foot-tab' :footTab,
|
||||
statusNav,
|
||||
gongGeFunction,
|
||||
columnFunction,
|
||||
customerOne
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
padt:uni.getSystemInfoSync().statusBarHeight + 50,
|
||||
headHeight:'',//头部导航高
|
||||
list:[
|
||||
{url:'',iconsrc:'/static/public/icon-payment.png',iconWidth:50,iconHeight:44,title:'已下单'},
|
||||
{url:'',iconsrc:'/static/public/icon-send-goods.png',iconWidth:46,iconHeight:40,title:'制作中'},
|
||||
{url:'',iconsrc:'/static/public/icon-take.png',iconWidth:48,iconHeight:42,title:'已发货'},
|
||||
{url:'',iconsrc:'/static/public/icon-finish.png',iconWidth:49,iconHeight:44,title:'已完成'},
|
||||
],
|
||||
list1: [
|
||||
{url:'/pagesA/order-list/order-list',iconsrc:'',iconWidth:60,iconHeight:60,title:'我的订单',content:'全部订单',contentColor:'#999999',ifNext:true},
|
||||
],
|
||||
list2: [
|
||||
{url:'/pagesB/buy-read/buy-read',iconsrc:'/static/public/icon-buy.png',iconWidth:38,iconHeight:34,title:'购买须知',content:'',contentColor:'#999999',ifNext:true},
|
||||
{url:'',iconsrc:'/static/public/icon-scan.png',iconWidth:34,iconHeight:34,title:'添加微信',content:'',contentColor:'#999999',ifNext:true},
|
||||
{url:'/pagesB/disclaimers/disclaimers',iconsrc:'/static/public/icon-duty.png',iconWidth:40,iconHeight:40,title:'免责声明',content:'',contentColor:'#999999',ifNext:true},
|
||||
{url:'/pagesB/business-profile/business-profile',iconsrc:'/static/public/icon-aboutus.png',iconWidth:34,iconHeight:32,title:'商家简介',content:'',contentColor:'#999999',ifNext:true},
|
||||
],
|
||||
ifWx:false,
|
||||
imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg'
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
onHide() {
|
||||
this.ifWx = false;
|
||||
},
|
||||
onLoad() {
|
||||
// 缓存状态栏+标题栏的高度
|
||||
const query = wx.createSelectorQuery().in(this)
|
||||
query.select('.head-box').boundingClientRect((rect) => {
|
||||
this.headHeight = rect.height - this.padt;
|
||||
}).exec()
|
||||
},
|
||||
methods: {
|
||||
chooseEv(obj) {
|
||||
if(obj.url) {
|
||||
uni.navigateTo({
|
||||
url:obj.url
|
||||
})
|
||||
} else {
|
||||
// 添加微信
|
||||
this.ifWx = true;
|
||||
}
|
||||
},
|
||||
// 我的订单点击事件
|
||||
chooseGe(obj){
|
||||
uni.navigateTo({
|
||||
url:`/pagesA/order-list/order-list?index=${[1,2,3,4][obj.index]}`
|
||||
})
|
||||
console.log(obj);
|
||||
},
|
||||
// 保存二维码
|
||||
saveImg(){
|
||||
this.$toolAll.tools.saveImg(this.imgsrc);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page{background-color: #f7f7f7;}
|
||||
.navigate-to-where {height: 98rpx;line-height: 98rpx;background: linear-gradient(to right, #ff3772 0%,#fd5548 100%);box-shadow: 0rpx 6rpx 10rpx rgba(255, 55, 114, .6);}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
<template>
|
||||
<view class="pad-x180">
|
||||
<status-nav :ifReturn="false" titleColor="#FFFFFF" navBarTitle="首页" backgroudColor="transparent"></status-nav>
|
||||
<view class="head-box" :style="{paddingTop: padt+'px'}" style="background: linear-gradient( to top, #ff3574 0%, #fd5745 100%);position: fixed;top: 0;left: 0;right: 0;z-index: 2;">
|
||||
<view class=" mar-zy40 radius30 pad-zy30 mar-x30 disac" style="background-color: rgba(255, 255, 255, 0.2);">
|
||||
<image src="/static/public/icon-search.png" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
|
||||
<input @confirm="goSearch" v-model="keyword" class="width100 colf fon30 mar-z20" type="text" placeholder="搜索" style="height: 90rpx;" placeholder-style="color: #FFFFFF">
|
||||
</view>
|
||||
</view>
|
||||
<view class="pad-zy20" :style="{paddingTop: headHeight+'px'}">
|
||||
<!-- 轮播图 -->
|
||||
<swiper-pu newRadius="40rpx" newHeight="400rpx" newBottom="20rpx" :isplay='isplay'></swiper-pu>
|
||||
</view>
|
||||
<view class="pad-sx20">
|
||||
<!-- 分类宫格 -->
|
||||
<gong-ge-function itemTop="40rpx" @chooseGe="chooseGe" :list="list"></gong-ge-function>
|
||||
</view>
|
||||
<view class="pad-zy20">
|
||||
<list-one :ifTitle="true"></list-one>
|
||||
</view>
|
||||
<view class="mar-s60">
|
||||
<pitera textStr="——到底啦——"></pitera>
|
||||
</view>
|
||||
<customer-one></customer-one>
|
||||
<!-- 底部tab -->
|
||||
<foot-tab></foot-tab>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import swiperPu from '@/components/swipers/swiper-pu';
|
||||
import statusNav from '@/components/status-navs/status-nav';
|
||||
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||
import gongGeFunction from '@/components/function-list/gong-ge/gong-ge-function.vue';
|
||||
import listOne from '@/components/list/list-one';
|
||||
import pitera from '@/components/nothing/pitera';
|
||||
import customerOne from '@/components/customer/customer-one';
|
||||
export default {
|
||||
components:{
|
||||
'foot-tab' :footTab,
|
||||
gongGeFunction,
|
||||
statusNav,
|
||||
swiperPu,
|
||||
listOne,
|
||||
pitera,
|
||||
customerOne
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
padt:uni.getSystemInfoSync().statusBarHeight + 50,
|
||||
headHeight:'',//头部导航高
|
||||
list:[
|
||||
{url:'/pages/tabbar/cate/cate?index=0',iconsrc:'/static/deleteImg/icon-ge-01.png',iconWidth:60,iconHeight:60,title:'推荐套装'},
|
||||
{url:'/pages/tabbar/cate/cate?index=1',iconsrc:'/static/deleteImg/icon-ge-02.png',iconWidth:60,iconHeight:60,title:'喜糖组合'},
|
||||
{url:'/pages/tabbar/cate/cate?index=2',iconsrc:'/static/deleteImg/icon-ge-03.png',iconWidth:60,iconHeight:60,title:'喜盒自选'},
|
||||
{url:'/pages/tabbar/cate/cate?index=3',iconsrc:'/static/deleteImg/icon-ge-04.png',iconWidth:60,iconHeight:60,title:'喜糖自选'},
|
||||
{url:'/pages/tabbar/cate/cate?index=4',iconsrc:'/static/deleteImg/icon-ge-05.png',iconWidth:60,iconHeight:60,title:'迎宾糖散糖'},
|
||||
{url:'/pages/tabbar/cate/cate?index=5',iconsrc:'/static/deleteImg/icon-ge-06.png',iconWidth:60,iconHeight:60,title:'瓜子花生'},
|
||||
{url:'/pages/tabbar/cate/cate?index=6',iconsrc:'/static/deleteImg/icon-ge-07.png',iconWidth:60,iconHeight:60,title:'伴手礼'},
|
||||
{url:'/pagesB/buy-read/buy-read',iconsrc:'/static/deleteImg/icon-ge-08.png',iconWidth:60,iconHeight:60,title:'购买须知'},
|
||||
{url:'/pagesB/business-profile/business-profile',iconsrc:'/static/deleteImg/icon-ge-09.png',iconWidth:60,iconHeight:60,title:'商家简介'},
|
||||
{url:'/pages/tabbar/cate/cate?index=0',iconsrc:'/static/deleteImg/icon-ge-10.png',iconWidth:60,iconHeight:60,title:'其他推荐'},
|
||||
],
|
||||
keyword:'',
|
||||
isplay:false,
|
||||
playTimer:null
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
onHide() {
|
||||
clearTimeout(this.playTimer);
|
||||
},
|
||||
onShow() {
|
||||
this.playTimer = setTimeout(()=>{
|
||||
this.isplay = true;
|
||||
},2000)
|
||||
},
|
||||
onLoad() {
|
||||
// 缓存状态栏+标题栏的高度
|
||||
const query = wx.createSelectorQuery().in(this)
|
||||
query.select('.head-box').boundingClientRect((rect) => {
|
||||
this.headHeight = rect.height - this.padt;
|
||||
}).exec()
|
||||
},
|
||||
methods: {
|
||||
chooseGe(obj) {
|
||||
let exist = obj.url.slice(0,18);
|
||||
if(exist=='/pages/tabbar/cate') {
|
||||
uni.reLaunch({
|
||||
url:obj.url
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url:obj.url
|
||||
})
|
||||
}
|
||||
},
|
||||
goSearch(){
|
||||
uni.navigateTo({
|
||||
url:`/pagesB/search/search?keyword=${this.keyword}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page{background-color: #f7f7f7;}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
<view>
|
||||
<status-container titlet="订单管理" :ifCustomer='false'>
|
||||
<view slot="content" style="margin: -20rpx -20rpx 0 -20rpx;">
|
||||
<view class="bacf">
|
||||
<swiperTabSlide @scrollBottom="scrollBottomEv" :list="dataList" :ifloading="ifloading" :tagList="tagList" :tagIndex="tagIndex"></swiperTabSlide>
|
||||
</view>
|
||||
</view>
|
||||
</status-container>
|
||||
</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 {
|
||||
tagList:[
|
||||
{title:'全部'},
|
||||
{title:'已下单'},
|
||||
{title:'制作中'},
|
||||
{title:'已发货'},
|
||||
{title:'已完成'},
|
||||
{title:'已取消'},
|
||||
],
|
||||
tagIndex:0,
|
||||
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
|
||||
}
|
||||
},
|
||||
onLoad(op) {
|
||||
if(op.index) {
|
||||
this.tagIndex = op.index;
|
||||
}
|
||||
},
|
||||
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,75 @@
|
|||
<template>
|
||||
<view>
|
||||
<status-container titlet="购物车">
|
||||
<view slot="content">
|
||||
<cart-slide :list="list" :button="buttonList" :border="true" @click="clickMethod" @change="changeMethod"></cart-slide>
|
||||
</view>
|
||||
</status-container>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cartSlide from '@/components/shopping-carts/cart-slide';
|
||||
export default {
|
||||
components:{
|
||||
cartSlide
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list : [
|
||||
{
|
||||
id: 1,
|
||||
image: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
title: '张三',
|
||||
rightDetail: '2019-03-18',
|
||||
detail: 'XXXXXXXXXXXXXXXXXXX公司',
|
||||
slide_x: 0
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
surname: '李',
|
||||
title: '李二',
|
||||
rightDetail: '2019-03-17',
|
||||
detail: 'XXXXXXXXXXXXXXXXXXX公司',
|
||||
slide_x: 0
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '王五',
|
||||
rightDetail: '2019-03-18',
|
||||
slide_x: 0
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
surname: '李',
|
||||
detail: 'XXXXXXXXXXXXXXXXXXX公司',
|
||||
slide_x: 0
|
||||
}
|
||||
],
|
||||
buttonList: [
|
||||
{
|
||||
title: '分享',
|
||||
background: '#c4c7cd'
|
||||
},
|
||||
{
|
||||
title: '删除',
|
||||
background: '#ff3b32'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeMethod(data, button, index){
|
||||
console.log('滑动按钮回调', data)
|
||||
console.log('滑动按钮回调', button)
|
||||
},
|
||||
clickMethod(data){
|
||||
console.log('点击行回调', data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<view>
|
||||
<status-container titlet="关于我们" :ifCustomer='false'>
|
||||
<view slot="content">
|
||||
<view class="pad20">
|
||||
<view class="radius30 bacf pad-sx40 pad-zy40 mar-x30" v-if="username">
|
||||
<view class="fon36 colb">{{name}}</view>
|
||||
<view class="fon30 colb mar-s20 mar-x10">{{phone}}（{{username}}）</view>
|
||||
<view class="fon24" style="color: #8c8c9b;">{{address}}</view>
|
||||
</view>
|
||||
<view @tap="goThere" class="navigate-to-where radius30 colf fon36 tcenter">立即导航</view>
|
||||
<view class="fon48 col0 mar-sx50">关于我们</view>
|
||||
<rich-text :nodes="richText" class="fon30 line-h50" style="color: #8c8c9b;"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</status-container>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
phone:'',
|
||||
username:'',
|
||||
richText:'',
|
||||
lat:'',
|
||||
lng:'',
|
||||
name:'',
|
||||
address:''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 查询关于我们信息
|
||||
checkAboutUs(){
|
||||
this.$requst.post('/api/index/about').then(res=>{
|
||||
if(res.code==0){
|
||||
this.lat = res.data.lat;
|
||||
this.lng = res.data.lon;
|
||||
this.richText = this.$toolAll.tools.escape2Html(res.data.content);
|
||||
this.address = res.data.address;
|
||||
} else {
|
||||
this.$toolAll.tools.showToast(res.msg);
|
||||
}
|
||||
})
|
||||
},
|
||||
goThere(){
|
||||
this.$toolAll.tools.goThere(this.lat,this.lng,this.name,this.address);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.navigate-to-where {height: 98rpx;line-height: 98rpx;background: linear-gradient(to right, #ff3772 0%,#fd5548 100%);box-shadow: 0rpx 6rpx 10rpx rgba(255, 55, 114, .6);}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<view>
|
||||
<status-container titlet="购买须知" :ifCustomer='false'>
|
||||
<view slot="content">
|
||||
<rich-text :nodes="content"></rich-text>
|
||||
</view>
|
||||
</status-container>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<view>
|
||||
<status-container titlet="免责声明" :ifCustomer='false'>
|
||||
<view slot="content">
|
||||
<rich-text :nodes="disclaimerRich" class="fon24 colpeili line-h46"></rich-text>
|
||||
</view>
|
||||
</status-container>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
disclaimerRich:''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 查询免责声明信息
|
||||
checkDisclaimerEv(){
|
||||
this.$requst.post('/api/index/statement').then(res=>{
|
||||
if(res.code==0){
|
||||
this.disclaimerRich = this.$toolAll.tools.escape2Html(res.data.content);
|
||||
} else {
|
||||
this.$toolAll.tools.showToast(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<view class="pad-x50">
|
||||
<status-container titlet="完成">
|
||||
<view slot="content">
|
||||
<view class="pad-zy40 fon30">
|
||||
<view class="disjcac pad-sx50">
|
||||
<image :src="imgsrc" mode="aspectFill" style="width: 460rpx;height: 460rpx;"></image>
|
||||
</view>
|
||||
<view class="tcenter" style="color: #0c0c0c;">已完成提交</view>
|
||||
<view class="col9 tcenter mar-sx50 line-h50">
|
||||
请扫描二维码添加微信告知您的订单<br />
|
||||
号并支付定金 ，发货前请支付尾款。<br />
|
||||
（支付定金后，我们才会开始制作哦，如您有特<br />
|
||||
别的要求可以在微信上提出哦！）<br />
祝您幸福美满！
|
||||
</view>
|
||||
<view @tap="saveImg" class="navigate-to-where radius30 colf fon36 tcenter">保存二维码</view>
|
||||
<view @tap="goShop" class="navigate-to-where radius30 colf fon36 tcenter mar-s50" style="background: #e00c34;">继续购物</view>
|
||||
</view>
|
||||
</view>
|
||||
</status-container>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 提交
|
||||
submit(){
|
||||
if(this.checkEmpty() && this.flag){
|
||||
this.flag = false;
|
||||
|
||||
}
|
||||
},
|
||||
// 继续购物
|
||||
goShop(){
|
||||
uni.reLaunch({
|
||||
url:'/pages/tabbar/cate/cate'
|
||||
})
|
||||
},
|
||||
// 保存二维码
|
||||
saveImg(){
|
||||
this.$toolAll.tools.saveImg(this.imgsrc);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.navigate-to-where {height: 98rpx;line-height: 98rpx;background: linear-gradient(to right, #ff3772 0%,#fd5548 100%);box-shadow: 0rpx 6rpx 10rpx rgba(0, 0, 0, 0.2);}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,219 @@
|
|||
<template>
|
||||
<view>
|
||||
<status-nav :titleVal="'登录'" :tabcolor="'rgba(244, 244, 244,1)'" :whereCome="1*1" :statusTitle="true" :backgroudColor="'rgba(244, 244, 244,1)'"></status-nav>
|
||||
<!-- <view class='login-header'>
|
||||
<image class="infoImg" :style="{boxShadow: '0px 0px 20px '+ publicColor}" mode="aspectFit" :src="userInfo.avatarUrl || imgSrc"></image>
|
||||
<view class="logo-name">恒美植发</view>
|
||||
</view>
|
||||
<view class="login-box">
|
||||
<button class='login-btn' :style="{background:publicColor}" type='primary' @click="bindGetUserInfo">微信授权</button>
|
||||
<view class="xie-box">登录代表您已同意<text @tap="goXie" class="xieCon">《用户服务协议》</text></view>
|
||||
</view>
|
||||
<view v-if="isShowP" class="disjcac posAll">
|
||||
<view class="bacf radius20 width100 tank-box">
|
||||
<view class="tc tank-box-itemone">请授权绑定手机号</view>
|
||||
<view class="fon28 colf pad-x30 pad-zy30 tc disjb">
|
||||
<view class="pad-sx10 radius10 tank-btn" style="background-color: rgba(230, 230, 230,1);color: #000000;">暂不绑定</view>
|
||||
<view :style="{background:publicColor}" class="pad-sx10 radius10 tank-btn posir">
|
||||
立即绑定
|
||||
<button open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="posia syxzo">立即绑定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class='login-header'>
|
||||
<image class="infoImg" :style="{boxShadow: '0px 0px 20px '+ publicColor}" mode="aspectFit" :src="userInfo.avatarUrl || imgSrc"></image>
|
||||
<view class="logo-name">{{appletName}}</view>
|
||||
</view>
|
||||
<view class="login-box">
|
||||
<view @tap="setMiniColor">
|
||||
<button class='login-btn' open-type="getPhoneNumber" @getphonenumber="getphonenumber" :style="{background:publicColor}" type='primary'>手机号授权登录</button>
|
||||
</view>
|
||||
<view class="xie-box">登录代表您已同意<text @tap="goXie" class="xieCon">《用户服务协议》</text></view>
|
||||
</view>
|
||||
<view v-if="isShowP" class="disjcac posAll">
|
||||
<view class="bacf radius20 width100 tank-box">
|
||||
<view class="tc tank-box-itemone">微信授权</view>
|
||||
<view class="fon28 colf pad-x30 pad-zy30 tc disjb">
|
||||
<view class="pad-sx20 radius10 tank-btn" style="background-color: rgba(230, 230, 230,1);color: #000000;">暂不绑定</view>
|
||||
<view :style="{background:publicColor}" class="pad-sx20 radius10 tank-btn posir">
|
||||
立即授权
|
||||
<button @click="bindGetUserInfo" class="posia syxzo">立即授权</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userInfo: {},//用户信息
|
||||
canIGetUserProfile: false,
|
||||
imgSrc: '/static/public/logo.png',//默认logo头像
|
||||
appletName:'恒美植发',//小程序名称
|
||||
isShowP:false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 主题颜色
|
||||
publicColor() {
|
||||
return this.$store.state.publicColor
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// 检测当前运行环境并缓存域名
|
||||
this.$toolAll.tools.currentContext();
|
||||
this.setLogo();
|
||||
this.$toolAll.tools.isVedio();
|
||||
// let ya = this;
|
||||
// // 微信扫码后会自动编码,所以需要解码
|
||||
// if (options && options.q) {
|
||||
// let arr = decodeURIComponent(options.q).split('?')[1].split('&')
|
||||
// let obj = {}
|
||||
// arr.forEach(item => {
|
||||
// let brr = item.split('=')
|
||||
// obj[brr[0]] = brr[1]
|
||||
// })
|
||||
// // console.log(obj) //得到参数组成的对象
|
||||
// ya.invite_code = obj.invite_code
|
||||
// }
|
||||
if (uni.getUserProfile) {
|
||||
this.canIGetUserProfile = true;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 设置logo图
|
||||
setLogo(){
|
||||
this.$requst.get('index/base-config').then(res=>{
|
||||
this.imgSrc = this.$http + res.data.logo;
|
||||
this.appletName = res.data.appletName;
|
||||
})
|
||||
},
|
||||
refuse(){//暂不绑定事件
|
||||
this.isShowP=false;
|
||||
this.$toolAll.tools.showToast('登录成功','success')
|
||||
uni.reLaunch({url:'/pages/tabbar/pagehome/pagehome'})
|
||||
},
|
||||
// 设置主题色
|
||||
setMiniColor(){
|
||||
this.$requst.get(`index/mini-program-setting`).then(res=>{
|
||||
this.publicColor = res.data.mainColor;
|
||||
uni.setStorageSync('publicColor', res.data.mainColor) //#3875F6 #2E8B57
|
||||
})
|
||||
},
|
||||
getphonenumber(e){//授权绑定手机号
|
||||
let ya = this;
|
||||
wx.login({
|
||||
success:(res)=>{
|
||||
this.$requst.post('user/login',{code:res.code}).then(result => {
|
||||
if(e.detail.errMsg=="getPhoneNumber:ok"){
|
||||
this.$requst.post('user/bind-phone',{openid: result.data.openid,session_key:result.data.session_key, iv:e.detail.iv,encryptedData:e.detail.encryptedData}).then(res=>{
|
||||
console.log('手机号信息：',res);
|
||||
if(res.code==0){
|
||||
this.$toolAll.tools.showToast('手机号绑定成功');
|
||||
this.isShowP = true;
|
||||
// uni.reLaunch({url:'/pages/tabbar/pagehome/pagehome'})
|
||||
} else this.$toolAll.tools.showToast(res.msg);
|
||||
},error=>{})
|
||||
} else {
|
||||
// console.log('取消授权手机号')
|
||||
}
|
||||
}).catch(err=>{
|
||||
console.log(err);
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
goXie(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/login/xiey'
|
||||
})
|
||||
},
|
||||
//调起登录授权
|
||||
bindGetUserInfo(e) {
|
||||
let ya = this;
|
||||
//新版登录方式
|
||||
uni.getUserProfile({
|
||||
desc: '登录',
|
||||
lang: 'zh_CN',
|
||||
success: (res) => {
|
||||
ya.userInfo = res.userInfo;
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: (res)=> {
|
||||
if (res.code) {
|
||||
ya.updateUserInfo(res.code);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '登录失败！',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
fail: (res) => {}
|
||||
});
|
||||
},
|
||||
//调用登录接口
|
||||
updateUserInfo(code) {
|
||||
let ya = this;
|
||||
uni.showToast({
|
||||
title: '登录中...',
|
||||
icon:'loading',
|
||||
duration:10000
|
||||
})
|
||||
var params = {
|
||||
code:code,
|
||||
nickname: ya.userInfo.nickName,//用户昵称
|
||||
headimgurl: ya.userInfo.avatarUrl,//用户头像
|
||||
country: ya.userInfo.country,//用户所在国家
|
||||
province: ya.userInfo.province,//用户所在省份
|
||||
city: ya.userInfo.city,//用户所在城市
|
||||
gender: ya.userInfo.gender,//用户性别
|
||||
language:ya.userInfo.language,//语言
|
||||
is_active:1
|
||||
}
|
||||
this.$requst.post('user/login',params).then(res => {
|
||||
if(res.data.token!=''){
|
||||
uni.setStorageSync('params',params)
|
||||
uni.setStorageSync('userId',res.data.account_id)
|
||||
uni.setStorageSync('token',res.data.token)//缓存token
|
||||
uni.setStorageSync('openid',res.data.openid)//缓存openid
|
||||
uni.setStorageSync('expire',res.data.expire)//缓存失效时间（时间戳格式）
|
||||
uni.setStorageSync('phone_active',res.data.phone_active)//是否第一次授权
|
||||
uni.setStorageSync('is_active',res.data.is_active)//是否第一次授权
|
||||
uni.setStorageSync('invite_code',res.data.invite_code)
|
||||
uni.hideToast()
|
||||
// if(res.data.phone_active!=1){
|
||||
// this.isShowP = true;
|
||||
// } else {
|
||||
if(uni.getStorageSync('urlparams')) {
|
||||
uni.reLaunch({ // 重新进入当前页面
|
||||
url:uni.getStorageSync('urlparams')
|
||||
})
|
||||
} else {
|
||||
uni.reLaunch({
|
||||
url:'/pages/tabbar/pagehome/pagehome'
|
||||
})
|
||||
}
|
||||
// }
|
||||
}
|
||||
},error => {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
@tcolor:#333333;
|
||||
@tcolorp:#3875F6;
|
||||
.login-header {display: flex;justify-content: center;align-items: center;flex-direction: column;margin-top: 40%;}
|
||||
.infoImg {width: 192rpx;height: 192rpx;border-radius: 100%;}
|
||||
.logo-name {font-size: 30rpx;font-weight: bold;margin-top: 20rpx;color: @tcolor;}
|
||||
.login-box {margin-top: 60rpx;text-align: center;}
|
||||
.login-btn {width: 80%;margin-top: 50%;}
|
||||
.xie-box{display: flex;justify-content: center;align-items: center;color: @tcolor;margin-top: 30rpx;}
|
||||
.xieCon{color: @tcolorp;}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<view>
|
||||
<status-nav :titleVal="'用户协议及隐私声明'" :statusTitle="true"></status-nav>
|
||||
<view :style="{paddingTop: statusHeight+'px'}" class="mar20 line-h50 fon30">
|
||||
<!-- <rich-text :nodes="content"></rich-text> -->
|
||||
<view class="text2">本协议为您与本小程序管理者之间所订立的契约，具有合同的法律效力，请您仔细阅读。</view>
|
||||
<view>一、本协议内容、生效、变更。本协议内容包括协议正文及所有本小程序已经发布的或将来可能发布的各类规则。所有规则为本协议不可分割的组成部分，与协议正文具有同等法律效力。如您对协议有任何疑问，应向本小程序咨询。您在同意所有协议条款并完成注册程序，才能成为本站的正式用户，您登录即代表同意“用户服务协议”，本协议即生效，对双方产生约束力。只要您使用本小程序平台服务，则本协议即对您产生约束，届时您不应以未阅读本协议的内容或者未获得本小程序对您问询的解答等理由，主张本协议无效，或要求撤销本协议。您确认：本协议条款是处理双方权利义务的契约，始终有效，法律另有强制性规定或双方另有特别约定的，依其规定。 您承诺接受并遵守本协议的约定。如果您不同意本协议的约定，您应立即停止注册程序或停止使用本小程序平台服务。本小程序有权根据需要不定期地制订、修改本协议及/或各类规则，并在本小程序平台公示，不再另行单独通知用户。变更后的协议和规则一经在网站公布，立即生效。如您不同意相关变更，应当立即停止使用本小程序平台服务。您继续使用本小程序平台服务的，即表明您接受修订后的协议和规则。</view>
|
||||
<view>二、注册资格用户须具有法定的相应权利能力和行为能力的自然人、法人或其他组织，能够独立承担法律责任。您完成注册程序或其他本小程序平台同意的方式实际使用本平台服务时，即视为您确认自己具备主体资格，能够独立承担法律责任。若因您不具备主体资格，而导致的一切后果，由您及您的监护人自行承担。</view>
|
||||
<view class="text2">
|
||||
<view class="text2">2.1用户应自行诚信向本站提供注册资料，用户同意其提供的注册资料真实、准确、完整、合法有效，用户注册资料如有变动的，应及时更新其注册资料。如果用户提供的注册资料不合法、不真实、不准确、不详尽的，用户需承担因此引起的相应责任及后果，并且本小程序保留终止用户使用本平台各项服务的权利。</view>
|
||||
<view class="text2">2.2用户在本站进行浏览等活动时，涉及用户真实姓名/名称、通信地址、联系电话、电子邮箱等隐私信息的，本站将予以严格保密，除非得到用户的授权或法律另有规定，本站不会向外界披露用户隐私信息。为完成创建账号，用户需提供以下信息：用户的微信昵称、性别、姓名、手机号等信息。用户提供的上述信息，将在用户使用本服务期间持续授权我们使用。在用户注销账号时，我们将停止使用并删除上述信息。上述信息将存储于中华人民共和国境内。如需跨境传输，我们将会单独征得用户的授权同意。</view>
|
||||
</view>
|
||||
<view>三、账户</view>
|
||||
<view>
|
||||
<view class="text2">3.1您注册成功后，即成为本小程序平台的用户，将持有本小程序平台唯一编号的账户信息。</view>
|
||||
<view class="text2">3.2您设置的姓名为真实姓名，不得侵犯或涉嫌侵犯他人合法权益。否则，本小程序有权终止向您提供服务，注销您的账户。</view>
|
||||
<view class="text2">3.3您应谨慎合理的保存、使用您的会员名和密码，应对通过您的会员名和密码实施的行为负责。除非有法律规定或司法裁定，且征得本小程序的同意，否则，会员名和密码不得以任何方式转让、赠与或继承（与账户相关的财产权益除外）。</view>
|
||||
<view class="text2">3.4用户不得将在本站注册获得的账户借给他人使用，否则用户应承担由此产生的全部责任，并与实际使用人承担连带责任。</view>
|
||||
<view class="text2">3.5如果发现任何非法使用等可能危及您的账户安全的情形时，您应当立即以有效方式通知本小程序要求暂停相关服务，并向公安机关报案。您理解本小程序对您的请求采取行动需要合理时间，本小程序对在采取行动前已经产生的后果（包括但不限于您的任何损失）不承担任何责任。</view>
|
||||
</view>
|
||||
<view>四、用户信息的合理使用</view>
|
||||
<view>
|
||||
<view class="text2">4.1您同意本小程序平台拥有通过短信、电话、微信消息提醒等形式，向在本站注册用户发送信息等告知信息的权利。</view>
|
||||
<view class="text2">4.2您了解并同意，本小程序有权应国家司法、行政等主管部门的要求，向其提供您在本小程序平台填写的注册信息和交易记录等必要信息。如您涉嫌侵犯他人知识产权，则本小程序亦有权在初步判断涉嫌侵权行为存在的情况下，向权利人提供您必要的身份信息。</view>
|
||||
<view class="text2">4.3用户同意本小程序有权使用用户的注册信息、用户名、密码等信息，登陆进入用户的注册账户，进行证据保全，包括但不限于公证、见证等。</view>
|
||||
</view>
|
||||
<view>五、免责条款</view>
|
||||
<view class="text2">5.1 本平台仅提供信息对接，发生一切纠纷问题皆与本平台无关，请通过仲裁部门维护各自权益。</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
statusHeight() {
|
||||
return this.$store.state.statusHeight
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// this.$toolAll.tools.escape2Html(this.content)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<template>
|
||||
<view class="pad-x140">
|
||||
<status-container titlet="订单详情">
|
||||
<view slot="content">
|
||||
<view class="pad-zy20">
|
||||
<view class="bacf radius30 pad-sx30 pad-zy40 fon30 mar-x25">
|
||||
<view class="disjbac">
|
||||
<view class="">订单编号</view>
|
||||
<view class="bold">2928392832</view>
|
||||
</view>
|
||||
<view class="disjbac mar-sx30">
|
||||
<view class="">下单时间</view>
|
||||
<view class="bold">2021-11-30 23：30</view>
|
||||
</view>
|
||||
<view class="disjbac">
|
||||
<view class="">订单状态</view>
|
||||
<view class="bold">已发货</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bacf radius30 pad-sx30 pad-zy40 fon30 mar-x25">
|
||||
<view class="">订单信息</view>
|
||||
<view class="disjb bbot pad-sx30" v-for="(item,index) in 2" :key="index">
|
||||
<image class="mar-y30 flexs radius30" src="https://s6.jpg.cm/2022/05/06/Lx4T45.jpg" mode="" style="width: 210rpx;height: 210rpx;"></image>
|
||||
<view class="width100 disjb fc line-h40" style="height: 210rpx;">
|
||||
<view class="clips2 fon24">于亿年宝藏中臻选1的宝石级钻石每年开采数LOVE100 星座光的原石挑选 </view>
|
||||
<view class="">
|
||||
<view class="fon24 mar-x30" style="color: #8c8c9b;">单位：盒</view>
|
||||
<view class="disjbac ">
|
||||
<view class="textc bold">￥{{$toolAll.tools.changeNum(2000)}}</view>
|
||||
<view class="fon24" style="color: #8c8c9b;">x1</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="disje pad-s30">总计：<text class="fon36 bold textc" style="margin-top: -6rpx;">￥4000</text></view>
|
||||
</view>
|
||||
<view class="bacf radius30 pad-sx30 pad-zy40 fon30 mar-x25">
|
||||
<view class="mar-x30">联系信息</view>
|
||||
<view class="bold">徐卫 546546515315</view>
|
||||
<view class="fon24">
|
||||
<view class="mar-sx10" style="color: #8c8c9b;">四川省成都市双店路奥园广场3期1419号</view>
|
||||
<view class="" style="color: #8c8c9b;">婚期：2022-12-23</view>
|
||||
<view class="mar-s10" style="color: #8c8c9b;">希望到货时间：2022-12-21</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="posixzy bacf pad-sx20 pad-zy50" style="box-shadow: 0rpx -2rpx 10rpx rgba(0, 0, 0, 0.06);">
|
||||
<view class="navigate-to-where radius30 colf fon36 tcenter">确认收货</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</status-container>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
onShareAppMessage(res) {
|
||||
var shareObj = {
|
||||
title: res.target.dataset.title, // 默认是小程序的名称(可以写slogan等)
|
||||
path: `/pagesB/shopDetail/shopDetail?id=${res.target.dataset.id}&category_id=0&is_activity=${res.target.dataset.is_activity}&share_id=${uni.getStorageSync('userId')}&invite_code=${uni.getStorageSync('invite_code')}`, // 默认是当前页面，必须是以‘/’开头的完整路径
|
||||
imageUrl: res.target.dataset.imgsrc//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
|
||||
};
|
||||
return shareObj;
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.navigate-to-where {height: 98rpx;line-height: 98rpx;background: linear-gradient(to right, #ff3772 0%,#fd5548 100%);box-shadow: 0rpx 6rpx 10rpx rgba(0, 0, 0, 0.2);}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<template>
|
||||
<view>
|
||||
<status-container titlet="搜索">
|
||||
<view slot="content" style="margin: -20rpx 0rpx 0 0rpx;">
|
||||
<view class="pad-x30 pad-s20" style="position: sticky;background-color: #f4f4f4;" :style="{top: padt+'px'}">
|
||||
<view class=" radius30 pad-zy30 mar-x30 disac" style="background-color: #d8d8d8;">
|
||||
<image src="/static/public/icon-searcht.png" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
|
||||
<input @confirm="goSearch" @focus="ifResult=false" v-model="keyword" class="width100 fon30 mar-z20" type="text" placeholder="搜索" style="height: 90rpx;color: #8c8c9b;" placeholder-style="color: #8c8c9b">
|
||||
</view>
|
||||
<view class="fon30 bold" v-if="keyword && ifResult">结果：{{keyword}}<text v-if="num" class="textc">（{{num}}）</text></view>
|
||||
</view>
|
||||
<list-one></list-one>
|
||||
<view class="mar-s60">
|
||||
<pitera textStr="——到底啦——"></pitera>
|
||||
</view>
|
||||
</view>
|
||||
</status-container>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import listOne from '@/components/list/list-one';
|
||||
import pitera from '@/components/nothing/pitera';
|
||||
export default {
|
||||
components:{
|
||||
listOne,
|
||||
pitera
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
padt:uni.getSystemInfoSync().statusBarHeight + 50,
|
||||
keyword:'',
|
||||
num:11,
|
||||
ifResult:true
|
||||
}
|
||||
},
|
||||
onLoad(op) {
|
||||
if(op.keyword) this.keyword = op.keyword;
|
||||
},
|
||||
methods: {
|
||||
goSearch(){
|
||||
this.ifResult = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<template>
|
||||
<view>
|
||||
<status-container titlet="订单提交">
|
||||
<view slot="content">
|
||||
<view class="fon38 tcenter mar-sx50">请完善您的信息</view>
|
||||
<view class="pad-zy50 pad-s20">
|
||||
<view class="posir fon30 mar-x50">
|
||||
<text class="col9 posia pad-zy10 input-title">婚期</text>
|
||||
<picker mode="date" @change="chooseTime(0,$event)">
|
||||
<input type="text" v-model="lasttime" disabled @tap="chooseEv(0)" class="input-box width100 radius20 pad-zy30" :class="current==0 ? 'focusc' : ''" placeholder="请选择婚期" placeholder-style="color:#000000">
|
||||
</picker>
|
||||
</view>
|
||||
<view class="posir fon30 mar-x50">
|
||||
<text class="col9 posia pad-zy10 input-title">希望送到日期</text>
|
||||
<picker mode="date" @change="chooseTime(1,$event)">
|
||||
<input type="text" v-model="totime" disabled @tap="chooseEv(1)" class="input-box width100 radius20 pad-zy30" :class="current==1 ? 'focusc' : ''" placeholder="请选择送达日期" placeholder-style="color:#000000">
|
||||
</picker>
|
||||
</view>
|
||||
<view class="posir fon30 mar-x50">
|
||||
<text class="col9 posia pad-zy10 input-title">收货地址</text>
|
||||
<input type="text" v-model="address" @tap="chooseEv(2)" class="input-box width100 radius20 pad-zy30" :class="current==2 ? 'focusc' : ''" placeholder="请填写收货地址" placeholder-style="color:#000000">
|
||||
</view>
|
||||
<view class="posir fon30 mar-x50">
|
||||
<text class="col9 posia pad-zy10 input-title">收货联系人</text>
|
||||
<input type="text" v-model="name" @tap="chooseEv(3)" class="input-box width100 radius20 pad-zy30" :class="current==3 ? 'focusc' : ''" placeholder="请填写联系人" placeholder-style="color:#000000">
|
||||
</view>
|
||||
<view class="posir fon30 mar-x50">
|
||||
<text class="col9 posia pad-zy10 input-title">收货电话</text>
|
||||
<input type="number" v-model="phone" maxlength="11" @tap="chooseEv(4)" class="input-box width100 radius20 pad-zy30" :class="current==4 ? 'focusc' : ''" placeholder="请填写联系电话" placeholder-style="color:#000000">
|
||||
</view>
|
||||
<view @tap="submit" class="navigate-to-where radius30 colf fon36 tcenter">提交完成</view>
|
||||
</view>
|
||||
</view>
|
||||
</status-container>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current:6,
|
||||
lasttime:'',//婚期
|
||||
totime:'',//希望送到日期
|
||||
address:'',//收货地址
|
||||
name:'',//收货联系人
|
||||
phone:'',//收货电话
|
||||
flag:true
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 提交
|
||||
submit(){
|
||||
if(this.checkEmpty() && this.flag){
|
||||
this.flag = false;
|
||||
uni.navigateTo({
|
||||
url:'/pagesB/finish/finish'
|
||||
})
|
||||
}
|
||||
},
|
||||
checkEmpty(){
|
||||
let result = false;
|
||||
if(!this.address) {
|
||||
this.$toolAll.tools.showToast('请填写收货地址');
|
||||
} else if(!this.name) {
|
||||
this.$toolAll.tools.showToast('请填写联系人');
|
||||
} else if(this.$toolAll.tools.isPhone(this.phone)) {
|
||||
this.$toolAll.tools.showToast('请正确填写联系电话');
|
||||
} else {
|
||||
result = true;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
chooseEv(index) {
|
||||
this.current = index;
|
||||
},
|
||||
chooseTime(index,e) {
|
||||
let timestr = e.detail.value;
|
||||
if(index) {
|
||||
this.totime = timestr;
|
||||
} else {
|
||||
this.lasttime = timestr;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.input-title{background-color: #f4f4f4;left: 30rpx;top: -24rpx;}
|
||||
.input-box{border: 4rpx solid #dddddd;box-sizing: border-box;height: 84rpx;line-height: 84rpx;}
|
||||
.focusc{border-color: #ff3970;}
|
||||
.navigate-to-where {height: 98rpx;line-height: 98rpx;background: linear-gradient(to right, #ff3772 0%,#fd5548 100%);position: fixed;bottom: 20rpx;left: 50%;transform: translateX(-50%);width: 620rpx;box-shadow: 0rpx 6rpx 10rpx rgba(255, 55, 114, .6);}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<view class="pad-x140">
|
||||
<status-container titlet="详情">
|
||||
<view slot="content" style="margin: -20rpx -20rpx 0 -20rpx;">
|
||||
<swiper-pu newRadius="0rpx" :newHeight="swiperH+'px'" newBottom="40rpx" :isplay="isplay"></swiper-pu>
|
||||
<view class="pad-zy20 bacf pad-sx20">
|
||||
<view class="fon42 colb mar-x10">如意饼</view>
|
||||
<view class="fon24 col6 mar-x20">如意饼 事事如意</view>
|
||||
<view class="textc bold fon30 ">￥46,854/<text class="fon24">盒</text></view>
|
||||
</view>
|
||||
<view class="fon36 colb tcenter pad-sx30 bold">商品介绍</view>
|
||||
<view class="pad-zy20">
|
||||
<rich-text :nodes="richText"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</status-container>
|
||||
<view class="disjbac posixzy bacf pad-sx20 pad-zy50">
|
||||
<view class="btn buy-btn" @tap="buyEv">立即购买</view>
|
||||
<view class="btn" @tap="addCartEv">加入购物车</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import swiperPu from '@/components/swipers/swiper-pu';
|
||||
export default {
|
||||
components:{
|
||||
swiperPu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
swiperH:uni.getSystemInfoSync().windowWidth,
|
||||
richText:'',
|
||||
isplay:false,
|
||||
playTimer:null
|
||||
}
|
||||
},
|
||||
onHide() {
|
||||
clearTimeout(this.playTimer);
|
||||
},
|
||||
onShow() {
|
||||
this.playTimer = setTimeout(()=>{
|
||||
this.isplay = true;
|
||||
},2000)
|
||||
},
|
||||
methods: {
|
||||
// 立即购买
|
||||
buyEv(){
|
||||
uni.reLaunch({
|
||||
url:'/pages/tabbar/cart/cart'
|
||||
})
|
||||
},
|
||||
// 加入购物车
|
||||
addCartEv(id) {
|
||||
this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)')
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.btn{
|
||||
width: 310rpx;
|
||||
height: 98rpx;
|
||||
line-height: 98rpx;
|
||||
color: #FFFFFF;
|
||||
background-color: #8c8c9b;
|
||||
border-radius: 30rpx;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.buy-btn{
|
||||
background: linear-gradient(to right, #ff3772 0%,#fd5548 100%);
|
||||
}
|
||||
</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: 501 B |
Binary file not shown.
|
After Width: | Height: | Size: 834 B |
Binary file not shown.
|
After Width: | Height: | Size: 412 B |
Binary file not shown.
|
After Width: | Height: | Size: 643 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 821 B |
Binary file not shown.
|
After Width: | Height: | Size: 525 B |
Binary file not shown.
|
After Width: | Height: | Size: 584 B |
Binary file not shown.
|
After Width: | Height: | Size: 679 B |
Binary file not shown.
|
After Width: | Height: | Size: 731 B |
Binary file not shown.
|
After Width: | Height: | Size: 678 B |
Binary file not shown.
|
After Width: | Height: | Size: 576 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 712 B |
Binary file not shown.
|
After Width: | Height: | Size: 532 B |
Binary file not shown.
|
After Width: | Height: | Size: 607 B |
Binary file not shown.
|
After Width: | Height: | Size: 362 B |
Binary file not shown.
|
After Width: | Height: | Size: 704 B |
Binary file not shown.
|
After Width: | Height: | Size: 629 B |
Binary file not shown.
|
After Width: | Height: | Size: 542 B |
Binary file not shown.
|
After Width: | Height: | Size: 726 B |
Binary file not shown.
|
After Width: | Height: | Size: 674 B |
Binary file not shown.
|
After Width: | Height: | Size: 700 B |
Binary file not shown.
|
After Width: | Height: | Size: 565 B |
Binary file not shown.
|
After Width: | Height: | Size: 664 B |
|
|
@ -0,0 +1 @@
|
|||
// 根级别的 action
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
// 组装模块并导出 store 的地方
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import moduleA from '@/store/modules/moduleA'
|
||||
import moduleB from '@/store/modules/moduleB'
|
||||
|
||||
Vue.use(Vuex);//vue的插件机制
|
||||
|
||||
//Vuex.modules 模块选项
|
||||
const store = new Vuex.Store({
|
||||
modules: {
|
||||
moduleA,
|
||||
moduleB
|
||||
}
|
||||
})
|
||||
export default store
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
// 购物车模块
|
||||
export default {
|
||||
state:{//存放状态
|
||||
// 底部导航的高
|
||||
footHeight:'',
|
||||
token:'token已生成',
|
||||
userInfo:{},
|
||||
count:0,
|
||||
publicColor:'',
|
||||
todos: [{
|
||||
id: 1,
|
||||
text: '我是内容一',
|
||||
done: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: '我是内容二',
|
||||
done: false
|
||||
}
|
||||
],
|
||||
obj:{
|
||||
a:'吃鸡腿',
|
||||
b:'吃自助餐'
|
||||
}
|
||||
},
|
||||
// Vuex中store数据改变的唯一方法就是mutations 不适合异步方法
|
||||
mutations: {
|
||||
footHeightEv(state,str){
|
||||
state.footHeight = str;
|
||||
},
|
||||
add(state) {
|
||||
state.count = 7;
|
||||
},
|
||||
add2(state, payload) {
|
||||
state.count = payload.amount;
|
||||
},
|
||||
// 单个属性处理方法
|
||||
setToken(state,str) {
|
||||
state.token = str;
|
||||
},
|
||||
// 对象处理方法
|
||||
updateUserInfo(state, payload) {
|
||||
// 变更状态
|
||||
state.userInfo = payload.userInfo;
|
||||
},
|
||||
// 新增字段方法
|
||||
newProp(state,payload) {
|
||||
state.obj = { ...state.obj, c: payload.c };
|
||||
}
|
||||
},
|
||||
// 可以执行任意的同步和异步操作
|
||||
actions:{
|
||||
addCountAction ({commit}) {
|
||||
commit('add')
|
||||
},
|
||||
addCountAction2 (context , payload) {
|
||||
context.commit('add2', payload)
|
||||
},
|
||||
// 异步方法
|
||||
addCountAction3 (context , payload) {
|
||||
setTimeout(function () {
|
||||
context.commit('add2', payload)
|
||||
}, 2000)
|
||||
},
|
||||
actionA ({ commit }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
commit('someMutation')
|
||||
resolve()
|
||||
}, 1000)
|
||||
})
|
||||
},
|
||||
actionB ({ dispatch, commit }) {
|
||||
return dispatch('actionA').then(() => {
|
||||
commit('someOtherMutation')
|
||||
})
|
||||
}
|
||||
},
|
||||
// Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性），对 state 的加工，是派生出来的数据。 可以在多组件中共享 getter 函数，这样做还可以提高运行效率。
|
||||
getters: {
|
||||
doneTodos: state => {
|
||||
return state.todos.filter(todo => todo.done)
|
||||
},
|
||||
doneTodosCount: (state, getters) => {
|
||||
//state ：可以访问数据
|
||||
//getters：访问其他函数，等同于 store.getters
|
||||
return getters.doneTodos.length
|
||||
},
|
||||
getTodoById: (state) => (id) => {
|
||||
return state.todos.find(todo => todo.id === id)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
export default {
|
||||
state:{//存放状态
|
||||
token:'token已生成',
|
||||
userInfo:{},
|
||||
count:0,
|
||||
publicColor:'',
|
||||
todos: [{
|
||||
id: 1,
|
||||
text: '我是内容一',
|
||||
done: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: '我是内容二',
|
||||
done: false
|
||||
}
|
||||
],
|
||||
obj:{
|
||||
a:'吃鸡腿',
|
||||
b:'吃自助餐'
|
||||
}
|
||||
},
|
||||
// Vuex中store数据改变的唯一方法就是mutations 不适合异步方法
|
||||
mutations: {
|
||||
add(state) {
|
||||
state.count = 7;
|
||||
},
|
||||
add2(state, payload) {
|
||||
state.count = payload.amount;
|
||||
},
|
||||
// 单个属性处理方法
|
||||
setToken(state,str) {
|
||||
state.token = str;
|
||||
},
|
||||
// 对象处理方法
|
||||
updateUserInfo(state, payload) {
|
||||
// 变更状态
|
||||
state.userInfo = payload.userInfo;
|
||||
},
|
||||
// 新增字段方法
|
||||
newProp(state,payload) {
|
||||
state.obj = { ...state.obj, c: payload.c };
|
||||
}
|
||||
},
|
||||
// 可以执行任意的同步和异步操作
|
||||
actions:{
|
||||
addCountAction ({commit}) {
|
||||
commit('add')
|
||||
},
|
||||
addCountAction2 (context , payload) {
|
||||
context.commit('add2', payload)
|
||||
},
|
||||
// 异步方法
|
||||
addCountAction3 (context , payload) {
|
||||
setTimeout(function () {
|
||||
context.commit('add2', payload)
|
||||
}, 2000)
|
||||
},
|
||||
actionA ({ commit }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
commit('someMutation')
|
||||
resolve()
|
||||
}, 1000)
|
||||
})
|
||||
},
|
||||
actionB ({ dispatch, commit }) {
|
||||
return dispatch('actionA').then(() => {
|
||||
commit('someOtherMutation')
|
||||
})
|
||||
}
|
||||
},
|
||||
// Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性），对 state 的加工，是派生出来的数据。 可以在多组件中共享 getter 函数，这样做还可以提高运行效率。
|
||||
getters: {
|
||||
// doneTodos: state => {
|
||||
// return state.todos.filter(todo => todo.done)
|
||||
// },
|
||||
// doneTodosCount: (state, getters) => {
|
||||
// //state ：可以访问数据
|
||||
// //getters：访问其他函数，等同于 store.getters
|
||||
// return getters.doneTodos.length
|
||||
// },
|
||||
// getTodoById: (state) => (id) => {
|
||||
// return state.todos.find(todo => todo.id === id)
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
// 根级别的 mutation
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
#引入vuex状态机
|
||||
在根目录创建store目录
|
||||
|
||||
#在main.js引入store、注册store、挂载store在程序上
|
||||
import Vue from 'vue';
|
||||
import App from './App';
|
||||
#import store from './store'
|
||||
#Vue.prototype.$store = store
|
||||
|
||||
const app = new Vue({
|
||||
# store,
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
|
||||
|
||||
#在页面内使用store的属性
|
||||
<view @tap="add"></view>
|
||||
import { mapState,mapGetters,mapMutations } from 'vuex'//引入mapState
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
#单纯访问属性值
|
||||
computed:{
|
||||
tokenEv() {
|
||||
return this.$store.state.token;
|
||||
}
|
||||
},
|
||||
<!--
|
||||
需要引入 import { mapState } from 'vuex'//引入mapState
|
||||
-->
|
||||
computed:mapState({
|
||||
// 从state中拿到数据 箭头函数可使代码更简练
|
||||
token: state => state.token,
|
||||
}),
|
||||
computed:mapState(['token']),
|
||||
computed: {
|
||||
...mapState({
|
||||
token: function (state) {
|
||||
return '追加的' + state.token
|
||||
},
|
||||
userInfo: state => state.userInfo,
|
||||
})
|
||||
},
|
||||
computed:{
|
||||
...mapState([
|
||||
'token',
|
||||
'userInfo',
|
||||
'count',
|
||||
'obj'
|
||||
])
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
token: state => state.moduleA.token,
|
||||
count: state => state.moduleB.count
|
||||
}),
|
||||
},
|
||||
#单纯访问方法
|
||||
computed: {
|
||||
todos() {
|
||||
return this.$store.getters.doneTodos
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
doneTodosCount() {
|
||||
return this.$store.getters.doneTodosCount
|
||||
}
|
||||
},
|
||||
<!-- 方法传值 -->
|
||||
computed: {
|
||||
getTodoById() {
|
||||
return this.$store.getters.getTodoById(1)
|
||||
}
|
||||
},
|
||||
<!--
|
||||
需要引入 import { mapGetters } from 'vuex'//引入mapState
|
||||
-->
|
||||
computed: {
|
||||
// 使用对象展开运算符将 getter 混入 computed 对象中
|
||||
...mapGetters([
|
||||
'doneTodos',
|
||||
'doneTodosCount',
|
||||
'getTodoById'
|
||||
// ...
|
||||
])
|
||||
},
|
||||
onLoad(options) {
|
||||
#改变状态机里面的值
|
||||
<!-- 传递字符串改变 -->
|
||||
this.$store.commit('setToken', 'token已改变');
|
||||
<!-- 传递对象 -->
|
||||
this.$store.commit('updateUserInfo',{userInfo:'用户信息'})
|
||||
this.$store.commit({
|
||||
type: 'updateUserInfo',
|
||||
userInfo: '新方式更新用户信息'
|
||||
})
|
||||
this.$store.commit('newProp',{c:'吃火锅'})
|
||||
<!-- 输出值 -->
|
||||
console.log(this.token);
|
||||
<!-- 调用方法 -->
|
||||
this.add();
|
||||
<!-- 必须是同步方法 -->
|
||||
this.$store.dispatch('addCountAction')
|
||||
this.$store.dispatch('addCountAction2',{amount:10})
|
||||
<!-- 异步方法 -->
|
||||
this.$store.dispatch('addCountAction3',{amount:30})
|
||||
setTimeout(()=>{
|
||||
console.log(this.count,388);
|
||||
},3000)
|
||||
},
|
||||
methods: {
|
||||
<!--
|
||||
需要引入 import { mapMutations } from 'vuex'//引入mapState
|
||||
-->
|
||||
...mapMutations(['add']),//对象展开运算符直接拿到add
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
|
||||
/* 颜色变量 */
|
||||
|
||||
/* 行为相关颜色 */
|
||||
$uni-color-primary: #007aff;
|
||||
$uni-color-success: #4cd964;
|
||||
$uni-color-warning: #f0ad4e;
|
||||
$uni-color-error: #dd524d;
|
||||
|
||||
/* 文字基本颜色 */
|
||||
$uni-text-color:#333;//基本色
|
||||
$uni-text-color-inverse:#fff;//反色
|
||||
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
|
||||
$uni-text-color-placeholder: #808080;
|
||||
$uni-text-color-disable:#c0c0c0;
|
||||
|
||||
/* 背景颜色 */
|
||||
$uni-bg-color:#ffffff;
|
||||
$uni-bg-color-grey:#f8f8f8;
|
||||
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
|
||||
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
|
||||
|
||||
/* 边框颜色 */
|
||||
$uni-border-color:#c8c7cc;
|
||||
|
||||
/* 尺寸变量 */
|
||||
|
||||
/* 文字尺寸 */
|
||||
$uni-font-size-sm:24upx;
|
||||
$uni-font-size-base:28upx;
|
||||
$uni-font-size-lg:32upx;
|
||||
|
||||
/* 图片尺寸 */
|
||||
$uni-img-size-sm:40upx;
|
||||
$uni-img-size-base:52upx;
|
||||
$uni-img-size-lg:80upx;
|
||||
|
||||
/* Border Radius */
|
||||
$uni-border-radius-sm: 4upx;
|
||||
$uni-border-radius-base: 6upx;
|
||||
$uni-border-radius-lg: 12upx;
|
||||
$uni-border-radius-circle: 50%;
|
||||
|
||||
/* 水平间距 */
|
||||
$uni-spacing-row-sm: 10px;
|
||||
$uni-spacing-row-base: 20upx;
|
||||
$uni-spacing-row-lg: 30upx;
|
||||
|
||||
/* 垂直间距 */
|
||||
$uni-spacing-col-sm: 8upx;
|
||||
$uni-spacing-col-base: 16upx;
|
||||
$uni-spacing-col-lg: 24upx;
|
||||
|
||||
/* 透明度 */
|
||||
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||||
|
||||
/* 文章场景相关 */
|
||||
$uni-color-title: #2C405A; // 文章标题颜色
|
||||
$uni-font-size-title:40upx;
|
||||
$uni-color-subtitle: #555555; // 二级标题颜色
|
||||
$uni-font-size-subtitle:36upx;
|
||||
$uni-color-paragraph: #3F536E; // 文章段落颜色
|
||||
$uni-font-size-paragraph:30upx;
|
||||
Loading…
Reference in New Issue