Lee
/
luban-mall
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Lee

master
Lee-1203 2022-07-08 16:15:29 +08:00
commit c3d615f622
300 changed files with 38500 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
.hbuilderx/launch.json Normal file
View File

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

61
App.vue Normal file
View File

@ -0,0 +1,61 @@
<script>
import { themeEv } from '@/jsFile/public-api.js';
export default {
globalData:{
projectname:'', // 项目名称
lat:'', // 公司地址维度
lng:'' ,// 公司地址经度
hostapi:'https://luban.scdxtc.cn' // 域名配置
},
// 优先于show方法
onLaunch: function() {
uni.login({
success: (res) => {
uni.request({
url: this.globalData.hostapi +'/api/user/login',
data:{code:res.code},
success: (result) => {
if(result.data.data.is_active) {
uni.setStorageSync('userId',result.data.account_id);
uni.setStorageSync('token',result.data.data.token);//缓存token
uni.setStorageSync('openid',result.data.data.openid);//缓存openid
uni.setStorageSync('expire',result.data.data.expire);//缓存失效时间（时间戳格式）
uni.setStorageSync('phone_active',result.data.data.phone_active);//是否授权手机号
uni.setStorageSync('is_active',result.data.data.is_active);//是否授权头像和昵称
uni.setStorageSync('invite_code',result.data.data.invite_code);//缓存邀请码
}
}
})
}
})
},
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 */
@import url("./commons/loading.css");
</style>

12
commons/animate.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

402
commons/base-back.css Normal file
View File

@ -0,0 +1,402 @@
.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-s28{padding-top: 28rpx;}
.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-s60{padding-top: 60rpx;}
.pad-s70{padding-top: 70rpx;}
.pad-s80{padding-top: 80rpx;}
.pad-s90{padding-top: 90rpx;}
.pad-s100{padding-top: 100rpx;}
.pad-s110{padding-top: 110rpx;}
.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 */

404
commons/base.css Normal file
View File

@ -0,0 +1,404 @@
/* flex布局 */
.flex {
display: flex;
flex-wrap: wrap;
}
.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-s28{padding-top: 28rpx;}
.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-s60{padding-top: 60rpx;}
.pad-s70{padding-top: 70rpx;}
.pad-s80{padding-top: 80rpx;}
.pad-s90{padding-top: 90rpx;}
.pad-s100{padding-top: 100rpx;}
.pad-s110{padding-top: 110rpx;}
.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;
}
/* 边距 */
.pad-b140{padding-bottom: 140rpx;}
.pad-b150{padding-bottom: 150rpx;}

155
commons/icon-font.css Normal file
View File

@ -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";
}

1054
commons/loading.css Normal file
View File

File diff suppressed because it is too large Load Diff

1581
commons/style.css Normal file
View File

File diff suppressed because it is too large Load Diff

78
components/containers/status-container.vue Normal file
View File

@ -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>

59
components/customer-service/customer-service.vue Normal file
View File

@ -0,0 +1,59 @@
<template>
<view>
<view class="customer-service flex" @tap="toService" :style="{right:right+'rpx',bottom:bottom+'rpx'}">
<image src="/static/public/icon-service.png" mode="widthFix" lazy-load></image>
</view>
</view>
</template>
<script>
export default {
name:"customer-service",
props:{
right:{//距离右边多宽
type:Number,
default:28
},
bottom:{//距离底部多高
type:Number,
default:172
}
},
computed: {
// 主题颜色
publicColor() {
return '#0073bc'
}
},
data() {
return {};
},
methods:{
toService(){
console.log('咨询客服')
}
}
}
</script>
<style>
.customer-service{
justify-content: center;
align-items: center;
width: 120rpx;
height: 120rpx;
border-radius: 100%;
background-color: #FFFFFF;
box-shadow: 0 0 16rpx rgba(0,0,0,.4);
animation: scale_name 1s linear alternate infinite;
position: fixed;
}
.customer-service image{
width: 68rpx;
height: 68rpx;
}
@keyframes scale_name{
from{transform: scale(1);}
to{transform: scale(1.1);}
}
</style>

94
components/customer/customer-one.vue Normal file
View File

@ -0,0 +1,94 @@
<template>
<view>
<view class="cart-btn-bg" :style="{right:right+'rpx',bottom:bottom+'rpx'}">
<view class="cart-btn flex" @tap="toCart" :class="isSmall?'smallImg':''">
<image src="/static/public/icon-cart.png" mode="widthFix" lazy-load></image>
<view class="cart-total flex" v-if="total !== 0 && total < 99">{{total}}</view>
<view class="cart-total flex" v-else>99</view>
</view>
</view>
</view>
</template>
<script>
export default {
name:"customer-one",
props:{
right:{//距离右边多宽
type:Number,
default:28
},
bottom:{//距离底部多高
type:Number,
default:185
},
isSmall:{//是否是大图
type:Boolean,
default:false
},
total:{//购物车数量
type:Number,
default:1250
},
},
computed: {
// 主题颜色
publicColor() {
return '#0073bc'
}
},
data() {
return {};
},
methods:{
toCart(){
if(this.$toolAll.tools.judgeAuth()) {
// 已授权
uni.redirectTo({
url:`pages/cart/cart`
})
}
}
}
}
</script>
<style>
.smallImg{transform: scale(.8);margin-right: -10rpx;}
.cart-btn-bg{
width: 120rpx;
height: 120rpx;
border-radius: 30rpx;
background-color: #0073bc;
animation: scale_name 1s linear alternate infinite;
position: fixed;
}
.cart-btn{
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
position: relative;
}
.cart-btn image{
width: 62rpx;
height: 62rpx;
}
.cart-total{
justify-content: center;
align-items: center;
width: 36rpx;
height: 36rpx;
border-radius: 100%;
background-color: #FFFFFF;
font-size: 24rpx;
color: #068add;
position: absolute;
top: 20rpx;
right: 12rpx;
}
@keyframes scale_name{
from{transform: scale(.9);}
to{transform: scale(1);}
}
</style>

67
components/customer/public-customer.vue Normal file
View File

@ -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>

89
components/enter-cart/enter-cart.vue Normal file
View File

@ -0,0 +1,89 @@
<template>
<view>
<view class="cart-btn-bg" :style="{right:right+'rpx',bottom:bottom+'rpx'}">
<view class="cart-btn flex" @tap="toCart">
<image src="/static/public/icon-cart.png" mode="widthFix" lazy-load></image>
<view class="cart-total flex" v-if="cartNum*1 !== 0 && cartNum*1 < 99">{{cartNum}}</view>
<view class="cart-total flex" v-if="cartNum*1 >= 99">99</view>
</view>
</view>
</view>
</template>
<script>
import {getCartNum} from '@/jsFile/public-api.js';
import {mapState} from 'vuex'//引入mapState
export default {
name:"enter-cart",
props:{
right:{//距离右边多宽
type:Number,
default:28
},
bottom:{//距离底部多高
type:Number,
default:185
},
total:{//购物车数量
type:Number,
default:1250
},
},
computed:{
...mapState({
cartNum: state=> state.moduleA.cartNum
}),
},
data() {
return {};
},
methods:{
toCart(){
if(this.$toolAll.tools.judgeAuth()) {
// 已授权
uni.redirectTo({
url:`/pagesA/cart/cart`
})
}
}
}
}
</script>
<style scoped>
.cart-btn-bg{
width: 120rpx;
height: 120rpx;
border-radius: 30rpx;
background-color: #0073bc;
position: fixed;
}
.cart-btn{
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
position: relative;
}
.cart-btn image{
width: 62rpx;
height: 62rpx;
}
.cart-total{
justify-content: center;
align-items: center;
width: 36rpx;
height: 36rpx;
border-radius: 100%;
background-color: #FFFFFF;
font-size: 24rpx;
color: #068add;
position: absolute;
top: 20rpx;
right: 12rpx;
}
@keyframes scale_name{
from{transform: scale(.9);}
to{transform: scale(1);}
}
</style>

156
components/foot-tab/foot-tab.vue Normal file
View File

@ -0,0 +1,156 @@
<template>
<view class="foot-box">
<view class="item-box" @tap="chooseFootTab(index)" v-for="(item,index) in footBarList" :key="index">
<view class="item-icon flex" :class="current*1===index ? 'active' : ''">
<image :style="{width:[38,40,38,37,40][index]+'rpx',height:[39,40,38,39,40][index]+'rpx'}" :src="item.iconPath" mode="widthFix"></image>
</view>
<view class="foot-title" :class="current==index ? 'active' : ''">{{item.title}}</view>
</view>
</view>
</template>
<script>
import {getCartNum} from '@/jsFile/public-api.js';
import { mapState } from 'vuex'; //引入mapState
export default {
name:'foot-tab',
props:{
// 当前选中项
current:{
type:String,
default:'0'
},
// 默认哪个图标突出
isIcon:{
type:String,
default:'-1'
},
},
data() {
return {
ifCustomerService:true,//是否存在客服 默认不存在客服
footBarList:[], //底部列表
};
},
mounted() {
// 缓存状态栏+标题栏的高度
const query = wx.createSelectorQuery().in(this)
query.select('.foot-box').boundingClientRect((rect) => {
this.$store.commit('footHeightEv',rect.height);
}).exec()
// 查询购物车数量
getCartNum();
// 获取底部信息
this.getTabbarList();
},
computed:{
...mapState({
onLineList: state => state.moduleA.onLineList,
cartNum: state=> state.moduleA.cartNum
}),
},
methods:{
// 获取底部信息
getTabbarList(){
this.$requst.get('/api/index/tarbar').then(res=>{
if(res.code == 0){
console.log(res,'底部信息')
let tabbarArr = [];
res.data.footBar.forEach(item=>{
let obj = {
iconPath:'https://luban.scdxtc.cn'+item.icon,
title:item.name,
}
tabbarArr.push(obj)
})
this.footBarList = tabbarArr;
}
})
},
// 跳转
chooseFootTab(index){
if(index==0){
uni.reLaunch({url:'/pages/tabbar/index/index'})
}else if(index==1){
uni.reLaunch({url:'/pages/tabbar/cate/cate'})
}else if(index==2){
uni.reLaunch({url:'/pages/tabbar/kit/kit'})
}else if(index==3){
uni.reLaunch({url:'/pages/tabbar/news/news'})
}else {
if(this.$toolAll.tools.judgeAuth()) {
// 已授权
switch (index){
case 4:
uni.reLaunch({url:'/pages/tabbar/my/my'})
break;
}
}
}
}
}
}
</script>
<style scoped>
/* 外框样式 start */
.foot-box{
display: flex;
justify-content: space-around;
height: 130rpx;
font-size: 24rpx;
background-color: #FFFFFF;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
}
/* 外框样式 end */
.item-box {
display: flex;
justify-content: flex-end;
flex-direction: column;
align-items: center;
padding: 16rpx 10rpx;
width: 100%;
}
.item-icon{
justify-content: center;
align-items: center;
width: 65rpx;
height: 60rpx;
border-radius: 10rpx;
}
.item-icon.active {
background-color: #0073bc;
}
.item-icon.active image{
-webkit-filter: brightness(1000%);
-moz-filter: brightness(1000%);
-ms-filter: brightness(1000%);
-o-filter: brightness(1000%);
filter: brightness(1000%);
}
.foot-title{
margin-top: 10rpx;
letter-spacing: 4rpx;
font-size: 24rpx;
color: #999999;
}
.foot-title.active{
color: #000000;
}
/* 凸出样式 */
.bulge {
position: absolute;
top: -30rpx;
width: 80rpx!important;
height: 80rpx!important;
border: 8rpx solid #FFFFFF;
border-radius: 100%;
vertical-align: middle;
box-shadow: 0rpx -3rpx 6rpx rgba(0,0,0,.1);
background-color: #FFFFFF;
}
</style>

82
components/function-list/column/column-function.vue Normal file
View File

@ -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>

43
components/function-list/column/readme.md Normal file
View File

@ -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);
},
}
}

110
components/function-list/gong-ge/gong-ge-function.vue Normal file
View File

@ -0,0 +1,110 @@
<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 posir" :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 class="posia fon24 textc bacf" v-if="item.num" style="right: -54rpx;bottom: -39rpx;border-radius: 100%; color: #666;">({{item.num}})</view> -->
</view>
<view class="clips1" :style="{color:titlec,fontSize:fonts,marginTop:titleTop}">{{item.title}}<text v-if="item.num" style="margin-left:3px; color:#666">({{item.num}})</text></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:'标题一',num:0},
{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题二',num:0},
{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题三',num:0},
{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题四',num:0},
{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题五',num:0},
{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题五',num:0},
{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题五',num:0},
]
}
},
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 = [];
let max = '';
this.list.forEach(item=>{arr.push(item.iconHeight);})
if(arr.length) {
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>

47
components/function-list/gong-ge/readme.md Normal file
View File

@ -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);
},
}
}

132
components/list/list-one.vue Normal file
View File

@ -0,0 +1,132 @@
<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(item.id)" 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(item.skuId)" class="icon icon-shop-cart" style="font-size: 40rpx;"></i>
</view>
</view>
</view>
</view>
<view class="mar-s60" v-if="total==dataList.length">
<pitera textStr="—— 到底啦 ——"></pitera>
</view>
<view class="loading-box mar-s60" v-show="ifLoading">
<view class="loader-16"></view>
</view>
</view>
</template>
<script>
import pitera from '@/components/nothing/pitera';
import {getCartNum} from '@/jsFile/public-api.js';
export default {
name:"list-one",
components:{
pitera
},
props:{
// 是否显示标题
ifTitle:{
type:Boolean,
default:false
},
// 标题内容
title:{
type:String,
default:'热门推荐'
}
},
data() {
return {
dataList:[
// {id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖入海盐太妃糖入海盐太妃糖入海盐太妃糖入海盐太妃糖',price:'2,000'},
// {id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
// {id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
// {id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
// {id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
// {id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
// {id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
// {id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
// {id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
// {id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
// {id:1,skuId:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'人气热销-16入海盐太妃糖',price:'2,000'},
],
ifLoading:false,
total:0,
page:1,
size:10
};
},
mounted() {
this.getList();
},
methods:{
moreEv() {
if(this.total!=this.dataList.length) {
this.page++;
this.getList();
}
},
// 列表查询
getList(){
this.ifLoading = true;
let params = {
keyword:'',
page:this.page,
size:this.size
}
this.$requst.post('/api/spu/home',params).then(res=>{
if(res.code==0) {
this.total = res.data.total;
if(this.page==1) this.dataList = [];
if(res.data.list.length) {
res.data.list.forEach(item=>{
let obj = {
id:item.id,
skuId:item.skuId,
imgsrc:item.cover,
title:item.name,
price:this.$toolAll.tools.changeNum(parseInt(item.original_price)+'')
}
this.dataList.push(obj);
})
}
}
this.ifLoading = false;
})
},
// 加入购物车
addCartEv(id) {
if(this.$toolAll.tools.judgeAuth()) {
this.$requst.post('/api/order/shopping-cart-add',{sku_id:id,num:1}).then(res=>{
if(res.code==0) {
this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)');
getCartNum();
} else {
this.$toolAll.tools.showToast(res.msg)
}
})
}
},
// 去详情
goDetail(id) {
uni.navigateTo({
url:`/pagesB/shop-detail/shop-detail?id=${id}`
})
}
}
}
</script>
<style scoped>
</style>

106
components/nav-tab/nav-tab.vue Normal file
View File

@ -0,0 +1,106 @@
<template>
<view class="pull-nav-btns" :class="type=='radio'?'search-btns':''">
<view @tap="chooseEv(index,item.id)" :class="currentIndex==index?'radio-btn active':'radio-btn'" v-for="(item,index) in list" v-if="type=='radio'">
<view class="radio"></view>
<text>{{item.name}}</text>
</view>
<view @tap="chooseEv(index,item.id)" :class="currentIndex==index?'btn active':'btn'" v-for="(item,index) in list" v-if="type=='list' && index<=maxNum">{{item.name}}</view>
</view>
</template>
<script>
export default {
name:'nav-tab',
props:{
list:{
type:Array,
default:()=>{
return []
}
},
type:{
type:String,
default:'list'
}, //展现方式
maxNum:{
type:String,
default:2
}
},
data(){
return {
currentIndex:0, //当前位置
}
},
methods:{
// 导航选择事件
chooseEv(index,id) {
if(this.currentIndex !== index){
this.currentIndex = index;
// 抛出事件
this.$emit('chooseEv',index,id)
}
}
}
}
</script>
<style scoped>
.pull-nav-btns {
display: flex;
justify-content: center;
align-items: center;
padding: 25rpx 0;
}
.pull-nav-btns .btn {
width: 220rpx;
height: 66rpx;
margin: 0 25rpx;
border-radius: 10rpx;
line-height: 66rpx;
text-align: center;
font-size: 30rpx;
color: #000000;
}
.pull-nav-btns .btn:first-child{
margin-left: 0;
}
.pull-nav-btns .btn:last-child{
margin-right: 0;
}
.pull-nav-btns .btn.active {
background-color: #0073bc;
color: #FFFFFF;
}
.pull-nav-btns.search-btns{
justify-content: flex-start;
padding: 8rpx 0 20rpx;
}
.pull-nav-btns .radio-btn {
display: flex;
align-items: center;
margin-left: 40rpx;
line-height: 66rpx;
font-size: 30rpx;
color: #000000;
}
.pull-nav-btns .radio-btn .radio{
box-sizing: border-box;
width: 24rpx;
height: 24rpx;
margin-right: 12rpx;
border: 2rpx solid #333333;
border-radius: 100%;
}
.pull-nav-btns .radio-btn:first-child{
margin-left: 0;
}
.pull-nav-btns .radio-btn.active .radio{
border: 8rpx solid #0073bc;
}
</style>

