Skip to content

M
mini-program-wepy
Commit 7af26493 authored by ziyu's avatar ziyu
Browse files
Options

improvement: 商品列表优化

parent 46e46a64
Show whitespace changes
Inline Side-by-side
Showing with 67 additions and 48 deletions
src/pages/index.wpy
View file @ 7af26493
...@@ -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,21 +76,21 @@ ...@@ -52,21 +76,21 @@
.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 {
...@@ -130,10 +154,6 @@ ...@@ -130,10 +154,6 @@
opacity:0; opacity:0;
transform:translateY(-220rpx) transform:translateY(-220rpx)
} }
.leftcont{
position: absolute;
z-index: 7;
}
.authmodal{ .authmodal{
width:100%; width:100%;
height:100%; height:100%;
...@@ -182,7 +202,9 @@ ...@@ -182,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>
...@@ -190,11 +212,6 @@ ...@@ -190,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">
...@@ -204,6 +221,14 @@ ...@@ -204,6 +221,14 @@
</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
...@@ -266,13 +291,15 @@ ...@@ -266,13 +291,15 @@
swiperItem:2, swiperItem:2,
videoList:[], videoList:[],
length: 4, length: 4,
circular:true, circular:false,
topPage:0, topPage:0,
lastPage:0, lastPage:0,
currentIndex:5, currentIndex:5,
authmodal:false, authmodal:false,
sign: false, sign: false,
showAnimation: false, showAnimation: false,
progress:0,
progressStyle:'',
}, },
computed: { computed: {
...@@ -291,13 +318,6 @@ ...@@ -291,13 +318,6 @@
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:-1,text: '白色条纹马克杯，马克吐温同款-1', imgsrc:'/static/images/test1.jpg', price:'￥912.89',people:2200,sku:'100004549235'},
];
let nextlist=[ let nextlist=[
{value:11,text: '白色条纹马克杯，马克吐温同款11', imgsrc:'/static/images/test1.jpg', price:'￥9.89',people:2200,sku:'100004549235'}, {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:12,text: '白色条纹马克杯，马克吐温同款12', imgsrc:'/static/images/test2.png', price:'￥19.20',people:'2200',sku:'100004549235'},
...@@ -317,7 +337,7 @@ ...@@ -317,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) {
...@@ -328,7 +348,7 @@ ...@@ -328,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;
...@@ -348,9 +368,6 @@ ...@@ -348,9 +368,6 @@
wx.navigateToMiniProgram({ wx.navigateToMiniProgram({
appId: 'wx91d27dbf599dff74', appId: 'wx91d27dbf599dff74',
path: 'pages/item/detail/detail?sku='+item.sku, // 跳转小程序的路径 path: 'pages/item/detail/detail?sku='+item.sku, // 跳转小程序的路径
// extraData: { // 需要带的的参数
// "__pid":'Pxk15xcmirwbn'
// },
// 有效值 develop（开发版），trial（体验版），release（正式版） // 有效值 develop（开发版），trial（体验版），release（正式版）
envVersion: 'release', envVersion: 'release',
success(res) { success(res) {
...@@ -482,16 +499,6 @@ ...@@ -482,16 +499,6 @@
{value: 9, text: '白色条纹马克杯，马克吐温同款9', imgsrc:'/static/images/peo3.jpg', price:'￥1399.78',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'} {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',
'https://xyqblogo.lkbang.net/VID_20200508_171710.mp4', 'https://xyqblogo.lkbang.net/VID_20200508_171710.mp4',
...@@ -502,6 +509,18 @@ ...@@ -502,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;
......
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