Big-Data-Lab
/
WxApp
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

需求调整

This commit is contained in:
Xubx 2024-08-31 22:40:03 +08:00
parent e6ee7505e5
commit 2373004eec
14 changed files with 682 additions and 673 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app.json
View File

@ -11,7 +11,8 @@
"page/component/search/search",
"page/component/myOrders/myOrder",
"page/component/refund/refund",
"page/component/invoice/invoice"
"page/component/invoice/invoice",
"page/component/myOrders2/myOrder2"
],
"window": {
"navigationBarTextStyle": "white",

185
page/component/details/details.js
View File

@ -1,6 +1,15 @@
// page/component/details/details.js
Page({
onLoad: function (options) {
data: {
goods: {},
specList: [],
selectedSpecs: [], // 用户选择的规格
buyNum: 1, // 购买数量
showPopup: false, // 控制弹出层显示
userInfo: {}, // 用户信息
viewGood: "",
},
onLoad(options) {
const goods = {
id: options.id,
goodName: options.goodName,
@ -8,99 +17,101 @@ Page({
goodDetail: options.goodDetail,
goodImage: decodeURIComponent(options.goodImage).split(','),
};
this.setData({ goods });
},
data: {
goods: {},
list: [
'/image/beizi1.jpg',
'/image/beizi1.jpg'
],
num: 1,
totalNum: 0,
hasCarts: false,
curIndex: 0,
show: false,
scaleCart: false,
userInfo: {},
interval: 3000,
duration: 800,
},
onBuyClick() {
const self = this;
// 获取用户信息
wx.getUserProfile({
desc: '用于完善会员资料', // 提示信息，表明获取用户信息的用途
success: (res) => {
console.log('用户信息:', res.userInfo);
// 将用户信息保存到data中（或发送给服务器）
self.setData({
userInfo: res.userInfo
});
// 构建订单信息的 URL
const { id, title, image, price } = self.data.goods;
const num = self.data.num;
const url = `../orders/orders?id=${id}&title=${title}&image=${image[0]}&price=${price}&num=${num}`;
// 跳转到订单页面
wx.navigateTo({
url: url,
});
const specList = [
{
specId: 1,
title: "枕头类型",
specValueList: [
{ specValueId: 1, specValue: "普通蓬松枕", isSelected: false, goodImage: "/image/zhentou1.jpg" },
{ specValueId: 2, specValue: "压缩高级枕", isSelected: false, goodImage: "/image/zhentou2.jpg" }
]
},
fail: (err) => {
console.error('获取用户信息失败:', err);
{
specId: 2,
title: "枕被套 、床单颜色",
specValueList: [
{ specValueId: 3, specValue: "贝诺灰", isSelected: false, goodImage: "/image/beizi2.jpg" },
{ specValueId: 4, specValue: "开心日记", isSelected: false, goodImage: "/image/beizi3.jpg" },
{ specValueId: 5, specValue: "草莓熊", isSelected: false, goodImage: "/image/beizi4.jpg" },
{ specValueId: 6, specValue: "乖乖狗", isSelected: false, goodImage: "/image/beizi5.jpg" },
{ specValueId: 7, specValue: "蓝心小熊", isSelected: false, goodImage: "/image/beizi6.jpg" },
{ specValueId: 8, specValue: "初夏-紫", isSelected: false, goodImage: "/image/beizi7.jpg" }
]
}
];
this.setData({ goods, specList, viewGood: goods.goodImage[0] });
},
openPopup() {
this.setData({ showPopup: true });
},
handlePopupHide() {
this.setData({ showPopup: false });
},
selectSpec(e) {
const { specid, id } = e.currentTarget.dataset;
let specList = this.data.specList.map(spec => {
if (spec.specId === specid) {
spec.specValueList = spec.specValueList.map(item => {
item.isSelected = item.specValueId == id;
return item;
});
}
return spec;
});
this.setData({ specList, viewGood: e.currentTarget.dataset.goodimage });
this.updateSelectedSpecs();
},
goToHome() {
wx.switchTab({
url: '/page/component/index' // 使用switchTab跳转到首页（tabbar页面）
});
},
addCount() {
let num = this.data.num;
num++;
this.setData({
num: num
})
updateSelectedSpecs() {
const selectedSpecs = this.data.specList.map(spec => {
const selectedItem = spec.specValueList.find(item => item.isSelected);
return selectedItem ? selectedItem.specValue : null;
}).filter(item => item);
this.setData({ selectedSpecs });
},
reduceCount() {
let num = this.data.num;
if (num > 1) {
num--;
handleBuyNumChange(e) {
this.setData({
buyNum: e.detail.value
});
},
confirmSpecs() {
console.log(this.data.selectedSpecs)
if (this.data.selectedSpecs.length < this.data.specList.length) {
wx.showToast({
title: '请选择所有规格',
icon: 'none'
});
return;
}
this.setData({
num: num
})
},
addToCart() {
const self = this;
const num = this.data.num;
let total = this.data.totalNum;
this.setData({ showPopup: false });
self.setData({
show: true
})
setTimeout(function () {
self.setData({
show: false,
scaleCart: true
})
setTimeout(function () {
self.setData({
scaleCart: false,
hasCarts: true,
totalNum: num + total
})
}, 200)
}, 300)
// wx.getUserProfile({
// desc: '用于完善会员资料',
// success: (res) => {
// this.setData({ userInfo: res.userInfo });
},
const { id, goodName, goodImage, goodPrice } = this.data.goods;
const num = this.data.buyNum;
const url = `../orders/orders?id=${id}&title=${goodName}&image=${goodImage[0]}&price=${goodPrice}&num=${num}&specs=${this.data.selectedSpecs.join(',')}`;
bindTap(e) {
const index = parseInt(e.currentTarget.dataset.index);
this.setData({
curIndex: index
})
wx.navigateTo({ url });
// },
// fail: (err) => {
// wx.showToast({
// title: '获取用户信息失败',
// icon: 'none'
// });
// }
// });
}
})
});

6
page/component/details/details.json
View File

@ -2,6 +2,10 @@
"usingComponents": {
"t-button": "tdesign-miniprogram/button/button",
"t-tag": "tdesign-miniprogram/tag/tag",
"t-icon": "tdesign-miniprogram/icon/icon"
"t-icon": "tdesign-miniprogram/icon/icon",
"t-popup": "tdesign-miniprogram/popup/popup",
"t-image": "tdesign-miniprogram/image/image",
"t-stepper": "tdesign-miniprogram/stepper/stepper",
"t-toast": "tdesign-miniprogram/toast/toast"
}
}

92
page/component/details/details.wxml
View File

@ -1,6 +1,5 @@
<view class="main">
<view class="goods-box">
<!-- <image src="{{goods.image}}" class="goods-thumb"></image> -->
<swiper class="banner" indicator-dots="true" autoplay="true" interval="{{interval}}" duration="{{duration}}" circular="true">
<block wx:for="{{goods.goodImage}}" wx:key="index">
<swiper-item>
@ -8,18 +7,11 @@
</swiper-item>
</block>
</swiper>
<!-- <navigator open-type="switchTab" url="../cart/cart">
<view class="carts-icon {{scaleCart?'on':''}}">
<image src="/image/cart2.png"></image>
<text class="carts-icon-num" wx:if="{{hasCarts}}">{{totalNum}}</text>
</view>
</navigator> -->
<!-- <view class="goods-operation"> -->
<view class="goods-info">
<view class="left-section">
<view class="goods-price">￥ {{goods.goodPrice}}</view>
<view class="goods-title">{{goods.goodName}}</view>
<view class="goods-detail">{{goods.goodDetail}}</view>
</view>
<view class="right-section">
<t-button open-type="share" t-class="shareBtn" variant="text">
@ -31,35 +23,63 @@
</view>
</view>
<view class="goods-buy">
<navigator>
<view class="left" bindtap="goToHome">
<t-icon class="left-return" name="home"></t-icon>
<view>首页</view>
</navigator>
<t-button class="right-buy" theme="light" variant="outline" size="large" shape="round">立即购买</t-button>
</view>
<!-- 绑定点击事件，显示规格选择弹出框 -->
<t-button class="right-buy" theme="light" variant="outline" size="large" shape="round" bindtap="openPopup">立即购买</t-button>
</view>
<!-- <text class="goods-operation-add" bindtap="reduceCount">-</text>
<text class="goods-operation-num">数量 {{num}}</text>
<text class="goods-operation-add" bindtap="addCount">+</text> -->
<!-- <navigator url="javascript:void(0);" open-type="false">
<button class="goods-to-buy" bindtap="onBuyClick">购买</button>
</navigator> -->
<!-- <text class="goods-to-cart" bindtap="addToBuy">购买</text> -->
<!-- <image src="/image/cart1.png" class="goods-cart-img" bindtap="addToCart"></image> -->
<!-- </view> -->
<image wx:if="{{show}}" src="/image/cart1.png" class="to-carts-icon"></image>
<!-- <view class="goods-stock">{{goods.stock}}</view> -->
</view>
<!-- <view class="goods-tab-box">
<view class="goods-tab-nav {{curIndex === 0 ?'on':''}}" bindtap="bindTap" data-index="0">商品详情</view>
<view class="goods-tab-nav {{curIndex === 1 ?'on':''}}" bindtap="bindTap" data-index="1">产品参数</view>
<view class="goods-tab-nav {{curIndex === 2 ?'on':''}}" bindtap="bindTap" data-index="2">售后保障</view>
<view class="goods-content">
<view wx:if="{{curIndex === 0}}">{{goods.goodDetail}}</view>
<view wx:if="{{curIndex === 1}}">{{goods.parameter}}</view>
<view wx:if="{{curIndex === 2}}">{{goods.service}}</view>
<!-- 规格选择弹出框 -->
<t-popup visible="{{showPopup}}" placement="bottom" bind:visible-change="handlePopupHide">
<view class="popup-container">
<view class="popup-close" bindtap="handlePopupHide">
<t-icon name="close" size="36rpx" />
</view>
<view class="popup-sku-header">
<t-image t-class="popup-sku-header__img" src="{{viewGood}}" />
<view class="popup-sku-header__goods-info">
<view class="popup-sku__goods-name">{{goods.goodName}}</view>
<view class="goods-price-container">
<view class="goods-price">￥ {{goods.goodPrice}}</view>
</view>
<!-- 已选规格 -->
<view class="popup-sku__selected-spec">
<view>选择：</view>
<view wx:for="{{selectedSpecs}}" wx:key="index">
<view class="popup-sku__selected-item">{{item}}</view>
</view>
</view>
</view>
</view>
<view class="popup-sku-body">
<view class="goods-size">默认统一被褥1.5m*2.0m</view>
<view class="popup-sku-group-container">
<view class="popup-sku-row" wx:for="{{specList}}" wx:key="specId">
<view class="popup-sku-row__title">{{item.title}}</view>
<view class="popup-sku-row__item-container">
<block wx:for="{{item.specValueList}}" wx:key="specValueId" wx:for-item="valueItem">
<view class="popup-sku-row__item {{valueItem.isSelected ? 'popup-sku-row__item--active' : ''}}" data-specid="{{item.specId}}" data-id="{{valueItem.specValueId}}" data-val="{{valueItem.specValue}}" data-goodImage="{{valueItem.goodImage}}" bindtap="selectSpec">
{{valueItem.specValue}}
</view>
</block>
</view>
</view>
</view>
<view class="popup-sku-stepper-stock">
<view class="popup-sku-stepper-container">
<view class="popup-sku__stepper-title">购买数量</view>
<t-stepper value="{{buyNum}}" min="1" max="10" theme="filled" bind:change="handleBuyNumChange" />
</view>
</view>
</view>
<!-- 绑定点击事件，确认选择规格并跳转到订单页面 -->
<view class="single-confirm-btn" bindtap="confirmSpecs">
确定
</view>
</view>
</view> -->
</view>
</t-popup>
</view>
<t-toast id="t-toast" />

330
page/component/details/details.wxss
View File

@ -4,125 +4,6 @@
position: relative;
padding: 40rpx 45rpx;
color: #454552;
/* border-bottom: 30rpx solid #ededed; */
}
.goods-box .goods-thumb {
width: 300rpx;
height: 300rpx;
margin: 35rpx 0 125rpx;
}
.to-carts-icon {
position: absolute;
right: 70rpx;
top: 70rpx;
width: 10rpx;
height: 10rpx;
border-radius: 50%;
opacity: .6;
-webkit-animation: to_cart .3s ease-out;
animation: to_cart .3s ease-out;
}
@-webkit-keyframes to_cart {
0% {
right: 100rpx;
top: 530rpx;
-webkit-transform: scale(4);
}
/*60%{
top: 20rpx;
}*/
}
@keyframes to_cart {
0% {
right: 100rpx;
top: 530rpx;
transform: scale(4);
}
/*60%{
top: 20rpx;
}*/
}
.carts-icon {
position: absolute;
right: 40rpx;
top: 40rpx;
width: 75rpx;
height: 75rpx;
}
.carts-icon image {
width: 100%;
height: 100%;
}
.carts-icon.on {
-webkit-animation: to_cart_scale .3s ease;
animation: to_cart_scale .3s ease;
}
@-webkit-keyframes to_cart_scale {
50% {
-webkit-transform: scale(1.2);
}
}
@keyframes to_cart_scale {
50% {
transform: scale(1.2);
}
}
.carts-icon-num {
position: absolute;
left: -15rpx;
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
border-radius: 50%;
background: #AB956D;
color: #fff;
font-size: 24rpx;
}
.goods-box .goods-operation {
position: relative;
width: 100%;
height: 100rpx;
line-height: 100rpx;
padding: 0 50rpx;
margin-bottom: 60rpx;
box-sizing: border-box;
border-radius: 50rpx;
background: #AB956D;
color: #fff;
font-size: 14px;
}
.goods-operation text {
display: inline-block;
height: 100rpx;
}
.goods-to-buy {
margin-top: 5px;
width: 80px;
height: 40px;
font-size: 16px;
color: #fff;
background-color: rgb(243, 106, 96);
box-sizing: border-box;
border-radius: 50rpx;
}
.goods-operation-num {
width: 160rpx;
}
.banner {
@ -131,37 +12,11 @@
text-align: center;
}
.goods-operation-add {
font-weight: bold;
width: 80rpx;
height: 80rpx;
margin-right: 15rpx;
}
.goods-to-cart {
width: 210rpx;
/* padding-right: 75rpx; */
color: black;
}
.goods-cart-img {
position: absolute;
right: 50rpx;
top: 28rpx;
width: 45rpx;
height: 45rpx;
}
.goods-stock {
font-size: 28rpx;
margin-bottom: 20rpx;
margin-top: 50px;
}
.goods-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
}
.left-section {
@ -171,6 +26,7 @@
.goods-title {
font-size: 40rpx;
margin-bottom: 10rpx;
}
.goods-price {
@ -185,52 +41,186 @@
}
.btn-icon {
font-size: 20rpx;
font-size: 30rpx;
}
.share-text {
padding-left: 8rpx;
padding-left: 6rpx;
padding-top: 8rpx;
font-size: 20rpx;
font-size: 25rpx;
line-height: 24rpx;
}
.goods-detail{
padding-top: 10px;
}
.goods-size{
font-size: 14px;
padding-bottom: 10px;
}
.goods-buy {
position: fixed; /* 固定在页面底部 */
bottom: 0; /* 距离底部为0 */
left: 0; /* 左侧对齐 */
width: 100%; /* 宽度占满屏幕 */
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
padding: 10rpx 20rpx; /* 添加一些内边距 */
background-color: #fff; /* 设置背景颜色 */
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1); /* 添加一个阴影 */
padding: 10rpx 20rpx;
background-color: #fff;
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}
.left {
padding-left: 60px;
display: flex;
align-items: center;
}
.left-return {
font-size: 32px;
flex-grow: 0; /* 防止按钮拉伸 */
}
.right-buy {
flex-grow: 0; /* 防止按钮拉伸 */
flex-grow: 0;
}
.goods-tab-nav {
display: inline-block;
width: 33.33%;
height: 90rpx;
line-height: 90rpx;
border-bottom: 1rpx solid #ededed;
.popup-container {
padding: 20rpx;
background-color: #fff;
}
.popup-close {
position: absolute;
top: 10rpx;
right: 10rpx;
}
.popup-sku-header {
display: flex;
margin-bottom: 20rpx;
}
.popup-sku-header__goods-info {
margin-left: 20rpx;
flex-grow: 1;
}
.popup-sku-header__img {
width: 100px;
height: 100px;
}
.popup-sku__goods-name {
font-size: 36rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
.goods-price-container {
font-size: 30rpx;
color: red;
margin-bottom: 20rpx;
}
.popup-sku__selected-spec {
font-size: 28rpx;
color: #999;
}
.popup-sku-body {
margin-top: 20rpx;
}
.popup-sku-row__item-container {
display: flex;
flex-wrap: wrap;
}
.popup-sku-row__item {
flex-basis: 30%;
box-sizing: border-box;
text-align: center;
color: #c7c7cb;
padding: 5rpx;
margin-bottom: 10rpx;
background-color: #f5f5f5;
border-radius: 4rpx;
}
.goods-tab-nav.on {
color: #bcaa8a;
border-bottom: 5rpx solid #bcaa8a;
.popup-sku-row__item {
padding: 5rpx;
margin: 5rpx;
text-align: center;
border: 1rpx solid #ccc;
border-radius: 5rpx;
cursor: pointer;
}
.goods-content {
padding: 40rpx;
.popup-sku-row__item--active {
border-color: #bcaa8a;
border: 1rpx solid rgb(238, 84, 84);
}
.popup-sku-row {
margin-bottom: 20rpx;
}
.popup-sku-row__title {
font-size: 28rpx;
margin-bottom: 10rpx;
}
.popup-sku-row__item {
display: inline-block;
padding: 10rpx 20rpx;
margin-right: 10rpx;
background-color: #f5f5f5;
border-radius: 4rpx;
font-size: 28rpx;
cursor: pointer;
}
.popup-sku-stepper-container {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20rpx;
}
.popup-sku__stepper-title {
font-size: 28rpx;
}
.single-confirm-btn {
background-color: #bcaa8a;
color: #fff;
text-align: center;
padding: 20rpx 0;
margin-top: 20rpx;
border-radius: 4rpx;
font-size: 32rpx;
}
.popup-sku-actions {
display: flex;
justify-content: space-between;
margin-top: 20rpx;
}
.selected-sku-btn {
padding: 20rpx;
border-radius: 4rpx;
font-size: 28rpx;
background-color: #bcaa8a;
color: #fff;
text-align: center;
}
.popup-sku-disabled {
background-color: #ccc;
}
.disabled-sku-selected {
color: #ccc;
cursor: not-allowed;
}

69
page/component/myOrders/myOrder.js
View File

@ -15,12 +15,13 @@ Page({
},
onLoad() {
var self = this
// 获取地址信息
// 获取订单status为1的待付款订单
wx.request({
url: baseUrl + "/order/loadData",
method: "POST",
data: {
userId: 1,
status: 1
},
success(res) {
self.setData({
@ -31,7 +32,6 @@ Page({
})
},
onReady() {
this.getTotalPrice()
},
onShow: function () {
@ -47,69 +47,4 @@ Page({
})
},
/**
* 计算总价
*/
getTotalPrice() {
let orders = this.data.orders
let total = 0
for (let i = 0; i < orders.length; i++) {
total += orders[i].num * orders[i].price
}
this.setData({
total: total,
})
},
toPay() {
const self = this
// 假设订单信息在 this.data.orders 中
const orderData = this.data.orders
wx.showModal({
title: "提示",
content: "本系统只做演示，支付系统已屏蔽",
text: "center",
complete() {
// 发送订单数据到后端
wx.request({
url: baseUrl + "/order/addOrUpdate", // 替换为你的后端API地址
method: "POST",
data: {
...orderData,
},
header: {
"Content-Type": "application/json", // 设置请求头
},
success(res) {
if (res.statusCode === 200) {
wx.showToast({
title: "订单已提交",
icon: "success",
duration: 2000,
})
// 跳转到用户页面
wx.switchTab({
url: "/page/component/user/user",
})
} else {
wx.showToast({
title: "提交失败",
icon: "none",
duration: 2000,
})
}
},
fail() {
wx.showToast({
title: "请求失败",
icon: "none",
duration: 2000,
})
},
})
},
})
},
})

2
page/component/myOrders/myOrder.json
View File

@ -1,3 +1,3 @@
{
"navigationBarTitleText": "订单详情"
"navigationBarTitleText": "待付款订单"
}

32
page/component/myOrders/myOrder.wxml
View File

@ -1,21 +1,19 @@
<view class="main">
<navigator url="../refund/refund">
<view class="orders-no-refund">退款 / 售后</view>
</navigator>
<!-- <view class="orders-no-address">待收货</view> -->
<view class="orders-box">
<view wx:for="{{orders}}" wx:key="id" class="orders-list">
<image class="orders-thumb" src="{{item.image}}"></image>
<view class="orders-pro-name">{{item.title}}</view>
<view class="orders-pro-price">￥{{item.price}}</view>
<view class="orders-count-num">×{{item.num}}</view>
</view>
<navigator wx:for="{{orders}}" wx:key="id" url="../orders/orders?id={{item.id}}&title={{item.title}}&price={{item.price}}&num={{item.num}}&image={{item.image}}&specs={{item.specs}}">
<view class="orders-list">
<image class="orders-thumb" src="{{item.image}}"></image>
<view class="orders-info">
<view class="orders-info-left">
<view class="orders-pro-name">{{item.title}}</view>
<view class="order-specs">{{item.specs}}</view>
</view>
<view class="orders-info-right">
<view class="orders-pro-price">￥{{item.price}}</view>
<view class="orders-count-num">×{{item.num}}</view>
</view>
</view>
</view>
</navigator>
</view>
<!-- <view class="orders-footer">
<view class="orders-footer-total">付款合计：￥{{total}}</view>
<view class="orders-footer-btn" bindtap="toPay">去付款</view>
</view> -->
</view>

156
page/component/myOrders/myOrder.wxss
View File

@ -1,31 +1,59 @@
@import '../../common/common.wxss';
.orders-list {
display: flex;
align-items: center;
padding: 20rpx;
height: 180rpx;
border-bottom: 10rpx solid #ededed;
}
.orders-address{
position: relative;
padding: 20rpx 50rpx 20rpx 35rpx;
font-size: 14px;
line-height: 25px;
border-bottom: 20rpx solid #ededed;
color: #adadad;
.orders-thumb {
width: 180rpx;
height: 180rpx;
margin-right: 20rpx;
}
.orders-address::after{
position: absolute;
right: 30rpx;
top: 60rpx;
content: '';
width: 8px;
height: 8px;
border-top: 4rpx solid #7f7f7f;
border-right: 4rpx solid #7f7f7f;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
.orders-info {
flex: 1;
display: flex;
justify-content: space-between;
}
.orders-address-name{
display: inline-block;
width: 300rpx;
.orders-info-left {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.orders-no-refund{
position: relative;
.orders-pro-name {
font-size: 32rpx;
font-weight: bold;
}
.order-specs {
font-size: 28rpx;
color: #888;
margin-top: 5rpx;
}
.orders-info-right {
text-align: right;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.orders-pro-price {
font-size: 32rpx;
font-weight: bold;
color: #AB956D;
}
.orders-count-num {
font-size: 28rpx;
color: #888;
}
.orders-no-refund {
height: 90rpx;
line-height: 90rpx;
font-size: 16px;
@ -34,73 +62,19 @@
border-bottom: 20rpx solid #ededed;
text-align: center;
}
.orders-no-address{
position: relative;
height: 90rpx;
line-height: 90rpx;
font-size: 16px;
color: #f56464;
border-bottom: 20rpx solid #ededed;
text-align: center;
}
.orders-no-refund::after{
position: absolute;
right: 30rpx;
top: 34rpx;
content: '';
width: 16rpx;
height: 16rpx;
border-top: 4rpx solid #7f7f7f;
border-right: 4rpx solid #7f7f7f;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
.orders-no-refund::after {
position: absolute;
right: 30rpx;
top: 34rpx;
content: '';
width: 16rpx;
height: 16rpx;
border-top: 4rpx solid #7f7f7f;
border-right: 4rpx solid #7f7f7f;
transform: rotate(45deg);
}
.orders-box{
padding-bottom: 105rpx;
}
.orders-list{
position: relative;
padding:20rpx 20rpx 20rpx 220rpx;
height: 180rpx;
border-bottom: 1rpx solid #ededed;
}
.orders-thumb{
position: absolute;
top: 20rpx;
left: 20rpx;
width: 180rpx;
height: 180rpx;
}
.orders-list view{
line-height: 60rpx;
}
.orders-pro-price{
font-size: 14px;
font-weight: bold;
color:red
}
.orders-footer{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 95rpx;
line-height: 95rpx;
border-top: 1rpx solid #ededed;
}
.orders-footer .orders-footer-total{
display: inline-block;
width: 510rpx;
padding-left: 30rpx;
box-sizing: border-box;
color: #a55350;
}
.orders-footer .orders-footer-btn{
display: inline-block;
width: 240rpx;
text-align: center;
color: #fff;
background: #AB956D;
.orders-box {
padding-bottom: 105rpx;
}

88
page/component/orders/orders.js
View File

@ -9,8 +9,10 @@ Page({
price: options.price,
num: options.num,
image: options.image,
specs: options.specs
}
this.setData({ orders })
console.log(this.data.orders)
},
data: {
address: {},
@ -44,63 +46,63 @@ Page({
getTotalPrice() {
let orders = this.data.orders
let total = 0
for (let i = 0; i < orders.length; i++) {
total += orders[i].num * orders[i].price
}
total += orders.num * orders.price
this.setData({
total: total,
})
},
toPay() {
const self = this
// 假设订单信息在 this.data.orders 中
const orderData = this.data.orders
// TODO 用户id暂时写死
orderData.userId = 1
orderData.status = 1
console.log(orderData)
//先生成订单
wx.request({
// TODO 未测试
url: baseUrl + "/order/addOrUpdate", // 替换为你的后端API地址
method: "POST",
data: {
...orderData,
},
header: {
"Content-Type": "application/json", // 设置请求头
},
success(res) {
if (res.statusCode === 200) {
wx.showToast({
title: "订单已提交",
icon: "success",
duration: 2000,
})
// 跳转到用户页面
wx.switchTab({
url: "/page/component/user/user",
})
} else {
wx.showToast({
title: "提交失败",
icon: "none",
duration: 2000,
})
}
},
fail() {
wx.showToast({
title: "请求失败",
icon: "none",
duration: 2000,
})
},
})
wx.showModal({
title: "提示",
content: "本系统只做演示，支付系统已屏蔽",
text: "center",
complete() {
// 发送订单数据到后端
wx.request({
// TODO 未测试
url: baseUrl + "/order/addOrUpdate", // 替换为你的后端API地址
method: "POST",
data: {
...orderData,
},
header: {
"Content-Type": "application/json", // 设置请求头
},
success(res) {
if (res.statusCode === 200) {
wx.showToast({
title: "订单已提交",
icon: "success",
duration: 2000,
})
// 跳转到用户页面
wx.switchTab({
url: "/page/component/user/user",
})
} else {
wx.showToast({
title: "提交失败",
icon: "none",
duration: 2000,
})
}
},
fail() {
wx.showToast({
title: "请求失败",
icon: "none",
duration: 2000,
})
},
})
},
})
},

15
page/component/orders/orders.wxml
View File

@ -11,10 +11,19 @@
<view class="orders-box">
<view class="orders-list">
<image class="orders-thumb" src="{{orders.image}}"></image>
<view class="orders-pro-name">{{orders.title}}</view>
<view class="orders-pro-price">￥{{orders.price}} ×{{orders.num}}</view>
<view class="orders-count-num">免运费</view>
<view class="orders-info">
<view class="orders-info-left">
<view class="orders-pro-name">{{orders.title}}</view>
<view class="order-specs">{{orders.specs}}</view>
<view class="order-yunf">免运费</view>
</view>
<view class="orders-info-right">
<view class="orders-pro-price">￥{{orders.price}}</view>
<view class="orders-count-num">×{{orders.num}}</view>
</view>
</view>
</view>
<view>
<navigator url="../invoice/invoice">
<view class="orders-no-address">发票</view>

129
page/component/orders/orders.wxss
View File

@ -1,4 +1,79 @@
@import '../../common/common.wxss';
.orders-list {
position: relative;
display: flex;
align-items: center;
padding: 20rpx;
height: 180rpx;
border-bottom: 10rpx solid #ededed;
}
.orders-thumb {
width: 180rpx;
height: 180rpx;
margin-right: 20rpx;
}
.orders-info {
flex: 1;
display: flex;
justify-content: space-between;
}
.orders-info-left {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.order-notes-label {
font-size: 16px;
color: #333;
margin-right: 10px;
/* 标签和输入框之间的间距 */
}
.order-notes-input {
flex: 1;
/* 输入框占据剩余空间 */
padding-left: 10px;
margin-right: 10px;
font-size: 14px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
.orders-pro-name {
font-size: 32rpx;
font-weight: bold;
}
.order-yunf{
font-size: 12px;
padding-top: 10px;
}
.order-specs {
padding-top: 8px;
font-size: 28rpx;
color: #888;
margin-top: 5rpx;
}
.orders-info-right {
text-align: right;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.orders-pro-price {
font-size: 32rpx;
font-weight: bold;
color: #AB956D;
}
.orders-count-num {
font-size: 28rpx;
color: #888;
}
.orders-address {
position: relative;
@ -53,61 +128,11 @@
padding-bottom: 105rpx;
}
.orders-list {
position: relative;
padding: 20rpx 20rpx 20rpx 220rpx;
height: 180rpx;
border-bottom: 10rpx solid #ededed;
}
.orders-thumb {
position: absolute;
top: 20rpx;
left: 20rpx;
width: 180rpx;
height: 180rpx;
}
.orders-list view {
line-height: 60rpx;
}
.order-notes {
display: flex;
align-items: center;
/* 垂直居中对齐 */
padding-left: 10px;
/* background-color: #f9f9f9; */
border-radius: 8px;
/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
margin: 20px 0;
/* border-bottom: 10rpx solid #ededed; */
}
.orders-count-num{
font-size: 14px;
font-weight: bold;
}
.order-notes-label {
font-size: 16px;
color: #333;
margin-right: 10px;
/* 标签和输入框之间的间距 */
}
.order-notes-input {
flex: 1;
/* 输入框占据剩余空间 */
padding-left: 10px;
margin-right: 10px;
font-size: 14px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
.order-notes-input::placeholder {
color: #aaa;
}
.orders-footer {
@ -134,4 +159,4 @@
text-align: center;
color: #fff;
background: #AB956D;
}
}

5
page/component/user/user.wxml
View File

@ -20,7 +20,10 @@
<view class="address-box">
<!-- <view class="orders">我的订单</view> -->
<view class="address-manage">
<navigator url="/page/component/myOrders/myOrder">我的订单</navigator>
<navigator url="/page/component/myOrders/myOrder">待付款订单</navigator>
</view>
<view class="address-manage2">
<navigator url="/page/component/myOrders2/myOrder2">待收货订单</navigator>
</view>
<!-- <view class="orders-list" wx:for="{{orders}}" wx:key="index">
<view class="orders-number">订单编号：{{item.number}}</view>

243
page/component/user/user.wxss
View File

@ -1,120 +1,157 @@
@import '../../common/common.wxss';
.header{
position: relative;
height: 160rpx;
line-height: 100rpx;
padding:30rpx 30rpx 30rpx 150rpx;
box-sizing: border-box;
background: #AB956D;
font-size: 28rpx;
color: #fff;
}
.header .thumb{
position: absolute;
left: 30rpx;
top: 30rpx;
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
.header .about{
float: right;
.header {
position: relative;
height: 160rpx;
line-height: 100rpx;
padding: 30rpx 30rpx 30rpx 150rpx;
box-sizing: border-box;
background: #AB956D;
font-size: 28rpx;
color: #fff;
}
.address-box{
border-bottom: 10rpx solid #ededed;
color: #999;
line-height: 90rpx;
font-size: 28rpx;
}
.address-box .address-manage{
position: relative;
height: 90rpx;
border-bottom: 1rpx solid #e9e9e9;
text-align: center;
}
.address-box .address-manage::after{
position: absolute;
right: 30rpx;
top: 34rpx;
content: '';
width: 16rpx;
height: 16rpx;
border-top: 4rpx solid #7f7f7f;
border-right: 4rpx solid #7f7f7f;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.address-box .address-list{
padding-left: 30rpx;
}
.address-box .address-list view{
height: 90rpx;
border-bottom: 1rpx solid #e9e9e9;
}
.address-box .address-list view:last-child{
border-bottom: 0;
.header .thumb {
position: absolute;
left: 30rpx;
top: 30rpx;
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
.orders-box{
color: #999;
font-size: 28rpx;
.header .about {
float: right;
}
.orders{
height: 90rpx;
line-height: 90rpx;
border-bottom: 1rpx solid #e9e9e9;
text-align: center;
.address-box {
/* border-bottom: 10rpx solid #ededed; */
color: #999;
line-height: 90rpx;
font-size: 28rpx;
}
.orders-list{
padding-left: 30rpx;
border-bottom: 20rpx solid #ededed;
.address-box .address-manage {
position: relative;
height: 90rpx;
border-bottom: 10rpx solid #e9e9e9;
text-align: center;
}
.orders-list:last-child{
border-bottom: 0;
.address-box .address-manage2 {
position: relative;
height: 90rpx;
border-bottom: 1rpx solid #e9e9e9;
text-align: center;
}
.orders-number{
height: 90rpx;
line-height: 90rpx;
border-bottom: 1rpx solid #e9e9e9;
.address-box .address-manage::after {
position: absolute;
right: 30rpx;
top: 34rpx;
content: '';
width: 16rpx;
height: 16rpx;
border-top: 4rpx solid #7f7f7f;
border-right: 4rpx solid #7f7f7f;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.orders-detail{
position: relative;
height: 120rpx;
padding: 35rpx 20rpx 35rpx 170rpx;
border-bottom: 1rpx solid #e9e9e9;
.address-box .address-manage2::after {
position: absolute;
right: 30rpx;
top: 34rpx;
content: '';
width: 16rpx;
height: 16rpx;
border-top: 4rpx solid #7f7f7f;
border-right: 4rpx solid #7f7f7f;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.orders-detail image{
position: absolute;
left: 0;
top: 20rpx;
width: 150rpx;
height: 150rpx;
.address-box .address-list {
padding-left: 30rpx;
}
.orders-detail view{
line-height: 60rpx;
.address-box .address-list view {
height: 90rpx;
border-bottom: 1rpx solid #e9e9e9;
}
.orders-detail .orders-status{
position: absolute;
right: 20rpx;
top: 35rpx;
height: 120rpx;
line-height: 120rpx;
color: #b42f2d;
.address-box .address-list view:last-child {
border-bottom: 0;
}
.orders-footer{
height: 60rpx;
line-height: 60rpx;
color: #2f2f2f;
padding:15rpx 30rpx 15rpx 0;
.orders-box {
color: #999;
font-size: 28rpx;
}
.orders-footer .orders-btn{
float: right;
width: 170rpx;
height: 60rpx;
line-height:60rpx;
border-radius: 6rpx;
background: #b42f2d;
color: #fff;
.orders {
height: 90rpx;
line-height: 90rpx;
border-bottom: 1rpx solid #e9e9e9;
text-align: center;
}
.orders-list {
padding-left: 30rpx;
border-bottom: 20rpx solid #ededed;
}
.orders-list:last-child {
border-bottom: 0;
}
.orders-number {
height: 90rpx;
line-height: 90rpx;
border-bottom: 1rpx solid #e9e9e9;
}
.orders-detail {
position: relative;
height: 120rpx;
padding: 35rpx 20rpx 35rpx 170rpx;
border-bottom: 1rpx solid #e9e9e9;
}
.orders-detail image {
position: absolute;
left: 0;
top: 20rpx;
width: 150rpx;
height: 150rpx;
}
.orders-detail view {
line-height: 60rpx;
}
.orders-detail .orders-status {
position: absolute;
right: 20rpx;
top: 35rpx;
height: 120rpx;
line-height: 120rpx;
color: #b42f2d;
}
.orders-footer {
height: 60rpx;
line-height: 60rpx;
color: #2f2f2f;
padding: 15rpx 30rpx 15rpx 0;
}
.orders-footer .orders-btn {
float: right;
width: 170rpx;
height: 60rpx;
line-height: 60rpx;
border-radius: 6rpx;
background: #b42f2d;
color: #fff;
}