|
|
@@ -0,0 +1,481 @@
|
|
|
+<template>
|
|
|
+ <view class="contact-show">
|
|
|
+ <view class="head">
|
|
|
+ <image class="path path1" src="/static/img/contact/path1.png" mode="aspectFill" />
|
|
|
+ <view class="title">
|
|
|
+ <image class="img-title" src="/static/img/contact/head_title2.png" mode="aspectFill" />
|
|
|
+ </view>
|
|
|
+ <image class="path path2" src="/static/img/contact/path2.png" mode="aspectFill" />
|
|
|
+ </view>
|
|
|
+ <view class="form-warpper">
|
|
|
+ <view class="input-content-wrapper">
|
|
|
+ <form @submit="formSubmit" @reset="formReset">
|
|
|
+ <view class="input-content">
|
|
|
+ <view class="iconfont">
|
|
|
+ <image class="image" src="/static/img/contact/icon_01.png" mode="aspectFill" />
|
|
|
+ </view>
|
|
|
+ <view class="flex align-center">
|
|
|
+ <input class="uni-input" v-model="form.customer_name" name="customerName" placeholder="请输入您的姓名" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="input-content">
|
|
|
+ <view class="iconfont">
|
|
|
+ <image class="image" src="/static/img/contact/icon_02.png" mode="aspectFill" />
|
|
|
+ </view>
|
|
|
+ <view class="flex align-center">
|
|
|
+ <input class="uni-input" maxlength="11" v-model="form.mobile" name="mobile" placeholder="请输入联系方式" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="input-content">
|
|
|
+ <view class="iconfont">
|
|
|
+ <image class="image" src="/static/img/contact/icon_03.png" mode="aspectFill" />
|
|
|
+ </view>
|
|
|
+ <view class="area flex align-center">
|
|
|
+ <pick-regions name="regionCode" :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
|
|
|
+ <text :class="['regions', regionName ? '' : 'empty']" >{{ regionName || '请选择所在地区' }}</text>
|
|
|
+ </pick-regions>
|
|
|
+ <!-- <input class="uni-input" v-model="form.parentName" name="parentName" placeholder="请选择所在地区" /> -->
|
|
|
+ <image class="arrow" src="/static/img/contact/down.png" mode="aspectFill" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="area-content">
|
|
|
+ <view class="area-label flex align-center">
|
|
|
+ <view class="iconfont">
|
|
|
+ <image class="image" src="/static/img/contact/icon_04.png" mode="aspectFill" />
|
|
|
+ </view>
|
|
|
+ <view class="label-info">您的意向</view>
|
|
|
+ </view>
|
|
|
+ <view class="area-select flex flex-wrap">
|
|
|
+ <view :class="['select', item.checked ? 'checked' : '' ]" v-for="(item, index) in typeList" :key="index" @tap.stop="handleSelect(index, item)">
|
|
|
+ {{ item.label }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <image class="path path3" src="/static/img/contact/path3.png" mode="aspectFill" />
|
|
|
+ </view>
|
|
|
+ <view class="submit-btn">
|
|
|
+ <image src="/static/img/contact/submit.png" mode="aspectFill" />
|
|
|
+ <button class="confirm-btn" :disabled="disabled" form-type="submit"></button>
|
|
|
+ <button form-type="reset" ref="resrtBtn" style="display:none;">取消</button>
|
|
|
+ </view>
|
|
|
+ </form>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="footer flex align-start">
|
|
|
+ <view class="tel">
|
|
|
+ <text>加盟电话：</text>
|
|
|
+ <a href="tel:+400-680-7300">400-680-7300</a>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import pickRegions from '@/components/pick-regions/pick-regions.vue';
|
|
|
+import { saveApply } from '@/api/apply';
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ disabled:false,
|
|
|
+ route: 'pages/index/index',
|
|
|
+ form: {
|
|
|
+ customer_name: '',
|
|
|
+ mobile: '',
|
|
|
+ type: 0
|
|
|
+ },
|
|
|
+ region:[],
|
|
|
+ defaultRegionCode: '110101',
|
|
|
+ defaultRegion:['北京市','市辖区','东城区'],
|
|
|
+ typeIndex: 0,
|
|
|
+ // typeList: ["教学渠道代理", "思维芯游戏教室渠道代理", "家庭版渠道代理", "HOME&PLUS渠道代理", "探索小镇渠道代理(TOWN)", "合作园所(北京地区园所)"],
|
|
|
+ // “思维芯”四大课程体,思维芯游戏教室,家庭版产品,逻辑狗思维游戏HOME&PLUS馆,逻辑狗·探索小镇,合作园所（北京地区园所）
|
|
|
+ typeList: [
|
|
|
+ {
|
|
|
+ label: '“思维芯”四大课程体系',
|
|
|
+ checked: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '家庭版产品',
|
|
|
+ checked: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '逻辑狗·探索小镇',
|
|
|
+ checked: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '思维芯游戏教室',
|
|
|
+ checked: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '逻辑狗思维游戏HOME&PLUS馆',
|
|
|
+ checked: false
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ reqBody: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ if(options && options.route) {
|
|
|
+ this.route = options.route;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ regionName: {
|
|
|
+ get: function() {
|
|
|
+ return this.region.map(item=>item.name).join('/')
|
|
|
+ },
|
|
|
+ set: function(val) {
|
|
|
+ if(val) {
|
|
|
+ this.region = val.map(item => {
|
|
|
+ return {
|
|
|
+ name: item
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return val;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ regionCode() {
|
|
|
+ if (this.region.length > 0) {
|
|
|
+ return this.region[this.region.length - 1].code;
|
|
|
+ } else {
|
|
|
+ return this.defaultRegionCode;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ pickRegions
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ formSubmit(e) {
|
|
|
+ let formData = e.detail.value;
|
|
|
+ let rules = [
|
|
|
+ { name: 'customerName', checkType: 'notnull', checkRule: '', errorMsg: '请填写姓名' },
|
|
|
+ { name: 'customerName', checkType: 'string', checkRule: '2,8', errorMsg: '请输入2-8位姓名' },
|
|
|
+ // { name: 'type', checkType: 'in', checkRule: '0, 1, 2, 3, 4, 5', errorMsg: '意向不能为空' },
|
|
|
+ { name: 'mobile', checkType: 'notnull', checkRule: '', errorMsg: '请填写联系方式'},
|
|
|
+ { name: 'mobile', checkType: 'phoneno', checkRule: '', errorMsg: '联系方式不正确'},
|
|
|
+ ]
|
|
|
+ let regionRule = [
|
|
|
+ { name: 'regionCode', checkType: 'notnull', checkRule: '', errorMsg: '请选择所在地区'},
|
|
|
+ ];
|
|
|
+ this.reqBody['regionCode'] = this.region;
|
|
|
+ let checkRes = this.$mGraceChecker.check(formData, rules);
|
|
|
+ if (!checkRes) {
|
|
|
+ // this.disabled = true;
|
|
|
+ this.$mHelper.toast(this.$mGraceChecker.error);
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ let regionRes = this.$mGraceChecker.check(this.reqBody, regionRule)
|
|
|
+ if (!regionRes) {
|
|
|
+ this.$mHelper.toast(this.$mGraceChecker.error);
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ // 判断意向
|
|
|
+ let typeRes = this.checkType();
|
|
|
+ if (!typeRes) {
|
|
|
+ this.$mHelper.toast('请选择您的意向');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ let entity = {
|
|
|
+ customer_name: formData.customerName,
|
|
|
+ mobile: formData.mobile,
|
|
|
+ address: this.region.map(item=>item.name).join(',')
|
|
|
+ };
|
|
|
+
|
|
|
+ const typeValue = this.typeList.filter(item => {
|
|
|
+ return item.checked
|
|
|
+ }).map(
|
|
|
+ item => {
|
|
|
+ return item.label
|
|
|
+ }
|
|
|
+ ).join(',');
|
|
|
+
|
|
|
+ let field = [{
|
|
|
+ fieldId: 135,
|
|
|
+ name: "代理商类型",
|
|
|
+ value: typeValue
|
|
|
+ }];
|
|
|
+
|
|
|
+ if (checkRes && regionRes && typeRes) {
|
|
|
+ this.disabled = true;
|
|
|
+ this.$http.post(saveApply, {
|
|
|
+ entity,
|
|
|
+ field
|
|
|
+ }).then(res=> {
|
|
|
+ this.$mHelper.toast('提交成功！我们会在在第一时间内联系您');
|
|
|
+ this.$refs.resrtBtn.$dispatch('Form', 'uni-form-reset', {
|
|
|
+ type: 'reset'
|
|
|
+ })
|
|
|
+ this.region = [];
|
|
|
+ this.disabled = false;
|
|
|
+ uni.setStorageSync('hasExhibitionForm', true)
|
|
|
+ setTimeout(()=> {
|
|
|
+ this.$mRouter.redirectTo({
|
|
|
+ route: this.route
|
|
|
+ })
|
|
|
+ }, 3000);
|
|
|
+ }).catch(err => {
|
|
|
+ this.disabled = false;
|
|
|
+ console.log('err')
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ typeChange(e) {
|
|
|
+ const index = e.detail.value;
|
|
|
+ this.typeIndex = index;
|
|
|
+ },
|
|
|
+ checkType() {
|
|
|
+ let checkedArr = this.typeList.filter(item => {
|
|
|
+ return item.checked
|
|
|
+ })
|
|
|
+ if (checkedArr.length > 0) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ },
|
|
|
+ // 获取选择的地区
|
|
|
+ handleGetRegion(region){
|
|
|
+ this.region = region
|
|
|
+ },
|
|
|
+ handleSelect(index) {
|
|
|
+ const target = this.typeList[index];
|
|
|
+ target['checked'] = !target['checked'];
|
|
|
+ },
|
|
|
+ formReset(e) {
|
|
|
+ console.log('form发生了reset事件');
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.contact-show {
|
|
|
+ height: 100vh;
|
|
|
+ padding-top: 56upx;
|
|
|
+ overflow: hidden;
|
|
|
+ background: url('@/static/img/contact/bg.png') no-repeat #01A2E8;
|
|
|
+ background-size: cover;
|
|
|
+ .head {
|
|
|
+ position: relative;
|
|
|
+ .path {
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ .path1 {
|
|
|
+ top: 78upx;
|
|
|
+ left: 38upx;
|
|
|
+ width: 54upx;
|
|
|
+ height: 32upx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .path2 {
|
|
|
+ top: 102upx;
|
|
|
+ right: 48upx;
|
|
|
+ width: 54upx;
|
|
|
+ height: 102upx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ text-align: center;
|
|
|
+ .img-title {
|
|
|
+ width: 414upx;
|
|
|
+ height: 142upx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .form-warpper {
|
|
|
+ margin-top: 62upx;
|
|
|
+ padding: 0 96upx;
|
|
|
+ }
|
|
|
+ .input-content-wrapper {
|
|
|
+ margin-bottom: 0upx
|
|
|
+ }
|
|
|
+ .input-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 100upx;
|
|
|
+ border: 2upx solid #003F66;
|
|
|
+ margin-bottom: 34upx;
|
|
|
+ padding: 0 42upx 0 42upx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 172upx;
|
|
|
+ .iconfont {
|
|
|
+ position: relative;
|
|
|
+ margin-right: 52upx;
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ width: 2upx;
|
|
|
+ height: 34upx;
|
|
|
+ background:#B9B9B9;
|
|
|
+ border-radius: 4upx;
|
|
|
+ position: absolute;
|
|
|
+ top: 6upx;
|
|
|
+ right: -26upx;
|
|
|
+ }
|
|
|
+ image {
|
|
|
+ width: 40upx;
|
|
|
+ height: 46upx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .input-placeholder {
|
|
|
+ color: #B9B9B9;
|
|
|
+ line-height: 36px;
|
|
|
+ font-size: 28upx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ .area {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ uni-picker {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .regions {
|
|
|
+ &.empty {
|
|
|
+ color: #B9B9B9;
|
|
|
+ line-height: 36px;
|
|
|
+ font-size: 28upx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .empty {
|
|
|
+ color: #B9B9B9;
|
|
|
+ line-height: 36px;
|
|
|
+ font-size: 28upx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ .picker {
|
|
|
+ color: #B9B9B9;
|
|
|
+ line-height: 36px;
|
|
|
+ font-size: 28upx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ .arrow {
|
|
|
+ width: 24upx;
|
|
|
+ height: 12upx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .area-content {
|
|
|
+ position: relative;
|
|
|
+ border: 2upx solid #003F66;
|
|
|
+ margin-bottom: 36upx;
|
|
|
+ padding: 28upx 42upx 20upx 42upx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 32upx;
|
|
|
+ .path3 {
|
|
|
+ position: absolute;
|
|
|
+ left: 44upx;
|
|
|
+ bottom: -22upx;
|
|
|
+ width: 30upx;
|
|
|
+ height: 32upx;
|
|
|
+ }
|
|
|
+ .area-label {
|
|
|
+ .label-info {
|
|
|
+ font-size: 28upx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 36upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .iconfont {
|
|
|
+ position: relative;
|
|
|
+ margin-right: 52upx;
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ width: 2upx;
|
|
|
+ height: 34upx;
|
|
|
+ background:#B9B9B9;
|
|
|
+ border-radius: 4upx;
|
|
|
+ position: absolute;
|
|
|
+ top: 6upx;
|
|
|
+ right: -26upx;
|
|
|
+ }
|
|
|
+ image {
|
|
|
+ width: 40upx;
|
|
|
+ height: 46upx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .area-select {
|
|
|
+ margin-top: 34upx;
|
|
|
+ .select {
|
|
|
+ height: 48upx;
|
|
|
+ border-radius: 24upx;
|
|
|
+ border: 2upx solid rgba(153, 153, 153, 0.2);
|
|
|
+ font-size: 28upx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 48upx;
|
|
|
+ padding: 0 16upx;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ margin-right: 16upx;
|
|
|
+ &.checked {
|
|
|
+ height: 48upx;
|
|
|
+ line-height: 48upx;
|
|
|
+ background: #FDD600;
|
|
|
+ border-radius: 24upx;
|
|
|
+ border: 2upx solid #333333;
|
|
|
+ font-size: 28upx;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ transition: background 0.3s;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .submit-btn {
|
|
|
+ position: relative;
|
|
|
+ margin-top: 34upx;
|
|
|
+ text-align: center;
|
|
|
+ image {
|
|
|
+ width: 334upx;
|
|
|
+ height: 92upx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .confirm-btn {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 334upx;
|
|
|
+ height: 92upx;
|
|
|
+ background: red;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer {
|
|
|
+ text-align: center;
|
|
|
+ .tel {
|
|
|
+ margin: 36upx auto 0;
|
|
|
+ color: #B2E8FF;
|
|
|
+ text {
|
|
|
+ font-size: 24upx;
|
|
|
+ font-family: PingFangSC-Semibold, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 34upx;
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ font-size: 24upx;
|
|
|
+ font-family: PingFangSC-Semibold, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 34upx;
|
|
|
+ color: #B2E8FF;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
chending1994
