12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788 |
- <template>
- <div class="step-3">
- <div class="ptc-block">
- <div class="ptc-inner">
- <p class="ptc-label">Version & Price</p>
- <div class="detail">
- <strong class="s1">{{ getters.selectedProduct.name }}</strong>
- <span style="font-size: 0"
- ><strong class="s2">${{ getters.cost }}</strong
- ><span class="s3">{{
- state.form.subscribe_type === 'year' ? 'Annual' : 'Monthly'
- }}</span></span
- >
- <strong class="s4" @click="$emit('go', -2)">Modify ></strong>
- </div>
- </div>
- </div>
- <div class="ptc-block">
- <div class="ptc-inner">
- <p class="ptc-label">Phone model</p>
- <div class="detail">
- <strong class="s1">{{ getters.modelName }}</strong>
- <strong class="s4" @click="$emit('go', -1)">Modify ></strong>
- </div>
- </div>
- </div>
- <div class="ptc-wrapper">
- <div class="ptc-block">
- <div class="ptc-inner">
- <p class="text">
- Please enter a valid email address, we will send you the latest
- status of the order through this contact method。
- </p>
- <input
- v-model="state.form.email"
- class="ptc-input"
- placeholder="email address"
- />
- </div>
- </div>
- <div class="ptc-button-group">
- <div class="ptc-inner">
- <button class="ptc-button" :loading="loading" @click="submit">
- SUBMIT
- </button>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script setup lang="ts">
- import { ref } from 'vue'
- import { string } from 'yup'
- import { state, getters } from './store'
- import { state as rootState } from '@/store'
- import { checkoutOrder } from '@/service/order'
- import Toast from '@/components/toast'
- defineEmits<{
- (e: 'go', delta?: number): void
- }>()
- const loading = ref(false)
- async function submit() {
- loading.value = true
- try {
- const schema = string().email('Please enter a valid email address')
- if (!rootState.userInfo) schema.required('Email is required')
- await schema.validate(state.form.email)
- const { results } = await checkoutOrder(state.form)
- location.href = results
- } catch (err) {
- Toast(err.message)
- }
- loading.value = false
- }
- </script>
- <style lang="scss" scoped>
- .text {
- margin-bottom: 48px;
- line-height: 44px;
- font-size: 32px;
- color: #333;
- }
- </style>
|