Skip to content

N
new_taobao
Commit 22325dd4 authored by Edwise's avatar Edwise 🍷
Browse files
Options

123

parents 9cabd2df 4b4ee7dd
Show whitespace changes
Inline Side-by-side
Showing with 402 additions and 2 deletions
taobao_mini/client/app.json
View file @ 22325dd4
......@@ -5,6 +5,7 @@
"pages/index/index",
"pages/pageshop/pageshop",
"pages/tbccDemo/tbccDemo",
"pages/goodsPage/goodsPage",
"pages/myprize/myprize"
],
"window": {
......
taobao_mini/client/pages/goodsModal/goodsModal.acss 0 → 100755
View file @ 22325dd4
.goods-modal-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
min-height: 100vh;
/* background: url('//yun.dui88.com/taobaomini/clientCTestgoods_bg@2x.png') no-repeat; */
background-size: 750rpx 1624rpx;
overflow: hidden;
z-index: 20;
}
.goods-modal-container__title {
width: 750rpx;
height: 120rpx;
margin: 29rpx 0 11rpx;
}
.goods-modal-container__banner {
width: 750rpx;
height: 400rpx;
margin-bottom: 30rpx;
background: #E1E1E1;
}
.goods-modal-container__content {
position: absolute;
top: 190rpx;
left: 0;
bottom: 0;
padding-top: 41rpx;
padding: 41rpx 25rpx 0;
width: 750rpx;
/* height: inherit; */
}
.goods-modal-container__scroll {
height: 100%;
}
.goods-modal-container__content-list {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.goods-modal-container__content-item {
width: 340rpx;
height: 510rpx;
background: #fff;
margin-bottom: 20rpx;
}
.goods-modal-container__content-item:nth-child(even) {
margin-left: 20rpx;
}
.goods-modal-container__content-item__img {
width: 340rpx;
height: 340rpx;
background: #E1E1E1;
}
.goods-modal-container__content-item__img image {
width: 100%;
height: 100%;
}
.goods-modal-container__content-item__name {
margin: 25rpx 0 31rpx 21rpx;
width:310rpx;
height:60rpx;
font-size:24rpx;
font-family:PingFang SC;
font-weight:400;
color:rgba(24,24,24,1);
line-height:30rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.goods-modal-container__content-item__price {
padding: 0 31rpx 0 24rpx;
display: flex;
justify-content: space-between;
}
.goods-modal-container__content-item__price-num {
font-size:32rpx;
font-family:PingFang SC;
font-weight:600;
color:rgba(255,42,0,1);
}
.goods-modal-container__content-item__price-num text {
font-size: 24rpx;
margin-right: 2rpx;
}
.goods-modal-container__content-item__price-collect {
width: 118rpx;
height: 31rpx;
background-size: 100% 100%;
}
.goods-modal-container__content-item__price-collect image {
width: 100%;
height: 100%;
}
.goods-modal-container__content-item__price-no-collect {
width: 30rpx;
height: 30rpx;
}
.goods-modal-container__content-item__price-no-collect image {
width: 100%;
height: 100%;
}
.goods-modal-timer {
width: 147rpx;
height: 223rpx;
position: absolute;
top: 502rpx;
right: 19rpx;
background: #eee;
}
.goods-modal-timer__clock {
}
\ No newline at end of file
taobao_mini/client/pages/goodsModal/goodsModal.axml 0 → 100755
View file @ 22325dd4
<view class="goods-modal-container" style="{{{'background':`url(${task.image.bg}) no-repeat`}}}">
<view a:if="{{task.type == '01'}}"
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 class="goods-modal-container__content" style="{{{'top':task.type == '02'?task.bannerHeight+'rpx':'149rpx'}}}">
<scroll-view scroll-y="{{true}}" class="goods-modal-container__scroll">
<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__img" data-item="{{item}}" onTap="goToGoodsDetail">
<image mode="scaleToFill" src="{{item.image}}"/>
</view>
<view class="goods-modal-container__content-item__name" style="{{{'color':task.color}}}">{{item.name}}</view>
<view class="goods-modal-container__content-item__price">
<view class="goods-modal-container__content-item__price-num"><text>¥</text>{{item.price}}</view>
<view a:if="{{task.taskType == 'collectGoods'}}"
data-item="{{item}}"
onTap="goToCollectGoods"
class="{{item.collected ? 'goods-modal-container__content-item__price-collect' : 'goods-modal-container__content-item__price-no-collect'}}"
>
<image mode="scaleToFill" src="{{item.collected?task.image.collect:task.image.no_collect}}"/>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
<!-- 倒计时 -->
<count-down-modal a:if="{{isShowCountdown && task.taskType == 'browseGoods'}}" percent="{{percent}}" usePercent="{{usePercent}}" styleType="{{'01'}}" />
</view>
\ No newline at end of file
taobao_mini/client/pages/goodsModal/goodsModal.js 0 → 100755
View file @ 22325dd4
/**
* 任务类型（taskType）:collectGoods、orderGoods、browseGoods、exchangeCredits
*/
const app = getApp();
const { tbcc } = app;
const { openDetail, collectGoods, checkGoodsCollectedStatus } = tbcc.tb;
Component({
mixins: [],
timer: null,
data: {
usePercent: 0, // 已进行的进度条
percent: 0,// 进度条
isShowCountdown: true, // 是否显示倒计时
isFlag: 1
},
props: {
isBackFlag: 0,
goodsList: [1,2,3],
task: {
itemId: '617724147979,617724563528,617300295119,614139753189',
taskType: 'browseGoods',
type: '02',
bannerHeight: 430,
image: {
bg: '//yun.dui88.com/taobaomini/clientCTest/goods_bg@2x.png',
banner: '//yun.dui88.com/taobaomini/clientCTest/goods_banner@2x.png',
title: '//yun.dui88.com/taobaomini/clientCTest/goods_title@2x.png',
collect: '//yun.dui88.com/taobaomini/clientCTest/goods_collection@2x.png',
no_collect: '//yun.dui88.com/taobaomini/clientCTest/collection_no_collect@2x.png',
img: '//yun.dui88.com/taobaomini/clientCTest/goods_img@2x.png',
},
color: '#181818'
},
onCompleteTask: () => {}
},
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) {
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() {
clearTimeout(this.timer)
},
methods: {
/**
* 跳转商品详情页
*/
async goToGoodsDetail(e) {
clearInterval(this.timer)
this.setData({
percent: this.data.usePercent,
})
const { itemId } = e.target.dataset.item
await openDetail(String(itemId))
},
/**
* 收藏商品
*/
async goToCollectGoods(e) {
const { itemId, collected } = e.target.dataset.item
const { taskType } = this.props.task
if(collected) return;
let result = await collectGoods(itemId)
if(result) {
this.props.onCompleteTask(taskType, itemId)
}
},
/**
* 浏览商品倒计时
*/
browseGoodsTimes() {
const { taskType } = this.props.task
this.timer = setInterval(() => {
this.setData({
usePercent: this.data.usePercent + 1
}, () => {
if (this.data.usePercent >= 10) {
console.log(this.data.usePercent)
this.props.onCompleteTask(taskType)
clearInterval(this.timer)
}
})
},1000)
}
},
});
taobao_mini/client/pages/goodsModal/goodsModal.json 0 → 100755
View file @ 22325dd4
{
"component": true,
"usingComponents": {
"count-down-modal": "/components/countDownModal/countDownModal"
}
}
\ No newline at end of file
taobao_mini/client/pages/goodsPage/goodsPage.axml 0 → 100755
View file @ 22325dd4
<view class="goodsPage">
<goods-modal
isBackFlag="{{isBackFlag}}"
goodsList="{{goodsList}}"
task="{{task}}"
onCompleteTask="onCompleteTask" />
</view>
\ No newline at end of file
taobao_mini/client/pages/goodsPage/goodsPage.js 0 → 100755
View file @ 22325dd4
/**
* 任务类型（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 { openDetail, collectGoods, checkGoodsCollectedStatus, commonToast } = tbcc.tb;
import API from '../../api';
Page({
data: {
query: {},
task: {},
isBackFlag: 1,
goodsList: []
},
onLoad(query) {
this.query = query || {}
this.init()
},
onShow() {
//重新回到页面开启倒计时
this.setData({ isBackFlag: Math.floor((Math.random() * 100)) == this.data.isBackFlag ? 101 : Math.floor((Math.random() * 100)) })
},
init() {
const { itemId, taskType } = this.query
this.setData({
task: {
itemId,
taskType: 'browseGoods',
type: '01',
image: {
bg: '//yun.dui88.com/taobaomini/clientCTest/goods_bg@2x.png',
banner: '//yun.dui88.com/taobaomini/clientCTest/goods_banner@2x.png',
title: '//yun.dui88.com/taobaomini/clientCTest/goods_title@2x.png',
collect: '//yun.dui88.com/taobaomini/clientCTest/goods_collection@2x.png',
no_collect: '//yun.dui88.com/taobaomini/clientCTest/collection_no_collect@2x.png',
img: '//yun.dui88.com/taobaomini/clientCTest/goods_img@2x.png',
},
color: '#181818'
}
})
this.initPage()
},
async initPage() {
const { activityId } = app
const { taskType, itemIds } = this.query
let goodsList = [
{
image: '',
name: '商品名商品名商品名商品名商品名商品名商品名商品商品',
price: '388',
itemId: 617724147979,
collected: false
},
{
image: '',
name: '商品名商品名商品名商品名商品名商品名商品名商品商品',
price: '388',
collected: true,
itemId: 617724563528,
},
{
image: '',
name: '商品名商品名商品名商品名商品名商品名商品名商品商品',
price: '388',
collected: false,
itemId: 617300295119,
},
{
image: '',
name: '商品名商品名商品名商品名商品名商品名商品名商品商品',
price: '388',
collected: true,
itemId: 614139753189,
},
{
image: '',
name: '商品名商品名商品名商品名商品名商品名商品名商品商品',
price: '388',
itemId: 617724147979,
},
]
this.setData({ goodsList })
let handel = taskType == 'collectGoods' ? 'getCollectItemList' : 'getItemListByItemIds'
const { success, data } = await API[handel]({ activityId, itemIds }).catch(res => {
res && commonToast(res)
}) || {}
if(success) {
this.setData({ goodsList: data || [] })
}
},
//任务完成
async onCompleteTask(taskType,itemId) {
console.log(taskType,itemId)
const { activityId } = app
switch(taskType) {
case 'collectGoods':
let { success, data } = await API.doCollectGoodsTask({ activityId, taskType, itemId }).catch(res => {
res && commonToast(res)
}) || {}
if(success) {
this.initPage()
}
break;
case 'browseGoods':
let browsResult = await API.doCollectGoodsTask({ activityId, taskType, itemId }).catch(res => {
res && commonToast(res)
}) || {}
console.log(browsResult)
if(browsResult.success) {
commonToast('任务完成，请到任务中心查看奖励')
}
break;
}
}
});
taobao_mini/client/pages/goodsPage/goodsPage.json 0 → 100755
View file @ 22325dd4
{
"usingComponents": {
"goods-modal": "/components/goodsModal/goodsModal"
}
}
\ No newline at end of file
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