|
|
@@ -24,19 +24,56 @@
|
|
|
<u-text :lines="1" size="24rpx" text="打卡记录"></u-text>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="main-form" v-if="!showList">
|
|
|
+ <u-form :model="form" :rules="rules" ref="form" label-width="0">
|
|
|
+ <u-form-item prop="punchVal" borderBottom customStyle="padding:40rpx 0 30rpx" @click="showCheckType = true">
|
|
|
+ <view class="form-label flex_l">
|
|
|
+ <view class="label-tag"></view>
|
|
|
+ 打卡类型
|
|
|
+ </view>
|
|
|
+ <u-input
|
|
|
+ :readonly="true"
|
|
|
+ placeholder="请选择销售模式"
|
|
|
+ v-model="form.punchVal"
|
|
|
+ border="none"
|
|
|
+ suffixIcon="arrow-down"
|
|
|
+ suffixIconStyle="color:#CDCDCD"
|
|
|
+ clearable
|
|
|
+ customStyle="padding: 0 30rpx 0 12rpx"></u-input>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item
|
|
|
+ prop="targetName"
|
|
|
+ borderBottom
|
|
|
+ customStyle="padding:40rpx 0 30rpx"
|
|
|
+ v-if="form.punchType > 10"
|
|
|
+ @click="openSelectUser()">
|
|
|
+ <view class="form-label flex_l">
|
|
|
+ <view class="label-tag"></view>
|
|
|
+ {{ form.punchType == 20 ? '客户' : '经销商' }}
|
|
|
+ </view>
|
|
|
+ <u-input
|
|
|
+ :readonly="true"
|
|
|
+ :placeholder="`请选择${form.punchType == 20 ? '客户' : '经销商'}`"
|
|
|
+ v-model="form.targetName"
|
|
|
+ border="none"
|
|
|
+ suffixIcon="arrow-down"
|
|
|
+ suffixIconStyle="color:#CDCDCD"
|
|
|
+ clearable
|
|
|
+ customStyle="padding: 0 30rpx 0 12rpx"></u-input>
|
|
|
+ </u-form-item>
|
|
|
+ </u-form>
|
|
|
+ </view>
|
|
|
<view class="main-container">
|
|
|
<template v-if="!showList">
|
|
|
<view class="btn" @click="checkIn">打卡</view>
|
|
|
<view class="location">
|
|
|
- <u-text @click="getLocation" :lines="1" :block="true" align="center" size="32rpx" :text="address">
|
|
|
- </u-text>
|
|
|
+ <u-text @click="getLocation" :lines="1" :block="true" align="center" size="32rpx" :text="address"></u-text>
|
|
|
<u-loading-icon mode="circle" size="24rpx" :show="show"></u-loading-icon>
|
|
|
</view>
|
|
|
</template>
|
|
|
- <u-list @scrolltolower="scrolltolower" v-else>
|
|
|
+ <u-list @scrolltolower="scrolltolower" lowerThreshold="200" v-else>
|
|
|
<u-list-item v-for="(item, index) in checkList" :key="index">
|
|
|
- <u-cell :title="item.punchTime" :label="item.punchLocation">
|
|
|
- </u-cell>
|
|
|
+ <u-cell :title="item.punchTime" :label="item.punchLocation"></u-cell>
|
|
|
</u-list-item>
|
|
|
</u-list>
|
|
|
</view>
|
|
|
@@ -48,26 +85,44 @@
|
|
|
<u-icon name="plus-circle-fill" color="blue" size="28"></u-icon>
|
|
|
</view>
|
|
|
</uni-file-picker> -->
|
|
|
+ <!-- 打卡类型 -->
|
|
|
+ <u-picker
|
|
|
+ :show="showCheckType"
|
|
|
+ :columns="[checkTypeColumns]"
|
|
|
+ keyName="value"
|
|
|
+ @cancel="showCheckType = false"
|
|
|
+ @confirm="pickCheckType"></u-picker>
|
|
|
+ <!-- 选择经销商 -->
|
|
|
+ <select-dealer ref="dealer" @close="closeDealer($event)"></select-dealer>
|
|
|
+ <!-- 选择客户 -->
|
|
|
+ <select-customer ref="cust" @close="closeCust($event)"></select-customer>
|
|
|
+ <u-notify ref="uNotify"></u-notify>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- mapGetters
|
|
|
- } from 'vuex'
|
|
|
+ import { mapGetters } from 'vuex'
|
|
|
import to from 'await-to-js'
|
|
|
import api from '@/api/system'
|
|
|
+ import SelectDealer from 'components/SelectDealer'
|
|
|
+ import SelectCustomer from 'components/SelectCustomer'
|
|
|
export default {
|
|
|
+ components: { SelectDealer, SelectCustomer },
|
|
|
data() {
|
|
|
return {
|
|
|
height: '',
|
|
|
paddingTop: '',
|
|
|
address: '获取定位',
|
|
|
+ showCheckType: false,
|
|
|
form: {
|
|
|
+ targetId: undefined, //经销商/代理商ID
|
|
|
+ targetName: undefined, //经销商/代理商名称
|
|
|
+ punchType: '', //打卡类型
|
|
|
+ punchVal: '',
|
|
|
punchLat: 0,
|
|
|
punchLng: 0,
|
|
|
punchLocation: '',
|
|
|
- punchImg: ''
|
|
|
+ punchImg: '',
|
|
|
},
|
|
|
show: false,
|
|
|
imageValue: [],
|
|
|
@@ -75,8 +130,24 @@
|
|
|
checkList: [],
|
|
|
queryForm: {
|
|
|
pageNum: 1,
|
|
|
- pageSize: 10
|
|
|
- }
|
|
|
+ pageSize: 10,
|
|
|
+ },
|
|
|
+ checkTypeColumns: [
|
|
|
+ { key: '10', value: '居家' },
|
|
|
+ { key: '20', value: '客户' },
|
|
|
+ { key: '30', value: '经销商' },
|
|
|
+ // { key: 40, value: '代理商' },
|
|
|
+ ],
|
|
|
+ rules: {
|
|
|
+ punchVal: [{ required: true, trigger: ['blur', 'change'], message: '请选择打卡类型' }],
|
|
|
+ targetName: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ trigger: ['blur', 'change'],
|
|
|
+ message: `请选择用户`,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -88,29 +159,65 @@
|
|
|
this.height = navData.height + 'px'
|
|
|
this.paddingTop = navData.top + 'px'
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ 'form.punchType'(val) {
|
|
|
+ this.form.targetId = undefined
|
|
|
+ this.form.targetName = undefined
|
|
|
+ },
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ // 选择打卡类型
|
|
|
+ pickCheckType(e) {
|
|
|
+ this.form.punchType = e.value[0].key
|
|
|
+ this.form.punchVal = e.value[0].value
|
|
|
+ this.showCheckType = false
|
|
|
+ },
|
|
|
+ // 经销商
|
|
|
+ closeDealer(dealer) {
|
|
|
+ if (dealer) {
|
|
|
+ this.form.targetId = dealer.id
|
|
|
+ this.form.targetName = dealer.name
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 关闭选择客户
|
|
|
+ closeCust(user) {
|
|
|
+ if (user) {
|
|
|
+ this.form.targetId = user.id
|
|
|
+ this.form.targetName = user.name
|
|
|
+ }
|
|
|
+ },
|
|
|
+ openSelectUser() {
|
|
|
+ if (this.form.punchType == 30) {
|
|
|
+ this.$refs.dealer.open()
|
|
|
+ } else {
|
|
|
+ this.$refs.cust.open()
|
|
|
+ }
|
|
|
+ },
|
|
|
getLocation() {
|
|
|
this.show = true
|
|
|
const _this = this
|
|
|
uni.getLocation({
|
|
|
type: 'wgs84',
|
|
|
- success: function(res) {
|
|
|
- const latitude = res.latitude.toString();
|
|
|
- const longitude = res.longitude.toString();
|
|
|
+ success: function (res) {
|
|
|
+ const latitude = res.latitude.toString()
|
|
|
+ const longitude = res.longitude.toString()
|
|
|
uni.request({
|
|
|
header: {
|
|
|
- "Content-Type": "application/text"
|
|
|
+ 'Content-Type': 'application/text',
|
|
|
},
|
|
|
- url: process.uniEnv.VUE_APP_PROTOCOL + 'apis.map.qq.com/ws/geocoder/v1/?location=' + latitude + ',' + longitude +
|
|
|
+ url:
|
|
|
+ process.uniEnv.VUE_APP_PROTOCOL +
|
|
|
+ 'apis.map.qq.com/ws/geocoder/v1/?location=' +
|
|
|
+ latitude +
|
|
|
+ ',' +
|
|
|
+ longitude +
|
|
|
'&key=6REBZ-BRN6J-BMAFY-FIRI3-SMK43-G3FXU',
|
|
|
success(re) {
|
|
|
if (re.statusCode === 200) {
|
|
|
- _this.address = re.data.result.address;
|
|
|
- _this.form = {
|
|
|
- punchLat: latitude,
|
|
|
- punchLng: longitude,
|
|
|
- punchLocation: re.data.result.address
|
|
|
- }
|
|
|
+ _this.address = re.data.result.address
|
|
|
+ _this.form.punchLat = latitude
|
|
|
+ _this.form.punchLng = longitude
|
|
|
+ _this.form.punchLocation = re.data.result.address
|
|
|
_this.show = false
|
|
|
} else {
|
|
|
_this.address = '点击重试'
|
|
|
@@ -120,13 +227,24 @@
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
- fail: err => _this.show = false
|
|
|
- });
|
|
|
+ fail: (err) => (_this.show = false),
|
|
|
+ })
|
|
|
},
|
|
|
- fail: err => _this.show = false
|
|
|
- });
|
|
|
+ fail: (err) => (_this.show = false),
|
|
|
+ })
|
|
|
},
|
|
|
async checkIn() {
|
|
|
+ const [fail, resp] = await to(this.$refs.form.validate())
|
|
|
+ console.log(fail)
|
|
|
+ if (fail && fail.length > 0) {
|
|
|
+ this.$refs.uNotify.show({
|
|
|
+ top: this.height + this.paddingTop + 10,
|
|
|
+ type: 'warning',
|
|
|
+ message: fail[0].message,
|
|
|
+ duration: 1000 * 3,
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
if (!this.form.punchLat || !this.form.punchLng) {
|
|
|
this.address = '点击重试'
|
|
|
return this.$refs.uToast.show({
|
|
|
@@ -139,12 +257,12 @@
|
|
|
const [err, res] = await uni.chooseImage({
|
|
|
count: 1, //默认9
|
|
|
sizeType: ['original'], //可以指定是原图还是压缩图,默认二者都有
|
|
|
- sourceType:['camera']
|
|
|
+ sourceType: ['camera'],
|
|
|
})
|
|
|
// console.log(res, 'rs');
|
|
|
if (err) return
|
|
|
this.select(res)
|
|
|
- res.tempFiles[0].name = (new Date()).getTime() + ''
|
|
|
+ res.tempFiles[0].name = new Date().getTime() + ''
|
|
|
res.tempFiles[0].type = ''
|
|
|
// console.log(res.tempFiles[0], typeof res.tempFiles[0])
|
|
|
},
|
|
|
@@ -170,7 +288,7 @@
|
|
|
},
|
|
|
success: (res) => {
|
|
|
this.form.punchImg = action
|
|
|
- api.checkIn(this.form).then(res => {
|
|
|
+ api.checkIn(this.form).then((res) => {
|
|
|
this.$refs.uToast.show({
|
|
|
type: 'success',
|
|
|
message: '打卡成功',
|
|
|
@@ -201,7 +319,6 @@
|
|
|
} else {
|
|
|
this.loadStatus = 'nomore'
|
|
|
}
|
|
|
-
|
|
|
},
|
|
|
scrolltolower() {
|
|
|
if (this.list.length < this.total && this.loadStatus != 'loading') {
|
|
|
@@ -216,7 +333,7 @@
|
|
|
delta: 1,
|
|
|
})
|
|
|
},
|
|
|
- }
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|