Add shop and menu pages with cart functionality and UI components
This commit is contained in:
zhugaoliang
parent
8ca4b07365
commit
e2114dc723
21
.vscode-upload.json
Normal file
21
.vscode-upload.json
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
[{
|
||||||
|
"name":"",
|
||||||
|
"host": "",
|
||||||
|
"port": 22,
|
||||||
|
"username": "",
|
||||||
|
"password": "",
|
||||||
|
"remotePath": "",
|
||||||
|
"localPath": "",
|
||||||
|
"disable": false,
|
||||||
|
"private_key": "~/.ssh/id_rsa"
|
||||||
|
},{
|
||||||
|
"name":"",
|
||||||
|
"host": "",
|
||||||
|
"port": 22,
|
||||||
|
"username": "",
|
||||||
|
"password": "",
|
||||||
|
"remotePath": "",
|
||||||
|
"localPath": "",
|
||||||
|
"disable": false,
|
||||||
|
"private_key": "~/.ssh/id_rsa"
|
||||||
|
}]
|
||||||
1228
package-lock.json
generated
1228
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -17,6 +17,7 @@
|
|||||||
"pinia-plugin-persistedstate": "^4.2.0",
|
"pinia-plugin-persistedstate": "^4.2.0",
|
||||||
"vant": "^4.6.2",
|
"vant": "^4.6.2",
|
||||||
"weixin-js-sdk": "^1.6.3",
|
"weixin-js-sdk": "^1.6.3",
|
||||||
"yarn": "^1.22.19"
|
"yarn": "^1.22.19",
|
||||||
|
"yshop-miniapp": "file:"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
133
pages/components/pages/shop/shop copy.vue
Normal file
133
pages/components/pages/shop/shop copy.vue
Normal file
@ -0,0 +1,133 @@
|
|||||||
|
<template>
|
||||||
|
<uv-navbar
|
||||||
|
:fixed="false"
|
||||||
|
:title="title"
|
||||||
|
left-arrow
|
||||||
|
@leftClick="$onClickLeft"
|
||||||
|
/>
|
||||||
|
<view>
|
||||||
|
<view>
|
||||||
|
<uv-search margin="30rpx" v-model="keywork" @custom="search(keywork)"></uv-search>
|
||||||
|
</view>
|
||||||
|
<view v-for="(item,index) in list" :key="index">
|
||||||
|
<uni-card @click="choice(item)" :border="item.id == store.id" :title="item.name" :thumbnail="item.image" :thumb-width="80" :sub-title="item.status_text">
|
||||||
|
<view class="body">
|
||||||
|
<view class="body-left">
|
||||||
|
<view>距离您 {{kmUnit(item.dis)}}</view>
|
||||||
|
<view v-if="item.distance > 0">配送距离：{{item.distance + 'km '}} & 配送费：{{item.delivery_price}}</view>
|
||||||
|
<view v-else>外卖不配送</view>
|
||||||
|
<view>{{item.addressMap + ' ' + item.address}}</view>
|
||||||
|
<view>营业时间 {{formatDateTime(item.startTime,'hh:mm')}} - {{formatDateTime(item.endTime,'hh:mm')}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="body-right">
|
||||||
|
<uv-button @click="openLocation(item)">导航</uv-button>
|
||||||
|
<uv-button @click="call(item.mobile)">致电</uv-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-card>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
ref
|
||||||
|
} from 'vue'
|
||||||
|
import { useMainStore } from '@/store/store'
|
||||||
|
import { storeToRefs } from 'pinia'
|
||||||
|
import { onLoad,onShow ,onPullDownRefresh,onHide} from '@dcloudio/uni-app'
|
||||||
|
import { formatDateTime,kmUnit,prePage } from '@/utils/util'
|
||||||
|
import {
|
||||||
|
shopNearby,
|
||||||
|
menuGoods
|
||||||
|
} from '@/api/goods'
|
||||||
|
import {
|
||||||
|
shopGetList
|
||||||
|
} from '@/api/market'
|
||||||
|
const main = useMainStore()
|
||||||
|
const { store,location } = storeToRefs(main)
|
||||||
|
const title = ref('店铺')
|
||||||
|
const list = ref([])
|
||||||
|
const keywork = ref('')
|
||||||
|
const page = ref(1)
|
||||||
|
const pagesize = ref(10)
|
||||||
|
|
||||||
|
onLoad(() => {
|
||||||
|
getShop();
|
||||||
|
})
|
||||||
|
|
||||||
|
const getShop = async(keywork = '') => {
|
||||||
|
let data = await shopGetList({
|
||||||
|
lat: location.value.latitude ? location.value.latitude : 0,
|
||||||
|
lng: location.value.longitude ? location.value.longitude : 0,
|
||||||
|
kw: keywork,
|
||||||
|
shop_id: 0
|
||||||
|
});
|
||||||
|
if (data) {
|
||||||
|
//console.log(data);
|
||||||
|
if (page.value == 1) {
|
||||||
|
list.value = data;
|
||||||
|
} else {
|
||||||
|
for(let i in data) {
|
||||||
|
list.value.push(data[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//打开定位
|
||||||
|
const openLocation = (shop) => {
|
||||||
|
//console.log(shop);
|
||||||
|
uni.openLocation({
|
||||||
|
latitude: parseFloat(shop.lat),
|
||||||
|
longitude: parseFloat(shop.lng),
|
||||||
|
name:shop.name,
|
||||||
|
address: shop.addressMap + shop.address,
|
||||||
|
fail: (res) => {
|
||||||
|
console.log(res);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 打电话
|
||||||
|
const call = (mobile) => {
|
||||||
|
uni.makePhoneCall({
|
||||||
|
phoneNumber:mobile
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 搜索按钮
|
||||||
|
const search = (keywork) => {
|
||||||
|
page.value = 1;
|
||||||
|
getShop(keywork);
|
||||||
|
}
|
||||||
|
// 选中店铺
|
||||||
|
const choice = (shop) => {
|
||||||
|
main.SET_STORE(shop);
|
||||||
|
uni.$emit('refreshMenu')
|
||||||
|
uni.switchTab({
|
||||||
|
url:'/pages/menu/menu',
|
||||||
|
success(res) {
|
||||||
|
},
|
||||||
|
fail(res) {
|
||||||
|
console.log(res);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.body {
|
||||||
|
|
||||||
|
.body-left {
|
||||||
|
display: inline-block;
|
||||||
|
width: 77%;
|
||||||
|
padding-left: 6rpx;
|
||||||
|
}
|
||||||
|
.body-right {
|
||||||
|
display: inline-block;
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -4,27 +4,80 @@
|
|||||||
:title="title"
|
:title="title"
|
||||||
left-arrow
|
left-arrow
|
||||||
@leftClick="$onClickLeft"
|
@leftClick="$onClickLeft"
|
||||||
|
:titleStyle="{color: '#333', fontSize: '32rpx'}"
|
||||||
/>
|
/>
|
||||||
<view>
|
<view class="container">
|
||||||
<view>
|
<view class="search-box">
|
||||||
<uv-search margin="30rpx" v-model="keywork" @custom="search(keywork)"></uv-search>
|
<uv-search
|
||||||
|
placeholder="搜索店铺"
|
||||||
|
v-model="keywork"
|
||||||
|
@custom="search(keywork)"
|
||||||
|
shape="round"
|
||||||
|
bgColor="#f5f5f5"
|
||||||
|
margin="20rpx 30rpx"
|
||||||
|
></uv-search>
|
||||||
</view>
|
</view>
|
||||||
<view v-for="(item,index) in list" :key="index">
|
<view class="shop-list">
|
||||||
<uni-card @click="choice(item)" :border="item.id == store.id" :title="item.name" :thumbnail="item.image" :thumb-width="80" :sub-title="item.status_text">
|
<view
|
||||||
<view class="body">
|
v-for="(item,index) in list"
|
||||||
<view class="body-left">
|
:key="index"
|
||||||
<view>距离您 {{kmUnit(item.dis)}}</view>
|
class="shop-item"
|
||||||
<view v-if="item.distance > 0">配送距离：{{item.distance + 'km '}} & 配送费：{{item.delivery_price}}</view>
|
:class="{'shop-item-active': item.id == store.id}"
|
||||||
<view v-else>外卖不配送</view>
|
@click="choice(item)"
|
||||||
<view>{{item.addressMap + ' ' + item.address}}</view>
|
>
|
||||||
<view>营业时间 {{formatDateTime(item.startTime,'hh:mm')}} - {{formatDateTime(item.endTime,'hh:mm')}}</view>
|
<view class="shop-header">
|
||||||
</view>
|
<image :src="item.image" mode="aspectFill" class="shop-image"></image>
|
||||||
<view class="body-right">
|
<view class="shop-info">
|
||||||
<uv-button @click="openLocation(item)">导航</uv-button>
|
<view class="shop-name">{{item.name}}</view>
|
||||||
<uv-button @click="call(item.mobile)">致电</uv-button>
|
<view class="shop-status">{{item.status_text}}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</uni-card>
|
<view class="shop-body">
|
||||||
|
<view class="info-row">
|
||||||
|
<uv-icon name="map" size="14" color="#666"></uv-icon>
|
||||||
|
<text class="distance">距离您 {{kmUnit(item.dis)}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-row" v-if="item.distance > 0">
|
||||||
|
<uv-icon name="car" size="14" color="#666"></uv-icon>
|
||||||
|
<text>配送范围 {{item.distance}}km</text>
|
||||||
|
<text class="delivery-price">配送费 ¥{{item.delivery_price}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-row no-delivery" v-else>
|
||||||
|
<uv-icon name="info-circle" size="14" color="#ff5722"></uv-icon>
|
||||||
|
<text class="no-delivery-text">外卖不配送</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-row">
|
||||||
|
<uv-icon name="home" size="14" color="#666"></uv-icon>
|
||||||
|
<text>{{item.addressMap + ' ' + item.address}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-row">
|
||||||
|
<uv-icon name="clock" size="14" color="#666"></uv-icon>
|
||||||
|
<text>营业时间 {{formatDateTime(item.startTime,'hh:mm')}} - {{formatDateTime(item.endTime,'hh:mm')}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop-footer">
|
||||||
|
<uv-button
|
||||||
|
@click.stop="openLocation(item)"
|
||||||
|
type="primary"
|
||||||
|
size="mini"
|
||||||
|
shape="circle"
|
||||||
|
class="action-btn"
|
||||||
|
>
|
||||||
|
<uv-icon name="map-fill" color="#fff" size="14"></uv-icon>
|
||||||
|
导航
|
||||||
|
</uv-button>
|
||||||
|
<uv-button
|
||||||
|
@click.stop="call(item.mobile)"
|
||||||
|
type="success"
|
||||||
|
size="mini"
|
||||||
|
shape="circle"
|
||||||
|
class="action-btn"
|
||||||
|
>
|
||||||
|
<uv-icon name="phone-fill" color="#fff" size="14"></uv-icon>
|
||||||
|
致电
|
||||||
|
</uv-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -116,18 +169,113 @@ const choice = (shop) => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.body {
|
.container {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
.body-left {
|
.search-box {
|
||||||
display: inline-block;
|
position: sticky;
|
||||||
width: 77%;
|
top: 0;
|
||||||
padding-left: 6rpx;
|
z-index: 1;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 10rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-list {
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-item {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
padding: 24rpx;
|
||||||
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&-active {
|
||||||
|
border: 2rpx solid #52ac41;
|
||||||
|
background-color: #f0f9ee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
|
.shop-image {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
}
|
}
|
||||||
.body-right {
|
|
||||||
display: inline-block;
|
.shop-info {
|
||||||
width: 20%;
|
flex: 1;
|
||||||
|
|
||||||
|
.shop-name {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-status {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #52ac41;
|
||||||
|
padding: 4rpx 12rpx;
|
||||||
|
background-color: #f0f9ee;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.shop-body {
|
||||||
|
.info-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
|
||||||
|
.uv-icon {
|
||||||
|
margin-right: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.distance {
|
||||||
|
color: #52ac41;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delivery-price {
|
||||||
|
margin-left: 16rpx;
|
||||||
|
color: #ff5722;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.no-delivery {
|
||||||
|
.no-delivery-text {
|
||||||
|
color: #ff5722;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
padding-top: 20rpx;
|
||||||
|
border-top: 2rpx solid #f5f5f5;
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
margin-left: 20rpx;
|
||||||
|
|
||||||
|
.uv-icon {
|
||||||
|
margin-right: 4rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1194,7 +1194,7 @@
|
|||||||
|
|
||||||
.cart-bar {
|
.cart-bar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 140rpx;
|
bottom: 100rpx;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: calc(100% - 80rpx);
|
width: calc(100% - 80rpx);
|
||||||
height: 100rpx;
|
height: 100rpx;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user