caimei-applets-caimei/pages/login/components/solution.vue

<template>
    <view
        class="solution"
        :style="{
            background: 'url(' + bgImg + ')',
            'background-repeat': 'no-repeat',
            'background-size': '100% 100%'
        }"
        @click.stop="activeSelect"
    >
        <slot name="supplier-title"></slot>
        <view class="solution_container">
            <view class="solution_item" v-for="(item, index) in solutionList" :key="item.id">
                <view
                    class="solution_item_bg"
                    :style="{
                        background: 'url(' + item.bgImg + ')',
                        'background-repeat': 'no-repeat',
                        'background-size': '100%'
                    }"
                >
                    {{ item.title }}
                </view>
                <view class="solution_item_container">
                    <view class="solution_text" v-for="(text, index) in item.content" :key="index">
                        {{ text.text }}
                    </view>
                    <button type="default" class="solution_btn" @click="openMadel(item.title, `${index+1}`)">查看解决方案</button>
                </view>
            </view>
        </view>
        <tui-modal :show.sync="modal" custom maskClosable color="#333" :size="32">
            <view class="tui-modal-custom">
                <image class="tui-logo" src="https://static.caimei365.com/app/img/icon/supplier-h5.png" mode=""></image>
                <view class="tui-close" @click="close"></view>
                <view class="title_1">{{ solutionTitle }}</view>
                <view class="title_2">请完成以下信息并提交，1-3个工作日会有专人与您沟通！</view>
                <form>
                    <input class="uni-input" v-model="solutionForm.userName" placeholder="请输入姓名" />
                    <input class="uni-input" v-model="solutionForm.corporateName" placeholder="请输入公司名称" />
                    <input class="uni-input" v-model="solutionForm.mobile" type="number" maxlength="11" placeholder="请输入您的手机号" />
                    <multiple-select
                        placeholder="请选择您感兴趣的问题"
                        :value="solutionForm.list"
                        name="name"
                        :options="selectMultiplecolumns"
                        @change="selectitem"
                        :showValueClear="false"
                        ref='select'
                    />
                </form>
                <button
                    :class="isTrue ? 'isTrue' : ''"
                    height="72rpx"
                    class="solution_btn"
                    :size="28"
                    shape="circle"
                    @click="formSubmit"
                >
                    提交
                </button>
            </view>
        </tui-modal>
    </view>
</template>

