football/pages/share/add/add.vue

<template>
    <app-layout>
        <view class="page">
        <!-- 申请页面背景图片以及待审核页面背景图片 -->
            <image :src="custom_setting.apply.apply_head_pic" class="add-bg"></image>
            <!-- 未在申请分销商 -->
            <view>
                <view class="add-form">
                    <view class="add-info">
                        <view class="share-name">欢迎加入
                            <text :class="[`${theme}-color`]">{{mall.name}}</text>
                        </view>，请填写申请信息</view>
                    <view class="add-info">
                        <view class="add-label">邀请人</view>
                        <view class="share-user">
                            <text :class="[`${theme}-color`]">{{parent_name}}</text>(请核对)</view>
                    </view>
                    <view>
                        <view class="add-info">
                            <view class="add-label">姓名</view>
                            <view class="add-input">
                                <input v-model="name" placeholder="请填写真实姓名"></input>
                            </view>
                        </view>
                        <view class="add-info">
                            <view class="add-label">手机号码</view>
                            <view class="add-input">
                                <input v-model="phone" type="number" placeholder="请填写手机号码"></input>
                            </view>
                        </view>
                        <view class="add-info" style="font-size:13px;">
                            <view class="read" @click="toRead">
                                <image src="/static/image/icon/icon-uncheck.png" v-if="read == false"></image>
                                <image :class="[`${theme}-background`]" src="/static/image/icon/icon-checkbox-checked.png" v-else></image>
                            </view>
                            我已经阅读并了解
                            <text style="color:#014c8c" @click="protocol = true">【{{custom_setting.apply.share_apply_pact.name ? custom_setting.apply.share_apply_pact.name : custom_setting.apply.share_apply_pact.default}}】</text>
                        </view>
                        <view class="submit">
                            <view @click="subscribe">
                                <button :style="{'background-color':`${custom_setting.apply.apply_btn_background}`,'border-radius':`${custom_setting.apply.apply_btn_round}`,'color':`${custom_setting.apply.apply_btn_color}`}">{{custom_setting.apply.apply_btn_title ? custom_setting.apply.apply_btn_title : '申请成为分销商'}}</button>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 特权 -->
                <view class="other">
                    <image @load="imageLoad" :style="{'height':`${height}rpx`}" class="end-img" :src="custom_setting.apply.apply_end_pic"></image>
                </view>
                <!-- 分销协议（modal模式） -->
                <view class="modal" v-if="protocol">
                    <view class="protocol">
                        <view class="protocol-name">{{custom_setting.apply.share_apply_pact.name ? custom_setting.apply.share_apply_pact.name : custom_setting.apply.share_apply_pact.default}}</view>
                        <view class="protocol-content">
                            <text>{{share_setting.agree}}</text>
                        </view>
                        <view @click="protocol=false;read=true">
                            <view class="read-over">我已阅读</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </app-layout>
</template>

