Skip to content

M
mayi-mp-shop
Commit beedda9f by 程智春
Options

魔方导航，地址导航

parent 2bc21767
Showing with 960 additions and 3 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
...@@ -5,11 +5,18 @@ ...@@ -5,11 +5,18 @@
<banner :datas="item"></banner> <banner :datas="item"></banner>
1 1
</div> </div>
<div v-if="item.componentCode == 'area-navigation'">
<area-navigation :datas="item"></area-navigation>
</div>
<div v-if="item.componentCode == 'cube-nav'">
<cube-nav :datas="item"></cube-nav>
</div>
</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" src="http://cdn.mayi888.com/public/jpg/33ff0efc-96b5-4044-a65a-07799dfe98e1.jpg?x-oss-process=image/resize,limit_1,w_750"
></image> ></image>
<van-button type="primary">按钮</van-button> <van-button type="primary">按钮</van-button>
<view class="ant-gongsidizhi"></view>
<view class="ant-bofang">1</view> <view class="ant-bofang">1</view>
----瀑布流开始---- ----瀑布流开始----
<waterfall-flow id="waterfallFlow"></waterfall-flow> <waterfall-flow id="waterfallFlow"></waterfall-flow>
......
src/pages/home/main.json
...@@ -3,6 +3,9 @@ ...@@ -3,6 +3,9 @@
"banner": "/static/nativeComponents/Banner/index", "banner": "/static/nativeComponents/Banner/index",
"goods-list": "/static/nativeComponents/GoodsList/index", "goods-list": "/static/nativeComponents/GoodsList/index",
"waterfall-flow": "/static/nativeComponents/module/WaterfallFlow/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/utils/request.js
...@@ -15,6 +15,7 @@ export async function requestGET(url, options) { ...@@ -15,6 +15,7 @@ export async function requestGET(url, options) {
"Shop-Mixid": store.state.mixid, "Shop-Mixid": store.state.mixid,
"Offline-Shop-Code": store.state.offlineShopCode, "Offline-Shop-Code": store.state.offlineShopCode,
"Authorization": wx.getStorageSync('sessionid') || "", "Authorization": wx.getStorageSync('sessionid') || "",
"Location-Id" : wx.getStorageSync('location') ? JSON.parse(wx.getStorageSync('location')).systemRegionId : ''
// "dubbo-tag": "ljx" // "dubbo-tag": "ljx"
}, },
success: function (res) { success: function (res) {
...@@ -37,7 +38,8 @@ export async function requestPOST(url, options) { ...@@ -37,7 +38,8 @@ export async function requestPOST(url, options) {
"Shop-Mixid": store.state.mixid, "Shop-Mixid": store.state.mixid,
"Authorization": wx.getStorageSync('sessionid') || "", "Authorization": wx.getStorageSync('sessionid') || "",
"Offline-Shop-Code": store.state.offlineShopCode, "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" // "dubbo-tag": "ljx"
}, },
success: function (res) { 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;
}
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