页面优化

This commit is contained in:
高健 2021-08-09 10:22:34 +08:00
parent 97cb499755
commit 843a674f83
7 changed files with 90 additions and 50 deletions

View File

@ -37,9 +37,9 @@
<view class="edit-card">
<view wx:for="{{areaList}}" wx:key="index"
wx:if="{{item.templateAreaServerLink != '2' && item.templateAreaType != '1'}}">
<view class="row">
<view class="row-ver">
<view class="item-title-box">
<view class="item-title">{{item.templateAreaName}}:</view>
<view class="item-title">{{item.templateAreaName}}</view>
<view class="hint-txt" wx:if="{{item.templateAreaFontLength>0}}">最多输入{{item.templateAreaFontLength}}个字符</view>
</view>
<view class="item-input">
@ -53,9 +53,12 @@
</view>
</view>
<view class="row" wx:for="{{areaList}}" wx:key="index"
<view class="row-ver" wx:for="{{areaList}}" wx:key="index"
wx:if="{{item.templateAreaServerLink == '2' && item.templateAreaType != '1'}}">
<view class="item-title">{{item.templateAreaName}}:</view>
<view class="item-title-box">
<view class="item-title">{{item.templateAreaName}}</view>
<view class="hint-txt" wx:if="{{item.templateAreaFontLength>0}}">最多输入1张图片</view>
</view>
<view bindtap="choosePhoto" data-cur="{{index}}" data-item="{{item}}" class="card-img-box">
<image src="{{cardUrl}}{{item.templateAreaFile}}" mode="widthFix"></image>
<text class="cuIcon-cameraadd" style="font-size: 100rpx;"></text>
@ -70,7 +73,7 @@
</view> -->
</view>
</view>
<view class="padding-xs foot bg-white" wx:if="{{!isLoading}}">
<view class="padding-sm foot bg-white" wx:if="{{!isLoading}}">
<button class="cu-btn bg-blue" style="width:100%" bindtap="createMyCard">生成我的名片</button>
</view>
<view class="hide-link" wx:if="{{showHide}}">

View File

