首页,我的 写扫码点餐之前提交1.0.0
This commit is contained in:
wwz
165
pages/index/components/AreaSelect.vue
Normal file
165
pages/index/components/AreaSelect.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<view class="AreaSelect flex-start">
|
||||
<!-- 省份选择 -->
|
||||
<view class="selector">
|
||||
<!--{{ selectedProvince ? selectedProvince.name : '请选择省份' }}-->
|
||||
<view v-if="showProvinceList" class="option-list"
|
||||
style="background: #f9f9f9;height: 60vh;border-radius: 0 0 0 20rpx;">
|
||||
<view v-for="(province,index) in provinces" :key="province.code"
|
||||
:style="selectedProvince && provincestyle ==index?'background: #fff;font-weight: bold;':''"
|
||||
@click="selectProvince(province,index)">
|
||||
{{ province.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 城市选择，只有选择了省份才显示 -->
|
||||
<view v-if="selectedProvince" class="selector">
|
||||
<!--{{ selectedCity ? selectedCity.name : '请选择城市' }}-->
|
||||
<view v-if="showCityList" class="option-list">
|
||||
<view v-for="(city,index) in cities" :key="city.code"
|
||||
:style="selectedCity && citiesstyle == index?'font-weight: bold;':''"
|
||||
@click="selectCity(city,index)">
|
||||
{{ city.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 区县选择，只有选择了城市才显示 -->
|
||||
<view v-if="selectedCity" class="selector" @click="toggleDistrictList">
|
||||
<!--{{ selectedDistrict ? selectedDistrict.name : '请选择区县' }} -->
|
||||
<view v-if="showDistrictList" class="option-list">
|
||||
<view v-for="(district,index) in districts" :key="district.code"
|
||||
:style="selectedDistrict && districtsstyle == index?'font-weight: bold;':''"
|
||||
@click="selectDistrict(district,index)">
|
||||
{{ district.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 输出选中的内容 -->
|
||||
<!-- <view v-if="(selectedProvince &&!selectedCity) || (selectedCity &&!selectedDistrict) || selectedDistrict">
|
||||
你选中的地区是：
|
||||
{{ selectedProvince ? selectedProvince.name : '' }}
|
||||
{{ selectedCity ? selectedCity.name : '' }}
|
||||
{{ selectedDistrict ? selectedDistrict.name : '' }}
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
defineEmits
|
||||
} from 'vue';
|
||||
import {
|
||||
cityData
|
||||
} from './cityData.js';
|
||||
const emits = defineEmits(['updateValue']);
|
||||
// 省份列表
|
||||
const provinces = ref(cityData);
|
||||
// 选中的省份
|
||||
const selectedProvince = ref(null);
|
||||
// 显示省份列表
|
||||
const showProvinceList = ref(true);
|
||||
// 城市列表
|
||||
const cities = ref([]);
|
||||
// 选中的城市
|
||||
const selectedCity = ref(null);
|
||||
// 显示城市列表
|
||||
const showCityList = ref(true);
|
||||
// 区县列表
|
||||
const districts = ref([]);
|
||||
// 选中的区县
|
||||
const selectedDistrict = ref(null);
|
||||
// 显示区县列表
|
||||
const showDistrictList = ref(true);
|
||||
|
||||
// 切换省份列表显示状态
|
||||
const toggleProvinceList = () => {
|
||||
showProvinceList.value = !showProvinceList.value;
|
||||
// showCityList.value = false;
|
||||
// showDistrictList.value = false;
|
||||
};
|
||||
// 选择省份 选中状态
|
||||
const provincestyle = ref(null)
|
||||
// 选择省份
|
||||
const selectProvince = (province, index) => {
|
||||
selectedProvince.value = province;
|
||||
cities.value = province.children || [];
|
||||
selectedCity.value = null;
|
||||
districts.value = [];
|
||||
selectedDistrict.value = null;
|
||||
provincestyle.value = index
|
||||
// showProvinceList.value = false;
|
||||
};
|
||||
|
||||
// 切换城市列表显示状态
|
||||
const toggleCityList = () => {
|
||||
showCityList.value = !showCityList.value;
|
||||
// showProvinceList.value = false;
|
||||
// showDistrictList.value = false;
|
||||
};
|
||||
|
||||
// 切换城市列表显示状态
|
||||
const citiesstyle = ref(null)
|
||||
// 选择城市
|
||||
const selectCity = (city, index) => {
|
||||
selectedCity.value = city;
|
||||
districts.value = city.children || [];
|
||||
citiesstyle.value = index
|
||||
if (districts.value.length == 0) {
|
||||
emits('updateValue', selectedCity.value.name ? selectedCity.value.name : '')
|
||||
}
|
||||
// showCityList.value = false;
|
||||
};
|
||||
|
||||
// 切换区县列表显示状态
|
||||
const toggleDistrictList = () => {
|
||||
showDistrictList.value = !showDistrictList.value;
|
||||
// showProvinceList.value = false;
|
||||
// showCityList.value = false;
|
||||
};
|
||||
|
||||
// 切换区县选择
|
||||
const districtsstyle = ref(null)
|
||||
// 选择区县
|
||||
const selectDistrict = (district, index) => {
|
||||
selectedDistrict.value = district;
|
||||
districtsstyle.value = index
|
||||
emits('updateValue', selectedDistrict.value.name ? selectedDistrict.value.name : selectedCity.value.name)
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.AreaSelect {
|
||||
height: 60vh;
|
||||
border-radius: 0 0 20rpx 20rpx;
|
||||
background: #fff;
|
||||
align-items: flex-start;
|
||||
overflow: auto;
|
||||
.selector {
|
||||
position: relative;
|
||||
width: 30%;
|
||||
cursor: pointer;
|
||||
background: #f9f9f9;
|
||||
|
||||
.option-list {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
|
||||
.Selected {}
|
||||
|
||||
view {
|
||||
padding: 16rpx 24rpx;
|
||||
cursor: pointer;
|
||||
|
||||
view:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -32,7 +32,10 @@
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
defineProps
|
||||
defineProps,
|
||||
onBeforeUnmount,
|
||||
reactive,
|
||||
defineExpose
|
||||
} from 'vue';
|
||||
const props = defineProps({
|
||||
bannervo: {
|
||||
@@ -48,21 +51,18 @@
|
||||
}] //
|
||||
}
|
||||
});
|
||||
const timersetIntervalnewVal = () => {
|
||||
this.timersetInterval = setInterval(() => {
|
||||
this.endMove()
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
const startMove = () => {
|
||||
this.slideNote.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
|
||||
this.slideNote.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
|
||||
const slideNote = reactive({
|
||||
x: 0,
|
||||
y: 0
|
||||
})
|
||||
const startMove = (e) => {
|
||||
slideNote.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
|
||||
}
|
||||
const endMove = (e) => {
|
||||
// this.itemStyless = []
|
||||
var newList = JSON.parse(JSON.stringify(this.itemStyle))
|
||||
// console.log(newList)
|
||||
// if ((e.changedTouches[0].pageX - this.slideNote.x) < 0) {
|
||||
var newList = props.itemStyle
|
||||
console.log(newList)
|
||||
// if ((e.changedTouches[0].pageX - slideNote.x) < 0) {
|
||||
// 向左滑动
|
||||
var last = [newList.pop()]
|
||||
newList = last.concat(newList)
|
||||
@@ -71,10 +71,36 @@
|
||||
// newList.push(newList[0])
|
||||
// newList.splice(0, 1)
|
||||
// }
|
||||
this.$emit('changeValue', newList);
|
||||
|
||||
this.$forceUpdate();
|
||||
console.log(newList)
|
||||
// this.$emit('changeValue', newList);
|
||||
}
|
||||
|
||||
// 定义定时器变量
|
||||
let timer = null;
|
||||
// 启动定时器
|
||||
const startTimer = () => {
|
||||
timer = setInterval(() => {
|
||||
endMove()
|
||||
}, 1000);
|
||||
};
|
||||
// 定义清除定时器的方法
|
||||
const clearTimer = () => {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
}
|
||||
};
|
||||
// 在组件销毁前清除定时器
|
||||
onBeforeUnmount(() => {
|
||||
clearTimer();
|
||||
});
|
||||
// 向外暴露清除定时器和启动定时器的方法
|
||||
defineExpose({
|
||||
clearTimer,
|
||||
startTimer
|
||||
});
|
||||
// 初始启动定时器
|
||||
// startTimer();
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
53
pages/index/components/cityData.js
Normal file
53
pages/index/components/cityData.js
Normal file
@@ -0,0 +1,53 @@
|
||||
// cityData.js
|
||||
export const cityData = [
|
||||
{
|
||||
"name": "北京市",
|
||||
"code": "110000",
|
||||
"children": [
|
||||
{
|
||||
"name": "东城区",
|
||||
"code": "110101",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"name": "西城区",
|
||||
"code": "110102",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "广东省",
|
||||
"code": "440000",
|
||||
"children": [
|
||||
{
|
||||
"name": "广州市",
|
||||
"code": "440100",
|
||||
"children": [
|
||||
{
|
||||
"name": "天河区",
|
||||
"code": "440106"
|
||||
},
|
||||
{
|
||||
"name": "越秀区",
|
||||
"code": "440104"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "深圳市",
|
||||
"code": "440300",
|
||||
"children": [
|
||||
{
|
||||
"name": "福田区",
|
||||
"code": "440304"
|
||||
},
|
||||
{
|
||||
"name": "南山区",
|
||||
"code": "440305"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
@@ -13,11 +13,16 @@
|
||||
ref,
|
||||
defineProps
|
||||
} from 'vue';
|
||||
import {
|
||||
APIproductqueryShop
|
||||
} from "@/common/api/product/product.js";
|
||||
import {
|
||||
Storelogin
|
||||
} from '@/stores/share.js';
|
||||
const props = defineProps({
|
||||
district: Array
|
||||
});
|
||||
const clickdistrict = (item) => {
|
||||
console.log(item, '调试')
|
||||
switch (item.jumpType) {
|
||||
case 'absolute':
|
||||
uni.pro.navigateTo('webview/webview', {
|
||||
@@ -28,11 +33,7 @@
|
||||
uni.navigateToMiniProgram(JSON.parse(item.value))
|
||||
break;
|
||||
case 'relative':
|
||||
uni.setStorage({
|
||||
key: 'itemData',
|
||||
data: item,
|
||||
});
|
||||
uni.pro.navigateTo(item.absUrl, item.name);
|
||||
uni.pro.navigateTo(item.absUrl);
|
||||
break;
|
||||
case 'scan':
|
||||
if (!uni.utils.pluschooseImage()) {
|
||||
@@ -44,9 +45,19 @@
|
||||
let tableCode = getQueryString(decodeURIComponent(res.result), 'code')
|
||||
uni.cache.set('tableCode', tableCode)
|
||||
if (tableCode) {
|
||||
let data = await this.api.productqueryShop({
|
||||
let data = await APIproductqueryShop({
|
||||
code: uni.cache.get('tableCode'),
|
||||
})
|
||||
// -4请求登录
|
||||
const store = Storelogin();
|
||||
if (data.code == '-4') {
|
||||
if (await store.actionslogin()) {
|
||||
// 成功
|
||||
} else {
|
||||
// 失败接着请求
|
||||
await store.actionslogin()
|
||||
}
|
||||
}
|
||||
if (data.data.shopTableInfo && !data.data.shopTableInfo.choseCount) {
|
||||
uni.pro.navigateTo('/pagesOrder/orderAMeal/index', {
|
||||
tableCode: tableCode,
|
||||
@@ -87,16 +98,19 @@
|
||||
width: 100%;
|
||||
background: #F9F9F9;
|
||||
border-radius: 48rpx 48rpx 0rpx 0rpx;
|
||||
overflow-x: auto;
|
||||
overflow-x: auto;
|
||||
flex-wrap: nowrap;
|
||||
box-sizing: border-box;
|
||||
|
||||
.towcontent_item {
|
||||
width: 25%;
|
||||
margin-left: 34rpx;
|
||||
|
||||
image {
|
||||
width: 92rpx;
|
||||
height: 92rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-top: 16rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
@@ -106,6 +120,7 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent_item:nth-child(1) {
|
||||
margin-left: 0rpx;
|
||||
}
|
||||
|
||||
77
pages/index/components/grouping.vue
Normal file
77
pages/index/components/grouping.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<view class="AreaSelect flex-start">
|
||||
<view class="selector" v-for="(province,index) in provinces" :key="index">
|
||||
<view class="item"
|
||||
:style="selectedProvince && provincestyle == index?'background: #fff;font-weight: bold;':''"
|
||||
@click="selectProvince(province,index)">
|
||||
{{ province.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
defineEmits
|
||||
} from 'vue';
|
||||
import {
|
||||
cityData
|
||||
} from './cityData.js';
|
||||
const emits = defineEmits(['grouping']);
|
||||
// 省份列表
|
||||
const provinces = ref([{
|
||||
detail: [],
|
||||
dictId: 56,
|
||||
dictName: "category",
|
||||
isChild: null,
|
||||
name: "双人餐",
|
||||
value: "2"
|
||||
}, {
|
||||
detail: [],
|
||||
dictId: 56,
|
||||
dictName: "category",
|
||||
isChild: null,
|
||||
name: "双人餐",
|
||||
value: "2"
|
||||
}]);
|
||||
// 选中的省份
|
||||
const selectedProvince = ref(null);
|
||||
// 显示省份列表
|
||||
const showProvinceList = ref(true);
|
||||
|
||||
// 切换省份列表显示状态
|
||||
const toggleProvinceList = () => {
|
||||
showProvinceList.value = !showProvinceList.value;
|
||||
// showCityList.value = false;
|
||||
// showDistrictList.value = false;
|
||||
};
|
||||
// 选择省份 选中状态
|
||||
const provincestyle = ref(null)
|
||||
// 选择省份
|
||||
const selectProvince = (province, index) => {
|
||||
selectedProvince.value = province;
|
||||
provincestyle.value = index
|
||||
emits('grouping', selectedProvince.value.name);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.AreaSelect {
|
||||
max-height: 60vh;
|
||||
border-radius: 0 0 20rpx 20rpx;
|
||||
align-items: flex-start;
|
||||
overflow: auto;
|
||||
|
||||
.selector {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-radius: 0 0 0 20rpx;
|
||||
|
||||
.item {
|
||||
padding: 16rpx 24rpx;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user