uni-app微信小程序,页面的头部跟尾部固定,页面滑动也保持不变
先上截图看看效果
·
先上截图看看效果
话不多说,直接上模板,可以粘贴复制,完整页面,内容请自行删除
<template>
<view class="container">
<CustomNavigationBar title="店铺信息"></CustomNavigationBar>
<scroll-view scroll-y="true" :style="{height:scrollViewHeight}">
<form class="form">
<view class="form_single_item">
<text class="logo_label">店铺LOGO</text>
<view>
<image :src="imagePrefix+'/2021/06/010a9b1d-a7f7-4fc0-bb32-884240429ce2.png'"
class="upload_image">
</image>
</view>
</view>
<view class="form_more_item">
<view class="form_item" @click="showStoreTypePopup = true">
<text class="item_label">认证类型</text>
<input class="item_input" type="number" v-model="currentStoreType" placeholder="个人商户"
placeholder-class="item_input_placeholder" />
<uni-icons class="right_icon" type="arrowright" color="#C1C1C4" size="20"></uni-icons>
</view>
</view>
<view class="form_more_item">
<view class="form_item">
<text class="item_label">店铺名称</text>
<input class="item_input" type="text" placeholder="输入店铺名称(最多15个字)"
placeholder-class="item_input_placeholder" />
<uni-icons class="right_icon" size="20"></uni-icons>
</view>
<view class="divide"></view>
<view class="form_item" @click="showStoreTypePopup = true">
<text class="item_label">商业分类</text>
<input class="item_input" type="number" v-model="currentStoreType" placeholder="选择商业分类"
placeholder-class="item_input_placeholder" />
<uni-icons class="right_icon" type="arrowright" color="#C1C1C4" size="20"></uni-icons>
</view>
</view>
<view class="form_item_contact">
<text class="item_label">联系人姓名</text>
<input class="item_input" type="text" placeholder="填写联系人姓名"
placeholder-class="item_input_placeholder" />
<uni-icons class="right_icon" size="20"></uni-icons>
</view>
<view class="form_more_item">
<view class="form_item">
<text class="item_label">店铺地址</text>
<input class="item_input" type="text" placeholder="定位店铺地址"
placeholder-class="item_input_placeholder" />
<uni-icons class="right_icon" type="arrowright" color="#C1C1C4" size="20"></uni-icons>
</view>
<view class="divide"></view>
<view class="form_item">
<text class="item_label">详细地址</text>
<input class="item_input" type="number" placeholder="输入详细地址(不超过50个字)"
placeholder-class="item_input_placeholder" />
<uni-icons class="right_icon" size="20"></uni-icons>
</view>
</view>
<view class="form_more_item">
<view class="form_item_vertical">
<view class="item_label">认证材料</view>
<view class="License_profile">
<view class="id_card">
<image :src="imagePrefix+'/2021/05/b766b0b9-a1f1-4703-86d2-39d660d4491a.png'"
mode="widthFix" class="card_image">
</image>
<view class="card_text">上传身份证正面照片</view>
</view>
<view class="id_card">
<image :src="imagePrefix+'/2021/05/541b7ceb-9e0a-4d96-8069-2d00a7873478.png'"
mode="widthFix" class="card_image">
</image>
<view class="card_text">上传身份证反面照片</view>
</view>
</view>
</view>
<view class="divide"></view>
<view class="form_item">
<text class="item_label">证件名称</text>
<input class="item_input" type="number" placeholder="填写证件姓名"
placeholder-class="item_input_placeholder" />
<uni-icons class="right_icon" size="20"></uni-icons>
</view>
<view class="divide"></view>
<view class="form_item">
<text class="item_label">证件号码</text>
<input class="item_input" type="number" placeholder="填写身份证号码"
placeholder-class="item_input_placeholder" />
<uni-icons class="right_icon" size="20"></uni-icons>
</view>
<view class="divide"></view>
<view class="form_item">
<text class="item_label">有效期至</text>
<view class="date_picker_container">
<picker mode="date" :start="startDate" @change="onIdCardDateChange">
<view class="item_input">{{idCardValidDate}}</view>
</picker>
</view>
</view>
</view>
<view class="form_more_item" v-if="registerStoreType != 0">
<view class="item_label">营业执照</view>
<view class="item_content">
<image :src="imagePrefix+'/2021/05/7e2defc4-dd09-46a2-92b0-2c15528a75b5.png'" mode="widthFix"
class="License_food_image">
</image>
<view class="card_text">上传营业执照</view>
</view>
<view class="divide"></view>
<view class="form_item">
<text class="item_label">有效期至</text>
<view class="date_picker_container">
<picker mode="date" :start="startDate" @change="onBusinessLicenseDateChange">
<view class="item_input">{{businessLicenseValidDate}}</view>
</picker>
</view>
</view>
<view class="divide"></view>
<view class="form_item">
<text class="item_label">{{registerStoreType ==1 ? '商户' : '企业'}}名称</text>
<input class="item_input" type="number"
:placeholder="`填写{{registerStoreType == 1 ? '商户' : '企业'}}名称`"
placeholder-class="item_input_placeholder" />
<uni-icons class="right_icon" size="20"></uni-icons>
</view>
</view>
<view class="form_more_item" v-if="showFoodLicense == 1">
<view class="item_label">卫生经营许可证</view>
<view class="item_content">
<image :src="imagePrefix+'/2021/05/22f41f07-8198-4b9e-81b7-b97bd17d89e4.png'" mode="widthFix"
class="License_food_image"></image>
<view class="card_text">上传卫生经营许可证</view>
</view>
<view class="divide"></view>
<view class="form_item">
<text class="item_label">有效期至</text>
<view class="date_picker_container">
<picker mode="date" :start="startDate" @change="onFoodLicenseDateChange">
<view class="item_input">{{foodLicenseValidDate}}</view>
</picker>
</view>
</view>
</view>
<view class="next_step">
<view class="submit" @click="submit">提交</view>
</view>
</form>
</scroll-view>
<StoreTypePopup :show="showStoreTypePopup" @cancel="onStoreTypeCancel" @ok="onStoreTypeOk"></StoreTypePopup>
</view>
</template>
<script>
import myrequest from '@/utils/request.js'
export default {
data() {
return {
showStoreTypePopup: false,
currentStoreType: null,
// 在RegisterStore.vue页面选择的店铺认证类型
registerStoreType: -1,
imagePrefix: getApp().globalData.imagePrefix, //获取图片前面的地址
navHeight: getApp().globalData.navHeight,
idCardValidDate: '选择有效期',
foodLicenseValidDate: '选择有效期',
businessLicenseValidDate: '选择有效期',
registerStoreType: -1,
showFoodLicense: false,
}
},
onLoad(options) {
this.registerStoreType = options.type
this.showFoodLicense = options.showFoodLicense
},
methods: {
submit() {
// 只有商铺类型为 餐饮美食 时才要求认证 卫生许可证
let showFoodLicense = this.currentStoreType == '餐饮美食' ? 1 : 0
uni.navigateTo({
url: '../StoreAuth/StoreAuth?type=' + this.registerStoreType + '&showFoodLicense=' +
showFoodLicense
})
},
onStoreTypeCancel() {
this.showStoreTypePopup = false
},
onStoreTypeOk(type) {
this.showStoreTypePopup = false
this.currentStoreType = type
},
onIdCardDateChange(e) {
this.idCardValidDate = e.target.value
},
onFoodLicenseDateChange(e) {
this.foodLicenseValidDate = e.target.value
},
onBusinessLicenseDateChange(e) {
this.businessLicenseValidDate = e.target.value
},
getCurrentDate() {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
month = month > 9 ? month : '0' + month;;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
}
},
computed: {
scrollViewHeight() {
return (getApp().globalData.screenHeight - this.navHeight - 80) + 'px'
},
startDate() {
return this.getCurrentDate()
}
}
}
</script>
<style scoped>
.container {
height: 100vh;
background-color: #f5f6fb;
}
.upload_image {
width: 149rpx;
height: 149rpx;
background: #F8F8F8;
border: 1rpx solid #d1d1d1;
border-radius: 10rpx;
}
.form_single_item,
.form_more_item,
.form_item_contact {
background-color: #FFFFFF;
border-radius: 20rpx;
margin: 24rpx;
padding: 20rpx 16rpx;
}
.form_single_item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.form_item,
.form_item_contact {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.logo_label {
font-size: 32rpx;
color: #2A2A2A;
/* position: fixed; */
left: 40rpx;
font-weight: 500;
align-self: flex-start;
margin-right: 53rpx;
}
.logo_image {
width: 72rpx;
height: 72rpx;
}
.item_label {
font-size: 32rpx;
color: #2A2A2A;
width: 100px;
}
.item_input {
/* margin-left: 40rpx; */
font-size: 24rpx;
margin-top: 10rpx;
margin-bottom: 10rpx;
width: 350rpx;
}
.divide {
height: 2rpx;
background-color: #F1F1F1;
margin-top: 20rpx;
margin-bottom: 20rpx;
}
/deep/.item_input_placeholder {
font-size: 24rpx;
color: #a2a2a2;
}
.right_icon {
/* position: fixed; */
right: 40rpx;
width: 40rpx;
}
.next_step {
position: fixed;
bottom: 0;
background-color: #FFFFFF;
padding: 10rpx;
width: 100%;
z-index: 99;
/* margin-top: 50rpx; */
}
.submit {
border-radius: 40rpx;
height: 80rpx;
background-color: #9433ff;
color: #FFFFFF;
margin: 20rpx 34rpx;
font-size: 26rpx;
text-align: center;
line-height: 80rpx;
}
.License_profile {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.id_card {
margin-top: 12px;
}
.card_image {
width: 100%;
}
.card_text {
color: #999999;
font-size: 12px;
margin-top: 12px;
}
.License_food_image {
width: 50%;
margin-top: 12px;
}
</style>
下面是app.vue的代码
<script>
export default {
onLaunch: function() {
// 参考：https://www.cnblogs.com/sese/p/9761713.html
// 获取胶囊位置信息
let menuBtnInfo = uni.getMenuButtonBoundingClientRect()
uni.getSystemInfo({
success: (res) => {
this.globalData.screenHeight = res.screenHeight
let statusBarHeight = res.statusBarHeight
this.globalData.menuRightSpace = res.screenWidth - menuBtnInfo.right
this.globalData.navHeight = statusBarHeight + menuBtnInfo.height + (menuBtnInfo.top -
statusBarHeight) * 2
this.globalData.statusBarHeight = statusBarHeight
this.globalData.tabBarHeight = (res.screenHeight - res.windowHeight -
statusBarHeight) * res.pixelRatio
},
fail: (res) => {},
complete: (res) => {},
})
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
},
globalData: {
navHeight: 0,
statusBarHeight: 0,
menuRightSpace: 0,
screenHeight: 0,
tabBarHeight: 0,
}
}
</script>
<style>
/*每个页面公共css */
page {
height: 100%;
}
.overflow_text {
display: -webkit-box;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
最后附上,参考的地址:https://www.cnblogs.com/sese/p/9761713.html
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
3
0- 0
已为社区贡献6条内容
所有评论(0)