解决了已知问题

This commit is contained in:
Ling53666 2024-12-10 18:35:22 +08:00
parent 4dce4df8cb
commit 8ea81cc28f
56 changed files with 1871 additions and 1906 deletions

View File

@ -44,6 +44,41 @@
"title": "评价", "title": "评价",
"page": "pages/pingjia/pingjia", "page": "pages/pingjia/pingjia",
"launchMode": "common" "launchMode": "common"
},
{
"title": "我的收藏",
"page": "pages/wodeshoucang/wodeshoucang",
"launchMode": "common"
},
{
"title": "pages/test/test",
"page": "pages/test/test",
"launchMode": "common"
},
{
"title": "发布抢单",
"page": "pages/kehushangmenyuyueqiangdan/kehushangmenyuyueqiangdan",
"launchMode": "common"
},
{
"title": "我的预约",
"page": "pages/wodeyuyue/wodeyuyue",
"launchMode": "common"
},
{
"title": "pages/test1/test1",
"page": "pages/test1/test1",
"launchMode": "common"
},
{
"title": "店铺主页",
"page": "pages/dianpuzhuye/dianpuzhuye",
"launchMode": "common"
},
{
"title": "登录测试",
"page": "pages/denglutest/denglutest",
"launchMode": "common"
} }
] ]
} }

View File

@ -1,99 +1,5 @@
/* page {
background-color: #ffffff;
box-sizing: border-box;
position: relative;
overflow-x: hidden;
}
.page {
font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
font-size: 24rpx;
padding: 32rpx;
flex: 1;
}
.page-description {
margin-bottom: 32rpx;
}
.page-section {
background: #fff;
margin-bottom: 32rpx;
}
.page-section-title {
padding: 16rpx 32rpx;
}
.page-section-demo {
padding: 32rpx;
}
.page-section-btns {
border-top: 1px solid #ddd;
display: flex;
justify-content: space-around;
align-items: center;
}
.page-section-btns > view {
flex: 1;
height: 84rpx;
display: flex;
align-items: center;
justify-content: space-around;
color: #49a9ee;
}
.page-section-btns > view + view {
border-left: 1px solid #ddd;
}
.bc_blue {
background-color: #49A9EE;
}
.bc_red {
background-color: #F04134;
}
.bc_yellow {
background-color: #FFBF00;
}
.bc_green {
background-color: #00A854;
}
.form-row {
display: flex;
align-items: center;
padding: 0 30rpx;
height: 88rpx;
align-items: center;
}
.form-row-label {
width: 180rpx;
font-size: 34rpx;
margin-right: 10rpx;
text-align: left;
color: #000;
}
.form-row-content {
flex: 1;
font-size: 34rpx;
}
.form-line {
height: 1px;
background-color: #ddd;
margin-left: 30rpx;
} */
page{ page{
width: 100vw; /* 或者 750rpx */ width: 100vw;
height: auto; height: auto;
overflow:hidden; /* 防止溢出 */ overflow:hidden;
} }

View File

