130 lines
3.2 KiB
Vue
130 lines
3.2 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" :model="form" ref="formRef" class="">
|
||
|
|
<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: '请输入姓名',
|
||
|
|
trigger: ['blur', 'change']
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
submitForm() {
|
||
|
|
this.$refs.formRef.validate().then(res => {
|
||
|
|
uni.$u.toast('校验通过')
|
||
|
|
}).catch(errors => {
|
||
|
|
uni.$u.toast('校验失败')
|
||
|
|
})
|
||
|
|
if (!this.form.name || !this.form.email || !this.form.message) {
|
||
|
|
uni.showToast({ title: 'Please fill in all fields', icon: 'none' });
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
//验证邮箱
|
||
|
|
if (!this.form.email.match(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/)) {
|
||
|
|
uni.showToast({ title: 'Invalid email address', icon: 'none' });
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
uni.showToast({ title: 'Successfully', icon: 'success' });
|
||
|
|
this.form = { name: '', email: '', message: '' };
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</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>
|