Browse Source

no message

feature/v2.1
xpz2018 4 years ago
parent
commit
a289fc86fd
4 changed files with 229 additions and 82 deletions
  1. 2
      components/textarea/index.wxml
  2. 108
      pages/agent/appointment/index.js
  3. 162
      pages/agent/appointment/index.wxml
  4. 39
      pages/agent/appointment/index.wxss

2
components/textarea/index.wxml

@ -1,4 +1,4 @@
<view class="textarea {{ value ? 'text-black' : 'text-gray' }}" bindtap="onEdit" wx:if="{{!editing}}">{{value || placeholder }}</view>
<textarea id="remark" wx:else maxlength="100" value="{{value}}" style="padding-top:16rpx" class="textarea"
cursor-spacing="60" adjust-position="{{false}}" focus="{{editing}}" bindblur="onBlur" bindfocus="onEdit" show-confirm-bar="{{false}}"
cursor-spacing="60" adjust-position="{{true}}" focus="{{editing}}" bindblur="onBlur" bindfocus="onEdit" show-confirm-bar="{{false}}"
bindinput="bindInput" placeholder-style="color:#aaa" placeholder="{{placeholder}}"></textarea>

108
pages/agent/appointment/index.js

@ -33,7 +33,11 @@ Scene({
visible: false,
show: false,
code: '',
marginTop: 0
editing: false,
focusTop: '100%', // 输入框获取焦点时的top值
platform: false, // 机型
domHeight: 'auto', // dom元素高度
focusTime: 0 // 获取焦点的时间 yiling 20200408 14:43:56
},
onLoad: function (options) {
if(options.activityId){
@ -45,12 +49,13 @@ Scene({
wx.showLoading({ title: '加载中', mask: true })
getVehicleList().then(result => {
this.data.plateList = result.data.records
var height = app.globalData.fragmentHeight - app.globalData.safeBottom - 120
if(this.data.plateList.length <= 7){
this.setData({ vateList: this.data.plateList, height: app.globalData.fragmentHeight - app.globalData.safeBottom - 120 })
this.setData({ vateList: this.data.plateList, height, platform: app.globalData.isIos })
} else {
this.data.vateList = this.data.plateList.slice(0, 7)
this.data.vateList.push({plateNumber: '查看更多', fold: 1})
this.setData({ vateList: this.data.vateList, height: app.globalData.fragmentHeight - app.globalData.safeBottom - 120})
this.setData({ vateList: this.data.vateList, height, platform: app.globalData.isIos })
}
}).catch(err => {
})
@ -121,8 +126,10 @@ Scene({
this.setData({ [form_data]: e.detail })
}
},
bindFocus: function(e){
// this.setData({ marginTop: e.detail })
onEdit: function(e){
this.setData({ editing: true })
},
bindRemark: function (e) {
},
bindInput: function (e) {
if(!util.isEmpty(e.currentTarget.id)){
@ -299,5 +306,96 @@ Scene({
this.dialog = this.dialog || this.selectComponent('#van-dialog')
this.dialog.stopLoading()
})
},
/************************************** TextArea ********************************************/
handleEvaluationFocus(e) {
/* 获取焦点时记录时间 yiling 202000408 14:43:56 start */
this.setData({ focusTime: Date.now() })
/* 获取焦点时记录时间 yiling 202000408 14:43:56 end */
const { height } = e.detail // 为键盘高度
const windowHeight = wx.getSystemInfoSync().windowHeight // 可使用窗口高度,单位px
if (this.data.oldFocusTop) {
this.setData({ focusTop: this.data.oldFocusTop })
} else {
const query = wx.createSelectorQuery().in(this) // 自定义组件内必须添加.in(this),否则获取不到dom数据!
query.select('.popup-evaluation-wrap').boundingClientRect()
query.exec(res => {
if (res[0]) {
const domHeight = res[0].height || 156
this.setData({
focusTop: (windowHeight - domHeight - height) + 'px',
oldFocusTop: (windowHeight - domHeight - height) + 'px',
domHeight: domHeight + 'px', // 固定高度,防止部分机型中多行文本时布局错乱
})
}
})
}
},
/**
* @author: yiling
* @description: 监听输入框输入内容统计字数
* @param {Object} event event
* @return {void}
* @Date: 2019-12-16 15:46:22
*/
handleEvaluationInput({detail}) {
this.setData({ ['form.remark']: detail.value })
},
/**
* @author: yiling
* @description: 点击完成按钮时关闭弹窗
* @return {void}
* @Date: 2019-12-16 15:46:22
*/
handleEvaluationConfirm() {
this.handleClose()
},
/**
* @author: yiling
* @description: 点击发表评论按钮
* @return {void}
* @Date: 2019-12-16 15:46:22
*/
handleEvaluationRelease() {
this.handleClose((object) => {
object.id = this.data.info.id // id
object.content = this.data.commentsText // 评论内容
object.typeName = this.data.info.typeName // 类型:名片 / 资讯 / 商城 / ...
})
},
/**
* @author: yiling
* @description: 关闭输入框的弹窗
* @param {Function} callback 回调
* @return {void}
* @Date: 2019-12-16 15:46:22
*/
handleClose(callback) {
this.setData({ focusTop: '100%', editing: false })
},
/**
* @author: yiling
* @description: 防页面穿透
* @return {void}
* @Date: 2019-12-16 15:46:22
*/
handleEvaluationtouchmove() {
this.handleClose()
return false
},
/**
* @author: yiling
* @description: 失去焦点安卓机软键盘右上角的小三角会触发
* @return {void}
* @Date: 2019-12-19
*/
handleEvaluationBlur() {
if (Date.now() > this.data.focusTime && this.data.focusTime !== 0) {
console.log('handleEvaluationBlur')
this.handleClose()
}
},
noop: function(){
}
})

162
pages/agent/appointment/index.wxml

@ -4,89 +4,88 @@
<view slot="content">代卖预约</view>
</cu-custom>
<view style="margin-top:{{marginTop}}rpx">
<scroll-view scroll-y="true" style="height:{{height}}rpx">
<view class="bg-white flex flex-center" style="height:90rpx">
<view class="text-df flex flex-center" style="flex:1">提交订单</view>
<text class="cuIcon-right text-black" style="font-size:36rpx;"></text>
<view class="text-df flex flex-center" style="flex:1">等待预约</view>
<text class="cuIcon-right text-black" style="font-size:36rpx;"></text>
<view class="text-df flex flex-center" style="flex:1">线下送货</view>
<text class="cuIcon-right text-black" style="font-size:36rpx;"></text>
<view class="text-df flex flex-center" style="flex:1">余额提现</view>
</view>
<scroll-view scroll-y="true" style="height:{{height}}rpx">
<view class="bg-white flex flex-center" style="height:90rpx">
<view class="text-df flex flex-center" style="flex:1">提交订单</view>
<text class="cuIcon-right text-black" style="font-size:36rpx;"></text>
<view class="text-df flex flex-center" style="flex:1">等待预约</view>
<text class="cuIcon-right text-black" style="font-size:36rpx;"></text>
<view class="text-df flex flex-center" style="flex:1">线下送货</view>
<text class="cuIcon-right text-black" style="font-size:36rpx;"></text>
<view class="text-df flex flex-center" style="flex:1">余额提现</view>
</view>
<view class="flex flex-center bg-white margin-top" style="justify-content: flex-start;padding: 24rpx 32rpx;border-bottom:1rpx solid #f3f3f3">
<view style="height:24rpx;width:6rpx;background-image: linear-gradient(180deg, #007AFF 0%, #027BFF 15%, #5AABFF 45%, #CAF4FE 100%);"></view>
<view class="text-black text-sg text-bold" style="margin-left: 12rpx">纸品信息</view>
<view class="flex flex-center bg-white margin-top" style="justify-content: flex-start;padding: 24rpx 32rpx;border-bottom:1rpx solid #f3f3f3">
<view style="height:24rpx;width:6rpx;background-image: linear-gradient(180deg, #007AFF 0%, #027BFF 15%, #5AABFF 45%, #CAF4FE 100%);"></view>
<view class="text-black text-sg text-bold" style="margin-left: 12rpx">纸品信息</view>
</view>
<van-cell clickable center bind:click="chooseCustomer">
<view slot="title" class="flex flex-justify">
<view class="flex flex-center text-black">纸厂名称</view>
<view class="{{factoryDetail.name ? 'text-black' : 'text-gray'}}">{{factoryDetail.name}}</view>
</view>
<van-cell clickable center bind:click="chooseCustomer">
<view slot="title" class="flex flex-justify">
<view class="flex flex-center text-black">纸厂名称</view>
<view class="{{factoryDetail.name ? 'text-black' : 'text-gray'}}">{{factoryDetail.name}}</view>
</view>
</van-cell>
<van-cell id="cateName" clickable center is-link arrow-direction="down" bind:click="showPicker">
<view slot="title" class="flex flex-justify">
<view class="flex flex-center text-black">纸品品类</view>
<view class="{{cateName ? 'text-black' : 'text-gray'}}">{{cateName || '请选择品类'}}</view>
</view>
</van-cell>
<van-cell clickable center bind:click="chooseCustomer">
<view slot="title" class="flex flex-justify">
<view class="flex flex-center text-black">预估单价(元/吨)</view>
<view class="text-sg text-black">
<text>{{formate.formatePrice(form.unitPrice)}}</text>
<text class="text-sm" wx:if="{{form.publicSubsidies}}">(已含补贴{{formate.formatePrice(form.publicSubsidies)}}元/吨)</text>
</view>
</view>
</van-cell>
<van-field id="totalEstimatedWeight" type="digit" placeholder="请输入预估重量" clearable input-align="right" bind:change="onInput">
<view slot="label" class="flex text-black" style="width:200rpx">
<text>预估重量(吨)</text>
</view>
</van-field>
<van-cell id="deliveryTime" clickable center is-link arrow-direction="down" bind:click="showPicker">
<view slot="title" class="flex flex-justify">
<view class="flex flex-center text-black">货到时间</view>
<view class="{{form.deliveryTime ? 'text-black' : 'text-gray'}}">{{form.deliveryTime||'请选择货到时间'}}</view>
</view>
</van-cell>
<view class="flex flex-center bg-white" style="margin-top: 16rpx;justify-content: flex-start;padding: 24rpx 32rpx;border-bottom:1rpx solid #f3f3f3">
<view style="height:24rpx;width:6rpx;background-image: linear-gradient(180deg, #007AFF 0%, #027BFF 15%, #5AABFF 45%, #CAF4FE 100%);"></view>
<view class="text-black text-sg text-bold" style="margin-left: 12rpx">车辆信息</view>
</van-cell>
<van-cell id="cateName" clickable center is-link arrow-direction="down" bind:click="showPicker">
<view slot="title" class="flex flex-justify">
<view class="flex flex-center text-black">纸品品类</view>
<view class="{{cateName ? 'text-black' : 'text-gray'}}">{{cateName || '请选择品类'}}</view>
</view>
<view class="bg-white cu-list grid col-4 no-border" style="padding: 16rpx 24rpx 0rpx 24rpx" wx:if="{{vateList.length}}">
<view class="cu-item" wx:for="{{vateList}}" wx:key="index" style="padding: 0rpx 8rpx 8rpx 8rpx">
<van-button plain round size="small" data-index="{{index}}" custom-style="padding: 0;min-width: 160rpx;" bind:click="tagChange">{{item.plateNumber}}</van-button>
</van-cell>
<van-cell clickable center bind:click="chooseCustomer">
<view slot="title" class="flex flex-justify">
<view class="flex flex-center text-black">预估单价(元/吨)</view>
<view class="text-sg text-black">
<text>{{formate.formatePrice(form.unitPrice)}}</text>
<text class="text-sm" wx:if="{{form.publicSubsidies}}">(已含补贴{{formate.formatePrice(form.publicSubsidies)}}元/吨)</text>
</view>
</view>
<van-cell clickable center wx:for="{{vehicleList}}" wx:key="index" data-index="{{index}}" bind:click="showKeyboard">
<view slot="title" class="flex flex-justify">
<view class="flex flex-center text-black text-sg">
<text class="text-sm" style="width: 14px;line-height: 14px;text-align: center;border-radius: 50%;border: 1px solid #999">{{index + 1}}</text>
<text style="margin-left: 8rpx">货车车牌:</text>
</view>
<view class="{{item.plateNumber ? 'text-black' : 'text-gray'}}" style="flex:1">{{item.plateNumber || '点击输入车牌号码'}}</view>
<text class="cuIcon-close text-gray" style="font-size:44rpx;" data-index="{{index}}" wx:if="{{vehicleList.length > 1}}" catchtap="deleteCate"></text>
</view>
</van-cell>
<view class="bg-white flex flex-center" style="height:90rpx;line-height:90rpx" bindtap="addCate">
<text class="cuIcon-roundadd text-blue" style="font-size: 16px;"></text>
<text class="text-blue text-sg" style="margin-left:8rpx">添加车辆</text>
</van-cell>
<van-field id="totalEstimatedWeight" type="digit" placeholder="请输入预估重量" clearable input-align="right" bind:change="onInput">
<view slot="label" class="flex text-black" style="width:200rpx">
<text>预估重量(吨)</text>
</view>
</van-field>
<van-cell id="deliveryTime" clickable center is-link arrow-direction="down" bind:click="showPicker">
<view slot="title" class="flex flex-justify">
<view class="flex flex-center text-black">货到时间</view>
<view class="{{form.deliveryTime ? 'text-black' : 'text-gray'}}">{{form.deliveryTime||'请选择货到时间'}}</view>
</view>
</van-cell>
<view class="flex flex-center bg-white" style="margin-top: 16rpx;justify-content: flex-start;padding: 24rpx 32rpx;border-bottom:1rpx solid #f3f3f3">
<view style="height:24rpx;width:6rpx;background-image: linear-gradient(180deg, #007AFF 0%, #027BFF 15%, #5AABFF 45%, #CAF4FE 100%);"></view>
<view class="text-black text-sg text-bold" style="margin-left: 12rpx">其他信息</view>
<view class="flex flex-center bg-white" style="margin-top: 16rpx;justify-content: flex-start;padding: 24rpx 32rpx;border-bottom:1rpx solid #f3f3f3">
<view style="height:24rpx;width:6rpx;background-image: linear-gradient(180deg, #007AFF 0%, #027BFF 15%, #5AABFF 45%, #CAF4FE 100%);"></view>
<view class="text-black text-sg text-bold" style="margin-left: 12rpx">车辆信息</view>
</view>
<view class="bg-white cu-list grid col-4 no-border" style="padding: 16rpx 24rpx 0rpx 24rpx" wx:if="{{vateList.length}}">
<view class="cu-item" wx:for="{{vateList}}" wx:key="index" style="padding: 0rpx 8rpx 8rpx 8rpx">
<van-button plain round size="small" data-index="{{index}}" custom-style="padding: 0;min-width: 160rpx;" bind:click="tagChange">{{item.plateNumber}}</van-button>
</view>
<view class="bg-white" style="padding:24rpx 30rpx">
<van-textarea id="remark" bind:change="bindInput" bind:focus="bindFocus" placeholder="点击输入备注,最多100字"></van-textarea>
</view>
<van-cell clickable center wx:for="{{vehicleList}}" wx:key="index" data-index="{{index}}" bind:click="showKeyboard">
<view slot="title" class="flex flex-justify">
<view class="flex flex-center text-black text-sg">
<text class="text-sm" style="width: 14px;line-height: 14px;text-align: center;border-radius: 50%;border: 1px solid #999">{{index + 1}}</text>
<text style="margin-left: 8rpx">货车车牌:</text>
</view>
<view class="{{item.plateNumber ? 'text-black' : 'text-gray'}}" style="flex:1">{{item.plateNumber || '点击输入车牌号码'}}</view>
<text class="cuIcon-close text-gray" style="font-size:44rpx;" data-index="{{index}}" wx:if="{{vehicleList.length > 1}}" catchtap="deleteCate"></text>
</view>
<view style="height:16rpx"></view>
</scroll-view>
</view>
</van-cell>
<view class="bg-white flex flex-center" style="height:90rpx;line-height:90rpx" bindtap="addCate">
<text class="cuIcon-roundadd text-blue" style="font-size: 16px;"></text>
<text class="text-blue text-sg" style="margin-left:8rpx">添加车辆</text>
</view>
<view class="flex flex-center bg-white" style="margin-top: 16rpx;justify-content: flex-start;padding: 24rpx 32rpx;border-bottom:1rpx solid #f3f3f3">
<view style="height:24rpx;width:6rpx;background-image: linear-gradient(180deg, #007AFF 0%, #027BFF 15%, #5AABFF 45%, #CAF4FE 100%);"></view>
<view class="text-black text-sg text-bold" style="margin-left: 12rpx">其他信息</view>
</view>
<view class="bg-white" style="padding:24rpx 30rpx">
<view class="textarea {{ form.remark ? 'text-black' : 'text-gray' }}" bindtap="onEdit">{{form.remark || '点击输入备注,最多100字' }}</view>
<!-- <van-textarea id="remark" bind:change="bindInput" bind:focus="bindFocus" placeholder="点击输入备注,最多100字"></van-textarea> -->
</view>
<view style="height:16rpx"></view>
</scroll-view>
<submit-layout>
<van-button type="info" loading="{{requesting}}" custom-style="height:88rpx;width:688rpx" bind:click="submitForm">提交订单</van-button>
</submit-layout>
@ -99,4 +98,17 @@
<input class="dialog-input" placeholder-style="color:#aaa;" maxlength="8" placeholder="填写业务人员邀请码(必填)" bindinput="bindInput" />
</van-dialog>
<!-- <van-dialog id="van-dialog" /> -->
<notification id="qn-notification"/>
<notification id="qn-notification"/>
<view class="popup-evaluation__bg {{ editing === true ? 'is__show' : '' }}" catchtouchmove="handleEvaluationtouchmove">
<view class="popup-evaluation-wrap" catchtap="handleClose" style="top:{{ focusTop }};height: {{ domHeight }}">
<view class="flex flex-center bg-white" style="margin-top: 16rpx;justify-content: flex-start;padding: 24rpx 32rpx;border-bottom:1rpx solid #f3f3f3">
<view style="height:24rpx;width:6rpx;background-image: linear-gradient(180deg, #007AFF 0%, #027BFF 15%, #5AABFF 45%, #CAF4FE 100%);"></view>
<view class="text-black text-sg text-bold" style="margin-left: 12rpx">其他信息</view>
</view>
<view class="bg-white" style="padding:24rpx 30rpx" catchtap="noop">
<textarea name="evaluation" style="padding-top:16rpx" class="textarea {{ platform ? 'textatrea_ios_bug' : '' }}" maxlength="100" focus="{{ editing }}" bindfocus="handleEvaluationFocus" bindinput="handleEvaluationInput" bindconfirm="handleEvaluationConfirm" bindblur="handleEvaluationBlur" show-confirm-bar="{{ false }}" adjust-position="{{ false }}" value="{{ form.remark }}" fixed="{{ true }}" placeholder-style="color:#aaa" placeholder="{{'点击输入备注,最多100字'}}"></textarea>
</view>
</view>
</view>

39
pages/agent/appointment/index.wxss

@ -27,7 +27,7 @@
.textarea{
width:100%;
height:80px;
padding:12rpx;
padding: 12rpx;
font-size: 14px;
border: 1rpx solid #f3f3f3;
}
@ -48,3 +48,40 @@
width: 44rpx;
height: 44rpx;
}
.popup-evaluation__bg {
background: rgba(0, 0, 0, 0.2);
position: fixed;
left: 0;
right: 0;
top: 100%;
z-index: 66;
opacity: 0;
min-height: 100vh;
}
.popup-evaluation-wrap {
box-sizing: border-box;
background: #fff;
position: absolute;
top: 100%;
/* transition: .15s; */
width: 100%;
display: flex;
flex-direction: column;
}
/* 修复ios的padding bug 注:苹果手机中textarea自带会带"填充"且是小值为12 start */
.textatrea_ios_bug {
padding: 4rpx;
}
/* 获取焦点时的样式 start */
.is__show {
top:0;
opacity: 1;
/* transition: .35s; */
}
Loading…
Cancel
Save