iphoex的适配

components/goods-popup/index.vue

 <template>
 	<uni-popup ref="goodsPopup" type="bottom">
-		<view class="wrap w-100">
+		<view class="wrap w-100" :style="warpFIt">
 			
 			<view
 				class="flex j-start a-center"
 				v-if="goods"
 			>
-				<image 
+				<image
 					class="goods-cover mr-2"
 					:src="goods.cover"
 					mode="aspectFit"
@@ -65,6 +65,10 @@
 						</view>
 					</view>
 				</view>
+				
+				
+				
+				
 			</scroll-view>
 			
 			<view class="flex w-100 a-center flex-column font-28 mt-2">
@@ -75,7 +79,7 @@
 			</view>
 			
 			<!-- btn -->
-			<view class="w-100 btn-wrap flex j-between a-center text-center font-32">
+			<view class="w-100 btn-wrap flex j-between a-center text-center font-32" :style="btnBottom">
 				<view class="btn-cart flex-1" @click.stop="handleCart">加入购物车</view>
 				<view class="btn-pay flex-1" @click.stop="handlePay">立即购买</view>
 			</view>
@@ -89,10 +93,15 @@ import price from '@/components/price/index.vue'
 import inputNumber from '@/components/inputNumber/index.vue'
 import { addCart } from '@/apis/carts.js'
 import common from './common.js'
