Skip to content

M
mini-program-wepy
Commit 8ab0e7a1 authored by 付清曌's avatar 付清曌
Browse files
Options

Merge branch 'feature/goods' into 'master' 

Feature/goods

See merge request !4
parents ee8fb196 7af26493
Hide whitespace changes
Inline Side-by-side
Showing with 170 additions and 112 deletions
src/app.wpy
View file @ 8ab0e7a1
<style>
page {
font-family: 'PingFangSC-Regular';
}
</style>
<script> <script>
import wepy from '@wepy/core'; import wepy from '@wepy/core';
import eventHub from './common/eventHub'; import eventHub from './common/eventHub';
......
src/pages/index.wpy
View file @ 8ab0e7a1
...@@ -28,23 +28,47 @@ ...@@ -28,23 +28,47 @@
.content{ .content{
position: absolute; position: absolute;
z-index: 9; z-index: 9;
bottom: 250px; bottom: 450rpx;
width: 100%; width: 100%;
color: white; color: white;
clear: both; clear: both;
} }
.leftcont { .rightcont {
font-size: 12px; font-size: 24rpx;
width: 42%; display:inline-block;
float: left; float: right;
margin-left: 20rpx; margin-right: 30rpx;
color: #fff; color: #fff;
margin-top:10px; margin-top:20rpx;
} }
.rightcont { .progress {
width: 180rpx;
height:20rpx;
background-color:#fff;
margin-top:10rpx;
color:#666;
position: relative;
text{
position: absolute;
top:0;
left:0;
width: 100%;
height:100%;
background-color: transparent;
text-align: center;
font-size: 18rpx;
line-height: 20rpx;
}
.orange {
height:100%;
background-color: #FF5D15;
}
}
.leftcont {
width: 44%; width: 44%;
float: right; float: left;
font-size: 12px; font-size: 12px;
margin-left: 30rpx;
} }
.imgwrap{ .imgwrap{
margin:8px 0; margin:8px 0;
...@@ -52,88 +76,83 @@ ...@@ -52,88 +76,83 @@
.list-wrapper { .list-wrapper {
height: 70px; height: 70px;
} }
.rightcont .img { .leftcont .img {
width: 20px; width: 40rpx;
height: 20px; height: 40rpx;
border-radius: 50%; border-radius: 50%;
vertical-align: middle; vertical-align: middle;
} }
.rightcont .text { .leftcont .text {
margin-left: 5px; margin-left: 5px;
vertical-align: middle; vertical-align: middle;
border-radius: 20rpx; border-radius: 20rpx;
display: inline-block; display: inline-block;
font-size: 10px; font-size: 20rpx;
box-sizing: border-box; box-sizing: border-box;
padding:6rpx 15rpx; padding:6rpx 15rpx;
background-color:rgba(255, 255, 255, 0.2); background-color:rgba(238, 238, 238, 0.2);
} }
.footer { .footer {
position: absolute; position: absolute;
z-index: 9; z-index: 9;
bottom: 50px; bottom: 20rpx;
width: 100%; width: 100%;
} }
.footswiper {
height: 360rpx;
}
.list-item{ .list-item{
width:100%; width:220rpx;
height: 120px; /*height: 330rpx;*/
background-color:#fff; background-color:#fff;
position: absolute; border-radius: 10rpx;
bottom:5px; transform: scale(0.7,0.7) translateY(65rpx);
box-sizing: border-box;
border-radius: 5rpx;
transform: scale(0.7,0.7) translateY(28px);
transition: all 0.5s; transition: all 0.5s;
padding:10rpx; padding:10rpx 10rpx 5rpx 10rpx;
margin:0 auto;
margin-top: 2rpx; margin-top: 2rpx;
position: relative;
} }
.list-item image { .list-item image {
width: 95%; width: 210rpx;
display: block; display: block;
height: 85px; height: 210rpx;
margin:0 auto; margin:0 auto;
border-radius: 10rpx;
} }
.list-item .text { .list-item .text {
font-size: 10px; font-size: 20rpx;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; display: -webkit-box;
-webkit-line-clamp: 2; //行数
-webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
line-height:24rpx;
margin-top:10rpx;
} }
.list-item .goods { .list-item .price{
width: 100%; color:#FF5D15;
margin-top: -8px; font-size:22rpx;
position: relative; margin-top:2rpx;
} }
.goods .price{ .list-item .buy{
color:darkorange; font-size: 16rpx;
font-size: 10px; color:#AAA;
}
.goods .buy{
text-align: right;
color: gainsboro;
font-size: 8px;
position: absolute;
right:0;
top:8px;
} }
.list-item.subright { .list-item.subright {
transform: scale(0.85,0.85) translateY(12px) translateX(15rpx); transform: scale(0.85,0.85) translateY(26rpx) translateX(25rpx);
} }
.list-item.subleft { .list-item.subleft {
transform: scale(0.85,0.85) translateY(12px) translateX(-15rpx); transform: scale(0.85,0.85) translateY(26rpx) translateX(-25rpx);
} }
.list-item.select{ .list-item.select{
transform: scale(1,1); transform: scale(1,1);
border-radius: 5rpx; bottom: 2rpx;
} }
.list-item.delete { .list-item.delete {
opacity:0; opacity:0;
transform:translateY(-100px) transform:translateY(-220rpx)
}
.leftcont{
position: absolute;
z-index: 7;
} }
.authmodal{ .authmodal{
width:100%; width:100%;
...@@ -160,16 +179,20 @@ ...@@ -160,16 +179,20 @@
} }
</style> </style>
<wxs module="tools"> <wxs module="tools">
// 无限循环当current为最后一个的时候，select就应该是0 例如长度为10，当current为9时，select就应该是0
// if(current+1==index || (current==length-1 && index==0) ) allclass = "select";
// 无限循环当current为最后一个/两个的时候的时候，例如长度为10，当current为8/9时，select就应该是1/0
//if(current+2 == index|| (current>=length-2 && index==current-length+2))
//allclass='subright';
function computClass (current,index,length) { function computClass (current,index,length) {
var allclass = ""; var allclass = "";
if(current==index) if(current-1 == index||(current == 0&&index==length-1))
allclass='subleft'; allclass='subleft';
// 无限循环当current为最后一个的时候，select就应该是0 例如长度为10，当current为9时，select就应该是0 if(current==index)
if(current+1==index || (current==length-1 && index==0) ) allclass = "select"; allclass='select';
// 无限循环当current为最后一个/两个的时候的时候，例如长度为10，当current为8/9时，select就应该是1/0 if(current+1==index || (current==length-1 && index==0) )
if(current+2 == index|| (current>=length-2 && index==current-length+2)) allclass = "subright";
allclass='subright';
return allclass; return allclass;
}; };
module.exports = { module.exports = {
...@@ -179,7 +202,9 @@ ...@@ -179,7 +202,9 @@
<template> <template>
<view class="video-wrapper"> <view class="video-wrapper">
<view id="myvideo"> <view id="myvideo">
<video-list :videoList.sync="videoList" bindchange="changeVideo"></video-list> <video-list :videoList.sync="videoList" bindchange="changeVideo">
</video-list>
</view> </view>
<view class="userInfo"> <view class="userInfo">
<image src="{{userInfo.avatarUrl}}" mode="cover" class="userimage"></image> <image src="{{userInfo.avatarUrl}}" mode="cover" class="userimage"></image>
...@@ -187,11 +212,6 @@ ...@@ -187,11 +212,6 @@
<view class="content"> <view class="content">
<!-- <video-sign title="签"></video-sign> --> <!-- <video-sign title="签"></video-sign> -->
<view class="leftcont"> <view class="leftcont">
<view>零售价：￥190003.00元</view>
<view>开奖时间：15：20</view>
<view>中奖概率1/3000</view>
</view>
<view class="rightcont">
<swiper class="list-wrapper" vertical="true" circular="true" display-multiple-items="2" autoplay="true" interval="1500"> <swiper class="list-wrapper" vertical="true" circular="true" display-multiple-items="2" autoplay="true" interval="1500">
<swiper-item wx:for="{{adlist}}" wx:key="index" catch:touchmove> <swiper-item wx:for="{{adlist}}" wx:key="index" catch:touchmove>
<view class="imgwrap"> <view class="imgwrap">
...@@ -201,30 +221,40 @@ ...@@ -201,30 +221,40 @@
</swiper-item> </swiper-item>
</swiper> </swiper>
</view> </view>
<view class="rightcont">
<view>奖品库存: 1/8</view>
<view>中奖概率: 1/3000</view>
<view class="progress">
<text>{{progress}}%</text>
<view class="orange" style="{{progressStyle}}"></view>
</view>
</view>
</view> </view>
<view class="footer"> <view class="footer">
<swiper <swiper
class="footswiper"
display-multiple-items="{{swiperItem}}" display-multiple-items="{{swiperItem}}"
current="{{current}}" current="{{current}}"
bindchange="moveSwiper" bindchange="moveSwiper"
bindanimationfinish="swipermoveDone" bindanimationfinish="swipermoveDone"
circular="{{circular}}" circular="{{circular}}"
next-margin="90rpx" previous-margin="140rpx"
next-margin="120rpx"
catch:touchmove catch:touchmove
> >
<!--bindtouchstart="touchStart"-->
<!--bindtouchend="touchEnd"-->
<swiper-item wx:for="{{list}}" wx:key="index"> <swiper-item wx:for="{{list}}" wx:key="index">
<view <view
data-itemid="{{index}}" data-itemid="{{index}}"
bindtap="toViewPage" bindtap="toViewPage"
bindtouchstart="touchStart" data-item="{{item}}"
bindtouchend="touchEnd"
class="list-item {{item.select?'delete':''}} {{tools.computClass(currentIndex,index,list.length)}}" class="list-item {{item.select?'delete':''}} {{tools.computClass(currentIndex,index,list.length)}}"
> >
<image src="/static/images/test2.png"></image> <image src="{{item.imgsrc}}"></image>
<view class="text">{{item.text}}</view> <view class="text">{{item.text}}</view>
<view class="goods"> <p class="price">{{item.price}}</p>
<text class="price">￥99.9</text><text class="buy">2200人购买</text> <p class="buy">{{item.people}}人购买</p>
</view>
</view> </view>
</swiper-item> </swiper-item>
</swiper> </swiper>
...@@ -238,7 +268,7 @@ ...@@ -238,7 +268,7 @@
<network v-if="!isConnected"></network> <network v-if="!isConnected"></network>
<!-- <star-animation></star-animation> --> <!-- <star-animation></star-animation> -->
<star-animation1 v-if="sign && showAnimation"></star-animation1> <star-animation1 v-if="sign && showAnimation"></star-animation1>
<open-animation></open-animation> <!--<open-animation></open-animation>-->
</view> </view>
</template> </template>
...@@ -258,7 +288,7 @@ ...@@ -258,7 +288,7 @@
adlist:[], adlist:[],
current:5, current:5,
// userInfo: {}, // userInfo: {},
swiperItem:3, swiperItem:2,
videoList:[], videoList:[],
length: 4, length: 4,
circular:false, circular:false,
...@@ -268,6 +298,8 @@ ...@@ -268,6 +298,8 @@
authmodal:false, authmodal:false,
sign: false, sign: false,
showAnimation: false, showAnimation: false,
progress:0,
progressStyle:'',
}, },
computed: { computed: {
...@@ -286,19 +318,12 @@ ...@@ -286,19 +318,12 @@
if(e.$wx.detail.source == 'touch') { if(e.$wx.detail.source == 'touch') {
let current = e.$wx.detail.current; let current = e.$wx.detail.current;
let totalPage = 3; let totalPage = 3;
let newlist = [
// {value:1,text:'这是测试的文字-1'},
// {value:2,text:'这是测试的文字-2'},
// {value:3,text:'这是测试的文字-3'},
// {value:4,text:'这是测试的文字-4'},
{value:5,text:'这是测试的文字-5'},
];
let nextlist=[ let nextlist=[
{value:11,text:'这是测试的文字11'}, {value:11,text: '白色条纹马克杯，马克吐温同款11', imgsrc:'/static/images/test1.jpg', price:'￥9.89',people:2200,sku:'100004549235'},
{value:12,text:'这是测试的文字12'}, {value:12,text: '白色条纹马克杯，马克吐温同款12', imgsrc:'/static/images/test2.png', price:'￥19.20',people:'2200',sku:'100004549235'},
{value:13,text:'这是测试的文字13'}, {value:13,text: '白色条纹马克杯，马克吐温同款13', imgsrc:'/static/images/peo1.jpg', price:'￥39.08',people:2200,sku:'100004549235'},
{value:14,text:'这是测试的文字14'}, {value:14,text: '白色条纹马克杯，马克吐温同款14', imgsrc:'/static/images/peo2.jpg', price:'￥599.20',people:2200,sku:'100004549235'},
{value:15,text:'这是测试的文字15'}, {value:15,text: '白色条纹马克杯，马克吐温同款15', imgsrc:'/static/images/peo3.jpg', price:'￥2399.01',people:2200,sku:'100004549235'},
]; ];
let that = this; let that = this;
function debounce(func,wait) { function debounce(func,wait) {
...@@ -312,7 +337,7 @@ ...@@ -312,7 +337,7 @@
if (callNow) func(); if (callNow) func();
} }
} }
if(current <= 2) { /*if(current <= 2) {
debounce(setTimeout(function(){ debounce(setTimeout(function(){
that.topPage +=1; that.topPage +=1;
if(that.lastPage+that.topPage >= totalPage) { if(that.lastPage+that.topPage >= totalPage) {
...@@ -323,7 +348,7 @@ ...@@ -323,7 +348,7 @@
// that.current = current+1; // that.current = current+1;
// that.currentIndex = current+1; // that.currentIndex = current+1;
},1000),500); },1000),500);
} }*/
if(current >= this.list.length-3) { if(current >= this.list.length-3) {
debounce(setTimeout(function(){ debounce(setTimeout(function(){
that.lastPage +=1; that.lastPage +=1;
...@@ -336,11 +361,22 @@ ...@@ -336,11 +361,22 @@
} }
} }
}, },
toViewPage() { toViewPage(e) {
let item = e.$wx.currentTarget.dataset.item
// console.log(sku,12)
//解决长按触发tap事件的bug //解决长按触发tap事件的bug
wx.navigateTo({ wx.navigateToMiniProgram({
appId: 'wx91d27dbf599dff74',
path: 'pages/item/detail/detail?sku='+item.sku, // 跳转小程序的路径
// 有效值 develop（开发版），trial（体验版），release（正式版）
envVersion: 'release',
success(res) {
console.log('跳转成功');
}
})
/* wx.navigateTo({
url: '/pages/auth' url: '/pages/auth'
}); });*/
}, },
touchStart (event) { touchStart (event) {
touchDotX = event.touches[0].pageX; // 获取触摸时的原点 touchDotX = event.touches[0].pageX; // 获取触摸时的原点
...@@ -420,6 +456,13 @@ ...@@ -420,6 +456,13 @@
}); });
this.list = list; this.list = list;
let that = this; let that = this;
//如果剩下4个就不让他循环了，这时候就一屏显示出来了
if(list.length <= 4) {
this.circular = false;
}
if(current.itemid >= list.length -1) {
this.current = this.currentIndex -1;
}
setTimeout(function() { setTimeout(function() {
let newlist = that.list.filter((item, index) => index != current.itemid); let newlist = that.list.filter((item, index) => index != current.itemid);
// 正常情况下，current.itemid都会比current大一个，因为current有个隐藏元素，当相等或小于的时候就有问题，要重新设置current，最小不能超过0 // 正常情况下，current.itemid都会比current大一个，因为current有个隐藏元素，当相等或小于的时候就有问题，要重新设置current，最小不能超过0
...@@ -445,26 +488,16 @@ ...@@ -445,26 +488,16 @@
}); });
} }
this.list = [ this.list = [
{value: 1, text: '这是测试的文字1'}, {value: 1, text: '白色条纹马克杯，马克吐温同款1', imgsrc:'/static/images/test1.jpg', price:'￥399.00',people:2200,sku:'100004549235'},
{value: 2, text: '这是测试的文字2'}, {value: 2, text: '白色条纹马克杯，马克吐温同款2', imgsrc:'/static/images/test2.png', price:'￥1399.22',people:2200,sku:'2004203'},
{value: 3, text: '这是测试的文字3'}, {value: 3, text: '白色条纹马克杯，马克吐温同款3', imgsrc:'/static/images/peo1.jpg', price:'￥199.22',people:2200,sku:'17818909707'},
{value: 4, text: '这是测试的文字4'}, {value: 4, text: '白色条纹马克杯，马克吐温同款4', imgsrc:'/static/images/peo2.jpg', price:'￥134.12',people:2200,sku:'100004549235'},
{value: 5, text: '这是测试的文字5'}, {value: 5, text: '白色条纹马克杯，马克吐温同款5', imgsrc:'/static/images/peo3.jpg', price:'￥194.22',people:2200,sku:'100004549235'},
{value: 6, text: '这是测试的文字6'}, {value: 6, text: '白色条纹马克杯，马克吐温同款6', imgsrc:'/static/images/peo1.jpg', price:'￥292.22',people:2200,sku:'100004549235'},
{value: 7, text: '这是测试的文字7'}, {value: 7, text: '白色条纹马克杯，马克吐温同款7', imgsrc:'/static/images/test1.jpg', price:'￥1399.92',people:2200,sku:'100004549235'},
{value: 8, text: '这是测试的文字8'}, {value: 8, text: '白色条纹马克杯，马克吐温同款8', imgsrc:'/static/images/test2.png', price:'￥1399.98',people:2200,sku:'100004549235'},
{value: 9, text: '这是测试的文字9'}, {value: 9, text: '白色条纹马克杯，马克吐温同款9', imgsrc:'/static/images/peo3.jpg', price:'￥1399.78',people:2200,sku:'100004549235'},
{value: 10, text: '这是测试的文字10'} {value: 10, text: '白色条纹马克杯，马克吐温同款10', imgsrc:'/static/images/peo2.jpg', price:'￥1399.67',people:2200,sku:'100004549235'}
];
this.adlist = [
{imgsrc: '/static/images/test1.jpg', text: '小明刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小2刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小3刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小4刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小5刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小6刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小7刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小8刚刚参与了抽奖'}
]; ];
let urls = [ let urls = [
'https://www.apple.com/105/media/us/iphone-x/2017/01df5b43-28e4-4848-bf20-490c34a926a7/films/feature/iphone-x-feature-tpl-cc-us-20170912_1920x1080h.mp4', 'https://www.apple.com/105/media/us/iphone-x/2017/01df5b43-28e4-4848-bf20-490c34a926a7/films/feature/iphone-x-feature-tpl-cc-us-20170912_1920x1080h.mp4',
...@@ -476,6 +509,18 @@ ...@@ -476,6 +509,18 @@
}, },
onLoad () { onLoad () {
let that = this; let that = this;
this.progress = 47;
this.progressStyle = 'width:'+this.progress+'%';
this.adlist = [
{imgsrc: '/static/images/test1.jpg', text: '小明刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小2刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小3刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小4刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小5刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小6刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小7刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小8刚刚参与了抽奖'}
];
// console.log(this.$app.$options.globalData.info,111) // console.log(this.$app.$options.globalData.info,111)
//如果已经存在store里就不用再获取用户信息了 //如果已经存在store里就不用再获取用户信息了
if(this.userInfo) return; if(this.userInfo) return;
...@@ -506,6 +551,10 @@ ...@@ -506,6 +551,10 @@
} }
}); });
}, },
onShow() {
//从其他小程序回来可以在当前生命周期检测到,但是这个方法，自己的小程序页面返回也会进入
console.log('页面show！！')
},
}); });
</script> </script>
<config> <config>
...@@ -521,6 +570,10 @@ ...@@ -521,6 +570,10 @@
'star-animation': '~@/components/custom/starAnimation', 'star-animation': '~@/components/custom/starAnimation',
'star-animation1': '~@/components/custom/starAnimation1', 'star-animation1': '~@/components/custom/starAnimation1',
'open-animation': '~@/components/custom/openAnimation', 'open-animation': '~@/components/custom/openAnimation',
} },
} "navigateToMiniProgramAppIdList":[
"wx91d27dbf599dff74"
],
}
</config> </config>
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