qimall/backend/modules/mall/views/user/relation-edit.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-dialog-select');
ComponentHelper::loadComponentView('com-select-cat');
?>
<div id="app" v-cloak>
    <el-card class="box-card" style="border:0" shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>分享设置</span>
            <div style="float: right; margin: -5px 0">
                <el-button class="button-item" :loading="btnLoading" type="primary" @click="submit('ruleForm')" size="small">
                    保存
                </el-button>
            </div>
        </div>
        <div class="form-body">
            <el-row>
                <el-form :model="ruleForm" size="small" ref="ruleForm" label-width="200px">
                    <div slot="header">关系设置</div>

                    <el-col :span="24">
                        <el-form-item label="是否记录推广来源" prop="use_relation">
                            <el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="0"></el-switch>
                        </el-form-item>
                        <div v-show="ruleForm.status==1">
                            <el-form-item label="权利获取条件">
                                <el-radio-group v-model="ruleForm.get_power_way">
                                    <el-radio :label="1" border>无条件</el-radio>
                                    <el-radio :label="3" border>或</el-radio>
                                    <el-radio :label="4" border>与</el-radio>
                                </el-radio-group>
                                <div>
                                    <span class="text-danger">[或]满足以下任意条件都可以升级</span><br>
                                    <span class="text-danger">[与]满足以下所有条件才可以升级</span><br>
                                </div>
                                <div v-if="ruleForm.get_power_way>2">
                                    <el-form-item>
                                        <el-row :gutter="20">
                                            <el-col :span="7">
                                                <el-switch v-model="ruleForm.buy_num_selected" active-text="消费次数" :active-value="1" :inactive-value="0">
                                                </el-switch>
                                            </el-col>
                                            <el-col :span="26">
                                                <el-input v-model="ruleForm.buy_num" type="number" oninput="value=value.replace(/[^0-9]/g,'')">
                                                    <template slot="append">次</template>
                                                </el-input>
                                            </el-col>
                                        </el-row>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-row :gutter="20">
                                            <el-col :span="7">
                                                <el-switch v-model="ruleForm.buy_price_selected" active-text="消费金额" :active-value="1" :inactive-value="0">
                                                </el-switch>
                                            </el-col>
                                            <el-col :span="26">
                                                <el-input v-model="ruleForm.buy_price" type="number" oninput="value=value.replace(/[^0-9]/g,'')">
                                                    <template slot="append">元</template>
                                                </el-input>
                                            </el-col>
                                        </el-row>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-col :span="8">
                                            <el-switch v-model="ruleForm.buy_goods_selected" active-text="购买商品" :active-value="1" :inactive-value="0">
                                            </el-switch>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item v-if="ruleForm.buy_goods_selected==1">
                                        <el-col :span="26">
                                            <el-radio-group v-model="ruleForm.buy_goods_way">
                                                <el-radio :label="1">任意商品</el-radio>
                                                <el-radio :label="2">
                                                    <div style="display: inline-block;">
                                                        <div flex="cross:center">
                                                            <div>指定商品</div>
                                                            <div style="margin-left: 10px;" v-if="ruleForm.buy_goods_way==2">
                                                                <com-dialog-select :multiple="true" @selected="goodsSelect" title="商品选择">
                                                                    <el-button type="primary">选择商品</el-button>
                                                                </com-dialog-select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </el-radio>
                                                <el-radio :label="3">
                                                    <div style="display: inline-block;">
                                                        <div flex="cross:center">
                                                            <div>指定分类</div>
                                                            <div style="margin-left: 10px;" v-if="ruleForm.buy_goods_way==3">
                                                                <div style="display: inline-block">
                                                                    <el-button type="primary" @click="cat_show=true">选择分类
                                                                    </el-button>
                                                                </div>
                                                            </div>
                                                            <com-select-cat :show="cat_show" v-model="ruleForm.cat_list" @cancel="cat_show=false"></com-select-cat>
                                                        </div>
                                                    </div>
                                                </el-radio>
                                            </el-radio-group>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item prop="goods_ids">
                                        <template v-if="ruleForm.buy_goods_way==2">
                                            <div style="color: #ff4544;">最多可添加20个商品</div>
                                            <div style="max-height: 300px;overflow-y: auto">
                                                <el-table :data="ruleForm.goods_list" :show-header="false" border>
                                                    <el-table-column label="">
                                                        <template slot-scope="scope">
                                                            <div flex>
                                                                <div style="padding-right: 10px;flex-grow: 0">
                                                                    <com-image mode="aspectFill" :src="scope.row.cover_pic"></com-image>
                                                                </div>
                                                                <div style="flex-grow: 1;">
                                                                    <com-ellipsis :line="2">{{scope.row.name}}
                                                                    </com-ellipsis>
                                                                </div>
                                                                <div style="flex-grow: 0;">
                                                                    <el-button @click="deleteGoods(scope.$index)" type="text" circle size="mini">
                                                                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                                                            <img src="resources/img/mall/del.png" alt="">
                                                                        </el-tooltip>
                                                                    </el-button>
                                                                </div>
                                                            </div>
                                                        </template>
                                                    </el-table-column>
                                                </el-table>
                                            </div>
                                        </template>
                                        <template v-if="ruleForm.buy_goods_way == 3">
                                            <label>已选择分类：</label>
                                            <el-tag style="margin-right: 5px;margin-bottom: 5px;" v-for="(item,index) in ruleForm.cat_list" :key="item.value" v-model="ruleForm.cat_list" type="warning" closable disable-transitions @close="deleteCat(item.value,index)">
                                                {{item.label}}
                                            </el-tag>
                                        </template>
                                        <div style="margin-top: 20px;">
                                            <label>消费条件统计的方式：</label>
                                            <el-radio-group v-model="ruleForm.buy_compute_way">
                                                <el-radio :label="1" border>付款后</el-radio>
                                                <el-radio :label="2" border>完成后</el-radio>
                                            </el-radio-group>
                                        </div>
                                    </el-form-item>
                                </div>
                            </el-form-item>
                            <el-form-item label="记录来源方式">
                                <el-radio-group v-model="ruleForm.become_child_way">
                                    <el-radio :label="1" border>首次点击分享海报</el-radio>
                                    <el-radio :label="2" border>首次完成订单</el-radio>
                                    <el-radio :label="3" border>首次付款</el-radio>
                                    <el-radio :label="4" border>填写推广手机号</el-radio>
                                    <el-radio :label="5" border>邀请码绑定</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <!--                            <el-form-item label="申请协议" prop="protocol" v-if="ruleForm.get_power_way>1">-->
                            <!--                                <el-input type="textarea" :rows="4" placeholder="申请协议" v-model="ruleForm.protocol">-->
                            <!--                                </el-input>-->
                            <!--                            </el-form-item>-->
                            <!--                            <el-form-item label="用户须知" prop="notice" v-if="ruleForm.get_power_way>1">-->
                            <!--                                <el-input type="textarea" :rows="4" placeholder="用户须知" v-model="ruleForm.notice">-->
                            <!--                                </el-input>-->
                            <!--                            </el-form-item>-->
                        </div>
                    </el-col>

                </el-form>
            </el-row>
        </div>
    </el-card>