<script>
import multipleSelect from './multiple-select/multiple-select.vue'
import {mapState} from 'vuex'
export default {
    components: {
        multipleSelect
    },
    props: {
        isShareTimeline: { // 是否从朋友圈分享进入
            type: Boolean,
            default: () => false
        }
    },
    data() {
        return {
            bgImg: 'https://static.caimei365.com/app/img/supplier-login/solution/bg.png',
            // 解决方案内容
            solutionList: [
                {
                    id: 1,
                    title: '基础版',
                    bgImg: 'https://static.caimei365.com/app/img/supplier-login/solution/01.png',
                    content: [
                        {
                            text: '品牌商城入驻'
                        },
                        {
                            text: '品牌内容宣发'
                        },
                        {
                            text: '用户画像洞察'
                        },
                        {
                            text: '客户旅程搭建'
                        },
                        {
                            text: '客户线索跟踪'
                        },
                        {
                            text: '线索转化'
                        }
                    ]
                },
                {
                    id: 2,
                    title: '高级版',
                    bgImg: 'https://static.caimei365.com/app/img/supplier-login/solution/02.png',
                    content: [
                        {
                            text: '基础版全部内容'
                        },
                        {
                            text: '引流关键词策划和布局'
                        },
                        {
                            text: '漏斗模型转化率评估'
                        },
                        {
                            text: '数字营销内容策划'
                        },
                        {
                            text: '客户线索跟踪'
                        },
                        {
                            text: '线索转化'
                        }
                    ]
                },
                {
                    id: 3,
                    title: '战略版',
                    bgImg: 'https://static.caimei365.com/app/img/supplier-login/solution/03.png',
                    content: [
                        {
                            text: '高级版全部内容'
                        },
                        {
                            text: '设置销售目标'
                        },
                        {
                            text: '数据模型策划和执行'
                        },
                        {
                            text: '品牌私域运营及正品认证通'
                        },
                        {
                            text: '开放平台全域销售系统'
                        },
                        {
                            text: '保证销售目标的执行'
                        }
                    ]
                }
            ],
            modal: false,
            btnStyle: [
                {
                    text: '确定',
                    type: '',
                    plain: false
                }
            ],
            solutionTitle: '基础版', // 表单标题
            isTrue: false,
            solutionForm: {
                // 解决方案表单
                userName: '',
                corporateName: '',
                mobile: '',
                level: '',
                list: []
            },
            // 多选框配置
            selectMultiplecolumns: [
                {
                    label: '商城入驻（商品SKU管理、订单交易管理）',
                    value: '商城入驻（商品SKU管理、订单交易管理）'
                },
                {
                    label: '正品认证（仪器授权认证、购机客户管理、品牌运营）',
                    value: '正品认证（仪器授权认证、购机客户管理、品牌运营）'
                },
                {
                    label: '销售赋能（降低管理成本，提升运营效果）',
                    value: '销售赋能（降低管理成本，提升运营效果）'
                },
                {
                    label: '营销获客（全渠道媒体矩阵、压缩获客成本，提高获客数/质量）',
                    value: '营销获客（全渠道媒体矩阵、压缩获客成本，提高获客数/质量）'
                },
                {
                    label: '私域运营（美业社群/美业直播、提高客户转化率）',
                    value: '私域运营（美业社群/美业直播、提高客户转化率）'
                },
                {
                    label: '客户管理（客户360“画像、客户旅程、客户行为轨迹等数据）',
                    value: '客户管理（客户360“画像、客户旅程、客户行为轨迹等数据）'
                },
                {
                    label: '其他',
                    value: '其他'
                }
            ] ,//数据
            selectMultipleData: [], // 数据
        }
    },
    computed: {
        ...mapState(['userInfo'])
    },
    watch: {
        solutionForm: {
            handler(val) {
                const a = []
                const v = Object.values(val)
                v.map((i,o) => {
                    if (!Array.isArray(i)) {
                        if (i.length > 0) {
                            a.push(true)
                        } else {
                            a.push(false)
                        }
                    }
                })
                if (a.findIndex(e => e === false) == -1) {
                    this.isTrue = true
                } else {
                    this.isTrue = false
                }
            },
            deep: true
        },
        modal(val) {
            this.$emit('solutionModal', val)
        },
    },
    methods: {
        openMadel($event, id) {
            if (this.isShareTimeline) return this.$util.msg('请前往小程序使用完整服务')
            this.modal = true
            this.solutionTitle = $event
            this.solutionForm.level = id
        },
        // 重置
        resetForm() {
            this.solutionForm = {
                // 解决方案表单
                userName: '',
                corporateName: '',
                mobile: '',
                level: '',
                list: []
            }
			this.selectMultipleData = []
			this.$refs['select'].changevalue = []
			this.$refs['select'].realValue = []
        },
        // change 改变form列表数据
        formatterList() {
            if (this.selectMultipleData.length > 0) {
                const newArr = []
                this.selectMultiplecolumns.forEach((i, index) => {
                    this.selectMultipleData.forEach(o => {
                        if(i.value == o) {
                            newArr.push(index+1)
                        }
                    })
                })
                return newArr.toString()
            } else return ''
        },
        // 提交
        formSubmit() {
            if (this.isTrue) {
                this.isTrue = false
                const form = {
                    userId: this.userInfo.userId ||'',
                    level: this.solutionForm.level,
                    userName: this.solutionForm.userName,
                    corporateName: this.solutionForm.corporateName,
                    mobile: this.solutionForm.mobile,
                    content: this.formatterList()
                }
                if(!/(^1[0-9][0-9]{9}$)/.test(form.mobile)){
                	this.$util.msg('请输入正确的手机号码')
                	return this.isTrue = true
                }
                this.UserService.supplierSearchUpdate(form).then(res => {
                    uni.showToast({
                        title: '提交成功',
                        duration: 1000,
                    })
                    this.modal = false
                    this.resetForm()
                    setTimeout(() => {
                        this.isTrue = true
                    }, 1000)
                })
                console.log(form)
            }
        },
        // 多选框确定
        selectitem($event) {
            this.selectMultipleData = $event
        },
        close() {
            this.modal = false
            this.$refs.select.active = false
        },
        // 下拉框取消选择
        activeSelect() {
            this.$refs.select.active = false
        },
    }
}
</script>

