index.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. <template>
  2. <view class="sales-content">
  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="sales-box">
  23. <view class="sales-box-1" @click="toPage('/pages/sales/productPricing')">
  24. <view class="title">产品报价</view>
  25. </view>
  26. <view class="sales-box-1" @click="toPage('/pages/latePlay/chooseBulk')">
  27. <view class="title">新增销售单</view>
  28. </view>
  29. </view>
  30. <!-- 销售单 -->
  31. <view class="sales-list">
  32. <view class="title">
  33. <text class="title-name">销售单</text>
  34. <text class="title-all">查看全部<u-icon name="arrow-right" color="#999" size="28"></u-icon></text>
  35. </view>
  36. </view>
  37. <scroll-view class="st-detailList-con" scroll-y @scrolltolower="onreachBottom">
  38. <view class="st-detailList-main">
  39. <!-- <view class="st-detailList-main-item" v-for="(item, index) in listData" :key="item.id" @click="getDetail(item)">
  40. <view class="st-detailList-tit">
  41. <view class="u-line" :style="{backgroundColor: $config('primaryColor')}"></view>{{item.productName}}
  42. </view>
  43. <view class="st-detailList-item-con flex align_center">
  44. <view class="pimgs">
  45. <u-image :src="item.product&&item.product.productMsg?item.product.productMsg:`../../static/${theme}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
  46. </view>
  47. <view class="flex_1">
  48. <view>产品编码:{{item.productCode}}</view>
  49. <view class="padding_3">原厂编码:{{item.productOrigCode}}</view>
  50. <view class="flex align_center justify_between">
  51. <view class="font_13">
  52. 可用数量:
  53. <u-count-to :end-val="item.currentStockQty ? item.currentStockQty : 0" separator="," font-size="26"></u-count-to>个
  54. </view>
  55. <view class="font_13">
  56. 库存成本:
  57. ¥<u-count-to :end-val="item.currentStockCost ? item.currentStockCost : 0" separator="," font-size="26" :decimals="2"></u-count-to>
  58. </view>
  59. </view>
  60. </view>
  61. </view>
  62. </view>
  63. <view v-if="listData && listData.length == 0">
  64. <u-empty :text="noDataText" mode="list" :img-width="200" :margin-top="30"></u-empty>
  65. </view> -->
  66. </view>
  67. </scroll-view>
  68. </view>
  69. </template>
  70. <script>
  71. import {bizData,salesList} from '@/api/sales'
  72. export default{
  73. data(){
  74. return{
  75. timeType:'day',
  76. bizData:null, // 销售数据统计
  77. salesCount:0, // 销售总单数
  78. salesAmount:0, // 销售总金额
  79. }
  80. },
  81. onLoad() {
  82. this.getBizData()
  83. },
  84. methods:{
  85. seleteTime(val){
  86. if(val==0){
  87. this.timeType='day'
  88. // this.salesCount=this.bizData&&this.bizData.purchaseBill&&(this.bizData.purchaseBill.dayTotalQty || this.bizData.purchaseBill.dayTotalQty==0) ? this.bizData.purchaseBill.dayTotalQty : 0
  89. // this.salesAmount=this.bizData&&this.bizData.purchaseBill&&(this.bizData.purchaseBill.dayDiscountedAmount || this.bizData.purchaseBill.dayDiscountedAmount==0) ? this.bizData.purchaseBill.dayDiscountedAmount : 0
  90. }else if(val==1){
  91. this.timeType='week'
  92. // this.salesCount=this.bizData&&this.bizData.purchaseBill&&(this.bizData.purchaseBill.weekPurchaseQty || this.bizData.purchaseBill.weekPurchaseQty==0) ? this.bizData.purchaseBill.weekPurchaseQty : 0
  93. // this.salesAmount=this.bizData&&this.bizData.purchaseBill&&(this.bizData.purchaseBill.weekDiscountedAmount || this.bizData.purchaseBill.weekDiscountedAmount==0) ? this.bizData.purchaseBill.weekDiscountedAmount : 0
  94. }else{
  95. this.timeType='mounth'
  96. // this.salesCount=this.bizData&&this.bizData.purchaseBill&&(this.bizData.purchaseBill.monthPurchaseQty || this.bizData.purchaseBill.monthPurchaseQty==0) ? this.bizData.purchaseBill.monthPurchaseQty : 0
  97. // this.salesAmount=this.bizData&&this.bizData.purchaseBill&&(this.bizData.purchaseBill.monthDiscountedAmount || this.bizData.purchaseBill.monthDiscountedAmount==0) ? this.bizData.purchaseBill.monthDiscountedAmount : 0
  98. }
  99. this.getBizData()
  100. console.log(val,this.salesCount,this.salesAmount,'this.salesAmount')
  101. },
  102. toPage(url){
  103. uni.navigateTo({
  104. url:url
  105. })
  106. },
  107. getBizData () {
  108. bizData({}).then(res => {
  109. if (res.status == 200) {
  110. this.bizData = res.data
  111. if(this.timeType=='day'){
  112. this.salesCount=this.bizData&&this.bizData.purchaseBill&&(this.bizData.purchaseBill.dayTotalQty || this.bizData.purchaseBill.dayTotalQty==0) ? this.bizData.purchaseBill.dayTotalQty : 0
  113. this.salesAmount=this.bizData&&this.bizData.purchaseBill&&(this.bizData.purchaseBill.dayDiscountedAmount || this.bizData.purchaseBill.dayDiscountedAmount==0) ? this.bizData.purchaseBill.dayDiscountedAmount : 0
  114. }else if(this.timeType=='week'){
  115. this.salesCount=this.bizData&&this.bizData.purchaseBill&&(this.bizData.purchaseBill.weekPurchaseQty || this.bizData.purchaseBill.weekPurchaseQty==0) ? this.bizData.purchaseBill.weekPurchaseQty : 0
  116. this.salesAmount=this.bizData&&this.bizData.purchaseBill&&(this.bizData.purchaseBill.weekDiscountedAmount || this.bizData.purchaseBill.weekDiscountedAmount==0) ? this.bizData.purchaseBill.weekDiscountedAmount : 0
  117. }else{
  118. this.salesCount=this.bizData&&this.bizData.purchaseBill&&(this.bizData.purchaseBill.monthPurchaseQty || this.bizData.purchaseBill.monthPurchaseQty==0) ? this.bizData.purchaseBill.monthPurchaseQty : 0
  119. this.salesAmount=this.bizData&&this.bizData.purchaseBill&&(this.bizData.purchaseBill.monthDiscountedAmount || this.bizData.purchaseBill.monthDiscountedAmount==0) ? this.bizData.purchaseBill.monthDiscountedAmount : 0
  120. }
  121. } else {
  122. this.bizData = null
  123. }
  124. })
  125. },
  126. }
  127. }
  128. </script>
  129. <style lang="scss">
  130. .sales-content{
  131. width: 100%;
  132. padding: 30rpx;
  133. .content-data{
  134. background-color: #fff;
  135. padding: 20upx 20upx;
  136. border-radius: 20upx;
  137. box-shadow: 3upx 2upx 6upx #eee;
  138. margin-bottom: 30upx;
  139. .date-type{
  140. margin: 0 120upx 30upx 120upx;
  141. border-radius: 50upx;
  142. border: 1upx solid #eee;
  143. .type{
  144. display: inline-block;
  145. padding: 10upx 0;
  146. width: 33%;
  147. text-align: center;
  148. }
  149. .type:first-child{
  150. border-top-left-radius: 50upx;
  151. border-bottom-left-radius: 50upx;
  152. }
  153. .type:last-child{
  154. border-top-right-radius: 50upx;
  155. border-bottom-right-radius: 50upx;
  156. }
  157. .type:not(:last-child){
  158. border-right: 1upx solid #eee;
  159. }
  160. .active_day {
  161. background: rgb(0, 122, 255);
  162. color: #fff;
  163. }
  164. }
  165. .total{
  166. display: flex;
  167. .item-box{
  168. text-align: center;
  169. width: 50%;
  170. color:#999;
  171. }
  172. .item-box:first-child{
  173. border-right: 1px solid #e4e7ed;
  174. }
  175. }
  176. }
  177. .sales-box{
  178. display: flex;
  179. align-items: center;
  180. margin-bottom: 30upx;
  181. .sales-box-1{
  182. background-color: #ffffff;
  183. border-radius: 20upx;
  184. box-shadow: 3upx 2upx 6upx #eee;
  185. padding: 30rpx;
  186. width: 50%;
  187. color: #424D5E;
  188. text-align: center;
  189. .title{
  190. font-size: 32rpx;
  191. color: rgb(0, 122, 255);
  192. font-weight: bold;
  193. }
  194. }
  195. > view{
  196. &:first-child{
  197. margin-right: 15rpx;
  198. }
  199. &:last-child{
  200. margin-left: 15rpx;
  201. }
  202. }
  203. }
  204. .sales-list{
  205. .title{
  206. display: flex;
  207. align-items: center;
  208. justify-content: space-between;
  209. .title-name{
  210. font-size: 32upx;
  211. color:#000 ;
  212. font-weight: 1000;
  213. }
  214. .title-all{
  215. color:#999;
  216. }
  217. }
  218. }
  219. }
  220. </style>