|
- <template>
- <div class="tailBox">
- <div class="taillong">
- <img
- src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/LOGO1.png"
- alt
- />
- </div>
-
- <div class="tiemBox">
- <div class="taolIconBox">
- <div class="taolIconText">
- {{ characters == 1 ? "关注我们" : "follow Us" }}
- </div>
- <div class="iconBox">
- <img
- src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/f.png"
- alt
- />
- <img
- src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/o.png"
- alt
- />
- <img
- src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/ft.png"
- alt
- />
- <img
- src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/x.png"
- alt
- />
- </div>
- </div>
-
- <div class="contentBox">
- <div class="taolIconText">
- {{ characters == 1 ? "联系我们" : "Contact us" }}
- </div>
- <!-- <div class="contentInput">
- <el-input v-model="userName" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input>
- </div>
- <div class="contentInput">
- <el-input v-model="phone" :placeholder="characters == 1 ? '手机' : 'Phone Number'"></el-input>
- </div>
- <div class="contentInput">
- <el-input v-model="email" :placeholder="characters == 1 ? 'E-mail' : 'Mail'"></el-input>
- </div>
- <div class="subBtn" @click="submit()">
- {{ characters == 1 ? '提交' : 'Submit' }}
- </div> -->
- <el-form v-if="showForm" ref="form" :rules="rules1" :model="form">
- <el-form-item class="width" prop="userName">
- <el-input
- v-model="form.userName"
- maxlength="10"
- :placeholder="characters == 1 ? '姓名' : 'Name'"
- ></el-input>
- </el-form-item>
- <el-form-item class="width" prop="phone">
- <el-input
- v-model="form.phone"
- :placeholder="characters == 1 ? '手机' : 'Phone'"
- ></el-input>
- </el-form-item>
- <el-form-item class="width" prop="email">
- <el-input v-model="form.email" placeholder="Email"></el-input>
- </el-form-item>
- <el-button class="subBtn1" type="primary" @click="submit()">{{
- characters == 1 ? "提 交" : "Submit"
- }}</el-button>
- </el-form>
- </div>
-
- <div class="rqCodeBox">
- <div class="phone">TEL:+86 152-1093-7300</div>
- <div class="site">
- {{
- characters == 1
- ? "北京市海淀区中关村南大街12号农业科学院信息楼311室"
- : "311, Information Building, Academy of Agricultural Sciences, No. 12 Zhongguancun South Street, Haidian District, Beijing"
- }}
- </div>
- <div class="phone" v-if="characters == 1">周女士 +65 9422 2858</div>
- <div class="phone" v-if="characters != 1">Chow +65 9422 2858</div>
- <div class="site">
- {{
- characters == 1
- ? "新加坡北桥路111号,半岛广场07-11号,邮编179098"
- : "111 North Bridge Road, #07-11, Penisula Plaza, Singapore 179098"
- }}
- </div>
- <div class="rqCodeTiemBox">
- <div class="rqCodeTiem">
- <div class="rqcode">
- <!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/wechat.png" alt /> -->
- <img
- src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/vx.jpg"
- alt
- />
- </div>
- <div class="rqtext">Wechat</div>
- </div>
- <div class="rqCodeTiem1">
- <div class="rqcode">
- <!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/tiktok.png" alt /> -->
- <img
- src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/dy.png"
- alt
- />
- </div>
- <div class="rqtext">Tiktok</div>
- </div>
- </div>
- </div>
- </div>
-
- <div class="tailText">
- <!-- © 2021 Copyright 北京邃芒科技有限公司 版权所有 京ICP备2021007416号 -->
- © 2021 Copyright 北京邃芒科技有限公司 版权所有
- <a href="https://beian.miit.gov.cn">京ICP备2023005136号-1</a>
- </div>
- </div>
- </template>
- <script>
- import { mapState } from "vuex";
- export default {
- data() {
- return {
- userName: "",
- phone: "",
- email: "",
- form: {
- userName: "",
- phone: "",
- email: "",
- },
- rules: {
- userName: [
- {
- required: true,
- min: 1,
- max: 10,
- message: "此项必填,内容最大10个字符!",
- trigger: "blur",
- },
- ],
- phone: [
- {
- required: true,
- trigger: "change",
- message: "请先输手机号",
- trigger: "blur",
- },
- {
- validator(rule, value, callback, source, options) {
- var errors = [];
- // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
- let phone = /^1[35789]\d{9}$/;
- if (value && !phone.test(value)) {
- callback("抱歉,请输入正确的手机号");
- }
- callback(errors);
- },
- },
- ],
- email: [
- {
- required: true,
- trigger: "change",
- message: "请输入邮箱!",
- trigger: "blur",
- },
- {
- validator(rule, value, callback, source, options) {
- var errors = [];
- // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
- let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
- if (value && !email.test(value)) {
- callback("抱歉,请输入正确的邮箱");
- }
- callback(errors);
- },
- },
- ],
- },
- rulesEnglish: {
- userName: [
- {
- required: true,
- min: 1,
- max: 10,
- message: "This item is required !",
- trigger: "blur",
- },
- ],
- phone: [
- {
- required: true,
- trigger: "change",
- message: "Please enter your cell phone number",
- trigger: "blur",
- },
- {
- validator(rule, value, callback, source, options) {
- var errors = [];
- let phone = /^1[35789]\d{9}$/;
- if (value && !phone.test(value)) {
- callback("Sorry, please enter the correct cell phone number");
- }
- callback(errors);
- },
- },
- ],
- email: [
- {
- required: true,
- trigger: "change",
- message: "Please enter email!",
- trigger: "blur",
- },
- {
- validator(rule, value, callback, source, options) {
- var errors = [];
- let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
- if (value && !email.test(value)) {
- callback("Sorry, please enter the correct email address");
- }
- callback(errors);
- },
- },
- ],
- },
- rules1: null,
- showForm: true,
- };
- },
- methods: {
- submit() {
- // let phone = /^1[35789]\d{9}$/;
- // if (this.userName == '') {
- // this.$message.error(this.characters == 1 ? '请输入姓名' : 'Please enter your name');
- // return;
- // } else if (!phone.test(this.phone)) {
- // this.$message.error(this.characters == 1 ? '请输入手机号' : 'Please enter your mobile phone number');
- // return;
- // } else if (this.email == '') {
- // this.$message.error(this.characters == 1 ? '请输入邮箱' : 'Please enter email address');
- // return;
- // }
- // let params = {
- // mallName: this.email, //邮箱
- // applicant: this.userName, //姓名
- // phone: this.phone //电话
- // };
- this.$refs.form.validate((valid) => {
- console.log(valid);
- if (valid) {
- let params = {
- mallName: this.form.email, //邮箱
- applicant: this.form.userName, //姓名
- phone: this.form.phone, //电话
- };
- this.$axios({
- method: "post",
- url: "/C/api/wxMallApply/add",
- headers: {
- "Content-Type": "application/json;charset=UTF-8",
- },
- data: params,
- })
- .then((res) => {
- this.email = "";
- this.userName = "";
- this.phone = "";
- this.form.email = "";
- this.form.userName = "";
- this.form.phone = "";
- this.$message.success(
- this.characters == 1 ? "提交成功" : "submit successfully"
- );
- })
- .catch((err) => {
- this.$message.error(err.message);
- });
- }
- });
- },
- },
- created() {
- this.rules1 = this.rules;
- },
- computed: {
- ...mapState({
- characters: (state) => state.publicObj.characters,
- }),
- },
-
- watch: {
- characters: function (newValue) {
- this.showForm = false;
- if (newValue === 1) {
- this.rules1 = this.rules;
- } else {
- this.rules1 = this.rulesEnglish;
- }
- setTimeout(() => {
- this.showForm = true;
- }, 100);
- },
- },
- };
- </script>
-
- <style lang="scss" scoped>
- .tailBox {
- overflow: hidden;
- height: 508px;
- background: #f1f4f7;
- // padding-bottom: 54px;
-
- .taillong {
- width: 168px;
- height: 50px;
- margin-top: 20px;
- margin-left: 360px;
- img {
- width: 168px;
- height: 50px;
- }
- }
- .tiemBox {
- overflow: hidden;
- margin-top: 20px;
- }
- .taolIconBox {
- margin-left: 380px;
- float: left;
- }
- .taolIconText {
- margin-top: -20px;
- font-size: 14px;
- font-family: Inter;
- font-weight: 400;
- color: #323232;
- line-height: 62px;
- }
- .iconBox {
- display: flex;
- justify-content: space-between;
- width: 124px;
- img {
- width: 24px;
- height: 24px;
- }
- }
- .contentBox {
- // position: absolute;
- // margin-top: 120px;
- float: left;
- margin-left: 260px;
- .contentInput {
- width: 286px;
- height: 36px;
- // background: #ffffff;
- text-align: center;
- margin-bottom: 11px;
- input {
- width: 200px;
- height: 36px;
- }
- input::placeholder {
- font-weight: 400;
- color: #949494;
- }
- }
- .subBtn {
- width: 140px;
- height: 48px;
- background: #ffffff;
- border-radius: 24px;
- text-align: center;
- line-height: 48px;
- margin-top: 24px;
- cursor: pointer;
- font-size: 14px;
- transition: all 0.3s;
- &:hover {
- color: #fff;
- background-color: #16e9d6;
- }
- }
- ::v-deep .el-form-item {
- width: 300px;
- margin-bottom: 20px;
- }
- .subBtn1 {
- border: none;
- width: 140px;
- height: 48px;
- color: #191919;
- // margin-top: 15px;
- background: #ffffff;
- border-radius: 24px;
- text-align: center;
- line-height: 24px;
- cursor: pointer;
- font-size: 14px;
- transition: all 0.3s;
- &:hover {
- color: #fff;
- background-color: #16e9d6;
- }
- }
- }
- .rqCodeBox {
- padding-top: -10px;
- width: 360px;
- // position: absolute;
- // top: 130px;
- float: left;
- margin-left: 260px;
- .phone {
- margin-top: 10px;
- font-size: 14px;
- font-family: Inter;
- font-weight: 400;
- color: #191919;
- }
- .site {
- font-size: 14px;
- font-family: Microsoft YaHei;
- font-weight: 400;
- color: #191919;
- // margin-top: 10px;
- }
- .rqCodeTiemBox {
- display: flex;
- justify-content: space-between;
- margin-top: 30px;
- .rqCodeTiem {
- overflow: hidden;
- .rqcode {
- width: 150px;
- height: 150px;
- img {
- width: 100%;
- height: 100%;
- }
- }
- .rqtext {
- text-align: center;
- font-size: 12px;
- font-family: Inter;
- font-weight: 400;
- color: #172c34;
- line-height: 62px;
- height: 62px;
- }
- }
- .rqCodeTiem1 {
- margin-left: 30px;
- .rqcode {
- width: 150px;
- height: 150px;
- img {
- width: 100%;
- height: 100%;
- }
- }
- .rqtext {
- text-align: center;
- font-size: 12px;
- font-family: Inter;
- font-weight: 400;
- color: #172c34;
- line-height: 62px;
- height: 62px;
- }
- }
- }
- }
- .showBoxP {
- font-size: 16px !important;
- text-align: center !important;
- line-height: 20px !important;
- color: #696969 !important;
- }
- .tailText {
- // position: absolute;
- // width: 100%;
- // bottom: 6%;
- margin-top: 20px;
- // left: 0;
- text-align: center;
- font-size: 18px;
- font-family: Microsoft YaHei;
- font-weight: 400;
- color: #191919;
- line-height: 62px;
- opacity: 0.5;
- a {
- text-decoration: none;
- color: #333;
- }
- a:hover,
- a:visited,
- a:link,
- a:active {
- color: #333;
- // 设置使所有a标签的四种状态都和本身颜色保持一致,样式代码自己写
- }
- }
- }
- ::-webkit-input-placeholder {
- /* WebKit browsers,webkit内核浏览器 */
- color: #ccc;
- font-size: 16px;
- }
- :-moz-placeholder {
- /* Mozilla Firefox 4 to 18 */
- color: #ccc;
- font-size: 16px;
- }
- ::-moz-placeholder {
- /* Mozilla Firefox 19+ */
- color: #ccc;
- font-size: 16px;
- }
- :-ms-input-placeholder {
- /* Internet Explorer 10+ */
- color: #ccc;
- font-size: 16px;
- }
- .el-input.is-active .el-input__inner,
- .el-input__inner:focus {
- border-color: #16e9d6;
- outline: 0;
- }
- </style>
|