GameServicePlatform/pages/order/create.vue

<template>
  <view class="create-order-page page-container">
    <!-- 服务信息卡片 -->
    <view class="service-card cyber-card">
      <image :src="service.coverImage" class="service-cover" mode="aspectFill" />
      <view class="service-info">
        <view class="service-name">{{ service.name }}</view>
        <view class="service-price">
          <text class="price-symbol">¥</text>
          <text class="price-value">{{ service.price }}</text>
        </view>
      </view>
    </view>

    <!-- 游戏信息表单 -->
    <view class="form-section cyber-card">
      <view class="section-title">游戏信息</view>

      <view class="form-item">
        <text class="label">游戏ID</text>
        <input
          class="input"
          v-model="formData.gameId"
          placeholder="请输入您的游戏ID"
          placeholder-class="placeholder"
        />
      </view>

      <view class="form-item">
        <text class="label">游戏区服</text>
        <picker mode="selector" :range="servers" @change="onServerChange">
          <view class="picker">
            {{ formData.server || '请选择区服' }}
          </view>
        </picker>
      </view>

      <view class="form-item">
        <text class="label">当前段位</text>
        <input
          class="input"
          v-model="formData.currentRank"
          placeholder="请输入当前段位"
          placeholder-class="placeholder"
        />
      </view>
    </view>

    <!-- 联系方式 -->
    <view class="form-section cyber-card">
      <view class="section-title">联系方式</view>

      <view class="form-item">
        <text class="label">QQ号</text>
        <input
          class="input"
          v-model="formData.qq"
          placeholder="请输入QQ号"
          placeholder-class="placeholder"
        />
      </view>

      <view class="form-item">
        <text class="label">微信号</text>
        <input
          class="input"
          v-model="formData.wechat"
          placeholder="请输入微信号"
          placeholder-class="placeholder"
        />
      </view>
    </view>

    <!-- 备注 -->
    <view class="form-section cyber-card">
      <view class="section-title">订单备注</view>
      <textarea
        class="textarea"
        v-model="formData.remark"
        placeholder="请输入订单备注(选填)"
        placeholder-class="placeholder"
        maxlength="200"
      />
    </view>

    <!-- 价格明细 -->
    <view class="price-detail cyber-card">
      <view class="detail-row">
        <text class="label">服务费用</text>
        <text class="value">¥{{ service.price }}</text>
      </view>
      <view class="cyber-divider"></view>
      <view class="detail-row total">
        <text class="label">应付金额</text>
        <text class="value neon-text">¥{{ service.price }}</text>
      </view>
    </view>

    <!-- 底部提交按钮 -->
    <view class="bottom-bar">
      <view class="total-price">
        <text class="label">总计:</text>
        <text class="price">¥{{ service.price }}</text>
      </view>
      <button class="submit-btn cyber-button" @click="submitOrder">
        确认下单
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onLoad } from '@dcloudio/uni-app'
import { getServiceById } from '../../mock'

const service = ref({
  id: 0,
  name: '',
  coverImage: '',
  price: 0
})

const servers = ['微信区', 'QQ区', '安卓区', 'iOS区']

const formData = reactive({
  gameId: '',
  server: '',
  currentRank: '',
  qq: '',
  wechat: '',
  remark: ''
})

onLoad((options) => {
  if (options.serviceId) {
    const serviceData = getServiceById(parseInt(options.serviceId))
    if (serviceData) {
      service.value = serviceData
    }
  }
})

const onServerChange = (e) => {
  formData.server = servers[e.detail.value]
}

const submitOrder = () => {
  // 验证表单
  if (!formData.gameId) {
    uni.showToast({ title: '请输入游戏ID', icon: 'none' })
    return
  }

  if (!formData.server) {
    uni.showToast({ title: '请选择区服', icon: 'none' })
    return
  }

  if (!formData.qq && !formData.wechat) {
    uni.showToast({ title: '请至少填写一种联系方式', icon: 'none' })
    return
  }

  uni.showLoading({ title: '提交中...' })

  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '下单成功!',
      icon: 'success'
    })

    setTimeout(() => {
      uni.reLaunch({
        url: '/pages/order/list'
      })
    }, 1500)
  }, 1000)
}
</script>

<style lang="scss" scoped>
.create-order-page {
  padding: 24rpx;
  padding-bottom: 180rpx;
}

.service-card {
  display: flex;
  gap: 24rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
}

.service-cover {
  width: 160rpx;
  height: 120rpx;
  border-radius: 12rpx;
}

.service-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.service-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #ffffff;
}

.service-price {
  display: flex;
  align-items: baseline;
}

.price-symbol {
  font-size: 24rpx;
  color: #00ffff;
}

.price-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #00ffff;
}

.form-section {
  padding: 32rpx;
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 28rpx;
}

.form-item {
  margin-bottom: 32rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.label {
  display: block;
  font-size: 26rpx;
  color: #a0a4c4;
  margin-bottom: 16rpx;
}

.input,
.picker {
  width: 100%;
  height: 88rpx;
  padding: 0 28rpx;
  background: rgba(10, 14, 39, 0.6);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #ffffff;
  line-height: 88rpx;
}

.textarea {
  width: 100%;
  min-height: 200rpx;
  padding: 20rpx 28rpx;
  background: rgba(10, 14, 39, 0.6);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #ffffff;
}

.placeholder {
  color: #7a7e9d;
}

.price-detail {
  padding: 32rpx;
  margin-bottom: 24rpx;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  margin-bottom: 20rpx;

  &.total {
    margin-bottom: 0;

    .label,
    .value {
      font-size: 32rpx;
      font-weight: bold;
    }
  }
}

.detail-row .label {
  color: #a0a4c4;
}

.detail-row .value {
  color: #ffffff;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 24rpx;
  background: rgba(10, 14, 39, 0.98);
  border-top: 1px solid rgba(0, 255, 255, 0.2);
  backdrop-filter: blur(20rpx);
}

.total-price {
  display: flex;
  align-items: baseline;
  gap: 12rpx;
}

.total-price .label {
  font-size: 26rpx;
  color: #a0a4c4;
}

.total-price .price {
  font-size: 40rpx;
  font-weight: bold;
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.submit-btn {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
}
</style>