ppnwsfegt
/
WXCampusFoodOrdering
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: ppnwsfegt:c88e9dd68600913dda6d6457a69788a6e8155e0e
Branches Tags
ppnwsfegt:main
ppnwsfegt:Brunch_LPQ
ppnwsfegt:Brunch_DBK
ppnwsfegt:回退1
...
compare: ppnwsfegt:6e9423b80ddf3c7e0f3ddc90d5dd055e805db2c5
Branches Tags
ppnwsfegt:main
ppnwsfegt:Brunch_LPQ
ppnwsfegt:Brunch_DBK
ppnwsfegt:回退1

2 Commits
c88e9dd686 ... 6e9423b80d

Author SHA1 Message Date
pikvyz67s 6e9423b80d Merge pull request '确认订单页面制作和改进' (#46) from Brunch_DBK into main
1 month ago
Suk1No c7a7f39d31 确认订单页面制作及改进
1 month ago
8 changed files with 343 additions and 39 deletions
Show Stats

14
order-app/project.config.json
Unescape View File

@ -12,7 +12,16 @@
"outputPath": ""
},
"useCompilerPlugins": false,
"minifyWXML": true
"minifyWXML": true,
"compileWorklet": false,
"uploadWithSourceMap": true,
"packNpmManually": false,
"minifyWXSS": true,
"localPlugins": false,
"disableUseStrict": false,
"condition": false,
"swc": false,
"disableSWC": true
},
"compileType": "miniprogram",
"simulatorPluginLibVersion": {},
@ -21,5 +30,6 @@
"include": []
},
"appid": "wx6a41b250d82adc97",
"editorSetting": {}
"editorSetting": {},
"libVersion": "3.9.1"
}

10
order-app/project.private.config.json
Unescape View File

@ -9,6 +9,14 @@
"preloadBackgroundData": false,
"autoAudits": false,
"showShadowRootInWxmlPanel": true,
"compileHotReLoad": true
"compileHotReLoad": true,
"useApiHook": true,
"useApiHostProcess": true,
"useStaticServer": false,
"useLanDebug": false,
"showES6CompileOption": false,
"checkInvalidKey": true,
"ignoreDevUnusedFiles": true,
"bigPackageSizeSupport": false
}
}

18
order-app/src/pages.json
Unescape View File

@ -37,15 +37,21 @@
}, {
"path": "pages/address/address",
"style": {
"navigationBarTitleText": ""
"navigationBarTitleText": "新增地址"
}
},
// {
// "path": "common/common",
// "style": {
// "navigationBarTitleText": ""
// }
// },
{
"path" : "common/common",
"style" :
{
"navigationBarTitleText" : ""
} }
"path": "pages/confirm/confirm",
"style": {
"navigationBarTitleText": "确认订单"
}
}
],
"globalStyle": {
// 导航字体颜色，仅支持 black/white

12
order-app/src/pages/car/car.vue
Unescape View File

@ -35,7 +35,7 @@
总计：<text style="color: #f00;font-weight: bold;">￥ {{totalPrice}}</text>
</view>
</view>
<view class="end-right">
<view class="end-right" @click="confirm">
结算({{totalNum}})
</view>
</view>
@ -130,7 +130,7 @@
})
return totalNum
})
//总共价格
const totalPrice = computed(() => {
let totalPrice = 0;
store.carList.map(item => {
@ -138,6 +138,12 @@
})
return totalPrice
})
//跳转确认订单
const confirm = (item) => {
uni.navigateTo({
url: '../confirm/confirm'
});
}
</script>
<style lang="scss">
@ -213,7 +219,7 @@
.end-right {
width: 30%;
line-height: 90rpx;
background-color: #F44545;
background-color: #F3AF28;
text-align: center;
color: #fff;
}

228
order-app/src/pages/confirm/confirm.vue
Unescape View File

