baodeng_xcx/page_shanghu/cunqu/cun.vue

301 lines
6.1 KiB
Vue

<template>
<view class="page">
<u-navbar title=" " :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
title-size='36' height='36' id="navbar">
</u-navbar>
<view class="tanchuang">
<view class="name">
<text>*</text>存酒位置
</view>
<view class="weizhi" @click="weizhiflag = true">
{{xzname}} <image src="https://api.ccttiot.com/smartmeter/img/static/uRro7S5rvxSEiculRzsJ" mode=""></image>
</view>
<view class="name">
<text>*</text>手机号
</view>
<view class="weizhi">
<input type="text" v-model="phone" placeholder="请输入存酒人手机号" />
</view>
<view class="name">
<text>*</text>存放天数
</view>
<view class="weizhi">
<input type="text" v-model="day" placeholder="请输入存放天数" />
</view>
<view class="name">
备注
</view>
<view class="weizhi">
<input type="text" v-model="remark" placeholder="请输入备注" />
</view>
</view>
<view class="list">
<view class="item_list" v-for="(item,index) in selectedItems" :key="index">
<view class="" style="display: flex;">
<image :src="item.image" mode="aspectFill"></image>
<view class="name">
{{item.name == undefined ? '--' : item.name}}
</view>
</view>
<view class="jiajian">
x{{item.totalNum == undefined ? '--' : item.totalNum}}
</view>
</view>
</view>
<view class="jiulist" v-if="weizhiflag">
<view class="box">
<view class="" v-for="(item,index) in weizhilist" :key="index" @click="btnweizhi(item)">
<text>{{item.name == undefined ? '--' : item.name}}</text> <text>已存:{{item.currentNum == undefined ? '--' : item.currentNum}}</text>
</view>
</view>
<view class="btn">
<view class="qx" @click="weizhiflag = false">
取消
</view>
</view>
</view>
<view class="cun" @click="btncun">
存放
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: " ",
},
selectedItems:[],
weizhiflag:false,
weizhilist:[],
xzname:'请选择',
day:'',
phone:'',
remark:'',
xzid:''
}
},
onLoad(option) {
this.selectedItems = JSON.parse(option.arr)
this.getweizhi()
},
methods: {
// 获取存酒位置
getweizhi(){
this.$u.get(`/bst/location/list?storeId=${this.$store.state.storeId}&pageNum=1&pageSize=999`).then(res => {
if (res.code == 200) {
this.weizhilist = res.rows
}
})
},
// 选择存放位置
btnweizhi(item){
this.xzname = item.name
this.xzid = item.id
this.weizhiflag = false
},
// 点击存放
btncun(){
let arr = this.selectedItems.map(item => ({
goodsId: item.id ,
totalNum:item.totalNum
}))
let data = {
phone:this.phone,
remark:this.remark,
storageDays:this.day,
locationId:this.xzid,
storeId:this.$store.state.storeId,
storage:arr
}
this.$u.put(`/bst/storage/storageWine`,data).then(res => {
if (res.code == 200) {
uni.showToast({
title: '存放成功',
icon: 'success',
duration:3000
})
setTimeout(()=>{
uni.navigateBack()
},1000)
}else{
uni.showToast({
title: res.msg,
icon: 'none',
duration:3000
})
}
})
}
}
}
</script>
<style lang="scss">
page {
background: #010000;
}
.btn{
display: flex;
justify-content: space-between;
padding: 0 20rpx;
box-sizing: border-box;
position: fixed;
bottom: 50rpx;
left: 50%;
transform: translateX(-50%);
view{
width: 650rpx;
height: 100rpx;
text-align: center;
border: 1px solid #3D3D3D;
border-radius: 20rpx;
color: #fff;
line-height: 100rpx;
font-size: 32rpx;
font-weight: 600;
}
.qd{
background-color: #FF8998;
margin-left: 10rpx;
}
}
.jiulist{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: #010000;
z-index: 99;
.box{
margin-top: 120rpx;
padding: 50rpx;
box-sizing: border-box;
height: 83vh;
overflow: scroll;
view{
border: 1px solid #3D3D3D;
margin-right: 10rpx;
color: #fff;
border-radius: 10rpx;
margin-top: 20rpx;
padding: 30rpx 20rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
}
}
.tanchuang{
width: 750rpx;
height: 710rpx;
background: #0E0C0C;
padding: 8rpx 54rpx;
box-sizing: border-box;
.anniu{
width: 640rpx;
height: 90rpx;
background: #FF8998;
font-weight: 600;
font-size: 32rpx;
color: #3D3D3D;
text-align: center;
line-height: 90rpx;
margin-top: 78rpx;
border-radius: 10rpx;
}
.name{
color: #989898;
font-size: 32rpx;
margin-top: 40rpx;
text{
color: #FF8998;
margin-right: 10rpx;
}
}
.weizhi{
font-size: 36rpx;
color: #FFFFFF;
margin-top: 18rpx;
display: flex;
justify-content: space-between;
align-items: center;
input{
border-bottom: 1px solid #3D3D3D;
padding-bottom: 20rpx;
box-sizing: border-box;
width: 100%;
height: 90rpx;
}
image{
width: 40rpx;
height: 40rpx;
}
}
}
.cun{
width: 674rpx;
height: 90rpx;
background: #FF8998;
border-radius: 61rpx 61rpx 61rpx 61rpx;
font-weight: 600;
font-size: 32rpx;
color: #3D3D3D;
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 54rpx;
text-align: center;
line-height: 90rpx;
}
.list{
width: 100%;
margin-top: 50rpx;
padding: 0 30rpx;
box-sizing: border-box;
height: 30vh;
overflow: scroll;
.wu{
margin-left: 160rpx;
margin-top: 100rpx;
color: #eee;
font-size: 28rpx;
}
.item_list{
display: flex;
justify-content: space-between;
margin-bottom: 42rpx;
.jiajian{
display: flex;
align-items: flex-end;
justify-content: center;
width: 172rpx;
color: #999;
image{
width: 42rpx;
height: 42rpx;
}
input{
width: 60rpx;
text-align: center;
}
}
.name{
font-size: 28rpx;
color: #FFFFFF;
margin-left: 22rpx;
}
image{
width: 140rpx;
height: 140rpx;
}
}
}
</style>