414 lines
8.7 KiB
Vue
414 lines
8.7 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<view class="dataInfo">
|
|||
|
|
<view class="dataList" v-for="(item,index) in searchData" :key="index">
|
|||
|
|
<checkbox-group @change="checkClick(item)">
|
|||
|
|
<checkbox :checked="item.checked" />
|
|||
|
|
</checkbox-group>
|
|||
|
|
<view class="details">
|
|||
|
|
<view class="img">
|
|||
|
|
<image :src="item.pic"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="text">
|
|||
|
|
<text>{{item.name}}</text>
|
|||
|
|
<text>规格：{{item.spec}}</text>
|
|||
|
|
<text>￥{{item.price}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="action">
|
|||
|
|
<text @click="reduce(item)">-</text>
|
|||
|
|
<text>{{item.num}}</text>
|
|||
|
|
<text @click="add(item)">+</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <button @click="delCart">删除</button> -->
|
|||
|
|
<view class="buy">
|
|||
|
|
<view class="checked">
|
|||
|
|
<checkbox-group @tap="checkAll">
|
|||
|
|
<checkbox :checked="allChecked" />
|
|||
|
|
</checkbox-group>
|
|||
|
|
<text>全选</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="total">
|
|||
|
|
<view class="price">
|
|||
|
|
<text>总计：</text>
|
|||
|
|
<text>￥{{totalPrice}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="bill" @click="finishCart">
|
|||
|
|
<text>确认申请</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import { basePath } from '../../public';
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
allChecked: false,
|
|||
|
|
inputs: "",
|
|||
|
|
list: [],
|
|||
|
|
totalFine: '',
|
|||
|
|
totalGoods: [],
|
|||
|
|
sendData: {}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
totalPrice() {
|
|||
|
|
//总计金额
|
|||
|
|
var str = 0;
|
|||
|
|
for (var i = 0; i < this.searchData.length; i++) {
|
|||
|
|
if (this.searchData[i].checked) {
|
|||
|
|
str += this.searchData[i].num * this.searchData[i].price;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.totalFine = str
|
|||
|
|
return str;
|
|||
|
|
},
|
|||
|
|
searchData: function() {
|
|||
|
|
//模糊查询
|
|||
|
|
if (!this.inputs) {
|
|||
|
|
return this.list;
|
|||
|
|
}
|
|||
|
|
return this.list.filter((item) => {
|
|||
|
|
return item.name.includes(this.inputs);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
add(item) { //加加
|
|||
|
|
let num = item.num
|
|||
|
|
item.num = num + 1
|
|||
|
|
},
|
|||
|
|
reduce(item) { //减减
|
|||
|
|
let num = item.num
|
|||
|
|
if (num > 1) {
|
|||
|
|
num -= 1
|
|||
|
|
} else if (num = 1) {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
title: "该器具无法再减少"
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
item.num = num
|
|||
|
|
},
|
|||
|
|
// 单个商品的选择
|
|||
|
|
checkClick(item) {
|
|||
|
|
item.checked = !item.checked
|
|||
|
|
if (!item.checked) {
|
|||
|
|
this.allChecked = false
|
|||
|
|
} else {
|
|||
|
|
// 判断每一个商品是否是被选择的状态
|
|||
|
|
const goods = this.list.every(item => {
|
|||
|
|
return item.checked === true
|
|||
|
|
})
|
|||
|
|
if (goods) {
|
|||
|
|
this.allChecked = true
|
|||
|
|
} else {
|
|||
|
|
this.allChecked = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//全选、全不选
|
|||
|
|
checkAll() {
|
|||
|
|
this.allChecked = !this.allChecked
|
|||
|
|
if (this.allChecked) {
|
|||
|
|
this.list.map(item => {
|
|||
|
|
item.checked = true
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
this.list.map(item => {
|
|||
|
|
item.checked = false
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
finishCart () {
|
|||
|
|
let that = this
|
|||
|
|
that.totalGoods = that.list.filter((item) => {
|
|||
|
|
return item.checked == true
|
|||
|
|
})
|
|||
|
|
if (that.totalGoods.length == 0) {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
title: '未选择任何商品！'
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
that.totalGoods = that.totalGoods.map((item) => {
|
|||
|
|
return {
|
|||
|
|
createBy: uni.getStorageSync('userInfo').sysUser.userName,
|
|||
|
|
companyId: item['companyId'],
|
|||
|
|
status: item['status'],
|
|||
|
|
// createTime: that.formatDate(new Date().getTime()),
|
|||
|
|
typeId: item['typeId'],
|
|||
|
|
preNum: item['num']
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
that.sendData = {
|
|||
|
|
companyId: uni.getStorageSync('userInfo').sysUser.companyId,
|
|||
|
|
createBy: uni.getStorageSync('userInfo').sysUser.userName,
|
|||
|
|
taskType: 29,
|
|||
|
|
taskStatus: 30,
|
|||
|
|
// createTime: that.formatDate(new Date().getTime()),
|
|||
|
|
leaseApplyInfo: {
|
|||
|
|
leasePerson: uni.getStorageSync('userInfo').sysUser.userName,
|
|||
|
|
phone: uni.getStorageSync('userInfo').sysUser.phonenumber
|
|||
|
|
},
|
|||
|
|
leaseApplyDetails: that.totalGoods
|
|||
|
|
}
|
|||
|
|
console.log(that.sendData);
|
|||
|
|
// 提交预约商品
|
|||
|
|
uni.request({
|
|||
|
|
url: basePath + '/tm_task/submitLeaseApply',
|
|||
|
|
method: 'POST',
|
|||
|
|
header: {
|
|||
|
|
'content-type': 'application/json',
|
|||
|
|
'Authorization': uni.getStorageSync('token')
|
|||
|
|
},
|
|||
|
|
data: that.sendData,
|
|||
|
|
success: (res) => {
|
|||
|
|
console.log(res);
|
|||
|
|
if (res.data.code == 200) {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
title: res.data.msg,
|
|||
|
|
success: () => {
|
|||
|
|
uni.removeStorageSync('goodList')
|
|||
|
|
uni.switchTab({
|
|||
|
|
url: '/pages/index/index'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
title:res.data.msg
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
formatDate (value) {
|
|||
|
|
if (typeof (value) == 'undefined') {
|
|||
|
|
return ''
|
|||
|
|
} else {
|
|||
|
|
let date = new Date(parseInt(value))
|
|||
|
|
let y = date.getFullYear()
|
|||
|
|
let MM = date.getMonth() + 1
|
|||
|
|
MM = MM < 10 ? ('0' + MM) : MM
|
|||
|
|
let d = date.getDate()
|
|||
|
|
d = d < 10 ? ('0' + d) : d
|
|||
|
|
let h = date.getHours()
|
|||
|
|
h = h < 10 ? ('0' + h) : h
|
|||
|
|
let m = date.getMinutes()
|
|||
|
|
m = m < 10 ? ('0' + m) : m
|
|||
|
|
let s = date.getSeconds()
|
|||
|
|
s = s < 10 ? ('0' + s) : s
|
|||
|
|
return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onNavigationBarButtonTap() {
|
|||
|
|
let that = this
|
|||
|
|
let isChecked = that.list.every((item) => {
|
|||
|
|
return item.checked == false
|
|||
|
|
})
|
|||
|
|
if (that.list.length != 0 && isChecked == false) {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '删除商品',
|
|||
|
|
content: '确认删除商品吗？',
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
that.list = that.list.filter((item) => {
|
|||
|
|
return item.checked == false
|
|||
|
|
})
|
|||
|
|
uni.setStorageSync('goodList', that.list)
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
title: '商品删除成功！'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
let that = this
|
|||
|
|
if (uni.getStorageSync('goodList').length != 0) {
|
|||
|
|
that.list = uni.getStorageSync('goodList')
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
title: '预约车内暂无设备！'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
body{
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding-bottom: 10vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/deep/uni-checkbox .uni-checkbox-input {
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/deep/uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
|
|||
|
|
border-color: #ddd;
|
|||
|
|
color: #fff !important;
|
|||
|
|
background-color: #2DCF8C !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/deep/uni-checkbox .uni-checkbox-input {
|
|||
|
|
border-color: #ddd;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/deep/uni-checkbox .uni-checkbox-input:hover {
|
|||
|
|
border-color: #ddd;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search {
|
|||
|
|
padding-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search .searchIput {
|
|||
|
|
background-color: #e6e6e6;
|
|||
|
|
width: 95%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
height: 72rpx;
|
|||
|
|
line-height: 72rpx;
|
|||
|
|
border-radius: 50rpx;
|
|||
|
|
padding: 0 32rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search .searchIput input {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
color: grey;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search .searchIput image {
|
|||
|
|
width: 34rpx;
|
|||
|
|
height: 34rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.dataInfo {
|
|||
|
|
width: 95%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dataInfo .dataList {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
border-bottom: 2px solid #F1F1F1;
|
|||
|
|
padding: 25rpx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dataInfo .dataList .details {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex: 1;
|
|||
|
|
font-size: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dataInfo .dataList .details .img image {
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 140rpx;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dataInfo .dataList .details .text text {
|
|||
|
|
color: #000;
|
|||
|
|
font-size: 23rpx;
|
|||
|
|
display: block;
|
|||
|
|
padding: 10rpx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dataInfo .dataList .details .text text:last-child {
|
|||
|
|
color: red;
|
|||
|
|
font-size: 25rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dataInfo .dataList .action text {
|
|||
|
|
font-size: 25rpx;
|
|||
|
|
color: #000;
|
|||
|
|
border: 1px solid #C8C7CC;
|
|||
|
|
display: inline-block;
|
|||
|
|
line-height: 50rpx;
|
|||
|
|
width: 60rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dataInfo .dataList .action text:nth-child(2) {
|
|||
|
|
border-left: none;
|
|||
|
|
border-right: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.buy {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
position: fixed;
|
|||
|
|
left: 50%;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: 95%;
|
|||
|
|
transform: translate(-50%, 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.buy .checked {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.buy .checked text {
|
|||
|
|
font-size: 25rpx;
|
|||
|
|
color: #000;
|
|||
|
|
padding: 0 12rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.buy .total {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.buy .total .price {
|
|||
|
|
padding-right: 20rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.buy .total .price text {
|
|||
|
|
font-size: 27rpx;
|
|||
|
|
color: #C8C7CC;
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.buy .total .price text:last-child {
|
|||
|
|
color: red;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.buy .total .bill text {
|
|||
|
|
font-size: 25rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
display: inline-block;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
background: linear-gradient(#FE4A3F, #FF9600);
|
|||
|
|
line-height: 70rpx;
|
|||
|
|
width: 150rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
</style>
|