qimall/addons/Store/client/views/credit/setting-credit.php

<?php

use common\helpers\ComponentHelper;
ComponentHelper::loadComponentView('com-dialog-select');
?>
<style>
  .item-box .label{
	  margin-right:5px;
	  width:100px;
  }
  .item-box{
	  width:20%;
	  margin-top:10px;
  }
  .el-form{
	  display:flex;
	  flex-wrap:wrap;
  }
  .item-box .search-btn{
	  margin-left:5px;
  }
  .goods-images{
	  width:50px;
	  height:50px;
	  border-radius:10px;
  }
  .credit-info{
	  margin:8px 0;
  }
  .credit-info .goods_name{
	  margin-left:5px;
  }
  .proport-box{
	width:100%;
	justify-content: center;
  }
</style>
<div id="app" v-cloak>
    <el-card shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div>
                <span>赊账设置</span>
            </div>
            </template>
        </div>

        <div class="table-body el-input--small">
            <el-form size="small"  flex="dir:left cross:center" style="margin-bottom: 12px;">

                <div class="item-box" flex="dir:left cross:center" style="margin-right: 20px">
                    <div class="label">赊账功能</div>
                    <el-switch v-model="isOpenCredit" :active-value="1" :inactive-value="0" @change="changeCredit">
                </div>
				<div class="item-box" flex="dir:left cross:center" style="margin-right: 20px">
				    <div class="label">商品名称</div>
				    <el-input style="width: 250px" v-model="search.goods_name" placeholder="商品名称"></el-input>
				</div>
                <div class="item-box" flex="dir:left cross:center">
                    <el-button type="primary" class="search-btn" style="padding: 12px 34px !important;" @click="searchs">搜索
                    </el-button>
                </div>
				<div class="item-box" flex="dir:left cross:center" style="width:100%">
				    <el-button type="primary" class="search-btn" style="padding: 12px 34px !important;" @click="proportionVisible = true">收银台赊账设置
				    </el-button>
					<com-dialog-select url="store/client/credit/search-goods"  :params="goodsListparams" :multiple="true" @selected="goodsSelect" title="商品选择">
						<div class="" slot="inputslot">
							<div class="item-box"  flex="dir:left cross:center" style="margin-right: 20px;width:40%">
							    <div class="label">赊账比例</div>
							    <el-input style="width: 250px" v-model="goods_credit_rate" placeholder="请设置赊账比例"></el-input>
							</div>
						</div>
						<el-button type="primary" class="search-btn" style="padding: 12px 34px !important;" @click="selectAll">全部商品
						</el-button>
					</com-dialog-select>
					
				</div>
            </el-form>
            <el-table v-loading="listLoading" :data="creditStoreList" stripe style="width: 100%">
				<el-table-column prop="order_no"  label="商品信息" align="center" width="230px">
					<template slot-scope="scope">
					   <div class="credit-info" flex="cross:center" >
					       <el-image class="goods-images" :src="scope.row.cover_pic" ></el-image>
					       <div class="goods_name over1" >{{scope.row.goods_name}}</div>
					   </div>
					</template>
				</el-table-column>
                <el-table-column prop="pay_money"  label="商品价格" align="center">
					<template slot-scope="scope">
					    <div>￥{{scope.row.price}}</div>
					</template>
				</el-table-column>
				<el-table-column   label="赊账比例" align="center">
					<template slot-scope="scope">
						<span>{{scope.row.credit_rate}}%</span>
					</template>
				</el-table-column>
				<el-table-column
				    label="操作"
				    width="300">
                    <template slot-scope="scope">
				        <el-button @click="toEdit(scope.row,)" type="text" size="small">编辑</el-button>
                        <el-button @click="toDel(scope.row.id)" type="text" size="small">删除</el-button>
				    </template>
				</el-table-column>
            </el-table>
            <div style="text-align: right;margin: 20px 0;">
                <el-pagination v-if="pagination" :page-size="pagination.pageSize"
                               style="display: inline-block;float: right;" background @current-change="pageChange"
                               layout="prev, pager, next" :total="pagination.total_count">
                </el-pagination>
            </div>
        </div>
		<!--收银台赊账设置-->
		<el-dialog title="比例设置" :visible.sync="proportionVisible" width="30%">
			<el-form size="small" label-width="100px" flex="dir:left cross:center" style="margin-bottom: 12px;">
				<el-form-item label="赊账比例">
				    <el-input type="number" v-model="credit_rate" :min="0" placeholder="请输入允许赊账比例" style="width: 250px;">
				        <template slot="append">%</template>
				    </el-input>
				</el-form-item>
				<div class="item-box proport-box" flex="dir:left cross:center">
					<el-button type="primary" class="search-btn" style="padding: 12px 34px !important;" @click="postCashierCredit">保存
					</el-button>
				</div>
			</el-form>
		</el-dialog>
		<!-- 赊账商品 -->
        <el-dialog title="比例设置" :visible.sync="proportionVisible_goods" width="30%">
            <el-form size="small" label-width="100px" flex="dir:left cross:center" style="margin-bottom: 12px;">
                <el-form-item label="赊账比例">
                    <el-input type="number" v-model="good_credit_rate" :min="0" placeholder="请输入允许赊账比例" style="width: 250px;">
                        <template slot="append">%</template>
                    </el-input>
                </el-form-item>
                <div class="item-box proport-box" flex="dir:left cross:center">
                    <el-button type="primary" class="search-btn" style="padding: 12px 34px !important;" @click="postGoodCredit">保存
                    </el-button>
                </div>
            </el-form>
        </el-dialog>

    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
			search:{
				goods_name:'',
			},
			credit_rate:0,
			page:1,
			limit:20,
			creditList:[],
			listLoading: false,
			pagination:null,
			time:[],
			isOpenCredit:0,//是否开启赊账
			creditStoreList:[], //赊账商品列表
			proportionVisible: false,
            proportionVisible_goods: false,
			goods_credit_rate:0,
            good_credit_rate:0,
			goods_credit_list:[], //赊账商品列表
			goods_credit_id:[],
			goodsListparams:{
				goods_name:''
			},
            id:0
        },
        mounted() {
			this.getCreditConfig()
        },
        methods: {
			selectAll(){
				
			},
			toDetails(id,index){
				
			},
            toEdit(row){
                this.proportionVisible_goods= true;
                this.good_credit_rate = row.credit_rate;
                this.id = row.id;
			    console.log(row);

			},
			goodsSelect(e){
				console.log('选中的商品',e,this.goods_credit_rate)
				this.goods_credit_list = e
				this.goods_credit_list.forEach((item,index) =>{
					this.goods_credit_id.push(item.id)
				})
				this.postGoodsCredit()
			},
			postGoodsCredit(){
				let self = this
				self.listLoading = true;
				  request({
					  method: 'post',
					  params: {
						  r: '/store/client/credit/goods-credit',
					  },
					  data: {goods_id: self.goods_credit_id,credit_rate:self.goods_credit_rate},
				  }).then(e => {
					  self.listLoading = false;
					  if(e.data.code == 0){
						  self.$message.success('收银台赊账比例设置成功')
					  }else{
						  self.$message.error(e.data.msg)
					  }
				  }).catch(e => {
					  console.log(e);
				  });
			},
           searchs(){
			  this.page = 1;
			  this.getCreditConfig(); 
		   },
		   toOrderDetail(order_no){
			   this.$navigate({
			       r: 'seed/index/change-log',
			       order_no: order_no
			   })	
		   },
		   changeCredit(e){ //开启关闭赊账功能
		   let self = this
		   self.listLoading = true;
			  request({
			      method: 'post',
			      params: {
			          r: '/store/client/credit/open-credit',
			      },
			      data: {is_open_credit: self.isOpenCredit},
			  }).then(e => {
			      self.listLoading = false;
			  }).catch(e => {
			      console.log(e);
			  }); 
		   },
		   getCreditConfig(e){ //获取赊账页面设置
		   let self = this
			  request({
				  method: 'get',
				  params: {
					  r: '/store/client/credit/setting-credit',
					  goods_name:self.search.goods_name
				  },
				  data: {},
			  }).then(e => {
				  self.listLoading = false;
				  self.creditStoreList = e.data.data.list
				  self.isOpenCredit = e.data.data.is_open_credit
				  self.credit_rate = e.data.data.credit_rate
				  self.pagination = e.data.data.pagination;
				  self.pagination.pageSize = e.data.data.page_size;
				  self.pagination.total_count = e.data.data.count;
				  
				  console.log('赊账功能返回',e.data)
			  }).catch(e => {
				  console.log(e);
			  }); 
		   },
		   //设置收银台赊账比例
		   postCashierCredit(){
			  let self = this
			  self.listLoading = true ;
			  request({
				  method: 'POST',
				  params: {
					  r: '/store/client/credit/cashier-credit',
				  },
				  data: {credit_rate:this.credit_rate},
			  }).then(e => {
				  self.listLoading = false;
				  if(e.data.code == 0){
					self.$message.success('收银台赊账比例设置成功')
					self.proportionVisible = false
				  }else{
                      self.$message.error(e.data.msg)
                  }
			  }).catch(e => {
				  console.log(e);
			  });
		   },
            postGoodCredit(){
			  let self = this
			  self.listLoading = true ;
			  request({
				  method: 'POST',
				  params: {
					  r: '/store/client/credit/good-credit',
				  },
				  data: {credit_rate:this.good_credit_rate,id:this.id},
			  }).then(e => {
				  self.listLoading = false;
				  if(e.data.code == 0){
					self.$message.success('编辑成功');
					self.proportionVisible_goods= false;
                      this.getCreditConfig()
				  }
			  }).catch(e => {
				  console.log(e);
			  });
		   },
            toDel(id){
			  let self = this;
                self.$confirm('删除该商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request({
                        method: 'POST',
                        params: {
                            r: '/store/client/credit/good-credit',
                        },
                        data: {credit_rate:0,id:id},
                    }).then(e => {
                        self.listLoading = false;
                        if(e.data.code == 0){
                            self.$message.success('删除成功');
                            self.proportionVisible_goods= false;
                            this.getCreditConfig()
                        }
                    }).catch(e => {
                        console.log(e);
                    });
                }).catch(() => {
                    self.$message.info('已取消删除')
                });
		   },
		   pageChange(currentPage) {
		       let self = this;
		       self.page = currentPage;
		       self.getCreditConfig();
		   },
        }
    });
</script>