Skip to content

T
taobao-mini-template
Commit cdad4bd7 authored by 慕轻风's avatar 慕轻风
Browse files
Options

wnf

parent 24a4ba04
Hide whitespace changes
Inline Side-by-side
Showing with 1312 additions and 27 deletions
.DS_Store
View file @ cdad4bd7
No preview for this file type
c_client/client/app.js
View file @ cdad4bd7
...@@ -7,7 +7,7 @@ cloud.init({ ...@@ -7,7 +7,7 @@ cloud.init({
App({ App({
requestType: 'ams', // ams：ams接口，cloud: 云函数 requestType: 'ams', // ams：ams接口，cloud: 云函数
cloudName: 'clientTemplate2C', // 主云函数项目名 cloudName: 'base', // 主云函数项目名
cloud, cloud,
tbcc, tbcc,
onLaunch(options) { onLaunch(options) {
......
c_client/client/app.json
View file @ cdad4bd7
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
"pages/index/index", "pages/index/index",
"pages/testPage/testPage", "pages/testPage/testPage",
"pages/tbccDemo/tbccDemo", "pages/tbccDemo/tbccDemo",
"pages/myprize/myprize" "pages/myprize/myprize",
"pages/goodsPage/goodsPage"
], ],
"window": { "window": {
"defaultTitle": "C端模板" "defaultTitle": "C端模板"
......
c_client/client/components/countDownModal/countDownModal.acss 0 → 100644
View file @ cdad4bd7
.countdown {
position: fixed;
width: 144rpx;
height: 162rpx;
right: 0;
top: 600rpx;
}
.countdown-box-clock {
position: absolute;
top: 0;
left: 50%;
margin-left: -41rpx;
width: 82rpx;
height: 88rpx;
background-size: 100% 100%;
z-index: 10;
}
.countdown-box-clock__time {
position: absolute;
top: 5rpx;
left: 0;
width: 82rpx;
height: 88rpx;
display: flex;
align-items: center;
justify-content: center;
}
.countdown-box-clock image {
width: 100%;
height: 100%;
}
.countdown-box {
position: absolute;
width: 130rpx;
height: 18rpx;
border-radius: 10rpx;
border: 1px solid #a6fffe;
background: #111192;
box-shadow: 0 0 4rpx 1rpx #7fd5ff;
top: 25rpx;
bottom: 20rpx;
left: 0;
right: 0;
margin: auto;
overflow: hidden;
z-index: 11;
}
@keyframes countdownAnimation {
to {
transform: translateX(0);
}
}
.countdown-box .countdown-time {
height: 100%;
width: 100%;
background: linear-gradient(#3996f8, #19dffd);
}
.countdown-txt {
position: absolute;
width: 147rpx;
height: 91rpx;
bottom: 0rpx;
z-index: 1;
}
.countdown-txt image {
width: 100%;
height: 100%;
}
.countdown-txt__content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
line-height: 25rpx;
color: #2A2A2A;
text-align: center;
font-size: 20rpx;
}
.countdown-txt .txt:first-child{
margin-top: 25rpx;
}
.countdown-two {
position: absolute;
width: 554rpx;
height: 104rpx;
left: 50%;
margin-left: -277rpx;
bottom: 70rpx;
}
.countdown-two-clock {
position: absolute;
right: -10rpx;
bottom: 10rpx;
width: 104rpx;
height: 95rpx;
z-index: 15;
}
.countdown-two-clock image {
width: 100%;
height: 100%;
}
.countdown-two-clock .countdown-box-clock__time {
position: absolute;
top: 5rpx;
left: 0;
width: 104rpx;
height: 95rpx;
display: flex;
align-items: center;
justify-content: center;
}
.countdown-two-clock .countdown-box{
position: absolute;
left: 0;
bottom: -20rpx;
}
.countdown-two-txt {
position: absolute;
right: 90rpx;
top: 5rpx;
width: 323rpx;
height: 60rpx;
z-index: 14;
background: url('//yun.dui88.com/taobaomini/clientCTest/count_bg_02@2x.png');
background-size: 100% 100%;
color: #2A2A2A;
text-align: center;
font-size: 20rpx;
line-height: 60rpx;
}
.countdown-two-txt image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 14;
}
.countdown-two__content {
position: absolute;
left: 0;
top: 0;
width: 323rpx;
height: 60rpx;
color: #2A2A2A;
text-align: center;
font-size: 20rpx;
}
\ No newline at end of file
c_client/client/components/countDownModal/countDownModal.axml 0 → 100644
View file @ cdad4bd7
<view class="countdown" a:if="{{styleType == '01'}}">
<view class="countdown-box-clock">
<image mode="scaleToFill" src="{{data.clock_bg}}"/>
<view class="countdown-box-clock__time" style="{{{'color':data.countTxtColor,'fontSize':data.countTxtSize+'rpx'}}}">{{countTime}}</view>
</view>
<view class="countdown-box" style="{{{'height':data.progressHeight+'rpx','width':data.progressWidth+'rpx'}}}">
<view class="countdown-time" style="transform: translateX({{percent*10 -100}}%);animation: countdownAnimation {{countTime-percent}}s forwards linear;"></view>
</view>
<view class="countdown-txt">
<image mode="scaleToFill" src="{{data.textBg}}"/>
<view class="countdown-txt__content">
<view class="txt">{{data.text.split('\n')[0]}}</view>
<view class="txt">{{data.text.split('\n')[1]}}</view>
</view>
</view>
</view>
<view class="countdown-two" a:else>
<view class="countdown-two-clock">
<image mode="scaleToFill" src="{{data.clock_bg}}"/>
<view class="countdown-box-clock__time" style="{{{'color':data.countTxtColor,'fontSize':42+'rpx'}}}">{{countTime}}</view>
</view>
<view class="countdown-box" style="{{{'height':55+'rpx','width':490+'rpx'}}}">
<view class="countdown-time" style="transform: translateX({{percent*10 -100}}%);animation: countdownAnimation {{countTime-percent}}s forwards linear;"></view>
</view>
<view class="countdown-two-txt" style="{{{'background':`url(${data.textBg}) no-repeat`,'backgroundSize': '100% 100%'}}}">
{{data.text}}
</view>
</view>
c_client/client/components/countDownModal/countDownModal.js 0 → 100644
View file @ cdad4bd7
/**
* data: {
* text: //文案描述
* textBg: //文案背景
* progressWidth: //进度条宽
* progressHeight: //进度条高
* clock_bg: //时钟icon
* countTxt: //时钟文案
* countTxtColor: //时钟文字颜色
* countTxtSize: //时钟文字大小
* }
* usePercent: //已执行时长
* countTime: //倒计时长
* styleType: //样式（01——右对齐，02—底部）
*/
Component({
mixins: [],
data: {},
props: {
percent: 10,
usePercent:0,
countTime: 10,
styleType: '01',//browse_txt_bg count_bg_02
data: {
text: '浏览商品10s\n获得任务奖励',
textBg: '//yun.dui88.com/taobaomini/clientCTest/browse_txt_bg@2x.png',
progressWidth:'130',
progressHeight:'18',
clock_bg: '//yun.dui88.com/taobaomini/clientCTest/clock@2x.png',
countTxt: '10',
countTxtColor: '#1CA4ED',
countTxtSize: '32'
}
},
didMount() { },
didUpdate() {},
didUnmount() { },
methods: {},
});
c_client/client/components/countDownModal/countDownModal.json 0 → 100644
View file @ cdad4bd7
{
"component": true
}
\ No newline at end of file
c_client/client/components/endModal/endModal.acss 0 → 100644
View file @ cdad4bd7
.end-modal-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
min-height: 100vh;
/* background: url('//yun.dui88.com/taobaomini/clientCTest/end_bg@2x.png') no-repeat; */
background-size: 750rpx 1624rpx;
overflow: hidden;
z-index: 20;
}
.end-modal-container-content {
position: absolute;
width: 750rpx;
height: 480rpx;
top: 50%;
left: 0;
margin-top: -240rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.end-modal-container-content__icon {
width: 478rpx;
height: 340rpx;
}
.end-modal-container-content__icon image {
width: 100%;
height: 100%;
}
.end-modal-container-content__desc {
font-size: 36rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ADADAD;
}
\ No newline at end of file
c_client/client/components/endModal/endModal.axml 0 → 100644
View file @ cdad4bd7
<view class="end-modal-container" style="{{{'background':`url(${data.image.bg}) no-repeat`}}}">
<view class="end-modal-container-content">
<view class="end-modal-container-content__icon">
<image mode="scaleToFill" src="{{data.image.end_icon}}"/>
</view>
<view class="end-modal-container-content__desc">{{data.text}}</view>
</view>
</view>
\ No newline at end of file
c_client/client/components/endModal/endModal.js 0 → 100644
View file @ cdad4bd7
Component({
mixins: [],
data: {},
props: {
data: {
image: {
bg: '//yun.dui88.com/taobaomini/clientCTest/end_bg@2x.png',
end_icon: '//yun.dui88.com/taobaomini/clientCTest/end_icon@2x.png',
},
text: '活动未开始'
}
},
didMount() {},
didUpdate() {},
didUnmount() {},
methods: {},
});
c_client/client/components/endModal/endModal.json 0 → 100644
View file @ cdad4bd7
{
"component": true
}
\ No newline at end of file
c_client/client/components/goodsModal/goodsModal.acss 0 → 100644
View file @ cdad4bd7
.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
c_client/client/components/goodsModal/goodsModal.axml 0 → 100644
View file @ cdad4bd7
<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
c_client/client/components/goodsModal/goodsModal.js 0 → 100644
View file @ cdad4bd7
/**
* 任务类型（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)
}
},
});
c_client/client/components/goodsModal/goodsModal.json 0 → 100644
View file @ cdad4bd7
{
"component": true,
"usingComponents": {
"count-down-modal": "/components/countDownModal/countDownModal"
}
}
\ No newline at end of file
c_client/client/components/logisticsModal/logisticsModal.acss 0 → 100644
View file @ cdad4bd7
@keyframes modalAnimation {
to {
opacity: 1;
}
}
.logistics-modal-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 20;
opacity: 0;
animation: modalAnimation .3s forwards;
}
@keyframes containerAnimation {
to {
transform: scale(1)
}
}
.logistics-modal-container__content {
width: 646rpx;
height: 244rpx;
padding: 0 46rpx;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
display: flex;
align-items: center;
transform: scale(0);
animation: containerAnimation .3s forwards;
}
.logistics-modal-container__close {
position: absolute;
right: -10rpx;
top: -70rpx;
height: 48rpx;
width: 48rpx;
background: url("//yun.duiba.com.cn/taobaomini/aupresViva/tc_close.png") no-repeat;
background-size: 100% 100%;
}
.logistics-modal-container__content-item {
border-radius: 10rpx;
display: flex;
}
.logistics-modal-container__content-left {
width: 144rpx;
height: 144rpx;
background: rgba(244, 244, 244, 1);
}
.logistics-modal-container__content-left image {
width: 100%;
height: 100%;
}
.logistics-modal-container__content-right {
height: 144rpx;
margin-left: 24rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 20rpx;
color: #959595;
flex: 1;
overflow: hidden;
white-space: nowrap;
}
.logistics-modal-container__content-name {
font-size: 28rpx;
color: rgba(51, 51, 51, 1);
}
.logistics-modal-container__content-desc {
font-size: 20rpx;
}
.logistics-modal-container__content-ids {
margin-bottom: 20rpx;
}
.logistics-modal-container__content-copy {
display: flex;
align-items: center;
height: 30rpx;
}
.logistics-modal-container__content-copy__code {
font-size: 20rpx;
}
.logistics-modal-container__content-copy__img {
width: 20rpx;
height: 20rpx;
background-size: 100% 100%;
margin-left: 20rpx;
}
\ No newline at end of file
c_client/client/components/logisticsModal/logisticsModal.axml 0 → 100644
View file @ cdad4bd7
<view class="logistics-modal-container">
<view class="logistics-modal-container__content"
style="{{prizeItem.shipStatus == 3 ?`background: url(${task.shipped}) no-repeat;background-size: 100% 100%;`
:`background: url(${task.notShipped}) no-repeat;background-size: 100% 100%;`}}">
<view class="logistics-modal-container__close" onTap="closeModal"></view>
<view class="logistics-modal-container__content-item">
<view class="logistics-modal-container__content-left">
<image mode="scaleToFill" src="{{prizeItem.image}}"/>
</view>
<view class="logistics-modal-container__content-right">
<view class="logistics-modal-container__content-name">{{prizeItem.name}}</view>
<view class="logistics-modal-container__content-copy">
<view class="logistics-modal-container__content-copy__code">奖品编码：{{prizeItem._id}}</view>
<view class="logistics-modal-container__content-copy__img" onTap="copyPrizeId"></view>
</view>
<view class="logistics-modal-container__content-desc">{{prizeItem.shipStatus== 3?'发货状态：已发货':'发货状态：未发货'}}</view>
<view class="logistics-modal-container__content-desc" a:if="{{prizeItem.shipStatus == 2}}">温馨提示：奖品将在活动结束7天内陆续发出</view>
<view class="logistics-modal-container__content-copy" a:else>
<view class="logistics-modal-container__content-copy__code">{{'物流单号：'+prizeItem.shipNum}}</view>
<view class="logistics-modal-container__content-copy__img" style="{{`background: url(${task.copyIcon}) no-repeat;background-size: 100% 100%;`}}" onTap="copyCode"></view>
</view>
</view>
</view>
</view>
</view>
\ No newline at end of file
c_client/client/components/logisticsModal/logisticsModal.js 0 → 100644
View file @ cdad4bd7
const app = getApp();
const { tbcc } = app;
const { commonToast } = tbcc.tb;
Component({
mixins: [],
data: {},
props: {
prizeItem: {},
onCloseModal: () => { },
task: {
shipped: '',
notShipped: '',
}
},
didMount() { },
didUpdate() { },
didUnmount() { },
methods: {
closeModal() {
this.props.onCloseModal()
},
//复制运单号
copyCode() {
let { shipNum } = this.props.prizeItem
my.setClipboard({
text: shipNum + '',
success: () => {
commonToast('复制成功')
}
});
},
copyPrizeId() {
let { _id } = this.props.prizeItem
my.setClipboard({
text: _id + '',
success: () => {
commonToast('复制成功')
}
});
}
},
});
c_client/client/components/logisticsModal/logisticsModal.json 0 → 100644
View file @ cdad4bd7
{
"component": true
}
\ No newline at end of file
c_client/client/components/prizeModal/prizeModal.acss 0 → 100644
View file @ cdad4bd7
.my-prize-page {
width: 100vw;
height: 100vh;
opacity: 1;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
/* background: url('') no-repeat center top/cover; */
}
.my-prize-page .my-prize-wrap {
width: 100%;
height: 100%;
overflow: auto;
}
.my-prize-page .my-prize-label {
width: 208rpx;
height: 36rpx;
margin: 140rpx auto 40rpx;
background: url('//yun.dui88.com/duiba-components-c-myprizeprize_title.png') no-repeat;
background-size: 100% 100%;
}
.my-prize-page .my-prize-list {
width: 100%;
height: auto;
}
.my-prize-page .my-prize-empty {
text-align: center;
color: #fff;
margin-top: 30rpx;
}
.my-prize-page .my-prize-item {
display: flex;
justify-content: center;
align-items: center;
padding: 0 28rpx 0 26rpx;
margin: 0 auto 24rpx;
position: relative;
box-sizing: border-box;
width: 700rpx;
height: 161rpx;
background-color: #ffffff;
box-shadow: 2rpx 3rpx 18rpx 0 rgba(230, 146, 255, 0.6);
border-radius: 10rpx;
box-sizing: border-box;
}
.my-prize-page .my-prize-item .my-prize-avatar {
width: 120rpx;
height: 120rpx;
}
.my-prize-page .my-prize-item .my-prize-content {
flex: 1;
min-width: 0;
padding: 0 20rpx;
display: flex;
flex-direction: column;
height: 130rpx;
}
.my-prize-page .my-prize-item .my-prize-subtitle {
display: flex;
justify-content: center;
align-items: center;
}
.my-prize-page .my-prize-item .my-prize-copy {
width: 20rpx;
height: 20rpx;
margin-left: 18rpx;
}
.my-prize-page .my-prize-item .prize-status {
width: 150rpx;
height: 41rpx;
}
.prize-status>image {
width: 100%;
height: 100%;
}
.my-prize-page .my-prize-item .my-prize-name {
width: 100%;
font-size: 28rpx;
color: #2d2d2d;
letter-spacing: -1rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.my-prize-page .my-prize-item .my-prize-tip {
margin-top: 8rpx;
font-size: 20rpx;
line-height: 20rpx;
letter-spacing: 0;
color: #8a8a8a;
}
.my-prize-page .my-prize-item .my-prize-code {
width: 290rpx;
font-family: PingFangSC-Regular;
font-size: 20rpx;
color: #8a8a8a;
letter-spacing: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
\ No newline at end of file
c_client/client/components/prizeModal/prizeModal.axml 0 → 100644
View file @ cdad4bd7
<view class="my-prize-page" style="{{{'background':`url(${task.image.bg}) no-repeat center top/cover`}}}">
<view class="my-prize-wrap">
<view class="my-prize-label"></view>
<view class="my-prize-list" a:if="{{myPrizeList && myPrizeList.length > 0}}">
<view class="my-prize-item" a:for="{{myPrizeList}}">
<image class="my-prize-avatar" src="{{item.image}}"/>
<view class="my-prize-content">
<label class="my-prize-name">{{item.name}}</label>
<view class="my-prize-subtitle">
<label class="my-prize-code">奖品编码：{{item._id}}</label>
<!-- 复制按钮 -->
<image class="my-prize-copy" data-text="{{item._id}}" onTap="handleCopyId" src="{{task.image.copyIcon}}" />
</view>
<view class="my-prize-tip" a:if="{{item.drawStatus === PRIZE_DRAW_STATUS_MAPPRIZE_DRAW_STATUS_MAP.FAILURE}}">{{item.remark}}</view>
<view class="my-prize-tip" a:if="{{item.drawStatus === PRIZE_DRAW_STATUS_MAP.REPEAT || (item.drawStatus === PRIZE_DRAW_STATUS_MAP.RECEIVE)}}">请于{{endTime}}前领取</view>
<view class="my-prize-tip" a:if="{{item.drawStatus === PRIZE_DRAW_STATUS_MAP.FINISHED }}">奖品已过期失效</view>
</view>
<view class="prize-status" style="{{task.btnStyle}}">
<!-- 未领取 -->
<block a:if="{{item.drawStatus===PRIZE_DRAW_STATUS_MAP.RECEIVE}}">
<!-- 实物填写地址 -->
<image a:if="{{item.type === PRIZE_TYPE_MAP.ENTITY}}" onTap="handleClick" data-item="{{item}}" src="{{task.image.addressBth}}" />
<!-- 优惠券立即领取 -->
<image a:else onTap="handleClick" data-item="{{item}}" src="{{task.image.getBth}}" />
</block>
<!-- 已领取 -->
<block a:if="{{item.drawStatus===PRIZE_DRAW_STATUS_MAP.SUCCESS}}">
<!-- 实物查看物流 -->
<image a:if="{{item.type === PRIZE_TYPE_MAP.ENTITY}}" onTap="handleView" data-item="{{item}}" src="{{task.image.logisticsBth}}" />
<!-- 优惠券去使用 -->
<image a:else onTap="handleTouse" data-item="{{item}}" src="{{task.image.useBtn}}" />
</block>
<!-- 重新领取 -->
<image a:if="{{item.drawStatus===PRIZE_DRAW_STATUS_MAP.REPEAT}}" onTap="handleClick" data-item="{{item}}" src="{{task.image.getAgainBtn}}" />
<!-- 已失效 -->
<image a:if="{{item.drawStatus===PRIZE_DRAW_STATUS_MAP.FINISHED}}" src="{{task.image.invalidBtn}}" />
<!-- 领取失败 -->
<image a:if="{{item.drawStatus===PRIZE_DRAW_STATUS_MAP.FAILURE}}" src="{{task.image.failBth}}" />
</view>
</view>
</view>
<view a:if="{{myPrizeList && myPrizeList.length === 0}}" class="my-prize-empty">暂无奖品</view>
</view>
<logistics-modal a:if="{{isLogistic}}" prizeItem="{{currentPrize}}" onCloseModal="closeLogisticModal" task="{{task.logisticsImage}}"/>
</view>
\ No newline at end of file
c_client/client/components/prizeModal/prizeModal.js 0 → 100644
View file @ cdad4bd7
const app = getApp();
const { tbcc } = app;
const { commonToast, navigateToOutside, getUserAddress, setClipboard } = tbcc.tb;
const { PRIZE_TYPE_MAP, PRIZE_DRAW_STATUS_MAP } = tbcc.constants;
Component({
mixins: [],
data: {
PRIZE_TYPE_MAP,
PRIZE_DRAW_STATUS_MAP,
currentPrize: {},
isLogistic: false,
},
props: {
myPrizeList: null, //我的奖品
endTime: null,//到期时间
task: {
image: {},
logisticsImage: {},
btnStyle: {}
}
},
didMount() { },
didUpdate() { },
didUnmount() { },
methods: {
//领取奖品
handleClick(e) {
this.props.onHandleClick(e)
},
// 复制编码
handleCopyId(e) {
const { text } = e.target.dataset || {}
setClipboard({ text })
console.log(text)
commonToast('复制成功')
},
// 去使用
handleTouse(e) {
const { item } = e.target.dataset;
navigateToOutside(item.useUrl)
},
//查看物流
handleView(e) {
let { item } = e.target.dataset
this.setData({ currentPrize: item, isLogistic: true })
},
/**
* 关闭物流弹窗
*/
closeLogisticModal() {
this.setData({ isLogistic: false })
},
},
});
c_client/client/components/prizeModal/prizeModal.json 0 → 100644
View file @ cdad4bd7
{
"component": true,
"usingComponents": {
"logistics-modal": "/components/logisticsModal/logisticsModal"
}
}
\ No newline at end of file
c_client/client/pages/goodsPage/goodsPage.axml 0 → 100644
View file @ cdad4bd7
<view class="goodsPage">
<goods-modal
isBackFlag="{{isBackFlag}}"
goodsList="{{goodsList}}"
task="{{task}}"
onCompleteTask="onCompleteTask" />
</view>
\ No newline at end of file
c_client/client/pages/goodsPage/goodsPage.js 0 → 100644
View file @ cdad4bd7
/**
* 任务类型（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;
}
}
});
c_client/client/pages/goodsPage/goodsPage.json 0 → 100644
View file @ cdad4bd7
{
"usingComponents": {
"goods-modal": "/components/goodsModal/goodsModal"
}
}
\ No newline at end of file
c_client/client/pages/index/index.axml
View file @ cdad4bd7
...@@ -6,6 +6,7 @@ ...@@ -6,6 +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>
</view> </view>
......
c_client/client/pages/myprize/myprize.axml
View file @ cdad4bd7
<view> <view class="my-prize">
<button onTap="receiveObjectPrize">领取实物</button> <prize-modal
<button onTap="receiveEnamePrize">领取权益</button> myPrizeList="{{myPrizeList}}"
task="{{task}}"
endTime="{{endTime}}"
onHandleClick="handleClick"/>
</view> </view>
\ No newline at end of file
c_client/client/pages/myprize/myprize.js
View file @ cdad4bd7
'use strict';
import API from '../../api'; import API from "/api";
const app = getApp(); const app = getApp();
const { tbcc } = app; const { tbcc } = app;
const { commonToast } = tbcc.tb; const { commonToast, navigateToOutside, getUserAddress, setClipboard } = tbcc.tb;
const { PRIZE_TYPE_MAP, PRIZE_DRAW_STATUS_MAP } = tbcc.constants;
let flag = false;
Page({ Page({
data: {}, data: {
onLoad() { PRIZE_TYPE_MAP,
this.getMyPrizeList(); PRIZE_DRAW_STATUS_MAP,
myPrizeList: null, //我的奖品
endTime: null,//到期时间
task: {
image: {
bg: '//yun.duiba.com.cn/aurora/assets/e13fab3165d3a6bb4cbe8827e8f0fd41084b0091.png', //背景图
copyIcon: '//yun.dui88.com/duiba-components-c-myprizemyprize_copy_code.png', //复制
addressBth: '//yun.dui88.com/duiba-components-c-myprizeto_address.png', //填写地址(实物奖品)
getBth: '//yun.dui88.com/duiba-components-c-myprizeget_now.png', //立即领取(除实物奖品外)
logisticsBth: '//yun.dui88.com/duiba-components-c-myprizelogistics.png', //查看物流
useBth: '//yun.dui88.com/duiba-components-c-myprizeto_use.png', //去使用(除实物奖品外)
getAgainBtn: '//yun.dui88.com/duiba-components-c-myprizeget_again.png', //重新领取
invalidBtn: '//yun.duiba.com.cn/spark/assets/914ba8643c8abb8d710a3126ec312aecf6c4daf0.png', //已失效
failBth: '//yun.duiba.com.cn/spark/assets/8267375232058a6d0140270b1594427fb08d6ae3.png', //领取失败
},
logisticsImage: {
shipped: '//yun.dui88.com/duiba-components-c-myprizeprize_shipped.png', // 已发货物理弹窗
notShipped: '//yun.dui88.com/duiba-components-c-myprizenotshipped.png', // 待发货物流弹窗
copyIcon: '//yun.dui88.com/duiba-components-c-myprizemyprize_copy_code.png', //复制
},
btnStyle: { // 按钮自定义样式
width: '150rpx',
height: '41rpx',
}
}
},
onShow() {
flag = false
this.getMyPrize();
}, },
async getMyPrizeList() { // 到期时间
const result = await API.getMyPrizeList().catch(res => { getEndTime(prizeList = []) {
commonToast(res && res.message); if (!prizeList || !prizeList.length) return null
const endTime = prizeList[0].expiredTime
if (!endTime) return null
const t1 = new Date(endTime).toLocaleDateString() + '';//获取年月日
const t2 = new Date(endTime).getHours() + '';//获取时
const t3 = new Date(endTime).getMinutes() + '';//获取分
const t4 = new Date(endTime).getMilliseconds() + '';//获取秒
console.log(endTime, new Date(endTime + 48 * 60 * 60 * 1000).toLocaleString(), 'endTime');
this.setData({
endTime: t1 + " " + t2.padStart(2, '0') + ":" + t3.padStart(2, '0') + ":" + t4.padStart(2, '0')
})
},
/**
* 获取奖品列表
* @param {string} type 是否展示loading
*/
async getMyPrize(type) {
const { activityId } = app;
if (type != 'noLoading') {
my.showLoading();
}
const { success, data, message } = await API.getMyPrizeList({ activityId }).catch(res => {
this.setData({
myPrizeList: []
})
}) || {};
if (success && data) {
this.setData({
myPrizeList: data.list
})
this.getEndTime(data.list)
}
if (type != 'noLoading') {
my.hideLoading();
}
},
//领取奖品
async handleClick(e) {
const { item } = e.target.dataset;
// 领取权益
if (item.type === PRIZE_TYPE_MAP.EQUITY) return this.handleGetEquity(e)
// 领取实物
if (item.type === PRIZE_TYPE_MAP.ENTITY) return this.handleGetEntity(e)
// 领取积分
if (item.type === PRIZE_TYPE_MAP.INTEGRATION) return this.handleGetIntergation(e)
},
// 优惠券
async handleGetEquity(e) {
if (flag) {
return
}
flag = true;
const { activityId } = app;
const { item } = e.target.dataset;
console.log(item, '领取权益')
const { success, data, message } = await API.receiveEnamePrize({ activityId, _id: item._id }).catch(res => {
this.getMyPrize('noLoading')
commonToast(res && res.message)
}) || {};
if (success && data) {
commonToast('领取成功')
this.getMyPrize()
}
setTimeout(() => {
flag = false
}, 500)
},
// 领取实物前询问
async handleGetEntity(e) {
if (flag) {
return
}
my.showLoading();
flag = true;
const { activityId } = app;
const { item } = e.target.dataset;
const userAddress = await getUserAddress({ joinTag: " " })
my.hideLoading();
if (!userAddress) return
const { name, telNumber, provinceName, cityName, cityCode, countyName, detailInfo, streetName } = userAddress || {};
const params = {
activityId,
name,
phone: telNumber,
detailInfo,
cityCode,
cityName,
provinceName,
countyName,
streetName,
_id: item._id
}
my.confirm({
title: '提示',
content: '确认使用该收货地址：' + name + telNumber + userAddress.duibaAddress.address,
confirmButtonText: '确定',
cancelButtonText: '取消',
success: (result) => {
console.log(result)
const { confirm } = result;
if (confirm) {
this.receiveObjectPrize(params);
}
},
}); });
console.log(result); flag = false
}, },
async receiveObjectPrize(_id) { // 领取实物
const success = await API.fn.receiveObjectPrize({ _id }); async receiveObjectPrize(params) {
if (success) { const { success, data, message } = await API.receiveObjectPrize(params) || {}
commonToast('保存成功'); if (success && data) {
commonToast('领取成功')
} else {
commonToast(message)
} }
this.getMyPrize()
}, },
async receiveEnamePrize(_id) { // 积分
const success = await API.fn.receiveEnamePrize({ _id }); async handleGetIntergation(e) {
if (success) { if (flag) {
commonToast('领取成功'); return
} }
} flag = true;
}); // 判断是否为会员
await this.getUserInfo()
const { isVip, vipLink } = app;
if (!isVip) {
commonToast('立即加入会员，即可领取奖品', 2000);
setTimeout(() => {
navigateToOutside(vipLink)
}, 1000)
flag = false
return
}
const { activityId } = app;
const { item } = e.target.dataset;
console.log(item, '领取积分')
const { success, data, message } = await API.receiveEnamePrize({ activityId, _id: item._id }) || {};
if (success && data) {
commonToast('领取成功')
} else {
commonToast(message)
}
flag = false
this.getMyPrize()
},
//获取用户vip信息
async getUserInfo() {
const { activityId } = app;
const { success, data, message } = await API.getVipInfo({ activityId }) || {};
console.log(data, '用户vip信息');
if (success && data) {
app.isVip = (data && data.isVip) || false;
app.vipLink = (data && data.url) || '';
} else {
commonToast(message)
}
},
});
\ No newline at end of file
c_client/client/pages/myprize/myprize.json
View file @ cdad4bd7
{} {
\ No newline at end of file "usingComponents": {
"prize-modal": "/components/prizeModal/prizeModal"
}
}
\ No newline at end of file
c_client/client/tbcc-sdk/lib/capi.js
View file @ cdad4bd7
...@@ -4,7 +4,11 @@ const capi = { ...@@ -4,7 +4,11 @@ const capi = {
isShowLoading: true isShowLoading: true
}, },
receiveObjectPrize: 'receiveObjectPrize', receiveObjectPrize: 'receiveObjectPrize',
receiveEnamePrize: 'receiveEnamePrize' receiveEnamePrize: 'receiveEnamePrize',
getItemListByItemIds: 'getItemListByItemIds',
getCollectItemList: 'getCollectItemList',
doCollectGoodsTask: 'doCollectGoodsTask',
getVipInfo:'getVipInfo'
}; };
export default capi; export default capi;
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