index.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385
  1. <template>
  2. <view class="pages">
  3. <view class="cart-body">
  4. <!-- 头部 -->
  5. <view class="cart-head">
  6. <view class="cart-head-left">共<text>{{total}}</text>款商品</view>
  7. <view class="cart-head-btton" @click="editFlag=!editFlag"><text>{{editFlag?'完成':'编辑'}}</text></view>
  8. </view>
  9. <!-- 内容 -->
  10. <scroll-view scroll-y class="cart-list" :style="{height:scrollHeight+'px'}" @scrolltolower="onreachBottom">
  11. <productItem
  12. v-for="(item, index) in list"
  13. :key="item.id"
  14. :index="index"
  15. :list="item"
  16. :edit="editFlag"
  17. @changeQty="changeQty"
  18. @check="chooseItem"
  19. @remove="removeChoose">
  20. </productItem>
  21. <view style="padding: 20upx;">
  22. <u-empty :src="`/static/nodata.png`" icon-size="180" :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'" mode="list"></u-empty>
  23. <u-loadmore v-if="(total>=list.length&&list.length)||status=='loading'" :status="status" />
  24. </view>
  25. </scroll-view>
  26. <!-- 底部 -->
  27. <view class="cart-footer">
  28. <view class="cart-footer-left">
  29. <view class="cart-footer-left-all" @click="chooseAll">
  30. <view class="cart-footer-left-all-icon">
  31. <u-icon size="45" :color="allChecked?'#ff0000':'#969799'" :name="allChecked?'roundcheckfill':'round'" custom-prefix="custom-icon"></u-icon>
  32. </view>
  33. <view class="cart-footer-left-all-text">
  34. <text>全选</text>
  35. </view>
  36. </view>
  37. </view>
  38. <view class="cart-footer-right">
  39. <view class="cart-footer-left-price" v-if="!editFlag">
  40. <view class="cart-footer-left-price-text">
  41. <text>合计:</text>
  42. </view>
  43. <view class="cart-footer-left-price-num">
  44. <text>¥{{totalAmount}}</text>
  45. </view>
  46. </view>
  47. <view class="cart-footer-right-button">
  48. <u-button v-if="!editFlag" type="error" shape="circle" @click="settlement">去结算</u-button>
  49. <u-button v-else type="error" plain shape="circle" @click="batchRemove">删除</u-button>
  50. </view>
  51. </view>
  52. </view>
  53. </view>
  54. <u-tabbar :list="vuex_tabBarList" :before-switch="beforeSwitch"></u-tabbar>
  55. </view>
  56. </template>
  57. <script>
  58. import {
  59. mapState,
  60. mapMutations,
  61. } from 'vuex'
  62. import productItem from '@/pages/cart/productitem.vue'
  63. export default {
  64. components:{
  65. productItem
  66. },
  67. onLoad() {
  68. this.cacheList = this.getCacheList()
  69. this.cacheList.forEach(key => {
  70. this.total += key.length // 总款数
  71. })
  72. this.pageInit()
  73. },
  74. data() {
  75. return {
  76. status: 'loading',
  77. noDataText: '暂无活动',
  78. // 查询条件
  79. pageNo: 1,
  80. pageSize: 3,
  81. list: [],
  82. total: 0,
  83. totalAmount: 0,
  84. totalNum: 0,
  85. editFlag: false,
  86. allChecked: false,
  87. cacheList: []
  88. }
  89. },
  90. computed: {
  91. ...mapState(['hasLogin','vuex_vinScanNums','vuex_scanMaxNums','vuex_tabBarList']),
  92. userInfo(){
  93. return this.$store.state.vuex_userInfo
  94. },
  95. scrollHeight(){
  96. return uni.getSystemInfoSync().windowHeight - 142
  97. }
  98. },
  99. methods: {
  100. // 从缓存获取数据
  101. getCacheList(){
  102. const cacheList = this.$store.state.vuex_cartList.find(k => k.sn == '693459699332595712')
  103. return cacheList ? JSON.parse(JSON.stringify(cacheList.list)) : []
  104. },
  105. pageInit(){
  106. this.pageNo = 1
  107. this.list = []
  108. this.getRow()
  109. },
  110. // 查询列表
  111. getRow (pageNo) {
  112. let _this = this
  113. if (pageNo) {
  114. this.pageNo = pageNo
  115. }
  116. let params = {
  117. pageNo: this.pageNo,
  118. pageSize: this.pageSize,
  119. queryWord: this.queryWord
  120. }
  121. const storeShelf = this.$store.state.vuex_storeShelf
  122. this.status = "loading"
  123. setTimeout(()=>{
  124. let list = this.cacheList.slice(this.list.length,this.pageNo*this.pageSize)||[]
  125. list.forEach(key => {
  126. key.forEach(s => {
  127. s.checked = this.allChecked
  128. })
  129. })
  130. this.list = this.list.concat(list)
  131. this.status = this.total>=this.list.length ? "nomore" : 'loadmore'
  132. })
  133. // promoTerminalListByPage(params).then(res => {
  134. // if (res.code == 200 || res.status == 204 || res.status == 200) {
  135. // const list = res.data.list
  136. // if(_this.pageNo>1){
  137. // _this.list = _this.list.concat(list)
  138. // }else{
  139. // _this.list = list
  140. // }
  141. // _this.total = res.data.count || 0
  142. // } else {
  143. // _this.list = []
  144. // _this.total = 0
  145. // _this.noDataText = res.message
  146. // }
  147. // _this.status = _this.total>=_this.list.length ? "nomore" : 'loadmore'
  148. // })
  149. },
  150. // scroll-view到底部加载更多
  151. onreachBottom() {
  152. if(this.list.length < this.total){
  153. this.pageNo += 1
  154. this.getRow()
  155. }else{
  156. this.status = "nomore"
  157. }
  158. },
  159. // 根据id查找
  160. getItemById(id){
  161. const a = this.list.findIndex(k => k.find(s=> s.id == id))
  162. const b = a>=0 ? this.list[a].findIndex(s=> s.id == id) : -1
  163. return {p:a,s:b}
  164. },
  165. // 已选产品变更数量
  166. changeQty(val,id){
  167. const crow = this.getItemById(id)
  168. if(crow.p>=0&&crow.s>=0){
  169. this.list[crow.p][crow.s].qty = val
  170. this.list[crow.p].splice()
  171. // 合计
  172. this.getChooseHeji()
  173. }
  174. },
  175. // 选择
  176. chooseItem(id){
  177. const crow = this.getItemById(id)
  178. if(crow.p>=0&&crow.s>=0){
  179. this.list[crow.p][crow.s].checked = !this.list[crow.p][crow.s].checked
  180. // 合计
  181. this.getChooseHeji()
  182. // 判断是否全选
  183. if(this.list.every(key => key.every(item => item.checked))){
  184. this.allChecked = true
  185. }else{
  186. this.allChecked = false
  187. }
  188. }
  189. },
  190. // 全选
  191. chooseAll(){
  192. this.allChecked = !this.allChecked
  193. this.list.forEach(key => {
  194. key.forEach(item => {
  195. item.checked = this.allChecked
  196. })
  197. })
  198. // 合计
  199. this.getChooseHeji()
  200. },
  201. //单个删除
  202. removeChoose(id){
  203. // 删除项
  204. const crow = this.getItemById(id)
  205. if(crow.p>=0&&crow.s>=0){
  206. this.list[crow.p].splice(crow.s, 1);
  207. // 合计
  208. this.getChooseHeji()
  209. }
  210. },
  211. // 批量删除
  212. batchRemove(){
  213. if(this.totalNum==0){
  214. uni.showToast({
  215. title: '请选择产品',
  216. icon: 'none'
  217. })
  218. return false
  219. }
  220. // 如果是全选
  221. if(this.allChecked){
  222. this.list = []
  223. this.allChecked = false
  224. }else{
  225. this.list.forEach(item => {
  226. item.filter(k=>k.checked).forEach(s=>{
  227. this.removeChoose(s.id)
  228. })
  229. })
  230. }
  231. // 合计
  232. this.getChooseHeji()
  233. },
  234. // 去结算
  235. settlement(){
  236. if(this.totalAmount>0){
  237. }else{
  238. uni.showToast({
  239. title: '请选择产品',
  240. icon: 'none'
  241. })
  242. }
  243. },
  244. // 计算总款数、合计、数量
  245. getChooseHeji(){
  246. this.totalAmount = 0
  247. this.totalNum = 0
  248. this.list.forEach(key => {
  249. key.filter(item=>item.checked).forEach(item => {
  250. this.totalAmount += item.cost * item.qty // 总金额
  251. this.totalNum += item.qty // 总数量
  252. })
  253. })
  254. },
  255. // 扫描vin
  256. beforeSwitch(index){
  257. const row = this.$store.state.vuex_tabBarList[index]
  258. if(row.text == '促销'){
  259. uni.$emit('refashProm')
  260. }
  261. if(row.text == '扫描VIN'){
  262. this.openCamera()
  263. }else{
  264. return true
  265. }
  266. },
  267. // 去扫描
  268. openCamera(){
  269. if(this.hasLogin){
  270. if(this.userInfo.sysUserFlag == '0'){
  271. if(this.vuex_vinScanNums < this.vuex_scanMaxNums){
  272. uni.navigateTo({
  273. url: "/pages/scan-frame/scan-frame"
  274. })
  275. }else{
  276. uni.showModal({
  277. title: '提示',
  278. content: '个人用户扫描VIN仅限10次,您的次数已用完!',
  279. confirmText: '好的',
  280. showCancel: false,
  281. success(res) {}
  282. })
  283. }
  284. }else{
  285. uni.navigateTo({
  286. url: "/pages/scan-frame/scan-frame"
  287. })
  288. }
  289. }else{
  290. uni.navigateTo({
  291. url: '/pages/login/login'
  292. })
  293. }
  294. },
  295. }
  296. }
  297. </script>
  298. <style lang="less">
  299. .pages{
  300. height: 100vh;
  301. display: flex;
  302. flex-direction: column;
  303. .cart-body{
  304. position: relative;
  305. flex-grow: 1;
  306. display: flex;
  307. flex-direction: column;
  308. .cart-head{
  309. display: flex;
  310. justify-content: space-between;
  311. align-items: center;
  312. padding: 20rpx;
  313. background-color: #FFFFFF;
  314. .cart-head-left{
  315. font-size: 28rpx;
  316. color: #333333;
  317. text{
  318. color: #FF0000;
  319. margin: 0 10rpx;
  320. }
  321. }
  322. .cart-head-btton{
  323. font-size: 28rpx;
  324. color: #333333;
  325. }
  326. }
  327. .cart-list{
  328. flex-grow: 1;
  329. background-color: #F5F5F5;
  330. width: 100%;
  331. height: calc(100% - 180rpx);
  332. overflow: auto;
  333. }
  334. .cart-footer{
  335. display: flex;
  336. justify-content: space-between;
  337. align-items: center;
  338. width: 100%;
  339. height: 100rpx;
  340. background-color: #FFFFFF;
  341. .cart-footer-left{
  342. display: flex;
  343. align-items: center;
  344. padding: 0 20rpx;
  345. .cart-footer-left-all{
  346. display: flex;
  347. align-items: center;
  348. .cart-footer-left-all-text{
  349. margin-left: 10rpx;
  350. font-size: 28rpx;
  351. color: #333333;
  352. }
  353. }
  354. }
  355. .cart-footer-right{
  356. padding: 0 20rpx;
  357. display: flex;
  358. align-items: center;
  359. justify-content: space-between;
  360. .cart-footer-left-price{
  361. display: flex;
  362. align-items: center;
  363. .cart-footer-left-price-text{
  364. font-size: 28rpx;
  365. color: #333333;
  366. }
  367. .cart-footer-left-price-num{
  368. font-size: 28rpx;
  369. color: #FF0000;
  370. }
  371. }
  372. .cart-footer-right-button{
  373. margin-left: 20rpx;
  374. width: 180rpx;
  375. text-align: right;
  376. }
  377. }
  378. }
  379. }
  380. }
  381. </style>