41
components/nothing/nothing-page.vue Normal file
View File

@ -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>

54
components/nothing/pitera.vue Normal file
View File

@ -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>

128
components/product-list/product-list.vue Normal file
View File

@ -0,0 +1,128 @@
<template>
<view class="product-box">
<view class="product-first" @tap="chooseEv(item.goods_id)" v-if="index == 0" v-for="(item,index) in list" :key="index">
<view class="img"><image :src="item.cover" mode="widthFix" lazy-load></image></view>
<view class="txt clips1">{{item.name}} </view>
</view>
<view class="product-list-bg">
<view class="product-list" :style="{width:newWidth}">
<view class="product-item" @tap="chooseEv(item.goods_id)" v-if="index !== 0" v-for="(item,index) in list" :key="index">
<view class="img"><image :src="item.cover" mode="widthFix" lazy-load></image></view>
<view class="txt clips1">{{item.name}} </view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name:'product-list',
props:{
list:{
type:Array,
default:()=>{
return []
}
},
// 标题颜色
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'
},
newWidth:{
type:String,
default:''
}
},
data(){
return {
}
},
methods:{
// 列表选择事件
chooseEv(id) {
// 抛出事件
this.$emit('toDetail',{id})
}
}
}
</script>
<style scoped>
.product-first{
margin-bottom: 50rpx;
}
.product-first .img{
height: 450rpx;
border-radius: 10rpx;
overflow: hidden;
}
.product-first .img image{
width: 100%;
min-height: 450rpx;
}
.product-first .txt{
font-size: 30rpx;
line-height: 1.5;
margin-top: 30rpx;
}
.product-list-bg{
overflow-x: auto;
padding-bottom: 40rpx;
}
.product-list-bg::-webkit-scrollbar{
width: 0;
height: 0;
}
.product-list{
display: flex;
}
.product-list .product-item{
width: 460rpx;
margin-right: 30rpx;
}
.product-list .product-item:last-child{
margin-right: 0;
}
.product-list .product-item .img{
height: 300rpx;
border-radius: 10rpx;
overflow: hidden;
}
.product-list .product-item .img image{
width: 100%;
min-height: 300rpx;
}
.product-list .product-item .txt{
font-size: 28rpx;
line-height: 1.5;
margin-top: 20rpx;
}
</style>

150
components/pull-list/pull-list.vue Normal file
View File

@ -0,0 +1,150 @@
<template>
<view class="pull-list">
<view class="pull-item" :class="isShop?'pull-item-shop':''" v-for="(item,index) in list" :key="index" @tap.stop="toDetail(item.id)">
<view class="img"><image :src="item.src" mode="widthFix"></image></view>
<view class="item-bg flex">
<view class="time" v-if="!isShop">发布时间：{{item.time}}</view>
<view class="title clips1">{{item.title}}</view>
</view>
<view class="collection-sign" v-if="collection == 1" @tap.stop="collectionEv(item.id)">
<image src="/static/public/icon-collection.png" mode="widthFix"></image>
<text>已收藏</text>
</view>
</view>
</view>
</template>
<script>
export default {
name:'pull-list',
props:{
list:{
type:Array,
default:()=>{
return []
}
},
collection:{
type:String,
default: 0
},
isShop:{
type:Boolean,
default: false
}
},
data(){
return {
currentIndex:0, //当前位置
}
},
methods:{
// 导航选择事件
chooseEv(index) {
if(this.currentIndex !== index){
this.currentIndex = index;
// 抛出事件
this.$emit('chooseEv',index)
}
},
// 跳转详情页
toDetail(id) {
// 抛出事件
this.$emit('toDetail',{id})
},
//取消收藏
collectionEv(id){
// 抛出事件
this.$emit('collectionEv',{id})
}
}
}
</script>
<style scoped>
.pull-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.pull-item {
width: 100%;
height: 450rpx;
border-radius: 10rpx;
margin-top: 25rpx;
overflow: hidden;
position: relative;
}
.pull-item .img>image {
width: 100%;
min-height: 450rpx;
}
.pull-item .item-bg {
flex-direction: column-reverse;
width: 100%;
height: 450rpx;
background-color: rgba(0, 0, 0, .3);
position: absolute;
left: 0;
top: 0;
}
.pull-item .title {
padding: 0 30rpx;
font-size: 30rpx;
line-height: 1.6;
color: #FFFFFF;
}
.pull-item .time {
padding: 0 30rpx;
font-size: 24rpx;
line-height: 1.6;
color: #c2c2c2;
margin: 10rpx 0 18rpx;
}
.collection-sign{
position: absolute;
right: 22rpx;
top: 22rpx;
}
.collection-sign>image{
display: block;
width: 45rpx;
height: 41rpx;
margin: 0 auto;
}
.collection-sign>text{
font-size: 24rpx;
line-height: 2;
color: #FFFFFF;
}
.pull-list .pull-item-shop{
width: calc(50% - 14rpx);
height: auto;
}
.pull-item-shop .img{
height: 215rpx;
overflow: hidden;
}
.pull-item-shop .img>image {
width: 100%;
min-height: 215rpx;
}
.pull-item-shop .item-bg {
height: auto;
background-color: #FFFFFF;
position: static;
}
.pull-item-shop .title {
padding: 15rpx 20rpx;
font-size: 24rpx;
line-height: 1.8;
color: #000;
-webkit-line-clamp: 2;
}
</style>

30
components/scroll-views/readme.md Normal file
View File

@ -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',//下滑线颜色
}

257
components/scroll-views/scroll-text-slide.vue Normal file
View File

@ -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>

550
components/shopping-carts/cart-slide.vue Normal file
View File

@ -0,0 +1,550 @@
<template>
<view>
<view class="slide-list">
<view class="slide-item" v-for="(item, index) in listData" :key="index">
<view class="slide-item-li" @click="clickItemMethod(item)">
<label class="radio"><radio :checked="item.ifcheck" @tap.stop="chooseEv(index)" color="#0073bc"/></label>
<view class="shop-img " @tap="goDetail(item.spuId,item.is_series)">
<image :src="item.image" mode="widthFix"></image>
</view>
<view class="shop-txt">
<view class="shop-txt-top">
<view class="title">{{item.title}}</view>
<view class="specs clips2">规格：{{item.customTitle==''?item.skuName:item.customTitle}}</view>
</view>
<view class="shop-txt-bottom">
<!-- 商品价格 -->
<view class="price">￥{{$toolAll.tools.changeNum(item.price)}}</view>
<!-- 商品数量 -->
<view class="num">
<!-- 减数量 -->
<i class="icon icon-cut count-btn" @tap.stop="addCutEv(index,0)" :style="{backgroundColor: item.num==minNum || item.slide_x!=0 ? '#d3d3d3' : '#0073bc'}"></i>
<!-- 实际数量 -->
<input class="input" type="digit" @blur="blurEv(index,$event)" @focus="focusEv(item.num)" :disabled="item.slide_x!=0" v-model="item.num">
<!-- 加数量 -->
<i class="icon icon-add count-btn" @tap.stop="addCutEv(index,1)" :style="{backgroundColor: item.num==maxNum || item.slide_x!=0 ? '#d3d3d3' : '#0073bc'}"></i>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 全选 -->
<view class="change-all">
<label class="label" @tap="chooseAll"><radio :checked="allChoose" color="#0073bc" style="transform: scale(.8);"/><text>全选</text></label>
<view class="all-price">
<view class="price">合计：<span>￥{{$toolAll.tools.changeNum(allPrice)}}</span></view>
<view class="btn" :style="{background: !buyNum ? '#cccccc' : '#0073bc'}" @tap="submitEv">{{allPrice==0 ? '去购物' : `提交订单 (${buyNum})`}}</view>
</view>
</view>
<view v-if="listData.length!=0 && total==listData.length"><pitera textStr="—— 到底啦 ——"></pitera></view>
<nothing-page v-if="!ifLoading && !listData.length" content="您的购物车,空空如也(*^▽^*)"></nothing-page>
</view>
</template>
<script>
import { mapState,mapGetters,mapMutations } from 'vuex'//引入mapState
import pitera from '@/components/nothing/pitera';
import {getCartNum} from '@/jsFile/public-api.js';
export default {
components:{
pitera
},
name: 'cart-slide',
props: {
list: { //数据list
type: Array,
default () {
return [];
}
},
button: { //按钮数据list
type: Array,
default () {
return [
// {title: '分享',background: '#c4c7cd'},
{title: '删除',background: 'linear-gradient(to right,#ff3771 0%,#fd5549 100%)'}
];
}
},
customB:{
type:String,
default:'0'
},
skuId:{
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:99999,//最大可输入数量
minNum:1,//最小可输入数量
ifLoading:true,
page:1,
size:10,
total:0,
};
},
mounted() {
this.listData = this.list;
this.getList();
},
methods: {
getList(){
uni.showLoading();
this.total = 0;
let params = {
page:this.page,
size:this.size
}
this.$requst.post('/api/order/shopping-cart',params).then(res=>{
if(res.code==0){
this.total = res.data.total;
if(this.page==1) this.listData = [];
if(res.data.list.length){
res.data.list.forEach(item=>{
let obj = {
id: item.id,
spuId:item.spu.id,
skuId:item.sku_id,
coding:item.sku.coding,
image: item.spu.spu_cover,
title: item.spu.spu_name,
content: item.spu.unit,
customTitle: item.sku.custom_title,
skuName: item.sku.sku_name,
is_series:item.spu.is_series,
slide_x: 0,
price:parseInt(item.sku.sku_price),
num:item.num,
ifcheck:this.skuId==item.sku_id ? true : false,
ifExit:true,
ifShow:true,
}
this.listData.push(obj);
console.log(this.listData);
})
}
}
this.ifLoading = false;
uni.hideLoading();
})
// 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) {
// 去购物
uni.reLaunch({
url:`/pages/tabbar/cate/cate`
})
} else {
// 去结算
let buyList = [];
this.listData.forEach(item=>{
if(item.ifcheck) {
let obj = {
sku_coding: item.coding,
num: item.num
}
buyList.push(obj);
}
})
uni.setStorageSync('buyList',buyList);
uni.navigateTo({
url:'/pagesA/cart/settlement'
})
}
},
// 选中事件
chooseEv(index) {
this.listData[index].ifcheck = !this.listData[index].ifcheck;
},
// 数量加减事件
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--;
}else{
uni.showModal({
title: '提示',
content: '是否将该商品移除购物车？',
success: (res)=> {
if (res.confirm) {
this.delShopEv(this.listData[index].id);
}
}
});
}
}
this.$requst.post('/api/order/shopping-cart-change-num',{id:this.listData[index].id,num:this.listData[index].num}).then(res=>{
if(res.code!=0){
this.$toolAll.tools.showToast(res.msg);
}
})
}
},
// 删除商品
delShopEv(id){
this.$requst.post('/api/order/shopping-cart-del',{id:id}).then(res=>{
if(res.code==0){
this.$toolAll.tools.showToast('删除成功');
this.getList();
}else{
this.$toolAll.tools.showToast(res.msg)
}
})
},
// 查看商品详情
goDetail(id,type) {
if(type == 0){
uni.navigateTo({
url:`/pagesA/shop/detail?id=${id}&source=shop`
})
}
if(type == 1){
uni.navigateTo({
url:`/pages/tabbar/kit/detail?id=${id}`
})
}
},
// 输入框获取焦点事件
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.$requst.post('/api/order/shopping-cart-del',{id:this.listData[index].id}).then(res=>{
if(res.code==0){
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)
getCartNum();
}
})
// }
},
/**
* 点击按钮触发事件
* @param {Object} item 列表数据
*/
clickItemMethod(item) {
this.$emit("click", item)
}
}
};
</script>
<style scoped>
.slide-list{
margin-top: 20rpx;
}
.slide-item{
margin-top: 30rpx;
}
.slide-list .slide-item:first-child{
margin-top: 0;
}
.slide-item-li{
box-sizing: border-box;
display: flex;
align-items: center;
padding: 20rpx 30rpx;
background-color: #FFFFFF;
}
.slide-item-li .radio>radio{
transform: scale(.8);
}
.slide-item-li .shop-img{
width: 230rpx;
height: 150rpx;
border-radius: 10rpx;
margin: 0 24rpx 0 6rpx;
overflow: hidden;
}
.slide-item-li .shop-img image{
width: 230rpx;
min-height: 150rpx;
}
.slide-item-li .shop-txt{
width: calc(100% - 300rpx);
}
.shop-txt-top{
min-height: 100rpx;
}
.shop-txt-top .title{
font-size: 30rpx;
line-height: 1.5;
color: #000000;
font-weight: bold;
}
.shop-txt-top .specs{
font-size: 24rpx;
line-height: 1.5;
color: #8c8c9b;
margin: 3rpx;
}
.shop-txt-bottom{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 50rpx;
}
.shop-txt-bottom .price{
font-size: 30rpx;
line-height: 1.5;
color: #f81c1c;
}
.shop-txt-bottom .num{
display: flex;
justify-content: space-between;
align-items: center;
width: 170rpx;
font-size: 24rpx;
}
.shop-txt-bottom .num>.count-btn{
display: flex;
justify-content: center;
align-items: center;
font-size: 24rpx;
width: 40rpx;
height: 40rpx;
background-color: #000000;
color: #FFFFFF;
border-radius: 10rpx;
}
.shop-txt-bottom .num>.input{
box-sizing: border-box;
width: 78rpx;
height: 40rpx;
border: 2rpx solid #d3d3d3;
border-radius: 10rpx;
text-align: center;
}
.change-all{
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
width: 100vw;
height: 130rpx;
padding: 0 30rpx;
position: fixed;
left: 0;
bottom: 0;
background-color: #FFFFFF;
}
.change-all .label{
display: flex;
align-items: center;
font-size: 24rpx;
}
.all-price{
display: flex;
align-items: center;
}
.all-price .price{
font-size: 24rpx;
margin-right: 25rpx;
color: #000000;
}
.all-price .btn{
line-height: 84rpx;
padding: 0 30rpx;
border-radius: 10rpx;
font-size: 32rpx;
color: #FFFFFF;
}
</style>

175
components/status-navs/status-nav.vue Normal file
View File

@ -0,0 +1,175 @@
<template>
<view class="status-box" :style="{marginBottom: marginBottom}">
<!-- 网络、电量栏 -->
<view :style="{height: statusBarHeight+'px',background: backgroudColor}"></view>
<!-- 头部状态栏 -->
<view class="status-nav flex" :style="{background: backgroudColor,height:navBarHeight}">
<!-- 返回键 -->
<view class="left-box flex" @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>
<!-- 标题 -->
<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>
<!-- 右侧图标 -->
<view class="right-box flex" :style="{height: navBarHeight}">
<slot name="rightcontent"></slot>
</view>
</view>
</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: '#000000'
},
// 标题是否居中
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,
fail: () => {
uni.reLaunch({
url: '/pages/tabbar/index/index'
})
}
})
}
}
}
</script>
<style scoped>
.status-box {
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.status-nav {
align-items: center;
width: 100%;
position: relative;
}
.left-box {
justify-content: center;
align-items: center;
position: absolute;
padding: 0 20rpx;
}
.right-box {
justify-content: center;
align-items: center;
position: absolute;
right: 0;
padding: 0 20rpx;
}
.tab-title {
width: 100%;
font-size: 36rpx;
display: flex;
}
.tab-title .title-box {
margin-top: -4rpx;
}
</style>

124
components/swiper-tab/swiper-adaptive.vue Normal file
View File

@ -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>

177
components/swiper-tab/swiper-tab-jl.vue Normal file
View File

@ -0,0 +1,177 @@
<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}">
</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: inline-block;
// height: 6rpx;
position: absolute;
width: 0;
height: 64rpx;
bottom: 0rpx;
left: 0;
z-index: -1;
top: 0;
right: 0;
// border-radius: 6rpx;
background: #ff3673;
border-radius: 20rpx;
}
}
</style>

169
components/swiper-tab/swiper-tab-slide.vue Normal file
View File

@ -0,0 +1,169 @@
<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>

171
components/swiper-tab/swiper-tab.vue Normal file
View File

@ -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>

182
components/swipers/swiper-pu.vue Normal file
View File

