Skip to content

M
mini-program-wepy
Commit c0bff6a0 authored by 郝聪敏's avatar 郝聪敏
Browse files
Options

新增wepy request工具函数

parent d6de1426
Show whitespace changes
Inline Side-by-side
Showing with 277 additions and 192 deletions
package-lock.json
View file @ c0bff6a0
......@@ -998,6 +998,11 @@
"resolved": "http://npmprivate.quantgroups.com/@wepy%2fcore/-/core-2.0.0-alpha.16.tgz",
"integrity": "sha512-kIUlfmGwsOtKFEFxzmxGFyVL6CWojT9LWHQOTKQ6X+oRLGuUbSe6yYckLt2ZAu2Pg19J65OeSIie5hToicJO5Q=="
},
"@wepy/use-promisify": {
"version": "2.0.6",
"resolved": "http://npmprivate.quantgroups.com/@wepy%2fuse-promisify/-/use-promisify-2.0.6.tgz",
"integrity": "sha512-iZt4j1KU3YzNB5ilv5GS8kv0tqoLFtnAgcg6HDAmJ5Reol+imLsRENUxMdsfpO6oOxck4SSTzgSLOx3ccnC/qQ=="
},
"@wepy/x": {
"version": "2.0.4",
"resolved": "http://npmprivate.quantgroups.com/@wepy%2fx/-/x-2.0.4.tgz",
......
package.json
View file @ c0bff6a0
......@@ -18,6 +18,7 @@
"license": "MIT",
"dependencies": {
"@wepy/core": "^2.0.0-alpha.16",
"@wepy/use-promisify": "^2.0.6",
"@wepy/x": "^2.0.2"
},
"devDependencies": {
......
src/app.wpy
View file @ c0bff6a0
......@@ -8,8 +8,12 @@
</style>
<script>
import wepy from '@wepy/core';
import http from './common/wxRequest';
import vuex from '@wepy/x';
import promisify from '@wepy/use-promisify';
import { login } from './common/api';
wepy.use(promisify);
wepy.use(vuex);
wepy.app({
......@@ -20,50 +24,47 @@ wepy.app({
globalData: {
statusBarHeight: ''
},
onLaunch() {
async onLaunch() {
let that = this;
wx.getSystemInfo({
success: function (res) {
that.$options.globalData.statusBarHeight = res.statusBarHeight;
}
});
wx.setStorageSync('onNetworkStatusChange', true);
if (!wx.getStorageSync('openId')) {
wx.login({
success (res) {
if (res.code) {
// 发起网络请求，告诉后端
http.post('/');
wx.setStorageSync('wxCode', res.code);
} else {
console.log('登录失败！' + res.errMsg);
}
}
});
}
wx.checkSession({
success () {
console.log('已登录');
// session_key 未过期，并且在本生命周期一直有效
},
fail () {
// session_key 已经失效，需要重新执行登录流程
wx.login({
success (res) {
if (res.code) {
// 发起网络请求，告诉后端
wx.setStorageSync('wxCode', res.code);
} else {
console.log('登录失败！' + res.errMsg);
}
}
});
const { code } = await wepy.wx.login();
const userInfo = await login(code);
wx.setStorageSync('openId', userInfo.openId);
wx.setStorageSync('isRegister', userInfo.isRegister);
}
});
wx.setStorageSync('onNetworkStatusChange', true);
// wx.checkSession({
// success () {
// console.log('已登录');
// // session_key 未过期，并且在本生命周期一直有效
// },
// fail () {
// // session_key 已经失效，需要重新执行登录流程
// wx.login({
// success (res) {
// if (res.code) {
// // 发起网络请求，告诉后端
// wx.setStorageSync('wxCode', res.code);
// } else {
// console.log('登录失败！' + res.errMsg);
// }
// }
// });
// }
// });
wx.onNetworkStatusChange((res) => {
console.log('onNetworkStatusChange', res.isConnected);
wx.setStorageSync('onNetworkStatusChange', res.isConnected);
});
},
onError(e) {
console.log('onError', e);
},
methods: {}
});
</script>
......
src/common/api.js
View file @ c0bff6a0
import http from './wxRequest';
module.exports = {
login() {
return http.post();
login(code) {
return http.post(`/api/user/login?code=1235`);
},
register(params) {
return http.post('/api/user/register', params, { 'content-type': 'application/json' });
},
getUserInfo(params) {
return http.post('/api/user/main', params);
},
getAwardsInfo(params) {
return http.post('/api/prize/list', params);
},
getAwardsDetail(params) {
return http.post('/api/prize/batch', params);
},
getActivityFeed(params) {
return http.post('/api/activity/feed', params);
},
addGold(params) {
return http.post('/api/user/book', params);
},
signIn(params) {
return http.post('/api/user/signin', params, { 'content-type': 'application/json' });
},
getPrizeList(params) {
return http.post('/api/prize/list', params, { 'content-type': 'application/json' });
}
};
src/common/wxRequest.js
View file @ c0bff6a0
import wepy from '@wepy/core';
import Notify from '../components/vant/notify/notify';
const baseUrl = 'localhost:8000';
const baseUrl = 'https://luckiiapi.q-gp.com/yapi/mock/325';
const request = (url, options) => {
const request = async (url, options) => {
const defaultOptions = {
method: 'post',
header: { 'content-type': 'applicction/x-www-form-urlencoded' }
......@@ -11,6 +12,7 @@ const request = (url, options) => {
url = baseUrl + url;
const isConnected = wx.getStorageSync('onNetworkStatusChange');
console.log('isConnected', isConnected);
if (!isConnected) {
wx.showToast({
title: '无网络',
......@@ -20,26 +22,21 @@ const request = (url, options) => {
return;
}
const promise = new Promise((resolve, reject) => {
/*wepy.request({
return wepy.wx.request({
url: url,
data: options.data,
method: options.method,
header: options.header,
success: res => {
if (res.statusCode == 200) {
if (res.data.code == '2000') {
resolve(res.data.data);
header: options.header
}).then(res => {
if (res.statusCode === 200) {
if (res.data.code === 2000) {
return res.data.data;
}
}
reject(res);
},
fail: res => {
reject(res);
}
});*/
Notify({ message: res.data.detail || '请求异常,请稍后重试', background: '#FF5D15', safeAreaInsetTop: true });
}).catch(res => {
Notify({ message: '请求失败,请稍后重试', background: '#FF5D15', safeAreaInsetTop: true });
});
return promise;
};
const post = (url, data, header) => {
......
src/components/custom/openAnimation.wpy
View file @ c0bff6a0
......@@ -6,18 +6,6 @@
<div class="gift" @tap="click"></div>
</div>
<div class="chest-open" :class="{'show': show, 'blur': blur}">
<!-- <div class="mod-chest-cont">
<div class="content">
<div>您可真幸运～</div>
<image class="gift-image" src="/static/images/peo2.jpg"></image>
<div>时尚卡通水杯</div>
</div>
<div class="func">
<button class="chest-btn" @tap="go">再去挑战</button>
<button class="chest-btn" @tap="go">查看</button>
</div>
</div> -->
<div class="dialog" :class="{'fail-dialog': !isWin}">
<div class="star">
<image class="star-image" src="/static/images/star@2x.png"></image>
......@@ -35,8 +23,8 @@
</div>
<div class="success-content" v-if="isWin">
<div class="des">恭喜您中奖!</div>
<image class="image" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590418868788&di=5f7d14c51ea4d224c68d2f84b528c6f0&imgtype=0&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D2413142997%2C2945797382%26fm%3D214%26gp%3D0.jpg"></image>
<div class="name">勃垦地进口红酒精装版</div>
<image class="image" :src="joinRecord.prize.photoUrl"></image>
<div class="name">{{joinRecord.prize.name}}</div>
</div>
<div class="dialog-footer">
<button class="btn" @tap="go">立即查看</button>
......@@ -52,7 +40,12 @@
wepy.component({
props: {
isWin: false
joinRecord: {
type: Object,
default() {
return {};
}
}
},
data: {
showAnimation: true,
......@@ -62,6 +55,13 @@
blur: false,
opened: false
},
computed: {
isWin() {
console.log('this.joinRecord.status.value', this.joinRecord);
if (!this.joinRecord.id) return false;
return +this.joinRecord.status.value === 3;
}
},
methods: {
click: function() {
this.shake = true;
......@@ -98,7 +98,7 @@
created() {
// setTimeout(() => {
this.showAnimation = true;
this.click();
// this.click();
// }, 1000);
}
});
......
src/components/custom/sharedPopup.wpy
View file @ c0bff6a0
......@@ -20,15 +20,14 @@
<div class="content">
<div class="des">恭喜您!</div>
<image class="image" src="/static/images/gold@2x.png"></image>
<div class="info">通过邀请以下好友,您获得15克币</div>
<div class="user">
<image class="user-img" src="/static/images/test1.jpg"></image>
<image class="user-img" src="/static/images/test1.jpg"></image>
<image class="user-img" src="/static/images/test1.jpg"></image>
<div class="info">通过邀请以下好友,您获得{{goldNum}}克币</div>
<div class="user" :class="{'one-user': inviteinfo.length === 1 }">
<image class="user-img" v-for="item in users" :src="item.avatarUrl"></image>
<span class="user-rest" v-if="inviteinfo.length > 3">...</span>
</div>
</div>
<div class="dialog-footer">
<button class="btn" @tap="go">立即领取</button>
<button class="btn" @tap="getGold">立即领取</button>
</div>
</div>
</div>
......@@ -38,39 +37,34 @@
wepy.component({
props: {
showMenus: {
type: Boolean,
default: false
inviteinfo: {
type: Array
}
},
data: {
menus: [
{ img: '/static/images/awards@2x.png', title: '我的抽奖', path: '/pages/awards' },
{ img: '/static/images/feedback@2x.png', title: '规则与帮助', path: '/pages/feedback' },
{ img: '/static/images/help@2x.png', title: '问题反馈', path: '/pages/help' }
],
show: false,
popupStyle: ''
computed: {
goldNum() {
return this.inviteinfo.reduce((p, n) => {
p += +n.quantity;
return p;
}, 0);
},
watch: {
showMenus(v) {
if (!v) {
setTimeout(() => {
this.show = false;
}, 300);
} else {
this.show = true;
}
}
users() {
return this.inviteinfo.slice(0, 3);
},
computed: {
hide() {
return !this.showMenus;
ids() {
return this.inviteinfo.reduce((p, n) => {
p.push(n.accountItemId);
return p;
}, []);
}
},
methods: {
getAwards: function() {
this.show = false;
getGold: function() {
this.$emit('getSharedGold', {
openid: wx.getStorageSync('openId'),
itemIdList: this.ids.join(','),
quantity: this.goldNum
});
}
}
});
......@@ -250,13 +244,15 @@
height: 50rpx;
border-radius: 50%;
}
&:after {
content: '...';
.user-rest {
position: absolute;
bottom: -5rpx;
bottom: 11rpx;
right: -46rpx;
}
}
.one-user {
justify-content: center;
}
}
.dialog-footer {
display: flex;
......
src/components/custom/sign.wpy
View file @ c0bff6a0
<template>
<div style="{{containerStyle}}" class="icon-container">
<star-animation v-if='flyAnimation'></star-animation>
<star-animation v-if="flyAnimation"></star-animation>
<div class="sign" v-if="type === 'sign'" @tap="signIn">
<image class="sign-in" :src="signNotCompletedUrl" v-if="!signComplete" :class="{'jump': !sign, 'fly': sign}" ></image>
<image class="sign-comlete" :src="signCompletedUrl" v-if="sign"></image>
......@@ -11,7 +11,7 @@
<div v-if="type === 'gold'" class="gold">
<div class="add-gold" v-if="addGold">
<image class="add-gold-image" :src="addGoldUrl"></image>
<span class="add-gold-num">+10</span>
<span class="add-gold-num">+{{addGoldNum}}</span>
</div>
<div class="show-gold" @tap="showAnimation">
<div class="sunshine" v-if="addsunshine"></div>
......@@ -57,27 +57,29 @@
data: {
showAnimation: false,
addGold: false,
addGoldNum: 0,
addCount: 0,
addsunshine: false,
signComplete: false,
signComplete: true,
signNotCompletedUrl: '/static/images/sign@2x.png',
signCompletedUrl: '/static/images/sign-completed@2x-70_70px.png',
shareUrl: '/static/images/share@2x.png',
lotteryUrl: '/static/images/lottery@2x.png',
containerStyle: '',
flyAnimation: false
flyAnimation: false,
isFirst: true
},
props: {
title: '',
sign: {
type: Boolean,
default: false
default: true
},
gold: {
type: Boolean,
default: false
default: true
},
des: {
type: String | Number,
default: ''
},
type: {
......@@ -117,27 +119,38 @@
}
},
watch: {
des(newVal, oldVal) {
if (this.type === 'gold') {
if (!this.addCount) {
this.addCount ++;
return;
}
this.addGold = true;
this.addGoldNum = newVal - oldVal;
this.addCount ++;
}
},
gold(v) {
if (!v) {
this.addsunshine = false;
timeout1 = null;
} else {
timeout1 = setTimeout(() => {
if (this.isFirst) {
this.isFirst = false;
return;
}
setTimeout(() => {
this.addsunshine = true;
}, 1500);
}
},
sign(v) {
if (this.isFirst) {
this.signComplete = false;
this.flyAnimation = false;
console.log(v, this.signComplete);
if (!v) {
timeout = null;
} else {
timeout = setTimeout(() => {
this.addsunshine = false;
this.isFirst = false;
return;
}
if (v) {
setTimeout(() => {
this.signComplete = true;
this.flyAnimation = true;
console.log('signComplete');
}, 1100);
}
}
......@@ -148,7 +161,8 @@
[this.bgColor, this.fontColor] = [this.fontColor, this.bgColor];
},
signIn: function() {
this.$emit('sign-in', !this.sign);
if (this.sign) return;
this.$emit('sign-in', true);
},
showAnimation: function() {
this.addGold = !this.addGold;
......
src/components/custom/videolist.wpy
View file @ c0bff6a0
......@@ -84,14 +84,14 @@
</video> < !-->
<view class="rightcont">
<view class="info">奖品库存: 1/8</view>
<view class="info">中奖概率: {{item.id}}/3000</view>
<view class="info">中奖概率: {{userAccount}}/3000</view>
<view class="progress">
<view class="text">{{progress}}%</view>
<view class="orange" style="{{progressStyle}}"></view>
</view>
</view>
<!-- <video-loading v-if="item.time === 0"/> -->
<image class="images" :src="item.url" mode="widthFix"></image>
<image class="images" :src="item.photoUrl" mode="widthFix"></image>
</view>
</swiper-item>
</swiper>
......@@ -116,6 +116,10 @@
total: {
type: Number,
value: 0
},
userAccount: {
type: Number,
value: 0
}
},
data: {
......
src/pages/index.wpy
View file @ c0bff6a0
......@@ -170,14 +170,14 @@
<view class="video-wrapper">
<view id="myvideo">
<van-notify id="van-notify" />
<video-list :videoList.sync="videoList" :total="total" bindchange="changeVideo">
<video-list :videoList.sync="videoList" :userAccount="mainInfo && mainInfo.account && mainInfo.account.quantity || 0" :total="total" bindchange="changeVideo">
</video-list>
</view>
<view class="userInfo" style="{{userImgStyle}}" @tap="showMenu(!showMenus)">
<image src="{{userInfo.avatarUrl}}" mode="cover" class="userimage"></image>
<image src="{{userInfo.avatarUrl || '/static/images/user@2x.png'}}" mode="cover" class="userimage"></image>
</view>
<view>
<video-gold type="gold" :des="goldNum" :gold="sign"></video-gold>
<video-gold type="gold" :des="mainInfo && mainInfo.account && mainInfo.account.quantity || 0" :gold="sign"></video-gold>
<video-sign type="sign" des="签到" :sign="sign" @sign-in="signIn"></video-sign>
<video-lottery type="lottery" des="抽奖" @tap="getAwards"></video-lottery>
<video-share type="share" des="分享"></video-share>
......@@ -230,9 +230,9 @@
</view>
</view>
<network v-if="isConnected === false"></network>
<open-animation :isWin="true"></open-animation>
<open-animation v-if="showAwardsModal" :joinRecord="mainInfo && mainInfo.joinRecord"></open-animation>
<shared-popup v-if="showShareModal" :inviteinfo="mainInfo && mainInfo.inviteRecord" @getSharedGold="getSharedGold"></shared-popup>
<popup @showMenu="showMenu" :showMenus="showMenus"></popup>
<!-- <shared-popup></shared-popup> -->
</view>
</template>
......@@ -244,6 +244,7 @@
import { mapState, mapActions } from '@wepy/x';
import wepy from '@wepy/core';
import Notify from '../components/vant/notify/notify';
import { register, getUserInfo, addGold, getPrizeList } from '../common/api.js';
wepy.page({
store,
hooks: {
......@@ -269,7 +270,12 @@
goldStyle: '',
goldNum: 50000,
awards: false,
showMenus: false
showMenus: false,
loading: false,
inviter: '',
mainInfo: null,
showShareModal: false,
showAwardsModal: false
},
computed: {
......@@ -397,10 +403,20 @@
// console.log("手势未触发=====");
}
},
getUserInfo (e) {
async getUserInfo (e) {
if (e.$wx.detail.userInfo) {
console.log('userInfo', e.$wx.detail.userInfo);
this.setUserInfo(e.$wx.detail.userInfo);
await this.getMainInfo();
this.authmodal = false;
if (wx.getStorageSync('isRegister') === false) {
const userInfo = {
...e.$wx.detail.userInfo,
openid: wx.getStorageSync('openId'),
inviter: this.inviter
};
await register(userInfo);
}
}
},
changeVideo(e) {
......@@ -441,7 +457,7 @@
}, 500);
}
},
signIn: function(v) {
signIn: function() {
let that = this;
const tmplIds = [
'xbA7XopO2j0V0Ne0F61UzSxoyfKrf92GQk6Z4pQvnd4',
......@@ -459,12 +475,12 @@
if (res.errMsg === 'requestSubscribeMessage:ok') {
const rs = tmplIds.some(v => res[v] === 'accept');
if (rs) {
that.sign = v;
if (!that.sign) {
that.showAnimation = false;
timeout = null;
timeout1 = null;
} else {
that.sign = true;
// if (!that.sign) {
// that.showAnimation = false;
// timeout = null;
// timeout1 = null;
// } else {
const innerAudioContext = wx.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.src = '/static/audio/supermarie.mp3';
......@@ -475,16 +491,17 @@
console.log(res.errMsg);
console.log(res.errCode);
});
timeout = setTimeout(() => {
that.showAnimation = that.sign;
timeout1 = setTimeout(() => {
const num = [1, 2, 4, 501, 2501, 5001];
that.goldNum = 1;
}, 600);
}, 1100);
}
// setTimeout(() => {
// that.showAnimation = that.sign;
// setTimeout(() => {
// const num = [1, 2, 4, 501, 2501, 5001];
// that.goldNum = 1;
// }, 600);
// }, 1100);
// }
} else {
Notify({ backgroundColor: '#ff976a', text: '签到必须同意推送授权', safeAreaInsetTop: true });
Notify({message: '请先勾选协议!', background: '#FF5D15', safeAreaInsetTop: true });
// Notify({ backgroundColor: '#ff976a', text: '签到必须同意推送授权', safeAreaInsetTop: true });
}
}
},
......@@ -523,10 +540,28 @@
showMenu: function(v) {
console.log(v);
this.showMenus = v;
},
getSharedGold: async function(v) {
this.showShareModal = false;
await addGold(v);
this.mainInfo.account.quantity += v.quantity;
setTimeout(() => {
if (this.mainInfo.joinRecord && this.mainInfo.joinRecord.id) {
this.showAwardsModal = true;
}
}, 1000);
},
getMainInfo: async function() {
this.mainInfo = await getUserInfo(wx.getStorageSync('openId'));
if (this.mainInfo.inviteRecord && this.mainInfo.inviteRecord.length) {
this.showShareModal = true;
} else if (this.mainInfo.joinRecord && this.mainInfo.joinRecord.id) {
this.showAwardsModal = true;
}
}
},
created () {
async created () {
let self = this;
let statusHeight = this.$app.$options.globalData.statusBarHeight || '';
statusHeight && (this.userImgStyle = 'top:' + statusHeight + 'px');
......@@ -562,15 +597,13 @@
'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2944016076,351466175&fm=26&gp=0.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590151520979&di=beba310e6bc314f7dd7ede841d068f68&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201610%2F05%2F20161005092600_jCmSx.thumb.700_0.jpeg'
];
this.videoList = urls.map((url, index) => ({ id: index + 1, url, type: 'image' }));
this.videoList = await getPrizeList();
// this.videoList = urls.map((url, index) => ({ id: index + 1, url, type: 'image' }));
},
onLoad (options) {
async onLoad (options) {
let that = this;
if (options.openid) {
Dialog.alert({
title: 'openidShared',
message: options.openid
});
this.inviter = options.openid;
}
this.adlist = [
{imgsrc: '/static/images/test1.jpg', text: '小明刚刚参与了抽奖'},
......@@ -584,33 +617,44 @@
];
// console.log(this.$app.$options.globalData.info,111)
// 如果已经存在store里就不用再获取用户信息了
if (this.userInfo) return;
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
if (res.userInfo) {
that.setUserInfo(res.userInfo);
// that.userInfo = res.userInfo;
}
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (that.userInfoReadyCallback) {
that.userInfoReadyCallback(res => {
that.setUserInfo(res.userInfo || {});
// that.userInfo = res.userInfo||{};
});
}
}
});
console.log('userInfo', this.userInfo);
if (!this.userInfo) {
const setting = await wepy.wx.getSetting();
if (setting.authSetting['scope.userInfo']) {
const { userInfo } = wepy.wx.getUserInfo();
this.setUserInfo(userInfo);
this.getMainInfo();
} else {
that.authmodal = true;
}
}
});
this.authmodal = true;
}
}
// if (this.userInfo) return;
// wx.getSetting({
// success: res => {
// if (res.authSetting['scope.userInfo']) {
// // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
// wx.getUserInfo({
// success: res => {
// // 可以将 res 发送给后台解码出 unionId
// if (res.userInfo) {
// that.setUserInfo(res.userInfo);
// // that.userInfo = res.userInfo;
// }
// // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// // 所以此处加入 callback 以防止这种情况
// if (that.userInfoReadyCallback) {
// that.userInfoReadyCallback(res => {
// that.setUserInfo(res.userInfo || {});
// // that.userInfo = res.userInfo||{};
// });
// }
// }
// });
// } else {
// that.authmodal = true;
// }
// }
// });
},
onShow() {
// 从其他小程序回来可以在当前生命周期检测到,但是这个方法，自己的小程序页面返回也会进入
......@@ -633,7 +677,8 @@
'open-animation': '~@/components/custom/openAnimation',
'popup': '~@/components/custom/popup',
'van-notify': '~@/components/vant/notify/index',
'shared-popup': '~@/components/custom/sharedPopup'
'shared-popup': '~@/components/custom/sharedPopup',
'video-loading': '~@/components/custom/loading'
},
navigationStyle: "custom",
"navigateToMiniProgramAppIdList":[
......
src/store/index.js
View file @ c0bff6a0
......@@ -2,9 +2,7 @@ import Vuex from '@wepy/x';
export default new Vuex.Store({
state: {
userInfo: {
avatarUrl: '/static/images/user@2x.png'
},
userInfo: '',
isConnected: true
},
mutations: {
......
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