food_wechat/App.vue

<script>
	export default {
		// 数据初始化
		onLaunch: function(options) {
			//从二维码获取站点id 商铺id
			this.$store.commit('setShopId', String(options.query.s))
			this.$store.commit('setSiteId', String(options.query.z))
			//异步加载商铺信息
			this.$store.dispatch('fetchShopCon')
			//异步加载站点列表
			this.$store.dispatch('fetchSiteList')
			//异步加载分类列表
			this.$store.dispatch('fetchMenuList')
			// 创建一个数组存放两个需要等待的异步操作的 Promise
			const promises = []
			//异步获取spu列表
			promises.push(this.$store.dispatch('fetchSpuList'))
			//异步获取sku列表
			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*/
	.l {
		float: left;
	}

	.r {
		float: right;
	}

	.pr {
		position: relative;
	}

	.pa {
		position: absolute;
	}

	.fc {
		text-align: center;
	}

	.fr {
		text-align: right;
	}

	.animation {
		transition: all 0.2s ease;
	}

	.topbar {
		background-color: $uni-color-error;
		height: 176rpx;
	}

	//占位 空符
	.extra-space {
		height: 156rpx;
	}

	//占位 空符
	.extra-space1 {
		height: 400rpx;
	}

	//占位 空符
	.extra-space2 {
		height: 200rpx;
	}

	.radioBox {
		weight: 40rpx;
		height: 40rpx;
	}

	//按钮
	.numberBut {
		width: 130rpx;
		height: 48rpx;
	}

	.nullBut {
		width: 159rpx;
		height: 48rpx;
	}

	.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-mb {
		background-color: $uni-text-color-disable;
	}

	.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: 1rpx solid $uni-border-color;
	}

	//粗边框
	.border4 {
		border: 4rpx solid $uni-border-color;
	}

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

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

	.borderno {
		border: none;
	}

	//下边框 实线
	.borderB {
		border-bottom: 1rpx solid $uni-border-color;
	}

	//下边框 虚线
	.borderBDas {
		border-bottom: 1rpx dashed $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;
	}

	.fn {
		font-weight: normal;
	}

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

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

	.fz20 {
		font-size: 20rpx;
	}

	.fz24 {
		font-size: 24rpx;
	}

	.fz28 {
		font-size: 28rpx;
	}

	.fz32 {
		font-size: 32rpx;
	}

	.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>