|
@@ -6,20 +6,20 @@
|
|
|
<view class="function">
|
|
|
<view class="cn-title">预约免费设计</view>
|
|
|
<view class="en-title">Appointment Free Design</view>
|
|
|
-
|
|
|
<view class="form">
|
|
|
- <view class="text">
|
|
|
+ <view class="text" @click="setFocus('姓名')">
|
|
|
<view class="bg" />
|
|
|
<view class="iconfont icon-renyuan-hui" />
|
|
|
- <input class="input" type="text" v-model="content.name" placeholder="请输入您的姓名">
|
|
|
+ <input class="input" :focus="focus == '姓名'" type="text" v-model="content.name" placeholder="请输入您的姓名">
|
|
|
</view>
|
|
|
-
|
|
|
- <view class="text">
|
|
|
+ <view class="text" @click="setFocus('手机号')">
|
|
|
<view class="bg" />
|
|
|
<view class="iconfont icon-dianhua-hui" />
|
|
|
- <input class="input" type="number" v-model="content.phoneNumber" placeholder="请输入您的电话号码">
|
|
|
+ <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" />
|
|
@@ -32,24 +32,29 @@
|
|
|
</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 class="but" hover-class="navigator-hover" @click="submit">
|
|
|
+ <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"
|
|
|
export default {
|
|
|
+ components: { contact },
|
|
|
name: "bottom1",
|
|
|
props: {
|
|
|
ownertable: {
|
|
@@ -65,14 +70,18 @@ export default {
|
|
|
type: String
|
|
|
},
|
|
|
extrajson: {
|
|
|
- type: Object
|
|
|
+ type: Object,
|
|
|
+ default: {}
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ focus: '',
|
|
|
+ loading: false,
|
|
|
+ manualOperation: false,
|
|
|
content: {
|
|
|
name: "",
|
|
|
- phoneNumber: "",
|
|
|
+ phonenumber: "",
|
|
|
address: "",
|
|
|
"province": "",
|
|
|
"city": "",
|
|
@@ -81,6 +90,12 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ setFocus(name) {
|
|
|
+ this.focus = '';
|
|
|
+ setTimeout(() => {
|
|
|
+ this.focus = name;
|
|
|
+ })
|
|
|
+ },
|
|
|
submit() {
|
|
|
let content = this.content;
|
|
|
content.ownertable = this.ownertable;
|
|
@@ -88,11 +103,18 @@ export default {
|
|
|
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: '提交成功',
|
|
@@ -114,11 +136,39 @@ export default {
|
|
|
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;
|
|
@@ -177,6 +227,16 @@ export default {
|
|
|
box-sizing: border-box;
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
+ .button {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 2;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
.input {
|
|
|
color: #fff;
|
|
|
flex: 1;
|
|
@@ -230,4 +290,8 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.forbidden {
|
|
|
+ opacity: .6;
|
|
|
+}
|
|
|
</style>
|