<script>
    import { mapState } from "vuex";

    export default {
        data() {
            return {
                status: null,
                mallName: '',
                name: '',
                phone: '',
                parent_name: '总店',
                height: 0,
                template_message: [],
                read: false,
                protocol: false
            }
        },
        computed: {
            ...mapState({
                theme: state => state.mallConfig.theme,
                mall: state => state.mallConfig.mall,
                custom_setting: state => state.mallConfig.share_setting_custom,
                share_setting: state => state.mallConfig.share_setting,
            })
        },
        methods: {
            toRead() {
                this.read = !this.read
            },

            imageLoad: function (e) {
                var $width = e.detail.width; //获取图片真实宽度
                var $height = e.detail.height; //获取图片真实高度
                this.height = $height * (702 / $width)
            },
            subscribe() {
                let that = this;
                let read = 0;
                if (this.read == true) {
                    read = 1;
                    if (!that.name) {
                        uni.showToast({
                            title: '请输入真实姓名',
                            icon: 'none',
                            duration: 1000
                        });
                    } else if (!that.phone) {
                        uni.showToast({
                            title: '请输入手机号码',
                            icon: 'none',
                            duration: 1000
                        });
                    } else if (!(/0?(1)[0-9]{10}/.test(that.phone))) {
                        uni.showToast({
                            title: '请输入正确的手机号码',
                            icon: 'none',
                            duration: 1000
                        });
                    } else {
                        // let template_message = [this.template_message]
                        this.$subscribe(this.template_message).then(res => {
                            this.submit(read);
                        }).catch(res => {
                            this.submit(read);
                        });
                    }
                } else {
                    uni.showToast({
                        title: '请先查看分销协议并同意',
                        icon: 'none',
                        duration: 1000
                    });
                }
            },
            submit(read) {
                let that = this;
                uni.showLoading({
                    title: '加载中...'
                });
                that.$request({
                    url: that.$api.share.apply,
                    data: {
                        name: that.name,
                        mobile: that.phone,
                        agree: read
                    },
                    method: 'post'
                }).then(response => {
                    that.$hideLoading();
                    if (response.code == 0) {
                        uni.showToast({
                            title: response.msg,
                            duration: 1000
                        });
                        setTimeout(function() {
                            uni.navigateBack({
                                delta: 1
                            })
                        }, 500)
                    } else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(e => {
                    that.$hideLoading();
                    uni.showToast({
                        title: response,
                        icon: 'none',
                        duration: 1000
                    });
                })
            }
        },

        onLoad(options) {
            let that = this;
            if (options.parent_name != null) {
                that.parent_name = options.parent_name
            }
            if (options.template_message != null) {
                that.template_message = JSON.parse(options.template_message)
            }
            uni.setNavigationBarTitle({
                title: this.custom_setting.apply.share_apply.name ? this.custom_setting.apply.share_apply.name : this.custom_setting.apply.share_apply.default
            });
        }
    }
</script>

<style scoped lang="scss">
    .page {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: #fff;
    }

    .add-bg {
        height: #{300rpx};
        width: 100%;
        display: block;
        margin-bottom: #{20rpx};
        background-color: #f7f7f7;
    }

    .add-form {
        background-color: #fff;
        padding: 0 #{24rpx};
        font-size: #{30rpx};
        color: #353535;
    }

    .add-info {
        height: #{100rpx};
        line-height: #{100rpx};
        width: 100%;
        border-bottom: #{1rpx} solid #e2e2e2;
    }

    .add-info .add-label {
        float: left;
        width: #{180rpx};
    }

    .add-info .share-name {
        max-width: #{400rpx};
        height: #{100rpx};
        overflow: hidden;
        float: left;
    }

    .share-user {
        color: #666;
    }

    .add-input {
        height: #{100rpx};
    }

    .add-input input {
        height: #{75rpx};
        padding-top: #{25rpx};
    }

    .read {
        width: #{32rpx};
        height: #{32rpx};
        float: left;
        margin-top: #{34rpx};
        margin-right: #{10rpx};
    }

    .read image {
        height: 100%;
        width: 100%;
        display: block;
    }

    .submit {
        background-color: #f7f7f7;
        margin: 0 #{-24rpx};
        padding: #{24rpx};
    }

    .submit button {
        color: #fff;
        font-size: #{30rpx};
        font-weight: bold;
        height: #{80rpx};
        border-radius: #{40rpx};
        line-height: #{80rpx};
    }

    .other {
        background-color: #fff;
        padding: 0 #{24rpx};
        border-bottom: #{1rpx} solid #e2e2e2;
        border-top: #{1rpx} solid #e2e2e2;
        color: #353535;
        font-size: #{30rpx};
    }

    .end-img {
        width: 100%;
    }

    .caption {
        padding: #{24rpx} 0;
    }

    .modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        z-index: 99;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .protocol {
        position: relative;
        z-index: 99;
        background-color: #fff;
        width: 80%;
        border-radius: #{20rpx};
        margin: #{100rpx} auto;
    }

    .protocol-name {
        height: #{100rpx};
        text-align: center;
        line-height: #{100rpx};
        color: #666;
    }

    .protocol-content {
        padding: #{10rpx} #{20rpx};
        height: #{720rpx};
        overflow: auto;
        color: #353535;
    }

    .read-over {
        text-align: center;
        height: #{100rpx};
        line-height: #{100rpx};
        background-color: #ff4544;
        color: #fff;
        font-size: #{30rpx};
        border-bottom-right-radius: #{20rpx};
        border-bottom-left-radius: #{20rpx};
    }

    .thx {
        padding: #{100rpx};
        text-align: center;
        color: #666;
        font-size: #{30rpx};
    }

    .thx image {
        height: #{80rpx};
        width: #{80rpx};
        margin-bottom: #{50rpx};
    }
</style>