|
@@ -1,349 +1,378 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <view class="clock-details">
|
|
|
|
|
- <view class="clock-details__header">
|
|
|
|
|
- <view class="clock-details__title">
|
|
|
|
|
- <uni-icons type="location-filled" color="#fff"></uni-icons>
|
|
|
|
|
- <view class="text">
|
|
|
|
|
- {{address || '暂未获取到具体地址'}}
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="clock-details__title fixed-width" @click="updateCurrentLocation">
|
|
|
|
|
- <uni-icons :type="isPendingLocation?'spinner-cycle':'loop'" color="#fff"></uni-icons>
|
|
|
|
|
- <view class="text">
|
|
|
|
|
- 重新定位
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="clock-details__body">
|
|
|
|
|
- <view class="clock-details__img-container">
|
|
|
|
|
- <view class="clock-details__imgs">
|
|
|
|
|
- <view class="clock-details__img" v-for="item,index in urllist" :key="index+item">
|
|
|
|
|
- <view class="icon" @click="handleRemove(index)">
|
|
|
|
|
- <u-icon name="close" color="#fff"></u-icon>
|
|
|
|
|
- </view>
|
|
|
|
|
- <image :src="baseUrl+item" mode="aspectFit" class="img"></image>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="clock-details__upload" @click="chooseImage" v-if="urllist.length<3">
|
|
|
|
|
- <u-icon size="20" name="plus" color="#409eff"></u-icon>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="clock-details__area">
|
|
|
|
|
- <view class="clock-details__edit-icon" v-if="!isEdit" @click="isEdit=!isEdit">
|
|
|
|
|
- <uni-icons type="compose" color="#1B76FF"></uni-icons>
|
|
|
|
|
- </view>
|
|
|
|
|
- <u--textarea :focus="true" v-else v-model="message" placeholder="" :maxlength="200" autoHeight
|
|
|
|
|
- border="none">
|
|
|
|
|
- </u--textarea>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="clock-details__footer">
|
|
|
|
|
- <u-button type="primary" text="签到" @click="handleClockInSubmit"></u-button>
|
|
|
|
|
- </view>
|
|
|
|
|
- <!-- <ksp-image-cutter @ok="onok" @cancel="oncancle" :url="kpsurlL" :fixed="false" :blob="false" :maxWidth="500"
|
|
|
|
|
- :maxHeight="500"></ksp-image-cutter> -->
|
|
|
|
|
- <u-loading-page loading-text="加载中..." :loading="loading" font-size="16"></u-loading-page>
|
|
|
|
|
- </view>
|
|
|
|
|
|
|
+ <view class="clock-details">
|
|
|
|
|
+ <view class="clock-details__header">
|
|
|
|
|
+ <view class="clock-details__title">
|
|
|
|
|
+ <uni-icons type="location-filled" color="#fff"></uni-icons>
|
|
|
|
|
+ <view class="text">
|
|
|
|
|
+ {{ address || '暂未获取到具体地址' }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view
|
|
|
|
|
+ class="clock-details__title fixed-width"
|
|
|
|
|
+ @click="updateCurrentLocation"
|
|
|
|
|
+ >
|
|
|
|
|
+ <uni-icons
|
|
|
|
|
+ :type="isPendingLocation ? 'spinner-cycle' : 'loop'"
|
|
|
|
|
+ color="#fff"
|
|
|
|
|
+ ></uni-icons>
|
|
|
|
|
+ <view class="text"> 重新定位 </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="clock-details__body">
|
|
|
|
|
+ <view class="clock-details__img-container">
|
|
|
|
|
+ <view class="clock-details__imgs">
|
|
|
|
|
+ <view
|
|
|
|
|
+ class="clock-details__img"
|
|
|
|
|
+ v-for="(item, index) in urllist"
|
|
|
|
|
+ :key="index + item"
|
|
|
|
|
+ >
|
|
|
|
|
+ <view class="icon" @click="handleRemove(index)">
|
|
|
|
|
+ <u-icon name="close" color="#fff"></u-icon>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <image :src="baseUrl + item" mode="aspectFit" class="img"></image>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view
|
|
|
|
|
+ class="clock-details__upload"
|
|
|
|
|
+ @click="chooseImage"
|
|
|
|
|
+ v-if="urllist.length < 3"
|
|
|
|
|
+ >
|
|
|
|
|
+ <u-icon size="20" name="plus" color="#409eff"></u-icon>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="clock-details__area">
|
|
|
|
|
+ <view
|
|
|
|
|
+ class="clock-details__edit-icon"
|
|
|
|
|
+ v-if="!isEdit"
|
|
|
|
|
+ @click="isEdit = !isEdit"
|
|
|
|
|
+ >
|
|
|
|
|
+ <uni-icons type="compose" color="#1B76FF"></uni-icons>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <u--textarea
|
|
|
|
|
+ :focus="true"
|
|
|
|
|
+ v-else
|
|
|
|
|
+ v-model="message"
|
|
|
|
|
+ placeholder=""
|
|
|
|
|
+ :maxlength="200"
|
|
|
|
|
+ autoHeight
|
|
|
|
|
+ border="none"
|
|
|
|
|
+ >
|
|
|
|
|
+ </u--textarea>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="clock-details__footer">
|
|
|
|
|
+ <u-button
|
|
|
|
|
+ type="primary"
|
|
|
|
|
+ text="签到"
|
|
|
|
|
+ @click="handleClockInSubmit"
|
|
|
|
|
+ ></u-button>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <u-loading-page
|
|
|
|
|
+ loading-text="加载中..."
|
|
|
|
|
+ :loading="loading"
|
|
|
|
|
+ font-size="16"
|
|
|
|
|
+ ></u-loading-page>
|
|
|
|
|
+ </view>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
- import * as taskService from '@/service/task.js';
|
|
|
|
|
- import {
|
|
|
|
|
- Debounce
|
|
|
|
|
- } from "@/util/anitthro.js";
|
|
|
|
|
- import {
|
|
|
|
|
- pullAt
|
|
|
|
|
- } from 'lodash-es';
|
|
|
|
|
|
|
+import * as taskService from '@/service/task.js'
|
|
|
|
|
+import { Debounce } from '@/util/anitthro.js'
|
|
|
|
|
+import { pullAt } from 'lodash-es'
|
|
|
|
|
|
|
|
- export default {
|
|
|
|
|
- data() {
|
|
|
|
|
- return {
|
|
|
|
|
- isEdit: false,
|
|
|
|
|
- // latitude: 39.909,
|
|
|
|
|
- // longitude: 116.39742,
|
|
|
|
|
- latitude: 0,
|
|
|
|
|
- longitude: 0,
|
|
|
|
|
- address: '',
|
|
|
|
|
- taskID: '',
|
|
|
|
|
- message: "",
|
|
|
|
|
- logs: [],
|
|
|
|
|
- kpsurlL: '',
|
|
|
|
|
- urllist: [],
|
|
|
|
|
- loading: false,
|
|
|
|
|
- isPendingLocation: false,
|
|
|
|
|
- };
|
|
|
|
|
- },
|
|
|
|
|
- onLoad(options) {
|
|
|
|
|
- console.warn('clock detail ', options)
|
|
|
|
|
- this.message = '';
|
|
|
|
|
- this.urllist = [];
|
|
|
|
|
- this.taskID = options.taskID;
|
|
|
|
|
- },
|
|
|
|
|
- mounted() {
|
|
|
|
|
- console.log('mounted clock detail')
|
|
|
|
|
- this.updateCurrentLocation();
|
|
|
|
|
- },
|
|
|
|
|
- methods: {
|
|
|
|
|
- updateCurrentLocation() {
|
|
|
|
|
- console.log('updateCurrentLocation ')
|
|
|
|
|
- if (this.isPendingLocation) {
|
|
|
|
|
- return
|
|
|
|
|
- }
|
|
|
|
|
|
|
+export default {
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ isEdit: false,
|
|
|
|
|
+ latitude: 0,
|
|
|
|
|
+ longitude: 0,
|
|
|
|
|
+ address: '',
|
|
|
|
|
+ taskID: '',
|
|
|
|
|
+ message: '',
|
|
|
|
|
+ logs: [],
|
|
|
|
|
+ kpsurlL: '',
|
|
|
|
|
+ urllist: [],
|
|
|
|
|
+ loading: false,
|
|
|
|
|
+ isPendingLocation: false,
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ onLoad(options) {
|
|
|
|
|
+ console.warn('clock detail ', options)
|
|
|
|
|
+ this.message = ''
|
|
|
|
|
+ this.urllist = []
|
|
|
|
|
+ this.taskID = options.taskID
|
|
|
|
|
+ },
|
|
|
|
|
+ mounted() {
|
|
|
|
|
+ console.log('mounted clock detail')
|
|
|
|
|
+ this.updateCurrentLocation()
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ updateCurrentLocation() {
|
|
|
|
|
+ console.log('updateCurrentLocation ')
|
|
|
|
|
+ if (this.isPendingLocation) {
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- this.isPendingLocation = true;
|
|
|
|
|
- uni.getLocation({
|
|
|
|
|
- type: 'gcj02',
|
|
|
|
|
- // altitude: true, // 高度
|
|
|
|
|
- geocode: true,
|
|
|
|
|
- success: (res) => {
|
|
|
|
|
- console.warn(res, 'get location')
|
|
|
|
|
- console.log('当前位置的经度1:' + res.longitude);
|
|
|
|
|
- console.log('当前位置的纬度1:' + res.latitude);
|
|
|
|
|
|
|
+ this.isPendingLocation = true
|
|
|
|
|
+ uni.getLocation({
|
|
|
|
|
+ type: 'gcj02',
|
|
|
|
|
+ // altitude: true, // 高度
|
|
|
|
|
+ geocode: true,
|
|
|
|
|
+ success: (res) => {
|
|
|
|
|
+ console.warn(res, 'get location')
|
|
|
|
|
+ console.log('当前位置的经度1:' + res.longitude)
|
|
|
|
|
+ console.log('当前位置的纬度1:' + res.latitude)
|
|
|
|
|
|
|
|
- this.logs.push(`center-position:当前位置的经度${res.longitude};当前位置的纬度${res.latitude}`)
|
|
|
|
|
|
|
+ this.logs.push(
|
|
|
|
|
+ `center-position:当前位置的经度${res.longitude};当前位置的纬度${res.latitude}`
|
|
|
|
|
+ )
|
|
|
|
|
|
|
|
- this.latitude = res.latitude;
|
|
|
|
|
- this.longitude = res.longitude;
|
|
|
|
|
|
|
+ this.latitude = res.latitude
|
|
|
|
|
+ this.longitude = res.longitude
|
|
|
|
|
|
|
|
- if (res.address) {
|
|
|
|
|
- const {
|
|
|
|
|
- country,
|
|
|
|
|
- province,
|
|
|
|
|
- city,
|
|
|
|
|
- district,
|
|
|
|
|
- street,
|
|
|
|
|
- streetNum,
|
|
|
|
|
- poiName
|
|
|
|
|
- } = res.address || {};
|
|
|
|
|
- this.address = province + city + district + street + streetNum + poiName;
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- fail(err) {
|
|
|
|
|
- console.warn(err, 'get location error')
|
|
|
|
|
- },
|
|
|
|
|
- complete: () => {
|
|
|
|
|
- console.log('complete get location')
|
|
|
|
|
- this.isPendingLocation = false;
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- },
|
|
|
|
|
- validate() {
|
|
|
|
|
- if (!this.address) {
|
|
|
|
|
- throw new Error('请重新获取下定位信息');
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ if (res.address) {
|
|
|
|
|
+ const {
|
|
|
|
|
+ country,
|
|
|
|
|
+ province,
|
|
|
|
|
+ city,
|
|
|
|
|
+ district,
|
|
|
|
|
+ street,
|
|
|
|
|
+ streetNum,
|
|
|
|
|
+ poiName,
|
|
|
|
|
+ } = res.address || {}
|
|
|
|
|
+ this.address =
|
|
|
|
|
+ province + city + district + street + streetNum + poiName
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ fail(err) {
|
|
|
|
|
+ console.warn(err, 'get location error')
|
|
|
|
|
+ },
|
|
|
|
|
+ complete: () => {
|
|
|
|
|
+ console.log('complete get location')
|
|
|
|
|
+ this.isPendingLocation = false
|
|
|
|
|
+ },
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ validate() {
|
|
|
|
|
+ if (!this.address) {
|
|
|
|
|
+ throw new Error('请重新获取下定位信息')
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- if (!this.taskID) {
|
|
|
|
|
- throw new Error('请返回重新进行打卡操作');
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ if (!this.taskID) {
|
|
|
|
|
+ throw new Error('请返回重新进行打卡操作')
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- if (!this.latitude && !this.longitude) {
|
|
|
|
|
- throw new Error('请重新获取下定位信息');
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ if (!this.latitude && !this.longitude) {
|
|
|
|
|
+ throw new Error('请重新获取下定位信息')
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- if (!this.urllist.length) {
|
|
|
|
|
- throw new Error('请先拍摄图片再进行打卡');
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ if (!this.urllist.length) {
|
|
|
|
|
+ throw new Error('请先拍摄图片再进行打卡')
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- if (!this.message) {
|
|
|
|
|
- throw new Error('请输入内容');
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- // 签到提交
|
|
|
|
|
- handleClockInSubmit() {
|
|
|
|
|
- try {
|
|
|
|
|
- this.validate();
|
|
|
|
|
- } catch (error) {
|
|
|
|
|
- return uni.$u.toast(error.message);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ if (!this.message) {
|
|
|
|
|
+ throw new Error('请输入内容')
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ // 签到提交
|
|
|
|
|
+ handleClockInSubmit() {
|
|
|
|
|
+ try {
|
|
|
|
|
+ this.validate()
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ return uni.$u.toast(error.message)
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- this.loading = true;
|
|
|
|
|
- console.log(this.urllist, '------------- clock in submit')
|
|
|
|
|
- const payload = {
|
|
|
|
|
- task_id: this.taskID,
|
|
|
|
|
- message: this.message,
|
|
|
|
|
- img_list: JSON.stringify(this.urllist),
|
|
|
|
|
- address: this.address,
|
|
|
|
|
- lng: this.longitude,
|
|
|
|
|
- lat: this.latitude
|
|
|
|
|
- }
|
|
|
|
|
- console.warn(payload, 'clock in data');
|
|
|
|
|
- taskService.addTaskClockInData(payload).then(res => {
|
|
|
|
|
- uni.$u.toast('打卡成功');
|
|
|
|
|
- // TODO 返回上一页
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- uni.switchTab({
|
|
|
|
|
- url: '/pages/index/index'
|
|
|
|
|
- })
|
|
|
|
|
- })
|
|
|
|
|
- }).finally(() => {
|
|
|
|
|
- this.loading = false;
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- chooseImage() {
|
|
|
|
|
- uni.chooseImage({
|
|
|
|
|
- count: 1, //默认9
|
|
|
|
|
- sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
|
|
|
|
|
- sourceType: ['camera', 'album'], //从相册选择
|
|
|
|
|
- success: (res) => {
|
|
|
|
|
- console.log(res)
|
|
|
|
|
- // this.urllist.push(res.tempFilePaths[0])
|
|
|
|
|
- // this.kpsurlL = res.tempFilePaths[0]
|
|
|
|
|
-
|
|
|
|
|
- this.onok({path:res.tempFilePaths[0]})
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- },
|
|
|
|
|
- handleRemove(index) {
|
|
|
|
|
- console.log(index, 'handle remove', this.urllist)
|
|
|
|
|
- if (index !== undefined) {
|
|
|
|
|
- // pullAt(this.urllist, index)
|
|
|
|
|
- this.urllist.splice(index, 1)
|
|
|
|
|
- console.log(this.urllist, 'remove finished ')
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- oncancle() {
|
|
|
|
|
- this.kpsurlL = ""
|
|
|
|
|
- },
|
|
|
|
|
- onok(ev) {
|
|
|
|
|
- this.loading = true;
|
|
|
|
|
- Debounce(() => {
|
|
|
|
|
- uni.uploadFile({
|
|
|
|
|
- url: this.baseUrl +
|
|
|
|
|
- '/api/api_gateway?method=monitor_manage.cbd_manage.add_img', //仅为示例,非真实的接口地址
|
|
|
|
|
- filePath: ev.path,
|
|
|
|
|
- name: 'img_file',
|
|
|
|
|
- success: (uploadFileRes) => {
|
|
|
|
|
- console.log(JSON.parse(uploadFileRes.data).data.src)
|
|
|
|
|
- this.urllist.push(JSON.parse(uploadFileRes.data).data.src)
|
|
|
|
|
- console.log(this.urllist, ' upload file')
|
|
|
|
|
- this.kpsurlL = ""
|
|
|
|
|
-
|
|
|
|
|
- this.loading = false;
|
|
|
|
|
- },
|
|
|
|
|
- complete() {
|
|
|
|
|
- console.log('上传完成 1355566')
|
|
|
|
|
- this.loading = false;
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- }, 1000)()
|
|
|
|
|
- },
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ this.loading = true
|
|
|
|
|
+ console.log(this.urllist, '------------- clock in submit')
|
|
|
|
|
+ const payload = {
|
|
|
|
|
+ task_id: this.taskID,
|
|
|
|
|
+ message: this.message,
|
|
|
|
|
+ img_list: JSON.stringify(this.urllist),
|
|
|
|
|
+ address: this.address,
|
|
|
|
|
+ lng: this.longitude,
|
|
|
|
|
+ lat: this.latitude,
|
|
|
|
|
+ }
|
|
|
|
|
+ console.warn(payload, 'clock in data')
|
|
|
|
|
+ taskService
|
|
|
|
|
+ .addTaskClockInData(payload)
|
|
|
|
|
+ .then((res) => {
|
|
|
|
|
+ uni.$u.toast('打卡成功')
|
|
|
|
|
+ // TODO 返回上一页
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ uni.switchTab({
|
|
|
|
|
+ url: '/pages/index/index',
|
|
|
|
|
+ })
|
|
|
|
|
+ })
|
|
|
|
|
+ })
|
|
|
|
|
+ .finally(() => {
|
|
|
|
|
+ this.loading = false
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ chooseImage() {
|
|
|
|
|
+ uni.chooseImage({
|
|
|
|
|
+ count: 1, //默认9
|
|
|
|
|
+ sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
|
|
|
|
|
+ sourceType: ['camera', 'album'], //从相册选择
|
|
|
|
|
+ success: (res) => {
|
|
|
|
|
+ console.log(res)
|
|
|
|
|
+ // this.urllist.push(res.tempFilePaths[0])
|
|
|
|
|
+ // this.kpsurlL = res.tempFilePaths[0]
|
|
|
|
|
+
|
|
|
|
|
+ this.onok({ path: res.tempFilePaths[0] })
|
|
|
|
|
+ },
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ handleRemove(index) {
|
|
|
|
|
+ console.log(index, 'handle remove', this.urllist)
|
|
|
|
|
+ if (index !== undefined) {
|
|
|
|
|
+ // pullAt(this.urllist, index)
|
|
|
|
|
+ this.urllist.splice(index, 1)
|
|
|
|
|
+ console.log(this.urllist, 'remove finished ')
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ oncancle() {
|
|
|
|
|
+ this.kpsurlL = ''
|
|
|
|
|
+ },
|
|
|
|
|
+ onok(ev) {
|
|
|
|
|
+ this.loading = true
|
|
|
|
|
+ Debounce(() => {
|
|
|
|
|
+ uni.uploadFile({
|
|
|
|
|
+ url:
|
|
|
|
|
+ this.baseUrl +
|
|
|
|
|
+ '/api/api_gateway?method=monitor_manage.cbd_manage.add_img', //仅为示例,非真实的接口地址
|
|
|
|
|
+ filePath: ev.path,
|
|
|
|
|
+ name: 'img_file',
|
|
|
|
|
+ success: (uploadFileRes) => {
|
|
|
|
|
+ console.log(JSON.parse(uploadFileRes.data).data.src)
|
|
|
|
|
+ this.urllist.push(JSON.parse(uploadFileRes.data).data.src)
|
|
|
|
|
+ console.log(this.urllist, ' upload file')
|
|
|
|
|
+ this.kpsurlL = ''
|
|
|
|
|
+
|
|
|
|
|
+ this.loading = false
|
|
|
|
|
+ },
|
|
|
|
|
+ complete() {
|
|
|
|
|
+ console.log('上传完成 1355566')
|
|
|
|
|
+ this.loading = false
|
|
|
|
|
+ },
|
|
|
|
|
+ })
|
|
|
|
|
+ }, 1000)()
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
- .clock-details {
|
|
|
|
|
- &__header {
|
|
|
|
|
- height: 320rpx;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- justify-content: space-between;
|
|
|
|
|
- align-items: flex-start;
|
|
|
|
|
- background-image: url(~@/static/image/task/clock.png);
|
|
|
|
|
- background-size: 100%;
|
|
|
|
|
- background-repeat: no-repeat;
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
|
|
+.clock-details {
|
|
|
|
|
+ &__header {
|
|
|
|
|
+ height: 320rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: flex-start;
|
|
|
|
|
+ background-image: url(~@/static/image/task/clock.png);
|
|
|
|
|
+ background-size: 100%;
|
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- &__title {
|
|
|
|
|
- // width: 0;
|
|
|
|
|
- flex: 1 1 auto;
|
|
|
|
|
- padding: 48rpx 24rpx;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: flex-start;
|
|
|
|
|
- font-size: 12px;
|
|
|
|
|
- line-height: 18px;
|
|
|
|
|
- color: #FFFFFF;
|
|
|
|
|
|
|
+ &__title {
|
|
|
|
|
+ // width: 0;
|
|
|
|
|
+ flex: 1 1 auto;
|
|
|
|
|
+ padding: 48rpx 24rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: flex-start;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ line-height: 18px;
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
|
|
|
- .text {
|
|
|
|
|
- margin-left: 10rpx;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .text {
|
|
|
|
|
+ margin-left: 10rpx;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- &.fixed-width {
|
|
|
|
|
- width: 140rpx;
|
|
|
|
|
- flex: 0 0 auto;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &.fixed-width {
|
|
|
|
|
+ width: 140rpx;
|
|
|
|
|
+ flex: 0 0 auto;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- &__upload {
|
|
|
|
|
- width: 144rpx;
|
|
|
|
|
- height: 144rpx;
|
|
|
|
|
- border: 1px dashed #409eff;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- justify-content: space-around;
|
|
|
|
|
- margin-left: 32rpx;
|
|
|
|
|
- margin-bottom: 30rpx;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &__upload {
|
|
|
|
|
+ width: 144rpx;
|
|
|
|
|
+ height: 144rpx;
|
|
|
|
|
+ border: 1px dashed #409eff;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-around;
|
|
|
|
|
+ margin-left: 32rpx;
|
|
|
|
|
+ margin-bottom: 30rpx;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- &__img-container {
|
|
|
|
|
- border-bottom: 1px solid rgba(151, 151, 151, 0.09);
|
|
|
|
|
- // @include hairline-bottom(rgba(151, 151, 151, 0.09));
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &__img-container {
|
|
|
|
|
+ border-bottom: 1px solid rgba(151, 151, 151, 0.09);
|
|
|
|
|
+ // @include hairline-bottom(rgba(151, 151, 151, 0.09));
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- &__imgs {
|
|
|
|
|
- position: relative;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-wrap: wrap;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- padding: 40rpx 0;
|
|
|
|
|
- margin-left: -32rpx;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &__imgs {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding: 40rpx 0;
|
|
|
|
|
+ margin-left: -32rpx;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- &__img {
|
|
|
|
|
- flex: 0 0 auto;
|
|
|
|
|
- width: 198rpx;
|
|
|
|
|
- height: 198rpx;
|
|
|
|
|
- margin-left: 32rpx;
|
|
|
|
|
- margin-bottom: 30rpx;
|
|
|
|
|
- position: relative;
|
|
|
|
|
|
|
+ &__img {
|
|
|
|
|
+ flex: 0 0 auto;
|
|
|
|
|
+ width: 198rpx;
|
|
|
|
|
+ height: 198rpx;
|
|
|
|
|
+ margin-left: 32rpx;
|
|
|
|
|
+ margin-bottom: 30rpx;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
|
|
|
- .img {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .img {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- .icon {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: -20rpx;
|
|
|
|
|
- right: -20rpx;
|
|
|
|
|
- z-index: 9;
|
|
|
|
|
- width: 40rpx;
|
|
|
|
|
- height: 40rpx;
|
|
|
|
|
- border-radius: 50%;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- justify-content: space-around;
|
|
|
|
|
- background-color: red;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .icon {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: -20rpx;
|
|
|
|
|
+ right: -20rpx;
|
|
|
|
|
+ z-index: 9;
|
|
|
|
|
+ width: 40rpx;
|
|
|
|
|
+ height: 40rpx;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-around;
|
|
|
|
|
+ background-color: red;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- &__body {
|
|
|
|
|
- min-height: 600rpx;
|
|
|
|
|
- padding: 0 24rpx;
|
|
|
|
|
- margin: -156rpx 24rpx 0;
|
|
|
|
|
- border-radius: 16rpx;
|
|
|
|
|
- background-color: #fff;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &__body {
|
|
|
|
|
+ min-height: 600rpx;
|
|
|
|
|
+ padding: 0 24rpx;
|
|
|
|
|
+ margin: -156rpx 24rpx 0;
|
|
|
|
|
+ border-radius: 16rpx;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- &__area {
|
|
|
|
|
- font-size: 12px;
|
|
|
|
|
- line-height: 18px;
|
|
|
|
|
- color: #656565;
|
|
|
|
|
- font-weight: 400;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &__area {
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ line-height: 18px;
|
|
|
|
|
+ color: #656565;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- &__edit-icon {
|
|
|
|
|
- padding: 24rpx 0;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &__edit-icon {
|
|
|
|
|
+ padding: 24rpx 0;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- &__footer {
|
|
|
|
|
- position: fixed;
|
|
|
|
|
- left: 76rpx;
|
|
|
|
|
- right: 76rpx;
|
|
|
|
|
- bottom: 110rpx;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &__footer {
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ left: 76rpx;
|
|
|
|
|
+ right: 76rpx;
|
|
|
|
|
+ bottom: 110rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|
|
|
<style>
|
|
<style>
|
|
|
- page {
|
|
|
|
|
- background: #F7F8FB;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+page {
|
|
|
|
|
+ background: #f7f8fb;
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|