Fix:3116 【商城小程序】全国特产,搜索页面,右上角需要增加购物车按钮,右上角红点显示当前购物车商品数,点击进入购物车页面

This commit is contained in:
modendeveloper
2025-01-26 20:23:28 +08:00
parent 3d8bcb56d5
commit 7f5b1ad45c
+41 -1
View File
@@ -16,6 +16,11 @@
/> />
<text class="iconfont icon-sousuo" @click="submitForm"></text> <text class="iconfont icon-sousuo" @click="submitForm"></text>
</view> </view>
<view @click="goShoppingCart()" class="item animated bounceIn">
<view class="iconfont icon-gouwuche1">
<text class="num bg-color-lightred" v-if="CartCount > 0">{{ CartCount > 99 ? '99+' : CartCount }}</text>
</view>
</view>
</view> </view>
</form> </form>
<view v-if="showSearchTypeLayer" class="search-type-layer"> <view v-if="showSearchTypeLayer" class="search-type-layer">
@@ -182,6 +187,9 @@ import NP from 'number-precision'
import NoGoodData from '@/components/good/NoData' import NoGoodData from '@/components/good/NoData'
import Recommend from '@/components/Recommend' import Recommend from '@/components/Recommend'
import goCartMixin from '@/mixins/goCartMixins' import goCartMixin from '@/mixins/goCartMixins'
import {
getCartCount,
} from '@/api/store'
export default { export default {
name: 'GoodsList', name: 'GoodsList',
components: { components: {
@@ -192,6 +200,7 @@ export default {
mixins: [goCartMixin], mixins: [goCartMixin],
data () { data () {
return { return {
CartCount: 0,
webUrl: this.$VUE_APP_RESOURCES_URL, webUrl: this.$VUE_APP_RESOURCES_URL,
list: [], list: [],
query: { query: {
@@ -211,16 +220,31 @@ export default {
showSearchTypeLayer: false showSearchTypeLayer: false
} }
}, },
computed: mapGetters(['userInfo']), computed: mapGetters(['isLogin', 'location', 'userInfo']),
onLoad(e) { onLoad(e) {
const { s = '' } = this.$yroute.query const { s = '' } = this.$yroute.query
this.query.keyword = s this.query.keyword = s
this.getList() this.getList()
this.getCartCount()
}, },
onReachBottom() { onReachBottom() {
!this.loading && this.getList() !this.loading && this.getList()
}, },
methods: { methods: {
// 获取购物车数量
getCartCount () {
const isLogin = this.isLogin
if (isLogin) {
getCartCount({
numType: 0
}).then(res => {
this.CartCount = res.data.count
})
}
},
goShoppingCart() {
this.$yrouter.switchTab('/pages/cart')
},
toggleSearchType(value) { toggleSearchType(value) {
this.showSearchTypeLayer = value this.showSearchTypeLayer = value
}, },
@@ -311,6 +335,22 @@ export default {
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.iconfont{
position: relative;
}
.iconfont.icon-gouwuche1 .num {
right: -15rpx !important;
top: -15rpx!important;
font-size: 20rpx;
position: absolute;
width: 30rpx;
height: 30rpx;
background: #C52733 !important;
color: #fff;
border-radius: 50%;
text-align: center;
padding: 2rpx;
}
.productList { .productList {
min-height: 100vh; min-height: 100vh;
background-color: #f7f7f7; background-color: #f7f7f7;