优化了样式，抽象出了 WXSS/JS 库
This commit is contained in:
@@ -1,124 +1,132 @@
|
||||
<!--pages/submit/submit.wxml-->
|
||||
<view class="submit-page">
|
||||
<!-- 商品信息区域 -->
|
||||
<view class="product-section">
|
||||
<view class="product-card">
|
||||
<!-- 商品图片 -->
|
||||
<view class="product-image-box">
|
||||
<image
|
||||
src="{{shangpinData && shangpinData.image ? shangpinData.image : ''}}"
|
||||
mode="aspectFill"
|
||||
class="product-image"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<view class="product-info">
|
||||
<view class="product-title">
|
||||
<text class="title-text">{{shangpinData && shangpinData.title ? shangpinData.title : '商品标题'}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 价格信息 -->
|
||||
<view class="price-info">
|
||||
<text class="price-label">价格：</text>
|
||||
<view class="price-value">
|
||||
<text class="price-icon">¥</text>
|
||||
<text class="price-integer">{{shangpinData && shangpinData.priceInteger ? shangpinData.priceInteger : '0'}}</text>
|
||||
<text class="price-decimal">.{{shangpinData && shangpinData.priceDecimal ? shangpinData.priceDecimal : '00'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 表单区域（左右布局） -->
|
||||
<view class="form-section">
|
||||
<view class="form-card">
|
||||
<!-- 游戏昵称 - 左右布局 -->
|
||||
<view class="form-item-row">
|
||||
<view class="item-label-row">
|
||||
<text class="label-text-bold">昵称</text>
|
||||
<text class="label-required">*</text>
|
||||
</view>
|
||||
<input
|
||||
class="item-input-row"
|
||||
type="text"
|
||||
placeholder="请输入您的昵称"
|
||||
placeholder-class="input-placeholder-gray"
|
||||
maxlength="15"
|
||||
value="{{nicheng}}"
|
||||
bindinput="onNicknameInput"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 备注信息 - 左右布局 -->
|
||||
<view class="form-item-row">
|
||||
<view class="item-label-row">
|
||||
<text class="label-text-bold">备注</text>
|
||||
</view>
|
||||
<input
|
||||
class="item-input-row"
|
||||
type="text"
|
||||
placeholder="请补充您要补充的其他联系信息"
|
||||
placeholder-class="input-placeholder-gray"
|
||||
maxlength="30"
|
||||
value="{{beizhu}}"
|
||||
bindinput="onRemarkInput"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 指定打手ID - 左右布局 -->
|
||||
<view class="form-item-row">
|
||||
<view class="item-label-row">
|
||||
<text class="label-text-bold">指定服务者ID(选填)</text>
|
||||
</view>
|
||||
<input
|
||||
class="item-input-row"
|
||||
type="text"
|
||||
placeholder="填写您需要指定的服务者"
|
||||
placeholder-class="input-placeholder-gray"
|
||||
maxlength="20"
|
||||
value="{{zhiding}}"
|
||||
bindinput="onZhidingInput"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 支付方式 -->
|
||||
<view class="payment-item">
|
||||
<view class="payment-method">
|
||||
<image src="/images/wechat-pay.png" class="payment-icon" />
|
||||
<text class="payment-text">微信支付</text>
|
||||
<view class="payment-checkbox">
|
||||
<text class="checkbox-text">✓</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="footer-section">
|
||||
<view class="total-price">
|
||||
<text class="total-label">总价：</text>
|
||||
<view class="total-value">
|
||||
<text class="price-icon">¥</text>
|
||||
<text class="price-integer">{{shangpinData && shangpinData.priceInteger ? shangpinData.priceInteger : '0'}}</text>
|
||||
<text class="price-decimal">.{{shangpinData && shangpinData.priceDecimal ? shangpinData.priceDecimal : '00'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="submit-btn {{canSubmit && !isSubmitting ? 'submit-btn-active' : 'submit-btn-disabled'}}"
|
||||
bindtap="onSubmitOrder"
|
||||
>
|
||||
<text class="btn-text">{{isSubmitting ? '提交中...' : '提交订单'}}</text>
|
||||
<view class="btn-glow"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 全局通知组件 -->
|
||||
<global-notification id="global-notification" />
|
||||
|
||||
<!-- 弹窗公告组件（供 PopupService 调用） -->
|
||||
<popup-notice id="popupNotice" />
|
||||
</view>
|
||||
<!--pages/submit/submit.wxml-->
|
||||
<view class="page">
|
||||
<!-- 商品摘要 - 拼多多SKU弹窗顶部风格 -->
|
||||
<view class="sku-header">
|
||||
<image class="sku-thumb" src="{{shangpinData.image || ''}}" mode="aspectFill" />
|
||||
<view class="sku-header-info">
|
||||
<view class="sku-price-row">
|
||||
<text class="sku-price-sym">¥</text>
|
||||
<text class="sku-price-int">{{totalPriceInteger}}</text>
|
||||
<text class="sku-price-dec">.{{totalPriceDecimal}}</text>
|
||||
</view>
|
||||
<text class="sku-stock">库存{{shangpinData.kucun || 0}}件</text>
|
||||
<text class="sku-selected">已选：{{quantity}}份</text>
|
||||
</view>
|
||||
<view class="sku-close" bindtap="goBack">×</view>
|
||||
</view>
|
||||
|
||||
<!-- 购买数量 -->
|
||||
<view class="sku-section">
|
||||
<text class="sku-section-title">购买数量</text>
|
||||
<view class="qty-row">
|
||||
<view class="qty-btn {{quantity <= 1 ? 'qty-btn--disabled' : ''}}" bindtap="onQtyMinus">-</view>
|
||||
<text class="qty-val">{{quantity}}</text>
|
||||
<view class="qty-btn {{quantity >= 99 ? 'qty-btn--disabled' : ''}}" bindtap="onQtyPlus">+</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 服务信息 -->
|
||||
<view class="sku-section">
|
||||
<text class="sku-section-title">服务信息</text>
|
||||
|
||||
<view class="form-field">
|
||||
<view class="field-top">
|
||||
<text class="field-name">游戏昵称</text>
|
||||
<text class="field-required">必填</text>
|
||||
</view>
|
||||
<input
|
||||
class="field-input"
|
||||
type="text"
|
||||
placeholder="请输入您的游戏昵称"
|
||||
placeholder-class="ph"
|
||||
maxlength="15"
|
||||
value="{{nicheng}}"
|
||||
bindinput="onNicknameInput"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="form-field">
|
||||
<view class="field-top">
|
||||
<text class="field-name">备注</text>
|
||||
<text class="field-optional">选填</text>
|
||||
</view>
|
||||
<input
|
||||
class="field-input"
|
||||
type="text"
|
||||
placeholder="补充其他联系信息"
|
||||
placeholder-class="ph"
|
||||
maxlength="30"
|
||||
value="{{beizhu}}"
|
||||
bindinput="onRemarkInput"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="form-field">
|
||||
<view class="field-top">
|
||||
<text class="field-name">指定服务者</text>
|
||||
<text class="field-optional">选填</text>
|
||||
</view>
|
||||
<input
|
||||
class="field-input"
|
||||
type="text"
|
||||
placeholder="填写指定服务者ID"
|
||||
placeholder-class="ph"
|
||||
maxlength="20"
|
||||
value="{{zhiding}}"
|
||||
bindinput="onZhidingInput"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 服务保障 -->
|
||||
<view class="sku-section">
|
||||
<text class="sku-section-title">服务保障</text>
|
||||
<view class="guarantee-row">
|
||||
<view class="guarantee-item">
|
||||
<text class="g-check">✓</text>
|
||||
<text class="g-text">极速接单</text>
|
||||
</view>
|
||||
<view class="guarantee-item">
|
||||
<text class="g-check">✓</text>
|
||||
<text class="g-text">资金担保</text>
|
||||
</view>
|
||||
<view class="guarantee-item">
|
||||
<text class="g-check">✓</text>
|
||||
<text class="g-text">售后保障</text>
|
||||
</view>
|
||||
<view class="guarantee-item">
|
||||
<text class="g-check">✓</text>
|
||||
<text class="g-text">隐私保护</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 支付方式 -->
|
||||
<view class="sku-section">
|
||||
<text class="sku-section-title">支付方式</text>
|
||||
<view class="pay-row">
|
||||
<image src="/images/wechat-pay.png" class="pay-icon" />
|
||||
<text class="pay-label">微信支付</text>
|
||||
<view class="pay-check">
|
||||
<text class="pay-check-icon">✓</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部留白 -->
|
||||
<view class="bottom-space"></view>
|
||||
|
||||
<!-- 底部确认按钮 -->
|
||||
<view class="confirm-bar">
|
||||
<view
|
||||
class="confirm-btn {{canSubmit && !isSubmitting ? 'confirm-btn--active' : 'confirm-btn--disabled'}}"
|
||||
bindtap="onSubmitOrder"
|
||||
hover-class="confirm-btn--hover"
|
||||
>
|
||||
{{isSubmitting ? '提交中...' : '确定'}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<global-notification id="global-notification" />
|
||||
<popup-notice id="popupNotice" />
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user