@ -0,0 +1,228 @@
<template>
<view class="address" @click="toAddress">
<view>
<view class="info">
<view class="name">
张明
</view>
<view class="phone">
18681xxxxx
</view>
</view>
<view>
北京工业大学
</view>
</view>
<u-icon name="arrow-right" color="#c8c9cc"></u-icon>
</view>
<view style="padding-bottom: 60px;margin-top: 10px;" v-if="goods.length > 0">
<view class="goods-detail" v-for="(item,index) in goods" :key="index">
<view class="detail-left">
<view class="goods-left">
<image style="width: 150rpx; height: 140rpx; margin-left:10px;" :src="item.goodsImage"></image>
</view>
<view class="size">
<text style="font-size: 25rpx;">名称：{{item.goodsName}}</text>
<text style="font-size: 25rpx;">规格：{{item.specsName}}</text>
<text class="goods-price">￥{{item.price}}{{item.goodsUnit}}</text>
</view>
</view>
<view class="detail-right">
<text class="num">x{{item.num}}</text>
</view>
</view>
</view>
<view class="end">
<view class="end-left">
<view>
总计：<text style="color: #F3AF28;font-weight: bold;">￥{{totalPrice}}</text>
</view>
</view>
<view class="end-right">
提交订单({{totalNum}})
</view>
</view>
</template>
<script setup>
import {
ref,
reactive,
computed
} from 'vue'
import {
orderStore
} from '../../store/order.js'
//获取store
const store = orderStore()
const goods = computed(() => {
return store.orderList
})
// const goods = reactive([{
// flag: true,
// goodsName: "女款-M",
// goodsUnit: '/份',
// goodsId: 1,
// num: 1,
// specsName: '中',
// price: 149,
// goodsImage: "http://192.168.31.70:8089/images/a35e4257-9e9a-43f8-b077-a7664064ce12.png",
// },
// {
// flag: true,
// goodsName: "女款-M",
// goodsUnit: '/份',
// goodsId: 1,
// specsName: '中',
// num: 1,
// price: 149,
// goodsImage: "http://192.168.31.70:8089/images/a35e4257-9e9a-43f8-b077-a7664064ce12.png",
// },
// {
// flag: true,
// goodsName: "女款-M",
// goodsUnit: '/份',
// goodsId: 1,
// num: 1,
// specsName: '中',
// price: 149,
// goodsImage: "http://192.168.31.70:8089/images/a35e4257-9e9a-43f8-b077-a7664064ce12.png",
// },
// {
// flag: true,
// goodsName: "女款-M",
// goodsId: 1,
// num: 1,
// goodsUnit: '/份',
// specsName: '中',
// price: 149,
// goodsImage: "http://192.168.31.70:8089/images/a35e4257-9e9a-43f8-b077-a7664064ce12.png",
// }
// ])
//总数
const totalNum = computed(() => {
let totalNum = 0;
store.orderList.map(item => {
item.flag ? totalNum += item.num : totalNum += 0;
})
return totalNum
})
//总共价格
const totalPrice = computed(() => {
let totalPrice = 0;
store.orderList.map(item => {
item.flag ? totalPrice += item.num * item.price : totalPrice += 0;
})
return totalPrice
})
//跳转新增地址
const toAddress = (item) => {
uni.navigateTo({
url: '../address/address'
});
}
</script>
<style lang="scss">
page {
background-color: #f4f4f4;
}
.address {
display: flex;
justify-content: space-between;
background-color: #FFF;
padding: 10px 20px;
.info {
display: flex;
.name {
font-size: 15px;
font-weight: 600;
}
.phone {
margin-left: 10px;
}
}
}
.goods-detail {
display: flex;
padding: 30rpx 15rpx 30rpx 30rpx;
background-color: #FFF;
justify-content: space-between;
border-bottom: 5rpx solid #f1f1f1;
align-items: center;
.detail-left {
display: flex;
.goods-left {
display: flex;
align-items: center;
}
.size {
display: flex;
flex-direction: column;
justify-content: space-around;
margin-left: 30rpx;
.goods-price {
font-size: 25rpx;
color: #F44545;
}
}
}
.detail-right {
text {
width: 50rpx;
line-height: 50rpx;
text-align: center;
display: inline-block;
background-color: #F7F7F7;
margin-right: 10rpx;
}
.add {
color: #FA4305;
border-radius: 10rpx 30rpx 30rpx 10rpx;
margin-right: 20rpx;
}
.subtract {
border-radius: 30rpx 10rpx 10rpx 30rpx;
}
}
}
.end {
width: 100%;
height: 90rpx;
background-color: #fff;
position: fixed;
bottom: 0;
left: 0;
display: flex;
align-items: center;
.end-left {
width: 70%;
display: flex;
justify-content: space-between;
padding: 0 30rpx;
}
.end-right {
width: 30%;
line-height: 90rpx;
background-color: #F3AF28;
text-align: center;
color: #fff;
}
}
</style>

