Commit 6bdb8baf authored by 慕轻风's avatar 慕轻风

wnf

parent 123367d9
{ {
"pages": [ "pages": [
"pages/index/index", "pages/index/index",
"pages/testPage/testPage",
"pages/tbccDemo/tbccDemo", "pages/tbccDemo/tbccDemo",
"pages/myprize/myprize", "pages/myprize/myprize",
"pages/goodsPage/goodsPage" "pages/collectGoods/collectGoods",
"pages/browseGoods/browseGoods",
"pages/orderGoods/orderGoods",
"pages/endPage/endPage"
], ],
"window": { "window": {
"defaultTitle": "C端模板" "defaultTitle": "C端模板"
......
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
height: 162rpx; height: 162rpx;
right: 0; right: 0;
top: 600rpx; top: 600rpx;
z-index: 20;
} }
.countdown-box-clock { .countdown-box-clock {
position: absolute; position: absolute;
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<view a:if="{{task.type == '01'}}" <view a:if="{{task.type == '01'}}"
style="{{{'background':`url(${task.image.title}) no-repeat`,'backgroundSize': '100% 100%'}}}" class="goods-modal-container__title"></view> style="{{{'background':`url(${task.image.title}) no-repeat`,'backgroundSize': '100% 100%'}}}" class="goods-modal-container__title"></view>
<view a:else class="goods-modal-container__banner" style="{{{'background':`url(${task.image.banner}) no-repeat`,'backgroundSize': '100% 100%','height':task.bannerHeight+'rpx'}}}"></view> <view a:else class="goods-modal-container__banner" style="{{{'background':`url(${task.image.banner}) no-repeat`,'backgroundSize': '100% 100%','height':task.bannerHeight+'rpx'}}}"></view>
<view class="goods-modal-container__content" style="{{{'top':task.type == '02'?task.bannerHeight+'rpx':'149rpx'}}}"> <view class="goods-modal-container__content" style="{{{'top':task.type == '02'?task.bannerHeight+'rpx':'209rpx'}}}">
<scroll-view scroll-y="{{true}}" class="goods-modal-container__scroll"> <scroll-view scroll-y="{{true}}" class="goods-modal-container__scroll">
<view class="goods-modal-container__content-list"> <view class="goods-modal-container__content-list">
<view class="goods-modal-container__content-item" a:for="{{goodsList}}" a:for-item="item"> <view class="goods-modal-container__content-item" a:for="{{goodsList}}" a:for-item="item">
...@@ -24,7 +24,4 @@ ...@@ -24,7 +24,4 @@
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
<!-- 倒计时 -->
<count-down-modal a:if="{{isShowCountdown && task.taskType == 'browseGoods'}}" percent="{{percent}}" hasPercent="{{(10 - usePercent)}}" styleType="{{'01'}}" />
</view> </view>
\ No newline at end of file
...@@ -3,22 +3,17 @@ ...@@ -3,22 +3,17 @@
*/ */
const app = getApp(); const app = getApp();
const { tbcc } = app; const { tbcc } = app;
const { openDetail, collectGoods, checkGoodsCollectedStatus } = tbcc.tb; const { openDetail, collectGoods, checkGoodsCollectedStatus, commonToast } = tbcc.tb;
Component({ Component({
mixins: [], mixins: [],
timer: null,
data: { data: {
usePercent: 0, // 已进行的进度条
percent: 0,// 进度条
isShowCountdown: true, // 是否显示倒计时
isFlag: 1
}, },
props: { props: {
isBackFlag: 0, isBackFlag: 0,
goodsList: [1,2,3], goodsList: [1,2,3],
task: { task: {
itemId: '617724147979,617724563528,617300295119,614139753189', itemId: '617724147979,617724563528,617300295119',
taskType: 'browseGoods', taskType: 'browseGoods',
type: '02', type: '02',
bannerHeight: 430, bannerHeight: 430,
...@@ -32,40 +27,26 @@ Component({ ...@@ -32,40 +27,26 @@ Component({
}, },
color: '#181818' color: '#181818'
}, },
onCompleteTask: () => {} onCompleteTask: () => {},
onOpenDetail: () => {}
}, },
didMount() { didMount() {
const { taskType } = this.props.task
this.setData({ isFlag: this.props.isBackFlag })
console.log(this.props.goodsList)
if(taskType == 'browseGoods') {
this.browseGoodsTimes()
}
}, },
didUpdate(prevProps,prevData) { didUpdate(prevProps,prevData) {
if(prevData.isFlag && prevProps.isBackFlag != prevData.isFlag) {
console.log(3)
if(!this.timer) {
this.setData({ usePercent: this.data.percent })
this.browseGoodsTimes()
console.log(10 - this.usePercent)
}
}
}, },
didUnmount() { didUnmount() {
clearTimeout(this.timer)
}, },
methods: { methods: {
/** /**
* 跳转商品详情页 * 跳转商品详情页
*/ */
async goToGoodsDetail(e) { async goToGoodsDetail(e) {
clearInterval(this.timer) const { taskType } = this.props.task
this.setData({
percent: this.data.usePercent,
})
const { itemId } = e.target.dataset.item const { itemId } = e.target.dataset.item
if(taskType == 'browseGoods') {
this.props.onOpenDetail(itemId)
}
await openDetail(String(itemId)) await openDetail(String(itemId))
}, },
/** /**
...@@ -74,29 +55,15 @@ Component({ ...@@ -74,29 +55,15 @@ Component({
async goToCollectGoods(e) { async goToCollectGoods(e) {
const { itemId, collected } = e.target.dataset.item const { itemId, collected } = e.target.dataset.item
const { taskType } = this.props.task const { taskType } = this.props.task
if(collected) return; if(collected) {
let result = await collectGoods(itemId) commonToast('您已收藏过该商品了')
if(result) { return;
this.props.onCompleteTask(taskType, itemId)
} }
}, let result = await collectGoods(+itemId)
/**
* 浏览商品倒计时
*/
browseGoodsTimes() {
const { taskType } = this.props.task
this.timer = setInterval(() => { if(result) {
this.setData({ this.props.onCompleteTask(taskType, itemId)
usePercent: this.data.usePercent + 1
}, () => {
if (this.data.usePercent >= 10) {
console.log(this.data.usePercent)
this.props.onCompleteTask(taskType)
clearInterval(this.timer)
} }
})
},1000)
} }
}, },
}); });
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
</view> </view>
</view> </view>
</view> </view>
<view a:if="{{myPrizeList && myPrizeList.length === 0}}" class="my-prize-empty">暂无奖品</view> <view a:if="{{myPrizeList && myPrizeList.length === 0}}" class="my-prize-empty">{{task.blankTxt}}</view>
</view> </view>
<logistics-modal a:if="{{isLogistic}}" prizeItem="{{currentPrize}}" onCloseModal="closeLogisticModal" task="{{task.logisticsImage}}"/> <logistics-modal a:if="{{isLogistic}}" prizeItem="{{currentPrize}}" onCloseModal="closeLogisticModal" task="{{task.logisticsImage}}"/>
</view> </view>
\ No newline at end of file
<view class="goods-page-container">
<goods-modal
isBackFlag="{{isBackFlag}}"
goodsList="{{goodsList}}"
task="{{task}}"
onCompleteTask="onCompleteTask" />
<!-- 倒计时 -->
<count-down-modal a:if="{{isShowCountdown}}" percent="{{percent}}" hasPercent="{{(10 - usePercent)}}" styleType="{{'01'}}" />
</view>
\ No newline at end of file
/**
* 任务类型(taskType): collectGoods 、 orderGoods 、 browseGoods 、exchangeCredits
* task: {
* itemId: //商品ID
* taskType: //任务类型
* type: //头部样式(02——banner,01——标题)
* image: {//图片
* bg: //集合页背景
* banner: //头部banner
* title: //头部title
* collect: //商品以收藏
* no_collect: //商品未收藏
* }
* color: //商品名称:文字颜色
* }
*/
const app = getApp();
const { tbcc } = app;
const { commonToast } = tbcc.tb;
import API from '../../api';
Page({
completeType: '01',//01:浏览完成 02点击任意商品完成
timer: null,
data: {
usePercent: 0, // 已进行的进度条
percent: 0,// 进度条
isShowCountdown: true, // 是否显示倒计时
query: {},
task: {},
goodsList: []
},
onLoad(query) {
this.query = query || {}
this.init()
},
onShow() {
//重新回到页面开启倒计时
if(!this.timer && this.completeType == '01') {
this.setData({ usePercent: this.data.percent })
this.browseGoodsTimes()
console.log(10 - this.usePercent)
}
},
init() {
this.setData({
task: {
taskType: 'browseGoods',
type: '01',
image: {
bg: '//yun.duiba.com.cn/taobaomini/clientCTest/goods_bg@2x.png',
banner: '//yun.duiba.com.cn/taobaomini/clientCTest/goods_banner@2x.png',
title: '//yun.duiba.com.cn/taobaomini/clientCTest/goods_title@2x.png',
collect: '//yun.duiba.com.cn/taobaomini/clientCTest/goods_collection@2x.png',
no_collect: '//yun.duiba.com.cn/taobaomini/clientCTest/collection_no_collect@2x.png',
img: '//yun.duiba.com.cn/taobaomini/clientCTest/goods_img@2x.png',
},
color: '#181818'
}
})
this.initPage()
},
async initPage() {
const { activityId } = app
const { itemIds } = this.query
const { success, data } = await API.getItemListByItemIds({ activityId, itemIds }).catch(res => {
res && commonToast(res)
}) || {}
if(success) {
this.setData({ goodsList: data || [] })
}
},
//任务完成
async onCompleteTask(itemId) {
const { activityId } = app
let browsResult = await API.doBrowseGoodsTask({ activityId, itemId }).catch(res => {
res && commonToast(res)
}) || {}
if(browsResult.success) {
commonToast('任务完成,请到任务中心查看奖励')
}
},
/**
* 跳转商品详情页
*/
onOpenDetail(itemId = '') {
if(this.completeType == '01') {
this.setData({
percent: this.data.usePercent,
}, () => {
clearInterval(this.timer)
})
}
else {
this.onCompleteTask(itemId)
}
},
/**
* 浏览商品倒计时
*/
browseGoodsTimes() {
this.timer = setInterval(() => {
this.setData({
usePercent: this.data.usePercent + 1
}, () => {
if (this.data.usePercent >= 10) {
this.onCompleteTask()
clearInterval(this.timer)
}
})
},1000)
}
});
{
"usingComponents": {
"goods-modal": "/components/goodsModal/goodsModal",
"count-down-modal": "/components/countDownModal/countDownModal"
}
}
\ No newline at end of file
<view class="goodsPage"> <view class="goodsPage">
<goods-modal <goods-modal
isBackFlag="{{isBackFlag}}"
goodsList="{{goodsList}}" goodsList="{{goodsList}}"
task="{{task}}" task="{{task}}"
onCompleteTask="onCompleteTask" /> onCompleteTask="onCompleteTask" />
......
/** /**
* 任务类型(taskType):collectGoods、 orderGoods 、browseGoods、exchangeCredits * 任务类型(taskType):collectGoods、 orderGoods 、 browseGoods 、exchangeCredits
* task: { * task: {
* itemId: //商品ID * itemId: //商品ID
* taskType: //任务类型 * taskType: //任务类型
...@@ -16,14 +16,13 @@ ...@@ -16,14 +16,13 @@
*/ */
const app = getApp(); const app = getApp();
const { tbcc } = app; const { tbcc } = app;
const { openDetail, collectGoods, checkGoodsCollectedStatus, commonToast } = tbcc.tb; const { commonToast } = tbcc.tb;
import API from '../../api'; import API from '../../api';
Page({ Page({
data: { data: {
query: {}, query: {},
task: {}, task: {},
isBackFlag: 1,
goodsList: [] goodsList: []
}, },
onLoad(query) { onLoad(query) {
...@@ -31,15 +30,11 @@ Page({ ...@@ -31,15 +30,11 @@ Page({
this.init() this.init()
}, },
onShow() { onShow() {
//重新回到页面开启倒计时
this.setData({ isBackFlag: Math.floor((Math.random() * 100)) == this.data.isBackFlag ? 101 : Math.floor((Math.random() * 100)) })
}, },
init() { init() {
const { itemId, taskType } = this.query
this.setData({ this.setData({
task: { task: {
itemId, taskType: 'collectGoods',
taskType,
type: '01', type: '01',
image: { image: {
bg: '//yun.duiba.com.cn/taobaomini/clientCTest/goods_bg@2x.png', bg: '//yun.duiba.com.cn/taobaomini/clientCTest/goods_bg@2x.png',
...@@ -56,38 +51,25 @@ Page({ ...@@ -56,38 +51,25 @@ Page({
}, },
async initPage() { async initPage() {
const { activityId } = app const { activityId } = app
const { taskType, itemIds } = this.query const { itemIds } = this.query
let handel = taskType == 'collectGoods' ? 'getCollectItemList' : 'getItemListByItemIds' const { success, data } = await API.getCollectGoodsList({ activityId, itemIds }).catch(res => {
const { success, data } = await API[handel]({ activityId, itemIds }).catch(res => {
res && commonToast(res) res && commonToast(res)
}) || {} }) || {}
if(success) { if(!success || success) {
this.setData({ goodsList: data || [] }) this.setData({ goodsList: data || [] })
} }
}, },
//任务完成 //任务完成 616444374083
async onCompleteTask(taskType,itemId) { async onCompleteTask(taskType,itemId) {
console.log(taskType,itemId) console.log(taskType,itemId)
const { activityId } = app const { activityId } = app
switch(taskType) {
case 'collectGoods':
let { success, data } = await API.doCollectGoodsTask({ activityId, itemId }).catch(res => { let { success, data } = await API.doCollectGoodsTask({ activityId, itemId }).catch(res => {
res && commonToast(res) res && commonToast(res)
}) || {} }) || {}
if(success) { if(success) {
this.initPage() this.initPage()
} }
break;
case 'browseGoods':
let browsResult = await API.doBrowseGoodsTask({ activityId, itemId }).catch(res => {
res && commonToast(res)
}) || {}
console.log(browsResult)
if(browsResult.success) {
commonToast('任务完成,请到任务中心查看奖励')
}
break;
}
} }
}); });
<view class="end-page-container">
<end-modal data="{{endData}}" />
</view>
\ No newline at end of file
Page({
data: {
endData: {
image: {
bg: '//yun.dui88.com/taobaomini/clientCTest/end_bg@2x.png',
end_icon: '//yun.dui88.com/taobaomini/clientCTest/end_icon@2x.png',
},
text: '活动未开始'
}
},
onLoad() {},
});
{
"usingComponents": {
"end-modal": "/components/endModal/endModal"
}
}
\ No newline at end of file
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<view class="index-page__tips">AM接口只支持PC端预览,手机淘宝预览需要使用云函数模式</view> <view class="index-page__tips">AM接口只支持PC端预览,手机淘宝预览需要使用云函数模式</view>
<view class="index-start-btn" onTap="doStart">开始</view> <view class="index-start-btn" onTap="doStart">开始</view>
<navigator open-type="navigate" url="/pages/tbccDemo/tbccDemo" class="index-tbcc-btn">tbcc demo</navigator> <navigator open-type="navigate" url="/pages/tbccDemo/tbccDemo" class="index-tbcc-btn">tbcc demo</navigator>
<navigator style="{{{'marginTop':'16rpx'}}}" open-type="navigate" url="/pages/goodsPage/goodsPage?itemId=617724147979,617724563528&taskType=browseGoods" class="index-tbcc-btn">商品集合页面</navigator> <navigator style="{{{'marginTop':'16rpx'}}}" open-type="navigate" url="/pages/goodsPage/goodsPage?itemId=617724147979,617724563528" class="index-tbcc-btn">商品集合页面</navigator>
</view> </view>
......
...@@ -18,6 +18,7 @@ Page({ ...@@ -18,6 +18,7 @@ Page({
task: { task: {
image: { image: {
bg: '//yun.duiba.com.cn/aurora/assets/e13fab3165d3a6bb4cbe8827e8f0fd41084b0091.png', //背景图 bg: '//yun.duiba.com.cn/aurora/assets/e13fab3165d3a6bb4cbe8827e8f0fd41084b0091.png', //背景图
title: '//yun.dui88.com/duiba-components-c-myprizeprize_title.png',//标题
copyIcon: '//yun.dui88.com/duiba-components-c-myprizemyprize_copy_code.png', //复制 copyIcon: '//yun.dui88.com/duiba-components-c-myprizemyprize_copy_code.png', //复制
addressBth: '//yun.dui88.com/duiba-components-c-myprizeto_address.png', //填写地址(实物奖品) addressBth: '//yun.dui88.com/duiba-components-c-myprizeto_address.png', //填写地址(实物奖品)
getBth: '//yun.dui88.com/duiba-components-c-myprizeget_now.png', //立即领取(除实物奖品外) getBth: '//yun.dui88.com/duiba-components-c-myprizeget_now.png', //立即领取(除实物奖品外)
...@@ -32,6 +33,7 @@ Page({ ...@@ -32,6 +33,7 @@ Page({
notShipped: '//yun.dui88.com/duiba-components-c-myprizenotshipped.png', // 待发货物流弹窗 notShipped: '//yun.dui88.com/duiba-components-c-myprizenotshipped.png', // 待发货物流弹窗
copyIcon: '//yun.dui88.com/duiba-components-c-myprizemyprize_copy_code.png', //复制 copyIcon: '//yun.dui88.com/duiba-components-c-myprizemyprize_copy_code.png', //复制
}, },
blankTxt: '暂无奖品',
btnStyle: { // 按钮自定义样式 btnStyle: { // 按钮自定义样式
width: '150rpx', width: '150rpx',
height: '41rpx', height: '41rpx',
......
<view class="goodsPage">
<goods-modal
goodsList="{{goodsList}}"
task="{{task}}"
onCompleteTask="onCompleteTask" />
</view>
\ No newline at end of file
/**
* 任务类型(taskType): collectGoods 、 orderGoods 、 browseGoods 、exchangeCredits
* task: {
* itemId: //商品ID
* taskType: //任务类型
* type: //头部样式(02——banner,01——标题)
* image: {//图片
* bg: //集合页背景
* banner: //头部banner
* title: //头部title
* collect: //商品以收藏
* no_collect: //商品未收藏
* }
* color: //商品名称:文字颜色
* }
*/
const app = getApp();
const { tbcc } = app;
const { commonToast } = tbcc.tb;
import API from '../../api';
Page({
data: {
query: {},
task: {},
goodsList: []
},
onLoad(query) {
this.query = query || {}
this.init()
},
onShow() {
},
init() {
this.setData({
task: {
taskType: 'orderGoods',
type: '01',
image: {
bg: '//yun.duiba.com.cn/taobaomini/clientCTest/goods_bg@2x.png',
banner: '//yun.duiba.com.cn/taobaomini/clientCTest/goods_banner@2x.png',
title: '//yun.duiba.com.cn/taobaomini/clientCTest/goods_title@2x.png',
collect: '//yun.duiba.com.cn/taobaomini/clientCTest/goods_collection@2x.png',
no_collect: '//yun.duiba.com.cn/taobaomini/clientCTest/collection_no_collect@2x.png',
img: '//yun.duiba.com.cn/taobaomini/clientCTest/goods_img@2x.png',
},
color: '#181818'
}
})
this.initPage()
},
async initPage() {
const { activityId } = app
const { itemIds } = this.query
const { success, data } = await API.getItemListByItemIds({ activityId, itemIds }).catch(res => {
res && commonToast(res)
}) || {}
if(success) {
this.setData({ goodsList: data || [] })
}
},
});
{
"usingComponents": {
"goods-modal": "/components/goodsModal/goodsModal"
}
}
\ No newline at end of file
.test-page {
text-align: center;
padding: 100rpx 0;
}
\ No newline at end of file
<view class="test-page">
测试跳转页面
</view>
\ No newline at end of file
...@@ -6,7 +6,7 @@ const capi = { ...@@ -6,7 +6,7 @@ const capi = {
receiveObjectPrize: 'receiveObjectPrize', receiveObjectPrize: 'receiveObjectPrize',
receiveEnamePrize: 'receiveEnamePrize', receiveEnamePrize: 'receiveEnamePrize',
getItemListByItemIds: 'getItemListByItemIds', getItemListByItemIds: 'getItemListByItemIds',
getCollectItemList: 'getCollectItemList', getCollectGoodsList: 'getCollectGoodsList',
doCollectGoodsTask: 'doCollectGoodsTask', doCollectGoodsTask: 'doCollectGoodsTask',
doBrowseGoodsTask: 'doBrowseGoodsTask', doBrowseGoodsTask: 'doBrowseGoodsTask',
doJumpLinkTask: 'doJumpLinkTask', doJumpLinkTask: 'doJumpLinkTask',
......
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