index.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330
  1. <template>
  2. <!-- 结算中心页面 -->
  3. <view>
  4. <view class="top">
  5. <view class="content" v-for="(item,index) in datalist" :key="index">
  6. <view class="content-one">
  7. </view>
  8. <text class="content-two">{{item.agentName}}</text>
  9. <text class="content-three" @click="button(index)" :key='index'>核销返利</text>
  10. <view class="content-four">
  11. <text>品牌</text>
  12. <text>奖励</text>
  13. <text @click="checkedAll(index,item)" :key='index'>全选</text>
  14. </view>
  15. <checkbox-group @change="checkboxChange($event,index)">
  16. <view class="content-five" v-for="(item,brandIndex) in item.storegentBrandList" :key="brandIndex">
  17. <view class="content-five-img">
  18. <u-image width="100%" height="65%" scaleType="matrix" :src="item.logoUrl"></u-image>
  19. <!-- {{ item.brandCode }} -->
  20. </view>
  21. <view class="content-five-view">
  22. {{item.usableMoney}}元
  23. </view>
  24. <view>
  25. <!-- <u-checkbox-group @change="checkboxGroupChange" :disabled="item.usableMoney==0?true:false">
  26. <u-checkbox @change="checkboxChange(storegentBrandList[index],checkboxList[index],index)" v-model="checkboxList[index]" :key="index"></u-checkbox>
  27. </u-checkbox-group> -->
  28. <view class="" v-show="false">
  29. {{index}}
  30. {{ '^^^^' + checkboxList[index] }}
  31. {{ '&&&' + isCheckedAll }}
  32. </view>
  33. <label>
  34. <checkbox :value="JSON.stringify(item)" :checked="checkboxList[index]" :disabled="item.usableMoney==0" color="#FFCC33" style="transform:scale(0.7)"/>
  35. </label>
  36. <!-- <label>
  37. <checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" />未选中
  38. </label> -->
  39. </view>
  40. </view>
  41. </checkbox-group>
  42. </view>
  43. </view>
  44. </view>
  45. </template>
  46. <script>
  47. import {
  48. request
  49. } from '../../../common/request/request'
  50. require("promise.prototype.finally").shim()
  51. export default {
  52. data() {
  53. return {
  54. datalist: [],
  55. agentId: '',
  56. Arry: [],
  57. brandCodeCheckList:[],
  58. amount: '',
  59. choice: 0,
  60. kunnr: '',
  61. brandCode: '',
  62. agentOpDate: '',
  63. src: 'https://b2bcnfile.sailuntire.com/upload//sailun-allsteel-admin/2020110616154607343814..jpg',
  64. storegentBrandList: [],
  65. checked: true,
  66. list: [{}],
  67. checkboxList: [],
  68. idList:[],
  69. isCheckedAll:false
  70. };
  71. },
  72. created() {
  73. this.getData()
  74. },
  75. methods: {
  76. // 获取结算中心数据
  77. getData() {
  78. request({
  79. url: '/myapp/storeSettlementCenter',
  80. method: 'post',
  81. data: {
  82. 'storeId':this.$store.state.storeInfo.storeId,
  83. 'userId':this.$store.state.storeInfo.userId
  84. }
  85. }).then(res => {
  86. console.log(res)
  87. console.log(res.data)
  88. this.datalist = res.data.data
  89. this.Arry.length = this.datalist.length
  90. // this.checkboxList.length = this.datalist.length
  91. for(var i=0;i<this.datalist.length;i++){
  92. this.Arry[i] = []
  93. this.checkboxList.push(false)
  94. }
  95. console.log(this.checkboxList)
  96. console.log(res.data.data[0].storegentBrandList)
  97. // 遍历
  98. if (this.choice == 0) {
  99. for (var l = 0; l < res.data.data.length; l++) {
  100. this.storegentBrandList = res.data.data[l].storegentBrandList
  101. for (var i = 0; i < res.data.data[l].storegentBrandList.length; i++) {
  102. // this.checkboxList[i] = false
  103. }
  104. }
  105. } else {
  106. for (var l = 0; l < res.data.data.length; l++) {
  107. this.storegentBrandList = res.data.data[l].storegentBrandList
  108. for (var i = 0; i < res.data.data[l].storegentBrandList.length; i++) {
  109. // this.checkboxList[i] = true
  110. }
  111. }
  112. }
  113. }).catch(err => {
  114. console.log(err + "")
  115. })
  116. .finally(() => {
  117. setTimeout(() => {
  118. uni.hideLoading();
  119. this.loading = false;
  120. }, 1000)
  121. })
  122. },
  123. checkboxChange1() {
  124. console.log("###")
  125. },
  126. // 选中某个复选框时,由checkbox时触发
  127. // ,bollean,index
  128. checkboxChange(e,index){
  129. console.log(e)
  130. let newArr = []
  131. // this.Arry.length = this.datalist.length
  132. // this.Arry[index] = []
  133. console.log(this.Arry)
  134. // 调用数组的每个元素并将元素传递给回调函数
  135. // item回调函数
  136. // JSON.parse()将回调函数字符串转为对象取出
  137. e.detail.value.forEach((item) =>{
  138. var obj = {
  139. "storeId":this.$store.state.storeInfo.storeId,
  140. "amount": JSON.parse(item).usableMoney,
  141. "brandCode": JSON.parse(item).brandCode,
  142. "kunnr": JSON.parse(item).kunnr,
  143. 'userId':this.$store.state.storeInfo.userId
  144. }
  145. // let obj = JSON.parse(item)
  146. console.log(obj)
  147. newArr.push(obj)
  148. })
  149. this.Arry[index] = newArr
  150. console.log(this.Arry[index])
  151. console.log('%%%%%%',this.Arry)
  152. },
  153. // 核销返利
  154. button(index) {
  155. console.log(index)
  156. console.log(this.Arry[index])
  157. request({
  158. url: '/myapp/storeCancel',
  159. method: 'post',
  160. data: this.Arry[index]
  161. }).then(res => {
  162. console.log(res)
  163. if(res.data.msg=="success") {
  164. uni.showToast({
  165. title: '核销返利成功',
  166. duration: 2000
  167. });
  168. }else {
  169. uni.showToast({
  170. title: '核销返利失败',
  171. icon: false,
  172. duration: 2000
  173. });
  174. }
  175. }).catch(err => {
  176. console.log(err)
  177. })
  178. .finally(() => {
  179. setTimeout(() => {
  180. uni.hideLoading();
  181. this.loading = false;
  182. }, 1000)
  183. })
  184. },
  185. // 选中任一checkbox时,由checkbox-group触发
  186. checkboxGroupChange(e) {
  187. // console.log(e);
  188. },
  189. // 全选
  190. checkedAll(index,e) {
  191. console.log(e)
  192. this.isCheckedAll = !this.isCheckedAll
  193. console.log(index,e)
  194. let newArr=[]
  195. console.log(this.checkboxList)
  196. if(this.Arry[index].length == e.storegentBrandList.filter((item)=>{
  197. return item.usableMoney !=0
  198. }).length ){
  199. this.checkboxList[index] = false
  200. this.Arry[index] = []
  201. }else{
  202. this.checkboxList[index] = true
  203. for(var i=0;i<e.storegentBrandList.length;i++){
  204. if( e.storegentBrandList[i].usableMoney !=0){
  205. var obj = {
  206. "storeId":this.$store.state.storeInfo.storeId,
  207. "amount": e.storegentBrandList[i].usableMoney,
  208. "brandCode": e.storegentBrandList[i].brandCode,
  209. "kunnr": e.storegentBrandList[i].agentId
  210. }
  211. newArr.push(obj)
  212. }
  213. }
  214. this.Arry[index] = newArr
  215. }
  216. console.log(this.Arry,this.checkboxList)
  217. }
  218. },
  219. }
  220. </script>
  221. <style>
  222. .top {
  223. width: 750rpx;
  224. height: 331rpx;
  225. background: url(../../../static/sailun/background.png) no-repeat;
  226. background-size: 750rpx 331rpx;
  227. }
  228. .content {
  229. width: 712rpx;
  230. /* height: 445rpx; */
  231. margin: 0 auto;
  232. margin-bottom: 30rpx;
  233. background: #FFFFFF;
  234. box-shadow: 0px 0px 24px 0px rgba(101, 176, 249, 0.41);
  235. border-radius: 18px;
  236. position: relative;
  237. top: 30rpx;
  238. margin-bottom: 50rpx;
  239. }
  240. .content2 {
  241. width: 712rpx;
  242. height: 351rpx;
  243. margin: 0 auto;
  244. background: #FFFFFF;
  245. box-shadow: 0px 0px 24px 0px rgba(101, 176, 249, 0.41);
  246. border-radius: 18px;
  247. position: relative;
  248. top: 170rpx;
  249. }
  250. .content-one {
  251. width: 6rpx;
  252. height: 30rpx;
  253. background-color: #0589F8;
  254. position: relative;
  255. top: 20rpx;
  256. left: 30rpx;
  257. }
  258. .content-two {
  259. font: 26rpx;
  260. font-weight: bolder;
  261. position: relative;
  262. top: -14rpx;
  263. left: 60rpx;
  264. }
  265. .content-three {
  266. width: 114rpx;
  267. height: 40rpx;
  268. display: inline-block;
  269. background-color: #3A9FF2;
  270. position: relative;
  271. top: -14rpx;
  272. left: 430rpx;
  273. border-radius: 10rpx;
  274. font-size: 24rpx;
  275. color: #fff;
  276. text-align: center;
  277. line-height: 40rpx;
  278. }
  279. .content-four {
  280. display: flex;
  281. justify-content: space-between;
  282. font-weight: bolder;
  283. font-size: 26rpx;
  284. margin-top: 40rpx;
  285. margin-left: 80rpx;
  286. margin-right: 50rpx;
  287. }
  288. .content-five {
  289. display: flex;
  290. justify-content: space-between;
  291. font-size: 24rpx;
  292. margin-top: 40rpx;
  293. margin-left: 100rpx;
  294. font-weight: bolder;
  295. margin-right: 30rpx;
  296. padding-bottom: 40rpx;
  297. }
  298. .content-five-img {
  299. width: 164rpx;
  300. height: 50rpx;
  301. margin-left: -50rpx;
  302. }
  303. .content-five-view {
  304. margin-left: -100rpx;
  305. }
  306. </style>