取名小程序开发

NamingAssistant/pages/home/index.js

@@ -0,0 +1,182 @@
+const namingStore = require("../../store/namingStore");
+const messages = require("../../constants/messages");
+const { validateSurname, generateName } = require("../../services/namingService");
+const { showRewardedVideoAd } = require("../../utils/adService");
+const config = require("../../config/index");
+
+function showToast(title) {
+  if (typeof tt === "undefined" || !tt.showToast) {
+    console.warn("Toast:", title);
+    return;
+  }
+  tt.showToast({
+    title,
+    icon: "none",
+    duration: 2000
+  });
+}
+
+Page({
+  data: {
+    surname: "",
+    surnameError: "",
+    gender: "male",
+    birthDate: "",
+    birthTime: "",
+    nameLength: "double",
+    isSubmitting: false,
+    quotaRemaining: null
+  },
+  onLoad() {
+    const { form, quota } = namingStore.getState();
+    this.setData({
+      surname: form.surname,
+      gender: form.gender,
+      birthDate: form.birthDate,
+      birthTime: form.birthTime,
+      nameLength: form.nameLength,
+      quotaRemaining: config.maxDailyQuota - quota.count
+    });
+  },
+  handleSurnameInput(event) {
+    const value = (event.detail.value || "").trim();
+    this.setData({
+      surname: value,
+      surnameError: ""
+    });
+    namingStore.setForm({ surname: value });
+  },
+  handleSurnameBlur() {
+    const surname = this.data.surname;
+    if (!surname) {
+      return;
+    }
+    validateSurname(surname)
+      .then((response) => {
+        if (!response || response.isValid === false) {
+          showToast(messages.INVALID_SURNAME);
+          this.setData({
+            surname: "",
+            surnameError: messages.INVALID_SURNAME
+          });
+          namingStore.setForm({ surname: "" });
+        } else {
+          this.setData({ surnameError: "" });
+        }
+      })
+      .catch(() => {
+        showToast(messages.INVALID_SURNAME);
+        this.setData({
+          surname: "",
+          surnameError: messages.INVALID_SURNAME
+        });
+        namingStore.setForm({ surname: "" });
+      });
+  },
+  handleGenderChange(event) {
+    const value = event.detail.value;
+    this.setData({ gender: value });
+    namingStore.setForm({ gender: value });
+  },
+  handleBirthDateChange(event) {
+    const value = event.detail.value;
+    this.setData({ birthDate: value });
+    namingStore.setForm({ birthDate: value });
+  },
+  handleBirthTimeChange(event) {
+    const value = event.detail.value;
+    this.setData({ birthTime: value });
+    namingStore.setForm({ birthTime: value });
+  },
+  handleNameLengthChange(event) {
+    const value = event.detail.value;
+    this.setData({ nameLength: value });
+    namingStore.setForm({ nameLength: value });
+  },
+  handleGoFavorites() {
+    if (typeof tt !== "undefined" && tt.navigateTo) {
+      tt.navigateTo({ url: "/pages/favorites/index" });
+    }
+  },
+  validateForm() {
+    const { surname, gender, birthDate, nameLength } = this.data;
+    if (!surname || !gender || !birthDate || !nameLength) {
+      showToast(messages.FORM_INCOMPLETE);
+      return false;
+    }
+    if (!namingStore.canGenerateToday()) {
+      showToast(messages.QUOTA_EXCEEDED);
+      return false;
+    }
+    return true;
+  },
+  updateQuotaState() {
+    const { quota } = namingStore.getState();
+    this.setData({
+      quotaRemaining: Math.max(config.maxDailyQuota - quota.count, 0)
+    });
+  },
+  handleGenerate() {
+    if (this.data.isSubmitting) {
+      return;
+    }
+    if (!this.validateForm()) {
+      return;
+    }
+    this.setData({ isSubmitting: true });
+    showRewardedVideoAd()
+      .then(() => this.generateName())
+      .catch((error) => {
+        if (error && error.code === "ad_not_completed") {
+          showToast(messages.WATCH_AD_TO_CONTINUE);
+        } else {
+          showToast("广告加载失败，请稍后重试");
+        }
+        this.setData({ isSubmitting: false });
+      });
+  },
+  generateName() {
+    const payload = {
+      surname: this.data.surname,
+      gender: this.data.gender,
+      birthDate: this.data.birthDate,
+      birthTime: this.data.birthTime || "",
+      nameLength: this.data.nameLength
+    };
+    generateName(payload)
+      .then((response) => {
+        const results = response && Array.isArray(response.results) ? response.results : [];
+        if (!results.length) {
+          showToast(messages.GENERATION_FAILED);
+          return;
+        }
+        const normalizedResults = results.reduce((accumulator, item) => {
+          const name = item.name || item.Name || "";
+          if (!name) {
+            return accumulator;
+          }
+          accumulator.push({
+            name,
+            meaning: item.meaning || item.Meaning || ""
+          });
+          return accumulator;
+        }, []);
+        if (!normalizedResults.length) {
+          showToast(messages.GENERATION_FAILED);
+          return;
+        }
+        namingStore.setResults(normalizedResults);
+        namingStore.incrementQuota();
+        this.updateQuotaState();
+        if (typeof tt !== "undefined" && tt.navigateTo) {
+          tt.navigateTo({ url: "/pages/result/index" });
+        }
+      })
+      .catch(() => {
+        showToast(messages.GENERATION_FAILED);
+      })
+      .finally(() => {
+        this.setData({ isSubmitting: false });
+      });
+  }
+});

