123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188 |
- <template>
- <view class="addCustomer-content">
- <view class="content-form">
- <u-form :model="form" ref="uForm" :rules="rules" label-width="180">
- <u-form-item label="客户名称" required prop="customerName"><u-input v-model.trim="form.customerName" placeholder="请输入客户名称" input-align="right" /></u-form-item>
- <u-form-item label="客户地址" required prop=""><u-input v-model="form.contactName" input-align="right" placeholder="客户地址"/></u-form-item>
- <u-form-item label="联系电话"><u-input v-model.trim="form.contactTel" placeholder="请输入联系电话" input-align="right" /></u-form-item>
- <u-form-item label="联系手机"><u-input v-model.trim="form.contactMobile" placeholder="请输入联系手机" input-align="right" /></u-form-item>
- <u-form-item label="联系人"><u-input v-model="form.contactName" input-align="right" placeholder="请输入联系人"/></u-form-item>
- <u-form-item label="详细地址"><u-input v-model.trim="form.customerAddr" type="textarea" placeholder="请输入详细地址" input-align="right" /></u-form-item>
- <u-form-item label="客户传真"><u-input v-model="form.fax" input-align="right" placeholder="请输入客户传真"/></u-form-item>
- <u-form-item label="配送方式"><v-select ref="dispatchType" :disabled="true" placeholder="请选择配送方式" @itemChange="chooseType" code="DISPATCH_TYPE" style="width: 100%"></v-select></u-form-item>
- <u-form-item label="客户类型"><u-input v-model="priceTypeName" input-align="right" :disabled="true" placeholder="请选择客户类型" @click="showCust=true"/></u-form-item>
- <u-form-item label="价格类型" required prop=""></u-form-item>
- <u-form-item label="收款方式" required prop="settleStyleSn">
- <u-input v-model="settleStyleName" input-align="right" :disabled="true" placeholder="请选择收款方式" @click="showSettle=true"/>
- </u-form-item>
- </u-form>
- </view>
- <view class="form-footer-btn">
- <u-button class="handle-btn" size="medium" shape="circle" hover-class="none" @click="handleSubmit" :custom-style="customBtnStyle">保存</u-button>
- </view>
- <!-- 选择收款方式 -->
- <u-picker v-model="showSettle" title="收款方式" @confirm="settleStyleChange" :range="settleTypeList" range-key="name" mode="selector"></u-picker>
- <!-- 客户类型 -->
- <u-picker v-model="showCust" title="客户类型" @confirm="custTypeChange" :range="custTypeList" range-key="name" mode="selector"></u-picker>
- </view>
- </template>
- <script>
- import {customerDetail,settleStyleQueryAll,custType} from '@/api/sales.js'
- import vSelect from '@/components/select/v-select.vue'
- export default{
- components: { vSelect },
- data(){
- return{
- customerData:null, // 客户信息
- priceTypeName:'', //客户类型名称
- customBtnStyle: { // 自定义按钮样式
- backgroundColor: this.$config('primaryColor'),
- color: '#fff'
- },
- form:{
- id: null,
- customerName: '', // 客户名称
- contactTel: '', // 联系电话
- contactMobile: '', // 联系手机
- contactName: '', // 联系人
- provinceSn: undefined, // 省
- provinceName: '',
- citySn: undefined, // 市
- cityName: '',
- countySn: undefined, // 区
- countyName: '',
- customerAddr: '', // 详细地址
- fax: '', // 客户传真
- dispatchType: undefined, // 配送方式
- satelliteFlag: 0, // 是否卫星仓客户
- customerTypeSn: undefined, // 客户类型
- priceType: '', // 价格类型
- settleStyleSn: undefined // 收款方式
- },
- rules:{
- customerName: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
- contactMobile: [{ required: false, pattern: /^\d{11}$/, message: '请输入正确的手机号', trigger: 'blur' }],
- provinceSn: [{ required: true, message: '请选择省', trigger: 'change' }],
- citySn: [{ required: true, message: '请选择市', trigger: 'change' }],
- countySn: [{ required: true, message: '请选择区/县', trigger: 'change' }],
- priceType: [{ required: true, message: '请选择价格类型', trigger: 'change' }],
- settleStyleSn: [{ required: true, message: '请选择收款方式', trigger: 'change' }]
- },
- showSettle:false,//结算方式初始值
- settleTypeList:[],//收款方式列表
- settleStyleName:'',//收款方式名称
- custTypeList:[] ,// 客户类型数据
- showCust:false, //客户类型下拉弹窗初始值
- custTypeName:'', // 客户类型名称
- }
- },
- onLoad(option) {
- this.getSettleStyle()
- this.getCustomerList()
-
- },
- methods:{
- // 选择配送方式
- chooseType(v){
- console.log(v,'---------')
- },
- // 下拉选择
- selete(val){
- if(val==0){
- this.drownType='customer'
- }else{
- this.drownType='settle'
- }
- console.log(val,this.drownType)
- setTimeout(()=>{
- this.showSettle=true
- },300)
-
- },
- brandClean(){
- this.settleStyleName=''
- this.form.settleStyleSn=undefined
- },
- // 获取客户类型列表
- getCustomerList(){
- custType({}).then(res=>{
- if(res.status==200){
- this.custTypeList=res.data
- }else{
- this.custTypeList=[]
- }
- })
- },
- // 获取结算方式列表
- getSettleStyle(){
- settleStyleQueryAll({}).then(res=>{
- if(res.status==200){
- this.settleTypeList=res.data
- }else{
- this.settleTypeList=null
- }
- })
- },
- settleStyleChange(e){
- console.log(e,'data')
- this.settleStyleName=this.settleTypeList[e].name
- this.form.settleStyleSn=this.settleTypeList[e].settleStyleSn
-
- },
- custTypeChange(e){
- this.priceTypeName=this.custTypeList[e].name
- this.form.customerTypeSn=this.custTypeList[e].customerTypeSn
- },
- // 保存
- handleSubmit(){
- console.log('保存===========')
- this.$refs.uForm.validate().then(res => {
- if(res){
- uni.$u.toast('校验通过')
- }
- console.log(res,'--------------校验')
-
- }).catch(errors => {
- uni.$u.toast('校验失败')
- })
- },
- // getCustomerData(){
- // customerDetail({id:this.itemId}).then(res=>{
- // if(res.status==200){
- // this.customerData=res.data
- // }else{
- // this.customerData=null
- // }
- // })
- // }
- }
- }
- </script>
- <style lang="scss">
- .addCustomer-content{
- width: 100%;
- height: 100vh;
- background-color: #fff;
- padding:0 40upx;
- display: flex;
- flex-direction: column;
- .content-form{
- flex: 1;
- }
- .content-form:not(:last-child){
- border-bottom: none;
- }
- .form-footer-btn{
- position: fixed;
- bottom: 0;
- left: 0;
- width: 100%;
- padding: 16upx 20upx 12upx;
- .handle-btn{
- width: 100%;
- }
- }
- }
- </style>
|