Skip to content

M
mini-program-wepy
Commit 23423d6d authored by ziyu's avatar ziyu
Browse files
Options

improvement: 商品加搜索

parent 993461da
Hide whitespace changes
Inline Side-by-side
Showing with 76 additions and 320 deletions
src/app.wpy
View file @ 23423d6d
......@@ -15,6 +15,7 @@ import promisify from '@wepy/use-promisify';
wepy.use(promisify);
wepy.use(vuex);
import { checkUpdateVersion } from './common/raffleProbability'
wepy.app({
hooks: {
......@@ -24,8 +25,9 @@ wepy.app({
globalData: {
statusBarHeight: ''
},
async onLaunch() {
onLaunch() {
let that = this;
checkUpdateVersion();
wx.getSystemInfo({
success: function (res) {
that.$options.globalData.statusBarHeight = res.statusBarHeight;
......
src/common/raffleProbability.js
View file @ 23423d6d
......@@ -21,6 +21,39 @@ function getProbability (quantity, coinQuantity) {
return value + '/' + value2;
}
}
function checkUpdateVersion() {
//创建 UpdateManager 实例
const updateManager = wx.getUpdateManager();
//检测版本更新
updateManager.onCheckForUpdate(function(res) {
// 请求完新版本信息的回调
if (res.hasUpdate) {
//监听小程序有版本更新事件
updateManager.onUpdateReady(function() {
wx.showModal({
title: '更新提示',
content: '新版本已经准备好，是否重启应用？',
success(res) {
if (res.confirm) {
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate();
}
}
})
})
updateManager.onUpdateFailed(function() {
// 新版本下载失败
wx.showModal({
title: '已经有新版本咯~',
content: '请您删除当前小程序，到微信 “发现-小程序” 页，重新搜索打开呦~',
})
})
}
})
}
module.exports = {
getProbability
getProbability,
checkUpdateVersion,
};
src/components/custom/goodsList.wpy
View file @ 23423d6d
......@@ -4,6 +4,7 @@
<swiper
class="footswiper"
display-multiple-items="{{swiperItem}}"
duration="300"
current="{{current}}"
bindchange="moveSwiper"
circular="{{circular}}"
......@@ -34,8 +35,7 @@
<script>
import wepy from '@wepy/core';
import { getGoodsList, getGoodsUrl } from '../../common/api'
let touchDotX = 0, touchDotY = 0, page = 0, goodsIds = [], isListDone = false;
const goodsNum = 2;
let touchDotX = 0, touchDotY = 0, page = 0;
wepy.component({
data: {
swiperItem: 2,
......@@ -44,19 +44,11 @@
circular: false, // 商品是否无限循环
list: [],
showLoading:false,
isListDone:false,
},
created() {
// 获取推荐的商品列表
/*this.list = [{sourceId: 11, title: '白色条纹马克杯，马克吐温同款11', images: '/static/images/test1.jpg', price: '￥9.89', saleCount: 2200, sku: 'https://u.jd.com/EToRju'},
{sourceId: 12, title: '白色条纹马克杯，马克吐温同款12', images: '/static/images/test2.png', price: '￥19.20', saleCount: '2200', sku: 'https://u.jd.com/EToRju'},
{sourceId: 13, title: '白色条纹马克杯，马克吐温同款13', images: '/static/images/peo1.jpg', price: '￥39.08', saleCount: 2200, sku: 'https://u.jd.com/EToRju'},
{sourceId: 14, title: '白色条纹马克杯，马克吐温同款14', images: '/static/images/peo2.jpg', price: '￥599.20', saleCount: 2200, sku: 'https://u.jd.com/EToRju'},
{sourceId: 15, title: '白色条纹马克杯，马克吐温同款15', images: '/static/images/peo3.jpg', price: '￥2399.01', saleCount: 2200, sku: 'https://u.jd.com/EToRju'},
{sourceId: 11, title: '白色条纹马克杯，马克吐温同款11', images: '/static/images/test1.jpg', price: '￥9.89', saleCount: 2200, sku: 'https://u.jd.com/EToRju'},
{sourceId: 12, title: '白色条纹马克杯，马克吐温同款12', images: '/static/images/test2.png', price: '￥19.20', saleCount: '2200', sku: 'https://u.jd.com/EToRju'}
];*/
this.getList();
goodsIds = this.list.map(item => item.sourceId);
// goodsIds = this.list.map(item => item.sourceId);
},
methods: {
moveSwiper(e) {
......@@ -80,13 +72,6 @@
if (e.$wx.detail.source === 'touch') {
let current = e.$wx.detail.current;
/*let nextlist = [
{sourceId: 11, title: '白色条纹马克杯，马克吐温同款11', images: '/static/images/test1.jpg', price: '￥9.89', saleCount: 2200, sku: 'https://u.jd.com/EToRju'},
{sourceId: 12, title: '白色条纹马克杯，马克吐温同款12', images: '/static/images/test2.png', price: '￥19.20', saleCount: '2200', sku: 'https://u.jd.com/EToRju'},
{sourceId: 13, title: '白色条纹马克杯，马克吐温同款13', images: '/static/images/peo1.jpg', price: '￥39.08', saleCount: 2200, sku: 'https://u.jd.com/EToRju'},
{sourceId: 14, title: '白色条纹马克杯，马克吐温同款14', images: '/static/images/peo2.jpg', price: '￥599.20', saleCount: 2200, sku: 'https://u.jd.com/EToRju'},
{sourceId: 15, title: '白色条纹马克杯，马克吐温同款15', images: '/static/images/peo3.jpg', price: '￥2399.01', saleCount: 2200, sku: 'https://u.jd.com/EToRju'}
];*/
let that = this;
if (current >= this.list.length - 3) {
debounce(setTimeout(function() {
......@@ -101,21 +86,21 @@
}
},
getList() {
if(isListDone) return;
if(this.isListDone) return;
page++;
getGoodsList(page).then(data => {
if(data.length < goodsNum) {
// 没有更多了
if(!data.hasMore) {
//如果小于4个商品，一行就能显示，不用循环
this.list.length>4 && (this.circular = true)
isListDone = true;
this.list.length>4 && (this.circular = true);
this.isListDone = true;
}
this.list = [...this.list,...data];
this.list = [...this.list,...data.items];
});
},
toViewPage(e) {
let item = e.$wx.currentTarget.dataset.item;
getGoodsUrl({skuId:item.sourceId}).then(data=>{
console.log(data,111);
wx.navigateToMiniProgram({
appId: 'wx91d27dbf599dff74',
path: 'pages/union/proxy/proxy?spreadUrl=' + encodeURIComponent(data), // 跳转小程序的路径
......@@ -235,7 +220,7 @@
position: relative;
}
.list-item .img {
width: 210rpx;
width: 220rpx;
display: block;
height: 210rpx;
margin:0 auto;
......
src/components/custom/prizeList.wpy deleted 100644 → 0
View file @ 993461da
<style lang="less">
@import "../../style/common";
.container,.video-swiper{
width:100%;
height:100%;
}
.video-item {
height:100%;
width:100%;
position: absolute;
background-color: #000;
z-index: 1;
}
.image-item{
height:100%;
width:100%;
position: absolute;
z-index: 1;
display: flex;
align-items: center;
}
.rightcont {
font-size: @font-normal;
position: absolute;
z-index: 9;
bottom: 415rpx;
width:30%;
right: 30rpx;
color: @whitecolor;
will-change: transform;
.info {
line-height: 40rpx;
}
}
.progress {
width: 180rpx;
height: 20rpx;
background-color: @whiteback;
margin-top: 10rpx;
color: @greycolor;
position: relative;
.text {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index: 2;
text-align: center;
line-height:20rpx;
background-color: transparent;
font-size: 18rpx;
}
.orange {
width: 0;
height:100%;
transition:all .6s;
background-color: @maincolor;
}
}
.images {
width: 100%;
}
</style>
<wxs module="video" src="../../common/common.wxs"></wxs>
<template>
<view class="container">
<swiper
class="video-swiper"
circular="{{circular}}"
vertical
current="1"
bindanimationfinish="bindanimationfinish"
bindchange="moveSwiper"
>
<swiper-item :class="{'image-item': item.showType && item.showType.value === 1}" v-for="(item, idx) in curQueue" :key="item.id">
<view class="video-wrapper">
<video
id="video_{{idx}}"
class="video-item"
loop
show-center-play-btn="{{false}}"
enable-progress-gesture="{{false}}"
controls="{{false}}"
src="{{video.showVideo(item,currentIndex,idx)?item.videoUrl:null}}"
data-id="{{item.id}}"
data-index="{{idx}}"
binderror="onError"
bindtimeupdate="onTimeUpdate"
@tap="videoTap"
custom-cache="{{false}}"
object-fit="contain"
wx:if="{{item.showType && item.showType.value ==2}}"
>
<video-loading v-if="item.time === 0" :snapshot="item.videoSnapUrl"/>
<video-pause :pause="pause"></video-pause>
</video>
<image wx:if="{{item.showType && item.showType.value ==1}}" lazy-load class="images" :src="item.photoUrl" mode="widthFix" bindload="imageLoad(item.id)">
<image-loading v-if="item.time === 0"/>
</image>
<view class="rightcont" v-show="item.id > 0">
<view class="info">奖品库存: {{item.stock}}/{{item.totalStock}}</view>
<view class="info">中奖概率: {{item.probability}}</view>
<view class="progress">
<view class="text">{{item.progress}}</view>
<view class="orange" style="{{item.progressStyle}}"></view>
</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import wepy from '@wepy/core';
import { getProbability } from '../../common/raffleProbability';
import { getAwardsDetail } from '../../common/api.js';
let _videoContexts = [], videoCurrent = 0;
wepy.component({
props: {
videoList: {
type: Array,
value: []
},
userAccount: {
type: Number,
value: 0
}
},
data: {
pause: false,
curQueue: [],
currentIndex:0,
circular: true,
},
watch: {
videoList () {
const newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
this._videoListChanged(newVal);
// this.compute(this.userAccount);
},
userAccount(newVal) {
this.compute(newVal);
}
},
created() {
this.compute(this.userAccount);
},
methods: {
compute (newVal) {
if (!this.curQueue.length) return;
this.curQueue.forEach(v => {
v.probability = getProbability(+newVal, +v.coinQuantity);
});
this.curQueue = [...this.curQueue];
this.updateAwardsInfo(videoCurrent);
},
moveSwiper(e) {
if (e.$wx.detail.source === 'touch') {
let current = e.$wx.detail.current;
this.currentIndex = current;
}
},
async getProgress(id) {
if (id <= 0) return;
let detail = await getAwardsDetail({ prizeId: id });
detail = detail || {};
if (detail.join > detail.quantity) detail.join = detail.quantity;
const progressFloat = detail.join / detail.quantity * 100;
let progress = Math.round(progressFloat) + '%';
if (progressFloat > 0 && progressFloat < 1) progress = '1%';
this.curQueue.forEach(v => {
if (v.id === id) {
v.progress = progress;
v.batchId = detail.id;
v.progressStyle = 'width:' + progress;
}
});
this.curQueue = [...this.curQueue];
},
_videoListChanged (newVal) {
this.curQueue = newVal.map((item, index) => {
_videoContexts.push(item.videoUrl ? wx.createVideoContext(`video_${index}`, this.$wx) : null);
item.time = 0;
return item;
});
this.compute(this.userAccount);
setTimeout(() => {
this.playCurrent(0);
}, 300);
},
bindanimationfinish(e) {
const current = e.$wx.detail.current;
videoCurrent = current;
this.pause = false;
this.playCurrent(current);
this.trigger(e, 'change');
},
onError(e) {
this.trigger(e, 'error');
},
onTimeUpdate(e) {
const currentTime = e.$wx.detail.currentTime;
if (currentTime > 0 && currentTime < 10) {
const id = e.target.dataset.id;
this.curQueue.forEach((v, i) => {
if (v.id === id && v.time === 0) {
this.curQueue[i].time = currentTime;
}
});
this.curQueue = [...this.curQueue];
}
},
updateAwardsInfo(current) {
const { id, photoUrl, name, probability } = this.curQueue[current];
this.$emit('getAwardsInfo', {
id,
photoUrl: encodeURIComponent(photoUrl),
name,
chance: probability
});
},
playCurrent(current) {
if (!this.curQueue || this.curQueue.length <= 1) return;
// 播放当前视频
/*_videoContexts.forEach((ctx, index) => {
if (index !== current) {
ctx && ctx.pause();
} else {
//将视频重置到最开始的位置并播放
// ctx && ctx.seek(0);
ctx && ctx.play();
}
});*/
// 更新抽奖页面参数
this.updateAwardsInfo(current);
// 更新奖品进度
this.getProgress(this.curQueue[current].id);
},
trigger(e, type) {
var ext = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var detail = e.$wx.detail;
var activeId = e.target.dataset.id;
this.$emit(type, Object.assign(Object.assign(Object.assign({}, detail), { activeId: activeId }), ext));
},
videoTap(e) {
const current = e.currentTarget.dataset.index;
_videoContexts.forEach((ctx, index) => {
if (index === current) {
this.pause ? ctx.play() : ctx.pause();
}
});
this.curQueue.forEach((item, index) => {
if (index === current && item.time !== 0) {
this.pause = !this.pause;
}
});
},
imageLoad(id) {
this.curQueue.forEach(item => {
if (item.id === id) {
item.time = 1;
}
});
this.curQueue = [...this.curQueue];
}
}
});
</script>
<config>
{
usingComponents: {
'video-pause': '~@/components/custom/videoPause',
'video-loading': '~@/components/custom/loading',
'image-loading': '~@/components/custom/loading',
"van-image": "~@/components/vant/image/index"
}
}
</config>
src/components/custom/video.wpy
View file @ 23423d6d
......@@ -3,6 +3,7 @@
<view class="container">
<swiper
class="video-swiper"
duration="600"
circular="{{circular}}"
vertical
current="1"
......@@ -30,10 +31,10 @@
<!--<video-loading v-if="videoLoading" :snapshot="item.videoSnapUrl"/>-->
</video>
<van-image wx:if="{{item.showType && item.showType.value ==1}}" use-loading-slot src="{{item.photoUrl}}" class="images" radius="10rpx" fit="contain" width="100%" height="100%">
<van-loading slot="loading" type="spinner" size="20" vertical />
<van-loading slot="loading" type="spinner" size="20" vertical/>
</van-image>
<view class="rightcont" v-show="item.id > 0">
<view class="info">奖品库存: {{item.stock}}/{{item.totalStock}}</view>
<view class="info">奖品剩余: {{item.stock}}/{{item.totalStock}}</view>
<view class="info">中奖概率: {{item.probability}}</view>
<view class="progress">
<view class="text">{{item.progress}}</view>
......@@ -60,6 +61,9 @@
value: 0
}
},
options: {
styleIsolation: 'shared',
},
data:{
nextQueue: [],
prevQueue: [],
......@@ -170,6 +174,10 @@
this._invalidUp -= 1;
}
}
//如果next中如果就剩下4个了，请求下一页
/*if(nextQueue.length <= 4) {
}*/
//当滑动到头时，circular改成false
let circular = true;
if (nextQueue.length === 0 && current !== 0) {
......@@ -241,8 +249,9 @@
'video-pause': '~@/components/custom/videoPause',
'video-loading': '~@/components/custom/loading',
"van-loading": "~@/components/vant/loading/index",
"van-image": "~@/components/vant/image/index"
}
"van-image": "~@/components/vant/image/index",
"image-loading":"~@/components/custom/loading"
},
}
</config>
<style lang="less">
......@@ -308,6 +317,9 @@
}
.images {
width: 100%;
.van-image__loading {
background-color: rgba(0,0,0,0.7);
}
}
</style>
src/pages/index.wpy
View file @ 23423d6d
......@@ -46,7 +46,7 @@
z-index: 10;
top:100rpx;
left: 310rpx;
font-size: @font-middle;
font-size: @font-large;
color: @whitecolor;
.searchimg {
width: 34rpx;
......
src/pages/search.wpy
View file @ 23423d6d
......@@ -19,11 +19,12 @@
{{item.title}}
</view>
<view class="cont-price"><text class="dollar">￥</text>{{item.price}}</view>
<view class="cont-count">2236人购买</view>
<view class="cont-count">{{item.shopName}}</view>
</view>
</view>
</view>
</view>
<view class="search-last" v-show="isDone">没有更多了~</view>
</view>
</template>
<script>
......@@ -52,11 +53,11 @@
},
getList(val) {
getSearchList({keyword:val,page:page}).then(data=>{
if(data) {
this.list = [...this.list,...data];
} else{
if(!data.hasMore) {
this.isDone = true;
}
this.list = [...this.list,...data.items];
}).catch(()=>{
});
......@@ -77,7 +78,6 @@
}
},
onReachBottom() {
console.log(this.isDone,11)
if(this.isDone) return;
page++;
this.getList(keyword);
......@@ -182,4 +182,10 @@
color:@maincolor;
}
}
.search-last {
text-align: center;
padding:30rpx 0;
font-size: @font-middle;
color:@greycolor;
}
</style>
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