@ -0,0 +1,182 @@
<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: 'rgba(255,255,255,1)'
},
defaultc: {
type: String,
default: 'rgba(255,255,255,.3)'
}
},
data() {
return {
bcurrent: 0, // 默认当前选中项
isShowVideo: false, // 是否显示视频
autoplay: false, // 是否开启自动轮播
isVedio: uni.getStorageSync('is_vedio') // 是否是视频
};
},
methods: {
// 图片点击事件
chooseImg(index, url) {
console.log('当前banner图', index, url);
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
})
}
if (url) {
// 有链接，跳转链接
uni.navigateTo({
url: `/${url}`
})
console.log(`/${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;
border-radius: 100%;
margin: 0 6rpx;
}
</style>

15
jsFile/public-api.js Normal file
View File

@ -0,0 +1,15 @@
import requst from './requst.js';
import store from '@/store/index.js'
// 查询轮播位置
export function slidePosition(data) {
return requst.get("/api/common/slide-positions");
}
// 查询购物车数量
export function getCartNum(){
return requst.get('/api/order/shopping-cart-count').then(res=>{
if(res.code==0){
store.commit('setNum', res.data.count)
}
})
}

169
jsFile/requst.js Normal file
View File

@ -0,0 +1,169 @@
// 清理所有缓存并前往登录授权页
const goLogin = () => {
uni.clearStorageSync();
uni.navigateTo({
url: '/pages/login/login'
})
}
let flag = true;
// 刷新token并跳转到当前页面
var authTimer = null;
const refreshTokenPage = () => {
clearTimeout(authTimer);
uni.showToast({
title: `请授权登录`,
icon:'none',
duration: 1000
});
authTimer = setTimeout(()=>{
uni.reLaunch({url:'/pages/login/login'});
},1000)
flag = true;
}
// 请求错误处理
const checkError = (e) => {
console.log('500接口错误');
// 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) {
resolve(res.data);
if(res.data.code !== 0){
// 接口返回错误信息
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)
}
}

610
jsFile/tools.js Normal file
View File

@ -0,0 +1,610 @@
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://luban.scdxtc.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.reLaunch({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,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),//要去的经度-地址
address: address,
fail:err=>{
tools.showToast('地址信息错误');
}
})
}
})
// #endif
// #ifdef APP-PLUS || H5
uni.openLocation({
latitude: parseFloat(latitude),
longitude: parseFloat(longitude),
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: ()=> {
uni.showToast({title:'保存成功',icon:'error'})
},
fail: () => {
uni.showToast({title:'保存失败',icon:'error'})
}
});
}
})
} else {
wx.saveFile({
tempFilePath: src,
success:(wximg)=> {}
})
}
// #endif
}
}
export default {
tools
}

29
main.js Normal file
View File

@ -0,0 +1,29 @@
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;
Vue.prototype.$hostHttp = 'https://luban.scdxtc.cn';
App.mpType = 'app';
const app = new Vue({
store,
...App
})
app.$mount()

87
manifest.json Normal file
View File

@ -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"
}
}

15
package-lock.json generated Normal file
View File

@ -0,0 +1,15 @@
{
"name": "轮播视频和图片",
"version": "1.0.1",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "轮播视频和图片",
"version": "1.0.1",
"dependencies": {
"moment": "^2.29.3"
}
}
}
}

11
package.json Normal file
View File

@ -0,0 +1,11 @@
{
"id": "zhuge-swiper",
"name": "轮播视频和图片",
"version": "1.0.1",
"description": "自动轮播视频和图片组件。播放视频时停止轮播，手动滑动swiper时视频停止播放",
"keywords": [
"vue",
"swiper",
"zhuge"
]
}

198
pages.json Normal file
View File

@ -0,0 +1,198 @@
{
"pages": [
{ //首页
"path": "pages/tabbar/index/index",
"style": {
"navigationBarTitleText": "首页",
"enablePullDownRefresh": false
}
},
{ //分类
"path": "pages/tabbar/cate/cate",
"style": {
"navigationBarTitleText": "分类",
"enablePullDownRefresh": false
}
},
{ //套件
"path": "pages/tabbar/kit/kit",
"style": {
"navigationBarTitleText": "套件",
"enablePullDownRefresh": false
}
},
{ //套件详情
"path": "pages/tabbar/kit/detail",
"style": {
"navigationBarTitleText": "套件简介",
"enablePullDownRefresh": false
}
},
{ //资讯
"path": "pages/tabbar/news/news",
"style": {
"navigationBarTitleText": "资讯",
"enablePullDownRefresh": false
}
},
{ //收藏
"path": "pages/tabbar/news/collection",
"style": {
"navigationBarTitleText": "收藏",
"enablePullDownRefresh": false
}
},
{ //资讯详情
"path": "pages/tabbar/news/detail",
"style": {
"navigationBarTitleText": "资讯",
"enablePullDownRefresh": false
}
},
{ //我的
"path": "pages/tabbar/my/my",
"style": {
"navigationBarTitleText": "我的",
"enablePullDownRefresh": false
}
},
{ //登录
"path" : "pages/login/login",
"style" : {
"navigationBarTitleText": "登录",
"enablePullDownRefresh": false
}
},
{ //登录协议
"path" : "pages/login/agreement",
"style" : {
"navigationBarTitleText": "登录协议",
"enablePullDownRefresh": false
}
}
],
"subPackages": [{ //A包
"root": "pagesA",
"pages": [
{ //购物车
"path" : "cart/cart",
"style" : {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{ //订单提交
"path" : "cart/settlement",
"style" : {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{ //订单完成
"path" : "cart/finish",
"style" : {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{ //商品列表
"path" : "shop/shop",
"style" : {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{ //商品简介
"path" : "shop/detail",
"style" : {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{ //订单管理
"path" : "order/order",
"style" : {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{ //订单详情
"path" : "order/detail",
"style" : {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
]
},
{ //B包
"root": "pagesB",
"pages": [
{ //个人资料
"path" : "ucenter/ucenter",
"style" : {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{ //编辑资料
"path" : "ucenter/edit",
"style" : {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{ //免责申明
"path" : "disclaimers/disclaimers",
"style" : {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{ //关于我们
"path" : "about/about",
"style" : {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{ //搜索
"path" : "search/search",
"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函数里面得到
}
]
}
}

47
pages/login/agreement.vue Normal file
View File

@ -0,0 +1,47 @@
<template>
<view>
<status-nav :ifReturn="true" navBarTitle="用户服务协议" :marginBottom="0"></status-nav>
<!-- 内容 -->
<view class="disclaimers" :style="{'min-height':agreementHeight}">
<view class="disclaimers-txt">
<rich-text :nodes="agreement"></rich-text>
</view>
</view>
</view>
</template>
<script>
import statusNav from '@/components/status-navs/status-nav';
import {getCartNum} from '@/jsFile/public-api.js';
import { mapState } from 'vuex'//引入mapState
export default {
components:{
statusNav
},
data() {
return {
agreementHeight: `calc(100vh - ${uni.getSystemInfoSync().statusBarHeight + 50}px)`,
agreement:'',
}
},
onLoad() {
this.getDisclaimers();
},
methods: {
// 查询免责声明
getDisclaimers(){
this.$requst.get('/api/index/agreement').then(res=>{
if(res.code==0){
this.agreement = this.$toolAll.tools.escape2Html(res.data.content);
} else {
this.$toolAll.tools.showToast(res.msg);
}
})
}
}
}
</script>
<style>
</style>

141
pages/login/login.vue Normal file
View File

@ -0,0 +1,141 @@
<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 rgba(0,0,0,.8)'}" mode="aspectFill" :src="userInfo.avatarUrl || imgSrc"></image>
<view class="logo-name">{{appletName}}</view>
</view>
<view class="login-footer">
<button class='login-btn' :style="{background:publicColor || '#0073bc'}" type='primary' @tap="bindGetUserInfo">微信授权</button>
<view class="agreement-box">登录代表您已同意<text @tap="toAgreement" class="agreement">《用户服务协议》</text></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
userInfo: {}, //用户信息
canIGetUserProfile: false,
imgSrc: '/static/public/avatar.png', //默认logo头像
appletName:'鲁班小程序', //小程序名称
isShowP:false,
};
},
onLoad() {
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/index/index'})
},
getphonenumber(e){//授权绑定手机号
let ya = this;
wx.login({
success:(res)=>{
this.$requst.post('/api/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;
} else this.$toolAll.tools.showToast(res.msg);
},error=>{})
} else {
// console.log('取消授权手机号')
}
}).catch(err=>{
console.log(err);
})
}
})
},
toAgreement(){
uni.navigateTo({
url:'/pages/login/agreement'
})
},
//调起登录授权
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('/api/user/login',params).then(res => {
if(res.code == 0){
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)//缓存邀请码
if(uni.getStorageSync('page-path-options')) {
uni.reLaunch({ // 重新进入当前页面
url:uni.getStorageSync('page-path-options')
})
} else {
uni.reLaunch({
url:'/pages/tabbar/index/index'
})
}
}
},error => {})
}
}
}
</script>
<style scoped>
</style>

180
pages/tabbar/cate/cate.vue Normal file
View File

@ -0,0 +1,180 @@
<template>
<view class="pad-b150">
<status-nav :ifReturn="false" navBarTitle="分类" :marginBottom="0"></status-nav>
<!-- 选择厂家 -->
<view class="pull-all-bg" v-show="isShow" @tap="closeMore"></view>
<view class="company-top" v-if="businessId==0"></view>
<view class="company" :style="{'top':topHieght+'px'}" v-if="businessId==0">
<input type="text" :value="companyList[companyIndex].name?'工厂选择：'+ companyList[companyIndex].name:''" @tap="openMore">
<view class="company-list" v-if="isShow">
<view @tap="checkValue(index,item.id)" class="company-item" :class="companyIndex == index?'cur':''" v-for="(item,index) in companyList">{{item.name}}</view>
</view>
</view>
<!-- 一级分类列表 -->
<view class="cate-nav-bg" :style="{'height':scrollHeight+'px','top':topHieght+'px'}" :class="businessId==0?'':'to-top'">
<view class="cate-nav">
<view class="cate-nav-item" :class="cateIndex == index?'active':''" @tap="changeCate(index,item.id)" v-for="(item,index) in cateList" :key="index">{{item.title}}</view>
</view>
</view>
<!-- 二级分类列表 -->
<scroll-view class="shop-list-bg" :class="businessId==0?'':'to-top'">
<view class="shop-list flex">
<view class="shop-item" @tap="toShop(item.id)" v-for="(item,index) in secondList" :key="index">
<view class="img flex"><image :src="item.cover" mode="widthFix"></image></view>
<view class="txt clips1">{{item.title}}</view>
</view>
</view>
<view class="tips" v-if="isTips">---没有更多分类---</view>
</scroll-view>
<!-- 购物车btn -->
<enter-cart></enter-cart>
<!-- 底部tab -->
<foot-tab current="1"></foot-tab>
</view>
</template>
<script>
import statusNav from '@/components/status-navs/status-nav';
import enterCart from '@/components/enter-cart/enter-cart.vue';
// 底部组件
import footTab from '@/components/foot-tab/foot-tab.vue';
import {getCartNum} from '@/jsFile/public-api.js';
import { mapState } from 'vuex'//引入mapState
export default {
components:{
statusNav,
enterCart,
footTab
},
data() {
return {
scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
newWidth:uni.getSystemInfoSync().windowWidth,
topHieght: uni.getSystemInfoSync().statusBarHeight + 50,
companyList:[], //工厂列表
companyIndex: 0, //当前厂家
isShow: false, //显示弹窗
cateList:[], //一级分类列表
cateIndex:0,
secondList:[], //二级分类列表
total:0,
flag:true,
ifLoading:false,
businessId:0, //分类id
isTips:false, //是否提示
}
},
computed:{
...mapState({
footHeight: state => state.moduleA.footHeight,
}),
},
onLoad(op) {
this.getCompanyList(); //查询商户
},
onReachBottom(e) {
},
// 分享到微信
onShareAppMessage() {
},
// 分享到朋友圈
onShareTimeline(){
},
methods: {
// 获取用户信息
getUserInfo(){
uni.showLoading();
this.$requst.get('/api/user/info').then(res=>{
if(res.code==0) {
this.businessId = res.data.business_id;
this.getCateList(res.data.business_id); //查询一级分类
}
})
},
// 弹出厂家选择框
openMore(){
if(!this.isShow){
this.isShow = true;
}else{
this.isShow = false;
}
},
// 关闭厂家选择
closeMore(){
this.isShow = false;
},
// 选择厂家
checkValue(index,id){
this.companyIndex = index;
this.getCateList(id); //查询一级分类
// 关闭厂家选择
this.closeMore();
},
// 选择分类
changeCate(index,id){
this.cateIndex = index;
// 查询二级
this.isTips = false;
this.secondList=[];
this.getSecondList(this.cateIndex);
},
// 查询工厂列表
getCompanyList(){
this.$requst.get('/api/spu/business').then(res=>{
if(res.code==0) {
this.companyList = res.data; //商户列表
// 查询一级分类
if(this.companyList.length>0){
this.getCateList(this.companyList[0].id);
}else{
this.getCateList(0);
}
}
})
},
// 查询一级分类
getCateList(pid){
this.$requst.get('/api/spu/category',{business_id:pid}).then(res=>{
if(res.code==0) {
if(res.data.length>0){
uni.setStorageSync('companyIndex',this.companyIndex); //工厂index
uni.setStorageSync('businessId',this.businessId); //工厂id
this.cateIndex = 0;
this.cateList = [];
this.cateList = res.data; //一级分类
// 查询二级
this.getSecondList(this.cateIndex);
}else{
this.$toolAll.tools.showToast('该商户不能选择');
this.companyIndex = uni.getStorageSync('companyIndex'); //还原工厂index
this.businessId = uni.getStorageSync('businessId'); //还原工厂id
}
}
uni.hideLoading();
})
},
// 查询二级分类
getSecondList(index){
if(this.cateList[index].has_children){
this.secondList = this.cateList[index].children;
}else{
this.isTips = true;
}
},
// 跳转详情页
toShop(id) {
uni.navigateTo({
url:`/pagesA/shop/shop?category_id=${id}&business_id=${this.businessId}`
})
},
}
}
</script>
<style>
</style>

263
pages/tabbar/index/index.vue Normal file
View File

@ -0,0 +1,263 @@
<template>
<view class="pad-b150" v-if="!ifLoading">
<status-nav :ifReturn="false" navBarTitle="首页" :marginBottom="0"></status-nav>
<!-- 搜索 -->
<view class="search-bg">
<view class="search flex">
<image class="search-img" src="/static/public/icon-search.png" mode="widthFix"></image>
<input class="search-input" v-model="keyword" type="text" placeholder="请输入关键词" placeholder-style="color: #666666">
<view class="search-line"></view>
<view class="search-btn flex" @tap="toSearch">搜索</view>
</view>
</view>
<!-- 轮播图 -->
<view class="banner">
<swiper-pu newRadius="0" :bannerList="bannerList" newHeight="372rpx" newBottom="20rpx" :isplay='isplay'></swiper-pu>
</view>
<!-- 推荐列表 -->
<view class="flag-list flex">
<view class="flag-item" @tap="toLink(item.url)" v-for="(item,index) in recommendList" :key="index">
<view class="flag-img"><image class="search-img" :src="item.src" mode="widthFix"></image></view>
<view class="flag-txt clips1">{{item.title}}</view>
</view>
</view>
<!-- 推荐商品 -->
<view class="index-product-list" v-for="(item,index) in productList" :key="index">
<view class="product-list-title flex">
<view class="txt">
<text>{{item.title}}</text>
<view class="line"></view>
</view>
<view class="more" @tap="toMore">
<image src="/static/public/icon-more.png" mode="widthFix"></image>
</view>
</view>
<product-list :list="item.goods" :newWidth="item.goods.length*460-490+'rpx'" @toDetail="toShopDetail"></product-list>
</view>
<!-- 疑难解答&行业资讯 -->
<view class="index-news">
<nav-tab :list="navTabList" :maxNum="1" @chooseEv="chooseEv"></nav-tab>
<pull-list :list="articleList" @toDetail="toArticleDetail"></pull-list>
</view>
<!-- 暂无更多内容 -->
<view class="more-txt" v-if="totalAll == total">暂无更多内容</view>
<!-- 购物车btn -->
<enter-cart></enter-cart>
<!-- 底部tab -->
<foot-tab></foot-tab>
</view>
</template>
<script>
import statusNav from '@/components/status-navs/status-nav';
import swiperPu from '@/components/swipers/swiper-pu';
import enterCart from '@/components/enter-cart/enter-cart.vue';
import footTab from '@/components/foot-tab/foot-tab.vue';
import productList from '@/components/product-list/product-list.vue';
import navTab from '@/components/nav-tab/nav-tab.vue';
import pullList from '@/components/pull-list/pull-list.vue';
import {slidePosition} from '@/jsFile/public-api.js';
import { mapState } from 'vuex'//引入mapState
export default {
components:{
statusNav,
swiperPu,
productList,
navTab,
pullList,
footTab,
enterCart,
},
data() {
return {
padt:uni.getSystemInfoSync().statusBarHeight + 50,
headHeight:'',//头部导航高
keyword:'', //关键词
bannerList:[], //轮播图列表
isplay:false, //是否自动轮播
playTimer:null, //间隔时间
recommendList:[], //推荐列表
productList:[],// 产品列表
articleNavId:'',//文章导航id
articleList:[], //文章列表
navTabList:[],//导航列表
currentIndex:0, //当前位置
page:1, //第几页
size:5, //查询条数
total:0, //数量
totalAll:-1,//总数
ifLoading:true,
}
},
computed:{
...mapState({
geList: state => state.moduleA.geList,
}),
},
// 分享到微信
onShareAppMessage() {
},
// 分享到朋友圈
onShareTimeline(){
},
onShow() {
slidePosition().then(res=>{
if(res.code==0) {
console.log(res.data,74);
}
})
this.playTimer = setTimeout(()=>{
this.isplay = true;
},2000)
},
onLoad() {
this.getHomeData();
this.getArticleNav();
},
onReady() {
},
onReachBottom(e) {
if(this.articleList.length<this.total){
this.page++;
this.getArticleList();
}else{
this.totalAll = this.total;
return false;
}
},
onHide() {
clearTimeout(this.playTimer);
},
methods: {
// 获取首页数据
getHomeData(){
this.$requst.get('/api/index/home').then(res=>{
if(res.code == 0){
let bannerArr = [];
let isVideo = false
res.data.banner.forEach(item=>{
let obj = {
imgSrc:item.src,
url:item.url,
isVideo:isVideo,
}
bannerArr.push(obj)
})
this.bannerList = bannerArr;
this.recommendList =res.data['banner-next-2'];
this.productList = res.data.spu;
this.ifLoading = false;
}
})
},
// 获取文章栏目
getArticleNav(){
this.$requst.get('/api/archives/category').then(res=>{
if(res.code == 0){
res.data.forEach(item=>{
let obj = {
id:item.id,
name:item.title
}
this.navTabList.push(obj)
})
this.articleNavId = this.navTabList[0].id;
// 获取文章列表
this.getArticleList();
}
})
},
// 切换事件
chooseEv(index,id){
if(this.currentIndex !== index){
this.articleList = [];
this.page = 1;
this.currentIndex = index;
this.articleNavId = id;
// 获取文章列表
this.getArticleList();
}
},
// 获取文章列表
getArticleList(){
uni.showLoading();
let params = {
page:this.page,
size:this.size,
category_id:this.articleNavId
}
this.$requst.get('/api/archives/list',params).then(res=>{
if(res.code == 0){
this.total = res.data.total;
let newArr = [];
res.data.list.forEach(item=>{
let obj = {
id:item.id,
title:item.title,
time:this.dateFormat(item.published_at),
src:item.cover
}
newArr.push(obj)
})
this.articleList = newArr;
}
uni.hideLoading();
})
},
// 时间格式转换
dateFormat (dateData) {
var date = new Date(dateData)
var y = date.getFullYear()
var m = date.getMonth() + 1
m = m < 10 ? '0' + m : m
var d = date.getDate()
d = d < 10 ? '0' + d : d
const time = y + '.' + m + '.' + d
return time
},
// 去商品列表
toMore(){
uni.navigateTo({
url:`/pages/tabbar/cate/cate`
})
},
//去推荐详情页
toLink(url){
if(url !== ''){
uni.navigateTo({
url: `/${url}`
})
}
},
//去商品详情
toShopDetail(id){
uni.navigateTo({
url:`/pagesA/shop/detail?id=${id.id}&source=shop`
})
},
//去文章详情
toArticleDetail(id){
uni.navigateTo({
url:`/pages/tabbar/news/detail?id=${id.id}`
})
},
// 去搜索页面
toSearch(){
uni.navigateTo({
url:`/pagesB/search/search?keyword=${this.keyword}`
})
},
}
}
</script>
<style scoped>
page{
background-color: #eaeaea;
}
</style>

187
pages/tabbar/kit/detail.vue Normal file
View File

@ -0,0 +1,187 @@
<template>
<view class="pad-b140">
<status-nav :ifReturn="true" navBarTitle="套件简介" :marginBottom="0"></status-nav>
<!-- 商品轮播图 -->
<view class="shop-img">
<swiper-pu newRadius="0" :bannerList="kitBanner" newHeight="505rpx" newBottom="35rpx" :isplay='isplay'></swiper-pu>
</view>
<!-- 商品概述 -->
<view class="shop-summary kit-summary">
<view class="shop-title">{{kitDetail.name}}</view>
<view class="shop-txt flex">
<view class="left">
<view class="shop-customized">{{kitDetail.customized==1?'可定制':'不可定制'}}</view>
<view class="kit-compose">{{kitDetail.subtitle}}</view>
<view class="shop-pric">￥{{kitDetail.price}}</view>
</view>
<view class="right flex">
<view class="collection-btn flex" :class="kitDetail.is_collected == 1?'active':''" @tap="collectionEv(kitDetail.id)">
<image src="/static/public/icon-collection.png" mode="widthFix"></image>
<text>收藏</text>
</view>
<view class="share-btn flex">
<image src="/static/public/icon-share.png" mode="widthFix"></image>
<text>分享</text>
<button plain="true" data-name="shareBtn" open-type="share"></button>
</view>
</view>
</view>
</view>
<!-- 套件包含 -->
<view class="kit-contain">
<view class="contain-h2">套件包含</view>
<view class="contain-list flex">
<view class="contain-item" @tap="toDetail(item.id)" v-for="(item,index) in kitDetail.series" :key="index">
<view class="contain-img">
<image :src="item.cover" mode="widthFix"></image>
</view>
<view class="contain-title clips2">{{item.name}}</view>
</view>
</view>
</view>
<!-- 底部按钮 -->
<view class="shop-btns flex">
<view class="btn" @tap="joinCart(specsIndex)">加入购物车</view>
<view class="btn" @tap="buyNow(specsIndex)">立即购买</view>
</view>
<!-- 购物车btn -->
<enter-cart :bottom="335"></enter-cart>
<!-- 客服btn -->
<customer-service></customer-service>
</view>
</template>
<script>
import statusNav from '@/components/status-navs/status-nav';
import enterCart from '@/components/enter-cart/enter-cart.vue';
import customerService from '@/components/customer-service/customer-service.vue';
import swiperPu from '@/components/swipers/swiper-pu';
import {getCartNum} from '@/jsFile/public-api.js';
import { mapState } from 'vuex'//引入mapState
export default {
components:{
statusNav,
swiperPu,
enterCart,
customerService,
},
data() {
return {
scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
newWidth:uni.getSystemInfoSync().windowWidth,
isplay:false,
kitDetail:{}, //套件详情
kitSku:[], //套件规格
isShow:false, //是否展示规格弹窗
kitIndex:0, //规格选中位置
kitBanner:[], //套件轮播
action:'collect', //收藏类型
id:'' //套件id
}
},
computed:{
...mapState({
footHeight: state => state.moduleA.footHeight,
}),
},
onLoad(op) {
if(op !== ''){
this.id = op.id;
this.getKitDetail(this.id);
}
},
onShow() {
},
// 分享到微信
onShareAppMessage() {
},
// 分享到朋友圈
onShareTimeline(){
},
methods: {
//查询套件详情
getKitDetail(id){
uni.showLoading();
this.$requst.get('/api/spu/detail',{id:id}).then(res=>{
if(res.code==0) {
this.kitDetail = res.data.detail; //套件详情
this.kitSku = res.data.sku; //套件规格
let newArr = [];
res.data.detail.images.forEach(item=>{
let obj = {
imgSrc:item,
}
newArr.push(obj)
})
this.kitBanner = newArr; //详情轮播图
}
uni.hideLoading();
})
},
//收藏
collectionEv(id){
let params = {
id:id,
action:this.action
}
if(this.kitDetail.is_collected == 1){
this.$requst.post('/api/spu/un-record',params).then(res=>{
if(res.code==0) {
// this.$toolAll.tools.showToast('取消收藏成功');
this.getKitDetail(this.id);
}
})
}else{
this.$requst.post('/api/spu/record',params).then(res=>{
if(res.code==0) {
// this.$toolAll.tools.showToast('收藏成功');
this.getKitDetail(this.id);
}
})
}
},
// 加入购物车
joinCart(){
if(this.$toolAll.tools.judgeAuth()) {
this.$requst.post('/api/order/shopping-cart-add',{sku_id:this.kitSku[this.kitIndex].id,num:1}).then(res=>{
if(res.code==0) {
this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)');
getCartNum();
} else {
this.$toolAll.tools.showToast(res.msg)
}
})
}
},
// 立即购买
buyNow(){
if(this.$toolAll.tools.judgeAuth()) {
this.$requst.post('/api/order/shopping-cart-add',{sku_id:this.kitSku[this.kitIndex].id,num:1}).then(res=>{
if(res.code==0) {
uni.navigateTo({
url:`/pagesA/cart/cart`
})
} else {
this.$toolAll.tools.showToast(res.msg)
}
})
}
},
// 去商品详情
toDetail(id){
uni.navigateTo({
url:`/pagesA/shop/detail?id=${id}&source=kit`
})
}
}
}
</script>
<style>
</style>

126
pages/tabbar/kit/kit.vue Normal file
View File

@ -0,0 +1,126 @@
<template>
<view class="pad-b150">
<status-nav :ifReturn="false" navBarTitle="套件" :marginBottom="20"></status-nav>
<!-- 套件列表 -->
<view class="kit-list">
<view class="kit-item" @tap.stop="toDetail(item.id)" v-for="(item,index) in kitList" :key="index">
<view class="kit-title">{{item.name}}</view>
<view class="kit-compose">
<text v-for="(item1,index1) in item.series" :key="index1">{{item1.name}}+</text>
<text>组合</text>
</view>
<view class="kit-img">
<image :src="item.cover" mode="widthFix"></image>
</view>
<view class="compose-list-bg">
<view class="compose-list flex" v-if="item.series.length>0" :style="{width:item.series.length*270-22+'rpx'}">
<view class="compose-item" v-for="(item2,index2) in item.series" :key="index2">
<view class="compose-img">
<image :src="item2.cover" mode="widthFix"></image>
</view>
<view class="compose-title clips1">{{item2.name}}</view>
</view>
</view>
</view>
</view>
</view>
<!-- 购物车btn -->
<enter-cart></enter-cart>
<!-- 底部tab -->
<foot-tab current="2"></foot-tab>
</view>
</template>
<script>
import statusNav from '@/components/status-navs/status-nav';
import enterCart from '@/components/enter-cart/enter-cart.vue';
// 底部组件
import footTab from '@/components/foot-tab/foot-tab.vue';
import {getCartNum} from '@/jsFile/public-api.js';
import { mapState } from 'vuex'//引入mapState
export default {
components:{
statusNav,
enterCart,
footTab
},
data() {
return {
scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
newWidth:uni.getSystemInfoSync().windowWidth,
kitList:[], //套件列表
page:1, //页数
size:10, //数量
total:0, //总数
totalAll:-1, //计算总数
category_id:0, //分类id
sort:'new', //排序
}
},
computed:{
...mapState({
footHeight: state => state.moduleA.footHeight,
}),
},
onLoad(op) {
this.getKitEv();
},
onReachBottom(e) {
if(this.kitList.length<this.total){
this.page++;
//查询套件列表
this.getKitEv();
}else{
this.totalAll = this.total;
}
},
// 分享到微信
onShareAppMessage() {
},
// 分享到朋友圈
onShareTimeline(){
},
methods: {
// 查询套件列表
getKitEv(){
uni.showLoading();
let params = {
page:this.page,
size:this.size,
category_id:this.category_id,
sort:this.sort
}
this.$requst.post('/api/spu/series',params).then(res=>{
if(res.code==0) {
this.total = res.data.total;
console.log(res,'套件列表')
let newArr = [];
res.data.list.forEach(item=>{
let obj = {
id:item.id,
cover:item.cover,
name:item.name,
series:item.series
}
newArr.push(obj);
})
this.kitList = newArr;
}
uni.hideLoading();
})
},
// 跳转详情页
toDetail(id) {
uni.navigateTo({
url:'/pages/tabbar/kit/detail?id='+id
})
},
}
}
</script>
<style>
</style>

334
pages/tabbar/my/my.vue Normal file
View File

@ -0,0 +1,334 @@
<template>
<view class="pad-b150">
<status-nav :ifReturn="false" navBarTitle="我的" :marginBottom="0"></status-nav>
<!-- 头部 -->
<view class="my-herder">
<!-- 头像 -->
<view class="my-portrait">
<view class="my-portrait-img">
<image :src="headPortrait" mode="widthFix"></image>
</view>
<view class="my-vip flex"><image src="/static/public/icon-vip.png" mode="widthFix"></image></view>
</view>
<!-- 用户名 -->
<view class="my-nick-name">{{nickName}}</view>
<!-- 订单量 -->
<view class="my-order flex">
<view class="item" v-for="(item,index) in myOrder" :key="index" @tap="changeOrder(index)">
<text v-if="item.num < 100">{{item.num}}</text>
<text v-if="item.num >= 100">99+</text>
<view>{{item.title}}</view>
</view>
</view>
</view>
<!-- 其他资料 -->
<view class="my-content">
<view class="item flex" v-for="(item,index) in listData" :key="index" @tap.stop="toMore(index)">
<view class="left flex">
<view class="flex">
<view class="img flex">
<image :src="item.imgSrc" :style="{width:item.iconWidth+'rpx',height:item.iconHeight+'rpx'}" mode="widthFix"></image>
</view>
<view class="title">{{item.titele}}</view>
</view>
<view class="tips" v-if="index==1">输入会员码成为会员</view>
<view class="tips" v-if="index==2">申请成为会员可查看低价</view>
</view>
<view class="right">
<view class="more" v-if="index!==6">
<image src="/static/public/icon-my-more.png" mode="widthFix"></image>
</view>
<view class="btn flex" :class="isShow?'show':''" v-if="index == 6" @tap.stop="changeShow">
<view class="circular"></view>
</view>
</view>
</view>
</view>
<!-- 商家客服 -->
<view class="customer-all-bg" :style="{'padding-top':newTop+'px'}" v-if="isCustomer" @tap.stop="closeCustomer">
<view class="customer-txt">
<image :src="customerSrc" mode="widthFix"></image>
<text>请保存相册扫码添加客服</text>
<view class="btn" @tap.stop="saveImg">保存二维码</view>
</view>
</view>
<!-- 申请会员 -->
<view class="pull-all-bg" v-show="isVip||isChecked"></view>
<view class="vip-box-bg" v-if="isVip">
<view class="vip-box">
<view class="title">会员申请</view>
<view class="vip-list">
<view class="vip-item">
<view class="tips">姓名<text>*</text></view>
<input class="input" type="text" v-model="myName" placeholder="请输入姓名" placeholder-color="#c9c9c9">
</view>
<view class="vip-item">
<view class="tips">电话<text>*</text></view>
<input class="input" type="number" v-model="myPhone" placeholder="请输入电话" placeholder-color="#c9c9c9">
</view>
<view class="vip-item">
<view class="tips">邀请人姓名</view>
<input class="input" type="text" v-model="inviteeName" placeholder="请输入邀请人姓名" placeholder-color="#c9c9c9">
</view>
<view class="vip-item">
<view class="tips">邀请人会员码</view>
<input class="input" type="text" v-model="inviteeCode" placeholder="请输入邀请人会员码" placeholder-color="#c9c9c9">
</view>
</view>
<view class="vip-btns">
<view class="btn" @tap="closeEv">取消</view>
<view class="btn" @tap="submitEv">提交</view>
</view>
</view>
</view>
<!-- 验证会员码 -->
<view class="edit-box-bg"v-if="isChecked">
<view class="edit-box">
<view class="title">验证会员码</view>
<view class="subtitle">会员码<text>*</text></view>
<input class="input" type="text" v-model="vipCode" placeholder="请输入会员码" placeholder-color="#c9c9c9">
<view class="edit-btns">
<view class="btn" @tap="closeCheck">取消</view>
<view class="btn" @tap="checkCode">确认</view>
</view>
</view>
</view>
<!-- 购物车btn -->
<enter-cart :bottom="150"></enter-cart>
<!-- 底部tab -->
<foot-tab current="4"></foot-tab>
</view>
</template>
<script>
import statusNav from '@/components/status-navs/status-nav';
import enterCart from '@/components/enter-cart/enter-cart.vue';
import footTab from '@/components/foot-tab/foot-tab.vue';
export default {
components:{
statusNav,
enterCart,
footTab,
},
data() {
return {
newTop:uni.getSystemInfoSync().statusBarHeight + 50,
headPortrait:'', //头像
nickName:'', //用户名
businessCode:'', //是否会员
customerSrc:'', //商家客服二维码
myOrder:[
{title:'全部订单',tag:'all',num:0},
{title:'已下单',tag:'ordered',num:0},
{title:'已完成',tag:'completed',num:0},
{title:'已取消',tag:'closed',num:0},
],//订单
listData:[
{titele:'个人资料',imgSrc:'/static/public/icon-my-01.png',iconWidth:43,iconHeight:43},
{titele:'会员码输入',imgSrc:'/static/public/icon-my-02.png',iconWidth:41,iconHeight:35},
{titele:'会员申请',imgSrc:'/static/public/icon-my-03.png',iconWidth:40,iconHeight:40},
{titele:'我的收藏',imgSrc:'/static/public/icon-my-04.png',iconWidth:49,iconHeight:47},
{titele:'关于我们',imgSrc:'/static/public/icon-my-05.png',iconWidth:33,iconHeight:31},
{titele:'免责申明',imgSrc:'/static/public/icon-my-06.png',iconWidth:38,iconHeight:38},
{titele:'是否显示会员价',imgSrc:'/static/public/icon-my-07.png',iconWidth:39,iconHeight:26},
{titele:'商家客服',imgSrc:'/static/public/icon-my-08.png',iconWidth:35,iconHeight:37}
],//列表数据
isShow:true, //是否显示会员价
isCustomer:false, //商家客服
isVip:false, //会员申请弹窗
myName:'', //姓名
myPhone:'', //电话
inviteeName:'', //邀请人
inviteeCode:'', //会员码
flag:true,
vipCode:'', //会员码
isChecked:false, //验证会员码
}
},
onReachBottom() {
},
onHide() {
},
onLoad() {
this.getUserInfo();
this.getCustomer();
},
onShow() {
},
methods: {
// 获取用户信息
getUserInfo(){
uni.showLoading();
this.$requst.get('/api/user/info').then(res=>{
console.log(res,'用户信息')
if(res.code==0) {
let newArr = res.data.order_count;
this.headPortrait = res.data.headimgurl,
this.nickName = res.data.nickname
this.businessCode = res.data.business_code
this.myOrder[0].num = newArr.all,
this.myOrder[1].num = newArr.ordered,
this.myOrder[2].num = newArr.completed,
this.myOrder[3].num = newArr.closed
}
uni.hideLoading();
})
},
// 获取商家客服
getCustomer(){
this.$requst.post('/api/user/business-qr').then(res=>{
console.log(res,'商家客服')
if(res.code==0) {
this.customerSrc = res.data.qr;
}
})
},
// 是否显示会员价
changeShow(){
this.isShow = !this.isShow;
},
// 跳转方式
toMore(index){
if(index == 6){
return false;
}else{
if(index == 0){
uni.navigateTo({
url:`/pagesB/ucenter/ucenter`
})
}
if(index == 1){
this.isChecked = true;
}
if(index == 2){
this.isVip =true;
}
if(index == 3){
uni.navigateTo({
url:`/pages/tabbar/news/collection`
})
}
if(index == 4){
uni.navigateTo({
url:`/pagesB/about/about`
})
}
if(index == 5){
uni.navigateTo({
url:`/pagesB/disclaimers/disclaimers`
})
}
if(index == 7){
this.isCustomer = true;
}
}
},
// 提交会员申请
submitEv(){
if(this.checkEmpty() && this.flag){
this.flag = false;
let params = {
name:this.myName,
phone:this.myPhone,
invite_name:this.inviteeName,
invite_code:this.inviteeCode,
}
this.$requst.post('/api/user/vip',params).then(res=>{
if(res.code==0) {
this.closeEv(); //关闭会员申请
this.getUserInfo(); // 刷新信息
}else{
this.$toolAll.tools.showToast(res.msg);
this.flag = true;
}
})
}
},
// 验证表单
checkEmpty(){
let result = false;
if(!this.myName) {
this.$toolAll.tools.showToast('请填写姓名');
} else if(this.$toolAll.tools.isPhone(this.myPhone)) {
this.$toolAll.tools.showToast('请正确填写联系电话');
} else {
result = true;
}
return result;
},
//关闭会员申请
closeEv(){
this.isVip = false;
this.myName = '';
this.myPhone = '';
this.inviteeName = '';
this.inviteeCode = '';
this.flag = true;
},
// 验证会员码
checkCode(){
if(this.vipCode !== ''){
this.$requst.post('/api/user/check-code',{code:this.vipCode}).then(res=>{
if(res.code==0) {
this.$toolAll.tools.showToast('验证成功');
this.closeCheck(); //清除验证信息
}else{
this.$toolAll.tools.showToast(res.msg);
}
})
}else{
this.$toolAll.tools.showToast('会员码不能为空');
}
},
// 取消验证会员码
closeCheck(){
this.isChecked = false;
this.vipCode = '';
},
// 跳转订单管理
changeOrder(index){
uni.navigateTo({
url:`/pagesA/order/order?tag=${this.myOrder[index].tag}&index=${index}`
})
},
// 选择
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]}`
})
},
// 关闭商家客服
closeCustomer(){
this.isCustomer = false;
},
// 保存二维码
saveImg(){
this.$toolAll.tools.saveImg(this.customerSrc);
}
}
}
</script>
<style>
</style>

