Lee
|
@ -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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
|
@ -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>
|
||||||
|
|
|
@ -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 */
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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;}
|
|
@ -0,0 +1,155 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: "iconfont"; /* Project id 3180711 */
|
||||||
|
src: url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.woff2?t=1651830764889') format('woff2'),
|
||||||
|
url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.woff?t=1651830764889') format('woff'),
|
||||||
|
url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.ttf?t=1651830764889') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-family: "iconfont" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-del:before {
|
||||||
|
content: "\e718";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-cut:before {
|
||||||
|
content: "\e609";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-add:before {
|
||||||
|
content: "\e60a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-add-picture05:before {
|
||||||
|
content: "\e639";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-add-picture04:before {
|
||||||
|
content: "\e636";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-add-picture03:before {
|
||||||
|
content: "\e642";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-add-picture02:before {
|
||||||
|
content: "\e8bc";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-add-picture01:before {
|
||||||
|
content: "\e62c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-sandian:before {
|
||||||
|
content: "\e769";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-nothing-collection:before {
|
||||||
|
content: "\e610";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-nothing-more:before {
|
||||||
|
content: "\e624";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-nothing-data:before {
|
||||||
|
content: "\e60c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-address-check:before {
|
||||||
|
content: "\e6c2";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-address-unchecked:before {
|
||||||
|
content: "\e623";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-navigate-now:before {
|
||||||
|
content: "\e640";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-send-goods:before {
|
||||||
|
content: "\e601";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-payment:before {
|
||||||
|
content: "\e602";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-finish:before {
|
||||||
|
content: "\e63f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-take:before {
|
||||||
|
content: "\e649";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-refund:before {
|
||||||
|
content: "\e613";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-customer-black:before {
|
||||||
|
content: "\ec2e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-customer:before {
|
||||||
|
content: "\e628";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-check:before {
|
||||||
|
content: "\e61e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-del-white:before {
|
||||||
|
content: "\e61f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-screen:before {
|
||||||
|
content: "\e60b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-search:before {
|
||||||
|
content: "\e653";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-caidan-mo:before {
|
||||||
|
content: "\e73e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-renwu-mo:before {
|
||||||
|
content: "\e73f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shop-cart:before {
|
||||||
|
content: "\e73d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-caidan-active:before {
|
||||||
|
content: "\e608";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-renwu-acitve:before {
|
||||||
|
content: "\e67c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-home-mo:before {
|
||||||
|
content: "\e673";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-home-active:before {
|
||||||
|
content: "\e674";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-return:before {
|
||||||
|
content: "\e600";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-next:before {
|
||||||
|
content: "\e60e";
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,78 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-nav
|
||||||
|
:ifReturn="ifReturn"
|
||||||
|
:returnColor="returnc"
|
||||||
|
:titleColor="titlec"
|
||||||
|
:navBarTitle="titlet"
|
||||||
|
:ifTitle="ifTitle"
|
||||||
|
:ifCenter="ifTitleCenter"
|
||||||
|
:backgroudColor="backgroundc"></status-nav>
|
||||||
|
<view class="pad-zy20" :style="{paddingBottom: '0px'}">
|
||||||
|
<slot name="content"></slot>
|
||||||
|
</view>
|
||||||
|
<view v-if="ifCustomer"><customer-one></customer-one></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import statusNav from '../status-navs/status-nav.vue';
|
||||||
|
import customerOne from '@/components/customer/customer-one';
|
||||||
|
export default {
|
||||||
|
name:"status-container",
|
||||||
|
components:{
|
||||||
|
statusNav,
|
||||||
|
customerOne
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
ifCustomer:{
|
||||||
|
type:Boolean,
|
||||||
|
default:true
|
||||||
|
},
|
||||||
|
// 是否显示标题
|
||||||
|
ifTitle:{
|
||||||
|
type:Boolean,
|
||||||
|
default:true
|
||||||
|
},
|
||||||
|
// 标题文字
|
||||||
|
titlet:{
|
||||||
|
type:String,
|
||||||
|
default:'标题'
|
||||||
|
},
|
||||||
|
// 标题是否居中
|
||||||
|
ifTitleCenter:{
|
||||||
|
type:Boolean,
|
||||||
|
default:true
|
||||||
|
},
|
||||||
|
// 标题颜色
|
||||||
|
titlec:{
|
||||||
|
type:String,
|
||||||
|
default:'#000000'
|
||||||
|
},
|
||||||
|
// 是否显示返回键
|
||||||
|
ifReturn:{
|
||||||
|
type:Boolean,
|
||||||
|
default:true
|
||||||
|
},
|
||||||
|
// 返回键颜色
|
||||||
|
returnc:{
|
||||||
|
type:String,
|
||||||
|
default:"#333333"
|
||||||
|
},
|
||||||
|
// 导航栏背景色
|
||||||
|
backgroundc:{
|
||||||
|
type:String,
|
||||||
|
default:"#FFFFFF"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
|
@ -0,0 +1,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>
|
|
@ -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>
|
|
@ -0,0 +1,67 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view @tap="lianK" :style="{background:publicColor || '#e00c34',right:nright+'rpx',bottom:nbottom+'rpx'}" :class="isSmall?'smallImg':''" class="fw posir customer-box" style="position: fixed;z-index: 2; width: 120rpx;height: 120rpx;border-radius: 100%;display: flex;justify-content: center;align-items: center;box-shadow: 0rpx 0rpx 20rpx rgba(0,0,0,.22);">
|
||||||
|
<image class="posia" src="/static/public/icon-customer.png" style="width: 50rpx;height: 50rpx;top: 20rpx;" mode="" lazy-load></image>
|
||||||
|
<view class="colf fon20 posia" style="bottom: 20rpx;">在线客服</view>
|
||||||
|
<button class="fon24 posia" style="opacity: 0;top: 0;left: 0;right: 0;bottom: 0;" open-type="contact">客服</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"public-customer",
|
||||||
|
props:{
|
||||||
|
nright:{//距离右边多宽
|
||||||
|
type:Number,
|
||||||
|
default:30
|
||||||
|
},
|
||||||
|
nbottom:{//距离底部多高
|
||||||
|
type:Number,
|
||||||
|
default:260
|
||||||
|
},
|
||||||
|
isSmall:{//是否是大图
|
||||||
|
type:Boolean,
|
||||||
|
default:false
|
||||||
|
},
|
||||||
|
nid:{//内容id
|
||||||
|
type:String,
|
||||||
|
default:'0'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 主题颜色
|
||||||
|
publicColor() {
|
||||||
|
return this.$store.state.publicColor
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
lianK(){
|
||||||
|
// wx.openCustomerServiceChat({
|
||||||
|
// extInfo: {url: `https://work.weixin.qq.com/kfid/kfcb3bba5b57d9a42ba?enc_scene=ENC616HXDjLYNcmsR49PBE75UERg8Ncv3dygpYjfnh3XVvA&scene_param=${uni.getStorageSync('openid')}`},
|
||||||
|
// corpId: 'ww1f86f258d4ff5817',
|
||||||
|
// success(res) {}
|
||||||
|
// })
|
||||||
|
this.$requst.post('user/rand-bind-service').then(res=>{})
|
||||||
|
this.$toolAll.tools.closeTimer()//清空埋点倒计时
|
||||||
|
this.$requst.post('user/record',{type:'other',action:'ask',id:this.nid}).then(res=>{},error=>{})
|
||||||
|
// 调用tools.js中的种植埋点事件
|
||||||
|
this.$toolAll.tools.plantPoint(5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.smallImg{transform: scale(.8);margin-right: -10rpx;}
|
||||||
|
.customer-box {
|
||||||
|
animation: scale_name 1s linear alternate infinite;
|
||||||
|
}
|
||||||
|
@keyframes scale_name{
|
||||||
|
from{transform: scale(1);}
|
||||||
|
to{transform: scale(1.2);}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,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>
|
|
@ -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>
|
|
@ -0,0 +1,82 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<block v-for="(item,index) in list" :key="index">
|
||||||
|
<view @tap="chooseEv(item.url,index)" class="disjbac fon28" :class="[ifLastLine ? 'bbot' : 'borbot',ifIcon ? 'pad-sx25' : 'pad-sx25']" :style="{borderBottomColor: ifLine ? linec : '#FFFFFF'}">
|
||||||
|
<view class="disac flexs pad-y40">
|
||||||
|
<image class="mar-y20 flexs" v-if="item.iconsrc && ifIcon" :src="item.iconsrc" mode="aspectFill" lazy-load :style="{width:item.iconWidth+'rpx',height:item.iconHeight+'rpx'}"></image>
|
||||||
|
<view :style="{color:titlec,fontSize: fonts+'rpx'}" class="clips1">{{item.title}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="disac">
|
||||||
|
<view v-if="item.content" class="clips1" :style="{color:item.contentColor}">{{item.content}}</view>
|
||||||
|
<i v-if="item.ifNext" class="icon icon-next" style="color: #999999;font-size: 28rpx;margin-left: 10rpx;"></i>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:'column-function',
|
||||||
|
props:{
|
||||||
|
list:{
|
||||||
|
type:Array,
|
||||||
|
default:()=>{
|
||||||
|
return [
|
||||||
|
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题一',content:'',contentColor:'#999999',ifNext:true},
|
||||||
|
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题二',content:'',contentColor:'#999999',ifNext:true},
|
||||||
|
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题三',content:'',contentColor:'#999999',ifNext:true},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 标题颜色
|
||||||
|
titlec:{
|
||||||
|
type:String,
|
||||||
|
default:'#000000'
|
||||||
|
},
|
||||||
|
// 是否显示左侧图标
|
||||||
|
ifIcon:{
|
||||||
|
type:Boolean,
|
||||||
|
default:false
|
||||||
|
},
|
||||||
|
// 是否显示下划线
|
||||||
|
ifLine:{
|
||||||
|
type:Boolean,
|
||||||
|
default:true
|
||||||
|
},
|
||||||
|
// 下划线颜色
|
||||||
|
linec:{
|
||||||
|
type:String,
|
||||||
|
default:"#EEEEEE"
|
||||||
|
},
|
||||||
|
// 是否显示最后一条下划线
|
||||||
|
ifLastLine:{
|
||||||
|
type:Boolean,
|
||||||
|
default:true
|
||||||
|
},
|
||||||
|
fonts:{
|
||||||
|
type:String,
|
||||||
|
default:'28rpx'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 列表选择事件
|
||||||
|
chooseEv(url,index) {
|
||||||
|
// if(url) {
|
||||||
|
// uni.navigateTo({url})
|
||||||
|
// }
|
||||||
|
// 抛出事件
|
||||||
|
this.$emit('chooseEv',{url,index})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
|
@ -0,0 +1,43 @@
|
||||||
|
第一步:引入组件
|
||||||
|
|
||||||
|
import columnFunction from '@/components/function-list/column/column-function.vue';
|
||||||
|
|
||||||
|
第二步:注册组件
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
columnFunction
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
第三步:使用组件
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<column-function @chooseEv="chooseEv"></column-function>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
参数说明
|
||||||
|
|
||||||
|
list:列表数据,默认以下数组:
|
||||||
|
[
|
||||||
|
{iconsrc:'',iconWidth:60,iconHeight:60,title:'标题一',content:'',contentColor:'#999999',ifNext:true},
|
||||||
|
{iconsrc:'',iconWidth:60,iconHeight:60,title:'标题二',content:'',contentColor:'#999999',ifNext:true},
|
||||||
|
{iconsrc:'',iconWidth:60,iconHeight:60,title:'标题三',content:'',contentColor:'#999999',ifNext:true},
|
||||||
|
]
|
||||||
|
titlec:标题颜色,默认#000000
|
||||||
|
ifIcon:是否显示左侧图标,默认false
|
||||||
|
ifLine:是否显示下划线,默认true
|
||||||
|
linec:下划线颜色,默认#EEEEEE
|
||||||
|
ifLastLine:是否显示最后一条下划线,默认true
|
||||||
|
|
||||||
|
方法使用
|
||||||
|
|
||||||
|
export default {
|
||||||
|
methods:{
|
||||||
|
chooseEv(obj) {
|
||||||
|
console.log(obj);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,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>
|
|
@ -0,0 +1,47 @@
|
||||||
|
第一步:引入组件
|
||||||
|
|
||||||
|
import gongGeFunction from '@/components/function-list/gong-ge/gong-ge-function.vue';
|
||||||
|
|
||||||
|
第二步:注册组件
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
gongGeFunction
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
第三步:使用组件
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<gong-ge-function @chooseGe="chooseGe"></gong-ge-function>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
参数说明
|
||||||
|
|
||||||
|
list:列表数据,默认以下数组:
|
||||||
|
[
|
||||||
|
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题一'},
|
||||||
|
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题二'},
|
||||||
|
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题三'},
|
||||||
|
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题四'},
|
||||||
|
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题五'},
|
||||||
|
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题五'},
|
||||||
|
{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题五'},
|
||||||
|
]
|
||||||
|
rowNum:一排显示数量,默认5
|
||||||
|
titlec:标题颜色,默认#000000
|
||||||
|
fonts:字体大小,默认28rpx
|
||||||
|
titleTop:字体距离图标的距离,默认20rpx
|
||||||
|
itemTop:item的顶部距离,默认30rpx
|
||||||
|
|
||||||
|
方法使用
|
||||||
|
|
||||||
|
export default {
|
||||||
|
methods:{
|
||||||
|
chooseGe(obj) {
|
||||||
|
console.log(obj);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,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>
|
|
@ -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>
|
|
@ -0,0 +1,41 @@
|
||||||
|
<template>
|
||||||
|
<view class="nothing">
|
||||||
|
<view class="nothing-box">
|
||||||
|
<image v-if="imgSrc!=''" class="nothing-img" :src="imgSrc" mode="aspectFill" lazy-load></image>
|
||||||
|
<i class="iconImg icon"
|
||||||
|
:class="['icon-nothing-more','icon-nothing-data','icon-nothing-collection'][currentType]"></i>
|
||||||
|
<view v-if="currentType!=1" class="nothing-con">{{content}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"nothing-page",
|
||||||
|
props:{
|
||||||
|
imgSrc:{ // 没有更多的图片
|
||||||
|
type:String,
|
||||||
|
default:''
|
||||||
|
},
|
||||||
|
content:{ // 没有更多的描述
|
||||||
|
type:String,
|
||||||
|
default:'暂无内容'
|
||||||
|
},
|
||||||
|
currentType:{ // 暂无更多 icon 图标
|
||||||
|
type:Number,
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.nothing{position: fixed;top: 0;bottom: 0;left: 0;right: 0;display: flex;justify-content: center;align-items: center;}
|
||||||
|
.nothing-box{display: flex;justify-content: center;flex-direction: column;align-items: center;}
|
||||||
|
.nothing-box .nothing-img{width: 470rpx;height: 270rpx;}
|
||||||
|
.iconImg {font-size: 280rpx;color: #999999;}
|
||||||
|
.nothing-con{font-size: 24rpx;font-family: PingFang SC;font-weight: 500;color: #999999;}
|
||||||
|
</style>
|
|
@ -0,0 +1,54 @@
|
||||||
|
<template>
|
||||||
|
<view :style="{
|
||||||
|
color: textColor,
|
||||||
|
fontSize: textFontSize,
|
||||||
|
fontWeight: `${ ifBold ? 'bold' : 0 }`,
|
||||||
|
textAlign: `${ ifCenter ? 'center' : 'left' }`,
|
||||||
|
padding: paddingStr
|
||||||
|
}">{{textStr}}</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"pitera",
|
||||||
|
props:{
|
||||||
|
// 内容
|
||||||
|
textStr: {
|
||||||
|
type:String,
|
||||||
|
default:'-- NO MORE --'
|
||||||
|
},
|
||||||
|
// 字体颜色
|
||||||
|
textColor: {
|
||||||
|
type:String,
|
||||||
|
default:'#999999'
|
||||||
|
},
|
||||||
|
// 字体大小
|
||||||
|
textFontSize: {
|
||||||
|
type: String,
|
||||||
|
default: '24rpx'
|
||||||
|
},
|
||||||
|
// 是否加粗
|
||||||
|
ifBold: {
|
||||||
|
type:Boolean,
|
||||||
|
default:false
|
||||||
|
},
|
||||||
|
// 是否居中
|
||||||
|
ifCenter: {
|
||||||
|
type:Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// 内边距的值
|
||||||
|
paddingStr: {
|
||||||
|
type:String,
|
||||||
|
default:'20rpx'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
|
@ -0,0 +1,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>
|
|
@ -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>
|
|
@ -0,0 +1,30 @@
|
||||||
|
第一步:引入组件
|
||||||
|
|
||||||
|
import scrollTextSlide from '@/components/scroll-views/scroll-text-slide.vue';
|
||||||
|
|
||||||
|
第二步:注册组件
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
scrollTextSlide
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
第三步:使用组件
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<scroll-text-slide></scroll-text-slide>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
参数说明
|
||||||
|
|
||||||
|
list:数据列表,默认['全部', '测试', '测试宽度', '测试宽度三号', '测试宽度四号小星星', '测试宽度五号']
|
||||||
|
activeIndex:选中索引,默认0
|
||||||
|
config:未选中、选中、下划线的样式,默认为以下对象:
|
||||||
|
{
|
||||||
|
color: '#999999',//默认时字体颜色
|
||||||
|
activeColor: '#000000',//选中时字体颜色
|
||||||
|
underLineColor: '#000000',//下滑线颜色
|
||||||
|
}
|
|
@ -0,0 +1,257 @@
|
||||||
|
<template>
|
||||||
|
<view class="_tab-box" :style="{fontSize: defaultConfig.fontSize + 'rpx', color: defaultConfig.color}">
|
||||||
|
<scroll-view id="_scroll" :scroll-x="true" class="scroll-view-h" scroll-with-animation :scroll-left="slider.scrollLeft">
|
||||||
|
<view class="_scroll-content">
|
||||||
|
<view class="_tab-item-box" :class="[defaultConfig.itemWidth ? '_clamp' : '_flex']">
|
||||||
|
<block v-for="(item, index) in tabList" :key="index" >
|
||||||
|
<view
|
||||||
|
class="_item"
|
||||||
|
:id="'_tab_'+index"
|
||||||
|
:class="{ '_active': tagIndex === index }"
|
||||||
|
:style="{color: tagIndex == index ? defaultConfig.activeColor : defaultConfig.color, 'width': defaultConfig.itemWidth ? defaultConfig.itemWidth + 'rpx' : ''}"
|
||||||
|
@click="tabClick(index)">{{ item[defaultConfig.key] || item }}</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<view class="_underline" :style="{
|
||||||
|
transform: 'translateX(' + slider.left + 'px)',
|
||||||
|
width: slider.width + 'px',
|
||||||
|
height: defaultConfig.underLineHeight + 'rpx',
|
||||||
|
backgroundColor: defaultConfig.underLineColor,
|
||||||
|
}" />
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'liuyuno-tabs',
|
||||||
|
props: {
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default: () => ['全部', '测试', '测试宽度', '测试宽度三号', '测试宽度四号小星星', '测试宽度五号']
|
||||||
|
},
|
||||||
|
// 选中索引
|
||||||
|
activeIndex: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
config: {
|
||||||
|
type: Object,
|
||||||
|
default:() => {
|
||||||
|
return {
|
||||||
|
color: '#999999',//默认时字体颜色
|
||||||
|
activeColor: '#000000',//选中时字体颜色
|
||||||
|
underLineColor: '#000000',//下滑线颜色
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabList: [],
|
||||||
|
tagIndex: 0,
|
||||||
|
slider: {
|
||||||
|
left: 0,
|
||||||
|
width: 0,
|
||||||
|
scrollLeft: 0
|
||||||
|
},
|
||||||
|
scorll: {},
|
||||||
|
defaultConfig: {
|
||||||
|
// 要显示的key
|
||||||
|
key: 'name',
|
||||||
|
// 字体大小 rpx
|
||||||
|
fontSize: 26,
|
||||||
|
// 字体颜色
|
||||||
|
color: '#313131',
|
||||||
|
// 激活字体颜色
|
||||||
|
activeColor: '#e54d42',
|
||||||
|
// item宽度 0为自动
|
||||||
|
itemWidth: 0,
|
||||||
|
// 下划线左右边距,文字宽度加边距 rpx
|
||||||
|
underLinePadding: 10,
|
||||||
|
// 下划线宽度 rpx 注意:设置了此值 underLinePadding 失效
|
||||||
|
underLineWidth: 0,
|
||||||
|
// 下划线高度 rpx
|
||||||
|
underLineHeight: 4,
|
||||||
|
// 下划线颜色
|
||||||
|
underLineColor: '#e54d42',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
list(value) {
|
||||||
|
this.updateData();
|
||||||
|
setTimeout(() => {
|
||||||
|
this.updateTabWidth();
|
||||||
|
}, 0);
|
||||||
|
},
|
||||||
|
config(value) {
|
||||||
|
this.updateConfig();
|
||||||
|
},
|
||||||
|
activeIndex(value) {
|
||||||
|
this.tagIndex = this.activeIndex;
|
||||||
|
this.tabToIndex(this.tagIndex);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.updateConfig();
|
||||||
|
this.tagIndex = this.activeIndex;
|
||||||
|
this.updateData();
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.calcScrollPosition();
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateData() {
|
||||||
|
let data = [];
|
||||||
|
if (typeof(this.list[0])=='string') {
|
||||||
|
this.list.forEach((item, index) => {
|
||||||
|
data.push({
|
||||||
|
name: item,
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.defaultConfig.key = 'name';
|
||||||
|
} else {
|
||||||
|
data = JSON.parse(JSON.stringify(this.list));
|
||||||
|
}
|
||||||
|
|
||||||
|
this.tabList = data;
|
||||||
|
},
|
||||||
|
updateConfig() {
|
||||||
|
this.defaultConfig = Object.assign(this.defaultConfig, this.config);
|
||||||
|
},
|
||||||
|
calcScrollPosition() {
|
||||||
|
|
||||||
|
const query = uni.createSelectorQuery().in(this);
|
||||||
|
|
||||||
|
query.select('#_scroll').boundingClientRect((res) => {
|
||||||
|
this.scorll = res;
|
||||||
|
this.updateTabWidth();
|
||||||
|
}).exec();
|
||||||
|
},
|
||||||
|
updateTabWidth(index = 0) {
|
||||||
|
let data = this.tabList;
|
||||||
|
|
||||||
|
if (data.length == 0) return false;
|
||||||
|
|
||||||
|
const query = uni.createSelectorQuery().in(this);
|
||||||
|
|
||||||
|
query.select('#_tab_' + index).boundingClientRect((res) => {
|
||||||
|
|
||||||
|
data[index]._slider = {
|
||||||
|
width: res.width,
|
||||||
|
left: res.left,
|
||||||
|
scrollLeft: res.left - (data[index - 1] ? data[index - 1]._slider.width : 0),
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.tagIndex == index) {
|
||||||
|
this.tabToIndex(this.tagIndex);
|
||||||
|
}
|
||||||
|
|
||||||
|
index++;
|
||||||
|
if (data.length > index) {
|
||||||
|
this.updateTabWidth(index);
|
||||||
|
}
|
||||||
|
}).exec();
|
||||||
|
},
|
||||||
|
|
||||||
|
tabToIndex(index) {
|
||||||
|
|
||||||
|
let _slider = this.tabList[index]._slider;
|
||||||
|
|
||||||
|
let width = uni.upx2px(this.defaultConfig.underLineWidth);
|
||||||
|
|
||||||
|
if (!width) {
|
||||||
|
if (this.defaultConfig.itemWidth) {
|
||||||
|
width = uni.upx2px(this.defaultConfig.itemWidth);
|
||||||
|
} else {
|
||||||
|
width = this.tabList[index][this.defaultConfig.key].length * uni.upx2px(this.defaultConfig.fontSize);
|
||||||
|
}
|
||||||
|
width += uni.upx2px(this.defaultConfig.underLinePadding) * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
let scorll_left = this.scorll.left || 0;
|
||||||
|
|
||||||
|
this.slider = {
|
||||||
|
left: _slider.left - scorll_left + (_slider.width - width) / 2,
|
||||||
|
width: width,
|
||||||
|
scrollLeft: _slider.scrollLeft - scorll_left,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
tabClick(index) {
|
||||||
|
this.tagIndex = index;
|
||||||
|
this.tabToIndex(index);
|
||||||
|
this.$emit('changeEv', index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
._tab-box {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
font-size: 26rpx;
|
||||||
|
position: relative;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
z-index: 10;
|
||||||
|
.scroll-view-h{
|
||||||
|
white-space:nowrap;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
._scroll-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position:relative;
|
||||||
|
|
||||||
|
._tab-item-box {
|
||||||
|
height: 100%;
|
||||||
|
&._flex {
|
||||||
|
display: flex;
|
||||||
|
._item {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&._clamp {
|
||||||
|
._item {
|
||||||
|
overflow:hidden;
|
||||||
|
text-overflow:ellipsis;
|
||||||
|
white-space:nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
._item {
|
||||||
|
height: 100%;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
color: #333;
|
||||||
|
&._active {
|
||||||
|
color: #e54d42;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
._underline {
|
||||||
|
height: 4rpx;
|
||||||
|
background-color: #e54d42;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
transition: .5s;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.uni-scroll-view::-webkit-scrollbar {
|
||||||
|
// 隐藏滚动条,但依旧具备可以滚动的功能
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,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>
|
|
@ -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>
|
|
@ -0,0 +1,124 @@
|
||||||
|
<template>
|
||||||
|
<!-- 选项卡列表 swiper高度自适应 -->
|
||||||
|
<view>
|
||||||
|
<view class="posi-sticky">
|
||||||
|
<scroll-text-slide @changeEv="tabTap" :activeIndex="activeIndex"></scroll-text-slide>
|
||||||
|
</view>
|
||||||
|
<swiper :style="{ height: swiperHeight + 'rpx' }" :current="swiperCurrent" @change="swiperChange">
|
||||||
|
<swiper-item style="height: 100%" v-for="(item, index) in tabs" :key="index">
|
||||||
|
<view :class="'list' + index">
|
||||||
|
<view class="item">
|
||||||
|
<!-- 列表数据 -->
|
||||||
|
<slot :listData="item.data"></slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import scrollTextSlide from '@/components/scroll-views/scroll-text-slide.vue';
|
||||||
|
export default {
|
||||||
|
name: "tabsSwiper",
|
||||||
|
components:{scrollTextSlide},
|
||||||
|
props: {
|
||||||
|
tabs: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeIndex: 0, // tabs索引
|
||||||
|
swiperCurrent: 0, // swiper索引
|
||||||
|
swiperHeight: 0, //swiper高度
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initSwiperHeight(".list0");
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 点击tabs
|
||||||
|
tabTap(index) {
|
||||||
|
this.activeIndex = index;
|
||||||
|
this.swiperCurrent = index;
|
||||||
|
let list = ".list" + index;
|
||||||
|
this.initSwiperHeight(list);
|
||||||
|
this.$emit('currentEv',index);
|
||||||
|
},
|
||||||
|
// 手势切换
|
||||||
|
swiperChange(e) {
|
||||||
|
this.activeIndex = e.detail.current;
|
||||||
|
let list = ".list" + e.detail.current;
|
||||||
|
this.initSwiperHeight(list);
|
||||||
|
this.$emit('currentEv',e.detail.current);
|
||||||
|
},
|
||||||
|
// 计算高度
|
||||||
|
initSwiperHeight(list) {
|
||||||
|
const query = uni.createSelectorQuery().in(this);
|
||||||
|
this.$nextTick(() => {
|
||||||
|
query
|
||||||
|
.select(list)
|
||||||
|
.boundingClientRect((data) => {
|
||||||
|
this.swiperHeight = Math.ceil(data.height / (uni.upx2px(data.height) / data
|
||||||
|
.height));
|
||||||
|
})
|
||||||
|
.exec();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.tabsSwiper {
|
||||||
|
padding: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.tabs-con {
|
||||||
|
color: #333;
|
||||||
|
transition: all 0.5s;
|
||||||
|
padding: 6rpx 40rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.des {
|
||||||
|
font-size: 20rpx;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
transition: all 0.5s;
|
||||||
|
box-shadow: 0 -2rpx 2rpx 2rpx #bcbec2;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 16rpx 16rpx 0 0;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
box-shadow: 0rpx 0rpx 2rpx 2rpx #bcbec2;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 16rpx;
|
||||||
|
border-radius: 0 0 16rpx 16rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 100rpx;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,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>
|
|
@ -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>
|
|
@ -0,0 +1,171 @@
|
||||||
|
<template>
|
||||||
|
<view class="tabBlock" v-if="list.length > 0">
|
||||||
|
<scroll-view scroll-x="true" scroll-with-animation :scroll-left="tabsScrollLeft" @scroll="scroll">
|
||||||
|
<view class="tab" id="tab_list">
|
||||||
|
<!-- 循环体 -->
|
||||||
|
<view v-for="(item, index) in list" :key="index"
|
||||||
|
:class="['tab__item', {'tab__item--active': currentIndex === index}]"
|
||||||
|
:style="{color: (currentIndex === index ? `${itemColor}`: '')}" id="tab_item"
|
||||||
|
@click="select(item, index)">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<view v-if="!showTitleSlot">{{item.title}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 下划线 -->
|
||||||
|
<view class="tab__line"
|
||||||
|
:style="{background: lineColor, width: lineStyle.width, transform: lineStyle.transform,transitionDuration: lineStyle.transitionDuration}">
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
value: [Number, String],
|
||||||
|
list: { // 传值
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [
|
||||||
|
{title:'标题一'},
|
||||||
|
{title:'标题二'},
|
||||||
|
{title:'标题三'},
|
||||||
|
{title:'标题四'},
|
||||||
|
{title:'标题五'},
|
||||||
|
{title:'标题六'},
|
||||||
|
{title:'标题七'},
|
||||||
|
{title:'标题八'},
|
||||||
|
{title:'标题九'},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemColor: String, // tab内容颜色
|
||||||
|
lineColor: String, // 下划线颜色
|
||||||
|
lineAnimated: { // 是否展示下划线动画
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentIndex: 0,
|
||||||
|
lineStyle: {},
|
||||||
|
scrollLeft: 0,
|
||||||
|
tabsScrollLeft: 0,
|
||||||
|
duration: 0.3
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
showTitleSlot() {
|
||||||
|
return this.$scopedSlots.title
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
list() {
|
||||||
|
this.setTabList()
|
||||||
|
},
|
||||||
|
value() {
|
||||||
|
this.currentIndex = this.value
|
||||||
|
this.setTabList()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.currentIndex = this.value
|
||||||
|
this.setTabList()
|
||||||
|
if (!this.lineAnimated) {
|
||||||
|
this.duration = 0
|
||||||
|
}
|
||||||
|
console.log(this.$scopedSlots)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
select(item, index) {
|
||||||
|
this.$emit('changeEv', index)
|
||||||
|
},
|
||||||
|
setTabList() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (this.list.length > 0) {
|
||||||
|
this.setLine()
|
||||||
|
this.scrollIntoView()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
setLine() {
|
||||||
|
let lineWidth = 0,
|
||||||
|
lineLeft = 0
|
||||||
|
this.getElementData(`#tab_item`, (data) => {
|
||||||
|
let el = data[this.currentIndex]
|
||||||
|
this.$emit('tabheight',el.height)
|
||||||
|
lineWidth = el.width / 2
|
||||||
|
// lineLeft = el.width * (this.currentIndex + 0.5) // 此种只能针对每个item长度一致的
|
||||||
|
lineLeft = el.width / 2 + (-data[0].left) + el.left
|
||||||
|
this.lineStyle = {
|
||||||
|
width: `${lineWidth}px`,
|
||||||
|
transform: `translateX(${lineLeft}px) translateX(-50%)`,
|
||||||
|
transitionDuration: `${this.duration}s`
|
||||||
|
};
|
||||||
|
})
|
||||||
|
},
|
||||||
|
scrollIntoView() { // item滚动
|
||||||
|
let lineLeft = 0;
|
||||||
|
this.getElementData('#tab_list', (data) => {
|
||||||
|
let list = data[0]
|
||||||
|
this.getElementData(`#tab_item`, (data) => {
|
||||||
|
let el = data[this.currentIndex]
|
||||||
|
// lineLeft = el.width * (this.currentIndex + 0.5) - list.width / 2 - this.scrollLeft
|
||||||
|
lineLeft = el.width / 2 + (-list.left) + el.left - list.width / 2 - this.scrollLeft
|
||||||
|
this.tabsScrollLeft = this.scrollLeft + lineLeft
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getElementData(el, callback) {
|
||||||
|
uni.createSelectorQuery().in(this).selectAll(el).boundingClientRect().exec((data) => {
|
||||||
|
callback(data[0]);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
scroll(e) {
|
||||||
|
this.scrollLeft = e.detail.scrollLeft;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.tabBlock {
|
||||||
|
position: relative;
|
||||||
|
background: #fff;
|
||||||
|
.tab {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
font-size: 28rpx;
|
||||||
|
padding-bottom: 15rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
&__item {
|
||||||
|
// flex: 1;
|
||||||
|
// width: 20%;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 90rpx;
|
||||||
|
color: #868695;
|
||||||
|
&--active {
|
||||||
|
color: $uni-color-primary;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
&-title {
|
||||||
|
margin: 0 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tab__line {
|
||||||
|
display: block;
|
||||||
|
height: 6rpx;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20rpx;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
position: relative;
|
||||||
|
background: $uni-color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,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>
|
|
@ -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)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
|
@ -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)
|
||||||
|
}
|
||||||
|
}
|
|
@ -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
|
||||||
|
}
|
|
@ -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()
|
|
@ -0,0 +1,87 @@
|
||||||
|
{
|
||||||
|
"name" : "app适配微信小程序",
|
||||||
|
"appid" : "__UNI__768F35C",
|
||||||
|
"description" : "这是一款基于uniapp开发的app和微信小程序的模板框架",
|
||||||
|
"versionName" : "1.0.0",
|
||||||
|
"versionCode" : "100",
|
||||||
|
"transformPx" : false,
|
||||||
|
"app-plus" : {
|
||||||
|
"usingComponents" : true,
|
||||||
|
"compilerVersion" : 3,
|
||||||
|
/* 5+App特有相关 */
|
||||||
|
"modules" : {
|
||||||
|
"Payment" : {},
|
||||||
|
"Share" : {}
|
||||||
|
},
|
||||||
|
/* 模块配置 */
|
||||||
|
"distribute" : {
|
||||||
|
/* 应用发布信息 */
|
||||||
|
"android" : {
|
||||||
|
/* android打包配置 */
|
||||||
|
"permissions" : [
|
||||||
|
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||||
|
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"ios" : {},
|
||||||
|
/* ios打包配置 */
|
||||||
|
"sdkConfigs" : {
|
||||||
|
"maps" : {},
|
||||||
|
"payment" : {
|
||||||
|
"weixin" : {
|
||||||
|
"__platform__" : [ "ios", "android" ],
|
||||||
|
"appid" : "wx2654bc27c419ada6",
|
||||||
|
"UniversalLinks" : ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"push" : {},
|
||||||
|
"geolocation" : {},
|
||||||
|
"share" : {
|
||||||
|
"weixin" : {
|
||||||
|
"appid" : "wx2654bc27c419ada6",
|
||||||
|
"UniversalLinks" : ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"ad" : {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splashscreen" : {
|
||||||
|
"alwaysShowBeforeRender" : false,
|
||||||
|
"waiting" : false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/* SDK配置 */
|
||||||
|
"quickapp" : {},
|
||||||
|
/* 快应用特有相关 */
|
||||||
|
"mp-weixin" : {
|
||||||
|
/* 小程序特有相关 */
|
||||||
|
"appid" : "wxa02e44170bc722cd",
|
||||||
|
"setting" : {
|
||||||
|
"urlCheck" : true,
|
||||||
|
"es6" : true
|
||||||
|
},
|
||||||
|
"usingComponents" : true,
|
||||||
|
"permission" : {
|
||||||
|
"scope.userLocation" : {
|
||||||
|
"desc" : "您的位置信息将用于小程序位置接口的效果展示"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"mp-baidu" : {
|
||||||
|
"appid" : "24346353"
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,15 @@
|
||||||
|
{
|
||||||
|
"name": "轮播视频和图片",
|
||||||
|
"version": "1.0.1",
|
||||||
|
"lockfileVersion": 2,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {
|
||||||
|
"": {
|
||||||
|
"name": "轮播视频和图片",
|
||||||
|
"version": "1.0.1",
|
||||||
|
"dependencies": {
|
||||||
|
"moment": "^2.29.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"id": "zhuge-swiper",
|
||||||
|
"name": "轮播视频和图片",
|
||||||
|
"version": "1.0.1",
|
||||||
|
"description": "自动轮播视频和图片组件。播放视频时停止轮播,手动滑动swiper时视频停止播放",
|
||||||
|
"keywords": [
|
||||||
|
"vue",
|
||||||
|
"swiper",
|
||||||
|
"zhuge"
|
||||||
|
]
|
||||||
|
}
|
|
@ -0,0 +1,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函数里面得到
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
After Width: | Height: | Size: 112 KiB |
After Width: | Height: | Size: 678 B |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 2.4 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 712 B |
After Width: | Height: | Size: 532 B |
After Width: | Height: | Size: 1006 B |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 2.7 KiB |
After Width: | Height: | Size: 2.0 KiB |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 4.5 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 3.9 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 674 B |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 1.7 KiB |
After Width: | Height: | Size: 1.5 KiB |
|
@ -0,0 +1 @@
|
||||||
|
// 根级别的 action
|
|
@ -0,0 +1,16 @@
|
||||||
|
// 组装模块并导出 store 的地方
|
||||||
|
import Vue from 'vue'
|
||||||
|
import Vuex from 'vuex'
|
||||||
|
import moduleA from '@/store/modules/moduleA'
|
||||||
|
import moduleB from '@/store/modules/moduleB'
|
||||||
|
|
||||||
|
Vue.use(Vuex);//vue的插件机制
|
||||||
|
|
||||||
|
//Vuex.modules 模块选项
|
||||||
|
const store = new Vuex.Store({
|
||||||
|
modules: {
|
||||||
|
moduleA,
|
||||||
|
moduleB
|
||||||
|
}
|
||||||
|
})
|
||||||
|
export default store
|
|
@ -0,0 +1,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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -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)
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|