qimall/addons/ValetOrder/backend/views/default/create.php

<?php
/**
 * @link:http://www.goodmall.com/
 * @copyright: Copyright (c) 2020
 * 名片
 * Author: james
 * Date: 2020-07-10
 * Time: 15:48
 */

use common\helpers\ComponentHelper;
ComponentHelper::loadComponentView('com-dialog-select');
?>

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1200px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>代客下单</span>
        </div>

        <div class="table-body">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-form size="small" ref="form" label-width="260px" style="width: 1400px" :model="form" :rules="rules">
                    <el-form-item label="选商品" prop="attr_id" :rules="[{required: true, message: '商品不能为空'}]">
                        <!--选商品-->
                        <el-table border size="mini" :data="goods">
                            <el-table-column prop="id" label="ID" width="100" align="center"></el-table-column>
                            <el-table-column label="商品图片" width="100" align="center">
                                <template slot-scope="scope">
                                    <el-image style="width: 60px; height: 60px" :src="scope.row.cover_pic"></el-image>
                                </template>
                            </el-table-column>
                            <el-table-column label="商品名称" prop="goods_name" align="left"></el-table-column>
                            <el-table-column label="商品价格" prop="price" width="120" align="center"></el-table-column>
                            <el-table-column label="商品规格" align="center">
                                <template slot-scope="scope">
                                    <el-select v-model="form.attr_id">
                                        <el-option v-for="(item, index) in goodsAttrList" :key="item.id"
                                                   :value="item.id" :label="item.name ? item.name : '默认规格'"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="购买数量" width="120" align="center">
                                <template slot-scope="scope">
                                    <el-input min="1" v-model="form.num"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="120" align="center">
                                <template slot="header" slot-scope="scope">
                                    <el-button @click="onShowGoodsChooseVisible" size="small" type="primary" style="padding: 9px 15px !important;">选择商品</el-button>
                                </template>
                                <template slot-scope="scope">
                                    <el-popconfirm @confirm="onDeleteGoods(scope.row, scope.$index)" title="您真的要移除当前商品吗？">
                                        <el-button type="text" slot="reference" style="color: #F56C6C">删除</el-button>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                    <!--收货地址-->
                    <el-form-item label="收件人姓名" prop="name" :rules="[{required: true, message: '收件人姓名不能为空'}]">
                        <!--手机号码-->
                        <el-input v-model="form.name" placeholder="请输入收件人姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="收件人号码" prop="phone" :rules="[{required: true, message: '收件人号码不能为空'}]">
                        <!--手机号码-->
                        <el-input v-model="form.phone" maxlength="11" minlength="11" placeholder="请输入收件人号码"></el-input>
                    </el-form-item>
                    <el-form-item label="收货地址" prop="district_id" :rules="[
                        {required: true, message: '所在区域不能为空'}
                    ]">
                        <div class="flex flex-x-center">
                            <el-select v-model="provinceInfo" value-key='id' placeholder="请选择省" @change="regionChange($event, 1)">
                                <el-option v-for="item in provinces" :key="item.id" :label="item.name" :value="item"></el-option>
                            </el-select>
                            <el-select v-model="cityInfo" value-key='id' placeholder="请选择市" @change="regionChange($event, 2)">
                                <el-option v-for="item in citys" :key="item.id" :label="item.name" :value="item"></el-option>
                            </el-select>
                            <el-select v-model="districtInfo" value-key='id' placeholder="请选择区" @change='regionChange($event, 3)'>
                                <el-option v-for="item in districts" :key="item.id" :label="item.name" :value="item"></el-option>
                            </el-select>
                            <el-input v-model="form.district_id" style="display: none"></el-input>
                        </div>
                    </el-form-item>

                    <el-form-item label="详细地址" prop="address" :rules="[
                                {required: true, message: '详细地址不能为空'}
                            ]">
                        <el-input size="small" type="textarea" v-model="form.address" placeholder="请输入详细地址"></el-input>
                    </el-form-item>

                    <el-form-item label="被代购买会员手机号" prop="mobile" :rules="[{required: true, message: '被代购买会员手机号不能为空'}]">
                        <!--手机号码-->
                        <el-input v-model="form.mobile" maxlength="11" minlength="11" placeholder="请输入被代购买会员手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="被代购买会员的直属老师手机号" prop="parent_mobile">
                        <!--选用户-->
                        <el-table border size="mini" :data="selectedUserInfo">
                            <el-table-column label="用户ID" prop="id" width="120" align="center"></el-table-column>
                            <el-table-column label="用户信息" width="200" align="center">
                                <template slot-scope="scope">
                                    <div class="table-info-img-text" style="text-align: left">
                                        <el-image class="table-info-img circle" :src="scope.row.avatar_url">
                                            <div slot="error" class="image-slot">
                                                <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                            </div>
                                        </el-image>
                                        <div class="table-info-text">
                                            <div style="color:#000;">{{scope.row.nickname}}</div>
                                            <div style="font-size: 12px;">{{scope.row.mobile}}</div>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="level_name" label="会员等级">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.level > 0">等级{{scope.row.level_name}}</div>
                                    <div v-else>普通用户</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="parent_nickname" label="已绑定推荐人"></el-table-column>
                            <el-table-column label="操作" width="120" align="center">
                                <template slot="header" slot-scope="scope">
                                    <el-button @click="onSelectUser" size="small" type="danger" style="padding: 9px 15px !important;">选择用户</el-button>
                                </template>
                                <template slot-scope="scope">
                                    <el-popconfirm @confirm="onDeleteUser(scope.row, scope.$index)" title="您真的要移除当前被代购买会员的直属老师吗？">
                                        <el-button type="text" slot="reference" style="color: #F56C6C">删除</el-button>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="small" v-loading="btnLoading" :disabled="btnLoading" type="primary" style="padding: 9px 15px !important;" @click="onSubmit">提交订单</el-button>
                    </el-form-item>
                </el-form>
            </el-tabs>
        </div>
        <!-- 这个是复制用的容器，已隐藏 -->
        <textarea id="inputs" style="opacity: 0;width: 0;height: 0;">这是幕后黑手</textarea>

        <el-dialog title="选择会员" :visible.sync="userDialogVisible" width="50%">
            <div class="search-box">
                <div class="input-item">
                    <el-input @keyup.enter.native="getUser" size="small" placeholder="请输入会员ID" v-model="searchUserData.user_id"> </el-input>
                </div>
                <div class="input-item">
                    <el-input @keyup.enter.native="getUser" size="small" placeholder="会员昵称/手机号" v-model="searchUserData.keyword"> </el-input>
                </div>
                <el-button type="primary" size="small" @click="getUser">搜索</el-button>
                <el-button type="warning" size="small" @click="clereSearch" v-if="searchUserData.keyword || searchUserData.user_id" style="padding: 9px 15px !important;">清除搜索条件</el-button>
            </div>
            <el-table :data="userList" stripe v-loading="userListLoading" style="width: 100%">
                <el-table-column prop="date" width="50">
                    <template slot-scope="scope">
                        <el-radio v-model="userInfo" :label="scope.row" @change="clickChange"><i></i></el-radio>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="ID" width="80"> </el-table-column>
                <el-table-column prop="avatar_url" label="会员" width="80">
                    <template slot-scope="scope">
                        <el-image style="width: 60px; height: 60px" :src="scope.row.avatar_url" fit="cover"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="nickname" width="180"> </el-table-column>
                <el-table-column prop="mobile" label="手机号" width="200">
                </el-table-column>
                <el-table-column prop="level_name" label="会员等级">
                    <template slot-scope="scope">
                        <div v-if="scope.row.level > 0">等级{{scope.row.level_name}}</div>
                        <div v-else>普通用户</div>
                    </template>
                </el-table-column>
                <el-table-column prop="parent_nickname" label="已绑定推荐人">
                </el-table-column>
            </el-table>
            <div style="text-align: right;margin: 20px 0;">
                <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="userDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSelectedUser">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 选择商品 -->
        <el-dialog title="选择商品" :visible.sync="goodsChooseVisible" append-to-body>
            <el-form :inline="true">
                <el-form-item>
                    <el-input size="small" v-model="keyword" autocomplete="off" placeholder="请输入商品名称进行搜索"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" :disabled="btnLoading" :loading="btnLoading"
                               @click="searchGoods(1)">查找商品
                    </el-button>
                </el-form-item>
            </el-form>
            <el-table :data="goodsList" border size="small" style="width: 100%" @current-change="onChangeGoods">
                <el-table-column prop="date" width="50">
                    <template slot-scope="scope">
                        <el-radio v-model="goodsInfo" :label="scope.row"><i></i></el-radio>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="ID" width="80"></el-table-column>
                <el-table-column prop="cover_pic" label="商品图" width="180">
                    <template slot-scope="scope">
                        <com-image mode="aspectFill" :src="scope.row.cover_pic"></com-image>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="商品名称">
                    <template slot-scope="scope">
                        <com-ellipsis :line="2">{{scope.row.goods_name}}</com-ellipsis>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <div>
                    <el-pagination
                            v-if="gPagination"
                            background
                            @current-change="searchGoods"
                            layout="prev, pager, next"
                            :page-count="gPageCount">
                    </el-pagination>
                    <div style="margin-top: 10px">
                        <el-button @click="goodsChooseVisible = false">取消</el-button>
                        <el-button v-loading="btnLoading" :disabled="btnLoading" @click="onChooseGoods" type="primary">确认</el-button>
                    </div>
                </div>
            </div>
        </el-dialog>
    </el-card>

