promoDetail.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475
  1. <template>
  2. <view class="video-pagesCons">
  3. <view class="tab-search">
  4. <u-search placeholder="请输入产品名称/轮胎规格" shape="round" :clearabled="true" show-action v-model="queryWord" @clear="getRow" @search="getRow" @custom="getRow"></u-search>
  5. </view>
  6. <view class="tab-body">
  7. <scroll-view scroll-y style="height: 100%;width: 100%;overflow: auto;" @scrolltolower="onreachBottom">
  8. <view class="product-list">
  9. <view
  10. class="check-order-list"
  11. v-for="(item,index) in 20"
  12. :key="item.id"
  13. >
  14. <view class="video-item">
  15. <view>
  16. <u-image :src="item.imageSet[0]" height="140px" width="100%"></u-image>
  17. <view class="back-price">返<text>¥15</text></view>
  18. </view>
  19. <view>
  20. <view class="product-name">箭冠轮胎285/70R17LT RT-5900 坦克300、长城炮、牧马人 D</view>
  21. <view class="product-guige">285/70R17LT RT-5900</view>
  22. <view class="product-button">
  23. <view class="price-txt">¥<text>325.63</text></view>
  24. <view>
  25. <u-button v-if="index!=2" :throttle-time="50" @click="chooseProduct(item)" :custom-style="{width:'50rpx'}" size="mini" type="primary" shape="circle"><u-icon name="plus"></u-icon></u-button>
  26. <u-button v-if="index==2" :throttle-time="50" @click="chooseProduct(item)" :custom-style="{width:'50rpx'}" size="mini" type="success" shape="circle"><u-icon name="checkmark"></u-icon></u-button>
  27. </view>
  28. </view>
  29. </view>
  30. </view>
  31. </view>
  32. </view>
  33. <view style="padding: 20upx;">
  34. <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>
  35. <u-loadmore v-if="(total>=list.length&&list.length)||status=='loading'" :status="status" />
  36. </view>
  37. </scroll-view>
  38. <!-- 底部栏 -->
  39. <view class="bottom-bar" @click="clearAction">
  40. <view class="bottom-bar-left">
  41. <view class="bottom-bar-left-item">
  42. <view class="bottom-bar-left-item-icon" @click="openChoose">
  43. <u-icon name="shopping-cart" size="40"></u-icon>
  44. <u-badge type="error" :count="chooseLength" :offset="[-7,-8]"></u-badge>
  45. </view>
  46. </view>
  47. <view class="bottom-bar-left-item">
  48. 合计:<view class="price-txt">¥<text>325.63</text></view>
  49. </view>
  50. </view>
  51. <view :class="'bottom-bar-right bg-'+(showChoosePopu?'1':'0')" @click="submitOrder">
  52. <view class="bottom-bar-right-item">{{showChoosePopu?'确认采购':'去结算'}}</view>
  53. </view>
  54. </view>
  55. <!-- 已选列表 -->
  56. <u-popup
  57. v-model="showChoosePopu"
  58. closeable
  59. :zIndex="100"
  60. mode="bottom"
  61. border-radius="14"
  62. height="100%"
  63. @open="openRender"
  64. @close="closePopu">
  65. <view :style="{width:screenWidth + 'px'}" @click="clearAction">
  66. <view class="choose-title">
  67. <view>已选<text class="p-nums">{{chooseLength}}</text>款产品 </view>
  68. <u-button @click="claerChoose" size="mini" type="error" plain style="margin: 0 20upx;">清空列表</u-button>
  69. </view>
  70. <view class="choose-product-list" v-if="showSwipeAction">
  71. <u-swipe-action
  72. :show="item.show"
  73. :index="index"
  74. v-for="(item, index) in chooseProductList"
  75. :key="item.id"
  76. @click="chooseClick"
  77. @open="chooseOpen"
  78. :options="chooseOptions"
  79. >
  80. <view class="choose-product-item">
  81. <view>
  82. <view class="choose-product-item-img">
  83. <u-image :src="item.images" height="200rpx" width="100%"></u-image>
  84. <view class="back-price">返<text>¥15</text></view>
  85. </view>
  86. <view class="choose-product-item-info">
  87. <view class="choose-product-item-left-info-name">箭冠轮胎285/70R17LT RT-5900 坦克300、长城炮、牧马人 D</view>
  88. <view class="choose-product-item-left-info-guige">285/70R17LT RT-5900</view>
  89. <view class="choose-product-item-left-info-price">
  90. <view class="price-txt">¥<text>325.63</text></view>
  91. <view>
  92. <u-number-box :input-width="60" :input-height="60" size="mini"></u-number-box>
  93. </view>
  94. </view>
  95. </view>
  96. </view>
  97. </view>
  98. </u-swipe-action>
  99. </view>
  100. </view>
  101. </u-popup>
  102. </view>
  103. </view>
  104. </view>
  105. </template>
  106. <script>
  107. import {
  108. mapState,
  109. mapMutations,
  110. } from 'vuex'
  111. import { promoTerminalList } from '@/api/video.js'
  112. export default {
  113. data() {
  114. return {
  115. status: 'loading',
  116. noDataText: '暂无数据',
  117. queryWord: '',
  118. // 查询条件
  119. pageNo: 1,
  120. pageSize: 10,
  121. list: [],
  122. total: 0,
  123. showChoosePopu: false,
  124. chooseList:[],
  125. chooseProductList:[],
  126. chooseOptions:
  127. [
  128. {
  129. text: '删除',
  130. style: {
  131. backgroundColor: '#dd524d'
  132. }
  133. }
  134. ],
  135. screenWidth: 750,
  136. showSwipeAction: false
  137. }
  138. },
  139. computed: {
  140. ...mapState(['hasLogin']),
  141. userInfo(){
  142. return this.$store.state.vuex_userInfo
  143. },
  144. chooseLength(){
  145. return this.chooseList.length
  146. }
  147. },
  148. onLoad(opts) {
  149. uni.setNavigationBarTitle({
  150. title: opts.title||'促销活动产品'
  151. })
  152. this.pageInit()
  153. },
  154. methods: {
  155. pageInit(){
  156. this.screenWidth = uni.getSystemInfoSync().windowWidth
  157. this.total = 0
  158. this.pageNo = 1
  159. this.getRow()
  160. },
  161. // 添加已选产品
  162. chooseProduct(item){
  163. this.chooseList.push({
  164. id: new Date().getTime(),
  165. title: '长安回望绣成堆,山顶千门次第开,一骑红尘妃子笑,无人知是荔枝来',
  166. images: 'https://cdn.uviewui.com/uview/common/logo.png',
  167. show: false
  168. })
  169. this.showChoosePopu = false
  170. },
  171. openRender(){
  172. this.chooseProductList = JSON.parse(JSON.stringify(this.chooseList))
  173. setTimeout(()=>{
  174. this.showSwipeAction = true
  175. },100)
  176. },
  177. closePopu(){
  178. this.chooseProductList = []
  179. this.showChoosePopu=false
  180. },
  181. // 打开已选产品列表
  182. openChoose(){
  183. if(this.chooseLength){
  184. this.showChoosePopu = !this.showChoosePopu
  185. }else{
  186. this.$u.toast(`请选择产品`);
  187. }
  188. },
  189. //已选产品删除
  190. chooseClick(index, btns){
  191. if(btns == 0) {
  192. this.chooseList.splice(index, 1);
  193. this.chooseProductList.splice(index, 1);
  194. this.$u.toast(`删除了第${index}个cell`);
  195. }
  196. },
  197. // 同时打开一个
  198. chooseOpen(index){
  199. // 先将正在被操作的swipeAction标记为打开状态,否则由于props的特性限制,
  200. // 原本为'false',再次设置为'false'会无效
  201. this.chooseProductList[index].show = true;
  202. this.chooseProductList.map((val, idx) => {
  203. if(index != idx) this.chooseProductList[idx].show = false;
  204. })
  205. },
  206. // 清除滑动按钮
  207. clearAction(){
  208. this.chooseProductList.map(item => {
  209. item.show = false
  210. })
  211. this.chooseProductList.splice()
  212. },
  213. // 清空已选列表
  214. claerChoose(){
  215. const _this = this
  216. uni.showModal({
  217. title: '提示',
  218. content: '确定清空已选列表?',
  219. confirmText: '确定',
  220. success(res) {
  221. if(res.confirm){
  222. _this.chooseList = []
  223. _this.chooseProductList = []
  224. _this.showChoosePopu = false
  225. }
  226. }
  227. })
  228. },
  229. // scroll-view到底部加载更多
  230. onreachBottom() {
  231. if(this.list.length < this.total){
  232. this.pageNo += 1
  233. this.getRow()
  234. }else{
  235. this.status = "nomore"
  236. }
  237. },
  238. // 查询列表
  239. getRow (pageNo) {
  240. let _this = this
  241. if (pageNo) {
  242. this.pageNo = pageNo
  243. }
  244. let params = {
  245. pageNo: this.pageNo,
  246. pageSize: this.pageSize,
  247. queryWord: this.queryWord
  248. }
  249. const storeShelf = this.$store.state.vuex_storeShelf
  250. this.status = "loading"
  251. promoTerminalList({sn:storeShelf.dealerSn,contentType:'LINK'}).then(res => {
  252. if (res.code == 200 || res.status == 204 || res.status == 200) {
  253. // const list = res.data.list || []
  254. // if(_this.pageNo>1){
  255. // _this.list = _this.list.concat(list)
  256. // }else{
  257. // _this.list = list
  258. // }
  259. // _this.total = res.data.count || 0
  260. _this.list = res.data.filter(item => item.content.indexOf("pages/promo/index") >= 0)
  261. _this.total = _this.list.length
  262. } else {
  263. _this.list = []
  264. _this.total = 0
  265. _this.noDataText = res.message
  266. }
  267. _this.status = _this.total>=_this.list.length ? "nomore" : 'loadmore'
  268. })
  269. },
  270. // 提交订单
  271. submitOrder(){
  272. if(this.showChoosePopu){
  273. uni.navigateTo({
  274. url: '/pagesB/procureOrder?id='
  275. })
  276. }else{
  277. this.openChoose()
  278. }
  279. },
  280. }
  281. }
  282. </script>
  283. <style lang="less">
  284. page{
  285. height: 100vh;
  286. }
  287. .video-pagesCons{
  288. height: 100vh;
  289. display: flex;
  290. flex-direction: column;
  291. .tab-search{
  292. padding: 15rpx 20rpx;
  293. background: #fff;
  294. }
  295. .tab-body{
  296. display: flex;
  297. flex-direction: column;
  298. flex-grow: 1;
  299. overflow: auto;
  300. .bottom-bar{
  301. height: 130upx;
  302. z-index: 500;
  303. background-color: #fff;
  304. display: flex;
  305. align-items: center;
  306. justify-content: space-between;
  307. font-size: 32upx;
  308. .bottom-bar-left{
  309. padding: 0 30upx;
  310. flex-grow: 1;
  311. display: flex;
  312. align-items: center;
  313. }
  314. .bottom-bar-left-item{
  315. padding-right: 20rpx;
  316. font-size: 24rpx;
  317. display: flex;
  318. align-items: center;
  319. }
  320. .bottom-bar-left-item-icon{
  321. position: relative;
  322. background: #2196F3;
  323. padding: 20rpx;
  324. border-radius: 100%;
  325. color: #fff;
  326. }
  327. .bottom-bar-right{
  328. padding: 0 50rpx;
  329. height: 100%;
  330. background: #2196F3;
  331. display: flex;
  332. align-items: center;
  333. .bottom-bar-right-item{
  334. color: #fff;
  335. }
  336. }
  337. .bg-0{
  338. background: #2196F3;
  339. }
  340. .bg-1{
  341. background: #f44336;
  342. }
  343. }
  344. .product-list{
  345. display: flex;
  346. flex-wrap: wrap;
  347. }
  348. .check-order-list{
  349. width: 50%;
  350. padding: 10upx;
  351. .video-item{
  352. background: #ffffff;
  353. border-radius: 10upx;
  354. box-shadow: 1px 1px 3px #EEEEEE;
  355. > view{
  356. &:first-child{
  357. position: relative;
  358. overflow: hidden;
  359. }
  360. &:last-child{
  361. padding: 20rpx;
  362. .product-name{
  363. font-size: 28rpx;
  364. }
  365. .product-guige{
  366. margin: 10rpx 0;
  367. color: #666;
  368. text{
  369. margin-right: 10rpx;
  370. }
  371. }
  372. }
  373. .product-button{
  374. display: flex;
  375. justify-content: space-between;
  376. align-items: center;
  377. }
  378. }
  379. }
  380. }
  381. }
  382. .price-txt{
  383. color: red;
  384. text{
  385. font-size: 36rpx;
  386. }
  387. }
  388. .choose-title{
  389. display: flex;
  390. align-items:center;
  391. padding: 30rpx;
  392. position: fixed;
  393. background: #fff;
  394. width: 100%;
  395. z-index: 3;
  396. .p-nums{
  397. color: #2196F3;
  398. margin: 0 6rpx;
  399. }
  400. }
  401. .choose-product-list{
  402. padding: 100rpx 20rpx 130rpx;
  403. width: 100%;
  404. .choose-product-item{
  405. display: flex;
  406. align-items: center;
  407. justify-content: space-between;
  408. padding: 20rpx 0;
  409. border-bottom: 1px solid #eee;
  410. > view{
  411. display: flex;
  412. align-items: center;
  413. justify-content: space-between;
  414. flex-grow: 1;
  415. width: 100%;
  416. }
  417. .choose-product-item-img{
  418. margin-right: 10rpx;
  419. width: 35%;
  420. position: relative;
  421. overflow: hidden;
  422. .back-price{
  423. zoom: calc(0.8);
  424. }
  425. }
  426. .choose-product-item-info{
  427. margin-right: 10rpx;
  428. width: 65%;
  429. flex-grow: 1;
  430. .choose-product-item-left-info-price{
  431. display: flex;
  432. align-items:center;
  433. justify-content: space-between;
  434. >view{
  435. &:last-child{
  436. display: flex;
  437. align-items:center;
  438. }
  439. }
  440. }
  441. .choose-product-item-left-info-name{
  442. font-size: 28rpx;
  443. }
  444. .choose-product-item-left-info-guige{
  445. color: #666;
  446. margin: 10rpx 0;
  447. text{
  448. margin-right: 10rpx;
  449. }
  450. }
  451. }
  452. }
  453. }
  454. .back-price{
  455. padding: 6rpx 55rpx;
  456. background: rgb(255 87 34 / 0.6);
  457. position: absolute;
  458. top: 16rpx;
  459. left: -50rpx;
  460. color: #fff;
  461. z-index: 2;
  462. font-size: 20rpx;
  463. text-align: center;
  464. transform: rotate(-40deg);
  465. display: flex;
  466. align-items: center;
  467. text{
  468. font-size: 28rpx;
  469. }
  470. }
  471. }
  472. </style>