<style scoped lang="scss">
.solution {
    box-sizing: border-box;
    padding: 1rpx;
    margin-top: 120rpx;
    .solution_container {
        padding: 0 72rpx;
        box-sizing: border-box;
        .solution_item {
            width: 606rpx;
            height: 610rpx;
            box-sizing: border-box;
            display: flex;
            margin-bottom: 60rpx;
            .solution_item_bg {
                display: flex;
                align-items: center;
                writing-mode: vertical-rl;
                justify-content: center;
                width: 140rpx;
                font-size: 56rpx;
                color: #ffffff;
                font-weight: Bold;
            }
            .solution_item_container {
                width: calc(100% - 140rpx);
                height: 100%;
                position: relative;
                box-sizing: border-box;
                padding: 63rpx 70rpx;
                background-color: #fff;
                .solution_text {
                    font-size: 28rpx;
                    color: #666666;
                    line-height: 64rpx;
                    position: relative;
                    white-space: nowrap;
                }
                .solution_text::before {
                    content: '';
                    border: 1px solid #b2b2b2;
                    width: 10rpx;
                    height: 10rpx;
                    position: absolute;
                    left: -30rpx;
                    top: 25rpx;
                    transform: rotate(45deg);
                }
                .solution_btn {
                    position: absolute;
                    width: 220rpx;
                    height: 72rpx;
                    background: #ff5b00;
                    border-radius: 4rpx;
                    color: #fff;
                    font-size: 28rpx;
                    text-align: center;
                    line-height: 72rpx;
                    right: 40rpx;
                    bottom: 48rpx;
                }
            }
        }
    }
}
.tui-modal-custom {
    .tui-close {
        width: 22rpx;
        height: 22rpx;
        position: absolute;
        right: 32rpx;
        top: 24rpx;
        background: url(https://static.caimei365.com/app/img/supplier-login/modal-close.png) center;
    }
    .tui-logo {
        width: 580rpx;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        border-radius: 16rpx;
    }
    padding-top: 40rpx;
    .title_1 {
        font-size: 36rpx;
        color: black;
        text-align: center;
        margin-bottom: 40rpx;
        font-weight: bold;
    }
    .title_2 {
        color: #666666;
        font-size: 28rpx;
        margin-bottom: 56rpx;
        text-align: center;
    }
    .uni-input {
        padding: 0 20rpx;
        margin-bottom: 23rpx;
        border: 1rpx solid #cccccc;
        border-radius: 8rpx;
        height: 90rpx;
        box-sizing: border-box;
        font-size: 28rpx;
        font-weight: 100;
    }
    .solution_btn {
        width: 320rpx;
        height: 90rpx;
        margin-top: 68rpx;
        border-radius: 8rpx;
        font-size: 28rpx;
        text-align: center;
        line-height: 90rpx;
        background: #cccccc;
        color: white;
    }
    .isTrue {
        background: #ff5b00;
    }
}
</style>