addCustomer.vue 7.1 KB

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