145 lines
3.4 KiB
Vue
145 lines
3.4 KiB
Vue
<template>
|
|
<view class="contact-container">
|
|
<u-card title="Contact Us" class="card">
|
|
<view class="info">
|
|
<u-icon name="map" size="28" color="#2E7D32"/>
|
|
<text class="info-text">123 Main Street, New York, NY 10001</text>
|
|
</view>
|
|
<view class="info">
|
|
<u-icon name="phone" size="28" color="#2E7D32"/>
|
|
<text class="info-text">+1 (123) 456-7890</text>
|
|
</view>
|
|
<view class="info">
|
|
<u-icon name="email" size="28" color="#2E7D32"/>
|
|
<text class="info-text">contact@company.com</text>
|
|
</view>
|
|
</u-card>
|
|
|
|
<u-form labelPosition="top" :rules="rules" :model="form" ref="formRef">
|
|
<u-form-item label="Name" prop="name" borderBottom>
|
|
<u-input v-model="form.name" placeholder="Enter your name" font-size="18"/>
|
|
</u-form-item>
|
|
<u-form-item label="Email" prop="email" borderBottom>
|
|
<u-input v-model="form.email" placeholder="Enter your email" font-size="18"/>
|
|
</u-form-item>
|
|
<u-form-item label="Message" prop="message" borderBottom>
|
|
<u-textarea v-model="form.message" font-size="18" placeholder="Enter your message"></u-textarea>
|
|
</u-form-item>
|
|
<view class="button-container">
|
|
<u-button @click="submitForm" class="submit-button" text="Submit"></u-button>
|
|
</view>
|
|
</u-form>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
form: {
|
|
name: '',
|
|
email: '',
|
|
message: ''
|
|
},
|
|
rules: {
|
|
name: [
|
|
{
|
|
required: true,
|
|
message: 'Please enter your name',
|
|
trigger: ['blur', 'change']
|
|
}
|
|
],
|
|
email: [
|
|
{
|
|
required: true,
|
|
message: 'Please enter your email address',
|
|
trigger: ['blur', 'change']
|
|
},
|
|
{
|
|
pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
|
|
message: 'Please enter a valid email address',
|
|
trigger: ['blur', 'change']
|
|
}
|
|
],
|
|
message: [
|
|
{
|
|
required: true,
|
|
message: 'Please enter your feedback',
|
|
trigger: ['blur', 'change']
|
|
}
|
|
]
|
|
}
|
|
};
|
|
},
|
|
methods: {
|
|
submitForm() {
|
|
this.$refs.formRef.validate().then(res => {
|
|
uni.showToast({title: 'Successfully', icon: 'success'});
|
|
this.form = {name: '', email: '', message: ''};
|
|
}).catch(errors => {
|
|
uni.$u.toast('Validation failed')
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.contact-container {
|
|
padding: 40rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
//align-items: center;
|
|
//text-align: center;
|
|
height: 100vh;
|
|
font-size: 20rpx;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.card {
|
|
width: 90%;
|
|
padding: 30rpx;
|
|
font-size: 22rpx;
|
|
background-color: #1B5E20;
|
|
color: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.info {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.info-text {
|
|
margin-left: 15rpx;
|
|
font-size: 22rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.form-container {
|
|
width: 90%;
|
|
//display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.button-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.submit-button {
|
|
font-size: 22rpx;
|
|
padding: 15rpx 30rpx;
|
|
background-color: #2E7D32;
|
|
color: #FFFFFF;
|
|
border-radius: 10rpx;
|
|
}
|
|
</style>
|