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>
import wepy from '@wepy/core';
import eventHub from './common/eventHub';
......
src/pages/index.wpy
View file @ 8ab0e7a1
......@@ -28,23 +28,47 @@
.content{
position: absolute;
z-index: 9;
bottom: 250px;
bottom: 450rpx;
width: 100%;
color: white;
clear: both;
}
.leftcont {
font-size: 12px;
width: 42%;
float: left;
margin-left: 20rpx;
.rightcont {
font-size: 24rpx;
display:inline-block;
float: right;
margin-right: 30rpx;
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%;
float: right;
float: left;
font-size: 12px;
margin-left: 30rpx;
}
.imgwrap{
margin:8px 0;
......@@ -52,88 +76,83 @@
.list-wrapper {
height: 70px;
}
.rightcont .img {
width: 20px;
height: 20px;
.leftcont .img {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
vertical-align: middle;
}
.rightcont .text {
.leftcont .text {
margin-left: 5px;
vertical-align: middle;
border-radius: 20rpx;
display: inline-block;
font-size: 10px;
font-size: 20rpx;
box-sizing: border-box;
padding:6rpx 15rpx;
background-color:rgba(255, 255, 255, 0.2);
background-color:rgba(238, 238, 238, 0.2);
}
.footer {
position: absolute;
z-index: 9;
bottom: 50px;
bottom: 20rpx;
width: 100%;
}
.footswiper {
height: 360rpx;
}
.list-item{
width:100%;
height: 120px;
width:220rpx;
/*height: 330rpx;*/
background-color:#fff;
position: absolute;
bottom:5px;
box-sizing: border-box;
border-radius: 5rpx;
transform: scale(0.7,0.7) translateY(28px);
border-radius: 10rpx;
transform: scale(0.7,0.7) translateY(65rpx);
transition: all 0.5s;
padding:10rpx;
padding:10rpx 10rpx 5rpx 10rpx;
margin:0 auto;
margin-top: 2rpx;
position: relative;
}
.list-item image {
width: 95%;
width: 210rpx;
display: block;
height: 85px;
height: 210rpx;
margin:0 auto;
border-radius: 10rpx;
}
.list-item .text {
font-size: 10px;
font-size: 20rpx;
text-overflow: ellipsis;
white-space: nowrap;
display: -webkit-box;
-webkit-line-clamp: 2; //行数
-webkit-box-orient: vertical;
overflow: hidden;
line-height:24rpx;
margin-top:10rpx;
}
.list-item .goods {
width: 100%;
margin-top: -8px;
position: relative;
.list-item .price{
color:#FF5D15;
font-size:22rpx;
margin-top:2rpx;
}
.goods .price{
color:darkorange;
font-size: 10px;
}
.goods .buy{
text-align: right;
color: gainsboro;
font-size: 8px;
position: absolute;
right:0;
top:8px;
.list-item .buy{
font-size: 16rpx;
color:#AAA;
}
.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 {
transform: scale(0.85,0.85) translateY(12px) translateX(-15rpx);
transform: scale(0.85,0.85) translateY(26rpx) translateX(-25rpx);
}
.list-item.select{
transform: scale(1,1);
border-radius: 5rpx;
bottom: 2rpx;
}
.list-item.delete {
opacity:0;
transform:translateY(-100px)
}
.leftcont{
position: absolute;
z-index: 7;
transform:translateY(-220rpx)
}
.authmodal{
width:100%;
......@@ -160,16 +179,20 @@
}
</style>
<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) {
var allclass = "";
if(current==index)
if(current-1 == index||(current == 0&&index==length-1))
allclass='subleft';
// 无限循环当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';
if(current==index)
allclass='select';
if(current+1==index || (current==length-1 && index==0) )
allclass = "subright";
return allclass;
};
module.exports = {
......@@ -179,7 +202,9 @@
<template>
<view class="video-wrapper">
<view id="myvideo">
<video-list :videoList.sync="videoList" bindchange="changeVideo"></video-list>
<video-list :videoList.sync="videoList" bindchange="changeVideo">
</video-list>
</view>
<view class="userInfo">
<image src="{{userInfo.avatarUrl}}" mode="cover" class="userimage"></image>
......@@ -187,11 +212,6 @@
<view class="content">
<!-- <video-sign title="签"></video-sign> -->
<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-item wx:for="{{adlist}}" wx:key="index" catch:touchmove>
<view class="imgwrap">
......@@ -201,30 +221,40 @@
</swiper-item>
</swiper>
</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 class="footer">
<swiper
class="footswiper"
display-multiple-items="{{swiperItem}}"
current="{{current}}"
bindchange="moveSwiper"
bindanimationfinish="swipermoveDone"
circular="{{circular}}"
next-margin="90rpx"
previous-margin="140rpx"
next-margin="120rpx"
catch:touchmove
>
<!--bindtouchstart="touchStart"-->
<!--bindtouchend="touchEnd"-->
<swiper-item wx:for="{{list}}" wx:key="index">
<view
data-itemid="{{index}}"
bindtap="toViewPage"
bindtouchstart="touchStart"
bindtouchend="touchEnd"
data-item="{{item}}"
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="goods">
<text class="price">￥99.9</text><text class="buy">2200人购买</text>
</view>
<p class="price">{{item.price}}</p>
<p class="buy">{{item.people}}人购买</p>
</view>
</swiper-item>
</swiper>
......@@ -238,7 +268,7 @@
<network v-if="!isConnected"></network>
<!-- <star-animation></star-animation> -->
<star-animation1 v-if="sign && showAnimation"></star-animation1>
<open-animation></open-animation>
<!--<open-animation></open-animation>-->
</view>
</template>
......@@ -258,7 +288,7 @@
adlist:[],
current:5,
// userInfo: {},
swiperItem:3,
swiperItem:2,
videoList:[],
length: 4,
circular:false,
......@@ -268,6 +298,8 @@
authmodal:false,
sign: false,
showAnimation: false,
progress:0,
progressStyle:'',
},
computed: {
......@@ -286,19 +318,12 @@
if(e.$wx.detail.source == 'touch') {
let current = e.$wx.detail.current;
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=[
{value:11,text:'这是测试的文字11'},
{value:12,text:'这是测试的文字12'},
{value:13,text:'这是测试的文字13'},
{value:14,text:'这是测试的文字14'},
{value:15,text:'这是测试的文字15'},
{value:11,text: '白色条纹马克杯，马克吐温同款11', imgsrc:'/static/images/test1.jpg', price:'￥9.89',people:2200,sku:'100004549235'},
{value:12,text: '白色条纹马克杯，马克吐温同款12', imgsrc:'/static/images/test2.png', price:'￥19.20',people:'2200',sku:'100004549235'},
{value:13,text: '白色条纹马克杯，马克吐温同款13', imgsrc:'/static/images/peo1.jpg', price:'￥39.08',people:2200,sku:'100004549235'},
{value:14,text: '白色条纹马克杯，马克吐温同款14', imgsrc:'/static/images/peo2.jpg', price:'￥599.20',people:2200,sku:'100004549235'},
{value:15,text: '白色条纹马克杯，马克吐温同款15', imgsrc:'/static/images/peo3.jpg', price:'￥2399.01',people:2200,sku:'100004549235'},
];
let that = this;
function debounce(func,wait) {
......@@ -312,7 +337,7 @@
if (callNow) func();
}
}
if(current <= 2) {
/*if(current <= 2) {
debounce(setTimeout(function(){
that.topPage +=1;
if(that.lastPage+that.topPage >= totalPage) {
......@@ -323,7 +348,7 @@
// that.current = current+1;
// that.currentIndex = current+1;
},1000),500);
}
}*/
if(current >= this.list.length-3) {
debounce(setTimeout(function(){
that.lastPage +=1;
......@@ -336,11 +361,22 @@
}
}
},
toViewPage() {
toViewPage(e) {
let item = e.$wx.currentTarget.dataset.item
// console.log(sku,12)
//解决长按触发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'
});
});*/
},
touchStart (event) {
touchDotX = event.touches[0].pageX; // 获取触摸时的原点
......@@ -420,6 +456,13 @@
});
this.list = list;
let that = this;
//如果剩下4个就不让他循环了，这时候就一屏显示出来了
if(list.length <= 4) {
this.circular = false;
}
if(current.itemid >= list.length -1) {
this.current = this.currentIndex -1;
}
setTimeout(function() {
let newlist = that.list.filter((item, index) => index != current.itemid);
// 正常情况下，current.itemid都会比current大一个，因为current有个隐藏元素，当相等或小于的时候就有问题，要重新设置current，最小不能超过0
......@@ -445,26 +488,16 @@
});
}
this.list = [
{value: 1, text: '这是测试的文字1'},
{value: 2, text: '这是测试的文字2'},
{value: 3, text: '这是测试的文字3'},
{value: 4, text: '这是测试的文字4'},
{value: 5, text: '这是测试的文字5'},
{value: 6, text: '这是测试的文字6'},
{value: 7, text: '这是测试的文字7'},
{value: 8, text: '这是测试的文字8'},
{value: 9, text: '这是测试的文字9'},
{value: 10, text: '这是测试的文字10'}
];
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刚刚参与了抽奖'}
{value: 1, text: '白色条纹马克杯，马克吐温同款1', imgsrc:'/static/images/test1.jpg', price:'￥399.00',people:2200,sku:'100004549235'},
{value: 2, text: '白色条纹马克杯，马克吐温同款2', imgsrc:'/static/images/test2.png', price:'￥1399.22',people:2200,sku:'2004203'},
{value: 3, text: '白色条纹马克杯，马克吐温同款3', imgsrc:'/static/images/peo1.jpg', price:'￥199.22',people:2200,sku:'17818909707'},
{value: 4, text: '白色条纹马克杯，马克吐温同款4', imgsrc:'/static/images/peo2.jpg', price:'￥134.12',people:2200,sku:'100004549235'},
{value: 5, text: '白色条纹马克杯，马克吐温同款5', imgsrc:'/static/images/peo3.jpg', price:'￥194.22',people:2200,sku:'100004549235'},
{value: 6, text: '白色条纹马克杯，马克吐温同款6', imgsrc:'/static/images/peo1.jpg', price:'￥292.22',people:2200,sku:'100004549235'},
{value: 7, text: '白色条纹马克杯，马克吐温同款7', imgsrc:'/static/images/test1.jpg', price:'￥1399.92',people:2200,sku:'100004549235'},
{value: 8, text: '白色条纹马克杯，马克吐温同款8', imgsrc:'/static/images/test2.png', price:'￥1399.98',people:2200,sku:'100004549235'},
{value: 9, text: '白色条纹马克杯，马克吐温同款9', imgsrc:'/static/images/peo3.jpg', price:'￥1399.78',people:2200,sku:'100004549235'},
{value: 10, text: '白色条纹马克杯，马克吐温同款10', imgsrc:'/static/images/peo2.jpg', price:'￥1399.67',people:2200,sku:'100004549235'}
];
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',
......@@ -476,6 +509,18 @@
},
onLoad () {
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)
//如果已经存在store里就不用再获取用户信息了
if(this.userInfo) return;
......@@ -506,6 +551,10 @@
}
});
},
onShow() {
//从其他小程序回来可以在当前生命周期检测到,但是这个方法，自己的小程序页面返回也会进入
console.log('页面show！！')
},
});
</script>
<config>
......@@ -521,6 +570,10 @@
'star-animation': '~@/components/custom/starAnimation',
'star-animation1': '~@/components/custom/starAnimation1',
'open-animation': '~@/components/custom/openAnimation',
}
}
},
"navigateToMiniProgramAppIdList":[
"wx91d27dbf599dff74"
],
}
</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