nherp-shop/App.vue

<script>
import { getConfig, setConfig, getCart, getToken ,getCartNumber } from "./utils/auth";
import myconfig from "./utils/config";
import request from "./utils/request";
import {setTabBarBadge } from'./utils/util.js'

uni.$ajax = request; //挂载全局请求方法
export default {
	onShow() {

	},
  onLaunch: function () {

	  //#ifdef H5
		// var head = document.head || document.getElementsByTagName('head')[0];
		// let meta = document.createElement('meta')

		// meta.setAttribute('http-equiv', 'Content-Security-Policy')
		// meta.setAttribute('content', 'upgrade-insecure-requests')
		// console.log(meta)
		// head.appendChild(meta)


	// #endif
	// #ifdef MP-WEIXIN
	uni.getSetting({
	  success: res => {
	    if (res.authSetting['scope.userInfo']) {
	      // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
	      uni.getUserInfo({
	        success: res => {
	          // 可以将 res 发送给后台解码出 unionId
	          this.globalData.userInfo = res.userInfo; // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
	          // 所以此处加入 callback 以防止这种情况
	          if (this.userInfoReadyCallback) {
	            this.userInfoReadyCallback(res);
	          }
	        }
	      });
	    }
	  }
	});
	// #endif
    uni.getSystemInfo({  // 获取手机状态栏高度
      complete: res => {
        this.globalData.statusHeight = res.statusBarHeight;
        if (res.platform == "ios") {
          this.globalData.toBar = 44;
        } else if (res.platform == "android") {
          this.globalData.toBar = 48;
        } else {
          this.globalData.toBar = 44;
        }
      }
    }); // 设置默认主题颜色
    let config = getConfig()
    if (!config) {
		config = myconfig.themeList[5]
		setConfig(config)
	}
      //如果存在设置的主题 使用设置的主题
    uni.setTabBarStyle({
      selectedColor: config.color
    });
    config.tabList.forEach((v, index) => {
	  uni.setTabBarItem({
		//设置tabBar 首页图标
		index,
		selectedIconPath: v
	  });
    })
	if (!getToken()) {
	  	uni.navigateTo({
	  		url: '/pages/login/index1'
	  	})
		return
	  }
	/**
	 * 模拟获取购物车的数量 getCart
	 */
	let cart = getCart()
	let length = ''
	if(cart && getToken()){
		length = cart.length
		// length = getCartNumber()
		setTabBarBadge(length)
	}
  },
  globalData: {
    userInfo: null,
    statusHeight: '20', //状态栏高度
    toBar: '44', //标题栏高度
    newColor: myconfig.themeList[5].color, //小程序主题颜色
    config: myconfig.themeList,//主题图标
	themeObj: myconfig.themeList[5]
  },
  methods: {}
};
</script>
<style lang="scss">
@import "./app.css";
.uni-system-preview-image {
	z-index: 9999;
}
$default: #fa436a;
$red: #e54d42;
$orange: #f37b1d;
$yellow:  #fbbd08;
$olive:  #8dc63f;
$green:  #39b54a;
$cyan:  #1cbbb4;
$blue:  #0081ff;
$purple:  #6739b6;
$mauve:  #9c26b0;
$pink:  #e03997;
$brown:  #a5673f;
$grey:  #8799a3;
$black: #333333;
@mixin scss6($color){
	&.category  {
		.nav .cu-item.cur {
			color: $color;
			&::after {
				background-color: $color;
			}
		}
	}
	&.goodsDetails {
		.operation .btns .addcart {
			border-color: $color;
			color: $color;

		}
		.operation .btns .dingjin {
			background-color: $color;
		}
		.sku_tag .tag_s.active {
			    color: $color;
			    background: white;
			    border-color: $color;
		}
	}
	&.order {
		.goods_btns .btns {
			&.btn-item1 {
				border-color: $color;
				color: $color;
			}
		}
		.bottom_btn .btns,
		.morelist .title .quan {
			background: $color;
			&.shouhou {
				color: #fff;
				background-color: $color;
			}
			&.item1 {
				color: $color;
				border: 1upx solid $color;
				background: transparent;
			}
		}
		.iconfont,
		.weizhi_icon .icon-dizhi,
		.goods_title .price .t1,
		.morelist .right_title,
		.bottom_btn .moneys .price {
			color: $color;
		}
	}
	&.myaddress, &.editaddress  {
		.weizhi_icon .icon-dizhi,
		.moren .icon-moren {
			color: $color;
		}
		.save .btn {
			background: $color;
		}
	}
	&.cart {
		.bottom_all .left .delAll {
			border-color: $color;
		}
		.text-green, .line-green, .lines-green,
		.bottom_all .left .delAll,
		.empty,
		.nocart .iconfont {
			color: $color;
		}

		.bottom_all .rights .jiesuan {
			background: $color;
		}

	}
	&.jieguo {
		background-color: $color;
		.wancheng {
			    color:  $color;
			    border-color:  $color;
		}
		.icon-chenggong {
			 color:  $color;
		}
	}
	&.userbox {
		.iconfont {
			 color:  $color;
		}
	}
	&.order_list  {
		.iconfont,
		.order_type,
		.tabs_list.active-item {
			color: $color;
			font-weight: bold;
			.active {
				background-color: $color;
			}

		}
		.list_box .bottom .btns .pay{
			color: $color;
			border-color: $color;
			&.shouhou {
				color: #fff;
				background-color: $color;
			}
		}

	}
	&.evaluate {
		.goods_price .price-text {
			color: $color;
		}
	}
	&.mycollection {
		.iconfont  {
			color: $color;
		}
	}


}
.theme {
	&.default {
		@include scss6($default)
	}
	&.red {
		@include scss6($red)

	}
	&.orange {
		@include scss6($orange)

	}
	&.yellow {
		@include scss6($yellow)

	}
	&.olive {
		@include scss6($olive)

	}
	&.green {
		@include scss6($green)

	}
	&.cyan {
		@include scss6($cyan)

	}
	&.blue {
		@include scss6($blue)

	}
	&.purple {
		@include scss6($purple)

	}
	&.mauve {
		@include scss6($mauve)

	}
	&.pink {
		@include scss6($pink)

	}
	&.brown {
		@include scss6($brown)

	}
	&.grey {
		@include scss6($grey)

	}
	&.black {
		@include scss6($black)

	}
}
</style>