Augcl
/
teambuy-front
generated from hly/uniapp-shop-templates
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

1.5.3 完成购物车界面

hfll
hflllll 1 month ago
parent
3a982526b2
commit
7faec45a80
12 changed files with 1547 additions and 988 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      components/base/navbar.vue
  2. +316
    -260
      pages/index/cart.vue
  3. +0
    -587
      pages/index/center.vue
  4. +294
    -0
      pages/index/oldCart.vue
  5. +582
    -0
      pages/index/oldCenter.vue
  6. +9
    -52
      pages/index/order.vue
  7. +77
    -23
      pages_order/components/order/MemberFoodItem.vue
  8. +11
    -62
      pages_order/order/groupMealDetail.vue
  9. +1
    -1
      pages_order/order/newOrderDetail.vue
  10. +38
    -0
      static/js/mockCartData.js
  11. +217
    -2
      static/js/mockOrders.js
  12. +1
    -0
      uni.scss

+ 1
- 1
components/base/navbar.vue View File

@ -69,7 +69,7 @@
}, },
bgColor : { bgColor : {
default : '#fff'
default: '#019245'
}, },
color : { color : {
default : '#333' default : '#333'


+ 316
- 260
pages/index/cart.vue View File

@ -1,297 +1,353 @@
<template> <template>
<view class="page"> <view class="page">
<navbar/>
<navbar></navbar>
<text class="control-text" @click="isManaged = !isManaged">{{ isManaged ? '退出管理' : '管理' }}</text>
<view class="user">
<uv-checkbox-group
shape="circle"
v-model="checkboxValue">
<uv-swipe-action>
<view
v-for="(item, index) in list"
:key="item.id">
<view style="margin-top: 20rpx;"></view>
<uv-swipe-action-item
@click="e => deleteCart(e, item)"
:options="options">
<view class="item">
<view class="checkbox">
<uv-checkbox
:name="item.id"
activeColor="#eb3300"
size="40rpx"
icon-size="35rpx"
></uv-checkbox>
</view>
<image
class="image"
:src="item.image &&
item.image.split(',')[0]"
mode=""></image>
<view class="info">
<view class="title">
<view class="">
{{ item.title }}
</view>
</view>
<view class="unit">
规格：{{ item.sku }}
<!-- <uv-icon name="arrow-down"></uv-icon> -->
<view class="cart-items">
<uv-checkbox-group shape="circle" v-model="checkboxValue" @change="toggleSelect">
<view v-for="(item, index) in cartData.items" :key="item.id" class="cart-item">
<view class="checkbox">
<uv-checkbox :key="index" :name="item.id" size="40rpx" iconSize="35rpx" activeColor="#019245" />
</view>
<view class="item-content">
<image class="food-image" :src="item.image" mode="aspectFill" />
<view class="food-info">
<text class="food-name">{{ item.name }}</text>
<view class="food-sold">
<uv-icon name="checkmark-circle" color="#ccc" size="24rpx"></uv-icon>
<text>已售出 {{ item.sold }}单</text>
</view>
<view class="food-price-row">
<text class="food-price">
<text style="font-size: 22rpx; margin-right: 6rpx;">¥</text>
{{ item.price.toFixed(1) }}
</text>
<view class="number-box">
<view class="number-btn minus" @tap="decreaseQuantity(item)">
<text>-</text>
</view> </view>
<view
style="display: flex;
justify-content: space-between;
align-items: center;">
<view class="price">
￥<text>{{ item.price }}</text>元
</view>
<view class="">
<uv-number-box v-model="item.num"
@change="e => valChange(item, e)"></uv-number-box>
</view>
<text class="number-value">{{ item.quantity }}</text>
<view class="number-btn plus" @tap="increaseQuantity(item)">
<text>+</text>
</view> </view>
</view> </view>
</view> </view>
</uv-swipe-action-item>
</view>
</uv-swipe-action>
</uv-checkbox-group>
<uv-empty
v-if="list.length == 0"
text="空空如也"
textSize="30rpx"
iconSize="200rpx"
icon="list"></uv-empty>
<view class="action">
<view class="icon">
<image src="/static/image/cart/1.png" mode=""></image>
<view class="num">
{{ checkboxValue.length }}
</view>
</view>
<view class="price">
<view class="count">
合计
<view class="">
￥<text>{{ totalPrice }}</text>
</view> </view>
</view> </view>
<view class="text">
共{{ checkboxValue.length }}件，已享受更低优惠
</view>
</view> </view>
<view class="btn"
@click="submit">
去结算
</uv-checkbox-group>
<uv-empty mode="car" style="padding-top: 300rpx;" v-if="!cartData.items.length"
text="购物车空空如也~" />
</view>
<view class="cart-footer">
<view class="select-all">
<uv-checkbox-group v-model="allCheckbox">
<uv-checkbox size="40rpx" iconSize="35rpx" activeColor="#019245" shape="circle" name="all"
@change="toggleSelectAll" />
</uv-checkbox-group>
<text>全选</text>
</view>
<view class="cart-total">
<text v-if="!isManaged" style="font-size: 24rpx; color: #999;">已选{{ cartData.selectedCount }}个，</text>
<text v-if="!isManaged">合计</text>
<text v-if="!isManaged" class="total-price">¥{{ (cartData.totalPrice).toFixed(1) }}</text>
<view v-if="isManaged" class="checkout-btn checkbox-collect" @tap="addCollect">
<text>添加收藏</text>
</view> </view>
</view> </view>
<view v-if="!isManaged" class="checkout-btn checkbox-primary" @tap="checkout">
<text>去下单</text>
</view>
<view v-if="isManaged" class="checkout-btn checkbox-primary" @tap="deleteCart">
<text>删除</text>
</view>
</view> </view>
<tabber select="cart" /> <tabber select="cart" />
</view> </view>
</template> </template>
<script> <script>
import tabber from '@/components/base/tabbar.vue'
import mixinsList from '@/mixins/list.js'
export default {
mixins : [mixinsList],
components: {
tabber,
},
data() {
return {
value : 0,
checkboxValue : [],
options: [
{
text: '删除',
style: {
backgroundColor: '#f40'
}
},
],
mixinsListApi : 'getCartPageList',
import tabber from '@/components/base/tabbar.vue'
import { mockCartData } from '@/static/js/mockCartData.js'
import navbar from '@/components/base/navbar.vue'
export default {
components: {
tabber,
navbar
},
data() {
return {
cartData: mockCartData,
checkboxValue: [],
isManaged: false
}
},
computed: {
allSelected() {
return this.cartData.items.every(item => this.checkboxValue.includes(item.id))
},
// 全选的值
allCheckbox(){
return this.allSelected ? ['all'] : []
}
},
methods: {
toggleSelect(item) {
this.updateCart();
},
toggleSelectAll() {
if (this.allSelected){
this.checkboxValue = []
}else{
this.checkboxValue = this.cartData.items.map(item => item.id)
} }
},
computed: {
totalPrice(){
if (!this.checkboxValue.length) {
return 0
this.updateCart();
},
increaseQuantity(item) {
item.quantity += 1;
this.updateCart();
},
decreaseQuantity(item) {
if (item.quantity > 1) {
item.quantity -= 1;
this.updateCart();
}
},
updateCart() {
// 计算选中的商品数量
this.cartData.selectedCount = this.checkboxValue.length;
// 计算总价
this.cartData.totalPrice = this.cartData.items.reduce((total, item) => {
if (this.checkboxValue.includes(item.id)){
total += item.price * item.quantity
} }
let price = 0
this.list.forEach(n => {
if(this.checkboxValue.includes(n.id)){
price += n.price * n.num
}
return total
}, 0)
},
// 结账
checkout() {
// const selectedItems = this.cartData.items.filter(item => item.selected);
if (this.checkboxValue.length === 0) {
uni.showToast({
title: '请选择商品',
icon: 'none'
});
return;
}
// 跳转到创建订单页面
uni.navigateTo({
url: '/pages_order/order/newOrderDetail?status=pending'
});
},
// 添加收藏
addCollect(){
if (!this.checkboxValue.length) {
uni.showToast({
title: '请选择商品',
icon: 'none'
});
return;
}
uni.showLoading({
title: '添加收藏中...'
})
setTimeout(() => {
uni.hideLoading()
uni.showToast({
title: '添加收藏成功',
}) })
return price
},
// 编写收藏函数的调用
}, 800)
}, },
methods: {
valChange(item, e) {
this.$api('updateCartNum', {
id: item.id,
num: e.value,
})
},
// 立即下单
submit(){
if(this.checkboxValue.length == 0){
uni.showToast({
title: '请选择商品',
icon: 'none',
})
return
}
let arr = []
this.list.forEach(n => {
if(this.checkboxValue.includes(n.id)){
arr.push(n)
}
})
this.$store.commit('setPayOrderProduct', arr)
// 删除购物车
deleteCart(){
if (!this.checkboxValue.length) {
uni.showToast({
title: '请选择商品',
icon: 'none'
});
this.$utils.navigateTo('/pages_order/order/createOrder')
},
deleteCart(e, item){
this.$api('deleteCart', {
ids : item.id
}, res => {
this.getData()
return;
}
uni.showLoading({
title: '删除中...'
})
setTimeout(() => {
uni.hideLoading()
uni.showToast({
title: '删除成功',
}) })
},
this.cartData.items = this.cartData.items.filter(item => !this.checkboxValue.includes(item.id))
this.checkboxValue = []
this.updateCart()
// 编写删除函数的调用
}, 800)
} }
}
}
}
</script> </script>
<style scoped lang="scss">
.page {
padding-bottom: 200rpx;
/deep/ .uv-swipe-action{
<style lang="scss" scoped>
.page {
// background-color: #f5f5f5;
padding-bottom: 120rpx;
position: relative;
.cart-items {
.cart-item {
width: 100%; width: 100%;
}
}
.user {
.item{
background-color: #fff;
display: flex;
align-items: center;
background-color: #fff;
padding: 20rpx;
margin-bottom: 20rpx;
border-radius: 10rpx;
.checkbox {
margin-right: 20rpx;
display: flex;
align-items: center;
}
.item-content {
flex: 1;
display: flex;
.food-image {
width: 150rpx;
height: 150rpx;
margin-right: 20rpx;
}
.food-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
.food-name {
font-size: 28rpx;
margin-bottom: 10rpx;
font-weight: 500;
}
.food-sold {
display: flex;
align-items: center;
font-size: 24rpx;
color: $uni-color-third;
margin-bottom: 10rpx;
}
.food-price-row {
display: flex;
justify-content: space-between;
align-items: center;
.food-price {
color: #ff0000;
font-size: 32rpx;
}
.number-box {
display: flex;
align-items: center;
border-radius: 28rpx;
margin-right: 20rpx;
contain: content;
border: 2rpx solid $uni-color-third;
.number-btn {
width: 50rpx;
height: 50rpx;
display: flex;
justify-content: center;
align-items: center;
}
.number-value {
width: 50rpx;
height: 50rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
border-left: 2rpx solid $uni-color-third;
border-right: 2rpx solid $uni-color-third;
}
}
}
}
}
}
}
.cart-footer {
position: fixed;
bottom: 120rpx;
left: 0;
width: 100%;
height: 100rpx;
background-color: #fff;
display: flex;
align-items: center;
padding: 0 20rpx;
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
box-sizing: border-box;
.select-all {
display: flex; display: flex;
padding: 30rpx;
.checkbox{
display: flex;
justify-content: center;
align-items: center;
}
.image{
width: 200rpx;
height: 200rpx;
border-radius: 20rpx;
align-items: center;
font-size: 28rpx;
text {
margin-left: 10rpx;
} }
.info{
flex: 1;
.title{
display: flex;
padding: 10rpx 20rpx;
justify-content: space-between;
}
.unit{
font-size: 24rpx;
padding: 10rpx 20rpx;
color: #717171;
display: flex;
align-items: center;
}
.price{
color: $uni-color;
font-size: 28rpx;
padding: 10rpx 20rpx;
text{
font-size: 36rpx;
font-weight: 900;
}
}
}
.cart-total {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 28rpx;
margin-right: 20rpx;
// background-color: red;
.total-price {
color: #ff0000;
font-size: 32rpx;
font-weight: bold;
margin-left: 10rpx;
} }
} }
.action{
width: 700rpx;
position: fixed;
bottom: 220rpx;
left: 25rpx;
background-color: #fff;
height: 100rpx;
border-radius: 50rpx;
box-shadow: 0 0 6rpx 6rpx #00000010;
.checkout-btn {
width: 200rpx;
height: 60rpx;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
overflow: hidden;
z-index: 999;
.icon{
position: relative;
width: 80rpx;
height: 80rpx;
margin: 0 20rpx;
image{
width: 80rpx;
height: 80rpx;
}
.num{
position: absolute;
right: 10rpx;
top: 0rpx;
background-color: $uni-color;
color: #fff;
font-size: 18rpx;
border-radius: 50%;
height: 30rpx;
width: 30rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
.price{
.count{
display: flex;
font-size: 26rpx;
align-items: center;
view{
color: $uni-color;
margin-left: 10rpx;
text{
font-size: 32rpx;
font-weight: 900;
}
}
}
.text{
font-size: 20rpx;
color: #717171;
}
}
.btn{
margin-left: auto;
background-color: $uni-color;
height: 100%;
padding: 0 50rpx;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
border-radius: 35rpx;
font-size: 28rpx;
}
.checkbox-primary{
background-color: #019245;
color: #fff;
} }
.checkbox-collect{
color: $uni-color;
background-color: $uni-color-fourth;
}
}
.control-text{
position: absolute;
right: 150rpx;
top: 60rpx;
font-size: 26rpx;
color: #fff;
z-index: 10000;
} }
</style>
}
</style>

+ 0
- 587
pages/index/center.vue View File

@ -1,587 +0,0 @@
<template>
<view class="page">
<!-- 导航栏 -->
<navbar title="个人中心"
leftClick
@leftClick="$utils.navigateBack"
bgColor="#E3441A" color="#fff" />
<!-- 头部 -->
<view class="head">
<view class="headImage">
<image :src="userInfo.headImage" mode="aspectFill"></image>
</view>
<view class="user-info">
<view class="user-base-info">
<view class="user-base-top">
<view class="user-name">{{ userInfo.nickName}}</view>
<view class="member-level">
<image v-if="userInfo.role == 1" :src="configList.vip_user" mode="aspectFill" class="level">
</image>
<image v-if="userInfo.role == 2" src="@/static/image/center/gold-min.png" mode="aspectFill"
class="level">
</image>
<image v-if="userInfo.role == 3" src="@/static/image/center/sliver-min.png"
mode="aspectFill" class="level">
</image>
</view>
<view class="user-tag">
{{ userRole[userInfo.isPay] }}
</view>
</view>
<view class="edit-user"
@click="$utils.navigateTo('/pages_order/mine/updateUser?back=true')">
<image src="@/static/image/center/edit-icon.png" mode="aspectFill" class="edit-icon"></image>
<view class="edit-btn">
修改资料
</view>
</view>
</view>
<view class="user-phone">
手机号:{{ userInfo.phone }}
</view>
</view>
</view>
<!-- 会员卡片 -->
<view @click="$utils.navigateTo({url : '/pages_order/mine/memberCenter' })"
v-if="userInfo.role != 0"
class="earnings">
<view v-if="index + 1 == userInfo.role" v-for="(item,index) in vipList" :key="item.id" class="member-item">
<image :src="item.headImage" mode="aspectFill" class="member-image"></image>
<view class="member-info">
<view class="profile-photo">
<image :src="userInfo.headImage" mode="aspectFill" class="pro-img"></image>
<view class="open-status">
开通时间：{{ riceInfo.openTime }}
</view>
</view>
<view class="open">
</view>
</view>
</view>
</view>
<!-- 佣金数据 -->
<view @click="$utils.navigateTo('/pages_order/mine/withdraw')" class="brokerage-data"
:class="{'brokerage-data-mt' : !userInfo.role}">
<view class="brokerage">
<image :src="configList.money_image" mode="aspectFill" class="brokerage-img"></image>
<div class="main">
<div class="title">我的佣金</div>
<div class="money">￥{{ riceInfo.canWithdraw || 0 }}</div>
</div>
</view>
<view class="balance">
<image :src="configList.price_image" mode="aspectFill" class="balance-img"></image>
<div class="main">
<div class="title">我的余额</div>
<div class="money">￥{{ riceInfo.balance || 0 }}</div>
</div>
</view>
</view>
<!-- 我的服务 -->
<view class="myServer">
<view class="server-title">
我的服务
</view>
<view class="box">
<view class="boxs" @click="$utils.navigateTo('/pages/index/order?type=0')">
<image src="@/static/image/center/1.png" mode="aspectFill" />
<view class="title">我的订单</view>
</view>
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/partner')">
<image src="@/static/image/center/2.png" mode="aspectFill" />
<view class="title">我的团队</view>
</view>
<view class="boxs" @click="$utils.navigateTo('/pages_order/home/contact')">
<image src="@/static/image/center/3.png" mode="aspectFill" />
<view class="title">联系客服</view>
</view>
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/promotion')">
<image src="@/static/image/center/4.png" mode="aspectFill" />
<view class="title">邀请好友</view>
</view>
</view>
<view class="box">
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/recruit')">
<image src="@/static/image/center/5.png" mode="aspectFill" />
<view class="title">合伙人招募</view>
</view>
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/memberCenter')">
<image src="@/static/image/center/6.png" mode="aspectFill" />
<view class="title">会员权益</view>
</view>
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/coupon')">
<image src="@/static/image/center/7.png" mode="aspectFill" />
<view class="title">优惠券</view>
</view>
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/help')">
<image src="@/static/image/center/8.png" mode="aspectFill" />
<view class="title">帮助与反馈</view>
</view>
</view>
<view class="box">
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/address')">
<image src="@/static/image/center/address.png" mode="aspectFill" />
<view class="title">我的地址</view>
</view>
<view class="boxs" @click="$utils.navigateTo('/pages_order/order/giftList')">
<image src="@/static/image/center/9.png" mode="aspectFill" />
<view class="title">礼包列表</view>
</view>
<view class="boxs" @click="logout">
<image src="@/static/image/center/logout.png" mode="aspectFill" />
<view class="title">退出登录</view>
</view>
</view>
</view>
<!-- 广告 -->
<div v-if="showAdvertising" class="ad"
@click="$utils.navigateTo('/pages_order/mine/recruit')">
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="true" :interval="2000"
:duration="duration">
<swiper-item v-for="(item, index) in adList" :key="index">
<view class="swiper-main">
<view @click="closeAdvertising" class="close">
<image src="@/static/image/center/close.png" mode="aspectFill" class="close-img"></image>
</view>
<image :src="item" mode="aspectFill" class="swiper-main-img"></image>
<div class="ad-tag">
<image src="@/static/image/center/ad-tag.png" mode="aspectFill" class="ad-tag-img"></image>
</div>
</view>
</swiper-item>
</swiper>
</div>
<customerServicePopup ref="customerServicePopup" />
<tabber select="center" />
</view>
</template>
<script>
import tabber from '@/components/base/tabbar.vue'
import {
mapState
} from 'vuex'
import customerServicePopup from '@/components/config/customerServicePopup.vue'
export default {
components: {
tabber,
customerServicePopup,
},
computed: {
...mapState(['riceInfo']),
adList() {
let arr = [];
if (this.configList?.shop_get_image) {
arr = this.configList?.shop_get_image?.split(',')
}
return arr
}
},
data() {
return {
vipType: ['普通会员', '黄金会员', '渠道商'],
vipImage: ['vip_vip', 'vip_user', 'vip_shop'],
vipList: [],
showAdvertising: true,
userRole: ['会员', '用户', '渠道'],
indicatorDots: true,
duration: 500
}
},
onShow() {
this.$store.commit('getUserInfo')
this.$store.commit('getRiceInfo')
this.getMemberCardData();
},
methods: {
clickNo() {
uni.showModal({
title: '暂未开放',
})
},
logout(){
uni.showModal({
title: '确认退出登录吗',
success : (r) => {
if (r.confirm) {
this.$store.commit('logout', true)
}
}
})
},
//关闭广告
closeAdvertising() {
this.showAdvertising = false;
},
//获取会员卡片数据
getMemberCardData() {
this.$api('getRiceVipList', res => {
if (res.code == 200) {
this.vipList = res.result
}
})
}
}
}
</script>
<style scoped lang="scss">
.page {
// 头部
.head {
display: flex;
align-items: center;
padding: 60rpx 20rpx 120rpx 20rpx;
background: $uni-color;
.headImage {
width: 130rpx;
height: 130rpx;
background-image: url(/static/image/center/head-img.png);
background-repeat: no-repeat;
background-position: 50%, 50%;
background-size: 100%;
overflow: hidden;
border-radius: 50%;
margin-right: 20rpx;
image {
width: 100%;
height: 100%;
}
}
.user-info {
width: calc(100% - 130rpx);
.user-base-info {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.user-base-top {
width: 65%;
display: flex;
align-items: center;
flex-wrap: wrap;
color: white;
.user-name {
max-width: calc(100% - 240rpx);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 34rpx;
}
.member-level {
margin-left: 10rpx;
.level {
width: 120rpx;
height: 60rpx;
}
}
.user-tag {
display: flex;
align-items: center;
justify-content: center;
background: #000;
width: 100rpx;
height: 40rpx;
border-radius: 20rpx;
font-size: 24rpx;
margin-left: 10rpx;
}
}
.edit-user {
width: 35%;
display: flex;
align-items: center;
justify-content: flex-end;
.edit-icon {
width: 30rpx;
height: 30rpx;
}
.edit-btn {
color: white;
margin-left: 10rpx;
}
}
}
.user-phone {
color: white;
font-size: 24rpx;
}
}
}
// 会员卡片
.earnings {
padding: 0rpx 20rpx;
box-sizing: border-box;
margin-top: -18%;
.member-item {
position: relative;
.member-image {
width: 100%;
height: 300rpx;
border-radius: 20rpx;
}
.member-info {
position: absolute;
bottom: 30rpx;
left: 0rpx;
display: flex;
align-items: center;
padding: 0rpx 40rpx;
box-sizing: border-box;
width: 100%;
.profile-photo {
display: flex;
justify-content: center;
align-items: center;
.pro-img {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
}
.open-status {
color: #F8A95F;
border: 1px solid #F8A95F;
border-radius: 30rpx;
padding: 7rpx 20rpx;
margin-left: 10rpx;
}
}
.open {
font-size: 26rpx;
margin-left: 20rpx;
}
}
}
}
// 佣金数据
.brokerage-data {
padding: 20rpx;
background: white;
border-radius: 20rpx;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
margin: 20rpx 20rpx 20rpx 20rpx;
.brokerage,
.balance {
display: flex;
flex-wrap: wrap;
width: 50%;
.brokerage-img,
.balance-img {
width: 50%;
height: auto;
}
.main {
display: flex;
flex-direction: column;
justify-content: space-around;
width: 50%;
box-sizing: border-box;
padding: 30rpx 0rpx;
.title {
font-size: 34rpx;
}
.money {
font-size: 40rpx;
color: $uni-color;
font-weight: bold;
}
}
}
}
.brokerage-data-mt {
margin-top: 50rpx;
}
// 我的服务
.myServer {
margin: 0rpx 20rpx 20rpx 20rpx;
background: white;
border-radius: 20rpx;
padding: 30rpx 20rpx;
box-sizing: border-box;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
.server-title {
margin-bottom: 30rpx;
font-size: 36rpx;
font-weight: 600;
color: #333;
position: relative;
padding-left: 20rpx;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8rpx;
height: 32rpx;
background: $uni-color;
border-radius: 4rpx;
}
}
.box {
display: flex;
width: 100%;
margin-bottom: 30rpx;
gap: 20rpx;
.boxs {
width: 23%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20rpx 0;
border-radius: 16rpx;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(227, 68, 26, 0.05);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
}
&:active {
transform: scale(0.95);
&::after {
opacity: 1;
}
}
image {
width: 70rpx;
height: 70rpx;
display: block;
margin: 0rpx auto 16rpx auto;
position: relative;
z-index: 2;
transition: transform 0.3s ease;
}
.title {
font-size: 26rpx;
color: #333;
position: relative;
z-index: 2;
transition: color 0.3s ease;
}
&:active {
image {
transform: translateY(-4rpx);
}
.title {
color: $uni-color;
}
}
}
&:last-child {
margin-bottom: 0rpx;
}
}
}
// 广告
.ad {
margin: 0rpx 20rpx;
.swiper {
.swiper-main {
position: relative;
.close {
position: absolute;
top: 20rpx;
right: 20rpx;
.close-img {
width: 40rpx;
height: 40rpx;
}
}
.swiper-main-img {
width: 100%;
height: 200rpx;
border-radius: 20rpx;
}
.ad-tag {
position: absolute;
left: 20rpx;
bottom: 20rpx;
.ad-tag-img {
width: 120rpx;
height: auto;
}
}
}
}
}
}
</style>

+ 294
- 0
pages/index/oldCart.vue View File

@ -0,0 +1,294 @@
<template>
<view class="page">
<navbar />
<view class="user">
<uv-checkbox-group shape="circle" v-model="checkboxValue">
<uv-swipe-action>
<view v-for="(item, index) in list" :key="item.id">
<view style="margin-top: 20rpx;"></view>
<uv-swipe-action-item @click="e => deleteCart(e, item)" :options="options">
<view class="item">
<view class="checkbox">
<uv-checkbox :name="item.id" activeColor="#eb3300" size="40rpx"
icon-size="35rpx"></uv-checkbox>
</view>
<image class="image" :src="item.image &&
item.image.split(',')[0]" mode=""></image>
<view class="info">
<view class="title">
<view class="">
{{ item.title }}
</view>
</view>
<view class="unit">
规格：{{ item.sku }}
<!-- <uv-icon name="arrow-down"></uv-icon> -->
</view>
<view style="display: flex;
justify-content: space-between;
align-items: center;">
<view class="price">
￥<text>{{ item.price }}</text>元
</view>
<view class="">
<uv-number-box v-model="item.num"
@change="e => valChange(item, e)"></uv-number-box>
</view>
</view>
</view>
</view>
</uv-swipe-action-item>
</view>
</uv-swipe-action>
</uv-checkbox-group>
<uv-empty v-if="list.length == 0" text="空空如也" textSize="30rpx" iconSize="200rpx" icon="list"></uv-empty>
<view class="action">
<view class="icon">
<image src="/static/image/cart/1.png" mode=""></image>
<view class="num">
{{ checkboxValue.length }}
</view>
</view>
<view class="price">
<view class="count">
合计
<view class="">
￥<text>{{ totalPrice }}</text>
</view>
</view>
<view class="text">
共{{ checkboxValue.length }}件，已享受更低优惠
</view>
</view>
<view class="btn" @click="submit">
去结算
</view>
</view>
</view>
<tabber select="cart" />
</view>
</template>
<script>
import tabber from '@/components/base/tabbar.vue'
import mixinsList from '@/mixins/list.js'
export default {
mixins: [mixinsList],
components: {
tabber,
},
data() {
return {
value: 0,
checkboxValue: [],
options: [
{
text: '删除',
style: {
backgroundColor: '#f40'
}
},
],
mixinsListApi: 'getCartPageList',
}
},
computed: {
totalPrice() {
if (!this.checkboxValue.length) {
return 0
}
let price = 0
this.list.forEach(n => {
if (this.checkboxValue.includes(n.id)) {
price += n.price * n.num
}
})
return price
},
},
methods: {
valChange(item, e) {
this.$api('updateCartNum', {
id: item.id,
num: e.value,
})
},
// 立即下单
submit() {
if (this.checkboxValue.length == 0) {
uni.showToast({
title: '请选择商品',
icon: 'none',
})
return
}
let arr = []
this.list.forEach(n => {
if (this.checkboxValue.includes(n.id)) {
arr.push(n)
}
})
this.$store.commit('setPayOrderProduct', arr)
this.$utils.navigateTo('/pages_order/order/createOrder')
},
deleteCart(e, item) {
this.$api('deleteCart', {
ids: item.id
}, res => {
this.getData()
})
},
}
}
</script>
<style scoped lang="scss">
.page {
padding-bottom: 200rpx;
/deep/ .uv-swipe-action {
width: 100%;
}
}
.user {
.item {
background-color: #fff;
display: flex;
padding: 30rpx;
.checkbox {
display: flex;
justify-content: center;
align-items: center;
}
.image {
width: 200rpx;
height: 200rpx;
border-radius: 20rpx;
}
.info {
flex: 1;
.title {
display: flex;
padding: 10rpx 20rpx;
justify-content: space-between;
}
.unit {
font-size: 24rpx;
padding: 10rpx 20rpx;
color: #717171;
display: flex;
align-items: center;
}
.price {
color: $uni-color;
font-size: 28rpx;
padding: 10rpx 20rpx;
text {
font-size: 36rpx;
font-weight: 900;
}
}
}
}
.action {
width: 700rpx;
position: fixed;
bottom: 220rpx;
left: 25rpx;
background-color: #fff;
height: 100rpx;
border-radius: 50rpx;
box-shadow: 0 0 6rpx 6rpx #00000010;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
z-index: 999;
.icon {
position: relative;
width: 80rpx;
height: 80rpx;
margin: 0 20rpx;
image {
width: 80rpx;
height: 80rpx;
}
.num {
position: absolute;
right: 10rpx;
top: 0rpx;
background-color: $uni-color;
color: #fff;
font-size: 18rpx;
border-radius: 50%;
height: 30rpx;
width: 30rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
.price {
.count {
display: flex;
font-size: 26rpx;
align-items: center;
view {
color: $uni-color;
margin-left: 10rpx;
text {
font-size: 32rpx;
font-weight: 900;
}
}
}
.text {
font-size: 20rpx;
color: #717171;
}
}
.btn {
margin-left: auto;
background-color: $uni-color;
height: 100%;
padding: 0 50rpx;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
}
}
</style>

+ 582
- 0
pages/index/oldCenter.vue View File

@ -0,0 +1,582 @@
<template>
<view class="page">
<!-- 导航栏 -->
<navbar title="个人中心" leftClick @leftClick="$utils.navigateBack" bgColor="#E3441A" color="#fff" />
<!-- 头部 -->
<view class="head">
<view class="headImage">
<image :src="userInfo.headImage" mode="aspectFill"></image>
</view>
<view class="user-info">
<view class="user-base-info">
<view class="user-base-top">
<view class="user-name">{{ userInfo.nickName }}</view>
<view class="member-level">
<image v-if="userInfo.role == 1" :src="configList.vip_user" mode="aspectFill" class="level">
</image>
<image v-if="userInfo.role == 2" src="@/static/image/center/gold-min.png" mode="aspectFill"
class="level">
</image>
<image v-if="userInfo.role == 3" src="@/static/image/center/sliver-min.png"
mode="aspectFill" class="level">
</image>
</view>
<view class="user-tag">
{{ userRole[userInfo.isPay] }}
</view>
</view>
<view class="edit-user" @click="$utils.navigateTo('/pages_order/mine/updateUser?back=true')">
<image src="@/static/image/center/edit-icon.png" mode="aspectFill" class="edit-icon"></image>
<view class="edit-btn">
修改资料
</view>
</view>
</view>
<view class="user-phone">
手机号:{{ userInfo.phone }}
</view>
</view>
</view>
<!-- 会员卡片 -->
<view @click="$utils.navigateTo({ url: '/pages_order/mine/memberCenter' })" v-if="userInfo.role != 0"
class="earnings">
<view v-if="index + 1 == userInfo.role" v-for="(item, index) in vipList" :key="item.id" class="member-item">
<image :src="item.headImage" mode="aspectFill" class="member-image"></image>
<view class="member-info">
<view class="profile-photo">
<image :src="userInfo.headImage" mode="aspectFill" class="pro-img"></image>
<view class="open-status">
开通时间：{{ riceInfo.openTime }}
</view>
</view>
<view class="open">
</view>
</view>
</view>
</view>
<!-- 佣金数据 -->
<view @click="$utils.navigateTo('/pages_order/mine/withdraw')" class="brokerage-data"
:class="{ 'brokerage-data-mt': !userInfo.role }">
<view class="brokerage">
<image :src="configList.money_image" mode="aspectFill" class="brokerage-img"></image>
<div class="main">
<div class="title">我的佣金</div>
<div class="money">￥{{ riceInfo.canWithdraw || 0 }}</div>
</div>
</view>
<view class="balance">
<image :src="configList.price_image" mode="aspectFill" class="balance-img"></image>
<div class="main">
<div class="title">我的余额</div>
<div class="money">￥{{ riceInfo.balance || 0 }}</div>
</div>
</view>
</view>
<!-- 我的服务 -->
<view class="myServer">
<view class="server-title">
我的服务
</view>
<view class="box">
<view class="boxs" @click="$utils.navigateTo('/pages/index/order?type=0')">
<image src="@/static/image/center/1.png" mode="aspectFill" />
<view class="title">我的订单</view>
</view>
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/partner')">
<image src="@/static/image/center/2.png" mode="aspectFill" />
<view class="title">我的团队</view>
</view>
<view class="boxs" @click="$utils.navigateTo('/pages_order/home/contact')">
<image src="@/static/image/center/3.png" mode="aspectFill" />
<view class="title">联系客服</view>
</view>
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/promotion')">
<image src="@/static/image/center/4.png" mode="aspectFill" />
<view class="title">邀请好友</view>
</view>
</view>
<view class="box">
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/recruit')">
<image src="@/static/image/center/5.png" mode="aspectFill" />
<view class="title">合伙人招募</view>
</view>
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/memberCenter')">
<image src="@/static/image/center/6.png" mode="aspectFill" />
<view class="title">会员权益</view>
</view>
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/coupon')">
<image src="@/static/image/center/7.png" mode="aspectFill" />
<view class="title">优惠券</view>
</view>
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/help')">
<image src="@/static/image/center/8.png" mode="aspectFill" />
<view class="title">帮助与反馈</view>
</view>
</view>
<view class="box">
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/address')">
<image src="@/static/image/center/address.png" mode="aspectFill" />
<view class="title">我的地址</view>
</view>
<view class="boxs" @click="$utils.navigateTo('/pages_order/order/giftList')">
<image src="@/static/image/center/9.png" mode="aspectFill" />
<view class="title">礼包列表</view>
</view>
<view class="boxs" @click="logout">
<image src="@/static/image/center/logout.png" mode="aspectFill" />
<view class="title">退出登录</view>
</view>
</view>
</view>
<!-- 广告 -->
<div v-if="showAdvertising" class="ad" @click="$utils.navigateTo('/pages_order/mine/recruit')">
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="true" :interval="2000"
:duration="duration">
<swiper-item v-for="(item, index) in adList" :key="index">
<view class="swiper-main">
<view @click="closeAdvertising" class="close">
<image src="@/static/image/center/close.png" mode="aspectFill" class="close-img"></image>
</view>
<image :src="item" mode="aspectFill" class="swiper-main-img"></image>
<div class="ad-tag">
<image src="@/static/image/center/ad-tag.png" mode="aspectFill" class="ad-tag-img"></image>
</div>
</view>
</swiper-item>
</swiper>
</div>
<customerServicePopup ref="customerServicePopup" />
<tabber select="center" />
</view>
</template>
<script>
import tabber from '@/components/base/tabbar.vue'
import {
mapState
} from 'vuex'
import customerServicePopup from '@/components/config/customerServicePopup.vue'
export default {
components: {
tabber,
customerServicePopup,
},
computed: {
...mapState(['riceInfo']),
adList() {
let arr = [];
if (this.configList?.shop_get_image) {
arr = this.configList?.shop_get_image?.split(',')
}
return arr
}
},
data() {
return {
vipType: ['普通会员', '黄金会员', '渠道商'],
vipImage: ['vip_vip', 'vip_user', 'vip_shop'],
vipList: [],
showAdvertising: true,
userRole: ['会员', '用户', '渠道'],
indicatorDots: true,
duration: 500
}
},
onShow() {
this.$store.commit('getUserInfo')
this.$store.commit('getRiceInfo')
this.getMemberCardData();
},
methods: {
clickNo() {
uni.showModal({
title: '暂未开放',
})
},
logout() {
uni.showModal({
title: '确认退出登录吗',
success: (r) => {
if (r.confirm) {
this.$store.commit('logout', true)
}
}
})
},
//关闭广告
closeAdvertising() {
this.showAdvertising = false;
},
//获取会员卡片数据
getMemberCardData() {
this.$api('getRiceVipList', res => {
if (res.code == 200) {
this.vipList = res.result
}
})
}
}
}
</script>
<style scoped lang="scss">
.page {
// 头部
.head {
display: flex;
align-items: center;
padding: 60rpx 20rpx 120rpx 20rpx;
background: $uni-color;
.headImage {
width: 130rpx;
height: 130rpx;
background-image: url(/static/image/center/head-img.png);
background-repeat: no-repeat;
background-position: 50%, 50%;
background-size: 100%;
overflow: hidden;
border-radius: 50%;
margin-right: 20rpx;
image {
width: 100%;
height: 100%;
}
}
.user-info {
width: calc(100% - 130rpx);
.user-base-info {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.user-base-top {
width: 65%;
display: flex;
align-items: center;
flex-wrap: wrap;
color: white;
.user-name {
max-width: calc(100% - 240rpx);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 34rpx;
}
.member-level {
margin-left: 10rpx;
.level {
width: 120rpx;
height: 60rpx;
}
}
.user-tag {
display: flex;
align-items: center;
justify-content: center;
background: #000;
width: 100rpx;
height: 40rpx;
border-radius: 20rpx;
font-size: 24rpx;
margin-left: 10rpx;
}
}
.edit-user {
width: 35%;
display: flex;
align-items: center;
justify-content: flex-end;
.edit-icon {
width: 30rpx;
height: 30rpx;
}
.edit-btn {
color: white;
margin-left: 10rpx;
}
}
}
.user-phone {
color: white;
font-size: 24rpx;
}
}
}
// 会员卡片
.earnings {
padding: 0rpx 20rpx;
box-sizing: border-box;
margin-top: -18%;
.member-item {
position: relative;
.member-image {
width: 100%;
height: 300rpx;
border-radius: 20rpx;
}
.member-info {
position: absolute;
bottom: 30rpx;
left: 0rpx;
display: flex;
align-items: center;
padding: 0rpx 40rpx;
box-sizing: border-box;
width: 100%;
.profile-photo {
display: flex;
justify-content: center;
align-items: center;
.pro-img {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
}
.open-status {
color: #F8A95F;
border: 1px solid #F8A95F;
border-radius: 30rpx;
padding: 7rpx 20rpx;
margin-left: 10rpx;
}
}
.open {
font-size: 26rpx;
margin-left: 20rpx;
}
}
}
}
// 佣金数据
.brokerage-data {
padding: 20rpx;
background: white;
border-radius: 20rpx;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
margin: 20rpx 20rpx 20rpx 20rpx;
.brokerage,
.balance {
display: flex;
flex-wrap: wrap;
width: 50%;
.brokerage-img,
.balance-img {
width: 50%;
height: auto;
}
.main {
display: flex;
flex-direction: column;
justify-content: space-around;
width: 50%;
box-sizing: border-box;
padding: 30rpx 0rpx;
.title {
font-size: 34rpx;
}
.money {
font-size: 40rpx;
color: $uni-color;
font-weight: bold;
}
}
}
}
.brokerage-data-mt {
margin-top: 50rpx;
}
// 我的服务
.myServer {
margin: 0rpx 20rpx 20rpx 20rpx;
background: white;
border-radius: 20rpx;
padding: 30rpx 20rpx;
box-sizing: border-box;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
.server-title {
margin-bottom: 30rpx;
font-size: 36rpx;
font-weight: 600;
color: #333;
position: relative;
padding-left: 20rpx;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8rpx;
height: 32rpx;
background: $uni-color;
border-radius: 4rpx;
}
}
.box {
display: flex;
width: 100%;
margin-bottom: 30rpx;
gap: 20rpx;
.boxs {
width: 23%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20rpx 0;
border-radius: 16rpx;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(227, 68, 26, 0.05);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
}
&:active {
transform: scale(0.95);
&::after {
opacity: 1;
}
}
image {
width: 70rpx;
height: 70rpx;
display: block;
margin: 0rpx auto 16rpx auto;
position: relative;
z-index: 2;
transition: transform 0.3s ease;
}
.title {
font-size: 26rpx;
color: #333;
position: relative;
z-index: 2;
transition: color 0.3s ease;
}
&:active {
image {
transform: translateY(-4rpx);
}
.title {
color: $uni-color;
}
}
}
&:last-child {
margin-bottom: 0rpx;
}
}
}
// 广告
.ad {
margin: 0rpx 20rpx;
.swiper {
.swiper-main {
position: relative;
.close {
position: absolute;
top: 20rpx;
right: 20rpx;
.close-img {
width: 40rpx;
height: 40rpx;
}
}
.swiper-main-img {
width: 100%;
height: 200rpx;
border-radius: 20rpx;
}
.ad-tag {
position: absolute;
left: 20rpx;
bottom: 20rpx;
.ad-tag-img {
width: 120rpx;
height: auto;
}
}
}
}
}
}
</style>

+ 9
- 52
pages/index/order.vue View File

@ -14,16 +14,14 @@
<view class="tabs"> <view class="tabs">
<uv-tabs :list="tabs" :activeStyle="{ color: '#019245'}" lineColor="#019245" :scrollable="false" <uv-tabs :list="tabs" :activeStyle="{ color: '#019245'}" lineColor="#019245" :scrollable="false"
:inactiveStyle="{color: 'black'}" lineHeight="6rpx" lineWidth="55rpx" :current="current" :inactiveStyle="{color: 'black'}" lineHeight="6rpx" lineWidth="55rpx" :current="current"
@click="clickTabs"></uv-tabs>
@click="clickTabs" />
</view> </view>
<!-- 团餐列表 --> <!-- 团餐列表 -->
<view class="group-meal-list"> <view class="group-meal-list">
<view class="meal-item" v-for="(meal, index) in groupMeals" :key="index">
<!-- <view class="meal-info"> -->
<view class="meal-name">团餐{{index+1}}</view>
<view class="meal-price">本单佣金合计: <text class="price-value">¥{{meal.price}}</text></view>
<!-- </view> -->
<view class="meal-item" v-for="(meal, index) in groupMeals" :key="index+meal.id">
<view class="meal-name">{{ meal.name }}</view>
<view class="meal-price">本单佣金合计: <text class="price-value">¥{{meal.price}}</text></view>
<view class="meal-action"> <view class="meal-action">
<button class="order-btn" @click="viewOrder(meal)">查看订单</button> <button class="order-btn" @click="viewOrder(meal)">查看订单</button>
</view> </view>
@ -122,8 +120,7 @@
import tabber from '@/components/base/tabbar.vue' import tabber from '@/components/base/tabbar.vue'
import customerServicePopup from '@/components/config/customerServicePopup.vue' import customerServicePopup from '@/components/config/customerServicePopup.vue'
import OrderItem from '@/components/order/OrderItem.vue' import OrderItem from '@/components/order/OrderItem.vue'
import mockOrders from '@/static/js/mockOrders.js'
import { mockOrders, mockGroupMeals} from '@/static/js/mockOrders.js'
export default { export default {
mixins: [mixinsList, mixinsOrder], mixins: [mixinsList, mixinsOrder],
components: { components: {
@ -135,25 +132,6 @@
data() { data() {
return { return {
keyword: '', keyword: '',
// tabs: [{
// name: '全部'
// },
// {
// name: '待付款'
// },
// {
// name: '待发货'
// },
// {
// name: '待收货'
// },
// {
// name: '已完成'
// },
// {
// name: '已取消'
// }
// ],
tabs: [{ tabs: [{
name: '待支付' name: '待支付'
}, },
@ -173,26 +151,7 @@
current: 0, current: 0,
mixinsListApi: 'getOrderPageList', mixinsListApi: 'getOrderPageList',
orderList: [], orderList: [],
groupMeals: [
{
id: '1',
name: '团餐1',
price: '18.00',
status: 'pending'
},
{
id: '2',
name: '团餐2',
price: '18.00',
status: 'pending'
},
{
id: '3',
name: '团餐3',
price: '18.00',
status: 'pending'
}
]
groupMeals: []
} }
}, },
onLoad(args) { onLoad(args) {
@ -236,16 +195,13 @@
// 查看团餐订单 // 查看团餐订单
viewOrder(meal) { viewOrder(meal) {
this.$utils.navigateTo({ this.$utils.navigateTo({
url: '/pages_order/order/groupMealDetail?id=' + meal.id
url: '/pages_order/order/groupMealDetail?id=' + meal.id + '&status=' + meal.status
}) })
// uni.showToast({
// title: '查看团餐' + meal.id,
// icon: 'none'
// })
}, },
// 加载模拟订单数据 // 加载模拟订单数据
loadMockOrders() { loadMockOrders() {
this.orderList = mockOrders this.orderList = mockOrders
this.groupMeals = mockGroupMeals
}, },
// 根据状态筛选订单 // 根据状态筛选订单
filterOrdersByStatus(index) { filterOrdersByStatus(index) {
@ -264,6 +220,7 @@
const targetStatus = statusMap[index] const targetStatus = statusMap[index]
if (targetStatus) { if (targetStatus) {
this.orderList = this.orderList.filter(order => order.status === targetStatus) this.orderList = this.orderList.filter(order => order.status === targetStatus)
this.groupMeals = this.groupMeals.filter(meal => meal.status === targetStatus)
} }
}, },
// 处理取消订单 // 处理取消订单


+ 77
- 23
pages_order/components/order/MemberFoodItem.vue View File

@ -8,32 +8,34 @@
<view class="member-info"> <view class="member-info">
<text class="member-name">{{ member.name }}</text> <text class="member-name">{{ member.name }}</text>
</view> </view>
<view class="check-food-btn" @click="toggleExpand">
<view class="check-food-btn check-btn" @click="toggleExpand">
<text>{{ isExpanded ? '收起餐点' : '查看餐点' }}</text> <text>{{ isExpanded ? '收起餐点' : '查看餐点' }}</text>
<uv-icon :name="isExpanded ? 'arrow-up' : 'arrow-down'" color="#019245" size="30rpx"></uv-icon> <uv-icon :name="isExpanded ? 'arrow-up' : 'arrow-down'" color="#019245" size="30rpx"></uv-icon>
</view> </view>
<view v-if="status === 'shipping'" class="check-notice-btn check-btn" @click="sendNotice">
<text>通知取餐</text>
</view>
<view v-if="status === 'delivered'" class="check-notice-btn check-btn" @click="completeSend">
<text>完成取餐</text>
</view>
</view> </view>
<!-- 餐点列表展开区域 - 使用v-if替代uv-transition --> <!-- 餐点列表展开区域 - 使用v-if替代uv-transition -->
<view class="food-detail" v-if="isExpanded"> <view class="food-detail" v-if="isExpanded">
<view class="fold-handle" @click="toggleExpand">
<uv-icon name="arrow-up" color="#999" size="24rpx"></uv-icon>
<text class="fold-text">点击收起</text>
</view>
<view class="food-list"> <view class="food-list">
<view class="food-item" v-for="(food, index) in member.food" :key="index"> <view class="food-item" v-for="(food, index) in member.food" :key="index">
<view class="food-left"> <view class="food-left">
<image class="food-image" :src="food.image" mode="aspectFill"></image>
<image class="food-image" :src="food.image" mode="aspectFill" />
<view class="food-info"> <view class="food-info">
<text class="food-name">{{ food.name }}</text> <text class="food-name">{{ food.name }}</text>
<view class="food-sold"> <view class="food-sold">
<uv-icon name="checkmark-circle" color="#ccc" size="24rpx"></uv-icon> <uv-icon name="checkmark-circle" color="#ccc" size="24rpx"></uv-icon>
<text>已售出 {{ food.sold }}单</text> <text>已售出 {{ food.sold }}单</text>
</view> </view>
<text class="food-price"> <text style="font-size: 20rpx; margin-right: 5rpx;">¥</text> {{ food.price.toFixed(1) }}</text>
</view> </view>
</view> </view>
<view class="food-right"> <view class="food-right">
<text class="food-price">¥{{ food.price.toFixed(2) }}</text>
<text class="food-quantity">×{{ food.quantity }}</text> <text class="food-quantity">×{{ food.quantity }}</text>
</view> </view>
</view> </view>
@ -55,6 +57,11 @@ export default {
defaultExpanded: { defaultExpanded: {
type: Boolean, type: Boolean,
default: false default: false
},
// 从父页面获取的订单状态
status: {
type: String,
default: 'processing'
} }
}, },
data() { data() {
@ -75,6 +82,44 @@ export default {
member: this.member, member: this.member,
expanded: this.isExpanded expanded: this.isExpanded
}); });
},
sendNotice() {
// 模拟通知体验
setTimeout(() => {
uni.showLoading({
title: '通知中...',
icon: 'loading',
duration: 2000
})
setTimeout(() => {
uni.hideLoading()
uni.showToast({
title: '通知成功',
icon: 'success',
duration: 2000
})
}, 1200)
}, 200)
// 这里存放通知函数的逻辑....
},
completeSend() {
// 模拟体验
setTimeout(() => {
uni.showLoading({
title: '请稍等...',
icon: 'loading',
duration: 2000
})
setTimeout(() => {
uni.hideLoading()
uni.showToast({
title: '已完成',
icon: 'success',
duration: 2000
})
}, 1200)
}, 200)
// 这里执行函数逻辑
} }
} }
} }
@ -113,14 +158,11 @@ export default {
} }
} }
.check-food-btn {
border: 2rpx solid $uni-color;
.check-btn{
border-radius: 30rpx; border-radius: 30rpx;
display: flex; display: flex;
align-items: center; align-items: center;
color: $uni-color;
font-size: 28rpx;
padding: 10rpx 20rpx;
font-size: 26rpx;
gap: 10rpx; gap: 10rpx;
transition: all 0.3s; transition: all 0.3s;
@ -129,6 +171,18 @@ export default {
transform: scale(0.98); transform: scale(0.98);
} }
} }
.check-food-btn {
border: 2rpx solid $uni-color;
color: $uni-color;
padding: 10rpx 20rpx;
}
.check-notice-btn{
padding: 10rpx 40rpx;
background-color: $uni-color;
color: #fff;
margin-left: 20rpx;
}
} }
.food-detail { .food-detail {
@ -146,7 +200,7 @@ export default {
.fold-text { .fold-text {
font-size: 24rpx; font-size: 24rpx;
color: #999;
color: $uni-color-third;
margin-left: 10rpx; margin-left: 10rpx;
} }
@ -172,9 +226,9 @@ export default {
align-items: center; align-items: center;
.food-image { .food-image {
width: 100rpx;
height: 100rpx;
border-radius: 8rpx;
width: 120rpx;
height: 120rpx;
// border-radius: 8rpx;
margin-right: 15rpx; margin-right: 15rpx;
} }
@ -190,24 +244,24 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 24rpx; font-size: 24rpx;
color: #999;
color: $uni-color-third;
text { text {
margin-left: 4rpx; margin-left: 4rpx;
} }
} }
.food-price {
font-size: 28rpx;
color: $uni-color-second;
display: block;
margin-bottom: 10rpx;
}
} }
} }
.food-right { .food-right {
text-align: right; text-align: right;
.food-price {
font-size: 28rpx;
color: #f00;
display: block;
margin-bottom: 10rpx;
}
.food-quantity { .food-quantity {
font-size: 24rpx; font-size: 24rpx;


+ 11
- 62
pages_order/order/groupMealDetail.vue View File

@ -12,6 +12,7 @@
v-for="(member, index) in members" v-for="(member, index) in members"
:key="index" :key="index"
:member="member" :member="member"
:status="mealInfo.status"
:default-expanded="index === defaultExpandedIndex" :default-expanded="index === defaultExpandedIndex"
@toggle="handleMemberToggle" @toggle="handleMemberToggle"
/> />
@ -26,7 +27,8 @@
<script> <script>
import navbar from '@/components/base/navbar.vue' import navbar from '@/components/base/navbar.vue'
import MemberFoodItem from '../components/order/MemberFoodItem.vue' import MemberFoodItem from '../components/order/MemberFoodItem.vue'
import { mockFoodMember } from '@/static/js/mockOrders'
// 创造了一个新的status 用来代表当前列表应该的状态
export default { export default {
components: { components: {
navbar, navbar,
@ -37,81 +39,28 @@ export default {
mealId: null, mealId: null,
mealInfo: null, mealInfo: null,
defaultExpandedIndex: -1, // 默认不展开任何成员 defaultExpandedIndex: -1, // 默认不展开任何成员
members: [
{
id: '1',
name: '张三',
avatar: '/static/image/中森明菜.webp',
food: [
{
name: '茄子肉沫',
price: 9.9,
quantity: 1,
image: '/static/image/古茗店面.webp',
sold: 235
},
{
name: '豆角炒鸡蛋',
price: 9.9,
quantity: 1,
image: '/static/image/古茗店面.webp',
sold: 235
},
{
name: '酸辣土豆丝',
price: 9.9,
quantity: 1,
image: '/static/image/古茗店面.webp',
sold: 235
}
]
},
{
id: '2',
name: '张三',
avatar: '/static/image/中森明菜.webp',
food: [
{
name: '茄子肉沫',
price: 9.9,
quantity: 1,
image: '/static/image/古茗店面.webp',
sold: 235
},
{
name: '豆角炒鸡蛋',
price: 9.9,
quantity: 1,
image: '/static/image/古茗店面.webp',
sold: 235
},
{
name: '酸辣土豆丝',
price: 9.9,
quantity: 1,
image: '/static/image/古茗店面.webp',
sold: 235
}
]
}
]
members: []
} }
}, },
onLoad(options) { onLoad(options) {
if (options.id) { if (options.id) {
this.mealId = options.id this.mealId = options.id
this.getMealInfo()
// 得到当前订单的成员与其餐点信息
this.getMealInfo(options.status)
} }
console.log(options.status);
this.members = mockFoodMember
}, },
methods: { methods: {
// 获取团餐信息 // 获取团餐信息
getMealInfo() {
getMealInfo(status) {
// 模拟获取团餐数据 // 模拟获取团餐数据
this.mealInfo = { this.mealInfo = {
id: this.mealId, id: this.mealId,
name: '团餐' + this.mealId, name: '团餐' + this.mealId,
price: 18.00, price: 18.00,
status: '待出餐'
status: status
} }
}, },
// 处理成员项展开/收起事件 // 处理成员项展开/收起事件


+ 1
- 1
pages_order/order/newOrderDetail.vue View File

@ -213,8 +213,8 @@
// 这里应该根据ID从服务器获取订单详情 // 这里应该根据ID从服务器获取订单详情
// this.getOrderDetail(this.id) // this.getOrderDetail(this.id)
// 这里假设是从订单列表页面跳转过来获取的订单状态 // 这里假设是从订单列表页面跳转过来获取的订单状态
this.orderStatus = options.status
} }
this.orderStatus = options.status
}, },
methods: { methods: {
// 返回上一页 // 返回上一页


+ 38
- 0
static/js/mockCartData.js View File

@ -0,0 +1,38 @@
export const mockCartData = {
totalPrice: 0.0,
selectedCount: 0,
items: [
{
id: 1,
name: '豆角炒鸡蛋',
price: 9.9,
image: '/static/image/红烧肉.png',
quantity: 1,
sold: 235
},
{
id: 2,
name: '豆角炒鸡蛋',
price: 9.9,
image: '/static/image/红烧肉.png',
quantity: 1,
sold: 235
},
{
id: 3,
name: '豆角炒鸡蛋',
price: 9.9,
image: '/static/image/红烧肉.png',
quantity: 1,
sold: 235
},
{
id: 4,
name: '豆角炒鸡蛋',
price: 9.9,
image: '/static/image/红烧肉.png',
quantity: 1,
sold: 235
}
]
}

+ 217
- 2
static/js/mockOrders.js View File

@ -1,4 +1,4 @@
export default [
export const mockOrders = [
{ {
id: '20241223184523001', id: '20241223184523001',
shopName: '轻奢时代芙蓉兴盛', shopName: '轻奢时代芙蓉兴盛',
@ -120,4 +120,219 @@ export default [
totalPrice: 45.50, totalPrice: 45.50,
status: 'completed' status: 'completed'
}, },
];
];
export const mockFoodMember =
[
{
id: '1',
name: '张三',
avatar: '/static/image/中森明菜.webp',
food: [
{
name: '茄子肉沫',
price: 9.9,
quantity: 1,
image: '/static/image/古茗店面.webp',
sold: 235
},
{
name: '豆角炒鸡蛋',
price: 9.9,
quantity: 1,
image: '/static/image/古茗店面.webp',
sold: 235
},
{
name: '酸辣土豆丝',
price: 9.9,
quantity: 1,
image: '/static/image/古茗店面.webp',
sold: 235
}
]
},
{
id: '2',
name: '清九',
avatar: '/static/image/中森明菜.webp',
food: [
{
name: '茄子肉沫',
price: 9.9,
quantity: 1,
image: '/static/image/古茗店面.webp',
sold: 235
},
{
name: '豆角炒鸡蛋',
price: 9.9,
quantity: 1,
image: '/static/image/古茗店面.webp',
sold: 235
},
{
name: '酸辣土豆丝',
price: 9.9,
quantity: 1,
image: '/static/image/古茗店面.webp',
sold: 235
}
]
},
{
id: '3',
name: '李四',
avatar: '/static/image/中森明菜.webp',
food: [
{
name: '茄子肉沫',
price: 9.9,
quantity: 1,
image: '/static/image/红烧肉.png',
sold: 235
},
{
name: '豆角炒鸡蛋',
price: 9.9,
quantity: 1,
image: '/static/image/红烧肉.png',
sold: 235
},
{
name: '酸辣土豆丝',
price: 9.9,
quantity: 1,
image: '/static/image/红烧肉.png',
sold: 235
}
]
},
{
id: '4',
name: '王五',
avatar: '/static/image/中森明菜.webp',
food: [
{
name: '茄子肉沫',
price: 9.9,
quantity: 1,
image: '/static/image/红烧肉.png',
sold: 235
},
{
name: '豆角炒鸡蛋',
price: 9.9,
quantity: 1,
image: '/static/image/红烧肉.png',
sold: 235
}
]
},
{
id: '5',
name: '赵六',
avatar: '/static/image/中森明菜.webp',
food: [
{
name: '茄子肉沫',
price: 9.9,
quantity: 1,
image: '/static/image/红烧肉.png',
sold: 235
}
]
},
{
id: '6',
name: '孙七',
avatar: '/static/image/中森明菜.webp',
food: [
{
name: '茄子肉沫',
price: 9.9,
quantity: 1,
image: '/static/image/红烧肉.png',
sold: 235
}
]
},
{
id: '7',
name: '周八',
avatar: '/static/image/中森明菜.webp',
food: [
{
name: '茄子肉沫',
price: 9.9,
quantity: 1,
image: '/static/image/红烧肉.png',
sold: 235
}
]
}
]
export const mockGroupMeals =
[
{
id: '1',
name: '霸王茶姬',
price: '18.00',
status: 'processing'
},
{
id: '2',
name: '茶白道',
price: '18.00',
status: 'shipping'
},
{
id: '3',
name: '爷爷爱泡茶',
price: '18.00',
status: 'shipping'
},
{
id: '4',
name: '快乐番薯',
price: '18.00',
status: 'processing'
},
{
id: '5',
name: '古茗',
price: '18.00',
status: 'completed'
},
{
id: '6',
name: '义和堂',
price: '18.00',
status: 'processing'
},
{
id: '7',
name: '瑞星咖啡',
price: '18.00',
status: 'completed'
},
{
id: '8',
name: '库迪咖啡',
price: '18.00',
status: 'delivered'
},
{
id: '9',
name: 'KFC',
price: '18.00',
status: 'delivered'
},
{
id: '10',
name: '塔斯顶',
price: '18.00',
status: 'delivered'
},
]

+ 1
- 0
uni.scss View File

@ -15,6 +15,7 @@
$uni-color: #019245; $uni-color: #019245;
$uni-color-second: #FF2A2A; $uni-color-second: #FF2A2A;
$uni-color-third: #999; $uni-color-third: #999;
$uni-color-fourth: #DFFFEE; // 淡绿色
/* 行为相关颜色 */ /* 行为相关颜色 */
$uni-color-primary: #007aff; $uni-color-primary: #007aff;


Write Preview
Loading…
Cancel
Save