</div>
<style>
    @media screen and (max-width: 1500px) {
        #app {
            min-width: 1270px;
        }
    }
    .form-body{
        padding: 20px 20px 0 10px;
    }
</style>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                btnLoading: false,
                cat_show: false,
                show_share_level: false,
                dataLoading: false,
                submitLoading: false,
                dialogInDialogVisible: false,
                name: '',
                ruleForm: {
                    get_power_way: 3,
                    buy_num_selected: 0,
                    buy_num: 0,
                    buy_price_selected: 0,
                    buy_price: 0,
                    buy_goods_selected: 0,
                    goods_ids: [],
                    cat_ids: [],
                    buy_goods_way: 0,
                    buy_compute_way: 0,
                    become_child_way: '',
                    cat_list: [],
                    goods_list: [],
                    notice: '',
                    protocol: '',
                    status: 0,
                },
                rules: {

                }
            };
        },
        created() {
            this.loadData();
        },
        mounted() {

        },
        methods: {
            picUrlStatus(list) {
                this.ruleForm.status_pic_url = list[0].url;
            },
            deleteUrlStatus() {
                this.ruleForm.status_pic_url = '';
            },
            goodsSelect(param) {
                for (let j in param) {
                    let item = param[j];
                    if (this.ruleForm.goods_ids.length >= 20) {
                        this.$message.error('指定商品不能大于20个');
                        return;
                    }
                    let flag = true;
                    for (let i in this.ruleForm.goods_ids) {
                        if (this.ruleForm.goods_ids[i] == item.id) {
                            flag = false;
                            break;
                        }
                    }
                    if (flag) {
                        this.ruleForm.goods_ids.push(item.id);
                        this.ruleForm.goods_list.push({
                            id: item.id,
                            name: item.goods_name,
                            cover_pic: item.cover_pic,
                        });
                    }
                }
            },
            loadData() {
                this.loading = true;
                let self = this;
                request({
                    params: {
                        r: 'mall/user/relation-edit',
                    },
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        e.data.data.get_power_way && (this.ruleForm.get_power_way = e.data.data.get_power_way);
                        e.data.data.buy_num_selected && (this.ruleForm.buy_num_selected = e.data.data.buy_num_selected);
                        e.data.data.buy_num && (this.ruleForm.buy_num = e.data.data.buy_num);
                        e.data.data.buy_price_selected && (this.ruleForm.buy_price_selected = e.data.data.buy_price_selected);
                        e.data.data.buy_price && (this.ruleForm.buy_price = e.data.data.buy_price);
                        e.data.data.buy_goods_selected && (this.ruleForm.buy_goods_selected = e.data.data.buy_goods_selected);
                        e.data.data.buy_goods_way && (this.ruleForm.buy_goods_way = e.data.data.buy_goods_way);
                        e.data.data.buy_compute_way && (this.ruleForm.buy_compute_way = e.data.data.buy_compute_way);
                        e.data.data.become_child_way && (this.ruleForm.become_child_way = e.data.data.become_child_way);
                        e.data.data.notice && (this.ruleForm.notice = e.data.data.notice);
                        e.data.data.protocol && (this.ruleForm.protocol = e.data.data.protocol);
                        e.data.data.status && (this.ruleForm.status = e.data.data.status);
                        e.data.data.goods_ids && (this.ruleForm.goods_ids = e.data.data.goods_ids);
                        e.data.data.cat_ids && (this.ruleForm.cat_ids = e.data.data.cat_ids);
                        e.data.data.cat_list && (this.ruleForm.cat_list = e.data.data.cat_list);
                        e.data.data.goods_list && (this.ruleForm.goods_list = e.data.data.goods_list);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {});
            },


            deleteGoods(index) {
                this.ruleForm.goods_list.splice(index, 1);
                this.ruleForm.goods_ids.splice(index, 1);
            },
            deleteCat(value, index) {
                this.ruleForm.cat_list.splice(index, 1);
                this.ruleForm.cat_ids.splice(index, 1);
            },
            submit(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        this.submitLoading = true;

                        let cat_ids = [];
                        if (this.ruleForm.cat_list.length) {

                            this.ruleForm.cat_list.forEach(function(item) {
                                cat_ids.push(item.value);
                            })

                            this.ruleForm.cat_ids = cat_ids;
                        }

                        request({
                            params: {
                                r: 'mall/user/relation-edit',
                            },
                            method: 'post',
                            data: this.ruleForm,
                        }).then(e => {
                            this.submitLoading = false;
                            console.log(e);

                            if (e.data.code === 0) {
                                this.$message.success(e.data.msg);
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {});
                    } else {

                    }
                });
            },
        }
    });
</script>