195
pages/tabbar/news/collection.vue Normal file
View File

@ -0,0 +1,195 @@
<template>
<view>
<status-nav :ifReturn="true" navBarTitle="收藏" :marginBottom="0"></status-nav>
<!-- 导航 -->
<view class="nav-list-bg" :style="{top:newTop+'px'}">
<nav-tab :list="navTabList" @chooseEv="chooseEv"></nav-tab>
</view>
<!-- 列表 -->
<view class="news-list-bg">
<pull-list :list="collectionList" :collection="1" :isShop="isShop" @toDetail="toArticleDetail" @collectionEv="collectionEv"></pull-list>
</view>
<!-- 暂无更多内容 -->
<view class="more-txt more-txt-other" v-if="total == 0">暂无更多内容</view>
</view>
</template>
<script>
import statusNav from '@/components/status-navs/status-nav';
import navTab from '@/components/nav-tab/nav-tab.vue';
import pullList from '@/components/pull-list/pull-list.vue';
import {getCartNum} from '@/jsFile/public-api.js';
import { mapState } from 'vuex'//引入mapState
export default {
components:{
statusNav,
navTab,
pullList
},
data() {
return {
scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
newWidth:uni.getSystemInfoSync().windowWidth,
newTop:uni.getSystemInfoSync().statusBarHeight + 50,
collectionList:[], //解答&资讯列表
navTabList:[ //导航列表
{name:'商品'},
{name:'文章'},
],
currentIndex:0, //当前位置
page:1, //第几页
size:10, //查询条数
total:0, //总数
totalAll:-1, //计算总数
isShop:true, //是否商品
}
},
computed:{
...mapState({
footHeight: state => state.moduleA.footHeight,
}),
},
onLoad() {
},
onReady() {
this.getCollectionList();
},
onReachBottom(e) {
if(this.collectionList.length<this.total){
this.page++;
this.getArticleList();
}else{
this.totalAll = this.total;
return false;
}
this.page++;
this.getCollectionList();
},
// 分享到微信
onShareAppMessage() {
},
// 分享到朋友圈
onShareTimeline(){
},
methods: {
// 切换事件
chooseEv(type){
if(type == 0){
this.isShop = true;
}
if(type == 1){
this.isShop = false;
}
if(this.currentIndex !== type){
this.page = 1;
this.currentIndex = type;
this.getCollectionList();
}
},
// 获取收藏列表
getCollectionList(){
let params = {
page:this.page,
size:this.size
}
if(this.currentIndex == 0){
uni.showLoading();
this.$requst.get('/api/spu/collection',params).then(res=>{
if(res.code == 0){
this.total = res.data.total;
let newArr = [];
res.data.list.forEach(item=>{
let obj = {
id:item.id,
src:item.cover,
title:item.name,
time:'',
}
newArr.push(obj)
})
this.collectionList = newArr;
}
uni.hideLoading();
})
}
if(this.currentIndex == 1){
this.$requst.get('/api/archives/collects',params).then(res=>{
if(res.code == 0){
this.total = res.data.total;
let newArr = [];
res.data.list.forEach(item=>{
let obj = {
id:item.id,
src:item.cover,
title:item.title,
time:this.dateFormat(item.published_at)
}
newArr.push(obj)
})
this.collectionList = newArr;
}
})
}
},
// 时间格式转换
dateFormat (dateData) {
var date = new Date(dateData)
var y = date.getFullYear()
var m = date.getMonth() + 1
m = m < 10 ? '0' + m : m
var d = date.getDate()
d = d < 10 ? '0' + d : d
const time = y + '.' + m + '.' + d
return time
},
//收藏
collectionEv(id){
console.log(id,12121)
if(this.currentIndex == 0){
let params = {
id:id.id,
action:'collect'
}
this.$requst.post('/api/spu/un-record',params).then(res=>{
if(res.code==0) {
this.$toolAll.tools.showToast('取消收藏成功');
this.getCollectionList();
}
})
}
if(this.currentIndex == 1){
let params = {
archive_id:id.id,
action:'collect'
}
this.$requst.post('/api/archives/un-record',params).then(res=>{
if(res.code==0) {
this.$toolAll.tools.showToast('取消收藏成功');
this.getCollectionList();
}
})
}
},
//去文章详情
toArticleDetail(id){
if(this.currentIndex == 0){
uni.navigateTo({
url:`/pagesA/shop/detail?id=${id.id}&source=shop`
})
}
if(this.currentIndex == 1){
uni.navigateTo({
url:`/pages/tabbar/news/detail?id=${id.id}`
})
}
}
}
}
</script>
<style>
</style>

