purchase-let/pageQuota/asset/index.vue

294 lines
6.0 KiB
Vue

<template>
<block v-if="lists.length">
<view class="m-card m-good" v-for="(item, index) in lists" :key="index">
<view class="shop-check" @click="item.check=!item.check">
<image v-if="!item.check" src="@/static/icon/n-check.png"></image>
<image v-else src="@/static/icon/check.png"></image>
</view>
<view class="image">
<up-image width="160rpx" height="160rpx" :src="item.image"></up-image>
</view>
<view class="body-content">
<view>
<view class="title">
<view> <text>{{item.store_name }}</text> x<text>{{item.nums }}</text> </view>
<view>¥{{item.price}}</view>
</view>
</view>
<view class="time">
<view style="float: right;">
<up-number-box :min="1" :max="item.nums" v-model="item.num"></up-number-box>
</view>
</view>
</view>
</view>
</block>
<up-empty v-else mode="history" style="margin-top: 20vh;" text='没有更多内容了'>
</up-empty>
<view style="height: 200rpx;" />
<view class="bottom">
<view style="display: flex;align-items: center;">
<view class="all-checl">
<image v-if="getCheckNum()!=lists.length" @click="checkAll" src="@/static/icon/n-check.png"></image>
<image @click="checkAllNot" v-else src="@/static/icon/check.png"></image>
</view>
<view style="margin-left: 8rpx;" @click="checkAll" v-if='getCheckNum() !=lists.length'>
全选({{getCheckNum()}})
</view>
<view style="margin-left: 8rpx;" @click="checkAllNot" v-else>
全不选({{getCheckNum()}})
</view>
</view>
<view style="display: flex;align-items: center;">
<up-button color="#20b128" shape="circle" @click="showPop=true">
<view class="">
预约提货({{getCheckNum()}})
</view>
</up-button>
</view>
</view>
<up-popup :show="showPop" @close="showPop=false" @open="showPop=true" mode="center">
<view class="popContent">
<view class="tit">
预约提货
</view>
<view class="label">
预约时间:<view class="left" @click="showCalendar=true">
{{formData.times}}
</view>
</view>
<view class="label">
选择门店:<view class="left" @click="navgo('/multipleShop/index/index?event=asset')">
{{formData.store_name}}
</view>
</view>
<view class="rect-btn">
<view style="width: 236rpx;">
<up-button @click="showPop=false">取消</up-button>
</view>
<view style="width: 236rpx;">
<up-button color="#20b128" @click="submit">确定</up-button>
</view>
</view>
</view>
</up-popup>
<up-calendar :show="showCalendar" color="#20B128" @confirm="confirmDate" @close='showCalendar=false'></up-calendar>
</template>
<script setup>
import {
ref,
reactive
} from "vue"
import {
onPullDownRefresh
} from "@dcloudio/uni-app"
import {
getUserProductStorageLists,
reservationUserProductStorage
} from "@/api/asset.js"
import useUserStore from "@/store/user";
let userInfo = useUserStore().userInfo
const value = ref(1)
const showPop = ref(false)
const showCalendar = ref(false)
const lists = ref([])
const navgo = (url) => {
uni.navigateTo({
url
})
}
const getCheckNum = () => {
return lists.value.filter(item => item.check).length
}
const formData = reactive({
info: [],
times: "",
store_id: "",
store_name: "",
})
uni.$on('asset', function(data) {
let datas = JSON.parse(data)
formData.store_id = datas.id
formData.store_name = datas.name
})
const getLists = async (isPull) => {
let res = await getUserProductStorageLists({
uid: userInfo.id
})
lists.value = res.data.lists
lists.value.forEach(item => {
item.num = 1
})
if (isPull) uni.stopPullDownRefresh()
}
// 全选&&全不选
const isAll = ref(false)
const checkAll = () => {
lists.value.forEach(item => item.check = true)
}
const checkAllNot = () => {
lists.value.forEach(item => item.check = false)
}
// 全选&&全不选结束
const submit = async () => {
formData.info = (lists.value.filter(item => item.check)).map(item => {
return {
product_id: item.product_id,
nums: item.num
}
})
await reservationUserProductStorage({
...formData
})
showPop.value = false
getLists()
}
const confirmDate = (e) => {
formData.times = e[0]
showCalendar.value = false
}
onPullDownRefresh(() => {
getLists(true)
})
getLists()
</script>
<style lang="scss">
.m-card {
margin: 20rpx;
border-radius: 14rpx;
background-color: #fff;
padding: 20rpx;
}
.m-good {
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
.image {
width: 160rpx;
height: 160rpx;
margin-right: 20rpx;
border-radius: 14rpx;
overflow: hidden;
}
.body-content {
width: 490rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #989898;
.title {
display: flex;
justify-content: space-between;
font-size: 28rpx;
color: #444;
}
.tips {
display: flex;
justify-content: space-between;
font-size: 24rpx;
margin-top: 10rpx;
align-items: center;
}
.time {
padding: 5rpx 10rpx;
font-size: 26rpx;
color: #444;
border-radius: 10rpx;
// display: flex;
}
}
}
.shop-check {
width: 60rpx;
height: 150rpx;
display: flex;
align-items: center;
image {
width: 40rpx;
height: 40rpx;
}
}
.all-checl {
image {
width: 40rpx;
height: 40rpx;
}
}
.bottom {
width: 100vw;
padding: 50rpx 20rpx;
padding-top: 20rpx;
position: fixed;
bottom: 0;
background-color: white;
display: flex;
box-sizing: border-box;
justify-content: space-between;
align-items: center;
}
.popContent {
width: 600rpx;
height: 400rpx;
padding: 20rpx 50rpx;
box-sizing: border-box;
.tit {
text-align: center;
font-size: 34rpx;
margin-bottom: 10rpx;
}
}
.rect-btn {
display: flex;
// margin-top: 50rpx;
justify-content: space-between;
}
.label {
display: flex;
position: relative;
margin-bottom: 30rpx;
align-items: center;
.left {
margin-left: 20rpx;
width: 300rpx;
height: 70rpx;
border: 1px solid #EDF2FA;
line-height: 70rpx;
padding-left: 20rpx;
}
// vertical-align: bottom;
}
</style>