
<import src="../index/GridIconCell/GridIconCell.wxml" />
<import src="ImageCell/ImageCell.wxml" />
<import src="GoodLife/GoodLifeCell/GoodLifeCell.wxml" />
<view>
<view class="iconList-container">
<block wx:for="{{shenghuoiconList}}" wx:for-item="item" wx:for-index="idx" wx:key="key">
<view class="iconList-container-block" catchtap="tapGridCell" data-icon-id="{{idx}}">
<template is="GridIconCell" data="{{...item}}"></template>
</view>
</block>
</view>
<view class="spaceSeparateView"></view>
<view class="imageList-container">
<block wx:for="{{shenghuoImageList1}}" wx:for-item="item" wx:for-index="idx" wx:key="key">
<view class="imageList-container-block" catchtap="tapimageList1Cell" data-icon-id="{{idx}}">
<template is="ImageCell" data="{{...item}}"></template>
</view>
</block>
</view>
<view class="imageList-container">
<block wx:for="{{shenghuoImageList2}}" wx:for-item="item" wx:for-index="idx" wx:key="key">
<view class="imageList-container-block" catchtap="tapimageList1Cell" data-icon-id="{{idx}}">
<template is="ImageCell" data="{{...item}}"></template>
</view>
</block>
</view>
<view class="youxuanHeader">
<text class="youxuanHeaderText">--优选推荐--</text>
</view>
<block wx:for="{{list}}" wx:for-item="item" wx:key="key">
<!--<view class="CouponSearchListCell">{{item.doorName}}</view>-->
<template is="GoodLifeCell" data="{{...item}}"></template>
</block>
</view>
|
@import "../index/GridIconCell/GridIconCell.wxss";
@import "ImageCell/ImageCell.wxss";
@import "GoodLife/GoodLifeCell/GoodLifeCell.wxss";
.iconList-container {
flex-direction: row;
display: flex;
width: 100%;
height: 160rpx;
}
.iconList-container-block {
flex-direction: row;
display: flex;
width: 25%;
height: 160rpx;
}
.imageList-container {
flex-direction: row;
display: flex;
width: 100%;
height: 260rpx;
}
.imageList-container-block {
flex-direction: row;
display: flex;
width: 33.3%;
height: 260rpx;
}
.youxuanHeader {
height: 80rpx;
width: 100%;
background-color: #f5f5f9;
text-align: center;
}
.youxuanHeaderText {
line-height: 80rpx;
width: 100%;
font-size: 15px;
color: gray;
}
|
// pages/shenghuo/shenghuo.js
const shenghuoiconList = require('../../data/local-data')
const shenghuoImageList1 = require('../../data/local-data')
const shenghuoImageList2 = require('../../data/local-data')
const config = require('../../config')
var util = require('../../utils/util.js')
// 引入SDK核心类 - 腾讯LBS服务(微信小程序原生LBS能力的最佳拍档)
var QQMapWX = require('../../lbs/qqmap-wx-jssdk.js');
var qqmapsdk;
let TENCENT_KEY = "AJPBZ-S6MRU-NFIVK-4BH5A-IZA57-OKB24"
var longt = ""
var lati = ""
Page({
data: {
localCtiyName: "定位中...", /** 当前定位城市 */
list: [] /** 便民首页优选推荐店铺列表 */
},
/** 点击 */
tapGridCell: function (event) {
let index = event.currentTarget.dataset.iconId
console.log(index)
switch (index) {
case 0: //领券中心
wx.navigateTo({
url: 'ValuePreference/ValuePreference',
})
break;
case 1: //吃喝玩乐
wx.navigateTo({
url: 'GoodLife/GoodLife',
})
break;
case 2: //精选商品
wx.navigateTo({
url: 'SelectedGoods/SelectedGoods',
})
break;
case 3: //分类服务
wx.navigateTo({
url: 'AllServiceclassify/AllServiceclassify'
})
break;
}
},
tapimageList1Cell: function (event) {
switch (event.currentTarget.dataset.iconId) {
case 0:
//天天有奖
wx.navigateTo({
url: 'ttPrize/ttPrize',
})
break;
case 1:
wx.navigateTo({
url: 'miaosha/miaosha',
})
break;
case 2:
//一元夺宝
wx.navigateTo({
url: 'OnePrize/OnePrize',
})
break;
default:
break;
}
console.log(event.currentTarget.dataset.iconId)
},
tapimageList2Cell: function (event) {
console.log(event.currentTarget.dataset.iconId)
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
var that = this;
console.log(shenghuoiconList, shenghuoImageList1, shenghuoImageList2)
that.setData(shenghuoiconList, shenghuoImageList1, shenghuoImageList2)
/*******************定位***********************/
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: TENCENT_KEY
});
/** 获取定位 */
wx.showLoading({ title: '加载中...', })
util.getLocation((successRes, failRes) => {
wx.hideLoading()
console.log(successRes)
console.log(failRes)
//赋值
longt = successRes.longitude
lati = successRes.latitude
// 调用接口-逆地址解析
qqmapsdk.reverseGeocoder({
location: {
latitude: successRes.latitude,
longitude: successRes.longitude
},
coord_type: 1,//输入的locations的坐标类型,可选值为[1,6]之间的整数,每个数字代表的类型说明: 1 GPS坐标 2 sogou经纬度 3 baidu经纬度 4 mapbar经纬度 5 [默认]腾讯、google、高德坐标 6 sogou墨卡托
success: function (res) {
console.log(res);
var city = res.result.address_component.city;
that.setData({ localCtiyName: city });
console.log(city);
/** 首次定位成功 -> 网络请求 */
/** 请求-便民首页优选推荐店铺列表 */
that.requestAdvertRecommendDoorList()
},
fail: function (res) {
console.log(res);
},
complete: function (res) {
console.log(res);
}
});
})
},
/** 便民首页优选推荐店铺列表 */
requestAdvertRecommendDoorList: function (e) {
var that = this;
let url = config.RecommendDoorListUrl
var para = {
"currentLongitude": longt,
"currentLattitude": lati
}
wx.showLoading({ title: '加载中...' })
util.RequestManager(url, para, function (res, fail) {
wx.hideLoading()
var tempAr = [];
for (var i = 0; i < res.data.length; i++) {
var model = res.data[i];
model["doorImg"] = model["logo"];
model["starAr"] = util.convertToStarsArray(model["star"])
model["province"] = model["provinceName"];
model["city"] = model["cityName"];
model["country"] = model["districtName"];
//model["maxDiscountPrice"] = model["maxDiscountPrice"];
tempAr.push(model)
}
that.setData({ list: tempAr })
})
},
onReady: function () {
// 页面渲染完成
},
onShow: function () {
// 页面显示
},
onHide: function () {
// 页面隐藏
},
onUnload: function () {
// 页面关闭
}
})
|
模板简介:该模板名称为【微信小程序四列导航无限加载列表样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。