专注连锁门店会员营销管理系统
线上+线下+进销存+收银+会员2018-05-14 作者:秩名
猫眼电影作为一个电影售票小程序,提供在线选座,电影信息查询等功能,那么如何仿照猫眼电影开发小程序呢?以下是小程序仿猫眼电影实现实例
movie.js
Page({
data: {
movies:null,
scrollTop : 0,
scrollHeight:0
},
onLoad: function (options) {
// 生命周期函数--监听页面加载
// 这里要非常注意,微信的scroll-view必须要设置高度才能监听滚动事件,所以,需要在页面的onLoad事件中给scroll-view的高度赋值
var that = this;
wx.getSystemInfo({
success:function(res){
console.info(res.windowHeight);
that.setData({
scrollHeight:res.windowHeight
});
}
});
that.getAllMovies();
},
getAllMovies() {
let thispage=this;
//展示 加载框
wx.showToast({
title: '加载中',
icon: 'loading',
duration: 10000
})
//网络请求数据
wx.request({
url: 'http://m.maoyan.com/movie/list.json?type=hot&offset=0&limit=1000',
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {'content-type':'json'}, // 设置请求的 header
success: function(res){
// success
let obj=res.data.data.movies;
//将获取到的数据设置到 page 中的movies上
thispage.setData({movies:obj});
//隐藏加载框
wx.hideToast();
//停止刷新
wx.stopPullDownRefresh();
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
},
//点击事件
itemClick(event){
},
//刷新
onPullDownRefresh: function () {
this.getAllMovies();
},
})
movie.json
{
"enablePullDownRefresh": true
}
movie.wxml
<view class="top"> <text class="top_text">深圳</text> <view class="top_input"> <input placeholder="Q找影视剧、找影院" /> </view> </view> <view class="item" wx:for="{{movies}}" wx:key="{{index}}" bindtap="itemClick" hover-class="item_press" hover="true" > <view class="pic"> <image src="{{item.img}}"></image> </view> <view class="detail"> <title>{{item.nm}} <text class="threeD" wx:if='{{item["3d"]}}'>3D</text> <text class="iMax" wx:if='{{item["imax"]}}'>IMAX</text> <text class="score" wx:if="{{item.preSale !=1}}">{{item.sc}}<text style='font-size:11px'>分</text> </text> <text class="wish" wx:else>{{item.wish}}<text style='font-size:11px'>人想看</text> </text> </title> <view class="type"> {{item.cat}} </view> <view class="star"> {{item.star}} </view> <view class="showinfo"> {{item.showInfo}} </view> <view class="buy" wx:if="{{item.preSale !=1}}" >购买</view> <view class="buy" wx:else style="background:#008aff">预售</view> </view> </view>
movie.wxss
page{
background-color: #f2f2f2;
}
.top {
background-color: #f2f2f2;
display: flex;
}
.top_text {
margin-left: 15px;
font-size: 15px;
padding: 20px 0;
}
.top_input {
border-radius: 10rpx;
text-align: center;
padding: 4px;
font-size: 15px;
flex: 1;
margin: 10px 20px 10px 10px;
background-color: #fff;
}
.item {
background-color: #FFFFFF;
position:relative;
padding: 10px;
display: flex;
border-width:1px;
border-bottom-style: solid;
border-color: #ccc;
}
.item_press {
background-color: #F0F0F0;
}
.pic image {
margin-right: 10px;
width: 70px;
height: 100px;
}
.detail{
flex: 1;
display: flex;
flex-direction: column;
}
.detail title{
margin-top: 5px;
color: #222222;
flex: 1;
font-size: 16px;
}
.threeD{
border-radius: 2px;
padding: 3px;
background-color: #8bb7ce;
font-size: 10px;
color: white;
}
.iMax{
border-style:solid;
border-width:1px;
margin-left: -2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
font-size: 10px;
color: #8bb7ce;
padding: 2px;
}
.score,
.wish{
float:right;
color: orange;
margin-right: 15px;
}
.type,
.star{
color: #666666;
font-size: 13px;
overflow:hidden;
white-space: nowrap;
text-overflow:ellipsis;
width: 210px;
flex: 1;
}
.showinfo{
color: #999999;
font-size: 13px;
flex: 1;
}
.buy{
padding: 8px;
border-radius: 5px;
font-size: 13px;
color: #FFFFFF;
background-color: #ee4137;
float: right;
position: absolute;
right: 10px;
top:52px;
}
线上+线下+进销存+收银+会员门店零售管理好帮手
门店能实现快速收银,提升门店经营效率。
系统自带进销存管理,更好管理库存销售。
配备收银硬件一站式整体服务。
收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款
获取报价推荐文章
最新消息总结,开发一个小程序我们可以选择的第三方框架有5种,大家比较熟悉的有美团小程序框架mpvue,还有组件化框架等...
最近在调研小程序的分享能力,本篇文档主要是调研小程序关于分享方面的玩法,目的是学习小程序在项目应用以及玩法链上...
许多人在使用小程序,会有一个很麻烦的事情,就是使用过小程序之后,会不断的发送自己的定位消息,那么这个小程序的...
一款小程序,很多时候需要调用内置的照相机,实现拍照并图片上传,那么要如何实现呢?...
2024年怎样开加盟连锁店第七步(建立品牌知名度) 建立品牌知名度是成功创建一个加盟连锁品牌的关键步骤。一个强大的品...
2024年怎样开加盟连锁店第三步(开发一个详细的加盟手册) 加盟手册的重要性 加盟手册是加盟连锁品牌成功的基础组成部分...
在零售行业,线上线下一体化营销已经成为企业提升竞争力的关键策略。根据9的分析,2024年中国零售行业的数字化转型正在...
在数字化转型的浪潮中,线上线下推广方案已成为零售企业连接顾客、提升销售的关键策略。友数连锁,作为HiShop推出的新零...
星巴克的线上线下营销策略 星巴克作为全球知名的咖啡连锁品牌,一直在线上线下营销领域走在前列。以下是星巴克如何通...
在数字化时代,线上线下相结合的营销模式已成为零售行业的新常态,它通过整合线上电商平台和线下实体店铺的资源,为消...