deming/pageE/tool/WashOrder.vue
2020-08-10 17:46:57 +08:00

724 lines
18 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="wash-order">
<view>
<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false" active-color="#FF780F" :current="current" font-size="32" :show-bar="false" @change="tabsChange" height="88"></u-tabs-swiper>
</view>
<swiper :current="swiperCurrent" @animationfinish="animationfinish" class="aaa" :style="{ minHeight: swiperHeight }">
<swiper-item class="swiper-item">
<scroll-view scroll-y="true" style="height: 100%;">
<view class="order-info">
<view class="order-name" @click="showPopup=true">
<view class="title titles" >
<text>选择订单:</text>
<image src="../../static/image/shop/2.png" mode=""></image>
</view>
<!-- <u-icon name="arrow-dwon" color="#2979ff" size="28"></u-icon> -->
</view>
<view class="choose-info" v-if="choose">
<view class="store">
<view>
<image :src="checkedGoods.store.store_avatar"></image>{{ checkedGoods.store.store_name }}
</view>
<view>
订单编号:{{ checkedGoods.order_sn }}
</view>
</view>
<view class="store_info">
<view class="info_img">
<image :src="checkedGoods.goods.goods_image" mode="">
</view>
<view class="info_txt">
<view class="content u-line-2">
{{ checkedGoods.goods.goods_name }}
</view>
<view class="much">
<text>¥{{ checkedGoods.goods.goods_pay_price }}</text>
<text>x{{ checkedGoods.goods.goods_num }}</text>
</view>
</view>
</view>
</view>
<view class="order-view order-phone">
<view class="title">衣服状况:</view>
<input type="text" v-model="goodsStatus" />
</view>
<view class="order-view order-type" @click="showClothesType=true">
<view class="title">商品类型:</view>
<input type="text" v-model="type.label" disabled />
</view>
<view class="order-view order-name">
<view class="title">送洗人:</view>
<input type="text" v-model="name" />
</view>
<view class="order-view order-phone">
<view class="title">手机号:</view>
<input type="text" v-model="phone" maxlength="11" />
</view>
<view class="order-view order-area" @click="showAddress=true">
<view class="title">省市区:</view>
<input type="text" v-model="area" disabled />
<!-- <view class="location">
<image src="../static/mine/28.png"></image>
<view>定位</view>
</view> -->
</view>
<view class="order-view order-address">
<view class="title">详细地址:</view>
<input type="text" v-model="address" />
</view>
</view>
<view class="upload-image">
<view class="title">上传商品图片</view>
<u-upload
ref="platform"
:custom-btn="true"
:max-count="count"
:action="uaction"
:auto-upload="false"
:header="uheader"
:form-data="uformData"
:name="uname"
@on-uploaded="setImageList"
>
<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
<image src="../static/mine/27.png"></image>
</view>
</u-upload>
</view>
<view class="wash-btn" @click="submitImage">确认送洗</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<view class="order-info">
<view class="order-view order-name">
<view class="title">商品名称:</view>
<input type="text" v-model="goodsName" />
</view>
<view class="order-view order-phone">
<view class="title">衣服状况:</view>
<input type="text" v-model="goodsStatus" />
</view>
<view class="order-view order-phone" @click="showClothesType=true">
<view class="title">商品类型:</view>
<input type="text" v-model="type.label" disabled />
</view>
<view class="order-view order-name">
<view class="title">送洗人:</view>
<input type="text" v-model="name" />
</view>
<view class="order-view order-phone">
<view class="title">手机号:</view>
<input type="text" v-model="phone" maxlength="11" />
</view>
<view class="order-view order-area" @click="showAddress=true">
<view class="title">省市区:</view>
<input type="text" v-model="area" disabled />
<!-- <view class="location">
<image src="../static/mine/28.png"></image>
<view>定位</view>
</view> -->
</view>
<view class="order-view order-address">
<view class="title">详细地址:</view>
<input type="text" v-model="address" />
</view>
</view>
<view class="upload-image">
<view class="title">上传商品图片</view>
<u-upload
ref="physical"
:custom-btn="true"
:max-count="count"
:action="uaction"
:auto-upload="false"
:header="uheader"
:form-data="uformData"
:name="uname"
@on-uploaded="setImageList"
>
<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
<image src="../static/mine/27.png"></image>
</view>
</u-upload>
</view>
<view class="wash-btn" @click="submitImage">确认送洗</view>
</swiper-item>
</swiper>
<u-select v-model="showClothesType" :list="typeList" value-name="id" label-name="name" @confirm="confirmType" mode="single-column"></u-select>
<u-select v-model="showAddress"
mode="mutil-column-auto"
:list="areaList"
value-name="area_id"
label-name="area_name"
child-name="_child"
@confirm="setArea"
:safe-area-inset-bottom="true">
</u-select>
<u-popup v-model="showPopup" mode="bottom" border-radius="20">
<view class="order-popup">
<view class="check">
<text>选择订单</text>
<u-icon name="close" color="#A29FA3" size="32" @click="showPopup=false"></u-icon>
</view>
<scroll-view scroll-y class="order-list">
<u-radio-group v-model="value" @change="radioChange">
<view v-for="(items, index) in orderList" :key="index" class="order-item">
<view class="store">
<view class="name">
<image :src="items.extend_store.store_avatar" mode=""></image>
<text>{{ items.store_name }}</text>
</view>
<view class="order-sn">
订单编号:{{ items.order_sn }}
</view>
</view>
<view class="checkd">
<label class="radio-view" v-for="(item, index) in items.extend_order_goods" :key="index">
<view class="radio">
<u-radio color="#F0AD4E" :name="items.order_id + ' ' + item.goods_id" active-color="#FF780F" icon-size="24" shape="circle"></u-radio>
</view>
<view class="store_info">
<view class="info_img">
<image :src="item.goods_image" mode="">
</view>
<view class="info_txt">
<view class="content u-line-2">
{{ item.goods_name }}
</view>
<view class="much">
<text>{{ item.goods_pay_price }}</text>
<text>x{{ item.goods_num }}</text>
</view>
</view>
</view>
</label>
</view>
</view>
</u-radio-group>
</scroll-view>
<view class="order-btn" @click="confirm">确认</view>
</view>
</u-popup>
<u-toast ref="uToast" />
</view>
</template>
<script>
export default {
data() {
return {
// items: [],
count: 4, // 最大图片数量
type: {}, // 商品类型
name: '', // 送洗人
phone: '', // 手机号
area: '', // 省市区
goodsStatus: '', // 衣服状况
address: '', // 详细地址
goodsName: '', // 商品名称
list: [{
name: '平台历史订单'
}, {
name: '实体店历史订单'
}],
typeList: [], // 商品类型列表
orderList: [], // 商品列表
page: 0,
current: 0,
swiperCurrent: 0,
areaList: [], // 地址列表
showClothesType: false,
showAddress: false,
showPopup : false,
swiperHeight: '',
value: '', // radio
checkedGoods: {}, // 选中的商品
choose: false, // 是否选择了商品
filesArr: [], // 选择的图片
uploadImage: [], // 图片名称(后台返回)列表
uaction: this.$u.http.config.baseUrl + '/Upload/uploadfile', // 下面是上传图片的参数
uheader: {
"authorization": 'Bearer' + " " + uni.getStorageSync('token')
},
uname: 'common', // 与formData name 一样
uformData: {
name: 'common', // 其他图片
},
debounce: true,
}
},
onShow() {
this.debounce = true;
// this.current = 0;
// this.swiperCurrent = 0;
this.showPopup = false;
this.choose = false;
},
onLoad() {
this.getOrderList();
this.setViewHeight();
this.getAreaData();
this.getClothesTypeList();
},
watch: {
swiperCurrent() {
this.goodsStatus = '';
this.type = {};
this.name = '';
this.phone = '';
this.area = '';
this.address = '';
}
},
methods: {
getClothesTypeList() {
this.$u.api.getClothesTypeList().then(res => {
if (res.errCode == 0) {
this.typeList = res.data.typeList;
} else {
this.typeList = [];
}
// console.log(this.typeList);
})
},
confirmType(e) {
// console.log(e);
this.type = e[0];
},
async getOrderList({ load = 'reload' } = {}) {
const res = await this.$u.api.getOrderList({
page: this.page,
// type: '40',
})
this.timer = true;
if(res.errCode == 0) {
if(load == 'reload') this.orderList = res.data;
else this.orderList.push(...res.data);
}
return res;
},
submitImage() {
if(!this.debounce) return;
this.debounce = false;
this.current == 0 ? this.$refs.platform.upload() : this.$refs.physical.upload();
},
tabsChange(index) {
this.swiperCurrent = index;
},
setImageList(lists) {
// console.log(lists);
let imageList = [];
lists.forEach(res => {
if(res.response.errCode == 0) imageList.push(res.response.data.file_name);
})
// console.log(imageList);
this.filesArr = imageList;
// console.log(this.filesArr);
this.confirmSend();
},
validationParams() {
if (this.current == 1) {
if(this.$u.test.isEmpty(this.goodsName)) {
this.showToast('商品名称不能为空', 'warning');
return false;
}
}
if(this.current == 0) {
if(JSON.stringify(this.checkedGoods) == '{}') {
this.showToast('订单不能为空', 'warning');
return false;
}
}
if(this.$u.test.isEmpty(this.goodsStatus)) {
this.showToast('衣服状况不能为空', 'warning');
return false;
}
if(JSON.stringify(this.type) == '{}') {
this.showToast('商品类型不能为空', 'warning');
return false;
}
if(this.$u.test.isEmpty(this.name)) {
this.showToast('送洗人不能为空', 'warning');
return false;
}
if(this.$u.test.isEmpty(this.phone)) {
this.showToast('手机号不能为空', 'warning');
return false;
}
if(!this.$u.test.mobile(this.phone)) {
this.showToast('手机号错误', 'warning');
return false;
}
if(this.$u.test.isEmpty(this.area)) {
this.showToast('地址不能为空', 'warning');
return false;
}
if(this.$u.test.isEmpty(this.address)) {
this.showToast('详细地址不能为空', 'warning');
return false;
}
return true;
},
confirmSend() {
if(!this.validationParams()) return false;
let params = {
tid: this.type.value,
member_name: this.name,
area_info: this.area,
address_info: this.address,
goods_images: this.filesArr,
member_phone: this.phone,
condition: this.goodsStatus,
}
if(this.current == 0) {
Object.assign(params, {
type: 1,
order_id: this.checkedGoods.order_id,
goods_id: this.checkedGoods.goods.goods_id,
});
} else if(this.current == 1) {
Object.assign(params, {
type: 2,
goods_name: this.goodsName,
});
}
// console.log(params);
this.$u.api.sendLaundrySave(params).then(res => {
this.$u.toast(res.message);
if(res.errCode == 0) {
this.$refs.uToast.show({
title: res.message,
type: 'success',
back: true,
})
} else {
this.$u.toast(res.message);
this.debounce = true;
}
})
},
radioChange(e){
const ids = e.split(" ");
// console.log(ids)
let checkedGoods = {};
this.orderList.forEach(order => {
if(order.order_id == ids[0]) {
Object.assign(checkedGoods, { store: order.extend_store });
Object.assign(checkedGoods, { order_sn: order.order_sn });
Object.assign(checkedGoods, { order_id: order.order_id });
order.extend_order_goods.forEach(goods => {
if(goods.goods_id == ids[1]) {
Object.assign(checkedGoods, { goods: goods });
this.checkedGoods = checkedGoods;
}
})
}
})
},
setArea(area) {
// console.log(area);
this.area_id = area[0].value;
this.city_id = area[1].value;
let temp = '';
area.forEach(e => {
temp += e.label;
});
this.area = temp;
},
getAreaData() {
this.$u.api.getArea().then((res)=>{
if (res.errCode == 0) {
this.areaList = res.data;
} else {
this.areaList = [];
}
})
},
animationfinish(e) {
// 可重新提交订单
this.debounce = true;
let current = e.detail.current;
this.swiperCurrent = current;
this.current = current;
},
setViewHeight() {
const res = uni.getSystemInfoSync();
this.swiperHeight = res.windowHeight - (res.windowWidth / 750) * 88 + 'px';
},
confirm(e){
this.showPopup = false;
if(JSON.stringify(this.checkedGoods) != '{}'){
this.choose = true;
}else{
this.choose = false;
}
},
showToast(message, type) {
this.$refs.uToast.show({
title: message,
type: type,
})
},
},
};
</script>
<style lang="scss" scoped>
.wash-order {
height: calc(100vh - 1rpx);
overflow: hidden;
border-top: 1rpx solid #ECECEC;
> uni-swiper {
flex: 1;
// height: 95vh;
}
.aaa {
overflow-y: scroll;
}
.order-info {
.choose-info{
display: flex;flex-wrap: wrap;
height: 335rpx;
.store{
>view{
>image {
width:60rpx;
height:60rpx;
border-radius: 50%;
vertical-align: middle;
margin-right: 12rpx;
}
}
font-size: 28rpx;
color:rgba(51,51,51,1);
line-height: 60rpx;
}
.store_info{
display: flex;
flex-wrap: nowrap;
width: 100%;
height: 150rpx;
.info_img {
>image {
width: 180rpx;
height: 160rpx;
background-color: aqua;
border-radius: 10rpx;
}
}
.info_txt {
padding-left: 30rpx;
padding-right: 30rpx;
display: flex;
flex-wrap: wrap;
width: 100%;
.content {
height: 74rpx;
line-height: 37rpx;
font-size: 30rpx;
color:rgba(51,51,51,1);
}
.much{
display: flex;
justify-content: space-between;
width: 100%;
}
}
}
}
> view {
width: 750rpx;
height: 98rpx;
background: rgba(255,255,255,1);
padding: 35rpx 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2rpx;
background-color: #ECECEC;
}
.title {
font-size: 30rpx;
color: rgba(51,51,51,1);
margin-right: 10rpx;
}
.titles {
font-size: 30rpx;
color: rgba(51,51,51,1);
margin-right: 10rpx;
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
>image{
width: 27rpx;
height: 12rpx;
}
}
> input {
flex: 1;
}
}
.order-area {
.location {
margin-left: 20rpx;
text-align: center;
font-size: 22rpx;
color: rgba(255,120,15,1);
> image {
width: 26rpx;
height: 32rpx;
margin-bottom: 10rpx;
}
}
}
.order-view {
.title {
width: 140rpx;
font-size: 30rpx;
color: rgba(51,51,51,1);
margin-right: 10rpx;
}
> input {
text-align: left;
}
}
}
.upload-image {
padding: 35rpx 30rpx;
.title {
font-size: 30rpx;
color: rgba(51,51,51,1);
margin-bottom: 34rpx;
}
.slot-btn {
width: 140rpx;
height: 140rpx;
background: rgba(236,236,236,1);
border-radius: 10rpx;
text-align: center;
> image {
width: 54rpx;
height: 49rpx;
margin-top: 48rpx;
}
}
}
.bottom_btn{
position: fixed;
width: 100%;
height: 100rpx;
bottom: 0;
}
.wash-btn {
width: 690rpx;
height: 98rpx;
background: rgba(255,120,15,1);
border-radius: 49rpx;
margin: 30rpx auto 30rpx;
font-size: 36rpx;
color:rgba(255,255,255,1);
text-align: center;
line-height: 98rpx;
}
.order-popup {
.check{
padding: 30rpx;
border-bottom: 1rpx solid rgba(236, 236, 236, 1);
display: flex;
align-items: center;
justify-content: space-between;
> text {
font-size: 30rpx;
font-weight: 500;
color: rgba(51,51,51,1);
}
}
.order-list {
height: 60vh;
padding: 30rpx;
box-sizing: border-box;
.order-item {
margin-bottom: 30rpx;
.store {
.name {
margin-bottom: 20rpx;
font-size: 28rpx;
color:rgba(51,51,51,1);
> image {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
vertical-align: middle;
margin-right: 13rpx;
}
}
.order-sn {
margin-bottom: 20rpx;
font-size: 24rpx;
color: rgba(153,153,153,1);
}
}
.checkd {
.radio-view {
display: flex;
align-items: center;
margin-bottom: 20rpx;
.radio {
margin-right: 20rpx;
}
.store_info {
display: flex;
flex-wrap: nowrap;
width: 100%;
.info_img{
>image{
width: 180rpx;
height: 160rpx;
background-color: aqua;
border-radius: 10rpx;
}
}
.info_txt{
padding-left: 30rpx;
padding-right: 30rpx;
display: flex;
flex-wrap: wrap;
width: 100%;
.content{
height: 74rpx;
line-height: 37rpx;
font-size: 30rpx;
color:rgba(51,51,51,1);
}
.much{
display: flex;
justify-content: space-between;
width: 100%;
}
}
}
}
}
}
}
.order-btn {
width: 690rpx;
height: 98rpx;
background: rgba(255,120,15,1);
border-radius: 49rpx;
line-height: 98rpx;
text-align: center;
margin: 0 auto 40rpx;
font-size: 36rpx;
color: rgba(255,255,255,1);
}
}
}
</style>