|
@@ -1,297 +1,342 @@
|
|
|
<template>
|
|
|
- <view class="box">
|
|
|
- <image class="image"
|
|
|
- src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404111712812810046B1fbafed9.png"
|
|
|
- lazy-load="true" mode="aspectFill" />
|
|
|
- <view class="function">
|
|
|
- <view class="cn-title">预约免费设计</view>
|
|
|
- <view class="en-title">Appointment Free Design</view>
|
|
|
- <view class="form">
|
|
|
- <view class="text" @click="setFocus('姓名')">
|
|
|
- <view class="bg" />
|
|
|
- <view class="iconfont icon-renyuan-hui" />
|
|
|
- <input class="input" :focus="focus == '姓名'" type="text" v-model="content.name" placeholder="请输入您的姓名">
|
|
|
- </view>
|
|
|
- <view class="text" @click="setFocus('手机号')">
|
|
|
- <view class="bg" />
|
|
|
- <view class="iconfont icon-dianhua-hui" />
|
|
|
- <input class="input" :focus="focus == '手机号'" :disabled="!manualOperation" type="number"
|
|
|
- v-model="content.phonenumber" placeholder="请输入您的电话号码">
|
|
|
- <button v-if="!manualOperation" class="button" open-type="getPhoneNumber"
|
|
|
- @getphonenumber="getphonenumber">123123323223323222222</button>
|
|
|
- </view>
|
|
|
- <picker mode='region' @change="getRegion">
|
|
|
- <view class="text">
|
|
|
- <view class="bg" />
|
|
|
- <view class="iconfont icon-dizhi-hui1" />
|
|
|
- <view style="color: #fff;" v-if="content.province">
|
|
|
- {{ this.getCity(content, false) }}
|
|
|
- </view>
|
|
|
- <view v-else style="opacity: .3;color: #fff;font-size: 14px;">
|
|
|
- 请选择城市
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </picker>
|
|
|
- <view class="text textarea-box">
|
|
|
- <view class="bg" />
|
|
|
- <view class="iconfont icon-dizhi-hui1" />
|
|
|
- <textarea class="textarea" v-model="content.address" placeholder="请输入您的具体地址(街道、楼号、门牌号等)" />
|
|
|
- </view>
|
|
|
- <view v-if="!content.name || !content.phonenumber || !content.province" class="but forbidden"
|
|
|
- hover-class="navigator-hover" @click="reminder">
|
|
|
- 立即免费预约 >
|
|
|
- </view>
|
|
|
- <view v-else class="but" hover-class="navigator-hover" @click="loading ? '' : submit()">
|
|
|
- <u-loading-icon v-if="loading" />
|
|
|
- <text v-else>
|
|
|
- 立即免费预约 >
|
|
|
- </text>
|
|
|
- </view>
|
|
|
+ <view class="box">
|
|
|
+ <image
|
|
|
+ class="image"
|
|
|
+ src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404111712812810046B1fbafed9.png"
|
|
|
+ lazy-load="true"
|
|
|
+ mode="aspectFill"
|
|
|
+ />
|
|
|
+ <view class="function">
|
|
|
+ <view class="cn-title">预约免费设计</view>
|
|
|
+ <view class="en-title">Appointment Free Design</view>
|
|
|
+ <view class="form">
|
|
|
+ <view class="text" @click="setFocus('姓名')">
|
|
|
+ <view class="bg" />
|
|
|
+ <view class="iconfont icon-renyuan-hui" />
|
|
|
+ <input
|
|
|
+ class="input"
|
|
|
+ :focus="focus == '姓名'"
|
|
|
+ type="text"
|
|
|
+ v-model="content.name"
|
|
|
+ placeholder="请输入您的姓名"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <view class="text" @click="setFocus('手机号')">
|
|
|
+ <view class="bg" />
|
|
|
+ <view class="iconfont icon-dianhua-hui" />
|
|
|
+ <input
|
|
|
+ class="input"
|
|
|
+ :focus="focus == '手机号'"
|
|
|
+ :disabled="!manualOperation"
|
|
|
+ type="number"
|
|
|
+ v-model="content.phonenumber"
|
|
|
+ placeholder="请输入您的电话号码"
|
|
|
+ />
|
|
|
+ <button
|
|
|
+ v-if="!manualOperation"
|
|
|
+ class="button"
|
|
|
+ open-type="getPhoneNumber"
|
|
|
+ @getphonenumber="getphonenumber"
|
|
|
+ >
|
|
|
+ 123123323223323222222
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ <picker mode="region" @change="getRegion">
|
|
|
+ <view class="text">
|
|
|
+ <view class="bg" />
|
|
|
+ <view class="iconfont icon-dizhi-hui1" />
|
|
|
+ <view style="color: #fff" v-if="content.province">
|
|
|
+ {{ this.getCity(content, false) }}
|
|
|
+ </view>
|
|
|
+ <view v-else style="opacity: 0.3; color: #fff; font-size: 14px">
|
|
|
+ 请选择城市
|
|
|
</view>
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ <view class="text textarea-box">
|
|
|
+ <view class="bg" />
|
|
|
+ <view class="iconfont icon-dizhi-hui1" />
|
|
|
+ <textarea
|
|
|
+ class="textarea"
|
|
|
+ v-model="content.address"
|
|
|
+ placeholder="请输入您的具体地址(街道、楼号、门牌号等)"
|
|
|
+ />
|
|
|
</view>
|
|
|
+ <view
|
|
|
+ v-if="!content.name || !content.phonenumber || !content.province"
|
|
|
+ class="but forbidden"
|
|
|
+ hover-class="navigator-hover"
|
|
|
+ @click="reminder"
|
|
|
+ >
|
|
|
+ 立即免费预约 >
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ v-else
|
|
|
+ class="but"
|
|
|
+ hover-class="navigator-hover"
|
|
|
+ @click="loading ? '' : submit()"
|
|
|
+ >
|
|
|
+ <u-loading-icon v-if="loading" />
|
|
|
+ <text v-else> 立即免费预约 > </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import contact from "../contact.vue"
|
|
|
+import contact from "../contact.vue";
|
|
|
export default {
|
|
|
- components: { contact },
|
|
|
- name: "bottom1",
|
|
|
- props: {
|
|
|
- ownertable: {
|
|
|
- type: String
|
|
|
- },
|
|
|
- ownerid: {
|
|
|
- type: [String, Number]
|
|
|
- },
|
|
|
- type: {
|
|
|
- type: String
|
|
|
- },
|
|
|
- typemx: {
|
|
|
- type: String
|
|
|
- },
|
|
|
- extrajson: {
|
|
|
- type: Object,
|
|
|
- default: {}
|
|
|
- }
|
|
|
+ components: { contact },
|
|
|
+ name: "bottom1",
|
|
|
+ props: {
|
|
|
+ ownertable: {
|
|
|
+ type: String,
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- focus: '',
|
|
|
- loading: false,
|
|
|
- manualOperation: false,
|
|
|
- content: {
|
|
|
- name: "",
|
|
|
- phonenumber: "",
|
|
|
- address: "",
|
|
|
- "province": "",
|
|
|
- "city": "",
|
|
|
- "county": "",
|
|
|
- }
|
|
|
- }
|
|
|
+ ownerid: {
|
|
|
+ type: [String, Number],
|
|
|
+ },
|
|
|
+ shareuserid: {
|
|
|
+ type: [String, Number],
|
|
|
+ default: 0,
|
|
|
+ },
|
|
|
+ type: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ typemx: {
|
|
|
+ type: String,
|
|
|
},
|
|
|
- methods: {
|
|
|
- setFocus(name) {
|
|
|
- this.focus = '';
|
|
|
- setTimeout(() => {
|
|
|
- this.focus = name;
|
|
|
- })
|
|
|
- },
|
|
|
- submit() {
|
|
|
- let content = this.content;
|
|
|
- content.ownertable = this.ownertable;
|
|
|
- content.ownerid = this.ownerid;
|
|
|
- content.type = this.type;
|
|
|
- content.typemx = this.typemx;
|
|
|
- content.extrajson = this.extrajson;
|
|
|
- if (!new RegExp('^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\\d{8}$').test(content.phonenumber)) return uni.showModal({
|
|
|
- title: '提示',
|
|
|
- content: '手机号码格式错误',
|
|
|
- showCancel: false,
|
|
|
- })
|
|
|
- this.loading = true;
|
|
|
- this.$Http.basic({
|
|
|
- "id": 20240513144602,
|
|
|
- content
|
|
|
- }).then(res => {
|
|
|
- console.log("提交预约单", res)
|
|
|
- this.loading = false;
|
|
|
- if (this.cutoff(res.msg)) return;
|
|
|
- uni.showModal({
|
|
|
- title: '提交成功',
|
|
|
- content: '感谢您的支持,工作人员会第一时间跟您联系!',
|
|
|
- showCancel: false,
|
|
|
- confirmColor: '#C30D23',
|
|
|
- })
|
|
|
- this.content = {
|
|
|
- name: "",
|
|
|
- phoneNumber: "",
|
|
|
- address: "",
|
|
|
- "province": "",
|
|
|
- "city": "",
|
|
|
- "county": "",
|
|
|
- };
|
|
|
- })
|
|
|
- },
|
|
|
- getRegion(e) {
|
|
|
- this.content.province = e.detail.value[0];
|
|
|
- this.content.city = e.detail.value[1];
|
|
|
- this.content.county = e.detail.value[2];
|
|
|
- },
|
|
|
- reminder() {
|
|
|
- uni.showToast({
|
|
|
- title: "请先完成填写后提交",
|
|
|
- icon: "none",
|
|
|
- duration: 1500,
|
|
|
- })
|
|
|
- },
|
|
|
- getphonenumber(e) {
|
|
|
- if (e.detail.code) {
|
|
|
- this.$Http.basic({
|
|
|
- "id": 20240520110702,
|
|
|
- "content": {
|
|
|
- "systemclient": "marketingtool",
|
|
|
- "code": e.detail.code
|
|
|
- }
|
|
|
- }).then(res => {
|
|
|
- console.log("获取手机号", res)
|
|
|
- this.manualOperation = true;
|
|
|
- try {
|
|
|
- this.content.phonenumber = res.data.purePhoneNumber;
|
|
|
- } catch (error) {
|
|
|
- this.focus = '手机号';
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.manualOperation = true;
|
|
|
- this.focus = '手机号';
|
|
|
+ extrajson: {
|
|
|
+ type: Object,
|
|
|
+ default: {},
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ focus: "",
|
|
|
+ loading: false,
|
|
|
+ manualOperation: false,
|
|
|
+ content: {
|
|
|
+ name: "",
|
|
|
+ phonenumber: "",
|
|
|
+ address: "",
|
|
|
+ province: "",
|
|
|
+ city: "",
|
|
|
+ county: "",
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ setFocus(name) {
|
|
|
+ this.focus = "";
|
|
|
+ setTimeout(() => {
|
|
|
+ this.focus = name;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ let content = this.content;
|
|
|
+ content.ownertable = this.ownertable;
|
|
|
+ content.ownerid = this.ownerid;
|
|
|
+ content.type = this.type;
|
|
|
+ content.typemx = this.typemx;
|
|
|
+ content.extrajson = this.extrajson;
|
|
|
+ content.shareuserid = this.shareuserid;
|
|
|
+ if (
|
|
|
+ !new RegExp(
|
|
|
+ "^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\\d{8}$"
|
|
|
+ ).test(content.phonenumber)
|
|
|
+ )
|
|
|
+ return uni.showModal({
|
|
|
+ title: "提示",
|
|
|
+ content: "手机号码格式错误",
|
|
|
+ showCancel: false,
|
|
|
+ });
|
|
|
+ this.loading = true;
|
|
|
+ this.$Http
|
|
|
+ .basic({
|
|
|
+ id: 20240513144602,
|
|
|
+ content,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log("提交预约单", res);
|
|
|
+ this.loading = false;
|
|
|
+ if (this.cutoff(res.msg)) return;
|
|
|
+ uni.showModal({
|
|
|
+ title: "提交成功",
|
|
|
+ content: "感谢您的支持,工作人员会第一时间跟您联系!",
|
|
|
+ showCancel: false,
|
|
|
+ confirmColor: "#C30D23",
|
|
|
+ });
|
|
|
+ this.content = {
|
|
|
+ name: "",
|
|
|
+ phoneNumber: "",
|
|
|
+ address: "",
|
|
|
+ province: "",
|
|
|
+ city: "",
|
|
|
+ county: "",
|
|
|
+ };
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getRegion(e) {
|
|
|
+ this.content.province = e.detail.value[0];
|
|
|
+ this.content.city = e.detail.value[1];
|
|
|
+ this.content.county = e.detail.value[2];
|
|
|
+ },
|
|
|
+ reminder() {
|
|
|
+ uni.showToast({
|
|
|
+ title: "请先完成填写后提交",
|
|
|
+ icon: "none",
|
|
|
+ duration: 1500,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getphonenumber(e) {
|
|
|
+ if (e.detail.code) {
|
|
|
+ this.$Http
|
|
|
+ .basic({
|
|
|
+ id: 20240520110702,
|
|
|
+ content: {
|
|
|
+ systemclient: "marketingtool",
|
|
|
+ code: e.detail.code,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log("获取手机号", res);
|
|
|
+ this.manualOperation = true;
|
|
|
+ try {
|
|
|
+ this.content.phonenumber = res.data.purePhoneNumber;
|
|
|
+ } catch (error) {
|
|
|
+ this.focus = "手机号";
|
|
|
}
|
|
|
- }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.manualOperation = true;
|
|
|
+ this.focus = "手机号";
|
|
|
+ }
|
|
|
},
|
|
|
-}
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.box {
|
|
|
- position: relative;
|
|
|
- width: 100vw;
|
|
|
- height: 436px;
|
|
|
+ position: relative;
|
|
|
+ width: 100vw;
|
|
|
+ height: 436px;
|
|
|
|
|
|
- .image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: block;
|
|
|
- vertical-align: bottom;
|
|
|
- }
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+ vertical-align: bottom;
|
|
|
+ }
|
|
|
|
|
|
- .function {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 1;
|
|
|
-
|
|
|
- .cn-title {
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- line-height: 22px;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 16px;
|
|
|
- color: #FFFFFF;
|
|
|
- margin-top: 30px;
|
|
|
- }
|
|
|
+ .function {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 1;
|
|
|
|
|
|
- .en-title {
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-size: 10px;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
+ .cn-title {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 22px;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
|
|
|
- .form {
|
|
|
- width: 260px;
|
|
|
- margin: 0 auto;
|
|
|
- margin-top: 20px;
|
|
|
+ .en-title {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-size: 10px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
|
|
|
- .text {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- width: 260px;
|
|
|
- height: 45px;
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.4);
|
|
|
- border-radius: 2px;
|
|
|
- overflow: hidden;
|
|
|
- padding: 0 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-bottom: 10px;
|
|
|
+ .form {
|
|
|
+ width: 260px;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 20px;
|
|
|
|
|
|
- .button {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 2;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
+ .text {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 260px;
|
|
|
+ height: 45px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.4);
|
|
|
+ border-radius: 2px;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
|
- .input {
|
|
|
- color: #fff;
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
+ .button {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 2;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
|
|
|
- .textarea {
|
|
|
- color: #fff;
|
|
|
- flex: 1;
|
|
|
- height: 62px;
|
|
|
- }
|
|
|
+ .input {
|
|
|
+ color: #fff;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
|
|
|
- .iconfont {
|
|
|
- color: #fff;
|
|
|
- font-size: 20px;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
+ .textarea {
|
|
|
+ color: #fff;
|
|
|
+ flex: 1;
|
|
|
+ height: 62px;
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ .iconfont {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .textarea-box {
|
|
|
- padding-top: 13px;
|
|
|
- height: 90px;
|
|
|
- align-items: flex-start;
|
|
|
- }
|
|
|
+ .textarea-box {
|
|
|
+ padding-top: 13px;
|
|
|
+ height: 90px;
|
|
|
+ align-items: flex-start;
|
|
|
+ }
|
|
|
|
|
|
- .text::after {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: #fff;
|
|
|
- opacity: .2;
|
|
|
- }
|
|
|
+ .text::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #fff;
|
|
|
+ opacity: 0.2;
|
|
|
+ }
|
|
|
|
|
|
- .but {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 260px;
|
|
|
- height: 45px;
|
|
|
- background: #C30D23;
|
|
|
- border-radius: 2px;
|
|
|
+ .but {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 260px;
|
|
|
+ height: 45px;
|
|
|
+ background: #c30d23;
|
|
|
+ border-radius: 2px;
|
|
|
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 14px;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- }
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.forbidden {
|
|
|
- opacity: .6;
|
|
|
+ opacity: 0.6;
|
|
|
}
|
|
|
</style>
|