|
@@ -0,0 +1,474 @@
|
|
|
|
+<template>
|
|
|
|
+ <view class="pages">
|
|
|
|
+ <!-- head -->
|
|
|
|
+ <view class="scrollPage-header">
|
|
|
|
+ <view :style="{height:statusBarHeight+'px'}"></view>
|
|
|
|
+ <view class="header-title">
|
|
|
|
+ <view class="header-left" @click="goBack">
|
|
|
|
+ <image style="width: 16px; height: 16px;margin-right:3px;" mode="aspectFit" src="../static/arrow-left.png"></image>
|
|
|
|
+ <text>返回</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="header-title"><text class="ellipsis-one" overflow="ellipsis">{{title}}</text></view>
|
|
|
|
+ <view class="header-right"></view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="search-head" @click="goSearch">
|
|
|
|
+ <uni-search-bar readonly v-model="queryWord" :focus="focus" radius="100" placeholder="请输入商品名称/产品编码/原厂编码" textColor="#666" clearButton="auto" cancelButton="none" />
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="search-result">
|
|
|
|
+ <view class="tab-left" v-if="clzId&&categoryList.length>0">
|
|
|
|
+ <scroll-view
|
|
|
|
+ :style="{height: (screenHeight - statusBarHeight - 44 - 43) + 'px'}"
|
|
|
|
+ scroll-y="true"
|
|
|
|
+ :bounces="false"
|
|
|
|
+ type="list"
|
|
|
|
+ >
|
|
|
|
+ <view class="item-clz"
|
|
|
|
+ v-for="item in categoryList"
|
|
|
|
+ :key="item.categorySn"
|
|
|
|
+ :class="item.categorySn==categorySn?'active':''"
|
|
|
|
+ @click="handleTab(item)">
|
|
|
|
+ {{item.categoryName}}
|
|
|
|
+ </view>
|
|
|
|
+ </scroll-view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="right-box" :style="{width:clzId&&categoryList.length?'75%':'100%'}">
|
|
|
|
+ <!-- body -->
|
|
|
|
+ <scroll-view
|
|
|
|
+ class="scrollPage-body"
|
|
|
|
+ :class="clzId&&categoryList.length?'right-item':''"
|
|
|
|
+ :style="{height: (screenHeight - statusBarHeight - 44 - 43) + 'px'}"
|
|
|
|
+ scroll-y="true"
|
|
|
|
+ type="list"
|
|
|
|
+ :bounces="false"
|
|
|
|
+ :refresher-enabled="enableRefresh"
|
|
|
|
+ :refresher-triggered="triggered"
|
|
|
|
+ @refresherpulling="onPulling"
|
|
|
|
+ @refresherrefresh="onRefresh"
|
|
|
|
+ @refresherrestore="onRestore"
|
|
|
|
+ @refresherabort="onAbort"
|
|
|
|
+ @scrolltolower="reachBottom">
|
|
|
|
+ <!-- 产品列表 -->
|
|
|
|
+ <chooseProductItem
|
|
|
|
+ v-for="(item, index) in list"
|
|
|
|
+ :key="item.id"
|
|
|
|
+ :index="index"
|
|
|
|
+ :list="item"
|
|
|
|
+ :isView="true"
|
|
|
|
+ :isLogin="hasLogin"
|
|
|
|
+ @toDetail="viewDetail"
|
|
|
|
+ >
|
|
|
|
+ </chooseProductItem>
|
|
|
|
+ <!-- loading -->
|
|
|
|
+ <view class="loading-bar" v-if="total>0 && (loading||loadEnd)">{{loadText}}</view>
|
|
|
|
+ <view class="empty-bar" v-if="total==0&&!loading">
|
|
|
|
+ <image mode="aspectFit" :src="empty.imgUrl"></image>
|
|
|
|
+ <view>{{empty.tip}}</view>
|
|
|
|
+ </view>
|
|
|
|
+ </scroll-view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ import {
|
|
|
|
+ mapState,
|
|
|
|
+ mapMutations,
|
|
|
|
+ } from 'vuex'
|
|
|
|
+ import chooseProductItem from '@/pagesB/components/chooseProductItemSkline.vue'
|
|
|
|
+ import { getShopCategoryExt, getShopProductList } from '@/api/shop.js'
|
|
|
|
+ export default {
|
|
|
|
+ components:{
|
|
|
|
+ chooseProductItem
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ title: '',
|
|
|
|
+ loadText: '加载中...',
|
|
|
|
+ empty: {
|
|
|
|
+ tip: '暂无商品',
|
|
|
|
+ imgUrl: '/static/nodata.png'
|
|
|
|
+ },
|
|
|
|
+ queryWord:'',
|
|
|
|
+ screenWidth: 325,
|
|
|
|
+ screenHeight: 0,
|
|
|
|
+ statusBarHeight: 44,
|
|
|
|
+ safeAreaBottom: 0,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ pageNo:1,
|
|
|
|
+ total:0,
|
|
|
|
+ list: [],
|
|
|
|
+ loading:false,
|
|
|
|
+ loadEnd: false,
|
|
|
|
+ focus: false,
|
|
|
|
+ expend: false,
|
|
|
|
+ clzId: null, // 一级分类
|
|
|
|
+ categorySn: null ,// 当前分类sn
|
|
|
|
+ categoryList: [], // 二级分类列表
|
|
|
|
+ enableRefresh: true,
|
|
|
|
+ triggered: false,
|
|
|
|
+ pulling: false
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ ...mapState(['hasLogin']),
|
|
|
|
+ // 登录用户信息
|
|
|
|
+ userInfo(){
|
|
|
|
+ return this.$store.state.vuex_userInfo
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ onLoad(opts) {
|
|
|
|
+ // 计算区域高度
|
|
|
|
+ this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
|
|
|
+ this.screenWidth = uni.getSystemInfoSync().windowWidth
|
|
|
|
+ this.screenHeight = uni.getSystemInfoSync().windowHeight
|
|
|
|
+ this.safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
|
|
|
|
+
|
|
|
|
+ // 一级分类id
|
|
|
|
+ this.clzId = opts.clzId
|
|
|
|
+
|
|
|
|
+ // 搜索商品
|
|
|
|
+ if(opts.clzId==''){
|
|
|
|
+ this.title = '商城商品搜索'
|
|
|
|
+ this.focus = true
|
|
|
|
+ }else{
|
|
|
|
+ // 分类下产品
|
|
|
|
+ this.title = opts.clzName
|
|
|
|
+ // 查二级目录
|
|
|
|
+ this.getCategory()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ // 返回
|
|
|
|
+ goBack(){
|
|
|
|
+ uni.navigateBack()
|
|
|
|
+ },
|
|
|
|
+ // 去搜索产品
|
|
|
|
+ goSearch(event){
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url:'/pagesB/shopiing/searchProduct?queryWord='+event.value+'&clzId='
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 获取二级目录
|
|
|
|
+ getCategory(){
|
|
|
|
+ getShopCategoryExt({
|
|
|
|
+ categorySn: this.clzId,
|
|
|
|
+ status: 1
|
|
|
|
+ }).then(res => {
|
|
|
|
+ if(res.status == 200){
|
|
|
|
+ // 二级目录
|
|
|
|
+ this.categoryList = res.data && res.data.shopCategoryList ? res.data.shopCategoryList : []
|
|
|
|
+ // 如果有二级目录
|
|
|
|
+ if(this.categoryList.length > 0){
|
|
|
|
+ // this.categoryList.unshift({
|
|
|
|
+ // categorySn: this.clzId,
|
|
|
|
+ // categoryName: '全部'
|
|
|
|
+ // })
|
|
|
|
+ // 默认显示第一个
|
|
|
|
+ this.categorySn = this.categoryList[0].categorySn
|
|
|
|
+ // 目录下商品
|
|
|
|
+ this.searchList()
|
|
|
|
+ }else{
|
|
|
|
+ // 禁用下拉刷新
|
|
|
|
+ this.enableRefresh = false
|
|
|
|
+ // 只有产品
|
|
|
|
+ const list = res.data && res.data.shopProductList ? res.data.shopProductList : []
|
|
|
|
+ this.total = list.length
|
|
|
|
+ // 更新已选状态
|
|
|
|
+ for(let i=0;i<list.length;i=i+this.pageSize){
|
|
|
|
+ // 追加数据
|
|
|
|
+ this.list.push(list.slice(i,(i+this.pageSize)>list.length?list.length:(i+this.pageSize)).map(k=>{
|
|
|
|
+ return {
|
|
|
|
+ id: k.id,
|
|
|
|
+ price: k.price,
|
|
|
|
+ productCode: k.productCode,
|
|
|
|
+ productSn: k.productSn,
|
|
|
|
+ productImage: k.productMsg,
|
|
|
|
+ productName: k.productName,
|
|
|
|
+ productOrigCode: k.productOrigCode,
|
|
|
|
+ categorySn: k.categorySn,
|
|
|
|
+ hotFlag: k.hotFlag,
|
|
|
|
+ productSn: k.productSn,
|
|
|
|
+ priceType: k.priceType,
|
|
|
|
+ shopProductSn: k.shopProductSn,
|
|
|
|
+ status: k.status,
|
|
|
|
+ statusDictValue: k.statusDictValue,
|
|
|
|
+ dealerScopeFlag: k.dealerScopeFlag
|
|
|
|
+ }
|
|
|
|
+ }))
|
|
|
|
+ }
|
|
|
|
+ this.loadEnd = true
|
|
|
|
+ this.loadText = '没有更多了'
|
|
|
|
+ }
|
|
|
|
+ }else{
|
|
|
|
+ uni.showToast({
|
|
|
|
+ title: res.message,
|
|
|
|
+ icon: 'none'
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 搜索列表
|
|
|
|
+ searchList(event) {
|
|
|
|
+ this.loadEnd = false
|
|
|
|
+ this.loadText = '加载中...'
|
|
|
|
+ this.list = []
|
|
|
|
+ this.pageNo = 1
|
|
|
|
+ this.getList()
|
|
|
|
+ },
|
|
|
|
+ // 单击二级分类
|
|
|
|
+ handleTab(item){
|
|
|
|
+ this.categorySn = item.categorySn
|
|
|
|
+ this.queryWord = ''
|
|
|
|
+ this.searchList()
|
|
|
|
+ },
|
|
|
|
+ // 自定义下拉刷新控件被下拉
|
|
|
|
+ onPulling(e){
|
|
|
|
+ console.log('onPulling')
|
|
|
|
+ this.triggered = true
|
|
|
|
+ this.pulling = true
|
|
|
|
+ },
|
|
|
|
+ // 自定义下拉刷新被触发
|
|
|
|
+ onRefresh(e){
|
|
|
|
+ console.log('onRefresh')
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.triggered = false
|
|
|
|
+ }, 500);
|
|
|
|
+ },
|
|
|
|
+ // 自定义下拉刷新被复位
|
|
|
|
+ onRestore(e){
|
|
|
|
+ console.log('onRestore')
|
|
|
|
+ this.queryWord = ''
|
|
|
|
+ this.searchList()
|
|
|
|
+ },
|
|
|
|
+ // 自定义下拉刷新被中止
|
|
|
|
+ onAbort(e){
|
|
|
|
+ console.log('onAbort')
|
|
|
|
+ this.triggered = false
|
|
|
|
+ },
|
|
|
|
+ // 滚动到底部
|
|
|
|
+ reachBottom() {
|
|
|
|
+ console.log('reachBottom',this.pulling)
|
|
|
|
+ if(this.enableRefresh){
|
|
|
|
+ if(!this.loading && !this.loadEnd && !this.pulling){
|
|
|
|
+ this.pageNo++
|
|
|
|
+ this.getList()
|
|
|
|
+ }
|
|
|
|
+ if(this.pulling){
|
|
|
|
+ this.pulling = false
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 列表查询
|
|
|
|
+ getList(){
|
|
|
|
+ this.loading = true
|
|
|
|
+ const dealerSn = this.hasLogin && this.userInfo && this.userInfo.sysUserFlag == '1' ? this.$store.state.vuex_storeShelf.dealerSn : ''
|
|
|
|
+ getShopProductList({
|
|
|
|
+ pageNo: this.pageNo,
|
|
|
|
+ pageSize: this.pageSize,
|
|
|
|
+ queryWord: this.queryWord,
|
|
|
|
+ categorySn: this.categorySn,
|
|
|
|
+ dealerSn: dealerSn,
|
|
|
|
+ categoryStatus : 1,
|
|
|
|
+ status: 1
|
|
|
|
+ }).then(res => {
|
|
|
|
+ this.loading = false
|
|
|
|
+ if(res.status == 200){
|
|
|
|
+ this.total = Number(res.data.count)
|
|
|
|
+ if(this.total){
|
|
|
|
+ const list = res.data.list || []
|
|
|
|
+ const ret = []
|
|
|
|
+ // 更新已选状态
|
|
|
|
+ list.forEach(k => {
|
|
|
|
+ ret.push({
|
|
|
|
+ id: k.id,
|
|
|
|
+ price: k.price,
|
|
|
|
+ productCode: k.productCode,
|
|
|
|
+ productSn: k.productSn,
|
|
|
|
+ productImage: k.productMsg,
|
|
|
|
+ productName: k.productName,
|
|
|
|
+ productOrigCode: k.productOrigCode,
|
|
|
|
+ categorySn: k.categorySn,
|
|
|
|
+ hotFlag: k.hotFlag,
|
|
|
|
+ productSn: k.productSn,
|
|
|
|
+ priceType: k.priceType,
|
|
|
|
+ shopProductSn: k.shopProductSn,
|
|
|
|
+ status: k.status,
|
|
|
|
+ statusDictValue: k.statusDictValue,
|
|
|
|
+ dealerScopeFlag: k.dealerScopeFlag
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ // 追加数据
|
|
|
|
+ this.list.push(ret)
|
|
|
|
+ // 判断是否最后一页
|
|
|
|
+ const maxPages = Math.ceil(this.total / this.pageSize)
|
|
|
|
+ if(this.pageNo >= maxPages){
|
|
|
|
+ this.loadEnd = true
|
|
|
|
+ this.loadText = '没有更多了'
|
|
|
|
+ }
|
|
|
|
+ }else{
|
|
|
|
+ this.loadEnd = false
|
|
|
|
+ this.loadText = '没有找到相关产品'
|
|
|
|
+ }
|
|
|
|
+ }else{
|
|
|
|
+ this.loadEnd = false
|
|
|
|
+ this.loadText = res.message
|
|
|
|
+ }
|
|
|
|
+ }).catch(err => {
|
|
|
|
+ this.loading = false
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 产品详情查看
|
|
|
|
+ viewDetail(item){
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url:'/pagesB/shopiing/productDetail?sn='+item.shopProductSn
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="less">
|
|
|
|
+.pages{
|
|
|
|
+ height: 100vh;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ .scrollPage-header{
|
|
|
|
+ z-index: 1;
|
|
|
|
+ .header-title{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ padding: 0 10px;
|
|
|
|
+ height: 44px;
|
|
|
|
+ background-color: #FFFFFF;
|
|
|
|
+ box-shadow: 0px 1px 0px 0px #E6E6E6;
|
|
|
|
+ .header-title{
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ color: #333333;
|
|
|
|
+ max-width: 70%;
|
|
|
|
+ }
|
|
|
|
+ .header-left{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ text{
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ color: #333333;
|
|
|
|
+ margin-left: 5px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .header-right{
|
|
|
|
+ width: 50px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .search-head{
|
|
|
|
+ background-color: #FFFFFF;
|
|
|
|
+ /deep/ .uni-searchbar{
|
|
|
|
+ padding: 5px 6px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .search-result{
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ .tab-left{
|
|
|
|
+ width: 25%;
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
+ .item-clz{
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ padding: 8px 10px;
|
|
|
|
+ line-height: 30px;
|
|
|
|
+ }
|
|
|
|
+ .active{
|
|
|
|
+ border-left: 3px solid #00aaff;
|
|
|
|
+ background: #f8f8f8;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .right-box{
|
|
|
|
+ width: 75%;
|
|
|
|
+ .scrollPage-body{
|
|
|
|
+ width:100%;
|
|
|
|
+ .uni-searchbar{
|
|
|
|
+ background-color: #FFFFFF;
|
|
|
|
+ }
|
|
|
|
+ /deep/ .choose-product-item{
|
|
|
|
+ background-color: #FFFFFF;
|
|
|
|
+ margin: 6px 10px;
|
|
|
|
+ border-radius: 10px;
|
|
|
|
+ }
|
|
|
|
+ .loading-bar{
|
|
|
|
+ text-align: center;
|
|
|
|
+ padding: 10px 0;
|
|
|
|
+ color: #999999;
|
|
|
|
+ }
|
|
|
|
+ .empty-bar{
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ padding: 20px 0;
|
|
|
|
+ image{
|
|
|
|
+ width: 100px;
|
|
|
|
+ height: 100px;
|
|
|
|
+ }
|
|
|
|
+ view{
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ color: #999999;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .search-history{
|
|
|
|
+ padding: 0 1.5rem;
|
|
|
|
+ .search-history-title{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ padding: 6px 0;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ color: #333333;
|
|
|
|
+ border-bottom: 1px solid #E6E6E6;
|
|
|
|
+ }
|
|
|
|
+ .search-history-right{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ }
|
|
|
|
+ .search-history-expend{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ margin-right: 15px;
|
|
|
|
+ }
|
|
|
|
+ .search-history-body{
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ padding: 10px 10px;
|
|
|
|
+ .item{
|
|
|
|
+ padding: 6px 0;
|
|
|
|
+ background-color: #f8f8f8;
|
|
|
|
+ border-radius: 20px;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ color: #333333;
|
|
|
|
+ width: 46%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .right-item{
|
|
|
|
+ /deep/ .choose-product-item{
|
|
|
|
+ margin: 5px 8px;
|
|
|
|
+ .choose-product-item-img{
|
|
|
|
+ height: 130rpx;
|
|
|
|
+ }
|
|
|
|
+ .choose-product-item-info .choose-product-item-left-info-name{
|
|
|
|
+ font-weight: normal;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|