-import { mapActions } from 'vuex'
+import { mapActions, mapState } from 'vuex'
 export default {
 	name: 'goods-popup',
-	
+	props: {
+		fitIphoneX: {
+			type: Boolean,
+			default: true
+		}
+	},
 	data() {
 		return {
 			goods: null,
@@ -108,6 +117,26 @@ export default {
 		price
 	},
 	
+	computed: {
+		...mapState({
+			isIphoneX: state => state.systemInfo.isIphoneX
+		}),
+		btnBottom() {
+			if(this.fitIphoneX) {
+				return `bottom: ${this.isIphoneX}px`
+			} else {
+				return 'bottom: 0'
+			}
+		},
+		warpFIt() {
+			if(this.fitIphoneX) {
+				return `padding-bottom: 186rpx`
+			} else {
+				return 'padding-bottom: 118rpx'
+			}
+		}
+	},
+	
 	methods: {
 		...common,
 		...mapActions('cart', ['setCount']),
@@ -237,7 +266,7 @@ export default {
 .wrap {
 	position: relative;
 	@include borderBox(20rpx, 20rpx);
-	padding-bottom: 118rpx;// 20 + 98
+	// padding-bottom: 118rpx;// 20 + 98
 	background-color: #fff;
 	
 	.goods-cover {

config/index.js

@@ -5,8 +5,7 @@ const env = {
 }
 
 // 不考虑其他端小程序直接这样配置
-export const baseUrl = env[__wxConfig.envVersion]
+// export const baseUrl = env[__wxConfig.envVersion]
 
-// // #ifndef MP-WEIXIN
-// export const baseUrl = process.env.NODE_ENV === 'development' ? env.develop : env.release
-// // #endif
+// 因为这个是模板，用上面的方法配置域名意义不大
+export const baseUrl = process.env.NODE_ENV === 'development' ? env.develop : env.release

pages/category/index.vue

@@ -121,7 +121,7 @@
 			
 				
 			<!-- 购物弹窗 -->
-			<goods-popup ref="popup" />
+			<goods-popup ref="popup" :fitIphoneX="false" />
 		</template>
 	</view>
 </template>

pages/goods/detail.vue

 <template>
 	<view
 		class="wrapper w-100"
+		:style="{paddingBottom: 98 + isIphoneX + 'px'}"
 	>
 		<c-nav_bar
 			showBack
@@ -113,7 +114,7 @@
 		</view>
 		
 		<!-- buttons -->
-		<view class="btns w-100 flex j-between a-center">
+		<view class="btns w-100 flex j-between a-center" :style="{paddingBottom: isIphoneX + 'px'}">
 			<view class="flex-1 flex j-around a-center">
 				<view 
 					class="flex-1 left-item flex flex-column j-center a-center"
@@ -195,11 +196,13 @@ export default {
 		goods_id = options.goods_id
 		this.getDetail()
 		this.getSku()
+		console.log(this.isIphoneX)
 	},
 	
 	computed: {
 		...mapState({
-			cart_count: state => state.cart.cart_count
+			cart_count: state => state.cart.cart_count,
+			isIphoneX: state => state.systemInfo.isIphoneX
 		}),
 		
 		logisticsTab() {
@@ -348,7 +351,6 @@ export default {
 <style lang="scss" scoped>
 @import url("/components/parse/parse.css");
 .wrapper {
-	margin-bottom: 98rpx;
 	.swiper-wrap {
 		position: relative;
 		width: 750rpx;
@@ -432,11 +434,11 @@ export default {
 		left: 0;
 		right: 0;
 		bottom: 0;
-		height: 98rpx;
 		@include borderBox(12rpx, 30rpx);
 		border-top: 1rpx solid $line;
 		background-color: $white;
 		.left-item {
+			height: 98rpx;
 			position: relative;
 			font-size: 20rpx;
 			.icon {
@@ -459,6 +461,7 @@ export default {
 			}
 		}
 		.right {
+			height: 98rpx;
 			flex: 0 0 360rpx;
 			.cart-btn, .pay-btn {
 				display: inline-block;

pages/home/index.vue

@@ -172,7 +172,7 @@
 		</template>
 
 		<!-- 购物弹窗 -->
-		<goods-popup ref="popup" />
+		<goods-popup ref="popup" :fitIphoneX="false" />
 		<button type="default" open-type="share" id="share"></button>
 	</view>
 </template>
@@ -224,6 +224,7 @@ export default {
 	mixins: [common_share],
 
 	created() {
+		console.log(this.systemInfo)
 		// 实例化分页方法
 		this.loadmore = new LoadMore()
 		this.getHomeCate()

pages/order/confirm-order.vue

 <template>
-	<view class="wrapper">
+	<view class="wrapper" :style="{paddingBottom: 118 + isIphoneX + 'px'}">
 		<view class="tab-wrap w-100 flex j-around a-center text-center">
 			<view 
 				class="tab-item flex-1"
@@ -119,7 +119,7 @@
 			</view>
 		</view>
 		
-		<view class="w-100 flex j-end a-center confirm">
+		<view class="w-100 flex j-end a-center confirm" :style="{bottom: isIphoneX + 'px'}">
 			<text class="font-24">不含运费</text>
 			<text class="total-price mx-4">合计：￥
 				<template v-if="judge.showTotal(orderDetail.shop.cartList2)">
@@ -196,7 +196,8 @@ export default {
 	
 	computed: {
 		...mapState({
-			openid: state => state.user.openid
+			openid: state => state.user.openid,
+			isIphoneX: state => state.systemInfo.isIphoneX
 		})
 	},
 	
@@ -392,7 +393,7 @@ export default {
 .wrapper {
 	box-sizing: border-box;
 	padding-top: 110rpx;
-	padding-bottom: 118rpx;
+	// padding-bottom: 118rpx;
 	.tab-wrap {
 		position: fixed;
 		left: 0;

pages/order/order-detail.vue

@@ -137,7 +137,11 @@
 			</view>
 		</view>
 		
-		<view class="btn-wrap mt-2 flex j-end a-center" v-if="!['0', '2', '5'].includes(order_detail.order.order_status)">
+		<view 
+			class="btn-wrap mt-2 flex j-end a-center"
+			:style="{bottom: isIphoneX + 'px'}"
+			v-if="!['0', '2', '5'].includes(order_detail.order.order_status)"
+		>
 			<order-btn :item="order_detail.order" :otherData="order_detail" @changeData='changeData'></order-btn>
 		</view>
 		
@@ -147,6 +151,7 @@
 <script>
 import orderBtn from './components/order-btn.vue'
 import countdownT from './components/countdownT.vue'
+import { mapState } from 'vuex'
 import { orderDetail } from '@/apis/order.js'
 import { makePhoneCall } from '@/utils/common.js'
 import { baseUrl } from '@/config/index.js'
@@ -171,7 +176,11 @@ export default {
 		countdownT,
 		orderBtn
 	},
-	
+	computed: {
+		...mapState({
+			isIphoneX: state => state.systemInfo.isIphoneX
+		})
+	},	
 	onLoad(ops) {
 		order_sn = ops.order_sn
 		this.getDetail()

readme.md

@@ -24,6 +24,7 @@
 	- 一般层级(普通层级，如展示一些普通信息) zIndex范围 1-98
 	- 当前页面最高层级，如遮罩 zIndex 99
 	- 仅次于小程序原生弹窗 zIndex 100
++ 小程序线上版本库2.16.0 （后端在授权开通服务的时候会设置）
 
 #### warning
 + 2021/6/29，本日起的代码可能会引起不适，but all can run（效率和质量不会成正比关系）
@@ -33,4 +34,4 @@
 + 详情有个深拷贝的问题。暂时通过JSON.stringify()处理
 + 所有的价格都是通过toFixed会可能出现精度问题。一般发现不了
 + 确认订单页面要跳到地址列表页面选择
-// wx537e892e36fbf79d
+// wx537e892e36fbf79d  // 测试 wxd170058f4ad8fecd
\ No newline at end of file

store/modules/systemInfo.js

 const state = {
 	systemInfo: null,
 	menuButtonInfo: null,
-	menuCalcInfo: null
+	menuCalcInfo: null,
+	isIphoneX: 0 // 安全距离
 }
 
 const mutations = {
 	SETMOBILEDATA(state, params) {
-		state.systemInfo = params.systemInfo
-		state.menuButtonInfo = params.menuButtonInfo
-		state.menuCalcInfo = params.menuCalcInfo
+		const { systemInfo, menuButtonInfo, menuCalcInfo } = params
+		state.systemInfo = systemInfo
+		state.menuButtonInfo = menuButtonInfo
+		state.menuCalcInfo = menuCalcInfo
+		state.isIphoneX = systemInfo.screenHeight - systemInfo.safeArea.bottom
 	}
 }
 

styles/global.scss

@@ -16,4 +16,8 @@ $white: #fff; // 白色
 	content: " ";
 	clear: both;
 	height: 0;
+}
+
+.isIphoneX {
+	padding-bottom: 68rpx!important;
 }
\ No newline at end of file

subPages/address/index.vue

@@ -24,11 +24,12 @@
 			</view>
 		</block>
 		
-		<navigator class="addresss-btn" url="/subPages/address/edit">添加地址</navigator>
+		<navigator class="addresss-btn" :style="{bottom: isIphoneX + 'px'}" url="/subPages/address/edit">添加地址</navigator>
 	</view>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import { addressList, defaultAddress, delAddress } from '@/apis/address.js'
 import LoadMore from '@/utils/load-more.js'
 
@@ -54,6 +55,12 @@ export default {
 		this.init()
 	},
 	
+	computed: {
+		...mapState({
+			isIphoneX: state => state.systemInfo.isIphoneX
+		})
+	},
+	
 	// 下拉刷新
 	onPullDownRefresh() {
 		uni.showLoading({