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

Merge pull request '"我的"页面及其中"我的订单"页面制作' (#51) from Brunch_DBK into main

Browse Source
pull/52/head
pikvyz67s 3 months ago
parent 0327bb1f13 204cd53a76
commit a936521d26
3 changed files with 642 additions and 12 deletions
Show Stats Download Patch File Download Diff File

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

@ -58,6 +58,13 @@
{
"navigationBarTitleText" : ""
}
},
{
"path" : "pages/order/order",
"style" :
{
"navigationBarTitleText" : ""
}
}
],
"globalStyle": {

96
order-app/src/pages/mine/mine.vue
Unescape View File

@ -1,22 +1,94 @@
<template>
<view>
我的
<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
<view class="userinfo u-flex-1" @click="getUserInfo">
<view class="img-container">
<image class="uimage" :src='avatarUrl'></image>
</view>
<!-- 分割线 -->
<u-divider>{{nickName}}</u-divider>
</view>
</view>
<view class="u-m-t-20">
<u-cell-group>
<u-cell-item icon="star" title="我的收藏"></u-cell-item>
<u-cell-item icon="photo" title="我的订单"></u-cell-item>
<u-cell-item icon="coupon" title="我的地址"></u-cell-item>
</u-cell-group>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
<script setup>
import {
onShow
} from '@dcloudio/uni-app';
import {
ref
} from 'vue'
//昵称
const nickName = ref('大幕孤烟直')
//头像
const avatarUrl = ref('/static/user.jpg')
//获取头像点击事件
const getUserInfo = () => {
console.log('获取头像')
if (uni.getStorageSync('avatarUrl') && uni.getStorageSync('nickName')) {
nickName.value = uni.getStorageSync('nickName')
avatarUrl.value = uni.getStorageSync('avatarUrl')
} else {
uni.getUserProfile({
desc: '用于头像昵称展示', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
console.log(res)
nickName.value = res.userInfo.nickName
avatarUrl.value = res.userInfo.avatarUrl
uni.setStorageSync('avatarUrl', res.userInfo.avatarUrl);
uni.setStorageSync('nickName', res.userInfo.nickName);
}
})
}
}
onShow(() => {
getUserInfo()
})
</script>
<style>
<style lang="scss">
page {
background-color: #ededed;
}
.userinfo {
margin: 30rpx 0rpx;
}
.img-container {
display: flex;
justify-content: center;
align-items: center;
}
</style>
.uimage {
height: 50px;
width: 50px;
border-radius: 50%;
margin: 5px 0px;
}
.camera {
width: 54px;
height: 44px;
&:active {
background-color: #ededed;
}
}
.user-box {
background-color: #fff;
}
</style>

551
order-app/src/pages/order/order.vue
Unescape View File

