diancan_uni/pages/joinus/index.vue

<template>
    <!-- index.wxml -->
    <!-- <com-header show-back="{{ showBack }}" show-header="{{ showHeader }}" page-title="{{ pageTitle }}"></com-header> -->
    <view class="wrap" style="padding-top: 30rpx">
        <!-- <view class="banner_w">
		<image class="banner" src="/statics/img/join/top_banner.png"></image>
	</view> -->
        <!-- <view class="swiper_w">
		<view class="swiper_t">
			<view class="title">加盟规则</view>
			<view class="desc">秉承公开透明互利合作原则</view>
		</view>
		<view class="swiper_b">
			<swiper class="swiper" autoplay="{{ true }}" circular="{{ true }}" interval="{{ interval }}" previous-margin="72rpx" next-margin="72rpx" bindchange="changeAd">
				<swiper-item wx:for="{{ adList }}" wx:key="index">
					<image class="join_tu" src="{{ item }}"></image>
				</swiper-item>
			</swiper>
			<view class="dots">
				<block wx:for="{{ adList }}" wx:key="index">
					<view class="{{ index == current ? 'dot active' : 'dot'}}"></view>
				</block>
			</view> 
		</view>
	</view> -->
        <!-- 常见问题 -->
        <!-- <view class="question">
		<view class="question_t">常见问题解答</view>
		<view class="question_list">
			<view class="item">
				<image class="item_icon" src="/statics/img/icon_question.png"></image>
				<view class="item_nr">
					<view class="item_title">糖朝的加盟模式是什么？</view>
					<view class="item_desc">糖朝加盟为单店加盟，需要客户全资运营，公司在每个城市设立城市合伙人，协助该城市加盟店运营发展管理工作，公司不参与加盟店利润分成，此模式的优势在于公司管理全部市场，市场机制较为规范透明，店面便于复制，且老板管理店面也较为灵活。</view>
				</view>
			</view>
			<view class="item">
				<image class="item_icon" src="/statics/img/icon_question.png"></image>
				<view class="item_nr">
					<view class="item_title">开店需要办理哪些证件？</view>
					<view class="item_desc">开店涉及的相关证件需加盟商到当地相关部门办理，公司可提供办证所需的部分资料，如:生产许可证，检验报告，供货合同等。
其中门店涉及的证件有:《食品类人员健康证》《营业执照》《食品经营许可证》。</view>
				</view>
			</view>
			<view class="item">
				<image class="item_icon" src="/statics/img/icon_question.png"></image>
				<view class="item_nr">
					<view class="item_title">公司对加盟商有哪些支持？</view>
					<view class="item_desc">1. 产品支持:产品开发按需生产；2. 物流支持: 冷链日配到店；3. 设计支持: 门店装修设计物料设计；4. 数字化系统支持: 连锁商城系统及经营管理系统；5.经营培训支持：提供免费的门店操作手册及上门辅导；6.专业选址评估；7.新店开业指导；8.品牌营销策划</view>
				</view>
			</view>
		</view>
		<view class="view_more">展开更多<van-icon name="arrow-down" color="rgba(45,45,45,.54)" /></view>
	</view> -->
        <!-- 加盟表单 -->
        <view class="join_us">
            <!-- <view class="join_us_title">我要加盟</view> -->
            <view class="join_us_nr">
                <view class="join_us_t">留下您的个人信息</view>
                <image class="line" src="/static/statics/img/line_tu.png"></image>
                <view class="form_wrap">
                    <view class="form_item">
                        <view class="item_l">姓名：</view>
                        <view class="item_r">
                            <van-field :value="name" placeholder="请输入您的姓名" :border="false" @input="getName" />
                        </view>
                    </view>
                    <view class="form_item">
                        <view class="item_l">电话：</view>
                        <view class="item_r">
                            <van-field :value="phone" placeholder="请输入您的电话" :border="false" @input="getPhone" />
                        </view>
                    </view>
                    <view class="form_item">
                        <view class="item_l">城市：</view>
                        <view class="item_r">
                            <van-field :value="city" placeholder="请输入您所在城市" :border="false" @input="getCity" />
                        </view>
                    </view>
                    <view class="form_item">
                        <view class="item_l">备注：</view>
                        <view class="item_r">
                            <van-field
                                :value="remark"
                                placeholder="可简要描述您想咨询的问题"
                                :border="false"
                                type="textarea"
                                :maxlength="50"
                                :autosize="true"
                                show-word-limit
                                @input="getRemark"
                            />
                        </view>
                    </view>
                </view>
            </view>
            <view class="join_btn" @tap="tijiao">提交</view>
        </view>
    </view>
    <!-- loading -->
    <!-- <van-overlay show="{{ loading }}" z-index="100">
	<van-loading custom-class="custom_loading" />
</van-overlay> -->
</template>

<script>
// index.js
let myPro = require('../../utils/wxRequest.js');

let util = require('../../utils/util.js'); // 获取应用实例

