<!--pages/list/list.wxml-->
<import src="../../template/slider/slider.wxml"/>
<template is="slider" data="{{slider}}"/>
<view class="container">
<view class="warn-msg-box">
<span class="icon icon-warning"></span>
<view class="msg-box">
<view class="msg-box-text1">暂无可支持配送的门店</view>
<view class="msg-box-text2">为您推荐的为附近的五洲会门店，请考虑更换地址</view>
</view>
</view>
<view class="store-list" wx:if="{{storeData.store_list}}">
<view class="store-item" wx:for="{{storeData.store_list}}" wx:for-index="idx" wx:for-item="store" data-store="{{store}}" bindtap="toStoreDetail" wx:key="id">
<image src="{{store.store_logo_format}}" class="store-pic"></image>
<view class="store-info">
<view class="store-name"> {{store.store_name}} </view>
<view class="store-address">{{store.store_address}}</view>
<view class="store-distance">
<view class="distance">
<span class="icon icon-gps"></span>
<text>{{store.distance_format}}</text>
</view>
<view class="store-status {{store.delivery_sta_format == '可配送' ? 'green' : ''}}">
{{store.delivery_sta_format}}
</view>
</view>
<view class="store-discount">
<text class="dtag" wx:for="{{store.store_activity_list}}" wx:for-item="tagItem" wx:key="*this" style="background-color: {{ tagItem[1] }}">{{tagItem[0]}}</text>
</view>
</view>
</view>
</view>
</view>
|
/* pages/list/list.wxss */
.warn-msg-box{
width: 100%;
display: flex;
align-items: flex-start;
padding: 23rpx 20rpx;
background-color: #fff9e3;
border-bottom: 1px solid #efe5a7;
box-sizing: border-box;
}
.msg-box{
flex: 1;
padding-left: 8rpx;
}
.msg-box .msg-box-text1{
margin-bottom: 6rpx;
font-size: 30rpx;
color: #333;
}
.msg-box .msg-box-text2{
font-size: 24rpx;
color: #999;
}
.store-list{
background-color: #fff;
width: 100%;
box-sizing: border-box;
}
.store-item{
margin:0 20rpx;
padding: 20rpx 0;
box-sizing: border-box;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.store-pic{
width: 200rpx;
height: 200rpx;
}
.store-info{
overflow: hidden;
flex: 1;
padding-left: 20rpx;
color: #222;
}
.store-name{
font-size: 32rpx;
}
.store-address{
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding: 10rpx 0;
font-size: 28rpx;
}
.store-distance{
display: flex;
justify-content: space-between;
align-items: center;
font-size: 24rpx;
color: #666;
}
.store-distance .icon{
font-size: 24rpx;
margin-right: 5rpx;
}
.store-status{
padding: 3rpx 20rpx;
border-radius: 4px;
background-color: #ccc;
color: #fff;
}
.store-status.green{
background-color: #25ae5f;
color:#fff;
}
.store-discount{
padding: 10rpx 0;
}
/*优惠小标签*/
.dtag{
display: inline-block;
margin: 4rpx;
margin-top: 0;
padding: 1rpx 6rpx;
color: #fff;
font-style: normal;
font-weight: normal;
background-color: #49caec;
border-radius: 4px;
font-size: 24rpx;
}
@import "../../css/font.wxss";
|
// pages/list/list.js
var util = require('../../utils/util.js');
var ports = require('../../utils/ports.js');
//引入灯箱组件
var Slider = require('../../template/slider/slider.js');
// 引入promise
var Promise = require('../../lib/es6-promise.min.js');
// 优惠标签配色
var tagColor = util.getTagColor();
var dialog = [
{
title: '您有可支持配送的地址',
content: '是否切换至该收货地址？',
cancelText: '保留地址',
confirmText: '切换地址',
confirmColor: '#e61773',
success: function(res){
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
},
{
title: '当前地址无可配送的门店',
content: '是否更换收货地址？',
cancelText: '继续浏览',
confirmText: '选择地址',
confirmColor: '#e61773',
success: function(res){
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
}
];
Page({
data:{
storeData: {},
showAddress: '',
finalAddress: '',
lng: 0,
lat: 0,
gpsInfo:{}
},
// 获取门店列表
getStoreList(){
var _self = this;
return util.wxRequest({
method: 'POST',
url: ports.storeSearch,
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: {
region_id: _self.data.finalAddress.region_id,
lat: _self.data.finalAddress.lat,
lng: _self.data.finalAddress.lng
}
}).then(result => {
return Promise.resolve(result);
}).catch(e => {
return Promise.reject(e);
});
},
dTag:function(tag, index){
var tagName=/^[(.)]/.exec(tag)[1];
// 循环使用颜色
return [tagName,tagColor[index%tagColor.length]];
},
onLoad:function(options){
//初始化灯箱组件
this.slider = new Slider(this);
var finalAddress = util.getStorage('final_address');
if(finalAddress){
var tempfinalAddress = JSON.parse(finalAddress);
this.setData({
finalAddress: tempfinalAddress,
showAddress: tempfinalAddress.location_addr || '定位失败'
});
this.getStoreList().then(result=>{
var picList = result.data.banner_list.map(function(item){
return item.imgUrl;
});
//整理标签颜色
for(let i = 0; i < result.data.store_list.length; i++){
var store_item = result.data.store_list[i];
for(let j = 0; j < store_item.store_activity_list.length;j++){
store_item.store_activity_list[j] = this.dTag(store_item.store_activity_list[j],j);
}
}
this.setData({
storeData: result.data
});
this.slider.initData(picList);
})
}
// 来自顶页面分发（确定使用哪种弹窗提示）
var switchInfo = util.getStorage("page_switch_info");
if(switchInfo){
switchInfo = JSON.parse(switchInfo);
// 清空分发配置
util.removeStorage("page_switch_info");
if(switchInfo.popType){
dialog[switchInfo.popType-1].cancelColor = "#666666";
dialog[switchInfo.popType-1].confirmColor = "#666666";
wx.showModal(dialog[switchInfo.popType-1]);
}
}
},
toStoreDetail(e){
console.log(e);
},
onPullDownRefresh: function(){
wx.stopPullDownRefresh()
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})
|
模板简介：该模板名称为【微信小程序附近五洲会门店列表页设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