@ -29,12 +29,13 @@
"pages/shangpinjiemian/shangpinjiemian", "pages/shangpinjiemian/shangpinjiemian",
"pages/shangjiaruzhu/shangjiaruzhu", "pages/shangjiaruzhu/shangjiaruzhu",
"pages/gouwuche/gouwuche", "pages/gouwuche/gouwuche",
"pages/gerenxinxi/gerenxinxi",
"pages/dianpuzhuye/dianpuzhuye", "pages/dianpuzhuye/dianpuzhuye",
"pages/index", "pages/index",
"pages/test/test", "pages/test/test",
"pages/meijiashirenzheng/meijiashirenzheng", "pages/meijiashirenzheng/meijiashirenzheng",
"pages/pingjia/pingjia" "pages/pingjia/pingjia",
"pages/test1/test1",
"pages/denglutest/denglutest"
], ],
"window": { "window": {
"defaultTitle": "甲情甲意", "defaultTitle": "甲情甲意",

View File

@ -1,5 +1,4 @@
import {url} from '../request' import {url} from '../request'
Page({ Page({
data: { data: {
authCode: '', authCode: '',
@ -15,6 +14,22 @@ Page({
console.log(typeof authCode); console.log(typeof authCode);
console.log(authCode); console.log(authCode);
// my.setStorage({
// key: 'userInfo',
// data: {
// username: username,
// avatarUrl: avatarUrl,
// cookie:setCookie,
// id:id
// },
// success: function () {
// console.log('用户信息已存储',cookie);
// },
// fail: function (err) {
// console.error('存储失败:', err);
// }
// });
// 请求后端接口进行用户登录 // 请求后端接口进行用户登录
my.request({ my.request({
url: url + '/api/Alipay/parseCode', url: url + '/api/Alipay/parseCode',
@ -23,7 +38,8 @@ Page({
}, },
success: (res) => { success: (res) => {
const { username, avatarUrl,id} = res.data.data; const { username, avatarUrl,id} = res.data.data;
const setCookie = res.header['Set-Cookie']; const setCookie = res.header['set-cookie'] || res.header['Set-Cookie'];
console.log('Set-Cookie:', setCookie+'这是这个码');
// 存储用户信息到本地存储 // 存储用户信息到本地存储
my.setStorage({ my.setStorage({
key: 'userInfo', key: 'userInfo',

View File

@ -0,0 +1,44 @@
page {
background-color: white;
}
.tupian{
width: 500rpx;
height: 500rpx;
border-radius: 250rpx;
overflow: hidden;
margin-left: auto;
margin-right: auto;
display: block;
}
.wenzi{
font-size: 40rpx;
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
}
.container{
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
margin-top: 50px;
}
navigator {
background-color: blue;
color: #fff;
margin-bottom: 10rpx;
padding: 20rpx;
text-align: center;
}
.navigator-hover {
background-color: lightskyblue;
color: #fff;
}
.image{
width: 80rpx;
height: 80rpx;
position: relative;
left: 330rpx;
}

View File

@ -0,0 +1,7 @@
<view>
<image class="tupian" mode="scaleToFill" src="../image/logo.png" />
<image mode="scaleToFill" class="image" src="/pages/image/login.png" />
<text class="wenzi">请完成授权以继续使用</text>
</view>
<button type="primary" onTap="Login">支付宝一键登录</button>

View File

@ -0,0 +1,77 @@
import {url} from '../request'
Page({
data: {
authCode: '',
},
Login() {
my.getAuthCode({
scopes: 'auth_user',
success: res => {
const authCode = res.authCode;
console.log(typeof authCode);
console.log(authCode);
my.setStorage({
key: 'userInfo',
data: {
username: username,
avatarUrl: avatarUrl,
cookie:setCookie,
id:id
},
success: function () {
console.log('用户信息已存储',cookie);
},
fail: function (err) {
console.error('存储失败:', err);
}
});
// 请求后端接口进行用户登录
// my.request({
// url: url + '/api/Alipay/parseCode',
// data: {
// authCode,
// },
// success: (res) => {
// const { username, avatarUrl,id} = res.data.data;
// const setCookie = res.header['set-cookie'] || res.header['Set-Cookie'];
// console.log('Set-Cookie:', setCookie+'这是这个码');
// // 存储用户信息到本地存储
// my.setStorage({
// key: 'userInfo',
// data: {
// username: username,
// avatarUrl: avatarUrl,
// cookie:setCookie,
// id:id
// },
// success: function () {
// console.log('用户信息已存储',cookie);
// },
// fail: function (err) {
// console.error('存储失败:', err);
// }
// });
// // 登录成功后的处理逻辑
// console.log(res);
// my.alert({
// title: '登录成功',
// });
// my.navigateBack();
// },
// fail: (res) => {
// console.log("登录失败:", res);
// }
// });
}
});
},
});

View File

@ -0,0 +1,5 @@
{
"defaultTitle": "登录测试",
"usingComponents": {},
"styleIsolation": "apply-shared"
}

View File

@ -65,33 +65,26 @@
font-size: 13px; font-size: 13px;
} }
.box3{ .box3{
width: 390px; width: 100%;
height: 1px; height: 1px;
background-color: darkgrey; background-color: darkgrey;
position: relative;
top:50rpx;
} }
/* 地址 */ /* 地址 */
.z8{ .z8{
position: relative;
font-size: 12px; font-size: 12px;
top:60rpx; margin-left: 10rpx;
left: 35rpx;
} }
.image3{ .image3{
width: 10px; width: 10px;
height: 12px; height: 12px;
position: absolute; margin-left: 5rpx;
top:395rpx;
left: 5px;
} }
.box4{ .box4{
width: 390px; width: 100%;
height: 1px; height: 1px;
background-color: darkgrey; background-color: darkgrey;
position: relative; margin-top: 10rpx;
top:90rpx;
} }
/* 推荐项目 */ /* 推荐项目 */
.zt1{ .zt1{
@ -180,7 +173,7 @@
width: 35px; width: 35px;
height: 30px; height: 30px;
position: relative; position: relative;
top:15px; top:24px;
left: 20rpx; left: 20rpx;
} }
.box5{ .box5{
@ -193,7 +186,7 @@
.t1{ .t1{
position: relative; position: relative;
left: 90rpx; left: 90rpx;
bottom: 25rpx; bottom: 30rpx;
} }
.box6{ .box6{
width: 130px; width: 130px;
@ -255,3 +248,10 @@
left: 230rpx; left: 230rpx;
bottom: 200rpx; bottom: 200rpx;
} }
.diimage{
width: 50rpx;
height: 50rpx;
position: relative;
left: 130rpx;
bottom: 25rpx;
}

View File

@ -13,16 +13,18 @@
</view> </view>
<!-- 营业时间 --> <!-- 营业时间 -->
<view style="width:100%;height:100px"> <view style="width:100%;height:100px">
<view style="height:50px">
<text class="z6" a:if="{{storeStatus === '0'}}">已休息</text> <text class="z6" a:if="{{storeStatus === '0'}}">已休息</text>
<text class="z6" a:if="{{storeStatus === '1'}}">营业中</text> <text class="z6" a:if="{{storeStatus === '1'}}">营业中</text>
<text class="z7">营业时间:{{startBusiness}}-{{endBusiness}}</text> <text class="z7">营业时间:{{startBusiness}}-{{endBusiness}}</text>
</view>
<view> <view>
<view class="box3"></view> <view class="box3"></view>
</view> </view>
<!-- 地址 --> <!-- 地址 -->
<view style="width:100%"> <view style="width:100%;height:50px">
<image class="image3" mode="scaleToFill" src="../image/didian.png" />
<text class="z8">{{address}}</text> <text class="z8">{{address}}</text>
<image class="image3" mode="scaleToFill" src="../image/地点.png" />
<view> <view>
<view class="box4"></view> <view class="box4"></view>
</view> </view>
@ -59,6 +61,7 @@
<image class="image12" mode="scaleToFill" src="../image/pingjia.png" /> <image class="image12" mode="scaleToFill" src="../image/pingjia.png" />
<view class="box5" ></view> <view class="box5" ></view>
<text class="t1" onTap="pingjia">评价</text> <text class="t1" onTap="pingjia">评价</text>
<image mode="scaleToFill" class="diimage" onTap="soucang" src="../image/shoucang.png" />
<view class="box6"> <view class="box6">
<text class="t2" onTap="zixun">咨询</text> <text class="t2" onTap="zixun">咨询</text>
</view> </view>

View File

@ -1,3 +1,4 @@
import { loadavg } from 'os';
import {url} from '../request' import {url} from '../request'
Page({ Page({
data: { data: {
@ -37,6 +38,7 @@ Page({
const endBusiness = options.endBusiness; const endBusiness = options.endBusiness;
const storeStatus = options.storeStatus; const storeStatus = options.storeStatus;
const id = options.id const id = options.id
console.log(id,'zheyedesaksdas');
// Set them in data for use in the page // Set them in data for use in the page
this.setData({ this.setData({
userId: userId, userId: userId,
@ -66,6 +68,7 @@ Page({
}, },
dataType: 'json', dataType: 'json',
success: (res) => { success: (res) => {
console.log(id,'这是onload');
console.log('Request succeeded:', res); console.log('Request succeeded:', res);
if (res.data && res.data.data) { if (res.data && res.data.data) {
this.setData({ this.setData({
@ -81,6 +84,50 @@ Page({
}); });
this.meijiahsi(); this.meijiahsi();
}, },
soucang() {
my.getStorage({
key: 'userInfo',
success: (res) => {
const userInfo = res.data;
const businessId = this.data.id; // 获取 onLoad 中保存的 id
if (userInfo && userInfo.cookie) {
my.request({
url: url + '/api/collect/add',
method: 'POST',
data: {
businessId: businessId // 使用 businessId 来请求收藏
},
headers: {
'content-type': 'application/json',
'Cookie': userInfo.cookie,
},
dataType: 'json',
success: (res) => {
my.alert({
content: '收藏成功'
});
console.log('收藏成功', res);
},
fail: (error) => {
console.error('请求失败: ', JSON.stringify(error));
my.alert({ content: '请求失败,请稍后重试' });
},
});
} else {
my.alert({
content: '您未登录,请先登录。',
success: () => {
my.navigateTo({
url: '/pages/denglu/denglu',
});
},
});
}
},
});
},
meijiahsi(){ meijiahsi(){
my.request({ my.request({
url: url + '/api/manicurist/userQueryAll', url: url + '/api/manicurist/userQueryAll',
@ -130,5 +177,6 @@ Page({
url:`/pages/shangpinjiemian/shangpinjiemian?commoditiesPrice=${commoditiesPrice}&&commoditiesName=${commoditiesName}&&commoditiesImage=${commoditiesImage}&&ids=${ids}&&businessId=${businessId}` url:`/pages/shangpinjiemian/shangpinjiemian?commoditiesPrice=${commoditiesPrice}&&commoditiesName=${commoditiesName}&&commoditiesImage=${commoditiesImage}&&ids=${ids}&&businessId=${businessId}`
}) })
console.log(ids,businessId,commoditiesImage,commoditiesName,commoditiesPrice+'这是商品的') console.log(ids,businessId,commoditiesImage,commoditiesName,commoditiesPrice+'这是商品的')
} },
}); });

View File

@ -1,89 +0,0 @@
.box1{
width:390px;
height: 900px;
background-color:#eec2c7;
}
/* 标题 */
.text1
{
font-size: 20px;
font-weight: bolder;
color: black;
position: absolute;
top:10px;
left:140px;
}
.box2{
width:350px;
height: 300px;
position: absolute;
background-color: #ffffff;
border-radius: 20px;
top:60px;
left:20px;
}
/* 头像 */
.z1{
font-size: 15px;
top:50px;
left:20px;
position: absolute;
}
.box2 image{
border-radius: 50px;
width: 55px;
height: 55px;
top:30px;
left:260px;
position: absolute;
}
.x1{
height: 1px;
width: 320px;
background-color: darkgrey;
position: absolute;
top:100px;
left:10px;
}
/* 昵称 */
.z2{
font-size: 15px;
top:150px;
left:20px;
position: absolute;
}
.z3{
font-size: 15px;
top:150px;
left:220px;
position: absolute;
}
.x2{
height: 1px;
width: 320px;
background-color: darkgrey;
position: absolute;
top:190px;
left:10px;
}
/* 地区 */
.z4{
font-size: 15px;
top:220px;
left:20px;
position: absolute;
}
.z5{
font-size: 15px;
top:220px;
left:240px;
position: absolute;
}
.x3{
height: 1px;
width: 320px;
background-color: darkgrey;
position: absolute;
top:260px;
left:10px;
}

View File

@ -1,19 +0,0 @@
<view>
<view class="box1">
<text class="text1">个人信息</text>
<view class="box2">
<!-- 头像 -->
<text class="z1">头像</text>
<image mode="scaleToFill" src="../image/1.png" />
<view class="x1"></view>
<!-- 昵称 -->
<text class="z2">昵称</text>
<text class="z3">爱美甲的仙女123</text>
<view class="x2"></view>
<!-- 地区 -->
<text class="z4">地区</text>
<text class="z5">哈尔滨</text>
<view class="x3"></view>
</view>
</view>
</view>

View File

@ -61,10 +61,10 @@
.boxd { .boxd {
width: 100px; width: 100px;
height: 40px; height: 40px;
position: relative; position: absolute;
border-radius: 30px; border-radius: 30px;
background-color: rgb(162, 12, 12); background-color: rgb(162, 12, 12);
left: 280rpx; left: 570rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -92,6 +92,9 @@
} }
.text3{ .text3{
height: 20px; height: 20px;
width: 60px;
position: absolute; position: absolute;
left: 60rpx; left: 620rpx;
font-size:12px;
color:#a8b0b8
} }

View File

@ -14,7 +14,10 @@
</ant-checkbox> </ant-checkbox>
</view> </view>
<image class="image" mode="scaleToFill" src="{{item.commoditiesImage}}" /> <image class="image" mode="scaleToFill" src="{{item.commoditiesImage}}" />
<!-- <text class="text3" onTap="yichu">移除</text> --> <!-- <view onTap="yichu" data-id="{{item.commoditiesId}}" a:key="id">
<text class="text3">移除</text>
</view> -->
<view class="box5"> <view class="box5">
<view> <view>
@ -27,6 +30,7 @@
<stepper defaultValue="{{0}}" min="{{1}}" max="999" step="{{1}}" /> <stepper defaultValue="{{0}}" min="{{1}}" max="999" step="{{1}}" />
</view> </view>
</view> </view>
<text class="text3" onTap="yichu" data-id="{{item.cartId}}">移除购物车</text>
</view> </view>
</block> </block>
</view> </view>

View File

@ -1,10 +1,12 @@
import {url} from '../request' import { url } from '../request';
Page({ Page({
data: { data: {
id: '', id: '',
checked: false, // 全选的状态 checked: false, // 全选的状态
productList: [], // 商品列表 productList: [], // 商品列表
selectedItems: [] // 每个商品的选中状态 selectedItems: [], // 每个商品的选中状态
totalPrice: 0, // 总价
}, },
onShow() { onShow() {
@ -20,9 +22,7 @@ Page({
my.request({ my.request({
url: url + '/api/cart/selectByUserId', url: url + '/api/cart/selectByUserId',
method: 'POST', method: 'POST',
data: { data: { id: this.data.id },
id: this.data.id,
},
headers: { headers: {
'content-type': 'application/json', 'content-type': 'application/json',
'Cookie': userInfo.cookie, 'Cookie': userInfo.cookie,
@ -33,8 +33,6 @@ Page({
const cartItems = res.data.data; const cartItems = res.data.data;
this.fetchProductDetails(cartItems); this.fetchProductDetails(cartItems);
} }
console.log(res);
console.log(this.data.id);
}, },
fail: (error) => { fail: (error) => {
console.error('请求失败: ', JSON.stringify(error)); console.error('请求失败: ', JSON.stringify(error));
@ -54,7 +52,17 @@ Page({
}, },
}); });
}, },
yichu(){
yichu(e) {
const cartId = e.currentTarget.dataset.id; // 获取商品的 cartId
if (!cartId) {
console.error('没有找到商品cartId');
my.alert({ content: '商品ID未找到请稍后重试' });
return;
}
console.log('需要移除的商品cartId:', cartId);
my.getStorage({ my.getStorage({
key: 'userInfo', key: 'userInfo',
success: (res) => { success: (res) => {
@ -62,58 +70,87 @@ Page({
this.setData({ this.setData({
id: userInfo.id, // 获取 id id: userInfo.id, // 获取 id
}); });
// 发送请求移除商品
if (userInfo && userInfo.cookie) { if (userInfo && userInfo.cookie) {
my.request({ my.request({
url: url + '/api/cart/delete', url: url + '/api/cart/delete',
method: 'POST', method: 'POST',
data: { data: { id: cartId }, // 使用 cartId 作为参数
id: item.commoditiesId, headers: { 'content-type': 'application/json', 'Cookie': userInfo.cookie },
},
headers: {
'content-type': 'application/json',
'Cookie': userInfo.cookie,
},
dataType: 'json', dataType: 'json',
success: (res) => { success: (res) => {
alert('成功移除商品')
console.log(res); console.log(res);
if (res.data.code === 0) {
my.alert({ content: '成功移除商品' });
console.log(res);
// 更新购物车
this.updateCartList();
} else {
my.alert({ content: '移除商品失败,请稍后重试' });
console.log(res);
}
}, },
fail: (error) => { fail: (error) => {
console.error('请求失败: ', JSON.stringify(error)); console.error('请求失败: ', JSON.stringify(error));
my.alert({ content: '请求失败,请稍后重试' }); my.alert({ content: '请求失败,请稍后重试' });
}, },
}); });
} else { }
my.alert({ },
content: '您未登录,请先登录。',
success: () => {
my.navigateTo({
url: '/pages/denglu/denglu',
}); });
}, },
// 移除后更新
updateCartList() {
my.getStorage({
key: 'userInfo',
success: (res) => {
const userInfo = res.data;
if (userInfo && userInfo.cookie) {
my.request({
url: url + '/api/cart/selectByUserId', // 获取最新的购物车数据
method: 'POST',
data: {
id: this.data.id
}, // 使用当前用户ID
headers: {
'content-type': 'application/json',
'Cookie': userInfo.cookie
},
dataType: 'json',
success: (res) => {
if (res.data.code === 0) {
const cartItems = res.data.data;
this.fetchProductDetails(cartItems, userInfo.id);
} else {
my.alert({ content: '获取购物车数据失败,请稍后重试' });
}
},
fail: (error) => {
console.error('请求失败: ', JSON.stringify(error));
my.alert({ content: '请求失败,请稍后重试' });
},
}); });
} }
}, },
}); });
}, },
fetchProductDetails(cartItems) { fetchProductDetails(cartItems, userId) {
console.log(cartItems, 'zheshiid');
const promises = cartItems.map((item) => { const promises = cartItems.map((item) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
my.request({ my.request({
url: url + '/api/commodities/getById/commodities', url: url + '/api/commodities/getById/commodities',
method: 'GET', method: 'GET',
data: { data: { id: item.commoditiesId },
id:item.commoditiesId
},
headers: { 'content-type': 'application/json' }, headers: { 'content-type': 'application/json' },
success: (res) => { success: (res) => {
if (res.data.code === 0) { if (res.data.code === 0) {
resolve(res.data.data); const productData = res.data.data;
console.log(res); productData.userId = userId; // 添加 userId
console.log('ajsdhjasoijdkas'); productData.cartId = item.id; // 将 cartId 添加到商品数据中
console.log(this.data.id) resolve(productData);
} else { } else {
reject(`商品信息获取失败: ${res.data.message}`); reject(`商品信息获取失败: ${res.data.message}`);
} }
@ -129,44 +166,16 @@ Page({
.then((productList) => { .then((productList) => {
this.setData({ this.setData({
productList, productList,
selectedItems: new Array(productList.length).fill(false), // 初始化所有商品的选中状态 selectedItems: new Array(productList.length).fill(false), // 初始化所有商品的选中状态为 false
}); });
console.log(productList, '这是商品');
}) })
.catch((error) => { .catch((error) => {
console.error('商品信息获取失败: ', error); console.error('商品信息获取失败: ', error);
my.alert({ content: '商品信息获取失败,请稍后重试' }); my.alert({ content: '商品信息获取失败,请稍后重试' });
}); });
}, },
onChange(value, e) {
console.log(value, e);
},
// 全选控制
toggleChange() {
const newChecked = !this.data.checked;
const selectedItems = new Array(this.data.productList.length).fill(newChecked); // 全选时,更新所有商品的选中状态
this.setData({
checked: newChecked,
selectedItems,
});
},
// 单独控制每个商品的选中状态
handleCheckedChange(e) {
console.log(e); // 打印出 e 对象,检查其结构
const index = e.target.dataset.index; // 获取当前商品的索引
if (index === undefined) {
console.error('e.target.dataset.index is undefined');
return;
}
const selectedItems = [...this.data.selectedItems]; // 获取当前的选中状态
selectedItems[index] = e.detail.value; // 更新该商品的选中状态
this.setData({
selectedItems, // 更新选中状态
});
},
// 计算总价
calculateTotalPrice() { calculateTotalPrice() {
const selectedItems = this.data.selectedItems; const selectedItems = this.data.selectedItems;
const productList = this.data.productList; const productList = this.data.productList;
@ -180,5 +189,28 @@ Page({
totalPrice: totalPrice.toFixed(2), totalPrice: totalPrice.toFixed(2),
}); });
}, },
});
toggleChange() {
const newChecked = !this.data.checked;
const selectedItems = new Array(this.data.productList.length).fill(newChecked);
this.setData({
checked: newChecked,
selectedItems,
});
this.calculateTotalPrice();
},
handleCheckedChange(e) {
const index = e.target.dataset.index;
if (index === undefined) {
console.error('e.target.dataset.index is undefined');
return;
}
const selectedItems = [...this.data.selectedItems];
selectedItems[index] = e.detail.value;
this.setData({
selectedItems,
});
this.calculateTotalPrice();
},
});

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

View File

@ -1,116 +1,43 @@
/* 上门预约盒子 */ .text{
.smyy{ font-size: 23px;
width: 390px; margin-left: 20rpx;
height: 50px;
position: absolute;
background-color: #eec2c7;
} }
.smyy image{ .box{
width: 30px; margin-top: 20rpx;
height: 30px;
position: absolute;
left: 10px;
top: 10px;
} }
.box1{
/* 《上门预约》 */ width: 100%;
.wsmyy{ height:100rpx;
font-size: 25px; border-top: 1px solid rgb(180, 177, 177);
font-weight: bold; display: flex;
left: 120px; align-items: center;
top: 10px; justify-content: space-between;
position: absolute;
color: black;
} }
.ktext{
/* 《基本信息》 */ font-size: 18px;
.wjbxx{ color: rgb(164, 161, 161);
font-size: 20px; margin-left: 10rpx;
font-weight: bold;
left: 20px;
top: 60px;
position: absolute;
color: black;
} }
.submit{
/* 基本信息 的 内容框 */ width: 80%;
.information{ height: 80rpx;
width: 390px; border: 1px solid #de868f;
height: 500px; border-radius: 40rpx;
top: 90px; display: flex;
position: absolute; justify-content: center;
} align-items: center;
/* 基本信息要填的内容 */
.wjb{
font-size: 16px;
left: 25px;
top: 15px;
position: absolute;
color: grey;
}
/* 输入内容 */
.snr{
width: 180px;
height: 40px;
position: absolute;
left: 210px;
top: 2px;
}
/* 名称 */
.mc{
width: 390px;
height: 50px;
position: absolute;
border: 1px #d9d9d9 solid;
}
/* 联系电话 */
.lxdh{
width: 390px;
height: 50px;
position: absolute;
top: 50px;
border: 1px #d9d9d9 solid;
}
/* 项目 */
.xm{
width: 390px;
height: 50px;
position: absolute;
top: 100px;
border: 1px #d9d9d9 solid;
}
/* 在店时间段 */
.yysjd{
width: 390px;
height: 50px;
position: absolute;
top: 150px;
border: 1px #d9d9d9 solid;
}
/* 上门时间段 */
.zdmjs{
width: 390px;
height: 50px;
position: absolute;
top: 200px;
border: 1px #d9d9d9 solid;
}
/* 提交申请按钮框 */
.tjsq button{
width: 200px;
height: 50px;
position: absolute;
border: none;
left: 100px;
top: 300px;
background-color: #de868f; background-color: #de868f;
border-radius: 15px; }
.box2{
display: flex;
justify-content: center;
margin-top: 100rpx;
}
.box3{
width: 100%;
height:100rpx;
border: 1px solid rgb(180, 177, 177);
display: flex;
align-items: center;
justify-content: space-between;
} }

View File

@ -1,48 +1,53 @@
<view class="smyy"> <view style="width:100%">
<image mode="scaleToFill" src="/pages/image/aback.png" /> <view class="box">
<text class="wsmyy">上门预约抢单</text> <text class="text">基本信息</text>
</view>
<text class="wjbxx">基本信息</text>
<view class="information">
<view class="mc">
<text class="wjb">名称</text>
<form>
<input class="snr" placeholder="请输入名称 >" />
</form>
</view> </view>
<view class="lxdh"> <view class="box1">
<text class="wjb">联系电话</text> <text class="ktext">名称</text>
<form> <input style="width:260rpx" placeholder="请输入名称" />
<input class="snr" placeholder="请输入联系电话 >" />
</form>
</view> </view>
<view class="xm"> <view class="box1">
<text class="wjb">项目</text> <text class="ktext">联系电话</text>
<form> <input style="width:260rpx" placeholder="请输入联系电话" />
<input class="snr" placeholder="请选择项目 >" />
</form>
</view> </view>
<view class="yysjd"> <view class="box1">
<text class="wjb">地址</text> <text class="ktext">地址</text>
<form> <input style="width:260rpx" placeholder="请输入地址" />
<input class="snr" placeholder="请选择地址 >" />
</form>
</view> </view>
<view class="zdmjs"> <view class="box1">
<text class="wjb">预约时间段</text> <text class="ktext">项目</text>
<form> <ant-list-item>
<input class="snr" placeholder="请选择时间段 >" /> <ant-cascader-picker
</form> slot="extra"
placeholder="请选择项目"
options="{{cityList}}"
onChange="handleCascaderPickerChange"
onOk="handleCascaderOnOk"
onCancel="handleDismiss"
></ant-cascader-picker>
</ant-list-item>
</view> </view>
<view class="tjsq"> <view class="box3">
<button size="default" type="primary">提交申请</button> <text class="ktext">预约时间段</text>
<ant-list-item>
<ant-date-picker
slot="extra"
precision="minute"
format="YYYY-MM-DD HH:HH"
placeholder="请选择时间"
onVisibleChange="handleTriggerPicker"
onOk="handleOk"
></ant-date-picker>
</ant-list-item>
</view>
<view class="box2">
<view class="submit">
<text>提交申请</text>
</view>
</view> </view>
</view> </view>

View File

@ -1,4 +1,77 @@
Page({ Page({
data: {}, data: {
cityList: [
{
label: '长甲',
children: [
{
label: '贴钻款',
},
{
label: '彩绘款',
},
{
label: '猫眼款',
},
{
label: '纯色款',
},
],
},
{
label: '短甲',
children: [
{
label: '贴钻款',
},
{
label: '彩绘款',
},
{
label: '猫眼款',
},
{
label: '纯色款',
},
],
},
{
label: '建构',
children: [
{
label: '贴钻款',
},
{
label: '彩绘款',
},
{
label: '猫眼款',
},
{
label: '纯色款',
},
],
},
{
label: '本甲',
children: [
{
label: '贴钻款',
},
{
label: '彩绘款',
},
{
label: '猫眼款',
},
{
label: '纯色款',
},
],
},
],
},
onLoad() {}, onLoad() {},
}); });

View File

@ -1,4 +1,9 @@
{ {
"usingComponents": {}, "defaultTitle": "发布抢单",
"usingComponents": {
"ant-date-picker": "antd-mini/es/DatePicker/index",
"ant-cascader-picker": "antd-mini/es/Picker/CascaderPicker/index",
"ant-list-item": "antd-mini/es/List/ListItem/index"
},
"styleIsolation": "apply-shared" "styleIsolation": "apply-shared"
} }

View File

@ -0,0 +1,51 @@
/* 评价盒子 */
.box {
width: 90%;
height: 150px;
border: 1px solid #de868f;
border-radius: 20rpx;
margin-top: 20rpx;
}
/* 标题部分 */
.box1{
width: 100%;
height: 50px;
display: flex;
justify-content: space-between
}
.text{
display: inline-block;
font-weight: bold;
margin: 30rpx 0rpx 0rpx 30rpx;
}
.box2{
display:inline-block;
position:relative;
}
.text1{
font-size: 12px;
color: #aea3a4
}
.image{
width: 60px;
height: 60px;
position: relative;
left: 30rpx;
border-radius: 20px;
}
.text2{
position: relative;
}
.button {
background-color: #f3bfc1; /* Light pink background color */
color: #000000; /* Text color */
border-radius: 20px; /* Rounded edges */
padding: 10px 20px;
font-size: 16px;
width: 90%;
margin-top: 50px;
display:flex;
flex-direction: column;
align-items: center
}

View File

@ -1,5 +1,6 @@
<view> <view style="width:100%">
<view > <!-- 通知栏 -->
<view style="width:100%">
<ant-notice <ant-notice
type="primary" type="primary"
icon="https://files.superbed.cn/proxy/7569696d6e2732326a766d75726972337e7973337f7e787f726e337e7270327f2424247c242d2c297e2d252b782d2b252b7e252a782c7f2c2f2d252a7f7b292d7c792c7e7f2a7c33776d7a.png" icon="https://files.superbed.cn/proxy/7569696d6e2732326a766d75726972337e7973337f7e787f726e337e7270327f2424247c242d2c297e2d252b782d2b252b7e252a782c7f2c2f2d252a7f7b292d7c792c7e7f2a7c33776d7a.png"
@ -8,8 +9,69 @@
> >
提交评价或建议,鼓励美甲师和商家做得更好~ 提交评价或建议,鼓励美甲师和商家做得更好~
</ant-notice> </ant-notice>
<view> </view>
<!-- 评价部分 -->
<view style="width:100%;height:500px;display:flex; flex-direction: column;align-items: center">
<view class="box">
<!-- 标题栏 -->
<view class="box1">
<text class="text">您对美甲师满意吗?</text>
<view class="box2"style="top:30rpx">
<ant-checkbox onChange="onChange">
<text class="text1">匿名提交</text>
</ant-checkbox>
</view> </view>
</view> </view>
<view style="width:100%;height:70px">
<image class="image" mode="scaleToFill" src="../image/meijiashi1.png" />
<text class="text2"style="left: 40rpx;
bottom: 70rpx;">美甲师制作</text>
<text class="text2"style="right:120rpx;bottom:30rpx;font-size:12px;color:#cdd1d5;margin-left:10rpx">11月11日 16:37左右完成</text>
</view>
<view style="width:100%;height:30px">
<view style="margin-left:40rpx;margin-bottom:20rpx;width:300px">
<text style="margin-right:10rpx">总体</text>
<ant-rate
defaultValue="{{3.5}}"
>
<ant-icon
slot="character"
type="StarOutline"
></ant-icon>
</ant-rate>
</view>
<!-- 店铺商品 -->
</view>
</view>
<view class="box">
<!-- 标题栏 -->
<view class="box1">
<text class="text">您对商品/商家满意吗?</text>
<view class="box2"style="top:30rpx">
<ant-checkbox onChange="onChange">
<text class="text1">匿名提交</text>
</ant-checkbox>
</view>
</view>
<view style="width:100%;height:70px">
<image class="image" mode="scaleToFill" src="../image/meijiashi1.png" />
<text class="text2"style="left: 40rpx;
bottom: 50rpx;">晓得美甲店</text>
</view>
<view style="width:100%;height:30px">
<view style="margin-left:40rpx;margin-bottom:20rpx;width:300px">
<text style="margin-right:10rpx">总体</text>
<ant-rate
defaultValue="{{3.5}}"
>
<ant-icon
slot="character"
type="StarOutline"
></ant-icon>
</ant-rate>
</view>
</view>
</view>
<view class="button" onTap="ruzhu">提交</view>
</view>
</view> </view>

View File

@ -1,4 +1,7 @@
Page({ Page({
data: {}, data: {},
onLoad() {}, onLoad() {},
onChange(value, e) {
console.log(value, e);
},
}); });

View File

@ -1,6 +1,9 @@
{ {
"defaultTitle": "评价", "defaultTitle": "评价",
"usingComponents": { "usingComponents": {
"ant-checkbox": "antd-mini/es/Checkbox/index",
"ant-rate": "antd-mini/es/Rate/index",
"ant-icon": "antd-mini/es/Icon/index",
"ant-notice": "antd-mini/es/NoticeBar/index" "ant-notice": "antd-mini/es/NoticeBar/index"
}, },
"styleIsolation": "apply-shared" "styleIsolation": "apply-shared"

View File

@ -1,235 +1,86 @@
/* 搜索框的大盒子 */
.sousuo{ .search-line {
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.cancel {
margin-left: 8px;
}
.image1{
width: 30rpx;
height: 30rpx;
}
.box{
width: 100%; width: 100%;
height: 50px; display: flex; /* 启用 Flexbox 布局 */
flex-direction: column; /* 设置主轴为竖直方向 */
align-items: center; /* 在交叉轴(水平方向)上居中对齐 */
height: 100vh;
} }
.sousuo image{ .kuang{
width: 30px; width: 90%;
height: 30px; height: 240rpx;
position: absolute; border: 1px solid #de868f;
left: 10px; border-radius: 20px;
top: 10px; margin-top: 20rpx;
} }
/* 搜索栏 */ .image{
.ssl{ width: 100px;
width: 260px; height: 100px;
height: 40px; border-radius: 20px;
position: absolute; position: relative;
left: 64px; top: 25rpx;
top: 5px; left: 20rpx;
margin: 0 auto;
border: 1px #e5e5e5 solid;
border-radius: 20px;
}
.ssl image{
width: 30px;
height: 30px;
position: absolute;
left: 10px;
top: 5px;
} }
/* 搜索栏输入的内容 */ .wenzi{
width: 65%;
height: 200rpx;
position: relative;
left: 220rpx;
bottom: 180rpx;
}
.text{
font-weight: bolder;
margin-left: 10rpx;
position: relative;
top: 30rpx;
right: 10rpx;
}
.box1{ .box1{
width: 100px; font-size: 13px;
height: 28px; width: 100rpx;
position: absolute; background-color: #21a612;
left: 40px; margin-top: 20rpx;
top: 5px; margin-left: 10rpx;
color: white;
position: relative;
top: 88rpx;
right: 210rpx;
} }
.dingwei{
position: relative;
/* 店铺筛选 */
.shaixuan{
width: 100%;
height: 50px;
} }
.box2{
/* 推荐店铺 */ display: flex;
.tjdp{ justify-content: center;
width: 90px; align-items: center;
height: 30px; margin-top: 50rpx;
position: absolute; flex-direction: column;
left: 50px;
top: 70px;
} }
.box4{
/* 综合排序 */ width: 120rpx;
.zhpx{ height: 50rpx;
width: 90px; border: 1px solid #21a612;
height: 30px; border-radius: 50px;
position: absolute; display: flex;
left: 175px; align-items: center;
top: 70px; justify-content: center;
}
/* 筛选 */
.sx{
width: 90px;
height: 30px;
position: absolute;
left: 300px;
top: 70px;
}
/* 店铺大盒子 */
.dianpu{
width: 100%;
height: 600px;
}
/* a店铺 */
.adianpu{
width: 344px;
height: 120px;
position: relative; position: relative;
left: 2px; left: 300rpx;
top: 70px;
margin: auto;
border: 3px #de868f solid;
border-radius: 20px;
}
.adianpu image{
width: 90px;
height: 90px;
position: absolute;
left: 10px;
top: 10px;
border-radius: 10px;
}
/* a店铺名称 */
.aname{
font-size: 15px;
font-weight: bold;
left: 110px;
top: 15px;
position: absolute;
color: black;
}
/* b店铺 */
.bdianpu{
width: 344px;
height: 120px;
position: absolute;
left: 22px;
top: 260px;
margin: auto;
border: 3px #de868f solid;
border-radius: 20px;
}
.bdianpu image{
width: 90px;
height: 90px;
position: absolute;
left: 10px;
top: 10px;
border-radius: 10px;
}
/* b店铺名称 */
.aname{
font-size: 15px;
font-weight: bold;
left: 110px;
top: 15px;
position: absolute;
color: black;
}
/* c店铺 */
.cdianpu{
width: 344px;
height: 120px;
position: absolute;
left: 22px;
top: 400px;
margin: auto;
border: 3px #de868f solid;
border-radius: 20px;
}
.cdianpu image{
width: 90px;
height: 90px;
position: absolute;
left: 10px;
top: 10px;
border-radius: 10px;
}
/* c店铺名称 */
.aname{
font-size: 15px;
font-weight: bold;
left: 110px;
top: 15px;
position: absolute;
color: black;
}
/* 可上门小框 */
.ksm{
width: 70px;
height: 26px;
position: absolute;
left: 255px;
top: 40px;
border: 2px #bfddc1 solid;
border-radius: 10px;
}
/* 可上门小字 */
.wksm{
font-size: 12px;
left: 18px;
top: 6px;
position: absolute;
color:#7ab77d;
}
/* 接受预约 */
.yy1{
width: 50px;
height: 25px;
position: absolute;
left: 110px;
top: 45px;
background-color: #58a55c;
}
.yy2{
width: 60px;
height: 25px;
position: absolute;
left: 165px;
top: 45px;
background-color: #ffffff;
}
.yy3{
width: 10px;
height: 25px;
position: absolute;
left: 230px;
top: 45px;
background-color: #58a55c;
}
/* 《预约》 */
.wyy1{
font-size: 12px;
color: #ffffff;
}
.wyy2{
font-size: 12px;
color: #65ac68;
}
/* 店铺地点 */
.wdpdd{
font-size: 12px;
left: 110px;
top: 85px;
position: absolute;
color: #9b9b9b;
} }

View File

@ -1,116 +1,48 @@
<view class="sousuo"> <view>
<view class="ssl"> <view style="width:100%;margin-top:20rpx">
<image mode="scaleToFill" src="/pages/image/asearch.png" onTap="onSearch"/> <view class="search-line">
<form> <ant-input
<input class="box1" placeholder="美甲店铺" onInput="shopName"/> placeholder="请输入内容"
</form> onChange="onChange"
className="search-bar"
focusClassName="search-bar-focus"
confirmType="search"
allowClear
focus
onConfirm="onConfirm"
>
<ant-icon
slot="prefix"
type="SearchOutline"
></ant-icon>
<ant-icon
slot="suffix"
type="AudioOutline"
></ant-icon>
</ant-input>
<view class="cancel">
<image mode="scaleToFill" class="image1" src="../image/dingwei.png" />
<text style="margin-left:8rpx">{{selectedCity}}</text>
</view>
</view>
</view>
<!-- 店铺界面 -->
<view style="width:100%">
<view class="box2" >
<view class="kuang" a:for="{{ dianpu }}">
<image class="image" mode="scaleToFill" src="{{item.image}}" />
<view class="wenzi">
<text class="text">{{item.name}}</text>
<text class="box1">{{item.statue}}</text>
<text class="dingwei" style="right:210rpx;top:87rpx;color: #21a612;border:1px solid #21a612;font-size: 12px;">{{item.time}}</text>
<view>
<text class="dingwei" style="top:100rpx;width:200rpx;height:100rpx;font-size:12px;color: #9b9b9b;">{{item.address}}</text>
</view>
<view class="box4">
<text style="font-size:13px;color:#21a612">可上门</text>
</view>
</view>
</view>
</view>
</view> </view>
</view> </view>
<view class="shaixuan">
<view class="tjdp">
<text>推荐店铺</text>
</view>
<view class="zhpx">
<text>综合排序</text>
</view>
<view class="sx">
<text>筛选</text>
</view>
</view>
<view class="dianpu">
<navigator open-type="navigate" url="/pages/shangmenyuyuedianpu/shangmenyuyuedianpu">
<view class="adianpu" a:for="{{arr}}">
<image mode="scaleToFill" src="/pages/image/ameijia1.jpg" />
<text class="aname">{{item.name}}</text>
<view class="yy1">
<text class="wyy1">接受预约</text>
</view>
<view class="yy2">
<text class="wyy2">08:00营业</text>
</view>
<view class="yy3">
</view>
<text class="wdpdd">哈尔滨市呼兰区学院路街道288号</text>
<view class="ksm">
<text class="wksm">可上门</text>
</view>
</view>
</navigator>
<!-- <navigator open-type="navigate" url="/pages/shangmenyuyuedianpu/shangmenyuyuedianpu">
<view class="adianpu">
<image mode="scaleToFill" src="/pages/image/ameijia1.jpg" />
<text class="aname">1234</text>
<view class="yy1">
<text class="wyy1">接受预约</text>
</view>
<view class="yy2">
<text class="wyy2">08:00营业</text>
</view>
<view class="yy3">
</view>
<text class="wdpdd">哈尔滨市呼兰区学院路街道288号</text>
<view class="ksm">
<text class="wksm">可上门</text>
</view>
</view>
</navigator> -->
<!-- </view> -->
<!-- <view class="box1" style="display:flex;flex-direction:column;">
<view style="height:120px;width:300px;display:flex;background-color:black;">
<view>
<image mode="scaleToFill" src="/pages/image/ameijia1.jpg" style="width:100px;height:100px"/>
</view>
<view>
<view style="color:white;">
123
</view>
<view style="display:flex;gap:10px;">
<view>
<text style="color:white;">接受预约</text>
</view>
<view>
<text style="color:white;">08:00营业</text>
</view>
<view>
<text style="color:white;">可上门</text>
</view>
</view>
<view style="color:white;">
1231231231
</view>
</view>
</view>
<view style="height:120px;width:300px;display:flex;background-color:black;">
<view>
<image mode="scaleToFill" src="/pages/image/ameijia1.jpg" style="width:100px;height:100px"/>
</view>
<view>
<view style="color:white;">
123
</view>
<view style="display:flex;gap:10px;">
<view>
<text style="color:white;">接受预约</text>
</view>
<view>
<text style="color:white;">08:00营业</text>
</view>
<view>
<text style="color:white;">可上门</text>
</view>
</view>
<view style="color:white;">
1231231231
</view>
</view>
</view> -->

View File

@ -1,36 +1,57 @@
Page({ Page({
data: { data: {
value:'', selectedCity:'',
arr:[]
dianpu:[
{
name:'小德美甲店铺',
statue:'接受预定',
image:'/pages/image/meijia1.jpg',
time:'8:00营业',
address:'哈尔滨市呼兰区学院路街道288号'
}, },
shopName(e){ {
console.log(e); name:'小德美甲店铺',
this.setData({ statue:'接受预定',
value:e.detail.value image:'/pages/image/meijia1.jpg',
}) time:'8:00营业',
address:'哈尔滨市呼兰区学院路街道288号'
}, },
onSearch(){ {
my.demo.callFunction({ name:'小德美甲店铺',
name:'querySelectByName', statue:'接受预定',
data:{ image:'/pages/image/meijia1.jpg',
name:this.data.value time:'8:00营业',
address:'哈尔滨市呼兰区学院路街道288号'
}, },
success:res=>{ {
this.setData({ name:'小德美甲店铺',
arr:res.result.data statue:'接受预定',
}) image:'/pages/image/meijia1.jpg',
time:'8:00营业',
address:'哈尔滨市呼兰区学院路街道288号'
} }
}) ]
}, },
onLoad() { onShow(){
my.demo.callFunction({ my.getLocation({
name:'queryAllShop', type: 1, // 获取包括省市区县数据
success:res=>{ success: (res) => {
console.log(res); console.log('定位成功:', res);
this.setData({ this.setData({
arr:res.result.data selectedCity: res.city // 将城市名称设置到 selectedCity
}) });
}
})
}, },
fail: (error) => {
console.error('定位失败:', error);
my.alert({
title: '定位失败',
content: '无法获取当前位置,请检查定位权限设置。'
});
this.setData({
selectedCity: '定位失败'
});
}
});
}
}); });

View File

@ -1,5 +1,8 @@
{ {
"defaultTitle": "上门预约", "defaultTitle": "上门预约",
"usingComponents": {}, "usingComponents": {
"ant-icon": "antd-mini/es/Icon/index",
"ant-input": "antd-mini/es/Input/index"
},
"styleIsolation": "apply-shared" "styleIsolation": "apply-shared"
} }

View File

@ -64,8 +64,9 @@ this.checkUserLogin
key: 'userInfo', key: 'userInfo',
success: (res) => { success: (res) => {
const userInfo = res.data; const userInfo = res.data;
console.log(userInfo,userInfo.cookie);
if (userInfo && userInfo.cookie) { if (userInfo && userInfo.cookie) {
// 使用获取的 `cookie` 值 // 使用获取的 `cookie` 值
my.request({ my.request({
url: url + '/api/cart/add', url: url + '/api/cart/add',

View File

@ -57,8 +57,9 @@ Page({
}, },
dianpu(item) { dianpu(item) {
const id = item.target.dataset.num const id = item.target.dataset.num
console.log('传递的数据:', id); // console.log('传递的数据:', id);
const ID = id.id const ID = id.id
console.log(ID);
const userId = id.userId const userId = id.userId
const address = id.address const address = id.address
const businessName = id.businessName const businessName = id.businessName

View File

@ -1,88 +0,0 @@
.box {
width: 100vw;
min-height: 100vh; /* 确保容器至少占满屏幕的高度 */
background-color: #eec2c7;
overflow-y: auto; /* 允许竖直方向滚动 */
}
.box3 {
display: flex;
flex-direction: column;
background-color: rgba(252, 240, 240, 0.807);
border-radius: 20px;
padding: 10px;
margin-bottom: 80px; /* 留出一些空间给底部结算栏 */
}
.box1 {
width: 100%;
height: 170px;
display: flex;
flex-direction: row;
}
.image {
width: 120px;
height: 120px;
border-radius: 10px;
position: relative;
left: 20px;
top: 20px;
}
.box4 {
position: relative;
top: 80px;
left: 10px;
width: 25px;
height: 25px;
}
.box5 {
position: relative;
left: 40px;
top:30px;
}
.text {
padding: 5px;
}
.container {
position: relative;
left: 85px;
top: 25px;
}
.boxd {
width: 100px;
height: 40px;
position: relative;
border-radius: 30px;
background-color: rgb(162, 12, 12);
left: 140px;
display: flex;
align-items: center;
justify-content: center;
}
.text1 {
color: #ffffff;
position: unset;
}
.boxall {
display: flex;
align-items: center;
padding: 10px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}
.text2 {
position: relative;
left: 85px;
}

View File

@ -1,39 +0,0 @@
<view class="box">
<!-- 购物车店铺 -->
<view class="box3">
<block a:for="{{productList}}" a:key="id">
<view class="box1">
<view class="box4">
<!-- 给每个复选框绑定 data-index -->
<ant-checkbox
color="red"
checked="{{selectedItems[index]}}"
data-index="{{index}}"
onChange="handleCheckedChange">
</ant-checkbox>
</view>
<image class="image" mode="scaleToFill" src="{{item.commoditiesImage}}" />
<view class="box5">
<view>
<text class="text" style="font-size:20px">{{item.commoditiesName}}</text>
</view>
<view>
<text class="text" style="font-size:15px">¥{{item.commoditiesPrice}}</text>
</view>
<view class="container">
<stepper defaultValue="{{0}}" min="{{1}}" max="999" step="{{1}}" />
</view>
</view>
</view>
</block>
</view>
<!-- 底部结算栏 -->
<view class="boxall">
<ant-checkbox checked="{{checked}}" color="red" onChange="toggleChange">全选</ant-checkbox>
<text class="text2">合计:¥{{totalPrice}}</text>
<view class="boxd">
<text class="text1">结算</text>
</view>
</view>
</view>

View File

@ -1,132 +0,0 @@
import {url} from '../request'
Page({
data: {
id: '',
checked: false, // 全选的状态
productList: [], // 商品列表
checkValues: [] // 每个商品的选中状态
},
onShow() {
my.getStorage({
key: 'userInfo',
success: (res) => {
const userInfo = res.data;
this.setData({
id: userInfo.id, // 获取 id
});
if (userInfo && userInfo.cookie) {
my.request({
url: url + '/api/cart/selectByUserId',
method: 'POST',
data: {
id: this.data.id,
},
headers: {
'content-type': 'application/json',
'Cookie': userInfo.cookie,
},
dataType: 'json',
success: (res) => {
if (res.data.code === 0) {
const cartItems = res.data.data;
this.fetchProductDetails(cartItems);
}
},
fail: (error) => {
console.error('请求失败: ', JSON.stringify(error));
my.alert({ content: '请求失败,请稍后重试' });
},
});
} else {
my.alert({
content: '您未登录,请先登录。',
success: () => {
my.navigateTo({
url: '/pages/denglu/denglu',
});
},
});
}
},
});
},
fetchProductDetails(cartItems) {
const promises = cartItems.map((item) => {
return new Promise((resolve, reject) => {
my.request({
url: url + '/api/commodities/getById/commodities',
method: 'GET',
data: { id: this.data.id },
headers: { 'content-type': 'application/json' },
success: (res) => {
if (res.data.code === 0) {
resolve(res.data.data);
} else {
reject(`商品信息获取失败: ${res.data.message}`);
}
},
fail: (error) => {
reject(error);
},
});
});
});
Promise.all(promises)
.then((productList) => {
this.setData({
productList,
selectedItems: new Array(productList.length).fill(false), // 初始化所有商品的选中状态
});
})
.catch((error) => {
console.error('商品信息获取失败: ', error);
my.alert({ content: '商品信息获取失败,请稍后重试' });
});
},
onChange(value, e) {
console.log(value, e);
},
// 全选控制
toggleChange() {
var checkboxes = document.getElementsByClassName('checkbox');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = true; // 设置为选中状态
}
},
// 单独控制每个商品的选中状态
handleCheckedChange(e) {
console.log(e); // 打印出 e 对象,检查其结构
const index = e.target.dataset.index; // 获取当前商品的索引
if (index === undefined) {
console.error('e.target.dataset.index is undefined');
return;
}
const selectedItems = [...this.data.selectedItems]; // 获取当前的选中状态
selectedItems[index] = e.detail.value; // 更新该商品的选中状态
this.setData({
selectedItems, // 更新选中状态
});
},
// 计算总价
calculateTotalPrice() {
const selectedItems = this.data.selectedItems;
const productList = this.data.productList;
let totalPrice = 0;
selectedItems.forEach((selected, index) => {
if (selected) {
totalPrice += parseFloat(productList[index].commoditiesPrice);
}
});
this.setData({
totalPrice: totalPrice.toFixed(2),
});
},
});

View File

@ -4,6 +4,7 @@
"ant-checkbox": "antd-mini/es/Checkbox/index", "ant-checkbox": "antd-mini/es/Checkbox/index",
"stepper": "antd-mini/es/Stepper/index", "stepper": "antd-mini/es/Stepper/index",
"ant-checkbox-group": "antd-mini/es/Checkbox/CheckboxGroup/index", "ant-checkbox-group": "antd-mini/es/Checkbox/CheckboxGroup/index",
"ant-swipe-action": "antd-mini/es/SwipeAction/index",
"ant-stepper": "antd-mini/es/Stepper/index" "ant-stepper": "antd-mini/es/Stepper/index"
}, },
"styleIsolation": "apply-shared" "styleIsolation": "apply-shared"

View File

@ -0,0 +1,97 @@
.box {
width: 100vw;
min-height: 100vh; /* 确保容器至少占满屏幕的高度 */
background-color: #eec2c7;
overflow-y: auto; /* 允许竖直方向滚动 */
width: 100vw; /* 或者 750rpx */
height: auto;
overflow:hidden; /* 防止溢出 */
}
.box3 {
display: flex;
flex-direction: column;
background-color: rgba(252, 240, 240, 0.807);
border-radius: 20px;
padding: 10px;
margin-bottom: 80px; /* 留出一些空间给底部结算栏 */
}
.box1 {
width: 100%;
height: 170px;
display: flex;
flex-direction: row;
}
.image {
width: 120px;
height: 120px;
border-radius: 10px;
position: relative;
left: 20px;
top: 20px;
}
.box4 {
position: relative;
top: 80px;
left: 10px;
width: 25px;
height: 25px;
}
.box5 {
height: 50px;
position: relative;
left: 40px;
top:30px;
}
.text {
padding: 5px;
}
.container {
position: relative;
left: 85px;
top: 25px;
}
.boxd {
width: 100px;
height: 40px;
position: absolute;
border-radius: 30px;
background-color: rgb(162, 12, 12);
left: 570rpx;
display: flex;
align-items: center;
justify-content: center;
}
.text1 {
color: #ffffff;
position: unset;
}
.boxall {
display: flex;
align-items: center;
padding: 10px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}
.text2 {
position: relative;
left: 185rpx;
}
.text3{
height: 20px;
position: absolute;
left: 650rpx;
}

View File

@ -0,0 +1,48 @@
<view class="box">
<checkbox-group bindchange="onChange">
<view class="box3">
<block a:for="{{productList}}" a:key="id">
<view class="box1">
<view class="box4">
<label>
<!-- Use selectedItems[index] to check whether the item is selected -->
<checkbox
color="red"
checked="{{selectedItems[index]}}"
data-index="{{index}}"
/>
</label>
</view>
<image class="image" mode="scaleToFill" src="{{item.commoditiesImage}}" />
<view class="box5">
<view>
<text class="text" style="font-size:20px">{{item.commoditiesName}}</text>
</view>
<view>
<text class="text" style="font-size:15px">¥{{item.commoditiesPrice}}</text>
</view>
<view class="container">
<stepper defaultValue="{{0}}" min="{{1}}" max="{{999}}" step="{{1}}" />
</view>
</view>
<text style="font-size:12px;color:#a8b0b8" onTap="yichu" data-id="{{item.cartId}}">移除购物车</text>
</view>
</block>
</view>
</checkbox-group>
<view class="boxall">
<!-- Bind checkbox group for "select all" with the same logic -->
<checkbox
checked="{{checkAll}}"
bindchange="onCheckAllChange"
color="red"
>
全选
</checkbox>
<text class="text2">合计:¥{{totalPrice}}</text>
<view class="boxd">
<text class="text1">结算</text>
</view>
</view>
</view>

View File

@ -0,0 +1,217 @@
import {url} from '../request'
Page({
data: {
id: '',
productList: [], // 商品列表
selectedItems: [], // 每个商品的选中状态
totalPrice: 0, // 总价
checkAll: false, // 全选标志
hhh:[]
},
onShow() {
my.getStorage({
key: 'userInfo',
success: (res) => {
const userInfo = res.data;
this.setData({
id: userInfo.id, // 获取 id
});
if (userInfo && userInfo.cookie) {
my.request({
url: url + '/api/cart/selectByUserId',
method: 'POST',
data: {
id: this.data.id
},
headers: {
'content-type': 'application/json',
'Cookie': userInfo.cookie,
},
dataType: 'json',
success: (res) => {
console.log(res);
if (res.data.code === 0) {
const cartItems = res.data.data;
this.fetchProductDetails(cartItems);
}
},
fail: (error) => {
console.error('请求失败: ', JSON.stringify(error));
my.alert({ content: '请求失败,请稍后重试' });
},
});
} else {
my.alert({
content: '您未登录,请先登录。',
success: () => {
my.navigateTo({
url: '/pages/denglu/denglu',
});
},
});
}
},
});
},
// 获取商品详细信息
fetchProductDetails(cartItems, userId) {
console.log(cartItems, 'zheshiid');
const promises = cartItems.map((item) => {
return new Promise((resolve, reject) => {
my.request({
url: url + '/api/commodities/getById/commodities',
method: 'GET',
data: { id: item.commoditiesId },
headers: { 'content-type': 'application/json' },
success: (res) => {
if (res.data.code === 0) {
const productData = res.data.data;
productData.userId = userId; // 添加 userId
productData.cartId = item.id; // 将 cartId 添加到商品数据中
resolve(productData);
} else {
reject(`商品信息获取失败: ${res.data.message}`);
}
},
fail: (error) => {
reject(error);
},
});
});
});
Promise.all(promises)
.then((productList) => {
this.setData({
productList,
selectedItems: new Array(productList.length).fill(false), // 初始化所有商品的选中状态为 false
});
console.log(productList, '这是商品');
})
.catch((error) => {
console.error('商品信息获取失败: ', error);
my.alert({ content: '商品信息获取失败,请稍后重试' });
});
},
// 计算 checkAll 是否选中
checkAll() {
return this.data.selectedItems.every(item => item); // 如果所有项都选中,返回 true
},
// 处理单个复选框的选中状态变化
onChange(event) {
const selectedItems = event.detail.value; // 获取选中的商品ID列表
const updatedSelectedItems = this.data.productList.map((item, index) => {
return selectedItems.includes(item.id); // 更新每个商品的选中状态
});
this.setData({
selectedItems: updatedSelectedItems
});
},
// 处理全选框的选中状态变化
onCheckAllChange(event) {
const allSelected = event.detail.value; // 获取全选框的状态
const updatedSelectedItems = this.data.productList.map(() => allSelected); // 全选或全不选
this.setData({
selectedItems: updatedSelectedItems
});
},
// 计算合计
calculateTotalPrice() {
const total = this.data.productList.reduce((sum, item, index) => {
if (this.data.selectedItems[index]) {
sum += item.commoditiesPrice; // 累加选中商品的价格
}
return sum;
}, 0);
this.setData({
totalPrice: total.toFixed(2) // 保留两位小数
});
},
// 处理移除商品
yichu(e) {
const cartId = e.currentTarget.dataset.id; // 获取商品的 cartId
if (!cartId) {
console.error('没有找到商品cartId');
my.alert({ content: '商品ID未找到请稍后重试' });
return;
}
console.log('需要移除的商品cartId:', cartId);
my.getStorage({
key: 'userInfo',
success: (res) => {
const userInfo = res.data;
this.setData({
id: userInfo.id, // 获取 id
});
// 发送请求移除商品
if (userInfo && userInfo.cookie) {
my.request({
url: url + '/api/cart/delete',
method: 'POST',
data: { id: cartId }, // 使用 cartId 作为参数
headers: { 'content-type': 'application/json', 'Cookie': userInfo.cookie },
dataType: 'json',
success: (res) => {
console.log(res);
if (res.data.code === 0) {
my.alert({ content: '成功移除商品' });
console.log(res);
// 更新购物车
this.updateCartList();
} else {
my.alert({ content: '移除商品失败,请稍后重试' });
console.log(res);
}
},
fail: (error) => {
console.error('请求失败: ', JSON.stringify(error));
my.alert({ content: '请求失败,请稍后重试' });
},
});
}
},
});
},
// 移除后更新
updateCartList() {
my.getStorage({
key: 'userInfo',
success: (res) => {
const userInfo = res.data;
if (userInfo && userInfo.cookie) {
my.request({
url: url + '/api/cart/selectByUserId', // 获取最新的购物车数据
method: 'POST',
data: { id: this.data.id }, // 使用当前用户ID
headers: { 'content-type': 'application/json', 'Cookie': userInfo.cookie },
dataType: 'json',
success: (res) => {
if (res.data.code === 0) {
const cartItems = res.data.data;
this.fetchProductDetails(cartItems, userInfo.id);
} else {
my.alert({ content: '获取购物车数据失败,请稍后重试' });
}
},
fail: (error) => {
console.error('请求失败: ', JSON.stringify(error));
my.alert({ content: '请求失败,请稍后重试' });
},
});
}
},
});
},
});

View File

@ -0,0 +1,10 @@
{
"usingComponents": {
"ant-checkbox": "antd-mini/es/Checkbox/index",
"stepper": "antd-mini/es/Stepper/index",
"ant-checkbox-group": "antd-mini/es/Checkbox/CheckboxGroup/index",
"ant-swipe-action": "antd-mini/es/SwipeAction/index",
"ant-stepper": "antd-mini/es/Stepper/index"
},
"styleIsolation": "apply-shared"
}

View File

@ -1,72 +1,53 @@
.list {
display: flex;
flex-direction: column;
}
page{
background-color: #f7f7f7;
}
.left{
padding: 8px;
width:80px;
height: 80px;
border-radius: 10px;
}
.containercontent{ .image{
margin: 15px 15px 0 15px; width: 60rpx;
height:60rpx;
border-radius: 50rpx;
margin-left: 10rpx;
margin-top: 10rpx;
}
.image1{
width: 50rpx;
height:50rpx;
}
.box1{
width: 90%;
border: 1px solid #eec2c7; border: 1px solid #eec2c7;
border-radius: 10px; border-radius: 20rpx;
} height: 300rpx;
.container{ margin-bottom: 10rpx;
display: flex;
color: #333333;
border-radius: 10px;
}
.content {
margin-left: 10px;
line-height: 1.6;
width: 70%;
}
.title1{
font-size: 18px;
}
.title2{
font-size: 14px;
color: gray;
}
.title2right{
float: right;
color: rgb(24, 23, 23);
font-size: 16px;
position: relative;
bottom: 50px;
}
.tar{
width: 100%;
padding-bottom: 15px;
}
.tab1 {
width: 50px;
height: 20px;
border: 1px solid #eec2c7;
border-radius: 30px;
text-align: center; /* 水平居中 */
line-height: 20px; /* 垂直居中 */
}
.tab2 {
margin-left: 10px; /* 给tab2添加一些间距 */
width: 50px;
height: 20px;
border: 1px solid #eec2c7;
border-radius: 30px;
text-align: center; /* 水平居中 */
line-height: 20px; /* 垂直居中 */
background-color: #eec2c7;
} }
.box{ .box{
width: 100%;
display: flex; display: flex;
position: relative; flex-direction: column;
left: 120px; align-items: center;
top: 20px; }
.text{
position: relative;
}
.biaoti{
display: flex;
justify-content: space-between;
align-items: center;
}
.biaoti1{
display: flex;
align-items: center;
}
.image2{
width: 160rpx;
height: 160rpx;
border-radius: 20rpx;
margin-top: 20rpx;
margin-left: 20rpx;
}
.textcss{
width: 100rpx;
height: 40rpx;
display:flex;
justify-content: center;
border: 1px solid #eec2c7;
border-radius: 50px;
margin-left: 10rpx
} }

View File

@ -18,247 +18,203 @@
a:key="{{ index }}"> a:key="{{ index }}">
<!-- 全部--> <!-- 全部-->
<swiper-item> <swiper-item>
<view class="containercontent" a:for="{{ dingdan }}"a:key="index"> <view class="box" >
<container title={{item.businessVO.businessName}}> <!-- 最外层盒子 -->
<view > <view class="box1" a:for="{{dingdan}}">
<view class="container"a:for="{{item.orderItemsVOList}}" a:key="index"> <!-- 粉色框 -->
<image class="left" mode="scaleToFill" src="{{item.commoditiesVO.commoditiesImage}}" /> <view class="biaoti">
<view class="content" > <!-- 标题栏 -->
<view class="title1"> <view class="biaoti1">
{{item.commoditiesVO.commoditiesName}} <image mode="scaleToFill" class="image" src="{{item.businessVO.businessAvatar}}" />
<text style="margin-left:10rpx;font-weight:bolder">{{item.businessVO.businessName}}</text>
<image class="image1" mode="scaleToFill" src="/pages/image/jiantou.png" />
</view> </view>
<view class="title2"> <view style="margin-right:20rpx">
{{item.sddcreateTime}} <text a:if="{{item.paymentStatus == 0}}">待支付</text>
</view> <text a:elif="{{item.paymentStatus == 1}}">待使用</text>
<view class="title2"> <text a:elif="{{item.paymentStatus == 2}}">已完成</text>
<text a:elif="{{item.paymentStatus == 3}}">已取消</text>
下单时间:{{item.createTime}}
</view>
<view class="title2">
<!-- <ant-icon type="LocationFill" />
{{item.address}} -->
<view class="title2right">
¥{{item.commoditiesVO.commoditiesPrice}}
<view style="margin-left:10px;font-size:12px;color:gray" >
共1件
</view> </view>
</view> </view>
<!-- 图片 -->
<view a:for="{{ item.orderItemsVOList }}">
<image mode="scaleToFill" class="image2" src="{{item.commoditiesVO.commoditiesImage}}" />
<text class="text"style="left:10rpx;bottom:120rpx">{{item.commoditiesVO.commoditiesName}}</text>
<text class="text" style="bottom:70rpx;right:190rpx;color:#377ff3">到店服务</text>
<text class="text"style="bottom:100rpx;left:80rpx;font-size:18px">¥{{item.commoditiesVO.commoditiesPrice}}</text>
</view>
<view style="width:240px">
<text class="text"style="left:190rpx;bottom:50rpx;font-size:12px">地址:{{item.businessVO.address}}</text>
</view> </view>
</view> </view>
</view> </view>
</view>
<view slot="headerRight" style="color:#f48315">
{{item.state}}
</view>
</container>
</view>
</swiper-item> </swiper-item>
<!-- 待支付 --> <!-- 待支付 -->
<swiper-item> <swiper-item>
<view class="containercontent" a:for="{{ dingdan }}"a:key="index"> <view class="box" >
<container title={{item.businessVO.businessName}}> <!-- 最外层盒子 -->
<view > <view class="box1" a:for="{{dingdan}}" a:if="{{item.paymentStatus == 0}}">
<view class="container"a:for="{{item.orderItemsVOList}}" a:key="index"> <!-- 粉色框 -->
<image class="left" mode="scaleToFill" src="{{item.commoditiesVO.commoditiesImage}}" /> <view class="biaoti">
<view class="content" > <!-- 标题栏 -->
<view class="title1"> <view class="biaoti1">
{{item.commoditiesVO.commoditiesName}} <image mode="scaleToFill" class="image" src="{{item.businessVO.businessAvatar}}" />
<text style="margin-left:10rpx;font-weight:bolder">{{item.businessVO.businessName}}</text>
<image class="image1" mode="scaleToFill" src="/pages/image/jiantou.png" />
</view> </view>
<view class="title2"> <view style="margin-right:20rpx">
{{item.sddcreateTime}} <text>待支付</text>
</view>
<view class="title2">
下单时间:{{item.createTime}}
</view>
<view class="title2">
<!-- <ant-icon type="LocationFill" />
{{item.address}} -->
<view class="title2right">
¥{{item.commoditiesVO.commoditiesPrice}}
<view style="margin-left:10px;font-size:12px;color:gray" >
共1件
</view> </view>
</view> </view>
<view class="box"> <!-- 图片 -->
<view class="tab1"> <view a:for="{{ item.orderItemsVOList }}">
<text>取消</text> <image mode="scaleToFill" class="image2" src="{{item.commoditiesVO.commoditiesImage}}" />
<text class="text"style="left:10rpx;bottom:120rpx">{{item.commoditiesVO.commoditiesName}}</text>
<text class="text" style="bottom:70rpx;right:190rpx;color:#377ff3">到店服务</text>
<text class="text"style="bottom:100rpx;left:80rpx;font-size:18px">¥{{item.commoditiesVO.commoditiesPrice}}</text>
<view class="text" style="left:440rpx;display:flex;width:150rpx;bottom:20rpx">
<view>
<text class="textcss">取消</text>
</view> </view>
<view class="tab2"> <view>
<text>支付</text> <text class="textcss">支付</text>
</view> </view>
</view> </view>
</view> </view>
<view style="width:240px">
<text class="text"style="left:190rpx;bottom:80rpx;font-size:15px">剩余20:34</text>
</view> </view>
</view> </view>
</view> </view>
<view slot="headerRight" style="color:#f48315">
{{item.state}}
</view>
</container>
</view>
</swiper-item> </swiper-item>
<!-- 待使用 --> <!-- 待使用 -->
<swiper-item> <swiper-item>
<view class="containercontent" a:for="{{ dingdan }}"a:key="index"> <view class="box" >
<container title={{item.businessVO.businessName}}> <!-- 最外层盒子 -->
<view > <view class="box1" a:for="{{dingdan}}" a:if="{{ item.paymentStatus==1 }}">
<view class="container"a:for="{{item.orderItemsVOList}}" a:key="index"> <!-- 粉色框 -->
<image class="left" mode="scaleToFill" src="{{item.commoditiesVO.commoditiesImage}}" /> <view class="biaoti">
<view class="content" > <!-- 标题栏 -->
<view class="title1"> <view class="biaoti1">
{{item.commoditiesVO.commoditiesName}} <image mode="scaleToFill" class="image" src="{{item.businessVO.businessAvatar}}" />
<text style="margin-left:10rpx;font-weight:bolder">{{item.businessVO.businessName}}</text>
<image class="image1" mode="scaleToFill" src="/pages/image/jiantou.png" />
</view> </view>
<view class="title2"> <view style="margin-right:20rpx">
{{item.sddcreateTime}} <text>待使用</text>
</view>
<view class="title2">
下单时间:{{item.createTime}}
</view>
<view class="title2">
<!-- <ant-icon type="LocationFill" />
{{item.address}} -->
<view class="title2right">
¥{{item.commoditiesVO.commoditiesPrice}}
<view style="margin-left:10px;font-size:12px;color:gray" >
共1件
</view> </view>
</view> </view>
<view class="box"> <!-- 图片 -->
<view class="tab1"> <view a:for="{{ item.orderItemsVOList }}">
<text>退款</text> <image mode="scaleToFill" class="image2" src="{{item.commoditiesVO.commoditiesImage}}" />
<text class="text"style="left:10rpx;bottom:120rpx">{{item.commoditiesVO.commoditiesName}}</text>
<text class="text" style="bottom:70rpx;right:190rpx;color:#377ff3">到店服务</text>
<text class="text"style="bottom:100rpx;left:80rpx;font-size:18px">¥{{item.commoditiesVO.commoditiesPrice}}</text>
<view class="text" style="left:440rpx;display:flex;width:150rpx;bottom:20rpx">
<view>
<text class="textcss">退款</text>
</view> </view>
<view class="tab2"> <view>
<text>完成</text> <text class="textcss">完成</text>
</view> </view>
</view> </view>
</view> </view>
<view style="width:150px">
<text class="text"style="left:190rpx;bottom:100rpx;font-size:12px">地址:{{item.businessVO.address}}</text>
</view> </view>
</view> </view>
</view> </view>
<view slot="headerRight" style="color:#f48315">
{{item.state}}
</view>
</container>
</view>
</swiper-item> </swiper-item>
<!-- 已完成 --> <!-- 已完成 -->
<swiper-item> <swiper-item>
<view class="containercontent" a:for="{{ dingdan }}"a:key="index"> <view class="box" >
<container title={{item.businessVO.businessName}}> <!-- 最外层盒子 -->
<view > <view class="box1" a:for="{{dingdan}}" a:if="{{ item.paymentStatus==2 }}">
<view class="container"a:for="{{item.orderItemsVOList}}" a:key="index"> <!-- 粉色框 -->
<image class="left" mode="scaleToFill" src="{{item.commoditiesVO.commoditiesImage}}" /> <view class="biaoti">
<view class="content" > <!-- 标题栏 -->
<view class="title1"> <view class="biaoti1">
{{item.commoditiesVO.commoditiesName}} <image mode="scaleToFill" class="image" src="{{item.businessVO.businessAvatar}}" />
<text style="margin-left:10rpx;font-weight:bolder">{{item.businessVO.businessName}}</text>
<image class="image1" mode="scaleToFill" src="/pages/image/jiantou.png" />
</view> </view>
<view class="title2"> <view style="margin-right:20rpx">
{{item.sddcreateTime}} <text>已完成</text>
</view>
<view class="title2">
下单时间:{{item.createTime}}
</view>
<view class="title2">
<!-- <ant-icon type="LocationFill" />
{{item.address}} -->
<view class="title2right">
¥{{item.commoditiesVO.commoditiesPrice}}
<view style="margin-left:10px;font-size:12px;color:gray" >
共1件
</view> </view>
</view> </view>
<!-- 图片 -->
<view a:for="{{ item.orderItemsVOList }}">
<image mode="scaleToFill" class="image2" src="{{item.commoditiesVO.commoditiesImage}}" />
<text class="text"style="left:10rpx;bottom:120rpx">{{item.commoditiesVO.commoditiesName}}</text>
<text class="text" style="bottom:70rpx;right:190rpx;color:#377ff3">到店服务</text>
<text class="text"style="bottom:100rpx;left:80rpx;font-size:18px">¥{{item.commoditiesVO.commoditiesPrice}}</text>
</view>
<view style="width:240px">
<text class="text"style="left:190rpx;bottom:50rpx;font-size:12px">地址:{{item.businessVO.address}}</text>
</view> </view>
</view> </view>
</view> </view>
</view>
<view slot="headerRight" style="color:#f48315">
{{item.state}}
</view>
</container>
</view>
</swiper-item> </swiper-item>
<!-- 已取消 --> <!-- 已取消 -->
<swiper-item> <swiper-item>
<view class="containercontent" a:for="{{ dingdan }}"a:key="index"> <view class="box" >
<container title={{item.businessVO.businessName}}> <!-- 最外层盒子 -->
<view > <view class="box1" a:for="{{dingdan}}" a:if="{{ item.paymentStatus==3 }}">
<view class="container"a:for="{{item.orderItemsVOList}}" a:key="index"> <!-- 粉色框 -->
<image class="left" mode="scaleToFill" src="{{item.commoditiesVO.commoditiesImage}}" /> <view class="biaoti">
<view class="content" > <!-- 标题栏 -->
<view class="title1"> <view class="biaoti1">
{{item.commoditiesVO.commoditiesName}} <image mode="scaleToFill" class="image" src="{{item.businessVO.businessAvatar}}" />
<text style="margin-left:10rpx;font-weight:bolder">{{item.businessVO.businessName}}</text>
<image class="image1" mode="scaleToFill" src="/pages/image/jiantou.png" />
</view> </view>
<view class="title2"> <view style="margin-right:20rpx">
{{item.sddcreateTime}} <text >已取消</text>
</view>
<view class="title2">
下单时间:{{item.createTime}}
</view>
<view class="title2">
<!-- <ant-icon type="LocationFill" />
{{item.address}} -->
<view class="title2right">
¥{{item.commoditiesVO.commoditiesPrice}}
<view style="margin-left:10px;font-size:12px;color:gray" >
共1件
</view> </view>
</view> </view>
<!-- 图片 -->
<view a:for="{{ item.orderItemsVOList }}">
<image mode="scaleToFill" class="image2" src="{{item.commoditiesVO.commoditiesImage}}" />
<text class="text"style="left:10rpx;bottom:120rpx">{{item.commoditiesVO.commoditiesName}}</text>
<text class="text" style="bottom:70rpx;right:190rpx;color:#377ff3">到店服务</text>
<text class="text"style="bottom:100rpx;left:80rpx;font-size:18px">¥{{item.commoditiesVO.commoditiesPrice}}</text>
</view>
<view style="width:240px">
<text class="text"style="left:190rpx;bottom:50rpx;font-size:12px">地址:{{item.businessVO.address}}</text>
</view> </view>
</view> </view>
</view> </view>
</view>
<view slot="headerRight" style="color:#f48315">
{{item.state}}
</view>
</container>
</view>
</swiper-item> </swiper-item>
<!-- 退款 --> <!-- 退款 -->
<swiper-item> <swiper-item>
<view class="containercontent" a:for="{{ dingdan }}"a:key="index"> <view class="box" >
<container title={{item.businessVO.businessName}}> <!-- 最外层盒子 -->
<view > <view class="box1" a:for="{{dingdan}}" a:if="{{ item.paymentStatus==3 }}">
<view class="container"a:for="{{item.orderItemsVOList}}" a:key="index"> <!-- 粉色框 -->
<image class="left" mode="scaleToFill" src="{{item.commoditiesVO.commoditiesImage}}" /> <view class="biaoti">
<view class="content" > <!-- 标题栏 -->
<view class="title1"> <view class="biaoti1">
{{item.commoditiesVO.commoditiesName}} <image mode="scaleToFill" class="image" src="{{item.businessVO.businessAvatar}}" />
<text style="margin-left:10rpx;font-weight:bolder">{{item.businessVO.businessName}}</text>
<image class="image1" mode="scaleToFill" src="/pages/image/jiantou.png" />
</view> </view>
<view class="title2"> <view style="margin-right:20rpx">
{{item.sddcreateTime}} <text >退款</text>
</view>
<view class="title2">
下单时间:{{item.createTime}}
</view>
<view class="title2">
<!-- <ant-icon type="LocationFill" />
{{item.address}} -->
<view class="title2right">
¥{{item.commoditiesVO.commoditiesPrice}}
<view style="margin-left:10px;font-size:12px;color:gray" >
共1件
</view> </view>
</view> </view>
<!-- 图片 -->
<view a:for="{{ item.orderItemsVOList }}">
<image mode="scaleToFill" class="image2" src="{{item.commoditiesVO.commoditiesImage}}" />
<text class="text"style="left:10rpx;bottom:120rpx">{{item.commoditiesVO.commoditiesName}}</text>
<text class="text" style="bottom:70rpx;right:180rpx;color:#377ff3">到店服务</text>
<text class="text"style="bottom:100rpx;left:80rpx;font-size:18px">¥{{item.commoditiesVO.commoditiesPrice}}</text>
</view>
<view style="width:240px">
<text class="text"style="left:190rpx;bottom:50rpx;font-size:12px">地址:{{item.businessVO.address}}</text>
</view> </view>
</view> </view>
</view> </view>
</view>
<view slot="headerRight" style="color:#f48315">
{{item.state}}
</view>
</container>
</view>
</swiper-item> </swiper-item>
</block> </block>
</swiper> </swiper>
</view> </view>

View File

@ -24,18 +24,14 @@ Page({
}, },
], ],
dingdan:[], dingdan:[],
// dingdan:[ paymentStatuses: [
// { { paymentStatuses: '0', statue: '待支付' },
// number:'晓得美甲店', { paymentStatuses: '1', statue: '待使用' },
// name:'半贴短甲彩绘', { paymentStatuses: '2', statue: '已取消' },
// interpretation:'到店服务', { paymentStatuses: '3', statue: '已退款' },
// dingdannumber:'2024-12-01', { paymentStatuses: '4', statue: '已完成' }
// image:'https://th.bing.com/th/id/R.325f6147c21a518cbb7bb0b5f9f73c51?rik=I4jbDvbv9vOsfQ&riu=http%3a%2f%2fwww.guangyuanol.cn%2fuploads%2fallimg%2f200806%2f1505123236-7.jpg&ehk=vpA2a11wMlcWSGrdKXF93H0nahTK2ptXlnbudoulA9Y%3d&risl=&pid=ImgRaw&r=0', ]
// adress:' 思明区湖苑里24号',
// price:'100',
// state:'待确认',
// },
// ]
}, },
onShow(){ onShow(){
my.getStorage({ my.getStorage({
@ -56,7 +52,7 @@ Page({
endTime: "", endTime: "",
id: "", id: "",
pageSize: 10, pageSize: 10,
paymentStatus: 0, paymentStatus: "",
sortField: "", sortField: "",
sortOrder: "", sortOrder: "",
startTime: "" startTime: ""
@ -73,6 +69,8 @@ Page({
}) })
} }
console.log('Response Set-Cookie:', res.header['Set-Cookie']);
console.log(res); console.log(res);
console.log(this.data.dingdan); console.log(this.data.dingdan);
console.log(this.data.dingdan); console.log(this.data.dingdan);
@ -118,6 +116,9 @@ alert(content) {
title: content, title: content,
}); });
}, },
getPaymentStatusText(status) {
const statusObj = this.paymentStatuses.find(item => item.paymentStatuses === status.toString());
return statusObj ? statusObj.statue : '未知状态'; // 如果找不到对应状态,返回 '未知状态'
},
}); });

View File

@ -16,15 +16,16 @@ page{
} }
.containercontent{ .containercontent{
margin: 15px 15px 0 15px; margin: 0px 15px 10px 15px;
border: 1px solid #eec2c7; border: 1px solid #eec2c7;
border-radius: 10px; border-radius: 10px;
overflow:hidden;
} }
.container{ .container{
color: #333333; color: #333333;
border-radius: 10px; border-radius: 10px;
height: 120px; height: 150px;
} }
.content { .content {
margin-left: 10px; margin-left: 10px;
@ -87,10 +88,16 @@ page{
} }
.swiper-item { .swiper-item {
display: flex; /* 启用 Flexbox 布局 */ display: flex;
flex-direction: column; /* 设置为竖直方向排列子元素 */ flex-direction: column;
height: 100%; /* 确保swiper-item的高度占满父容器 */ height: auto; /* 自动适应内容高度 */
min-height: 100%; /* 或设置最小高度占满父容器 */
} }
.swiper {
height: auto; /* 根据内容自动调整 */
}
.tab1 { .tab1 {
width: 50px; width: 50px;
height: 20px; height: 20px;
@ -99,9 +106,10 @@ page{
text-align: center; /* 水平居中 */ text-align: center; /* 水平居中 */
line-height: 20px; /* 垂直居中 */ line-height: 20px; /* 垂直居中 */
} }
.box{ .box1{
display: flex;
position: relative; position: relative;
left: 170px; display: flex;
top: 30px; justify-content: flex-end;
bottom: 70rpx;
margin-right: 10rpx;
} }

View File

@ -19,7 +19,7 @@
<!-- 全部--> <!-- 全部-->
<swiper-item class="swiper-item"> <swiper-item class="swiper-item">
<view class="containercontent" a:for="{{ dingdan }}"a:key="index"> <view class="containercontent" a:for="{{ dingdan }}"a:key="index">
<view style="height:200px"> <view style="height:190px">
<view style="display:flex"> <view style="display:flex">
<image class="image" mode="scaleToFill" src="{{item.image}}" /> <image class="image" mode="scaleToFill" src="{{item.image}}" />
<text class="text"style="top:8px;left: 10px;">CC</text> <text class="text"style="top:8px;left: 10px;">CC</text>
@ -40,20 +40,21 @@
<!-- 待评价 --> <!-- 待评价 -->
<swiper-item class="swiper-item"> <swiper-item class="swiper-item">
<view class="containercontent" a:for="{{ dingdan }}"a:key="index"> <view class="containercontent" a:for="{{ dingdan }}"a:key="index">
<view style="height:200px"> <view style="height:190px">
<view style="height:30px"> <view style="height:30px">
<text class="text"style="top:8px;left: 20px;font-size:18px;font-weight: bold;">晓得美甲店</text> <text class="text"style="top:8px;left: 20px;font-size:18px;font-weight: bold;">晓得美甲店</text>
</view> </view>
<view> <view>
<view class="container"> <view class="container">
<image class="left" mode="scaleToFill" src="/pages/image/meijia3.jpg" /> <image class="left" mode="scaleToFill" src="/pages/image/meijia3.jpg" />
<view class="text"style="left:130px;bottom:80px"> <view class="text"style="width:200px;left:130px;bottom:80px">
<text style="font-size:15px">下单时间2024-12-02</text> <text style="font-size:15px">下单时间2024-12-02</text>
<view style="margin-top:10px"> <view style="margin-top:10px">
<text style="color:#57a8fa">分享一下你真实体验吧</text> <text style="color:#57a8fa">分享一下你真实体验吧</text>
</view> </view>
<view class="box"> </view>
<view class="tab1"> <view class="box1">
<view class="tab1" onTap="pingjia">
<text>评价</text> <text>评价</text>
</view> </view>
</view> </view>
@ -61,8 +62,6 @@
</view> </view>
</view> </view>
</view> </view>
</view>
</swiper-item> </swiper-item>
</block> </block>

View File

@ -17,18 +17,7 @@ Page({
image:'https://c-ssl.dtstatic.com/uploads/blog/202305/08/20230508112951_78480.thumb.400_0.jpeg' image:'https://c-ssl.dtstatic.com/uploads/blog/202305/08/20230508112951_78480.thumb.400_0.jpeg'
} }
], ],
// dingdan:[
// {
// number:'晓得美甲店',
// name:'半贴短甲彩绘',
// interpretation:'到店服务',
// dingdannumber:'2024-12-01',
// image:'https://th.bing.com/th/id/R.325f6147c21a518cbb7bb0b5f9f73c51?rik=I4jbDvbv9vOsfQ&riu=http%3a%2f%2fwww.guangyuanol.cn%2fuploads%2fallimg%2f200806%2f1505123236-7.jpg&ehk=vpA2a11wMlcWSGrdKXF93H0nahTK2ptXlnbudoulA9Y%3d&risl=&pid=ImgRaw&r=0',
// adress:' 思明区湖苑里24号',
// price:'100',
// state:'待确认',
// },
// ]
}, },
// onShow(){ // onShow(){
// my.getStorage({ // my.getStorage({
@ -112,6 +101,10 @@ alert(content) {
title: content, title: content,
}); });
}, },
pingjia(){
my.navigateTo({
url:'/pages/pingjia/pingjia'
})
}
}); });

View File

@ -1,268 +1,112 @@
/* 我的收藏盒子 */ /* 给css变量的默认底色用来兜底使用 */
.wdsc{ .t-swipe {
width: 390px; width: 100%;
height: 50px; margin: 0 auto;
position: absolute; background-color: var(--color-background);
background-color: #eec2c7; margin-top: 40rpx;
} }
.wdsc image{ .t-swipe-item {
width: 30px; font-size: 32rpx;
height: 30px; color: #333333;
position: absolute; height: 100%vw;
left: 10px;
top: 10px;
} }
/* 《我的收藏》 */ .t-swipe-item-con {
.wwdsc{ height: 300rpx;
font-size: 25px; line-height: 300rpx;
font-weight: bold; width: 100%;
left: 150px; }
top: 10px; .t-swipe-item-con-view {
background-color: var(--color-card);
text-indent: 1em;
position: relative;
height: 100%;
color: var(--color-text-primary);
}
.t-swipe-item-con-view::after {
content: '';
position: absolute; position: absolute;
color: #ffffff; bottom: 0;
left: 0;
width: 100%;
height: 1px;
max-height: 1px;
min-height: 1px;
transform: scaleY(0.5);
background-color: var(--color-border);
}
.t-swipe-item-con-btn {
display: flex;
justify-content: center;
align-items: center;
}
.t-swipe-item-con-btn-icon {
font-size: 32px;
}
.left-slot {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.box{
width: 100%;
display: flex; /* 启用 Flexbox 布局 */
flex-direction: column; /* 设置主轴为竖直方向 */
align-items: center; /* 在交叉轴(水平方向)上居中对齐 */
}
.kuang{
width: 75%;
height: 240rpx;
border: 1px solid #de868f;
margin-top: 30rpx;
margin-left: 25rpx;
border-radius: 20px;
} }
/* 收藏店铺盒子 */ .image{
width: 100px;
height: 100px;
border-radius: 20px;
position: relative;
top: 25rpx;
}
.wenzi{
width: 65%;
height: 180rpx;
position: relative;
left: 220rpx;
bottom: 450rpx;
}
.text{
font-weight: bolder;
margin-left: 10rpx;
position: relative;
top: 30rpx;
right: 10rpx;
}
.box1{ .box1{
width: 100%; font-size: 13px;
height: 350px; width: 100rpx;
position: absolute; background-color: cornflowerblue;
top: 55px; margin-top: 20rpx;
border: 1px #d4d4d4 solid; margin-left: 10rpx;
color: white;
position: relative;
top: 88rpx;
right: 210rpx;
} }
.dingwei{
position: relative;
/* 收藏美甲师盒子 */
.box2{
width: 100%;
height: 550px;
position: absolute;
top: 405px;
border: 1px #d4d4d4 solid;
}
/* 《收藏店铺》 《收藏美甲师》 */
.p1{
font-size: 20px;
position: absolute;
left: 20px;
top: 10px;
}
/* a店铺 */
.adianpu{
width: 344px;
height: 120px;
position: absolute;
left: 22px;
top: 50px;
margin: auto;
border: 3px #de868f solid;
border-radius: 20px;
}
.adianpu image{
width: 90px;
height: 90px;
position: absolute;
left: 10px;
top: 10px;
border-radius: 10px;
}
/* a店铺名称 */
.aname{
font-size: 15px;
font-weight: bold;
left: 110px;
top: 15px;
position: absolute;
color: black;
}
/* b店铺 */
.bdianpu{
width: 344px;
height: 120px;
position: absolute;
left: 22px;
top: 200px;
margin: auto;
border: 3px #de868f solid;
border-radius: 20px;
}
.bdianpu image{
width: 90px;
height: 90px;
position: absolute;
left: 10px;
top: 10px;
border-radius: 10px;
}
/* b店铺名称 */
.aname{
font-size: 15px;
font-weight: bold;
left: 110px;
top: 15px;
position: absolute;
color: black;
}
/* 可预定小框 */
.ksm{
width: 70px;
height: 26px;
position: absolute;
left: 255px;
top: 40px;
border: 1px #4095e5 solid;
border-radius: 10px;
}
/* 可预定 休息中 小字 */
.wksm{
font-size: 12px;
left: 18px;
top: 6px;
position: absolute;
color: #4095e5;
}
/* 接受预约 */
.yy1{
width: 50px;
height: 25px;
position: absolute;
left: 110px;
top: 45px;
background-color: #4095e5;
}
.yy2{
width: 60px;
height: 25px;
position: absolute;
left: 165px;
top: 45px;
background-color: #ffffff;
} }
.yy3{ .yy3{
width: 10px; width: 10px;
height: 25px; height: 20px;
position: absolute; position: relative;
left: 230px; left: 210rpx;
top: 45px; bottom: 70rpx;
background-color: #4095e5; background-color: #4095e5;
} }
/* 《预约》 */
.wyy1{
font-size: 12px;
color: #ffffff;
}
.wyy2{
font-size: 12px;
color: #4095e5;
}
/* 店铺地点 */
.wdpdd{
font-size: 12px;
left: 110px;
top: 85px;
position: absolute;
color: #9b9b9b;
}
/* 收藏美甲师两个盒子 */
.box3{
width: 100%;
height: 90px;
position: absolute;
}
.box3 image{
width: 70px;
height: 70px;
position: absolute;
left: 10px;
top: 10px;
border-radius: 50px;
}
.box4{
width: 100%;
height: 120px;
position: absolute;
top: 90px;
}
.box41{
width: 80px;
height: 80px;
position: absolute;
left: 10px;
top: 30px;
}
.box41 image{
width: 80px;
height: 80px;
position: absolute;
}
.box42{
width: 80px;
height: 80px;
position: absolute;
left: 110px;
top: 30px;
}
.box42 image{
width: 80px;
height: 80px;
position: absolute;
}
.box43{
width: 80px;
height: 80px;
position: absolute;
left: 210px;
top: 30px;
}
.box43 image{
width: 80px;
height: 80px;
position: absolute;
}
/* 美甲师个人信息 作品展示 */
.p2{
font-size: 14px;
position: absolute;
left: 90px;
top: 15px;
}
.p3{
font-size: 14px;
position: absolute;
left: 90px;
top: 35px;
}
.p4{
font-size: 14px;
position: absolute;
left: 90px;
top: 55px;
}
.p5{
font-size: 15px;
position: absolute;
font-weight: bold;
left: 20px;
top: 5px;
}
.box5{
width: 100%;
height: 210px;
position: relative;
top: 40px;
border: 1px #e8e8e8 solid;
}

View File

@ -1,94 +1,34 @@
<view class="wdsc"> <view class="box">
<navigator open-type="navigate" url="/pages/shangmenyuyuedianpu/shangmenyuyuedianpu"> <view class="t-swipe">
<image mode="scaleToFill" src="/pages/image/aback.png" /> <view class="t-swipe-item">
</navigator> <block a:for="{{collectedData}}" a:for-index="index" a:for-item="item" a:key="item.data.id">
<text class="wwdsc">我的收藏</text> <view class="t-swipe-item-con" data-id="{{item.businessId}}" onTouchStart="onButtonTap">
</view> <ant-swipe-action
rightButtons="{{rightBtns}}"
<view class="box1"> elasticity="{{true}}"
swiped="{{swipeIndex === index}}"
<text class="p1">收藏店铺</text> onButtonTap="quxiao"
>
<navigator open-type="navigate" url="/pages/shangmenyuyuedianpu/shangmenyuyuedianpu"> <view class="t-swipe-item-con-view">
<view style="display: flex;">
<view class="adianpu"> <view class="kuang">
<image mode="scaleToFill" src="/pages/image/ameijia1.jpg" /> <image class="image" mode="scaleToFill" src="{{item.data.businessAvatar}}" />
<text class="aname">小德美甲店铺</text> <view class="wenzi">
<view class="yy1"> <text class="text">{{item.data.businessName}}</text>
<text class="wyy1">接受预约</text> <text class="box1">{{item.data.businessImages}}</text>
<text class="dingwei" style="right: 210rpx; top: 90rpx; color: #4095e5; border: 1px solid #bdc2c7; font-size: 13px;">
{{item.data.startBusiness}}营业
</text>
<text class="dingwei" style="bottom: 160rpx; left: 40rpx; font-size: 12px; color: #9b9b9b;">
{{item.data.address}}
</text>
</view> </view>
<view class="yy2">
<text class="wyy2">08:00营业</text>
</view> </view>
<view class="yy3">
</view> </view>
<text class="wdpdd">哈尔滨市呼兰区学院路街道288号</text> </view>
<view class="ksm"> </ant-swipe-action>
<text class="wksm">可预定</text> </view>
</block>
</view>
</view> </view>
</view> </view>
</navigator>
<view class="bdianpu">
<image mode="scaleToFill" src="/pages/image/ameijia2.jpg" />
<text class="aname">花花美甲店铺</text>
<view class="yy1">
<text class="wyy1">接受预约</text>
</view>
<view class="yy2">
<text class="wyy2">09:30营业</text>
</view>
<view class="yy3">
</view>
<text class="wdpdd">哈尔滨市呼兰区学院路街道288号</text>
<view class="ksm">
<text class="wksm">休息中</text>
</view>
</view>
</view>
<view class="box2">
<text class="p1">收藏美甲师</text>
<view class="box5">
<view class="box3">
<image mode="scaleToFill" src="/pages/image/aUU.png" />
<text class="p2">姓名: UU</text>
<text class="p3">评分: 5.0</text>
<text class="p4">粉丝量: 831</text>
</view>
<view class="box4">
<view class="box41">
<image mode="scaleToFill" src="/pages/image/ameijia3.jpg" />
</view>
<view class="box42">
<image mode="scaleToFill" src="/pages/image/ameijia4.jpg" />
</view>
<view class="box43">
<image mode="scaleToFill" src="/pages/image/ameijia5.jpg" />
</view>
<text class="p5">作品展示</text>
</view>
</view>
<view class="box5">
<view class="box3">
<image mode="scaleToFill" src="/pages/image/aqingqing.png" />
<text class="p2">姓名: 清清</text>
<text class="p3">评分: 5.0</text>
<text class="p4">粉丝量: 9999.99w</text>
</view>
<view class="box4">
<view class="box41">
<image mode="scaleToFill" src="/pages/image/ameijia6.jpg" />
</view>
<view class="box42">
<image mode="scaleToFill" src="/pages/image/ameijia7.jpg" />
</view>
<text class="p5">作品展示</text>
</view>
</view>
</view>

View File

@ -1,4 +1,186 @@
import { url } from '../request';
Page({ Page({
data: {
rightBtns: [
{
text: '取消收藏',
bgColor: '#CCCCCC',
color: '#fff',
width: 200,
},
],
soucang: [], // 收藏的列表
collectedData: [], // 存储每个 id 请求的数据
swipeIndex: -1,
shuzhi: '', // 当前点击的收藏 id
},
onButtonTap(event) {
const storeId = event.currentTarget.dataset.id;
console.log('点击了店铺ID:', storeId);
this.setData({
shuzhi: storeId
});
},
onShow() {
my.getStorage({
key: 'userInfo',
success: (res) => {
const userInfo = res.data;
if (userInfo && userInfo.cookie) {
my.request({
url: url + '/api/collect/list',
method: 'POST',
data: {}, data: {},
onLoad() {}, headers: {
'content-type': 'application/json',
'Cookie': userInfo.cookie,
},
dataType: 'json',
success: (res) => {
console.log(res);
const soucang = res.data.data || [];
this.setData({ soucang });
// 从返回的 data 数组中提取 id 并存储到 collectedData 中
const collectedIds = soucang.map(item => item.id); // 提取 id
this.setData({
collectedData: collectedIds // 存储 id
});
// 你可以在这里继续调用其他函数,进行数据处理或页面渲染
this.fetchCollectedData(soucang);
},
fail: (error) => {
console.error('请求失败: ', JSON.stringify(error));
my.alert({ content: '请求失败,请稍后重试' });
},
});
} else {
my.alert({
content: '您未登录,请先登录。',
success: () => {
my.navigateTo({
url: '/pages/denglu/denglu',
});
},
});
}
},
});
},
// 获取每个 id 的数据
fetchCollectedData(soucang) {
const requests = soucang.map(item => {
return new Promise((resolve, reject) => {
console.log("发送 id:", item.businessId);
my.request({
url: url + '/api/business/userGetById', // 正确的接口
method: 'GET',
data: {
id: item.businessId, // 传递 id 作为参数
},
headers: {
'content-type': 'application/json',
},
success: (res) => {
console.log(res, 'id:', item.businessId);
if (res.data) {
// 将 businessId 和返回的数据一起存储
resolve({
businessId: item.id, // 添加 businessId
data: res.data.data, // 返回请求结果的数据
});
} else {
reject('请求数据为空');
}
},
fail: (error) => {
reject('请求失败: ' + error);
},
});
});
});
// 等待所有请求完成
Promise.all(requests)
.then(results => {
console.log('所有请求完成', results);
// 更新 collectedData保存 businessId 和对应的数据
this.setData({
collectedData: results, // 存储 {businessId, data} 结构的数据
});
})
.catch(error => {
console.error('请求失败:', error);
my.alert({ content: '部分数据请求失败,请稍后重试' });
});
},
quxiao() {
const number = this.data.shuzhi;
console.log('取消收藏 id:', number);
my.request({
url: url + '/api/collect/delete', // 正确的接口
method: 'POST',
data: {
id: number // 传递 id 作为参数
},
headers: {
'content-type': 'application/json',
},
success: (res) => {
if (number) {
my.alert({ content: '取消收藏成功。' });
this.updateCartList();
} else {
my.alert({ content: '请先点击一下要取消收藏的店铺' });
}
},
fail: (error) => {
my.alert({ content: '请求失败,请稍后重试' });
},
});
},
updateCartList() {
my.getStorage({
key: 'userInfo',
success: (res) => {
const userInfo = res.data;
if (userInfo && userInfo.cookie) {
my.request({
url: url + '/api/collect/list',
method: 'POST',
data: {},
headers: {
'content-type': 'application/json',
'Cookie': userInfo.cookie,
},
dataType: 'json',
success: (res) => {
console.log(res);
const soucang = res.data.data || [];
this.setData({ soucang });
// 从返回的 data 数组中提取 id 并存储到 collectedData 中
const collectedIds = soucang.map(item => item.id); // 提取 id
this.setData({
collectedData: collectedIds // 存储 id
});
// 你可以在这里继续调用其他函数,进行数据处理或页面渲染
this.fetchCollectedData(soucang);
},
fail: (error) => {
console.error('请求失败: ', JSON.stringify(error));
my.alert({ content: '请求失败,请稍后重试' });
},
});
}
},
});
},
}); });

View File

@ -1,4 +1,8 @@
{ {
"usingComponents": {}, "defaultTitle": "我的收藏",
"usingComponents": {
"ant-swipe-action": "antd-mini/es/SwipeAction/index",
"ant-icon": "antd-mini/es/Icon/index"
},
"styleIsolation": "apply-shared" "styleIsolation": "apply-shared"
} }

View File

@ -1,118 +1,43 @@
/* 大盒子 */
.box{ .box{
width: 100%; width: 100%;
height: 100%; border-top: 1px solid #999192;
margin-top: 20rpx;
display: flex;
flex-direction: column;
} }
.image{
/* 我的预约盒子 */ width: 120rpx;
.wdyy{ height: 120rpx;
width: 390px; margin-top: 20rpx;
height: 50px;
position: absolute;
background-color: #eec2c7;
} }
.wdyy image{ .biaoti{
width: 30px;
height: 30px;
position: absolute;
left: 10px;
top: 10px;
}
/* 《我的预约》 */
.wwdyy{
font-size: 25px;
font-weight: bold;
left: 150px;
top: 10px;
position: absolute;
color: black;
}
/* 三个预约盒子 */
.box1{
width: 100%; width: 100%;
height: 210px; height: 200rpx;
top: 50px; }
.text{
position: relative; position: relative;
border: 1px #d9d9d9 solid;
} }
.neirong{
/* 从上到下三个盒子 */ margin-left: 20rpx;
.box2{ width: 200px;
width: 100%;
height: 80px;
} }
.box2 image{ .shijian{
width: 80px; display: flex;
height: 80px; justify-content: space-between;
position: absolute; margin-top:20rpx;
top: 10px; margin-left:20rpx;
left: 10px; width:100%
} }
.box3{ .image1{
width: 100%; width: 50rpx;
height: 80px; height: 50rpx;
margin-top: 20rpx;
position: relative; position: relative;
top: 80px; left: 330rpx;
} }
.box3 image{ .yemian{
width: 20px; display: flex;
height: 20px; flex-direction: column;
position: absolute; justify-content: center;
top: 18px; align-items: center;
left: 320px;
}
.box4{
width: 100%;
height: 50px;
position: relative;
top: 80px;
}
/* 预约提示 */
.p1{
font-size: 15px;
font-weight: bold;
position: absolute;
left: 100px;
top: 20px;
}
.p2{
font-size: 12px;
position: absolute;
left: 100px;
top: 50px;
}
/* 预约内容 */
.p3{
font-size: 15px;
font-weight: bold;
position: absolute;
left: 20px;
top: 20px;
}
.p4{
font-size: 15px;
font-weight: bold;
position: absolute;
left: 20px;
top: 50px;
}
/* 下单日期和情况 */
.p5{
font-size: 15px;
font-weight: bold;
position: absolute;
left: 20px;
top: 10px;
}
.p6{
font-size: 15px;
font-weight: bold;
position: absolute;
right: 40px;
top: 10px;
} }

View File

@ -1,61 +1,24 @@
<view class="box"> <view class="yemian" a:for="{{ yuyue }}">
<view class="box">
<view class="wdyy"> <view class="biaoti">
<navigator open-type="navigate" url="/pages/shangmenyuyue/shangmenyuyue"> <image class="image" mode="scaleToFill" src="/pages/image/alogo.png" />
<image mode="scaleToFill" src="/pages/image/aback.png" /> <text class="text" style="bottom:60rpx">{{item.name}}</text>
</navigator> <view class="text" style="left:120rpx;bottom:60rpx">
<text class="wwdyy">我的预约</text> <text style="font-size:13px">{{item.neirong}}</text>
</view> </view>
</view>
<view class="box1"> <view class="neirong">
<view class="box2"> <view style="margin-top:20rpx">
<image mode="scaleToFill" src="/pages/image/alogo.png" /> <text>我的预约:{{item.shijian}}</text>
<text class="p1">甲甲温馨提示:</text> </view>
<text class="p2">您预约的小德美甲店铺-纯色半贴甲片款式订单…</text> <view style="margin-top:20rpx">
<view class="box3"> <text class="text" style="bottom:40rpx">指定美甲师:{{item.meijiashi}}</text>
<text class="p3">预约时间: 13:30-14:00</text> <image mode="scaleToFill" class="image1" src="/pages/image/aing.png" />
<image mode="scaleToFill" src="/pages/image/aing.png" /> </view>
<text class="p4">指定美甲师: UU</text> </view>
<view class="box4"> <view class="shijian" >
<text class="p5">2024/06/18</text> <text>{{item.data}}</text>
<text class="p6">正在进行中…</text> <text style="margin-right:50rpx">{{item.status}}</text>
</view> </view>
</view> </view>
</view> </view>
</view>
<view class="box1">
<view class="box2">
<image mode="scaleToFill" src="/pages/image/alogo.png" />
<text class="p1">甲甲温馨提示:</text>
<text class="p2">您预约的爱尚美甲店铺-贴钻半贴甲片款式订单…</text>
<view class="box3">
<text class="p3">预约时间: 09:30-10:00</text>
<image mode="scaleToFill" src="/pages/image/afinish.png" />
<text class="p4">指定美甲师: 梨儿</text>
<view class="box4">
<text class="p5">2024/05/15</text>
<text class="p6">已完成…</text>
</view>
</view>
</view>
</view>
<view class="box1">
<view class="box2">
<image mode="scaleToFill" src="/pages/image/alogo.png" />
<text class="p1">甲甲温馨提示:</text>
<text class="p2">您预约的爱尚美甲店铺-纯色半贴甲片款式订单…</text>
<view class="box3">
<text class="p3">预约时间: 11:30-12:00</text>
<image mode="scaleToFill" src="/pages/image/afinish.png" />
<text class="p4">指定美甲师: 梨儿</text>
<view class="box4">
<text class="p5">2024/04/03</text>
<text class="p6">已完成…</text>
</view>
</view>
</view>
</view>
</view>

View File

@ -1,4 +1,47 @@
Page({ Page({
data: {}, data: {
yuyue:[
{
name:'佳佳温馨提示:',
neirong:'您预约的小德美甲店铺-纯色半贴甲片款式订单…',
time:'13:00-14:00',
meijiashi:'梨儿',
data:'2024/06/18',
status:'正在进行中...'
},
{
name:'佳佳温馨提示:',
neirong:'您预约的小德美甲店铺-纯色半贴甲片款式订单…',
time:'13:00-14:00',
meijiashi:'梨儿',
data:'2024/06/18',
status:'正在进行中...'
},
{
name:'佳佳温馨提示:',
neirong:'您预约的小德美甲店铺-纯色半贴甲片款式订单…',
time:'13:00-14:00',
meijiashi:'梨儿',
data:'2024/06/18',
status:'正在进行中...'
},
{
name:'佳佳温馨提示:',
neirong:'您预约的小德美甲店铺-纯色半贴甲片款式订单…',
time:'13:00-14:00',
meijiashi:'梨儿',
data:'2024/06/18',
status:'正在进行中...'
},
{
name:'佳佳温馨提示:',
neirong:'您预约的小德美甲店铺-纯色半贴甲片款式订单…',
time:'13:00-14:00',
meijiashi:'梨儿',
data:'2024/06/18',
status:'正在进行中...'
}
]
},
onLoad() {}, onLoad() {},
}); });

View File

@ -1,4 +1,5 @@
{ {
"defaultTitle": "我的预约",
"usingComponents": {}, "usingComponents": {},
"styleIsolation": "apply-shared" "styleIsolation": "apply-shared"
} }

View File

@ -1,10 +1,10 @@
/* 顶部 */ /* 顶部 */
.Box{ .Box{
width: 390px; width: 100%;
height: 800px; height: 800px;
} }
.Box1{ .Box1{
width: 390px; width: 100%;
height: 50px; height: 50px;
background-color: #eec2c7; background-color: #eec2c7;
} }
@ -16,7 +16,7 @@
} }
/* 商品信息 */ /* 商品信息 */
.Box2{ .Box2{
width: 390px; width: 100%;
height: 710px; height: 710px;
background-color: darkgray; background-color: darkgray;
position: absolute; position: absolute;
@ -75,7 +75,7 @@
} }
/* 价格框 */ /* 价格框 */
.Box3{ .Box3{
width: 350px; width: 90%;
height: 160px; height: 160px;
background-color: darkgrey; background-color: darkgrey;
top:90px; top:90px;