wxapp_shuibei/pages/merchantCenters/postInformation.vue

<template>
  <view class="publish-type-page">
    <!-- 顶部标题区域 -->
    <view class="page-header">
      <text class="main-title">选择要发布类型</text>
      <text class="sub-title">请根据您的需求选择合适的发布类型</text>
    </view>

    <!-- 发布选项区域 -->
    <view class="publish-options">
      <!-- 手动填写选项 -->
      <view class="option-card" @click="setActiveOption('manual')">
        <view class="option-header">
          <view class="icon-text-wrapper">
            <image class="option-icon" src="@/static/images/hand.png" mode="widthFix"></image>
            <view>
              <text class="option-title">手动填写</text>
              <text class="option-description">适合发布全新商品或定制珠宝。您可以详细设置商品分类、属性、价格和描述。</text>
            </view>
          </view>
        </view>

        <button class="publish-button" @click="handleManualPublish">点击发布</button>
      </view>

      <!-- 产品中心选择选项 -->
      <view class="option-card" @click="setActiveOption('template')">
        <view class="option-header">
          <view class="icon-text-wrapper">
            <image class="option-icon" src="@/static/images/product.png" mode="widthFix"></image>
            <view>
              <text class="option-title">从产品中心选择</text>
              <text class="option-description">从已有产品库中选择商品模板，快速发布相似商品。适合发布系列产品或标准款珠宝。</text>
            </view>
          </view>
        </view>
        <button class="publish-button" @click.stop="handleTemplatePublish">点击发布</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const activeOption = ref('manual')

const setActiveOption = (option) => {
  activeOption.value = option
}

const handleManualPublish = () => {
  uni.navigateTo({
    url: '/pages/merchantCenters/releaseProduct'
  })
}

const handleTemplatePublish = () => {
  uni.navigateTo({
    url: '/pages/merchantCenters/productCenter'
  })
}
</script>

<style scoped>
.publish-type-page {
  min-height: 100vh;
  background: #ffffff;
  padding: 100rpx 32rpx;
}

/* 页面标题 */
.page-header {
  text-align: center;
  margin-bottom: 60rpx;
}

.main-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  line-height: 50rpx;
  margin-bottom: 12rpx;
}

.sub-title {
  display: block;
  font-size: 28rpx;
  color: #666;
  line-height: 50rpx;
}

/* 发布选项 */
.publish-options {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.option-card {
  background: #F9F7F0;
  border-radius: 12rpx;
  padding: 32rpx;
}

.option-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.icon-text-wrapper {
  display: flex;
  gap: 20rpx;
}

.option-icon {
  width: 116rpx;
}

.option-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}

.option-description {
  display: block;
  font-size: 24rpx;
  color: #666666;
  line-height: 36rpx;
  margin-bottom: 24rpx;
}

.publish-button {
  background: #F8C008;
  border: none;
  border-radius: 16rpx;
  color: #333333;
  font-size: 32rpx;
  height: 80rpx;
  line-height: 80rpx;
  width: 100%;
  text-align: center;
}

.publish-button:active {
  background: #ffb300;
  transform: scale(0.98);
}
</style>