331 changed files with 95753 additions and 0 deletions
@ -0,0 +1,15 @@ |
|||
# Maven # |
|||
target/ |
|||
|
|||
# IDEA # |
|||
.idea/ |
|||
*.iml |
|||
*.zip |
|||
# Eclipse # |
|||
.settings/ |
|||
.classpath |
|||
.project |
|||
|
|||
/vue |
|||
/unpackage |
|||
*/vue |
|||
@ -0,0 +1,16 @@ |
|||
{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/ |
|||
// launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数 |
|||
"version": "0.0", |
|||
"configurations": [{ |
|||
"app-plus" : |
|||
{ |
|||
"launchtype" : "local" |
|||
}, |
|||
"default" : |
|||
{ |
|||
"launchtype" : "local" |
|||
}, |
|||
"type" : "uniCloud" |
|||
} |
|||
] |
|||
} |
|||
@ -0,0 +1,505 @@ |
|||
<script> |
|||
import Api from '@/common/api'; |
|||
// #ifdef APP-PLUS |
|||
import APPUpdate from "plugins/APPUpdate/index.js"; |
|||
// #endif |
|||
/** |
|||
* vuex管理登陆状态，具体可以参考官方登陆模板示例 |
|||
*/ |
|||
import { |
|||
mapMutations |
|||
} from 'vuex'; |
|||
export default { |
|||
methods: { |
|||
...mapMutations(['login']) , |
|||
// util.js |
|||
// 微信公众号授权 |
|||
wxAuthorize() { |
|||
let link = window.location.href; |
|||
let params = this._getUrlParams(link); // 地址解析 |
|||
|
|||
// 已经授权登录过的就不用再授权了 |
|||
if (store.state.token) return; |
|||
|
|||
// 如果拿到code，调用授权接口，没有拿到就跳转微信授权链接获取 |
|||
if (params.code) { |
|||
api.wxAuth(params.code); // 调用后台接口，授权 |
|||
} else { |
|||
let appid = 'wx8321531c6046c924'; |
|||
let uri = encodeURIComponent(link); |
|||
let authURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`; |
|||
window.location.href = authURL; |
|||
} |
|||
}, |
|||
async typeGoodsList() { |
|||
let params = {}; |
|||
let list = await Api.apiCall('get', Api.goods.typeGoodsList, params); |
|||
this.$db.set('categoryList', list) |
|||
}, |
|||
async areaGoodsList() { |
|||
let params = {}; |
|||
let list = await Api.apiCall('get', Api.goods.areaGoodsList, params); |
|||
this.$db.set('areaGoodsList', list) |
|||
}, |
|||
async sysInfoMethod() { |
|||
let params = {}; |
|||
let list = await Api.apiCall('get', Api.index.sysInfo, params); |
|||
this.$db.set('sysInfo', list) |
|||
}, |
|||
|
|||
}, |
|||
onLaunch: function() { |
|||
let userInfo = uni.getStorageSync('userInfo') || ''; |
|||
let token = uni.getStorageSync('token') || ''; |
|||
if(token){ |
|||
//更新登陆状态 |
|||
uni.getStorage({ |
|||
key: 'userInfo', |
|||
success: (res) => { |
|||
this.login(res.data); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
let isWeiXin = this.$common.isWeiXinBrowser() |
|||
if (isWeiXin) { |
|||
this.wxAuthorize() |
|||
} |
|||
this.typeGoodsList(); |
|||
this.areaGoodsList(); |
|||
this.sysInfoMethod(); |
|||
// #ifdef APP-PLUS |
|||
APPUpdate(); |
|||
// uni.showToast({ |
|||
// title: "正式版本新版本哦2", |
|||
// icon: "none" |
|||
// }); |
|||
// #endif |
|||
}, |
|||
onShow: function() { |
|||
console.log('App Show') |
|||
}, |
|||
onHide: function() { |
|||
console.log('App Hide') |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
/* |
|||
全局公共样式和字体图标 |
|||
*/ |
|||
@font-face { |
|||
font-family: yticon; |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
src: url('https://at.alicdn.com/t/font_1078604_w4kpxh0rafi.ttf') format('truetype'); |
|||
} |
|||
|
|||
.yticon { |
|||
font-family: "yticon" !important; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
.icon-yiguoqi1:before { |
|||
content: "\e700"; |
|||
} |
|||
|
|||
.icon-iconfontshanchu1:before { |
|||
content: "\e619"; |
|||
} |
|||
|
|||
.icon-iconfontweixin:before { |
|||
content: "\e611"; |
|||
} |
|||
|
|||
.icon-alipay:before { |
|||
content: "\e636"; |
|||
} |
|||
|
|||
.icon-shang:before { |
|||
content: "\e624"; |
|||
} |
|||
|
|||
.icon-shouye:before { |
|||
content: "\e626"; |
|||
} |
|||
|
|||
.icon-shanchu4:before { |
|||
content: "\e622"; |
|||
} |
|||
|
|||
.icon-xiaoxi:before { |
|||
content: "\e618"; |
|||
} |
|||
|
|||
.icon-jiantour-copy:before { |
|||
content: "\e600"; |
|||
} |
|||
|
|||
.icon-fenxiang2:before { |
|||
content: "\e61e"; |
|||
} |
|||
|
|||
.icon-pingjia:before { |
|||
content: "\e67b"; |
|||
} |
|||
|
|||
.icon-daifukuan:before { |
|||
content: "\e68f"; |
|||
} |
|||
|
|||
.icon-pinglun-copy:before { |
|||
content: "\e612"; |
|||
} |
|||
|
|||
.icon-dianhua-copy:before { |
|||
content: "\e621"; |
|||
} |
|||
|
|||
.icon-shoucang:before { |
|||
content: "\e645"; |
|||
} |
|||
|
|||
.icon-xuanzhong2:before { |
|||
content: "\e62f"; |
|||
} |
|||
|
|||
.icon-gouwuche_:before { |
|||
content: "\e630"; |
|||
} |
|||
|
|||
.icon-icon-test:before { |
|||
content: "\e60c"; |
|||
} |
|||
|
|||
.icon-icon-test1:before { |
|||
content: "\e632"; |
|||
} |
|||
|
|||
.icon-bianji:before { |
|||
content: "\e646"; |
|||
} |
|||
|
|||
.icon-jiazailoading-A:before { |
|||
content: "\e8fc"; |
|||
} |
|||
|
|||
.icon-zuoshang:before { |
|||
content: "\e613"; |
|||
} |
|||
|
|||
.icon-jia2:before { |
|||
content: "\e60a"; |
|||
} |
|||
|
|||
.icon-huifu:before { |
|||
content: "\e68b"; |
|||
} |
|||
|
|||
.icon-sousuo:before { |
|||
content: "\e7ce"; |
|||
} |
|||
|
|||
.icon-arrow-fine-up:before { |
|||
content: "\e601"; |
|||
} |
|||
|
|||
.icon-hot:before { |
|||
content: "\e60e"; |
|||
} |
|||
|
|||
.icon-lishijilu:before { |
|||
content: "\e6b9"; |
|||
} |
|||
|
|||
.icon-zhengxinchaxun-zhifubaoceping-:before { |
|||
content: "\e616"; |
|||
} |
|||
|
|||
.icon-naozhong:before { |
|||
content: "\e64a"; |
|||
} |
|||
|
|||
.icon-xiatubiao--copy:before { |
|||
content: "\e608"; |
|||
} |
|||
|
|||
.icon-shoucang_xuanzhongzhuangtai:before { |
|||
content: "\e6a9"; |
|||
} |
|||
|
|||
.icon-jia1:before { |
|||
content: "\e61c"; |
|||
} |
|||
|
|||
.icon-bangzhu1:before { |
|||
content: "\e63d"; |
|||
} |
|||
|
|||
.icon-arrow-left-bottom:before { |
|||
content: "\e602"; |
|||
} |
|||
|
|||
.icon-arrow-right-bottom:before { |
|||
content: "\e603"; |
|||
} |
|||
|
|||
.icon-arrow-left-top:before { |
|||
content: "\e604"; |
|||
} |
|||
|
|||
.icon-icon--:before { |
|||
content: "\e744"; |
|||
} |
|||
|
|||
.icon-zuojiantou-up:before { |
|||
content: "\e605"; |
|||
} |
|||
|
|||
.icon-xia:before { |
|||
content: "\e62d"; |
|||
} |
|||
|
|||
.icon--jianhao:before { |
|||
content: "\e60b"; |
|||
} |
|||
|
|||
.icon-weixinzhifu:before { |
|||
content: "\e61a"; |
|||
} |
|||
|
|||
.icon-comment:before { |
|||
content: "\e64f"; |
|||
} |
|||
|
|||
.icon-weixin:before { |
|||
content: "\e61f"; |
|||
} |
|||
|
|||
.icon-fenlei1:before { |
|||
content: "\e620"; |
|||
} |
|||
|
|||
.icon-erjiye-yucunkuan:before { |
|||
content: "\e623"; |
|||
} |
|||
|
|||
.icon-Group-:before { |
|||
content: "\e688"; |
|||
} |
|||
|
|||
.icon-you:before { |
|||
content: "\e606"; |
|||
} |
|||
|
|||
.icon-forward:before { |
|||
content: "\e607"; |
|||
} |
|||
|
|||
.icon-tuijian:before { |
|||
content: "\e610"; |
|||
} |
|||
|
|||
.icon-bangzhu:before { |
|||
content: "\e679"; |
|||
} |
|||
|
|||
.icon-share:before { |
|||
content: "\e656"; |
|||
} |
|||
|
|||
.icon-yiguoqi:before { |
|||
content: "\e997"; |
|||
} |
|||
|
|||
.icon-shezhi1:before { |
|||
content: "\e61d"; |
|||
} |
|||
|
|||
.icon-fork:before { |
|||
content: "\e61b"; |
|||
} |
|||
|
|||
.icon-kafei:before { |
|||
content: "\e66a"; |
|||
} |
|||
|
|||
.icon-iLinkapp-:before { |
|||
content: "\e654"; |
|||
} |
|||
|
|||
.icon-saomiao:before { |
|||
content: "\e60d"; |
|||
} |
|||
|
|||
.icon-shezhi:before { |
|||
content: "\e60f"; |
|||
} |
|||
|
|||
.icon-shouhoutuikuan:before { |
|||
content: "\e631"; |
|||
} |
|||
|
|||
.icon-gouwuche:before { |
|||
content: "\e609"; |
|||
} |
|||
|
|||
.icon-dizhi:before { |
|||
content: "\e614"; |
|||
} |
|||
|
|||
.icon-fenlei:before { |
|||
content: "\e706"; |
|||
} |
|||
|
|||
.icon-xingxing:before { |
|||
content: "\e70b"; |
|||
} |
|||
|
|||
.icon-tuandui:before { |
|||
content: "\e633"; |
|||
} |
|||
|
|||
.icon-zuanshi:before { |
|||
content: "\e615"; |
|||
} |
|||
|
|||
.icon-zuo:before { |
|||
content: "\e63c"; |
|||
} |
|||
|
|||
.icon-shoucang2:before { |
|||
content: "\e62e"; |
|||
} |
|||
|
|||
.icon-shouhuodizhi:before { |
|||
content: "\e712"; |
|||
} |
|||
|
|||
.icon-yishouhuo:before { |
|||
content: "\e71a"; |
|||
} |
|||
|
|||
.icon-dianzan-ash:before { |
|||
content: "\e617"; |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
view, |
|||
scroll-view, |
|||
swiper, |
|||
swiper-item, |
|||
cover-view, |
|||
cover-image, |
|||
icon, |
|||
text, |
|||
rich-text, |
|||
progress, |
|||
button, |
|||
checkbox, |
|||
form, |
|||
input, |
|||
label, |
|||
radio, |
|||
slider, |
|||
switch, |
|||
textarea, |
|||
navigator, |
|||
audio, |
|||
camera, |
|||
image, |
|||
video { |
|||
box-sizing: border-box; |
|||
} |
|||
/* 骨架屏替代方案 */ |
|||
.Skeleton { |
|||
background: #f3f3f3; |
|||
padding: 20upx 0; |
|||
border-radius: 8upx; |
|||
} |
|||
|
|||
/* 图片载入替代方案 */ |
|||
.image-wrapper { |
|||
font-size: 0; |
|||
background: #f3f3f3; |
|||
border-radius: 4px; |
|||
|
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
transition: .6s; |
|||
opacity: 0; |
|||
|
|||
&.loaded { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.clamp { |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
display: block; |
|||
} |
|||
|
|||
.common-hover { |
|||
background: #f5f5f5; |
|||
} |
|||
|
|||
/*边框*/ |
|||
.b-b:after, |
|||
.b-t:after { |
|||
position: absolute; |
|||
z-index: 3; |
|||
left: 0; |
|||
right: 0; |
|||
height: 0; |
|||
content: ''; |
|||
transform: scaleY(.5); |
|||
border-bottom: 1px solid $border-color-base; |
|||
} |
|||
|
|||
.b-b:after { |
|||
bottom: 0; |
|||
} |
|||
|
|||
.b-t:after { |
|||
top: 0; |
|||
} |
|||
|
|||
/* button样式改写 */ |
|||
uni-button, |
|||
button { |
|||
height: 80upx; |
|||
line-height: 80upx; |
|||
font-size: $font-lg + 2upx; |
|||
font-weight: normal; |
|||
|
|||
&.no-border:before, |
|||
&.no-border:after { |
|||
border: 0; |
|||
} |
|||
} |
|||
|
|||
uni-button[type=default], |
|||
button[type=default] { |
|||
color: $font-color-dark; |
|||
} |
|||
|
|||
/* input 样式 */ |
|||
.input-placeholder { |
|||
color: #999999; |
|||
} |
|||
|
|||
.placeholder { |
|||
color: #999999; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,672 @@ |
|||
/* 用户 */ |
|||
const userInfo = { |
|||
status: 1, |
|||
data: { |
|||
id: 1, |
|||
mobile: 18888888888, |
|||
nickname: 'Leo yo', |
|||
portrait: 'http://img.61ef.cn/news/201409/28/2014092805595807.jpg' |
|||
}, |
|||
msg: '提示' |
|||
} |
|||
/* 首页轮播图 */ |
|||
const carouselList = [{ |
|||
src: "/static/temp/banner3.jpg", |
|||
background: "rgb(203, 87, 60)", |
|||
}, |
|||
{ |
|||
src: "/static/temp/banner2.jpg", |
|||
background: "rgb(205, 215, 218)", |
|||
}, |
|||
{ |
|||
src: "/static/temp/banner4.jpg", |
|||
background: "rgb(183, 73, 69)", |
|||
} |
|||
] |
|||
/* 商品列表 */ |
|||
const goodsList = [{ |
|||
image: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553187020783&di=bac9dd78b36fd984502d404d231011c0&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201609%2F26%2F20160926173213_s5adi.jpeg", |
|||
image2: "http://pic.rmb.bdstatic.com/819a044daa66718c2c40a48c1ba971e6.jpeg", |
|||
image3: "http://img001.hc360.cn/y5/M00/1B/45/wKhQUVYFE0uEZ7zVAAAAAMj3H1w418.jpg", |
|||
title: "古黛妃 短袖t恤女夏装2019新款韩版宽松", |
|||
price: 179, |
|||
sales: 61, |
|||
}, |
|||
{ |
|||
image: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4031878334,2682695508&fm=11&gp=0.jpg", |
|||
image2: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554013048&di=a3dc9fd1406dd7bad7fbb97b5489ec04&imgtype=jpg&er=1&src=http%3A%2F%2Fimg009.hc360.cn%2Fhb%2FnKo44ac2656F831c684507E3Da0E3a26841.jpg", |
|||
image3: "http://img.zcool.cn/community/017a4e58b4eab6a801219c77084373.jpg", |
|||
title: "潘歌针织连衣裙", |
|||
price: 78, |
|||
sales: 16, |
|||
}, |
|||
{ |
|||
image: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1620020012,789258862&fm=26&gp=0.jpg", |
|||
image2: "http://m.360buyimg.com/n12/jfs/t247/42/1078640382/162559/3628a0b/53f5ad09N0dd79894.jpg%21q70.jpg", |
|||
image3: "http://ikids.61kids.com.cn/upload/2018-12-29/1546070626796114.jpg", |
|||
title: "巧谷2019春夏季新品新款女装", |
|||
price: 108.8, |
|||
sales: 5, |
|||
}, { |
|||
image: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=756705744,3505936868&fm=11&gp=0.jpg", |
|||
image2: "http://images.jaadee.com/images/201702/goods_img/30150_d85aed83521.jpg", |
|||
image3: "http://img13.360buyimg.com/popWaterMark/jfs/t865/120/206320620/138889/dcc94caa/550acedcN613e2a9d.jpg", |
|||
title: "私萱连衣裙", |
|||
price: 265, |
|||
sales: 88, |
|||
}, { |
|||
image: "https://img13.360buyimg.com/n8/jfs/t1/30343/20/1029/481370/5c449438Ecb46a15b/2b2adccb6dc742fd.jpg", |
|||
image2: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553418265666&di=d4a7f7eb0ae3c859edeb921641ee1c3a&imgtype=0&src=http%3A%2F%2Fimg003.hc360.cn%2Fy3%2FM02%2FF8%2F9F%2FwKhQh1TuSkGELIlQAAAAAPuLl4M987.jpg", |
|||
image3: "http://img.ef43.com.cn/product/2016/8/05100204b0c.jpg", |
|||
title: "娇诗茹 ulzzang原宿风学生潮韩版春夏短", |
|||
price: 422, |
|||
sales: 137, |
|||
}, { |
|||
image: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553187020783&di=bac9dd78b36fd984502d404d231011c0&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201609%2F26%2F20160926173213_s5adi.jpeg", |
|||
image2: "http://image5.suning.cn/uimg/b2c/newcatentries/0070158827-000000000622091973_2_800x800.jpg", |
|||
image3: "http://img.61ef.cn/news/201903/20/2019032009251784.jpg", |
|||
title: "古黛妃 短袖t恤女夏装2019新款韩版宽松", |
|||
price: 179, |
|||
sales: 95, |
|||
}, |
|||
] |
|||
|
|||
/* 购物车 */ |
|||
const cartList = [{ |
|||
id: 1, |
|||
image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553005139&di=3368549edf9eee769a9bcb3fbbed2504&imgtype=jpg&er=1&src=http%3A%2F%2Fimg002.hc360.cn%2Fy3%2FM01%2F5F%2FDB%2FwKhQh1T7iceEGRdWAAAAADQvqk8733.jpg', |
|||
attr_val: '春装款 L', |
|||
stock: 15, |
|||
title: 'OVBE 长袖风衣', |
|||
price: 278.00, |
|||
number: 1 |
|||
}, |
|||
{ |
|||
id: 3, |
|||
image: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2319343996,1107396922&fm=26&gp=0.jpg', |
|||
attr_val: '激光导航 扫拖一体', |
|||
stock: 3, |
|||
title: '科沃斯 Ecovacs 扫地机器人', |
|||
price: 1348.00, |
|||
number: 5 |
|||
}, |
|||
{ |
|||
id: 4, |
|||
image: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2668268226,1765897385&fm=26&gp=0.jpg', |
|||
attr_val: 'XL', |
|||
stock: 55, |
|||
title: '朵绒菲小西装', |
|||
price: 175.88, |
|||
number: 1 |
|||
}, |
|||
{ |
|||
id: 5, |
|||
image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552410549432&di=06dd3758053fb6d6362516f30a42d055&imgtype=0&src=http%3A%2F%2Fimgcache.mysodao.com%2Fimg3%2FM0A%2F67%2F42%2FCgAPD1vNSsHNm-TnAAEy61txQb4543_400x400x2.JPG', |
|||
attr_val: '520 #粉红色', |
|||
stock: 15, |
|||
title: '迪奥（Dior）烈艳唇膏', |
|||
price: 1089.00, |
|||
number: 1 |
|||
}, |
|||
{ |
|||
id: 6, |
|||
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1031875829,2994442603&fm=26&gp=0.jpg', |
|||
attr_val: '樱花味润手霜 30ml', |
|||
stock: 15, |
|||
title: "欧舒丹（L'OCCITANE）乳木果", |
|||
price: 128, |
|||
number: 1 |
|||
}, |
|||
{ |
|||
id: 7, |
|||
image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553007107&di=390915aa8a022cf0b03c03340881b0e7&imgtype=jpg&er=1&src=http%3A%2F%2Fimg13.360buyimg.com%2Fn0%2Fjfs%2Ft646%2F285%2F736444951%2F480473%2Faa701c97%2F548176feN10c9ed7b.jpg', |
|||
attr_val: '特级 12个', |
|||
stock: 7, |
|||
title: '新疆阿克苏苹果 特级', |
|||
price: 58.8, |
|||
number: 10 |
|||
}, |
|||
{ |
|||
id: 8, |
|||
image: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2319343996,1107396922&fm=26&gp=0.jpg', |
|||
attr_val: '激光导航 扫拖一体', |
|||
stock: 15, |
|||
title: '科沃斯 Ecovacs 扫地机器人', |
|||
price: 1348.00, |
|||
number: 1 |
|||
}, |
|||
{ |
|||
id: 9, |
|||
image: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2668268226,1765897385&fm=26&gp=0.jpg', |
|||
attr_val: 'XL', |
|||
stock: 55, |
|||
title: '朵绒菲小西装', |
|||
price: 175.88, |
|||
number: 1 |
|||
}, |
|||
{ |
|||
id: 10, |
|||
image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552410549432&di=06dd3758053fb6d6362516f30a42d055&imgtype=0&src=http%3A%2F%2Fimgcache.mysodao.com%2Fimg3%2FM0A%2F67%2F42%2FCgAPD1vNSsHNm-TnAAEy61txQb4543_400x400x2.JPG', |
|||
attr_val: '520 #粉红色', |
|||
stock: 15, |
|||
title: '迪奥（Dior）烈艳唇膏', |
|||
price: 1089.00, |
|||
number: 1 |
|||
}, |
|||
{ |
|||
id: 11, |
|||
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1031875829,2994442603&fm=26&gp=0.jpg', |
|||
attr_val: '樱花味润手霜 30ml', |
|||
stock: 15, |
|||
title: "欧舒丹（L'OCCITANE）乳木果", |
|||
price: 128, |
|||
number: 1 |
|||
}, |
|||
{ |
|||
id: 12, |
|||
image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553007107&di=390915aa8a022cf0b03c03340881b0e7&imgtype=jpg&er=1&src=http%3A%2F%2Fimg13.360buyimg.com%2Fn0%2Fjfs%2Ft646%2F285%2F736444951%2F480473%2Faa701c97%2F548176feN10c9ed7b.jpg', |
|||
attr_val: '特级 12个', |
|||
stock: 7, |
|||
title: '新疆阿克苏苹果 特级', |
|||
price: 58.8, |
|||
number: 10 |
|||
}, |
|||
{ |
|||
id: 13, |
|||
image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552405266625&di=a703f2b2cdb0fe7f3f05f62dd91307ab&imgtype=0&src=http%3A%2F%2Fwww.78.cn%2Fzixun%2Fnews%2Fupload%2F20190214%2F1550114706486250.jpg', |
|||
attr_val: '春装款/m', |
|||
stock: 15, |
|||
title: '女装2019春秋新款', |
|||
price: 420.00, |
|||
number: 1 |
|||
} |
|||
]; |
|||
//详情展示页面
|
|||
const detailData = { |
|||
title: '纯种金毛幼犬活体有血统证书', |
|||
title2: '拆家小能手 你值得拥有', |
|||
favorite: true, |
|||
imgList: [{ |
|||
src: 'http://img0.imgtn.bdimg.com/it/u=2396068252,4277062836&fm=26&gp=0.jpg' |
|||
}, |
|||
{ |
|||
src: 'http://img.pconline.com.cn/images/upload/upc/tx/itbbs/1309/06/c4/25310541_1378426131583.jpg' |
|||
}, |
|||
{ |
|||
src: 'http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1610/26/c4/28926240_1477451226577_mthumb.jpg' |
|||
}, |
|||
{ |
|||
src: 'http://picture.ik123.com/uploads/allimg/190219/12-1Z219105139.jpg' |
|||
}, |
|||
], |
|||
episodeList: [ |
|||
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24 |
|||
], |
|||
guessList: [{ |
|||
src: 'http://img.52z.com/upload/news/image/20180530/20180530081619_31029.jpg', |
|||
title: '猫眼指甲油', |
|||
title2: '独树一帜的免照灯猫眼指甲' |
|||
}, |
|||
{ |
|||
src: 'http://m.china-7.net/uploads/14778449362891.jpg', |
|||
title: '创意屋', |
|||
title2: '创意屋形上下双层高低床' |
|||
}, |
|||
{ |
|||
src: 'http://www.k73.com/up/allimg/130415/22-130415093527.jpg', |
|||
title: 'MissCandy 指甲油', |
|||
title2: '十分适合喜欢素净的妹纸，尽显淡雅的气质' |
|||
}, |
|||
{ |
|||
src: 'http://img0.imgtn.bdimg.com/it/u=2108933440,2194129200&fm=214&gp=0.jpg ', |
|||
title: 'RMK 2017星空海蓝唇釉', |
|||
title2: '唇釉质地，上唇后很滋润。少女也会心动的蓝色，透明液体形状。' |
|||
} |
|||
], |
|||
evaList: [{ |
|||
src: 'http://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/77c6a7efce1b9d1663174705fbdeb48f8d546486.jpg', |
|||
nickname: 'Ranth Allngal', |
|||
time: '09-20 12:54', |
|||
zan: '54', |
|||
content: '评论不要太苛刻，不管什么产品都会有瑕疵，客服也说了可以退货并且商家承担运费，我觉得至少态度就可以给五星。' |
|||
}, |
|||
{ |
|||
src: 'http://img0.imgtn.bdimg.com/it/u=2396068252,4277062836&fm=26&gp=0.jpg', |
|||
nickname: 'Ranth Allngal', |
|||
time: '09-20 12:54', |
|||
zan: '54', |
|||
content: '楼上说的好有道理。' |
|||
} |
|||
] |
|||
} |
|||
const shareList = [{ |
|||
type: 1, |
|||
icon: '/static/temp/share_wechat.png', |
|||
text: '微信好友', |
|||
provider: 'weixin', |
|||
scene: 'WXSceneSession', |
|||
typeIcon: 0 |
|||
}, |
|||
{ |
|||
type: 2, |
|||
icon: '/static/temp/share_moment.png', |
|||
text: '朋友圈', |
|||
provider: 'weixin', |
|||
scene: 'WXSenceTimeline', |
|||
typeIcon: 0 |
|||
}, |
|||
{ |
|||
type: 3, |
|||
icon: '/static/temp/share_qq.png', |
|||
text: 'QQ好友', |
|||
provider: 'qq', |
|||
scene: 'WXSceneSession', |
|||
typeIcon: 1 |
|||
}, |
|||
{ |
|||
type: 4, |
|||
icon: '/static/temp/share_qqzone.png', |
|||
text: 'QQ空间', |
|||
provider: 'qq', |
|||
scene: 'WXSenceTimeline', |
|||
typeIcon: 1 |
|||
} |
|||
] |
|||
const lazyLoadList = [{ |
|||
src: 'http://img0.imgtn.bdimg.com/it/u=2396068252,4277062836&fm=26&gp=0.jpg' |
|||
}, |
|||
{ |
|||
src: 'http://img.pconline.com.cn/images/upload/upc/tx/itbbs/1309/06/c4/25310541_1378426131583.jpg' |
|||
}, |
|||
{ |
|||
src: 'http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1610/26/c4/28926240_1477451226577_mthumb.jpg' |
|||
}, |
|||
{ |
|||
src: 'http://picture.ik123.com/uploads/allimg/190219/12-1Z219105139.jpg' |
|||
}, |
|||
{ |
|||
src: 'http://img5.imgtn.bdimg.com/it/u=2904900134,438461613&fm=26&gp=0.jpg' |
|||
}, |
|||
{ |
|||
src: 'http://img1.imgtn.bdimg.com/it/u=1690475408,2565370337&fm=26&gp=0.jpg' |
|||
}, |
|||
{ |
|||
src: 'http://img.99114.com/group1/M00/7F/99/wKgGS1kVrPGAe5LmAAU2KrJmb3Q923_600_600.jpg' |
|||
}, |
|||
{ |
|||
src: 'http://img4.imgtn.bdimg.com/it/u=261047209,372231813&fm=26&gp=0.jpg' |
|||
}, |
|||
{ |
|||
src: 'http://i2.17173cdn.com/i7mz64/YWxqaGBf/tu17173com/20150107/eMyVMObjlbcvDEv.jpg' |
|||
}, |
|||
{ |
|||
src: 'http://img008.hc360.cn/m4/M02/E7/87/wKhQ6FSrfU6EfUoyAAAAAITAfyc280.jpg' |
|||
}, |
|||
{ |
|||
src: 'http://pic1.win4000.com/wallpaper/d/5991569950166.jpg' |
|||
}, |
|||
{ |
|||
src: 'http://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/6f061d950a7b0208f9fe945e60d9f2d3572cc85e.jpg' |
|||
}, |
|||
{ |
|||
src: 'http://pic41.nipic.com/20140429/18169759_125841756000_2.jpg' |
|||
}, |
|||
{ |
|||
src: 'http://www.k73.com/up/allimg/130415/22-130415093527.jpg' |
|||
}, |
|||
{ |
|||
src: 'http://img.52z.com/upload/news/image/20180530/20180530081619_31029.jpg' |
|||
}, |
|||
{ |
|||
src: 'http://b-ssl.duitang.com/uploads/item/201410/02/20141002111638_tXAzU.jpeg' |
|||
}, |
|||
{ |
|||
src: 'http://img2.ph.126.net/C4JW6f57QWSB21-8jh2UGQ==/1762596304262286698.jpg' |
|||
}, |
|||
{ |
|||
src: 'http://att.bbs.duowan.com/forum/201405/17/190257nzcvkkdg6w2e8226.jpg' |
|||
}, |
|||
{ |
|||
src: 'http://attach.bbs.miui.com/forum/201504/10/223644v3intigyvva0vgym.jpg' |
|||
}, |
|||
{ |
|||
src: 'http://pic1.win4000.com/mobile/3/57888a298d61d.jpg' |
|||
}, |
|||
] |
|||
|
|||
const orderList = [{ |
|||
time: '2019-04-06 11:37', |
|||
state: 1, |
|||
goodsList: [{ |
|||
image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553187020783&di=bac9dd78b36fd984502d404d231011c0&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201609%2F26%2F20160926173213_s5adi.jpeg', |
|||
}, |
|||
{ |
|||
image: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4031878334,2682695508&fm=11&gp=0.jpg', |
|||
}, |
|||
{ |
|||
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1620020012,789258862&fm=26&gp=0.jpg', |
|||
}, |
|||
{ |
|||
image: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4031878334,2682695508&fm=11&gp=0.jpg', |
|||
}, |
|||
{ |
|||
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1620020012,789258862&fm=26&gp=0.jpg', |
|||
}, |
|||
{ |
|||
image: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4031878334,2682695508&fm=11&gp=0.jpg', |
|||
}, |
|||
{ |
|||
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1620020012,789258862&fm=26&gp=0.jpg', |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
time: '2019-04-06 11:37', |
|||
state: 9, |
|||
goodsList: [{ |
|||
title: '古黛妃 短袖t恤女 春夏装2019新款韩版宽松', |
|||
price: 179.5, |
|||
image: 'https://img13.360buyimg.com/n8/jfs/t1/30343/20/1029/481370/5c449438Ecb46a15b/2b2adccb6dc742fd.jpg', |
|||
number: 1, |
|||
attr: '珊瑚粉 M' |
|||
}] |
|||
}, |
|||
{ |
|||
time: '2019-04-06 11:37', |
|||
state: 1, |
|||
goodsList: [{ |
|||
image: 'https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i2/2120460599/O1CN01LBPS4C1GINkwsOTXS_!!2120460599.jpg_430x430q90.jpg', |
|||
}, |
|||
{ |
|||
image: 'https://img.alicdn.com/imgextra/i2/1069876356/TB2ocTQG4WYBuNjy1zkXXXGGpXa_!!1069876356.jpg_430x430q90.jpg', |
|||
}, |
|||
{ |
|||
image: 'https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i4/2120460599/O1CN01YsmgwZ1GINkv38rkn_!!2120460599.jpg_430x430q90.jpg', |
|||
}, |
|||
] |
|||
}, |
|||
{ |
|||
time: '2019-04-06 11:37', |
|||
state: 1, |
|||
goodsList: [{ |
|||
title: '回力女鞋高帮帆布鞋女学生韩版鞋子女2019潮鞋女鞋新款春季板鞋女', |
|||
price: 69, |
|||
image: 'https://img.alicdn.com/imgextra/i3/2128794607/TB2gzzoc41YBuNjy1zcXXbNcXXa_!!2128794607.jpg_430x430q90.jpg', |
|||
number: 1, |
|||
attr: '白色-高帮 39' |
|||
}] |
|||
}, |
|||
{ |
|||
time: '2019-04-06 11:37', |
|||
state: 1, |
|||
goodsList: [{ |
|||
image: 'https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i4/3358098495/O1CN01dhYyid2Ccl5MWLDok_!!3358098495.jpg_430x430q90.jpg', |
|||
}, |
|||
{ |
|||
image: 'https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i3/3358098495/O1CN01AWsnFA2Ccl5OzvqsL_!!3358098495.jpg_430x430q90.jpg', |
|||
}, |
|||
] |
|||
}, |
|||
{ |
|||
time: '2019-04-06 11:37', |
|||
state: 1, |
|||
goodsList: [{ |
|||
image: 'https://img.alicdn.com/imgextra/i4/3470687433/O1CN0124mMQOSERr18L1h_!!3470687433.jpg_430x430q90.jpg', |
|||
}, |
|||
{ |
|||
image: 'https://img.alicdn.com/imgextra/i3/2888462616/O1CN01ERra5J1VCAbZaKI5n_!!0-item_pic.jpg_430x430q90.jpg', |
|||
}, |
|||
{ |
|||
image: 'https://gd3.alicdn.com/imgextra/i3/819381730/O1CN01YV4mXj1OeNhQIhQlh_!!819381730.jpg_400x400.jpg', |
|||
}, |
|||
] |
|||
} |
|||
|
|||
] |
|||
const cateList = [{ |
|||
id: 1, |
|||
name: '手机数码' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '礼品鲜花' |
|||
}, |
|||
{ |
|||
id: 3, |
|||
name: '男装女装' |
|||
}, |
|||
{ |
|||
id: 4, |
|||
name: '母婴用品' |
|||
}, |
|||
{ |
|||
id: 5, |
|||
pid: 1, |
|||
name: '手机通讯' |
|||
}, |
|||
{ |
|||
id: 6, |
|||
pid: 1, |
|||
name: '运营商' |
|||
}, |
|||
{ |
|||
id: 8, |
|||
pid: 5, |
|||
name: '全面屏手机', |
|||
picture: '/static/temp/cate2.jpg' |
|||
}, |
|||
{ |
|||
id: 9, |
|||
pid: 5, |
|||
name: '游戏手机', |
|||
picture: '/static/temp/cate3.jpg' |
|||
}, |
|||
{ |
|||
id: 10, |
|||
pid: 5, |
|||
name: '老人机', |
|||
picture: '/static/temp/cate1.jpg' |
|||
}, |
|||
{ |
|||
id: 11, |
|||
pid: 5, |
|||
name: '拍照手机', |
|||
picture: '/static/temp/cate4.jpg' |
|||
}, |
|||
{ |
|||
id: 12, |
|||
pid: 5, |
|||
name: '女性手机', |
|||
picture: '/static/temp/cate5.jpg' |
|||
}, |
|||
{ |
|||
id: 14, |
|||
pid: 6, |
|||
name: '合约机', |
|||
picture: '/static/temp/cate1.jpg' |
|||
}, |
|||
{ |
|||
id: 15, |
|||
pid: 6, |
|||
name: '选好卡', |
|||
picture: '/static/temp/cate4.jpg' |
|||
}, |
|||
{ |
|||
id: 16, |
|||
pid: 6, |
|||
name: '办套餐', |
|||
picture: '/static/temp/cate5.jpg' |
|||
}, |
|||
{ |
|||
id: 17, |
|||
pid: 2, |
|||
name: '礼品', |
|||
}, |
|||
{ |
|||
id: 18, |
|||
pid: 2, |
|||
name: '鲜花', |
|||
}, |
|||
{ |
|||
id: 19, |
|||
pid: 17, |
|||
name: '公益摆件', |
|||
picture: '/static/temp/cate7.jpg' |
|||
}, |
|||
{ |
|||
id: 20, |
|||
pid: 17, |
|||
name: '创意礼品', |
|||
picture: '/static/temp/cate8.jpg' |
|||
}, |
|||
{ |
|||
id: 21, |
|||
pid: 18, |
|||
name: '鲜花', |
|||
picture: '/static/temp/cate9.jpg' |
|||
}, |
|||
{ |
|||
id: 22, |
|||
pid: 18, |
|||
name: '每周一花', |
|||
picture: '/static/temp/cate10.jpg' |
|||
}, |
|||
{ |
|||
id: 23, |
|||
pid: 18, |
|||
name: '卡通花束', |
|||
picture: '/static/temp/cate11.jpg' |
|||
}, |
|||
{ |
|||
id: 24, |
|||
pid: 18, |
|||
name: '永生花', |
|||
picture: '/static/temp/cate12.jpg' |
|||
}, |
|||
{ |
|||
id: 25, |
|||
pid: 3, |
|||
name: '男装' |
|||
}, |
|||
{ |
|||
id: 26, |
|||
pid: 3, |
|||
name: '女装' |
|||
}, |
|||
{ |
|||
id: 27, |
|||
pid: 25, |
|||
name: '男士T恤', |
|||
picture: '/static/temp/cate13.jpg' |
|||
}, |
|||
{ |
|||
id: 28, |
|||
pid: 25, |
|||
name: '男士外套', |
|||
picture: '/static/temp/cate14.jpg' |
|||
}, |
|||
{ |
|||
id: 29, |
|||
pid: 26, |
|||
name: '裙装', |
|||
picture: '/static/temp/cate15.jpg' |
|||
}, |
|||
{ |
|||
id: 30, |
|||
pid: 26, |
|||
name: 'T恤', |
|||
picture: '/static/temp/cate16.jpg' |
|||
}, |
|||
{ |
|||
id: 31, |
|||
pid: 26, |
|||
name: '上装', |
|||
picture: '/static/temp/cate15.jpg' |
|||
}, |
|||
{ |
|||
id: 32, |
|||
pid: 26, |
|||
name: '下装', |
|||
picture: '/static/temp/cate16.jpg' |
|||
}, |
|||
{ |
|||
id: 33, |
|||
pid: 4, |
|||
name: '奶粉', |
|||
}, |
|||
{ |
|||
id: 34, |
|||
pid: 4, |
|||
name: '营养辅食', |
|||
}, |
|||
{ |
|||
id: 35, |
|||
pid: 4, |
|||
name: '童装', |
|||
}, |
|||
{ |
|||
id: 39, |
|||
pid: 4, |
|||
name: '喂养用品', |
|||
}, |
|||
{ |
|||
id: 36, |
|||
pid: 33, |
|||
name: '有机奶粉', |
|||
picture: '/static/temp/cate17.jpg' |
|||
}, |
|||
{ |
|||
id: 37, |
|||
pid: 34, |
|||
name: '果泥/果汁', |
|||
picture: '/static/temp/cate18.jpg' |
|||
}, |
|||
{ |
|||
id: 39, |
|||
pid: 34, |
|||
name: '面条/粥', |
|||
picture: '/static/temp/cate20.jpg' |
|||
}, |
|||
{ |
|||
id: 42, |
|||
pid: 35, |
|||
name: '婴童衣橱', |
|||
picture: '/static/temp/cate19.jpg' |
|||
}, |
|||
{ |
|||
id: 43, |
|||
pid: 39, |
|||
name: '吸奶器', |
|||
picture: '/static/temp/cate21.jpg' |
|||
}, |
|||
{ |
|||
id: 44, |
|||
pid: 39, |
|||
name: '儿童餐具', |
|||
picture: '/static/temp/cate22.jpg' |
|||
}, |
|||
{ |
|||
id: 45, |
|||
pid: 39, |
|||
name: '牙胶安抚', |
|||
picture: '/static/temp/cate23.jpg' |
|||
}, |
|||
{ |
|||
id: 46, |
|||
pid: 39, |
|||
name: '围兜', |
|||
picture: '/static/temp/cate24.jpg' |
|||
}, |
|||
] |
|||
|
|||
export default { |
|||
carouselList, |
|||
cartList, |
|||
detailData, |
|||
lazyLoadList, |
|||
userInfo, |
|||
shareList, |
|||
goodsList, |
|||
orderList, |
|||
cateList |
|||
} |
|||
@ -0,0 +1,38 @@ |
|||
# uniapp |
|||
https://blog.csdn.net/weixin_34337265/article/details/86030756 |
|||
https://blog.csdn.net/Neil_1993/article/details/85691295 |
|||
https://blog.csdn.net/qq_15764943/article/details/85837552 |
|||
#### Description |
|||
{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**} |
|||
|
|||
#### Software Architecture |
|||
Software architecture description |
|||
|
|||
#### Installation |
|||
|
|||
1. xxxx |
|||
2. xxxx |
|||
3. xxxx |
|||
|
|||
#### Instructions |
|||
|
|||
1. xxxx |
|||
2. xxxx |
|||
3. xxxx |
|||
|
|||
#### Contribution |
|||
|
|||
1. Fork the repository |
|||
2. Create Feat_xxx branch |
|||
3. Commit your code |
|||
4. Create Pull Request |
|||
|
|||
|
|||
#### Gitee Feature |
|||
|
|||
1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md |
|||
2. Gitee blog [blog.gitee.com](https://blog.gitee.com) |
|||
3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore) |
|||
4. The most valuable open source project [GVP](https://gitee.com/gvp) |
|||
5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help) |
|||
6. The most popular members [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/) |
|||
@ -0,0 +1,75 @@ |
|||
<<<<<<< HEAD |
|||
# uniapp |
|||
======= |
|||
# orangemall多租户商城后台uni-app前端 |
|||
>>>>>>> d3c4db497ff0a14620ac8c253d9b194cbc87afae |
|||
|
|||
#### 介绍 |
|||
{**以下是码云平台说明，您可以替换此简介** |
|||
码云是 OSCHINA 推出的基于 Git 的代码托管平台（同时支持 SVN）。专为开发者提供稳定、高效、安全的云端软件开发协作平台 |
|||
无论是个人、团队、或是企业，都能够用码云实现代码托管、项目管理、协作开发。企业项目请看 [https://gitee.com/enterprises](https://gitee.com/enterprises)} |
|||
|
|||
#### 软件架构 |
|||
软件架构说明 |
|||
|
|||
|
|||
#### 安装教程 |
|||
<<<<<<< HEAD |
|||
qq 951449465 |
|||
1. 根目录下执行 npm install jweixin-module --save |
|||
|
|||
|
|||
#### 使用说明 |
|||
|
|||
1. xxxx |
|||
2. xxxx |
|||
3. xxxx |
|||
|
|||
#### 参与贡献 |
|||
|
|||
1. Fork 本仓库 |
|||
2. 新建 Feat_xxx 分支 |
|||
3. 提交代码 |
|||
4. 新建 Pull Request |
|||
|
|||
======= |
|||
|
|||
1. xxxx |
|||
2. xxxx |
|||
3. xxxx |
|||
|
|||
#### 使用说明 |
|||
|
|||
1. xxxx |
|||
2. xxxx |
|||
3. xxxx |
|||
|
|||
#### 参与贡献 |
|||
|
|||
1. Fork 本仓库 |
|||
2. 新建 Feat_xxx 分支 |
|||
3. 提交代码 |
|||
4. 新建 Pull Request |
|||
>>>>>>> d3c4db497ff0a14620ac8c253d9b194cbc87afae |
|||
|
|||
|
|||
#### 码云特技 |
|||
|
|||
<<<<<<< HEAD |
|||
1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md |
|||
2. 码云官方博客 [blog.gitee.com](https://blog.gitee.com) |
|||
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目 |
|||
4. [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目 |
|||
5. 码云官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help) |
|||
6. 码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/) |
|||
======= |
|||
1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md |
|||
2. 码云官方博客 [blog.gitee.com](https://blog.gitee.com) |
|||
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目 |
|||
4. [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目 |
|||
5. 码云官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help) |
|||
6. 码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/) |
|||
>>>>>>> d3c4db497ff0a14620ac8c253d9b194cbc87afae |
|||
|
|||
|
|||
现在的分销是 会员注册的时候 填写邀请码，然后我购买分销商品，并且支付成功后，给邀请码的用户反钱 |
|||
@ -0,0 +1,441 @@ |
|||
import store from '../store/index'; |
|||
export default { |
|||
// qq 237524947 wx15d4269d3210863d
|
|||
BASEURI: 'http://mall.yyundong.com/portalapi/api/', |
|||
// BASEURI: 'http://www.yyundong.com:8083/api/',
|
|||
ADMINURI: 'http://mall.yyundong.com/adminapi/', |
|||
ESURI: 'http://www.yyundong.com:8081/', |
|||
h5Appid: 'wxb4660f37187c0b8e', // h5微信登录的appId 暂时测试用
|
|||
source: 1, //1 weixinApplet 2 h5Source 3 pcSource 4 android 5ios
|
|||
es: { |
|||
simpleSearchList: 'esProduct/search/simple', //简单搜索
|
|||
search: 'esProduct/search', //综合搜索、筛选、排序
|
|||
}, |
|||
/** |
|||
* 接口名称 |
|||
*/ |
|||
index: { |
|||
sysInfo: 'single/home/sysInfo', |
|||
submitLocaltion: 'single/home/submitLocaltion', |
|||
getAppletOpenId: 'applet/getAppletOpenId', // 获取openId
|
|||
getWxPhone: 'applet/getWxPhone', // 获取手机号
|
|||
logout: 'single/home/logout', |
|||
appletLogin_by_weixin: 'applet/login_by_weixin1', // 登录(手机号:phone 密码:password)
|
|||
login: 'single/home/login', // 登录(手机号:phone 密码:password)
|
|||
appLogin: 'single/home/appLogin', |
|||
simpleReg: 'single/home/simpleReg', // 登录(手机号:phone 密码:password)
|
|||
home: 'single/home/content', //首页展示
|
|||
home1: 'single/home/content1', //首页展示
|
|||
homeFlashPromotionList: 'single/home/homeFlashPromotionList', // 秒杀列表
|
|||
bannerList: 'single/home/bannerList', // 首页banner
|
|||
updatePassword: 'single/home/updatePassword', // 修改密码
|
|||
loginByCode: 'single/home/loginByCode', // 手机和验证码登录
|
|||
reg: 'single/home/reg', // 注册
|
|||
sendCodes: 'single/home/sms/codes', // 获取验证码
|
|||
acceptCoupon: 'single/sms/add', // 获取优惠券
|
|||
listMemberCoupon: 'single/sms/listMemberCoupon', // 优惠券列表
|
|||
couponList: 'single/home/couponList', // 优惠券
|
|||
selectNotRecive: 'single/home/selectNotRecive', // 可领取的优惠券
|
|||
userInfo: 'single/home/userInfo', // 用户信息
|
|||
userSampleInfo: 'single/home/userSampleInfo', // 用户信息
|
|||
groupActivityDetail: 'single/sms/group.activity.getdetial', // 查询团购详情信息
|
|||
groupActivityList: 'single/sms/groupActivityList', // 查询商品团购列表
|
|||
logs: 'single/home/logs', // 记录日志
|
|||
diyDetail: 'single/sms/diyDetail', |
|||
homeNewProduct: 'single/sms/homeNewProduct/list', //首页新品推荐列表
|
|||
homeBrand: 'single/sms/homeBrand/list', //首页品牌推荐列表
|
|||
homeRecommendProduct: 'single/sms/homeRecommendProduct/list', //首页人气推荐列表
|
|||
homeRecommendSubject: 'single/sms/homeRecommendSubject/list', //首页专题推荐列表
|
|||
nearShopList: 'single/store/dis/shopList', //附近门店
|
|||
nearStoreList: 'single/store/dis/storeList', // 附近商户
|
|||
shoplist: 'single/store/shoplist', //查询门店管理
|
|||
shopDetail: 'single/store/shopDetail', // 门店详情
|
|||
storeClassList: 'single/store/storeClass/list', // 商户内部分类
|
|||
storeCommentList: 'single/store/storeComment/list', // 商户评论
|
|||
noticeList: 'single/home/notice/list', |
|||
noticeDetail: 'single/home/notice/detail', |
|||
}, |
|||
member: { |
|||
applyMember: 'single/user/applyMember', // 会员升级等级
|
|||
memberLevelList: 'single/user/memberLevel/list', // 查询会员等级列表
|
|||
getInviteData: 'single/user/getInviteData', |
|||
inviteUser: 'single/user/inviteUser', |
|||
inviteMoney: 'single/user/inviteMoney', |
|||
currentMember: 'single/user/currentMember', |
|||
updateMember: 'single/user/updateMember', |
|||
resetPassword: 'single/user/resetPassword', |
|||
schoolList: 'single/user/school/list', // 查询学校列表
|
|||
schoolDetail: 'single/user/schoolDetail', // 查询拼团商品详情信息
|
|||
getAreaByPid: 'single/user/getAreaByPid', // 根据pid查询区域
|
|||
bindSchool: 'single/user/bindSchool', // 会员绑定学校
|
|||
bindArea: 'single/user/bindArea', // 会员绑定区域
|
|||
applyStore: 'single/store/applyStore', // 商户入驻
|
|||
storeDetail: 'single/store/detail', // 商户详情
|
|||
storeDetail1: 'single/store/detail1', // 商户详情 带用户
|
|||
store: 'single/store/home', // 商户主页
|
|||
storeList: 'single/store/store/list', // 商户列表
|
|||
memberTagList: 'single/user/memberTag/list', // 商户列表
|
|||
addStoreComment: 'single/store/addStoreComment', // 商户addStoreComment
|
|||
memberBlanceLogList: 'single/user/memberBlanceLog/list', |
|||
}, |
|||
build: { |
|||
getBuildNoticeByPage: 'single/build/getBuildNoticeByPage', // 所有社区和房间
|
|||
getBuildWuyeCompanyByPage: 'single/build/getBuildWuyeCompanyByPage', // 所有社区和房间
|
|||
groupList: 'single/build/groupList', // 所有社区和房间
|
|||
communityList: 'single/build/communityList', // 所有社区和房间
|
|||
nearCommunityList: 'single/build/near/communityList', // 周边社区
|
|||
floorList: 'single/build/floorList', // 所有社区和房间
|
|||
allCommunity: 'single/build/allCommunity', // 所有社区和房间
|
|||
bindCommunity: 'single/build/bindCommunity', // 绑定小区和房间
|
|||
home: 'single/build/home', // 首页内容页信息展示
|
|||
applyCommunity: 'single/build/applyCommunity', // 社区入驻
|
|||
|
|||
|
|||
}, |
|||
goods: { |
|||
tagGoodsList: 'single/pms/tag/goods', // 查询标签商品
|
|||
goodsPromoto: 'single/sms/detail', // 单个商品的优惠详情
|
|||
secskillDetail: 'single/pms/secskill/detail', // 查询秒杀商品详情信息
|
|||
groupGoodsDetail: 'single/pms/goodsGroup/detail', // 查询拼团商品详情信息
|
|||
|
|||
groupHotGoodsList: 'single/pms/groupHotGoods/list', // 查询生效拼团商品列表
|
|||
giftDetail: 'single/pms/gift/detail', // 查询商品详情信息
|
|||
giftList: 'single/pms/gift/list', // 查询商品列表
|
|||
paiMaiDetail: 'single/pms/paimai/detail', // 查询商品详情信息
|
|||
updatePaiMai: 'single/pms/updatePaiMai', // 参与竞价
|
|||
typeGiftList: 'single/pms/typeGiftList', //查询商品类型下的商品列表
|
|||
addView: 'single/pms/addView', // 查询商品详情信息
|
|||
viewList: 'single/pms/viewList', // 查询商品列表
|
|||
|
|||
goodsDetail: 'single/pms/goods/detail', // 查询商品详情信息
|
|||
goodsList: 'single/pms/goods/list', // 查询商品列表
|
|||
productAttrCategoryList: 'single/pms/productAttrCategory/list', // 查询商品属性分类列表
|
|||
categoryList: 'single/pms/productCategory/list', // 查询商品分类列表
|
|||
createGoods: 'single/pms/createGoods', //创建商品
|
|||
brandList: 'single/pms/brand/list', // 根据条件查询所有品牌表列表
|
|||
consultList: 'single/pms/consult/list', // 取某个商品的评价
|
|||
categoryAndGoodsList: 'single/pms/categoryAndGoodsList/list', // 查询商品属性分类列表和商品
|
|||
typeGoodsList: 'single/pms/typeGoodsList', //查询商品类型下的商品列表
|
|||
typeGoodsList1: 'single/pms/typeGoodsList1', //查询商品类型下的商品列表
|
|||
areaGoodsList: 'single/pms/areaGoodsList', //查询商品类型下的商品列表
|
|||
typeList: 'single/pms/typeList', //查询商品类型下的商品列表
|
|||
|
|||
getGoodsTypes: 'single/pms/getGoodsTypes', // 查询分类
|
|||
|
|||
recommendBrand: 'single/pms/recommendBrand/list', // 查询首页推荐品牌
|
|||
newProductList: 'single/pms/newProductList/list', //查询首页新品
|
|||
hotProductList: 'single/pms/hotProductList/list', // 查询热销商品
|
|||
listCollect: 'collection/listCollect', // 显示关注列表
|
|||
deleteCollect: 'collection/delete', // 删除收藏中的某个商品
|
|||
favoriteSave: 'collection/favoriteSave', // 添加/商品收藏
|
|||
listAddress: 'address/list', // 显示所有收货地址
|
|||
deleteAddress: 'address/delete', // 删除
|
|||
addressSave: 'address/save', // 添加
|
|||
setDefaultAddress: 'address/address-set-default', // 设为默认地址
|
|||
getItemDefautl: 'address/getItemDefautl', // 显示默认收货地址
|
|||
|
|||
}, |
|||
order: { |
|||
getRefundReason: 'single/oms/order/getRefundReason', // 查询售后原因
|
|||
saveOmsOrderReturnApply: 'single/oms/saveOmsOrderReturnApply', // 添加售后
|
|||
aftersaleslist: 'single/oms/order/aftersaleslist', // 查询售后列表
|
|||
aftersalesinfo: 'single/oms/aftersalesinfo', // 查询售后详情
|
|||
addGroup: 'single/oms/addGroup', // 发起拼团
|
|||
acceptGroup: 'single/oms/acceptGroup', // 提交拼团
|
|||
sampleOrderList: 'single/oms/sampleOrderList', // 查询订单列表
|
|||
orderList: 'single/oms/order/list', // 查询订单列表
|
|||
orderDetail: 'single/oms/detail', // 查询订单列表
|
|||
preGroupActivityOrder: 'single/oms/preGroupActivityOrder', // 预览订单团购
|
|||
preOrder: 'single/oms/submitPreview', // 预览订单
|
|||
bookOrder: 'single/oms/generateOrder', // 生成订单
|
|||
submitStorePreview: 'single/oms/submitStorePreview', // 预览订单
|
|||
generateStoreOrder: 'single/oms/generateStoreOrder', // 生成订单
|
|||
closeOrder: 'single/oms/closeOrder', // 关闭订单
|
|||
confimDelivery: 'single/oms/confimDelivery', //确认收货
|
|||
applyRefund: 'single/oms/applyRefund', // 申请退款
|
|||
logisticbyapi: 'single/oms/logisticbyapi', // 查看物流
|
|||
orderevaluate: 'single/oms/orderevaluate', //订单评价
|
|||
addCart: 'cart/addCart', // 添加商品到购物车
|
|||
cartList: 'cart/list', // 获取某个会员的购物车列表
|
|||
promotionCartList: 'cart/list/promotion', // 获取某个会员的购物车列表,包括促销信息
|
|||
updateQuantity: 'cart/update/quantity', //修改购物车中某个商品的数量
|
|||
deleteCart: 'cart/delete', // 删除购物车中的某个商品
|
|||
clearCart: 'cart/clear', // 清空购物车
|
|||
|
|||
paymentlist: 'pay/paymentlist', // 查询订单列表
|
|||
|
|||
jifenPay: 'pay/jifenPay', // 积分兑换
|
|||
balancePay: 'pay/balancePay', // 余额支付
|
|||
weixinAppletPay: 'pay/weixinAppletPay', // 微信小程序支付
|
|||
//支付宝
|
|||
aliAppPay: 'aliPay/appPay', // 支付宝app支付
|
|||
aliWapPay: 'aliPay/wapPay', // 支付宝支付
|
|||
wapPayNoSdk: 'aliPay/wapPayNoSdk', // 支付宝支付
|
|||
pcPay: 'aliPay/pcPay', // 支付宝支付
|
|||
aliPay: 'aliPay/tradePay', // 支付宝支付 String authCode, String scene
|
|||
aliPrecreatePay: 'aliPay/tradePrecreatePay', // 支付宝扫码支付
|
|||
aliRefund: 'aliPay/tradePrecreatePay', // 支付宝退款
|
|||
//微信
|
|||
wapPay: 'wxPay/wapPay', //微信H5 支付 注意：必须再web页面中发起支付且域名已添加到开发配置中
|
|||
webPay: 'wxPay/webPay', //公众号支付
|
|||
scanCode1: 'wxPay/scanCode1', //扫码支付模式一 已测试
|
|||
scanCode2: 'wxPay/scanCode2', //扫码支付模式二 已测试
|
|||
appPay: 'wxPay/appPay', //微信APP支付
|
|||
micropay: 'wxPay/micropay', //微信刷卡支付
|
|||
miniAppPay: 'wxPay/miniAppPay', //微信小程序支付
|
|||
refund: 'wxPay/refund', //微信退款 String transactionId,String outTradeNo
|
|||
authCodeToOpenid: 'wxPay/authCodeToOpenid', //openId，采用 网页授权获取 access_token API：SnsAccessTokenApi获取
|
|||
|
|||
//银联支付
|
|||
frontConsume: 'unionPay/frontConsume', //PC网关支付 B2C跟B2B查询区别就在于bizType的不同
|
|||
frontConsume2: 'unionPay/frontConsume2', //B2B的网关支付 B2C跟B2B查询区别就在于bizType的不同
|
|||
wapConsume: 'unionPay/wapConsume', //WAP支付 请在手机paymentlist端访问此action
|
|||
appConsume: 'unionPay/appConsume', //APP支付获取tn
|
|||
frontrefund: 'unionPay/refund', //
|
|||
|
|||
//京东
|
|||
jdappPay: 'JDPay/appPay', //App 支付
|
|||
saveOrder: 'JDPay/saveOrder', //String payType PC H5 支付
|
|||
customerPay: 'JDPay/customerPay', //商户二维码支付
|
|||
fkmPay: 'JDPay/fkmPay', //刷卡支付 String token, String amount
|
|||
jdrefund: 'JDPay/refund', //微信APP支付
|
|||
|
|||
|
|||
}, |
|||
cms: { |
|||
subjectList: 'single/cms/subject/list', // 查询文章列表
|
|||
subjectCategoryList: 'single/cms/subjectCategory/list', // 查询文章分类列表
|
|||
subjectCommentList: 'single/cms/subjectComment/list', // 查询文章评论列表
|
|||
recommendSubjectList: 'single/cms/recommendSubjectList/list', //查询首页推荐文章
|
|||
topicList: 'single/cms/topic/list', // 查询专题列表
|
|||
topicDetail: 'single/cms/topic/detail', // 专题详情
|
|||
subjectDetail: 'single/cms/subject/detail', // 文章详情
|
|||
createSubject: 'single/cms/createSubject', // 创建文章
|
|||
}, |
|||
/** |
|||
商户端后台接口 |
|||
**/ |
|||
admin: { |
|||
|
|||
login: 'sys/sysUser/login', // 登录(手机号:phone 密码:password)
|
|||
orderStatic: 'home/orderStatic', // 订单统计
|
|||
goodsStatic: 'home/goodsStatic', // 商品统计
|
|||
userStatic: 'home/userStatic', //会员统计
|
|||
orderDayStatic: 'home/orderDayStatic', //订单日统计
|
|||
dayStatic: 'home/dayStatic', //订单日统计
|
|||
|
|||
bannerList: 'sms/SmsHomeAdvertise/list', // 首页banner
|
|||
memberList: 'ums/UmsMember/list', // 查询学校列表
|
|||
storeDetail: 'sys/SysStore/storeDetail', // 查询拼团商品详情信息
|
|||
schoolList: 'single/user/school/list', // 查询学校列表
|
|||
schoolDetail: 'single/user/schoolDetail', // 查询拼团商品详情信息
|
|||
getAreaByPid: 'single/user/getAreaByPid', // 根据pid查询区域
|
|||
bindSchool: 'single/user/bindSchool', // 会员绑定学校
|
|||
bindArea: 'single/user/bindArea', // 会员绑定区域
|
|||
goodsDetail: 'single/pms/goods/detail', // 查询商品详情信息
|
|||
goodsList: 'pms/PmsProduct/goods/list', // 查询商品列表
|
|||
updatePublishStatus: 'pms/PmsProduct/publishStatus', |
|||
updateReComStatus: 'pms/PmsProduct/updateReComStatus', |
|||
delivery: 'oms/OmsOrder/delivery', // 订单发货
|
|||
orderList: 'oms/OmsOrder/order/list', // 查询订单列表
|
|||
orderDetail: 'single/oms/detail', // 查询订单列表
|
|||
subjectList: 'single/cms/subject/list', // 查询文章列表
|
|||
}, |
|||
/** |
|||
* 封装请求（async await 封装uni.request） 对应portal 项目 |
|||
* method post/get |
|||
* endpoint 接口方法名 |
|||
* data 所需传递参数 |
|||
* load 是否需要loading |
|||
*/ |
|||
async apiCall(method, endpoint, data, load) { |
|||
if (load) { |
|||
uni.showLoading({ |
|||
title: '请稍候', |
|||
mask: true |
|||
}); |
|||
} |
|||
|
|||
let token = uni.getStorageSync('token') || ''; |
|||
let fullurl = this.BASEURI + endpoint; |
|||
console.log("fullurl",fullurl); |
|||
var contentType = 'application/x-www-form-urlencoded'; |
|||
|
|||
data.authorization = token; |
|||
//console.log(endpoint);
|
|||
let [error, res] = await uni.request({ |
|||
url: fullurl, |
|||
data: data, |
|||
method: method, |
|||
header: { |
|||
//'Content-Type': 'application/x-www-form-urlencoded',
|
|||
'content-type': contentType, |
|||
// 'authorization1': Authorization || ''
|
|||
}, |
|||
}); |
|||
if (load) { |
|||
uni.hideLoading(); |
|||
} |
|||
|
|||
if (undefined == res || 'undefined' == res) { |
|||
console.log('index'); |
|||
uni.navigateTo({ |
|||
url: `/pages/public/login` |
|||
}) |
|||
} |
|||
if (res.data.msg == 'User token expired!') { |
|||
console.log('User token expired'); |
|||
uni.showToast({ |
|||
title: '请先登录', |
|||
icon: 'none' |
|||
}); |
|||
uni.navigateTo({ |
|||
url: `/pages/public/login` |
|||
}) |
|||
} |
|||
if (res.data.msg == '请先登录' || res.data.code == 100) { |
|||
console.log("100=" + res.data); |
|||
uni.showToast({ |
|||
title: '请先登录', |
|||
icon: 'none' |
|||
}); |
|||
uni.navigateTo({ |
|||
url: `/pages/public/login` |
|||
}) |
|||
} |
|||
console.log(res.data); |
|||
console.log(fullurl); |
|||
console.log(res.data.data); |
|||
if (res.data.code == 200) { |
|||
console.log("===>>>"); |
|||
return res.data.data; |
|||
} else { |
|||
console.log(">>>>>="); |
|||
if (res.data) { |
|||
if (!res.data.msg) { |
|||
res.data.msg = res.data.data; |
|||
} |
|||
uni.showToast({ |
|||
title: res.data.msg, |
|||
icon: 'none' |
|||
}); |
|||
this.$api.msg(res.data.msg); |
|||
} |
|||
|
|||
} |
|||
}, |
|||
/** |
|||
* 封装请求（async await 封装uni.request） 对应admin 项目 |
|||
* method post/get |
|||
* endpoint 接口方法名 |
|||
* data 所需传递参数 |
|||
* load 是否需要loading |
|||
*/ |
|||
async apiAdminCall(method, endpoint, data, load) { |
|||
if (load) { |
|||
uni.showLoading({ |
|||
title: '请稍候', |
|||
mask: true |
|||
}); |
|||
} |
|||
|
|||
let token = uni.getStorageSync('adminToken') || ''; |
|||
let fullurl = this.ADMINURI + endpoint; |
|||
var contentType = 'application/json'; |
|||
|
|||
data.Authorization = token; |
|||
//console.log(endpoint);
|
|||
let [error, res] = await uni.request({ |
|||
url: fullurl, |
|||
data: data, |
|||
method: method, |
|||
header: { |
|||
//'Content-Type': 'application/x-www-form-urlencoded',
|
|||
'content-type': contentType, |
|||
// 'authorization1': Authorization || ''
|
|||
}, |
|||
}); |
|||
if (load) { |
|||
uni.hideLoading(); |
|||
} |
|||
console.log(res); |
|||
|
|||
if (undefined == res || 'undefined' == res) { |
|||
console.log('index'); |
|||
uni.navigateTo({ |
|||
url: `/pages/index/index` |
|||
}) |
|||
} |
|||
if (res.data.msg == 'User token expired!') { |
|||
console.log('User token expired'); |
|||
uni.showToast({ |
|||
title: '请先登录', |
|||
icon: 'none' |
|||
}); |
|||
uni.navigateTo({ |
|||
url: `/pages/public/login` |
|||
}) |
|||
} |
|||
if (res.data.msg == '请先登录' || res.data.code == 100) { |
|||
console.log("100=" + res.data); |
|||
uni.showToast({ |
|||
title: '请先登录', |
|||
icon: 'none' |
|||
}); |
|||
uni.navigateTo({ |
|||
url: `/pagesC/seller/login` |
|||
}) |
|||
} |
|||
|
|||
if (res.data.code == 200) { |
|||
console.log(res.data.data); |
|||
return res.data.data; |
|||
} else { |
|||
console.log(res.data); |
|||
if (res.data && res.data.msg) { |
|||
|
|||
uni.showToast({ |
|||
title: res.data.msg, |
|||
icon: 'none' |
|||
}); |
|||
this.$api.msg(res.data.msg); |
|||
} |
|||
|
|||
} |
|||
}, |
|||
/** |
|||
* 封装请求（async await 封装uni.request） 对应search 项目 |
|||
* method post/get |
|||
* endpoint 接口方法名 |
|||
* data 所需传递参数 |
|||
* load 是否需要loading |
|||
*/ |
|||
async apiEsCall(method, endpoint, data, load) { |
|||
if (!load) { |
|||
uni.showLoading({ |
|||
title: '请稍候', |
|||
mask: true |
|||
}); |
|||
} |
|||
|
|||
let fullurl = this.ESURI + endpoint; |
|||
//let fullurl = 'http://localhost:8085/api/' + endpoint;
|
|||
let Authorization = `${store.state.userInfo.tokenHead}${store.state.userInfo.token}`; |
|||
let [error, res] = await uni.request({ |
|||
url: fullurl, |
|||
data: data, |
|||
method: method, |
|||
header: { |
|||
'Content-Type': 'application/x-www-form-urlencoded', |
|||
// 'content-type': 'application/json',
|
|||
'Authorization': Authorization || '' |
|||
}, |
|||
}); |
|||
console.log(error); |
|||
if (!load) { |
|||
uni.hideLoading(); |
|||
} |
|||
return res; |
|||
|
|||
}, |
|||
} |
|||
@ -0,0 +1,22 @@ |
|||
module.exports = { |
|||
error:'', |
|||
isJSON : function (str){ |
|||
if (typeof str == 'string') { |
|||
try { |
|||
var obj=JSON.parse(str); |
|||
if(typeof obj == 'object' && obj ){ |
|||
return true; |
|||
}else{ |
|||
return false; |
|||
} |
|||
} catch(e) { |
|||
console.log('error：'+str+'!!!'+e); |
|||
return false; |
|||
} |
|||
} |
|||
}, |
|||
isNumber : function (checkVal){ |
|||
var reg = /^-?[1-9][0-9]?.?[0-9]*$/; |
|||
return reg.test(checkVal); |
|||
} |
|||
} |
|||
File diff suppressed because it is too large
@ -0,0 +1,43 @@ |
|||
// date.js
|
|||
export function formatDate(date, fmt) { |
|||
if (/(y+)/.test(fmt)) { |
|||
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); |
|||
} |
|||
let o = { |
|||
'M+': date.getMonth() + 1, |
|||
'd+': date.getDate(), |
|||
'h+': date.getHours(), |
|||
'm+': date.getMinutes(), |
|||
's+': date.getSeconds() |
|||
}; |
|||
for (let k in o) { |
|||
if (new RegExp(`(${k})`).test(fmt)) { |
|||
let str = o[k] + ''; |
|||
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str)); |
|||
} |
|||
} |
|||
return fmt; |
|||
} |
|||
|
|||
function padLeftZero(str) { |
|||
return ('00' + str).substr(str.length); |
|||
} |
|||
|
|||
export function str2Date(dateStr, separator) { |
|||
if (!separator) { |
|||
separator = "-"; |
|||
} |
|||
let dateArr = dateStr.split(separator); |
|||
let year = parseInt(dateArr[0]); |
|||
let month; |
|||
//处理月份为04这样的情况
|
|||
if (dateArr[1].indexOf("0") == 0) { |
|||
month = parseInt(dateArr[1].substring(1)); |
|||
} else { |
|||
month = parseInt(dateArr[1]); |
|||
} |
|||
let day = parseInt(dateArr[2]); |
|||
let date = new Date(year, month - 1, day); |
|||
return date; |
|||
} |
|||
|
|||
@ -0,0 +1,352 @@ |
|||
/* |
|||
* HTML5 Parser By Sam Blowes |
|||
* |
|||
* Designed for HTML5 documents |
|||
* |
|||
* Original code by John Resig (ejohn.org) |
|||
* http://ejohn.org/blog/pure-javascript-html-parser/
|
|||
* Original code by Erik Arvidsson, Mozilla Public License |
|||
* http://erik.eae.net/simplehtmlparser/simplehtmlparser.js
|
|||
* |
|||
* ---------------------------------------------------------------------------- |
|||
* License |
|||
* ---------------------------------------------------------------------------- |
|||
* |
|||
* This code is triple licensed using Apache Software License 2.0, |
|||
* Mozilla Public License or GNU Public License |
|||
* |
|||
* ////////////////////////////////////////////////////////////////////////////
|
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); you may not |
|||
* use this file except in compliance with the License. You may obtain a copy |
|||
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|||
* |
|||
* ////////////////////////////////////////////////////////////////////////////
|
|||
* |
|||
* The contents of this file are subject to the Mozilla Public License |
|||
* Version 1.1 (the "License"); you may not use this file except in |
|||
* compliance with the License. You may obtain a copy of the License at |
|||
* http://www.mozilla.org/MPL/
|
|||
* |
|||
* Software distributed under the License is distributed on an "AS IS" |
|||
* basis, WITHOUT WARRANTY OF ANY KIND, either express or implied. See the |
|||
* License for the specific language governing rights and limitations |
|||
* under the License. |
|||
* |
|||
* The Original Code is Simple HTML Parser. |
|||
* |
|||
* The Initial Developer of the Original Code is Erik Arvidsson. |
|||
* Portions created by Erik Arvidssson are Copyright (C) 2004. All Rights |
|||
* Reserved. |
|||
* |
|||
* ////////////////////////////////////////////////////////////////////////////
|
|||
* |
|||
* This program is free software; you can redistribute it and/or |
|||
* modify it under the terms of the GNU General Public License |
|||
* as published by the Free Software Foundation; either version 2 |
|||
* of the License, or (at your option) any later version. |
|||
* |
|||
* This program is distributed in the hope that it will be useful, |
|||
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
|||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|||
* GNU General Public License for more details. |
|||
* |
|||
* You should have received a copy of the GNU General Public License |
|||
* along with this program; if not, write to the Free Software |
|||
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. |
|||
* |
|||
* ---------------------------------------------------------------------------- |
|||
* Usage |
|||
* ---------------------------------------------------------------------------- |
|||
* |
|||
* // Use like so:
|
|||
* HTMLParser(htmlString, { |
|||
* start: function(tag, attrs, unary) {}, |
|||
* end: function(tag) {}, |
|||
* chars: function(text) {}, |
|||
* comment: function(text) {} |
|||
* }); |
|||
* |
|||
* // or to get an XML string:
|
|||
* HTMLtoXML(htmlString); |
|||
* |
|||
* // or to get an XML DOM Document
|
|||
* HTMLtoDOM(htmlString); |
|||
* |
|||
* // or to inject into an existing document/DOM node
|
|||
* HTMLtoDOM(htmlString, document); |
|||
* HTMLtoDOM(htmlString, document.body); |
|||
* |
|||
*/ |
|||
// Regular Expressions for parsing tags and attributes
|
|||
var startTag = /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/; |
|||
var endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/; |
|||
var attr = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g; // Empty Elements - HTML 5
|
|||
|
|||
var empty = makeMap('area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr'); // Block Elements - HTML 5
|
|||
// fixed by xxx 将 ins 标签从块级名单中移除
|
|||
|
|||
var block = makeMap('a,address,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video'); // Inline Elements - HTML 5
|
|||
|
|||
var inline = makeMap('abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,code,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var'); // Elements that you can, intentionally, leave open
|
|||
// (and which close themselves)
|
|||
|
|||
var closeSelf = makeMap('colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr'); // Attributes that have their values filled in disabled="disabled"
|
|||
|
|||
var fillAttrs = makeMap('checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected'); // Special Elements (can contain anything)
|
|||
|
|||
var special = makeMap('script,style'); |
|||
function HTMLParser(html, handler) { |
|||
var index; |
|||
var chars; |
|||
var match; |
|||
var stack = []; |
|||
var last = html; |
|||
|
|||
stack.last = function () { |
|||
return this[this.length - 1]; |
|||
}; |
|||
|
|||
while (html) { |
|||
chars = true; // Make sure we're not in a script or style element
|
|||
|
|||
if (!stack.last() || !special[stack.last()]) { |
|||
// Comment
|
|||
if (html.indexOf('<!--') == 0) { |
|||
index = html.indexOf('-->'); |
|||
|
|||
if (index >= 0) { |
|||
if (handler.comment) { |
|||
handler.comment(html.substring(4, index)); |
|||
} |
|||
|
|||
html = html.substring(index + 3); |
|||
chars = false; |
|||
} // end tag
|
|||
|
|||
} else if (html.indexOf('</') == 0) { |
|||
match = html.match(endTag); |
|||
|
|||
if (match) { |
|||
html = html.substring(match[0].length); |
|||
match[0].replace(endTag, parseEndTag); |
|||
chars = false; |
|||
} // start tag
|
|||
|
|||
} else if (html.indexOf('<') == 0) { |
|||
match = html.match(startTag); |
|||
|
|||
if (match) { |
|||
html = html.substring(match[0].length); |
|||
match[0].replace(startTag, parseStartTag); |
|||
chars = false; |
|||
} |
|||
} |
|||
|
|||
if (chars) { |
|||
index = html.indexOf('<'); |
|||
var text = index < 0 ? html : html.substring(0, index); |
|||
html = index < 0 ? '' : html.substring(index); |
|||
|
|||
if (handler.chars) { |
|||
handler.chars(text); |
|||
} |
|||
} |
|||
} else { |
|||
html = html.replace(new RegExp('([\\s\\S]*?)<\/' + stack.last() + '[^>]*>'), function (all, text) { |
|||
text = text.replace(/<!--([\s\S]*?)-->|<!\[CDATA\[([\s\S]*?)]]>/g, '$1$2'); |
|||
|
|||
if (handler.chars) { |
|||
handler.chars(text); |
|||
} |
|||
|
|||
return ''; |
|||
}); |
|||
parseEndTag('', stack.last()); |
|||
} |
|||
|
|||
if (html == last) { |
|||
throw 'Parse Error: ' + html; |
|||
} |
|||
|
|||
last = html; |
|||
} // Clean up any remaining tags
|
|||
|
|||
|
|||
parseEndTag(); |
|||
|
|||
function parseStartTag(tag, tagName, rest, unary) { |
|||
tagName = tagName.toLowerCase(); |
|||
|
|||
if (block[tagName]) { |
|||
while (stack.last() && inline[stack.last()]) { |
|||
parseEndTag('', stack.last()); |
|||
} |
|||
} |
|||
|
|||
if (closeSelf[tagName] && stack.last() == tagName) { |
|||
parseEndTag('', tagName); |
|||
} |
|||
|
|||
unary = empty[tagName] || !!unary; |
|||
|
|||
if (!unary) { |
|||
stack.push(tagName); |
|||
} |
|||
|
|||
if (handler.start) { |
|||
var attrs = []; |
|||
rest.replace(attr, function (match, name) { |
|||
var value = arguments[2] ? arguments[2] : arguments[3] ? arguments[3] : arguments[4] ? arguments[4] : fillAttrs[name] ? name : ''; |
|||
attrs.push({ |
|||
name: name, |
|||
value: value, |
|||
escaped: value.replace(/(^|[^\\])"/g, '$1\\\"') // "
|
|||
|
|||
}); |
|||
}); |
|||
|
|||
if (handler.start) { |
|||
handler.start(tagName, attrs, unary); |
|||
} |
|||
} |
|||
} |
|||
|
|||
function parseEndTag(tag, tagName) { |
|||
// If no tag name is provided, clean shop
|
|||
if (!tagName) { |
|||
var pos = 0; |
|||
} // Find the closest opened tag of the same type
|
|||
else { |
|||
for (var pos = stack.length - 1; pos >= 0; pos--) { |
|||
if (stack[pos] == tagName) { |
|||
break; |
|||
} |
|||
} |
|||
} |
|||
|
|||
if (pos >= 0) { |
|||
// Close all the open elements, up the stack
|
|||
for (var i = stack.length - 1; i >= pos; i--) { |
|||
if (handler.end) { |
|||
handler.end(stack[i]); |
|||
} |
|||
} // Remove the open elements from the stack
|
|||
|
|||
|
|||
stack.length = pos; |
|||
} |
|||
} |
|||
} |
|||
|
|||
function makeMap(str) { |
|||
var obj = {}; |
|||
var items = str.split(','); |
|||
|
|||
for (var i = 0; i < items.length; i++) { |
|||
obj[items[i]] = true; |
|||
} |
|||
|
|||
return obj; |
|||
} |
|||
|
|||
function removeDOCTYPE(html) { |
|||
return html.replace(/<\?xml.*\?>\n/, '').replace(/<!doctype.*>\n/, '').replace(/<!DOCTYPE.*>\n/, ''); |
|||
} |
|||
|
|||
function parseAttrs(attrs) { |
|||
return attrs.reduce(function (pre, attr) { |
|||
var value = attr.value; |
|||
var name = attr.name; |
|||
|
|||
if (pre[name]) { |
|||
pre[name] = pre[name] + " " + value; |
|||
} else { |
|||
pre[name] = value; |
|||
} |
|||
|
|||
return pre; |
|||
}, {}); |
|||
} |
|||
|
|||
function parseHtml(html) { |
|||
html = removeDOCTYPE(html); |
|||
var stacks = []; |
|||
var results = { |
|||
node: 'root', |
|||
children: [] |
|||
}; |
|||
HTMLParser(html, { |
|||
start: function start(tag, attrs, unary) { |
|||
var node = { |
|||
name: tag |
|||
}; |
|||
|
|||
if (attrs.length !== 0) { |
|||
node.attrs = parseAttrs(attrs); |
|||
} |
|||
|
|||
if (unary) { |
|||
var parent = stacks[0] || results; |
|||
|
|||
if (!parent.children) { |
|||
parent.children = []; |
|||
} |
|||
|
|||
parent.children.push(node); |
|||
} else { |
|||
stacks.unshift(node); |
|||
} |
|||
}, |
|||
end: function end(tag) { |
|||
var node = stacks.shift(); |
|||
if (node.name !== tag) console.error('invalid state: mismatch end tag'); |
|||
|
|||
if (stacks.length === 0) { |
|||
results.children.push(node); |
|||
} else { |
|||
var parent = stacks[0]; |
|||
|
|||
if (!parent.children) { |
|||
parent.children = []; |
|||
} |
|||
|
|||
parent.children.push(node); |
|||
} |
|||
}, |
|||
chars: function chars(text) { |
|||
var node = { |
|||
type: 'text', |
|||
text: text |
|||
}; |
|||
|
|||
if (stacks.length === 0) { |
|||
results.children.push(node); |
|||
} else { |
|||
var parent = stacks[0]; |
|||
|
|||
if (!parent.children) { |
|||
parent.children = []; |
|||
} |
|||
|
|||
parent.children.push(node); |
|||
} |
|||
}, |
|||
comment: function comment(text) { |
|||
var node = { |
|||
node: 'comment', |
|||
text: text |
|||
}; |
|||
var parent = stacks[0]; |
|||
|
|||
if (!parent.children) { |
|||
parent.children = []; |
|||
} |
|||
|
|||
parent.children.push(node); |
|||
} |
|||
}); |
|||
return results.children; |
|||
} |
|||
|
|||
export default parseHtml; |
|||
@ -0,0 +1,32 @@ |
|||
const listData = [{ |
|||
content: "好评", |
|||
create_time: "2019-04-12", |
|||
header_img: "http://cs.zhangkaixing.com/face/face_2.jpg", |
|||
user_name: "测试1", |
|||
rate:5, |
|||
imgs:[] |
|||
}, |
|||
{ |
|||
content: "中评", |
|||
create_time: "2019-04-12", |
|||
header_img: "http://cs.zhangkaixing.com/face/face_12.jpg", |
|||
user_name: "测试2", |
|||
rate:4, |
|||
imgs:[ |
|||
'http://cs.zhangkaixing.com/face/face.jpg', |
|||
'http://cs.zhangkaixing.com/face/p10.jpg', |
|||
'http://cs.zhangkaixing.com/face/face_14.jpg', |
|||
'http://cs.zhangkaixing.com/face/face.jpg', |
|||
'http://cs.zhangkaixing.com/face/p10.jpg', |
|||
] |
|||
}, |
|||
{ |
|||
content: "", |
|||
create_time: "2019-04-12", |
|||
header_img: "http://cs.zhangkaixing.com/face/face_15.jpg", |
|||
user_name: "测试3", |
|||
rate:2, |
|||
imgs:[] |
|||
}] |
|||
|
|||
export default listData |
|||
@ -0,0 +1,71 @@ |
|||
//#ifdef H5
|
|||
/** clipboard.js v2.0.4**/ |
|||
!function(t,e){try{window.ClipboardJS=e();}catch(e){};"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ClipboardJS=e():t.ClipboardJS=e()}(this,function(){return function(n){var o={};function r(t){if(o[t])return o[t].exports;var e=o[t]={i:t,l:!1,exports:{}};return n[t].call(e.exports,e,e.exports,r),e.l=!0,e.exports} |
|||
return r.m=n,r.c=o,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=0)}([function(t,e,n){"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i=function(){function o(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}} |
|||
return function(t,e,n){return e&&o(t.prototype,e),n&&o(t,n),t}}(),a=o(n(1)),c=o(n(3)),u=o(n(4));function o(t){return t&&t.__esModule?t:{default:t}} |
|||
var l=function(t){function o(t,e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,o);var n=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,(o.__proto__||Object.getPrototypeOf(o)).call(this));return n.resolveOptions(e),n.listenClick(t),n} |
|||
return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(o,c.default),i(o,[{key:"resolveOptions",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};this.action="function"==typeof t.action?t.action:this.defaultAction,this.target="function"==typeof t.target?t.target:this.defaultTarget,this.text="function"==typeof t.text?t.text:this.defaultText,this.container="object"===r(t.container)?t.container:document.body}},{key:"listenClick",value:function(t){var e=this;this.listener=(0,u.default)(t,"click",function(t){return e.onClick(t)})}},{key:"onClick",value:function(t){var e=t.delegateTarget||t.currentTarget;this.clipboardAction&&(this.clipboardAction=null),this.clipboardAction=new a.default({action:this.action(e),target:this.target(e),text:this.text(e),container:this.container,trigger:e,emitter:this})}},{key:"defaultAction",value:function(t){return s("action",t)||'copy'}},{key:"defaultTarget",value:function(t){var e=s("target",t);if(e){return document.querySelector(e)}}},{key:"defaultText",value:function(t){return s("text",t)||this.text}},{key:"destroy",value:function(){this.listener.destroy(),this.clipboardAction&&(this.clipboardAction.destroy(),this.clipboardAction=null)}}],[{key:"isSupported",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:["copy","cut"],e="string"==typeof t?[t]:t,n=!!document.queryCommandSupported;return e.forEach(function(t){n=n&&!!document.queryCommandSupported(t)}),n}}]),o}();function s(t,e){var n="data-clipboard-"+t;let isFun=e&&typeof e.hasAttribute==='function';if(isFun&&e.hasAttribute(n)){return e.getAttribute(n)}} |
|||
t.exports=l},function(t,e,n){"use strict";var o,r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i=function(){function o(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}} |
|||
return function(t,e,n){return e&&o(t.prototype,e),n&&o(t,n),t}}(),a=n(2),c=(o=a)&&o.__esModule?o:{default:o};var u=function(){function e(t){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),this.resolveOptions(t),this.initSelection()} |
|||
return i(e,[{key:"resolveOptions",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};this.action=t.action,this.container=t.container,this.emitter=t.emitter,this.target=t.target,this.text=t.text,this.trigger=t.trigger,this.selectedText=""}},{key:"initSelection",value:function(){this.text?this.selectFake():this.target&&this.selectTarget()}},{key:"selectFake",value:function(){var t=this,e="rtl"==document.documentElement.getAttribute("dir");this.removeFake(),this.fakeHandlerCallback=function(){return t.removeFake()},this.fakeHandler=this.container.addEventListener("click",this.fakeHandlerCallback)||!0,this.fakeElem=document.createElement("textarea"),this.fakeElem.style.fontSize="12pt",this.fakeElem.style.border="0",this.fakeElem.style.padding="0",this.fakeElem.style.margin="0",this.fakeElem.style.position="absolute",this.fakeElem.style[e?"right":"left"]="-9999px";var n=window.pageYOffset||document.documentElement.scrollTop;this.fakeElem.style.top=n+"px",this.fakeElem.setAttribute("readonly",""),this.fakeElem.value=this.text,this.container.appendChild(this.fakeElem),this.selectedText=(0,c.default)(this.fakeElem),this.copyText()}},{key:"removeFake",value:function(){this.fakeHandler&&(this.container.removeEventListener("click",this.fakeHandlerCallback),this.fakeHandler=null,this.fakeHandlerCallback=null),this.fakeElem&&(this.container.removeChild(this.fakeElem),this.fakeElem=null)}},{key:"selectTarget",value:function(){this.selectedText=(0,c.default)(this.target),this.copyText()}},{key:"copyText",value:function(){var e=void 0;try{e=document.execCommand(this.action)}catch(t){e=!1} |
|||
this.handleResult(e)}},{key:"handleResult",value:function(t){this.emitter.emit(t?"success":"error",{action:this.action,text:this.selectedText,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)})}},{key:"clearSelection",value:function(){this.trigger&&this.trigger.focus(),window.getSelection().removeAllRanges()}},{key:"destroy",value:function(){this.removeFake()}},{key:"action",set:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"copy";if(this._action=t,"copy"!==this._action&&"cut"!==this._action)throw new Error('Invalid "action" value, use either "copy" or "cut"')},get:function(){return this._action}},{key:"target",set:function(t){if(void 0!==t){if(!t||"object"!==(void 0===t?"undefined":r(t))||1!==t.nodeType)throw new Error('Invalid "target" value, use a valid Element');if("copy"===this.action&&t.hasAttribute("disabled"))throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');if("cut"===this.action&&(t.hasAttribute("readonly")||t.hasAttribute("disabled")))throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');this._target=t}},get:function(){return this._target}}]),e}();t.exports=u},function(t,e){t.exports=function(t){var e;if("SELECT"===t.nodeName)t.focus(),e=t.value;else if("INPUT"===t.nodeName||"TEXTAREA"===t.nodeName){var n=t.hasAttribute("readonly");n||t.setAttribute("readonly",""),t.select(),t.setSelectionRange(0,t.value.length),n||t.removeAttribute("readonly"),e=t.value}else{t.hasAttribute("contenteditable")&&t.focus();var o=window.getSelection(),r=document.createRange();r.selectNodeContents(t),o.removeAllRanges(),o.addRange(r),e=o.toString()} |
|||
return e}},function(t,e){function n(){} |
|||
n.prototype={on:function(t,e,n){var o=this.e||(this.e={});return(o[t]||(o[t]=[])).push({fn:e,ctx:n}),this},once:function(t,e,n){var o=this;function r(){o.off(t,r),e.apply(n,arguments)} |
|||
return r._=e,this.on(t,r,n)},emit:function(t){for(var e=[].slice.call(arguments,1),n=((this.e||(this.e={}))[t]||[]).slice(),o=0,r=n.length;o<r;o++)n[o].fn.apply(n[o].ctx,e);return this},off:function(t,e){var n=this.e||(this.e={}),o=n[t],r=[];if(o&&e)for(var i=0,a=o.length;i<a;i++)o[i].fn!==e&&o[i].fn._!==e&&r.push(o[i]);return r.length?n[t]=r:delete n[t],this}},t.exports=n},function(t,e,n){var d=n(5),h=n(6);t.exports=function(t,e,n){if(!t&&!e&&!n)throw new Error("Missing required arguments");if(!d.string(e))throw new TypeError("Second argument must be a String");if(!d.fn(n))throw new TypeError("Third argument must be a Function");if(d.node(t))return s=e,f=n,(l=t).addEventListener(s,f),{destroy:function(){l.removeEventListener(s,f)}};if(d.nodeList(t))return a=t,c=e,u=n,Array.prototype.forEach.call(a,function(t){t.addEventListener(c,u)}),{destroy:function(){Array.prototype.forEach.call(a,function(t){t.removeEventListener(c,u)})}};if(d.string(t))return o=t,r=e,i=n,h(document.body,o,r,i);throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList");var o,r,i,a,c,u,l,s,f}},function(t,n){n.node=function(t){return void 0!==t&&t instanceof HTMLElement&&1===t.nodeType},n.nodeList=function(t){var e=Object.prototype.toString.call(t);return void 0!==t&&("[object NodeList]"===e||"[object HTMLCollection]"===e)&&"length"in t&&(0===t.length||n.node(t[0]))},n.string=function(t){return"string"==typeof t||t instanceof String},n.fn=function(t){return"[object Function]"===Object.prototype.toString.call(t)}},function(t,e,n){var a=n(7);function i(t,e,n,o,r){var i=function(e,n,t,o){return function(t){t.delegateTarget=a(t.target,n),t.delegateTarget&&o.call(e,t)}}.apply(this,arguments);return t.addEventListener(n,i,r),{destroy:function(){t.removeEventListener(n,i,r)}}} |
|||
t.exports=function(t,e,n,o,r){return"function"==typeof t.addEventListener?i.apply(null,arguments):"function"==typeof n?i.bind(null,document).apply(null,arguments):("string"==typeof t&&(t=document.querySelectorAll(t)),Array.prototype.map.call(t,function(t){return i(t,e,n,o,r)}))}},function(t,e){if("undefined"!=typeof Element&&!Element.prototype.matches){var n=Element.prototype;n.matches=n.matchesSelector||n.mozMatchesSelector||n.msMatchesSelector||n.oMatchesSelector||n.webkitMatchesSelector} |
|||
t.exports=function(t,e){for(;t&&9!==t.nodeType;){if("function"==typeof t.matches&&t.matches(e))return t;t=t.parentNode}}}])});let Types={isFunction:function(obj){var type=Object.prototype.toString.call(obj) |
|||
return type=='[object Function]'},isObject:function(obj){var type=Object.prototype.toString.call(obj) |
|||
return type=='[object Object]'},isString:function(obj){var type=Object.prototype.toString.call(obj) |
|||
return type=='[object String]'}} |
|||
uni.setClipboardData=function(options){let emptyFun=function(){} |
|||
let config={data:null,event:null,success:emptyFun,fail:emptyFun,complete:emptyFun} |
|||
if(options&&Types.isObject(options)){config=Object.assign({},config,options)} |
|||
if(options&&Types.isString(options)){config=Object.assign({},config,{data:options})} |
|||
let data=config.data |
|||
let success=config.success||emptyFun |
|||
let fail=config.fail||emptyFun |
|||
let complete=config.complete||emptyFun |
|||
let e=config.event||window.event||{} |
|||
let cb=new ClipboardJS('.null',{text:()=>data}) |
|||
cb.on('success',function(res){ |
|||
window.__clipboard__=data; |
|||
success&&Types.isFunction(success)&&success({data:res.text}) |
|||
complete&&Types.isFunction(complete)&&complete() |
|||
cb.off('error') |
|||
cb.off('success') |
|||
cb.destroy()}) |
|||
cb.on('error',function(err){fail&&Types.isFunction(fail)&&fail(err) |
|||
complete&&Types.isFunction(complete)&&complete() |
|||
cb.off('error') |
|||
cb.off('success') |
|||
cb.destroy()}) |
|||
cb.onClick(e)}; |
|||
uni.getClipboardData=function(options){let emptyFun=function(){} |
|||
let config={data:null,event:null,success:emptyFun,fail:emptyFun,complete:emptyFun} |
|||
if(options&&Types.isObject(options)){config=Object.assign({},config,options)} |
|||
let success=config.success||emptyFun |
|||
let fail=config.fail||emptyFun |
|||
let complete=config.complete||emptyFun |
|||
if(window.__clipboard__!==undefined){success&&Types.isFunction(success)&&success({data:window.__clipboard__})}else{fail&&Types.isFunction(fail)&&fail({data:null})} |
|||
complete&&Types.isFunction(complete)&&complete()}; |
|||
function fileDownLoad(data){var linkElement=document.createElement('a') |
|||
linkElement.setAttribute('href',data.blob) |
|||
linkElement.setAttribute('downLoad',data.name) |
|||
linkElement.click()} |
|||
uni.saveImageToPhotosAlbum=uni.saveVideoToPhotosAlbum=function(options){let emptyFun=function(){} |
|||
let config={filePath:null,success:emptyFun,fail:emptyFun,complete:emptyFun} |
|||
if(options&&Types.isObject(options)){config=Object.assign({},config,options)} |
|||
if(options&&Types.isString(options)){config=Object.assign({},config,{filePath:options})} |
|||
let filePath=config.filePath |
|||
let success=config.success||emptyFun |
|||
let fail=config.fail||emptyFun |
|||
let complete=config.complete||emptyFun |
|||
if(!filePath){fail&&Types.isFunction(fail)&&fail({msg:'no File'}) |
|||
complete&&Types.isFunction(complete)&&complete() |
|||
return} |
|||
let names=filePath.split('/') |
|||
let name=names[names.length-1] |
|||
uni.downloadFile({url:filePath,success:function(res){let tempFilePath=res.tempFilePath |
|||
fileDownLoad({name:name,blob:tempFilePath}) |
|||
success&&Types.isFunction(success)&&success({filePath:filePath})},fail:function(err){fail&&Types.isFunction(fail)&&fail({msg:err})},complete:function(){complete&&Types.isFunction(complete)&&complete()}})} |
|||
//#endif
|
|||
@ -0,0 +1,107 @@ |
|||
.lotus-address-picker { |
|||
font-size: 26rpx; |
|||
padding-top: 30rpx; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 1; |
|||
-webkit-box-orient: vertical; |
|||
line-height: normal; |
|||
padding-right: 30rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
.lotus-address-picker-box { |
|||
/*display: -webkit-box; |
|||
display: -webkit-flex;*/ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
justify-content: flex-start; |
|||
padding-top: 10rpx; |
|||
padding-bottom: 10rpx; |
|||
} |
|||
.lotus-address-picker-box-item { |
|||
height: 600upx; |
|||
overflow-y: auto; |
|||
width: 33.333%; |
|||
padding-left: 20rpx; |
|||
padding-right: 20rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
.lotus-address-picker2 { |
|||
color: #e93b3d; |
|||
position: relative; |
|||
} |
|||
.lotus-address-picker2:after { |
|||
content: ''; |
|||
position: absolute; |
|||
right: 0; |
|||
top: 65%; |
|||
transform: translateY(-35%) rotate(-45deg); |
|||
width: 20rpx; |
|||
height: 10rpx; |
|||
border-left-width: 4rpx; |
|||
border-bottom-width: 4rpx; |
|||
border-left-style: solid; |
|||
border-bottom-style: solid; |
|||
border-left-color: #e93b3d; |
|||
border-bottom-color: #e93b3d; |
|||
} |
|||
.lotus-address-mask { |
|||
position: fixed; |
|||
left: 0; |
|||
top: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 999; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
} |
|||
.lotus-address-box { |
|||
background: #fff; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
height: auto; |
|||
} |
|||
.lotus-address-action { |
|||
font-size: 30rpx; |
|||
/*display: -webkit-box; |
|||
display: -webkit-flex;*/ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
justify-content: space-between; |
|||
padding: 25rpx 30rpx; |
|||
position: relative; |
|||
} |
|||
.lotus-address-action:after { |
|||
content: " "; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
height: 1px; |
|||
border-top: 1px solid #eee; |
|||
color: #eee; |
|||
transform-origin: 0 0; |
|||
transform: scaleY(0.5); |
|||
} |
|||
.lotus-address-action:before { |
|||
content: " "; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
right: 0; |
|||
height: 1px; |
|||
border-bottom: 1px solid #eee; |
|||
color: #eee; |
|||
transform-origin: 0 100%; |
|||
transform: scaleY(0.5); |
|||
} |
|||
.lotus-address-action-cancel { |
|||
color: #969696; |
|||
} |
|||
.lotus-address-action-affirm { |
|||
color: #e93b3d; |
|||
} |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,216 @@ |
|||
<template> |
|||
<!--地址picker--> |
|||
<view :status="checkStatus" v-if="lotusAddressData.visible" class="lotus-address-mask"> |
|||
<view class="lotus-address-box"> |
|||
<view class="lotus-address-action"> |
|||
<text @tap="cancelPicker" class="lotus-address-action-cancel">取消</text> |
|||
<text @tap="chosedVal" class="lotus-address-action-affirm">确认</text> |
|||
</view> |
|||
<view class="lotus-address-picker-box"> |
|||
<!--省--> |
|||
<scroll-view scroll-y :scroll-into-view="'pid'+pChoseIndex" class="lotus-address-picker-box-item"> |
|||
<view @tap="clickPicker(0,pIndex,pItem);" :id="'pid'+pIndex" :class="pIndex === pChoseIndex?'lotus-address-picker lotus-address-picker2':'lotus-address-picker'" v-for="(pItem,pIndex) in province" :key="pIndex">{{pItem}}</view> |
|||
</scroll-view> |
|||
<!--市--> |
|||
<scroll-view scroll-y :scroll-into-view="'cid'+cChoseIndex" class="lotus-address-picker-box-item"> |
|||
<view @tap="clickPicker(1,cIndex,cItem);" :id="'cid'+cIndex" :class="cIndex === cChoseIndex?'lotus-address-picker lotus-address-picker2':'lotus-address-picker'" v-for="(cItem,cIndex) in city" :key="cIndex">{{cItem}}</view> |
|||
</scroll-view> |
|||
<!--区--> |
|||
<scroll-view scroll-y :scroll-into-view="'tid'+tChoseIndex" class="lotus-address-picker-box-item"> |
|||
<view @tap="clickPicker(2,tIndex,tItem);" :id="'tid'+tIndex" :class="tIndex === tChoseIndex?'lotus-address-picker lotus-address-picker2':'lotus-address-picker'" v-for="(tItem,tIndex) in town" :key="tIndex">{{tItem}}</view> |
|||
</scroll-view> |
|||
<!--区END--> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!--地址picker END--> |
|||
</template> |
|||
|
|||
<script> |
|||
import {lotusAddressJson} from "./Winglau14-lotusAddress.js"; |
|||
export default { |
|||
props:['lotusAddressData'], |
|||
data() { |
|||
return { |
|||
visible: false, |
|||
province:[], |
|||
city:[], |
|||
town:[], |
|||
provinceName:'', |
|||
cityName:'', |
|||
townName:'', |
|||
type:0,//0新增1编辑 |
|||
pChoseIndex:-1, |
|||
cChoseIndex:-1, |
|||
tChoseIndex:-1, |
|||
}; |
|||
}, |
|||
methods:{ |
|||
//取消 |
|||
cancelPicker(){ |
|||
const provinceCode = this.getTarId(this.provinceName); |
|||
const cityCode = this.getTarId(this.cityName); |
|||
const townCode = this.getTarId(this.townName); |
|||
this.$emit("choseVal",{ |
|||
provice:this.provinceName, |
|||
provinceCode, |
|||
city:this.cityName, |
|||
cityCode, |
|||
town:this.townName, |
|||
townCode, |
|||
isChose:0, |
|||
visible:false |
|||
}); |
|||
}, |
|||
//获取最后选择的省市区的值 |
|||
chosedVal() { |
|||
this.type = 1; |
|||
const provinceCode = this.getTarId(this.provinceName); |
|||
const cityCode = this.getTarId(this.cityName); |
|||
const townCode = this.getTarId(this.townName); |
|||
this.$emit("choseVal",{ |
|||
provice:this.provinceName, |
|||
provinceCode, |
|||
city:this.cityName, |
|||
cityCode, |
|||
town:this.townName, |
|||
townCode, |
|||
isChose:1, |
|||
visible:false |
|||
}); |
|||
}, |
|||
//获取省市区value |
|||
getTarId(name,type){ |
|||
let id = 0; |
|||
const _this = this; |
|||
lotusAddressJson.map((item,index)=>{ |
|||
if(item.name === name){ |
|||
id = item.value; |
|||
} |
|||
}); |
|||
return id; |
|||
}, |
|||
//获取市数据 |
|||
getCityArr(parentId){ |
|||
let city = []; |
|||
|
|||
lotusAddressJson.map((item,index)=>{ |
|||
if(item.parent === parentId){ |
|||
city.push(item.name); |
|||
} |
|||
}); |
|||
return city; |
|||
}, |
|||
//获取区数据 |
|||
getTownArr(parentId){ |
|||
let town = []; |
|||
lotusAddressJson.map((item,index)=>{ |
|||
if(index>34&&item.parent === parentId){ |
|||
town.push(item.name); |
|||
} |
|||
}); |
|||
return town; |
|||
}, |
|||
//初始化数据 |
|||
initFn(){ |
|||
console.log(1); |
|||
lotusAddressJson.map((item,index)=>{ |
|||
if(index<=34){ |
|||
this.province.push(item.name); |
|||
} |
|||
}); |
|||
//已选择省市区，高亮显示对应选择省市区 |
|||
const p = this._props.lotusAddressData.provinceName; |
|||
const c = this._props.lotusAddressData.cityName; |
|||
const t = this._props.lotusAddressData.townName; |
|||
if(p){ |
|||
this.pChoseIndex = this.getTarIndex(this.province,p); |
|||
} |
|||
if(p&&c){ |
|||
const pid = this.getTarId(p); |
|||
this.city = this.getCityArr(pid); |
|||
this.cChoseIndex = this.getTarIndex(this.city,c); |
|||
} |
|||
if(p&&c&&t){ |
|||
const cid= this.getTarId(c); |
|||
this.town = this.getTownArr(cid); |
|||
this.tChoseIndex = this.getTarIndex(this.town,t); |
|||
} |
|||
}, |
|||
//获取已选省市区 |
|||
getChosedData(){ |
|||
const pid = this.getTarId(this.provinceName,'provice'); |
|||
this.city = this.getCityArr(pid); |
|||
const cid= this.getTarId(this.cityName,'city'); |
|||
this.town = this.getTownArr(cid); |
|||
//已选省市区获取对应index |
|||
if(this.provinceName){ |
|||
this.pChoseIndex = this.getTarIndex(this.province,this.provinceName); |
|||
} |
|||
if(this.cityName){ |
|||
this.cChoseIndex = this.getTarIndex(this.city,this.cityName); |
|||
} |
|||
if(this.townName){ |
|||
this.tChoseIndex = this.getTarIndex(this.town,this.townName); |
|||
} |
|||
}, |
|||
//选择省市区交互 |
|||
clickPicker(type,index,name){ |
|||
//省 |
|||
if(type === 0){ |
|||
this.pChoseIndex = index; |
|||
this.provinceName = name; |
|||
this.cChoseIndex = -1; |
|||
this.tChoseIndex = -1; |
|||
this.cityName = ''; |
|||
this.townName = ''; |
|||
} |
|||
//市 |
|||
if(type ===1){ |
|||
this.cChoseIndex = index; |
|||
this.cityName = name; |
|||
this.tChoseIndex = -1; |
|||
this.townName = ''; |
|||
} |
|||
//区 |
|||
if(type === 2){ |
|||
this.tChoseIndex = index; |
|||
this.townName = name; |
|||
} |
|||
//获取省市区数据 |
|||
this.getChosedData(); |
|||
}, |
|||
//获取已选省市区index |
|||
getTarIndex(arr,tarName){ |
|||
let cIndex = 0; |
|||
arr.map((item,index)=>{ |
|||
if(item === tarName){ |
|||
cIndex = index; |
|||
} |
|||
}); |
|||
return cIndex; |
|||
} |
|||
}, |
|||
created() { |
|||
this.provinceName = this._props.lotusAddressData.provinceName; |
|||
this.cityName = this._props.lotusAddressData.cityName; |
|||
this.townName = this._props.lotusAddressData.townName; |
|||
}, |
|||
computed:{ |
|||
checkStatus(){ |
|||
let t = null; |
|||
const _this = this; |
|||
if(!_this.visible){ |
|||
_this.initFn(); |
|||
_this.visible = _this._props.lotusAddressData.visible; |
|||
t = _this.visible; |
|||
} |
|||
return t; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
@import "./Winglau14-lotusAddress.css"; |
|||
</style> |
|||
@ -0,0 +1,125 @@ |
|||
<template> |
|||
<view class="box"> |
|||
<view class="boxContent"> |
|||
<view class="boxContent2"> |
|||
<view class="before" :style="{top: (100-percent)+'%'}"></view> |
|||
<view class="jd" :style="{background: bg}"></view> |
|||
<view class="after" :style="{top: (100-percent)+'%'}"></view> |
|||
</view> |
|||
<view class="percent">{{percent}}%</view> |
|||
</view> |
|||
<view class="atitle">{{titleOne}}</view> |
|||
<view class="atitle">{{titleTwo}}</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "circle-percent", |
|||
props: { |
|||
titleOne:{ |
|||
type:String, |
|||
default: '发卡' |
|||
}, |
|||
titleTwo:{ |
|||
type:String, |
|||
default: '21' |
|||
}, |
|||
bg: { |
|||
type:String, |
|||
default: 'red' |
|||
}, |
|||
percent: { |
|||
type:String, |
|||
default: "0" |
|||
} |
|||
}, |
|||
computed: { |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.box{ |
|||
box-sizing: border-box; |
|||
width: 33%; |
|||
text-align:center; |
|||
margin: 20upx 0; |
|||
.boxContent{ |
|||
position: relative; |
|||
width: 160upx; |
|||
height: 160upx; |
|||
border-radius: 50%; |
|||
margin: 0 auto; |
|||
border: 4upx solid #d9d9d9; |
|||
overflow: hidden; |
|||
.boxContent2{ |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 50%; |
|||
border: 4upx solid #fff; |
|||
box-sizing: border-box; |
|||
overflow: hidden; |
|||
.before, |
|||
.after{ |
|||
content: ""; |
|||
position: absolute; |
|||
width: 200%; |
|||
height: 200%; |
|||
top: 0; |
|||
left: 50%; |
|||
background-color: rgba(255, 255, 255, .4); |
|||
border-radius: 45%; |
|||
transform: translate(-50%, -100%) rotate(0); |
|||
animation: rotate 6s linear infinite; |
|||
z-index: 10; |
|||
} |
|||
|
|||
.after { |
|||
border-radius: 44%; |
|||
background-color: rgba(255, 255, 255, .9); |
|||
transform: translate(-50%, -100%) rotate(0); |
|||
animation: rotate 10s linear -5s infinite; |
|||
z-index: 20; |
|||
} |
|||
|
|||
@keyframes rotate { |
|||
50% { |
|||
transform: translate(-50%, -103%) rotate(180deg); |
|||
} 100% { |
|||
transform: translate(-50%, -100%) rotate(360deg); |
|||
} |
|||
} |
|||
|
|||
.jd{ |
|||
width: 100%; |
|||
height: 100%; |
|||
bottom:0; |
|||
} |
|||
} |
|||
|
|||
.percent{ |
|||
font-size: 36upx; |
|||
font-weight: bold; |
|||
position: absolute; |
|||
top: 52upx; |
|||
width: 100%; |
|||
text-align: center; |
|||
z-index: 90; |
|||
} |
|||
} |
|||
.atitle{ |
|||
margin-top: 0upx; |
|||
font-size: 20upx; |
|||
color: $uni-text-color-grey; |
|||
font-size: $uni-font-size-base; |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,190 @@ |
|||
<template> |
|||
<view class="coupon-item"> |
|||
<view class="coupon-money"> |
|||
<view class="nick">{{item.name}}</view> |
|||
<view class="layof" :style="{color:theme}">￥{{item.amount}}</view> |
|||
<view class="end_time">{{item.endTime | formatCreateTime}}前使用</view> |
|||
<view> |
|||
<view class="demand">满{{ item.minPoint }} 减 {{ item.amount }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="get-btn" v-if="!types" :style="{color:color, borderColor:color, background:solid}" |
|||
@click="acceptCoupon(item)">立即领取</view> |
|||
<navigator class="get-btn" v-if="types" :style="{color:color, borderColor:color, background:solid}" |
|||
:url='item.url' @click="useCoupon(item)">立即使用</navigator> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import Api from '@/common/api'; |
|||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue'; |
|||
import { |
|||
formatDate |
|||
} from '@/common/date'; |
|||
|
|||
export default { |
|||
components: { |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
types: false |
|||
} |
|||
}, |
|||
props: { |
|||
item: { |
|||
type: Object |
|||
}, |
|||
theme: { |
|||
type: String, |
|||
default: '#ff9000' |
|||
}, |
|||
solid: { |
|||
type: String, |
|||
default: '#ffffff' |
|||
}, |
|||
color: { |
|||
type: String, |
|||
default: '#ff9000' |
|||
}, |
|||
}, |
|||
filters: { |
|||
formatCreateTime(time) { |
|||
let date = new Date(time); |
|||
return formatDate(date, 'yyyy-MM-dd hh:mm:ss') |
|||
}, |
|||
}, |
|||
methods: { |
|||
async acceptCoupon(item) { |
|||
this.types =!this.types |
|||
uni.showLoading({ |
|||
title: '请稍后' |
|||
}); |
|||
|
|||
let params = { |
|||
couponId: item.id |
|||
}; |
|||
let data = await Api.apiCall('post', Api.index.acceptCoupon, params); |
|||
console.log(data); |
|||
if (data) { |
|||
this.$api.msg(data); |
|||
} |
|||
uni.hideLoading(); |
|||
|
|||
}, |
|||
async useCoupon(item){ |
|||
uni.showLoading({ |
|||
title: '请稍后' |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
.coupon-item { |
|||
width: 100%; |
|||
height: auto; |
|||
display: table; |
|||
border-radius: 10upx; |
|||
padding: 0 20upx; |
|||
margin-top: 22upx; |
|||
border: 1px solid #eeeeee; |
|||
position: relative; |
|||
|
|||
.coupon-money { |
|||
width: 465upx; |
|||
height: auto; |
|||
display: table; |
|||
float: left; |
|||
padding: 26upx 0; |
|||
border-style: none dotted none none; |
|||
border-color: #eeeeee; |
|||
|
|||
.nick { |
|||
width: 100%; |
|||
height: 50upx; |
|||
line-height: 30upx; |
|||
font-size: $font-sm; |
|||
color: $font-color-999; |
|||
} |
|||
|
|||
.tit { |
|||
width: 100%; |
|||
height: 50upx; |
|||
line-height: 50upx; |
|||
font-size: $font-sm; |
|||
color: $font-color-999; |
|||
} |
|||
|
|||
.demand { |
|||
width: 100%; |
|||
height: 30upx; |
|||
line-height: 30upx; |
|||
font-size: $font-sm; |
|||
color: $font-color-999; |
|||
} |
|||
|
|||
.layof { |
|||
width: 100%; |
|||
height: 48upx; |
|||
line-height: 30upx; |
|||
font-size: 44upx; |
|||
color: #ff9000; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.end_time { |
|||
width: 100%; |
|||
height: 30upx; |
|||
line-height: 30upx; |
|||
font-size: $font-sm; |
|||
color: $font-color-999; |
|||
} |
|||
} |
|||
|
|||
.get-btn { |
|||
width: 146upx; |
|||
height: 52upx; |
|||
line-height: 50upx; |
|||
position: absolute; |
|||
top: 50%; |
|||
right: 26upx; |
|||
margin-top: -26upx; |
|||
text-align: center; |
|||
border-radius: 60upx; |
|||
color: #ff9000; |
|||
border: 1px solid #ff9000; |
|||
font-size: $font-sm; |
|||
float: right; |
|||
} |
|||
} |
|||
|
|||
.coupon-item:after { |
|||
width: 40upx; |
|||
height: 20upx; |
|||
position: absolute; |
|||
left: 460upx; |
|||
top: -1px; |
|||
border-radius: 0 0 40upx 40upx; |
|||
content: ""; |
|||
display: block; |
|||
background: $bgcolor_white; |
|||
border: 1px solid #eeeeee; |
|||
border-top: 0px; |
|||
} |
|||
|
|||
.coupon-item:before { |
|||
width: 40upx; |
|||
height: 20upx; |
|||
position: absolute; |
|||
left: 460upx; |
|||
bottom: -1px; |
|||
border-radius: 40upx 40upx 0 0; |
|||
content: ""; |
|||
display: block; |
|||
background: $bgcolor_white; |
|||
border: 1px solid #eeeeee; |
|||
border-bottom: 0px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,85 @@ |
|||
import value from './ball.js'; |
|||
|
|||
var list = [] |
|||
|
|||
var boundary = [[],[]] |
|||
|
|||
function getDistance( x_1, y_1, x_2, y_2){ |
|||
|
|||
let x = (x_2 - x_1)*2; |
|||
let y = (y_2 - y_1)*2; |
|||
|
|||
let s = Math.pow((x * x + y * y), 0.5); |
|||
|
|||
return s; |
|||
} |
|||
|
|||
function sustained(that){ |
|||
|
|||
let data = value.list; |
|||
let index_1 = 0; |
|||
let index_2 = 0; |
|||
|
|||
setInterval(function(){ |
|||
|
|||
for (let number = 0; number < data.length; number++) { |
|||
|
|||
data[number].y = data[number].y+( data[number].floating[1] ? 0.05 : -0.05) ; |
|||
data[number].floating[0] < 15 ? data[number].floating[0] = data[number].floating[0]+1 : data[number].floating[0] = 1 ; |
|||
data[number].floating[0] == 1 ? data[number].floating[1] = !data[number].floating[1] : data[number].floating[1]; |
|||
value.mapping(that); |
|||
|
|||
for (let i = 0; i < data.length; i++) { |
|||
|
|||
index_1 = getDistance(data[i].x,data[i].y,data[number].x,data[number].y); |
|||
index_2 = (data[i].radius*2) + (data[number].radius*2); |
|||
|
|||
if(i != number){ |
|||
|
|||
if( index_1 < index_2){ |
|||
|
|||
data[i].x = data[i].x+(-(data[number].x-data[i].x)/100) ; |
|||
data[i].y = data[i].y+(-(data[number].y-data[i].y)/100) ; |
|||
|
|||
(data[i].x-data[i].radius) < 0 ? data[i].x = data[i].radius : data[i].x; |
|||
(data[i].y-data[i].radius) < 0 ? data[i].y = data[i].radius : data[i].y; |
|||
|
|||
(data[i].x+data[i].radius) > value.boundary[0] ? data[i].x = (value.boundary[0]-data[i].radius) : data[i].x; |
|||
(data[i].y+data[i].radius) > value.boundary[1] ? data[i].y = (value.boundary[1]-data[i].radius) : data[i].y; |
|||
|
|||
value.mapping(that); |
|||
|
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
},100); |
|||
} |
|||
|
|||
function mapping(_this){ |
|||
let data = value.list |
|||
let context = uni.createCanvasContext('canvas',_this); |
|||
|
|||
for (let i = 0; i < data.length; i++) { |
|||
|
|||
context.beginPath(); |
|||
context.arc(data[i].x, data[i].y, data[i].radius, 0, 2 * Math.PI, true); |
|||
context.setFillStyle(data[i].color[data[i].colse ? 1 : 0]); |
|||
context.fill(); |
|||
|
|||
context.setFillStyle('#FFFFFF'); |
|||
context.setFontSize(data[i].size); |
|||
if(data[i].labelName.length < 6){ |
|||
context.fillText(data[i].labelName,(data[i].x - (data[i].size*(0.5*data[i].labelName.length))), (data[i].y + data[i].size*(0.5))) |
|||
}else{ |
|||
context.fillText(data[i].labelName.substring(0, 3),(data[i].x - (data[i].size*(0.5*(data[i].labelName.substring(0, 3)).length))), |
|||
((data[i].y + data[i].size*(0.5))-data[i].size*(0.8))) |
|||
context.fillText(data[i].labelName.substring(3, 6),(data[i].x - (data[i].size*(0.5*(data[i].labelName.substring(3, 6)).length))), |
|||
((data[i].y + data[i].size*(0.5))+data[i].size*(0.8))) |
|||
} |
|||
} |
|||
context.draw(); |
|||
} |
|||
|
|||
export default {mapping,list,sustained,boundary} |
|||
@ -0,0 +1,21 @@ |
|||
import value from '../../componets/drag-ball/drag-ball.js'; |
|||
|
|||
var list = [{x:100,y:50,radius:25},{x:200,y:50,radius:25},{x:300,y:50,radius:25}] |
|||
|
|||
function mapping(_this){ |
|||
|
|||
let data = value.list |
|||
|
|||
let context = uni.createCanvasContext('canvas',_this); |
|||
|
|||
for (let i = 0; i < data.length; i++) { |
|||
context.beginPath(); |
|||
context.arc(data[i].x, data[i].y, data[i].radius, 0, 2 * Math.PI, true); |
|||
context.setFillStyle('#AAAAAA'); |
|||
context.fill(); |
|||
} |
|||
|
|||
context.draw(); |
|||
} |
|||
|
|||
export default {mapping,list} |
|||
@ -0,0 +1,135 @@ |
|||
<template> |
|||
<canvas |
|||
:canvas-id="id" |
|||
id="canvas" |
|||
@touchstart="touchstart" |
|||
@touchend="touchend" |
|||
></canvas> |
|||
<!-- @touchmove.prevent="touchmove" --> |
|||
</template> |
|||
|
|||
<script> |
|||
import dragBall from './ball.js'; |
|||
|
|||
var data = []; |
|||
|
|||
function getDistance( x_1, y_1, x_2, y_2){ |
|||
|
|||
let x = (x_2 - x_1)*2; |
|||
let y = (y_2 - y_1)*2; |
|||
|
|||
let s = Math.pow((x * x + y * y), 0.5); |
|||
|
|||
return s; |
|||
} |
|||
export default { |
|||
props:{ |
|||
onInit: { |
|||
type: Array, |
|||
default: null |
|||
}, |
|||
colse:{ |
|||
type:Boolean |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
index:'false', |
|||
touchstarte_x:0, |
|||
touchstarte_y:0, |
|||
id:'canvas', |
|||
number: 0 |
|||
} |
|||
}, |
|||
onReady() { |
|||
// colse(index) { |
|||
// !index ? index : this.trim(); |
|||
// } |
|||
this.trim(); |
|||
}, |
|||
watch: { |
|||
onInit() { |
|||
this.trim(); |
|||
} |
|||
}, |
|||
methods: { |
|||
trim(){ |
|||
dragBall.boundary[0] = 320; //高 |
|||
dragBall.boundary[1] = 500; // 宽 |
|||
// var query = uni.createSelectorQuery(); |
|||
// query.select('#canvas').boundingClientRect() |
|||
// query.exec((res) => { |
|||
// dragBall.boundary[0]=res[0].width |
|||
// dragBall.boundary[1]=res[0].height; |
|||
// }) |
|||
dragBall.list = this.onInit; |
|||
dragBall.mapping(this); |
|||
data = dragBall.list; |
|||
dragBall.sustained(this);}, |
|||
touchstart(e){ |
|||
this.touchstarte_x = e.mp.touches[0].x; |
|||
this.touchstarte_y = e.mp.touches[0].y; |
|||
for (let i = 0; i < data.length; i++) { |
|||
if( getDistance(data[i].x,data[i].y,this.touchstarte_x,this.touchstarte_y) < (data[i].radius*2)){ |
|||
this.index = i; |
|||
|
|||
if(this.number < 8){ |
|||
data[i].colse =!data[i].colse; |
|||
data[i].colse ? this.number +=1 : this.number -=1; |
|||
} else { |
|||
if(data[i].colse){ |
|||
data[i].colse =!data[i].colse; |
|||
this.number -=1; |
|||
} |
|||
} |
|||
this.$emit('click_',i) |
|||
dragBall.mapping(this); |
|||
// this.touchstarte_x = this.touchstarte_x-data[i].x; |
|||
// this.touchstarte_y = this.touchstarte_y-data[i].y; |
|||
} |
|||
} |
|||
}, |
|||
// touchmove(e){ |
|||
// if(this.index != 'false'){ |
|||
// |
|||
// let index_1,index_2; |
|||
// let tag = e.touches[0]; |
|||
// |
|||
// data[this.index].x = tag.x-this.touchstarte_x ; |
|||
// data[this.index].y = tag.y-this.touchstarte_y ; |
|||
// |
|||
// for (let i = 0; i < data.length; i++) { |
|||
// |
|||
// index_1 = getDistance(data[i].x,data[i].y,data[this.index].x,data[this.index].y); |
|||
// index_2 = (data[i].radius*2) + (data[this.index].radius*2); |
|||
// if(i!= this.index){ |
|||
// |
|||
// if( index_1 > index_2){ |
|||
// dragBall.mapping(this); |
|||
// }else{ |
|||
// data[i].x = data[i].x+(-(data[this.index].x-data[i].x)/10) ; |
|||
// data[i].y = data[i].y+(-(data[this.index].y-data[i].y)/10) ; |
|||
// |
|||
// (data[i].x-data[i].radius) < 0 ? data[i].x = data[i].radius : data[i].x; |
|||
// (data[i].y-data[i].radius) < 0 ? data[i].y = data[i].radius : data[i].y; |
|||
// |
|||
// |
|||
// (data[i].x+data[i].radius) > dragBall.boundary[0] ? data[i].x = (dragBall.boundary[0]-data[i].radius) : data[i].x; |
|||
// (data[i].y+data[i].radius) > dragBall.boundary[1] ? data[i].y = (dragBall.boundary[1]-data[i].radius) : data[i].y; |
|||
// |
|||
// dragBall.mapping(this); |
|||
// break; |
|||
// } |
|||
// } |
|||
// } |
|||
// } |
|||
// }, |
|||
touchend(){this.index = 'false';} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page{width: 100%;height: 100%;} |
|||
canvas {width: 100%;height: 90%;} |
|||
</style> |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,453 @@ |
|||
var eonfox = function(config){ |
|||
if( config ){ |
|||
if( config.debug ){ |
|||
eonfox.prototype.debug = true; |
|||
} |
|||
if( config.application ){ |
|||
eonfox.prototype.application = config.application; |
|||
} |
|||
if( config.api_server_url ){ |
|||
eonfox.prototype.api_server_url = config.api_server_url; |
|||
} |
|||
} |
|||
|
|||
}; |
|||
eonfox.prototype = { |
|||
|
|||
constructor : eonfox, |
|||
|
|||
//是否开启调试模式
|
|||
debug : false, |
|||
|
|||
|
|||
//文件服务器URL
|
|||
file_server_url : 'http://img.eonfox.cc/', |
|||
|
|||
//接口地址 应用ID
|
|||
api_server_url : 'http://server.test.eapie.com/', |
|||
application : "test", |
|||
|
|||
//会话名称
|
|||
session_name : 'Eonfox_API_Engine_Session', |
|||
|
|||
/* |
|||
转换时间格式 |
|||
*/ |
|||
switchingTime: function(timestamp) { |
|||
var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
|
|||
var Y = date.getFullYear() + '-'; |
|||
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'; |
|||
var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '; |
|||
var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'; |
|||
var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'; |
|||
var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()); |
|||
return Y + M + D + h + m + s; |
|||
}, |
|||
|
|||
|
|||
//提交的有效等待时间
|
|||
submit_sleep_expire_time : 30, |
|||
|
|||
|
|||
//请求任务
|
|||
submit_task : null, |
|||
|
|||
/** |
|||
* 提交队列 |
|||
*/ |
|||
submit_queue : [], |
|||
|
|||
|
|||
|
|||
/** |
|||
* 提交登记 |
|||
*/ |
|||
submit_register : function( config ){ |
|||
config.time = ((new Date()).getTime()/1000);//赋值是 时间戳 （秒）,用于有效时间
|
|||
eonfox.prototype.submit_queue.push(config); |
|||
}, |
|||
|
|||
|
|||
|
|||
/** |
|||
* 运行提交 |
|||
*/ |
|||
submit_run : function(){ |
|||
if( eonfox.prototype.submit_queue.length < 1 ){ |
|||
return false;//没有执行的提交
|
|||
} |
|||
if( eonfox.prototype.submit_queue[0].runtime ){ |
|||
return false;//正在执行
|
|||
} |
|||
|
|||
//检查是否已经失效
|
|||
if( (eonfox.prototype.submit_queue[0].time + eonfox.prototype.submit_sleep_expire_time) < ((new Date()).getTime()/1000) ){ |
|||
//已经过了有效期
|
|||
//删除第一个元素
|
|||
eonfox.prototype.submit_queue.shift(); |
|||
//再次提交
|
|||
return eonfox.prototype.submit_run(); |
|||
} |
|||
|
|||
eonfox.prototype.submit_queue[0].runtime = true; |
|||
var config = eonfox.prototype.submit_queue[0]; |
|||
|
|||
//从本地缓存中同步获取指定 key 对应的内容。
|
|||
var token = eonfox.prototype.token(function(e){ |
|||
config.error(e); |
|||
}); |
|||
|
|||
if( !(function(){try{ return token['session_right_token'];}catch(e){return false;}}()) ){ |
|||
config.right_data.session = "start"; |
|||
config.right_data.application = this.application; |
|||
}else{ |
|||
config.right_data.token = token['session_right_token']; |
|||
config.left_data.token = token['session_left_token']; |
|||
config.left_data.session = "start"; |
|||
config.left_data.application = this.application; |
|||
} |
|||
|
|||
var request = { |
|||
url : config.url, |
|||
method : "POST", |
|||
dataType : "json", |
|||
responseType : "text", |
|||
header: {"Content-Type":"application/x-www-form-urlencoded"},//跨域，防止请求options
|
|||
complete : function(){ |
|||
//当请求完成之后调用这个函数，无论成功或失败。执行时间比success晚
|
|||
//删除第一个元素
|
|||
eonfox.prototype.submit_queue.shift(); |
|||
//再次提交
|
|||
eonfox.prototype.submit_run(); |
|||
}, |
|||
success : function(){}, |
|||
fail : function(err){ |
|||
config.error(err); |
|||
} |
|||
} |
|||
|
|||
//右令牌
|
|||
var right_token_post = function(){ |
|||
request.data = config.right_data; |
|||
request.success = function(success_data_all){ |
|||
//这里要注意，这里是包含了 data
|
|||
if(typeof success_data_all != 'object'){ |
|||
success_data_all = (function(){try{ return JSON.parse(success_data_all);}catch(e){return false;}}()); |
|||
} |
|||
var success_data = success_data_all.data? success_data_all.data : null; |
|||
if(typeof success_data != 'object'){ |
|||
console.warn("应用接口响应异常"); |
|||
return config.callback(false, success_data_all); |
|||
} |
|||
|
|||
//如果存在请求令牌，直接返回数据
|
|||
if( (function(){try{ return success_data['token'];}catch(e){return false;}}()) ){ |
|||
//储存令牌
|
|||
eonfox.prototype.storage_token(success_data); |
|||
//返回到回调函数
|
|||
return config.callback(success_data, success_data_all); |
|||
}else{ |
|||
//否则说明没有这个会话，再进行左令牌查询
|
|||
return left_token_post(); |
|||
} |
|||
}; |
|||
if( eonfox.prototype.debug ){ |
|||
console.log("post()：右令牌提交:", request); |
|||
} |
|||
|
|||
eonfox.prototype.submit_task = uni.request(request); |
|||
}; |
|||
|
|||
|
|||
//左令牌
|
|||
var left_token_post = function(){ |
|||
request.data = config.left_data; |
|||
request.success = function(success_data_all){ |
|||
//这里要注意，这里是包含了 data
|
|||
if(typeof success_data_all != 'object'){ |
|||
success_data_all = (function(){try{ return JSON.parse(success_data_all);}catch(e){return false;}}()); |
|||
} |
|||
var success_data = success_data_all.data? success_data_all.data : null; |
|||
if(typeof success_data != 'object'){ |
|||
console.warn("应用接口响应异常"); |
|||
return config.callback(false, success_data_all); |
|||
} |
|||
|
|||
//如果没有报错
|
|||
if( (function(){try{ return success_data['token'];}catch(e){return false;}}()) ){ |
|||
//储存令牌
|
|||
eonfox.prototype.storage_token(success_data); |
|||
} |
|||
|
|||
//返回到回调函数
|
|||
return config.callback(success_data, success_data_all); |
|||
}; |
|||
|
|||
if( eonfox.prototype.debug ){ |
|||
console.log("post()：左令牌提交:", request); |
|||
} |
|||
|
|||
eonfox.prototype.submit_task = uni.request(request); |
|||
}; |
|||
|
|||
|
|||
return right_token_post(); |
|||
}, |
|||
/** |
|||
* 获取左token |
|||
* 如果没用传入回调函数，那么则直接返回当前左令牌，但是有可能会出现左令牌失效 |
|||
* 正常操作是，传入一个回调函数，左令牌始终是保持最新的。 |
|||
* |
|||
* @param {Function} #fn |
|||
*/ |
|||
websocketToken : function(fn){ |
|||
if(typeof fn != "function"){ |
|||
var storage_token = eonfox.prototype.token(); |
|||
if( (function(){try{ return storage_token['session_websocket_token'];}catch(e){return false;}}()) ){ |
|||
return storage_token['session_websocket_token']; |
|||
}else{ |
|||
return ''; |
|||
} |
|||
}else{ |
|||
eonfox.prototype.submit({ |
|||
callback: function(){ |
|||
//从本地缓存中同步获取指定 key 对应的内容。
|
|||
var websocket_token = ""; |
|||
var websocket_token = eonfox.prototype.token(); |
|||
if( (function(){try{ return storage_token['session_websocket_token'];}catch(e){return false;}}()) ){ |
|||
websocket_token = storage_token['session_websocket_token']; |
|||
} |
|||
fn(websocket_token); |
|||
} |
|||
}); |
|||
return true; |
|||
} |
|||
}, |
|||
|
|||
|
|||
|
|||
/* 中断请求任务 */ |
|||
abort : function(){ |
|||
//清理等待的请求
|
|||
eonfox.prototype.submit_queue = []; |
|||
//中断请求任务
|
|||
if( eonfox.prototype.submit_task.abort ){ |
|||
eonfox.prototype.submit_task.abort(); |
|||
} |
|||
}, |
|||
|
|||
|
|||
|
|||
/* 提交请求 |
|||
* 暂时只支持 POST |
|||
* { |
|||
* url : this.api_server_url,默认接口地址 |
|||
* data : {}, |
|||
* callback : 回调函数 第一个是单个 data，第二个是 全部的返回数据 |
|||
* error : 错误回调函数 |
|||
* } |
|||
* |
|||
*/ |
|||
submit : function(config){ |
|||
if( eonfox.prototype.debug ){ |
|||
console.log("submit()传入参数:", config); |
|||
} |
|||
|
|||
//回调函数
|
|||
if( !config.callback || config.callback.constructor != Function ){ |
|||
config.callback = function(){}; |
|||
} |
|||
if( !config.error || config.error.constructor != Function ){ |
|||
config.error = function(){}; |
|||
} |
|||
|
|||
//路由
|
|||
if(typeof config.url == 'undefined' || typeof config.url != 'string'){ |
|||
config.url = this.api_server_url; |
|||
} |
|||
|
|||
config.right_data = {}; |
|||
config.left_data = {}; |
|||
//请求字符串
|
|||
if( config.request ){ |
|||
//如果是对象，则先转换为字符串
|
|||
if(typeof config.request == "object"){ |
|||
config.request = JSON.stringify(config.request) |
|||
} |
|||
if(typeof config.request == "string"){ |
|||
config.right_data.data = config.request; |
|||
config.left_data.data = config.request; |
|||
} |
|||
} |
|||
|
|||
//用户传入的data数据
|
|||
if( config.data && typeof config.data == "object" ){ |
|||
for(var i in config.data){ |
|||
config.right_data[i] = config.data[i]; |
|||
config.left_data[i] = config.data[i]; |
|||
} |
|||
} |
|||
|
|||
if( eonfox.prototype.debug ){ |
|||
console.log("post()：right_data、left_data:", config.right_data, config.left_data); |
|||
} |
|||
|
|||
/*//是否强制提交 |
|||
config.recursion = config.recursion? true : false; |
|||
//大于0，说明存在队列
|
|||
if( this.submit_queue.length > 0 ){ |
|||
//判断是否强制提交
|
|||
if( config.recursion ){ |
|||
//去登记注册
|
|||
eonfox.prototype.submit_register(config); |
|||
}else{ |
|||
//否则返回错误信息
|
|||
console.warn("应用接口提交队列个数：", this.submit_queue.length); |
|||
return config.error("应用接口出现重复提交，前方正在提交队列个数：", this.submit_queue.length); |
|||
} |
|||
}else{ |
|||
//去登记注册
|
|||
eonfox.prototype.submit_register(config); |
|||
} */ |
|||
|
|||
//去登记注册
|
|||
eonfox.prototype.submit_register(config); |
|||
//并且调用执行
|
|||
eonfox.prototype.submit_run(); |
|||
}, |
|||
|
|||
|
|||
|
|||
/** |
|||
* 储存token |
|||
* |
|||
* @param {Object} data |
|||
*/ |
|||
storage_token : function(data){ |
|||
if( !data ){ |
|||
return false; |
|||
} |
|||
|
|||
var token_data = null; |
|||
var exist_right_token = false; |
|||
var exist_left_token = false; |
|||
|
|||
exist_right_token = (function(){try{ return data['token']['session_right_token'];}catch(e){return false;}}()); |
|||
exist_left_token = (function(){try{ return data['token']['session_left_token'];}catch(e){return false;}}()); |
|||
if(exist_right_token && exist_left_token){ |
|||
token_data = data['token']; |
|||
}else{ |
|||
//有可能是顶级关联对象
|
|||
exist_right_token = (function(){try{ return data['session_right_token'];}catch(e){return false;}}()); |
|||
exist_left_token = (function(){try{ return data['session_left_token'];}catch(e){return false;}}()); |
|||
if(exist_right_token && exist_left_token){ |
|||
token_data = data; |
|||
} |
|||
} |
|||
|
|||
if(!token_data){ |
|||
return false; |
|||
} |
|||
|
|||
//从本地缓存中同步获取指定 key 对应的内容。
|
|||
var storage_token = eonfox.prototype.token(); |
|||
if( (function(){try{ return storage_token['session_right_token'];}catch(e){return false;}}()) && |
|||
(function(){try{ return storage_token['session_left_token'];}catch(e){return false;}}()) ){ |
|||
|
|||
if(storage_token['session_right_token'] == token_data['session_right_token'] || |
|||
storage_token['session_left_token'] == token_data['session_left_token'] ){ |
|||
if( eonfox.prototype.debug ){ |
|||
console.log("需要对比旧token中的当前时间戳,为true则不需要更新token", storage_token['session_now_time'], token_data['session_now_time'], parseInt(storage_token['session_now_time']) > parseInt(token_data['session_now_time'])); |
|||
} |
|||
if( parseInt(storage_token['session_now_time']) > parseInt(token_data['session_now_time']) ){ |
|||
if( eonfox.prototype.debug ){ |
|||
console.log("并发异步，不需要更新token" ); |
|||
} |
|||
return false; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
//console.log( uni.setStorageSync );
|
|||
|
|||
try { |
|||
uni.setStorageSync(this.session_name +":"+ this.application, JSON.stringify(token_data)); |
|||
} catch (e) { |
|||
console.warn(e); |
|||
return false; |
|||
} |
|||
|
|||
return true; |
|||
}, |
|||
|
|||
|
|||
|
|||
/** |
|||
* 获取token |
|||
* |
|||
* @param {Function} error_function |
|||
*/ |
|||
token : function(error_function){ |
|||
//异步可能存在覆盖的问题，所以对比已存在的token,如果右左有一个相同则比较当前时间，即最大的当前时间是最新的。
|
|||
var storage_token = false; |
|||
try { |
|||
storage_token = uni.getStorageSync(this.session_name +":"+ this.application); |
|||
if( storage_token ){ |
|||
storage_token = (function(){try{ return JSON.parse(storage_token);}catch(e){return false;}}()); |
|||
} |
|||
} catch (e) { |
|||
console.warn(e); |
|||
if(error_function){ |
|||
error_function(e); |
|||
} |
|||
return false; |
|||
} |
|||
|
|||
return storage_token; |
|||
}, |
|||
|
|||
|
|||
/** |
|||
* 获取左token |
|||
* 如果没用传入回调函数，那么则直接返回当前左令牌，但是有可能会出现左令牌失效 |
|||
* 正常操作是，传入一个回调函数，左令牌始终是保持最新的。 |
|||
* |
|||
* @param {Function} #fn |
|||
*/ |
|||
left_token : function(fn){ |
|||
if(typeof fn != "function"){ |
|||
var storage_token = eonfox.prototype.token(); |
|||
if( (function(){try{ return storage_token['session_left_token'];}catch(e){return false;}}()) ){ |
|||
return storage_token['session_left_token']; |
|||
}else{ |
|||
return ''; |
|||
} |
|||
}else{ |
|||
eonfox.prototype.submit({ |
|||
callback: function(){ |
|||
//从本地缓存中同步获取指定 key 对应的内容。
|
|||
var left_token = ""; |
|||
var storage_token = eonfox.prototype.token(); |
|||
if( (function(){try{ return storage_token['session_left_token'];}catch(e){return false;}}()) ){ |
|||
left_token = storage_token['session_left_token']; |
|||
} |
|||
fn(left_token); |
|||
} |
|||
}); |
|||
return true; |
|||
} |
|||
}, |
|||
/* 获取 websocket 数据 */ |
|||
websocket_data : function(res){ |
|||
console.log(res); |
|||
if( !res.data ){ |
|||
|
|||
return false; |
|||
} |
|||
|
|||
return JSON.parse( res.data ); |
|||
} |
|||
|
|||
}; |
|||
export default eonfox; |
|||
@ -0,0 +1,285 @@ |
|||
var fns = { |
|||
//--------------
|
|||
//api接口验证
|
|||
checkError: function(data, ids, error){ |
|||
if(typeof(error)!='function'){ |
|||
error=function(){ |
|||
} |
|||
} |
|||
if(data.errno){ |
|||
error(data.errno, data.error); |
|||
return false; |
|||
} |
|||
if(!data.data){ |
|||
error(1, "未知错误"); |
|||
return false; |
|||
} |
|||
if(ids){ |
|||
if(typeof ids =='object'){ |
|||
for( var i in ids){ |
|||
if(typeof ids[i] != "undefined"){ |
|||
var id = ids[i]; |
|||
if( data.data[id] && data.data[id].errno ){ |
|||
error(data.data[id].errno, data.data[id].error); |
|||
return false; |
|||
} |
|||
}else{ |
|||
error(1, "“"+ids[i]+"”目标，未知错误"); |
|||
return false; |
|||
} |
|||
} |
|||
}else if(typeof ids =='string' || typeof ids == 'number'){ |
|||
if(typeof data.data[ids] != "undefined" ){ |
|||
if( data.data[ids].errno ){ |
|||
error(data.data[ids].errno, data.data[ids].error); |
|||
return false; |
|||
} |
|||
}else{ |
|||
error(1, "“"+ids+"”目标，未知错误"); |
|||
return false; |
|||
} |
|||
}else{ |
|||
error(1, "“"+ids+"”目标，未知错误"); |
|||
return false; |
|||
} |
|||
|
|||
} |
|||
|
|||
var data_list = {}; |
|||
|
|||
if(data.data){ |
|||
for(var i in data.data){ |
|||
if(typeof data.data[i].data != "undefined"){ |
|||
data_list[i] = data.data[i].data; |
|||
} |
|||
} |
|||
} |
|||
return data_list; |
|||
}, |
|||
//数据处理 ceil向上取整
|
|||
number_pre:function(number,pre){ |
|||
switch(pre){ |
|||
case 'ceil': |
|||
return Math.ceil(number) |
|||
break; |
|||
} |
|||
}, |
|||
//保留两位小数
|
|||
number_floor_2:function(number){ |
|||
var number = number * 100; |
|||
number = Math.floor(number) |
|||
number = number/100; |
|||
return number.toFixed(2); |
|||
}, |
|||
//错误信息处理
|
|||
err:function(title,data,_json,fun){ |
|||
|
|||
if(data){ |
|||
if(_json){ |
|||
data=JSON.stringify(data) |
|||
} |
|||
console.log(title+' :',data) |
|||
uni.showToast({ |
|||
title:title+' : '+data, |
|||
icon:'none', |
|||
duration:1500, |
|||
success() { |
|||
if(fun){ |
|||
fun(); |
|||
} |
|||
} |
|||
}) |
|||
}else{ |
|||
console.log(title) |
|||
uni.showToast({ |
|||
title:title, |
|||
icon:'none', |
|||
duration:1500, |
|||
success() { |
|||
if(fun){ |
|||
fun(); |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
//成功信息处理
|
|||
success(title,fun){ |
|||
if(fun){ |
|||
fun(); |
|||
} |
|||
uni.hideLoading(); |
|||
/* uni.showToast({ |
|||
title:title, |
|||
icon:'success', |
|||
success() { |
|||
if(fun){ |
|||
fun(); |
|||
} |
|||
} |
|||
}) */ |
|||
}, |
|||
//敬请期待
|
|||
waiting:function(){ |
|||
uni.showToast({ |
|||
title:'敬请期待', |
|||
icon:'none' |
|||
}) |
|||
}, |
|||
//授权验证
|
|||
oauth_:function(){ |
|||
uni.setStorage({ |
|||
key:'oauth', |
|||
data:true |
|||
}) |
|||
}, |
|||
noauth:function(){ |
|||
uni.setStorage({ |
|||
key:'oauth', |
|||
data:false |
|||
}) |
|||
}, |
|||
//绑定验证
|
|||
unionid:function(){ |
|||
uni.setStorage({ |
|||
key:'unionid', |
|||
data:true |
|||
}) |
|||
}, |
|||
nunionid:function(){ |
|||
uni.setStorage({ |
|||
key:'unionid', |
|||
data:false |
|||
}) |
|||
}, |
|||
//绑定
|
|||
bind:function(){ |
|||
console.log('oauth'); |
|||
uni.getStorage({ |
|||
key:'oauth', |
|||
success(re) { |
|||
console.log('oauth',re); |
|||
} |
|||
}) |
|||
}, |
|||
//获取指定url参数
|
|||
getUrlQuery:function (urlStr) { |
|||
// var urlStr = location.search.substr(1) ? location.search.substr(1) : "";
|
|||
var urlArr = []; |
|||
for(var i = 0; i < urlStr.split("&").length; i++) { |
|||
urlArr.push(urlStr.split("&")[i].split("=")[0] ? urlStr.split("&")[i].split("=")[0] : ""); |
|||
urlArr.push(urlStr.split("&")[i].split("=")[1] ? urlStr.split("&")[i].split("=")[1] : "onlyKey") |
|||
} |
|||
if(urlStr == "") { |
|||
return; |
|||
} else { |
|||
var urlObj = {} |
|||
for(var i = 0; i < urlArr.length; i += 2) { |
|||
if(urlArr[i] != "") { |
|||
urlObj[urlArr[i]] = decodeURIComponent(urlArr[i + 1]); |
|||
} |
|||
} |
|||
return urlObj; |
|||
} |
|||
} |
|||
, |
|||
// url参数解析
|
|||
getUrlkey:function(url) { |
|||
var params = {}; |
|||
var urls = url.split("?"); console.log('1_分割url:', urls) |
|||
var arr = urls[1].split("&"); console.log('2_分割urls[1]:', arr) |
|||
for (var i = 0, l = arr.length; i < l; i++) { |
|||
var a = arr[i].split("="); console.log('3_遍历 arr 并分割后赋值给a:', a[0], a[1]) |
|||
params[a[0]] = a[1]; console.log('4_a给params对象赋值:', params) |
|||
} console.log('5_结果:', params) |
|||
return params; |
|||
} |
|||
, |
|||
toast(tit,url,time){ |
|||
if(!time){ |
|||
time=1500 |
|||
} |
|||
uni.showToast({ |
|||
title:tit, |
|||
success() { |
|||
setTimeout(function(){ |
|||
uni.reLaunch({ |
|||
url:url |
|||
}) |
|||
},time) |
|||
} |
|||
}) |
|||
}, |
|||
setSystemInfoSync(){ |
|||
uni.getStorage({ |
|||
key:'SystemInfoSync', |
|||
fail(err) { |
|||
console.log('设置缓存'); |
|||
try { |
|||
console.log('star'); |
|||
const res = uni.getSystemInfoSync(); |
|||
console.log('config'+JSON.stringify(res)); |
|||
uni.setStorage({ |
|||
key:'SystemInfoSync', |
|||
data:res |
|||
}) |
|||
console.log('ok'); |
|||
} catch (e) { |
|||
console.log('catch+'+JSON.stringify(e)); |
|||
// error
|
|||
} |
|||
}, |
|||
|
|||
}) |
|||
}, |
|||
getCompare(Version,newVersion,fun){ |
|||
if(Version==newVersion){ |
|||
console.log('没有更新'); |
|||
return |
|||
} |
|||
console.log('接收到参数'); |
|||
uni.getStorage({ |
|||
key:'SystemInfoSync', |
|||
success(res) { |
|||
console.log('缓存:'+JSON.stringify(res)); |
|||
if(res.data){ |
|||
var SystemInfoSync=res.data; |
|||
console.log('json:'+JSON.stringify(SystemInfoSync)); |
|||
console.log('设备:'+SystemInfoSync.platform); |
|||
if(SystemInfoSync.platform=='android'){ |
|||
console.log('设备:安卓'); |
|||
fun(); |
|||
} |
|||
}else{ |
|||
return this.setSystemInfo(); |
|||
} |
|||
}, |
|||
fail(err) { |
|||
console.log('缓存获取失败'+JSON.stringify(err)); |
|||
const res = uni.getSystemInfoSync(); |
|||
console.log('config'+JSON.stringify(res)); |
|||
uni.setStorage({ |
|||
key:'SystemInfoSync', |
|||
data:res, |
|||
success() { |
|||
if(res.platform=='android'){ |
|||
console.log('设备:安卓'); |
|||
fun(); |
|||
} |
|||
} |
|||
}) |
|||
|
|||
}, |
|||
complete() { |
|||
console.log('获取缓存'); |
|||
} |
|||
}) |
|||
|
|||
|
|||
|
|||
} |
|||
//------------------------
|
|||
}; |
|||
|
|||
export default fns; |
|||
@ -0,0 +1,39 @@ |
|||
import eonfox from '@/components/eonfox/eonfox.js'; |
|||
var ef=new eonfox() |
|||
import f from '@/components/eonfox/fns.js'; |
|||
var pay= { |
|||
shoppingCar:function(groupId,method,pass,fun){ |
|||
ef.submit({ |
|||
request:{ |
|||
s:['SHOPGROUPGOODSSELFPAY',[{id:groupId,pay_method:method,pay_password:pass}]] |
|||
}, |
|||
callback:function(data){ |
|||
const dataList=(data=f.checkError(data,'s',function(errno,error){ |
|||
f.err(error) |
|||
|
|||
})) |
|||
console.log('da...',dataList) |
|||
if(dataList.s==true){ |
|||
fun() |
|||
} |
|||
|
|||
// var dataList=data.s
|
|||
// if(dataList.data){
|
|||
// if(dataList.data==true){
|
|||
// f.err('支付成功')
|
|||
// }else{
|
|||
// f.err('支付失败')
|
|||
// }
|
|||
//
|
|||
// }
|
|||
|
|||
console.log('支付结果'); |
|||
}, |
|||
error(err){ |
|||
f.err('',err,1) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
} |
|||
export default pay; |
|||
@ -0,0 +1,12 @@ |
|||
/* 商家模块 */ |
|||
var merchant = function(){}; |
|||
merchant.prototype = { |
|||
|
|||
constructor : merchant, |
|||
|
|||
//收银员的订单列表是否需要刷新
|
|||
cashierOrderListRefresh : false |
|||
|
|||
}; |
|||
|
|||
export default merchant; |
|||
@ -0,0 +1,72 @@ |
|||
import eonfox from '@/components/eonfox/eonfox.js'; |
|||
var ef = new eonfox(); |
|||
|
|||
var order = { |
|||
|
|||
/* 检查支付状态 |
|||
order_id 要检查的订单ID |
|||
frequency 检查的次数，当等于0时，则返回回调 |
|||
callback 回调。成功时：callback.success 失败时：callback.fail |
|||
因为有 frequency 次数，所以每次进来 -1 。如果不等于0，那么要继续递归 |
|||
|
|||
order.checkPayState({ |
|||
order_id: order_id, |
|||
frequency: 3, |
|||
success:function(){ |
|||
|
|||
}, |
|||
fail:function(){ |
|||
|
|||
} |
|||
}) |
|||
*/ |
|||
checkPayState : function(data){ |
|||
var _this = this; |
|||
if(typeof data.success != 'function') data.success = function(){}; |
|||
if(typeof data.fail != 'function') data.fail = function(){}; |
|||
if( typeof data.frequency != 'number') data.frequency = 3; |
|||
|
|||
if( !data.frequency || !data.order_id ){ |
|||
return data.fail('参数不正确', data); |
|||
} |
|||
|
|||
|
|||
//如果不等于0，那么要继续递归
|
|||
data.frequency --; |
|||
|
|||
//开始查询状态 0表示未支付；1表示支付成功。
|
|||
ef.submit({ |
|||
request:{ |
|||
s:['APPLICATIONORDERSELFPAYSTATE',[{order_id: data.order_id}]] |
|||
}, |
|||
callback: function(r){ |
|||
console.log('order.checkPayState:::',r); |
|||
// console.log('支付查询回调成功',r.data.s.data) ;return r.data.s.data;
|
|||
if( !r.errno && !r.data.s.errno && r.data.s.data){ |
|||
console.log('支付成功'); |
|||
//获取成功，无错误信息时
|
|||
return data.success(); |
|||
} else { |
|||
console.log('支付状态查询失败或者未支付'); |
|||
if( !data.frequency ){ |
|||
return data.fail(); |
|||
}else{ |
|||
setTimeout(function() { |
|||
return _this.checkPayState(data); |
|||
}, 2000); |
|||
} |
|||
} |
|||
}, |
|||
error(err){ |
|||
data.fail(err); |
|||
} |
|||
}) |
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
}; |
|||
|
|||
export default order; |
|||
@ -0,0 +1,70 @@ |
|||
import eonfox from '@/components/eonfox/eonfox.js'; |
|||
var ef=new eonfox() |
|||
import f from '@/components/eonfox/fns.js'; |
|||
var pay= { |
|||
set_password:function(pass,pass_confirm,fun){ |
|||
ef.submit({ |
|||
request:{ |
|||
set_pass:['setpass',[{password:pass}]] |
|||
}, |
|||
callback:function(data){ |
|||
if(data=f.checkError(data,'set_pass',function(errno,error){ |
|||
f.err(error) |
|||
})){ |
|||
fun() |
|||
}else{ |
|||
f.err('设置失败') |
|||
} |
|||
console.log('支付结果'); |
|||
}, |
|||
error(err){ |
|||
f.err('',err,1) |
|||
} |
|||
}) |
|||
}, |
|||
shoppingCar:function(id,method,pass,fun){ |
|||
ef.submit({ |
|||
request:{ |
|||
s:['SHOPORDERSELFPAYMENT',[{order_id:id,pay_method:method,pay_password:pass}]] |
|||
}, |
|||
callback:function(data){ |
|||
const dataList=(data=f.checkError(data,'s',function(errno,error){ |
|||
f.err(error) |
|||
|
|||
})) |
|||
console.log('da...',dataList) |
|||
if(dataList.s.order_id){ |
|||
|
|||
f.err('支付成功') |
|||
return ok |
|||
} |
|||
|
|||
console.log('支付结果'); |
|||
}, |
|||
error(err){ |
|||
f.err('',err,1) |
|||
} |
|||
}) |
|||
}, |
|||
//取消订单
|
|||
cancel_order:function(id,fun){ |
|||
ef.submit({ |
|||
request:{ |
|||
cancel_order:['SHOPORDERSELFCANCEL',[{id:id}]] |
|||
}, |
|||
callback:function(data){ |
|||
if(data=f.checkError(data,'cancel_order',function(errno,error){ |
|||
f.err(error) |
|||
})){ |
|||
fun() |
|||
}else{ |
|||
f.err('订单取消失败') |
|||
} |
|||
}, |
|||
error(err){ |
|||
f.err('',err,1) |
|||
} |
|||
}) |
|||
}, |
|||
} |
|||
export default pay; |
|||
@ -0,0 +1,61 @@ |
|||
var polling = { |
|||
|
|||
//定时器ID
|
|||
_interval_id : null, |
|||
_switch : false, |
|||
|
|||
//关闭
|
|||
close : function(){ |
|||
clearInterval(this._interval_id); |
|||
this._interval_id = null; |
|||
}, |
|||
|
|||
//暂停
|
|||
stop : function(){ |
|||
this._switch = false; |
|||
}, |
|||
|
|||
//启动
|
|||
start : function(){ |
|||
this._switch = true; |
|||
}, |
|||
|
|||
|
|||
/** |
|||
* 开启 |
|||
* |
|||
* @param {Time} ms 毫秒数 |
|||
* @param {Function} fn 回调函数 |
|||
*/ |
|||
run : function(ms, fn){ |
|||
if( !ms || typeof ms != 'number'){ |
|||
ms = 3000;//默认3秒
|
|||
} |
|||
if(!fn || typeof fn != 'function'){ |
|||
fn = function(){}; |
|||
} |
|||
|
|||
var _this = this; |
|||
//如果已经存在，则要关闭轮询
|
|||
if( _this._interval_id ){ |
|||
_this.start(); |
|||
return true; |
|||
} |
|||
|
|||
var i = 0; |
|||
_this._switch = true; |
|||
_this._interval_id = setInterval(function(){ |
|||
if( !_this._switch ){ |
|||
return false; |
|||
} |
|||
|
|||
i ++; |
|||
fn(i); |
|||
}, ms); |
|||
|
|||
return true; |
|||
} |
|||
|
|||
}; |
|||
|
|||
export default polling; |
|||
File diff suppressed because it is too large
@ -0,0 +1,3 @@ |
|||
// 版本控制文件
|
|||
var version='0.0.12'; |
|||
export default version; |
|||
@ -0,0 +1,541 @@ |
|||
import eonfoxObject from '@/components/eonfox/eonfox.js'; |
|||
var eonfox = new eonfoxObject(); |
|||
var websocket_app = false; |
|||
//#ifdef APP-PLUS
|
|||
websocket_app = true; |
|||
//#endif
|
|||
|
|||
var websocket = function(config){}; |
|||
websocket.prototype = { |
|||
|
|||
// url :'wss://developer.eapie.eonfox.com:9997',//测试版
|
|||
url :'wss://eapie.eonfox.com:9999',//正式版
|
|||
connect_type : 0,//连接类型。0是安卓，1是非安卓
|
|||
debug: false,//是否调试
|
|||
close_type : 0,//1是手动关闭，不会再尝试连接
|
|||
token:'',//websocket令牌
|
|||
open:false,//打开状态
|
|||
client_id:'',//连接ID
|
|||
server_time: 0,//websocket 服务器时间
|
|||
messages:[],//接受的websocket消息的集合
|
|||
message_max_number:10,//最大消息个数
|
|||
messages_change:function(){},//变动时执行的函数
|
|||
|
|||
heartbeat_interval_id: null,//心跳检测的定时器ID
|
|||
heartbeat_ms: 15000,//心跳检测毫秒
|
|||
heartbeat_messages:[],//心跳检测的信息集合
|
|||
heartbeat_message_max_number:10,//最大消息个数
|
|||
heartbeat_messages_change:function(){},//变动时执行的函数
|
|||
|
|||
|
|||
connect_parameter: null,//连接websocket的参数
|
|||
|
|||
|
|||
/* 调试信息 */ |
|||
debug_message:function(message, fn){ |
|||
if( !websocket.prototype.debug ){ |
|||
return false; |
|||
} |
|||
|
|||
console.log(message); |
|||
|
|||
uni.showToast({ |
|||
title: message, |
|||
icon: 'none', |
|||
duration: 3000 |
|||
}); |
|||
|
|||
if(typeof fn == 'function'){ |
|||
fn(); |
|||
} |
|||
}, |
|||
|
|||
/* 获取 websocket 数据 */ |
|||
get_data : function(res){ |
|||
if( !res.data ){ |
|||
return false; |
|||
} |
|||
return JSON.parse( res.data ); |
|||
}, |
|||
|
|||
|
|||
|
|||
/* 设置心跳检测的信息集合 */ |
|||
set_heartbeat_messages: function(message){ |
|||
if( this.heartbeat_messages.length >= this.heartbeat_message_max_number ){ |
|||
this.heartbeat_messages.pop();//删除最后一个元素
|
|||
} |
|||
|
|||
//往前面添加
|
|||
this.heartbeat_messages.unshift(message); |
|||
if(typeof websocket.prototype.heartbeat_messages_change == 'function') websocket.prototype.heartbeat_messages_change(); |
|||
}, |
|||
|
|||
|
|||
/* 设置心跳检测的信息集合 */ |
|||
set_messages: function(message){ |
|||
if( this.messages.length >= this.message_max_number ){ |
|||
this.messages.pop();//删除最后一个元素
|
|||
} |
|||
|
|||
//往前面添加
|
|||
this.messages.unshift(message); |
|||
if(typeof websocket.prototype.messages_change == 'function') websocket.prototype.messages_change(); |
|||
}, |
|||
|
|||
messages_change_function: function(fn){ |
|||
websocket.prototype.messages_change = fn; |
|||
}, |
|||
|
|||
heartbeat_messages_change_function: function(fn){ |
|||
websocket.prototype.heartbeat_messages_change = fn; |
|||
}, |
|||
|
|||
|
|||
/** |
|||
* 获取左 websocket_token |
|||
* 如果没用传入回调函数，那么则直接返回当前左令牌，但是有可能会出现左令牌失效 |
|||
* 正常操作是，传入一个回调函数，左令牌始终是保持最新的。 |
|||
* |
|||
* @param {Function} #fn |
|||
*/ |
|||
session_websocket_token : function(fn){ |
|||
if(typeof fn != "function"){ |
|||
var storage_token = eonfox.token(); |
|||
if( (function(){try{ return storage_token['session_websocket_token'];}catch(e){return false;}}()) ){ |
|||
return storage_token['session_websocket_token']; |
|||
}else{ |
|||
return ''; |
|||
} |
|||
}else{ |
|||
eonfox.submit({ |
|||
callback: function(){ |
|||
//从本地缓存中同步获取指定 key 对应的内容。
|
|||
var websocket_token = ""; |
|||
var storage_token = eonfox.token(); |
|||
if( (function(){try{ return storage_token['session_websocket_token'];}catch(e){return false;}}()) ){ |
|||
websocket_token = storage_token['session_websocket_token']; |
|||
} |
|||
fn(websocket_token); |
|||
} |
|||
}); |
|||
return true; |
|||
} |
|||
}, |
|||
|
|||
/* |
|||
* 获取 websocket 令牌 |
|||
* 传入一个回调函数 |
|||
*/ |
|||
get_token : function(fn){ |
|||
var websocket_token = websocket.prototype.session_websocket_token(); |
|||
if( websocket_token ){ |
|||
console.log('get_websocket_token 已存在', websocket_token); |
|||
fn(websocket_token); |
|||
}else{ |
|||
console.log('get_websocket_token 不存在，异步获取'); |
|||
websocket.prototype.session_websocket_token(function(websocket_token){ |
|||
fn(websocket_token); |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
|
|||
|
|||
/* 连接 websocket */ |
|||
connect: function(connectParameter){ |
|||
websocket.prototype.connect_type = 1;//连接类型。0是安卓，1是非安卓
|
|||
websocket.prototype.not_android_connect(connectParameter); |
|||
// if( websocket_app && plus.os.name == 'Android'){
|
|||
// websocket.prototype.connect_type = 0;//连接类型。0是安卓，1是非安卓
|
|||
// websocket.prototype.android_connect(connectParameter);
|
|||
// }else{
|
|||
// websocket.prototype.connect_type = 1;//连接类型。0是安卓，1是非安卓
|
|||
// websocket.prototype.not_android_connect(connectParameter);
|
|||
// }
|
|||
}, |
|||
|
|||
//安卓程序
|
|||
android_connect: function(connectParameter){}, |
|||
|
|||
|
|||
//非安卓程序
|
|||
//data.onSocketOpen
|
|||
not_android_connect: function(connectParameter){ |
|||
var _this = this; |
|||
websocket.prototype.debug_message('websocket.connect 连接 websocket'); |
|||
websocket.prototype.connect_parameter = connectParameter; |
|||
websocket.prototype.get_token(function(token){ |
|||
if( !token ){ |
|||
//这里弹出错误消息
|
|||
websocket.prototype.debug_message('websocket.connect 连接失败！没有获取到 websocket token'); |
|||
} |
|||
|
|||
//链接
|
|||
uni.connectSocket({ |
|||
url: websocket.prototype.url, |
|||
success(){ |
|||
_this.set_messages({ |
|||
state:true, |
|||
content:'连接webscoket成功', |
|||
}); |
|||
websocket.prototype.token = token; |
|||
websocket.prototype.debug_message(' uni.connectSocket 连接webscoket成功!token:'+token); |
|||
}, |
|||
fail(){ |
|||
_this.set_messages({ |
|||
state:false, |
|||
content:'连接webscoket失败', |
|||
}); |
|||
|
|||
websocket.prototype.debug_message(' uni.connectSocket 连接webscoket失败!token:'+token); |
|||
} |
|||
}); |
|||
|
|||
}); |
|||
|
|||
//WebSocket连接打开监听
|
|||
uni.onSocketOpen(function () { |
|||
websocket.prototype.close_type = 0; |
|||
websocket.prototype.open = true; |
|||
websocket.prototype.debug_message('uni.onSocketOpen WebSocket连接已经打开监听!'); |
|||
if(connectParameter && typeof connectParameter.onSocketOpen == 'function'){ |
|||
connectParameter.onSocketOpen(); |
|||
} |
|||
}); |
|||
|
|||
uni.onSocketClose(function (res) { |
|||
websocket.prototype.token = ''; |
|||
websocket.prototype.open = false; |
|||
websocket.prototype.client_id = ''; |
|||
//关闭心跳检测
|
|||
if( websocket.prototype.heartbeat_interval_id ){ |
|||
clearInterval( websocket.prototype.heartbeat_interval_id ); |
|||
} |
|||
|
|||
if(connectParameter && typeof connectParameter.onSocketClose == 'function'){ |
|||
connectParameter.onSocketClose(res); |
|||
} |
|||
|
|||
//开启心跳检测
|
|||
if( websocket.prototype.close_type == 0){ |
|||
websocket.prototype.debug_message('uni.onSocketClose 非手动关闭，开启心跳守护'); |
|||
setTimeout(function(){ |
|||
websocket.prototype.connect(connectParameter); |
|||
}, websocket.prototype.heartbeat_ms); |
|||
|
|||
} |
|||
websocket.prototype.debug_message('uni.onSocketClose WebSocket 已关闭！'); |
|||
}); |
|||
|
|||
//收到服务器内容
|
|||
uni.onSocketMessage(function (res) { |
|||
console.log('onSocketMessage!!!!!!!!'); |
|||
//给一个超时器
|
|||
setTimeout(function(){ |
|||
console.log('setTimeout!!!!!!!!'); |
|||
websocket.prototype.debug_message('onSocketMessage 获取 websocket 数据:' + JSON.stringify(res)); |
|||
var websocket_token = eonfox.websocketToken(); |
|||
var r = websocket.prototype.get_data(res); |
|||
//websocket 检查连接ID值(旧-新)
|
|||
if( (r.data && r.data.client_id && websocket.prototype.client_id != r.data.client_id) || |
|||
(r.data && r.data.server_time && websocket.prototype.server_time != r.data.server_time) || |
|||
(websocket.prototype.token != websocket_token) ){ |
|||
if(r.data && r.data.client_id && websocket.prototype.client_id != r.data.client_id){ |
|||
websocket.prototype.debug_message('websocket 连接ID 不一致',function(){ |
|||
console.log('websocket.prototype.client_id != r.data.client_id', websocket.prototype.client_id, r.data.client_id); |
|||
}); |
|||
} |
|||
if(r.data && r.data.server_time && websocket.prototype.server_time != r.data.server_time){ |
|||
websocket.prototype.debug_message('websocket 服务器时间 不一致',function(){ |
|||
console.log('websocket.prototype.server_time != r.data.server_time', websocket.prototype.server_time, r.data.server_time); |
|||
}); |
|||
} |
|||
if(websocket.prototype.token != websocket_token){ |
|||
websocket.prototype.debug_message('websocket_token 不一致',function(){ |
|||
console.log('websocket.prototype.token != websocket_token', websocket.prototype.token, websocket_token); |
|||
}); |
|||
} |
|||
return websocket.prototype.init( r.data.client_id, r.data.server_time, websocket_token, connectParameter, function(){ |
|||
if(typeof connectParameter.onSocketMessage == 'function'){ |
|||
connectParameter.onSocketMessage(res); |
|||
} |
|||
});//初始化
|
|||
}else{ |
|||
if(connectParameter && typeof connectParameter.onSocketMessage == 'function'){ |
|||
connectParameter.onSocketMessage(res); |
|||
} |
|||
} |
|||
|
|||
}, 0); |
|||
|
|||
}); |
|||
|
|||
uni.onSocketError(function (res) { |
|||
//开启心跳检测
|
|||
setTimeout(function(){ |
|||
websocket.prototype.connect(connectParameter); |
|||
}, websocket.prototype.heartbeat_ms); |
|||
if(connectParameter && typeof connectParameter.onSocketError == 'function'){ |
|||
connectParameter.onSocketError(res); |
|||
} |
|||
_this.set_messages({ |
|||
state:false, |
|||
content:'连接webscoket失败', |
|||
error: res |
|||
}); |
|||
|
|||
websocket.prototype.debug_message('uni.onSocketError WebSocket连接打开失败，请检查!error:'+res); |
|||
}); |
|||
}, |
|||
|
|||
|
|||
|
|||
/* 初始化 */ |
|||
init : function( client_id, server_time, token, connectParameter, callback){ |
|||
var errorData = { |
|||
open : websocket.prototype.open, |
|||
token : websocket.prototype.token, |
|||
client_id : client_id |
|||
}; |
|||
|
|||
if( !websocket.prototype.open || !client_id ){ |
|||
_this.set_messages({ |
|||
state:false, |
|||
content:'websocket 初始化失败', |
|||
error: '' |
|||
}); |
|||
websocket.prototype.debug_message('websocket 初始化失败！'); |
|||
}; |
|||
|
|||
eonfox.submit({ |
|||
request: { |
|||
s: ['SESSIONWEBSOCKETSELFCLIENT', [{ |
|||
client_id: client_id, //连接id
|
|||
server_time: server_time // 服务器时间
|
|||
}]] |
|||
}, |
|||
callback: function(){ |
|||
//必须是在初始化成功之后 才更新连接ID值
|
|||
websocket.prototype.client_id = client_id; |
|||
websocket.prototype.server_time = server_time; |
|||
//再次重置 websoket 令牌
|
|||
websocket.prototype.token = token; |
|||
//开启心跳检测
|
|||
if( websocket.prototype.heartbeat_interval_id ){ |
|||
clearInterval( websocket.prototype.heartbeat_interval_id ); |
|||
} |
|||
websocket.prototype.heartbeat_interval_id = setInterval(function(){ |
|||
websocket.prototype.debug_message('websocket init 心跳检测'); |
|||
websocket.prototype.heartbeat(function(errorData){ |
|||
websocket.prototype.debug_message('websocket init 心跳检测失败', function(){ |
|||
console.log('websocket_init 心跳检测失败返回值：', errorData); |
|||
}); |
|||
clearInterval( websocket.prototype.heartbeat_interval_id ); |
|||
websocket.prototype.connect(connectParameter); |
|||
}); |
|||
}, websocket.prototype.heartbeat_ms); |
|||
|
|||
if(typeof connectParameter.initSuccess != 'function') connectParameter.initSuccess = function(){}; |
|||
connectParameter.initSuccess(); |
|||
websocket.prototype.debug_message('websocket init 初始化成功'); |
|||
websocket.prototype.set_heartbeat_messages({ |
|||
state:true, |
|||
content:'websocket init 初始化成功！' |
|||
}); |
|||
if(typeof callback != 'function') callback = function(){}; |
|||
callback(); |
|||
}, |
|||
error : function(errorData){ |
|||
websocket.prototype.debug_message('websocket init 初始化错误'); |
|||
websocket.prototype.set_heartbeat_messages({ |
|||
state:false, |
|||
content:'websocket init 初始化错误！', |
|||
error:errorData |
|||
}); |
|||
return connectParameter.initError(errorData); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
|
|||
/* 发送心跳 */ |
|||
heartbeat: function(errorFunction){ |
|||
var errorData = { |
|||
open : websocket.prototype.open, |
|||
token : websocket.prototype.token, |
|||
client_id : websocket.prototype.client_id |
|||
}; |
|||
if( !websocket.prototype.open || !websocket.prototype.token ){ |
|||
if(typeof errorFunction != 'function') errorFunction = function(){}; |
|||
websocket.prototype.debug_message('websocket heartbeat 初始化失败！'); |
|||
websocket.prototype.set_heartbeat_messages({ |
|||
state:false, |
|||
content:'websocket 初始化失败！' |
|||
}); |
|||
return errorFunction(errorData); |
|||
}; |
|||
|
|||
var heartbeat = JSON.stringify({ |
|||
module:'heartbeat', |
|||
application: eonfox.application, |
|||
token: websocket.prototype.token |
|||
}); |
|||
|
|||
uni.sendSocketMessage({ |
|||
data: heartbeat, |
|||
success: function(res){ |
|||
websocket.prototype.debug_message('websocket heartbeat 保持心跳成功！'); |
|||
websocket.prototype.set_heartbeat_messages({ |
|||
state:true, |
|||
content:'websocket heartbeat 保持心跳成功！' |
|||
}); |
|||
}, |
|||
fail: function(data){ |
|||
websocket.prototype.debug_message('websocket heartbeat 保持心跳失败！'); |
|||
websocket.prototype.set_heartbeat_messages({ |
|||
state:false, |
|||
content:'websocket heartbeat 保持心跳失败！', |
|||
error: data |
|||
}); |
|||
return errorFunction(errorData); |
|||
} |
|||
}); |
|||
|
|||
}, |
|||
|
|||
|
|||
|
|||
//重启 websocket
|
|||
restart : function(){ |
|||
websocket.prototype.close(); |
|||
//重启
|
|||
websocket.prototype.connect(websocket.prototype.connect_parameter); |
|||
websocket.prototype.debug_message('重启 websocket'); |
|||
}, |
|||
|
|||
//关闭
|
|||
close : function(){ |
|||
//关闭
|
|||
if( websocket.prototype.open ){ |
|||
//连接类型。0是安卓，1是非安卓
|
|||
if( websocket.prototype.connect_type == 1 ){ |
|||
uni.closeSocket(); |
|||
}else{ |
|||
//
|
|||
} |
|||
} |
|||
|
|||
websocket.prototype.close_type = 1; |
|||
websocket.prototype.token = ''; |
|||
websocket.prototype.open = false; |
|||
websocket.prototype.client_id = ''; |
|||
//关闭心跳检测
|
|||
if( websocket.prototype.heartbeat_interval_id ){ |
|||
clearInterval( websocket.prototype.heartbeat_interval_id ); |
|||
} |
|||
|
|||
}, |
|||
|
|||
|
|||
|
|||
|
|||
/* 用户向用户推送 */ |
|||
user_push : function(user_id, message, errorFunction){ |
|||
var data = { |
|||
open : websocket.prototype.open, |
|||
token : websocket.prototype.token |
|||
} |
|||
if( !websocket.prototype.open || !websocket.prototype.token ){ |
|||
if(typeof errorFunction != 'function') errorFunction = function(){}; |
|||
return errorFunction(data); |
|||
} |
|||
var user_push = JSON.stringify({ |
|||
module:'user_push', |
|||
application: eonfox.application, |
|||
token: websocket.prototype.token, |
|||
user_id:user_id, |
|||
message: message, |
|||
}); |
|||
|
|||
uni.sendSocketMessage({ |
|||
data: user_push, |
|||
success: function(res){ |
|||
websocket.prototype.debug_message('websocket 消息推送成功！', function(){ |
|||
console.log('user_push', res) |
|||
}); |
|||
websocket.prototype.set_messages({ |
|||
state:true, |
|||
content:'websocket user_push 消息推送成功！', |
|||
}); |
|||
}, |
|||
fail: function(faildata){ |
|||
websocket.prototype.debug_message('websocket 消息推送失败！', function(){ |
|||
console.log('user_push', faildata) |
|||
}); |
|||
websocket.prototype.set_messages({ |
|||
state:false, |
|||
content:'websocket user_push 消息推送失败！', |
|||
error:faildata |
|||
}); |
|||
|
|||
return errorFunction(errorData); |
|||
} |
|||
}); |
|||
|
|||
}, |
|||
|
|||
|
|||
/* 用户向后台推送 */ |
|||
admin_push : function(message, errorFunction){ |
|||
var data = { |
|||
open : websocket.prototype.open, |
|||
token : websocket.prototype.token |
|||
} |
|||
if( !websocket.prototype.open || !websocket.prototype.token ){ |
|||
if(typeof errorFunction != 'function') errorFunction = function(){}; |
|||
return errorFunction(data); |
|||
} |
|||
var admin_push = JSON.stringify({ |
|||
module:'admin_push', |
|||
application: eonfox.application, |
|||
token: websocket.prototype.token, |
|||
message: message, |
|||
}); |
|||
|
|||
uni.sendSocketMessage({ |
|||
data: admin_push, |
|||
success: function(res){ |
|||
websocket.prototype.debug_message('websocket 消息推送成功！', function(){ |
|||
console.log('admin_push', res) |
|||
}); |
|||
websocket.prototype.set_messages({ |
|||
state:true, |
|||
content:'websocket admin_push 消息推送成功！', |
|||
}); |
|||
|
|||
}, |
|||
fail: function(faildata){ |
|||
websocket.prototype.debug_message('websocket 消息推送失败！', function(){ |
|||
console.log('admin_push', faildata) |
|||
}); |
|||
websocket.prototype.set_messages({ |
|||
state:false, |
|||
content:'websocket admin_push 消息推送失败！', |
|||
error:faildata |
|||
}); |
|||
|
|||
return errorFunction(errorData); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
}; |
|||
|
|||
export default websocket; |
|||
|
|||
|
|||
@ -0,0 +1,28 @@ |
|||
<template> |
|||
<!-- '<audio/>' 组件不再维护，建议使用能力更强的 'uni.createInnerAudioContext' 接口 有时间再改--> |
|||
<!--增加audio标签支持--> |
|||
<audio |
|||
:id="node.attr.id" |
|||
:class="node.classStr" |
|||
:style="node.styleStr" |
|||
:src="node.attr.src" |
|||
:loop="node.attr.loop" |
|||
:poster="node.attr.poster" |
|||
:name="node.attr.name" |
|||
:author="node.attr.author" |
|||
controls></audio> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'wxParseAudio', |
|||
props: { |
|||
node: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
}, |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,119 @@ |
|||
<template> |
|||
<view class=""> |
|||
<!-- #ifdef MP --> |
|||
<image |
|||
:lazy-load="node.attr.lazyLoad" |
|||
:data-src="node.attr.src" |
|||
:src="node.attr.src" |
|||
@tap="wxParseImgTap" |
|||
mode="widthFix" |
|||
class="nodeclassStr" |
|||
/> |
|||
<!-- #endif --> |
|||
<!-- #ifndef MP --> |
|||
<image |
|||
:lazy-load="node.attr.lazyLoad" |
|||
:data-src="node.attr.src" |
|||
:src="node.attr.src" |
|||
@tap="wxParseImgTap" |
|||
:mode="node.attr.mode" |
|||
:class="node.classStr" |
|||
:style="newStyleStr || node.styleStr" |
|||
@load="wxParseImgLoad" |
|||
/> |
|||
<!-- #endif --> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'wxParseImg', |
|||
data() { |
|||
return { |
|||
newStyleStr: '', |
|||
preview: true |
|||
}; |
|||
}, |
|||
inject: ['parseWidth'], |
|||
mounted() {}, |
|||
props: { |
|||
node: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
wxParseImgTap(e) { |
|||
if (!this.preview) return; |
|||
const { src } = e.currentTarget.dataset; |
|||
if (!src) return; |
|||
let parent = this.$parent; |
|||
while (!parent.preview || typeof parent.preview !== 'function') { |
|||
// TODO 遍历获取父节点执行方法 |
|||
parent = parent.$parent; |
|||
} |
|||
parent.preview(src, e); |
|||
}, |
|||
// 图片视觉宽高计算函数区 |
|||
wxParseImgLoad(e) { |
|||
const { src } = e.currentTarget.dataset; |
|||
if (!src) return; |
|||
let { width, height } = e.mp.detail; |
|||
|
|||
const recal = this.wxAutoImageCal(width, height); |
|||
|
|||
const { imageheight, imageWidth } = recal; |
|||
const { padding, mode } = this.node.attr;//删除padding |
|||
// const { mode } = this.node.attr; |
|||
|
|||
const { styleStr } = this.node; |
|||
// console.log(styleStr) |
|||
const imageHeightStyle = mode === 'widthFix' ? '' : `height: ${imageheight}px`; |
|||
// console.log(imageHeightStyle) |
|||
this.newStyleStr = `${styleStr}; ${imageHeightStyle}; width: ${imageWidth}px; padding: 0 ${+padding}px;`;//删除padding |
|||
// this.newStyleStr = `${styleStr}; ${imageHeightStyle}; width: ${imageWidth}px;`; |
|||
// console.log(this.newStyleStr); |
|||
}, |
|||
// 计算视觉优先的图片宽高 |
|||
wxAutoImageCal(originalWidth, originalHeight) { |
|||
// 获取图片的原始长宽 |
|||
const windowWidth = this.parseWidth.value; |
|||
const results = {}; |
|||
|
|||
if (originalWidth < 60 || originalHeight < 60) { |
|||
const { src } = this.node.attr; |
|||
let parent = this.$parent; |
|||
while (!parent.preview || typeof parent.preview !== 'function') { |
|||
parent = parent.$parent; |
|||
} |
|||
parent.removeImageUrl(src); |
|||
this.preview = false; |
|||
} |
|||
|
|||
// 判断按照那种方式进行缩放 |
|||
if (originalWidth > windowWidth) { |
|||
// 在图片width大于手机屏幕width时候 |
|||
results.imageWidth = windowWidth; |
|||
results.imageheight = windowWidth * (originalHeight / originalWidth); |
|||
} else { |
|||
// 否则展示原来的数据 |
|||
results.imageWidth = originalWidth; |
|||
results.imageheight = originalHeight; |
|||
} |
|||
return results; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style> |
|||
.nodeclassStr{ |
|||
max-width: 100%; |
|||
float:left; |
|||
width: 750rpx; |
|||
padding: 0 0px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,53 @@ |
|||
<template> |
|||
<rich-text :nodes="nodes" :class="node.classStr" :style="'user-select:' + parseSelect"></rich-text> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'wxParseTable', |
|||
props: { |
|||
node: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
}, |
|||
}, |
|||
}, |
|||
inject: ['parseSelect'], |
|||
data() { |
|||
return { |
|||
nodes:[] |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.nodes=this.loadNode([this.node]); |
|||
}, |
|||
methods: { |
|||
loadNode(node) { |
|||
let obj = []; |
|||
for (let children of node) { |
|||
if (children.node=='element') { |
|||
let t = { |
|||
name:children.tag, |
|||
attrs: { |
|||
class: children.classStr, |
|||
// style: children.styleStr, |
|||
}, |
|||
children: children.nodes?this.loadNode(children.nodes):[] |
|||
} |
|||
|
|||
obj.push(t) |
|||
} else if(children.node=='text'){ |
|||
obj.push({ |
|||
type: 'text', |
|||
text: children.text |
|||
}) |
|||
} |
|||
} |
|||
return obj |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style> |
|||
@import url("../parse.css"); |
|||
</style> |
|||
@ -0,0 +1,98 @@ |
|||
<template> |
|||
<!--判断是否是标签节点--> |
|||
<block v-if="node.node == 'element'"> |
|||
<!--button类型--> |
|||
<button v-if="node.tag == 'button'" type="default" size="mini" :class="node.classStr" :style="node.styleStr"> |
|||
<wx-parse-template :node="node" /> |
|||
</button> |
|||
|
|||
<!--a类型--> |
|||
<view v-else-if="node.tag == 'a'" @click="wxParseATap(node.attr,$event)" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
|
|||
<!--li类型--> |
|||
<view v-else-if="node.tag == 'li'" :class="node.classStr" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
|
|||
<!--table类型--> |
|||
<wx-parse-table v-else-if="node.tag == 'table'" :class="node.classStr" :style="node.styleStr" :node="node" /> |
|||
|
|||
<!--br类型--> |
|||
<!-- #ifndef H5 --> |
|||
<text v-else-if="node.tag == 'br'">\n</text> |
|||
<!-- #endif --> |
|||
<!-- #ifdef H5 --> |
|||
<br v-else-if="node.tag == 'br'"> |
|||
<!-- #endif --> |
|||
|
|||
<!--video类型--> |
|||
<wx-parse-video :node="node" v-else-if="node.tag == 'video'"/> |
|||
|
|||
<!--audio类型--> |
|||
<wx-parse-audio :node="node" v-else-if="node.tag == 'audio'"/> |
|||
|
|||
<!--img类型--> |
|||
<wx-parse-img :node="node" v-else-if="node.tag == 'img'" :style="node.styleStr"/> |
|||
|
|||
<!--其他标签--> |
|||
<view v-else :class="node.classStr" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node"/> |
|||
</block> |
|||
</view> |
|||
</block> |
|||
|
|||
<!--判断是否是文本节点--> |
|||
<block v-else-if="node.node == 'text'">{{node.text}}</block> |
|||
</template> |
|||
|
|||
<script> |
|||
// #ifdef APP-PLUS | H5 |
|||
import wxParseTemplate from './wxParseTemplate0'; |
|||
// #endif |
|||
// #ifdef MP |
|||
import wxParseTemplate from './wxParseTemplate1'; |
|||
// #endif |
|||
import wxParseImg from './wxParseImg'; |
|||
import wxParseVideo from './wxParseVideo'; |
|||
import wxParseAudio from './wxParseAudio'; |
|||
import wxParseTable from './wxParseTable'; |
|||
|
|||
export default { |
|||
// #ifdef APP-PLUS | H5 |
|||
name: 'wxParseTemplate', |
|||
// #endif |
|||
// #ifdef MP |
|||
name: 'wxParseTemplate0', |
|||
// #endif |
|||
props: { |
|||
node: {}, |
|||
}, |
|||
components: { |
|||
wxParseTemplate, |
|||
wxParseImg, |
|||
wxParseVideo, |
|||
wxParseAudio, |
|||
wxParseTable |
|||
}, |
|||
methods: { |
|||
wxParseATap(attr,e) { |
|||
const { |
|||
href |
|||
} = e.currentTarget.dataset;// TODO currentTarget才有dataset |
|||
if (!href) return; |
|||
let parent = this.$parent; |
|||
while(!parent.preview || typeof parent.preview !== 'function') {// TODO 遍历获取父节点执行方法 |
|||
parent = parent.$parent; |
|||
} |
|||
parent.navigate(href, e, attr); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,88 @@ |
|||
<template> |
|||
<!--判断是否是标签节点--> |
|||
<block v-if="node.node == 'element'"> |
|||
<!--button类型--> |
|||
<button v-if="node.tag == 'button'" type="default" size="mini" :class="node.classStr" :style="node.styleStr"> |
|||
<wx-parse-template :node="node" /> |
|||
</button> |
|||
|
|||
<!--a类型--> |
|||
<view v-else-if="node.tag == 'a'" @click="wxParseATap(node.attr,$event)" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
|
|||
<!--li类型--> |
|||
<view v-else-if="node.tag == 'li'" :class="node.classStr" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
|
|||
<!--table类型--> |
|||
<wx-parse-table v-else-if="node.tag == 'table'" :class="node.classStr" :style="node.styleStr" :node="node" /> |
|||
|
|||
<!--br类型--> |
|||
<!-- #ifndef H5 --> |
|||
<text v-else-if="node.tag == 'br'">\n</text> |
|||
<!-- #endif --> |
|||
<!-- #ifdef H5 --> |
|||
<br v-else-if="node.tag == 'br'"> |
|||
<!-- #endif --> |
|||
|
|||
<!--video类型--> |
|||
<wx-parse-video :node="node" v-else-if="node.tag == 'video'"/> |
|||
|
|||
<!--audio类型--> |
|||
<wx-parse-audio :node="node" v-else-if="node.tag == 'audio'"/> |
|||
|
|||
<!--img类型--> |
|||
<wx-parse-img :node="node" v-else-if="node.tag == 'img'" :style="node.styleStr"/> |
|||
|
|||
<!--其他标签--> |
|||
<view v-else :class="node.classStr" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
</block> |
|||
|
|||
<!--判断是否是文本节点--> |
|||
<block v-else-if="node.node == 'text'">{{node.text}}</block> |
|||
</template> |
|||
|
|||
<script> |
|||
import wxParseTemplate from './wxParseTemplate2'; |
|||
import wxParseImg from './wxParseImg'; |
|||
import wxParseVideo from './wxParseVideo'; |
|||
import wxParseAudio from './wxParseAudio'; |
|||
import wxParseTable from './wxParseTable'; |
|||
|
|||
export default { |
|||
name: 'wxParseTemplate1', |
|||
props: { |
|||
node: {}, |
|||
}, |
|||
components: { |
|||
wxParseTemplate, |
|||
wxParseImg, |
|||
wxParseVideo, |
|||
wxParseAudio, |
|||
wxParseTable |
|||
}, |
|||
methods: { |
|||
wxParseATap(attr,e) { |
|||
const { |
|||
href |
|||
} = e.currentTarget.dataset; |
|||
if (!href) return; |
|||
let parent = this.$parent; |
|||
while(!parent.preview || typeof parent.preview !== 'function') { |
|||
parent = parent.$parent; |
|||
} |
|||
parent.navigate(href, e, attr); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,88 @@ |
|||
<template> |
|||
<!--判断是否是标签节点--> |
|||
<block v-if="node.node == 'element'"> |
|||
<!--button类型--> |
|||
<button v-if="node.tag == 'button'" type="default" size="mini" :class="node.classStr" :style="node.styleStr"> |
|||
<wx-parse-template :node="node" /> |
|||
</button> |
|||
|
|||
<!--a类型--> |
|||
<view v-else-if="node.tag == 'a'" @click="wxParseATap(node.attr,$event)" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
|
|||
<!--li类型--> |
|||
<view v-else-if="node.tag == 'li'" :class="node.classStr" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
|
|||
<!--table类型--> |
|||
<wx-parse-table v-else-if="node.tag == 'table'" :class="node.classStr" :style="node.styleStr" :node="node" /> |
|||
|
|||
<!--br类型--> |
|||
<!-- #ifndef H5 --> |
|||
<text v-else-if="node.tag == 'br'">\n</text> |
|||
<!-- #endif --> |
|||
<!-- #ifdef H5 --> |
|||
<br v-else-if="node.tag == 'br'"> |
|||
<!-- #endif --> |
|||
|
|||
<!--video类型--> |
|||
<wx-parse-video :node="node" v-else-if="node.tag == 'video'"/> |
|||
|
|||
<!--audio类型--> |
|||
<wx-parse-audio :node="node" v-else-if="node.tag == 'audio'"/> |
|||
|
|||
<!--img类型--> |
|||
<wx-parse-img :node="node" v-else-if="node.tag == 'img'" :style="node.styleStr"/> |
|||
|
|||
<!--其他标签--> |
|||
<view v-else :class="node.classStr" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
</block> |
|||
|
|||
<!--判断是否是文本节点--> |
|||
<block v-else-if="node.node == 'text' ">{{node.text}}</block> |
|||
</template> |
|||
|
|||
<script> |
|||
import wxParseTemplate from './wxParseTemplate11'; |
|||
import wxParseImg from './wxParseImg'; |
|||
import wxParseVideo from './wxParseVideo'; |
|||
import wxParseAudio from './wxParseAudio'; |
|||
import wxParseTable from './wxParseTable'; |
|||
|
|||
export default { |
|||
name: 'wxParseTemplate10', |
|||
props: { |
|||
node: {}, |
|||
}, |
|||
components: { |
|||
wxParseTemplate, |
|||
wxParseImg, |
|||
wxParseVideo, |
|||
wxParseAudio, |
|||
wxParseTable |
|||
}, |
|||
methods: { |
|||
wxParseATap(attr,e) { |
|||
const { |
|||
href |
|||
} = e.currentTarget.dataset; |
|||
if (!href) return; |
|||
let parent = this.$parent; |
|||
while(!parent.preview || typeof parent.preview !== 'function') { |
|||
parent = parent.$parent; |
|||
} |
|||
parent.navigate(href, e, attr); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,86 @@ |
|||
<template> |
|||
<!--判断是否是标签节点--> |
|||
<block v-if="node.node == 'element'"> |
|||
<!--button类型--> |
|||
<button v-if="node.tag == 'button'" type="default" size="mini" :class="node.classStr" :style="node.styleStr"> |
|||
<rich-text :nodes="node" :class="node.classStr" :style="'user-select:' + parseSelect"></rich-text> |
|||
</button> |
|||
|
|||
<!--a类型--> |
|||
<view v-else-if="node.tag == 'a'" @click="wxParseATap(node.attr,$event)" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<rich-text :nodes="node" :class="node.classStr" :style="'user-select:' + parseSelect"></rich-text> |
|||
</block> |
|||
</view> |
|||
|
|||
<!--li类型--> |
|||
<view v-else-if="node.tag == 'li'" :class="node.classStr" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<rich-text :nodes="node" :class="node.classStr" :style="'user-select:' + parseSelect"></rich-text> |
|||
</block> |
|||
</view> |
|||
|
|||
<!--table类型--> |
|||
<wx-parse-table v-else-if="node.tag == 'table'" :class="node.classStr" :style="node.styleStr" :node="node" /> |
|||
|
|||
<!--br类型--> |
|||
<!-- #ifndef H5 --> |
|||
<text v-else-if="node.tag == 'br'">\n</text> |
|||
<!-- #endif --> |
|||
<!-- #ifdef H5 --> |
|||
<br v-else-if="node.tag == 'br'"> |
|||
<!-- #endif --> |
|||
|
|||
<!--video类型--> |
|||
<wx-parse-video :node="node" v-else-if="node.tag == 'video'"/> |
|||
|
|||
<!--audio类型--> |
|||
<wx-parse-audio :node="node" v-else-if="node.tag == 'audio'"/> |
|||
|
|||
<!--img类型--> |
|||
<wx-parse-img :node="node" v-else-if="node.tag == 'img'"/> |
|||
|
|||
<!--其他标签--> |
|||
<view v-else :class="node.classStr" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<rich-text :nodes="node" :class="node.classStr" :style="'user-select:' + parseSelect"></rich-text> |
|||
</block> |
|||
</view> |
|||
</block> |
|||
|
|||
<!--判断是否是文本节点--> |
|||
<block v-else-if="node.node == 'text' ">{{node.text}}</block> |
|||
</template> |
|||
|
|||
<script> |
|||
import wxParseImg from './wxParseImg'; |
|||
import wxParseVideo from './wxParseVideo'; |
|||
import wxParseAudio from './wxParseAudio'; |
|||
import wxParseTable from './wxParseTable'; |
|||
|
|||
export default { |
|||
name: 'wxParseTemplate11', |
|||
props: { |
|||
node: {}, |
|||
}, |
|||
components: { |
|||
wxParseImg, |
|||
wxParseVideo, |
|||
wxParseAudio, |
|||
wxParseTable |
|||
}, |
|||
methods: { |
|||
wxParseATap(attr,e) { |
|||
const { |
|||
href |
|||
} = e.currentTarget.dataset; |
|||
if (!href) return; |
|||
let parent = this.$parent; |
|||
while(!parent.preview || typeof parent.preview !== 'function') { |
|||
parent = parent.$parent; |
|||
} |
|||
parent.navigate(href, e, attr); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,88 @@ |
|||
<template> |
|||
<!--判断是否是标签节点--> |
|||
<block v-if="node.node == 'element'"> |
|||
<!--button类型--> |
|||
<button v-if="node.tag == 'button'" type="default" size="mini" :class="node.classStr" :style="node.styleStr"> |
|||
<wx-parse-template :node="node" /> |
|||
</button> |
|||
|
|||
<!--a类型--> |
|||
<view v-else-if="node.tag == 'a'" @click="wxParseATap(node.attr,$event)" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
|
|||
<!--li类型--> |
|||
<view v-else-if="node.tag == 'li'" :class="node.classStr" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
|
|||
<!--table类型--> |
|||
<wx-parse-table v-else-if="node.tag == 'table'" :class="node.classStr" :style="node.styleStr" :node="node" /> |
|||
|
|||
<!--br类型--> |
|||
<!-- #ifndef H5 --> |
|||
<text v-else-if="node.tag == 'br'">\n</text> |
|||
<!-- #endif --> |
|||
<!-- #ifdef H5 --> |
|||
<br v-else-if="node.tag == 'br'"> |
|||
<!-- #endif --> |
|||
|
|||
<!--video类型--> |
|||
<wx-parse-video :node="node" v-else-if="node.tag == 'video'"/> |
|||
|
|||
<!--audio类型--> |
|||
<wx-parse-audio :node="node" v-else-if="node.tag == 'audio'"/> |
|||
|
|||
<!--img类型--> |
|||
<wx-parse-img :node="node" v-else-if="node.tag == 'img'" :style="node.styleStr"/> |
|||
|
|||
<!--其他标签--> |
|||
<view v-else :class="node.classStr" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
</block> |
|||
|
|||
<!--判断是否是文本节点--> |
|||
<block v-else-if="node.node == 'text'">{{node.text}}</block> |
|||
</template> |
|||
|
|||
<script> |
|||
import wxParseTemplate from './wxParseTemplate3'; |
|||
import wxParseImg from './wxParseImg'; |
|||
import wxParseVideo from './wxParseVideo'; |
|||
import wxParseAudio from './wxParseAudio'; |
|||
import wxParseTable from './wxParseTable'; |
|||
|
|||
export default { |
|||
name: 'wxParseTemplate2', |
|||
props: { |
|||
node: {}, |
|||
}, |
|||
components: { |
|||
wxParseTemplate, |
|||
wxParseImg, |
|||
wxParseVideo, |
|||
wxParseAudio, |
|||
wxParseTable |
|||
}, |
|||
methods: { |
|||
wxParseATap(attr,e) { |
|||
const { |
|||
href |
|||
} = e.currentTarget.dataset; |
|||
if (!href) return; |
|||
let parent = this.$parent; |
|||
while(!parent.preview || typeof parent.preview !== 'function') { |
|||
parent = parent.$parent; |
|||
} |
|||
parent.navigate(href, e, attr); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,88 @@ |
|||
<template> |
|||
<!--判断是否是标签节点--> |
|||
<block v-if="node.node == 'element'"> |
|||
<!--button类型--> |
|||
<button v-if="node.tag == 'button'" type="default" size="mini" :class="node.classStr" :style="node.styleStr"> |
|||
<wx-parse-template :node="node" /> |
|||
</button> |
|||
|
|||
<!--a类型--> |
|||
<view v-else-if="node.tag == 'a'" @click="wxParseATap(node.attr,$event)" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
|
|||
<!--li类型--> |
|||
<view v-else-if="node.tag == 'li'" :class="node.classStr" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
|
|||
<!--table类型--> |
|||
<wx-parse-table v-else-if="node.tag == 'table'" :class="node.classStr" :style="node.styleStr" :node="node" /> |
|||
|
|||
<!--br类型--> |
|||
<!-- #ifndef H5 --> |
|||
<text v-else-if="node.tag == 'br'">\n</text> |
|||
<!-- #endif --> |
|||
<!-- #ifdef H5 --> |
|||
<br v-else-if="node.tag == 'br'"> |
|||
<!-- #endif --> |
|||
|
|||
<!--video类型--> |
|||
<wx-parse-video :node="node" v-else-if="node.tag == 'video'"/> |
|||
|
|||
<!--audio类型--> |
|||
<wx-parse-audio :node="node" v-else-if="node.tag == 'audio'"/> |
|||
|
|||
<!--img类型--> |
|||
<wx-parse-img :node="node" v-else-if="node.tag == 'img'" :style="node.styleStr"/> |
|||
|
|||
<!--其他标签--> |
|||
<view v-else :class="node.classStr" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
</block> |
|||
|
|||
<!--判断是否是文本节点--> |
|||
<block v-else-if="node.node == 'text' ">{{node.text}}</block> |
|||
</template> |
|||
|
|||
<script> |
|||
import wxParseTemplate from './wxParseTemplate4'; |
|||
import wxParseImg from './wxParseImg'; |
|||
import wxParseVideo from './wxParseVideo'; |
|||
import wxParseAudio from './wxParseAudio'; |
|||
import wxParseTable from './wxParseTable'; |
|||
|
|||
export default { |
|||
name: 'wxParseTemplate3', |
|||
props: { |
|||
node: {}, |
|||
}, |
|||
components: { |
|||
wxParseTemplate, |
|||
wxParseImg, |
|||
wxParseVideo, |
|||
wxParseAudio, |
|||
wxParseTable |
|||
}, |
|||
methods: { |
|||
wxParseATap(attr,e) { |
|||
const { |
|||
href |
|||
} = e.currentTarget.dataset; |
|||
if (!href) return; |
|||
let parent = this.$parent; |
|||
while(!parent.preview || typeof parent.preview !== 'function') { |
|||
parent = parent.$parent; |
|||
} |
|||
parent.navigate(href, e, attr); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,88 @@ |
|||
<template> |
|||
<!--判断是否是标签节点--> |
|||
<block v-if="node.node == 'element'"> |
|||
<!--button类型--> |
|||
<button v-if="node.tag == 'button'" type="default" size="mini" :class="node.classStr" :style="node.styleStr"> |
|||
<wx-parse-template :node="node" /> |
|||
</button> |
|||
|
|||
<!--a类型--> |
|||
<view v-else-if="node.tag == 'a'" @click="wxParseATap(node.attr,$event)" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
|
|||
<!--li类型--> |
|||
<view v-else-if="node.tag == 'li'" :class="node.classStr" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
|
|||
<!--table类型--> |
|||
<wx-parse-table v-else-if="node.tag == 'table'" :class="node.classStr" :style="node.styleStr" :node="node" /> |
|||
|
|||
<!--br类型--> |
|||
<!-- #ifndef H5 --> |
|||
<text v-else-if="node.tag == 'br'">\n</text> |
|||
<!-- #endif --> |
|||
<!-- #ifdef H5 --> |
|||
<br v-else-if="node.tag == 'br'"> |
|||
<!-- #endif --> |
|||
|
|||
<!--video类型--> |
|||
<wx-parse-video :node="node" v-else-if="node.tag == 'video'"/> |
|||
|
|||
<!--audio类型--> |
|||
<wx-parse-audio :node="node" v-else-if="node.tag == 'audio'"/> |
|||
|
|||
<!--img类型--> |
|||
<wx-parse-img :node="node" v-else-if="node.tag == 'img'" :style="node.styleStr"/> |
|||
|
|||
<!--其他标签--> |
|||
<view v-else :class="node.classStr" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
</block> |
|||
|
|||
<!--判断是否是文本节点--> |
|||
<block v-else-if="node.node == 'text' ">{{node.text}}</block> |
|||
</template> |
|||
|
|||
<script> |
|||
import wxParseTemplate from './wxParseTemplate5'; |
|||
import wxParseImg from './wxParseImg'; |
|||
import wxParseVideo from './wxParseVideo'; |
|||
import wxParseAudio from './wxParseAudio'; |
|||
import wxParseTable from './wxParseTable'; |
|||
|
|||
export default { |
|||
name: 'wxParseTemplate4', |
|||
props: { |
|||
node: {}, |
|||
}, |
|||
components: { |
|||
wxParseTemplate, |
|||
wxParseImg, |
|||
wxParseVideo, |
|||
wxParseAudio, |
|||
wxParseTable |
|||
}, |
|||
methods: { |
|||
wxParseATap(attr,e) { |
|||
const { |
|||
href |
|||
} = e.currentTarget.dataset; |
|||
if (!href) return; |
|||
let parent = this.$parent; |
|||
while(!parent.preview || typeof parent.preview !== 'function') { |
|||
parent = parent.$parent; |
|||
} |
|||
parent.navigate(href, e, attr); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,88 @@ |
|||
<template> |
|||
<!--判断是否是标签节点--> |
|||
<block v-if="node.node == 'element'"> |
|||
<!--button类型--> |
|||
<button v-if="node.tag == 'button'" type="default" size="mini" :class="node.classStr" :style="node.styleStr"> |
|||
<wx-parse-template :node="node" /> |
|||
</button> |
|||
|
|||
<!--a类型--> |
|||
<view v-else-if="node.tag == 'a'" @click="wxParseATap(node.attr,$event)" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
|
|||
<!--li类型--> |
|||
<view v-else-if="node.tag == 'li'" :class="node.classStr" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
|
|||
<!--table类型--> |
|||
<wx-parse-table v-else-if="node.tag == 'table'" :class="node.classStr" :style="node.styleStr" :node="node" /> |
|||
|
|||
<!--br类型--> |
|||
<!-- #ifndef H5 --> |
|||
<text v-else-if="node.tag == 'br'">\n</text> |
|||
<!-- #endif --> |
|||
<!-- #ifdef H5 --> |
|||
<br v-else-if="node.tag == 'br'"> |
|||
<!-- #endif --> |
|||
|
|||
<!--video类型--> |
|||
<wx-parse-video :node="node" v-else-if="node.tag == 'video'"/> |
|||
|
|||
<!--audio类型--> |
|||
<wx-parse-audio :node="node" v-else-if="node.tag == 'audio'"/> |
|||
|
|||
<!--img类型--> |
|||
<wx-parse-img :node="node" v-else-if="node.tag == 'img'" :style="node.styleStr"/> |
|||
|
|||
<!--其他标签--> |
|||
<view v-else :class="node.classStr" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
</block> |
|||
|
|||
<!--判断是否是文本节点--> |
|||
<block v-else-if="node.node == 'text' ">{{node.text}}</block> |
|||
</template> |
|||
|
|||
<script> |
|||
import wxParseTemplate from './wxParseTemplate6'; |
|||
import wxParseImg from './wxParseImg'; |
|||
import wxParseVideo from './wxParseVideo'; |
|||
import wxParseAudio from './wxParseAudio'; |
|||
import wxParseTable from './wxParseTable'; |
|||
|
|||
export default { |
|||
name: 'wxParseTemplate5', |
|||
props: { |
|||
node: {}, |
|||
}, |
|||
components: { |
|||
wxParseTemplate, |
|||
wxParseImg, |
|||
wxParseVideo, |
|||
wxParseAudio, |
|||
wxParseTable |
|||
}, |
|||
methods: { |
|||
wxParseATap(attr,e) { |
|||
const { |
|||
href |
|||
} = e.currentTarget.dataset; |
|||
if (!href) return; |
|||
let parent = this.$parent; |
|||
while(!parent.preview || typeof parent.preview !== 'function') { |
|||
parent = parent.$parent; |
|||
} |
|||
parent.navigate(href, e, attr); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,88 @@ |
|||
<template> |
|||
<!--判断是否是标签节点--> |
|||
<block v-if="node.node == 'element'"> |
|||
<!--button类型--> |
|||
<button v-if="node.tag == 'button'" type="default" size="mini" :class="node.classStr" :style="node.styleStr"> |
|||
<wx-parse-template :node="node" /> |
|||
</button> |
|||
|
|||
<!--a类型--> |
|||
<view v-else-if="node.tag == 'a'" @click="wxParseATap(node.attr,$event)" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
|
|||
<!--li类型--> |
|||
<view v-else-if="node.tag == 'li'" :class="node.classStr" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
|
|||
<!--table类型--> |
|||
<wx-parse-table v-else-if="node.tag == 'table'" :class="node.classStr" :style="node.styleStr" :node="node" /> |
|||
|
|||
<!--br类型--> |
|||
<!-- #ifndef H5 --> |
|||
<text v-else-if="node.tag == 'br'">\n</text> |
|||
<!-- #endif --> |
|||
<!-- #ifdef H5 --> |
|||
<br v-else-if="node.tag == 'br'"> |
|||
<!-- #endif --> |
|||
|
|||
<!--video类型--> |
|||
<wx-parse-video :node="node" v-else-if="node.tag == 'video'"/> |
|||
|
|||
<!--audio类型--> |
|||
<wx-parse-audio :node="node" v-else-if="node.tag == 'audio'"/> |
|||
|
|||
<!--img类型--> |
|||
<wx-parse-img :node="node" v-else-if="node.tag == 'img'" :style="node.styleStr"/> |
|||
|
|||
<!--其他标签--> |
|||
<view v-else :class="node.classStr" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
</block> |
|||
|
|||
<!--判断是否是文本节点--> |
|||
<block v-else-if="node.node == 'text' ">{{node.text}}</block> |
|||
</template> |
|||
|
|||
<script> |
|||
import wxParseTemplate from './wxParseTemplate7'; |
|||
import wxParseImg from './wxParseImg'; |
|||
import wxParseVideo from './wxParseVideo'; |
|||
import wxParseAudio from './wxParseAudio'; |
|||
import wxParseTable from './wxParseTable'; |
|||
|
|||
export default { |
|||
name: 'wxParseTemplate6', |
|||
props: { |
|||
node: {}, |
|||
}, |
|||
components: { |
|||
wxParseTemplate, |
|||
wxParseImg, |
|||
wxParseVideo, |
|||
wxParseAudio, |
|||
wxParseTable |
|||
}, |
|||
methods: { |
|||
wxParseATap(attr,e) { |
|||
const { |
|||
href |
|||
} = e.currentTarget.dataset; |
|||
if (!href) return; |
|||
let parent = this.$parent; |
|||
while(!parent.preview || typeof parent.preview !== 'function') { |
|||
parent = parent.$parent; |
|||
} |
|||
parent.navigate(href, e, attr); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,88 @@ |
|||
<template> |
|||
<!--判断是否是标签节点--> |
|||
<block v-if="node.node == 'element'"> |
|||
<!--button类型--> |
|||
<button v-if="node.tag == 'button'" type="default" size="mini" :class="node.classStr" :style="node.styleStr"> |
|||
<wx-parse-template :node="node" /> |
|||
</button> |
|||
|
|||
<!--a类型--> |
|||
<view v-else-if="node.tag == 'a'" @click="wxParseATap(node.attr,$event)" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
|
|||
<!--li类型--> |
|||
<view v-else-if="node.tag == 'li'" :class="node.classStr" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
|
|||
<!--table类型--> |
|||
<wx-parse-table v-else-if="node.tag == 'table'" :class="node.classStr" :style="node.styleStr" :node="node" /> |
|||
|
|||
<!--br类型--> |
|||
<!-- #ifndef H5 --> |
|||
<text v-else-if="node.tag == 'br'">\n</text> |
|||
<!-- #endif --> |
|||
<!-- #ifdef H5 --> |
|||
<br v-else-if="node.tag == 'br'"> |
|||
<!-- #endif --> |
|||
|
|||
<!--video类型--> |
|||
<wx-parse-video :node="node" v-else-if="node.tag == 'video'"/> |
|||
|
|||
<!--audio类型--> |
|||
<wx-parse-audio :node="node" v-else-if="node.tag == 'audio'"/> |
|||
|
|||
<!--img类型--> |
|||
<wx-parse-img :node="node" v-else-if="node.tag == 'img'" :style="node.styleStr"/> |
|||
|
|||
<!--其他标签--> |
|||
<view v-else :class="node.classStr" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
</block> |
|||
|
|||
<!--判断是否是文本节点--> |
|||
<block v-else-if="node.node == 'text' ">{{node.text}}</block> |
|||
</template> |
|||
|
|||
<script> |
|||
import wxParseTemplate from './wxParseTemplate8'; |
|||
import wxParseImg from './wxParseImg'; |
|||
import wxParseVideo from './wxParseVideo'; |
|||
import wxParseAudio from './wxParseAudio'; |
|||
import wxParseTable from './wxParseTable'; |
|||
|
|||
export default { |
|||
name: 'wxParseTemplate7', |
|||
props: { |
|||
node: {}, |
|||
}, |
|||
components: { |
|||
wxParseTemplate, |
|||
wxParseImg, |
|||
wxParseVideo, |
|||
wxParseAudio, |
|||
wxParseTable |
|||
}, |
|||
methods: { |
|||
wxParseATap(attr,e) { |
|||
const { |
|||
href |
|||
} = e.currentTarget.dataset; |
|||
if (!href) return; |
|||
let parent = this.$parent; |
|||
while(!parent.preview || typeof parent.preview !== 'function') { |
|||
parent = parent.$parent; |
|||
} |
|||
parent.navigate(href, e, attr); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,88 @@ |
|||
<template> |
|||
<!--判断是否是标签节点--> |
|||
<block v-if="node.node == 'element'"> |
|||
<!--button类型--> |
|||
<button v-if="node.tag == 'button'" type="default" size="mini" :class="node.classStr" :style="node.styleStr"> |
|||
<wx-parse-template :node="node" /> |
|||
</button> |
|||
|
|||
<!--a类型--> |
|||
<view v-else-if="node.tag == 'a'" @click="wxParseATap(node.attr,$event)" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
|
|||
<!--li类型--> |
|||
<view v-else-if="node.tag == 'li'" :class="node.classStr" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
|
|||
<!--table类型--> |
|||
<wx-parse-table v-else-if="node.tag == 'table'" :class="node.classStr" :style="node.styleStr" :node="node" /> |
|||
|
|||
<!--br类型--> |
|||
<!-- #ifndef H5 --> |
|||
<text v-else-if="node.tag == 'br'">\n</text> |
|||
<!-- #endif --> |
|||
<!-- #ifdef H5 --> |
|||
<br v-else-if="node.tag == 'br'"> |
|||
<!-- #endif --> |
|||
|
|||
<!--video类型--> |
|||
<wx-parse-video :node="node" v-else-if="node.tag == 'video'"/> |
|||
|
|||
<!--audio类型--> |
|||
<wx-parse-audio :node="node" v-else-if="node.tag == 'audio'"/> |
|||
|
|||
<!--img类型--> |
|||
<wx-parse-img :node="node" v-else-if="node.tag == 'img'" :style="node.styleStr"/> |
|||
|
|||
<!--其他标签--> |
|||
<view v-else :class="node.classStr" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
</block> |
|||
|
|||
<!--判断是否是文本节点--> |
|||
<block v-else-if="node.node == 'text' ">{{node.text}}</block> |
|||
</template> |
|||
|
|||
<script> |
|||
import wxParseTemplate from './wxParseTemplate9'; |
|||
import wxParseImg from './wxParseImg'; |
|||
import wxParseVideo from './wxParseVideo'; |
|||
import wxParseAudio from './wxParseAudio'; |
|||
import wxParseTable from './wxParseTable'; |
|||
|
|||
export default { |
|||
name: 'wxParseTemplate8', |
|||
props: { |
|||
node: {}, |
|||
}, |
|||
components: { |
|||
wxParseTemplate, |
|||
wxParseImg, |
|||
wxParseVideo, |
|||
wxParseAudio, |
|||
wxParseTable |
|||
}, |
|||
methods: { |
|||
wxParseATap(attr,e) { |
|||
const { |
|||
href |
|||
} = e.currentTarget.dataset; |
|||
if (!href) return; |
|||
let parent = this.$parent; |
|||
while(!parent.preview || typeof parent.preview !== 'function') { |
|||
parent = parent.$parent; |
|||
} |
|||
parent.navigate(href, e, attr); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,88 @@ |
|||
<template> |
|||
<!--判断是否是标签节点--> |
|||
<block v-if="node.node == 'element'"> |
|||
<!--button类型--> |
|||
<button v-if="node.tag == 'button'" type="default" size="mini" :class="node.classStr" :style="node.styleStr"> |
|||
<wx-parse-template :node="node" /> |
|||
</button> |
|||
|
|||
<!--a类型--> |
|||
<view v-else-if="node.tag == 'a'" @click="wxParseATap(node.attr,$event)" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
|
|||
<!--li类型--> |
|||
<view v-else-if="node.tag == 'li'" :class="node.classStr" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
|
|||
<!--table类型--> |
|||
<wx-parse-table v-else-if="node.tag == 'table'" :class="node.classStr" :style="node.styleStr" :node="node" /> |
|||
|
|||
<!--br类型--> |
|||
<!-- #ifndef H5 --> |
|||
<text v-else-if="node.tag == 'br'">\n</text> |
|||
<!-- #endif --> |
|||
<!-- #ifdef H5 --> |
|||
<br v-else-if="node.tag == 'br'"> |
|||
<!-- #endif --> |
|||
|
|||
<!--video类型--> |
|||
<wx-parse-video :node="node" v-else-if="node.tag == 'video'"/> |
|||
|
|||
<!--audio类型--> |
|||
<wx-parse-audio :node="node" v-else-if="node.tag == 'audio'"/> |
|||
|
|||
<!--img类型--> |
|||
<wx-parse-img :node="node" v-else-if="node.tag == 'img'" :style="node.styleStr"/> |
|||
|
|||
<!--其他标签--> |
|||
<view v-else :class="node.classStr" :style="node.styleStr"> |
|||
<block v-for="(node, index) of node.nodes" :key="index"> |
|||
<wx-parse-template :node="node" /> |
|||
</block> |
|||
</view> |
|||
</block> |
|||
|
|||
<!--判断是否是文本节点--> |
|||
<block v-else-if="node.node == 'text' ">{{node.text}}</block> |
|||
</template> |
|||
|
|||
<script> |
|||
import wxParseTemplate from './wxParseTemplate10'; |
|||
import wxParseImg from './wxParseImg'; |
|||
import wxParseVideo from './wxParseVideo'; |
|||
import wxParseAudio from './wxParseAudio'; |
|||
import wxParseTable from './wxParseTable'; |
|||
|
|||
export default { |
|||
name: 'wxParseTemplate9', |
|||
props: { |
|||
node: {}, |
|||
}, |
|||
components: { |
|||
wxParseTemplate, |
|||
wxParseImg, |
|||
wxParseVideo, |
|||
wxParseAudio, |
|||
wxParseTable |
|||
}, |
|||
methods: { |
|||
wxParseATap(attr,e) { |
|||
const { |
|||
href |
|||
} = e.currentTarget.dataset; |
|||
if (!href) return; |
|||
let parent = this.$parent; |
|||
while(!parent.preview || typeof parent.preview !== 'function') { |
|||
parent = parent.$parent; |
|||
} |
|||
parent.navigate(href, e, attr); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,15 @@ |
|||
<template> |
|||
<!--增加video标签支持，并循环添加--> |
|||
<view :class="node.classStr" :style="node.styleStr"> |
|||
<video :class="node.classStr" :style="node.styleStr" class="video-video" :src="node.attr.src"></video> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'wxParseVideo', |
|||
props: { |
|||
node: {}, |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,262 @@ |
|||
/** |
|||
* html2Json 改造来自: https://github.com/Jxck/html2json
|
|||
* |
|||
* |
|||
* author: Di (微信小程序开发工程师) |
|||
* organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
|
|||
* 垂直微信小程序开发交流社区 |
|||
* |
|||
* github地址: https://github.com/icindy/wxParse
|
|||
* |
|||
* for: 微信小程序富文本解析 |
|||
* detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
|
|||
*/ |
|||
|
|||
import wxDiscode from './wxDiscode'; |
|||
import HTMLParser from './htmlparser'; |
|||
|
|||
function makeMap(str) { |
|||
const obj = {}; |
|||
const items = str.split(','); |
|||
for (let i = 0; i < items.length; i += 1) obj[items[i]] = true; |
|||
return obj; |
|||
} |
|||
|
|||
// Block Elements - HTML 5
|
|||
const block = makeMap('br,code,address,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video'); |
|||
|
|||
// Inline Elements - HTML 5
|
|||
const inline = makeMap('a,abbr,acronym,applet,b,basefont,bdo,big,button,cite,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var'); |
|||
|
|||
// Elements that you can, intentionally, leave open
|
|||
// (and which close themselves)
|
|||
const closeSelf = makeMap('colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr'); |
|||
|
|||
function removeDOCTYPE(html) { |
|||
const isDocument = /<body.*>([^]*)<\/body>/.test(html); |
|||
return isDocument ? RegExp.$1 : html; |
|||
} |
|||
|
|||
function trimHtml(html) { |
|||
return html |
|||
.replace(/<!--.*?-->/gi, '') |
|||
.replace(/\/\*.*?\*\//gi, '') |
|||
.replace(/[ ]+</gi, '<') |
|||
.replace(/<script[^]*<\/script>/gi, '') |
|||
.replace(/<style[^]*<\/style>/gi, ''); |
|||
} |
|||
|
|||
function getScreenInfo() { |
|||
const screen = {}; |
|||
wx.getSystemInfo({ |
|||
success: (res) => { |
|||
screen.width = res.windowWidth; |
|||
screen.height = res.windowHeight; |
|||
}, |
|||
}); |
|||
return screen; |
|||
} |
|||
|
|||
function html2json(html, customHandler, imageProp, host) { |
|||
// 处理字符串
|
|||
html = removeDOCTYPE(html); |
|||
html = trimHtml(html); |
|||
html = wxDiscode.strDiscode(html); |
|||
// 生成node节点
|
|||
const bufArray = []; |
|||
const results = { |
|||
nodes: [], |
|||
imageUrls: [], |
|||
}; |
|||
|
|||
const screen = getScreenInfo(); |
|||
function Node(tag) { |
|||
this.node = 'element'; |
|||
this.tag = tag; |
|||
|
|||
this.$screen = screen; |
|||
} |
|||
|
|||
HTMLParser(html, { |
|||
start(tag, attrs, unary) { |
|||
// node for this element
|
|||
const node = new Node(tag); |
|||
|
|||
if (bufArray.length !== 0) { |
|||
const parent = bufArray[0]; |
|||
if (parent.nodes === undefined) { |
|||
parent.nodes = []; |
|||
} |
|||
} |
|||
|
|||
if (block[tag]) { |
|||
node.tagType = 'block'; |
|||
} else if (inline[tag]) { |
|||
node.tagType = 'inline'; |
|||
} else if (closeSelf[tag]) { |
|||
node.tagType = 'closeSelf'; |
|||
} |
|||
|
|||
node.attr = attrs.reduce((pre, attr) => { |
|||
const { name } = attr; |
|||
let { value } = attr; |
|||
if (name === 'class') { |
|||
node.classStr = value; |
|||
} |
|||
// has multi attibutes
|
|||
// make it array of attribute
|
|||
if (name === 'style') { |
|||
node.styleStr = value; |
|||
} |
|||
if (value.match(/ /)) { |
|||
value = value.split(' '); |
|||
} |
|||
|
|||
// if attr already exists
|
|||
// merge it
|
|||
if (pre[name]) { |
|||
if (Array.isArray(pre[name])) { |
|||
// already array, push to last
|
|||
pre[name].push(value); |
|||
} else { |
|||
// single value, make it array
|
|||
pre[name] = [pre[name], value]; |
|||
} |
|||
} else { |
|||
// not exist, put it
|
|||
pre[name] = value; |
|||
} |
|||
|
|||
return pre; |
|||
}, {}); |
|||
|
|||
// 优化样式相关属性
|
|||
if (node.classStr) { |
|||
node.classStr += ` ${node.tag}`; |
|||
} else { |
|||
node.classStr = node.tag; |
|||
} |
|||
if (node.tagType === 'inline') { |
|||
node.classStr += ' inline'; |
|||
} |
|||
|
|||
// 对img添加额外数据
|
|||
if (node.tag === 'img') { |
|||
let imgUrl = node.attr.src; |
|||
imgUrl = wxDiscode.urlToHttpUrl(imgUrl, imageProp.domain); |
|||
Object.assign(node.attr, imageProp, { |
|||
src: imgUrl || '', |
|||
}); |
|||
if (imgUrl) { |
|||
results.imageUrls.push(imgUrl); |
|||
} |
|||
} |
|||
|
|||
// 处理a标签属性
|
|||
if (node.tag === 'a') { |
|||
node.attr.href = node.attr.href || ''; |
|||
} |
|||
|
|||
// 处理font标签样式属性
|
|||
if (node.tag === 'font') { |
|||
const fontSize = [ |
|||
'x-small', |
|||
'small', |
|||
'medium', |
|||
'large', |
|||
'x-large', |
|||
'xx-large', |
|||
'-webkit-xxx-large', |
|||
]; |
|||
const styleAttrs = { |
|||
color: 'color', |
|||
face: 'font-family', |
|||
size: 'font-size', |
|||
}; |
|||
if (!node.styleStr) node.styleStr = ''; |
|||
Object.keys(styleAttrs).forEach((key) => { |
|||
if (node.attr[key]) { |
|||
const value = key === 'size' ? fontSize[node.attr[key] - 1] : node.attr[key]; |
|||
node.styleStr += `${styleAttrs[key]}: ${value};`; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
// 临时记录source资源
|
|||
if (node.tag === 'source') { |
|||
results.source = node.attr.src; |
|||
} |
|||
|
|||
if (customHandler.start) { |
|||
customHandler.start(node, results); |
|||
} |
|||
|
|||
if (unary) { |
|||
// if this tag doesn't have end tag
|
|||
// like <img src="hoge.png"/>
|
|||
// add to parents
|
|||
const parent = bufArray[0] || results; |
|||
if (parent.nodes === undefined) { |
|||
parent.nodes = []; |
|||
} |
|||
parent.nodes.push(node); |
|||
} else { |
|||
bufArray.unshift(node); |
|||
} |
|||
}, |
|||
end(tag) { |
|||
// merge into parent tag
|
|||
const node = bufArray.shift(); |
|||
if (node.tag !== tag) { |
|||
console.error('invalid state: mismatch end tag'); |
|||
} |
|||
|
|||
// 当有缓存source资源时于于video补上src资源
|
|||
if (node.tag === 'video' && results.source) { |
|||
node.attr.src = results.source; |
|||
delete results.source; |
|||
} |
|||
|
|||
if (customHandler.end) { |
|||
customHandler.end(node, results); |
|||
} |
|||
|
|||
if (bufArray.length === 0) { |
|||
results.nodes.push(node); |
|||
} else { |
|||
const parent = bufArray[0]; |
|||
if (!parent.nodes) { |
|||
parent.nodes = []; |
|||
} |
|||
parent.nodes.push(node); |
|||
} |
|||
}, |
|||
chars(text) { |
|||
// if (!text.trim()){
|
|||
// return;
|
|||
// }
|
|||
const node = { |
|||
node: 'text', |
|||
text, |
|||
}; |
|||
|
|||
if (customHandler.chars) { |
|||
customHandler.chars(node, results); |
|||
} |
|||
|
|||
if (bufArray.length === 0) { |
|||
results.nodes.push(node); |
|||
} else { |
|||
const parent = bufArray[0]; |
|||
if (parent.nodes === undefined) { |
|||
parent.nodes = []; |
|||
} |
|||
parent.nodes.push(node); |
|||
} |
|||
}, |
|||
}); |
|||
|
|||
return results; |
|||
} |
|||
|
|||
export default html2json; |
|||
@ -0,0 +1,156 @@ |
|||
/** |
|||
* |
|||
* htmlParser改造自: https://github.com/blowsie/Pure-JavaScript-HTML5-Parser
|
|||
* |
|||
* author: Di (微信小程序开发工程师) |
|||
* organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
|
|||
* 垂直微信小程序开发交流社区 |
|||
* |
|||
* github地址: https://github.com/icindy/wxParse
|
|||
* |
|||
* for: 微信小程序富文本解析 |
|||
* detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
|
|||
*/ |
|||
// Regular Expressions for parsing tags and attributes
|
|||
|
|||
const startTag = /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z0-9_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/; |
|||
const endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/; |
|||
const attr = /([a-zA-Z0-9_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g; |
|||
|
|||
function makeMap(str) { |
|||
const obj = {}; |
|||
const items = str.split(','); |
|||
for (let i = 0; i < items.length; i += 1) obj[items[i]] = true; |
|||
return obj; |
|||
} |
|||
|
|||
// Empty Elements - HTML 5
|
|||
const empty = makeMap('area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr'); |
|||
|
|||
// Block Elements - HTML 5
|
|||
const block = makeMap('address,code,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video'); |
|||
|
|||
// Inline Elements - HTML 5
|
|||
const inline = makeMap('a,abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var'); |
|||
|
|||
// Elements that you can, intentionally, leave open
|
|||
// (and which close themselves)
|
|||
const closeSelf = makeMap('colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr'); |
|||
|
|||
// Attributes that have their values filled in disabled="disabled"
|
|||
const fillAttrs = makeMap('checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected'); |
|||
|
|||
function HTMLParser(html, handler) { |
|||
let index; |
|||
let chars; |
|||
let match; |
|||
let last = html; |
|||
const stack = []; |
|||
|
|||
stack.last = () => stack[stack.length - 1]; |
|||
|
|||
function parseEndTag(tag, tagName) { |
|||
// If no tag name is provided, clean shop
|
|||
let pos; |
|||
if (!tagName) { |
|||
pos = 0; |
|||
} else { |
|||
// Find the closest opened tag of the same type
|
|||
tagName = tagName.toLowerCase(); |
|||
for (pos = stack.length - 1; pos >= 0; pos -= 1) { |
|||
if (stack[pos] === tagName) break; |
|||
} |
|||
} |
|||
if (pos >= 0) { |
|||
// Close all the open elements, up the stack
|
|||
for (let i = stack.length - 1; i >= pos; i -= 1) { |
|||
if (handler.end) handler.end(stack[i]); |
|||
} |
|||
|
|||
// Remove the open elements from the stack
|
|||
stack.length = pos; |
|||
} |
|||
} |
|||
|
|||
function parseStartTag(tag, tagName, rest, unary) { |
|||
tagName = tagName.toLowerCase(); |
|||
|
|||
if (block[tagName]) { |
|||
while (stack.last() && inline[stack.last()]) { |
|||
parseEndTag('', stack.last()); |
|||
} |
|||
} |
|||
|
|||
if (closeSelf[tagName] && stack.last() === tagName) { |
|||
parseEndTag('', tagName); |
|||
} |
|||
|
|||
unary = empty[tagName] || !!unary; |
|||
|
|||
if (!unary) stack.push(tagName); |
|||
|
|||
if (handler.start) { |
|||
const attrs = []; |
|||
|
|||
rest.replace(attr, function genAttr(matches, name) { |
|||
const value = arguments[2] || arguments[3] || arguments[4] || (fillAttrs[name] ? name : ''); |
|||
|
|||
attrs.push({ |
|||
name, |
|||
value, |
|||
escaped: value.replace(/(^|[^\\])"/g, '$1\\"'), // "
|
|||
}); |
|||
}); |
|||
|
|||
if (handler.start) { |
|||
handler.start(tagName, attrs, unary); |
|||
} |
|||
} |
|||
} |
|||
|
|||
while (html) { |
|||
chars = true; |
|||
|
|||
if (html.indexOf('</') === 0) { |
|||
match = html.match(endTag); |
|||
|
|||
if (match) { |
|||
html = html.substring(match[0].length); |
|||
match[0].replace(endTag, parseEndTag); |
|||
chars = false; |
|||
} |
|||
|
|||
// start tag
|
|||
} else if (html.indexOf('<') === 0) { |
|||
match = html.match(startTag); |
|||
|
|||
if (match) { |
|||
html = html.substring(match[0].length); |
|||
match[0].replace(startTag, parseStartTag); |
|||
chars = false; |
|||
} |
|||
} |
|||
|
|||
if (chars) { |
|||
index = html.indexOf('<'); |
|||
let text = ''; |
|||
while (index === 0) { |
|||
text += '<'; |
|||
html = html.substring(1); |
|||
index = html.indexOf('<'); |
|||
} |
|||
text += index < 0 ? html : html.substring(0, index); |
|||
html = index < 0 ? '' : html.substring(index); |
|||
|
|||
if (handler.chars) handler.chars(text); |
|||
} |
|||
|
|||
if (html === last) throw new Error(`Parse Error: ${html}`); |
|||
last = html; |
|||
} |
|||
|
|||
// Clean up any remaining tags
|
|||
parseEndTag(); |
|||
} |
|||
|
|||
export default HTMLParser; |
|||
@ -0,0 +1,195 @@ |
|||
// HTML 支持的数学符号
|
|||
function strNumDiscode(str) { |
|||
str = str.replace(/∀/g, '∀'); |
|||
str = str.replace(/∂/g, '∂'); |
|||
str = str.replace(/∃/g, '∃'); |
|||
str = str.replace(/∅/g, '∅'); |
|||
str = str.replace(/∇/g, '∇'); |
|||
str = str.replace(/∈/g, '∈'); |
|||
str = str.replace(/∉/g, '∉'); |
|||
str = str.replace(/∋/g, '∋'); |
|||
str = str.replace(/∏/g, '∏'); |
|||
str = str.replace(/∑/g, '∑'); |
|||
str = str.replace(/−/g, '−'); |
|||
str = str.replace(/∗/g, '∗'); |
|||
str = str.replace(/√/g, '√'); |
|||
str = str.replace(/∝/g, '∝'); |
|||
str = str.replace(/∞/g, '∞'); |
|||
str = str.replace(/∠/g, '∠'); |
|||
str = str.replace(/∧/g, '∧'); |
|||
str = str.replace(/∨/g, '∨'); |
|||
str = str.replace(/∩/g, '∩'); |
|||
str = str.replace(/∪/g, '∪'); |
|||
str = str.replace(/∫/g, '∫'); |
|||
str = str.replace(/∴/g, '∴'); |
|||
str = str.replace(/∼/g, '∼'); |
|||
str = str.replace(/≅/g, '≅'); |
|||
str = str.replace(/≈/g, '≈'); |
|||
str = str.replace(/≠/g, '≠'); |
|||
str = str.replace(/≤/g, '≤'); |
|||
str = str.replace(/≥/g, '≥'); |
|||
str = str.replace(/⊂/g, '⊂'); |
|||
str = str.replace(/⊃/g, '⊃'); |
|||
str = str.replace(/⊄/g, '⊄'); |
|||
str = str.replace(/⊆/g, '⊆'); |
|||
str = str.replace(/⊇/g, '⊇'); |
|||
str = str.replace(/⊕/g, '⊕'); |
|||
str = str.replace(/⊗/g, '⊗'); |
|||
str = str.replace(/⊥/g, '⊥'); |
|||
str = str.replace(/⋅/g, '⋅'); |
|||
return str; |
|||
} |
|||
|
|||
// HTML 支持的希腊字母
|
|||
function strGreeceDiscode(str) { |
|||
str = str.replace(/Α/g, 'Α'); |
|||
str = str.replace(/Β/g, 'Β'); |
|||
str = str.replace(/Γ/g, 'Γ'); |
|||
str = str.replace(/Δ/g, 'Δ'); |
|||
str = str.replace(/Ε/g, 'Ε'); |
|||
str = str.replace(/Ζ/g, 'Ζ'); |
|||
str = str.replace(/Η/g, 'Η'); |
|||
str = str.replace(/Θ/g, 'Θ'); |
|||
str = str.replace(/Ι/g, 'Ι'); |
|||
str = str.replace(/Κ/g, 'Κ'); |
|||
str = str.replace(/Λ/g, 'Λ'); |
|||
str = str.replace(/Μ/g, 'Μ'); |
|||
str = str.replace(/Ν/g, 'Ν'); |
|||
str = str.replace(/Ξ/g, 'Ν'); |
|||
str = str.replace(/Ο/g, 'Ο'); |
|||
str = str.replace(/Π/g, 'Π'); |
|||
str = str.replace(/Ρ/g, 'Ρ'); |
|||
str = str.replace(/Σ/g, 'Σ'); |
|||
str = str.replace(/Τ/g, 'Τ'); |
|||
str = str.replace(/Υ/g, 'Υ'); |
|||
str = str.replace(/Φ/g, 'Φ'); |
|||
str = str.replace(/Χ/g, 'Χ'); |
|||
str = str.replace(/Ψ/g, 'Ψ'); |
|||
str = str.replace(/Ω/g, 'Ω'); |
|||
|
|||
str = str.replace(/α/g, 'α'); |
|||
str = str.replace(/β/g, 'β'); |
|||
str = str.replace(/γ/g, 'γ'); |
|||
str = str.replace(/δ/g, 'δ'); |
|||
str = str.replace(/ε/g, 'ε'); |
|||
str = str.replace(/ζ/g, 'ζ'); |
|||
str = str.replace(/η/g, 'η'); |
|||
str = str.replace(/θ/g, 'θ'); |
|||
str = str.replace(/ι/g, 'ι'); |
|||
str = str.replace(/κ/g, 'κ'); |
|||
str = str.replace(/λ/g, 'λ'); |
|||
str = str.replace(/μ/g, 'μ'); |
|||
str = str.replace(/ν/g, 'ν'); |
|||
str = str.replace(/ξ/g, 'ξ'); |
|||
str = str.replace(/ο/g, 'ο'); |
|||
str = str.replace(/π/g, 'π'); |
|||
str = str.replace(/ρ/g, 'ρ'); |
|||
str = str.replace(/ς/g, 'ς'); |
|||
str = str.replace(/σ/g, 'σ'); |
|||
str = str.replace(/τ/g, 'τ'); |
|||
str = str.replace(/υ/g, 'υ'); |
|||
str = str.replace(/φ/g, 'φ'); |
|||
str = str.replace(/χ/g, 'χ'); |
|||
str = str.replace(/ψ/g, 'ψ'); |
|||
str = str.replace(/ω/g, 'ω'); |
|||
str = str.replace(/ϑ/g, 'ϑ'); |
|||
str = str.replace(/ϒ/g, 'ϒ'); |
|||
str = str.replace(/ϖ/g, 'ϖ'); |
|||
str = str.replace(/·/g, '·'); |
|||
return str; |
|||
} |
|||
|
|||
function strcharacterDiscode(str) { |
|||
// 加入常用解析
|
|||
|
|||
str = str.replace(/ /g, "<span class='spaceshow'> </span>"); |
|||
str = str.replace(/ /g, ' '); |
|||
str = str.replace(/ /g, ' '); |
|||
str = str.replace(/"/g, "'"); |
|||
str = str.replace(/&/g, '&'); |
|||
str = str.replace(/</g, '<'); |
|||
str = str.replace(/>/g, '>'); |
|||
str = str.replace(/•/g, '•'); |
|||
return str; |
|||
} |
|||
|
|||
// HTML 支持的其他实体
|
|||
function strOtherDiscode(str) { |
|||
str = str.replace(/Œ/g, 'Œ'); |
|||
str = str.replace(/œ/g, 'œ'); |
|||
str = str.replace(/Š/g, 'Š'); |
|||
str = str.replace(/š/g, 'š'); |
|||
str = str.replace(/Ÿ/g, 'Ÿ'); |
|||
str = str.replace(/ƒ/g, 'ƒ'); |
|||
str = str.replace(/ˆ/g, 'ˆ'); |
|||
str = str.replace(/˜/g, '˜'); |
|||
str = str.replace(/ /g, ''); |
|||
str = str.replace(/ /g, ''); |
|||
str = str.replace(/ /g, ''); |
|||
str = str.replace(/‌/g, ''); |
|||
str = str.replace(/‍/g, ''); |
|||
str = str.replace(/‎/g, ''); |
|||
str = str.replace(/‏/g, ''); |
|||
str = str.replace(/–/g, '–'); |
|||
str = str.replace(/—/g, '—'); |
|||
str = str.replace(/‘/g, '‘'); |
|||
str = str.replace(/’/g, '’'); |
|||
str = str.replace(/‚/g, '‚'); |
|||
str = str.replace(/“/g, '“'); |
|||
str = str.replace(/”/g, '”'); |
|||
str = str.replace(/„/g, '„'); |
|||
str = str.replace(/†/g, '†'); |
|||
str = str.replace(/‡/g, '‡'); |
|||
str = str.replace(/•/g, '•'); |
|||
str = str.replace(/…/g, '…'); |
|||
str = str.replace(/‰/g, '‰'); |
|||
str = str.replace(/′/g, '′'); |
|||
str = str.replace(/″/g, '″'); |
|||
str = str.replace(/‹/g, '‹'); |
|||
str = str.replace(/›/g, '›'); |
|||
str = str.replace(/‾/g, '‾'); |
|||
str = str.replace(/€/g, '€'); |
|||
str = str.replace(/™/g, '™'); |
|||
|
|||
str = str.replace(/←/g, '←'); |
|||
str = str.replace(/↑/g, '↑'); |
|||
str = str.replace(/→/g, '→'); |
|||
str = str.replace(/↓/g, '↓'); |
|||
str = str.replace(/↔/g, '↔'); |
|||
str = str.replace(/↵/g, '↵'); |
|||
str = str.replace(/⌈/g, '⌈'); |
|||
str = str.replace(/⌉/g, '⌉'); |
|||
|
|||
str = str.replace(/⌊/g, '⌊'); |
|||
str = str.replace(/⌋/g, '⌋'); |
|||
str = str.replace(/◊/g, '◊'); |
|||
str = str.replace(/♠/g, '♠'); |
|||
str = str.replace(/♣/g, '♣'); |
|||
str = str.replace(/♥/g, '♥'); |
|||
|
|||
str = str.replace(/♦/g, '♦'); |
|||
str = str.replace(/'/g, "'"); |
|||
return str; |
|||
} |
|||
|
|||
function strDiscode(str) { |
|||
str = strNumDiscode(str); |
|||
str = strGreeceDiscode(str); |
|||
str = strcharacterDiscode(str); |
|||
str = strOtherDiscode(str); |
|||
return str; |
|||
} |
|||
|
|||
function urlToHttpUrl(url, domain) { |
|||
if (/^\/\//.test(url)) { |
|||
return `https:${url}`; |
|||
} else if (/^\//.test(url)) { |
|||
return `https://${domain}${url}`; |
|||
} |
|||
return url; |
|||
} |
|||
|
|||
export default { |
|||
strDiscode, |
|||
urlToHttpUrl, |
|||
}; |
|||
@ -0,0 +1,248 @@ |
|||
/** |
|||
* author: Di (微信小程序开发工程师) |
|||
* organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com) |
|||
* 垂直微信小程序开发交流社区 |
|||
* |
|||
* github地址: https://github.com/icindy/wxParse |
|||
* |
|||
* for: 微信小程序富文本解析 |
|||
* detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184 |
|||
*/ |
|||
/** |
|||
* 请在全局下引入该文件，@import '/static/wxParse.css'; |
|||
*/ |
|||
.wxParse { |
|||
user-select:none; |
|||
width: 100%; |
|||
font-family: Helvetica, "PingFangSC", 'Microsoft Yahei', '微软雅黑', Arial, sans-serif; |
|||
color: #333; |
|||
line-height: 1.5; |
|||
font-size: 1em; |
|||
text-align:justify;/* //左右两端对齐 */ |
|||
} |
|||
.wxParse view ,.wxParse uni-view{ |
|||
word-break: break-word; |
|||
} |
|||
.wxParse .p { |
|||
padding-bottom: 0; |
|||
clear: both; |
|||
/* letter-spacing: 0;//字间距 */ |
|||
} |
|||
.wxParse .inline { |
|||
display: inline; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
.wxParse .div { |
|||
margin: 0; |
|||
padding: 0; |
|||
display: block; |
|||
} |
|||
|
|||
.wxParse .h1{ |
|||
font-size: 2em; |
|||
line-height: 1.2em; |
|||
margin: 0.67em 0; |
|||
} |
|||
.wxParse .h2{ |
|||
font-size: 1.5em; |
|||
margin: 0.83em 0; |
|||
} |
|||
.wxParse .h3{ |
|||
font-size: 1.17em; |
|||
margin: 1em 0; |
|||
} |
|||
.wxParse .h4{ |
|||
margin: 1.33em 0; |
|||
} |
|||
.wxParse .h5{ |
|||
font-size: 0.83em; |
|||
margin: 1.67em 0; |
|||
} |
|||
.wxParse .h6{ |
|||
font-size: 0.83em; |
|||
margin: 1.67em 0; |
|||
} |
|||
|
|||
.wxParse .h1, |
|||
.wxParse .h2, |
|||
.wxParse .h3, |
|||
.wxParse .h4, |
|||
.wxParse .h5, |
|||
.wxParse .h6, |
|||
.wxParse .b, |
|||
.wxParse .strong{ |
|||
font-weight: bolder; |
|||
} |
|||
|
|||
.wxParse .i, |
|||
.wxParse .cite, |
|||
.wxParse .em, |
|||
.wxParse .var, |
|||
.wxParse .address { |
|||
font-style: italic; |
|||
} |
|||
.wxParse .spaceshow{ |
|||
white-space: pre; |
|||
} |
|||
.wxParse .pre, |
|||
.wxParse .tt, |
|||
.wxParse .code, |
|||
.wxParse .kbd, |
|||
.wxParse .samp { |
|||
font-family: monospace; |
|||
} |
|||
.wxParse .pre { |
|||
overflow: auto; |
|||
background: #f5f5f5; |
|||
padding: 16upx; |
|||
white-space: pre; |
|||
margin: 1em 0upx; |
|||
font-size: 24upx; |
|||
} |
|||
.wxParse .code { |
|||
overflow: auto; |
|||
padding: 16upx; |
|||
white-space: pre; |
|||
margin: 1em 0upx; |
|||
background: #f5f5f5; |
|||
font-size: 24upx; |
|||
} |
|||
|
|||
.wxParse .big { |
|||
font-size: 1.17em; |
|||
} |
|||
|
|||
.wxParse .small, |
|||
.wxParse .sub, |
|||
.wxParse .sup { |
|||
font-size: 0.83em; |
|||
} |
|||
|
|||
.wxParse .sub { |
|||
vertical-align: sub; |
|||
} |
|||
.wxParse .sup { |
|||
vertical-align: super; |
|||
} |
|||
|
|||
.wxParse .s, |
|||
.wxParse .strike, |
|||
.wxParse .del { |
|||
text-decoration: line-through; |
|||
} |
|||
|
|||
.wxParse .strong, |
|||
.wxParse .s { |
|||
display: inline; |
|||
} |
|||
|
|||
.wxParse .a { |
|||
color: deepskyblue; |
|||
} |
|||
|
|||
.wxParse .video { |
|||
text-align: center; |
|||
margin: 22upx 0; |
|||
} |
|||
|
|||
.wxParse .video-video { |
|||
width: 100%; |
|||
} |
|||
.wxParse .uni-image{ |
|||
max-width: 100%; |
|||
} |
|||
.wxParse .img { |
|||
display: block; |
|||
max-width: 100%; |
|||
margin-bottom: 0em;/* //与p标签底部padding同时修改 */ |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.wxParse .blockquote { |
|||
margin: 10upx 0; |
|||
padding: 22upx 0 22upx 22upx; |
|||
font-family: Courier, Calibri, "宋体"; |
|||
background: #f5f5f5; |
|||
border-left: 6upx solid #dbdbdb; |
|||
} |
|||
.wxParse .blockquote .p { |
|||
margin: 0; |
|||
} |
|||
.wxParse .ul, .wxParse .ol { |
|||
display: block; |
|||
margin: 1em 0; |
|||
padding-left: 2em; |
|||
} |
|||
.wxParse .ol { |
|||
list-style-type: disc; |
|||
} |
|||
.wxParse .ol { |
|||
list-style-type: decimal; |
|||
} |
|||
.wxParse .ol>weixin-parse-template,.wxParse .ul>weixin-parse-template { |
|||
display: list-item; |
|||
align-items: baseline; |
|||
text-align: match-parent; |
|||
} |
|||
|
|||
.wxParse .ol>.li,.wxParse .ul>.li { |
|||
display: list-item; |
|||
align-items: baseline; |
|||
text-align: match-parent; |
|||
} |
|||
.wxParse .ul .ul, .wxParse .ol .ul { |
|||
list-style-type: circle; |
|||
} |
|||
.wxParse .ol .ol .ul, .wxParse .ol .ul .ul, .wxParse .ul .ol .ul, .wxParse .ul .ul .ul { |
|||
list-style-type: square; |
|||
} |
|||
|
|||
.wxParse .u { |
|||
text-decoration: underline; |
|||
} |
|||
.wxParse .hide { |
|||
display: none; |
|||
} |
|||
.wxParse .del { |
|||
display: inline; |
|||
} |
|||
.wxParse .figure { |
|||
overflow: hidden; |
|||
} |
|||
.wxParse .table .table{ |
|||
border-collapse:collapse; |
|||
box-sizing: border-box; |
|||
/* 内边框 */ |
|||
border: 1px solid #dadada; |
|||
width: 100%; |
|||
} |
|||
.wxParse .tbody{ |
|||
border-collapse:collapse; |
|||
box-sizing: border-box; |
|||
/* 内边框 */ |
|||
border: 1px solid #dadada; |
|||
} |
|||
.wxParse .thead, .wxParse .tfoot, .wxParse .th{ |
|||
border-collapse:collapse; |
|||
box-sizing: border-box; |
|||
background: #ececec; |
|||
font-weight: 40; |
|||
} |
|||
.wxParse .tr { |
|||
border-collapse:collapse; |
|||
box-sizing: border-box; |
|||
/* border: 2px solid #F0AD4E; */ |
|||
overflow:auto; |
|||
} |
|||
.wxParse .th, |
|||
.wxParse .td{ |
|||
border-collapse:collapse; |
|||
box-sizing: border-box; |
|||
border: 2upx solid #dadada; |
|||
overflow:auto; |
|||
} |
|||
.wxParse .audio, .wxParse .uni-audio-default{ |
|||
display: block; |
|||
} |
|||
@ -0,0 +1,223 @@ |
|||
<!--** |
|||
* forked from：https://github.com/F-loat/mpvue-wxParse |
|||
* |
|||
* github地址: https://github.com/dcloudio/uParse |
|||
* |
|||
* for: uni-app框架下 富文本解析 |
|||
* |
|||
* 优化 by gaoyia@qq.com https://github.com/gaoyia/parse |
|||
*/--> |
|||
|
|||
<template> |
|||
|
|||
<!--基础元素--> |
|||
<div class="wxParse" :class="className" :style="'user-select:' + userSelect"> |
|||
<block v-for="(node, index) of nodes" :key="index" v-if="!loading"> |
|||
<wxParseTemplate :node="node" /> |
|||
</block> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import HtmlToJson from './libs/html2json'; |
|||
import wxParseTemplate from './components/wxParseTemplate0'; |
|||
|
|||
export default { |
|||
name: 'wxParse', |
|||
props: { |
|||
// user-select:none; |
|||
userSelect: { |
|||
type: String, |
|||
default: 'text' //none |text| all | element |
|||
}, |
|||
imgOptions: { |
|||
type: [Object, Boolean], |
|||
default: function() { |
|||
return { |
|||
loop: false, |
|||
indicator: 'number', |
|||
longPressActions: false |
|||
// longPressActions: { |
|||
// itemList: ['发送给朋友', '保存图片', '收藏'], |
|||
// success: function (res) { |
|||
// console.log('选中了第' + (res.tapIndex + 1) + '个按钮'); |
|||
// }, |
|||
// fail: function (res) { |
|||
// console.log(res.errMsg); |
|||
// } |
|||
// } |
|||
// } |
|||
} |
|||
} |
|||
}, |
|||
loading: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
className: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
content: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
noData: { |
|||
type: String, |
|||
default: '<div style="color: red;">数据不能为空</div>' |
|||
}, |
|||
startHandler: { |
|||
type: Function, |
|||
default () { |
|||
return node => { |
|||
node.attr.class = null; |
|||
node.attr.style = null; |
|||
}; |
|||
} |
|||
}, |
|||
endHandler: { |
|||
type: Function, |
|||
default: null |
|||
}, |
|||
charsHandler: { |
|||
type: Function, |
|||
default: null |
|||
}, |
|||
imageProp: { |
|||
type: Object, |
|||
default () { |
|||
return { |
|||
mode: 'aspectFit', |
|||
padding: 0, |
|||
lazyLoad: false, |
|||
domain: '' |
|||
}; |
|||
} |
|||
} |
|||
}, |
|||
components: { |
|||
wxParseTemplate |
|||
}, |
|||
data() { |
|||
return { |
|||
nodes: {}, |
|||
imageUrls: [], |
|||
wxParseWidth: { |
|||
value: 0 |
|||
} |
|||
}; |
|||
}, |
|||
computed: {}, |
|||
mounted() { |
|||
let that = this |
|||
this.getWidth().then(function(data) { |
|||
that.wxParseWidth.value = data; |
|||
}) |
|||
this.setHtml() |
|||
}, |
|||
methods: { |
|||
setHtml() { |
|||
// this.getWidth().then((data) => { |
|||
// this.wxParseWidth.value = data; |
|||
// }) |
|||
let { |
|||
content, |
|||
noData, |
|||
imageProp, |
|||
startHandler, |
|||
endHandler, |
|||
charsHandler |
|||
} = this; |
|||
let parseData = content || noData; |
|||
let customHandler = { |
|||
start: startHandler, |
|||
end: endHandler, |
|||
chars: charsHandler |
|||
}; |
|||
let results = HtmlToJson(parseData, customHandler, imageProp, this); |
|||
this.imageUrls = results.imageUrls; |
|||
// this.nodes = results.nodes; |
|||
this.nodes = []; |
|||
results.nodes.forEach((item) => { |
|||
setTimeout(() => { |
|||
this.nodes.push(item) |
|||
}, 0); |
|||
}) |
|||
}, |
|||
getWidth() { |
|||
return new Promise((res, rej) => { |
|||
// #ifndef MP-ALIPAY || MP-BAIDU |
|||
uni.createSelectorQuery() |
|||
.in(this) |
|||
.select('.wxParse') |
|||
.fields({ |
|||
size: true, |
|||
scrollOffset: true |
|||
}, |
|||
data => { |
|||
res(data.width); |
|||
} |
|||
).exec(); |
|||
// #endif |
|||
// #ifdef MP-BAIDU |
|||
swan.createSelectorQuery().select('.wxParse').boundingClientRect(function(rect) { |
|||
rect[0].width |
|||
}).exec() |
|||
// #endif |
|||
// #ifdef MP-ALIPAY |
|||
my.createSelectorQuery() |
|||
.select('.wxParse') |
|||
.boundingClientRect().exec((ret) => { |
|||
res(ret[0].width); |
|||
}); |
|||
// #endif |
|||
}); |
|||
}, |
|||
navigate(href, $event, attr) { |
|||
console.log(href, attr); |
|||
this.$emit('navigate', href, $event); |
|||
}, |
|||
preview(src, $event) { |
|||
if (!this.imageUrls.length || typeof this.imgOptions === 'boolean') { |
|||
|
|||
} else { |
|||
uni.previewImage({ |
|||
current: src, |
|||
urls: this.imageUrls, |
|||
loop: this.imgOptions.loop, |
|||
indicator: this.imgOptions.indicator, |
|||
longPressActions: this.imgOptions.longPressActions |
|||
}); |
|||
} |
|||
this.$emit('preview', src, $event); |
|||
}, |
|||
removeImageUrl(src) { |
|||
const { |
|||
imageUrls |
|||
} = this; |
|||
imageUrls.splice(imageUrls.indexOf(src), 1); |
|||
} |
|||
}, |
|||
// 父组件中提供 |
|||
provide() { |
|||
return { |
|||
parseWidth: this.wxParseWidth, |
|||
parseSelect: this.userSelect |
|||
// 提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 |
|||
}; |
|||
}, |
|||
watch: { |
|||
content(){ |
|||
this.setHtml() |
|||
} |
|||
// content: { |
|||
// handler: function(newVal, oldVal) { |
|||
// if (newVal !== oldVal) { |
|||
// |
|||
// } |
|||
// }, |
|||
// deep: true |
|||
// } |
|||
} |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,50 @@ |
|||
<template> |
|||
<view> |
|||
<radio-group class="uni-list" @change="radioChange"> |
|||
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in type_list" :key="index"> |
|||
<view class="invoice-type-icon"> |
|||
<radio class="a-radio" :id="item.name" :value="item.value" :checked="item.checked" :disabled="item.disabled"></radio> |
|||
</view> |
|||
<view class="invoice-type-c"> |
|||
<label class="label-2-text" :for="item.name"> |
|||
<text>{{item.name}}</text> |
|||
</label> |
|||
</view> |
|||
</label> |
|||
</radio-group> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
type_list: [ |
|||
{ value: '1', name: '仅退款', checked: true, disabled: false }, |
|||
{ value: '2', name: '退货退款', checked: false, disabled:false }, |
|||
], |
|||
}; |
|||
}, |
|||
methods:{ |
|||
radioChange: function(evt) { |
|||
this.type_list.forEach(item => { |
|||
if (item.value === evt.target.value) { |
|||
item.checked = true; |
|||
this.aftersale_type = evt.target.value; |
|||
}else{ |
|||
item.checked = false; |
|||
} |
|||
}); |
|||
if(this.type_list[0].checked){ |
|||
this.refund_input_noedit = true; |
|||
}else{ |
|||
this.refund_input_noedit = false; |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,192 @@ |
|||
<template> |
|||
<!-- 单图 --> |
|||
<view class="jshop-adpop" v-if="jdata.options.colorGroup && jdata.options.colorGroup.length > 0"> |
|||
<view class="adpop" v-if="closeAd"> |
|||
<view class="adpop-c"> |
|||
<view class="adpop-img"> |
|||
<!-- #ifdef MP-WEIXIN --> |
|||
<view @click="navToTabPage(jdata.options.colorGroup[0].adLink)"> |
|||
<image class="ad-img" :src="jdata.options.colorGroup[0].adImg" mode="widthFix" ></image> |
|||
</view> |
|||
<!-- #endif --> |
|||
<!-- #ifndef MP-WEIXIN --> |
|||
<image class="ad-img" :src="jdata.options.colorGroup[0].adImg" mode="widthFix" @click="navToTabPage(jdata.options.colorGroup[0].adLink)"></image> |
|||
<!-- #endif --> |
|||
</view> |
|||
<image class="close-btn" src="/static/image/close-pink.png" mode="" @click="closePop"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "jshopadpop", |
|||
props: { |
|||
jdata: { |
|||
// type: Object, |
|||
required: true, |
|||
} |
|||
}, |
|||
data(){ |
|||
return{ |
|||
closeAd: true |
|||
} |
|||
}, |
|||
computed: { |
|||
count() { |
|||
// console.log(jdata) |
|||
return (this.jdata.options.colorGroup.length > 0) |
|||
} |
|||
|
|||
}, |
|||
methods: { |
|||
closePop(){ |
|||
this.closeAd = false |
|||
}, |
|||
navToTabPage(url) { |
|||
uni.navigateTo({ |
|||
url: url |
|||
}); |
|||
}, |
|||
showSliderInfo(type, val) { |
|||
console.log(type); |
|||
if (!val) { |
|||
return; |
|||
} |
|||
if (type == 1) { |
|||
if (val.indexOf('http') != -1) { |
|||
// #ifdef H5 |
|||
window.location.href = val |
|||
// #endif |
|||
} else { |
|||
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP |
|||
if (val == '/pages/index/index' || val == '/pages/classify/classify' || val == '/pages/cart/index/index' || val == '/pages/member/index/index') { |
|||
uni.switchTab({ |
|||
url: val |
|||
}); |
|||
return; |
|||
} else if(val.indexOf('/pages/coupon/coupon')>-1){ |
|||
var id = val.replace('/pages/coupon/coupon?id=',""); |
|||
this.receiveCoupon(id) |
|||
} else { |
|||
this.$common.navigateTo(val); |
|||
return; |
|||
} |
|||
// #endif |
|||
} |
|||
} else if (type == 2) { |
|||
// 商品详情 |
|||
this.goodsDetail(val) |
|||
} else if (type == 3) { |
|||
// 文章详情 |
|||
this.$common.navigateTo('/pages/article/index?id=' + val + '&id_type=1') |
|||
} else if (type == 4) { |
|||
// 文章列表 |
|||
this.$common.navigateTo('/pages/article/list?cid=' + val) |
|||
} else if (type == 5) { |
|||
//智能表单 |
|||
this.$common.navigateTo('/pages/form/detail/form?id=' + val) |
|||
} |
|||
}, |
|||
//跳转到商品详情页面 |
|||
goodsDetail: function(id) { |
|||
// let ins = encodeURIComponent('id='+id); |
|||
let url = '/pages/goods/index/index?id=' + id; |
|||
this.$common.navigateTo(url); |
|||
}, |
|||
// 用户领取优惠券 |
|||
receiveCoupon(couponId) { |
|||
let data = { |
|||
promotion_id: couponId |
|||
} |
|||
this.$api.getCoupon(data, res => { |
|||
if (res.status) { |
|||
this.$common.successToShow(res.msg) |
|||
} else { |
|||
this.$common.errorToShow(res.msg) |
|||
} |
|||
}) |
|||
}, |
|||
// #ifdef MP-WEIXIN |
|||
showSliderInfo2:function(e){ |
|||
let type = e.currentTarget.dataset.type; |
|||
let val = e.currentTarget.dataset.val; |
|||
console.log(type); |
|||
console.log(val) |
|||
console.log(type); |
|||
if (!val) { |
|||
return; |
|||
} |
|||
if (type == 1) { |
|||
if (val.indexOf('http') != -1) { |
|||
// #ifdef H5 |
|||
window.location.href = val |
|||
// #endif |
|||
} else { |
|||
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP |
|||
if (val == '/pages/index/index' || val == '/pages/classify/classify' || val == '/pages/cart/index/index' || val == '/pages/member/index/index') { |
|||
uni.switchTab({ |
|||
url: val |
|||
}); |
|||
return; |
|||
} else if(val.indexOf('/pages/coupon/coupon')>-1){ |
|||
var id = val.replace('/pages/coupon/coupon?id=',""); |
|||
this.receiveCoupon(id) |
|||
} else { |
|||
this.$common.navigateTo(val); |
|||
return; |
|||
} |
|||
// #endif |
|||
} |
|||
} else if (type == 2) { |
|||
// 商品详情 |
|||
this.goodsDetail(val) |
|||
} else if (type == 3) { |
|||
// 文章详情 |
|||
this.$common.navigateTo('/pages/article/index?id=' + val + '&id_type=1') |
|||
} else if (type == 4) { |
|||
// 文章列表 |
|||
this.$common.navigateTo('/pages/article/list?cid=' + val) |
|||
} else if (type == 5) { |
|||
//智能表单 |
|||
this.$common.navigateTo('/pages/form/detail/form?id=' + val) |
|||
} |
|||
} |
|||
// #endif |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.adpop{ |
|||
position: fixed; |
|||
background: rgba(0,0,0,.5); |
|||
width: 100%; |
|||
height: 100vh; |
|||
z-index: 999; |
|||
top: 0; |
|||
left: 0; |
|||
} |
|||
.adpop-c{ |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%,-50%); |
|||
width: 70%; |
|||
text-align: center; |
|||
} |
|||
.adpop-img{ |
|||
width: 100%; |
|||
max-height: 1000rpx; |
|||
margin-bottom: 50rpx; |
|||
} |
|||
.ad-img{ |
|||
width: 100%; |
|||
max-height: 1000rpx; |
|||
} |
|||
.close-btn{ |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,82 @@ |
|||
<template> |
|||
<view class='index-article cell-group bottom-cell-group' v-if="jdata.options.colorGroup && count"> |
|||
<view class='cell-item' |
|||
v-for="item in jdata.options.colorGroup" |
|||
:key="item.id" |
|||
@click="articleDetail(item.id)" |
|||
> |
|||
|
|||
<view class="cell-item-bd"> |
|||
<view class="article-title "> |
|||
{{ item.title }} |
|||
</view> |
|||
<view class="article-time"> |
|||
{{ item.ctime }} |
|||
</view> |
|||
</view> |
|||
<view class="cell-title-img"> |
|||
<image :src="item.cover" mode="aspectFill"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "jshoparticle", |
|||
props: { |
|||
jdata:{ |
|||
// type: Array, |
|||
required: true, |
|||
} |
|||
}, |
|||
computed: { |
|||
count() { |
|||
return (this.jdata.options.colorGroup.length > 0) |
|||
} |
|||
}, |
|||
methods: { |
|||
// 查看文章详情 |
|||
articleDetail (articleId) { |
|||
this.$common.navigateTo('/pages/article/index?id=' + articleId+'&id_type=1') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.index-article .cell-title-img{ |
|||
width: 160upx; |
|||
height: 160upx; |
|||
float: right; |
|||
} |
|||
.index-article .cell-title-img image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.index-article .cell-item-bd{ |
|||
padding-right: 0; |
|||
vertical-align: top; |
|||
position: relative; |
|||
} |
|||
.index-article .article-title{ |
|||
font-size: 28upx; |
|||
color: #333; |
|||
width: 100%; |
|||
min-height: 80upx; |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 2; |
|||
overflow: hidden; |
|||
} |
|||
.index-article .article-time{ |
|||
font-size: 24upx; |
|||
color: #999; |
|||
display: inline-block; |
|||
min-width: 220upx; |
|||
min-height: 32upx; |
|||
position: absolute; |
|||
bottom: 0; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,82 @@ |
|||
<template> |
|||
<view class='index-article cell-group bottom-cell-group' v-if="jdata.options.colorGroup && count"> |
|||
<view class='cell-item' |
|||
v-for="item in jdata.options.colorGroup" |
|||
:key="item.id" |
|||
@click="articleDetail(item.id)" |
|||
> |
|||
<view class="cell-item-bd"> |
|||
<view class="article-title "> |
|||
{{ item.title }} |
|||
</view> |
|||
<view class="article-time"> |
|||
{{ item.ctime }} |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="cell-title-img"> |
|||
<image :src="item.cover" mode="aspectFill"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "jshoparticleclassify", |
|||
props: { |
|||
jdata:{ |
|||
// type: Array, |
|||
required: true, |
|||
} |
|||
}, |
|||
computed: { |
|||
count() { |
|||
return (this.jdata.options.colorGroup.length > 0) |
|||
} |
|||
}, |
|||
methods: { |
|||
// 查看文章详情 |
|||
articleDetail (articleId) { |
|||
this.$common.navigateTo('/pages/article/index?id=' + articleId+'&id_type=1') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.index-article .cell-title-img{ |
|||
width: 160upx; |
|||
height: 160upx; |
|||
float: right; |
|||
} |
|||
.index-article .cell-title-img image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.index-article .cell-item-bd{ |
|||
padding-right: 0; |
|||
vertical-align: top; |
|||
position: relative; |
|||
} |
|||
.index-article .article-title{ |
|||
font-size: 28upx; |
|||
color: #333; |
|||
width: 100%; |
|||
min-height: 80upx; |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 2; |
|||
overflow: hidden; |
|||
} |
|||
.index-article .article-time{ |
|||
font-size: 24upx; |
|||
color: #999; |
|||
display: inline-block; |
|||
min-width: 220upx; |
|||
min-height: 32upx; |
|||
position: absolute; |
|||
bottom: 0; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,21 @@ |
|||
<template> |
|||
<view class="blank" :style="{background:jdata.options.search_bg,height:jdata.options.udPadding*2+'rpx'}"></view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "jshopblank", |
|||
props: { |
|||
jdata:{ |
|||
// type: Array, |
|||
required: true, |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -0,0 +1,27 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<u-parse :content="content" @preview="preview" @navigate="navigate" style="background-color: #fff;"/> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
//视频和文本解析组件 |
|||
import uParse from '@/components/gaoyia-parse/parse.vue' |
|||
export default { |
|||
name: 'jshop-content', |
|||
components: { |
|||
uParse |
|||
}, |
|||
props: { |
|||
content: {} |
|||
}, |
|||
created() {}, |
|||
methods: { |
|||
preview(src, e) { |
|||
// do something |
|||
}, |
|||
navigate(href, e) { |
|||
// do something |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,101 @@ |
|||
<template> |
|||
<view class="coupon bottom-cell-group" v-if="count"> |
|||
<view class="coupon-item" v-for="item in jdata.options.colorGroup" :key="item.id" @click="receiveCoupon(item.id)"> |
|||
<view class="coupon-i-l"> |
|||
<view class="coupon-i-l-t"> |
|||
<image class="icon" src="/static/image/element-ic.png" mode=""></image> |
|||
<text>{{ item.name }}</text> |
|||
</view> |
|||
<view class="coupon-i-l-b"> |
|||
{{ item.expression1 + item.expression2 }} |
|||
</view> |
|||
</view> |
|||
<view class="coupon-i-r"> |
|||
<image class="coupon-logo" src="/static/image/coupon-element.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "jshopcoupon", |
|||
props: { |
|||
jdata:{ |
|||
// type: Array, |
|||
required: true, |
|||
} |
|||
}, |
|||
computed: { |
|||
count() { |
|||
return (this.jdata.options.colorGroup.length > 0) |
|||
} |
|||
}, |
|||
methods: { |
|||
// 用户领取优惠券 |
|||
receiveCoupon(couponId) { |
|||
let jdata = { |
|||
promotion_id: couponId |
|||
} |
|||
this.$api.getCoupon(jdata, res => { |
|||
if (res.status) { |
|||
this.$common.successToShow(res.msg) |
|||
} else { |
|||
this.$common.errorToShow(res.msg) |
|||
} |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.coupon { |
|||
padding: 0 26upx; |
|||
background-color: #f8f8f8; |
|||
} |
|||
|
|||
.coupon-item { |
|||
padding: 20upx; |
|||
margin-bottom: 20upx; |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.coupon-i-l { |
|||
width: 400upx; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.coupon-i-l-t { |
|||
font-size: 32upx; |
|||
position: relative; |
|||
margin-bottom: 10upx; |
|||
} |
|||
|
|||
.coupon-i-l-t .icon { |
|||
position: absolute; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
} |
|||
|
|||
.coupon-i-l-t text { |
|||
margin-left: 60upx; |
|||
} |
|||
|
|||
.coupon-i-l-b { |
|||
font-size: 24upx; |
|||
color: #999; |
|||
} |
|||
|
|||
.coupon-i-r { |
|||
width: 258upx; |
|||
display: inline-block; |
|||
text-align: center; |
|||
} |
|||
|
|||
.coupon-logo { |
|||
width: 130upx; |
|||
height: 100upx; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,604 @@ |
|||
<template> |
|||
<view class="container"> |
|||
|
|||
<!-- 新品上市 --> |
|||
<view class="f-header m-t" @click="navToTabPage('../../pagesA/product/list')"> |
|||
<image src="/static/temp/h1.png" ></image> |
|||
<view class="tit-box"> |
|||
<text class="tit">新品上市</text> |
|||
<text class="tit2">Guess You Like It</text> |
|||
</view> |
|||
<text class="yticon icon-you"></text> |
|||
</view> |
|||
|
|||
<view class="guess-section"> |
|||
<view v-for="(item, index) in jdata.options.colorGroup" :key="index" class="guess-item" @click="goodsDetail(item.id)"> |
|||
<view class="image-wrapper"><image :src="item.pic" mode="aspectFill"></image></view> |
|||
<text class="title clamp">{{ item.title }}</text> |
|||
<text class="price">￥{{ item.price }}</text> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {goods} from '@/config/mixins.js' |
|||
export default { |
|||
filters:{ |
|||
substr(val) { |
|||
if (val.length == 0 || val == undefined) { |
|||
return false; |
|||
} else if (val.length > 13) { |
|||
return val.substring(0, 13) + "..."; |
|||
} else { |
|||
return val; |
|||
} |
|||
} |
|||
}, |
|||
mixins: [goods], |
|||
name: "jshopgoods", |
|||
props: { |
|||
jdata:{ |
|||
// type: Array, |
|||
required: true, |
|||
} |
|||
}, |
|||
computed: { |
|||
count() { |
|||
return (this.jdata.options.colorGroup.length > 0) |
|||
} |
|||
}, |
|||
methods: { |
|||
navToTabPage(url) { |
|||
uni.navigateTo({ |
|||
url: url |
|||
}); |
|||
}, |
|||
//跳转到商品详情页面 |
|||
goodsDetail: function(id) { |
|||
let url = '../../pagesA/product/product?id=' + id; |
|||
|
|||
this.$common.navigateTo(url); |
|||
}, |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.MP-search{ |
|||
background: #FFFFFF;height: 80upx;display: flex;justify-content: center;align-items: center;position: fixed;width: 100%;z-index: 999; |
|||
} |
|||
.MP-search-input{ |
|||
font-size: 28upx;background: #F5F5F5;height: 60upx;width: 90%;border-radius: 50upx;text-align: center; |
|||
} |
|||
.mp-search-box { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 30upx; |
|||
z-index: 9999; |
|||
width: 100%; |
|||
padding: 0 80upx; |
|||
.ser-input { |
|||
flex: 1; |
|||
height: 60upx; |
|||
line-height: 60upx; |
|||
text-align: center; |
|||
font-size: 28upx; |
|||
color: $font-color-base; |
|||
border-radius: 20px; |
|||
background: rgba(255, 255, 255, 0.6); |
|||
} |
|||
} |
|||
page { |
|||
.cate-section { |
|||
position: relative; |
|||
z-index: 5; |
|||
border-radius: 16upx 16upx 0 0; |
|||
margin-top: -20upx; |
|||
} |
|||
.carousel-section { |
|||
padding: 0; |
|||
.titleNview-placing { |
|||
padding-top: 0; |
|||
height: 0; |
|||
} |
|||
.carousel { |
|||
.carousel-item { |
|||
padding: 0; |
|||
} |
|||
} |
|||
.swiper-dots { |
|||
left: 45upx; |
|||
bottom: 40upx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
page { |
|||
background: #f5f5f5; |
|||
} |
|||
.m-t { |
|||
margin-top: 20upx; |
|||
} |
|||
/* 头部 轮播图 */ |
|||
.carousel-section { |
|||
position: relative; |
|||
padding-top: 10px; |
|||
|
|||
.titleNview-placing { |
|||
height: var(--status-bar-height); |
|||
padding-top: 44px; |
|||
box-sizing: content-box; |
|||
} |
|||
|
|||
.titleNview-background { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 426upx; |
|||
transition: 0.4s; |
|||
} |
|||
} |
|||
.carousel { |
|||
width: 100%; |
|||
height: 350upx; |
|||
|
|||
.carousel-item { |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 0 28upx; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 10upx; |
|||
} |
|||
} |
|||
.swiper-dots { |
|||
display: flex; |
|||
position: absolute; |
|||
left: 60upx; |
|||
bottom: 15upx; |
|||
width: 72upx; |
|||
height: 36upx; |
|||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk4MzlBNjE0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk4MzlBNjA0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0E3RUNERkE0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0E3RUNERkI0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Gh5BPAAACTUlEQVR42uzcQW7jQAwFUdN306l1uWwNww5kqdsmm6/2MwtVCp8CosQtP9vg/2+/gY+DRAMBgqnjIp2PaCxCLLldpPARRIiFj1yBbMV+cHZh9PURRLQNhY8kgWyL/WDtwujjI8hoE8rKLqb5CDJaRMJHokC6yKgSCR9JAukmokIknCQJpLOIrJFwMsBJELFcKHwM9BFkLBMKFxNcBCHlQ+FhoocgpVwwnv0Xn30QBJGMC0QcaBVJiAMiec/dcwKuL4j1QMsVCXFAJE4s4NQA3K/8Y6DzO4g40P7UcmIBJxbEesCKWBDg8wWxHrAiFgT4fEGsB/CwIhYE+AeBAAdPLOcV8HRmWRDAiQVcO7GcV8CLM8uCAE4sQCDAlHcQ7x+ABQEEAggEEAggEEAggEAAgQACASAQQCCAQACBAAIBBAIIBBAIIBBAIABe4e9iAe/xd7EAJxYgEGDeO4j3EODp/cOCAE4sYMyJ5cwCHs4rCwI4sYBxJ5YzC84rCwKcXxArAuthQYDzC2JF0H49LAhwYUGsCFqvx5EF2T07dMaJBetx4cRyaqFtHJ8EIhK0i8OJBQxcECuCVutxJhCRoE0cZwMRyRcFefa/ffZBVPogePihhyCnbBhcfMFFEFM+DD4m+ghSlgmDkwlOgpAl4+BkkJMgZdk4+EgaSCcpVX7bmY9kgXQQU+1TgE0c+QJZUUz1b2T4SBbIKmJW+3iMj2SBVBWz+leVfCQLpIqYbp8b85EskIxyfIOfK5Sf+wiCRJEsllQ+oqEkQfBxmD8BBgA5hVjXyrBNUQAAAABJRU5ErkJggg==); |
|||
background-size: 100% 100%; |
|||
|
|||
.num { |
|||
width: 36upx; |
|||
height: 36upx; |
|||
border-radius: 50px; |
|||
font-size: 24upx; |
|||
color: #fff; |
|||
text-align: center; |
|||
line-height: 36upx; |
|||
} |
|||
|
|||
.sign { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 50%; |
|||
line-height: 36upx; |
|||
font-size: 12upx; |
|||
color: #fff; |
|||
transform: translateX(-50%); |
|||
} |
|||
} |
|||
/* 分类 */ |
|||
.cate-section { |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
flex-wrap: wrap; |
|||
padding: 30upx 22upx; |
|||
background: #fff; |
|||
.cate-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
font-size: $font-sm + 2upx; |
|||
color: $font-color-dark; |
|||
} |
|||
/* 原图标颜色太深,不想改图了,所以加了透明度 */ |
|||
image { |
|||
width: 88upx; |
|||
height: 88upx; |
|||
margin-bottom: 14upx; |
|||
border-radius: 50%; |
|||
opacity: 0.7; |
|||
box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3); |
|||
} |
|||
} |
|||
.ad-1 { |
|||
width: 100%; |
|||
height: 210upx; |
|||
padding: 10upx 0; |
|||
background: #fff; |
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
/* 秒杀专区 */ |
|||
.seckill-section { |
|||
padding: 0upx 20upx 20upx; |
|||
background: #fff; |
|||
.s-header { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 90upx; |
|||
line-height: 1; |
|||
.s-img { |
|||
width: 140upx; |
|||
height: 30upx; |
|||
} |
|||
.tip { |
|||
font-size: $font-base; |
|||
color: $font-color-light; |
|||
// margin: 0 20upx 0 40upx; |
|||
} |
|||
.timer { |
|||
display: inline-block; |
|||
width: 40upx; |
|||
height: 36upx; |
|||
text-align: center; |
|||
line-height: 36upx; |
|||
margin-right: 14upx; |
|||
font-size: $font-sm + 2upx; |
|||
color: #fff; |
|||
border-radius: 2px; |
|||
background: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.icon-you { |
|||
font-size: $font-lg; |
|||
color: $font-color-light; |
|||
flex: 1; |
|||
text-align: right; |
|||
} |
|||
} |
|||
.floor-list { |
|||
white-space: nowrap; |
|||
} |
|||
.scoll-wrapper { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
} |
|||
.floor-item { |
|||
width: 150upx; |
|||
margin-right: 20upx; |
|||
font-size: $font-sm + 2upx; |
|||
color: $font-color-dark; |
|||
line-height: 1.8; |
|||
image { |
|||
width: 150upx; |
|||
height: 150upx; |
|||
border-radius: 6upx; |
|||
} |
|||
.price { |
|||
color: $uni-color-primary; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.f-header { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 140upx; |
|||
padding: 0upx 20upx; |
|||
background: #fff; |
|||
image { |
|||
flex-shrink: 0; |
|||
width: 80upx; |
|||
height: 80upx; |
|||
margin-right: 20upx; |
|||
} |
|||
.tit-box { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.tit { |
|||
font-size: $font-lg + 2upx; |
|||
color: #font-color-dark; |
|||
line-height: 1.3; |
|||
} |
|||
.tit2 { |
|||
font-size: $font-sm; |
|||
color: $font-color-light; |
|||
} |
|||
.icon-you { |
|||
font-size: $font-lg + 2upx; |
|||
color: $font-color-light; |
|||
} |
|||
} |
|||
/* 团购楼层 */ |
|||
.group-section { |
|||
background: #fff; |
|||
.g-swiper { |
|||
height: 650upx; |
|||
padding-bottom: 20upx; |
|||
} |
|||
.g-swiper-item { |
|||
width: 100%; |
|||
padding: 0 20upx; |
|||
display: flex; |
|||
} |
|||
image { |
|||
width: 100%; |
|||
height: 460upx; |
|||
border-radius: 4px; |
|||
} |
|||
.g-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow: hidden; |
|||
} |
|||
.left { |
|||
flex: 1.2; |
|||
// margin-right: 24upx; |
|||
.t-box { |
|||
padding-top: 20upx; |
|||
} |
|||
} |
|||
.right { |
|||
flex: 0.8; |
|||
flex-direction: column-reverse; |
|||
.t-box { |
|||
padding-bottom: 20upx; |
|||
} |
|||
} |
|||
.t-box { |
|||
height: 160upx; |
|||
font-size: $font-base + 2upx; |
|||
color: $font-color-dark; |
|||
line-height: 1.6; |
|||
} |
|||
.price { |
|||
color: $uni-color-primary; |
|||
} |
|||
.m-price { |
|||
font-size: $font-sm + 2upx; |
|||
text-decoration: line-through; |
|||
color: $font-color-light; |
|||
margin-left: 8upx; |
|||
} |
|||
.pro-box { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 10upx; |
|||
font-size: $font-sm; |
|||
color: $font-base; |
|||
padding-right: 10upx; |
|||
} |
|||
.progress-box { |
|||
flex: 1; |
|||
border-radius: 10px; |
|||
overflow: hidden; |
|||
margin-right: 8upx; |
|||
} |
|||
} |
|||
/* 分类推荐楼层 */ |
|||
.hot-floor { |
|||
width: 100%; |
|||
overflow: hidden; |
|||
margin-bottom: 20upx; |
|||
.floor-img-box { |
|||
width: 100%; |
|||
height: 320upx; |
|||
position: relative; |
|||
&:after { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: linear-gradient(rgba(255, 255, 255, 0.06) 30%, #f8f8f8); |
|||
} |
|||
} |
|||
.floor-img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.floor-list { |
|||
white-space: nowrap; |
|||
padding: 20upx; |
|||
padding-right: 50upx; |
|||
border-radius: 6upx; |
|||
margin-top: -140upx; |
|||
margin-left: 30upx; |
|||
background: #fff; |
|||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
.scoll-wrapper { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
} |
|||
.floor-item { |
|||
width: 180upx; |
|||
margin-right: 20upx; |
|||
font-size: $font-sm + 2upx; |
|||
color: $font-color-dark; |
|||
line-height: 1.8; |
|||
image { |
|||
width: 180upx; |
|||
height: 180upx; |
|||
border-radius: 6upx; |
|||
} |
|||
.price { |
|||
color: $uni-color-primary; |
|||
} |
|||
} |
|||
.more { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
flex-shrink: 0; |
|||
width: 180upx; |
|||
height: 180upx; |
|||
border-radius: 6upx; |
|||
background: #f3f3f3; |
|||
font-size: $font-base; |
|||
color: $font-color-light; |
|||
text:first-child { |
|||
margin-bottom: 4upx; |
|||
} |
|||
} |
|||
} |
|||
/* 单条商品 */ |
|||
.goods-box-single { |
|||
display: flex; |
|||
padding: 20upx 0; |
|||
.goods-img { |
|||
display: block; |
|||
width: 120upx; |
|||
height: 120upx; |
|||
} |
|||
.right { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding: 0 30upx 0 24upx; |
|||
overflow: hidden; |
|||
.title { |
|||
font-size: $font-base + 2upx; |
|||
color: $font-color-dark; |
|||
line-height: 1; |
|||
} |
|||
.attr-box { |
|||
font-size: $font-sm + 2upx; |
|||
color: $font-color-light; |
|||
padding: 10upx 12upx; |
|||
} |
|||
.price { |
|||
font-size: $font-base + 2upx; |
|||
color: $font-color-dark; |
|||
&:before { |
|||
content: '￥'; |
|||
font-size: $font-sm; |
|||
margin: 0 2upx 0 8upx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.price-box { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
align-items: baseline; |
|||
padding: 20upx 30upx; |
|||
font-size: $font-sm + 2upx; |
|||
color: $font-color-light; |
|||
.num { |
|||
margin: 0 8upx; |
|||
color: $font-color-dark; |
|||
} |
|||
.price { |
|||
font-size: $font-lg; |
|||
color: $font-color-dark; |
|||
&:before { |
|||
content: '￥'; |
|||
font-size: $font-sm; |
|||
margin: 0 2upx 0 8upx; |
|||
} |
|||
} |
|||
} |
|||
.action-box { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
height: 100upx; |
|||
position: relative; |
|||
padding-right: 30upx; |
|||
} |
|||
.action-btn { |
|||
width: 160upx; |
|||
height: 60upx; |
|||
margin: 0; |
|||
margin-left: 24upx; |
|||
padding: 0; |
|||
text-align: center; |
|||
line-height: 60upx; |
|||
font-size: $font-sm + 2upx; |
|||
color: $font-color-dark; |
|||
background: #fff; |
|||
border-radius: 100px; |
|||
&:after { |
|||
border-radius: 100px; |
|||
} |
|||
&.recom { |
|||
background: #fff9f9; |
|||
color: $base-color; |
|||
&:after { |
|||
border-color: #f7bcc8; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
/* 猜你喜欢 */ |
|||
.guess-section { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding: 0 30upx; |
|||
background: #fff; |
|||
.guess-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 48%; |
|||
padding-bottom: 40upx; |
|||
&:nth-child(2n + 1) { |
|||
margin-right: 4%; |
|||
} |
|||
} |
|||
.image-wrapper { |
|||
width: 100%; |
|||
height: 330upx; |
|||
border-radius: 3px; |
|||
overflow: hidden; |
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
opacity: 1; |
|||
} |
|||
} |
|||
.title { |
|||
font-size: $font-lg; |
|||
color: $font-color-dark; |
|||
line-height: 80upx; |
|||
} |
|||
.price { |
|||
font-size: $font-lg; |
|||
color: $uni-color-primary; |
|||
line-height: 1; |
|||
} |
|||
.coupon_box { |
|||
width:100%; height:auto; display:table; padding:6upx 26upx 26upx 26upx; |
|||
} |
|||
|
|||
.other_type { |
|||
width:100%; height:90upx; padding-top:50upx; |
|||
|
|||
.text { width:100%; border-top:1px solid #eeeeee; display:block; text-align:center; position:relative; } |
|||
.text span { width:180upx; height:40upx; line-height:40upx; color:#999999; display:block; background:#ffffff; position:absolute; left:50%; top:50%; margin-left:-90upx; margin-top:-20upx; font-size:$font-base; } |
|||
} |
|||
} |
|||
.getPosition{ |
|||
height: 100upx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 32upx; |
|||
background-color: #FFF; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,132 @@ |
|||
<template> |
|||
<!-- 团购秒杀 --> |
|||
<view class="img-list bottom-cell-group group-buying" v-if="jdata.options.colorGroup && count"> |
|||
<view class='cell-item right-img'> |
|||
<view class='cell-item-hd group-title'> |
|||
{{jdata.params.title}} |
|||
<!-- <view class='cell-hd-title'></view> --> |
|||
</view> |
|||
</view> |
|||
<view class='swiper-grids'> |
|||
<scroll-view class='swiper-list' scroll-x="true"> |
|||
<view class="img-list-item" v-if="item.goods !== 'undefined' && item.goods" v-for="(item, key) in jdata.options.colorGroup" |
|||
:key="key"> |
|||
<image class="img-list-item-l medium-img have-none" :src="item.goods.image_url" mode='aspectFill' @click="groupDetail(item.goods.id, item.goods.group_id)"></image> |
|||
<view class="img-list-item-r medium-right"> |
|||
<view class="goods-name list-goods-name" @click="groupDetail(item.goods.id, item.goods.group_id)">{{item.goods.name}}</view> |
|||
<view class="goods-item-c"> |
|||
<view class="goods-price red-price">￥{{item.goods.product.price}}</view> |
|||
<view class="goods-buy"> |
|||
<view class="goods-salesvolume red-price" v-if="(item.goods.lasttime != '已经结束' || item.goods.lasttime != '即将开始') && item.goods.lasttime">剩余：<uni-countdown |
|||
:show-day="false" :hour="item.goods.lasttime.hour" :minute="item.goods.lasttime.minute" :second="item.goods.lasttime.second"></uni-countdown> |
|||
</view> |
|||
<view class="goods-salesvolume red-price" v-if="item.goods.lasttime == '已经结束'">已结束</view> |
|||
<view class="goods-salesvolume red-price" v-if="item.goods.lasttime == '即将开始'">即将开始</view> |
|||
<image class="goods-cart" src="/static/image/ic-car.png" @click="groupDetail(item.goods.id, item.goods.group_id)"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import uniCountdown from "@/components/uni-countdown/uni-countdown.vue" |
|||
import { |
|||
goods |
|||
} from '@/config/mixins.js' |
|||
export default { |
|||
mixins: [goods], |
|||
components: { |
|||
uniCountdown |
|||
}, |
|||
name: "jshopgrouppurchase", |
|||
props: { |
|||
jdata: { |
|||
// type: Array, |
|||
required: false, |
|||
} |
|||
}, |
|||
computed: { |
|||
count() { |
|||
return (this.jdata.options.colorGroup.length > 0) |
|||
} |
|||
}, |
|||
methods: { |
|||
showSliderInfo(type, val) { |
|||
if (type == 1) { |
|||
if (val.indexOf('http') != -1) { |
|||
// #ifdef H5 |
|||
window.location.href = val |
|||
// #endif |
|||
} else { |
|||
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP |
|||
if (val == '/pages/classify/classify' || val == '/pages/cart/index/index' || val == '/pages/member/index/index') { |
|||
uni.switchTab({ |
|||
url: val |
|||
}); |
|||
return; |
|||
} else { |
|||
this.$common.navigateTo(val); |
|||
return; |
|||
} |
|||
// #endif |
|||
} |
|||
} else if (type == 2) { |
|||
// 商品详情 |
|||
this.goodsDetail(val) |
|||
} else if (type == 3) { |
|||
// 文章详情 |
|||
this.$common.navigateTo('/pages/article/index?id=' + val +'&id_type=1') |
|||
} else if (type == 4) { |
|||
// 文章列表 |
|||
this.$common.navigateTo('/pages/article/list?cid=' + val) |
|||
} else if (type == 5) { |
|||
//智能表单 |
|||
this.$common.navigateTo('/pages/form/detail/form?id=' + val) |
|||
} |
|||
}, |
|||
//跳转到商品详情页面 |
|||
// goodsDetail: function(id) { |
|||
// let url = '/pages/goods/index/index?id=' + id; |
|||
// this.$common.navigateTo(url); |
|||
// }, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.img-list, |
|||
.img-grids { |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.cell-item { |
|||
border: none; |
|||
} |
|||
|
|||
.group-buying .img-list-item { |
|||
min-height: 236upx; |
|||
padding: 20upx; |
|||
margin-left: 26upx; |
|||
margin-bottom: 26upx; |
|||
display: inline-table; |
|||
background-color: #f9f9f9; |
|||
} |
|||
|
|||
.swiper-grids .img-list-item:last-child { |
|||
margin-right: 26upx; |
|||
} |
|||
|
|||
/* .group-buying .goods-name{ |
|||
min-height: 74upx; |
|||
} */ |
|||
.group-buying .group-title { |
|||
width: 100%; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,189 @@ |
|||
<template> |
|||
<!-- 单图 --> |
|||
<view class="ad jshop-imgsingle" v-if="jdata.options.colorGroup && jdata.options.colorGroup.length > 0"> |
|||
<view class="" v-for="item in jdata.options.colorGroup" :key="item.id"> |
|||
<!-- #ifdef MP-WEIXIN --> |
|||
<view @click="showSliderInfo2" :data-type="item.linkType" :data-val="item.linkValue"> |
|||
<image class="ad-img" :src="item.adImg" mode="widthFix" ></image> |
|||
</view> |
|||
<!-- #endif --> |
|||
<!-- #ifndef MP-WEIXIN --> |
|||
<image class="ad-img" :src="item.adImg" mode="widthFix" @click="showSliderInfo(item.linkType, item.linkValue)"></image> |
|||
<!-- #endif --> |
|||
<view class="imgup-btn" v-if="item.buttonText != ''" @click="showSliderInfo(item.linkType, item.linkValue)"> |
|||
<button class="btn btn-fillet" :style="{background:item.buttonColor,color:item.textColor}">{{item.buttonText}}</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "jshopimgsingle", |
|||
props: { |
|||
jdata: { |
|||
// type: Object, |
|||
required: true, |
|||
} |
|||
}, |
|||
computed: { |
|||
count() { |
|||
// console.log(jdata) |
|||
return (this.jdata.options.colorGroup.length > 0) |
|||
} |
|||
|
|||
}, |
|||
methods: { |
|||
showSliderInfo(type, val) { |
|||
console.log(type); |
|||
if (!val) { |
|||
return; |
|||
} |
|||
if (type == 1) { |
|||
if (val.indexOf('http') != -1) { |
|||
// #ifdef H5 |
|||
window.location.href = val |
|||
// #endif |
|||
} else { |
|||
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP |
|||
if (val == '/pages/index/index' || val == '/pages/classify/classify' || val == '/pages/cart/index/index' || val == '/pages/member/index/index') { |
|||
uni.switchTab({ |
|||
url: val |
|||
}); |
|||
return; |
|||
} else if(val.indexOf('/pages/coupon/coupon')>-1){ |
|||
var id = val.replace('/pages/coupon/coupon?id=',""); |
|||
this.receiveCoupon(id) |
|||
} else { |
|||
this.$common.navigateTo(val); |
|||
return; |
|||
} |
|||
// #endif |
|||
} |
|||
} else if (type == 2) { |
|||
// 商品详情 |
|||
this.goodsDetail(val) |
|||
} else if (type == 3) { |
|||
// 文章详情 |
|||
this.$common.navigateTo('/pages/article/index?id=' + val + '&id_type=1') |
|||
} else if (type == 4) { |
|||
// 文章列表 |
|||
this.$common.navigateTo('/pages/article/list?cid=' + val) |
|||
} else if (type == 5) { |
|||
//智能表单 |
|||
this.$common.navigateTo('/pages/form/detail/form?id=' + val) |
|||
} |
|||
}, |
|||
//跳转到商品详情页面 |
|||
goodsDetail: function(id) { |
|||
// let ins = encodeURIComponent('id='+id); |
|||
let url = '/pages/goods/index/index?id=' + id; |
|||
this.$common.navigateTo(url); |
|||
}, |
|||
// 用户领取优惠券 |
|||
receiveCoupon(couponId) { |
|||
let data = { |
|||
promotion_id: couponId |
|||
} |
|||
this.$api.getCoupon(data, res => { |
|||
if (res.status) { |
|||
this.$common.successToShow(res.msg) |
|||
} else { |
|||
this.$common.errorToShow(res.msg) |
|||
} |
|||
}) |
|||
}, |
|||
// #ifdef MP-WEIXIN |
|||
showSliderInfo2:function(e){ |
|||
let type = e.currentTarget.dataset.type; |
|||
let val = e.currentTarget.dataset.val; |
|||
console.log(type); |
|||
console.log(val) |
|||
console.log(type); |
|||
if (!val) { |
|||
return; |
|||
} |
|||
if (type == 1) { |
|||
if (val.indexOf('http') != -1) { |
|||
// #ifdef H5 |
|||
window.location.href = val |
|||
// #endif |
|||
} else { |
|||
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP |
|||
if (val == '/pages/index/index' || val == '/pages/classify/classify' || val == '/pages/cart/index/index' || val == '/pages/member/index/index') { |
|||
uni.switchTab({ |
|||
url: val |
|||
}); |
|||
return; |
|||
} else if(val.indexOf('/pages/coupon/coupon')>-1){ |
|||
var id = val.replace('/pages/coupon/coupon?id=',""); |
|||
this.receiveCoupon(id) |
|||
} else { |
|||
this.$common.navigateTo(val); |
|||
return; |
|||
} |
|||
// #endif |
|||
} |
|||
} else if (type == 2) { |
|||
// 商品详情 |
|||
this.goodsDetail(val) |
|||
} else if (type == 3) { |
|||
// 文章详情 |
|||
this.$common.navigateTo('/pages/article/index?id=' + val + '&id_type=1') |
|||
} else if (type == 4) { |
|||
// 文章列表 |
|||
this.$common.navigateTo('/pages/article/list?cid=' + val) |
|||
} else if (type == 5) { |
|||
//智能表单 |
|||
this.$common.navigateTo('/pages/form/detail/form?id=' + val) |
|||
} |
|||
} |
|||
// #endif |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
/* .ad { |
|||
width: 100%; |
|||
overflow: hidden; |
|||
} |
|||
.ad-img{ |
|||
width: 100%; |
|||
float: left; |
|||
margin-bottom: 20upx; |
|||
} |
|||
.ad-img:last-child{ |
|||
margin-bottom: 0; |
|||
} */ |
|||
.jshop-imgsingle.ad { |
|||
width: 100%; |
|||
overflow: hidden; |
|||
position: relative; |
|||
} |
|||
|
|||
.jshop-imgsingle .ad-img { |
|||
width: 100%; |
|||
float: left; |
|||
position: relative; |
|||
z-index: 667; |
|||
/* margin-bottom: 20upx; */ |
|||
} |
|||
|
|||
.jshop-imgsingle .ad-img:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.jshop-imgsingle .imgup-btn { |
|||
position: absolute; |
|||
z-index: 668; |
|||
bottom: 80upx; |
|||
left: 40upx; |
|||
} |
|||
|
|||
.jshop-imgsingle .imgup-btn .btn { |
|||
line-height: 2; |
|||
font-size: 28upx; |
|||
padding: 0 50upx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,667 @@ |
|||
<template> |
|||
|
|||
<!-- 头部轮播 --> |
|||
<!-- #ifdef MP --> |
|||
<view class="carousel-section" style="margin-top: 80upx;"> |
|||
<!-- #endif --> |
|||
<!-- #ifndef MP --> |
|||
<view class="carousel-section"> |
|||
<!-- #endif --> |
|||
<!-- 标题栏和状态栏占位符 --> |
|||
<view class="titleNview-placing"></view> |
|||
<!-- 背景色区域 --> |
|||
<view class="titleNview-background" :style="{ backgroundColor: titleNViewBackground }"></view> |
|||
<swiper class="carousel" circular @change="swiperChange"> |
|||
<swiper-item v-for="(item, index) in jdata.options.colorGroup" :key="index" class="carousel-item" @click="navToTabPage(item.adLink)"> |
|||
<image :src="item.adImg" /> |
|||
</swiper-item> |
|||
</swiper> |
|||
<!-- 自定义swiper指示器 --> |
|||
<view class="swiper-dots"> |
|||
<text class="num">{{ swiperCurrent + 1 }}</text> |
|||
<text class="sign">/</text> |
|||
<text class="num">{{ jdata.options.colorGroup.length }}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "jshopimgSlide", |
|||
props: { |
|||
jdata: { |
|||
// type: Object, |
|||
required: true, |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
swiperCurrent: 0, |
|||
titleNViewBackground: '', |
|||
swiperLength: 0, |
|||
swiper: { |
|||
indicatorDots: true, |
|||
autoplay: true, |
|||
interval: 2000, |
|||
duration: 500, |
|||
}, |
|||
}; |
|||
}, |
|||
computed: { |
|||
count() { |
|||
return (this.jdata.options.colorGroup.length > 0) |
|||
} |
|||
}, |
|||
created() {}, |
|||
watch: {}, |
|||
methods: { |
|||
navToTabPage(url) { |
|||
uni.navigateTo({ |
|||
url: url |
|||
}); |
|||
}, |
|||
//轮播图切换修改背景色 |
|||
swiperChange(e) { |
|||
const index = e.detail.current; |
|||
this.swiperCurrent = index; |
|||
// this.titleNViewBackground = this.jdata.options.colorGroup[index].background; |
|||
}, |
|||
// 广告点击查看详情 |
|||
showSliderInfo(type, val) { |
|||
if (!val) { |
|||
return; |
|||
} |
|||
if (type == 1) { |
|||
if (val.indexOf('http') != -1) { |
|||
// #ifdef H5 |
|||
window.location.href = val |
|||
// #endif |
|||
} else { |
|||
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP |
|||
if (val == '/pages/index/index' || val == '/pages/classify/classify' || val == '/pages/cart/index/index' || val == '/pages/member/index/index') { |
|||
uni.switchTab({ |
|||
url: val |
|||
}); |
|||
return; |
|||
} else if (val.indexOf('/pages/coupon/coupon') > -1) { |
|||
var id = val.replace('/pages/coupon/coupon?id=', ""); |
|||
this.receiveCoupon(id) |
|||
} else { |
|||
this.$common.navigateTo(val); |
|||
return; |
|||
} |
|||
// #endif |
|||
} |
|||
} else if (type == 2) { |
|||
// 商品详情 |
|||
this.goodsDetail(val) |
|||
} else if (type == 3) { |
|||
// 文章详情 |
|||
this.$common.navigateTo('/pages/article/index?id=' + val + '&id_type=1') |
|||
} else if (type == 4) { |
|||
// 文章列表 |
|||
this.$common.navigateTo('/pages/article/list?cid=' + val) |
|||
} else if (type == 5) { |
|||
//智能表单 |
|||
this.$common.navigateTo('/pages/form/detail/form?id=' + val) |
|||
} |
|||
}, |
|||
//跳转到商品详情页面 |
|||
goodsDetail: function(id) { |
|||
let url = '/pages/goods/index/index?id=' + id; |
|||
this.$common.navigateTo(url); |
|||
}, |
|||
// 用户领取优惠券 |
|||
receiveCoupon(couponId) { |
|||
let data = { |
|||
promotion_id: couponId |
|||
} |
|||
this.$api.getCoupon(data, res => { |
|||
if (res.status) { |
|||
this.$common.successToShow(res.msg) |
|||
} else { |
|||
this.$common.errorToShow(res.msg) |
|||
} |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss"> |
|||
.MP-search{ |
|||
background: #FFFFFF;height: 80upx;display: flex;justify-content: center;align-items: center;position: fixed;width: 100%;z-index: 999; |
|||
} |
|||
.MP-search-input{ |
|||
font-size: 28upx;background: #F5F5F5;height: 60upx;width: 90%;border-radius: 50upx;text-align: center; |
|||
} |
|||
.mp-search-box { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 30upx; |
|||
z-index: 9999; |
|||
width: 100%; |
|||
padding: 0 80upx; |
|||
.ser-input { |
|||
flex: 1; |
|||
height: 60upx; |
|||
line-height: 60upx; |
|||
text-align: center; |
|||
font-size: 28upx; |
|||
color: $font-color-base; |
|||
border-radius: 20px; |
|||
background: rgba(255, 255, 255, 0.6); |
|||
} |
|||
} |
|||
page { |
|||
.cate-section { |
|||
position: relative; |
|||
z-index: 5; |
|||
border-radius: 16upx 16upx 0 0; |
|||
margin-top: -20upx; |
|||
} |
|||
.carousel-section { |
|||
padding: 0; |
|||
.titleNview-placing { |
|||
padding-top: 0; |
|||
height: 0; |
|||
} |
|||
.carousel { |
|||
.carousel-item { |
|||
padding: 0; |
|||
} |
|||
} |
|||
.swiper-dots { |
|||
left: 45upx; |
|||
bottom: 40upx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
page { |
|||
background: #f5f5f5; |
|||
} |
|||
.m-t { |
|||
margin-top: 20upx; |
|||
} |
|||
/* 头部 轮播图 */ |
|||
.carousel-section { |
|||
position: relative; |
|||
padding-top: 10px; |
|||
|
|||
.titleNview-placing { |
|||
height: var(--status-bar-height); |
|||
padding-top: 44px; |
|||
box-sizing: content-box; |
|||
} |
|||
|
|||
.titleNview-background { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 426upx; |
|||
transition: 0.4s; |
|||
} |
|||
} |
|||
.carousel { |
|||
width: 100%; |
|||
height: 350upx; |
|||
|
|||
.carousel-item { |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 0 28upx; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 10upx; |
|||
} |
|||
} |
|||
.swiper-dots { |
|||
display: flex; |
|||
position: absolute; |
|||
left: 60upx; |
|||
bottom: 15upx; |
|||
width: 72upx; |
|||
height: 36upx; |
|||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk4MzlBNjE0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk4MzlBNjA0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0E3RUNERkE0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0E3RUNERkI0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Gh5BPAAACTUlEQVR42uzcQW7jQAwFUdN306l1uWwNww5kqdsmm6/2MwtVCp8CosQtP9vg/2+/gY+DRAMBgqnjIp2PaCxCLLldpPARRIiFj1yBbMV+cHZh9PURRLQNhY8kgWyL/WDtwujjI8hoE8rKLqb5CDJaRMJHokC6yKgSCR9JAukmokIknCQJpLOIrJFwMsBJELFcKHwM9BFkLBMKFxNcBCHlQ+FhoocgpVwwnv0Xn30QBJGMC0QcaBVJiAMiec/dcwKuL4j1QMsVCXFAJE4s4NQA3K/8Y6DzO4g40P7UcmIBJxbEesCKWBDg8wWxHrAiFgT4fEGsB/CwIhYE+AeBAAdPLOcV8HRmWRDAiQVcO7GcV8CLM8uCAE4sQCDAlHcQ7x+ABQEEAggEEAggEEAggEAAgQACASAQQCCAQACBAAIBBAIIBBAIIBBAIABe4e9iAe/xd7EAJxYgEGDeO4j3EODp/cOCAE4sYMyJ5cwCHs4rCwI4sYBxJ5YzC84rCwKcXxArAuthQYDzC2JF0H49LAhwYUGsCFqvx5EF2T07dMaJBetx4cRyaqFtHJ8EIhK0i8OJBQxcECuCVutxJhCRoE0cZwMRyRcFefa/ffZBVPogePihhyCnbBhcfMFFEFM+DD4m+ghSlgmDkwlOgpAl4+BkkJMgZdk4+EgaSCcpVX7bmY9kgXQQU+1TgE0c+QJZUUz1b2T4SBbIKmJW+3iMj2SBVBWz+leVfCQLpIqYbp8b85EskIxyfIOfK5Sf+wiCRJEsllQ+oqEkQfBxmD8BBgA5hVjXyrBNUQAAAABJRU5ErkJggg==); |
|||
background-size: 100% 100%; |
|||
|
|||
.num { |
|||
width: 36upx; |
|||
height: 36upx; |
|||
border-radius: 50px; |
|||
font-size: 24upx; |
|||
color: #fff; |
|||
text-align: center; |
|||
line-height: 36upx; |
|||
} |
|||
|
|||
.sign { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 50%; |
|||
line-height: 36upx; |
|||
font-size: 12upx; |
|||
color: #fff; |
|||
transform: translateX(-50%); |
|||
} |
|||
} |
|||
/* 分类 */ |
|||
.cate-section { |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
flex-wrap: wrap; |
|||
padding: 30upx 22upx; |
|||
background: #fff; |
|||
.cate-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
font-size: $font-sm + 2upx; |
|||
color: $font-color-dark; |
|||
} |
|||
/* 原图标颜色太深,不想改图了,所以加了透明度 */ |
|||
image { |
|||
width: 88upx; |
|||
height: 88upx; |
|||
margin-bottom: 14upx; |
|||
border-radius: 50%; |
|||
opacity: 0.7; |
|||
box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3); |
|||
} |
|||
} |
|||
.ad-1 { |
|||
width: 100%; |
|||
height: 210upx; |
|||
padding: 10upx 0; |
|||
background: #fff; |
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
/* 秒杀专区 */ |
|||
.seckill-section { |
|||
padding: 0upx 20upx 20upx; |
|||
background: #fff; |
|||
.s-header { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 90upx; |
|||
line-height: 1; |
|||
.s-img { |
|||
width: 140upx; |
|||
height: 30upx; |
|||
} |
|||
.tip { |
|||
font-size: $font-base; |
|||
color: $font-color-light; |
|||
// margin: 0 20upx 0 40upx; |
|||
} |
|||
.timer { |
|||
display: inline-block; |
|||
width: 40upx; |
|||
height: 36upx; |
|||
text-align: center; |
|||
line-height: 36upx; |
|||
margin-right: 14upx; |
|||
font-size: $font-sm + 2upx; |
|||
color: #fff; |
|||
border-radius: 2px; |
|||
background: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.icon-you { |
|||
font-size: $font-lg; |
|||
color: $font-color-light; |
|||
flex: 1; |
|||
text-align: right; |
|||
} |
|||
} |
|||
.floor-list { |
|||
white-space: nowrap; |
|||
} |
|||
.scoll-wrapper { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
} |
|||
.floor-item { |
|||
width: 150upx; |
|||
margin-right: 20upx; |
|||
font-size: $font-sm + 2upx; |
|||
color: $font-color-dark; |
|||
line-height: 1.8; |
|||
image { |
|||
width: 150upx; |
|||
height: 150upx; |
|||
border-radius: 6upx; |
|||
} |
|||
.price { |
|||
color: $uni-color-primary; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.f-header { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 140upx; |
|||
padding: 0upx 20upx; |
|||
background: #fff; |
|||
image { |
|||
flex-shrink: 0; |
|||
width: 80upx; |
|||
height: 80upx; |
|||
margin-right: 20upx; |
|||
} |
|||
.tit-box { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.tit { |
|||
font-size: $font-lg + 2upx; |
|||
color: #font-color-dark; |
|||
line-height: 1.3; |
|||
} |
|||
.tit2 { |
|||
font-size: $font-sm; |
|||
color: $font-color-light; |
|||
} |
|||
.icon-you { |
|||
font-size: $font-lg + 2upx; |
|||
color: $font-color-light; |
|||
} |
|||
} |
|||
/* 团购楼层 */ |
|||
.group-section { |
|||
background: #fff; |
|||
.g-swiper { |
|||
height: 650upx; |
|||
padding-bottom: 20upx; |
|||
} |
|||
.g-swiper-item { |
|||
width: 100%; |
|||
padding: 0 20upx; |
|||
display: flex; |
|||
} |
|||
image { |
|||
width: 100%; |
|||
height: 460upx; |
|||
border-radius: 4px; |
|||
} |
|||
.g-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow: hidden; |
|||
} |
|||
.left { |
|||
flex: 1.2; |
|||
// margin-right: 24upx; |
|||
.t-box { |
|||
padding-top: 20upx; |
|||
} |
|||
} |
|||
.right { |
|||
flex: 0.8; |
|||
flex-direction: column-reverse; |
|||
.t-box { |
|||
padding-bottom: 20upx; |
|||
} |
|||
} |
|||
.t-box { |
|||
height: 160upx; |
|||
font-size: $font-base + 2upx; |
|||
color: $font-color-dark; |
|||
line-height: 1.6; |
|||
} |
|||
.price { |
|||
color: $uni-color-primary; |
|||
} |
|||
.m-price { |
|||
font-size: $font-sm + 2upx; |
|||
text-decoration: line-through; |
|||
color: $font-color-light; |
|||
margin-left: 8upx; |
|||
} |
|||
.pro-box { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 10upx; |
|||
font-size: $font-sm; |
|||
color: $font-base; |
|||
padding-right: 10upx; |
|||
} |
|||
.progress-box { |
|||
flex: 1; |
|||
border-radius: 10px; |
|||
overflow: hidden; |
|||
margin-right: 8upx; |
|||
} |
|||
} |
|||
/* 分类推荐楼层 */ |
|||
.hot-floor { |
|||
width: 100%; |
|||
overflow: hidden; |
|||
margin-bottom: 20upx; |
|||
.floor-img-box { |
|||
width: 100%; |
|||
height: 320upx; |
|||
position: relative; |
|||
&:after { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: linear-gradient(rgba(255, 255, 255, 0.06) 30%, #f8f8f8); |
|||
} |
|||
} |
|||
.floor-img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.floor-list { |
|||
white-space: nowrap; |
|||
padding: 20upx; |
|||
padding-right: 50upx; |
|||
border-radius: 6upx; |
|||
margin-top: -140upx; |
|||
margin-left: 30upx; |
|||
background: #fff; |
|||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
.scoll-wrapper { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
} |
|||
.floor-item { |
|||
width: 180upx; |
|||
margin-right: 20upx; |
|||
font-size: $font-sm + 2upx; |
|||
color: $font-color-dark; |
|||
line-height: 1.8; |
|||
image { |
|||
width: 180upx; |
|||
height: 180upx; |
|||
border-radius: 6upx; |
|||
} |
|||
.price { |
|||
color: $uni-color-primary; |
|||
} |
|||
} |
|||
.more { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
flex-shrink: 0; |
|||
width: 180upx; |
|||
height: 180upx; |
|||
border-radius: 6upx; |
|||
background: #f3f3f3; |
|||
font-size: $font-base; |
|||
color: $font-color-light; |
|||
text:first-child { |
|||
margin-bottom: 4upx; |
|||
} |
|||
} |
|||
} |
|||
/* 单条商品 */ |
|||
.goods-box-single { |
|||
display: flex; |
|||
padding: 20upx 0; |
|||
.goods-img { |
|||
display: block; |
|||
width: 120upx; |
|||
height: 120upx; |
|||
} |
|||
.right { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding: 0 30upx 0 24upx; |
|||
overflow: hidden; |
|||
.title { |
|||
font-size: $font-base + 2upx; |
|||
color: $font-color-dark; |
|||
line-height: 1; |
|||
} |
|||
.attr-box { |
|||
font-size: $font-sm + 2upx; |
|||
color: $font-color-light; |
|||
padding: 10upx 12upx; |
|||
} |
|||
.price { |
|||
font-size: $font-base + 2upx; |
|||
color: $font-color-dark; |
|||
&:before { |
|||
content: '￥'; |
|||
font-size: $font-sm; |
|||
margin: 0 2upx 0 8upx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.price-box { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
align-items: baseline; |
|||
padding: 20upx 30upx; |
|||
font-size: $font-sm + 2upx; |
|||
color: $font-color-light; |
|||
.num { |
|||
margin: 0 8upx; |
|||
color: $font-color-dark; |
|||
} |
|||
.price { |
|||
font-size: $font-lg; |
|||
color: $font-color-dark; |
|||
&:before { |
|||
content: '￥'; |
|||
font-size: $font-sm; |
|||
margin: 0 2upx 0 8upx; |
|||
} |
|||
} |
|||
} |
|||
.action-box { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
height: 100upx; |
|||
position: relative; |
|||
padding-right: 30upx; |
|||
} |
|||
.action-btn { |
|||
width: 160upx; |
|||
height: 60upx; |
|||
margin: 0; |
|||
margin-left: 24upx; |
|||
padding: 0; |
|||
text-align: center; |
|||
line-height: 60upx; |
|||
font-size: $font-sm + 2upx; |
|||
color: $font-color-dark; |
|||
background: #fff; |
|||
border-radius: 100px; |
|||
&:after { |
|||
border-radius: 100px; |
|||
} |
|||
&.recom { |
|||
background: #fff9f9; |
|||
color: $base-color; |
|||
&:after { |
|||
border-color: #f7bcc8; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
/* 猜你喜欢 */ |
|||
.guess-section { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding: 0 30upx; |
|||
background: #fff; |
|||
.guess-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 48%; |
|||
padding-bottom: 40upx; |
|||
&:nth-child(2n + 1) { |
|||
margin-right: 4%; |
|||
} |
|||
} |
|||
.image-wrapper { |
|||
width: 100%; |
|||
height: 330upx; |
|||
border-radius: 3px; |
|||
overflow: hidden; |
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
opacity: 1; |
|||
} |
|||
} |
|||
.title { |
|||
font-size: $font-lg; |
|||
color: $font-color-dark; |
|||
line-height: 80upx; |
|||
} |
|||
.price { |
|||
font-size: $font-lg; |
|||
color: $uni-color-primary; |
|||
line-height: 1; |
|||
} |
|||
.coupon_box { |
|||
width:100%; height:auto; display:table; padding:6upx 26upx 26upx 26upx; |
|||
} |
|||
|
|||
.other_type { |
|||
width:100%; height:90upx; padding-top:50upx; |
|||
|
|||
.text { width:100%; border-top:1px solid #eeeeee; display:block; text-align:center; position:relative; } |
|||
.text span { width:180upx; height:40upx; line-height:40upx; color:#999999; display:block; background:#ffffff; position:absolute; left:50%; top:50%; margin-left:-90upx; margin-top:-20upx; font-size:$font-base; } |
|||
} |
|||
} |
|||
.getPosition{ |
|||
height: 100upx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 32upx; |
|||
background-color: #FFF; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,207 @@ |
|||
<template> |
|||
<view class="imgwindow"> |
|||
<view class="imgwindow-list" v-if="jdata.id == '3' " |
|||
v-bind:class="'row'+jdata.id" :style="{margin:-jdata.id+'px'}"> |
|||
<image v-for="(item, index) in jdata.options.colorGroup" :key="index" :src="item.adImg" mode="widthFix" @click="showSliderInfo(item.linkType, item.linkValue)"></image> |
|||
</view> |
|||
<view class="imgwindow-list" v-if="jdata.id == '4'" v-bind:class="'row'+jdata.id" :style="{margin:-jdata.id+'px'}"> |
|||
<view class="imgwindow-item" ref="imgwitem" :style="{height:height+'px',padding:jdata.id+'px'}" v-for="(item, index) in jdata.options.colorGroup" |
|||
:key="index" v-if="index == 0"> |
|||
<image :src="item.adImg" mode="aspectFill" @click="showSliderInfo(item.linkType, item.linkValue)"></image> |
|||
</view> |
|||
<view class="imgwindow-item" ref="imgwitem" :style="{height:height1+'px',padding:jdata.id+'px'}" v-for="(item, index) in jdata.options.colorGroup" |
|||
:key="index" v-if="index !== 0"> |
|||
<image :src="item.adImg" mode="aspectFill" @click="showSliderInfo(item.linkType, item.linkValue)"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "jshopimgwindow", |
|||
props: { |
|||
jdata: { |
|||
// type: Object, |
|||
required: true, |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
height: '', |
|||
height1: '', |
|||
padding: '3' |
|||
} |
|||
}, |
|||
mounted() { |
|||
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE |
|||
var view = uni.createSelectorQuery().in(this).select(".imgwindow-item"); |
|||
view.boundingClientRect(data => { |
|||
this.height = 50; |
|||
// 橱窗小图高度 |
|||
this.height1 = 50 / 2; |
|||
}).exec(); |
|||
// #endif |
|||
|
|||
// #ifdef MP-ALIPAY |
|||
var view = uni.createSelectorQuery().in(this).select(".content").boundingClientRect().exec(data => { |
|||
this.height1 = data[0].width / 4; |
|||
if (this.data.params.style == '3') { |
|||
this.height = data[0].width / 3; |
|||
} else if (this.data.params.style == '2') { |
|||
this.height = data[0].width / 2; |
|||
} else if (this.data.params.style == '4') { |
|||
this.height = data[0].width / 4; |
|||
} else if (this.data.params.style == '0') { |
|||
this.height = data[0].width / 2; |
|||
} |
|||
}); |
|||
// #endif |
|||
|
|||
// #ifdef MP-WEIXIN |
|||
|
|||
var view = uni.createSelectorQuery().select(".content"); |
|||
|
|||
view.boundingClientRect(jdata => { |
|||
|
|||
this.height1 = jdata.width / 4; |
|||
if (this.jdata.params.style == '3') { |
|||
this.height = jdata.width / 3; |
|||
} else if (this.jdata.params.style == '2') { |
|||
this.height = jdata.width / 2; |
|||
} else if (this.jdata.params.style == '4') { |
|||
this.height = jdata.width / 4; |
|||
} else if (this.jdata.params.style == '0') { |
|||
this.height = jdata.width / 2; |
|||
} |
|||
}).exec(); |
|||
// #endif |
|||
}, |
|||
methods: { |
|||
showSliderInfo(type, val) { |
|||
if (!val) { |
|||
return; |
|||
} |
|||
if (type == 1) { |
|||
if (val.indexOf('http') != -1) { |
|||
// #ifdef H5 |
|||
window.location.href = val |
|||
// #endif |
|||
} else { |
|||
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP |
|||
if (val == '/pages/index/index' || val == '/pages/classify/classify' || val == '/pages/cart/index/index' || val == |
|||
'/pages/member/index/index') { |
|||
uni.switchTab({ |
|||
url: val |
|||
}); |
|||
return; |
|||
} else if(val.indexOf('/pages/coupon/coupon')>-1){ |
|||
var id = val.replace('/pages/coupon/coupon?id=',""); |
|||
this.receiveCoupon(id) |
|||
} else { |
|||
this.$common.navigateTo(val); |
|||
return; |
|||
} |
|||
// #endif |
|||
} |
|||
} else if (type == 2) { |
|||
// 商品详情 |
|||
this.goodsDetail(val) |
|||
} else if (type == 3) { |
|||
// 文章详情 |
|||
this.$common.navigateTo('/pages/article/index?id=' + val + '&id_type=1') |
|||
} else if (type == 4) { |
|||
// 文章列表 |
|||
this.$common.navigateTo('/pages/article/list?cid=' + val) |
|||
} else if (type == 5) { |
|||
//智能表单 |
|||
this.$common.navigateTo('/pages/form/detail/form?id=' + val) |
|||
} |
|||
}, |
|||
//跳转到商品详情页面 |
|||
goodsDetail: function(id) { |
|||
let url = '/pages/goods/index/index?id=' + id; |
|||
this.$common.navigateTo(url); |
|||
}, |
|||
// 用户领取优惠券 |
|||
receiveCoupon(couponId) { |
|||
let data = { |
|||
promotion_id: couponId |
|||
} |
|||
this.$api.getCoupon(data, res => { |
|||
if (res.status) { |
|||
this.$common.successToShow(res.msg) |
|||
} else { |
|||
this.$common.errorToShow(res.msg) |
|||
} |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.imgwindow { |
|||
width: 100%; |
|||
} |
|||
|
|||
.imgwindow-list { |
|||
/* overflow: hidden; */ |
|||
/* margin: -16upx; */ |
|||
display: flex; |
|||
} |
|||
|
|||
/* 堆积两列 */ |
|||
.imgwindow-list .imgwindow-item { |
|||
height: auto; |
|||
flex: 1; |
|||
/* float: left; */ |
|||
/* padding: 8upx; */ |
|||
} |
|||
|
|||
.imgwindow-list .imgwindow-item image { |
|||
width: 100%; |
|||
/* height: 100%; */ |
|||
} |
|||
|
|||
.imgwindow-list.row0{ |
|||
overflow: hidden; |
|||
display: block; |
|||
} |
|||
.imgwindow-list.row0 .imgwindow-item { |
|||
height: auto; |
|||
flex: auto; |
|||
float: left; |
|||
/* padding: 8upx; */ |
|||
} |
|||
.imgwindow-list.row0 .imgwindow-item image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.imgwindow-list.row0 .imgwindow-item:first-child { |
|||
width: 50%; |
|||
} |
|||
|
|||
.imgwindow-list.row0 .imgwindow-item:nth-child(2) { |
|||
width: 50%; |
|||
} |
|||
|
|||
.imgwindow-list.row0 .imgwindow-item:nth-child(3), |
|||
.imgwindow-list.row0 .imgwindow-item:nth-child(4) { |
|||
width: 25%; |
|||
|
|||
} |
|||
|
|||
/* .imgwindow-list.row2 .imgwindow-item { |
|||
width: 50%; |
|||
} |
|||
|
|||
.imgwindow-list.row3 .imgwindow-item { |
|||
width: 33.3%; |
|||
} |
|||
|
|||
.imgwindow-list.row4 .imgwindow-item { |
|||
width: 25%; |
|||
} */ |
|||
</style> |
|||
@ -0,0 +1,616 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<view class="cate-section"> |
|||
<view class="cate-item" v-for="(item, index) in jdata.options.colorGroup" @click="navToTabPage(item.tabContent[0].tabLink)"> |
|||
<image :src="item.tabContent[0].tabImg"></image> |
|||
<text>{{item.tabs}}</text> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "jshopnavbar", |
|||
props: { |
|||
jdata: { |
|||
// type: Object, |
|||
required: true, |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
height: '', |
|||
height1: '' |
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
methods: { |
|||
showSliderInfo(type, val) { |
|||
console.log(val) |
|||
if (!val) { |
|||
return; |
|||
} |
|||
console.log("11") |
|||
if (type == 1) { |
|||
if (val.indexOf('http') != -1) { |
|||
// #ifdef H5 |
|||
window.location.href = val |
|||
// #endif |
|||
} else { |
|||
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP |
|||
if (val == '/pages/index/index' || val == '/pages/classify/classify' || val == '/pages/cart/index/index' || val == '/pages/member/index/index') { |
|||
uni.switchTab({ |
|||
url: val |
|||
}); |
|||
return; |
|||
} else { |
|||
this.$common.navigateTo(val); |
|||
return; |
|||
} |
|||
// #endif |
|||
} |
|||
} else if (type == 2) { |
|||
// 商品详情 |
|||
this.goodsDetail(val) |
|||
} else if (type == 3) { |
|||
// 文章详情 |
|||
this.$common.navigateTo('/pages/article/index?id=' + val + '&id_type=1') |
|||
} else if (type == 4) { |
|||
// console.log("11") |
|||
// 文章列表 |
|||
this.$common.navigateTo('/pages/article/list?cid=' + val) |
|||
} else if (type == 5) { |
|||
//智能表单 |
|||
this.$common.navigateTo('/pages/form/detail/form?id=' + val) |
|||
} |
|||
}, |
|||
//跳转到商品详情页面 |
|||
goodsDetail: function(id) { |
|||
let url = '/pages/goods/index/index?id=' + id; |
|||
this.$common.navigateTo(url); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.MP-search{ |
|||
background: #FFFFFF;height: 80upx;display: flex;justify-content: center;align-items: center;position: fixed;width: 100%;z-index: 999; |
|||
} |
|||
.MP-search-input{ |
|||
font-size: 28upx;background: #F5F5F5;height: 60upx;width: 90%;border-radius: 50upx;text-align: center; |
|||
} |
|||
.mp-search-box { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 30upx; |
|||
z-index: 9999; |
|||
width: 100%; |
|||
padding: 0 80upx; |
|||
.ser-input { |
|||
flex: 1; |
|||
height: 60upx; |
|||
line-height: 60upx; |
|||
text-align: center; |
|||
font-size: 28upx; |
|||
color: $font-color-base; |
|||
border-radius: 20px; |
|||
background: rgba(255, 255, 255, 0.6); |
|||
} |
|||
} |
|||
page { |
|||
.cate-section { |
|||
position: relative; |
|||
z-index: 5; |
|||
border-radius: 16upx 16upx 0 0; |
|||
margin-top: -20upx; |
|||
} |
|||
.carousel-section { |
|||
padding: 0; |
|||
.titleNview-placing { |
|||
padding-top: 0; |
|||
height: 0; |
|||
} |
|||
.carousel { |
|||
.carousel-item { |
|||
padding: 0; |
|||
} |
|||
} |
|||
.swiper-dots { |
|||
left: 45upx; |
|||
bottom: 40upx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
page { |
|||
background: #f5f5f5; |
|||
} |
|||
.m-t { |
|||
margin-top: 20upx; |
|||
} |
|||
/* 头部 轮播图 */ |
|||
.carousel-section { |
|||
position: relative; |
|||
padding-top: 10px; |
|||
|
|||
.titleNview-placing { |
|||
height: var(--status-bar-height); |
|||
padding-top: 44px; |
|||
box-sizing: content-box; |
|||
} |
|||
|
|||
.titleNview-background { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 426upx; |
|||
transition: 0.4s; |
|||
} |
|||
} |
|||
.carousel { |
|||
width: 100%; |
|||
height: 350upx; |
|||
|
|||
.carousel-item { |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 0 28upx; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 10upx; |
|||
} |
|||
} |
|||
.swiper-dots { |
|||
display: flex; |
|||
position: absolute; |
|||
left: 60upx; |
|||
bottom: 15upx; |
|||
width: 72upx; |
|||
height: 36upx; |
|||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk4MzlBNjE0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk4MzlBNjA0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0E3RUNERkE0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0E3RUNERkI0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Gh5BPAAACTUlEQVR42uzcQW7jQAwFUdN306l1uWwNww5kqdsmm6/2MwtVCp8CosQtP9vg/2+/gY+DRAMBgqnjIp2PaCxCLLldpPARRIiFj1yBbMV+cHZh9PURRLQNhY8kgWyL/WDtwujjI8hoE8rKLqb5CDJaRMJHokC6yKgSCR9JAukmokIknCQJpLOIrJFwMsBJELFcKHwM9BFkLBMKFxNcBCHlQ+FhoocgpVwwnv0Xn30QBJGMC0QcaBVJiAMiec/dcwKuL4j1QMsVCXFAJE4s4NQA3K/8Y6DzO4g40P7UcmIBJxbEesCKWBDg8wWxHrAiFgT4fEGsB/CwIhYE+AeBAAdPLOcV8HRmWRDAiQVcO7GcV8CLM8uCAE4sQCDAlHcQ7x+ABQEEAggEEAggEEAggEAAgQACASAQQCCAQACBAAIBBAIIBBAIIBBAIABe4e9iAe/xd7EAJxYgEGDeO4j3EODp/cOCAE4sYMyJ5cwCHs4rCwI4sYBxJ5YzC84rCwKcXxArAuthQYDzC2JF0H49LAhwYUGsCFqvx5EF2T07dMaJBetx4cRyaqFtHJ8EIhK0i8OJBQxcECuCVutxJhCRoE0cZwMRyRcFefa/ffZBVPogePihhyCnbBhcfMFFEFM+DD4m+ghSlgmDkwlOgpAl4+BkkJMgZdk4+EgaSCcpVX7bmY9kgXQQU+1TgE0c+QJZUUz1b2T4SBbIKmJW+3iMj2SBVBWz+leVfCQLpIqYbp8b85EskIxyfIOfK5Sf+wiCRJEsllQ+oqEkQfBxmD8BBgA5hVjXyrBNUQAAAABJRU5ErkJggg==); |
|||
background-size: 100% 100%; |
|||
|
|||
.num { |
|||
width: 36upx; |
|||
height: 36upx; |
|||
border-radius: 50px; |
|||
font-size: 24upx; |
|||
color: #fff; |
|||
text-align: center; |
|||
line-height: 36upx; |
|||
} |
|||
|
|||
.sign { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 50%; |
|||
line-height: 36upx; |
|||
font-size: 12upx; |
|||
color: #fff; |
|||
transform: translateX(-50%); |
|||
} |
|||
} |
|||
/* 分类 */ |
|||
.cate-section { |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
flex-wrap: wrap; |
|||
padding: 30upx 22upx; |
|||
background: #fff; |
|||
.cate-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
font-size: $font-sm + 2upx; |
|||
color: $font-color-dark; |
|||
} |
|||
/* 原图标颜色太深,不想改图了,所以加了透明度 */ |
|||
image { |
|||
width: 88upx; |
|||
height: 88upx; |
|||
margin-bottom: 14upx; |
|||
border-radius: 50%; |
|||
opacity: 0.7; |
|||
box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3); |
|||
} |
|||
} |
|||
.ad-1 { |
|||
width: 100%; |
|||
height: 210upx; |
|||
padding: 10upx 0; |
|||
background: #fff; |
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
/* 秒杀专区 */ |
|||
.seckill-section { |
|||
padding: 0upx 20upx 20upx; |
|||
background: #fff; |
|||
.s-header { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 90upx; |
|||
line-height: 1; |
|||
.s-img { |
|||
width: 140upx; |
|||
height: 30upx; |
|||
} |
|||
.tip { |
|||
font-size: $font-base; |
|||
color: $font-color-light; |
|||
// margin: 0 20upx 0 40upx; |
|||
} |
|||
.timer { |
|||
display: inline-block; |
|||
width: 40upx; |
|||
height: 36upx; |
|||
text-align: center; |
|||
line-height: 36upx; |
|||
margin-right: 14upx; |
|||
font-size: $font-sm + 2upx; |
|||
color: #fff; |
|||
border-radius: 2px; |
|||
background: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.icon-you { |
|||
font-size: $font-lg; |
|||
color: $font-color-light; |
|||
flex: 1; |
|||
text-align: right; |
|||
} |
|||
} |
|||
.floor-list { |
|||
white-space: nowrap; |
|||
} |
|||
.scoll-wrapper { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
} |
|||
.floor-item { |
|||
width: 150upx; |
|||
margin-right: 20upx; |
|||
font-size: $font-sm + 2upx; |
|||
color: $font-color-dark; |
|||
line-height: 1.8; |
|||
image { |
|||
width: 150upx; |
|||
height: 150upx; |
|||
border-radius: 6upx; |
|||
} |
|||
.price { |
|||
color: $uni-color-primary; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.f-header { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 140upx; |
|||
padding: 0upx 20upx; |
|||
background: #fff; |
|||
image { |
|||
flex-shrink: 0; |
|||
width: 80upx; |
|||
height: 80upx; |
|||
margin-right: 20upx; |
|||
} |
|||
.tit-box { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.tit { |
|||
font-size: $font-lg + 2upx; |
|||
color: #font-color-dark; |
|||
line-height: 1.3; |
|||
} |
|||
.tit2 { |
|||
font-size: $font-sm; |
|||
color: $font-color-light; |
|||
} |
|||
.icon-you { |
|||
font-size: $font-lg + 2upx; |
|||
color: $font-color-light; |
|||
} |
|||
} |
|||
/* 团购楼层 */ |
|||
.group-section { |
|||
background: #fff; |
|||
.g-swiper { |
|||
height: 650upx; |
|||
padding-bottom: 20upx; |
|||
} |
|||
.g-swiper-item { |
|||
width: 100%; |
|||
padding: 0 20upx; |
|||
display: flex; |
|||
} |
|||
image { |
|||
width: 100%; |
|||
height: 460upx; |
|||
border-radius: 4px; |
|||
} |
|||
.g-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow: hidden; |
|||
} |
|||
.left { |
|||
flex: 1.2; |
|||
// margin-right: 24upx; |
|||
.t-box { |
|||
padding-top: 20upx; |
|||
} |
|||
} |
|||
.right { |
|||
flex: 0.8; |
|||
flex-direction: column-reverse; |
|||
.t-box { |
|||
padding-bottom: 20upx; |
|||
} |
|||
} |
|||
.t-box { |
|||
height: 160upx; |
|||
font-size: $font-base + 2upx; |
|||
color: $font-color-dark; |
|||
line-height: 1.6; |
|||
} |
|||
.price { |
|||
color: $uni-color-primary; |
|||
} |
|||
.m-price { |
|||
font-size: $font-sm + 2upx; |
|||
text-decoration: line-through; |
|||
color: $font-color-light; |
|||
margin-left: 8upx; |
|||
} |
|||
.pro-box { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 10upx; |
|||
font-size: $font-sm; |
|||
color: $font-base; |
|||
padding-right: 10upx; |
|||
} |
|||
.progress-box { |
|||
flex: 1; |
|||
border-radius: 10px; |
|||
overflow: hidden; |
|||
margin-right: 8upx; |
|||
} |
|||
} |
|||
/* 分类推荐楼层 */ |
|||
.hot-floor { |
|||
width: 100%; |
|||
overflow: hidden; |
|||
margin-bottom: 20upx; |
|||
.floor-img-box { |
|||
width: 100%; |
|||
height: 320upx; |
|||
position: relative; |
|||
&:after { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: linear-gradient(rgba(255, 255, 255, 0.06) 30%, #f8f8f8); |
|||
} |
|||
} |
|||
.floor-img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.floor-list { |
|||
white-space: nowrap; |
|||
padding: 20upx; |
|||
padding-right: 50upx; |
|||
border-radius: 6upx; |
|||
margin-top: -140upx; |
|||
margin-left: 30upx; |
|||
background: #fff; |
|||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
.scoll-wrapper { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
} |
|||
.floor-item { |
|||
width: 180upx; |
|||
margin-right: 20upx; |
|||
font-size: $font-sm + 2upx; |
|||
color: $font-color-dark; |
|||
line-height: 1.8; |
|||
image { |
|||
width: 180upx; |
|||
height: 180upx; |
|||
border-radius: 6upx; |
|||
} |
|||
.price { |
|||
color: $uni-color-primary; |
|||
} |
|||
} |
|||
.more { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
flex-shrink: 0; |
|||
width: 180upx; |
|||
height: 180upx; |
|||
border-radius: 6upx; |
|||
background: #f3f3f3; |
|||
font-size: $font-base; |
|||
color: $font-color-light; |
|||
text:first-child { |
|||
margin-bottom: 4upx; |
|||
} |
|||
} |
|||
} |
|||
/* 单条商品 */ |
|||
.goods-box-single { |
|||
display: flex; |
|||
padding: 20upx 0; |
|||
.goods-img { |
|||
display: block; |
|||
width: 120upx; |
|||
height: 120upx; |
|||
} |
|||
.right { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding: 0 30upx 0 24upx; |
|||
overflow: hidden; |
|||
.title { |
|||
font-size: $font-base + 2upx; |
|||
color: $font-color-dark; |
|||
line-height: 1; |
|||
} |
|||
.attr-box { |
|||
font-size: $font-sm + 2upx; |
|||
color: $font-color-light; |
|||
padding: 10upx 12upx; |
|||
} |
|||
.price { |
|||
font-size: $font-base + 2upx; |
|||
color: $font-color-dark; |
|||
&:before { |
|||
content: '￥'; |
|||
font-size: $font-sm; |
|||
margin: 0 2upx 0 8upx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.price-box { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
align-items: baseline; |
|||
padding: 20upx 30upx; |
|||
font-size: $font-sm + 2upx; |
|||
color: $font-color-light; |
|||
.num { |
|||
margin: 0 8upx; |
|||
color: $font-color-dark; |
|||
} |
|||
.price { |
|||
font-size: $font-lg; |
|||
color: $font-color-dark; |
|||
&:before { |
|||
content: '￥'; |
|||
font-size: $font-sm; |
|||
margin: 0 2upx 0 8upx; |
|||
} |
|||
} |
|||
} |
|||
.action-box { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
height: 100upx; |
|||
position: relative; |
|||
padding-right: 30upx; |
|||
} |
|||
.action-btn { |
|||
width: 160upx; |
|||
height: 60upx; |
|||
margin: 0; |
|||
margin-left: 24upx; |
|||
padding: 0; |
|||
text-align: center; |
|||
line-height: 60upx; |
|||
font-size: $font-sm + 2upx; |
|||
color: $font-color-dark; |
|||
background: #fff; |
|||
border-radius: 100px; |
|||
&:after { |
|||
border-radius: 100px; |
|||
} |
|||
&.recom { |
|||
background: #fff9f9; |
|||
color: $base-color; |
|||
&:after { |
|||
border-color: #f7bcc8; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
/* 猜你喜欢 */ |
|||
.guess-section { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding: 0 30upx; |
|||
background: #fff; |
|||
.guess-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 48%; |
|||
padding-bottom: 40upx; |
|||
&:nth-child(2n + 1) { |
|||
margin-right: 4%; |
|||
} |
|||
} |
|||
.image-wrapper { |
|||
width: 100%; |
|||
height: 330upx; |
|||
border-radius: 3px; |
|||
overflow: hidden; |
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
opacity: 1; |
|||
} |
|||
} |
|||
.title { |
|||
font-size: $font-lg; |
|||
color: $font-color-dark; |
|||
line-height: 80upx; |
|||
} |
|||
.price { |
|||
font-size: $font-lg; |
|||
color: $uni-color-primary; |
|||
line-height: 1; |
|||
} |
|||
.coupon_box { |
|||
width:100%; height:auto; display:table; padding:6upx 26upx 26upx 26upx; |
|||
} |
|||
|
|||
.other_type { |
|||
width:100%; height:90upx; padding-top:50upx; |
|||
|
|||
.text { width:100%; border-top:1px solid #eeeeee; display:block; text-align:center; position:relative; } |
|||
.text span { width:180upx; height:40upx; line-height:40upx; color:#999999; display:block; background:#ffffff; position:absolute; left:50%; top:50%; margin-left:-90upx; margin-top:-20upx; font-size:$font-base; } |
|||
} |
|||
} |
|||
.getPosition{ |
|||
height: 100upx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 32upx; |
|||
background-color: #FFF; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,69 @@ |
|||
<template> |
|||
<view class="notice bottom-cell-group" v-if="jdata.options.colorGroup && count"> |
|||
<view class="notice-icon"> |
|||
<image class="icon news-icon" src="/static/image/news.png" mode=""></image> |
|||
</view> |
|||
<swiper class="notice-c" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :vertical="true" :circular="true"> |
|||
<swiper-item v-for="item in jdata.options.colorGroup" :key="item.id"> |
|||
<view class="swiper-item" @click="goNotice(item.id)">{{ item.title }}</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "jshopnotice", |
|||
props: { |
|||
jdata:{ |
|||
// type: Object, |
|||
required: true, |
|||
} |
|||
}, |
|||
computed: { |
|||
count() { |
|||
return (this.jdata.options.colorGroup.length > 0) |
|||
} |
|||
}, |
|||
methods: { |
|||
// 点击公告 |
|||
goNotice(id) { |
|||
// 文章详情 |
|||
this.$common.navigateTo('/pages/article/index?id=' + id+'&id_type=2') |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.notice { |
|||
padding: 6upx 26upx 6upx 60upx; |
|||
position: relative; |
|||
overflow: hidden; |
|||
background-color: #fff; |
|||
color: #333; |
|||
} |
|||
.notice-icon { |
|||
display: inline-block; |
|||
height: 40upx; |
|||
position: absolute; |
|||
top: 59%; |
|||
left: 26upx; |
|||
transform: translateY(-50%); |
|||
overflow: hidden; |
|||
} |
|||
.news-icon { |
|||
width: 30upx; |
|||
height: 30upx; |
|||
float: left; |
|||
} |
|||
.notice-c { |
|||
margin-left: 10upx; |
|||
height: 50upx; |
|||
line-height: 50upx; |
|||
width: 630upx; |
|||
display: inline-block; |
|||
font-size: 28upx; |
|||
float: left; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,150 @@ |
|||
<template> |
|||
<view class="index-goods"> |
|||
|
|||
|
|||
<!-- 列表平铺单列 --> |
|||
<view class="img-list bottom-cell-group" > |
|||
<view class='cell-item right-img' v-if="jdata.name != ''"> |
|||
<view class='cell-item-hd'> |
|||
<view class='cell-hd-title'>{{jdata.name}}</view> |
|||
</view> |
|||
<view class='cell-item-bd'> |
|||
</view> |
|||
<view class='cell-item-ft' > |
|||
<text class='cell-ft-text' @click="goodsList({cat_id: jdata.params.classifyId,brand_id:jdata.params.brandId})">查看更多</text> |
|||
<image class='cell-ft-next icon' src='/static/image/right.png'></image> |
|||
</view> |
|||
</view> |
|||
<view v-if="count"> |
|||
<view class="img-list-item" v-for="(item, index) in jdata.options.colorGroup" :key="index" @click="goodsDetail(item.id)"> |
|||
<image class="img-list-item-l have-none" :src="item.pic" mode='aspectFill'></image> |
|||
<view class="img-list-item-r"> |
|||
<view class="goods-name list-goods-name"> |
|||
{{item.title}} |
|||
</view> |
|||
<view class="goods-item-c"> |
|||
<view class="goods-price red-price">￥{{item.price}}</view> |
|||
<view class="goods-buy"> |
|||
<view class="goods-salesvolume" v-if="item.comments_count > 0">{{item.comments_count}}条评论</view> |
|||
<view class="goods-salesvolume" v-else-if="item.comments_count <= 0">暂无评论</view> |
|||
<image class="goods-cart" src="/static/image/ic-car.png"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="order-none" v-else> |
|||
<image class="order-none-img" src="/static/image/order.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {goods} from '@/config/mixins.js' |
|||
export default { |
|||
filters:{ |
|||
substr(val) { |
|||
if (val.length == 0 || val == undefined) { |
|||
return false; |
|||
} else if (val.length > 13) { |
|||
return val.substring(0, 13) + "..."; |
|||
} else { |
|||
return val; |
|||
} |
|||
} |
|||
}, |
|||
mixins: [goods], |
|||
name: "jshoponegoods", |
|||
props: { |
|||
jdata:{ |
|||
// type: Array, |
|||
required: true, |
|||
} |
|||
}, |
|||
computed: { |
|||
count() { |
|||
return (this.jdata.options.colorGroup.length > 0) |
|||
} |
|||
}, |
|||
methods: { |
|||
//跳转到商品详情页面 |
|||
goodsDetail: function(id) { |
|||
let url = '/pages/goods/index/index?id=' + id; |
|||
this.$common.navigateTo(url); |
|||
}, |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.cell-item { |
|||
border: none; |
|||
/* padding-bottom: 0; */ |
|||
} |
|||
.cell-ft-text { |
|||
font-size: 22upx; |
|||
color: #999; |
|||
} |
|||
.img-grids,.img-list{ |
|||
/* margin-top: 20upx; */ |
|||
background-color: #fff; |
|||
} |
|||
.img-grids-item{ |
|||
display: inline-table; |
|||
margin-top: 0; |
|||
margin-bottom: 14upx; |
|||
} |
|||
.column3 .img-grids-item{ |
|||
width: 230upx; |
|||
height: 364rpx !important; |
|||
margin: 15upx; |
|||
margin-right: 0; |
|||
margin-top: 0; |
|||
margin-bottom: 6upx; |
|||
} |
|||
.column3 .img-grids-item:nth-child(3n){ |
|||
margin-right: 15upx; |
|||
} |
|||
.column3 .img-grids-item-t{ |
|||
width: 230upx; |
|||
height: 230upx; |
|||
} |
|||
.column3 .grids-goods-name{ |
|||
font-size: 24upx; |
|||
/* height: 68upx; */ |
|||
/* min-height: 54rpx; */ |
|||
} |
|||
.column3 .img-grids-item-b{ |
|||
padding: 0 8upx 8upx; |
|||
} |
|||
.column3 .goods-price{ |
|||
font-size: 26upx; |
|||
} |
|||
.slide3 .img-grids-item{ |
|||
width: 200upx; |
|||
} |
|||
.slide3 .img-grids-item-t{ |
|||
width: 200upx; |
|||
height: 200upx; |
|||
} |
|||
.slide3 .grids-goods-name{ |
|||
font-size: 24rpx; |
|||
height: 66rpx; |
|||
} |
|||
.index-goods .img-grids-item{ |
|||
display: inline-block; |
|||
margin-top: 0; |
|||
} |
|||
.index-goods .img-list-item{ |
|||
padding: 0upx 26upx; |
|||
margin-bottom: 14upx; |
|||
} |
|||
.index-goods .img-list{ |
|||
padding-bottom: 10upx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,83 @@ |
|||
<template> |
|||
<!-- 拼团 --> |
|||
<view class="img-list bottom-cell-group group-buying" v-if="jdata.options.colorGroup && count"> |
|||
<view class='cell-item right-img'> |
|||
<view class='cell-item-hd group-title'> |
|||
{{jdata.params.title}} |
|||
</view> |
|||
</view> |
|||
<view class='swiper-grids' > |
|||
<scroll-view class='swiper-list' scroll-x="true"> |
|||
<view class="img-list-item" v-if="item.goods_id !== 'undefined' && item.goods_id" v-for="(item, key) in jdata.options.colorGroup" :key="key"> |
|||
<image class="img-list-item-l medium-img have-none" :src="item.goods_image" mode='aspectFill' @click="pintuanDetail(item.goods_id)"></image> |
|||
<view class="img-list-item-r medium-right"> |
|||
<view class="goods-name list-goods-name" @click="pintuanDetail(item.goods_id)">{{item.goods_name}}</view> |
|||
<view class="goods-item-c"> |
|||
<view class="goods-price red-price">￥{{item.pintuan_price}}</view> |
|||
<view class="goods-buy"> |
|||
<view class="goods-salesvolume red-price" v-if="(item.pintuan_start_status == 1) && item.lasttime">剩余：<uni-countdown :day="item.lasttime.day" :hour="item.lasttime.hour" :minute="item.lasttime.minute" :second="item.lasttime.second"></uni-countdown></view> |
|||
<view class="goods-salesvolume red-price" v-if="item.pintuan_start_status == 3">已结束</view> |
|||
<view class="goods-salesvolume red-price" v-if="item.pintuan_start_status == 2">即将开团</view> |
|||
|
|||
<image class="goods-cart" src="/static/image/ic-car.png" @click="pintuanDetail(item.goods_id)"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import uniCountdown from "@/components/uni-countdown/uni-countdown.vue" |
|||
import {goods} from '@/config/mixins.js' |
|||
export default { |
|||
mixins: [goods], |
|||
components:{uniCountdown}, |
|||
name: "jshoppintuan", |
|||
props: { |
|||
jdata:{ |
|||
// type: Array, |
|||
required: false, |
|||
} |
|||
}, |
|||
computed: { |
|||
count() { |
|||
return (this.jdata.options.colorGroup.length > 0) |
|||
} |
|||
}, |
|||
methods: { |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.img-list, .img-grids { |
|||
background-color: #fff; |
|||
} |
|||
.cell-item{ |
|||
border: none; |
|||
} |
|||
.group-buying .img-list-item{ |
|||
min-height: 236upx; |
|||
padding: 20upx; |
|||
margin-left: 26upx; |
|||
margin-bottom: 26upx; |
|||
display: inline-table; |
|||
background-color: #f9f9f9; |
|||
} |
|||
.swiper-grids .img-list-item:last-child{ |
|||
margin-right: 26upx; |
|||
} |
|||
|
|||
/* .group-buying .goods-name{ |
|||
min-height: 74upx; |
|||
} */ |
|||
.group-buying .group-title{ |
|||
width: 100%; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,187 @@ |
|||
<template> |
|||
<view class="adbrathing" |
|||
v-show="adbshow" |
|||
v-bind:class="['adbrathing'+jdata.params.style.align,!hideanimation?'pc':hideanimation?'hc':'']" |
|||
:style="{top:jdata.params.style.top+'%'}" > |
|||
<view class="adbrathing-c"> |
|||
<view class="adbrathing-l"> |
|||
<image class="user-head-img" :src="log.avatar" mode="aspectFill"></image> |
|||
<view class="user-name"> |
|||
{{log.nickname}} |
|||
</view> |
|||
</view> |
|||
<view class="adbrathing-r"> |
|||
{{log.ctime}}{{log.desc}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { apiBaseUrl } from '@/config/config.js'; |
|||
export default { |
|||
name: "jshoprecord", |
|||
props: { |
|||
jdata:{ |
|||
// type: Object, |
|||
required: true, |
|||
}, |
|||
//记录显示的位置类型 |
|||
ltype:{ |
|||
type: String, |
|||
required: false, |
|||
default:'home', |
|||
}, |
|||
//记录显示的位置的值 |
|||
lvalue:{ |
|||
type: String, |
|||
required: false, |
|||
default:'0', |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
adbshow:false, |
|||
hideanimation: true, |
|||
log:{ |
|||
avatar:'/static/demo-img/user-head.jpg', |
|||
nickname:'', |
|||
desc:'', |
|||
ctime:'', |
|||
}, |
|||
times:{},//定时器 |
|||
}; |
|||
}, |
|||
methods:{ |
|||
//隐藏 |
|||
hideLog(){ |
|||
var _this = this; |
|||
_this.times = setInterval(function(){ |
|||
_this.adbshow = !_this.adbshow; |
|||
_this.hideanimation = !_this.hideanimation; |
|||
clearInterval(_this.times); |
|||
_this.times = setInterval(function(){ |
|||
_this.getRecod(); |
|||
},5000); |
|||
},3000) |
|||
}, |
|||
//获取日志 |
|||
getRecod(){ |
|||
var _this = this; |
|||
if(_this.times !={}){ |
|||
clearInterval(_this.times); |
|||
} |
|||
var data = { |
|||
type:_this.ltype, |
|||
value:_this.lvalue, |
|||
method:'pages.getrecod', |
|||
}; |
|||
uni.request({ |
|||
url: apiBaseUrl+'api.html', |
|||
data: data, |
|||
header: { |
|||
'Accept': 'application/json', |
|||
'Content-Type': 'application/json', |
|||
}, |
|||
method: 'POST', |
|||
success: (response) => { |
|||
var res = response.data; |
|||
if(res.status == true){ |
|||
if(res.data){ |
|||
_this.log = res.data; |
|||
_this.adbshow = true; |
|||
_this.hideanimation = false; |
|||
_this.hideLog(); |
|||
} |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getRecod(); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.adbrathing{ |
|||
position: fixed; |
|||
// top: 100px; |
|||
// right: 30upx; |
|||
// max-width: 400upx; |
|||
height: 70upx; |
|||
background-color: rgba(0,0,0,.5); |
|||
border-radius: 10upx; |
|||
padding: 10upx; |
|||
z-index: 666; |
|||
.adbrathing-c{ |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
color: #fff; |
|||
font-size: 24upx; |
|||
|
|||
.adbrathing-l{ |
|||
display: inline-block; |
|||
height: 100%; |
|||
float: left; |
|||
overflow: hidden; |
|||
.user-head-img{ |
|||
width: 50upx; |
|||
height: 50upx; |
|||
border-radius: 50%; |
|||
float: left; |
|||
|
|||
} |
|||
.user-name{ |
|||
float: left; |
|||
display: inline-block; |
|||
height: 100%; |
|||
line-height: 50upx; |
|||
margin: 0 4upx 0 10upx; |
|||
max-width: 120upx; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
|
|||
.adbrathing-r{ |
|||
float: left; |
|||
height: 100%; |
|||
display: inline-block; |
|||
line-height: 50upx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.adbrathingleft{ |
|||
left: 30upx |
|||
} |
|||
.adbrathingright{ |
|||
right: 30upx |
|||
} |
|||
.pc{ |
|||
animation: showcenter .55s; |
|||
} |
|||
.hc{ |
|||
animation: hidecenter .55s; |
|||
} |
|||
@keyframes showcenter{ |
|||
0% { |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@keyframes hidecenter{ |
|||
0% { |
|||
opacity: 1; |
|||
} |
|||
100% { |
|||
opacity: 0; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,118 @@ |
|||
<template> |
|||
<view class="" > |
|||
<!-- 搜索框 --> |
|||
<view class="search" ref="searchBar" id="search"> |
|||
<view class='search-c round' @click='goSearch()'> |
|||
<view class='search-input search-input-p'> |
|||
<view class="search-input-p-c"> |
|||
{{jdata.options.search_tips}} |
|||
</view> |
|||
</view> |
|||
<image class='icon search-icon' src='/static/image/zoom.png'></image> |
|||
</view> |
|||
</view> |
|||
<!-- 搜索框 --> |
|||
<view class="search search-fixed" v-show="searchFixed"> |
|||
<view class='search-c round' @click='goSearch()' > |
|||
<view class='search-input search-input-p'> |
|||
<view class="search-input-p-c"> |
|||
{{jdata.options.search_tips}} |
|||
</view> |
|||
</view> |
|||
<image class='icon search-icon' src='/static/image/zoom.png'></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: "jshopsearch", |
|||
props: { |
|||
jdata:{ |
|||
// type: Object, |
|||
required: true, |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
keyword:'', |
|||
searchTop: 0, |
|||
scrollTop: 0, |
|||
searchFixed: this.$store.state.searchFixed||false |
|||
}; |
|||
}, |
|||
|
|||
created() { |
|||
//#ifdef H5 |
|||
this.$nextTick(() => { |
|||
this.searchTop = this.$refs.searchBar.$el.offsetTop; |
|||
}) |
|||
// #endif |
|||
this.searchStyle() |
|||
}, |
|||
|
|||
mounted() { |
|||
// #ifdef H5 |
|||
window.addEventListener('scroll', this.handleScroll) |
|||
// #endif |
|||
}, |
|||
|
|||
|
|||
methods: { |
|||
searchStyle (){ |
|||
|
|||
}, |
|||
goSearch() { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/search' |
|||
}); |
|||
}, |
|||
handleScroll() { |
|||
this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; |
|||
this.scrollTop >= this.searchTop? this.searchFixed = true : this.searchFixed = false; |
|||
}, |
|||
}, |
|||
/* |
|||
//失效 |
|||
onPageScroll(){ |
|||
var _this = this; |
|||
// #ifdef MP-WEIXIN || APP-PLUS || APP-PLUS-NVUE |
|||
const query = uni.createSelectorQuery().in(this) |
|||
query.select('.search').boundingClientRect(function(res){ |
|||
if(res.top<0){ |
|||
_this.searchFixed = true ; |
|||
}else{ |
|||
_this.searchFixed = false; |
|||
} |
|||
}).exec() |
|||
// #endif |
|||
} */ |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.search-input-p { |
|||
color: #888; |
|||
} |
|||
.square{ |
|||
border-radius: 0; |
|||
} |
|||
.radius{ |
|||
border-radius: 12upx; |
|||
} |
|||
.search-fixed{ |
|||
position: fixed; |
|||
top: 0; |
|||
/* background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); */ |
|||
transition: all .5s; |
|||
} |
|||
/* .isOpacity { |
|||
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.isOpacity .search-input { |
|||
background-color: rgba(255, 255, 255, .5); |
|||
transition: all .5s; |
|||
} */ |
|||
</style> |
|||
@ -0,0 +1,614 @@ |
|||
<template> |
|||
<view class="container"> |
|||
|
|||
<!-- 团购楼层 --> |
|||
<view class="f-header m-t" @click="navToTabPage('../../pagesA/product/groupList')" v-if="jdata.options.colorGroup.length > 0"> |
|||
<image src="/static/temp/h1.png"></image> |
|||
<view class="tit-box"> |
|||
<text class="tit" >精品团购</text> |
|||
<text class="tit2">Boutique Group Buying</text> |
|||
</view> |
|||
<text class="yticon icon-you"></text> |
|||
</view> |
|||
<view class="group-section"> |
|||
<swiper class="g-swiper" :duration="500"> |
|||
<swiper-item class="g-swiper-item" v-for="(item, index) in jdata.options.colorGroup" :key="index" @click="goodsDetail(item.id)"> |
|||
<view class="g-item left"> |
|||
<image :src="item.pic" mode="aspectFill"></image> |
|||
<view class="t-box"> |
|||
<text class="title clamp">{{ item.title }}</text> |
|||
<view class="price-box"> |
|||
<text class="price">{{ item.price }}</text> |
|||
<text class="m-price">￥{{ item.price }}</text> |
|||
</view> |
|||
<view class="pro-box"> |
|||
<view class="progress-box"><progress percent="72" activeColor="#fa436a" active stroke-width="6" /></view> |
|||
<text>{{ item.maxPeople }}人成团</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {goods} from '@/config/mixins.js' |
|||
export default { |
|||
filters:{ |
|||
substr(val) { |
|||
if (val.length == 0 || val == undefined) { |
|||
return false; |
|||
} else if (val.length > 13) { |
|||
return val.substring(0, 13) + "..."; |
|||
} else { |
|||
return val; |
|||
} |
|||
} |
|||
}, |
|||
mixins: [goods], |
|||
name: "jshopgoods", |
|||
props: { |
|||
jdata:{ |
|||
// type: Array, |
|||
required: true, |
|||
} |
|||
}, |
|||
computed: { |
|||
count() { |
|||
return (this.jdata.options.colorGroup.length > 0) |
|||
} |
|||
}, |
|||
methods: { |
|||
navToTabPage(url) { |
|||
uni.navigateTo({ |
|||
url: url |
|||
}); |
|||
}, |
|||
//跳转到商品详情页面 |
|||
goodsDetail: function(id) { |
|||
let url = '../../pagesA/product/product?id=' + id; |
|||
|
|||
this.$common.navigateTo(url); |
|||
}, |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.MP-search{ |
|||
background: #FFFFFF;height: 80upx;display: flex;justify-content: center;align-items: center;position: fixed;width: 100%;z-index: 999; |
|||
} |
|||
.MP-search-input{ |
|||
font-size: 28upx;background: #F5F5F5;height: 60upx;width: 90%;border-radius: 50upx;text-align: center; |
|||
} |
|||
.mp-search-box { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 30upx; |
|||
z-index: 9999; |
|||
width: 100%; |
|||
padding: 0 80upx; |
|||
.ser-input { |
|||
flex: 1; |
|||
height: 60upx; |
|||
line-height: 60upx; |
|||
text-align: center; |
|||
font-size: 28upx; |
|||
color: $font-color-base; |
|||
border-radius: 20px; |
|||
background: rgba(255, 255, 255, 0.6); |
|||
} |
|||
} |
|||
page { |
|||
.cate-section { |
|||
position: relative; |
|||
z-index: 5; |
|||
border-radius: 16upx 16upx 0 0; |
|||
margin-top: -20upx; |
|||
} |
|||
.carousel-section { |
|||
padding: 0; |
|||
.titleNview-placing { |
|||
padding-top: 0; |
|||
height: 0; |
|||
} |
|||
.carousel { |
|||
.carousel-item { |
|||
padding: 0; |
|||
} |
|||
} |
|||
.swiper-dots { |
|||
left: 45upx; |
|||
bottom: 40upx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
page { |
|||
background: #f5f5f5; |
|||
} |
|||
.m-t { |
|||
margin-top: 20upx; |
|||
} |
|||
/* 头部 轮播图 */ |
|||
.carousel-section { |
|||
position: relative; |
|||
padding-top: 10px; |
|||
|
|||
.titleNview-placing { |
|||
height: var(--status-bar-height); |
|||
padding-top: 44px; |
|||
box-sizing: content-box; |
|||
} |
|||
|
|||
.titleNview-background { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 426upx; |
|||
transition: 0.4s; |
|||
} |
|||
} |
|||
.carousel { |
|||
width: 100%; |
|||
height: 350upx; |
|||
|
|||
.carousel-item { |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 0 28upx; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 10upx; |
|||
} |
|||
} |
|||
.swiper-dots { |
|||
display: flex; |
|||
position: absolute; |
|||
left: 60upx; |
|||
bottom: 15upx; |
|||
width: 72upx; |
|||
height: 36upx; |
|||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk4MzlBNjE0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk4MzlBNjA0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0E3RUNERkE0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0E3RUNERkI0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Gh5BPAAACTUlEQVR42uzcQW7jQAwFUdN306l1uWwNww5kqdsmm6/2MwtVCp8CosQtP9vg/2+/gY+DRAMBgqnjIp2PaCxCLLldpPARRIiFj1yBbMV+cHZh9PURRLQNhY8kgWyL/WDtwujjI8hoE8rKLqb5CDJaRMJHokC6yKgSCR9JAukmokIknCQJpLOIrJFwMsBJELFcKHwM9BFkLBMKFxNcBCHlQ+FhoocgpVwwnv0Xn30QBJGMC0QcaBVJiAMiec/dcwKuL4j1QMsVCXFAJE4s4NQA3K/8Y6DzO4g40P7UcmIBJxbEesCKWBDg8wWxHrAiFgT4fEGsB/CwIhYE+AeBAAdPLOcV8HRmWRDAiQVcO7GcV8CLM8uCAE4sQCDAlHcQ7x+ABQEEAggEEAggEEAggEAAgQACASAQQCCAQACBAAIBBAIIBBAIIBBAIABe4e9iAe/xd7EAJxYgEGDeO4j3EODp/cOCAE4sYMyJ5cwCHs4rCwI4sYBxJ5YzC84rCwKcXxArAuthQYDzC2JF0H49LAhwYUGsCFqvx5EF2T07dMaJBetx4cRyaqFtHJ8EIhK0i8OJBQxcECuCVutxJhCRoE0cZwMRyRcFefa/ffZBVPogePihhyCnbBhcfMFFEFM+DD4m+ghSlgmDkwlOgpAl4+BkkJMgZdk4+EgaSCcpVX7bmY9kgXQQU+1TgE0c+QJZUUz1b2T4SBbIKmJW+3iMj2SBVBWz+leVfCQLpIqYbp8b85EskIxyfIOfK5Sf+wiCRJEsllQ+oqEkQfBxmD8BBgA5hVjXyrBNUQAAAABJRU5ErkJggg==); |
|||
background-size: 100% 100%; |
|||
|
|||
.num { |
|||
width: 36upx; |
|||
height: 36upx; |
|||
border-radius: 50px; |
|||
font-size: 24upx; |
|||
color: #fff; |
|||
text-align: center; |
|||
line-height: 36upx; |
|||
} |
|||
|
|||
.sign { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 50%; |
|||
line-height: 36upx; |
|||
font-size: 12upx; |
|||
color: #fff; |
|||
transform: translateX(-50%); |
|||
} |
|||
} |
|||
/* 分类 */ |
|||
.cate-section { |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
flex-wrap: wrap; |
|||
padding: 30upx 22upx; |
|||
background: #fff; |
|||
.cate-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
font-size: $font-sm + 2upx; |
|||
color: $font-color-dark; |
|||
} |
|||
/* 原图标颜色太深,不想改图了,所以加了透明度 */ |
|||
image { |
|||
width: 88upx; |
|||
height: 88upx; |
|||
margin-bottom: 14upx; |
|||
border-radius: 50%; |
|||
opacity: 0.7; |
|||
box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3); |
|||
} |
|||
} |
|||
.ad-1 { |
|||
width: 100%; |
|||
height: 210upx; |
|||
padding: 10upx 0; |
|||
background: #fff; |
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
/* 秒杀专区 */ |
|||
.seckill-section { |
|||
padding: 0upx 20upx 20upx; |
|||
background: #fff; |
|||
.s-header { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 90upx; |
|||
line-height: 1; |
|||
.s-img { |
|||
width: 140upx; |
|||
height: 30upx; |
|||
} |
|||
.tip { |
|||
font-size: $font-base; |
|||
color: $font-color-light; |
|||
// margin: 0 20upx 0 40upx; |
|||
} |
|||
.timer { |
|||
display: inline-block; |
|||
width: 40upx; |
|||
height: 36upx; |
|||
text-align: center; |
|||
line-height: 36upx; |
|||
margin-right: 14upx; |
|||
font-size: $font-sm + 2upx; |
|||
color: #fff; |
|||
border-radius: 2px; |
|||
background: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.icon-you { |
|||
font-size: $font-lg; |
|||
color: $font-color-light; |
|||
flex: 1; |
|||
text-align: right; |
|||
} |
|||
} |
|||
.floor-list { |
|||
white-space: nowrap; |
|||
} |
|||
.scoll-wrapper { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
} |
|||
.floor-item { |
|||
width: 150upx; |
|||
margin-right: 20upx; |
|||
font-size: $font-sm + 2upx; |
|||
color: $font-color-dark; |
|||
line-height: 1.8; |
|||
image { |
|||
width: 150upx; |
|||
height: 150upx; |
|||
border-radius: 6upx; |
|||
} |
|||
.price { |
|||
color: $uni-color-primary; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.f-header { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 140upx; |
|||
padding: 0upx 20upx; |
|||
background: #fff; |
|||
image { |
|||
flex-shrink: 0; |
|||
width: 80upx; |
|||
height: 80upx; |
|||
margin-right: 20upx; |
|||
} |
|||
.tit-box { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.tit { |
|||
font-size: $font-lg + 2upx; |
|||
color: #font-color-dark; |
|||
line-height: 1.3; |
|||
} |
|||
.tit2 { |
|||
font-size: $font-sm; |
|||
color: $font-color-light; |
|||
} |
|||
.icon-you { |
|||
font-size: $font-lg + 2upx; |
|||
color: $font-color-light; |
|||
} |
|||
} |
|||
/* 团购楼层 */ |
|||
.group-section { |
|||
background: #fff; |
|||
.g-swiper { |
|||
height: 650upx; |
|||
padding-bottom: 20upx; |
|||
} |
|||
.g-swiper-item { |
|||
width: 100%; |
|||
padding: 0 20upx; |
|||
display: flex; |
|||
} |
|||
image { |
|||
width: 100%; |
|||
height: 460upx; |
|||
border-radius: 4px; |
|||
} |
|||
.g-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow: hidden; |
|||
} |
|||
.left { |
|||
flex: 1.2; |
|||
// margin-right: 24upx; |
|||
.t-box { |
|||
padding-top: 20upx; |
|||
} |
|||
} |
|||
.right { |
|||
flex: 0.8; |
|||
flex-direction: column-reverse; |
|||
.t-box { |
|||
padding-bottom: 20upx; |
|||
} |
|||
} |
|||
.t-box { |
|||
height: 160upx; |
|||
font-size: $font-base + 2upx; |
|||
color: $font-color-dark; |
|||
line-height: 1.6; |
|||
} |
|||
.price { |
|||
color: $uni-color-primary; |
|||
} |
|||
.m-price { |
|||
font-size: $font-sm + 2upx; |
|||
text-decoration: line-through; |
|||
color: $font-color-light; |
|||
margin-left: 8upx; |
|||
} |
|||
.pro-box { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 10upx; |
|||
font-size: $font-sm; |
|||
color: $font-base; |
|||
padding-right: 10upx; |
|||
} |
|||
.progress-box { |
|||
flex: 1; |
|||
border-radius: 10px; |
|||
overflow: hidden; |
|||
margin-right: 8upx; |
|||
} |
|||
} |
|||
/* 分类推荐楼层 */ |
|||
.hot-floor { |
|||
width: 100%; |
|||
overflow: hidden; |
|||
margin-bottom: 20upx; |
|||
.floor-img-box { |
|||
width: 100%; |
|||
height: 320upx; |
|||
position: relative; |
|||
&:after { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: linear-gradient(rgba(255, 255, 255, 0.06) 30%, #f8f8f8); |
|||
} |
|||
} |
|||
.floor-img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.floor-list { |
|||
white-space: nowrap; |
|||
padding: 20upx; |
|||
padding-right: 50upx; |
|||
border-radius: 6upx; |
|||
margin-top: -140upx; |
|||
margin-left: 30upx; |
|||
background: #fff; |
|||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
.scoll-wrapper { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
} |
|||
.floor-item { |
|||
width: 180upx; |
|||
margin-right: 20upx; |
|||
font-size: $font-sm + 2upx; |
|||
color: $font-color-dark; |
|||
line-height: 1.8; |
|||
image { |
|||
width: 180upx; |
|||
height: 180upx; |
|||
border-radius: 6upx; |
|||
} |
|||
.price { |
|||
color: $uni-color-primary; |
|||
} |
|||
} |
|||
.more { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
flex-shrink: 0; |
|||
width: 180upx; |
|||
height: 180upx; |
|||
border-radius: 6upx; |
|||
background: #f3f3f3; |
|||
font-size: $font-base; |
|||
color: $font-color-light; |
|||
text:first-child { |
|||
margin-bottom: 4upx; |
|||
} |
|||
} |
|||
} |
|||
/* 单条商品 */ |
|||
.goods-box-single { |
|||
display: flex; |
|||
padding: 20upx 0; |
|||
.goods-img { |
|||
display: block; |
|||
width: 120upx; |
|||
height: 120upx; |
|||
} |
|||
.right { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding: 0 30upx 0 24upx; |
|||
overflow: hidden; |
|||
.title { |
|||
font-size: $font-base + 2upx; |
|||
color: $font-color-dark; |
|||
line-height: 1; |
|||
} |
|||
.attr-box { |
|||
font-size: $font-sm + 2upx; |
|||
color: $font-color-light; |
|||
padding: 10upx 12upx; |
|||
} |
|||
.price { |
|||
font-size: $font-base + 2upx; |
|||
color: $font-color-dark; |
|||
&:before { |
|||
content: '￥'; |
|||
font-size: $font-sm; |
|||
margin: 0 2upx 0 8upx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.price-box { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
align-items: baseline; |
|||
padding: 20upx 30upx; |
|||
font-size: $font-sm + 2upx; |
|||
color: $font-color-light; |
|||
.num { |
|||
margin: 0 8upx; |
|||
color: $font-color-dark; |
|||
} |
|||
.price { |
|||
font-size: $font-lg; |
|||
color: $font-color-dark; |
|||
&:before { |
|||
content: '￥'; |
|||
font-size: $font-sm; |
|||
margin: 0 2upx 0 8upx; |
|||
} |
|||
} |
|||
} |
|||
.action-box { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
height: 100upx; |
|||
position: relative; |
|||
padding-right: 30upx; |
|||
} |
|||
.action-btn { |
|||
width: 160upx; |
|||
height: 60upx; |
|||
margin: 0; |
|||
margin-left: 24upx; |
|||
padding: 0; |
|||
text-align: center; |
|||
line-height: 60upx; |
|||
font-size: $font-sm + 2upx; |
|||
color: $font-color-dark; |
|||
background: #fff; |
|||
border-radius: 100px; |
|||
&:after { |
|||
border-radius: 100px; |
|||
} |
|||
&.recom { |
|||
background: #fff9f9; |
|||
color: $base-color; |
|||
&:after { |
|||
border-color: #f7bcc8; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
/* 猜你喜欢 */ |
|||
.guess-section { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding: 0 30upx; |
|||
background: #fff; |
|||
.guess-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 48%; |
|||
padding-bottom: 40upx; |
|||
&:nth-child(2n + 1) { |
|||
margin-right: 4%; |
|||
} |
|||
} |
|||
.image-wrapper { |
|||
width: 100%; |
|||
height: 330upx; |
|||
border-radius: 3px; |
|||
overflow: hidden; |
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
opacity: 1; |
|||
} |
|||
} |
|||
.title { |
|||
font-size: $font-lg; |
|||
color: $font-color-dark; |
|||
line-height: 80upx; |
|||
} |
|||
.price { |
|||
font-size: $font-lg; |
|||
color: $uni-color-primary; |
|||
line-height: 1; |
|||
} |
|||
.coupon_box { |
|||
width:100%; height:auto; display:table; padding:6upx 26upx 26upx 26upx; |
|||
} |
|||
|
|||
.other_type { |
|||
width:100%; height:90upx; padding-top:50upx; |
|||
|
|||
.text { width:100%; border-top:1px solid #eeeeee; display:block; text-align:center; position:relative; } |
|||
.text span { width:180upx; height:40upx; line-height:40upx; color:#999999; display:block; background:#ffffff; position:absolute; left:50%; top:50%; margin-left:-90upx; margin-top:-20upx; font-size:$font-base; } |
|||
} |
|||
} |
|||
.getPosition{ |
|||
height: 100upx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 32upx; |
|||
background-color: #FFF; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,163 @@ |
|||
<template> |
|||
<view class=""> |
|||
<view class="jshop-tabbar bottom-cell-group" ref="tabBar"> |
|||
<scroll-view scroll-x='true' class="tabbar-list"> |
|||
<view class="tabbar-item" v-for="(item, index) in jdata.options.colorGroup" :key="index" @click="showSliderInfo(item.linkType, item.linkValue)"> |
|||
{{item.text}} |
|||
<view class="active-tabbar"></view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
<!-- <view class="jshop-tabbar bottom-cell-group tabbar-fixed" v-show="tabbarFixed"> |
|||
<scroll-view scroll-x='true' class="tabbar-list"> |
|||
<view class="tabbar-item" v-for="(item, index) in jdata.options.colorGroup" :key="index" @click="showSliderInfo(item.linkType, item.linkValue)"> |
|||
{{item.text}} |
|||
<view class="active-tabbar"></view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> --> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "jshopTabbar", |
|||
props: { |
|||
jdata:{ |
|||
// type: Object, |
|||
required: true, |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
searchTop: 0, |
|||
scrollTop: 0, |
|||
tabbarFixed: false |
|||
}; |
|||
}, |
|||
created() { |
|||
//#ifdef H5 |
|||
this.$nextTick(() => { |
|||
this.searchTop = this.$refs.tabBar.$el.offsetTop - 52; |
|||
}) |
|||
// #endif |
|||
this.searchStyle() |
|||
}, |
|||
|
|||
mounted() { |
|||
// #ifdef H5 |
|||
window.addEventListener('scroll', this.handleScroll) |
|||
// #endif |
|||
|
|||
|
|||
}, |
|||
methods: { |
|||
searchStyle (){ |
|||
this.$store.commit('searchStyle',this.jdata.params.style) |
|||
// console.log(this.data.params.style) |
|||
}, |
|||
handleScroll() { |
|||
this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; |
|||
this.scrollTop >= this.searchTop? this.tabbarFixed = true : this.tabbarFixed = false; |
|||
}, |
|||
goClassify(){ |
|||
uni.switchTab({ |
|||
url: '/pages/classify/classify' |
|||
}); |
|||
// this.$common.navigateTo('/pages/classify/classify') |
|||
}, |
|||
showSliderInfo(type, val) { |
|||
console.log(val) |
|||
if (!val) { |
|||
return; |
|||
} |
|||
console.log("11") |
|||
if (type == 1) { |
|||
if (val.indexOf('http') != -1) { |
|||
// #ifdef H5 |
|||
window.location.href = val |
|||
// #endif |
|||
} else { |
|||
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP |
|||
if (val == '/pages/index/index' || val == '/pages/classify/classify' || val == '/pages/cart/index/index' || val == '/pages/member/index/index') { |
|||
uni.switchTab({ |
|||
url: val |
|||
}); |
|||
return; |
|||
} else { |
|||
this.$common.navigateTo(val); |
|||
return; |
|||
} |
|||
// #endif |
|||
} |
|||
} else if (type == 2) { |
|||
// 商品详情 |
|||
this.goodsDetail(val) |
|||
} else if (type == 3) { |
|||
// 文章详情 |
|||
this.$common.navigateTo('/pages/article/index?id=' + val + '&id_type=1') |
|||
} else if (type == 4) { |
|||
// console.log("11") |
|||
// 文章列表 |
|||
this.$common.navigateTo('/pages/article/list?cid=' + val) |
|||
} else if (type == 5) { |
|||
//智能表单 |
|||
this.$common.navigateTo('/pages/form/detail/form?id=' + val) |
|||
} |
|||
}, |
|||
//跳转到商品详情页面 |
|||
goodsDetail: function(id) { |
|||
let url = '/pages/goods/index/index?id=' + id; |
|||
this.$common.navigateTo(url); |
|||
}, |
|||
}, |
|||
onPageScroll(){ |
|||
var _this = this; |
|||
// #ifdef MP-WEIXIN || APP-PLUS || APP-PLUS-NVUE |
|||
const query = uni.createSelectorQuery().in(this) |
|||
query.select('.search').boundingClientRect(function(res){ |
|||
if(res.top<0){ |
|||
_this.tabbarFixed = true ; |
|||
}else{ |
|||
_this.tabbarFixed = false; |
|||
} |
|||
}).exec() |
|||
// #endif |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.tabbar-list{ |
|||
padding: 10rpx 0; |
|||
background-color: #fff; |
|||
white-space: nowrap; |
|||
width: 100%; |
|||
} |
|||
.tabbar-item{ |
|||
display: inline-block; |
|||
padding: 10rpx 20rpx; |
|||
} |
|||
.tabbar-item:first-of-type{ |
|||
color: #FF7159; |
|||
} |
|||
.active-tabbar{ |
|||
display: none; |
|||
} |
|||
.tabbar-item:first-of-type .active-tabbar{ |
|||
display: block; |
|||
width: 100%; |
|||
height: 4rpx; |
|||
margin: 10rpx auto 0; |
|||
background-color: #FF7159; |
|||
} |
|||
.tabbar-fixed{ |
|||
position: fixed; |
|||
top: 104rpx; |
|||
transition: all .5s; |
|||
z-index: 999; |
|||
background-color: #fff; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,59 @@ |
|||
<template> |
|||
<view class="clearfix"> |
|||
<view class="textarea bottom-cell-group" > |
|||
<jshopContent :content="jdata.params" v-if="jdata.params"></jshopContent> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import htmlParser from '@/common/html-parser' |
|||
import jshopContent from '@/components/jshop/jshop-content.vue'//视频和文本解析组件 |
|||
|
|||
export default { |
|||
components: { |
|||
jshopContent |
|||
}, |
|||
name: "jshoptextarea", |
|||
props: { |
|||
jdata:{ |
|||
// type: Object, |
|||
required: true, |
|||
} |
|||
}, |
|||
created() { |
|||
//this.jdata.params = htmlParser(this.jdata.params) |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.textarea{ |
|||
width: 100%; |
|||
background-color: #fff; |
|||
padding: 10upx 26upx; |
|||
/* height: 40upx; */ |
|||
} |
|||
.textarea p img{ |
|||
width: 100% !important; |
|||
} |
|||
.textarea div{ |
|||
background-color: #000; |
|||
} |
|||
.textarea p { |
|||
background-color: #000; |
|||
} |
|||
.clearfix:after { |
|||
content: "."; |
|||
display: block; |
|||
height: 0; |
|||
clear: both; |
|||
visibility: hidden; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,30 @@ |
|||
<template> |
|||
<view class="video bottom-cell-group" > |
|||
<video :src="jdata.options.video_link" :poster="jdata.options.video_img" controls></video> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "jshopvideo", |
|||
props: { |
|||
jdata:{ |
|||
type: Object, |
|||
required: true, |
|||
} |
|||
}, |
|||
onLoad(){ |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.video video{ |
|||
width: 100%; |
|||
min-height: 200upx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,88 @@ |
|||
<template> |
|||
<view> |
|||
<block v-for="(item,index) in jdata" :key="index"> |
|||
<jshopsearch :jdata="item" v-if="item.components=='search' "></jshopsearch> |
|||
<jshoptabbar :jdata="item" v-if="item.components=='tabBar' "></jshoptabbar> |
|||
<jshopnotice :jdata="item" v-if="item.components=='notice' "></jshopnotice> |
|||
<jshopimgSlide :jdata="item" v-if="item.components=='banner' "></jshopimgSlide> |
|||
<jshopcoupon :jdata="item" v-if="item.components=='coupon' "></jshopcoupon> |
|||
<jshopblank :jdata="item" v-if="item.components=='blank' "></jshopblank> |
|||
<jshoptextarea :jdata="item" v-if="item.components=='textarea' "></jshoptextarea> |
|||
<jshopvideo :jdata="item" v-if="item.components=='video' "></jshopvideo> |
|||
<jshopimgWindow :jdata="item" v-if="item.components=='imgWin' "></jshopimgWindow> |
|||
<jshopimgSingle :jdata="item" v-if="item.components=='imgImgSlide' "></jshopimgSingle> |
|||
<jshopgoods :jdata="item" v-if="item.components=='shuanglieshangpin' "></jshopgoods> |
|||
<jshopslidegoods :jdata="item" v-if="item.components=='danlieshangpin' "></jshopslidegoods> |
|||
|
|||
<jshoparticle :jdata="item" v-if="item.components=='article' "></jshoparticle> |
|||
<jshoparticleClassify :jdata="item" v-if="item.components=='articleClassify' "></jshoparticleClassify> |
|||
<jshopnavBar :jdata="item" v-if="item.components=='xuanxiangqia' "></jshopnavBar> |
|||
<jshopgroupPurchase :jdata="item" v-if="item.components=='groupPurchase' "></jshopgroupPurchase> |
|||
<jshoprecord :jdata="item" v-if="item.components=='record' "></jshoprecord> |
|||
<jshoppintuan :jdata="item" v-if="item.components=='pintuan' "></jshoppintuan> |
|||
<jshopadpop :jdata="item" v-if="item.components=='imgGroup' "></jshopadpop> |
|||
</block> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* 吉海科技jshop小程序插件集合。 |
|||
* author:novice |
|||
* date:2019:05:20 |
|||
*/ |
|||
import uniCountdown from '@/components/uni-countdown/uni-countdown.vue' |
|||
import jshopimgSlide from '@/components/jshop/jshop-imgSlide.vue' |
|||
import jshopsearch from '@/components/jshop/jshop-search.vue' |
|||
import jshopnotice from '@/components/jshop/jshop-notice.vue' |
|||
import jshopcoupon from '@/components/jshop/jshop-coupon.vue' |
|||
import jshopblank from '@/components/jshop/jshop-blank.vue' |
|||
import jshoptextarea from '@/components/jshop/jshop-textarea.vue' |
|||
import jshopvideo from '@/components/jshop/jshop-video.vue' |
|||
import jshopimgWindow from '@/components/jshop/jshop-imgWindow.vue' |
|||
import jshopimgSingle from '@/components/jshop/jshop-imgSingle.vue' |
|||
import jshopgoods from '@/components/jshop/jshop-goods.vue' |
|||
import jshoponegoods from '@/components/jshop/jshop-onegoods.vue' |
|||
import jshopslidegoods from '@/components/jshop/jshop-slidegoods.vue' |
|||
import jshoparticle from '@/components/jshop/jshop-article.vue' |
|||
import jshoparticleClassify from '@/components/jshop/jshop-articleClassify.vue' |
|||
import jshopnavBar from '@/components/jshop/jshop-navBar.vue' |
|||
import jshopgroupPurchase from '@/components/jshop/jshop-groupPurchase.vue' |
|||
import jshoprecord from '@/components/jshop/jshop-record.vue' |
|||
import jshoppintuan from '@/components/jshop/jshop-pintuan.vue' |
|||
import jshoptabbar from '@/components/jshop/jshop-tabbar.vue' |
|||
import jshopadpop from '@/components/jshop/jshop-adpop.vue' |
|||
|
|||
export default { |
|||
name: 'jshop', |
|||
components: { |
|||
jshopimgSlide, |
|||
jshopsearch, |
|||
jshopnotice, |
|||
jshoponegoods, |
|||
jshopslidegoods, |
|||
jshopcoupon, |
|||
jshopblank, |
|||
jshoptextarea, |
|||
jshopvideo, |
|||
jshopimgWindow, |
|||
jshopimgSingle, |
|||
jshopgoods, |
|||
jshoparticle, |
|||
jshoparticleClassify, |
|||
jshopnavBar, |
|||
jshopgroupPurchase, |
|||
jshoprecord, |
|||
jshoppintuan, |
|||
jshoptabbar, |
|||
jshopadpop |
|||
}, |
|||
props: { |
|||
jdata: { |
|||
default: function() { |
|||
return [] |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,284 @@ |
|||
<template> |
|||
<view class="index-goods"> |
|||
<!-- 列表平铺两列三列 --> |
|||
<view class='img-grids bottom-cell-group' |
|||
v-if="jdata.params.column == '2' && jdata.params.display == 'list' || jdata.params.column == '3' && jdata.params.display == 'list'" |
|||
v-bind:class="'column'+jdata.params.column"> |
|||
<view class='cell-item right-img' v-if="jdata.params.title != ''"> |
|||
<view class='cell-item-hd'> |
|||
<view class='cell-hd-title'>{{jdata.params.title}}</view> |
|||
</view> |
|||
<view class='cell-item-bd'> |
|||
</view> |
|||
<view class='cell-item-ft' v-if="jdata.params.lookMore == 'true'"> |
|||
|
|||
<text class='cell-ft-text' @click="goodsList({cat_id: jdata.params.classifyId,brand_id:jdata.params.brandId})">查看更多</text> |
|||
<image class='cell-ft-next icon' src='/static/image/right.png'></image> |
|||
</view> |
|||
</view> |
|||
<!-- <view class='img-grids'> --> |
|||
<view class="" v-if="count"> |
|||
<view class="img-grids-item" v-for="item in jdata.params.list" :key="item.id" @click="goodsDetail(item.id)"> |
|||
<image |
|||
class="img-grids-item-t have-none" |
|||
:src="item.image_url" |
|||
mode='aspectFill' |
|||
></image> |
|||
<view class="img-grids-item-b"> |
|||
<view class="goods-name grids-goods-name"> |
|||
{{item.name}} |
|||
</view> |
|||
<view class="goods-item-c"> |
|||
<view class="goods-price red-price">￥{{item.price}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view v-else-if="!count && !jdata.params.listAjax"> |
|||
<view class='img-grids-item'> |
|||
<image class='img-grids-item-t have-none' src='' mode=''></image> |
|||
<view class='img-grids-item-b'> |
|||
<view class='goods-name grids-goods-name have-none'></view> |
|||
<view class='goods-item-c'> |
|||
<view class='goods-price red-price have-none'></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class='img-grids-item'> |
|||
<image class='img-grids-item-t have-none' src='' mode=''></image> |
|||
<view class='img-grids-item-b'> |
|||
<view class='goods-name grids-goods-name have-none'></view> |
|||
<view class='goods-item-c'> |
|||
<view class='goods-price red-price have-none'></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class='img-grids-item'> |
|||
<image class='img-grids-item-t have-none' src='' mode=''></image> |
|||
<view class='img-grids-item-b'> |
|||
<view class='goods-name grids-goods-name have-none'></view> |
|||
<view class='goods-item-c'> |
|||
<view class='goods-price red-price have-none'></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- <view v-else=""> |
|||
<scroll-view class='swiper-list' scroll-x="true"></scroll-view> |
|||
</view> --> |
|||
<!-- </view> --> |
|||
</view> |
|||
|
|||
<!-- 列表平铺单列 --> |
|||
<view class="img-list bottom-cell-group" |
|||
v-if="jdata.params.column == '1' && jdata.params.display == 'list'" > |
|||
<view class='cell-item right-img' v-if="jdata.params.title != ''"> |
|||
<view class='cell-item-hd'> |
|||
<view class='cell-hd-title'>{{jdata.params.title}}</view> |
|||
</view> |
|||
<view class='cell-item-bd'> |
|||
</view> |
|||
<view class='cell-item-ft' v-if="jdata.params.lookMore == 'true'"> |
|||
|
|||
<text class='cell-ft-text' @click="goodsList({cat_id: jdata.params.classifyId,brand_id:jdata.params.brandId})">查看更多</text> |
|||
<image class='cell-ft-next icon' src='/static/image/right.png'></image> |
|||
</view> |
|||
</view> |
|||
<view v-if="count"> |
|||
<view class="img-list-item" v-for="(item, index) in jdata.params.list" :key="index" @click="goodsDetail(item.id)"> |
|||
<image class="img-list-item-l have-none" :src="item.image_url" mode='aspectFill'></image> |
|||
<view class="img-list-item-r"> |
|||
<view class="goods-name list-goods-name"> |
|||
{{item.name}} |
|||
</view> |
|||
<view class="goods-item-c"> |
|||
<view class="goods-price red-price">￥{{item.price}}</view> |
|||
<view class="goods-buy"> |
|||
<view class="goods-salesvolume" v-if="item.comments_count > 0">{{item.comments_count}}条评论</view> |
|||
<view class="goods-salesvolume" v-else-if="item.comments_count <= 0">暂无评论</view> |
|||
<image class="goods-cart" src="/static/image/ic-car.png"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="order-none" v-else> |
|||
<image class="order-none-img" src="/static/image/order.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 横向滚动 --> |
|||
<view class='img-grids bottom-cell-group' |
|||
v-if="jdata.params.column == '2' && jdata.params.display == 'slide' || jdata.params.column == '3' && jdata.params.display == 'slide'" |
|||
v-bind:class="'slide'+jdata.params.column"> |
|||
<view class='cell-item right-img' v-if="jdata.params.title != ''"> |
|||
<view class='cell-item-hd'> |
|||
<view class='cell-hd-title'>{{jdata.params.title}}</view> |
|||
</view> |
|||
<view class='cell-item-bd'> |
|||
</view> |
|||
<view class='cell-item-ft' v-if="jdata.params.lookMore == 'true'"> |
|||
|
|||
<text class='cell-ft-text' @click="goodsList({cat_id: jdata.params.classifyId,brand_id:jdata.params.brandId})">查看更多</text> |
|||
<image class='cell-ft-next icon' src='/static/image/right.png'></image> |
|||
</view> |
|||
</view> |
|||
<view class='swiper-grids'> |
|||
<scroll-view class='swiper-list' scroll-x="true" v-if="count"> |
|||
<view class='img-grids-item' v-for="item in jdata.params.list" :key="item.id" @click="goodsDetail(item.id)"> |
|||
<image class='img-grids-item-t have-none' :src='item.image_url' mode='aspectFill'></image> |
|||
<view class='img-grids-item-b'> |
|||
<view class='goods-name grids-goods-name' > |
|||
{{ item.name|substr }} |
|||
</view> |
|||
<view class='goods-item-c'> |
|||
<view class='goods-price red-price'>￥{{ item.price }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<view v-else-if="!goodsListOfHotAjax && !goodsListOfHot.length"> |
|||
<scroll-view class='swiper-list' scroll-x="true"> |
|||
<view class='img-grids-item'> |
|||
<image class='img-grids-item-t have-none' src='' mode='aspectFill'></image> |
|||
<view class='img-grids-item-b'> |
|||
<view class='goods-name grids-goods-name have-none'></view> |
|||
<view class='goods-item-c'> |
|||
<view class='goods-price red-price have-none'></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class='img-grids-item'> |
|||
<image class='img-grids-item-t have-none' src='' mode='aspectFill'></image> |
|||
<view class='img-grids-item-b'> |
|||
<view class='goods-name grids-goods-name have-none'></view> |
|||
<view class='goods-item-c'> |
|||
<view class='goods-price red-price have-none'></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class='img-grids-item'> |
|||
<image class='img-grids-item-t have-none' src='' mode=''></image> |
|||
<view class='img-grids-item-b'> |
|||
<view class='goods-name grids-goods-name have-none'></view> |
|||
<view class='goods-item-c'> |
|||
<view class='goods-price red-price have-none'></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
<view v-else=""> |
|||
<scroll-view class='swiper-list' scroll-x="true"></scroll-view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {goods} from '@/config/mixins.js' |
|||
export default { |
|||
filters:{ |
|||
substr(val) { |
|||
if (val.length == 0 || val == undefined) { |
|||
return false; |
|||
} else if (val.length > 13) { |
|||
return val.substring(0, 13) + "..."; |
|||
} else { |
|||
return val; |
|||
} |
|||
} |
|||
}, |
|||
mixins: [goods], |
|||
name: "jshopgoods", |
|||
props: { |
|||
jdata:{ |
|||
// type: Array, |
|||
required: true, |
|||
} |
|||
}, |
|||
computed: { |
|||
count() { |
|||
return (this.jdata.params.list.length > 0) |
|||
} |
|||
}, |
|||
methods: { |
|||
//跳转到商品详情页面 |
|||
goodsDetail: function(id) { |
|||
let url = '/pages/goods/index/index?id=' + id; |
|||
this.$common.navigateTo(url); |
|||
}, |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.cell-item { |
|||
border: none; |
|||
/* padding-bottom: 0; */ |
|||
} |
|||
.cell-ft-text { |
|||
font-size: 22upx; |
|||
color: #999; |
|||
} |
|||
.img-grids,.img-list{ |
|||
/* margin-top: 20upx; */ |
|||
background-color: #fff; |
|||
} |
|||
.img-grids-item{ |
|||
display: inline-table; |
|||
margin-top: 0; |
|||
margin-bottom: 14upx; |
|||
} |
|||
.column3 .img-grids-item{ |
|||
width: 230upx; |
|||
height: 364rpx !important; |
|||
margin: 15upx; |
|||
margin-right: 0; |
|||
margin-top: 0; |
|||
margin-bottom: 6upx; |
|||
} |
|||
.column3 .img-grids-item:nth-child(3n){ |
|||
margin-right: 15upx; |
|||
} |
|||
.column3 .img-grids-item-t{ |
|||
width: 230upx; |
|||
height: 230upx; |
|||
} |
|||
.column3 .grids-goods-name{ |
|||
font-size: 24upx; |
|||
/* height: 68upx; */ |
|||
/* min-height: 54rpx; */ |
|||
} |
|||
.column3 .img-grids-item-b{ |
|||
padding: 0 8upx 8upx; |
|||
} |
|||
.column3 .goods-price{ |
|||
font-size: 26upx; |
|||
} |
|||
.slide3 .img-grids-item{ |
|||
width: 200upx; |
|||
} |
|||
.slide3 .img-grids-item-t{ |
|||
width: 200upx; |
|||
height: 200upx; |
|||
} |
|||
.slide3 .grids-goods-name{ |
|||
font-size: 24rpx; |
|||
height: 66rpx; |
|||
} |
|||
.index-goods .img-grids-item{ |
|||
display: inline-block; |
|||
margin-top: 0; |
|||
} |
|||
.index-goods .img-list-item{ |
|||
padding: 0upx 26upx; |
|||
margin-bottom: 14upx; |
|||
} |
|||
.index-goods .img-list{ |
|||
padding-bottom: 10upx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,71 @@ |
|||
<template> |
|||
<view class="icons" @click.stop="likeTab"> |
|||
<uni-icons size="20" color="#f07373" :type="like?'heart-filled':'heart'" ></uni-icons> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props:{ |
|||
item:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
types:{ |
|||
type:String, |
|||
default:'' |
|||
} |
|||
}, |
|||
watch:{ |
|||
item(newVal){ |
|||
this.like = this.item.is_like |
|||
} |
|||
}, |
|||
created() { |
|||
this.like = this.item.is_like |
|||
}, |
|||
data() { |
|||
return { |
|||
like:false |
|||
}; |
|||
}, |
|||
methods:{ |
|||
likeTab(){ |
|||
this.like = !this.like; |
|||
this.updateLikes(); |
|||
}, |
|||
updateLikes(){ |
|||
uni.showLoading(); |
|||
this.$api.update_likes({ |
|||
user_id:'5f3d11c03d11c60001141e5f', |
|||
article_id:this.item._id |
|||
}).then(res=>{ |
|||
uni.hideLoading(); |
|||
console.log(res); |
|||
uni.showToast({ |
|||
title:this.like?"收藏成功":"取消收藏", |
|||
icon:'none' |
|||
}) |
|||
uni.$emit('update_article',this.types) |
|||
}).catch(()=>{ |
|||
uni.hideLoading(); |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.icons { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 20px; |
|||
height: 20px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,36 @@ |
|||
<template> |
|||
<view class="cpr"> |
|||
<view class="color-9"> |
|||
{{sysInfo.company}} © {{sysInfo.subdomain}} 版权所有 |
|||
</view> |
|||
<view class="color-9 beian"> |
|||
<view v-if="sysInfo.code"><a href="http://www.beian.miit.gov.cn/publish/query/indexFirst.action" target="_blank">冀ICP备10002647号-11</a></view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
sysInfo : this.$db.get('sysInfo') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.cpr{ |
|||
width: 100%; |
|||
position: absolute; |
|||
bottom: 0; |
|||
justify-self: center; |
|||
text-align: center; |
|||
font-size: 24upx; |
|||
margin: 20upx 0; |
|||
} |
|||
.beian a{ |
|||
text-decoration: none; |
|||
color: #999 !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,223 @@ |
|||
<template> |
|||
<view class="serach"> |
|||
<view class="content" :style="{'border-radius':radius+'px'}"> |
|||
<!-- HM修改 增加进入输入状态的点击范围 --> |
|||
<view class="content-box" :class="{'center':mode === 2}" @click="getFocus"> |
|||
<text class="icon icon-serach"></text> |
|||
<!-- HM修改 增加placeholder input confirm-type confirm--> |
|||
<input :placeholder="placeholder" @input="inputChange" confirm-type="search" @confirm="triggerConfirm" class="input" :class="{'center':!active && mode === 2}" :focus="isFocus" v-model="inputVal" @focus="focus" @blur="blur"/> |
|||
<!-- <view v-if="!active && mode === 2" class="input sub" @click="getFocus">请输入搜索内容</view> --> |
|||
<!-- HM修改 @click换成@click.stop阻止冒泡 --> |
|||
<text v-if="isDelShow" class="icon icon-del" @click.stop="clear"></text> |
|||
</view> |
|||
<view v-show="(active&&show&&button === 'inside')||(isDelShow && button === 'inside')" class="serachBtn" @click="search"> |
|||
搜索 |
|||
</view> |
|||
</view> |
|||
<view v-if="button === 'outside'" class="button" :class="{'active':show||active}" @click="search"> |
|||
<view class="button-item">{{!show?searchName:'搜索'}}</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
mode: { |
|||
value: Number, |
|||
default: 1 |
|||
}, |
|||
//HM修改 定义默认搜索关键词(水印文字) |
|||
placeholder:{ |
|||
value: String, |
|||
default: '请输入搜索内容' |
|||
}, |
|||
value: { |
|||
type: String, |
|||
default:false |
|||
}, |
|||
button: { |
|||
value: String, |
|||
default: 'outside' |
|||
}, |
|||
show: { |
|||
value: Boolean, |
|||
default: true |
|||
}, |
|||
radius: { |
|||
value: String, |
|||
default: 60 |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
active: false, |
|||
inputVal: '', |
|||
searchName: '取消', |
|||
isDelShow: false, |
|||
isFocus: false |
|||
}; |
|||
}, |
|||
methods: { |
|||
//HM修改 触发组件confirm事件 |
|||
triggerConfirm(){ |
|||
this.$emit('confirm', false); |
|||
}, |
|||
//HM修改 触发组件input事件 |
|||
inputChange(event){ |
|||
var keyword = event.detail.value; |
|||
this.$emit('input', keyword); |
|||
if (this.inputVal) { |
|||
this.isDelShow = true; |
|||
} |
|||
}, |
|||
focus() { |
|||
this.active = true; |
|||
//HM修改 增加获取焦点判断 |
|||
if (this.inputVal) { |
|||
this.isDelShow = true; |
|||
} |
|||
}, |
|||
blur() { |
|||
this.isFocus = false; |
|||
if (!this.inputVal) { |
|||
this.active = false; |
|||
} |
|||
}, |
|||
clear() { |
|||
//HM修改 收起键盘 |
|||
uni.hideKeyboard(); |
|||
this.isFocus = false; |
|||
this.inputVal = ''; |
|||
this.active = false; |
|||
//HM修改 清空内容时候触发组件input |
|||
this.$emit('input', ''); |
|||
//this.$emit('search', '');//HM修改 清空内容时候不进行搜索 |
|||
|
|||
}, |
|||
getFocus() { |
|||
this.isFocus = true; |
|||
}, |
|||
search() { |
|||
//HM修改 增加点击取消时候退出输入状态，内容为空时，输入默认关键字 |
|||
if (!this.inputVal) { |
|||
if(!this.show&&this.searchName == '取消'){ |
|||
uni.hideKeyboard(); |
|||
this.isFocus = false; |
|||
this.active = false; |
|||
return; |
|||
} |
|||
} |
|||
console.log(this.inputVal); |
|||
this.$emit('search', this.inputVal?this.inputVal:this.placeholder); |
|||
} |
|||
}, |
|||
watch: { |
|||
inputVal(newVal) { |
|||
if (newVal) { |
|||
this.searchName = '搜索'; |
|||
//this.isDelShow = true; //HM修改 直接点击页面预设关键字样式异常，注销 |
|||
} else { |
|||
this.searchName = '取消'; |
|||
this.isDelShow = false; |
|||
} |
|||
}, |
|||
//HM修改 双向绑定 |
|||
value(val) { |
|||
this.inputVal = val; |
|||
}, |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.serach { |
|||
display: flex; |
|||
width: 100%; |
|||
//border-bottom: 1px #f5f5f5 solid; //HM修改 去掉边框 |
|||
box-sizing: border-box; |
|||
font-size: $uni-font-size-base; |
|||
.content { |
|||
display: flex; |
|||
align-items: center; |
|||
width: 100%; |
|||
height: 60upx; |
|||
//border: 1px #ccc solid; //HM修改 去掉边框 |
|||
background: #fff; |
|||
overflow: hidden; |
|||
transition: all 0.2s linear; |
|||
border-radius: 30px; |
|||
|
|||
.content-box { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
&.center { |
|||
justify-content: center; |
|||
} |
|||
.icon { |
|||
padding: 0 15upx; |
|||
&.icon-del { |
|||
font-size: 38upx; |
|||
&:before {content:"\e644";} |
|||
} |
|||
&.icon-serach:before {content:"\e61c";} |
|||
} |
|||
.input { |
|||
width: 100%; |
|||
max-width: 100%; |
|||
line-height: 60upx; |
|||
height: 60upx; |
|||
transition: all 0.2s linear; |
|||
&.center { |
|||
width: 200upx; |
|||
} |
|||
&.sub { |
|||
// position: absolute; |
|||
width: auto; |
|||
color: grey; |
|||
} |
|||
} |
|||
} |
|||
.serachBtn { |
|||
height: 100%; |
|||
flex-shrink: 0; |
|||
padding: 0 30upx; |
|||
//HM修改 按钮背景色 |
|||
background:linear-gradient(to right,#ff9801,#ff570a); |
|||
//background: $uni-color-success; |
|||
line-height: 60upx; |
|||
color: #fff; |
|||
//border-left: 1px #ccc solid; //HM修改 去掉边框 |
|||
transition: all 0.3s; |
|||
} |
|||
} |
|||
|
|||
.button { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: relative; |
|||
flex-shrink: 0; |
|||
width: 0; |
|||
transition: all 0.2s linear; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
&.active { |
|||
padding-left: 15upx; |
|||
width: 100upx; |
|||
} |
|||
} |
|||
} |
|||
//HM修改 把字体改成本地加载 |
|||
@font-face {font-family:"iconfont";src:url('data:application/x-font-woff;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+s+0AAAE4AAAAQk9TLzI8fEg3AAABfAAAAFZjbWFws6gbWQAAAeQAAAGcZ2x5ZqgAaogAAAOMAAABMGhlYWQTyEk0AAAA4AAAADZoaGVhB90DhQAAALwAAAAkaG10eBAA//8AAAHUAAAAEGxvY2EA0gBOAAADgAAAAAptYXhwARIANgAAARgAAAAgbmFtZT5U/n0AAAS8AAACbXBvc3SanfjSAAAHLAAAAEUAAQAAA4D/gABcBAD//wAABAAAAQAAAAAAAAAAAAAAAAAAAAQAAQAAAAEAAL8Cm/NfDzz1AAsEAAAAAADYVQKbAAAAANhVApv///+ABAADgQAAAAgAAgAAAAAAAAABAAAABAAqAAQAAAAAAAIAAAAKAAoAAAD/AAAAAAAAAAEAAAAKAB4ALAABREZMVAAIAAQAAAAAAAAAAQAAAAFsaWdhAAgAAAABAAAAAQAEAAQAAAABAAgAAQAGAAAAAQAAAAAAAQQAAZAABQAIAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5gbmRAOA/4AAXAOBAIAAAAABAAAAAAAABAAAAAQA//8EAAAABAAAAAAAAAUAAAADAAAALAAAAAQAAAFoAAEAAAAAAGIAAwABAAAALAADAAoAAAFoAAQANgAAAAgACAACAADmBuYc5kT//wAA5gbmHOZE//8AAAAAAAAAAQAIAAgACAAAAAIAAQADAAABBgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAA0AAAAAAAAAAMAAOYGAADmBgAAAAIAAOYcAADmHAAAAAEAAOZEAADmRAAAAAMAAAAAADoATgCYAAAAAv///4AEAAOAABMAHwAABQYiLwEGJCcmAjc2JBcWEgcXFhQBJiAHBhQXFiA3NjQD7RQyFMaG/sl9hw2BiQFqjXgTZccT/sBo/spoPz9oATZoPm0TE8dhDG6FAW2OhwaGfv6+h8YUMgLThoZV0FWGhlnMAAABAAD/gAMAA4EABQAACQE1CQE1AQACAP6IAXgBgP4AiAF4AXiIAAAABAAA//4DlAMnABAAIQAlACkAAAUuAzQ+AjIWFxYQBw4BAyIOAhQeAjI2NzYQJy4BFwEnAQU3AQcCAFKScz09c5Kkkjp2djqSUkiBZjU1ZoGQgTNoaDOBfP6YIAFo/qQgAVwgAgE9cpOjknM9PTl8/r18OT0C9zVmgZCBZTU1Mm4BHW0zNb/+mCABZysf/qQgAAAAAAAAEgDeAAEAAAAAAAAAFQAAAAEAAAAAAAEACAAVAAEAAAAAAAIABwAdAAEAAAAAAAMACAAkAAEAAAAAAAQACAAsAAEAAAAAAAUACwA0AAEAAAAAAAYACAA/AAEAAAAAAAoAKwBHAAEAAAAAAAsAEwByAAMAAQQJAAAAKgCFAAMAAQQJAAEAEACvAAMAAQQJAAIADgC/AAMAAQQJAAMAEADNAAMAAQQJAAQAEADdAAMAAQQJAAUAFgDtAAMAAQQJAAYAEAEDAAMAAQQJAAoAVgETAAMAAQQJAAsAJgFpCkNyZWF0ZWQgYnkgaWNvbmZvbnQKaWNvbmZvbnRSZWd1bGFyaWNvbmZvbnRpY29uZm9udFZlcnNpb24gMS4waWNvbmZvbnRHZW5lcmF0ZWQgYnkgc3ZnMnR0ZiBmcm9tIEZvbnRlbGxvIHByb2plY3QuaHR0cDovL2ZvbnRlbGxvLmNvbQAKAEMAcgBlAGEAdABlAGQAIABiAHkAIABpAGMAbwBuAGYAbwBuAHQACgBpAGMAbwBuAGYAbwBuAHQAUgBlAGcAdQBsAGEAcgBpAGMAbwBuAGYAbwBuAHQAaQBjAG8AbgBmAG8AbgB0AFYAZQByAHMAaQBvAG4AIAAxAC4AMABpAGMAbwBuAGYAbwBuAHQARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABzAHYAZwAyAHQAdABmACAAZgByAG8AbQAgAEYAbwBuAHQAZQBsAGwAbwAgAHAAcgBvAGoAZQBjAHQALgBoAHQAdABwADoALwAvAGYAbwBuAHQAZQBsAGwAbwAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAECAQMBBAEFAAZzb3VzdW8IamlhbnRvdTQHc2hhbmNodQAAAAAA');} |
|||
|
|||
|
|||
.icon { |
|||
font-family: iconfont; |
|||
font-size: 32upx; |
|||
font-style: normal; |
|||
color: #999; |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,119 @@ |
|||
<template> |
|||
<view class="content"> |
|||
|
|||
<view class="mix-list-cell" :class="border" @click="eventClick" hover-class="cell-hover" :hover-stay-time="50"> |
|||
<text |
|||
v-if="icon" |
|||
class="cell-icon yticon" |
|||
:style="[{ |
|||
color: iconColor, |
|||
}]" |
|||
:class="icon" |
|||
></text> |
|||
<text class="cell-tit clamp">{{title}}</text> |
|||
<text v-if="tips" class="cell-tip">{{tips}}</text> |
|||
<text class="cell-more yticon" |
|||
:class="typeList[navigateType]" |
|||
></text> |
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* 简单封装了下， 应用范围比较狭窄，可以在此基础上进行扩展使用 |
|||
* 比如加入image， iconSize可控等 |
|||
*/ |
|||
export default { |
|||
data() { |
|||
return { |
|||
typeList: { |
|||
left: 'icon-zuo', |
|||
right: 'icon-you', |
|||
up: 'icon-shang', |
|||
down: 'icon-xia' |
|||
}, |
|||
} |
|||
}, |
|||
props: { |
|||
icon: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
title: { |
|||
type: String, |
|||
default: '标题' |
|||
}, |
|||
tips: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
navigateType: { |
|||
type: String, |
|||
default: 'right' |
|||
}, |
|||
border: { |
|||
type: String, |
|||
default: 'b-b' |
|||
}, |
|||
hoverClass: { |
|||
type: String, |
|||
default: 'cell-hover' |
|||
}, |
|||
iconColor: { |
|||
type: String, |
|||
default: '#333' |
|||
} |
|||
}, |
|||
methods: { |
|||
eventClick(){ |
|||
this.$emit('eventClick'); |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
|
|||
.icon .mix-list-cell.b-b:after{ |
|||
left: 90upx; |
|||
} |
|||
.mix-list-cell{ |
|||
display:flex; |
|||
align-items:baseline; |
|||
padding: 20upx $page-row-spacing; |
|||
line-height:60upx; |
|||
position:relative; |
|||
|
|||
&.cell-hover{ |
|||
background:#fafafa; |
|||
} |
|||
&.b-b:after{ |
|||
left: 30upx; |
|||
} |
|||
|
|||
.cell-icon{ |
|||
align-self:center; |
|||
width:56upx; |
|||
max-height:60upx; |
|||
font-size:38upx; |
|||
} |
|||
.cell-more{ |
|||
align-self: center; |
|||
font-size:30upx; |
|||
color:$font-color-base; |
|||
margin-left:$uni-spacing-row-sm; |
|||
} |
|||
.cell-tit{ |
|||
flex: 1; |
|||
font-size: $font-base; |
|||
color: $font-color-dark; |
|||
margin-right:10upx; |
|||
} |
|||
.cell-tip{ |
|||
font-size: $font-sm+2upx; |
|||
color: $font-color-light; |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,139 @@ |
|||
/* eslint-disable */ |
|||
var provinceData = [{ |
|||
"label": "北京市", |
|||
"value": "11" |
|||
}, |
|||
{ |
|||
"label": "天津市", |
|||
"value": "12" |
|||
}, |
|||
{ |
|||
"label": "河北省", |
|||
"value": "13" |
|||
}, |
|||
{ |
|||
"label": "山西省", |
|||
"value": "14" |
|||
}, |
|||
{ |
|||
"label": "内蒙古自治区", |
|||
"value": "15" |
|||
}, |
|||
{ |
|||
"label": "辽宁省", |
|||
"value": "21" |
|||
}, |
|||
{ |
|||
"label": "吉林省", |
|||
"value": "22" |
|||
}, |
|||
{ |
|||
"label": "黑龙江省", |
|||
"value": "23" |
|||
}, |
|||
{ |
|||
"label": "上海市", |
|||
"value": "31" |
|||
}, |
|||
{ |
|||
"label": "江苏省", |
|||
"value": "32" |
|||
}, |
|||
{ |
|||
"label": "浙江省", |
|||
"value": "33" |
|||
}, |
|||
{ |
|||
"label": "安徽省", |
|||
"value": "34" |
|||
}, |
|||
{ |
|||
"label": "福建省", |
|||
"value": "35" |
|||
}, |
|||
{ |
|||
"label": "江西省", |
|||
"value": "36" |
|||
}, |
|||
{ |
|||
"label": "山东省", |
|||
"value": "37" |
|||
}, |
|||
{ |
|||
"label": "河南省", |
|||
"value": "41" |
|||
}, |
|||
{ |
|||
"label": "湖北省", |
|||
"value": "42" |
|||
}, |
|||
{ |
|||
"label": "湖南省", |
|||
"value": "43" |
|||
}, |
|||
{ |
|||
"label": "广东省", |
|||
"value": "44" |
|||
}, |
|||
{ |
|||
"label": "广西壮族自治区", |
|||
"value": "45" |
|||
}, |
|||
{ |
|||
"label": "海南省", |
|||
"value": "46" |
|||
}, |
|||
{ |
|||
"label": "重庆市", |
|||
"value": "50" |
|||
}, |
|||
{ |
|||
"label": "四川省", |
|||
"value": "51" |
|||
}, |
|||
{ |
|||
"label": "贵州省", |
|||
"value": "52" |
|||
}, |
|||
{ |
|||
"label": "云南省", |
|||
"value": "53" |
|||
}, |
|||
{ |
|||
"label": "西藏自治区", |
|||
"value": "54" |
|||
}, |
|||
{ |
|||
"label": "陕西省", |
|||
"value": "61" |
|||
}, |
|||
{ |
|||
"label": "甘肃省", |
|||
"value": "62" |
|||
}, |
|||
{ |
|||
"label": "青海省", |
|||
"value": "63" |
|||
}, |
|||
{ |
|||
"label": "宁夏回族自治区", |
|||
"value": "64" |
|||
}, |
|||
{ |
|||
"label": "新疆维吾尔自治区", |
|||
"value": "65" |
|||
}, |
|||
{ |
|||
"label": "台湾", |
|||
"value": "66" |
|||
}, |
|||
{ |
|||
"label": "香港", |
|||
"value": "67" |
|||
}, |
|||
{ |
|||
"label": "澳门", |
|||
"value": "68" |
|||
} |
|||
] |
|||
export default provinceData; |
|||
@ -0,0 +1,210 @@ |
|||
<template> |
|||
<div class="mpvue-picker"> |
|||
<div :class="{'pickerMask':showPicker}" @click="maskClick" catchtouchmove="true"></div> |
|||
<div class="mpvue-picker-content " :class="{'mpvue-picker-view-show':showPicker}"> |
|||
<div class="mpvue-picker__hd" catchtouchmove="true"> |
|||
<div class="mpvue-picker__action" @click="pickerCancel">取消</div> |
|||
<div class="mpvue-picker__action" :style="{color:themeColor}" @click="pickerConfirm">确定</div> |
|||
</div> |
|||
<picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChange"> |
|||
<block> |
|||
<picker-view-column> |
|||
<div class="picker-item" v-for="(item,index) in provinceDataList" :key="index">{{item.label}}</div> |
|||
</picker-view-column> |
|||
<picker-view-column> |
|||
<div class="picker-item" v-for="(item,index) in cityDataList" :key="index">{{item.label}}</div> |
|||
</picker-view-column> |
|||
<picker-view-column> |
|||
<div class="picker-item" v-for="(item,index) in areaDataList" :key="index">{{item.label}}</div> |
|||
</picker-view-column> |
|||
</block> |
|||
</picker-view> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import provinceData from './city-data/province.js'; |
|||
import cityData from './city-data/city.js'; |
|||
import areaData from './city-data/area.js'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
pickerValue: [0, 0, 0], |
|||
provinceDataList: [], |
|||
cityDataList: [], |
|||
areaDataList: [], |
|||
/* 是否显示控件 */ |
|||
showPicker: false, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.init() |
|||
}, |
|||
props: { |
|||
/* 默认值 */ |
|||
pickerValueDefault: { |
|||
type: Array, |
|||
default(){ |
|||
return [0, 0, 0] |
|||
} |
|||
}, |
|||
/* 主题色 */ |
|||
themeColor: String |
|||
}, |
|||
watch:{ |
|||
pickerValueDefault(){ |
|||
this.init(); |
|||
} |
|||
}, |
|||
methods: { |
|||
init() { |
|||
this.handPickValueDefault(); // 对 pickerValueDefault 做兼容处理 |
|||
this.provinceDataList = provinceData; |
|||
this.cityDataList = cityData[this.pickerValueDefault[0]]; |
|||
this.areaDataList = areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]]; |
|||
this.pickerValue = this.pickerValueDefault; |
|||
}, |
|||
show() { |
|||
setTimeout(() => { |
|||
this.showPicker = true; |
|||
}, 0); |
|||
}, |
|||
maskClick() { |
|||
this.pickerCancel(); |
|||
}, |
|||
pickerCancel() { |
|||
this.showPicker = false; |
|||
this._$emit('onCancel'); |
|||
}, |
|||
pickerConfirm(e) { |
|||
this.showPicker = false; |
|||
this._$emit('onConfirm'); |
|||
}, |
|||
showPickerView() { |
|||
this.showPicker = true; |
|||
}, |
|||
handPickValueDefault() { |
|||
if (this.pickerValueDefault !== [0, 0, 0]) { |
|||
if (this.pickerValueDefault[0] > provinceData.length - 1) { |
|||
this.pickerValueDefault[0] = provinceData.length - 1; |
|||
} |
|||
if (this.pickerValueDefault[1] > cityData[this.pickerValueDefault[0]].length - 1) { |
|||
this.pickerValueDefault[1] = cityData[this.pickerValueDefault[0]].length - 1; |
|||
} |
|||
if (this.pickerValueDefault[2] > areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]].length - 1) { |
|||
this.pickerValueDefault[2] = areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]].length - 1; |
|||
} |
|||
} |
|||
}, |
|||
pickerChange(e) { |
|||
let changePickerValue = e.mp.detail.value; |
|||
if (this.pickerValue[0] !== changePickerValue[0]) { |
|||
// 第一级发生滚动 |
|||
this.cityDataList = cityData[changePickerValue[0]]; |
|||
this.areaDataList = areaData[changePickerValue[0]][0]; |
|||
changePickerValue[1] = 0; |
|||
changePickerValue[2] = 0; |
|||
} else if (this.pickerValue[1] !== changePickerValue[1]) { |
|||
// 第二级滚动 |
|||
this.areaDataList = |
|||
areaData[changePickerValue[0]][changePickerValue[1]]; |
|||
changePickerValue[2] = 0; |
|||
} |
|||
this.pickerValue = changePickerValue; |
|||
this._$emit('onChange'); |
|||
}, |
|||
_$emit(emitName) { |
|||
let pickObj = { |
|||
label: this._getLabel(), |
|||
value: this.pickerValue, |
|||
cityCode: this._getCityCode() |
|||
}; |
|||
this.$emit(emitName, pickObj); |
|||
}, |
|||
_getLabel() { |
|||
let pcikerLabel = |
|||
this.provinceDataList[this.pickerValue[0]].label + |
|||
'-' + |
|||
this.cityDataList[this.pickerValue[1]].label + |
|||
'-' + |
|||
this.areaDataList[this.pickerValue[2]].label; |
|||
return pcikerLabel; |
|||
}, |
|||
_getCityCode() { |
|||
return this.areaDataList[this.pickerValue[2]].value; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
.pickerMask { |
|||
position: fixed; |
|||
z-index: 1000; |
|||
top: 0; |
|||
right: 0; |
|||
left: 0; |
|||
bottom: 0; |
|||
background: rgba(0, 0, 0, 0.6); |
|||
} |
|||
.mpvue-picker-content { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
transition: all 0.3s ease; |
|||
transform: translateY(100%); |
|||
z-index: 3000; |
|||
} |
|||
.mpvue-picker-view-show { |
|||
transform: translateY(0); |
|||
} |
|||
.mpvue-picker__hd { |
|||
display: flex; |
|||
padding: 9px 15px; |
|||
background-color: #fff; |
|||
position: relative; |
|||
text-align: center; |
|||
font-size: 17px; |
|||
} |
|||
.mpvue-picker__hd:after { |
|||
content: ' '; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
right: 0; |
|||
height: 1px; |
|||
border-bottom: 1px solid #e5e5e5; |
|||
color: #e5e5e5; |
|||
transform-origin: 0 100%; |
|||
transform: scaleY(0.5); |
|||
} |
|||
.mpvue-picker__action { |
|||
display: block; |
|||
flex: 1; |
|||
color: #1aad19; |
|||
} |
|||
.mpvue-picker__action:first-child { |
|||
text-align: left; |
|||
color: #888; |
|||
} |
|||
.mpvue-picker__action:last-child { |
|||
text-align: right; |
|||
} |
|||
.picker-item { |
|||
text-align: center; |
|||
line-height: 40px; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
font-size: 16px; |
|||
} |
|||
.mpvue-picker-view { |
|||
position: relative; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 238px; |
|||
background-color: rgba(255, 255, 255, 1); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,463 @@ |
|||
<template> |
|||
<view class="mpvue-picker"> |
|||
<view :class="{'pickerMask':showPicker}" @click="maskClick" catchtouchmove="true"></view> |
|||
<view class="mpvue-picker-content " :class="{'mpvue-picker-view-show':showPicker}"> |
|||
<view class="mpvue-picker__hd" catchtouchmove="true"> |
|||
<view class="mpvue-picker__action" @click="pickerCancel">取消</view> |
|||
<view class="mpvue-picker__action" :style="{color:themeColor}" @click="pickerConfirm">确定</view> |
|||
</view> |
|||
<!-- 单列 --> |
|||
<picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChange" v-if="mode==='selector' && pickerValueSingleArray.length > 0"> |
|||
<block> |
|||
<picker-view-column> |
|||
<view class="picker-item" v-for="(item,index) in pickerValueSingleArray" :key="index">{{item.label}}</view> |
|||
</picker-view-column> |
|||
</block> |
|||
</picker-view> |
|||
<!-- 时间选择器 --> |
|||
<picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChange" v-if="mode==='timeSelector'"> |
|||
<block> |
|||
<picker-view-column> |
|||
<view class="picker-item" v-for="(item,index) in pickerValueHour" :key="index">{{item.label}}</view> |
|||
</picker-view-column> |
|||
<picker-view-column> |
|||
<view class="picker-item" v-for="(item,index) in pickerValueMinute" :key="index">{{item.label}}</view> |
|||
</picker-view-column> |
|||
</block> |
|||
</picker-view> |
|||
<!-- 多列选择 --> |
|||
<picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChange" v-if="mode==='multiSelector'"> |
|||
<block v-for="(n,index) in pickerValueMulArray.length" :key="index"> |
|||
<picker-view-column> |
|||
<view class="picker-item" v-for="(item,index1) in pickerValueMulArray[n]" :key="index1">{{item.label}}</view> |
|||
</picker-view-column> |
|||
</block> |
|||
</picker-view> |
|||
<!-- 二级联动 --> |
|||
<picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChangeMul" v-if="mode==='multiLinkageSelector' && deepLength===2"> |
|||
<block> |
|||
<picker-view-column> |
|||
<view class="picker-item" v-for="(item,index) in pickerValueMulTwoOne" :key="index">{{item.label}}</view> |
|||
</picker-view-column> |
|||
<picker-view-column> |
|||
<view class="picker-item" v-for="(item,index) in pickerValueMulTwoTwo" :key="index">{{item.label}}</view> |
|||
</picker-view-column> |
|||
</block> |
|||
</picker-view> |
|||
<!-- 三级联动 --> |
|||
<picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChangeMul" v-if="mode==='multiLinkageSelector' && deepLength===3"> |
|||
<block> |
|||
<picker-view-column> |
|||
<view class="picker-item" v-for="(item,index) in pickerValueMulThreeOne" :key="index">{{item.label}}</view> |
|||
</picker-view-column> |
|||
<picker-view-column> |
|||
<view class="picker-item" v-for="(item,index) in pickerValueMulThreeTwo" :key="index">{{item.label}}</view> |
|||
</picker-view-column> |
|||
<picker-view-column> |
|||
<view class="picker-item" v-for="(item,index) in pickerValueMulThreeThree" :key="index">{{item.label}}</view> |
|||
</picker-view-column> |
|||
</block> |
|||
</picker-view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
pickerChangeValue: [], |
|||
pickerValue: [], |
|||
pickerValueArrayChange: true, |
|||
modeChange: false, |
|||
pickerValueSingleArray: [], |
|||
pickerValueHour: [], |
|||
pickerValueMinute: [], |
|||
pickerValueMulArray: [], |
|||
pickerValueMulTwoOne: [], |
|||
pickerValueMulTwoTwo: [], |
|||
pickerValueMulThreeOne: [], |
|||
pickerValueMulThreeTwo: [], |
|||
pickerValueMulThreeThree: [], |
|||
/* 是否显示控件 */ |
|||
showPicker: false, |
|||
}; |
|||
}, |
|||
props: { |
|||
/* mode */ |
|||
mode: { |
|||
type: String, |
|||
default: 'selector' |
|||
}, |
|||
/* picker 数值 */ |
|||
pickerValueArray: { |
|||
type: Array, |
|||
default(){ |
|||
return [] |
|||
} |
|||
}, |
|||
/* 默认值 */ |
|||
pickerValueDefault: { |
|||
type: Array, |
|||
default(){ |
|||
return [] |
|||
} |
|||
}, |
|||
/* 几级联动 */ |
|||
deepLength: { |
|||
type: Number, |
|||
default: 2 |
|||
}, |
|||
/* 主题色 */ |
|||
themeColor: String |
|||
}, |
|||
watch: { |
|||
pickerValueArray(oldVal, newVal) { |
|||
this.pickerValueArrayChange = true; |
|||
}, |
|||
mode(oldVal, newVal) { |
|||
this.modeChange = true; |
|||
}, |
|||
pickerValueArray(val){ |
|||
this.initPicker(val); |
|||
} |
|||
}, |
|||
methods: { |
|||
initPicker(valueArray) { |
|||
let pickerValueArray = valueArray; |
|||
this.pickerValue = this.pickerValueDefault; |
|||
// 初始化多级联动 |
|||
if (this.mode === 'selector') { |
|||
this.pickerValueSingleArray = valueArray; |
|||
} else if (this.mode === 'timeSelector') { |
|||
this.modeChange = false; |
|||
let hourArray = []; |
|||
let minuteArray = []; |
|||
for (let i = 0; i < 24; i++) { |
|||
hourArray.push({ |
|||
value: i, |
|||
label: i > 9 ? `${i} 时` : `0${i} 时` |
|||
}); |
|||
} |
|||
for (let i = 0; i < 60; i++) { |
|||
minuteArray.push({ |
|||
value: i, |
|||
label: i > 9 ? `${i} 分` : `0${i} 分` |
|||
}); |
|||
} |
|||
this.pickerValueHour = hourArray; |
|||
this.pickerValueMinute = minuteArray; |
|||
} else if (this.mode === 'multiSelector') { |
|||
this.pickerValueMulArray = valueArray; |
|||
} else if (this.mode === 'multiLinkageSelector' && this.deepLength === 2) { |
|||
// 两级联动 |
|||
let pickerValueMulTwoOne = []; |
|||
let pickerValueMulTwoTwo = []; |
|||
// 第一列 |
|||
for (let i = 0, length = pickerValueArray.length; i < length; i++) { |
|||
pickerValueMulTwoOne.push(pickerValueArray[i]); |
|||
} |
|||
// 渲染第二列 |
|||
// 如果有设定的默认值 |
|||
if (this.pickerValueDefault.length === 2) { |
|||
let num = this.pickerValueDefault[0]; |
|||
for ( |
|||
let i = 0, length = pickerValueArray[num].children.length; i < length; i++ |
|||
) { |
|||
pickerValueMulTwoTwo.push(pickerValueArray[num].children[i]); |
|||
} |
|||
} else { |
|||
for ( |
|||
let i = 0, length = pickerValueArray[0].children.length; i < length; i++ |
|||
) { |
|||
pickerValueMulTwoTwo.push(pickerValueArray[0].children[i]); |
|||
} |
|||
} |
|||
this.pickerValueMulTwoOne = pickerValueMulTwoOne; |
|||
this.pickerValueMulTwoTwo = pickerValueMulTwoTwo; |
|||
} else if ( |
|||
this.mode === 'multiLinkageSelector' && |
|||
this.deepLength === 3 |
|||
) { |
|||
let pickerValueMulThreeOne = []; |
|||
let pickerValueMulThreeTwo = []; |
|||
let pickerValueMulThreeThree = []; |
|||
// 第一列 |
|||
for (let i = 0, length = pickerValueArray.length; i < length; i++) { |
|||
pickerValueMulThreeOne.push(pickerValueArray[i]); |
|||
} |
|||
// 渲染第二列 |
|||
this.pickerValueDefault = |
|||
this.pickerValueDefault.length === 3 ? |
|||
this.pickerValueDefault : |
|||
[0, 0, 0]; |
|||
if (this.pickerValueDefault.length === 3) { |
|||
let num = this.pickerValueDefault[0]; |
|||
for ( |
|||
let i = 0, length = pickerValueArray[num].children.length; i < length; i++ |
|||
) { |
|||
pickerValueMulThreeTwo.push(pickerValueArray[num].children[i]); |
|||
} |
|||
// 第三列 |
|||
let numSecond = this.pickerValueDefault[1]; |
|||
for (let i = 0, length = pickerValueArray[num].children[numSecond].children.length; i < length; i++) { |
|||
pickerValueMulThreeThree.push( |
|||
pickerValueArray[num].children[numSecond].children[i] |
|||
); |
|||
} |
|||
} |
|||
this.pickerValueMulThreeOne = pickerValueMulThreeOne; |
|||
this.pickerValueMulThreeTwo = pickerValueMulThreeTwo; |
|||
this.pickerValueMulThreeThree = pickerValueMulThreeThree; |
|||
} |
|||
}, |
|||
show() { |
|||
setTimeout(() => { |
|||
if (this.pickerValueArrayChange || this.modeChange) { |
|||
this.initPicker(this.pickerValueArray); |
|||
this.showPicker = true; |
|||
this.pickerValueArrayChange = false; |
|||
this.modeChange = false; |
|||
} else { |
|||
this.showPicker = true; |
|||
} |
|||
}, 0); |
|||
}, |
|||
maskClick() { |
|||
this.pickerCancel(); |
|||
}, |
|||
pickerCancel() { |
|||
this.showPicker = false; |
|||
this._initPickerVale(); |
|||
let pickObj = { |
|||
index: this.pickerValue, |
|||
value: this._getPickerLabelAndValue(this.pickerValue, this.mode).value, |
|||
label: this._getPickerLabelAndValue(this.pickerValue, this.mode).label |
|||
}; |
|||
this.$emit('onCancel', pickObj); |
|||
}, |
|||
pickerConfirm(e) { |
|||
this.showPicker = false; |
|||
this._initPickerVale(); |
|||
let pickObj = { |
|||
index: this.pickerValue, |
|||
value: this._getPickerLabelAndValue(this.pickerValue, this.mode).value, |
|||
label: this._getPickerLabelAndValue(this.pickerValue, this.mode).label |
|||
}; |
|||
this.$emit('onConfirm', pickObj); |
|||
}, |
|||
showPickerView() { |
|||
this.showPicker = true; |
|||
}, |
|||
pickerChange(e) { |
|||
this.pickerValue = e.mp.detail.value; |
|||
let pickObj = { |
|||
index: this.pickerValue, |
|||
value: this._getPickerLabelAndValue(this.pickerValue, this.mode).value, |
|||
label: this._getPickerLabelAndValue(this.pickerValue, this.mode).label |
|||
}; |
|||
this.$emit('onChange', pickObj); |
|||
}, |
|||
pickerChangeMul(e) { |
|||
if (this.deepLength === 2) { |
|||
let pickerValueArray = this.pickerValueArray; |
|||
let changeValue = e.mp.detail.value; |
|||
// 处理第一列滚动 |
|||
if (changeValue[0] !== this.pickerValue[0]) { |
|||
let pickerValueMulTwoTwo = []; |
|||
// 第一列滚动第二列数据更新 |
|||
for (let i = 0, length = pickerValueArray[changeValue[0]].children.length; i < length; i++) { |
|||
pickerValueMulTwoTwo.push(pickerValueArray[changeValue[0]].children[i]); |
|||
} |
|||
this.pickerValueMulTwoTwo = pickerValueMulTwoTwo; |
|||
// 第二列初始化为 0 |
|||
changeValue[1] = 0; |
|||
} |
|||
this.pickerValue = changeValue; |
|||
} else if (this.deepLength === 3) { |
|||
let pickerValueArray = this.pickerValueArray; |
|||
let changeValue = e.mp.detail.value; |
|||
let pickerValueMulThreeTwo = []; |
|||
let pickerValueMulThreeThree = []; |
|||
// 重新渲染第二列 |
|||
// 如果是第一列滚动 |
|||
if (changeValue[0] !== this.pickerValue[0]) { |
|||
this.pickerValueMulThreeTwo = []; |
|||
for (let i = 0, length = pickerValueArray[changeValue[0]].children.length; i < length; i++) { |
|||
pickerValueMulThreeTwo.push(pickerValueArray[changeValue[0]].children[i]); |
|||
} |
|||
// 重新渲染第三列 |
|||
for (let i = 0, length = pickerValueArray[changeValue[0]].children[0].children.length; i < |
|||
length; i++) { |
|||
pickerValueMulThreeThree.push(pickerValueArray[changeValue[0]].children[0].children[i]); |
|||
} |
|||
changeValue[1] = 0; |
|||
changeValue[2] = 0; |
|||
this.pickerValueMulThreeTwo = pickerValueMulThreeTwo; |
|||
this.pickerValueMulThreeThree = pickerValueMulThreeThree; |
|||
} else if (changeValue[1] !== this.pickerValue[1]) { |
|||
// 第二列滚动 |
|||
// 重新渲染第三列 |
|||
this.pickerValueMulThreeThree = []; |
|||
pickerValueMulThreeTwo = this.pickerValueMulThreeTwo; |
|||
for (let i = 0, length = pickerValueArray[changeValue[0]].children[changeValue[1]].children.length; i < |
|||
length; i++) { |
|||
pickerValueMulThreeThree.push(pickerValueArray[changeValue[0]].children[changeValue[1]].children[ |
|||
i]); |
|||
} |
|||
changeValue[2] = 0; |
|||
this.pickerValueMulThreeThree = pickerValueMulThreeThree; |
|||
} |
|||
this.pickerValue = changeValue; |
|||
} |
|||
let pickObj = { |
|||
index: this.pickerValue, |
|||
value: this._getPickerLabelAndValue(this.pickerValue, this.mode).value, |
|||
label: this._getPickerLabelAndValue(this.pickerValue, this.mode).label |
|||
}; |
|||
this.$emit('onChange', pickObj); |
|||
}, |
|||
// 获取 pxikerLabel |
|||
_getPickerLabelAndValue(value, mode) { |
|||
let pickerLable; |
|||
let pickerGetValue = []; |
|||
// selector |
|||
if (mode === 'selector') { |
|||
pickerLable = this.pickerValueSingleArray[value].label; |
|||
pickerGetValue.push(this.pickerValueSingleArray[value].value); |
|||
} else if (mode === 'timeSelector') { |
|||
pickerLable = `${this.pickerValueHour[value[0]].label}-${this.pickerValueMinute[value[1]].label}`; |
|||
pickerGetValue.push(this.pickerValueHour[value[0]].value); |
|||
pickerGetValue.push(this.pickerValueHour[value[1]].value); |
|||
} else if (mode === 'multiSelector') { |
|||
for (let i = 0; i < value.length; i++) { |
|||
if (i > 0) { |
|||
pickerLable += this.pickerValueMulArray[i][value[i]].label + (i === value.length - 1 ? '' : |
|||
'-'); |
|||
} else { |
|||
pickerLable = this.pickerValueMulArray[i][value[i]].label + '-'; |
|||
} |
|||
pickerGetValue.push(this.pickerValueMulArray[i][value[i]].value); |
|||
} |
|||
} else if (mode === 'multiLinkageSelector') { |
|||
/* eslint-disable indent */ |
|||
pickerLable = |
|||
this.deepLength === 2 ? |
|||
`${this.pickerValueMulTwoOne[value[0]].label}-${this.pickerValueMulTwoTwo[value[1]].label}` : |
|||
`${this.pickerValueMulThreeOne[value[0]].label}-${this.pickerValueMulThreeTwo[value[1]].label}-${this.pickerValueMulThreeThree[value[2]].label}`; |
|||
if (this.deepLength === 2) { |
|||
pickerGetValue.push(this.pickerValueMulTwoOne[value[0]].value); |
|||
pickerGetValue.push(this.pickerValueMulTwoTwo[value[1]].value); |
|||
} else { |
|||
pickerGetValue.push(this.pickerValueMulThreeOne[value[0]].value); |
|||
pickerGetValue.push(this.pickerValueMulThreeTwo[value[1]].value); |
|||
pickerGetValue.push(this.pickerValueMulThreeThree[value[2]].value); |
|||
} |
|||
/* eslint-enable indent */ |
|||
} |
|||
return { |
|||
label: pickerLable, |
|||
value: pickerGetValue |
|||
}; |
|||
}, |
|||
// 初始化 pickerValue 默认值 |
|||
_initPickerVale() { |
|||
if (this.pickerValue.length === 0) { |
|||
if (this.mode === 'selector') { |
|||
this.pickerValue = [0]; |
|||
} else if (this.mode === 'multiSelector') { |
|||
this.pickerValue = new Int8Array(this.pickerValueArray.length); |
|||
} else if ( |
|||
this.mode === 'multiLinkageSelector' && |
|||
this.deepLength === 2 |
|||
) { |
|||
this.pickerValue = [0, 0]; |
|||
} else if ( |
|||
this.mode === 'multiLinkageSelector' && |
|||
this.deepLength === 3 |
|||
) { |
|||
this.pickerValue = [0, 0, 0]; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
.pickerMask { |
|||
position: fixed; |
|||
z-index: 1000; |
|||
top: 0; |
|||
right: 0; |
|||
left: 0; |
|||
bottom: 0; |
|||
background: rgba(0, 0, 0, 0.6); |
|||
} |
|||
|
|||
.mpvue-picker-content { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
transition: all 0.3s ease; |
|||
transform: translateY(100%); |
|||
z-index: 3000; |
|||
} |
|||
|
|||
.mpvue-picker-view-show { |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
.mpvue-picker__hd { |
|||
display: flex; |
|||
padding: 9px 15px; |
|||
background-color: #fff; |
|||
position: relative; |
|||
text-align: center; |
|||
font-size: 17px; |
|||
} |
|||
|
|||
.mpvue-picker__hd:after { |
|||
content: ' '; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
right: 0; |
|||
height: 1px; |
|||
border-bottom: 1px solid #e5e5e5; |
|||
color: #e5e5e5; |
|||
transform-origin: 0 100%; |
|||
transform: scaleY(0.5); |
|||
} |
|||
|
|||
.mpvue-picker__action { |
|||
display: block; |
|||
flex: 1; |
|||
color: #1aad19; |
|||
} |
|||
|
|||
.mpvue-picker__action:first-child { |
|||
text-align: left; |
|||
color: #888; |
|||
} |
|||
|
|||
.mpvue-picker__action:last-child { |
|||
text-align: right; |
|||
} |
|||
|
|||
.picker-item { |
|||
text-align: center; |
|||
line-height: 40px; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.mpvue-picker-view { |
|||
position: relative; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 238px; |
|||
background-color: rgba(255, 255, 255, 1); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,260 @@ |
|||
<template> |
|||
<view class="neil-modal" @touchmove.stop.prevent="bindTouchmove" :class="{'neil-modal--show':isOpen}"> |
|||
<view class="neil-modal__mask" @click="clickMask"></view> |
|||
<view class="neil-modal__container"> |
|||
<view class="neil-modal__header" v-if="title.length > 0">{{title}}</view> |
|||
<view class="neil-modal__content" :class="content ? 'neil-modal--padding' : ''" :style="{textAlign:align}"> |
|||
<template v-if="content"> |
|||
<text class="modal-content">{{content}}</text> |
|||
</template> |
|||
<template v-else> |
|||
<slot /> |
|||
</template> |
|||
</view> |
|||
<view class="neil-modal__footer"> |
|||
<view v-if="showCancel" class="neil-modal__footer-left" @click="clickLeft" :style="{color:cancelColor}" |
|||
hover-class="neil-modal__footer-hover" :hover-start-time="20" :hover-stay-time="70"> |
|||
{{cancelText}} |
|||
</view> |
|||
<view class="neil-modal__footer-right" @click="clickRight" :style="{color:confirmColor}" hover-class="neil-modal__footer-hover" |
|||
:hover-start-time="20" :hover-stay-time="70"> |
|||
{{confirmText}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'neil-modal', |
|||
props: { |
|||
title: { //标题 |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
content: String, //提示的内容 |
|||
align: { //content 的对齐方式left/center/right |
|||
type: String, |
|||
default: 'left' |
|||
}, |
|||
cancelText: { //取消按钮的文字，默认为"取消" |
|||
type: String, |
|||
default: '取消' |
|||
}, |
|||
cancelColor: { //取消按钮颜色 |
|||
type: String, |
|||
default: '#333333' |
|||
}, |
|||
confirmText: { //确定按钮的文字，默认为"确定" |
|||
type: String, |
|||
default: '确定' |
|||
}, |
|||
confirmColor: { //确认按钮颜色 |
|||
type: String, |
|||
default: '#007aff' |
|||
}, |
|||
showCancel: { //是否显示取消按钮，默认为 true |
|||
type: [Boolean, String], |
|||
default: true |
|||
}, |
|||
show: { //是否显示模态框 |
|||
type: [Boolean, String], |
|||
default: false |
|||
}, |
|||
autoClose: { //点击遮罩是否自动关闭弹窗 |
|||
type: [Boolean, String], |
|||
default: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
isOpen: false |
|||
} |
|||
}, |
|||
watch: { |
|||
show(val) { |
|||
this.isOpen = val |
|||
} |
|||
}, |
|||
created() { |
|||
this.isOpen = this.show |
|||
}, |
|||
methods: { |
|||
bindTouchmove() {}, |
|||
clickLeft() { |
|||
setTimeout(() => { |
|||
this.$emit('cancel') |
|||
}, 200) |
|||
this.closeModal() |
|||
}, |
|||
clickRight() { |
|||
setTimeout(() => { |
|||
this.$emit('confirm') |
|||
}, 200) |
|||
this.closeModal() |
|||
}, |
|||
clickMask(){ |
|||
if(this.autoClose){ |
|||
this.closeModal() |
|||
} |
|||
}, |
|||
closeModal() { |
|||
this.showAnimation = false |
|||
this.isOpen = false |
|||
this.$emit('close') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
$bg-color-mask:rgba(0, 0, 0, 0.5); //遮罩颜色 |
|||
$bg-color-hover:#f1f1f1; //点击状态颜色 |
|||
|
|||
.neil-modal { |
|||
position: fixed; |
|||
visibility: hidden; |
|||
width: 100%; |
|||
height: 100%; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 1000; |
|||
transition:visibility 200ms ease-in; |
|||
|
|||
&.neil-modal--show{ |
|||
visibility: visible; |
|||
} |
|||
|
|||
&__header { |
|||
position: relative; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
padding: 18upx 24upx; |
|||
line-height: 1.5; |
|||
color: #333; |
|||
font-size: 32upx; |
|||
text-align: center; |
|||
|
|||
&::after { |
|||
content: " "; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
right: 0; |
|||
height: 1px; |
|||
border-top: 1px solid #e5e5e5; |
|||
transform-origin: 0 0; |
|||
transform: scaleY(.5); |
|||
} |
|||
} |
|||
|
|||
&__container { |
|||
position: absolute; |
|||
z-index: 999; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%) ; |
|||
transition: transform 0.3s; |
|||
width: 540upx; |
|||
border-radius: 20upx; |
|||
background-color: #fff; |
|||
overflow: hidden; |
|||
opacity: 0; |
|||
transition: opacity 200ms ease-in; |
|||
} |
|||
|
|||
&__content { |
|||
position: relative; |
|||
color: #333; |
|||
font-size: 28upx; |
|||
box-sizing: border-box; |
|||
line-height: 1.5; |
|||
|
|||
&::after { |
|||
content: " "; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: -1px; |
|||
right: 0; |
|||
height: 1px; |
|||
border-bottom: 1px solid #e5e5e5; |
|||
transform-origin: 0 0; |
|||
transform: scaleY(.5); |
|||
} |
|||
} |
|||
|
|||
&__footer { |
|||
position: relative; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
color: #333; |
|||
font-size: 32upx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
|
|||
&-left, |
|||
&-right { |
|||
position: relative; |
|||
flex: 1; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
height: 88upx; |
|||
font-size: 28upx; |
|||
line-height: 88upx; |
|||
text-align: center; |
|||
background-color: #fff; |
|||
color: #333; |
|||
} |
|||
|
|||
&-right { |
|||
color: #007aff; |
|||
} |
|||
|
|||
&-left::after { |
|||
content: " "; |
|||
position: absolute; |
|||
right: -1px; |
|||
top: 0; |
|||
width: 1px; |
|||
bottom: 0; |
|||
border-right: 1px solid #e5e5e5; |
|||
transform-origin: 0 0; |
|||
transform: scaleX(.5); |
|||
} |
|||
|
|||
&-hover { |
|||
background-color: $bg-color-hover; |
|||
} |
|||
} |
|||
|
|||
&__mask { |
|||
display: block; |
|||
position: absolute; |
|||
z-index: 998; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: $bg-color-mask; |
|||
opacity: 0; |
|||
transition: opacity 200ms ease-in; |
|||
&.neil-modal--show{ |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
&--padding { |
|||
padding: 32upx 24upx; |
|||
min-height: 90upx; |
|||
} |
|||
&--show { |
|||
.neil-modal__container,.neil-modal__mask{ |
|||
opacity: 1; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,246 @@ |
|||
<template> |
|||
<view class="pay-type-list"> |
|||
|
|||
<view class="type-item b-b" v-for="item in payments" :key="item.code" @click="toPayHandler(item.code)" |
|||
v-if="!(type == 2 && item.code == 'balancepay')"> |
|||
<text v-if=" item.code == 'wechatpay'" class="icon yticon icon-weixinzhifu"></text> |
|||
<text v-if=" item.code == 'alipay'" class="icon yticon icon-alipay"></text> |
|||
<text v-if=" item.code == 'offline'" class="icon yticon icon-weixinzhifu"></text> |
|||
<text v-if=" item.code == 'balancepay'" class="icon yticon icon-erjiye-yucunkuan"></text> |
|||
|
|||
<view class="con"> |
|||
<text class="tit">{{ item.name }}</text> |
|||
<text>{{ item.memo }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import { apiBaseUrl } from '@/config/config.js'; |
|||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue'; |
|||
import Api from '@/common/api'; |
|||
export default { |
|||
props: { |
|||
// 如果是商品订单此参数必须 |
|||
orderId: { |
|||
type: String, |
|||
default () { |
|||
return ''; |
|||
} |
|||
}, |
|||
// 如果是充值订单此参数必须 |
|||
recharge: { |
|||
type: Number, |
|||
default () { |
|||
return 0; |
|||
} |
|||
}, |
|||
// 用户id |
|||
uid: { |
|||
type: Number, |
|||
default () { |
|||
return 0; |
|||
} |
|||
}, |
|||
// 订单类型 |
|||
type: { |
|||
type: Number, |
|||
default () { |
|||
return 1; |
|||
} |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
payments: [] |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.getPayments(); |
|||
}, |
|||
methods: { |
|||
// 获取可用支付方式列表 |
|||
async getPayments () { |
|||
|
|||
let params = {}; |
|||
this.orderInfo = await Api.apiCall('get',Api.order.paymentlist,params); |
|||
this.payments = this.formatPayments(this.orderInfo) |
|||
|
|||
}, |
|||
// 支付方式处理 |
|||
formatPayments (payments) { |
|||
payments = payments.filter(item => item.code !== 'wechatpay'); |
|||
|
|||
|
|||
// 如果是充值订单 过滤余额支付 过滤非线上支付方式 |
|||
if (this.type === 2) { |
|||
payments = payments.filter(item => item.code !== 'balancepay' || item.is_online === 1) |
|||
} |
|||
|
|||
// 设置logo图片 |
|||
payments.forEach(item => { |
|||
this.$set(item, 'icon', '/static/image/' + item.code + '.png'); |
|||
}); |
|||
|
|||
return payments; |
|||
}, |
|||
// 用户点击支付方式处理 |
|||
async toPayHandler (code) { |
|||
let params = {'orderId':this.orderId}; |
|||
let data = { |
|||
payment_code: code, |
|||
payment_type: this.type |
|||
} |
|||
data['ids'] = (this.type == 1 || this.type == 5 || this.type == 6) ? this.orderId : this.uid |
|||
|
|||
// 判断订单支付类型 |
|||
if (this.type == 2 && this.recharge) { |
|||
data['params'] = { |
|||
money: this.recharge, |
|||
trade_type: 'JSAPI' |
|||
} |
|||
} else if ((this.type == 5 || this.type == 6) && this.recharge) { |
|||
data['params'] = { |
|||
trade_type: 'JSAPI', |
|||
formid: this.orderId |
|||
} |
|||
}else { |
|||
data['params'] = { |
|||
trade_type: 'JSAPI' |
|||
} |
|||
} |
|||
|
|||
|
|||
let _this = this; |
|||
switch (code) { |
|||
case 'alipay': |
|||
let res = await Api.apiCall('get',Api.order.webPay,params); |
|||
console.log(res); |
|||
if (res) { |
|||
|
|||
uni.requestPayment({ |
|||
provider: 'alipay', |
|||
tradeNO:res.data.trade_no, |
|||
success: function (e) { |
|||
if (e.errMsg === 'requestPayment:ok') { |
|||
_this.$common.successToShow(res.msg, () => { |
|||
_this.$common.redirectTo('/pages/order/payment/result?id=' + res.data.id); |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
} else { |
|||
this.$common.errorToShow(res.msg); |
|||
|
|||
} |
|||
break |
|||
case 'balancepay': |
|||
//用户余额支付 |
|||
let params1 = {'orderId':this.orderId}; |
|||
let data1 = await Api.apiCall('post',Api.order.balancePay,params1); |
|||
console.log(data1) |
|||
if (data1) { |
|||
uni.redirectTo({ |
|||
url: '/pages/order/payment/result?order=' + JSON.stringify(data1) |
|||
}) |
|||
}else { |
|||
this.$api.msg('余额支付失败'); |
|||
} |
|||
break; |
|||
case 'offline': |
|||
//线下支付 |
|||
this.$common.modelShow('线下支付说明', '请联系客服进行线下支付',() => {}, false, '取消', '确定') |
|||
break; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
.app { |
|||
width: 100%; |
|||
} |
|||
|
|||
.price-box { |
|||
background-color: #fff; |
|||
height: 265upx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 28upx; |
|||
color: #909399; |
|||
|
|||
.price{ |
|||
font-size: 50upx; |
|||
color: #303133; |
|||
margin-top: 12upx; |
|||
&:before{ |
|||
content: '￥'; |
|||
font-size: 40upx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.pay-type-list { |
|||
margin-top: 20upx; |
|||
background-color: #fff; |
|||
padding-left: 60upx; |
|||
|
|||
.type-item{ |
|||
height: 120upx; |
|||
padding: 20upx 0; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding-right: 60upx; |
|||
font-size: 30upx; |
|||
position:relative; |
|||
} |
|||
|
|||
.icon{ |
|||
width: 100upx; |
|||
font-size: 52upx; |
|||
} |
|||
.icon-erjiye-yucunkuan { |
|||
color: #fe8e2e; |
|||
} |
|||
.icon-weixinzhifu { |
|||
color: #36cb59; |
|||
} |
|||
.icon-alipay { |
|||
color: #01aaef; |
|||
} |
|||
.tit{ |
|||
font-size: $font-lg; |
|||
color: $font-color-dark; |
|||
margin-bottom: 4upx; |
|||
} |
|||
.con{ |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
font-size: $font-sm; |
|||
color: $font-color-light; |
|||
} |
|||
} |
|||
.mix-btn { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 630upx; |
|||
height: 80upx; |
|||
margin: 80upx auto 30upx; |
|||
font-size: $font-lg; |
|||
color: #fff; |
|||
background-color: $base-color; |
|||
border-radius: 10upx; |
|||
box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4); |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,287 @@ |
|||
<template> |
|||
<view class="pay-type-list"> |
|||
<view class="type-item b-b" v-for="item in paymentss" :key="item.code" @click="toPayHandler(item.code)" v-if="!(type == 2 && item.code == 'balancepay')"> |
|||
<text v-if="item.code == 'wechatpay'" class="icon yticon icon-weixinzhifu"></text> |
|||
<text v-if="item.code == 'alipay'" class="icon yticon icon-alipay"></text> |
|||
<text v-if="item.code == 'offline'" class="icon yticon icon-weixinzhifu"></text> |
|||
<text v-if="item.code == 'balancepay'" class="icon yticon icon-erjiye-yucunkuan"></text> |
|||
|
|||
<view class="con"> |
|||
<text class="tit">{{ item.name }}</text> |
|||
<text>{{ item.memo }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue'; |
|||
import Api from '@/common/api'; |
|||
export default { |
|||
props: { |
|||
// 如果是商品订单此参数必须 |
|||
orderId: { |
|||
type: String, |
|||
default() { |
|||
return ''; |
|||
} |
|||
}, |
|||
// 如果是充值订单此参数必须 |
|||
recharge: { |
|||
type: Number, |
|||
default() { |
|||
return 0; |
|||
} |
|||
}, |
|||
// 用户id |
|||
uid: { |
|||
type: Number, |
|||
default() { |
|||
return 0; |
|||
} |
|||
}, |
|||
// 订单类型 |
|||
type: { |
|||
type: Number, |
|||
default() { |
|||
return 1; |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
paymentss: [] |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.getPayment(); |
|||
}, |
|||
methods: { |
|||
// 获取可用支付方式列表 |
|||
async getPayment() { |
|||
console.log('getPayments'); |
|||
let params = {}; |
|||
this.orderInfo = await Api.apiCall('get', Api.order.paymentlist, params); |
|||
this.paymentss = this.formatPayments(this.orderInfo); |
|||
}, |
|||
// 支付方式处理 |
|||
formatPayments(payments) { |
|||
// 如果是充值订单 过滤余额支付 过滤非线上支付方式 |
|||
if (this.type === 2) { |
|||
payments = payments.filter(item => item.code !== 'balancepay' || item.is_online === 1); |
|||
} |
|||
|
|||
// 设置logo图片 |
|||
payments.forEach(item => { |
|||
this.$set(item, 'icon', '/static/image/' + item.code + '.png'); |
|||
}); |
|||
return payments; |
|||
}, |
|||
// 用户点击支付方式处理 |
|||
async toPayHandler(code) { |
|||
let _this = this; |
|||
let params = { orderId: this.orderId }; |
|||
let data = { |
|||
payment_code: code, |
|||
payment_type: _this.type |
|||
}; |
|||
|
|||
data['ids'] = this.type == 1 || this.type == 5 || this.type == 6 ? this.orderId : this.uid; |
|||
if ((this.type == 5 || this.type == 6) && this.recharge) { |
|||
data['params'] = { |
|||
trade_type: 'APP', |
|||
formid: this.orderId |
|||
}; |
|||
} |
|||
switch (code) { |
|||
case 'alipay': |
|||
/** |
|||
* 支付宝支付需要模拟GET提交数据 |
|||
*/ |
|||
if (_this.type == 1 && _this.orderId) { |
|||
data['params'] = { |
|||
trade_type: 'APP' |
|||
}; |
|||
} else if (_this.type == 2 && _this.recharge) { |
|||
data['params'] = { |
|||
trade_type: 'APP', |
|||
money: _this.recharge |
|||
}; |
|||
} |
|||
|
|||
let res = await Api.apiCall('get', Api.order.aliAppPay, params); |
|||
if (res) { |
|||
console.log(res); |
|||
uni.requestPayment({ |
|||
provider: 'alipay', |
|||
orderInfo: res, |
|||
success: function(data) { |
|||
let rawdataResult = JSON.parse(data.rawdata).result; |
|||
let r = rawdataResult.split(';')[0]; |
|||
let r1 = rawdataResult.split(';')[0].length - 1; |
|||
let r2 = rawdataResult.split(';')[0].length - 2; |
|||
let alipayTradeAppPayResponse = JSON.parse(r.substr(0, r1)).alipay_trade_app_pay_response; |
|||
let out_trade_no = alipayTradeAppPayResponse.out_trade_no; |
|||
_this.$common.successToShow('支付成功', () => { |
|||
//_this.redirectHandler(res.data.payment_id) |
|||
_this.redirectHandler(out_trade_no); |
|||
}); |
|||
} |
|||
}); |
|||
} else { |
|||
_this.$comon.errorToShow(res.msg); |
|||
} |
|||
|
|||
break; |
|||
case 'wechatpay': |
|||
// 微信 H5支付 |
|||
if (_this.type == 1 && _this.orderId) { |
|||
data['params'] = { |
|||
trade_type: 'APP' |
|||
}; |
|||
} else if (_this.type == 2 && _this.recharge) { |
|||
data['params'] = { |
|||
trade_type: 'APP', |
|||
money: _this.recharge |
|||
}; |
|||
} |
|||
|
|||
// 微信app支付 |
|||
let res1 = await Api.apiCall('get', Api.order.appPay, params); |
|||
debugger |
|||
console.log(res1) |
|||
console.log(data) |
|||
if (res1) { |
|||
// 调用微信支付 |
|||
uni.requestPayment({ |
|||
provider: 'wxpay', |
|||
orderInfo: res1, |
|||
success: function(data) { |
|||
console.log(res1) |
|||
console.log(data) |
|||
_this.$common.successToShow('支付成功', () => { |
|||
_this.redirectHandler(data); |
|||
}); |
|||
}, |
|||
fail: function(res) { |
|||
console.log(JSON.stringify(res)); |
|||
} |
|||
}); |
|||
} else { |
|||
_this.$common.errorToShow(res.msg); |
|||
} |
|||
|
|||
break; |
|||
case 'balancepay': |
|||
/** |
|||
* 用户余额支付 |
|||
* |
|||
*/ |
|||
let params1 = { orderId: this.orderId }; |
|||
let data1 = await Api.apiCall('post', Api.order.balancePay, params1); |
|||
console.log(data1); |
|||
if (data1) { |
|||
uni.redirectTo({ |
|||
url: '/pages/order/payment/result?order=' + JSON.stringify(data1) |
|||
}); |
|||
} else { |
|||
this.$api.msg(data1.data); |
|||
} |
|||
break; |
|||
case 'offline': |
|||
/** |
|||
* 线下支付 |
|||
*/ |
|||
_this.$common.modelShow('线下支付说明', '请联系客服进行线下支付', () => {}, false, '取消', '确定'); |
|||
break; |
|||
} |
|||
}, |
|||
// 支付成功后跳转操作 |
|||
redirectHandler(paymentId) { |
|||
this.$common.redirectTo('/pages/order/payment/result?id=' + paymentId); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="scss"> |
|||
.app { |
|||
width: 100%; |
|||
} |
|||
|
|||
.price-box { |
|||
background-color: #fff; |
|||
height: 265upx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 28upx; |
|||
color: #909399; |
|||
|
|||
.price { |
|||
font-size: 50upx; |
|||
color: #303133; |
|||
margin-top: 12upx; |
|||
&:before { |
|||
content: '￥'; |
|||
font-size: 40upx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.pay-type-list { |
|||
margin-top: 20upx; |
|||
background-color: #fff; |
|||
padding-left: 60upx; |
|||
|
|||
.type-item { |
|||
height: 120upx; |
|||
padding: 20upx 0; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding-right: 60upx; |
|||
font-size: 30upx; |
|||
position: relative; |
|||
} |
|||
|
|||
.icon { |
|||
width: 100upx; |
|||
font-size: 52upx; |
|||
} |
|||
.icon-erjiye-yucunkuan { |
|||
color: #fe8e2e; |
|||
} |
|||
.icon-weixinzhifu { |
|||
color: #36cb59; |
|||
} |
|||
.icon-alipay { |
|||
color: #01aaef; |
|||
} |
|||
.tit { |
|||
font-size: $font-lg; |
|||
color: $font-color-dark; |
|||
margin-bottom: 4upx; |
|||
} |
|||
.con { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
font-size: $font-sm; |
|||
color: $font-color-light; |
|||
} |
|||
} |
|||
.mix-btn { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 630upx; |
|||
height: 80upx; |
|||
margin: 80upx auto 30upx; |
|||
font-size: $font-lg; |
|||
color: #fff; |
|||
background-color: $base-color; |
|||
border-radius: 10upx; |
|||
box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,412 @@ |
|||
<template> |
|||
<view class="pay-type-list"> |
|||
|
|||
<view class="type-item b-b" v-for="item in payments" :key="item.code" @click="toPayHandler(item.code)" |
|||
v-if="!(type == 2 && item.code == 'balancepay')"> |
|||
<text v-if=" item.code == 'wechatpay'" class="icon yticon icon-weixinzhifu"></text> |
|||
<text v-if=" item.code == 'alipay'" class="icon yticon icon-alipay"></text> |
|||
<text v-if=" item.code == 'offline'" class="icon yticon icon-weixinzhifu"></text> |
|||
<text v-if=" item.code == 'balancepay'" class="icon yticon icon-erjiye-yucunkuan"></text> |
|||
<view class="con"> |
|||
<text class="tit">{{ item.name }}</text> |
|||
<text>{{ item.memo }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!--<view class='cell-group payment-method'> |
|||
<view class='cell-item add-title-item' v-for="item in payments" :key="item.code" @click="toPayHandler(item.code)" |
|||
v-if="!(type == 2 && item.code == 'balancepay')"> |
|||
<view class='cell-item-hd'> |
|||
<image class='cell-hd-icon' :src='item.icon'></image> |
|||
</view> |
|||
<view class='cell-item-bd'> |
|||
<view class="cell-bd-view"> |
|||
<text class="cell-bd-text">{{ item.name }}</text> |
|||
</view> |
|||
<view class="cell-bd-view"> |
|||
<text class="cell-bd-text address">{{ item.memo }}</text> |
|||
</view> |
|||
</view> |
|||
<view class='cell-item-ft'> |
|||
<image class='cell-ft-next icon' src='../../../static/image/right.png'></image> |
|||
</view> |
|||
</view> |
|||
</view>--> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
baseUrl |
|||
} from '@/config/config.js' |
|||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue'; |
|||
import Api from '@/common/api'; |
|||
export default { |
|||
props: { |
|||
// 如果是商品订单此参数必须 |
|||
orderId: { |
|||
type: String, |
|||
default () { |
|||
return '' |
|||
} |
|||
}, |
|||
// 如果是充值订单此参数必须 |
|||
recharge: { |
|||
type: Number, |
|||
default () { |
|||
return 0 |
|||
} |
|||
}, |
|||
// 用户id |
|||
uid: { |
|||
type: Number, |
|||
default () { |
|||
return 0 |
|||
} |
|||
}, |
|||
// 订单类型 |
|||
type: { |
|||
type: Number, |
|||
default () { |
|||
return 1 |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
payments: [], |
|||
openid: '' |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getPayments() |
|||
}, |
|||
methods: { |
|||
// 获取可用支付方式列表 |
|||
async getPayments() { |
|||
let params = {}; |
|||
this.orderInfo = await Api.apiCall('get',Api.order.paymentlist,params); |
|||
this.payments = this.formatPayments(this.orderInfo) |
|||
}, |
|||
// 支付方式处理 |
|||
formatPayments(payments) { |
|||
// h5支付并且是在微信浏览器内 过滤支付宝支付 |
|||
if (this.$common.isWeiXinBrowser()) { |
|||
payments = payments.filter(item => item.code !== 'alipay') |
|||
} |
|||
|
|||
// 如果是充值订单 过滤余额支付 过滤非线上支付方式 |
|||
if (this.type === 2) { |
|||
payments = payments.filter( |
|||
item => item.code !== 'balancepay' || item.is_online === 1 |
|||
) |
|||
} |
|||
|
|||
// 设置logo图片 |
|||
payments.forEach(item => { |
|||
this.$set(item, 'icon', '/static/image/' + item.code + '.png') |
|||
}) |
|||
console.log(payments) |
|||
return payments |
|||
}, |
|||
checkWXJSBridge(data) { |
|||
let that = this |
|||
let interval = setInterval(() => { |
|||
if (typeof window.WeixinJSBridge != 'undefined') { |
|||
clearTimeout(interval) |
|||
that.onBridgeReady(data) |
|||
} |
|||
}, 200) |
|||
}, |
|||
onBridgeReady(data) { |
|||
var _this = this |
|||
window.WeixinJSBridge.invoke( |
|||
'getBrandWCPayRequest', { |
|||
appId: data.appId, // 公众号名称，由商户传入 |
|||
timeStamp: data.timeStamp, // 时间戳，自1970年以来的秒数 |
|||
nonceStr: data.nonceStr, // 随机串 |
|||
package: data.package, |
|||
signType: data.signType, // 微信签名方式： |
|||
paySign: data.paySign // 微信签名 |
|||
}, |
|||
function(res) { |
|||
if (res.err_msg === 'get_brand_wcpay_request:ok') { |
|||
_this.$common.successToShow('支付成功') |
|||
} else if (res.err_msg === 'get_brand_wcpay_request:cancel') { |
|||
_this.$common.errorToShow('取消支付') |
|||
} else { |
|||
_this.$common.errorToShow('支付失败') |
|||
} |
|||
setTimeout(() => { |
|||
_this.$common.redirectTo( |
|||
'/pages/order/payment/result?id=' + data.payment_id |
|||
) |
|||
}, 1000) |
|||
} |
|||
) |
|||
}, |
|||
// 用户点击支付方式处理 |
|||
async toPayHandler(code) { |
|||
let params = {'orderId':this.orderId}; |
|||
let data = { |
|||
payment_code: code, |
|||
payment_type: this.type |
|||
} |
|||
data['orderId'] = (this.type == 1 || this.type == 5 || this.type == 6) ? this.orderId : this.uid |
|||
switch (code) { |
|||
case 'alipay': |
|||
|
|||
let res = await Api.apiCall('get',Api.order.aliWapPay,params); |
|||
console.log('============================') |
|||
console.log(res); |
|||
console.log('success:' + JSON.stringify(res)); |
|||
if (res) { |
|||
|
|||
document.body.appendChild(JSON.stringify(res)) |
|||
let testForm = document.getElementsByName('punchout_form') |
|||
// 模拟GET提交 |
|||
/* |
|||
const url = res.data.url |
|||
const data = res.data.data |
|||
let tempForm = document.createElement('form') |
|||
tempForm.id = 'aliPay' |
|||
tempForm.methods = 'post' |
|||
tempForm.action = url |
|||
tempForm.target = '_self' |
|||
let input = [] |
|||
for (let k in data) { |
|||
input[k] = document.createElement('input') |
|||
input[k].type = 'hidden' |
|||
input[k].name = k |
|||
input[k].value = data[k] |
|||
tempForm.appendChild(input[k]) |
|||
} |
|||
tempForm.addEventListener('submit', function() {}, false) |
|||
document.body.appendChild(tempForm)*/ |
|||
testForm.dispatchEvent(new Event('submit')) |
|||
console.log(tempForm); |
|||
testForm.submit() |
|||
document.body.removeChild(testForm) |
|||
|
|||
} |
|||
break |
|||
case 'wechatpay': |
|||
|
|||
/** |
|||
* 微信支付有两种 |
|||
* 判断是否在微信浏览器 |
|||
* 微信jsapi支付 |
|||
*/ |
|||
let isWeiXin = this.$common.isWeiXinBrowser() |
|||
|
|||
if (isWeiXin) { |
|||
var transitUrl = |
|||
baseUrl + |
|||
'wap/#/pages/order/payment/auth?order_id=' + |
|||
this.orderId + |
|||
'&type=' + |
|||
this.type; |
|||
|
|||
if (this.type == 1 && this.orderId) { |
|||
// 微信jsapi支付 |
|||
// if (this.openid) { |
|||
// data['params'] = { |
|||
// trade_type: 'JSAPI_OFFICIAL', |
|||
// openid: this.openid |
|||
// } |
|||
// } else { |
|||
// data['params'] = { |
|||
// trade_type: 'JSAPI_OFFICIAL', |
|||
// url: window.location.href |
|||
// } |
|||
// } |
|||
data['params'] = { |
|||
trade_type: 'JSAPI_OFFICIAL', |
|||
url: transitUrl |
|||
} |
|||
} else if (this.type == 2 && this.recharge) { |
|||
data['params'] = { |
|||
trade_type: 'JSAPI_OFFICIAL', |
|||
money: this.recharge, |
|||
url: transitUrl + '&uid=' + this.uid + '&money=' + this.recharge |
|||
} |
|||
// if (this.openid) { |
|||
// data['params'] = { |
|||
// money: this.recharge, |
|||
// openid: this.openid |
|||
// } |
|||
// } else { |
|||
// data['params'] = { |
|||
// money: this.recharge, |
|||
// url: window.location.href |
|||
// } |
|||
// } |
|||
} else if ((this.type == 5 || this.type == 6) && this.recharge) { |
|||
data['params'] = { |
|||
orderId: this.orderId |
|||
} |
|||
} |
|||
let res = await Api.apiCall('get',Api.order.webPay,params); |
|||
console.log(res); |
|||
if (res) { |
|||
this.checkWXJSBridge(res) |
|||
}else{ |
|||
window.location.href = res.msg |
|||
return; |
|||
} |
|||
} else { |
|||
// 微信 H5支付 |
|||
if (this.type == 1 && this.orderId) { |
|||
data['params'] = { |
|||
trade_type: 'MWEB', |
|||
return_url: baseUrl + |
|||
'wap/#/pages/order/payment/result' |
|||
} |
|||
} else if (this.type == 2 && this.recharge) { |
|||
data['params'] = { |
|||
trade_type: 'MWEB', |
|||
money: this.recharge, |
|||
return_url: baseUrl + 'wap/#/pages/order/payment/result' |
|||
} |
|||
} else if ((this.type == 5 || this.type == 6) && this.recharge) { |
|||
data['params'] = { |
|||
orderId: this.orderId |
|||
} |
|||
} |
|||
console.log(data); |
|||
// 微信h5支付 |
|||
let res = await Api.apiCall('get',Api.order.wapPay,params); |
|||
console.log(res); |
|||
if (res) { |
|||
|
|||
if (res) { |
|||
location.href = res |
|||
} else { |
|||
this.$common.errorToShow(res) |
|||
} |
|||
} |
|||
} |
|||
break |
|||
case 'balancepay': |
|||
/** |
|||
* 用户余额支付 |
|||
* |
|||
*/ |
|||
if ((this.type == 5 || this.type == 6) && this.recharge) { |
|||
data['params'] = { |
|||
orderId: this.orderId |
|||
} |
|||
} |
|||
let params1 = {'orderId':this.orderId}; |
|||
let data1 = await Api.apiCall('post',Api.order.balancePay,params1); |
|||
console.log(data1) |
|||
if (data1) { |
|||
uni.redirectTo({ |
|||
url: '/pages/order/payment/result?order=' + JSON.stringify(data1) |
|||
}) |
|||
}else { |
|||
this.$api.msg(data1.data); |
|||
} |
|||
|
|||
break |
|||
case 'offline': |
|||
/** |
|||
* 线下支付 |
|||
*/ |
|||
this.$common.modelShow( |
|||
'线下支付说明', |
|||
'请联系客服进行线下支付qq:951449465', |
|||
() => {}, |
|||
false, |
|||
'取消', |
|||
'确定' |
|||
) |
|||
break |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
.app { |
|||
width: 100%; |
|||
} |
|||
|
|||
.price-box { |
|||
background-color: #fff; |
|||
height: 265upx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 28upx; |
|||
color: #909399; |
|||
|
|||
.price{ |
|||
font-size: 50upx; |
|||
color: #303133; |
|||
margin-top: 12upx; |
|||
&:before{ |
|||
content: '￥'; |
|||
font-size: 40upx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.pay-type-list { |
|||
margin-top: 20upx; |
|||
background-color: #fff; |
|||
padding-left: 60upx; |
|||
|
|||
.type-item{ |
|||
height: 120upx; |
|||
padding: 20upx 0; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding-right: 60upx; |
|||
font-size: 30upx; |
|||
position:relative; |
|||
} |
|||
|
|||
.icon{ |
|||
width: 100upx; |
|||
font-size: 52upx; |
|||
} |
|||
.icon-erjiye-yucunkuan { |
|||
color: #fe8e2e; |
|||
} |
|||
.icon-weixinzhifu { |
|||
color: #36cb59; |
|||
} |
|||
.icon-alipay { |
|||
color: #01aaef; |
|||
} |
|||
.tit{ |
|||
font-size: $font-lg; |
|||
color: $font-color-dark; |
|||
margin-bottom: 4upx; |
|||
} |
|||
.con{ |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
font-size: $font-sm; |
|||
color: $font-color-light; |
|||
} |
|||
} |
|||
.mix-btn { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 630upx; |
|||
height: 80upx; |
|||
margin: 80upx auto 30upx; |
|||
font-size: $font-lg; |
|||
color: #fff; |
|||
background-color: $base-color; |
|||
border-radius: 10upx; |
|||
box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4); |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,249 @@ |
|||
<template> |
|||
<view class="pay-type-list"> |
|||
|
|||
<view class="type-item b-b" v-for="item in payments" :key="item.code" |
|||
report-submit="true" @click="toPayHandler(item.code)" |
|||
v-if="!(type == 2 && item.code == 'balancepay')"> |
|||
<!-- <text class="icon yticon icon-weixinzhifu"></text> --> |
|||
<image :src="item.img" style="width: 80upx;height: 80upx;margin-right: 20upx;"></image> |
|||
<view class="con"> |
|||
<text class="tit">{{ item.name }}</text> |
|||
<text>{{ item.memo }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import { apiBaseUrl } from '@/config/config.js' |
|||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue'; |
|||
import Api from '@/common/api'; |
|||
export default { |
|||
props: { |
|||
// 如果是商品订单此参数必须 |
|||
orderId: { |
|||
type: String, |
|||
default () { |
|||
return '' |
|||
} |
|||
}, |
|||
// 如果是充值订单此参数必须 |
|||
recharge: { |
|||
type: Number, |
|||
default () { |
|||
return 0 |
|||
} |
|||
}, |
|||
// 用户id |
|||
uid: { |
|||
type: Number, |
|||
default () { |
|||
return 0 |
|||
} |
|||
}, |
|||
// 订单类型 |
|||
type: { |
|||
type: Number, |
|||
default () { |
|||
return 1 |
|||
} |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
payments: [], |
|||
imgList: [ |
|||
'/static/image/wechatpay.png','/static/image/balancepay.png','/static/image/payment_balance.png', |
|||
] |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.getPayments() |
|||
}, |
|||
methods: { |
|||
// 获取可用支付方式列表 |
|||
async getPayments () { |
|||
|
|||
let params = {}; |
|||
this.orderInfo = await Api.apiCall('get',Api.order.paymentlist,params); |
|||
this.payments = this.formatPayments(this.orderInfo) |
|||
for(var i = 0;i < this.payments.length;i++){ |
|||
this.payments[i].img = this.imgList[i] |
|||
} |
|||
console.log('------',this.payments) |
|||
}, |
|||
|
|||
// 支付方式处理 |
|||
formatPayments (payments) { |
|||
// 过滤支付宝支付 |
|||
payments = payments.filter(item => item.code !== 'alipay') |
|||
|
|||
// 如果是充值订单 过滤余额支付 过滤非线上支付方式 |
|||
if (this.type === 2) { |
|||
payments = payments.filter(item => item.code !== 'balancepay' || item.is_online === 1) |
|||
} |
|||
|
|||
// 设置logo图片 |
|||
payments.forEach(item => { |
|||
this.$set(item, 'icon', '/static/image/' + item.code + '.png') |
|||
}) |
|||
|
|||
return payments |
|||
}, |
|||
// 用户点击支付方式处理 |
|||
async toPayHandler (code) { |
|||
|
|||
let params = {'orderId':this.orderId, |
|||
payment_type: this.type}; |
|||
|
|||
|
|||
// 判断订单支付类型 |
|||
if (this.type == 2 && this.recharge) { |
|||
|
|||
}else if ((this.type == 5 || this.type == 6) && this.recharge) { |
|||
|
|||
} |
|||
let _this = this |
|||
switch (code) { |
|||
case 'wechatpay': |
|||
|
|||
let res = await Api.apiCall('post',Api.order.weixinAppletPay,params); |
|||
console.log(res); |
|||
if (res) { |
|||
|
|||
uni.requestPayment({ |
|||
provider: 'wxpay', |
|||
timeStamp: res.timeStamp, |
|||
nonceStr: res.nonceStr, |
|||
package: res.package, |
|||
signType: res.signType, |
|||
paySign: res.paySign, |
|||
success: function (e) { |
|||
if (e.errMsg === 'requestPayment:ok') { |
|||
_this.$common.successToShow(res.msg, () => { |
|||
_this.$common.redirectTo('/pages/order/payment/result?id=' + res.id) |
|||
}) |
|||
}else{ |
|||
this.$common.errorToShow(res.msg) |
|||
} |
|||
} |
|||
}); |
|||
} else { |
|||
this.$common.errorToShow(res.msg) |
|||
} |
|||
|
|||
break |
|||
case 'balancepay': |
|||
/** |
|||
* 用户余额支付 |
|||
* |
|||
*/ |
|||
let params1 = {'orderId':this.orderId}; |
|||
let data1 = await Api.apiCall('post',Api.order.balancePay,params1); |
|||
console.log(data1) |
|||
if (data1) { |
|||
uni.redirectTo({ |
|||
url: '/pages/order/payment/result?order=' + JSON.stringify(data1) |
|||
}) |
|||
}else { |
|||
this.$api.msg(data1.data); |
|||
} |
|||
break |
|||
case 'offline': |
|||
/** |
|||
* 线下支付 |
|||
*/ |
|||
this.$common.modelShow('线下支付说明', '请联系客服进行线下支付', () => {},false, '取消', '确定') |
|||
break |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
.app { |
|||
width: 100%; |
|||
} |
|||
|
|||
.price-box { |
|||
background-color: #fff; |
|||
height: 265upx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 28upx; |
|||
color: #909399; |
|||
|
|||
.price{ |
|||
font-size: 50upx; |
|||
color: #303133; |
|||
margin-top: 12upx; |
|||
&:before{ |
|||
content: '￥'; |
|||
font-size: 40upx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.pay-type-list { |
|||
margin-top: 20upx; |
|||
background-color: #fff; |
|||
padding-left: 60upx; |
|||
|
|||
.type-item{ |
|||
height: 120upx; |
|||
padding: 20upx 0; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding-right: 60upx; |
|||
font-size: 30upx; |
|||
position:relative; |
|||
} |
|||
|
|||
.icon{ |
|||
width: 100upx; |
|||
font-size: 52upx; |
|||
} |
|||
.icon-erjiye-yucunkuan { |
|||
color: #fe8e2e; |
|||
} |
|||
.icon-weixinzhifu { |
|||
color: #36cb59; |
|||
} |
|||
.icon-alipay { |
|||
color: #01aaef; |
|||
} |
|||
.tit{ |
|||
font-size: $font-lg; |
|||
color: $font-color-dark; |
|||
margin-bottom: 4upx; |
|||
} |
|||
.con{ |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
font-size: $font-sm; |
|||
color: $font-color-light; |
|||
} |
|||
} |
|||
.mix-btn { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 630upx; |
|||
height: 80upx; |
|||
margin: 80upx auto 30upx; |
|||
font-size: $font-lg; |
|||
color: #fff; |
|||
background-color: $base-color; |
|||
border-radius: 10upx; |
|||
box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4); |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,79 @@ |
|||
<template> |
|||
<view class="wrapper" v-show="redBagShow"> |
|||
<view class="modal-bg" > |
|||
</view> |
|||
<view class="rb-wrapper"> |
|||
<view class="rb-content" @click="handleBtn"> |
|||
|
|||
</view> |
|||
<view class="close" @click="handleClose"> |
|||
<image src='/static/image/close.png' class="img"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'redBag', |
|||
components: {}, |
|||
props: { |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
redBagShow: true |
|||
} |
|||
}, |
|||
watch: {}, |
|||
computed: {}, |
|||
methods: { |
|||
handleClose() { |
|||
this.redBagShow=false |
|||
}, |
|||
handleBtn() { |
|||
this.$emit('click') |
|||
this.redBagShow=false |
|||
} |
|||
}, |
|||
created() {}, |
|||
mounted() {} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.modal-bg { |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
top: 0; |
|||
left: 0; |
|||
background: rgba(0, 0, 0, 0.4); |
|||
} |
|||
.rb-wrapper { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
width: 60%; |
|||
height: 600upx; |
|||
transform: translate3d(-50%, -50%, 0); |
|||
background: red; |
|||
padding: 40upx; |
|||
.rb-content{ |
|||
height: 100%; |
|||
} |
|||
.close { |
|||
position: absolute; |
|||
bottom: -120upx; |
|||
left: 50%; |
|||
margin-left: -30upx; |
|||
width: 60upx; |
|||
height: 60upx; |
|||
border-radius: 50%; |
|||
background: #ddd; |
|||
.img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,496 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<view class="body"> |
|||
<view class="head-body"> |
|||
<text class="date-head">{{swiperData.year}}年{{swiperData.month}}月</text> |
|||
<view> |
|||
<view class='pr40' style="display: inline-block;"><uni-icon type="arrowup" size='26' color='#fff' @click='prevDeta'/></view> |
|||
<view style="display: inline-block;"><uni-icon type="arrowdown" size='26' color='#fff' @click='nextDate' /></view> |
|||
</view> |
|||
</view> |
|||
<view class="mian-body"> |
|||
<!-- 星期 --> |
|||
<view class="mian-bolck"> <text>日</text> </view> |
|||
<view class="mian-bolck"> <text>一</text> </view> |
|||
<view class="mian-bolck"> <text>二</text> </view> |
|||
<view class="mian-bolck"> <text>三</text> </view> |
|||
<view class="mian-bolck"> <text>四</text> </view> |
|||
<view class="mian-bolck"> <text>五</text> </view> |
|||
<view class="mian-bolck"> <text>六</text> </view> |
|||
<!-- 日 --> |
|||
<view v-for="(val, index) in swiperData.dateDay" class="mian-bolck" :class="val.disable == true ? 'disable' : val.Choice == true ? 'Choice' : ''" |
|||
@click="ChoiceDate(index, val.disable)" :key='index'> |
|||
<view class="border"> |
|||
<text class="day">{{val.day}}</text> |
|||
<text class="price" v-show="val.priceType">{{val.price == undefined ? '' : val.price}}￥</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import uniIcon from './uni-icon.vue'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
swiperData: {}, |
|||
year: '', |
|||
month: '', |
|||
day: '', |
|||
storageDate: [] |
|||
} |
|||
}, |
|||
props: { |
|||
// 当前日期 |
|||
date: { |
|||
type: String, |
|||
default: () => { |
|||
let _dateData = new Date(), |
|||
_date = `${_dateData.getFullYear()}-${_dateData.getMonth() + 1}-${_dateData.getDate()}` |
|||
return _date |
|||
} |
|||
}, |
|||
// 禁用开始之前日期 |
|||
startDate: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 禁用开始之后日期 |
|||
endDate: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 是否禁用今天之前的日期 |
|||
disableBefore: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 价格 |
|||
price: { |
|||
type: Object, |
|||
default: () => { |
|||
return {type: false, data: []} |
|||
} |
|||
}, |
|||
// 是否选择默认日期 |
|||
isNowDate: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 单选或多选 |
|||
singleElection: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
computed: { |
|||
PriceData: { |
|||
get() { |
|||
return this.price.data |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
let dateArr = this.date.split('-') |
|||
if (this.date != '' && dateArr.length == 3) { |
|||
// 初始化年月日 |
|||
this.year = Number(dateArr[0]) |
|||
this.month = Number(dateArr[1]) |
|||
this.day = Number(dateArr[2]) |
|||
this.InitializationHomeDate(true).then((val) => { |
|||
this.Preprocessing(dateArr) |
|||
}) |
|||
} else { |
|||
console.error('error 请检查传入日期是否正确,如: 2019-5-12') |
|||
} |
|||
}, |
|||
methods: { |
|||
// 是否添加初始化日期 |
|||
InitializationHomeDate(type) { |
|||
// 指定日期 |
|||
let ThisDate = this.compareDate(this.date) |
|||
// 禁用开始时间 |
|||
let startDate = this.compareDate(this.startDate) |
|||
// 禁用结束时间 |
|||
let endDate = this.compareDate(this.endDate) |
|||
// 当前日期 |
|||
let _date = new Date() |
|||
let currDate = this.compareDate(`${_date.getFullYear()}-${_date.getMonth() + 1}-${_date.getDate()}`) |
|||
return new Promise((resolve, reject) => { |
|||
let judge = (this.disableBefore == false && this.startDate == '' && this.endDate == '') || // 没有任何禁止 |
|||
(this.disableBefore == true && ThisDate >= currDate) || // 是否禁用今天之前的日期 |
|||
(ThisDate >= startDate && this.disableBefore == false && this.startDate != '') || // 禁用只有开始时间，没有结束时间 |
|||
(ThisDate <= endDate && this.disableBefore == false && this.endDate != '') || // 禁用只有结束时间，没有开始时间 |
|||
(ThisDate <= endDate && this.disableBefore == false && ThisDate >= startDate && this.startDate != '' &&this.endDate != '') // 禁用结束时间，开始时间 |
|||
if (this.isNowDate == false) { |
|||
resolve(true) |
|||
return false |
|||
} else if (judge && type) { |
|||
this.storageDate.push({date: this.date}) |
|||
} |
|||
resolve(true) |
|||
}) |
|||
}, |
|||
// 时间转换为时间戳 |
|||
compareDate(s1) { |
|||
let curTime = new Date(); |
|||
//把字符串格式转化为日期类 |
|||
return s1 ? new Date(s1).valueOf() : false |
|||
}, |
|||
// 上一个月 |
|||
prevDeta() { |
|||
let dateLen = new Date(this.year, this.month - 1, 0).getDate() |
|||
this.month = Number(this.month) - 1 |
|||
if (this.month == 0) { |
|||
this.month = 12 |
|||
this.year = Number(this.year) - 1 |
|||
} |
|||
if (this.month<10){ |
|||
this.month='0'+this.month; |
|||
} |
|||
this.Preprocessing([this.year, this.month, this.day]) |
|||
if (this.price.type) { |
|||
this.$emit('changeMonth', [this.year, this.month, dateLen]) |
|||
} |
|||
}, |
|||
// 下一个月 |
|||
nextDate() { |
|||
let dateLen = new Date(this.year, this.month - 1, 0).getDate() |
|||
this.month = 1 + Number(this.month) |
|||
if (this.month == 13) { |
|||
this.month = 1 |
|||
this.year = 1 + Number(this.year) |
|||
} |
|||
if (this.month<10){ |
|||
this.month='0'+this.month; |
|||
} |
|||
this.Preprocessing([this.year, this.month, this.day]) |
|||
if (this.price.type) { |
|||
this.$emit('changeMonth', [this.year, this.month, dateLen]) |
|||
} |
|||
}, |
|||
// 数据发布 |
|||
ChoiceDate(index, disable) { |
|||
let day = this.swiperData.dateDay[index].day |
|||
let _Choice = this.swiperData.dateDay[index].Choice |
|||
let _date = {} |
|||
if (this.price.type == true) { |
|||
_date = {date: `${this.swiperData.year}-${this.swiperData.month}-${day}`, price: this.swiperData.dateDay[index].price} |
|||
} else { |
|||
_date = {date: `${this.swiperData.year}-${this.swiperData.month}-${day}`} |
|||
} |
|||
if (disable != true) { |
|||
// 添加数据 |
|||
if (JSON.stringify(this.storageDate).indexOf(_date.date) == -1) { |
|||
// 单选还是多选 |
|||
if (this.singleElection == true) { |
|||
this.storageDate = [] |
|||
this.swiperData.dateDay.forEach((val, inde) => { |
|||
val.Choice = false |
|||
}) |
|||
// 多选 |
|||
} |
|||
this.storageDate.push(_date) |
|||
// 删除数据 |
|||
} else { |
|||
this.storageDate = this.storageDate.filter((val, index) => { |
|||
if (val.date != _date.date) { |
|||
return val |
|||
} |
|||
}) |
|||
} |
|||
this.swiperData.dateDay[index].Choice = !_Choice |
|||
this.$emit('changeDay', this.storageDate) |
|||
} |
|||
}, |
|||
// 日期初始化 |
|||
Preprocessing(arr) { |
|||
let swiperData = {} |
|||
this.getDay(`${arr[0]}-${arr[1]}-${arr[2]}`).then((val) => { |
|||
swiperData = val |
|||
this.$emit('changeDay', this.storageDate) |
|||
this.$set(this, 'swiperData', swiperData) |
|||
}) |
|||
}, |
|||
// 判断当前是 安卓还是ios ，传入不容的日期格式 |
|||
judgeDate(dateData) { |
|||
if (typeof dateData !== 'object') { |
|||
dateData = dateData.replace(/-/g, '/') |
|||
} |
|||
return dateData |
|||
}, |
|||
// 循环上个月末尾几天添加到数组 |
|||
getDay(dateData) { |
|||
dateData = this.judgeDate(dateData) |
|||
// 获取年，月，日，星期 |
|||
let _date = new Date(dateData), |
|||
year = _date.getFullYear(), |
|||
month = _date.getMonth() + 1, |
|||
date = _date.getDate(), |
|||
day = _date.getDay() |
|||
|
|||
return new Promise((resolve, reject) => { |
|||
//获取上个月末尾几天 |
|||
let prevDayArr = [], |
|||
prevDayLength = new Date(year, month - 1, 1).getDay() |
|||
for (let i = prevDayLength; i > 0; i--) { |
|||
let prevDay = new Date(year, month - 1, -i + 1).getDate() |
|||
prevDayArr.push({ |
|||
day: prevDay, |
|||
disable: true, |
|||
Choice: false |
|||
}) |
|||
} |
|||
|
|||
// 获取本月 |
|||
let thisDayArr = [], |
|||
thisDaylength = new Date(year, month - 1, 0).getDate() |
|||
for (let i = 1; i <= new Date(year, month, 0).getDate(); i++) { |
|||
thisDayArr.push({ |
|||
day: i, |
|||
disable: false, |
|||
Choice: false, |
|||
price: this.price.data[i-1], |
|||
priceType: this.price.type |
|||
}) |
|||
// 重绘已选择日期 |
|||
this.storageDate.forEach((val, index) => { |
|||
let valArr = val.date.split('-'); |
|||
if (year == valArr[0] && month == valArr[1] && i == valArr[2]) { |
|||
thisDayArr[i - 1].Choice = true |
|||
val.price = this.price.data[i-1] |
|||
} |
|||
}) |
|||
} |
|||
|
|||
|
|||
// 获取下个月开始几天 |
|||
let nextDayArr = [], |
|||
nextDaylength = 42 - (prevDayArr.length + thisDayArr.length) |
|||
for (let i = 1; i < nextDaylength + 1; i++) { |
|||
nextDayArr.push({ |
|||
day: i, |
|||
disable: true, |
|||
Choice: false |
|||
}) |
|||
} |
|||
|
|||
// 数据合并 |
|||
let dateShow = [] |
|||
dateShow = dateShow.concat(prevDayArr, thisDayArr, nextDayArr) |
|||
|
|||
// 禁用今天之前的日期 |
|||
if (this.disableBefore) { |
|||
let __beForeDeta = new Date(), |
|||
dDate = `${__beForeDeta.getFullYear()}-${__beForeDeta.getMonth() + 1}-${__beForeDeta.getDate()}` |
|||
this.disableDatePrevFn(dateShow, dDate.split('-'), year, month).then((val) => { |
|||
resolve({ |
|||
dateDay: val, |
|||
year: year, |
|||
month: month |
|||
}) |
|||
}) |
|||
// 禁用双向指定范围可用 |
|||
} else if (this.startDate != '' && this.endDate != '') { |
|||
let startDateArr = this.startDate.split('-') |
|||
let endDateArr = this.endDate.split('-') |
|||
if (startDateArr.length == 3 && endDateArr.length == 3) { |
|||
this.disableDatePrevFn(dateShow, startDateArr, year, month).then((val) => { |
|||
return this.disableDateNextFn(val, endDateArr, year, month) |
|||
}).then((val) => { |
|||
resolve({ |
|||
dateDay: val, |
|||
year: year, |
|||
month: month |
|||
}) |
|||
}) |
|||
} else if (endDateArr.length != 3) { |
|||
console.error('error 日期选择范围-结束日期错误,如: 2019-5-12') |
|||
if (startDateArr.length != 3) { |
|||
console.error('error 日期选择范围-开始日期错误,如: 2019-5-12') |
|||
} |
|||
} |
|||
// 禁用开始日期之前 |
|||
} else if (this.startDate != '') { |
|||
let startDateArr = this.startDate.split('-') |
|||
if (startDateArr.length == 3) { |
|||
this.disableDatePrevFn(dateShow, startDateArr, year, month).then((val) => { |
|||
resolve({ |
|||
dateDay: val, |
|||
year: year, |
|||
month: month |
|||
}) |
|||
}) |
|||
} else { |
|||
console.error('error 日期选择范围-开始日期错误,如: 2019-5-12') |
|||
} |
|||
// 禁用结束日期之前 |
|||
} else if (this.endDate != '') { |
|||
let endDateArr = this.endDate.split('-') |
|||
if (endDateArr.length == 3) { |
|||
this.disableDateNextFn(dateShow, endDateArr, year, month).then((val) => { |
|||
resolve({ |
|||
dateDay: val, |
|||
year: year, |
|||
month: month |
|||
}) |
|||
}) |
|||
} else { |
|||
console.error('error 日期选择范围-结束日期错误,如: 2019-5-12') |
|||
} |
|||
// 不禁用 |
|||
} else { |
|||
this.disableDatePrevFn(dateShow, new Array(3), year, month).then((val) => { |
|||
resolve({ |
|||
dateDay: val, |
|||
year: year, |
|||
month: month |
|||
}) |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
// 禁用指定日期之前的日期 |
|||
disableDatePrevFn() { |
|||
let DateObj = arguments, |
|||
dateShow = DateObj[0], |
|||
dDate = DateObj[1], |
|||
year = DateObj[2], |
|||
month = DateObj[3] |
|||
return new Promise((resolve, reject) => { |
|||
dateShow = dateShow.map((val, index) => { |
|||
if (dDate[0] > year) { |
|||
val.disable = true |
|||
} else if (dDate[1] > month && dDate[0] >= year) { |
|||
val.disable = true |
|||
} else if (dDate[0] >= year && dDate[2] > val.day && dDate[1] >= month) { |
|||
val.disable = true |
|||
} |
|||
return val |
|||
}) |
|||
resolve(dateShow) |
|||
}) |
|||
}, |
|||
// 禁用指定日期之后的日期 |
|||
disableDateNextFn() { |
|||
let DateObj = arguments, |
|||
dateShow = DateObj[0], |
|||
dDate = DateObj[1], |
|||
year = DateObj[2], |
|||
month = DateObj[3] |
|||
return new Promise((resolve, reject) => { |
|||
dateShow = dateShow.map((val, index) => { |
|||
if (dDate[0] < year) { |
|||
val.disable = true |
|||
} else if (dDate[0] <= year && dDate[1] < month) { |
|||
val.disable = true |
|||
} else if (dDate[0] <= year && dDate[1] <= month && dDate[2] < val.day) { |
|||
val.disable = true |
|||
} |
|||
return val |
|||
}) |
|||
resolve(dateShow) |
|||
}) |
|||
}, |
|||
|
|||
}, |
|||
components: { |
|||
uniIcon |
|||
}, |
|||
watch: { |
|||
'PriceData': { |
|||
handler(newData, oldData) { |
|||
this.InitializationHomeDate(false).then((val) => { |
|||
this.Preprocessing([this.year, this.month, this.day]) |
|||
}) |
|||
}, |
|||
immediate: false, |
|||
deep: true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.content { |
|||
.body { |
|||
width: 100%; |
|||
background: #000; |
|||
.head-body { |
|||
display: flex; |
|||
flex-direction: row; |
|||
height: 41px; |
|||
box-sizing: border-box; |
|||
padding: 5px 30upx 10px 30upx; |
|||
justify-content: space-between; |
|||
|
|||
.date-head { |
|||
font-size: 36upx; |
|||
color: #fff; |
|||
line-height: 26px; |
|||
letter-spacing: 1px; |
|||
text{ |
|||
font-size: 36upx; |
|||
} |
|||
} |
|||
.pr40 { |
|||
padding-right: 40upx; |
|||
} |
|||
} |
|||
|
|||
.mian-body { |
|||
width: 100%; |
|||
height: calc(100% - 46px); |
|||
color: #fff; |
|||
display: flex; |
|||
flex-flow: row wrap; |
|||
justify-content: center; |
|||
align-items: center; |
|||
.mian-bolck { |
|||
width: calc(100% / 7 - 10upx); |
|||
padding: 8upx 0; |
|||
min-height: calc(750upx / 7 - 26upx); |
|||
box-sizing: border-box; |
|||
font-size: 34upx; |
|||
display: flex; |
|||
flex-flow: row wrap; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin: 5upx; |
|||
cursor: pointer; |
|||
.border { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-flow: row wrap; |
|||
justify-content: center; |
|||
align-items: center; |
|||
text-align: center; |
|||
.price{ |
|||
font-size: 24upx; |
|||
} |
|||
.day{ |
|||
width: 100%; |
|||
} |
|||
text{ |
|||
font-size: 36upx; |
|||
} |
|||
} |
|||
} |
|||
.disable { |
|||
color: #939393; |
|||
} |
|||
.Choice { |
|||
display: flex; |
|||
flex-flow: row wrap; |
|||
justify-content: center; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
background: #0078d7; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,238 @@ |
|||
<template> |
|||
<view v-if="show" class="mask" @click="toggleMask" @touchmove.stop.prevent="stopPrevent" :style="{ backgroundColor: backgroundColor }"> |
|||
<view |
|||
class="mask-content" |
|||
@click.stop.prevent="stopPrevent" |
|||
:style="[ |
|||
{ |
|||
height: config.height, |
|||
transform: transform |
|||
} |
|||
]" |
|||
> |
|||
<scroll-view class="view-content" show-scrollbar="false" scroll-y> |
|||
<view class="share-header">分享到</view> |
|||
<view class="share-list"> |
|||
<view v-for="(item, index) in shareList" :key="index" class="share-item" @click="shareToFriend(item.typeIcon, item.scene, item.provider)"> |
|||
<image :src="item.icon" mode=""></image> |
|||
<text>{{ item.text }}</text> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<view class="bottom b-t" @click="toggleMask">取消</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
var href = null; |
|||
var title = null; |
|||
var imgUrl = null; |
|||
export default { |
|||
data() { |
|||
return { |
|||
transform: 'translateY(50vh)', |
|||
timer: 0, |
|||
backgroundColor: 'rgba(0,0,0,0)', |
|||
show: false, |
|||
config: {} |
|||
}; |
|||
}, |
|||
props: { |
|||
contentHeight: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
//是否是tabbar页面 |
|||
hasTabbar: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
shareList: { |
|||
type: Array, |
|||
default: function() { |
|||
return []; |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
const height = uni.upx2px(this.contentHeight) + 'px'; |
|||
this.config = { |
|||
height: height, |
|||
transform: `translateY(${height})`, |
|||
backgroundColor: 'rgba(0,0,0,.4)' |
|||
}; |
|||
this.transform = this.config.transform; |
|||
}, |
|||
methods: { |
|||
toggleMask(title, imgUrl, href) { |
|||
this.title = title; |
|||
this.imgUrl = imgUrl; |
|||
this.href = href; |
|||
//防止高频点击 |
|||
if (this.timer == 1) { |
|||
return; |
|||
} |
|||
this.timer = 1; |
|||
setTimeout(() => { |
|||
this.timer = 0; |
|||
}, 500); |
|||
|
|||
if (this.show) { |
|||
this.transform = this.config.transform; |
|||
this.backgroundColor = 'rgba(0,0,0,0)'; |
|||
setTimeout(() => { |
|||
this.show = false; |
|||
this.hasTabbar && uni.showTabBar(); |
|||
}, 200); |
|||
return; |
|||
} |
|||
|
|||
this.show = true; |
|||
//等待mask重绘完成执行 |
|||
if (this.hasTabbar) { |
|||
uni.hideTabBar({ |
|||
success: () => { |
|||
setTimeout(() => { |
|||
this.backgroundColor = this.config.backgroundColor; |
|||
this.transform = 'translateY(0px)'; |
|||
}, 10); |
|||
} |
|||
}); |
|||
} else { |
|||
setTimeout(() => { |
|||
this.backgroundColor = this.config.backgroundColor; |
|||
this.transform = 'translateY(0px)'; |
|||
}, 10); |
|||
} |
|||
}, |
|||
//防止冒泡和滚动穿透 |
|||
stopPrevent() {}, |
|||
//分享操作 |
|||
shareToFriend(type, scene, provider) { |
|||
// this.$api.msg(`分享给${type}`); |
|||
// this.toggleMask(); |
|||
var url = this.href; |
|||
var title = this.title; |
|||
var imgUrl = this.imgUrl; |
|||
uni.share({ |
|||
provider: provider, |
|||
scene: scene, |
|||
type: type, |
|||
href: url, |
|||
title: title, |
|||
imageUrl: imgUrl, |
|||
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({ |
|||
success: function(res) { |
|||
if (res.confirm) { |
|||
console.log('用户点击确定'); |
|||
} else if (res.cancel) { |
|||
console.log('用户点击取消'); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
this.toggleMask(); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.mask { |
|||
position: fixed; |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: flex-end; |
|||
z-index: 998; |
|||
transition: 0.3s; |
|||
.bottom { |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 100%; |
|||
height: 90upx; |
|||
background: #fff; |
|||
z-index: 9; |
|||
font-size: $font-base + 2upx; |
|||
color: $font-color-dark; |
|||
} |
|||
} |
|||
|
|||
.mask-content { |
|||
width: 100%; |
|||
height: 580upx; |
|||
transition: 0.3s; |
|||
background: #fff; |
|||
&.has-bottom { |
|||
padding-bottom: 90upx; |
|||
} |
|||
.view-content { |
|||
height: 100%; |
|||
background: #ffffff; |
|||
} |
|||
} |
|||
.share-header { |
|||
height: 110upx; |
|||
font-size: $font-base + 2upx; |
|||
color: font-color-dark; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding-top: 10upx; |
|||
&:before, |
|||
&:after { |
|||
content: ''; |
|||
width: 240upx; |
|||
heighg: 0; |
|||
border-top: 1px solid $border-color-base; |
|||
transform: scaleY(0.5); |
|||
margin-right: 30upx; |
|||
} |
|||
&:after { |
|||
margin-left: 30upx; |
|||
margin-right: 0; |
|||
} |
|||
} |
|||
.share-list { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
} |
|||
.share-item { |
|||
min-width: 33.33%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 180upx; |
|||
image { |
|||
width: 80upx; |
|||
height: 80upx; |
|||
margin-bottom: 16upx; |
|||
} |
|||
text { |
|||
font-size: $font-base; |
|||
color: $font-color-base; |
|||
} |
|||
} |
|||
</style> |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue