431 lines
9.9 KiB
Vue
431 lines
9.9 KiB
Vue
<template>
|
|
<!-- <view class="flex-row relative page">
|
|
<view class="aaa">
|
|
<view class="bbb">
|
|
<view class="ccc"
|
|
v-for="(item, index) in sort"
|
|
:key="index"
|
|
:style="getBoxStyle(index)"
|
|
@click="changeTypes(item , index)"
|
|
>
|
|
<image class="eee"
|
|
:src="item.imgurl" />
|
|
<text class="ddd">{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="pos_5">
|
|
<view class="flex-row section_9 list-item_2 mt-5" v-for="(item, index) in productList" :key="index" @click="goToProduct(item)">
|
|
<image class="self-center image_4"
|
|
:src="item.goodImg" />
|
|
<view style="width: 220rpx;" class="flex-col items-start self-center group_3">
|
|
<text class="font_2 text_5">{{ item.name }}</text>
|
|
<text class="font_3 mt-13">{{ item.intro }}</text>
|
|
<text class="font mt-13">￥{{ item.price }}</text>
|
|
</view>
|
|
<image class="self-start image_5"
|
|
:src="add_img" />
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<template>
|
|
<!-- <view v-for="zhuangtai in Status.orders" :key="zhuangtai.id">
|
|
{{zhuangtai.orderStatus}}
|
|
</view> -->
|
|
<view class="container">
|
|
<view class="order-tabs">
|
|
<view class="tab-item" :class="{active: orderStatus === '全部'}" @click="changeTab('全部')">全部</view>
|
|
<view class="tab-item" :class="{active: orderStatus === '代支付'}" @click="changeTab('代支付')">代支付</view>
|
|
<view class="tab-item" :class="{active: orderStatus === '代发货'}" @click="changeTab('代发货')">代发货</view>
|
|
<view class="tab-item" :class="{active: orderStatus === '已发货'}" @click="changeTab('已发货')">已发货</view>
|
|
<view class="tab-item" :class="{active: orderStatus === '售后'}" @click="changeTab('售后')">售后</view>
|
|
</view>
|
|
<view class="order-list">
|
|
<view v-for="order in Status.orders" :key="order.id" class="order-item">
|
|
<view v-for="item in order.orderItemList" :key="item.id">
|
|
{{ item.goodSnapshot.name }}
|
|
</view>
|
|
<view v-for="item in order.orderItemList" :key="item.id">
|
|
{{ item.goodSnapshot.type }}
|
|
</view>
|
|
<view v-for="item in order.orderItemList" :key="item.id">
|
|
{{ item.goodSnapshot.price }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,onMounted, toRaw
|
|
} from 'vue';
|
|
import { baseUrl, testUrl , suiUrl} from '@/api/request';
|
|
import img1 from '@/pages/store-home/main/img/cailiaobao.png';
|
|
import img2 from '@/pages/store-home/main/img/shouchiwu.png';
|
|
import img3 from '@/pages/store-home/main/img/toushi.png';
|
|
import img4 from '@/pages/store-home/main/img/dingzhi.png';
|
|
import img5 from '@/pages/store-home/main/img/jifenduihuan.png';
|
|
import product_img from '@/pages/store-home/main/img/shangpingtupian.png';
|
|
import add_img from '@/pages/store-home/main/img/tianjia.png';
|
|
import sousuokuang from '@/pages/store-home/main/img/sousuokuang.png';
|
|
|
|
const currentColor = ref(0);
|
|
const sort =ref([{}]) //商品类别对象数组
|
|
const headerList = ref([{}]) //类别标题和介绍
|
|
const productList = ref([{}]) //类别下对应的商品
|
|
onMounted( async () => {
|
|
await Getsort()
|
|
await changeTypes( sort.value[0] , 0 )
|
|
await Getorder()
|
|
Status.displayedOrders = Status.orders;
|
|
})
|
|
const userInfo=ref({
|
|
userInfo:wx.getStorageSync('userInfo')
|
|
})
|
|
const Getorder = async () => {
|
|
const res = await uni.request({
|
|
url: baseUrl + '/order/list',
|
|
method: 'POST',
|
|
data: {
|
|
// id:userInfo.value.userInfo.id ,
|
|
id:215
|
|
}
|
|
})
|
|
if (res.data.code === 1) {
|
|
Status.value.orders=res.data.data;
|
|
// for(let key in res.data.data){
|
|
// Status.value.orders[key]=res.data.data[key]
|
|
// }
|
|
console.log(Status.value.orders[0].orderStatus)//待支付
|
|
console.log(res.data.data[0].orderStatus)//待支付
|
|
}else{
|
|
console.log("没拿到用户数据")
|
|
}
|
|
};
|
|
//订单类别
|
|
const Status =ref({
|
|
orderStatus: '全部',
|
|
orders:[
|
|
{
|
|
|
|
}
|
|
],
|
|
|
|
displayedOrders: []
|
|
})
|
|
const changeTab = (tab) => {
|
|
for(let key in Status.value.orders){
|
|
tab[key]={
|
|
Status.value.orders[key].orderStatus
|
|
}
|
|
}
|
|
// Status.value.orders.orderStatus = tab;
|
|
if (tab === '全部') {
|
|
Status.value.displayedOrders = Status.value.orders;
|
|
} else {
|
|
Status.value.displayedOrders = Status.value.orders.filter(order => {
|
|
switch (tab) {
|
|
case '待支付':
|
|
return order.orderStatus === '代支付';
|
|
case '代发货':
|
|
return order.orderStatus === '代发货';
|
|
case '已发货':
|
|
return order.orderStatus === '已发货';
|
|
case '售后':
|
|
return order.orderStatus === '售后';
|
|
default:
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
//console.log(userInfo.value.userInfo.id)//216
|
|
//获取商品分类
|
|
const Getsort = async ()=>{
|
|
const res = await uni.request({
|
|
url: testUrl + '/category/list',
|
|
method:'POST'
|
|
})
|
|
if(res.data.code === 1){
|
|
for(let key in res.data.data) {
|
|
sort.value[key] = {//类别列表
|
|
name : res.data.data[key].typeName,
|
|
imgurl : res.data.data[key].typeUrl,
|
|
id : res.data.data[key].id
|
|
}//标题列表
|
|
headerList.value[key] = {
|
|
name : res.data.data[key].typeName,
|
|
typeIntro : res.data.data[key].typeIntro
|
|
}
|
|
}
|
|
} else {
|
|
uni.showToast({ //提示请求错误
|
|
title: '请求商品分类错误',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
}
|
|
//更改类别
|
|
const changeTypes = async (item , index) =>{
|
|
currentColor.value = index
|
|
const res = await uni.request({
|
|
url: testUrl + '/category/list/type',
|
|
method: 'POST',
|
|
data: {
|
|
id : item.id
|
|
}
|
|
})
|
|
if(res.data.code === 1) {
|
|
productList.value = res.data.data[item.id]
|
|
} else {
|
|
uni.showToast({ //商品请求错误
|
|
title: '更改类别错误',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
}
|
|
//更改box颜色
|
|
const getBoxStyle = (index) => ({
|
|
backgroundColor: currentColor.value === index ? 'brown' : '#fffef8'
|
|
});
|
|
|
|
const goToProduct = (item) => {
|
|
console.log(item,123);
|
|
uni.navigateTo({
|
|
url: '../../../pages/store-home/ProductDetails/ProductDetails?info=' + JSON.stringify(item)
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// .navbar {
|
|
// background-color: #333;
|
|
// color: #fff;
|
|
// padding: 10px;
|
|
// }
|
|
// .bbb {
|
|
// display: flex;
|
|
// align-items: center;
|
|
// }
|
|
// .ccc {
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// align-items: center;
|
|
// margin: 20rpx;
|
|
// }
|
|
// .eee {
|
|
// width: 30px;
|
|
// height: 30px;
|
|
// }
|
|
// .ddd {
|
|
// font-size: 14px;
|
|
// }
|
|
// .flex-row {
|
|
// display: flex;
|
|
// }
|
|
// .flex-item {
|
|
// flex: 1;
|
|
// }
|
|
// .ml-15 {
|
|
// margin-left: 28.13rpx;
|
|
// }
|
|
// .ml-3 {
|
|
// margin-left: 5.63rpx;
|
|
// }
|
|
// .mt-3 {
|
|
// margin-top: 5.63rpx;
|
|
// text-align: center;
|
|
// }
|
|
// .mt-13 {
|
|
// margin-top: 17.38rpx;
|
|
// }
|
|
// .mt-5 {
|
|
// margin-top: 9.38rpx;
|
|
// }
|
|
// .page {
|
|
// background-color: #f5f5dc;
|
|
// // height: 1413.75rpx;
|
|
// width: 100%;
|
|
// overflow-y: auto;
|
|
// overflow-x: hidden;
|
|
// height: 100vh;
|
|
// overflow: hidden;
|
|
// }
|
|
// .section {
|
|
// padding: 22.5rpx 39.28rpx 16.88rpx;
|
|
// background-color: #f7de98;
|
|
// }
|
|
// .pos_8 {
|
|
// position: absolute;
|
|
// left: 0;
|
|
// right: 0;
|
|
// top: 0;
|
|
// }
|
|
// .text {
|
|
// color: #c1651a;
|
|
// font-size: 37.5rpx;
|
|
// font-family: STFangsong;
|
|
// line-height: 36.19rpx;
|
|
// }
|
|
// .section_2 {
|
|
// padding: 5.63rpx 15rpx 8.44rpx;
|
|
// background-color: #ffffff;
|
|
// border-radius: 28.13rpx;
|
|
// height: 63.75rpx;
|
|
// width: 500.69rpx;
|
|
// }
|
|
// .image {
|
|
// width: 50.63rpx;
|
|
// height: 50.63rpx;
|
|
// }
|
|
// .text-wrapper {
|
|
// margin-right: 17.42rpx;
|
|
// }
|
|
// .font {
|
|
// font-size: 26.25rpx;
|
|
// font-family: STFangsong;
|
|
// line-height: 18rpx;
|
|
// color: #ff0000;
|
|
// }
|
|
// .image-wrapper {
|
|
// background-color: #ffffff;
|
|
// border-radius: 28.13rpx;
|
|
// overflow: hidden;
|
|
// border: solid 9.38rpx #ffffff;
|
|
// }
|
|
// .pos_1 {
|
|
// position: absolute;
|
|
// left: 22.5rpx;
|
|
// right: 24.38rpx;
|
|
// top: 118.13rpx;
|
|
// }
|
|
// .image_2 {
|
|
// width: 91.25vw;
|
|
// height: 37.5vw;
|
|
// }
|
|
|
|
// .group {
|
|
// margin: auto;
|
|
// width: 137.81rpx;
|
|
// }
|
|
// //类别列表
|
|
// .list-item {
|
|
// padding: 11.25rpx 0 9.94rpx;
|
|
// background-color: #fffef8;
|
|
// border-radius: 9.38rpx;
|
|
// }
|
|
// .list-item:first-child {
|
|
// margin-top: 0;
|
|
// }
|
|
// .image_3 {
|
|
// border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
|
|
// width: 60rpx;
|
|
// height: 60rpx;
|
|
// }
|
|
// .font_4 {
|
|
// font-size: 25rpx;
|
|
// font-family: STFangsong;
|
|
// line-height: 28.26rpx;
|
|
// color: #c1651a;
|
|
// }
|
|
// .section_4 {
|
|
// padding-bottom: 879.38rpx;
|
|
// background-color: #f8e8c1;
|
|
// border-radius: 0rpx 18.75rpx 0rpx 0rpx;
|
|
// width: 600.13rpx;
|
|
// }
|
|
// .pos_4 {
|
|
// position: absolute;
|
|
// right: 0;
|
|
// top: 440.63rpx;
|
|
// }
|
|
// .section_5 {
|
|
// padding: 18.06rpx 16.24rpx 14.94rpx;
|
|
// background-color: #fffef8;
|
|
// border-radius: 0rpx 18.75rpx 0rpx 0rpx;
|
|
// width: 598.13rpx;
|
|
// }
|
|
// .font_2 {
|
|
// font-size: 30rpx;
|
|
// font-family: STFangsong;
|
|
// line-height: 28.26rpx;
|
|
// color: #000000;
|
|
// }
|
|
// .font_3 {
|
|
// font-size: 22.5rpx;
|
|
// font-family: STFangsong;
|
|
// line-height: 21.56rpx;
|
|
// color: #727272;
|
|
// }
|
|
// .text_3 {
|
|
// line-height: 21.15rpx;
|
|
// }
|
|
// .pos_5 {
|
|
// position: absolute;
|
|
// top: 120rpx;
|
|
// width: 95%;
|
|
// margin: 2.5%;
|
|
// }
|
|
// .section_9 {
|
|
// padding: 20.63rpx 22.88rpx 22.5rpx;
|
|
// background-color: #fffef8;
|
|
// border-radius: 9.38rpx;
|
|
// right: 13.13rpx;
|
|
// }
|
|
// .list-item_2:first-child {
|
|
// margin-top: 0;
|
|
// }
|
|
// .image_4 {
|
|
// border-radius: 9.38rpx;
|
|
// width: 131.25rpx;
|
|
// height: 131.25rpx;
|
|
// }
|
|
// .group_3 {
|
|
// margin-left: 24.84rpx;
|
|
// }
|
|
// .text_5 {
|
|
// line-height: 28.65rpx;
|
|
// }
|
|
// .image_5 {
|
|
// margin: 75rpx 5.63rpx 0 107.96rpx;
|
|
// border-radius: 9.38rpx;
|
|
// width: 56.25rpx;
|
|
// height: 56.25rpx;
|
|
// }
|
|
.container {
|
|
padding: 20px;
|
|
}
|
|
|
|
.order-tabs {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
background-color: #f5f5f5;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.tab-item {
|
|
cursor: pointer;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.tab-item.active {
|
|
color: blue;
|
|
border-bottom: 2px solid blue;
|
|
}
|
|
|
|
.order-list {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.order-item {
|
|
border: 1px solid #ccc;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
@import url(../../../common/css/global.css);
|
|
</style> |