|
|
@@ -1,756 +1,758 @@
|
|
|
-<template>
|
|
|
- <view class="container">
|
|
|
- <uni-swipe-action>
|
|
|
- <uni-swipe-action-item :right-options="options" @click="bindClick" @change="swipeChange($event, item.sos_id)"
|
|
|
- v-for="(item,index) in list">
|
|
|
- <view class="list">
|
|
|
- <view class="box">
|
|
|
- <view class="box-1">
|
|
|
- <view class="box-2">
|
|
|
- <view class="box-time">
|
|
|
- 求救时间：{{item.createtime | time}}
|
|
|
- </view>
|
|
|
- <view class="box-time" v-if="item.address">
|
|
|
- 救援地址：{{item.address}}
|
|
|
- </view>
|
|
|
- <view class="box-time" v-if="item.status == 1">
|
|
|
- 联系方式：{{item.user_phone}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="navImg" @click="toNav(item, index)">
|
|
|
- <image src="../../static/img/img10.png" mode=""></image>
|
|
|
- <view class="tip">导航</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="box-sub-box" v-if="item.status == 0">
|
|
|
- <view class="sub-box1" @click="agree(item,index)">
|
|
|
- 接受
|
|
|
- </view>
|
|
|
- <view class="sub-box2" @click="refuse(item,index)">
|
|
|
- 拒绝
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="box-sub-box">
|
|
|
- <view class="red-font" v-if="item.status == 1">
|
|
|
- 已接受
|
|
|
- </view>
|
|
|
- <view class="red-font" v-if="item.status == -1">
|
|
|
- 已拒绝
|
|
|
- </view>
|
|
|
- <view class="sub-box3" v-if="item.status == 1" @click=" item.status == 1 ? tocall(item.user_phone): ''">
|
|
|
- <image src="../../static/icon/call.png" mode="" class="call"></image>
|
|
|
- 拨打电话
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- <view class="remove" @click="delItem">删除</view> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-swipe-action-item>
|
|
|
- </uni-swipe-action>
|
|
|
- <empty v-if="list.length === 0"></empty>
|
|
|
- <uni-load-more :status="loadingType"></uni-load-more>
|
|
|
- <uni-popup ref="popup" type="bottom" @click="close">
|
|
|
- <view class="popup_row">
|
|
|
- <view class="rows">
|
|
|
- <view class="rows-item" @click="toGaodeMap">
|
|
|
- 高德地图
|
|
|
- </view>
|
|
|
- <view class="rows-item" @click="tobaiDuMap">
|
|
|
- 百度地图
|
|
|
- </view>
|
|
|
- <view class="rows-item" @click="totengxunMap">
|
|
|
- 腾讯地图
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-popup>
|
|
|
-
|
|
|
- <uni-popup ref="popup1" type="center">
|
|
|
- <view class="popup-box">
|
|
|
- <view class="img">
|
|
|
- <image src="../../static/img/map.jpg" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="mian">
|
|
|
- <view class="delivery">
|
|
|
- 救援记录
|
|
|
- <!-- {{ i18n.qrhwsdm }} -->
|
|
|
- </view>
|
|
|
- <view class="nocancel">
|
|
|
- 确认删除该记录吗？
|
|
|
- <!-- {{ i18n.wfcx }} -->
|
|
|
- </view>
|
|
|
- <view class="comfirm-box">
|
|
|
- <view class="cancel" @click="cancel">
|
|
|
- 取消
|
|
|
- </view>
|
|
|
- <view class="comfirm" @click="comfirm(tmp)">
|
|
|
- 确认
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </uni-popup>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import {
|
|
|
- deleteList,
|
|
|
- getrescue,
|
|
|
- change_rescue
|
|
|
- } from '@/api/index.js';
|
|
|
- import {
|
|
|
- getRescueList,
|
|
|
- changeRescue,
|
|
|
- geocoder
|
|
|
- } from '@/api/category.js'
|
|
|
-
|
|
|
- import empty from '@/components/empty';
|
|
|
- import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
|
|
|
- import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
|
|
- import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue';
|
|
|
- import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue';
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- empty,
|
|
|
- uniPopup,
|
|
|
- uniLoadMore,
|
|
|
- uniSwipeAction,
|
|
|
- uniSwipeActionItem
|
|
|
- },
|
|
|
- filters: {
|
|
|
- time(val) {
|
|
|
- let str = ''
|
|
|
- if (val) {
|
|
|
- var time = new Date(val * 1000);
|
|
|
- var y = time.getFullYear();
|
|
|
- var m = time.getMonth() + 1;
|
|
|
- var d = time.getDate();
|
|
|
- var h = time.getHours();
|
|
|
- var mm = time.getMinutes();
|
|
|
- var s = time.getSeconds();
|
|
|
- str = y + '-' + m + '-' + d + ' ' + h + ":" + mm
|
|
|
- console.log(str)
|
|
|
- }
|
|
|
- return str
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- id: '',
|
|
|
- tmp: '',
|
|
|
- options: [{
|
|
|
- text: '取消',
|
|
|
- style: {
|
|
|
- backgroundColor: '#007aff'
|
|
|
- }
|
|
|
- }, {
|
|
|
- text: '确认',
|
|
|
- style: {
|
|
|
- backgroundColor: '#C90F1B'
|
|
|
- }
|
|
|
- }],
|
|
|
- page: 1,
|
|
|
- limit: 10,
|
|
|
- list: [],
|
|
|
- loadingType: 'more',
|
|
|
- latitude2: '',
|
|
|
- longitude2: '',
|
|
|
- longitude4: '',
|
|
|
- latitude4: '',
|
|
|
- address: '',
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
- this.loadData();
|
|
|
- // this.getRescueList()
|
|
|
- let obj = this;
|
|
|
- try {
|
|
|
- let locationAddress
|
|
|
- // #ifdef H5
|
|
|
- let wxOjb = require('jweixin-module');
|
|
|
- locationAddress = wxOjb.getLocation;
|
|
|
- // #endif
|
|
|
- // #ifdef MP
|
|
|
- locationAddress = uni.getLocation;
|
|
|
- // #endif
|
|
|
- // #ifdef H5
|
|
|
- wxOjb.ready(() => {
|
|
|
- console.log('加载完毕注册事件');
|
|
|
- locationAddress({
|
|
|
- type: 'wgs84',
|
|
|
- success: function(res) {
|
|
|
- console.log('获取经纬度', res);
|
|
|
- obj.longitude4 = res.longitude
|
|
|
- obj.latitude4 = res.latitude
|
|
|
- // obj.loadData();
|
|
|
- },
|
|
|
- fail(e) {
|
|
|
- console.log('失败', e);
|
|
|
- window.location.reload();
|
|
|
- }
|
|
|
- });
|
|
|
- })
|
|
|
- // #endif
|
|
|
-
|
|
|
- // #ifdef MP
|
|
|
- locationAddress({
|
|
|
- type: 'wgs84',
|
|
|
- success: function(res) {
|
|
|
- console.log('获取经纬度', res);
|
|
|
- obj.longitude4 = res.longitude
|
|
|
- obj.latitude4 = res.latitude
|
|
|
- // obj.loadData();
|
|
|
- },
|
|
|
- fail(e) {
|
|
|
- console.log('失败', e);
|
|
|
- window.location.reload();
|
|
|
- }
|
|
|
- });
|
|
|
- // #endif
|
|
|
- } catch (e) {
|
|
|
- let locationAddress
|
|
|
- // #ifdef H5
|
|
|
- let wxOjb = require('jweixin-module');
|
|
|
- locationAddress = wxOjb.getLocation;
|
|
|
- // #endif
|
|
|
- // #ifdef MP
|
|
|
- locationAddress = uni.getLocation;
|
|
|
- // #endif
|
|
|
- // #ifdef H5
|
|
|
- wxOjb.ready(() => {
|
|
|
- console.log('加载完毕注册事件');
|
|
|
- locationAddress({
|
|
|
- type: 'wgs84',
|
|
|
- success: function(res) {
|
|
|
- console.log('获取经纬度', res);
|
|
|
- obj.longitude4 = res.longitude
|
|
|
- obj.latitude4 = res.latitude
|
|
|
- // obj.loadData();
|
|
|
- },
|
|
|
- fail(e) {
|
|
|
- console.log('失败', e);
|
|
|
- window.location.reload();
|
|
|
- }
|
|
|
- });
|
|
|
- })
|
|
|
- // #endif
|
|
|
- // #ifdef MP
|
|
|
- locationAddress({
|
|
|
- type: 'wgs84',
|
|
|
- success: function(res) {
|
|
|
- console.log('获取经纬度', res);
|
|
|
- obj.longitude4 = res.longitude
|
|
|
- obj.latitude4 = res.latitude
|
|
|
- // obj.loadData();
|
|
|
- },
|
|
|
- fail(e) {
|
|
|
- console.log('失败', e);
|
|
|
- window.location.reload();
|
|
|
- }
|
|
|
- });
|
|
|
- // #endif
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- geocoder(lat, lon) {
|
|
|
- geocoder({
|
|
|
- latitude: lat,
|
|
|
- longitude: lon
|
|
|
- }).then(res => {
|
|
|
- console.log(res.data.result.address)
|
|
|
- return res.data.result.address
|
|
|
- })
|
|
|
- },
|
|
|
- getRescueList() {
|
|
|
- getRescueList({
|
|
|
- type: 1,
|
|
|
- page: 1,
|
|
|
- limit: 10
|
|
|
- }).then(res => {
|
|
|
- console.log(res)
|
|
|
- })
|
|
|
- },
|
|
|
- bindClick(e) {
|
|
|
- if (e.content.text == '取消') {
|
|
|
- console.log('点击了左侧取消按钮')
|
|
|
- } else {
|
|
|
- console.log('点击了右侧确认按钮')
|
|
|
- // this.$refs.popup1.open(this.tmp);
|
|
|
- this.open(this.id)
|
|
|
- }
|
|
|
- },
|
|
|
- swipeChange(e, id) {
|
|
|
- this.id = id
|
|
|
- console.log('id111111111', id)
|
|
|
- },
|
|
|
- // 确认删除吗？
|
|
|
- comfirm(id) {
|
|
|
- console.log(9999888, id)
|
|
|
- deleteList({
|
|
|
- id: this.id
|
|
|
- }).then(({
|
|
|
- data
|
|
|
- }) => {
|
|
|
- window.location.reload(); //重新刷新页面
|
|
|
- this.loadData()
|
|
|
- this.cancel()
|
|
|
- })
|
|
|
- },
|
|
|
- // 取消
|
|
|
- cancel() {
|
|
|
- this.$refs.popup1.close();
|
|
|
- },
|
|
|
- // 打开弹窗
|
|
|
- open(tmp) {
|
|
|
- console.log('打开弹窗', tmp)
|
|
|
- this.$refs.popup1.open(tmp)
|
|
|
- },
|
|
|
- async loadData() {
|
|
|
- let obj = this;
|
|
|
- if (obj.loadingType === 'noMore') {
|
|
|
- //防止重复加载
|
|
|
- return;
|
|
|
- }
|
|
|
- // 修改当前对象状态为加载中
|
|
|
- obj.loadingType = 'loading';
|
|
|
- getRescueList({
|
|
|
- page: obj.page,
|
|
|
- limit: obj.limit,
|
|
|
- type: 1
|
|
|
- }).then(({
|
|
|
- data
|
|
|
- }) => {
|
|
|
- obj.list = obj.list.concat(data);
|
|
|
- obj.page++;
|
|
|
- if (obj.limit == data.length) {
|
|
|
- obj.loadingType = 'more';
|
|
|
- } else {
|
|
|
- obj.loadingType = 'noMore';
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 点击导航
|
|
|
- toNav(item, index) {
|
|
|
- console.log(item, index)
|
|
|
- let obj = this
|
|
|
- obj.latitude2 = item.latitude
|
|
|
- obj.longitude2 = item.longitude
|
|
|
- obj.address = item.address
|
|
|
- this.$refs.popup.open();
|
|
|
- },
|
|
|
- // 调用高德
|
|
|
- toGaodeMap() {
|
|
|
- let latitude = this.latitude2
|
|
|
- let longitude = this.longitude2
|
|
|
- let address = this.address
|
|
|
- console.log('选择高德', latitude, longitude, address)
|
|
|
- window.location.href =
|
|
|
- `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${address}`
|
|
|
-
|
|
|
- },
|
|
|
- // 调用腾讯
|
|
|
- totengxunMap() {
|
|
|
- let latitude = this.latitude2
|
|
|
- let longitude = this.longitude2
|
|
|
- let address = this.address
|
|
|
- console.log('选择腾讯', latitude, longitude)
|
|
|
- window.location.href =
|
|
|
- `http://apis.map.qq.com/uri/v1/marker?marker=coord:${latitude},${longitude};addr:${address}`;
|
|
|
- },
|
|
|
- // 高德坐标、腾讯坐标转百度坐标
|
|
|
- bd_encrypt(gg_lng, gg_lat) {
|
|
|
- var X_PI = Math.PI * 3000.0 / 180.0;
|
|
|
- var x = gg_lng,
|
|
|
- y = gg_lat;
|
|
|
- var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
|
|
|
- var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
|
|
|
- var bd_lng = z * Math.cos(theta) + 0.0065;
|
|
|
- var bd_lat = z * Math.sin(theta) + 0.006;
|
|
|
- return {
|
|
|
- bd_lat: bd_lat,
|
|
|
- bd_lng: bd_lng
|
|
|
- };
|
|
|
- },
|
|
|
- // 调用百度
|
|
|
- tobaiDuMap() {
|
|
|
- let latlon = this.bd_encrypt(this.longitude2, tthis.latitude2)
|
|
|
- let latlon1 = this.bd_encrypt(this.longitude4, this.latitude4)
|
|
|
- let latitude = latlon.bd_lat;
|
|
|
- let longitude = latlon.bd_lng;
|
|
|
- let latitude6 = latlon1.bd_lat;
|
|
|
- let longitude6 = latlon1.bd_lng;
|
|
|
-
|
|
|
- // let latitude = this.latitude2
|
|
|
- // let longitude = this.longitude2
|
|
|
- // let latitude6 = this.latitude4
|
|
|
- // let longitude6 = this.longitude4
|
|
|
- let address = this.address
|
|
|
- console.log('选择百度', latitude, longitude)
|
|
|
- console.log('获取当前经纬度', latitude6, longitude6)
|
|
|
- window.location.href =
|
|
|
- `http://api.map.baidu.com/direction?origin=latlng:${latitude6},${longitude6}|name:我的位置&destination=${latitude},${longitude}&mode=driving®ion=${ address }&output=html&src=webapp.baidu.openAPIdemo`
|
|
|
- },
|
|
|
- // 拨打电话
|
|
|
- tocall(num) {
|
|
|
- console.log(num);
|
|
|
- uni.makePhoneCall({
|
|
|
- phoneNumber: num //仅为示例
|
|
|
- });
|
|
|
- },
|
|
|
- //同意
|
|
|
- agree(item, index) {
|
|
|
- let obj = this;
|
|
|
- uni.showModal({
|
|
|
- content: '是否要接受该求救？',
|
|
|
- success: res => {
|
|
|
- if (res.confirm) {
|
|
|
- changeRescue({
|
|
|
- status: 1,
|
|
|
- // process_remark: ,
|
|
|
- id: item.id,
|
|
|
- }).then((data) => {
|
|
|
- obj.list[index].status = 1;
|
|
|
- console.log(obj.list[index].status);
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- //拒绝
|
|
|
- refuse(item, index) {
|
|
|
- let obj = this;
|
|
|
- uni.showModal({
|
|
|
- content: '是否要拒绝该求救？',
|
|
|
- success: res => {
|
|
|
- if (res.confirm) {
|
|
|
- changeRescue({
|
|
|
- id: item.id,
|
|
|
- status: -1
|
|
|
- }).then((data) => {
|
|
|
- obj.list[index].status = -1;
|
|
|
- console.log(item);
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // @touchstart="touchS" @touchmove="touchM" :data-index="index" @touchend="touchE"
|
|
|
- // touchS(e) {
|
|
|
- // uni.showModal({
|
|
|
- // title: '执行touchS方法',
|
|
|
- // content: JSON.stringify(e)
|
|
|
- // })
|
|
|
- // if (e.touches.length == 1) {
|
|
|
- // //设置触摸起始点水平方向位置
|
|
|
- // this.startX = e.touches[0].clientX
|
|
|
- // // console.log(this.startX)
|
|
|
- // }
|
|
|
- // },
|
|
|
- // touchM(e) {
|
|
|
- // console.log('执行touchE方法', e)
|
|
|
- // uni.showModal({
|
|
|
- // title: '执行touchM方法',
|
|
|
- // content: JSON.stringify(e)
|
|
|
- // })
|
|
|
- // if (e.touches.length == 1) {
|
|
|
- // //手指移动时水平方向位置
|
|
|
- // var moveX = e.touches[0].clientX;
|
|
|
- // //手指起始点位置与移动期间的差值
|
|
|
- // var disX = this.startX - moveX;
|
|
|
- // var delBtnWidth = this.delBtnWidth;
|
|
|
- // var txtStyle = "";
|
|
|
- // if (disX == 0 || disX < 0) { //如果移动距离小于等于0，说明向右滑动，文本层位置不变
|
|
|
- // txtStyle = "left:0px";
|
|
|
- // } else if (disX > 0) { //移动距离大于0，文本层left值等于手指移动距离
|
|
|
- // txtStyle = "left:-" + disX + "px";
|
|
|
- // if (disX >= delBtnWidth) {
|
|
|
- // //控制手指移动距离最大值为删除按钮的宽度
|
|
|
- // txtStyle = "left:-" + delBtnWidth + "px";
|
|
|
- // }
|
|
|
- // }
|
|
|
- // //获取手指触摸的是哪一项
|
|
|
- // var index = e.currentTarget.dataset.index;
|
|
|
- // var list = this.list;
|
|
|
- // console.log(999, e.currentTarget.dataset)
|
|
|
- // // list[index].txtStyle = txtStyle;
|
|
|
- // // console.log(list[index].txtStyle)
|
|
|
- // //更新列表的状态
|
|
|
- // this.list = list;
|
|
|
- // }
|
|
|
- // },
|
|
|
- // touchE(e) {
|
|
|
- // console.log('执行touchE方法', e)
|
|
|
- // uni.showModal({
|
|
|
- // title: '执行touchE方法',
|
|
|
- // content: JSON.stringify(e)
|
|
|
- // })
|
|
|
- // if (e.changedTouches.length == 1) {
|
|
|
- // //手指移动结束后水平位置
|
|
|
- // var endX = e.changedTouches[0].clientX;
|
|
|
- // //触摸开始与结束，手指移动的距离
|
|
|
- // var disX = this.startX - endX;
|
|
|
- // var delBtnWidth = this.delBtnWidth;
|
|
|
- // //如果距离小于删除按钮的1/2，不显示删除按钮
|
|
|
- // var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";
|
|
|
- // //获取手指触摸的是哪一项
|
|
|
- // var index = e.currentTarget.dataset.index;
|
|
|
- // var list = this.list;
|
|
|
- // // list[index].txtStyle = txtStyle;
|
|
|
- // // console.log(list[index].txtStyle)
|
|
|
- // //更新列表的状态{
|
|
|
- // this.list = list
|
|
|
- // }
|
|
|
- // }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
- .container {
|
|
|
- line-height: 1;
|
|
|
-
|
|
|
- .box {
|
|
|
- width: 750rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- box-shadow: 0px 5rpx 5rpx 0px rgba(34, 24, 20, 0.06);
|
|
|
- border-radius: 10rpx;
|
|
|
- margin: 20rpx auto 0;
|
|
|
- padding: 30rpx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .box-top {
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
-
|
|
|
- .box-time {
|
|
|
- margin-top: 20rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
-
|
|
|
- .box-1 {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
-
|
|
|
- .navImg {
|
|
|
- width: 50rpx;
|
|
|
- height: 50rpx;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 50rpx;
|
|
|
- height: 50rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .tip {
|
|
|
- margin-top: 6rpx;
|
|
|
- color: #7F7F7F;
|
|
|
- font-size: 21rpx;
|
|
|
- text-align: right;
|
|
|
- // background-color: pink;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .box-sub-box {
|
|
|
- margin-top: 44rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0 80rpx;
|
|
|
-
|
|
|
- .red-font {
|
|
|
- width: 175rpx;
|
|
|
- height: 59rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #C90F1B;
|
|
|
- }
|
|
|
-
|
|
|
- .sub-box1 {
|
|
|
- width: 175rpx;
|
|
|
- height: 59rpx;
|
|
|
- background: #C90F1B;
|
|
|
- border-radius: 29rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #FFFFFF;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .sub-box2 {
|
|
|
- width: 175rpx;
|
|
|
- height: 59rpx;
|
|
|
- background: #F3F3F3;
|
|
|
- border-radius: 29rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #333333;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .sub-box3 {
|
|
|
- width: 200rpx;
|
|
|
- height: 59rpx;
|
|
|
- background: #C90F1B;
|
|
|
- border-radius: 29rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #FFFFFF;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .call {
|
|
|
- width: 28rpx;
|
|
|
- height: 40rpx;
|
|
|
- margin-right: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .popup-box {
|
|
|
- width: 522rpx;
|
|
|
- height: 605rpx;
|
|
|
- background-color: #FFFFFF;
|
|
|
- border-radius: 20rpx;
|
|
|
-
|
|
|
- .img {
|
|
|
- border-radius: 20rpx 20rpx 0 0;
|
|
|
- width: 522rpx;
|
|
|
- height: 307rpx;
|
|
|
-
|
|
|
- image {
|
|
|
- border-radius: 20rpx 20rpx 0 0;
|
|
|
- width: 522rpx;
|
|
|
- height: 307rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .mian {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- padding: 32rpx 32rpx;
|
|
|
- background-color: #FFFFFF;
|
|
|
- border-radius: 0 0 20rpx 20rpx;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- .delivery {
|
|
|
- font-size: 36rpx;
|
|
|
- color: #333333;
|
|
|
- // margin-top: 46rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .nocancel {
|
|
|
- font-size: 30rpx;
|
|
|
- color: #999999;
|
|
|
- margin-top: 26rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .comfirm-box {
|
|
|
- margin-top: 52rpx;
|
|
|
- display: flex;
|
|
|
- // margin-bottom: 32rpx;
|
|
|
-
|
|
|
- // justify-content: space-around;
|
|
|
- .cancel {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 197rpx;
|
|
|
- height: 61rpx;
|
|
|
- border: 1px solid #C90F1B;
|
|
|
- border-radius: 31rpx;
|
|
|
-
|
|
|
- font-size: 24rpx;
|
|
|
- color: #C90F1B;
|
|
|
- }
|
|
|
-
|
|
|
- .comfirm {
|
|
|
- margin-left: 32rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 197rpx;
|
|
|
- height: 61rpx;
|
|
|
- background: #C90F1B;
|
|
|
- border-radius: 31px;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .popup_row {
|
|
|
- width: 100%;
|
|
|
- height: 500rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 20rpx 20rpx 0 0;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .rows {
|
|
|
- width: 100%;
|
|
|
- padding: 0 24rpx;
|
|
|
-
|
|
|
- .rows-item {
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- text-align: center;
|
|
|
- width: 100%;
|
|
|
- font-size: 32rpx;
|
|
|
- color: #303133;
|
|
|
- // border-bottom: 1rpx solid #f0f0f0;
|
|
|
- }
|
|
|
-
|
|
|
- // .row-1 {
|
|
|
- // margin: auto;
|
|
|
- // .first_aid {
|
|
|
- // width: 300rpx;
|
|
|
- // height: 300rpx;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // .row-2 {
|
|
|
- // font-size: 38rpx;
|
|
|
- // margin-top: 20rpx;
|
|
|
- // }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .remove {
|
|
|
- display: flex;
|
|
|
- border-radius: 0 12rpx 12rpx 0;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- // margin-right: 22rpx;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- font-size: 30rpx;
|
|
|
- width: 110rpx;
|
|
|
- height: 100%;
|
|
|
- color: #FFFFFF;
|
|
|
- background-color: #C90F1B;
|
|
|
- ;
|
|
|
- }
|
|
|
- }
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <uni-swipe-action>
|
|
|
+ <uni-swipe-action-item :right-options="options" @click="bindClick" @change="swipeChange($event, item.sos_id)"
|
|
|
+ v-for="(item,index) in list">
|
|
|
+ <view class="list">
|
|
|
+ <view class="box">
|
|
|
+ <view class="box-1">
|
|
|
+ <view class="box-2">
|
|
|
+ <view class="box-time">
|
|
|
+ 求救时间：{{item.createtime | time}}
|
|
|
+ </view>
|
|
|
+ <view class="box-time" v-if="item.address">
|
|
|
+ 救援地址：{{item.address}}
|
|
|
+ </view>
|
|
|
+ <view class="box-time" v-if="item.status == 1">
|
|
|
+ 联系方式：{{item.user_phone}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="navImg" @click="toNav(item, index)">
|
|
|
+ <image src="../../static/img/img10.png" mode=""></image>
|
|
|
+ <view class="tip">导航</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="box-sub-box" v-if="item.status == 0">
|
|
|
+ <view class="sub-box1" @click="agree(item,index)">
|
|
|
+ 接受
|
|
|
+ </view>
|
|
|
+ <view class="sub-box2" @click="refuse(item,index)">
|
|
|
+ 拒绝
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="box-sub-box">
|
|
|
+ <view class="red-font" v-if="item.status == 1">
|
|
|
+ 已接受
|
|
|
+ </view>
|
|
|
+ <view class="red-font" v-if="item.status == -1">
|
|
|
+ 已拒绝
|
|
|
+ </view>
|
|
|
+ <view class="sub-box3" v-if="item.status == 1" @click="tocall(item.user_phone)">
|
|
|
+ <image src="../../static/icon/call.png" mode="" class="call"></image>
|
|
|
+ 拨打电话
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="remove" @click="delItem">删除</view> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-swipe-action-item>
|
|
|
+ </uni-swipe-action>
|
|
|
+ <empty v-if="list.length === 0"></empty>
|
|
|
+ <uni-load-more :status="loadingType"></uni-load-more>
|
|
|
+ <uni-popup ref="popup" type="bottom" @click="close">
|
|
|
+ <view class="popup_row">
|
|
|
+ <view class="rows">
|
|
|
+ <view class="rows-item" @click="toGaodeMap">
|
|
|
+ 高德地图
|
|
|
+ </view>
|
|
|
+ <view class="rows-item" @click="tobaiDuMap">
|
|
|
+ 百度地图
|
|
|
+ </view>
|
|
|
+ <view class="rows-item" @click="totengxunMap">
|
|
|
+ 腾讯地图
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+
|
|
|
+ <uni-popup ref="popup1" type="center">
|
|
|
+ <view class="popup-box">
|
|
|
+ <view class="img">
|
|
|
+ <image src="../../static/img/map.jpg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="mian">
|
|
|
+ <view class="delivery">
|
|
|
+ 救援记录
|
|
|
+ <!-- {{ i18n.qrhwsdm }} -->
|
|
|
+ </view>
|
|
|
+ <view class="nocancel">
|
|
|
+ 确认删除该记录吗？
|
|
|
+ <!-- {{ i18n.wfcx }} -->
|
|
|
+ </view>
|
|
|
+ <view class="comfirm-box">
|
|
|
+ <view class="cancel" @click="cancel">
|
|
|
+ 取消
|
|
|
+ </view>
|
|
|
+ <view class="comfirm" @click="comfirm(tmp)">
|
|
|
+ 确认
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </uni-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ deleteList,
|
|
|
+ getrescue,
|
|
|
+ change_rescue
|
|
|
+ } from '@/api/index.js';
|
|
|
+ import {
|
|
|
+ getRescueList,
|
|
|
+ changeRescue,
|
|
|
+ geocoder
|
|
|
+ } from '@/api/category.js'
|
|
|
+
|
|
|
+ import empty from '@/components/empty';
|
|
|
+ import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
|
|
|
+ import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
|
|
+ import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue';
|
|
|
+ import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue';
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ empty,
|
|
|
+ uniPopup,
|
|
|
+ uniLoadMore,
|
|
|
+ uniSwipeAction,
|
|
|
+ uniSwipeActionItem
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ time(val) {
|
|
|
+ let str = ''
|
|
|
+ if (val) {
|
|
|
+ var time = new Date(val * 1000);
|
|
|
+ var y = time.getFullYear();
|
|
|
+ var m = time.getMonth() + 1;
|
|
|
+ var d = time.getDate();
|
|
|
+ var h = time.getHours();
|
|
|
+ var mm = time.getMinutes();
|
|
|
+ var s = time.getSeconds();
|
|
|
+ str = y + '-' + m + '-' + d + ' ' + h + ":" + mm
|
|
|
+ console.log(str)
|
|
|
+ }
|
|
|
+ return str
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: '',
|
|
|
+ tmp: '',
|
|
|
+ options: [{
|
|
|
+ text: '取消',
|
|
|
+ style: {
|
|
|
+ backgroundColor: '#007aff'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '确认',
|
|
|
+ style: {
|
|
|
+ backgroundColor: '#C90F1B'
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ list: [],
|
|
|
+ loadingType: 'more',
|
|
|
+ latitude2: '',
|
|
|
+ longitude2: '',
|
|
|
+ longitude4: '',
|
|
|
+ latitude4: '',
|
|
|
+ address: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.loadData();
|
|
|
+ // this.getRescueList()
|
|
|
+ let obj = this;
|
|
|
+ try {
|
|
|
+ let locationAddress
|
|
|
+ // #ifdef H5
|
|
|
+ let wxOjb = require('jweixin-module');
|
|
|
+ locationAddress = wxOjb.getLocation;
|
|
|
+ // #endif
|
|
|
+ // #ifdef MP
|
|
|
+ locationAddress = uni.getLocation;
|
|
|
+ // #endif
|
|
|
+ // #ifdef H5
|
|
|
+ wxOjb.ready(() => {
|
|
|
+ console.log('加载完毕注册事件');
|
|
|
+ locationAddress({
|
|
|
+ type: 'wgs84',
|
|
|
+ success: function(res) {
|
|
|
+ console.log('获取经纬度', res);
|
|
|
+ obj.longitude4 = res.longitude
|
|
|
+ obj.latitude4 = res.latitude
|
|
|
+ // obj.loadData();
|
|
|
+ },
|
|
|
+ fail(e) {
|
|
|
+ console.log('失败', e);
|
|
|
+ window.location.reload();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ // #ifdef MP
|
|
|
+ locationAddress({
|
|
|
+ type: 'wgs84',
|
|
|
+ success: function(res) {
|
|
|
+ console.log('获取经纬度', res);
|
|
|
+ obj.longitude4 = res.longitude
|
|
|
+ obj.latitude4 = res.latitude
|
|
|
+ // obj.loadData();
|
|
|
+ },
|
|
|
+ fail(e) {
|
|
|
+ console.log('失败', e);
|
|
|
+ window.location.reload();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+ } catch (e) {
|
|
|
+ let locationAddress
|
|
|
+ // #ifdef H5
|
|
|
+ let wxOjb = require('jweixin-module');
|
|
|
+ locationAddress = wxOjb.getLocation;
|
|
|
+ // #endif
|
|
|
+ // #ifdef MP
|
|
|
+ locationAddress = uni.getLocation;
|
|
|
+ // #endif
|
|
|
+ // #ifdef H5
|
|
|
+ wxOjb.ready(() => {
|
|
|
+ console.log('加载完毕注册事件');
|
|
|
+ locationAddress({
|
|
|
+ type: 'wgs84',
|
|
|
+ success: function(res) {
|
|
|
+ console.log('获取经纬度', res);
|
|
|
+ obj.longitude4 = res.longitude
|
|
|
+ obj.latitude4 = res.latitude
|
|
|
+ // obj.loadData();
|
|
|
+ },
|
|
|
+ fail(e) {
|
|
|
+ console.log('失败', e);
|
|
|
+ window.location.reload();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ // #endif
|
|
|
+ // #ifdef MP
|
|
|
+ locationAddress({
|
|
|
+ type: 'wgs84',
|
|
|
+ success: function(res) {
|
|
|
+ console.log('获取经纬度', res);
|
|
|
+ obj.longitude4 = res.longitude
|
|
|
+ obj.latitude4 = res.latitude
|
|
|
+ // obj.loadData();
|
|
|
+ },
|
|
|
+ fail(e) {
|
|
|
+ console.log('失败', e);
|
|
|
+ window.location.reload();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ geocoder(lat, lon) {
|
|
|
+ geocoder({
|
|
|
+ latitude: lat,
|
|
|
+ longitude: lon
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res.data.result.address)
|
|
|
+ return res.data.result.address
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getRescueList() {
|
|
|
+ getRescueList({
|
|
|
+ type: 1,
|
|
|
+ page: 1,
|
|
|
+ limit: 10
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ bindClick(e) {
|
|
|
+ if (e.content.text == '取消') {
|
|
|
+ console.log('点击了左侧取消按钮')
|
|
|
+ } else {
|
|
|
+ console.log('点击了右侧确认按钮')
|
|
|
+ // this.$refs.popup1.open(this.tmp);
|
|
|
+ this.open(this.id)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ swipeChange(e, id) {
|
|
|
+ this.id = id
|
|
|
+ console.log('id111111111', id)
|
|
|
+ },
|
|
|
+ // 确认删除吗？
|
|
|
+ comfirm(id) {
|
|
|
+ console.log(9999888, id)
|
|
|
+ deleteList({
|
|
|
+ id: this.id
|
|
|
+ }).then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ window.location.reload(); //重新刷新页面
|
|
|
+ this.loadData()
|
|
|
+ this.cancel()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 取消
|
|
|
+ cancel() {
|
|
|
+ this.$refs.popup1.close();
|
|
|
+ },
|
|
|
+ // 打开弹窗
|
|
|
+ open(tmp) {
|
|
|
+ console.log('打开弹窗', tmp)
|
|
|
+ this.$refs.popup1.open(tmp)
|
|
|
+ },
|
|
|
+ async loadData() {
|
|
|
+ let obj = this;
|
|
|
+ if (obj.loadingType === 'noMore') {
|
|
|
+ //防止重复加载
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 修改当前对象状态为加载中
|
|
|
+ obj.loadingType = 'loading';
|
|
|
+ getRescueList({
|
|
|
+ page: obj.page,
|
|
|
+ limit: obj.limit,
|
|
|
+ type: 1
|
|
|
+ }).then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ obj.list = obj.list.concat(data);
|
|
|
+ obj.page++;
|
|
|
+ if (obj.limit == data.length) {
|
|
|
+ obj.loadingType = 'more';
|
|
|
+ } else {
|
|
|
+ obj.loadingType = 'noMore';
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 点击导航
|
|
|
+ toNav(item, index) {
|
|
|
+ console.log(item, index)
|
|
|
+ let obj = this
|
|
|
+ obj.latitude2 = item.latitude
|
|
|
+ obj.longitude2 = item.longitude
|
|
|
+ obj.address = item.address
|
|
|
+ this.$refs.popup.open();
|
|
|
+ },
|
|
|
+ // 调用高德
|
|
|
+ toGaodeMap() {
|
|
|
+ let latitude = this.latitude2
|
|
|
+ let longitude = this.longitude2
|
|
|
+ let address = this.address
|
|
|
+ console.log('选择高德', latitude, longitude, address)
|
|
|
+ window.location.href =
|
|
|
+ `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${address}`
|
|
|
+
|
|
|
+ },
|
|
|
+ // 调用腾讯
|
|
|
+ totengxunMap() {
|
|
|
+ let latitude = this.latitude2
|
|
|
+ let longitude = this.longitude2
|
|
|
+ let address = this.address
|
|
|
+ console.log('选择腾讯', latitude, longitude)
|
|
|
+ window.location.href =
|
|
|
+ `http://apis.map.qq.com/uri/v1/marker?marker=coord:${latitude},${longitude};addr:${address}`;
|
|
|
+ },
|
|
|
+ // 高德坐标、腾讯坐标转百度坐标
|
|
|
+ bd_encrypt(gg_lng, gg_lat) {
|
|
|
+ var X_PI = Math.PI * 3000.0 / 180.0;
|
|
|
+ var x = gg_lng,
|
|
|
+ y = gg_lat;
|
|
|
+ var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
|
|
|
+ var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
|
|
|
+ var bd_lng = z * Math.cos(theta) + 0.0065;
|
|
|
+ var bd_lat = z * Math.sin(theta) + 0.006;
|
|
|
+ return {
|
|
|
+ bd_lat: bd_lat,
|
|
|
+ bd_lng: bd_lng
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 调用百度
|
|
|
+ tobaiDuMap() {
|
|
|
+ let latlon = this.bd_encrypt(this.longitude2, tthis.latitude2)
|
|
|
+ let latlon1 = this.bd_encrypt(this.longitude4, this.latitude4)
|
|
|
+ let latitude = latlon.bd_lat;
|
|
|
+ let longitude = latlon.bd_lng;
|
|
|
+ let latitude6 = latlon1.bd_lat;
|
|
|
+ let longitude6 = latlon1.bd_lng;
|
|
|
+
|
|
|
+ // let latitude = this.latitude2
|
|
|
+ // let longitude = this.longitude2
|
|
|
+ // let latitude6 = this.latitude4
|
|
|
+ // let longitude6 = this.longitude4
|
|
|
+ let address = this.address
|
|
|
+ console.log('选择百度', latitude, longitude)
|
|
|
+ console.log('获取当前经纬度', latitude6, longitude6)
|
|
|
+ window.location.href =
|
|
|
+ `http://api.map.baidu.com/direction?origin=latlng:${latitude6},${longitude6}|name:我的位置&destination=${latitude},${longitude}&mode=driving®ion=${ address }&output=html&src=webapp.baidu.openAPIdemo`
|
|
|
+ },
|
|
|
+ // 拨打电话
|
|
|
+ tocall(num) {
|
|
|
+ console.log(num);
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber: num //仅为示例
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //同意
|
|
|
+ agree(item, index) {
|
|
|
+ let obj = this;
|
|
|
+ uni.showModal({
|
|
|
+ content: '是否要接受该求救？',
|
|
|
+ success: res => {
|
|
|
+ if (res.confirm) {
|
|
|
+ changeRescue({
|
|
|
+ status: 1,
|
|
|
+ // process_remark: ,
|
|
|
+ id: item.id,
|
|
|
+ re_url: obj.$store.state.baseURL + '/index/#/pages/applic/helprecords'
|
|
|
+ }).then((data) => {
|
|
|
+ obj.list[index].status = 1;
|
|
|
+ console.log(obj.list[index].status);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //拒绝
|
|
|
+ refuse(item, index) {
|
|
|
+ let obj = this;
|
|
|
+ uni.showModal({
|
|
|
+ content: '是否要拒绝该求救？',
|
|
|
+ success: res => {
|
|
|
+ if (res.confirm) {
|
|
|
+ changeRescue({
|
|
|
+ id: item.id,
|
|
|
+ status: -1,
|
|
|
+ re_url: obj.$store.state.baseURL + '/index/#/pages/applic/helprecords'
|
|
|
+ }).then((data) => {
|
|
|
+ obj.list[index].status = -1;
|
|
|
+ console.log(item);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // @touchstart="touchS" @touchmove="touchM" :data-index="index" @touchend="touchE"
|
|
|
+ // touchS(e) {
|
|
|
+ // uni.showModal({
|
|
|
+ // title: '执行touchS方法',
|
|
|
+ // content: JSON.stringify(e)
|
|
|
+ // })
|
|
|
+ // if (e.touches.length == 1) {
|
|
|
+ // //设置触摸起始点水平方向位置
|
|
|
+ // this.startX = e.touches[0].clientX
|
|
|
+ // // console.log(this.startX)
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // touchM(e) {
|
|
|
+ // console.log('执行touchE方法', e)
|
|
|
+ // uni.showModal({
|
|
|
+ // title: '执行touchM方法',
|
|
|
+ // content: JSON.stringify(e)
|
|
|
+ // })
|
|
|
+ // if (e.touches.length == 1) {
|
|
|
+ // //手指移动时水平方向位置
|
|
|
+ // var moveX = e.touches[0].clientX;
|
|
|
+ // //手指起始点位置与移动期间的差值
|
|
|
+ // var disX = this.startX - moveX;
|
|
|
+ // var delBtnWidth = this.delBtnWidth;
|
|
|
+ // var txtStyle = "";
|
|
|
+ // if (disX == 0 || disX < 0) { //如果移动距离小于等于0，说明向右滑动，文本层位置不变
|
|
|
+ // txtStyle = "left:0px";
|
|
|
+ // } else if (disX > 0) { //移动距离大于0，文本层left值等于手指移动距离
|
|
|
+ // txtStyle = "left:-" + disX + "px";
|
|
|
+ // if (disX >= delBtnWidth) {
|
|
|
+ // //控制手指移动距离最大值为删除按钮的宽度
|
|
|
+ // txtStyle = "left:-" + delBtnWidth + "px";
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // //获取手指触摸的是哪一项
|
|
|
+ // var index = e.currentTarget.dataset.index;
|
|
|
+ // var list = this.list;
|
|
|
+ // console.log(999, e.currentTarget.dataset)
|
|
|
+ // // list[index].txtStyle = txtStyle;
|
|
|
+ // // console.log(list[index].txtStyle)
|
|
|
+ // //更新列表的状态
|
|
|
+ // this.list = list;
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // touchE(e) {
|
|
|
+ // console.log('执行touchE方法', e)
|
|
|
+ // uni.showModal({
|
|
|
+ // title: '执行touchE方法',
|
|
|
+ // content: JSON.stringify(e)
|
|
|
+ // })
|
|
|
+ // if (e.changedTouches.length == 1) {
|
|
|
+ // //手指移动结束后水平位置
|
|
|
+ // var endX = e.changedTouches[0].clientX;
|
|
|
+ // //触摸开始与结束，手指移动的距离
|
|
|
+ // var disX = this.startX - endX;
|
|
|
+ // var delBtnWidth = this.delBtnWidth;
|
|
|
+ // //如果距离小于删除按钮的1/2，不显示删除按钮
|
|
|
+ // var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";
|
|
|
+ // //获取手指触摸的是哪一项
|
|
|
+ // var index = e.currentTarget.dataset.index;
|
|
|
+ // var list = this.list;
|
|
|
+ // // list[index].txtStyle = txtStyle;
|
|
|
+ // // console.log(list[index].txtStyle)
|
|
|
+ // //更新列表的状态{
|
|
|
+ // this.list = list
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .container {
|
|
|
+ line-height: 1;
|
|
|
+
|
|
|
+ .box {
|
|
|
+ width: 750rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 5rpx 5rpx 0px rgba(34, 24, 20, 0.06);
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin: 20rpx auto 0;
|
|
|
+ padding: 30rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .box-top {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-time {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-1 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navImg {
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ margin-top: 6rpx;
|
|
|
+ color: #7F7F7F;
|
|
|
+ font-size: 21rpx;
|
|
|
+ text-align: right;
|
|
|
+ // background-color: pink;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-sub-box {
|
|
|
+ margin-top: 44rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 80rpx;
|
|
|
+
|
|
|
+ .red-font {
|
|
|
+ width: 175rpx;
|
|
|
+ height: 59rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #C90F1B;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-box1 {
|
|
|
+ width: 175rpx;
|
|
|
+ height: 59rpx;
|
|
|
+ background: #C90F1B;
|
|
|
+ border-radius: 29rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-box2 {
|
|
|
+ width: 175rpx;
|
|
|
+ height: 59rpx;
|
|
|
+ background: #F3F3F3;
|
|
|
+ border-radius: 29rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-box3 {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 59rpx;
|
|
|
+ background: #C90F1B;
|
|
|
+ border-radius: 29rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .call {
|
|
|
+ width: 28rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-box {
|
|
|
+ width: 522rpx;
|
|
|
+ height: 605rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 20rpx;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ border-radius: 20rpx 20rpx 0 0;
|
|
|
+ width: 522rpx;
|
|
|
+ height: 307rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ border-radius: 20rpx 20rpx 0 0;
|
|
|
+ width: 522rpx;
|
|
|
+ height: 307rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mian {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 32rpx 32rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 0 0 20rpx 20rpx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .delivery {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #333333;
|
|
|
+ // margin-top: 46rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nocancel {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #999999;
|
|
|
+ margin-top: 26rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .comfirm-box {
|
|
|
+ margin-top: 52rpx;
|
|
|
+ display: flex;
|
|
|
+ // margin-bottom: 32rpx;
|
|
|
+
|
|
|
+ // justify-content: space-around;
|
|
|
+ .cancel {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 197rpx;
|
|
|
+ height: 61rpx;
|
|
|
+ border: 1px solid #C90F1B;
|
|
|
+ border-radius: 31rpx;
|
|
|
+
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #C90F1B;
|
|
|
+ }
|
|
|
+
|
|
|
+ .comfirm {
|
|
|
+ margin-left: 32rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 197rpx;
|
|
|
+ height: 61rpx;
|
|
|
+ background: #C90F1B;
|
|
|
+ border-radius: 31px;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup_row {
|
|
|
+ width: 100%;
|
|
|
+ height: 500rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 20rpx 20rpx 0 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .rows {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 24rpx;
|
|
|
+
|
|
|
+ .rows-item {
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #303133;
|
|
|
+ // border-bottom: 1rpx solid #f0f0f0;
|
|
|
+ }
|
|
|
+
|
|
|
+ // .row-1 {
|
|
|
+ // margin: auto;
|
|
|
+ // .first_aid {
|
|
|
+ // width: 300rpx;
|
|
|
+ // height: 300rpx;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // .row-2 {
|
|
|
+ // font-size: 38rpx;
|
|
|
+ // margin-top: 20rpx;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .remove {
|
|
|
+ display: flex;
|
|
|
+ border-radius: 0 12rpx 12rpx 0;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ // margin-right: 22rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ font-size: 30rpx;
|
|
|
+ width: 110rpx;
|
|
|
+ height: 100%;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background-color: #C90F1B;
|
|
|
+ ;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
