Skip to content

M
mayi-mp-shop
Commit add36e11 by 程默
Options

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

parents 2df83795 03634695
Showing with 1761 additions and 101 deletions
src/api/changeAdr.js 0 → 100644
import {requestPOST,requestGET} from "@/utils/request.js";
console.log(process.env,'-----------------config------')
// wx
export default {
query_operating_area_area_list(data) {
return requestPOST(`${process.env.OLSHOP_URL}/operatingArea/query_operating_area_area_list?operatingAreaGroupId=${data}`);
},
query_Location_operating_area_area_list(data) {
return requestGET(`${process.env.OLSHOP_URL}/operatingArea/query_Location_operating_area_area_list?location=${data.location}`);
},
}
\ No newline at end of file
src/pages/changeAdr/index.vue 0 → 100644
<template>
<div class="con">
<div class="container1">
<div class="title">当前定位城市</div>
<div class="position">
<div>
<div class="city" @click="changeCity(positionCity,1)" v-if="locationStatus && positionCity.operatingAreaAreaId">{{ positionCity.regionName }}</div>
<div
class="position-err"
v-if="!locationStatus && !reLocationStatus"
@click="reLocation"
>
定位失败，点击重试
</div>
<div
class="position-err"
v-if="locationStatus && !positionCity.operatingAreaAreaId"
>
{{positionCity.regionName}}(该地区暂未开放)
</div>
<div v-if="reLocationStatus" style="padding-bottom:10px">
<van-loading type="spinner" size="18" />
<span style="font-size:14px;line-height:20px;vertical-align:top;margin-left:4px">正在定位...</span>
</div>
</div>
<div class="reset-position" @click="resetPosition">重新定位</div>
</div>
<div class="title" style="margin-top:10px">选择其他城市</div>
<div class="city-list clearfix">
<div class="item fl" v-for="item in cityList" :key="item.id" @click="changeCity(item,2)">
{{ item.regionName }}
</div>
</div>
</div>
</div>
</template>
<script>
import changeAdr from '@/api/changeAdr'
export default {
data(){
return{
cityList: [],
positionCity: {},
locationStatus: false,
reLocationStatus: true
}
},
onLoad(options){
console.log(options)
this.locationStart();
changeAdr.query_operating_area_area_list(options.areaGroupId).then(res => {
console.log(res.data)
if(res.data.code == '200'){
if(res.data.data){
res.data.data.forEach(item => {
item.areaGroupId= options.areaGroupId
})
this.cityList = res.data.data
}
}
})
},
methods:{
changeCity(item,type){
this.locationStatus = true
if(type == 1){
wx.setStorageSync('location',JSON.stringify({
id : item.operatingAreaAreaId,
regionName : item.regionName,
regionType : item.regionType,
systemRegionId : item.systemRegionId,
areaGroupId : item.groupId,
outId : item.outId
}))
}else{
wx.setStorageSync('location',JSON.stringify({
id : item.id,
regionName : item.regionName,
regionType : item.regionType,
systemRegionId : item.systemRegionId,
areaGroupId : item.groupId,
outId : item.outId
}))
}
this.define()
},
define(){
wx.navigateBack()
// wx.reLaunch({
// url:'/pages/home/main'
// })
},
locationStart(type){
console.log(wx.getStorageSync('location'),'2222222222222222222222222222')
let _this = this
if(wx.getStorageSync('location')){
let location = wx.getStorageSync('location') && JSON.parse(wx.getStorageSync('location'))
this.positionCity = {
operatingAreaAreaId : location.id,
regionName : location.regionName,
regionType : location.regionType,
systemRegionId : location.systemRegionId,
areaGroupId : location.areaGroupId,
}
if(!type){
this.reLocationStatus = false;
this.locationStatus = true;
return
}
wx.getLocation({
type: 'wgs84',
success:function(res){
const latitude = res.latitude
const longitude = res.longitude
console.log('定位成功',res)
changeAdr.query_Location_operating_area_area_list({
location : longitude + ',' + latitude
}).then(res => {
if(res.data.code == '200'){
let city = '';
res.data.data.forEach(item => {
if(item.operatingAreaAreaId){
city = item
}
})
if(city == ''){
_this.positionCity = res.data.data[0];
}else{
_this.positionCity = city;
}
_this.reLocationStatus = false;
_this.locationStatus = true;
}else{
wx.showModal({
title: '提示',
content: '定位失败，请检查是否开启了定位服务',
success (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
_this.reLocationStatus = false;
_this.locationStatus = false;
}
})
},
fail:function(err){
console.log('定位失败',err)
wx.showModal({
title: '提示',
content: '定位失败，请检查是否开启了定位服务',
success (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
_this.reLocationStatus = false;
_this.locationStatus = false;
}
})
}
},
resetPosition(){
this.reLocationStatus = true
this.locationStatus = false
this.locationStart(1)
},
reLocation() {
this.reLocationStatus = true;
this.locationStart();
},
}
}
</script>
<style lang="scss" scoped>
.con {
min-height: 100vh;
background-color: #f3f3f3;
}
.container1 {
padding: 10px;
}
.title {
color: #999;
}
.position {
margin-top: 6px;
display: flex;
justify-content: space-between;
align-items: center;
.city {
padding: 6px 36px;
font-size: 14px;
color: #333;
background-color: white;
border: 1px solid #ddd;
display: inline-block;
}
.position-err {
font-size: 14px;
padding-bottom: 10px;
}
.reset-position{
color: var(--main-color);
}
}
.city-list {
margin-top: 6px;
.item {
padding: 6px 30px;
font-size: 14px;
margin-right: 10px;
color: #333;
background-color: white;
border: 1px solid #ddd;
margin-bottom: 10px;
display: inline-block;
}
}
.van-loading {
height: 20px;
width: 20px;
display: inline-block;
vertical-align: bottom;
margin-right: 4px;
}
</style>
\ No newline at end of file
src/pages/changeAdr/main.js 0 → 100644
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
\ No newline at end of file
src/pages/changeAdr/main.json 0 → 100644
{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "切换地址",
"navigationBarTextStyle": "black",
"usingComponents": {
"van-loading": "/static/vant/loading/index"
}
}
\ No newline at end of file
src/pages/home/index.vue
......@@ -2,15 +2,22 @@
<div class="domain">
<view class="ant-daipinglun">1</view>
<!-- <goods-list id="goodsList"></goods-list> -->
<div v-for="(item, index) in pageData" :key="index">
<div v-if="item.componentCode == 'banner'">
baaaa
<banner :datas="item"></banner>
<scroll-view @scroll="scrolls" @scrolltolower="scrolltolower" style="height:100vh;" scroll-y="true">
<div v-for="(item,index) in pageData" :key="index">
<div v-if="item.componentCode=='banner'">
<banner :datas="item"></banner>
</div>
<div v-else-if="item.componentCode=='goods-list'" style="height:100%;">
<goods-list class="goodsListItem" :datas="item"></goods-list>
</div>
<div v-else-if="item.componentCode == 'area-navigation'">
<area-navigation :datas="item"></area-navigation>
</div>
<div v-else-if="item.componentCode == 'cube-nav'">
<cube-nav :datas="item"></cube-nav>
</div>
</div>
<div v-else-if="item.componentCode == 'goods-list'">
<goods-list :datas="item"></goods-list>
</div>
</div>
</scroll-view>
<!-- <image
src="http://cdn.mayi888.com/public/jpg/33ff0efc-96b5-4044-a65a-07799dfe98e1.jpg?x-oss-process=image/resize,limit_1,w_750"
></image>
......@@ -58,6 +65,13 @@ export default {
this.pageData = JSON.parse(this.pageInfo.pageData);
console.log("36", this.pageData);
},
scrolls(el){
console.log('scroll')
this.$mp.page.selectComponent(".goodsListItem").getScroll(el);
},
scrolltolower(){
console.log("scrolltolower")
}
},
};
</script>
......
src/pages/home/main.json
......@@ -3,6 +3,9 @@
"banner": "/static/nativeComponents/Banner/index",
"goods-list": "/static/nativeComponents/GoodsList/index",
"waterfall-flow": "/static/nativeComponents/module/WaterfallFlow/index",
"van-button": "/static/vant/button/index"
}
"van-button": "/static/vant/button/index",
"area-navigation":"/static/nativeComponents/AreaNavigation/index",
"cube-nav":"/static/nativeComponents/CubeNav/index"
},
"enablePullDownRefresh":true
}
\ No newline at end of file
src/pages/index/index.vue
......@@ -130,6 +130,9 @@ export default {
} else if (options.from && (options.from == "home" || options.from == "livedToIndex")) {
//来自直播详情
this.page = decodeURIComponent(options.backpath);
if(this.page.includes("?")){
this.params="&mixid=" + this.shopId;
}
options.params && (this.params += "&" + serialize(options.params));
} else if (options.from && options.from == "livedBackShop") {
//直播页back到商城
......
src/utils/mayi.js
......@@ -87,9 +87,9 @@ export function $themeToLink(data, option) {
}
}
function toPage(backPath, backParams) {
function toPage(backPath, backParams = "") {
wx.navigateTo({
url: `../index/main?from=home&backpath=${backPath}&params=${encodeURIComponent(backParams)}`
url: `../index/main?from=home&backpath=${encodeURIComponent(backPath)}&params=${encodeURIComponent(backParams)}`
});
}
......
src/utils/request.js
......@@ -15,6 +15,7 @@ export async function requestGET(url, options) {
"Shop-Mixid": store.state.mixid,
"Offline-Shop-Code": store.state.offlineShopCode,
"Authorization": wx.getStorageSync('sessionid') || "",
"Location-Id" : wx.getStorageSync('location') ? JSON.parse(wx.getStorageSync('location')).systemRegionId : ''
// "dubbo-tag": "ljx"
},
success: function (res) {
......@@ -37,7 +38,8 @@ export async function requestPOST(url, options) {
"Shop-Mixid": store.state.mixid,
"Authorization": wx.getStorageSync('sessionid') || "",
"Offline-Shop-Code": store.state.offlineShopCode,
"openId": wx.getStorageSync("openid") || ''
"openId": wx.getStorageSync("openid") || '',
"Location-Id" : wx.getStorageSync('location') ? JSON.parse(wx.getStorageSync('location')).systemRegionId : ''
// "dubbo-tag": "ljx"
},
success: function (res) {
......
static/nativeComponents/AreaNavigation/index.js 0 → 100644
// static/nativeComponents/AreaNavigation/index.js
const app = getApp()
Component({
/**
* 组件的属性列表
*/
properties: {
datas : {
type : Object
}
},
/**
* 组件的初始数据
*/
data: {
noShow : false,
positionCity: "",
changeShow: false,
positionName: '定位中',
wxReady: false
},
ready(){
console.log('++++++++++++++++++++定位组件加载好了++++++++++++++++++++')
console.log(getCurrentPages())
if (this.data.datas.componentInfo.visible == 1) {
let _this = this;
if (wx.getStorageSync('location')) {
this.setData({
'datas.componentData.designateAreaObj': JSON.parse(wx.getStorageSync('location'))
})
this.setData({
positionName: this.data.datas.componentData.designateAreaObj.regionName
})
}
wx.getLocation({
type: 'wgs84',
success(res) {
console.log(res, '++++++++++获取地区')
const latitude = res.latitude
const longitude = res.longitude
wx.request({
url: `http://test-m-shop.mayi888.cn/test/innerApi/shopApiService/operatingArea/query_Location_operating_area_area_list?location=${longitude},${latitude}`,
header: {
'Shop-Mixid': 'Id9uwD'
},
success(data) {
if (data.data.code == '200') {
let city = ''
data.data.data.forEach(item => {
if (item.operatingAreaAreaId) {
city = item;
}
})
if (city == '') {
_this.setData({
positionCity: data.data.data[0]
})
} else {
_this.setData({
positionCity: city
})
}
console.log(_this.data.positionCity, '定位城市信息')
console.log(_this.data.datas.componentData.designateAreaObj,'组件信息')
let str = JSON.stringify({
id: _this.data.positionCity.operatingAreaAreaId,
regionName: _this.data.positionCity.regionName,
regionType: _this.data.positionCity.regionType,
systemRegionId: _this.data.positionCity.systemRegionId,
outId: _this.data.positionCity.outId,
areaGroupId: _this.data.positionCity.areaGroupId,
})
console.log(str,'str.......')
wx.setStorageSync('location', str)
if (_this.data.positionCity.operatingAreaAreaId == _this.data.datas.componentData.designateAreaObj.id){
_this.setData({
positionName: _this.data.positionCity.regionName
})
}else{
_this.setData({
changeShow : true
})
}
} else {
}
}
})
},
fail(error) {
console.log('定位失败')
}
})
}
console.log('++++++++++++++++++++定位组件加载好了++++++++++++++++++++')
},
pageLifetimes : {
show(){
console.log('组件页面出来show', this.data.datas.componentData.designateAreaObj)
console.log('组件页面出来show', this.data.positionCity)
if(wx.getStorageSync('location')){
let locationObj = JSON.parse(wx.getStorageSync('location'))
if (locationObj.id){
if (locationObj.id != this.data.positionCity.operatingAreaAreaId){
this.setData({
positionName: locationObj.regionName
})
this.setData({
'datas.componentData.designateAreaObj.id': locationObj.id,
'datas.componentData.designateAreaObj.regionName': locationObj.regionName,
'datas.componentData.designateAreaObj.regionType': locationObj.regionType,
'datas.componentData.designateAreaObj.systemRegionId': locationObj.systemRegionId,
'datas.componentData.designateAreaObj.areaGroupId': locationObj.areaGroupId,
'datas.componentData.designateAreaObj.outId': locationObj.outId
})
let obj = {
operatingAreaAreaId: locationObj.id,
regionName: locationObj.regionName,
regionType: locationObj.regionType,
systemRegionId: locationObj.systemRegionId,
areaGroupId: locationObj.areaGroupId,
outId: locationObj.outId,
}
this.setData({
positionCity : obj
})
}
return
}
if (locationObj.regionName != this.data.positionCity.regionName){
this.setData({
positionName: locationObj.regionName
})
this.setData({
'datas.componentData.designateAreaObj.id': locationObj.id,
'datas.componentData.designateAreaObj.regionName': locationObj.regionName,
'datas.componentData.designateAreaObj.regionType': locationObj.regionType,
'datas.componentData.designateAreaObj.systemRegionId': locationObj.systemRegionId,
'datas.componentData.designateAreaObj.areaGroupId': locationObj.areaGroupId,
'datas.componentData.designateAreaObj.outId': locationObj.outId
})
let obj = {
operatingAreaAreaId: locationObj.id,
regionName: locationObj.regionName,
regionType: locationObj.regionType,
systemRegionId: locationObj.systemRegionId,
areaGroupId: locationObj.areaGroupId,
outId: locationObj.outId,
}
this.setData({
positionCity: obj
})
return
}
}
}
},
/**
* 组件的方法列表
*/
methods: {
//切换城市
changeTo(){
this.setData({
'datas.componentData.designateAreaObj.id': this.data.positionCity.operatingAreaAreaId,
'datas.componentData.designateAreaObj.regionName': this.data.positionCity.regionName,
'datas.componentData.designateAreaObj.regionType': this.data.positionCity.regionType,
'datas.componentData.designateAreaObj.systemRegionId': this.data.positionCity.systemRegionId,
'datas.componentData.designateAreaObj.areaGroupId': this.data.positionCity.areaGroupId,
'datas.componentData.designateAreaObj.outId': this.data.positionCity.outId
})
console.log(this.data.datas.componentData.designateAreaObj)
console.log(this.data.positionCity)
let change = JSON.stringify(this.data.datas.componentData.designateAreaObj)
this.setData({
positionName: this.data.positionCity.regionName,
changeShow : false
})
wx.setStorageSync('location', change )
// wx.startPullDownRefresh()
},
continueBrowser(){
console.log(this.data.datas.componentData.designateAreaObj)
wx.setStorageSync('location', JSON.stringify(this.data.datas.componentData.designateAreaObj))
this.setData({
positionName: this.data.datas.componentData.designateAreaObj.regionName,
changeShow: false
})
// wx.startPullDownRefresh()
},
changeOtherCity(){
console.log(getCurrentPages())
wx.navigateTo({
url: '/pages/changeAdr/main?areaGroupId=' + this.data.datas.componentData.areaGroupId,
})
}
},
})
static/nativeComponents/AreaNavigation/index.json 0 → 100644
{
"component": true,
"usingComponents": {
"van-dialog": "/static/vant/dialog/index",
"van-icon": "/static/vant/icon/index",
"van-sticky":"/static/vant/sticky/index"
}
}
\ No newline at end of file
static/nativeComponents/AreaNavigation/index.wxml 0 → 100644
<!--static/nativeComponents/AreaNavigation/index.wxml-->
<van-sticky wx:if="{{datas.componentData.scrollPosition}}">
<view class="area-navigation clearfix" style="background-color:{{datas.componentData.backgroundColor}}">
<view style="width:100%;display:flex;">
<view class="area-l" style="font-size:{{datas.componentData.fontSize / 16 + 'em'}};color:{{datas.componentData.fontColor}};font-weight:{{datas.componentData.fontWeight}}" bindtap="changeOtherCity">
<view class="antt ant-gongsidizhi"></view>
<title class="title">{{positionName}}</title>
<van-icon name="arrow-down" style="margin-left:4rpx" />
</view>
<view class="area-r">
<input class="area-search" type="text" style="background-color:{{datas.componentData.searchBgColor}};font-size:{{datas.componentData.searchFontSize / 16 + 'em'}};color:{{datas.componentData.searchFontColor}};font-weight:{{datas.componentData.searchFontWeight}}">
</input>
</view>
</view>
</view>
</van-sticky>
<view wx:if="{{!datas.componentData.scrollPosition}}">
<view class="area-navigation clearfix" style="background-color:{{datas.componentData.backgroundColor}}">
<view style="width:100%;display:flex;">
<view class="area-l" style="font-size:{{datas.componentData.fontSize / 16 + 'em'}};color:{{datas.componentData.fontColor}};font-weight:{{datas.componentData.fontWeight}}" bindtap="changeOtherCity">
<view class="antt ant-gongsidizhi"></view>
<title class="title">{{positionName}}</title>
<van-icon name="arrow-down" style="margin-left:4rpx" />
</view>
<view class="area-r">
<input class="area-search" type="text" style="background-color:{{datas.componentData.searchBgColor}};font-size:{{datas.componentData.searchFontSize / 16 + 'em'}};color:{{datas.componentData.searchFontColor}};font-weight:{{datas.componentData.searchFontWeight}}">
</input>
</view>
</view>
</view>
</view>
<van-dialog
show="{{noShow}}"
use-slot
showConfirmButton="{{false}}"
class="change-dialog"
>
<view class="change-dialog">
<view style="line-height:60rpx">您所在的地区暂未开放</view>
<view class="change-btn">切换其他城市</view>
</view>
</van-dialog>
<van-dialog
show="{{changeShow}}"
use-slot
showConfirmButton="{{false}}"
class="change-dialog"
>
<view class="change-dialog">
<view style="line-height:60rpx">
定位显示为{{ positionCity.regionName }}
</view>
<view class="change-btn line-clamp1" bindtap="changeTo">
切换到{{ positionCity.regionName }}
</view>
<view class="continue line-clamp1" bindtap="continueBrowser">
继续浏览{{ datas.componentData.designateAreaObj.regionName }}
</view>
</view>
</van-dialog>
static/nativeComponents/AreaNavigation/index.wxss 0 → 100644
/* static/nativeComponents/AreaNavigation/index.wxss */
@import '../../nicon/iconfont.wxss';
.area-navigation {
width: 100%;
box-sizing: border-box;
padding: 12rpx 24rpx;
z-index: 99999999;
font-size: 32rpx;
top: 0;
}
.area-l{
line-height: 60rpx;
}
.area-l .ant-gongsidizhi{
line-height: 60rpx;
float: left;
}
.area-l .title{
display: block;
float: left;
}
.area-r {
margin-left: 20rpx;
flex: 1;
}
.area-search {
width: 100%;
height: 60rpx;
border-radius: 30rpx;
box-sizing: border-box;
padding: 0 24rpx;
line-height: 60rpx;
border: none;
}
.change-dialog {
text-align: center;
padding: 20rpx 80rpx 36rpx !important;
box-sizing: border-box;
}
.change-dialog .continue {
height: 60rpx;
padding: 0 20rpx;
box-sizing: border-box;
width: 100%;
border-radius: 30rpx;
background-color: white;
text-align: center;
line-height: 60rpx;
margin: 20rpx auto 0;
border: 1rpx solid #999;
font-size: 28rpx;
}
.change-dialog .change-btn {
height: 60rpx;
border-radius: 30rpx;
line-height: 60rpx;
margin: 20rpx auto 0;
width: 100%;
box-sizing: border-box;
color: white;
/* background-color: var(--main-color); */
background-color: red;
text-align: center;
font-size: 28rpx;
padding: 0 20rpx;
}
\ No newline at end of file
static/nativeComponents/CubeNav/index.js 0 → 100644
// static/nativeComponents/CubeNav/index.js
const app = getApp()
Component({
/**
* 组件的属性列表
*/
properties: {
datas: {
type: Object
}
},
/**
* 组件的初始数据
*/
data: {
imgList: [],
getColumnWidth: '',
getImgSize: 0,
navShow: false,
wrapW: 0,
w: 0,
swiperList: [],
swiperItemW: 0,
navLeft: 0,
cube2W: 0,
cube3H: 0,
},
ready() {
this.init()
},
/**
* 组件的方法列表
*/
methods: {
init() {
let _this = this;
let columnWidthArr = ['100%', '50%', '33.3%', '25%', '20%', '16.6%']
this.setData({
imgList: this.data.datas.componentData.imgList.filter(item => item.visible == undefined || item.visible == 1),
getColumnWidth: columnWidthArr[this.data.datas.componentData.columnNum - 1],
getImgSize: (100 - this.data.datas.componentData.imgSize) / 2
})
let arr = []
let count = this.data.datas.componentData.columnNum * this.data.datas.componentData.rowNum;
let num = Math.ceil(this.data.imgList.length / count);
for (let i = 0; i < num; i++) {
arr.push([]);
}
this.data.imgList.forEach((item, index) => {
let i = Math.floor(index / count);
arr[i].push(item);
});
this.setData({
swiperList: arr
})
this.createSelectorQuery().select('.cube-item').boundingClientRect(function(res) {
console.log('swiper-wrap', res)
if (res) {
_this.setData({
cube3H: res.height * 2 * _this.data.datas.componentData.rowNum
})
}
}).exec()
console.log('轮播图swiperList', this.data.swiperList)
this.createSelectorQuery().select('.cube2').boundingClientRect(function(res) {
console.log('来这里了', res)
if (res) {
let cube2W = res.width
_this.setData({
cube2W: cube2W
})
let wArr = [cube2W / 1, cube2W / 2, cube2W / 3, cube2W / 4, cube2W / 5, cube2W / 6]
if (
Math.floor(
_this.data.imgList.length /
(_this.data.datas.componentData.columnNum * _this.data.datas.componentData.rowNum)
) == 0
) {
_this.setData({
wrapW: cube2W
})
} else {
_this.setData({
wrapW: Math.floor(
_this.data.imgList.length /
(_this.data.datas.componentData.columnNum * _this.data.datas.componentData.rowNum)
) *
cube2W + (_this.data.imgList.length %
(_this.data.datas.componentData.columnNum *
_this.data.datas.componentData.rowNum)) *
wArr[_this.data.datas.componentData.columnNum - 1]
})
}
_this.setData({
w: wArr[_this.data.datas.componentData.columnNum - 1]
})
if (_this.data.wrapW > cube2W) {
_this.setData({
navShow: true
})
} else {
_this.setData({
navShow: false
})
}
}
}).exec()
},
touchmove(e) {
let _this = this
this.debounce(function() {
let moveX = _this.data.wrapW - _this.data.cube2W;
_this.createSelectorQuery().select('#wrapW').boundingClientRect(function(res) {
if (res) {
let x = Math.abs(res.left) / moveX;
_this.setData({
navLeft: 30 * x
})
}
}).exec()
}, 100)()
},
debounce(func, wait) {
let timeout = "";
return v => {
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(() => {
func(v);
}, wait);
};
},
onclickHandle(e){
let item = e.currentTarget.dataset.item
console.log(item)
}
}
})
\ No newline at end of file
static/nativeComponents/CubeNav/index.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
static/nativeComponents/CubeNav/index.wxml 0 → 100644
<!--static/nativeComponents/CubeNav/index.wxml-->
<view class="cube-nav" style="padding-top:{{datas.componentData.verticalMargin * 2}}rpx;padding-bottom:{{datas.componentData.verticalMargin * 2}}rpx;padding-left:{{datas.componentData.levelMargin * 2}}rpx;padding-right:{{datas.componentData.levelMargin * 2}}rpx">
<view class="cube1 clearfix" wx:if="{{datas.componentData.layoutType == 0}}" style="background-color:{{datas.componentData.backgroundColor || ''}};border-radius:{{datas.componentData.moduleRadius * 2}}rpx">
<view class="cube-item" wx:for="{{imgList}}" style="padding-top:{{datas.componentData.lineHeight * 2}}rpx;padding-bottom:{{datas.componentData.lineHeight * 2}}rpx;width:{{getColumnWidth}};position:relative" bindtap="onclickHandle" data-item="{{item}}">
<view style="padding-left:{{getImgSize}}%;padding-right:{{getImgSize}}%">
<view class="item-img {{item.imageUrl == '' ? 'item-bg' : ''}}">
<image wx:if="{{item.imageUrl}}" src="{{item.imageUrl}}"></image>
</view>
</view>
<view class="item-title" style="font-size:{{datas.componentData.textSize * 2}}rpx;color:{{datas.componentData.fontColor}};height:{{datas.componentData.textSize / 12}}em;line-hieght:{{datas.componentData.textSize / 12}}em">{{ item.title }}</view>
</view>
</view>
<view wx:if="{{datas.componentData.layoutType == 1}}" style="position:relative;background-color:{{datas.componentData.backgroundColor || ''}};border-radius:{{datas.componentData.moduleRadius * 2}}rpx;padding-bottom:{{navShow ? '20rpx' : '0'}}">
<view class="cube2 clearfix" style="overflow-x:auto;overflow-y:hidden" bindtouchmove="touchmove">
<view class="clearfix" style="width:{{wrapW * 2}}rpx" id="wrapW">
<view class="cube-item" wx:for="{{imgList}}" style="padding-top:{{datas.componentData.lineHeight * 2}}rpx;padding-bottom:{{datas.componentData.lineHeight *2}}rpx;width:{{w * 2}}rpx;position:relative" bindtap="onclickHandle" data-item="{{item}}">
<view style="padding-left:{{getImgSize}}%;padding-right:{{getImgSize}}%">
<view class="item-img {{item.imageUrl == '' ? 'item-bg' : ''}}">
<image wx:if="{{item.imageUrl}}" src="{{item.imageUrl}}"></image>
</view>
</view>
<view class="item-title" style="font-size:{{datas.componentData.textSize * 2}}rpx;color:{{datas.componentData.fontColor}};height:{{datas.componentData.textSize / 12}}em;line-hieght:{{datas.componentData.textSize / 12}}em">{{item.title}}
</view>
</view>
</view>
</view>
<view class="nav-wrap" wx:if="{{navShow && datas.componentData.layoutType == 1}}">
<view class="nav">
<view class="inner-nav" style="left :{{navLeft*2}}rpx;background-color:#f00"></view>
</view>
</view>
</view>
<view class="cube3 clearfix" wx:if="{{datas.componentData.layoutType == 2}}" style="background-color:{{datas.componentData.backgroundColor || ''}};border-radius:{{datas.componentData.moduleRadius * 2}}rpx;">
<swiper indicator-dots="{{true}}" style="height:{{cube3H}}rpx">
<swiper-item wx:for="{{swiperList}}" style="width:{{swiperItemW*2}}rpx">
<view class="cube-item" style="padding-top:{{datas.componentData.lineHeight * 2}}rpx;padding-bottom:{{datas.componentData.lineHeight * 2}}rpx;width:{{getColumnWidth}};position:relative" wx:for-item="item1" wx:for="{{item}}" data-item="{{item1}}" bindtap="onclickHandle">
<view style="padding-left:{{getImgSize}}%;padding-right:{{getImgSize}}%">
<view class="item-img {{item1.imageUrl == '' ? 'item-bg' : ''}}">
<image wx:if="{{item1.imageUrl}}" src="{{item1.imageUrl}}"></image>
</view>
</view>
<view class="item-title" style="font-size:{{datas.componentData.textSize * 2}}rpx;color:{{datas.componentData.fontColor}};height:{{textSize / 12}}em;line-hieght:{{textSize / 12}}em">{{item1.title}}
</view>
</view>
</swiper-item>
</swiper>
</view>
</view>
\ No newline at end of file
static/nativeComponents/CubeNav/index.wxss 0 → 100644
/* static/nativeComponents/CubeNav/index.wxss */
.clearfix:after {
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.clearfix {
zoom: 1;
}
.cube-nav{
width: 100%;
height: 100%;
box-sizing: border-box;
font-size: 16rpx;
}
.cube1,.cube2,.cube3{
width: 100%;
height: 100%;
box-sizing: border-box;
overflow: hidden;
position: relative;
}
.cube-item{
float: left;
}
.cube-item .item-img{
position: relative;
overflow: hidden;
width: 100%;
height: 0;
padding-bottom: 100%;
}
.cube-item .item-img image{
width: 100%;
height: 100%;
position: absolute;
margin: auto;
top: -9999px;
right: -9999px;
bottom: -9999px;
left: -9999px;
object-fit: contain;
}
.cube-item .item-bg {
background-image: linear-gradient(#8bd3fb, #4e98f8);
background-image: -webkit-linear-gradient(#8bd3fb, #4e98f8);
}
.item-title {
width: 100%;
text-align: center;
margin-top: 16rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cube2::-webkit-scrollbar {
display: none;
}
.nav-wrap {
width: 100%;
position: absolute;
text-align: center;
bottom: 8rpx;
}
.nav {
width: 120rpx;
height: 8rpx;
border-radius: 4rpx;
position: relative;
overflow: hidden;
margin: 0 auto;
background-color: #ccc;
}
.inner-nav {
width: 60rpx;
height: 8rpx;
border-radius: 4px;
position: absolute;
background-color: var(--main-color);
top: 0;
}
static/nativeComponents/GoodsList/GoodsItem/index.js
const app = getApp();
const { goodsApi, DFSImg, $themeToLink } = app;
const componentOptions = {
// 组件选项
options: {
......@@ -18,7 +20,7 @@ const componentOptions = {
// 组件数据
data: {
isPageHidden: false, // 页面是否处于隐藏状态
timeData: {},
timeData: {}
},
// 数据监听器
observers: {},
......@@ -54,7 +56,49 @@ const componentOptions = {
},
onChange(e) {
this.setData({ timeData: e.detail });
}
},
onclickProduct() {
let { goodsType } = this.data.datas.componentData;
let {
productId,
terminalProductId,
terminalGoodsMixId
} = this.data.items;
let linkVal = "";
if (goodsType == 0) {
linkVal = `/goods/${productId}?terminalProductId=${terminalProductId}`;
} else if (goodsType == 1) {
linkVal = `/pointShop/goodsDetail?productId${productId}&terminalProductId=${terminalProductId}&terminalGoodsMixId=${terminalGoodsMixId}`;
}
$themeToLink({
type: 1,
link: linkVal
});
},
onclickBuynow() {
let { btnType } = this.data.datas.componentData;
let {
minProductGoodsMixid,
minProductGoodsId,
minGoodsId
} = this.data.items;
let linkVal = "";
if (btnType < 6) {
// 加入购物车
console.log("加入购物车");
// this.$themeAddToCard(item);
} else {
// 进入确认订单
linkVal = `/order/orderConfirm?productGoodsMixId=${minProductGoodsMixid}&productGoodsId=${minProductGoodsId}&goodsId=${minGoodsId}&qty=1&goodsString=null&source=3`;
}
console.log(linkVal, "-------90");
$themeToLink({ type: 1, link: linkVal });
},
toMerchants() {
let { orgId } = this.data.items;
$themeToLink({ type: 1, link: `/merchantsDetail/${orgId}` });
},
},
// 组件生命周期
lifetimes: {
......
static/nativeComponents/GoodsList/GoodsItem/index.wxml
<!-- 商品列表item -->
<view class="goodsItem {{datas.componentData.style==='rowList'?'goodsRowList':''}}" 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;"
bindtap="onclickProduct"
>
<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"
bindtoMerchants="toMerchants"
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="{{items.shopLogoUrl}}" />
......@@ -18,7 +26,7 @@
style="padding:{{datas.componentData.imgSize}}"
>
<!-- 开启售卖 -->
<view class="saleWay" wx:if="{{items.saleWay==2 && items.getSaleTime>0}}">
<view class="saleWay" wx:if="{{items.saleWay==2 && items.getSaleTime>0 && datas.componentData.style!='heap'}}">
<view class="saleWayBg"></view>
<view class="saleTime">
<van-count-down
......@@ -49,13 +57,13 @@
</view>
<!-- 商品主图 -->
<image
mode="{{datas.componentData.style==='rowList'?'aspectFit':'widthFix'}}"
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'?'aspectFit':'widthFix'}}"
mode="{{datas.componentData.style==='rowList' || datas.componentData.style==='heap'?'aspectFit':'widthFix'}}"
class="productImgUrl"
wx:else
src="{{items.coverImage}}"
......@@ -71,7 +79,11 @@
<!-- 商品详情 -->
<view class="info" style="text-align:{{datas.componentData['initcharAlign']}};">
<view class="info-top flex">
<view class="name" wx:if="{{datas.componentData['nameShow']}}">
<view
class="name"
wx:if="{{datas.componentData['nameShow']}}"
style="color:{{datas.componentData['nameColor']}};font-weight:{{datas.componentData['nameFontWeight']}};font-size:{{datas.componentData['nameFontSize']}}em;height:2.8em;"
>
{{items!=null?items['productName']:'名称'}}
</view>
<view
......@@ -148,7 +160,7 @@
>
已售罄
</view>
<view wx:if="{{(items&&items.totalQty-0>0||items&&items.oversoldFlag==1)&& datas.componentData['paynow']}}">
<view wx:if="{{(items&&items.totalQty-0>0||items&&items.oversoldFlag==1)&& datas.componentData['paynow']}}" catchtap="onclickBuynow">
<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
......@@ -187,7 +199,11 @@
</block>
</view>
<!-- 商户入口二 -->
<view class="merchantsEntrance flex" wx:if="{{datas.componentData.merchantsEntrance&&datas.componentData.merchantsEntranceType==1}}">
<view
class="merchantsEntrance flex"
bindtoMerchants="toMerchants"
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
......@@ -3,7 +3,7 @@
display: flex;
}
.goods-item-child-bd{
border: 1px solid var(--border-color);
border: 1px solid var(--border_color);
}
image{
width: 100%;
......@@ -40,6 +40,9 @@ align-items: flex-start;
flex-direction: column;
justify-content: space-around;
}
.goodsHeapItem{
width: 100%;
}
.merchantsEntrance{
padding: 8rpx 20rpx;
......
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: '')}}"
bindtouchstart="touchCard.start"
bindtouchmove="touchCard.move"
bindtouchend="touchCard.end"
bindtouchcancel="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.js
const app = getApp();
const { goodsApi,DFSImg } = app;
const { goodsApi, DFSImg, $themeToLink } = app;
const componentOptions = {
// 组件选项
options: {
......@@ -16,7 +16,10 @@ const componentOptions = {
isPageHidden: false, // 页面是否处于隐藏状态
titleIcon: "",
classificationLoadPage: 1,
classificationLoadNum: 10
classificationLoadNum: 10,
queryProductInfoLoading: false,
loading: false,
finished: false
},
// 数据监听器
observers: {},
......@@ -65,7 +68,9 @@ const componentOptions = {
titleIcon
} = this.data.datas.componentData;
angleSignImg = DFSImg(angleSignImg);
titleIcon = DFSImg(titleIcon);
if (titleIcon) {
titleIcon = DFSImg(titleIcon);
}
this.setData({
"data.datas.componentData.angleSignImg": angleSignImg,
titleIcon
......@@ -91,39 +96,63 @@ const componentOptions = {
},
getProductList(code, type) {
let { goodsList, goodsSort } = this.data.datas.componentData;
let {
classificationLoadPage,
loading,
finished,
queryProductInfoLoading
} = this.data;
if (queryProductInfoLoading == true) {
return;
}
this.setData({ queryProductInfoLoading: true });
// type 1初始化 2滚动加载
//分类查
if (code == 1) {
if (type == 1) {
classificationLoadPage = 1;
} else {
classificationLoadPage++;
loading = true;
}
this.setData({ classificationLoadPage, loading });
let query = {
categoryId: this.data.datas.componentData.categoryId,
page: this.showRowNum()
? 1
: this.data.datas.componentData.classificationLoadPage, // 当前页
page: this.showRowNum() ? classificationLoadPage : 1,
rows: this.showRowNum()
? this.getItemNum()
: this.classificationLoadNum, // 一页多少条
sortColumn: this.data.datas.componentData.goodsSort,
sortType: this.data.datas.componentData.goodsSort != 2 ? 1 : 0,
? this.data.classificationLoadNum
: this.getItemNum(),
sortColumn: goodsSort,
sortType: goodsSort != 2 ? 1 : 0,
whetherShowSoldOutGoods: this.data.datas.componentData
.whetherShowSoldOutGoods, //查询销售数量
whetherQueryCollectCount: true, //查询收藏数
whetherUseVirtualSalesQty: true, //是否使用虚拟销售数量
whetherUseVirtualCollectCount: true, //是否使用虚拟收藏人数
.whetherShowSoldOutGoods,
whetherQueryCollectCount: true,
whetherUseVirtualSalesQty: true,
whetherUseVirtualCollectCount: true,
whetherFindDistributionCommission: this
.whetherFindDistributionCommission, //是否查询商品佣金（0：不查询，1：展示，为空不查佣金）
.whetherFindDistributionCommission,
whetherFindRecommendedCardFlag: this.data.datas.componentData.vipPrice
? 1
: 0, //是否查询会员价 1是 0否
: 0,
whetherShowGoodsDefaultTagFlag: this.data.datas.componentData
.marketingTag
? 1
: 0, //是否展示营销标签 1是 0否
whetherFindMultiShopFlag: 1 //是否查询多商户 //商城使用
};
: 0,
whetherFindMultiShopFlag: 1
}; // 当前页 // 一页多少条 //查询销售数量 //查询收藏数 //是否使用虚拟销售数量 //是否使用虚拟收藏人数 //是否查询商品佣金（0：不查询，1：展示，为空不查佣金） //是否查询会员价 1是 0否 //是否展示营销标签 1是 0否 //是否查询多商户 //商城使用
goodsApi.queryProductInfo(query).then(res => {
this.setData({ loading: false, queryProductInfoLoading: false });
if (res.data.code == 200) {
let goodsList = res.data.data.list;
this.goodsListVal(goodsList);
let goodsLists = res.data.data.list;
if (type == 1) {
goodsList = goodsLists;
} else {
goodsList = [...goodsList, ...goodsLists];
}
if (goodsLists && goodsLists.length < 10) {
this.setData({ finished: true });
}
this.goodsListVal(goodsList, type);
}
});
} else {
......@@ -177,13 +206,13 @@ const componentOptions = {
goodsApi.queryMoreProductInfo(moreQuery).then(res => {
if (res.data.code == 200) {
goodsList = res.data.data;
this.goodsListVal(goodsList);
this.goodsListVal(goodsList, 1);
}
});
},
goodsListVal(goodsList) {
console.log(goodsList,"------------goodsListVal")
goodsList.forEach((item,index) => {
goodsListVal(goodsList, type) {
console.log(goodsList, "------------goodsListVal");
goodsList.forEach((item, index) => {
item.marketingTag = item.defaultTags
? this.filtermark(
item.defaultTags,
......@@ -191,21 +220,21 @@ const componentOptions = {
)
: [];
item.shopLogoUrl = DFSImg(item.shopLogoUrl);
item.coverImage = DFSImg(item.coverImage);
item.productImgUrl = DFSImg(item.productImgUrl);
item.coverImage = DFSImg(item.coverImage, 100, 100, 0);
item.productImgUrl = DFSImg(item.productImgUrl, 100, 100, 0);
item.minPrice = Number(item.minPrice).toFixed(2);
item.qty = Number(item.qty);
item.saleQty = Number(item.saleQty);
item.totalCollectionCount = Number(item.totalCollectionCount) || 0;
item.minPriceAfterRecommendedCardPriceTable = item.minPriceAfterRecommendedCardPriceTable?
Number(item.minPriceAfterRecommendedCardPriceTable):"";
item.minProductGoodsCommission = item.minProductGoodsCommission?
Number(item.minProductGoodsCommission).toFixed(2) : 0;
item.minGoodsSuggestedRetailPrice = item
.minGoodsSuggestedRetailPrice?Number(
item.minGoodsSuggestedRetailPrice
)
.toFixed(2) : "";
item.minPriceAfterRecommendedCardPriceTable = item.minPriceAfterRecommendedCardPriceTable
? Number(item.minPriceAfterRecommendedCardPriceTable)
: "";
item.minProductGoodsCommission = item.minProductGoodsCommission
? Number(item.minProductGoodsCommission).toFixed(2)
: 0;
item.minGoodsSuggestedRetailPrice = item.minGoodsSuggestedRetailPrice
? Number(item.minGoodsSuggestedRetailPrice).toFixed(2)
: "";
item.showVipPrice = this.showVipPrice(item, index);
item.showVipTag = this.showVipTag(item, index);
if (item.saleTime) {
......@@ -217,8 +246,16 @@ const componentOptions = {
this.setData({
"datas.componentData.goodsList": goodsList
});
if (this.selectComponent("#waterfallFlow")) {
this.selectComponent("#waterfallFlow").initList();
if (type == 1) {
// 初始化
if (this.selectComponent("#waterfallFlow")) {
this.selectComponent("#waterfallFlow").initList();
}
} else {
// 滚动加载
if (this.selectComponent("#waterfallFlow")) {
this.selectComponent("#waterfallFlow").reLoadPro();
}
}
}, 0);
},
......@@ -249,9 +286,9 @@ const componentOptions = {
}
},
showRowNum() {
return !(
return (
this.data.datas.componentData.moreShow == false &&
this.data.datas.componentData.getStyle == "waterfall" &&
this.data.datas.componentData.style == "waterfall" &&
this.data.datas.componentData.goodsSource == "classify"
);
},
......@@ -278,21 +315,50 @@ const componentOptions = {
}
return showFlag;
},
showVipTag(item,index) {
showVipTag(item, index) {
// 索引 0 显示价格 1显示名称
let showFlag = false;
let vipPrice = item["minPriceAfterRecommendedCardPriceTable"];
let showTag = item["recommendedCardMinPricePriceTableName"];
if (
vipPrice &&
showTag &&
Number(vipPrice) <= Number(item["minPrice"])
) {
if (vipPrice && showTag && Number(vipPrice) <= Number(item["minPrice"])) {
showFlag = true;
}
return showFlag;
},
getScroll(el) {
// 是指定分类且不显示查看更多的瀑布流组件滚动加载
let { goodsSource, moreShow, style } = this.data.datas.componentData;
if (
goodsSource == "classify" &&
moreShow == false &&
style == "waterfall"
) {
this.selectComponent("#waterfallFlow").getScroll(el);
}
},
// 分页加载
onLoad() {
console.log("---触发分页加载");
this.getProductList(1, 2);
},
viewMore() {
let { goodsType,style, categoryName, categoryId } = this.data.datas.componentData;
let linkVal = "";
if (goodsType != 1) {
if (style == "list") {
linkVal = `/goods/commodityMenu?categoryName=${categoryName}&categoryId=${categoryId}`;
} else {
linkVal = `/goods/commodityMenu`;
}
} else {
linkVal = `/pointShop/productList?categoryName=${categoryName}&categoryId=${categoryId}`;
}
$themeToLink({
type: 1,
link:linkVal,
});
}
},
}
};
Component(componentOptions);
static/nativeComponents/GoodsList/index.json
......@@ -2,6 +2,7 @@
"component": true,
"usingComponents": {
"goods-item":"./GoodsItem/index",
"waterfall-flow":"../module/WaterfallFlow/index"
"waterfall-flow":"../module/WaterfallFlow/index",
"heap-item":"./heapItem/index"
}
}
static/nativeComponents/GoodsList/index.wxml
......@@ -9,7 +9,11 @@
</view>
<view class="title">{{datas.componentData['titles']}}</view>
</view>
<view class="moreTop" wx:if="{{datas.componentData['moreShow'] && datas.componentData.moreButtonSite=='top' && datas.componentData['goodsSource']!='assign'}}">
<view
class="moreTop"
bindtap="viewMore"
wx:if="{{datas.componentData['moreShow'] && datas.componentData.moreButtonSite=='top' && datas.componentData['goodsSource']!='assign'}}"
>
查看更多
<text class="jt"></text>
</view>
......@@ -63,6 +67,9 @@
datas="{{datas}}"
padding="{{datas.componentData.proGap}}"
wx:if="{{datas.componentData.goodsList}}"
bindonLoad="onLoad"
loading="{{loading}}"
finished="{{finished}}"
></waterfall-flow>
</view>
<!-- 横向列表 -->
......@@ -84,6 +91,18 @@
></goods-item>
</view>
</view>
<!-- 堆叠卡片 -->
<view class="goods-heap-Item" wx:if="{{datas.componentData.style==='heap'}}">
<heap-item datas="{{datas}}"></heap-item>
</view>
<view
class="moreBottom"
bindtap="viewMore"
wx:if="{{datas.componentData['moreShow'] && datas.componentData.moreButtonSite=='bottom' && datas.componentData['goodsSource']!='assign'}}"
>
查看更多
<text class="jt"></text>
</view>
</view>
</view>
static/nativeComponents/GoodsList/index.wxss
......@@ -40,7 +40,7 @@ image{
font-size: 13px;
color: #6b6b6b;
}
.moreTop .jt {
.moreTop .jt,.moreBottom .jt{
display: inline-block;
border-top: 1px solid;
border-right: 1px solid;
......@@ -50,6 +50,12 @@ image{
transform: rotate(405deg);
margin-left: 0px;
}
.moreBottom {
font-size: 13px;
text-align: center;
padding-top: 0.54em;
color: #6b6b6b;
}
.goodsItem-list{
flex-wrap: wrap;
}
......
static/nativeComponents/module/WaterfallFlow/index.js
......@@ -13,8 +13,17 @@ Component({
},
padding: {
type: Number
},
loading: {
type: Boolean
},
finished: {
type: Boolean
}
},
onPageScroll(e) {
console.log(e);
},
lifetimes: {
created() {
console.log("进入组件created");
......@@ -26,7 +35,14 @@ Component({
},
ready() {
console.log("进入组件ready");
// this.reLoadPro();
let _this = this;
let { clientHeight } = this.data;
wx.getSystemInfo({
success: function(res) {
let clientHeight = parseInt(res.windowHeight);
_this.setData({ clientHeight });
}
});
}
},
observers: {},
......@@ -36,50 +52,71 @@ Component({
//列高度数组
waterfallDeviationHeight: [0, 0],
contentList: [],
inj: 0
inj: 0,
clientHeight: 0, //窗口高度
goodsNum:0,
},
methods: {
// 初始化数组
initList() {
// 初始化容器
let contentList = this.data.contentList;
let { contentList, waterfallDeviationHeight } = this.data;
contentList[0] = [];
contentList[1] = [];
this.setData({ contentList });
waterfallDeviationHeight = [0,0];
this.setData({ contentList, waterfallDeviationHeight });
console.log(this.data.note, "-------------------185");
this.reLoadPro();
},
async reLoadPro() {
let _this = this;
this.setHeight(0);
this.setHeight(this.data.goodsNum);
this.setData({ goodsNum:this.data.note.length>0?this.data.note.length+1:0 });
},
setHeight(i) {
let _this = this;
let item = this.data.note[i];
console.log(i, "---------------i");
console.log(
this.data.waterfallDeviationHeight,
"-------waterfallDeviationHeight"
);
// console.log(i, "---------------i");
// console.log(
// this.data.waterfallDeviationHeight,
// "-------waterfallDeviationHeight"
// );
let minIndex = this.filterMin();
console.log(minIndex, "---------------126");
// console.log(minIndex, "---------------126");
let contentList = this.data.contentList;
contentList[minIndex].push(item);
this.setData({ contentList });
const queryDom = wx.createSelectorQuery().in(this);
queryDom.select(`.item${minIndex}`).boundingClientRect();
queryDom.exec(res => {
res[0].height;
console.log(res[0], "--------------res");
let waterfallDeviationHeight = _this.data.waterfallDeviationHeight;
waterfallDeviationHeight[minIndex] = res[0].height;
_this.setData({ waterfallDeviationHeight });
if (i >= _this.data.note.length - 1) {
return;
}
i++;
_this.setHeight(i);
});
_this
.createSelectorQuery()
.select(`.item${minIndex}`)
.boundingClientRect(function(res) {
if (res) {
res.height;
console.log(res, "--------------res");
let waterfallDeviationHeight = _this.data.waterfallDeviationHeight;
waterfallDeviationHeight[minIndex] = res.height;
_this.setData({ waterfallDeviationHeight });
if (i >= _this.data.note.length - 1) {
return;
}
i++;
_this.setHeight(i);
}
})
.exec();
// const queryDom = wx.createSelectorQuery().in(this);
// queryDom.select(`.item${minIndex}`).boundingClientRect();
// queryDom.exec(res => {
// res[0].height;
// console.log(res[0], "--------------res");
// let waterfallDeviationHeight = _this.data.waterfallDeviationHeight;
// waterfallDeviationHeight[minIndex] = res[0].height;
// _this.setData({ waterfallDeviationHeight });
// if (i >= _this.data.note.length - 1) {
// return;
// }
// i++;
// _this.setHeight(i);
// });
},
filterMin() {
let val = Math.min.apply(null, this.data.waterfallDeviationHeight);
......@@ -101,6 +138,26 @@ Component({
ev.target.dataset.id,
"-----------------------219"
);
},
getScroll(el) {
let { finished } = this.properties;
let _this = this;
_this
.createSelectorQuery()
.select("#waterfallFlow")
.boundingClientRect(function(res) {
if (res) {
console.log(el, "-------------118");
console.log(res, "---------------35");
let scrollTop = parseInt(el.target.scrollTop);
let domHeight = parseInt(res.height);
// 窗口高度+滚动高度等于 = 元素整体高度 -(预留一段距离加载) 触发父组件查询接口
if (scrollTop + _this.data.clientHeight >= domHeight - 150 && finished == false) {
_this.triggerEvent("onLoad");
}
}
})
.exec();
}
}
});
static/nativeComponents/module/WaterfallFlow/index.wxml
<!--瀑布流组件-->
<view class="waterfallFlow" style="--proGap:{{padding}}rpx">
<view
class="waterfallFlow"
id="waterfallFlow"
style="--proGap:{{padding}}rpx"
>
<view class="container flex">
<view
wx:for="{{contentList}}"
......@@ -21,5 +25,10 @@
</view>
</view>
</view>
<!-- 上拉加载底部展示 -->
<view class="loadBottom" wx:if="{{datas.componentData.goodsSource == 'classify' && datas.componentData.moreShow == false &&datas.componentData.style == 'waterfall'}}">
<text wx:if="{{loading}}">加载中~</text>
<text wx:if="{{ finished}}">暂无更多</text>
</view>
</view>
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