| @ -0,0 +1,227 @@ | |||
| <template> | |||
| <view class="page__view"> | |||
| <navbar leftClick @leftClick="$utils.navigateBack" > | |||
| <image class="icon-nav" src="@/pages_order/static/activity/icon-nav.png" mode="widthFix"></image> | |||
| </navbar> | |||
| <view class="main"> | |||
| <view class="card"> | |||
| <view class="card-header">申请邮寄纸质版</view> | |||
| <view class="form"> | |||
| <uv-form | |||
| ref="form" | |||
| :model="form" | |||
| :rules="rules" | |||
| errorType="toast" | |||
| > | |||
| <view class="form-item"> | |||
| <uv-form-item prop="name" :customStyle="formItemStyle"> | |||
| <view class="form-item-label"> | |||
| <image class="icon" src="@/static/image/icon-require.png" mode="widthFix"></image> | |||
| 姓名 | |||
| </view> | |||
| <view class="form-item-content"> | |||
| <formInput v-model="form.name"></formInput> | |||
| </view> | |||
| </uv-form-item> | |||
| </view> | |||
| <view class="form-item"> | |||
| <uv-form-item prop="phone" :customStyle="formItemStyle"> | |||
| <view class="form-item-label"> | |||
| <image class="icon" src="@/static/image/icon-require.png" mode="widthFix"></image> | |||
| 电话 | |||
| </view> | |||
| <view class="form-item-content"> | |||
| <formInput v-model="form.phone"></formInput> | |||
| </view> | |||
| </uv-form-item> | |||
| </view> | |||
| <view class="form-item"> | |||
| <uv-form-item prop="address" :customStyle="formItemStyle"> | |||
| <view class="form-item-label"> | |||
| <image class="icon" src="@/static/image/icon-require.png" mode="widthFix"></image> | |||
| 邮寄地址 | |||
| </view> | |||
| <view class="form-item-content"> | |||
| <formInput v-model="form.address"></formInput> | |||
| </view> | |||
| </uv-form-item> | |||
| </view> | |||
| </uv-form> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <view class="bottom"> | |||
| <view class="flex btn" @click="onSubmit">提交</view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import formInput from '@/pages_order/components/formInput.vue' | |||
| export default { | |||
| components: { | |||
| formInput, | |||
| }, | |||
| data() { | |||
| return { | |||
| id: null, | |||
| form: { | |||
| name: null, | |||
| phone: null, | |||
| address: null, | |||
| }, | |||
| rules: { | |||
| 'name': { | |||
| type: 'string', | |||
| required: true, | |||
| message: '请输入姓名', | |||
| }, | |||
| 'phone': { | |||
| type: 'string', | |||
| required: true, | |||
| message: '请输入电话', | |||
| }, | |||
| 'address': { | |||
| type: 'string', | |||
| required: true, | |||
| message: '请输入邮寄地址', | |||
| }, | |||
| }, | |||
| } | |||
| }, | |||
| onLoad(arg) { | |||
| const { id } = arg | |||
| this.id = id | |||
| }, | |||
| methods: { | |||
| async onSubmit() { | |||
| try { | |||
| await this.$refs.form.validate() | |||
| const { | |||
| } = this.form | |||
| const params = { | |||
| } | |||
| // todo: fetch | |||
| // await this.$fetch('updateAddress', params) | |||
| uni.showToast({ | |||
| icon: 'success', | |||
| title: '提交成功', | |||
| }); | |||
| setTimeout(() => { | |||
| this.$utils.navigateBack() | |||
| }, 800) | |||
| } catch (err) { | |||
| console.log('onSave err', err) | |||
| } | |||
| }, | |||
| }, | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .page__view { | |||
| width: 100vw; | |||
| height: 100vh; | |||
| position: relative; | |||
| background: linear-gradient(to right, #21FEEC, #019AF9); | |||
| /deep/ .nav-bar__view { | |||
| position: fixed; | |||
| top: 0; | |||
| left: 0; | |||
| } | |||
| .icon-nav { | |||
| width: 392rpx; | |||
| height: auto; | |||
| } | |||
| } | |||
| .main { | |||
| height: 100%; | |||
| padding-top: calc(var(--status-bar-height) + 142rpx); | |||
| box-sizing: border-box; | |||
| } | |||
| .card { | |||
| width: 100%; | |||
| height: 100%; | |||
| padding: 40rpx; | |||
| box-sizing: border-box; | |||
| font-family: PingFang SC; | |||
| font-weight: 400; | |||
| line-height: 1.4; | |||
| background: linear-gradient(#DAF3FF, #FBFEFF 90rpx, #FBFEFF); | |||
| border: 2rpx solid #FFFFFF; | |||
| border-radius: 48rpx; | |||
| &-header { | |||
| font-family: PingFang SC; | |||
| font-weight: 500; | |||
| font-size: 36rpx; | |||
| line-height: 1.4; | |||
| color: #191919; | |||
| } | |||
| } | |||
| .form { | |||
| &-item { | |||
| margin-top: 32rpx; | |||
| border-bottom: 2rpx solid #EEEEEE; | |||
| &-label { | |||
| font-family: PingFang SC; | |||
| font-weight: 400; | |||
| font-size: 26rpx; | |||
| line-height: 1.4; | |||
| color: #181818; | |||
| .icon { | |||
| margin-right: 8rpx; | |||
| width: 16rpx; | |||
| height: auto; | |||
| } | |||
| } | |||
| &-content { | |||
| } | |||
| } | |||
| } | |||
| .bottom { | |||
| position: fixed; | |||
| left: 0; | |||
| bottom: 0; | |||
| width: 100vw; | |||
| background: #FFFFFF; | |||
| box-sizing: border-box; | |||
| padding: 32rpx 40rpx; | |||
| padding-bottom: calc(env(safe-area-inset-bottom) + 32rpx); | |||
| box-sizing: border-box; | |||
| .btn { | |||
| width: 100%; | |||
| padding: 14rpx 0; | |||
| font-family: PingFang SC; | |||
| font-weight: 500; | |||
| font-size: 36rpx; | |||
| line-height: 1; | |||
| color: #FFFFFF; | |||
| background: linear-gradient(to right, #21FEEC, #019AF9); | |||
| border: 2rpx solid #00A9FF; | |||
| border-radius: 41rpx; | |||
| } | |||
| } | |||
| </style> | |||