Skip to content

Y
yongxinda-h5
提交 7e60b1e3 authored 作者: 刘旭's avatar 刘旭
浏览文件
操作

查漏补缺

上级 97792735
隐藏空白字符变更
内嵌 并排
正在显示 包含 1996 行增加 和 971 行删除
src/api/category.ts
浏览文件 @ 7e60b1e3
...@@ -11,3 +11,9 @@ export const getGoodsCategory = (data: any) => request('/wx/goods/category', 'GE ...@@ -11,3 +11,9 @@ export const getGoodsCategory = (data: any) => request('/wx/goods/category', 'GE
// 分类详情数据列表 // 分类详情数据列表
export const getGoodsList = (data: any) => request('/wx/goods/list', 'GET', data); export const getGoodsList = (data: any) => request('/wx/goods/list', 'GET', data);
// 专题精选数据列表
export const getTopicList = (data: any) => request('/wx/topic/list', 'GET', data);
// 专题精选数据列表
export const getTopicDetail = (id: number) => request('/wx/topic/detail', 'GET', { id });
src/api/index.ts
浏览文件 @ 7e60b1e3
...@@ -25,4 +25,7 @@ export const cartCheckout = (data: any) => request('/wx/cart/checkout', 'GET', d ...@@ -25,4 +25,7 @@ export const cartCheckout = (data: any) => request('/wx/cart/checkout', 'GET', d
export const orderSubmit = (data: any) => request('/wx/order/submit', 'POST', data) export const orderSubmit = (data: any) => request('/wx/order/submit', 'POST', data)
// 提交订单详细信息 // 提交订单详细信息
export const orderDetail = (data: any) => request('/wx/order/detail', 'POST', data) export const orderDetail = (data: any) => request('/wx/order/detail', 'POST', data)
\ No newline at end of file
// 提交订单详细信息
export const getOrderData = (data: any) => request('/wx/order/list', 'GET', data)
\ No newline at end of file
src/components/goodsItem.vue 0 → 100644
浏览文件 @ 7e60b1e3
<template>
<view class="item-container">
<u-image width="176rpx" height="176rpx" :src="src"></u-image>
<view class="content">
<view class="title">
<text>{{ name }}</text>
<text style="color: #646566;">{{ brief }}</text>
</view>
<view class="price">
<text class="new-price">￥{{ retailPrice.toFixed(2) }}</text>
<text class="old-price">￥{{ counterPrice.toFixed(2) }}</text>
</view>
</view>
</view>
</template>
<script setup lang="ts">
let props = defineProps({
// 路径
src: {
type: String,
default: 'http://yanxuan.nosdn.127.net/0984c9388a2c3fd2335779da904be393.png',
},
// 主标题
name: {
type: String,
default: '',
},
// 副标题
brief: {
type: String,
default: '',
},
// 原价格
counterPrice: {
type: Number,
default: 0,
},
// 新价格
retailPrice: {
type: Number,
default: 0,
},
});
</script>
<style lang="scss" scoped>
.item-container {
box-sizing: border-box;
width: 100%;
height: 208rpx;
padding: 16rpx 32rpx;
display: flex;
justify-content: flex-start;
align-items: center;
background-color: #fff;
.content {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 20rpx;
.title {
display: flex;
flex-direction: column;
}
.price {
.new-price {
font-size: 32rpx;
}
.old-price {
margin-left: 10rpx;
color: #969799;
font-size: 20rpx;
text-decoration: line-through;
}
}
}
}
</style>
src/pages.json
浏览文件 @ 7e60b1e3
...@@ -83,6 +83,44 @@ ...@@ -83,6 +83,44 @@
"navigationBarTitleText": "添加用户地址", "navigationBarTitleText": "添加用户地址",
"navigationBarBackgroundColor": "#fff" "navigationBarBackgroundColor": "#fff"
} }
}, {
"path": "pages/category/new",
"style": {
"navigationBarTitleText": "新品首发",
"navigationBarBackgroundColor": "#fff",
"onReachBottomDistance": 55
}
}, {
"path": "pages/category/hot",
"style": {
"navigationBarTitleText": "人气推荐",
"navigationBarBackgroundColor": "#fff",
"onReachBottomDistance": 55
}
}, {
"path": "pages/category/topicList",
"style": {
"navigationBarTitleText": "专题精选",
"navigationBarBackgroundColor": "#fff",
"onReachBottomDistance": 55
}
}, {
"path": "pages/category/topic",
"style": {
"navigationBarTitleText": "精选详情",
"navigationBarBackgroundColor": "#fff"
}
}, {
"path": "pages/index/search",
"style": {
"navigationStyle": "custom"
}
}, {
"path": "pages/order/orderList",
"style": {
"navigationBarTitleText": "订单",
"navigationBarBackgroundColor": "#fff"
}
} }
], ],
"tabBar": { "tabBar": {
......
src/pages/cart/index.vue
浏览文件 @ 7e60b1e3
...@@ -93,6 +93,7 @@ ...@@ -93,6 +93,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref, reactive } from 'vue'; import { ref, reactive } from 'vue';
import { getCartIndex, cartChecked, cartDelete, cartUpdate } from '@/api/cart'; import { getCartIndex, cartChecked, cartDelete, cartUpdate } from '@/api/cart';
import { checkoutCart } from '@/api/index';
import { onShow } from '@dcloudio/uni-app'; import { onShow } from '@dcloudio/uni-app';
import _ from 'lodash'; import _ from 'lodash';
...@@ -160,7 +161,7 @@ const deleteCart = (index: number) => { ...@@ -160,7 +161,7 @@ const deleteCart = (index: number) => {
// 批量删除 // 批量删除
const tapOptions = () => { const tapOptions = () => {
if(delCircle.value) { if (delCircle.value) {
console.log('删除'); console.log('删除');
delProductIds.value = []; delProductIds.value = [];
_.each(checkedGoods.value, (id: any) => { _.each(checkedGoods.value, (id: any) => {
...@@ -172,8 +173,28 @@ const tapOptions = () => { ...@@ -172,8 +173,28 @@ const tapOptions = () => {
}); });
showModel.show = true; showModel.show = true;
} else { } else {
let storage: any = {
cartId: 0,
addressId: 0,
couponId: 0,
userCouponId: 0,
grouponRulesId: 0,
};
Object.keys(storage).forEach((prop: any) => {
const el: any = storage[prop];
console.log(prop, el);
uni.setStorage({
key: prop,
data: el,
success(res: any) {
if (prop == 'grouponRulesId' && el == 0) {
uni.navigateTo({ url: `../order/checkout` });
}
console.log(res);
},
});
});
} }
}; };
// 确认删除 // 确认删除
......
src/pages/category/hot.vue 0 → 100644
浏览文件 @ 7e60b1e3
<template>
<view class="app-container">
<goodsItem
v-for="item in itemList"
:src="item.picUrl"
:name="item.name"
:brief="item.brief"
:counterPrice="item.counterPrice"
:retailPrice="item.retailPrice"
@tap="hotGoods(item)"
/>
<view style="padding: 20rpx;"><u-loadmore :status="status" icon-type="flower" /></view>
</view>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { onReachBottom } from '@dcloudio/uni-app';
import { getGoodsList } from '@/api/category';
import goodsItem from '@/components/goodsItem.vue';
let hotQuery = reactive({
isHot: true,
page: 1,
limit: 10,
});
let status = ref('loadmore');
let total = ref(0);
let itemList = ref([] as any);
// 上拉加载数据
onReachBottom(() => {
// 判断是否还有下一页数据
if (hotQuery.page * hotQuery.limit >= total.value) return (status.value = 'nomore');
// // 判断是否正在请求其它数据，如果是，则不发起额外的请求
if (status.value === 'loading') return;
hotQuery.page += 1;
initList(hotQuery);
});
const hotGoods = (row: any) => {
uni.navigateTo({ url: '/pages/goods/index?id=' + row.id });
};
let initList = (data: any) => {
status.value = 'loading';
getGoodsList(data).then((res: any) => {
if (res.data.code == 200) {
if (res.data.data.total > 10) status.value = 'loadmore';
else status.value = 'nomore';
total.value = res.data.data.total;
itemList.value = [...itemList.value, ...res.data.data.list];
}
});
};
initList(hotQuery);
</script>
<style lang="scss" scoped></style>
src/pages/category/new.vue 0 → 100644
浏览文件 @ 7e60b1e3
<template>
<view class="app-container">
<goodsItem
v-for="item in itemList"
:src="item.picUrl"
:name="item.name"
:brief="item.brief"
:counterPrice="item.counterPrice"
:retailPrice="item.retailPrice"
@tap="newGoods(item)"
/>
<view style="padding: 20rpx;"><u-loadmore :status="status" icon-type="flower" /></view>
</view>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { getGoodsList } from '@/api/category';
import { onReachBottom } from '@dcloudio/uni-app';
import goodsItem from '@/components/goodsItem.vue';
let newQuery = reactive({
isNew: true,
page: 1,
limit: 10,
});
let status = ref('loadmore');
let total = ref(0);
let itemList = ref([] as any);
// 上拉加载数据
onReachBottom(() => {
// 判断是否还有下一页数据
if (newQuery.page * newQuery.limit >= total.value) return (status.value = 'nomore');
// // 判断是否正在请求其它数据，如果是，则不发起额外的请求
if (status.value === 'loading') return;
newQuery.page += 1;
initList(newQuery);
});
const newGoods = (row: any) => {
uni.navigateTo({ url: '/pages/goods/index?id=' + row.id });
};
let initList = (data: any) => {
status.value = 'loading';
getGoodsList(data).then((res: any) => {
if (res.data.code == 200) {
if (res.data.data.total > 10) status.value = 'loadmore';
else status.value = 'nomore';
total.value = res.data.data.total;
itemList.value = [...itemList.value, ...res.data.data.list];
}
});
};
initList(newQuery);
</script>
<style lang="scss" scoped></style>
src/pages/category/topic.vue 0 → 100644
浏览文件 @ 7e60b1e3
<template>
<view class=""><u-parse :html="detailData?.content"></u-parse></view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { onLoad, onHide } from '@dcloudio/uni-app';
import { getTopicDetail } from '@/api/category';
let detailData = ref();
onLoad((options: any) => {
console.log(options);
getTopicDetail(options.id).then((res: any) => {
if (res.data.code === 200) {
detailData.value = res.data.data.topic;
}
});
});
onHide(() => {
detailData.value = [];
});
</script>
src/pages/category/topicList.vue 0 → 100644
浏览文件 @ 7e60b1e3
<template>
<view v-for="item in topicList" :key="item.id" @tap="toTopic(item)">
<view class="topic">
<u-image
width="100%"
height="360rpx"
:src="item.picUrl"
mode="scaleToFill"
class="img"
></u-image>
<view class="bg-text">
<view class="txt">{{ item.title }}</view>
<view class="line"></view>
<view class="price">阅读次数：{{ item.readCount }}</view>
</view>
</view>
<view class="desc">{{ item.subtitle }}</view>
</view>
<view style="padding: 20rpx;"><u-loadmore :status="status" icon-type="flower" /></view>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { getTopicList } from '@/api/category';
import { onReachBottom } from '@dcloudio/uni-app';
let listQuery = reactive({
page: 1,
limit: 10,
});
let status = ref('loadmore');
let total = ref(0);
let topicList = ref([] as any);
// 上拉加载数据
onReachBottom(() => {
// 判断是否还有下一页数据
if (listQuery.page * listQuery.limit >= total.value) return (status.value = 'nomore');
// // 判断是否正在请求其它数据，如果是，则不发起额外的请求
if (status.value === 'loading') return;
listQuery.page += 1;
initList();
});
let toTopic = (row: any) => {
uni.navigateTo({
url: '/pages/category/topic?id=' + row.id,
});
};
let initList = () => {
status.value = 'loading';
getTopicList(listQuery).then((res: any) => {
if (res.data.data.total > 10) status.value = 'loadmore';
else status.value = 'nomore';
if (res.data.code === 200) {
total.value = res.data.data.total;
topicList.value = [...topicList.value, ...res.data.data.list];
}
});
};
initList();
</script>
<style scoped lang="scss">
* {
box-sizing: border-box;
}
.topic {
width: 100%;
height: 180px;
position: relative;
.img {
position: absolute;
top: 0;
left: 0;
}
.bg-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 180px;
text-align: center;
font-size: 50rpx;
color: #fff;
.txt {
margin-top: 60px;
height: 25px;
font-size: 25px;
color: #fff;
}
.line {
margin: 0 auto;
margin-top: 16px;
display: block;
height: 2px;
width: 300px;
background: #fff;
}
.price {
height: 25px;
font-size: 25px;
color: #fff;
}
}
}
.desc {
background: #fff;
width: 100%;
height: auto;
overflow: hidden;
padding: 25px 20px;
font-size: 20px;
color: #666;
line-height: 20px;
text-align: center;
}
</style>
src/pages/goods/index.vue
浏览文件 @ 7e60b1e3
...@@ -2,7 +2,11 @@ ...@@ -2,7 +2,11 @@
<view class="goods-detail"> <view class="goods-detail">
<!-- 轮播图 --> <!-- 轮播图 -->
<view class="wrap"> <view class="wrap">
<u-swiper :list="detailData?.info.gallery" img-mode="scaleToFill" height="700"></u-swiper> <u-swiper
:list="detailData?.info.gallery"
img-mode="scaleToFill"
height="800"
></u-swiper>
</view> </view>
<!-- 商品详情 --> <!-- 商品详情 -->
...@@ -18,35 +22,58 @@ ...@@ -18,35 +22,58 @@
</uni-col> </uni-col>
</uni-row> </uni-row>
<uni-row> <uni-row>
<uni-col :span="3"> <uni-col :span="5">
<text class="goods-price"> <text class="goods-price">
<text class="unit">￥</text> <text class="unit">￥</text>
<text class="price">{{ detailData?.info.retailPrice }}</text> <text class="price">{{ detailData?.info.retailPrice.toFixed(2) }}</text>
</text> </text>
</uni-col> </uni-col>
<uni-col :span="21" style="margin-top: 18rpx;"> <uni-col :span="3" style="margin-top: 18rpx; margin-left: 20rpx;">
<text class="goods-cost-price"> <text class="goods-cost-price">
<text class="unit">￥</text> <text class="unit">￥</text>
<text class="price">{{ detailData?.info.counterPrice }}</text> <text class="price">{{ detailData?.info.counterPrice.toFixed(2) }}</text>
</text> </text>
</uni-col> </uni-col>
</uni-row> </uni-row>
</view> </view>
<u-cell-group style="margin-top: 20rpx;"> <u-cell-group style="margin-top: 20rpx;">
<u-cell-item v-if="!selectedGoodsItem.specName" icon="" title="规格" value="请选择" :index="0" @tap="clickGroup"> <u-cell-item
</u-cell-item> v-if="!selectedGoodsItem.specName"
<u-cell-item v-else icon="" :title="'已选：' + selectedGoodsItem.specName + '*' + selectedGoodsItem.num" icon=""
:arrow="false" :index="0" @click="clickGroup"></u-cell-item> title="规格"
<u-cell-item icon="" title="属性" :index="1" @tap="clickGroup"></u-cell-item> value="请选择"
<u-cell-item icon="" title="运费" value="满88免邮费" :arrow="false" :border-bottom="false"></u-cell-item> :index="0"
@tap="clickGroup"
></u-cell-item>
<u-cell-item
v-else
icon=""
:title="'已选：' + selectedGoodsItem.specName + '*' + selectedGoodsItem.num"
:arrow="false"
:index="0"
@click="clickGroup"
/>
<u-cell-item icon="" title="属性" :index="1" @tap="clickGroup" />
<!-- <u-cell-item
icon=""
title="运费"
value="满88免邮费"
:arrow="false"
:border-bottom="false"
></u-cell-item> -->
</u-cell-group> </u-cell-group>
<!-- 规格弹窗 --> <!-- 规格弹窗 -->
<view class="goods-detail-item"> <view class="goods-detail-item">
<uni-row> <uni-row>
<view> <view>
<uni-popup ref="popup" type="bottom" :safe-area="true" background-color="#FFFFFF"> <uni-popup
ref="popup"
type="bottom"
:safe-area="true"
background-color="#FFFFFF"
>
<view class="popup-selected-spec"> <view class="popup-selected-spec">
<view class="goods-item"> <view class="goods-item">
<image class="goods-mini-img" :src="selectedGoodsItem.img" /> <image class="goods-mini-img" :src="selectedGoodsItem.img" />
...@@ -57,16 +84,26 @@ ...@@ -57,16 +84,26 @@
</text> </text>
<text class="goods-selected"> <text class="goods-selected">
<text>已选：</text> <text>已选：</text>
<text v-if="selectedGoodsItem.specName">{{ selectedGoodsItem.specName }} * <text v-if="selectedGoodsItem.specName">
{{ selectedGoodsItem.num }}</text> {{ selectedGoodsItem.specName }} *
{{ selectedGoodsItem.num }}
</text>
</text> </text>
</view> </view>
</view> </view>
<uni-section v-for="item in detailData?.specificationList" :key="item.id" class="mb-10" <uni-section
:title="item.name"> v-for="item in detailData?.specificationList"
:key="item.id"
class="mb-10"
:title="item.name"
>
<view class="goods-spec"> <view class="goods-spec">
<uni-data-checkbox mode="tag" :value="item.id" :localdata="item.valueList" <uni-data-checkbox
@change="changeColor" /> mode="tag"
:value="item.id"
:localdata="item.valueList"
@change="changeColor"
/>
</view> </view>
</uni-section> </uni-section>
...@@ -77,7 +114,12 @@ ...@@ -77,7 +114,12 @@
</uni-section> </uni-section>
</view> </view>
<view class="popup-bottom-button"> <view class="popup-bottom-button">
<view v-if="showPopupButton === 0" class="add-to-cart" @click="addToCart"><text>确定</text> <view
v-if="showPopupButton === 0"
class="add-to-cart"
@click="addToCart"
>
<text>确定</text>
</view> </view>
<view v-else class="buy-now" @click="buyNow"><text>购买</text></view> <view v-else class="buy-now" @click="buyNow"><text>购买</text></view>
</view> </view>
...@@ -95,12 +137,22 @@ ...@@ -95,12 +137,22 @@
</view> --> </view> -->
<view class="goods-intro"> <view class="goods-intro">
<uni-segmented-control :current="current" :values="tabButtons" @clickItem="onClickItem" styleType="text" <uni-segmented-control
activeColor="#e43d33"></uni-segmented-control> :current="current"
:values="tabButtons"
@clickItem="onClickItem"
styleType="text"
activeColor="#e43d33"
></uni-segmented-control>
<view class="content"> <view class="content">
<view v-show="current === 0"> <view v-show="current === 0">
<u-parse v-if="detailData?.info.detail" :html="detailData?.info.detail" :show-with-animation="true" <u-parse
lazy-load style="font-size: 0" /> v-if="detailData?.info.detail"
:html="detailData?.info.detail"
:show-with-animation="true"
lazy-load
style="font-size: 0"
/>
<u-empty v-else text="暂无数据" mode="data" /> <u-empty v-else text="暂无数据" mode="data" />
</view> </view>
<view v-show="current === 1">选项卡2的内容</view> <view v-show="current === 1">选项卡2的内容</view>
...@@ -108,8 +160,13 @@ ...@@ -108,8 +160,13 @@
</view> </view>
<!-- 提交订单栏 --> <!-- 提交订单栏 -->
<view class="bottom-bar"> <view class="bottom-bar">
<uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" @click="onClick" <uni-goods-nav
@buttonClick="buttonClick" /> :fill="true"
:options="options"
:button-group="buttonGroup"
@click="onClick"
@buttonClick="buttonClick"
/>
</view> </view>
<!-- 属性弹窗 --> <!-- 属性弹窗 -->
...@@ -117,580 +174,578 @@ ...@@ -117,580 +174,578 @@
<view class="attr-content"> <view class="attr-content">
<view class="title">商品属性</view> <view class="title">商品属性</view>
<view v-if="detailData?.attribute.length !== 0"> <view v-if="detailData?.attribute.length !== 0">
<view v-for="(item, index) in detailData?.attribute" :key="item.id" class="details"> <view
v-for="(item, index) in detailData?.attribute"
:key="item.id"
class="details"
>
<text class="left">{{ item.attribute }}</text> <text class="left">{{ item.attribute }}</text>
<text class="right">{{ item.value }}</text> <text class="right">{{ item.value }}</text>
<u-line v-show="detailData?.attribute.length - 1 !== index" /> <u-line v-show="detailData?.attribute.length - 1 !== index" />
</view> </view>
</view> </view>
<view v-else> <view v-else><u-empty text="暂无属性" mode="data" /></view>
<u-empty text="暂无属性" mode="data" />
</view>
</view> </view>
</u-popup> </u-popup>
</view> </view>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { import { ref } from 'vue';
ref import { onLoad } from '@dcloudio/uni-app';
} from 'vue'; import {
import { indexDetails,
onLoad addCart,
} from '@dcloudio/uni-app'; fastaddCart
import { } from '@/api/index';
indexDetails, import _ from 'lodash';
addCart,
fastaddCart
} from '@/api/index'; const attrPopup = ref(false);
import _ from 'lodash'; const detailData = ref();
const popup = ref();
const tabButtons = ref(['商品详情']);
const attrPopup = ref(false); let current = ref(0);
const detailData = ref();
const popup = ref(); const goodsInfo = ref({
const tabButtons = ref(['商品详情']); id: 1,
let current = ref(0); star: true,
});
const goodsInfo = ref({
id: 1, const selectedGoodsItem = ref({
star: true, id: '',
}); specName: '',
img: '',
const selectedGoodsItem = ref({ price: '',
id: '', num: 1
specName: '', });
img: '',
price: '', const radioValue = ref(selectedGoodsItem.value.id);
num: 1
}); const options = ref([{
icon: 'chat',
const radioValue = ref(selectedGoodsItem.value.id); text: '客服'
},
const options = ref([{ {
icon: 'chat', icon: 'shop',
text: '客服' text: '店铺'
}, },
{ {
icon: 'shop', icon: goodsInfo.value.star ? 'star-filled' : 'star',
text: '店铺' text: '收藏'
}, }
{ ]);
icon: goodsInfo.value.star ? 'star-filled' : 'star',
text: '收藏' const buttonGroup = ref([{
} text: '加入购物车',
]); backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
color: '#fff'
const buttonGroup = ref([{ },
text: '加入购物车', {
backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)', text: '立即购买',
color: '#fff' backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
}, color: '#fff'
{ }
text: '立即购买', ]);
backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
color: '#fff' const detailId = ref()
}
]); onLoad((options: any) => {
console.log(options);
const detailId = ref() detailId.value = options.id
initDetails(options.id)
onLoad((options: any) => { });
console.log(options);
detailId.value = options.id // 点击分组
initDetails(options.id) const clickGroup = (index: number) => {
}); switch (index) {
case 0:
// 点击分组 popup.value.open('bottom');
const clickGroup = (index: number) => { resetSelected();
switch (index) { break;
case 0: case 1:
popup.value.open('bottom'); attrPopup.value = true;
resetSelected(); }
break; };
case 1:
attrPopup.value = true; // 添加checkoutbox属性
} const specificationList = () => {
}; detailData.value?.specificationList.map((item: any, i: number) => {
item.valueList.map((key: any, k: number) => {
// 添加checkoutbox属性 if (key.value !== key.id) {
const specificationList = () => { detailData.value!.specificationList[i].valueList[k]['text'] = key.value
detailData.value?.specificationList.map((item: any, i: number) => { detailData.value!.specificationList[i].valueList[k]['value'] = key.id
item.valueList.map((key: any, k: number) => { }
if (key.value !== key.id) {
detailData.value!.specificationList[i].valueList[k]['text'] = key.value
detailData.value!.specificationList[i].valueList[k]['value'] = key.id
}
})
}) })
// detailData.value?.productList.map((item: any, i: number) => { })
// detailData.value!.productList[i]['text'] = item.specifications[0] // detailData.value?.productList.map((item: any, i: number) => {
// detailData.value!.productList[i]['value'] = item.id // detailData.value!.productList[i]['text'] = item.specifications[0]
// }) // detailData.value!.productList[i]['value'] = item.id
// console.log(detailData.value?.productList, '456'); // })
// console.log(detailData.value?.productList, '456');
}
const onClick = (e: any) => {
if (e.index === 0) {
console.log('客服');
} }
if (e.index === 1) {
const onClick = (e: any) => { console.log('店铺');
if (e.index === 0) { }
console.log('客服'); if (e.index === 2) {
} console.log('收藏');
if (e.index === 1) { goodsInfo.value.star = !goodsInfo.value.star;
console.log('店铺'); e.content.icon = goodsInfo.value.star ? 'star-filled' : 'star';
} let text = '';
if (e.index === 2) { text = goodsInfo.value.star ? '已收藏' : '已取消收藏';
console.log('收藏'); uni.showToast({
goodsInfo.value.star = !goodsInfo.value.star; title: text,
e.content.icon = goodsInfo.value.star ? 'star-filled' : 'star'; icon: 'none'
let text = ''; });
text = goodsInfo.value.star ? '已收藏' : '已取消收藏'; }
};
/**
* popup中按钮展示状态
*/
const showPopupButton = ref(0);
const buttonClick = (e: any) => {
if (e.index === 0)
showPopupButton.value = 0;
if (e.index === 1)
showPopupButton.value = 1;
openPopup();
};
// 打开规格选择
const openPopup = () => {
popup.value.open('bottom');
resetSelected();
};
// 添加购物车
const addToCart = () => {
if (!selectedGoodsItem.value.specName) return uni.showToast({
title: '请先选择' + detailData.value?.specificationList[0].name,
icon: 'none'
})
let productId: any = getProductIdByOne(selectedGoodsItem.value.id)
console.log(productId, productId);
addCart({
goodsId: detailId.value,
number: selectedGoodsItem.value.num,
productId: productId
}).then((res: any) => {
if (res.data.errno !== 711) {
initDetails(detailId.value)
popup.value.close();
uni.showToast({ uni.showToast({
title: text, title: '已添加至购物车',
icon: 'none'
});
} else {
uni.showToast({
title: res.data.errmsg,
icon: 'none' icon: 'none'
}); });
} }
}; })
};
/**
* popup中按钮展示状态 // 立即购买
*/ const buyNow = () => {
const showPopupButton = ref(0); if (!selectedGoodsItem.value.specName) return uni.showToast({
title: '请先选择' + detailData.value?.specificationList[0].name,
const buttonClick = (e: any) => { icon: 'none'
if (e.index === 0) })
showPopupButton.value = 0; let productId: any = getProductIdByOne(selectedGoodsItem.value.id)
if (e.index === 1) let data: object = {
showPopupButton.value = 1; goodsId: Number(detailId.value),
openPopup(); number: selectedGoodsItem.value.num,
}; productId: productId
}
// 打开规格选择 fastaddCart(data).then((res: any) => {
const openPopup = () => { if (res.data.code !== 711) {
popup.value.open('bottom'); uni.navigateTo({
resetSelected(); url: `../order/checkout`,
}; success() {
uni.setStorage({
// 添加购物车 data: res.data.data,
const addToCart = () => { key: 'buyNowId'
if (!selectedGoodsItem.value.specName) return uni.showToast({ })
title: '请先选择' + detailData.value?.specificationList[0].name, if(!uni.getStorageSync('addressId')) {
icon: 'none'
})
let productId: any = getProductIdByOne(selectedGoodsItem.value.id)
console.log(productId, productId);
addCart({
goodsId: detailId.value,
number: selectedGoodsItem.value.num,
productId: productId
}).then((res: any) => {
if (res.data.errno !== 711) {
initDetails(detailId.value)
popup.value.close();
uni.showToast({
title: '已添加至购物车',
icon: 'none'
});
} else {
uni.showToast({
title: res.data.errmsg,
icon: 'none'
});
}
})
};
// 立即购买
const buyNow = () => {
if (!selectedGoodsItem.value.specName) return uni.showToast({
title: '请先选择' + detailData.value?.specificationList[0].name,
icon: 'none'
})
let productId: any = getProductIdByOne(selectedGoodsItem.value.id)
let data: object = {
goodsId: Number(detailId.value),
number: selectedGoodsItem.value.num,
productId: productId
}
fastaddCart(data).then((res: any) => {
if (res.data.errno !== 711) {
uni.navigateTo({
url: `../order/checkout`,
success() {
uni.setStorage({ uni.setStorage({
data: res.data.data, key: 'addressId',
key: 'buyNowId' data: 0
}) })
if(!uni.getStorageSync('addressId')) {
uni.setStorage({
key: 'addressId',
data: 0
})
}
let storage: any = {
cartId: 0,
couponId: 0,
userCouponId: 0,
grouponRulesId: 0
}
Object.keys(storage).forEach((prop: any) => {
const el: any = storage[prop];
uni.setStorage({
key: prop,
data: el
})
});
popup.value.close();
} }
let storage: any = {
cartId: 0,
couponId: 0,
userCouponId: 0,
grouponRulesId: 0
}
Object.keys(storage).forEach((prop: any) => {
const el: any = storage[prop];
uni.setStorage({
key: prop,
data: el
})
});
popup.value.close();
}
})
} else {
uni.showToast({
title: res.data.errmsg,
icon: 'none'
});
}
console.log(res);
})
};
// 初始产品规格数据
const resetSelected = () => {
specificationList()
selectedGoodsItem.value.id = detailData.value?.id;
selectedGoodsItem.value.img = detailData.value?.productList[0].url;
selectedGoodsItem.value.price = detailData.value?.productList[0].price;
selectedGoodsItem.value.specName = '';
selectedGoodsItem.value.num = 1;
radioValue.value = detailData.value?.specificationList[0].valueList[0].value;
};
// 修改商品规格
const changeColor = (e: any) => {
const selected = e.detail.data;
console.log('选择产品规格', selected);
selectedGoodsItem.value.id = selected.id;
selectedGoodsItem.value.img = selected.picUrl;
selectedGoodsItem.value.price = detailData.value?.productList[0].price;
selectedGoodsItem.value.specName = selected.text;
};
// 购买数量
const changeBuyNum = (value: number) => {
selectedGoodsItem.value.num = value;
};
// 选择选项卡
const onClickItem = (e: any) => {
if (current.value != e.currentIndex) {
current.value = e.currentIndex;
}
};
// 初始化商品详情数据
const initDetails = (id: number) => {
indexDetails({
id
}).then((res: any) => {
if (res.data.code === 200) {}
// 去除数据 换行符
for (let s in res.data.data?.attribute) {
const value = res.data.data?.attribute[s].value.split('\n')
if (value.length > 1) {
let str: string = ''
value.forEach((item: string) => {
str += ' ' + item
}) })
} else { res.data.data!.attribute[s].value = str
uni.showToast({
title: res.data.errmsg,
icon: 'none'
});
} }
console.log(res);
})
};
// 初始产品规格数据
const resetSelected = () => {
specificationList()
selectedGoodsItem.value.id = detailData.value?.id;
selectedGoodsItem.value.img = detailData.value?.productList[0].url;
selectedGoodsItem.value.price = detailData.value?.productList[0].price;
selectedGoodsItem.value.specName = '';
selectedGoodsItem.value.num = 1;
radioValue.value = detailData.value?.specificationList[0].valueList[0].value;
};
// 修改商品规格
const changeColor = (e: any) => {
const selected = e.detail.data;
console.log('选择产品规格', selected);
selectedGoodsItem.value.id = selected.id;
selectedGoodsItem.value.img = selected.picUrl;
selectedGoodsItem.value.price = detailData.value?.productList[0].price;
selectedGoodsItem.value.specName = selected.text;
};
// 购买数量
const changeBuyNum = (value: number) => {
selectedGoodsItem.value.num = value;
};
// 选择选项卡
const onClickItem = (e: any) => {
if (current.value != e.currentIndex) {
current.value = e.currentIndex;
} }
}; detailData.value = res.data.data;
console.log(detailData.value, '商品详情数据');
// 初始化商品详情数据 });
const initDetails = (id: number) => { }
indexDetails({
id const getProductIdByOne = (s1: any) => {
}).then((res: any) => { console.log(s1);
if (res.data.code === 200) {} let productId;
// 去除数据 换行符 let s1Name: string;
for (let s in res.data.data?.attribute) { _.each(detailData.value?.specificationList, (specification: any) => {
const value = res.data.data?.attribute[s].value.split('\n') _.each(specification.valueList, (specValue: any) => {
if (value.length > 1) { if (specValue.id === s1) {
let str: string = '' s1Name = specValue.text;
value.forEach((item: string) => { return;
str += ' ' + item
})
res.data.data!.attribute[s].value = str
}
} }
detailData.value = res.data.data;
console.log(detailData.value, '商品详情数据');
});
}
const getProductIdByOne = (s1: any) => {
console.log(s1);
let productId;
let s1Name: string;
_.each(detailData.value?.specificationList, (specification: any) => {
_.each(specification.valueList, (specValue: any) => {
if (specValue.id === s1) {
s1Name = specValue.text;
return;
}
});
}); });
});
_.each(detailData.value?.productList, (v: any) => { _.each(detailData.value?.productList, (v: any) => {
let result = _.without(v.specifications, s1Name); let result = _.without(v.specifications, s1Name);
if (result.length === 0) { if (result.length === 0) {
productId = v.id; productId = v.id;
} }
}); });
return productId; return productId;
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.goods-detail { .goods-detail {
//height: 800rpx; //height: 800rpx;
//background-color: #FFFFFF; //background-color: #FFFFFF;
.goods-img { .goods-img {
.swiper { .swiper {
height: 600rpx; height: 600rpx;
.swiper-item { .swiper-item {
display: block; display: block;
height: 100%; height: 100%;
line-height: 600rpx; line-height: 600rpx;
text-align: center; text-align: center;
.banner { .banner {
width: 100%; width: 100%;
height: 100%; height: 100%;
}
} }
} }
} }
}
.goods-info { .goods-info {
//height: 200rpx; //height: 200rpx;
background-color: #ffffff; background-color: #ffffff;
padding: 20rpx 30rpx; padding: 20rpx 30rpx;
font-family: arial, sans-serif; font-family: arial, sans-serif;
border-bottom-left-radius: 30rpx; border-bottom-left-radius: 30rpx;
border-bottom-right-radius: 30rpx; border-bottom-right-radius: 30rpx;
.goods-title { .goods-title {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
display: -webkit-box; display: -webkit-box;
word-break: break-all; word-break: break-all;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
} }
.goods-sub {
font-size: 12px;
color: #ccc;
display: -webkit-box;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.goods-price { .goods-sub {
color: #dd524d; font-size: 12px;
//position: absolute; color: #ccc;
font-size: 40rpx; display: -webkit-box;
display: flex; word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.unit { .goods-price {
// font-size: 10px; color: #dd524d;
} //position: absolute;
font-size: 40rpx;
display: flex;
.price { .unit {
// font-size: 16px; // font-size: 10px;
font-weight: bold;
}
} }
.goods-cost-price { .price {
color: #ccc; // font-size: 16px;
text-decoration: line-through; font-weight: bold;
font-size: 24rpx;
margin-left: 10rpx;
} }
} }
.cell-group { .goods-cost-price {
margin-top: 20rpx; color: #ccc;
border-radius: 30rpx; text-decoration: line-through;
font-size: 24rpx;
margin-left: 10rpx;
} }
}
.goods-detail-item { .cell-group {
margin-top: 20rpx; margin-top: 20rpx;
background-color: #ffffff; border-radius: 30rpx;
// padding: 20rpx 30rpx; }
font-size: 30rpx;
font-family: arial, sans-serif;
color: rgb(192, 192, 192);
// border-radius: 30rpx;
.popup-selected-spec {
height: 800rpx;
//background-color: #FFFFFF;
.goods-item {
padding: 40rpx;
display: flex;
border-bottom: 1px solid #ebeef5;
//position: absolute;
.goods-mini-img {
width: 100rpx;
height: 100rpx;
border-radius: 10rpx;
//border: 2rpx soild black;
}
.goods-text { .goods-detail-item {
margin-top: 10rpx; margin-top: 20rpx;
margin-left: 50rpx; background-color: #ffffff;
// padding: 20rpx 30rpx;
font-size: 30rpx;
font-family: arial, sans-serif;
color: rgb(192, 192, 192);
// border-radius: 30rpx;
.popup-selected-spec {
height: 800rpx;
//background-color: #FFFFFF;
.goods-item {
padding: 40rpx;
display: flex;
border-bottom: 1px solid #ebeef5;
//position: absolute;
.goods-mini-img {
width: 100rpx;
height: 100rpx;
border-radius: 10rpx;
//border: 2rpx soild black;
}
.goods-price { .goods-text {
color: #dd524d; margin-top: 10rpx;
display: flex; margin-left: 50rpx;
.unit { .goods-price {
font-size: 10px; color: #dd524d;
} display: flex;
.price { .unit {
font-size: 16px; font-size: 10px;
font-weight: bold;
}
} }
.goods-selected { .price {
margin-top: 20rpx; font-size: 16px;
display: flex; font-weight: bold;
} }
} }
}
.goods-spec { .goods-selected {
margin-left: 30rpx; margin-top: 20rpx;
display: flex;
}
} }
} }
.popup-bottom-button { .goods-spec {
height: 80rpx; margin-left: 30rpx;
display: flex;
flex: 1;
color: rgb(255, 255, 255);
.add-to-cart {
display: flex;
flex: 1;
margin: 0 30rpx 0 50rpx;
justify-content: center;
align-items: center;
overflow: hidden;
border-radius: 50rpx;
background: linear-gradient(90deg, rgb(255, 205, 30), rgb(255, 138, 24));
}
.buy-now {
display: flex;
flex: 1;
margin: 0 50rpx 0 30rpx;
justify-content: center;
align-items: center;
overflow: hidden;
border-radius: 50rpx;
background: linear-gradient(90deg, rgb(254, 96, 53), rgb(239, 18, 36));
}
} }
} }
.shop-info { .popup-bottom-button {
height: 160rpx; height: 80rpx;
background-color: #ffffff;
margin-top: 20rpx;
border-radius: 30rpx;
display: flex; display: flex;
flex: 1;
color: rgb(255, 255, 255);
.shop-logo-box { .add-to-cart {
padding: 30rpx; display: flex;
height: 100rpx; flex: 1;
width: 100rpx; margin: 0 30rpx 0 50rpx;
border-radius: 10rpx; justify-content: center;
align-items: center;
overflow: hidden; overflow: hidden;
border-radius: 50rpx;
.shop-logo { background: linear-gradient(90deg, rgb(255, 205, 30), rgb(255, 138, 24));
width: 100%;
height: 100%;
object-fit: cover;
}
} }
.shop-desc { .buy-now {
display: flex;
flex: 1; flex: 1;
margin: 0 50rpx 0 30rpx;
justify-content: center;
align-items: center;
overflow: hidden;
border-radius: 50rpx;
background: linear-gradient(90deg, rgb(254, 96, 53), rgb(239, 18, 36));
}
}
}
.shop-name { .shop-info {
font-weight: bold; height: 160rpx;
font-family: 'Helvetica Neue', Helvetica, sans-serif; background-color: #ffffff;
line-height: 160rpx; margin-top: 20rpx;
} border-radius: 30rpx;
display: flex;
.shop-logo-box {
padding: 30rpx;
height: 100rpx;
width: 100rpx;
border-radius: 10rpx;
overflow: hidden;
.shop-logo {
width: 100%;
height: 100%;
object-fit: cover;
} }
}
.shop-enter-button { .shop-desc {
line-height: 160rpx; flex: 1;
padding-right: 30rpx;
text { .shop-name {
color: rgb(255, 138, 24); font-weight: bold;
font-size: 24rpx; font-family: 'Helvetica Neue', Helvetica, sans-serif;
padding: 5rpx 15rpx; line-height: 160rpx;
border: 1rpx solid rgb(254, 96, 53);
border-radius: 10rpx;
}
} }
} }
.goods-intro { .shop-enter-button {
//height: 160rpx; line-height: 160rpx;
background-color: #ffffff; padding-right: 30rpx;
margin-top: 20rpx;
border-radius: 30rpx;
.content { text {
width: 100%; color: rgb(255, 138, 24);
margin-top: 30rpx; font-size: 24rpx;
margin-bottom: calc(100rpx + env(safe-area-inset-bottom)); padding: 5rpx 15rpx;
display: inline-block; border: 1rpx solid rgb(254, 96, 53);
border-radius: 10rpx;
} }
} }
}
.bottom-bar { .goods-intro {
display: flex; //height: 160rpx;
flex-direction: column; background-color: #ffffff;
position: fixed; margin-top: 20rpx;
left: var(--window-left); border-radius: 30rpx;
right: var(--window-right);
bottom: 0; .content {
padding-bottom: constant(safe-area-inset-bottom); width: 100%;
background-color: #ffffff; margin-top: 30rpx;
padding-bottom: env(safe-area-inset-bottom); margin-bottom: calc(100rpx + env(safe-area-inset-bottom));
display: inline-block;
} }
} }
.attr-content { .bottom-bar {
padding: 32rpx 40rpx; display: flex;
flex-direction: column;
position: fixed;
left: var(--window-left);
right: var(--window-right);
bottom: 0;
padding-bottom: constant(safe-area-inset-bottom);
background-color: #ffffff;
padding-bottom: env(safe-area-inset-bottom);
}
}
.title { .attr-content {
text-align: center; padding: 32rpx 40rpx;
margin-bottom: 100rpx;
}
.details { .title {
width: 100%; text-align: center;
font-size: 14px; margin-bottom: 100rpx;
}
.left { .details {
display: inline-block; width: 100%;
width: 40%; font-size: 14px;
padding: 20rpx 0;
}
.right { .left {
padding: 20rpx 0; display: inline-block;
} width: 40%;
padding: 20rpx 0;
}
.right {
padding: 20rpx 0;
} }
} }
}
</style> </style>
src/pages/index/index.vue
浏览文件 @ 7e60b1e3
<template> <template>
<!-- 搜索 --> <!-- 搜索 -->
<view><uni-search-bar placeholder="输入搜索商品" bgColor="#EEEEEE" clearButton="auto" cancelButton="none" @blur="blur" @focus="focus" @confirm="search" /></view> <view>
<uni-search-bar
placeholder="输入搜索商品"
bgColor="#EEEEEE"
clearButton="auto"
cancelButton="none"
@confirm="search"
/>
</view>
<!-- 轮播图 --> <!-- 轮播图 -->
<view class="wrap"><u-swiper :list="indexData?.banner" name="url" height="400"></u-swiper></view> <view class="wrap">
<u-swiper :list="indexData?.banner" name="url" height="400"></u-swiper>
</view>
<!-- 宫格布局 --> <!-- 宫格布局 -->
<u-grid :col="4" class="grid" @tap="clickGrid"> <u-grid :col="6" class="grid" @tap="clickGrid">
<u-grid-item v-for="(item, index) in indexData?.channel" :key="item.id" :index="item.id"> <u-grid-item v-for="(item, index) in indexData?.channel" :key="item.id" :index="item.id">
<u-icon :name="item.iconUrl" :size="46"></u-icon> <u-icon :name="item.iconUrl" :size="46"></u-icon>
<view class="grid-text">{{ item.name }}</view> <view class="grid-text">{{ item.name }}</view>
...@@ -12,53 +22,141 @@ ...@@ -12,53 +22,141 @@
</u-grid> </u-grid>
<view class="goods"> <view class="goods">
<view style="padding: 20rpx 20rpx;"><u-section title="新品首发" sub-title="查看更多" :show-line="false" /></view> <!-- 人气推荐 -->
<uni-row> <view class="Hot">
<uni-col :span="12" v-for="(item, index) in indexData?.newGoodsList" :key="item.id"> <view style="padding: 20rpx 20rpx;">
<view class="goods-item" @tap="viewGoods(item)"> <u-section
<image class="goods-img" :src="item.picUrl"></image> title="人气推荐"
<view class="goods-infos"> sub-title="查看更多"
<uni-row> :show-line="false"
<uni-col :span="24"> @click="toHot"
<text class="goods-title">{{ item.name }}</text> />
</uni-col> </view>
<uni-col> <goodsItem
<uni-row> v-for="item in indexData?.hotGoodsList"
<uni-col :span="24"> :src="item.picUrl"
<text class="goods-price"> :name="item.name"
<text class="unit">￥</text> :brief="item.brief"
<text class="price">{{ item.counterPrice }}</text> :counterPrice="item.counterPrice"
</text> :retailPrice="item.retailPrice"
</uni-col> @tap="hotGoods(item)"
<!-- <uni-col :span="12"> />
</view>
<!-- 新品首发 -->
<view class="new" style="margin-top: 20rpx;">
<view style="padding: 20rpx 20rpx;">
<u-section
title="新品首发"
sub-title="查看更多"
:show-line="false"
@click="toNew"
/>
</view>
<uni-row>
<uni-col :span="12" v-for="(item, index) in indexData?.newGoodsList" :key="item.id">
<view class="goods-item" @tap="newGoods(item)">
<image class="goods-img" :src="item.picUrl"></image>
<view class="goods-infos">
<uni-row>
<uni-col :span="24">
<text class="goods-title">{{ item.name }}</text>
</uni-col>
<uni-col>
<uni-row>
<uni-col :span="24">
<text class="goods-price">
<text class="unit">￥</text>
<text class="price">{{ item.counterPrice }}</text>
</text>
</uni-col>
<!-- <uni-col :span="12">
<text class="goods-sales-count"> <text class="goods-sales-count">
<text>销量</text> <text>销量</text>
<text>{{ item.sales }}</text> <text>{{ item.sales }}</text>
</text> </text>
</uni-col> --> </uni-col> -->
</uni-row> </uni-row>
</uni-col> </uni-col>
</uni-row> </uni-row>
</view>
</view> </view>
</view> </uni-col>
</uni-col> </uni-row>
</uni-row> </view>
<!-- 专题精选 -->
<view class="topic" style="margin-top: 20rpx;">
<view style="padding: 20rpx 20rpx;">
<u-section
title="专题精选"
sub-title="查看更多"
:show-line="false"
@click="toTopicList"
/>
</view>
<u-row gutter="16" justify="start">
<u-col
v-for="item in indexData?.topicList"
:key="item.id"
span="6"
style="height: 500rpx; background-color: #fff; border: 1px solid #ebedf0; padding: 32rpx 16rpx;"
@click="toTopic(item)"
>
<view class="topic-item">
<u-image width="100%" height="200rpx" :src="item.picUrl"></u-image>
<view class="title">
<view>{{ item.title }}</view>
<view class="text">{{ item.subtitle }}</view>
</view>
</view>
</u-col>
</u-row>
</view>
</view> </view>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { homeIndex } from '@/api/index'; import { homeIndex } from '@/api/index';
import goodsItem from '@/components/goodsItem.vue';
const indexData = ref(); const indexData = ref();
const search = (val: any) => {
uni.navigateTo({ url: './search?keyword=' + val.value });
};
const clickGrid = (index: any) => { const clickGrid = (index: any) => {
uni.navigateTo({ url: '/pages/category/items?id=' + index }); uni.navigateTo({ url: '/pages/category/items?id=' + index });
}; };
const viewGoods = (row: any) => { const newGoods = (row: any) => {
uni.navigateTo({ url: '/pages/goods/index?id=' + row.id });
};
const hotGoods = (row: any) => {
uni.navigateTo({ url: '/pages/goods/index?id=' + row.id }); uni.navigateTo({ url: '/pages/goods/index?id=' + row.id });
}; };
const toNew = () => {
uni.navigateTo({ url: '/pages/category/new' });
};
const toHot = () => {
uni.navigateTo({ url: '/pages/category/hot' });
};
const toTopicList = () => {
uni.navigateTo({ url: '/pages/category/topicList' });
};
const toTopic = (row: any) => {
uni.navigateTo({
url: `../category/topic?id=${row.id}`,
fail(err) {
console.log(err);
},
});
};
const initIndex = () => { const initIndex = () => {
homeIndex().then((res: any) => { homeIndex().then((res: any) => {
...@@ -131,4 +229,18 @@ initIndex(); ...@@ -131,4 +229,18 @@ initIndex();
} }
} }
} }
.topic {
width: 100%;
.topic-item {
.title {
margin-top: 20rpx;
font-size: 28rpx;
color: rgb(171, 149, 109);
.text {
overflow: hidden;
}
}
}
}
</style> </style>
src/pages/index/search.vue 0 → 100644
浏览文件 @ 7e60b1e3
<template>
<view style="padding: 24rpx;">
<uni-search-bar
v-model="searchQuery.keyword"
placeholder="输入搜索商品"
bgColor="#EEEEEE"
clearButton="auto"
cancelButton="none"
@confirm="search"
/>
<view v-if="searchList.length !== 0">
<goodsItem
v-for="item in searchList"
:src="item.picUrl"
:name="item.name"
:brief="item.brief"
:counterPrice="item.counterPrice"
:retailPrice="item.retailPrice"
@tap="searchGoods(item)"
/>
<u-loadmore :status="status" icon-type="flower" />
</view>
<view v-else><u-loadmore status="nomore" icon-type="flower" /></view>
</view>
</template>
<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
import { getGoodsList } from '@/api/category';
import { onReachBottom } from '@dcloudio/uni-app';
import goodsItem from '@/components/goodsItem.vue';
let searchQuery = reactive({
keyword: '',
page: 1,
limit: 10,
categoryId: 0,
});
let status = ref('loadmore');
let total = ref(0);
let searchList = ref([] as any);
let search = (val: any) => {
searchList.value = [];
searchQuery.page = 1
searchQuery.keyword = val.value;
initList();
};
// 上拉加载数据
onReachBottom(() => {
// 判断是否还有下一页数据
if (searchQuery.page * searchQuery.limit >= total.value) return (status.value = 'nomore');
// // 判断是否正在请求其它数据，如果是，则不发起额外的请求
if (status.value === 'loading') return;
searchQuery.page += 1;
initList();
});
const searchGoods = (row: any) => {
uni.navigateTo({ url: '/pages/goods/index?id=' + row.id });
};
onLoad((options: any) => {
searchQuery.keyword = options.keyword;
initList();
});
let initList = () => {
status.value = 'loading';
getGoodsList(searchQuery).then((res: any) => {
if (res.data.data.total > 10) status.value = 'loadmore';
else status.value = 'nomore';
if (res.data.code === 200) {
total.value = res.data.data.total;
searchList.value = [...searchList.value, ...res.data.data.list];
}
});
};
</script>
<style lang="scss" scoped>
page {
background-color: #fff;
}
</style>
src/pages/login/login.vue
浏览文件 @ 7e60b1e3
<template> <template>
<view class="login-container"> <view class="login-container">
<image src="https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/logo/logo.png" mode="scaleToFill" class="title-iamge"></image> <image
src="https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/logo/logo.png"
mode="scaleToFill"
class="title-iamge"
></image>
<text class="login-text">欢迎登陆</text> <text class="login-text">欢迎登陆</text>
<view class="login-form"> <view class="login-form">
...@@ -26,7 +30,7 @@ let inputData = reactive({ ...@@ -26,7 +30,7 @@ let inputData = reactive({
type: 'text', type: 'text',
checkType: 'phone', checkType: 'phone',
check: false, check: false,
checkContent: '请输入有效手机号' checkContent: '请输入有效手机号',
}); });
let inputData1 = reactive({ let inputData1 = reactive({
...@@ -36,7 +40,7 @@ let inputData1 = reactive({ ...@@ -36,7 +40,7 @@ let inputData1 = reactive({
type: 'password', type: 'password',
checkType: 'passWord', checkType: 'passWord',
check: false, check: false,
checkContent: '请输入密码' checkContent: '请输入密码',
}); });
let hangleInput = (Value: any, type: string) => { let hangleInput = (Value: any, type: string) => {
...@@ -64,8 +68,8 @@ let clickNextStep = () => { ...@@ -64,8 +68,8 @@ let clickNextStep = () => {
// user123 // user123
let initLogin = async (mobile: number, password: string) => { let initLogin = async (mobile: number, password: string) => {
uni.clearStorage();
let res: any = await login({ mobile, password }); let res: any = await login({ mobile, password });
console.log(res);
if (res.data.code == 200) { if (res.data.code == 200) {
uni.setStorage({ uni.setStorage({
key: 'token', key: 'token',
...@@ -81,19 +85,19 @@ let initLogin = async (mobile: number, password: string) => { ...@@ -81,19 +85,19 @@ let initLogin = async (mobile: number, password: string) => {
uni.showToast({ uni.showToast({
title: '登陆成功', title: '登陆成功',
icon: 'none', icon: 'none',
duration: 1000 duration: 1000,
}); });
} },
}); });
} },
}); });
} },
}); });
} else { } else {
uni.showToast({ uni.showToast({
title: '手机号或密码错误', title: '手机号或密码错误',
icon: 'none', icon: 'none',
duration: 2000 duration: 2000,
}); });
} }
}; };
......
src/pages/order/checkout.vue
浏览文件 @ 7e60b1e3
...@@ -18,11 +18,18 @@ ...@@ -18,11 +18,18 @@
<view v-for="(item, index) in buyNowData?.checkedGoodsList" class="details"> <view v-for="(item, index) in buyNowData?.checkedGoodsList" class="details">
<u-image width="140rpx" height="200rpx" :src="item.picUrl" class="img"></u-image> <u-image width="140rpx" height="200rpx" :src="item.picUrl" class="img"></u-image>
<view class="right"> <view class="right">
<view class="name"> <view class="name">{{ item.goodsName }}</view>
{{ item.goodsName }} <view
</view> class="tag"
<view class="tag" v-for="(item1, index1) in item.specifications.length" :key="index1"> v-for="(item1, index1) in item.specifications.length"
<u-tag :text="item.specifications[index1]" type="info" size="mini" style="margin-right: 2rpx;" /> :key="index1"
>
<u-tag
:text="item.specifications[index1]"
type="info"
size="mini"
style="margin-right: 2rpx;"
/>
</view> </view>
<view class="sum-price"> <view class="sum-price">
<text>￥{{ item.price.toFixed(2) }}</text> <text>￥{{ item.price.toFixed(2) }}</text>
...@@ -56,7 +63,10 @@ ...@@ -56,7 +63,10 @@
<view> <view>
<text style="font-size: 30rpx;">总计</text> <text style="font-size: 30rpx;">总计</text>
<text <text
style="margin-right: 24rpx; color: #ee0a24; font-size: 30rpx; font-weight: 600;">￥{{ buyNowData?.orderTotalPrice.toFixed(2) }}</text> style="margin-right: 24rpx; color: #ee0a24; font-size: 30rpx; font-weight: 600;"
>
￥{{ buyNowData?.orderTotalPrice.toFixed(2) }}
</text>
<u-button type="error" size="medium" shape="circle" @tap="onsubmit">结算</u-button> <u-button type="error" size="medium" shape="circle" @tap="onsubmit">结算</u-button>
</view> </view>
</view> </view>
...@@ -64,193 +74,186 @@ ...@@ -64,193 +74,186 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { import { onShow, onHide } from '@dcloudio/uni-app';
onLoad, import { ref } from 'vue';
onShow import { checkoutCart, orderDetail, orderSubmit } from '@/api/index';
} from '@dcloudio/uni-app';
import {
ref
} from 'vue'
import {
checkoutCart,
orderDetail,
orderSubmit
} from '@/api/index'
const buyNowId = ref(uni.getStorageSync('buyNowId'))
const buyNowData = ref()
const remarks = ref() // 订单备注
// onLoad(() => { const buyNowId = ref(uni.getStorageSync('buyNowId') || 0);
// initCheckoutCart(buyNowId.value) const buyNowData = ref();
// }) const remarks = ref(); // 订单备注
// 设置地址 // 设置地址
const tapAddresss = () => { const tapAddresss = () => {
uni.navigateTo({ uni.navigateTo({
url: `../profile/address?cartId=${buyNowId.value}` url: `../profile/address?cartId=${buyNowId.value}`,
}) });
} };
// 结算 // 结算
const onsubmit = () => { const onsubmit = () => {
let data: object = { let data: object = {
addressId: uni.getStorageSync('addressId'), addressId: uni.getStorageSync('addressId'),
cartId: uni.getStorageSync('cartId'), cartId: uni.getStorageSync('cartId'),
couponId: uni.getStorageSync('couponId'), couponId: uni.getStorageSync('couponId'),
grouponLinkId: 0, grouponLinkId: 0,
grouponRulesId: uni.getStorageSync('grouponRulesId'), grouponRulesId: uni.getStorageSync('grouponRulesId'),
message: remarks.value, message: remarks.value,
userCouponId: 0 userCouponId: 0,
} };
// 提交订单 // 提交订单
orderSubmit(data).then((res: any) => { orderSubmit(data).then((res: any) => {
console.log(res); console.log(res);
orderDetail({ orderDetail({
orderId: res.data.data.orderId orderId: res.data.data.orderId,
}).then((res1: any) => { }).then((res1: any) => {
console.log(res1, '订单详情信息'); console.log(res1, '订单详情信息');
uni.switchTab({ uni.switchTab({
url: '../profile/index' url: '../profile/index',
}) });
}) });
}) });
} };
// 初始化数据 // 初始化数据
const initCheckoutCart = (cartId: number) => { const initCheckoutCart = (cartId: number) => {
let couponId = uni.getStorageSync('couponId') let couponId = uni.getStorageSync('couponId');
let userCouponId = uni.getStorageSync('userCouponId') let userCouponId = uni.getStorageSync('userCouponId');
let grouponRulesId = uni.getStorageSync('grouponRulesId') let grouponRulesId = uni.getStorageSync('grouponRulesId');
let addressId = uni.getStorageSync('addressId') let addressId = uni.getStorageSync('addressId');
checkoutCart({ console.log(couponId);
cartId, checkoutCart({
couponId, cartId,
userCouponId, couponId,
grouponRulesId, userCouponId,
addressId grouponRulesId,
}).then((res: any) => { addressId,
buyNowData.value = res.data.data }).then((res: any) => {
buyNowData.value = res.data.data;
let storage: any = { let storage: any = {
addressId: res.data.data.addressId, addressId: res.data.data.addressId,
cartId: res.data.data.cartId, cartId: res.data.data.cartId,
couponId: res.data.data.couponId, couponId: res.data.data.couponId,
userCouponId: res.data.data.userCouponId, userCouponId: res.data.data.userCouponId,
grouponRulesId: res.data.data.grouponRulesId grouponRulesId: res.data.data.grouponRulesId,
} };
Object.keys(storage).forEach((prop: any) => { Object.keys(storage).forEach((prop: any) => {
const el: any = storage[prop]; const el: any = storage[prop];
uni.setStorage({ uni.setStorage({
key: prop, key: prop,
data: el data: el,
})
}); });
console.log(buyNowData.value, '购买数据'); });
}) console.log(buyNowData.value, '购买数据');
} });
};
onShow(() => {
initCheckoutCart(buyNowId.value) onShow(() => {
}) initCheckoutCart(buyNowId.value);
});
onHide(() => {
uni.setStorage({
key: 'buyNowId',
data: 0,
});
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
.address { .address {
width: 100%; width: 100%;
padding: 20rpx 32rpx; padding: 20rpx 32rpx;
border-top: 2rpx solid #e8e8e8; border-top: 2rpx solid #e8e8e8;
background-color: #fff; background-color: #fff;
margin-bottom: 20rpx; margin-bottom: 20rpx;
.top { .top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10rpx;
}
.bottom {
font-size: 24rpx;
color: #969799;
line-height: 36rpx;
}
}
.details {
width: 100%;
padding: 16rpx 32rpx;
display: flex; display: flex;
flex-direction: row; justify-content: space-between;
justify-content: flex-start;
align-items: center; align-items: center;
background-color: #fff; margin-bottom: 10rpx;
}
.img { .bottom {
margin-right: 20rpx; font-size: 24rpx;
} color: #969799;
line-height: 36rpx;
}
}
.tag { .details {
margin-top: 1%; width: 100%;
margin-bottom: 13%; padding: 16rpx 32rpx;
} display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
background-color: #fff;
.right { .img {
width: 80%; margin-right: 20rpx;
}
.sum-price { .tag {
display: flex; margin-top: 1%;
justify-content: space-between; margin-bottom: 13%;
}
}
} }
.list { .right {
width: 100%; width: 80%;
display: flex;
background-color: #fff;
flex-direction: column;
.item-list { .sum-price {
width: 100%;
padding: 20rpx 32rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
}
}
}
.label { .list {
width: 30%; width: 100%;
} display: flex;
background-color: #fff;
flex-direction: column;
.item-price { .item-list {
color: #db3d3c; width: 100%;
} padding: 20rpx 32rpx;
} display: flex;
justify-content: space-between;
.item-list-end { .label {
padding: 20rpx 32rpx; width: 30%;
display: flex; }
justify-content: flex-start;
flex-direction: row;
align-items: center;
.label { .item-price {
width: 30%; color: #db3d3c;
}
} }
} }
.footer { .item-list-end {
position: fixed; padding: 20rpx 32rpx;
bottom: 0;
width: 100%;
height: 100rpx;
background-color: #fff;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-start;
flex-direction: row;
align-items: center; align-items: center;
padding: 0 32rpx;
.label {
width: 30%;
}
} }
} }
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 100rpx;
background-color: #fff;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0 32rpx;
}
}
</style> </style>
src/pages/order/index.vue
浏览文件 @ 7e60b1e3
<template> <template>
<view class="order-container"> <view class="order-container">
<view class="order-search-box"> <view class="order-search-box">
<uni-search-bar <uni-search-bar
placeholder="输入搜索订单" placeholder="输入搜索订单"
bgColor="#EEEEEE" bgColor="#EEEEEE"
clearButton="auto" clearButton="auto"
cancelButton="none" cancelButton="none"
@confirm="search"/> @confirm="search"
</view> />
<view class="order-type-tab"> </view>
<uni-segmented-control <view class="order-type-tab">
ref="orderTypeTab" <uni-segmented-control
:current="currentType" ref="orderTypeTab"
:values="orderTypeTabs" :current="currentType"
@clickItem="changeOrderType" :values="orderTypeTabs"
styleType="text" @clickItem="changeOrderType"
activeColor="#f3a73f"></uni-segmented-control> styleType="text"
<view class="content"> activeColor="#f3a73f"
<view class="order-content"> ></uni-segmented-control>
<view class="order-item" v-for="(item, index) in orderList" :key="index"> <view class="content">
<view class="shop-name"> <view class="order-content">
<text>{{ item.shopName }}</text> <view class="order-item" v-for="(item, index) in orderList" :key="index">
</view> <view class="shop-name">
<view class="order-goods-item" v-for="(goodsItem, goodsIndex) in item.goodsList" :key="goodsIndex"> <text>{{ item.shopName }}</text>
<view class="goods-item"> </view>
<view class="goods-image"> <view
<image :src="goodsItem.img"/> class="order-goods-item"
</view> v-for="(goodsItem, goodsIndex) in item.goodsList"
<view class="goods-info"> :key="goodsIndex"
<view class="goods-title-box"> >
<text class="goods-title">{{ goodsItem.title }}</text> <view class="goods-item">
<text class="goods-spec">{{ goodsItem.spec }}</text> <view class="goods-image"><image :src="goodsItem.img" /></view>
</view> <view class="goods-info">
</view> <view class="goods-title-box">
<view class="goods-price"> <text class="goods-title">{{ goodsItem.title }}</text>
<text>{{ goodsItem.price }}</text> <text class="goods-spec">{{ goodsItem.spec }}</text>
<text>x{{ goodsItem.num }}</text> </view>
</view> </view>
</view> <view class="goods-price">
</view> <text>{{ goodsItem.price }}</text>
<view class="order-bottom"> <text>x{{ goodsItem.num }}</text>
<view class="total-price-box"> </view>
<text>实付款：</text> </view>
<text class="goods-price"> </view>
<text class="unit">￥</text> <view class="order-bottom">
<text class="price">{{item.orderPrice}}</text> <view class="total-price-box">
</text> <text>实付款：</text>
</view> <text class="goods-price">
<view class="option-btn"> <text class="unit">￥</text>
<text class="price">{{ item.orderPrice }}</text>
</view> </text>
</view> </view>
</view> <view class="option-btn"></view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view>
</view>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {ref} from "vue"; import { ref } from 'vue';
import {onLoad} from "@dcloudio/uni-app"; import { onLoad } from '@dcloudio/uni-app';
let currentType = ref(0) let currentType = ref(0);
onLoad((options: any) => { onLoad((options: any) => {
currentType.value = Number.parseInt(options.orderType) + 1 currentType.value = Number.parseInt(options.orderType) + 1;
}) });
const orderTypeTabs = ref(['全部', '待付款', '待发货', '待收货', '待评价']) const orderTypeTabs = ref(['全部', '待付款', '待发货', '待收货', '待评价']);
const orderList = ref([ const orderList = ref([
{ {
shopName: 'Apple官方旗舰店', shopName: 'Apple官方旗舰店',
orderStatus: '待付款', orderStatus: '待付款',
orderPrice: '11000', orderPrice: '11000',
goodsList: [ goodsList: [
{ {
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_1.jpg', img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_1.jpg',
title: 'Iphone 13 Pro Max', title: 'Iphone 13 Pro Max',
spec: '石墨色', spec: '石墨色',
price: '6000', price: '6000',
num: '1', num: '1',
realPrice: '5500' realPrice: '5500',
}, { },
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_1.jpg', {
title: 'Iphone 13 Pro Max 256G 全网通 国行正品', img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_1.jpg',
spec: '石墨色', title: 'Iphone 13 Pro Max 256G 全网通 国行正品',
price: '6000', spec: '石墨色',
num: '1', price: '6000',
realPrice: '5500' num: '1',
} realPrice: '5500',
] },
}, { ],
shopName: 'Apple官方旗舰店', },
orderStatus: '待付款', {
orderPrice: '11000', shopName: 'Apple官方旗舰店',
goodsList: [ orderStatus: '待付款',
{ orderPrice: '11000',
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_1.jpg', goodsList: [
title: 'Iphone 13 Pro Max', {
spec: '石墨色', img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_1.jpg',
price: '6000', title: 'Iphone 13 Pro Max',
num: '1', spec: '石墨色',
realPrice: '5500' price: '6000',
}, { num: '1',
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_1.jpg', realPrice: '5500',
title: 'Iphone 13 Pro Max 256G 全网通 国行正品', },
spec: '石墨色', {
price: '6000', img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_1.jpg',
num: '1', title: 'Iphone 13 Pro Max 256G 全网通 国行正品',
realPrice: '5500' spec: '石墨色',
} price: '6000',
] num: '1',
} realPrice: '5500',
},
]) ],
},
]);
const search = (e: any) => { const search = (e: any) => {
const keyword = e.value const keyword = e.value;
} };
const changeOrderType = (e: any) => { const changeOrderType = (e: any) => {
currentType.value = e.currentIndex currentType.value = e.currentIndex;
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.order-container { .order-container {
.order-search-box { .order-search-box {
}
}
.order-type-tab {
.order-type-tab { .content {
.content { .order-content {
.order-content { .order-item {
.order-item { //height: 300rpx;
//height: 300rpx; //margin: 20rpx 0;
//margin: 20rpx 0; margin-top: 20rpx;
margin-top: 20rpx; padding: 20rpx 30rpx;
padding: 20rpx 30rpx; border-radius: 20rpx;
border-radius: 20rpx; background-color: #ffffff;
background-color: #FFFFFF;
.shop-name {
.shop-name { //padding: 0 0 0 30rpx;
//padding: 0 0 0 30rpx; }
}
.order-goods-item {
.order-goods-item { //padding: 10rpx 0 0 30rpx;
//padding: 10rpx 0 0 30rpx; padding-top: 10rpx;
padding-top: 10rpx;
.goods-item {
.goods-item { display: flex;
display: flex;
.goods-image {
.goods-image { //width: 130rpx;
//width: 130rpx; //height: 130rpx;
//height: 130rpx; min-height: 130rpx;
min-height: 130rpx; min-width: 130rpx;
min-width: 130rpx; max-height: 130rpx;
max-height: 130rpx; max-width: 130rpx;
max-width: 130rpx; border-radius: 20rpx;
border-radius: 20rpx; overflow: hidden;
overflow: hidden;
image {
image { width: 100%;
width: 100%; height: 100%;
height: 100%; }
} }
}
.goods-info {
.goods-info { padding-left: 15rpx;
padding-left: 15rpx; flex: auto;
flex: auto;
.goods-title-box {
.goods-title-box { text-align: left;
text-align: left;
.goods-title {
.goods-title { display: -webkit-box;
display: -webkit-box; word-break: break-all;
word-break: break-all; text-overflow: ellipsis;
text-overflow: ellipsis; overflow: hidden;
overflow: hidden; -webkit-box-orient: vertical;
-webkit-box-orient: vertical; -webkit-line-clamp: 1;
-webkit-line-clamp: 1; }
} }
} }
}
.goods-price {
.goods-price { flex: 1;
flex: 1; display: grid;
display: grid; text-align: right;
text-align: right; right: 0;
right: 0;
text {
text { }
}
} }
} }
}
} .order-bottom {
border-top: #e9e9eb 1px solid;
.order-bottom { .total-price-box {
border-top: #e9e9eb 1px solid; display: flex;
.total-price-box { line-height: 100rpx;
display: flex; font-weight: bold;
line-height: 100rpx; .goods-price {
font-weight: bold; color: #dd524d;
.goods-price { display: flex;
color: #dd524d; flex: auto;
display: flex; .unit {
flex: auto; font-size: 10px;
.unit { }
font-size: 10px; .price {
} font-size: 16px;
.price { }
font-size: 16px; }
} }
} .option-btn {
} }
.option-btn { }
}
} }
} }
} }
}
}
}
} }
</style> </style>
src/pages/order/orderList.vue 0 → 100644
浏览文件 @ 7e60b1e3
<template>
<view>
<view class="wrap">
<view class="u-tabs-box">
<u-tabs-swiper
activeColor="#f29100"
ref="swiperTabs"
:list="list"
:current="current"
@change="change"
:is-scroll="false"
swiperWidth="750"
></u-tabs-swiper>
</view>
<swiper
class="swiper-box"
:current="swiperCurrent"
@transition="transition"
@animationfinish="animationfinish"
>
<swiper-item v-for="(s, i) in list.length" :key="i" class="swiper-item">
<scroll-view
v-if="orderData.length !== 0"
scroll-y
style="height: 100%;width: 100%;"
@scrolltolower="reachBottom"
>
<view class="page-box">
<view class="order" v-for="(res, index) in orderData" :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.orderSn }}</view>
<u-icon
name="arrow-right"
color="rgb(203,203,203)"
:size="26"
></u-icon>
</view>
<view class="right">{{ res.orderStatusText }}</view>
</view>
<view
class="item"
v-for="(item, index) in res.goodsList"
:key="index"
>
<view class="left">
<image :src="item.picUrl" mode="aspectFill"></image>
</view>
<view class="content">
<view class="title u-line-2">{{ item.goodsName }}</view>
<view class="type">{{ item.type }}</view>
<view
v-for="(item1, index1) in item.specifications.length"
:key="index1"
class="delivery-time"
>
{{ item.specifications[index1] }}
</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=""></view>
<view class="evaluate btn">删除订单</view>
</view>
</view>
<u-loadmore
:status="status"
bgColor="#f2f2f2"
style="padding: 20rpx 0;"
></u-loadmore>
</view>
</scroll-view>
<!-- 无订单 -->
<scroll-view v-else 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>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { getOrderData } from '@/api/index'
let listQuery = ref({
showType: 0,
page: 1,
limit: 10
})
let swiperTabs = ref()
let orderData = ref([] as any)
let total = ref(0)
let list = ref([
{
name: '待推送',
},
{
name: '待生成',
},
{
name: '待发货',
},
{
name: '已完成',
// count: 12,
}
])
let current = ref(0)
let swiperCurrent = ref(0)
let status = ref('loadmore')
// 价格小数
let priceDecimal = computed(() => {
return (val: any) => {
if (val !== parseInt(val)) return val.slice(-2);
else return '00';
};
})
// 价格整数
let priceInt = computed(() => {
return (val: any) => {
if (val !== parseInt(val)) return val.split('.')[0];
else return val;
};
})
let reachBottom = () => {
// 判断是否还有下一页数据
if (listQuery.value.page * listQuery.value.limit >= total.value) return (status.value = 'nomore');
// // 判断是否正在请求其它数据，如果是，则不发起额外的请求
if (status.value === 'loading') return;
listQuery.value.page += 1;
getOrderList();
}
// 总价
let totalPrice = (item: any) => {
let price = 0;
item.map((val: any) => {
price += parseFloat(val.price);
});
return price.toFixed(2);
}
// 总件数
let totalNum = (item: any) => {
let num = 0;
item.map((val: any) => {
num += val.number;
});
return num;
}
// tab栏切换
let change = (index: any) => {
swiperCurrent.value = index;
listQuery.value.showType = index
orderData.value = []
getOrderList();
}
// swiper-item 的位置发生改变时会触发
let transition = (data: any) => {
let dx = data.detail.dx
swiperTabs.value?.setDx(dx);
}
// 动画结束时会触发 animationfinish 事件
let animationfinish = (data: any) => {
let currentNum = data.detail.current
console.log(currentNum);
swiperTabs.value?.setFinishCurrent(currentNum);
swiperCurrent.value = currentNum;
current.value = currentNum;
}
// 页面数据
let getOrderList = () => {
status.value = 'loading';
getOrderData(listQuery.value).then((res: any) => {
if(res.data.code === 200) {
if (res.data.data.total > 10) status.value = 'loadmore';
else status.value = 'nomore';
total.value = res.data.data.total
orderData.value = [...orderData.value, ...res.data.data.list];
}
console.log(res);
})
}
getOrderList()
</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: 26rpx;
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 {
width: 45%;
.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>
src/pages/profile/index.vue
浏览文件 @ 7e60b1e3
<template> <template>
<view class="profile-container"> <view class="profile-container">
<view class="profile-info" @tap="my"> <view class="profile-info" @tap="toLogin">
<view class="profile-avatar"> <view class="profile-avatar">
<image src="https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/logo/logo.png" /> <image src="https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/logo/logo.png" />
</view> </view>
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<view class="order-more" @tap="showAllOrder">全部</view> <view class="order-more" @tap="showAllOrder">全部</view>
</template> </template>
<uni-grid <uni-grid
:column="5" :column="4"
:show-border="false" :show-border="false"
:square="false" :square="false"
@change="handleOrderTypeChange" @change="handleOrderTypeChange"
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
const my = () => { const toLogin = () => {
uni.navigateTo({ uni.navigateTo({
url: '../login/login', url: '../login/login',
}); });
...@@ -87,31 +87,25 @@ const my = () => { ...@@ -87,31 +87,25 @@ const my = () => {
const orderBtnList = ref([ const orderBtnList = ref([
{ {
url: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/order/payment.png', url: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/order/payment.png',
text: '待付款', text: '待推送',
badge: 1, badge: 1,
type: 'error', type: 'error',
}, },
{ {
url: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/order/daifahuo.png', url: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/order/daifahuo.png',
text: '待发货', text: '待生成',
badge: 1, badge: 1,
type: 'error', type: 'error',
}, },
{ {
url: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/order/daishouhuo.png', url: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/order/daishouhuo.png',
text: '待收货', text: '待发货',
badge: 1, badge: 1,
type: 'error', type: 'error',
}, },
{ {
url: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/order/daipingjia.png', url: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/order/daipingjia.png',
text: '待评价', text: '已完成',
badge: 1,
type: 'error',
},
{
url: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/order/shouhou.png',
text: '售后',
badge: 1, badge: 1,
type: 'error', type: 'error',
}, },
...@@ -146,7 +140,8 @@ const expandBtnList = ref([ ...@@ -146,7 +140,8 @@ const expandBtnList = ref([
const handleOrderTypeChange = (e: any) => { const handleOrderTypeChange = (e: any) => {
const index = e.detail.index; const index = e.detail.index;
uni.navigateTo({ url: '/pages/order/index?orderType=' + index }); // uni.navigateTo({ url: '/pages/order/index?orderType=' + index });
uni.navigateTo({ url: '/pages/order/orderList' });
// switch (index) { // switch (index) {
// case 0: // case 0:
// console.log('待付款') // console.log('待付款')
......
src/pages/shop/index.vue deleted 100644 → 0
浏览文件 @ 97792735
<template>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>
src/utils/config.ts
浏览文件 @ 7e60b1e3
const CONFIG: any = { const CONFIG: any = {
// 开发环境配置 // 开发环境配置
development: { development: {
assetsPath: 'http://192.168.2.210:8080', // 静态资源路径 assetsPath: 'http://192.168.0.23', // 静态资源路径
baseUrl: 'http://192.168.0.23:80', // 后台接口请求地址 baseUrl: 'http://192.168.0.23', // 后台接口请求地址
hostUrl: 'http://192.168.2.210:8080', // H5地址(前端运行地址) hostUrl: 'http://192.168.0.23', // H5地址(前端运行地址)
websocketUrl: '', // websocket服务端地址 websocketUrl: '', // websocket服务端地址
}, },
// 生产环境配置 // 生产环境配置
production: { production: {
assetsPath: 'http://192.168.0.23:80', // 静态资源路径 assetsPath: '', // 静态资源路径
baseUrl: 'http://192.168.0.23:80', // 后台接口请求地址 baseUrl: '', // 后台接口请求地址
// baseUrl: 'https://api.test.siccat.com/api/graphql', // baseUrl: 'https://api.test.siccat.com/api/graphql',
hostUrl: 'http://192.168.0.23:80', // H5地址(前端运行地址) hostUrl: '', // H5地址(前端运行地址)
websocketUrl: '', // websocket服务端地址 websocketUrl: '', // websocket服务端地址
} },
}; };
export default CONFIG[process.env.NODE_ENV]; export default CONFIG[process.env.NODE_ENV];
src/utils/request.ts
浏览文件 @ 7e60b1e3
...@@ -9,7 +9,7 @@ function request(url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE', data?: ...@@ -9,7 +9,7 @@ function request(url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE', data?:
if (uni.getStorageSync('token') !== undefined && uni.getStorageSync('token') !== '') { if (uni.getStorageSync('token') !== undefined && uni.getStorageSync('token') !== '') {
header = { header = {
'content-type': 'application/json', 'content-type': 'application/json',
'Authorization': uni.getStorageSync('token'), Authorization: uni.getStorageSync('token'),
}; };
} else { } else {
let pages = getCurrentPages(); let pages = getCurrentPages();
...@@ -35,12 +35,12 @@ function request(url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE', data?: ...@@ -35,12 +35,12 @@ function request(url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE', data?:
uni.hideLoading(); uni.hideLoading();
if (res.data.code == 200) { if (res.data.code == 200) {
resolve(res); resolve(res);
} else if (res.data.code == 501) { } else if (res.data.code == 501 || res.data.code == 401) {
console.log(res);
nextTick(() => { nextTick(() => {
uni.reLaunch({ uni.reLaunch({
url: '/pages/login/login', url: '/pages/login/login',
success() { success() {
// uni.clearStorage();
uni.showToast({ uni.showToast({
title: res.data.msg, title: res.data.msg,
icon: 'none', icon: 'none',
...@@ -48,7 +48,7 @@ function request(url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE', data?: ...@@ -48,7 +48,7 @@ function request(url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE', data?:
}, },
fail(err) { fail(err) {
console.log(err); console.log(err);
} },
}); });
}); });
} else { } else {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论