const app = getApp();
export default {
    data() {
        return {
            current: 0,
            // 轮播图展示第几个
            interval: 3000,
            // 自动切换时间间隔
            adList: ['/static/statics/img/join/1.png', '/static/statics/img/join/2.png', '/static/statics/img/join/3.png'],
            name: '',
            phone: '',
            city: '',
            remark: '',
            showBack: true,
            pageTitle: '招商加盟',
            showHeader: false,
            // header显示状态
            setBgHeight: getApp().globalData.setBgHeight,
            loading: false // 全局loading
        };
    },
    onLoad: function (options) {
        // Do some initialize when page load.
    },
    onShow: function () {
        // Do something when page show.
        let that = this;
    },
    onReady: function () {
        // Do something when page ready.
    },
    onHide: function () {
        // Do something when page hide.
    },
    onUnload: function () {
        // Do something when page close.
    },
    onPullDownRefresh: function () {
        // Do something when pull down.
    },
    onReachBottom: function () {
        // Do something when page reach bottom.
    },
    onPageScroll: function (event) {
        // Do something when page scroll
        let that = this;
        let scrollTop = event.scrollTop;

        if (scrollTop >= that.setBgHeight) {
            that.setData({
                showHeader: true
            });
        } else {
            that.setData({
                showHeader: false
            });
        }
    },
    onResize: function () {
        // Do something when page resize
    },
    methods: {
        // 广告轮播图切换
        changeAd(event) {
            let that = this;
            that.setData({
                current: event.detail.current
            });
        },

        // 加盟人姓名
        getName(event) {
            let that = this;
            that.setData({
                name: event.detail
            });
        },

        // 加盟人电话
        getPhone(event) {
            let that = this;
            that.setData({
                phone: event.detail
            });
        },

        // 加盟人地址
        getCity(event) {
            let that = this;
            that.setData({
                city: event.detail
            });
        },

        // 加盟人留言
        getRemark(event) {
            let that = this;
            that.setData({
                remark: event.detail
            });
        },

        // 提交
        tijiao() {
            let that = this;

            if (!that.name) {
                uni.showToast({
                    title: '请填写您的姓名',
                    icon: 'none'
                });
                return;
            }

            if (!that.phone || !/^1[3456789]\d{9}$/.test(that.phone)) {
                uni.showToast({
                    title: '手机号有误,请重新填写',
                    icon: 'none'
                });
                return;
            }

            if (!that.city) {
                uni.showToast({
                    title: '请填写您所在的城市',
                    icon: 'none'
                });
                return;
            }

            let params = {
                name: that.name,
                phone: that.phone,
                city: that.city
            };

            if (that.remark) {
                params.remark = that.remark;
            }

            myPro
                .wxRequest('user/v2/joinUs', 'GET', params)
                .then((res) => {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    });
                    that.setData({
                        name: '',
                        phone: '',
                        city: '',
                        remark: ''
                    });
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        }
    }
};
</script>
<style>
/**index.wxss**/
.wrap {
    min-height: 100vh;
    background: #f6f6f6;
}
.banner {
    width: 750rpx;
    height: 554rpx;
}
.swiper_w {
    padding: 48rpx 0 80rpx;
    border-radius: 10rpx 10rpx 0 0;
    background: #f9f9f9;
    position: relative;
    margin-top: -20rpx;
}
.swiper_t {
    padding-bottom: 28rpx;
    text-align: center;
}
.swiper_t .title {
    font-size: 40rpx;
    font-weight: 500;
    color: #000000;
}
.swiper_t .desc {
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.54);
    padding-top: 20rpx;
}
.swiper {
    height: 936rpx;
}
.swiper .join_tu {
    width: 530rpx;
    height: 936rpx;
    display: block;
    margin: 0 auto;
    border-radius: 10rpx;
}
.swiper_w .dots {
    position: absolute;
    bottom: 50rpx;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
}
.swiper_w .dots .dot {
    width: 10rpx;
    height: 10rpx;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5rpx;
    margin-left: 10rpx;
}
.swiper_w .dots .dot.active {
    width: 60rpx;
    background: #e1342d;
}
/* 问题 */
.question_t {
    font-size: 40rpx;
    font-weight: 500;
    color: #000000;
    text-align: center;
    padding-bottom: 38rpx;
}
.question_list {
    width: 690rpx;
    margin: 0 auto;
    padding: 0 30rpx 30rpx;
    background: #ffffff;
    border-radius: 10rpx;
}
.question_list .item {
    padding: 40rpx 0 0;
    display: flex;
}
.question_list .item .item_icon {
    width: 43rpx;
    height: 40rpx;
}
.question_list .item_nr {
    width: 560rpx;
    margin-left: 14rpx;
}
.question_list .item .item_title {
    font-size: 30rpx;
    color: #000000;
}
.question_list .item .item_desc {
    font-size: 28rpx;
    color: rgba(55, 54, 54, 0.7);
    padding-top: 30rpx;
}
.question .view_more {
    width: 690rpx;
    margin: 0 auto;
    background: #ffffff;
    text-align: center;
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.54);
    padding-bottom: 40rpx;
}
/* 加盟 */
.join_us {
    width: 690rpx;
    margin: 0 auto;
    padding-bottom: 60rpx;
}
.join_us_title {
    font-size: 40rpx;
    font-weight: 500;
    color: #000000;
    padding: 40rpx 0;
    text-align: center;
}
.join_us_nr {
    display: flex;
    flex-direction: column;
}
.join_us_nr .join_us_t {
    padding: 30rpx 30rpx 0;
    font-size: 28rpx;
    color: #000000;
    background: #ffffff;
}
.join_us_nr .line {
    width: 690rpx;
    height: 30rpx;
}
.form_wrap {
    background: #ffffff;
    padding: 0 30rpx 30rpx;
}
.form_item {
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    min-height: 80rpx;
    background: #f9f9f9;
    border-radius: 10rpx;
    margin-top: 10rpx;
    font-size: 26rpx;
}
.form_item .item_r {
    flex: 1;
}
.form_item .item_r van-field {
    width: 100%;
}
.form_item .van-cell {
    background: transparent;
}
.join_us .join_btn {
    width: 405rpx;
    height: 98rpx;
    background: #295c56;
    border-radius: 10rpx;
    margin: 40rpx auto;
    font-size: 28rpx;
    color: #fffefe;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>