Skip to content

N
new_taobao
Commit 904eaecc authored by AU-Pro-mac's avatar AU-Pro-mac
Browse files
Options

add base game code

parent dcb4a4f7
Hide whitespace changes
Inline Side-by-side
Showing with 1922 additions and 582 deletions
project/src/canvas/game/module/RES.ts
View file @ 904eaecc
......@@ -233,7 +233,7 @@ export namespace RES {
*/
export function getRes(str: string)/*: Texture | VideoEntity*/ {
var type = str.substring(str.lastIndexOf(".") + 1, str.length);
console.log(type)
// console.log(type)
if (type == "png" || type == "jpg") {
return FYGE.TextureCache[str] || null;
}
......
project/src/canvas/game/resCanvasListCsd.js
View file @ 904eaecc
......@@ -5,5 +5,95 @@ const resCanvasListCsd = {
url: '//yun.duiba.com.cn/spark/assets/openTexture.4558fad0aadb7003efd6b71716816a93ad181283.png',
uuid: '63cb446e-1158-4a94-bf0c-c19ecc7d2cc6'
},
'334aff33-1a9e-4277-aafe-3d9f22eab3d5': {
name: '传送带返回',
ext: '.png',
url: '//yun.duiba.com.cn/spark/assets/传送带返回.2311961239a4cec1102cbaef694bcfa96e8e813d.png',
uuid: '334aff33-1a9e-4277-aafe-3d9f22eab3d5'
},
'ad20a814-c0d4-4010-a76d-8e9114778580': {
name: '传送带棍子',
ext: '.png',
url: '//yun.duiba.com.cn/spark/assets/传送带棍子.1c8129c1c01b0ffff79c62f7248de814b90d5b58.png',
uuid: 'ad20a814-c0d4-4010-a76d-8e9114778580'
},
'217e095b-5c92-4c79-a8b2-a13730815d1d': {
name: '传送带bg',
ext: '.png',
url: '//yun.duiba.com.cn/spark/assets/传送带bg.e8059ac6374da38450ba34c437b6b4040f931e87.png',
uuid: '217e095b-5c92-4c79-a8b2-a13730815d1d'
},
'd1379fca-f21e-40f0-b0f0-06c188d4b4dc': {
name: '商品1',
ext: '.png',
url: '//yun.duiba.com.cn/spark/assets/商品1.599f9257a53195dceb9f40c0c0f7aded34cdc131.png',
uuid: 'd1379fca-f21e-40f0-b0f0-06c188d4b4dc'
},
'0bd734c1-9c1a-428e-8a9c-cef373baed9d': {
name: '商品2',
ext: '.png',
url: '//yun.duiba.com.cn/spark/assets/商品2.8949611178fa2d44d4273855d7ec2f6dbaa2fbe0.png',
uuid: '0bd734c1-9c1a-428e-8a9c-cef373baed9d'
},
'9e512c7f-88e2-4b85-a2f0-afd2062247e1': {
name: '商品3',
ext: '.png',
url: '//yun.duiba.com.cn/spark/assets/商品3.b767697456aee2b09886ebcf716ab1661f2d3ac3.png',
uuid: '9e512c7f-88e2-4b85-a2f0-afd2062247e1'
},
'30ac266d-0388-4659-9c3e-e741f3c671c7': {
name: '商品4',
ext: '.png',
url: '//yun.duiba.com.cn/spark/assets/商品4.71ddf430f5224890c7a4740ac50e9d59b8fa32e4.png',
uuid: '30ac266d-0388-4659-9c3e-e741f3c671c7'
},
'f5c2161d-88e7-42f9-bcd6-de4ba299b73f': {
name: '引导1',
ext: '.png',
url: '//yun.duiba.com.cn/spark/assets/引导1.82653046b0d6983278d2d4bed8dda890de8eb310.png',
uuid: 'f5c2161d-88e7-42f9-bcd6-de4ba299b73f'
},
'946ce030-1669-4d8f-a074-b120e738b148': {
name: '引导2',
ext: '.png',
url: '//yun.duiba.com.cn/spark/assets/引导2.835e6f14c4d0be0a55a505671d54cdb3ac357c13.png',
uuid: '946ce030-1669-4d8f-a074-b120e738b148'
},
'e23c5ce1-444f-41c3-a05b-08024ac27678': {
name: '引导3',
ext: '.png',
url: '//yun.duiba.com.cn/spark/assets/引导3.3cb22a085628a6e43b4e13182c1a26c1ec4c259d.png',
uuid: 'e23c5ce1-444f-41c3-a05b-08024ac27678'
},
'f455b42a-0e67-43d8-b7c5-520760160631': {
name: '炸弹',
ext: '.png',
url: '//yun.duiba.com.cn/spark/assets/炸弹.67df66e9cf5e166c8cf6d340886ef094a84954c9.png',
uuid: 'f455b42a-0e67-43d8-b7c5-520760160631'
},
'b292e9c5-4565-4ecb-bf0b-1a9d7268b7c0': {
name: '主要传送带',
ext: '.png',
url: '//yun.duiba.com.cn/spark/assets/主要传送带.123506a9d21e1e865dfb73a111841cf5d54432ca.png',
uuid: 'b292e9c5-4565-4ecb-bf0b-1a9d7268b7c0'
},
'9df91df7-fc44-4d31-9f52-88d1ff65c9ba': {
name: 'userboard_left',
ext: '.png',
url: '//yun.duiba.com.cn/spark/assets/userboard_left.b3ac0315adf5b1fc08faf81dadad51e842d17c6f.png',
uuid: '9df91df7-fc44-4d31-9f52-88d1ff65c9ba'
},
'9606b410-5d79-4759-a3f6-026dbb6fad0b': {
name: 'userboard_right',
ext: '.png',
url: '//yun.duiba.com.cn/spark/assets/userboard_right.e62f8797b851fa7758f16d0a5b1fae6729989f8c.png',
uuid: '9606b410-5d79-4759-a3f6-026dbb6fad0b'
},
'30df14d3-e5a3-41ab-985d-26d4cad0cbfc': {
name: '传送带左边传送带',
ext: '.png',
url: '//yun.duiba.com.cn/spark/assets/传送带左边传送带.7fea2ca2aa3d648a8bdb8af805c6bd43bcdf7f19.png',
uuid: '30df14d3-e5a3-41ab-985d-26d4cad0cbfc'
}
};
export default resCanvasListCsd;
\ No newline at end of file
project/src/canvas/game/src/Main.ts
View file @ 904eaecc
......@@ -125,43 +125,38 @@ export class Main {
console.log('resloadingList 加载完毕')
this.loadImageTextures(resCanvasList).then(res => {
changeScene(OpenAni)
// changeScene(OpenAni)
changeScene(CsdScene)
})
// XxlScene
// changeScene(CsdScene)
// OpenAni
// await InitLottie.initLottieList(openLottieList);
await InitLottie.initLottieList(resLottieList);
console.log("initLottieList完成")
FYGE.GDispatcher.dispatchEvent("loadEnd");
//打开开始场景
// changeScene(StartScene);
// changeScene(LoadingScene);
// changeScene(SStartScene);
// changeScene(StoryScene);
// changeScene(AdoptScene);
// console.log("恶趣味去")
// showPanel(NoStepPanel)
//测试
// sendTbNet(TbNetName.aaa, {}, (s, res) => {
// console.log(res)
// })
//获取数据,，必成功
// showWaiting();
sendTbNet(TbNetName.getAppData, {}, (s, res) => {
console.log('getAppData success,res',s,res)
})
sendTbNet(TbNetName.getActivityBaseInfoById, {}, (s, res) => {
console.log('getActivityBaseInfoById success,res',s,res)
})
console.log('准备打开弹窗')
setTimeout(() => {
sendTbNet(TbNetName.showModal, {name: 'test'}, (s, res) => {
console.log('showModal ruleModal, success,res',s,res)
})
}, 3000);
// sendTbNet(TbNetName.getAppData, {}, (s, res) => {
// console.log('getAppData success,res',s,res)
// })
// sendTbNet(TbNetName.getActivityBaseInfoById, {}, (s, res) => {
// console.log('getActivityBaseInfoById success,res',s,res)
// })
// console.log('准备打开弹窗')
// setTimeout(() => {
// sendTbNet(TbNetName.showModal, {name: 'test'}, (s, res) => {
// console.log('showModal ruleModal, success,res',s,res)
// })
// }, 3000);
// console.log('准备切换到兑换页面')
// setTimeout(() => {
// sendTbNet(TbNetName.navigateToPage, {name:'pageshop'}, (s, res) => {
......
project/src/canvas/game/src/TaoBaoNet.ts
View file @ 904eaecc
......@@ -122,7 +122,10 @@ export enum TbNetName {
* 自定义埋点
* logkey
*/
reportAnalytics = "mine.reportAnalytics"
reportAnalytics = "mine.reportAnalytics",
// 推出游戏 返回主页
backToPage = "mine.backToPage"
}
//返回数据类型，到时再调整
......
project/src/canvas/game/src/chuansongdai/MainScene.ts
View file @ 904eaecc
......@@ -4,6 +4,8 @@ import { Options } from './props'
import Root from './Root';
export class CsdScene extends Scene {
private readonly root = new Root(Options);
constructor(props) {
super(props)
}
......@@ -16,6 +18,11 @@ export class CsdScene extends Scene {
}
start() {
this.addChild(new Root(Options))
this.addChild(this.root)
}
destroy() {
super.destroy();
this.root.dispose()
}
}
project/src/canvas/game/src/chuansongdai/Root.ts
View file @ 904eaecc
import { RES } from "../../module/RES"
import resCanvasList from '../../resCanvasList'
import GoodsCtrl from './game/GoodsCtrl'
import { GDispatcher } from './../Main';
import Catcher from './game/Catcher'
import { GDispatcher, Main } from './../Main';
import ScoreBoard from './game/ScoreBoard'
import GoodsContainer from './game/goodsContainer'
import { Tools } from "../Tools"
import { destroyNetData, sendTbNet, TbNetName } from "../TaoBaoNet";
export default class Root extends FYGE.Container {
GDispatcher
baseOption // 配置（由外传入）
backGround: FYGE.Sprite // 背景
touchArea: FYGE.Graphics // 触摸层
goodsContainer: FYGE.Container // 掉落物的Container
scoreBoard // 记分板
catcher: Catcher // 接收物
countdownTimer // 倒计时
goodsCtrl: GoodsCtrl // 掉落物 数组
stageHeight: number // 舞台高度
timerFunc // 计时器
timerNumer: number // 计时器的倒数数字
// 游戏开始
gameStartFlag;
// 配置（由外传入）
baseOption
// 背景
backGround: FYGE.Sprite
// 触摸层
touchArea: FYGE.Graphics
// 返回按钮
backBtn: FYGE.Sprite
// 记分板
scoreBoard
// 传送带
goodsContainer
// 舞台高度
stageHeight: number
// 计时器
timerFunc
// 计时器的倒数数字
timerNumer: number
// 比拼的用户信息
userInfo
// 记录触摸先后坐标位置
touchXEnd: number
touchYEnd: number
touchXStart: number
touchYStart: number
score: number = 0
time: number = 0 // 游戏时间 倒计时 时长
......@@ -29,8 +42,14 @@ export default class Root extends FYGE.Container {
constructor(options) {
super()
// Main
this.baseOption = options
this.time = options.gameParm.time
this.gameStartFlag = false
setTimeout(() => {
this.gameStartFlag = true
}, 1000)
this.once(FYGE.Event.ADDED_TO_STAGE, this.onAddToStage, this)
......@@ -46,47 +65,37 @@ export default class Root extends FYGE.Container {
this.backGround.y = 0
this.backGround.width = 750
this.backGround.height = 1624
// this.backGround.texture = RES.getRes(resCanvasList[this.baseOption.bgTexture].url)
this.backGround.texture = RES.getRes(resCanvasList['217e095b-5c92-4c79-a8b2-a13730815d1d'].url)
this.addChild(this.backGround)
this.goodsContainer = this.createGoodsContainer()
this.backBtn = Tools.getSprite(resCanvasList['334aff33-1a9e-4277-aafe-3d9f22eab3d5'].url, 0, 40 + 1624 / 2 - this.stage.viewRect.height / 2)
this.backBtn.mouseEnable = true
this.backBtn.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, this.backToPage, this)
this.addChild(this.backBtn)
let leftCsd = Tools.getSprite(resCanvasList['30df14d3-e5a3-41ab-985d-26d4cad0cbfc'].url, 0, 1160)
leftCsd.width = 370
leftCsd.height = 230
this.addChild(leftCsd)
this.goodsContainer = new GoodsContainer(this)
this.addChild(this.goodsContainer)
this.goodsCtrl = new GoodsCtrl(this, this.baseOption)
this.catcher = new Catcher(this.baseOption.catcher)
this.scoreBoard = this.createScoreBoard(this.baseOption.scoreBoard)
this.countdownTimer = this.createCountdownTimer(this.baseOption.countdownTimer)
this.addChild(this.catcher)
this.scoreBoard = new ScoreBoard(this, this.userInfo)
this.addChild(this.scoreBoard)
this.addChild(this.countdownTimer)
this.createTouchRect()
}
/**
* 开始游戏
*/
// 开始游戏
gameStart () {
this.goodsCtrl.start()
this.score = 0
this.timerNumer = this.time
this.scoreBoard.updateScore(this.score)
this.countdownTimer.updateTime(this.timerNumer)
this.timerFunc = setInterval(() => {
this.countdownTimer.updateTime(--this.timerNumer)
// 时间消耗完毕
if (this.timerNumer <= 0) this.dispatchEvent('game-over')
}, 1000)
this.scoreBoard.start(this.time)
this.goodsContainer.startGoods()
}
// 结束游戏
gameOver () {
let score = this.score
this.goodsCtrl.destroy()
clearInterval(this.timerFunc)
GDispatcher.dispatchEvent('game-over', {score: score})
......@@ -101,87 +110,52 @@ export default class Root extends FYGE.Container {
}
// 创建 记分板
createScoreBoard (options) {
let sb = new FYGE.Container()
sb.width = options.width
sb.height = options.height
sb.x = 750 / 2 - options.width / 2
sb.y = options.y
let back = new FYGE.Sprite()
back.width = options.width
back.height = options.height
// back.texture = RES.getRes(resCanvasList[options.texture].url)
sb.addChild(back)
let text = Tools.getText(this.score.toString(), options.fontSize, options.color, FYGE.TEXT_ALIGN.CENTER, options.width)
text.textHeight = options.height
text.verticalAlign = FYGE.VERTICAL_ALIGN.MIDDLE
sb.addChild(text)
sb['updateScore'] = (score) => {
text.text = score.toString()
}
return sb
}
// 创建倒计时
createCountdownTimer (options) {
let cdt = new FYGE.Container()
cdt.width = 100
cdt.height = 100
let text = Tools.getText(this.time.toString() + 's', options.fontSize, options.color, FYGE.TEXT_ALIGN.LEFT)
text.x = options.iconWidth + 10
text.textHeight = options.iconHeight
text.verticalAlign = FYGE.VERTICAL_ALIGN.MIDDLE
cdt.addChild(text)
cdt['updateTime'] = (time) => {
text.text = time.toString() + 's'
}
return cdt
}
// 创建 掉落物的Container
createGoodsContainer () {
let gc = new FYGE.Container()
gc.width = 750
gc.height = 1624
gc.x = 0
gc.y = 0
return gc
}
// 创建 触摸层
createTouchRect () {
this.touchArea = Tools.getRect(750, 1624, 0xffffff, 0)
this.touchArea = Tools.getRect(750, 574, 0xff22ff, 0)
this.touchArea.x = 0
this.touchArea.y = 1050
this.touchArea.mouseEnable = true
this.addChild(this.touchArea)
this.touchArea.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, this.onDownStage, this)
this.touchArea.addEventListener(FYGE.MouseEvent.MOUSE_MOVE, this.onMoveStage, this)
this.touchArea.addEventListener(FYGE.MouseEvent.MOUSE_OUT, this.onOutStage, this)
this.touchArea.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, this.onMouseDownArea, this)
this.touchArea.addEventListener(FYGE.MouseEvent.MOUSE_UP, this.onMouseUpArea, this)
}
onDownStage (e) {
// 退出游戏 返回主页
backToPage () {
sendTbNet(TbNetName.backToPage, {}, (s, res) => { console.log('backToPage') })
}
onMoveStage (e) {
// console.log(e)
onMouseDownArea (e) {
if (this.gameStartFlag) { this.touchXStart = e.localX }
}
onOutStage (e) {
// console.log(e)
onMouseUpArea (e) {
let direction = ''
if (this.gameStartFlag) {
this.touchXEnd = e.localX
let distance = this.touchXEnd - this.touchXStart
if (Math.abs(distance) > 20) direction = distance > 0 ? 'right' : 'left'
else return
this.goodsContainer.getDirection(direction)
this.touchXStart = 0
this.touchXEnd = 0
}
}
onAddToStage () {
this.stageHeight = this.stage.viewRect.height
this.x = 0
this.y = this.stage.viewRect.height / 2 - 1624 / 2
this.initUi()
}
// 清除函数
dispose() {
this.goodsContainer.destroy()
this.touchArea.removeEventListener(FYGE.MouseEvent.MOUSE_DOWN, this.onMouseDownArea, this)
this.touchArea.removeEventListener(FYGE.MouseEvent.MOUSE_UP, this.onMouseUpArea, this)
// throw new Error("Method not implemented.")
}
}
project/src/canvas/game/src/chuansongdai/game/Catcher.ts deleted 100644 → 0
View file @ dcb4a4f7
import { RES } from "../../../module/RES"
import resCanvasList from '../../../resCanvasList'
import { Tools } from "../../Tools"
export default class Catecher extends FYGE.Sprite {
constructor (props) {
super()
this.create()
}
create () {
this.x = 0
this.y = 0
this.width = 750
this.height = 180
}
}
\ No newline at end of file
project/src/canvas/game/src/chuansongdai/game/Goods.ts deleted 100644 → 0
View file @ dcb4a4f7
import { RES } from "../../../module/RES"
import resCanvasList from '../../../resCanvasListCsd'
import { Tools } from "../../Tools"
class Goods extends FYGE.Sprite {
private goodsInfo
private type
constructor (texture) {
super()
this.creatGoods(texture)
}
creatGoods (texture) {
if (texture.length > 1) {
let idx = this.sum(1, texture.length)
this.texture = RES.getRes(resCanvasList[texture[idx - 1]].url)
} else this.texture = RES.getRes(resCanvasList[texture[0]].url)
this.visible = false
}
sum = (m: number, n: number) => {
var num = Math.floor(Math.random() * (m - n) + n)
return num
}
}
export default Goods
\ No newline at end of file
project/src/canvas/game/src/chuansongdai/game/GoodsCtrl.ts deleted 100644 → 0
View file @ dcb4a4f7
import Root from '../../scenes/Root'
import { getStage } from '../../scenes/stage'
import Goods from './Goods'
export default class GoodsCtrl {
private _root: Root
private GoodsArr = [] // 掉落物数组
private baseOption // 基本参数
private gameRunFlag: boolean = false // 是否 游戏中
private speed: number // 初速度
private acceleratedSpeed: number // 加速度
private maxSpeed: number // 最大速度
private createGoodsTime: number = 0 // 本局 添加掉落物 的次数
private goodsNum: number // 需要生成 掉落物的 个数
private maxDistance: number // 掉落物 每帧 最大位移
private minDelayTime: number // 掉落物下落 间隔时间
constructor (root, options) {
this._root = root
this.baseOption = options
this.initResetParam()
}
/**
*  初始化 or 重制 参数
*/
initResetParam () {
const { num, time, speed, acceleratedSpeed, maxSpeed, maxDistance, minDelayTime } = this.baseOption.gameParm
this.goodsNum = num === 'auto' ? time * 1.3 : num
this.gameRunFlag = false
this.createGoodsTime = 0
if (this.GoodsArr.length) this.GoodsArr.forEach((item, index) => { this.removeGood(item, index, true) })
this.GoodsArr = []
this.speed = speed
this.acceleratedSpeed = acceleratedSpeed
this.maxSpeed = maxSpeed
this.maxDistance = maxDistance
this.minDelayTime = minDelayTime
}
/**
* 开始生成掉落物 并 开始凋落
*/
start () {
this.gameRunFlag = true
getStage().addEventListener(
FYGE.Event.ENTER_FRAME,
this.onEnterFrame,
this
)
this.createGoodsPushInArr()
}
/**
* 创建 掉落物 & 填充掉落物数组
*/
createGoodsPushInArr () {
let { goods, gameParm, col } = this.baseOption
// 根据 游戏参数-掉落物 行数，随机生成该掉落物出现在第几行
let countCol = parseInt(Math.round(Math.random() * 100).toString(col)) % col
let countWidth = 750 / col
this.createGoodsTime += 1
this.speed = this.speed > this.maxSpeed ? this.maxSpeed : this.toDecimal(this.speed + this.acceleratedSpeed * this.createGoodsTime)
let time = 2000 - (this.speed * 30) > this.minDelayTime ? 2000 - (this.speed * 30) : this.minDelayTime
setTimeout(() => {
if (this.gameRunFlag) {
let type: string = this.getGoodType(gameParm)
let good = new Goods(this.baseOption.goods[type].texture)
good['type'] = type
good.width = goods[type].width ? goods[type].width : 120
good.height = goods[type].height ? goods[type].height : 80
good.x = ((countCol) * countWidth) + (countWidth / 2 - (good.width / 2))
good.y = 0
good.mouseEnable = false
good.visible = true
this.GoodsArr.push(good)
// this._root.goodsContainer.addChild(good)
}
// 递归执行
if (!this.gameRunFlag) return
else if (this.createGoodsTime >= this.goodsNum) this._root.dispatchEvent('game-over')
else this.createGoodsPushInArr()
}, time)
}
/**
* 掉落物执行凋落
* @param good 掉落物对象
* @param index 掉落物索引值
*/
fall (good, index) {
// console.log(speed)
let { goods, gameParm } = this.baseOption
if (good.y > 1624) {
this.removeGood(good, index)
} else {
if (this.gameRunFlag) {
let y1 = Math.ceil(0.4 * this.speed > this.maxDistance ? this.maxDistance : 0.4 * this.speed)
good.y += y1
// 如果玩家和物品发生碰撞
// if (this.hasHit(this._root.catcher, good)) {
// let gdata = goods[good.type]
// if (!gdata.endGame) {
// if (gdata.hitTexture) this._root.dispatchEvent('game-catcher-hitTexture', gdata)
// this._root.dispatchEvent('game-score-change', gdata.score)
// } else {
// if (gdata.hitTexture) this._root.dispatchEvent('game-catcher-hitTexture', gdata)
// this._root.dispatchEvent('game-over')
// }
// this.removeGood(good, index)
// }
}
}
}
/**
* 移除掉落物
* @param good 掉落物对象
* @param index 掉落物索引值
*/
removeGood (good, index, destroy = false) {
// console.log('remove ', good, index)
// this._root.goodsContainer.removeChild(good)
if (!destroy) this.GoodsArr.splice(index, 1)
}
onEnterFrame () {
if (this.GoodsArr && this.GoodsArr.length) {
if (this.gameRunFlag) this.GoodsArr.forEach((item, index) => { this.fall(item, index) })
else this.GoodsArr.forEach((item, index) => { this.removeGood(item, index) })
}
}
/**
* 游戏结束 调用
*/
destroy() {
// 重置 参数
this.initResetParam()
getStage().removeEventListener(
FYGE.Event.ENTER_FRAME,
this.onEnterFrame,
this
)
}
/**
* 返回 掉落物 类型
* @param gameParm 游戏配置
*/
getGoodType (gameParm) {
let type
let num = this.sum(1, 100)
if (num >= 1 && num <= gameParm.getScorePR) type = 'getScore'
else if (num > gameParm.getScorePR && num <= 100 - gameParm.endGamePR ) type = 'delScore'
else type = 'endGame'
return type
}
/**
* 碰撞检测
* @param a a盒子
* @param b b盒子
*/
private hasHit(a, b) {
if (
Math.abs((a.x + a.width / 2) - (b.x + b.width / 2)) < a.width / 2 + b.width / 2 - 40
&&
Math.abs((a.y + a.height / 2) - (b.y + b.height / 2)) < a.height / 2 + b.height / 2 - 40
) {
return true;
} else {
return false;
}
}
// 取 随机数
sum = (m: number, n: number) => {
var num = Math.floor(Math.random() * (m - n) + n)
return num
}
// 取 一位小数
toDecimal (x) {
let f = parseFloat(x)
if (isNaN(f)) {
console.warn('速度参数叠加出错')
return null
}
f = Math.round(x * 100)/100
return f
}
}
\ No newline at end of file
project/src/canvas/game/src/chuansongdai/game/ScoreBoard.ts 0 → 100644
View file @ 904eaecc
import { RES } from "../../../module/RES"
import resCanvasList from '../../../resCanvasList'
import { Tools } from "../../Tools"
export default class Catecher extends FYGE.Container {
_root;
// 用户信息
userInfo;
// 左用户分
scoreLeft;
// 右用户分
scoreRight;
// 时间
timerNumer: 60;
timeText;
// 倒计时函数
timerFunc;
// 左 用户板
userBoard_left;
// 右 用户板
userBoard_right;
// 左 用户 头像
userAvatar_left;
// 右 用户 头像
userAvatar_right;
// 左 用户 得分
userScore_left;
// 右 用户 得分
userScore_right;
// 文案
text;
constructor (root, userInfo) {
super()
this.timerNumer = 60
this.userInfo = userInfo
this._root = root
this.create()
}
create () {
this.x = 0
this.y = 90 + 1624 / 2 - this._root.stageHeight / 2
this.width = 750
this.height = 220
this.userBoard_left = Tools.getSprite(resCanvasList['9df91df7-fc44-4d31-9f52-88d1ff65c9ba'].url, 0, 16)
this.userBoard_left.width = 326
this.userBoard_left.height = 158
this.userBoard_right = Tools.getSprite(resCanvasList['9606b410-5d79-4759-a3f6-026dbb6fad0b'].url, 424, 0)
this.userBoard_right.width = 326
this.userBoard_right.height = 158
this.addChild(this.userBoard_left)
this.addChild(this.userBoard_right)
this.timeText = Tools.getText(this.timerNumer + 'S', 50, '#904f5e', FYGE.TEXT_ALIGN.CENTER)
this.timeText.textWidth = 750
this.timeText.textHeight = 80
this.timeText.y = 90
this.timeText.verticalAlign = FYGE.VERTICAL_ALIGN.MIDDLE
this.addChild(this.timeText)
this.text = Tools.getText(`${this.timerNumer}秒内收集雅顿产品数量较多者获胜`, 24, '#904f5e', FYGE.TEXT_ALIGN.CENTER)
this.text.x = 0
this.text.y = 190
this.text.textWidth = 750
this.text.textHeight = 40
this.text.verticalAlign = FYGE.VERTICAL_ALIGN.MIDDLE
this.addChild(this.text)
this.userAvatar_left = this.createAvatar('left', '//yun.duiba.com.cn/spark/assets/炸弹.67df66e9cf5e166c8cf6d340886ef094a84954c9.png')
this.userAvatar_right = this.createAvatar('right', '//yun.duiba.com.cn/spark/assets/炸弹.67df66e9cf5e166c8cf6d340886ef094a84954c9.png')
this.addChild(this.userAvatar_left)
this.addChild(this.userAvatar_right)
this.userScore_left = this.createScore('left')
this.userScore_right = this.createScore('right')
this.addChild(this.userScore_left)
this.addChild(this.userScore_right)
}
updateScore(score) {
this.scoreLeft += score
}
start (time) {
this.scoreLeft = 0
this.scoreRight = 0
this.timerNumer = time
this.updateTime(this.timerNumer)
this.timerFunc = setInterval(() => {
this.updateTime(--this.timerNumer)
// 时间消耗完毕
if (this.timerNumer <= 0) this.dispatchEvent('game-over')
}, 1000)
}
updateTime(time) {
this.timeText.text = time.toString() + 'S'
}
createScore (type) {
let t = new FYGE.Container()
t.width = 120
t.height = 60
let text = Tools.getText('0分', 36, '#ffffff', FYGE.TEXT_ALIGN.CENTER)
text.verticalAlign = FYGE.VERTICAL_ALIGN.MIDDLE
text.textWidth = 120
text.textHeight = 60
text.x = 0
text.y = 0
t['updateScore'] = (score) => {
text.text = score + '分'
}
if (type === 'left') {
t.x = 170
t.y = 108
} else if (type === 'right') {
t.x = 470
t.y = 92
}
t.addChild(text)
return t
}
createAvatar(type, avatar) {
let c = new FYGE.Container()
c.width = 120
c.height = 120
let a = Tools.getCircle(60, 0xffe2eb, 1, 60, 60)
let p = Tools.getSprite(avatar, 0, 0)
p.width = 120
p.height = 120
c['updateAvatar'] = (avatar) => { p.texture = RES.getRes(avatar) }
c.addChild(p)
c.addChild(a)
c.mask = a
if (type === 'left') {
c.x = 26
c.y = 28
} else if (type === 'right') {
c.x = 604
c.y = 12
}
return c
}
}
\ No newline at end of file
project/src/canvas/game/src/chuansongdai/game/goodsContainer.ts 0 → 100644
View file @ 904eaecc
import { RES } from "../../../module/RES"
import resCanvasList from '../../../resCanvasList'
import { Tools } from "../../Tools"
import { getStage } from '../../scenes/stage'
export default class GoodsContainer extends FYGE.Container {
_root;
// 传送带背景
back;
// 传送带棍子 的 容器
lineContainer;
// 传送带棍子 的 数组
lineArr = [];
// 生产棍子 的 interval函数
createLineTimeOut = null
// 掉落物容器
goodsContainer;
// 掉落物碰撞检测区域
goodsHitArea;
// 掉落物数组
goodsArr = [];
// 掉落物皮肤
goodsTextures;
// 产生掉落物 的 interval函数
createGoodTimeOut = null
// 掉落物 深度总数
goodsDeepIndex;
// 进入可被滑动的 掉落物
intoGoods = [];
private speed = 0.3 // 初速度
private acceleratedSpeed = 0.006 // 加速度
constructor (root) {
super()
this._root = root
this.goodsDeepIndex = 1000
this.goodsTextures = [
{ texture: resCanvasList['d1379fca-f21e-40f0-b0f0-06c188d4b4dc'].url, score: 2, dir: 'left', wrong: -2, width: 92, height: 220, aX: -4 },
{ texture: resCanvasList['0bd734c1-9c1a-428e-8a9c-cef373baed9d'].url, score: 5, dir: 'left', wrong: -2, width: 102, height: 224, aX: -2 },,
{ texture: resCanvasList['f455b42a-0e67-43d8-b7c5-520760160631'].url, score: 1, dir: 'right', wrong: 'endGame', width: 123, height: 120, aX: -12 },
{ texture: resCanvasList['9e512c7f-88e2-4b85-a2f0-afd2062247e1'].url, score: 4, dir: 'left', wrong: -2, width: 126, height: 141, aX: 0 },
{ texture: resCanvasList['30ac266d-0388-4659-9c3e-e741f3c671c7'].url, score: 3, dir: 'left', wrong: -2, width: 80, height: 206, aX: 0 },
{ texture: resCanvasList['f455b42a-0e67-43d8-b7c5-520760160631'].url, score: 1, dir: 'right', wrong: 'endGame', width: 123, height: 120, aX: -12 }
]
this.create()
}
create () {
this.width = 750
this.height = 988
this.x = 0
this.y = 636
this.back = Tools.getSprite(resCanvasList['b292e9c5-4565-4ecb-bf0b-1a9d7268b7c0'].url, 156, 0)
this.back.width = 438
this.back.height = 988
this.addChild(this.back)
this.lineContainer = new FYGE.Container()
this.lineContainer.width = 750
this.lineContainer.height = 988
let maskRect = new FYGE.Graphics()
maskRect.lineStyle(2, 0x00ff00)
maskRect.beginFill(0x00ff00)
maskRect.moveTo(316, 2)
maskRect.lineTo(438, 2)
maskRect.lineTo(582, 987)
maskRect.lineTo(168, 987)
maskRect.lineTo(314, 2)
maskRect.endFill()
maskRect.alpha = 0.4
this.lineContainer.addChild(maskRect)
this.lineContainer.mask = maskRect
this.addChild(this.lineContainer)
this.startLine()
this.goodsContainer = new FYGE.Container()
this.goodsContainer.width = 750
this.goodsContainer.height = 988
let maskGoodRect = Tools.getRect(750, 988)
this.goodsContainer.addChild(maskGoodRect)
this.goodsContainer.mask = maskGoodRect
this.addChild(this.goodsContainer)
this.startGoods()
// let checkRect = Tools.getRect(750, 300, 0xf333ff, .1)
// checkRect.x = 0
// checkRect.y = 400
// this.addChild(checkRect)
}
// 收到 滑动方向
getDirection (direction) {
console.log(this.intoGoods)
if (this.intoGoods.length) {
this.intoGoods[0].turn = true
this.intoGoods[0].turnDirection(direction)
this.intoGoods.shift()
}
}
// 销毁 事件和循环
destroy () {
getStage().removeEventListener(
FYGE.Event.ENTER_FRAME,
this.onEnterFrame,
this
)
clearInterval(this.createLineTimeOut)
this.createLineTimeOut = null
clearInterval(this.createGoodTimeOut)
this.createGoodTimeOut = null
}
// 掉落物开始掉落
startGoods () {
this.createGoodTimeOut = setInterval(() => {
let g = this.createGoods()
this.goodsArr.unshift(g)
this.goodsContainer.addChildAt(g, -1)
// g.zIndex = --this.goodsDeepIndex
}, 900)
}
createGoods () {
let arr = [...this.goodsTextures]
// let arr = [...this.goodsTextures, ...this.goodsTextures]
// arr.pop()
let idx = this.sum(0, arr.length)
let g = new FYGE.Container()
g.width = arr[idx].width
g.height = arr[idx].height
let gt = Tools.getSprite(arr[idx].texture)
gt.width = arr[idx].width
gt.height = arr[idx].height
gt.x = -gt.width/2
gt.y = -gt.height
g.addChild(gt)
// g.anchorX = arr[idx].width / 2 + arr[idx].aX
// g.anchorY = arr[idx].height
g.x = 375
g.y = -120
g.alpha = 0.2
g.scaleX = 0.38
g.scaleY = 0.38
g['turn'] = false
g['into'] = false
g['speed'] = this.speed + 0.06
g['turnDirection'] = (direction, cb) => {
if (direction === 'left') {
// this.goodsArr.splice(index, 1)
FYGE.Tween.removeTweens(g)
FYGE.Tween.get(g, null, null)
.to({
x: 100, //- (g.width * g.scale) / 2,
y: 620,
alpha: .75
}, 200)
.to({
alpha: 0
}, 580)
}
else if (direction === 'right') {
// this.goodsArr.splice(index, 1)
FYGE.Tween.removeTweens(g)
FYGE.Tween.get(g, null, null)
.to({
x: 670,
y: 620,
alpha: .75
}, 200)
.to({
alpha: 0
}, 580)
}
}
g['fadeOut'] = (index) => {
FYGE.Tween.removeTweens(g)
FYGE.Tween.get(g, null, null)
.to({alpha: 0}, 500)
.call(() => {
this.goodsArr.splice(index, 1)
this.goodsContainer.removeChild(g)
})
}
// g['test01'] = () => {
// g.width = 300
// }
// g['test02'] = () => {
// g.width = 20
// }
return g
}
// 掉落物 掉落
fallGood (good, index) {
good.speed += this.acceleratedSpeed + 0.0006
if (good.y > 1300) {
good.fadeOut(index)
// this.removeGood(index)
} else if (!good.turn) {
let y1 = good.speed,
sx = 0.00168,
sy = 0.00168
good.alpha = good.alpha >= 0.7 ? 1 : good.alpha + 0.002
good.scaleX += sx
good.scaleY += sy
good.y += y1
}
if ((good.y - good.height * good.scaleY >= 240 && good.y <= 740) && !good.into) {
good.into = true
// good.test01()
this.intoGoods.push(good)
} else if (good.into && (good.y - good.height * good.scaleY < 240 || good.y > 740)) {
good.into = false
// good.test02()
this.intoGoods.shift()
}
}
// 移除掉落物
removeGood (index) {
let g = this.goodsArr.splice(index, 1)
this.goodsContainer.removeChild(g)
}
// 产生 传送带棍子
createLine () {
let line = Tools.getSprite(resCanvasList['ad20a814-c0d4-4010-a76d-8e9114778580'].url)
line.width = 434
line.height = 6
line.x = 375 - 434 / 2
line.y = 0
line.alpha = 0
line['speed'] = this.speed
return line
}
// 传送带开始 滚动
startLine () {
// 游戏开始 之前 传送带上需要先存在10根棍子
for (let i = 1; i <= 10; i++) {
let line = this.createLine()
this.lineArr.push(line)
}
this.lineArr.forEach((line, index) => {
// line.y += index * (50 * (1 + index * 0.1))
line.y += index * 100
line.alpha += index * 0.01
line.speed += index * 10 * this.acceleratedSpeed
line.origin = true
// console.log(line.y, index)
})
this.lineContainer.addChildren(...this.lineArr)
setTimeout(() => {
getStage().addEventListener(
FYGE.Event.ENTER_FRAME,
this.onEnterFrame,
this
)
this.createLineTimeOut = setInterval(() => {
let l2 = this.createLine()
this.lineArr.unshift(l2)
this.lineContainer.addChild(l2)
}, 800)
}, 1000)
}
// 移除传送带棍子 并 添加
removeLine (index) {
let l = this.lineArr.pop()
// console.log(l)
this.lineContainer.removeChild(l)
}
// 传送带掉落
fallLine (line, index) {
line.speed += this.acceleratedSpeed + 0.0024
if (line.y > 1000) {
this.removeLine(index)
} else {
let y1 = line.speed + 0.00082
line.alpha = line.alpha >= 0.2 ? 0.9 : line.alpha + 0.0008
line.y += y1
}
}
onEnterFrame () {
if (this._root.gameStartFlag) this.goodsArr.forEach((good, index) => { this.fallGood(good, index) })
this.lineArr.forEach((line, index) => { this.fallLine(line, index) })
}
// 取 随机数
sum = (m: number, n: number) => {
var num = Math.floor(Math.random() * (m - n) + n)
return num
}
}
\ No newline at end of file
taobao_mini/client/components/comMissionModal/comMissionModal.axml
View file @ 904eaecc
......@@ -9,8 +9,7 @@
<view class="mission_title">浏览制定商品30s</view>
<view class="mission_describe">乐园门票 <text class="mission_describe_hightlight">+1</text></view>
</view>
<view class="mission_btn mission_btn_active">
<!-- <image class="mission_btn_back" src="{{resList['e4530dc3-a3c7-4992-8553-2be55e6407b0'].url}}" /> -->
<view class="mission_btn mission_btn_active" onTap="gotoSeeGoods">
<text class="mission_btn_text">去浏览</text>
</view>
</view>
......@@ -23,8 +22,7 @@
<view class="mission_title">观看直播1分钟</view>
<view class="mission_describe">乐园门票 <text class="mission_describe_hightlight">+1</text></view>
</view>
<view class="mission_btn">
<!-- <image class="mission_btn_back" src="{{resList['e4530dc3-a3c7-4992-8553-2be55e6407b0'].url}}" /> -->
<view class="mission_btn" onTap="gotoSeeLive">
<text class="mission_btn_text">去观看</text>
</view>
</view>
......@@ -37,8 +35,7 @@
<view class="mission_title">完成下单订单</view>
<view class="mission_describe">乐园门票 <text class="mission_describe_hightlight">+1</text></view>
</view>
<view class="mission_btn">
<!-- <image class="mission_btn_back" src="{{resList['e4530dc3-a3c7-4992-8553-2be55e6407b0'].url}}" /> -->
<view class="mission_btn" onTap="gotoBuy">
<text class="mission_btn_text">去下单</text>
</view>
</view>
......@@ -51,8 +48,7 @@
<view class="mission_title">关注店铺</view>
<view class="mission_describe">乐园门票 <text class="mission_describe_hightlight">+1</text></view>
</view>
<view class="mission_btn">
<!-- <image class="mission_btn_back" src="{{resList['120d6fd3-a52d-4e8e-9064-160f112ff0da'].url}}" /> -->
<view class="mission_btn" onTap="gotoFollow">
<text class="mission_btn_text">已关注</text>
</view>
</view>
......@@ -64,8 +60,7 @@
<view class="mission_title">加入店铺会员</view>
<view class="mission_describe">乐园门票 <text class="mission_describe_hightlight">+1</text></view>
</view>
<view class="mission_btn">
<!-- <image class="mission_btn_back" src="{{resList['120d6fd3-a52d-4e8e-9064-160f112ff0da'].url}}" /> -->
<view class="mission_btn" onTap="gotoJoin">
<text class="mission_btn_text">已关注</text>
</view>
</view>
......
taobao_mini/client/components/comMissionModal/comMissionModal.js
View file @ 904eaecc
......@@ -2,6 +2,7 @@ import API from '../../api';
const app = getApp();
const { tbcc } = app;
const { commonToast, getAuthUserInfo, navigateToOutside, getSystemInfo } = tbcc.tb;
const { SHARE_CONFIG, REDIRECT_URL } = tbcc.constants;
import resList from '../../resconfig/resList'
Component({
......@@ -21,6 +22,27 @@ Component({
onModalClose() {
const { onModalClose } = this.props;
onModalClose && onModalClose();
}
},
gotoSeeGoods() {
},
gotoSeeLive() {
},
gotoBuy() {
},
gotoFollow() {
},
gotoJoin() {
},
}
});
\ No newline at end of file
taobao_mini/client/components/commonModal/commonModal.acss deleted 100755 → 0
View file @ dcb4a4f7
.common-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 20;
}
.common-modal__shade {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.75);
}
.common-modal__container {
position: absolute;
width: 500rpx;
height: 300rpx;
background: #4eafd7;
background-size: 100% 100%;
left: 50%;
top: 50%;
margin-left: -250rpx;
margin-top: -150rpx;
padding: 30rpx;
}
.common-modal__bd {
font-size: 28rpx;
text-align: center;
color: #fff;
padding: 50rpx 0;
}
.common-modal__close {
position: absolute;
right: -20rpx;
top: -80rpx;
height: 86rpx;
width: 86rpx;
background: url('../../assets/modal_close_btn.png') center center no-repeat;
background-size: 48rpx 48rpx;
z-index: 9;
}
.common-modal__confirm-btn {
margin: 0 auto;
text-align: center;
width: 341rpx;
height: 77rpx;
line-height: 77rpx;
background: #FFF;
background-size: 100% 100%;
font-size: 30rpx;
color: #0077a9;
font-weight: bold;
}
taobao_mini/client/components/commonModal/commonModal.axml deleted 100755 → 0
View file @ dcb4a4f7
<view class="common-modal">
<view class="common-modal__shade modal-animate-fade-in" />
<view class="common-modal__container modal-animate-zoom-in">
<view class="common-modal__close" onTap="onModalClose" />
<view class="common-modal__bd">
<text>{{data.content}}</text>
</view>
<view class="common-modal__ft" a:if="{{data.btnText}}">
<view onTap="onModalConfirm" class="common-modal__confirm-btn">{{data.btnText}}</view>
</view>
</view>
</view>
taobao_mini/client/components/commonModal/commonModal.js deleted 100755 → 0
View file @ dcb4a4f7
Component({
methods: {
onModalClose() {
const { onModalClose } = this.props;
onModalClose && onModalClose();
},
onModalConfirm () {
const { onModalConfirm } = this.props;
onModalConfirm && onModalConfirm();
}
}
});
\ No newline at end of file
taobao_mini/client/components/commonModalT1/commonModalT1.acss 0 → 100755
View file @ 904eaecc
.commonT1-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 20;
}
.commonT1-modal__shade {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.75);
}
.jiang_li_dan_chuang {
width: 500rpx;
height: 523rpx;
opacity: 1;
left: 125rpx;
top: calc(50% - 261rpx);
position: absolute;
}
.dan_chuang_bei_jing2 {
width: 100%;
height: 100%;
opacity: 1;
top: 0;
left: 0;
position: absolute;
}
.qu_chou_jiang {
width: 209rpx;
height: 88rpx;
opacity: 1;
left: 31rpx;
bottom: 36rpx;
position: absolute;
}
.ji_xu_guan_kan {
width: 209rpx;
height: 88rpx;
opacity: 1;
left: 262rpx;
bottom: 36rpx;
position: absolute;
}
.kan_shi_pin_jiang_li {
width: 100%;
height: 56rpx;
line-height: 56rpx;
opacity: 1;
left: 0;
top: 100rpx;
position: absolute;
display: inline-block;
font-size: 50rpx;
text-align: center;
color: transparent;
background: linear-gradient(to top, #b65443, #ec8268);
-webkit-background-clip: text;
font-weight: 700;
}
.huo_de_ya_dun_bi {
width: 100%;
height: 32rpx;
line-height: 32rpx;
opacity: 1;
left: 0;
top: 230rpx;
text-align: center;
position: absolute;
font-size: 32rpx;
color: rgba(200, 82, 73, 1);
font-weight: 500;
}
.tu_ceng40 {
width: 100%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
opacity: 1;
left: 0;
top: 288rpx;
position: absolute;
font-size: 55rpx;
color: rgba(200, 82, 73, 1);
font-weight: 500;
}
.commonT1_btn {
width: 300rpx;
height: 88rpx;
position: absolute;
bottom: 30rpx;
left: 100rpx;
}
.an_niu_guan_bi_dan_chuang_kao_bei23 {
width: 50rpx;
height: 50rpx;
opacity: 0.5;
right: -50rpx;
top: -50rpx;
position: absolute;
}
taobao_mini/client/components/commonModalT1/commonModalT1.axml 0 → 100755
View file @ 904eaecc
<view class="commonT1-modal">
<view class="commonT1-modal__shade modal-animate-fade-in">
<view class="jiang_li_dan_chuang">
<image class="dan_chuang_bei_jing2" src="{{resList['7203516e-8791-4974-955e-c8a044e16c80'].url}}"/>
<text class="kan_shi_pin_jiang_li">{{title}}</text>
<view class="flex_content">
<view class="huo_de_ya_dun_bi">{{content}}</view>
</view>
<image class="commonT1_btn" src="{{btnImg}}" mode="aspectFill" onTap="onModalConfirm"/>
<image
class="an_niu_guan_bi_dan_chuang_kao_bei23" onTap="onModalClose"
src="{{resList['4abc8bb6-5779-49ad-84b4-b4ade4f51fcb'].url}}"
/>
</view>
</view>
</view>
taobao_mini/client/components/commonModalT1/commonModalT1.js 0 → 100755
View file @ 904eaecc
import resList from '../../resconfig/resList'
Component({
data: {
resList: resList,
title: '',
content: '',
btnImg: ''
},
props: {
title: '',
content: '',
btnImg: ''
},
didMount () {
this.setData({
title: this.props.data.title,
content: this.props.data.content,
btnImg: this.props.data.btnImg
})
},
didUpdate (prevProps, prevData) {
console.log(this.props.data)
if (this.props.data.title !== prevData.title
|| this.props.data.content !== prevData.content
|| this.props.data.btnImg !== prevData.btnImg) {
this.setData({
title: this.props.data.title,
content: this.props.data.content,
btnImg: this.props.data.btnImg
})
}
},
methods: {
onModalClose() {
const { onModalClose } = this.props;
onModalClose && onModalClose();
},
onModalConfirm() {
const { onModalConfirm } = this.props;
onModalConfirm && onModalConfirm();
}
}
});
\ No newline at end of file
taobao_mini/client/components/commonModalT2/commonModalT2.acss 0 → 100755
View file @ 904eaecc
.commonT2-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 20;
}
.commonT2-modal__shade {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.75);
}
.jiang_li_dan_chuang {
width: 500rpx;
height: 523rpx;
opacity: 1;
left: 125rpx;
top: calc(50% - 261rpx);
position: absolute;
}
.dan_chuang_bei_jing2 {
width: 100%;
height: 100%;
opacity: 1;
top: 0;
left: 0;
position: absolute;
}
.qu_chou_jiang {
width: 209rpx;
height: 88rpx;
opacity: 1;
left: 31rpx;
bottom: 36rpx;
position: absolute;
}
.ji_xu_guan_kan {
width: 209rpx;
height: 88rpx;
opacity: 1;
left: 262rpx;
bottom: 36rpx;
position: absolute;
}
.kan_shi_pin_jiang_li {
width: 100%;
height: 56rpx;
line-height: 56rpx;
opacity: 1;
left: 0;
top: 100rpx;
position: absolute;
display: inline-block;
font-size: 50rpx;
text-align: center;
color: transparent;
background: linear-gradient(to top, #b65443, #ec8268);
-webkit-background-clip: text;
font-weight: 700;
}
.huo_de_ya_dun_bi {
width: 100%;
height: 32rpx;
line-height: 32rpx;
opacity: 1;
left: 0;
top: 230rpx;
text-align: center;
position: absolute;
font-size: 32rpx;
color: rgba(200, 82, 73, 1);
font-weight: 500;
}
.tu_ceng40 {
width: 100%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
opacity: 1;
left: 0;
top: 288rpx;
position: absolute;
font-size: 55rpx;
color: rgba(200, 82, 73, 1);
font-weight: 500;
}
.an_niu_guan_bi_dan_chuang_kao_bei23 {
width: 50rpx;
height: 50rpx;
opacity: 0.5;
right: -50rpx;
top: -50rpx;
position: absolute;
}
taobao_mini/client/components/commonModalT2/commonModalT2.axml 0 → 100755
View file @ 904eaecc
<view class="commonT2-modal">
<view class="commonT2-modal__shade modal-animate-fade-in">
<view class="jiang_li_dan_chuang">
<image class="dan_chuang_bei_jing2" src="{{resList['7203516e-8791-4974-955e-c8a044e16c80'].url}}"/>
<image class="qu_chou_jiang" src="{{resList['b71e74b5-16ad-4260-a382-8cf200e9e5a7'].url}}" />
<image class="ji_xu_guan_kan" src="{{resList['8da146cc-69cd-41fa-bed3-e7194ce037aa'].url}}" />
<text class="kan_shi_pin_jiang_li">{{title}}</text>
<view class="flex_content">
<view class="huo_de_ya_dun_bi">{{detail}}</view>
<view class="tu_ceng40" a:if="{{}}">
<image class="flex_content_image" src="{{}}" />
<text>+{{coins}}</text>
</view>
</view>
<image
class="an_niu_guan_bi_dan_chuang_kao_bei23" onTap="onModalClose"
src="{{resList['4abc8bb6-5779-49ad-84b4-b4ade4f51fcb'].url}}"
/>
</view>
</view>
</view>
taobao_mini/client/components/commonModalT2/commonModalT2.js 0 → 100755
View file @ 904eaecc
import resList from '../../resconfig/resList'
Component({
data: {
resList: resList,
title: '',
detail: '',
hasYDCoin: false,
coins: 0
},
props: {
title: '',
detail: '',
hasYDCoin: false,
coins: 0
},
didMount () {
this.setData({
title: this.props.data.title,
detail: this.props.data.detail,
hasYDCoin: this.props.data.hasYDCoin
})
},
didUpdate (prevProps, prevData) {
if (this.props.data.title !== prevData.data.title || this.props.data.detail !== prevData.data.detail) {
this.setData({
title: this.props.data.title,
detail: this.props.data.detail
})
}
if (this.props.data.hasYDCoin !== prevData.data.hasYDCoin) {
this.setData({
hasYDCoin: this.props.data.hasYDCoin
})
}
},
methods: {
onModalClose() {
const { onModalClose } = this.props;
onModalClose && onModalClose();
},
onModalConfirm() {
const { onModalConfirm } = this.props;
onModalConfirm && onModalClose();
}
}
});
\ No newline at end of file
taobao_mini/client/components/commonModalT2/commonModalT2.json 0 → 100755
View file @ 904eaecc
{
"component": true
}
\ No newline at end of file
taobao_mini/client/pages/homePage/homePage.acss
View file @ 904eaecc
......@@ -204,7 +204,48 @@
position: absolute;
}
.video_wrapper{
position: absolute;
z-index: 30;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: black;
}
.video_wrapper_mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
z-index: 20;
}
.video {
position: absolute;
width: 100%;
height: 100%;
background: black;
/* margin: 16rpx auto; */
}
.video_hide {
position: absolute;
z-index: 40;
width: 140rpx;
height: 100rpx;
top: 30;
right: 30;
background: rgba(255, 255, 255, .9);
color: rgb(0, 0, 0);
font-size: 22rpx;
overflow: hidden;
text-align: center;
line-height: 100rpx;
}
.video_block {
width: 430rpx;
......@@ -223,11 +264,6 @@
overflow: hidden;
box-shadow: 0 0 24rpx rgba(159, 87, 85, .46);
}
.video {
width: 400rpx;
height: 230rpx;
margin: 16rpx auto;
}
.an_niu {
width: 95rpx;
height: 94rpx;
......
taobao_mini/client/pages/homePage/homePage.axml
View file @ 904eaecc
......@@ -10,42 +10,47 @@
<!-- 头部 规则-奖品 按钮 -->
<view class="head">
<image class="head_ruler" onTap="showRewardsModal" src="{{resList['ee8882be-4b1d-43eb-bad7-8d96318c5022'].url}}" />
<image class="head_ruler" onTap="showCommonMoadalT1" src="{{resList['ee8882be-4b1d-43eb-bad7-8d96318c5022'].url}}" />
<!-- <image class="head_ruler" onTap="" src="{{resList['ee8882be-4b1d-43eb-bad7-8d96318c5022'].url}}" /> -->
<image class="head_rewards" onTap="gotoMyPrizePage" src="{{resList['74a63fd3-6776-44a2-990e-fadac00fb757'].url}}" />
</view>
<!-- 视频部分 -->
<view hidden="{{videoBottom_timeout}}" class="video_block {{ videoBottom ? 'block_opciaty0' : ''}}">
<view class="video_block_wrapper">
<video
id="videoCtx"
class="video"
src="{{videoSrc}}"
poster="{{posterSrc}}"
controls="{{showAllControls}}"
loop="{{isLooping}}"
muted="{{muteWhenPlaying}}"
show-mute-btn="{{showMuteButton}}"
show-fullscreen-btn="{{showFullScreenButton}}"
object-fit="{{objectFit}}"
autoplay="{{autoPlay}}"
direction="{{directionWhenFullScreen}}"
initial-time="{{initTime}}"
mobilenetHintType="{{mobilenetHintType}}"
onPlay="onPlay"
onPause="onPause"
onEnded="onEnded"
onError="onPlayError"
onTimeUpdate="onTimeUpdate"
onLoading="onLoading"
/>
<view class="video_wrapper" a:if="{{videoShow}}">
<view class="video_wrapper_mask"></view>
<video
id="videoCtx"
class="video"
src="{{videoSrc}}"
poster="{{posterSrc}}"
controls="{{false}}"
loop="{{isLooping}}"
muted="{{muteWhenPlaying}}"
show-mute-btn="{{showMuteButton}}"
show-fullscreen-btn="{{showFullScreenButton}}"
object-fit="{{objectFit}}"
autoplay="{{autoPlay}}"
direction="{{directionWhenFullScreen}}"
initial-time="{{initTime}}"
mobilenetHintType="{{mobilenetHintType}}"
onPlay="onPlay"
onPause="onPause"
onEnded="onEnded"
onError="onPlayError"
onTimeUpdate="onTimeUpdate"
onLoading="onLoading"
/>
</view>
<view class="video_hide" onTap="videoHideFunc"> 缩小视频 </view>
<!-- 视频部分 -->
<view hidden="{{videoBottom_timeout}}" onTap="videoShowFunc" class="video_block {{ videoBottom ? 'block_opciaty0' : ''}}">
<view class="video_block_wrapper">
<view class="video_block_text">
<view>观看XXXXX视频</view>
<view>领取20雅顿币</view>
<view>赢惊喜抽奖次数</view>
</view>
<view class="video_block_up" onTap="onVideoTurnSmall">收起视频</view>
</view>
......@@ -72,13 +77,13 @@
</view>
<view class="bottom_ydgame_block" onTap="openShowChooseGame">
<image class="bottom_ydgame_block_image" src="{{resList['23d2db92-a7a2-48a2-a34e-a7c1ec02fc2f'].url}}" />
<view class="bottom_ydgame_block_coin"> 雅顿币：XXX </view>
<image class="bottom_ydgame_block_image" src="{{resList['81a085b2-ce9c-4a8f-bdcc-d08f10083134'].url}}" />
<view class="bottom_ydgame_block_coin"> 免费门票 x2 </view>
</view>
<view class="bottom_mission_block" onTap="showMissionModal">
<image class="bottom_mission_block_image" src="{{resList['db8bff60-3223-428b-81a8-27c4742a6469'].url}}" />
<view class="bottom_mission_block_freenum">免费次数X2</view>
<!-- <view class="bottom_mission_block_freenum">免费次数X2</view> -->
</view>
<!-- 选择游戏 -->
......@@ -97,7 +102,6 @@
<!-- 动画 - 游戏部分 -->
<pagecanvas
class="homepage_pagecanvas"
hidden="{{ !gameShow }}"
onBackPage="backToPage"
gameType="{{ gameType }}"
>
......@@ -105,6 +109,9 @@
<!-- 弹窗部分 -->
<common-modal-t1 a:if="{{commonModalVisibleT1}}" data="{{commonModalDataT1}}" onModalClose="closeCommonModalT1" onModalConfirm="confirmCommonModalT1" />
<common-modal-t2 a:if="{{commonModalVisibleT2}}" data="{{commonModalDataT2}}" onModalClose="closeCommonModalT2" onModalConfirm="confirmCommonModalT2" />
<rule-modal a:if="{{ruleModalVisible}}" onModalClose="closeRuleModal"><text>{{rule}}</text></rule-modal>
<rewards-modal a:if="{{rewardsModalVisible}}" onModalClose="closeRewardsModal"></rewards-modal>
<prizes-modal a:if="{{prizesModalVisible}}" onModalClose="closePrizesModal"></prizes-modal>
......
taobao_mini/client/pages/homePage/homePage.js
View file @ 904eaecc
......@@ -41,7 +41,7 @@ Page({
mobilenetHintType: 1,
videoActiveIndex: 0,
// ------ 视频 配置 ------ //
// 出现 选择游戏弹窗
showChooseGame: false,
// 出现 游戏
......@@ -50,12 +50,15 @@ Page({
gameShow_timeout: false,
// 展示游戏类型: 1 - 传送带, 2 - 消消乐, 3 - 开场动画, 0 - 不展示
gameType: 0,
commonModalConfirm: null,
commonModalVisible: false,
commonModalConfirmT1: null,
commonModalVisibleT1: false,
commonModalConfirmT2: null,
commonModalVisibleT2: false,
ruleModalVisible: false,
rewardsModalVisible: false,
prizesModalVisible: false,
missionModalVisible: false
missionModalVisible: false,
videoShow: true
},
// 视频地址列表 - 存储播放时常
videoSrcArr: [
......@@ -79,12 +82,13 @@ Page({
onLoad(query) {
console.info(`Page onLoad with query: ${JSON.stringify(query)}`);
// 页面加载
this.openAnimation().then(res => {
// this.getAuth();
this.backToPage()
this.init()
})
// 开场动画
// this.openAnimation().then(res => {
// // this.getAuth();
// this.backToPage()
// this.init()
// })
},
init() {
......@@ -154,7 +158,7 @@ Page({
this.showCommonModal({
content: '活动还未开始\n请稍后',
btnText: '我知道了',
commonModalVisible: true,
commonModalVisibleT1: true,
confirmCallback: () => {
this.closeCommonModal();
}
......@@ -276,21 +280,26 @@ Page({
}
},
// video - hide
videoHideFunc() {
console.log('videoHideFunc')
this.setData({ videoShow: false })
},
videoShowFunc() {
this.setData({ videoShow: true })
setTimeout(() => {
this.videoCtx.play()
}, 400)
},
// video - onLoading
onLoading (e) { console.log(e) },
// 页面隐藏
onHide() {
},
// 显示通用弹层
showCommonModal({ content, btnText, confirmCallback }) {
this.setData({
commonModalConfirm: confirmCallback || null,
commonModalVisible: true,
commonModalData: { content, btnText }
});
},
gotoMyPrizePage() {
my.navigateTo({url: '../myprize/myprize'})
......@@ -308,6 +317,38 @@ Page({
showRewardsModal() { this.setData({ rewardsModalVisible: true }) },
showPrizesModal() { this.setData({ prizesModalVisible: true }) },
showMissionModal () { this.setData({ missionModalVisible: true}) },
// 显示通用弹层
showCommonMoadalT1 ({
title = 'test- title',
content = 'test- content',
confirmCallback = () => {},
btnImg = '//yun.duiba.com.cn/spark/assets/32d8536184c3539c0d9655d03c1b60f3d5e1f60a.png' }) {
this.setData({
commonModalVisibleT1: true,
commonModalDataT1: { title, content, btnImg },
confirmCommonModalT1: () => {
confirmCallback()
this.closeCommonModalT1()
}
})
},
// 显示通用弹层
showCommonMoadalT2 ({
title = 'test- title',
content = 'test- content',
confirmCallback,
btnImg = '//yun.duiba.com.cn/spark/assets/32d8536184c3539c0d9655d03c1b60f3d5e1f60a.png' }) {
this.setData({
commonModalVisibleT2: true,
commonModalDataT2: { title, content, btnImg },
confirmCommonModalT2: () => {
confirmCallback()
this.closeCommonModalT2()
}
})
},
// 弹窗控制 - 关闭
closeRuleModal() { this.setData({ ruleModalVisible: false }) },
......@@ -315,20 +356,10 @@ Page({
closePrizesModal () { this.setData({ prizesModalVisible: false}) },
closeMissionModal () { this.setData({ missionModalVisible: false}) },
// 通用弹层 - 开启
confirmCommonModal() {
const { commonModalConfirm } = this.data;
commonModalConfirm && commonModalConfirm();
},
// 通用弹层 - 关闭
closeCommonModal() {
this.setData({
commonModalVisible: false
});
},
// 通用弹层 - 关闭 - T1
closeCommonModalT1() { this.setData({ commonModalVisibleT1: false }); },
// 通用弹层 - 关闭 - T2
closeCommonModalT2() { this.setData({ commonModalVisibleT2: false }); },
onUnload() {
// 页面被关闭
......
taobao_mini/client/pages/homePage/homePage.json
View file @ 904eaecc
......@@ -4,7 +4,8 @@
"rule-modal": "/components/ruleModal/ruleModal",
"rewards-modal": "/components/comRewardsModal/comRewardsModal",
"prizes-modal": "/components/comPrizesModal/comPrizesModal",
"common-modal": "/components/commonModal/commonModal",
"common-modal-t1": "/components/commonModalT1/commonModalT1",
"common-modal-t2": "/components/commonModalT2/commonModalT2",
"mission-modal": "/components/comMissionModal/comMissionModal",
"end-modal": "/components/endModal/endModal"
}
......
taobao_mini/client/pages/index/index.axml
View file @ 904eaecc
......@@ -12,6 +12,6 @@
<rule-modal a:if="{{ruleModalVisible}}" onModalClose="closeRuleModal"><text>{{rule}}</text></rule-modal>
<common-modal a:if="{{commonModalVisible}}" data="{{commonModalData}}" onModalClose="closeCommonModal" onModalConfirm="confirmCommonModal" />
<common-modal-t1 a:if="{{commonModalVisible}}" data="{{commonModalData}}" onModalClose="closeCommonModal" onModalConfirm="confirmCommonModal" />
<end-modal a:if="{{false}}" />
\ No newline at end of file
taobao_mini/client/pages/index/index.json
View file @ 904eaecc
{
"usingComponents": {
"rule-modal": "/components/ruleModal/ruleModal",
"common-modal": "/components/commonModal/commonModal",
"common-modal-t1": "/components/commonModalT1/commonModalT1",
"end-modal": "/components/endModal/endModal"
}
}
\ No newline at end of file
taobao_mini/client/pages/pagecanvas/pagecanvas.axml
View file @ 904eaecc
<view disable-scroll="true" class="page-game" onTap="testBack">
<view disable-scroll="true" class="page-game">
<canvas disable-scroll="true" id="canvas" type="2d" class="canvas" onTouchStart="onMouseEvent" onTouchMove="onMouseEvent" onTouchEnd="onMouseEvent" onReady="onCanvasReady">
</canvas>
</view>
......
taobao_mini/client/pages/pagecanvas/pagecanvas.js
View file @ 904eaecc
......@@ -39,7 +39,7 @@ Component({
},
methods: {
testBack () {
back () {
this.props.onBackPage()
},
......@@ -121,6 +121,9 @@ Component({
url: `/pages/${parameter.name}/${parameter.name}`
});
break;
case "mine.backToPage":
this.back()
break;
case "mine.showModal": // 展示弹窗
data = { success: true, data: {} };
const key = `${parameter.name}Visible`;
......
taobao_mini/client/pages/turnTable/turnTablePage.acss 0 → 100644
View file @ 904eaecc
.turntable_wrapper {
top: 0rpx;
left: 0rpx;
width: 750rpx;
height: auto;
min-height: 100vh;
display: block;
position: relative;
}
.turntable_wrapper .bg1 {
width: 750rpx;
height: 1624rpx;
opacity: 1;
position: absolute;
z-index: 0;
}
.zhuang_shi_kao_bei {
width: 750rpx;
height: 1178rpx;
opacity: 1;
position: absolute;
z-index: 1;
}
.turntable_wrapper .turntable_block {
width: 750rpx;
height: 1559rpx;
opacity: 1;
position: relative;
z-index: 2;
}
.turntable {
width: 750rpx;
/* height: auto; */
opacity: 1;
top: 40rpx;
position: absolute;
}
.turntable .turntable_rotate {
width: 750rpx;
height: 1519rpx;
opacity: 1;
position: absolute;
}
.turntable .turntable_rotate .rotate_block {
width: 750rpx;
height: 1519rpx;
opacity: 1;
position: absolute;
}
.rotate {
width: 648rpx;
height: 648rpx;
opacity: 1;
left: 52rpx;
top: 426rpx;
position: absolute;
z-index: 10;
transform-origin: center center;
}
/* .rotate_start {
animation: rotate_infinite 1s linear infinite;
}
@keyframes rotate_infinite {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} */
.backboard {
width: 586rpx;
height: 586rpx;
opacity: 1;
margin: 31rpx auto;
/* left: 142rpx;
top: 526rpx;
position: absolute; */
}
.backboard image {
width: 100%;
height: 100%;
}
.rewards {
width: 464rpx;
height: 448rpx;
opacity: 1;
left: 92rpx;
top: 100rpx;
position: absolute;
z-index: 2;
}
.rewards_item {
width: 130rpx;
height: 160rpx;
position: absolute;
opacity: 1;
/* background-color: black; */
transform-origin: center center;
}
.rewards_item_name {
display: block;
width: 100%;
line-height: 2em;
font-size: 20rpx;
color: rgba(239, 43, 31, 1);
text-align: center;
}
.rewards_item_image {
display: block;
width: 96rpx;
height: 96rpx;
margin: 4rpx auto 0;
}
.rewards_item_0{
left: 76rpx;
top: -10rpx;
}
.rewards_item_1{
left: -6rpx;
top: 140rpx;
}
.rewards_item_2{
left: 76rpx;
bottom: -14rpx;
}
.rewards_item_3{
right: 76rpx;
bottom: -14rpx;
}
.rewards_item_4{
right: -6rpx;
top: 140rpx;
}
.rewards_item_5{
right: 76rpx;
top: -10rpx;
}
.rotate_block .rotate_shadow {
width: 750rpx;
height: 1519rpx;
opacity: 0.10;
position: absolute;
}
.rotate_block .outside {
width: 648rpx;
height: 648rpx;
opacity: 1;
left: 52rpx;
top: 426rpx;
position: absolute;
}
.turntable .start_button {
width: 148rpx;
height: 173rpx;
opacity: 1;
left: 302rpx;
top: 650rpx;
position: absolute;
z-index: 10;
}
.start_button .start_button_image {
width: 148rpx;
height: 173rpx;
opacity: 1;
position: absolute;
}
.start_button .start_button_text {
width: 66rpx;
height: 64rpx;
opacity: 1;
left: 42rpx;
top: 62rpx;
line-height: 36rpx;
position: absolute;
font-size: 32rpx;
font-weight: 500;
color: rgba(255, 255, 255, 1);
}
.wen_an01 {
width: 607rpx;
height: 194rpx;
opacity: 1;
left: 73rpx;
top: 218rpx;
position: absolute;
}
.wen_an_biao_ti {
width: 607rpx;
height: 194rpx;
opacity: 1;
position: absolute;
}
.yao_qing_hao_you_zanc_wei_zhi {
width: 100%;
height: 71rpx;
opacity: 1;
left: 0;
top: 10rpx;
position: absolute;
text-align: center;
font-size: 74rpx;
font-weight: 500;
color: rgba(0, 0, 0, 1);
}
.zu2 {
width: 307rpx;
height: 66rpx;
opacity: 1;
left: 148rpx;
top: 128rpx;
position: absolute;
}
.xing_zhuang1 {
width: 307rpx;
height: 4rpx;
opacity: 1;
top: 62rpx;
position: absolute;
}
.xing_zhuang1_kao_bei {
width: 307rpx;
height: 4rpx;
opacity: 1;
position: absolute;
}
.chou_liang_xi_hao_li {
width: 100%;
height: 60rpx;
opacity: 1;
left: 0;
top: 122rpx;
text-align: center;
position: absolute;
font-size: 42rpx;
color: rgba(21, 24, 29, 1);
}
.tu_ceng27 {
width: 20rpx;
height: 15rpx;
opacity: 1;
position: absolute;
font-size: 41.84353rpx;
color: rgba(0, 0, 0, 1);
}
.tu_ceng26 {
width: 20rpx;
height: 15rpx;
opacity: 1;
left: 587rpx;
top: 104rpx;
position: absolute;
font-size: 41.84353rpx;
color: rgba(0, 0, 0, 1);
}
.chance {
width: 100%;
height: 24rpx;
opacity: 1;
left: 0;
top: 1148rpx;
position: absolute;
font-size: 24rpx;
text-align: center;
color: rgba(0, 0, 0, 1);
}
.logo25 {
width: 295rpx;
height: 196rpx;
opacity: 1;
left: 228rpx;
position: absolute;
}
.myVideo_wrapper {
position: absolute;
top: 100rpx;
left: 100rpx;
width: 500rpx;
height: 400rpx;
transform: translate3d(0, 0, 0);
}
.myVideo_wrapper_after {
transition: transform 1.5s ease-in-out;
position: absolute;
transform: translate3d(300, 400, 0);
transform: translate3d(300, 400, 0);
width: 300rpx;
height: 200rpx;
}
.myVideo {
width: 100%;
height: 100%;
}
taobao_mini/client/pages/turnTable/turnTablePage.axml 0 → 100644
View file @ 904eaecc
<view class="turntable_wrapper">
<!-- 背景 -->
<image class="bg1" src="{{resList['d5744a06-e2d1-461e-9163-795e5a6bc0b1'].url}}" />
<image class="zhuang_shi_kao_bei" src="{{resList['6340407d-93c4-449d-99af-d989f8122bcf'].url}}" />
<!-- MAIN BLOCK -->
<view class="turntable_block">
<!-- 旋转转盘 -->
<view class="turntable">
<view class="turntable_rotate">
<view class="rotate_block">
<!-- 转盘阴影 -->
<image class="rotate_shadow" src="{{resList['9afd16fe-ad73-4429-8249-ae238b7390fe'].url}}" />
<!-- 旋转部分 -->
<view class="rotate" animation="{{myAnimation}}">
<view class='backboard'>
<image src="{{resList['c701ee0a-3d13-4bc7-9d7c-efc1e7aceb6e'].url}}" mode="aspectFill" />
</view>
<view class="rewards">
<view a:for='{{listTurnTable}}' a:key='*this' data-itemIdx='{{index}}'
class='rewards_item {{`rewards_item_${index}`}}' style='transform: rotate({{-(index) * 60 - 30}}deg);'>
<label class='rewards_item_name' style='color: {{ ((index + 1) % 2) ? "rgba(239, 43, 31, 1)" : "#ffffff" }}'>{{item.name}}</label>
<image class='rewards_item_image' src='{{item.image}}' mode='{{aspectFill}}' style='height:{{item.type == 5 ? 72 : 96}}rpx' />
<!-- <label class='rewards_item_name' style='color: {{ ((index + 1) % 2) ? "rgba(239, 43, 31, 1)" : "#ffffff" }}'>ysl 唇膏</label> -->
<!-- <image class='rewards_item_image' src='//yun.duiba.com.cn/spark-dev/assets/79bd22b20d0633d716c45292b79faab3714ae0ac.png' /> -->
</view>
</view>
</view>
<!-- 外层不动 -->
<image class="outside" src="{{resList['432017f6-3320-4468-88bc-95b5d9930157'].url}}" />
</view>
</view>
<!-- 开始按钮 -->
<view class="start_button" onTap='handdlerStartButton'>
<image class="start_button_image" src="{{resList['12643641-690f-4d56-be21-7c4c41b2177c'].url}}" />
<label class="start_button_text">开始 抽奖</label>
</view>
</view>
<!-- 顶部文案 -->
<label class="chance">剩余抽奖次数：{{leftTimes}}次</label>
</view>
</view>
<!-- 弹窗-奖品信息 -->
<rewards-modal a:if='{{rewardsModalShow}}' modalData='{{rewardsModalData}}' onModalClose='onModalClose' onModalConfirm='onModalConfirm' data-modalType='rewards' />
<!-- 弹窗-抽奖结果 -->
<!-- <draw-modal a:if='{{drawModalShow}}' modalData='{{drawModalData}}' onModalClose='onModalClose' onModalConfirm='onModalConfirm' data-modalType='draw' /> -->
taobao_mini/client/pages/turnTable/turnTablePage.js 0 → 100644
View file @ 904eaecc
import { commonToast, getAuthUserInfo, navigateToOutside } from '../../utils/utils'
import { SHARE_CONFIG, REDIRECT_URL } from '../../constants'
import API from '../../api'
import resList from '../../resList'
import { debounce } from '../../utils/utils'
const app = getApp()
Page({
data: {
resList: resList,
listTurnTable_test: [1, 2, 3, 4, 5], // 转盘奖品信息_测试
listTurnTable: [], // 转盘奖品信息
listRange: [], // 排行榜奖品信息
prizeList: [], // props中获取到的奖品信息
tempStyle: { // 转盘旋转
transform: ''
},
myAnimation: '', // 旋转动画
rotateFlag: false, // 是否在旋转中
rewardsInfo: {}, // 获奖的奖品信息
leftTimes: 0, // 剩余抽奖次数
rewardsModalShow: false, // 弹窗控制-奖品信息
drawModalShow: true, // 弹窗控制-抽奖结果
},
activityId: undefined,
onLoad(query) {
// 页面加载
// this.getAuth()
console.info(`Page onLoad with query: ${JSON.stringify(query)}`)
let { activityId } = app
this.activityId = activityId
this.getDataTurnTable()
this.getDataRange()
},
onCallBack () {
console.log(this.data.listRange)
},
async getDataTurnTable () {
const { success, data } = await API.getPrizeConfigList({ activityId: this.activityId, type: 2 }).catch(res => {
commonToast(res && res.message)
}) || {}
if (success && data) {
// 开发用
console.log('res Rewards: type- TurnTable', data)
let heartBroken = {
image: resList['acf10efc-702b-4145-aad3-805e269acb46'].url,
name: '谢谢参与',
type: 5
}
data.list.splice(4, 0, heartBroken)
// list.push(heartBroken)
this.setData({ listTurnTable: data.list, leftTimes: data.leftTimes })
}
},
async getDataRange () {
const { success, data } = await API.getPrizeConfigList({ activityId: this.activityId, type: 1 }).catch(res => {
commonToast(res && res.message)
}) || {}
if (success && data) {
console.log('res Rewards: type- Range', data)
if (data.list.length) data.list.forEach(item => {
item.rank = JSON.parse(item.rank)
item.rank = (item.rank.length === 1 && item.rank == 1) ? '第1名' : `${item.rank}名`
})
this.setData({ listRange: data.list })
}
},
// 点击防抖
handdlerStartButton () {
debounce (this.startDraw(), 300)
},
timer: null,
timerCount: 0,
// 开始旋转 转盘
async startDraw () {
console.log('startDraw run')
if (this.data.rotateFlag) return
if (!this.data.leftTimes > 0) {
commonToast('您没有抽奖次数 快去邀请好友入会吧')
return
}
const { success, data } = await API.drawLotteryPrize({ activityId: this.activityId, type: 2 }).catch(res => {
commonToast(res && res.message)
return
}) || {}
this.setData({ rotateFlag: true })
if (success && data) {
let rotateT // 旋转扇面
let rotateDeg // 选装角度
// 5：谢谢参与
if (data.type == 5) {
this.data.listTurnTable.forEach((item, index) => {
if (item.type == 5) rotateT = index + 1
})
// 1：权益(优惠券)，2：积分，3：实物
} else if (data.type == 1 || data.type == 2 || data.type == 3) {
this.data.listTurnTable.forEach((item, index) => {
if (item.itemId == data.id) {
rotateT = index + 1
rotateT = 4 + 1
this.setData({ rewardsInfo: data })
}
})
}
// 调整位置-归零
this.animateRotation(this.timerCount ? 360 * (++this.timerCount * 2) : 0, 1)
rotateDeg = rotateT * 60 - 30
// 开始动画
setTimeout(() => {
this.animateRotation(360 * (++this.timerCount * 2) + rotateDeg, 1000 * (rotateDeg / 360) + 1000)
//更改 rotateFlag
setTimeout(() => { this.setData({ rotateFlag: false }) }, 1000 * (rotateDeg / 360) + 1000 + 20)
}, 300)
this.setData({ leftTimes: --this.data.leftTimes })
}
},
// 旋转动画rot:旋转角度，timegap:旋转时间
animateRotation (rot, timegap) {
console.log('animateRotation run')
let animation = my.createAnimation({
transformOrigin: 'center center',
duration: timegap,
timeFunction: 'ease-out',
delay: 0
})
animation.rotate(rot).step()
this.setData({
myAnimation: animation.export()
})
},
onModalClose (e) {
// console.log(e)
let fn = () => {
switch (e.currentTarget.dataset.modalType) {
case 'draw':
this.setData({ drawModalShow: false })
break;
case 'rewards':
this.setData({ rewardsModalShow: false })
break;
default:
break;
}
}
debounce( fn() , 300)
},
onModalConfirm (e) {
// TODO: do something
this.onModalClose(e)
},
init() {
this.getIndex()
},
onReady() {
// 页面加载完成
},
onShow() {
// 页面显示
},
onHide() {
// 页面隐藏
},
onUnload() {
// 页面被关闭
},
onTitleClick() {
// 标题被点击
},
onPullDownRefresh() {
// 页面被下拉
},
onReachBottom() {
// 页面被拉到底部
},
/**
* 获取用户权限
*/
async getAuth() {
const userInfo = await getAuthUserInfo()
if (!userInfo) return
const { nickName, avatar } = userInfo
app.nickName = nickName
app.avatar = avatar
this.login()
},
/**
* 获取主接口
*/
async getIndex() {
const { activityId } = app
const { success, data } = await API.getIndex({ activityId }).catch(res => {
commonToast(res && res.message)
}) || {}
if (success && data) {
const { title, content, rule } = data
this.setData({ title, content, rule })
}
},
/**
* 登录接口
*/
async login() {
const { activityId, nickName, avatar } = app
const { success } = await API.login({ activityId, nickName, avatar }).catch(res => {
commonToast(res && res.message)
}) || {}
if (success) {
this.init()
}
},
/**
* 显示规则弹层
*/
showRuleModal() {
this.setData({
ruleModalVisible: true
})
},
/**
* 通用弹出确认按钮回调
*/
confirmCommonModal() {
const { commonModalConfirm } = this.data
commonModalConfirm && commonModalConfirm()
},
/**
* 执行开始
*/
doStart() {
this.showCommonModal({
content: '活动还未开始\n请稍后',
btnText: '我知道了',
commonModalVisible: true,
confirmCallback: () => {
this.closeCommonModal()
}
})
},
/**
* 显示通用弹层
* @param {object} options content: 通用弹层内容 btnText:按钮文案 confirmCallback: 按钮确认回调
*/
showCommonModal({ content, btnText, confirmCallback }) {
this.setData({
commonModalConfirm: confirmCallback || null,
commonModalVisible: true,
commonModalData: { content, btnText }
})
},
/**
* 跳转到天猫页面
*/
goTmallPage() {
navigateToOutside(REDIRECT_URL['tmall'])
},
/**
* 关闭通用弹层
*/
closeCommonModal() {
this.setData({
commonModalVisible: false
})
},
/**
* 关闭活动规则弹层
*/
closeRuleModal() {
this.setData({
ruleModalVisible: false
})
},
onShareAppMessage() {
// 返回自定义分享信息
return SHARE_CONFIG
},
})
taobao_mini/client/pages/turnTable/turnTablePage.json 0 → 100644
View file @ 904eaecc
{
"usingComponents": {
}
}
\ No newline at end of file
taobao_mini/client/resconfig/resList.js
View file @ 904eaecc
......@@ -370,6 +370,12 @@ const resList = {
ext: '.png',
url: '//yun.duiba.com.cn/spark/assets/mybtn查看物流.03ea3cdd889c8f09885b24a56dc99460734bc8a6.png',
uuid: 'a5624249-1ab0-4cc8-bdfb-6e7c68a329d8'
},
'81a085b2-ce9c-4a8f-bdcc-d08f10083134': {
name: 'yd_happypark_new',
ext: '.png',
url: '//yun.duiba.com.cn/spark/assets/yd_happypark_new.9c828c4054ba32b97937fd955b93d73029cc315e.png',
uuid: '81a085b2-ce9c-4a8f-bdcc-d08f10083134'
}
};
export default resList;
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