165
pages/tabbar/news/detail.vue Normal file
View File

@ -0,0 +1,165 @@
<template>
<view>
<status-nav :ifReturn="true" navBarTitle="新闻详情" :marginBottom="0"></status-nav>
<!-- 新闻视频 -->
<view class="news-video-img" v-if="articleDetail.video">
<image :src="articleDetail.cover" mode="widthFix"></image>
<view class="news-video-btn" @tap.stop="playEv(articleDetail.video)">
<image src="/static/public/icon-suspend.png" mode="widthFix" v-if="videoPlay"></image>
<image src="/static/public/icon-play.png" mode="widthFix" v-else></image>
</view>
</view>
<!-- 视频弹窗 -->
<view class="news-video-content" v-if="videoPlay" :style="{width:newWidth+'px'}"></view>
<video id="my-video" controls :src="articleDetail.video" v-if="videoPlay" @fullscreenchange="screenChange" :style="{width:newWidth+'px'}"></video>
<!-- 新闻概述 -->
<view class="shop-summary news-summary">
<view class="shop-title">{{articleDetail.title}}</view>
<view class="shop-txt news-txt flex">
<view class="left">
<view class="news-author">作者：{{articleDetail.author}}</view>
<view class="news-time">发布时间：{{time}}</view>
</view>
<view class="right flex">
<view class="collection-btn flex" :class="articleDetail.is_collected == 1?'active':''" @tap="collectionEv(articleDetail.id)">
<image src="/static/public/icon-collection.png" mode="widthFix"></image>
<text>收藏</text>
</view>
<view class="share-btn flex">
<image src="/static/public/icon-share.png" mode="widthFix"></image>
<text>分享</text>
<button plain="true" data-name="shareBtn" open-type="share"></button>
</view>
</view>
</view>
</view>
<!-- 新闻详情 -->
<view class="shop-detail news-detail">
<rich-text :nodes="content"></rich-text>
</view>
</view>
</template>
<script>
import statusNav from '@/components/status-navs/status-nav';
import {getCartNum} from '@/jsFile/public-api.js';
import { mapState } from 'vuex'//引入mapState
export default {
components:{
statusNav
},
data() {
return {
scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
newWidth:uni.getSystemInfoSync().windowWidth,
videoPlay: false, //是否全屏
videoUrl:'', //视频url
articleDetail:{}, //文章详情
id:'',//文章id
action:'collect', //收藏类型
time:'', //发布时间
content:'',//文章内容
}
},
computed:{
},
onLoad(op) {
this.id = op.id;
this.getDetail(this.id);
},
onShareAppMessage() {
},
onShow() {
// getNewsDetail()
},
// 分享到微信
onShareAppMessage() {
},
// 分享到朋友圈
onShareTimeline(){
},
methods: {
// 全屏播放
playEv(url){
this.videoContext = uni.createVideoContext("my-video", this); // this这个是实例对象 必传
this.videoUrl = url;
this.videoContext.play();
this.videoContext.requestFullScreen({ direction: 90 });
this.videoPlay = true; // 显示播放盒子
},
// 退出全屏
screenChange(e) {
if (e.detail.fullScreen) {
//退出全屏
this.videoPlay = false; // 隐藏播放盒子
}
},
//收藏
collectionEv(){
console.log(this.shopDetail.collection,'是否分享')
if(this.shopDetail.collection !== 0){
this.shopDetail.collection = 1
}else{
this.shopDetail.collection = 0
}
},
// 查询文章详情
getDetail(id){
uni.showLoading();
this.$requst.post('/api/archives/detail',{id:id}).then(res=>{
if(res.code==0) {
console.log(res,'文章详情')
this.articleDetail = res.data;
this.time = this.dateFormat(res.data.published_at)
this.content = this.$toolAll.tools.escape2Html(res.data.content)
}
uni.hideLoading();
})
},
// 时间格式转换
dateFormat (dateData) {
var date = new Date(dateData)
var y = date.getFullYear()
var m = date.getMonth() + 1
m = m < 10 ? '0' + m : m
var d = date.getDate()
d = d < 10 ? '0' + d : d
const time = y + '.' + m + '.' + d
return time
},
//收藏
collectionEv(id){
let params = {
archive_id:id,
action:this.action
}
if(this.articleDetail.is_collected == 1){
this.$requst.post('/api/archives/un-record',params).then(res=>{
if(res.code==0) {
// this.$toolAll.tools.showToast('取消收藏成功');
this.getDetail(this.id);
}
})
}else{
this.$requst.post('/api/archives/record',params).then(res=>{
if(res.code==0) {
// this.$toolAll.tools.showToast('收藏成功');
this.getDetail(this.id);
}
})
}
},
}
}
</script>
<style>
</style>

153
pages/tabbar/news/news.vue Normal file
View File

@ -0,0 +1,153 @@
<template>
<view class="pad-b150">
<status-nav :ifReturn="false" navBarTitle="资讯" :marginBottom="0"></status-nav>
<view class="nav-list-bg" :style="{top:newTop+'px'}">
<nav-tab :list="navTabList" @chooseEv="chooseEv"></nav-tab>
</view>
<view class="news-list-bg">
<pull-list :list="articleList" :collection="0" @toDetail="toArticleDetail"></pull-list>
</view>
<!-- 暂无更多内容 -->
<view class="more-txt" v-if="totalAll == total">暂无更多内容</view>
<!-- 购物车btn -->
<enter-cart></enter-cart>
<!-- 底部tab -->
<foot-tab current="3"></foot-tab>
</view>
</template>
<script>
import statusNav from '@/components/status-navs/status-nav';
import navTab from '@/components/nav-tab/nav-tab.vue';
import pullList from '@/components/pull-list/pull-list.vue';
import enterCart from '@/components/enter-cart/enter-cart.vue';
// 底部组件
import footTab from '@/components/foot-tab/foot-tab.vue';
import {getCartNum} from '@/jsFile/public-api.js';
import { mapState } from 'vuex'//引入mapState
export default {
components:{
statusNav,
navTab,
pullList,
enterCart,
footTab,
},
data() {
return {
scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
newWidth:uni.getSystemInfoSync().windowWidth,
newTop:uni.getSystemInfoSync().statusBarHeight + 50,
articleList:[], //解答&资讯列表
navTabList:[], //导航列表
currentIndex:0, //当前位置
page:1, //第几页
size:10, //查询条数
total:0, //总数
totalAll:-1,//总数
}
},
computed:{
...mapState({
footHeight: state => state.moduleA.footHeight,
}),
},
onLoad() {
this.getArticleNav();
},
onReachBottom(e) {
if(this.articleList.length<this.total){
this.page++;
this.getArticleList();
}else{
this.totalAll = this.total;
return false;
}
},
// 分享到微信
onShareAppMessage() {
},
// 分享到朋友圈
onShareTimeline(){
},
methods: {
// 获取文章栏目
getArticleNav(){
this.$requst.get('/api/archives/category').then(res=>{
if(res.code == 0){
res.data.forEach(item=>{
let obj = {
id:item.id,
name:item.title
}
this.navTabList.push(obj)
})
this.articleNavId = this.navTabList[0].id;
// 获取文章列表
this.getArticleList();
}
})
},
// 切换事件
chooseEv(index,id){
console.log(index,id,1212121)
if(this.currentIndex !== index){
this.articleList = [];
this.page = 1;
this.currentIndex = index;
this.articleNavId = id;
// 获取文章列表
this.getArticleList();
}
},
// 获取疑难解答、行业资讯列表
getArticleList(){
uni.showLoading();
let params = {
page:this.page,
size:this.size,
category_id:this.articleNavId
}
this.$requst.get('/api/archives/list',params).then(res=>{
if(res.code == 0){
this.total = res.data.total;
let newArr = [];
res.data.list.forEach(item=>{
let obj = {
id:item.id,
title:item.title,
time:this.dateFormat(item.published_at),
src:item.cover
}
newArr.push(obj)
})
this.articleList = newArr;
}
uni.hideLoading();
})
},
// 时间格式转换
dateFormat (dateData) {
var date = new Date(dateData)
var y = date.getFullYear()
var m = date.getMonth() + 1
m = m < 10 ? '0' + m : m
var d = date.getDate()
d = d < 10 ? '0' + d : d
const time = y + '.' + m + '.' + d
return time
},
//去文章详情
toArticleDetail(id){
uni.navigateTo({
url:`/pages/tabbar/news/detail?id=${id.id}`
})
},
}
}
</script>
<style>
</style>

