console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
<title>刷单</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>
</head>
<style>
body, #app {background-color: #f7f8fa;width: 100%;height: 100%;}
.page-first, .page-second, .page-third {width:100%;height: 100%;}
.ed6 {color: #ed6a0c;}
.pos-right {right: 1.5rem; position: absolute;}
.cell-titile { margin: 10px;}
.mt-40 {margin-top: 40px;}
.check-card .van-field .van-cell__value { border-bottom: 1px solid #ebedf0;}
.s-header {position: fixed;top:0;width: 100%;z-index: 999;}
.goods-img {color: #323233;padding: 8px 16px; font-size: 12px; background-color: #fff;display: flex;}
.goods-img .goods__thumb {display: flex;}
.goods-img .goods__thumb .goods-image{flex: none;width: 88px;height: 88px;}
.goods-img .goods__content {flex: 1;display: flex;justify-content: center;align-items: center;font-size: 16px;}
.goods-img .goods__content span {width: 260px;}
.s-footer {justify-content: center;align-items: center;flex-direction: column;height: auto;padding: 5px 0;}
.s-footer .prompt{display: flex;}
.s-footer .prompt .prompt__text {color: red; margin: 3px 0 3px 3px;font-size: 14px;}
.s-footer .task__button {width: 90%;height: 40px;line-height: 38px;}
.task-upload {overflow: hidden;}
.task-sub {overflow: hidden;}
.infobox {
display: flex;background-color: #fff;margin: 10px 10px 0 10px;border-bottom: 0px solid #fff;
border-radius: 5px;overflow: hidden;box-shadow: 1px 2px 5px #c1c0c0;
}
.infobox .infobox-l{flex: 0 0 30px;display: flex;text-align: center;
justify-content: center;align-items: center;
border-right: 1px dashed #ebedf0;
margin: 10px 0;
}
.infobox .infobox-r .infobox-r__shop {overflow: hidden; height: 44px;margin: 12px 10px;}
.infobox .infobox-r .infobox-r__shop:nth-child(2) {border-top: 1px dashed #ebedf0;}
.infobox .infobox-r .infobox-r__shop .van-field {float: left;width: 35%;}
.infobox .infobox-r .infobox-r__shop .shop {float: left; line-height: 44px; width:120px;}
.infobox .infobox-r .infobox-r__shop .van-button {float: right;margin: 6px 20px 0 0;}
.infobox .infobox-r{flex: 1;}
</style>
<body>
<div id="app">
<div class="s-header">
<div class="header-timing van-notice-bar" v-if="this.active === 0">
<i class="van-icon van-icon-underway-o van-notice-bar__left-icon"></i>
任务倒计时：
<van-count-down class="ed6" @finish="finish" :time="time"></van-count-down>
<van-button plain type="warning" size="small" class="pos-right">放弃任务</van-button>
</div>
<div class="header-bar" v-else>
<van-nav-bar
title="测试ABC-任务详情"
left-arrow
@click-left="onClickLeft"
/>
</div>
</div>
<div :style="{marginTop: this.active === 0 ? '55px' : '46px'}"></div>
<div class="page-first" v-show="this.active === 0">
<div class="infobox">
<div class="infobox-l">产品</div>
<div class="infobox-r">
<div class="goods-img">
<div class="goods__thumb">
<img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="goods-image">
</div>
<div class="goods__content">
<span class="van-ellipsis">搜索关键词：xxxxxx</span>
</div>
</div>
</div>
</div>
<div class="infobox">
<div class="infobox-l">商品详情</div>
<div class="infobox-r">
<van-cell-group>
<van-cell title="搜索价格区间" value="99-99" ></van-cell>
<van-cell title="搜索标准" value="综合" ></van-cell>
<van-cell title="店铺所在地区" value="广州" ></van-cell>
<van-cell title="收货人数大约" value="200" ></van-cell>
</van-cell-group>
</div>
</div>
<div class="infobox">
<div class="infobox-l">匹配详情</div>
<div class="infobox-r">
<div class="infobox-r__shop">
<van-field v-model="obj.shopName" placeholder="请补充店名" ></van-field>
<span class="shop van-ellipsis">xx旗舰店</span>
<van-button size="small" type="info">匹配</van-button>
</div>
<div class="infobox-r__shop">
<van-field v-model="obj.goodsName" placeholder="请补充商品名" ></van-field>
<span class="shop van-ellipsis">http://xxx.xxxxxxxx.xxxxxxxxxxxxxx</span>
<van-button size="small" type="info">匹配</van-button>
</div>
</div>
</div>
<div class="infobox">
<div class="infobox-l">商家要求</div>
<div class="infobox-r">
<div class="infobox-r-con">
2222
</div>
</div>
</div>
</div>
<div class="page-second" v-show="this.active === 1">
<van-panel title="必须用淘宝会员名" desc="t_12345679_1234">
<div>内容</div>
</van-panel>
</div>
<div class="page-third" v-show="this.active === 2">
<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
测试ABC-任务详情
</van-divider>
444
</div>
<div style="margin-top: 100px;"></div>
<div class="s-footer van-hairline--top-bottom van-tabbar van-tabbar--fixed">
<div style="width: 100%;">
<van-steps :active="active" active-color="#38f">
<van-step>核对商家</van-step>
<van-step>任务操作</van-step>
<van-step>提交订单</van-step>
</van-steps>
</div>
<div class="prompt" v-show="!(this.active === 2) && (this.promptTimer !== 0)">
<van-checkbox v-model="checked" shape="square"></van-checkbox>
<div class="prompt__text">提示：需要正常浏览商品{{promptTimer}}秒,可浏览评价详情页等</div>
</div>
<van-button @click="subNext" class="task__button"
v-show="subBtnVisible"
:color="active !== 2 ? '#1989fa' : '#666'"
size="large">
{{active !== 2 ? '核对成功后进入下一步' : '放弃任务'}}
</van-button>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
time: 60 * 60 * 1000,
subBtnVisible: false,
promptTimer: 0,
setInterTimer: 5,
timerObj: null,
activeNames: ['1'],
obj: {
shopName: '',
goodsName: ''
},
checked: false,
active: 0
},
created() {
this.promptTimer = this.setInterTimer
},
watch: {
checked(val) {
if(val) {
this.timerObj = setInterval(() => {
this.promptTimer--
if(this.promptTimer <= 0){
this.subBtnVisible = true
clearTimeout(this.timerObj)
}
}, 1000);
} else {
clearTimeout(this.timerObj)
}
}
},
methods: {
subNext () {
if(this.active !== 2) {
this.active++
if(this.active !== 2){
this.checked = false
this.subBtnVisible = false
this.promptTimer = this.setInterTimer
}
} else {
console.log(this.obj)
}
},
finish() {
alert('倒计时结束');
},
onClickLeft() {
this.active--
}
}
})
</script>
</body>
</html>
body, #app {background-color: #f7f8fa;width: 100%;height: 100%;}
.page-first, .page-second, .page-third {width:100%;height: 100%;}
.ed6 {color: #ed6a0c;}
.pos-right {right: 1.5rem; position: absolute;}
.cell-titile { margin: 10px;}
.mt-40 {margin-top: 40px;}
.check-card .van-field .van-cell__value { border-bottom: 1px solid #ebedf0;}
.s-header {position: fixed;top:0;width: 100%;z-index: 999;}
.goods-img {color: #323233;padding: 8px 16px; font-size: 12px; background-color: #fff;display: flex;}
.goods-img .goods__thumb {display: flex;}
.goods-img .goods__thumb .goods-image{flex: none;width: 88px;height: 88px;}
.goods-img .goods__content {flex: 1;display: flex;justify-content: center;align-items: center;font-size: 16px;}
.goods-img .goods__content span {width: 260px;}
.s-footer {justify-content: center;align-items: center;flex-direction: column;height: auto;padding: 5px 0;}
.s-footer .prompt{display: flex;}
.s-footer .prompt .prompt__text {color: red; margin: 3px 0 3px 3px;font-size: 14px;}
.s-footer .task__button {width: 90%;height: 40px;line-height: 38px;}
.task-upload {overflow: hidden;}
.task-sub {overflow: hidden;}
.infobox {
display: flex;background-color: #fff;margin: 10px 10px 0 10px;border-bottom: 0px solid #fff;
border-radius: 5px;overflow: hidden;box-shadow: 1px 2px 5px #c1c0c0;
}
.infobox .infobox-l{flex: 0 0 30px;display: flex;text-align: center;
justify-content: center;align-items: center;
border-right: 1px dashed #ebedf0;
margin: 10px 0;
}
.infobox .infobox-r .infobox-r__shop {overflow: hidden; height: 44px;margin: 12px 10px;}
.infobox .infobox-r .infobox-r__shop:nth-child(2) {border-top: 1px dashed #ebedf0;}
.infobox .infobox-r .infobox-r__shop .van-field {float: left;width: 35%;}
.infobox .infobox-r .infobox-r__shop .shop {float: left; line-height: 44px; width:120px;}
.infobox .infobox-r .infobox-r__shop .van-button {float: right;margin: 6px 20px 0 0;}
.infobox .infobox-r{flex: 1;}