Skip to content

G
get-up-early
Commit 1ff8f589 by baihong
Options

网络请求

parent 0e4d3a3f
Showing with 143 additions and 22 deletions
common/http.interceptor.js
......@@ -2,18 +2,18 @@
// 同时，我们也可以在此使用getApp().globalData，如果你把token放在getApp().globalData的话，也是可以使用的
const install = (Vue, vm) => {
Vue.prototype.$u.http.setConfig({
baseUrl: 'https://api.youzixy.com',
baseUrl: 'https://api.sign.dankal.cn/v1',
// 如果将此值设置为true，拦截回调中将会返回服务端返回的所有数据response，而不是response.data
// 设置为true后，就需要在this.$u.http.interceptor.response进行多一次的判断，请打印查看具体值
// originalData: true,
// 设置自定义头部content-type
// header: {
// 'content-type': 'xxx'
// }
header: {
'content-type': 'application/json'
}
});
// 请求拦截，配置Token等参数
Vue.prototype.$u.http.interceptor.request = (config) => {
config.header.Token = 'xxxxxx';
config.header.language = 'cn';
// 方式一，存放在vuex的token，假设使用了uView封装的vuex方式，见：https://uviewui.com/components/globalVariable.html
// config.header.token = vm.token;
......@@ -34,10 +34,11 @@ const install = (Vue, vm) => {
Vue.prototype.$u.http.interceptor.response = (res) => {
// 如果把originalData设置为了true，这里得到将会是服务器返回的所有的原始数据
// 判断可能变成了res.statueCode，或者res.data.code之类的，请打印查看结果
if(res.code == 200) {
// 如果把originalData设置为了true，这里return回什么，this.$u.post的then回调中就会得到什么
return res.data;
} else return false;
return res
// if(res.code == 200) {
// // 如果把originalData设置为了true，这里return回什么，this.$u.post的then回调中就会得到什么
// return res.data;
// } else return false;
}
}
......
components/countdown-timer/countdown-timer.vue 0 → 100644
<template>
<view><slot :time="time" :remain="timeData.remain" :day="timeData.day" :hour="timeData.hour" :minute="timeData.minute" :second="timeData.second" /></view>
</template>
<script>
export default {
props: {
// 倒计时时长（单位：毫秒）
time: {
type: Number,
default: 0
},
// 是否自动
'autoStart': {
type: Boolean,
default: false
}
},
data() {
return {
timer: null,
timeData: {
remain: 0,
day: 0,
hour: 0,
minute: 0,
second: 0
}
};
},
watch: {
time() {
this.reset()
}
},
methods: {
// 设置timeData
updateTimeData() {
let t = this.timeData.remain;
this.timeData.day = Math.floor(t / 1000 / 60 / 60 / 24);
this.timeData.hour = Math.floor((t / 1000 / 60 / 60) % 24);
this.timeData.minute = Math.floor((t / 1000 / 60) % 60);
this.timeData.second = Math.floor((t / 1000) % 60);
},
// 开启倒计时
startTimer() {
if (this.timer) {
clearInterval(this.timer);
}
if(this.timeData.remain < 1000) {
return
}
this.timer = setInterval(() => {
this.timeData.remain -= 1000;
this.updateTimeData()
if (this.timeData.remain < 1000) {
this.pause()
this.$emit('finish');
}
}, 1000);
},
// 重置倒计时
reset() {
this.timeData.remain = this.time;
this.updateTimeData();
if(this.autoStart) {
this.start()
}
},
// 暂停倒计时
pause() {
if(this.timer) {
clearInterval(this.timer);
this.timer = null
}
},
// 开始倒计时
start() {
if(this.timer) {
return
}
this.startTimer();
}
},
mounted() {
this.reset();
},
beforeDestroy() {
this.pause()
}
};
</script>
main.js
......@@ -11,4 +11,8 @@ App.mpType = 'app'
const app = new Vue({
...App
})
// http拦截器，此为需要加入的内容，如果不是写在common目录，请自行修改引入路径
import httpInterceptor from '@/common/http.interceptor.js'
// 这里需要写在最后，是为了等Vue创建对象完成，引入"app"对象(也即页面的"this"实例)
Vue.use(httpInterceptor, app)
app.$mount()
pages/home/home.vue
......@@ -8,7 +8,7 @@
</view>
<view class="header-main">
<view class="header-left">
<text>26888</text>
<text>{{result.expense_amount}}</text>
<text>明天早起打开可瓜分</text>
<text>(真我币)</text>
</view>
......@@ -31,20 +31,20 @@
<image src="../../static/imgs/ic_sign_1@2x.png" mode=""></image>
<view class="text">
<text>参加人数</text>
<text>1000</text>
<text>{{result.apply_num}}</text>
</view>
</view>
<view class="item">
<image style="width: 44rpx;height: 47rpx;" src="../../static/imgs/ic_sign_2@2x.png" mode=""></image>
<view class="text">
<text>上次人均瓜分</text>
<text>1000</text>
<text>{{result.last_average_expense_amount}}</text>
</view>
</view>
</view>
<view class="time-box">
<view class="time">
<text>9:00-22:00</text>
<text>{{result.config_vo&&result.config_vo.break_time}}</text>
<text>sing up</text>
</view>
<view class="line-box">
......@@ -52,21 +52,32 @@
<view class="line"></view>
</view>
<view class="time">
<text>9:00-22:00</text>
<text>{{result.config_vo&&result.config_vo.clock_time}}</text>
<text>clock in</text>
</view>
<view class="line-box">
<text>NEXT DAY</text>
<view class="line"></view>
<text></text>
<view style="margin-top: 25px;" class="line"></view>
</view>
<view class="time">
<text>9:00-22:00</text>
<text>{{result.config_vo&&result.config_vo.close_time}}</text>
<text>settlement</text>
</view>
</view>
<view class="btn">
<view class="btn" @click="result.my_clock_statu===0">
支付100(真我币)，参加活动
</view>
<view class="btn" @click="result.my_clock_statu===0">
早起打卡倒计时：
<countdown-timer :time="10000" :autoStart='true' @finish='finish'>
<template v-slot="{day, hour, minute, second}">
<view>{{hour}}:{{minute}}:{{second}}</view>
</template>
</countdown-timer>
</view>
<view class="btn" @click="result.my_clock_statu===2">
已打卡
</view>
<view class="gz" @click="show=true">
<text>规则</text>
<u-icon name="arrow-right" color="#999999" size="18"></u-icon>
......@@ -166,11 +177,12 @@
},
data() {
return {
result:{},
showPay: false,
showLottery: false,
show: false,
showUpload: false,
showSuccess: true,
showSuccess: false,
src: 'https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF',
number: 0,
};
......@@ -179,9 +191,14 @@
},
onLoad(option) {
this.$u.get('/mini/activityClocks/today', {}).then(res => {
this.result = res;
})
},
methods: {
finish(){
console.log(111)
},
goMyRecord() {
uni.navigateTo({
url: '../myRecord/myRecord'
......@@ -517,7 +534,7 @@
.pay-box {
width: 690rpx;
box-sizing: border-box;
padding: 40rpx 30rpx 40rpx 55rpx;
padding: 40rpx 30rpx 40rpx 30rpx;
background: #FFFFFF;
border-radius: 7rpx;
margin: -88rpx auto 0 auto;
......@@ -533,7 +550,7 @@
.time {
display: flex;
flex-direction: column;
min-width: 120rpx;
min-width: 132rpx;
align-items: center;
}
......
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