41
pagesA/cart/cart.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<view class="pad-b150">
<status-nav :ifReturn="true" navBarTitle="购物车" :marginBottom="0"></status-nav>
<view class="cart-content">
<cart-slide ref="cart" :skuId='skuId'></cart-slide>
</view>
</view>
</template>
<script>
// 底部组件
import statusNav from '@/components/status-navs/status-nav.vue';
import cartSlide from '@/components/shopping-carts/cart-slide';
export default {
components:{
statusNav,
cartSlide
},
data() {
return {
skuId:''
}
},
onReachBottom() {
this.$refs.cart.getList();
},
onShow() {
uni.removeStorageSync('buyList');
},
onLoad(op) {
if(op.skuId) this.skuId = op.skuId;
},
methods: {
}
}
</script>
<style>
</style>

65
pagesA/cart/finish.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<view>
<status-nav :ifReturn="false" navBarTitle="完成" :marginBottom="0"></status-nav>
<view class="finish-content">
<view class="finish-img">
<image :src="imgsrc" mode="widthFix"></image>
</view>
<view class="finish-code">订单：{{orderCode}}</view>
<view class="finish-title">已完成提交</view>
<view class="finish-tips">
<view>请扫描二维码添加微信告知您的订单</view>
<view>号并支付定金 ，发货前请支付尾款。</view>
<!-- <rich-text :nodes="richText"></rich-text> -->
</view>
<view @tap="saveImg" class="cope-btn">保存二维码</view>
<view @tap="goShop" class="shoping-btn">继续购物</view>
</view>
</view>
</template>
<script>
import statusNav from '@/components/status-navs/status-nav';
export default {
components:{
statusNav
},
data() {
return {
imgsrc:'',
orderCode:'',//订单号
}
},
onLoad(op) {
console.log(op,'传值')
this.orderCode = op.coding;
this.$requst.get('/api/user/business-qr',{id:op.id}).then(res=>{
if(res.code==0) {
this.imgsrc = res.data.qr;
}
})
},
methods: {
// 提交
submit(){
if(this.checkEmpty() && this.flag){
this.flag = false;
}
},
// 继续购物
goShop(){
uni.navigateTo({
url:'/pages/tabbar/cate/cate'
})
},
// 保存二维码
saveImg(){
this.$toolAll.tools.saveImg(this.imgsrc);
}
}
}
</script>
<style>
</style>

129
pagesA/cart/settlement.vue Normal file
View File

@ -0,0 +1,129 @@
<template>
<view class="pad-b150">
<status-nav :ifReturn="true" navBarTitle="订单提交" :marginBottom="0"></status-nav>
<view class="settlement-content">
<view class="settlement-title">联系方式</view>
<view class="settlement-tips">请输入您的联系方式，我们将尽快与您联系并确认订单信息！</view>
<view class="settlement-list">
<view class="settlement-item">
<view class="name">联系人</view>
<view class="txt flex">
<text>称呼</text>
<input type="text" v-model="name" @tap="chooseEv(0)" :class="current==0 ? 'focusc' : ''" placeholder="请输入您的称呼" placeholder-style="color:#999999">
</view>
</view>
<view class="settlement-item">
<view class="name">联系方式</view>
<view class="txt flex">
<text>电话</text>
<input type="text" v-model="phone" @tap="chooseEv(1)" :class="current==1 ? 'focusc' : ''" placeholder="请输入手机号码" placeholder-style="color:#999999">
</view>
</view>
<view class="settlement-item">
<view class="name">联系地址</view>
<view class="txt flex">
<text>地址</text>
<input type="text" v-model="address" @tap="chooseEv(2)" :class="current==2 ? 'focusc' : ''" placeholder="请输入地址" placeholder-style="color:#999999">
</view>
</view>
<view class="settlement-item">
<view class="name">送货时间</view>
<view class="txt flex">
<text>日期</text>
<picker mode="date" @change="chooseTime(3,$event)">
<input type="text" v-model="toTime" disabled @tap="chooseEv(0)" :class="current==0 ? 'focusc' : ''" placeholder="请选择送货日期" placeholder-style="color:#999999">
</picker>
</view>
</view>
</view>
</view>
<view class="settlement-btn flex">
<view class="btn" @tap="submit">提交订单</view>
</view>
</view>
</template>
<script>
import statusNav from '@/components/status-navs/status-nav';
export default {
components:{
statusNav
},
data() {
return {
current:6,
toTime:'',// 时间
address:'',// 地址
name:'',// 称呼
phone:'',// 电话
flag:true
}
},
onLoad() {
console.log(uni.getStorageSync('buyList'),'缓存数组')
},
onShow() {
this.getUserInfo()
},
methods: {
// 获取默认信息
getUserInfo(){
this.$requst.get('/api/user/info').then(res=>{
console.log(res,'用户信息')
if(res.code==0) {
this.address = res.data.order_address; //地址
this.name = res.data.order_contact; //联系人
this.phone = res.data.order_phone; //电话
}
})
},
// 提交
submit(){
if(this.checkEmpty() && this.flag){
this.flag = false;
let params = {
sku_list: uni.getStorageSync('buyList'),
order_phone: this.phone,
order_contact: this.name,
order_address: this.address,
order_date: this.toTime,
}
this.$requst.post('/api/order/create',params).then(res=>{
if(res.code==0) {
uni.navigateTo({
url:`/pagesA/cart/finish?id=${res.data.id}&coding=${res.data.coding}`
})
}else{
console.log(res.msg,'提示信息')
this.$toolAll.tools.showToast(res.msg);
this.flag = true;
}
})
}
},
checkEmpty(){
let result = false;
if(!this.name) {
this.$toolAll.tools.showToast('请填写联系人');
} else if(this.$toolAll.tools.isPhone(this.phone)) {
this.$toolAll.tools.showToast('请正确填写联系电话');
} else if(!this.address) {
this.$toolAll.tools.showToast('请填写收货地址');
} else {
result = true;
}
return result;
},
chooseEv(index) {
this.current = index;
},
chooseTime(index,e) {
this.toTime = e.detail.value;
}
}
}
</script>
<style>
</style>

159
pagesA/order/detail.vue Normal file
View File

@ -0,0 +1,159 @@
<template>
<view class="pad-b140">
<status-nav :ifReturn="true" navBarTitle="订单详情" :marginBottom="0"></status-nav>
<!-- 订单简介 -->
<view class="order-info-bg">
<view class="order-info">
<view class="flex">
<text>订单编号</text>
<text>{{orderDetail.coding}}</text>
</view>
<view class="flex">
<text>下单时间</text>
<text>{{orderDetail.created_at}}</text>
</view>
<view class="flex">
<text>订单状态</text>
<text>{{orderDetail.status_text}}</text>
</view>
</view>
</view>
<!-- 订单信息 -->
<view class="order-list">
<view class="order-item order-item-detail">
<view class="order-information">订单信息</view>
<view class="item-bg">
<view class="item flex" v-for="(item,index) in orderDetail.skus" :key="index" @tap="toDetail(item.spu_id,item.is_series)">
<view class="img"><image :src="item.spu_cover" mode="widthFix"></image></view>
<view class="txt">
<view class="title">{{item.spu_name}}</view>
<view class="specs clips2">规格：{{item.custom_title}}</view>
<view class="price flex">
<text>￥{{$toolAll.tools.changeNum(parseInt(item.price))}}</text>
<view><text>x</text>{{item.num}}</view>
</view>
</view>
</view>
</view>
<view class="total-price total-price-detail flex">
<text>总价：￥{{$toolAll.tools.changeNum(parseInt(orderDetail.original_price))}}</text>
</view>
</view>
</view>
<!-- 联系方式 -->
<view class="contact-info-bg">
<view class="contact-info">
<view class="title">联系方式</view>
<view class="name">
<text>{{orderDetail.contact}}</text>
<text>{{orderDetail.phone}}</text>
</view>
<view class="item">{{orderDetail.address}}</view>
<view class="item" v-if="orderDetail.remarks!==''">希望到货时间：{{orderDetail.remarks}}</view>
</view>
</view>
<!-- 底部按钮 -->
<view class="shop-btns order-btns flex">
<view class="btn btn-grey" @tap="cancleEv" v-if="orderDetail.status == 'ordered'">取消订单</view>
<view class="btn" @tap="buyAgain" v-if="orderDetail.status == 'completed' || orderDetail.status == 'closed'">再次购买</view>
</view>
<!-- 客服btn -->
<customer-service></customer-service>
</view>
</template>
<script>
import statusNav from '@/components/status-navs/status-nav';
import customerService from '@/components/customer-service/customer-service.vue';
export default {
components:{
statusNav,
customerService
},
data() {
return {
orderDetail:{}, //订单详情
flag:true,
ifLoading:false,
id:0, //订单id
}
},
onLoad(op) {
if(op.id !== ''){
this.id = op.id;
}
this.getOrderDetail();
},
// 分享到微信
onShareAppMessage() {
},
// 分享到朋友圈
onShareTimeline(){
},
methods: {
// 查询订单详情
getOrderDetail(){
uni.showLoading();
this.$requst.get('/api/user/order-detail',{id:this.id}).then(res=>{
if(res.code==0){
this.orderDetail = res.data;
}
uni.hideLoading();
})
},
// 取消订单
cancleEv(){
let params = {
order_coding: this.orderDetail.coding //订单号
}
this.$requst.post('/api/order/cancel',params).then(res=>{
if(res.code==0) {
this.$toolAll.tools.showToast('取消订单成功(*^▽^*)');
uni.navigateTo({
url:'/pagesA/order/order'
})
} else {
this.$toolAll.tools.showToast(res.msg)
}
})
},
// 再次购买
buyAgain(index){
let buyList = [];
let newArr = this.orderDetail;
newArr.skus.forEach(item=>{
let obj = {
sku_coding: item.coding,
num: item.num
}
buyList.push(obj);
})
uni.setStorageSync('buyList',buyList);
uni.navigateTo({
url:'/pagesA/cart/settlement'
})
},
//去商品详情页
toDetail(id,type){
if(type == 0){
uni.navigateTo({
url:`/pagesA/shop/detail?id=${id}&source=shop`
})
}
if(type == 1){
uni.navigateTo({
url:`/pages/tabbar/kit/detail?id=${id}`
})
}
}
}
}
</script>
<style scoped>
</style>

188
pagesA/order/order.vue Normal file
View File

@ -0,0 +1,188 @@
<template>
<view>
<status-nav :ifReturn="true" navBarTitle="订单管理" :marginBottom="0"></status-nav>
<!-- 订单导航 -->
<view class="order-nav flex" :style="{top:newTop+'px'}">
<view class="item" :class="activeIndex == index?'cur':''" v-for="(item,index) in orderNav" @tap="changeNav(index,item.tag)">{{item.title}}</view>
</view>
<!-- 订单列表 -->
<view class="order-list">
<view class="order-item" @tap.stop="toDetail(item.id)" v-for="(item,index) in orderList" :key="index">
<view class="order-code flex">
<text>订单号：{{item.coding}}</text>
<text class="status">{{item.status_text}}</text>
</view>
<view class="item-bg">
<view class="item flex" v-for="(item1,index1) in item.skus" :key="index1">
<view class="img"><image :src="item1.spu_cover" mode="widthFix"></image></view>
<view class="txt">
<view class="title">{{item1.spu_name}}</view>
<view class="specs clips2">规格：{{item1.custom_title}}</view>
<view class="price flex">
<text>￥{{$toolAll.tools.changeNum(parseInt(item1.price))}}</text>
<view><text>x</text>{{item1.num}}</view>
</view>
</view>
</view>
</view>
<view class="total-price flex">
<text>合计：￥{{$toolAll.tools.changeNum(item.original_price)}}</text>
<view class="btn" @tap.stop="cancleEv(item.coding)" v-if="item.status == 'ordered'">取消订单</view>
<view class="btn cur" @tap.stop="buyAgain(index)" v-if="item.status == 'completed' || item.status == 'closed'">再次购买</view>
</view>
</view>
</view>
<view v-if="totalAll == total"><pitera textStr="—— 到底啦 ——"></pitera></view>
<nothing-page v-if="!ifLoading && !orderList.length" content="还没有相关订单哟(*^▽^*)"></nothing-page>
</view>
</template>
<script>
import statusNav from '@/components/status-navs/status-nav';
export default {
components:{
statusNav
},
data() {
return {
newTop:uni.getSystemInfoSync().statusBarHeight + 50,
orderNav:[
{title:'全部',tag:'all'},
{title:'已下单',tag:'ordered'},
{title:'已完成',tag:'completed'},
{title:'已取消',tag:'closed'},
],
activeIndex:0,
orderList:[],
flag:true,
ifLoading:false,
total:0,
totalAll:0,
page: 1,
size: 10,
tag: 'all'
}
},
onLoad(op) {
if(op.tag !== ''){
this.tag = op.tag;
}
if(op.index !== ''){
this.activeIndex = op.index;
}
this.getOrderList();
},
onReachBottom(e) {
if(this.orderList.length<this.total){
this.page++;
this.getOrderList();
}else{
this.totalAll = this.total;
return false;
}
},
// 分享到微信
onShareAppMessage() {
},
// 分享到朋友圈
onShareTimeline(){
},
methods: {
// 导航切换
changeNav(index,tag) {
this.activeIndex = index;
this.tag = tag;
this.orderList=[];
this.page = 1;
this.getOrderList();
},
// 获取订单列表
getOrderList(){
uni.showLoading();
let params = {
page: this.page,
size: this.size,
tag: this.tag
}
this.$requst.get('/api/user/order',params).then(res=>{
if(res.data.length!=0){
this.total = res.data.total;
res.data.list.forEach(item=>{
let obj = {
id: item.id, //id
coding: item.coding, //订单号
original_price: parseInt(item.original_price), //总价
status: item.status, //订单状态英文
status_text: item.status_text, //订单状态中文
skus: item.skus //订单详情
}
this.orderList.push(obj)
})
// console.log(this.orderList,'订单列表')
}
uni.hideLoading();
})
},
// 去详情
toDetail(id){
uni.navigateTo({
url:`/pagesA/order/detail?id=${id}`
})
},
// 取消订单
cancleEv(coding){
let params = {
order_coding: coding //订单号
}
this.$requst.post('/api/order/cancel',params).then(res=>{
if(res.code==0) {
this.$toolAll.tools.showToast('取消订单成功(*^▽^*)');
this.orderList = [];
this.page = 1;
this.getOrderList();
} else {
this.$toolAll.tools.showToast(res.msg)
}
})
},
// 确认收货
affirmEv(id){
let params = {
order_id: id //订单号
}
this.$requst.post('/api/order/accepted',params).then(res=>{
if(res.code==0) {
this.$toolAll.tools.showToast('确认收货成功(*^▽^*)');
this.dataList = [];
this.page = 1;
this.getOrderList();
} else {
this.$toolAll.tools.showToast(res.msg)
}
})
},
// 再次购买
buyAgain(index){
let buyList = [];
let newArr = this.orderList[index];
newArr.skus.forEach(item=>{
let obj = {
sku_coding: item.coding,
num: item.num
}
buyList.push(obj);
})
uni.setStorageSync('buyList',buyList);
uni.navigateTo({
url:'/pagesA/cart/settlement'
})
}
}
}
</script>
<style scoped>
</style>

246
pagesA/shop/detail.vue Normal file
View File