@ -52,17 +52,24 @@ page {
border-bottom: 1rpx solid #f5f5f5;
}
.row-ver {
display: flex;
padding: 15rpx 20rpx;
border-bottom: 1px solid #EEE;
border-bottom: 1rpx solid #f5f5f5;
flex-direction: column;
}
.item-title {
flex: 1;
font-size: 32rpx;
line-height: 50rpx;
color: #808080;
align-self: center;
}
.item-title-box {
display: flex;
flex-direction: column;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
@ -76,7 +83,7 @@ page {
.item-input input {
width: 100%;
text-align: right;
text-align: left;
height: 50rpx;
font-size: 32rpx;
color: #333;
@ -185,6 +192,7 @@ page {
flex-direction: row;
align-items: center;
margin-right: 40rpx;
justify-content: space-between;
}
.card-img-box image {
@ -194,7 +202,7 @@ page {
.hint-txt {
text-align: right;
color: #ff0000;
color: #fd9494;
font-size: 24rpx;
padding: 10rpx 32rpx;
}

View File

@ -66,12 +66,14 @@ Page({
var items = item.value.split(',')
var tempList = []
for (var i = 0; i < items.length; i++) {
var urls = _self.data.imgUrl + items[i]
var tempItem = {
path: urls,
imgPath: '../../../images/ic_temp.png'
if (items[i] != '') {
var urls = _self.data.imgUrl + items[i]
var tempItem = {
path: urls,
imgPath: '../../../images/ic_temp.png'
}
tempList.push(tempItem)
}
tempList.push(tempItem)
}
item.valueList = tempList
break
@ -79,14 +81,16 @@ Page({
var items = item.value.split(',')
var tempList = []
for (var i = 0; i < items.length; i++) {
var ss = items[i].split('&')
var videoUrl = app.urls.baseImgUrl + ss[0]
var imgUrl = app.urls.baseImgUrl + ss[1]
var tempItem = {
path: videoUrl,
imgPath: imgUrl
if (items[i] != '') {
var ss = items[i].split('&')
var videoUrl = app.urls.baseImgUrl + ss[0]
var imgUrl = app.urls.baseImgUrl + ss[1]
var tempItem = {
path: videoUrl,
imgPath: imgUrl
}
tempList.push(tempItem)
}
tempList.push(tempItem)
}
item.valueList = tempList
break
@ -94,13 +98,15 @@ Page({
var items = item.value.split('-')
var tempList = []
for (var i = 0; i < items.length; i++) {
//截取经纬度
var latlng = items[i].split(',')
var tempItem = {
latitude: latlng[0], //纬度
longitude: latlng[1], //经度
if (items[i] != '') {
//截取经纬度
var latlng = items[i].split(',')
var tempItem = {
latitude: latlng[0], //纬度
longitude: latlng[1], //经度
}
tempList.push(tempItem)
}
tempList.push(tempItem)
}
item.valueList = tempList
break
@ -108,16 +114,18 @@ Page({
var items = item.value.split(',')
var tempList = []
for (var i = 0; i < items.length; i++) {
var urls = _self.data.imgUrl + items[i]
var tempItem = {
path: urls, //地址
isPlay: false, //是否播放中
duration: 100, //时长
curDuation: 0,
curDurationStr: '00:00',
totalDurationStr: '00:00'
if (items[i] != '') {
var urls = _self.data.imgUrl + items[i]
var tempItem = {
path: urls, //地址
isPlay: false, //是否播放中
duration: 100, //时长
curDuation: 0,
curDurationStr: '00:00',
totalDurationStr: '00:00'
}
tempList.push(tempItem)
}
tempList.push(tempItem)
}
item.valueList = tempList
break

View File

@ -29,7 +29,7 @@
</view>
</view>
<!-- 图片 -->
<view wx:if="{{child.dataType=='2'}}" class="cu-form-group margin-top-xs">
<view wx:if="{{child.dataType=='2' && child.valueList.length>0}}" class="cu-form-group margin-top-xs">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" wx:for="{{child.valueList}}" wx:key="index" wx:for-item="photo"
catchtap="viewImg" data-url="{{photo.path}}">
@ -38,7 +38,7 @@
</view>
</view>
<!-- 视频 -->
<view wx:if="{{child.dataType=='4'}}" class="cu-form-group margin-top-sm" style="border:1rpx solid #eee;">
<view wx:if="{{child.dataType=='4' && child.valueList.length>0}}" class="cu-form-group margin-top-sm" style="border:1rpx solid #eee;">
<view class="grid col-{{count>3 ? count : 1}} grid-square flex-sub">
<view class="bg-img" wx:for="{{child.valueList}}" wx:key="index" wx:for-item="video"
catchtap="viewVideo" style="height:280rpx;width:100%;padding-bottom:0px;"
@ -52,7 +52,7 @@
</view>
</view>
<!-- 音频 -->
<view wx:if="{{child.dataType=='3'}}" style="width:100%;">
<view wx:if="{{child.dataType=='3' && child.valueList.length>0}}" style="width:100%;">
<view class="flex align-center shadow-box margin-top-xs" style="width:100%;"
wx:for="{{child.valueList}}" wx:for-index="i" wx:key="i" wx:for-item="audio">
<image src="/images/ic_user_default.png" mode="scaleToFill" style="width:80rpx;height:80rpx;">
@ -79,7 +79,7 @@
</view>
</view>
<!-- 地图定位 -->
<view wx:if="{{child.dataType=='6'}}">
<view wx:if="{{child.dataType=='6' && child.valueList.length>0}}">
<view wx:for="{{child.valueList}}" wx:key="index" wx:for-item="m" style="width:100%;"
class="margin-top-xs">
<view class="flex justify-between">

View File

@ -218,7 +218,7 @@
<van-empty description="暂无数据" image="../../../images/ic_empty_data.png" />
</view>
<view class="padding-xs foot bg-white" wx:if="{{fieldList.length > 0}}">
<view class="foot bg-white" style="padding: 0rpx 20rpx;" wx:if="{{fieldList.length > 0}}">
<button class="cu-btn bg-blue" style="width:100%" bindtap="doPublish">保存</button>
</view>

View File

@ -36,9 +36,11 @@
<view class="edit-card">
<view wx:for="{{areaList}}" wx:key="index"
wx:if="{{item.templateAreaServerLink != '2' && item.templateAreaType != '1'}}">
<view class="row">
<view class="item-title">{{item.templateAreaName}}:</view>
<view class="hint-txt" wx:if="{{item.templateAreaFontLength>0}}">最多输入{{item.templateAreaFontLength}}个字符</view>
<view class="row-ver">
<view class="item-title-box">
<view class="item-title">{{item.templateAreaName}}</view>
<view class="hint-txt" wx:if="{{item.templateAreaFontLength>0}}">最多输入{{item.templateAreaFontLength}}个字符</view>
</view>
<view class="item-input">
<input type="text" placeholder="请输入内容,最多{{item.templateAreaFontLength}}个字" data-num="{{index}}"
value="{{item.templateAreaFontValue}}" focus="{{item.focus}}" data-item="{{item}}"
@ -49,9 +51,12 @@
</view>
</view>
</view>
<view class="row" wx:for="{{areaList}}" wx:key="index"
<view class="row-ver" wx:for="{{areaList}}" wx:key="index"
wx:if="{{item.templateAreaServerLink == '2' && item.templateAreaType != '1'}}">
<view class="item-title">{{item.templateAreaName}}:</view>
<view class="item-title-box">
<view class="item-title">{{item.templateAreaName}}</view>
<view class="hint-txt" wx:if="{{item.templateAreaFontLength>0}}">最多输入1张图片</view>
</view>
<view class="card-img-box" bindtap="choosePhoto" data-cur="{{index}}" data-item="{{item}}">
<image src="{{cardUrl}}{{item.templateAreaFile}}" mode="widthFix"></image>
<text class="cuIcon-cameraadd" style="font-size: 100rpx;"></text>

View File

@ -33,7 +33,7 @@ page {
.card-info {
padding: 10rpx;
margin-bottom: 90rpx;
margin-bottom: 100rpx;
}
.card-title {
@ -49,6 +49,15 @@ page {
padding: 15rpx 10rpx;
border-bottom: 1px solid #EEE;
background: #ffffff;
border-bottom: 1rpx solid #f5f5f5;
}
.row-ver {
display: flex;
padding: 15rpx 20rpx;
border-bottom: 1px solid #EEE;
border-bottom: 1rpx solid #f5f5f5;
flex-direction: column;
}
.item-title {
@ -56,7 +65,13 @@ page {
font-size: 32rpx;
line-height: 50rpx;
color: #808080;
align-self: center;
}
.item-title-box {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.item-input {
@ -68,7 +83,7 @@ page {
.item-input input {
width: 100%;
text-align: right;
text-align: left;
height: 50rpx;
font-size: 32rpx;
color: #333;
@ -177,6 +192,7 @@ page {
flex-direction: row;
align-items: center;
margin-right: 40rpx;
justify-content: space-between;
}
.card-img-box image {
@ -186,7 +202,7 @@ page {
.hint-txt {
text-align: right;
color: #ff0000;
color: #fd9494;
font-size: 24rpx;
padding: 10rpx 32rpx;
}