ea

2026-07-10 16:14:31 +08:00
commit 637b0bd144
158 changed files with 33269 additions and 0 deletions
@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "custom-nav": "/components/custom-nav/custom-nav"
+  },
+  "navigationStyle": "custom"
+}
@@ -0,0 +1,103 @@
+import { backgroundTemplates, updateTaskBackground } from "../../../utils/request"
+
+type Category = {
+  id: string
+  name: string
+}
+
+type BgTemplate = {
+  id: number
+  name: string
+  scene: string
+  category: string
+  coverUrl?: string
+  imageUrl?: string
+  videoUrl?: string
+  isRecommend?: number
+}
+
+function filterTemplates(category: string, templates: BgTemplate[]) {
+  if (category === 'all') return templates
+  return templates.filter((item) => item.category === category)
+}
+
+Page({
+  data: {
+    taskId: '',
+    categories: [] as Category[],
+    activeCategory: 'all',
+    selectedTemplate: 0,
+    allTemplates: [] as BgTemplate[],
+    templates: [] as BgTemplate[],
+    loading: false,
+  },
+
+  onLoad(options: any) {
+    this.setData({ taskId: options.taskId || options.taskid || '' })
+    this.loadBackgroundTemplates()
+  },
+
+  loadBackgroundTemplates() {
+    this.setData({ loading: true })
+    backgroundTemplates().then((res: any) => {
+      const categories = res && !res.code && res.data ? (res.data.categories || []) : []
+      const templates = res && !res.code && res.data ? (res.data.templates || []) : []
+      const selectedTemplate = templates.length ? Number(templates[0].id) : 0
+      this.setData({
+        categories,
+        allTemplates: templates,
+        templates: filterTemplates(this.data.activeCategory, templates),
+        selectedTemplate,
+        loading: false,
+      })
+    }).catch(() => {
+      this.setData({ loading: false })
+      wx.showModal({ title: '温馨提示', content: '背景模板加载失败，请稍后再试', showCancel: false })
+    })
+  },
+
+  handleBack() {
+    wx.navigateBack({
+      fail: () => wx.navigateTo({ url: '/pages/aiPackage/record/index' }),
+    })
+  },
+
+  handleCategorySelect(e: WechatMiniprogram.TouchEvent) {
+    const activeCategory = e.currentTarget.dataset.id
+    if (!activeCategory) return
+
+    const templates = filterTemplates(activeCategory, this.data.allTemplates)
+    this.setData({ activeCategory, templates })
+  },
+
+  handleTemplateSelect(e: WechatMiniprogram.TouchEvent) {
+    const selectedTemplate = Number(e.currentTarget.dataset.id || 0)
+    if (selectedTemplate <= 0) return
+
+    this.setData({ selectedTemplate })
+  },
+
+  handleConfirm() {
+    if (!this.data.taskId) {
+      wx.showModal({ title: '温馨提示', content: '创作记录不存在', showCancel: false })
+      return
+    }
+    if (this.data.selectedTemplate <= 0) {
+      wx.showModal({ title: '温馨提示', content: '请选择背景模板', showCancel: false })
+      return
+    }
+
+    wx.showLoading({ mask: true, title: '保存背景中' })
+    updateTaskBackground(this.data.taskId, this.data.selectedTemplate).then((res: any) => {
+      wx.hideLoading()
+      if (!res.code) {
+        wx.redirectTo({ url: '/pages/aiPackage/gen/index?taskId=' + encodeURIComponent(this.data.taskId) })
+      } else {
+        wx.showModal({ title: '温馨提示', content: res.message || '背景保存失败', showCancel: false })
+      }
+    }).catch(() => {
+      wx.hideLoading()
+      wx.showModal({ title: '温馨提示', content: '网络异常，请稍后再试', showCancel: false })
+    })
+  },
+})
@@ -0,0 +1,44 @@
+<view class="bg-page">
+  <custom-nav padding-x="34">
+    <view class="bg-nav">
+      <view class="nav-back" bindtap="handleBack"><text></text></view>
+      <view class="nav-title-wrap">
+        <text class="nav-title">选择背景模板</text>
+        <text class="nav-subtitle">选择适合你视频内容的场景背景</text>
+      </view>
+      <view class="nav-space"></view>
+    </view>
+  </custom-nav>
+
+  <view class="bg-content">
+    <scroll-view class="category-scroll" scroll-x="true" enhanced="true" show-scrollbar="false">
+      <view class="category-list">
+        <view wx:for="{{categories}}" wx:key="id"
+          class="category-item {{activeCategory === item.id ? 'category-active' : ''}}" data-id="{{item.id}}"
+          bindtap="handleCategorySelect">{{item.name}}</view>
+      </view>
+    </scroll-view>
+
+    <view class="template-grid">
+      <scroll-view class="auto-flex" enable-flex="true" scroll-y="true">
+        <view wx:for="{{templates}}" wx:key="id"
+          class="template-card {{selectedTemplate === item.id ? 'template-active' : ''}}" data-id="{{item.id}}"
+          bindtap="handleTemplateSelect">
+          <view class="scene-preview scene-{{item.scene}}">
+            <image class="scene-placeholder icon-placeholder" src="/static/images/my/image.png" mode="aspectFit">
+            </image>
+            <view class="select-circle top-circle {{selectedTemplate === item.id ? 'circle-active' : ''}}"><text></text>
+            </view>
+          </view>
+          <view class="template-foot">
+            <text>{{item.name}}</text>
+            <!-- <view class="select-circle foot-circle {{selectedTemplate === item.id ? 'circle-active' : ''}}">
+              <text></text></view> -->
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+
+    <view class="confirm-action" bindtap="handleConfirm">确认背景，去生成</view>
+  </view>
+</view>
@@ -0,0 +1,367 @@
+page {
+  min-height: 100vh;
+  background: #f8faff;
+  color: #111827;
+  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.bg-page {
+  width: 750rpx;
+  height: 100vh;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background:
+    radial-gradient(circle at 12% 0%, rgba(104, 126, 255, 0.08), transparent 34%),
+    radial-gradient(circle at 88% 10%, rgba(130, 86, 255, 0.08), transparent 30%),
+    linear-gradient(180deg, #fbfcff 0%, #f6f8ff 44%, #ffffff 100%);
+}
+
+.bg-nav {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.nav-back,
+.nav-space {
+  width: 60rpx;
+  height: 60rpx;
+  flex: 0 0 60rpx;
+  display: flex;
+  align-items: center;
+}
+
+.nav-back text {
+  width: 26rpx;
+  height: 26rpx;
+  display: block;
+  border-left: 5rpx solid #111827;
+  border-bottom: 5rpx solid #111827;
+  transform: rotate(45deg);
+  box-sizing: border-box;
+}
+
+.nav-title-wrap {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10rpx;
+}
+
+.nav-title {
+  color: #111827;
+  font-size: 34rpx;
+  line-height: 40rpx;
+  font-weight: 900;
+}
+
+.nav-subtitle {
+  max-width: 560rpx;
+  color: #6c7284;
+  font-size: 22rpx;
+  line-height: 28rpx;
+  font-weight: 600;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.bg-content {
+  flex: 1;
+  display: flex;
+  overflow-y: hidden;
+  flex-direction: column;
+  padding: 20rpx 18rpx 34rpx;
+  box-sizing: border-box;
+}
+
+.category-scroll {
+  width: 100%;
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+.auto-flex {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.category-list {
+  display: flex;
+  align-items: center;
+  gap: 10rpx;
+  padding: 2rpx 0 26rpx;
+}
+
+.category-item {
+  height: 46rpx;
+  padding: 0 18rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2rpx solid #e0e4f2;
+  border-radius: 24rpx;
+  background: #ffffff;
+  color: #656d80;
+  font-size: 21rpx;
+  line-height: 28rpx;
+  font-weight: 800;
+  box-sizing: border-box;
+  white-space: nowrap;
+  flex: 0 0 auto;
+}
+
+.category-active {
+  border-color: #7462ff;
+  color: #ffffff;
+  background: linear-gradient(100deg, #6b83ff 0%, #754df3 100%);
+  box-shadow: 0 8rpx 18rpx rgba(101, 85, 246, 0.2);
+}
+
+.template-grid {
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1;
+  overflow-y: auto;
+  justify-content: space-between;
+  row-gap: 30rpx;
+  padding: 0 0 34rpx;
+  box-sizing: border-box;
+}
+
+.template-card {
+  width: 326rpx;
+  display: flex;
+  flex-direction: column;
+  border: 2rpx solid transparent;
+  border-radius: 14rpx;
+  margin-bottom: 20rpx;
+  background: #ffffff;
+  box-shadow: 0 12rpx 30rpx rgba(83, 92, 151, 0.12);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.template-active {
+  border-color: #765eff;
+  box-shadow: 0 12rpx 30rpx rgba(101, 85, 246, 0.22);
+}
+
+.scene-preview {
+  height: 166rpx;
+  padding: 12rpx 14rpx;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: space-between;
+  justify-content: space-between;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.scene-window,
+.scene-light,
+.scene-plant,
+.scene-main {
+  flex: 0 0 auto;
+}
+
+.scene-window {
+  width: 96rpx;
+  height: 56rpx;
+  border-radius: 4rpx;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(225, 238, 250, 0.72) 100%);
+  box-shadow: inset 0 0 0 2rpx rgba(255, 255, 255, 0.5);
+}
+
+.scene-light {
+  width: 54rpx;
+  height: 66rpx;
+  border-radius: 28rpx 28rpx 10rpx 10rpx;
+  background: linear-gradient(180deg, rgba(255, 246, 210, 0.9), rgba(226, 170, 92, 0.35));
+}
+
+.scene-plant {
+  width: 44rpx;
+  height: 62rpx;
+  border-radius: 28rpx 28rpx 8rpx 8rpx;
+  background:
+    radial-gradient(circle at 30% 28%, #7db66d 0 10rpx, transparent 11rpx),
+    radial-gradient(circle at 68% 36%, #679f5d 0 12rpx, transparent 13rpx),
+    linear-gradient(180deg, transparent 0 42rpx, #b48354 43rpx 100%);
+}
+
+.plant-right {
+  transform: scale(0.82);
+}
+
+.scene-main {
+  width: 160rpx;
+  height: 54rpx;
+  border-radius: 10rpx 10rpx 4rpx 4rpx;
+  background: rgba(255, 255, 255, 0.72);
+  box-shadow: inset 0 -8rpx 0 rgba(188, 158, 120, 0.18);
+}
+
+.scene-live {
+  background:
+    linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 2rpx, transparent 2rpx 100%),
+    linear-gradient(180deg, #fff4df 0%, #f9ead4 48%, #dfc09a 100%);
+}
+
+.scene-office {
+  background:
+    linear-gradient(90deg, rgba(150, 168, 184, 0.16) 0 2rpx, transparent 2rpx 64rpx),
+    linear-gradient(180deg, #eff6fb 0%, #dfe7ec 52%, #c8d2d9 100%);
+}
+
+.scene-office .scene-main {
+  width: 178rpx;
+  background: linear-gradient(180deg, #f8fbfd 0%, #cbd7df 100%);
+}
+
+.scene-classroom {
+  background: linear-gradient(180deg, #fff4df 0%, #f4dfbf 52%, #d6b98c 100%);
+}
+
+.scene-classroom .scene-main {
+  width: 184rpx;
+  height: 58rpx;
+  background:
+    linear-gradient(180deg, #4d7555 0%, #315b3b 100%);
+  box-shadow: 0 18rpx 0 rgba(140, 98, 56, 0.32);
+}
+
+.scene-emotion {
+  background: linear-gradient(180deg, #ffe2be 0%, #e5b379 52%, #b57945 100%);
+}
+
+.scene-emotion .scene-main,
+.scene-life .scene-main {
+  width: 178rpx;
+  height: 52rpx;
+  border-radius: 30rpx 30rpx 12rpx 12rpx;
+  background: linear-gradient(180deg, #f5dfc9 0%, #d1a78a 100%);
+}
+
+.scene-product {
+  background: linear-gradient(180deg, #f8dbb5 0%, #dfb076 55%, #b9844f 100%);
+}
+
+.scene-product .scene-main {
+  width: 174rpx;
+  height: 58rpx;
+  border-radius: 50%;
+  background: radial-gradient(circle at 50% 34%, #fff1d7 0%, #c8965e 66%, #9e6e3c 100%);
+}
+
+.scene-life {
+  background: linear-gradient(180deg, #fff6e9 0%, #ead8bd 54%, #c9ab81 100%);
+}
+
+.template-foot {
+  height: 62rpx;
+  padding: 0 18rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12rpx;
+  box-sizing: border-box;
+}
+
+.template-foot text {
+  flex: 1;
+  min-width: 0;
+  color: #222633;
+  font-size: 25rpx;
+  line-height: 32rpx;
+  font-weight: 900;
+  white-space: nowrap;
+}
+
+.template-active .template-foot text {
+  color: #6559ff;
+}
+
+.select-circle {
+  width: 34rpx;
+  height: 34rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 3rpx solid #d4d8e8;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.9);
+  box-sizing: border-box;
+  flex: 0 0 34rpx;
+}
+
+.top-circle {
+  margin-left: auto;
+}
+
+.foot-circle {
+  width: 32rpx;
+  height: 32rpx;
+}
+
+.circle-active {
+  border-color: #7363ff;
+  background: linear-gradient(135deg, #7089ff 0%, #7a4df4 100%);
+}
+
+.circle-active text {
+  width: 14rpx;
+  height: 8rpx;
+  display: block;
+  border-left: 4rpx solid #ffffff;
+  border-bottom: 4rpx solid #ffffff;
+  transform: rotate(-45deg);
+  box-sizing: border-box;
+}
+
+.confirm-action {
+  height: 86rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 16rpx;
+  color: #ffffff;
+  background: linear-gradient(100deg, #4e84ff 0%, #7d3ff3 100%);
+  box-shadow: 0 14rpx 28rpx rgba(91, 86, 245, 0.24);
+  font-size: 29rpx;
+  line-height: 36rpx;
+  font-weight: 900;
+}
+
+.scene-placeholder {
+  width: 100%;
+  height: 100%;
+}
+
+.icon-placeholder {
+  display: block;
+  flex-shrink: 0;
+  background: none;
+  border: 0;
+  box-shadow: none;
+  transform: none;
+}
+
+.scene-preview {
+  position: relative;
+  padding: 0;
+  background: #ffffff;
+}
+
+.top-circle {
+  position: absolute;
+  top: 12rpx;
+  right: 14rpx;
+}