index.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  1. <template>
  2. <view class="sales-warp">
  3. <!--销售数据统计 -->
  4. <view class="content-data">
  5. <view class="date-type">
  6. <text :class="['type',timeType=='day' ? 'active_day' : '']" @click="seleteTime(0)">今日</text>
  7. <text :class="['type',timeType=='week' ? 'active_day' : '']" @click="seleteTime(1)">本周</text>
  8. <text :class="['type',timeType=='mounth' ? 'active_day' : '']" @click="seleteTime(2)">本月</text>
  9. </view>
  10. <view class="total">
  11. <view class="item-box">
  12. <u-count-to :end-val="salesCount" separator=","></u-count-to>
  13. <view>销售总单量(个)</view>
  14. </view>
  15. <view class="item-box">
  16. <u-count-to :end-val="salesAmount" separator="," :decimals="2"></u-count-to>
  17. <view>销售总金额(¥)</view>
  18. </view>
  19. </view>
  20. </view>
  21. <!-- 产品报价及新增销售单 -->
  22. <view class="nav-cont flex align_center justify_between">
  23. <view class="nav-item">
  24. <u-image class="nav-pic" style="margin-top: 5upx;" :src="`../../static/${theme}/navIcon/price_icon.png`" width="60" height="60"></u-image>
  25. <text class="nav-txt" style="margin-top: 5upx;">产品报价</text>
  26. </view>
  27. <view class="nav-item">
  28. <u-image class="nav-pic" :src="`../../static/${theme}/navIcon/sale_icon.png`" width="70" height="70"></u-image>
  29. <text class="nav-txt">新增销售单</text>
  30. </view>
  31. </view>
  32. <!-- 销售单 -->
  33. <view class="sales-list">
  34. <view class="title">
  35. <text class="title-name">销售单</text>
  36. <view class="title-all">查看全部<u-icon name="arrow-right" color="#666" size="28"></u-icon></view>
  37. </view>
  38. <scroll-view class="sales-list-con" scroll-y @scrolltolower="onreachBottom">
  39. <view class="sales-list-main">
  40. <view class="sales-list-item" v-for="(item, index) in listData" :key="item.id" @click="getDetail(item)">
  41. <view class="list-item-tit">
  42. <view class="u-line" :style="{backgroundColor: $config('primaryColor')}"></view>{{item.buyerName}}
  43. </view>
  44. <view class="list-item-con">
  45. <view class="list-item-line flex align_center justify_between">
  46. <view class="">
  47. <view style="display: inline-block;margin-right: 6upx;">{{item.salesBillNo}}</view>
  48. <u-tag v-if="item.oosFlag==1" text="急件" :bg-color="$config('errorColor')" mode="dark" shape="circle" size="mini" style="margin-right: 6upx;" />
  49. <u-tag v-if="item.salesBillSourceDictValue" :text="item.salesBillSourceDictValue" :bg-color="$config('primaryColor')" mode="dark" shape="circle" size="mini" />
  50. </view>
  51. <view class="color_6">{{item.createDate || '--'}}</view>
  52. </view>
  53. <view class="list-item-line flex align_center justify_between">
  54. <view>总款数:<text>{{toThousands(item.totalCategory||0)}}</text></view>
  55. <view>总数量:<text>{{toThousands(item.totalQty||0)}}</text></view>
  56. <view>总售价:<text>{{toThousands(item.totalAmount||0, 2)}}</text></view>
  57. </view>
  58. <view class="list-item-line flex align_center justify_between">
  59. <view class="flex_1">财务状态:<text>{{item.financialStatusDictValue||'--'}}</text></view>
  60. <view class="flex_1">收款方式:<text>{{item.settleStyleEntity&&item.settleStyleEntity.name||'--'}}</text></view>
  61. </view>
  62. </view>
  63. <view class="">
  64. <!-- <u-button @click="handleOutGoods" type="success" :custom-style="customStyle" hover-class="none" shape="circle">立即出库</u-button> -->
  65. </view>
  66. </view>
  67. <view v-if="listData && listData.length == 0">
  68. <u-empty :text="noDataText" mode="list" :img-width="200" :margin-top="30"></u-empty>
  69. </view>
  70. </view>
  71. </scroll-view>
  72. </view>
  73. </view>
  74. </template>
  75. <script>
  76. import { toThousands } from '@/libs/tools'
  77. import { bizData, salesList } from '@/api/sales'
  78. export default{
  79. data(){
  80. return{
  81. timeType:'day',
  82. bizData:null, // 销售数据统计
  83. salesCount:0, // 销售总单数
  84. salesAmount:0, // 销售总金额
  85. theme: '',
  86. listData: [],
  87. pageNo: 1,
  88. pageSize: 6,
  89. totalNum: 0,
  90. noDataText: '暂无数据',
  91. toThousands
  92. }
  93. },
  94. onLoad() {
  95. this.theme = getApp().globalData.theme
  96. this.getBizData()
  97. this.getList()
  98. },
  99. methods:{
  100. // 列表
  101. getList(pageNo){
  102. const _this = this
  103. if (pageNo) {
  104. this.pageNo = pageNo
  105. }
  106. salesList({ pageNo: this.pageNo, pageSize: this.pageSize }).then(res => {
  107. if (res.status == 200) {
  108. if(this.pageNo>1){
  109. this.listData = this.listData.concat(res.data.list || [])
  110. }else{
  111. this.listData = res.data.list || []
  112. }
  113. this.totalNum = res.data.count || 0
  114. } else {
  115. this.listData = []
  116. this.totalNum = 0
  117. this.noDataText = res.message
  118. }
  119. })
  120. },
  121. // scroll-view到底部加载更多
  122. onreachBottom() {
  123. if(this.listData.length < this.totalNum){
  124. this.pageNo += 1
  125. this.getList()
  126. }
  127. },
  128. seleteTime(val){
  129. if(val==0){
  130. this.timeType='day'
  131. }else if(val==1){
  132. this.timeType='week'
  133. }else{
  134. this.timeType='mounth'
  135. }
  136. this.getBizData()
  137. },
  138. toPage(url){
  139. uni.navigateTo({ url: url })
  140. },
  141. getBizData () {
  142. bizData({}).then(res => {
  143. if (res.status == 200) {
  144. this.bizData = res.data
  145. if(this.timeType=='day'){
  146. this.salesCount=this.bizData&&this.bizData.purchaseBill&&(this.bizData.purchaseBill.dayTotalQty || this.bizData.purchaseBill.dayTotalQty==0) ? this.bizData.purchaseBill.dayTotalQty : 0
  147. this.salesAmount=this.bizData&&this.bizData.purchaseBill&&(this.bizData.purchaseBill.dayDiscountedAmount || this.bizData.purchaseBill.dayDiscountedAmount==0) ? this.bizData.purchaseBill.dayDiscountedAmount : 0
  148. }else if(this.timeType=='week'){
  149. this.salesCount=this.bizData&&this.bizData.purchaseBill&&(this.bizData.purchaseBill.weekPurchaseQty || this.bizData.purchaseBill.weekPurchaseQty==0) ? this.bizData.purchaseBill.weekPurchaseQty : 0
  150. this.salesAmount=this.bizData&&this.bizData.purchaseBill&&(this.bizData.purchaseBill.weekDiscountedAmount || this.bizData.purchaseBill.weekDiscountedAmount==0) ? this.bizData.purchaseBill.weekDiscountedAmount : 0
  151. }else{
  152. this.salesCount=this.bizData&&this.bizData.purchaseBill&&(this.bizData.purchaseBill.monthPurchaseQty || this.bizData.purchaseBill.monthPurchaseQty==0) ? this.bizData.purchaseBill.monthPurchaseQty : 0
  153. this.salesAmount=this.bizData&&this.bizData.purchaseBill&&(this.bizData.purchaseBill.monthDiscountedAmount || this.bizData.purchaseBill.monthDiscountedAmount==0) ? this.bizData.purchaseBill.monthDiscountedAmount : 0
  154. }
  155. } else {
  156. this.bizData = null
  157. }
  158. })
  159. },
  160. // 查看详情
  161. getDetail(data){}
  162. }
  163. }
  164. </script>
  165. <style lang="scss">
  166. .sales-warp{
  167. width: 100%;
  168. padding: 20rpx 30upx;
  169. .color_6{
  170. color: #666;
  171. }
  172. .content-data{
  173. background-color: #fff;
  174. padding: 20upx 20upx;
  175. border-radius: 20upx;
  176. box-shadow: 3upx 2upx 6upx #eee;
  177. margin-bottom: 20upx;
  178. .date-type{
  179. margin: 0 120upx 30upx 120upx;
  180. border-radius: 50upx;
  181. border: 1upx solid #eee;
  182. .type{
  183. display: inline-block;
  184. padding: 10upx 0;
  185. width: 33%;
  186. text-align: center;
  187. }
  188. .type:first-child{
  189. border-top-left-radius: 50upx;
  190. border-bottom-left-radius: 50upx;
  191. }
  192. .type:last-child{
  193. border-top-right-radius: 50upx;
  194. border-bottom-right-radius: 50upx;
  195. }
  196. .type:not(:last-child){
  197. border-right: 1upx solid #eee;
  198. }
  199. .active_day {
  200. background: rgb(0, 122, 255);
  201. color: #fff;
  202. }
  203. }
  204. .total{
  205. display: flex;
  206. .item-box{
  207. text-align: center;
  208. width: 50%;
  209. color:#999;
  210. }
  211. .item-box:first-child{
  212. border-right: 1px solid #e4e7ed;
  213. }
  214. }
  215. }
  216. .nav-cont{
  217. .nav-item{
  218. width: 49%;
  219. border-radius: 25upx;
  220. background-color: #ffffff;
  221. padding: 14upx 0;
  222. box-shadow: 3upx 2upx 6upx #eee;
  223. margin-bottom: 20upx;
  224. text-align: center;
  225. .nav-pic{
  226. margin: 0 auto;
  227. }
  228. .nav-txt{
  229. font-size: 28upx;
  230. color: #666666;
  231. }
  232. }
  233. }
  234. .sales-list{
  235. .title{
  236. display: flex;
  237. align-items: center;
  238. justify-content: space-between;
  239. .title-name{
  240. font-size: 32upx;
  241. color: #333;
  242. font-weight: 1000;
  243. }
  244. .title-all{
  245. color: #666;
  246. }
  247. }
  248. .sales-list-con{
  249. .sales-list-main{
  250. padding-top: 14upx;
  251. .sales-list-item{
  252. background: #ffffff;
  253. padding: 20upx;
  254. margin-bottom: 25upx;
  255. border-radius: 25upx;
  256. box-shadow: 1px 1px 3px #EEEEEE;
  257. .list-item-tit{
  258. padding-bottom: 12upx;
  259. border-bottom: 1px dashed #e4e7ed;
  260. white-space: nowrap;
  261. overflow: hidden;
  262. text-overflow: ellipsis;
  263. .u-line{
  264. display: inline-block;
  265. width: 6upx;
  266. height: 40upx;
  267. background-color: red;
  268. vertical-align: bottom;
  269. margin: 0 20upx 0 10upx;
  270. }
  271. }
  272. .list-item-con{
  273. padding: 10upx 0;
  274. border-bottom: 1px solid #e4e7ed;
  275. .list-item-line{
  276. padding: 8upx 0;
  277. }
  278. text{
  279. color: #666;
  280. }
  281. }
  282. }
  283. }
  284. }
  285. }
  286. }
  287. </style>