首页,我的 写扫码点餐之前提交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>
|
||||
655
pages/index/coupons/index.vue
Normal file
655
pages/index/coupons/index.vue
Normal file
@@ -0,0 +1,655 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="containertop">
|
||||
<view class="containertopbox">
|
||||
<view class="containertopboxone flex-start">
|
||||
<view>可使用红包</view>
|
||||
<text>{{viewlist.totalnumber}}张</text>
|
||||
</view>
|
||||
<view class="containertopboxitem flex-start" v-for="(item,index) in viewlist.list" :key="index"
|
||||
@click="clickiconone(item)">
|
||||
<view class="containertopboxitemleft flex-colum"
|
||||
:class="item.status == 0?'':'containertopboxitemlefts'">
|
||||
<view class="containertopboxitemleft_one"
|
||||
:class="item.status == 0?'':'containertopboxitemleft_ones'">
|
||||
<text style="font-size: 28rpx;">￥</text>
|
||||
<text>{{item.couponsAmount || 0}}</text>
|
||||
</view>
|
||||
<view class="containertopboxitemleft_tow"
|
||||
:class="item.status == 0?'':'containertopboxitemleft_tows'">
|
||||
优惠券(元)
|
||||
</view>
|
||||
</view>
|
||||
<view class="containertopboxitemright">
|
||||
<view class="containertopboxitemright_one">
|
||||
无门槛使用
|
||||
</view>
|
||||
<view class="containertopboxitemright_tow">
|
||||
通用红包券
|
||||
</view>
|
||||
<view class="containertopboxitemright_there">
|
||||
有效期至：{{$u.timeFormat(item.endTime, 'yyyy/mm/dd') || '0'}}
|
||||
</view>
|
||||
<view
|
||||
:class="item.status == 0?'containertopboxitemright_four':'containertopboxitemright_fours'">
|
||||
<text v-if="onLoaddata.orderfood">
|
||||
{{item.status == 0 ? '去使用':'无法使用'}}
|
||||
</text>
|
||||
<text v-else>
|
||||
{{item.status == 0 ? '兑换积分':'已过期'}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<navigator url="/pages/user/coupon" hover-class="navigator-hover"
|
||||
style="margin-top: 20rpx;font-weight: 400;font-size: 28rpx;text-align: center; width: 100%;">
|
||||
查看更多
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="containerbottom">
|
||||
<view class="containerbottomtop">
|
||||
<view class="containerbottomtoptopbox flex-start">
|
||||
<view>可购买红包</view>
|
||||
<text>（根据您的订单金额推荐更适合您的优惠力度）</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="containerbottombox_bottom">
|
||||
<view class="containerbottombox_bottomone">
|
||||
购买省钱包，本单立减
|
||||
</view>
|
||||
<view v-for="(item,index) in orderview.list" :key="index">
|
||||
<view class="containerbottombox_bottomtow">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="containerbottombox_bottombox flex-start" v-for="(item1,index1) in item.listdata"
|
||||
:key="index1" @click="clickicon(item1)">
|
||||
<view class="containerbottombox_bottomthere">
|
||||
<view class="containerbottombox_bottomthere_topitem">
|
||||
<view class="onecontainerbottombox_bottomthere_topitem">
|
||||
<view class="containerbottombox_bottomthere_topitemone">
|
||||
通用红包
|
||||
</view>
|
||||
<view class="containerbottombox_bottomthere_topitemtow flex-center">
|
||||
<view class="a">
|
||||
¥
|
||||
</view>
|
||||
<view class="b">
|
||||
{{item1.couponsAmount}}
|
||||
</view>
|
||||
<view class="c">
|
||||
无门槛
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontainerbottombox_bottomthere_topitem">
|
||||
有效期：{{$u.timeFormat(item1.updateTime, 'yyyy/mm/dd') || '0'}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="therecontainerbottombox_bottomthere_topitem flex-around">
|
||||
<up-icon v-if="item1.id == couponid" name="checkmark-circle" color="#F1CB66"
|
||||
size="45"></up-icon>
|
||||
<text v-else class="theretext"></text>
|
||||
<view :class="item1.id == couponid?'c':'b'">
|
||||
<text :class="item1.id == couponid?'c':'b'"
|
||||
style="font-size:20rpx ;">¥</text>{{item1.couponsPrice}}/张
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
reactive,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
} from "vue";
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
onShow,
|
||||
onReachBottom,
|
||||
onPageScroll
|
||||
} from '@dcloudio/uni-app'
|
||||
import Nav from '@/components/CustomNavbar.vue'; //导航栏
|
||||
import {
|
||||
APIordergetYhqPara,
|
||||
APIorderfindCoupons,
|
||||
APIordermineCoupons
|
||||
} from "@/common/api/index/coupons.js"
|
||||
import {
|
||||
useNavbarStore
|
||||
} from '@/stores/navbarStore';
|
||||
const store = useNavbarStore();
|
||||
// 数据
|
||||
const viewlist = reactive({
|
||||
list: [],
|
||||
totalnumber: ''
|
||||
})
|
||||
const orderview = reactive({
|
||||
list: [],
|
||||
listdata: []
|
||||
})
|
||||
const couponid = ref('')
|
||||
const form = reactive({
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore'
|
||||
})
|
||||
const onLoaddata = reactive({
|
||||
orderfood: '', //等于0扫码点餐下单
|
||||
amount: '' //下单金额传来的值
|
||||
})
|
||||
//团购优惠卷
|
||||
const clickicon = (e) => {
|
||||
couponid.value = e.id
|
||||
e.clickiconone = 1
|
||||
let data = e
|
||||
if (onLoaddata.orderfood == 0) { //等于0扫码点餐下单
|
||||
if (onLoaddata.amount > e.couponsAmount) {
|
||||
uni.$emit('emitclickorderfood', e)
|
||||
uni.navigateBack()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '优惠券面值大于支付金额',
|
||||
icon: "none",
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
//自己优惠劵处理
|
||||
const clickiconone = (e) => {
|
||||
e.clickiconone = 0
|
||||
let data = e
|
||||
if (onLoaddata.orderfood == 0) { //等于0扫码点餐下单
|
||||
if (onLoaddata.amount > e.couponsAmount) {
|
||||
uni.$emit('emitclickorderfood', data)
|
||||
uni.navigateBack()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '优惠券面值大于支付金额',
|
||||
icon: "none",
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
//类型列表
|
||||
const ordergetYhqParass = async () => {
|
||||
let res = await APIordergetYhqPara()
|
||||
try {
|
||||
orderview.list = res.data
|
||||
for (let i = 0; i <= res.data.length; i++) {
|
||||
orderfindCouponses(i, orderview.list[i].name);
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
}
|
||||
|
||||
//系统优惠券列表
|
||||
const orderfindCouponses = async (i, name) => {
|
||||
let res = await APIorderfindCoupons({
|
||||
page: 1,
|
||||
size: 10,
|
||||
type: name
|
||||
})
|
||||
orderview.list[i].orderview.listdata = res.data.list
|
||||
console.log(orderview.list)
|
||||
}
|
||||
const ordermineCouponsthis = async () => {
|
||||
let res = await APIordermineCoupons({
|
||||
userId: uni.getStorageSync('userInfo').id,
|
||||
status: 0,
|
||||
page: form.page,
|
||||
size: form.size,
|
||||
orderId: ''
|
||||
})
|
||||
try {
|
||||
viewlist.totalnumber = res.data.total
|
||||
viewlist.list = res.data.list.slice(0, 2)
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
}
|
||||
onLoad((e) => {
|
||||
try {
|
||||
onLoaddata.orderfood = e.orderfood //等于0扫码点餐下单
|
||||
onLoaddata.amount = e.amount
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
})
|
||||
onShow(() => {
|
||||
try {
|
||||
ordermineCouponsthis()
|
||||
ordergetYhqParass()
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
})
|
||||
// export default {
|
||||
// methods: {
|
||||
// clickicon(e) { //团购优惠卷
|
||||
// this.couponid = e.id
|
||||
// e.clickiconone = 1
|
||||
// let data = e
|
||||
// if (this.onLoaddata.orderfood == 0) { //等于0扫码点餐下单
|
||||
// if (this.onLoaddata.amount > e.couponsAmount) {
|
||||
// uni.$emit('emitclickorderfood', e)
|
||||
// uni.navigateBack()
|
||||
// } else {
|
||||
// uni.showToast({
|
||||
// title: '优惠券面值大于支付金额',
|
||||
// icon: "none",
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// clickiconone(e) { //自己优惠劵处理
|
||||
// e.clickiconone = 0
|
||||
// let data = e
|
||||
// if (this.onLoaddata.orderfood == 0) { //等于0扫码点餐下单
|
||||
// if (this.onLoaddata.amount > e.couponsAmount) {
|
||||
// uni.$emit('emitclickorderfood', data)
|
||||
// uni.navigateBack()
|
||||
// } else {
|
||||
// uni.showToast({
|
||||
// title: '优惠券面值大于支付金额',
|
||||
// icon: "none",
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// async ordergetYhqParass() { //类型列表
|
||||
// let res = await this.api.ordergetYhqPara()
|
||||
// try {
|
||||
// this.orderview.list = res.data
|
||||
// for (let i = 0; i <= res.data.length; i++) {
|
||||
// this.orderfindCouponses(i, this.orderview.list[i].name);
|
||||
// }
|
||||
// } catch (e) {
|
||||
// //TODO handle the exception
|
||||
// }
|
||||
// },
|
||||
// async orderfindCouponses(i, name) {
|
||||
// let res = await this.api.orderfindCoupons({
|
||||
// page: 1,
|
||||
// size: 10,
|
||||
// type: name
|
||||
// })
|
||||
// this.orderview.list[i].orderview.listdata = res.data.list
|
||||
// console.log(this.orderview.list)
|
||||
// this.$forceUpdate();
|
||||
// },
|
||||
// async ordermineCouponsthis() {
|
||||
// let res = await this.api.ordermineCoupons({
|
||||
// userId: uni.cache.get('userInfo').id,
|
||||
// status: 0,
|
||||
// page: this.form.page,
|
||||
// size: this.form.size,
|
||||
// orderId: ''
|
||||
// })
|
||||
// try {
|
||||
// this.viewlist.totalnumber = res.data.total
|
||||
// this.viewlist.list = res.data.list.slice(0, 2)
|
||||
// } catch (e) {
|
||||
// //TODO handle the exception
|
||||
// }
|
||||
// },
|
||||
// }
|
||||
// };
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
.containertop {
|
||||
padding: 48rpx 32rpx;
|
||||
|
||||
.containertopbox {
|
||||
.containertopboxone {
|
||||
view {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-left: 12rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.containertopboxitem {
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.containertopboxitemleft {
|
||||
position: relative;
|
||||
width: 182rpx;
|
||||
height: 192rpx;
|
||||
background: #F1CB66;
|
||||
border-radius: 18rpx 0rpx 0rpx 18rpx;
|
||||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
|
||||
::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
left: 166rpx;
|
||||
background: #f9f9f9;
|
||||
display: inline-block;
|
||||
width: 32rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 0 0 32rpx 32rpx;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0rpx;
|
||||
left: 166rpx;
|
||||
background: #f9f9f9;
|
||||
display: inline-block;
|
||||
width: 32rpx;
|
||||
height: 16rpx;
|
||||
line-height: 32rpx;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(255, 255, 255, 0.16);
|
||||
z-index: 999;
|
||||
|
||||
}
|
||||
|
||||
.containertopboxitemleft_one {
|
||||
text {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 60rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.containertopboxitemleft_ones {
|
||||
text {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.containertopboxitemleft_tow {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.containertopboxitemleft_tows {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.containertopboxitemlefts {
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.containertopboxitemright {
|
||||
position: relative;
|
||||
padding: 0 32rpx;
|
||||
flex: auto;
|
||||
height: 192rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
border-radius: 0rpx 18rpx 18rpx 0rpx;
|
||||
|
||||
.containertopboxitemright_one {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
padding: 12rpx 0;
|
||||
border-bottom: 1rpx dotted #707070;
|
||||
}
|
||||
|
||||
.containertopboxitemright_tow {
|
||||
margin-top: 14rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.containertopboxitemright_there {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.containertopboxitemright_four {
|
||||
position: absolute;
|
||||
right: 32rpx;
|
||||
top: 50%;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
padding: 0 14rpx;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
text-align: center;
|
||||
background: #FE665E;
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
}
|
||||
|
||||
.containertopboxitemright_fours {
|
||||
position: absolute;
|
||||
right: 32rpx;
|
||||
top: 50%;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
padding: 0 14rpx;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
text-align: center;
|
||||
background: #F7F7F7;
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.containerbottom {
|
||||
.containerbottomtop {
|
||||
padding: 0 32rpx;
|
||||
|
||||
.containerbottomtoptopbox {
|
||||
view {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
text {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.containerbottombox_bottom {
|
||||
margin-top: 16rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 42rpx 0rpx 0rpx 42rpx;
|
||||
|
||||
// overflow-x: auto;
|
||||
.containerbottombox_bottomone {
|
||||
padding: 20rpx 64rpx 0 64rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.containerbottombox_bottomtow {
|
||||
margin-top: 16rpx;
|
||||
padding: 0 64rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.containerbottombox_bottombox {
|
||||
padding-left: 34rpx;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.containerbottombox_bottomthere:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.containerbottombox_bottomthere {
|
||||
margin-top: 16rpx;
|
||||
margin-left: 46rpx;
|
||||
|
||||
.containerbottombox_bottomthere_topitem {
|
||||
width: 236rpx;
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: #fd5977;
|
||||
|
||||
.towcontainerbottombox_bottomthere_topitem {
|
||||
padding: 20rpx 0 16rpx 0;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 20rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.onecontainerbottombox_bottomthere_topitem::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -6rpx;
|
||||
width: 100%;
|
||||
height: 20rpx;
|
||||
background: #fef7f5;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
border-radius: 0 0 50% 50%;
|
||||
}
|
||||
|
||||
.onecontainerbottombox_bottomthere_topitem {
|
||||
position: relative;
|
||||
background: #fef7f5;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
|
||||
.containerbottombox_bottomthere_topitemone {
|
||||
width: 136rpx;
|
||||
height: 40rpx;
|
||||
background: #F1CB66;
|
||||
text-align: center;
|
||||
border-radius: 0rpx 0rpx 20rpx 20rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
line-height: 40rpx;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.containerbottombox_bottomthere_topitemtow {
|
||||
align-items: baseline;
|
||||
width: 100%;
|
||||
|
||||
.a {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 40rpx;
|
||||
color: #FF4C11;
|
||||
}
|
||||
|
||||
.b {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 70rpx;
|
||||
color: #FF4C11;
|
||||
}
|
||||
|
||||
.c {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #FF4C11;
|
||||
}
|
||||
}
|
||||
|
||||
.containerbottombox_bottomthere_topitemthere {
|
||||
position: relative;
|
||||
height: 50rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 20rpx;
|
||||
color: #FFFFFF;
|
||||
width: 100%;
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.therecontainerbottombox_bottomthere_topitem {
|
||||
width: 100%;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.theretext {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: #FFFFFF;
|
||||
border: 2rpx solid #E8E8E8;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.c {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #FF4C11;
|
||||
}
|
||||
|
||||
.b {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
673
pages/index/drinks.vue
Normal file
673
pages/index/drinks.vue
Normal file
@@ -0,0 +1,673 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 占位符导航栏 -->
|
||||
<navseat class="navbar" :opacity='opacitys' :title='toplist.name' :titleshow='false'></navseat>
|
||||
|
||||
<view class="onecontent">
|
||||
<image class="onecontentimage" :src="toplist.coverImg" mode="aspectFill"></image>
|
||||
<!-- 小内切圆 -->
|
||||
<view class="after"></view>
|
||||
<view class="onecontentabsolute">
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent">
|
||||
<!-- <view :class="isFixedTop?'towcontentlistxitemboxfixed':''" :style="{'top':customheighttop + 'px'}">
|
||||
<view class="towcontentlistxitem flex-start">
|
||||
<view class="towcontentlistxitembox flex-colum"
|
||||
:class="towcontentclickindex == index?'towcontentlistxitemboxopacity':''"
|
||||
v-for="(item,index) in listbox" :key="index" @click="towcontentclick(index)">
|
||||
<text>{{item.name}}</text>
|
||||
<image v-if="towcontentclickindex == index"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/today/dg.png" mode="widthFix">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view v-if="isFixedTop" :style="{'height':windowHeight - seighT + 'px'}"></view>
|
||||
<view class="towcontentboutton" :style="{'height':seighT + 'px'}">
|
||||
<!-- <scroll-view :style="{'height':seighT + 'px'}" scroll-y @scrolltolower="loadMore"> -->
|
||||
<view class="fivecontent_item" v-for="(item,index) in list" :key="index" @click="clickproduct(item)">
|
||||
<view class="fivecontent_item_nav flex-start">
|
||||
<image class="fivecontent_item_navimage" :src="item.shopImage" mode="aspectFill"></image>
|
||||
<view class="fivecontent_item_nav_left">
|
||||
<view class="fivecontent_item_nav_lefttop flex-between">
|
||||
<view>
|
||||
{{item.shopName}}
|
||||
</view>
|
||||
<view>
|
||||
{{item.distances}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontent_item_nav_lefttopstart flex-start">
|
||||
<view class="fivecontent_item_nav_leftlang flex-start" v-for="(s,index1) in item.shopTag"
|
||||
:key="index1" :style="{'background':s.backColor,'color':s.backColor}">
|
||||
<image class="fivecontent_item_nav_leftlangimage" v-if="s.shareImg" :src="s.shareImg"
|
||||
mode="aspectFill"></image>
|
||||
<text class="fivecontent_item_nav_leftlangtext">{{s.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontent_item_box">
|
||||
<view class="fivecontent_item_boxitem flex-between">
|
||||
<image :src="item.image" mode=""></image>
|
||||
<view class="fivecontent_item_boxitemleft flex-colum-start">
|
||||
<view class="fivecontent_item_boxitemleftone flex-between">
|
||||
<view>{{item.productName.length>7?item.productName.substring(0,7)+'...':item.productName}}</view>
|
||||
<text>已抢{{item.realSalesNumber}}份</text>
|
||||
</view>
|
||||
<view class="flex-start flexstartboxfttow">
|
||||
<view class="fivecontent_item_boxitemlefttow flex-start"
|
||||
v-for="(c,index2) in item.proTag" :key="index2"
|
||||
:style="{'background':c.backColor,'color':c.backColor}">
|
||||
<image class="fivecontent_item_boxitemlefttowimage" v-if="c.shareImg"
|
||||
:src="c.shareImg" mode="aspectFill"></image>
|
||||
<text class="fivecontent_item_boxitemlefttowtext">{{c.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexboxitemleftthere flex-colum-start">
|
||||
<view class="indexboxitemleftthereabsolute">
|
||||
马上抢
|
||||
</view>
|
||||
<view class="indexboxitemlefttheretext flex-start">
|
||||
<view class="fivecontent_item_boxitemlefthere_one flex-start">
|
||||
<text class="flex_startone">到手</text>
|
||||
<text class="flex_starttow">¥{{item.salePrice}}</text>
|
||||
</view>
|
||||
<view class="fivecontent_item_boxitemlefthere_tow">
|
||||
{{item.discount || ''}}折
|
||||
</view>
|
||||
<view class="fivecontent_item_boxitemlefthere_there">
|
||||
¥{{item.originPrice}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexboxitemleftthere_countdown flex-between">
|
||||
<text class="indexboxitemleftthere_countdowntext">共省{{item.save}}元</text>
|
||||
<view class="indexboxitemleftthere_countdowntexts">
|
||||
<uni-countdown @timeup="updateCity" :show-day="false"
|
||||
:day="item.end_times.d" :hour="item.end_times.h"
|
||||
:minute="item.end_times.m" :second="item.end_times.s"
|
||||
:indexs='index' color="#FFFFFF" border-color="#00B26A"
|
||||
splitorColor="#FFFFFF" :font-size="7"></uni-countdown>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore height='40' :status="form.status" iconSize='24' fontSize='24' />
|
||||
<!-- </scroll-view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navseat from '@/components/navseat.vue'
|
||||
export default {
|
||||
components: {
|
||||
navseat
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
titlename: '咖啡',
|
||||
opacitys: false,
|
||||
towcontentclickindex: 0,
|
||||
windowHeight: '',
|
||||
seighT: '',
|
||||
customheighttop: '', //top高度
|
||||
isFixedTop: false,
|
||||
Topdistance: 3000, //吸顶初始距离
|
||||
list: [],
|
||||
toplist: {},
|
||||
listbox: [],
|
||||
form: {
|
||||
address: '', //地址
|
||||
type: '', //品类
|
||||
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
|
||||
distance: '', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore'
|
||||
},
|
||||
type:''
|
||||
};
|
||||
},
|
||||
onPageScroll(e) {
|
||||
if (e.scrollTop <= 44) { //搜索导航栏
|
||||
this.opacitys = false
|
||||
} else {
|
||||
this.opacitys = true
|
||||
}
|
||||
if (e.scrollTop >= this.Topdistance) { //类别导航栏
|
||||
this.isFixedTop = true
|
||||
} else {
|
||||
this.isFixedTop = false
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
let _this = this
|
||||
uni.getStorage({
|
||||
key: 'itemData',
|
||||
success: function(res) {
|
||||
_this.type = res.data.value
|
||||
_this.distiricttopCommon()
|
||||
// setTimeout(() => {
|
||||
_this.GetTop()
|
||||
// _this.init_fn()
|
||||
// }, 1000)
|
||||
}
|
||||
});
|
||||
// this.type = e.value
|
||||
// this.distiricttopCommon()
|
||||
// setTimeout(() => {
|
||||
// this.GetTop()
|
||||
// }, 1000)
|
||||
},
|
||||
onShow() {
|
||||
let _this = this
|
||||
uni.getStorage({
|
||||
key: 'itemData',
|
||||
success: function(res) {
|
||||
_this.type = res.data.value
|
||||
_this.distiricttopCommon()
|
||||
// setTimeout(() => {
|
||||
// _this.GetTop()
|
||||
_this.init_fn()
|
||||
// }, 1000)
|
||||
}
|
||||
});
|
||||
// this.init_fn()
|
||||
},
|
||||
computed: {
|
||||
HeighT() { //手机类型的尺寸
|
||||
return this.$store.getters.is_BarHeight
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickproduct(item){
|
||||
uni.pro.navigateTo('product/index',{
|
||||
id:item.id
|
||||
})
|
||||
},
|
||||
init_fn() {
|
||||
this.list = []
|
||||
this.form = {
|
||||
address: uni.cache.get('getLocationstorage').address, //地址
|
||||
lng: uni.cache.get('getLocationstorage').lng,
|
||||
lat: uni.cache.get('getLocationstorage').lat,
|
||||
type:this.type, //品类
|
||||
orderBy:0, //0.今日上新 1.离我最近 2.销量优先 3.价格优先 4.热榜推荐
|
||||
other: '', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
dateType: 1,
|
||||
status: 'loadmore'
|
||||
}
|
||||
this.onLoadlist()
|
||||
},
|
||||
async distiricttopCommon(e) {
|
||||
let res = await this.api.distiricttopCommon({
|
||||
type: this.type, //团购卷品类Id/subShop-预约到店
|
||||
orderBy: ''
|
||||
})
|
||||
if (res.code == 0) {
|
||||
this.toplist = res.data.carousel[0]
|
||||
this.listbox = res.data.menu
|
||||
}
|
||||
},
|
||||
async onLoadlist() {
|
||||
try {
|
||||
let res = await this.api.indexlist(this.form)
|
||||
var dates = new Date().getTime();
|
||||
res.data.list.forEach((item, index) => {
|
||||
var leftTime = item.endTime - dates; //计算两日期之间相差的毫秒数
|
||||
if (leftTime >= 0) {
|
||||
let d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
|
||||
let h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
|
||||
let m = Math.floor(leftTime / 1000 / 60 % 60);
|
||||
let s = Math.floor(leftTime / 1000 % 60);
|
||||
item.end_times = {
|
||||
d: d,
|
||||
h: h,
|
||||
m: m,
|
||||
s: s
|
||||
}
|
||||
} else {
|
||||
item.end_times = 0
|
||||
}
|
||||
})
|
||||
if (res.data.pages < this.form.page) {
|
||||
this.form.status = 'nomore'
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
this.list = [...this.list, ...res.data.list];
|
||||
this.form.status = 'loading';
|
||||
if (res.data.pageNum == res.data.pages) {
|
||||
this.form.status = 'nomore';
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
} catch (e) {}
|
||||
},
|
||||
//G滚动底部
|
||||
loadMore(e) {
|
||||
console.log(e)
|
||||
},
|
||||
//获取元素距离顶部的距离
|
||||
GetTop() {
|
||||
uni.getSystemInfo({
|
||||
success: (data) => {
|
||||
console.log(data)
|
||||
this.windowHeight = data.windowHeight - data.statusBarHeight //总高度
|
||||
// #ifdef MP-WEIXIN
|
||||
const custom = wx.getMenuButtonBoundingClientRect()
|
||||
this.seighT = data.windowHeight - custom.height - custom.top;
|
||||
console.log(custom)
|
||||
this.customheighttop = custom.height + custom.top
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
this.customheighttop = data.statusBarHeight / 2
|
||||
this.seighT = data.windowHeight - data.statusBarHeight / 2
|
||||
// #endif
|
||||
this.$u.getRect('.towcontentlistxitembt').then(res => {
|
||||
this.seighT = this.seighT - res.height //高度
|
||||
})
|
||||
this.$u.getRect('.towcontentlistxitem').then(res => {
|
||||
this.Topdistance = res.top - this.HeighT.heightBar //滚动距离 //滚动距离
|
||||
this.seighT = this.seighT - res.height //高度
|
||||
console.log(res)
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
towcontentclick(index) {
|
||||
this.towcontentclickindex = index
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
height: 492rpx;
|
||||
position: relative;
|
||||
|
||||
.onecontentimage {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.after {
|
||||
position: absolute;
|
||||
bottom: 32rpx;
|
||||
right: 0;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
background-image: radial-gradient(160rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #fff 40rpx);
|
||||
}
|
||||
|
||||
.onecontentabsolute {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 0 52rpx;
|
||||
bottom: 64rpx;
|
||||
|
||||
.onecontentabsoluteitem {
|
||||
padding: 8rpx 16rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
|
||||
image {
|
||||
width: 24.16rpx;
|
||||
height: 29.31rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 0 16rpx;
|
||||
flex: auto;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.onecontentabsoluteitembotton {
|
||||
width: 120rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(109deg, #FF9D84 0%, #FFFFFF 100%);
|
||||
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
position: relative;
|
||||
margin-top: -32rpx;
|
||||
|
||||
.towcontentlistxitemboxfixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
margin-top: 0rpx !important;
|
||||
}
|
||||
|
||||
.towcontentlistxitem {
|
||||
// margin-top: -32rpx;
|
||||
padding: 36rpx 28rpx 0rpx 28rpx;
|
||||
border-radius: 24rpx 0rpx 0rpx 0rpx;
|
||||
background: #F9F9F9;
|
||||
|
||||
.towcontentlistxitembox:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.towcontentlistxitembox {
|
||||
margin-left: 48rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontentlistxitemboxopacity {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 38.83rpx;
|
||||
height: 8.62rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentlistxitembt {
|
||||
padding: 28rpx;
|
||||
overflow-x: auto;
|
||||
flex-wrap: nowrap;
|
||||
background: #F9F9F9;
|
||||
|
||||
.towcontentlistxitembtitem {
|
||||
flex: none;
|
||||
padding: 8rpx 24rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.towcontentlistxitembtitem:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.towcontentlistxitembtitemaktev {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
background: #FEE06A;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.towcontentboutton {
|
||||
padding: 0 28rpx;
|
||||
|
||||
.fivecontent_item:nth-child(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.fivecontent_item {
|
||||
margin-top: 32rpx;
|
||||
padding: 24rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
|
||||
.fivecontent_item_nav {
|
||||
image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.fivecontent_item_nav_left {
|
||||
flex: auto;
|
||||
margin-left: 12rpx;
|
||||
|
||||
.fivecontent_item_nav_lefttop {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.fivecontent_item_nav_leftlang {
|
||||
margin-top: 8rpx;
|
||||
width: max-content;
|
||||
padding: 4rpx 10rpx;
|
||||
background: #FFF9E1;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
|
||||
text {
|
||||
margin-left: 6rpx;
|
||||
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 16rpx;
|
||||
color: #F9A511;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 10.82rpx;
|
||||
height: 14.06rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_item_nav_leftlang:nth-child(2) {
|
||||
margin-left: 12rpx;
|
||||
background: #FEE9DF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_item_box {
|
||||
margin-top: 20rpx;
|
||||
border-top: 2rpx solid #E5E5E5;
|
||||
padding-top: 14rpx;
|
||||
|
||||
.fivecontent_item_boxitem {
|
||||
image {
|
||||
width: 192rpx;
|
||||
height: 192rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.fivecontent_item_boxitemleft {
|
||||
margin-left: 24rpx;
|
||||
flex: auto;
|
||||
|
||||
.fivecontent_item_boxitemleftone {
|
||||
width: 100%;
|
||||
|
||||
text {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
view {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_item_boxitemlefttow {
|
||||
margin-top: 8rpx;
|
||||
width: max-content;
|
||||
padding: 4rpx 10rpx;
|
||||
background: #FFF9E1;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
|
||||
text {
|
||||
margin-left: 6rpx;
|
||||
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 16rpx;
|
||||
color: #F9A511;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 10.82rpx;
|
||||
height: 14.06rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_item_boxitemlefttow:nth-child(2) {
|
||||
margin-left: 12rpx;
|
||||
background: #FFD6D7;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
}
|
||||
|
||||
.indexboxitemleftthere {
|
||||
position: relative;
|
||||
margin-top: 30rpx;
|
||||
padding-left: 16rpx;
|
||||
width: 100%;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/qinggou.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.indexboxitemleftthereabsolute {
|
||||
position: absolute;
|
||||
top: 14rpx;
|
||||
right: 12rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.indexboxitemlefttheretext {
|
||||
// width: 100%;
|
||||
margin-top: 12rpx;
|
||||
// align-items: flex-end;
|
||||
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.fivecontent_item_boxitemlefthere_one {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.flex_startone {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 16rpx;
|
||||
color: #FF7127;
|
||||
}
|
||||
|
||||
.flex_starttow {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #FF7127;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_item_boxitemlefthere_tow {
|
||||
margin-left: 4rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
border: 2rpx solid #FF7127;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 16rpx;
|
||||
color: #FF7127;
|
||||
}
|
||||
|
||||
.fivecontent_item_boxitemlefthere_there {
|
||||
margin-left: 6rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 16rpx;
|
||||
color: #999999;
|
||||
text-decoration-line: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
.indexboxitemleftthere_countdown {
|
||||
width: 100%;
|
||||
padding-right: 7rpx;
|
||||
margin-top: 2rpx;
|
||||
.indexboxitemleftthere_countdowntext {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
padding-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.indexboxitemleftthere_countdowntexts {
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 16rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
377
pages/index/freedaily.vue
Normal file
377
pages/index/freedaily.vue
Normal file
@@ -0,0 +1,377 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 占位符导航栏 -->
|
||||
<navseat :opacity='opacity' :title='titlename' :titleshow='true'></navseat>
|
||||
<view class="onecontent">
|
||||
<view class="onecontentabsolute"></view>
|
||||
</view>
|
||||
<view class="towcontent">
|
||||
<view class="towcontentone">
|
||||
<image class="towcontentoneimage" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/mrmd1.png"
|
||||
mode="aspectFill"></image>
|
||||
<view class="towcontentonebox">
|
||||
<image class="towcontentoneboximage"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/mrmd2.png" mode="aspectFill">
|
||||
</image>
|
||||
<view class="towcontentoneboxswiper">
|
||||
<swiper class="swiper" circular :autoplay='true' :vertical='true' display-multiple-items="4"
|
||||
:interval="'3000'">
|
||||
<swiper-item class="swiperitem" v-for="(item,index) in orderfindWiningUserlist"
|
||||
:key="index">
|
||||
<view class="swiper-item">{{item.userName}}* 免单{{item.orderAmount}}元订单号：{{item.orderNo}}
|
||||
</view>
|
||||
</swiper-item>
|
||||
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontentoness">
|
||||
<view class="towcontentonebox_box">
|
||||
订单数：{{total}}
|
||||
</view>
|
||||
<view class="towcontentonebox">
|
||||
<view class="towcontentoneboxswiper">
|
||||
<view class="swiper-item" style="margin-bottom: 32rpx;">
|
||||
<view class="swiper_itemone">
|
||||
免单状态
|
||||
</view>
|
||||
<view class="swiper_itemtow">
|
||||
订单号
|
||||
</view>
|
||||
<view class="swiper_itemthere">
|
||||
金额
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiperitem" v-for="(item,index) in ordermineWinnerList" :key="index">
|
||||
<view class="swiper-item" style="margin-top: 32rpx;">
|
||||
<view class="swiper_itemone">
|
||||
{{item.isRefund == true ? '已免单':'待免单'}}
|
||||
</view>
|
||||
<view class="swiper_itemtow">
|
||||
{{item.orderNo}}
|
||||
</view>
|
||||
<view class="swiper_itemthere">
|
||||
{{item.orderAmount}}元
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <swiper class="swiper" circular :autoplay='true' :vertical='true' interval="3000"
|
||||
display-multiple-items="4">
|
||||
<swiper-item class="swiperitem" v-for="(item,index) in orderfindWiningUserlist"
|
||||
:key="index">
|
||||
<view class="swiper-item">
|
||||
<view class="swiper_itemone">
|
||||
{{item.orderAmount}}元
|
||||
</view>
|
||||
<view class="swiper_itemtow">
|
||||
{{item.orderNo}}
|
||||
</view>
|
||||
<view class="swiper_itemthere">
|
||||
{{item.isRefund == true ? '已免单':'待免单'}}
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontenttow">
|
||||
注：每笔订单完成后30天内均有机会获得免单
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
forEach
|
||||
} from 'lodash';
|
||||
import navseat from '@/components/navseat.vue'
|
||||
export default {
|
||||
components: {
|
||||
navseat
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
titlename: '',
|
||||
opacity: false,
|
||||
orderfindWiningUserlist: [],
|
||||
ordermineWinnerList: [],
|
||||
form: {
|
||||
address: '', //地址
|
||||
type: '', //品类
|
||||
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
|
||||
other: '', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore'
|
||||
},
|
||||
total:0
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
this.orderfindWiningUser()
|
||||
this.ordermineWinnerEvent()
|
||||
let _this = this
|
||||
uni.getStorage({
|
||||
key: 'itemData',
|
||||
success: function(res) {
|
||||
_this.titlename = res.data.name
|
||||
}
|
||||
});
|
||||
},
|
||||
onReachBottom() {
|
||||
this.ordermineWinnerEvent()
|
||||
},
|
||||
onPageScroll(e) {
|
||||
if (e.scrollTop <= 44) { //搜索导航栏
|
||||
this.opacity = false
|
||||
} else {
|
||||
this.opacity = true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
cut(str, firstStr, lastStr) {
|
||||
let start = str.indexOf(firstStr);
|
||||
let end = str.lastIndexOf(lastStr);
|
||||
return str.slice(start, end + 1); //slice方法截取的部分不包括第二参数所在位置
|
||||
},
|
||||
|
||||
async ordermineWinnerEvent() {
|
||||
let res = await this.api.ordermineWinner({
|
||||
userId: uni.getStorageSync('userInfo').id,
|
||||
page: this.form.page,
|
||||
size: this.form.size
|
||||
})
|
||||
if(res.code ==0){
|
||||
this.total = res.data.total
|
||||
if(this.form.page==1){
|
||||
this.ordermineWinnerList = res.data.list
|
||||
}else{
|
||||
this.ordermineWinnerList.push(...res.data.list)
|
||||
}
|
||||
this.form.page = ++this.form.page;
|
||||
}
|
||||
},
|
||||
async orderfindWiningUser() {
|
||||
let res = await this.api.orderfindWiningUser()
|
||||
this.orderfindWiningUserlist = res.data.map((i) => {
|
||||
i.userName = i.userName.slice(0, 1)
|
||||
return i
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
height: 684.19rpx;
|
||||
position: relative;
|
||||
background: linear-gradient(96deg, #F9F2D9 0%, #FBE1DA 100%);
|
||||
|
||||
.onecontentabsolute {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 534.19rpx;
|
||||
width: 100%;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/mrmd.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
position: relative;
|
||||
padding: 0 28rpx;
|
||||
width: 100%;
|
||||
margin-top: -100rpx;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(249, 242, 217, 0.77) 10%, #F5DFDF 100%);
|
||||
|
||||
.towcontentone {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: linear-gradient(180deg, rgba(255, 241, 204, 0.77) 0%, rgba(255, 255, 255, 0.56) 40%, #FFFFFF 100%);
|
||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||
border: 2rpx solid #FFFFFF;
|
||||
padding: 32rpx 24rpx;
|
||||
|
||||
.towcontentoneimage {
|
||||
position: absolute;
|
||||
top: -30rpx;
|
||||
left: 50%;
|
||||
transform: translatex(-50%);
|
||||
width: 118rpx;
|
||||
height: 46rpx;
|
||||
}
|
||||
|
||||
.towcontentonebox {
|
||||
width: 100%;
|
||||
|
||||
.towcontentoneboximage {
|
||||
width: 171.63rpx;
|
||||
height: 37.24rpx;
|
||||
}
|
||||
|
||||
.towcontentoneboxswiper {
|
||||
width: 100%;
|
||||
padding-top: 24rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.swiper {
|
||||
height: 242rpx;
|
||||
|
||||
.swiperitem {
|
||||
height: 40rpx;
|
||||
|
||||
.swiper-item {
|
||||
display: block;
|
||||
height: 40rpx;
|
||||
text-align: left;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentoness {
|
||||
margin-top: 48rpx;
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||
padding: 38rpx 48rpx;
|
||||
|
||||
.towcontentonebox_box {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
width: 262rpx;
|
||||
height: 58rpx;
|
||||
line-height: 58rpx;
|
||||
background: #FFA436;
|
||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.towcontentonebox {
|
||||
width: 100%;
|
||||
|
||||
.towcontentoneboximage {
|
||||
width: 171.63rpx;
|
||||
height: 37.24rpx;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.swiper_itemone {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.swiper_itemtow {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.swiper_itemthere {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentoneboxswiper {
|
||||
width: 100%;
|
||||
// height: 242rpx;
|
||||
padding-top: 24rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.swiper {
|
||||
height: 230rpx;
|
||||
|
||||
.swiperitem {
|
||||
height: 40rpx;
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.swiper_itemone {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.swiper_itemtow {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.swiper_itemthere {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontenttow {
|
||||
margin-top: 32rpx;
|
||||
padding-bottom: 144rpx;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -5,7 +5,8 @@
|
||||
<!-- 轮播图 -->
|
||||
<swipers :carousel='hometoplist.carousel'></swipers>
|
||||
<!-- 广告 -->
|
||||
<advertisement :bannervo='hometoplist.bannerVO' :itemStyle='advertisementStyle'></advertisement>
|
||||
<advertisement :bannervo='hometoplist.bannervo' :itemStyle='advertisementStyle' ref="refbannervo">
|
||||
</advertisement>
|
||||
<!-- 金刚区 -->
|
||||
<diamond :district='hometoplist.district'></diamond>
|
||||
<!-- 今日上线 -->
|
||||
@@ -22,16 +23,20 @@
|
||||
<view class="flex-between" style="flex-wrap: inherit;">
|
||||
<view class="fourcontent_item flex-start" v-for="(item,index) in hometoplist.menu"
|
||||
:key="index" @click="viewHistory(item,index)"
|
||||
:class="!item.isChild && index ? 'fourcontent_itemactev':''">
|
||||
<!-- <view class="fourcontent_item flex-start" v-for="(item,index) in hometoplist.menu" :key="index"
|
||||
@click="viewHistory(item,index)"
|
||||
:class="!item.isChild && viewHistoryindex == index ? 'fourcontent_itemactev':''"> -->
|
||||
:class="!item.isChild && viewHistoryindex == index ? 'fourcontent_itemactev':''">
|
||||
<text style="margin-right: 10rpx;">{{item.name}}</text>
|
||||
<up-icon v-if="item.isChild" style="margin-left: 10rpx;" name="arrow-down-fill"
|
||||
<up-icon v-if="item.isChild" style="margin-left: 10rpx;"
|
||||
:name="showproductlist && viewHistoryindex == index ?'arrow-up-fill':'arrow-down-fill'"
|
||||
color="#333333" size="12"></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="componentsclass" v-if="showproductlist">
|
||||
<AreaSelect v-if="viewHistoryindex == 0" @updateValue="openproductlist" />
|
||||
<grouping v-if="viewHistoryindex == 1 || viewHistoryindex == 2 || viewHistoryindex == 3"
|
||||
@grouping="openproductlist" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</up-sticky>
|
||||
|
||||
<!-- 首页抢购区域 -->
|
||||
@@ -129,10 +134,9 @@
|
||||
</view>
|
||||
</view>
|
||||
<up-loadmore height='40' :status="formhomelist.status" iconSize='16' fontSize='16' />
|
||||
<!-- </scroll-view> -->
|
||||
</view>
|
||||
</view>
|
||||
<!-- <indexs v-if="showindex == 'shopIndex'"></indexs> -->
|
||||
<indexs v-if="showindex == 'shopIndex'"></indexs>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -141,7 +145,10 @@
|
||||
ref,
|
||||
computed,
|
||||
onMounted,
|
||||
reactive
|
||||
reactive,
|
||||
onBeforeUnmount,
|
||||
watch,
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
import {
|
||||
onLoad,
|
||||
@@ -150,21 +157,27 @@
|
||||
onReachBottom,
|
||||
onPageScroll
|
||||
} from '@dcloudio/uni-app'
|
||||
// 获取全局属性
|
||||
const {
|
||||
proxy
|
||||
} = getCurrentInstance();
|
||||
import swipers from './components/swiper.vue' //引入轮播
|
||||
import advertisement from './components/advertisement.vue' //广告
|
||||
import diamond from './components/diamond.vue' //金刚区
|
||||
import todaylist from './components/todaylist.vue' //今日上线
|
||||
// import popupad from '@/components/popupad.vue'
|
||||
// import productlist from './components/productlist.vue'
|
||||
// import category from '@/components/qiyue-category/qiyue-category.vue';
|
||||
// import indexs from './indexs.vue';
|
||||
import indexs from './indexs.vue';
|
||||
import AreaSelect from './components/AreaSelect.vue'; //城市联动
|
||||
import grouping from './components/grouping.vue'; //其他
|
||||
import Nav from '@/components/indexnav.vue'; //导航栏
|
||||
import API from "@/common/js/api.js"
|
||||
import {
|
||||
APIhomehomePageUp,
|
||||
APIhome,
|
||||
APIshopUserInfo
|
||||
} from "@/common/api/index/index.js"
|
||||
import {
|
||||
useNavbarStore
|
||||
} from '@/stores/navbarStore';
|
||||
const store = useNavbarStore();
|
||||
|
||||
// 动态更新导航栏配置
|
||||
store.updateNavbarConfig({
|
||||
showBack: true, //左边返回键
|
||||
@@ -178,8 +191,8 @@
|
||||
const showindex = ref('index')
|
||||
//计算广告图片的重合尺寸是位移
|
||||
const getStyle = (e) => {
|
||||
if (e > hometoplist.bannerVO.counponsInfo.length / 2) {
|
||||
var right = hometoplist.bannerVO.counponsInfo.length - e
|
||||
if (e > hometoplist.bannervo.counponsInfo.length / 2) {
|
||||
var right = hometoplist.bannervo.counponsInfo.length - e
|
||||
return {
|
||||
transform: 'scale(' + (1) + ') translate(-' + (right * 20) + '%,0px)',
|
||||
zIndex: 9999 - right,
|
||||
@@ -193,20 +206,22 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
const advertisementStyle = ref([{
|
||||
transform: 'scale(' + (1) + ') translate(-' + (0 * 20) + '%,0px)',
|
||||
zIndex: 9999,
|
||||
opacity: 1
|
||||
}])
|
||||
const advertisementStyle = ref([])
|
||||
const refbannervo = ref(null);
|
||||
//数据
|
||||
const hometoplist = reactive({})
|
||||
const hometoplist = reactive({
|
||||
bannervo: {
|
||||
counponsInfo: [],
|
||||
coupons: ''
|
||||
}
|
||||
})
|
||||
// 首页上面数据
|
||||
const hometop = async () => {
|
||||
try {
|
||||
let res = await API.homehomePageUp()
|
||||
let res = await APIhomehomePageUp()
|
||||
Object.assign(hometoplist, res.data)
|
||||
if (hometoplist.bannerVO.counponsInfo) {
|
||||
hometoplist.bannerVO.counponsInfo.forEach((item, index) => {
|
||||
if (hometoplist.bannervo.counponsInfo) {
|
||||
hometoplist.bannervo.counponsInfo.forEach((item, index) => {
|
||||
advertisementStyle.value.push(getStyle(index))
|
||||
})
|
||||
}
|
||||
@@ -232,7 +247,7 @@
|
||||
const homelist = ref([]) //接收数据
|
||||
const onLoadhome = async () => {
|
||||
try {
|
||||
let res = await API.home(formhomelist)
|
||||
let res = await APIhome(formhomelist)
|
||||
var dates = new Date().getTime();
|
||||
res.data.list.forEach((item, index) => {
|
||||
var leftTime = item.endTime - dates; //计算两日期之间相差的毫秒数
|
||||
@@ -288,16 +303,21 @@
|
||||
})
|
||||
onLoadhome()
|
||||
}
|
||||
const updateCity = async (data) => {
|
||||
console.log(data)
|
||||
// this.list[data].end_times = 0;
|
||||
}
|
||||
|
||||
// 弹出层处理
|
||||
const showproductlist = ref(false);
|
||||
// 定义方法
|
||||
const openproductlist = (e) => {
|
||||
hometoplist.menu[viewHistoryindex.value].name = e //下标更改name
|
||||
showproductlist.value = !showproductlist.value
|
||||
}
|
||||
|
||||
// 存储每个元素距离顶部的距离
|
||||
const elementTop = ref(0);
|
||||
// 存储是否吸顶的状态
|
||||
const isSticky = ref(true);
|
||||
//下标
|
||||
const viewHistoryindex = ref(null)
|
||||
// 点击滑动元素
|
||||
const viewHistory = async (item, index) => {
|
||||
if (isSticky) {
|
||||
@@ -306,7 +326,12 @@
|
||||
duration: 300
|
||||
});
|
||||
}
|
||||
|
||||
// 是否有弹出层
|
||||
if (item.isChild) {
|
||||
showproductlist.value = showproductlist.value ? viewHistoryindex.value == index ? false : true : !
|
||||
showproductlist.value
|
||||
}
|
||||
viewHistoryindex.value = index
|
||||
}
|
||||
// 滑动
|
||||
onPageScroll((res) => {
|
||||
@@ -315,86 +340,71 @@
|
||||
});
|
||||
onShow(() => {})
|
||||
onMounted(async () => {
|
||||
// 获取初始定位高度
|
||||
setTimeout(() => {
|
||||
const query = uni.createSelectorQuery().select('#fourcontent');
|
||||
query.boundingClientRect((rect) => {
|
||||
console.log(rect.top, 111)
|
||||
elementTop.value = rect.top - store.height
|
||||
}).exec();
|
||||
}, 500)
|
||||
// 查询是否有无内存
|
||||
await proxy.$onLaunched;
|
||||
console.log(uni.cache.get('shopId'))
|
||||
if (uni.cache.get('shopId') && uni.cache.get('token')) {
|
||||
showindex.value = 'shopIndex'
|
||||
uni.cache.set('types', 'index');
|
||||
let res = await API.shopUserInfo({
|
||||
let res = await APIshopUserInfo({
|
||||
"shopId": uni.cache.get('shopId'),
|
||||
"userId": uni.cache.get('userInfo').id,
|
||||
"userId": uni.getStorageSync('userInfo').id,
|
||||
})
|
||||
if (res.code == 0) {
|
||||
shopUserInfo = res.data
|
||||
// uni.cache.set('shopUserInfo', this.shopUserInfo)
|
||||
//商家信息
|
||||
uni.cache.set('shopUserInfo', res.data)
|
||||
}
|
||||
if (uni.cache.get('forceUpdate') == 1) {
|
||||
// this.forceUpdate = !this.forceUpdate;
|
||||
}
|
||||
// this.getShopExtend()
|
||||
} else {
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
success: async (res) => {
|
||||
// console.log(res)
|
||||
let successres = await API.geocodelocation({
|
||||
lng: res.longitude,
|
||||
lat: res.latitude,
|
||||
})
|
||||
if (successres.code == 0) {
|
||||
let datastorage = {
|
||||
country: successres.data.addressComponent.country, // "中国"
|
||||
province: successres.data.addressComponent
|
||||
.province, //province: "陕西省"
|
||||
address: successres.data.addressComponent.city, //district: "西安市"
|
||||
district: successres.data.addressComponent
|
||||
.district, //district: "未央区"
|
||||
lng: res.longitude,
|
||||
lat: res.latitude,
|
||||
}
|
||||
uni.cache.set('getLocationstorage', datastorage);
|
||||
}
|
||||
},
|
||||
fail: async (err) => {
|
||||
showindex.value = 'index'
|
||||
}
|
||||
});
|
||||
hometop()
|
||||
init_fn()
|
||||
showindex.value = 'index'
|
||||
// 获取初始定位高度
|
||||
setTimeout(() => {
|
||||
const query = uni.createSelectorQuery().select('#fourcontent');
|
||||
query.boundingClientRect((rect) => {
|
||||
elementTop.value = rect.top - store.height
|
||||
}).exec();
|
||||
}, 500)
|
||||
}
|
||||
hometop()
|
||||
init_fn()
|
||||
|
||||
|
||||
});
|
||||
|
||||
onReachBottom(() => {
|
||||
onLoadhome()
|
||||
})
|
||||
onLoad(() => {
|
||||
|
||||
})
|
||||
// 页面离开时清除定时器
|
||||
// onBeforeUnmount(() => {
|
||||
// if (refbannervo.value) {
|
||||
// refbannervo.value.clearTimer();
|
||||
// }
|
||||
// });
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
height: 1000vh;
|
||||
background: #F9F9F9;
|
||||
|
||||
.fourcontent {
|
||||
padding: 32rpx 28rpx;
|
||||
padding: 32rpx 0;
|
||||
overflow-x: auto;
|
||||
flex-wrap: nowrap;
|
||||
background: #f9f9f9;
|
||||
margin: 0 32rpx;
|
||||
|
||||
.componentsclass {
|
||||
margin-top: 32rpx;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
transition-duration: 350ms;
|
||||
transition-timing-function: ease-out;
|
||||
z-index: 10075;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.fourcontent_item {
|
||||
flex-wrap: nowrap;
|
||||
margin-left: 22rpx;
|
||||
padding: 11rpx 31rpx;
|
||||
margin-left: 20rpx;
|
||||
padding: 10rpx 24rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
|
||||
@@ -412,6 +422,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.fivecontent {
|
||||
padding: 0 28rpx;
|
||||
height: 100vh;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="contentbox" :style="'background:url('+(shopExtend?shopExtend.value:'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/indexs/shuangbackground.png')+') no-repeat center center / cover' ">
|
||||
<view class="contentbox"
|
||||
:style="'background:url('+(shopExtend?shopExtend.value:'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/indexs/shuangbackground.png')+') no-repeat center center / cover' ">
|
||||
<view class="contentboxitem flex-between">
|
||||
<view class="contentboxitemleft flex-colum" @click="scanCodehandle(0)">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/indexs/Xdiancan.png" mode="aspectFill">
|
||||
@@ -31,84 +32,83 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userInfo: null,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
shopUserInfo: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
amount: '',
|
||||
shopName: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
shopExtend: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.userInfo = uni.cache.get('userInfo');
|
||||
},
|
||||
methods: {
|
||||
scanCodehandle(i) {
|
||||
setTimeout(()=>{
|
||||
uni.cache.set('forceUpdate',2)
|
||||
},200)
|
||||
uni.scanCode({
|
||||
success: async (res) => {
|
||||
let tableCode = this.getQueryString(decodeURIComponent(res.result), 'code')
|
||||
uni.cache.set('tableCode', tableCode)
|
||||
if (tableCode) {
|
||||
let data = await this.api.productqueryShop({
|
||||
code: uni.cache.get('tableCode'),
|
||||
})
|
||||
console.log()
|
||||
|
||||
if ( data.data.shopTableInfo && !data.data.shopTableInfo.choseCount ) {
|
||||
uni.pro.navigateTo('/pagesOrder/orderAMeal/index', {
|
||||
tableCode: tableCode,
|
||||
shopId: data.data.storeInfo.id,
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('order_food/order_food', {
|
||||
tableCode: tableCode,
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
}
|
||||
})
|
||||
},
|
||||
memberindex(url) {
|
||||
uni.pro.navigateTo(url, {
|
||||
shopId: uni.cache.get('shopId'),
|
||||
type: 'index',
|
||||
})
|
||||
|
||||
},
|
||||
getQueryString(url, name) { //解码
|
||||
var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
|
||||
var r = url.substr(1).match(reg)
|
||||
if (r != null) {
|
||||
return r[2]
|
||||
}
|
||||
return null;
|
||||
},
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
reactive
|
||||
} from "vue";
|
||||
import {
|
||||
onShow,
|
||||
} from '@dcloudio/uni-app'
|
||||
import {
|
||||
APIproductqueryShop
|
||||
} from "@/common/api/product/product.js";
|
||||
import {
|
||||
APIshopExtend
|
||||
} from "@/common/api/index/index.js";
|
||||
|
||||
const shopExtend = reactive({
|
||||
autokey: "index_bg",
|
||||
createTime: "2024-08-27T06:59:35.000+00:00",
|
||||
id: 17,
|
||||
name: "首页",
|
||||
shopId: 29,
|
||||
type: "img",
|
||||
updateTime: null,
|
||||
value: ""
|
||||
})
|
||||
const userInfo = uni.cache.get('userInfo')
|
||||
const shopUserInfo = uni.cache.get('shopUserInfo')
|
||||
|
||||
const scanCodehandle = (i) => {
|
||||
uni.pro.navigateTo('product/index', {
|
||||
tableCode: uni.cache.get('tableCode')
|
||||
})
|
||||
// uni.scanCode({
|
||||
// success: async (res) => {
|
||||
// let tableCode = getQueryString(decodeURIComponent(res.result), 'code')
|
||||
// uni.cache.set('tableCode', tableCode)
|
||||
// if (tableCode) {
|
||||
// let data = await APIproductqueryShop({
|
||||
// code: uni.cache.get('tableCode'),
|
||||
// })
|
||||
// if (data.data.shopTableInfo && !data.data.shopTableInfo.choseCount) {
|
||||
// uni.pro.navigateTo('/pagesOrder/orderAMeal/index', {
|
||||
// tableCode: tableCode,
|
||||
// shopId: data.data.storeInfo.id,
|
||||
// })
|
||||
// } else {
|
||||
// uni.pro.navigateTo('product/product', {
|
||||
// tableCode: tableCode,
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// fail: () => {}
|
||||
// })
|
||||
}
|
||||
const memberindex = (url) => {
|
||||
uni.pro.navigateTo(url, {
|
||||
shopId: uni.cache.get('shopId'),
|
||||
type: 'index',
|
||||
})
|
||||
}
|
||||
const getQueryString = (url, name) => { //解码
|
||||
var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
|
||||
var r = url.substr(1).match(reg)
|
||||
if (r != null) {
|
||||
return r[2]
|
||||
}
|
||||
|
||||
};
|
||||
return null;
|
||||
}
|
||||
onShow(async () => {
|
||||
let res = await APIshopExtend({
|
||||
shopId: uni.cache.get('shopId'),
|
||||
autokey: "index_bg" //index_bg my_bg member_bg shopInfo_bg
|
||||
})
|
||||
Object.assign(shopExtend, res.data)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<view>
|
||||
<Nav />
|
||||
<view class="content" :style="{ marginTop: `${store.height}px` }">
|
||||
<!-- 轮播图 -->
|
||||
<swipers :carousel='hometoplist.carousel'></swipers>
|
||||
<view class="content">
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -11,7 +9,7 @@
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
reactive,
|
||||
onMounted
|
||||
} from "vue";
|
||||
import {
|
||||
@@ -19,15 +17,8 @@
|
||||
onReady,
|
||||
onShow
|
||||
} from '@dcloudio/uni-app'
|
||||
import swipers from './components/swiper.vue' //引入轮播
|
||||
import popupad from '@/components/popupad.vue'
|
||||
import diamond from './components/diamond.vue'
|
||||
import todaylist from './components/todaylist.vue'
|
||||
import productlist from './components/productlist.vue'
|
||||
import advertisement from './components/advertisement.vue'
|
||||
import category from '@/components/qiyue-category/qiyue-category.vue';
|
||||
import indexs from './indexs.vue';
|
||||
import Nav from '@/components/indexnav.vue'; //导航栏
|
||||
import Nav from '@/components/CustomNavbar.vue'; //导航栏
|
||||
// pinia管理
|
||||
import {
|
||||
useNavbarStore
|
||||
} from '@/stores/navbarStore';
|
||||
@@ -42,24 +33,8 @@
|
||||
isTransparent: false,
|
||||
hasPlaceholder: false //是否要占位符
|
||||
});
|
||||
const targetObj = {
|
||||
a: 1
|
||||
};
|
||||
const sourceObj1 = {
|
||||
b: 2
|
||||
};
|
||||
const sourceObj2 = {
|
||||
c: 3
|
||||
};
|
||||
|
||||
// 将 sourceObj1 和 sourceObj2 的属性复制到 targetObj
|
||||
const result = Object.assign(targetObj, sourceObj1, sourceObj2);
|
||||
|
||||
console.log(result);
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
height: 1000vh;
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
.content {}
|
||||
</style>
|
||||
335
pages/index/tothestore.vue
Normal file
335
pages/index/tothestore.vue
Normal file
@@ -0,0 +1,335 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 占位符导航栏 -->
|
||||
<Nav />
|
||||
<view class="onecontent">
|
||||
<image class="onecontentimage" :src="toplist.coverImg" mode="aspectFill"></image>
|
||||
<view class="onecontentabsolute">
|
||||
</view>
|
||||
<!-- 小内切圆 -->
|
||||
<view class="after"></view>
|
||||
</view>
|
||||
<view class="towcontent">
|
||||
<view class="fivecontent_item flex-between" v-for="(item,index) in list" :key="index">
|
||||
<view class="fivecontent_itemone flex-start">
|
||||
<image class="fivecontent_itemoneimage" :src="item.coverImg" mode=""></image>
|
||||
<view class="fivecontent_itemonebox">
|
||||
<view class="fivecontent_itemoneboxone flex-start">
|
||||
<view class="fivecontent_itemoneboxone_o">
|
||||
热销TOP{{index}}
|
||||
</view>
|
||||
<view class="fivecontent_itemoneboxone_t">
|
||||
{{item.shopName}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontent_itemoneboxtow flex-start" @click="goMap(item)">
|
||||
<image class="fivecontent_itemoneboxtowimage"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/dw.png" mode="widthFix"></image>
|
||||
<view class="fivecontent_itemoneboxtow_o">
|
||||
{{item.address.length>7?item.address.substring(0,7)+'...':item.address}}
|
||||
</view>
|
||||
<view class="fivecontent_itemoneboxtow_t">
|
||||
{{item.distances}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontent_itemtow" @click="makePhoneCall(item)">
|
||||
马上预约
|
||||
</view>
|
||||
</view>
|
||||
<up-loadmore height='40' :status="form.status" iconSize='14' fontSize='14' />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
reactive,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
} from "vue";
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
onShow,
|
||||
onReachBottom,
|
||||
onPageScroll
|
||||
} from '@dcloudio/uni-app'
|
||||
import Nav from '@/components/CustomNavbar.vue'; //导航栏
|
||||
import {
|
||||
APIdistiricttopCommon,
|
||||
APIdistirictsubShopList
|
||||
} from "@/common/api/index/tothestore.js"
|
||||
import {
|
||||
useNavbarStore
|
||||
} from '@/stores/navbarStore';
|
||||
const store = useNavbarStore();
|
||||
|
||||
// 数据
|
||||
const list = ref([])
|
||||
const toplist = ref({})
|
||||
const form = reactive({
|
||||
address: '', //地址
|
||||
type: '', //品类
|
||||
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
|
||||
other: '', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore'
|
||||
})
|
||||
const init_fn = () => {
|
||||
list.value = []
|
||||
form.page = 1 //页数
|
||||
form.size = 10 //页数
|
||||
form.status = 'loadmore' //页数
|
||||
distirictsubShopList()
|
||||
}
|
||||
|
||||
const distiricttopCommon = async () => {
|
||||
let res = await APIdistiricttopCommon({
|
||||
type: 'subShop', //团购卷品类Id/subShop-预约到店
|
||||
orderBy: ''
|
||||
})
|
||||
console.log(res.data.carousel[0])
|
||||
if (res.code == 0) {
|
||||
toplist.value = res.data.carousel[0]
|
||||
// 动态更新导航栏配置
|
||||
store.updateNavbarConfig({
|
||||
showBack: true, //左边返回键
|
||||
rightText: '', //右边文字
|
||||
showSearch: false, //true是标题其他事文字
|
||||
title: toplist.value.name,
|
||||
isTransparent: false,
|
||||
hasPlaceholder: false //是否要占位符
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const goMap = (d) => {
|
||||
uni.openLocation({
|
||||
longitude: (d.lng * 1),
|
||||
latitude: (d.lat * 1)
|
||||
})
|
||||
}
|
||||
// 打电话
|
||||
const makePhoneCall = (item) => {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: item.phone //仅为示例
|
||||
});
|
||||
}
|
||||
const distirictsubShopList = async () => {
|
||||
let res = await APIdistirictsubShopList({
|
||||
address: uni.cache.get('getLocationstorage').address, //地址
|
||||
lng: uni.cache.get('getLocationstorage').lng,
|
||||
lat: uni.cache.get('getLocationstorage').lat,
|
||||
distanceInKm: '10', //默认10 以经纬度为中心 多大范围以内 单位km
|
||||
isPage: '', //是否分页 1分页 0不分页
|
||||
page: form.page, //页数
|
||||
size: form.size, //页容量
|
||||
})
|
||||
if (res.data.pages < form.page) {
|
||||
form.status = 'nomore'
|
||||
if (form.page == 1 && res.data.list.length == 0) {
|
||||
list.value = []
|
||||
}
|
||||
return false;
|
||||
} else {
|
||||
form.status = 'loading';
|
||||
if (form.page == 1) {
|
||||
list.value = res.data.list
|
||||
} else {
|
||||
list.value = [...list.value, ...res.data.list];
|
||||
}
|
||||
form.page = ++form.page;
|
||||
if (form.page > res.data.pages) {
|
||||
form.status = 'nomore';
|
||||
} else {
|
||||
form.status = 'loading';
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
// // 滑动到指定位置导航栏隐藏
|
||||
onPageScroll((res) => {
|
||||
uni.$u.debounce(store.scrollTop = res.scrollTop, 500)
|
||||
});
|
||||
onMounted(() => {
|
||||
init_fn()
|
||||
distiricttopCommon()
|
||||
})
|
||||
onReachBottom(() => {
|
||||
distirictsubShopList()
|
||||
// 分页
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
height: 460rpx;
|
||||
position: relative;
|
||||
|
||||
.after {
|
||||
position: absolute;
|
||||
bottom: 32rpx;
|
||||
right: 0;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
background-image: radial-gradient(160rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #F9F9F9 40rpx);
|
||||
}
|
||||
|
||||
.onecontentimage {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
|
||||
}
|
||||
|
||||
.onecontentabsolute {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 0 52rpx;
|
||||
bottom: 64rpx;
|
||||
|
||||
.onecontentabsoluteitem {
|
||||
padding: 8rpx 16rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
|
||||
image {
|
||||
width: 24.16rpx;
|
||||
height: 29.31rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 0 16rpx;
|
||||
flex: auto;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.onecontentabsoluteitembotton {
|
||||
width: 120rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(109deg, #FF9D84 0%, #FFFFFF 100%);
|
||||
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
position: relative;
|
||||
margin-top: -32rpx;
|
||||
padding: 32rpx 28rpx;
|
||||
border-radius: 24rpx 0rpx 0rpx 0rpx;
|
||||
background: #F9F9F9;
|
||||
|
||||
.fivecontent_item:nth-child(1) {
|
||||
margin-top: 0;
|
||||
|
||||
}
|
||||
|
||||
.fivecontent_item {
|
||||
background: #FFFFFF;
|
||||
padding: 16rpx 24rpx;
|
||||
margin-top: 32rpx;
|
||||
width: 100%;
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
|
||||
.fivecontent_itemone {
|
||||
.fivecontent_itemoneimage {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.fivecontent_itemonebox {
|
||||
margin-left: 16rpx;
|
||||
height: 84rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.fivecontent_itemoneboxone {
|
||||
.fivecontent_itemoneboxone_o {
|
||||
padding: 2rpx 8rpx;
|
||||
background: linear-gradient(116deg, #FF9D2B 0%, #FF4805 100%);
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 500;
|
||||
font-size: 16rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.fivecontent_itemoneboxone_t {
|
||||
margin-left: 12rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_itemoneboxtow {
|
||||
margin-top: 10rpx;
|
||||
|
||||
.fivecontent_itemoneboxtowimage {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.fivecontent_itemoneboxtow_o {
|
||||
margin-left: 8rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.fivecontent_itemoneboxtow_t {
|
||||
margin-left: 16rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_itemtow {
|
||||
padding: 8rpx 16rpx;
|
||||
background: #FEE06A;
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user