51
order-app/src/pages/detail/detail.vue
Unescape View File

@ -1,8 +1,7 @@
<template>
<view>
<u-swiper name='images' border-radius='1' :duration='duration' :interval='interval' :height="height"
:list="swipperList"></u-swiper>
</view>
<u-swiper name='images' border-radius='1' :duration='duration' :interval='interval' :height="height"
:list="swipperList">
</u-swiper>
<view class="info">
<view class="title">
{{title}}
@ -75,32 +74,30 @@
</view>
</view>
<view class="right">
<view class="cart btn u-line-1">加入购物车</view>
<view class="buy btn u-line-1">立即购买</view>
<view class="cart btn u-line-1" @click="addCar">加入购物车</view>
<view @click="addBuy" class="buy btn u-line-1">立即购买</view>
</view>
</view>
</template>
<script setup>
import {
userLogin
} from '../../api/user';
computed,
ref
} from 'vue';
import {
onLoad
} from '@dcloudio/uni-app';
import { carStore } from '../../store/car.js'
import {
ref,
computed
} from 'vue';
import {
carStore
} from '../../store/car';
//菜品详情
const content = ref('')
orderStore
} from '../../store/order.js'
import {userLogin} from '../../api/user.js'
//获取store
const store = carStore()
//购物车数量动态变化
const carCount = computed(() => {
const ostore = orderStore()
//购物车数量
const carCount = computed(()=>{
return store.carList.length
})
//菜品详情
@ -134,13 +131,12 @@
price.value = item.goodsPrice
carData.value.price = item.goodsPrice
carData.value.specsName = item.specsName
console.log(carData)
}
//详情tab
const swiperCurrent = ref(0)
const dx = ref(0)
const tabIndex = ref(0)
//购物车数据
//购物车的数据类型
const carData = ref({
flag: true,
goodsName: "",
@ -157,9 +153,18 @@
swiperCurrent.value = index;
}
//加入购物车
const addCar = () => {
const addCar = ()=>{
store.addCar(carData.value)
}
//立即购买
const addBuy = ()=>{
//清空
ostore.orderList = []
ostore.addOrder(carData.value)
uni.navigateTo({
url: '../confirm/confirm'
});
}
const animationfinish = ({
detail: {
current
@ -201,7 +206,7 @@
})
</script>
<style lang="scss">
<style lang="scss" scoped>
page {
display: flex;
flex-direction: column;
@ -360,4 +365,4 @@
.page-box {
padding: 20rpx;
}
</style>
</style>

4
order-app/src/pages/index/index.vue
Unescape View File

@ -52,10 +52,6 @@
</template>
<script setup>
import {
getSwipperListApi,
getHotListApi
} from '../../api/home';
import {
ref
} from 'vue';

45
order-app/src/store/order.js
Unescape View File

@ -0,0 +1,45 @@
// 引入
import {
defineStore
} from 'pinia';
//通过defineStore定义一个store,
// defineStore 第一个参数是唯一的
export const orderStore = defineStore('orderStore', {
state: () => {
return {
count: 0,
//存储购物车数据
orderList: []
};
},
// 也可以这样定义
// state: () => ({ count: 0 })
actions: {
//单条数据加入
addOrder(goods) {
//判断是否已经加入到购物车
const index = this.orderList.findIndex(item => goods.goodsId == item.goodsId)
//存在，删除购物车数据里面的数据
if (index > -1) {
//删除原来的数据
this.orderList.splice(index, 1);
}
//加的购物车
this.orderList.push(goods)
},
//多条数据加入
addOrderList(list) {
list.forEach(goods => {
//判断是否已经加入到购物车
const index = this.orderList.findIndex(item => goods.goodsId == item.goodsId)
//存在，删除购物车数据里面的数据
if (index > -1) {
//删除原来的数据
this.orderList.splice(index, 1);
}
//加的购物车
this.orderList.push(goods)
})
}
},
});
Write Preview
Loading…
Cancel
Save