积分抽奖功能

任务要求

模拟积分抽奖程序，玩家首先输入玩家姓名，跳转到积分抽奖页面，玩家初始积分为1000分，在积分抽奖页面有红黄蓝灰四种卡片，抽中红卡加500分，抽中黄卡加200分，抽中蓝卡减500分，抽到灰卡积分清零。

抽卡规则：

1. 仅能抽3次
2. 积分清零不能继续

抽卡完毕后可以查看获奖情况：

L3（分数 ==2500）：笔记本

L2(分数>=1500)：智能手表

L1(分数>0)：钥匙扣

L0(分数<=0)：未中奖

界面原型：

1）入口页面：

2）抽卡页面：

3）开始抽卡：

4）抽卡结果：

涉及知识点

1. 常用属性方法，阴影设置

2. 线性布局，边距，内容对齐

3. @Styles、@Extend

4. 路由参数传递

5. 条件渲染

6. AlertDialog

1 入口页面

界面原型：

1）页面标题

在pages下面新建页面，命名为：ScoreGamePage，清除原有代码，仅留框架代码，然后添加如下代码，完成标题部分：

@Entry
@Component
struct ScoreGamePage {
  @State title: string = '积分抽奖'


  build() {
    Column(){

      Text(this.title)
        .fontSize(44)
        .fontWeight(FontWeight.Bolder)
        .margin(20)

    }
    .width('100%')
    .height('100%')

  }
}

预览效果：

2）布局【好运连连】部分

使用Row布局，【好运】占一行，【连连】占一行。

build() {
    Column({ space: 10 }) {

      Text(this.title)
        ...

      Row({ space: 10 }) {
        Text('好')
          .squareTxt(Color.Red)

        Text('运')

          .squareTxt(Color.Yellow)

      }

      Row({ space: 10 }) {
        Text('连')
          .squareTxt(Color.Blue)
        Text('连')
          .squareTxt(Color.Gray)

      }

    }
    .width('100%')
    .height('100%')

  }
}

使用@Extend定义全局样式（需要写在组件外面）：

@Extend(Text)
function squareTxt(color: Color) {
  .fontSize(50)
  .width(150)
  .height(150)
  .borderRadius(12)
  .backgroundColor(color)
  .textAlign(TextAlign.Center)
  .shadow({radius:8,color:'#ccc',offsetX:20,offsetY:20})

}

[!NOTE]

关于@Extend

1、扩展原生组件

2、属于全局样式，需在组件外定义，必须加function

3、可以传递参数

4、仅可使用所扩展组件的属性方法和所有组件的通用属性方法

预览效果：

3）输入玩家名及开始抽奖按钮

继续添加文本输入框和按钮：

      TextInput({placeholder:'请输入您的名字'})
        .width('95%')
        .margin(20)
      Button('开始抽奖')
        .width('95%')
        .height(50)
        .fontSize(22)

预览效果：