426 changed files with 181798 additions and 200 deletions
@ -1,14 +1,3 @@ |
|||
# Windows |
|||
[Dd]esktop.ini |
|||
Thumbs.db |
|||
$RECYCLE.BIN/ |
|||
|
|||
# macOS |
|||
.DS_Store |
|||
.fseventsd |
|||
.Spotlight-V100 |
|||
.TemporaryItems |
|||
.Trashes |
|||
|
|||
# Node.js |
|||
node_modules/ |
|||
/.hbuilderx |
|||
/unpackage |
|||
/.DS_Store |
|||
|
|||
@ -0,0 +1,85 @@ |
|||
<script> |
|||
import App from '@/common/js/app.js'; |
|||
// #ifdef H5 |
|||
import wxApi from '@/common/js/wxApi.js'; |
|||
// #endif |
|||
export default { |
|||
onLaunch: function(options) { |
|||
console.log('App Launch'); |
|||
//设置项目地址信息 |
|||
App.setSiteInfo(); |
|||
// 设置地址 |
|||
let getAid = uni.getStorageSync('agencyData'); |
|||
// let aid = (options.query.aid == '0')?getAid.aid:(options.query.aid || getAid.aid); |
|||
let aid = options.query.aid || getAid.aid; |
|||
|
|||
App.setAppRoot(aid); |
|||
// 获取小程序信息 |
|||
App.updateAppInfo(); |
|||
// 获取跳转链接列表 |
|||
App.navgatetoLink(); |
|||
//获取用户设置 |
|||
App.userSettings(); |
|||
// 跳转选择地区 |
|||
// 获取图片地址 |
|||
App.getImgUrl(); |
|||
//获取用户通讯信息 |
|||
App.getSetInfo(); |
|||
// App.saveCity(); |
|||
//获取自定义文字替换信息 |
|||
App.getInt(); |
|||
// #ifndef H5 |
|||
//微信公共分享 |
|||
// 更新提示 |
|||
App.up(); |
|||
//#ifdef MP-WEIXIN |
|||
uni.setInnerAudioOption({ |
|||
obeyMuteSwitch: false |
|||
}) |
|||
//#endif |
|||
App.wxShareInfo(); |
|||
// #endif |
|||
// App.wxApiCallback(options.path); |
|||
|
|||
// App.GetifAid() |
|||
let location = uni.getStorageSync('curLoction'); |
|||
let agencyData = uni.getStorageInfoSync('agencyData'); |
|||
if (!!agencyData) { |
|||
App.getAreaId(location); |
|||
}; |
|||
if(uni.getSystemInfoSync().platform == 'ios'){ |
|||
|
|||
} |
|||
}, |
|||
onShow: function(options) { |
|||
// // 获取地区列表 |
|||
// #ifdef H5 |
|||
|
|||
// #endif |
|||
// #ifndef H5 |
|||
// 小程序启动场景 |
|||
|
|||
if (options.query && JSON.stringify(options.query) !== "{}") { |
|||
console.log("e.query", options.query); |
|||
App.scanCode = true; |
|||
App.onStartupScene(options.query); |
|||
} |
|||
// #endif |
|||
}, |
|||
onHide: function() { |
|||
console.log('App Hide'); |
|||
} |
|||
// onLaunch:function(){ |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
/*每个页面公共css */ |
|||
@import './common/css/common.css'; |
|||
@import "./common/css/new_iconfont.css"; |
|||
@import './common/css/iconfont.css'; |
|||
@import './pages/subPages2/grace/animate.css'; |
|||
/* @import './pages/subPages2/grace/graceIcons.css'; */ |
|||
/* @import './pages/subPages2/grace/graceUI.css'; |
|||
@import './pages/subPages/grace2/graceWeex.css'; */ |
|||
</style> |
|||
@ -0,0 +1,965 @@ |
|||
/* iconfont */ |
|||
|
|||
.container, |
|||
input { |
|||
font-family: PingFang-Medium, |
|||
PingFangSC-Regular, |
|||
Heiti, |
|||
Heiti SC, |
|||
DroidSans, |
|||
DroidSansFallback, |
|||
sans-serif !important; |
|||
-webkit-font-smoothing: antialiased; |
|||
} |
|||
|
|||
/* image { |
|||
will-change: transform |
|||
} */ |
|||
|
|||
button::after { |
|||
content: none !important; |
|||
} |
|||
|
|||
.price-font-family { |
|||
font-family: Number-Font !important; |
|||
} |
|||
|
|||
.tab-container { |
|||
padding-bottom: 96upx; |
|||
} |
|||
|
|||
.tab-padding-container { |
|||
padding-bottom: calc(96upx + 20px); |
|||
} |
|||
|
|||
.b-f { |
|||
background: #fff; |
|||
} |
|||
|
|||
.b-0 { |
|||
background: #000000; |
|||
} |
|||
|
|||
.b-e6 { |
|||
background-color: #f6f6f6; |
|||
} |
|||
|
|||
.tf-180 { |
|||
-moz-transform: rotate(-180deg); |
|||
-ms-transform: rotate(-180deg); |
|||
-o-transform: rotate(-180deg); |
|||
transform: rotate(-180deg); |
|||
} |
|||
|
|||
.tf-90 { |
|||
-moz-transform: rotate(90deg); |
|||
-ms-transform: rotate(90deg); |
|||
-o-transform: rotate(90deg); |
|||
transform: rotate(90deg); |
|||
} |
|||
|
|||
.dis-block { |
|||
display: block; |
|||
} |
|||
|
|||
.dis-il-block { |
|||
display: inline-block; |
|||
} |
|||
|
|||
.dis-flex { |
|||
display: flex !important; |
|||
/* flex-wrap: wrap; */ |
|||
} |
|||
|
|||
.flex-box { |
|||
flex: 1; |
|||
width: 0; |
|||
} |
|||
|
|||
.flex-shrink { |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.flex-warp { |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.flex-dir-row { |
|||
flex-direction: row; |
|||
} |
|||
|
|||
.flex-dir-column { |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.flex-x-center { |
|||
/* display: flex; */ |
|||
justify-content: center; |
|||
} |
|||
|
|||
.flex-x-between { |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.flex-x-around { |
|||
justify-content: space-around; |
|||
} |
|||
|
|||
.flex-x-end { |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.flex-x-start { |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.flex-y-center { |
|||
align-items: center; |
|||
} |
|||
|
|||
.flex-y-end { |
|||
align-items: flex-end; |
|||
} |
|||
|
|||
.flex-y-line { |
|||
align-items: baseline; |
|||
} |
|||
|
|||
.flex-five { |
|||
box-sizing: border-box; |
|||
flex: 0 0 50%; |
|||
} |
|||
|
|||
.flex-three { |
|||
float: left; |
|||
width: 33.3%; |
|||
} |
|||
|
|||
.flex-four { |
|||
box-sizing: border-box; |
|||
flex: 0 0 25%; |
|||
} |
|||
|
|||
.t-l { |
|||
text-align: left; |
|||
} |
|||
|
|||
.t-c { |
|||
text-align: center; |
|||
} |
|||
|
|||
.t-r { |
|||
text-align: right; |
|||
} |
|||
|
|||
.p-a { |
|||
position: absolute; |
|||
} |
|||
|
|||
.p-r { |
|||
position: relative; |
|||
} |
|||
|
|||
.fl { |
|||
float: left; |
|||
} |
|||
|
|||
.fr { |
|||
float: right; |
|||
} |
|||
|
|||
.clear::after { |
|||
clear: both; |
|||
content: " "; |
|||
display: table; |
|||
} |
|||
|
|||
.oh { |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.tb-lr-center { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex !important; |
|||
-webkit-box-pack: center; |
|||
-ms-flex-pack: center; |
|||
justify-content: center; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.f-58 { |
|||
font-size: 58upx; |
|||
} |
|||
|
|||
.f-50 { |
|||
font-size: 50upx; |
|||
} |
|||
|
|||
.f-48 { |
|||
font-size: 48upx; |
|||
} |
|||
|
|||
.f-44 { |
|||
font-size: 44upx; |
|||
} |
|||
|
|||
.f-42 { |
|||
font-size: 42upx; |
|||
} |
|||
|
|||
.f-40 { |
|||
font-size: 40upx; |
|||
} |
|||
|
|||
.f-38 { |
|||
font-size: 38upx; |
|||
} |
|||
|
|||
.f-36 { |
|||
font-size: 36upx; |
|||
} |
|||
|
|||
.f-34 { |
|||
font-size: 34upx; |
|||
} |
|||
|
|||
.f-32 { |
|||
font-size: 32upx; |
|||
} |
|||
|
|||
.f-31 { |
|||
font-size: 31upx; |
|||
} |
|||
|
|||
.f-30 { |
|||
font-size: 30upx; |
|||
} |
|||
|
|||
.f-29 { |
|||
font-size: 29upx; |
|||
} |
|||
|
|||
.f-28 { |
|||
font-size: 28upx; |
|||
} |
|||
|
|||
.f-26 { |
|||
font-size: 26upx; |
|||
} |
|||
|
|||
.f-25 { |
|||
font-size: 25upx; |
|||
} |
|||
|
|||
.f-24 { |
|||
font-size: 24upx; |
|||
} |
|||
|
|||
.f-22 { |
|||
font-size: 22upx; |
|||
} |
|||
|
|||
.f-20 { |
|||
font-size: 20upx; |
|||
} |
|||
|
|||
.f-w { |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.f-n { |
|||
font-weight: 400; |
|||
} |
|||
|
|||
.col-f { |
|||
color: #fff; |
|||
} |
|||
|
|||
.col-c { |
|||
color: #CCCCCC; |
|||
} |
|||
|
|||
.col-a { |
|||
color: #AAAAAA; |
|||
} |
|||
|
|||
.col-0 { |
|||
color: #000; |
|||
} |
|||
|
|||
.col-3 { |
|||
color: #333; |
|||
} |
|||
|
|||
.col-6 { |
|||
color: #666; |
|||
} |
|||
|
|||
.col-7 { |
|||
color: #777; |
|||
} |
|||
|
|||
.col-8 { |
|||
color: #888; |
|||
} |
|||
|
|||
.col-9 { |
|||
color: #999; |
|||
} |
|||
|
|||
.col-98 { |
|||
color: #989898 |
|||
} |
|||
|
|||
.col-f4 { |
|||
color: #FF4444; |
|||
} |
|||
|
|||
.color-f02 { |
|||
color: #F02E24; |
|||
} |
|||
|
|||
.col-gr { |
|||
color: rgb(146, 208, 80); |
|||
} |
|||
|
|||
.col-917952 { |
|||
color: #917952; |
|||
} |
|||
|
|||
.col-m { |
|||
color: #FE504F !important; |
|||
} |
|||
|
|||
.col-s { |
|||
color: #FFD940 !important; |
|||
} |
|||
|
|||
.col-green { |
|||
color: #0ed339 !important; |
|||
} |
|||
|
|||
.cont-box { |
|||
padding: 30upx; |
|||
} |
|||
|
|||
.cont-bot { |
|||
margin-bottom: 120upx; |
|||
} |
|||
|
|||
.padding-box { |
|||
padding: 0 30upx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.padding-box-all { |
|||
padding: 30upx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.padding-box36 { |
|||
padding: 0 36upx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.padding-all-box36 { |
|||
padding: 36upx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.p-top-10 { |
|||
padding-top: 10upx; |
|||
} |
|||
|
|||
.p-top-20 { |
|||
padding-top: 20upx; |
|||
} |
|||
|
|||
.p-top-50 { |
|||
padding-top: 50upx; |
|||
} |
|||
|
|||
.p-btm-50 { |
|||
padding-bottom: 50upx; |
|||
} |
|||
|
|||
.p-top-bom-10 { |
|||
padding: 10upx 0; |
|||
} |
|||
|
|||
.p-top-bom-20 { |
|||
padding: 20upx 0; |
|||
} |
|||
|
|||
.p-top-bom-30 { |
|||
padding: 30upx 0; |
|||
} |
|||
|
|||
.p-top-bom-40 { |
|||
padding: 40upx 0; |
|||
} |
|||
|
|||
.p-top-bom-50 { |
|||
padding: 50upx 0; |
|||
} |
|||
|
|||
.pl-12 { |
|||
padding-left: 12px; |
|||
} |
|||
|
|||
.pr-12 { |
|||
padding-right: 12px; |
|||
} |
|||
|
|||
.p-b-20 { |
|||
padding-bottom: 20upx; |
|||
} |
|||
|
|||
.pr-6 { |
|||
padding-right: 6px; |
|||
} |
|||
|
|||
.m-top4 { |
|||
margin-top: 4upx; |
|||
} |
|||
|
|||
.m-top10 { |
|||
margin-top: 10upx; |
|||
} |
|||
|
|||
.m-top16 { |
|||
margin-top: 16upx; |
|||
} |
|||
|
|||
.m-top20 { |
|||
margin-top: 20upx; |
|||
} |
|||
|
|||
.m-top30 { |
|||
margin-top: 30upx; |
|||
} |
|||
|
|||
.m-top40 { |
|||
margin-top: 40upx; |
|||
} |
|||
|
|||
.m-btm36 { |
|||
margin-bottom: 36upx; |
|||
} |
|||
|
|||
.m-btm10 { |
|||
margin-bottom: 10upx; |
|||
} |
|||
|
|||
.m-btm20 { |
|||
margin-bottom: 20upx; |
|||
} |
|||
|
|||
.m-btm15 { |
|||
margin-bottom: 15upx; |
|||
} |
|||
|
|||
.m-btm20 { |
|||
margin-bottom: 20upx; |
|||
} |
|||
|
|||
.m-btm30 { |
|||
margin-bottom: 30upx; |
|||
} |
|||
|
|||
.m-btm40 { |
|||
margin-bottom: 40upx; |
|||
} |
|||
|
|||
.m-btm50 { |
|||
margin-bottom: 50upx; |
|||
} |
|||
|
|||
.m-btm60 { |
|||
margin-bottom: 60upx; |
|||
} |
|||
|
|||
.m-btm80 { |
|||
margin-bottom: 80upx; |
|||
} |
|||
|
|||
.m-btm90 { |
|||
margin-bottom: 90upx; |
|||
} |
|||
|
|||
.m-btm100 { |
|||
margin-bottom: 100upx; |
|||
} |
|||
|
|||
.m-left10 { |
|||
margin-left: 10upx; |
|||
} |
|||
|
|||
.m-left12 { |
|||
margin-left: 12upx; |
|||
} |
|||
|
|||
.m-left30 { |
|||
margin-left: 30upx; |
|||
} |
|||
|
|||
.m-right10 { |
|||
margin-right: 10upx; |
|||
} |
|||
|
|||
.m-right12 { |
|||
margin-right: 12upx; |
|||
} |
|||
|
|||
.m-right20 { |
|||
margin-right: 20upx; |
|||
} |
|||
|
|||
.m-right30 { |
|||
margin-right: 30upx; |
|||
} |
|||
|
|||
.m-right40 { |
|||
margin-right: 40upx; |
|||
} |
|||
|
|||
.m-right50 { |
|||
margin-right: 50upx; |
|||
} |
|||
|
|||
.m-right70 { |
|||
margin-right: 70upx; |
|||
} |
|||
|
|||
.m-top-btm50 { |
|||
margin: 50upx 0; |
|||
} |
|||
|
|||
.m-top-btm40 { |
|||
margin: 40upx 0; |
|||
} |
|||
|
|||
.m-top-btm30 { |
|||
margin: 30upx 0; |
|||
} |
|||
|
|||
.m-top-btm20 { |
|||
margin: 20upx 0; |
|||
} |
|||
|
|||
.m-top-btm10 { |
|||
margin: 10upx 0; |
|||
} |
|||
|
|||
.m-top-btm6 { |
|||
margin: 6upx 0; |
|||
} |
|||
|
|||
.p-top-40 { |
|||
padding-top: 40upx; |
|||
} |
|||
|
|||
.p-bottom { |
|||
padding-bottom: 112upx; |
|||
} |
|||
|
|||
.p-right-30 { |
|||
padding-right: 30upx; |
|||
} |
|||
|
|||
.p-left-right-20 { |
|||
padding: 0 20upx; |
|||
} |
|||
|
|||
.p-left-right-28 { |
|||
padding: 0 28upx; |
|||
} |
|||
|
|||
.p-left-right-30 { |
|||
padding: 0 30upx; |
|||
} |
|||
|
|||
.p-left-right-40 { |
|||
padding: 0 40upx; |
|||
} |
|||
|
|||
.m-left-right-6 { |
|||
margin: 0 6upx; |
|||
} |
|||
|
|||
.m-left-right-10 { |
|||
margin: 0 10upx; |
|||
} |
|||
|
|||
.m-left-right-20 { |
|||
margin: 0 20upx; |
|||
} |
|||
|
|||
.m-left-right-30 { |
|||
margin: 0 30upx; |
|||
} |
|||
|
|||
.m-left-right-40 { |
|||
margin: 0 40upx; |
|||
} |
|||
|
|||
.onelist-hidden { |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.twolist-hidden { |
|||
display: -webkit-box; |
|||
word-break: break-all; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 2; |
|||
} |
|||
|
|||
.b-r { |
|||
border-right: 1upx solid #eee; |
|||
|
|||
} |
|||
|
|||
.b-b { |
|||
border-bottom: 1upx solid #eee; |
|||
} |
|||
|
|||
.b-t { |
|||
border-top: 1upx solid #eee; |
|||
} |
|||
|
|||
.ts-1 { |
|||
-moz-transition: all 0.1s; |
|||
-o-transition: all 0.1s; |
|||
transition: all 0.1s; |
|||
} |
|||
|
|||
.ts-2 { |
|||
-moz-transition: all 0.2s; |
|||
-o-transition: all 0.2s; |
|||
transition: all 0.2s; |
|||
} |
|||
|
|||
.ts-3 { |
|||
-moz-transition: all 0.3s; |
|||
-o-transition: all 0.3s; |
|||
transition: all 0.3s; |
|||
} |
|||
|
|||
.ts-5 { |
|||
-moz-transition: all 0.5s; |
|||
-o-transition: all 0.5s; |
|||
transition: all 0.5s; |
|||
} |
|||
|
|||
/* 字体颜色 */ |
|||
|
|||
.c-ff4444 { |
|||
color: #FF4444; |
|||
} |
|||
|
|||
/* 无样式button (用于伪submit) */ |
|||
|
|||
.btn-normal { |
|||
display: block; |
|||
margin: 0; |
|||
padding: 0; |
|||
line-height: normal; |
|||
background: none; |
|||
border-radius: 0; |
|||
box-shadow: none; |
|||
border: none; |
|||
font-size: unset; |
|||
text-align: unset; |
|||
overflow: visible; |
|||
} |
|||
|
|||
.btn-normal:after { |
|||
border: none; |
|||
} |
|||
|
|||
.btn-normal.button-hover { |
|||
color: inherit; |
|||
} |
|||
|
|||
/* 模板消息按钮 */ |
|||
.report-btn { |
|||
position: absolute !important; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
opacity: 0; |
|||
} |
|||
|
|||
|
|||
/* 内容标题直 */ |
|||
.module-title { |
|||
color: #333333; |
|||
font-size: 30upx; |
|||
text-align: center; |
|||
height: 86upx; |
|||
line-height: 86upx; |
|||
font-weight: bold; |
|||
position: relative; |
|||
background: #FFFFFF; |
|||
} |
|||
|
|||
.module-title::after { |
|||
content: " "; |
|||
position: absolute; |
|||
left: 50%; |
|||
bottom: 0; |
|||
transform: translateX(-50%); |
|||
width: 40upx; |
|||
height: 8upx; |
|||
background: #FFD940; |
|||
border-radius: 20upx; |
|||
} |
|||
|
|||
/* 内容标题直弯 */ |
|||
.module-title-w { |
|||
color: #333333; |
|||
font-size: 30upx; |
|||
text-align: center; |
|||
height: 86upx; |
|||
line-height: 86upx; |
|||
font-weight: bold; |
|||
position: relative; |
|||
background: #FFFFFF; |
|||
} |
|||
|
|||
.module-content { |
|||
padding: 30upx; |
|||
background: #FFFFFF; |
|||
} |
|||
|
|||
.bor-radius-10 { |
|||
border-radius: 6upx; |
|||
} |
|||
|
|||
.bor-radius-10upx { |
|||
border-radius: 10upx; |
|||
} |
|||
|
|||
/* loading动画 */ |
|||
.ball-clip-rotate-pulse { |
|||
position: absolute; |
|||
top: 36%; |
|||
left: 50%; |
|||
transform: scale(1) translateY(-15px); |
|||
} |
|||
|
|||
.ball-clip-rotate-pulse::after { |
|||
content: "努力加载中..."; |
|||
position: absolute; |
|||
top: 50%; |
|||
bottom: 0; |
|||
transform: translate(-50%, 3em); |
|||
font-size: 26upx; |
|||
line-height: 2em; |
|||
text-align: center; |
|||
width: 10em; |
|||
letter-spacing: 2upx; |
|||
color: #666666; |
|||
} |
|||
|
|||
.ball-clip-rotate-pulse>view { |
|||
-webkit-animation-fill-mode: both; |
|||
animation-fill-mode: both; |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
border-radius: 100%; |
|||
} |
|||
|
|||
.ball-clip-rotate-pulse>view:first-child { |
|||
background: #FFD940; |
|||
height: 16px; |
|||
width: 16px; |
|||
top: 7px; |
|||
left: -7px; |
|||
-webkit-animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; |
|||
animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; |
|||
} |
|||
|
|||
.ball-clip-rotate-pulse>view:last-child { |
|||
position: absolute; |
|||
border: 2px solid #FFF; |
|||
width: 30px; |
|||
height: 30px; |
|||
left: -16px; |
|||
top: -2px; |
|||
background: transparent; |
|||
border: 2px solid; |
|||
border-color: #ffe26e transparent #ffe26e transparent; |
|||
-webkit-animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; |
|||
animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; |
|||
-webkit-animation-duration: 1s; |
|||
animation-duration: 1s; |
|||
} |
|||
|
|||
@keyframes rotate { |
|||
0% { |
|||
-webkit-transform: rotate(0deg) scale(1); |
|||
transform: rotate(0deg) scale(1); |
|||
} |
|||
|
|||
50% { |
|||
-webkit-transform: rotate(180deg) scale(0.6); |
|||
transform: rotate(180deg) scale(0.6); |
|||
} |
|||
|
|||
100% { |
|||
-webkit-transform: rotate(360deg) scale(1); |
|||
transform: rotate(360deg) scale(1); |
|||
} |
|||
} |
|||
|
|||
@keyframes scale { |
|||
30% { |
|||
-webkit-transform: scale(0.3); |
|||
transform: scale(0.3); |
|||
} |
|||
|
|||
100% { |
|||
-webkit-transform: scale(1); |
|||
transform: scale(1); |
|||
} |
|||
} |
|||
|
|||
.diy-loading { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
|
|||
.loading-image { |
|||
width: 60upx; |
|||
height: 60upx; |
|||
display: block; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.loading-text { |
|||
font-size: 26upx; |
|||
line-height: 2em; |
|||
text-align: center; |
|||
width: 10em; |
|||
letter-spacing: 2upx; |
|||
color: #666666; |
|||
} |
|||
|
|||
/* 0.5px边框 */ |
|||
.border-line, |
|||
.border-vertical { |
|||
position: relative; |
|||
} |
|||
|
|||
.border-line::after { |
|||
content: " "; |
|||
position: absolute; |
|||
border-top: 1px solid #EEEEEE; |
|||
transform-origin: 0 0; |
|||
transform: scaleY(0.5); |
|||
z-index: 2; |
|||
} |
|||
|
|||
.border-vertical::after { |
|||
content: " "; |
|||
position: absolute; |
|||
border-left: 1px solid #F7F7F7; |
|||
transform-origin: 0 0; |
|||
transform: scaleX(0.5); |
|||
z-index: 2; |
|||
} |
|||
|
|||
.border-vertical.border-left::after { |
|||
top: 0; |
|||
left: 0; |
|||
bottom: 0; |
|||
} |
|||
|
|||
.border-line.border-top::after { |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
} |
|||
|
|||
.border-line.border-bottom::after { |
|||
left: 0; |
|||
bottom: 0; |
|||
right: 0; |
|||
} |
|||
|
|||
.diy-nav-list .border-bottom::after { |
|||
left: 30upx; |
|||
} |
|||
|
|||
.diy-nav-list .border-bottom.item-icon::after { |
|||
left: 100upx; |
|||
} |
|||
|
|||
.diy-nav-list .border-bottom:last-child::after { |
|||
content: none; |
|||
} |
|||
|
|||
.uni-picker-container { |
|||
z-index: 1003; |
|||
} |
|||
|
|||
.uni-picker-container .uni-picker { |
|||
z-index: 1003; |
|||
} |
|||
|
|||
.audio-main { |
|||
position: fixed; |
|||
right: 50upx; |
|||
top: 10%; |
|||
z-index: 10; |
|||
} |
|||
|
|||
.audio-bg { |
|||
position: relative; |
|||
} |
|||
|
|||
.audio-bg .audio-gif { |
|||
width: 100upx; |
|||
height: 100upx; |
|||
background-size: 100upx 100upx; |
|||
background-repeat: no-repeat; |
|||
} |
|||
|
|||
.audio-bg .audio-gif .audio-png { |
|||
position: absolute; |
|||
background-size: 80upx 80upx; |
|||
animation: rotate2d 1.2s linear infinite; |
|||
z-index: -1; |
|||
width: 80upx; |
|||
height: 80upx; |
|||
} |
|||
|
|||
.audio-bg.stop-audio .audio-gif { |
|||
background: none !important; |
|||
} |
|||
|
|||
.audio-bg.stop-audio .audio-png { |
|||
animation: none; |
|||
} |
|||
|
|||
@keyframes rotate2d { |
|||
from { |
|||
transform: rotate(0) |
|||
} |
|||
|
|||
to { |
|||
transform: rotate(360deg) |
|||
} |
|||
} |
|||
@ -0,0 +1,696 @@ |
|||
/* 团购样式5 */ |
|||
.groupon_goods5-pading{ |
|||
padding: 20upx 30upx 0; |
|||
} |
|||
.groupon_goods5-list { |
|||
flex-wrap: nowrap; |
|||
} |
|||
|
|||
.groupon_goods5-list-item .groupon_goods5-image { |
|||
width: 250upx; |
|||
height: 250upx; |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
background-size: 250upx 250upx; |
|||
} |
|||
.groupon_goods5-title{ |
|||
height: 2.6em; |
|||
line-height: 1.3em; |
|||
} |
|||
.groupon_goods5-price .now-price { |
|||
color: #f64031; |
|||
} |
|||
|
|||
.groupon_goods5-price .old-price { |
|||
color: #CCCCCC; |
|||
text-decoration: line-through; |
|||
} |
|||
|
|||
|
|||
/* 通用商品 */ |
|||
.public_goods_goods-price .now-price { |
|||
color: #f64031; |
|||
} |
|||
|
|||
.public_goods_goods-price .old-price { |
|||
color: #CCCCCC; |
|||
text-decoration: line-through; |
|||
margin-left: 30upx; |
|||
} |
|||
|
|||
|
|||
/* 商家信息2 */ |
|||
.store-two-main .store-two-left { |
|||
width: 170upx; |
|||
height: 170upx; |
|||
background-position: center; |
|||
background-size: 170upx 170upx; |
|||
background-repeat: no-repeat; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.store-two-main .store-two-right { |
|||
width: 100%; |
|||
} |
|||
|
|||
.store-two-right .store-two-title { |
|||
height: 2.6em; |
|||
line-height: 1.3em; |
|||
width: 400upx; |
|||
} |
|||
|
|||
.store-two-score .icon-shoucangxiao { |
|||
font-size: 28upx; |
|||
color: rgb(255, 153, 0); |
|||
} |
|||
|
|||
.store-two-score .icon-shoucangxiao>text { |
|||
margin-left: 10upx; |
|||
color: red; |
|||
} |
|||
|
|||
.store-time-tag{ |
|||
padding: 3upx 10upx; |
|||
background-color: rgba(0,0,0,0.3); |
|||
color: #FFFFFF; |
|||
position: absolute; |
|||
left: 20upx; |
|||
bottom: 20upx; |
|||
font-size: 24upx; |
|||
border-radius: 6upx; |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
/* 抢购6 */ |
|||
.diy-goods3-item .goods3-item-image { |
|||
width: 100%; |
|||
height: 400upx; |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
background-size: 100% 400upx; |
|||
border-radius: 10upx 10upx 0 0; |
|||
} |
|||
|
|||
.goods3-item-image .goods-image-gift { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 40upx; |
|||
background-color: #27ce00; |
|||
border-radius: 0 8upx 8upx 0; |
|||
padding: 6upx 10upx; |
|||
} |
|||
|
|||
.goods3-price .goods3-nowPrice { |
|||
color: red; |
|||
} |
|||
|
|||
.goods3-price .goods3-oldPrice { |
|||
text-decoration: line-through; |
|||
color: #8c8b8b; |
|||
} |
|||
|
|||
.goods-all-vip .goods-all-vip-label { |
|||
color: #DDCDA0; |
|||
padding: 0 2upx 0 2upx; |
|||
background-color: #363636; |
|||
border-radius: 6upx; |
|||
} |
|||
|
|||
.goods-all-vip .goods-all-vip-price { |
|||
color: #363636; |
|||
} |
|||
|
|||
/* 招聘统计 */ |
|||
|
|||
.invite-statistics{ |
|||
padding: 10upx 30upx; |
|||
} |
|||
|
|||
.invite-statistics-item{ |
|||
/* padding: 30upx; */ |
|||
border-radius: 20upx; |
|||
/* border: 1upx; */ |
|||
width: 25%; |
|||
border: 1upx solid #EEEEEE; |
|||
margin-right: 20upx; |
|||
} |
|||
|
|||
.statistics-item-num{ |
|||
font-size: 36upx; |
|||
padding: 30upx 30upx 0; |
|||
font-family: DINPro; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
} |
|||
|
|||
.statistics-item-class{ |
|||
padding: 0 0upx; |
|||
font-size: 24upx; |
|||
height: 40upx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #BBBBBB; |
|||
text-align: center; |
|||
} |
|||
|
|||
.statistics-item-img{ |
|||
height: 90upx; |
|||
position: relative; |
|||
border-radius: 0 0 20upx 0upx; |
|||
} |
|||
|
|||
.statistics-item-image{ |
|||
width: 60upx; |
|||
height: 60upx; |
|||
position: absolute; |
|||
right: 0upx; |
|||
bottom: 1upx; |
|||
border-radius: 0 0 20upx 0upx; |
|||
} |
|||
|
|||
.enterprise-img{ |
|||
width: 120upx; |
|||
height: 120upx; |
|||
border-radius: 10upx; |
|||
} |
|||
|
|||
.enterprise-name{ |
|||
font-size: 32upx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
} |
|||
|
|||
.enterprise-nature{ |
|||
font-size: 24upx; |
|||
font-family: PingFang SC; |
|||
color: #999999; |
|||
padding: 6upx 0; |
|||
} |
|||
.enterprise-content{ |
|||
padding-left: 20upx; |
|||
} |
|||
|
|||
.enterprise-item{ |
|||
padding: 30upx 0; |
|||
border-bottom: 1upx solid #EEEEEE; |
|||
} |
|||
.enterprise-item:last-child{ |
|||
border: none; |
|||
} |
|||
|
|||
.enterprise2-title{ |
|||
font-size: 32upx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
flex: 0.5; |
|||
} |
|||
.enterprise2-more{ |
|||
text-align: right; |
|||
font-size: 32upx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #999999; |
|||
flex: 0.5; |
|||
} |
|||
|
|||
.enterprise2-item{ |
|||
width: 240upx; |
|||
height: 340upx; |
|||
background-color: #B4B5C7; |
|||
border-radius: 15upx; |
|||
margin-right: 30upx; |
|||
} |
|||
|
|||
.enterprise2-item-img{ |
|||
width: 240upx; |
|||
height: 200upx; |
|||
border-radius: 15upx 15upx 0 0upx; |
|||
} |
|||
.enterprise2-item-name{ |
|||
font-size: 32upx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
padding: 20upx 20upx; |
|||
white-space:nowrap; |
|||
overflow:hidden; |
|||
text-overflow:ellipsis; |
|||
} |
|||
|
|||
.enterprise2-item-invite{ |
|||
font-size: 26upx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
/* padding-bottom: 20upx; */ |
|||
padding: 0 20upx 20upx; |
|||
} |
|||
.enterprise2-box{ |
|||
overflow-y: scroll; |
|||
padding: 30upx 0 10upx; |
|||
display: flex; |
|||
|
|||
} |
|||
.recruit_enterprise2-box{ |
|||
/* overflow: auto; */ |
|||
overflow: hidden; |
|||
} |
|||
.recruit_recruit-name{ |
|||
font-size: 32upx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
white-space:nowrap; |
|||
overflow:hidden; |
|||
text-overflow:ellipsis; |
|||
flex: 0.5; |
|||
} |
|||
|
|||
.recruit_recruit-top{ |
|||
padding: 1upx 6upx; |
|||
background-color: #FF4444; |
|||
color: #FFFFFF; |
|||
font-size: 24upx; |
|||
font-weight: 500; |
|||
border-radius: 4upx; |
|||
margin-left: 20upx; |
|||
} |
|||
|
|||
.recruit_recruit-salary{ |
|||
font-size: 32upx; |
|||
font-family: DINPro; |
|||
font-weight: 500; |
|||
color: #FF4444; |
|||
flex: 0.5; |
|||
text-align: right; |
|||
} |
|||
.recruit_recruit-tags{ |
|||
flex: 0.75; |
|||
height: 50upx; |
|||
overflow: hidden; |
|||
} |
|||
.recruit_recruit-tags-item{ |
|||
padding: 5upx 20upx; |
|||
border-radius: 4upx; |
|||
font-size: 24upx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #666666; |
|||
margin-right: 20upx; |
|||
} |
|||
.recruit_recruit-region{ |
|||
font-size: 28upx; |
|||
font-family: DINPro; |
|||
font-weight: 500; |
|||
line-height: 50upx; |
|||
text-align: right; |
|||
color: #999999; |
|||
flex: 0.25; |
|||
overflow:hidden; |
|||
text-overflow:ellipsis; |
|||
white-space:nowrap; |
|||
} |
|||
.recruit_recruit-imgbox{ |
|||
flex: 0.2; |
|||
} |
|||
.recruit_recruit-img{ |
|||
width: 120upx; |
|||
height: 120upx; |
|||
border-radius: 10upx; |
|||
border: 1upx solid #FFFFFF; |
|||
} |
|||
.recruit_recruit-left{ |
|||
flex: 0.8; |
|||
padding-left: 20upx; |
|||
} |
|||
.recruit-left-nature{ |
|||
font-size: 26upx; |
|||
color: #999999; |
|||
vertical-align: bottom; |
|||
padding-top: 20upx; |
|||
} |
|||
.recruit_recruit-right{ |
|||
/* flex: 0.3; */ |
|||
} |
|||
.recruit-left-name{ |
|||
font-size: 28upx; |
|||
vertical-align: bottom; |
|||
margin-bottom: 30upx; |
|||
/* line-height: 60upx; */ |
|||
} |
|||
.recruit-left-region{ |
|||
font-size: 28upx; |
|||
font-family: DINPro; |
|||
font-weight: 500; |
|||
line-height: 50upx; |
|||
text-align: right; |
|||
color: #999999; |
|||
flex: 0.3; |
|||
width: 200upx; |
|||
overflow: hidden;/*超出部分隐藏*/ |
|||
white-space: nowrap;/*不换行*/ |
|||
text-overflow:ellipsis;/*超出部分文字以...显示*/ |
|||
} |
|||
.recruit_recruit{ |
|||
border-bottom: 1upx solid #EEEEEE; |
|||
} |
|||
.recruit_recruit:last-child{ |
|||
border: none; |
|||
} |
|||
.recruit_resume-imgbox{ |
|||
flex: 0.3; |
|||
} |
|||
.recruit_resume-content{ |
|||
flex: 0.7; |
|||
} |
|||
.recruit_resume-img{ |
|||
width: 150upx; |
|||
height: 150upx; |
|||
border-radius: 50%; |
|||
} |
|||
.recruit_resume-title{ |
|||
font-size: 32upx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
flex: 0.5; |
|||
} |
|||
.recruit_resume-salary{ |
|||
flex: 0.5; |
|||
font-size: 32upx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #ff4444; |
|||
text-align: right; |
|||
} |
|||
.recruit_resume-data{ |
|||
font-size: 26upx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #999999; |
|||
padding: 15upx 0; |
|||
} |
|||
.recruit_resume-tags{ |
|||
flex: 0.8; |
|||
height: 50upx; |
|||
overflow: hidden; |
|||
} |
|||
.recruit_resume-site{ |
|||
flex: 0.2; |
|||
font-size: 26upx; |
|||
color: #999999; |
|||
text-align: right; |
|||
line-height: 52upx; |
|||
} |
|||
.recruit_resume-tagitem{ |
|||
padding: 5upx 10upx; |
|||
font-size: 26upx; |
|||
background-color: #007AFF; |
|||
border-radius: 4upx; |
|||
margin-right: 10upx; |
|||
} |
|||
.recruit_resume-item{ |
|||
margin-bottom: 50upx; |
|||
} |
|||
|
|||
/* 相亲 */ |
|||
.blind{ |
|||
/* padding: 30upx; */ |
|||
margin: 30upx; |
|||
} |
|||
.blind-item{ |
|||
padding: 30upx; |
|||
width: 335upx; |
|||
box-sizing: border-box; |
|||
height: 171upx; |
|||
background: #F8F8F8; |
|||
opacity: 1; |
|||
border-radius: 20upx; |
|||
} |
|||
.nav-content { |
|||
width: 690rpx; |
|||
margin: 0 auto 0; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content:space-between; |
|||
|
|||
} |
|||
.nav-item { |
|||
width: 335rpx; |
|||
height: auto; |
|||
border-radius: 20rpx; |
|||
overflow: hidden; |
|||
background-color: #F8F8F8; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
/* 家政 */ |
|||
.housekeeping{ |
|||
padding: 30upx; |
|||
margin: 0 auto 0; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content:space-between; |
|||
} |
|||
|
|||
.housekeeping:after {
content: ""; |
|||
flex:0 0 45%;
} |
|||
|
|||
.housekeeping-issue{ |
|||
height: 90upx; |
|||
line-height: 90upx; |
|||
color: #FFFFFF; |
|||
font-size: 28upx; |
|||
text-align: center; |
|||
/* margin-right: 20upx; */ |
|||
border-radius: 20upx; |
|||
margin-top: 50upx; |
|||
} |
|||
|
|||
.housekeeping-lose{ |
|||
width: 45%; |
|||
} |
|||
|
|||
.housekeeping3{ |
|||
padding: 30upx; |
|||
margin: 0 auto 0; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content:space-between; |
|||
} |
|||
|
|||
.housekeeping3:after {
content: ""; |
|||
flex:0 0 30%;
} |
|||
|
|||
.housekeeping-issue3{ |
|||
flex:0 0 30%; |
|||
height: 90upx; |
|||
line-height: 90upx; |
|||
background-color: #A59AFF; |
|||
color: #FFFFFF; |
|||
font-size: 28upx; |
|||
text-align: center; |
|||
/* margin-right: 20upx; */ |
|||
border-radius: 20upx; |
|||
margin-bottom: 20upx; |
|||
} |
|||
|
|||
.housekeeping-lose3{ |
|||
width: 30%; |
|||
} |
|||
|
|||
.housekeeping-enter{ |
|||
width: 335upx; |
|||
height: 90upx; |
|||
line-height: 90upx; |
|||
background-color: #FDAD28; |
|||
color: #FFFFFF; |
|||
font-size: 28upx; |
|||
text-align: center; |
|||
/* margin-right: 20upx; */ |
|||
border-radius: 20upx; |
|||
margin-bottom: 20upx; |
|||
} |
|||
|
|||
.housekeeping-image{ |
|||
height: 30upx; |
|||
width: 30upx; |
|||
margin-right: 20upx; |
|||
margin-top: 30upx; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
.referralWaiter{ |
|||
padding: 30upx; |
|||
} |
|||
|
|||
.referralWaiter-content{ |
|||
padding: 30upx 0; |
|||
overflow: auto; |
|||
} |
|||
|
|||
.referralWaiter-item{ |
|||
background-color: #F8F8F8; |
|||
margin-right: 20upx; |
|||
padding-bottom: 15upx; |
|||
border-radius: 20upx; |
|||
display: inline-block; |
|||
max-width: 330upx; |
|||
position: relative; |
|||
} |
|||
|
|||
.referral-tag{ |
|||
background-color: rgba(239,155,155,0.6); |
|||
color: #FFFFFF; |
|||
height: 36upx; |
|||
padding: 0 10upx; |
|||
font-size: 20upx; |
|||
display: inline-block; |
|||
line-height: 36upx; |
|||
border-radius: 10upx; |
|||
position: absolute; |
|||
left: 20upx; |
|||
top: 20upx; |
|||
z-index: 99; |
|||
} |
|||
|
|||
.refText{ |
|||
font-size: 20upx; |
|||
color: #ff4444; |
|||
font-weight:700; |
|||
padding-right: 20upx; |
|||
display: inline-block; |
|||
width: 200upx; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.referralWaiter-item-img{ |
|||
width: 330upx; |
|||
height: 186upx; |
|||
border-radius: 20upx 20upx 0 0; |
|||
} |
|||
|
|||
.homemaking-tags{ |
|||
padding: 22upx 20upx; |
|||
height: 36upx; |
|||
line-height: 38upx; |
|||
overflow: hidden; |
|||
|
|||
} |
|||
|
|||
.homemaking-btn{ |
|||
height: 40upx; |
|||
font-size: 20upx; |
|||
padding: 0 20upx; |
|||
line-height: 40upx; |
|||
background: linear-gradient(180deg, #72AAFD 0%, #6094FD 100%); |
|||
display: inline-block; |
|||
color: #FFFFFF; |
|||
border-radius: 10upx; |
|||
margin-right: 20upx; |
|||
} |
|||
|
|||
.homemaking-tags-item{ |
|||
/* width: 100upx; */ |
|||
height: 32upx; |
|||
line-height: 32upx; |
|||
font-size: 20upx; |
|||
text-align: center; |
|||
background-color: #EEEEEE; |
|||
color: #999999; |
|||
padding: 0 10upx; |
|||
border-radius: 6upx; |
|||
display: inline-block; |
|||
margin-right: 10upx; |
|||
margin-bottom: 10upx; |
|||
} |
|||
|
|||
.homemaking-name{ |
|||
width: 300upx; |
|||
margin-left: 20upx; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.homemakingList-boex{ |
|||
padding: 20upx 30upx; |
|||
background-color: #F8F8F8; |
|||
} |
|||
|
|||
.enter-box{ |
|||
position: relative; |
|||
width: 690upx; |
|||
padding: 30upx; |
|||
padding-bottom: 170upx; |
|||
background-color: #FFFFFF; |
|||
border-radius: 30upx 30upx 0 0; |
|||
} |
|||
|
|||
.enter-img{ |
|||
width: 50upx; |
|||
height: 50upx; |
|||
position: absolute; |
|||
right: 30upx; |
|||
top: 30upx; |
|||
} |
|||
|
|||
.IndividualsIn{ |
|||
margin-top: 60upx; |
|||
padding: 35upx 40upx; |
|||
border-radius: 20upx; |
|||
background: #72AAFD; |
|||
display: flex; |
|||
} |
|||
|
|||
.IndividualsInImg{ |
|||
width: 110upx; |
|||
height: 110upx; |
|||
} |
|||
|
|||
.IndividualsInright{ |
|||
height: 28upx; |
|||
width: 56upx; |
|||
line-height: 110upx; |
|||
} |
|||
|
|||
.vcssopen{ |
|||
/* width:580upx; |
|||
overflow:hidden; |
|||
text-overflow:ellipsis; |
|||
white-space:nowrap; */ |
|||
} |
|||
|
|||
.linkRed{ |
|||
width: 600upx; |
|||
height: 752upx; |
|||
position: relative; |
|||
border-radius: 30upx; |
|||
} |
|||
.redmt{ |
|||
margin-top: 100upx; |
|||
} |
|||
.redmtf{ |
|||
margin-top: 40upx; |
|||
} |
|||
.bnnerBox{ |
|||
position: absolute; |
|||
left: 50%; |
|||
bottom: 10upx; |
|||
/* width: 100upx; */ |
|||
transform: translateX(-50%); |
|||
} |
|||
.bnnerItem{ |
|||
width: 15upx; |
|||
height: 15upx; |
|||
border-radius: 60upx; |
|||
background-color: #ffffff; |
|||
display: inline-block; |
|||
margin-right: 10upx; |
|||
} |
|||
File diff suppressed because it is too large
Binary file not shown.
@ -0,0 +1,17 @@ |
|||
@font-face { |
|||
font-family: "new_iconfont"; |
|||
src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMgAA0AAAAABywAAALMAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GVgCCQhEICoIcgXwLCgABNgIkAxAEIAWFCAcxGxgGEZWbbcl+JGSnhZeMumdLbKWaRok38fC8Tv1zJbl5ZQK7gLg1mfqBYQJeiWn16XLXh21UhZqSePDTd43fxyfwvO3ebf8GEihlGaWSQBM309pEk3NaWyAKu2hNisOAohedNrY9bn19e7DXZ33iH5w3HmpLt5K1FgLeu6tvgo8uWtpFO3WgEdogE3K5UCBDRBwlsp29ClwKXh+PikSm1LTAsl2zd5j2fSfqyWurtTYwwHkIQI4cnQSYJBfopNANhULwfadqFezS/gcEiCEAUeBwPw8BP0v8qgwUICGhjMOAAgBpleo3al40y7df0KZyTeR11zZsfGHr8tVXtdpxVaW8u9Jo7eNv171z4Vu1b1YuuO+66++/+94Ho+6BjQGdura7r+XQWnOHA3Ca4x7/xFUNKpN3r/kzrbrt9llpfs0NaX6a9fDD5aar1o5defXTl146tctttw59seeWHkt6Lhm5aHbvy5vf/vrh0///2qF52+pDZ2tmf/n57Cazxqyb3WzVn3/Najpr3rzZr/393PNDh77//pNfpVkzZzq6N69Z1eSGAF94zc3lmv7lM3suBwLB/oYdb97cdNJ/qWGhYS92d/Wl/PEckgwEjTFXgPzy/xqgCKBAwd0ChbIEMjTQAFUALXyOAFobJEBIVgmQqXFQgFxyToBCcocAJQ09g4B6kq8Q0MDAmCFAQy3jGrlIfQxAJ0IzM4hMExuJXDMnwQK9jChp40GinmbeIBqo+Hl8Q33ikAZmEhaehozpUMafnVmjQRiBrlx32vkej/+RvV0oG9znAzx50U+jLeA/tabBm0vsL2+xymlKYgRYifWXTEQFH8MDb6nnMatNpCAUUMFi1KPuSXzCa5oRNVmMCs9CDBzi+9ctKsSwduNvrPILKPlv3/cBJAhNbjgupJxmrFEPFtZ8mfk5GD82KYNgF7hy7h4gIaLRHaseStY=) format('woff2'), |
|||
url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAT8AA0AAAAABywAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAE4AAAABoAAAAciLzFRUdERUYAAATAAAAAHgAAAB4AKQAKT1MvMgAAAaAAAABCAAAAVjyKSA5jbWFwAAAB9AAAAD4AAAFCAA/px2dhc3AAAAS4AAAACAAAAAj//wADZ2x5ZgAAAkAAAAEMAAABHLwdyl5oZWFkAAABMAAAAC4AAAA2FpLiAmhoZWEAAAFgAAAAHQAAACQHlAOFaG10eAAAAeQAAAAPAAAAEAwAAKVsb2NhAAACNAAAAAoAAAAKAI4AAG1heHAAAAGAAAAAHwAAACABFgBhbmFtZQAAA0wAAAFJAAACiCnmEVVwb3N0AAAEmAAAAB8AAAAxw4Fw13jaY2BkYGAA4mpu8dx4fpuvDNwsDCBws8dfDk4v/X+SeRsziMvBwASiAP3ZCZIAAHjaY2BkYGBu+N/AEMPCAALM2xgYGVABCwBUeAMiAAAAeNpjYGRgYGBhCGXgYAABJiDmAkIGhv9gPgMAEbsBeAB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PZJ7JMDf8b2CIYW5gaAAKM4LkAN8dDBMAAHjaY2GAABYIXgoAASUAsgB42mNgYGBmgGAZBkYGELAB8hjBfBYGBSDNAoRA/jOZ//8hpORzqEoGRjYGGJOBkQlIMDGgAkaGYQ8AWxUHvAAAAAAAAAAAAAAAjgAAeNo9zLFKw1AUxvFzUs+5oaWxSUtTKDRpxcSKqDQ36aQoFEQQQRChuLn5Fj5C6eAotqDuCjq4q10EJxdBfITqnKs3Iq4f/+8HJlx8T3K3OQAHXPBhCdZgE/ZgH2C+tYJBbMskanY8rLJADl0Mm+VllEmnWuGwZWHDWMdYBuWslV1MsrLyV+L/+DvN6Q37Jo8ob+K2STeMrC75dIAbI/UyCaNoV8aBXS+Kmu85/rWgDyLsUomnROqOnh9w9VVtmdQjNs7YylN6xWJxAY+nNCZNioI2S6SeZu4H6J2rN9Si3EmGjufXRLFuu356wu9sER4yfdKsVvnrMVMb1NNPo08Fi9IjPmjjEH4AfSs82HjafZA9TgMxEIWf8wckEkIgqF1RANr8lCkTKfQIpaNINt6QaNdeeZ1IOQEtFQeg5RgcgBsg0XIKXpZJkyJr7ejzm5nnsQGc4xsK/98l7oQVjvEoXMERMuEq9RfhGvlduI4WPoUb1H+Em7hVA+EWLtQbHVTthLub0m3LCmcYCFdwiifhKvWVcI38KlzHFT6EG9S/hJsY41e4hWtlqQzhYTBBYJxBY4oN4wIxHCySMgbWoTn0ZhLMTE83ehE7mzgbKO9XYpcDHmg554Ap7T23Zr5KJ/5gy4HUmG4eBUu2KY0uInQoG18snNXdqHOw/Z7ttrTYv2uBNcfsUQ1s1Pw92zPSSGwMr5CSNfIyt6QSU49oa6zxu2cp1vNeCIlOvMv0iMeaNHU6925p4sDi5/KMHH20uZI996gcPmNZCHm/3U7EIIpdhj+T2HEZAAAAeNpjYGKAAC4wyciADljAokyMTGzZiXlZmYkAC3YCjAAAAAAB//8AAgABAAAADAAAABYAAAACAAEAAwADAAEABAAAAAIAAAAAeNpjYGBgZACCq0vUOUD0zR5/ORgNADpjBU4AAA==) format('woff'); |
|||
} |
|||
|
|||
.new_iconfont { |
|||
font-family: "new_iconfont" !important; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
.icon-kanjia:before { |
|||
content: "\e61c"; |
|||
} |
|||
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,96 @@ |
|||
import TransformCoordinate from './transformCoordinate.js' |
|||
function openMapByDefault(latitude, longitude, name) { |
|||
uni.openLocation({ |
|||
latitude: latitude, |
|||
longitude: longitude, |
|||
name: name, |
|||
fail: () => { |
|||
uni.showModal({ |
|||
content: '打开地图失败,请重试' |
|||
}) |
|||
}, |
|||
}) |
|||
} |
|||
function openMapByAndroid(latitude, longitude, name) { |
|||
let url = ''; // 回调地址
|
|||
let identity = ''; // 程序名称
|
|||
if(plus.runtime.isApplicationExist({pname: 'com.baidu.BaiduMap'})) { // baidumap
|
|||
url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo` |
|||
identity = 'com.baidu.BaiduMap' |
|||
openURL(url, identity) |
|||
} |
|||
else if(plus.runtime.isApplicationExist({pname: 'com.autonavi.minimap'})) { // 高德
|
|||
url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0` |
|||
identity = 'com.autonavi.minimap' |
|||
openURL(url, identity) |
|||
} |
|||
else { |
|||
openMapByDefault(latitude, longitude, name) |
|||
} |
|||
} |
|||
function openMapByIos(latitude, longitude, name) { |
|||
let url = ''; // 回调地址
|
|||
let errorCB = ''; // url失败的回调地址
|
|||
let identity = ''; // 程序名称
|
|||
|
|||
if(plus.runtime.isApplicationExist({action: 'baidumap://'})) { // baidumap
|
|||
url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`; |
|||
openURL(url, identity) |
|||
} |
|||
else if(plus.runtime.isApplicationExist({action: 'iosamap://'})) { // 高德
|
|||
url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0` |
|||
openURL(url, identity) |
|||
} |
|||
else { |
|||
openMapByDefault(latitude, longitude, name) |
|||
} |
|||
} |
|||
function openURL(url, identity ) { |
|||
let newurl = encodeURI(url); |
|||
plus.runtime.openURL( newurl, function(res){ |
|||
uni.showModal({ |
|||
content: res.message |
|||
}) |
|||
}, identity); |
|||
} |
|||
function getCoordByType(longitude, latitude, coord_type) { |
|||
switch (coord_type){ |
|||
case 'gcj02': |
|||
return [longitude, latitude] |
|||
break; |
|||
case 'bd09': |
|||
return TransformCoordinate.bd09togcj02(longitude, latitude) |
|||
break; |
|||
case 'wgs84': |
|||
return TransformCoordinate.wgs84togcj02(longitude, latitude) |
|||
break; |
|||
default: |
|||
return [longitude, latitude] |
|||
break; |
|||
} |
|||
} |
|||
export default { |
|||
/* 打开地图 */ |
|||
openMap(latitude, longitude, name, coord_type='gcj02') { |
|||
let arr = getCoordByType(longitude, latitude, coord_type) |
|||
// #ifdef APP-PLUS
|
|||
switch(uni.getSystemInfoSync().platform){ |
|||
case 'android': |
|||
console.log('运行Android上') |
|||
openMapByAndroid(arr[1], arr[0], name) |
|||
break; |
|||
case 'ios': |
|||
console.log('运行iOS上') |
|||
openMapByIos(arr[1], arr[0], name) |
|||
break; |
|||
default: |
|||
openMapByDefault(arr[1], arr[0], name) |
|||
console.log('运行在开发者工具上') |
|||
break; |
|||
} |
|||
// #endif
|
|||
// #ifndef APP-PLUS
|
|||
openMapByDefault(arr[1], arr[0], name) |
|||
// #endif
|
|||
} |
|||
} |
|||
@ -0,0 +1,126 @@ |
|||
/** |
|||
* Created by Wandergis on 2015/7/8. |
|||
* 提供了百度坐标（BD09）、国测局坐标（火星坐标，GCJ02）、和WGS84坐标系之间的转换 |
|||
*/ |
|||
|
|||
//定义一些常量
|
|||
var x_PI = 3.14159265358979324 * 3000.0 / 180.0; |
|||
var PI = 3.1415926535897932384626; |
|||
var a = 6378245.0; |
|||
var ee = 0.00669342162296594323; |
|||
|
|||
/** |
|||
* 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换 |
|||
* 即 百度 转 谷歌、高德 |
|||
* @param bd_lon |
|||
* @param bd_lat |
|||
* @returns {*[]} |
|||
*/ |
|||
function bd09togcj02(bd_lon, bd_lat) { |
|||
var x_pi = 3.14159265358979324 * 3000.0 / 180.0; |
|||
var x = bd_lon - 0.0065; |
|||
var y = bd_lat - 0.006; |
|||
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi); |
|||
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi); |
|||
var gg_lng = z * Math.cos(theta); |
|||
var gg_lat = z * Math.sin(theta); |
|||
return [gg_lng, gg_lat] |
|||
} |
|||
|
|||
/** |
|||
* 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换 |
|||
* 即谷歌、高德 转 百度 |
|||
* @param lng |
|||
* @param lat |
|||
* @returns {*[]} |
|||
*/ |
|||
function gcj02tobd09(lng, lat) { |
|||
var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI); |
|||
var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI); |
|||
var bd_lng = z * Math.cos(theta) + 0.0065; |
|||
var bd_lat = z * Math.sin(theta) + 0.006; |
|||
return [bd_lng, bd_lat] |
|||
} |
|||
|
|||
/** |
|||
* WGS84转GCj02 |
|||
* @param lng |
|||
* @param lat |
|||
* @returns {*[]} |
|||
*/ |
|||
function wgs84togcj02(lng, lat) { |
|||
if (out_of_china(lng, lat)) { |
|||
return [lng, lat] |
|||
} |
|||
else { |
|||
var dlat = transformlat(lng - 105.0, lat - 35.0); |
|||
var dlng = transformlng(lng - 105.0, lat - 35.0); |
|||
var radlat = lat / 180.0 * PI; |
|||
var magic = Math.sin(radlat); |
|||
magic = 1 - ee * magic * magic; |
|||
var sqrtmagic = Math.sqrt(magic); |
|||
dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI); |
|||
dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI); |
|||
var mglat = lat + dlat; |
|||
var mglng = lng + dlng; |
|||
return [mglng, mglat] |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* GCJ02 转换为 WGS84 |
|||
* @param lng |
|||
* @param lat |
|||
* @returns {*[]} |
|||
*/ |
|||
function gcj02towgs84(lng, lat) { |
|||
if (out_of_china(lng, lat)) { |
|||
return [lng, lat] |
|||
} |
|||
else { |
|||
var dlat = transformlat(lng - 105.0, lat - 35.0); |
|||
var dlng = transformlng(lng - 105.0, lat - 35.0); |
|||
var radlat = lat / 180.0 * PI; |
|||
var magic = Math.sin(radlat); |
|||
magic = 1 - ee * magic * magic; |
|||
var sqrtmagic = Math.sqrt(magic); |
|||
dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI); |
|||
dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI); |
|||
mglat = lat + dlat; |
|||
mglng = lng + dlng; |
|||
return [lng * 2 - mglng, lat * 2 - mglat] |
|||
} |
|||
} |
|||
|
|||
function transformlat(lng, lat) { |
|||
var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng)); |
|||
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0; |
|||
ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0; |
|||
ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0; |
|||
return ret |
|||
} |
|||
|
|||
function transformlng(lng, lat) { |
|||
var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng)); |
|||
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0; |
|||
ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0; |
|||
ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0; |
|||
return ret |
|||
} |
|||
|
|||
/** |
|||
* 判断是否在国内，不在国内则不做偏移 |
|||
* @param lng |
|||
* @param lat |
|||
* @returns {boolean} |
|||
*/ |
|||
function out_of_china(lng, lat) { |
|||
return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false); |
|||
} |
|||
|
|||
export default { |
|||
bd09togcj02: bd09togcj02, // 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换
|
|||
gcj02tobd09: gcj02tobd09, // 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换
|
|||
wgs84togcj02: wgs84togcj02, //
|
|||
gcj02towgs84: gcj02towgs84, |
|||
} |
|||
@ -0,0 +1,22 @@ |
|||
let mixin = { |
|||
data() { |
|||
return { |
|||
showTopBtn: false, |
|||
pageScroll: 0, |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
}, |
|||
/** |
|||
* 显示/隐藏 返回顶部按钮 |
|||
*/ |
|||
onPageScroll({scrollTop}) { |
|||
let _this = this; |
|||
_this.$util.debounce(200,()=>{ |
|||
_this.pageScroll = scrollTop; |
|||
}) |
|||
}, |
|||
} |
|||
|
|||
export default mixin |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,26 @@ |
|||
let setData = function(obj) { |
|||
let that = this; |
|||
let keys = []; |
|||
let val, data; |
|||
Object.keys(obj).forEach(function(key) { |
|||
keys = key.split('.'); |
|||
val = obj[key]; |
|||
data = that.$data; |
|||
if (keys.length === 1) { |
|||
if(!!that.$data[key]){ |
|||
that.$set(that, key, val); |
|||
}else{ |
|||
that[key] = val; |
|||
} |
|||
} else { |
|||
let setKey = keys.slice(0, keys.length - 1), |
|||
setObj = null; |
|||
setKey.map(itemKey => { |
|||
let ojbItem = setObj; |
|||
setObj = !!setObj ? setObj[itemKey] : that[itemKey]; |
|||
}); |
|||
that.$set(setObj, keys[keys.length - 1], val); |
|||
} |
|||
}); |
|||
} |
|||
export default setData |
|||
@ -0,0 +1,338 @@ |
|||
/** |
|||
* 工具类 |
|||
*/ |
|||
/* |
|||
* @description: 公用方法文件 |
|||
* @author: 杨智源,吴潇 |
|||
* @update: 2018-12-26 |
|||
* 使用方式: this.$util.方法名 |
|||
*/ |
|||
const util = { |
|||
/** |
|||
* 时间戳格式化 |
|||
* @param {Number} datetime 时间戳(秒) |
|||
* @param {String} formateType 时间戳所需处理的方式 normal(月日时分),info(年月日时分秒),rule(年月日时分秒,date(年月日) |
|||
* @param {String} joinType 日期间隔符号 |
|||
* @return {String} 日期字符串 |
|||
*/ |
|||
formatTime(datetime, formateType, joinType) { |
|||
const date = new Date(Number(datetime) * 1000), |
|||
year = date.getFullYear(), |
|||
month = date.getMonth() + 1, |
|||
day = date.getDate(), |
|||
hour = date.getHours(), |
|||
minute = date.getMinutes(), |
|||
second = date.getSeconds(), |
|||
formatNumber = function formatNumber(n) { |
|||
n = n.toString(); |
|||
return n[1] ? n : '0' + n; |
|||
}, |
|||
timeType = { |
|||
'normal': [ |
|||
[month, day], |
|||
[hour, minute] |
|||
], |
|||
'info': [ |
|||
[year, month, day], |
|||
[hour, minute, second] |
|||
], |
|||
'rule': [ |
|||
[year, month, day], |
|||
[hour, minute] |
|||
], |
|||
}; |
|||
if (formateType == 'date') { |
|||
return [year, month, day].map(formatNumber).join(joinType); |
|||
} else { |
|||
return timeType[formateType][0].map(formatNumber).join(joinType) + ' ' + timeType[formateType][1].map(formatNumber) |
|||
.join(':'); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 计算距离时间 |
|||
* @param {String} dateStr 时间格式字符串 yyyy-mm-dd HH:MM:ss |
|||
* @return {String} 日期字符串 |
|||
*/ |
|||
dateDistance(dateStr) { |
|||
let UNITS = { |
|||
'年': 31557600000, |
|||
'月': 2629800000, |
|||
'天': 86400000, |
|||
'小时': 3600000, |
|||
'分钟': 60000, |
|||
'秒': 1000 |
|||
}, |
|||
humanize = function(milliseconds) { |
|||
var humanize = ''; |
|||
for (var key in UNITS) { |
|||
if (milliseconds >= UNITS[key]) { |
|||
humanize = Math.floor(milliseconds / UNITS[key]) + key + '前'; |
|||
break; |
|||
} |
|||
} |
|||
return humanize || '刚刚'; |
|||
}, |
|||
format = function(dateStr) { |
|||
var date = parse(dateStr) |
|||
var diff = Date.now() - date.getTime(); |
|||
if (diff < UNITS['天']) { |
|||
return humanize(diff); |
|||
} |
|||
var _format = function(number) { |
|||
return (number < 10 ? ('0' + number) : number); |
|||
}; |
|||
return date.getFullYear() + '/' + _format(date.getMonth() + 1) + '/' + _format(date.getDay()) + '-' + |
|||
_format(date.getHours()) + ':' + _format(date.getMinutes()); |
|||
}, |
|||
parse = function(str) { //将"yyyy-mm-dd HH:MM:ss"格式的字符串，转化为一个Date对象
|
|||
var a = str.split(/[^0-9]/); |
|||
return new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]); |
|||
}; |
|||
return format(dateStr); |
|||
}, |
|||
|
|||
/** |
|||
* Base64编码解码 |
|||
* @return {String} Base64字符串 |
|||
* 使用方法：new Base64().encode(String) , new Base64().decode(String) |
|||
*/ |
|||
Base64() { |
|||
var _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; |
|||
|
|||
// 编码
|
|||
this.encode = function(input) { |
|||
var output = ""; |
|||
var chr1, chr2, chr3, enc1, enc2, enc3, enc4; |
|||
var i = 0; |
|||
input = _utf8_encode(input); |
|||
while (i < input.length) { |
|||
chr1 = input.charCodeAt(i++); |
|||
chr2 = input.charCodeAt(i++); |
|||
chr3 = input.charCodeAt(i++); |
|||
enc1 = chr1 >> 2; |
|||
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); |
|||
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); |
|||
enc4 = chr3 & 63; |
|||
if (isNaN(chr2)) { |
|||
enc3 = enc4 = 64; |
|||
} else if (isNaN(chr3)) { |
|||
enc4 = 64; |
|||
} |
|||
output = output + |
|||
_keyStr.charAt(enc1) + _keyStr.charAt(enc2) + |
|||
_keyStr.charAt(enc3) + _keyStr.charAt(enc4); |
|||
} |
|||
return output; |
|||
} |
|||
|
|||
// 解码
|
|||
this.decode = function(input) { |
|||
var output = ""; |
|||
var chr1, chr2, chr3; |
|||
var enc1, enc2, enc3, enc4; |
|||
var i = 0; |
|||
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); |
|||
while (i < input.length) { |
|||
enc1 = _keyStr.indexOf(input.charAt(i++)); |
|||
enc2 = _keyStr.indexOf(input.charAt(i++)); |
|||
enc3 = _keyStr.indexOf(input.charAt(i++)); |
|||
enc4 = _keyStr.indexOf(input.charAt(i++)); |
|||
chr1 = (enc1 << 2) | (enc2 >> 4); |
|||
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); |
|||
chr3 = ((enc3 & 3) << 6) | enc4; |
|||
output = output + String.fromCharCode(chr1); |
|||
if (enc3 != 64) { |
|||
output = output + String.fromCharCode(chr2); |
|||
} |
|||
if (enc4 != 64) { |
|||
output = output + String.fromCharCode(chr3); |
|||
} |
|||
} |
|||
output = _utf8_decode(output); |
|||
return output; |
|||
} |
|||
|
|||
let _utf8_encode = function(string) { |
|||
string = string.replace(/\r\n/g, "\n"); |
|||
var utftext = ""; |
|||
for (var n = 0; n < string.length; n++) { |
|||
var c = string.charCodeAt(n); |
|||
if (c < 128) { |
|||
utftext += String.fromCharCode(c); |
|||
} else if ((c > 127) && (c < 2048)) { |
|||
utftext += String.fromCharCode((c >> 6) | 192); |
|||
utftext += String.fromCharCode((c & 63) | 128); |
|||
} else { |
|||
utftext += String.fromCharCode((c >> 12) | 224); |
|||
utftext += String.fromCharCode(((c >> 6) & 63) | 128); |
|||
utftext += String.fromCharCode((c & 63) | 128); |
|||
} |
|||
|
|||
} |
|||
return utftext; |
|||
} |
|||
|
|||
let _utf8_decode = function(utftext) { |
|||
var string = ""; |
|||
var i = 0; |
|||
var c2 = 0, |
|||
c1 = c2, |
|||
c = c1; |
|||
while (i < utftext.length) { |
|||
c = utftext.charCodeAt(i); |
|||
if (c < 128) { |
|||
string += String.fromCharCode(c); |
|||
i++; |
|||
} else if ((c > 191) && (c < 224)) { |
|||
c2 = utftext.charCodeAt(i + 1); |
|||
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)); |
|||
i += 2; |
|||
} else { |
|||
c2 = utftext.charCodeAt(i + 1); |
|||
var c3 = utftext.charCodeAt(i + 2); |
|||
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); |
|||
i += 3; |
|||
} |
|||
} |
|||
return string; |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 获取对象里每一项的值(代替Object.values()) |
|||
* @param {Object} obj 一个对象 |
|||
* @return {String} 一个给定对象自身的所有属性值的数组 |
|||
*/ |
|||
objectValues(obj) { |
|||
let valuesArray = [] |
|||
if (obj) { |
|||
for (let key in obj) { |
|||
valuesArray.push(obj[key]); |
|||
} |
|||
} |
|||
return valuesArray |
|||
}, |
|||
|
|||
/** |
|||
* 请求转换成Promise对象 |
|||
* @param {Object} options 请求参数 |
|||
* @param {Object} pageObj 当前页面实例 |
|||
* @param {Boolean} isToken 请求是否需要携带用户token |
|||
* @returns {Promise} Promise对象 |
|||
*/ |
|||
requestPromise(options, pageObj, isToken = false) { |
|||
return new Promise((resolve, reject) => { |
|||
pageObj.$request({ ...options |
|||
}, res => resolve(res), pageObj, isToken); |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* scene解码 |
|||
*/ |
|||
scene_decode(e) { |
|||
if (e === undefined) |
|||
return {}; |
|||
let scene = decodeURIComponent(e), |
|||
params = scene.split(','), |
|||
data = {}; |
|||
for (let i in params) { |
|||
var val = params[i].split(':'); |
|||
val.length > 0 && val[0] && (data[val[0]] = val[1] || null) |
|||
} |
|||
return data; |
|||
}, |
|||
|
|||
/** |
|||
* 防止滚动触发多次函数 |
|||
* @param {Number} wait 重复间隔 |
|||
* @param {Function} handler 处理操作 |
|||
*/ |
|||
scorllTimert: null, |
|||
debounce(wait, handler) { |
|||
let that = this; |
|||
return (() => { |
|||
// 每次触发 scroll 时先清除定时器
|
|||
clearTimeout(that.scorllTimert); |
|||
that.scorllTimert = setTimeout(() => { |
|||
handler(); |
|||
}, wait); |
|||
})(); |
|||
}, |
|||
|
|||
/** |
|||
* 获取url链接参数 |
|||
* @param {String} name 需要获取的参数名 |
|||
* @param {String} params url链接 |
|||
* @param {Boolean} ishref 是否使用完整的href路径作为正则匹配的参数 默认为否 |
|||
*/ |
|||
getParams(name, params, ishref = !1) { |
|||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); |
|||
var r = !!params ? (ishref ? params.includes('?') && params.split('?')[1].match(reg) : params.match(reg)) : null; |
|||
if (Object.prototype.toString.call(r) == "[object Array]") { |
|||
return r[2]; |
|||
} |
|||
if (r != null) { |
|||
return unescape(r[2]); |
|||
} |
|||
return r || null; |
|||
}, |
|||
|
|||
/** |
|||
* 坐标系转换 |
|||
*/ |
|||
// bd09转gcj02
|
|||
baidu_To_qq(lat, lon) { |
|||
let x_pi = 3.14159265358979324 * 3000.0 / 180.0, |
|||
x = lon - 0.0065, |
|||
y = lat - 0.006, |
|||
z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi), |
|||
theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi), |
|||
latitude = z * Math.cos(theta), |
|||
longitude = z * Math.sin(theta), |
|||
gps = { |
|||
latitude, |
|||
longitude |
|||
}; |
|||
return gps; |
|||
}, |
|||
//gcj02转bd09
|
|||
qq_To_baidu(lat, lng) { |
|||
let x_PI = 3.14159265358979324 * 3000.0 / 180.0, |
|||
z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI), |
|||
theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI), |
|||
latitude = z * Math.cos(theta) + 0.0065, |
|||
longitude = z * Math.sin(theta) + 0.006, |
|||
gps = { |
|||
latitude, |
|||
longitude |
|||
}; |
|||
return gps; |
|||
}, |
|||
|
|||
// 浮点数计算
|
|||
// @digit {Number} 浮点数乘以的次方
|
|||
// 加法
|
|||
additionFloat(one,two,digit){ |
|||
let num=((one*digit)+(two*digit))/digit |
|||
return num; |
|||
}, |
|||
// 减法
|
|||
subtractionFloat(one,two,digit){ |
|||
let num=((one*digit)-(two*digit))/digit |
|||
return num; |
|||
}, |
|||
// 乘法
|
|||
multiplicationFloat(one,two,digit){ |
|||
let num=((one*digit)*(two*digit))/(digit*digit) |
|||
return num; |
|||
}, |
|||
// 除法
|
|||
divisionFloat(one,two,digit){ |
|||
let num=((one*digit)/(two*digit))/(digit*digit) |
|||
return num; |
|||
}, |
|||
|
|||
}; |
|||
export default util |
|||
@ -0,0 +1,234 @@ |
|||
import App from "@/common/js/app.js" |
|||
const wxApi = { |
|||
configData: null, |
|||
/** |
|||
* [wxRegister 微信Api初始化] |
|||
*/ |
|||
wxRegister(callback) { |
|||
let _this = this, |
|||
signUrl = encodeURIComponent(location.href.split("#")[0]), |
|||
jsApiList = ["hideAllNonBaseMenuItem", "onMenuShareTimeline", "onMenuShareAppMessage", "openBusinessView", |
|||
"scanQRCode", |
|||
"getLocation", "chooseImage", "uploadImage", "openAddress", "openLocation", "translateVoice", 'stopRecord', |
|||
'startRecord', "WeixinJSBridgeReady",'playVoice',"uploadVoice","downloadVoice","updateAppMessageShareData","updateTimelineShareData" |
|||
]; |
|||
App._post_form("&do=getJssdk", { |
|||
sign_url: signUrl |
|||
}, (res) => { |
|||
let data = res.data; |
|||
jWeixin.config({ |
|||
debug: false, // 开启调试模式
|
|||
appId: data.appId, // 必填，公众号的唯一标识
|
|||
timestamp: data.timestamp, // 必填，生成签名的时间戳
|
|||
nonceStr: data.nonceStr, // 必填，生成签名的随机串
|
|||
signature: data.signature, // 必填，签名
|
|||
jsApiList: jsApiList ,// 必填，需要使用的JS接口列表
|
|||
openTagList:['wx-open-launch-weapp','wx-open-subscribe'] |
|||
}); |
|||
jWeixin.ready(() => { |
|||
// jWeixin.hideMenuItems({
|
|||
// menuList: ["menuItem:copyUrl"] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮
|
|||
// });
|
|||
callback && callback(); |
|||
}); |
|||
_this.configData = { |
|||
...data, |
|||
url: signUrl |
|||
} |
|||
jWeixin.error((optinos) => { |
|||
// config信息验证失败会执行error函数，
|
|||
//如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，
|
|||
//也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
|
|||
console.log(optinos, 'optinos',_this.configData.url) |
|||
// App.showError(optinos.errMsg)
|
|||
}); |
|||
// jWeixin.success((options) => {
|
|||
// console.log(optinos, 'optinos')
|
|||
// })
|
|||
// wx.ready(function() {
|
|||
// wx.hideMenuItems({
|
|||
// menuList: ["menuItem:copyUrl"] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮
|
|||
// });
|
|||
// });
|
|||
// jWeixin.ready(function() {
|
|||
// jWeixin.hideMenuItems({
|
|||
// menuList: ["menuItem:copyUrl","menuItem:editTag","menuItem:delete","menuItem:originPage","menuItem:readMode", "menuItem:openWithQQBrowser", "menuItem:openWithSafari","menuItem:share:email","menuItem:share:brand","menuItem:share:qq","menuItem:share:QZone"] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮
|
|||
// });
|
|||
// });
|
|||
}); |
|||
}, |
|||
wxShare(options){ |
|||
jWeixin.onMenuShareAppMessage(options); |
|||
jWeixin.onMenuShareTimeline(options); |
|||
// jWeixin.updateAppMessageShareData(options);
|
|||
// jWeixin.updateTimelineShareData(options);
|
|||
}, |
|||
oldWxShare(options) { |
|||
jWeixin.onMenuShareAppMessage(options); |
|||
jWeixin.onMenuShareTimeline(options); |
|||
jWeixin.updateAppMessageShareData(options); |
|||
jWeixin.updateTimelineShareData(options); |
|||
// jWeixin.onMenuShareTimeline({
|
|||
// title: options.title, // 分享标题
|
|||
// desc: options.desc, // 分享描述
|
|||
// link: options.link, // 分享链接
|
|||
// imgUrl: options.imgUrl, // 分享图标
|
|||
// success: function() {
|
|||
// // 用户点击了分享后执行的回调函数
|
|||
// },
|
|||
// })
|
|||
}, |
|||
WxopenLocation(lat, lng, storename, address) { |
|||
jWeixin.openLocation({ |
|||
latitude: Number(lat), // 纬度，浮点数，范围为90 ~ -90
|
|||
longitude: Number(lng), // 经度，浮点数，范围为180 ~ -180。
|
|||
name: storename, // 位置名
|
|||
address: address, // 地址详情说明
|
|||
scale: 14, // 地图缩放级别,整形值,范围从1~28。默认为最大
|
|||
infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
|
|||
}); |
|||
}, |
|||
wxPay(options) { |
|||
jWeixin.chooseWXPay({ |
|||
timestamp: options.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
|
|||
nonceStr: options.nonceStr, // 支付签名随机串，不长于 32 位
|
|||
package: options.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
|
|||
signType: options.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
|
|||
paySign: options.paySign, // 支付签名
|
|||
success(res) { |
|||
// 支付成功后的回调函数
|
|||
options.success && options.success(res) |
|||
}, |
|||
cancel(res) { |
|||
options.cancel && options.cancel(res) |
|||
}, |
|||
fail(res) { |
|||
options.fail && options.fail(res) |
|||
} |
|||
}); |
|||
}, |
|||
scanQRCode(callback) { |
|||
jWeixin.scanQRCode({ |
|||
needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
|
|||
scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
|
|||
complete(res) { |
|||
callback && callback(res); |
|||
} |
|||
}); |
|||
}, |
|||
hideMenuItem() { |
|||
jWeixin.hideAllNonBaseMenuItem(); |
|||
}, |
|||
getLocation(optinos) { |
|||
jWeixin.getLocation(optinos); |
|||
}, |
|||
getLocation1() { |
|||
jWeixin.getLocation({ |
|||
type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
|
|||
success: function(res) { |
|||
jWeixin.openLocation({ |
|||
latitude: res.latitude, // 纬度，浮点数，范围为90 ~ -90
|
|||
longitude: res.longitude, // 经度，浮点数，范围为180 ~ -180。
|
|||
name: '', // 位置名
|
|||
address: '', // 地址详情说明
|
|||
scale: 14, // 地图缩放级别,整形值,范围从1~28。默认为最大
|
|||
infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
|
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
// 选取图片
|
|||
choseImage(callback,num=1) { |
|||
|
|||
jWeixin.chooseImage({ |
|||
count: num, // 默认9
|
|||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
|||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
|||
complete: function(res) { |
|||
callback && callback(res); |
|||
} |
|||
}); |
|||
|
|||
}, |
|||
//上传图片
|
|||
uoloadIg(localId, callback) { |
|||
debugger |
|||
// App._upLoad()
|
|||
jWeixin.uploadImage({ |
|||
localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
|
|||
isShowProgressTips: 1, // 默认为1，显示进度提示
|
|||
complete: function(res) { |
|||
callback && callback(res) |
|||
} |
|||
}); |
|||
}, |
|||
/** |
|||
* 微信好物圈 |
|||
*/ |
|||
wxGoodsCircle(queryString, success, fail) { |
|||
jWeixin.openBusinessView({ |
|||
businessType: 'friendGoodsRecommend', |
|||
queryString: queryString, |
|||
success(res) { |
|||
success && success(res); |
|||
}, |
|||
fail(res) { |
|||
fail && fail(res); |
|||
} |
|||
}) |
|||
}, |
|||
wxOpenAddress(callback) { |
|||
console.info(jWeixin) |
|||
jWeixin.openAddress({ |
|||
success(res) { |
|||
callback && callback(res) |
|||
}, |
|||
fail(errMsg) { |
|||
callback && callback(errMsg) |
|||
console.info('我失败了') |
|||
} |
|||
}) |
|||
}, |
|||
// 监听录音自动停止接口
|
|||
wxStartRecord() { |
|||
console.info('startRecord') |
|||
jWeixin.startRecord({}) |
|||
}, |
|||
// 停止录音接口
|
|||
wxStopRecord(callback) { |
|||
console.info('wxStopRecord') |
|||
jWeixin.stopRecord({ |
|||
success: function(res) { |
|||
console.info('localId', res.localId) |
|||
callback && callback(res.localId) |
|||
|
|||
} |
|||
}) |
|||
}, |
|||
//监听播放录音
|
|||
wxPlayVoice(id){ |
|||
jWeixin.playVoice({ |
|||
localId:id |
|||
}) |
|||
}, |
|||
//录音上传
|
|||
wxUploadVoice(localId,callback){ |
|||
jWeixin.uploadVoice({ |
|||
localId:localId, |
|||
success: function (res) { |
|||
callback && callback(res.serverId); |
|||
} |
|||
}) |
|||
}, |
|||
// 识别音频并返回识别结果接口
|
|||
wxTranslateVoice(localId, callback) { |
|||
jWeixin.translateVoice({ |
|||
localId: localId, // 需要识别的音频的本地Id，由录音相关接口获得
|
|||
isShowProgressTips: 1, // 默认为1，显示进度提示
|
|||
success: function(res) { |
|||
callback && callback(res.translateResult) // 语音识别的结果
|
|||
} |
|||
}) |
|||
} |
|||
} |
|||
export default wxApi |
|||
Binary file not shown.
@ -0,0 +1,599 @@ |
|||
<template> |
|||
<view> |
|||
<view class="tui-fab-mask" :class="{'tui-visible':isOpen}" @tap.stop="handleClickCancel"></view> |
|||
<view class="tui-fab-btn" :class="{'tui-visible':isOpen,'tui-fab-hidden':hidden}" :style="'right: ' + left + 'px; bottom:' + (Number(top)+50) + 'px;'"> |
|||
<view class="tui-fab-item-box" :class="{'tui-fab-item-left':lefts && !rights && item.imgUrl}" v-for="(item,index) in btnList" |
|||
:key="index" @tap.stop="handleClick(item.id)"> |
|||
<view :class="[lefts && !rights?'tui-text-left':'tui-text-right']" v-if="item.imgUrl" :style="{fontSize:item.fontSize+'rpx',color:item.color}">{{item.text || ""}}</view> |
|||
<view class="tui-fab-item" :style="{width:widths+'rpx',height:heights+'rpx',background:item.bgColor || bgColor,borderRadius:radius}"> |
|||
<view class="tui-fab-title" v-if="!item.imgUrl" :style="{fontSize:item.fontSize+'rpx',color:item.color}">{{item.text || ""}}</view> |
|||
<image :src="item.imgUrl" class="tui-fab-img" v-else :style="{width:item.imgWidth+'rpx',height:item.imgHeight+'rpx'}"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view v-if="CustomerService.wxappcur == 1"> |
|||
<button |
|||
id="_drag_button" |
|||
class="drag buttondrag" |
|||
open-type="contact" |
|||
:style="'left: ' + left + 'px; bottom:' + top + 'px;'" |
|||
@touchstart="touchstart" |
|||
@touchmove.stop.prevent="touchmovel" |
|||
@touchend="touchend" |
|||
hover-class="none" |
|||
:class="{transition: isDock && !isMove }" |
|||
> |
|||
<image :src="CustomerService.susicon" class="img" :style="{width: CustomerService.logowidth + 'px',height:CustomerService.logowidth + 'px'}" mode="aspectFit"></image> |
|||
</button> |
|||
</view> |
|||
<view v-else> |
|||
<view v-if="CustomerService.logoloca == 1"> |
|||
<view |
|||
id="_drag_button" |
|||
class="drag" |
|||
:style="'left: ' + left + 'px; bottom:' + top + 'px;'" |
|||
@touchstart="touchstart" |
|||
@touchmove.stop.prevent="touchmovel" |
|||
@touchend="touchend" |
|||
@click.stop.prevent="click(-1)" |
|||
:class="{transition: isDock && !isMove }" |
|||
> |
|||
<image :src="CustomerService.susicon" class="img" :style="{width: CustomerService.logowidth + 'px',height:CustomerService.logowidth + 'px'}" mode="aspectFit"></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<view v-if="CustomerService.logoloca == 0"> |
|||
<view |
|||
id="_drag_button" |
|||
class="drag" |
|||
:style="'right: ' + left + 'px; bottom:' + top + 'px;'" |
|||
@touchstart="touchstart" |
|||
@touchmove.stop.prevent="touchmover" |
|||
@touchend="touchend" |
|||
@click.stop.prevent="click(-1)" |
|||
:class="{transition: isDock && !isMove }" |
|||
> |
|||
<image :src="CustomerService.susicon" class="img" :style="{width: CustomerService.logowidth + 'px',height:CustomerService.logowidth + 'px'}" mode="aspectFit"></image> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from '@/common/js/app.js' |
|||
export default { |
|||
name: 'drag-button', |
|||
props: { |
|||
isDock:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
existTabBar:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
btndata:{ |
|||
type:Object, |
|||
default:null |
|||
}, |
|||
lefts: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
//rpx 当为0时且left不为0，值为auto |
|||
rights: { |
|||
type: Number, |
|||
default: 80 |
|||
}, |
|||
//rpx bottom值 |
|||
bottoms: { |
|||
type: Number, |
|||
default: 100 |
|||
}, |
|||
//默认按钮 宽度 rpx |
|||
widths: { |
|||
type: Number, |
|||
default: 108 |
|||
}, |
|||
//默认按钮 高度 rpx |
|||
heights: { |
|||
type: Number, |
|||
default: 108 |
|||
}, |
|||
//圆角值 |
|||
radius: { |
|||
type: String, |
|||
default: "50%" |
|||
}, |
|||
//默认按钮背景颜色 |
|||
bgColor: { |
|||
type: String, |
|||
default: "#5677fc" |
|||
}, |
|||
//字体颜色 |
|||
color: { |
|||
type: String, |
|||
default: "#fff" |
|||
}, |
|||
//拓展按钮 |
|||
// bgColor: "#5677fc", |
|||
// //图标/图片地址 |
|||
// imgUrl: "/static/images/fab/fab_reward.png", |
|||
// //图片高度 rpx |
|||
// imgHeight: 60, |
|||
// //图片宽度 rpx |
|||
// imgWidth: 60, |
|||
// //名称 |
|||
// text: "名称", |
|||
// //字体大小 |
|||
// fontSize: 30, |
|||
// //字体颜色 |
|||
// color: "#fff" |
|||
//点击遮罩 是否可关闭 |
|||
maskClosable: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
top:0, |
|||
left:0, |
|||
width: 0, |
|||
height: 0, |
|||
offsetWidth: 0, |
|||
offsetHeight: 0, |
|||
windowWidth: 0, |
|||
windowHeight: 0, |
|||
isMove: true, |
|||
edge: 10, |
|||
text: '按钮', |
|||
CustomerService:'', |
|||
isOpen: false, |
|||
hidden: true, |
|||
timer: null, |
|||
btnList: [{ |
|||
bgColor: "#16C2C2", |
|||
//名称 |
|||
text: "客服", |
|||
//字体大小 |
|||
fontSize: 28, |
|||
id:0, |
|||
//字体颜色 |
|||
color: "#fff" |
|||
} |
|||
// , |
|||
// { |
|||
// bgColor: "#FFA000", |
|||
// //名称 |
|||
// text: "链接", |
|||
// //字体大小 |
|||
// fontSize: 28, |
|||
// id:2, |
|||
// //字体颜色 |
|||
// color: "#fff" |
|||
// } |
|||
] |
|||
} |
|||
}, |
|||
onHide() { |
|||
console.log('进了onhide'); |
|||
}, |
|||
mounted() { |
|||
const sys = uni.getSystemInfoSync(); |
|||
let _this = this; |
|||
//#ifdef APP-PLUS |
|||
let obj = { |
|||
bgColor: "#64B532", |
|||
//名称 |
|||
text: "分享", |
|||
//字体大小 |
|||
fontSize: 28, |
|||
id:1, |
|||
//字体颜色 |
|||
color: "#fff"}; |
|||
this.btnList.push(obj); |
|||
//#endif |
|||
this.windowWidth = sys.windowWidth; |
|||
this.windowHeight = sys.windowHeight; |
|||
this.CustomerService = uni.getStorageSync('CustomerService'); |
|||
let btnleftAndbottom = uni.getStorageSync('btnleftAndbottom'); |
|||
if(btnleftAndbottom){ |
|||
this.left = btnleftAndbottom.left; |
|||
this.top = btnleftAndbottom.top; |
|||
}else{ |
|||
this.left = this.CustomerService.logoleft; |
|||
this.top = this.CustomerService.logobottom; |
|||
} |
|||
// #ifdef APP-PLUS |
|||
this.existTabBar && (this.windowHeight -= 50); |
|||
// #endif |
|||
if (sys.windowTop) { |
|||
this.windowHeight += sys.windowTop; |
|||
} |
|||
uni.$on('getFarBtn',function(data){ |
|||
_this.getFar(); |
|||
}) |
|||
}, |
|||
methods: { |
|||
getLeft() { |
|||
let val = "auto" |
|||
if (this.lefts && !this.rights) { |
|||
val = this.left + 'rpx' |
|||
} |
|||
return val |
|||
}, |
|||
getRight() { |
|||
let val = this.rights + 'rpx' |
|||
if (this.lefts && !this.rights) { |
|||
val = "auto" |
|||
} |
|||
return val |
|||
}, |
|||
handleClick: function(index) { |
|||
// this.hidden = false |
|||
// clearTimeout(this.timer) |
|||
// if (index == -1 && this.btnList.length) { |
|||
// this.isOpen = !this.isOpen |
|||
// } else { |
|||
// this.$emit("click", { |
|||
// index: index |
|||
// }) |
|||
// this.isOpen = false |
|||
// } |
|||
// if (!this.isOpen) { |
|||
// this.timer = setTimeout(() => { |
|||
// this.hidden = true |
|||
// }, 200) |
|||
// } |
|||
if(index == 0){ |
|||
this.$emit('btnClick'); |
|||
}else if(index == 1){ |
|||
let AppShareData = uni.getStorageSync('AppShareData'); |
|||
console.log('分享数据测试',JSON.stringify(AppShareData)); |
|||
// //#ifdef APP-PLUS |
|||
// uni.share({ |
|||
// provider: 'weixin', // 分享服务提供商（即weixin|qq|sinaweibo） |
|||
// scene: "WXSceneSession", //分享到聊天界面 |
|||
// type: 5, //分享形式 5:小程序 |
|||
// imageUrl: AppShareData.img,//官方规定分享图比例是5：4,其它尺寸可能显示不全。 |
|||
// title: '欢迎体验uniapp', |
|||
// miniProgram: { |
|||
// id: 'gh_59d3d43b1c12', //微信小程序原始id |
|||
// path: 'pages/mainPages/index/index', //点击链接进入的页面 |
|||
// type: 0, //微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。 |
|||
// webUrl: 'https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%CA%D6%BB%FA%B1%DA%D6%BD%CD%BC%C6%AC&fr=ala&ala=1&alatpl=normal&pos=0' //兼容低版本的网页链接 |
|||
// }, |
|||
// success: ret => { |
|||
// console.log(JSON.stringify(ret)); |
|||
// } |
|||
// }); |
|||
// //#endif |
|||
//#ifdef APP-PLUS |
|||
uni.share({ |
|||
provider: "weixin", |
|||
scene: "WXSceneSession", |
|||
type: 0, |
|||
// href: AppShareData.mpurl, |
|||
href:'https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%CA%D6%BB%FA%B1%DA%D6%BD%CD%BC%C6%AC&fr=ala&ala=1&alatpl=normal&pos=0', |
|||
title: AppShareData.title, |
|||
summary: AppShareData.desc, |
|||
imageUrl: AppShareData.img, |
|||
success: function (res) { |
|||
console.log(JSON.stringify(res)); |
|||
uni.showToast({ |
|||
title: '已分享', |
|||
duration: 2000 |
|||
}); |
|||
}, |
|||
|
|||
fail: function (err) { |
|||
|
|||
var errrr = JSON.stringify(err); |
|||
if(errrr){ |
|||
uni.showModal({ |
|||
title: '表单不能留空', |
|||
content: '请完善所有信息再发起分享', |
|||
success: function (res) { |
|||
if (res.confirm) { |
|||
console.log('用户点击确定'); |
|||
} else if (res.cancel) { |
|||
console.log('用户点击取消'); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
//#endif |
|||
}else{ |
|||
this.$emit('btnClick'); |
|||
} |
|||
}, |
|||
handleClickCancel: function() { |
|||
// if (!this.maskClosable) return; |
|||
//#ifndef APP-PLUS |
|||
this.$emit('btnClick'); |
|||
//#endif |
|||
//#ifdef APP-PLUS |
|||
this.isOpen = !this.isOpen |
|||
//#endif |
|||
|
|||
}, |
|||
getFar(){ |
|||
let btnleftAndbottom = uni.getStorageSync('btnleftAndbottom'); |
|||
if(btnleftAndbottom){ |
|||
this.left = btnleftAndbottom.left; |
|||
this.top = btnleftAndbottom.top; |
|||
}else{ |
|||
this.left = this.CustomerService.logoleft; |
|||
this.top = this.CustomerService.logobottom; |
|||
} |
|||
}, |
|||
click(index) { |
|||
//#ifdef APP-PLUS |
|||
this.hidden = false |
|||
clearTimeout(this.timer) |
|||
if (index == -1 && this.btnList.length) { |
|||
this.isOpen = !this.isOpen |
|||
// debugger |
|||
} else { |
|||
this.$emit("click", { |
|||
index: index |
|||
}) |
|||
this.isOpen = false |
|||
} |
|||
if (!this.isOpen) { |
|||
this.timer = setTimeout(() => { |
|||
this.hidden = true |
|||
}, 200) |
|||
} |
|||
//#endif |
|||
//#ifndef APP-PLUS |
|||
if(this.CustomerService.wxappcur == 2){ |
|||
//#ifdef H5 |
|||
App.navigationTo({ |
|||
url: this.CustomerService.customerurl |
|||
}); |
|||
// #endif |
|||
//#ifdef MP-WEIXIN |
|||
wx.openCustomerServiceChat({ |
|||
extInfo: {url: this.CustomerService.customerurl}, |
|||
corpId: this.CustomerService.enterpriseid, |
|||
success(res) { |
|||
|
|||
} |
|||
}) |
|||
//#endif |
|||
|
|||
}else{ |
|||
this.$emit('btnClick'); |
|||
} |
|||
|
|||
//#endif |
|||
|
|||
}, |
|||
touchstart(e) { |
|||
this.$emit('btnTouchstart'); |
|||
}, |
|||
touchmovel(e){ |
|||
this.width = this.btndata.width; |
|||
this.height = this.btndata.height; |
|||
this.offsetWidth = this.btndata.width/2; |
|||
this.offsetHeight = this.btndata.height/2; |
|||
// 单指触摸 |
|||
if (e.touches.length !== 1) { |
|||
return false; |
|||
} |
|||
|
|||
this.isMove = true; |
|||
this.left = e.touches[0].clientX - this.offsetWidth - 25; |
|||
|
|||
let clientY = e.touches[0].clientY - this.offsetHeight; |
|||
// #ifdef H5 |
|||
clientY += this.height; |
|||
// #endif |
|||
let edgeBottom = this.windowHeight - this.height - this.edge; |
|||
|
|||
// 上下触及边界 |
|||
|
|||
if(this.windowHeight < (clientY - 25)){ |
|||
this.top = 0 |
|||
}else if(clientY < 0){ |
|||
return |
|||
}else{ |
|||
this.top =this.windowHeight - clientY - 25; |
|||
} |
|||
// this.top =this.windowHeight - clientY - 25 |
|||
|
|||
|
|||
}, |
|||
touchmover(e) { |
|||
this.width = this.btndata.width; |
|||
this.height = this.btndata.height; |
|||
this.offsetWidth = this.btndata.width/2; |
|||
this.offsetHeight = this.btndata.height/2; |
|||
// 单指触摸 |
|||
if (e.touches.length !== 1) { |
|||
return false; |
|||
} |
|||
|
|||
this.isMove = true; |
|||
this.left = this.windowWidth - e.touches[0].clientX - this.offsetWidth - 25; |
|||
|
|||
let clientY = e.touches[0].clientY - this.offsetHeight; |
|||
// #ifdef H5 |
|||
clientY += this.height; |
|||
// #endif |
|||
let edgeBottom = this.windowHeight - this.height - this.edge; |
|||
|
|||
// 上下触及边界 |
|||
if(this.windowHeight < (clientY - 25)){ |
|||
this.top = 0 |
|||
}else if(clientY < 0){ |
|||
return |
|||
}else{ |
|||
this.top =this.windowHeight - clientY - 25; |
|||
} |
|||
|
|||
}, |
|||
touchend(e) { |
|||
if (this.isDock) { |
|||
let edgeRigth = this.windowWidth - this.width - this.edge - 25; |
|||
setTimeout(()=>{ |
|||
if (this.left < this.windowWidth / 2 - this.offsetWidth) { |
|||
this.left = -this.edge; |
|||
} else { |
|||
this.left = edgeRigth; |
|||
} |
|||
let btnleftAndbottom = { |
|||
left:this.left, |
|||
top:this.top |
|||
}; |
|||
uni.setStorageSync('btnleftAndbottom',btnleftAndbottom); |
|||
},200) |
|||
} |
|||
|
|||
this.isMove = false; |
|||
|
|||
this.$emit('btnTouchend'); |
|||
}, |
|||
}} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.drag { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
// background-color: rgba(0, 0, 0, 0.5); |
|||
// box-shadow: 0 0 6upx rgba(0, 0, 0, 0.4); |
|||
color: $uni-text-color-inverse; |
|||
// width: 80upx; |
|||
// height: 80upx; |
|||
// border-radius: 50%; |
|||
font-size: $uni-font-size-sm; |
|||
position: fixed; |
|||
z-index: 999999; |
|||
|
|||
&.transition { |
|||
transition: left .3s ease,top .3s ease; |
|||
} |
|||
&.transition { |
|||
transition: right .3s ease,bottom .3s ease; |
|||
} |
|||
} |
|||
.buttondrag{ |
|||
padding: 0; |
|||
border-radius: 0; |
|||
} |
|||
.tui-fab-icon { |
|||
font-family: "tuifab" !important; |
|||
font-style: normal; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
padding: 10rpx; |
|||
} |
|||
|
|||
.tui-icon-plus:before { |
|||
content: "\e613"; |
|||
} |
|||
|
|||
.tui-fab-box { |
|||
display: flex; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
position: fixed; |
|||
z-index: 99997; |
|||
} |
|||
|
|||
.tui-fab-right { |
|||
align-items: flex-end; |
|||
} |
|||
|
|||
.tui-fab-btn { |
|||
transform: scale(0); |
|||
transition: all 0.2s ease-in-out; |
|||
opacity: 0; |
|||
visibility: hidden; |
|||
position: fixed; |
|||
z-index: 999999; |
|||
} |
|||
|
|||
.tui-fab-hidden { |
|||
height: 0; |
|||
width: 0; |
|||
} |
|||
|
|||
|
|||
.tui-fab-item-box { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
padding-bottom: 40rpx; |
|||
} |
|||
|
|||
.tui-fab-item-left { |
|||
flex-flow: row-reverse; |
|||
} |
|||
|
|||
.tui-fab-title { |
|||
width: 90%; |
|||
text-align: center; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.tui-text-left { |
|||
padding-left: 28rpx; |
|||
} |
|||
|
|||
.tui-text-right { |
|||
padding-right: 28rpx; |
|||
} |
|||
|
|||
.tui-fab-img { |
|||
display: block; |
|||
} |
|||
|
|||
.tui-fab-item { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1); |
|||
transition: all 0.2s linear; |
|||
} |
|||
|
|||
.tui-radius { |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.tui-active { |
|||
transform: rotate(135deg); |
|||
} |
|||
|
|||
.tui-fab-mask { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: rgba(0, 0, 0, 0.75); |
|||
z-index: 99996; |
|||
transition: all 0.2s ease-in-out; |
|||
opacity: 0; |
|||
visibility: hidden; |
|||
} |
|||
|
|||
.tui-visible { |
|||
visibility: visible; |
|||
opacity: 1; |
|||
transform: scale(1); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,233 @@ |
|||
<template> |
|||
<view class="hx-jump-ball"> |
|||
<view class="ballBox" :animation="ballBoxAnimationData" > |
|||
<view class="ballOuter" |
|||
:animation="ballOuterAnimationData" |
|||
:style="{width:ballWidth*2 + 'upx',height:ballHeight*2 + 'upx','background-color':backgroundColor,'background-image': backgroundImage ?`url(${backgroundImage})`: '','z-index':index}"> |
|||
<text style="font-size: 24;margin: auto;color: #FFFFFF;font-weight: 700;line-height: 20upx;text-align: center;">+1</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "hx-jump-ball", |
|||
data() { |
|||
return { |
|||
flag: false, |
|||
ballBoxAnimation: null, |
|||
ballOuterAnimation: null, |
|||
ballBoxAnimationData: {}, |
|||
ballOuterAnimationData: {}, |
|||
}; |
|||
}, |
|||
props: { |
|||
//小球宽度 |
|||
ballWidth: { |
|||
type: Number, |
|||
default: 20 |
|||
}, |
|||
//小球高度 |
|||
ballHeight: { |
|||
type: Number, |
|||
default: 20 |
|||
}, |
|||
//小球颜色 |
|||
backgroundColor: { |
|||
type: String, |
|||
default: "#ff4444" |
|||
}, |
|||
//图片 |
|||
backgroundImage: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
//小球的堆叠顺序 |
|||
index: { |
|||
type: Number, |
|||
default: 999 |
|||
}, |
|||
//开始动画 |
|||
start: { |
|||
type: Number, |
|||
default: 1 |
|||
}, |
|||
//html元素class名称，[起点元素，终点元素] |
|||
element:{ |
|||
type: Array, |
|||
default(){ |
|||
return [] |
|||
} |
|||
}, |
|||
//下落速度 ms毫秒 |
|||
speed:{ |
|||
type: Number, |
|||
default: 400 |
|||
}, |
|||
//贝塞尔曲线 |
|||
bezier:{ |
|||
type: String, |
|||
default: "cubic-bezier(.6,-0.63,.94,.71)" |
|||
} |
|||
}, |
|||
watch:{ |
|||
'start': { |
|||
handler(val,oldVal) { |
|||
console.log(val,oldVal); |
|||
let that = this; |
|||
if(!that.element){ |
|||
return; |
|||
} |
|||
if(that.flag == true){ |
|||
return; |
|||
}else{ |
|||
that.flag = !that.flag; |
|||
console.log(that.flag); |
|||
that.getElementCoordinate(that.element[0],that.element[1]); |
|||
} |
|||
|
|||
}, |
|||
deep: true, //对象内部的属性监听，也叫深度监听 |
|||
} |
|||
}, |
|||
created() { |
|||
this.ballBoxAnimation = uni.createAnimation({ |
|||
duration: 0, |
|||
timingFunction: this.bezier, |
|||
delay: 0 |
|||
}); |
|||
this.ballOuterAnimation = uni.createAnimation({ |
|||
duration: 0, |
|||
timingFunction: "linear", |
|||
delay: 0 |
|||
}); |
|||
this.setEnd(); |
|||
//初始化位置 |
|||
}, |
|||
mounted() { |
|||
this.monitoring() // 注册监听事件 |
|||
uni.$on('update',function(data){ |
|||
this.setEnd(); |
|||
}) |
|||
}, |
|||
methods:{ |
|||
monitoring() { // 监听事件 |
|||
let that = this; |
|||
this.$on('childMethod', (res) => { |
|||
that.element = res; |
|||
that.getElementCoordinate(that.element[0],that.element[1]); |
|||
}) |
|||
}, |
|||
//获取元素坐标 |
|||
getElementCoordinate(startElement,endElement){ |
|||
let that = this; |
|||
const SLeft = startElement.left + ((startElement.width + that.ballWidth ) / 2 - that.ballWidth); |
|||
const STop = startElement.bottom - ((startElement.height - that.ballHeight ) / 2 + that.ballHeight); |
|||
|
|||
|
|||
//计算出元素的中心坐标 |
|||
let ELeft = endElement.left + ((endElement.width + that.ballWidth ) / 2 - that.ballWidth); |
|||
let ETop = endElement.bottom - ((endElement.height - that.ballHeight ) / 2 + that.ballHeight); |
|||
//#ifndef H5 |
|||
ELeft = ELeft; |
|||
ETop = ETop; |
|||
//#endif |
|||
//初始化位置 |
|||
that.setStart(SLeft,STop,ELeft,ETop); |
|||
that.startAnimation(SLeft,STop,ELeft,ETop); |
|||
}, |
|||
|
|||
|
|||
//开始动画 |
|||
startAnimation(SLeft,STop,ELeft,ETop){ |
|||
let that = this; |
|||
let jumpDistance = SLeft - ELeft; |
|||
//#ifndef MP-WEIXIN |
|||
setTimeout(function() { |
|||
that.flag = !that.flag; |
|||
that.$emit("msg",{code:0,status:true}); |
|||
},600); |
|||
//#endif |
|||
//#ifndef H5 |
|||
setTimeout(function() { |
|||
that.flag = !that.flag; |
|||
that.$emit("msg",{code:0,status:true}); |
|||
},700); |
|||
//#endif |
|||
|
|||
|
|||
// 暂时注释掉，待uniapp修复bug后再调整 |
|||
//根坐标 |
|||
// this.ballBoxAnimation.translate3d(ELeft,STop,0).step({duration: 800}); |
|||
// this.ballBoxAnimation.translate3d(ELeft,ETop,0).step({duration: 800}); |
|||
// this.ballBoxAnimationData = this.ballBoxAnimation.export(); |
|||
|
|||
// console.log('根坐标执行玩'); |
|||
// //相对根的坐标 |
|||
// this.ballOuterAnimation.translate3d(jumpDistance,0,0).step({duration: 800}); |
|||
// this.ballOuterAnimation.translate3d(0,0,0).step({duration: 800}); |
|||
// this.ballOuterAnimationData = this.ballOuterAnimation.export(); |
|||
// console.log('相对根的坐标'); |
|||
// setTimeout(function() { |
|||
// console.log("动画完成"); |
|||
// that.flag = !that.flag; |
|||
// }, 800); |
|||
|
|||
//因为uniapp step()有bug，所以必须要延时执行 |
|||
setTimeout(function() { |
|||
//根坐标 |
|||
that.ballBoxAnimation.opacity(1).translate3d(ELeft,ETop,0).step({duration: that.speed}); |
|||
that.ballBoxAnimationData = that.ballBoxAnimation.export(); |
|||
|
|||
|
|||
//相对根的坐标 |
|||
that.ballOuterAnimation.opacity(1).translate3d(0,0,0).step({duration: that.speed}); |
|||
that.ballOuterAnimationData = that.ballOuterAnimation.export(); |
|||
|
|||
}, 50); |
|||
|
|||
}, |
|||
//动画开始前初始化小球位置并显示小球 |
|||
setStart(SLeft,STop,ELeft,ETop){ |
|||
this.ballBoxAnimation.translate3d(ELeft,STop,0).opacity(1).step({duration: 0}); |
|||
this.ballBoxAnimationData = this.ballBoxAnimation.export(); |
|||
|
|||
this.ballOuterAnimation.translate3d(SLeft - ELeft,0,0).opacity(1).step({duration: 0}); |
|||
this.ballOuterAnimationData = this.ballOuterAnimation.export(); |
|||
}, |
|||
|
|||
//隐藏小球 |
|||
setEnd(){ |
|||
this.ballBoxAnimation.opacity(0).step({duration: 0}); |
|||
this.ballBoxAnimationData = this.ballBoxAnimation.export(); |
|||
|
|||
this.ballOuterAnimation.opacity(0).step({duration: 0}); |
|||
this.ballOuterAnimationData = this.ballOuterAnimation.export(); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.ballBox{ |
|||
position: fixed; |
|||
left: -10upx; |
|||
top: 15upx; |
|||
z-index: 9; |
|||
/* 用颜色来演示用原理 */ |
|||
/* background-color: #4CD964; */ |
|||
height:30rpx; |
|||
width:30rpx; |
|||
} |
|||
.ballOuter { |
|||
background:red; |
|||
height:100%; |
|||
width:100%; |
|||
border-radius: 50%; |
|||
background-size: 100% 100%; |
|||
background-position: center; |
|||
z-index: 999; |
|||
} |
|||
|
|||
</style> |
|||
Binary file not shown.
@ -0,0 +1,759 @@ |
|||
<template> |
|||
<view class="vue-cropper" ref="cropper" :style="{ top : `${containerTop}px` }" v-show="show"> |
|||
<view class="cropper-box"> |
|||
<view class="cropper-box-canvas" @touchstart.stop.prevent="imgTouchStart" @touchmove.stop.prevent="imgMoveing" @touchend.stop.prevent="imgMoveEnd" :style="{ |
|||
'width': imageWidth + 'px', |
|||
'height': imageHeight + 'px', |
|||
'transform': 'scale(' + scale + ',' + scale + ') ' + 'translate3d('+ x / scale + 'px,' + y / scale + 'px,' + '0)' |
|||
+ 'rotateZ('+ rotate * 90 +'deg)' |
|||
}"> |
|||
<image :src="src" alt="cropper-img" ref="cropperImg" mode="scaleToFill" class="uni-image"></image> |
|||
</view> |
|||
</view> |
|||
<view class="cropper-drag-box cropper-modal cropper-move pointer-events"></view> |
|||
<view class="cropper-crop-box" :class="{'pointer-events': cropFixed}" :style="{'width': cropW + 'px','height': cropH + 'px','transform': 'translate3d('+ cropOffsertX + 'px,' + cropOffsertY + 'px,' + '0)'}"> |
|||
<view class="cropper-view-box"> |
|||
<image :style="{'width': imageWidth + 'px','height': imageHeight + 'px','transform': 'scale(' + scale + ',' + scale + ') ' + 'translate3d('+ (x - cropOffsertX) / scale + 'px,' + (y - cropOffsertY) / scale + 'px,' + '0)' + 'rotateZ('+ rotate * 90 +'deg)'}" mode="scaleToFill" :src="src" alt="cropper-img"></image> |
|||
</view> |
|||
|
|||
<view v-if="!cropFixed" class="cropper-face cropper-move" @touchstart.stop.prevent="touchStart" @touchmove.stop.prevent="cropMoveing"></view> |
|||
|
|||
<view class="crop-line line-w"></view> |
|||
<view class="crop-line line-a"></view> |
|||
<view class="crop-line line-s"></view> |
|||
<view class="crop-line line-d"></view> |
|||
<block v-if="!cropFixed"> |
|||
<view class="crop-point point-lt" @touchstart.stop.prevent="touchStart" @touchmove.stop.prevent="dragMove($event, 'left-top')"></view> |
|||
<view class="crop-point point-mt" @touchstart.stop.prevent="touchStart" @touchmove.stop.prevent="dragMove($event, 'middle-top')"></view> |
|||
<view class="crop-point point-rt" @touchstart.stop.prevent="touchStart" @touchmove.stop.prevent="dragMove($event, 'right-top')"></view> |
|||
<view class="crop-point point-ml" @touchstart.stop.prevent="touchStart" @touchmove.stop.prevent="dragMove($event, 'middle-left')"></view> |
|||
<view class="crop-point point-mr" @touchstart.stop.prevent="touchStart" @touchmove.stop.prevent="dragMove($event, 'middle-right')"></view> |
|||
<view class="crop-point point-lb" @touchstart.stop.prevent="touchStart" @touchmove.stop.prevent="dragMove($event, 'left-bottom')"></view> |
|||
<view class="crop-point point-mb" @touchstart.stop.prevent="touchStart" @touchmove.stop.prevent="dragMove($event, 'middle-bottom')"></view> |
|||
<view class="crop-point point-rb" @touchstart.stop.prevent="touchStart" @touchmove.stop.prevent="dragMove($event, 'right-bottom')"></view> |
|||
</block> |
|||
</view> |
|||
|
|||
<canvas canvas-id="myCanvas" class="cropper-canvas" :style="{ 'width': cropW + 'px','height': cropH + 'px' }"></canvas> |
|||
|
|||
<view class="btn-group"> |
|||
<view class="btn-item reset-btn" v-show="showResetBtn" @tap="init"></view> |
|||
<view class="btn-item rotate-btn" v-show="showRotateBtn" @tap="rotateHandler"></view> |
|||
</view> |
|||
|
|||
<view class="uni-info__ft"> |
|||
<view class="uni-modal__btn uni-modal__btn_default" style="color: rgb(0, 0, 0);" @tap="cancel">取消</view> |
|||
<view class="uni-modal__btn uni-modal__btn_primary" style="color: rgb(0, 122, 255);" @tap="confirm">确定</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'image-cropper', |
|||
props: { |
|||
cropWidth: { |
|||
type: Number, |
|||
default: 200, |
|||
}, |
|||
cropHeight: { |
|||
type: Number, |
|||
default: 200 |
|||
}, |
|||
cropFixed: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
src: { |
|||
type: String, |
|||
}, |
|||
showResetBtn: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
showRotateBtn: { |
|||
type: Boolean, |
|||
default: true, |
|||
} |
|||
}, |
|||
data() { |
|||
const sysInfo = uni.getSystemInfoSync(); |
|||
const pixelRatio = sysInfo.pixelRatio |
|||
return { |
|||
show: false, |
|||
scale: 1, |
|||
rotate: 0, |
|||
cropW: 0, |
|||
cropH: 0, |
|||
cropOldW: 0, |
|||
cropOldH: 0, |
|||
sysInfo: sysInfo, |
|||
pixelRatio: pixelRatio, |
|||
imageRealWidth: 0, |
|||
imageRealHeight: 0, |
|||
cropOffsertX: 0, |
|||
cropOffsertY: 0, |
|||
startX: 0, |
|||
startY: 0, |
|||
// 裁剪框与边界间距 |
|||
border: 5, |
|||
x: 0, |
|||
y: 0, |
|||
startL: 0, |
|||
oldScale: 1, |
|||
} |
|||
}, |
|||
watch: { |
|||
src(val) { |
|||
if(val.length > 0) { |
|||
this.init() |
|||
} |
|||
}, |
|||
show(val) { |
|||
if(!val) { |
|||
this.src = '' |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
containerTop() { |
|||
let top = 0 |
|||
// #ifdef H5 |
|||
top = 44 |
|||
// #endif |
|||
return top; |
|||
}, |
|||
// 容器高度 |
|||
containerHeight() { |
|||
return this.windowHeight - 48; |
|||
}, |
|||
// 屏幕宽度 |
|||
windowWidth() { |
|||
return this.sysInfo.windowWidth; |
|||
}, |
|||
windowHeight() { |
|||
return this.sysInfo.windowHeight; |
|||
}, |
|||
// 图片宽高比 |
|||
imageRatio() { |
|||
if (this.imageRealHeight > 0) { |
|||
return this.imageRealWidth / this.imageRealHeight |
|||
} |
|||
return 0 |
|||
}, |
|||
// 等比缩放后的宽度 |
|||
imageWidth() { |
|||
if (this.imageRatio >= 1) { |
|||
return this.windowWidth |
|||
} |
|||
return this.windowWidth * this.imageRatio |
|||
}, |
|||
// 等比缩放后的高度 |
|||
imageHeight() { |
|||
if (this.imageRatio >= 1) { |
|||
return this.windowWidth / this.imageRatio |
|||
} |
|||
return this.windowWidth |
|||
}, |
|||
}, |
|||
methods: { |
|||
rotateHandler() { |
|||
if(this.rotate == 3) { |
|||
this.rotate = 0; |
|||
} else { |
|||
++this.rotate |
|||
} |
|||
}, |
|||
init() { |
|||
this.rotate = 0; |
|||
this.scale = 1; |
|||
this.cropW = this.cropWidth |
|||
this.cropH = this.cropHeight |
|||
uni.showLoading({ |
|||
title: '图片加载中...', |
|||
}) |
|||
this.loadImage(this.src).then((e) => { |
|||
uni.hideLoading() |
|||
}).catch((e) => { |
|||
uni.hideLoading() |
|||
uni.showModal({ |
|||
title: '标题', |
|||
content: '图片加载失败' |
|||
}) |
|||
}) |
|||
}, |
|||
loadImage(src) { |
|||
const _this = this |
|||
return new Promise((resolve, reject) => { |
|||
uni.getImageInfo({ |
|||
src: src, |
|||
success: (res) => { |
|||
_this.imageRealWidth = res.width |
|||
_this.imageRealHeight = res.height |
|||
|
|||
_this.cropOffsertX = _this.windowWidth / 2 - _this.cropW / 2 |
|||
_this.cropOffsertY = _this.windowHeight / 2 - _this.cropH / 2 |
|||
_this.show = true |
|||
|
|||
_this.$nextTick(() => { |
|||
_this.x = _this.windowWidth / 2 - _this.imageWidth / 2 |
|||
_this.y = _this.containerHeight / 2 - _this.imageHeight / 2 |
|||
}); |
|||
resolve(res) |
|||
}, |
|||
fail: (e) => { |
|||
_this.show = false |
|||
reject(e) |
|||
} |
|||
}) |
|||
}); |
|||
|
|||
}, |
|||
cancel() { |
|||
this.show = false |
|||
this.$emit('cancel') |
|||
}, |
|||
confirm(event) { |
|||
uni.showLoading({ |
|||
title: '裁剪中...', |
|||
}) |
|||
const _this = this |
|||
const ctx = uni.createCanvasContext('myCanvas', _this); |
|||
|
|||
const pixelRatio = _this.pixelRatio |
|||
const imgage = _this.src |
|||
const imgW = _this.imageWidth * _this.scale; |
|||
const imgH = _this.imageHeight * _this.scale |
|||
const rotate = _this.rotate |
|||
let dx = _this.cropOffsertX - _this.x - (_this.imageWidth - imgW) / 2; |
|||
let dy = _this.cropOffsertY - _this.y - (_this.imageHeight - imgH) / 2; |
|||
|
|||
ctx.setFillStyle('white') |
|||
ctx.fillRect(0, 0, imgW, imgH) |
|||
ctx.save() |
|||
|
|||
ctx.rotate((rotate * 90 * Math.PI) / 180); |
|||
switch (rotate) { |
|||
case 1: |
|||
dx += (imgH-imgW) / 2 |
|||
dy -= (imgH-imgW) / 2 |
|||
ctx.drawImage(imgage, -dy, dx, imgW, -imgH); |
|||
break; |
|||
case 2: |
|||
ctx.drawImage(imgage, dx, dy, -imgW, -imgH); |
|||
break; |
|||
case 3: |
|||
dx += (imgH-imgW) / 2 |
|||
dy -= (imgH-imgW) / 2 |
|||
ctx.drawImage(imgage, dy, -dx, -imgW, imgH); |
|||
break; |
|||
default: |
|||
ctx.drawImage(imgage, -dx, -dy, imgW, imgH); |
|||
break; |
|||
} |
|||
ctx.restore() |
|||
ctx.draw(false, () => { |
|||
uni.canvasToTempFilePath({ |
|||
canvasId: 'myCanvas', |
|||
destWidth: _this.cropW * pixelRatio, |
|||
destHeight: _this.cropH * pixelRatio, |
|||
success: (res) => { |
|||
uni.hideLoading() |
|||
event.detail.tempFilePath = res.tempFilePath |
|||
_this.show = false |
|||
_this.$emit('confirm', event) |
|||
}, |
|||
fail: (e) => { |
|||
uni.hideLoading() |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '裁剪失败' |
|||
}) |
|||
} |
|||
}, _this); |
|||
}) |
|||
|
|||
}, |
|||
imgTouchStart(e) { |
|||
if(e.touches.length == 2) { |
|||
this.oldScale = this.scale |
|||
this.scaling = true |
|||
const x = e.touches[0].pageX - e.touches[1].pageX |
|||
const y = e.touches[0].pageY - e.touches[1].pageY |
|||
const hypotenuse = Math.sqrt( |
|||
Math.pow(x, 2) + |
|||
Math.pow(y, 2) |
|||
) |
|||
|
|||
this.startL = Math.max(x, y, hypotenuse) |
|||
uni.showModal({ |
|||
content: this.startL |
|||
}) |
|||
} else { |
|||
this.startX = e.touches[0].pageX - this.x |
|||
this.startY = e.touches[0].pageY - this.y |
|||
} |
|||
}, |
|||
imgMoveing(e) { |
|||
if(this.scaling) { |
|||
let scale = this.oldScale |
|||
|
|||
const x = e.touches[0].pageX - e.touches[1].pageX |
|||
const y = e.touches[0].pageY - e.touches[1].pageY |
|||
const hypotenuse = Math.sqrt( |
|||
Math.pow(x, 2) + |
|||
Math.pow(y, 2) |
|||
) |
|||
|
|||
const newL = Math.max(x, y, hypotenuse) |
|||
|
|||
const cha = newL - this.startL; |
|||
|
|||
// 根据图片本身大小 决定每次改变大小的系数, 图片越大系数越小 |
|||
// 1px - 0.2 |
|||
let coe = 1; |
|||
coe = |
|||
coe / this.imageWidth > coe / this.imageHeight |
|||
? coe / this.imageHeight |
|||
: coe / this.imageWidth; |
|||
coe = coe > 0.1 ? 0.1 : coe; |
|||
const num = coe * cha; |
|||
|
|||
if (cha > 0) { |
|||
scale += Math.abs(num); |
|||
} else if (cha < 0) { |
|||
scale > Math.abs(num) ? (scale -= Math.abs(num)) : scale; |
|||
} |
|||
|
|||
this.scale = scale; |
|||
} else { |
|||
const moveX = e.touches[0].pageX - this.startX |
|||
const moveY = e.touches[0].pageY - this.startY |
|||
|
|||
this.x = moveX |
|||
this.y = moveY |
|||
} |
|||
}, |
|||
imgMoveEnd() { |
|||
setTimeout(() => { |
|||
this.scaling = false |
|||
}, 100) |
|||
}, |
|||
touchStart(e) { |
|||
this.startX = e.touches[0].pageX - this.cropOffsertX; |
|||
this.startY = e.touches[0].pageY - this.cropOffsertY; |
|||
|
|||
this.cropOldW = this.cropW |
|||
this.cropOldH = this.cropH |
|||
}, |
|||
cropMoveing(e) { |
|||
const moveX = this._cropX(e.touches[0].pageX - this.startX) |
|||
const moveY = this._cropY(e.touches[0].pageY - this.startY) |
|||
|
|||
this.cropOffsertX = moveX |
|||
this.cropOffsertY = moveY |
|||
}, |
|||
dragMove(e, type) { |
|||
if(this.cropFixed) { |
|||
return false |
|||
} |
|||
const moveX = e.touches[0].pageX - this.startX |
|||
const moveY = e.touches[0].pageY - this.startY |
|||
switch (type) { |
|||
case 'left-top': |
|||
this._cropMoveLeft(moveX) |
|||
this._cropMoveTop(moveY) |
|||
break; |
|||
case 'middle-top': |
|||
this._cropMoveTop(moveY) |
|||
break; |
|||
case 'right-top': |
|||
this._cropMoveTop(moveY) |
|||
this._cropMoveRight(moveX) |
|||
break; |
|||
case 'middle-right': |
|||
this._cropMoveRight(moveX) |
|||
break; |
|||
case 'right-bottom': |
|||
this._cropMoveRight(moveX) |
|||
this._cropMoveBottom(moveY) |
|||
break; |
|||
case 'middle-bottom': |
|||
this._cropMoveBottom(moveY) |
|||
break; |
|||
case 'left-bottom': |
|||
this._cropMoveBottom(moveY) |
|||
this._cropMoveLeft(moveX) |
|||
break; |
|||
case 'middle-left': |
|||
this._cropMoveLeft(moveX) |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
}, |
|||
_cropMoveTop(y) { |
|||
const topY = this._cropY(y) |
|||
this.cropH += this.cropOffsertY - topY |
|||
this.cropOffsertY = topY |
|||
}, |
|||
_cropMoveRight(x) { |
|||
if(this.cropOldW + x >= this.windowWidth - this.border) { |
|||
return false; |
|||
} |
|||
this.cropW = this.cropOldW + (x - this.cropOffsertX) |
|||
}, |
|||
_cropMoveBottom(y) { |
|||
if(this.cropOldH + y >= this.windowHeight - this.containerTop - this.border) { |
|||
return false; |
|||
} |
|||
this.cropH = this.cropOldH + (y - this.cropOffsertY) |
|||
}, |
|||
_cropMoveLeft(x) { |
|||
const leftX = this._cropY(x) |
|||
this.cropW += this.cropOffsertX - leftX |
|||
this.cropOffsertX = leftX |
|||
}, |
|||
_cropX(x) { |
|||
if(x <= this.border) { |
|||
return this.border |
|||
} |
|||
if(x + this.cropW >= this.windowWidth - this.border) { |
|||
return this.windowWidth - this.cropW - this.border |
|||
} |
|||
return x |
|||
}, |
|||
_cropY(y) { |
|||
if(y <= this.border) { |
|||
return this.border |
|||
} |
|||
if(y + this.cropH >= this.windowHeight - this.containerTop - this.border) { |
|||
return this.windowHeight - this.cropH - this.containerTop - this.border |
|||
} |
|||
return y |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="css"> |
|||
|
|||
@font-face { |
|||
font-family: "iconfont"; |
|||
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAR4AAsAAAAACKgAAAQsAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqEfIRGATYCJAMMCwgABCAFhG0HShugB8gOJUHBwAAAAAFEBNmwzd4dtatSmmpFoVAEhUThEAYkCozFKDCqCVO6RfH/89v869awDnTR1qrSANFt4GG4SNxreBn91fmV9f3+53J613ieHba+N1zmGM8PA7oXTaCAxpjei8IoLWFsGLu4jPME6vWJJdovqmgAO4U2LRBnep0K7GJmpYQWanXVOWuLuAFrtenK4haAa/f38QnKsCOpyrRFh6eFWsh5KXnfYcn958BGQNKfE8wmMmaAQpzkuo9Z+ukZluoltVV5abUipL5i/ysArlhWVut/eCRBVNPUjYg6oUo7JTHFoaYDSvdacnKTq9GAB4AY5y2dtL3qpFh1DENdnJC6Hq+xYb7pyRMDMzc/fYoJjY8flwO3m98rMucF+IZHj6Cagw5UeKpxyFbt2rHGY/8jpa7CYMvLfcIesLjY3bdqhaf+nqgQs2qT/+rjCH/VfA0VFGuAC3iE8NEr/Vau8vZsXiUy7+V3c3tQQXMAuNjDCC89KDIHH0OFhnUi81GEPwyc7wZUaN7DnUf4g+ZLQsMKYV/94NjK7R7TEM4niTY1oJ5zEU62aNVaasUub08YLUEam5EnT6a61/I17dNk+vTu9jpJjXhsTFwjqTtpCBxBIIgS6iQnc/Zod1YGKp0rAwsD8kkyP6AwcK0hcAwkiQmBhWvxPZWKDu86aUH2nLEdi9rGX1eXq5P6A1SrnAucMVMdZH/GKi/jyfCqJyucfK3mXpVujXOPfFf5LC4Dvx0X/943JyOq4HuCTZ8KiIPPAb6ro8akpT6ufiq39BQrNlk5mp8pO0JlJLk8f5QalRjoP60IMx0N8n7wGhSD3n6/F1zlcTVz/cR+Ev0lkLSTd7UiPbD/wCxGRMA2Krwro2O0bTQtImbwhjAJc0S3N4ROx15/PH60IzaIOjCbEelqkDOfETNxb/FMixnWNzeJp2KPQw9A5d76jGUOQOUvH7RE/o2RfkNatd3OGf9q0QKbnq8WB7qy+hVqJRjJn1BQgP/iErks0yy5iGJTrOayW7C/z0IoZH0qNH+7N+31XXc7G2p1hZDU6IWs1ghaqDNQpcEKVKu1BfWmFW9u0IFhKUodpswCEFodgqTZHWStbqOF+hqqdPsG1VrDEuodhfueDcZCj+QzuIrFtZh6BNNraIowbCzi1dbhOlOfionKXHoTzgzoY5hCKk/minEKZ/pYMDCoU7IsgREM3Y8Vgcvwvj4aMzK0AdewUpJljWkyGZH3IKmG7gfEHgZOhYXTwqiNwOhp0CiE3ZiFpL5fB6dj0keFKcGV+JvgGAP0vWMUpOQ10GI1VQt3LoMHDNJRYrEIPInAoPXDFEEnrk9P0zDG/FEGOA2WFNkiaZRGhuoRddXS8bX917cL6mn9c6TIUXSekybKHKQfJXFq2KSiRklLYU8dNKWDIX0cAA==') format('woff2'); |
|||
} |
|||
|
|||
.vue-cropper { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: 998; |
|||
box-sizing: border-box; |
|||
user-select: none; |
|||
-webkit-user-select: none; |
|||
-moz-user-select: none; |
|||
-ms-user-select: none; |
|||
direction: ltr; |
|||
touch-action: none; |
|||
text-align: left; |
|||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC"); |
|||
} |
|||
|
|||
.cropper-canvas { |
|||
position: absolute; |
|||
top: -9999px; |
|||
left:-9999px; |
|||
z-index: -998; |
|||
} |
|||
|
|||
.vue-cropper .uni-info__ft { |
|||
position: absolute; |
|||
line-height: 48px; |
|||
font-size: 18px; |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
display: flex; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
z-index: 998; |
|||
} |
|||
|
|||
.btn-group { |
|||
position: absolute; |
|||
right: 30px; |
|||
bottom: 78px; |
|||
z-index: 998; |
|||
} |
|||
|
|||
.btn-item { |
|||
position: relative; |
|||
width: 40px; |
|||
height: 40px; |
|||
background: #fff; |
|||
border-radius: 20px; |
|||
padding: 10px; |
|||
display: inline-block; |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.btn-item:active { |
|||
background: #ccc; |
|||
} |
|||
|
|||
.rotate-btn { |
|||
font-family: "iconfont" !important; |
|||
font-size: 24px; |
|||
font-style: normal; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
line-height: 20px; |
|||
} |
|||
|
|||
.rotate-btn:before { |
|||
content: "\e65c"; |
|||
margin-left: -2px; |
|||
} |
|||
|
|||
.reset-btn { |
|||
font-family: "iconfont" !important; |
|||
font-size: 24px; |
|||
font-style: normal; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
line-height: 20px; |
|||
} |
|||
|
|||
.reset-btn:before { |
|||
content: "\e648"; |
|||
margin-left: -2px; |
|||
} |
|||
|
|||
.vue-cropper .uni-info__ft:after { |
|||
content: " "; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
height: 1px; |
|||
border-top: 1px solid #d5d5d6; |
|||
color: #d5d5d6; |
|||
-webkit-transform-origin: 0 0; |
|||
transform-origin: 0 0; |
|||
-webkit-transform: scaleY(.5); |
|||
transform: scaleY(.5); |
|||
z-index: 998; |
|||
} |
|||
|
|||
.vue-cropper .uni-modal__btn { |
|||
display: block; |
|||
-webkit-box-flex: 1; |
|||
-webkit-flex: 1; |
|||
flex: 1; |
|||
color: #3cc51f; |
|||
text-decoration: none; |
|||
-webkit-tap-highlight-color: rgba(0,0,0,0); |
|||
position: relative; |
|||
text-align: center; |
|||
background-color: #fff; |
|||
z-index: 998; |
|||
} |
|||
|
|||
.vue-cropper .uni-modal__btn:first-child:after { display: none } |
|||
.vue-cropper .uni-modal__btn:after { |
|||
content: " "; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 1px; |
|||
bottom: 0; |
|||
border-left: 1px solid #d5d5d6; |
|||
color: #d5d5d6; |
|||
-webkit-transform-origin: 0 0; |
|||
transform-origin: 0 0; |
|||
-webkit-transform: scaleX(.5); |
|||
transform: scaleX(.5); |
|||
z-index: 998; |
|||
} |
|||
|
|||
.vue-cropper .uni-modal__btn:active { |
|||
background-color: #eee; |
|||
} |
|||
|
|||
.cropper-box, |
|||
.cropper-box-canvas, |
|||
.cropper-drag-box, |
|||
.cropper-crop-box, |
|||
.cropper-face { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
user-select: none; |
|||
z-index: 998; |
|||
} |
|||
|
|||
.uni-image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.cropper-box-canvas image { |
|||
position: relative; |
|||
text-align: left; |
|||
user-select: none; |
|||
transform: none; |
|||
max-width: none; |
|||
max-height: none; |
|||
z-index: 998; |
|||
} |
|||
|
|||
.cropper-box { |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.cropper-move { |
|||
cursor: move; |
|||
} |
|||
|
|||
.cropper-crop { |
|||
cursor: crosshair; |
|||
} |
|||
|
|||
.cropper-modal { |
|||
background: rgba(0, 0, 0, 0.5); |
|||
} |
|||
|
|||
.pointer-events { |
|||
pointer-events:none; |
|||
} |
|||
|
|||
.cropper-crop-box { |
|||
/*border: 2px solid #39f;*/ |
|||
} |
|||
|
|||
.cropper-view-box { |
|||
display: block; |
|||
overflow: hidden; |
|||
width: 100%; |
|||
height: 100%; |
|||
outline: 1px solid #39f; |
|||
outline-color: rgba(51, 153, 255, 0.75); |
|||
user-select: none; |
|||
} |
|||
|
|||
.cropper-view-box image { |
|||
user-select: none; |
|||
text-align: left; |
|||
max-width: none; |
|||
max-height: none; |
|||
} |
|||
|
|||
.cropper-face { |
|||
top: 0; |
|||
left: 0; |
|||
background-color: #fff; |
|||
opacity: 0.1; |
|||
} |
|||
|
|||
.crop-line { |
|||
position: absolute; |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
opacity: 0.1; |
|||
z-index: 998; |
|||
} |
|||
|
|||
.line-w { |
|||
top: -3px; |
|||
left: 0; |
|||
height: 5px; |
|||
cursor: n-resize; |
|||
} |
|||
|
|||
.line-a { |
|||
top: 0; |
|||
left: -3px; |
|||
width: 5px; |
|||
cursor: w-resize; |
|||
} |
|||
|
|||
.line-s { |
|||
bottom: -3px; |
|||
left: 0; |
|||
height: 5px; |
|||
cursor: s-resize; |
|||
} |
|||
|
|||
.line-d { |
|||
top: 0; |
|||
right: -3px; |
|||
width: 5px; |
|||
cursor: e-resize; |
|||
} |
|||
|
|||
.crop-point { |
|||
position: absolute; |
|||
width: 8px; |
|||
height: 8px; |
|||
opacity: 0.75; |
|||
background-color: #39f; |
|||
border-radius: 100%; |
|||
z-index: 998; |
|||
} |
|||
|
|||
.point-lt { |
|||
top: -4px; |
|||
left: -4px; |
|||
cursor: nw-resize; |
|||
} |
|||
|
|||
.point-mt { |
|||
top: -5px; |
|||
left: 50%; |
|||
margin-left: -3px; |
|||
cursor: n-resize; |
|||
} |
|||
|
|||
.point-rt { |
|||
top: -4px; |
|||
right: -4px; |
|||
cursor: ne-resize; |
|||
} |
|||
|
|||
.point-ml { |
|||
top: 50%; |
|||
left: -4px; |
|||
margin-top: -3px; |
|||
cursor: w-resize; |
|||
} |
|||
|
|||
.point-mr { |
|||
top: 50%; |
|||
right: -4px; |
|||
margin-top: -3px; |
|||
cursor: e-resize; |
|||
} |
|||
|
|||
.point-lb { |
|||
bottom: -5px; |
|||
left: -4px; |
|||
cursor: sw-resize; |
|||
} |
|||
|
|||
.point-mb { |
|||
bottom: -5px; |
|||
left: 50%; |
|||
margin-left: -3px; |
|||
cursor: s-resize; |
|||
} |
|||
|
|||
.point-rb { |
|||
bottom: -5px; |
|||
right: -4px; |
|||
cursor: se-resize; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,404 @@ |
|||
<template> |
|||
<view class="container" :style="{ |
|||
paddingBottom: showMoreTool ? '220rpx' : '120rpx' |
|||
}"> |
|||
<editor |
|||
class="ql-container" |
|||
:placeholder="placeholder" |
|||
:show-img-size="true" |
|||
:show-img-toolbar="true" |
|||
:show-img-resize="true" |
|||
@ready="onEditorReady" |
|||
id="editor" |
|||
@statuschange="statuschange" |
|||
@focus="editFocus" |
|||
@blur="editBlur" |
|||
ref="editot" |
|||
></editor> |
|||
<!-- 操作工具 --> |
|||
<view class="tool-view" > |
|||
<view class="tool"> |
|||
<jinIcon class="single" type="" font-size="44rpx" title="插入图片" @click="insertImage"></jinIcon> |
|||
<jinIcon class="single" type="" font-size="44rpx" title="修改文字样式" @click="showMore" :color="showMoreTool ? activeColor : '#666666'"></jinIcon> |
|||
<jinIcon class="single" type="" font-size="44rpx" title="分割线" @click="insertDivider"></jinIcon> |
|||
<jinIcon class="single" type="" font-size="44rpx" title="撤销" @click="undo"></jinIcon> |
|||
<jinIcon class="single" type="" font-size="44rpx" title="重做" @click="redo"></jinIcon> |
|||
<jinIcon class="single" type="" font-size="44rpx" title="设置" @click="release(true)"></jinIcon> |
|||
</view> |
|||
<!-- 文字相关操作 --> |
|||
<view class="font-more" :style="{ height: showMoreTool ? '100rpx' : 0 }"> |
|||
<jinIcon class="single" type="" font-size="44rpx" title="加粗" @click="setBold" :color="showBold ? activeColor : '#666666'"></jinIcon> |
|||
<jinIcon class="single" type="" font-size="44rpx" title="斜体" @click="setItalic" :color="showItalic ? activeColor : '#666666'"></jinIcon> |
|||
<jinIcon class="single" type="" font-size="44rpx" title="分割线" @click="setIns" :color="showIns ? activeColor : '#666666'"></jinIcon> |
|||
<jinIcon class="single" type="" font-size="44rpx" title="标题" @click="setHeader" :color="showHeader ? activeColor : '#666666'"></jinIcon> |
|||
<jinIcon class="single" type="" font-size="44rpx" title="居中" @click="setCenter" :color="showCenter ? activeColor : '#666666'"></jinIcon> |
|||
<jinIcon class="single" type="" font-size="44rpx" title="居右" @click="setRight" :color="showRight ? activeColor : '#666666'"></jinIcon> |
|||
</view> |
|||
<view class="setting-layer-mask" v-if="showSettingLayer" @click="showSetting"></view> |
|||
<view class="setting-layer" v-if="showSettingLayer"> |
|||
<view class="single" @click="release(true)"> |
|||
<jinIcon class="icon" type="" ></jinIcon> |
|||
<view>公开发布</view> |
|||
</view> |
|||
<view class="single" @click="release(false)"> |
|||
<jinIcon class="icon" type="" ></jinIcon> |
|||
<view>私密保存</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
// #ifdef H5 |
|||
import wxApi from '@/common/js/wxApi.js'; |
|||
// #endif |
|||
import App from "@/common/js/app.js"; |
|||
import jinIcon from './jin-icons.vue'; |
|||
export default { |
|||
props: { |
|||
// 点击图片时显示图片大小控件 |
|||
showImgSize: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 点击图片时显示工具栏控件 |
|||
showImgToolbar: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 点击图片时显示修改尺寸控件 |
|||
showImgResize: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 占位符 |
|||
placeholder: { |
|||
type: String, |
|||
default: '开始输入...' |
|||
}, |
|||
// 图片上传的地址 |
|||
uploadFileUrl: { |
|||
type: String, |
|||
default: '#' |
|||
}, |
|||
// 上传文件时的name |
|||
fileKeyName: { |
|||
type: String, |
|||
default: 'file' |
|||
}, |
|||
// 上传图片时，http请求的header |
|||
header: { |
|||
type: Object |
|||
}, |
|||
// 初始化html |
|||
html: { |
|||
type: String |
|||
} |
|||
}, |
|||
computed:{ |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
showMoreTool: false, |
|||
showBold: false, |
|||
showItalic: false, |
|||
showIns: false, |
|||
showHeader: false, |
|||
showCenter: false, |
|||
showRight: false, |
|||
showSettingLayer: false, |
|||
activeColor: '#F56C6C' |
|||
}; |
|||
}, |
|||
components: { |
|||
jinIcon |
|||
}, |
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
onEditorReady(e) { |
|||
uni.createSelectorQuery() |
|||
.in(this) |
|||
.select('.ql-container') |
|||
.fields({ |
|||
size: true, |
|||
context: true |
|||
},res => { |
|||
this.editorCtx = res.context; |
|||
this.editorCtx.setContents({ |
|||
html: this.html |
|||
}) |
|||
}) |
|||
.exec(); |
|||
}, |
|||
undo() { |
|||
this.editorCtx.undo(); |
|||
}, |
|||
// 插入图片 |
|||
async insertImage() { |
|||
let _this = this; |
|||
// #ifdef H5 |
|||
if(App.getClientType() == 2){
let res = await App.browser_upload(1);
uni.showLoading(); |
|||
let imageUrl = res.tempFilePaths[0], |
|||
rnImageData = App._upLoad(imageUrl); |
|||
rnImageData.then(options => { |
|||
console.log(options, 'options'); |
|||
let file = options.data.img; |
|||
_this.editorCtx.insertImage({ |
|||
src: file, // 此处需要将图片地址切换成服务器返回的真实图片地址 |
|||
alt: '图片', |
|||
success: function(e) {} |
|||
}); |
|||
uni.hideLoading(); |
|||
});
return
} |
|||
wxApi.choseImage(res => { |
|||
wxApi.uoloadIg(res.localIds[0], data => { |
|||
if (data.errMsg === 'uploadImage:ok') { |
|||
uni.showLoading({}); |
|||
let requestData = { |
|||
upload_type: 2, |
|||
id: data.serverId |
|||
}; |
|||
App._post_form( |
|||
'&do=uploadFiles', |
|||
requestData, |
|||
res => { |
|||
_this.editorCtx.insertImage({ |
|||
src: res.data.img, // 此处需要将图片地址切换成服务器返回的真实图片地址 |
|||
alt: '图片', |
|||
success: function(e) {} |
|||
}); |
|||
}, |
|||
false, |
|||
() => { |
|||
uni.hideLoading(); |
|||
} |
|||
); |
|||
} else { |
|||
App.showError('上传失败'); |
|||
} |
|||
}); |
|||
}); |
|||
// #endif |
|||
// #ifndef H5 |
|||
uni.chooseImage({ |
|||
count: 1, //默认9 |
|||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有 |
|||
sourceType: ['album', 'camera'], //从相册选择 |
|||
success: function(res) { |
|||
uni.showLoading(); |
|||
let imageUrl = res.tempFilePaths[0], |
|||
rnImageData = App._upLoad(imageUrl); |
|||
rnImageData.then(options => { |
|||
console.log(options, 'options'); |
|||
let file = options.data.img; |
|||
_this.editorCtx.insertImage({ |
|||
src: file, // 此处需要将图片地址切换成服务器返回的真实图片地址 |
|||
alt: '图片', |
|||
success: function(e) {} |
|||
}); |
|||
uni.hideLoading(); |
|||
}); |
|||
}, |
|||
fail: function(data) { |
|||
if(data.errMsg != 'chooseImage:fail cancel'){ |
|||
App.showError('上传失败'); |
|||
} |
|||
} |
|||
}); |
|||
// #endif |
|||
// uni.chooseImage({ |
|||
// count: 9, //默认9 |
|||
// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有 |
|||
// sourceType: ['album', 'camera'], //从相册选择 |
|||
// success: async(res) => { |
|||
// var tempFilePaths = res.tempFilePaths; |
|||
// uni.showLoading({ |
|||
// title: '正在上传中...' |
|||
// }) |
|||
// for (let temp of tempFilePaths) { |
|||
// // 图片上传服务器 |
|||
// await uni.uploadFile({ |
|||
// url: this.uploadFileUrl, |
|||
// filePath: temp, |
|||
// name: this.fileKeyName, |
|||
// header: this.header, |
|||
// success: res => { |
|||
// // 上传完成后处理 |
|||
// this.editorCtx.insertImage({ |
|||
// src: temp, // 此处需要将图片地址切换成服务器返回的真实图片地址 |
|||
// alt: '图片', |
|||
// success: function(e) {} |
|||
// }); |
|||
// uni.hideLoading() |
|||
// }, |
|||
|
|||
// }); |
|||
// } |
|||
// } |
|||
// }); |
|||
}, |
|||
insertDivider() { |
|||
this.editorCtx.insertDivider(); |
|||
}, |
|||
redo() { |
|||
this.editorCtx.redo(); |
|||
}, |
|||
showMore() { |
|||
this.showMoreTool = !this.showMoreTool; |
|||
this.editorCtx.setContents() |
|||
}, |
|||
setBold() { |
|||
this.showBold = !this.showBold; |
|||
this.editorCtx.format('bold'); |
|||
}, |
|||
setItalic() { |
|||
this.showItalic = !this.showItalic; |
|||
this.editorCtx.format('italic'); |
|||
}, |
|||
checkStatus(name, detail, obj) { |
|||
if (detail.hasOwnProperty(name)) { |
|||
this[obj] = true; |
|||
} else { |
|||
this[obj] = false; |
|||
} |
|||
}, |
|||
statuschange(e) { |
|||
var detail = e.detail; |
|||
this.checkStatus('bold', detail, 'showBold'); |
|||
this.checkStatus('italic', detail, 'showItalic'); |
|||
this.checkStatus('ins', detail, 'showIns'); |
|||
this.checkStatus('header', detail, 'showHeader'); |
|||
if (detail.hasOwnProperty('align')) { |
|||
if (detail.align == 'center') { |
|||
this.showCenter = true; |
|||
this.showRight = false; |
|||
} else if (detail.align == 'right') { |
|||
this.showCenter = false; |
|||
this.showRight = true; |
|||
} else { |
|||
this.showCenter = false; |
|||
this.showRight = false; |
|||
} |
|||
} else { |
|||
this.showCenter = false; |
|||
this.showRight = false; |
|||
} |
|||
}, |
|||
setIns() { |
|||
this.showIns = !this.showIns; |
|||
this.editorCtx.format('ins'); |
|||
}, |
|||
setHeader() { |
|||
this.showHeader = !this.showHeader; |
|||
this.editorCtx.format('header', this.showHeader ? 'H2' : false); |
|||
}, |
|||
setCenter() { |
|||
this.showCenter = !this.showCenter; |
|||
this.editorCtx.format('align', this.showCenter ? 'center' : false); |
|||
}, |
|||
setRight() { |
|||
this.showRight = !this.showRight; |
|||
this.editorCtx.format('align', this.showRight ? 'right' : false); |
|||
}, |
|||
showSetting() { |
|||
this.showSettingLayer = !this.showSettingLayer; |
|||
}, |
|||
async editFocus() { |
|||
|
|||
}, |
|||
editBlur() { |
|||
|
|||
}, |
|||
release(isPublic) { |
|||
this.showSettingLayer = false; |
|||
this.editorCtx.getContents({ |
|||
success: res => { |
|||
Object.assign(res, { |
|||
isPublic: isPublic |
|||
}) |
|||
this.$emit('editOk', res); |
|||
} |
|||
}) |
|||
}, |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.container { |
|||
padding: 30rpx 0; |
|||
box-sizing: border-box; |
|||
padding-bottom: 120rpx; |
|||
} |
|||
|
|||
.ql-container { |
|||
line-height: 160%; |
|||
font-size: 34rpx; |
|||
width: calc(100% - 60rpx); |
|||
height: auto; |
|||
margin: 0 auto; |
|||
} |
|||
.tool-view{ |
|||
width: 80vw; |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
|
|||
} |
|||
.tool { |
|||
height: 100rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
width: 100%; |
|||
background: #eee; |
|||
} |
|||
|
|||
.font-more { |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 100rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
width: 100%; |
|||
background: rgb(235, 235, 235); |
|||
overflow: hidden; |
|||
transition: all 0.15s; |
|||
} |
|||
|
|||
.setting-layer { |
|||
position: absolute; |
|||
bottom: 100rpx; |
|||
background: #fff; |
|||
width: 250rpx; |
|||
right: 20rpx; |
|||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); |
|||
border-radius: 8rpx; |
|||
} |
|||
.setting-layer .single { |
|||
height: 80rpx; |
|||
font-size: 32rpx; |
|||
padding: 0 30rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
line-height: 80rpx; |
|||
flex-direction: row; |
|||
color: #666; |
|||
} |
|||
.setting-layer .single .icon { |
|||
margin-right: 20rpx; |
|||
} |
|||
.setting-layer-mask{ |
|||
position: fixed; |
|||
left: 0; |
|||
top: 0; |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background: transparent; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,48 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<view class="icon" :style="{color: color, fontSize: fontSize}" v-html="type" @click="toclick"></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
type: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
color: { |
|||
type: String, |
|||
default: '#666666' |
|||
}, |
|||
fontSize: { |
|||
type: String, |
|||
default: '34rpx' |
|||
} |
|||
}, |
|||
methods: { |
|||
toclick() { |
|||
this.$emit('click'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.content{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
@font-face { |
|||
font-family: 'jin'; |
|||
/** 阿里巴巴矢量图标库的字体库地址，可以替换自己的字体库地址 **/ |
|||
src: url('https://at.alicdn.com/t/font_1491431_6m7ltjo8wi.ttf') format('truetype'); |
|||
} |
|||
|
|||
.icon { |
|||
font-family: jin !important; |
|||
font-size: 34rpx; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,18 @@ |
|||
export default function h5Copy(content) { |
|||
|
|||
if (!document.queryCommandSupported('copy')) { |
|||
// 不支持
|
|||
return false |
|||
} |
|||
|
|||
let textarea = document.createElement("textarea") |
|||
textarea.value = content |
|||
textarea.readOnly = "readOnly" |
|||
document.body.appendChild(textarea) |
|||
textarea.select() // 选择对象
|
|||
textarea.setSelectionRange(0, content.length) //核心
|
|||
let result = document.execCommand("copy") // 执行浏览器复制命令
|
|||
textarea.remove() |
|||
return result |
|||
|
|||
} |
|||
@ -0,0 +1,698 @@ |
|||
<template> |
|||
<view> |
|||
<slot v-if="!nodes.length" /> |
|||
<!--#ifdef APP-PLUS-NVUE--> |
|||
<web-view id="top" ref="web" :style="'margin-top:-2px;height:'+height+'px'" @onPostMessage="_message" /> |
|||
<!--#endif--> |
|||
<!--#ifndef APP-PLUS-NVUE--> |
|||
<view id="top" :style="showAm+(selectable?';user-select:text;-webkit-user-select:text':'')"> |
|||
<!--#ifdef H5--> |
|||
<div :id="'rtf'+uid"></div> |
|||
<!--#endif--> |
|||
<!--#ifndef H5--> |
|||
<view v-if="html"> |
|||
<trees :nodes="nodes" :lazyLoad="lazyLoad" :loading="loadingImg" :options="name" /> |
|||
</view> |
|||
|
|||
<!--#endif--> |
|||
</view> |
|||
<!--#endif--> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
// #ifndef H5 |
|||
import trees from './libs/trees'; |
|||
var cache = {}; |
|||
// #ifdef MP-WEIXIN |
|||
var fs = uni.getFileSystemManager() || null; |
|||
// #endif |
|||
var Parser = require('./libs/MpHtmlParser.js'); |
|||
var dom; |
|||
// 计算 cache 的 key |
|||
function hash(str) { |
|||
for (var i = str.length, val = 5381; i--;) |
|||
val += (val << 5) + str.charCodeAt(i); |
|||
return val; |
|||
} |
|||
// #endif |
|||
// #ifdef H5 |
|||
var rpx = uni.getSystemInfoSync().screenWidth / 750, |
|||
cfg = require('./libs/config.js'); |
|||
// #endif |
|||
// #ifdef APP-PLUS-NVUE |
|||
var weexDom = weex.requireModule('dom'); |
|||
// #endif |
|||
/** |
|||
* Parser 富文本组件 |
|||
* @tutorial https://github.com/jin-yufeng/Parser |
|||
* @property {String|Array} html 富文本数据 |
|||
* @property {Boolean} autopause 是否在播放一个视频时自动暂停其他视频 |
|||
* @property {Boolean} autoscroll 是否自动给所有表格添加一个滚动层 |
|||
* @property {Boolean} autosetTitle 是否自动将 title 标签中的内容设置到页面标题 |
|||
* @property {Number} compress 压缩等级 |
|||
* @property {String} domain 图片、视频等链接的主域名 |
|||
* @property {Boolean} lazyLoad 是否开启图片懒加载 |
|||
* @property {String} loadingImg 图片加载完成前的占位图 |
|||
* @property {Boolean} selectable 是否开启长按复制 |
|||
* @property {Object} tagStyle 标签的默认样式 |
|||
* @property {Boolean} showWithAnimation 是否使用渐显动画 |
|||
* @property {Boolean} useAnchor 是否使用锚点 |
|||
* @property {Boolean} useCache 是否缓存解析结果 |
|||
* @event {Function} parse 解析完成事件 |
|||
* @event {Function} load dom 加载完成事件 |
|||
* @event {Function} ready 所有图片加载完毕事件 |
|||
* @event {Function} error 错误事件 |
|||
* @event {Function} imgtap 图片点击事件 |
|||
* @event {Function} linkpress 链接点击事件 |
|||
* @example <jyf-parser :html="html"></jyf-parser> |
|||
* @author JinYufeng |
|||
* @version 20200524 |
|||
* @listens MIT |
|||
*/ |
|||
export default { |
|||
name: 'parser', |
|||
data() { |
|||
return { |
|||
// #ifdef H5 |
|||
uid: this._uid, |
|||
// #endif |
|||
// #ifdef APP-PLUS-NVUE |
|||
height: 1, |
|||
// #endif |
|||
// #ifndef APP-PLUS-NVUE |
|||
showAm: '', |
|||
// #endif |
|||
nodes: [], |
|||
poster:'' |
|||
} |
|||
}, |
|||
// #ifndef H5 || APP-PLUS-NVUE |
|||
components: { |
|||
trees |
|||
}, |
|||
// #endif |
|||
props: { |
|||
name:'parser', |
|||
html: null, |
|||
autopause: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
autoscroll: Boolean, |
|||
autosetTitle: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// #ifndef H5 || APP-PLUS-NVUE |
|||
compress: Number, |
|||
loadingImg: String, |
|||
useCache: Boolean, |
|||
// #endif |
|||
domain: String, |
|||
lazyLoad: Boolean, |
|||
selectable: Boolean, |
|||
tagStyle: Object, |
|||
showWithAnimation: Boolean, |
|||
useAnchor: Boolean |
|||
}, |
|||
watch: { |
|||
html(html) { |
|||
console.log('html',html); |
|||
this.setContent(html); |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.poster = uni.getStorageSync('platformInfor').videoimg; |
|||
// 图片数组 |
|||
this.imgList = []; |
|||
this.imgList.each = function(f) { |
|||
for (var i = 0, len = this.length; i < len; i++) |
|||
this.setItem(i, f(this[i], i, this)); |
|||
} |
|||
this.imgList.setItem = function(i, src) { |
|||
if (i == void 0 || !src) return; |
|||
// #ifndef MP-ALIPAY || APP-PLUS |
|||
// 去重 |
|||
if (src.indexOf('http') == 0 && this.includes(src)) { |
|||
var newSrc = ''; |
|||
for (var j = 0, c; c = src[j]; j++) { |
|||
if (c == '/' && src[j - 1] != '/' && src[j + 1] != '/') break; |
|||
newSrc += Math.random() > 0.5 ? c.toUpperCase() : c; |
|||
} |
|||
newSrc += src.substr(j); |
|||
return this[i] = newSrc; |
|||
} |
|||
// #endif |
|||
this[i] = src; |
|||
// 暂存 data src |
|||
if (src.includes('data:image')) { |
|||
var filePath, info = src.match(/data:image\/(\S+?);(\S+?),(.+)/); |
|||
if (!info) return; |
|||
// #ifndef H5 || MP-TOUTIAO |
|||
filePath = `${wx.env.USER_DATA_PATH}/${Date.now()}.${info[1]}`; |
|||
fs && fs.writeFile({ |
|||
filePath, |
|||
data: info[3], |
|||
encoding: info[2], |
|||
success: () => this[i] = filePath |
|||
}) |
|||
// #endif |
|||
// #ifdef APP-PLUS |
|||
filePath = `_doc/parser_tmp/${Date.now()}.${info[1]}`; |
|||
var bitmap = new plus.nativeObj.Bitmap(); |
|||
bitmap.loadBase64Data(src, () => { |
|||
bitmap.save(filePath, {}, () => { |
|||
bitmap.clear() |
|||
this[i] = filePath; |
|||
}) |
|||
}) |
|||
// #endif |
|||
} |
|||
} |
|||
// #ifdef H5 |
|||
this.document = document.getElementById('rtf' + this._uid); |
|||
// #endif |
|||
// #ifndef H5 || APP-PLUS-NVUE |
|||
if (dom) this.document = new dom(this); |
|||
// #endif |
|||
// #ifdef APP-PLUS-NVUE |
|||
this.document = this.$refs.web; |
|||
setTimeout(() => { |
|||
// #endif |
|||
if (this.html) this.setContent(this.html); |
|||
// #ifdef APP-PLUS-NVUE |
|||
}, 30) |
|||
// #endif |
|||
|
|||
}, |
|||
beforeDestroy() { |
|||
// #ifdef H5 |
|||
if (this._observer) this._observer.disconnect(); |
|||
// #endif |
|||
if(!!this.imgList){ |
|||
this.imgList.each(src => { |
|||
// #ifdef APP-PLUS |
|||
if (src && src.includes('_doc')) { |
|||
plus.io.resolveLocalFileSystemURL(src, entry => { |
|||
entry.remove(); |
|||
}); |
|||
} |
|||
// #endif |
|||
// #ifndef H5 || MP-TOUTIAO |
|||
if (src && src.includes(uni.env.USER_DATA_PATH)) |
|||
fs && fs.unlink({ |
|||
filePath: src |
|||
}) |
|||
// #endif |
|||
}) |
|||
} |
|||
|
|||
clearInterval(this._timer); |
|||
}, |
|||
methods: { |
|||
// #ifdef H5 || APP-PLUS-NVUE |
|||
_Dom2Str(nodes) { |
|||
var str = ''; |
|||
for (var node of nodes) { |
|||
if (node.type == 'text') |
|||
str += node.text; |
|||
else { |
|||
str += ('<' + node.name); |
|||
for (var attr in node.attrs || {}) |
|||
str += (' ' + attr + '="' + node.attrs[attr] + '"'); |
|||
if (!node.children || !node.children.length) str += '>'; |
|||
else str += ('>' + this._Dom2Str(node.children) + '</' + node.name + '>'); |
|||
} |
|||
} |
|||
return str; |
|||
}, |
|||
_handleHtml(html, append) { |
|||
if (typeof html != 'string') html = this._Dom2Str(html.nodes || html); |
|||
if (!append) { |
|||
// 处理 tag-style 和 userAgentStyles |
|||
var style = '<style>@keyframes show{0%{opacity:0}100%{opacity:1}}img{max-width:100%}'; |
|||
for (var item in cfg.userAgentStyles) |
|||
style += `${item}{${cfg.userAgentStyles[item]}}`; |
|||
for (item in this.tagStyle) |
|||
style += `${item}{${this.tagStyle[item]}}`; |
|||
style += '</style>'; |
|||
html = style + html; |
|||
} |
|||
// 处理 rpx |
|||
if (html.includes('rpx')) |
|||
html = html.replace(/[0-9.]+\s*rpx/g, $ => parseFloat($) * rpx + 'px'); |
|||
return html; |
|||
}, |
|||
// #endif |
|||
setContent(htmls, append) { |
|||
let html = htmls.replace(/$nbsp;/g,""); |
|||
// #ifdef APP-PLUS-NVUE |
|||
if (!html) |
|||
return this.height = 1; |
|||
if (append) |
|||
this.$refs.web.evalJs("var b=document.createElement('div');b.innerHTML='" + html.replace(/'/g, "\\'") + |
|||
"';document.getElementById('parser').appendChild(b)"); |
|||
else { |
|||
html = |
|||
'<meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><base href="' + |
|||
this.domain + '"><div id="parser"' + (this.selectable ? '>' : ' style="user-select:none">') + this._handleHtml(html) + |
|||
'</div><script>"use strict";function e(e){if(window.__dcloud_weex_postMessage||window.__dcloud_weex_){var t={data:[e]};window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessage(t):window.__dcloud_weex_.postMessage(JSON.stringify(t))}}' + |
|||
(this.showWithAnimation ? 'document.body.style.animation="show .5s",' : '') + |
|||
'setTimeout(function(){e({action:"load",text:document.body.innerText,height:document.getElementById("parser").scrollHeight+16})},50);\x3c/script>'; |
|||
this.$refs.web.evalJs("document.write('" + html.replace(/'/g, "\\'") + "');document.close()"); |
|||
} |
|||
this.$refs.web.evalJs( |
|||
'var t=document.getElementsByTagName("title");t.length&&e({action:"getTitle",title:t[0].innerText});for(var o,n=document.getElementsByTagName("style"),r=0;o=n[r++];)o.innerHTML=o.innerHTML.replace(/body/g,"#parser");for(var i,a=document.getElementsByTagName("img"),s=[],c=0,l=0;i=a[c];c++)i.onerror=function(){' + |
|||
(cfg.errorImg ? 'this.src=' + cfg.errorImg + ',' : '') + |
|||
'e({action:"error",source:"img",target:this})},i.hasAttribute("ignore")||"A"==i.parentElement.nodeName||(i.i=l++,s.push(i.src),i.onclick=function(){e({action:"preview",img:{i:this.i,src:this.src}})});e({action:"getImgList",imgList:s});for(var d,u=document.getElementsByTagName("a"),g=0;d=u[g];g++)d.onclick=function(){var t,o=this.getAttribute("href");if("#"==o[0]){var n=document.getElementById(o.substr(1));n&&(t=n.offsetTop)}return e({action:"linkpress",href:o,offset:t}),!1};for(var m,f=document.getElementsByTagName("video"),h=0;m=f[h];h++)m.style.maxWidth="100%",m.onerror=function(){e({action:"error",source:"video",target:this})}' + |
|||
(this.autopause ? ',m.onplay=function(){for(var e,t=0;e=f[t];t++)e!=this&&e.pause()}' : '') + |
|||
';for(var v,y=document.getElementsByTagName("audio"),_=0;v=y[_];_++)v.onerror=function(){e({action:"error",source:"audio",target:this})};' + |
|||
(this.autoscroll ? 'for(var p,w=document.getElementsByTagName("table"),T=0;p=w[T];T++){var E=document.createElement("div");E.style.overflow="scroll",p.parentNode.replaceChild(E,p),E.appendChild(p)}' : '') + |
|||
'(function(){return new Promise(function(e){var t=document.getElementById("parser"),o=t.scrollHeight,n=setInterval(function(){o==t.scrollHeight?(clearInterval(n),e(o)):o=t.scrollHeight},500)})})().then(function(t){e({action:"ready",height:t+16})})' |
|||
) |
|||
this.nodes = [1]; |
|||
// #endif |
|||
// #ifdef H5 |
|||
if (!html) { |
|||
if (this.rtf && !append) this.rtf.parentNode.removeChild(this.rtf); |
|||
return; |
|||
} |
|||
var div = document.createElement('div'); |
|||
if (!append) { |
|||
if (this.rtf) this.rtf.parentNode.removeChild(this.rtf); |
|||
this.rtf = div; |
|||
} else { |
|||
if (!this.rtf) this.rtf = div; |
|||
else this.rtf.appendChild(div); |
|||
} |
|||
div.innerHTML = this._handleHtml(html, append); |
|||
for (var styles = this.rtf.getElementsByTagName('style'), i = 0, style; style = styles[i++];) { |
|||
style.innerHTML = style.innerHTML.replace(/body/g, '#rtf' + this._uid); |
|||
style.setAttribute('scoped', 'true'); |
|||
} |
|||
// 懒加载 |
|||
if (!this._observer && this.lazyLoad && IntersectionObserver) { |
|||
this._observer = new IntersectionObserver(changes => { |
|||
for (let item, i = 0; item = changes[i++];) { |
|||
if (item.isIntersecting) { |
|||
item.target.src = item.target.getAttribute('data-src'); |
|||
item.target.removeAttribute('data-src'); |
|||
this._observer.unobserve(item.target); |
|||
} |
|||
} |
|||
}, { |
|||
rootMargin: '500px 0px 500px 0px' |
|||
}) |
|||
} |
|||
var _ts = this; |
|||
// 获取标题 |
|||
var title = this.rtf.getElementsByTagName('title'); |
|||
if (title.length && this.autosetTitle) |
|||
// uni.setNavigationBarTitle({ |
|||
// title: title[0].innerText |
|||
// }) |
|||
// 暂时搁置 |
|||
// 图片处理 |
|||
this.imgList.length = 0; |
|||
var imgs = this.rtf.getElementsByTagName('img'); |
|||
for (let i = 0, j = 0, img; img = imgs[i]; i++) { |
|||
var src = img.getAttribute('src'); |
|||
img.style.maxWidth = '100%'; |
|||
img.style.verticalAlign = 'top'; |
|||
if (this.domain && src) { |
|||
if (src[0] == '/') { |
|||
if (src[1] == '/') |
|||
img.src = (this.domain.includes('://') ? this.domain.split('://')[0] : '') + ':' + src; |
|||
else img.src = this.domain + src; |
|||
} else if (!src.includes('://')) img.src = this.domain + '/' + src; |
|||
} |
|||
if (!img.hasAttribute('ignore') && img.parentElement.nodeName != 'A') { |
|||
img.i = j++; |
|||
_ts.imgList.push(img.src || img.getAttribute('data-src')); |
|||
img.onclick = function() { |
|||
var preview = true; |
|||
this.ignore = () => preview = false; |
|||
_ts.$emit('imgtap', this); |
|||
// if (preview) { |
|||
// uni.previewImage({ |
|||
// current: this.i, |
|||
// urls: _ts.imgList |
|||
// }); |
|||
// } |
|||
} |
|||
} |
|||
img.onerror = function() { |
|||
if (cfg.errorImg) |
|||
_ts.imgList[this.i] = this.src = cfg.errorImg; |
|||
_ts.$emit('error', { |
|||
source: 'img', |
|||
target: this |
|||
}); |
|||
} |
|||
if (_ts.lazyLoad && this._observer && img.src && img.i != 0) { |
|||
img.setAttribute('data-src', img.src); |
|||
img.removeAttribute('src'); |
|||
this._observer.observe(img); |
|||
} |
|||
} |
|||
// 链接处理 |
|||
var links = this.rtf.getElementsByTagName('a'); |
|||
for (var link of links) { |
|||
link.onclick = function() { |
|||
var jump = true, |
|||
href = this.getAttribute('href'); |
|||
_ts.$emit('linkpress', { |
|||
href, |
|||
ignore: () => jump = false |
|||
}); |
|||
if (jump && href) { |
|||
if (href[0] == '#') { |
|||
if (_ts.useAnchor) { |
|||
_ts.navigateTo({ |
|||
id: href.substr(1) |
|||
}) |
|||
} |
|||
} else if (href.indexOf('http') == 0 || href.indexOf('//') == 0) |
|||
return true; |
|||
else { |
|||
uni.navigateTo({ |
|||
url: href |
|||
}) |
|||
} |
|||
} |
|||
return false; |
|||
} |
|||
} |
|||
// 视频处理 |
|||
var videos = this.rtf.getElementsByTagName('video'); |
|||
_ts.videoContexts = videos; |
|||
// _ts.videoContexts.poster = ''; |
|||
// debugger |
|||
for (let video, i = 0; video = videos[i++];) { |
|||
video.style.maxWidth = '100%'; |
|||
video.poster = _ts.poster; |
|||
// debugger |
|||
video.onerror = function() { |
|||
_ts.$emit('error', { |
|||
source: 'video', |
|||
target: this |
|||
}); |
|||
} |
|||
video.onplay = function() { |
|||
if (_ts.autopause) |
|||
for (let item, i = 0; item = _ts.videoContexts[i++];) |
|||
if (item != this) item.pause(); |
|||
} |
|||
} |
|||
// 音频处理 |
|||
var audios = this.rtf.getElementsByTagName('audio'); |
|||
for (var audio of audios) |
|||
audio.onerror = function() { |
|||
_ts.$emit('error', { |
|||
source: 'audio', |
|||
target: this |
|||
}); |
|||
} |
|||
// 表格处理 |
|||
if (this.autoscroll) { |
|||
var tables = this.rtf.getElementsByTagName('table'); |
|||
for (var table of tables) { |
|||
let div = document.createElement('div'); |
|||
div.style.overflow = 'scroll'; |
|||
table.parentNode.replaceChild(div, table); |
|||
div.appendChild(table); |
|||
} |
|||
} |
|||
if (!append) this.document.appendChild(this.rtf); |
|||
this.$nextTick(() => { |
|||
this.nodes = [1]; |
|||
this.$emit('load'); |
|||
}); |
|||
setTimeout(() => this.showAm = '', 500); |
|||
// #endif |
|||
// #ifndef APP-PLUS-NVUE |
|||
// #ifndef H5 |
|||
var nodes; |
|||
if (!html) |
|||
return this.nodes = []; |
|||
else if (typeof html == 'string') { |
|||
let parser = new Parser(html, this); |
|||
// 缓存读取 |
|||
if (this.useCache) { |
|||
var hashVal = hash(html); |
|||
if (cache[hashVal]) |
|||
nodes = cache[hashVal]; |
|||
else { |
|||
nodes = parser.parse(); |
|||
cache[hashVal] = nodes; |
|||
} |
|||
} else nodes = parser.parse(); |
|||
this.$emit('parse', nodes); |
|||
} else if (Object.prototype.toString.call(html) == '[object Array]') { |
|||
// 非本插件产生的 array 需要进行一些转换 |
|||
if (html.length && html[0].PoweredBy != 'Parser') { |
|||
let parser = new Parser(html, this); |
|||
(function f(ns) { |
|||
for (var i = 0, n; n = ns[i]; i++) { |
|||
if (n.type == 'text') continue; |
|||
n.attrs = n.attrs || {}; |
|||
for (var item in n.attrs) |
|||
if (typeof n.attrs[item] != 'string') n.attrs[item] = n.attrs[item].toString(); |
|||
parser.matchAttr(n, parser); |
|||
if (n.children && n.children.length) { |
|||
parser.STACK.push(n); |
|||
f(n.children); |
|||
parser.popNode(parser.STACK.pop()); |
|||
} else n.children = void 0; |
|||
} |
|||
})(html); |
|||
} |
|||
nodes = html; |
|||
} else if (typeof html == 'object' && html.nodes) { |
|||
nodes = html.nodes; |
|||
console.warn('错误的 html 类型：object 类型已废弃'); |
|||
} else |
|||
return console.warn('错误的 html 类型：' + typeof html); |
|||
if (append) this.nodes = this.nodes.concat(nodes); |
|||
else this.nodes = nodes; |
|||
if (nodes.length && nodes[0].title && this.autosetTitle) |
|||
// uni.setNavigationBarTitle({ |
|||
// title: nodes[0].title |
|||
// }) |
|||
// 暂时搁置 |
|||
if (this.imgList) this.imgList.length = 0; |
|||
this.videoContexts = []; |
|||
this.$nextTick(() => { |
|||
this.$emit('load'); |
|||
}) |
|||
// #endif |
|||
var height; |
|||
clearInterval(this._timer); |
|||
this._timer = setInterval(() => { |
|||
// #ifdef H5 |
|||
this.rect = this.rtf.getBoundingClientRect(); |
|||
// #endif |
|||
// #ifndef H5 |
|||
// #ifdef APP-PLUS |
|||
uni.createSelectorQuery().in(this) |
|||
// #endif |
|||
// #ifndef APP-PLUS |
|||
this.createSelectorQuery() |
|||
// #endif |
|||
.select('#top').boundingClientRect().exec(res => { |
|||
if (!res) return; |
|||
this.rect = res[0]; |
|||
// #endif |
|||
if (this.rect.height == height) { |
|||
this.$emit('ready', this.rect) |
|||
clearInterval(this._timer); |
|||
} |
|||
height = this.rect.height; |
|||
// #ifndef H5 |
|||
}); |
|||
// #endif |
|||
}, 350); |
|||
if (this.showWithAnimation && !append) this.showAm = 'animation:show .5s'; |
|||
// #endif |
|||
}, |
|||
getText(ns = this.nodes) { |
|||
var txt = ''; |
|||
// #ifdef APP-PLUS-NVUE |
|||
txt = this._text; |
|||
// #endif |
|||
// #ifdef H5 |
|||
txt = this.rtf.innerText; |
|||
// #endif |
|||
// #ifndef H5 || APP-PLUS-NVUE |
|||
for (var i = 0, n; n = ns[i++];) { |
|||
if (n.type == 'text') txt += n.text.replace(/ /g, '\u00A0').replace(/</g, '<').replace(/>/g, '>') |
|||
.replace(/&/g, '&'); |
|||
else if (n.type == 'br') txt += '\n'; |
|||
else { |
|||
// 块级标签前后加换行 |
|||
var block = n.name == 'p' || n.name == 'div' || n.name == 'tr' || n.name == 'li' || (n.name[0] == 'h' && n.name[1] > |
|||
'0' && n.name[1] < '7'); |
|||
if (block && txt && txt[txt.length - 1] != '\n') txt += '\n'; |
|||
if (n.children) txt += this.getText(n.children); |
|||
if (block && txt[txt.length - 1] != '\n') txt += '\n'; |
|||
else if (n.name == 'td' || n.name == 'th') txt += '\t'; |
|||
} |
|||
} |
|||
// #endif |
|||
return txt; |
|||
}, |
|||
navigateTo(obj) { |
|||
if (!this.useAnchor) |
|||
return obj.fail && obj.fail({ |
|||
errMsg: 'Anchor is disabled' |
|||
}) |
|||
// #ifdef APP-PLUS-NVUE |
|||
if (!obj.id) |
|||
weexDom.scrollToElement(this.$refs.web); |
|||
else |
|||
this.$refs.web.evalJs('var pos=document.getElementById("' + obj.id + |
|||
'");if(pos)post({action:"linkpress",href:"#",offset:pos.offsetTop+' + (obj.offset || 0) + '})'); |
|||
obj.success && obj.success({ |
|||
errMsg: 'pageScrollTo:ok' |
|||
}); |
|||
// #endif |
|||
// #ifdef H5 |
|||
if (!obj.id) { |
|||
window.scrollTo(0, this.rtf.offsetTop); |
|||
return obj.success && obj.success({ |
|||
errMsg: 'pageScrollTo:ok' |
|||
}); |
|||
} |
|||
var target = document.getElementById(obj.id); |
|||
if (!target) return obj.fail && obj.fail({ |
|||
errMsg: 'Label not found' |
|||
}); |
|||
obj.scrollTop = this.rtf.offsetTop + target.offsetTop + (obj.offset || 0); |
|||
uni.pageScrollTo(obj); |
|||
// #endif |
|||
// #ifndef H5 || APP-PLUS-NVUE |
|||
var Scroll = (selector, component) => { |
|||
uni.createSelectorQuery().in(component ? component : this).select(selector).boundingClientRect().selectViewport() |
|||
.scrollOffset() |
|||
.exec(res => { |
|||
if (!res || !res[0]) |
|||
return obj.fail && obj.fail({ |
|||
errMsg: 'Label not found' |
|||
}); |
|||
obj.scrollTop = res[1].scrollTop + res[0].top + (obj.offset || 0); |
|||
uni.pageScrollTo(obj); |
|||
}) |
|||
} |
|||
if (!obj.id) Scroll('#top'); |
|||
else { |
|||
// #ifndef MP-BAIDU || MP-ALIPAY || APP-PLUS |
|||
Scroll('#top >>> #' + obj.id + ', #top >>> .' + obj.id); |
|||
// #endif |
|||
// #ifdef MP-BAIDU || MP-ALIPAY || APP-PLUS |
|||
for (var anchor of this.anchors) |
|||
if (anchor.id == obj.id) |
|||
Scroll('#' + obj.id + ', .' + obj.id, anchor.node); |
|||
// #endif |
|||
} |
|||
// #endif |
|||
}, |
|||
getVideoContext(id) { |
|||
// #ifndef APP-PLUS-NVUE |
|||
if (!id) return this.videoContexts; |
|||
else |
|||
for (var i = this.videoContexts.length; i--;) |
|||
if (this.videoContexts[i].id == id) return this.videoContexts[i]; |
|||
// #endif |
|||
}, |
|||
// #ifdef APP-PLUS-NVUE |
|||
_message(e) { |
|||
// 接收 web-view 消息 |
|||
var data = e.detail.data[0]; |
|||
if (data.action == 'load') { |
|||
this.$emit('load'); |
|||
this.height = data.height; |
|||
this._text = data.text; |
|||
} else if (data.action == 'getTitle') { |
|||
if (this.autosetTitle) |
|||
// uni.setNavigationBarTitle({ |
|||
// title: data.title |
|||
// }) |
|||
// 暂时搁置 |
|||
} else if (data.action == 'getImgList') { |
|||
this.imgList.length = 0; |
|||
for (var i = data.imgList.length; i--;) |
|||
this.imgList.setItem(i, data.imgList[i]); |
|||
} else if (data.action == 'preview') { |
|||
var preview = true; |
|||
data.img.ignore = () => preview = false; |
|||
this.$emit('imgtap', data.img); |
|||
if (preview) |
|||
uni.previewImage({ |
|||
current: data.img.i, |
|||
urls: this.imgList |
|||
}) |
|||
} else if (data.action == 'linkpress') { |
|||
console.log('点了点了点了') |
|||
debugger |
|||
var jump = true, |
|||
href = data.href; |
|||
this.$emit('linkpress', { |
|||
href, |
|||
ignore: () => jump = false |
|||
}) |
|||
if (jump && href) { |
|||
if (href[0] == '#') { |
|||
if (this.useAnchor) |
|||
weexDom.scrollToElement(this.$refs.web, { |
|||
offset: data.offset |
|||
}) |
|||
} else if (href.includes('://')) |
|||
plus.runtime.openWeb(href); |
|||
else |
|||
uni.navigateTo({ |
|||
url: href |
|||
}) |
|||
} |
|||
} else if (data.action == 'error') { |
|||
if (data.source == 'img' && cfg.errorImg) |
|||
this.imgList.setItem(data.target.i, cfg.errorImg); |
|||
this.$emit('error', { |
|||
source: data.source, |
|||
target: data.target |
|||
}) |
|||
} else if (data.action == 'ready') { |
|||
this.height = data.height; |
|||
this.$nextTick(() => { |
|||
uni.createSelectorQuery().in(this).select('#top').boundingClientRect().exec(res => { |
|||
this.rect = res[0]; |
|||
this.$emit('ready', res[0]); |
|||
}) |
|||
}) |
|||
} |
|||
}, |
|||
// #endif |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
@keyframes show { |
|||
0% { |
|||
opacity: 0; |
|||
} |
|||
|
|||
100% { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
/* #ifndef H5 */ |
|||
:host { |
|||
display: block; |
|||
/* overflow: scroll; */ |
|||
-webkit-overflow-scrolling: touch; |
|||
} |
|||
|
|||
/* #endif */ |
|||
</style> |
|||
@ -0,0 +1,97 @@ |
|||
const cfg = require('./config.js'), |
|||
isLetter = c => (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z'); |
|||
|
|||
function CssHandler(tagStyle) { |
|||
var styles = Object.assign(Object.create(null), cfg.userAgentStyles); |
|||
for (var item in tagStyle) |
|||
styles[item] = (styles[item] ? styles[item] + ';' : '') + tagStyle[item]; |
|||
this.styles = styles; |
|||
} |
|||
CssHandler.prototype.getStyle = function(data) { |
|||
this.styles = new parser(data, this.styles).parse(); |
|||
} |
|||
CssHandler.prototype.match = function(name, attrs) { |
|||
var tmp, matched = (tmp = this.styles[name]) ? tmp + ';' : ''; |
|||
if (attrs.class) { |
|||
var items = attrs.class.split(' '); |
|||
for (var i = 0, item; item = items[i]; i++) |
|||
if (tmp = this.styles['.' + item]) |
|||
matched += tmp + ';'; |
|||
} |
|||
if (tmp = this.styles['#' + attrs.id]) |
|||
matched += tmp + ';'; |
|||
return matched; |
|||
} |
|||
module.exports = CssHandler; |
|||
|
|||
function parser(data, init) { |
|||
this.data = data; |
|||
this.floor = 0; |
|||
this.i = 0; |
|||
this.list = []; |
|||
this.res = init; |
|||
this.state = this.Space; |
|||
} |
|||
parser.prototype.parse = function() { |
|||
for (var c; c = this.data[this.i]; this.i++) |
|||
this.state(c); |
|||
return this.res; |
|||
} |
|||
parser.prototype.section = function() { |
|||
return this.data.substring(this.start, this.i); |
|||
} |
|||
// 状态机
|
|||
parser.prototype.Space = function(c) { |
|||
if (c == '.' || c == '#' || isLetter(c)) { |
|||
this.start = this.i; |
|||
this.state = this.Name; |
|||
} else if (c == '/' && this.data[this.i + 1] == '*') |
|||
this.Comment(); |
|||
else if (!cfg.blankChar[c] && c != ';') |
|||
this.state = this.Ignore; |
|||
} |
|||
parser.prototype.Comment = function() { |
|||
this.i = this.data.indexOf('*/', this.i) + 1; |
|||
if (!this.i) this.i = this.data.length; |
|||
this.state = this.Space; |
|||
} |
|||
parser.prototype.Ignore = function(c) { |
|||
if (c == '{') this.floor++; |
|||
else if (c == '}' && !--this.floor) this.state = this.Space; |
|||
} |
|||
parser.prototype.Name = function(c) { |
|||
if (cfg.blankChar[c]) { |
|||
this.list.push(this.section()); |
|||
this.state = this.NameSpace; |
|||
} else if (c == '{') { |
|||
this.list.push(this.section()); |
|||
this.Content(); |
|||
} else if (c == ',') { |
|||
this.list.push(this.section()); |
|||
this.Comma(); |
|||
} else if (!isLetter(c) && (c < '0' || c > '9') && c != '-' && c != '_') |
|||
this.state = this.Ignore; |
|||
} |
|||
parser.prototype.NameSpace = function(c) { |
|||
if (c == '{') this.Content(); |
|||
else if (c == ',') this.Comma(); |
|||
else if (!cfg.blankChar[c]) this.state = this.Ignore; |
|||
} |
|||
parser.prototype.Comma = function() { |
|||
while (cfg.blankChar[this.data[++this.i]]); |
|||
if (this.data[this.i] == '{') this.Content(); |
|||
else { |
|||
this.start = this.i--; |
|||
this.state = this.Name; |
|||
} |
|||
} |
|||
parser.prototype.Content = function() { |
|||
this.start = ++this.i; |
|||
if ((this.i = this.data.indexOf('}', this.i)) == -1) this.i = this.data.length; |
|||
var content = this.section(); |
|||
for (var i = 0, item; item = this.list[i++];) |
|||
if (this.res[item]) this.res[item] += ';' + content; |
|||
else this.res[item] = content; |
|||
this.list = []; |
|||
this.state = this.Space; |
|||
} |
|||
@ -0,0 +1,546 @@ |
|||
/** |
|||
* html 解析器 |
|||
* @tutorial https://github.com/jin-yufeng/Parser
|
|||
* @version 20200524 |
|||
* @author JinYufeng |
|||
* @listens MIT |
|||
*/ |
|||
const cfg = require('./config.js'), |
|||
blankChar = cfg.blankChar, |
|||
CssHandler = require('./CssHandler.js'), |
|||
windowWidth = uni.getSystemInfoSync().windowWidth; |
|||
var emoji; |
|||
|
|||
function MpHtmlParser(data, options = {}) { |
|||
this.attrs = {}; |
|||
this.CssHandler = new CssHandler(options.tagStyle, windowWidth); |
|||
this.data = data; |
|||
this.domain = options.domain; |
|||
this.DOM = []; |
|||
this.i = this.start = this.audioNum = this.imgNum = this.videoNum = 0; |
|||
options.prot = (this.domain || '').includes('://') ? this.domain.split('://')[0] : 'http'; |
|||
this.options = options; |
|||
this.state = this.Text; |
|||
this.STACK = []; |
|||
// 工具函数
|
|||
this.bubble = () => { |
|||
for (var i = this.STACK.length, item; item = this.STACK[--i];) { |
|||
if (cfg.richOnlyTags[item.name]) { |
|||
if (item.name == 'table' && !Object.hasOwnProperty.call(item, 'c')) item.c = 1; |
|||
return false; |
|||
} |
|||
item.c = 1; |
|||
} |
|||
return true; |
|||
} |
|||
this.decode = (val, amp) => { |
|||
var i = -1, |
|||
j, en; |
|||
while (1) { |
|||
if ((i = val.indexOf('&', i + 1)) == -1) break; |
|||
if ((j = val.indexOf(';', i + 2)) == -1) break; |
|||
if (val[i + 1] == '#') { |
|||
en = parseInt((val[i + 2] == 'x' ? '0' : '') + val.substring(i + 2, j)); |
|||
if (!isNaN(en)) val = val.substr(0, i) + String.fromCharCode(en) + val.substr(j + 1); |
|||
} else { |
|||
en = val.substring(i + 1, j); |
|||
if (cfg.entities[en] || en == amp) |
|||
val = val.substr(0, i) + (cfg.entities[en] || '&') + val.substr(j + 1); |
|||
} |
|||
} |
|||
return val; |
|||
} |
|||
this.getUrl = url => { |
|||
if (url[0] == '/') { |
|||
if (url[1] == '/') url = this.options.prot + ':' + url; |
|||
else if (this.domain) url = this.domain + url; |
|||
} else if (this.domain && url.indexOf('data:') != 0 && !url.includes('://')) |
|||
url = this.domain + '/' + url; |
|||
return url; |
|||
} |
|||
this.isClose = () => this.data[this.i] == '>' || (this.data[this.i] == '/' && this.data[this.i + 1] == '>'); |
|||
this.section = () => this.data.substring(this.start, this.i); |
|||
this.parent = () => this.STACK[this.STACK.length - 1]; |
|||
this.siblings = () => this.STACK.length ? this.parent().children : this.DOM; |
|||
} |
|||
MpHtmlParser.prototype.parse = function() { |
|||
if (emoji) this.data = emoji.parseEmoji(this.data); |
|||
for (var c; c = this.data[this.i]; this.i++) |
|||
this.state(c); |
|||
if (this.state == this.Text) this.setText(); |
|||
while (this.STACK.length) this.popNode(this.STACK.pop()); |
|||
if (this.DOM.length) { |
|||
this.DOM[0].PoweredBy = 'Parser'; |
|||
if (this.title) this.DOM[0].title = this.title; |
|||
} |
|||
return this.DOM; |
|||
} |
|||
// 设置属性
|
|||
MpHtmlParser.prototype.setAttr = function() { |
|||
var name = this.attrName.toLowerCase(); |
|||
if (cfg.trustAttrs[name]) { |
|||
var val = this.attrVal; |
|||
if (val) { |
|||
if (name == 'src') this.attrs[name] = this.getUrl(this.decode(val, 'amp')); |
|||
else if (name == 'href' || name == 'style') this.attrs[name] = this.decode(val, 'amp'); |
|||
else this.attrs[name] = val; |
|||
} else if (cfg.boolAttrs[name]) this.attrs[name] = 'T'; |
|||
} |
|||
this.attrVal = ''; |
|||
while (blankChar[this.data[this.i]]) this.i++; |
|||
if (this.isClose()) this.setNode(); |
|||
else { |
|||
this.start = this.i; |
|||
this.state = this.AttrName; |
|||
} |
|||
} |
|||
// 设置文本节点
|
|||
MpHtmlParser.prototype.setText = function() { |
|||
var back, text = this.section(); |
|||
if (!text) return; |
|||
text = (cfg.onText && cfg.onText(text, () => back = true)) || text; |
|||
if (back) { |
|||
this.data = this.data.substr(0, this.start) + text + this.data.substr(this.i); |
|||
let j = this.start + text.length; |
|||
for (this.i = this.start; this.i < j; this.i++) this.state(this.data[this.i]); |
|||
return; |
|||
} |
|||
if (!this.pre) { |
|||
// 合并空白符
|
|||
var tmp = []; |
|||
for (let i = text.length, c; c = text[--i];) |
|||
if (!blankChar[c] || (!blankChar[tmp[0]] && (c = ' '))) tmp.unshift(c); |
|||
text = tmp.join(''); |
|||
} |
|||
this.siblings().push({ |
|||
type: 'text', |
|||
text: this.decode(text) |
|||
}); |
|||
} |
|||
// 设置元素节点
|
|||
MpHtmlParser.prototype.setNode = function() { |
|||
var node = { |
|||
name: this.tagName.toLowerCase(), |
|||
attrs: this.attrs |
|||
}, |
|||
close = cfg.selfClosingTags[node.name]; |
|||
this.attrs = {}; |
|||
if (!cfg.ignoreTags[node.name]) { |
|||
// 处理属性
|
|||
var attrs = node.attrs, |
|||
style = this.CssHandler.match(node.name, attrs, node) + (attrs.style || ''), |
|||
styleObj = {}; |
|||
if (attrs.id) { |
|||
if (this.options.compress & 1) attrs.id = void 0; |
|||
else if (this.options.useAnchor) this.bubble(); |
|||
} |
|||
if ((this.options.compress & 2) && attrs.class) attrs.class = void 0; |
|||
switch (node.name) { |
|||
case 'a': |
|||
case 'ad': // #ifdef APP-PLUS
|
|||
case 'iframe': |
|||
// #endif
|
|||
this.bubble(); |
|||
break; |
|||
case 'font': |
|||
if (attrs.color) { |
|||
styleObj['color'] = attrs.color; |
|||
attrs.color = void 0; |
|||
} |
|||
if (attrs.face) { |
|||
styleObj['font-family'] = attrs.face; |
|||
attrs.face = void 0; |
|||
} |
|||
if (attrs.size) { |
|||
var size = parseInt(attrs.size); |
|||
if (size < 1) size = 1; |
|||
else if (size > 7) size = 7; |
|||
var map = ['xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large']; |
|||
styleObj['font-size'] = map[size - 1]; |
|||
attrs.size = void 0; |
|||
} |
|||
break; |
|||
case 'embed': |
|||
// #ifndef APP-PLUS
|
|||
var src = node.attrs.src || '', |
|||
type = node.attrs.type || ''; |
|||
if (type.includes('video') || src.includes('.mp4') || src.includes('.3gp') || src.includes('.m3u8')) |
|||
node.name = 'video'; |
|||
else if (type.includes('audio') || src.includes('.m4a') || src.includes('.wav') || src.includes('.mp3') || src.includes( |
|||
'.aac')) |
|||
node.name = 'audio'; |
|||
else break; |
|||
if (node.attrs.autostart) |
|||
node.attrs.autoplay = 'T'; |
|||
node.attrs.controls = 'T'; |
|||
// #endif
|
|||
// #ifdef APP-PLUS
|
|||
this.bubble(); |
|||
break; |
|||
// #endif
|
|||
case 'video': |
|||
case 'audio': |
|||
if (!attrs.id) attrs.id = node.name + (++this[`${node.name}Num`]); |
|||
else this[`${node.name}Num`]++; |
|||
if (node.name == 'video') { |
|||
if (this.videoNum > 3) |
|||
node.lazyLoad = 1; |
|||
if (attrs.width) { |
|||
styleObj.width = parseFloat(attrs.width) + (attrs.width.includes('%') ? '%' : 'px'); |
|||
attrs.width = void 0; |
|||
} |
|||
if (attrs.height) { |
|||
styleObj.height = parseFloat(attrs.height) + (attrs.height.includes('%') ? '%' : 'px'); |
|||
attrs.height = void 0; |
|||
} |
|||
} |
|||
attrs.source = []; |
|||
if (attrs.src) { |
|||
attrs.source.push(attrs.src); |
|||
attrs.src = void 0; |
|||
} |
|||
if (!attrs.controls && !attrs.autoplay) attrs.controls = 'T'; |
|||
this.bubble(); |
|||
break; |
|||
case 'td': |
|||
case 'th': |
|||
if (attrs.colspan || attrs.rowspan) |
|||
for (var k = this.STACK.length, item; item = this.STACK[--k];) |
|||
if (item.name == 'table') { |
|||
item.c = void 0; |
|||
break; |
|||
} |
|||
} |
|||
if (attrs.align) { |
|||
styleObj['text-align'] = attrs.align; |
|||
attrs.align = void 0; |
|||
} |
|||
// 压缩 style
|
|||
var styles = style.split(';'); |
|||
style = ''; |
|||
for (var i = 0, len = styles.length; i < len; i++) { |
|||
var info = styles[i].split(':'); |
|||
if (info.length < 2) continue; |
|||
let key = info[0].trim().toLowerCase(), |
|||
value = info.slice(1).join(':').trim(); |
|||
if (value.includes('-webkit') || value.includes('-moz') || value.includes('-ms') || value.includes('-o') || value.includes( |
|||
'safe')) |
|||
style += `;${key}:${value}`; |
|||
else if (!styleObj[key] || value.includes('import') || !styleObj[key].includes('import')) |
|||
styleObj[key] = value; |
|||
} |
|||
if (node.name == 'img') { |
|||
if (attrs['data-src']) { |
|||
attrs.src = attrs.src || attrs['data-src']; |
|||
attrs['data-src'] = void 0; |
|||
} |
|||
if (attrs.src && !attrs.ignore) { |
|||
if (this.bubble()) |
|||
attrs.i = (this.imgNum++).toString(); |
|||
else attrs.ignore = 'T'; |
|||
} |
|||
if (attrs.ignore) styleObj['max-width'] = '100%'; |
|||
var width; |
|||
if (styleObj.width) width = styleObj.width; |
|||
else if (attrs.width) width = attrs.width.includes('%') ? attrs.width : attrs.width + 'px'; |
|||
if (width) { |
|||
styleObj.width = width; |
|||
attrs.width = '100%'; |
|||
if (parseInt(width) > windowWidth) { |
|||
styleObj.height = ''; |
|||
if (attrs.height) attrs.height = void 0; |
|||
} |
|||
} |
|||
if (styleObj.height) { |
|||
attrs.height = styleObj.height; |
|||
styleObj.height = ''; |
|||
} else if (attrs.height && !attrs.height.includes('%')) |
|||
attrs.height += 'px'; |
|||
} |
|||
for (var key in styleObj) { |
|||
var value = styleObj[key]; |
|||
if (!value) continue; |
|||
if (key.includes('flex') || key == 'order' || key == 'self-align') node.c = 1; |
|||
// 填充链接
|
|||
if (value.includes('url')) { |
|||
var j = value.indexOf('('); |
|||
if (j++ != -1) { |
|||
while (value[j] == '"' || value[j] == "'" || blankChar[value[j]]) j++; |
|||
value = value.substr(0, j) + this.getUrl(value.substr(j)); |
|||
} |
|||
} |
|||
// 转换 rpx
|
|||
else if (value.includes('rpx')) |
|||
value = value.replace(/[0-9.]+\s*rpx/g, $ => parseFloat($) * windowWidth / 750 + 'px'); |
|||
else if (key == 'white-space' && value.includes('pre')) |
|||
this.pre = node.pre = true; |
|||
style += `;${key}:${value}`; |
|||
} |
|||
style = style.substr(1); |
|||
if (style) attrs.style = style; |
|||
if (!close) { |
|||
node.children = []; |
|||
if (node.name == 'pre' && cfg.highlight) { |
|||
this.remove(node); |
|||
this.pre = node.pre = true; |
|||
} |
|||
this.siblings().push(node); |
|||
this.STACK.push(node); |
|||
} else if (!cfg.filter || cfg.filter(node, this) != false) |
|||
this.siblings().push(node); |
|||
} else { |
|||
if (!close) this.remove(node); |
|||
else if (node.name == 'source') { |
|||
var parent = this.parent(); |
|||
if (parent && (parent.name == 'video' || parent.name == 'audio') && node.attrs.src) |
|||
parent.attrs.source.push(node.attrs.src); |
|||
} else if (node.name == 'base' && !this.domain) this.domain = node.attrs.href; |
|||
} |
|||
if (this.data[this.i] == '/') this.i++; |
|||
this.start = this.i + 1; |
|||
this.state = this.Text; |
|||
} |
|||
// 移除标签
|
|||
MpHtmlParser.prototype.remove = function(node) { |
|||
var name = node.name, |
|||
j = this.i; |
|||
// 处理 svg
|
|||
var handleSvg = () => { |
|||
var src = this.data.substring(j, this.i + 1); |
|||
if (!node.attrs.xmlns) src = ' xmlns="http://www.w3.org/2000/svg"' + src; |
|||
var i = j; |
|||
while (this.data[j] != '<') j--; |
|||
src = this.data.substring(j, i) + src; |
|||
var parent = this.parent(); |
|||
if (node.attrs.width == '100%' && parent && (parent.attrs.style || '').includes('inline')) |
|||
parent.attrs.style = 'width:300px;max-width:100%;' + parent.attrs.style; |
|||
this.siblings().push({ |
|||
name: 'img', |
|||
attrs: { |
|||
src: 'data:image/svg+xml;utf8,' + src.replace(/#/g, '%23'), |
|||
style: (/vertical[^;]+/.exec(node.attrs.style) || []).shift(), |
|||
ignore: 'T' |
|||
} |
|||
}) |
|||
} |
|||
if (node.name == 'svg' && this.data[j] == '/') return handleSvg(this.i++); |
|||
while (1) { |
|||
if ((this.i = this.data.indexOf('</', this.i + 1)) == -1) { |
|||
if (name == 'pre' || name == 'svg') this.i = j; |
|||
else this.i = this.data.length; |
|||
return; |
|||
} |
|||
this.start = (this.i += 2); |
|||
while (!blankChar[this.data[this.i]] && !this.isClose()) this.i++; |
|||
if (this.section().toLowerCase() == name) { |
|||
// 代码块高亮
|
|||
if (name == 'pre') { |
|||
this.data = this.data.substr(0, j + 1) + cfg.highlight(this.data.substring(j + 1, this.i - 5), node.attrs) + this.data |
|||
.substr(this.i - 5); |
|||
return this.i = j; |
|||
} else if (name == 'style') |
|||
this.CssHandler.getStyle(this.data.substring(j + 1, this.i - 7)); |
|||
else if (name == 'title') |
|||
this.title = this.data.substring(j + 1, this.i - 7); |
|||
if ((this.i = this.data.indexOf('>', this.i)) == -1) this.i = this.data.length; |
|||
if (name == 'svg') handleSvg(); |
|||
return; |
|||
} |
|||
} |
|||
} |
|||
// 节点出栈处理
|
|||
MpHtmlParser.prototype.popNode = function(node) { |
|||
// 空白符处理
|
|||
if (node.pre) { |
|||
node.pre = this.pre = void 0; |
|||
for (let i = this.STACK.length; i--;) |
|||
if (this.STACK[i].pre) |
|||
this.pre = true; |
|||
} |
|||
var siblings = this.siblings(), |
|||
len = siblings.length, |
|||
childs = node.children; |
|||
if (node.name == 'head' || (cfg.filter && cfg.filter(node, this) == false)) |
|||
return siblings.pop(); |
|||
var attrs = node.attrs; |
|||
// 替换一些标签名
|
|||
if (cfg.blockTags[node.name]) node.name = 'div'; |
|||
else if (!cfg.trustTags[node.name]) node.name = 'span'; |
|||
// 去除块标签前后空串
|
|||
if (node.name == 'div' || node.name == 'p' || node.name[0] == 't') { |
|||
if (len > 1 && siblings[len - 2].text == ' ') |
|||
siblings.splice(--len - 1, 1); |
|||
if (childs.length && childs[childs.length - 1].text == ' ') |
|||
childs.pop(); |
|||
} |
|||
// 处理列表
|
|||
if (node.c && (node.name == 'ul' || node.name == 'ol')) { |
|||
if ((node.attrs.style || '').includes('list-style:none')) { |
|||
for (let i = 0, child; child = childs[i++];) |
|||
if (child.name == 'li') |
|||
child.name = 'div'; |
|||
} else if (node.name == 'ul') { |
|||
var floor = 1; |
|||
for (let i = this.STACK.length; i--;) |
|||
if (this.STACK[i].name == 'ul') floor++; |
|||
if (floor != 1) |
|||
for (let i = childs.length; i--;) |
|||
childs[i].floor = floor; |
|||
} else { |
|||
for (let i = 0, num = 1, child; child = childs[i++];) |
|||
if (child.name == 'li') { |
|||
child.type = 'ol'; |
|||
child.num = ((num, type) => { |
|||
if (type == 'a') return String.fromCharCode(97 + (num - 1) % 26); |
|||
if (type == 'A') return String.fromCharCode(65 + (num - 1) % 26); |
|||
if (type == 'i' || type == 'I') { |
|||
num = (num - 1) % 99 + 1; |
|||
var one = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX'], |
|||
ten = ['X', 'XX', 'XXX', 'XL', 'L', 'LX', 'LXX', 'LXXX', 'XC'], |
|||
res = (ten[Math.floor(num / 10) - 1] || '') + (one[num % 10 - 1] || ''); |
|||
if (type == 'i') return res.toLowerCase(); |
|||
return res; |
|||
} |
|||
return num; |
|||
})(num++, attrs.type) + '.'; |
|||
} |
|||
} |
|||
} |
|||
// 处理表格的边框
|
|||
if (node.name == 'table') { |
|||
var padding = attrs.cellpadding, |
|||
spacing = attrs.cellspacing, |
|||
border = attrs.border; |
|||
if (node.c) { |
|||
this.bubble(); |
|||
attrs.style = (attrs.style || '') + ';display:table'; |
|||
if (!padding) padding = 2; |
|||
if (!spacing) spacing = 2; |
|||
} |
|||
if (border) attrs.style = `border:${border}px solid gray;${attrs.style || ''}`; |
|||
if (spacing) attrs.style = `border-spacing:${spacing}px;${attrs.style || ''}`; |
|||
if (border || padding || node.c) |
|||
(function f(ns) { |
|||
for (var i = 0, n; n = ns[i]; i++) { |
|||
if (n.type == 'text') continue; |
|||
var style = n.attrs.style || ''; |
|||
if (node.c && n.name[0] == 't') { |
|||
n.c = 1; |
|||
style += ';display:table-' + (n.name == 'th' || n.name == 'td' ? 'cell' : (n.name == 'tr' ? 'row' : 'row-group')); |
|||
} |
|||
if (n.name == 'th' || n.name == 'td') { |
|||
if (border) style = `border:${border}px solid gray;${style}`; |
|||
if (padding) style = `padding:${padding}px;${style}`; |
|||
} else f(n.children || []); |
|||
if (style) n.attrs.style = style; |
|||
} |
|||
})(childs) |
|||
if (this.options.autoscroll) { |
|||
var table = Object.assign({}, node); |
|||
node.name = 'div'; |
|||
node.attrs = { |
|||
style: 'overflow:scroll' |
|||
} |
|||
node.children = [table]; |
|||
} |
|||
} |
|||
this.CssHandler.pop && this.CssHandler.pop(node); |
|||
// 自动压缩
|
|||
if (node.name == 'div' && !Object.keys(attrs).length && childs.length == 1 && childs[0].name == 'div') |
|||
siblings[len - 1] = childs[0]; |
|||
} |
|||
// 状态机
|
|||
MpHtmlParser.prototype.Text = function(c) { |
|||
if (c == '<') { |
|||
var next = this.data[this.i + 1], |
|||
isLetter = c => (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z'); |
|||
if (isLetter(next)) { |
|||
this.setText(); |
|||
this.start = this.i + 1; |
|||
this.state = this.TagName; |
|||
} else if (next == '/') { |
|||
this.setText(); |
|||
if (isLetter(this.data[++this.i + 1])) { |
|||
this.start = this.i + 1; |
|||
this.state = this.EndTag; |
|||
} else this.Comment(); |
|||
} else if (next == '!') { |
|||
this.setText(); |
|||
this.Comment(); |
|||
} |
|||
} |
|||
} |
|||
MpHtmlParser.prototype.Comment = function() { |
|||
var key; |
|||
if (this.data.substring(this.i + 2, this.i + 4) == '--') key = '-->'; |
|||
else if (this.data.substring(this.i + 2, this.i + 9) == '[CDATA[') key = ']]>'; |
|||
else key = '>'; |
|||
if ((this.i = this.data.indexOf(key, this.i + 2)) == -1) this.i = this.data.length; |
|||
else this.i += key.length - 1; |
|||
this.start = this.i + 1; |
|||
this.state = this.Text; |
|||
} |
|||
MpHtmlParser.prototype.TagName = function(c) { |
|||
if (blankChar[c]) { |
|||
this.tagName = this.section(); |
|||
while (blankChar[this.data[this.i]]) this.i++; |
|||
if (this.isClose()) this.setNode(); |
|||
else { |
|||
this.start = this.i; |
|||
this.state = this.AttrName; |
|||
} |
|||
} else if (this.isClose()) { |
|||
this.tagName = this.section(); |
|||
this.setNode(); |
|||
} |
|||
} |
|||
MpHtmlParser.prototype.AttrName = function(c) { |
|||
var blank = blankChar[c]; |
|||
if (blank) { |
|||
this.attrName = this.section(); |
|||
c = this.data[this.i]; |
|||
} |
|||
if (c == '=') { |
|||
if (!blank) this.attrName = this.section(); |
|||
while (blankChar[this.data[++this.i]]); |
|||
this.start = this.i--; |
|||
this.state = this.AttrValue; |
|||
} else if (blank) this.setAttr(); |
|||
else if (this.isClose()) { |
|||
this.attrName = this.section(); |
|||
this.setAttr(); |
|||
} |
|||
} |
|||
MpHtmlParser.prototype.AttrValue = function(c) { |
|||
if (c == '"' || c == "'") { |
|||
this.start++; |
|||
if ((this.i = this.data.indexOf(c, this.i + 1)) == -1) return this.i = this.data.length; |
|||
this.attrVal = this.section(); |
|||
this.i++; |
|||
} else { |
|||
for (; !blankChar[this.data[this.i]] && !this.isClose(); this.i++); |
|||
this.attrVal = this.section(); |
|||
} |
|||
this.setAttr(); |
|||
} |
|||
MpHtmlParser.prototype.EndTag = function(c) { |
|||
if (blankChar[c] || c == '>' || c == '/') { |
|||
var name = this.section().toLowerCase(); |
|||
for (var i = this.STACK.length; i--;) |
|||
if (this.STACK[i].name == name) break; |
|||
if (i != -1) { |
|||
var node; |
|||
while ((node = this.STACK.pop()).name != name) this.popNode(node); |
|||
this.popNode(node); |
|||
} else if (name == 'p' || name == 'br') |
|||
this.siblings().push({ |
|||
name, |
|||
attrs: {} |
|||
}); |
|||
this.i = this.data.indexOf('>', this.i); |
|||
this.start = this.i + 1; |
|||
if (this.i == -1) this.i = this.data.length; |
|||
else this.state = this.Text; |
|||
} |
|||
} |
|||
module.exports = MpHtmlParser; |
|||
@ -0,0 +1,98 @@ |
|||
/* 配置文件 */ |
|||
// #ifndef H5
|
|||
const canIUse = wx.canIUse('editor'); // 高基础库标识，用于兼容
|
|||
// #endif
|
|||
module.exports = { |
|||
// 出错占位图
|
|||
errorImg: null, |
|||
// 过滤器函数
|
|||
filter: null, |
|||
// 代码高亮函数
|
|||
highlight: null, |
|||
// 文本处理函数
|
|||
onText: null, |
|||
// 实体编码列表
|
|||
entities: { |
|||
quot: '"', |
|||
apos: "'", |
|||
semi: ';', |
|||
nbsp: '\xA0', |
|||
ensp: '\u2002', |
|||
emsp: '\u2003', |
|||
ndash: '–', |
|||
mdash: '—', |
|||
middot: '·', |
|||
lsquo: '‘', |
|||
rsquo: '’', |
|||
ldquo: '“', |
|||
rdquo: '”', |
|||
bull: '•', |
|||
hellip: '…' |
|||
}, |
|||
blankChar: makeMap(' ,\xA0,\t,\r,\n,\f'), |
|||
// 块级标签，将被转为 div
|
|||
blockTags: makeMap('address,article,aside,body,caption,center,cite,footer,header,html,nav,section' + ( |
|||
// #ifndef H5
|
|||
canIUse ? '' : |
|||
// #endif
|
|||
',pre')), |
|||
// 将被移除的标签
|
|||
ignoreTags: makeMap( |
|||
'area,base,canvas,frame,input,link,map,meta,param,script,source,style,svg,textarea,title,track,wbr' |
|||
// #ifndef H5
|
|||
+ (canIUse ? ',rp' : '') |
|||
// #endif
|
|||
// #ifndef APP-PLUS
|
|||
+ ',iframe' |
|||
// #endif
|
|||
), |
|||
// 只能被 rich-text 显示的标签
|
|||
richOnlyTags: makeMap('a,colgroup,fieldset,legend,picture,table,navigator' |
|||
// #ifndef H5
|
|||
+ (canIUse ? ',bdi,bdo,caption,rt,ruby' : '') |
|||
// #endif
|
|||
), |
|||
// 自闭合的标签
|
|||
selfClosingTags: makeMap( |
|||
'area,base,br,col,circle,ellipse,embed,frame,hr,img,input,line,link,meta,param,path,polygon,rect,source,track,use,wbr' |
|||
), |
|||
// 信任的属性
|
|||
trustAttrs: makeMap( |
|||
'align,allowfullscreen,alt,app-id,author,autoplay,autostart,border,cellpadding,cellspacing,class,color,colspan,controls,data-src,dir,face,height,href,id,ignore,loop,media,muted,name,path,poster,rowspan,size,span,src,start,style,type,unit-id,width,xmlns' |
|||
), |
|||
// bool 型的属性
|
|||
boolAttrs: makeMap('allowfullscreen,autoplay,autostart,controls,ignore,loop,muted'), |
|||
// 信任的标签
|
|||
trustTags: makeMap( |
|||
'a,abbr,ad,audio,b,blockquote,br,code,col,colgroup,dd,del,dl,dt,div,em,fieldset,h1,h2,h3,h4,h5,h6,hr,i,img,ins,label,legend,li,ol,p,q,source,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,title,ul,video' |
|||
// #ifndef H5
|
|||
+ (canIUse ? ',bdi,bdo,caption,pre,rt,ruby' : '') |
|||
// #endif
|
|||
// #ifdef APP-PLUS
|
|||
+ ',embed,iframe' |
|||
// #endif
|
|||
), |
|||
// 默认的标签样式
|
|||
userAgentStyles: { |
|||
address: 'font-style:italic', |
|||
big: 'display:inline;font-size:1.2em', |
|||
blockquote: 'background-color:#f6f6f6;border-left:3px solid #dbdbdb;color:#6c6c6c;padding:5px 0 5px 10px', |
|||
caption: 'display:table-caption;text-align:center', |
|||
center: 'text-align:center', |
|||
cite: 'font-style:italic', |
|||
dd: 'margin-left:40px', |
|||
mark: 'background-color:yellow', |
|||
pre: 'font-family:monospace;white-space:pre;overflow:scroll', |
|||
s: 'text-decoration:line-through', |
|||
small: 'display:inline;font-size:0.8em', |
|||
u: 'text-decoration:underline' |
|||
} |
|||
} |
|||
|
|||
function makeMap(str) { |
|||
var map = Object.create(null), |
|||
list = str.split(','); |
|||
for (var i = list.length; i--;) |
|||
map[list[i]] = true; |
|||
return map; |
|||
} |
|||
@ -0,0 +1,20 @@ |
|||
var inline = { |
|||
abbr: 1, |
|||
b: 1, |
|||
big: 1, |
|||
code: 1, |
|||
del: 1, |
|||
em: 1, |
|||
i: 1, |
|||
ins: 1, |
|||
label: 1, |
|||
q: 1, |
|||
small: 1, |
|||
span: 1, |
|||
strong: 1 |
|||
} |
|||
export default { |
|||
use: function(item) { |
|||
return !item.c && !inline[item.name] && (item.attrs.style || '').indexOf('display:inline') == -1 |
|||
} |
|||
} |
|||
@ -0,0 +1,526 @@ |
|||
<template> |
|||
<view class="interlayer"> |
|||
<block v-for="(n, i) in nodes" v-bind:key="i"> |
|||
<!--图片--> |
|||
<view v-if="n.name=='img'" :class="'_img '+n.attrs.class" :style="n.attrs.style" :data-attrs="n.attrs" @tap="imgtap"> |
|||
<rich-text :nodes="[{attrs:{src:loading&&controls[i]!=2?loading:(lazyLoad&&!controls[i]?placeholder:(controls[i]==3?errorImg:n.attrs.src)),alt:n.attrs.alt||'',width:n.attrs.width||'',style:'max-width:100%;display:block'+(n.attrs.height?';height:'+n.attrs.height:'')},name:'img'}]" /> |
|||
<image class="_image" :src="lazyLoad&&!controls[i]?placeholder:n.attrs.src" :lazy-load="lazyLoad" |
|||
:show-menu-by-longpress="!n.attrs.ignore" :data-i="i" :data-index="n.attrs.i" data-source="img" @load="loadImg" |
|||
@error="error" /> |
|||
</view> |
|||
<!--文本--> |
|||
<text v-else-if="n.type=='text'" decode>{{n.text}}</text> |
|||
<!--#ifndef MP-BAIDU--> |
|||
<text v-else-if="n.name=='br'">\n</text> |
|||
<!--#endif--> |
|||
<!--视频--> |
|||
<view v-else-if="(n.lazyLoad&&controls[i]==undefined&&!n.attrs.autoplay)||(n.name=='video'&&!loadVideo)" :id="n.attrs.id" :class="'_video '+(n.attrs.class||'')" |
|||
:style="n.attrs.style" :data-i="i" @tap="_loadVideo" /> |
|||
<video v-else-if="n.name=='video'" :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :autoplay="n.attrs.autoplay||n.lazyLoad" |
|||
:controls="n.attrs.controls" :loop="n.attrs.loop" :muted="n.attrs.muted" :poster="poster" :src="n.attrs.source[controls[i]||0]" |
|||
:unit-id="n.attrs['unit-id']" :data-id="n.attrs.id" :data-i="i" data-source="video" @error="error" @play="play" /> |
|||
<!--音频--> |
|||
<audio v-else-if="n.name=='audio'" :ref="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :author="n.attrs.author" |
|||
:autoplay="n.attrs.autoplay" :controls="n.attrs.controls" :loop="n.attrs.loop" :name="n.attrs.name" :poster="n.attrs.poster" |
|||
:src="n.attrs.source[controls[i]||0]" :data-i="i" :data-id="n.attrs.id" data-source="audio" |
|||
@error.native="error" @play.native="play" /> |
|||
<!--链接--> |
|||
<view v-else-if="n.name=='a'" :id="n.attrs.id" :class="'_a '+(n.attrs.class||'')" hover-class="_hover" :style="n.attrs.style" |
|||
:data-attrs="n.attrs" @tap="linkpress"> |
|||
<trees class="_span" :nodes="n.children" /> |
|||
</view> |
|||
<!--链接--> |
|||
<view v-else-if="n.name=='navigator'" :id="n.attrs.id" :class="'_a '+(n.attrs.class||'')" hover-class="_hover" :style="n.attrs.style" |
|||
:data-attrs="n.attrs" @tap="linkpress"> |
|||
<trees class="_span" :nodes="n.children" /> |
|||
</view> |
|||
<!--广告（按需打开注释）--> |
|||
<!--#ifndef H5 || MP-QQ || MP-TOUTIAO--> |
|||
<!--<ad v-else-if="n.name=='ad'" :class="n.attrs.class" :style="n.attrs.style" :unit-id="n.attrs['unit-id']" |
|||
data-from="ad" @error="error" />--> |
|||
<!--#endif--> |
|||
<!--#ifdef MP-BAIDU--> |
|||
<!--<ad v-else-if="n.name=='ad'" :class="n.attrs.class" :style="n.attrs.style" :appid="n.attrs.appid" |
|||
:apid="n.attrs.apid" :type="n.attrs.type" data-from="ad" @error="error" />--> |
|||
<!--#endif--> |
|||
<!--#ifdef APP-PLUS--> |
|||
<!--<ad v-else-if="n.name=='ad'" :class="n.attrs.class" :style="n.attrs.style" :adpid="n.attrs.adpid" |
|||
data-from="ad" @error="error" />--> |
|||
<!--#endif--> |
|||
<!--列表--> |
|||
<view v-else-if="n.name=='li'" :id="n.attrs.id" :class="n.attrs.class" :style="(n.attrs.style||'')+';display:flex'"> |
|||
<view v-if="n.type=='ol'" class="_ol-bef">{{n.num}}</view> |
|||
<view v-else class="_ul-bef"> |
|||
<view v-if="n.floor%3==0" class="_ul-p1">█</view> |
|||
<view v-else-if="n.floor%3==2" class="_ul-p2" /> |
|||
<view v-else class="_ul-p1" style="border-radius:50%">█</view> |
|||
</view> |
|||
<!--#ifdef MP-ALIPAY--> |
|||
<view class="_li"> |
|||
<trees :nodes="n.children" :lazyLoad="lazyLoad" :loading="loading" /> |
|||
</view> |
|||
<!--#endif--> |
|||
<!--#ifndef MP-ALIPAY--> |
|||
<trees class="_li" :nodes="n.children" :lazyLoad="lazyLoad" :loading="loading" /> |
|||
<!--#endif--> |
|||
</view> |
|||
<!--表格--> |
|||
<view v-else-if="n.name=='table'&&n.c" :id="n.attrs.id" :class="n.attrs.class" :style="(n.attrs.style||'')+';display:table'"> |
|||
<view v-for="(tbody, o) in n.children" v-bind:key="o" :class="tbody.attrs.class" :style="(tbody.attrs.style||'')+(tbody.name[0]=='t'?';display:table-'+(tbody.name=='tr'?'row':'row-group'):'')"> |
|||
<view v-for="(tr, p) in tbody.children" v-bind:key="p" :class="tr.attrs.class" :style="(tr.attrs.style||'')+(tr.name[0]=='t'?';display:table-'+(tr.name=='tr'?'row':'cell'):'')"> |
|||
<trees v-if="tr.name=='td'" :nodes="tr.children" /> |
|||
<block v-else> |
|||
<!--#ifdef MP-ALIPAY--> |
|||
<view v-for="(td, q) in tr.children" v-bind:key="q" :class="td.attrs.class" :style="(td.attrs.style||'')+(td.name[0]=='t'?';display:table-'+(td.name=='tr'?'row':'cell'):'')"> |
|||
<trees :nodes="td.children" /> |
|||
</view> |
|||
<!--#endif--> |
|||
<!--#ifndef MP-ALIPAY--> |
|||
<trees v-for="(td, q) in tr.children" v-bind:key="q" :class="td.attrs.class" :style="(td.attrs.style||'')+(td.name[0]=='t'?';display:table-'+(td.name=='tr'?'row':'cell'):'')" |
|||
:nodes="td.children" /> |
|||
<!--#endif--> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!--#ifdef APP-PLUS--> |
|||
<iframe v-else-if="n.name=='iframe'" :style="n.attrs.style" :allowfullscreen="n.attrs.allowfullscreen" :frameborder="n.attrs.frameborder" |
|||
:width="n.attrs.width" :height="n.attrs.height" :src="n.attrs.src" /> |
|||
<embed v-else-if="n.name=='embed'" :style="n.attrs.style" :width="n.attrs.width" :height="n.attrs.height" :src="n.attrs.src" /> |
|||
<!--#endif--> |
|||
<!--富文本--> |
|||
<!--#ifndef MP-BAIDU || MP-TOUTIAO--> |
|||
<rich-text v-else-if="handler.use(n)" :id="n.attrs.id" :class="'_p __'+n.name" :nodes="[n]" /> |
|||
<!--#endif--> |
|||
<!--#ifdef MP-BAIDU || MP-TOUTIAO--> |
|||
<rich-text v-else-if="!n.c" :id="n.attrs.id" :nodes="[n]" /> |
|||
<!--#endif--> |
|||
<!--#ifdef MP-ALIPAY--> |
|||
<view v-else :id="n.attrs.id" :class="'_'+n.name+' '+(n.attrs.class||'')" :style="n.attrs.style"> |
|||
<trees :nodes="n.children" :lazyLoad="lazyLoad" :loading="loading" /> |
|||
</view> |
|||
<!--#endif--> |
|||
<!--#ifndef MP-ALIPAY--> |
|||
<trees v-else :class="(n.attrs.id||'')+' _'+n.name+' '+(n.attrs.class||'')" :style="n.attrs.style" :nodes="n.children" |
|||
:lazyLoad="lazyLoad" :loading="loading" /> |
|||
<!--#endif--> |
|||
</block> |
|||
</view> |
|||
</template> |
|||
<script module="handler" lang="wxs" src="./handler.wxs"></script> |
|||
<script module="handler" lang="sjs" src="./handler.sjs"></script> |
|||
<script> |
|||
global.Parser = {}; |
|||
import trees from './trees' |
|||
const errorImg = require('../libs/config.js').errorImg; |
|||
export default { |
|||
components: { |
|||
trees |
|||
}, |
|||
name: 'trees', |
|||
data() { |
|||
return { |
|||
controls: [], |
|||
placeholder: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="225"/>', |
|||
errorImg, |
|||
loadVideo: |
|||
// #ifdef APP-PLUS |
|||
false, |
|||
// #endif |
|||
// #ifndef APP-PLUS |
|||
true, |
|||
// #endif |
|||
poster:'' |
|||
} |
|||
}, |
|||
props: { |
|||
nodes: Array, |
|||
lazyLoad: Boolean, |
|||
loading: String |
|||
}, |
|||
mounted() { |
|||
this.poster = uni.getStorageSync('platformInfor').videoimg; |
|||
// 获取顶层组件 |
|||
var _top = this.$parent; |
|||
while (_top.$options.name != 'parser') { |
|||
if (_top.top) { |
|||
_top = _top.top; |
|||
break; |
|||
} |
|||
_top = _top.$parent; |
|||
} |
|||
this.top = _top; |
|||
|
|||
for (var j = this.nodes.length, item; item = this.nodes[--j];) { |
|||
if (item.c) continue; |
|||
if (item.name == 'img') |
|||
_top.imgList.setItem(item.attrs.i, item.attrs.src); |
|||
else if (item.name == 'video' || item.name == 'audio') { |
|||
var ctx; |
|||
if (item.name == 'video') |
|||
ctx = uni.createVideoContext(item.attrs.id |
|||
// #ifndef MP-BAIDU |
|||
, this |
|||
// #endif |
|||
); |
|||
else if (this.$refs[item.attrs.id]) |
|||
ctx = this.$refs[item.attrs.id][0]; |
|||
if (ctx) { |
|||
ctx.id = item.attrs.id; |
|||
_top.videoContexts.push(ctx); |
|||
} |
|||
} |
|||
// #ifdef MP-BAIDU || MP-ALIPAY || APP-PLUS |
|||
if (item.attrs && item.attrs.id) { |
|||
_top.anchors = _top.anchors || []; |
|||
_top.anchors.push({ |
|||
id: item.attrs.id, |
|||
node: this |
|||
}) |
|||
} |
|||
// #endif |
|||
} |
|||
// #ifdef APP-PLUS |
|||
// APP 上避免 video 错位需要延时渲染 |
|||
setTimeout(() => { |
|||
this.loadVideo = true; |
|||
}, 3000) |
|||
// #endif |
|||
}, |
|||
methods: { |
|||
play(e) { |
|||
var contexts = this.top.videoContexts; |
|||
if (contexts.length > 1 && this.top.autopause) |
|||
for (var i = contexts.length; i--;) |
|||
if (contexts[i].id != e.currentTarget.dataset.id) |
|||
contexts[i].pause(); |
|||
}, |
|||
imgtap(e) { |
|||
var attrs = e.currentTarget.dataset.attrs; |
|||
if (!attrs.ignore) { |
|||
var preview = true, |
|||
data = { |
|||
id: e.target.id, |
|||
src: attrs.src, |
|||
ignore: () => preview = false |
|||
}; |
|||
global.Parser.onImgtap && global.Parser.onImgtap(data); |
|||
this.top.$emit('imgtap', data); |
|||
if (preview) { |
|||
var urls = this.top.imgList, |
|||
current = urls[attrs.i] ? parseInt(attrs.i) : (urls = [attrs.src], 0); |
|||
// uni.previewImage({ |
|||
// current, |
|||
// urls |
|||
// }) |
|||
} |
|||
} |
|||
}, |
|||
loadImg(e) { |
|||
var i = e.currentTarget.dataset.i |
|||
if (this.lazyLoad && !this.controls[i]) |
|||
this.$set(this.controls, i, 1); |
|||
else if (this.loading && this.controls[i] != 2) |
|||
this.$set(this.controls, i, 2); |
|||
}, |
|||
linkpress(e) { |
|||
var jump = true, |
|||
attrs = e.currentTarget.dataset.attrs; |
|||
attrs.ignore = () => jump = false; |
|||
global.Parser.onLinkpress && global.Parser.onLinkpress(attrs); |
|||
this.top.$emit('linkpress', attrs); |
|||
if (jump) { |
|||
// #ifdef MP |
|||
if (attrs['app-id']) { |
|||
return uni.navigateToMiniProgram({ |
|||
appId: attrs['app-id'], |
|||
path: attrs.path |
|||
}) |
|||
} |
|||
// #endif |
|||
if (attrs.href) { |
|||
if (attrs.href[0] == '#') { |
|||
if (this.top.useAnchor) |
|||
this.top.navigateTo({ |
|||
id: attrs.href.substring(1) |
|||
}) |
|||
} else if (attrs.href.indexOf('http') == 0 || attrs.href.indexOf('//') == 0) { |
|||
// #ifdef APP-PLUS |
|||
plus.runtime.openWeb(attrs.href); |
|||
// #endif |
|||
// #ifndef APP-PLUS |
|||
uni.setClipboardData({ |
|||
data: attrs.href, |
|||
success: () => |
|||
uni.showToast({ |
|||
title: '链接已复制' |
|||
}) |
|||
}) |
|||
// #endif |
|||
} else |
|||
uni.navigateTo({ |
|||
url: attrs.href, |
|||
fail() { |
|||
uni.switchTab({ |
|||
url: attrs.href, |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}, |
|||
error(e) { |
|||
var target = e.currentTarget, |
|||
source = target.dataset.source, |
|||
i = target.dataset.i; |
|||
if (source == 'video' || source == 'audio') { |
|||
// 加载其他 source |
|||
var index = this.controls[i] ? this.controls[i].i + 1 : 1; |
|||
if (index < this.nodes[i].attrs.source.length) |
|||
this.$set(this.controls, i, index); |
|||
if (e.detail.__args__) |
|||
e.detail = e.detail.__args__[0]; |
|||
} else if (errorImg && source == 'img') { |
|||
this.top.imgList.setItem(target.dataset.index, errorImg); |
|||
this.$set(this.controls, i, 3); |
|||
} |
|||
this.top && this.top.$emit('error', { |
|||
source, |
|||
target, |
|||
errMsg: e.detail.errMsg |
|||
}); |
|||
}, |
|||
_loadVideo(e) { |
|||
this.$set(this.controls, e.target.dataset.i, 0); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
/* 在这里引入自定义样式 */ |
|||
|
|||
/* 链接和图片效果 */ |
|||
._a { |
|||
display: inline; |
|||
padding: 1.5px 0 1.5px 0; |
|||
color: #366092; |
|||
word-break: break-all; |
|||
} |
|||
|
|||
._hover { |
|||
text-decoration: underline; |
|||
opacity: 0.7; |
|||
} |
|||
|
|||
._img { |
|||
position: relative; |
|||
display: inline-block; |
|||
max-width: 100%; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
image{ |
|||
max-width: 750upx!important; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
img{ |
|||
max-width: 750upx!important; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
/* #ifndef H5 */ |
|||
:host { |
|||
display: inline; |
|||
} |
|||
|
|||
/* #endif */ |
|||
|
|||
/* #ifdef MP */ |
|||
.interlayer { |
|||
display: inherit; |
|||
flex-direction: inherit; |
|||
flex-wrap: inherit; |
|||
align-content: inherit; |
|||
align-items: inherit; |
|||
justify-content: inherit; |
|||
width: 100%; |
|||
white-space: inherit; |
|||
} |
|||
|
|||
/* #endif */ |
|||
|
|||
._b, |
|||
._strong { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
._blockquote, |
|||
._div, |
|||
._p, |
|||
._ol, |
|||
._ul, |
|||
._li { |
|||
display: block; |
|||
} |
|||
|
|||
._code { |
|||
font-family: monospace; |
|||
} |
|||
|
|||
._del { |
|||
text-decoration: line-through; |
|||
} |
|||
|
|||
._em, |
|||
._i { |
|||
font-style: italic; |
|||
} |
|||
|
|||
._h1 { |
|||
font-size: 2em; |
|||
} |
|||
|
|||
._h2 { |
|||
font-size: 1.5em; |
|||
} |
|||
|
|||
._h3 { |
|||
font-size: 1.17em; |
|||
} |
|||
|
|||
._h5 { |
|||
font-size: 0.83em; |
|||
} |
|||
|
|||
._h6 { |
|||
font-size: 0.67em; |
|||
} |
|||
|
|||
._h1, |
|||
._h2, |
|||
._h3, |
|||
._h4, |
|||
._h5, |
|||
._h6 { |
|||
display: block; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
._image { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
opacity: 1; |
|||
} |
|||
|
|||
._ins { |
|||
text-decoration: underline; |
|||
} |
|||
|
|||
._li { |
|||
flex: 1; |
|||
width: 0; |
|||
} |
|||
|
|||
._ol-bef { |
|||
width: 36px; |
|||
margin-right: 5px; |
|||
text-align: right; |
|||
} |
|||
|
|||
._ul-bef { |
|||
margin: 0 12px 0 23px; |
|||
line-height: normal; |
|||
} |
|||
|
|||
._ol-bef, |
|||
._ul_bef { |
|||
flex: none; |
|||
user-select: none; |
|||
} |
|||
|
|||
._ul-p1 { |
|||
display: inline-block; |
|||
width: 0.3em; |
|||
height: 0.3em; |
|||
overflow: hidden; |
|||
line-height: 0.3em; |
|||
} |
|||
|
|||
._ul-p2 { |
|||
display: inline-block; |
|||
width: 0.23em; |
|||
height: 0.23em; |
|||
border: 0.05em solid black; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
._q::before { |
|||
content: '"'; |
|||
} |
|||
|
|||
._q::after { |
|||
content: '"'; |
|||
} |
|||
|
|||
._sub { |
|||
font-size: smaller; |
|||
vertical-align: sub; |
|||
} |
|||
|
|||
._sup { |
|||
font-size: smaller; |
|||
vertical-align: super; |
|||
} |
|||
|
|||
/* #ifdef MP-ALIPAY || APP-PLUS */ |
|||
._abbr, |
|||
._b, |
|||
._code, |
|||
._del, |
|||
._em, |
|||
._i, |
|||
._ins, |
|||
._label, |
|||
._q, |
|||
._span, |
|||
._strong, |
|||
._sub, |
|||
._sup { |
|||
display: inline; |
|||
} |
|||
|
|||
/* #endif */ |
|||
|
|||
/* #ifndef H5 || MP-QQ */ |
|||
.__bdo, |
|||
.__bdi, |
|||
.__ruby, |
|||
.__rt { |
|||
display: inline-block; |
|||
} |
|||
|
|||
/* #endif */ |
|||
._video { |
|||
position: relative; |
|||
display: inline-block; |
|||
width: 300px; |
|||
height: 225px; |
|||
background-color: black; |
|||
} |
|||
|
|||
._video::after { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
margin: -15px 0 0 -15px; |
|||
content: ''; |
|||
border-color: transparent transparent transparent white; |
|||
border-style: solid; |
|||
border-width: 15px 0 15px 30px; |
|||
} |
|||
</style> |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,93 @@ |
|||
import { getColumns, isObject, isFunction } from '../utils' |
|||
export const commonMixin = { |
|||
data () { |
|||
return { |
|||
isConfirmChange: false, |
|||
indicatorStyle: `height: 34px`, |
|||
pressTimeout: null |
|||
} |
|||
}, |
|||
created () { |
|||
this.init('init') |
|||
}, |
|||
methods: { |
|||
init (changeType) { |
|||
if (this.list && this.list.length) { |
|||
const column = getColumns({ |
|||
value: this.value, |
|||
list: this.list, |
|||
mode: this.mode, |
|||
props: this.props, |
|||
level: this.level |
|||
}) |
|||
const { columns, value, item, index } = column |
|||
this.selectValue = value |
|||
this.selectItem = item |
|||
this.pickerColumns = columns |
|||
this.pickerValue = index |
|||
this.$emit('change', { |
|||
value: this.selectValue, |
|||
item: this.selectItem, |
|||
index: this.pickerValue, |
|||
change: changeType |
|||
}) |
|||
} |
|||
}, |
|||
touchstart (e) { |
|||
if (!this.pressEnable) return |
|||
clearTimeout(this.pressTimeout) |
|||
this.pressTimeout = setTimeout(() => { |
|||
let item = {} |
|||
let toastTitle = '' |
|||
// #ifdef APP-NVUE
|
|||
item = e.target.dataset.item |
|||
// #endif
|
|||
|
|||
// #ifdef H5
|
|||
item = JSON.parse(e.currentTarget.dataset.item) |
|||
// #endif
|
|||
|
|||
// #ifndef APP-NVUE || H5
|
|||
item = e.currentTarget.dataset.item |
|||
// #endif
|
|||
|
|||
// #ifdef APP-PLUS || H5
|
|||
toastTitle = this.getLabel(item) |
|||
// #endif
|
|||
|
|||
// #ifndef APP-PLUS || H5
|
|||
toastTitle = item[this.props.label] || item |
|||
// #endif
|
|||
uni.showToast({ |
|||
title: toastTitle, |
|||
icon: 'none' |
|||
}) |
|||
}, this.pressTime) |
|||
}, |
|||
touchmove () { |
|||
if (!this.pressEnable) return |
|||
clearTimeout(this.pressTimeout) |
|||
}, |
|||
touchend () { |
|||
if (!this.pressEnable) return |
|||
clearTimeout(this.pressTimeout) |
|||
}, |
|||
getLabel (item, rowIndex, columnIndex) { |
|||
if (this.formatter && isFunction(this.formatter)) { |
|||
return this.formatter({ item, rowIndex, columnIndex }) |
|||
} else { |
|||
return item[this.props.label] || item |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
value () { |
|||
if (!this.isConfirmChange) { |
|||
this.init('value') |
|||
} |
|||
}, |
|||
list () { |
|||
this.init('list') |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,135 @@ |
|||
<template> |
|||
<view class="lb-multi-selector lb-picker-item" |
|||
:style="{ height: height }"> |
|||
<picker-view :value="pickerValue" |
|||
:indicator-style="indicatorStyle" |
|||
:style="{ height: height }" |
|||
@change="handleChange"> |
|||
<picker-view-column v-for="(column, index) in pickerColumns" |
|||
:key="index"> |
|||
<!-- #ifdef H5 --> |
|||
<view v-for="(item, i) in column || []" |
|||
:class="[ |
|||
'lb-picker-column', |
|||
item[props.value] === selectValue[index] |
|||
? 'lb-picker-column-active' |
|||
: '' |
|||
]" |
|||
:key="i" |
|||
:data-item="pressEnable ? JSON.stringify(item) : ''" |
|||
@touchstart="touchstart" |
|||
@touchmove="touchmove" |
|||
@touchend="touchend"> |
|||
<!-- #endif --> |
|||
<!-- #ifndef H5 --> |
|||
<view v-for="(item, i) in column || []" |
|||
:class="[ |
|||
'lb-picker-column', |
|||
item[props.value] === selectValue[index] |
|||
? 'lb-picker-column-active' |
|||
: '' |
|||
]" |
|||
:key="i" |
|||
:data-item="item" |
|||
@touchstart="touchstart" |
|||
@touchmove="touchmove" |
|||
@touchend="touchend"> |
|||
<!-- #endif --> |
|||
<!-- #ifdef APP-PLUS || H5 --> |
|||
<text :class="[ |
|||
'lb-picker-column-label', |
|||
`lb-picker-column-label-${align}` |
|||
]" |
|||
:style="[ |
|||
item[props.value] === selectValue[index] |
|||
? activeColumnStyle |
|||
: columnStyle |
|||
]">{{ getLabel(item, i, index) }}</text> |
|||
<!-- #endif --> |
|||
|
|||
<!-- #ifndef APP-PLUS || H5 --> |
|||
<text :class="[ |
|||
'lb-picker-column-label', |
|||
`lb-picker-column-label-${align}` |
|||
]">{{ item[props.label] || item }}</text> |
|||
<!-- #endif --> |
|||
</view> |
|||
</picker-view-column> |
|||
</picker-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { commonMixin } from '../mixins' |
|||
export default { |
|||
props: { |
|||
value: Array, |
|||
list: Array, |
|||
mode: String, |
|||
props: Object, |
|||
level: Number, |
|||
visible: Boolean, |
|||
height: String, |
|||
columnStyle: Object, |
|||
activeColumnStyle: Object, |
|||
align: String, |
|||
pressEnable: Boolean, |
|||
pressTime: Number, |
|||
formatter: Function |
|||
}, |
|||
mixins: [commonMixin], |
|||
data () { |
|||
return { |
|||
pickerValue: [], |
|||
pickerColumns: [], |
|||
selectValue: [], |
|||
selectItem: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
handleChange (item) { |
|||
const pickerValue = item.detail.value |
|||
const columnIndex = pickerValue.findIndex( |
|||
(item, i) => item !== this.pickerValue[i] |
|||
) |
|||
const valueIndex = pickerValue[columnIndex] |
|||
this.setPickerChange(pickerValue, valueIndex, columnIndex) |
|||
}, |
|||
setPickerChange (pickerValue, valueIndex, columnIndex) { |
|||
for (let i = 0; i < this.level; i++) { |
|||
if (i > columnIndex) { |
|||
pickerValue[i] = 0 |
|||
const column = |
|||
this.pickerColumns[i - 1][valueIndex] || |
|||
this.pickerColumns[i - 1][0] |
|||
this.$set(this.pickerColumns, i, column[this.props.children] || []) |
|||
valueIndex = 0 |
|||
} |
|||
this.$set(this.pickerValue, i, pickerValue[i]) |
|||
const selectItem = this.pickerColumns[i][pickerValue[i]] |
|||
if (selectItem) { |
|||
this.selectItem[i] = selectItem |
|||
this.selectValue[i] = selectItem[this.props.value] |
|||
} else { |
|||
const spliceNum = this.level - i |
|||
this.pickerValue.splice(i, spliceNum) |
|||
this.selectValue.splice(i, spliceNum) |
|||
this.selectItem.splice(i, spliceNum) |
|||
this.pickerColumns.splice(i, spliceNum) |
|||
break |
|||
} |
|||
} |
|||
this.$emit('change', { |
|||
value: this.selectValue, |
|||
item: this.selectItem, |
|||
index: this.pickerValue, |
|||
change: 'scroll' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../style/picker-item.scss"; |
|||
</style> |
|||
@ -0,0 +1,113 @@ |
|||
<template> |
|||
<view class="lb-selector-picker lb-picker-item" |
|||
:style="{ height: height }"> |
|||
<picker-view :value="pickerValue" |
|||
:style="{ height: height }" |
|||
:indicator-style="indicatorStyle" |
|||
@change="handleChange"> |
|||
<picker-view-column> |
|||
<!-- #ifdef H5 --> |
|||
<view v-for="(item, i) in list" |
|||
:class="[ |
|||
'lb-picker-column', |
|||
(item[props.value] || item) === selectValue |
|||
? 'lb-picker-column-active' |
|||
: '' |
|||
]" |
|||
:key="i" |
|||
:data-item="pressEnable ? JSON.stringify(item) : ''" |
|||
@touchstart="touchstart" |
|||
@touchmove="touchmove" |
|||
@touchend="touchend"> |
|||
<!-- #endif --> |
|||
<!-- #ifndef H5 --> |
|||
<view v-for="(item, i) in list" |
|||
:class="[ |
|||
'lb-picker-column', |
|||
(item[props.value] || item) === selectValue |
|||
? 'lb-picker-column-active' |
|||
: '' |
|||
]" |
|||
:key="i" |
|||
:data-item="item" |
|||
@touchstart="touchstart" |
|||
@touchmove="touchmove" |
|||
@touchend="touchend"> |
|||
<!-- #endif --> |
|||
<!-- #ifdef APP-PLUS || H5 --> |
|||
<text :class="[ |
|||
'lb-picker-column-label', |
|||
`lb-picker-column-label-${align}` |
|||
]" |
|||
:style="[ |
|||
(item[props.value] || item) === selectValue |
|||
? activeColumnStyle |
|||
: columnStyle |
|||
]">{{ getLabel(item, i, 0) }}</text> |
|||
<!-- #endif --> |
|||
|
|||
<!-- #ifndef APP-PLUS || H5 --> |
|||
<text :class="[ |
|||
'lb-picker-column-label', |
|||
`lb-picker-column-label-${align}` |
|||
]">{{ item[props.label] || item }}</text> |
|||
<!-- #endif --> |
|||
</view> |
|||
</picker-view-column> |
|||
</picker-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { isObject } from '../utils' |
|||
import { commonMixin } from '../mixins' |
|||
export default { |
|||
props: { |
|||
value: [String, Number], |
|||
list: Array, |
|||
mode: String, |
|||
props: Object, |
|||
visible: Boolean, |
|||
height: String, |
|||
columnStyle: Object, |
|||
activeColumnStyle: Object, |
|||
align: String, |
|||
pressEnable: Boolean, |
|||
pressTime: Number, |
|||
formatter: Function |
|||
}, |
|||
mixins: [commonMixin], |
|||
data () { |
|||
return { |
|||
pickerValue: [], |
|||
selectValue: '', |
|||
selectItem: null |
|||
} |
|||
}, |
|||
computed: { |
|||
isH5 () { |
|||
return false |
|||
} |
|||
}, |
|||
methods: { |
|||
handleChange (item) { |
|||
const index = item.detail.value[0] || 0 |
|||
this.selectItem = this.list[index] |
|||
this.selectValue = isObject(this.selectItem) |
|||
? this.selectItem[this.props.value] |
|||
: this.selectItem |
|||
this.pickerValue = item.detail.value |
|||
this.$emit('change', { |
|||
value: this.selectValue, |
|||
item: this.selectItem, |
|||
index: index, |
|||
change: 'scroll' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../style/picker-item.scss"; |
|||
</style> |
|||
@ -0,0 +1,116 @@ |
|||
<template> |
|||
<view class="lb-selector-picker lb-picker-item" |
|||
:style="{ height: height }"> |
|||
<picker-view :value="pickerValue" |
|||
:indicator-style="indicatorStyle" |
|||
:style="{ height: height }" |
|||
@change="handleChange"> |
|||
<picker-view-column v-for="(column, index) in pickerColumns" |
|||
:key="index"> |
|||
<!-- #ifdef H5 --> |
|||
<view v-for="(item, i) in column || []" |
|||
:class="[ |
|||
'lb-picker-column', |
|||
(item[props.value] || item) === selectValue[index] |
|||
? 'lb-picker-column-active' |
|||
: '' |
|||
]" |
|||
:key="i" |
|||
:data-item="pressEnable ? JSON.stringify(item) : ''" |
|||
@touchstart="touchstart" |
|||
@touchmove="touchmove" |
|||
@touchend="touchend"> |
|||
<!-- #endif --> |
|||
<!-- #ifndef H5 --> |
|||
<view v-for="(item, i) in column || []" |
|||
:class="[ |
|||
'lb-picker-column', |
|||
(item[props.value] || item) === selectValue[index] |
|||
? 'lb-picker-column-active' |
|||
: '' |
|||
]" |
|||
:key="i" |
|||
:data-item="item" |
|||
@touchstart="touchstart" |
|||
@touchmove="touchmove" |
|||
@touchend="touchend"> |
|||
<!-- #endif --> |
|||
<!-- #ifdef APP-PLUS || H5 --> |
|||
<text :class="[ |
|||
'lb-picker-column-label', |
|||
`lb-picker-column-label-${align}` |
|||
]" |
|||
:style="[ |
|||
(item[props.value] || item) === selectValue[index] |
|||
? activeColumnStyle |
|||
: columnStyle |
|||
]">{{ getLabel(item, i, index) }}</text> |
|||
<!-- #endif --> |
|||
|
|||
<!-- #ifndef APP-PLUS || H5 --> |
|||
<text :class="[ |
|||
'lb-picker-column-label', |
|||
`lb-picker-column-label-${align}` |
|||
]">{{ item[props.label] || item }}</text> |
|||
<!-- #endif --> |
|||
</view> |
|||
</picker-view-column> |
|||
</picker-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { isObject } from '../utils' |
|||
import { commonMixin } from '../mixins' |
|||
export default { |
|||
props: { |
|||
value: Array, |
|||
list: Array, |
|||
mode: String, |
|||
props: Object, |
|||
visible: Boolean, |
|||
height: String, |
|||
columnStyle: Object, |
|||
activeColumnStyle: Object, |
|||
align: String, |
|||
pressEnable: Boolean, |
|||
pressTime: Number, |
|||
formatter: Function |
|||
}, |
|||
mixins: [commonMixin], |
|||
data () { |
|||
return { |
|||
pickerValue: [], |
|||
pickerColumns: [], |
|||
selectValue: [], |
|||
selectItem: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
handleChange (item) { |
|||
const pickerValue = item.detail.value |
|||
const columnIndex = pickerValue.findIndex((item, i) => item !== this.pickerValue[i]) |
|||
if (columnIndex > -1) { |
|||
const valueIndex = pickerValue[columnIndex] |
|||
const columnItem = this.list[columnIndex][valueIndex] |
|||
const valueItem = isObject(columnItem) |
|||
? columnItem[this.props.value] |
|||
: columnItem |
|||
this.pickerValue = pickerValue |
|||
this.$set(this.selectValue, columnIndex, valueItem) |
|||
this.$set(this.selectItem, columnIndex, columnItem) |
|||
this.$emit('change', { |
|||
value: this.selectValue, |
|||
item: this.selectItem, |
|||
index: this.pickerValue, |
|||
change: 'scroll' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../style/picker-item.scss"; |
|||
</style> |
|||
@ -0,0 +1,40 @@ |
|||
.lb-picker-column { |
|||
height: 34px; |
|||
padding: 0 10px; |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
box-sizing: border-box; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
/* #endif */ |
|||
flex-direction: row; |
|||
align-items: center; |
|||
} |
|||
|
|||
.lb-picker-column-label { |
|||
font-size: 16px; |
|||
text-align: center; |
|||
flex: 1; |
|||
/* #ifdef APP-NVUE */ |
|||
lines: 1; |
|||
/* #endif */ |
|||
text-overflow: ellipsis; |
|||
transition-property: color; |
|||
transition-duration: 0.3s; |
|||
/* #ifndef APP-NVUE */ |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.lb-picker-column-label-left { |
|||
text-align: left; |
|||
} |
|||
|
|||
.lb-picker-column-label-center { |
|||
text-align: center; |
|||
} |
|||
|
|||
.lb-picker-column-label-right { |
|||
text-align: right; |
|||
} |
|||
@ -0,0 +1,176 @@ |
|||
.lb-picker { |
|||
position: relative; |
|||
} |
|||
|
|||
.lb-picker-mask { |
|||
background-color: rgba(0, 0, 0, 0.0); |
|||
position: fixed; |
|||
top: 0; |
|||
right: 0; |
|||
left: 0; |
|||
bottom: 0; |
|||
} |
|||
|
|||
.lb-picker-mask-animation { |
|||
transition-property: background-color; |
|||
transition-duration: 0.3s; |
|||
} |
|||
|
|||
.lb-picker-container { |
|||
position: relative; |
|||
} |
|||
|
|||
.lb-picker-container-fixed { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
transform: translateY(100%); |
|||
/* #ifndef APP-NVUE */ |
|||
overflow: hidden; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.lb-picker-container-animation { |
|||
transition-property: transform; |
|||
transition-duration: 0.3s; |
|||
} |
|||
|
|||
.lb-picker-container-show { |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
.lb-picker-header { |
|||
position: relative; |
|||
background-color: #fff; |
|||
/* #ifdef APP-NVUE */ |
|||
border-bottom-width: 1px; |
|||
border-bottom-style: solid; |
|||
border-bottom-color: #e5e5e5; |
|||
border-top-width: 1px; |
|||
border-top-style: solid; |
|||
border-top-color: #e5e5e5; |
|||
/* #endif */ |
|||
/* #ifndef APP-NVUE */ |
|||
box-sizing: border-box; |
|||
/* #endif */ |
|||
|
|||
} |
|||
|
|||
/* #ifndef APP-NVUE */ |
|||
.lb-picker-header::before { |
|||
content: ""; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
height: 1px; |
|||
clear: both; |
|||
border-bottom: 1px solid #e5e5e5; |
|||
color: #e5e5e5; |
|||
transform-origin: 0 100%; |
|||
transform: scaleY(0.5); |
|||
} |
|||
|
|||
.lb-picker-header::after { |
|||
content: ""; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
right: 0; |
|||
height: 1px; |
|||
clear: both; |
|||
border-bottom: 1px solid #e5e5e5; |
|||
color: #e5e5e5; |
|||
transform-origin: 0 100%; |
|||
transform: scaleY(0.5); |
|||
} |
|||
|
|||
/* #endif */ |
|||
|
|||
.lb-picker-header-actions { |
|||
height: 45px; |
|||
/* #ifndef APP-NVUE */ |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
/* #endif */ |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
flex-wrap: nowrap; |
|||
} |
|||
|
|||
.lb-picker-action { |
|||
padding-left: 10px; |
|||
padding-right: 10px; |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.lb-picker-action-cancel-text { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.lb-picker-action-confirm-text { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.lb-picker-content { |
|||
position: relative; |
|||
background-color: #fff; |
|||
} |
|||
|
|||
/* #ifndef APP-PLUS */ |
|||
.lb-picker-content-safe-buttom { |
|||
padding-bottom: 0; |
|||
padding-bottom: constant(safe-area-inset-bottom); |
|||
padding-bottom: env(safe-area-inset-bottom); |
|||
} |
|||
|
|||
/* #endif */ |
|||
|
|||
.lb-picker-content-main { |
|||
position: relative; |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.lb-picker-loading, |
|||
.lb-picker-empty { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.lb-picker-empty-text { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.lb-picker-loading-img { |
|||
width: 25px; |
|||
height: 25px; |
|||
/* #ifndef APP-NVUE */ |
|||
animation: rotating 2s linear infinite; |
|||
/* #endif */ |
|||
} |
|||
|
|||
/* #ifndef APP-NVUE */ |
|||
@keyframes rotating { |
|||
0% { |
|||
transform: rotate(0deg) |
|||
} |
|||
|
|||
100% { |
|||
transform: rotate(1turn) |
|||
} |
|||
} |
|||
|
|||
/* #endif */ |
|||
@ -0,0 +1,121 @@ |
|||
/** |
|||
* 判断是否是对象 |
|||
* |
|||
* @export |
|||
* @param {*} val |
|||
* @returns true/false |
|||
*/ |
|||
export function isObject (val) { |
|||
return Object.prototype.toString.call(val) === '[object Object]' |
|||
} |
|||
|
|||
/** |
|||
* 判断是否是Function |
|||
* |
|||
* @export |
|||
* @param {*} val |
|||
* @returns true/false |
|||
*/ |
|||
export function isFunction (val) { |
|||
return Object.prototype.toString.call(val) === '[object Function]' |
|||
} |
|||
|
|||
/** |
|||
* 根据value获取columns信息 |
|||
* |
|||
* @export |
|||
* @param {*} { value, list, mode, props, level } |
|||
* @param {number} [type=2] 查询不到value数据返回数据类型 1空值null 2默认第一个选项 |
|||
* @returns |
|||
*/ |
|||
export function getColumns ({ value, list, mode, props, level }, type = 2) { |
|||
let pickerValue = [] |
|||
let pickerColumns = [] |
|||
let selectValue = [] |
|||
let selectItem = [] |
|||
let columnsInfo = null |
|||
switch (mode) { |
|||
case 'selector': |
|||
let index = list.findIndex(item => { |
|||
return isObject(item) ? item[props.value] === value : item === value |
|||
}) |
|||
if (index === -1 && type === 1) { |
|||
columnsInfo = null |
|||
} else { |
|||
index = index > -1 ? index : 0 |
|||
selectItem = list[index] |
|||
selectValue = isObject(selectItem) |
|||
? selectItem[props.value] |
|||
: selectItem |
|||
pickerColumns = list |
|||
pickerValue = [index] |
|||
columnsInfo = { |
|||
index: pickerValue, |
|||
value: selectValue, |
|||
item: selectItem, |
|||
columns: pickerColumns |
|||
} |
|||
} |
|||
break |
|||
case 'multiSelector': |
|||
const setPickerItems = (data = [], index = 0) => { |
|||
if (!data.length) return |
|||
const defaultValue = value || [] |
|||
if (index < level) { |
|||
const value = defaultValue[index] || '' |
|||
let i = data.findIndex(item => item[props.value] === value) |
|||
if (i === -1 && type === 1) return |
|||
i = i > -1 ? i : 0 |
|||
pickerValue[index] = i |
|||
pickerColumns[index] = data |
|||
if (data[i]) { |
|||
selectValue[index] = data[i][props.value] |
|||
selectItem[index] = data[i] |
|||
setPickerItems(data[i][props.children] || [], index + 1) |
|||
} |
|||
} |
|||
} |
|||
setPickerItems(list) |
|||
if (!selectValue.length && type === 1) { |
|||
columnsInfo = null |
|||
} else { |
|||
columnsInfo = { |
|||
index: pickerValue, |
|||
value: selectValue, |
|||
item: selectItem, |
|||
columns: pickerColumns |
|||
} |
|||
} |
|||
break |
|||
case 'unlinkedSelector': |
|||
list.forEach((item, i) => { |
|||
let index = item.findIndex(item => { |
|||
return isObject(item) |
|||
? item[props.value] === value[i] |
|||
: item === value[i] |
|||
}) |
|||
if (index === -1 && type === 1) return |
|||
index = index > -1 ? index : 0 |
|||
const columnItem = list[i][index] |
|||
const valueItem = isObject(columnItem) |
|||
? columnItem[props.value] |
|||
: columnItem |
|||
pickerValue[i] = index |
|||
selectValue[i] = valueItem |
|||
selectItem[i] = columnItem |
|||
}) |
|||
pickerColumns = list |
|||
if (!selectValue.length && type === 1) { |
|||
columnsInfo = null |
|||
} else { |
|||
columnsInfo = { |
|||
index: pickerValue, |
|||
value: selectValue, |
|||
item: selectItem, |
|||
columns: pickerColumns |
|||
} |
|||
} |
|||
break |
|||
} |
|||
return columnsInfo |
|||
} |
|||
@ -0,0 +1,67 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<goods-style goodsStyleType="rush2" :goodslistData="goodslist"></goods-style> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from '@/common/js/app.js' |
|||
import goodsStyle from '@/components/page/pageComponents/goodsStyle.vue' |
|||
export default { |
|||
data() { |
|||
return { |
|||
goodslist: [] |
|||
} |
|||
}, |
|||
props: { |
|||
goods_type: { |
|||
type: String, |
|||
default: function() { |
|||
return "" |
|||
} |
|||
}, |
|||
goods_id: { |
|||
type: String, |
|||
default: function() { |
|||
return "" |
|||
} |
|||
} |
|||
}, |
|||
components:{ |
|||
goodsStyle |
|||
}, |
|||
mounted() { |
|||
this.getRecommendGoods() |
|||
}, |
|||
methods: { |
|||
getRecommendGoods() { |
|||
let _this = this; |
|||
App._post_form('&do=getRecommendGoods', { |
|||
type: _this.goods_type, |
|||
id: _this.goods_id |
|||
}, res => { |
|||
_this.setData({ |
|||
goodslist: res.data, |
|||
}); |
|||
this.$emit('recommendGoodNoOff',res.data); |
|||
}, false, () => {}) |
|||
}, |
|||
|
|||
navgateto(goods) { |
|||
let _this = this, |
|||
pages = getCurrentPages(), |
|||
currentPage = pages[pages.length - 1], |
|||
navType = currentPage.route === 'pages/subPages/goods/index' ? 'rediRect' : 'navigate'; |
|||
App.navigationTo({ |
|||
url: `pages/subPages/goods/index?goods_id=${goods['id']}&goodsType=${goods['type']}`, |
|||
navType: navType |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
|
|||
</style> |
|||
@ -0,0 +1,171 @@ |
|||
<template> |
|||
<view> |
|||
<!-- 视频组 --> |
|||
<view class="show-video" :style="{'height':videoHeight+'px'}"> |
|||
<block v-if="isVideoPlay"> |
|||
<video :id="itemId" class="video" style="width:100%;" :style="{'height':videoHeight+'px'}" objectFit="contain" :src="params.videolink" |
|||
:muted="muted" :poster="params.videocover" @play="showVideoStatus" @ended="showVideoStatus"> |
|||
<view class="video-muted flex-row" v-if="isVideoPlay" @click="videoMuted"> |
|||
<image class="video-muted-img" :src="imgfixUrls + 'diypage/notification_fill.png'" v-if="!muted"></image> |
|||
<image class="video-muted-img" :src="imgfixUrls + 'diypage/notification_forbid_fill.png'" v-if="muted"></image> |
|||
</view> |
|||
</video> |
|||
</block> |
|||
<block v-else> |
|||
<image :src="params.videocover" class="cover-poster" style="width:100%;" :style="{'height':videoHeight+'px'}" @load="imageLoad"></image> |
|||
<image class="video-play" :src="imgfixUrls + 'diypage/video_play.png'" @click="videoPlay"></image> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
let videoContext = null; |
|||
export default { |
|||
data() { |
|||
return { |
|||
isVideoPlay: false, |
|||
videoHeight: 240, |
|||
muted: false, |
|||
imgUrl:'' |
|||
}; |
|||
}, |
|||
props: { |
|||
itemIndex: Number, |
|||
itemStyle: Object, |
|||
params: Object, |
|||
itemId: String |
|||
}, |
|||
components: { |
|||
|
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
beforeCreate() { |
|||
|
|||
}, |
|||
onLoad(options) {}, |
|||
onShow() { |
|||
|
|||
}, |
|||
onReady() { |
|||
videoContext = uni.createVideoContext(this.itemId, this); |
|||
}, |
|||
mounted() { |
|||
this.imgUrl = this.imgfixUrl; |
|||
let _this = this, |
|||
params = _this.params, |
|||
itemStyle = _this.itemStyle, |
|||
scaleData = { |
|||
"1": 16 / 9, |
|||
"2": 4 / 3, |
|||
"3": 1 / 1, |
|||
} |
|||
if (params.videotype === "2") { |
|||
uni.getSystemInfo({ |
|||
success(res) { |
|||
let windowWidth = res.windowWidth, |
|||
scale = scaleData[itemStyle.display]; |
|||
console.log("videoHeight",windowWidth / scale) |
|||
_this.videoHeight = windowWidth / scale; |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
methods: { |
|||
imageLoad(e) { |
|||
let _this = this; |
|||
if (_this.params.videotype === "1" && _this.params.videocover) { |
|||
uni.getSystemInfo({ |
|||
success(res) { |
|||
let windowWidth = res.windowWidth, |
|||
imgDetail = e.detail, |
|||
imgScale = imgDetail.width / imgDetail.height; |
|||
_this.videoHeight = windowWidth / imgScale; |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
videoPlay(e) { |
|||
let that = this; |
|||
that.isVideoPlay = true; |
|||
//延时操作,防止视频组件获取失败 |
|||
setTimeout(() => { |
|||
console.log("video play"); |
|||
videoContext.play(); |
|||
}, 200); |
|||
}, |
|||
showVideoStatus(e) { |
|||
let moduleId = e.currentTarget.id, |
|||
playType = e.type, |
|||
isVideoPlay; |
|||
if (playType == "play") { |
|||
isVideoPlay = true; |
|||
} else { |
|||
isVideoPlay = false; |
|||
} |
|||
this.isVideoPlay = isVideoPlay; |
|||
}, |
|||
videoMuted(e) { |
|||
console.log("muted"); |
|||
this.muted = !this.muted; |
|||
}, |
|||
}, |
|||
watch: { |
|||
isVideoPlay(newValue, oldValue) { |
|||
videoContext = uni.createVideoContext(this.itemId, this); |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 视频组 */ |
|||
.show-video { |
|||
position: relative; |
|||
} |
|||
|
|||
.video { |
|||
position: relative; |
|||
height: 100%; |
|||
} |
|||
|
|||
.video-muted { |
|||
position: absolute; |
|||
top: 20upx; |
|||
right: 20upx; |
|||
border-radius: 60upx; |
|||
background: rgba(0, 0, 0, 0.6); |
|||
text-align: center; |
|||
padding: 10upx; |
|||
justify-content: center; |
|||
align-items: center; |
|||
z-index: 10; |
|||
} |
|||
|
|||
.cover-poster { |
|||
width: 100%; |
|||
position: relative; |
|||
z-index: 10; |
|||
background-repeat: no-repeat; |
|||
background-size: cover; |
|||
} |
|||
|
|||
.video-play { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
z-index: 30; |
|||
transform: translate(-50%, -50%); |
|||
width: 100upx; |
|||
height: 100upx; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.video-muted-img { |
|||
width: 40upx; |
|||
height: 40upx; |
|||
line-height: 40upx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,394 @@ |
|||
<template> |
|||
<view class="business-box"> |
|||
<view :class="is_pading?'businessCrard-list padding-box':'businessCrard-list'"> |
|||
<view class="creatCard-box b-f bor-radius-10upx dis-flex flex-y-center m-btm20" @click="creatCard" v-if="is_have===0 && is_Add"> |
|||
<view class="creatCard-bg m-right50" :style="{'background-image':'url('+imageRoot+'creatCard.png)'}"></view> |
|||
<view class="creatInfo"> |
|||
<view class="dis-flex flex-y-center m-btm20"> |
|||
<view class="iconfont icon-roundaddlight roundaddlight m-right20"></view> |
|||
<view class="roundaddlightText f-28">添加自己的名片</view> |
|||
</view> |
|||
<view class="f-24 col-9">您还没有自己的名片，请添加！</view> |
|||
</view> |
|||
</view> |
|||
<view class="businessCard-items b-f bor-radius-10upx m-btm20" v-for="(item,index) in cardList" :key="index" @click.stop="fnclick(item.id)"> |
|||
<view class="businessCard-left dis-flex" > |
|||
<view class="head-box p-r"> |
|||
<view class="head m-right30" :style="{'background-image':'url('+item.logo+')'}"></view> |
|||
|
|||
</view> |
|||
<view class="personInfo"> |
|||
<view class="personInfo-namebox dis-flex flex-y-center m-btm10"> |
|||
<view class="personInfo-name f-30 col-3">{{item.name}}</view> |
|||
<view class="stick f-24 col-f" v-if="item.top_is == '1'">顶</view> |
|||
<view class="personInfolabel-item col-f4 f-22" style="background-color: #FEF1F1;padding: 5upx 8upx;" v-if="!!item.position">{{item.position}}</view> |
|||
</view> |
|||
<view class="addressInfo m-btm10 dis-flex personInfolabel"> |
|||
<view class=" f-22" v-if="!!item.one_class_title">{{item.one_class_title}}</view> |
|||
<text style="padding: 0 10upx;font-size: 22upx;" v-if="!!item.two_class_title && !!item.one_class_title">|</text> |
|||
<view class=" f-22" v-if="!!item.two_class_title">{{item.two_class_title}}</view> |
|||
</view> |
|||
<view class="Cardbrief f-24 col-9 onelist-hidden m-btm10" v-if="!!item.oneCateName"> |
|||
<view class="dis-il-block" style="height: 35upx;line-height: 35upx;padding: 0 10upx;background-color: #FEF1F1;color: #FF4444;border-radius: 10upx;margin-right: 20upx;"> |
|||
{{item.oneCateName}} |
|||
</view> |
|||
<view class="dis-il-block" style="height: 35upx;line-height: 35upx;padding: 0 10upx;background-color: #FEF1F1;color: #FF4444;border-radius: 10upx;"> |
|||
{{item.twoCateName}} |
|||
</view> |
|||
</view> |
|||
<view class="addressInfo m-btm10 dis-flex"> |
|||
<view class="col-6 f-24">{{item.company || item.address}}</view> |
|||
<text style="padding: 0 10upx;font-size: 22upx;" v-if="!!item.distance && !!item.company">|</text> |
|||
<view class="col-6 f-24" v-if="item.distance">{{item.distance}}</view> |
|||
</view> |
|||
|
|||
<!-- <view class="Cardbrief f-24 col-9 onelist-hidden m-btm10" v-if="!!item.address"> |
|||
<view class="iconfont icon-location_light f-20 dis-il-block" style="font-size: 24upx;padding-right: 10upx;"></view>{{item.address}}|<view class="dis-il-block" v-if="item.distance">{{item.distance}}</view> |
|||
</view> --> |
|||
<view class="Cardbrief f-24 col-9 onelist-hidden m-btm10" v-if="!!item.desc"> |
|||
{{item.desc}} |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
<view class="card-icon-box dis-flex flex-y-center"> |
|||
<view class="dis-flex flex-y-center m-right40"> |
|||
<view class="iconfont icon-hot_light IconClass col-9 m-right10"></view> |
|||
<view class="f-24 col-9">{{item.pv}}</view> |
|||
</view> |
|||
<view class="dis-flex flex-y-center m-right40" v-if="item.collectNum"> |
|||
<view class="iconfont icon-shoucang1 IconClass col-9 m-right10"></view> |
|||
<view class="f-24 col-9">{{item.collectNum}}</view> |
|||
</view> |
|||
<view class="dis-flex flex-y-center m-right40" v-else> |
|||
<view class="iconfont icon-punch_light IconClass col-9 m-right10"></view> |
|||
<view class="f-24 col-9">{{item.total_collect}}</view> |
|||
</view> |
|||
<view class="dis-flex flex-y-center" v-if="item.laud"> |
|||
<view class="iconfont icon-appreciate_light IconClass col-9 m-right10"></view> |
|||
<view class="f-24 col-9">{{item.laud}}</view> |
|||
</view> |
|||
<view class="dis-flex flex-y-center m-right40" v-else> |
|||
<view class="iconfont icon-share_light IconClass col-9 m-right10"></view> |
|||
<view class="f-24 col-9">{{item.share}}</view> |
|||
</view> |
|||
<view class="dis-flex flex-y-center" v-if="!item.laud && item.collectNum" @click.stop="delectCollectis(item.id)"> |
|||
<view class="iconfont icon-delete IconClass col-9 m-right10" style="color: #FF4444;"></view> |
|||
<view class="f-24 col-9" style="color: #FF4444;">取消收藏</view> |
|||
</view> |
|||
<view class="flex-box"> |
|||
|
|||
</view> |
|||
<view class="dis-flex"> |
|||
<view class="iconfont icon-dianhua1 IcondhClass" @click.stop="contact('phone',item.mobile)" v-if="item.show_mobile=='1'"></view> |
|||
<view class="iconfont icon-dianhua1 IcondhClass" @click.stop="contact('phone',item.mobile)" v-if="item.mobile && !item.laud && item.showtel"></view> |
|||
<view class="iconfont icon-markfill IconmarkClass" @click.stop="contact('wx',item)" v-if="item.mid!='0'"></view> |
|||
<view class="iconfont icon-delete_light IconmarkClass col-9" v-if="is_collcet==='1'" @click.stop="delectCollect(item.id,index)"></view> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="businessCard-right dis-flex flex-dir-column flex-x-center" style="position: relative;"> |
|||
<view class="f-24" v-if="!item.laud" style="padding-bottom: 10upx;color: #6f6f6f;position: absolute;top: 0;right: 0;"> |
|||
{{item.distance}} |
|||
</view> |
|||
<view class="f-24" v-if="!item.laud" style="padding-bottom: 10upx;color: #6f6f6f;height: 20upx;"> |
|||
{{item.distance}} --> |
|||
<!-- </view> |
|||
<view class="iconfont icon-mark IconmarkClass" @click.stop="contact('wx',item)" v-if="item.mid!='0'"></view> |
|||
<view class="seg" v-if="item.show_mobile=='1'"></view> |
|||
<view class="iconfont icon-dianhua IcondhClass" @click.stop="contact('phone',item.mobile)" v-if="item.show_mobile=='1'"></view> |
|||
<view class="sega" v-if="item.mobile && !item.laud"></view> |
|||
<view class="iconfont icon-dianhua IcondhClass" @click.stop="contact('phone',item.mobile)" v-if="item.mobile && !item.laud && item.showtel"></view> |
|||
<view class="iconfont icon-delete_light delectIconClass col-9" style="margin-top: 20upx;" v-if="is_collcet==='1'" @click.stop="delectCollect(item.id,index)"></view> |
|||
</view> --> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from "@/common/js/app.js" |
|||
export default { |
|||
data() { |
|||
return { |
|||
loadlogo: true |
|||
} |
|||
}, |
|||
methods: { |
|||
delectCollectis(id){ |
|||
let data={ |
|||
id:id |
|||
}; |
|||
App.showError( |
|||
`是否取消收藏?`, |
|||
data => { |
|||
if (data.confirm) { |
|||
App._post_form( |
|||
`&p=yellowpage&do=pageCollect&id=${id}`, |
|||
{}, |
|||
res => { |
|||
uni.showToast({ |
|||
title:'取消收藏成功' |
|||
}) |
|||
this.$emit('deleteis'); |
|||
}, |
|||
false, |
|||
() => { |
|||
|
|||
} |
|||
); |
|||
} |
|||
}, |
|||
true |
|||
); |
|||
|
|||
|
|||
}, |
|||
contact(type, Data) { |
|||
let _this = this; |
|||
if (type === 'phone') { |
|||
uni.makePhoneCall({ |
|||
phoneNumber: Data |
|||
}) |
|||
} |
|||
if (type === 'wx') { |
|||
let getSetInfo = uni.getStorageSync('getSetInfo'); |
|||
if(getSetInfo.type == 1){ |
|||
App.navigationTo({ |
|||
url: 'pagesA/instantMessenger/instantMessenger?other_party_id=' + Data.mid + '&other_party_type=' + 1+ '&type=1' + '&id=' |
|||
}) |
|||
}else{ |
|||
App.navigationTo({ |
|||
url: 'pages/subPages/homepage/chat/chat?other_party_id=' + Data.mid + '&other_party_type=' + 1+ '&type=1' + '&id=' |
|||
}) |
|||
} |
|||
// App.navigationTo({ |
|||
// url: `pages/subPages/homepage/chat/chat?other_party_id=${Data.mid}&other_party_type=1&type=1` |
|||
// }) |
|||
} |
|||
}, |
|||
fnclick(cardid) { |
|||
let _this = this; |
|||
console.log(cardid); |
|||
if(_this.is_yellow){ |
|||
App.navigationTo({ |
|||
url: `pages/subPages2/phoneBook/logistics/logistics?id=${cardid}` |
|||
}) |
|||
}else{ |
|||
App.navigationTo({ |
|||
url: `pages/subPages/businesscard/carddetail/carddetail?cardid=${cardid}` |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
creatCard() { |
|||
let _this = this; |
|||
App.navigationTo({ |
|||
url: `pages/subPages/businesscard/formcard/formcard` |
|||
}) |
|||
}, |
|||
delectCollect(cardid, index) { |
|||
let _this = this, |
|||
businCard_list = _this.businCard_list; |
|||
uni.showModal({ |
|||
title: '温馨提示', |
|||
content: '是否删除该收藏名片', |
|||
success: function(res) { |
|||
if (res.confirm) { |
|||
uni.showLoading({}) |
|||
App._post_form('&p=citycard&do=cardCollect', { |
|||
id: cardid |
|||
}, res => { |
|||
if (res.errno === 0) { |
|||
businCard_list.splice(index, 1); |
|||
_this.$emit('chrbusinCard', businCard_list); |
|||
_this.$forceUpdate() |
|||
} |
|||
}, false, () => { |
|||
uni.hideLoading() |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
computed: { |
|||
cardList: { |
|||
get() { |
|||
let _this = this, |
|||
businCard_list = _this.businCard_list; |
|||
if (!!businCard_list && businCard_list.length >= 0) { |
|||
return businCard_list |
|||
} |
|||
}, |
|||
set(val) { |
|||
console.log(val) |
|||
} |
|||
} |
|||
}, |
|||
components: {}, |
|||
props: { |
|||
businCard_list: { |
|||
type: Array, |
|||
default: function() { |
|||
return [] |
|||
} |
|||
}, |
|||
is_collcet: { |
|||
type: String, |
|||
default: function() { |
|||
return '1' |
|||
} |
|||
}, |
|||
is_have: { |
|||
type: Number, |
|||
default: function() { |
|||
return 0 |
|||
} |
|||
}, |
|||
is_pading:{ |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
is_yellow:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
is_Add:{ |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
onLoad(e) { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.personInfo-name { |
|||
// width: 400upx; |
|||
// white-space: nowrap; |
|||
// overflow: hidden; |
|||
// text-overflow: ellipsis; |
|||
margin-right: 10upx; |
|||
} |
|||
|
|||
.personInfolabel-item { |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
word-break: break-all; |
|||
max-width: 240rpx; |
|||
} |
|||
|
|||
.businessCard-items { |
|||
padding: 30upx; |
|||
} |
|||
|
|||
.stick { |
|||
padding: 2upx 6upx; |
|||
background-color: #FF4444; |
|||
border-radius: 4upx; |
|||
transform: scale(.85); |
|||
margin-right: 10upx; |
|||
} |
|||
|
|||
.businessCard-left { |
|||
padding-bottom: 20upx; |
|||
.head-box { |
|||
padding-top: 6upx; |
|||
|
|||
.head { |
|||
width: 90upx; |
|||
height: 90upx; |
|||
border-radius: 45upx; |
|||
background-size: 90upx 90upx; |
|||
background-repeat: no-repeat; |
|||
} |
|||
} |
|||
|
|||
.delectIconClass { |
|||
position: absolute; |
|||
left: 36%; |
|||
top: 67%; |
|||
transform: translateX(-50%); |
|||
font-size: 36upx; |
|||
} |
|||
|
|||
.personInfolabel { |
|||
.personInfolabel-item { |
|||
padding: 4upx 8upx; |
|||
background-color: #FEF1F1; |
|||
border-radius: 4upx; |
|||
margin-right: 8upx; |
|||
transform: scale(.9); |
|||
} |
|||
} |
|||
|
|||
.Cardbrief { |
|||
width: 450upx; |
|||
} |
|||
|
|||
|
|||
} |
|||
.card-icon-box { |
|||
padding: 30upx 0 0; |
|||
border-top: 1upx solid #eeeeee; |
|||
.IconClass { |
|||
font-size: 24upx; |
|||
} |
|||
} |
|||
.IconmarkClass { |
|||
font-size: 40upx; |
|||
width: 40upx; |
|||
height: 40upx; |
|||
line-height: 40upx; |
|||
margin-left: 45upx; |
|||
color: #3388FF; |
|||
} |
|||
|
|||
.IcondhClass { |
|||
font-size: 40upx; |
|||
line-height: 40upx; |
|||
width: 40upx; |
|||
height: 40upx; |
|||
// margin-right: 45upx; |
|||
color: #3388FF; |
|||
} |
|||
.businessCard-right { |
|||
|
|||
|
|||
.seg { |
|||
width: 40upx; |
|||
height: 2upx; |
|||
background-color: rgb(238, 238, 238); |
|||
margin: 20upx 0; |
|||
} |
|||
.sega { |
|||
width: 40upx; |
|||
height: 2upx; |
|||
background-color: rgb(238, 238, 238); |
|||
margin: 10upx 0; |
|||
} |
|||
} |
|||
|
|||
.creatCard-box { |
|||
padding: 20upx 0 0 60upx; |
|||
|
|||
.creatCard-bg { |
|||
width: 166upx; |
|||
height: 166upx; |
|||
background-repeat: no-repeat; |
|||
background-size: 166upx 166upx; |
|||
} |
|||
|
|||
.roundaddlight { |
|||
color: #3388FF; |
|||
font-size: 38upx; |
|||
} |
|||
|
|||
.roundaddlightText { |
|||
color: #3388FF; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,126 @@ |
|||
<!-- 同城 --> |
|||
<template> |
|||
<view class="container"> |
|||
<!-- 帖子列表循环模板 --> |
|||
<!-- <postList :itemInfo="item" :indexNumber="index" :indexShow="indexShow" @operationShow="operationShow" @getover="getover" v-for="(item, index) in homeList" |
|||
:key="index"></postList> --> |
|||
<post-list v-for="(item,index) in citywideList" :itemInfo="item" :indexNumber="index" :indexShow='indexShow' @getover="getover" @operationShow="operationShow" :key="index"></post-list> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import App from '@/common/js/app.js' |
|||
import postList from '@/components/template/postList' |
|||
export default { |
|||
data() { |
|||
return { |
|||
indexShow: -1, |
|||
} |
|||
}, |
|||
props: { |
|||
citywideList: { |
|||
type: Array, |
|||
default: function() { |
|||
return [] |
|||
} |
|||
} |
|||
}, |
|||
components: { |
|||
postList |
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
onShow() { |
|||
|
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
methods: { |
|||
operationShow(e) { |
|||
let _this = this; |
|||
_this.indexShow = e; |
|||
}, |
|||
getover(id,bor){ |
|||
this.$emit('getaver',id,bor) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.container { |
|||
background-color: #f6f6f6; |
|||
padding: 10upx 30upx; |
|||
} |
|||
|
|||
.city-wide-item { |
|||
.city-wideheader { |
|||
.wideheader-left { |
|||
width: 80upx; |
|||
height: 80upx; |
|||
background-size: 80upx 80upx; |
|||
background-repeat: no-repeat; |
|||
border-radius: 50%; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.wideheader-right { |
|||
.wideheader-right-top { |
|||
.wide-onename { |
|||
padding: 4upx 16upx; |
|||
border-radius: 30upx; |
|||
background-color: #ffeded; |
|||
color: #df231c; |
|||
} |
|||
} |
|||
|
|||
.wideheader-right-bottom { |
|||
.header-stick { |
|||
border-radius: 4upx; |
|||
background-color: #fe433f; |
|||
color: #fff; |
|||
padding: 0 10upx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.callMobile { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
z-index: 2; |
|||
padding: 0 20upx 0 16upx; |
|||
height: 40upx; |
|||
line-height: 40upx; |
|||
border-radius: 30upx; |
|||
background: linear-gradient(90deg, #ff8032, #fe453f); |
|||
} |
|||
} |
|||
|
|||
.city-content { |
|||
.city-imageList { |
|||
.city-imageItem { |
|||
width: 220upx; |
|||
height: 220upx; |
|||
|
|||
&>image { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 4upx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.city-wide-detail { |
|||
.city-wide-detail-right { |
|||
.detail-comment { |
|||
.iconfont-size { |
|||
font-size: 36upx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,268 @@ |
|||
<!-- 折扣卡组件 --> |
|||
<template> |
|||
<view class="container" :style="{background:!isdiyPage?'#ffffff':isdiyPageStyle.bgColor,paddingBottom: '1upx'}"> |
|||
<view class="disCard1-box b-f dis-flex m-btm20 p-r" v-for="(cardItem,index) in disCardList" :key="index" @click="gourl(cardItem.sid,cardItem)" :class="!isdiyPage?'bor-radius-10upx':''" |
|||
:style="{padding:!isdiyPage?'20rpx':isdiyPageStyle.padding*2+'rpx',margin:!isdiyPage?'20rpx':isdiyPageStyle.margin*2+'rpx'}"> |
|||
<view class="disCard1-left m-right20"> |
|||
<view class="disCard-image" :style="{'background-image':'url('+cardItem['logo']+')'}"></view> |
|||
</view> |
|||
<view class="disCard1-right dis-flex flex-dir-column flex-x-between"> |
|||
<view> |
|||
<view class="dis-flex flex-x-between flex-y-center" @click="navigateToShop(cardItem.is_link,cardItem['shop_url'])"> |
|||
<view class="f-26 disCard1-store onelist-hidden">{{cardItem['name']}}</view> |
|||
<view class="f-24 col-9" v-if="!!cardItem['distance']">{{cardItem['distance']}}</view> |
|||
</view> |
|||
<view class="f-24 disCard-notice-use twolist-hidden">使用须知:{{cardItem['limit']}}</view> |
|||
<view class="dis-flex f-24" style="position: relative;margin-top: 15upx;font-family: '黑体';" v-if="(userinfo.halfcardflag == 0 && platformInfor.newpayonline == 1) || !platformInfor.newpayonline"> |
|||
<view class="dis-il-block" |
|||
style="background-color: #E8C977; |
|||
height: 40upx; |
|||
line-height: 40upx; |
|||
padding-left: 20upx; |
|||
border-radius: 60upx 0upx 0upx 60upx; |
|||
color: #333333; |
|||
padding: 0 3upx 0 15upx; |
|||
letter-spacing:2upx; |
|||
"> |
|||
会员 |
|||
</view> |
|||
<view style="position: relative;"> |
|||
<view class="dis-il-block" |
|||
style="width: 0; |
|||
height: 0; |
|||
border-bottom: 40upx solid #E8C977; |
|||
border-right: 8upx solid transparent; |
|||
position: absolute; |
|||
left: 0;"> |
|||
</view> |
|||
<view class="dis-il-block" |
|||
style="width: 0; |
|||
height: 0; |
|||
border-top: 40upx solid #484743; |
|||
border-left: 8upx solid transparent; |
|||
position: absolute; |
|||
left: 0;"> |
|||
</view> |
|||
</view> |
|||
<view class="dis-il-block" |
|||
style="background-color: #484743; |
|||
margin-left: 4upx; |
|||
height: 40upx; |
|||
line-height: 40upx; |
|||
padding-right: 10upx; |
|||
border-radius: 0upx 60upx 60upx 0upx; |
|||
color: #FFFFFF; |
|||
letter-spacing: 2upx; |
|||
padding-left: 4upx;"> |
|||
{{cardItem.lowtip==1?'最低立享':'立享'}} |
|||
<text style="font-size: 24upx;">{{!platformInfor.newpayonline ?cardItem['discount']:cardItem.activediscount}}</text> |
|||
折 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="disCard-discount f-36" v-if="platformInfor.newpayonline == 1 && userinfo.halfcardflag == 0 && token">{{cardItem['discount']}}<text class="f-24">折</text></view> |
|||
<view class="disCard-discount f-36" v-if="platformInfor.newpayonline == 1 && userinfo.halfcardflag !== 0 && token">{{cardItem['discount']}}<text class="f-24">折</text></view> |
|||
<!-- <view class="disCard-discount f-36" v-if="">{{cardItem['discount']}}<text class="f-24">折</text></view> --> |
|||
<view class="disCard-discount f-36" v-if="(platformInfor.newpayonline == 1 && !token)">{{cardItem['discount']}}<text class="f-24">折</text></view> |
|||
<view class="disCard-skip-btn col-f f-24 t-c p-r" style="background-color: #FF4444;" @click.stop="navigateTo(cardItem.is_link,cardItem['url'],cardItem)">去买单</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import App from '@/common/js/app.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
platformInfor:{}, |
|||
userinfo:{}, |
|||
token:'' |
|||
} |
|||
}, |
|||
components: { |
|||
|
|||
}, |
|||
props: { |
|||
disCardData: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
}, |
|||
disCardData_two: { |
|||
type: Array, |
|||
default: function() { |
|||
return [] |
|||
} |
|||
}, |
|||
disCardType: { |
|||
type: String, |
|||
default: function() { |
|||
return '' |
|||
} |
|||
}, |
|||
disType: { |
|||
type: Number, |
|||
default: function() { |
|||
return 1 |
|||
} |
|||
}, |
|||
isdiyPageStyle: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
}, |
|||
isdiyPage: { |
|||
type: Boolean, |
|||
default: function() { |
|||
return false |
|||
} |
|||
}, |
|||
isdiyPageParams: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
disCardList() { |
|||
return this.disType === 1 ? this.disCardData['data'] : this.disCardData_two |
|||
} |
|||
}, |
|||
onShow() { |
|||
|
|||
}, |
|||
mounted() { |
|||
this.platformInfor = uni.getStorageSync('platformInfor'); |
|||
// this.platformInfor.newpayonline = 0; |
|||
this.userinfo = uni.getStorageSync('userinfo'); |
|||
this.token = uni.getStorageSync('weliam_user_token'); |
|||
}, |
|||
methods: { |
|||
gourl(sid,item){ |
|||
if(this.userinfo.halfcardflag == 0){ |
|||
App.showError('对不起，您不符合使用要求'); |
|||
return |
|||
} |
|||
if(!sid){ |
|||
App.navigationTo({ |
|||
url:item.url |
|||
}) |
|||
}else{ |
|||
App.navigationTo({ |
|||
url:'pages/mainPages/store/index?sid=' + sid |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
navigateToShop(is_link, url) { |
|||
// debugger |
|||
if (is_link === "1") return |
|||
App.navigationTo({ |
|||
url |
|||
}) |
|||
}, |
|||
navigateTo(is_link, url, item) { |
|||
|
|||
if (is_link === "1") { |
|||
if (item.payonline === "1") { |
|||
if(this.platformInfor.newpayonline == 1){ |
|||
App.navigationTo({ |
|||
url: 'pages/subPages2/newBuyOrder/newBuyOrder?sid=' + item.sid |
|||
}); |
|||
}else{ |
|||
App.navigationTo({ |
|||
url: 'pages/subPages2/newBuyOrder/buyOrder?sid=' + item.sid |
|||
}) |
|||
} |
|||
} else { |
|||
App.navigationTo({ |
|||
url: 'pages/mainPages/memberCard/memberCard?id=' + item.id + '&type=' + item.type |
|||
}) |
|||
} |
|||
} else { |
|||
if(this.userinfo.halfcardflag == 0){ |
|||
App.showError('对不起，您不符合使用要求'); |
|||
return |
|||
} |
|||
// if(url.indexOf('buyOrder') === -1){ |
|||
App.navigationTo({ |
|||
url |
|||
}) |
|||
// }else{ |
|||
// App.navigationTo({ |
|||
// url: 'pages/subPages2/newBuyOrderOrder?sid=' + item.sid |
|||
// }); |
|||
// } |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped> |
|||
.disCard1-box:last-child{ |
|||
// margin-bottom: 0 !important; |
|||
// margin: 0 30upx 30upx; |
|||
} |
|||
.disCard1-left { |
|||
.disCard-image { |
|||
width: 200upx; |
|||
height: 200upx; |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
background-size: 200upx 200upx; |
|||
flex-shrink: 0; |
|||
border-radius: 10upx; |
|||
} |
|||
} |
|||
|
|||
.disCard1-right { |
|||
flex: 1; |
|||
|
|||
.disCard1-store { |
|||
width: 300upx; |
|||
} |
|||
|
|||
.disCard-notice-use { |
|||
color: #bdbdbd; |
|||
} |
|||
|
|||
.disCard2-notice-use { |
|||
width: 300upx; |
|||
} |
|||
|
|||
.disCard-discount { |
|||
color: #ff3f43; |
|||
} |
|||
|
|||
.disCard-skip-btn { |
|||
position: absolute; |
|||
right: 20upx; |
|||
bottom: 24upx; |
|||
width: 130upx; |
|||
height: 50upx; |
|||
line-height: 50upx; |
|||
border-radius: 10upx; |
|||
} |
|||
|
|||
.disCard2-skip { |
|||
position: absolute; |
|||
right: 0; |
|||
bottom: 20upx; |
|||
} |
|||
|
|||
.disCard2-skip-btn { |
|||
width: 70upx; |
|||
border-radius: 50%; |
|||
height: 70upx; |
|||
background: #d83a3a; |
|||
color: #FFF; |
|||
padding: 10upx; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,189 @@ |
|||
<!-- 大礼包组件 --> |
|||
<template> |
|||
<view class="packages-container" :style="{'padding':isdiyPageStyle.margin+'px'}"> |
|||
<view class="disCard1-box b-f dis-flex m-btm20 p-r" v-for="(giftItem,index) in giftList" :key="index" :class="!isdiyPage?'bor-radius-10upx':''" |
|||
:style="{padding:!isdiyPage?'20rpx':isdiyPageStyle.padding*2+'rpx'}" @click="navigateTo(giftItem['url'],giftItem)"> |
|||
<view class="disCard1-left m-right20" style="padding-left: 20upx;"> |
|||
<view> |
|||
<view class="dis-flex flex-x-between flex-y-center"> |
|||
<view class="f-30 disCard1-store onelist-hidden" style="padding-bottom: 10upx;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width: 320upx;">{{giftItem['name']}}</view> |
|||
<!-- <view class="f-24 col-9" v-if="!!giftItem['distance']" style="padding-bottom: 10upx;">{{giftItem['distance']}}</view> --> |
|||
</view> |
|||
<view class="f-24 disCard-notice-use twolist-hidden" style="color: #FF4444;">{{giftItem['newlimit']}} <text style="padding-left: 10upx;">当前剩余{{giftItem['surplus']}}次</text></view> |
|||
</view> |
|||
<!-- <view class="disCard-image" :style="{'background-image':'url('+giftItem['shop_logo']+')'}"></view> --> |
|||
<image :src="giftItem['shop_logo']" class="disCard-image" mode="aspectFill"></image> |
|||
<view class="dis-il-block f-28" style="vertical-align:top;line-height: 100upx;padding-left: 20upx;"> |
|||
{{giftItem.storename}} |
|||
</view> |
|||
</view> |
|||
<view class="disCard1-right dis-flex flex-dir-column flex-x-between"> |
|||
|
|||
<view class="col-f4 f-24 t-r" style="margin-top: 20upx;">价值：¥<text class="f-36">{{giftItem['price']}}</text></view> |
|||
<view class="disCard-skip-btn col-f f-24 t-c p-r" style="margin-bottom: 20upx;" v-if="giftItem.use_where == 1">去使用</view> |
|||
<view class="disCard-skip-btns f-24 t-c p-r" style="margin-bottom: 20upx;color: #FFFFFF;width: 210upx;background-color: #999999;border: 2upx solid #999999;" v-if="giftItem.use_where == 0">当前等级无法使用</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import App from "@/common/js/app.js" |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
components: { |
|||
|
|||
}, |
|||
props: { |
|||
giftData: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
}, |
|||
giftData_two: { |
|||
type: Array, |
|||
default: function() { |
|||
return [] |
|||
} |
|||
}, |
|||
|
|||
disType: { |
|||
type: Number, |
|||
default: function() { |
|||
return 1 |
|||
} |
|||
}, |
|||
isdiyPage: { |
|||
type: Boolean, |
|||
default: function() { |
|||
return false |
|||
} |
|||
}, |
|||
isdiyPageStyle: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
}, |
|||
isdiyPageParams: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
}, |
|||
}, |
|||
computed: { |
|||
giftList() { |
|||
return this.disType === 1 ? this.giftData['data'] : this.giftData_two |
|||
} |
|||
}, |
|||
onShow() { |
|||
|
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
methods: { |
|||
isUnfold_act(index) { |
|||
let _this = this, |
|||
giftDataInfo = _this.giftData.data || _this.giftData_two; |
|||
_this.$set(giftDataInfo[index], 'isUnfold', !giftDataInfo[index].isUnfold) |
|||
}, |
|||
navigateTo(url,item) { |
|||
console.log(url); |
|||
// if(item.use_where == 0) return |
|||
App.navigationTo({ |
|||
url |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page{ |
|||
background-color: #F6F6F6; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
.disCard1-box:last-child { |
|||
margin-bottom: 0 !important; |
|||
} |
|||
|
|||
.disCard1-left { |
|||
.disCard-image { |
|||
width: 60upx; |
|||
height: 60upx; |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
background-size: 200upx 200upx; |
|||
flex-shrink: 0; |
|||
border-radius: 60upx; |
|||
margin-top: 20upx; |
|||
} |
|||
} |
|||
|
|||
.disCard1-right { |
|||
flex: 1; |
|||
|
|||
.disCard1-store { |
|||
width: 300upx; |
|||
} |
|||
|
|||
.disCard-notice-use { |
|||
color: #bdbdbd; |
|||
} |
|||
|
|||
.disCard2-notice-use { |
|||
width: 300upx; |
|||
} |
|||
|
|||
.disCard-skip-btn { |
|||
position: absolute; |
|||
right: 20upx; |
|||
bottom: 24upx; |
|||
width: 130upx; |
|||
height: 50upx; |
|||
line-height: 50upx; |
|||
border-radius: 10upx; |
|||
// background-color: linear-gradient(direction, #FF8032, #ff4444); |
|||
background: -webkit-linear-gradient(right, #FF8032 , #ff4444); /* Safari 5.1 - 6.0 */ |
|||
background: -o-linear-gradient(right, #FF8032 , #ff4444); /* Opera 11.1 - 12.0 */ |
|||
background: -moz-linear-gradient(right, #FF8032 , #ff4444); /* Firefox 3.6 - 15 */ |
|||
background: linear-gradient(right, #FF8032 , #ff4444); /* 标准的语法（必须放在最后） */ |
|||
} |
|||
|
|||
.disCard-skip-btns { |
|||
position: absolute; |
|||
right: 20upx; |
|||
bottom: 24upx; |
|||
width: 130upx; |
|||
height: 50upx; |
|||
line-height: 50upx; |
|||
border-radius: 10upx; |
|||
background-color: #999999; |
|||
} |
|||
|
|||
.disCard2-skip { |
|||
position: absolute; |
|||
right: 0; |
|||
bottom: 20upx; |
|||
} |
|||
|
|||
.disCard2-skip-btn { |
|||
width: 70upx; |
|||
border-radius: 50%; |
|||
height: 70upx; |
|||
background: #d83a3a; |
|||
color: #FFF; |
|||
padding: 10upx; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,123 @@ |
|||
<!-- 商品各个样式组件 --> |
|||
<template> |
|||
<view class="container"> |
|||
<!-- _goods_type_1 商品样式1 --> |
|||
<block v-if="goodsType==='goods_type1'"> |
|||
<view class="groupon_goods5 groupon_goods5-pading" :style="{marginBottom:goodsData.style.marginBottom*2+'rpx',padding:goodsData.style.margin*2+'rpx',backgroundColor:goodsData.style.bgColor}"> |
|||
<view class="b-f" :style="{paddingLeft:goodsData.style.padding*2+'rpx',paddingTop:goodsData.style.padding*2+'rpx',paddingBottom:goodsData.style.padding*2+'rpx',paddingRight:'0'}"> |
|||
<scroll-view scroll-x="true"> |
|||
<view class="groupon_goods5-list dis-flex"> |
|||
<view class="groupon_goods5-list-item m-right20" v-for="(goods,index) in goodsData.data" :key="index" @click="navigateTo(goods.url)"> |
|||
<view class="groupon_goods5-image" :style="{'background-image':'url('+goods['logo']+')'}"> |
|||
<image v-if="goods.stk == 0" style="width: 250upx;height: 250upx;background-color: rgba(0,0,0,0.5);" :src="imgfixUrls + 'rush_goods_sell_out.png'" mode="aspectFit"></image> |
|||
</view> |
|||
<view class="groupon_goods5-title twolist-hidden f-28 col-3 m-top20">{{goods['goods_name']}}</view> |
|||
<view class="groupon_goods5-price dis-flex flex-y-center flex-x-between"> |
|||
<view class="now-price f-28">￥{{goods['price']}}</view> |
|||
<view class="old-price f-24" style="text-decoration:line-through;">￥{{goods['oldprice']}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import App from "@/common/js/app.js" |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
props: { |
|||
goodsData: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
}, |
|||
goodsType: { |
|||
type: String, |
|||
default: function() { |
|||
return '' |
|||
} |
|||
} |
|||
}, |
|||
components: { |
|||
|
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
onShow() { |
|||
|
|||
}, |
|||
mounted() { |
|||
this.setEndTime() |
|||
}, |
|||
methods: { |
|||
// 倒计时 |
|||
setEndTime() { |
|||
if (this.goodsType === 'goods_type4') { |
|||
setInterval(() => { |
|||
let _this = this, |
|||
nowTime = new Date().getTime(); |
|||
for (let i in _this.goodsData.data) { |
|||
// 开始时间 |
|||
let startTime = Number(_this.goodsData.data[i].starttime) * 1000, |
|||
// 截止时间 |
|||
endTime = Number(_this.goodsData.data[i].endtime) * 1000, |
|||
// 距离结束时间 |
|||
leftTime = parseInt((endTime - nowTime) / 1000), |
|||
// 距离开始时间 |
|||
rightTime = parseInt((startTime - nowTime) / 1000), |
|||
// 每个商品活动时间 |
|||
timeobj = {}, |
|||
callback = function(dataTime, timeType) { |
|||
let hh = parseInt(dataTime / 60 / 60 / 24 * 24), |
|||
mm = parseInt(dataTime / 60 % 60), |
|||
ss = parseInt(dataTime % 60), |
|||
timeobj = { |
|||
hh: hh < 10 ? '0' + `${hh}` : hh, |
|||
mm: mm < 10 ? '0' + `${mm}` : mm, |
|||
ss: ss < 10 ? '0' + `${ss}` : ss |
|||
}; |
|||
_this.$set(_this.goodsData.data[i], 'timeobj', timeobj) |
|||
_this.goodsData.data[i].stateTime = timeType === 'left' ? 1 : 2; |
|||
}; |
|||
if (leftTime > 0 && rightTime <= 0) { |
|||
if (nowTime > startTime && nowTime < endTime) { |
|||
callback(leftTime, 'left') |
|||
} |
|||
} else if (rightTime > 0 && leftTime > 0) { |
|||
if (startTime > nowTime && nowTime < endTime) { |
|||
callback(rightTime, 'right') |
|||
} |
|||
} else { |
|||
_this.goodsData.data[i].isTimeOver = true; |
|||
return false |
|||
} |
|||
} |
|||
}, 1000); |
|||
} |
|||
}, |
|||
navigateTo(url) { |
|||
let isHttpUrl = url.indexOf('https') !== -1; |
|||
if (isHttpUrl) { |
|||
location.href = url; |
|||
} else { |
|||
App.navigationTo({ |
|||
url |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import url('../../../common/css/diyPages.css') |
|||
</style> |
|||
@ -0,0 +1,818 @@ |
|||
<!-- 商品各个样式组件 --> |
|||
<!-- @remindSuccess="remindSuccess" 抢购关注 --> |
|||
<template> |
|||
<view class="goods-container" v-if="logos"> |
|||
<!-- 抢购 --> |
|||
<block v-if="goodsStyleType === 'rush'"> |
|||
<view |
|||
class="goods-box b-f dis-flex m-btm20 p-r" |
|||
v-for="(goodsItem, index) in goodslistData" |
|||
:key="index" |
|||
@click="navigateTo(goodsItem.url,goodsItem.exdetail)" |
|||
:class="!isdiyPage ? 'bor-radius-10upx' : ''" |
|||
:style="{ padding: issearch === '1' ? '10rpx 30rpx' : !isdiyPage ? '20rpx' : isdiyPageStyle.padding * 2 + 'rpx' }" |
|||
> |
|||
<view class="goodsBox-left m-right20 p-r" :style="{ 'background-image': 'url(' + goodsItem.logo + ')' }"> |
|||
<block v-if="!isdiyPage"><view class="marker_set col-f f-24" style="background-color: #FF4444;">抢购</view></block> |
|||
<block v-else> |
|||
<block v-if="isdiyPageParams.marker_set === '1'"> |
|||
<view class="marker_set col-f f-24" :style="{ backgroundColor: isdiyPageStyle.marker_bg, color: isdiyPageStyle.marker_color }">抢购</view> |
|||
</block> |
|||
</block> |
|||
<view class="alreayOverImage-mask" v-if="goodsItem.stk === 0"> |
|||
<image class="alreayOverImage" :src="imgfixUrls + 'rush_goods_sell_out.png'" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="goodsBox-right flex-box"> |
|||
<view class="goods-title col-3 f-26 goods-title-twoList twolist-hidden">{{ goodsItem.goods_name }}</view> |
|||
<view class="dis-flex flex-y-center flex-x-between m-btm10"> |
|||
<view class="f-24 col-9" v-if="goodsItem.storename">{{ goodsItem.storename }}</view> |
|||
<view class="f-24 col-9" v-if="!!goodsItem.distance">{{ goodsItem.distance }}</view> |
|||
</view> |
|||
<view class="rush-price-box dis-flex flex-y-center"> |
|||
<view class="col-f4 f-36 m-right10"> |
|||
<text class="f-24">¥</text> |
|||
{{ goodsItem.price }} |
|||
</view> |
|||
<view class="f-24 col-9" style="text-decoration:line-through;">¥{{ goodsItem.oldprice }}</view> |
|||
</view> |
|||
<view class="coupon-progress p-r"> |
|||
<view class="coupon-progress-already" :style="'width: ' + goodsItem.buy_percentage + '%;'"></view> |
|||
<view class="coupon-stk dis-flex flex-y-center"> |
|||
<view class="col-f f-22 shrink">已抢{{ goodsItem.buy_num }}份</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view |
|||
class="coupon-btn col-f f-24 t-c" |
|||
style="background-color: #4CD43A;" |
|||
v-if="goodsItem.status === '1'" |
|||
@click.stop="goodsremind(goodsItem.id, goodsItem, index)" |
|||
> |
|||
{{ goodsItem.is_follow === 0 || goodsItem.is_show === 0 ? '提醒我' : '已关注' }} |
|||
</view> |
|||
<view class="coupon-btn col-f f-24 t-c" :style="{ backgroundColor: goodsItem.stk === 0 ? '#CCCCCC' : '#FF4444' }" v-if="goodsItem.status === '2'"> |
|||
{{ goodsItem.stk === 0 ? '已售罄' : '马上抢' }} |
|||
</view> |
|||
<view class="coupon-btn col-f f-24 t-c" style="background-color: #CCCCCC;" v-if="goodsItem.status === '3'">已结束</view> |
|||
</view> |
|||
</block> |
|||
<!-- 抢购2 --> |
|||
<block v-if="goodsStyleType === 'rush2'"> |
|||
<view class="goods-box2 dis-flex flex-x-between b-f" :style="{ padding: !isdiyPage ? '0' : isdiyPageStyle.padding * 2 + 'rpx' }"> |
|||
<view class="goods-box2-item p-r m-btm20" v-for="(goodsItem, index) in goodslistData" :key="index" @click="navigateTo(goodsItem.url,goodsItem.exdetail)"> |
|||
<view class="goods2-image m-btm20 p-r" :style="{ 'background-image': 'url(' + goodsItem.logo + ')' }"> |
|||
<view class="alreayOverImage-mask" v-if="goodsItem.stk === 0"> |
|||
<image class="alreayOverImage" :src="imgfixUrls + 'rush_goods_sell_out.png'" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="goods2-title col-3 f-28 goods-title-twoList twolist-hidden m-btm30">{{ goodsItem.goods_name }}</view> |
|||
<view class="dis-flex flex-y-center m-btm10"> |
|||
<view class="goods2-price f-30 col-f4" v-if="goodsItem.plugin == 'coupon' && goodsItem.is_charge == 0"> |
|||
免费 |
|||
</view> |
|||
<view class="goods2-price f-30 col-f4" v-else> |
|||
{{ goodsItem.price }} |
|||
<text class="f-24">元</text> |
|||
</view> |
|||
<block v-if="goodsItem.discount_price > 0"> |
|||
<view class="groupon-vip t-c f-24">会员</view> |
|||
<view class="col-9 f-24 groupon-vipPrice onelist-hidden">优惠{{ goodsItem.discount_price }}元</view> |
|||
</block> |
|||
</view> |
|||
<view class="dis-flex flex-y-center flex-x-between"> |
|||
<view class="col-9 f-24" style="text-decoration:line-through;" v-if="goodsItem.oldprice">¥{{ goodsItem.oldprice }}</view> |
|||
<view class="col-9 f-24">{{ goodsItem.pv }}人喜欢</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
<!-- 团购 --> |
|||
<block v-if="goodsStyleType === 'groupon'"> |
|||
<view |
|||
class="goods-box b-f dis-flex m-btm20 p-r" |
|||
v-for="(goodsItem, index) in goodslistData" |
|||
:key="index" |
|||
@click="navigateTo(goodsItem.url,goodsItem.exdetail)" |
|||
:class="!isdiyPage ? 'bor-radius-10upx' : ''" |
|||
:style="{ padding: issearch === '1' ? '10rpx 30rpx' : !isdiyPage ? '20rpx' : isdiyPageStyle.padding * 2 + 'rpx' }" |
|||
> |
|||
<view class="goodsBox-left m-right20 p-r" :style="{ 'background-image': 'url(' + goodsItem.logo + ')' }"> |
|||
<block v-if="!isdiyPage"><view class="marker_set col-f f-24" style="background-color: #FF4444;">团购</view></block> |
|||
<block v-else> |
|||
<block v-if="isdiyPageParams.marker_set === '1'"> |
|||
<view class="marker_set col-f f-24" :style="{ backgroundColor: isdiyPageStyle.marker_bg, color: isdiyPageStyle.marker_color }">团购</view> |
|||
</block> |
|||
</block> |
|||
<view class="alreayOverImage-mask" v-if="goodsItem.stk === 0"> |
|||
<image class="alreayOverImage" :src="imgfixUrls + 'rush_goods_sell_out.png'" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="goodsBox-right dis-flex flex-box flex-dir-column flex-x-between"> |
|||
<view class="goods-title col-3 f-26 goods-title-twoList twolist-hidden">{{ goodsItem.goods_name }}</view> |
|||
<view class="dis-flex flex-y-center flex-x-between m-btm10"> |
|||
<view class="f-24 col-9" v-if="goodsItem.storename">{{ goodsItem.storename }}</view> |
|||
<view class="f-24 col-9" v-if="!!goodsItem.distance">{{ goodsItem.distance }}</view> |
|||
</view> |
|||
<view class="groupon-price-box dis-flex flex-y-center"> |
|||
<view class="col-f4 f-36"> |
|||
<text class="f-24">¥</text> |
|||
{{ goodsItem.price }} |
|||
</view> |
|||
<block v-if="goodsItem.discount_price > 0"> |
|||
<view class="groupon-vip t-c f-24">会员</view> |
|||
<view class="col-9 f-24">优惠{{ goodsItem.discount_price }}元</view> |
|||
</block> |
|||
</view> |
|||
<view class="col-9 f-24" style="text-decoration:line-through;">市场价：¥{{ goodsItem.oldprice }}</view> |
|||
</view> |
|||
<view class="coupon-btn coupon-btnBtm col-f f-24 t-c" :style="{ backgroundColor: goodsItem.stk === 0 ? '#CCCCCC' : '#FF4444' }"> |
|||
{{ goodsItem.stk === 0 ? '已售罄' : '去购买' }} |
|||
</view> |
|||
</view> |
|||
</block> |
|||
<!-- 砍价 --> |
|||
<block v-if="goodsStyleType === 'bargain'"> |
|||
<view |
|||
class="goods-box b-f m-btm20 dis-flex p-r" |
|||
v-for="(goodsItem, index) in goodslistData" |
|||
:key="index" |
|||
@click="navigateTo(goodsItem.url,goodsItem.exdetail)" |
|||
:class="!isdiyPage ? 'bor-radius-10upx' : ''" |
|||
:style="{ padding: issearch === '1' ? '10rpx 30rpx' : !isdiyPage ? '20rpx' : isdiyPageStyle.padding * 2 + 'rpx' }" |
|||
> |
|||
<view class="goodsBox-left m-right20 p-r" :style="{ 'background-image': 'url(' + goodsItem.logo + ')' }"> |
|||
<block v-if="!isdiyPage"><view class="marker_set col-f f-24" style="background-color: #FF4444;">砍价</view></block> |
|||
<block v-else> |
|||
<block v-if="isdiyPageParams.marker_set === '1'"> |
|||
<view class="marker_set col-f f-24" :style="{ backgroundColor: isdiyPageStyle.marker_bg, color: isdiyPageStyle.marker_color }">砍价</view> |
|||
</block> |
|||
</block> |
|||
<view class="alreayOverImage-mask" v-if="goodsItem.stk === 0"> |
|||
<image class="alreayOverImage" :src="imgfixUrls + 'rush_goods_sell_out.png'" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="goodsBox-right dis-flex flex-box flex-dir-column flex-x-between"> |
|||
<view class="goods-title col-3 f-26 goods-title-twoList twolist-hidden">{{ goodsItem.goods_name }}</view> |
|||
<view class="f-24 col-9">{{ goodsItem.buy_num }}人砍价成功</view> |
|||
<view class="bargin-price col-f4 f-24 m-right10"> |
|||
可砍至¥ |
|||
<text class="f-36">{{ goodsItem.price }}</text> |
|||
</view> |
|||
<view class="col-9 f-24" style="text-decoration:line-through;">市场价：¥{{ goodsItem.oldprice }}</view> |
|||
</view> |
|||
<view class="coupon-btn col-f f-24 t-c" :style="{ backgroundColor: goodsItem.stk === 0 ? '#CCCCCC' : '#FF4444' }"> |
|||
{{ goodsItem.stk === 0 ? '已售罄' : '去砍价' }} |
|||
</view> |
|||
</view> |
|||
</block> |
|||
<!-- 砍价2 --> |
|||
<block v-if="goodsStyleType === 'bargain2'"> |
|||
<view class="goods-box2 dis-flex flex-x-between b-f" :style="{ padding: !isdiyPage ? '20rpx' : isdiyPageStyle.padding * 2 + 'rpx' }"> |
|||
<view class="goods-box2-item p-r m-btm20" v-for="(goodsItem, index) in goodslistData" :key="index" @click="navigateTo(goodsItem.url,goodsItem.exdetail)"> |
|||
<view class="goods2-image m-btm20 p-r" :style="{ 'background-image': 'url(' + goodsItem.logo + ')' }"> |
|||
<block v-if="!isdiyPage"><view class="marker_set col-f f-24" style="background-color: #FF4444;">砍价</view></block> |
|||
<block v-else> |
|||
<block v-if="isdiyPageParams.marker_set === '1'"> |
|||
<view class="marker_set col-f f-24" :style="{ backgroundColor: isdiyPageStyle.marker_bg, color: isdiyPageStyle.marker_color }">砍价</view> |
|||
</block> |
|||
</block> |
|||
<view class="alreayOverImage-mask" v-if="goodsItem.stk === 0"> |
|||
<image class="alreayOverImage" :src="imgfixUrls + 'rush_goods_sell_out.png'" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="goods2-title col-3 f-28 goods-title-twoList twolist-hidden m-btm20">{{ goodsItem.goods_name }}</view> |
|||
<view class="col-f4 f-24 m-btm20">{{ goodsItem.buy_num }}人砍价成功</view> |
|||
<view class="dis-flex flex-x-between flex-y-center"> |
|||
<view class="bargin-price col-3 f-24"> |
|||
可砍至 |
|||
<text class="col-f4 f-26">¥</text> |
|||
<text class="f-30 col-f4">{{ goodsItem.price }}</text> |
|||
</view> |
|||
<view class="bargin-oldprice col-9 f-24" style="text-decoration:line-through;">¥{{ goodsItem.oldprice }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
<!-- 拼团 --> |
|||
<block v-if="goodsStyleType === 'fight'"> |
|||
<view |
|||
class="goods-box b-f m-btm20 dis-flex p-r" |
|||
v-for="(goodsItem, index) in goodslistData" |
|||
:key="index" |
|||
@click="navigateTo(goodsItem.url,goodsItem.exdetail)" |
|||
:class="!isdiyPage ? 'bor-radius-10upx' : ''" |
|||
:style="{ padding: issearch === '1' ? '10rpx 30rpx' : !isdiyPage ? '20rpx' : isdiyPageStyle.padding * 2 + 'rpx' }" |
|||
> |
|||
<view class="goodsBox-left m-right20 p-r" :style="{ 'background-image': 'url(' + goodsItem.logo + ')' }"> |
|||
<block v-if="!isdiyPage"><view class="marker_set col-f f-24" style="background-color: #FF4444;">拼团</view></block> |
|||
<block v-else> |
|||
<block v-if="isdiyPageParams.marker_set === '1'"> |
|||
<view class="marker_set col-f f-24" :style="{ backgroundColor: isdiyPageStyle.marker_bg, color: isdiyPageStyle.marker_color }">拼团</view> |
|||
</block> |
|||
</block> |
|||
<view class="alreayOverImage-mask" v-if="goodsItem.stk === 0"> |
|||
<image class="alreayOverImage" :src="imgfixUrls + 'rush_goods_sell_out.png'" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="goodsBox-right dis-flex flex-box flex-dir-column flex-x-between"> |
|||
<view class="goods-title col-3 f-26 goods-title-twoList twolist-hidden"> |
|||
<text>{{ goodsItem.goods_name }}</text> |
|||
<text style="float: right;color: #999999;">{{ goodsItem.distance }}</text> |
|||
</view> |
|||
<view class="dis-flex flex-y-center fight_goods-amount"> |
|||
<view class="fight_goods-sales col-f4 f-24 m-right10">已团{{ goodsItem.buy_num }}件</view> |
|||
<view class="fight_goods-num col-f4 f-24">{{ goodsItem.peoplenum }}人团</view> |
|||
</view> |
|||
<view class="bargin-price col-f4 f-24"> |
|||
¥ |
|||
<text class="f-36">{{ goodsItem.price }}</text> |
|||
</view> |
|||
<view class="col-9 f-24" style="text-decoration:line-through;">市场价：¥{{ goodsItem.oldprice }}</view> |
|||
</view> |
|||
<view class="coupon-btn col-f f-24 t-c" :style="{ backgroundColor: goodsItem.stk === 0 ? '#CCCCCC' : '#FF4444' }"> |
|||
{{ goodsItem.stk === 0 ? '已售罄' : '去拼团' }} |
|||
</view> |
|||
</view> |
|||
</block> |
|||
<!-- 拼团2 --> |
|||
<block v-if="goodsStyleType === 'fight2'"> |
|||
<view class="goods-box2 dis-flex flex-x-between b-f" :style="{ padding: !isdiyPage ? '20rpx' : isdiyPageStyle.padding * 2 + 'rpx' }"> |
|||
<view class="goods-box2-item p-r m-btm20" v-for="(goodsItem, index) in goodslistData" :key="index" @click="navigateTo(goodsItem.url,goodsItem.exdetail)"> |
|||
<view class="goods2-image m-btm20 p-r" :style="{ 'background-image': 'url(' + goodsItem.logo + ')' }"> |
|||
<block v-if="!isdiyPage"><view class="marker_set col-f f-24" style="background-color: #FF4444;">拼团</view></block> |
|||
<block v-else> |
|||
<block v-if="isdiyPageParams.marker_set === '1'"> |
|||
<view class="marker_set col-f f-24" :style="{ backgroundColor: isdiyPageStyle.marker_bg, color: isdiyPageStyle.marker_color }">拼团</view> |
|||
</block> |
|||
</block> |
|||
<view class="alreayOverImage-mask" v-if="goodsItem.stk === 0"> |
|||
<image class="alreayOverImage" :src="imgfixUrls + 'rush_goods_sell_out.png'" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="goods2-title col-3 f-28 goods-title-twoList twolist-hidden m-btm20">{{ goodsItem.goods_name }}</view> |
|||
<view class="dis-flex flex-y-center m-btm10"> |
|||
<view class="fight-num col-f4 f-24">已拼{{ goodsItem.buy_num }}件</view> |
|||
<view class="fight-person col-f4 f-24">{{ goodsItem.peoplenum }}人团</view> |
|||
</view> |
|||
<view class="dis-flex flex-y-center flex-x-between"> |
|||
<view class="col-f4 f-24"> |
|||
¥ |
|||
<text class="f-36">{{ goodsItem.price }}</text> |
|||
</view> |
|||
<view class="col-9 f-24 fight-oldprice" style="text-decoration:line-through;">单购价¥{{ goodsItem.oldprice }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
<!-- 卡券 --> |
|||
<block v-if="goodsStyleType === 'coupon'"> |
|||
<view |
|||
class="goods-box b-f dis-flex m-btm20 p-r" |
|||
v-for="(goodsItem, index) in goodslistData" |
|||
:key="index" |
|||
@click="navigateTo(goodsItem.url,goodsItem.exdetail)" |
|||
:class="!isdiyPage ? 'bor-radius-10upx' : ''" |
|||
:style="{ padding: issearch === '1' ? '10rpx 30rpx' : !isdiyPage ? '20rpx' : isdiyPageStyle.padding * 2 + 'rpx' }" |
|||
> |
|||
<view class="goodsBox-left m-right20 p-r" :style="{ 'background-image': 'url(' + goodsItem.logo + ')' }"> |
|||
<block v-if="goodsItem.vipstatus === '1'"><view class="marker_set marker_setVipColor f-24" style="background-color: #333333;">会员特价</view></block> |
|||
<block v-else-if="goodsItem.vipstatus === '2'"><view class="marker_set marker_setVipColor f-24" style="background-color: #333333;">会员专享</view></block> |
|||
</view> |
|||
<view class="goodsBox-right flex-box dis-flex flex-dir-column flex-x-between"> |
|||
<view class="goods-title col-3 f-26 goods-title-twoList twolist-hidden" >{{ goodsItem.goods_name }}</view> |
|||
<view class="dis-flex flex-y-center flex-x-between m-btm10"> |
|||
<view class="f-24 col-9" v-if="goodsItem.storename">{{ goodsItem.storename }}</view> |
|||
<view class="f-24 col-9" v-if="!!goodsItem.distance">{{ goodsItem.distance }}</view> |
|||
</view> |
|||
<block v-if="goodsItem.is_charge === '1'"> |
|||
<view class="groupon-price-box dis-flex flex-y-center"> |
|||
<view class="col-f4 f-36"> |
|||
<text class="f-24">¥</text> |
|||
{{ goodsItem.price }} |
|||
</view> |
|||
<block v-if="goodsItem.discount_price > 0"> |
|||
<view class="groupon-vip t-c f-24">会员</view> |
|||
<view class="col-9 f-24">优惠{{ goodsItem.discount_price }}元</view> |
|||
</block> |
|||
</view> |
|||
</block> |
|||
<block v-else><view class="col-f4 f-30">免费</view></block> |
|||
<view class="coupon-progress p-r"> |
|||
<view class="coupon-progress-already" :style="'width: ' + goodsItem.buy_percentage + '%;'"></view> |
|||
<view class="coupon-stk dis-flex flex-y-center"> |
|||
<view class="col-f f-22 shrink">已抢{{ goodsItem.buy_num }}份</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="coupon-btn col-f f-24 t-c" :class="{ 'coupon-btnBtm': goodsItem.is_charge === '1' }" style="background-color: #FF4444;"> |
|||
{{ goodsItem.is_charge === '1' ? '去购买' : '去领取' }} |
|||
</view> |
|||
</view> |
|||
</block> |
|||
<!-- 卡券2 --> |
|||
<block v-if="goodsStyleType === 'coupon2'"> |
|||
<view class="b-f p30 dis-flex" style="justify-content: space-between;flex-wrap: wrap;padding: 30upx;"> |
|||
<view class="b-f" style="flex:0 0 48%;" v-for="(goodsItem, index) in goodslistData" :key="index" @click="navigateTo(goodsItem.url,goodsItem.exdetail)"> |
|||
<image style="width: 100%;height: 330upx;border-radius: 6upx;" :src="goodsItem.logo" mode=""></image> |
|||
<view class="f-26 col-3 p-top-bom-10" style="width: 320upx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ goodsItem.goods_name }}</view> |
|||
<view class="f-26 f-w c-ff4444 p-top-20" v-if="goodsItem.is_charge === '1'"> |
|||
{{ goodsItem.price }} |
|||
<text style="font-weight: 400;">元</text> |
|||
</view> |
|||
<view class="f-26 f-w c-ff4444 p-top-20" v-else> |
|||
免费 |
|||
</view> |
|||
<view class="dis-flex" style="padding-bottom: 30upx;"> |
|||
<view class="flex-box f-24 col-9" style=""> |
|||
{{ goodsItem.vipstatus == 0 ? '无限制' : goodsItem.vipstatus == 1 ? '会员减免' : '会员特供' }} |
|||
</view> |
|||
<view class="flex-box f-24 col-9 t-r">已售{{ goodsItem.buy_num }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
<!-- 卡券3 --> |
|||
<block v-if="goodsStyleType === 'coupon3'"> |
|||
<view class="b-f" style="padding: 30upx;" v-for="(goodsItem, index) in goodslistData" :key="index"@click="navigateTo(goodsItem.url,goodsItem.exdetail)"> |
|||
<view ><image style="height: 380upx;border-radius: 6upx;width: 690upx;" :src="goodsItem.logo" mode=""></image></view> |
|||
<view class="f-26 col-9 dis-flex p-top-bom-10"> |
|||
<view class="flex-box">{{ goodsItem.storename }}</view> |
|||
<view class="flex-box t-r">{{ goodsItem.distance }}</view> |
|||
</view> |
|||
<view class="b-f p-top-10"> |
|||
<view |
|||
class="dis-il-block f-26 t-c" |
|||
style="height: 50upx;line-height: 50upx;border-radius: 4upx;width: 100upx;background-color: rgba(255,217,63);margin-right: 10upx;" |
|||
> |
|||
优惠券 |
|||
</view> |
|||
<view class="f-26 dis-il-block" style="width: 560upx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ goodsItem.goods_name }}</view> |
|||
</view> |
|||
<view class="p-top-bom-20 dis-flex"> |
|||
<view class=" f-34 c-ff4444 f-w flex-box" style="height: 50upx;line-height: 50upx;" v-if="goodsItem.is_charge === '1'"> |
|||
{{ goodsItem.price }} |
|||
<text style="font-weight: 400;font-size: 24upx;">元</text> |
|||
</view> |
|||
<view class=" f-34 c-ff4444 f-w flex-box" style="height: 50upx;line-height: 50upx;" v-else> |
|||
免费 |
|||
</view> |
|||
<view class="t-r flex-box" style="position: relative;"> |
|||
<view |
|||
class="t-c f-26 col-f" |
|||
style="height: 50upx; |
|||
line-height: 50upx; |
|||
border-radius: 4upx; |
|||
width: 100upx; |
|||
background-color: #FF4444; |
|||
position: absolute; |
|||
right: 0;" |
|||
> |
|||
{{goodsItem.is_charge === '1'?'购买':'领取'}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="dis-flex"> |
|||
<view class="flex-box f-24 col-9" style=""> |
|||
{{ goodsItem.vipstatus == 0 ? '无限制' : goodsItem.vipstatus == 1 ? '会员减免' : '会员特供' }} |
|||
</view> |
|||
<view class="flex-box f-24 col-9 t-r">已售{{ goodsItem.buy_num }}</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
<!-- 卡券4 --> |
|||
<block v-if="goodsStyleType === 'coupon4'"> |
|||
<view style="padding: 30upx;overflow: hidden;"> |
|||
<view class="dis-flex" style="overflow: auto;"> |
|||
<view class="dis-il-block" style="margin-right: 20upx;" v-for="(goodsItem, index) in goodslistData" :key="index"@click="navigateTo(goodsItem.url,goodsItem.exdetail)"> |
|||
<image |
|||
:src="goodsItem.logo" |
|||
mode="" |
|||
style="width: 250upx;height: 250upx;border-radius: 4upx;" |
|||
></image> |
|||
<view class="f-28 p-top-bom-10" style="width: 240upx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{goodsItem.goods_name}}</view> |
|||
<view class="dis-flex"> |
|||
<view class="f-30 c-ff4444 f-w flex-box" v-if="goodsItem.is_charge === '1'">￥{{goodsItem.price}}</view> |
|||
<view class="f-30 c-ff4444 f-w flex-box" v-else>免费</view> |
|||
<view class="f-24 col-9 t-r flex-box">{{ goodsItem.vipstatus == 0 ? '无限制' : goodsItem.vipstatus == 1 ? '会员减免' : '会员特供' }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
<!-- 商品样式3 --> |
|||
<block v-if="goodsStyleType === 'goodsStyle3'"> |
|||
<view class="b-f" :class="!isdiyPage ? 'bor-radius-10upx' : ''" :style="{ padding: !isdiyPage ? '20px' : isdiyPageStyle.padding + 'px',backgroundColor:'#ffffff'}"> |
|||
<view class="goodslist-i b-f" v-for="(item2, key2) in goodslistData" :key="key2"> |
|||
<view class="a" @click="navigateTo(item2.url,item2.exdetail)"> |
|||
<view class="goodslist-i-t" :style="{ width: imgstyle.width - isdiyPageStyle.padding * 2 - isdiyPageStyle.margin*2 + 'px', height: imgstyle.height - isdiyPageStyle.padding * 2 - isdiyPageStyle.margin*2 + 'px' }"> |
|||
<image class="image" :style="{ width: imgstyle.width - isdiyPageStyle.padding *2 - isdiyPageStyle.margin*2 + 'px', height: imgstyle.height - isdiyPageStyle.padding*2 - isdiyPageStyle.margin*2 + 'px' }" :src="item2.logo" mode=""></image> |
|||
<view class="Rank-logo f-24 t-c" v-if="isdiyPageParams.sort_icon == '1'">TOP {{ key2 + 1 }}</view> |
|||
<view class="rush_goods_mask" v-if="item2.goods_state == 2 || item2.stk == 0"> |
|||
<view class="rush_goods_mask_img"> |
|||
<image |
|||
class="img" |
|||
:src="imgfixUrls + 'rush_goods_end.png'" |
|||
v-if="item2.goods_state == 2 && item2.stk > 0" |
|||
mode="scaleToFill" |
|||
></image> |
|||
<image |
|||
class="img" |
|||
:src="imgfixUrls + 'rush_goods_sell_out.png'" |
|||
v-if="item2.stk === 0" |
|||
mode="scaleToFill" |
|||
></image> |
|||
</view> |
|||
</view> |
|||
<view class="qglist-i-t-bar" v-if="isdiyPageParams.buy_user == '1'"> |
|||
<view class="qglist-i-t-bar-d"> |
|||
<view class="qglist-i-t-bar-l"> |
|||
<view class="i icon iconfont icon-hotfill"></view> |
|||
已购 |
|||
<view class="em">{{ item2.user_num }}</view> |
|||
</view> |
|||
<view class="qglist-i-t-bar-r"> |
|||
<view class="i" v-for="(item2, key2) in item2.user_list" :key="key2"><image class="image" :src="item2" mode="aspectFill"></image></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="goodslist-i-c"> |
|||
<view class="goodslist-i-c-t dis-flex"> |
|||
<view class="goodslist-i-c-t-l">{{ item2.storename }}</view> |
|||
<view v-if="item2.distance" class="goodslist-i-c-t-r flex-box t-r" style="font-size: 26upx;"> |
|||
<text class="iconfont icon-location" style="color: #999999;padding-right: 10upx;font-size: 26upx;"></text> |
|||
{{ item2.distance }} |
|||
</view> |
|||
</view> |
|||
<view class="goodslist-i-c-c"> |
|||
<view class="a" @click="navigateTo(item2.url,item2.exdetail)"> |
|||
<view class="i" v-if="!!isdiyPageParams.goodsLabel">{{ isdiyPageParams.goodsLabel }}</view> |
|||
{{ item2.goods_name }} |
|||
</view> |
|||
</view> |
|||
<view class="goodslist-i-c-c2"> |
|||
<view class="dis-flex flex-y-center flex-x-between"> |
|||
<view class="h1 goods3-margin-16"> |
|||
{{ item2.price }} |
|||
<text>元</text> |
|||
</view> |
|||
<view class="span goods2-coupon-style dis-flex" v-if="item2.vipstatus == 1"> |
|||
<view class="i">会员</view> |
|||
<view class="coupon-price f-24 m-left12">优惠{{ item2.discount_price }}元</view> |
|||
</view> |
|||
</view> |
|||
<view class="h2" v-if="item2.stk > 0"><view class="a" @click="navigateTo(item2.url,item2.exdetail)" hover-class="none">购买</view></view> |
|||
<view class="h2 sell-out" v-if="item2.stk <= 0">已售罄</view> |
|||
</view> |
|||
<view class="goodslist-i-c-b"> |
|||
<view class="p"> |
|||
<view class="span" style="text-decoration:line-through;">市场价{{ item2.oldprice }}</view> |
|||
<view class="em" v-if="item2.pv">{{ item2.pv }}人喜欢</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
<PopManager :show="showtetx" :type="'center'" @clickmask="showtetx = false"> |
|||
<view class="showtetxDiv"> |
|||
<view class="showparserDiv"> |
|||
<jyf-parser domain="https://6874-html-foe72-1259071903.tcb.qcloud.la" gesture-zoom lazy-load ref="article" |
|||
selectable show-with-animation use-anchor :html="exdetail"></jyf-parser> |
|||
</view> |
|||
<view class="showtetxBtn"> |
|||
<view class="flex-box tetxcolse" @click="showtetx = false"> |
|||
取消 |
|||
</view> |
|||
<view class="flex-box tetxsluo" @click="shougo"> |
|||
确定 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</PopManager> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import App from '@/common/js/app.js'; |
|||
import PopManager from '@/components/template/PopManager'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
logos: true, |
|||
showtetx:false, |
|||
imgstyle: {}, |
|||
exdetail:{}, |
|||
goUrl:'' |
|||
}; |
|||
}, |
|||
components:{ |
|||
PopManager |
|||
}, |
|||
props: { |
|||
isdiyPage: { |
|||
type: Boolean, |
|||
default: function() { |
|||
return false; |
|||
} |
|||
}, |
|||
isdiyPageStyle: { |
|||
type: Object, |
|||
default: function() { |
|||
return {}; |
|||
} |
|||
}, |
|||
isdiyPageParams: { |
|||
type: Object, |
|||
default: function() { |
|||
return {}; |
|||
} |
|||
}, |
|||
goodslistData: { |
|||
type: Array, |
|||
default: function() { |
|||
return []; |
|||
} |
|||
}, |
|||
goodsStyleType: { |
|||
type: String, |
|||
default: function() { |
|||
return ''; |
|||
} |
|||
}, |
|||
issearch: { |
|||
type: String, |
|||
default: function() { |
|||
return '0'; |
|||
} |
|||
} |
|||
}, |
|||
computed: {}, |
|||
onShow() {}, |
|||
mounted() { |
|||
this.imgstyle = uni.getStorageSync('imgstyle'); |
|||
}, |
|||
methods: { |
|||
shougo(){ |
|||
App.navigationTo({ |
|||
url:this.goUrl |
|||
}); |
|||
this.goUrl = ''; |
|||
}, |
|||
goodsremind(id, item, index) { |
|||
let _this = this; |
|||
if (item.is_follow == 0) { |
|||
App._post_form( |
|||
'&p=rush&do=follow', |
|||
{ |
|||
id |
|||
}, |
|||
res => { |
|||
if (res.errno === 0) { |
|||
App.showSuccess(res.message, () => { |
|||
// _this.goodslistData.map(items=>{ |
|||
// if(items.id == id){ |
|||
// // item.is_follow = 1; |
|||
// _this.$set(items, 'is_follow', 1); |
|||
// _this.$set(items, 'is_show', 1); |
|||
// console.log(_this.goodslistData); |
|||
// _this.logos = false; |
|||
// _this.logos = true; |
|||
// } |
|||
// }) |
|||
// |
|||
_this.$emit('remindSuccess', _this.goodslistData, index); |
|||
}); |
|||
} else { |
|||
App.showError(res.message); |
|||
} |
|||
} |
|||
); |
|||
} else { |
|||
App._post_form( |
|||
'&p=rush&do=follow', |
|||
{ |
|||
id |
|||
}, |
|||
res => { |
|||
if (res.errno === 0) { |
|||
App.showSuccess(res.message, () => { |
|||
// _this.goodslistData.map(items=>{ |
|||
// if(items.id == id){ |
|||
// _this.$set(items, 'is_follow', 0); |
|||
// _this.$set(items, 'is_show', 0); |
|||
// _this.logos = false; |
|||
// _this.logos = true; |
|||
// } |
|||
// }) |
|||
_this.$emit('remindSuccess', _this.goodslistData, index); |
|||
}); |
|||
} else { |
|||
App.showError(res.message); |
|||
} |
|||
} |
|||
); |
|||
} |
|||
}, |
|||
navigateTo(url,exdetail) { |
|||
let isHttpUrl = url.indexOf('https') !== -1; |
|||
if(exdetail){ |
|||
this.goUrl = url; |
|||
this.exdetail = exdetail; |
|||
this.showtetx = true; |
|||
return |
|||
} |
|||
if (isHttpUrl) { |
|||
//#ifdef H5 |
|||
location.href = url; |
|||
//#endif |
|||
//#ifdef MP-WEIXIN |
|||
App.navigationTo({ |
|||
url |
|||
}); |
|||
//#endif |
|||
} else { |
|||
App.navigationTo({ |
|||
url |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '../../../common/css/old_diyPages'; |
|||
|
|||
.goods-title-twoList { |
|||
height: 2.6em; |
|||
line-height: 1.3em; |
|||
} |
|||
|
|||
.coupon-btnBtm { |
|||
bottom: 10upx !important; |
|||
} |
|||
|
|||
.goods-box:last-child { |
|||
margin-bottom: 0 !important; |
|||
} |
|||
|
|||
.goods-box2 { |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.goods-box2-item { |
|||
width: 48.5%; |
|||
|
|||
.goods2-image { |
|||
width: 100%; |
|||
height: 330upx; |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 330upx; |
|||
border-radius: 6upx; |
|||
} |
|||
|
|||
// 拼团 |
|||
.fight-num { |
|||
background-color: #fff6f6; |
|||
border-radius: 4upx; |
|||
padding: 2upx; |
|||
transform: scale(0.9); |
|||
margin-right: 14upx; |
|||
} |
|||
|
|||
.fight-person { |
|||
border: 1px solid #ff4444; |
|||
padding: 4upx; |
|||
transform: scale(0.85); |
|||
border-radius: 4upx; |
|||
} |
|||
|
|||
.fight-oldprice { |
|||
transform: scale(0.85); |
|||
} |
|||
|
|||
// 砍价 |
|||
.bargin-oldprice { |
|||
transform: scale(0.85); |
|||
} |
|||
} |
|||
|
|||
.goods-box { |
|||
.goodsBox-left { |
|||
width: 200upx; |
|||
height: 200upx; |
|||
background-size: 200upx 200upx; |
|||
background-repeat: no-repeat; |
|||
flex-shrink: 0; |
|||
border-radius: 6upx; |
|||
} |
|||
} |
|||
|
|||
.alreayOverImage-mask { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
background-color: rgba(0, 0, 0, 0.5); |
|||
|
|||
.alreayOverImage { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
} |
|||
} |
|||
|
|||
// 团购会员标签 |
|||
.groupon-vip { |
|||
width: 50upx; |
|||
// height: 28upx; |
|||
// line-height: 28upx; |
|||
background-color: #333333; |
|||
color: #eed196; |
|||
border-radius: 4upx; |
|||
transform: scale(0.85); |
|||
padding: 2upx 4upx; |
|||
margin: 0 6upx 0 6upx; |
|||
display: flex; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
//优惠价格 |
|||
.groupon-vipPrice { |
|||
width: 150upx; |
|||
} |
|||
|
|||
// 拼团数量box |
|||
.fight_goods-amount { |
|||
.fight_goods-sales { |
|||
background-color: #fff6f6; |
|||
border-radius: 4upx; |
|||
padding: 2upx; |
|||
} |
|||
|
|||
.fight_goods-num { |
|||
padding: 0 8upx; |
|||
border: 1px solid #ff4444; |
|||
border-radius: 4upx; |
|||
transform: scale(0.85); |
|||
} |
|||
} |
|||
|
|||
.marker_set { |
|||
position: absolute; |
|||
left: 10upx; |
|||
top: 0; |
|||
border-radius: 0 0 10upx 10upx; |
|||
padding: 4upx 12upx; |
|||
} |
|||
|
|||
.marker_setVipColor { |
|||
color: #eed196; |
|||
} |
|||
.showtetxDiv{ |
|||
width: 80vw; |
|||
height: 60vh; |
|||
// padding: 30upx; |
|||
border-radius: 20upx; |
|||
background-color: #ffffff; |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
.tetxsluo{ |
|||
background-color: #ff4444; |
|||
height: 80upx; |
|||
line-height: 80upx; |
|||
text-align: center; |
|||
color: #ffffff; |
|||
font-size: 34upx; |
|||
font-weight: bold; |
|||
} |
|||
.tetxcolse{ |
|||
background-color: #eeeeee; |
|||
color: #999999; |
|||
height: 80upx; |
|||
line-height: 80upx; |
|||
text-align: center; |
|||
font-size: 34upx; |
|||
font-weight: bold; |
|||
} |
|||
.showtetxBtn{ |
|||
display: flex; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
} |
|||
.showparserDiv{ |
|||
padding: 30upx; |
|||
overflow: auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,104 @@ |
|||
<!-- 积分 --> |
|||
<template> |
|||
<view class="container padding-box-all b-e6"> |
|||
<view class="integral-list b-f dis-flex m-btm20 p-r" @click="navgateto(integraItem['url'])" v-for="(integraItem,index) in integralList" |
|||
:key="index"> |
|||
<view class="integral-item-left m-right20" :style="{'background-image':'url('+integraItem['thumb']+')'}"></view> |
|||
<view class="integral-item-right flex-box dis-flex flex-dir-column flex-x-between"> |
|||
<view class="integral-title twolist-hidden f-28 col-3">{{integraItem['title']}}</view> |
|||
<view class="integral-condition f-24"> |
|||
<text class="f-w f-36 m-right10">{{integraItem['use_credit1']}}</text>{{subText['credittext']}} |
|||
<block v-if="integraItem['use_credit2']>0"> |
|||
<text class="m-left-right-10">+</text> |
|||
<text class="f-w f-36 m-right10">{{integraItem['use_credit2']}}</text>元 |
|||
</block> |
|||
</view> |
|||
<view class="goods-oldPrice col-9 f-24" style="text-decoration:line-through;">市场价:{{integraItem['old_price']}}元</view> |
|||
<view class="integral-btn col-f f-24 t-c" style="background-color: #FF4444;">去兑换</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import App from '@/common/js/app.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
props: { |
|||
integralList: { |
|||
type: Array, |
|||
default: function() { |
|||
return [] |
|||
} |
|||
} |
|||
}, |
|||
components: { |
|||
|
|||
}, |
|||
computed: { |
|||
subText() { |
|||
return uni.getStorageSync('TextSubstitution'); |
|||
} |
|||
}, |
|||
onShow() { |
|||
|
|||
}, |
|||
mounted() { |
|||
console.log(this.integralList) |
|||
}, |
|||
methods: { |
|||
navgateto(url) { |
|||
App.navigationTo({ |
|||
url |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.integral-list:last-child { |
|||
margin-bottom: 0 !important; |
|||
} |
|||
|
|||
.integral-list { |
|||
padding: 20upx; |
|||
border-radius: 10upx; |
|||
} |
|||
|
|||
.integral-item-left { |
|||
width: 200upx; |
|||
height: 200upx; |
|||
background-size: 200upx 200upx; |
|||
background-repeat: no-repeat; |
|||
flex-shrink: 0; |
|||
border-radius: 10upx; |
|||
} |
|||
|
|||
.integral-item-right { |
|||
color: #FF4444; |
|||
|
|||
.integral-title { |
|||
height: 2.6em; |
|||
line-height: 1.3em; |
|||
} |
|||
|
|||
.goods-oldPrice { |
|||
text-decoration: line-through; |
|||
margin-top: 8upx; |
|||
} |
|||
|
|||
.integral-btn { |
|||
position: absolute; |
|||
right: 20upx; |
|||
bottom: 24upx; |
|||
width: 130upx; |
|||
height: 50upx; |
|||
line-height: 50upx; |
|||
border-radius: 26upx; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,88 @@ |
|||
<!-- 选择地区组件 --> |
|||
<template> |
|||
<view class="container"> |
|||
<view class="region-box dis-flex flex-x-between flex-y-center" :style="'margin-bottom: '+(regionStyle.marginBottom*2)+'rpx; background-color: '+regionStyle.background"> |
|||
<view class="user-info dis-flex flex-y-center"> |
|||
<view class="user-info-avatar m-right10" :style="{'background-image':'url('+regionParams['avatar']+')'}"></view> |
|||
<view class="user-info-nickName f-30" :style="'color:'+regionStyle['nicknameColor']+';'">{{regionParams.nickname}}</view> |
|||
</view> |
|||
<view class="region-title dis-flex flex-y-center" @click="navGateto()"> |
|||
<view class="region-areaname f-30" :style="'color:'+regionStyle['areanameColor']+';'">{{currentaidCity}}</view> |
|||
<view v-if="regionStyle['showtype']==='0'" class="region-unfold iconfont icon-unfold" :style="'color:'+regionStyle['areanameColor']+';'"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import App from '@/common/js/app.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
props: { |
|||
regionStyle: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
}, |
|||
regionParams: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
components: { |
|||
|
|||
}, |
|||
computed: { |
|||
currentaidCity() { |
|||
let agencyData = uni.getStorageSync('agencyData') |
|||
if (!!agencyData) { |
|||
return agencyData.areaname |
|||
} else { |
|||
return '选择地区' |
|||
} |
|||
}, |
|||
}, |
|||
onShow() { |
|||
|
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
methods: { |
|||
navGateto() { |
|||
App.navigationTo({ |
|||
url: 'pages/subPages/city/city' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.container { |
|||
.region-box { |
|||
padding: 20upx 30upx; |
|||
|
|||
.user-info { |
|||
.user-info-avatar { |
|||
width: 60upx; |
|||
height: 60upx; |
|||
background-repeat: no-repeat; |
|||
background-size: 60upx 60upx; |
|||
} |
|||
} |
|||
|
|||
.region-title { |
|||
.region-unfold { |
|||
font-size: 30upx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,137 @@ |
|||
<template> |
|||
<view class="padding-box-all"> |
|||
<view class="enter-box"> |
|||
<view class="swiper-item dis-flex flex-y-center"> |
|||
<view class="swiper-item-left dis-flex p-r flex-y-center"> |
|||
<image class="swiperImage" :src="imgfixUrls + 'diypage/ruzhu.png'" v-if="imgfixUrls"></image> |
|||
<!-- <view class="swiper-title f-24 t-c">{{swiperParams.title}}</view> --> |
|||
<view class="swiper-box" v-if="swiperContainer.length > 0"> |
|||
<swiper :autoplay="true" :interval="3000" :duration="1000" :vertical="true" :circular="true" class="swiper-view"> |
|||
<swiper-item v-for="(item,index) in swiperContainer" :key="index"> |
|||
<view class="onelist-hidden f-28 swiperContainer">{{item.storename || item.commundesc}}</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
</view> |
|||
<view class="swiper-box" v-else> |
|||
<swiper :autoplay="true" :interval="3000" :duration="1000" :vertical="true" :circular="true" class="swiper-view"> |
|||
<swiper-item> |
|||
<view class="onelist-hidden f-28 swiperContainer">暂无入驻商户</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
</view> |
|||
<view class="fgx"></view> |
|||
</view> |
|||
<view class="swiper-item-right t-c f-28 col-f" @click="navgateto('pages/mainPages/Settled/Settled')">{{swiperParams.button || '我要入驻'}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from '@/common/js/app.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
imgUrl:'' |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.imgUrl = this.imgfixUrl |
|||
}, |
|||
components: { |
|||
|
|||
}, |
|||
props: { |
|||
swiperContainer: { |
|||
type: Array, |
|||
default: function() { |
|||
return [] |
|||
} |
|||
}, |
|||
swiperParams: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
navgateto(url) { |
|||
App.navigationTo({ |
|||
url: url |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.enter-box { |
|||
.swiper-item { |
|||
border-radius: 60upx; |
|||
height: 84upx; |
|||
|
|||
.swiper-item-left { |
|||
background-color: #FFFFFF; |
|||
border-radius: 40upx 0 0 40upx; |
|||
height: 84upx; |
|||
border: 5upx solid #F1F1F1; |
|||
border-right: none; |
|||
.swiperImage { |
|||
width: 50upx; |
|||
height: 36upx; |
|||
margin: 0 20upx 0 30upx; |
|||
} |
|||
.fgx{ |
|||
width: 2upx; |
|||
height: 30upx; |
|||
position: absolute; |
|||
left: 18%; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
background-color: #DDDDDD; |
|||
} |
|||
.swiper-title { |
|||
padding: 4upx 24upx; |
|||
width: 50upx; |
|||
color: red; |
|||
} |
|||
|
|||
.swiper-title::after { |
|||
content: " "; |
|||
width: 2upx; |
|||
height: 60upx; |
|||
font-size: 0; |
|||
background-color: #bdbdbd; |
|||
position: absolute; |
|||
left: 22%; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
} |
|||
|
|||
.swiper-box { |
|||
.swiper-view { |
|||
padding: 0 10upx 0 30upx; |
|||
width: 400upx; |
|||
height: 84upx; |
|||
line-height: 84upx; |
|||
|
|||
.swiperContainer { |
|||
width: 350upx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.swiper-item-right { |
|||
flex: 1; |
|||
height: 100%; |
|||
line-height: 84upx; |
|||
background-image: linear-gradient(to right, rgba(252,104,104,1) 0% , rgba(255,68,68,1) 100%); |
|||
border-radius: 0 40px 40px 0; |
|||
border: 5upx solid #f9f9f9; |
|||
border-left: none; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,290 @@ |
|||
<!-- 商铺信息 --> |
|||
<template> |
|||
<view class="container"> |
|||
<!-- 商铺详情3 --> |
|||
<view class="shopInfo-3"> |
|||
<view class="shopInfo-tabbar dis-flex b-f"> |
|||
<view class="tabbar-item flex-box t-c p-r" v-for="(tabItem,index) in shopinfoData" @click="selectTabbar(tabItem)" :key="index"> |
|||
<text class="f-28" :class="currentTab===tabItem.order?'tabbar-item-active':''">{{tabItem['title']}}</text> |
|||
<view class="tabbar-item-active-btm" v-if="currentTab===tabItem.order"></view> |
|||
</view> |
|||
</view> |
|||
<view class="shop b-color-f8" style="padding: 20upx 30upx 60upx;"> |
|||
<view class="shangjia" style="padding-bottom: 80upx;"> |
|||
<view class="shangjia-i" :class="{shangjiaISty: item2.goods.length == 0}" v-for="(item2, key2) in shopInfoList" |
|||
:key="key2"> |
|||
<view class="a shangjia-i-t" @click="navigateTo(item2.shop_url,item2,shopInfoList)"> |
|||
<view class="shangjia-i-l"> |
|||
<image class="image" :src="item2.logo" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="shangjia-i-r"> |
|||
<view class="shangjia-i-r-d"> |
|||
<view class="dis-flex flex-y-center flex-x-between"> |
|||
<view class="shop3-title-width shangjia-i-r-t1 over-omit onelist-hidden">{{ item2.storename }}</view> |
|||
<view class="store-containerIcon dis-flex flex-y-center"> |
|||
<image :src="imgfixUrls + 'citydeliveryicon.png'" class="image30" v-if="item2.deliverystatus == 1" /> |
|||
<image :src="imgfixUrls + 'homePage/home_logo2.png'" class="image30" v-if="item2['attestation']['attestation'] == 2" /> |
|||
<image :src="imgfixUrls + 'homePage/home_logo3.png'" class="image30" v-if="item2['attestation']['bondflag'] == 1" /> |
|||
<image :src="imgfixUrls + 'diypage/720icon.png'" mode="" class="m-right10" v-if="item2.panorama===1"></image> |
|||
<image :src="imgfixUrls + 'diypage/videoicon.png'" mode="" v-if="item2.videourl===1"></image> |
|||
</view> |
|||
</view> |
|||
<view class="shangjia-i-r-t2 over-omit dis-flex flex-x-between flex-y-center"> |
|||
<view class="dis-flex flex-y-center"> |
|||
<view class="shangjia-i-r-t2-icon"> |
|||
<view class="star star-dark"> |
|||
<view class="i icon iconfont icon-shoucangxiao" v-for="(item3, key3) in 5" :key="key3"></view> |
|||
</view> |
|||
<view class="star star-light"> |
|||
<view class="star-width" :style="'width:'+(item2.score / 5) * 100+'%;'"> |
|||
<view class="i icon iconfont icon-shoucangxiao" v-for="(item3, key3) in 5" :key="key3"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="f-28 col-6 star-grade">{{item2.score}}分</view> |
|||
</view> |
|||
<view class="shop3-distance f-24 col-6" v-if="!!item2.distance">{{item2.distance}}</view> |
|||
</view> |
|||
<view class="shangjia-i-r-t3 over-omit"> |
|||
<view class="p" v-html="item2.storehours"></view> |
|||
</view> |
|||
<view class="shangjia-i-r-t3 over-omit" v-if="item2.catename"> |
|||
<view class="p">{{item2.catename}}</view> |
|||
</view> |
|||
<view class="shangjia-i-r-t4 over-omit"> |
|||
<view v-for="(item3,index3) in item2.tags" class="tags_view" :key="index3">{{item3}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="shangjia-i-b" style="margin-top: 20upx;" v-if="((shopFold && shopFoldIndex == key2) || (shopFoldIndex !== key2)) && item2.goods.length > 0"> |
|||
<view class="shangjia-i-b-t1" v-if="item2.goods.length <= 2"> |
|||
<view class="shangjia-i-b-i" v-for="(tag, key3) in item2.goods" :key="key3" v-if="key3 == 0"> |
|||
<view class="em" :class="tag.css">{{ tag.tag }}</view> |
|||
<view class="span">{{ tag.name }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="shangjia-i-b-t1" @click="shangjiaFold(key2)" v-if="item2.goods.length > 2"> |
|||
<view class="i icon iconfont icon-unfold"></view> |
|||
<view class="shangjia-i-b-i" v-for="(tag, key3) in item2.goods" :key="key3" v-if="key3 == 0"> |
|||
<view class="em" :class="tag.css">{{ tag.tag }}</view> |
|||
<view class="span">{{ tag.name }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="shangjia-i-b-i" v-for="(tag, key3) in item2.goods" :key="key3" v-if="item2.goods.length == 2 && key3 == 1"> |
|||
<view class="em" :class="tag.css">{{ tag.tag }}</view> |
|||
<view class="span">{{ tag.name }}</view> |
|||
</view> |
|||
<view class="shangjia-i-b-t2" v-if="item2.goods.length > 2"> |
|||
<view class="em" :class="tag.css" v-for="(tag, key3) in item2.goods" :key="key3" v-if="key3 > 0">{{ tag.tag }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="shangjia-i-b" style="margin-top: 20upx;" v-if="!shopFold && shopFoldIndex == key2 && item2.goods.length > 2"> |
|||
<view class="shangjia-i-b-t1" @click="shangjiaUpFold(key2)"> |
|||
<view class="i icon iconfont icon-fold"></view> |
|||
<view class="shangjia-i-b-i" v-for="(tag, key3) in item2.goods" :key="key3"> |
|||
<view class="em" :class="tag.css">{{ tag.tag }}</view> |
|||
<view class="span">{{ tag.name }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view style=" background-color: #F8F8F8;"> |
|||
<load-more :isMore="loadingMore"></load-more> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from '@/common/js/app.js' |
|||
import loadMore from '@/components/template/loadmore.vue' |
|||
export default { |
|||
data() { |
|||
return { |
|||
currentTab: null, |
|||
shopFold: true, |
|||
shopFoldIndex: -1, |
|||
shopInfoList: null, |
|||
pageTotal: null, |
|||
current_page: 1, |
|||
tabItemInfo: {}, |
|||
scrollTop: 0, |
|||
loadingMore: false, |
|||
mobileHeight: 0, |
|||
img:'' |
|||
} |
|||
}, |
|||
components: { |
|||
loadMore |
|||
}, |
|||
props: { |
|||
shopinfoData: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
}, |
|||
shopinfoStyle: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
onShow() { |
|||
|
|||
}, |
|||
computed:{ |
|||
curLoction(){ |
|||
return uni.getStorageSync('curLoction') |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.img = this.imgfixUrl; |
|||
uni.$on('isBottomMore',this.shopInfomore); |
|||
}, |
|||
destroyed() { |
|||
uni.$off('isBottomMore',this.shopInfomore); |
|||
}, |
|||
watch: { |
|||
'shopinfoData': { |
|||
handler(newData, oldData) { |
|||
if (!!newData && Object.keys(newData)['length'] > 0) { |
|||
let tabItem = Object.keys(newData)[0]; |
|||
this.selectTabbar(newData[tabItem]) |
|||
} |
|||
}, |
|||
immediate: true, |
|||
deep: true |
|||
} |
|||
}, |
|||
methods: { |
|||
selectTabbar(tabItem, page = 1, isPage = false) { |
|||
let _this = this, |
|||
requestData = { |
|||
order: tabItem.order, |
|||
is_total: "1", |
|||
page, |
|||
lat: !!_this.curLoction ? _this.curLoction.latitude : '', |
|||
lng: !!_this.curLoction ? _this.curLoction.longitude : '' |
|||
}; |
|||
App._post_form('&p=store&do=homeList', requestData, res => { |
|||
let storeList = res.data.list; |
|||
for (let i = 0; i < storeList.length; i++) { |
|||
let goodsList = []; |
|||
for (let j in storeList[i].goods) { |
|||
let goodsData = storeList[i].goods[j]; |
|||
if (goodsData !== '') { |
|||
if (j == 'active') { |
|||
goodsData.css = 'qiang' |
|||
goodsData.tag = '抢' |
|||
} else if (j == 'coupon') { |
|||
goodsData.css = 'hui' |
|||
goodsData.tag = '券' |
|||
} else if (j == 'fightgroup') { |
|||
goodsData.css = 'pin' |
|||
goodsData.tag = '拼' |
|||
} else if (j == 'groupon') { |
|||
goodsData.css = 'tuan' |
|||
goodsData.tag = '团' |
|||
} else if (j == 'halfcard') { |
|||
goodsData.css = 'ka' |
|||
goodsData.tag = '卡' |
|||
} else if (j == 'packages') { |
|||
goodsData.css = 'li' |
|||
goodsData.tag = '礼' |
|||
}else if (j == 'bargain') { |
|||
goodsData.css = 'kan' |
|||
goodsData.tag = '砍' |
|||
} |
|||
goodsList.push(goodsData); |
|||
} |
|||
} |
|||
storeList[i].goods = goodsList; |
|||
} |
|||
if (isPage) { |
|||
if (storeList.length > 0) { |
|||
_this["shopInfoList"].push(...storeList); |
|||
} else { |
|||
_this.loadingMore = true; |
|||
} |
|||
} else { |
|||
_this.setData({ |
|||
current_page: 1, |
|||
shopInfoList: storeList, |
|||
currentTab: tabItem.order, |
|||
pageTotal: res.data.total, |
|||
tabItemInfo: tabItem, |
|||
loadingMore: storeList.length === 0 || _this.current_page === res.data.total, |
|||
scrollTop: 0 |
|||
}) |
|||
} |
|||
}, false, () => {}) |
|||
}, |
|||
navigateTo(url,aa,bb) { |
|||
|
|||
let isHttpUrl = url.indexOf('https') !== -1; |
|||
if (isHttpUrl) { |
|||
location.href = url; |
|||
} else { |
|||
App.navigationTo({ |
|||
url: url |
|||
}) |
|||
} |
|||
console.log(url,isHttpUrl); |
|||
}, |
|||
shangjiaFold(key2) { |
|||
this.shopFold = false |
|||
this.shopFoldIndex = key2 |
|||
}, |
|||
shangjiaUpFold(key2) { |
|||
this.shopFold = true |
|||
this.shopFoldIndex = key2 |
|||
}, |
|||
shopInfomore() { |
|||
if (this.current_page >= this.pageTotal) { |
|||
this.loadingMore = true; |
|||
return false; |
|||
} |
|||
console.log(this.current_page,this.pageTotal) |
|||
this.selectTabbar(this.tabItemInfo, ++this.current_page, true); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../../common/css/old_diyPages"; |
|||
|
|||
// 商铺3 |
|||
.shopInfo-3 { |
|||
.shopInfo-tabbar { |
|||
.tabbar-item-active { |
|||
color: #FF4444; |
|||
} |
|||
|
|||
.tabbar-item { |
|||
padding-bottom: 20upx; |
|||
&>text { |
|||
display: inline-block; |
|||
height: 70upx; |
|||
line-height: 60upx; |
|||
} |
|||
} |
|||
|
|||
.tabbar-item-active-btm { |
|||
position: absolute; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
bottom: 0; |
|||
width: 56upx; |
|||
height: 8upx; |
|||
background: rgba(255, 68, 68, 1); |
|||
border-radius: 8upx 8upx 0 0; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,841 @@ |
|||
<template> |
|||
<view class="container" :style="'margin-bottom:'+(tabStyle.marginBottom*2)+'rpx;' + 'background-color:'+ (currentTab==='dating' || tabParms.goods_type ==='dating'?'#ffffff':'#f7f7f7') +';'"> |
|||
<block v-if="controType==='options'"> |
|||
<view class="tabBar-box"> |
|||
<scroll-view class="scroll-view" scroll-x :style="'background-color:'+tabStyle.background+';'" :scroll-left="scroll_left"> |
|||
<view class="tabBar-list"> |
|||
<!-- currentTab===tabBarItem.type?'color:'+tabStyle.selectBg+';':+tabStyle.defaultBg+';' --> |
|||
<view @click="selectTabBar(tabData[key],'','',index + 1)" class="tabBar-item p-r f-32 t-c onelist-hidden" v-for="(tabBarItem,key,index) in tabData" |
|||
:key="index" :style="{color:(currentTab===tabBarItem.type?tabStyle.selectBg:tabStyle.defaultBg)}">{{tabBarItem.nickname}} |
|||
<!-- :style="'color:'+tabStyle.default,currentTab===tabBarItem.type?'background-color:'+tabStyle.selectBg+';':''" --> |
|||
<view :class="{'selectTabBar':currentTab===tabBarItem.type}" :style="{'color':tabStyle.default,'background-color':currentTab===tabBarItem.type?tabStyle.selectBg:''}"></view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<view class="b-f" v-if="currentTab==='pocket' && !!children && children.length > 0" style="padding: 0 30upx 30upx;"> |
|||
<v-tabs |
|||
:color="'#333333'" |
|||
:bgColor="'#ffffff'" |
|||
:activeColor="'#ffffff'" |
|||
:height="'40rpx'" |
|||
:paddingItem="'2rpx 20rpx'" |
|||
:fontSize="'24rpx'" |
|||
:activeFontSize="'24rpx'" |
|||
:pillsColor="'#ff4444'" |
|||
:pillsBorderRadius="'60rpx'" |
|||
v-model="sort" |
|||
:field="'title'" |
|||
:tabs="children" |
|||
:pills="true" |
|||
line-height="0" |
|||
:bold="false" |
|||
@change="vtabschange"></v-tabs> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
<block v-if="controType==='options2'"> |
|||
<view class="tabBar-cn"> |
|||
<view class="tabBar-box"> |
|||
<scroll-view class="scroll-view" scroll-x :scroll-left="scroll_left"> |
|||
<view class="tabBar-list" :style="'background-color:'+tabStyle.background+';'"> |
|||
<view @click="selectTabBar_two(tabBarItem,index)" class="tabBar-item2 p-r f-32 t-c" v-for="(tabBarItem,index) in tabData" |
|||
:key="index" :style="{'color':currentTwoTab==index?tabStyle.selectBg:tabStyle.defaultBg,'width':tabParms.total>5?'20%': 100 / tabParms.total+'%'}">{{tabBarItem.name}} |
|||
<view :class="{'selectTabBar':currentTwoTab==index}" :style="currentTwoTab==index?'background-color:'+tabStyle.selectBg+';':''"></view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
<block v-if="!!tabParms.class_list&&tabParms.class_list.length>0"> |
|||
<view class="tabBar-listTwo-box b-e6"> |
|||
<scroll-view class="scroll-view" scroll-x="true" :scroll-left="scroll_left2"> |
|||
<view class="tabBar-Twolist"> |
|||
<view class="tabBar-Twolist-all m-right50 f-24 col-3 dis-il-block" :class="{tabClassiflySelect:classifly=='0'}" |
|||
@click="selectClassifly('0',1,false,-1,'全部')">全部</view> |
|||
<view class="f-24 col-3 m-right50 dis-il-block" :class="{tabClassiflySelect:classifly===listItem.id}" v-for="(listItem,index) in tabParms.class_list" |
|||
@click="selectClassifly(listItem.id,1,false,index,listItem.name)" :key="index">{{listItem.name}}</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
</block> |
|||
<!-- 商家信息 --> |
|||
<block v-if="currentTab === 'store'"> |
|||
<view class="shop " style="background-color: #F8F8F8;"> |
|||
<view class="shangjia"> |
|||
<view class="shangjia-i" style="margin: 30upx;" :class="{shangjiaISty: item2.goods.length == 0}" v-for="(item2, key2) in tabDataList" |
|||
:key="key2"> |
|||
<view class="a shangjia-i-t" @click="navigateTo(item2.shop_url)"> |
|||
<view class="shangjia-i-l"> |
|||
<image class="image" :src="item2.logo" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="shangjia-i-r"> |
|||
<view class="shangjia-i-r-d"> |
|||
<view class="dis-flex flex-y-center flex-x-between"> |
|||
<view class="shop3-title-width shangjia-i-r-t1 over-omit onelist-hidden">{{ item2.storename }}</view> |
|||
<view class="store-containerIcon dis-flex flex-y-center"> |
|||
<image :src="imgfixUrls + 'homePage/home_logo2.png'" class="image30" v-if="item2['attestation']['attestation'] == 2" /> |
|||
<image :src="imgfixUrls + 'homePage/home_logo3.png'" class="image30" v-if="item2['attestation']['bondflag']?item2['attestation']['bondflag'] == 1:false" /> |
|||
<image :src="imgfixUrls + 'diypage/720icon.png'" mode="" class="m-right10" v-if="item2.panorama===1"></image> |
|||
<image :src="imgfixUrls + 'diypage/videoicon.png'" mode="" v-if="item2.videourl===1"></image> |
|||
</view> |
|||
</view> |
|||
<view class="shangjia-i-r-t2 over-omit dis-flex flex-x-between flex-y-center"> |
|||
<view class="dis-flex flex-y-center"> |
|||
<view class="shangjia-i-r-t2-icon"> |
|||
<view class="star star-dark"> |
|||
<view class="i icon iconfont icon-shoucangxiao" v-for="(item3, key3) in 5" :key="key3"></view> |
|||
</view> |
|||
<view class="star star-light"> |
|||
<view class="star-width" :style="'width:'+(item2.score / 5) * 100+'%;'"> |
|||
<view class="i icon iconfont icon-shoucangxiao" v-for="(item3, key3) in 5" :key="key3"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="f-28 col-6 star-grade">{{item2.score}}分</view> |
|||
</view> |
|||
<view class="shop3-distance f-24 col-6" v-if="!!item2.distance">{{item2.distance}}</view> |
|||
</view> |
|||
<view class="shangjia-i-r-t3 over-omit"> |
|||
<view class="p" v-html="item2.storehours"></view> |
|||
</view> |
|||
<view class="shangjia-i-r-t4 over-omit"> |
|||
<view v-for="(item3,index3) in item2.tags" class="tags_view" :key="index3">{{item3}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="shangjia-i-b" v-if="((shopFold && shopFoldIndex == key2) || (shopFoldIndex !== key2)) && item2.goods.length > 0"> |
|||
<view class="shangjia-i-b-t1" v-if="item2.goods.length <= 2"> |
|||
<view class="shangjia-i-b-i" v-for="(tag, key3) in item2.goods" :key="key3" v-if="key3 == 0"> |
|||
<view class="em" :class="tag.css">{{ tag.tag }}</view> |
|||
<view class="span">{{ tag.name }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="shangjia-i-b-t1" @click="shangjiaFold(key2)" v-if="item2.goods.length > 2"> |
|||
<view class="i icon iconfont icon-unfold"></view> |
|||
<view class="shangjia-i-b-i" v-for="(tag, key3) in item2.goods" :key="key3" v-if="key3 == 0"> |
|||
<view class="em" :class="tag.css">{{ tag.tag }}</view> |
|||
<view class="span">{{ tag.name }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="shangjia-i-b-i" v-for="(tag, key3) in item2.goods" :key="key3" v-if="item2.goods.length == 2 && key3 == 1"> |
|||
<view class="em" :class="tag.css">{{ tag.tag }}</view> |
|||
<view class="span">{{ tag.name }}</view> |
|||
</view> |
|||
<view class="shangjia-i-b-t2" v-if="item2.goods.length > 2"> |
|||
<view class="em" :class="tag.css" v-for="(tag, key3) in item2.goods" :key="key3" v-if="key3 > 0">{{ tag.tag }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="shangjia-i-b" v-if="!shopFold && shopFoldIndex == key2 && item2.goods.length > 2"> |
|||
<view class="shangjia-i-b-t1" @click="shangjiaUpFold(key2)"> |
|||
<view class="i icon iconfont icon-fold"></view> |
|||
<view class="shangjia-i-b-i" v-for="(tag, key3) in item2.goods" :key="key3"> |
|||
<view class="em" :class="tag.css">{{ tag.tag }}</view> |
|||
<view class="span">{{ tag.name }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
<!-- 抢购 --> |
|||
<block v-if="currentTab ==='rush' || tabParms.goods_type ==='rush'"> |
|||
<view class="b-e6 padding-box-all" style="padding-bottom: 70upx;"> |
|||
<goods-style goodsStyleType="rush" :goodslistData="rush_goodsList" @remindSuccess="remindSuccess"></goods-style> |
|||
</view> |
|||
</block> |
|||
<!-- 卡券 --> |
|||
<block v-if="currentTab==='coupon' || tabParms.goods_type ==='coupon'"> |
|||
<view class="b-e6 padding-box-all" style="padding-bottom: 70upx;"> |
|||
<goods-style goodsStyleType="coupon" :goodslistData="couponList"></goods-style> |
|||
</view> |
|||
</block> |
|||
<!-- 折扣 --> |
|||
<block v-if="currentTab==='halfcard'"> |
|||
<view class="b-e6 padding-box-all" style="padding-bottom: 70upx;"> |
|||
<card-components :disCardData_two="tabDataList" disCardType="disCard1" :disType="2"></card-components> |
|||
</view> |
|||
</block> |
|||
<!-- 拼团 --> |
|||
<block v-if="currentTab==='fight' || tabParms.goods_type==='wlfightgroup'"> |
|||
<view class="b-e6 padding-box-all" style="padding-bottom: 70upx;"> |
|||
<goods-style goodsStyleType="fight" :goodslistData="fightList"></goods-style> |
|||
</view> |
|||
</block> |
|||
<!-- 同城 --> |
|||
<block v-if="currentTab==='pocket'"> |
|||
<citywide :citywideList="tabDataList" @getaver="getaver"></citywide> |
|||
</block> |
|||
<!-- 团购 --> |
|||
<block v-if="currentTab ==='groupon' || tabParms.goods_type ==='groupon'"> |
|||
<view class="b-e6 padding-box-all" style="padding-bottom: 70upx;"> |
|||
<goods-style goodsStyleType="groupon" :goodslistData="gpOrbrList"></goods-style> |
|||
</view> |
|||
</block> |
|||
<!-- 砍价 --> |
|||
<block v-if="currentTab ==='bargain' || tabParms.goods_type ==='bargain'"> |
|||
<view class="b-e6 padding-box-all" style="padding-bottom: 70upx;"> |
|||
<goods-style goodsStyleType="bargain" :goodslistData="gpOrbrList"></goods-style> |
|||
</view> |
|||
</block> |
|||
<!-- 大礼包 --> |
|||
<block v-if="currentTab==='package'"> |
|||
<view class="b-e6 padding-box-all" style="padding-bottom: 70upx;"> |
|||
<giftbag-components :giftData_two="tabDataList" giftType="gift_type1" :disType="2"></giftbag-components> |
|||
</view> |
|||
</block> |
|||
<!-- 积分 --> |
|||
<block v-if="currentTab==='consumption'"> |
|||
<integral :integralList="tabDataList"></integral> |
|||
</block> |
|||
<!-- 活动 --> |
|||
<block v-if="currentTab==='activity' || tabParms.goods_type ==='activity'"> |
|||
<activity :tabDataList="activityList"></activity> |
|||
</block> |
|||
<!-- 招聘 --> |
|||
<block v-if="currentTab==='recruit' || tabParms.goods_type ==='recruit'"> |
|||
<work-List :inviteList="inviteList" :tabStyle="true"></work-List> |
|||
</block> |
|||
<!-- 相亲 --> |
|||
<block v-if="currentTab==='dating' || tabParms.goods_type ==='dating'"> |
|||
<view class="nav-content"> |
|||
<view class="nav-item" v-for="(items,indexs) in datingList" :key="indexs"> |
|||
<user :memberInfo="items"></user> |
|||
</view> |
|||
</view> |
|||
|
|||
</block> |
|||
<!-- 家政 --> |
|||
<block v-if="currentTab==='housekeep' && tabParms.goods_type ==='housekeep'"> |
|||
<view style="padding: 30upx;"> |
|||
<view v-for="(items,indexs) in tabDataTwoList" :key="indexs"> |
|||
<homemaking-item :items="items"></homemaking-item> |
|||
</view> |
|||
</view> |
|||
|
|||
</block> |
|||
<block v-else-if="currentTab==='housekeep2'"> |
|||
<view style="padding: 30upx;"> |
|||
<view style="margin-bottom: 30upx;" v-for="(items,indexs) in tabDataTwoList" :key="indexs"> |
|||
<demand-item :demanItem="items"></demand-item> |
|||
</view> |
|||
</view> |
|||
|
|||
</block> |
|||
<block v-else-if="currentTab==='housekeep3'"> |
|||
<view style="padding: 30upx;"> |
|||
<view style="margin-bottom: 30upx;" v-for="(items,indexs) in tabDataTwoList" :key="indexs"> |
|||
<myser-item :states="false" :serItem="items"></myser-item> |
|||
</view> |
|||
</view> |
|||
|
|||
</block> |
|||
|
|||
<view style="padding-bottom: 10px; background-color: #F8F8F8;"> |
|||
<load-more :isMore="loadingMore"></load-more> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import App from '@/common/js/app.js' |
|||
import demandItem from '@/components/template/demandItem.vue' |
|||
import myserItem from '@/components/template/myserItem.vue' |
|||
import cardComponents from '@/components/page/pageComponents/discountCard.vue' |
|||
import giftbagComponents from '@/components/page/pageComponents/giftbag.vue' |
|||
import citywide from '@/components/page/pageComponents/citywide.vue' |
|||
import integral from '@/components/page/pageComponents/integral.vue' |
|||
import goodsStyle from '@/components/page/pageComponents/goodsStyle.vue' |
|||
import loadMore from '@/components/template/loadmore.vue' |
|||
import activity from '@/components/template/activityData.vue' |
|||
import workList from '@/components/template/workList.vue' |
|||
import user from '@/components/template/user.vue' |
|||
import homemakingItem from '@/components/template/homemakingItem.vue' |
|||
import vTabs from '@/components/v-tabs/v-tabs.vue' |
|||
export default { |
|||
data() { |
|||
return { |
|||
scroll_left: 0, |
|||
currentTab: null, |
|||
currentTwoTab: 0, |
|||
classifly: "0", |
|||
tabDataList: null, |
|||
tabDataTwoList: null, |
|||
shopFold: true, |
|||
shopFoldIndex: -1, |
|||
Twotabtype: null, |
|||
requestData: {}, |
|||
loadingMore: false, |
|||
pageTotal: null, |
|||
current_page: 1, |
|||
currentTabItem: {}, |
|||
requestTwoSelectInfo: null, |
|||
scroll_left2: 0, |
|||
imgUrl:'', |
|||
cate_id:'', |
|||
onekey:'', |
|||
sort:0, |
|||
children:[], |
|||
idIndex:'' |
|||
} |
|||
}, |
|||
props: { |
|||
tabData: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
}, |
|||
tabStyle: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
}, |
|||
tabParmsType: { |
|||
type: Array, |
|||
default: function() { |
|||
return [] |
|||
} |
|||
}, |
|||
controType: { |
|||
type: String, |
|||
default: function() { |
|||
return '' |
|||
} |
|||
}, |
|||
city_id:{ |
|||
typr:String, |
|||
default:function(){ |
|||
return '' |
|||
} |
|||
} |
|||
}, |
|||
components: { |
|||
cardComponents, |
|||
giftbagComponents, |
|||
citywide, |
|||
integral, |
|||
goodsStyle, |
|||
loadMore, |
|||
activity, |
|||
workList, |
|||
user, |
|||
homemakingItem, |
|||
demandItem, |
|||
myserItem, |
|||
vTabs |
|||
}, |
|||
onShow() { |
|||
|
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
mounted() { |
|||
this.imgUrl = this.imgfixUrl; |
|||
// debugger |
|||
uni.$on('tabisBottomMore', this.tabInfomore); |
|||
}, |
|||
destroyed() { |
|||
uni.$off('tabisBottomMore', this.tabInfomore); |
|||
}, |
|||
computed: { |
|||
istabbarcontro() { |
|||
return this.$store.state.istabcontro; |
|||
}, |
|||
rush_goodsList: { |
|||
get() { |
|||
return this.currentTab === 'rush' ? this.tabDataList : this.tabDataTwoList; |
|||
}, |
|||
set(val) { |
|||
return val |
|||
} |
|||
}, |
|||
fightList() { |
|||
return this.currentTab === 'fight' ? this.tabDataList : this.tabDataTwoList; |
|||
}, |
|||
gpOrbrList() { |
|||
return (this.currentTab === 'groupon' || this.currentTab === 'bargain') ? this.tabDataList : this.tabDataTwoList; |
|||
}, |
|||
couponList() { |
|||
return this.currentTab === 'coupon' ? this.tabDataList : this.tabDataTwoList; |
|||
}, |
|||
activityList() { |
|||
return this.currentTab === 'activity' ? this.tabDataList : this.tabDataTwoList; |
|||
}, |
|||
inviteList() { |
|||
return this.currentTab === 'recruit' ? this.tabDataList : this.tabDataTwoList; |
|||
}, |
|||
datingList() { |
|||
return this.currentTab === 'dating' ? this.tabDataList : this.tabDataTwoList; |
|||
}, |
|||
tabParms() { |
|||
return this.tabParmsType.length > 0 ? this.tabParmsType[0] : this.tabParmsType |
|||
}, |
|||
curLoction() { |
|||
return uni.getStorageSync('curLoction') |
|||
} |
|||
}, |
|||
watch: { |
|||
'tabData': { |
|||
handler(newData, oldData) { |
|||
if (!!newData && Object.keys(newData)['length'] > 0) { |
|||
let tabItem = Object.keys(newData)[0]; |
|||
if (this.controType === 'options2') { |
|||
if(this.onekey){ |
|||
this.selectTabBar_two(newData[this.onekey],0) |
|||
}else{ |
|||
this.selectTabBar_two(newData[tabItem],0) |
|||
} |
|||
|
|||
} else { |
|||
this.selectTabBar(newData[tabItem]) |
|||
} |
|||
} |
|||
}, |
|||
immediate: true, |
|||
deep: true |
|||
}, |
|||
}, |
|||
methods: { |
|||
vtabschange(e){ |
|||
this.sort = e; |
|||
this.selectTabBar(this.currentTabItem,1,false,'',e) |
|||
}, |
|||
handleMemberClick(item) { |
|||
App.navigationTo({ |
|||
url: `pages/subPages2/blindDate/member/detail?id=${item.id}` |
|||
}) |
|||
}, |
|||
getaver(id,bor){ |
|||
let _this = this; |
|||
_this.tabDataList.forEach(item=>{ |
|||
if(item.id == id){ |
|||
if(bor){ |
|||
_this.$set(item,'fabulous_num',item.fabulous_num + 1); |
|||
item.look++; |
|||
_this.$set(item,'is_fabulous',1); |
|||
item.fabulous_avatar.push(uni.getStorageSync('userinfo').avatar); |
|||
// item.fabulous_avatar.forEach((items,index)=>{ |
|||
// if(items == uni.getStorageSync('userinfo').avatar){ |
|||
// item.fabulous_avatar.splice(index, 1); |
|||
// } |
|||
// }) |
|||
}else{ |
|||
_this.$set(item,'fabulous_num',item.fabulous_num - 1); |
|||
item.look--; |
|||
_this.$set(item,'is_fabulous',0); |
|||
item.fabulous_avatar.forEach((items,index)=>{ |
|||
if(items == uni.getStorageSync('userinfo').avatar){ |
|||
item.fabulous_avatar.splice(index, 1); |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
|
|||
// this.aolist = false; |
|||
// this.aolist = true; |
|||
|
|||
}, |
|||
changeItem(tabItem ,index) { |
|||
let _this = this |
|||
let tabArrary = [] |
|||
for (let key in _this.tabData) { |
|||
tabArrary.push(key) |
|||
} |
|||
if (index > 2 && index < (tabArrary.length - 1)) { |
|||
if (index == 3) { |
|||
_this.scroll_left = 0 |
|||
} else if (index == tabArrary.length - 2) { |
|||
_this.scroll_left = uni.upx2px(150 * (tabArrary.length + 3)) |
|||
} else { |
|||
_this.scroll_left = uni.upx2px(150 * (index - 3)) |
|||
} |
|||
} else if (index < 3) { |
|||
_this.scroll_left = 0 |
|||
} else if (index > (tabArrary.length - 2)) { |
|||
_this.scroll_left = uni.upx2px(150 * (tabArrary.length + 3)) |
|||
} |
|||
}, |
|||
selectTabBar(tabItem, page = 1, isPage = false,index,id) { |
|||
//#ifdef H5 |
|||
let pageurl = location.href, |
|||
pages = pageurl.split('/#/')[1].split('?')[0]; |
|||
// if(pages == 'pages/mainPages/index/diypage') return; 这里退出会导致自定义页面无法加载 |
|||
//#endif |
|||
uni.showLoading({}) |
|||
let _this = this, |
|||
requestUrl = '&' + tabItem.request_link, |
|||
requestData = { |
|||
page, |
|||
is_total: "1", |
|||
lat: !!_this.curLoction ? _this.curLoction.latitude : '', |
|||
lng: !!_this.curLoction ? _this.curLoction.longitude : '' |
|||
}; |
|||
// debugger |
|||
if(tabItem.type == 'pocket'){ |
|||
requestData.homeflag = 1; |
|||
if(id){ |
|||
requestData.id = _this.children[id].id; |
|||
} |
|||
} |
|||
_this.changeItem(tabItem,index) |
|||
App._post_form(requestUrl, requestData, res => { |
|||
if (tabItem.type === 'store' || _this.currentTab === 'store') { |
|||
for (let i = 0; i < res.data.list.length; i++) { |
|||
let goodsList = []; |
|||
for (let j in res.data.list[i].goods) { |
|||
let goodsData = res.data.list[i].goods[j]; |
|||
if (goodsData !== '') { |
|||
if (j == 'active') { |
|||
goodsData.css = 'qiang' |
|||
goodsData.tag = '抢' |
|||
} else if (j == 'coupon') { |
|||
goodsData.css = 'hui' |
|||
goodsData.tag = '券' |
|||
} else if (j == 'fightgroup') { |
|||
goodsData.css = 'pin' |
|||
goodsData.tag = '拼' |
|||
} else if (j == 'groupon') { |
|||
goodsData.css = 'tuan' |
|||
goodsData.tag = '团' |
|||
} else if (j == 'halfcard') { |
|||
goodsData.css = 'ka' |
|||
goodsData.tag = '卡' |
|||
} else if (j == 'packages') { |
|||
goodsData.css = 'li' |
|||
goodsData.tag = '礼' |
|||
} else if (j == 'bargain') { |
|||
goodsData.css = 'kan' |
|||
goodsData.tag = '砍' |
|||
}else if(j == 'activity'){ |
|||
goodsData.css = 'huo' |
|||
goodsData.tag = '活' |
|||
} |
|||
goodsList.push(goodsData); |
|||
} |
|||
} |
|||
res.data.list[i].goods = goodsList; |
|||
} |
|||
} |
|||
if (isPage) { |
|||
if (res.data.list.length > 0) { |
|||
_this["tabDataList"].push(...res.data.list); |
|||
} else { |
|||
_this.loadingMore = true; |
|||
} |
|||
} else { |
|||
// debugger |
|||
_this.setData({ |
|||
current_page: 1, |
|||
currentTab: tabItem.type, |
|||
tabDataList: res.data.list, |
|||
pageTotal: res.data.total, |
|||
loadingMore: res.data.list.length === 0 || _this.current_page === res.data.total, |
|||
currentTabItem: tabItem |
|||
}) |
|||
if(tabItem.type == 'pocket' && !!res.data.children && !id){ |
|||
_this.children = res.data.children; |
|||
} |
|||
} |
|||
uni.hideLoading() |
|||
}, false, () => {}) |
|||
}, |
|||
selectTabBar_two(tabItem,isindex, page = 1, isPage = false) { |
|||
if(isindex){ |
|||
this.onekey = isindex |
|||
}else if(!this.onekey){ |
|||
this.onekey = Object.keys(this.tabData)[0];//获取第一个key值，默认高亮 |
|||
} |
|||
let cartid = uni.getStorageSync('cate_id'); |
|||
uni.showLoading({ |
|||
mask:true |
|||
}) |
|||
let _this = this, |
|||
requestUrl = '&' + tabItem.request_link, |
|||
requestData = { |
|||
page, |
|||
is_total: "1", |
|||
lat: _this.curLoction ? _this.curLoction.latitude : '', |
|||
lng: _this.curLoction ? _this.curLoction.longitude : '', |
|||
status: tabItem.status, |
|||
sort: tabItem.orders || '' |
|||
|
|||
}; |
|||
if (tabItem.request_link === "p=dating&do=homeList") { |
|||
Object.assign(requestData, { |
|||
gneder: tabItem.gneder || '0' |
|||
}) |
|||
} |
|||
if (tabItem.request_link === "p=rush&do=homeList") { |
|||
Object.assign(requestData, { |
|||
cate_id: cartid || '0' |
|||
}) |
|||
} |
|||
if (tabItem.request_link === "p=rush&do=homeList") { |
|||
Object.assign(requestData, { |
|||
cate_id: cartid || '0' |
|||
}) |
|||
} |
|||
if(tabItem.request_link === "p=housekeep&do=getNewStorelist" || tabItem.request_link === "p=housekeep&do=getStorelist" || tabItem.request_link === "p=housekeep&do=getArtificerlist"){ |
|||
|
|||
this.currentTab = 'housekeep'; |
|||
requestData.status = 1; |
|||
} |
|||
if(tabItem.request_link === "p=housekeep&do=getDemandlist"){ |
|||
this.currentTab = 'housekeep2'; |
|||
// requestData.status = 1; |
|||
} |
|||
if (tabItem.request_link === "p=housekeep&do=getServicelist") { |
|||
requestData.status = 1; |
|||
this.currentTab = 'housekeep3'; |
|||
} |
|||
if(cartid){ |
|||
Object.assign(requestData, { |
|||
cate_id: cartid |
|||
}) |
|||
}else if(_this.cate_id){ |
|||
// _this.classifly = _this.cate_id; |
|||
requestData.cate_id = _this.cate_id |
|||
}else{ |
|||
_this.classifly = '0'; |
|||
} |
|||
// debugger |
|||
_this.changeItem(tabItem); |
|||
//#ifdef H5 |
|||
let pageurl = location.href; |
|||
//#endif |
|||
App._post_form(requestUrl, requestData, res => { |
|||
|
|||
if (isPage) { |
|||
if (res.data.list.length > 0) { |
|||
_this["tabDataTwoList"].push(...res.data.list); |
|||
_this.loadingMore = true; |
|||
} else { |
|||
_this.loadingMore = true; |
|||
} |
|||
} else { |
|||
// _this.tabDataTwoList = []; |
|||
_this.setData({ |
|||
current_page: 1, |
|||
currentTwoTab: isindex || this.onekey, |
|||
tabDataTwoList: res.data.list, |
|||
pageTotal: res.data.total, |
|||
loadingMore: res.data.list.length === 0 || _this.current_page === res.data.total, |
|||
Twotabtype: _this.tabParms.goods_type, |
|||
requestData: requestData, |
|||
currentTabItem: tabItem, |
|||
requestTwoSelectInfo: requestUrl |
|||
}); |
|||
// debugger |
|||
} |
|||
if(cartid){ |
|||
_this.classifly = cartid; |
|||
let index; |
|||
// debugger |
|||
_this.tabParms.class_list.map((item,indexs)=>{ |
|||
if(item.id == cartid){ |
|||
index = indexs; |
|||
} |
|||
}) |
|||
const query = uni.createSelectorQuery().in(this); |
|||
query.selectAll('.dis-il-block, .some-other-nodes').boundingClientRect(data => { |
|||
let marinfo = uni.upx2px(50), |
|||
padInfo = uni.upx2px(24), |
|||
marWid = index * marinfo, |
|||
itemWid = ((data[index].width) / 2) + padInfo, //当前选中大小 |
|||
windowWid = (uni.upx2px(690)) / 2, //当前容器大小 |
|||
arrlength = 0; |
|||
for (let i = 0; i < index; i++) { |
|||
arrlength = arrlength + data[i].width |
|||
} |
|||
arrlength = arrlength + marWid + itemWid //选中前全部选项大小 |
|||
_this.scroll_left2 = arrlength - windowWid |
|||
}).exec(); |
|||
} |
|||
// if(tabItem.request_link == "p=activity&do=homeList"){ |
|||
// _this.currentTab = 'activity'; |
|||
// } |
|||
_this.loadingMore = true; |
|||
}, false, () => { |
|||
uni.hideLoading() |
|||
}) |
|||
}, |
|||
selectClassifly(cate_id, page = 1, isPage = false, index1, item) { |
|||
uni.showLoading({}) |
|||
let _this = this, |
|||
classRequestData = { |
|||
..._this.requestData, |
|||
cate_id, |
|||
page |
|||
}, |
|||
requestTwoSelectInfo = _this.requestTwoSelectInfo; |
|||
let index = index1 + 1; |
|||
_this.cate_id = cate_id; |
|||
const query = uni.createSelectorQuery().in(this); |
|||
query.selectAll('.dis-il-block, .some-other-nodes').boundingClientRect(data => { |
|||
let marinfo = uni.upx2px(50), |
|||
padInfo = uni.upx2px(24), |
|||
marWid = index * marinfo, |
|||
itemWid = ((data[index].width) / 2) + padInfo, //当前选中大小 |
|||
windowWid = (uni.upx2px(690)) / 2, //当前容器大小 |
|||
arrlength = 0; |
|||
for (let i = 0; i < index; i++) { |
|||
arrlength = arrlength + data[i].width |
|||
} |
|||
arrlength = arrlength + marWid + itemWid //选中前全部选项大小 |
|||
_this.scroll_left2 = arrlength - windowWid |
|||
}).exec(); |
|||
|
|||
App._post_form(requestTwoSelectInfo, classRequestData, res => { |
|||
if (isPage) { |
|||
if (res.data.list.length > 0) { |
|||
_this["tabDataTwoList"].push(...res.data.list); |
|||
} else { |
|||
_this.loadingMore = true; |
|||
} |
|||
} else { |
|||
_this.setData({ |
|||
current_page: 1, |
|||
tabDataTwoList: res.data.list, |
|||
pageTotal: res.data.total, |
|||
loadingMore: res.data.list.length === 0 || _this.current_page === res.data.total, |
|||
Twotabtype: _this.tabParms.goods_type, |
|||
classifly: cate_id |
|||
}) |
|||
} |
|||
}, false, () => { |
|||
uni.hideLoading() |
|||
}) |
|||
}, |
|||
navigateTo(url) { |
|||
let isHttpUrl = url.indexOf('https') !== -1; |
|||
if (isHttpUrl) { |
|||
location.href = url; |
|||
} else { |
|||
App.navigationTo({ |
|||
url: url |
|||
}) |
|||
} |
|||
}, |
|||
shangjiaFold(key2) { |
|||
this.shopFold = false |
|||
this.shopFoldIndex = key2 |
|||
}, |
|||
shangjiaUpFold(key2) { |
|||
this.shopFold = true |
|||
this.shopFoldIndex = key2 |
|||
}, |
|||
// 抢购关注事件 |
|||
remindSuccess(goodsData, goodsIndex) { |
|||
this.rush_goodsList.splice(goodsIndex, 1, goodsData[goodsIndex]); |
|||
}, |
|||
tabInfomore() { |
|||
let _this = this; |
|||
if (_this.current_page >= _this.pageTotal) { |
|||
_this.loadingMore = true; |
|||
return false; |
|||
} |
|||
if(_this.city_id){ |
|||
_this.classifly = _this.city_id; |
|||
|
|||
} |
|||
if (_this.controType === 'options2') { |
|||
if (!!_this.tabParms.class_list && _this.tabParms.class_list.length > 0) { |
|||
_this.selectClassifly(_this.classifly, ++_this.current_page, true) |
|||
} else { |
|||
// if(_this.currentTab == 'housekeep' || _this.currentTab == 'housekeep2' || _this.currentTab == 'housekeep3') return |
|||
_this.selectTabBar_two(_this.currentTabItem,0, ++_this.current_page, true) |
|||
} |
|||
} else { |
|||
_this.selectTabBar(_this.currentTabItem, ++_this.current_page, true,'',_this.sort); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "../../../common/css/old_diyPages"; |
|||
|
|||
.tabBar-list { |
|||
height: 100upx; |
|||
line-height: 100upx; |
|||
white-space: nowrap; |
|||
|
|||
.tabBar-item2 { |
|||
// width: 20%; |
|||
display: inline-block; |
|||
|
|||
.selectTabBar { |
|||
position: absolute; |
|||
left: 50%; |
|||
bottom: 0; |
|||
width: 58upx; |
|||
height: 8upx; |
|||
background: rgba(255, 68, 68, 1); |
|||
border-radius: 8upx 8upx 0 0; |
|||
transform: translateX(-50%); |
|||
} |
|||
} |
|||
|
|||
.tabBar-item { |
|||
width: 150upx; |
|||
display: inline-block; |
|||
|
|||
.selectTabBar { |
|||
position: absolute; |
|||
left: 50%; |
|||
bottom: 0; |
|||
width: 58upx; |
|||
height: 8upx; |
|||
background: rgba(255, 68, 68, 1); |
|||
border-radius: 8upx 8upx 0 0; |
|||
transform: translateX(-50%); |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
.fui-groupon_goods-i-r-storeTitle { |
|||
height: 2.6em; |
|||
line-height: 1.3em; |
|||
} |
|||
|
|||
.tabBar-listTwo-box { |
|||
padding: 30upx 30upx 0; |
|||
} |
|||
|
|||
.tabBar-Twolist { |
|||
font-size: 0; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.tabClassiflySelect { |
|||
padding: 0 25upx; |
|||
height: 50upx; |
|||
line-height: 50upx; |
|||
background-color: #FFEBEB; |
|||
border-radius: 26upx; |
|||
color: #FF4444; |
|||
margin-right: 50upx; |
|||
} |
|||
.nav-content { |
|||
width: 690rpx; |
|||
margin: 30upx auto 0; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content:space-between; |
|||
} |
|||
.nav-item { |
|||
width: 335rpx; |
|||
height: auto; |
|||
border-radius: 20rpx; |
|||
overflow: hidden; |
|||
background-color: #F8F8F8; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,217 @@ |
|||
<!-- displayMode 是否为滑动菜单 1:是--> |
|||
<!-- list 菜单列表 --> |
|||
<!-- eachPageNum 菜单一页个数 --> |
|||
<!-- eachLineNum 菜单一行个数 --> |
|||
<!-- swiperHeight swiper高度 --> |
|||
<!-- btngroupHandleData 总页数 --> |
|||
<!-- btnBordeRadius 菜单图标为圆角radius 为圆形circle --> |
|||
|
|||
<template> |
|||
<view class="box"> |
|||
<view v-if="menuId == 'menu'"> |
|||
<block v-if="btngroupData.displayMode == 1 && btngroupData.list.length>btngroupData.eachPageNum"> |
|||
<view class="btngroup-p" :style="'height: '+(btngroupData.swiperHeight * 2 + 40)+'rpx; overflow: hidden;'"> |
|||
<swiper :indicator-dots="btngroup.indicatorDots" :autoplay="true" :interval="5000" indicator-color="rgba(0,0,0,.2)" indicator-active-color="#fe433f" |
|||
:duration="btngroup.duration" :style="'height: '+(btngroupData.swiperHeight * 2 + 40)+'rpx'"> |
|||
<swiper-item class="swiper-slide" v-for="(item2, key2) in btngroupData.btngroupHandleData" :key="key2"> |
|||
<view class="btngroup-d"> |
|||
<view class="a btngroup-i" :style="'width: '+(100 / btngroupData.eachLineNum) + '%'" v-for="(item3, key3) in item2" |
|||
:key="key3" @click="navigateTo(item3.linkurl)"> |
|||
<view class="btngroup-i-t"> |
|||
<view class="btngroup-i-t-icon"> |
|||
<!-- <image class="image btngroupImage" :class="{radius: btngroupData.btnBordeRadius == 'radius', circle: btngroupData.btnBordeRadius == 'circle'}" |
|||
:src="item3.imgurl" /> --> |
|||
<view |
|||
class="image btngroupImage" |
|||
:class="{radius: btngroupData.btnBordeRadius == 'radius', circle: btngroupData.btnBordeRadius == 'circle'}" |
|||
:style="{background: 'url(' + item3.imgurl + ') ',backgroundSize:'100% 100%'}"> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="btngroup-i-c" :style="'color: '+item3.color"> |
|||
{{ item3.text }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
</view> |
|||
</block> |
|||
<block v-else> |
|||
<view class="btngroup-p"> |
|||
<view class="btngroup-d"> |
|||
<view class="a btngroup-i" :style="'width: '+(100 / btngroupData.eachLineNum) + '%'" v-for="(item2, key2) in btngroupData.list" |
|||
:key="key2" @click="navigateTo(item2.linkurl)"> |
|||
<view class="btngroup-i-t"> |
|||
<view class="btngroup-i-t-icon"> |
|||
<!-- <image class="image btngroupImage" :class="{radius: btngroupData.btnBordeRadius == 'radius', circle: btngroupData.btnBordeRadius == 'circle'}" |
|||
:src="item2.imgurl" /> --> |
|||
<view class="image btngroupImage" :class="{radius: btngroupData.btnBordeRadius == 'radius', circle: btngroupData.btnBordeRadius == 'circle'}" |
|||
:style="{background:'url(' + item2.imgurl + ') ',backgroundSize:'100% 100%'}"> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="btngroup-i-c" :style="'color: '+item2.color"> |
|||
{{ item2.text }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
<view v-else> |
|||
<block v-if="btngroupData.displayMode == 1 && btngroupData.list.length>btngroupData.eachPageNum"> |
|||
<view class="btngroup-p" :style="'height: '+(btngroupData.swiperHeight * 2 + 40)+'rpx; overflow: hidden;'"> |
|||
<swiper :indicator-dots="btngroup.indicatorDots" :autoplay="true" :interval="5000" indicator-color="rgba(0,0,0,.2)" indicator-active-color="#fe433f" |
|||
:duration="btngroup.duration" :style="'height: '+(btngroupData.swiperHeight * 2 + 40)+'rpx'"> |
|||
<swiper-item class="swiper-slide" v-for="(item2, key2) in btngroupData.btngroupHandleData" :key="key2"> |
|||
<view class="housekeeping"> |
|||
<view class="housekeeping-issue" :style="{backgroundColor: item3.bgColor,color: item3.color,width:(100 / btngroupData.eachLineNum - (10/btngroupData.eachLineNum)) + '%',borderRadius:btngroupData.btnBordeRadius == 'radius'?'20rpx':'0px'}" v-for="(item3, key3) in item2" |
|||
:key="key3" @click="navigateTo(item3.linkurl)"> |
|||
<image class="housekeeping-image" :src="item3.imgurl" v-if="item3.imgurl" mode=""></image> |
|||
{{item3.text}} |
|||
</view> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
</view> |
|||
</block> |
|||
<block v-else> |
|||
<view class="btngroup-p"> |
|||
<view class="housekeeping" style="border-radius: 10upx;"> |
|||
<view class="housekeeping-issue" |
|||
:style="{backgroundColor: item3.bgColor,color: item3.color,width:(100 / btngroupData.eachLineNum - (10/btngroupData.eachLineNum)) + '%',marginTop: 0,borderRadius:btngroupData.btnBordeRadius == 'radius'?'20rpx':'0px'}" |
|||
v-for="(item3, key3) in btngroupData.list" |
|||
:key="key3" @click="navigateTo(item3.linkurl)"> |
|||
<image class="housekeeping-image" :src="item3.imgurl" v-if="item3.imgurl" mode=""></image> |
|||
{{item3.text}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
|
|||
</view> |
|||
<popup-view :show="showEnter" type="bottom" @clickmask="showEnter = false"> |
|||
<view class="enter-box"> |
|||
<view class="t-c f-36 f-w col-3" style="padding-top: 30upx;"> |
|||
请选择您的身份 |
|||
</view> |
|||
<view class="f-28 col-9 t-c" style="padding-top: 10upx;"> |
|||
明确后将为您提供更准确的服务 |
|||
</view> |
|||
<image :src="imgfixUrls +'homemakingImg/ruzhuclose.png'" @click="showEnter = false" class="enter-img" mode=""></image> |
|||
<view class="IndividualsIn" @click="navigateTo('pages/subPages2/homemaking/serviceIn/serviceIn?tim=1&type=')"> |
|||
<image class="IndividualsInImg" :src="imgfixUrls + 'homemakingImg/grruzhu.png'" mode=""></image> |
|||
<view class="f-32 f-w col-f flex-box" style="line-height: 110upx;margin-left: 40upx;"> |
|||
选择个人入驻 |
|||
</view> |
|||
<view style="line-height: 110upx;"> |
|||
<image :src="imgfixUrls +'homemakingImg/jinruruzhu.png'" mode="" class="IndividualsInright"></image> |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="IndividualsIn" style="margin-top: 20upx;background-color: #FDAD28;" @click="navigateTo('pages/mainPages/Settled/Settled')"> |
|||
<image class="IndividualsInImg" :src="imgfixUrls + 'homemakingImg/qyruzhu.png'" mode=""></image> |
|||
<view class="f-32 f-w col-f flex-box" style="line-height: 110upx;margin-left: 40upx;"> |
|||
选择企业入驻 |
|||
</view> |
|||
<view style="line-height: 110upx;"> |
|||
<image :src="imgfixUrls +'homemakingImg/jinruruzhu.png'" mode="" class="IndividualsInright"></image> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</popup-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from '@/common/js/app.js' |
|||
import PopupView from "@/components/template/PopManager.vue" |
|||
export default { |
|||
components:{ |
|||
PopupView |
|||
}, |
|||
data() { |
|||
return { |
|||
btngroup: { |
|||
indicatorDots: true, |
|||
duration: 300, |
|||
btngroupHandleData: [], |
|||
houseinfo:0 |
|||
}, |
|||
showEnter:false |
|||
} |
|||
}, |
|||
onHide() { |
|||
console.log(this.btngroup); |
|||
}, |
|||
mounted() { |
|||
this.houseinfo = uni.getStorageSync('platformInfor').houseinfo; |
|||
}, |
|||
props: { |
|||
menuId: { |
|||
type: String, |
|||
default: function() { |
|||
return '' |
|||
} |
|||
}, |
|||
btngroupData: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
navigateTo(url) { |
|||
console.log(url); |
|||
// debugger |
|||
if(url.indexOf('pages/subPages2/homemaking/serviceIn/serviceIn') != -1 && url.indexOf('?tim') == -1 && this.houseinfo == 0){ |
|||
this.showEnter = true; |
|||
return |
|||
}else if(url.indexOf('pages/subPages2/homemaking/serviceIn/serviceIn') != -1 && url.indexOf('?tim') == -1 && this.houseinfo == 2){ |
|||
App.navigationTo({ |
|||
url:'pages/mainPages/Settled/Settled' |
|||
}); |
|||
return |
|||
} |
|||
if(url.indexOf('indet') != -1){ |
|||
//#ifdef H5 |
|||
// let loc = url.split('?')[1]; |
|||
// debugger |
|||
App.navigationToH5(false,`${App.base}#/${url}`); |
|||
window.location.reload(); |
|||
//#endif |
|||
//#ifndef H5 |
|||
App.navigationTo({ |
|||
url:url , |
|||
}); |
|||
//#endif |
|||
return |
|||
} |
|||
// #ifdef H5 |
|||
if(url.indexOf('appid') != -1){ |
|||
uni.showModal({ |
|||
showCancel:false, |
|||
title:'温馨提示', |
|||
content:'此链接无法在公众号端打开,请在小程序中打开' |
|||
}); |
|||
return |
|||
} |
|||
// #endif |
|||
|
|||
App.navigationTo({ |
|||
url |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
@import "../../../common/css/diyPages.css"; |
|||
@import "../../../common/css/old_diyPages"; |
|||
</style> |
|||
@ -0,0 +1,456 @@ |
|||
<template> |
|||
<view class="raffle-wheel" :style="{ width: canvasWidth + 44 + 'px', height: canvasHeight + 44 + 'px','background-image': 'url(' + imageRoot + 'cjqq.png)'}"> |
|||
<view class="raffle-wheel-wrap" :style="{width: canvasWidth + 'px', height: canvasHeight + 'px'}"> |
|||
<!-- #ifdef MP-ALIPAY --> |
|||
<canvas :class="className" :id="canvasId" :width="canvasWidth" :height="canvasHeight" :style="{ |
|||
width: canvasWidth + 'px', |
|||
height: canvasHeight + 'px' |
|||
}" /> |
|||
<!-- #endif --> |
|||
<!-- #ifndef MP-ALIPAY --> |
|||
<canvas :class="className" :canvas-id="canvasId" :width="canvasWidth" :height="canvasHeight" :style="{ |
|||
width: canvasWidth + 'px', |
|||
height: canvasHeight + 'px' |
|||
}" /> |
|||
<!-- #endif --> |
|||
<image class="canvas-img" :src="canvasImg" :style="{ |
|||
width: canvasWidth + 'px', |
|||
height: canvasHeight + 'px', |
|||
transform: `rotate(${canvasAngle + targetAngle}deg)`, |
|||
transitionDuration: `${transitionDuration}s` |
|||
}" |
|||
v-if="canvasImg"></image> |
|||
<view class="raffle-wheel__action" :style="{ 'background-image': 'url(' + imageRoot + 'djcj.png)' }" @click="openGame"></view> |
|||
<!-- 为了兼容 app 端 ctx.measureText 所需的标签 --> |
|||
<text class="raffle-wheel__measureText">{{ measureText }}</text> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'RaffleWheel', |
|||
props: { |
|||
// canvas 宽度 |
|||
canvasWidth: { |
|||
type: Number, |
|||
default: 240 |
|||
}, |
|||
// canvas 高度 |
|||
canvasHeight: { |
|||
type: Number, |
|||
default: 240 |
|||
}, |
|||
// 奖品列表 |
|||
prizeList: { |
|||
type: Array, |
|||
// 必须是偶数 |
|||
validator: function(value) { |
|||
return value.length % 2 === 0 |
|||
}, |
|||
required: true |
|||
}, |
|||
// 奖品区块对应背景颜色 |
|||
colors: { |
|||
type: Array, |
|||
default: () => [ |
|||
'#E6A53F', |
|||
'#E6DB74' |
|||
], |
|||
// 必须是偶数且仅为 2 个颜色相互交替 |
|||
validator: function(value) { |
|||
return value.length === 2 |
|||
} |
|||
}, |
|||
// 旋转动画时间 单位s |
|||
duration: { |
|||
type: Number, |
|||
default: 8 |
|||
}, |
|||
// 旋转的圈数 |
|||
ringCount: { |
|||
type: Number, |
|||
default: 8 |
|||
}, |
|||
// 字体颜色 |
|||
fontColor: { |
|||
type: String, |
|||
default: '#ff4444' |
|||
}, |
|||
// 文字的大小 |
|||
fontSize: { |
|||
type: String, |
|||
default: '10px' |
|||
}, |
|||
// 奖品文字多行情况下的行高 |
|||
lineHeight: { |
|||
type: Number, |
|||
default: 20 |
|||
}, |
|||
// 奖品名称所对应的 key 值 |
|||
strKey: { |
|||
type: String, |
|||
required: true |
|||
}, |
|||
// 奖品文字总长度限制 |
|||
strMaxLength: { |
|||
type: Number, |
|||
default: 12 |
|||
}, |
|||
// 奖品文字多行情况下第一行文字长度 |
|||
strLineLength: { |
|||
type: Number, |
|||
default: 6 |
|||
}, |
|||
//开始抽奖 |
|||
num:{ |
|||
type:Number, |
|||
default:null |
|||
} |
|||
}, |
|||
watch:{ |
|||
num(){ |
|||
this.handleAction(); |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
// 画板className |
|||
className: 'raffle-wheel__canvas', |
|||
// 画板标识 |
|||
canvasId: 'raffleWheelCanvas', |
|||
// 画板导出的图片 |
|||
canvasImg: '', |
|||
// 旋转到奖品目标需要的角度 |
|||
targetAngle: 0, |
|||
// 旋转动画时间 单位 s |
|||
transitionDuration: 0, |
|||
// 是否正在旋转 |
|||
isRotate: false, |
|||
// 当前停留在那个奖品的序号 |
|||
stayIndex: 0, |
|||
// 解决 app 不支持 measureText 的问题 |
|||
measureText: '' |
|||
} |
|||
}, |
|||
computed: { |
|||
// 设备像素密度 |
|||
pixelRatio() { |
|||
return uni.getSystemInfoSync().pixelRatio |
|||
}, |
|||
// 根据奖品列表计算 canvas 旋转角度 |
|||
// 让 启动按钮指针 在奖品分区中间 position = 45 |
|||
// 让 启动按钮指针 在奖品分区边界 position = 90 |
|||
canvasAngle() { |
|||
let prizeCount = this.prizeList.length |
|||
let position = 90 |
|||
if (prizeCount % 4 !== 0) { |
|||
return 0 |
|||
} else { |
|||
let num = prizeCount / 4 |
|||
return num % 2 === 0 ? position / num : position |
|||
} |
|||
}, |
|||
// 根据画板的宽度计算奖品文字与中心点的距离 |
|||
textRadius() { |
|||
return Math.round(this.canvasWidth / 2.4) |
|||
} |
|||
}, |
|||
methods: { |
|||
openGame(){ |
|||
this.$emit('playdraw'); |
|||
}, |
|||
// 开始旋转 |
|||
handleStartRotate(targetIndex) { |
|||
// 奖品总数 |
|||
let prizeCount = this.prizeList.length |
|||
let baseAngle = 360 / prizeCount |
|||
let angles = 0 |
|||
if (this.targetAngle === 0) { |
|||
console.log('第一次旋转') |
|||
// 因为第一个奖品是从0°开始的，即水平向右方向 |
|||
// 第一次旋转角度 = 270度 - (停留的序号-目标序号) * 每个奖品区间角度 - 每个奖品区间角度的一半 - canvas自身旋转的度数 |
|||
angles = (270 - (targetIndex - this.stayIndex) * baseAngle - baseAngle / 2) - this.canvasAngle |
|||
} else { |
|||
console.log('后续旋转') |
|||
// 后续继续旋转 就只需要计算停留的位置与目标位置的角度 |
|||
angles = -(targetIndex - this.stayIndex) * baseAngle |
|||
} |
|||
// 更新目前序号 |
|||
this.stayIndex = targetIndex |
|||
// 转 8 圈，圈数越多，转的越快 |
|||
this.targetAngle += angles + 360 * this.ringCount |
|||
|
|||
// 计算转盘结束对时间，预加一些延迟确保转盘停止后触发结束事件 |
|||
let endTime = this.transitionDuration * 1000 + 100 |
|||
setTimeout(() => { |
|||
this.isRotate = false |
|||
this.$emit('actionEnd') |
|||
}, endTime) |
|||
}, |
|||
// 点击 开始抽奖 按钮 |
|||
handleAction() { |
|||
if (this.isRotate) return |
|||
this.isRotate = true |
|||
this.$emit('actionStart') |
|||
}, |
|||
// 渲染转盘 |
|||
async drawWheelCanvas() { |
|||
// 获取 canvas 画布 |
|||
const canvasId = this.canvasId |
|||
const ctx = uni.createCanvasContext(canvasId, this); |
|||
this.ctxr = uni.createCanvasContext(canvasId, this); |
|||
|
|||
// canvas 的宽高 |
|||
let canvasW = this.canvasWidth |
|||
let canvasH = this.canvasHeight |
|||
|
|||
// 根据奖品个数计算 角度 |
|||
let prizeCount = this.prizeList.length |
|||
let baseAngle = Math.PI * 2 / prizeCount |
|||
|
|||
// 设置描边颜色 |
|||
ctx.setStrokeStyle('#00ff99') |
|||
|
|||
// 设置字体和字号 |
|||
// #ifndef MP-WEIXIN |
|||
let fontFamily = '-apple-system, BlinkMacSystemFont, \'PingFang SC\', \'Helvetica Neue\', STHeiti, \'Microsoft Yahei\', Tahoma, Simsun, sans-serif' |
|||
ctx.font = `${this.fontSize} ${fontFamily}` |
|||
// #endif |
|||
// #ifndef H5 |
|||
ctx.setFontSize(10) |
|||
// #endif |
|||
|
|||
// 注意，开始画的位置是从0°角的位置开始画的。也就是水平向右的方向。 |
|||
// 画具体内容 |
|||
for (let i = 0; i < prizeCount; i++) { |
|||
// 当前角度 |
|||
let angle = i * baseAngle |
|||
|
|||
// 保存当前画布的状态 |
|||
ctx.save() |
|||
|
|||
// 开始画内容 |
|||
ctx.beginPath() |
|||
|
|||
// 开始画圆弧 |
|||
// x => 圆弧对应的圆心横坐标 x |
|||
// y => 圆弧对应的圆心横坐标 y |
|||
// radius => 圆弧的半径大小 |
|||
// startAngle => 圆弧开始的角度，单位是弧度 |
|||
// endAngle => 圆弧结束的角度，单位是弧度 |
|||
// anticlockwise(可选) => 绘制方向，true 为逆时针，false 为顺时针 |
|||
let outsideRadius = canvasW / 2 |
|||
let insideRadius = 20 |
|||
ctx.arc(canvasW * 0.5, canvasH * 0.5, outsideRadius, angle, angle + baseAngle, false) |
|||
ctx.arc(canvasW * 0.5, canvasH * 0.5, insideRadius, angle + baseAngle, angle, true) |
|||
|
|||
// 开始链接线条 |
|||
ctx.stroke() |
|||
// 每个奖品区块背景填充颜色 |
|||
ctx.setFillStyle(this.colors[i % 2]) |
|||
// 填充颜色 |
|||
ctx.fill() |
|||
|
|||
// 开始绘制奖品内容 |
|||
ctx.setFillStyle(this.fontColor) |
|||
let rewardName = this.strLimit(this.prizeList[i][this.strKey]) |
|||
|
|||
// translate方法重新映射画布上的 (0,0) 位置 |
|||
let translateX = canvasW * 0.5 + Math.cos(angle + baseAngle / 2) * this.textRadius |
|||
let translateY = canvasH * 0.5 + Math.sin(angle + baseAngle / 2) * this.textRadius |
|||
ctx.translate(translateX, translateY) |
|||
|
|||
// rotate方法旋转当前的绘图，因为文字是和当前扇形中心线垂直的 |
|||
ctx.rotate(angle + (baseAngle / 2) + (Math.PI / 2)) |
|||
|
|||
// 设置文本位置并处理换行 |
|||
|
|||
// 是否需要换行 |
|||
let isLineBreak = rewardName.length > this.strLineLength |
|||
if (isLineBreak) { |
|||
// 获得多行文本数组 |
|||
rewardName = rewardName.substring(0, this.strLineLength) + ',' + rewardName.substring(this.strLineLength) |
|||
let rewardNames = rewardName.split(',') |
|||
|
|||
// 循环文本数组，计算每一行的文本宽度 |
|||
for (let j = 0; j < rewardNames.length; j++) { |
|||
if (ctx.measureText && ctx.measureText(rewardNames[j]).width) { |
|||
// 文本的宽度信息 |
|||
let tempStrSize = ctx.measureText(rewardNames[j]) |
|||
ctx.fillText(rewardNames[j], -tempStrSize.width / 2, j * this.lineHeight) |
|||
} else { |
|||
this.measureText = rewardNames[j] |
|||
|
|||
// 等待页面重新渲染 |
|||
await this.$nextTick() |
|||
|
|||
let textWidth = await this.getTextWidth() |
|||
|
|||
ctx.fillText(rewardNames[j], -textWidth / 2, j * this.lineHeight) |
|||
// console.log(rewardNames[j], textWidth, i) |
|||
} |
|||
} |
|||
} else { |
|||
if (ctx.measureText && ctx.measureText(rewardName).width) { |
|||
// 文本的宽度信息 |
|||
let tempStrSize = ctx.measureText(rewardName) |
|||
ctx.fillText(rewardName, -tempStrSize.width / 2, 0) |
|||
} else { |
|||
this.measureText = rewardName |
|||
|
|||
// 等待页面重新渲染 |
|||
await this.$nextTick() |
|||
|
|||
let textWidth = await this.getTextWidth() |
|||
|
|||
ctx.fillText(rewardName, -textWidth / 2, 0) |
|||
} |
|||
} |
|||
|
|||
ctx.restore(); |
|||
} |
|||
|
|||
// 保存绘图并导出图片 |
|||
ctx.draw(true, () => { |
|||
let drawTimer = setTimeout(() => { |
|||
clearTimeout(drawTimer) |
|||
drawTimer = null |
|||
|
|||
// #ifdef MP-ALIPAY |
|||
ctx.toTempFilePath({ |
|||
destWidth: this.canvasWidth * this.pixelRatio, |
|||
destHeight: this.canvasHeight * this.pixelRatio, |
|||
success: (res) => { |
|||
// console.log(res.filePath) |
|||
this.canvasImg = res.filePath |
|||
// 通知父级组件，抽奖转品生成图片完成 |
|||
this.$emit('done') |
|||
} |
|||
}) |
|||
// #endif |
|||
// #ifndef MP-ALIPAY |
|||
uni.canvasToTempFilePath({ |
|||
destWidth: this.canvasWidth * this.pixelRatio, |
|||
destHeight: this.canvasHeight * this.pixelRatio, |
|||
canvasId: this.canvasId, |
|||
success: (res) => { |
|||
// 在 H5 平台下，tempFilePath 为 base64 |
|||
// console.log(res.tempFilePath) |
|||
this.canvasImg = res.tempFilePath |
|||
// 通知父级组件，抽奖转品生成图片完成 |
|||
this.$emit('done') |
|||
} |
|||
}, this) |
|||
// #endif |
|||
}, 20) |
|||
}) |
|||
}, |
|||
// 兼容 app 端不支持 ctx.measureText |
|||
// 已知问题：初始绘制时，低端安卓机 平均耗时 2s |
|||
getTextWidth() { |
|||
return new Promise((resolve, reject) => { |
|||
uni.createSelectorQuery().in(this).select('.raffle-wheel__measureText').fields({ |
|||
size: true, |
|||
}, (res) => { |
|||
resolve(res.width) |
|||
}).exec() |
|||
}) |
|||
}, |
|||
// 处理文字溢出 |
|||
strLimit(value) { |
|||
let maxLength = this.strMaxLength |
|||
if (!value || !maxLength) return value |
|||
return value.length > maxLength ? value.slice(0, maxLength - 1) + '...' : value |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
let stoTimer = setTimeout(() => { |
|||
clearTimeout(stoTimer) |
|||
stoTimer = null |
|||
|
|||
this.drawWheelCanvas() |
|||
this.transitionDuration = this.duration |
|||
}, 50) |
|||
}) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
// $actionBgUrl: '~static/raffle-wheel/raffle-wheel__action'; |
|||
// $raffleBgUrl: '~static/raffle-wheel/raffle-wheel__bg'; |
|||
|
|||
.raffle-wheel { |
|||
position: relative; |
|||
left: 0; |
|||
top: 0; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.raffle-wheel { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin: 0 auto; |
|||
background-repeat: no-repeat; |
|||
background-position: center center; |
|||
background-size: contain; |
|||
// background-image: url($raffleBgUrl + ".png"); |
|||
|
|||
// @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) { |
|||
// background-image: url($raffleBgUrl + "@2x.png"); |
|||
// } |
|||
|
|||
// @media (-webkit-min-device-pixel-ratio: 3), |
|||
// (min-device-pixel-ratio: 3) { |
|||
// background-image: url($raffleBgUrl + "@3x.png"); |
|||
// } |
|||
} |
|||
|
|||
.raffle-wheel__canvas { |
|||
position: absolute; |
|||
left: -9999px; |
|||
opacity: 0; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.raffle-wheel__action { |
|||
position: absolute; |
|||
top: calc(50% - 58px); |
|||
left: calc(50% - 58px); |
|||
width: 114px; |
|||
height: 114px; |
|||
// background-repeat: no-repeat; |
|||
// background-position: center center; |
|||
// background-size: contain; |
|||
// background-image: url($actionBgUrl + ".png"); |
|||
|
|||
// @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) { |
|||
// background-image: url($actionBgUrl + "@2x.png"); |
|||
// } |
|||
|
|||
// @media (-webkit-min-device-pixel-ratio: 3), |
|||
// (min-device-pixel-ratio: 3) { |
|||
// background-image: url($actionBgUrl + "@3x.png"); |
|||
// } |
|||
} |
|||
|
|||
.raffle-wheel__measureText { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
white-space: nowrap; |
|||
font-size: 12px; |
|||
opacity: 0; |
|||
} |
|||
|
|||
.canvas-img { |
|||
transition: transform cubic-bezier(.34, .12, .05, .95); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,167 @@ |
|||
const GetDate = { |
|||
withData: (num) => { |
|||
let param = parseInt(num); |
|||
return param < 10 ? '0' + param : '' + param; |
|||
}, |
|||
getTimes(str){ |
|||
return new Date(str.replace(/-/g,'/')).getTime(); |
|||
}, |
|||
getCurrentTimes(){ |
|||
const date = new Date(); |
|||
const year = date.getFullYear(); |
|||
const month = date.getMonth() + 1; |
|||
const day = date.getDate(); |
|||
const hour = date.getHours(); |
|||
const minute = date.getMinutes(); |
|||
const second = date.getSeconds(); |
|||
return { |
|||
detail: { |
|||
year: year, |
|||
month: month, |
|||
day: day, |
|||
hour: hour, |
|||
minute: minute, |
|||
second: second |
|||
} |
|||
} |
|||
}, |
|||
format(arr){ |
|||
let curarr = []; |
|||
let curarr0 = []; |
|||
let str = ''; |
|||
arr.forEach((cur,index) => { |
|||
let o = GetDate.withData(cur); |
|||
if(index > 2){ |
|||
curarr.push(o); |
|||
}else{ |
|||
curarr0.push(o); |
|||
} |
|||
}) |
|||
if(arr.length < 4){ |
|||
str = curarr0.join('-'); |
|||
}else{ |
|||
str = curarr0.join('-') + ' ' + curarr.join(':'); |
|||
} |
|||
return str; |
|||
}, |
|||
getCurrentStringValue(str){ |
|||
let newstr = str.split(' '); |
|||
if(newstr && newstr[1]){ |
|||
let arr = [...newstr[0].split('-'),...newstr[1].split(':')]; |
|||
return arr; |
|||
} |
|||
return newstr[0].split('-'); |
|||
}, |
|||
getCompare(curp,startp,endp,timesp){ |
|||
let cur = GetDate.getTimes(curp); |
|||
let start = GetDate.getTimes(startp); |
|||
let end = GetDate.getTimes(endp); |
|||
if(cur < start){ |
|||
return GetDate.getTimeIndex(timesp,GetDate.getCurrentStringValue(startp)); |
|||
}else if(cur > end){ |
|||
return GetDate.getTimeIndex(timesp,GetDate.getCurrentStringValue(endp)); |
|||
}else{ |
|||
return GetDate.getTimeIndex(timesp,GetDate.getCurrentStringValue(curp)); |
|||
} |
|||
}, |
|||
getChooseArr(times,indexs){ |
|||
let arr = []; |
|||
times.forEach((cur,index) => arr.push(cur[indexs[index]])); |
|||
return arr; |
|||
}, |
|||
getNewArray(arr){ |
|||
let newarr = []; |
|||
arr.forEach(cur => newarr.push(cur)); |
|||
return newarr; |
|||
}, |
|||
getLoopArray: (start, end) => { |
|||
var start = start || 0; |
|||
var end = end || 1; |
|||
var array = []; |
|||
for (var i = start; i <= end; i++) { |
|||
array.push(GetDate.withData(i)); |
|||
} |
|||
return array; |
|||
}, |
|||
getMonthDay: (year, month) => { |
|||
var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0), array = null; |
|||
|
|||
switch (month) { |
|||
case '01': |
|||
case '03': |
|||
case '05': |
|||
case '07': |
|||
case '08': |
|||
case '10': |
|||
case '12': |
|||
array = GetDate.getLoopArray(1, 31) |
|||
break; |
|||
case '04': |
|||
case '06': |
|||
case '09': |
|||
case '11': |
|||
array = GetDate.getLoopArray(1, 30) |
|||
break; |
|||
case '02': |
|||
array = flag ? GetDate.getLoopArray(1, 29) : GetDate.getLoopArray(1, 28) |
|||
break; |
|||
default: |
|||
array = '月份格式不正确，请重新输入！' |
|||
} |
|||
return array; |
|||
}, |
|||
getDateTimes: (opts) => { |
|||
var years = GetDate.getLoopArray(opts.start, opts.end); |
|||
var months = GetDate.getLoopArray(1, 12); |
|||
var days = GetDate.getMonthDay(opts.curyear, opts.curmonth); |
|||
var hours = GetDate.getLoopArray(0, 23); |
|||
var minutes = GetDate.getLoopArray(0, 59); |
|||
var seconds = GetDate.getLoopArray(0, 59); |
|||
var times = null; |
|||
|
|||
switch (opts.fields) { |
|||
case 'year': |
|||
times = [years] |
|||
break; |
|||
case 'month': |
|||
times = [years, months] |
|||
break; |
|||
case 'day': |
|||
times = [years, months, days] |
|||
break; |
|||
case 'hour': |
|||
times = [years, months, days, hours] |
|||
break; |
|||
case 'minute': |
|||
times = [years, months, days, hours, minutes] |
|||
break; |
|||
case 'second': |
|||
times = [years, months, days, hours, minutes, seconds] |
|||
break; |
|||
default: |
|||
times = [years, months, days, hours, minutes, seconds] |
|||
} |
|||
return times; |
|||
}, |
|||
getIndex(arr,target){ |
|||
let len = arr.length; |
|||
for(let i = 0; i < len; i++){ |
|||
if(arr[i] == target){ |
|||
return i; |
|||
} |
|||
} |
|||
}, |
|||
getTimeIndex(arrs, targets){ |
|||
let len = arrs.length; |
|||
let arr = []; |
|||
for(let i = 0; i < len; i++){ |
|||
arr.push(GetDate.getIndex(arrs[i], targets[i])) |
|||
} |
|||
return arr; |
|||
}, |
|||
error(str){ |
|||
console.error(str); |
|||
} |
|||
} |
|||
|
|||
module.exports = GetDate; |
|||
@ -0,0 +1,239 @@ |
|||
<template> |
|||
<picker class='rui-picker rui-class' mode="multiSelector" :range="times" :value="timesIndex" :disabled="curDisabled" @change='changeDate' @cancel="cancelDate" @columnchange="columnchangeDate"> |
|||
{{curValue || '请选择时间'}} |
|||
<!-- #ifdef H5 --> |
|||
<text v-if='iftime' class="iconfont icon-right col-9" style="font-size: 26upx;position: absolute;right: 20upx;" @click.capture=""></text> |
|||
<!-- #endif --> |
|||
<!-- #ifdef MP-WEIXIN --> |
|||
<text v-if='iftime' class="iconfont icon-right col-9" style="font-size: 26upx;position: absolute;right: 80upx;" @click.capture=""></text> |
|||
<!-- #endif --> |
|||
|
|||
</picker> |
|||
</template> |
|||
|
|||
<script> |
|||
import GetDate from './GetDate.js'; |
|||
export default { |
|||
name: 'rattenking-dtpicker', |
|||
props: { |
|||
/** |
|||
* picker允许选中的最小值 |
|||
*/ |
|||
start: { |
|||
type: String, |
|||
default: '1900-00-00 00:00:00' |
|||
}, |
|||
/** |
|||
* picker允许选中的最大值 |
|||
*/ |
|||
end: { |
|||
type: String, |
|||
default: '2500-12-30 23:59:59' |
|||
}, |
|||
/** |
|||
* picker默认展示的值 |
|||
*/ |
|||
value: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
/** |
|||
* picker的时间粒度 |
|||
*/ |
|||
fields: { |
|||
type: String, |
|||
default: 'second' |
|||
}, |
|||
name:{ |
|||
type: String, |
|||
default:'请选择时间' |
|||
}, |
|||
/** |
|||
* picker是否禁止 |
|||
*/ |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
|
|||
iftime:{ |
|||
type:Boolean, |
|||
default:false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
times:[['2019','2020'],['01','02']], |
|||
timesIndex: [1,1], |
|||
timesString: null, |
|||
curValue: this.value, |
|||
curDisabled: this.disabled, |
|||
cancel: null |
|||
} |
|||
}, |
|||
watch: { |
|||
value(val) { |
|||
this.curValue = val; |
|||
}, |
|||
disabled(val){ |
|||
this.curDisabled = val; |
|||
}, |
|||
curDisabled(val){ |
|||
this.curDisabled = val; |
|||
}, |
|||
curValue(val) { |
|||
this.curValue = val; |
|||
this.$emit('change', val); |
|||
}, |
|||
times(val){ |
|||
this.times = val; |
|||
}, |
|||
timesIndex(val){ |
|||
this.timesIndex = val; |
|||
}, |
|||
cancel(val) { |
|||
this.$emit('cancel', val); |
|||
} |
|||
}, |
|||
created() { |
|||
if(this.value === ''){ |
|||
let time = GetDate.getCurrentTimes(); |
|||
let arr = []; |
|||
for (let key in time.detail) { |
|||
arr.push(time.detail[key]); |
|||
if(key === this.fields){ |
|||
break; |
|||
} |
|||
} |
|||
this.value = GetDate.format(arr); |
|||
this.curValue = GetDate.format(arr); |
|||
} |
|||
switch (this.fields){ |
|||
case 'year': |
|||
if (this.value.length !== 4) {GetDate.error('时间粒度和时间格式不一致');this.curDisabled = true;return false;} |
|||
if (this.start.length !== 4) { GetDate.error('时间粒度和开始时间格式不一致'); this.curDisabled = true; return false;} |
|||
if (this.end.length !== 4) { GetDate.error('时间粒度和结束时间格式不一致'); this.curDisabled = true; return false;} |
|||
break; |
|||
case 'month': |
|||
if (this.value.length !== 7) { GetDate.error('时间粒度和时间格式不一致'); this.curDisabled = true; return false;} |
|||
if (this.start.length !== 7) { GetDate.error('时间粒度和开始时间格式不一致'); this.curDisabled = true; return false;} |
|||
if (this.end.length !== 7) { GetDate.error('时间粒度和结束时间格式不一致'); this.curDisabled = true; return false;} |
|||
break; |
|||
case 'day': |
|||
if (this.value.length !== 10) { GetDate.error('时间粒度和时间格式不一致'); this.curDisabled = true; return false;} |
|||
if (this.start.length !== 10) { GetDate.error('时间粒度和开始时间格式不一致'); this.curDisabled = true; return false;} |
|||
if (this.end.length !== 10) { GetDate.error('时间粒度和结束时间格式不一致'); this.curDisabled = true; return false;} |
|||
break; |
|||
case 'hour': |
|||
if (this.value.length !== 13) { GetDate.error('时间粒度和时间格式不一致'); this.curDisabled = true; return false;} |
|||
if (this.start.length !== 13) { GetDate.error('时间粒度和开始时间格式不一致'); this.curDisabled = true; return false;} |
|||
if (this.end.length !== 13) { GetDate.error('时间粒度和结束时间格式不一致'); this.curDisabled = true; return false;} |
|||
break; |
|||
case 'minute': |
|||
if (this.value.length !== 16) { GetDate.error('时间粒度和时间格式不一致'); this.curDisabled = true; return false;} |
|||
if (this.start.length !== 16) { GetDate.error('时间粒度和开始时间格式不一致'); this.curDisabled = true; return false;} |
|||
if (this.end.length !== 16) { GetDate.error('时间粒度和结束时间格式不一致'); this.curDisabled = true; return false;} |
|||
break; |
|||
case 'second': |
|||
if (this.value.length !== 19) { GetDate.error('时间粒度和时间格式不一致'); this.curDisabled = true; return false;} |
|||
if (this.start.length !== 19) { GetDate.error('时间粒度和开始时间格式不一致'); this.curDisabled = true; return false;} |
|||
if (this.end.length !== 19) { GetDate.error('时间粒度和结束时间格式不一致'); this.curDisabled = true; return false;} |
|||
break; |
|||
default: |
|||
GetDate.error('时间粒度不存在') |
|||
break; |
|||
} |
|||
let values = this.value.split(' '); |
|||
let targets = GetDate.getCurrentStringValue(this.value); |
|||
|
|||
if (GetDate.getTimes(this.value) < GetDate.getTimes(this.start)){ |
|||
GetDate.error('默认时间不能小于开始时间') |
|||
this.curDisabled = true |
|||
return false; |
|||
} |
|||
if (GetDate.getTimes(this.value) > GetDate.getTimes(this.end)) { |
|||
GetDate.error('默认时间不能大于开始时间') |
|||
this.curDisabled = true |
|||
return false; |
|||
} |
|||
let times = GetDate.getDateTimes({ |
|||
start: this.start.substring(0, 4), |
|||
end: this.end.substring(0, 4), |
|||
curyear: this.value.substring(0, 4), |
|||
curmonth: this.value.substring(5, 7), |
|||
fields: this.fields |
|||
}) |
|||
let timesIndex = GetDate.getTimeIndex(times, targets); |
|||
let timesString = []; |
|||
timesIndex.forEach(o => timesString.push(o)); |
|||
|
|||
this.times = times; |
|||
this.timesIndex = timesIndex; |
|||
this.timesString = timesString; |
|||
}, |
|||
methods: { |
|||
changeDate(e){ |
|||
let values = e.detail.value; |
|||
let times = this.times; |
|||
let curarr = []; |
|||
for (let i = 0, len = values.length; i < len; i++) { |
|||
curarr.push(times[i][values[i]]) |
|||
} |
|||
let str = GetDate.format(curarr); |
|||
// debugger |
|||
this.curValue = str; |
|||
}, |
|||
columnchangeDate(e){ |
|||
// 如果是年和月粒度，那么只需要改变时间格式的index，否则需要判断当月天数 |
|||
if ((this.fields === 'year' || this.fields === 'month')){ |
|||
let timesIndex = GetDate.getNewArray(this.timesIndex); |
|||
timesIndex[e.detail.column] = e.detail.value; |
|||
// let arr = GetDate.getCompare(GetDate.format(GetDate.getChooseArr(this.times,timesIndex)),this.start,this.end,this.times); |
|||
// console.log(arr) |
|||
this.timesIndex = timesIndex; |
|||
return false; |
|||
}else{ |
|||
// 如果改变的是年和月，重新获取天数，同时判断天数的index是否大于当前天数，大于就设置为当月最后一天，否则不变。 |
|||
if(e.detail.column === 0 || e.detail.column === 1){ |
|||
let times = GetDate.getNewArray(this.times); |
|||
let timesIndex = GetDate.getNewArray(this.timesIndex); |
|||
timesIndex[e.detail.column] = e.detail.value; |
|||
let days = GetDate.getMonthDay(times[0][timesIndex[0]], times[1][timesIndex[1]]); |
|||
times[2] = days; |
|||
if(timesIndex[2] > days.length - 1){ |
|||
timesIndex[2] = days.length - 1; |
|||
} |
|||
this.times = times; |
|||
// let arr = GetDate.getCompare(GetDate.format(GetDate.getChooseArr(this.times,timesIndex)),this.start,this.end,this.times); |
|||
this.timesIndex = timesIndex; |
|||
}else{ |
|||
let timesIndex = GetDate.getNewArray(this.timesIndex); |
|||
timesIndex[e.detail.column] = e.detail.value; |
|||
// let arr = GetDate.getCompare(GetDate.format(GetDate.getChooseArr(this.times,timesIndex)),this.start,this.end,this.times); |
|||
// console.log(arr) |
|||
this.timesIndex = timesIndex; |
|||
} |
|||
} |
|||
}, |
|||
cancelDate(e){ |
|||
this.cancel = e |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.rui-picker{ |
|||
/* height: 50upx; */ |
|||
font-size: 26upx; |
|||
/* left: 50upx; */ |
|||
color: #000; |
|||
display: -webkit-flex; |
|||
display: flex; |
|||
align-items: center; |
|||
/* padding: 0 10px; */ |
|||
box-sizing: border-box; |
|||
/* border: 1px solid #aaa; */ |
|||
border-radius: 3px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,137 @@ |
|||
<!-- Abnor页面异常处理 buy 缪启峙 |
|||
引入 Abnor 如:<vAbnor :abnor="'CART'"/> |
|||
异常状态名称 默认为:'DATA' : 如'REQUEST_ERROR','NOT_FOUND','DATA' |
|||
--> |
|||
<template> |
|||
<view> |
|||
<view class="abnor"> |
|||
<view class="abnor-box"> |
|||
<image class="abnor-image" :src="abnorImg" mode="widthFix"></image> |
|||
<view class="abnor-text">{{abnorTitle}}</view> |
|||
<!-- <view class="abnor-tip" v-if="!!abnortip">{{abnortip}}</view> --> |
|||
<!-- <view class="abnor-btn" v-if="!!abnorbutton">{{abnorbutton}}</view> --> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from "@/common/js/app.js" |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
props: { |
|||
abnor: { |
|||
type: String, |
|||
default: "DATA" |
|||
}, |
|||
title: { |
|||
type: String, |
|||
default: "" |
|||
} |
|||
}, |
|||
computed: { |
|||
abnorName() { |
|||
return { |
|||
'DATA': { |
|||
image: '12.png', |
|||
title: '没有相关记录哦' |
|||
}, |
|||
'GOODS': { |
|||
image: '11.png', |
|||
title: '没有相关商品哦' |
|||
}, |
|||
'ORDER': { |
|||
image: '10.png', |
|||
title: '您还没有订单信息哦' |
|||
}, |
|||
'ADDRESS': { |
|||
image: '13.png', |
|||
title: '您还没有收货地址哦' |
|||
}, |
|||
'COUNPONS': { |
|||
image: '14.png', |
|||
title: `暂无${this.appCoupon.coupon_title}哦` |
|||
} |
|||
} |
|||
}, |
|||
abnorImg() { |
|||
return App.img_root + this.abnorName[this.abnor].image; |
|||
}, |
|||
abnorTitle() { |
|||
return this.title ? this.title : this.abnorName[this.abnor].title; |
|||
}, // |
|||
// abnortip() { |
|||
// return this.abnorName[`${this.abnor}`].tip; |
|||
// }, |
|||
// abnorbutton() { |
|||
// return this.abnorName[`${this.abnor}`].button; |
|||
// } |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.abnor { |
|||
position: relative; |
|||
display: block; |
|||
width: 100%; |
|||
height: 0; |
|||
padding-bottom: 100%; |
|||
overflow: hidden |
|||
} |
|||
|
|||
.abnor-box { |
|||
position: absolute; |
|||
display: flex; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center |
|||
} |
|||
|
|||
.abnor-btn { |
|||
min-width: 228upx; |
|||
height: 66upx; |
|||
margin-top: 30upx; |
|||
padding: 0 30upx; |
|||
background-color: #ff5777; |
|||
border: 0 none; |
|||
border-radius: 2upx; |
|||
color: #fff; |
|||
font-size: 28upx; |
|||
text-align: center; |
|||
overflow: hidden; |
|||
line-height: 66upx |
|||
} |
|||
|
|||
.abnor-btn:active { |
|||
background-color: #f5456e |
|||
} |
|||
|
|||
.abnor-image { |
|||
width: 400upx; |
|||
height: 400upx; |
|||
display: block; |
|||
background: transparent no-repeat; |
|||
background-size: cover |
|||
} |
|||
|
|||
.abnor-text { |
|||
margin-top: 30upx; |
|||
color: #333; |
|||
font-size: 28upx |
|||
} |
|||
|
|||
.abnor-tip { |
|||
margin-top: 20upx; |
|||
color: #666; |
|||
font-size: 28upx |
|||
} |
|||
</style> |
|||
@ -0,0 +1,114 @@ |
|||
<!-- 返回页面顶部 buy 缪启峙 |
|||
引入 返回顶部组件如: |
|||
<vGoTop :pageScroll ="PageScroll" goTopStyle="bottom:20px;right:20px;" :showTopHeight ="可不填默认为 300"/> |
|||
pageScroll // 页面滑动的高度, |
|||
goTopStyle // 返回按钮与底部,左右的距离, |
|||
showTopHeight // 滑动高度>按钮出现高度时出现返回按钮 ！ |
|||
--> |
|||
|
|||
<template> |
|||
<view> |
|||
<view class="go-top" :class="{'top-show':isShowTop}" @click="goTop" :style="goTopStyle"> |
|||
<view class="iconfont icon-top"></view> |
|||
<!-- <image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAA6lBMVEX///8AAAD5+fk1NTXW1tbR0dHx8fH8/Pz19fXm5ubQ0NDs7Ozd3d04ODjS0tLf39/j4+PT09Pp6enS0tLPz8/Z2dnZ2dnR0dHh4eHQ0NDU1NSfn5+urq64uLjQ0NDR0dHR0dHBwcHR0dHR0dHR0dHQ0NCjo6OysrK7u7vQ0NDR0dHQ0NDR0dHQ0NDQ0NDS0tLR0dHR0dHR0dHT09PR0dHQ0NDQ0NCnp6fR0dHGxsb09PTT09PQ0NDR0dHQ0NDQ0NA5OTk5OTlDQ0PQ0NDR0dHQ0NDQ0NDQ0NDQ0NDR0dFZWVmrq6vR0dEzMzPX3q4CAAAATHRSTlO/AMb+9vLPw8rcUQLr/WXp4fzYHBAG8a/jP/jZ1dJc9eXPpTie+dfT0c3LxsSqhWxILiEXvZvj1s/OzDri09K8/fz57r50c2LhPfDVto54cwAABKBJREFUaN7k1llTGkEUhuHjyMwAQ9gREEUFV0R2EdC4lmu+/P+/kz6ITiWi3QcGvMh7kYtUqp5095luaEVatvjYqPQG/TsbsO/6g16l8VjMrkgTwbnzh/wFpnaRfzjP8b8JHu7GT2x8mZ2Pd4OGs/ErvLWWSKadsOW6RK5rhZ10MrGGt3rxbIBwdXcL49Zj6TBNLZyOrWPc1m41GNiLHk9WGvHR6XhksvLjqKeHtewluFDEIoOsSAjcpaLngotH4BIOGeckwB0V54AzFahSBYtEWYUUVJXMjLDXtKHyWQkNld30ZoE7dahiPiujY1DVO3K4zMsNOTRzTogXXRbCuVOoki7NkZuE6jQngTM1zXIFi65lzOH2Nn9CLs2dyye93TaFW3y8EQqkCB90ywyO7gEphwLKSQF7URO4zI/BiAJrxI9HWQ9HeawsCjCLRyyqg1t7Alcg77W+htu2wBXJdvsrONNX56vcwGV1zv3M53CupuY5TAsorGa7lvsU5nvSoYXk8O35GVyW3Rvym6Q8He6owUrQwkqoAetMg726GmiXFparRrvuTYGb8gOWH3PzI5yxgSRJKt3elkhSErAzH+AT6UaXfqtK0s0++Rd+5o2WuixLN/v5b9g7Ek70/qpSuX3hZB95E9h/kyyp++OH+mNVIluv75QPe5dAgcw7G7s7O2P5jMwrAD89H+YFpwQL/vXqEollK8VL9uG6aMEbY/eQVIdjeUP0SdV9uMonLHOv2WX5WibzKVff4V0gJlzvJk3aFK45Buy+wdktwTd8sMqQct/l8V8cCL7lrewEjgMhsTuzHALiE7ineYY1iP+fMX2Ye69wl0dL7splf7y6DPNOr5E+f5A0A6drjfea4bx+pzWfjv+JGe51nuGcDYRJl39ZaC4VfWHAzim4CqyTNv961FyjZnN9ruB7ICZwdQ+H2R1yr2B1xGkDV/8E7pvKaXXICn4yOeLhzeTR18o3Q5NDflqhLADS9sJuyejn0AvpchWZpSJ/xSYrZlcr84qNpqtIj2Y/toa3JbOfvEOz6YpTA0jSkisADarwUC83HusKXfFbvOQc4IoGwIiW3AgY0Da/iUvOArbJBlxaci5gfx8MgJYdo98G/4dn/Kd7s1lBEIiiMEGLyBiC3LhSpJ0o1Drd6Ps/U+rmw012ZToz9r1Cqff8hXqcgr1Agr0yg30ktJ9FRHLDIaAAD8Zx+ihAxGQce0LmY+/w4rwVwHnLQS+Agx4JIwEJg2iTgGhDpkpApiLMFSDMsSI0YEVgvkjAfMFukoDdhMGmAYMNS1ECliImqgZMVGxjAQvbeKJSXQPTDVCtRQN27NFA0k7ZgADCkJX4x4Y9/iHwsmMOvIwRn688NVsNNe3YQ01iXCv2GDee4FoS1VdJgHLCZSonxFXH+HkB5R5f5UZQMtLXqvJHnEWyQNU5yoInj/+ruSwYcz0yUCGUCuzFXwU2/tKv35rzPordnqrs1XNP5f2RW71trnCd5wr1bX8DjZHk3G6ZpLTnZK8jnOXs6PhpdnT0NzuC1A3fDa0Gl/7HtCzkmI75oGvKoSv6fPw9+6IbysZtmA++AWRCZN3Qi4IuAAAAAElFTkSuQmCC"></image> --> |
|||
<!-- <text>顶部</text> --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
var scorllTimert = null; |
|||
export default { |
|||
data() { |
|||
return { |
|||
isShowTop: false |
|||
}; |
|||
}, |
|||
methods: { |
|||
goTop(e) { |
|||
if (this.topType === "page") { |
|||
uni.pageScrollTo({ |
|||
scrollTop: 0, |
|||
duration: 300 |
|||
}); |
|||
} else if (this.topType === "view") { |
|||
this.$emit("clickBtn"); |
|||
} |
|||
}, |
|||
//防止滚动触发多次函数 |
|||
debounce(wait, immediate) { |
|||
var that = this; |
|||
return function() { |
|||
// 每次触发 scroll 时先清除定时器 |
|||
clearTimeout(scorllTimert); |
|||
scorllTimert = setTimeout(function() { |
|||
that.handler(immediate); |
|||
}, wait); |
|||
}(); |
|||
}, |
|||
handler(scrollHeight) { |
|||
this.isShowTop = scrollHeight > this.showTopHeight; |
|||
}, |
|||
}, |
|||
watch: { |
|||
pageScroll(value) { |
|||
this.debounce(200, value) |
|||
} |
|||
}, |
|||
props: { |
|||
pageScroll: Number, |
|||
showTopHeight: { |
|||
type: Number, |
|||
default: 300 |
|||
}, |
|||
topType: { |
|||
type: String, |
|||
default: "page" |
|||
}, |
|||
goTopStyle: String |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.go-top { |
|||
position: fixed; |
|||
bottom: 156upx; |
|||
right: 24upx; |
|||
width: 76upx; |
|||
height: 76upx; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
text-align: center; |
|||
z-index: 16; |
|||
transform: translateY(80upx); |
|||
opacity: 0; |
|||
transition: all .5s ease; |
|||
background: rgba(255, 255, 255, 0.7); |
|||
border: 1upx solid #eee; |
|||
} |
|||
|
|||
.go-top.top-show { |
|||
transform: translateY(0); |
|||
opacity: 1; |
|||
} |
|||
|
|||
.go-top .iconfont { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 76upx; |
|||
height: 76upx; |
|||
line-height: 76upx; |
|||
z-index: 1; |
|||
} |
|||
|
|||
/* .go-top text { |
|||
display: inline-block; |
|||
color: #333; |
|||
font-size: 22upx; |
|||
margin-top: 38upx; |
|||
position: relative; |
|||
z-index: 10; |
|||
} */ |
|||
</style> |
|||
@ -0,0 +1,776 @@ |
|||
<!-- |
|||
商品购买菜单 |
|||
submit 确认选择 |
|||
--> |
|||
<template> |
|||
<view> |
|||
<!-- 购买菜单 --> |
|||
<popup-view :show="showBuyMenu" type="bottom" @clickmask="onToggleTrade"> |
|||
<view class="goods-buy-menu" :style="{'height':buyMeunHeight}"> |
|||
<!-- 关闭按钮 --> |
|||
<view class="iconfont icon-roundclose" @click="onToggleTrade"></view> |
|||
<!-- 主体信息--> |
|||
<view class="trade-main"> |
|||
<!-- 购买信息 --> |
|||
<view class="buy-info dis-flex flex-y-center"> |
|||
<view class="buy-images"> |
|||
<image :src="image_path"></image> |
|||
</view> |
|||
<view class="buy-content"> |
|||
<view class="buy-money price-font-family dis-flex flex-y-line"> |
|||
<text class="money-label">¥</text>{{(groupBuyType == '1') ? share_price :goods_price}} |
|||
<view class="dis-flex flex-y-center member-coupon-view" v-if="goodsDetail.vipstatus==='1' && sku_coupon_price != 0"> |
|||
<view class="member-price-label f-22" v-if="goodsDetail.levelarmy == 1">拥军价格</view> |
|||
<view class="member-price-label f-22" v-else>{{goodsDetail.levelname}}</view> |
|||
<view class="f-22 col-f onelist-hidden b-0 coupon-price-2">立减<text class="member-coupon-price">{{sku_coupon_price}}</text>元</view> |
|||
</view> |
|||
</view> |
|||
<view class="buy-stock">库存{{stock_num}}件</view> |
|||
<view class="buy-spec" v-if="!!specData && specData.length>0">选择 {{selectSpec}}</view> |
|||
</view> |
|||
</view> |
|||
<!-- 商品规格 --> |
|||
<scroll-view scroll-y class="buy-spec-list" :style="{'height':'calc('+buyMeunHeight+' - 370rpx)'}"> |
|||
<block v-if="!!specData && specData.length>0"> |
|||
<block v-for="(attr,attr_idx) in specData" :key="attr_idx"> |
|||
<view class="buy-spec-item"> |
|||
<view class="spec-item-title">{{attr.title}}</view> |
|||
<view class="spec-items dis-flex flex-dir-row" v-if="attr.item.length>0"> |
|||
<block v-for="(signItem,item_idx) in attr.item" :key="item_idx"> |
|||
<view class="spec-item" :class="{'active':signItem.checked,'disabled':signItem.disabled}" @click="modelTap" |
|||
:data-attr-idx="attr_idx" :data-item-idx="item_idx" :data-item-check="signItem.checked" :data-item-disabled="signItem.disabled">{{signItem.title}}</view> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
</block> |
|||
<view class="buy-number dis-flex flex-y-center flex-x-between" style="padding-bottom: 50upx;"> |
|||
<view class="buyNumber f-28"> |
|||
<text>购买数量</text> |
|||
</view> |
|||
<view class="selectNumber dis-flex flex-y-center"> |
|||
<button @click="down" class="default" :class="[goods_num>1?'':' default-active']" type="default">-</button> |
|||
<input type="number" v-if="showBuyMenu" v-model="goods_num" ></input> |
|||
<button @click="up" class="default" :class="{'default-active':goods_num>=stock_num || (buy_limit > 0 && goods_num>=user_limit_num)}" |
|||
:disabled="Number(goods_num) > Number(stock_num)" type="default">+</button> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<!-- 按钮 --> |
|||
<view class="buy-button-box dis-flex flex-y-center"> |
|||
<block v-if="isSelectSpec"> |
|||
<block v-if="goodsDetail['type']==='3' && groupBuyType === '2'"> |
|||
<button class="buy-button join-btn" :class="{'notAva-btn':stock_num == 0}" :disabled="stock_num == 0 || isMaxBuyLimit" |
|||
@click="btnClick('confirm')">{{stock_num == 0?"暂无库存":"去参团"}}</button> |
|||
</block> |
|||
<block v-else> |
|||
<button class="buy-button" :class="{'notAva-btn':stock_num == 0}" :disabled="stock_num == 0" @click="btnClick('confirm')">{{stock_num == 0?"暂无库存":"确定"}}</button> |
|||
</block> |
|||
</block> |
|||
<block v-else> |
|||
<button class="buy-button" disabled>请选择商品规格</button> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</popup-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from "@/common/js/app.js" |
|||
import PopupView from "@/components/template/PopManager.vue" |
|||
export default { |
|||
data() { |
|||
return { |
|||
showBuyMenu: false, |
|||
goods_price: 0, //商品价格 |
|||
goods_num: 1, //商品数量 |
|||
stock_num: 0, //库存数量 |
|||
buy_limit: 0, //用户限购数量 |
|||
user_limit_num: 0, //用户可购数量 |
|||
goods_sku_id: "", //选择规格id |
|||
goods_spec_arr: [], //子规格项id |
|||
sku_coupon_price: 0 , //规格会员优惠 |
|||
share_price:0,//拼团价格 |
|||
specData: [], //规格项列表 |
|||
image_path: null, //规格图片 |
|||
skuItem: null, //已选规格 |
|||
activityData: null, //活动参数 |
|||
lp_now_stk: 0 ,// 阶梯数量 |
|||
TextSubstitution:{} |
|||
}; |
|||
}, |
|||
props: { |
|||
goodsSpec: { //商品规格项 |
|||
type: Array, |
|||
default: () => null |
|||
}, |
|||
goodsDetail: { //商品详情 |
|||
type: Object, |
|||
default: () => null |
|||
}, |
|||
specDisabled: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
groupBuyType: { //商品活动数据 |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
}, |
|||
watch: { |
|||
goodsSpec(newValue) { |
|||
if (!!newValue && newValue.length > 0) { |
|||
this.specData.splice(0, newValue.length, ...newValue); |
|||
} |
|||
}, |
|||
goodsDetail(val,oldVal) { |
|||
if (!!val) { |
|||
this.initBuyMeunData(val); |
|||
console.log('监听') |
|||
} |
|||
// deep: true, //对象内部的属性监听，也叫深度监听 |
|||
}, |
|||
groupBuyType(newValue) { |
|||
if (!!newValue) { |
|||
this.updateSpecGoods(); |
|||
} |
|||
}, |
|||
// goods_num(newNumber){ |
|||
// if(Number(newNumber)> Number(this.stock_num)){ |
|||
// this.goods_num = this.stock_num; |
|||
// uni.showToast({ |
|||
// title:'选择数量不能超出库存', |
|||
// icon:'none' |
|||
// }) |
|||
// }else if(Number(newNumber) == 0){ |
|||
// this.goods_num = 1; |
|||
// uni.showToast({ |
|||
// title:'选择数量不能为0', |
|||
// icon:'none' |
|||
// }) |
|||
// } |
|||
// } |
|||
}, |
|||
components: { |
|||
PopupView |
|||
}, |
|||
computed: { |
|||
selectSpec() { |
|||
let specData = this.specData, |
|||
specTextArray = []; |
|||
if (!!specData && specData.length > 0) { |
|||
specData.map(val => { |
|||
val.item.map(item => { |
|||
if (item.checked) { |
|||
specTextArray.push(item.title); |
|||
} |
|||
}) |
|||
}); |
|||
} |
|||
return specTextArray.join(" · "); |
|||
}, |
|||
isSelectSpec() { |
|||
if (this.goodsDetail) { |
|||
return Number(this.goodsDetail.optionstatus > 0) ? this.goods_spec_arr.filter(val => !!val).length === this.specData |
|||
.length : |
|||
true; |
|||
} |
|||
}, |
|||
buyMeunHeight() { |
|||
if (this.goodsDetail && !!this.specData['list']) { |
|||
return Number(this.goodsDetail.optionstatus) > 0 ? (!!this.specData && this.specData['list']['length'] > 1 ? |
|||
'67vh' : '50vh') : '40vh' |
|||
} |
|||
}, |
|||
hasGroups() { |
|||
return this.goodsActivity && this.goodsActivity.group_id; |
|||
}, |
|||
groupsType() { |
|||
return this.goodsDetail.type === '3' && this.groupBuyType === '2'; |
|||
}, |
|||
isShowJoinGroups() { |
|||
return this.activityData && this.activityData.is_show_groups === 1 && this.activityData.groupsNumber > 0; |
|||
}, |
|||
isMaxBuyLimit() { |
|||
if (this.activityData) { |
|||
let { |
|||
limit_buy, //用户限购数量 |
|||
surplus_quantity //用户可购数量 |
|||
} = this, |
|||
buyNumber = this.activityData.buyNumber; |
|||
|
|||
if (typeof buyNumber === 'string') { |
|||
if (limit_buy === 10 && ((this.goods_num + Number(buyNumber)) >= surplus_quantity)) { |
|||
return !0; |
|||
} |
|||
return !1; |
|||
} |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
mounted() { |
|||
this.TextSubstitution = uni.getStorageSync('TextSubstitution'); |
|||
if(!!this.goodsDetail.spec){ |
|||
if(this.goodsDetail.spec.info[0]){ |
|||
console.log(this.goodsDetail); |
|||
if(!this.goodsDetail.spec.info[0].thumb){ |
|||
this.image_path = this.goodsDetail.logo; |
|||
}else{ |
|||
this.image_path = this.goodsDetail.spec.info[0].thumb; |
|||
} |
|||
console.log(this.goodsDetail.spec.info[0].thumb,111111111111); |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
/** |
|||
* 初始化商品详情数据 |
|||
*/ |
|||
initBuyMeunData(detail,num) { |
|||
let _this = this, |
|||
data = {}; |
|||
// 规格id/// |
|||
data.goods_sku_id = !!detail['spec'] ? detail['spec']['info'][0]['id'] : ""; |
|||
//商品价格 |
|||
// console.log(detail,'coushabicaons') |
|||
data.goods_price =_this.goods_price == 0? !!detail['spec'] ? (!_this.groupsType && detail.is_vip > 0 && detail.vipstatus === "1" ? detail['spec']['info'][0]['price'] : detail['spec']['info'][0]['price']) : detail['price'] : _this.goods_price; |
|||
// data.goods_price = !data.goods_price?detail['aloneprice']:0; |
|||
//会员优惠 |
|||
data.sku_coupon_price = !!detail['spec'] ? detail['spec']['info'][0]['discount_price'] : detail['discount_price']; |
|||
//拼团 |
|||
// debugger |
|||
data.share_price = !!detail['spec'] ? detail['spec']['info'][0].aloneprice : (detail['aloneprice']); |
|||
// debugger |
|||
// debugger |
|||
//库存 |
|||
data.stock_num = detail.stk || detail.user_limit_num; |
|||
console.log(data.goods_price) |
|||
//是否限购 |
|||
data.buy_limit = Number(detail.buy_limit); |
|||
//剩余可购买数量 |
|||
data.user_limit_num = detail.user_limit_num; |
|||
// debugger |
|||
// 单规格商品封面图 |
|||
data.image_path = detail.type === '5' ? detail.logo : detail.thumbs[0]; |
|||
//阶梯价数量 |
|||
data.lp_now_stk = detail['lp_now_stk']; |
|||
// 多规格商品封面图 |
|||
if (Number(detail.optionstatus) > 0 && detail['spec']['list'][0]['item']['thumb']) { |
|||
data.image_path = detail['spec']['list'][0]['item']['thumb']; |
|||
} |
|||
// 初始化商品多规格 |
|||
if (Number(detail.optionstatus) > 0) { |
|||
// 默认选中规格第一项 |
|||
let specData = _this.initManySpecData(this.specData,num); |
|||
//查询默认规格的库存 |
|||
let checkedSpec = specData.map(specDataItem => { |
|||
let checked = ""; |
|||
specDataItem.item.map(val => { |
|||
if (val.checked) { |
|||
checked = val.id; |
|||
} |
|||
}); |
|||
return checked; |
|||
}); |
|||
if (checkedSpec.length > 0) { |
|||
let spec_num = detail.spec.info.filter(val => val.specs === checkedSpec.join("_")); |
|||
data.stock_num = spec_num.length > 0 ? spec_num[0].stock : detail.stk; |
|||
} |
|||
data.specData = specData; |
|||
} |
|||
this.setData(data); |
|||
if(!this.goodsDetail.spec) { |
|||
this.image_path = this.goodsDetail.logo; |
|||
return |
|||
} |
|||
if(this.goodsDetail.spec.info[0].thumb){ |
|||
this.image_path = this.goodsDetail.spec.info[0].thumb; |
|||
}else{ |
|||
this.image_path = this.goodsDetail.logo; |
|||
} |
|||
|
|||
|
|||
}, |
|||
/** |
|||
* 商品规格默认不选中 |
|||
*/ |
|||
initManySpecData(data,num) { |
|||
if(num !== 1){ |
|||
console.log(this.goods_spec_arr); |
|||
return data |
|||
} |
|||
console.log(data,'guige1规格测试试试',num); |
|||
for (let i in data) { |
|||
for (let j=0;j<data[i].item.length;j++) { |
|||
// for(let k;k<) |
|||
console.log(data[i].item[j]) |
|||
if(data[i].item[j].checked){ |
|||
// this.showBuyMenu = false; |
|||
// this.showBuyMenu = true; |
|||
console.log(data[i].item[j],11111); |
|||
|
|||
return data |
|||
}else{ |
|||
if (j < 1) { |
|||
// if(data[i].item[0].checked) return; |
|||
data[i].item[0].checked = true; |
|||
this.goods_spec_arr.splice(i, 1, data[i].item[0].id); |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
return data; |
|||
}, |
|||
/** |
|||
* 点击切换不同规格 |
|||
*/ |
|||
modelTap(e) { |
|||
let _this = this, |
|||
attrIdx = Number(e.currentTarget.dataset.attrIdx), |
|||
itemIdx = Number(e.currentTarget.dataset.itemIdx), |
|||
disabled = e.currentTarget.dataset.itemDisabled, |
|||
checked = e.currentTarget.dataset.itemCheck, |
|||
specItemList = null; |
|||
//活动商品判断不参与规格 |
|||
if (_this.specDisabled && disabled) return; |
|||
specItemList = _this.specData[attrIdx].item.map((val, index) => { |
|||
//活动商品规格，可以取消选择 和 判断是否不参与活动 |
|||
if (_this.specDisabled) { |
|||
if (!disabled) { |
|||
if (!checked) { |
|||
val.checked = itemIdx === index; |
|||
} else { |
|||
// val.checked = false; |
|||
_this.$set(val,'checked',false) |
|||
} |
|||
if (itemIdx === index) { |
|||
_this.goods_spec_arr.splice(attrIdx, 1, val.signid); |
|||
} |
|||
} |
|||
} else { |
|||
// val.checked = ; |
|||
_this.$set(val,'checked',(itemIdx === index)) |
|||
} |
|||
if (val.checked) { |
|||
let thumb = val.thumb; |
|||
if(thumb){ |
|||
_this.setData({ |
|||
image_path: thumb |
|||
}); |
|||
} |
|||
} |
|||
if (itemIdx === index) { |
|||
_this.goods_spec_arr.splice(attrIdx, 1, val.checked ? val.id : null); |
|||
if (_this.specDisabled) { |
|||
_this.filterDisabledSpec(val, attrIdx); |
|||
} |
|||
} |
|||
return val; |
|||
}); |
|||
_this.$set(_this.specData[attrIdx], "item", specItemList); |
|||
// 更新商品规格信息 |
|||
_this.updateSpecGoods(); |
|||
}, |
|||
/** |
|||
* 拼团过滤不参与活动规格 |
|||
* @param {Object} 当前子规格项 |
|||
* @param {Number} 当前规格项index |
|||
*/ |
|||
filterDisabledSpec(currentSign, attrIdx) { |
|||
let _this = this, |
|||
skuData = _this.goodsDetail.sku, |
|||
specData = _this.specData, |
|||
specLength = specData.length, //规格数量 |
|||
disabledSignid = []; //包含该规格切不参与活动的规格 |
|||
if (Array.isArray(specData) && Array.isArray(skuData)) { |
|||
//查找包含该子规格的所有规格是否参与拼团 |
|||
skuData.map((skuItem) => { |
|||
const { |
|||
is_use, |
|||
title, |
|||
spec_sku_id = '' |
|||
} = skuItem; |
|||
if (specLength === 1 && !is_use) { |
|||
disabledSignid.push(spec_sku_id); |
|||
} else if (!is_use && spec_sku_id.includes(currentSign.signid)) { |
|||
disabledSignid.push(spec_sku_id); |
|||
} |
|||
}); |
|||
//判断该项是否存在可选规格项 |
|||
if (specLength === 1) { |
|||
return |
|||
} else { |
|||
specData.map((val, index) => { |
|||
let spec_item_list = val.spec_item_list; |
|||
//判断其他规格中，不参与拼团的规格项 |
|||
if (index !== attrIdx) { |
|||
spec_item_list.map(item => { |
|||
let goodsSpec = _this.goods_spec_arr.map(val => val); //已选子规格 |
|||
goodsSpec[index] = item.signid; |
|||
goodsSpec = goodsSpec.filter(val => !!val).join("_"); //可选规格 |
|||
item.disabled = disabledSignid.includes(goodsSpec); |
|||
}); |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}, |
|||
/** |
|||
* 更新商品规格信息 |
|||
*/ |
|||
updateSpecGoods(numis) { |
|||
let spec_sku_id = this.goods_spec_arr.join('_'), |
|||
// 查找skuItem |
|||
spec_list = !!this.goodsDetail.spec ? this.goodsDetail.spec.info : [], |
|||
{ |
|||
is_vip, |
|||
discount_price, |
|||
vipstatus, |
|||
type |
|||
} = this.goodsDetail, |
|||
skuItem = null; |
|||
skuItem = spec_list.find((val) => { |
|||
return val.specs == spec_sku_id; |
|||
}); |
|||
// 记录goods_sku_id |
|||
// console.log(group_id, skuItem); |
|||
// 更新商品价格、划线价、库存 |
|||
if (typeof skuItem === 'object') { |
|||
console.log(skuItem,'是是是',spec_list) |
|||
this.skuItem = skuItem; |
|||
this.setData({ |
|||
goods_sku_id: skuItem.id, |
|||
goods_price: (this.groupBuyType === '1' || (is_vip > 0 && vipstatus === '1')) ? skuItem.price : skuItem.price, |
|||
// line_price: skuItem.line_price, |
|||
stock_num: skuItem.stock, |
|||
// image_path: skuItem.image ? skuItem.image.file_path : this.goodsDetail.thumbs[0], |
|||
goods_num: numis==1?this.goods_num:1, |
|||
sku_coupon_price: skuItem.discount_price, |
|||
share_price:skuItem.aloneprice, |
|||
image_path:skuItem.thumb || this.goodsDetail.logo |
|||
}); |
|||
} else if (skuItem === undefined || skuItem === "") { |
|||
let useSkuItem = this.skuItem ? this.skuItem : spec_list[0]; |
|||
console.log('是是是',spec_list,this.goodsDetail) |
|||
if (type === '3') { |
|||
this.goods_price = this.groupBuyType === "2" ? this.goodsDetail['price'] : this.goodsDetail['aloneprice']; |
|||
this.stock_num = this.stock_num; |
|||
} else { |
|||
this.goods_price = spec_list[0].price; |
|||
this.stock_num = spec_list[0].stock; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 增加商品数量 |
|||
*/ |
|||
up() { |
|||
let { |
|||
stock_num, |
|||
buy_limit, //用户限购数量 |
|||
user_limit_num //用户可购数量 |
|||
} = this; |
|||
this.goods_num = Number(this.goods_num); |
|||
// debugger |
|||
if (buy_limit > 0 && (this.goods_num >= user_limit_num)) { |
|||
|
|||
uni.showToast({ |
|||
icon: "none", |
|||
title: user_limit_num === 0 ? "购买数量已达上限" : `您最多可购买${user_limit_num}件商品` |
|||
}) |
|||
return |
|||
}else if(buy_limit == 0 && (this.goods_num >= user_limit_num) && user_limit_num != 0){ |
|||
uni.showToast({ |
|||
icon: "none", |
|||
title: user_limit_num === 0 ? "购买数量已达上限" : `您最多可购买${user_limit_num}件商品` |
|||
}) |
|||
return |
|||
} |
|||
if (this.goods_num < stock_num) { |
|||
++this.goods_num; |
|||
}else if(this.goods_num < user_limit_num){ |
|||
++this.goods_num; |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 减少商品数量 |
|||
*/ |
|||
down() { |
|||
if (this.goods_num > 1) { |
|||
--this.goods_num; |
|||
} |
|||
}, |
|||
/** |
|||
* 按钮操作 |
|||
*/ |
|||
btnClick(btnType) { |
|||
console.log(this.specData); |
|||
if(this.specData.length > 0){ |
|||
console.log(1111); |
|||
this.updateSpecGoods(1); |
|||
} |
|||
let { |
|||
goods_num, |
|||
goods_sku_id |
|||
} = this, |
|||
buystatus = this.goodsDetail.type === '3' && this.groupBuyType === '2' ? '1' : '2', |
|||
submitData = { |
|||
btnType, |
|||
goods_num, |
|||
goods_sku_id |
|||
}; |
|||
|
|||
if (this.goodsDetail.type === '3') { |
|||
Object.assign(submitData, { |
|||
buystatus: buystatus |
|||
}); |
|||
}; |
|||
// debugger |
|||
// if (this.buy_limit > 0 && (this.goods_num >= this.user_limit_num)) { |
|||
// uni.showToast({ |
|||
// icon: "none", |
|||
// title: this.user_limit_num === 0 ? "购买数量已达上限" : `您最多可购买${this.user_limit_num}件商品` |
|||
// }) |
|||
// return |
|||
// } |
|||
if(this.goods_num > this.stock_num){ |
|||
uni.showToast({ |
|||
title:'购买数量不能超过库存', |
|||
icon:'none' |
|||
}); |
|||
this.goods_num = this.stock_num; |
|||
return |
|||
}else if(this.goods_num < 1){ |
|||
uni.showToast({ |
|||
title:'购买数量不能为0', |
|||
icon:'none' |
|||
}); |
|||
this.goods_num = 1; |
|||
return |
|||
}else if(this.goods_num > this.user_limit_num && this.user_limit_num != 0){ |
|||
uni.showToast({ |
|||
title:`您最多可购买${this.user_limit_num}件商品`, |
|||
icon:'none' |
|||
}); |
|||
this.goods_num = this.user_limit_num; |
|||
return |
|||
} |
|||
if (this.goodsDetail.type === "1" && this.lp_now_stk > 0) { |
|||
if (goods_num > this.lp_now_stk) { |
|||
App.showError("抢购数量已达上限"); |
|||
return; |
|||
} |
|||
}; |
|||
this.showBuyMenu = false; |
|||
this.activeBuyMeuns(false); |
|||
this.$emit("submit", submitData); |
|||
|
|||
}, |
|||
/** |
|||
* 活动购买菜单重置 |
|||
*/ |
|||
activeBuyMeuns(showBuyMenu) { |
|||
let _this = this, |
|||
{ |
|||
groupBuyType, |
|||
specData |
|||
} = _this; |
|||
showBuyMenu && this.updateSpecGoods(); |
|||
if (Array.isArray(specData) && specData.length > 0) { |
|||
specData = specData.map((specItem, specIndex) => { |
|||
specItem.item = specItem.item.map((val, index) => { |
|||
if (!showBuyMenu) { //关 |
|||
// val.checked = false; |
|||
_this.$set(val,'checked',false) |
|||
} |
|||
_this.goods_spec_arr.splice(specIndex, 1, ""); |
|||
return val; |
|||
}) |
|||
return specItem |
|||
}); |
|||
this.specData = specData; |
|||
} |
|||
}, |
|||
/** |
|||
* 购买菜单显示隐藏 |
|||
*/ |
|||
onToggleTrade() { |
|||
//关闭后重置规格数据 |
|||
this.showBuyMenu = !this.showBuyMenu; |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 购买菜单 */ |
|||
.goods-buy-menu { |
|||
width: 100vw; |
|||
height: 67vh; |
|||
background: #FFFFFF; |
|||
border-radius: 12upx 12upx 0 0; |
|||
position: relative; |
|||
z-index: 999; |
|||
} |
|||
|
|||
.goods-buy-menu .icon-roundclose { |
|||
position: absolute; |
|||
top: 20upx; |
|||
right: 20upx; |
|||
font-size: 42upx; |
|||
height: 1em; |
|||
width: 1em; |
|||
color: #999999; |
|||
} |
|||
|
|||
.trade-main { |
|||
padding: 20upx 20upx 50upx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.buy-info .buy-images image { |
|||
width: 180upx; |
|||
height: 180upx; |
|||
display: block; |
|||
border-radius: 12upx; |
|||
} |
|||
|
|||
.buy-content { |
|||
margin-left: 30upx; |
|||
font-size: 24upx; |
|||
} |
|||
|
|||
.buy-money { |
|||
font-size: 40upx; |
|||
color: #fe504f; |
|||
} |
|||
|
|||
.buy-money text { |
|||
font-size: 24upx; |
|||
} |
|||
|
|||
.buy-stock { |
|||
margin-top: 20upx; |
|||
color: #999999; |
|||
} |
|||
|
|||
.buy-spec { |
|||
margin-top: 24upx; |
|||
} |
|||
|
|||
.buy-spec-list { |
|||
margin-top: 30upx; |
|||
height: calc(65vh - 336upx); |
|||
} |
|||
|
|||
.buy-spec-item { |
|||
padding-bottom: 30upx; |
|||
} |
|||
|
|||
.spec-item-title { |
|||
font-size: 28upx; |
|||
line-height: 2em; |
|||
margin-top: 12upx; |
|||
} |
|||
|
|||
.spec-items { |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.spec-items .spec-item { |
|||
font-size: 26upx; |
|||
white-space: nowrap; |
|||
background: #F5F5F5; |
|||
padding: 12upx 20upx; |
|||
border-radius: 12upx; |
|||
color: #333; |
|||
margin: 20upx 20upx 0 0; |
|||
border: 1upx solid transparent; |
|||
} |
|||
|
|||
.spec-items .spec-item.active { |
|||
background: #fffbfb; |
|||
color: #FE504F; |
|||
border: 1upx solid #ff4444; |
|||
} |
|||
|
|||
.spec-items .spec-item.disabled { |
|||
background: rgb(245, 245, 245); |
|||
color: rgb(208, 208, 208); |
|||
} |
|||
|
|||
.buy-number { |
|||
margin: 20upx 0; |
|||
} |
|||
|
|||
.buy-button-box { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
height: 140upx; |
|||
background: #FFFFFF; |
|||
} |
|||
|
|||
.buy-button-box .buy-button { |
|||
color: #FFFFFF; |
|||
border-radius: 50upx; |
|||
width: 90%; |
|||
margin: 16upx 5% 0; |
|||
background: #FE504F; |
|||
font-size: 28upx; |
|||
line-height: 2.8em; |
|||
} |
|||
|
|||
.buy-button-box .buy-button.join-btn { |
|||
background: #FFD940; |
|||
color: #333333; |
|||
} |
|||
|
|||
.buy-button-box .buy-button.notAva-btn { |
|||
background-color: #EEEEEE !important; |
|||
color: #999999 !important; |
|||
} |
|||
|
|||
.member-price-label { |
|||
color: #333333; |
|||
height: 0; |
|||
line-height: 30upx; |
|||
border-width: 0upx 10upx 30upx 0; |
|||
border-style: none solid solid; |
|||
border-color: transparent #000 #efd68f; |
|||
position: relative; |
|||
left: 10upx; |
|||
padding-left: 6upx; |
|||
border-radius: 4upx 0 0 4upx; |
|||
margin-left: -10upx; |
|||
} |
|||
|
|||
.member-coupon-price { |
|||
color: #efd68f; |
|||
} |
|||
|
|||
.coupon-price-2 { |
|||
padding: 0 10upx; |
|||
height: 30upx; |
|||
line-height: 30upx; |
|||
border-radius: 0 4upx 4upx 0; |
|||
} |
|||
|
|||
.member-coupon-view { |
|||
position: relative; |
|||
margin-left: 12upx; |
|||
top: -6rpx; |
|||
} |
|||
|
|||
.selectNumber input { |
|||
text-align: center; |
|||
width: 100upx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,75 @@ |
|||
<!-- 局部加载样式 --> |
|||
<template> |
|||
<view class="part-loading" v-if="isShow" :style="backgroundType==='goods'?'':'background-color:#FFFFFF;'"> |
|||
<view class="data-load"></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
isShow: true |
|||
}; |
|||
}, |
|||
components: { |
|||
|
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
onLoad(options) { |
|||
|
|||
}, |
|||
methods: { |
|||
showChange() { |
|||
this.isShow = !this.isShow; |
|||
} |
|||
}, |
|||
props: { |
|||
backgroundType: { |
|||
type: String, |
|||
default: () => "" |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.part-loading { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: 500; |
|||
} |
|||
|
|||
.data-load { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
margin: -30upx 0 0 -30upx; |
|||
width: 60upx; |
|||
height: 60upx; |
|||
display: inline-block; |
|||
padding: 0px; |
|||
border-radius: 100%; |
|||
border: 4upx solid; |
|||
border-top-color: #FFD940; |
|||
border-bottom-color: rgba(0, 0, 0, 0.2); |
|||
border-left-color: #FFD940; |
|||
border-right-color: rgba(0, 0, 0, 0.2); |
|||
animation: loader 1s ease-in-out infinite; |
|||
} |
|||
|
|||
@keyframes loader { |
|||
from { |
|||
transform: rotate(0deg); |
|||
} |
|||
|
|||
to { |
|||
transform: rotate(360deg); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,482 @@ |
|||
<template> |
|||
<view class="page"> |
|||
<view class="pop" :class="['pop--'+type1,{'pop--show' : show1 }]" v-if="show1"> |
|||
<view v-if="overlay1" class="pop__mask" @touchmove="touchmove" :class="{'pop__mask--hide':!showOverlay1}" @click="handleMaskClick1"></view> |
|||
<view class="pop__container" :style="{zIndex: zIndex}" @touchmove="touchmove"> |
|||
<view class="show"> |
|||
<image :src="imgfixUrls + 'merchant/addPhone.png'" /> |
|||
<view class="showPackage"> |
|||
<view class="showTitle"><span>绑定手机号</span></view> |
|||
<view class="userNameInput"> |
|||
<view class="phones" style="font-size: 20upx;"> |
|||
手机号: |
|||
</view> |
|||
<input v-if="show1" :class="show1?'faluhd':'ruleInputs'" :disabled="!show1" style="padding-left: 100upx;" v-model="phone" @blur="blurIos"/> |
|||
</view> |
|||
<view class="userSmsInput" v-if="verifyCode == 1"> |
|||
<view class="phones" style="font-size: 20upx;"> |
|||
图形验证码: |
|||
</view> |
|||
<input v-if="show1" :class="show1?'faluhd':'ruleInputs'" type="number" :disabled="!show1" maxlength="4" v-model="txMode" style="padding-left:150upx;width: 150upx;" @blur="blurIos"/> |
|||
<image class="getSms" :src="getImgUrl" @click="GVC" /> |
|||
</view> |
|||
<view class="userSmsInput" v-if="smsver == 0"> |
|||
<view class="phones" style="font-size: 20upx;"> |
|||
验证码: |
|||
</view> |
|||
<input v-if="show1" :class="show1?'faluhd':'ruleInputs'" :disabled="!show1" type="number" maxlength="4" v-model="smsCode" style="padding-left:100upx;" @blur="blurIos"/> |
|||
<view class="getSms" @click.stop="PIN" v-if="timeCount == 0"><span>获取验证码</span></view> |
|||
<view class="getSms" v-else> |
|||
<span>{{ timeEnd }}</span> |
|||
</view> |
|||
</view> |
|||
<view class="showSubmitButton" @click="changeMobile"><span>绑定手机号</span></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
|
|||
<script> |
|||
import App from '@/common/js/app.js'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
showB: true, |
|||
phone: '', |
|||
txMode: '', |
|||
smsCode: '', |
|||
getSmsCode: '', |
|||
getImgUrl: '', |
|||
timeCount: 0, |
|||
timeEnd: '', |
|||
verifyCode: '', |
|||
smsver:0, |
|||
img:'', |
|||
codetime:'' |
|||
}; |
|||
}, |
|||
props: { |
|||
show1: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 是否有遮罩层 |
|||
overlay1: { |
|||
default: true |
|||
}, |
|||
// 遮罩层是否会显示 |
|||
showOverlay1: { |
|||
default: true |
|||
}, |
|||
// 内容从哪个方向出，可选 center top bottom left right |
|||
type1: { |
|||
type: String, |
|||
default: 'center' |
|||
}, |
|||
//表单组件v-model所需的参数 |
|||
modelData: { |
|||
type1: Object, |
|||
default: () => {} |
|||
}, |
|||
zIndex :{ |
|||
type: String, |
|||
default: '999' |
|||
} |
|||
}, |
|||
watch:{ |
|||
show1(val){ |
|||
if(val){ |
|||
this.GVC(); |
|||
} |
|||
} |
|||
}, |
|||
components: { |
|||
|
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
mounted() { |
|||
let _this = this; |
|||
_this.img = _this.imgfixUrl; |
|||
_this.verifyCode = uni.getStorageSync('platformInfor').verifycode; |
|||
_this.smsver = uni.getStorageSync('platformInfor').smsver; |
|||
// console.log(_this.verifyCode); |
|||
}, |
|||
methods: { |
|||
touchmove(){ |
|||
|
|||
}, |
|||
blurIos(){ |
|||
uni.pageScrollTo({ |
|||
scrollTop: 0, |
|||
duration: 0 |
|||
}); |
|||
}, |
|||
GVC() { |
|||
let _this = this; |
|||
let data = {}; |
|||
App._post_form('&do=GVC', data, res => { |
|||
_this.getImgUrl = res.data.image_data; |
|||
_this.codetime = res.data.time; |
|||
}); |
|||
}, |
|||
handleMaskClick1() { |
|||
this.$emit('clickmask1'); |
|||
}, |
|||
// 发送短信验证码 |
|||
PIN() { |
|||
let _this = this; |
|||
if (_this.phone == '' || _this.phone.length !== 11) { |
|||
uni.showToast({ |
|||
icon: 'none', |
|||
title: '请输入正确的手机号', |
|||
duration: 2000 |
|||
}); |
|||
return; |
|||
} |
|||
if ( _this.txMode == '' && _this.verifyCode == 1) { |
|||
uni.showToast({ |
|||
icon: 'none', |
|||
title: '请输入正确图形验证码', |
|||
duration: 2000, |
|||
success() { |
|||
_this.GVC(); |
|||
} |
|||
}); |
|||
return; |
|||
} |
|||
let data = { |
|||
phone: _this.phone, |
|||
type: 2, |
|||
code:_this.txMode, |
|||
time:_this.codetime |
|||
}; |
|||
App._post_form('&do=PIN', data, res => { |
|||
let timer_num = 60; |
|||
let timeClock = setInterval(function() { |
|||
timer_num--; |
|||
_this.timeEnd = timer_num + 's后重试'; |
|||
_this.timeCount = timer_num; |
|||
if (timer_num == 0) { |
|||
clearInterval(timeClock); |
|||
} |
|||
}, 1000); |
|||
_this.getSmsCode = res.data.code; |
|||
}); |
|||
}, |
|||
// 改绑手机 |
|||
changeMobile() { |
|||
let _this = this; |
|||
if (_this.phone == '' || _this.phone.length !== 11) { |
|||
uni.showModal({ |
|||
showCancel:false, |
|||
content:'请输入正确的手机号' |
|||
}) |
|||
return; |
|||
} |
|||
if (_this.smsCode == '' && _this.smsver == 0) { |
|||
uni.showModal({ |
|||
showCancel:false, |
|||
content:'请输入验证码' |
|||
}) |
|||
return; |
|||
} |
|||
if ( _this.txMode == '' && _this.verifyCode == 1) { |
|||
uni.showModal({ |
|||
showCancel:false, |
|||
content:'请输入验证码', |
|||
success() { |
|||
_this.GVC(); |
|||
} |
|||
}) |
|||
return; |
|||
} |
|||
let data = { |
|||
mobile: _this.phone, |
|||
mergeflag: '', |
|||
code: _this.smsCode |
|||
}; |
|||
App._post_form( |
|||
'&p=member&do=changeMobile', |
|||
data, |
|||
res => { |
|||
|
|||
_this.phone = ''; |
|||
_this.smsCode = ''; |
|||
_this.txMode = ''; |
|||
uni.showToast({ |
|||
icon: 'none', |
|||
title: '绑定成功', |
|||
duration: 2000, |
|||
}); |
|||
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组 |
|||
let curRoute = routes[routes.length - 1].route |
|||
if(curRoute == 'pages/mainPages/userCenter/userCenter') { |
|||
_this.$emit('getMemberInfo'); |
|||
} |
|||
this.$emit('clickmask1',true); |
|||
// _this.show1 = false; |
|||
}, |
|||
errno => { |
|||
if (!!errno.data.data.code && errno.data.data.code === 1 || errno.data.message == '手机号已存在,无法重复绑定') return |
|||
uni.showModal({ |
|||
title: '友情提示', |
|||
content: errno.data.message, |
|||
showCancel: true, |
|||
success(res) { |
|||
if (res.confirm) { |
|||
let data = { |
|||
mobile: _this.phone, |
|||
mergeflag: 1, |
|||
code: _this.smsCode |
|||
}; |
|||
App._post_form('&p=member&do=changeMobile', data, res => { |
|||
_this.phone = ''; |
|||
_this.smsCode = ''; |
|||
uni.showToast({ |
|||
icon: 'none', |
|||
title: '绑定成功', |
|||
duration: 2000 |
|||
}); |
|||
_this.$emit('clickmask1'); |
|||
// _this.show1 = false; |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
<style lang="less" scoped> |
|||
.page{ |
|||
z-index: 2000; |
|||
} |
|||
.phones { |
|||
position: absolute; |
|||
padding-left: 20upx; |
|||
left: 1%; |
|||
top: 1%; |
|||
color: #999999; |
|||
line-height: 92upx; |
|||
} |
|||
.ruleInputs{ |
|||
min-width:0!important; |
|||
min-height:0!important; |
|||
padding: 0!important; |
|||
} |
|||
.faluhd{ |
|||
|
|||
} |
|||
.pop { |
|||
visibility: hidden; |
|||
|
|||
.uni-input-placeholder { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
.pop--show { |
|||
visibility: visible; |
|||
|
|||
.uni-input-placeholder { |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
.pop__mask { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: 999; |
|||
background: rgba(0, 0, 0, .5); |
|||
display: none |
|||
} |
|||
|
|||
.pop__mask--hide { |
|||
background: 0 0; |
|||
} |
|||
|
|||
.pop__container { |
|||
position: fixed; |
|||
left: 50%; |
|||
top: 50%; |
|||
-webkit-transform: translate3d(-50%, -50%, 0); |
|||
transform: translate3d(-50%, -50%, 0); |
|||
-webkit-transform-origin: center; |
|||
transform-origin: center; |
|||
-webkit-transition: all .3s ease; |
|||
transition: all .3s ease; |
|||
opacity: 0 |
|||
} |
|||
|
|||
.pop--show .pop__container { |
|||
opacity: 1 |
|||
} |
|||
|
|||
.pop--show .pop__mask { |
|||
display: block |
|||
} |
|||
|
|||
.pop--left .pop__container { |
|||
left: 0; |
|||
top: 50%; |
|||
-webkit-transform: translate3d(-100%, -50%, 0); |
|||
transform: translate3d(-100%, -50%, 0) |
|||
} |
|||
|
|||
.pop--show.pop--left .pop__container { |
|||
-webkit-transform: translate3d(0, -50%, 0); |
|||
transform: translate3d(0, -50%, 0) |
|||
} |
|||
|
|||
.pop--right .pop__container { |
|||
right: 0; |
|||
top: 50%; |
|||
left: auto; |
|||
-webkit-transform: translate3d(100%, -50%, 0); |
|||
transform: translate3d(100%, -50%, 0) |
|||
} |
|||
|
|||
.pop--show.pop--right .pop__container { |
|||
-webkit-transform: translate3d(0, -50%, 0); |
|||
transform: translate3d(0, -50%, 0) |
|||
} |
|||
|
|||
.pop--bottom .pop__container { |
|||
top: auto; |
|||
left: 50%; |
|||
// bottom: 0; |
|||
-webkit-transform: translate3d(-50%, 100%, 0); |
|||
transform: translate3d(-50%, 100%, 0) |
|||
} |
|||
|
|||
.pop--show.pop--bottom .pop__container { |
|||
-webkit-transform: translate3d(-50%, 0, 0); |
|||
transform: translate3d(-50%, 0, 0) |
|||
} |
|||
|
|||
.pop--top .pop__container { |
|||
top: 0; |
|||
left: 50%; |
|||
-webkit-transform: translate3d(-50%, -100%, 0); |
|||
transform: translate3d(-50%, -100%, 0) |
|||
} |
|||
|
|||
.pop--show.pop--top .pop__container { |
|||
-webkit-transform: translate3d(-50%, 0, 0); |
|||
transform: translate3d(-50%, 0, 0) |
|||
} |
|||
|
|||
.show { |
|||
width: 600upx; |
|||
background: rgba(255, 255, 255, 1); |
|||
border-radius: 20upx; |
|||
overflow: hidden; |
|||
|
|||
>image { |
|||
width: 600upx; |
|||
height: 112upx; |
|||
} |
|||
} |
|||
|
|||
.showTitle { |
|||
font-size: 36upx; |
|||
|
|||
color: rgba(51, 51, 51, 1); |
|||
} |
|||
|
|||
.showTitle2 { |
|||
margin-top: 16upx; |
|||
font-size: 24upx; |
|||
|
|||
color: rgba(153, 153, 153, 1); |
|||
} |
|||
|
|||
.showPackage { |
|||
padding: 0 50upx 50upx 50upx; |
|||
} |
|||
|
|||
.userNameInput { |
|||
margin-top: 50upx; |
|||
position: relative; |
|||
width: 500upx; |
|||
height: 90upx; |
|||
background: rgba(248, 248, 248, 1); |
|||
border-radius: 10upx; |
|||
|
|||
>input { |
|||
height: 90upx; |
|||
margin-left: 30upx; |
|||
font-size: 28upx; |
|||
|
|||
color: rgba(51, 51, 51, 1); |
|||
} |
|||
} |
|||
|
|||
.userSmsInput { |
|||
width: 500upx; |
|||
height: 90upx; |
|||
background: rgba(248, 248, 248, 1); |
|||
border-radius: 10upx; |
|||
margin-top: 20upx; |
|||
position: relative; |
|||
|
|||
>input { |
|||
vertical-align: middle; |
|||
display: inline-block; |
|||
height: 90upx; |
|||
width: 200upx; |
|||
margin-left: 30upx; |
|||
font-size: 28upx; |
|||
|
|||
color: rgba(51, 51, 51, 1); |
|||
} |
|||
} |
|||
|
|||
.getSms { |
|||
vertical-align: middle; |
|||
display: inline-block; |
|||
width: 150upx; |
|||
height: 58upx; |
|||
background: rgba(255, 68, 68, 1); |
|||
border-radius: 6upx; |
|||
text-align: center; |
|||
|
|||
>span { |
|||
line-height: 58upx; |
|||
font-size: 24upx; |
|||
|
|||
color: rgba(255, 255, 255, 1); |
|||
} |
|||
} |
|||
|
|||
.showSubmitButton { |
|||
margin: 40upx auto 0 auto; |
|||
width: 292upx; |
|||
height: 74upx; |
|||
background: rgba(255, 68, 68, 1); |
|||
border-radius: 37upx; |
|||
text-align: center; |
|||
|
|||
>span { |
|||
line-height: 74upx; |
|||
font-size: 28upx; |
|||
|
|||
color: rgba(255, 255, 255, 1); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,161 @@ |
|||
<template> |
|||
<view class="page"> |
|||
<view class="pop" :class="['pop--'+type,{'pop--show' : show }]"> |
|||
<view v-if="overlay" class="pop__mask" :class="{'pop__mask--hide':!showOverlay}" @click="handleMaskClick" @touchmove="touchmove"></view> |
|||
<view class="pop__container" :style="{'bottom':bottom}" @touchmove="touchmove"> |
|||
<slot></slot> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
}; |
|||
}, |
|||
props: { |
|||
show: { |
|||
default: false |
|||
}, |
|||
// 是否有遮罩层 |
|||
overlay: { |
|||
default: true |
|||
}, |
|||
// 遮罩层是否会显示 |
|||
showOverlay: { |
|||
default: true |
|||
}, |
|||
// 内容从哪个方向出，可选 center top bottom left right |
|||
type: { |
|||
type: String, |
|||
default: 'center' |
|||
}, |
|||
bottom:{ |
|||
type:String, |
|||
default:'' |
|||
}, |
|||
//表单组件v-model所需的参数 |
|||
modelData: { |
|||
type: Object, |
|||
default: () => {} |
|||
} |
|||
}, |
|||
components: { |
|||
|
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
methods: { |
|||
handleMaskClick() { |
|||
this.$emit('clickmask'); |
|||
}, |
|||
touchmove(){ |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.pop { |
|||
visibility: hidden |
|||
} |
|||
|
|||
.pop--show { |
|||
visibility: visible |
|||
} |
|||
|
|||
.pop__mask { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: 999; |
|||
background: rgba(0, 0, 0, .5); |
|||
display: none |
|||
} |
|||
|
|||
.pop__mask--hide { |
|||
background: 0 0; |
|||
} |
|||
|
|||
.pop__container { |
|||
position: fixed; |
|||
left: 50%; |
|||
top: 50%; |
|||
-webkit-transform: translate3d(-50%, -50%, 0); |
|||
transform: translate3d(-50%, -50%, 0); |
|||
-webkit-transform-origin: center; |
|||
transform-origin: center; |
|||
-webkit-transition: all .3s ease; |
|||
transition: all .3s ease; |
|||
z-index: 999; |
|||
opacity: 0 |
|||
} |
|||
|
|||
.pop--show .pop__container { |
|||
opacity: 1 |
|||
} |
|||
|
|||
.pop--show .pop__mask { |
|||
display: block |
|||
} |
|||
|
|||
.pop--left .pop__container { |
|||
left: 0; |
|||
top: 50%; |
|||
-webkit-transform: translate3d(-100%, -50%, 0); |
|||
transform: translate3d(-100%, -50%, 0) |
|||
} |
|||
|
|||
.pop--show.pop--left .pop__container { |
|||
-webkit-transform: translate3d(0, -50%, 0); |
|||
transform: translate3d(0, -50%, 0) |
|||
} |
|||
|
|||
.pop--right .pop__container { |
|||
right: 0; |
|||
top: 50%; |
|||
left: auto; |
|||
-webkit-transform: translate3d(100%, -50%, 0); |
|||
transform: translate3d(100%, -50%, 0) |
|||
} |
|||
|
|||
.pop--show.pop--right .pop__container { |
|||
-webkit-transform: translate3d(0, -50%, 0); |
|||
transform: translate3d(0, -50%, 0) |
|||
} |
|||
|
|||
.pop--bottom .pop__container { |
|||
top: auto; |
|||
left: 50%; |
|||
bottom: 0; |
|||
-webkit-transform: translate3d(-50%, 100%, 0); |
|||
transform: translate3d(-50%, 100%, 0) |
|||
} |
|||
|
|||
.pop--show.pop--bottom .pop__container { |
|||
-webkit-transform: translate3d(-50%, 0, 0); |
|||
transform: translate3d(-50%, 0, 0) |
|||
} |
|||
|
|||
.pop--top .pop__container { |
|||
top: 0; |
|||
left: 50%; |
|||
-webkit-transform: translate3d(-50%, -100%, 0); |
|||
transform: translate3d(-50%, -100%, 0) |
|||
} |
|||
|
|||
.pop--show.pop--top .pop__container { |
|||
-webkit-transform: translate3d(-50%, 0, 0); |
|||
transform: translate3d(-50%, 0, 0) |
|||
} |
|||
</style> |
|||
@ -0,0 +1,43 @@ |
|||
<template> |
|||
<view class="Skip"><view v-html="wxOpenTags"></view></view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
wxOpenTags: null |
|||
}; |
|||
}, |
|||
props: { |
|||
AppData: { |
|||
type: Object, |
|||
default: null |
|||
} |
|||
}, |
|||
mounted() { |
|||
//#ifdef H5 |
|||
setTimeout(() => { |
|||
this.pageWxApp(); |
|||
}, 2000); |
|||
//#endif |
|||
}, |
|||
methods: { |
|||
pageWxApp() { |
|||
let _this = this; |
|||
let linktitle; |
|||
let linktail; |
|||
linktitle =_this.AppData.link.split('?')[0]; |
|||
linktail =_this.AppData.link.split('?')[1]; |
|||
_this.AppData.link = linktitle + '.html?' + linktail; |
|||
_this.wxOpenTags = `<wx-open-launch-weapp path="${_this.AppData.link}" id="launch-wxapp" username="${_this.AppData.original_id}"> |
|||
<template> |
|||
<uni-view style="display: block;background: url(${_this.AppData.img});background-size: 100% 100%;width: 400px;height: 140px;"></uni-view> |
|||
</template> |
|||
</wx-open-launch-weapp>`; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style></style> |
|||
@ -0,0 +1,161 @@ |
|||
<template> |
|||
<!-- banner轮播 --> |
|||
<view class="diy-banner"> |
|||
<swiper :autoplay="autoplay" class="banner-box swiper-box b-f" :circular="true" |
|||
@change="_bindChange" :style="{'height':styles.img_height+'px','width':styles.img_width+'px'}"> |
|||
<swiper-item v-for="(banner,index) in itemData" :key="index"> |
|||
<image @click="navigationTo(banner.link)" @load="_imagesHeight($event,index)" class="slide-image" :src="banner.thumb"></image> |
|||
</swiper-item> |
|||
</swiper> |
|||
<view class="swiper-indicator" :class="indicatorStyle"> |
|||
<block v-if="indicatorStyle !== 'arc2'"> |
|||
<view class="indicator-item" :class="{'active':imgCurrent === index }" v-for="(item,index) in itemData" :key="index"></view> |
|||
</block> |
|||
<block v-else> |
|||
<view class="indicator-item">{{imgCurrent+1}}/{{itemData.length}}</view> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from "@/common/js/app.js" |
|||
export default { |
|||
data() { |
|||
return { |
|||
// banner轮播组件属性 |
|||
indicatorDots: true, // 是否显示面板指示点 |
|||
autoplay: true, // 是否自动切换 |
|||
imgCurrent: 0, // 当前banne所在滑块指针 |
|||
}; |
|||
}, |
|||
props: { |
|||
itemData: { |
|||
type: Array, |
|||
default: ()=>[] |
|||
}, |
|||
styles:{ |
|||
type:Object, |
|||
default:{} |
|||
} |
|||
}, |
|||
components: { |
|||
|
|||
}, |
|||
computed: { |
|||
indicatorStyle() { |
|||
//下标样式 1圆角 2椭圆 3矩形 4椭圆数字 |
|||
// let borderstyle = this.itemStyle.borderstyle; |
|||
// return borderstyle == 1 ? "round" : borderstyle == 2 ? "arc" : borderstyle == 3 ? "square" : "arc2"; |
|||
return "arc2" |
|||
} |
|||
}, |
|||
beforeCreate() { |
|||
|
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
methods: { |
|||
/** |
|||
* 计算图片高度 |
|||
*/ |
|||
_imagesHeight(e,imgIndex) { |
|||
if(imgIndex !== 0) return; |
|||
let that = this; |
|||
uni.getSystemInfo({ |
|||
success(res) { |
|||
// 获取图片真实宽度 |
|||
let imgwidth = e.detail.width, |
|||
imgheight = e.detail.height, |
|||
// 宽高比 |
|||
ratio = imgwidth / imgheight; |
|||
// 计算的高度值 |
|||
let viewHeight = res.windowWidth / ratio; |
|||
that.imgHeight = viewHeight; |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
/** |
|||
* 记录当前指针 |
|||
*/ |
|||
_bindChange(e) { |
|||
this.imgCurrent = e.detail.current; |
|||
}, |
|||
|
|||
/** |
|||
* 跳转到指定页面 |
|||
*/ |
|||
navigationTo(url) { |
|||
App.navigationTo({ |
|||
url:url |
|||
}) |
|||
// App.navigationToH5(url); |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* banner轮播 */ |
|||
|
|||
.diy-banner { |
|||
position: relative; |
|||
padding: 30upx; |
|||
background-color: #FFFFFF; |
|||
} |
|||
|
|||
.diy-banner .slide-image { |
|||
width: 100%; |
|||
height: 100%; |
|||
margin: 0 auto; |
|||
display: block; |
|||
} |
|||
|
|||
/* 底部指示器 */ |
|||
.swiper-indicator { |
|||
height: 28upx; |
|||
padding: 0 20upx; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 20upx; |
|||
text-align: right; |
|||
} |
|||
|
|||
.indicator-item { |
|||
display: inline-block; |
|||
height: 12upx; |
|||
width: 12upx; |
|||
border-radius: 20upx; |
|||
background: rgba(204, 204, 204, .6); |
|||
margin: 0 8upx; |
|||
font-size: 24upx; |
|||
} |
|||
|
|||
.swiper-indicator.arc .indicator-item { |
|||
width: 24upx; |
|||
border-radius: 12upx; |
|||
} |
|||
|
|||
.swiper-indicator.square .indicator-item { |
|||
display: inline-block; |
|||
height: 6upx; |
|||
width: 32upx; |
|||
border-radius: 0; |
|||
} |
|||
|
|||
.swiper-indicator.arc2 .indicator-item { |
|||
width: auto; |
|||
height: 28upx; |
|||
line-height: 28upx; |
|||
color: #fff; |
|||
padding: 0 10upx; |
|||
vertical-align:top; |
|||
} |
|||
|
|||
.indicator-item.active { |
|||
background: #fff; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,81 @@ |
|||
<template> |
|||
<view class="activity"> |
|||
<view style="background-color: #F6F6F6;"> |
|||
<view class="b-f" style="padding: 20upx;border-radius: 10upx;margin-bottom: 30upx;" v-for="(item,index) in tabDataList" :key="index" @click="toSignUp(item)"> |
|||
<view class="dis-flex" > |
|||
<view style="flex: 0.3;"> |
|||
<image :src="item.logo" style="width: 200upx;height: 200upx;margin-right: 20upx;border-radius: 10upx;" mode=""></image> |
|||
</view> |
|||
<view style="position: relative;flex: 0.7;"> |
|||
<view class="f-30" style="padding-bottom: 15upx;"> |
|||
{{item.goods_name}} |
|||
</view> |
|||
<view class="col-9 f-20" style="padding-bottom: 15upx;"> |
|||
<view class="dis-il-block" style="width: 350upx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> |
|||
{{item.address}} |
|||
</view> |
|||
<view style="float: right;">{{item.distance}}</view> |
|||
</view> |
|||
<view class="f-22 col-9" style="height: 30upx;line-height: 30upx;padding-bottom: 15upx;" v-if="item.minprice && item.maxprice"> |
|||
<view > |
|||
价格: <text style="color: #FF4444;font-size: 36upx;padding-left: 10upx;"><text class="f-20">¥</text>{{item.minprice}}</text> |
|||
<text style="padding: 0 10upx;color: #FF4444;">~</text> |
|||
<text style="color: #FF4444;font-size: 36upx;padding-left: 10upx;"><text class="f-20">¥</text>{{item.maxprice}}</text> |
|||
</view> |
|||
<!-- <view > |
|||
最高价: |
|||
</view> --> |
|||
</view> |
|||
<view class="f-22 col-9" style="height: 30upx;line-height: 30upx;padding-bottom: 15upx;" v-else> |
|||
<view > |
|||
价格: <text style="color: #FF4444;font-size: 36upx;padding-left: 10upx;"><text class="f-20">¥</text>{{item.price}}</text> |
|||
</view> |
|||
<!-- <view > |
|||
最高价: |
|||
</view> --> |
|||
</view> |
|||
<view > |
|||
<view class="f-20 col-9 dis-il-block" style="margin: 10upx 0 10upx;background-color: #FFEBEB;color: #FF4444;border-radius: 60upx;height: 30upx;line-height: 30upx;padding: 5upx 20upx;"> |
|||
{{item.catename}} |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="f-26 col-f t-c" |
|||
style="position: absolute;background-color: #FF4444;height: 50upx;line-height: 50upx;width: 150upx;border-radius: 60upx;right: 10upx;bottom: 10upx;"> |
|||
立即报名 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from '@/common/js/app.js' |
|||
export default{ |
|||
data(){ |
|||
return{ |
|||
|
|||
} |
|||
}, |
|||
props:{ |
|||
tabDataList:{ |
|||
type:Array, |
|||
default:[] |
|||
} |
|||
}, |
|||
methods:{ |
|||
toSignUp(item){ |
|||
console.log(item); |
|||
debugger |
|||
App.navigationTo({ |
|||
url: `pages/subPages2/coursegoods/coursegoods?id=${item.id}` |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -0,0 +1,257 @@ |
|||
<template> |
|||
<view> |
|||
<view class="advert" v-if="isadvert && !advertflag && advertData.data !== '' && advertData.data !== null"> |
|||
<view class="advert-style1" v-if="advertData.params.style == 'default'"> |
|||
<view class="advert-mask" :style="'background-color: #000; opacity: 0.65;'" @click="advertClose()"></view> |
|||
<view class="advert-style1-d"> |
|||
<view class="advert-style1-close" v-if="advertData.params.canclose == '0' && advertData.params.autoclose !== '0'">{{ countTimeNmu }} 秒</view> |
|||
<view class="advert-style1-close" @click="advertClose()" v-if="advertData.params.canclose == '1' && advertData.params.autoclose !== '0'">{{ countTimeNmu }} 关闭</view> |
|||
<view class="advert-style1-close" @click="advertClose()" v-if="advertData.params.canclose == '1' && advertData.params.autoclose == '0'">关闭</view> |
|||
<swiper class="swiper" :indicator-dots="true" :circular="banner.circular" indicator-color="rgba(255,255,255,.4)" |
|||
indicator-active-color="rgba(255,255,255,.8)"> |
|||
<swiper-item v-for="(item, key) in advertData.data" :key="key"> |
|||
<view class="a" v-if="item.click == '0'" @click="navigateTo(item.linkurl)"> |
|||
<image class="image" :src="item.imgurl" mode="scaleToFill"></image> |
|||
</view> |
|||
<view class="a" v-if="item.click == '1'" @click="advertClose()"> |
|||
<image class="image" :src="item.imgurl" mode="scaleToFill"></image> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
</view> |
|||
</view> |
|||
<view class="advert-style2" v-else-if="advertData.params.style == 'small-bot'"> |
|||
<view class="advert-mask" :style="'background-color: '+advertData.style.background+'; opacity: '+advertData.style.opacity+';'" |
|||
@click="advertClose()"></view> |
|||
<view class="advert-d"> |
|||
<view class="advert-close" v-if="advertData.params.canclose == '1'" @click="advertClose()"> |
|||
<view class="i icon iconfont icon-round_close_light"></view> |
|||
</view> |
|||
<swiper class="swiper" :indicator-dots="true" :circular="banner.circular" indicator-color="rgba(255,255,255,.4)" indicator-active-color="rgba(255,255,255,.8)" |
|||
v-if="advertDataData.length > 1"> |
|||
<swiper-item class="swiper-item" v-for="(item, key) in advertData.data" :key="key"> |
|||
<view class="a" v-if="item.click == '0'" @click="navigateTo(item.linkurl)"> |
|||
<image class="image" :src="item.imgurl" mode="widthFix"></image> |
|||
</view> |
|||
<view class="a" v-if="item.click == '1'" @click="advertClose()"> |
|||
<image class="image" :src="item.imgurl" mode="widthFix"></image> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
<view class="swiper-container-advert-one" v-else> |
|||
<view class="swiper-item-one" v-for="(item, key) in advertDataData" :key="key"> |
|||
<view class="a" v-if="item.click == '0'" @click="navigateTo(item.linkurl)"> |
|||
<image class="image" :src="item.imgurl" mode="widthFix"></image> |
|||
</view> |
|||
<view class="a" v-if="item.click == '1'" @click="advertClose()"> |
|||
<image class="image" :src="item.imgurl"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from "@/common/js/app.js" |
|||
export default { |
|||
props: ['advertData'], |
|||
data() { |
|||
return { |
|||
countTimeNmu: 0, |
|||
banner: { |
|||
indicatorDots: true, |
|||
circular: false, |
|||
}, |
|||
advertDataData: [], |
|||
isadvert: null, |
|||
advertflag: false |
|||
} |
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
mounted() { |
|||
this.openAdvert() |
|||
}, |
|||
methods: { |
|||
openAdvert() { |
|||
let _this = this; |
|||
// showType 0 每次显示 1 间隔 |
|||
if (!!_this.advertData.params && _this.advertData.params.showtype === '1') { |
|||
let timeStamp = uni.getStorageSync(`timeStamp${_this.advertData.id}`), |
|||
nowTime = Date.parse(new Date()) / 1000, |
|||
showTime = _this.advertData.params.showtime; |
|||
if (!!timeStamp) { |
|||
let isadvert = (timeStamp + showTime * 60) > nowTime ? false : true; |
|||
if (isadvert) { |
|||
uni.setStorageSync(`timeStamp${_this.advertData.id}`, nowTime); |
|||
} |
|||
_this.isadvert = isadvert; |
|||
} else { |
|||
_this.isadvert = true; |
|||
uni.setStorageSync(`timeStamp${_this.advertData.id}`, nowTime); |
|||
} |
|||
} else { |
|||
_this.isadvert = true; |
|||
} |
|||
for (var i in _this.advertData.data) { |
|||
_this.advertDataData.push(_this.advertData.data[i]) |
|||
} |
|||
if (!!_this.advertData.params && _this.advertData.params.style == 'default' && _this.advertData.params.autoclose != 0) { |
|||
_this.countTimeNmu = parseInt(_this.advertData.params.autoclose) |
|||
setTimeout(_this.countTime, 1000) |
|||
} |
|||
}, |
|||
advertClose() { |
|||
var that = this |
|||
if (!!that.advertData.params && that.advertData.params.canclose == '1') { |
|||
that.isadvert = false; |
|||
that.advertflag = true; |
|||
that.countTimeNmu = 0; |
|||
clearTimeout(that.countTime) |
|||
} |
|||
}, |
|||
countTime() { |
|||
var that = this |
|||
that.countTimeNmu += -1; |
|||
if (that.countTimeNmu > 0) { |
|||
setTimeout(that.countTime, 1000) |
|||
} else { |
|||
that.advertClose() |
|||
} |
|||
}, |
|||
navigateTo(url) { |
|||
App.navigationTo({ |
|||
url: url |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.advert-mask { |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: rgba(0, 0, 0, .65); |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 100; |
|||
} |
|||
|
|||
.advert-d { |
|||
width: 100%; |
|||
height: calc((100vw - 80upx) / 0.7142); |
|||
position: fixed; |
|||
top: 100upx; |
|||
left: 0; |
|||
z-index: 101; |
|||
} |
|||
|
|||
.advert-close { |
|||
width: 80upx; |
|||
height: 80upx; |
|||
line-height: 80upx; |
|||
color: #fff; |
|||
text-indent: 4upx; |
|||
text-align: center; |
|||
margin-left: -40upx; |
|||
border-radius: 50%; |
|||
position: fixed; |
|||
left: 50%; |
|||
bottom: 200upx; |
|||
z-index: 999; |
|||
} |
|||
|
|||
.advert-close .i { |
|||
font-size: 80upx; |
|||
display: inline; |
|||
} |
|||
|
|||
.advert-d .swiper { |
|||
height: 100%; |
|||
} |
|||
|
|||
.advert-d .swiper-item-one { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.advert-d .swiper-item-one .a { |
|||
height: 100%; |
|||
padding: 0 80upx; |
|||
margin-top: 40upx; |
|||
} |
|||
|
|||
.advert-d .swiper-item-one .a .image { |
|||
width: 100%; |
|||
height: calc((100vw - 80upx) / 0.7142); |
|||
max-height: 100%; |
|||
border-radius: 10upx; |
|||
} |
|||
|
|||
.advert-d .swiper-item { |
|||
width: calc(100vw - 160upx); |
|||
} |
|||
|
|||
.advert-d .swiper-item .a { |
|||
height: 100%; |
|||
padding: 0 80upx; |
|||
} |
|||
|
|||
.advert-d .swiper-item .a .image { |
|||
width: 100%; |
|||
max-height: 90%; |
|||
border-radius: 10upx; |
|||
} |
|||
|
|||
.advert-d .swiper-container-advert-one { |
|||
height: 100%; |
|||
} |
|||
|
|||
.advert-style1-d { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 10000; |
|||
} |
|||
|
|||
.advert-style1-close { |
|||
height: 60upx; |
|||
line-height: 60upx; |
|||
color: #fff; |
|||
font-size: 30upx; |
|||
padding: 0 20upx; |
|||
background-color: rgba(0, 0, 0, .65); |
|||
border-radius: 100upx; |
|||
position: absolute; |
|||
top: 10%; |
|||
right: 30upx; |
|||
z-index: 99; |
|||
} |
|||
|
|||
.advert-style1-d .swiper { |
|||
height: 100%; |
|||
} |
|||
|
|||
.advert-style1-d swiper-item { |
|||
width: 100vw; |
|||
} |
|||
|
|||
.advert-style1-d swiper-item .a { |
|||
height: 100%; |
|||
} |
|||
|
|||
.advert-style1-d swiper-item .a .image { |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: #fff; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,146 @@ |
|||
<template> |
|||
<view class="barrage" v-if="!!barrageInfo&&(!!barrageInfo.avatar)"> |
|||
<view class="mbList" :style="{ top: topH, left: topW }"> |
|||
<view class="mbPackage"> |
|||
<image :src="barrageInfo.avatar" class="barrageImg verCenter" v-if="!!barrageInfo.avatar"></image> |
|||
<text class="font26 colorW lineH50 verCenter pL10">{{ barrageInfo.nickname }}开通了{{ barrageInfo.day }}天{{ halfcardtext }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
barrageList: { |
|||
type: Array, |
|||
default: [] |
|||
}, |
|||
barrageType: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
barrageInfo:{}, |
|||
topH: null, |
|||
topW: null, |
|||
itempx: null, |
|||
halfcardtext: '' |
|||
}; |
|||
}, |
|||
mounted() { |
|||
let _this = this; |
|||
// console.info('barrageInfo',(!!_this.barrageInfo.avatar)) |
|||
uni.getStorage({ |
|||
key: 'TextSubstitution', |
|||
success: function(res) { |
|||
_this.halfcardtext = res.data.halfcardtext; |
|||
} |
|||
}); |
|||
setTimeout(()=>{ |
|||
_this.clock() |
|||
},5000) |
|||
}, |
|||
watch: { |
|||
}, |
|||
onReady() { |
|||
let _this = this; |
|||
}, |
|||
onHide() { |
|||
console.info('onHide'); |
|||
let _this = this; |
|||
}, |
|||
onUnload() { |
|||
console.info('onUnload'); |
|||
}, |
|||
methods: { |
|||
clearSet() { |
|||
console.info('我执行了'); |
|||
let _this = this; |
|||
clearInterval(_this.set1); |
|||
clearInterval(_this.set2); |
|||
clearInterval(_this.set3); |
|||
}, |
|||
clock(w, h) { |
|||
let _this = this; |
|||
console.info('执行2'); |
|||
_this.set1 = setInterval(barrage, 4000); |
|||
function barrage() { |
|||
let i = Math.ceil(Math.random() * _this.barrageList.length); |
|||
_this.barrageInfo = _this.barrageList[i - 1]; |
|||
// console.info('barrageInfo',(!!_this.barrageInfo.avatar)) |
|||
} |
|||
_this.set2 = setInterval(barrageh, 4000); |
|||
function barrageh() { |
|||
let i = Math.ceil(Math.random() * uni.upx2px(400)); |
|||
uni.createSelectorQuery() |
|||
.select('.mbList') |
|||
.boundingClientRect(data => { |
|||
_this.itempx = uni.upx2px(750) + 'px'; |
|||
_this.topH = i + 'px'; |
|||
}) |
|||
.exec(); |
|||
} |
|||
_this.set3 = setInterval(barrageW, 4000); |
|||
function barrageW() { |
|||
let i = Math.ceil(Math.random() * h); |
|||
_this.topW = i - _this.itempx; |
|||
if (_this.topW < 0) { |
|||
_this.topW = 0 + 'px'; |
|||
} else { |
|||
_this.topW = i - _this.itempx + 'px'; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
@keyframes myfirst { |
|||
0% { |
|||
opacity: 0; |
|||
} |
|||
50% { |
|||
opacity: 1; |
|||
} |
|||
100% { |
|||
opacity: 0; |
|||
} |
|||
} |
|||
.barrageImg { |
|||
width: 30upx; |
|||
height: 30upx; |
|||
border-radius: 50%; |
|||
} |
|||
.mbList { |
|||
animation-iteration-count: infinite; |
|||
animation-duration: 4s; |
|||
animation-name: myfirst; |
|||
position: absolute; |
|||
height: 50upx; |
|||
background: rgba(0, 0, 0, 0.65); |
|||
display: inline-block; |
|||
border-radius: 20upx; |
|||
} |
|||
.mbPackage { |
|||
padding: 0 20upx; |
|||
} |
|||
.font26 { |
|||
font-size: 26upx; |
|||
} |
|||
.colorW { |
|||
color: white; |
|||
} |
|||
.lineH50 { |
|||
line-height: 50upx; |
|||
} |
|||
.verCenter { |
|||
vertical-align: middle; |
|||
} |
|||
.pL10 { |
|||
padding-left: 10upx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,196 @@ |
|||
<template> |
|||
<view class="checkCity" :style="{width: width,margin:m_l}"> |
|||
<picker mode="multiSelector" class="dataPicker" :range="citylist" :value="cityIndex" @columnchange='changeCity' range-key="name" @change="checkCity"> |
|||
<view class="uni-input" v-if="returnData.provinceidName!==''">{{ returnData.provinceidName }} {{ returnData.areaidName }} {{ returnData.distidName }}</view> |
|||
<view class="uni-input1" v-else> |
|||
选择省市 区县 |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from "@/common/js/app.js" |
|||
// #ifdef H5 |
|||
import wxApi from "@/common/js/wxApi.js" |
|||
// #endif |
|||
|
|||
export default { |
|||
props:{ |
|||
userAddress:{ |
|||
type: Object, |
|||
default:{} |
|||
}, |
|||
show:'', |
|||
width:{ |
|||
type:String, |
|||
default:'70%' |
|||
}, |
|||
m_l:{ |
|||
type:String, |
|||
default:'0 0 0 30px' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
cityList:[], |
|||
citylist:[], |
|||
cityIndex:[0,0,0], |
|||
returnData:{ |
|||
distidName:'', |
|||
provinceidName:'', |
|||
areaidName:'', |
|||
provinceid:'', |
|||
cityid:'', |
|||
countyid:'', |
|||
}, |
|||
count:0 |
|||
}; |
|||
}, |
|||
mounted(){ |
|||
this.cityList=uni.getStorageSync('cityList') |
|||
this.init(); |
|||
}, |
|||
watch:{ |
|||
'userAddress':{ |
|||
handler(newval,oldval){ |
|||
let _this=this; |
|||
console.log(newval); |
|||
if(_this.userAddress.provinceidName == undefined || _this.userAddress.provinceidName==''){ |
|||
for(let i=0;i<_this.cityList.length;i++){ |
|||
if(_this.userAddress.provinceid==_this.cityList[i].id){ |
|||
_this.returnData.provinceidName=_this.cityList[i].name; |
|||
for(let a=0;a<_this.cityList[i].area.length;a++){ |
|||
if(_this.userAddress.cityid==_this.cityList[i].area[a].id){ |
|||
_this.returnData.areaidName=_this.cityList[i].area[a].name |
|||
for(let c=0;c<_this.cityList[i].area[a].dist.length;c++){ |
|||
if(_this.userAddress.countyid==_this.cityList[i].area[a].dist[c].id){ |
|||
_this.returnData.distidName=_this.cityList[i].area[a].dist[c].name |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
else{ |
|||
_this.returnData.provinceidName=_this.userAddress.provinceidName |
|||
_this.returnData.areaidName=_this.userAddress.areaidName |
|||
_this.returnData.distidName=_this.userAddress.distidName |
|||
for(let i=0;i<_this.cityList.length;i++){ |
|||
if(_this.userAddress.provinceidName==_this.cityList[i].name){ |
|||
_this.returnData.provinceid=_this.cityList[i].id |
|||
for(let a=0;a<_this.cityList[i].area.length;a++){ |
|||
if(_this.userAddress.areaidName==_this.cityList[i].area[a].name){ |
|||
_this.returnData.cityid=_this.cityList[i].area[a].id |
|||
for(let c=0;c<_this.cityList[i].area[a].dist.length;c++){ |
|||
if(_this.userAddress.countyid==_this.cityList[i].area[a].dist[c].id){ |
|||
_this.returnData.countyid=_this.cityList[i].area[a].dist[c].id |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
_this.$emit("galadata",_this.returnData); |
|||
}, |
|||
deep:true |
|||
} |
|||
}, |
|||
methods:{ |
|||
init(){ |
|||
let _this=this |
|||
let cityCheckLeft=[] |
|||
let cityCheckCenter=[] |
|||
let cityCheckRight=[] |
|||
// 省 |
|||
for(let i=0;i<_this.cityList.length;i++){ |
|||
cityCheckLeft.push(_this.cityList[i]) |
|||
} |
|||
_this.citylist.push(cityCheckLeft) |
|||
// 市 |
|||
for(let i=0;i<_this.cityList[0].area.length;i++ ){ |
|||
cityCheckCenter.push(_this.cityList[0].area[i]) |
|||
} |
|||
_this.citylist.push(cityCheckCenter) |
|||
// 区 |
|||
for(let i=0;i<_this.cityList[0].area[0].dist.length;i++){ |
|||
cityCheckRight.push(_this.cityList[0].area[0].dist[i]) |
|||
} |
|||
_this.citylist.push(cityCheckRight) |
|||
}, |
|||
// 三级联动 |
|||
changeCity(e){ |
|||
let _this=this |
|||
let cityCheckCenter=[] |
|||
let cityCheckRight=[] |
|||
// 市级联动 |
|||
if(e.target.column==0){ |
|||
for(let i=0;i<_this.cityList.length;i++){ |
|||
if(e.target.value==i){ |
|||
for( let a=0;a<_this.cityList[i].area.length;a++){ |
|||
cityCheckCenter.push(_this.cityList[i].area[a]) |
|||
} |
|||
} |
|||
} |
|||
_this.citylist.splice(1,2,cityCheckCenter) |
|||
_this.citylist.splice(2,3,cityCheckCenter[0].dist) |
|||
} |
|||
// 区级联动 |
|||
if (e.target.column == 1) { |
|||
for (let a = 0; a < _this.citylist[1].length; a++) { |
|||
if (e.target.value == a) { |
|||
for (let c = 0; c < _this.citylist[1][a].dist.length; c++) { |
|||
cityCheckRight.push(_this.citylist[1][a].dist[c]); |
|||
} |
|||
} |
|||
} |
|||
_this.citylist.splice(2, 3, cityCheckRight); |
|||
} |
|||
}, |
|||
// 弹窗确定按钮 |
|||
checkCity: function(e) { |
|||
let _this = this; |
|||
_this.returnData.provinceidName = _this.citylist[0][e.target.value[0]].name; |
|||
_this.returnData.areaidName = _this.citylist[1][e.target.value[1]].name; |
|||
_this.returnData.distidName = _this.citylist[2][e.target.value[2]] && _this.citylist[2][e.target.value[2]].name || ''; |
|||
_this.returnData.provinceid = _this.citylist[0][e.target.value[0]].id; |
|||
_this.returnData.cityid = _this.citylist[1][e.target.value[1]].id; |
|||
_this.returnData.countyid = _this.citylist[2][e.target.value[2]] && _this.citylist[2][e.target.value[2]].id || ''; |
|||
_this.$emit("returnData",_this.returnData,_this.cityIndex) |
|||
console.log(_this.cityIndex); |
|||
}, |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.checkCity{ |
|||
vertical-align: middle; |
|||
height: 100%; |
|||
display: inline-block; |
|||
} |
|||
.uni-input{ |
|||
line-height: 80upx; |
|||
vertical-align: middle; |
|||
width: 100%; |
|||
height: 80upx; |
|||
display: inline-block; |
|||
font-size: 24upx; |
|||
font-family: SourceHanSansCN-Regular; |
|||
|
|||
color: #333333; |
|||
} |
|||
.uni-input1{ |
|||
line-height: 80upx; |
|||
color:rgba(153,153,153,1); |
|||
vertical-align: middle; |
|||
width: 100%; |
|||
height: 80upx; |
|||
display: inline-block; |
|||
font-size: 24upx; |
|||
font-family: SourceHanSansCN-Regular; |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,329 @@ |
|||
<template> |
|||
<view class="citydeliveryGoods"> |
|||
<view class="style-one" v-if="goodItem.id == 'citydelivery_goods'"> |
|||
<view class="dis-flex"> |
|||
<view class="f-36 f-w flex-box">{{ goodItem.params.title }}</view> |
|||
<view class="col-9 f-24 flex-box t-r" style="line-height: 48upx;" v-if="goodItem.params.show_more == 1"> |
|||
<text @click="openAllGoods(false)" >更多</text> |
|||
<text class="iconfont icon-right" style="font-size: 24upx;"></text> |
|||
</view> |
|||
</view> |
|||
<view class="goods-box"> |
|||
<view class="goods-item" v-for="(item, index) in goodItem.data" @click="openGoods(item.id)"> |
|||
<image :src="item.logo" mode=""></image> |
|||
<view style="padding: 10upx;box-sizing: border-box;width: 202upx;"> |
|||
<view class="f-28 col-3 f-w goods-title">{{ item.goods_name }}</view> |
|||
<view class="f-20 col-9 p-top-bom-10">销量：{{ item.buy_num }}</view> |
|||
<view > |
|||
<text class="f-20 c-ff4444 f-w">¥</text> |
|||
<text class="f-32 c-ff4444 f-w">{{ item.price }}</text> |
|||
</view> |
|||
<view class="shop-btn">购</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="style-two" @click="openAllGoods(goodItem.style.link)" v-if="goodItem.id == 'citydelivery_goods2'" |
|||
:style="'background-image: url(' + goodItem.style.top_image + ');background-size: 100% 130px;background-repeat: no-repeat;' " > |
|||
<view class="col-9 f-24 t-r" style="line-height: 200upx;padding: 0 10upx;"> |
|||
<view style="height: 200upx;"> |
|||
|
|||
</view> |
|||
<!-- <text @click="openAllGoods(goodItem.style.link)">更多</text> --> |
|||
<!-- <text class="iconfont icon-right" style="font-size: 24upx;"></text> --> |
|||
</view> |
|||
<view class="dis-flex goodsTwoBox"> |
|||
<view class="goodsTwoItem" v-for="(item, index) in goodItem.data" :key="index" @click="openGoods(item.id)"> |
|||
<image :src="item.logo" mode=""></image> |
|||
<view class="content"> |
|||
<view class="f-24 col-3 f-w goods-title">{{ item.goods_name }}</view> |
|||
<view class="f-20 col-9 p-top-bom-10">销量：{{ item.buy_num }}</view> |
|||
<view class="price-box"> |
|||
<text class="f-20 f-w c-ff4444">¥</text> |
|||
<text class="f-28 f-w c-ff4444">{{ item.price }}</text> |
|||
<view class="goodsBtn"><view class="shop-btn">购</view></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="style-two" v-if="goodItem.id == 'citydelivery_goods3'" |
|||
:style="'background-image: url(' + goodItem.style.top_image + ');background-size: 100% 130px;background-repeat: no-repeat;' " > |
|||
<view class="col-9 f-24 t-r" style="line-height: 140upx;padding: 0 10upx;"> |
|||
<text @click="openAllGoods(goodItem.style.link)">更多</text> |
|||
<text class="iconfont icon-right" style="font-size: 24upx;"></text> |
|||
</view> |
|||
<view class="goodsTwoBox"> |
|||
<view class="goodsThreeItem dis-flex" v-for="(item, index) in goodItem.data" :key="index" @click="openGoods(item.id)"> |
|||
<view class="img"> |
|||
<image :src="item.logo" mode=""></image> |
|||
</view> |
|||
<view class="content"> |
|||
<view class="col-3 f-32 f-w m-btm20 name"> |
|||
{{item.goods_name}} |
|||
</view> |
|||
<view class="f-24 col-9"> |
|||
销量：{{ item.buy_num }} |
|||
</view> |
|||
<view class="f-36 c-ff4444"> |
|||
<text class="f-24">¥</text> |
|||
<text>{{ item.price }}</text> |
|||
</view> |
|||
<view class="content-btn"> |
|||
立即购买 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="style-four" v-if="goodItem.id == 'citydelivery_goods4'"> |
|||
<view class="four-item" @click="openAllGoods(goodItem.style.link)"> |
|||
<image :src="goodItem.style.top_image" mode="" style="width: 100%;height: 100%;border-radius: 10upx;"></image> |
|||
</view> |
|||
<view class="four-item" v-for="(item,index) in goodItem.data" :key="index" @click="openGoods(item.id)"> |
|||
<image :src="item.logo" mode=""></image> |
|||
<view style="padding: 10upx 10upx;box-sizing: border-box;width: 202upx;"> |
|||
<view class="f-28 col-3 f-w goods-title">{{ item.goods_name }}</view> |
|||
<view class="f-20 col-9 p-top-bom-10">销量：{{ item.buy_num }}</view> |
|||
<view > |
|||
<text class="f-20 c-ff4444 f-w">¥</text> |
|||
<text class="f-32 c-ff4444 f-w">{{ item.price }}</text> |
|||
</view> |
|||
<view class="shop-btn">购</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from '@/common/js/app.js'; |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
props: { |
|||
goodItem: { |
|||
type: Object, |
|||
default: {} |
|||
} |
|||
}, |
|||
methods: { |
|||
openGoods(id) { |
|||
App.navigationTo({ |
|||
url: `pages/subPages2/businessCenter/foodIntroduced/foodIntroduced?id=${id}` |
|||
}); |
|||
}, |
|||
openAllGoods(url) { |
|||
// debugger |
|||
if (url) { |
|||
App.navigationTo({ |
|||
url:url |
|||
}); |
|||
}else{ |
|||
App.navigationTo({ |
|||
url: `pages/subPages2/businessCenter/businessCenter` |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.style-one { |
|||
.goods-box { |
|||
display: flex; |
|||
padding-top: 30upx; |
|||
overflow: auto; |
|||
justify-content: space-between; |
|||
flex-wrap: wrap; |
|||
.goods-item { |
|||
border: 1upx solid #eeeeee; |
|||
background-color: #ffffff; |
|||
width: 400upx; |
|||
border-radius: 10upx; |
|||
// height: 100upx; |
|||
flex: 0 0 30%; |
|||
// margin-right: 20upx; |
|||
position: relative; |
|||
margin-bottom: 20upx; |
|||
image { |
|||
width: 200upx; |
|||
height: 200upx; |
|||
border-radius: 10upx; |
|||
} |
|||
|
|||
.goods-title { |
|||
text-overflow:ellipsis; |
|||
display:-webkit-box; |
|||
-webkit-box-orient:vertical; |
|||
-webkit-line-clamp:2; |
|||
overflow: hidden; |
|||
} |
|||
.shop-btn { |
|||
width: 50upx; |
|||
height: 50upx; |
|||
border-radius: 10upx; |
|||
background-color: #ff4444; |
|||
color: #ffffff; |
|||
font-size: 30upx; |
|||
font-weight: 700; |
|||
text-align: center; |
|||
line-height: 50upx; |
|||
position: absolute; |
|||
right: 10upx; |
|||
bottom: 10upx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.goods-box::after { |
|||
content: ''; |
|||
flex: 0 0 32%; /* 或者flex: 1 */ |
|||
} |
|||
} |
|||
.style-four{ |
|||
display: flex; |
|||
overflow: auto hidden; |
|||
.four-item{ |
|||
flex: 0 0 31.5%; |
|||
height: 380upx; |
|||
border-radius: 10upx; |
|||
margin-right: 20upx; |
|||
position: relative; |
|||
background-color: #FFFFFF; |
|||
image{ |
|||
width: 100%; |
|||
height: 216upx; |
|||
border-radius: 10upx; |
|||
} |
|||
.goods-title { |
|||
text-overflow:ellipsis; |
|||
display:-webkit-box; |
|||
-webkit-box-orient:vertical; |
|||
-webkit-line-clamp:2; |
|||
overflow: hidden; |
|||
} |
|||
.shop-btn { |
|||
width: 50upx; |
|||
height: 50upx; |
|||
border-radius: 10upx; |
|||
background-color: #ff4444; |
|||
color: #ffffff; |
|||
font-size: 30upx; |
|||
font-weight: 700; |
|||
text-align: center; |
|||
line-height: 50upx; |
|||
position: absolute; |
|||
right: 10upx; |
|||
bottom: 10upx; |
|||
} |
|||
} |
|||
} |
|||
.style-two { |
|||
width: 100%; |
|||
min-height: 100px; |
|||
.goodsTwoBox { |
|||
overflow: auto; |
|||
padding: 0 20upx 20upx; |
|||
.goodsTwoItem { |
|||
flex: 0 0 182upx; |
|||
background-color: #ffffff; |
|||
border: 1upx solid #eeeeee; |
|||
border-radius: 10upx; |
|||
margin-right: 20upx; |
|||
box-sizing: 10upx; |
|||
overflow: hidden; |
|||
image { |
|||
width: 100%; |
|||
height: 150upx; |
|||
box-sizing: 10upx; |
|||
} |
|||
.content { |
|||
padding: 0 10upx; |
|||
box-sizing: border-box; |
|||
} |
|||
.goods-title { |
|||
text-overflow:ellipsis; |
|||
display:-webkit-box; |
|||
-webkit-box-orient:vertical; |
|||
-webkit-line-clamp:2; |
|||
overflow: hidden; |
|||
} |
|||
.price-box { |
|||
background: #fff2f2; |
|||
margin: 0 0upx; |
|||
height: 42upx; |
|||
line-height: 34upx; |
|||
position: relative; |
|||
margin-bottom: 10upx; |
|||
padding-left: 10upx; |
|||
.goodsBtn { |
|||
position: absolute; |
|||
width: 66upx; |
|||
height: 66upx; |
|||
border-radius: 50%; |
|||
background-color: #ffffff; |
|||
right: -10upx; |
|||
top: -10upx; |
|||
} |
|||
.shop-btn { |
|||
position: absolute; |
|||
left: 30upx; |
|||
top: 6upx; |
|||
transform: translate(-50%); |
|||
height: 46upx; |
|||
width: 46upx; |
|||
border-radius: 50%; |
|||
background-color: #ff4444; |
|||
line-height: 46upx; |
|||
font-size: 26upx; |
|||
text-align: center; |
|||
color: #ffffff; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
} |
|||
.goodsThreeItem{ |
|||
padding: 20upx; |
|||
border: 1upx solid #EEEEEE; |
|||
background-color: #FFFFFF; |
|||
border-radius: 10upx; |
|||
margin-bottom: 20upx; |
|||
.img{ |
|||
flex: 0.38; |
|||
image{ |
|||
width: 100%; |
|||
height: 230upx; |
|||
border-radius: 10upx; |
|||
} |
|||
} |
|||
.content{ |
|||
flex: 0.62; |
|||
padding-left: 20upx; |
|||
.name{ |
|||
font-size: 30upx; |
|||
text-overflow:ellipsis; |
|||
display:-webkit-box; |
|||
-webkit-box-orient:vertical; |
|||
-webkit-line-clamp:2; |
|||
overflow: hidden; |
|||
} |
|||
.content-btn{ |
|||
width: 140upx; |
|||
height: 50upx; |
|||
line-height: 50upx; |
|||
border-radius: 10upx; |
|||
background-color: #FF4444; |
|||
color: #FFFFFF; |
|||
font-size: 26upx; |
|||
font-weight: 400; |
|||
text-align: center; |
|||
// margin-top: 34upx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,552 @@ |
|||
<template> |
|||
<view> |
|||
<view class="commentlist"> |
|||
<view class="cmt-share"> |
|||
<view class="cmt-share-mask" :class="{shareMask: cmtShare, shareMaskHide: !cmtShareMask}" @click="cmtShareH"></view> |
|||
<view class="cmt-share-d" :class="{cmtShareShow: cmtShare}"> |
|||
<view class="cmt-share-i"> |
|||
<button hover-class="none" plain="true" open-type="share" @click="cmtShareH"> |
|||
发送好友 |
|||
</button> |
|||
</view> |
|||
<!-- |
|||
<view class="cmt-share-i"> |
|||
<navigator class="a" url="/pagesOther/creatcard/index" hover-class="none" @click="cmtShareH">生成卡片</navigator> |
|||
</view> |
|||
--> |
|||
<view class="cmt-share-i cancel" @click="cmtShareH"> |
|||
取消 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="commentlist-d"> |
|||
<view class="cmtlist-i" v-for="(item, key) in commentList" :key="key"> |
|||
<view class="cmtlist-i-link-d"> |
|||
<navigator class="a cmtlist-i-link" :url="'/pagesComment/commentdetail/index?i='+item.id+'&state='+item.praise_type" hover-class="none" v-if="!cmtdtl"></navigator> |
|||
<view class="cmtlist-i-t1"> |
|||
<view class="cmtlist-i-t1-l"> |
|||
<view class="cmtlist-i-t1-l-face"><image class="image" :src="item.headimg" mode="aspectFill"></image></view> |
|||
</view> |
|||
<view class="cmtlist-i-t1-r"> |
|||
<view class="h1"> |
|||
<view class="h1-l">{{ item.nickname }}</view> |
|||
<view class="h1-r">{{ item.createtime }}</view> |
|||
</view> |
|||
<view class="p"><view class="i icon iconfont icon-favor_fill_light" v-for="(item2, key2) in item.star" :key="key2"></view></view> |
|||
</view> |
|||
</view> |
|||
<view class="cmtlist-i-t2">{{ item.text }}</view> |
|||
<view class="cmtlist-i-t3" v-if="item.pic !== '' && item.pic !== null"> |
|||
<view :class="'list-img-list list-img-list'+item.pic.length" v-if="!cmtdtl && item.pic.length && item.pic.length > 0 && item.pic !== '' && item.pic !== null"> |
|||
<view class="list-img-i" v-for="(item3, key3) in item.pic" :key="key3" v-if="item3 && item3 !== '' && item3 !== null"><image class="image" :src="item3" mode="aspectFill"></image></view> |
|||
</view> |
|||
<view class="list-img-list listImgList10" v-if="cmtdtl"> |
|||
<view class="list-img-i" v-for="(item3, key3) in item.pic" :key="key3" v-if="item3 && item3 !== '' && item3 !== null"><image class="image" :src="item3" mode="aspectFill" @click="previewImg(item3, item.pic)"></image></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="cmtlist-i-t4" v-if="!rushdtl"> |
|||
<navigator class="a" :url="'/pagesBuy/rushdetail/index?i='+item.goods_id+'&c='+item.plugin" hover-class="none" v-if="item.goods_id !== '' && item.goods_id !== null"> |
|||
<view class="cmtlist-i-t4-d"> |
|||
<view class="cmtlist-i-t4-l"> |
|||
<image class="image" :src="item.goods_logo" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="cmtlist-i-t4-r"> |
|||
<view class="h1">{{ item.goods_name }}</view> |
|||
<view class="p"> |
|||
<view class="p-l">{{ item.goods_price }}元</view> |
|||
<view class="p-r">购买</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</navigator> |
|||
<navigator class="a" :url="'/pagesBuy/rushdetail/index?i='+item.rush_id+'&c='+item.plugin" hover-class="none" v-if="item.goods_id == '' || item.goods_id == null"> |
|||
<view class="cmtlist-i-t4-d"> |
|||
<view class="cmtlist-i-t4-l"> |
|||
<image class="image" :src="item.goods_logo" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="cmtlist-i-t4-r"> |
|||
<view class="h1">{{ item.goods_name }}</view> |
|||
<view class="p"> |
|||
<view class="p-l">{{ item.goods_price }}元</view> |
|||
<view class="p-r">购买</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</navigator> |
|||
</view> |
|||
<view class="cmtlist-i-t5" v-if="!cmtdtl"> |
|||
<view class="cmtlist-i-t5-l" :class="{isagree: item.fabulousState}" @click="agree(item.id, key)" v-if="item.fabulousNum > 0"><view class="i icon iconfont icon-zan1"></view>{{ item.fabulousNum }}</view> |
|||
<view class="cmtlist-i-t5-l" :class="{isagree: item.fabulousState}" @click="agree(item.id, key)" v-if="item.fabulousNum == 0"><view class="i icon iconfont icon-zan1"></view></view> |
|||
<view class="cmtlist-i-t5-r" @click="cgShare(item.nickname, item.storename, item.star, item.id, item.praise_type, item.goods_logo)" v-if="!rushdtl"> |
|||
<button hover-class="none" plain="true" @click="cmtShareS()"> |
|||
<view class="i icon iconfont icon-fenxiang"></view>分享 |
|||
</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState, mapMutations } from 'vuex' |
|||
import { CMTSHAREAPPMSG } from '@/store/mutation-types' |
|||
|
|||
export default { |
|||
props: ['commentList', 'cmtdtl', 'rushdtl'], |
|||
data () { |
|||
return { |
|||
cmtShare: false, |
|||
cmtShareMask: false |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState([ |
|||
'cmtShareAppMsg' |
|||
]) |
|||
}, |
|||
methods: { |
|||
...mapMutations([ |
|||
CMTSHAREAPPMSG |
|||
]), |
|||
cmtShareS () { |
|||
this.cmtShare = true |
|||
this.cmtShareMask = true |
|||
}, |
|||
cmtShareH () { |
|||
var that = this |
|||
that.cmtShare = false |
|||
setTimeout(() => { |
|||
that.cmtShareMask = false |
|||
},300) |
|||
}, |
|||
previewImg (current, urls) { |
|||
wx.previewImage({ |
|||
current: current, |
|||
urls: urls |
|||
}) |
|||
}, |
|||
agree(id, key){ |
|||
var that = this |
|||
var mid = "" |
|||
var token = "" |
|||
if(that.$store.state.userInfo !== '' && typeof(that.$store.state.userInfo.uid) !== 'undefined'){ |
|||
mid = that.$store.state.userInfo.uid |
|||
token = that.$store.state.userInfo.token |
|||
} |
|||
uni.request({ |
|||
url: that.$util.util.url('Fabulous'), |
|||
data: {mid: mid,'class': 1,id: id, token: token}, |
|||
success: (res) => { |
|||
//console.log(res) |
|||
if(res.data.errno == 0){ |
|||
if(that.commentList[key].fabulousState){ |
|||
that.commentList[key].fabulousState = false |
|||
that.commentList[key].fabulousNum += -1 |
|||
}else{ |
|||
that.commentList[key].fabulousState = true |
|||
that.commentList[key].fabulousNum += 1 |
|||
} |
|||
}else if(res.data.errno == 1){ |
|||
if(res.data.message == "未登录"){ |
|||
uni.navigateTo({ |
|||
url: '/pagesIndex/login/index' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
cgShare (nickname, storename, starnum, id, praise_type, imgurl) { |
|||
var cmtShareAppMsgList = {} |
|||
cmtShareAppMsgList.nickname = nickname |
|||
cmtShareAppMsgList.storename = storename |
|||
cmtShareAppMsgList.starnum = starnum |
|||
cmtShareAppMsgList.id = id |
|||
cmtShareAppMsgList.praise_type = praise_type |
|||
cmtShareAppMsgList.imgurl = imgurl |
|||
this[CMTSHAREAPPMSG](cmtShareAppMsgList) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.cmtlist-i { |
|||
padding: 0 30px; |
|||
position: relative; |
|||
} |
|||
.cmt-share-mask { |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: rgba(0,0,0,.5); |
|||
opacity: 0; |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 100; |
|||
transition: opacity .3s; |
|||
} |
|||
.shareMaskHide { |
|||
display: none; |
|||
} |
|||
@keyframes shareMaskAni { |
|||
0% {opacity: 0;} |
|||
100% {opacity: 1.0;} |
|||
} |
|||
.shareMask { |
|||
opacity: 1.0; |
|||
animation: shareMaskAni .3s; |
|||
} |
|||
.cmt-share-d { |
|||
width: 100%; |
|||
background-color: #EDEDED; |
|||
position: fixed; |
|||
left: 0; |
|||
bottom: -100%; |
|||
transition: all .3s; |
|||
z-index: 101; |
|||
} |
|||
.cmtShareShow { |
|||
bottom: 0; |
|||
} |
|||
.cmt-share-i { |
|||
height: 120px; |
|||
line-height: 120px; |
|||
font-size: 36px; |
|||
text-align: center; |
|||
margin-bottom: 2px; |
|||
background-color: #fff; |
|||
} |
|||
.cmt-share-i:active { |
|||
background-color: #ECECEC; |
|||
} |
|||
.cmt-share-i button { |
|||
height: 120px; |
|||
line-height: 120px; |
|||
font-size: 36px; |
|||
border: none; |
|||
} |
|||
.cmt-share-d .cancel { |
|||
margin-top: 8px; |
|||
margin-bottom: 0; |
|||
} |
|||
.cmtlist-i-link-d { |
|||
position: relative; |
|||
} |
|||
.cmtlist-i-link { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
z-index: 1; |
|||
} |
|||
.cmtlist-i:first-child .cmtlist-i-t1 { |
|||
border-top: none; |
|||
} |
|||
.cmtlist-i-t1 { |
|||
padding: 40px 0 30px 0; |
|||
border-top: 1px solid #f3f3f3; |
|||
display: -webkit-flex; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
} |
|||
.cmtlist-i-t1-l { |
|||
width: 72px; |
|||
height: 72px; |
|||
padding: 4px; |
|||
border-radius: 50%; |
|||
-webkit-flex-shrink: 0; |
|||
flex-shrink: 0; |
|||
} |
|||
.cmtlist-i-t1-l-face { |
|||
width: 72px; |
|||
height: 72px; |
|||
} |
|||
.cmtlist-i-t1-l .image { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 50%; |
|||
} |
|||
.cmtlist-i-t1-r { |
|||
padding-left: 20px; |
|||
-webkit-flex: 1; |
|||
flex: 1; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
.cmtlist-i-t1-r .h1 { |
|||
height: 42px; |
|||
line-height: 42px; |
|||
font-size: 30px; |
|||
display: -webkit-flex; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
.cmtlist-i-t1-r .h1-l { |
|||
-webkit-flex-shrink: 1; |
|||
flex-shrink: 1; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
.cmtlist-i-t1-r .h1-r { |
|||
color: #999; |
|||
font-size: 24px; |
|||
padding-left: 10px; |
|||
-webkit-flex-shrink: 0; |
|||
flex-shrink: 0; |
|||
} |
|||
.cmtlist-i-t1-r .p { |
|||
height: 40px; |
|||
line-height: 40px; |
|||
display: -webkit-flex; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
} |
|||
.cmtlist-i-t1-r .p .i { |
|||
color: #FF7F18; |
|||
font-size: 32px; |
|||
} |
|||
.cmtlist-i-t2 { |
|||
line-height: 48px; |
|||
font-size: 30px; |
|||
} |
|||
.cmtlist-i-t3 { |
|||
margin-top: 30px; |
|||
} |
|||
.list-img-list .list-img-i { |
|||
background-color: #f3f3f3; |
|||
float: left; |
|||
} |
|||
.list-img-list:after { |
|||
content: ""; |
|||
display: block; |
|||
clear: both; |
|||
} |
|||
.list-img-i .image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.list-img-list1 .list-img-i { |
|||
width: calc(100vw - 60px); |
|||
height: calc(100vw - 60px); |
|||
} |
|||
.list-img-list2 .list-img-i { |
|||
width: calc((100vw - 72px) / 2); |
|||
height: calc((100vw - 72px) / 2); |
|||
} |
|||
.list-img-list2 .list-img-i:nth-child(2) { |
|||
margin-left: 12px; |
|||
} |
|||
.list-img-list3 .list-img-i:first-child { |
|||
width: calc(((100vw - 84px) / 3) * 2 + 12px); |
|||
height: calc(((100vw - 84px) / 3) * 2 + 12px); |
|||
} |
|||
.list-img-list3 .list-img-i:nth-child(2), .list-img-list3 .list-img-i:nth-child(3) { |
|||
width: calc((100vw - 84px) / 3); |
|||
height: calc((100vw - 84px) / 3); |
|||
margin-left: 12px; |
|||
} |
|||
.list-img-list3 .list-img-i:nth-child(3) { |
|||
margin-top: 12px; |
|||
} |
|||
.list-img-list4 .list-img-i { |
|||
width: calc((100vw - 72px) / 2); |
|||
height: calc((100vw - 72px) / 2); |
|||
} |
|||
.list-img-list4 .list-img-i:nth-child(2), .list-img-list4 .list-img-i:nth-child(4) { |
|||
margin-left: 12px; |
|||
} |
|||
.list-img-list4 .list-img-i:nth-child(3), .list-img-list4 .list-img-i:nth-child(4) { |
|||
margin-top: 12px; |
|||
} |
|||
.list-img-list5 .list-img-i { |
|||
width: calc(((100vw - 72px) / 2 - 12px) / 2); |
|||
height: calc(((100vw - 72px) / 2 - 12px) / 2); |
|||
margin-left: 12px; |
|||
} |
|||
.list-img-list5 .list-img-i:nth-child(1) { |
|||
width: calc((100vw - 72px) / 2); |
|||
height: calc((100vw - 72px) / 2); |
|||
margin-left: 0; |
|||
} |
|||
.list-img-list5 .list-img-i:nth-child(4), .list-img-list5 .list-img-i:nth-child(5) { |
|||
margin-top: 12px; |
|||
} |
|||
.list-img-list6 .list-img-i { |
|||
width: calc((100vw - 84px) / 3); |
|||
height: calc((100vw - 84px) / 3); |
|||
} |
|||
.list-img-list6 .list-img-i:nth-child(2), .list-img-list6 .list-img-i:nth-child(5) { |
|||
margin: 0 12px; |
|||
} |
|||
.list-img-list6 .list-img-i:nth-child(4), .list-img-list6 .list-img-i:nth-child(5), .list-img-list6 .list-img-i:nth-child(6) { |
|||
margin-top: 12px; |
|||
} |
|||
.list-img-list7 .list-img-i { |
|||
width: calc(((100vw - 72px) / 2 - 12px) / 2); |
|||
height: calc(((100vw - 72px) / 2 - 12px) / 2); |
|||
margin-left: 12px; |
|||
} |
|||
.list-img-list7 .list-img-i:nth-child(1), .list-img-list7 .list-img-i:nth-child(6), .list-img-list7 .list-img-i:nth-child(7) { |
|||
width: calc((100vw - 72px) / 2); |
|||
height: calc((100vw - 72px) / 2); |
|||
margin-left: 0; |
|||
margin-top: 12px; |
|||
} |
|||
.list-img-list7 .list-img-i:nth-child(1) { |
|||
margin-top: 0; |
|||
} |
|||
.list-img-list7 .list-img-i:nth-child(7) { |
|||
margin-left: 12px; |
|||
} |
|||
.list-img-list7 .list-img-i:nth-child(4), .list-img-list7 .list-img-i:nth-child(5) { |
|||
margin-top: 12px; |
|||
} |
|||
.list-img-list8 .list-img-i { |
|||
width: calc((100vw - 96px) / 4); |
|||
height: calc((100vw - 96px) / 4); |
|||
margin-left: 12px; |
|||
margin-top: 12px; |
|||
} |
|||
.list-img-list8 .list-img-i:nth-child(1) { |
|||
width: calc(((100vw - 96px) / 4) * 3 + 24px); |
|||
height: calc(((100vw - 96px) / 4) * 3 + 24px); |
|||
margin-top: 0; |
|||
margin-left: 0; |
|||
} |
|||
.list-img-list8 .list-img-i:nth-child(2) { |
|||
margin-top: 0; |
|||
} |
|||
.list-img-list8 .list-img-i:nth-child(5) { |
|||
margin-left: 0; |
|||
} |
|||
.list-img-list9 .list-img-i { |
|||
width: calc((100vw - 84px) / 3); |
|||
height: calc((100vw - 84px) / 3); |
|||
margin-top: 12px; |
|||
} |
|||
.list-img-list9 .list-img-i:nth-child(2), .list-img-list9 .list-img-i:nth-child(5), .list-img-list9 .list-img-i:nth-child(8) { |
|||
margin: 12px 12px 0 12px ; |
|||
} |
|||
.list-img-list9 .list-img-i:nth-child(4), .list-img-list9 .list-img-i:nth-child(5), .list-img-list9 .list-img-i:nth-child(6) { |
|||
margin-top: 12px; |
|||
} |
|||
.list-img-list9 .list-img-i:nth-child(1), .list-img-list9 .list-img-i:nth-child(2), .list-img-list9 .list-img-i:nth-child(3) { |
|||
margin-top: 0; |
|||
} |
|||
.listImgList10 .list-img-i { |
|||
width: calc(100vw - 60px)!important; |
|||
height: calc(100vw - 60px)!important; |
|||
margin: 0!important; |
|||
margin-bottom: 20px!important; |
|||
display: block; |
|||
float: none; |
|||
} |
|||
.listImgList10 .list-img-i:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
.cmtlist-i-t4 { |
|||
margin-top: 30px; |
|||
} |
|||
.cmtlist-i-t4-d { |
|||
padding: 30px; |
|||
background-color: #fff; |
|||
border-radius: 12px; |
|||
box-shadow: 0 0 16px #d9d9d9; |
|||
display: -webkit-flex; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
} |
|||
.cmtlist-i-t4-l { |
|||
width: 144px; |
|||
height: 144px; |
|||
border-radius: 8px; |
|||
-webkit-flex-shrink: 0; |
|||
flex-shrink: 0; |
|||
} |
|||
.cmtlist-i-t4-l .image { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 6px; |
|||
} |
|||
.cmtlist-i-t4-r { |
|||
padding-left: 30px; |
|||
-webkit-flex: 1; |
|||
flex: 1; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
.cmtlist-i-t4-r .h1 { |
|||
height: 72px; |
|||
line-height: 36px; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: normal; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
.cmtlist-i-t4-r .p { |
|||
height: 60px; |
|||
line-height: 60px; |
|||
margin-top: 12px; |
|||
color: #FF5050; |
|||
display: -webkit-flex; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
.cmtlist-i-t4-r .p .p-l { |
|||
font-size: 32px; |
|||
font-weight: 600; |
|||
} |
|||
.cmtlist-i-t4-r .p .p-r { |
|||
height: 57.6px; |
|||
line-height: 57.6px; |
|||
padding: 0 46px; |
|||
border: 1.2px solid #FF5050; |
|||
border-radius: 100px; |
|||
} |
|||
.cmtlist-i-t5 { |
|||
color: #979797; |
|||
height: 42px; |
|||
line-height: 42px; |
|||
font-size: 30px; |
|||
padding: 40px 0; |
|||
display: -webkit-flex; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
.cmtlist-i-t5 .i { |
|||
font-size: 36px; |
|||
margin-right: 6px; |
|||
display: inline-block; |
|||
vertical-align: -2px; |
|||
} |
|||
.isagree { |
|||
color: #FF7F18; |
|||
} |
|||
.cmtlist-i-t5-l .i { |
|||
font-size: 44px; |
|||
} |
|||
.cmtlist-i-t5-r button { |
|||
height: 42px; |
|||
line-height: 42px; |
|||
color: #979797; |
|||
font-size: 28px; |
|||
border: none; |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</style> |
|||
@ -0,0 +1,388 @@ |
|||
<template> |
|||
<view class="modal" :animation="animationData1" @touchmove.stop.prevent> |
|||
<view class=" content-wrap" :animation="animationData2"> |
|||
<view class="content-header dis-flex"> |
|||
<view class="cancel-btn" >实付金额:</view> |
|||
<view class="input-contant t-c"> |
|||
<view class="input-contant-gs" v-if="(mone !== '¥' && mone )"> |
|||
<view style="line-height: 48upx;color: #FFFFFF;padding-left: 20upx;padding-right: 20upx;" v-if="(mone !== '¥' && mone ) "> |
|||
<text v-if="inputmodel !== '¥' && inputmodel">(</text> |
|||
<text>{{mone.replace("¥","")}}</text> |
|||
<text v-if="inputmodel !== '¥' && inputmodel">-</text> |
|||
<text v-if="inputmodel !== '¥' && inputmodel">{{inputmodel.replace("¥","")}}</text> |
|||
<text v-if="inputmodel !== '¥' && inputmodel">)</text> |
|||
<text>x</text> |
|||
<text>{{Math.round((lilv / 10) * 100) / 100 }}</text> |
|||
<text v-if="inputmodel !== '¥' && inputmodel">+</text> |
|||
<text v-if="inputmodel !== '¥' && inputmodel">{{inputmodel.replace("¥","")}}</text> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
<view class="confirm-btn" > |
|||
<view class="triangle" v-if="(mone !== '¥' && mone ) "> |
|||
|
|||
</view> |
|||
<text style="padding-left: 30upx;" v-if="mone !== '¥' && mone ">¥{{Math.round((((Number(mone.replace("¥","")) - Number(inputmodel.replace("¥",""))) * (Math.round((lilv / 10) * 100) / 100)) + Number(inputmodel.replace("¥",""))) * 100) / 100}}</text> |
|||
<text v-else>0.00</text> |
|||
</view> |
|||
</view> |
|||
<view class="key-box" style="position: relative;"> |
|||
<view |
|||
:class="{ |
|||
'handel-btn': ['.', '', ''].includes(item), |
|||
'active-btn': activeKey === item, |
|||
'active-handel-btn': |
|||
activeKey === item && ['.', ''].includes(item), |
|||
}" |
|||
v-for="(item, index) in keyboardList" |
|||
:key="index" |
|||
@click.stop="setValue(item)" |
|||
>{{ item }}</view |
|||
> |
|||
</view> |
|||
<view style="position: absolute;width: 20%;right: 14upx;top: 76upx;"> |
|||
<view class="t-c" style="height: 120upx;line-height: 100upx;" @click.stop="setValue('删除')"> |
|||
<image :src="imgfixUrls + 'scv.png'" style="width: 60upx;height: 60upx;padding-top: 46upx;" mode=""></image> |
|||
</view> |
|||
<view class="t-c" style="width: 166upx;height: 300upx;box-sizing: border-box;background-color: #19A119;padding-top: 100upx;color: #FFFFFF;margin-top: 2px;font-size: 30upx;" @click.stop="pay"> |
|||
<view > |
|||
确认 |
|||
<br/> |
|||
支付 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
animationData1: {}, |
|||
animationData2: {}, |
|||
activeKey: "", |
|||
inputValue: [], |
|||
}; |
|||
}, |
|||
props: { |
|||
visible: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
//是否为带小数的数字键盘 |
|||
decimals: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
//小数点前整数的位数 |
|||
maxLength: { |
|||
type: [Number, String], |
|||
default: 9, |
|||
}, |
|||
//小数点后的位数 |
|||
pointLength: { |
|||
type: [Number, String], |
|||
default: 2, |
|||
}, |
|||
//最大的值 |
|||
max: { |
|||
type: [Number, String], |
|||
default: 999999999, |
|||
}, |
|||
//最小的值 |
|||
min: { |
|||
type: [Number, String], |
|||
default: 0, |
|||
}, |
|||
inputValues:{ |
|||
type:Array, |
|||
default:[], |
|||
}, |
|||
mone:{ |
|||
type:String, |
|||
default:'0' |
|||
}, |
|||
inputmodel:{ |
|||
type:String, |
|||
default:'0' |
|||
}, |
|||
lilv:{ |
|||
type:String, |
|||
default:'0' |
|||
} |
|||
}, |
|||
computed: { |
|||
keyboardList() { |
|||
return this.decimals |
|||
? ["1", "2", "3", "4", "5", "6", "7", "8", "9", "", "0", "."] |
|||
: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "", "0", "."]; |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.enterAnimate(); |
|||
}, |
|||
watch: { |
|||
visible(val) { |
|||
this.inputValue = []; |
|||
if (val) this.enterAnimate(); |
|||
else this.leaveAnimate(); |
|||
}, |
|||
'inputValues':{ //监听的对象 |
|||
deep:true, //深度监听设置为 true |
|||
handler:function(val,oldV){ |
|||
console.log(val,'进来进来'); |
|||
if(val[0] == '11' || val[0] == '112'){ |
|||
this.inputValue = []; |
|||
}else{ |
|||
this.inputValue =val; |
|||
} |
|||
|
|||
} |
|||
} |
|||
// inputValues(val){ |
|||
// console.log(val[0],11111); |
|||
|
|||
// console.log(this.inputValue); |
|||
|
|||
// } |
|||
}, |
|||
methods: { |
|||
pay(){ |
|||
this.$emit("pay"); |
|||
}, |
|||
setValue(data) { |
|||
// if(data.length == 1){ |
|||
// this.inputValue[0] = data[0]; |
|||
// } |
|||
|
|||
this.activeKey = data; |
|||
let timer = setTimeout(() => { |
|||
this.activeKey = "-"; |
|||
clearTimeout(timer); |
|||
}, 100); |
|||
|
|||
if ( |
|||
!data || |
|||
(data !== "删除" && |
|||
this.inputValue.includes(".") && |
|||
this.inputValue.join("").split(".")[1].length === this.pointLength) |
|||
) |
|||
return false; |
|||
|
|||
if ( |
|||
this.inputValue.length === 1 && |
|||
this.inputValue[0] === "0" && |
|||
!["删除", "."].includes(data) |
|||
) { |
|||
return (this.inputValue = [data]); |
|||
} |
|||
|
|||
if (data !== "删除") { |
|||
if (this.inputValue.includes(".")) { |
|||
if ( |
|||
this.inputValue.join("").split(".")[0].length === this.maxLength |
|||
) { |
|||
return false; |
|||
} |
|||
} else if (this.inputValue.length === this.maxLength) { |
|||
return false; |
|||
} |
|||
} |
|||
|
|||
if (data == "删除") { |
|||
this.inputValue.length && this.inputValue.pop(); |
|||
console.log(this.inputValue,data); |
|||
let num = this.inputValue.join(""); |
|||
this.$emit("confirm",num,this.inputValue); |
|||
return |
|||
} |
|||
if (data === ".") { |
|||
if (!this.inputValue.length || this.inputValue.includes(".")) |
|||
return false; |
|||
} |
|||
this.inputValue.push(data); |
|||
console.log(this.inputValue,data); |
|||
let num = this.inputValue.join(""); |
|||
this.$emit("confirm",num,this.inputValue); |
|||
}, |
|||
close() { |
|||
this.$emit("update:visible", false); |
|||
this.$emit("close"); |
|||
}, |
|||
confirm() { |
|||
let result = Number(this.inputValue.join("")); |
|||
if (result < this.min) { |
|||
uni.showToast({ |
|||
title: `最小值为${this.min}`, |
|||
duration: 1500, |
|||
icon: "none", |
|||
}); |
|||
return; |
|||
} else if (result > this.max) { |
|||
uni.showToast({ |
|||
title: `最大值为${this.max}`, |
|||
duration: 1500, |
|||
icon: "none", |
|||
}); |
|||
return; |
|||
} |
|||
this.$emit("confirm", result); |
|||
this.close(); |
|||
}, |
|||
enterAnimate() { |
|||
this.animation1 = uni.createAnimation(); |
|||
this.animation2 = uni.createAnimation(); |
|||
this.animation1.backgroundColor("rgba(0,0,0,0.5)").step({ |
|||
duration: 500, |
|||
timingFunction: "ease", |
|||
}); |
|||
this.animation2.translateY(0).step({ |
|||
timingFunction: "ease-out", |
|||
duration: 500, |
|||
}); |
|||
this.animationData1 = this.animation1.export(); |
|||
this.animationData2 = this.animation2.export(); |
|||
}, |
|||
leaveAnimate() { |
|||
this.animation1 = uni.createAnimation(); |
|||
this.animation2 = uni.createAnimation(); |
|||
this.animation1.backgroundColor("rgba(0,0,0,0)").step({ |
|||
duration: 500, |
|||
timingFunction: "ease", |
|||
}); |
|||
this.animation2.translateY(500).step({ |
|||
timingFunction: "ease-out", |
|||
duration: 500, |
|||
}); |
|||
this.animationData1 = this.animation1.export(); |
|||
this.animationData2 = this.animation2.export(); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.modal { |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 100%; |
|||
background: rgba(0, 0, 0, 0); |
|||
z-index: 998; |
|||
|
|||
.content-wrap { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
background: #fff; |
|||
box-sizing: border-box; |
|||
transform: translateY(100%); |
|||
|
|||
.content-header { |
|||
width: 100%; |
|||
height: 100upx; |
|||
background: rgba(255, 255, 255, 1); |
|||
float: right; |
|||
|
|||
.input-contant { |
|||
text-align: right; |
|||
line-height: 100upx; |
|||
font-size: 20upx; |
|||
// min-width: 390upx; |
|||
flex: 1; |
|||
// padding-right: 164upx; |
|||
.input-contant-gs{ |
|||
// width: 200upx; |
|||
height: 48upx; |
|||
// position: absolute; |
|||
min-width: 100upx; |
|||
margin-top: 28upx; |
|||
display: inline-block; |
|||
background-color: #413634; |
|||
border-radius: 10upx 0 0 10upx; |
|||
} |
|||
} |
|||
|
|||
.cancel-btn { |
|||
font-size: 30upx; |
|||
font-weight: 700; |
|||
padding-left: 30upx; |
|||
color: #000000; |
|||
line-height: 100upx; |
|||
min-width: 166upx; |
|||
// position: absolute; |
|||
// top: 0; |
|||
// left: 0; |
|||
} |
|||
|
|||
.confirm-btn { |
|||
font-size: 40upx; |
|||
font-weight: 700; |
|||
text-align: center; |
|||
// padding-right: 64upx; |
|||
// width: 164upx; |
|||
position: relative; |
|||
min-width: 164upx; |
|||
color: #000000; |
|||
border-bottom: 1upx solid #F1F1F1; |
|||
line-height: 100upx; |
|||
// position: relative; |
|||
// top: -114upx; |
|||
// left: 10upx; |
|||
// position: absolute; |
|||
// top: 0; |
|||
// right: 0; |
|||
} |
|||
} |
|||
|
|||
.key-box { |
|||
margin-top: 60upx; |
|||
display: flex; |
|||
flex-flow: wrap; |
|||
width: 90%; |
|||
|
|||
view { |
|||
width: 29%; |
|||
height: 100upx; |
|||
border: 1upx solid #f1f1f1; |
|||
box-sizing: border-box; |
|||
text-align: center; |
|||
line-height: 100upx; |
|||
font-size: 50upx; |
|||
// font-weight: bold; |
|||
margin: 0 -1upx -1upx 0; |
|||
|
|||
&:hover { |
|||
z-index: 1; |
|||
border: 1upx solid #F1F1F1; |
|||
} |
|||
} |
|||
|
|||
.handel-btn { |
|||
background: rgb(235, 237, 240); |
|||
font-size: 30upx; |
|||
} |
|||
.active-btn { |
|||
background: rgb(235, 237, 240); |
|||
} |
|||
.active-handel-btn { |
|||
background: rgb(252, 252, 252); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.triangle{ |
|||
position: absolute; |
|||
width: 0; |
|||
height: 0; |
|||
left: 0; |
|||
|
|||
top: 28upx; |
|||
display: inline-block; |
|||
border-top: 25upx solid transparent; |
|||
border-left: 16upx solid #413634; |
|||
border-bottom: 25upx solid transparent; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,442 @@ |
|||
<template> |
|||
<view class="demand"> |
|||
<view class="demand-title f-32 f-w"> |
|||
{{demanItem.typename || demanItem.name}} |
|||
<view class="stateo" v-if="demanItem.status" :style="{color: demanItem.status == '1'?'#1FBEA0':demanItem.status == '0'?'#999999':demanItem.status == '5'?'#ff4444':demanItem.status == '6'?'#ff4444':'#0099ff',border: demanItem.status == '1'?'1rpx solid #1FBEA0':demanItem.status == '0'?'1rpx solid #999999':demanItem.status == '5'?'1rpx solid #ff4444':demanItem.status == '6'?'1rpx solid #ff4444':'1rpx solid #0099ff'}"> |
|||
{{demanItem.status == '1'?'发布中':demanItem.status == '0'?'已关闭':demanItem.status == '5'?'待审核':demanItem.status == '6'?'被驳回':'待支付'}} |
|||
</view> |
|||
</view> |
|||
<view class="stick" v-if="demanItem.topflag == 1"> |
|||
<image :src="imgfixUrls + 'homemakingImg/zhiding.png'" mode=""></image> |
|||
</view> |
|||
<view class="demand-time f-24 col-9 p-top-10"> |
|||
上门时间：{{demanItem.visitingtime}} |
|||
</view> |
|||
<view class="demand-time f-24 col-9 p-top-10" @click="conloding"> |
|||
<text |
|||
style="width: 600upx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: inline-block;">上门地址：{{demanItem.address}}</text> |
|||
<text style="float: right;color: #FF4444;display: inline-block;line-height: 26upx;" class="iconfont icon-locationfill"></text> |
|||
</view> |
|||
<view class="problemDescription f-28"> |
|||
<text class="col-9 p-right-30">需求说明:</text> |
|||
<text class="col-3">{{demanItem.detail}}</text> |
|||
</view> |
|||
<view class="demand-img" v-if="demanItem.thumbs.length > 0"> |
|||
<view class="img-item" v-for="(item,index) in demanItem.thumbs" @click="lookImg(index)" v-if="index < 3"> |
|||
<image :src="item" mode="aspectFill"></image> |
|||
<view class="overspread" v-if="index == 2 && demanItem.thumbs.length > 3"> |
|||
+{{demanItem.thumbs.length - 3}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="dis-flex chat" v-if="demanItem.mid != '0' && demanItem.nickname && demanItem.mid"> |
|||
<image :src="demanItem.avatar" mode=""></image> |
|||
<view class="chatName"> |
|||
{{demanItem.nickname}} |
|||
</view> |
|||
<view class="chatBtn" style="margin-right: 30upx;width: 150upx;" @click="call" v-if="demanItem.mobile && demanItem.mobile != 0"> |
|||
电话联系 |
|||
</view> |
|||
<view class="chatBtn" @click="chat"> |
|||
聊天 |
|||
</view> |
|||
</view> |
|||
<view class="demand-btn" v-if="demanItem.status == '3' || demanItem.status == '1' || demanItem.status == '6' || demanItem.status == '0' || demanItem.status == '5'"> |
|||
<view class="soldOut" v-if="demanItem.status == '1'" @click="delet(0)"> |
|||
下架 |
|||
</view> |
|||
<view class="soldOut" style="background-color: #FF4444;color: #FFFFFF;border: none;" v-if="demanItem.status == '0'" @click="delet(1)"> |
|||
上架 |
|||
</view> |
|||
<view class="delete" v-if="demanItem.status == '1'" @click="delet(4)"> |
|||
删除 |
|||
</view> |
|||
<view class="payment" v-if="demanItem.status == '3'" @click="goPay"> |
|||
去支付 |
|||
</view> |
|||
<view style="height: 50upx;display: inline-block;"> |
|||
|
|||
</view> |
|||
<view class="regulator" v-if="demanItem.status == '1' || demanItem.status == '5'|| demanItem.status == '0' || demanItem.status == '6'" @click="compile"> |
|||
管理 |
|||
</view> |
|||
</view> |
|||
<PopManager :show="glshow" :type="'bottom'" :overlay="'false'" :showOverlay="'false'" @clickmask="glshow = false"> |
|||
<view class="glbox" v-if="myDemandData"> |
|||
<view class="glitem" @click="redact"> |
|||
编辑需求 |
|||
</view> |
|||
<view class="glitem" @click="refresh" v-if="myDemandData.set.payrefstatus == 1 && demanItem.status != '6' && demanItem.status != '0' && demanItem.status != '5'"> |
|||
{{myDemandData.refmoney || '0'}}元刷新需求 |
|||
</view> |
|||
<view class="glitem" @click="top(item.day)" v-for="(item,index) in myDemandData.toparray" :key="index" v-if="myDemandData.set.payrefstatus == 1 && demanItem.status != '6' && demanItem.status != '5' && demanItem.status != '0'"> |
|||
{{item.topprice}}元,置顶{{item.day}}天 |
|||
</view> |
|||
|
|||
</view> |
|||
</PopManager> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from '@/common/js/app.js'; |
|||
import PopManager from '@/components/template/PopManager'; |
|||
export default{ |
|||
data(){ |
|||
return{ |
|||
glshow:false |
|||
} |
|||
}, |
|||
components:{ |
|||
PopManager |
|||
}, |
|||
props:{ |
|||
demanItem:{ |
|||
type:Object, |
|||
default:{} |
|||
}, |
|||
myDemandData:{ |
|||
type:Object, |
|||
default:null |
|||
}, |
|||
refmoney:{ |
|||
type:String, |
|||
default:'' |
|||
} |
|||
}, |
|||
methods:{ |
|||
conloding(){ |
|||
let storeInfo = {}; |
|||
storeInfo = { |
|||
location:{ |
|||
lat:this.demanItem.lat, |
|||
lng:this.demanItem.lng |
|||
}, |
|||
address:this.demanItem.address |
|||
} |
|||
// #ifdef H5 |
|||
|
|||
console.log(storeInfo); |
|||
wxApi.WxopenLocation( |
|||
storeInfo['location']['lat'], |
|||
storeInfo['location']['lng'], |
|||
storeInfo['address'] |
|||
) |
|||
// #endif |
|||
// #ifdef MP-WEIXIN |
|||
App.openLocation(storeInfo) |
|||
// #endif |
|||
//#ifdef APP-PLUS |
|||
Map.openMap(Number(storeInfo['location']['lat']),Number(storeInfo['location']['lng']),storeInfo['address'],'gcj02') |
|||
//#endif |
|||
}, |
|||
call(){ |
|||
uni.makePhoneCall({ |
|||
phoneNumber: this.demanItem.mobile |
|||
}) |
|||
}, |
|||
top(day){ |
|||
App.showError( |
|||
`是否置顶此需求?`, |
|||
data => { |
|||
if (data.confirm) { |
|||
let data = { |
|||
id:this.demanItem.id, |
|||
day:day |
|||
} |
|||
App._post_form( |
|||
`&p=housekeep&do=TopDemand`, |
|||
data, |
|||
res => { |
|||
console.log(res); |
|||
|
|||
if(res.data.orderid != '0'){ |
|||
App.navigationTo({ |
|||
url: 'pages/mainPages/payment/payment?orderid=' + res.data.orderid + '&plugin=housekeep' |
|||
}); |
|||
}else{ |
|||
uni.showToast({ |
|||
title:'置顶成功' |
|||
}); |
|||
} |
|||
|
|||
// this.$emit('getMyDemandList'); |
|||
}, |
|||
false, |
|||
() => { |
|||
|
|||
} |
|||
); |
|||
} |
|||
}, |
|||
true |
|||
); |
|||
}, |
|||
refresh(){ |
|||
App.showError( |
|||
`刷新会将此需求置顶,是否刷新此需求?`, |
|||
data => { |
|||
if (data.confirm) { |
|||
let data = { |
|||
id:this.demanItem.id |
|||
} |
|||
App._post_form( |
|||
`&p=housekeep&do=refreshDemand`, |
|||
data, |
|||
res => { |
|||
console.log(res); |
|||
|
|||
if(res.data.orderid != '0'){ |
|||
App.navigationTo({ |
|||
url: 'pages/mainPages/payment/payment?orderid=' + res.data.orderid + '&plugin=housekeep' |
|||
}); |
|||
}else{ |
|||
uni.showToast({ |
|||
title:'刷新成功' |
|||
}); |
|||
} |
|||
|
|||
// this.$emit('getMyDemandList'); |
|||
}, |
|||
false, |
|||
() => { |
|||
|
|||
} |
|||
); |
|||
} |
|||
}, |
|||
true |
|||
); |
|||
}, |
|||
chat(){ |
|||
App.navigationTo({ |
|||
url: 'pages/subPages/homepage/chat/chat?other_party_id=' + this.demanItem.mid + '&other_party_type=' + 1+ '&type=1' + '&id=' |
|||
}) |
|||
}, |
|||
redact(){ |
|||
App.navigationTo({ |
|||
url: `pages/subPages2/homemaking/postDemand/postDemand?id=${this.demanItem.id}` |
|||
}); |
|||
}, |
|||
compile(){ |
|||
this.glshow = true; |
|||
|
|||
}, |
|||
delet(type){ |
|||
App.showError( |
|||
`是否${type==0?'下架':type==0?'上架':'下架'}本条需求?`, |
|||
data => { |
|||
if (data.confirm) { |
|||
let data = { |
|||
dostatus:type, |
|||
id:this.demanItem.id |
|||
} |
|||
App._post_form( |
|||
`&p=housekeep&do=changeDemandStatus`, |
|||
data, |
|||
res => { |
|||
console.log(res); |
|||
uni.showToast({ |
|||
title:res.message |
|||
}); |
|||
this.$emit('getMyDemandList') |
|||
}, |
|||
false, |
|||
() => { |
|||
|
|||
} |
|||
); |
|||
} |
|||
}, |
|||
true |
|||
); |
|||
|
|||
}, |
|||
// 去支付 |
|||
goPay() { |
|||
// console.log(this.sid); |
|||
App.navigationTo({ |
|||
url: 'pages/mainPages/payment/payment?orderid=' + this.demanItem.payorderid + '&plugin=housekeep' |
|||
}); |
|||
}, |
|||
lookImg(index){ |
|||
uni.previewImage({ |
|||
current: this.demanItem.thumbs[index], // 当前显示图片的http链接 |
|||
urls: this.demanItem.thumbs // 需要预览的图片http链接列表 |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.demand{ |
|||
padding: 20upx; |
|||
background-color: #FFFFFF; |
|||
position: relative; |
|||
.stick{ |
|||
width: 70upx; |
|||
height: 60upx; |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
image{ |
|||
width: 70upx; |
|||
height: 60upx; |
|||
} |
|||
} |
|||
.demand-title{ |
|||
.stateo{ |
|||
display: inline-block; |
|||
width: 90upx; |
|||
height: 36upx; |
|||
line-height: 36upx; |
|||
text-align: center; |
|||
color: #FF4444; |
|||
border: 1upx solid #FF4444; |
|||
border-radius: 6upx; |
|||
font-size: 24upx; |
|||
margin-left: 20upx; |
|||
} |
|||
} |
|||
.problemDescription{ |
|||
padding: 20upx; |
|||
background-color: #F8F8F8; |
|||
border-radius: 20upx; |
|||
margin-top: 20upx; |
|||
} |
|||
.chat{ |
|||
.chatName{ |
|||
font-size: 26upx; |
|||
color: #333333; |
|||
line-height: 58upx; |
|||
flex: 1; |
|||
} |
|||
.chatBtn{ |
|||
width: 120upx; |
|||
height: 60upx; |
|||
line-height: 60upx; |
|||
text-align: center; |
|||
font-size: 28upx; |
|||
font-weight: bold; |
|||
background: linear-gradient(180deg, #72AAFD 0%, #6094FD 100%); |
|||
opacity: 1; |
|||
border-radius: 10upx; |
|||
color: #FFFFFF; |
|||
} |
|||
padding: 20upx 0; |
|||
image{ |
|||
width: 58upx; |
|||
height: 58upx; |
|||
border: 1upx solid #EEEEEE; |
|||
border-radius: 60upx; |
|||
margin-right: 10upx; |
|||
} |
|||
} |
|||
.demand-img:after{ |
|||
content:''; |
|||
width:33.33%; |
|||
} |
|||
.demand-img{ |
|||
display: flex; |
|||
display: -webkit-flex; |
|||
justify-content: space-between; |
|||
flex-direction: row; |
|||
flex-wrap: wrap; |
|||
padding-top: 20upx; |
|||
.img-item{ |
|||
width: 210upx; |
|||
height: 210upx; |
|||
border-radius: 20upx; |
|||
position: relative; |
|||
image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 20upx; |
|||
} |
|||
} |
|||
.overspread{ |
|||
width: 210upx; |
|||
height: 210upx; |
|||
line-height: 210upx; |
|||
text-align: center; |
|||
color: #FFFFFF; |
|||
border-radius: 20upx; |
|||
background-color: rgba(0,0,0,0.3); |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
} |
|||
.demand-btn{ |
|||
padding-top: 20upx; |
|||
.soldOut{ |
|||
height: 60upx; |
|||
width: 120upx; |
|||
border-radius: 10upx; |
|||
line-height: 60upx; |
|||
text-align: center; |
|||
border: 1upx solid #333333; |
|||
color: #333333; |
|||
font-size: 28upx; |
|||
font-weight: bold; |
|||
margin-right: 20upx; |
|||
display: inline-block; |
|||
} |
|||
.delete{ |
|||
display: inline-block; |
|||
height: 60upx; |
|||
width: 120upx; |
|||
border-radius: 10upx; |
|||
line-height: 60upx; |
|||
text-align: center; |
|||
border: 1upx solid #FF4444; |
|||
color: #ff4444; |
|||
font-size: 28upx; |
|||
font-weight: bold; |
|||
margin-right: 20upx; |
|||
} |
|||
.payment{ |
|||
display: inline-block; |
|||
height: 60upx; |
|||
width: 120upx; |
|||
border-radius: 10upx; |
|||
line-height: 60upx; |
|||
text-align: center; |
|||
border: 1upx solid #0099ff; |
|||
color: #0099ff; |
|||
font-size: 28upx; |
|||
font-weight: bold; |
|||
|
|||
} |
|||
.regulator{ |
|||
display: inline-block; |
|||
height: 60upx; |
|||
width: 120upx; |
|||
border-radius: 10upx; |
|||
line-height: 60upx; |
|||
text-align: center; |
|||
background: linear-gradient(180deg, #72AAFD 0%, #6094FD 100%); |
|||
color: #FFFFFF; |
|||
font-size: 28upx; |
|||
font-weight: bold; |
|||
float: right; |
|||
margin-top: 10upx; |
|||
} |
|||
|
|||
} |
|||
.glbox{ |
|||
width: 750upx; |
|||
background-color: #FFFFFF; |
|||
border-radius: 30upx 30upx 0 0; |
|||
.glitem{ |
|||
height: 100upx; |
|||
line-height: 100upx; |
|||
border-bottom: 1upx solid #EEEEEE; |
|||
text-align: center; |
|||
font-size: 28upx; |
|||
color: #333333; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,204 @@ |
|||
<template> |
|||
<view class="drawCommodity"> |
|||
<view class="title" v-if="goodItem.plugin != 'store'"> |
|||
<image v-if="goodItem.storelogo" :src="goodItem.storelogo" mode=""></image> |
|||
<view class="title-text dis-flex"> |
|||
<view class="t-c"> |
|||
{{goodItem.storename}} |
|||
</view> |
|||
<view class="t-r flex-box" style="font-weight: 500;font-size: 22upx;color: #ff4444;"> |
|||
{{goodItem.distance}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="commodityDetails"> |
|||
<view class="detailsImg"> |
|||
<image :src="goodItem.thumb" mode=""></image> |
|||
<view class="tags"> |
|||
{{goodItem.pluginName}} |
|||
</view> |
|||
</view> |
|||
<view> |
|||
<view class="productName" :style="{marginBottom:goodItem.plugin == 'store'?'20rpx':'60rpx'}"> |
|||
<view class="t-l name"> |
|||
{{goodItem.name}} |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="t-r" style="font-weight: 500;font-size: 24upx;color: #ff4444;" v-if="goodItem.plugin == 'store'"> |
|||
{{goodItem.distance}} |
|||
</view> |
|||
<view class="shopingNum"> |
|||
<!-- {{goodItem.gid}}人购买 --> |
|||
</view> |
|||
<view class="priceButton"> |
|||
<view class="dis-flex" style="width: 100%;" v-if="goodItem.plugin != 'store'"> |
|||
<view class="flex-box col-f4" > |
|||
<text class="f-24" v-if="goodItem.price">¥</text> |
|||
<text class="f-36 f-w" v-if="goodItem.price">{{goodItem.price}}</text> |
|||
</view> |
|||
<view class="shopingButton" @click="goGoods"> |
|||
购买获得抽奖码 |
|||
</view> |
|||
</view> |
|||
<view class="dis-flex" style="width: 100%;justify-content: flex-end;" v-else> |
|||
<view class="t-r flex-box" style="font-weight: 500;font-size: 24upx;color: #ff4444;width: 200upx;" v-if="goodItem.plugin == 'store'"> |
|||
<!-- {{goodItem.distance}} --> |
|||
</view> |
|||
<view class="storeButton" style="background-color: #F1C426;" v-if="goodItem.payurl" @click="goGoodpay"> |
|||
买单 |
|||
</view> |
|||
<view class="storeButton" style="margin-right: 0;" @click="goGoodStore" v-if="goodItem.deliveurl"> |
|||
商城 |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from "@/common/js/app.js" |
|||
export default{ |
|||
data(){ |
|||
return{ |
|||
|
|||
} |
|||
}, |
|||
methods:{ |
|||
goGoodStore(){ |
|||
let _this = this; |
|||
App.navigationTo({ |
|||
url: 'pages/subPages2/businessCenter/foodList/foodList?id=' + _this.goodItem.gid + '&storeid=' + _this.goodItem.gid |
|||
}); |
|||
}, |
|||
goGoodpay(){ |
|||
let _this = this; |
|||
let mid = uni.getStorageSync('userinfo').mid; |
|||
App.navigationTo({ |
|||
url: 'pages/subPages2/newBuyOrder/buyOrder?sid=' + _this.goodItem.gid + '&mid=' + mid |
|||
}); |
|||
}, |
|||
goGoods(){ |
|||
let _this = this; |
|||
App.navigationTo({ |
|||
url: _this.goodItem.url |
|||
}); |
|||
}, |
|||
}, |
|||
props:{ |
|||
goodItem: { |
|||
type: Object, |
|||
default: {} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.drawCommodity{ |
|||
margin-bottom: 20upx; |
|||
position: relative; |
|||
padding: 20upx; |
|||
background-color: #F8F8F8; |
|||
border-radius: 20upx; |
|||
.title{ |
|||
display: flex; |
|||
margin-bottom: 20upx; |
|||
image{ |
|||
width: 40upx; |
|||
height: 40upx; |
|||
border-radius: 50%; |
|||
} |
|||
.title-text{ |
|||
flex: 1; |
|||
height: 40upx; |
|||
line-height: 40upx; |
|||
font-size: 24upx; |
|||
font-weight: bold; |
|||
margin-left: 10upx; |
|||
} |
|||
} |
|||
.commodityDetails{ |
|||
// position: relative; |
|||
display: flex; |
|||
// margin-top: 20upx; |
|||
.detailsImg{ |
|||
position: relative; |
|||
image{ |
|||
width: 180upx; |
|||
height: 180upx; |
|||
border-radius: 10upx; |
|||
margin-right: 20upx; |
|||
} |
|||
.tags{ |
|||
width: 70upx; |
|||
height: 34upx; |
|||
line-height: 34upx; |
|||
text-align: center; |
|||
font-size: 24upx; |
|||
color: #E3A815; |
|||
background: linear-gradient(130deg, #FEDB58 0%, #FBC84A 100%); |
|||
opacity: 1; |
|||
border-radius: 10upx 0upx 10upx 0upx; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
} |
|||
|
|||
.productName{ |
|||
|
|||
font-size: 28upx; |
|||
font-weight: bold; |
|||
// overflow:hidden; |
|||
// text-overflow:ellipsis; |
|||
// -o-text-overflow:ellipsis; |
|||
// white-space:nowrap; |
|||
margin-bottom: 60upx; |
|||
.name{ |
|||
text-overflow:ellipsis; |
|||
display:-webkit-box; |
|||
-webkit-box-orient:vertical; |
|||
-webkit-line-clamp:2; |
|||
overflow: hidden; |
|||
// width: 270upx; |
|||
height: 72upx; |
|||
} |
|||
} |
|||
.shopingNum{ |
|||
font-size: 24upx; |
|||
color: #999999; |
|||
margin-bottom: 10upx; |
|||
} |
|||
.priceButton{ |
|||
width:380upx; |
|||
display: flex; |
|||
.shopingButton{ |
|||
width: 200upx; |
|||
height: 50upx; |
|||
line-height: 50upx; |
|||
text-align: center; |
|||
color: #FFFFFF; |
|||
font-size: 24upx; |
|||
background-color: #FF4444; |
|||
border-radius: 10upx; |
|||
} |
|||
.storeButton{ |
|||
// max-width: 120upx; |
|||
height: 50upx; |
|||
line-height: 50upx; |
|||
text-align: center; |
|||
color: #FFFFFF; |
|||
font-size: 24upx; |
|||
background-color: #FF4444; |
|||
border-radius: 10upx; |
|||
flex: 1; |
|||
margin: 0upx 10upx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,229 @@ |
|||
<template> |
|||
<view class="evaluateItem"> |
|||
<view class="dis-flex evaluate-title"> |
|||
<image :src="evaItem.avatar" mode=""></image> |
|||
<view class="flex-box"> |
|||
<view class="f-28 col-3 f-w">{{evaItem.nickname}}</view> |
|||
<view class="f-24 col-9 p-top-10">{{evaItem.createtime}}</view> |
|||
</view> |
|||
<!-- #ifdef H5 --> |
|||
<view class="f-24 col-9 dis-flex" style="position: relative;top: -25upx;"> |
|||
<tui-rate :current="evaItem.star" :disabled="true" :score="1" active="#ff4444"></tui-rate> |
|||
<view style="line-height: 90upx;padding-left: 5upx;">{{evaItem.star == 5 || evaItem.star == 4?'好评':evaItem.star == 3?'中评':'差评'}}</view> |
|||
</view> |
|||
<!-- #endif --> |
|||
<!-- #ifndef H5 --> |
|||
<view class="f-24 col-9 dis-flex" style=""> |
|||
<tui-rate :current="evaItem.star" :disabled="true" :score="1" active="#ff4444"></tui-rate> |
|||
<view style="line-height: 45upx;padding-left: 5upx;">{{evaItem.star == 5 || evaItem.star == 4?'好评':evaItem.star == 3?'中评':'差评'}}</view> |
|||
</view> |
|||
<!-- #endif --> |
|||
</view> |
|||
<view style="padding-left: 110upx;"> |
|||
<view class="col-3 f-28 p-top-20">{{evaItem.text}}</view> |
|||
<view class="img-flex" style="padding-top: 30upx;" v-if="evaItem.pic.length > 0"> |
|||
<image |
|||
v-for="(item, index) in evaItem.pic" :key="index" |
|||
:src="item" |
|||
@click="lookImg(evaItem.pic,index)" |
|||
mode="" |
|||
></image> |
|||
</view> |
|||
<view class="dis-flex condition f-28 col-3 f-w" > |
|||
<view @click="like"> |
|||
<image :src="imgfixUrls + 'homemakingImg/weidianzan.png'" v-if="evaItem.praiseflag == 0" mode=""></image> |
|||
<image :src="imgfixUrls + 'homemakingImg/yidianzan.png'" v-else mode=""></image> |
|||
<view class="text">{{evaItem.praisetotal}}</view> |
|||
</view> |
|||
<view style="padding-left: 50upx;" @click="openComm" v-if="hidereply == 0"> |
|||
<image :src="imgfixUrls + 'homemakingImg/huifukuang.png'" mode=""></image> |
|||
<view class="text">{{evaItem.replytotal}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="criticList" v-if="evaItem.replylist.length != 0 || evaItem.replytextone"> |
|||
<view class="criticItem f-24 col-3 " v-if="evaItem.replytextone"> |
|||
<text class="f-w" style="color: #007AFF;">商家回复：</text> |
|||
<text>{{evaItem.replytextone}}</text> |
|||
</view> |
|||
<view class="criticItem f-24 col-3 " v-for="(item,index) in evaItem.replylist"> |
|||
<text class="f-w">{{item.nickname}}：</text> |
|||
<text>{{item.content}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="f-28 col-3 f-w t-r" style="padding-top: 20upx;" @click="open" v-if="evaItem.replytotal != evaItem.replylist.length - 1 && evaItem.replylist.length != 0"> |
|||
{{evaItem.replytotal>5?'展开':''}} |
|||
</view> |
|||
</view> |
|||
<PopManager :show="commShow" :type="'center'" :overlay="'false'" :showOverlay="'false'" @clickmask="close"> |
|||
<view class="commBox"> |
|||
<textarea value="" v-if="commShow" v-model="textCom" class="textarea" placeholder="回复:" /> |
|||
<view class="commBtn" @click="reply"> |
|||
回复 |
|||
</view> |
|||
</view> |
|||
</PopManager> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from '@/common/js/app.js'; |
|||
import tuiRate from '@/components/template/rate.vue'; |
|||
import PopManager from '@/components/template/PopManager'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
onnumber:5, |
|||
commShow:false, |
|||
textCom:'' |
|||
}; |
|||
}, |
|||
components: { |
|||
tuiRate, |
|||
PopManager |
|||
}, |
|||
props:{ |
|||
evaItem:{ |
|||
type:Object, |
|||
default:{} |
|||
}, |
|||
hidereply:{ |
|||
type:Number, |
|||
default:0 |
|||
} |
|||
}, |
|||
methods:{ |
|||
lookImg(imgs,index){ |
|||
uni.previewImage({ |
|||
current:imgs[index], |
|||
urls: imgs |
|||
}) |
|||
}, |
|||
like(){ |
|||
App._post_form( |
|||
`&p=housekeep&do=clickPraise`, |
|||
{cid:this.evaItem.id}, |
|||
res => { |
|||
console.log(res); |
|||
uni.showToast({ |
|||
title: res.message |
|||
}); |
|||
this.$emit('getData'); |
|||
}, |
|||
false, |
|||
() => {} |
|||
); |
|||
}, |
|||
reply(){ |
|||
let data = { |
|||
content:this.textCom, |
|||
cid:this.evaItem.id |
|||
} |
|||
App._post_form( |
|||
`&p=housekeep&do=leaveMessage`, |
|||
data, |
|||
res => { |
|||
console.log(res); |
|||
uni.showToast({ |
|||
title: res.message |
|||
}); |
|||
this.$emit('getData'); |
|||
this.textCom = ''; |
|||
this.commShow = false; |
|||
}, |
|||
false, |
|||
() => {} |
|||
); |
|||
}, |
|||
openComm(){ |
|||
this.commShow = true; |
|||
}, |
|||
close(){ |
|||
this.commShow = false; |
|||
this.textCom = '' |
|||
}, |
|||
open(){ |
|||
this.$emit('getmoreCom',this.evaItem.id); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.evaluateItem { |
|||
padding: 30upx 0; |
|||
.evaluate-title { |
|||
image { |
|||
width: 90upx; |
|||
height: 90upx; |
|||
border-radius: 50%; |
|||
margin-right: 20upx; |
|||
// border: 1upx solid #707070; |
|||
} |
|||
} |
|||
.commBox{ |
|||
width: 450upx; |
|||
background-color: #FFFFFF; |
|||
border-radius: 30upx; |
|||
padding: 30upx; |
|||
.textarea{ |
|||
width: 100%; |
|||
height: 200upx; |
|||
font-size: 28upx; |
|||
} |
|||
.commBtn{ |
|||
width: 200upx; |
|||
height: 60upx; |
|||
line-height: 60upx; |
|||
border-radius: 60upx; |
|||
text-align: center; |
|||
font-size: 28upx; |
|||
font-weight: bold; |
|||
background-color: #72AAFD; |
|||
color: #FFFFFF; |
|||
margin: auto; |
|||
} |
|||
} |
|||
.img-flex:after{ |
|||
content:''; |
|||
width:187upx; |
|||
} |
|||
.img-flex { |
|||
display: flex; |
|||
display: -webkit-flex; |
|||
justify-content: space-between; |
|||
flex-direction: row; |
|||
flex-wrap: wrap; |
|||
// padding-top: 20upx; |
|||
image { |
|||
// flex: 0 0 30%; |
|||
width: 187upx; |
|||
height: 187upx; |
|||
margin-top: 20upx; |
|||
border-radius: 20upx; |
|||
} |
|||
} |
|||
.condition{ |
|||
// padding-left: 110upx; |
|||
padding: 40upx 0 40upx; |
|||
// border-bottom: 1upx solid #EEEEEE; |
|||
image{ |
|||
width: 34upx; |
|||
height: 34upx; |
|||
vertical-align: bottom; |
|||
} |
|||
.text{ |
|||
display: inline-block; |
|||
vertical-align: bottom; |
|||
line-height: 34upx; |
|||
padding-left: 10upx; |
|||
} |
|||
} |
|||
.criticList{ |
|||
padding: 20upx 0; |
|||
border-top: 1upx solid #EEEEEE; |
|||
.criticItem{ |
|||
padding-bottom: 10upx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,351 @@ |
|||
<template> |
|||
<view v-if="CustomerService.suspension == '1'" > |
|||
<view class="col-f f-42 zooms" id="id" :style="{position: 'fixed',left:CustomerService.logoleft + 'px',bottom: CustomerService.logobottom + 'px'}" |
|||
v-if="CustomerService.logoloca == '1' && btndata" > |
|||
<drag-button :isDock="true" :existTabBar="true" :btndata="btndata" @btnClick="gourl" @btnTouchstart="btnTouchstart" @btnTouchend="btnTouchend" /> |
|||
<!-- <image :src="CustomerService.susicon" class="img" :style="{width: CustomerService.logowidth + 'px',height:CustomerService.logowidth + 'px'}" mode="aspectFit"></image> --> |
|||
</view> |
|||
<view class="col-f f-42 zooms" id="id" v-if="CustomerService.logoloca == '0' && btndata" :style="{position: 'fixed',bottom: CustomerService.logobottom + 'px',right:CustomerService.logoleft + 'px'}" |
|||
> |
|||
<!-- <image :src="CustomerService.susicon" class="img" :style="{width: CustomerService.logowidth + 'px',height:CustomerService.logowidth + 'px'}" mode="aspectFit"></image> --> |
|||
<drag-button :btndata="btndata" :isDock="true" :existTabBar="true" @btnClick="gourl" @btnTouchstart="btnTouchstart" @btnTouchend="btnTouchend" /> |
|||
</view> |
|||
<popup-view :show="showCommunity" type="center" @clickmask="showCommunity = false"> |
|||
<view class="mainView marT30Auto textC" style="width: 80vw;height: 80vh;"> |
|||
<view class="title textC marT80Auto backImg" :style="{ background: 'url(' + backImg + ')' }"><text class="font30">在线咨询</text></view> |
|||
<view class="body marT50Auto" @click="checkImg"> |
|||
<view class="p20"> |
|||
<image :src="CustomerService.qrcode" class="qrCode"></image> |
|||
</view> |
|||
</view> |
|||
<view class=" textC marT50 marT50Auto"> |
|||
<text class="font30 color333333">{{CustomerService.tel}}</text> |
|||
</view> |
|||
<view class="phoneButton textC marT19Auto f-22" style="color: #999999;" @click="kfPhone"> |
|||
点击拨打电话 |
|||
</view> |
|||
<!-- #ifdef H5 --> |
|||
<!-- <view v-html="wxOpenTags"></view> --> |
|||
|
|||
<!-- #endif --> |
|||
<view class="marT30"> |
|||
<text class="font24 color666666">长按保存二维码或者点击拔打电话</text> |
|||
</view> |
|||
<view> |
|||
<text class="font24 color666666">添加客服微信</text> |
|||
</view> |
|||
<view> |
|||
<text class="font24 color666666">我们会尽快回复您</text> |
|||
</view> |
|||
<!-- <navigator class="searchbox2-l" url="/pages/subPages/search/search" hover-class="none"> |
|||
经历抽奖 |
|||
</navigator> --> |
|||
<!-- <view class="f-20" @click="qqqq"> |
|||
经历抽奖 |
|||
</view> |
|||
<view class="f-20" @click="wwww"> |
|||
获奖列表 |
|||
</view> |
|||
<view class="f-20" @click="ssss"> |
|||
抽奖码 |
|||
</view> --> |
|||
<!-- <view class="f-20" @click="aaaa"> |
|||
发布服务 |
|||
</view> |
|||
<view class="f-20" @click="eeee"> |
|||
入驻 |
|||
</view> --> |
|||
<!-- <view class="f-20" @click="xxxx"> |
|||
发布招聘 |
|||
</view> |
|||
<view class="f-20" @click="rrrr"> |
|||
添加简历 |
|||
</view> |
|||
<view class="f-20" @click="tttt"> |
|||
招聘详情 |
|||
</view> |
|||
<view class="f-20" @click="yyyy"> |
|||
企业列表 |
|||
</view> --> |
|||
</view> |
|||
</popup-view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from '@/common/js/app.js'; |
|||
import dragButton from "@/components/drag-button/drag-button.vue"; |
|||
import PopupView from '@/components/template/PopManager.vue'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
CustomerService: {}, |
|||
showCommunity: false, |
|||
btndata:{} |
|||
} |
|||
}, |
|||
components: { |
|||
PopupView, |
|||
dragButton |
|||
}, |
|||
mounted() { |
|||
let _this = this; |
|||
this.CustomerService = uni.getStorageSync('CustomerService'); |
|||
setTimeout(()=>{ |
|||
const query = uni.createSelectorQuery().in(_this); |
|||
query.select('#id').boundingClientRect(data => { |
|||
// console.log(data) |
|||
_this.btndata = data; |
|||
}).exec(); |
|||
}) |
|||
//#ifdef H5 |
|||
setTimeout(()=>{ |
|||
this.wxOpenTags=`<wx-open-launch-weapp path="pages/mainPages/index/index.html" id="launch-wxapp" username="gh_59d3d43b1c12"> |
|||
<template> |
|||
<view class="btn-open-weapp"><image src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1178643745,283795116&fm=26&gp=0.jpg" mode=""></image></view> |
|||
</template> |
|||
</wx-open-launch-weapp>`; |
|||
},1000); |
|||
//#endif |
|||
}, |
|||
computed: { |
|||
backImg() { |
|||
return this.imageRoot + 'zxzx.png'; |
|||
} |
|||
}, |
|||
methods: { |
|||
xxxx(){ |
|||
App.navigationTo({ |
|||
url: "pages/subPages2/hirePlatform/postRecruitment/postRecruitment" |
|||
}); |
|||
}, |
|||
yyyy(){ |
|||
App.navigationTo({ |
|||
url: "pages/subPages2/hirePlatform/companiesList/companiesList" |
|||
}); |
|||
}, |
|||
tttt(){ |
|||
App.navigationTo({ |
|||
url: "pages/subPages2/hirePlatform/recruitmentDetails/recruitmentDetails" |
|||
}); |
|||
}, |
|||
rrrr(){ |
|||
// App.navigationTo({ |
|||
// url: "pages/subPages2/booked/bookedInformation/bookedInformation" |
|||
// }); |
|||
}, |
|||
qqqq(){ |
|||
App.navigationTo({ |
|||
url: "pages/subPages2/lottery/lotteryIndex/lotteryIndex?i=1&aid=125&head_id=51&recordid=24&id=5" |
|||
}); |
|||
}, |
|||
wwww(){ |
|||
App.navigationTo({ |
|||
url: "pages/subPages2/lottery/lotteryList/lotteryList?i=1&aid=125&sharemid=51&recordid=21" |
|||
}); |
|||
}, |
|||
ssss(){ |
|||
App.navigationTo({ |
|||
url: "pages/subPages2/lottery/lotteryCode/lotteryCode" |
|||
}); |
|||
}, |
|||
aaaa(){ |
|||
App.navigationTo({ |
|||
url: "pages/subPages2/homemaking/pubService/pubService" |
|||
}); |
|||
|
|||
|
|||
}, |
|||
eeee(){ |
|||
App.navigationTo({ |
|||
url: "pages/subPages2/homemaking/serviceIn/serviceIn" |
|||
}); |
|||
}, |
|||
btnTouchend() { |
|||
|
|||
}, |
|||
btnTouchstart() { |
|||
|
|||
}, |
|||
checkImg() { |
|||
let _this = this |
|||
let a = [] |
|||
a.push(_this.CustomerService.qrcode) |
|||
uni.previewImage({ |
|||
urls: a |
|||
}) |
|||
}, |
|||
kfPhone() { |
|||
let _this = this |
|||
uni.makePhoneCall({ |
|||
phoneNumber: _this.CustomerService.tel //仅为示例 |
|||
}); |
|||
}, |
|||
gourl() { |
|||
if (this.CustomerService.type == '0') { |
|||
this.showCommunity = true; |
|||
// debugger |
|||
// App.navigationTo({ |
|||
// url: "pages/subPages2/phoneBook/phoneClass/phoneClass" |
|||
// }) |
|||
// App.navigationTo({ |
|||
// url: "pages/subPages2/coursegoods/localindex/localindex" |
|||
// }); |
|||
|
|||
// App.navigationTo({ |
|||
// url: "pages/subPages2/newBuyOrderOrder" |
|||
// }) |
|||
// App.navigationTo({ |
|||
// url: 'pages/subPages/orderList/orderList?type=' + 10 |
|||
// }); |
|||
} else { |
|||
let url = encodeURIComponent(this.CustomerService.url); |
|||
// App.navigationTo({ |
|||
// url: `pages/subPages/webview/webview?urlsrc=${url}` |
|||
// }) |
|||
// App.navigationTo({ |
|||
// url: "pages/subPages2/drawGame/drawGame1" |
|||
// }); |
|||
// App.navigationTo({ |
|||
// url: "pages/subPages2/coursegoods/localindex/localindex" |
|||
// }); |
|||
|
|||
if(this.CustomerService.url.indexOf('https://work.weixin.qq.com') != -1){ |
|||
App.navigationTo({ |
|||
url:this.CustomerService.url |
|||
}); |
|||
}else{ |
|||
uni.navigateTo({ |
|||
url: `/pages/subPages/webview/webview?urlsrc=${url}` |
|||
}); |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.img { |
|||
// border-radius: 50%; |
|||
} |
|||
|
|||
.zooms { |
|||
z-index: 997; |
|||
} |
|||
|
|||
.customer { |
|||
font-size: 0; |
|||
} |
|||
|
|||
.customer { |
|||
background: #eeeeee; |
|||
} |
|||
|
|||
.mainView { |
|||
border: 1upx solid rgba(0, 0, 0, 0); |
|||
width: 690upx; |
|||
height: 840upx; |
|||
background: rgba(255, 255, 255, 1); |
|||
border-radius: 10upx; |
|||
} |
|||
|
|||
.marT30Auto { |
|||
margin: 30upx auto 0 auto; |
|||
} |
|||
|
|||
.textC { |
|||
text-align: center; |
|||
} |
|||
|
|||
.title { |
|||
width: 271upx; |
|||
height: 41upx; |
|||
} |
|||
|
|||
.font30 { |
|||
font-size: 30upx; |
|||
} |
|||
|
|||
.marT80Auto { |
|||
margin: 80upx auto 0 auto; |
|||
} |
|||
|
|||
.backImg { |
|||
background-size: 100% !important; |
|||
} |
|||
|
|||
.body { |
|||
width: 340upx; |
|||
height: 340upx; |
|||
border: 2upx solid rgba(255, 68, 68, 1); |
|||
border-radius: 10upx; |
|||
} |
|||
|
|||
.marT50Auto { |
|||
margin: 50upx auto 0 auto; |
|||
} |
|||
|
|||
.qrCode { |
|||
width: 300upx; |
|||
height: 300upx; |
|||
} |
|||
|
|||
.phoneButton { |
|||
width: 164upx; |
|||
height: 40upx; |
|||
background: rgba(245, 245, 245, 1); |
|||
border: 1upx solid rgba(204, 204, 204, 1); |
|||
border-radius: 4upx; |
|||
} |
|||
|
|||
.font30 { |
|||
font-size: 30upx; |
|||
} |
|||
|
|||
.lineHeight40 { |
|||
line-height: 40upx; |
|||
} |
|||
|
|||
.color333333 { |
|||
color: rgba(51, 51, 51, 1); |
|||
} |
|||
|
|||
.font22 { |
|||
font-size: 22upx; |
|||
} |
|||
|
|||
.marT19Auto { |
|||
margin: 19upx auto 0 auto; |
|||
} |
|||
|
|||
.font24 { |
|||
font-size: 24upx; |
|||
} |
|||
|
|||
.marT30 { |
|||
margin: 30upx 0 0 0; |
|||
} |
|||
|
|||
.color666666 { |
|||
color: rgba(102, 102, 102, 1); |
|||
} |
|||
|
|||
.p20 { |
|||
padding: 20upx; |
|||
} |
|||
.btn-open-weapp{ |
|||
background: linear-gradient(to right, #ffd52e 0%, #ffef93 50%, #ffd52e 100%); |
|||
border: 0; |
|||
color: #424242; |
|||
text-shadow: 0px 1px 1px #fff; |
|||
border-radius: 50px; |
|||
text-align: center; |
|||
width: 120px; |
|||
height: 35px; |
|||
line-height: 35px; |
|||
outline:none; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,969 @@ |
|||
<!-- requestType 1:掌上信息 2:好店首页 3:积分商城 --> |
|||
<!-- @selectAreaid 选择地区id --> |
|||
<!-- @selectClassid 选择分类id --> |
|||
<!-- @selectClassTwoid 选择二级分类id --> |
|||
<!-- @selectOrders 选择排序id --> |
|||
<!-- @pageScrollHeight 积分商城点击tab后滑动顶部,取消回到顶部 --> |
|||
<!-- @getOrderId 默认第一个排序id --> |
|||
<template> |
|||
<view class="container"> |
|||
<view class="pop-mask" v-if="is_openTabbar" @click="close"></view> |
|||
<view :class="isPageScroll==='1'&& is_openTabbar?'isPageScroll':'p-r'"> |
|||
<view class="tabBar-list dis-flex b-f" :class="{'border-line':is_openTabbar,'border-bottom':is_openTabbar}"> |
|||
<block v-for="(tabItem,index) in SelectInfo.top" :key="index" v-if="index < 3"> |
|||
<view class="tabBar-item dis-flex flex-x-center flex-y-center f-28 flex-box" :style="currentType===tabItem.subscript?'color:#FF4444;':'color:#333333'" |
|||
@click="openTabbar(tabItem.subscript)" v-if="tabItem.status===1"> |
|||
<view class="m-right10 onelist-hidden tabBar-itemTitle">{{(title && index ==1 && requestType!= '文章头条' )?title:(title && index ==0 && requestType== '文章头条' )?title:tabItem.title}}</view> |
|||
<view class="iconfont" :class="currentType===tabItem.subscript?'icon-fold':'icon-unfold'"></view> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
<view class="pop-content padding-box-all b-f" @touchmove.stop.prevent="" :class="{show:is_openTabbar}"> |
|||
<block v-if="!!cityData && currentType==='area'"> |
|||
<view > |
|||
<view class="dis-flex"> |
|||
<view class="flex-box" style="padding-top: 30upx;"> |
|||
<view v-if="businessCard" class="city-name f-28 m-btm50" :class="isAllarea?'col-f4':'col-3'" @click="allCityarea('all')">全部</view> |
|||
<view class="city-name f-28" :class="!isAllarea?'col-f4':'col-3'" @click="allCityarea('city')">{{cityData.name}}</view> |
|||
</view> |
|||
<scroll-view |
|||
scroll-y="true" |
|||
class="cityScroll" |
|||
v-if="!isAllarea" |
|||
:scroll-top="cityScrollTop" |
|||
@scroll="cityChage" |
|||
:upper-threshold="topNumberct" |
|||
lower-threshold="0" |
|||
@scrolltolower="scrolltolowerct" |
|||
@scrolltoupper="scrolltoupperct" |
|||
> |
|||
<view class="city-list" style="padding-left: 30upx;padding-top: 30upx;"> |
|||
<view class="city-list-item m-btm50 f-28" :class="city_id===cityItem.id?'col-f4':'col-3'" @click="getcityId(cityItem)" |
|||
v-for="(cityItem,index) in cityData.list" :key="index">{{cityItem.name}}</view> |
|||
<!-- <view class="right"> |
|||
<image v-if="cityData.list.length > 9" :src="imgfixUrls + 'scrollbottom.gif'" mode=""></image> |
|||
</view> --> |
|||
</view> |
|||
</scroll-view> |
|||
|
|||
</view> |
|||
<view class="dis-flex" style="height: 50upx;"> |
|||
<view class="left" > |
|||
<!-- <image v-if="SelectInfo.class.length > 9" :src="imgfixUrls + 'scrollbottom.gif'" mode=""></image> --> |
|||
</view> |
|||
<view class="left" style="padding-top: 0upx;position: relative;padding-bottom: 18upx;"> |
|||
<!-- <view style="width: 2upx;background-color: #eeeeee;height: 100%;position: absolute;left: 0;top: 0;"> |
|||
|
|||
</view> --> |
|||
<image @click="citybottombtn" v-if="cityData.list.length > 9 && !citybottom" :src="imgfixUrls + 'scrollbottom.gif'" mode=""></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
<block v-if="currentType==='class'"> |
|||
<scroll-view |
|||
class="classScroll" |
|||
:scroll-top="scrollTop" |
|||
scroll-y="true" |
|||
style="padding-top: 30upx;" |
|||
:upper-threshold="topNumber" |
|||
lower-threshold="0" |
|||
@scrolltolower="scrolltolowers" |
|||
@scrolltoupper="scrolltolower" |
|||
@scroll="classoneChage"> |
|||
|
|||
<view class="class_list dis-flex" v-for="(classItem,index) in SelectInfo.class" :key="index"> |
|||
<view class="class_listOne dis-flex flex-box m-btm50" style="width: 50%;" :class="classOneId===classItem.cate_one || classOneId===classItem.id || cate_one == classItem.cate_one || cate_one == classItem.id?'col-f4':'col-3'" |
|||
@click="getclassOneId(classItem)"> |
|||
<view class="class_listOneItem f-28">{{classItem.name}}</view> |
|||
</view> |
|||
<block v-if="(classOneId===classItem.cate_one || classOneId===classItem.id) && (!!classItem.list &&classItem.list.length>0) || cate_one == classItem.cate_one || cate_one == classItem.id"> |
|||
<view class="class_Twolist" @touchmove.stop.prevent=""> |
|||
<scroll-view |
|||
scroll-y="true" |
|||
:style="{height: boxHeight - 20 + 'px'}" |
|||
:scroll-top="scrollTopTwo" |
|||
class="class_TwoScroll" |
|||
@scroll="classtwoChage" |
|||
:upper-threshold="topNumbertwo" |
|||
lower-threshold="0" |
|||
@scrolltolower="scrolltolowerst" |
|||
@scrolltoupper="scrolltolowert" |
|||
> |
|||
<view class="class_listTwo m-btm30" @click="getclassTwoId(classTwoItem)" v-for="(classTwoItem,indexTwo) in classItem.list" |
|||
:key="indexTwo"> |
|||
<view class="class_listTwoItem f-28" :class="(classTwoId===classTwoItem.id||classTwoId===classTwoItem.cate_two || cate_two == classTwoItem.cate_two || cate_two == classTwoItem.id)?'col-f4':'col-3'">{{classTwoItem.name}}</view> |
|||
<!-- <view class="class_listTwoItem f-28" :class="(classTwoId===classTwoItem.id||classTwoId===classTwoItem.cate_two || cate_two == classTwoItem.cate_two || cate_two == classTwoItem.id)?'col-f4':'col-3'">{{classTwoItem.name}}</view> --> |
|||
</view> |
|||
|
|||
</scroll-view> |
|||
<view class="right"> |
|||
<image @click="sorTwoTop" v-if="classItem.list.length > 11 && !classtwobottom" :src="imgfixUrls + 'scrollbottom.gif'" mode=""></image> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
</scroll-view> |
|||
</block> |
|||
<block v-if="currentType==='orders'"> |
|||
<scroll-view scroll-y="true" class="class_TwoScroll" style="padding-top: 30upx;"> |
|||
<view class="class_listTwo"> |
|||
<view class="class_listTwoItem f-28 m-btm50" @click="getOrderId(orderItem)" v-for="(orderItem,index) in SelectInfo.orders" |
|||
:key="index" :class="orderId===orderItem.val?'col-f4':'col-3'">{{orderItem.title}}</view> |
|||
</view> |
|||
</scroll-view> |
|||
</block> |
|||
<block v-if="currentType==='nwe_area' || currentType === 'area_id'"> |
|||
<view class="dis-flex" style="padding-top: 30upx;"> |
|||
<view class="flex-box" style="overflow: auto;height: 400upx;"> |
|||
<view class="f-24 t-c industry-item" :style="{color: item.id != provinceId?'#363636':'#ff4444'}" v-for="(item,index) in provinceList" :key="index" @click="getCityList(index,item)"> |
|||
{{item.name}} |
|||
</view> |
|||
</view> |
|||
<view class="flex-box" style="overflow: auto;height: 400upx;"> |
|||
<view class="f-24 t-c industry-item" :style="{color: item.id != cityId?'#363636':'#ff4444'}" v-for="(item,index) in cityList" :key="index" @click="getAreaList(index,item)"> |
|||
{{item.name}} |
|||
</view> |
|||
</view> |
|||
<view class="flex-box" style="overflow: auto;height: 400upx;"> |
|||
<view class="f-24 t-c industry-item" :style="{color: item.id != areaId?'#363636':'#ff4444'}" v-for="(item,index) in areaList" :key="index" @click="getAreaId(index,item)"> |
|||
{{item.name}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
<block v-if="currentType==='industry' || currentType=== 'education' && industryOne"> |
|||
<view class="dis-flex" style="padding-top: 30upx;"> |
|||
<view class="flex-box" style="overflow: auto;height: 400upx;"> |
|||
<view class="f-24 t-c industry-item" :style="{color: !item.checked?'#363636':'#ff4444'}" v-for="(item,index) in industryOne" :key="index" @click="getindustryTwo(index,item)"> |
|||
{{item.title}} |
|||
</view> |
|||
</view> |
|||
<view class="flex-box" style="overflow: auto;height: 400upx;" v-if="pageName != '企业'"> |
|||
<view class="f-24 t-c industry-item" :style="{color: !item.checked?'#363636':'#ff4444'}" v-for="(item,index) in industryTwo" :key="index" @click="getindustryThree(index,item)"> |
|||
{{item.title}} |
|||
</view> |
|||
</view> |
|||
<view class="flex-box" style="overflow: auto;height: 400upx;" v-if="pageName != '企业'"> |
|||
<view class="f-24 t-c industry-item" :style="{color: !item.checked?'#363636':'#ff4444'}" v-for="(item,index) in industryThree" :key="index" @click="getindustryFour(index,item)"> |
|||
{{item.title}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
<!-- 相亲新增 --> |
|||
<block v-if="currentType==='sort'"> |
|||
<scroll-view scroll-y="true" style="padding-top: 30upx;" class="class_TwoScroll"> |
|||
<view class="class_listTwo"> |
|||
<view class="class_listTwoItem f-28 m-btm50" @click="getSortId(sortItem)" v-for="(sortItem,index) in SelectInfo.sort" |
|||
:key="index" :class="sortId===sortItem.val?'col-f4':'col-3'">{{sortItem.title}}</view> |
|||
</view> |
|||
</scroll-view> |
|||
</block> |
|||
<block v-if="currentType==='gneder'"> |
|||
<scroll-view scroll-y="true" style="padding-top: 30upx;" class="class_TwoScroll"> |
|||
<view class="class_listTwo"> |
|||
<view class="class_listTwoItem f-28 m-btm50" @click="getGnederId(gnederItem)" v-for="(gnederItem,index) in SelectInfo.gneder" |
|||
:key="index" :class="gnederId===gnederItem.val?'col-f4':'col-3'">{{gnederItem.title}}</view> |
|||
</view> |
|||
</scroll-view> |
|||
</block> |
|||
<view class="dis-flex" v-if="currentType==='class' && SelectInfo.class.length > 9" style="height: 50upx;"> |
|||
<view class="left" @click="sorTop"> |
|||
<image v-if="SelectInfo.class.length > 9 && !classonebottom" :src="imgfixUrls + 'scrollbottom.gif'" mode=""></image> |
|||
</view> |
|||
<view class="left"> |
|||
<!-- <image v-if="SelectInfo.class.length > 9" :src="imgfixUrls + 'scrollbottom.gif'" mode=""></image> --> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view > |
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from '../../common/js/app.js'; |
|||
import wPicker from '@/components/w-picker/w-picker.vue'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
is_openTabbar: false, |
|||
SelectInfo: {}, |
|||
currentType: null, |
|||
cityData: {}, |
|||
city_id: null, |
|||
classOneId: null, |
|||
classTwoId: null, |
|||
orderId: null, |
|||
isAllarea: false, |
|||
industryOne:null, |
|||
industryTwo:[], |
|||
industryThree:[], |
|||
industryID:[], |
|||
provinceList:[], |
|||
cityList:[], |
|||
areaList:[], |
|||
provinceId:'', |
|||
cityId:'', |
|||
areaId:'', |
|||
agencyData:{}, |
|||
sortId: null, //相亲新增 |
|||
gnederId: null, |
|||
citybottom:false, |
|||
classonebottom:false, |
|||
classtwobottom:false, |
|||
scrollTop:0, |
|||
scrollTopTwo:0, |
|||
cityScrollTop:0, |
|||
topNumbertwo:10,//预设为10避免一开始就触发事件 |
|||
topNumber:10, |
|||
topNumberct:10, |
|||
boxHeight:0 |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getSelectInfo(); |
|||
this.agencyData = uni.getStorageSync('agencyData'); |
|||
|
|||
|
|||
}, |
|||
components:{ |
|||
wPicker |
|||
}, |
|||
props: { |
|||
//请求页面类型 |
|||
requestType: { |
|||
type: String, |
|||
default: function() { |
|||
return '2' |
|||
} |
|||
}, |
|||
//积分商城滑动 0关闭 1开启 |
|||
isPageScroll: { |
|||
type: String, |
|||
default: function() { |
|||
return '0' |
|||
} |
|||
}, |
|||
businessCard: { |
|||
type: Boolean, |
|||
default: function() { |
|||
return false |
|||
} |
|||
}, |
|||
cate_one: { |
|||
type:String, |
|||
default: '' |
|||
}, |
|||
cate_two: { |
|||
type:String, |
|||
default:'' |
|||
}, |
|||
title:{ |
|||
type:String, |
|||
default:'' |
|||
}, |
|||
pageName:{ |
|||
type:String, |
|||
default:'' |
|||
} |
|||
}, |
|||
watch:{ |
|||
cate_one: { |
|||
handler(newval) { |
|||
|
|||
this.setData({ |
|||
classOneId: newval |
|||
}) |
|||
}, |
|||
deep: true |
|||
}, |
|||
cate_two: { |
|||
handler(newval) { |
|||
|
|||
this.setData({ |
|||
classTwoId: newval |
|||
}) |
|||
}, |
|||
deep: true |
|||
}, |
|||
title :{ |
|||
handler(newval) { |
|||
|
|||
// debugger |
|||
}, |
|||
deep: true |
|||
}, |
|||
}, |
|||
methods: { |
|||
citybottombtn(){ |
|||
this.cityScrollTop = 9999; |
|||
this.citybottom = true; |
|||
}, |
|||
sorTwoTop(){ |
|||
this.scrollTopTwo = 9999; |
|||
this.classtwobottom = true; |
|||
}, |
|||
sorTop(){ |
|||
this.scrollTop = 9999; |
|||
this.classonebottom = true; |
|||
}, |
|||
scrolltolowerst(e){ |
|||
//到底部 |
|||
this.classtwobottom = true; |
|||
}, |
|||
scrolltolowert(e){ |
|||
this.scrollTopTwo = this.topNumbertwo; |
|||
this.classtwobottom = false; |
|||
}, |
|||
classtwoChage(e){ |
|||
console.log(e); |
|||
this.topNumbertwo = e.detail.scrollHeight - 366; |
|||
}, |
|||
scrolltolower(e){ |
|||
// console.log(e); |
|||
this.scrollTop = this.topNumber; |
|||
this.classonebottom = false; |
|||
}, |
|||
scrolltolowers(e){ |
|||
this.classonebottom = true; |
|||
}, |
|||
classoneChage(e){ |
|||
console.log(e); |
|||
this.topNumber = e.detail.scrollHeight - 371; |
|||
}, |
|||
scrolltolowerct(e){ |
|||
console.log('触发了距底'); |
|||
this.citybottom = true; |
|||
}, |
|||
scrolltoupperct(e){ |
|||
console.log('触发了距顶'); |
|||
this.citybottom = false; |
|||
this.cityScrollTop = this.topNumberct; |
|||
}, |
|||
cityChage(e){ |
|||
console.log(e); |
|||
this.topNumberct = e.detail.scrollHeight - 371; |
|||
}, |
|||
getAreaId(index,item){ |
|||
if(item.id == this.areaId) return |
|||
this.areaId = item.id; |
|||
this.$emit('getcityWork',item.id); |
|||
this.SelectInfo.top.map(items=>{ |
|||
if(items.subscript == 'nwe_area' || items.subscript == 'area_id'){ |
|||
items.title = item.name; |
|||
} |
|||
}) |
|||
this.close(); |
|||
}, |
|||
getAreaList(index,item){ |
|||
|
|||
let _this = this; |
|||
|
|||
_this.cityId = item.id; |
|||
_this.areaList = item.dist; |
|||
if(item.dist.length == 0){ |
|||
_this.$emit('getcityWork',item.id); |
|||
_this.areaList = []; |
|||
this.SelectInfo.top.map(items=>{ |
|||
if(items.subscript == 'nwe_area' || items.subscript == 'area_id'){ |
|||
items.title = item.name; |
|||
} |
|||
}) |
|||
return |
|||
} |
|||
if(_this.areaList[0].id == item.id) return |
|||
_this.areaList.unshift({ |
|||
id:item.id, |
|||
name:`全${item.name}`, |
|||
flag:true |
|||
}) |
|||
}, |
|||
getCityList(index,item){ |
|||
let _this = this; |
|||
// console.log(item); |
|||
_this.provinceId = item.id; |
|||
_this.cityList = item.area; |
|||
_this.areaList = []; |
|||
if(!item.id || !_this.cityList[0]){ |
|||
_this.$emit('getcityWork',item.id); |
|||
this.SelectInfo.top.map(items=>{ |
|||
if(items.subscript == 'nwe_area' || items.subscript == 'area_id'){ |
|||
items.title = item.name; |
|||
} |
|||
}) |
|||
return |
|||
} |
|||
if(!!_this.cityList[0] && _this.cityList[0].id == item.id) return |
|||
_this.cityList.unshift({ |
|||
id:item.id, |
|||
name:`全${item.name}`, |
|||
dist:[] |
|||
}); |
|||
|
|||
|
|||
}, |
|||
getCitys(){ |
|||
let _this = this; |
|||
|
|||
_this.provinceList = uni.getStorageSync('cityList'); |
|||
_this.provinceList.unshift({ |
|||
id:'', |
|||
name:'全国', |
|||
area:[] |
|||
}) |
|||
// _this.agencyData.areaid = '' |
|||
console.log(_this.provinceList,_this.agencyData); |
|||
// debugger |
|||
_this.provinceList.map(item=>{ |
|||
if(item.id == _this.agencyData.areaid){ |
|||
_this.getCityList('',item); |
|||
return false |
|||
} |
|||
item.area.map(items=>{ |
|||
if(items.id == _this.agencyData.areaid){ |
|||
_this.getCityList('',item); |
|||
_this.getAreaList('',items); |
|||
return false |
|||
} |
|||
items.dist.map(itemss=>{ |
|||
if(itemss.id == _this.agencyData.areaid){ |
|||
_this.getCityList('',item); |
|||
_this.getAreaList('',items); |
|||
_this.getAreaId('',itemss); |
|||
return false |
|||
} |
|||
}) |
|||
}) |
|||
}) |
|||
|
|||
}, |
|||
getindustryFour(index,items){ |
|||
console.log(this.industryThree[0].id) |
|||
|
|||
this.industryThree.map(item=>{ |
|||
item.checked = false; |
|||
}); |
|||
this.industryThree[index].checked = true; |
|||
this.is_openTabbar = !this.is_openTabbar; |
|||
this.is_openTabbar = !this.is_openTabbar; |
|||
this.SelectInfo.top.map(item=>{ |
|||
if(item.subscript == 'industry' || item.subscript == 'education'){ |
|||
item.title = items.title; |
|||
} |
|||
}) |
|||
if(index == 0){ |
|||
this.industryID = [this.industryID[0],this.industryID[1],'']; |
|||
this.$emit('getResumeList',this.industryID); |
|||
return |
|||
}else{ |
|||
this.industryID = [this.industryID[0],this.industryID[1],this.industryThree[index].id]; |
|||
this.$emit('getResumeList',this.industryID); |
|||
}; |
|||
this.is_openTabbar = false; |
|||
this.currentType = null; |
|||
}, |
|||
getindustryThree(index,items){ |
|||
// debugger |
|||
this.industryThree = []; |
|||
this.industryTwo.map(item=>{ |
|||
item.checked = false; |
|||
}) |
|||
this.industryTwo[index].checked = true; |
|||
this.is_openTabbar = !this.is_openTabbar; |
|||
this.is_openTabbar = !this.is_openTabbar; |
|||
|
|||
if(index == 0){ |
|||
this.industryID = [this.industryID[0],'','']; |
|||
this.$emit('getResumeList',this.industryID); |
|||
return |
|||
}else{ |
|||
this.industryID = [this.industryID[0],this.industryTwo[index].id,''] |
|||
} |
|||
this.SelectInfo.top.map(item=>{ |
|||
if(item.subscript == 'industry' || item.subscript == 'education'){ |
|||
item.title = items.title; |
|||
// debugger |
|||
} |
|||
}) |
|||
let data={ |
|||
type:3, |
|||
pid:this.industryTwo[index].id |
|||
} |
|||
App._post_form('&'+ this.SelectInfo.industry, data, res => { |
|||
console.log(res); |
|||
this.industryThree = res.data; |
|||
if(res.data.length != 0){ |
|||
this.industryThree.unshift({ |
|||
id:'0', |
|||
title:'全部' |
|||
}) |
|||
} |
|||
this.getindustryFour(0,this.industryThree[0]); |
|||
}) |
|||
}, |
|||
getindustryTwo(index,items){ |
|||
this.industryTwo = []; |
|||
this.industryThree = []; |
|||
this.industryOne.map(item=>{ |
|||
item.checked = false; |
|||
}); |
|||
this.industryOne[index].checked = true; |
|||
this.is_openTabbar = !this.is_openTabbar; |
|||
this.is_openTabbar = !this.is_openTabbar; |
|||
this.SelectInfo.top.map(item=>{ |
|||
if(item.subscript == 'industry' || item.subscript == 'education'){ |
|||
item.title = items.title; |
|||
} |
|||
}) |
|||
if(index == 0){ |
|||
this.industryID = ['','','']; |
|||
this.$emit('getResumeList',this.industryID); |
|||
return |
|||
}else{ |
|||
this.industryID = [this.industryOne[index].id,'',''] |
|||
} |
|||
|
|||
// this. |
|||
let data={ |
|||
type:2, |
|||
pid:this.industryOne[index].id |
|||
} |
|||
App._post_form('&'+ this.SelectInfo.industry, data, res => { |
|||
console.log(res); |
|||
|
|||
this.industryTwo = res.data; |
|||
if(res.data.length != 0){ |
|||
this.industryTwo.unshift({ |
|||
id:'0', |
|||
title:'全部' |
|||
}) |
|||
}; |
|||
// console.log(index) |
|||
// debugger |
|||
this.getindustryThree(0,this.industryTwo[0]); |
|||
}) |
|||
}, |
|||
openTabbar(subscript) { |
|||
let _this = this; |
|||
if (this.isPageScroll === '1') { |
|||
this.$emit('pageScrollHeight', '1') |
|||
} |
|||
this.is_openTabbar = true; |
|||
this.currentType = subscript; |
|||
this.$nextTick(function(){ |
|||
const query = uni.createSelectorQuery().in(_this); |
|||
query.select('.pop-content').boundingClientRect(data => { |
|||
console.log(data,2333333) |
|||
_this.boxHeight = data.height; |
|||
}).exec(); |
|||
}) |
|||
}, |
|||
close() { |
|||
if (this.isPageScroll === '1') { |
|||
this.$emit('pageScrollHeight', '0') |
|||
} |
|||
this.is_openTabbar = false; |
|||
this.currentType = null; |
|||
}, |
|||
getindustry(url){ |
|||
// |
|||
this.industryOne = []; |
|||
this.industryTwo = []; |
|||
this.industryThree = []; |
|||
App._post_form('&'+ url, { |
|||
}, res => { |
|||
console.log(res); |
|||
this.industryOne = res.data; |
|||
this.industryOne.unshift({ |
|||
id:'0', |
|||
title:'全部' |
|||
}) |
|||
this.industryOne.map(item=>{ |
|||
item.checked = false |
|||
}); |
|||
// this.industryOne[0].checked = true; |
|||
this.getindustryTwo(0,this.industryOne[0]); |
|||
}) |
|||
}, |
|||
getSelectInfo() { |
|||
let _this = this, |
|||
agencyData = uni.getStorageSync('agencyData'), |
|||
url = `&do=SelectInfo&type=${_this.requestType}&cate_one=${_this.cate_one}&cate_two=${_this.cate_two}`; |
|||
if(_this.requestType == '服务列表'){ |
|||
url = `&p=housekeep&do=housekeepSelectInfo&type=2` |
|||
}else if(_this.requestType == '需求列表'){ |
|||
url = `&p=housekeep&do=housekeepSelectInfo&type=1` |
|||
} else if(_this.requestType == '文章头条'){ |
|||
url = `&p=headline&do=headlineSelectInfo` |
|||
} |
|||
|
|||
App._post_form(url, { |
|||
|
|||
}, res => { |
|||
let SelectInfo = res.data; |
|||
let title; |
|||
if(res.data.class){ |
|||
|
|||
res.data.class.map(item=>{ |
|||
if(item.cate_one == _this.cate_one){ |
|||
_this.$emit('selectClassid', item); |
|||
// debugger |
|||
if(item.list.length > 0){ |
|||
item.list.map(items=>{ |
|||
if(items.cate_two == _this.cate_two){ |
|||
// debugger |
|||
_this.$emit('selectClassTwoid', items) |
|||
// debugger |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
if(res.data.orders){ |
|||
setTimeout(()=>{ |
|||
_this.getOrderId(res.data.orders[0]); |
|||
|
|||
_this.getCitys(); |
|||
}) |
|||
_this.$emit('getOrderId', SelectInfo.orders[0].val,title); |
|||
} |
|||
// 相亲新增 |
|||
if(res.data.sort) { |
|||
setTimeout(() => { |
|||
_this.getSortId(res.data.sort[0]); |
|||
_this.getCitys(); |
|||
_this.getGnederId(res.data.gneder[0]); |
|||
}) |
|||
_this.$emit('getSortId', SelectInfo.sort[0].val,title); |
|||
} |
|||
|
|||
if (!!SelectInfo.area) { |
|||
_this.getCityarea(SelectInfo.area,true); |
|||
SelectInfo.top.map(item=>{ |
|||
if(item.subscript == 'area'){ |
|||
item.title = agencyData.areaname; |
|||
} |
|||
}) |
|||
} |
|||
if(!!SelectInfo.industry){ |
|||
_this.getindustry(SelectInfo.industry); |
|||
} |
|||
if(SelectInfo.top.length > 3){ |
|||
_this.$emit('getmore',SelectInfo); |
|||
} |
|||
if(_this.SelectInfo.orders) { |
|||
_this.setData({ |
|||
orderId: SelectInfo.orders[0].val |
|||
}) |
|||
} |
|||
_this.setData({ |
|||
SelectInfo |
|||
}); |
|||
// _this.SelectInfo.top.splice(0) |
|||
}) |
|||
}, |
|||
allCityarea(cityType = 'all') { |
|||
let _this = this; |
|||
if (cityType === 'all') { |
|||
_this.$emit('selectAllarea') |
|||
let tabbarList = _this.SelectInfo.top, |
|||
tabIndex = tabbarList.findIndex(item => item.subscript === 'area'); |
|||
tabbarList[tabIndex].title = '全部'; |
|||
_this.setData({ |
|||
is_openTabbar: false, |
|||
currentType: null, |
|||
city_id: "", |
|||
isAllarea: true |
|||
}) |
|||
} else { |
|||
_this.setData({ |
|||
isAllarea: false |
|||
}) |
|||
} |
|||
}, |
|||
getCityarea(requestUrl,flag) { |
|||
let _this = this, |
|||
agencyData = uni.getStorageSync('agencyData'), |
|||
doUrl = '&' + requestUrl; |
|||
App._post_form(doUrl, { |
|||
city_id: agencyData.areaid |
|||
}, res => { |
|||
_this.setData({ |
|||
cityData: res.data, |
|||
city_id: agencyData.areaid, |
|||
}) |
|||
_this.cityData.list.map(item=>{ |
|||
if(item.select == 1){ |
|||
_this.$emit('selectAreaid', item,flag); |
|||
} |
|||
}) |
|||
}) |
|||
}, |
|||
async getcityId(cityItem) { |
|||
let _this = this; |
|||
_this.SelectInfo.class = await _this.getCityClass(cityItem.id); |
|||
_this.$emit('selectAreaid', cityItem); |
|||
_this.setData({ |
|||
is_openTabbar: false, |
|||
currentType: null, |
|||
city_id: cityItem.id, |
|||
}) |
|||
let tabbarList = _this.SelectInfo.top, |
|||
tabIndex = tabbarList.findIndex(item => item.subscript === 'area'); |
|||
tabbarList[tabIndex].title = cityItem.name; |
|||
}, |
|||
getCityClass(areaid){ |
|||
let _this = this; |
|||
let data = { |
|||
is_two: 1, |
|||
is_set: 0, |
|||
is_ios: 0, |
|||
areaid:areaid.id ||areaid |
|||
}; |
|||
// debugger |
|||
return new Promise((resolve, reject) => { |
|||
let all = { |
|||
id:'0', |
|||
name:'全部', |
|||
title:'全部', |
|||
list:[] |
|||
} |
|||
App._post_form('&p=pocket&do=classList', data, res => { |
|||
if(JSON.stringify(res.data) != '[]'){ |
|||
res.data.list.unshift(all) |
|||
res.data.list.map((item,index)=>{ |
|||
item.name = item.title; |
|||
if(index == 0){ |
|||
_this.$emit('selectClassid', item); |
|||
} |
|||
if(item.list.length > 0){ |
|||
item.list.map((items,indexs)=>{ |
|||
items.name = items.title; |
|||
if(indexs == 0){ |
|||
_this.$emit('selectClassTwoid', items) |
|||
} |
|||
}) |
|||
} |
|||
}); |
|||
resolve(res.data.list); |
|||
_this.getclassOneId(all) |
|||
}else{ |
|||
resolve(_this.SelectInfo.class); |
|||
} |
|||
|
|||
|
|||
}); |
|||
}) |
|||
|
|||
}, |
|||
getclassOneId(classItem) { |
|||
let _this = this; |
|||
_this.$emit('selectClassid', classItem) |
|||
if (!(!!classItem.list) || (!!classItem.list && classItem.list.length === 0)) { |
|||
_this.setData({ |
|||
is_openTabbar: false, |
|||
currentType: null, |
|||
classTwoId: "" |
|||
}) |
|||
} |
|||
_this.setData({ |
|||
classOneId: !!classItem.cate_one ? classItem.cate_one : classItem.id |
|||
}); |
|||
let tabbarList = _this.SelectInfo.top, |
|||
tabIndex = tabbarList.findIndex(item => item.subscript === 'class'); |
|||
tabbarList[tabIndex].title = classItem.name; |
|||
}, |
|||
getclassTwoId(classTwoItem) { |
|||
let _this = this; |
|||
// debugger |
|||
_this.$emit('selectClassTwoid', classTwoItem); |
|||
|
|||
_this.setData({ |
|||
classTwoId: !!classTwoItem.id ? classTwoItem.id : classTwoItem.cate_two, |
|||
is_openTabbar: false, |
|||
currentType: null |
|||
}) |
|||
let tabbarList = _this.SelectInfo.top, |
|||
tabIndex = tabbarList.findIndex(item => item.subscript === 'class'); |
|||
tabbarList[tabIndex].title = classTwoItem.name; |
|||
}, |
|||
getOrderId(orderItem) { |
|||
let _this = this; |
|||
|
|||
_this.$emit('selectOrders', orderItem) |
|||
_this.setData({ |
|||
orderId: orderItem.val, |
|||
is_openTabbar: false, |
|||
currentType: null |
|||
}) |
|||
let tabbarList = _this.SelectInfo.top, |
|||
tabIndex = tabbarList.findIndex(item => item.subscript === 'orders'); |
|||
tabbarList[tabIndex].title = orderItem.title; |
|||
console.log(tabbarList[tabIndex].title,'tabbarList[tabIndex].title') |
|||
}, |
|||
// 相亲模块新增 |
|||
getSortId(sortItem) { |
|||
let _this = this |
|||
_this.$emit('selectSort',sortItem) |
|||
_this.setData({ |
|||
sortId: sortItem.val, |
|||
is_openTabbar: false, |
|||
currentType: null |
|||
}) |
|||
let tabbarList = _this.SelectInfo.top, |
|||
tabIndex = tabbarList.findIndex(item => item.subscript === 'sort'); |
|||
tabbarList[tabIndex].title = sortItem.title; |
|||
}, |
|||
getGnederId(gneterItem) { |
|||
let _this = this |
|||
_this.$emit('selectGneder',gneterItem) |
|||
_this.setData({ |
|||
gnederId: gneterItem.val, |
|||
is_openTabbar: false, |
|||
currentType: null |
|||
}) |
|||
let tabbarList = _this.SelectInfo.top, |
|||
tabIndex = tabbarList.findIndex(item => item.subscript === 'gneder'); |
|||
tabbarList[tabIndex].title = gneterItem.title; |
|||
} |
|||
}, |
|||
computed: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.pop-mask { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: 997; |
|||
background: rgba(0, 0, 0, .5); |
|||
} |
|||
|
|||
.isPageScroll { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
z-index: 999; |
|||
} |
|||
|
|||
.tabBar-list { |
|||
height: 80upx; |
|||
line-height: 80upx; |
|||
position: relative; |
|||
z-index: 997; |
|||
// border-bottom: 1upx solid #eeeeee; |
|||
} |
|||
|
|||
|
|||
.pop-content { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 80upx; |
|||
z-index: 998; |
|||
opacity: 0; |
|||
visibility: 0; |
|||
transition: all .25s ease-in; |
|||
// transform: translateY(-400upx); |
|||
border-radius: 0upx 0upx 30upx 30upx; |
|||
border-top: 1upx solid #eeeeee; |
|||
padding-top: 0 !important; |
|||
padding-bottom: 0!important; |
|||
// margin-top: 30upx; |
|||
} |
|||
|
|||
.pop-content.show { |
|||
width: 100vw; |
|||
max-height: 830upx; |
|||
opacity: 1; |
|||
visibility: 1; |
|||
// transform: translateY(18%); |
|||
} |
|||
|
|||
.cityScroll { |
|||
width: 50%; |
|||
max-height: 740upx; |
|||
} |
|||
|
|||
.classScroll { |
|||
width: 100%; |
|||
max-height: 780upx; |
|||
overflow-y: scroll; |
|||
position: relative; |
|||
} |
|||
|
|||
.left{ |
|||
// position: absolute; |
|||
// bottom: 10upx; |
|||
// left: 30upx; |
|||
flex: 1; |
|||
text-align: center; |
|||
image{ |
|||
width: 30upx; |
|||
height: 30upx; |
|||
} |
|||
// background-color: #ff4444; |
|||
} |
|||
.right{ |
|||
// text-align: center; |
|||
position: relative; |
|||
image{ |
|||
width: 30upx; |
|||
height: 30upx; |
|||
margin: auto; |
|||
position: absolute; |
|||
left: 22%; |
|||
top: 10upx; |
|||
transform: translateX(-50%); |
|||
|
|||
} |
|||
} |
|||
|
|||
.city-list-item:last-child { |
|||
margin: 0 !important; |
|||
} |
|||
|
|||
.class_listOne { |
|||
overflow-y: scroll; |
|||
} |
|||
|
|||
.class_Twolist { |
|||
z-index: 1000; |
|||
position: fixed; |
|||
left: 50%; |
|||
top: 80upx; |
|||
width: 100%; |
|||
max-height: 798upx; |
|||
// border-left: 1upx solid #eeeeee; |
|||
padding-left: 30upx; |
|||
padding-top: 30upx; |
|||
padding-bottom: 54upx; |
|||
} |
|||
|
|||
.class_TwoScroll { |
|||
width: 100%; |
|||
max-height: 730upx; |
|||
} |
|||
|
|||
.tabBar-itemTitle { |
|||
width: auto; |
|||
} |
|||
.industry-item{ |
|||
padding: 5upx 10upx; |
|||
width: 200upx; |
|||
line-height: 100upx; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,313 @@ |
|||
<template> |
|||
<view class="follow"> |
|||
<!-- 头部引导关注 --> |
|||
<!-- --> |
|||
<view class="followTitle" v-if="followType == '0'&&followTitleShow==true&&followInfo.status != 0"> |
|||
<view class="followTitlePackage"> |
|||
<view class="followImage"><image :src="platformInfor.logo"></image></view> |
|||
<view class="followInfomation"> |
|||
<view :style="followInfo.korea != 1?'overflow: hidden;text-overflow: ellipsis;white-space: nowrap;':''"> |
|||
<text>{{followInfo.korea == 1?'나의 소식 전하는 한밥상~':'欢迎进入'}}</text> |
|||
<text class="followText" v-if="followInfo.korea != 1">{{ platformInfor.name }}</text> |
|||
</view> |
|||
<view><text>{{followInfo.korea == 1?'가끔 한밥상 필요할때가 있습니다!':'关注公众号，享专属服务'}}</text></view> |
|||
</view> |
|||
<view class="followButton" @click="openQrShow"><text>{{followInfo.korea == 1?'팔로우':'立即关注'}}</text></view> |
|||
</view> |
|||
<view class="followTitleClose" @click="closeFollowTitle"><image :src="imgfixUrls + 'merchant/followClose.png'"></image></view> |
|||
</view> |
|||
<!-- 头部引导关注 --> |
|||
<PopManager :show="followShow" :type="type" @clickmask="closePop"> |
|||
<view class="qrCenter" v-if="(followType == '0') && followInfo.status!='0'"> |
|||
<view class="qrCenterTitle"><text>长按二维码，关注我们</text></view> |
|||
<view class="qrCenterMain"> |
|||
<view class="qrCenterMainPackage"><image :src="followInfo.gzimage"></image></view> |
|||
</view> |
|||
</view> |
|||
<view v-if="followType != '0'&&followInfo.status!='0'" class="qrBottom" > |
|||
<view class="qrBottomTitle"> |
|||
<view class="qrBottomImage"> |
|||
<image :src="followInfo.gzimage"></image> |
|||
</view> |
|||
<view class="qrBottomTip"> |
|||
<text>长按识别，扫码关注</text> |
|||
</view> |
|||
</view> |
|||
<view class="qrBottomFoot" @click="closePop" > |
|||
<view class="qrBottomButton"> |
|||
<text>取消</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</PopManager> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from '@/common/js/app.js'; |
|||
|
|||
// #ifdef H5 |
|||
import wxApi from '@/common/js/wxApi.js'; |
|||
// #endif |
|||
import PopManager from '@/components/template/PopManager'; |
|||
export default { |
|||
components: { |
|||
PopManager |
|||
}, |
|||
props: { |
|||
shareId:{ |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
followShow: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
followType: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
followTitleShow:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
followData:{ |
|||
type: Object, |
|||
default:null |
|||
} |
|||
}, |
|||
watch:{ |
|||
'followData': { |
|||
handler(newData, oldData) {
this.followInfo = newData;
}, |
|||
deep: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
type: null, |
|||
platformInfor: {}, |
|||
followInfo: { |
|||
status: 0 |
|||
}, |
|||
img:'' |
|||
}; |
|||
}, |
|||
mounted() { |
|||
let _this = this; |
|||
// _this.img = this.imgfixUrl; |
|||
if (_this.followType == '0') { |
|||
_this.type = 'center'; |
|||
} else { |
|||
_this.type = 'bottom'; |
|||
} |
|||
_this.platformInfor = uni.getStorageSync('platformInfor'); |
|||
_this.init(); |
|||
}, |
|||
methods: { |
|||
closePop() { |
|||
let _this = this; |
|||
_this.$emit('closeFollowPop'); |
|||
}, |
|||
closeFollowTitle(){ |
|||
let _this = this; |
|||
_this.$emit('closeFollowTitle'); |
|||
}, |
|||
init() { |
|||
let _this = this; |
|||
_this.getFollow(); |
|||
}, |
|||
// 关注接口 |
|||
getFollow() { |
|||
let _this = this; |
|||
|
|||
// debugger |
|||
if(_this.followType == '10') return; |
|||
let data = { |
|||
type: _this.followType, |
|||
id:_this.shareId||'' |
|||
}; |
|||
App._post_form('&do=Follow', data, res => { |
|||
_this.followInfo = res.data; |
|||
}); |
|||
}, |
|||
openQrShow() { |
|||
let _this = this; |
|||
_this.$emit('clickmask'); |
|||
let locations = location.href; |
|||
let data={ |
|||
url:locations |
|||
}; |
|||
App._post_form('&do=TopFollow', data, res => { |
|||
console.info(res.data); |
|||
// _this.followInfo = res.data; |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.qrBottomTip{ |
|||
margin-top: 30upx; |
|||
text-align: center; |
|||
>text{ |
|||
font-size:24upx; |
|||
color:rgba(102,102,102,1); |
|||
} |
|||
} |
|||
.qrBottomImage{ |
|||
margin: 50upx auto 0 auto; |
|||
width: 300upx; |
|||
height: 300upx; |
|||
>image{ |
|||
width: 300upx; |
|||
height: 300upx; |
|||
} |
|||
} |
|||
.qrBottomTitle{ |
|||
border: 1upx solid rgba(0,0,0,0); |
|||
width: 750upx; |
|||
height: 480upx; |
|||
background: #FFFFFF; |
|||
} |
|||
.qrBottomButton{ |
|||
margin:20upx auto 0 auto; |
|||
width: 700upx; |
|||
height: 80upx; |
|||
text-align: center; |
|||
background:rgba(245,245,245,1); |
|||
border:1upx solid rgba(204,204,204,1); |
|||
border-radius:10upx; |
|||
>text{ |
|||
line-height: 80upx; |
|||
font-size:30upx; |
|||
color:rgba(51,51,51,1); |
|||
} |
|||
} |
|||
.qrBottomFoot{ |
|||
box-shadow: 10upx 20upx 20upx 20upx rgba(245,245,245,1); |
|||
border: 1upx solid rgba(0,0,0,0); |
|||
width: 750upx; |
|||
height: 120upx; |
|||
background: #FFFFFF; |
|||
text-align: center; |
|||
} |
|||
.qrBottom{ |
|||
border: 1upx solid rgba(0,0,0,0); |
|||
width: 750upx; |
|||
height: 600upx; |
|||
background: #F6F6F6; |
|||
} |
|||
.followTitleClose { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
width: 70upx; |
|||
height: 70upx; |
|||
> image { |
|||
width: 70upx; |
|||
height: 70upx; |
|||
} |
|||
} |
|||
.qrCenterMainPackage { |
|||
padding: 30upx; |
|||
> image { |
|||
width: 520upx; |
|||
height: 510upx; |
|||
} |
|||
} |
|||
.qrCenterMain { |
|||
height: 570upx; |
|||
background: #ffffff; |
|||
} |
|||
.qrCenterTitle { |
|||
height: 80upx; |
|||
text-align: center; |
|||
> text { |
|||
line-height: 80upx; |
|||
font-size: 30upx; |
|||
color: rgba(51, 51, 51, 1); |
|||
} |
|||
} |
|||
.qrCenter { |
|||
overflow: hidden; |
|||
border-radius: 10upx; |
|||
width: 580upx; |
|||
height: 650upx; |
|||
background: #eeeeee; |
|||
} |
|||
.followButton { |
|||
margin-left: 10upx; |
|||
display: inline-block; |
|||
width: 130upx; |
|||
padding: 0 10upx; |
|||
height: 60upx; |
|||
border-radius: 10upx; |
|||
vertical-align: middle; |
|||
text-align: center; |
|||
background: rgba(255, 68, 68, 1); |
|||
> text { |
|||
font-size: 28upx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(255, 255, 255, 1); |
|||
line-height: 60upx; |
|||
} |
|||
} |
|||
.followTitlePackage { |
|||
position: relative; |
|||
padding: 15upx 30upx; |
|||
} |
|||
.followInfomation { |
|||
width: 400upx; |
|||
margin-left: 20upx; |
|||
vertical-align: middle; |
|||
display: inline-block; |
|||
|
|||
> view { |
|||
width: 400upx; |
|||
// overflow: hidden; |
|||
// text-overflow: ellipsis; |
|||
// white-space: nowrap; |
|||
|
|||
> text { |
|||
display: inline-block; |
|||
font-size: 28upx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(255, 255, 255, 1); |
|||
|
|||
} |
|||
} |
|||
} |
|||
.followText { |
|||
font-size: 28upx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(255, 68, 68, 1) !important; |
|||
} |
|||
.followImage { |
|||
vertical-align: middle; |
|||
display: inline-block; |
|||
width: 100upx; |
|||
height: 100upx; |
|||
border-radius: 10upx; |
|||
overflow: hidden; |
|||
> image { |
|||
width: 100upx; |
|||
height: 100upx; |
|||
} |
|||
} |
|||
.follow { |
|||
font-size: 0; |
|||
} |
|||
.followTitle { |
|||
z-index: 200; |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 750upx; |
|||
min-height: 130upx; |
|||
background: black; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,89 @@ |
|||
<template> |
|||
<view> |
|||
<view class="footer"> |
|||
<view class="footer-l"> |
|||
<image class="image" :src="appInfo.logo" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="footer-c"> |
|||
<view class="p">{{ appInfo.name }} 出品</view> |
|||
<view class="p">合作电话: {{ appInfo.phone }}</view> |
|||
</view> |
|||
<view class="footer-r"> |
|||
<view class="span" @click="cell"><text class="i icon iconfont icon-tongxun inline"></text>拨打</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data () { |
|||
return { |
|||
appInfo: {} |
|||
} |
|||
}, |
|||
mounted () { |
|||
if(this.$store.state.appInfo !== ''){ |
|||
this.appInfo = this.$store.state.appInfo |
|||
} |
|||
}, |
|||
methods: { |
|||
cell (e) { |
|||
let _this = this |
|||
uni.makePhoneCall({ |
|||
phoneNumber: _this.appInfo.phone |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.footer { |
|||
width: auto; |
|||
margin: 0 auto; |
|||
padding: 90upx 30upx 30upx 30upx; |
|||
display: -webkit-flex; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
.footer-l { |
|||
width: 84upx; |
|||
height: 84upx; |
|||
border-radius: 6upx; |
|||
} |
|||
.footer-l .image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.footer-c .p { |
|||
height: 42upx; |
|||
line-height: 42upx; |
|||
font-size: 26upx; |
|||
padding: 0 20upx; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
.footer-r { |
|||
display: -webkit-flex; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.footer-r .span { |
|||
height: 48upx; |
|||
line-height: 46upx; |
|||
font-size: 26upx; |
|||
color: #232323; |
|||
text-align: center; |
|||
background-color: #FFD93F; |
|||
padding: 0 16upx; |
|||
border-radius: 6upx; |
|||
display: block; |
|||
z-index: 1; |
|||
} |
|||
.footer-r .i { |
|||
color: #666; |
|||
font-size: 26upx; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,146 @@ |
|||
<template> |
|||
<view class="getVXphone"> |
|||
<popup-view :show="show" type="center" @clickmask="shows"> |
|||
<view class="b-f" style="width: 70vw;height: 40vh;border-radius: 15upx;"> |
|||
<image :src="imgfixUrls + 'merchant/addPhone.png'" style="width: 100%;height: 100upx;" /> |
|||
<view class="t-c f-36 f-w" style="padding: 30upx 0;"> |
|||
请确认授权绑定手机号 |
|||
</view> |
|||
<view class="dis-flex" style="padding-top: 100upx;"> |
|||
<view class="flex-box" style="padding: 15upx 20upx;"> |
|||
<button type="default" style="height: 70upx;line-height: 70upx;" @click="shows">取消</button> |
|||
</view> |
|||
<view class="flex-box" style="padding: 15upx 20upx;"> |
|||
<button type="primary" style="height: 70upx;line-height: 70upx;" @click="test()" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">确定</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</popup-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from '@/common/js/app.js' |
|||
import PopupView from '@/components/template/PopManager.vue'; |
|||
export default{ |
|||
components:{ |
|||
PopupView |
|||
}, |
|||
data(){ |
|||
return{ |
|||
code:'' |
|||
} |
|||
}, |
|||
props:{ |
|||
show:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
}, |
|||
methods:{ |
|||
shows(){ |
|||
this.$emit('showFalse') |
|||
}, |
|||
test(){ |
|||
let _this = this; |
|||
uni.login({ |
|||
provider: 'weixin', |
|||
scopes: 'auth_user', |
|||
success(res) { |
|||
_this.code = res.code; |
|||
// App._post_form('&p=member&do=getSessionKey', {code:res.code}, reson => { |
|||
// = res.code; |
|||
// }) |
|||
} |
|||
}) |
|||
}, |
|||
getPhoneNumber(e) { |
|||
let _this = this; |
|||
_this.shows(); |
|||
console.log(e) |
|||
if (e.detail.errMsg === "getPhoneNumber:ok") { |
|||
|
|||
uni.checkSession({ |
|||
success() { |
|||
console.info('登陆有效'); |
|||
let postData = { |
|||
data: e.detail.encryptedData, |
|||
iv: e.detail.iv, |
|||
code:_this.code |
|||
}; |
|||
App._post_form('&p=member&do=phoneDecrypt', postData, res => { |
|||
let a = res.data.phone.slice(0, 3); |
|||
let b = res.data.phone.slice(7, 11); |
|||
let mobile = res.data.phone; |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '确定绑定手机' + a + '****' + b + '?', |
|||
success: function(res) { |
|||
if (res.confirm) { |
|||
let data = { |
|||
mobile: mobile |
|||
}; |
|||
App._post_form( |
|||
'&p=member&do=changeMobile', |
|||
data, |
|||
res => { |
|||
uni.showToast({ |
|||
icon: 'none', |
|||
title: '绑定成功', |
|||
duration: 2000 |
|||
}); |
|||
// setTimeout(()=>{ |
|||
_this.$emit('showFalse',true) |
|||
// },2000) |
|||
|
|||
}, |
|||
res => { |
|||
uni.showModal({ |
|||
title: '友情提示', |
|||
content: res.data.message, |
|||
showCancel: true, |
|||
success(res) { |
|||
if (res.confirm) { |
|||
let data = { |
|||
mobile: mobile, |
|||
mergeflag: 1 |
|||
}; |
|||
App._post_form('&p=member&do=changeMobile', data, res => { |
|||
uni.showToast({ |
|||
icon: 'none', |
|||
title: '修改成功', |
|||
duration: 2000 |
|||
}); |
|||
uni.setStorageSync('weliam_user_token', res.data.token) |
|||
}); |
|||
} else if (res.cancel) { |
|||
|
|||
} |
|||
} |
|||
}); |
|||
} |
|||
); |
|||
} else if (res.cancel) {} |
|||
} |
|||
}); |
|||
}); |
|||
}, |
|||
fail() { |
|||
console.info('登陆失效'); |
|||
App.navigationTo({ |
|||
url: 'pages/mainPages/login/minLogin' |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
|
|||
} else { |
|||
App.showError('手机号绑定取消') |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -0,0 +1,78 @@ |
|||
<!-- 商品头部标题 --> |
|||
<template> |
|||
<view class="containar-title t-c dis-flex flex-x-center m-btm60"> |
|||
<view class="containar-title-left lace-style p-r"> |
|||
<view class="lace-1"></view> |
|||
<view class="lace-2"></view> |
|||
</view> |
|||
<view class="contar-titleBox f-30 col-3">{{titleName}}</view> |
|||
<view class="containar-title-right lace-style p-r"> |
|||
<view class="lace-1"></view> |
|||
<view class="lace-2"></view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
props: { |
|||
titleName: { |
|||
type: String, |
|||
default: function(){ |
|||
return '暂无标题' |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 标题花边样式 */ |
|||
uni-view{ |
|||
overflow: inherit; |
|||
} |
|||
.containar-title-right,.containar-title-left{ |
|||
flex: 1; |
|||
} |
|||
.lace-style .lace-1 { |
|||
position: absolute; |
|||
/* left: 35%; */ |
|||
top: 14upx; |
|||
width: 14upx; |
|||
height: 14upx; |
|||
background: rgba(255, 68, 68, 1); |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.lace-style .lace-2 { |
|||
position: absolute; |
|||
/* left: 34%; */ |
|||
top: 18upx; |
|||
width: 14upx; |
|||
height: 14upx; |
|||
background: rgba(255, 68, 68, 1); |
|||
opacity: 0.2; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.containar-title-left .lace-1 { |
|||
right: 7%; |
|||
} |
|||
|
|||
.containar-title-right .lace-1 { |
|||
left: 7%; |
|||
} |
|||
|
|||
.containar-title-left .lace-2 { |
|||
right: 28upx; |
|||
} |
|||
|
|||
.containar-title-right .lace-2 { |
|||
left: 28upx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,181 @@ |
|||
<template> |
|||
<view> |
|||
<view class="goodslist"> |
|||
<view class="goodslist-i" v-for="(item, key) in goodsList" :key="key" @click="navgateTo(item.jump_link)"> |
|||
<!-- <navigator class="a" :url="'/pagesBuy/rushdetail/index?i='+item.id+'&c='+item.type" hover-class="none"> --> |
|||
<view class="goodslist-i-t"> |
|||
<image class="image" :src="item.logo" mode="aspectFill"></image> |
|||
</view> |
|||
<!-- </navigator> --> |
|||
<view class="goodslist-i-c"> |
|||
<view class="goodslist-i-c-t"> |
|||
<view class="goodslist-i-c-t-l">{{ item.store_name }}</view> |
|||
<view class="goodslist-i-c-t-r">{{ item.distance }}</view> |
|||
</view> |
|||
<view class="goodslist-i-c-c"> |
|||
<!-- <navigator class="a" :url="'/pagesBuy/rushdetail/index?i='+item.id+'&c='+item.type" hover-class="none"> --> |
|||
<view class="i">{{ item.group }}</view>{{ item.name }} |
|||
<!-- </navigator> --> |
|||
</view> |
|||
<view class="goodslist-i-c-c2"> |
|||
<view class="h1">{{ item.price }} |
|||
<view class="i inline">元</view> |
|||
</view> |
|||
<view class="h2" v-if="item.levelnum > 0"> |
|||
<view class="a" >购买</view> |
|||
</view> |
|||
<view class="h2 sell-out" v-if="item.levelnum == 0">已售罄</view> |
|||
</view> |
|||
<view class="goodslist-i-c-b"> |
|||
<view class="p"> |
|||
<view class="span" style="text-decoration:line-through;">市场价{{ item.oldprice }}</view> |
|||
<view class="em">{{ item.buyNum }}人购买</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from '@/common/js/app.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
props: ['goodsList'], |
|||
|
|||
methods: { |
|||
navgateTo(url) { |
|||
App.navigationTo({ |
|||
url |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.goodslist-i { |
|||
margin-top: 50upx; |
|||
} |
|||
|
|||
.goodslist-i:first-child { |
|||
margin-top: 0; |
|||
} |
|||
|
|||
.goodslist-i-t { |
|||
width: calc(100vw - 60upx); |
|||
height: calc((100vw - 60upx) / 1.8); |
|||
} |
|||
|
|||
.goodslist-i-t .image { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 4upx; |
|||
} |
|||
|
|||
.goodslist-i-c-t { |
|||
color: #999; |
|||
font-size: 24upx; |
|||
margin-top: 20upx; |
|||
display: -webkit-flex; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.goodslist-i-c-t-l { |
|||
padding-right: 20upx; |
|||
-webkit-flex-shrink: 1; |
|||
flex-shrink: 1; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.goodslist-i-c-t-l { |
|||
-webkit-flex: 1; |
|||
flex: 1; |
|||
} |
|||
|
|||
.goodslist-i-c-c { |
|||
line-height: 48upx; |
|||
font-size: 32upx; |
|||
margin-top: 20upx; |
|||
} |
|||
|
|||
.goodslist-i-c-c .i { |
|||
height: 48upx; |
|||
line-height: 48upx; |
|||
font-size: 28upx; |
|||
font-style: normal; |
|||
margin-right: 10upx; |
|||
padding: 0 18upx; |
|||
background-color: #FFD93F; |
|||
border-radius: 4upx; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.goodslist-i-c-c2 { |
|||
margin-top: 20upx; |
|||
display: -webkit-flex; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.goodslist-i-c-c2 .h1 { |
|||
color: #FF4040; |
|||
font-size: 40upx; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.goodslist-i-c-c2 .h1 .i { |
|||
font-size: 24upx; |
|||
font-weight: normal; |
|||
vertical-align: 2upx; |
|||
margin-left: 8upx; |
|||
display: inline-block; |
|||
|
|||
} |
|||
|
|||
.goodslist-i-c-c2 .h2 { |
|||
width: 144upx; |
|||
height: 56upx; |
|||
line-height: 56upx; |
|||
color: #fff; |
|||
font-size: 28upx; |
|||
text-align: center; |
|||
font-weight: normal; |
|||
background-color: #FF4040; |
|||
border-radius: 8upx; |
|||
} |
|||
|
|||
.goodslist-i-c-c2 .sell-out { |
|||
color: #808080; |
|||
background-color: #D2D2D2; |
|||
} |
|||
|
|||
.goodslist-i-c-b { |
|||
margin-top: 20upx; |
|||
} |
|||
|
|||
.goodslist-i-c-b .p { |
|||
color: #999; |
|||
font-size: 24upx; |
|||
margin-top: 6upx; |
|||
display: -webkit-flex; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.goodslist-i-c-b .span { |
|||
text-decoration: line-through; |
|||
} |
|||
|
|||
.goodslist-i-c-b .em { |
|||
font-style: normal; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,193 @@ |
|||
<template> |
|||
<view> |
|||
<view class="haodiantoutiao" v-if="hdttDataArr.length && hdttDataArr.length > 0"> |
|||
<view class="hdtt-t"> |
|||
<view class="hdtt-t-l"> |
|||
<view class="h1">{{ hdttData.params.title }}</view> |
|||
<view class="p">{{ hdttData.params.detailed }}</view> |
|||
</view> |
|||
<view class="hdtt-t-r"> |
|||
<view class="span"> |
|||
<view class="em">{{ swiperI }}</view>/{{ hdttDataArr.length }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="hdtt-c"> |
|||
<swiper :indicator-dots="false" :autoplay="false" :duration="500" autoplay="true" next-margin="30rpx" @change="swiperCg"> |
|||
<block> |
|||
<swiper-item v-for="(item, key) in hdttDataArr" :key="key"> |
|||
<view class="goodstop-i" @click="navgateto(item.id)"> |
|||
<view class="goodstop-i-t"> |
|||
<image class="image" :src="item.display_img" mode="scaleToFill"></image> |
|||
</view> |
|||
<view class="goodstop-i-c"> |
|||
<view class="h1">{{ item.title }}</view> |
|||
<view class="h2">{{ item.summary }}</view> |
|||
<view class="p"> |
|||
<view class="span">{{!!item.one_name || !!item.two_name?'':''}}<view class="i" v-if="item.one_name !== '' && item.one_name !== null">{{ item.one_name }} {{!!item.two_name?'-':''}} </view> |
|||
<view class="i" v-if="item.two_name !== '' && item.two_name !== null">{{ item.two_name }}</view> |
|||
</view> |
|||
<view class="em">阅读 {{ item.browse }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</swiper-item> |
|||
</block> |
|||
</swiper> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from '@/common/js/app.js'; |
|||
export default { |
|||
props: ['hdttData'], |
|||
data() { |
|||
return { |
|||
swiperI: 1, |
|||
hdttDataArr: [] |
|||
} |
|||
}, |
|||
mounted() { |
|||
for (var i in this.hdttData.data) { |
|||
this.hdttDataArr.push(this.hdttData.data[i]) |
|||
} |
|||
}, |
|||
methods: { |
|||
swiperCg(e) { |
|||
this.swiperI = e.detail.current + 1 |
|||
}, |
|||
navgateto(headline_id) { |
|||
App.navigationTo({ |
|||
url: `pages/mainPages/headline/headlineDetail?headline_id=${headline_id}` |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.haodiantoutiao { |
|||
padding-bottom: 30upx; |
|||
} |
|||
|
|||
.hdtt-t { |
|||
padding: 30upx 30upx 0 30upx; |
|||
border-top: 0 solid #f6f6f6; |
|||
display: -webkit-flex; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.hdtt-t .h1 { |
|||
font-weight: normal; |
|||
font-size: 36upx; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.hdtt-t .p { |
|||
color: #999; |
|||
font-size: 24upx; |
|||
margin-top: 10upx; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.hdtt-t-r { |
|||
display: -webkit-flex; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.hdtt-t-r .span { |
|||
font-size: 36upx; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.hdtt-t-r .span .em { |
|||
font-size: 42upx; |
|||
font-style: normal; |
|||
display: inline; |
|||
} |
|||
|
|||
.hdtt-c { |
|||
margin-top: 30upx; |
|||
} |
|||
|
|||
.hdtt-c swiper { |
|||
height: calc((100vw - 60upx) / 1.8 + 228upx); |
|||
} |
|||
|
|||
.goodstop-i { |
|||
padding-left: 30upx; |
|||
} |
|||
|
|||
.goodstop-i-t { |
|||
width: calc(100vw - 60upx); |
|||
height: calc((100vw - 60upx) / 1.8); |
|||
position: relative; |
|||
} |
|||
|
|||
.goodstop-i-t .image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.goodstop-i-c .h1 { |
|||
height: 42upx; |
|||
line-height: 42upx; |
|||
font-size: 32upx; |
|||
font-weight: normal; |
|||
margin-top: 20upx; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.goodstop-i-c .h2 { |
|||
height: 84upx; |
|||
line-height: 42upx; |
|||
font-size: 24upx; |
|||
color: #888; |
|||
font-weight: normal; |
|||
margin-top: 20upx; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
.goodstop-i-c .p { |
|||
height: 42upx; |
|||
line-height: 42upx; |
|||
font-size: 28upx; |
|||
color: #888; |
|||
margin-top: 20upx; |
|||
display: -webkit-flex; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.goodstop-i-c .p .span { |
|||
-webkit-flex-shrink: 1; |
|||
flex-shrink: 1; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.goodstop-i-c .p .span .i { |
|||
display: inline; |
|||
} |
|||
|
|||
.goodstop-i-c .p .em { |
|||
font-style: normal; |
|||
-webkit-flex-shrink: 0; |
|||
flex-shrink: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,160 @@ |
|||
<template> |
|||
<view class="omemaking" @click="navindex"> |
|||
<view class="omemaking-img"> |
|||
<image :src="items.logo" mode=""></image> |
|||
</view> |
|||
<view class="omemaking-content flex-box"> |
|||
<view class="f-28 col-3 f-w dis-flex"> |
|||
<view class="flex-box"> |
|||
{{items.name}} |
|||
</view> |
|||
<image :src="imgfixUrls +'homemakingImg/dunpai.png'" v-if="items.is_authentication == 1" mode=""></image> |
|||
<image :src="imgfixUrls +'homemakingImg/yaoqian.png'" v-if="items.is_bond == 1" mode=""></image> |
|||
</view> |
|||
<view class="p-top-10 omemaking-tags"> |
|||
<view class="omemaking-tags-item" v-for="(item,index) in items.label"> |
|||
{{item}} |
|||
</view> |
|||
</view> |
|||
<view class="dis-flex f-24 col-3 p-top-20"> |
|||
<view class="address"> |
|||
{{items.address}} |
|||
</view> |
|||
<view class="flex-box t-r" v-if="items.distances"> |
|||
{{items.distances}} |
|||
</view> |
|||
</view> |
|||
<view class="service-item" v-for="(item,index) in items.service" @click.stop="navlink(item.id)"> |
|||
<view class="dis-flex t-l f-24 col-3" style="line-height: 45upx;"> |
|||
<image v-if="item.thumb" :src="item.thumb" mode=""></image> |
|||
{{item.title}} |
|||
</view> |
|||
<view class="dis-flex p-top-20"> |
|||
<view class="c-ff4444" style="width: 350upx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> |
|||
<text class="f-24" v-if="item.pricetype == 0"></text> |
|||
<text class="f-24" v-if="item.pricetype == 1">预约金￥</text> |
|||
<text class="f-24" v-if="item.pricetype == 2">￥</text> |
|||
<text class="f-28 f-w" v-if="item.pricetype == 0">{{item.price_text}}</text> |
|||
<text class="f-28 f-w" v-else>{{item.price}}</text> |
|||
<text class="f-24" v-if="item.unit">/{{item.unit}}</text> |
|||
</view> |
|||
<view class="flex-box col-9 f-24 t-r" style="line-height: 50upx;"> |
|||
已售{{item.salenum}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="f-24 t-r" style="padding-top: 20upx;border-top: 1upx solid #EEEEEE;" > |
|||
全部服务 |
|||
</view> --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from '@/common/js/app.js'; |
|||
export default{ |
|||
data(){ |
|||
return{ |
|||
|
|||
} |
|||
}, |
|||
props:{ |
|||
items:{ |
|||
type:Object, |
|||
default:{} |
|||
} |
|||
}, |
|||
watch:{ |
|||
'items': { |
|||
handler(val,oldVal) { |
|||
// debugger |
|||
}, |
|||
deep: true, //对象内部的属性监听，也叫深度监听 |
|||
} |
|||
}, |
|||
methods:{ |
|||
navlink(id){ |
|||
App.navigationTo({
url: "pages/subPages2/homemaking/homemakingDetails/homemakingDetails?id=" + id
}); |
|||
}, |
|||
navindex(){ |
|||
if(!this.items.mid){ |
|||
App.navigationTo({ |
|||
url: "pages/mainPages/store/index?sid=" + this.items.id |
|||
}); |
|||
}else{ |
|||
App.navigationTo({ |
|||
url: "pages/subPages2/homemaking/homepersonalCenter/homepersonalCenter?mid=" + this.items.mid + '&id=' + this.items.id |
|||
}); |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.omemaking{ |
|||
background-color: #FFFFFF; |
|||
display: flex; |
|||
margin-bottom: 20upx; |
|||
padding: 20upx; |
|||
border-radius: 20upx; |
|||
.omemaking-img{ |
|||
width: 140upx; |
|||
height: 140upx; |
|||
border-radius: 20upx; |
|||
margin-right: 30upx; |
|||
image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 20upx; |
|||
} |
|||
} |
|||
.omemaking-content{ |
|||
image{ |
|||
width: 32upx; |
|||
height: 32upx; |
|||
vertical-align: top; |
|||
margin-top: 4upx; |
|||
margin-left: 10upx; |
|||
} |
|||
.address{ |
|||
width: 350upx; |
|||
overflow:hidden; //超出的文本隐藏 |
|||
text-overflow:ellipsis; //溢出用省略号显示 |
|||
white-space:nowrap; //溢出不换行 |
|||
|
|||
} |
|||
} |
|||
.omemaking-tags{ |
|||
height: 50upx; |
|||
overflow: hidden; |
|||
.omemaking-tags-item{ |
|||
// width: 100upx; |
|||
height: 32upx; |
|||
line-height: 32upx; |
|||
text-align: center; |
|||
background-color: #EEEEEE; |
|||
color: #999999; |
|||
font-size: 20upx; |
|||
padding: 0 10upx; |
|||
border-radius: 6upx; |
|||
margin-right: 10upx; |
|||
margin-bottom: 10upx; |
|||
display: inline-block; |
|||
} |
|||
|
|||
} |
|||
.service-item{ |
|||
padding: 20upx 0 0; |
|||
border-top: 1upx solid #EEEEEE; |
|||
margin-top: 20upx; |
|||
image{ |
|||
width: 40upx; |
|||
height: 40upx; |
|||
margin-right: 20upx; |
|||
border-radius: 6upx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,302 @@ |
|||
<template> |
|||
<view class="homemakingOrder"> |
|||
<view class="companyName"> |
|||
<image :src="orderItem.artificerLogo || orderItem.avatar" mode=""></image> |
|||
{{ orderItem.artificerName || orderItem.nickname }} |
|||
<text class="iconfont icon-right" style="font-size: 24upx;padding-left: 10upx;"></text> |
|||
<view |
|||
v-if="orderItem.type == '1' || orderItem.type == '2'" |
|||
class="flex-box c-ff4444 f-28 t-r" |
|||
:style="{ |
|||
color: |
|||
orderItem.status == '0' |
|||
? '#ff4444' |
|||
: orderItem.status ==' 1' |
|||
? '#0099ff' |
|||
: orderItem.status ==' 2' |
|||
? '#ff4444' |
|||
: orderItem.status == '3' |
|||
? '#ff4444' |
|||
: orderItem.status == '5' |
|||
? '#999999' |
|||
: orderItem.status == '1' |
|||
? '#ff4444' |
|||
: orderItem.status == '6' || orderItem.status == '10' |
|||
? '#ff4444' |
|||
: '#999999' |
|||
}" |
|||
> |
|||
<text> |
|||
{{ |
|||
orderItem.status == '0' |
|||
? '未支付' |
|||
: orderItem.status == '1' |
|||
? '待服务' |
|||
: orderItem.status == '2' |
|||
? '待评价' |
|||
: orderItem.status == '3' |
|||
? '已完成' |
|||
: orderItem.status == '5' |
|||
? '已取消' |
|||
: orderItem.status == '1' |
|||
? '待服务' |
|||
: orderItem.status == '6' |
|||
? '待退款' |
|||
: orderItem.status == '10' |
|||
? '退款申请中' |
|||
: '已退款' |
|||
}} |
|||
</text> |
|||
<!-- <text> |
|||
{{orderItem.status == 0? '下架中':orderItem.status == 1? '销售中':orderItem.status == 5? '待审核':orderItem.status == 2? '待评价':'被驳回'}} |
|||
</text> --> |
|||
</view> |
|||
</view> |
|||
<view class="line"></view> |
|||
<view class="content"> |
|||
<view class="dis-flex"> |
|||
<image :src="orderItem.thumb" mode=""></image> |
|||
<view class="content-contnet"> |
|||
<view class="title f-w f-32 col-3">{{ orderItem.title }}</view> |
|||
<view class="f-24 col-3" v-if="orderItem.express && orderItem.express.address" style="overflow: hidden;width: 490upx;text-overflow:ellipsis;white-space: nowrap;"> |
|||
上门地址:{{orderItem.express.address}} |
|||
</view> |
|||
<view > |
|||
<text class="f-24 col-3" style="padding-right: 20upx;">总价:</text> |
|||
<text class="f-24 c-ff4444">¥</text> |
|||
<text class="f-32 c-ff4444 f-w">{{ orderItem.price }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="t-r btns"> |
|||
<view class="cancel" v-if="orderItem.status == '0' && orderItem.type == '1'" @click="closeOrder">取消订单</view> |
|||
<view class="payment" v-if="orderItem.status == '0' && orderItem.type == '1'" @click="pay">付款</view> |
|||
|
|||
<view class="payment" v-if="orderItem.type =='2'" @click="conjunction">私信联系</view> |
|||
<view class="payment" v-if="orderItem.type =='2' && orderItem.mobile" @click="call">电话联系</view> |
|||
<view class="payments" style="background-color: #0099ff;" v-if="orderItem.status == '1' && orderItem.type == '2' && hidefish != 1" @click="affirm(2)">完成</view> |
|||
<view class="payment" v-if="orderItem.status == '2' && orderItem.type == '1'" @click="evaluate">评价</view> |
|||
<view class="cancel" v-if="orderItem.status == '1' && orderItem.type == '1' && Number(orderItem.price) != '0'" @click="refund">退款</view> |
|||
<view class="cancel" v-if="orderItem.status == '10' && orderItem.type == '2'" @click="tuku">退款</view> |
|||
<view class="affirm" v-if="orderItem.status == '1' && orderItem.type == '1'" @click="affirm(1)">确认订单</view> |
|||
<view class="payments" style="background-color: #0099ff;" v-if="orderItem.type =='1' && orderItem.mobile" @click="call">电话联系</view> |
|||
<view class="cancel" v-if="(orderItem.status == '3' || orderItem.status == '7') && orderItem.type == '1' " @click="AnotherList">再来一单</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from '@/common/js/app.js'; |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
props: { |
|||
orderItem: { |
|||
type: Object, |
|||
default: {} |
|||
}, |
|||
type: { |
|||
type: String, |
|||
default: '1' |
|||
}, |
|||
hidefish:{ |
|||
default:0 |
|||
} |
|||
}, |
|||
methods: { |
|||
closeOrder(){ |
|||
let _this = this, |
|||
data = { |
|||
id: _this.orderItem.id, |
|||
plugin: 'housekeep' |
|||
}; |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '是否取消订单？', |
|||
success: function(res) { |
|||
if (res.confirm) { |
|||
App._post_form('&p=pay&do=cancelOrder', data, res => { |
|||
uni.showToast({ |
|||
title: res.message |
|||
}); |
|||
_this.$emit('getoderList', false, 1); |
|||
}); |
|||
} else if (res.cancel) {} |
|||
} |
|||
}); |
|||
}, |
|||
tuku(){ |
|||
App.showError( |
|||
`确认完成退款？`, |
|||
data => { |
|||
if (data.confirm) { |
|||
App._post_form( |
|||
`&p=store&do=storeRefund&id=${this.orderItem.id}&plugin=${'housekeep'}`, |
|||
{}, |
|||
res => { |
|||
console.log(res); |
|||
uni.showToast({ |
|||
title: res.message |
|||
}); |
|||
this.$emit('getoderList', false, 1); |
|||
}, |
|||
false, |
|||
() => {} |
|||
); |
|||
} |
|||
}, |
|||
true |
|||
); |
|||
}, |
|||
call(){ |
|||
uni.makePhoneCall({ |
|||
phoneNumber: this.orderItem.mobile |
|||
}) |
|||
}, |
|||
conjunction() { |
|||
App.navigationTo({ |
|||
url: 'pages/subPages/homepage/chat/chat?other_party_id=' + this.orderItem.mid + '&other_party_type=' + 1 + '&type=1' + '&id=' |
|||
}); |
|||
}, |
|||
AnotherList() { |
|||
App.navigationTo({ |
|||
url: `pages/subPages2/homemaking/homemakingDetails/homemakingDetails?id=${this.orderItem.fkid}` |
|||
}); |
|||
}, |
|||
evaluate() { |
|||
App.navigationTo({ |
|||
url: `pages/mainPages/comment/comment?goods_id=1356&order_id=${this.orderItem.id}&plugin=housekeep&a=a` |
|||
}); |
|||
}, |
|||
refund() { |
|||
App.navigationTo({ |
|||
url: `pages/subPages/orderList/afterSale/afterSale?id=${this.orderItem.id}&plugin=housekeep` |
|||
}); |
|||
}, |
|||
affirm(type) { |
|||
App.showError( |
|||
`确认完成订单?`, |
|||
data => { |
|||
if (data.confirm) { |
|||
let data = { |
|||
channel: type, |
|||
id: this.orderItem.id |
|||
}; |
|||
App._post_form( |
|||
`&p=housekeep&do=finishOrder`, |
|||
data, |
|||
res => { |
|||
console.log(res); |
|||
uni.showToast({ |
|||
title: res.message |
|||
}); |
|||
this.$emit('getoderList', false, 1); |
|||
}, |
|||
false, |
|||
() => {} |
|||
); |
|||
} |
|||
}, |
|||
true |
|||
); |
|||
}, |
|||
pay() { |
|||
App.navigationTo({ |
|||
url: 'pages/mainPages/payment/payment?orderid=' + this.orderItem.id + '&plugin=housekeep' |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.homemakingOrder { |
|||
padding: 20upx; |
|||
background-color: #ffffff; |
|||
border-radius: 20upx; |
|||
margin-top: 20upx; |
|||
.companyName { |
|||
display: flex; |
|||
line-height: 60upx; |
|||
font-size: 28upx; |
|||
color: #333333; |
|||
image { |
|||
width: 60upx; |
|||
height: 60upx; |
|||
border-radius: 60upx; |
|||
margin-right: 20upx; |
|||
} |
|||
} |
|||
.line { |
|||
// width: 650upx; |
|||
height: 1px; |
|||
background: #eeeeee; |
|||
margin: 20upx 30upx; |
|||
} |
|||
.content { |
|||
// display: flex; |
|||
image { |
|||
width: 120upx; |
|||
height: 120upx; |
|||
border-radius: 20upx; |
|||
} |
|||
.content-contnet { |
|||
padding-left: 30upx; |
|||
.title { |
|||
margin-bottom: 15upx; |
|||
} |
|||
} |
|||
} |
|||
.btns { |
|||
display: flex; |
|||
flex-direction: row-reverse; |
|||
padding-top: 20upx; |
|||
.cancel { |
|||
width: 150upx; |
|||
height: 60upx; |
|||
line-height: 60upx; |
|||
border-radius: 10upx; |
|||
border: 1upx solid #cccccc; |
|||
color: #333333; |
|||
text-align: center; |
|||
font-size: 28upx; |
|||
margin-left: 20upx; |
|||
} |
|||
.payments { |
|||
width: 140upx; |
|||
height: 60upx; |
|||
line-height: 60upx; |
|||
border-radius: 10upx; |
|||
background: linear-gradient(180deg, #0099ff 0%, #0077ff 100%); |
|||
color: #ffffff; |
|||
text-align: center; |
|||
font-size: 28upx; |
|||
margin-left: 20upx; |
|||
} |
|||
.payment { |
|||
width: 140upx; |
|||
height: 60upx; |
|||
line-height: 60upx; |
|||
border-radius: 10upx; |
|||
background: linear-gradient(180deg, #fece01 0%, #fdad28 100%); |
|||
color: #ffffff; |
|||
text-align: center; |
|||
font-size: 28upx; |
|||
margin-left: 20upx; |
|||
} |
|||
.affirm { |
|||
width: 150upx; |
|||
height: 60upx; |
|||
line-height: 60upx; |
|||
border-radius: 10upx; |
|||
background: linear-gradient(180deg, #fece01 0%, #fdad28 100%); |
|||
color: #ffffff; |
|||
text-align: center; |
|||
font-size: 28upx; |
|||
margin-left: 20upx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,172 @@ |
|||
<template> |
|||
<view> |
|||
<view class="imgswiper2" v-if="imgswipertwoDataArr.length &&imgswipertwoDataArr.length > 0"> |
|||
<view class="hdtt-t"> |
|||
<view class="hdtt-t-l"> |
|||
<view class="h1">{{ imgswipertwoData.params.title }}</view> |
|||
<view class="p">{{ imgswipertwoData.params.text }}</view> |
|||
</view> |
|||
<view class="hdtt-t-r"> |
|||
<view class="span"> |
|||
<view class="em">{{ swiperI }}</view>/{{ imgswipertwoDataArr.length }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="goodslist-d"> |
|||
<swiper :style="{height:imgswipertwoData.params.img_height +'px'}" |
|||
:indicator-dots="false" :autoplay="true" :interval="4000" :duration="500" next-margin="30rpx" @change="swiperCg"> |
|||
<block> |
|||
<swiper-item v-for="(item2, key2) in imgswipertwoDataArr" :key="key2" :style="{height:imgswipertwoData.params.img_height+'px',width:imgswipertwoData.params.img_width - 30 +'px'}"> |
|||
<view class="goodstop-i" @click="navigateTo(item2.linkurl)"> |
|||
<!-- <navigator class="a" :url="item2.linkurl" :open-type="item2.url_type" hover-class="none"> --> |
|||
<view class="goodstop-i-t"> |
|||
<image class="image" :style="{height:imgswipertwoData.params.img_height - 30 +'px',width:imgswipertwoData.params.img_width - 30 +'px'}" :src="item2.imgurl"></image> |
|||
</view> |
|||
<view class="goodstop-i-c"> |
|||
<view class="h1" v-if="!!item2.title" :style="'color: '+imgswipertwoData.style.titlecolor">{{ item2.title }}</view> |
|||
<view class="h2" v-if="!!item2.text" :style="'color: '+imgswipertwoData.style.textcolor">{{ item2.text }}</view> |
|||
</view> |
|||
<!-- </navigator> --> |
|||
</view> |
|||
</swiper-item> |
|||
</block> |
|||
</swiper> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from '../../common/js/app.js' |
|||
export default { |
|||
props: ['imgswipertwoData'], |
|||
data() { |
|||
return { |
|||
swiperI: 1, |
|||
imgswipertwoDataArr: [] |
|||
} |
|||
}, |
|||
mounted() { |
|||
for (var i in this.imgswipertwoData.data) { |
|||
this.imgswipertwoDataArr.push(this.imgswipertwoData.data[i]) |
|||
} |
|||
console.log() |
|||
}, |
|||
methods: { |
|||
swiperCg(e) { |
|||
this.swiperI = e.detail.current + 1 |
|||
}, |
|||
navigateTo(url) { |
|||
let isHttpUrl = url.indexOf('https') !== -1; |
|||
if (isHttpUrl) { |
|||
location.href = url; |
|||
} else { |
|||
App.navigationTo({ |
|||
url: url |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* banner2 图片轮播2 */ |
|||
.imgswiper2 { |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.imgswiper2 .hdtt-t { |
|||
padding: 0 30upx; |
|||
border-top: 0 solid #f6f6f6; |
|||
display: -webkit-flex; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.imgswiper2 .hdtt-t .h1 { |
|||
font-weight: normal; |
|||
font-size: 36upx; |
|||
margin: 0; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.imgswiper2 .hdtt-t .p { |
|||
color: #999; |
|||
font-size: 24upx; |
|||
margin: 0; |
|||
margin-top: 10upx; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.imgswiper2 .hdtt-t-r { |
|||
display: -webkit-flex; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.imgswiper2 .hdtt-t-r .span { |
|||
font-size: 36upx; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.imgswiper2 .hdtt-t-r .span .em { |
|||
font-size: 42upx; |
|||
font-style: normal; |
|||
display: inline; |
|||
} |
|||
|
|||
.imgswiper2 .goodslist { |
|||
padding: 30upx 0; |
|||
} |
|||
|
|||
.imgswiper2 .goodstop-i { |
|||
padding: 0; |
|||
padding-left: 30upx; |
|||
padding-bottom: 30upx; |
|||
} |
|||
|
|||
.imgswiper2 .goodstop-i-t { |
|||
width: 100%; |
|||
height: auto; |
|||
margin-top: 0; |
|||
} |
|||
|
|||
.imgswiper2 .goodstop-i-t .image { |
|||
width: 100%; |
|||
display: block; |
|||
} |
|||
|
|||
.imgswiper2 .goodslist-d { |
|||
margin-top: 30upx; |
|||
} |
|||
|
|||
.imgswiper2 .goodstop-i .h1 { |
|||
height: 42upx; |
|||
line-height: 42upx; |
|||
font-size: 32upx; |
|||
font-weight: normal; |
|||
margin-top: 20upx; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.imgswiper2 .goodstop-i .h2 { |
|||
height: 42upx; |
|||
line-height: 42upx; |
|||
font-size: 24upx; |
|||
color: #888; |
|||
font-weight: normal; |
|||
margin-top: 20upx; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 1; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,121 @@ |
|||
<template> |
|||
<view class="inputPop"> |
|||
<PopManager :show="inputShow" @clickmask="closePop"> |
|||
<view class="replyView"> |
|||
<view class="replyViewPackage" > |
|||
<view class="replyInput" ><textarea :placeholder="titleText+':'" v-if="inputShow" v-model="getText"></textarea></view> |
|||
<view class="sendButton" @click="returnText" ><text>确定</text></view> |
|||
</view> |
|||
</view> |
|||
</PopManager> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import PopManager from '@/components/template/PopManager'; |
|||
export default { |
|||
components: { |
|||
PopManager |
|||
}, |
|||
props: { |
|||
inputShow: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
titleText:{ |
|||
type:String, |
|||
default: '' |
|||
}, |
|||
texts:{ |
|||
type:String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
getText:'' |
|||
}; |
|||
}, |
|||
mounted(){ |
|||
let _this=this |
|||
_this.getText=_this.texts |
|||
}, |
|||
watch:{ |
|||
'texts':{ |
|||
handler(){ |
|||
let _this=this |
|||
_this.getText=_this.texts |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
closePop() { |
|||
let _this = this; |
|||
this.$emit('closeInputPop'); |
|||
}, |
|||
returnText(){ |
|||
let _this = this; |
|||
this.$emit('returnText',_this.getText); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.inputPop { |
|||
font-size: 0; |
|||
} |
|||
.replyViewPackage { |
|||
padding: 30upx; |
|||
} |
|||
|
|||
.coverView { |
|||
z-index: 2; |
|||
position: fixed; |
|||
top: 84upx; |
|||
background: rgba(0, 0, 0, 0); |
|||
width: 750upx; |
|||
} |
|||
|
|||
.replyInput { |
|||
background: rgba(248, 248, 248, 1); |
|||
width: 500upx; |
|||
height: 200upx; |
|||
vertical-align: middle; |
|||
margin: 20upx auto 0 auto; |
|||
background: white; |
|||
font-size: 24upx; |
|||
font-family: Source Han Sans CN; |
|||
|
|||
color: rgba(51, 51, 51, 1); |
|||
|
|||
> textarea { |
|||
background: rgba(248, 248, 248, 1); |
|||
width: 500upx !important; |
|||
height: 200upx !important; |
|||
} |
|||
} |
|||
|
|||
.sendButton { |
|||
text-align: center; |
|||
margin: 20upx auto 0 auto; |
|||
width: 292upx; |
|||
height: 74upx; |
|||
background: #3388ff; |
|||
border-radius: 37upx; |
|||
> text { |
|||
line-height: 74upx; |
|||
font-size: 24upx; |
|||
|
|||
color: #ffffff; |
|||
} |
|||
} |
|||
|
|||
.replyView { |
|||
border: 1upx solid rgba(0, 0, 0, 0); |
|||
width: 600upx; |
|||
background: rgba(255, 255, 255, 1); |
|||
border-radius: 20upx; |
|||
background: #f8f8f8; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,204 @@ |
|||
<template> |
|||
<view > |
|||
<view class="integralGood" v-if="pid == 'integral_goods'"> |
|||
<view |
|||
class="integralGood-item dis-flex" |
|||
@click="goUrl(item.url)" |
|||
:style="{ padding: padding + 'px', marginBottom: index != integralGoodLsit.length - 1 ? '20upx' : '0' }" |
|||
v-for="(item, index) in integralGoodLsit" |
|||
:key="index" |
|||
> |
|||
<view class="logo-img"><image class="logo-img" :src="item.thumb" mode=""></image></view> |
|||
<view class="flex-box content"> |
|||
<view class="f-30">{{ item.title }}</view> |
|||
<view class="f-30 c-ff4444" style="line-height: 120upx;">{{ item.price_text }}</view> |
|||
<view class="col-9 f-28" style="text-decoration:line-through;"> |
|||
市场价:{{ item.old_price }}元 |
|||
<view class="btn">去兑换</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="integralGood2" v-if="pid == 'integral_goods2'" :style="{ padding: padding + 'px' }"> |
|||
<view class="integralGood2-item" @click="goUrl(item.url)" v-for="(item, index) in integralGoodLsit" :key="index"> |
|||
<view class="img-box"><image class="img-box" :src="item.thumb" mode=""></image></view> |
|||
<view > |
|||
<view class="f-28">{{ item.title }}</view> |
|||
<view class="f-26 f-w c-ff4444" style="line-height: 60upx;">{{ item.price_text }}</view> |
|||
<view class="col-9 f-24" style="text-decoration:line-through;"> |
|||
市场价:{{ item.old_price }}元 |
|||
<view class="col-9 f-24" style="float: right;">{{ item.pv }}人喜欢</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="integralGood3" v-if="pid == 'integral_goods3'"> |
|||
<view class="integralGood3-item" @click="goUrl(item.url)" :style="{ padding: padding + 'px' }" v-for="(item, index) in integralGoodLsit" :key="index"> |
|||
<view class="img-box"> |
|||
<image class="img-box" :src="item.thumb" mode=""></image> |
|||
<view class="top">TOP {{ index + 1 < 10 ? '0' + (index + 1) : index + 1 }}</view> |
|||
</view> |
|||
<view class="p-top-20"> |
|||
<view class="f-28"> |
|||
<view class="sign">积分</view> |
|||
{{ item.title }} |
|||
</view> |
|||
<view class="f-36 f-w c-ff4444" style="line-height: 80upx;"> |
|||
{{ item.price_text }} |
|||
<view class="conversion">兑换</view> |
|||
</view> |
|||
<view class="col-9 f-24" style="text-decoration:line-through;"> |
|||
市场价:{{ item.old_price }}元 |
|||
<view class="col-9 f-24" style="float: right;">{{ item.pv }}人喜欢</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="integralGood4" v-if="pid == 'integral_goods4'"> |
|||
<view class="integralGood4-item" v-for="(item, index) in integralGoodLsit" :key="index" @click="goUrl(item.url)" |
|||
:style="{paddingTop: padding + 'px',paddingBottom: padding + 'px',paddingLeft: padding + 'px',paddingRight:(integralGoodLsit.length - 1) == index?padding + 'px':0 }"> |
|||
<view class="img-box"><image class="img-box" :src="item.thumb" mode=""></image></view> |
|||
<view class="f-26">{{ item.title }}</view> |
|||
<view class="f-26 c-ff4444" style="line-height: 70upx;">{{ item.price_text }}</view> |
|||
<view class="col-9 f-24" style="text-decoration:line-through;"> |
|||
市场价:{{ item.old_price }}元 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from '@/common/js/app.js'; |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
props: { |
|||
padding: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
integralGoodLsit: { |
|||
type: Array, |
|||
default: [1] |
|||
}, |
|||
pid: { |
|||
type: String, |
|||
default: null |
|||
} |
|||
}, |
|||
methods: { |
|||
goUrl(url) { |
|||
App.navigationTo({ |
|||
url: url |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.integralGood { |
|||
.integralGood-item { |
|||
background-color: #ffffff; |
|||
|
|||
.logo-img { |
|||
width: 200upx; |
|||
height: 200upx; |
|||
} |
|||
.content { |
|||
padding-left: 20upx; |
|||
.btn { |
|||
width: 150upx; |
|||
height: 50upx; |
|||
border-radius: 60upx; |
|||
background-color: #ff4444; |
|||
color: #ffffff; |
|||
line-height: 50upx; |
|||
text-align: center; |
|||
float: right; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.integralGood2 { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
background-color: #ffffff; |
|||
.integralGood2-item { |
|||
flex: 0 0 48%; |
|||
margin-bottom: 20upx; |
|||
.img-box { |
|||
width: 100%; |
|||
height: 300upx; |
|||
border-radius: 10upx; |
|||
} |
|||
} |
|||
} |
|||
.integralGood3 { |
|||
.integralGood3-item { |
|||
background-color: #ffffff; |
|||
margin-bottom: 20upx; |
|||
.img-box { |
|||
height: 500upx; |
|||
width: 100%; |
|||
position: relative; |
|||
.top { |
|||
height: 50upx; |
|||
width: 150upx; |
|||
border-radius: 0 60upx 60upx 0upx; |
|||
line-height: 50upx; |
|||
text-align: center; |
|||
font-size: 28upx; |
|||
color: #ffffff; |
|||
font-weight: 700; |
|||
background-color: #ff4444; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
} |
|||
.sign { |
|||
width: 100upx; |
|||
height: 50upx; |
|||
line-height: 50upx; |
|||
text-align: center; |
|||
color: #333333; |
|||
background-color: #ffd93f; |
|||
border-radius: 6upx; |
|||
margin-right: 20upx; |
|||
display: inline-block; |
|||
} |
|||
.conversion { |
|||
width: 150upx; |
|||
height: 50upx; |
|||
line-height: 50upx; |
|||
text-align: center; |
|||
color: #ffffff; |
|||
font-size: 28upx; |
|||
border-radius: 10upx; |
|||
background-color: #ff4444; |
|||
display: inline-block; |
|||
float: right; |
|||
margin-top: 15upx; |
|||
} |
|||
} |
|||
} |
|||
.integralGood4 { |
|||
width: 100%; |
|||
overflow: auto; |
|||
display: flex; |
|||
background-color: #FFFFFF; |
|||
.integralGood4-item { |
|||
display: inline-block; |
|||
|
|||
flex: 0 0 36%; |
|||
.img-box { |
|||
width: 250upx; |
|||
height: 250upx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,233 @@ |
|||
<template> |
|||
<view class="journey" :style="{padding: boxPadding?'30rpx 0':'0'}" @click="HitchRideDetails"> |
|||
<view class="title"> |
|||
<view > |
|||
<view class="dot"> |
|||
|
|||
</view> |
|||
<view class="name"> |
|||
{{hitchItem.start_address}} |
|||
</view> |
|||
</view> |
|||
<view > |
|||
<view class="dot-t"> |
|||
|
|||
</view> |
|||
<view class="name-t"> |
|||
{{hitchItem.end_address}} |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="carNavigation" v-if="flag" @click.stop="goMap"> |
|||
<image :src="imgfixUrls + 'carNavigation.png'" mode=""></image> |
|||
</view> |
|||
<view class="carPhone" v-if="phones" @click.stop="callPlay"> |
|||
拨打电话 |
|||
</view> |
|||
<view class="sign dis-flex"> |
|||
<view class="catClass"> |
|||
{{hitchItem.transport_type_text}} |
|||
</view> |
|||
<view class="f-24 col-9 p-left-right-20"> |
|||
{{hitchItem.start_time_text}} |
|||
</view> |
|||
</view> |
|||
<view class="tags"> |
|||
<view class="tag-item" v-for="(items,indexs) in hitchItem.label_id" :key="indexs"> |
|||
{{items}} |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from '@/common/js/app.js'; |
|||
import Map from '@/common/js/ms-openMap/openMap.js' |
|||
// #ifdef H5 |
|||
import wxApi from '@/common/js/wxApi.js'; |
|||
// #endif |
|||
export default{ |
|||
data(){ |
|||
return{ |
|||
|
|||
} |
|||
}, |
|||
props:{ |
|||
hitchItem:{ |
|||
type:Object, |
|||
default:{} |
|||
}, |
|||
lastIndex:{ |
|||
type:Boolean, |
|||
default:false |
|||
}, |
|||
flag:{ |
|||
type:Boolean, |
|||
default:false |
|||
}, |
|||
boxPadding:{ |
|||
type:Boolean, |
|||
default:true |
|||
}, |
|||
phones:{ |
|||
type:Boolean, |
|||
default:false |
|||
} |
|||
}, |
|||
methods:{ |
|||
callPlay(){ |
|||
let _this = this |
|||
uni.makePhoneCall({ |
|||
phoneNumber:_this.hitchItem.contacts_phone //仅为示例 |
|||
}); |
|||
}, |
|||
goMap(){ |
|||
let _this = this; |
|||
// #ifdef MP-WEIXIN |
|||
|
|||
uni.openLocation({ |
|||
latitude: Number(_this.hitchItem.end_lat), |
|||
longitude: Number(_this.hitchItem.end_lng), |
|||
success: function () { |
|||
console.log('success'); |
|||
}, |
|||
fail: function () { |
|||
console.log('success'); |
|||
}, |
|||
}) |
|||
|
|||
//#endif |
|||
//#ifdef H5 |
|||
wxApi.WxopenLocation(Number(_this.hitchItem.end_lat), Number(_this.hitchItem.end_lng), '', _this.hitchItem.end_address); |
|||
//#endif |
|||
//#ifdef APP-PLUS |
|||
Map.openMap(Number(_this.hitchItem.end_lat),Number(_this.hitchItem.end_lng),_this.hitchItem.end_address,'gcj02') |
|||
//#endif |
|||
}, |
|||
HitchRideDetails(){ |
|||
if(this.flag) return |
|||
App.navigationTo({ |
|||
url: "pages/subPages2/hitchRide/hitchRideDetails/hitchRideDetails?id=" + this.hitchItem.id |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.journey{ |
|||
// padding: 30upx 0; |
|||
position: relative; |
|||
.carNavigation{ |
|||
position: absolute; |
|||
top: 30upx; |
|||
right: 0upx; |
|||
width: 120upx; |
|||
height: 120upx; |
|||
image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
.carPhone{ |
|||
width: 160upx; |
|||
height: 70upx; |
|||
line-height: 70upx; |
|||
text-align: center; |
|||
background: linear-gradient(180deg, #3383FF 0%, #185DE9 100%); |
|||
border-radius: 10upx; |
|||
color: #FFFFFF; |
|||
font-size: 28upx; |
|||
font-weight: bold; |
|||
position: absolute; |
|||
top: -20upx; |
|||
right: 0upx; |
|||
} |
|||
.title{ |
|||
position: relative; |
|||
margin-top: 20upx; |
|||
border-left: 1upx dashed #EEEEEE; |
|||
|
|||
.dot{ |
|||
width: 12upx; |
|||
height: 12upx; |
|||
background-color: #00C095; |
|||
border-radius: 50%; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0%; |
|||
transform: translate(-50%); |
|||
|
|||
} |
|||
.dot-t{ |
|||
width: 12upx; |
|||
height: 12upx; |
|||
background-color: #FF4444; |
|||
border-radius: 50%; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0;; |
|||
transform: translate(-50%); |
|||
} |
|||
.name{ |
|||
padding: 0 0 0upx 30upx; |
|||
color: #333333; |
|||
font-weight: 700; |
|||
font-size: 36upx; |
|||
position: relative; |
|||
top: -16upx; |
|||
z-index: 1; |
|||
width:400upx; |
|||
overflow:hidden; |
|||
text-overflow:ellipsis; |
|||
white-space:nowrap; |
|||
} |
|||
.name-t{ |
|||
padding: 0 0 0upx 30upx; |
|||
color: #333333; |
|||
font-weight: 700; |
|||
font-size: 36upx; |
|||
position: relative; |
|||
bottom: -16upx; |
|||
z-index: 1; |
|||
width:400upx; |
|||
overflow:hidden; |
|||
text-overflow:ellipsis; |
|||
white-space:nowrap; |
|||
} |
|||
} |
|||
.sign{ |
|||
padding-top: 50upx; |
|||
line-height: 40upx; |
|||
.catClass{ |
|||
width: 90upx; |
|||
height: 40upx; |
|||
line-height: 40upx; |
|||
background: linear-gradient(180deg, #6DA5FD 0%, #6094FD 100%); |
|||
border-radius: 10upx; |
|||
text-align: center; |
|||
font-size: 24upx; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
.tags{ |
|||
padding-top: 30upx; |
|||
font-size: 10upx; |
|||
.tag-item{ |
|||
padding: 4upx 10upx; |
|||
border: 1upx solid #CCCCCC; |
|||
color: #999999; |
|||
height: 32upx; |
|||
line-height: 28upx; |
|||
font-size: 24upx; |
|||
text-align: center; |
|||
display: inline-block; |
|||
border-radius: 10upx; |
|||
margin-right: 20upx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,500 @@ |
|||
<template> |
|||
<view class="select-page"> |
|||
<block v-if="!isSearch"> |
|||
<scroll-view class="scroll-list-panel" scroll-y="true" :scroll-top="scrollTop" scroll-with-animation="true" @scroll="scroll"> |
|||
<view class="base-wrap-history m-top-btm20" v-if="!!currentCity"> |
|||
<view class="title">当前城市</view> |
|||
<view class="panel"> |
|||
<text class="item current-item" @click="chooseItem(currentCity['ad_info'])"><text class="history-icon iconfont icon-locationfill">{{currentCity['ad_info']['district'] || currentCity['ad_info']['city']}}</text></text> |
|||
</view> |
|||
</view> |
|||
<view class="base-wrap-history" v-if="!!recenCity && recenCity.length>0"> |
|||
<view class="title">最近访问的城市</view> |
|||
<view class="panel"> |
|||
<text v-for="(item,index) in recenCity" :key="index" class="item" v-if="index<3" @click="chooseItem(item)">{{item['ad_info']['city']}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="base-wrap-history m-btm40" v-if="!!quickPanelData && quickPanelData.length>0"> |
|||
<view class="title">热门城市</view> |
|||
<view class="panel"> |
|||
<text v-for="(item,index) in quickPanelData" :key="index" class="item" @click="chooseItem(item)">{{item['name']}}</text> |
|||
</view> |
|||
</view> |
|||
<!-- <base-classes v-for="(item, index) in quickPanelData" :classesAttr="item" :key="index" @chooseItem="chooseItem"></base-classes> --> |
|||
<view class="main-wrap"> |
|||
<view class="sort-wrap" v-for="(sort,index1) in listData" :key="index1" :id="'view'+ index1" :style="{backgroundColor:getListAttrListBackgroundColor}"> |
|||
<view class="title" :style="{fontSize:getListAttrTitleFontSize,color:getListAttrTitleColor,height:getListAttrTitleHeight,background:getListAttrTitleBackground,paddingLeft:getListAttrTitlePadding}">{{sort['initial']}}</view> |
|||
<view class="list"> |
|||
<text v-for="(city, index2) in sort.list" :key="index2" :style="{height:getListAttrItemHeight,fontSize:getListAttrItemFontSize,borderBottom:getListAttrItemBorderBottom,color:getListAttrItemColor,background:getListAttrItemBackgroundColor}" |
|||
@click="chooseItem(city)">{{city['name']}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<!-- <view class="now-sort" :style="{fontSize:getListAttrTitleFontSize,color:getListAttrTitleColor,height:getListAttrTitleHeight,background:getListAttrTitleBackground,paddingLeft:getListAttrTitlePadding}">{{getNavData[activeIndex]}}</view> --> |
|||
<view v-if="!!activeIndex" :class="['now-letter', fadeFlag?'fadeIn':'']">{{getNavData[activeIndex]}}</view> |
|||
<view class="letter-nav" v-if="navAttr.enable" :style="{backgroundColor:getNavAttrbackgroundColor,padding:getNavAttrPadding,borderRadius:getNavAttrBorderRadius,top:marginT}"> |
|||
<text :class="['item',index === activeIndex ? 'active': '']" v-for="(item,index) in getNavData" :key="index" @click="scrollSelect(index)" |
|||
style="font-size: 24upx;padding: 6upx 0;">{{item}}</text> |
|||
</view> |
|||
</block> |
|||
<block v-if="isSearch"> |
|||
<view class="base-wrap-history"> |
|||
<view class="title">目前搜索的城市</view> |
|||
<view class="panel"> |
|||
<text v-for="(listItem,index) in searchCitylist" :key="index" class="item" @click="chooseItem(listItem.list)">{{listItem.list.name}}</text> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from '@/common/js/app.js' |
|||
export default { |
|||
components: { |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
navData: [], // 侧边导航栏数据 |
|||
toView: 'sort0', |
|||
scrollTop: 0, |
|||
heightFixed: '', |
|||
marginT: '45%', |
|||
disArray: [0], |
|||
activeIndex: 0, |
|||
fadeFlag: false, |
|||
Timer: null, |
|||
cityListData: "" |
|||
} |
|||
}, |
|||
props: { |
|||
listData: { |
|||
type: Array, |
|||
default: [] |
|||
}, |
|||
quickPanelData: { |
|||
type: Array, |
|||
default: function() { |
|||
return [] |
|||
} |
|||
}, |
|||
currentCity: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
}, |
|||
iphoneModel: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
navAttr: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
}, |
|||
isSearch: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
isFixed: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
locationType: { |
|||
type: Number, |
|||
default: function() { |
|||
return 0 |
|||
} |
|||
}, |
|||
searchCitylist: { |
|||
type: Array, |
|||
default: function() { |
|||
return [] |
|||
} |
|||
}, |
|||
recenCity: { |
|||
type: Array, |
|||
default: function() { |
|||
return [] |
|||
} |
|||
}, |
|||
listAttr: { |
|||
type: Object, |
|||
default: function() { |
|||
return { |
|||
listBackgroundColor: 'transport', |
|||
titleFontSize: 28, |
|||
titleColor: '#333', |
|||
titleHeight: 60, |
|||
titleBackground: '#ccc', |
|||
titlePadding: 20, |
|||
itemHeight: 80, |
|||
itemFontSize: 28, |
|||
itemBorderBottom: '1px solid rgba(0, 0, 0, 0.1)', |
|||
itemColor: '#333', |
|||
itemBackgroundColor: '', |
|||
itemMargin: 20 |
|||
} |
|||
} |
|||
}, |
|||
}, |
|||
computed: { |
|||
getNavData() { |
|||
if (!!this.listData && this.listData.length > 0) { |
|||
this.navData = []; |
|||
this.listData.forEach((item, index) => { |
|||
this.navData.push(item.initial) |
|||
}) |
|||
return this.navData |
|||
} |
|||
}, |
|||
getListAttrListBackgroundColor() { |
|||
return this.listAttr.listBackgroundColor || 'transport' |
|||
}, |
|||
getListAttrTitleColor() { |
|||
return this.listAttr.titleColor || '#333' |
|||
}, |
|||
getListAttrTitleFontSize() { |
|||
return uni.upx2px(this.listAttr.titleFontSize || 24) + 'px' |
|||
}, |
|||
getListAttrTitleHeight() { |
|||
return uni.upx2px(this.listAttr.titleHeight || 60) + 'px' |
|||
}, |
|||
getListAttrTitleBackground() { |
|||
return this.listAttr.titleBackground || '#ccc' |
|||
}, |
|||
getListAttrTitlePadding() { |
|||
return uni.upx2px(this.listAttr.titlePadding || 20) + 'px' |
|||
}, |
|||
getListAttrItemHeight() { |
|||
return uni.upx2px(this.listAttr.itemHeight || 80) + 'px' |
|||
}, |
|||
getListAttrItemFontSize() { |
|||
return uni.upx2px(this.listAttr.itemFontSize || 28) + 'px' |
|||
}, |
|||
getListAttrItemColor() { |
|||
return this.listAttr.itemColor || '#333' |
|||
}, |
|||
getListAttrItemBackgroundColor() { |
|||
return this.listAttr.itemBackgroundColor || '' |
|||
}, |
|||
getListAttrItemBorderBottom() { |
|||
return this.listAttr.itemBorderBottom || '1px solid rgba(0, 0, 0, 0.1)' |
|||
}, |
|||
getListAttrItemMargin() { |
|||
return 0 + '' + uni.upx2px(this.listAttr.itemFontSize || 20) + 'px' |
|||
}, |
|||
getNavAttrbackgroundColor() { |
|||
return this.navAttr.backgroundColor || 'rgba(0, 0, 0, 0.4)' |
|||
}, |
|||
getNavAttrColor() { |
|||
return this.navAttr.color || '#333' |
|||
}, |
|||
getNavAttrActiveColor() { |
|||
return this.navAttr.activeColor || '#333' |
|||
}, |
|||
getNavAttrFontSize() { |
|||
return uni.upx2px(this.navAttr.fontSize || 28) + 'px' |
|||
}, |
|||
getNavAttrItemPadding() { |
|||
if (this.navAttr.itemPadding) { |
|||
let temp = '' |
|||
const arr = this.navAttr.itemPadding.split(' ') |
|||
arr.forEach((item, index) => { |
|||
temp += uni.upx2px(item) + 'px' + ' ' |
|||
}) |
|||
return temp |
|||
} else { |
|||
return uni.upx2px(4) + 'px' + ' ' + uni.upx2px(8) + 'px' |
|||
} |
|||
}, |
|||
getNavAttrBorderRadius() { |
|||
return uni.upx2px(this.navAttr.borderRadius || 100) + 'px' |
|||
}, |
|||
getNavAttrPadding() { |
|||
if (this.navAttr.itemPadding) { |
|||
let temp = '' |
|||
const arr = this.navAttr.padding.split(' ') |
|||
arr.forEach((item, index) => { |
|||
temp += uni.upx2px(item) + 'px' + ' ' |
|||
}) |
|||
return temp |
|||
} else { |
|||
return uni.upx2px(0) + 'px' + ' ' + uni.upx2px(20) + 'px' |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
scrollSelect(index) { |
|||
clearTimeout(this.Timer) |
|||
let disHeight = !!this.recenCity ? (this.iphoneModel ? 220 : 175) : (this.iphoneModel ? 115 : 95); |
|||
this.scrollTop = this.disArray[index] + disHeight |
|||
this.activeIndex = index |
|||
this.fadeFlag = true |
|||
this.Timer = setTimeout(() => { |
|||
this.fadeFlag = false |
|||
}, 1000) |
|||
}, |
|||
scroll(e) { |
|||
const length = this.disArray.length |
|||
for (let i = 0; i < length; i++) { |
|||
if (this.disArray[i] < e.detail.scrollTop && this.disArray[i + 1] > e.detail.scrollTop) { |
|||
this.activeIndex = i |
|||
} |
|||
} |
|||
}, |
|||
getDisArray(listData) { |
|||
let _this = this, |
|||
dis = _this.disArray[0]; |
|||
if (!!listData && listData.length > 0) { |
|||
listData.forEach((item, index) => { |
|||
const length = _this.disArray.length - 1; |
|||
dis = _this.disArray[length] + (parseInt(_this.getListAttrTitleHeight) + parseInt(_this.getListAttrItemHeight) * |
|||
item.list.length); |
|||
_this.disArray.push(dis) |
|||
}) |
|||
} |
|||
}, |
|||
cityTaptime(curCityInfo) { |
|||
let _this = this, |
|||
currentCity = _this.currentCity, |
|||
timestamp = (new Date()).getTime(); |
|||
if (currentCity.ad_info.adcode !== curCityInfo.data.areaid) { |
|||
uni.setStorageSync('cityTimestamp', timestamp) |
|||
} |
|||
}, |
|||
chooseItem(item) { |
|||
// debugger |
|||
let _this = this, |
|||
locationType = _this.locationType, |
|||
pages = getCurrentPages(), |
|||
navType = pages.length > 1 ? 'reLaunch' : 'rediRect', |
|||
locationArray = uni.getStorageSync('locationArray'), |
|||
newLocationArray = []; |
|||
_this.$emit('chooseItem', item); |
|||
uni.removeStorageSync('curLoction'); |
|||
if (!!item.location) { |
|||
item.lat = item.location.lat; |
|||
item.lng = item.location.lng; |
|||
item.name = item.city || item.ad_info.city; |
|||
item.isCurrentAddress = "1"; |
|||
} |
|||
if (locationType == '1') { |
|||
App.navigationTo({ |
|||
url: 'pages/subPages/city/selectAddress?' + App.urlEncode(item) |
|||
}) |
|||
} else { |
|||
if (locationType === 0) { |
|||
let cityObj = { |
|||
ad_info: { |
|||
adcode: item.id || item.adcode || item.ad_info.adcode, |
|||
city: item.name |
|||
}, |
|||
location: { |
|||
lat: item.lat, |
|||
lng: item.lng |
|||
}, |
|||
title: item.name |
|||
}; |
|||
App.getAreaId(cityObj.location, "", cityObj.ad_info.adcode, (options) => { |
|||
console.log(options, '1') |
|||
|
|||
uni.setStorageSync('agencyData', options.data) |
|||
_this.cityTaptime(options) |
|||
App.navigationTo({ |
|||
url: 'pages/mainPages/index/index', |
|||
navType: navType |
|||
}) |
|||
}) |
|||
if (locationArray) { |
|||
let haveArray = locationArray.filter(cityitem => (cityitem.ad_info ? cityitem.ad_info.city : cityitem.name) === |
|||
item.name).length !== 0; |
|||
if (haveArray) { |
|||
return |
|||
} else { |
|||
newLocationArray.push(cityObj, ...locationArray); |
|||
uni.setStorageSync(`locationArray${App.siteInfo.uniacid}`, newLocationArray); |
|||
} |
|||
} else { |
|||
newLocationArray.push(cityObj); |
|||
uni.setStorageSync(`locationArray${App.siteInfo.uniacid}`, newLocationArray); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
|
|||
uni.onWindowResize((res) => { |
|||
this.heightFixed = res.size.windowHeight; |
|||
}) |
|||
}, |
|||
watch: { |
|||
listData(newValue, oldValue) { |
|||
this.getDisArray(newValue) |
|||
}, |
|||
isFixed(newValue, oldValue) { |
|||
|
|||
if (newValue) { |
|||
this.marginT = '45%' |
|||
|
|||
} else { |
|||
this.marginT = '75%' |
|||
} |
|||
|
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.select-page { |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
position: relative; |
|||
height: 100%; |
|||
|
|||
.scroll-list-panel { |
|||
height: inherit; |
|||
|
|||
.title { |
|||
display: flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.list { |
|||
box-sizing: border-box; |
|||
margin: 0 0 0 30upx; |
|||
|
|||
text { |
|||
display: flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
|
|||
&:last-child { |
|||
border: none !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.now-sort { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.now-letter { |
|||
font-size: 160upx; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate3d(-50%, -50%, 0); |
|||
opacity: 0; |
|||
|
|||
&.fadeIn { |
|||
animation: fade 1s linear 0ms; |
|||
} |
|||
} |
|||
|
|||
.letter-nav { |
|||
width: 100upx; |
|||
position: absolute; |
|||
transform: translateY(-50%); |
|||
right: 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
text-align: center; |
|||
z-index: 99999; |
|||
} |
|||
} |
|||
|
|||
.base-wrap-history { |
|||
overflow: hidden; |
|||
padding: 0 50upx 0 20upx; |
|||
|
|||
.title { |
|||
display: flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
font-size: 28upx; |
|||
color: rgb(153, 153, 153); |
|||
height: 60upx; |
|||
// background: rgb(255, 255, 255); |
|||
} |
|||
|
|||
.panel { |
|||
// display: inline-block; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
|
|||
.current-item { |
|||
background-color: #FFD940 !important; |
|||
} |
|||
|
|||
// justify-content: space-between; |
|||
// text-align: justify; |
|||
.history-icon { |
|||
font-size: 30upx; |
|||
margin-right: 10upx; |
|||
color: #333333; |
|||
} |
|||
|
|||
.item { |
|||
display: inline-block; |
|||
align-items: center; |
|||
text-align: center; |
|||
// justify-content: center; |
|||
width: 160upx; |
|||
height: 60upx; |
|||
line-height: 60upx; |
|||
overflow: hidden; |
|||
font-size: 28upx; |
|||
border-radius: 60upx; |
|||
padding: 0 20upx; |
|||
margin-top: 20upx; |
|||
color: rgb(51, 51, 51); |
|||
margin-right: 8upx; |
|||
background-color: #f6f6f6; |
|||
} |
|||
|
|||
&::after { |
|||
display: block; |
|||
content: ''; |
|||
width: 200upx; |
|||
border: 1px solid transparent; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@keyframes fade { |
|||
0% { |
|||
opacity: 0; |
|||
display: block !important; |
|||
} |
|||
|
|||
50% { |
|||
opacity: 0.4; |
|||
} |
|||
|
|||
100% { |
|||
display: none; |
|||
opacity: 0 !important; |
|||
} |
|||
} |
|||
|
|||
::-webkit-scrollbar { |
|||
width: 0; |
|||
height: 0; |
|||
background-color: transparent; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,515 @@ |
|||
<!-- @liveList 直播数据列表 --> |
|||
<template> |
|||
<view class="container"> |
|||
<view class="list-main padding-box"> |
|||
<!-- 样式1 --> |
|||
<view class="live-list-one" v-if="false"> |
|||
<view class="live-list-one-main p-r" :style="{'background-image':'url('+livebg+')'}"> |
|||
<!-- 直播状态 --> |
|||
<view class="live-status"> |
|||
<!-- 直播中 --> |
|||
<block> |
|||
<view class="live-style-1 dis-flex flex-y-center"> |
|||
<view class="live-style-1-content dis-flex flex-y-center"> |
|||
<image class="live-statusBg-1" :src="imgfixUrls + 'live/live1.png'"></image> |
|||
<view class="live-intro f-24 col-f">直播中</view> |
|||
</view> |
|||
<view class="watch-number"> |
|||
<text class="col-f f-24">8455观看</text> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
<!-- 预告 --> |
|||
<block v-if="false"> |
|||
<view class="live-style-2 dis-flex flex-y-center"> |
|||
<image class="live-statusBg-2" :src="imgfixUrls + 'live/live2.png'"></image> |
|||
<view class="live-intro f-24 col-f">预告</view> |
|||
</view> |
|||
</block> |
|||
<!-- 结束 --> |
|||
<block v-if="false"> |
|||
<view class="live-style-3 dis-flex flex-y-center"> |
|||
<image class="live-statusBg-3" :src="imgfixUrls + 'live/live3.png'"></image> |
|||
<view class="live-intro f-24 col-f">直播回看</view> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
<view class="live-list-one-detail"> |
|||
<!-- 直播人头像昵称 --> |
|||
<view class="live-user dis-flex flex-y-center"> |
|||
<view class="live-userAvatar" :style="{'background-image':'url('+livebg+')'}"></view> |
|||
<view class="f-24 col-f">名扬天下</view> |
|||
</view> |
|||
<view class="live-title onelist-hidden f-28 col-f m-top-btm30">今晚很嗨烤鱼正儿八经的...</view> |
|||
<view class="live-goods dis-flex flex-y-center"> |
|||
<view class="goodsItem p-r" v-for="(item,index) in 3" :style="{'background-image':'url('+livebg+')'}"> |
|||
<view class="goodsItem-price col-f f-24">¥12.0</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="live-play" :style="{'background-image':'url('+imageRoot+'live_play.png)'}"></view> |
|||
</view> |
|||
</view> |
|||
<!-- 样式2 --> |
|||
<view class="live-list-two dis-flex flex-warp flex-x-between"> |
|||
<view class="live-left"> |
|||
<view class="live-list-Item m-btm20" v-for="(item,index) in newLivelist" :key="index" v-if="index%2==0"> |
|||
<view class="live-bg p-r" :style="{'background-image':'url('+item.cover_img+')'}" @click="navgateLive(item.roomid)"> |
|||
<!-- 直播状态 --> |
|||
<view class="live-status"> |
|||
<!-- 直播中 --> |
|||
<block v-if="item.live_status===101"> |
|||
<view class="live-style-1 dis-flex flex-y-center"> |
|||
<view class="live-style-1-content dis-flex flex-y-center"> |
|||
<image class="live-statusBg-1" :src="imgfixUrls + 'live/live1.png'"></image> |
|||
<view class="live-intro f-24 col-f">直播中</view> |
|||
</view> |
|||
<!-- <view class="watch-number"> |
|||
<text class="col-f f-24">8455观看</text> |
|||
</view> --> |
|||
</view> |
|||
</block> |
|||
<!-- 预告 --> |
|||
<block v-if="item.live_status===102"> |
|||
<view class="live-style-2 dis-flex flex-y-center"> |
|||
<image class="live-statusBg-2" :src="imgfixUrls + 'live/live2.png'"></image> |
|||
<view class="live-intro f-24 col-f">预告</view> |
|||
</view> |
|||
</block> |
|||
<!-- 结束 --> |
|||
<block v-if="item.live_status===103"> |
|||
<view class="live-style-3 dis-flex flex-y-center"> |
|||
<image class="live-statusBg-3" :src="imgfixUrls + 'live/live3.png'"></image> |
|||
<view @click.stop="backSee(item)" class="live-intro f-24 col-f">直播回看</view> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
<!-- 直播人头像昵称 --> |
|||
<view class="live-user dis-flex flex-y-center"> |
|||
<view class="live-userAvatar" :style="{'background-image':'url('+item.anchor_img+')'}"></view> |
|||
<view class="f-24 col-f">{{item.anchor_name}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="live-content b-f"> |
|||
<view class="live-title onelist-hidden f-28 col-3">{{item.name}}</view> |
|||
<view class="live-goodsDetail dis-flex flex-x-between flex-y-center m-top20" v-if="!!item.goods && !!item.goods.length>0" |
|||
@click="navgateGoods(item.goods[0]['url'])"> |
|||
<view class="goodsContent"> |
|||
<view class="goods-title onelist-hidden col-9 f-24">{{item.goods[0]['name']}}</view> |
|||
<view class="goods-price col-3 f-24">¥{{ item.goods[0].price_type == '2'? (item.goods[0]['price'] + '~' + item.goods[0]['price2']):item.goods[0]['price']}} |
|||
<text style="font-size: 20upx;color: #999999;text-decoration:line-through;padding-left: 10upx;" v-if="item.goods[0].price_type == '3'">{{item.goods[0]['price2']}}</text></view> |
|||
</view> |
|||
<view class="goodsImage" :style="{'background-image':'url('+item.goods[0]['cover_img']+')'}"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="live-right"> |
|||
<view class="live-list-Item m-btm20" v-for="(item,index) in newLivelist" :key="index" v-if="index%2==1"> |
|||
<view class="live-bg p-r" :style="{'background-image':'url('+item.cover_img+')'}" @click="navgateLive(item.roomid)"> |
|||
<!-- 直播状态 --> |
|||
<view class="live-status"> |
|||
<!-- 直播中 --> |
|||
<block v-if="item.live_status===101"> |
|||
<view class="live-style-1 dis-flex flex-y-center"> |
|||
<view class="live-style-1-content dis-flex flex-y-center"> |
|||
<image class="live-statusBg-1" :src="imgfixUrls + 'live/live1.png'"></image> |
|||
<view class="live-intro f-24 col-f">直播中</view> |
|||
</view> |
|||
<!-- <view class="watch-number"> |
|||
<text class="col-f f-24">8455观看</text> |
|||
</view> --> |
|||
</view> |
|||
</block> |
|||
<!-- 预告 --> |
|||
<block v-if="item.live_status===102"> |
|||
<view class="live-style-2 dis-flex flex-y-center"> |
|||
<image class="live-statusBg-2" :src="imgfixUrls + 'live/live2.png'"></image> |
|||
<view class="live-intro f-24 col-f">预告</view> |
|||
</view> |
|||
</block> |
|||
<!-- 结束 --> |
|||
<block v-if="item.live_status===103"> |
|||
<view class="live-style-3 dis-flex flex-y-center"> |
|||
<image class="live-statusBg-3" :src="imgfixUrls + 'live/live3.png'"></image> |
|||
<view class="live-intro f-24 col-f" @click.stop="backSee(item)">直播回看</view> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
<!-- 直播人头像昵称 --> |
|||
<view class="live-user dis-flex flex-y-center"> |
|||
<view class="live-userAvatar" :style="{'background-image':'url('+item.anchor_img+')'}"></view> |
|||
<view class="f-24 col-f">{{item.anchor_name}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="live-content b-f"> |
|||
<view class="live-title onelist-hidden f-28 col-3">{{item.name}}</view> |
|||
<view class="live-goodsDetail dis-flex flex-x-between flex-y-center m-top20" v-if="!!item.goods && !!item.goods.length>0" |
|||
@click="navgateGoods(item.goods[0]['url'])"> |
|||
<view class="goodsContent"> |
|||
<view class="goods-title onelist-hidden col-9 f-24">{{item.goods[0]['name']}}</view> |
|||
<view class="goods-price col-3 f-26">¥{{ item.goods[0].price_type == '1'? item.goods[0]['price']:item.goods[0].price_type == '2'?`${item.goods[0]['price']} ~ ${item.goods[0]['price2']}`:item.goods[0]['price']}} |
|||
<text style="font-size: 20upx;color: #999999;text-decoration:line-through;padding-left: 10upx;" v-if="item.goods[0].price_type == '3'">{{item.goods[0]['price2']}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="goodsImage" :style="{'background-image':'url('+item.goods[0]['cover_img']+')'}"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 视频 --> |
|||
<PopManager :show="videoshow" @clickmask="videoshow = false" type="center"> |
|||
<view v-if="videoshow" style="width: 100vw;height: 100vh;position: relative;"> |
|||
<video id="myvideo" :src="videolint[videoindex].media_url" @fullscreenchange="videoControl" style="width: 100%;height: 100%;" |
|||
@click.stop="" :show-fullscreen-btn="false" autoplay ></video> |
|||
<view style="position: absolute;left: 30upx;top: 30upx;color: #ffffff;padding: 10upx 20upx;border-radius: 60upx;background-color: rgba(255,255,255,0.3);" @click="cloce"> |
|||
<text class="iconfont icon-roundleftfill" style="font-size: 36upx;"></text> |
|||
<text class="f-36">返回</text> |
|||
</view> |
|||
<view class="dis-flex" style="width: 100%;position: absolute;top: 50%;transform: translateY(-50%);"> |
|||
<view class="flex-box "> |
|||
<view v-if="videoindex == 0 && videopage == 1"> |
|||
|
|||
</view> |
|||
<view class="dis-il-block t-c col-f f-40" style="border-radius: 0 60upx 60upx 0;padding: 20upx;" |
|||
v-else |
|||
@click="topvideo"> |
|||
<text class="iconfont icon-back"></text> |
|||
</view> |
|||
</view> |
|||
<view class="flex-box"> |
|||
<view v-if="videoindex == (videolint.length - 1) && videopage == videototal"> |
|||
|
|||
</view> |
|||
<view class="dis-il-block t-c col-f f-40" style="border-radius: 60upx 0 0 60upx;float: right;padding: 20upx;" |
|||
v-else |
|||
@click="downvideo"> |
|||
<text class="iconfont icon-right"></text> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</PopManager> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import App from "@/common/js/app.js"; |
|||
import PopManager from '@/components/template/PopManager'; |
|||
export default { |
|||
components:{ |
|||
PopManager |
|||
}, |
|||
data() { |
|||
return { |
|||
img:'', |
|||
videoshow:false, |
|||
videoContext:null, |
|||
videolint:[], |
|||
videoindex:0, |
|||
videopage:1, |
|||
videototal:0, |
|||
roomid:0 |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.img = this.imgfixUrl; |
|||
this.videoContext = uni.createVideoContext('myvideo'); |
|||
this.videoContext.requestFullScreen(); |
|||
}, |
|||
props: { |
|||
liveList: { |
|||
type: Array, |
|||
default: function() { |
|||
return [] |
|||
} |
|||
} |
|||
}, |
|||
components: { |
|||
|
|||
}, |
|||
computed: { |
|||
newLivelist() { |
|||
return this.liveList |
|||
} |
|||
}, |
|||
methods: { |
|||
cloce(){ |
|||
this.videoshow = false; |
|||
this.videopage = 1; |
|||
this.videoindex = 0; |
|||
}, |
|||
downvideo(){ |
|||
if(this.videoindex == this.videolint.length - 1){ |
|||
if(this.videototal == this.videopage) return; |
|||
this.videopage++; |
|||
this.videoindex = 0; |
|||
this.getpagelive() |
|||
}else{ |
|||
this.videoindex++; |
|||
} |
|||
}, |
|||
topvideo(){ |
|||
if(this.videoindex == 0){ |
|||
// if(this.videopage == 1) return; |
|||
this.videopage--; |
|||
this.videoindex = 0; |
|||
this.getpagelive(); |
|||
}else{ |
|||
this.videoindex--; |
|||
} |
|||
|
|||
}, |
|||
getpagelive(){ |
|||
let _this = this, |
|||
requestData = { |
|||
page:this.videopage, |
|||
room_id:this.roomid |
|||
}; |
|||
App._post_form('&p=wxapp&do=playBack', requestData, res => { |
|||
this.videolint = res.data.live_replay; |
|||
}) |
|||
}, |
|||
videoControl(e){ |
|||
console.log(e) |
|||
if(e.detail.fullScreen){ //e.detail.fullScreen是否为全屏 |
|||
this.videoContext.play(); |
|||
}else{ |
|||
//停止播放 |
|||
this.videoContext.pause(); |
|||
} |
|||
}, |
|||
navgateLive(room_id) { |
|||
App.navigationTo({ |
|||
url: `pages/subPages/livePlayer/livePlayer?id=${room_id}` |
|||
}) |
|||
}, |
|||
navgateGoods(url) { |
|||
App.navigationTo({ |
|||
url |
|||
}) |
|||
}, |
|||
backSee(item){ |
|||
if(item.live_status == 103){ |
|||
let _this = this, |
|||
requestData = { |
|||
page:this.videopage, |
|||
room_id:item.roomid |
|||
}; |
|||
this.roomid = item.roomid; |
|||
App._post_form('&p=wxapp&do=playBack', requestData, res => { |
|||
this.videototal = res.data.total_page; |
|||
this.videolint = res.data.live_replay; |
|||
}) |
|||
this.videoshow = true; |
|||
|
|||
// 获取当前视频id |
|||
// let currentId = e.currentTarget.dataset.id |
|||
// uni.createVideoContext获取视频上下文对象 |
|||
this.videoContext.requestFullScreen({ |
|||
direction:0 |
|||
}) |
|||
|
|||
} |
|||
// uni.setStorageSync('coverImg',coverImg); |
|||
// App.navigationTo({ |
|||
// url: `pages/subPages/liveBack/liveBack?id=${roomid}&name=${name}&anchor_name=${anchor_name}` |
|||
// }) |
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.live-list-one { |
|||
padding: 20upx 0; |
|||
|
|||
.live-list-one-main { |
|||
width: 100%; |
|||
height: 690upx; |
|||
background-size: 100% 690upx; |
|||
background-repeat: no-repeat; |
|||
border-radius: 10upx; |
|||
} |
|||
|
|||
.live-play { |
|||
width: 70upx; |
|||
height: 70upx; |
|||
background-size: 70upx 70upx; |
|||
background-repeat: no-repeat; |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 40%; |
|||
transform: translate(-50%); |
|||
} |
|||
|
|||
.live-list-one-detail { |
|||
position: absolute; |
|||
left: 20upx; |
|||
bottom: 30upx; |
|||
|
|||
.live-userAvatar { |
|||
width: 30upx; |
|||
height: 30upx; |
|||
background-repeat: no-repeat; |
|||
background-size: 30upx 30upx; |
|||
border: 1px solid rgba(249, 249, 249, 1); |
|||
border-radius: 50%; |
|||
margin-right: 8upx; |
|||
} |
|||
|
|||
.live-title { |
|||
width: 500upx; |
|||
} |
|||
|
|||
.live-goods { |
|||
.goodsItem { |
|||
width: 120upx; |
|||
height: 120upx; |
|||
border-radius: 8upx; |
|||
margin-right: 24upx; |
|||
background-size: 120upx 120upx; |
|||
background-repeat: no-repeat; |
|||
|
|||
.goodsItem-price { |
|||
position: absolute; |
|||
left: 10upx; |
|||
bottom: 10upx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.live-list-two { |
|||
.live-list-Item { |
|||
.live-bg { |
|||
width: 334upx; |
|||
height: 334upx; |
|||
border-radius: 10upx 10upx 0 0; |
|||
background-repeat: no-repeat; |
|||
background-size: cover; |
|||
background-position: center; |
|||
} |
|||
|
|||
.live-content { |
|||
padding: 20upx; |
|||
border-radius: 0 0 10rpx 10rpx; |
|||
|
|||
.live-title { |
|||
width: 294upx; |
|||
} |
|||
} |
|||
|
|||
.live-goodsDetail { |
|||
.goodsContent { |
|||
.goods-title { |
|||
width: 200upx; |
|||
} |
|||
} |
|||
|
|||
.goodsImage { |
|||
width: 64upx; |
|||
height: 64upx; |
|||
border-radius: 8upx; |
|||
background-repeat: no-repeat; |
|||
background-size: 64upx 64upx; |
|||
} |
|||
} |
|||
|
|||
.live-user { |
|||
position: absolute; |
|||
left: 20upx; |
|||
bottom: 20upx; |
|||
|
|||
.live-userAvatar { |
|||
width: 30upx; |
|||
height: 30upx; |
|||
background-repeat: no-repeat; |
|||
background-size: 30upx 30upx; |
|||
border: 1px solid rgba(249, 249, 249, 1); |
|||
border-radius: 50%; |
|||
margin-right: 8upx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.live-status { |
|||
position: absolute; |
|||
left: 20upx; |
|||
top: 20upx; |
|||
} |
|||
|
|||
.live-intro { |
|||
transform: scale(.9); |
|||
} |
|||
|
|||
.live-style-1 { |
|||
.live-style-1-content { |
|||
width: 114upx; |
|||
height: 22upx; |
|||
line-height: 22upx; |
|||
background: linear-gradient(90deg, rgba(255, 68, 68, 1), rgba(253, 113, 55, 1)); |
|||
border-radius: 6upx 0 0 6upx; |
|||
padding: 6upx; |
|||
|
|||
.live-statusBg-1 { |
|||
width: 30upx; |
|||
height: 30upx; |
|||
display: block; |
|||
margin-right: 6upx; |
|||
} |
|||
} |
|||
|
|||
.watch-number { |
|||
height: 22upx; |
|||
line-height: 22upx; |
|||
background-color: rgba(0, 0, 0, .2); |
|||
border-radius: 6upx; |
|||
padding: 6upx; |
|||
|
|||
>text { |
|||
transform: scale(.9); |
|||
display: block; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.live-style-2 { |
|||
height: 22upx; |
|||
line-height: 22upx; |
|||
background: linear-gradient(90deg, rgba(67, 221, 107, 1), rgba(30, 217, 79, 1)); |
|||
border-radius: 6upx; |
|||
padding: 6upx; |
|||
|
|||
.live-statusBg-2 { |
|||
width: 30upx; |
|||
height: 30upx; |
|||
display: block; |
|||
margin-right: 6upx; |
|||
} |
|||
} |
|||
|
|||
.live-style-3 { |
|||
height: 22upx; |
|||
line-height: 22upx; |
|||
background: linear-gradient(90deg, rgba(139, 139, 139, 1), rgba(214, 214, 214, 1)); |
|||
border-radius: 6upx; |
|||
padding: 6upx; |
|||
|
|||
.live-statusBg-3 { |
|||
width: 30upx; |
|||
height: 30upx; |
|||
display: block; |
|||
margin-right: 6upx; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,51 @@ |
|||
<template> |
|||
<view> |
|||
<view class="loading"> |
|||
<view class="loading-img-s1"> |
|||
<view class="loading-img"> |
|||
<image class="image" :src="imgfixUrls + 'loading.svg'" mode="aspectFill" v-if="!white"></image> |
|||
<image class="image" :src="imgfixUrls + 'loading1.svg'" mode="aspectFill" v-if="white"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: ['white'], |
|||
data(){ |
|||
return{ |
|||
img:'' |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.img = this.imgfixUrl; |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.loading { |
|||
text-align: center; |
|||
margin: 0; |
|||
padding: 0; |
|||
position: fixed; |
|||
z-index: 99999; |
|||
} |
|||
.loading-img-s1 { |
|||
height: 40px; |
|||
line-height: 40px; |
|||
padding: 10px 0; |
|||
overflow: hidden; |
|||
} |
|||
.loading-img { |
|||
width: 140px; |
|||
height: 40px; |
|||
display: inline-block; |
|||
} |
|||
.loading .image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,53 @@ |
|||
<template> |
|||
<view> |
|||
<view class="loadlogo-container"> |
|||
<view class="loadlogo"> |
|||
<image class="image" :src="loadImage || (imgfixUrls + 'loadlogo.svg')" mode="aspectFill"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
mounted() { |
|||
}, |
|||
computed: { |
|||
loadImage() { |
|||
let _this = this, |
|||
newLoadingImg = _this.$store.state.appInfo.loading; |
|||
return !!newLoadingImg ? newLoadingImg :'' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.loadlogo-container { |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: #FFFFFF; |
|||
position: fixed; |
|||
z-index: 999; |
|||
} |
|||
|
|||
.loadlogo { |
|||
width: 80px; |
|||
height: 80px; |
|||
/* margin: -60px 0 0 -60px; */ |
|||
position: fixed; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
|
|||
.loadlogo .image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,79 @@ |
|||
<!-- 加载更多样式组件 --> |
|||
<!-- 传isMore : true 加载完成 false 加载更多 --> |
|||
<template> |
|||
<view class="loadMore-box" :style="{backgroundColor: bgc}"> |
|||
<block v-if="!isMore"> |
|||
<view class="more-status dis-flex flex-y-center flex-x-center"> |
|||
<view class="loadingImg m-right10" :style="{'background-image':'url('+loadingSrc+')'}"></view> |
|||
<view class="f-28 col-3">正在加载</view> |
|||
</view> |
|||
</block> |
|||
<block v-if="isMore"> |
|||
<view class="not-more-status dis-flex flex-y-center flex-x-center"> |
|||
<view class="cut-off cut-off-left"></view> |
|||
<view class="not-moreTitle col-9 f-28 m-left-right-20" style="flex: 0.35;text-align: center;">{{languageStatus!=1?'暂无数据':'기록이 없습니다'}}</view> |
|||
<view class="cut-off cut-off-right"></view> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
computed: { |
|||
loadingSrc() { |
|||
return this.imageRoot + 'loadmore.svg' |
|||
} |
|||
}, |
|||
props: { |
|||
isMore: { |
|||
type: Boolean, |
|||
default: function() { |
|||
return false |
|||
} |
|||
}, |
|||
bgc: { |
|||
type: String, |
|||
default: '#f8f8f8' |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.loadMore-box{ |
|||
background-color: #ffffff; |
|||
} |
|||
.more-status { |
|||
.loadingImg { |
|||
width: 38upx; |
|||
height: 38upx; |
|||
background-size: 38upx 38upx; |
|||
background-repeat: no-repeat; |
|||
animation: loading 2s linear 2s infinite; |
|||
} |
|||
} |
|||
|
|||
@keyframes loading { |
|||
from { |
|||
transform: rotate(0deg); |
|||
} |
|||
|
|||
to { |
|||
transform: rotate(360deg); |
|||
} |
|||
} |
|||
|
|||
.not-more-status { |
|||
.cut-off { |
|||
flex: 0.3; |
|||
height: 2upx; |
|||
background-color: #EEEEEE; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,239 @@ |
|||
<template> |
|||
<view class="muserItem" v-if="load" @click="navlink(serItem.id)"> |
|||
<view class="imgbnox"> |
|||
<image :src="serItem.logo" class="logo" mode=""></image> |
|||
<view class="stateTag" v-if="states" :style="{background:serItem.status == 0?'#cccccc':serItem.status == 5?'#ff4444':serItem.status == 6?'#72AAFD':'linear-gradient(270deg, #FDAD28 0%, #FECE02 100%)'}"> |
|||
{{serItem.status == 0?'已下架':serItem.status == 5?'审核中':serItem.status == 6?'已驳回':'销售中'}} |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="content"> |
|||
<view class="f-32 col-3 f-w"> |
|||
{{serItem.title || serItem.name}} |
|||
</view> |
|||
<view class="tags" v-if="serItem.catearray"> |
|||
<view class="tag-item" v-for="(item,index) in serItem.catearray" :key="index"> |
|||
{{item}} |
|||
</view> |
|||
</view> |
|||
<view class="tags" v-else> |
|||
<view class="tag-item" v-for="(item,index) in serItem.label" :key="index"> |
|||
{{item}} |
|||
</view> |
|||
</view> |
|||
<view class="prices f-30 c-ff4444"> |
|||
<text class="c-ff4444 f-24 f-w"></text> |
|||
<text class="f-w">{{serItem.price}}</text> |
|||
<text class="f-26 col-9" style="padding-left: 20upx;">销量:</text> |
|||
<text class="f-26 col-9">{{serItem.salenum}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="more" @click="openbtn" v-if="states"> |
|||
<image :src="imgfixUrls + 'homemakingImg/gengduo.png'" mode="" ></image> |
|||
</view> |
|||
<view class="shade" v-if="serItem.checked"> |
|||
<view class="flex-box" @click="editingService" v-if="serItem.status != 3"> |
|||
<view class="shadeItem"> |
|||
<image :src="imgfixUrls + 'homemakingImg/bianji.png'" mode=""></image> |
|||
<view class=" f-24" style="padding-top: 20upx;color: #dddddd;"> |
|||
编辑 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="flex-box" v-if="serItem.status == 0" @click="state(1)"> |
|||
<view class="shadeItem"> |
|||
<image :src="imgfixUrls + 'homemakingImg/shangjia.png'" mode=""></image> |
|||
<view class=" f-24" style="padding-top: 20upx;color: #dddddd;"> |
|||
上架 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="flex-box" v-if="serItem.status == 1 || serItem.status == 5" @click="state(2)"> |
|||
<view class="shadeItem"> |
|||
<image :src="imgfixUrls + 'homemakingImg/xiajia.png'" mode=""></image> |
|||
<view class=" f-24" style="padding-top: 20upx;color: #dddddd;"> |
|||
下架 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="flex-box" @click="state(3)"> |
|||
<view class="shadeItem"> |
|||
<image :src="imgfixUrls + 'homemakingImg/shanchu.png'" mode=""></image> |
|||
<view class=" f-24" style="padding-top: 20upx;color: #dddddd;"> |
|||
删除 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="flex-box" v-if="serItem.status == 1"> |
|||
<view class="shadeItem" @click="sher"> |
|||
<image :src="imgfixUrls + 'homemakingImg/tuiguang.png'" mode=""></image> |
|||
<view class=" f-24" style="padding-top: 20upx;color: #dddddd;"> |
|||
推广 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from '@/common/js/app.js'; |
|||
export default{ |
|||
data(){ |
|||
return{ |
|||
load:true |
|||
} |
|||
}, |
|||
props:{ |
|||
serItem:{ |
|||
type:Object, |
|||
default:{} |
|||
}, |
|||
type:{ |
|||
type:Number, |
|||
default:1 |
|||
}, |
|||
states:{ |
|||
type:Boolean, |
|||
default:true |
|||
} |
|||
}, |
|||
methods:{ |
|||
navlink(id){ |
|||
if(this.states) return |
|||
App.navigationTo({ |
|||
url: "pages/subPages2/homemaking/homemakingDetails/homemakingDetails?id=" + id |
|||
}); |
|||
}, |
|||
sher(){ |
|||
App.navigationTo({ |
|||
url: `pages/mainPages/poster/poster?id=${this.serItem.id}&type=16` |
|||
}) |
|||
}, |
|||
state(type){ |
|||
App.showError( |
|||
`是否${type == 1?'上架':type==2?'下架':'删除'}此项目?`, |
|||
data => { |
|||
if (data.confirm) { |
|||
App._post_form( |
|||
`&p=housekeep&do=serviceUpdate`, |
|||
{doStatus:type,id:this.serItem.id}, |
|||
res => { |
|||
this.$emit('getMyserList',false,1); |
|||
}, |
|||
false, |
|||
() => {} |
|||
); |
|||
} |
|||
}, |
|||
true |
|||
); |
|||
|
|||
}, |
|||
openbtn(){ |
|||
this.serItem.checked =true; |
|||
// debugger |
|||
this.load = !this.load |
|||
this.load = !this.load |
|||
this.$emit('openbtn',this.serItem.id) |
|||
}, |
|||
editingService(){ |
|||
App.navigationTo({ |
|||
url: "pages/subPages2/homemaking/pubService/pubService?id=" + this.serItem.id + '&type=' +this.type + '&arid=' + this.serItem.objid |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.muserItem{ |
|||
padding: 20upx; |
|||
background-color: #FFFFFF; |
|||
border-radius: 20upx; |
|||
display: flex; |
|||
// margin-bottom: 20upx; |
|||
position: relative; |
|||
.shade{ |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
display: flex; |
|||
border-radius: 20upx; |
|||
background-color: rgba(0,0,0,0.3); |
|||
.shadeItem{ |
|||
padding-top: 40upx; |
|||
margin: auto; |
|||
text-align: center; |
|||
image{ |
|||
width: 66upx; |
|||
height: 66upx; |
|||
|
|||
} |
|||
} |
|||
} |
|||
.imgbnox{ |
|||
width: 160upx; |
|||
height: 160upx; |
|||
border-radius: 20upx; |
|||
position: relative; |
|||
margin-right: 30upx; |
|||
.logo{ |
|||
width: 160upx; |
|||
height: 160upx; |
|||
border-radius: 20upx; |
|||
} |
|||
.stateTag{ |
|||
width: 100upx; |
|||
height: 40upx; |
|||
|
|||
opacity: 1; |
|||
border-radius: 20upx 0upx 20upx 0upx; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
font-size: 24upx; |
|||
color: #FFFFFF; |
|||
line-height: 40upx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
.content{ |
|||
flex: 1; |
|||
.tags{ |
|||
padding: 10upx 0 20upx; |
|||
height: 42upx; |
|||
overflow: hidden; |
|||
.tag-item{ |
|||
padding: 0 10upx; |
|||
height: 32upx; |
|||
background-color: #EEEEEE; |
|||
color: #999999; |
|||
font-size: 20upx; |
|||
border-radius: 6upx; |
|||
line-height: 32upx; |
|||
text-align: center; |
|||
display: inline-block; |
|||
margin-right: 10upx; |
|||
} |
|||
} |
|||
.prices{ |
|||
padding-top: 10upx; |
|||
} |
|||
} |
|||
.more{ |
|||
width: 50upx; |
|||
height: 160upx; |
|||
position: relative; |
|||
image{ |
|||
width: 50upx; |
|||
height: 50upx; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,127 @@ |
|||
<template> |
|||
<view class="navBar" :style="{'padding-bottom':isPadding?'20px':''}"> |
|||
<view v-for="(item,index) in navList" @click="go(item.url)"> |
|||
<view><image :src="imgfixUrls +item.img" /></view> |
|||
<span :class="tabBarAct==index?'check':'nCheck'">{{item.label}}</span> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from '@/common/js/app.js'; |
|||
export default { |
|||
props:{ |
|||
tabBarAct: { |
|||
type: Number, |
|||
default: function() { |
|||
return 0 |
|||
} |
|||
}, |
|||
}, |
|||
data(){ |
|||
return { |
|||
isPadding:null, |
|||
href:'', |
|||
navList:[ |
|||
{ |
|||
label:'首页', |
|||
img:'merchant/nav1.png', |
|||
url:'pages/subPages/merchant/merchantHome/merchantHome' |
|||
}, |
|||
{ |
|||
label:'商品', |
|||
img:'merchant/nav2.png', |
|||
url:'pages/subPages/merchant/merchantOrder/merchantOrder' |
|||
}, |
|||
{ |
|||
label:'消息', |
|||
img:'merchant/nav3.png', |
|||
url:'pages/subPages/merchant/merchantMsg/merchantMsg' |
|||
}, |
|||
{ |
|||
label:'订单', |
|||
img:'merchant/nav4.png', |
|||
url:'pages/subPages/merchant/merchantOrderList/merchantOrderList' |
|||
}, |
|||
{ |
|||
label:'我的', |
|||
img:'merchant/nav5.png', |
|||
url:'pages/subPages/merchant/merchantUerCenter/merchantUerCenter' |
|||
}, |
|||
], |
|||
img:'' |
|||
}; |
|||
}, |
|||
mounted() { |
|||
let _this=this |
|||
this.img = this.imgfixUrl; |
|||
uni.getSystemInfo({ |
|||
success(res) { |
|||
let model = res.model, |
|||
iphoneModel = ["iPhone10,3", "iPhone10,6", "iPhone11,8", "iPhone11,2", "iPhone11,6"]; |
|||
_this.isPadding = iphoneModel.includes(model) || model.indexOf("iPhone X") !== -1 || model.indexOf("iPhone12") !== -1; |
|||
} |
|||
}); |
|||
}, |
|||
methods: { |
|||
go(url){ |
|||
let _this=this |
|||
App.navigationTo({ |
|||
url:url, |
|||
navType:'rediRect' |
|||
}) |
|||
} |
|||
}, |
|||
computed: { |
|||
|
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.check{ |
|||
display: inline-block; |
|||
font-size:20upx; |
|||
color:rgba(44,111,255,1) !important; |
|||
} |
|||
.nCheck{ |
|||
display: inline-block; |
|||
font-size: 20upx; |
|||
|
|||
|
|||
color: rgba(51, 51, 51, 1) !important; |
|||
} |
|||
page { |
|||
font-size: 0; |
|||
} |
|||
|
|||
.navBar { |
|||
justify-content: space-between; |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 750upx; |
|||
height: 98upx; |
|||
background: rgba(255, 255, 255, 1); |
|||
border: 1upx solid rgba(238, 238, 238, 1); |
|||
display: flex; |
|||
> view { |
|||
width: 20%; |
|||
text-align: center; |
|||
display: inline-block; |
|||
vertical-align: top; |
|||
> view { |
|||
padding-top: 10upx; |
|||
margin: auto; |
|||
width: 50upx; |
|||
height: 50upx; |
|||
> image { |
|||
width: 50upx; |
|||
height: 50upx; |
|||
} |
|||
} |
|||
> span { |
|||
|
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,102 @@ |
|||
<template> |
|||
<view class="container-image"> |
|||
<view class="iamges-box"> |
|||
<image :src="!!propsImagesSrc?propsImagesSrc:imageSrc" mode="widthFix"></image> |
|||
<block v-if="propsdiyTitleType==='Data'"> |
|||
<view class="title f-24 col-9">{{!!propsdiyTitle?propsdiyTitle:languageStatus!=1?'暂无数据，快去逛逛吧~':'쇼핑하러 가기'}}</view> |
|||
</block> |
|||
<block v-if="propsdiyTitleType==='packet'"> |
|||
<view class="title f-24 col-9 m-btm20">您还没有红包，去红包广场领取吧！</view> |
|||
<view class="navPacket f-24" @click="navgateTo()">立即去领取</view> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import App from "@/common/js/app.js" |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods:{ |
|||
navgateTo(){ |
|||
App.navigationTo({ |
|||
url:'pages/subPages/redpacket/redsquare' |
|||
}) |
|||
} |
|||
}, |
|||
props: { |
|||
// 参数:自定义图片 580* 270 |
|||
diyImagesSrc: { |
|||
type: String, |
|||
default: function() { |
|||
return "" |
|||
} |
|||
}, |
|||
// 参数:自定义标题 |
|||
diyTitle: { |
|||
type: String, |
|||
default: function() { |
|||
return "" |
|||
} |
|||
}, |
|||
diyTitleType: { |
|||
type: String, |
|||
default: function() { |
|||
return "Data" |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
imageSrc() { |
|||
return this.imageRoot + 'noneMores.png' |
|||
}, |
|||
propsImagesSrc() { |
|||
return this.diyImagesSrc |
|||
}, |
|||
propsdiyTitle() { |
|||
return this.diyTitle |
|||
}, |
|||
propsdiyTitleType() { |
|||
return this.diyTitleType |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.container-image { |
|||
position: relative; |
|||
display: block; |
|||
width: 100%; |
|||
height: 0; |
|||
padding-bottom: 100%; |
|||
overflow: hidden |
|||
} |
|||
|
|||
.iamges-box { |
|||
position: absolute; |
|||
display: flex; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center |
|||
} |
|||
|
|||
.iamges-box image { |
|||
width: 580upx; |
|||
height: 270upx; |
|||
display: block; |
|||
background: transparent no-repeat; |
|||
background-size: cover |
|||
} |
|||
.navPacket{ |
|||
color: #17D117; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,210 @@ |
|||
<template> |
|||
<view class="tui-numberbox-class tui-numberbox"> |
|||
<view class="tui-numbox-icon tui-icon-reduce " :class="[disabled || min>=value?'tui-disabled':'']" @click.stop="reduce" |
|||
style="border-radius: 5upx; border: 1upx solid #FF4444; color: #FF4444;font-size: 20upx;box-sizing: border-box;" v-show="value"></view> |
|||
<input type="number" @click.stop="" v-model="inputValue" v-show="value" :disabled="true" @blur="blur" class="tui-num-input" |
|||
:style="{color:color,fontSize:size+'rpx',height:height+'rpx',width:width+'rpx',minHeight:0}" /> |
|||
<view class="tui-numbox-icon tui-icon-plus" :class="[disabled || value>=max?'tui-disabled':'']" @click.stop="plus" style="border-radius: 5upx;background-color: #FF4444;color: #FFFFFF;font-size: 20upx;"></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "tuiNumberbox", |
|||
props: { |
|||
value: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
//最小值 |
|||
min: { |
|||
type: Number, |
|||
default: 1 |
|||
}, |
|||
//最大值 |
|||
max: { |
|||
type: Number, |
|||
default: 99 |
|||
}, |
|||
//迈步大小 1 1.1 10... |
|||
step: { |
|||
type: Number, |
|||
default: 1 |
|||
}, |
|||
//是否禁用操作 |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
//加减图标大小 rpx |
|||
iconSize: { |
|||
type: Number, |
|||
default: 26 |
|||
}, |
|||
iconColor: { |
|||
type: String, |
|||
default: "#666666" |
|||
}, |
|||
//input 高度 |
|||
height: { |
|||
type: Number, |
|||
default: 42 |
|||
}, |
|||
//input 宽度 |
|||
width: { |
|||
type: Number, |
|||
default: 80 |
|||
}, |
|||
size: { |
|||
type: Number, |
|||
default: 28 |
|||
}, |
|||
//input 背景颜色 |
|||
bgcolor: { |
|||
type: String, |
|||
default: "#F5F5F5" |
|||
}, |
|||
//input 字体颜色 |
|||
color: { |
|||
type: String, |
|||
default: "#333" |
|||
}, |
|||
//索引值，列表中使用 |
|||
index: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
}, |
|||
//自定义参数 |
|||
custom: { |
|||
type: [Number, String], |
|||
default: 0 |
|||
} |
|||
}, |
|||
created() { |
|||
this.inputValue = +this.value |
|||
}, |
|||
data() { |
|||
return { |
|||
inputValue: 0 |
|||
}; |
|||
}, |
|||
watch: { |
|||
value(val) { |
|||
this.inputValue = +val; |
|||
} |
|||
}, |
|||
methods: { |
|||
getScale() { |
|||
let scale = 1; |
|||
//浮点型 |
|||
if (!Number.isInteger(this.step)) { |
|||
scale = Math.pow(10, (this.step + '').split('.')[1].length) |
|||
} |
|||
return scale; |
|||
}, |
|||
calcNum: function(type) { |
|||
if (this.disabled) { |
|||
return |
|||
} |
|||
const scale = this.getScale() |
|||
let num = this.value * scale |
|||
let step = this.step * scale |
|||
if (type === 'reduce') { |
|||
num -= step |
|||
} else if (type === 'plus') { |
|||
num += step |
|||
} |
|||
let value = num / scale |
|||
if (type === "plus" && value < this.min) { |
|||
value = this.min |
|||
} else if (type === "reduce" && value > this.max) { |
|||
value = this.max |
|||
} |
|||
if (value < this.min || value > this.max) { |
|||
return |
|||
} |
|||
this.handleChange(value, type) |
|||
}, |
|||
plus: function(e) { |
|||
this.calcNum("plus"); |
|||
}, |
|||
reduce: function() { |
|||
this.calcNum("reduce") |
|||
}, |
|||
blur: function(e) { |
|||
let value = e.detail.value |
|||
if (value) { |
|||
if (~value.indexOf(".") && Number.isInteger(this.step)) { |
|||
value = value.split(".")[0] |
|||
} |
|||
value = Number(value) |
|||
if (value > this.max) { |
|||
value = this.max |
|||
} else if (value < this.min) { |
|||
value = this.min |
|||
} |
|||
} else { |
|||
value = this.min |
|||
} |
|||
if (value == this.value && value != this.inputValue) { |
|||
this.inputValue = value |
|||
} |
|||
this.handleChange(value, "blur") |
|||
}, |
|||
handleChange(value, type) { |
|||
if (this.disabled) return; |
|||
this.$emit('change', { |
|||
value: value, |
|||
type: type, |
|||
index: this.index, |
|||
custom: this.custom |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
@font-face { |
|||
font-family: 'numberbox'; |
|||
src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAASQAA0AAAAABtwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEdAAAABoAAAAciBpnRUdERUYAAARUAAAAHgAAAB4AKQALT1MvMgAAAZwAAABDAAAAVjxzSINjbWFwAAAB9AAAAEYAAAFK5zLpOGdhc3AAAARMAAAACAAAAAj//wADZ2x5ZgAAAkgAAACHAAAAnIfIEjxoZWFkAAABMAAAAC8AAAA2FZWEOWhoZWEAAAFgAAAAHAAAACQH3gOFaG10eAAAAeAAAAARAAAAEgwAAAFsb2NhAAACPAAAAAwAAAAMADAATm1heHAAAAF8AAAAHwAAACABEAAobmFtZQAAAtAAAAFJAAACiCnmEVVwb3N0AAAEHAAAAC0AAABV/+8iFXjaY2BkYGAA4gVmC5Tj+W2+MnCzMIDATWsFOQT9v5GFgbkeyOVgYAKJAgDrogf+AHjaY2BkYGBu+N/AEMPCAAJAkpEBFbAAAEcKAm142mNgZGBgYGWQYQDRDAxMQMwFhAwM/8F8BgALpAE5AHjaY2BkYWCcwMDKwMDUyXSGgYGhH0IzvmYwYuQAijKwMjNgBQFprikMDs9Yn01kbvjfwBDD3MDQABRmBMkBAOXpDHEAeNpjYYAAFghmZGAAAACdAA4AAAB42mNgYGBmgGAZBkYGEHAB8hjBfBYGDSDNBqQZGZiesT6b+P8/AwOElvwnWQxVDwSMbAxwDiMTkGBiQAWMDMMeAABRZwszAAAAAAAAAAAAAAAwAE542iWKQQrCMBBF5xNpd0pQ7EIoTEnahSCTUNqdWz2A9TrieXKeXCc1qcPn/zfzh0BYv2pVH7oQgbvqdG5Yt/DTrNlPYz+wHvuuqhFSME4sFshTgKUsKfhH5lg8BSul3i5bS3mQdd0RIh2IjnvUrkXDd8zuhuFt86tY9fonIsSYgsXpB+cCGosAeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAOWMGiTIxMjMwiWZmJQJRXVQoigTgjMd9QGIsgAFDsEBsAAAAAAAAB//8AAgABAAAADAAAABYAAAACAAEAAwAEAAEABAAAAAIAAAAAeNpjYGBgZACCq0vUOUD0TWsFORgNADPBBE4AAA==) format('woff'); |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
|
|||
.tui-numbox-icon { |
|||
font-family: "numberbox" !important; |
|||
font-style: normal; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
padding: 16rpx; |
|||
} |
|||
|
|||
.tui-padding-wx{ |
|||
padding: 16rpx; |
|||
} |
|||
|
|||
.tui-icon-reduce:before { |
|||
content: "\e691"; |
|||
} |
|||
|
|||
.tui-icon-plus:before { |
|||
content: "\e605"; |
|||
} |
|||
|
|||
.tui-numberbox { |
|||
display: -webkit-inline-flex; |
|||
display: inline-flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.tui-num-input { |
|||
text-align: center; |
|||
/* margin: 0 12rpx; */ |
|||
font-weight: 400; |
|||
} |
|||
|
|||
.tui-disabled { |
|||
color: #ededed !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,24 @@ |
|||
<template> |
|||
<view class="phoneBinding"> |
|||
<PopManager> |
|||
|
|||
</PopManager> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import PopManager from './PopManager.vue' |
|||
export default { |
|||
components:{ |
|||
PopManager, |
|||
}, |
|||
data(){ |
|||
return{ |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue