wangxiaowei/jianbing-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善页面

Browse Source
This commit is contained in:
wangxiaowei
2025-04-30 16:48:11 +08:00
parent f3990f76ef
commit 012c20271c
61 changed files with 13484 additions and 3407 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
components/appointment-time/appointment-time.vue
View File

@ -1,159 +0,0 @@
<template>
<view>
<u-popup v-model="showPop" mode="bottom" border-radius="16" :safe-area-inset-bottom="true" :closeable="true">
<view class="appointment-time">
<view class="bold-700 lg u-p-t-24 u-p-b-24 u-text-center">选择预约时间</view>
<view class="block row" style="height: 700rpx;">
<view class="aside">
<scroll-view style="height: 100%;" scroll-y="true" scroll-with-animation="true">
<view style="padding-bottom: 200rpx;">
<block v-for="(item, index) in cateList" :key="index">
<view :class="'one-item sm ' + (index == selectIndex ? 'active bg-white' : '')" @click="changeActive(index)">
<text class="name">{{ item.name }}</text>
<view v-if="index == selectIndex" class="active-line bg-default"></view>
</view>
</block>
</view>
</scroll-view>
</view>
<view class="main">
<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true">
<view class="main-wrap u-m-t-32">
<view class="bg-white br16 row u-col-top u-m-b-24" v-for="(item, index) in 20" :key="index">
<view>9：00 - 9：30</view>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import {getCatrgory} from '@/api/store'
export default {
name: "appointment-time",
props: {
value: {
type: Boolean,
required: true
}
},
data() {
return {
mobile: '',
selectIndex: 0,
cateList: []
};
},
created() {
this.getCatrgoryFun()
},
methods: {
getCatrgoryFun() {
getCatrgory().then(res => {
if (res.code == 1) {
this.cateList = res.data
}
});
},
changeActive(index) {
const {cateList} = this
this.selectIndex = index
},
// 提交数据
handleSubmit(e) {
const {mobile} = this
if (!mobile) return this.$toast({
title: '请授权手机号'
})
this.$emit('update', {
mobile
})
this.showPop = false
this.$emit('close')
},
// 关闭弹窗
onClose() {
this.showPop = false
this.$emit('close')
}
},
computed: {
showPop: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
}
}
}
};
</script>
<style lang="scss">
.appointment-time {
height: 800rpx;
max-height: 800rpx;
}
.block {
height: 100vh;
}
.aside {
width: 180rpx;
flex: none;
height: 100%;
background-color: #fdfdfd;
.one-item {
position: relative;
text-align: center;
height: 108rpx;
line-height: 108rpx;
&.active {
color: $-color-theme;
font-size: 26rpx;
font-weight: bold;
}
.active-line {
position: absolute;
width: 6rpx;
height: 30rpx;
left: 4rpx;
top: 50%;
transform: translateY(-50%);
}
}
}
.main {
height: 100%;
flex: 1;
.main-wrap {
position: relative;
padding: 0 20rpx;
.goods {
padding-bottom: 200rpx;
.info {
width: 100%;
display: flex;
justify-content: space-between;
margin: 0 16rpx;
}
}
}
}
</style>

256
components/cate-one/cate-one.vue
View File

@ -1,256 +0,0 @@
<template>
<view class="cate">
<view class="cate-one row">
<view class="aside">
<scroll-view style="height: 100%;" scroll-y="true" scroll-with-animation="true">
<view style="padding-bottom: 200rpx;">
<block v-for="(item, index) in cateList" :key="index">
<view :class="'one-item sm ' + (index == selectIndex ? 'active bg-white' : '')" @click="changeActive(index)">
<text class="name">{{ item.name }}</text>
<view v-if="index == selectIndex" class="active-line bg-default"></view>
</view>
</block>
</view>
</scroll-view>
</view>
<view class="main">
<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true" @scrolltolower="getGoodsSearchFun">
<view class="main-wrap">
<view class="goods">
<view class="u-m-t-32 bold-600">{{cateName}}</view>
<view class="u-m-t-32">
<view class="bg-white br16 row u-col-top u-m-b-24" v-for="(item, index) in 10" :key="index" @click="toShop()">
<view>
<u-image :src="cloudPath + 'img/banner.png'" width="136" height="136" border-radius="16"></u-image>
</view>
<view class="info">
<view>
<view class="u-line-2 u-p-t-10">葱烩海鲜卷边披萨</view>
<view class="u-p-t-44 row-between">
<view class="row">
<view class="primary">
<price-format :price="12.9" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
</view>
<view class="u-m-l-8">
<price-format :lineThrough="true" color="#C0C0C0" :subscriptSize="22" :firstSize="22" :secondSize="22" :price="16.9"></price-format>
</view>
</view>
</view>
</view>
<view class="column-end">
<u-icon name="plus-circle-fill" color="#254062" size="48"></u-icon>
</view>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
<view class="buy mx40 px40 br60 row-between">
<view class="row">
<view class="u-relative">
<u-image :src="cloudPath + 'img/icon_cart.png'" width="56" height="56"></u-image>
<u-badge type="error" count="7" :absolute="true" offset="[0, 0]"></u-badge>
</view>
<view class="text-fff u-m-l-32">未选购商品</view>
</view>
<view class="text-999">去结算</view>
</view>
<!-- 购物车 -->
<u-popup v-model="showCart" mode="bottom" :border-radius="16">
<view style="max-height: 800rpx;">
<view class="px20 text-999 mt20">
温馨提示：请适量点餐
</view>
<view>
<scroll-view style="height: 700rpx;" scroll-y="true" scroll-with-animation="true">
<view class="row-start u-row-between u-p-t-20 u-padding-bottom-20 px20" v-for="(item, index) in 20" :key="index">
<view class="row-start">
<view>
<u-image :src="cloudPath + 'img/banner.png'" width="136" height="136" border-radius="16"></u-image>
</view>
<view class="ml20">
<view class="u-line-2 u-p-t-10">葱烩海鲜卷边披萨</view>
<view class="primary u-p-t-40">
<price-format :price="12.9" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
</view>
</view>
</view>
<view>
<view class="u-text-right">
<u-icon class="u-p-t-10" name="trash" size="32"></u-icon>
</view>
<view class="u-p-t-30">
<u-number-box min="1" v-model="numberVal" @change="changeNumber"></u-number-box>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</u-popup>
<shop-spec v-model="showSpec" @close="showSpec = false"></shop-spec>
</view>
</template>
<script>
export default {
name: "cate-one",
props: {
list: {
type: Array,
default: () => ([])
}
},
data() {
return {
selectIndex: 0,
cateList: [],
cateName: '',
numberVal: 1,
showCart: false,
showSpec: false,
}
},
methods: {
changeActive(index) {
const {cateList} = this
this.selectIndex = index
this.cateName = cateList[index].name
// this.onRefresh()
},
async getGoodsSearchFun() {
// let {
// page,
// goodsList,
// priceSort,
// saleSort,
// status,
// cateList,
// selectIndex
// } = this;
// const item = cateList[selectIndex]
// if(item.type == 0) return
// if (status == loadingType.FINISHED) return;
// const params = {
// category_id: item.id,
// page_no: page,
// price: priceSort,
// sales_sum: saleSort
// }
// const data = await loadingFun(getGoodsSearch, page, goodsList, status, params)
// if (!data) return
// this.page = data.page
// this.goodsList = data.dataList
// this.status = data.status
},
changeNumber() {
},
// 跳转商品详情页
toShop() {
uni.navigateTo({
url: '/pages/shop/shop'
})
}
},
watch: {
list: {
handler(val) {
if(!val.length) return
let index = val.findIndex((item) => item.type == 1)
this.selectIndex = index == -1 ? 0 : index
this.cateName = val[this.selectIndex].name
this.cateList = val
this.cateTwoList = val[this.selectIndex] ? val[this.selectIndex].sons : []
this.getGoodsSearchFun()
}
}
},
}
</script>
<style lang="scss">
page {
padding-bottom: 0;
}
$header-height: 94rpx;
.cate {
position: relative;
}
.cate-one {
height: 100vh;
.aside {
width: 180rpx;
flex: none;
height: 100%;
background-color: #F7F8FA;
.one-item {
position: relative;
text-align: center;
height: 108rpx;
line-height: 108rpx;
&.active {
color: $-color-theme;
font-size: 26rpx;
font-weight: bold;
}
.active-line {
position: absolute;
width: 6rpx;
height: 30rpx;
left: 4rpx;
top: 50%;
transform: translateY(-50%);
}
}
}
.main {
background-color: #FFFAFB;
height: 100%;
flex: 1;
.main-wrap {
position: relative;
padding: 0 20rpx;
.goods {
padding-bottom: 200rpx;
.info {
width: 100%;
display: flex;
justify-content: space-between;
margin: 0 16rpx;
}
}
}
}
}
.buy {
position: fixed;
left: 0;
right: 0;
bottom: env(safe-area-inset-bottom);
height: 100rpx;
background-color: #212526;
}
</style>

111
components/mobile-login/mobile-login.vue
View File

@ -1,111 +0,0 @@
<template>
<view>
<u-popup v-model="showPop" mode="bottom" border-radius="16" :safe-area-inset-bottom="true"
:maskCloseAble="false">
<view class="popup-content">
<view class="u-font-xl bold-600">
获取您的手机号码
</view>
<view class="popup-form">
<form @submit="handleSubmit">
<view class="u-flex u-row-between avatar u-m-t-80">
<text>手机号码</text>
<view class="u-flex u-row-between flex1 u-m-l-30">
<button style="border: none;" class="u-flex u-row-between w-full" hover-class="none"
open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
<view v-if="mobile">{{mobile}}</view>
<view v-else="!mobile">点击授手机号</view>
<u-icon name="arrow-right" color="#9F9EA4" size="32"></u-icon>
</button>
</view>
</view>
<button class="submit-btn bg-primary" form-type="submit">
确定
</button>
<view class="text-default u-text-center close-btn" @tap="onClose">
暂不登录
</view>
</form>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
name: "mobile-login",
props: {
value: {
type: Boolean,
required: true
}
},
data() {
return {
mobile: ''
};
},
methods: {
onGetPhoneNumber(e) {
if (e.detail.errMsg === "getPhoneNumber:ok") {
// 这里需要解密手机号
this.mobile = 110
}
},
// 提交数据
handleSubmit(e) {
const {mobile} = this
if (!mobile) return this.$toast({
title: '请授权手机号'
})
this.$emit('update', {
mobile
})
this.showPop = false
this.$emit('close')
},
// 关闭弹窗
onClose() {
this.showPop = false
this.$emit('close')
}
},
computed: {
showPop: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
}
}
}
};
</script>
<style lang="scss">
.popup-content {
padding: 40rpx 40rpx 60rpx;
.submit-btn {
margin-top: 80rpx;
background-color: #254062;
padding: 6rpx 0;
border-radius: 100rpx;
color: #fff;
}
.close-btn {
margin-top: 20rpx;
border: 1px solid #254062;
padding: 20rpx 0;
border-radius: 100rpx;
}
}
</style>

145
components/mplogin/mplogin.vue
View File

@ -1,145 +0,0 @@
<template>
<view>
<u-popup v-model="showPop" mode="bottom" border-radius="16" :safe-area-inset-bottom="true"
:maskCloseAble="false">
<view class="popup-content">
<view class="u-font-xl bold-600">
获取您的昵称和头像
</view>
<view class="popup-form">
<form @submit="handleSubmit">
<view class="u-flex u-row-between avatar u-m-t-80">
<text>头像</text>
<view class="u-flex u-row-between flex1 u-m-l-30">
<button style="border: none;" class="u-flex u-row-between w-full" hover-class="none"
open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<u-image v-if="avatar" :src="avatar" width="100rpx" height="100rpx"shape="circle"></u-image>
<view v-else="!avatar">点击授权头像</view>
<u-icon name="arrow-right" color="#9F9EA4" size="32"></u-icon>
</button>
</view>
</view>
<view class="u-flex u-row-between avatar u-m-t-60">
<text>昵称</text>
<view class="u-flex u-row-between flex1 u-m-l-30">
<input
:value="nickname"
name="nickname"
type="nickname"
placeholder="请输入昵称"
placeholder-style="color: #000;"
/>
<u-icon name="arrow-right" color="#9F9EA4" size="32"></u-icon>
</view>
</view>
<button class="submit-btn bg-primary" form-type="submit">
确定
</button>
<view class="text-default u-text-center close-btn" @tap="onClose">
暂不登录
</view>
</form>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import {
uploadFile
} from "@/utils/tools";
export default {
name: "mplogin",
props: {
value: {
type: Boolean,
required: true
}
},
data() {
return {
avatar: '',
nickname: ''
};
},
methods: {
// 头像选择
onChooseAvatar(e) {
const avatarUrl = e.detail.avatarUrl;
if (!avatarUrl) {
return;
}
uni.showLoading({
title: "正在上传中...",
mask: true,
});
uploadFile(avatarUrl).then((res) => {
uni.hideLoading();
this.avatar = res.url;
}).catch(() => {
uni.hideLoading();
this.$toast({title: "上传失败"});
});
},
// 提交数据
handleSubmit(e) {
const {nickname} = e.detail.value
const {avatar} = this
if (!avatar) return this.$toast({
title: '请添加头像'
})
if (!nickname) return this.$toast({
title: '请输入昵称'
})
this.$emit('update', {
avatar,
nickname
})
this.showPop = false
this.$emit('close')
},
// 关闭弹窗
onClose() {
this.showPop = false
this.$emit('close')
}
},
computed: {
showPop: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
}
}
}
};
</script>
<style lang="scss">
.popup-content {
padding: 40rpx 40rpx 60rpx;
.submit-btn {
margin-top: 80rpx;
background-color: #254062;
padding: 6rpx 0;
border-radius: 100rpx;
color: #fff;
}
.close-btn {
margin-top: 20rpx;
border: 1px solid #254062;
padding: 20rpx 0;
border-radius: 100rpx;
}
}
</style>

86
components/order-list/order-list.vue
View File

@ -1,86 +0,0 @@
<template>
<view>
<view class="bg-white br16 px20 u-p-t-20 u-p-b-20 u-m-b-24">
<view>
<navigator hover-class="none" url="/pages/order_details/order_details?type=0">
<view class="row-between">
<view>煎饼果子套餐</view>
<view class="text-999">待付款</view>
<!-- <view class="text-999">已完成</view>
<view class="text-999">退款</view>
<view class="primary" >未制作</view>
<view class="primary" >未取餐</view> -->
</view>
<view class="u-m-t-16 row">
<view>
<u-image :src="cloudPath + 'img/banner.png'" width="124" height="124" border-radius="16"></u-image>
</view>
<view class="sm ml20 text-999">
<view>下单时间:2024-10-10 16:58:53</view>
<view>预计时间:2025-10-10 16:58:54</view>
<view>数量:1</view>
<view>实付:￥0.00</view>
</view>
</view>
<view class="u-m-t-26 u-m-b-26">
<u-line color="#EEE" />
</view>
</navigator>
</view>
<view class="u-m-t-26 row-between">
<view class="primary">等待时间:15分钟</view>
<view class="row">
<view class="u-m-r-16">
<u-button @click="cancleOrder" hover-class="none" :customStyle="{width: '164rpx', height: '60rpx', color: '#999', border: '1px solid #DDD'}" :plain="true" :hair-line="false" shape="circle">取消订单</u-button>
</view>
<view>
<u-button @click="toPay" hover-class="none" :customStyle="{width: '164rpx', height: '60rpx', backgroundColor: themeColor, color: '#fff', border: 'none'}" :hair-line="false" shape="circle">去付款</u-button>
</view>
<!-- <view>
<u-button @click="seeDetails" hover-class="none" :customStyle="{width: '164rpx', height: '60rpx', backgroundColor: themeColor, color: '#fff', border: 'none'}" :hair-line="false" shape="circle">查看详情</u-button>
</view>
<view>
<u-button @click="toRefund" hover-class="none" :customStyle="{width: '164rpx', height: '60rpx', backgroundColor: themeColor, color: '#fff', border: 'none'}" :hair-line="false" shape="circle">查看详情</u-button>
</view> -->
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'order-list',
props: {
type: {
type: String,
default: 'all'
}
},
methods: {
// 取消订单
cancleOrder() {
},
// 去付款
toPay() {
},
// 查看详情
seeDetails() {
},
// 申请退款
toRefund() {
}
}
}
</script>
<style lang="scss">
</style>

18
components/shop-spec/shop-spec.vue
View File

@ -16,7 +16,7 @@
</view>
<view>
<view class="attr nr u-m-t-20 u-m-b-20">口味</view>
<view class="attr nr u-m-t-52 u-m-b-20">口味</view>
<view class="row wrap">
<view class="attr-list">要葱</view>
<view class="attr-list">要香菜</view>
@ -26,7 +26,7 @@
</view>
<view>
<view class="attr nr u-m-t-20 u-m-b-20">口味</view>
<view class="attr nr u-m-t-52 u-m-b-20">口味</view>
<view class="row wrap">
<view class="attr-list">要葱</view>
<view class="attr-list">要香菜</view>
@ -40,10 +40,10 @@
<view class="mt20">
<view class="u-m-l-40">已选规格：</view>
<view class="row u-row-center mt20">
<view class="w-40 mr10">
<u-button @click="mobileLogin" hover-class="none" :customStyle="{color: themeColor, border: '1px solid ' + themeColor, padding: '16rpx 0'}" :plain="true" :hair-line="false" shape="circle">取消</u-button>
<view class="w-30 u-m-r-25">
<u-button @click="mobileLogin" hover-class="none" :customStyle="{color: '#000', border: '1px solid #000', padding: '16rpx 0'}" :plain="true" :hair-line="false" shape="circle">取消</u-button>
</view>
<view class="w-40 ml10">
<view class="w-30 u-m-l-25">
<u-button @click="mpLogin" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">确定</u-button>
</view>
</view>
@ -112,12 +112,12 @@
}
.active {
border: 2rpx solid #254062;
color: #254062;
border: 2rpx solid #FE6004;
color: #FE6004;
}
.w-40 {
width: 40%;
.w-30 {
width: 30%;
}
}
</style>