NamingAssistant/pages/home/index.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "取名"
+}

NamingAssistant/pages/home/index.ttml

@@ -0,0 +1,91 @@
+<view class="page">
+  <view class="glow-layer">
+    <view class="glow glow-one"></view>
+    <view class="glow glow-two"></view>
+    <view class="glow glow-three"></view>
+  </view>
+
+  <scroll-view class="content" scroll-y="true">
+    <view class="title-block">
+      <text class="title">玄名殿</text>
+      <text class="subtitle">循星辰八卦，揽乾坤灵意，为你凝练天赐之名</text>
+
+    </view>
+
+    <view class="form-card">
+      <view class="form-item">
+        <text class="label">姓氏</text>
+        <input
+          class="input"
+          maxlength="2"
+          placeholder="请输入1-2个汉字"
+          placeholder-class="placeholder-text"
+          value="{{surname}}"
+          bindinput="handleSurnameInput"
+          bindblur="handleSurnameBlur"
+        />
+        <text class="error-text" tt:if="{{surnameError}}">{{surnameError}}</text>
+      </view>
+
+      <view class="form-item">
+        <text class="label">性别</text>
+        <radio-group class="radio-group" bindchange="handleGenderChange">
+          <label class="radio-option {{gender === 'male' ? 'selected' : ''}}" hover-class="radio-hover">
+            <radio color="#ff6a6a" value="male" checked="{{gender === 'male'}}" />男
+          </label>
+          <label class="radio-option {{gender === 'female' ? 'selected' : ''}}" hover-class="radio-hover">
+            <radio color="#ff6a6a" value="female" checked="{{gender === 'female'}}" />女
+          </label>
+        </radio-group>
+      </view>
+
+      <view class="form-item dual">
+        <view class="dual-item">
+          <text class="label">出生日期</text>
+          <picker mode="date" value="{{birthDate}}" bindchange="handleBirthDateChange">
+            <view class="picker-value">{{birthDate}}</view>
+          </picker>
+        </view>
+        <view class="dual-item">
+          <text class="label">具体时间</text>
+          <picker mode="time" value="{{birthTime}}" bindchange="handleBirthTimeChange">
+            <view class="picker-value {{birthTime ? '' : 'placeholder'}}">
+              {{birthTime || '请选择（可选）'}}
+            </view>
+          </picker>
+        </view>
+      </view>
+
+      <view class="form-item">
+        <text class="label">名字字数</text>
+        <radio-group class="radio-group" bindchange="handleNameLengthChange">
+          <label class="radio-option {{nameLength === 'single' ? 'selected' : ''}}" hover-class="radio-hover">
+            <radio color="#ff6a6a" value="single" checked="{{nameLength === 'single'}}" />单名
+          </label>
+          <label class="radio-option {{nameLength === 'double' ? 'selected' : ''}}" hover-class="radio-hover">
+            <radio color="#ff6a6a" value="double" checked="{{nameLength === 'double'}}" />双名
+          </label>
+        </radio-group>
+      </view>
+    </view>
+
+    <!-- <view class="quota" tt:if="{{quotaRemaining !== null}}">
+      今日剩余次数：<text class="quota-number">{{quotaRemaining}}</text>
+    </view> -->
+
+    <view class="action-container">
+      <button
+        class="primary generate-button"
+        type="primary"
+        bindtap="handleGenerate"
+        loading="{{isSubmitting}}"
+        disabled="{{isSubmitting}}"
+      >
+        ✨ 召唤天命之名 ✨
+      </button>
+      <button class="secondary favorites-button" bindtap="handleGoFavorites">
+        珍名阁
+      </button>
+    </view>
+  </scroll-view>
+</view>

NamingAssistant/pages/home/index.ttss

