From 4282e1cc35d85e2f84fe37b7f51fde22b374c7c9 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期二, 24 二月 2026 11:27:18 +0800
Subject: [PATCH] 合并
---
mini-program/pagesA/pages/product-management/product-management.vue | 697 +++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 523 insertions(+), 174 deletions(-)
diff --git a/mini-program/pagesA/pages/product-management/product-management.vue b/mini-program/pagesA/pages/product-management/product-management.vue
index c7a8da5..4e1121b 100644
--- a/mini-program/pagesA/pages/product-management/product-management.vue
+++ b/mini-program/pagesA/pages/product-management/product-management.vue
@@ -1,67 +1,72 @@
<template>
- <view class="box">
- <!-- <view class="zhezhao"></view> -->
- <view class="head">
- <u-search
- placeholder="璇疯緭鍏ュ叧閿瘝"
- :showAction="false"
- bgColor="#F8F9FB"
- placeholderColor="#999999"
- searchIconSize="28"
- height="36"
- v-model="keyword" />
- <view class="head-cate">
- <u-tabs :list="list" lineColor="#004096" lineWidth="24" lineHeight="3"></u-tabs>
- </view>
- <view class="head-search">
- <view class="head-search-item">
- <text class="fontact">鎺掑簭</text>
- <u-icon name="arrow-up" color="#222222" size="14"></u-icon>
- <!-- <u-icon name="arrow-down" color="#777777" size="14"></u-icon> -->
+ <view class="mall">
+ <view class="mall-zz" v-show="show"></view>
+ <view class="head" :style="{ height: 'calc(' + (navHeight + ' + 188rpx)') }">
+ <view class="head-box">
+ <view :style="{ width: '100%', height: 10 + 'px' }"></view>
+ <view class="head-search":style="{ height: navHeight + 'px' }">
+ <view class="head-search-input">
+ <u-search placeholder="鎼滅储鍟嗗搧" height="30" searchIconColor="#999999" borderColor="#eeeeee"
+ bgColor="rgba(255,255,255,0.9)" @custom="search" :showAction="false" v-model="form.goodsName" @search="search" />
+ </view>
</view>
- <view class="head-search-item">
- <text>閫傜敤鍝佺墝</text>
- <u-icon name="arrow-down" color="#777777" size="14"></u-icon>
- </view>
- <view class="head-search-item">
- <text>绯诲垪</text>
- <u-icon name="arrow-down" color="#777777" size="14"></u-icon>
+ <view class="head-tabs">
+ <u-tabs lineColor="#E4001D" :list="list" @click="clickCate"></u-tabs>
</view>
</view>
- <!-- <view class="data">
- <view class="data-cate">
- <view class="data-cate-item active">鑷惀鍝佺墝</view>
- <view class="data-cate-item">闆锋矁</view>
- <view class="data-cate-item">娲嬮┈</view>
- <view class="data-cate-item">鏄熷厜</view>
- <view class="data-cate-item">涓仈</view>
- <view class="data-cate-item">涔呬繚鐢�</view>
+ <view class="head-list">
+ <view class="head-list-item" @click="openSearch(1)">
+ <text :style="form.sortInfo ? 'color: #222222; font-weight: 500;' : ''">{{form.sortName}}</text>
+ <u-icon name="arrow-down" color="#222222" size="13" v-if="form.sortInfo && !show"></u-icon>
+ <u-icon name="arrow-up" color="#222222" size="13" v-else-if="form.sortInfo && show === 1"></u-icon>
+ <u-icon name="arrow-down" color="#777777" size="13" v-else></u-icon>
</view>
- <view class="data-list">
- <view class="data-list-item active">
- <text>缁煎悎鎺掑簭</text>
- <image src="/static/icon/ic_sele1te@2x.png" mode="widthFix"></image>
- </view>
- <view class="data-list-item">
- <text>閿�閲忕敱楂樺埌浣�</text>
- </view>
- <view class="data-list-item">
- <text>浠锋牸鐢变綆鍒伴珮</text>
- </view>
+ <view class="head-list-item" @click="openSearch(2)">
+ <text :style="form.applicableBrandId ? 'color: #222222; font-weight: 500;' : ''">{{form.applicableBrandId ? form.applicableBrandName : '閫傜敤鍝佺墝'}}</text>
+ <u-icon name="arrow-down" color="#222222" size="13" v-if="form.applicableBrandId && !show"></u-icon>
+ <u-icon name="arrow-up" color="#222222" size="13" v-else-if="form.applicableBrandId && show === 2"></u-icon>
+ <u-icon name="arrow-down" color="#777777" size="13" v-else></u-icon>
</view>
- </view> -->
+ <view class="head-list-item" @click="openSearch(3)">
+ <text :style="form.seriesBrandId ? 'color: #222222; font-weight: 500;' : ''">{{form.seriesBrandId ? form.seriesBrandName : '绯诲垪'}}</text>
+ <u-icon name="arrow-down" color="#222222" size="13" v-if="form.seriesBrandId && !show"></u-icon>
+ <u-icon name="arrow-up" color="#222222" size="13" v-else-if="form.seriesBrandId && show === 3"></u-icon>
+ <u-icon name="arrow-down" color="#777777" size="13" v-else></u-icon>
+ </view>
+ </view>
+ <!-- 鎺掑簭 -->
+ <view class="list" v-if="show === 1">
+ <view :class="item.active ? 'list-item red' : 'list-item'" v-for="(item, index) in paixu" :key="index" @click="clickpx(index)">
+ <text>{{item.name}}</text>
+ <image src="/static/icon/ic_selete@2x.png" mode="widthFix" v-show="item.active"></image>
+ </view>
+ </view>
+ <!-- 鍝佺墝 -->
+ <view class="list" style="padding-top: 30rpx; box-sizing: border-box; justify-content: flex-start;" v-if="show === 2">
+ <view :class="item.active ? 'list-cate active' : 'list-cate'" v-for="(item, index) in pingpai" :key="index" @click="getXiLie(item.id, index)">{{item.name}}</view>
+ </view>
+ <!-- 绯诲垪 -->
+ <view class="list" v-if="show === 3">
+ <view :class="item.active ? 'list-item red' : 'list-item'" v-for="(item, index) in xilie" :key="index" @click="clickxl(index)">
+ <text>{{item.name}}</text>
+ <image src="/static/icon/ic_selete@2x.png" mode="widthFix" v-show="item.active"></image>
+ </view>
+ </view>
</view>
- <view class="list">
- <view class="list-item" v-for="(item, index) in 10" :key="index">
+ <view class="commodity">
+ <view class="commodity-wu" v-if="goodsList.length === 0">
+ <image src="/static/images/default_search@2x.png" mode="widthFix"></image>
+ </view>
+ <view class="list-item" v-else v-for="(item, i) in goodsList" :key="i" @click="jumpDetails(item.id)">
<view class="list-item-image">
- <image src="/static/logo.png" mode="widthFix"></image>
+ <image :src="item.imgurl?item.imgurl:'/static/icon/default2.png'" mode="widthFix"></image>
</view>
<view class="list-item-info">
- <view class="list-item-info-title">涓仈鑹剧瀹介娇 閫傜敤闆锋矁/涓仈/涔呬繚鐢�</view>
- <view class="price">楼398.00</view>
+ <view class="list-item-info-title">{{item.name}} 閫傜敤闆锋矁/涓仈/涔呬繚鐢�</view>
+ <view class="price">楼{{item.price}}</view>
<view class="list-item-info-label">
- <text>渚涜揣浠仿�100.00</text>
- <text>鏈簵閿�閲忥細219</text>
+ <text>渚涜揣浠仿{(item.exFactoryPrice || 0).toFixed(2)}}</text>
+ <text>鏈簵閿�閲忥細{{item.realSaleNum || 0}}</text>
</view>
</view>
</view>
@@ -70,24 +75,233 @@
</template>
<script>
+ import { mapState } from 'vuex'
export default {
+ computed: {
+ ...mapState(['navHeight', 'statusbarHeight','shopInfo', 'shopToken'])
+ },
+ watch: {
+ paixu: {
+ immediate: true,
+ deep: true,
+ handler(news, olds) {
+ let obj = news.filter(item => item.active)
+ this.form.sortInfo = obj[0].id
+ this.form.sortName = obj[0].name
+ }
+ },
+ pingpai: {
+ immediate: true,
+ deep: true,
+ handler(news, olds) {
+ if (news.length === 0) return;
+ let obj = news.filter(item => item.active)
+ this.form.applicableBrandId = obj[0].id
+ this.form.applicableBrandName = obj[0].name
+ }
+ },
+ xilie: {
+ immediate: true,
+ deep: true,
+ handler(news, olds) {
+ if (news.length === 0) return;
+ let obj = news.filter(item => item.active)
+ this.form.seriesBrandId = obj[0].id
+ this.form.seriesBrandName = obj[0].name
+ }
+ }
+ },
data() {
return {
keyword: '',
- list: [{
- name: '鍏ㄩ儴',
- }, {
- name: '鏀噸杞�',
- }, {
- name: '鎵樿疆'
- }, {
- name: '骞宠 杞�'
- }, {
- name: '瀵艰建'
- }, {
- name: '瀵煎悜杞�'
- }]
+ shop:{},
+ show: null,
+ list: [],
+ paixu: [
+ { name: '榛樿鎺掑簭', id: '', active: true },
+ { name: '缁煎悎鎺掑簭', id: 0, active: false },
+ { name: '閿�閲忕敱浣庡埌楂�', id: 1, active: false },
+ { name: '浠锋牸鐢变綆鍒伴珮', id: 2, active: false },
+ { name: '閿�閲忕敱楂樺埌浣�', id: 3, active: false },
+ { name: '浠锋牸鐢遍珮鍒颁綆', id: 4, active: false },
+ ],
+ pingpai: [],
+ xilie: [],
+ form: {
+ shopId:null,
+ sortInfo: '',
+ sortName: '',
+ categoryId: '',
+ type: 1,
+ goodsName: '',
+ seriesBrandId: '',
+ seriesBrandName: '',
+ applicableBrandId: '',
+ applicableBrandName: ''
+ },
+ next: true,
+ page: 1,
+ goodsList: [],
+ cardTotal: 0
};
+ },
+ onLoad() {
+ this.shop ={}
+ this.checkShopLogin()
+ this.shop = this.shopInfo || {}
+ this.form.shopId = this.shop.id
+ this.getCartNum()
+ this.getLabels()
+ this.getGoodsList()
+ },
+ onReachBottom() {
+ this.getGoodsList()
+ },
+ onShow() {
+ },
+ methods: {
+ getCartNum() {
+ this.$u.api.cartGoodsTypeNum()
+ .then(res => {
+ if (res.code === 200) {
+ this.cardTotal = res.data
+ }
+ })
+ },
+ search() {
+ this.page = 1
+ this.goodsList = []
+ this.next = true
+ this.getGoodsList()
+ },
+ addCard(e) {
+ this.$u.api.addCart({
+ goodsId: e.id,
+ goodsSkuId: e.skuResponsesList[0].id,
+ num: 1
+ }).then(res => {
+ if (res.code === 200) {
+ uni.showToast({ title: '娣诲姞鎴愬姛', icon: 'success' })
+ this.getCartNum()
+ }
+ })
+ },
+ jumpDetails(id) {
+ uni.navigateTo({
+ url: '/pages/details/details?id=' + id
+ })
+ },
+ // 鍟嗗搧
+ getGoodsList() {
+ if (!this.next) return;
+ this.$u.api.goodsPage({
+ capacity: 10,
+ page: this.page,
+ model: this.form
+ }).then(res => {
+ if (res.code === 200) {
+ res.data.records.forEach(item => {
+ item.minPrice = item.minPrice.toFixed(2).split('.')
+ })
+ this.goodsList.push(...res.data.records)
+ this.page++
+ if (this.goodsList.length === res.data.total) {
+ this.next = false
+ }
+ }
+ })
+ },
+ // 鑾峰彇鍒嗙被
+ getLabels() {
+ this.$u.api.getGoodsLabelsByType({ type: 0 })
+ .then(res => {
+ if (res.code === 200) {
+ res.data.unshift({ name: '鍏ㄩ儴', id: '' })
+ this.list = res.data
+ }
+ })
+ this.$u.api.getGoodsLabelsByType({ type: 14 })
+ .then(res => {
+ if (res.code === 200) {
+ res.data.forEach(item => {
+ item.active = false
+ })
+ res.data.unshift({ name: '鍏ㄩ儴', id: '', active: true })
+ this.pingpai = res.data
+ }
+ })
+ },
+ // 绯诲垪
+ getXiLie(parentId, i) {
+ this.xilie = []
+ this.pingpai.forEach((item, index) => {
+ item.active = index === i
+ })
+ if (!parentId) {
+ this.show = null
+ this.form.seriesBrandId = ''
+ this.form.seriesBrandName = ''
+ this.search()
+ return;
+ }
+ this.$u.api.getGoodsLabelsByType({ type: 15, parentId })
+ .then(res => {
+ if (res.code === 200) {
+ this.show = null
+ this.search()
+ if (res.data.length === 0) return uni.showToast({
+ title: '褰撳墠鍝佺墝涓嬫殏鏃犵郴鍒�',
+ icon: 'none'
+ })
+ res.data.forEach(item => {
+ item.active = false
+ })
+ res.data.unshift({ name: '鍏ㄩ儴', id: '', active: true })
+ this.xilie = res.data
+ }
+ })
+ },
+ // 鎵撳紑鎼滅储
+ openSearch(type) {
+ if (type === 3 && this.xilie.length === 0) return uni.showToast({
+ title: '褰撳墠鏆傛棤绯诲垪鏁版嵁',
+ icon: 'none'
+ })
+ if (type === this.show) {
+ this.show = null
+ } else {
+ this.show = type
+ }
+ },
+ // 閫夋嫨鎺掑簭
+ clickpx(i) {
+ this.paixu.forEach((item, index) => {
+ item.active = index === i
+ })
+ this.show = null
+ this.search()
+ },
+ // 閫夋嫨绯诲垪
+ clickxl(i) {
+ this.xilie.forEach((item, index) => {
+ item.active = index === i
+ })
+ this.show = null
+ this.search()
+ },
+ // 鍒囨崲鍒嗙被
+ clickCate(e) {
+ this.form.categoryId = e.id
+ this.search()
+ },
+ checkShopLogin(){
+ var that =this
+ if( this.shopInfo ==null || this.shopInfo.id==null || this.shopToken==null || this.shopToken==''){
+ uni.navigateTo({
+ url: '/pages/login/login'
+ })
+ }
+ }
}
}
</script>
@@ -98,131 +312,77 @@
}
</style>
<style lang="scss" scoped>
- .box {
+ .mall {
width: 100%;
- .zhezhao {
+ .mall-zz {
width: 100vw;
height: 100vh;
- background: rgba(0,0,0,0.5);
+ background-color: rgba(0,0,0,.5);
position: fixed;
top: 0;
left: 0;
z-index: 2;
}
- .head {
- width: 100%;
- height: 280rpx;
- padding: 20rpx 0 0 0;
- box-sizing: border-box;
- background: #FFFFFF;
- position: sticky;
- top: 0;
- left: 0;
- z-index: 99;
- .head-cate {
- width: 100%;
- height: 100rpx;
- padding: 0 30rpx;
- box-sizing: border-box;
+ .cart {
+ position: fixed;
+ right: 30rpx;
+ bottom: 100rpx;
+ z-index: 999;
+ .cart-box {
+ width: 88rpx;
+ height: 88rpx;
+ border-radius: 50%;
display: flex;
- align-items: flex-end;
- border-bottom: 1rpx solid #E5E5E5;
- }
- .head-search {
- width: 100%;
- height: 86rpx;
- padding: 0 30rpx;
- box-sizing: border-box;
- display: flex;
+ flex-direction: column;
align-items: center;
- justify-content: space-around;
- .head-search-item {
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- position: relative;
- .fontact {
- color: #222222 !important;
- font-weight: 500 !important;
- }
- text {
- font-weight: 400;
- font-size: 28rpx;
- color: #777777;
- margin-right: 8rpx;
- }
+ justify-content: center;
+ background: rgba(255,255,255,0.96);
+ box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0,0,0,0.16);
+ position: relative;
+ image {
+ width: 35rpx;
+ height: 35rpx;
}
- }
- .data {
- width: 100%;
- padding: 0 30rpx;
- box-sizing: border-box;
- background: #FFFFFF;
- border-radius: 0rpx 0rpx 24rpx 24rpx;
- .data-cate {
- width: 100%;
- padding: 30rpx 0 10rpx 0;
- box-sizing: border-box;
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- justify-content: space-between;
- .active {
- background: rgba(0,64,150,0.1) !important;
- font-weight: 500 !important;
- color: #004096 !important;
- }
- .data-cate-item {
- width: 216rpx;
- height: 72rpx;
- line-height: 72rpx;
- text-align: center;
- background: #F7F7F7;
- border-radius: 8rpx;
- font-weight: 400;
- font-size: 28rpx;
- color: #333333;
- margin-bottom: 20rpx;
- }
+ text {
+ font-weight: 400;
+ font-size: 20rpx;
+ color: #333333;
}
- .data-list {
- width: 100%;
- display: flex;
- flex-direction: column;
- .active {
- text {
- color: #004096 !important;
- }
- }
- .data-list-item {
- width: 100%;
- height: 98rpx;
- display: flex;
- align-items: center;
- justify-content: space-between;
- border-bottom: 1rpx solid #EEEEEE;
- text {
- font-weight: 400;
- font-size: 28rpx;
- color: #222222;
- }
- image {
- width: 24rpx;
- height: 18rpx;
- }
- }
+ .cart-num {
+ position: absolute;
+ top: -15rpx;
+ right: -15rpx;
+ border-radius: 50%;
+ width: 40rpx;
+ height: 40rpx;
+ line-height: 40rpx;
+ font-weight: 400;
+ font-size: 22rpx;
+ color: #FFFFFF;
+ text-align: center;
+ background: #E4001D;
}
}
}
- .list {
+ .commodity {
width: 100%;
- margin-top: 18rpx;
- padding: 0 30rpx;
- box-sizing: border-box;
display: flex;
- flex-direction: column;
- background-color: #ffffff;
+ align-items: center;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ padding: 20rpx 30rpx;
+ box-sizing: border-box;
+ .commodity-wu {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 240rpx;
+ image {
+ width: 320rpx;
+ height: 320rpx;
+ }
+ }
.list-item {
width: 100%;
padding: 28rpx 0;
@@ -274,6 +434,195 @@
}
}
}
+ .commodity-item {
+ width: 332rpx;
+ background-color: #ffffff;
+ margin-bottom: 20rpx;
+ .commodity-item-image {
+ width: 100%;
+ height: 336rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ image {
+ width: 100%;
+ }
+ }
+ .commodity-item-box {
+ width: 100%;
+ padding: 20rpx;
+ box-sizing: border-box;
+ .commodity-item-box-title {
+ font-weight: 600;
+ font-size: 30rpx;
+ color: #222222;
+ }
+ .commodity-item-box-price {
+ width: 100%;
+ display: flex;
+ align-items: baseline;
+ margin-top: 8rpx;
+ .commodity-item-box-price-a {
+ display: flex;
+ align-items: baseline;
+ margin-right: 8rpx;
+ text {
+ &:nth-child(1) {
+ font-weight: bold;
+ font-size: 32rpx;
+ color: #E4001D;
+ &::before {
+ content: '锟�';
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #E4001D;
+ }
+ }
+ &:nth-child(2) {
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #E4001D;
+ }
+ }
+ }
+ .commodity-item-box-price-b {
+ font-weight: 400;
+ font-size: 22rpx;
+ color: #999999;
+ }
+ }
+ .commodity-item-shou {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ text {
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #999999;
+ }
+ .commodity-item-shou-add {
+ width: 44rpx;
+ height: 44rpx;
+ background: #004096;
+ border-radius: 50%;
+ line-height: 44rpx;
+ text-align: center;
+ font-size: 30rpx;
+ color: #fff;
+ }
+ }
+ }
+ }
+ }
+ .head {
+ width: 100%;
+ position: sticky;
+ top: 0;
+ left: 0;
+ z-index: 999;
+ .head-box {
+ width: 100%;
+ background: linear-gradient(180deg, #C8F3FF 0%, #ffffff 100%);
+ // background: linear-gradient( 180deg, #FFD7C8 0%, #FFFFFF 100%);
+ .head-search {
+ width: 100%;
+ padding: 0 30rpx;
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ text {
+ font-weight: 500;
+ font-size: 40rpx;
+ color: #111111;
+ margin-right: 40rpx;
+ }
+ .head-search-input {
+ width: 100%;
+ }
+ }
+ .head-tabs {
+ width: 100%;
+ height: 100rpx;
+ display: flex;
+ align-items: flex-end;
+ border-bottom: 1rpx solid #E5E5E5;
+ }
+ }
+ .list {
+ width: 100%;
+ padding: 0 30rpx;
+ box-sizing: border-box;
+ background-color: #ffffff;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ border-radius: 0rpx 0rpx 24rpx 24rpx;
+ .active {
+ background: rgba(0,64,150,0.1) !important;
+ color: #004096 !important;
+ font-weight: 500 !important;
+ }
+ .list-cate {
+ width: 216rpx;
+ height: 72rpx;
+ line-height: 72rpx;
+ text-align: center;
+ background: #F7F7F7;
+ border-radius: 8rpx;
+ font-weight: 400;
+ font-size: 28rpx;
+ color: #333333;
+ margin-bottom: 24rpx;
+ margin-right: 20rpx;
+ &:last-child {
+ margin-right: 0 !important;
+ }
+ }
+ .red {
+ text {
+ color: #E4001D !important;
+ }
+ }
+ .list-item {
+ width: 100%;
+ height: 96rpx;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-bottom: 1rpx solid #EEEEEE;
+ text {
+ font-weight: 400;
+ font-size: 28rpx;
+ color: #222222;
+ }
+ image {
+ width: 24rpx;
+ height: 18rpx;
+ }
+ }
+ }
+ .head-list {
+ width: 100%;
+ height: 88rpx;
+ display: flex;
+ align-items: center;
+ background-color: #ffffff;
+ .head-list-item {
+ flex: 1;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text {
+ font-weight: 400;
+ font-size: 28rpx;
+ color: #777777;
+ margin-right: 8rpx;
+ }
+ }
+ }
}
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3