Skip to content

M
mayi-mp-shop
Commit 349bf7bc by 程智春
Options

Merge branch 'nativehome_tst' of http://code.mayi888.com/chengmo/mayi-mp-shop into nativehome_tst

parents beedda9f 774db429
Showing with 1428 additions and 267 deletions
custom-tab-bar/index.js
......@@ -46,38 +46,69 @@ Component({
version: "1.0.0",
visible: 1
}],
componentData:{}
componentData: {}
},
attached() {
var appInstance = getApp()
let that=this
if (appInstance.globalData.footerVal) {
let that = this
if (app.globalData.footerVal) {
that.setData({
componentData:appInstance.globalData.footerVal.componentData,
list: appInstance.globalData.footerVal.componentData.list
componentData: app.globalData.footerVal.componentData,
list: app.globalData.footerVal.componentData.list
})
}else{
appInstance.footerCallBack=function (params) {
} else {
app.footerCallBack = function (params) {
that.setData({
componentData:params.componentData,
componentData: params.componentData,
list: params.componentData.list
})
}
}
// ----------webview 变化
console.log('启动1111')
app.webviewCallBack = function (state,params) {
console.log('webview变化',state,params)
}
},
methods: {
init() {
},
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
wx.switchTab({
url
})
this.setData({
selected: data.index
})
// mpApp.$themeToLink //
const {
index
} = e.currentTarget.dataset
console.log('755555555', this.data.list[index].link)
// if (index == this.data.selected) return
app.globalData.tabBarPageLink=this.data.list[index].link.link
console.log(app,'aaaa')
this.toPage(this.data.list[index].link,index)
// return
// app.$themeToLink(this.data.list[index].link)
// this.setData({
// selected: index
// })
},
toPage(data,index){
console.log('index98',index)
// 跳转
if (data.link=='/') {
wx.switchTab({
url: '/pages/home/main',
})
}else{
wx.switchTab({
url: `/pages/tabBar${index}/main`,
})
// ?from=tabbar&backpath=${
// data.link
// }
}
}
}
})
custom-tab-bar/index.wxml
<!--miniprogram/custom-tab-bar/index.wxml-->
<cover-view class="tab-bar">
<cover-view class="tab-bar-border"></cover-view>
<cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}"
<cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.link}}" data-index="{{index}}"
bindtap="switchTab">
<cover-view wx:if="{{item.iconType==0||!item.iconType}}">
......@@ -9,7 +9,7 @@
</cover-view>
<cover-view wx:elif="{{item.iconType==1}}"
class="img-view"
style="width:{{(index==selected?componentData.selectionIconSize*2:componentData.defaultIconSize*2)+'rpx'}}">
style="width:{{(index==selected?componentData.selectionIconSize*2:componentData.defaultIconSize*2)+'rpx'}};height:{{(index==selected?componentData.selectionIconSize*2:componentData.defaultIconSize*2)+'rpx'}}">
<cover-image src="{{selected === index ? item.selectImgUrl : item.imgUrl}}"></cover-image>
</cover-view>
<!-- 名称 -->
......
src/api/goods.js 0 → 100644
import { requestPOST, requestGET } from "@/utils/request.js";
export default {
queryProductInfo(data) {
return requestPOST(`${process.env.OLSHOP_URL}/product/query_product_info`, data);
},
queryBriefProductInfo(data) {
return requestPOST(`${process.env.OLSHOP_URL}/product/query_brief_product_info`, data);
},
queryMoreProductInfo(data) {
return requestPOST(`${process.env.OLSHOP_URL}/product/query_more_product_info`, data);
}
};
src/app.json
......@@ -7,7 +7,11 @@
"pages/counter/main",
"pages/address/main",
"pages/contact/main",
"pages/officialAccount/main"
"pages/officialAccount/main",
"pages/tabBar1/main",
"pages/tabBar2/main",
"pages/tabBar3/main",
"pages/tabBar4/main"
],
"tabBar": {
"custom": true,
......@@ -15,13 +19,23 @@
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/home/main",
"text": "组件"
}, {
"pagePath": "pages/index/main",
"text": "接口"
}]
"list": [
{
"pagePath": "pages/home/main"
},
{
"pagePath": "pages/tabBar1/main"
},
{
"pagePath": "pages/tabBar2/main"
},
{
"pagePath": "pages/tabBar3/main"
},
{
"pagePath": "pages/tabBar4/main"
}
]
},
"usingComponents": {},
"window": {
......@@ -35,4 +49,4 @@
"desc": "你的位置信息将用于获取附近的门店"
}
}
}
}
\ No newline at end of file
src/main.js
......@@ -2,6 +2,9 @@ import Vue from 'vue'
import App from './App'
import Store from './store/index'
import "../static/nicon/iconfont.css"
import goodsApi from "./api/goods"
import { DFSImg } from "@/utils/index";
import { $themeToLink } from "@/utils/mayi"
Vue.config.productionTip = false
App.mpType = 'app'
......@@ -11,7 +14,7 @@ Vue.prototype.$store = Store
let mpAnalytics = require("../node_modules/mayi-analytics/dist/mayi.mpAnalytics.js")
.default;
mpAnalytics.init({
url:process.env.NODE_ENV == 'production'?"https://analytics.mayi888.com/ma.gif":"https://analytics.mayi888.cn/ma.gif", //错误上报地址
url: process.env.NODE_ENV == 'production' ? "https://analytics.mayi888.com/ma.gif" : "https://analytics.mayi888.cn/ma.gif", //错误上报地址
app: "mayi-mp-shop",//项目名称
wx
});
......@@ -22,12 +25,22 @@ app.$mount()
// glob挂载到
let mpApp=getApp();
let mpApp = getApp();
Vue.prototype.mpApp = mpApp
// 定义数据回调函数
// 数据异步回调函数
// 商城
mpApp.shopCallBack=function() {}
mpApp.shopCallBack = function () { }
// 多主题页面
mpApp.pageCallBack=function() {}
mpApp.pageCallBack = function () { }
// 底部栏
mpApp.footerCallBack=function() {}
mpApp.footerCallBack = function () { }
// webview变化
mpApp.webviewCallBack = function () { }
console.log('3555555', wx)
// 全局跳转 data为link对象
mpApp.$themeToLink = $themeToLink
// api
mpApp.goodsApi = goodsApi;
mpApp.DFSImg = DFSImg;
src/pages/home/index.vue
<template>
<div class="domain">
<div v-for="item in pageData" :key="item.id">
<!-- <goods-list id="goodsList"></goods-list> -->
<div v-for="(item,index) in pageData" :key="index">
<div v-if="item.componentCode=='banner'">
<banner :datas="item"></banner>
1
<banner :datas="item"></banner>
</div>
<div v-else-if="item.componentCode=='goods-list'">
<goods-list :datas="item"></goods-list>
</div>
<div v-if="item.componentCode == 'area-navigation'">
<area-navigation :datas="item"></area-navigation>
......@@ -12,15 +15,14 @@
<cube-nav :datas="item"></cube-nav>
</div>
</div>
<image
<!-- <image
src="http://cdn.mayi888.com/public/jpg/33ff0efc-96b5-4044-a65a-07799dfe98e1.jpg?x-oss-process=image/resize,limit_1,w_750"
></image>
<van-button type="primary">按钮</van-button>
<view class="ant-gongsidizhi"></view>
<view class="ant-bofang">1</view>
----瀑布流开始----
<waterfall-flow id="waterfallFlow"></waterfall-flow>
----瀑布流结束----
<view class="ant-bofang">1</view> -->
<!-- ----瀑布流开始---- -->
<!-- <waterfall-flow id="waterfallFlow"></waterfall-flow> -->
<!-- ----瀑布流结束---- -->
<!-- <banner id="banner" :datas="componentsList[0]"></banner>
<div class="domain">abc
......@@ -38,10 +40,10 @@ export default {
};
},
onLoad() {
let that = this;
if (this.mpApp.globalData.pageList) {
that.init(this.mpApp.globalData.pageList);
} else {
let that = this;
this.mpApp.pageCallBack = function (params) {
that.init(params);
};
......
src/pages/index/index.vue
<template>
<div>
{{withoutScene}}
<web-view v-if="withoutScene" :src="pageUrl" @message="getMessage" @error="handleError" @load="handleLoad"></web-view>
</div>
</template>
......@@ -41,7 +42,7 @@ export default {
shareOrderSn: "",
shareTid: "",
newWindowHref : '',
withoutScene: true,
withoutScene: false,
sharePageList: [
"goods/",
"receivingGift",
......@@ -56,7 +57,7 @@ export default {
}
},
watch: {
pageUrl() {
pageUrl(n,o) {
//埋点未登录时进入文章
// this.params+='&articleId=111'
console.log(wx.getStorageSync("sessionid"),3333333,this.pageUrl)
......@@ -75,6 +76,7 @@ export default {
}
},
onLoad(options) {
this.options = options;
Object.assign(this.$data, this.$options.data());
console.log(
......@@ -91,6 +93,7 @@ export default {
success: res => {
this.code = res.code;
login.miniLogin({ code: this.code}).then(res1 => {
this.withoutScene = true;
console.log(res1,555555)
if (res1.data.code == 200) {
wx.setStorage({
......@@ -110,7 +113,17 @@ export default {
this.options = options;
console.log('-------1',options.scene)
console.log(this.options)
console.log('-------')
console.log('-------link',this.mpApp.globalData.tabBarPageLink)
// tabbar 跳转
// if (this.mpApp.globalData.tabBarPageLink) {
// this.page = this.mpApp.globalData.tabBarPageLink;
// this.mpApp.globalData.tabBarPageLink=''
// }
// if (options.from && options.from == "tabbar") {
// this.page = decodeURIComponent(options.backpath);
// }
// ---------
if (options.share) {
//来自分享
this.link = decodeURIComponent(options.share);
......@@ -137,10 +150,10 @@ export default {
key: "sessionid",
data: params.sessionid
});
} else if (options.from && options.from == "livedToIndex") {
} else if (options.from && (options.from == "home" || options.from == "livedToIndex")) {
//来自直播详情
this.page = decodeURIComponent(options.backpath);
this.params += "&" + serialize(options.params);
options.params && (this.params += "&" + serialize(options.params));
} else if (options.from && options.from == "livedBackShop") {
//直播页back到商城
this.page = decodeURIComponent(options.backpath);
......@@ -314,9 +327,6 @@ export default {
}
this.init();
},
onShow() {
// console.log('显示了',options.webViewUrl);
},
methods: {
init() {
// 获取小程序开启的订阅消息配置
......@@ -343,7 +353,7 @@ export default {
console.log('244',getOpenid,getSessionid);
if (getOpenid == "" || getSessionid == "") {
this.params += "&logOut=true";
// this.params += "&logOut=true";
}
},
getLocationHandle() {
......
src/pages/login/index.vue
......@@ -95,6 +95,7 @@ export default {
})
},
onLoad(options) {
console.log(options,'login')
Object.assign(this.$data, this.$options.data()); //mpvue 的混合周期 使用小程序生命周期数据未初始化
if (options.back) {
this.backPath = options.back;
......
src/pages/rediect/main.js 0 → 100644
import Vue from 'vue'
import App from './index'
// add this to handle exception
Vue.config.errorHandler = function (err) {
if (console && console.error) {
console.error(err)
}
}
const app = new Vue(App)
app.$mount()
src/pages/rediect/main.json 0 → 100644
{
}
\ No newline at end of file
src/pages/tabBar1/index.vue 0 → 100644
<!--
tabbar
-->
<template>
<div>
<web-view :src="pageUrl" @error="handleError"></web-view>
</div>
</template>
<script>
import { getUrlofLink } from "../../utils/mayi.js";
export default {
data() {
return {
link: process.env.BASE_URL,
page: "/",
params: "?mixid=" + this.$store.state.mixid,
index:1
};
},
computed: {
pageUrl() {
return this.link + this.page + this.params;
},
},
onLoad(options) {
// tabbar 跳转
if (this.mpApp.globalData.footerVal.componentData.list[this.index].link) {
this.page = getUrlofLink(
this.mpApp.globalData.footerVal.componentData.list[this.index].link
);
this.mpApp.globalData.tabBarPageLink = "";
}
},
onShow(){
console.log('show')
if (this.mpApp.globalData.footerVal.componentData.list[this.index].link) {
this.page = getUrlofLink(
this.mpApp.globalData.footerVal.componentData.list[this.index].link
);
this.mpApp.globalData.tabBarPageLink = "";
}
// if (typeof this.getTabBar === 'function' &&
// this.getTabBar()) {
// this.getTabBar().setData({
// selected: 0
// })
// }
},
methods: {
handleError(data) {
wx.showLoading({
title: "网页加载失败 请右上角刷新",
});
},
},
};
</script>
<style lang="scss" scoped></style>
src/pages/tabBar1/main.js 0 → 100644
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
src/pages/tabBar1/main.json 0 → 100644
{
}
\ No newline at end of file
src/pages/tabBar2/index.vue 0 → 100644
<!--
tabbar
-->
<template>
<div>
<web-view :src="pageUrl" @error="handleError"></web-view>
</div>
</template>
<script>
import { getUrlofLink } from "../../utils/mayi.js";
export default {
data() {
return {
link: process.env.BASE_URL,
page: "/",
params: "?mixid=" + this.$store.state.mixid,
index:2
};
},
computed: {
pageUrl() {
return this.link + this.page + this.params;
},
},
onLoad(options) {
// tabbar 跳转
if (this.mpApp.globalData.footerVal.componentData.list[this.index].link) {
this.page = getUrlofLink(
this.mpApp.globalData.footerVal.componentData.list[this.index].link
);
this.mpApp.globalData.tabBarPageLink = "";
}
},
// onShow(){
// if (typeof this.getTabBar === 'function' &&
// this.getTabBar()) {
// this.getTabBar().setData({
// selected: 0
// })
// }
// },
methods: {
handleError(data) {
wx.showLoading({
title: "网页加载失败 请右上角刷新",
});
},
},
};
</script>
<style lang="scss" scoped></style>
src/pages/tabBar2/main.js 0 → 100644
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
src/pages/tabBar2/main.json 0 → 100644
{
}
\ No newline at end of file
src/pages/tabBar3/index.vue 0 → 100644
<!--
tabbar
-->
<template>
<div>
<web-view :src="pageUrl" @error="handleError"></web-view>
</div>
</template>
<script>
import { getUrlofLink } from "../../utils/mayi.js";
export default {
data() {
return {
link: process.env.BASE_URL,
page: "/",
params: "?mixid=" + this.$store.state.mixid,
index:3
};
},
computed: {
pageUrl() {
return this.link + this.page + this.params;
},
},
onLoad(options) {
// tabbar 跳转
if (this.mpApp.globalData.footerVal.componentData.list[this.index].link) {
this.page = getUrlofLink(
this.mpApp.globalData.footerVal.componentData.list[this.index].link
);
this.mpApp.globalData.tabBarPageLink = "";
}
},
// onShow(){
// if (typeof this.getTabBar === 'function' &&
// this.getTabBar()) {
// this.getTabBar().setData({
// selected: 0
// })
// }
// },
methods: {
handleError(data) {
wx.showLoading({
title: "网页加载失败 请右上角刷新",
});
},
},
};
</script>
<style lang="scss" scoped></style>
src/pages/tabBar3/main.js 0 → 100644
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
src/pages/tabBar3/main.json 0 → 100644
{
}
\ No newline at end of file
src/pages/tabbar4/index.vue 0 → 100644
<!--
tabbar
-->
<template>
<div>
<web-view :src="pageUrl" @error="handleError"></web-view>
</div>
</template>
<script>
import { getUrlofLink } from "../../utils/mayi.js";
export default {
data() {
return {
link: process.env.BASE_URL,
page: "/",
params: "?mixid=" + this.$store.state.mixid,
index:4
};
},
computed: {
pageUrl() {
return this.link + this.page + this.params;
},
},
onLoad(options) {
// tabbar 跳转
if (this.mpApp.globalData.footerVal.componentData.list[this.index].link) {
this.page = getUrlofLink(
this.mpApp.globalData.footerVal.componentData.list[this.index].link
);
this.mpApp.globalData.tabBarPageLink = "";
}
},
// onShow(){
// if (typeof this.getTabBar === 'function' &&
// this.getTabBar()) {
// this.getTabBar().setData({
// selected: 0
// })
// }
// },
methods: {
handleError(data) {
wx.showLoading({
title: "网页加载失败 请右上角刷新",
});
},
},
};
</script>
<style lang="scss" scoped></style>
src/pages/tabbar4/main.js 0 → 100644
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
src/pages/tabbar4/main.json 0 → 100644
{
}
\ No newline at end of file
src/pages/wxArticle/index.vue
<!--
* @Author: your name
* @Date: 2020-10-21 09:51:48
* @LastEditTime: 2020-10-21 10:35:55
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \mayi-mp-shop\src\pages\wxArticle\index.vue
第三方url
-->
<template>
<div>
......
src/utils/mayi.js 0 → 100644
// 获取link 中页面地址(link兼容 有object或者string)
export function getUrlofLink(data) {
return data.link
}
// 全局跳转
export function $themeToLink(data) {
let app = getApp()
let footerVal = app.globalData.footerVal.componentData.list;
console.log('393939', footerVal)
let type = data.type;
// 历史数据
if (type == undefined || type == 'undefined') {
if (data.length > 0) {
toPage(data)
}
return
}
// 底部导航跳转
let parseLink = getUrlofLink(data)
let isFooter = footerVal.findIndex(item => {
return item.link.link == parseLink
})
if (isFooter > -1) {
wx.switchTab({
url: parseLink == '/' ? '/pages/home/main' : `/pages/tabBar${isFooter}/main`,
})
return
}
// -----------------
if (type == 0) {//无链接
return
} else if (type == 1) {//h5页面
//兼容
if (data.link.substring(0, 1) == "/") {
toPage(data.link)
} else {
if (data.link.startsWith('http') || data.link.startsWith('https')) {
wx.navigateTo({ url: '/pages/wxArticle/main?link=' + encodeURIComponent(data.link) });
}
}
} else if (type == 1.1) {//小程序页面 可能增加登录态拦截
wx.navigateTo({ url: data.link });
} else if (type == 1.2) { //第三方链接
if (data.link == 'outerChain:businessCenter') {
// 进入商家中心外链
let url = `${config.GUIDE_URL}/login?mixid=${this.$nuxt.$route.query.mixid}&back=${encodeURIComponent(window.location.href)}`;
wx.navigateTo({ url: '/pages/wxArticle/main?link=' + encodeURIComponent(url) });
return
}
if (data.link.substring(0, 1) == "/") {
toPage(data.link)
} else {
wx.navigateTo({ url: '/pages/wxArticle/main?link=' + encodeURIComponent(data.link) });
}
} else if (type == 2) {//功能
let featureType = data.feature.type;
if (featureType == 'themeCouponClick' || featureType == 0) {//优惠券
// this.$themeCouponClick(data.feature.value.couponCode, data.feature.value);
} else if (featureType == 1) {//分享
console.log('是分享了。。。。');
} else if (featureType == "themeMemberCardClick" || featureType == 2) { //会员卡
// this.$themeMemberCardClick(data.feature.value);
}
} else if (type == 3) { //小程序跳转到小程序
wx.navigateTo({
url: `/pages/toMini/main?weappPage=${encodeURIComponent(data.link)}&weappAppId=${data.name}`,
})
} else {
//向后兼容
if (data.length > 0) {
toPage(data.link);
}
}
}
function toPage(backPath, backParams) {
wx.navigateTo({
url: `../index/main?from=home&backpath=${backPath}&params=${encodeURIComponent(backParams)}`
});
}
// check url是否为底部栏配置项
\ No newline at end of file
static/font/common_icon.wxss 0 → 100644
@font-face {font-family: "iconfont-common";
src: url('//at.alicdn.com/t/font_1701913_tl1esdcjv9r.eot?t=1599790483837'); /* IE9 */
src: url('//at.alicdn.com/t/font_1701913_tl1esdcjv9r.eot?t=1599790483837#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('//at.alicdn.com/t/font_1701913_tl1esdcjv9r.woff?t=1599790483837') format('woff'),
url('//at.alicdn.com/t/font_1701913_tl1esdcjv9r.ttf?t=1599790483837') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('//at.alicdn.com/t/font_1701913_tl1esdcjv9r.svg?t=1599790483837#iconfont-common') format('svg'); /* iOS 4.1- */
}
.iconfont-common {
font-family: "iconfont-common" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.common-iconjiantou:before {
content: "\e618";
}
.common-icongouwuche:before {
content: "\e726";
}
.common-icon5gouwudai2:before {
content: "\e656";
}
.common-icongouwudai:before {
content: "\e600";
}
.common-icongwc:before {
content: "\e674";
}
.common-iconjiahao:before {
content: "\e620";
}
.common-iconsousuo:before {
content: "\e6a8";
}
.common-iconyoujiantou:before {
content: "\e61c";
}
.common-iconfenxiang:before {
content: "\e688";
}
.common-iconbofang:before {
content: "\e689";
}
.common-iconaixin:before {
content: "\e65c";
}
.common-iconaixin1:before {
content: "\e619";
}
.common-icondianzan:before {
content: "\e60c";
}
.common-iconbofang2:before {
content: "\e635";
}
.common-iconbofang1-copy:before {
content: "\e675";
}
.common-iconqinziAPPtubiao-:before {
content: "\e648";
}
.common-iconrenzhengguanli:before {
content: "\e650";
}
.common-iconerweima:before {
content: "\e673";
}
.common-iconjifen11:before {
content: "\e652";
}
.common-iconmoren:before {
content: "\e66b";
}
static/nativeComponents/Banner/index.js
......@@ -31,5 +31,10 @@ Component({
console.log(val,'--------30')
this.setData({ activeIndex:val.detail.current });
},
onClick(data){
let item=data.currentTarget.dataset.item;
console.log(data.currentTarget.dataset.item,'iiii')
app.$themeToLink(item.link)
}
}
});
\ No newline at end of file
static/nativeComponents/Banner/index.wxml
......@@ -5,7 +5,7 @@
<swiper class="swiper" indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true" bindchange="bannerChange">
<block wx:for="{{datas.componentData.imgList}}" wx:key="index">
<swiper-item>
<swiper-item data-item="{{item}}" bindtap="onClick" >
<view class="swiper-item">
<image src="{{item.imageUrl}}" style="width:100%;border-radius:{{datas.componentData.borderRadius*2}}rpx" mode="widthFix" class="bannerImgItem"></image>
</view>
......
static/nativeComponents/GoodsList/GoodsItem/index.js
......@@ -17,7 +17,8 @@ const componentOptions = {
},
// 组件数据
data: {
isPageHidden: false // 页面是否处于隐藏状态
isPageHidden: false, // 页面是否处于隐藏状态
timeData: {},
},
// 数据监听器
observers: {},
......@@ -50,6 +51,9 @@ const componentOptions = {
showFlag = true;
}
return showFlag;
},
onChange(e) {
this.setData({ timeData: e.detail });
}
},
// 组件生命周期
......
static/nativeComponents/GoodsList/GoodsItem/index.json
{
"component": true,
"usingComponents": {}
"usingComponents": {
"van-count-down":"/static/vant/count-down/index"
}
}
static/nativeComponents/GoodsList/GoodsItem/index.wxml
<!-- 商品列表item -->
<view class="goodsItem" style="--proGap2:{{datas.componentData.proGap*2}}rpx;">
<view class="goodsItem {{datas.componentData.style==='rowList'?'goodsRowList':''}} {{datas.componentData.style==='heap'?'goodsRowList goodsHeapItem':''}}" style="--proGap2:{{datas.componentData.proGap*2}}rpx;">
<view class="goods-item-child {{datas.componentData['borderColorShow']?'goods-item-child-bd':''}}" style="border-radius:{{datas.componentData.borderRadius}}em;--border_color:{{datas.componentData['borderColor']}};box-shadow:{{datas.componentData['cardShadow']?'0rpx 0rpx 10rpx '+datas.componentData['cardShadowSize']*2+'rpx #ccc':''}};">
<!-- 商户入口-顶部 -->
<view class="merchantsEntrance flex" wx:if="{{datas.componentData['merchantsEntrance'] && datas.componentData['merchantsEntranceType'] == 0}}">
<view class="merchantsEntrance flex" wx:if="{{datas.componentData['merchantsEntrance'] && datas.componentData['merchantsEntranceType'] == 0 && datas.componentData.style!='heap'}}">
<view class="left flex" wx:if="{{items != null}}">
<view class="logo">
<image mode='widthFix' src="http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/ppefWK8BS6.png?x-oss-process=image/resize,limit_1,w_150,h_150" />
<image mode='widthFix' src="{{items.shopLogoUrl}}" />
</view>
<view class="name">{{items.orgName}}</view>
</view>
......@@ -18,11 +18,26 @@
style="padding:{{datas.componentData.imgSize}}"
>
<!-- 开启售卖 -->
<view class="saleWay" wx:if="{{items.saleWay==2 &&getSaleTime(items.saleTime)>0}}">
<view class="saleWay" wx:if="{{items.saleWay==2 && items.getSaleTime>0 && datas.componentData.style!='heap'}}">
<view class="saleWayBg"></view>
<view>
6545646
<view class="saleTime">
<van-count-down
use-slot
time="{{items.getSaleTime}}"
bind:change="onChange"
>
<text>距开售:</text>
<text class="block">{{ timeData.days }}</text>
<text class="colon">天</text>
<text class="block">{{ timeData.hours }}</text>
<text class="colon">时</text>
<text class="block">{{ timeData.minutes }}</text>
<text class="colon">分</text>
<text class="block">{{ timeData.seconds }}</text>
<text class="colon">秒</text>
</van-count-down>
</view>
</view>
<!-- 商品角标 -->
<view
......@@ -30,14 +45,25 @@
style="width:{{datas.componentData.angleSignSize}}%;height:{{datas.componentData.angleSignSize}}%;"
wx:if="{{datas.componentData['angleSign'] && datas.componentData['angleSignImg']}}"
>
<image mode="widthFix" src="http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/ppefWK8BS6.png?x-oss-process=image/resize,limit_1,w_150,h_150" />
<image mode="widthFix" src="{{datas.componentData['angleSignImg']}}" />
</view>
<!-- 商品主图 -->
<image mode="widthFix" src="https://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/yWDmitPPmD.jpg?x-oss-process=image/resize,limit_1,w_700" />
<image
mode="{{datas.componentData.style==='rowList' || datas.componentData.style==='heap'?'aspectFit':'widthFix'}}"
class="productImgUrl"
wx:if="{{datas.componentData.goodsImgType == 1}}"
src="{{items.productImgUrl}}"
/>
<image
mode="{{datas.componentData.style==='rowList' || datas.componentData.style==='heap'?'aspectFit':'widthFix'}}"
class="productImgUrl"
wx:else
src="{{items.coverImage}}"
/>
<!-- 售罄遮罩 -->
<view class="whiteBg" wx:if="{{items&&items.oversoldFlag==0&&items.totalQty-0<=0}}">
<view class="cover">
<image mode="widthFix" src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/f254fe62-6dda-46f6-a2f4-a7b2aa0474df.png" />
<image mode="aspectFit" src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/f254fe62-6dda-46f6-a2f4-a7b2aa0474df.png" />
</view>
</view>
</view>
......@@ -48,9 +74,13 @@
<view class="name" wx:if="{{datas.componentData['nameShow']}}">
{{items!=null?items['productName']:'名称'}}
</view>
<view class="follower-wrap" wx:if="{{datas.componentData['followerShow']}}">
<view
class="follower-wrap"
wx:if="{{datas.componentData['followerShow']}}"
style="padding-left:{{datas.componentData.columnNum == 3 ? '0' : '20rpx'}}"
>
<view class="follower-num" style="color:{{datas.componentData['followerColor']?datas.componentData['followerColor']:'#ff9933'}};">
{{items!=null?Number(items['totalCollectionCount']) ? Number(items['totalCollectionCount']) : 0:0}}
{{items!=null? items['totalCollectionCount']:0}}
</view>
<view class="follower-text">关注人数</view>
</view>
......@@ -59,8 +89,8 @@
<view class="Sold">
<text wx:if="{{datas.componentData['alSaleShow']}}">已售{{items!=null ? items['totalSalesCount'] :0}}件</text>
<text wx:if="{{datas.componentData['alSaleShow'] && datas.componentData['collectShow']}}">/</text>
<text wx:if="{{datas.componentData['collectShow']}}">剩余{{items!=null && items['qty']!=undefined ? (Number(items['qty']) > 0 ? Number(items['qty'] ): items.oversoldFlag==1?'数量充足':'数量不足') : ''}}</text>
<text wx:if="{{items!=null && (Number(items['qty']) ? Number(items['qty']) >= 0 : Number(items['saleQty']) >= 0)}}">件</text>
<text wx:if="{{datas.componentData['collectShow']}}">剩余{{items!=null && items['qty']!=undefined ? (items['qty'] > 0 ? items['qty']: items.oversoldFlag==1?'数量充足':'数量不足') : ''}}<text wx:if="{{items!=null && (items['qty'] ? items['qty'] >= 0 : items['saleQty'] >= 0) && items.oversoldFlag!=1}}">件</text>
</text>
</view>
<!-- 标签 -->
<view class="marketing flex" wx:if="{{datas.componentData['marketingTag']&&datas.componentData['marketingStyle']==0&&items.marketingTag}}">
......@@ -88,21 +118,25 @@
￥{{items['minGoodsSuggestedRetailPrice']}}
</text>
</view>
<view class="vipPrice2 flex">
<view class="left" wx:if="{{showVipPrice(index)==true}}">
￥{{Number(items['minPriceAfterRecommendedCardPriceTable']).toFixed(2)}}
<view class="vipPrice2 flex" wx:if="{{datas.componentData.vipPrice}}">
<view class="left" wx:if="{{items.showVipPrice==true}}">
￥{{items['minPriceAfterRecommendedCardPriceTable']}}
</view>
<view class="vipIcon line-clamp1" wx:if="{{showVipTag(index)==true}}">
<view class="vipIcon line-clamp1" wx:if="{{items.showVipTag==true}}">
{{items["recommendedCardMinPricePriceTableName"]}}
</view>
</view>
</view>
<!-- 收益样式一 -->
<block class="" wx:if="{{items!=null&&items['minProductGoodsCommission']&&items['minProductGoodsCommission']-0>0.01}}">
<view class="showCommission" wx:if="{{datas.componentData.commissionStyle==0}}">
<view class="commission-box">
<block wx:if="{{items!=null&&items['minProductGoodsCommission']&&items['minProductGoodsCommission']-0>0.01}}">
<view
class="showCommission"
style="color:{{datas.componentData.commissionColor}};border-color:{{datas.componentData.commissionColor}};"
wx:if="{{datas.componentData.commissionStyle==0}}"
>
<view class="commission-box" style="background-color:{{datas.componentData.commissionBgColor}}">
<text>收益</text>
<text>￥{{Number(items['minProductGoodsCommission']).toFixed(2)}}</text>
<text>￥{{items['minProductGoodsCommission']}}</text>
</view>
</view>
</block>
......@@ -115,7 +149,7 @@
已售罄
</view>
<view wx:if="{{(items&&items.totalQty-0>0||items&&items.oversoldFlag==1)&& datas.componentData['paynow']}}">
<text wx:if="{{datas.componentData.btnType<6}}" class="buy-now-icon iconfont-common {{datas.componentData.btnIcon}}"></text>
<text wx:if="{{datas.componentData.btnType<6}}" style="color:{{datas.componentData.btnColor}}" class="buy-now-icon iconfont-common {{datas.componentData.btnIcon}}"></text>
<view
wx:else
class="buy-now"
......@@ -139,20 +173,21 @@
</block>
<!-- 收益样式二 -->
<block wx:if="{{items!=null&&items['minProductGoodsCommission']&&items['minProductGoodsCommission']-0>0.01}}">
<view class="showCommissionTwo flex" wx:if="{{datas.componentData.commissionStyle==1}}">
<view class="commission-box">
<text class="iconfont-common common-iconfenxiang">
赚￥
<text style="font-size:32rpx;">
{{Number(items['minProductGoodsCommission']).toFixed(2)}}
</text>
</text>
<view
class="showCommissionTwo flex"
wx:if="{{datas.componentData.commissionStyle==1}}"
style="color:{{datas.componentData.commissionColor}};border-color:{{datas.componentData.commissionColor}};"
>
<view class="commission-box" style="background-color:{{datas.componentData.commissionBgColor}}">
<text class="iconfont-common common-iconfenxiang"></text>
<text style="padding:0 8rpx;">赚￥</text>
<text style="font-size:32rpx;">{{items['minProductGoodsCommission']}}</text>
</view>
</view>
</block>
</view>
<!-- 商户入口二 -->
<view class="merchantsEntrance flex" wx:if="{{datas.componentData.merchantsEntrance&&datas.componentData.merchantsEntranceType==1}}">
<view class="merchantsEntrance flex" wx:if="{{datas.componentData.merchantsEntrance&&datas.componentData.merchantsEntranceType==1 && datas.componentData.style!='heap'}}">
<view class="left flex" wx:if="{{items!=null}}">
<view class="logo">
<image mode='widthFix' src="http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/ppefWK8BS6.png?x-oss-process=image/resize,limit_1,w_150,h_150" />
......
static/nativeComponents/GoodsList/GoodsItem/index.wxss
@import "/static/font/common_icon.wxss";
.flex{
display: flex;
}
......@@ -6,15 +7,43 @@
}
image{
width: 100%;
display: block;
}
.goodsItem{
margin-bottom: var(--proGap2);
white-space: initial;
}
.goods-item-child {
position: relative;
overflow: hidden;
background: #ffffff;
}
.goodsRowList .goods-item-child{
display: flex;
align-items: flex-start;
}
.goodsRowList .goods-item-child .imgBox{
width: auto;
width: 180rpx;
height: 180rpx;
margin: 20rpx;
overflow: hidden;
border-radius: 12rpx;
-webkit-border-radius: 12rpx;
-moz-border-radius: 12rpx;
-ms-border-radius: 12rpx;
-o-border-radius: 12rpx;
}
.goodsRowList .goods-item-child .info{
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.goodsHeapItem{
width: 100%;
}
.merchantsEntrance{
padding: 8rpx 20rpx;
}
......@@ -37,13 +66,17 @@ image{
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto 20rpx;
margin: 0 auto;
}
.goodsPicture{
width: 100%;
height: 100%;
position: relative;
}
.goodsPicture .productImgUrl{
width: 100%;
height: 100%;
}
.goodsPicture .saleWay{
position: absolute;
bottom: 0;
......@@ -51,6 +84,8 @@ image{
width: 100%;
display: flex;
justify-content: center;
z-index: 2;
color: #fff;
}
.goodsPicture .saleWay .saleWayBg{
background: #eee;
......@@ -61,6 +96,14 @@ image{
bottom: 0;
opacity: 0.5;
}
.goodsPicture .saleWay .saleTime{
position: relative;
z-index: 2;
padding: 4rpx 0;
}
.goodsPicture .saleWay .saleTime text{
color: #fff;
}
.goodsPicture .angleSign{
position: absolute;
top: 0;
......@@ -117,6 +160,7 @@ image{
color: #999;
text-align: center;
height: 70rpx;
border-left: 1px solid #999;
}
.info .follower-wrap .follower-num{
text-align: center;
......@@ -204,7 +248,7 @@ image{
color: #999;
}
.Sold text{
font-size: 0.7em;
font-size: 24rpx;
}
.buy-now {
color: #ffffff;
......@@ -230,6 +274,28 @@ image{
bottom: 0;
font-size: 36rpx;
}
.showCommission {
width: auto;
display: inline-block;
margin-top: 8rpx;
border: 1px solid transparent;
border-radius: 12rpx;
font-size: 10px;
overflow: hidden;
-webkit-border-radius: 12rpx;
-moz-border-radius: 12rpx;
-ms-border-radius: 12rpx;
-o-border-radius: 12rpx;
}
.showCommission .commission-box {
box-sizing: border-box;
padding: 0 10rpx;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.showCommissionTwo {
align-items: center;
justify-content: center;
......
static/nativeComponents/GoodsList/heapItem/index.js 0 → 100644
import TouchEvent from "./utils/touchEvent";
const componentOptions = {
// 组件选项
options: {
multipleSlots: true
},
behaviors: [],
properties: {
datas: {
type: Object
}
},
// 组件数据
data: {
isPageHidden: false, // 页面是否处于隐藏状态
isLoading: false,
swiperCurIndex: 0,
slideClass: "",
lockSwipe: false
},
// 数据监听器
observers: {},
// 组件生命周期
lifetimes: {
created() {
new TouchEvent(this, "touchCard", {
swipe: evt => {
//在touch结束触发，evt.direction代表滑动的方向 ['Up','Right','Down','Left']
if (evt.direction === "Left") this.next(evt);
if (evt.direction === "Right") this.prev(evt);
}
});
},
attached() {}
},
// 组件方法
methods: {
next(e) {
if (this.data.lockSwipe) return;
this.data.lockSwipe = true;
if (-this.data.swiperCurIndex >= this.data.datas.componentData.goodsList.length - 1) {
return (this.data.lockSwipe = false);
}
const index = e.currentTarget.dataset["index"];
this.setData(
{ ["datas.componentData.goodsList[" + index + "].slideClass"]: " ani-slide-up" },
() => {
this.setData({
swiperCurIndex: --this.data.swiperCurIndex
});
}
);
setTimeout(() => {
this.data.lockSwipe = false;
this.setData({
["datas.componentData.goodsList[" + index + "].slideClass"]: ""
});
}, 590);
},
prev(e) {
const index = e.currentTarget.dataset["index"] - 1;
if (this.data.lockSwipe || index < 0) return;
this.data.lockSwipe = true;
this.setData({
["datas.componentData.goodsList[" + index + "].slideClass"]: " ani-slide-down",
swiperCurIndex: ++this.data.swiperCurIndex
});
setTimeout(() => {
this.data.lockSwipe = false;
this.setData({
["datas.componentData.goodsList[" + index + "].slideClass"]: ""
});
}, 590);
}
},
definitionFilter() {},
// 页面生命周期
pageLifetimes: {
// 页面被展示
show() {
const { isPageHidden } = this.data;
// show事件发生前，页面不是处于隐藏状态时
if (!isPageHidden) {
return;
}
// 重新执行定时器等操作
},
// 页面被隐藏
hide() {
this.setData({
isPageHidden: true
});
// 清除定时器等操作
},
// 页面尺寸变化时
resize() {}
}
};
Component(componentOptions);
static/nativeComponents/GoodsList/heapItem/index.json 0 → 100644
{
"component": true,
"usingComponents": {
"goods-item": "../GoodsItem/index"
}
}
static/nativeComponents/GoodsList/heapItem/index.wxml 0 → 100644
<view class="container center">
<view class="card-swiper">
<view
wx:for="{{datas.componentData.goodsList}}"
wx:key="index"
data-index="{{index}}"
class="{{'card-swiper-item curdistance' + (swiperCurIndex + index) + (!!item.slideClass? item.slideClass: '')}}"
bindtap="next"
catchtouchstart="touchCard.start"
catchtouchmove="touchCard.move"
catchtouchend="touchCard.end"
catchtouchcancel="touchCard.cancel"
>
<goods-item
style="width:100%"
datas="{{datas}}"
items="{{datas.componentData.goodsList[index]}}"
indexs="{{index}}"
></goods-item>
</view>
</view>
</view>
static/nativeComponents/GoodsList/heapItem/index.wxss 0 → 100644
.container{
width: 100%;
height: 200rpx;
padding: 0 0 20rpx;
}
/**index.wxss**/
.card-swiper{
position: relative;
width: 100%;
height: 100%;
color: #666;
font-size: 28rpx;
}
.card-swiper-item{
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 92%;
transition: all .3s ease-out;
z-index: 0;
display: none;
overflow: hidden;
}
.card-swiper .card-swiper-item.curdistance0{
z-index: 10;
display: flex;
}
.card-swiper .card-swiper-item.curdistance1{
display: flex;
z-index: 9;
transform: scale(.95);
opacity: .7;
left: 40rpx;
}
.card-swiper .card-swiper-item.curdistance2{
display: flex;
z-index: 8;
transform: scale(.9);
opacity: .4;
left: 80rpx;
}
.ani-slide-up{
display: flex;
animation: slideUp .6s ease-out;
z-index: 11;
/* transform: rotate(25deg); */
}
.ani-slide-down{
display: flex;
animation: slideUp .6s ease-in;
animation-direction: reverse;
}
@keyframes slideUp{
0% {
}
70% {
opacity: 1;
}
100% {
transform: translateX(-1000rpx);
opacity: 0;
-webkit-transform: translateX(-1000rpx);
-moz-transform: translateX(-1000rpx);
-ms-transform: translateX(-1000rpx);
-o-transform: translateX(-1000rpx);
}
}
\ No newline at end of file
static/nativeComponents/GoodsList/heapItem/utils/touchEvent.js 0 → 100644
var defaultOption = {
touchStart: function () { },
touchMove: function () { },
touchEnd: function () { },
touchCancel: function () { },
multipointStart: function () { },
multipointEnd: function () { },
tap: function () { },
doubleTap: function () { },
longTap: function () { },
singleTap: function () { },
rotate: function () { },
pinch: function () { },
pressMove: function () { },
swipe: function () { }
}
export default class YrobotTouch {
constructor(pageOBJ, name, option = {}) {
this.preV = { x: null, y: null };
this.pinchStartLen = null;
this.scale = 1;
this.isDoubleTap = false;
this.delta = null;
this.last = null;
this.now = null;
this.tapTimeout = null;
this.singleTapTimeout = null;
this.longTapTimeout = null;
this.swipeTimeout = null;
this.x1 = this.x2 = this.y1 = this.y2 = null;
this.preTapPosition = { x: null, y: null };
this.lastZoom = 1;
this.tempZoom = 1;
try {
if (this._checkBeforeCreate(pageOBJ, name)) {
this._name = name
this._option = { ...defaultOption, ...option }
pageOBJ[name] = this
this._bindFunc(pageOBJ)
}
} catch (error) {
console.error(error)
}
}
_checkBeforeCreate(pageOBJ, name) {
if (!pageOBJ || !name) {
throw new Error('YrobotTouch实例化时，必须传入page对象和引用名')
return false
}
if (pageOBJ[name]) {
throw new Error('YrobotTouch实例化error： ' + name + ' 已经存在page中')
return false
}
return true
}
_bindFunc(pageOBJ) {
let funcNames = ['start', 'move', 'end', 'cancel']
for (let funcName of funcNames)
pageOBJ[this._name + '.' + funcName] = this[funcName].bind(this)
}
start(evt) {
if (!evt.touches) return;
this.now = Date.now();
this.x1 = evt.touches[0].pageX == null ? evt.touches[0].x : evt.touches[0].pageX;
this.y1 = evt.touches[0].pageY == null ? evt.touches[0].y : evt.touches[0].pageY;
this.delta = this.now - (this.last || this.now);
this._option.touchStart(evt);
if (this.preTapPosition.x !== null) {
this.isDoubleTap = (this.delta > 0 && this.delta <= 250 && Math.abs(this.preTapPosition.x - this.x1) < 30 && Math.abs(this.preTapPosition.y - this.y1) < 30);
}
this.preTapPosition.x = this.x1;
this.preTapPosition.y = this.y1;
this.last = this.now;
let preV = this.preV,
len = evt.touches.length;
if (len > 1) {
this._cancelLongTap();
this._cancelSingleTap();
let otx = evt.touches[1].pageX == null ? evt.touches[1].x : evt.touches[1].pageX;
let oty = evt.touches[1].pageY == null ? evt.touches[1].y : evt.touches[1].pageY;
let v = { x: otx - this.x1, y: oty - this.y1 };
preV.x = v.x;
preV.y = v.y;
this.pinchStartLen = getLen(preV);
this._option.multipointStart(evt);
}
this.longTapTimeout = setTimeout(function () {
evt.type = "longTap";
this._option.longTap(evt);
}.bind(this), 750);
}
move(evt) {
if (!evt.touches) return;
let preV = this.preV,
len = evt.touches.length,
currentX = evt.touches[0].pageX == null ? evt.touches[0].x : evt.touches[0].pageX,
currentY = evt.touches[0].pageY == null ? evt.touches[0].y : evt.touches[0].pageY;
this.isDoubleTap = false;
if (len > 1) {
let otx = evt.touches[1].pageX == null ? evt.touches[1].x : evt.touches[1].pageX;
let oty = evt.touches[1].pageY == null ? evt.touches[1].y : evt.touches[1].pageY;
let v = { x: otx - currentX, y: oty - currentY };
if (preV.x !== null) {
if (this.pinchStartLen > 0) {
evt.singleZoom = getLen(v) / this.pinchStartLen;
evt.zoom = evt.singleZoom * this.lastZoom;
this.tempZoom = evt.zoom;
evt.type = "pinch";
this._option.pinch(evt);
}
evt.angle = getRotateAngle(v, preV);
evt.type = "rotate";
this._option.rotate(evt);
}
preV.x = v.x;
preV.y = v.y;
} else {
if (this.x2 !== null) {
evt.deltaX = currentX - this.x2;
evt.deltaY = currentY - this.y2;
} else {
evt.deltaX = 0;
evt.deltaY = 0;
}
this._option.pressMove(evt);
}
this._option.touchMove(evt);
this._cancelLongTap();
this.x2 = currentX;
this.y2 = currentY;
if (len > 1) {
// evt.preventDefault();
}
}
end(evt) {
if (!evt.changedTouches) return;
this._cancelLongTap();
let self = this;
evt.direction = this._swipeDirection(this.x1, this.x2, this.y1, this.y2); //在结束钩子都加入方向判断，但触发swipe瞬时必须位移大于30
if (evt.touches.length < 2) {
this.lastZoom = this.tempZoom;
this._option.multipointEnd(evt);
}
this._option.touchEnd(evt);
//swipe
if ((this.x2 && Math.abs(this.x1 - this.x2) > 30) ||
(this.y2 && Math.abs(this.y1 - this.y2) > 30)) {
// evt.direction = this._swipeDirection(this.x1, this.x2, this.y1, this.y2);
this.swipeTimeout = setTimeout(function () {
evt.type = "swipe";
self._option.swipe(evt);
}, 0)
} else {
this.tapTimeout = setTimeout(function () {
evt.type = "tap";
self._option.tap(evt);
// trigger double tap immediately
if (self.isDoubleTap) {
evt.type = "doubleTap";
self._option.doubleTap(evt);
clearTimeout(self.singleTapTimeout);
self.isDoubleTap = false;
}
}, 0)
if (!self.isDoubleTap) {
self.singleTapTimeout = setTimeout(function () {
self._option.singleTap(evt);
}, 250);
}
}
this.preV.x = 0;
this.preV.y = 0;
this.scale = 1;
this.pinchStartLen = null;
this.x1 = this.x2 = this.y1 = this.y2 = null;
}
cancel(evt) {
clearTimeout(this.singleTapTimeout);
clearTimeout(this.tapTimeout);
clearTimeout(this.longTapTimeout);
clearTimeout(this.swipeTimeout);
this._option.touchCancel(evt);
}
_cancelLongTap() {
clearTimeout(this.longTapTimeout);
}
_cancelSingleTap() {
clearTimeout(this.singleTapTimeout);
}
_swipeDirection(x1, x2, y1, y2) {
return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
}
destroy() {
if (this.singleTapTimeout) clearTimeout(this.singleTapTimeout);
if (this.tapTimeout) clearTimeout(this.tapTimeout);
if (this.longTapTimeout) clearTimeout(this.longTapTimeout);
if (this.swipeTimeout) clearTimeout(this.swipeTimeout);
this._option.rotate = null;
this._option.touchStart = null;
this._option.multipointStart = null;
this._option.multipointEnd = null;
this._option.pinch = null;
this._option.swipe = null;
this._option.tap = null;
this._option.doubleTap = null;
this._option.longTap = null;
this._option.singleTap = null;
this._option.pressMove = null;
this._option.touchMove = null;
this._option.touchEnd = null;
this._option.touchCancel = null;
this.preV = this.pinchStartLen = this.scale = this.isDoubleTap = this.delta = this.last = this.now = this.tapTimeout = this.singleTapTimeout = this.longTapTimeout = this.swipeTimeout = this.x1 = this.x2 = this.y1 = this.y2 = this.preTapPosition = this.rotate = this.touchStart = this.multipointStart = this.multipointEnd = this.pinch = this.swipe = this.tap = this.doubleTap = this.longTap = this.singleTap = this.pressMove = this.touchMove = this.touchEnd = this.touchCancel = null;
return null;
}
}
function getLen(v) {
return Math.sqrt(v.x * v.x + v.y * v.y);
}
function dot(v1, v2) {
return v1.x * v2.x + v1.y * v2.y;
}
function getAngle(v1, v2) {
let mr = getLen(v1) * getLen(v2);
if (mr === 0) return 0;
let r = dot(v1, v2) / mr;
if (r > 1) r = 1;
return Math.acos(r);
}
function cross(v1, v2) {
return v1.x * v2.y - v2.x * v1.y;
}
function getRotateAngle(v1, v2) {
let angle = getAngle(v1, v2);
if (cross(v1, v2) > 0) {
angle *= -1;
}
return angle * 180 / Math.PI;
}
\ No newline at end of file
static/nativeComponents/GoodsList/index.json
{
"component": true,
"usingComponents": {
"goods-item":"./GoodsItem/index"
"goods-item":"./GoodsItem/index",
"waterfall-flow":"../module/WaterfallFlow/index",
"heap-item":"./heapItem/index"
}
}
static/nativeComponents/GoodsList/index.wxml
<!-- 商品列表组件 -->
<view class="goodsList">
<view class="goodsList" style="padding-top:{{datas.componentData.paddingList[0].value*2}}rpx;padding-bottom:{{datas.componentData.paddingList[1].value*2}}rpx;padding-left:{{datas.componentData.paddingList[2].value*2}}rpx;padding-right:{{datas.componentData.paddingList[3].value*2}}rpx;">
<view class="list-wrap heap-wrap" style="background-color:{{datas.componentData['heapBgColorShow'] ? datas.componentData['heapBgColor'] : ''}};border-radius:{{datas.componentData['cardBorderRadius']*2}}rpx;">
<!-- 头部 -->
<view class="tops flex" style="padding:{{(datas.componentData['titleIcon'] || (datas.componentData['moreShow'] && datas.componentData.moreButtonSite=='top')) ?'0rpx 0rpx 0rpx 10rpx' : ''}};margin-bottom:{{datas.componentData['titleCardGap']*2}}rpx">
<view class="left flex">
<view class="img" wx:if="{{datas.componentData['titleIcon']}}">
<image mode="widthFix" src="http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/ppefWK8BS6.png?x-oss-process=image/resize,limit_1,w_150,h_150" />
<view class="img" wx:if="{{titleIcon}}">
<image mode="widthFix" src="{{titleIcon}}" />
</view>
<view class="title">{{datas.componentData['titles']}}</view>
</view>
......@@ -23,17 +23,72 @@
<view
wx:for="{{datas.componentData.goodsList}}"
wx:key="index"
class="item"
class="goods-item"
style="width:{{100/datas.componentData.columnNum}}%;padding-left:{{datas.componentData.proGap*2}}rpx"
>
<goods-item
class="goodsItem"
datas="{{datas}}"
items="{{datas.componentData.goodsList[index]}}"
indexs="{{index}}"
></goods-item>
</view>
</view>
<!-- 横向滚动 -->
<view class="goods-across" wx:elif="{{datas.componentData.style==='across'}}">
<view class="prev-btn">
<text class="iconfont-common common-iconyoujiantou"></text>
</view>
<view class="next-btn">
<text class="iconfont-common common-iconyoujiantou"></text>
</view>
<view
wx:for="{{datas.componentData.goodsList}}"
wx:key="index"
class="goods-item"
style="width:{{100/datas.componentData.columnNum}}%;margin-right:{{datas.componentData.proGap*2}}rpx"
>
<goods-item
datas="{{datas}}"
items="{{datas.componentData.goodsList[index]}}"
indexs="{{index}}"
></goods-item>
</view>
</view>
<!-- 瀑布流 -->
<view wx:if="{{datas.componentData.style==='waterfall'}}">
<waterfall-flow
generic:defaultCom="goods-item"
id="waterfallFlow"
note="{{datas.componentData.goodsList}}"
datas="{{datas}}"
padding="{{datas.componentData.proGap}}"
wx:if="{{datas.componentData.goodsList}}"
></waterfall-flow>
</view>
<!-- 横向列表 -->
<view
class="goods goods-rowList"
wx:elif="{{datas.componentData.style==='rowList'}}"
style="margin-left:{{-datas.componentData.proGap*2}}rpx;"
>
<view
wx:for="{{datas.componentData.goodsList}}"
wx:key="index"
class="goods-item"
style="width:{{100/datas.componentData.columnNum}}%;padding-left:{{datas.componentData.proGap*2}}rpx"
>
<goods-item
datas="{{datas}}"
items="{{datas.componentData.goodsList[index]}}"
indexs="{{index}}"
></goods-item>
</view>
</view>
<!-- 堆叠卡片 -->
<view class="goods-heap-Item" wx:if="{{datas.componentData.style==='heap'}}">
<heap-item datas="{{datas}}"></heap-item>
</view>
</view>
</view>
static/nativeComponents/GoodsList/index.wxss
@import "/static/font/common_icon.wxss";
.flex{
display: flex;
}
......@@ -11,6 +12,9 @@ image{
.goodsList .heap-wrap{
padding: 20rpx;
}
.goods-item{
box-sizing: border-box;
}
.tops{
justify-content: space-between;
align-items: center;
......@@ -49,6 +53,35 @@ image{
.goodsItem-list{
flex-wrap: wrap;
}
.goodsItem-list .item{
.goodsItem-list .goods-item{
box-sizing: border-box;
}
.goods-across{
overflow-y: hidden;
overflow-X: auto;
white-space: nowrap;
padding-bottom: 10rpx;
display: flex;
align-items: flex-start;
}
.goods-across .prev-btn,.goods-across .next-btn{
position: absolute;
top: 50%;
z-index: 99;
opacity: 0.5;
}
.goods-across .prev-btn text,.goods-across .next-btn text{
font-size: 60rpx;
}
.goods-across .prev-btn{
left: 10px;
transform: rotate(180deg);
}
.goods-across .next-btn{
right: 10px;
}
.goods-across .goods-item{
flex-shrink: 0;
display: inline-block;
box-sizing: border-box;
}
\ No newline at end of file
static/nativeComponents/defaultCom/index.js 0 → 100644
const componentOptions = {
// 组件选项
options: {
multipleSlots: true
},
behaviors: [],
properties: {
items: {
type:Object
}
},
// 组件数据
data: {
isPageHidden: false // 页面是否处于隐藏状态
},
// 数据监听器
observers: {},
// 组件方法
methods: {
init() {}
},
// 组件生命周期
lifetimes: {
created() {},
attached() {
this.init();
},
ready() {},
moved() {},
detached() {}
},
definitionFilter() {},
// 页面生命周期
pageLifetimes: {
// 页面被展示
show() {
const { isPageHidden } = this.data;
// show事件发生前，页面不是处于隐藏状态时
if (!isPageHidden) {
return;
}
// 重新执行定时器等操作
},
// 页面被隐藏
hide() {
this.setData({
isPageHidden: true
});
// 清除定时器等操作
},
// 页面尺寸变化时
resize() {}
}
};
Component(componentOptions)
static/nativeComponents/defaultCom/index.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
static/nativeComponents/module/WaterfallFlow/index.js
const app = getApp();
Component({
properties: {},
// 启用插槽
options: {
multipleSlots: true
},
properties: {
note: {
type: Array
},
datas: {
type: Object
},
padding: {
type: Number
}
},
lifetimes: {
created() {
console.log("进入组件created");
......@@ -8,157 +22,15 @@ Component({
},
attached() {
console.log("进入组件attached");
this.initList();
// this.initList();
},
ready() {
console.log("进入组件ready");
this.reLoadPro();
// this.reLoadPro();
}
},
observers: {},
data: {
note: [
{
name: "大脸猫爱吃鱼大脸猫爱吃鱼大脸猫爱吃鱼大脸猫爱吃鱼大脸猫爱吃鱼",
heart_num: "1",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/241f95cad1c8a7863cb5bacd6709c93d71cf5052.jpg",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "2",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201407%2F09%2F195336lcyfkff8rw808row.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613701648&t=574800c4e85e1e5437c9a97d6ff8bc54",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "3",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201407%2F09%2F195336lcyfkff8rw808row.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613701648&t=574800c4e85e1e5437c9a97d6ff8bc54",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "4",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1025707121,3229693962&fm=26&gp=0.jpg",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "5",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1025707121,3229693962&fm=26&gp=0.jpg",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "6",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/241f95cad1c8a7863cb5bacd6709c93d71cf5052.jpg",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "7",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/241f95cad1c8a7863cb5bacd6709c93d71cf5052.jpg",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "8",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3111609385,453132559&fm=26&gp=0.jpg",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "9",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/241f95cad1c8a7863cb5bacd6709c93d71cf5052.jpg",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "10",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201403%2F02%2F092241w9f4vaz8peovfe91.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613701705&t=f7e3d83f199d4aac9b7d6ef3ea72cff1",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "11",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201403%2F02%2F092241w9f4vaz8peovfe91.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613701705&t=f7e3d83f199d4aac9b7d6ef3ea72cff1",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "12",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fandroid-wallpapers.25pp.com%2Ffs01%2F2014%2F10%2F10%2F2000_d9c1ccb59874db2de2ffccd707ecd997_900x675.jpg&refer=http%3A%2F%2Fandroid-wallpapers.25pp.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613701726&t=4b48ead509d1b6e0c8211504635bb854",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "13",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fandroid-wallpapers.25pp.com%2Ffs01%2F2014%2F10%2F10%2F2000_d9c1ccb59874db2de2ffccd707ecd997_900x675.jpg&refer=http%3A%2F%2Fandroid-wallpapers.25pp.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613701726&t=4b48ead509d1b6e0c8211504635bb854",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "14",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3111609385,453132559&fm=26&gp=0.jpg",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
}
],
//列数
waterfallImgCol: 2,
//列高度数组
......@@ -174,6 +46,8 @@ Component({
contentList[0] = [];
contentList[1] = [];
this.setData({ contentList });
console.log(this.data.note, "-------------------185");
this.reLoadPro();
},
async reLoadPro() {
let _this = this;
......@@ -215,11 +89,18 @@ Component({
imageLoad(ev) {
let windowWidth = wx.getSystemInfoSync().windowWidth;
let src = ev.currentTarget.dataset.src,
width = ev.detail.width,
height = ev.detail.height;
width = ev.detail.width,
height = ev.detail.height;
let newWidth = parseInt(windowWidth * 0.49);
let newHeight = parseInt(newWidth / (width / height));
console.log(width, height,newWidth,newHeight, ev.target.dataset.id, "-----------------------219");
console.log(
width,
height,
newWidth,
newHeight,
ev.target.dataset.id,
"-----------------------219"
);
}
}
});
static/nativeComponents/module/WaterfallFlow/index.json
{
"components":true
"component":true,
"componentGenerics": {
"defaultCom": {
"default": "/static/nativeComponents/defaultCom/index"
}
}
}
\ No newline at end of file
static/nativeComponents/module/WaterfallFlow/index.wxml
<!--瀑布流组件-->
<view class="waterfallFlow">
<view class="waterfallFlow" style="--proGap:{{padding}}rpx">
<view class="container flex">
<view
wx:for="{{contentList}}"
......@@ -13,14 +13,11 @@
wx:key="index1"
class="imageItem"
>
<image
src="{{item1.url}}"
mode='widthFix'
bindload="imageLoad"
data-id="{{item1.heart_num}}"
/>
<!-- <image src="https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/241f95cad1c8a7863cb5bacd6709c93d71cf5052.jpg" mode='widthFix'></image> -->
<text>{{item1.name}}--{{item1.heart_num}}</text>
<defaultCom
datas="{{datas}}"
items="{{item1}}"
indexs="{{2*index+index1}}"
></defaultCom>
</view>
</view>
</view>
......
static/nativeComponents/module/WaterfallFlow/index.wxss
......@@ -4,17 +4,16 @@ image {
.flex {
display: flex;
}
.waterfallFlow{
width: 100vw;
}
.container {
justify-content: space-around;
align-items: flex-start;
}
.container-item{
width: 49%;
width: 50%;
}
.imageItem{
border: 1px solid #333;
margin-bottom: 10rpx;
.container-item:nth-child(2n + 1) {
padding-right: var(--proGap);
}
.container-item:nth-child(2n + 2) {
padding-left: var(--proGap);
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment