完成弹框

hdPad/src/pages/home/components/finishWork.vue

@@ -0,0 +1,120 @@
+<template>
+    <view class="app-collect_money">
+        <view v-if="showSuccess == false">
+            <view class="collect-code_box">
+                <image class="img" :src="`${constant.imgUrl}/icon/scan/scan.png`" mode="scaleToFill" />
+                <view class="show-code">请出示付款码</view>
+                <view class="btn-default result">查询结果</view>
+                <view @click="cancelPay" class="btn-default result">取消</view>
+            </view>
+        </view>
+        <view v-else>
+
+			<view class="result-view">
+				<view class="iconfont iconchenggong"></view>
+				<view class="result-title">付款成功</view>
+				<button class="admin-button-com mini-btn default">返回</button>
+			</view>
+
+        </view>
+    </view>
+</template>
+<script>
+export default {
+    name:'finishWork',
+    components:{
+    },
+    data(){
+        return {
+            showSuccess:false
+        }
+    },
+    methods:{
+        cancelPay(){
+            this.$emit('cancelPay')
+        }
+    },
+    watch:{
+    }
+}
+</script>
+<style lang="scss" scoped>
+.app-collect_money {
+    background-color: #ffffff;
+    margin: 0 auto;
+    border-radius: 5upx;
+    padding: 10upx;
+    overflow-y: auto;
+    display: flex;
+    height: 90vh;
+    flex-direction: column;
+    box-sizing: border-box;
+    width:50vw;
+    & .price-box {
+        min-height: 100upx;
+        & > .title {
+            text-align: center;
+            font-size: 14upx;
+            padding: 5upx 0;
+            
+        }
+        & > input {
+            text-align: center;
+            line-height: 40upx;
+            height: 40upx;
+            font-size: 14upx;
+        }
+    }
+    & .keyboard-body_box {
+        flex: 1;
+    }
+    & .collect-code_box {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        padding-top:38upx;
+        & > .img {
+            width: 100upx;
+            height: 100upx;
+        }
+        & .show-code{
+            font-size: 14upx;
+            margin: 20upx 0 0 0;            
+        }
+        & .btn-default {
+            height: 40upx;
+            width: 100upx;
+            text-align: center;
+            line-height: 40upx;
+            border: 1px solid #eee;
+            font-size: 14upx;
+            color: #333333;
+        }
+        & > .result {
+            margin: 20upx 0 0 0;
+        }
+    }
+	.result-view {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		background: #ffffff;
+		border-radius: 20upx;
+        padding-top:50upx;
+		.iconchenggong {
+			font-size: 50upx;
+			color: $mainColor1;
+		}
+		.result-title {
+			margin: 20upx 0 10upx;
+			font-size: 15upx;
+		}
+        button{
+            font-size:13upx;
+            margin-top:10upx;
+        }
+	}
+}
+</style>

hdPad/src/pages/home/components/orderInfo.vue

@@ -78,16 +78,24 @@
         <view @click="modifyItem(orderInfo)">修改</view>
         <view>取消</view>
         <view>锁定</view>
-        <view class="active">完成</view>
+        <view class="active" @tap="finish">完成</view>
         <view>打印</view>
       </view>
 
+      <!-- 完成工单弹框 -->
+      <uni-popup ref="finishWorkRef" background-color="#fff" type="right">
+          <finishWork></finishWork>
+      </uni-popup>
+
   </view>
 </view>
 </template>
 <script>
 import { getFullInfo } from '@/api/work'
+import finishWork from './finishWork.vue'
 export default {
+	name: "orderInfo",
+	components: {finishWork},
   data() {
     return {
       orderInfo:[],
@@ -111,6 +119,10 @@ export default {
       }
   },
   methods:{
+    finish(){
+			this.$util.hitRemind()
+			this.$refs.finishWorkRef.open()
+    },
     modifyItem(info){
       this.$util.hitRemind()
       this.$util.pageTo({url:'/pages/home/modify',query: { id:info.id }})