</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            activeName: '',
            form: {
                province_id: '',
                city_id: '',
                district_id: '',
                province: '',
                city: '',
                district: '',
                address: '',
                parent_mobile: '',
                mobile: '',
                attr_id: '',
                num: 1,
                buy_user_id: 0,
            },
            provinces: [],
            provinceInfo: {},
            citys: [],
            cityInfo: {},
            districts: [],
            districtInfo: {},
            rules: {},
            userDialogVisible: false,
            searchUserData: {
                user_id: null,
                keyword: '',
            },
            keyword: '',
            userList: [],
            userListLoading: false,
            pageCount: 0,
            userInfo: null,
            selectedUserInfo: [],
            goodsChooseVisible: false,
            btnLoading: false,
            goodsList: [],
            gPagination: null,
            gPageCount: 0,
            goods: [],
            goodsInfo: null,
            goodsAttrList: [],
        },
        mounted() {
            // 获取列表首页数据
            // this.loadData(this.page,this.search);	//获取列表数据
            this.regionChange({id: 1}, 0)
        },

        methods: {
            //1.0 跳转详情
            handleClick(tab, event) {
                this.page = 1;
                this.search.status = this.activeName;
                this.loadData(this.page,this.search)
            },
            handleSelectionChange(val) {
                let self = this;
                self.choose_list = [];
                val.forEach(function (item) {
                    self.choose_list.push(item.id);
                })
            },
            onSubmit() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.btnLoading = true
                        request({
                            method: 'post',
                            params: {
                                r: 'valet-order/default/create',
                            },
                            data: this.form
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code === 0) {
                                this.$message.success(e.data.msg);
                                navigateTo({
                                    r: 'valet-order/default/index'
                                })
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.btnLoading = false;
                        });
                    } else {
                        console.log(valid)
                    }
                })
            },
            regionChange(e, level) {
                let self = this;
                request({
                    params: {
                        r: 'valet-order/default/region',
                        region_id: e.id,
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        switch (level) {
                            case 0:
                                self.provinces = e.data.data;
                                break;
                            case 1:
                                self.citys = e.data.data;
                                this.form.province_id = this.provinceInfo.id
                                this.form.province = this.provinceInfo.name
                                break;
                            case 2:
                                self.districts = e.data.data;
                                this.form.city_id = this.cityInfo.id
                                this.form.city = this.cityInfo.name
                                break;
                            case 3:
                                self.streets = e.data.data;
                                this.form.district_id = this.districtInfo.id
                                this.form.district = this.districtInfo.name
                                break;
                        }
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                    self.$message.error('网络错误');
                    return false;
                });

            },
            onSelectUser() {
                this.getUser()
                this.userDialogVisible = true;
            },
            getUser() {
                let self = this;
                self.userListLoading = true;
                request({
                    params: {
                        r: 'valet-order/default/users',
                        page: self.currPage,
                        ...self.searchUserData,
                    },
                    method: 'get',
                }).then(e => {
                    self.userListLoading = false;
                    if (e.data.code == 0) {
                        self.userList = e.data.data.list;
                        self.pageCount = e.data.data.page_count;
                    } else {
                        self.$message.error(e.data.msg);
                        return false;
                    }
                }).catch(e => {
                    console.log(e);
                    self.$message.error('网络错误');
                    return false;
                });
            },
            // 会员列表选中
            clickChange(userInfo) {
                this.currentUser = userInfo
            },
            onSelectedUser() {
                if (this.currentUser == null) {
                    this.$message.error('请选择用户');
                    return
                }
                this.selectedUserInfo = []
                this.selectedUserInfo.push(this.currentUser)
                this.form.parent_mobile = this.currentUser.mobile + ''
                this.form.buy_user_id = this.currentUser.id
                this.userDialogVisible = false;
            },
            pagination(currentPage) {
                this.currPage = currentPage;
                this.getUser();
            },
            onDeleteUser(row, index){
                this.selectedUserInfo = []
            },
            onChooseGoods() {
                this.goods = []
                this.btnLoading = true;
                Vue.$http.get('valet-order/default/goods-attr', {goods_id: this.goodsInfo.id}).then(res => {
                    this.btnLoading = false;

                    this.goodsAttrList = res

                    this.goods.push({
                        id: this.goodsInfo.id,
                        goods_name: this.goodsInfo.goods_name,
                        price: this.goodsInfo.price,
                        cover_pic: this.goodsInfo.cover_pic,
                        proxy_price: '',
                        channel_price: '',
                    })
                    this.form.attr_id = res[0].id
                    this.form.num = 1
                    this.goodsChooseVisible = false
                }).catch(err => {
                    this.btnLoading = false;
                    this.$message.error(err.val)
                })
            },
            onDeleteGoods() {
                this.form.attr_id = 0
                this.form.num = 1
                this.goods = []
                this.v_goods = ''
            },
            searchGoods(page) {
                this.btnLoading = true;
                Vue.$http.get('mall/goods/search', {
                    keyword: this.keyword,
                    page: page,
                    limit: 7,
                    type: 'onsale',
                }).then(res => {
                    this.btnLoading = false;
                    this.goodsList = res.list
                    this.gPagination = res.pagination
                    this.gPageCount = res.page_count
                }).catch(err => {
                    this.btnLoading = false;
                    this.$message.error(err.val)
                })
            },
            onChangeGoods(goods) {
                this.goodsInfo = goods
            },
            onShowGoodsChooseVisible() {
                this.goodsChooseVisible = true
                this.searchGoods(1)
            },
            // 清楚搜索条件
            clereSearch() {
                this.searchUserData.user_id = null;
                this.searchUserData.keyword = '';
                this.getUser();
            },
        }
    });