@ -0,0 +1,246 @@
<template>
<view class="pad-b140">
<status-nav :ifReturn="true" navBarTitle="商品简介" :marginBottom="0"></status-nav>
<!-- 商品轮播图 -->
<view class="shop-img">
<swiper-pu newRadius="0" :bannerList="shopBanner" newHeight="505rpx" newBottom="35rpx" :isplay='isplay'></swiper-pu>
</view>
<!-- 商品概述 -->
<view class="shop-summary">
<view class="shop-title">{{shopDetail.name}}</view>
<view class="shop-txt flex">
<view class="left">
<view class="shop-customized">{{shopDetail.tag==''?'':shopDetail.tag}}</view>
<view class="shop-pric">￥{{shopDetail.price}}</view>
</view>
<view class="right flex">
<view class="collection-btn flex" :class="shopDetail.is_collected == 1?'active':''" @tap="collectionEv(shopDetail.id)">
<image src="/static/public/icon-collection.png" mode=""></image>
<text>收藏</text>
</view>
<view class="share-btn flex">
<image src="/static/public/icon-share.png" mode=""></image>
<text>分享</text>
<button plain="true" data-name="shareBtn" open-type="share"></button>
</view>
</view>
</view>
<view class="specs-btn flex" @tap="openSpecs(1)">
<image src="/static/public/icon-specs.png" mode="widthFix"></image>
<text>规格：查看详细规格</text>
<image src="/static/public/icon-more.png" mode="widthFix"></image>
</view>
</view>
<!-- 商品详情 -->
<view class="shop-detail">
<view class="shop-detail-tab flex">
<view class="tab-btn" :class="showCurrent == index?'cur':''" @tap="changeDetail(index)" v-for="(item,index) in shopDetailTab" :key="index">{{item}}</view>
</view>
<view class="shop-detail-txt">
<view class="txt-box" v-if="showCurrent == 0">
<rich-text :nodes="shopDetail.content"></rich-text>
</view>
<view class="txt-box" v-if="showCurrent == 1">
<view>
<rich-text :nodes="shopDetail.params"></rich-text>
</view>
</view>
</view>
</view>
<!-- 底部按钮 -->
<view class="shop-btns flex" v-if="source == 'shop'">
<view class="btn" @tap="openSpecs(0)">加入购物车</view>
<view class="btn" @tap="openSpecs(1)">立即购买</view>
</view>
<view class="kit-shop-btns" v-if="source == 'kit'">
<view class="btn" @tap="backEv">返回套件继续购买</view>
</view>
<!-- 规格弹窗 -->
<view class="pull-all-bg" v-if="isShow" @tap="closeSpecs"></view>
<view class="specs-detail-bg" v-if="isShow">
<view class="specs-detail">
<view class="close-specs" @tap="closeSpecs"><image src="/static/public/icon-close.png" mode="widthFix"></image></view>
<view class="price">￥{{shopDetail.original_price}}</view>
<view class="price"><text>会员价：</text>￥{{shopDetail.price}}</view>
<view class="specs-ul">
<text>规格</text>
<view class="specs-li flex" @tap="changeSpecs(index)" :class="specsIndex == index?'checked':''" v-for="(item,index) in shopSku" :key="index">{{item.custom_title}} 供货周期：{{item.cycle}}</view>
</view>
<view class="specs-detail-btn" @tap="buyNow(specsIndex)" v-if="changeBtns">立即购买</view>
<view class="specs-detail-btn" @tap="joinCart(specsIndex)" v-else>加入购物车</view>
</view>
</view>
<!-- 购物车btn -->
<enter-cart :bottom="335"></enter-cart>
<!-- 客服btn -->
<customer-service></customer-service>
</view>
</template>
<script>
import statusNav from '@/components/status-navs/status-nav';
import swiperPu from '@/components/swipers/swiper-pu';
import enterCart from '@/components/enter-cart/enter-cart.vue';
import customerService from '@/components/customer-service/customer-service.vue';
import {getCartNum} from '@/jsFile/public-api.js';
import { mapState } from 'vuex'//引入mapState
export default {
components:{
statusNav,
swiperPu,
enterCart,
customerService
},
data() {
return {
scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
newWidth:uni.getSystemInfoSync().windowWidth,
isplay:false,
shopDetailTab:['商品信息','商品规格'], //tab列表
shopDetail:{}, //商品详情
shopSku:[], //商品规格
shopBanner:[], //商品轮播
source:'shop', //详情分类 商品：shop 套件：kit
showCurrent:0, //详情&规格切换
isShow:false, //是否展示规格弹窗
specsIndex:0, //规格选中位置
id:0, //商品、套件id
action:'collect', //收藏类型
changeBtns:false, //按钮选择
}
},
computed:{
...mapState({
footHeight: state => state.moduleA.footHeight,
}),
},
onLoad(op) {
if(op !== ''){
this.source = op.source;
this.id = op.id;
this.getDetail(this.id);
}
},
onShow() {
},
// 分享到微信
onShareAppMessage() {
},
// 分享到朋友圈
onShareTimeline(){
},
methods: {
// 切换展示
changeDetail(index){
this.showCurrent = index;
},
// 打开规格弹窗
openSpecs(type){
if(type == 0){
this.changeBtns = false;
}
if(type == 1){
this.changeBtns = true;
}
if(!this.isShow){
this.isShow = true;
}
},
// 选择规格
changeSpecs(index){
this.specsIndex = index;
},
// 关闭规格弹窗
closeSpecs(){
this.isShow = false;
},
//查询商品详情
getDetail(id){
uni.showLoading();
this.$requst.get('/api/spu/detail',{id:id}).then(res=>{
if(res.code==0) {
console.log(res,'详情')
this.shopDetail = res.data.detail; //详情数据
this.shopSku = res.data.sku
let newArr = [];
res.data.detail.images.forEach(item=>{
let obj = {
imgSrc:item,
}
newArr.push(obj)
})
this.shopBanner = newArr; //详情轮播图
}
uni.hideLoading();
})
},
//收藏
collectionEv(id){
let params = {
id:id,
action:this.action
}
if(this.shopDetail.is_collected == 1){
this.$requst.post('/api/spu/un-record',params).then(res=>{
if(res.code==0) {
// this.$toolAll.tools.showToast('取消收藏成功');
this.getDetail(this.id);
}
})
}else{
this.$requst.post('/api/spu/record',params).then(res=>{
if(res.code==0) {
// this.$toolAll.tools.showToast('收藏成功');
this.getDetail(this.id);
}
})
}
},
// 加入购物车
joinCart(index){
if(this.$toolAll.tools.judgeAuth()) {
this.$requst.post('/api/order/shopping-cart-add',{sku_id:this.shopSku[index].id,num:1}).then(res=>{
if(res.code==0) {
this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)');
getCartNum();
// 关闭弹窗
this.closeSpecs();
} else {
this.$toolAll.tools.showToast(res.msg)
}
})
}
},
// 立即购买
buyNow(index){
if(this.$toolAll.tools.judgeAuth()) {
this.$requst.post('/api/order/shopping-cart-add',{sku_id:this.shopSku[index].id,num:1}).then(res=>{
if(res.code==0) {
// 关闭弹窗
this.closeSpecs();
uni.navigateTo({
url:`/pagesA/cart/cart`
})
} else {
this.$toolAll.tools.showToast(res.msg)
}
})
}
},
//返回事件
backEv() {
uni.navigateBack({
delta: 1,
})
}
}
}
</script>
<style>
</style>

210
pagesA/shop/shop.vue Normal file
View File

@ -0,0 +1,210 @@
<template>
<view>
<status-nav :ifReturn="true" navBarTitle="商品列表" :marginBottom="0"></status-nav>
<!-- 商品排序、分类 -->
<view class="pull-all-bg" v-if="sortShow || cateShow" @tap="closePullBg"></view>
<view class="shop-nav flex" :style="{'top':topHieght+'px'}">
<view class="shop-sort flex" @tap.stop="openSort()">
<text>{{sortList[sortIndex].name}}</text>
<image src="/static/public/icon-shop.png" mode="widthFix"></image>
</view>
<view class="shop-cate flex" @tap.stop="openCate()">
<text>{{cateList[cateIndex].title}}</text>
<image src="/static/public/icon-shop.png" mode=""></image>
</view>
<view class="shop-sort-list flex" v-if="sortShow">
<view class="shop-sort-item" :class="sortIndex == index?'cur':''" @tap.stop="checkSort(index)" v-for="(item,index) in sortList" :key="index">{{item.name}}</view>
</view>
<view class="shop-cate-list flex" v-if="cateShow">
<view class="shop-cate-item" :class="cateIndex == index?'cur':''" @tap.stop="checkCate(index)" v-for="(item,index) in cateList" :key="index">{{item.title}}</view>
</view>
</view>
<!-- 商品列表 -->
<scroll-view scroll-y class="shop-bg">
<view class="shop-ul flex">
<view class="shop-li" @tap="toDetail(item.id)" v-for="(item,index) in shopList" :key="index">
<view class="img"><image :src="item.imgsrc" mode="widthFix"></image></view>
<view class="txt clips2">{{item.title}}</view>
</view>
</view>
</scroll-view>
<!-- 暂无更多内容 -->
<view class="more-txt" style="padding-bottom: 40rpx;" v-if="totalAll==total">暂无更多内容</view>
</view>
</template>
<script>
import statusNav from '@/components/status-navs/status-nav';
import {getCartNum} from '@/jsFile/public-api.js';
import { mapState } from 'vuex'//引入mapState
export default {
components:{
statusNav,
},
data() {
return {
scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
newWidth:uni.getSystemInfoSync().windowWidth,
topHieght: uni.getSystemInfoSync().statusBarHeight + 50,
sortShow:false, //是否显示排序
sortList:[], //排序列表
sortIndex:0,
cateShow:false, //是否显示分类
cateList:[], //分类导航列表
cateIndex:0,
shopList:[], //商品列表
total:0,
flag:true,
ifLoading:false,
category_id:'', //分类id
business_id:'', //商户id
sort:'new' ,//排序
page:1, //页数
size:10, //数量
total:0, //总数
totalAll:-1, //计算总数
}
},
computed:{
...mapState({
footHeight: state => state.moduleA.footHeight,
}),
},
onLoad(op) {
this.category_id = op.category_id;
this.business_id = op.business_id;
this.getShopScreen(); //查询商品分类
},
onReachBottom(e) {
if(this.shopList.length<this.total){
this.page++;
//查询商品列表
this.getShopList();
}else{
this.totalAll = this.total;
}
},
// 分享到微信
onShareAppMessage() {
},
// 分享到朋友圈
onShareTimeline(){
},
methods: {
// 弹出排序选择
openSort(){
this.cateShow = false;
if(!this.sortShow){
this.sortShow = true;
}else{
this.sortShow = false;
}
},
// 关闭排序选择
closeSort(){
this.sortShow = false;
},
// 选择排序
checkSort(index){
this.sortIndex = index;
this.sort = this.sortList[this.sortIndex].value;
// 关闭厂家选择
this.closeSort();
//查询商品列表
this.getShopList();
},
// 弹出分类选择
openCate(){
this.sortShow = false;
if(!this.cateShow){
this.cateShow = true;
}else{
this.cateShow = false;
}
},
// 关闭分类选择
closeCate(){
this.cateShow = false;
},
// 选择分类
checkCate(index){
this.cateIndex = index;
this.category_id = this.cateList[this.cateIndex].value;
// 关闭厂家选择
this.closeCate();
//查询商品列表
this.getShopList();
},
// 关闭弹窗
closePullBg(){
this.closeSort();
// 关闭厂家选择
this.closeCate();
},
// 查询筛选条件
getShopScreen(){
let params = {
category_id:this.category_id,
business_id:this.business_id
}
this.$requst.post('/api/spu/condition',params).then(res=>{
if(res.code==0) {
console.log(res,'商品分类')
this.sortList = res.data[0].children; //排序
this.cateList = res.data[1].children; //分类
for(let key in this.cateList){
if(this.cateList[key].value == this.category_id){
this.cateIndex = key;
}
}
//查询商品列表
this.getShopList();
}
})
},
// 查询商品列表
getShopList(){
uni.showLoading();
this.ifLoading = true;
let params = {
page:this.page,
size:this.size,
category_id:this.category_id,
sort:this.sort
}
this.$requst.post('/api/spu/list',params).then(res=>{
if(res.code==0) {
this.total = res.data.total;
console.log(res,'商品列表')
let newArr = [];
res.data.list.forEach(item=>{
let obj = {
id:item.id,
imgsrc:item.cover,
title:item.name
}
newArr.push(obj);
})
this.shopList = newArr;
}
uni.hideLoading();
})
},
// 跳转详情页
toDetail(id) {
uni.navigateTo({
url:`/pagesA/shop/detail?id=${id}&source=shop`
})
},
}
}
</script>
<style>
</style>

86
pagesB/about/about.vue Normal file
View File

@ -0,0 +1,86 @@
<template>
<view>
<status-nav :ifReturn="true" navBarTitle="关于我们" :marginBottom="0"></status-nav>
<view class="about-bg" :style="{'min-height':aboutHeight}">
<!-- 地图 -->
<view class="about-map">
<map style="width: 100%; height: 390rpx;" :latitude="latitude" :longitude="longitude" :markers="markers"></map>
</view>
<!-- 导航 -->
<view class="navigation-btn" @tap="goThere">导航到我们</view>
<!-- 内容 -->
<view class="about">
<view class="about-title">免责条款</view>
<view class="about-txt">
<rich-text :nodes="aboutData"></rich-text>
</view>
</view>
</view>
</view>
</template>
<script>
import statusNav from '@/components/status-navs/status-nav';
import {getCartNum} from '@/jsFile/public-api.js';
import { mapState } from 'vuex'//引入mapState
export default {
components:{
statusNav
},
data() {
return {
aboutHeight: `calc(100vh - ${uni.getSystemInfoSync().statusBarHeight + 50}px)`,
latitude: 39.909,
longitude: 116.39742,
address:'',
markers: [{
width : 30,
height: 32,
latitude: 39.909,
longitude: 116.39742,
iconPath: '/static/public/icon-addr.png'
}],
aboutData:'',
}
},
onLoad() {
this.getAboutData();
},
// 分享到微信
onShareAppMessage() {
},
// 分享到朋友圈
onShareTimeline(){
},
methods: {
// 查询关于我们
getAboutData(){
uni.showLoading();
this.$requst.get('/api/index/about').then(res=>{
if(res.code==0){
this.aboutData = this.$toolAll.tools.escape2Html(res.data.content);
this.latitude = res.data.lat;
this.longitude = res.data.lon;
this.address = res.data.address;
this.markers[0].latitude = res.data.lat;
this.markers[0].longitude = res.data.lon;
} else {
this.$toolAll.tools.showToast(res.msg);
}
uni.hideLoading();
})
},
// 导航
goThere() {
this.$toolAll.tools.goThere(this.lat,this.lng,this.address);
}
}
}
</script>
<style>
</style>

50
pagesB/disclaimers/disclaimers.vue Normal file
View File

@ -0,0 +1,50 @@
<template>
<view>
<status-nav :ifReturn="true" navBarTitle="个人中心" :marginBottom="0"></status-nav>
<!-- 内容 -->
<view class="disclaimers" :style="{'min-height':disclaimersHeight}">
<view class="disclaimers-title">免责条款</view>
<view class="disclaimers-txt">
<rich-text :nodes="disclaimers"></rich-text>
</view>
</view>
</view>
</template>
<script>
import statusNav from '@/components/status-navs/status-nav';
import {getCartNum} from '@/jsFile/public-api.js';
import { mapState } from 'vuex'//引入mapState
export default {
components:{
statusNav
},
data() {
return {
disclaimersHeight: `calc(100vh - ${uni.getSystemInfoSync().statusBarHeight + 50}px)`,
disclaimers:'',
}
},
onLoad() {
this.getDisclaimers();
},
methods: {
// 查询免责声明
getDisclaimers(){
uni.showLoading();
this.$requst.get('/api/index/statement').then(res=>{
if(res.code==0){
this.disclaimers = this.$toolAll.tools.escape2Html(res.data.content);
} else {
this.$toolAll.tools.showToast(res.msg);
}
uni.hideLoading();
})
}
}
}
</script>
<style>
</style>

160
pagesB/search/search.vue Normal file
View File

