|
|
<script setup>
|
|
|
/**
|
|
|
* name：
|
|
|
* user：sa0ChunLuyu
|
|
|
* date：2023年5月26日 13:28:56
|
|
|
*/
|
|
|
import {
|
|
|
ref,
|
|
|
computed
|
|
|
} from 'vue'
|
|
|
import {
|
|
|
BuyItemsAction,
|
|
|
BuyInfoAction,
|
|
|
$image,
|
|
|
$response
|
|
|
} from '@/api'
|
|
|
import {
|
|
|
onShow
|
|
|
} from '@dcloudio/uni-app'
|
|
|
import {
|
|
|
useStore
|
|
|
} from '@/store'
|
|
|
const $store = useStore()
|
|
|
const buy_info = ref(false)
|
|
|
const BuyInfo = async (items = true) => {
|
|
|
const response = await BuyInfoAction($store.buy_info)
|
|
|
$response(response, () => {
|
|
|
buy_info.value = response.data
|
|
|
if (items) BuyItems()
|
|
|
})
|
|
|
}
|
|
|
const items_list = ref([])
|
|
|
const BuyItems = async () => {
|
|
|
uni.showLoading()
|
|
|
const response = await BuyItemsAction($store.buy_info)
|
|
|
uni.hideLoading()
|
|
|
$response(response, () => {
|
|
|
items_list.value = response.data.list
|
|
|
})
|
|
|
}
|
|
|
const search_input = ref('')
|
|
|
const items_list_show = computed(() => {
|
|
|
let list = {}
|
|
|
for (let i in items_list.value) {
|
|
|
for (let j in items_list.value[i].items) {
|
|
|
let name = items_list.value[i].items[j].name.indexOf(search_input.value)
|
|
|
let py = items_list.value[i].items[j].py.indexOf(search_input.value)
|
|
|
if (!search_input.value) {
|
|
|
name = 1
|
|
|
py = 1
|
|
|
}
|
|
|
if (name !== -1 || py !== -1) {
|
|
|
if (!(`g${items_list.value[i].id}` in list)) {
|
|
|
list[`g${items_list.value[i].id}`] = {
|
|
|
...items_list.value[i],
|
|
|
items: []
|
|
|
}
|
|
|
}
|
|
|
list[`g${items_list.value[i].id}`].items.push(items_list.value[i].items[j])
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
let l = []
|
|
|
for (let i in list) {
|
|
|
l.push(list[i])
|
|
|
}
|
|
|
return l
|
|
|
})
|
|
|
|
|
|
const items_group_active = ref(0)
|
|
|
const itemClick = (info) => {
|
|
|
let index = $store.buy_info.items.indexOf(info.id)
|
|
|
if (index === -1) {
|
|
|
$store.buy_info.items.push(info.id)
|
|
|
} else {
|
|
|
$store.buy_info.items.splice(index, 1)
|
|
|
}
|
|
|
BuyInfo(false)
|
|
|
}
|
|
|
const nextClick = () => {
|
|
|
if ($store.buy_info.combo !== 0) {
|
|
|
uni.navigateBack({
|
|
|
delta: 1
|
|
|
})
|
|
|
} else {
|
|
|
uni.navigateTo({
|
|
|
url: '/pages/buy/info/info'
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
const searchInputUpdate = () => {
|
|
|
items_group_active.value = 0
|
|
|
}
|
|
|
onShow(() => {
|
|
|
BuyInfo()
|
|
|
console.log(JSON.stringify($store.buy_info))
|
|
|
})
|
|
|
</script>
|
|
|
<template>
|
|
|
<view>
|
|
|
<view class="top_line_wrapper"></view>
|
|
|
<view class="search_wrapper">
|
|
|
<input v-model="search_input" @input="searchInputUpdate" class="search_input_wrapper" placeholder="搜索"
|
|
|
type="text">
|
|
|
</view>
|
|
|
<view class="items_wrapper">
|
|
|
<view class="items_group_wrapper">
|
|
|
<view v-if="items_list_show.length > 0">
|
|
|
<view class="items_group_item_wrapper" @click="items_group_active = k" :class="[
|
|
|
items_group_active === k ? 'items_group_item_active_wrapper' : ''
|
|
|
]" v-for="(i,k) in items_list_show" :key="k">
|
|
|
<view class="items_group_item_text_wrapper">{{ i.name }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-if="items_list_show.length > 0" class="items_list_wrapper">
|
|
|
<view class="items_list_title_wrapper">
|
|
|
<view class="items_list_title_box_wrapper">{{ items_list_show[items_group_active].name }}</view>
|
|
|
</view>
|
|
|
<view class="items_list_list_wrapper">
|
|
|
<view @click="itemClick(i)" class="items_list_list_item_wrapper"
|
|
|
v-for="(i,k) in items_list_show[items_group_active].items" :key="k">
|
|
|
<view class="items_list_list_item_name_wrapper">{{ i.name }}</view>
|
|
|
<view class="items_list_list_item_right_wrapper">
|
|
|
<view class="items_list_list_item_price_wrapper">￥{{ Number(i.price).toFixed(2) }}</view>
|
|
|
<view class="items_list_list_item_choose_wrapper">
|
|
|
<image v-if="$store.buy_info.items.indexOf(i.id) !== -1"
|
|
|
:src="$image('/storage/assets/mp/items/选中.png')"></image>
|
|
|
<image v-if="$store.buy_info.items.indexOf(i.id) === -1"
|
|
|
:src="$image('/storage/assets/mp/items/未选中.png')"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="bottom_wrapper">
|
|
|
<view v-if="!!buy_info" class="bottom_box_wrapper">
|
|
|
<view class="bottom_count_wrapper">
|
|
|
<view>您需付费</view>
|
|
|
<view>{{ buy_info.count }}个项目</view>
|
|
|
</view>
|
|
|
<view class="bottom_line_wrapper"></view>
|
|
|
<view class="bottom_price_wrapper">
|
|
|
<view class="bottom_price_original_price_wrapper"
|
|
|
v-if="Number(buy_info.original_price) > Number(buy_info.price)">
|
|
|
￥{{ Number(buy_info.original_price).toFixed(2) }}
|
|
|
</view>
|
|
|
<view class="bottom_price_price_wrapper">
|
|
|
<view class="bottom_price_price_icon_wrapper">￥</view>
|
|
|
{{ Number(buy_info.price).toFixed(2) }}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view @click="nextClick()" class="bottom_button_wrapper">下一步</view>
|
|
|
</view>
|
|
|
<view class="blank_wrapper"></view>
|
|
|
</view>
|
|
|
<view class="blank_wrapper"></view>
|
|
|
</view>
|
|
|
</template>
|
|
|
<style>
|
|
|
page {
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
</style>
|
|
|
<style scoped>
|
|
|
.items_list_list_item_price_wrapper {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 500;
|
|
|
color: #F02E50;
|
|
|
line-height: 1;
|
|
|
margin-right: 23rpx;
|
|
|
}
|
|
|
|
|
|
.items_list_list_item_right_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.items_list_list_item_name_wrapper {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 500;
|
|
|
color: #181818;
|
|
|
width: 300rpx;
|
|
|
margin-left: 30rpx;
|
|
|
}
|
|
|
|
|
|
.items_list_list_item_choose_wrapper image {
|
|
|
width: 40rpx;
|
|
|
height: 40rpx;
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.items_list_list_item_choose_wrapper {
|
|
|
width: 40rpx;
|
|
|
height: 40rpx;
|
|
|
margin-right: 28rpx;
|
|
|
}
|
|
|
|
|
|
.items_list_list_item_wrapper {
|
|
|
display: flex;
|
|
|
width: 574rpx;
|
|
|
min-height: 104rpx;
|
|
|
background: #FFFFFF;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
border-bottom: 1rpx solid #F2F0F0;
|
|
|
}
|
|
|
|
|
|
.items_list_title_box_wrapper {
|
|
|
margin-left: 30rpx;
|
|
|
max-width: 500rpx;
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
|
|
|
.items_list_title_wrapper {
|
|
|
width: 574rpx;
|
|
|
height: 62rpx;
|
|
|
background: #d9e3e9;
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 500;
|
|
|
color: #0BBACF;
|
|
|
line-height: 62rpx;
|
|
|
}
|
|
|
|
|
|
.items_list_wrapper {
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
top: 0;
|
|
|
bottom: 0;
|
|
|
width: 574rpx;
|
|
|
background: #f0f0f1;
|
|
|
overflow-y: auto;
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
|
|
|
.items_group_item_active_wrapper {
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
|
|
|
.items_group_item_active_wrapper>.items_group_item_text_wrapper {
|
|
|
color: #0BBACF;
|
|
|
}
|
|
|
|
|
|
.items_group_item_text_wrapper {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 20rpx;
|
|
|
right: 20rpx;
|
|
|
transform: translateY(-50%);
|
|
|
display: -webkit-box;
|
|
|
-webkit-line-clamp: 2;
|
|
|
-webkit-box-orient: vertical;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
word-wrap: break-word;
|
|
|
text-align: center;
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 500;
|
|
|
color: #222222;
|
|
|
line-height: 34rpx;
|
|
|
}
|
|
|
|
|
|
.items_group_item_wrapper {
|
|
|
width: 176rpx;
|
|
|
height: 120rpx;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.items_group_wrapper {
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
bottom: 0;
|
|
|
width: 176rpx;
|
|
|
background: #f0f0f1;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
.bottom_price_price_icon_wrapper {
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
|
|
|
.bottom_price_price_wrapper {
|
|
|
font-size: 36rpx;
|
|
|
font-weight: 800;
|
|
|
color: #F02E50;
|
|
|
line-height: 1;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: flex-end;
|
|
|
}
|
|
|
|
|
|
.bottom_price_original_price_wrapper {
|
|
|
font-size: 22rpx;
|
|
|
font-weight: 800;
|
|
|
text-decoration: line-through;
|
|
|
color: #444444;
|
|
|
line-height: 1;
|
|
|
}
|
|
|
|
|
|
.bottom_button_wrapper {
|
|
|
width: 320rpx;
|
|
|
height: 68rpx;
|
|
|
background: #0BBACF;
|
|
|
border-radius: 34rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
font-size: 24rpx;
|
|
|
color: #FFFFFF;
|
|
|
line-height: 68rpx;
|
|
|
text-align: center;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.bottom_price_wrapper {
|
|
|
text-align: right;
|
|
|
margin-right: 30rpx;
|
|
|
width: 200rpx;
|
|
|
}
|
|
|
|
|
|
.bottom_line_wrapper {
|
|
|
width: 1rpx;
|
|
|
height: 53rpx;
|
|
|
background: #dedede;
|
|
|
}
|
|
|
|
|
|
.bottom_count_wrapper {
|
|
|
width: 169rpx;
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 400;
|
|
|
color: #000000;
|
|
|
line-height: 40rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.bottom_box_wrapper {
|
|
|
height: 120rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.bottom_wrapper {
|
|
|
position: fixed;
|
|
|
width: 750rpx;
|
|
|
background: #ffffff;
|
|
|
bottom: 0;
|
|
|
}
|
|
|
|
|
|
.items_wrapper {
|
|
|
position: fixed;
|
|
|
bottom: calc(150rpx + var(--safe-area-inset-bottom));
|
|
|
top: 111rpx;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
border-top: 1rpx solid #0BBACF;
|
|
|
}
|
|
|
|
|
|
.search_input_wrapper {
|
|
|
height: 66rpx;
|
|
|
border-radius: 34rpx;
|
|
|
border: 1rpx solid #0BBACF;
|
|
|
width: 660rpx;
|
|
|
line-height: 66rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.search_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
</style> |