微信小程序如何制作一个漂亮的有报价按钮的可提交的表格代码

以下是一个简单的微信小程序表单代码示例，包括表单组件、按钮组件和提交事件处理函数。你可以根据自己的需求进行修改和优化。

<view class="form">
  <form bindsubmit="submitForm">
    <view class="form-item">
      <text class="form-label">姓名</text>
      <input class="form-input" name="name" placeholder="请输入姓名" />
    </view>
    <view class="form-item">
      <text class="form-label">电话</text>
      <input class="form-input" name="phone" placeholder="请输入电话号码" />
    </view>
    <view class="form-item">
      <text class="form-label">邮箱</text>
      <input class="form-input" name="email" placeholder="请输入邮箱" />
    </view>
    <view class="form-item">
      <text class="form-label">服务类型</text>
      <picker name="serviceType" mode="selector" range="{{serviceTypes}}" bindchange="serviceTypeChange">
        <view class="picker">{{serviceTypes[serviceTypeIndex]}}</view>
      </picker>
    </view>
    <view class="form-item">
      <text class="form-label">备注</text>
      <textarea class="form-textarea" name="remark" placeholder="请输入备注"></textarea>
    </view>
    <view class="form-item">
      <text class="form-label">报价</text>
      <view class="form-price">{{price}}元</view>
    </view>
    <button class="btn-submit" form-type="submit">提交</button>
  </form>
</view>

Page({
  data: {
    serviceTypes: ['服务类型1', '服务类型2', '服务类型3'],
    serviceTypeIndex: 0,
    price: 0
  },
  serviceTypeChange: function(e) {
    this.setData({
      serviceTypeIndex: e.detail.value
    });
    // 根据服务类型计算报价
    this.calculatePrice();
  },
  calculatePrice: function() {
    // 计算报价逻辑
    // ...
    this.setData({
      price: price
    });
  },
  submitForm: function(e) {
    // 表单提交事件处理逻辑
    // ...
  }
})

以上代码中，`form` 组件绑定了 `submitForm` 事件处理函数，当用户点击提交按钮时，会触发该函数。在事件处理函数中，可以通过 `e.detail.value` 获取表单中的数据，并进行处理和提交。另外，还可以通过 `picker` 组件和 `serviceTypeChange` 方法实现下拉选择框的功能，并根据选择的服务类型计算报价，并显示在页面上。