|
@@ -0,0 +1,468 @@
|
|
|
+<template>
|
|
|
+ <view class="video-pagesCons">
|
|
|
+ <view class="tab-search">
|
|
|
+ <u-search placeholder="请输入产品名称/轮胎规格" shape="round" :clearabled="true" show-action v-model="queryWord" @clear="getRow" @search="getRow" @custom="getRow"></u-search>
|
|
|
+ </view>
|
|
|
+ <view class="tab-body">
|
|
|
+ <scroll-view scroll-y style="height: 100%;width: 100%;overflow: auto;" @scrolltolower="onreachBottom">
|
|
|
+ <view class="product-list">
|
|
|
+ <view
|
|
|
+ class="check-order-list"
|
|
|
+ v-for="(item,index) in 20"
|
|
|
+ :key="item.id"
|
|
|
+ >
|
|
|
+ <view class="video-item">
|
|
|
+ <view>
|
|
|
+ <u-image :src="item.imageSet[0]" height="140px" width="100%"></u-image>
|
|
|
+ <view class="back-price">返<text>¥15</text></view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view class="product-name">箭冠轮胎285/70R17LT RT-5900 坦克300、长城炮、牧马人 D</view>
|
|
|
+ <view class="product-guige"><text>编码:285/70R17LT RT-5900</text> <text>尺寸:17</text></view>
|
|
|
+ <view class="product-button">
|
|
|
+ <view class="price-txt">¥<text>325.63</text></view>
|
|
|
+ <view>
|
|
|
+ <u-button :throttle-time="50" @click="chooseProduct(item)" :custom-style="{width:'50rpx'}" size="mini" type="primary" shape="circle"><u-icon name="plus"></u-icon></u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view style="padding: 20upx;">
|
|
|
+ <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>
|
|
|
+ <u-loadmore v-if="(total>=list.length&&list.length)||status=='loading'" :status="status" />
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <!-- 底部栏 -->
|
|
|
+ <view class="bottom-bar" @click="clearAction">
|
|
|
+ <view class="bottom-bar-left">
|
|
|
+ <view class="bottom-bar-left-item">
|
|
|
+ <view class="bottom-bar-left-item-icon" @click="openChoose">
|
|
|
+ <u-icon name="shopping-cart" size="40"></u-icon>
|
|
|
+ <u-badge type="error" :count="chooseLength" :offset="[-7,-8]"></u-badge>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom-bar-left-item">
|
|
|
+ 合计:<view class="price-txt">¥<text>325.63</text></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view :class="'bottom-bar-right bg-'+(showChoosePopu?'1':'0')" @click="submitOrder">
|
|
|
+ <view class="bottom-bar-right-item">{{showChoosePopu?'确认采购':'去结算'}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 已选列表 -->
|
|
|
+ <u-popup
|
|
|
+ v-model="showChoosePopu"
|
|
|
+ closeable
|
|
|
+ :zIndex="100"
|
|
|
+ mode="bottom"
|
|
|
+ border-radius="14"
|
|
|
+ height="80%"
|
|
|
+ @open="openRender"
|
|
|
+ @close="closePopu">
|
|
|
+ <view :style="{width:screenWidth + 'px'}" @click="clearAction">
|
|
|
+ <view class="choose-title">
|
|
|
+ <view>已选<text class="p-nums">{{chooseLength}}</text>款产品 </view>
|
|
|
+ <u-button @click="claerChoose" size="mini" type="error" plain style="margin: 0 20upx;">清空列表</u-button>
|
|
|
+ </view>
|
|
|
+ <view class="choose-product-list" v-if="showSwipeAction">
|
|
|
+ <u-swipe-action
|
|
|
+ :show="item.show"
|
|
|
+ :index="index"
|
|
|
+ v-for="(item, index) in chooseProductList"
|
|
|
+ :key="item.id"
|
|
|
+ @click="chooseClick"
|
|
|
+ @open="chooseOpen"
|
|
|
+ :options="chooseOptions"
|
|
|
+ >
|
|
|
+ <view class="choose-product-item">
|
|
|
+ <view>
|
|
|
+ <view class="choose-product-item-img">
|
|
|
+ <u-image :src="item.images" height="200rpx" width="100%"></u-image>
|
|
|
+ <view class="back-price">返<text>¥15</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="choose-product-item-info">
|
|
|
+ <view class="ellipsis-two choose-product-item-left-info-name">箭冠轮胎285/70R17LT RT-5900 坦克300、长城炮、牧马人 D</view>
|
|
|
+ <view class="choose-product-item-left-info-guige"><text>编码:285/70R17LT RT-5900</text> <text>尺寸:17</text></view>
|
|
|
+ <view class="choose-product-item-left-info-price">
|
|
|
+ <view class="price-txt">¥<text>325.63</text></view>
|
|
|
+ <view>
|
|
|
+ <u-number-box :input-width="60" :input-height="60" size="mini"></u-number-box>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-swipe-action>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ mapState,
|
|
|
+ mapMutations,
|
|
|
+ } from 'vuex'
|
|
|
+ import { promoTerminalList } from '@/api/video.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ status: 'loading',
|
|
|
+ noDataText: '暂无数据',
|
|
|
+ queryWord: '',
|
|
|
+ // 查询条件
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
+ showChoosePopu: false,
|
|
|
+ chooseList:[],
|
|
|
+ chooseProductList:[],
|
|
|
+ chooseOptions:
|
|
|
+ [
|
|
|
+ {
|
|
|
+ text: '删除',
|
|
|
+ style: {
|
|
|
+ backgroundColor: '#dd524d'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ screenWidth: 750,
|
|
|
+ showSwipeAction: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['hasLogin']),
|
|
|
+ userInfo(){
|
|
|
+ return this.$store.state.vuex_userInfo
|
|
|
+ },
|
|
|
+ chooseLength(){
|
|
|
+ return this.chooseList.length
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opts) {
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: opts.title||'促销活动产品'
|
|
|
+ })
|
|
|
+ this.pageInit()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ pageInit(){
|
|
|
+ this.screenWidth = uni.getSystemInfoSync().windowWidth
|
|
|
+ this.total = 0
|
|
|
+ this.pageNo = 1
|
|
|
+ this.getRow()
|
|
|
+ },
|
|
|
+ // 添加已选产品
|
|
|
+ chooseProduct(item){
|
|
|
+ this.chooseList.push({
|
|
|
+ id: new Date().getTime(),
|
|
|
+ title: '长安回望绣成堆,山顶千门次第开,一骑红尘妃子笑,无人知是荔枝来',
|
|
|
+ images: 'https://cdn.uviewui.com/uview/common/logo.png',
|
|
|
+ show: false
|
|
|
+ })
|
|
|
+ this.showChoosePopu = false
|
|
|
+ },
|
|
|
+ openRender(){
|
|
|
+ this.chooseProductList = JSON.parse(JSON.stringify(this.chooseList))
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.showSwipeAction = true
|
|
|
+ },100)
|
|
|
+ },
|
|
|
+ closePopu(){
|
|
|
+ this.chooseProductList = []
|
|
|
+ this.showChoosePopu=false
|
|
|
+ },
|
|
|
+ // 打开已选产品列表
|
|
|
+ openChoose(){
|
|
|
+ if(this.chooseLength){
|
|
|
+ this.showChoosePopu = !this.showChoosePopu
|
|
|
+ }else{
|
|
|
+ this.$u.toast(`请选择产品`);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //已选产品删除
|
|
|
+ chooseClick(index, btns){
|
|
|
+ if(btns == 0) {
|
|
|
+ this.chooseList.splice(index, 1);
|
|
|
+ this.chooseProductList.splice(index, 1);
|
|
|
+ this.$u.toast(`删除了第${index}个cell`);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 同时打开一个
|
|
|
+ chooseOpen(index){
|
|
|
+ // 先将正在被操作的swipeAction标记为打开状态,否则由于props的特性限制,
|
|
|
+ // 原本为'false',再次设置为'false'会无效
|
|
|
+ this.chooseProductList[index].show = true;
|
|
|
+ this.chooseProductList.map((val, idx) => {
|
|
|
+ if(index != idx) this.chooseProductList[idx].show = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 清除滑动按钮
|
|
|
+ clearAction(){
|
|
|
+ this.chooseProductList.map(item => {
|
|
|
+ item.show = false
|
|
|
+ })
|
|
|
+ this.chooseProductList.splice()
|
|
|
+ },
|
|
|
+ // 清空已选列表
|
|
|
+ claerChoose(){
|
|
|
+ const _this = this
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定清空已选列表?',
|
|
|
+ confirmText: '确定',
|
|
|
+ success(res) {
|
|
|
+ if(res.confirm){
|
|
|
+ _this.chooseList = []
|
|
|
+ _this.chooseProductList = []
|
|
|
+ _this.showChoosePopu = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // scroll-view到底部加载更多
|
|
|
+ onreachBottom() {
|
|
|
+ if(this.list.length < this.total){
|
|
|
+ this.pageNo += 1
|
|
|
+ this.getRow()
|
|
|
+ }else{
|
|
|
+ this.status = "nomore"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 查询列表
|
|
|
+ getRow (pageNo) {
|
|
|
+ let _this = this
|
|
|
+ if (pageNo) {
|
|
|
+ this.pageNo = pageNo
|
|
|
+ }
|
|
|
+ let params = {
|
|
|
+ pageNo: this.pageNo,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ queryWord: this.queryWord
|
|
|
+ }
|
|
|
+ const storeShelf = this.$store.state.vuex_storeShelf
|
|
|
+ this.status = "loading"
|
|
|
+ promoTerminalList({sn:storeShelf.dealerSn,contentType:'LINK'}).then(res => {
|
|
|
+ if (res.code == 200 || res.status == 204 || res.status == 200) {
|
|
|
+ // const list = res.data.list || []
|
|
|
+ // if(_this.pageNo>1){
|
|
|
+ // _this.list = _this.list.concat(list)
|
|
|
+ // }else{
|
|
|
+ // _this.list = list
|
|
|
+ // }
|
|
|
+ // _this.total = res.data.count || 0
|
|
|
+
|
|
|
+ _this.list = res.data.filter(item => item.content.indexOf("pages/promo/index") >= 0)
|
|
|
+ _this.total = _this.list.length
|
|
|
+ } else {
|
|
|
+ _this.list = []
|
|
|
+ _this.total = 0
|
|
|
+ _this.noDataText = res.message
|
|
|
+ }
|
|
|
+ _this.status = _this.total>=_this.list.length ? "nomore" : 'loadmore'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 提交订单
|
|
|
+ submitOrder(){
|
|
|
+ if(this.showChoosePopu){
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pagesB/procureOrder?id='
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.openChoose()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ page{
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
+ .video-pagesCons{
|
|
|
+ height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .tab-search{
|
|
|
+ padding: 15rpx 20rpx;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ .tab-body{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex-grow: 1;
|
|
|
+ overflow: auto;
|
|
|
+ .bottom-bar{
|
|
|
+ height: 150upx;
|
|
|
+ z-index: 500;
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 32upx;
|
|
|
+ .bottom-bar-left{
|
|
|
+ padding: 0 30upx;
|
|
|
+ flex-grow: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .bottom-bar-left-item{
|
|
|
+ padding-right: 20rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .bottom-bar-left-item-icon{
|
|
|
+ position: relative;
|
|
|
+ background: #2196F3;
|
|
|
+ padding: 20rpx;
|
|
|
+ border-radius: 100%;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .bottom-bar-right{
|
|
|
+ padding: 0 50rpx;
|
|
|
+ height: 100%;
|
|
|
+ background: #2196F3;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .bottom-bar-right-item{
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bg-0{
|
|
|
+ background: #2196F3;
|
|
|
+ }
|
|
|
+ .bg-1{
|
|
|
+ background: #f44336;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .product-list{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ .check-order-list{
|
|
|
+ width: 50%;
|
|
|
+ padding: 10upx;
|
|
|
+ .video-item{
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 10upx;
|
|
|
+ box-shadow: 1px 1px 3px #EEEEEE;
|
|
|
+ > view{
|
|
|
+ &:first-child{
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ &:last-child{
|
|
|
+ padding: 20rpx;
|
|
|
+ .product-guige{
|
|
|
+ margin: 10rpx 0;
|
|
|
+ color: #666;
|
|
|
+ text{
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .product-button{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .price-txt{
|
|
|
+ color: red;
|
|
|
+ text{
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .choose-title{
|
|
|
+ display: flex;
|
|
|
+ align-items:center;
|
|
|
+ padding: 30rpx;
|
|
|
+ position: fixed;
|
|
|
+ background: #fff;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 3;
|
|
|
+ .p-nums{
|
|
|
+ color: #2196F3;
|
|
|
+ margin: 0 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .choose-product-list{
|
|
|
+ padding: 100rpx 20rpx 150rpx;
|
|
|
+ width: 100%;
|
|
|
+ .choose-product-item{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ > view{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-grow: 1;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .choose-product-item-img{
|
|
|
+ margin-right: 10rpx;
|
|
|
+ width: 35%;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ .back-price{
|
|
|
+ zoom: calc(0.8);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .choose-product-item-info{
|
|
|
+ margin-right: 10rpx;
|
|
|
+ width: 65%;
|
|
|
+ flex-grow: 1;
|
|
|
+ .choose-product-item-left-info-price{
|
|
|
+ display: flex;
|
|
|
+ align-items:center;
|
|
|
+ justify-content: space-between;
|
|
|
+ >view{
|
|
|
+ &:last-child{
|
|
|
+ display: flex;
|
|
|
+ align-items:center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .choose-product-item-left-info-guige{
|
|
|
+ color: #666;
|
|
|
+ margin: 10rpx 0;
|
|
|
+ text{
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .back-price{
|
|
|
+ padding: 6rpx 55rpx;
|
|
|
+ background: rgb(255 87 34 / 0.6);
|
|
|
+ position: absolute;
|
|
|
+ top: 16rpx;
|
|
|
+ left: -50rpx;
|
|
|
+ color: #fff;
|
|
|
+ z-index: 2;
|
|
|
+ font-size: 20rpx;
|
|
|
+ text-align: center;
|
|
|
+ transform: rotate(-40deg);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ text{
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|