|
|
@@ -0,0 +1,239 @@
|
|
|
+<template>
|
|
|
+ <view >
|
|
|
+ <view class='wrap'>
|
|
|
+ <view class="c-row">
|
|
|
+ <view class="title">打卡原因</view>
|
|
|
+ <view class="con-list">
|
|
|
+ <u-radio-group @change="groupChange" v-model="typevalue">
|
|
|
+ <u-radio key="3" label="其他" name="3">其他</u-radio>
|
|
|
+ <u-radio key="1" label="上班/下班" name="1">上班/下班</u-radio>
|
|
|
+ </u-radio-group>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="c-row" v-if='show1'>
|
|
|
+ <view class="title">其他原因</view>
|
|
|
+ <view class="con-list">
|
|
|
+ <input type="digit" @input='calculate' name="otherReasons" v-model='detailData.otherReasons'
|
|
|
+ placeholder="请输入其他原因"></input>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="c-row">
|
|
|
+ <view class="title">目标位置</view>
|
|
|
+ <view class="con-list">
|
|
|
+ <view @click='show=true'>{{detailData.targetLocation}}</view>
|
|
|
+ <u-picker :range="warehouseBaseInfoList" range-key="warehouseName" @confirm='targetLPicker($event)'
|
|
|
+ v-model="show" mode="selector">
|
|
|
+ </u-picker>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="c-row">
|
|
|
+ <view class="title">打卡距离</view>
|
|
|
+ <view class="con-list">
|
|
|
+ <input type="number" v-model='clockDistance' placeholder="重新获取" :disabled="true"></input>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="footer">
|
|
|
+ <view @click='submit' class="button">提交</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ typevalue: '1',
|
|
|
+ show: false,
|
|
|
+ show1: false,
|
|
|
+ detailData: {
|
|
|
+ clockType: '',
|
|
|
+ otherReasons: '',
|
|
|
+ targetLocation: '请选择目标位置',
|
|
|
+ clockDistance: '重新获取',
|
|
|
+ },
|
|
|
+ clockDistance:"",
|
|
|
+ warehouseType:'1',
|
|
|
+ warehouseBaseInfoList:[],
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.getWarehouse()
|
|
|
+ // this.getLocation()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ calculate() {
|
|
|
+ const query = uni.createSelectorQuery().in(this);
|
|
|
+ query.selectAll('.left')
|
|
|
+ console.log(query)
|
|
|
+ },
|
|
|
+ groupChange(e) {
|
|
|
+ console.log(e)
|
|
|
+ this.detailData.clockType = e
|
|
|
+ if (e == 1 || e == null) {
|
|
|
+ this.show1 = false
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ this.show1 = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getWarehouse() {
|
|
|
+ this.$api.doRequest('get', '/warehouseBaseInfo/selectWarehouse', {
|
|
|
+ compId: uni.getStorageSync("pcUserInfo").compId,
|
|
|
+ warehouseType: '1'
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data.data.length != 0) {
|
|
|
+ this.warehouseBaseInfoList = res.data.data
|
|
|
+ uni.getLocation({
|
|
|
+ type: 'gcj02',
|
|
|
+ geocode: true,
|
|
|
+ success: function(res) {
|
|
|
+ console.log('获取位置数据：', res);
|
|
|
+ console.log('当前位置的经度：' + res.longitude);
|
|
|
+ console.log('当前位置的纬度：' + res.latitude);
|
|
|
+ this.lat2 = res.latitude
|
|
|
+ this.lng2 = res.longitude
|
|
|
+ if(this.warehouseBaseInfoList.length > 0){
|
|
|
+ this.clockDistance = this.utils.getDistance(this.warehouseBaseInfoList[0].warehousePositioning.split(',')[1],
|
|
|
+ this.warehouseBaseInfoList[0].warehousePositioning.split(',')[0], this.lat2, this.lng2)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail:function(req){
|
|
|
+ console.log(req)
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ targetLPicker(e) {
|
|
|
+ this.detailData.targetLocation = this.warehouseBaseInfoList[e[0]].warehouseName
|
|
|
+ this.clockDistance = this.utils.getDistance(this.warehouseBaseInfoList[e[0]].warehousePositioning.split(',')[1],
|
|
|
+ this.warehouseBaseInfoList[e[0]].warehousePositioning.split(',')[0], this.lat2, this.lng2)
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ // if (!this.detailData.clockType) {
|
|
|
+ // this.$api.msg('打卡原因不能为空')
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ // if (this.typevalue == 3) {
|
|
|
+ // if (!this.detailData.otherReasons) {
|
|
|
+ // this.$api.msg('其他原因不能为空')
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // if (!this.detailData.targetLocation) {
|
|
|
+ // this.$api.msg('目标位置不能为空')
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ uni.showModal({
|
|
|
+ content: "确定提交打卡信息？",
|
|
|
+ showCancel: true,
|
|
|
+ confirmText: '提交',
|
|
|
+ success: function(res) {
|
|
|
+ if (res.confirm) {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang='scss' scoped>
|
|
|
+ page {
|
|
|
+ background: #F5F6FA;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title_b {
|
|
|
+ margin: 20rpx 20rpx 0rpx 20rpx;
|
|
|
+ padding: 20rpx 10rpx 20rpx 10rpx;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 550;
|
|
|
+ }
|
|
|
+
|
|
|
+ .c-row {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -webkit-align-items: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .con-list {
|
|
|
+ -webkit-box-flex: 1;
|
|
|
+ -webkit-flex: 1;
|
|
|
+ flex: 1;
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-box-direction: normal;
|
|
|
+ -webkit-flex-direction: column;
|
|
|
+ flex-direction: column;
|
|
|
+ color: #303133;
|
|
|
+ line-height: 40rpx;
|
|
|
+ text-align: right;
|
|
|
+ padding-right: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wrap {
|
|
|
+ padding-bottom: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ background: #fff;
|
|
|
+ margin: 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+
|
|
|
+ input {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ >.title {
|
|
|
+ padding: 10px 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer {
|
|
|
+ background: #fff;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ padding: 20px 10px;
|
|
|
+ z-index: 10;
|
|
|
+
|
|
|
+ .button {
|
|
|
+ background: #22C572;
|
|
|
+ width: 90%;
|
|
|
+ margin: 20rpx auto;
|
|
|
+ padding: 10px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .buns_item {
|
|
|
+ display: flex;
|
|
|
+ padding: 80rpx 0 50rpx 0;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+
|
|
|
+ .but_css {
|
|
|
+ background: #22C572;
|
|
|
+ width: 40%;
|
|
|
+ padding: 20rpx;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.u-radio-group {
|
|
|
+ flex-direction: row-reverse;
|
|
|
+ }
|
|
|
+</style>
|
zxz