1.店铺关注高亮逻辑处理
官方文档也没有给出如何实现收藏店铺后高亮的效果。
然后我实现的效果是这样的,因为给出的是字体图标,所以只能当字体颜色进行修改。
此外还要处理关注店铺时高亮,取消店铺时恢复原色(有一些逻辑小bug)。
完整代码:
<view class="goods_nav">
<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
</view>
------------------------------------------------------------------------------------
import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
------------------------------------------------------------------------------------
data(){
options: [{
icon: 'shop',
text: '店铺',
}],
}
methods: {
onClick(e) {
if (e.index == 1) {//用户点击了店铺
uni.showModal({
title: '提示',
content: '关注此店铺',
success(res) {
if (res.confirm) {
let uni_icons = document.getElementsByClassName('uni-icons')
uni_icons[1].style.color = 'red'
let text = document.getElementsByClassName('uni-tab__text')
text[1].style.color = 'red'
} else if (res.cancel) { //取消店铺和不关注店铺都恢复默认的颜色
console.log('用户点击取消');
uni.showModal({
title:'温馨提示',
content:'不再关注此店铺吗?',
showCancel:false,
success(res) {
if(res.confirm){
let uni_icons = document.getElementsByClassName('uni-icons')
uni_icons[1].style.color = '#646566'
let text = document.getElementsByClassName('uni-tab__text')
text[1].style.color = '#646566'
}
}
})
}
}
})
}
},
------------------------------------------------------------------------------------
导航置底
.goods_nav {
position: fixed;
bottom: 0;
width: 100%;
}
2.购物车逻辑处理
处理一件商品只能加入一次购物车,不能无限点击。
buttonClick(e) {
if(e.index==0){//如果点击的是购物车的button
this.options[2].info++
if(this.options[2].info>1){//处理一件商品只能加入一次购物车,不能无限点击
this.options[2].info=1
}
}else {//立即购买按钮
uni.switchTab({//跳转至购物车页面
url:'/pages/cart/cart'
})
}
}