addCustomer.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. <template>
  2. <view class="addCustomer-content">
  3. <view class="content-form">
  4. <u-form :model="form" ref="uForm" :rules="rules" label-width="180">
  5. <u-form-item label="客户名称" required prop="customerName"><u-input v-model.trim="form.customerName" placeholder="请输入客户名称" input-align="right" /></u-form-item>
  6. <u-form-item label="客户地址" required prop=""><u-input v-model="form.contactName" input-align="right" placeholder="客户地址"/></u-form-item>
  7. <u-form-item label="联系电话"><u-input v-model.trim="form.contactTel" placeholder="请输入联系电话" input-align="right" /></u-form-item>
  8. <u-form-item label="联系手机"><u-input v-model.trim="form.contactMobile" placeholder="请输入联系手机" input-align="right" /></u-form-item>
  9. <u-form-item label="联系人"><u-input v-model="form.contactName" input-align="right" placeholder="请输入联系人"/></u-form-item>
  10. <u-form-item label="详细地址"><u-input v-model.trim="form.customerAddr" type="textarea" placeholder="请输入详细地址" input-align="right" /></u-form-item>
  11. <u-form-item label="客户传真"><u-input v-model="form.fax" input-align="right" placeholder="请输入客户传真"/></u-form-item>
  12. <u-form-item label="配送方式"><v-select ref="dispatchType" :disabled="true" placeholder="请选择配送方式" @itemChange="chooseType" code="DISPATCH_TYPE" style="width: 100%"></v-select></u-form-item>
  13. <u-form-item label="客户类型"><u-input v-model="priceTypeName" input-align="right" :disabled="true" placeholder="请选择客户类型" @click="showCust=true"/></u-form-item>
  14. <u-form-item label="价格类型" required prop=""></u-form-item>
  15. <u-form-item label="收款方式" required prop="settleStyleSn">
  16. <u-input v-model="settleStyleName" input-align="right" :disabled="true" placeholder="请选择收款方式" @click="showSettle=true"/>
  17. </u-form-item>
  18. </u-form>
  19. </view>
  20. <view class="form-footer-btn">
  21. <u-button class="handle-btn" size="medium" shape="circle" hover-class="none" @click="handleSubmit" :custom-style="customBtnStyle">保存</u-button>
  22. </view>
  23. <!-- 选择收款方式 -->
  24. <u-picker v-model="showSettle" title="收款方式" @confirm="settleStyleChange" :range="settleTypeList" range-key="name" mode="selector"></u-picker>
  25. <!-- 客户类型 -->
  26. <u-picker v-model="showCust" title="客户类型" @confirm="custTypeChange" :range="custTypeList" range-key="name" mode="selector"></u-picker>
  27. </view>
  28. </template>
  29. <script>
  30. import {customerDetail,settleStyleQueryAll,custType} from '@/api/sales.js'
  31. import vSelect from '@/components/select/v-select.vue'
  32. export default{
  33. components: { vSelect },
  34. data(){
  35. return{
  36. customerData:null, // 客户信息
  37. priceTypeName:'', //客户类型名称
  38. customBtnStyle: { // 自定义按钮样式
  39. backgroundColor: this.$config('primaryColor'),
  40. color: '#fff'
  41. },
  42. form:{
  43. id: null,
  44. customerName: '', // 客户名称
  45. contactTel: '', // 联系电话
  46. contactMobile: '', // 联系手机
  47. contactName: '', // 联系人
  48. provinceSn: undefined, // 省
  49. provinceName: '',
  50. citySn: undefined, // 市
  51. cityName: '',
  52. countySn: undefined, // 区
  53. countyName: '',
  54. customerAddr: '', // 详细地址
  55. fax: '', // 客户传真
  56. dispatchType: undefined, // 配送方式
  57. satelliteFlag: 0, // 是否卫星仓客户
  58. customerTypeSn: undefined, // 客户类型
  59. priceType: '', // 价格类型
  60. settleStyleSn: undefined // 收款方式
  61. },
  62. rules:{
  63. customerName: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
  64. contactMobile: [{ required: false, pattern: /^\d{11}$/, message: '请输入正确的手机号', trigger: 'blur' }],
  65. provinceSn: [{ required: true, message: '请选择省', trigger: 'change' }],
  66. citySn: [{ required: true, message: '请选择市', trigger: 'change' }],
  67. countySn: [{ required: true, message: '请选择区/县', trigger: 'change' }],
  68. priceType: [{ required: true, message: '请选择价格类型', trigger: 'change' }],
  69. settleStyleSn: [{ required: true, message: '请选择收款方式', trigger: 'change' }]
  70. },
  71. showSettle:false,//结算方式初始值
  72. settleTypeList:[],//收款方式列表
  73. settleStyleName:'',//收款方式名称
  74. custTypeList:[] ,// 客户类型数据
  75. showCust:false, //客户类型下拉弹窗初始值
  76. custTypeName:'', // 客户类型名称
  77. }
  78. },
  79. onLoad(option) {
  80. this.getSettleStyle()
  81. this.getCustomerList()
  82. },
  83. methods:{
  84. // 选择配送方式
  85. chooseType(v){
  86. console.log(v,'---------')
  87. },
  88. // 下拉选择
  89. selete(val){
  90. if(val==0){
  91. this.drownType='customer'
  92. }else{
  93. this.drownType='settle'
  94. }
  95. console.log(val,this.drownType)
  96. setTimeout(()=>{
  97. this.showSettle=true
  98. },300)
  99. },
  100. brandClean(){
  101. this.settleStyleName=''
  102. this.form.settleStyleSn=undefined
  103. },
  104. // 获取客户类型列表
  105. getCustomerList(){
  106. custType({}).then(res=>{
  107. if(res.status==200){
  108. this.custTypeList=res.data
  109. }else{
  110. this.custTypeList=[]
  111. }
  112. })
  113. },
  114. // 获取结算方式列表
  115. getSettleStyle(){
  116. settleStyleQueryAll({}).then(res=>{
  117. if(res.status==200){
  118. this.settleTypeList=res.data
  119. }else{
  120. this.settleTypeList=null
  121. }
  122. })
  123. },
  124. settleStyleChange(e){
  125. console.log(e,'data')
  126. this.settleStyleName=this.settleTypeList[e].name
  127. this.form.settleStyleSn=this.settleTypeList[e].settleStyleSn
  128. },
  129. custTypeChange(e){
  130. this.priceTypeName=this.custTypeList[e].name
  131. this.form.customerTypeSn=this.custTypeList[e].customerTypeSn
  132. },
  133. // 保存
  134. handleSubmit(){
  135. console.log('保存===========')
  136. this.$refs.uForm.validate().then(res => {
  137. if(res){
  138. uni.$u.toast('校验通过')
  139. }
  140. console.log(res,'--------------校验')
  141. }).catch(errors => {
  142. uni.$u.toast('校验失败')
  143. })
  144. },
  145. // getCustomerData(){
  146. // customerDetail({id:this.itemId}).then(res=>{
  147. // if(res.status==200){
  148. // this.customerData=res.data
  149. // }else{
  150. // this.customerData=null
  151. // }
  152. // })
  153. // }
  154. }
  155. }
  156. </script>
  157. <style lang="scss">
  158. .addCustomer-content{
  159. width: 100%;
  160. height: 100vh;
  161. background-color: #fff;
  162. padding:0 40upx;
  163. display: flex;
  164. flex-direction: column;
  165. .content-form{
  166. flex: 1;
  167. }
  168. .content-form:not(:last-child){
  169. border-bottom: none;
  170. }
  171. .form-footer-btn{
  172. position: fixed;
  173. bottom: 0;
  174. left: 0;
  175. width: 100%;
  176. padding: 16upx 20upx 12upx;
  177. .handle-btn{
  178. width: 100%;
  179. }
  180. }
  181. }
  182. </style>