@ -0,0 +1,551 @@
<template>
<view>
<view class="wrap">
<view class="u-tabs-box">
<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="currents" @change="change"
:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
</view>
<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
@animationfinish="animationfinish">
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
<view class="page-box">
<view class="order" v-for="(res, index) in orderList[0]" :key="res.id">
<view class="top">
<view class="left">
<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
<view class="store">{{ res.store }}</view>
<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
</view>
<view class="right">{{ res.deal }}</view>
</view>
<view class="item" v-for="(item, index) in res.goodsList" :key="index">
<view class="left">
<image :src="item.goodsUrl" mode="aspectFill"></image>
</view>
<view class="content">
<view class="title u-line-2">{{ item.title }}</view>
<view class="type">{{ item.type }}</view>
<view class="delivery-time">发货时间 {{ item.deliveryTime }}</view>
</view>
<view class="right">
<view class="price">
￥{{ priceInt(item.price) }}
<text class="decimal">.{{ priceDecimal(item.price) }}</text>
</view>
<view class="number">x{{ item.number }}</view>
</view>
</view>
<view class="total">
共{{ totalNum(res.goodsList) }}件商品 合计:
<text class="total-price">
￥{{ priceInt(totalPrice(res.goodsList)) }}.
<text class="decimal">{{ priceDecimal(totalPrice(res.goodsList)) }}</text>
</text>
</view>
<view class="bottom">
<view class="more">
<u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon>
</view>
<view class="logistics btn">查看物流</view>
<view class="exchange btn">卖了换钱</view>
<view class="evaluate btn">评价</view>
</view>
</view>
<u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
<view class="page-box">
<view class="order" v-for="(res, index) in orderList[1]" :key="res.id">
<view class="top">
<view class="left">
<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
<view class="store">{{ res.store }}</view>
<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
</view>
<view class="right">{{ res.deal }}</view>
</view>
<view class="item" v-for="(item, index) in res.goodsList" :key="index">
<view class="left">
<image :src="item.goodsUrl" mode="aspectFill"></image>
</view>
<view class="content">
<view class="title u-line-2">{{ item.title }}</view>
<view class="type">{{ item.type }}</view>
<view class="delivery-time">发货时间 {{ item.deliveryTime }}</view>
</view>
<view class="right">
<view class="price">
￥{{ priceInt(item.price) }}
<text class="decimal">.{{ priceDecimal(item.price) }}</text>
</view>
<view class="number">x{{ item.number }}</view>
</view>
</view>
<view class="total">
共{{ totalNum(res.goodsList) }}件商品 合计:
<text class="total-price">
￥{{ priceInt(totalPrice(res.goodsList)) }}.
<text class="decimal">{{ priceDecimal(totalPrice(res.goodsList)) }}</text>
</text>
</view>
<view class="bottom">
<view class="more">
<u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon>
</view>
<view class="logistics btn">查看物流</view>
<view class="exchange btn">卖了换钱</view>
<view class="evaluate btn">评价</view>
</view>
</view>
<u-loadmore :status="loadStatus[1]" bgColor="#f2f2f2"></u-loadmore>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;width: 100%;">
<view class="page-box">
<view>
<view class="centre">
<image src="https://cdn.uviewui.com/uview/template/taobao-order.png" mode="">
</image>
<view class="explain">
您还没有相关的订单
<view class="tips">可以去看看有那些想买的</view>
</view>
<view class="btn">随便逛逛</view>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
<view class="page-box">
<view class="order" v-for="(res, index) in orderList[3]" :key="res.id">
<view class="top">
<view class="left">
<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
<view class="store">{{ res.store }}</view>
<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
</view>
<view class="right">{{ res.deal }}</view>
</view>
<view class="item" v-for="(item, index) in res.goodsList" :key="index">
<view class="left">
<image :src="item.goodsUrl" mode="aspectFill"></image>
</view>
<view class="content">
<view class="title u-line-2">{{ item.title }}</view>
<view class="type">{{ item.type }}</view>
<view class="delivery-time">发货时间 {{ item.deliveryTime }}</view>
</view>
<view class="right">
<view class="price">
￥{{ priceInt(item.price) }}
<text class="decimal">.{{ priceDecimal(item.price) }}</text>
</view>
<view class="number">x{{ item.number }}</view>
</view>
</view>
<view class="total">
共{{ totalNum(res.goodsList) }}件商品 合计:
<text class="total-price">
￥{{ priceInt(totalPrice(res.goodsList)) }}.
<text class="decimal">{{ priceDecimal(totalPrice(res.goodsList)) }}</text>
</text>
</view>
<view class="bottom">
<view class="more">
<u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon>
</view>
<view class="logistics btn">查看物流</view>
<view class="exchange btn">卖了换钱</view>
<view class="evaluate btn">评价</view>
</view>
</view>
<u-loadmore :status="loadStatus[3]" bgColor="#f2f2f2"></u-loadmore>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script setup>
import {
onReady
} from '@dcloudio/uni-app';
import {
ref,
computed
} from 'vue'
const tabs = ref(null);
const orderList = ref([
[],
[],
[],
[]
])
const dataList = ref([{
id: 1,
store: '夏日流星限定贩卖',
deal: '交易成功',
goodsList: [{
goodsUrl: '//img13.360buyimg.com/n7/jfs/t1/103005/7/17719/314825/5e8c19faEb7eed50d/5b81ae4b2f7f3bb7.jpg',
title: '【冬日限定】现货 原创jk制服女2020冬装新款小清新宽松软糯毛衣外套女开衫短款百搭日系甜美风',
type: '灰色;M',
deliveryTime: '付款后30天内发货',
price: '348.58',
number: 2
},
{
goodsUrl: '//img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg',
title: '【葡萄藤】现货 小清新学院风制服格裙百褶裙女短款百搭日系甜美风原创jk制服女2020新款',
type: '45cm;S',
deliveryTime: '付款后30天内发货',
price: '135.00',
number: 1
}
]
},
{
id: 2,
store: '江南皮革厂',
deal: '交易失败',
goodsList: [{
goodsUrl: '//img14.360buyimg.com/n7/jfs/t1/60319/15/6105/406802/5d43f68aE9f00db8c/0affb7ac46c345e2.jpg',
title: '【冬日限定】现货 原创jk制服女2020冬装新款小清新宽松软糯毛衣外套女开衫短款百搭日系甜美风',
type: '粉色;M',
deliveryTime: '付款后7天内发货',
price: '128.05',
number: 1
}]
},
{
id: 3,
store: '三星旗舰店',
deal: '交易失败',
goodsList: [{
goodsUrl: '//img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg',
title: '三星（SAMSUNG）京品家电 UA65RUF70AJXXZ 65英寸4K超高清 HDR 京东微联 智能语音 教育资源液晶电视机',
type: '4K，广色域',
deliveryTime: '保质5年',
price: '1998',
number: 3
},
{
goodsUrl: '//img14.360buyimg.com/n7/jfs/t6007/205/4099529191/294869/ae4e6d4f/595dcf19Ndce3227d.jpg!q90.jpg',
title: '美的(Midea)639升 对开门冰箱 19分钟急速净味 一级能效冷藏双开门杀菌智能家用双变频节能 BCD-639WKPZM(E)',
type: '容量大，速冻',
deliveryTime: '保质5年',
price: '2354',
number: 1
}
]
},
{
id: 4,
store: '三星旗舰店',
deal: '交易失败',
goodsList: [{
goodsUrl: '//img10.360buyimg.com/n7/jfs/t22300/31/1505958241/171936/9e201a89/5b2b12ffNe6dbb594.jpg!q90.jpg',
title: '法国进口红酒 拉菲（LAFITE）传奇波尔多干红葡萄酒750ml*6整箱装',
type: '4K，广色域',
deliveryTime: '珍藏10年好酒',
price: '1543',
number: 3
},
{
goodsUrl: '//img10.360buyimg.com/n7/jfs/t1/107598/17/3766/525060/5e143aacE9a94d43c/03573ae60b8bf0ee.jpg',
title: '蓝妹（BLUE GIRL）酷爽啤酒 清啤 原装进口啤酒 罐装 500ml*9听 整箱装',
type: '一打',
deliveryTime: '口感好',
price: '120',
number: 1
}
]
},
{
id: 5,
store: '三星旗舰店',
deal: '交易成功',
goodsList: [{
goodsUrl: '//img12.360buyimg.com/n7/jfs/t1/52408/35/3554/78293/5d12e9cfEfd118ba1/ba5995e62cbd747f.jpg!q90.jpg',
title: '企业微信 中控人脸指纹识别考勤机刷脸机 无线签到异地多店打卡机WX108',
type: '识别效率高',
deliveryTime: '使用方便',
price: '451',
number: 9
}]
}
])
const list = ref([{
name: '待付款'
},
{
name: '待发货'
},
{
name: '待收货'
},
{
name: '待评价',
count: 12
}
])
const currents = ref(0)
const swiperCurrent = ref(0)
const tabsHeight = ref(0)
const dx = ref(0)
const loadStatus = ref(['loadmore', 'loadmore', 'loadmore', 'loadmore'])
const getOrderList = (idx) => {
for (let i = 0; i < 5; i++) {
let index = Math.round(Math.random() * (dataList.value.length - 1));
// let index = Math.random(0, dataList.value.length - 1);
// console.log('666')
// console.log(index)
let data = JSON.parse(JSON.stringify(dataList.value[index]));
data.id = Math.floor(Math.random() * 100 + 1);
// console.log(data)
orderList.value[idx].push(data);
}
loadStatus.value.splice(currents.value, 1, "loadmore")
}
let priceDecimal = computed(() => {
return val => {
if (val !== parseInt(val)) return val.slice(-2);
else return '00';
}
})
let priceInt = computed(() => {
return val => {
if (val !== parseInt(val)) return val.split('.')[0];
else return val;
}
})
const totalPrice = (item) => {
let price = 0;
item.map(val => {
price += parseFloat(val.price);
});
return price.toFixed(2);
}
const totalNum = (item) => {
let num = 0;
item.map(val => {
num += val.number;
});
return num;
}
const reachBottom = () => {
if (currents.value != 2) {
loadStatus.value.splice(currents.value, 1, "loading")
setTimeout(() => {
getOrderList(currents.value);
}, 1200);
}
}
const change = (index) => {
swiperCurrent.value = index;
getOrderList(index);
}
const transition = ({
detail: {
dx
}
}) => {
tabs.value.setDx(dx);
}
const animationfinish = ({
detail: {
current
}
}) => {
console.log(current)
console.log(currents.value)
tabs.value.setFinishCurrent(current);
swiperCurrent.value = current;
currents.value = current;
}
onReady(() => {
getOrderList(0);
getOrderList(1);
getOrderList(3);
})
</script>
<style>
/* #ifndef H5 */
page {
height: 100%;
background-color: #f2f2f2;
}
/* #endif */
</style>
<style lang="scss" scoped>
.order {
width: 710rpx;
background-color: #ffffff;
margin: 20rpx auto;
border-radius: 20rpx;
box-sizing: border-box;
padding: 20rpx;
font-size: 28rpx;
.top {
display: flex;
justify-content: space-between;
.left {
display: flex;
align-items: center;
.store {
margin: 0 10rpx;
font-size: 32rpx;
font-weight: bold;
}
}
.right {
color: $u-type-warning-dark;
}
}
.item {
display: flex;
margin: 20rpx 0 0;
.left {
margin-right: 20rpx;
image {
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
}
}
.content {
.title {
font-size: 28rpx;
line-height: 50rpx;
}
.type {
margin: 10rpx 0;
font-size: 24rpx;
color: $u-tips-color;
}
.delivery-time {
color: #e5d001;
font-size: 24rpx;
}
}
.right {
margin-left: 10rpx;
padding-top: 20rpx;
text-align: right;
.decimal {
font-size: 24rpx;
margin-top: 4rpx;
}
.number {
color: $u-tips-color;
font-size: 24rpx;
}
}
}
.total {
margin-top: 20rpx;
text-align: right;
font-size: 24rpx;
.total-price {
font-size: 32rpx;
}
}
.bottom {
display: flex;
margin-top: 40rpx;
padding: 0 10rpx;
justify-content: space-between;
align-items: center;
.btn {
line-height: 52rpx;
width: 160rpx;
border-radius: 26rpx;
border: 2rpx solid $u-border-color;
font-size: 26rpx;
text-align: center;
color: $u-type-info-dark;
}
.evaluate {
color: $u-type-warning-dark;
border-color: $u-type-warning-dark;
}
}
}
.centre {
text-align: center;
margin: 200rpx auto;
font-size: 32rpx;
image {
width: 164rpx;
height: 164rpx;
border-radius: 50%;
margin-bottom: 20rpx;
}
.tips {
font-size: 24rpx;
color: #999999;
margin-top: 20rpx;
}
.btn {
margin: 80rpx auto;
width: 200rpx;
border-radius: 32rpx;
line-height: 64rpx;
color: #ffffff;
font-size: 26rpx;
background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
}
}
.wrap {
display: flex;
flex-direction: column;
height: calc(100vh - var(--window-top));
width: 100%;
}
.swiper-box {
flex: 1;
}
.swiper-item {
height: 100%;
}
</style>
Write Preview
Loading…
Cancel
Save