|
@@ -0,0 +1,297 @@
|
|
|
+<template>
|
|
|
+<view>
|
|
|
+ <!-- 第一种样式 人员管理-->
|
|
|
+ <block v-if="datainfo.length>0">
|
|
|
+ <!-- 订单 -->
|
|
|
+ <block v-if="type=='order'">
|
|
|
+ <view class="odlist" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail">
|
|
|
+ <view class="odtop flexcj">
|
|
|
+ <view class="tit">2024-11-26 10:00</view>
|
|
|
+ <view class="txt">本单收入<text class="t">¥</text><text class="num">60</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="odbox">
|
|
|
+ <view class="lists flexcj">
|
|
|
+ <view class="llists flex1">
|
|
|
+ <view class="flext mb10">
|
|
|
+ <view class="imgs"><image :src="hlista" class="imga"></image></view>
|
|
|
+ <view class="oltit">单次深度清洁</view>
|
|
|
+ </view>
|
|
|
+ <view class="flext mb10">
|
|
|
+ <view class="imgs"><image :src="hlistb" class="imgb"></image></view>
|
|
|
+ <view class="oltit">安徽省合肥市蜀山区高新技术开发区幸福 大街88号幸福小区12#1403室 </view>
|
|
|
+ <image :src="adrimg" class="adrimg"></image>
|
|
|
+ </view>
|
|
|
+ <view class="flext mb10">
|
|
|
+ <view class="imgs"><image :src="hlistc" class="imga"></image></view>
|
|
|
+ <view class="oltit">80m²以内</view>
|
|
|
+ </view>
|
|
|
+ <view class="flext mb10">
|
|
|
+ <view class="imgs"><image :src="hlistd" class="imgc"></image></view>
|
|
|
+ <view class="oltit">刘熙媛</view>
|
|
|
+ </view>
|
|
|
+ <block v-if="ite.zhanflag">
|
|
|
+ <view class="flext mb10">
|
|
|
+ <view class="imgs"><image :src="hliste" class="imgd"></image></view>
|
|
|
+ <view class="oltit">18000185568</view>
|
|
|
+ </view>
|
|
|
+ <view class="flext mb10">
|
|
|
+ <view class="imgs"><image :src="hlistf" class="imge"></image></view>
|
|
|
+ <view class="oltit flexc">412588653126854369
|
|
|
+ <view class="olbtn">复制</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flext mb10">
|
|
|
+ <view class="imgs"><image :src="hlistg" class="imge"></image></view>
|
|
|
+ <view class="oltit">2024-11-25 18:23:56 <text class="coa">(接单时间)</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="flext mb10">
|
|
|
+ <view class="imgs"><image :src="hlisth" class="imgf"></image></view>
|
|
|
+ <view class="oltit">2024-11-25 18:23:56 <text class="coa"> (上门时间)</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="flext mb6">
|
|
|
+ <view class="imgs"><image :src="hlisti" class="imga"></image></view>
|
|
|
+ <view class="phos">
|
|
|
+ <image :src="hlista"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flext mb10">
|
|
|
+ <view class="imgs"><image :src="hlistj" class="imgg"></image></view>
|
|
|
+ <view class="oltit">2024-11-25 18:23:56 <text class="coa"> (完成时间)</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="flext mb6">
|
|
|
+ <view class="imgs"><image :src="hlisti" class="imga"></image></view>
|
|
|
+ <view class="phos">
|
|
|
+ <image :src="hlista"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flext mb10">
|
|
|
+ <view class="imgs"><image :src="hlistk" class="imgc"></image></view>
|
|
|
+ <view class="oltit">个人原因:与已接单时间重叠</view>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+ <view class="rlist">接单</view>
|
|
|
+ <view class="rlist btna">
|
|
|
+ <view>我已</view>
|
|
|
+ <view>完成</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="upbox flexcc" :class="ite.zhanflag?'':'act'" @click.stop="getZhan(idx)">
|
|
|
+ {{ite.zhanflag?'折叠':'展开'}}<image :src="upimg"></image>
|
|
|
+ </view>
|
|
|
+ <!-- 接单 -->
|
|
|
+ <view class="ohbtn" @click.stop="getBtnFn('tips')">接单</view>
|
|
|
+ <!-- 接单后 -->
|
|
|
+ <view class="flexcj">
|
|
|
+ <view class="ohbtn btna" @click.stop="getBtnFn('cancel')">取消订单</view>
|
|
|
+ <view class="ohbtn btnb" @click.stop="getBtnFn('addpho')">我已上门</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ <view class="shax">{{wtdt}}</view>
|
|
|
+ </block>
|
|
|
+
|
|
|
+ <!-- 无数据 -->
|
|
|
+ <view class="nodata" v-else>
|
|
|
+ <image :src="noiconpimg"></image>
|
|
|
+ <view>暂无数据</view>
|
|
|
+ </view>
|
|
|
+</view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
|
|
|
+ import config from '@/config'
|
|
|
+ export default{
|
|
|
+ props:{
|
|
|
+ datainfo: {
|
|
|
+ type: Array,
|
|
|
+ default () {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ wtdt:{
|
|
|
+ type:String,
|
|
|
+ default () {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ type:{
|
|
|
+ type:String,
|
|
|
+ default () {
|
|
|
+ return 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ topval:{
|
|
|
+ type:String,
|
|
|
+ default () {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ noiconpimg:require("@/static/images/nodata.png"),
|
|
|
+ hlista:require("@/static/images/home/hlista.png"),
|
|
|
+ hlistb:require("@/static/images/home/hlistb.png"),
|
|
|
+ hlistc:require("@/static/images/home/hlistc.png"),
|
|
|
+ hlistd:require("@/static/images/home/hlistd.png"),
|
|
|
+ hliste:require("@/static/images/home/hliste.png"),
|
|
|
+ hlistf:require("@/static/images/home/hlistf.png"),
|
|
|
+ hlistg:require("@/static/images/home/hlistg.png"),
|
|
|
+ hlisth:require("@/static/images/home/hlisth.png"),
|
|
|
+ hlisti:require("@/static/images/home/hlisti.png"),
|
|
|
+ hlistj:require("@/static/images/home/hlistj.png"),
|
|
|
+ hlistk:require("@/static/images/home/hlistk.png"),
|
|
|
+ // hicob:require("@/health/static/health/hicob.png"),
|
|
|
+ // man:require("@/work/static/people/man.png"),
|
|
|
+ // woman:require("@/work/static/people/woman.png"),
|
|
|
+ upimg:require("@/static/images/home/ups.png"),
|
|
|
+ adrimg:require("@/static/images/home/adrimg.png"),
|
|
|
+ baseUrl:config.baseUrl,
|
|
|
+ delBtnWidth:66,//左滑默认宽度
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ checkPermi, checkRole,
|
|
|
+ getDetail(e){
|
|
|
+ this.$emit('getDetail',e)
|
|
|
+ },
|
|
|
+ getAddFn(e){
|
|
|
+ this.$emit('getAddFn',e)
|
|
|
+ },
|
|
|
+ getReadlist(e){
|
|
|
+ this.$emit('getReadlist',e)
|
|
|
+ },
|
|
|
+ getBtnFn(e){
|
|
|
+ this.$emit('getBtnFn',e)
|
|
|
+ },
|
|
|
+ getZhan(idx){
|
|
|
+ console.log(idx,1)
|
|
|
+ // var obj=JSON.parse(JSON.stringify(this.datainfo))[idx]
|
|
|
+ // obj.zhanflag=!obj.zhanflag;
|
|
|
+ // this.datainfo.splice(idx,1,obj);
|
|
|
+ this.datainfo[idx].zhanflag=!this.datainfo[idx].zhanflag
|
|
|
+ },
|
|
|
+ getPreview(idx,arr) {
|
|
|
+ var newArr=[];
|
|
|
+ arr.forEach(ite=>{
|
|
|
+ var ds=this.baseUrl+ite
|
|
|
+ newArr.push(ds)
|
|
|
+ })
|
|
|
+ uni.previewImage({
|
|
|
+ urls: newArr,
|
|
|
+ current:idx,
|
|
|
+ success: function(data) {},
|
|
|
+ fail: function(err) {}
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //开始触摸滑动
|
|
|
+ drawStart(e) {
|
|
|
+ // console.log("开始触发");
|
|
|
+ var touch = e.touches[0];
|
|
|
+ this.startX = touch.clientX;
|
|
|
+ },
|
|
|
+ //触摸滑动
|
|
|
+ drawMove(e) {
|
|
|
+ // console.log("滑动");
|
|
|
+ for (var index in this.datainfo) {
|
|
|
+ // this.csListArrl[index].right=0
|
|
|
+ this.$set(this.datainfo[index],'right',0);
|
|
|
+ }
|
|
|
+ var idx=e.currentTarget.dataset.idx
|
|
|
+ var touch = e.touches[0];
|
|
|
+ var item = this.datainfo[idx];
|
|
|
+ var disX = this.startX - touch.clientX;
|
|
|
+ if (disX >= 20) {
|
|
|
+ if (disX > this.delBtnWidth) {
|
|
|
+ disX = this.delBtnWidth;
|
|
|
+ }
|
|
|
+ // this.csListArrl[idx].right=disX
|
|
|
+ this.$set(this.datainfo[idx],'right',disX);
|
|
|
+ } else {
|
|
|
+ // this.csListArrl[idx].right=0
|
|
|
+ this.$set(this.datainfo[idx],'right',0);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //触摸滑动结束
|
|
|
+ drawEnd(e) {
|
|
|
+ // console.log("滑动结束");
|
|
|
+ var idx=e.currentTarget.dataset.idx
|
|
|
+ var item = this.datainfo[idx];
|
|
|
+ if (item.right >= this.delBtnWidth / 2) {
|
|
|
+ // this.datainfo[idx].right=this.delBtnWidth
|
|
|
+ this.$set(this.datainfo[idx],'right',this.delBtnWidth);
|
|
|
+ } else {
|
|
|
+ this.datainfo[idx].right=0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.flex{display: flex;}
|
|
|
+.flexc{display: flex;align-items: center;}
|
|
|
+.mb10{margin-bottom: 20rpx;}
|
|
|
+.odlist{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx;
|
|
|
+ .odtop{border-bottom: 2rpx solid #E5E5E5;min-height: 78rpx;box-sizing: border-box;padding:8rpx 24rpx;
|
|
|
+ .tit{font-weight: bold;font-size: 32rpx;color: #272727;}
|
|
|
+ .txt{font-weight: 500;font-size: 24rpx;color: #AAAAAA;
|
|
|
+ .t{font-size:22rpx;color: #FF8213;}
|
|
|
+ .num{font-size:30rpx;color: #FF8213;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .odbox{padding:28rpx 12rpx 28rpx;}
|
|
|
+ .lists{padding:0rpx 16rpx 0rpx 24rpx;align-items: stretch;
|
|
|
+ .llists{
|
|
|
+ .imgs{width: 28rpx;height: 28rpx;display: flex;align-items: center;justify-content: center;margin-right: 12rpx;flex: 0 0 auto;margin-top: 4rpx;
|
|
|
+ .imga{width: 26rpx;height: 24rpx;}
|
|
|
+ .imgb{width: 20rpx;height: 24rpx;}
|
|
|
+ .imgc{width: 24rpx;height: 24rpx;}
|
|
|
+ .imgd{width: 20rpx;height: 28rpx;}
|
|
|
+ .imge{width: 26rpx;height: 26rpx;}
|
|
|
+ .imgf{width: 26rpx;height: 28rpx;}
|
|
|
+ .imgg{width: 28rpx;height: 30rpx;}
|
|
|
+ }
|
|
|
+ .oltit{font-weight: bold;font-size: 26rpx;color: #272727;line-height: 36rpx;}
|
|
|
+ .olbtn{font-size: 26rpx;color: #0156FE;padding: 0 12rpx;border-left: 2rpx solid #AAAAAA;margin-left: 12rpx;line-height: 1;}
|
|
|
+ .adrimg{width: 54rpx;height: 54rpx;flex: 0 0 auto;margin-left: 40rpx;}
|
|
|
+ .phos{
|
|
|
+ image{width: 80rpx;height: 80rpx;margin: 0 24rpx 8rpx 0;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .rlist{border-radius: 20rpx;border: 2rpx solid #E6E6E6;flex: 0 0 auto;margin-left: 40rpx;width: 88rpx;display: flex;align-items: center;justify-content: center;margin-bottom: 20rpx;font-weight: bold;
|
|
|
+font-size: 26rpx;color: #272727;
|
|
|
+ &.btna{background: #1BDD95;color: #FFFFFF;flex-direction: column;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .upbox{font-weight: 500;font-size: 22rpx;color: #AAAAAA;padding: 2rpx 0;margin-bottom: 24rpx;
|
|
|
+ image{width: 26rpx;height: 22rpx;margin-left: 14rpx;transition: all 0.3;}
|
|
|
+ &.act{
|
|
|
+ image{
|
|
|
+ transform: rotate(-180deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ohbtn{height: 88rpx;display: flex;align-items: center;justify-content: center;
|
|
|
+background: #1BDD95;font-weight: bold;font-size: 26rpx;color: #FFFFFF;border-radius: 20rpx;
|
|
|
+ &.btna{border: 2rpx solid #DADADA;background-color: #FFFFFF;width: 340rpx;color: #666666;}
|
|
|
+ &.btnb{width: 340rpx;}
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// 无数据
|
|
|
+.nodata{display: flex;flex-direction: column;align-items: center;
|
|
|
+ image{width: 440rpx;height: 440rpx;}
|
|
|
+ view{font-size: 30rpx;color: #666666;font-weight: bold;}
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|