@@ -0,0 +1,223 @@
+.page {
+  position: relative;
+  min-height: 100vh;
+  overflow: hidden;
+}
+
+.glow-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.glow {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(110px);
+  opacity: 0.55;
+  animation: float 22s ease-in-out infinite;
+}
+
+.glow-one {
+  width: 320px;
+  height: 320px;
+  top: -140px;
+  left: -80px;
+  background: radial-gradient(circle, rgba(255, 212, 164, 0.9), rgba(255, 198, 134, 0.12));
+}
+
+.glow-two {
+  width: 260px;
+  height: 260px;
+  bottom: 160px;
+  right: -100px;
+  background: radial-gradient(circle, rgba(122, 154, 255, 0.85), rgba(22, 36, 82, 0.05));
+  animation-delay: 6s;
+}
+
+.glow-three {
+  width: 280px;
+  height: 280px;
+  bottom: -160px;
+  left: 40px;
+  background: radial-gradient(circle, rgba(197, 134, 255, 0.85), rgba(52, 24, 80, 0.05));
+  animation-delay: 12s;
+}
+
+@keyframes float {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  50% {
+    transform: translate3d(42px, -30px, 0);
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.content {
+  position: relative;
+  z-index: 2;
+  height: 100vh;
+  padding: 18px 12px 10px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.title-block {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.title {
+  font-size: 34px;
+  letter-spacing: 16px;
+  text-indent: 16px;
+  color: #fdf0dd;
+  text-shadow: 0 10px 26px rgba(255, 196, 132, 0.45);
+}
+
+.subtitle {
+  font-size: 14px;
+  color: rgba(255, 244, 227, 0.76);
+  line-height: 1.7;
+}
+
+.favorites-button {
+  margin: 10px auto 0;
+  padding: 0 28px;
+  width: 50%;
+  height: 30px;
+  line-height: 30px;
+  font-size: 12px;
+  background: linear-gradient(90deg, rgba(255, 230, 188, 0.22), rgba(143, 169, 255, 0.18));
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  box-shadow: 0 6px 14px rgba(16, 18, 40, 0.3);
+}
+
+.form-card {
+  background: linear-gradient(180deg, rgba(25, 31, 58, 0.9) 0%, rgba(15, 21, 40, 0.74) 100%);
+  border-radius: 24px;
+  padding: 22px 22px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  box-shadow: 0 18px 36px rgba(8, 12, 24, 0.38);
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-item {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.dual {
+  flex-direction: row;
+  gap: 14px;
+}
+
+.dual-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.label {
+  font-size: 15px;
+  color: rgba(255, 244, 227, 0.9);
+  letter-spacing: 4px;
+}
+
+.input,
+.picker-value {
+  background: rgba(9, 15, 33, 0.82);
+  border-radius: 14px;
+  padding: 14px 16px;
+  font-size: 15px;
+  color: #f8f2dd;
+  border: 1px solid rgba(82, 110, 166, 0.34);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  transition: border 0.2s ease, box-shadow 0.2s ease;
+}
+
+.input:focus,
+.picker-value:active {
+  border-color: rgba(255, 193, 135, 0.65);
+  box-shadow: 0 0 18px rgba(255, 193, 135, 0.35);
+}
+
+.placeholder-text,
+.picker-value.placeholder {
+  color: rgba(255, 244, 227, 0.46);
+}
+
+.radio-group {
+  display: flex;
+  gap: 14px;
+}
+
+.radio-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border-radius: 14px;
+  background: rgba(16, 24, 46, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  color: rgba(255, 244, 227, 0.82);
+  transition: transform 0.2s ease, border 0.2s ease, background 0.2s ease;
+}
+
+.radio-option.selected {
+  border-color: rgba(255, 124, 148, 0.65);
+  background: rgba(255, 118, 148, 0.16);
+  box-shadow: 0 12px 20px rgba(255, 118, 148, 0.2);
+  color: #ffe9e9;
+}
+
+.radio-hover {
+  transform: translateY(-2px);
+}
+
+.quota {
+  text-align: center;
+  font-size: 13px;
+  color: rgba(255, 244, 227, 0.65);
+  letter-spacing: 2px;
+}
+
+.quota-number {
+  font-size: 18px;
+  font-weight: 600;
+  color: #ffcda9;
+  margin-left: 8px;
+}
+
+.generate-button {
+  align-self: stretch;
+  height: 52px;
+  line-height: 52px;
+  font-size: 16px;
+  border-radius: 26px;
+  margin: 4px 6px 12px;
+  background: linear-gradient(135deg, #c374ff 0%, #6ba9ff 52%, #ff7bd1 100%);
+  box-shadow: 0 18px 32px rgba(120, 92, 255, 0.35);
+  letter-spacing: 3px;
+}
+
+.action-container {
+  padding-bottom: 8px;
+}
+
+.error-text {
+  color: #ff9e9b;
+  font-size: 12px;
+  letter-spacing: 1px;
+}