</script>
<style>
    .el-tabs__header {
        font-size: 16px;
    }

    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .table-body .el-button {
        padding: 0 !important;
        border: 0;
        margin: 0 5px;
    }

    .input-item {
        width: 250px;
        margin: 0 0 20px;
        display: inline-block;
    }

    .input-item .el-input__inner {
        border-right: 0;
    }

    .input-item .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        margin: 0;
    }

    .batch {
        margin: 0 0 20px;
        display: inline-block;
    }

    .batch .el-button {
        padding: 9px 15px !important;
    }

    .item-box{
        margin-right: 20px;
    }
    .item-box .label{
        margin-right: 8px;
    }
    .item-box .symbol{
        margin: 0 6px;
    }

    .form-nickname{
        width: 180px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .index-video-url{
        width: 300px;
    }
    .index-video-url video{
        width: 100%;
    }
    .index-related-info{
        width: 500px;
    }
    .video-top{
        width: 100%;
        display: flex;
        align-items: flex-start;
        box-sizing: border-box;
        padding: 20px;
        /* opacity: .5; */
        background-color: #FFFFFF;
    }

    .video-top .top-right{
        line-height: 26px;
    }
    .video-top .top-right .top-title{
        font-size: 18px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        width: 360px;
    }

    .video-top .top-right .wrapper{
        display: flex;
        /* align-items: flex-start; */
    }
    .video-top .top-right .wrapper .to-copy{
        /* color: #03C5FF; */
        margin-left: 20px;
    }
    .video-top .top-right .detail-price{
        color: #BC0100;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
    }
    /* .atooltip {
      background: #FFFFFF !important;
      border: none !important;
    } */


    .el-table th>.cell{
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }
    .el-table__footer-wrapper, .el-table__header-wrapper{
        /*border-bottom: 1.4px solid #D6D6D6;*/
    }

    .price_col{
        color: #FF5D05;
    }
</style>