Files
supplier-dispatch-h5/src/views/index/reporting.vue
2023-08-15 17:20:21 +08:00

143 lines
3.5 KiB
Vue

<template>
<div class="wrap">
<div class="title">报备事项:</div>
<div class="line"></div>
<van-radio-group v-model="radio" @change="change">
<van-radio name="特殊情况绕路" class="item">
特殊情况绕路
<img
slot="icon"
slot-scope="props"
:src="props.checked ? activeIcon : inactiveIcon"
>
</van-radio>
<van-radio name="事发地变更" class="item">
事发地变更
<img
slot="icon"
slot-scope="props"
:src="props.checked ? activeIcon : inactiveIcon"
>
</van-radio>
<van-radio name="目的地变更" class="item">
目的地变更
<img
slot="icon"
slot-scope="props"
:src="props.checked ? activeIcon : inactiveIcon"
>
</van-radio>
<van-radio name="其他报备" class="item">
其他报备
<img
slot="icon"
slot-scope="props"
:src="props.checked ? activeIcon : inactiveIcon"
>
</van-radio>
</van-radio-group>
<textarea class="multiple" id="text-input" rows="4" cols="50" placeholder="报备描述" v-model="decscripTxt"></textarea><br>
<common-btn @submitClick="submit" />
</div>
</template>
<script>
import {orderReporting} from "@/api/order"
import CommonBtn from "@/components/commonBtn.vue"
export default {
name: "reportingView",
data(){
return{
decscripTxt:'',
radio: '',
activeIcon: require('@/assets/check.png'),
inactiveIcon: require('@/assets/uncheck.png'),
queryType:'',
userOrderId:'',
orderCode:''
}
},
mounted() {
console.log(this.radio)
const urlParams = new URLSearchParams(window.location.search);
this.queryType = urlParams.get('queryType');
this.userOrderId = urlParams.get('userOrderId');
this.orderCode = urlParams.get('orderCode')
},
methods:{
submit(){
console.log("提交1111111111")
this.goReporting();
},
change(e){
this.radio=e
console.log("可以拿到选中的是哪个值",this.radio)
},
async goReporting(){
let result = await orderReporting({
queryType:this.queryType,
userOrderId:this.userOrderId,
orderCode:this.orderCode,
reportingItem:this.radio ? this.radio : "",
reportingDesc:this.decscripTxt ? this.decscripTxt : ""
})
if(result.code === 200){
this.$toast(result.msg)
setTimeout(()=>{
window.android.sendMessage("goBack");
},2000)
}
}
},
components:{
CommonBtn
}
}
</script>
<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
.wrap {
box-sizing: border-box;
padding: 13px 24px 0;
width: 100%;
height: 100%;
}
.title {
@include fontWeightSize(500,14px);
color: #323643;
}
.item{
font-size: 14px;
margin-bottom: 8px;
@include flexCenter;
}
.line {
@include wh(100%,2px);
opacity: 0.16;
border-top: 1px solid;
margin-bottom: 10px;
margin-top: 10px;
border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
}
img{
@include widHeiMar(16px,16px,10px);
}
.multiple {
width: 100%;
height: 125px;
background: #FAFAFA;
border-radius: 3px;
border: 1px solid #E6E6E6;
backdrop-filter: blur(10px);
padding: 10px;
box-sizing: border-box;
margin-top: 20px;
}
</style>