food_wechat/App.vue

<script>
	export default {
		// 数据初始化
		onLaunch: function() {
			//异步加载商铺信息
			if (Object.keys(this.$store.state.shopCon).length === 0) {
				this.$store.dispatch('fetchShopCon')
			}
			//异步加载站点列表
			if (this.$store.state.siteList.length === 0) {
				this.$store.dispatch('fetchSiteList')
			}
			//异步加载分类列表
			if (this.$store.state.menuList.length === 0) {
				this.$store.dispatch('fetchMenuList')
			}
			// 创建一个数组存放两个需要等待的异步操作的 Promise
			const promises = [];
			//异步获取spu列表
			if (this.$store.state.spuList.length === 0) {
				promises.push(this.$store.dispatch('fetchSpuList'))
			}
			//异步获取sku列表
			if (this.$store.state.skuList.length === 0) {
				promises.push(this.$store.dispatch('fetchSkuList'))
			}
			//等sku spu获取全部数据之后 
			Promise.all(promises).then(() => {
				this.$store.commit('addMinPriceToSpuList') //给spu添加最低价格字段
				this.$store.commit('addSkuGToSpuList') //给spu添加 对应sku  即skuG字段
			})
		},
		// 当应用程序被带到前台或对用户可见时调用
		onShow: function() {},
		// 当应用程序被隐藏或最小化时调用
		onHide: function() {},
		methods: {

		},
		watch: {},
	}
</script>

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";

	body {
		background-color: #f5f5f5;
		color: $uni-text-color;
		font-size: $uni-font-size-sm;
	}

	/*public*/
	.ls {
		background-color: #007aff;
	}

	.qs {
		background-color: #3F536E;
	}

	.bg-m {
		background-color: $uni-color-error;
	}

	.bg-w {
		background-color: white;
	}

	.bg-g {
		background-color: #eee;
	}

	.bg-mg {
		background-color: #888;
	}

	.bg-b {
		background-color: #383838;
	}

	.flex {
		display: flex;
	}

	//垂直排列
	.column {
		flex-direction: column;
	}

	//主轴左对齐
	.ml {
		justify-content: flex-start
	}

	//主轴右对齐
	.mr {
		justify-content: flex-end
	}

	//主轴两端对齐
	.msb {
		justify-content: space-between
	}

	//主轴 居中对齐
	.mc {
		justify-content: center
	}

	//主轴 等距
	.mse {
		justify-content: space-evenly
	}

	//主轴 元素两侧平分
	.msa {
		justify-content: space-around
	}

	//交叉轴 填满
	.man {
		align-items: normal
	}

	//交叉轴 上对齐
	.mu {
		align-items: flex-start
	}

	//交叉轴 下对齐
	.md {
		align-items: flex-end
	}

	//交叉轴 居中对齐
	.mac {
		align-items: center
	}

	//交叉轴 第一行最高的基线对齐
	.mub {
		align-items: baseline
	}


	.flex1 {
		flex: 1;
	}

	.flex2 {
		flex: 2;
	}

	.flex3 {
		flex: 3;
	}

	.flex4 {
		flex: 4;
	}

	.boxshadow {
		box-shadow: 0px 4rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.border {
		border: solid 0.1rpx $uni-border-color;
	}

	.border4 {
		border: solid 4rpx $uni-border-color;
	}

	.border-g {
		border-color: #eee;
	}

	.border-m {
		border-color: $uni-color-error;
	}

	.borderno {
		border: none;
	}

	.borderB {
		border-bottom: solid 0.1px $uni-border-color;
	}

	.rad-c {
		border-radius: 50%;
	}

	.rad32 {
		border-radius: 32rpx;
	}

	.rad16 {
		border-radius: 16rpx;
	}

	.radLT16 {
		border-top-left-radius: 16rpx;
	}

	.radRT16 {
		border-top-right-radius: 16rpx;
	}

	.rad8 {
		border-radius: 8rpx;
	}

	.radLT8 {
		border-top-left-radius: 8rpx;
	}

	.radRT8 {
		border-top-right-radius: 8rpx;
	}

	.ofh {
		overflow: hidden;
	}

	.ofa {
		overflow: auto;
	}

	.disno {
		display: none;
	}

	.tc {
		text-align: center;
	}

	.fb {
		font-weight: bold;
	}

	.l-h-18 {
		line-height: 1.8em;
	}

	.l-h-12 {
		line-height: 1.2em;
	}

	.fz24 {
		font-size: $uni-font-size-sm;
	}

	.fz28 {
		font-size: $uni-font-size-base;
	}

	.fz32 {
		font-size: $uni-font-size-lg;
	}

	.fz36 {
		font-size: 36rpx;
	}

	.fz44 {
		font-size: 44rpx;
	}

	.fci {
		color: $uni-text-color-inverse;
	}

	.fcb {
		color: $uni-text-color-disable
	}

	.fcm {
		color: $uni-color-error
	}

	.z-top {
		z-index: 10;
	}

	.vh100 {
		height: 100vh;
	}

	.h100 {
		height: 100%;
	}

	.vw100 {
		width: 100vw;
	}

	.w100 {
		width: 100%;
	}

	.w-80rpx {
		width: 80rpx;
	}

	.h-80rpx {
		height: 80rpx;
	}

	.m-24 {
		margin: 24rpx;
	}

	.m-l-24 {
		margin-left: 24rpx;
	}

	.m-r-24 {
		margin-right: 24rpx;
	}

	.m-t-24 {
		margin-top: 24rpx;
	}

	.m-b-24 {
		margin-bottom: 24rpx;
	}

	.p-24 {
		padding: 24rpx;
	}

	.p-l-24 {
		padding-left: 24rpx;
	}

	.p-r-24 {
		padding-right: 24rpx;
	}

	.p-t-24 {
		padding-top: 24rpx;
	}

	.p-b-24 {
		padding-bottom: 24rpx;
	}

	.m-12 {
		margin: 12rpx;
	}

	.m-l-12 {
		margin-left: 12rpx;
	}

	.m-r-12 {
		margin-right: 12rpx;
	}

	.m-t-12 {
		margin-top: 12rpx;
	}

	.m-b-12 {
		margin-bottom: 12rpx;
	}

	.p-12 {
		padding: 12rpx;
	}

	.p-l-12 {
		padding-left: 12rpx;
	}

	.p-r-12 {
		padding-right: 12rpx;
	}

	.p-t-12 {
		padding-top: 12rpx;
	}

	.p-b-12 {
		padding-bottom: 12px;
	}
</style>