|
|
@@ -1,1127 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="app-content">
|
|
|
-
|
|
|
- <view class="modern-tabs-container">
|
|
|
- <view class="modern-tabs">
|
|
|
- <view class="modern-tab" :class="{ 'active': priceType === -1 }" @click="switchPriceTab(-1)" >
|
|
|
- <view class="tab-content">
|
|
|
- <text class="tab-text">全部</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="modern-tab" :class="{ 'active': priceType === 1 }" @click="switchPriceTab(1)" >
|
|
|
- <view class="tab-content">
|
|
|
- <text class="tab-text">有价</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="modern-tab" :class="{ 'active': priceType === 0 }" @click="switchPriceTab(0)" >
|
|
|
- <view class="tab-content">
|
|
|
- <text class="tab-text">无价</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="input-wrap">
|
|
|
- <view>
|
|
|
- <button class="admin-button-com middle " :class="[searchType == 0 ? 'blue' : 'default']" style="width:100upx;margin-right:7upx;" @click="changeSearchType(0)">名称</button>
|
|
|
- <button class="admin-button-com middle " :class="[searchType == 1 ? 'blue' : 'default']" style="width:100upx;margin-right:7upx;" @click="changeSearchType(1)">编号</button>
|
|
|
- </view>
|
|
|
- <view class="search-bar">
|
|
|
- <app-search-module v-model="searchText" placeholder="请输入" @input="searchFn" />
|
|
|
- </view>
|
|
|
- <view>
|
|
|
- <button class="admin-button-com middle blue" style="margin-right:7upx;margin-left:7upx;width:100upx;" @click="openFilterPanel">筛选</button>
|
|
|
- <button class="admin-button-com middle blue" style="margin-right:7upx;width:100upx;" @click="rank">排序</button>
|
|
|
- <button class="admin-button-com middle blue" style="width:100upx;" @click="addGoods()">新增</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="app-middle">
|
|
|
- <scroll-view scroll-y scroll-with-animation class="tab-view" :scroll-top="scrollTop">
|
|
|
- <view v-for="(item,index) in tabbar" :key="index" class="tab-bar-item" :class="[currentTab==index ? 'active' : '']" :data-current="index" @tap.stop="swichTab($event ,item)" >
|
|
|
- <text>{{item.categoryName || ''}}</text>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- <block v-for="(item,index) in tabbar" :key="index">
|
|
|
- <scroll-view scroll-y class="right-box" v-if="currentTab==index" @scrolltolower="goBottom">
|
|
|
- <block v-if="!$util.isEmpty(list.data)">
|
|
|
- <view class="page-view">
|
|
|
- <view class="goods-list" v-for="(goodsItem, idx) in list.data" :key="idx">
|
|
|
- <view class="goods-list-top" @click="edit(goodsItem.id)">
|
|
|
- <view class="img-blo">
|
|
|
- <block v-if="goodsItem.stock <= 0">
|
|
|
- <view class="sold-out">
|
|
|
- <view class="sold-out-xj">已下架</view>
|
|
|
- </view>
|
|
|
- </block>
|
|
|
- <block v-else>
|
|
|
- <view v-if="goodsItem.status == 0" class="sold-out">
|
|
|
- <view class="sold-out-xj">隐藏</view>
|
|
|
- </view>
|
|
|
- </block>
|
|
|
- <img :src="goodsItem.smallCover" mode="aspectFit" />
|
|
|
- </view>
|
|
|
- <view class="goods-det">
|
|
|
- <view class="goods-det-top" style="margin-bottom:4upx;">
|
|
|
- <view class="goods-name" style="font-size:29upx;font-weight:bold; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width:350upx;">{{ goodsItem.name||'' }}</view>
|
|
|
- </view>
|
|
|
- <view class="operate-wrap" style="margin-bottom:15upx;">
|
|
|
- <view v-if="goodsItem.priceType == 1">
|
|
|
- <!-- 当涨价开关开启时,显示涨价后价格和原价 -->
|
|
|
- <view class="price-container">
|
|
|
- <text class="goods-price" style="font-size:26upx;">¥{{ goodsItem.price?parseFloat(goodsItem.price):0 }}</text>
|
|
|
- <text class="original-price" style="font-size:22upx;" v-if="parseFloat(goodsItem.price)!=parseFloat(goodsItem.priceBeforeRise)">¥{{ goodsItem.priceBeforeRise?parseFloat(goodsItem.priceBeforeRise):0 }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="goods-price" style="font-size:26upx;" v-else>---</view>
|
|
|
- </view>
|
|
|
- <view class="operate-wrap">
|
|
|
- <view style="font-size:23upx;">
|
|
|
- <text v-if="Number(goodsItem.sn)>0" style="color:#078c4a;font-weight:bold;margin-right:15upx;font-size:25upx;">#{{ goodsItem.sn }}</text>
|
|
|
- <text>库存</text> <text style="font-weight:bold;margin-left:8upx;">{{goodsItem.stock}}</text>
|
|
|
- <text style="margin-left:18upx;color:#CCCCCC;">已售 {{ goodsItem.actualSold }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="goods-list-bottom flex-center-between">
|
|
|
- <text @click.stop="printLabel(goodsItem)">打标签</text>
|
|
|
- <text @click.stop="getStockChange(goodsItem)">库存明细</text>
|
|
|
- <text @click.stop="editDesc(goodsItem)">编辑简介</text>
|
|
|
- <text @click.stop="moreAction(goodsItem)">更多</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 底部占位,避免最后一个商品操作按钮被遮挡 -->
|
|
|
- <view class="bottom-spacer"></view>
|
|
|
- </view>
|
|
|
- </block>
|
|
|
- <block v-else>
|
|
|
- <app-wrapper-empty title="暂无商品" :is-empty="$util.isEmpty(list.data)" />
|
|
|
- </block>
|
|
|
- </scroll-view>
|
|
|
- </block>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 筛选下拉面板 -->
|
|
|
- <view v-if="showFilterPanel" class="filter-overlay" @click="closeFilterPanel">
|
|
|
- <view class="filter-panel" @click.stop>
|
|
|
- <view class="filter-header">筛选商品</view>
|
|
|
-
|
|
|
- <!-- 价格筛选已移至顶部标签页 -->
|
|
|
-
|
|
|
- <!-- 库存筛选 -->
|
|
|
- <view class="filter-section">
|
|
|
- <view class="filter-title">库存</view>
|
|
|
- <view class="filter-options">
|
|
|
- <view
|
|
|
- v-for="(item, index) in stockOptions"
|
|
|
- :key="index"
|
|
|
- class="filter-option"
|
|
|
- :class="{ 'active': hasStock === item.value }"
|
|
|
- @click="selectStock(item.value)"
|
|
|
- >
|
|
|
- {{ item.label }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 支数筛选 -->
|
|
|
- <view class="filter-section">
|
|
|
- <view class="filter-title">支数</view>
|
|
|
- <view class="filter-options">
|
|
|
- <view
|
|
|
- v-for="(item, index) in flowerNumOptions"
|
|
|
- :key="index"
|
|
|
- class="filter-option"
|
|
|
- :class="{ 'active': flowerNum === item.value }"
|
|
|
- @click="selectFlowerNum(item.value)"
|
|
|
- >
|
|
|
- {{ item.label }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 操作按钮 -->
|
|
|
- <view class="filter-actions">
|
|
|
- <button class="filter-action-btn clear-btn middle" @click="clearFilters">清空</button>
|
|
|
- <button class="filter-action-btn confirm-btn middle blue" @click="confirmFilters">确定</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 打标签弹框 -->
|
|
|
- <view v-if="showPrintModal" class="print-modal-overlay" @click="closePrintModal">
|
|
|
- <view class="print-modal-content" @click.stop>
|
|
|
- <view class="print-modal-header">
|
|
|
- <text class="print-modal-title">打印标签</text>
|
|
|
- <text class="print-modal-close" @click="closePrintModal">×</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="print-modal-body">
|
|
|
- <view class="print-modal-item">
|
|
|
- <text class="print-modal-label">商品名称:</text>
|
|
|
- <text class="print-modal-value">{{ currentPrintItem.name }}</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="print-modal-item">
|
|
|
- <text class="print-modal-label">打印数量:</text>
|
|
|
- <input
|
|
|
- v-model.number="printQuantity"
|
|
|
- type="number"
|
|
|
- class="print-modal-input"
|
|
|
- placeholder="请输入打印数量"
|
|
|
- min="1"
|
|
|
- @focus="clearInput"
|
|
|
- />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="print-modal-footer">
|
|
|
- <button class="print-modal-btn cancel-btn" @click="closePrintModal">取消</button>
|
|
|
- <button class="print-modal-btn confirm-btn" @click="confirmPrint">打印</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <uni-popup ref="rightShowMore" background-color="#fff" type="center" :animation="true" class="class-popup-style">
|
|
|
- <view class="action-popup-container">
|
|
|
- <view class="action-button-item">
|
|
|
- <button class="action-button" @click="shareGoods()">分享到微信</button>
|
|
|
- </view>
|
|
|
- <view class="action-button-item">
|
|
|
- <button class="action-button" @click="getMyPoster()">分享海报</button>
|
|
|
- </view>
|
|
|
- <view class="action-button-item cancel">
|
|
|
- <button class="action-button cancel" @click="closeRightShow()">取消</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-popup>
|
|
|
-
|
|
|
- <item-poster-popup ref="itemPosterPopup" :poster-url="posterUrl" @close="closePoster" @save="downloadImg" />
|
|
|
-
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-import AppSearchModule from "@/components/module/app-search"
|
|
|
-import AppWrapperEmpty from "@/components/app-wrapper-empty"
|
|
|
-import {categoryListInfo,getCategoryToGoods,print,getRise,getPoster} from "@/api/goods"
|
|
|
-import { getWeixinId } from "@/api/invite"
|
|
|
-import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
|
|
|
-import ItemPosterPopup from '@/components/item-poster-popup.vue'
|
|
|
-import { list } from "@/mixins"
|
|
|
-import { mapGetters } from "vuex"
|
|
|
-export default {
|
|
|
- name: "list",
|
|
|
- components: {
|
|
|
- AppWrapperEmpty,
|
|
|
- AppSearchModule,
|
|
|
- uniPopup,
|
|
|
- ItemPosterPopup
|
|
|
- },
|
|
|
- mixins: [list],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- tabbar: [],
|
|
|
- currentTab: 0,
|
|
|
- scrollTop: 0,
|
|
|
- catId: "",
|
|
|
- catName:"",
|
|
|
- flowerNum:0,
|
|
|
- searchText:'',
|
|
|
- searchType:0,
|
|
|
- lastSearchText:'', // 上次的搜索内容
|
|
|
- searchTimer: null, // 搜索防抖定时器
|
|
|
- riseData: {}, // 价格上涨配置
|
|
|
- hasStock:-1, // 0没库存 1有库存
|
|
|
- priceType:-1,// 0 没价,1 有价
|
|
|
- // 新增筛选相关数据
|
|
|
- showFilterPanel: false,
|
|
|
- // 打标签弹框相关数据
|
|
|
- showPrintModal: false,
|
|
|
- currentPrintItem: {},
|
|
|
- printQuantity: '',
|
|
|
- // 价格筛选已移至顶部标签页
|
|
|
- stockOptions: [
|
|
|
- { label: '有库存', value: 1 },
|
|
|
- { label: '没库存', value: 0 }
|
|
|
- ],
|
|
|
- currentInfo: {},
|
|
|
- posterUrl: '',
|
|
|
- getAppIdList: {},
|
|
|
- flowerNumOptions: [
|
|
|
- { label: '6支', value: 6 },
|
|
|
- { label: '9支', value: 9 },
|
|
|
- { label: '11支', value: 11 },
|
|
|
- { label: '19支', value: 19 },
|
|
|
- { label: '33支', value: 33 },
|
|
|
- { label: '52支', value: 52 },
|
|
|
- { label: '66支', value: 66 },
|
|
|
- { label: '99支', value: 99 }
|
|
|
- ]
|
|
|
- };
|
|
|
- },
|
|
|
-
|
|
|
- computed: {
|
|
|
- ...mapGetters({ loginInfo: "getLoginInfo", dictInfo: "getDictionariesInfo" }),
|
|
|
- // 检查是否有活跃的筛选条件
|
|
|
- hasActiveFilters() {
|
|
|
- return this.flowerNum != 0 || this.hasStock!=-1
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- onLoad() {
|
|
|
- getWeixinId().then(res => {
|
|
|
- this.getAppIdList = res.data
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- onShow() {
|
|
|
- // 检查是否需要刷新数据
|
|
|
- const shouldRefresh = uni.getStorageSync('goods_list_refresh');
|
|
|
- if (shouldRefresh) {
|
|
|
- uni.removeStorageSync('goods_list_refresh');
|
|
|
- this.resetList();
|
|
|
- this.getGoodsList();
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- onUnload() {
|
|
|
- // 清理搜索定时器
|
|
|
- if (this.searchTimer) {
|
|
|
- clearTimeout(this.searchTimer);
|
|
|
- this.searchTimer = null;
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- init(){
|
|
|
- this.getCategoryData()
|
|
|
- },
|
|
|
- rank(){
|
|
|
- if(Number(this.catId)>0){
|
|
|
- this.$util.pageTo({url: "/admin/goods/goodsSort?id="+this.catId+"&name="+this.catName})
|
|
|
- }
|
|
|
- },
|
|
|
- // 新的筛选相关方法
|
|
|
- openFilterPanel() {
|
|
|
- this.showFilterPanel = true;
|
|
|
- },
|
|
|
-
|
|
|
- closeFilterPanel() {
|
|
|
- this.showFilterPanel = false;
|
|
|
- },
|
|
|
- selectPrice(value) {
|
|
|
- this.priceType = value
|
|
|
- },
|
|
|
-
|
|
|
- // 切换价格筛选标签
|
|
|
- switchPriceTab(value) {
|
|
|
- if (this.priceType === value) return;
|
|
|
-
|
|
|
- this.priceType = value;
|
|
|
- this.resetList();
|
|
|
- this.getGoodsList();
|
|
|
- },
|
|
|
-
|
|
|
- selectStock(value) {
|
|
|
- this.hasStock = value
|
|
|
- },
|
|
|
- selectFlowerNum(value) {
|
|
|
- this.flowerNum = value
|
|
|
- },
|
|
|
- clearFilters() {
|
|
|
-
|
|
|
- // 清空后立即更新筛选变量
|
|
|
- this.hasStock = -1;
|
|
|
- this.flowerNum = 0;
|
|
|
-
|
|
|
- // 关闭筛选面板
|
|
|
- this.closeFilterPanel();
|
|
|
-
|
|
|
- // 触发搜索
|
|
|
- this.resetList();
|
|
|
- this.getGoodsList();
|
|
|
- },
|
|
|
- confirmFilters() {
|
|
|
- // 关闭筛选面板
|
|
|
- this.closeFilterPanel();
|
|
|
- // 重新加载数据
|
|
|
- this.resetList();
|
|
|
- this.getGoodsList();
|
|
|
- },
|
|
|
-
|
|
|
- // 打标签弹框相关方法
|
|
|
- printLabel(item){
|
|
|
- this.currentPrintItem = item;
|
|
|
- this.printQuantity = '';
|
|
|
- this.showPrintModal = true;
|
|
|
- },
|
|
|
-
|
|
|
- closePrintModal(){
|
|
|
- this.showPrintModal = false;
|
|
|
- this.currentPrintItem = {};
|
|
|
- this.printQuantity = '';
|
|
|
- },
|
|
|
-
|
|
|
- confirmPrint(){
|
|
|
- if (!this.printQuantity || this.printQuantity <= 0) {
|
|
|
- this.$msg('请输入有效的打印数量');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- let that = this;
|
|
|
- print({id: this.currentPrintItem.id, num: this.printQuantity}).then(res => {
|
|
|
- if(res.code == 1){
|
|
|
- that.$msg(res.msg);
|
|
|
- that.closePrintModal();
|
|
|
- } else {
|
|
|
- that.$msg(res.msg || '打印失败');
|
|
|
- }
|
|
|
- }).catch(err => {
|
|
|
- that.$msg('打印请求失败');
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- clearInput(){
|
|
|
- this.printQuantity = '';
|
|
|
- },
|
|
|
- getStockChange(item){
|
|
|
- this.$util.pageTo({url: "/admin/goods/stockChange?id="+item.id+'&name='+item.name})
|
|
|
- },
|
|
|
- editDesc(item){
|
|
|
- this.$util.pageTo({url: "/admin/goods/picTextAdd-Edit?gId="+item.id+'&name='+item.name})
|
|
|
- },
|
|
|
- moreAction(item) {
|
|
|
- this.currentInfo = item
|
|
|
- this.$refs.rightShowMore.open('top')
|
|
|
- },
|
|
|
- closeRightShow() {
|
|
|
- this.$refs.rightShowMore.close()
|
|
|
- },
|
|
|
- shareGoods() {
|
|
|
- const that = this
|
|
|
- const id = this.currentInfo.id
|
|
|
- const account = that.loginInfo.shopId
|
|
|
- const categoryId = this.currentInfo.categoryId || this.catId || 0
|
|
|
- this.closeRightShow()
|
|
|
- // 商城花束详情需 account(门店)才能通过 /hd/info 建立会员 custom,与 category/mall 页跳转一致
|
|
|
- let sharePath = 'pages/goods/detail?id=' + id + '&account=' + account + '&shopId=' + account
|
|
|
- if (Number(categoryId) > 0) {
|
|
|
- sharePath += '&categoryId=' + categoryId
|
|
|
- }
|
|
|
- // #ifdef MP-WEIXIN
|
|
|
- uni.navigateToMiniProgram({
|
|
|
- appId: that.getAppIdList.mall.miniAppId,
|
|
|
- path: sharePath,
|
|
|
- envVersion: process.env.NODE_ENV === 'development' ? 'develop' : 'release',
|
|
|
- extraData: {
|
|
|
- shopId: account,
|
|
|
- id: 0,
|
|
|
- name: ''
|
|
|
- },
|
|
|
- success() {}
|
|
|
- })
|
|
|
- // #endif
|
|
|
- // #ifdef APP-PLUS
|
|
|
- if (plus.runtime.isApplicationExist({ pname: 'com.tencent.mm', action: 'weixin://' })) {
|
|
|
- plus.share.getServices(function(s) {
|
|
|
- let sweixin
|
|
|
- for (let i = 0; i < s.length; i++) {
|
|
|
- if (s[i].id == 'weixin') {
|
|
|
- sweixin = s[i]
|
|
|
- }
|
|
|
- }
|
|
|
- const miniOriginalId = that.dictInfo.miniOriginalId && that.dictInfo.miniOriginalId.current && that.dictInfo.miniOriginalId.current.mall ? that.dictInfo.miniOriginalId.current.mall : ''
|
|
|
- if (sweixin) {
|
|
|
- sweixin.launchMiniProgram({
|
|
|
- id: miniOriginalId,
|
|
|
- path: sharePath,
|
|
|
- type: 0
|
|
|
- })
|
|
|
- } else {
|
|
|
- that.$msg('没有找到微信服务')
|
|
|
- }
|
|
|
- }, function() {
|
|
|
- that.$msg('没有找到微信服务哦')
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.$msg('请安装微信,再打开小程序')
|
|
|
- }
|
|
|
- // #endif
|
|
|
- },
|
|
|
- closePoster() {
|
|
|
- this.$refs.itemPosterPopup.close()
|
|
|
- },
|
|
|
- getMyPoster() {
|
|
|
- this.closeRightShow()
|
|
|
- const that = this
|
|
|
- uni.showLoading({ mask: true })
|
|
|
- getPoster({ id: this.currentInfo.id, env_version: this.$util.getMiniEnvVersion() }).then(res => {
|
|
|
- uni.hideLoading()
|
|
|
- if (res.code == 1) {
|
|
|
- that.posterUrl = res.data.imgUrl
|
|
|
- that.$refs.itemPosterPopup.open()
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- downloadImg() {
|
|
|
- const that = this
|
|
|
- uni.downloadFile({
|
|
|
- url: this.posterUrl,
|
|
|
- success: (res) => {
|
|
|
- if (res.statusCode === 200) {
|
|
|
- uni.saveImageToPhotosAlbum({
|
|
|
- filePath: res.tempFilePath,
|
|
|
- success() {
|
|
|
- that.$refs.itemPosterPopup.close()
|
|
|
- uni.showToast({ title: '保存成功' })
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- goBottom(){
|
|
|
- if (!this.list.finished) {
|
|
|
- this.getGoodsList().then((res) => {
|
|
|
- uni.stopPullDownRefresh();
|
|
|
- });
|
|
|
- } else {
|
|
|
- uni.stopPullDownRefresh();
|
|
|
- }
|
|
|
- },
|
|
|
- addGoods(){
|
|
|
- this.$util.pageTo({url:"/admin/goods/add"})
|
|
|
- },
|
|
|
- edit(id){
|
|
|
- this.$util.pageTo({ url: "/admin/goods/detail", query: { id: id } })
|
|
|
- },
|
|
|
- getCategoryData() {
|
|
|
- categoryListInfo().then(res => {
|
|
|
- this.tabbar = res.data;
|
|
|
- if(this.tabbar && this.tabbar[0] && this.tabbar[0].id){
|
|
|
- this.catId = this.tabbar[0].id
|
|
|
- this.catName = this.tabbar[0].categoryName
|
|
|
- this.getGoodsList()
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- changeSearchType(i){
|
|
|
- this.searchType=i
|
|
|
- this.searchFn()
|
|
|
- },
|
|
|
- searchFn(){
|
|
|
- // 清除之前的定时器
|
|
|
- if (this.searchTimer) {
|
|
|
- clearTimeout(this.searchTimer);
|
|
|
- this.searchTimer = null;
|
|
|
- }
|
|
|
-
|
|
|
- // 1. 首次点击搜索框:searchText 为空,lastSearchText 也为空 → 跳过搜索
|
|
|
- if (this.$util.isEmpty(this.searchText) && this.$util.isEmpty(this.lastSearchText)) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 2. 用户输入后清空:searchText 为空,但 lastSearchText 有值 → 恢复分类筛选
|
|
|
- if (this.$util.isEmpty(this.searchText) && !this.$util.isEmpty(this.lastSearchText)) {
|
|
|
- this.lastSearchText = '';
|
|
|
- this.resetList();
|
|
|
- this.getGoodsList();
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 4. 重复相同搜索:searchText 与 lastSearchText 相同 → 跳过搜索
|
|
|
- if (this.searchText === this.lastSearchText) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 3. 正常输入搜索:searchText 有值且与 lastSearchText 不同 → 执行搜索(1秒后触发)
|
|
|
- if (!this.$util.isEmpty(this.searchText)) {
|
|
|
- this.searchTimer = setTimeout(() => {
|
|
|
- this.lastSearchText = this.searchText;
|
|
|
- this.catId = 0
|
|
|
- this.catName = ""
|
|
|
- this.currentTab = 0
|
|
|
- this.resetList()
|
|
|
- this.getGoodsList()
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
- },
|
|
|
- getGoodsList() {
|
|
|
- return getCategoryToGoods({page: this.list.page,searchText:this.lastSearchText,searchType:this.searchType,catId:this.catId, flowerNum:this.flowerNum, priceType:this.priceType, hasStock:this.hasStock,requestType:'goodsList'}).then(res => {
|
|
|
- this.completes(res)
|
|
|
- })
|
|
|
- },
|
|
|
- swichTab(e, item) {
|
|
|
- let cur = e.currentTarget.dataset.current;
|
|
|
- if (this.currentTab == cur) {
|
|
|
- return false;
|
|
|
- } else {
|
|
|
- this.currentTab = cur;
|
|
|
- this.catId = item.id;
|
|
|
- this.catName = item.categoryName
|
|
|
- this.resetList();
|
|
|
- this.getGoodsList();
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
-.app-content {
|
|
|
- min-height: calc(100vh - 80upx);
|
|
|
- background-color: #fff;
|
|
|
-}
|
|
|
-
|
|
|
-/* 现代化标签样式 */
|
|
|
-.modern-tabs-container {
|
|
|
- padding: 0;
|
|
|
- background-color: #f8f9fa;
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.modern-tabs {
|
|
|
- display: flex;
|
|
|
- background-color: #ffffff;
|
|
|
- padding: 6upx;
|
|
|
- box-shadow: 0 2upx 12upx rgba(0, 0, 0, 0.06);
|
|
|
- border: 2upx solid #f0f2f5;
|
|
|
- position: relative;
|
|
|
- z-index: 5;
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.modern-tab {
|
|
|
- flex: 1;
|
|
|
- text-align: center;
|
|
|
- padding: 22upx 0;
|
|
|
- position: relative;
|
|
|
- transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
|
|
|
- border-radius: 12upx;
|
|
|
- margin: 0 2upx;
|
|
|
- background-color: #e4e6e9; /* 未选中态背景 */
|
|
|
- border: 2upx solid #e4e6e9; /* 未选中态边框 */
|
|
|
- box-shadow: none;
|
|
|
-
|
|
|
- .tab-content {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .tab-text {
|
|
|
- font-size: 30upx;
|
|
|
- color: #666;
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
-
|
|
|
- &.active {
|
|
|
- background: linear-gradient(135deg, #34d399 0%, #09C567 100%); /* 渐变背景 */
|
|
|
- box-shadow: 0 4upx 12upx rgba(16, 185, 129, 0.25); /* 柔和外发光 */
|
|
|
- transform: none;
|
|
|
- border-color: rgba(16, 185, 129, 0.25);
|
|
|
-
|
|
|
- .tab-text {
|
|
|
- color: #ffffff;
|
|
|
- font-weight: 700;
|
|
|
- font-size: 30upx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* H5 未选中态悬停效果(其它端不影响) */
|
|
|
- &:not(.active):hover {
|
|
|
- background-color: #f6f7f9;
|
|
|
- border-color: #e9ecef;
|
|
|
- }
|
|
|
-
|
|
|
- &:active {
|
|
|
- transform: scale(0.98);
|
|
|
- }
|
|
|
-}
|
|
|
-page {
|
|
|
- background: #fff;
|
|
|
-}
|
|
|
-::-webkit-scrollbar {
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- color: transparent;
|
|
|
-}
|
|
|
-.tab-view {
|
|
|
- height: 100vh;
|
|
|
- width: 200upx;
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- z-index: 10;
|
|
|
- background-color: #f0f2f6;
|
|
|
- padding-bottom:120upx;
|
|
|
- .tab-bar-item {
|
|
|
- width: 200upx;
|
|
|
- height: 100upx;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 26upx;
|
|
|
- color: #444;
|
|
|
- font-weight: 400;
|
|
|
- padding-left:4upx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .active {
|
|
|
- position: relative;
|
|
|
- color: $mainColor;
|
|
|
- font-size: 26upx;
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
- .active::before {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- border-left: 8upx solid $mainColor;
|
|
|
- height: 100%;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
-}
|
|
|
-.right-box {
|
|
|
- width: 100%;
|
|
|
- height:100vh;
|
|
|
- position: fixed;
|
|
|
- padding-left:220upx;
|
|
|
- padding-bottom:120upx;
|
|
|
- box-sizing: border-box;
|
|
|
- left: 0;
|
|
|
- .page-view {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-bottom: env(safe-area-inset-bottom);
|
|
|
- .bottom-spacer {
|
|
|
- height: 160upx; /* 预留底部空间,避免遮挡操作按钮 */
|
|
|
- }
|
|
|
- .goods-list {
|
|
|
- margin: 40upx 0;
|
|
|
- .goods-list-top {
|
|
|
- position: relative;
|
|
|
- @include disFlex(flex-start, flex-start);
|
|
|
- }
|
|
|
- .goods-list-bottom {
|
|
|
- width: 96%;
|
|
|
- margin-top: 16upx;
|
|
|
- color: rgb(180, 178, 178);
|
|
|
- flex-wrap: wrap;
|
|
|
- gap: 12upx 0;
|
|
|
- text{
|
|
|
- border:1px solid rgb(196, 193, 193);
|
|
|
- border-radius: 15upx;
|
|
|
- font-size:22upx;
|
|
|
- padding:12upx 18upx;
|
|
|
- }
|
|
|
- }
|
|
|
- .img-blo {
|
|
|
- width: 130upx;
|
|
|
- height: 130upx;
|
|
|
- margin-right: 20upx;
|
|
|
- & > img {
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .sold-out{
|
|
|
- z-index:10;
|
|
|
- width:130upx;
|
|
|
- height:130upx;
|
|
|
- background-color:black;
|
|
|
- position:absolute;
|
|
|
- top:0;
|
|
|
- left:0;
|
|
|
- opacity: 0.5;
|
|
|
- color:white;
|
|
|
- text-align:center;
|
|
|
- .sold-out-xj{
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- height: 130upx;
|
|
|
- font-size:24upx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- .goods-det {
|
|
|
- width: calc(100% - 150upx);
|
|
|
- font-size: 28upx;
|
|
|
- .operate-wrap {
|
|
|
- @include disFlex(flex-end, space-between);
|
|
|
- }
|
|
|
- .operate-icon-wrap {
|
|
|
- left: -20upx;
|
|
|
- }
|
|
|
- .goods-name {
|
|
|
- margin-bottom: 10upx;
|
|
|
- }
|
|
|
- .goods-sales {
|
|
|
- color: $fontColor3;
|
|
|
- font-size: 24upx;
|
|
|
- }
|
|
|
- .goods-price {
|
|
|
- color: #ff2842;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- // 价格容器样式
|
|
|
- .price-container {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 15upx;
|
|
|
- }
|
|
|
-
|
|
|
- // 原价格划线样式
|
|
|
- .original-price {
|
|
|
- color: #999999;
|
|
|
- margin-left: 10upx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.app-footer {
|
|
|
- justify-content: space-between;
|
|
|
- .btn-list {
|
|
|
- width: 100%;
|
|
|
- &:first-child {
|
|
|
- border-left: 0;
|
|
|
- }
|
|
|
- .admin-button-com {
|
|
|
- width: 160upx;
|
|
|
- padding-top: 16upx;
|
|
|
- padding-bottom: 16upx;
|
|
|
- float:right;
|
|
|
- margin-right:30upx;
|
|
|
- }
|
|
|
- }
|
|
|
- .other-btn {
|
|
|
- color: $fontColor2;
|
|
|
- .iconfont {
|
|
|
- font-size: 24upx;
|
|
|
- color: $fontColor3;
|
|
|
- transform: scale(0.4);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.input-wrap {
|
|
|
- display: flex;
|
|
|
- padding: 10upx 10upx 12upx 13upx;
|
|
|
- .search-bar {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes filterDotBlink {
|
|
|
- 0%, 100% {
|
|
|
- background-color: #ffffff;
|
|
|
- }
|
|
|
- 50% {
|
|
|
- background-color: #ff3b30;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/* 筛选面板样式 */
|
|
|
-.filter-overlay {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background-color: rgba(0, 0, 0, 0.5);
|
|
|
- z-index: 9999;
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- justify-content: center;
|
|
|
-}
|
|
|
-
|
|
|
-.filter-panel {
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 0 0 20upx 20upx; /* 只保留下边圆角 */
|
|
|
- width: 100%; /* 铺满宽度 */
|
|
|
- max-height: 80vh;
|
|
|
- overflow-y: auto;
|
|
|
- animation: slideDown 0.3s ease-out;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes slideDown {
|
|
|
- from {
|
|
|
- opacity: 0;
|
|
|
- transform: translateY(-50upx);
|
|
|
- }
|
|
|
- to {
|
|
|
- opacity: 1;
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.filter-header {
|
|
|
- text-align: center;
|
|
|
- padding: 16upx 0;
|
|
|
- font-size: 32upx;
|
|
|
- font-weight: bold;
|
|
|
- border-bottom: 1upx solid #f0f0f0;
|
|
|
- color: #333;
|
|
|
-}
|
|
|
-
|
|
|
-.filter-section {
|
|
|
- padding: 30upx 40upx;
|
|
|
- border-bottom: 1upx solid #f0f0f0;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- border-bottom: none;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.filter-title {
|
|
|
- font-size: 28upx;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 20upx;
|
|
|
-}
|
|
|
-
|
|
|
-.filter-options {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- gap: 20upx;
|
|
|
-}
|
|
|
-
|
|
|
-.filter-option {
|
|
|
- padding: 16upx 32upx;
|
|
|
- border: 2upx solid #e0e0e0;
|
|
|
- border-radius: 25upx;
|
|
|
- font-size: 26upx;
|
|
|
- color: #666;
|
|
|
- background-color: #fff;
|
|
|
- text-align: center;
|
|
|
- min-width: 120upx;
|
|
|
- transition: all 0.3s ease;
|
|
|
-
|
|
|
- &.active {
|
|
|
- border-color: #52c41a;
|
|
|
- background-color: #f6ffed;
|
|
|
- color: #52c41a;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.filter-actions {
|
|
|
- display: flex;
|
|
|
- padding: 30upx 40upx;
|
|
|
- gap: 20upx;
|
|
|
-}
|
|
|
-
|
|
|
-.filter-action-btn {
|
|
|
- flex: 1;
|
|
|
- padding: 14upx 0;
|
|
|
- border-radius: 12upx;
|
|
|
- font-size: 28upx;
|
|
|
- border: none;
|
|
|
- font-weight: 600;
|
|
|
-
|
|
|
- &.clear-btn {
|
|
|
- background-color: #f5f5f5;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- &.confirm-btn {
|
|
|
- background-color: #09C567;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/* 打标签弹框样式 */
|
|
|
-.print-modal-overlay {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background-color: rgba(0, 0, 0, 0.5);
|
|
|
- z-index: 10000;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-}
|
|
|
-
|
|
|
-.print-modal-content {
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 20upx;
|
|
|
- width: 80%;
|
|
|
- max-width: 600upx;
|
|
|
- animation: scaleIn 0.3s ease-out;
|
|
|
- box-shadow: 0 8upx 24upx rgba(0, 0, 0, 0.15);
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes scaleIn {
|
|
|
- from {
|
|
|
- opacity: 0;
|
|
|
- transform: scale(0.8);
|
|
|
- }
|
|
|
- to {
|
|
|
- opacity: 1;
|
|
|
- transform: scale(1);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.print-modal-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 24upx 24upx;
|
|
|
- border-bottom: 1upx solid #f0f0f0;
|
|
|
-}
|
|
|
-
|
|
|
-.print-modal-title {
|
|
|
- font-size: 32upx;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
-}
|
|
|
-
|
|
|
-.print-modal-close {
|
|
|
- font-size: 40upx;
|
|
|
- color: #999;
|
|
|
- font-weight: 300;
|
|
|
- line-height: 1;
|
|
|
- cursor: pointer;
|
|
|
- transition: color 0.3s ease;
|
|
|
-
|
|
|
- &:active {
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.print-modal-body {
|
|
|
- padding: 30upx 24upx;
|
|
|
-}
|
|
|
-
|
|
|
-.print-modal-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 24upx;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.print-modal-label {
|
|
|
- font-size: 28upx;
|
|
|
- color: #666;
|
|
|
- font-weight: 500;
|
|
|
- min-width: 140upx;
|
|
|
-}
|
|
|
-
|
|
|
-.print-modal-value {
|
|
|
- font-size: 28upx;
|
|
|
- color: #333;
|
|
|
- flex: 1;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
-}
|
|
|
-
|
|
|
-.print-modal-input {
|
|
|
- flex: 1;
|
|
|
- padding: 0;
|
|
|
- height: 80upx;
|
|
|
- border: 2upx solid #e0e0e0;
|
|
|
- border-radius: 8upx;
|
|
|
- font-size: 36upx;
|
|
|
- color: #333;
|
|
|
- background-color: #fafafa;
|
|
|
- transition: border-color 0.3s ease;
|
|
|
- text-align: center;
|
|
|
- line-height: 80upx;
|
|
|
-
|
|
|
- &::placeholder {
|
|
|
- text-align: center;
|
|
|
- color: #ccc;
|
|
|
- }
|
|
|
-
|
|
|
- &:focus {
|
|
|
- border-color: #09C567;
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.print-modal-footer {
|
|
|
- display: flex;
|
|
|
- gap: 16upx;
|
|
|
- padding: 24upx 24upx;
|
|
|
- border-top: 1upx solid #f0f0f0;
|
|
|
-}
|
|
|
-
|
|
|
-.print-modal-btn {
|
|
|
- flex: 1;
|
|
|
- padding: 16upx 0;
|
|
|
- border-radius: 12upx;
|
|
|
- font-size: 28upx;
|
|
|
- border: none;
|
|
|
- font-weight: 600;
|
|
|
- transition: all 0.3s ease;
|
|
|
-
|
|
|
- &.cancel-btn {
|
|
|
- background-color: #f5f5f5;
|
|
|
- color: #666;
|
|
|
-
|
|
|
- &:active {
|
|
|
- background-color: #e8e8e8;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.confirm-btn {
|
|
|
- background-color: #09C567;
|
|
|
- color: #fff;
|
|
|
-
|
|
|
- &:active {
|
|
|
- background-color: #07A850;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.class-popup-style {
|
|
|
- z-index: 999999;
|
|
|
-}
|
|
|
-
|
|
|
-.action-popup-container {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr 1fr;
|
|
|
- gap: 24upx;
|
|
|
- padding: 50upx 40upx 60upx 40upx;
|
|
|
- max-height: 99vh;
|
|
|
- overflow-y: auto;
|
|
|
- width: 92vw;
|
|
|
- max-width: 650upx;
|
|
|
- margin: 0 auto;
|
|
|
-
|
|
|
- .action-button-item.cancel {
|
|
|
- grid-column: 1 / -1;
|
|
|
- margin-top: 30upx;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.action-button {
|
|
|
- width: 100%;
|
|
|
- height: 120upx;
|
|
|
- border: 2upx solid #d0d7de;
|
|
|
- border-radius: 16upx;
|
|
|
- background: #ffffff;
|
|
|
- color: #24292f;
|
|
|
- font-size: 34upx;
|
|
|
- font-weight: 600;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- &.cancel {
|
|
|
- background: #f6f8fa;
|
|
|
- color: #656d76;
|
|
|
- font-size: 32upx;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-</style>
|