Fix:3116 【商城小程序】全国特产,搜索页面,右上角需要增加购物车按钮,右上角红点显示当前购物车商品数,点击进入购物车页面
This commit is contained in:
@@ -17,16 +17,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.search-box {
|
.search-box {
|
||||||
width: 686rpx;
|
width: 90%;
|
||||||
height: 60rpx;
|
height: 60rpx;
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 24rpx 0 32rpx;
|
padding: 0 24rpx 0 32rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background: #F7F7F7;
|
background: #F7F7F7;
|
||||||
border-radius: 30rpx;
|
border-radius: 30rpx;
|
||||||
|
|
||||||
input {
|
input {
|
||||||
width: 560rpx;
|
width: 540rpx;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -20,7 +20,11 @@
|
|||||||
<u-notice-bar duration="4000" @change="change" :text="recommendKeyword" :icon="' '" color="#999" fontSize="12" bgColor="transparent" direction="column"></u-notice-bar>
|
<u-notice-bar duration="4000" @change="change" :text="recommendKeyword" :icon="' '" color="#999" fontSize="12" bgColor="transparent" direction="column"></u-notice-bar>
|
||||||
</view>
|
</view>
|
||||||
</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>
|
||||||
<view v-if="historyKey.length" class="page-content">
|
<view v-if="historyKey.length" class="page-content">
|
||||||
<view
|
<view
|
||||||
@@ -113,6 +117,10 @@
|
|||||||
import {
|
import {
|
||||||
getSearchPageConfig
|
getSearchPageConfig
|
||||||
} from '@/api/search'
|
} from '@/api/search'
|
||||||
|
import {
|
||||||
|
getCartCount,
|
||||||
|
} from '@/api/store'
|
||||||
|
import { mapGetters } from 'vuex'
|
||||||
import {trim} from '@/utils'
|
import {trim} from '@/utils'
|
||||||
export default {
|
export default {
|
||||||
name: 'GoodSearch',
|
name: 'GoodSearch',
|
||||||
@@ -124,16 +132,33 @@ export default {
|
|||||||
search: '',
|
search: '',
|
||||||
historyKey: [],
|
historyKey: [],
|
||||||
rankingArr: [],
|
rankingArr: [],
|
||||||
recommendKeyword: []
|
recommendKeyword: [],
|
||||||
|
CartCount: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed: mapGetters(['isLogin', 'location', 'userInfo']),
|
||||||
mounted: function () {
|
mounted: function () {
|
||||||
this.getData()
|
this.getData()
|
||||||
|
this.getCartCount()
|
||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
this.getHistory()
|
this.getHistory()
|
||||||
},
|
},
|
||||||
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')
|
||||||
|
},
|
||||||
showHistory() {
|
showHistory() {
|
||||||
if(this.search) {
|
if(this.search) {
|
||||||
this.showkey = false
|
this.showkey = false
|
||||||
@@ -225,6 +250,22 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
|
.iconfont{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.item .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;
|
||||||
|
}
|
||||||
.good-search {
|
.good-search {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: #fff !important;
|
background: #fff !important;
|
||||||
@@ -232,7 +273,8 @@ export default {
|
|||||||
.header {
|
.header {
|
||||||
padding: 40rpx 32rpx 32rpx;
|
padding: 40rpx 32rpx 32rpx;
|
||||||
background: #F9F9F9;
|
background: #F9F9F9;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
.search-box {
|
.search-box {
|
||||||
width: 686rpx;
|
width: 686rpx;
|
||||||
height: 72rpx;
|
height: 72rpx;
|
||||||
|
|||||||
@@ -15,6 +15,11 @@
|
|||||||
mode="scaleToFill"
|
mode="scaleToFill"
|
||||||
@click="searchHandle"></image>
|
@click="searchHandle"></image>
|
||||||
</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>
|
||||||
<view class="line-location flex ai-center">
|
<view class="line-location flex ai-center">
|
||||||
<image :src="webUrl+'/20220903142929759087.png'" mode="scaleToFill"></image>
|
<image :src="webUrl+'/20220903142929759087.png'" mode="scaleToFill"></image>
|
||||||
@@ -84,6 +89,10 @@ import { fetchNormal, getCategory } from "@/api/store"
|
|||||||
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
||||||
import ProductWindow from '@/components/ProductWindow'
|
import ProductWindow from '@/components/ProductWindow'
|
||||||
import goCartMixin from '@/mixins/goCartMixins'
|
import goCartMixin from '@/mixins/goCartMixins'
|
||||||
|
import { mapGetters } from 'vuex'
|
||||||
|
import {
|
||||||
|
getCartCount,
|
||||||
|
} from '@/api/store'
|
||||||
export default {
|
export default {
|
||||||
name: 'NativeListPage',
|
name: 'NativeListPage',
|
||||||
components: {
|
components: {
|
||||||
@@ -92,6 +101,7 @@ export default {
|
|||||||
mixins: [pageListenMixins, goCartMixin],
|
mixins: [pageListenMixins, goCartMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
CartCount: 0,
|
||||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||||
keyword: '',
|
keyword: '',
|
||||||
dataList: [],
|
dataList: [],
|
||||||
@@ -103,13 +113,29 @@ export default {
|
|||||||
pageKeyId: ''
|
pageKeyId: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed: mapGetters(['isLogin', 'location', 'userInfo']),
|
||||||
onLoad(option) {
|
onLoad(option) {
|
||||||
const cityId = option.cityId
|
const cityId = option.cityId
|
||||||
this.cityId = cityId
|
this.cityId = cityId
|
||||||
this.pageKeyId = `goodsProductList_cityId_${cityId}`
|
this.pageKeyId = `goodsProductList_cityId_${cityId}`
|
||||||
this.init()
|
this.init()
|
||||||
|
this.getCartCount()
|
||||||
},
|
},
|
||||||
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')
|
||||||
|
},
|
||||||
init() {
|
init() {
|
||||||
const memCityName = uni.getStorageSync('cityName')
|
const memCityName = uni.getStorageSync('cityName')
|
||||||
if (memCityName.length) {
|
if (memCityName.length) {
|
||||||
@@ -181,14 +207,33 @@ export default {
|
|||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
@import "@/assets/css/product.less";
|
@import "@/assets/css/product.less";
|
||||||
|
.iconfont{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.item .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;
|
||||||
|
}
|
||||||
.pkg-product-list {
|
.pkg-product-list {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
|
|
||||||
.top-box {
|
.top-box {
|
||||||
height: 82rpx;
|
height: 82rpx;
|
||||||
background: #FF564A;
|
background: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #fff;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line-location {
|
.line-location {
|
||||||
|
|||||||
Reference in New Issue
Block a user