@ -0,0 +1,160 @@
<template>
<view>
<status-nav :ifReturn="true" navBarTitle="搜索" :marginBottom="0"></status-nav>
<!-- 搜索 -->
<view class="search-bg" style="padding-bottom: 0rpx;">
<view class="search flex">
<image class="search-img" src="/static/public/icon-search.png" mode="widthFix"></image>
<input class="search-input" v-model="keyword" type="text" placeholder="请输入关键词" placeholder-style="color: #666666">
<view class="search-line"></view>
<view class="search-btn flex" @tap="toSearch">搜索</view>
</view>
</view>
<!-- 分类 -->
<view class="nav-list-bg" :style="{top:newTop+'px'}">
<nav-tab :list="navTabList" @chooseEv="chooseEv" :type="'radio'"></nav-tab>
</view>
<!-- 列表 -->
<view class="news-list-bg">
<pull-list :list="searchList" :isShop="isShop" @toDetail="toDetail"></pull-list>
</view>
<!-- 暂无更多内容 -->
<view class="more-txt more-txt-other" v-if="totalAll == total">暂无更多内容</view>
</view>
</template>
<script>
import statusNav from '@/components/status-navs/status-nav';
import navTab from '@/components/nav-tab/nav-tab.vue';
import pullList from '@/components/pull-list/pull-list.vue';
import {getCartNum} from '@/jsFile/public-api.js';
import { mapState } from 'vuex'//引入mapState
export default {
components:{
statusNav,
navTab,
pullList
},
data() {
return {
newTop:uni.getSystemInfoSync().statusBarHeight + 50,
searchList:[], //解答&资讯列表
navTabList:[ //导航列表
{name:'产品'},
{name:'资讯'},
],
currentIndex:0, //当前位置
page:1, //第几页
size:5, //查询条数
total:0, //总数
isShop:true, //是否商品
totalAll:-1, //判断总数
}
},
computed:{
...mapState({
footHeight: state => state.moduleA.footHeight,
}),
},
onLoad(op) {
this.keyword = op.keyword;
this.getSearchList();
},
onReachBottom(e) {
if(this.searchList.length<this.total){
this.page++;
this.getSearchList();
}else{
this.totalAll = this.total;
return false;
}
},
methods: {
// 切换事件
chooseEv(type){
if(type == 0){
this.isShop = true;
}
if(type == 1){
this.isShop = false;
}
if(this.currentIndex !== type){
this.page = 1;
this.currentIndex = type;
this.getSearchList();
}
},
// 获取搜索结果
getSearchList(){
let params = {
keyword:this.keyword
}
if(this.currentIndex == 0){
this.$requst.get('/api/spu/list',params).then(res=>{
if(res.code == 0){
this.total = res.data.total;
let newArr = [];
res.data.list.forEach(item=>{
let obj = {
id:item.id,
src:item.cover,
title:item.name,
time:'',
}
newArr.push(obj)
})
this.searchList = newArr;
}
})
}
if(this.currentIndex == 1){
this.$requst.get('/api/archives/list',params).then(res=>{
if(res.code == 0){
this.total = res.data.total;
let newArr = [];
res.data.list.forEach(item=>{
let obj = {
id:item.id,
src:item.cover,
title:item.title,
time:this.dateFormat(item.published_at)
}
newArr.push(obj)
})
this.searchList = newArr;
}
})
}
},
// 时间格式转换
dateFormat (dateData) {
var date = new Date(dateData)
var y = date.getFullYear()
var m = date.getMonth() + 1
m = m < 10 ? '0' + m : m
var d = date.getDate()
d = d < 10 ? '0' + d : d
const time = y + '.' + m + '.' + d
return time
},
// 跳转详情页
toDetail(id){
if(this.currentIndex == 0){
uni.navigateTo({
url:`/pagesA/shop/detail?id=${id.id}&source=shop`
})
}
if(this.currentIndex == 1){
uni.navigateTo({
url:`/pages/tabbar/news/detail?id=${id.id}`
})
}
}
}
}
</script>
<style>
</style>

211
pagesB/ucenter/edit.vue Normal file
View File

@ -0,0 +1,211 @@
<template>
<view>
<status-nav :ifReturn="false" navBarTitle="商品列表" :marginBottom="0"></status-nav>
<!-- 商品排序、分类 -->
<view class="pull-all-bg" v-if="sortShow || cateShow" @tap="closePullBg"></view>
<view class="shop-nav flex" :style="{'top':topHieght+'px'}">
<view class="shop-sort flex" @tap.stop="openSort()">
<text>{{sortList[sortIndex].name}}</text>
<image src="/static/public/icon-shop.png" mode=""></image>
</view>
<view class="shop-cate flex" @tap.stop="openCate()">
<text>{{cateList[cateIndex].name}}</text>
<image src="/static/public/icon-shop.png" mode=""></image>
</view>
<view class="shop-sort-list flex" v-if="sortShow">
<view class="shop-sort-item" :class="sortIndex == index?'cur':''" @tap.stop="checkSort(index)" v-for="(item,index) in sortList" :key="index">{{item.name}}</view>
</view>
<view class="shop-cate-list flex" v-if="cateShow">
<view class="shop-cate-item" :class="cateIndex == index?'cur':''" @tap.stop="checkCate(index)" v-for="(item,index) in cateList" :key="index">{{item.name}}</view>
</view>
</view>
<!-- 商品列表 -->
<scroll-view scroll-y class="shop-bg">
<view class="shop-ul flex">
<view class="shop-li" @tap="toDetail(item.id)" v-for="(item,index) in shopList" :key="index">
<view class="img"><image :src="item.src" mode="widthFix"></image></view>
<view class="txt clips2">{{item.title}}</view>
</view>
</view>
</scroll-view>
<!-- 暂无更多内容 -->
<view class="more-txt" style="padding-bottom: 40rpx;" v-if="total == 0">暂无更多内容</view>
</view>
</template>
<script>
import statusNav from '@/components/status-navs/status-nav';
import {getCartNum} from '@/jsFile/public-api.js';
import { mapState } from 'vuex'//引入mapState
export default {
components:{
statusNav,
},
data() {
return {
scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
newWidth:uni.getSystemInfoSync().windowWidth,
topHieght: uni.getSystemInfoSync().statusBarHeight + 50,
sortShow:false, //是否显示排序
sortList:[
{name:'上新产品',sign:'news'},
{name:'最热产品',sign:'hot'},
{name:'综合排序',sign:'general'}
], //排序列表
sortIndex:0,
cateShow:false, //是否显示分类
cateList:[
{name:'沙发',id:0},
{name:'餐桌',id:1},
{name:'老板椅',id:2},
{name:'双人床',id:3},
{name:'单人床',id:4},
{name:'灶台',id:5}
], //分类导航列表
cateIndex:0,
shopList:[
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-01.png',id:0},
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-02.png',id:0},
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-03.png',id:0},
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-04.png',id:0},
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-01.png',id:0},
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-02.png',id:0},
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-03.png',id:0},
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-04.png',id:0},
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-01.png',id:0},
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-02.png',id:0},
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-03.png',id:0},
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-04.png',id:0},
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-01.png',id:0},
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-02.png',id:0},
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-03.png',id:0},
{title:'现代简约科技布沙发组合北欧风客厅布艺沙发',src:'/static/images/product-04.png',id:0},
], //商品列表
total:0,
flag:true,
ifLoading:false,
pid:'',//分类id
}
},
computed:{
...mapState({
footHeight: state => state.moduleA.footHeight,
}),
},
onLoad(op) {
this.getShopScreen();
},
onReachBottom(e) {
console.log('触底了...')
},
methods: {
// 弹出排序选择
openSort(){
this.cateShow = false;
if(!this.sortShow){
this.sortShow = true;
}else{
this.sortShow = false;
}
},
// 关闭排序选择
closeSort(){
this.sortShow = false;
},
// 选择排序
checkSort(index){
this.sortIndex = index;
// 关闭厂家选择
this.closeSort();
//查询商品列表
// this.checkShopList();
},
// 弹出分类选择
openCate(){
this.sortShow = false;
if(!this.cateShow){
this.cateShow = true;
}else{
this.cateShow = false;
}
},
// 关闭分类选择
closeCate(){
this.cateShow = false;
},
// 选择分类
checkCate(index){
this.cateIndex = index;
// 关闭厂家选择
this.closeCate();
//查询商品列表
// this.checkShopList();
},
// 关闭弹窗
closePullBg(){
this.closeSort();
// 关闭厂家选择
this.closeCate();
},
// 查询筛选条件
getShopScreen(){
this.$requst.post('/api/spu/condition').then(res=>{
console.log(res,'商品分类')
if(res.code==0) {
}
})
},
// 查询商品列表
checkShopList(){
for(let i=0;i<this.cateList.length;i++){
console.log(i)
this.ifLoading = true;
let params = {
category_id:this.cateList[i].id
}
this.$requst.post('/api/spu/list',params).then(res=>{
if(res.code==0) {
this.total = res.data.total;
let newArr = [];
res.data.list.forEach(item=>{
let obj = {
id:item.id,
skuId:item.skuId,
imgsrc:item.cover,
title:item.name,
price:this.$toolAll.tools.changeNum(parseInt(item.price)+'')
}
newArr.push(obj);
})
this.dataList[i] = newArr;
if(i == this.cateList.length-1){
setTimeout(()=>{
const query = uni.createSelectorQuery().in(this);
query.select('.cate-title').boundingClientRect(data => {
this.heightData = data.height
}).exec();
},200)
this.getNodesInfo();
this.ifLoading = false;
}
}
})
}
},
// 跳转详情页
toDetail(id) {
uni.navigateTo({
url:`/pagesA/shop/detail?id=${id}&source=shop`
})
},
}
}
</script>
<style>
</style>

237
pagesB/ucenter/ucenter.vue Normal file
View File

@ -0,0 +1,237 @@
<template>
<view :class="editRealName&editMobile&editArea&editAddress?'':'pad-b150'">
<status-nav :ifReturn="true" navBarTitle="个人中心" :marginBottom="0"></status-nav>
<view class="ucenter">
<view class="item flex">
<view class="title">头像</view>
<view class="img" @tap="changeHeadImg">
<image :src="headImgUrl" mode="widthFix"></image>
</view>
</view>
<view class="item flex">
<view class="title">昵称</view>
<view class="msg">{{nickName}}</view>
</view>
<view class="item flex" @tap="openEdit('real_name')">
<view class="title">真实姓名</view>
<input class="msg" type="text" v-model="realName" disabled="true">
<view class="more">
<image src="/static/public/icon-my-more.png" mode="widthFix"></image>
</view>
</view>
<view class="item flex" style="position: relative;">
<view class="title">联系电话</view>
<input class="msg" type="number" v-model="mobile" disabled="true">
<view class="more">
<image src="/static/public/icon-my-more.png" mode="widthFix"></image>
</view>
<button class="get-phone-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber"></button>
</view>
<view class="item flex" @tap="openEdit('area')">
<view class="title">联系地址</view>
<input class="msg" type="text" v-model="area" disabled="true">
<view class="more">
<image src="/static/public/icon-my-more.png" mode="widthFix"></image>
</view>
</view>
<view class="item flex" @tap="openEdit('address')">
<view class="title">详细地址</view>
<input class="msg" type="text" v-model="address" disabled="true">
<view class="more">
<image src="/static/public/icon-my-more.png" mode="widthFix"></image>
</view>
</view>
<view class="item flex" v-if="businessCode!==''">
<view class="title">会员码</view>
<view class="msg">{{businessCode}}</view>
</view>
</view>
<!-- 修改弹窗 -->
<view class="pull-all-bg" v-show="isOpen" @tap="closeEdit"></view>
<view class="edit-box-bg"v-if="isOpen">
<view class="edit-box">
<view class="title">{{title}}</view>
<view class="subtitle">{{subtitle}}</view>
<input class="input" type="text" v-model="msg" :placeholder="placeholder" placeholder-color="#c9c9c9" v-if="type=='input'">
<textarea class="textarea" v-model="msg" :placeholder="placeholder" placeholder-color="#c9c9c9" v-if="type=='textarea'"></textarea>
<view class="edit-btns">
<view class="btn" @tap="closeEdit">取消</view>
<view class="btn" @tap="submitEdit(field,msg)">确认</view>
</view>
</view>
</view>
</view>
</template>
<script>
import statusNav from '@/components/status-navs/status-nav';
import {getCartNum} from '@/jsFile/public-api.js';
import { mapState } from 'vuex'//引入mapState
export default {
components:{
statusNav
},
data() {
return {
headImgUrl:'', //头像链接
nickName:'', //昵称
businessCode:'', //会员码
realName:'',//真实姓名
mobile:'',//电话
area:'',//联系地址
address:'',//详细地址
isOpen:false, //是否显示
title:'', //标题
subtitle:'', //副标题
msg:'', //修改内容
field:'', //修改位置
type:'input',
placeholder:'', //默认信息
headImg:'', //缓存头像链接
}
},
computed:{
},
onLoad(op) {
this.getUserData();
},
onShow() {
},
methods: {
// 获取用户信息
getUserData(){
uni.showLoading();
this.$requst.get('/api/user/info').then(res=>{
console.log(res,'用户信息')
if(res.code==0) {
this.headImgUrl = res.data.headimgurl;
this.nickName = res.data.nickname;
this.businessCode = res.data.business_code;
this.realName= res.data.real_name;
this.mobile= res.data.mobile;
this.area= res.data.area;
this.address= res.data.address;
}
uni.hideLoading();
})
},
// 选择修改信息
openEdit(type){
if(type == 'real_name'){
this.title = '姓名';
this.subtitle = '姓名';
this.placeholder = this.realName;
this.isOpen = true;
this.type='input';
this.field = 'real_name';
}
if(type == 'mobile'){
this.title = '电话';
this.subtitle = '电话';
this.placeholder = this.mobile;
this.isOpen = true;
this.type='input';
this.field = 'mobile';
}
if(type == 'area'){
this.title = '联系地址';
this.subtitle = '联系地址';
this.placeholder = this.area;
this.isOpen = true;
this.type='input';
this.field = 'area';
}
if(type == 'address'){
this.title = '详细地址';
this.subtitle = '详细地址';
this.placeholder = this.address;
this.isOpen = true;
this.type='textarea';
this.field = 'address';
}
},
// 提交修改
submitEdit(field,value){
uni.showLoading();
if(field!==''&&value!==''){
let params={
field:field,
value:value
}
this.$requst.post('/api/user/update-info',params).then(res=>{
if(res.code==0) {
this.$toolAll.tools.showToast('修改成功');
// 关闭弹窗
this.closeEdit();
// 刷新用户信息
this.getUserData();
}
uni.hideLoading();
})
}else{
this.$toolAll.tools.showToast('您没有更改信息');
// 关闭弹窗
this.closeEdit();
}
},
// 关闭弹窗
closeEdit(){
this.title = '';
this.subtitle = '';
this.msg='';
this.isOpen = false;
this.type=''
},
// 获取授权信息
onGetPhoneNumber(e){
if(e.detail.errMsg=="getPhoneNumber:fail user deny"){ //用户决绝授权
this.$toolAll.tools.showToast('您已拒绝授权');
}else{ //允许授权
let params={
iv:e.detail.iv,
encryptedData:e.detail.encryptedData
}
this.$requst.post('/api/user/bind-phone',params).then(res=>{
if(res.code==0) {
this.$toolAll.tools.showToast('绑定成功');
// 刷新用户信息
this.getUserData();
}
})
}
},
// 选择图片
changeHeadImg(){
uni.chooseImage({
count: 1, //默认9
sourceType: ['album','camera'], //从相册选择
success: (res)=> {
this.headImg = res.tempFilePaths[0];
this.uploadImg();
}
})
},
// 上传图片
uploadImg(){
uni.showLoading();
this.$requst.upload('/api/file/upload/image',{path:this.headImg}).then(res=>{
if(res.code==0) {
this.headImgUrl = this.$hostHttp+res.data.src;
// 修改信息
this.submitEdit('headimgurl',this.headImgUrl);
}
uni.hideLoading();
})
}
}
}
</script>
<style>
</style>

77
project.config.json Normal file
View File

@ -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": []
}
}
}

BIN
static/public/avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

BIN
static/public/icon-aboutus.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 678 B

BIN
static/public/icon-addr.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
static/public/icon-cart.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
static/public/icon-cate.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
static/public/icon-close.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
static/public/icon-collection.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
static/public/icon-duty.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 712 B

BIN
static/public/icon-finish.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 532 B

BIN
static/public/icon-more.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1006 B

BIN
static/public/icon-my-01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
static/public/icon-my-02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
static/public/icon-my-03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
static/public/icon-my-04.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
static/public/icon-my-05.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
static/public/icon-my-06.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
static/public/icon-my-07.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
static/public/icon-my-08.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
static/public/icon-my-more.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
static/public/icon-play.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
static/public/icon-search.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
static/public/icon-share.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
static/public/icon-shop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
static/public/icon-specs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
static/public/icon-suspend.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
static/public/icon-vip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
static/tabbar/icon-cart.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 674 B

BIN
static/tabbar/icon-cate.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
static/tabbar/icon-home.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
static/tabbar/icon-kit.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
static/tabbar/icon-my.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
static/tabbar/icon-news.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
store/actions.js Normal file
View File

@ -0,0 +1 @@
// 根级别的 action

16
store/index.js Normal file
View File

@ -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

107
store/modules/moduleA.js Normal file
View File

@ -0,0 +1,107 @@
// 购物车模块
export default {
state:{//存放状态
// 底部导航的高
footHeight:'',
token:'token已生成',
userInfo:{},
count:0,
publicColor:'',
todos: [{
id: 1,
text: '我是内容一',
done: true
},
{
id: 2,
text: '我是内容二',
done: false
}
],
obj:{
a:'吃鸡腿',
b:'吃自助餐'
},
titleList:[],
imgList:[],
onLineList:[],
cartNum:0,
geList:[]
},
// Vuex中store数据改变的唯一方法就是mutations 不适合异步方法
mutations: {
setNum(state,num){
state.cartNum = num;
},
setGe(state,payload){
state.geList = payload.geList;
},
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 };
},
updateState(state, payload) {
state.onLineList = payload.list;
}
},
// 可以执行任意的同步和异步操作
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)
}
}
}

87
store/modules/moduleB.js Normal file
View File

@ -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)
// }
}
}

Some files were not shown because too many files have changed in this diff Show More