解决已知问题,大版本更新

This commit is contained in:
Ling53666 2024-12-17 19:46:10 +08:00
parent 8ea81cc28f
commit 38fd44dbca
46 changed files with 2296 additions and 1893 deletions

View File

@ -79,6 +79,36 @@
"title": "登录测试", "title": "登录测试",
"page": "pages/denglutest/denglutest", "page": "pages/denglutest/denglutest",
"launchMode": "common" "launchMode": "common"
},
{
"title": "pages/test/test",
"page": "pages/test/test",
"launchMode": "common"
},
{
"title": "到店服务",
"page": "pages/daodianfuwu/daodianfuwu",
"launchMode": "common"
},
{
"title": "发布抢单",
"page": "pages/kehushangmenyuyueqiangdan/kehushangmenyuyueqiangdan",
"launchMode": "common"
},
{
"title": "我的预约",
"page": "pages/wodeyuyue/wodeyuyue",
"launchMode": "common"
},
{
"title": "咨询",
"page": "pages/zixunmeijiashi/zixunmeijiashi",
"launchMode": "common"
},
{
"title": "支付界面",
"page": "pages/zhifujiemian/zhifujiemian",
"launchMode": "common"
} }
] ]
} }

View File

@ -1,36 +1,29 @@
App({ App({
globalData: {
isLoggedIn: false, // 用户登录状态
userInfo: null, // 用户信息
},
onLaunch() { onLaunch() {
// 从本地存储读取登录信息 my.getStorage({
const userInfo = my.getStorageSync({ key: 'user_info' }).data; key: 'userInfo',
if (userInfo) { success: (res) => {
this.globalData.isLoggedIn = true; const userInfo = res.data;
this.globalData.userInfo = userInfo; const currentTimestamp = new Date().getTime();
} const lastLoginTimestamp = userInfo.timestamp; // 获取上次登录时间戳
}, // 计算时间差(单位:毫秒)
const timeDiff = currentTimestamp - lastLoginTimestamp;
setUserInfo(userInfo) { const oneDay = 86400* 1000; // 24小时的毫秒数
// 设置全局用户信息 // 如果时间差大于24小时则清除缓存
this.globalData.isLoggedIn = true; if (timeDiff > oneDay) {
this.globalData.userInfo = userInfo; console.log('超过24小时清除缓存');
my.removeStorage({
// 同步存储到本地 key: 'userInfo',
my.setStorageSync({ success: function () {
key: 'user_info', console.log('用户信息已删除');
data: userInfo },
fail: function (err) {
console.error('删除失败:', err);
}
});
}
},
}); });
}, },
clearUserInfo() {
// 清空全局用户信息
this.globalData.isLoggedIn = false;
this.globalData.userInfo = null;
// 清除本地存储
my.removeStorageSync({ key: 'user_info' });
}
}) })

View File

@ -1,25 +1,13 @@
{ {
"pages": [ "pages": [
"pages/shouye/shouye", "pages/shouye/shouye",
"pages/kehubiaodan/kehubiaodan",
"pages/shangmenyuyue/shangmenyuyue", "pages/shangmenyuyue/shangmenyuyue",
"pages/daodianfuwu/daodianfuwu", "pages/daodianfuwu/daodianfuwu",
"pages/gongzuotai/gongzuotai",
"pages/kehuqiangdanqueren/kehuqiangdanqueren",
"pages/kehushangmenyuyueqiangdan/kehushangmenyuyueqiangdan", "pages/kehushangmenyuyueqiangdan/kehushangmenyuyueqiangdan",
"pages/shangjiabiaodan/shangjiabiaodan",
"pages/shangjiabiaodanyuyue/shangjiabiaodanyuyue",
"pages/shangjiadingdan/shangjiadingdan",
"pages/shangmenyuyuedianpu/shangmenyuyuedianpu",
"pages/shangmenyuyueshijianduan/shangmenyuyueshijianduan",
"pages/shangpinxiadanjiemian/shangpinxiadanjiemian",
"pages/wodeshoucang/wodeshoucang", "pages/wodeshoucang/wodeshoucang",
"pages/wodeyuyue/wodeyuyue", "pages/wodeyuyue/wodeyuyue",
"pages/zixunmeijiashi/zixunmeijiashi", "pages/zixunmeijiashi/zixunmeijiashi",
"pages/shangjiaqiangdan/shangjiaqiangdan", "pages/shangjiaqiangdan/shangjiaqiangdan",
"pages/shangjiaqiangdanqueren/shangjiaqiangdanqueren",
"pages/shangpinpingjia/shangpinpingjia",
"pages/fuwujindu/fuwujindu",
"pages/denglu/denglu", "pages/denglu/denglu",
"pages/zhifujiemian/zhifujiemian", "pages/zhifujiemian/zhifujiemian",
"pages/index/index", "pages/index/index",

View File

@ -1,198 +1,98 @@
/* 搜索框 */ .search-line {
.Box1{
width: 100%; width: 100%;
height: 60px; display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
}
.cancel {
color: var(--color-text-primary);
}
.box{
width: 90%;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #de868f;
border-radius: 40px;
margin-top: 20rpx;
} }
.box1{ .box1{
width: 330px;
height: 40px;
margin-top:15px;
margin-left: 35px;
border: 1px solid #de868f;
border-radius: 20px;
overflow:hidden;
}
/* 框内信息 */
.box2{
width: 100%; width: 100%;
height: 30px; display: flex;
background-color:#ffffff; justify-content: center;
border-radius: 20px;
} }
.box4{
width: 120rpx;
height: 50rpx;
border: 1px solid #4095e5;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
bottom: 310rpx;
left: 530rpx;
}
.dingwei{
position: relative;
}
.statues{
font-size: 13px;
width: 100rpx;
background-color: #4095e5;
margin-top: 20rpx;
margin-left: 10rpx;
color: white;
position: relative;
/* top: 88rpx;
right: 210rpx; */
}
.text{
font-weight: bolder;
margin-left: 10rpx;
position: relative;
top: 30rpx;
right: 10rpx;
}
.wenzi{
width: 65%;
height: 200rpx;
position: relative;
left: 220rpx;
bottom: 180rpx;
}
.image{ .image{
width: 25px;
height: 25px;
position: relative;
top:6px;
left: 5px;
}
.z1{
top:8px;
left: 30px;
position: absolute;
}
/* 地区选择 */
.image1{
width: 15px;
height: 20px;
position: absolute;
top:54px;
left: 32px;
}
.z2{
top:55px;
position: absolute;
left: 48px;
}
.h2 image{
width: 10px;
height: 10px;
position: absolute;
top:62px;
left: 162px;
}
/* 店铺 */
/* a店铺 */
.adianpu{
width: 344px;
height: 120px;
position: relative;
left: 8rpx;
top: 80px;
margin: auto;
border: 3px #de868f solid;
border-radius: 20px;
margin-top: 15rpx;
}
/* a店铺名称 */
.aname{
font-size: 15px;
font-weight: bold;
left: 110px;
top: 15px;
position: absolute;
color: black;
}
/* a店铺图片 */
.t1 image{
width: 100px; width: 100px;
height: 100px; height: 100px;
position: absolute;
top:10px;
left:5px;
border-radius: 20px; border-radius: 20px;
}
/* 可预定小框 */
.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{
width: 10px;
height: 25px;
position: absolute;
left: 230px;
top: 45px;
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;
}
/* 搜索框 */
.search-outer {
box-sizing: border-box;
display:flex;
height:40px;
overflow:hidden;
padding: 8px;
border-bottom: 1px solid #ddd;
position: relative; position: relative;
bottom: 60rpx; top: 25rpx;
left: 40rpx; left: 20rpx;
width: 560rpx;
} }
/* 取消 */ .kuang{
.search-cancel { width: 90%;
font-size: 16px; height: 240rpx;
color: #4095e5; /* 确保颜色可见 */ border: 3px solid #de868f;
display: inline-block; /* 确保元素不是隐藏的 */ border-radius: 20px;
text-align: center; /* 如果需要居中 */ margin-top: 20rpx;
line-height: 30px; /* 确保文字垂直居中 */
position: relative;
bottom: 4rpx;
} }
.box2{
/* 输入 */
.search-input {
flex:1;
text-align: left;
display: block;
color: #000;
height: 24px;
font-size: 15px;
background-color: #fff;
border-color: transparent;
}
/* 弹性盒 */
.box3{
display: flex; display: flex;
flex-wrap: wrap; /* 允许换行 */ justify-content: center;
justify-content: space-between; /* 使子元素分布更均匀 */ align-items: center;
position: relative; margin-top: 50rpx;
flex-direction: column;
} }
.Box2{ .dingweiimage{
position: relative; width: 30rpx;
height: 30rpx;
}
.dingweikuang{
width: 100%;
position: relative;
left: 50rpx;
top: 30rpx;
} }

View File

@ -1,55 +1,40 @@
<view> <view class="box1">
<!-- 顶部 --> <!-- 搜索框 -->
<view class="Box1"> <view class="box">
<view class="box1"> <view class="search-line">
<view class="box2"> <view style="display:flex;align-items:center">
<image class="image" mode="scaleToFill" src="../image/sousuo.png" /> <image style="width:20px;height:20px" mode="scaleToFill" src="../image/sousuo.png" />
<view class="search-outer"> <input onInput="inputchange" onConfirm="find" style="margin-left:10rpx;width:230px" placeholder="请输入内容" />
<input </view>
class="search-input"
placeholder="搜索" <view class="cancel">取消</view>
value="{{search}}" </view>
onConfirm="doneSearch" </view>
onInput="handleSearch" </view>
/> <!-- 定位 -->
<text class="search-cancel" onTap="clearSearch">取消</text> <view class="dingweikuang">
<image mode="scaleToFill" class="dingweiimage" src="../image/dingwei.png" />
<text style="margin-left:8rpx">{{selectedCity}}</text>
</view>
<!-- 店铺界面 -->
<view style="width:100%">
<view class="box2" >
<view class="kuang" a:for="{{ sousuo }}" a:key="{{index}}" data-num="{{item}}" onTap="dianpu">
<image class="image" mode="scaleToFill" src="{{item.businessAvatar}}" />
<view class="wenzi">
<text class="text">{{item.businessName}}</text>
<view style="width:120px;position:relative;top:40rpx;right:10rpx">
<text class="statues">{{item.businessImages}}</text>
<text class="dingwei" style="color: #4095e5;border:1px solid #4095e5;font-size: 12px;">{{item.startBusiness}}营业</text>
</view>
<view style="width:150px">
<text class="dingwei" style="width:150rpx;top:50rpx;width:200rpx;height:100rpx;font-size:12px;color: #9b9b9b;">{{item.address}}</text>
</view>
</view>
<view class="box4">
<text style="font-size:13px;color:#4095e5" a:if="{{ item.storeStatus===1 }}">可预约</text>
<text style="font-size:13px;color:#4095e5" a:if="{{ item.storeStatus===0 }}">已休息</text>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<!-- 筛选 -->
<view class="Box2">
<!-- 地区选择 -->
<view class="h1">
<image class="image1" mode="scaleToFill" src="../image/didian.png" />
<view class="h2">
<text class="z2">哈尔滨华德学院</text>
</view>
</view>
<!-- 综合排序 -->
</view>
<!-- 店铺 -->
<!-- a店铺 -->
<view class="box3" >
<view class="adianpu" a:for="{{sousuo}}" a:key="{{index}}" data-num="{{item}}" onTap="dianpu" >
<navigator open-type="navigate" url="../dianpuzhuye/dianpuzhuye" hover-class="navigator-hover" class="aname">{{item.businessName}}</navigator>
<view class="yy1">
<text class="wyy1">{{item.businessImages}}</text>
</view>
<view class="yy2">
<text class="wyy2">{{item.startBusiness}}营业</text>
</view>
<view class="yy3">
</view>
<text class="wdpdd">{{item.address}}</text>
<view class="ksm">
<text class="wksm" a:if="{{item.storeStatus === 0}}"=>已休息</text>
<text class="wksm" a:if="{{ item.storeStatus === 1 }}">可预定</text>
</view>
<view class="t1">
<image mode="scaleToFill" src="{{item.businessAvatar}}" />
</view>
</view>
</view>

View File

@ -17,9 +17,19 @@ Page({
state: 0, state: 0,
storeStatus: '', storeStatus: '',
updateTime: "", updateTime: "",
userId: 0 userId: 0,
inputtext:'',
selectedCity:'',
},
inputchange(e){
this.setData({
inputtext:e.detail.value,
});
console.log(e.detail.value);
console.log(this.data.inputtext);
}, },
onLoad() { onLoad() {
this.localcation();
my.request({ my.request({
url: url + '/api/business/list', url: url + '/api/business/list',
method: 'POST', method: 'POST',
@ -45,13 +55,11 @@ Page({
} }
}); });
}, },
doneSearch() { dianpu(item) {
console.log('doneSearch', this.data.search);
my.hideKeyboard();
},
dianpu(item){
const id = item.target.dataset.num const id = item.target.dataset.num
// 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
@ -59,10 +67,69 @@ Page({
const endBusiness = id.endBusiness const endBusiness = id.endBusiness
const startBusiness = id.startBusiness const startBusiness = id.startBusiness
const storeStatus = id.storeStatus const storeStatus = id.storeStatus
console.log('Address being passed: ', ID,address,businessName,businessAvatar,endBusiness,startBusiness); const businessPhone =id.businessPhone
console.log('Address being passed: ', ID,address,businessName,businessAvatar,endBusiness,startBusiness,businessPhone);
my.navigateTo({ my.navigateTo({
url: `/pages/dianpuzhuye/dianpuzhuye?userId=${userId}&&address=${address}&&businessName=${businessName}&&businessAvatar=${businessAvatar}&&startBusiness=${startBusiness}&&endBusiness=${endBusiness}&&storeStatus=${storeStatus}&&id=${ID}`, url: `/pages/dianpuzhuye/dianpuzhuye?userId=${userId}&&address=${address}&&businessName=${businessName}&&businessAvatar=${businessAvatar}&&startBusiness=${startBusiness}&&endBusiness=${endBusiness}&&storeStatus=${storeStatus}&&id=${ID}&&businessPhone=${businessPhone}`,
});
},
find(){
my.request({
url: url + '/api/business/list/page/vo',
method: 'POST',
data: {
address: this.data.selectedCity,
businessName: this.data.inputtext,
businessProfile: "",
categoryId: "",
current: 1,
id: "",
pageSize: 20,
sortField: "",
sortOrder: "",
state: "",
storeStatus: "",
userId: ""
},
headers: {
'content-type': 'application/json',
},
dataType: 'json',
success: (res) => {
console.log('Request succeeded:', res);
if (res.data && res.data.data) {
this.setData({
sousuo:res.data.data.records
})
} else {
console.log('shibaile')
}
},
fail: (error) => {
console.error('Request failed', error);
}
});
},
localcation(){
my.getLocation({
type: 1, // 获取包括省市区县数据
success: (res) => {
console.log('定位成功:', res);
this.setData({
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

@ -2,34 +2,17 @@ import {url} from '../request'
Page({ Page({
data: { data: {
authCode: '', authCode: '',
intervalId: null, // 定时器ID用于后续清除
}, },
Login() { Login() {
my.getAuthCode({ my.getAuthCode({
scopes: 'auth_user', scopes: 'auth_user',
success: res => { success: res => {
const authCode = res.authCode; const authCode = res.authCode;
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',
@ -37,28 +20,30 @@ Page({
authCode, authCode,
}, },
success: (res) => { success: (res) => {
const { username, avatarUrl,id} = res.data.data; const { username, avatarUrl, id } = res.data.data;
const setCookie = res.header['set-cookie'] || res.header['Set-Cookie']; const setCookie = res.header['set-cookie'] || res.header['Set-Cookie'];
console.log('Set-Cookie:', setCookie+'这是这个码'); console.log('Set-Cookie:', setCookie + '这是这个码');
// 存储用户信息到本地存储 // 存储用户信息到本地存储
my.setStorage({ my.setStorage({
key: 'userInfo', key: 'userInfo',
data: { data: {
username: username, username: username,
avatarUrl: avatarUrl, avatarUrl: avatarUrl,
cookie:setCookie, cookie: setCookie,
id:id id: id,
timestamp: new Date().getTime(),
}, },
success: function () { success: function () {
console.log('用户信息已存储');
console.log('用户信息已存储',cookie);
}, },
fail: function (err) { fail: function (err) {
console.error('存储失败:', err); console.error('存储失败:', err);
} }
}); });
// 启动定时器清除缓存
this.startClearingStorage();
// 登录成功后的处理逻辑 // 登录成功后的处理逻辑
console.log(res); console.log(res);
@ -74,4 +59,36 @@ Page({
} }
}); });
}, },
// 启动定时器清除缓存
startClearingStorage() {
// 清除缓存定时器,每小时检查一次
const intervalId = setInterval(() => {
my.getStorage({
key: 'userInfo',
success: (res) => {
const userInfo = res.data;
if (userInfo) {
my.removeStorage({
key: 'userInfo',
success: function () {
console.log('用户信息已删除');
},
fail: function (err) {
console.error('删除失败:', err);
}
});
} else {
console.log('缓存中没有用户信息,停止定时器');
clearInterval(intervalId); // 清除定时器
}
},
});
}, 86400*1000); // 每小时检查一次单位是毫秒3600秒 = 1小时
// 保存定时器ID便于后续清除定时器
this.setData({
intervalId: intervalId,
});
},
}); });

View File

@ -1,5 +1,86 @@
.cebian {
width: 20%;
height: 100v;
background-color: #efeced;
overflow: hidden;
}
.text {
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
cursor: pointer;
}
.color {
font-size: 14px;
color: rgb(0, 0, 0); /* 默认文字颜色 */
}
.xian{
width: 60px;
height: 3px;
background-color: #f2819f;
margin-top: 5rpx;
}
.xinxi{
width: 80%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow-y: scroll
}
.pages{
width: 100%;
display: flex;
margin-top: 30rpx;
}
.shop{
width: 90%;
height:130px;
border: 1px solid #f2819f;
border-radius: 20px;
margin-top: 20rpx;
display: flex;
}
.image{
width: 100px;
height: 100px;
border-radius: 20px;
}
.imagebox{
width: 100px;
height: 130px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 10rpx;
}
.dingwei{
position: relative;
}
.yuyue{
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 20px;
border-radius: 20px;
border: 1px solid #fb96b1;
background-color: #fb96b1;
}
.yuyuekuang{
width: 100%;
display: flex;
justify-content: space-between;
}
.gouimage{
width: 20px;
height: 20px;
}
/* 店铺名框 */ /* 店铺名框 */
.Box2 .Box2
{ {
@ -33,23 +114,6 @@
left: 80rpx; left: 80rpx;
bottom:10rpx; bottom:10rpx;
} }
/* 相册框按钮 */
.box2{
width: 60px;
height: 40px;
position: relative;
background-color: rgb(197, 190, 190);
top:110px;
left: 300px;
border-radius: 10px;
}
.z5{
top:10px;
left: 10px;
position: absolute;
}
/* 营业时间 */ /* 营业时间 */
.z6{ .z6{
color: #4095E5; color: #4095E5;
@ -74,7 +138,6 @@
font-size: 12px; font-size: 12px;
margin-left: 10rpx; margin-left: 10rpx;
} }
.image3{ .image3{
width: 10px; width: 10px;
height: 12px; height: 12px;
@ -86,161 +149,12 @@
background-color: darkgrey; background-color: darkgrey;
margin-top: 10rpx; margin-top: 10rpx;
} }
/* 推荐项目 */ .shangimage{
.zt1{
font-size: 18px;
left: 10px;
position: relative;
}
/* 第一个项目 */
.image2{
width: 185px;
height: 140px;
position: relative;
border-radius: 10px;
}
.zt2{
font-size: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.zt3{
color: #E89709;
font-size: 19px;
font-weight: bolder;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.zt4{
position: absolute;
top:5px;
left: 8px;
color: #ffffff;
}
.zt5{
font-size: 20px;
position: absolute;
top:425px;
right: 30px;
}
.zt6{
color: #E89709;
font-size: 19px;
font-weight: bolder;
position: absolute;
top:445px;
right: 60px;
}
.h4{
width: 80px;
height: 30px;
position: absolute;
background-color: #58A55C;
top:470px;
left: 298px;
border-radius: 10px;
}
.zt7{
position: absolute;
top:5px;
right: 8px;
color: #ffffff;
}
/* 推荐美甲师 */
.wz1{
font-size: 18px;
position: relative;
left: 10px;
}
/* 第一个美甲师 */
/* 底部框 */
.Box6{
width: 100%;
height: 70px;
height: #ffffffe9;
top:1300rpx;
position: fixed;
}
.image12{
width: 35px;
height: 30px;
position: relative;
top:24px;
left: 20rpx;
}
.box5{
width: 100%;
height: 1px;
background-color: darkgray;
position: relative;
bottom: 45rpx;
}
.t1{
position: relative;
left: 90rpx;
bottom: 30rpx;
}
.box6{
width: 130px;
height: 40px;
background-color: #eec2c7;
position: relative;
left: 480rpx;
border-radius: 20px;
bottom: 70rpx;
}
.t2{
font-size: 20px;
top:8px;
left: 48px;
position: absolute;
}
.image{
width: 200rpx; width: 200rpx;
height: 200rpx; height: 200rpx;
border-radius: 10%; border-radius: 10%;
margin-left: 20rpx; margin-left: 20rpx;
} }
.h1{
width: 100%;
height: 200px;
white-space: nowrap;
margin-top: 20rpx;
overflow:hidden;
display: flex;
}
.box7 {
width: 100%;
flex-direction: column; /* 垂直方向弹性布局 */
white-space: nowrap; /* 强制内容不换行,确保图片在一行显示 */
position:relative;
top: 20rpx;
}
.image-container {
display: inline-block;
width: 180rpx;
height: 240rpx;
margin-right: 10rpx; /* 图片之间的间距 */
margin-left: 10rpx;
}
.image5 {
width: 100%;
height: 100%;
}
.text{
margin-left: 60rpx;
margin-top: 50rpx;
}
.box8{ .box8{
width: 500rpx; width: 500rpx;
height: 200rpx; height: 200rpx;
@ -248,10 +162,62 @@
left: 230rpx; left: 230rpx;
bottom: 200rpx; bottom: 200rpx;
} }
.diimage{ .tiao{
width: 50rpx; width: 100px;
height: 50rpx; display: flex;
position: relative; justify-content: center;
left: 130rpx; align-items: center;
bottom: 25rpx; flex-direction: column;
}
.tiaobox{
width: 100%;
height: 30px;
display: flex;
}
.pingjia{
width: 100%;
display: flex;
justify-content: center;
margin-top: 10rpx;
}
.pingjiakuang{
width: 90%;
border-top: #6e7071 1px solid;
height: auto;
}
.pingjiaimage{
width: 40px;
height: 40px;
border-radius: 50px;
}
.touxiang{
width: 100%;
height: 40px;
display: flex;
align-items: center;
margin-top: 10rpx;
}
.kuangimage{
width: 100px;
height: 100px;
margin:10rpx 10rpx 10rpx 10rpx;
border-radius: 10px;
}
.tupianbox{
width: 100%;
justify-content: center;
}
.soucangimage{
width: 30px;
height: 30px;
position: absolute;
right: 80rpx;
top: -40rpx;
}
.zixunimage{
width: 30px;
height: 30px;
position: absolute;
right: 0rpx;
top: -40rpx;
} }

View File

@ -1,7 +1,6 @@
<!-- 店铺名框 --> <!-- 店铺名框 -->
<view class="Box2" > <view class="Box2" >
<image class="image" mode="scaleToFill" src="{{businessAvatar}}" /> <image class="shangimage" mode="scaleToFill" src="{{businessAvatar}}" />
<view class="box8"> <view class="box8">
<text class="z2">{{businessName}}</text> <text class="z2">{{businessName}}</text>
<view style="margin-top:10rpx"> <view style="margin-top:10rpx">
@ -9,10 +8,16 @@
<text class="z3">4.9</text> <text class="z3">4.9</text>
<text class="z4">500条</text> <text class="z4">500条</text>
</view> </view>
<view onTap="soucang">
<image class="soucangimage" mode="scaleToFill" src="../image/shoucang.png" />
</view>
<view>
<image class="zixunimage" mode="scaleToFill" src="../image/zixun.png" />
</view>
</view> </view>
</view> </view>
<!-- 营业时间 --> <!-- 营业时间 -->
<view style="width:100%;height:100px"> <view style="width:100%;height:90px">
<view style="height:50px"> <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>
@ -30,40 +35,90 @@
</view> </view>
</view> </view>
</view> </view>
<!-- 推荐项目 --> <view class="tiaobox">
<text class="zt1">推荐项目</text> <view class="tiao" a:for="{{ names }}" onTap="chaxunzhuangtai" data-id={{item.id}}>
<!-- 第一个项目 --> <text>{{item.hengname}}</text>
<view class="h1" > <view class="xian" a:if="{{item.line}}" ></view>
<view style="width:200px;margin-left:10rpx" a:for="{{ tuijian }}" a:key="index"data-num="{{item}}" onTap="shangpinjiemian"> </view>
<image class="image2" mode="scaleToFill" src="{{item.commoditiesImage}}" /> </view>
<view style="height:50px;width:180px"> <!-- 购物车 -->
<text class="zt2">{{item.commoditiesName}}</text> <view class="pages" a:if="{{ showShoppingCart }}">
<view> <!-- 侧边栏 -->
<text class="zt3">¥{{item.commoditiesPrice}}</text> <view class="cebian">
<view class="text"
a:for="{{ lie }}"
onTap="selectItem"
data-id="{{item.id}}">
<text class="color">{{item.name}}</text>
<view>
<!-- 动态绑定 xian 是否显示 -->
<view class="xian" a:if="{{item.showLine}}"></view>
</view>
</view>
</view>
<view class="xinxi">
<view class="shop" a:for="{{ filteredShopping }}">
<view class="imagebox">
<image class="image" mode="scaleToFill" src="{{item.commoditiesImage}}" />
</view>
<view style="width:100%">
<view class="dingwei" style="width:120px;height:20px;top: 35rpx;">
<text>{{item.commoditiesName}}</text>
</view>
<view class="dingwei" style="width:170px;height:40px;top:50rpx">
<text style="font-size:12px;color:#9c9a9a">款式随便做,饰品不限量,含甲片,含卸甲</text>
</view>
<view class="yuyuekuang dingwei" style="top:30px">
<text>¥{{item.commoditiesPrice}}</text>
<view class="yuyue" data-num="{{item}}" onTap="shangpinjiemian">
<text>预约</text>
</view>
</view>
<view class="dingwei" style="left:300rpx;bottom:130rpx" onTap="soucang">
<image class="gouimage" mode="scaleToFill" src="../image/tijiagouwuche.png" />
</view> </view>
</view> </view>
</view>
</view>
</view>
<!-- 评价 -->
<view class="pingjia" a:if="{{ showComments }}">
<view class="pingjiakuang">
<view class="touxiang">
<image class="pingjiaimage" mode="scaleToFill" src="../image/meijia1.jpg" />
<text style="margin-left:10rpx">陌路</text>
</view>
<view style="width:100%">
<text style="color:#8a8f93;font-size:13px">颜色冰透系列裸色01色+烤灯-简约</text>
<view style="width:100%;word-wrap: break-word;">
<text>aslkjhdklajshdkalsdhaskljdhaskldhaskhdaksjhdkjsh</text>
</view> </view>
</view> </view>
<!-- 推荐美甲师 --> <view class="tupianbox">
<text class="wz1">推荐美甲师</text> <image class="kuangimage" mode="scaleToFill" src="../image/meijia1.jpg" />
<!-- 第一个美甲师 --> <image class="kuangimage" mode="scaleToFill" src="../image/meijia1.jpg" />
<view class="box7"> <image class="kuangimage" mode="scaleToFill" src="../image/meijia1.jpg" />
<view a:for="{{meijiashi}}" a:for-item="item" class="image-container"> <image class="kuangimage" mode="scaleToFill" src="../image/meijia1.jpg" />
<image class="image5" mode="scaleToFill" src="{{item.manicuristAvatar}}" />
<view>
<text class="text">{{item.manicuristName}}</text>
</view>
</view>
</view> </view>
<!-- 底部框 --> </view>
<view class="Box6"> </view>
<image class="image12" mode="scaleToFill" src="../image/pingjia.png" /> <!-- 商家 -->
<view class="box5" ></view> <view style="width:100%;margin-top:20rpx" a:if="{{ showBusinessInfo }}">
<text class="t1" onTap="pingjia">评价</text> <view style="margin-top:10rpx">
<image mode="scaleToFill" class="diimage" onTap="soucang" src="../image/shoucang.png" /> <view class="box3" style="margin-top:10rpx;"></view>
<view class="box6"> <text >店铺名称:{{businessName}}</text>
<text class="t2" onTap="zixun">咨询</text> </view>
</view> <view style="margin-top: 10rpx;">
</view> <view class="box3" style="margin-top:10rpx"></view>
<text>联系电话:{{businessPhone}}</text>
</view>
<view style="margin-top: 10rpx;">
<view class="box3" style="margin-top:10rpx"></view>
<text>营业时间:{{startBusiness}}-{{endBusiness}}</text>
</view>
<view style="margin-top: 10rpx;">
<view class="box3" style="margin-top:10rpx"></view>
<text>店铺地址:{{address}}</text>
</view>
<view class="box3" style="margin-top:10rpx"></view>
</view>

View File

@ -1,7 +1,18 @@
import { loadavg } from 'os'; import{url} from '../request'
import {url} from '../request'
Page({ Page({
data: { data: {
lie: [
{ id: 1, name: '推荐款式', showLine: true },
{ id: 2, name: '中长款', showLine: false },
{ id: 3, name: '本甲款', showLine: false },
{ id: 4, name: '长款', showLine: false },
{ id: 5, name: '短款', showLine: false },
],
names:[
{ id:1, hengname:'款式分类',line:true},
{id:2,hengname:'评价',line:false},
{id:3,hengname:'商家',line:false},
],
userId: '', userId: '',
address: '', address: '',
businessName:'', businessName:'',
@ -26,7 +37,11 @@ Page({
phone: "", phone: "",
rating: 0, rating: 0,
specialties: "", specialties: "",
id:'' id:'',
filteredShopping: [],
showShoppingCart: true, // 控制购物车部分是否显示
showComments: false, // 控制评论部分是否显示
showBusinessInfo: false, // 控制商家信息是否显示
}, },
onLoad(options) { onLoad(options) {
// Extract userId and address from options // Extract userId and address from options
@ -38,6 +53,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
const businessPhone = options.businessPhone
console.log(id,'zheyedesaksdas'); 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({
@ -49,6 +65,7 @@ Page({
startBusiness:startBusiness, startBusiness:startBusiness,
storeStatus:storeStatus, storeStatus:storeStatus,
id:id, id:id,
businessPhone:businessPhone,
}); });
my.request({ my.request({
url: url + '/api/commodities/list/page/commodities', url: url + '/api/commodities/list/page/commodities',
@ -74,6 +91,8 @@ Page({
this.setData({ this.setData({
tuijian: res.data.data.records, // 更新 tuijian 列表 tuijian: res.data.data.records, // 更新 tuijian 列表
}); });
this.chushihua();
console.log(this.data.tuijian,'这是推荐');
} else { } else {
console.log('shibaile') console.log('shibaile')
} }
@ -82,7 +101,7 @@ Page({
console.error('Request failed', error); console.error('Request failed', error);
} }
}); });
this.meijiahsi();
}, },
soucang() { soucang() {
my.getStorage({ my.getStorage({
@ -104,10 +123,23 @@ Page({
}, },
dataType: 'json', dataType: 'json',
success: (res) => { success: (res) => {
my.alert({ if(res.data.code===0){
content: '收藏成功' my.alert({
}); content: '收藏成功'
console.log('收藏成功', res); });
}
else if(res.data.code===40100){
my.alert({
content: '登录信息已过期,请重新登录'
});
my.navigateTo({
url:'/pages/denglu/denglu'
})
}else{
my.alert({
content: '店铺已收藏'
});
}
}, },
fail: (error) => { fail: (error) => {
console.error('请求失败: ', JSON.stringify(error)); console.error('请求失败: ', JSON.stringify(error));
@ -128,32 +160,32 @@ Page({
}); });
}, },
meijiahsi(){ // meijiahsi(){
my.request({ // my.request({
url: url + '/api/manicurist/userQueryAll', // url: url + '/api/manicurist/userQueryAll',
method: 'GET', // method: 'GET',
data: { // data: {
businessId: this.data.id // businessId: this.data.id
}, // },
headers: { // headers: {
'content-type': 'application/json', // 'content-type': 'application/json',
}, // },
dataType: 'json', // dataType: 'json',
success: (res) => { // success: (res) => {
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({
meijiashi: res.data.data, // 更新 tuijian 列表 // meijiashi: res.data.data, // 更新 tuijian 列表
}); // });
} else { // } else {
console.log('shibaile') // console.log('shibaile')
} // }
}, // },
fail: (error) => { // fail: (error) => {
console.error('Request failed', error); // console.error('Request failed', error);
} // }
}); // });
}, // },
pingjia(){ pingjia(){
my.navigateTo({ my.navigateTo({
url:'/pages/shangpinpingjia/shangpinpingjia' url:'/pages/shangpinpingjia/shangpinpingjia'
@ -178,5 +210,76 @@ Page({
}) })
console.log(ids,businessId,commoditiesImage,commoditiesName,commoditiesPrice+'这是商品的') console.log(ids,businessId,commoditiesImage,commoditiesName,commoditiesPrice+'这是商品的')
}, },
// 点击事件处理函数
selectItem(e) {
const id = e.currentTarget.dataset.id;
console.log(id);
// 更新对应的 showLine 状态,控制是否显示线条
const updatedLie = this.data.lie.map(item => {
if (item.id === id) {
item.showLine = !item.showLine; // 切换显示状态
} else {
item.showLine = false; // 其他项隐藏
}
return item;
});
// 根据点击的类别 id 筛选对应的商品
const filteredShopping = this.data.tuijian.filter(item => String(item.commoditiesGroupId) === String(id));
// 更新数据
this.setData({
lie: updatedLie,
filteredShopping, // 更新右侧商品列表
showShoppingCart: true, // 显示购物车部分
showComments: false, // 隐藏评论部分
showBusinessInfo: false, // 隐藏商家信息部分
});
console.log(this.data.filteredShopping,'hhhhhhhhhhhhhh');
},
chushihua(){
this.setData({
filteredShopping: this.data.tuijian.filter(item => String(item.commoditiesGroupId) === "1"), // 默认选中类别 1
})
console.log(this.data.filteredShopping,'chushi');
},
chaxunzhuangtai(e) {
const id = e.currentTarget.dataset.id;
console.log(id);
// 更新对应的 line 状态,控制是否显示线条
const updatednames = this.data.names.map(item => {
if (item.id === id) {
item.line = !item.line; // 切换显示状态
} else {
item.line = false; // 其他项隐藏
}
return item;
});
this.setData({
names: updatednames,
});
// 根据点击的分类切换显示内容
if (id === 1) {
this.setData({
showShoppingCart: true, // 显示购物车
showComments: false, // 隐藏评论
showBusinessInfo: false, // 隐藏商家信息
});
} else if (id === 2) {
this.setData({
showShoppingCart: false, // 隐藏购物车
showComments: true, // 显示评论
showBusinessInfo: false, // 隐藏商家信息
});
} else if (id === 3) {
this.setData({
showShoppingCart: false, // 隐藏购物车
showComments: false, // 隐藏评论
showBusinessInfo: true, // 显示商家信息
});
}
},
}); });

View File

@ -15,6 +15,7 @@
border-radius: 20px; border-radius: 20px;
padding: 10px; padding: 10px;
margin-bottom: 80px; /* 留出一些空间给底部结算栏 */ margin-bottom: 80px; /* 留出一些空间给底部结算栏 */
margin-top: 30rpx;
} }
.box1 { .box1 {
@ -53,9 +54,11 @@
} }
.container { .container {
width: 100px;
position: relative; position: relative;
left: 85px; left: 100px;
top: 25px; top: 20px;
display: flex;
} }
.boxd { .boxd {
@ -88,7 +91,7 @@
} }
.text2 { .text2 {
position: relative; position: relative;
left: 185rpx; left: 200rpx;
} }
.text3{ .text3{
height: 20px; height: 20px;
@ -98,3 +101,20 @@
font-size:12px; font-size:12px;
color:#a8b0b8 color:#a8b0b8
} }
.number{
width: 30px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}
.beijing{
display: flex;
justify-content: center;
align-items: center;
width: 25px;
height: 25px;
background-color: white;
font-size: 20p;
}

View File

@ -1,25 +1,16 @@
<view class="box"> <view class="box">
<!-- 购物车店铺 --> <!-- 购物车店铺 -->
<view class="box3"> <view class="box3">
<checkbox-group onChange="checkboxChange">
<block a:for="{{productList}}" a:key="id"> <block a:for="{{productList}}" a:key="id">
<view class="box1"> <view class="box1">
<view class="box4"> <view class="box4">
<!-- 给每个复选框绑定 data-index --> <!-- 给每个复选框绑定 data-index -->
<ant-checkbox <checkbox color="red" checked="{{item.checked}}" value="{{item.cartId}}" />
color="red"
checked="{{selectedItems[index]}}"
data-index="{{index}}"
onChange="handleCheckedChange">
</ant-checkbox>
</view> </view>
<image class="image" mode="scaleToFill" src="{{item.commoditiesImage}}" /> <image class="image" mode="scaleToFill" src="{{item.commoditiesImage}}" />
<!-- <view onTap="yichu" data-id="{{item.commoditiesId}}" a:key="id">
<text class="text3">移除</text>
</view> -->
<view class="box5"> <view class="box5">
<view> <view>
<text class="text" style="font-size:20px">{{item.commoditiesName}}</text> <text class="text" style="font-size:20px">{{item.commoditiesName}}</text>
</view> </view>
@ -27,19 +18,28 @@
<text class="text" style="font-size:15px">¥{{item.commoditiesPrice}}</text> <text class="text" style="font-size:15px">¥{{item.commoditiesPrice}}</text>
</view> </view>
<view class="container"> <view class="container">
<stepper defaultValue="{{0}}" min="{{1}}" max="999" step="{{1}}" /> <view class="beijing" data-index="{{index}}" style="margin-right: 10rpx;" onTap="decreaseQuantity" >
<text>-</text>
</view>
<view class="number">
<text >{{item.quantity}}</text>
</view>
<view class="beijing" style="margin-left: 10rpx;"onTap="increaseQuantity" data-index="{{index}}" >
<text >+</text>
</view>
</view> </view>
</view> </view>
<text class="text3" onTap="yichu" data-id="{{item.cartId}}">移除购物车</text> <text class="text3" onTap="yichu" data-id="{{item.cartId}}">移除购物车</text>
</view> </view>
</block> </block>
</checkbox-group>
</view> </view>
<!-- 底部结算栏 --> <!-- 底部结算栏 -->
<view class="boxall"> <view class="boxall">
<ant-checkbox checked="{{checked}}" color="red" onChange="toggleChange">全选</ant-checkbox> <checkbox color="red" checked="{{select_all}}" onChange="selectall"/>全选
<text class="text2">合计:¥{{totalPrice}}</text> <text class="text2">合计:¥{{totalPrice}}</text>
<view class="boxd"> <view class="boxd" onTap="jiesuan">
<text class="text1">结算</text> <text class="text1">结算</text>
</view> </view>
</view> </view>

View File

@ -3,21 +3,139 @@ import { url } from '../request';
Page({ Page({
data: { data: {
id: '', id: '',
checked: false, // 全选的状态
productList: [], // 商品列表 productList: [], // 商品列表
selectedItems: [], // 每个商品的选中状态 select_all: false,
totalPrice: 0, // 总价 checkbox_productListid: '',
totalPrice: 0,
},
// 计算总价
calculateTotalPrice() {
const totalPrice = this.data.productList
.filter(item => item.checked) // 只计算勾选的商品
.reduce((sum, item) => sum + item.quantity * item.commoditiesPrice, 0);
// 格式化总价为两位小数
const formattedTotalPrice = totalPrice.toFixed(2);
// 更新 totalPrice
this.setData({ totalPrice: formattedTotalPrice });
},
// 增加商品数量
increaseQuantity(e) {
const { index } = e.currentTarget.dataset; // 获取当前商品的索引
const updatedProductList = [...this.data.productList];
const item = updatedProductList[index];
// 增加数量
if (item.quantity < 999) {
item.quantity += 1;
}
this.setData({ productList: updatedProductList });
this.calculateTotalPrice(); // 重新计算总价
},
// 减少商品数量
decreaseQuantity(e) {
const { index } = e.currentTarget.dataset; // 获取当前商品的索引
const updatedProductList = [...this.data.productList];
const item = updatedProductList[index];
// 减少数量
if (item.quantity > 1) {
item.quantity -= 1;
}
this.setData({ productList: updatedProductList });
this.calculateTotalPrice(); // 重新计算总价
},
// 全选/取消全选
selectall(e) {
const newSelectAll = !this.data.select_all;
const updatedProductList = this.data.productList.map(item => ({
...item,
checked: newSelectAll,
}));
const checkbox_productListid = newSelectAll
? updatedProductList.map(item => item.cartId).join(',')
: '';
this.setData({
productList: updatedProductList,
select_all: newSelectAll,
checkbox_productListid,
});
console.log("arr=", checkbox_productListid);
this.calculateTotalPrice(); // 重新计算总价
const selectedProducts = updatedProductList.filter(item => item.checked);
this.setData({
selectedProducts, // 存储勾选的商品信息
});
console.log(selectedProducts);
},
checkboxChange(e) {
const { value } = e.detail; // 当前选中的值列表
const updatedProductList = this.data.productList.map(item => ({
...item,
checked: value.includes(item.cartId.toString()),
}));
const select_all = updatedProductList.every(item => item.checked);
this.setData({
productList: updatedProductList,
select_all,
});
this.calculateTotalPrice(); // 更新总价
// 提取勾选的商品
const selectedProducts = updatedProductList.filter(item => item.checked);
this.setData({
selectedProducts, // 存储勾选的商品信息
});
console.log(selectedProducts,'askldjaslkdaslkdjklas');
},
// 获取商品数据
fetchProductDetails(cartItems) {
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) => {
console.log(res);
if (res.data.code === 0) {
const productData = res.data.data;
productData.cartId = item.id; // 将 cartId 添加到商品数据中
productData.quantity = 1; // 默认数量为 1
resolve(productData);
} else {
reject(`商品信息获取失败: ${res.data.message}`);
}
},
fail: (error) => {
reject(error);
},
});
});
});
Promise.all(promises)
.then((productList) => {
this.setData({ productList });
this.calculateTotalPrice(); // 初始化总价
})
.catch((error) => {
console.error('商品信息获取失败: ', error);
my.alert({ content: '商品信息获取失败,请稍后重试' });
});
}, },
onShow() { // 页面加载时获取商品数据
onLoad() {
this.setData({
select_all: false,
products:[],
});
my.getStorage({ my.getStorage({
key: 'userInfo', key: 'userInfo',
success: (res) => { success: (res) => {
const userInfo = res.data; const userInfo = res.data;
this.setData({
id: userInfo.id, // 获取 id
});
if (userInfo && userInfo.cookie) { if (userInfo && userInfo.cookie) {
my.request({ my.request({
url: url + '/api/cart/selectByUserId', url: url + '/api/cart/selectByUserId',
@ -30,8 +148,16 @@ Page({
dataType: 'json', dataType: 'json',
success: (res) => { success: (res) => {
if (res.data.code === 0) { if (res.data.code === 0) {
console.log(res);
const cartItems = res.data.data; const cartItems = res.data.data;
this.fetchProductDetails(cartItems); this.fetchProductDetails(cartItems);
} else {
my.alert({
content: '登录信息已过期,请重新登录',
});
my.navigateTo({
url: '/pages/denglu/denglu',
});
} }
}, },
fail: (error) => { fail: (error) => {
@ -39,20 +165,18 @@ Page({
my.alert({ content: '请求失败,请稍后重试' }); my.alert({ content: '请求失败,请稍后重试' });
}, },
}); });
} else { }
else{
my.alert({ my.alert({
content: '您未登录,请先登录。', content:'您未登录,请先登录'
success: () => { })
my.navigateTo({ my.navigateTo({
url: '/pages/denglu/denglu', url:'/pages/denglu/denglu'
}); })
},
});
} }
}, },
}); });
}, },
yichu(e) { yichu(e) {
const cartId = e.currentTarget.dataset.id; // 获取商品的 cartId const cartId = e.currentTarget.dataset.id; // 获取商品的 cartId
if (!cartId) { if (!cartId) {
@ -60,9 +184,7 @@ Page({
my.alert({ content: '商品ID未找到请稍后重试' }); my.alert({ content: '商品ID未找到请稍后重试' });
return; return;
} }
console.log('需要移除的商品cartId:', cartId); console.log('需要移除的商品cartId:', cartId);
my.getStorage({ my.getStorage({
key: 'userInfo', key: 'userInfo',
success: (res) => { success: (res) => {
@ -90,10 +212,6 @@ Page({
console.log(res); console.log(res);
} }
}, },
fail: (error) => {
console.error('请求失败: ', JSON.stringify(error));
my.alert({ content: '请求失败,请稍后重试' });
},
}); });
} }
}, },
@ -101,11 +219,11 @@ Page({
}, },
// 移除后更新 // 移除后更新
updateCartList() { updateCartList() {
this.setData({ select_all: false });
my.getStorage({ my.getStorage({
key: 'userInfo', key: 'userInfo',
success: (res) => { success: (res) => {
const userInfo = res.data; const userInfo = res.data;
if (userInfo && userInfo.cookie) { if (userInfo && userInfo.cookie) {
my.request({ my.request({
url: url + '/api/cart/selectByUserId', // 获取最新的购物车数据 url: url + '/api/cart/selectByUserId', // 获取最新的购物车数据
@ -135,82 +253,19 @@ Page({
}, },
}); });
}, },
jiesuan() {
fetchProductDetails(cartItems, userId) { const products = this.data.selectedProducts;
console.log(cartItems, 'zheshiid'); if(!products || products.length === 0){
const promises = cartItems.map((item) => { my.alert({
return new Promise((resolve, reject) => { content:'请选择商品'
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) => { }else{
console.error('商品信息获取失败: ', error); const productsStr = JSON.stringify(products)
my.alert({ content: '商品信息获取失败,请稍后重试' }); const prices =this.data.totalPrice
my.navigateTo({
url: '/pages/zhifujiemian/zhifujiemian?products='+encodeURIComponent(productsStr)+ '&prices=' + encodeURIComponent(prices)
}); });
},
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),
});
},
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();
},
}); });

View File

@ -1,11 +1,7 @@
{ {
"defaultTitle": "购物车", "defaultTitle": "购物车",
"usingComponents": { "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" "styleIsolation": "apply-shared"
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

View File

@ -1,10 +1,2 @@
<view class="page"> <view>
<view class="page-section">
<view>
这是一个空白小程序,安装此小程序后修改 index.js 中的环境 ID 为自己的环境 ID 并且部署云函数就可以正常访问函数。
</view>
<view>
{{data}}
</view>
</view>
</view> </view>

View File

@ -1,8 +1,5 @@
{ {
"usingComponents": { "usingComponents": {
"list": "antd-mini/es/List/index",
"list-item": "antd-mini/es/List/ListItem/index",
"icon": "antd-mini/es/Icon/index",
"switch": "antd-mini/es/Switch/index"
} }
} }

View File

@ -29,12 +29,12 @@ Page({
url: url + '/api/manicurist/add', url: url + '/api/manicurist/add',
method: 'POST', method: 'POST',
data: { data: {
certificate_path: this.data.businessName, certificate_path: this.data.selectedOption,
certification_number: this.data.idcard, certification_number: this.data.idcard,
email: this.data.person, email: this.data.person,
gender: 0, gender: 0,
issuing_authority: "hhh", issuing_authority: "hhh",
manicuristName: this.data.selectedOption, manicuristName: this.data.businessName,
phone: this.data.phone, phone: this.data.phone,
specialties: "hhh" specialties: "hhh"
}, },
@ -44,9 +44,18 @@ Page({
}, },
dataType: 'json', dataType: 'json',
success: (res) => { success: (res) => {
console.log(res); if(res.data.code===0){
my.navigateBack() my.navigateBack();
my.alert({ content: '正在审核中,请耐心等待' }); my.alert({content:res.data.description})
}
elif(res.data.code===50001)
{
my.alert({content:res.data.description})
}
elif(res.data.code===40100)
{
my.alert({content:res.data.description})
}
}, },
fail: (error) => { fail: (error) => {
console.error('请求失败: ', JSON.stringify(error)); console.error('请求失败: ', JSON.stringify(error));

View File

@ -13,58 +13,74 @@
height: 30rpx; height: 30rpx;
} }
.box{ .box{
width: 100%; width: 90%;
display: flex; /* 启用 Flexbox 布局 */ display: flex;
flex-direction: column; /* 设置主轴为竖直方向 */ justify-content: center;
align-items: center; /* 在交叉轴(水平方向)上居中对齐 */ align-items: center;
height: 100vh; border: 1px solid #de868f;
} border-radius: 40px;
.kuang{ margin-top: 20rpx;
width: 90%;
height: 240rpx;
border: 1px solid #de868f;
border-radius: 20px;
margin-top: 20rpx;
}
.image{
width: 100px;
height: 100px;
border-radius: 20px;
position: relative;
top: 25rpx;
left: 20rpx;
}
.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{
font-size: 13px; width: 100%;
width: 100rpx; display: flex;
background-color: #21a612; justify-content: center;
margin-top: 20rpx; }
margin-left: 10rpx; .box4{
color: white; width: 120rpx;
position: relative; height: 50rpx;
top: 88rpx; border: 1px solid #4095e5;
right: 210rpx; border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
bottom: 310rpx;
left: 530rpx;
} }
.dingwei{ .dingwei{
position: relative; position: relative;
}
.statues{
font-size: 13px;
width: 100rpx;
background-color: #4095e5;
margin-top: 20rpx;
margin-left: 10rpx;
color: white;
position: relative;
/* top: 88rpx;
right: 210rpx; */
}
.text{
font-weight: bolder;
margin-left: 10rpx;
position: relative;
top: 30rpx;
right: 10rpx;
}
.wenzi{
width: 65%;
height: 200rpx;
position: relative;
left: 220rpx;
bottom: 180rpx;
}
.image{
width: 100px;
height: 100px;
border-radius: 20px;
position: relative;
top: 25rpx;
left: 20rpx;
}
.kuang{
width: 90%;
height: 240rpx;
border: 3px solid #de868f;
border-radius: 20px;
margin-top: 20rpx;
} }
.box2{ .box2{
display: flex; display: flex;
@ -73,14 +89,3 @@ position: relative;
margin-top: 50rpx; margin-top: 50rpx;
flex-direction: column; flex-direction: column;
} }
.box4{
width: 120rpx;
height: 50rpx;
border: 1px solid #21a612;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
left: 300rpx;
}

View File

@ -26,23 +26,26 @@
</view> </view>
</view> </view>
</view> </view>
</view>
<!-- 店铺界面 --> <!-- 店铺界面 -->
<view style="width:100%"> <view style="width:100%">
<view class="box2" > <view class="box2" >
<view class="kuang" a:for="{{ dianpu }}"> <view class="kuang" a:for="{{ xuanran }}" a:key="{{index}}" data-num="{{item}}" onTap="dianpu">
<image class="image" mode="scaleToFill" src="{{item.image}}" /> <image class="image" mode="scaleToFill" src="{{item.businessAvatar}}" />
<view class="wenzi"> <view class="wenzi">
<text class="text">{{item.name}}</text> <text class="text">{{item.businessName}}</text>
<text class="box1">{{item.statue}}</text> <view style="width:120px;position:relative;top:40rpx;right:10rpx">
<text class="dingwei" style="right:210rpx;top:87rpx;color: #21a612;border:1px solid #21a612;font-size: 12px;">{{item.time}}</text> <text class="statues">{{item.businessImages}}</text>
<view> <text class="dingwei" style="color: #4095e5;border:1px solid #4095e5;font-size: 12px;">{{item.startBusiness}}营业</text>
<text class="dingwei" style="top:100rpx;width:200rpx;height:100rpx;font-size:12px;color: #9b9b9b;">{{item.address}}</text> </view>
</view> <view style="width:150px">
<view class="box4"> <text class="dingwei" style="width:150rpx;top:50rpx;width:200rpx;height:100rpx;font-size:12px;color: #9b9b9b;">{{item.address}}</text>
<text style="font-size:13px;color:#21a612">可上门</text>
</view> </view>
</view> </view>
<view class="box4">
<text style="font-size:13px;color:#4095e5" a:if="{{ item.storeStatus===1 }}">可上门</text>
<text style="font-size:13px;color:#4095e5" a:if="{{ item.storeStatus===0 }}">已休息</text>
</view>
</view> </view>
</view> </view>
</view> </view>
</view>

View File

@ -1,39 +1,12 @@
import {url} from '../request'
Page({ Page({
data: { data: {
selectedCity:'', selectedCity:'',
xuanran:[],
dianpu:[ inputtext:'',
{
name:'小德美甲店铺',
statue:'接受预定',
image:'/pages/image/meijia1.jpg',
time:'8:00营业',
address:'哈尔滨市呼兰区学院路街道288号'
},
{
name:'小德美甲店铺',
statue:'接受预定',
image:'/pages/image/meijia1.jpg',
time:'8:00营业',
address:'哈尔滨市呼兰区学院路街道288号'
},
{
name:'小德美甲店铺',
statue:'接受预定',
image:'/pages/image/meijia1.jpg',
time:'8:00营业',
address:'哈尔滨市呼兰区学院路街道288号'
},
{
name:'小德美甲店铺',
statue:'接受预定',
image:'/pages/image/meijia1.jpg',
time:'8:00营业',
address:'哈尔滨市呼兰区学院路街道288号'
}
]
}, },
onShow(){ onShow(){
this.chaxun();
my.getLocation({ my.getLocation({
type: 1, // 获取包括省市区县数据 type: 1, // 获取包括省市区县数据
success: (res) => { success: (res) => {
@ -53,5 +26,93 @@ Page({
}); });
} }
}); });
} },
chaxun(){
my.request({
url: url + '/api/business/list',
method: 'POST',
data: {
},
headers: {
'content-type': 'application/json',
},
dataType: 'json',
success: (res) => {
console.log('Request succeeded:', res);
if (res.data && res.data.data) {
this.setData({
xuanran: res.data.data, // 更新 tuijian 列表
});
} else {
console.log('shibaile')
}
},
fail: (error) => {
console.error('Request failed', error);
}
});
},
onConfirm(){
my.request({
url: url + '/api/business/list/page/vo',
method: 'POST',
data: {
address: this.data.selectedCity,
businessName: this.data.inputtext,
businessProfile: "",
categoryId: "",
current: 1,
id: "",
pageSize: 20,
sortField: "",
sortOrder: "",
state: "",
storeStatus: "",
userId: ""
},
headers: {
'content-type': 'application/json',
},
dataType: 'json',
success: (res) => {
console.log('Request succeeded:', res);
if (res.data && res.data.data) {
this.setData({
xuanran:res.data.data.records
})
} else {
console.log('shibaile')
}
},
fail: (error) => {
console.error('Request failed', error);
}
});
},
dianpu(item) {
const id = item.target.dataset.num
// console.log('传递的数据:', id);
const ID = id.id
console.log(ID);
const userId = id.userId
const address = id.address
const businessName = id.businessName
const businessAvatar = id.businessAvatar
const endBusiness = id.endBusiness
const startBusiness = id.startBusiness
const storeStatus = id.storeStatus
const businessPhone =id.businessPhone
console.log('Address being passed: ', ID,address,businessName,businessAvatar,endBusiness,startBusiness,businessPhone);
my.navigateTo({
url: `/pages/dianpuzhuye/dianpuzhuye?userId=${userId}&&address=${address}&&businessName=${businessName}&&businessAvatar=${businessAvatar}&&startBusiness=${startBusiness}&&endBusiness=${endBusiness}&&storeStatus=${storeStatus}&&id=${ID}&&businessPhone=${businessPhone}`,
});
},
onChange(value) {
this.setData({
inputtext:value
})
console.log(this.data.inputtext);
},
}); });

View File

@ -1,11 +1,11 @@
/* 商品图背景 */ /* 商品图背景 */
.image{ .image{
width: 390px; width: 100%;
height: 300px; height: 300px;
} }
/* 价格 */ /* 价格 */
.box1{ .box1{
width: 390px; width: 100%;
height: 80px; height: 80px;
background-color: #eec2c7; background-color: #eec2c7;
position: relative; position: relative;
@ -45,7 +45,6 @@ left: 240rpx;
top: 25rpx; top: 25rpx;
} }
/* 商品介绍 */ /* 商品介绍 */
.z5{ .z5{
font-size: 15px; font-size: 15px;
position: relative; position: relative;
@ -53,162 +52,33 @@ top: 25rpx;
color: darkgrey; color: darkgrey;
left: 5px; left: 5px;
} }
/* 中间信息 */ .time{
.z6{ width: 100%;
font-size: 22px; height: 400px;
color: rgb(190, 57, 57); border-top: 2px solid #aba8a8;
position: absolute; margin-top: 40rpx;
top:140px;
left: 10px;
}
.z7{
font-size: 22px;
position: absolute;
top:140px;
left: 130px;
}
.z8{
font-size: 22px;
position: absolute;
top:140px;
left: 250px;
}
/* 详情介绍 */
.box3{
width: 50px;
height: 2px;
position: absolute;
top:174px;
left: 32px;
background-color: rgb(169, 169, 169);
}
.Box3{
width: 390px;
height: 220px;
background-color: rgba(169, 169, 169, 0.53);
position: absolute;
top:180px;
border-radius: 20px; border-radius: 20px;
} }
.Box4{ .yuyuetext{
width: 388px; width: 100%;
height: 218px; height: 50px;
background-color: #ffffff;
position: absolute;
top:1px;
left: 1px;
border-radius: 20px;
} }
.timebox{
/* 内部盒子 */
.Box5{
width: 340px;
height: 130px;
background-color:rgba(169, 169, 169, 0.53) ;
position: absolute;
top:70px;
left: 30px;
border-radius: 10px;
}
.box6{
width:338px ;
height: 128px;
background-color: #ffffff;
position: absolute;
top:1px;
left: 1px;
border-radius: 10px;
}
.box7{
width: 338px;
height: 30px;
background-color:#FEFA83;
position: absolute;
}
.w4{
position: absolute;
top:5px;
left: 5px;
}
.w5{
position: absolute;
top:5px;
left: 240px;
}
.w6{
font-size: 13px;
position: absolute;
top:35px;
left: 5px;
}
.w7{
font-size: 13px;
position: absolute;
top:60px;
left: 5px;
}
.w8{
font-size: 13px;
position: absolute;
top:85px;
left: 5px;
}
.w9{
font-size: 13px;
position: absolute;
top:85px;
left: 60px;
}
.w10{
font-size: 13px;
position: absolute;
top:110px;
left: 5px;
}
.box9{
position: relative;
top: 35rpx;
}
.container {
padding: 16px;
}
.box10{
display: block;
margin-top: 15rpx;
}
.box11{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
/* Add this in your style section */
.button-container {
display: flex;
justify-content: space-between;
padding: 10px;
position: absolute;
top: 700px;
left: 28px;
}
.button {
background-color: #f3bfc1; /* Light pink background color */
color: #000000; /* Text color */
border-radius: 20px; /* Rounded edges */
padding: 10px 20px;
text-align: center;
font-size: 16px;
width: 100px; width: 100px;
height: 40px;
border: 1px solid #8f8c8c;
border-radius: 10px;
margin-left: 20rpx;
display: flex;
justify-content: center;
align-items: center;
margin-top: 10rpx;
} }
.boxtextkuang{
/* Additional styling for individual buttons if needed */ width: 100%;
.add-to-cart { height: 180px;
margin-right: 20px; display: flex;
} flex-wrap: wrap;
justify-content: space-evenly;
.buy-now { gap: 10px;
margin-left: 20px;
} }

View File

@ -1,4 +1,4 @@
<view> <view style="display:flex;justify-content:center">
<!-- 商品图 --> <!-- 商品图 -->
<view class="Box1"> <view class="Box1">
<image class="image" mode="scaleToFill" src="{{commoditiesImage}}" /> <image class="image" mode="scaleToFill" src="{{commoditiesImage}}" />
@ -13,56 +13,17 @@
</view> </view>
<view style="width:100%"> <view style="width:100%">
<text class="z5">须知 需提前两小时预约 周一至周日全天可用 购买后30天内有效 购买前请仔细阅读</text> <text class="z5">须知 需提前两小时预约 周一至周日全天可用 购买后30天内有效 购买前请仔细阅读</text>
</view>
<!-- 商品介绍 -->
<view class="box9">
<ant-tabs
items="{{ items }}"
current="{{ current }}"
onChange="onChange">
<swiper
current="{{ current }}"
autoplay="{{ false }}"
vertical="{{ false }}"
circular="{{ false }}"
onChange="onSwipeChange">
<block
a:for="{{ items }}"
a:for-index="index"
a:for-item="item"
a:key="{{ index }}">
<swiper-item>
<view class="box10">
<text class="box10">商品介绍</text>
<text class="box10">适用部位: 手部</text>
<text class="box10">包含项目</text>
<view class="box11">
<text class="box10">款式美甲</text>
<text style="margin-right:10rpx">1/{{commoditiesPrice}}</text>
</view>
<text class="box10">美甲类型: 全手任意款式(款式随便做,饰品随便贴)</text>
<text class="box10">美甲饰品: 随便选择饰品款式</text>
<text class="box10">封层 : 磨砂/亮面</text>
<text class="box10">底胶品牌: PQ|甲胶油</text>
</view>
</swiper-item>
<swiper-item>
<text>无</text>
</swiper-item>
<swiper-item>
<text>无</text>
</swiper-item>
</block>
</swiper>
</ant-tabs>
</view> </view>
</view> </view>
</view>
<!-- 购物车框 --> <view class="time">
<view class="button-container"> <view class="yuyuetext">
<view class="button add-to-cart" onTap="jiaru">加入购物车</view> <text style="font-weight:bolder;font-size:18px;position:relative;left:30rpx;top:20rpx">预约时间</text>
<view class="button buy-now">立即购买</view> </view>
</view> <view class="boxtextkuang">
<view class="timebox" a:for="{{ time }}" onTap="selectTime"
data-time="{{item.title}}" style="{{selectedTime === item.title ? 'background-color: #adadad; color: white;' : ''}}">
<text>{{item.title}}</text>
</view>
</view>
</view> </view>

View File

@ -7,11 +7,18 @@ Page({
commoditiesName: '', commoditiesName: '',
businessId: '', businessId: '',
ids: '', ids: '',
items: [ time: [
{ title: '项目详情' }, { title: '9:00' },
{ title: '购买须知' }, { title: '10:00' },
{ title: '评价' }, { title: '11:00' },
{ title: '12:00' },
{ title: '13:00' },
{ title: '14:00' },
{ title: '15:00' },
{ title: '16:00' },
{ title: '17:00' },
], ],
selectedTime: '',
}, },
onLoad(options) { onLoad(options) {
@ -37,6 +44,11 @@ Page({
current, current,
}); });
}, },
onSwipeChange(e) {
this.setData({
current: e.detail.current,
});
},
onShow(){ onShow(){
this.checkUserLogin this.checkUserLogin
}, },
@ -59,59 +71,63 @@ this.checkUserLogin
jiaru() { jiaru() {
// 获取本地存储的用户信息
my.getStorage({ my.getStorage({
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) { my.request({
url: url + '/api/cart/add',
// 使用获取的 `cookie` 值 method: 'POST',
my.request({ data: {
url: url + '/api/cart/add', businessId: this.data.businessId,
method: 'POST', commoditiesId: this.data.ids,
data: { quantity: 1,
businessId: this.data.businessId, selectedOptions: "",
commoditiesId: this.data.ids, },
quantity: 1, headers: {
selectedOptions: "", 'content-type': 'application/json',
}, 'Cookie': userInfo.cookie, // 通过头部传递 cookie
headers: { },
'content-type': 'application/json', dataType: 'json',
'Cookie': userInfo.cookie, // 通过头部传递 cookie success: (res) => {
}, if(res.data.code===0){
dataType: 'json', console.log(res);
success: (res) => { my.alert({ content: '成功添加到购物车' });
console.log(res); }
my.alert({ content: '成功添加到购物车' }); else if(res.data.code===40100){
}, my.alert({
fail: (error) => { content: '登录信息已过期,请重新登录'
console.error('请求失败: ', JSON.stringify(error)); });
my.alert({ content: '请求失败,请稍后重试' }); my.navigateTo({
}, url:'/pages/denglu/denglu'
complete: () => { })
my.hideLoading(); }
}, },
}); fail: (error) => {
} else { console.error('请求失败: ', JSON.stringify(error));
// 未登录时跳转到登录页面 my.alert({ content: '请求失败,请稍后重试' });
my.alert({ },
content: '您未登录,请先登录。', });
success: () => { } else {
my.navigateTo({ my.alert({
url: '/pages/denglu/denglu', content: '您未登录,请先登录。',
success: () => {
my.navigateTo({
url: '/pages/denglu/denglu',
});
},
}); });
}, }
});
}
}, },
fail: (err) => { });
console.error('获取用户信息失败:', err); },
my.alert({ selectTime(e) {
content: '获取用户信息失败,请重试。', const selectedTime = e.currentTarget.dataset.time; // 获取点击的时间
}); console.log(selectedTime);
} this.setData({
selectedTime: selectedTime, // 更新选中的时间
}); });
console.log('选中的时间:', this.data.selectedTime); // 打印选中的时间
}, },
}); });

View File

@ -1,205 +1,18 @@
.shouyeBox1{
height: 110px;
margin-bottom: 10px;
padding-bottom: 10px;
}
/* 个人预约 */
.box1{
width: 180px;
height: 100px;
background-color:#ff001913;
top:20px;
left:10px;
position: absolute;
border-radius: 20px;
}
.text1{
font-size:20px;
font-weight: bolder;
position: absolute;
color:#DE868F;
left:50px;
top:40px;
}
/* 到店服务 */
.box2{
width: 180px;
height: 100px;
background-color:#ff001913 ;
top:20px;
right:10px;
position: absolute;
border-radius: 20px;
}
.text2{
font-size:20px;
font-weight: bolder;
position: absolute;
color:#DE868F;
right:50px ;
top:40px;
}
.k1{ .k1{
width: 100%; width: 100%;
height: 60px; height: 60px;
background-color: #efaab1b7; background-color: #efaab1b7;
top:80rpx; margin-top: 70rpx;
position: relative;
} }
.z1{ .z1{
font-size: 25px; font-size: 25px;
font-weight: bolder; font-weight: bolder;
position: absolute; position: relative;
color: #ffffff; color: #ffffff;
top:15px; top:15px;
left:20px; left:20px;
} }
/* a店铺 */
.adianpu{
width: 344px;
height: 120px;
position: relative;
left: 8rpx;
top: 60px;
margin: auto;
border: 3px #de868f solid;
border-radius: 20px;
margin-top: 15rpx;
}
/* a店铺名称 */
.aname{
font-size: 15px;
font-weight: bold;
left: 110px;
top: 15px;
position: absolute;
color: black;
}
/* a店铺图片 */
.t1 image{
width: 100px;
height: 100px;
position: absolute;
top:10px;
left:5px;
border-radius: 20px;
}
/* b店铺 */
.bdianpu{
width: 344px;
height: 120px;
position: absolute;
left: 22px;
top: 620px;
margin: auto;
border: 3px #de868f solid;
border-radius: 20px;
}
/* b店铺名称 */
.aname{
font-size: 15px;
font-weight: bold;
left: 110px;
top: 15px;
position: absolute;
color: black;
}
/* b店铺图片 */
.t2 image{
width: 100px;
height: 100px;
position: absolute;
top:10px;
left:5px;
border-radius: 20px;
}
/* 可预定小框 */
.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{
width: 10px;
height: 25px;
position: absolute;
left: 230px;
top: 45px;
background-color: #4095e5;
}
/* 《预约》 */
.wyy1{
font-size: 12px;
top:5px;
position: absolute;
color: #ffffff;
}
.wyy2{
font-size: 12px;
top:5px;
position: absolute;
color: #4095e5;
}
/* 店铺地点 */
.wdpdd{
font-size: 12px;
left: 110px;
top: 85px;
position: absolute;
color: #9b9b9b;
}
/* 弹性盒 */
.box3{
display: flex;
flex-wrap: wrap; /* 允许换行 */
justify-content: space-between; /* 使子元素分布更均匀 */
}
.container {
display: flex;
flex-direction: row; /* 设为横向排列 */
align-items: center; /* 纵向居中对齐 */
}
.box4 { .box4 {
display: inline-flex; display: inline-flex;
width: 160rpx; width: 160rpx;
@ -211,13 +24,74 @@
box-shadow: -10px 10px 0px rgba(33, 2, 2, 0.1); box-shadow: -10px 10px 0px rgba(33, 2, 2, 0.1);
position: relative; position: relative;
} }
.box5 { .box5 {
width: 100%; width: 100%;
position: relative; position: relative;
margin-left: 30rpx; margin-left: 30rpx;
top: 20rpx; top: 30rpx;
} }
.text3{ .text3{
color: white; color: white;
} }
.box6{
width: 120rpx;
height: 50rpx;
border: 1px solid #4095e5;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
bottom: 300rpx;
left: 530rpx;
}
.dingwei{
position: relative;
}
.statues{
font-size: 13px;
width: 100rpx;
background-color: #4095e5;
margin-top: 20rpx;
margin-left: 10rpx;
color: white;
position: relative;
}
.text{
font-weight: bolder;
margin-left: 10rpx;
position: relative;
top: 30rpx;
right: 10rpx;
}
.wenzi{
width: 65%;
height: 200rpx;
position: relative;
left: 220rpx;
bottom: 180rpx;
}
.image{
width: 100px;
height: 100px;
border-radius: 20px;
position: relative;
top: 25rpx;
left: 20rpx;
}
.kuang{
width: 90%;
height: 240rpx;
border: 3px solid #de868f;
border-radius: 20px;
margin-top: 20rpx;
}
.box2{
display: flex;
justify-content: center;
align-items: center;
margin-top: 20rpx;
flex-direction: column;
}

View File

@ -1,62 +1,58 @@
<view class="page-section"> <view>
<view class="page-section-demo" style="padding:0px;"> <view>
<swiper <swiper
style="top:0px" previousMargin="0px"
class="demo-swiper" nextMargin="0px"
previousMargin="0px" indicator-dots="{{indicatorDots}}"
nextMargin="0px" autoplay="{{autoplay}}"
indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
autoplay="{{autoplay}}" interval="{{interval}}"
vertical="{{vertical}}" circular="{{circular}}"
interval="{{interval}}" duration="{{duration}}"
circular="{{circular}}" >
duration="{{duration}}" <swiper-item a:for="{{background}}" key="{{item}}" >
> <image mode="scaleToFill" src="{{item.image}}" style="width:100%;height:260px;" />
<swiper-item a:for="{{background}}" key="{{item}}" > </swiper-item>
<image mode="scaleToFill" src="{{item.image}}" style="width:100%;height:260px;" /> </swiper>
</swiper-item> </view>
</swiper>
</view>
</view> </view>
<view class="box5"> <view class="box5">
<view class="box4" onTap="shangmen"> <view class="box4" onTap="shangmen">
<text class="text3">上门预约</text> <text class="text3">上门预约</text>
</view> </view>
<view class="box4"onTap="daodian" style="margin-left:20rpx"> <view class="box4"onTap="daodian" style="margin-left:20rpx">
<text class="text3">到店服务</text> <text class="text3">到店服务</text>
</view> </view>
<view class="box4" onTap="qiangdan" style="margin-left:20rpx"> <view class="box4" onTap="qiangdan" style="margin-left:20rpx">
<text class="text3">发布抢单</text> <text class="text3">发布抢单</text>
</view> </view>
<view class="box4"style="margin-left:20rpx" onTap="yuyue"> <view class="box4"style="margin-left:20rpx" onTap="yuyue">
<text class="text3">我的预约</text> <text class="text3">我的预约</text>
</view> </view>
</view> </view>
<!-- 店铺 --> <!-- 店铺 -->
<view > <view class="k1">
<view class="k1"> <text class="z1">推荐店铺</text>
<text class="z1">推荐店铺</text> </view>
</view> <!-- 店铺界面 -->
<view class="box3" > <view style="width:100%">
<view class="adianpu" a:for="{{tuijian}}"a:key="{{index}}" data-num="{{item}}" onTap="dianpu" > <view class="box2" >
<text class="aname" >{{item.businessName}}</text> <view class="kuang" a:for="{{ tuijian }}" a:key="{{index}}" data-num="{{item}}" onTap="dianpu">
<view class="yy1"> <image class="image" mode="scaleToFill" src="{{item.businessAvatar}}" />
<text class="wyy1">{{item.businessImages}}</text> <view class="wenzi">
<text class="text">{{item.businessName}}</text>
<view style="width:120px;position:relative;top:40rpx;right:10rpx">
<text class="statues">{{item.businessImages}}</text>
<text class="dingwei" style=";color:#4095e5;border:1px solid #4095e5;font-size: 12px;">{{item.startBusiness}}营业</text>
</view> </view>
<view class="yy2"> <view style="width:150px">
<text class="wyy2">{{item.startBusiness}}营业</text> <text class="dingwei" style="width:150rpx;top:50rpx;width:200rpx;height:100rpx;font-size:12px;color: #9b9b9b;">{{item.address}}</text>
</view> </view>
<view class="yy3">
</view>
<text class="wdpdd">{{item.address}}</text>
<view class="ksm">
<text class="wksm" a:if="{{item.storeStatus === 0}}">已休息</text>
<text class="wksm" a:if="{{ item.storeStatus === 1 }}">可预定</text>
</view> </view>
<view class="t1"> <view class="box6">
<image mode="scaleToFill" src="{{item.businessAvatar}}" /> <text style="font-size:13px;color:#4095e5" a:if="{{ item.storeStatus===1 }}">可预约</text>
<text style="font-size:13px;color:#4095e5" a:if="{{ item.storeStatus===0 }}">已休息</text>
</view> </view>
</view> </view>
</view> </view>
</view>

View File

@ -67,10 +67,11 @@ Page({
const endBusiness = id.endBusiness const endBusiness = id.endBusiness
const startBusiness = id.startBusiness const startBusiness = id.startBusiness
const storeStatus = id.storeStatus const storeStatus = id.storeStatus
console.log('Address being passed: ', ID,address,businessName,businessAvatar,endBusiness,startBusiness); const businessPhone =id.businessPhone
console.log('Address being passed: ', ID,address,businessName,businessAvatar,endBusiness,startBusiness,businessPhone);
my.navigateTo({ my.navigateTo({
url: `/pages/dianpuzhuye/dianpuzhuye?userId=${userId}&&address=${address}&&businessName=${businessName}&&businessAvatar=${businessAvatar}&&startBusiness=${startBusiness}&&endBusiness=${endBusiness}&&storeStatus=${storeStatus}&&id=${ID}`, url: `/pages/dianpuzhuye/dianpuzhuye?userId=${userId}&&address=${address}&&businessName=${businessName}&&businessAvatar=${businessAvatar}&&startBusiness=${startBusiness}&&endBusiness=${endBusiness}&&storeStatus=${storeStatus}&&id=${ID}&&businessPhone=${businessPhone}`,
}); });
}, },
shangmen(){ shangmen(){

View File

@ -0,0 +1,223 @@
.cebian {
width: 20%;
height: 100v;
background-color: #efeced;
overflow: hidden;
}
.text {
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
cursor: pointer;
}
.color {
font-size: 14px;
color: rgb(0, 0, 0); /* 默认文字颜色 */
}
.xian{
width: 60px;
height: 3px;
background-color: #f2819f;
margin-top: 5rpx;
}
.xinxi{
width: 80%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow-y: scroll
}
.pages{
width: 100%;
display: flex;
margin-top: 30rpx;
}
.shop{
width: 90%;
height:130px;
border: 1px solid #f2819f;
border-radius: 20px;
margin-top: 20rpx;
display: flex;
}
.image{
width: 100px;
height: 100px;
border-radius: 20px;
}
.imagebox{
width: 100px;
height: 130px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 10rpx;
}
.dingwei{
position: relative;
}
.yuyue{
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 20px;
border-radius: 20px;
border: 1px solid #fb96b1;
background-color: #fb96b1;
}
.yuyuekuang{
width: 100%;
display: flex;
justify-content: space-between;
}
.gouimage{
width: 20px;
height: 20px;
}
/* 店铺名框 */
.Box2
{
width: 100%;
height: 150px;
background-color: white;
position: relative;
top:30px;
border-radius: 15px;
}
/* 店铺名 */
.z2{
font-size: 25px;
font-weight: bolder;
position: relative;
}
.image1{
width: 80px;
height: 20px;
margin-left: 10rpx;
margin-top: 20rpx;
}
.z3{
position: relative;
left: 30rpx;
bottom: 8rpx;
color: rgb(194, 53, 53);
}
.z4{
position: relative;
left: 80rpx;
bottom:10rpx;
}
/* 营业时间 */
.z6{
color: #4095E5;
font-weight: bolder;
top:20px;
left: 10px;
position: relative;
}
.z7{
position: relative;
top:38rpx;
left: 30rpx;
font-size: 13px;
}
.box3{
width: 100%;
height: 1px;
background-color: darkgrey;
}
/* 地址 */
.z8{
font-size: 12px;
margin-left: 10rpx;
}
.image3{
width: 10px;
height: 12px;
margin-left: 5rpx;
}
.box4{
width: 100%;
height: 1px;
background-color: darkgrey;
margin-top: 10rpx;
}
.shangimage{
width: 200rpx;
height: 200rpx;
border-radius: 10%;
margin-left: 20rpx;
}
.box8{
width: 500rpx;
height: 200rpx;
position: relative;
left: 230rpx;
bottom: 200rpx;
}
.tiao{
width: 100px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.tiaobox{
width: 100%;
height: 30px;
display: flex;
}
.pingjia{
width: 100%;
display: flex;
justify-content: center;
margin-top: 10rpx;
}
.pingjiakuang{
width: 90%;
border-top: #6e7071 1px solid;
height: auto;
}
.pingjiaimage{
width: 40px;
height: 40px;
border-radius: 50px;
}
.touxiang{
width: 100%;
height: 40px;
display: flex;
align-items: center;
margin-top: 10rpx;
}
.kuangimage{
width: 100px;
height: 100px;
margin:10rpx 10rpx 10rpx 10rpx;
border-radius: 10px;
}
.tupianbox{
width: 100%;
justify-content: center;
}
.soucangimage{
width: 30px;
height: 30px;
position: absolute;
right: 80rpx;
top: -40rpx;
}
.zixunimage{
width: 30px;
height: 30px;
position: absolute;
right: 0rpx;
top: -40rpx;
}

View File

@ -0,0 +1,124 @@
<!-- 店铺名框 -->
<view class="Box2" >
<image class="shangimage" mode="scaleToFill" src="{{businessAvatar}}" />
<view class="box8">
<text class="z2">{{businessName}}</text>
<view style="margin-top:10rpx">
<image mode="scaleToFill" class="image1" src="../image/xingji.png" />
<text class="z3">4.9</text>
<text class="z4">500条</text>
</view>
<view onTap="soucang">
<image class="soucangimage" mode="scaleToFill" src="../image/shoucang.png" />
</view>
<view>
<image class="zixunimage" mode="scaleToFill" src="../image/zixun.png" />
</view>
</view>
</view>
<!-- 营业时间 -->
<view style="width:100%;height:90px">
<view style="height:50px">
<text class="z6" a:if="{{storeStatus === '0'}}">已休息</text>
<text class="z6" a:if="{{storeStatus === '1'}}">营业中</text>
<text class="z7">营业时间:{{startBusiness}}-{{endBusiness}}</text>
</view>
<view>
<view class="box3"></view>
</view>
<!-- 地址 -->
<view style="width:100%;height:50px">
<image class="image3" mode="scaleToFill" src="../image/didian.png" />
<text class="z8">{{address}}</text>
<view>
<view class="box4"></view>
</view>
</view>
</view>
<view class="tiaobox">
<view class="tiao" a:for="{{ names }}" onTap="chaxunzhuangtai" data-id={{item.id}}>
<text>{{item.hengname}}</text>
<view class="xian" a:if="{{item.line}}" ></view>
</view>
</view>
<!-- 购物车 -->
<view class="pages" a:if="{{ showShoppingCart }}">
<!-- 侧边栏 -->
<view class="cebian">
<view class="text"
a:for="{{ lie }}"
onTap="selectItem"
data-id="{{item.id}}">
<text class="color">{{item.name}}</text>
<view>
<!-- 动态绑定 xian 是否显示 -->
<view class="xian" a:if="{{item.showLine}}"></view>
</view>
</view>
</view>
<view class="xinxi">
<view class="shop" a:for="{{ filteredShopping }}">
<view class="imagebox">
<image class="image" mode="scaleToFill" src="{{item.commoditiesImage}}" />
</view>
<view style="width:100%">
<view class="dingwei" style="width:120px;height:20px;top: 35rpx;">
<text>{{item.commoditiesName}}</text>
</view>
<view class="dingwei" style="width:170px;height:40px;top:50rpx">
<text style="font-size:12px;color:#9c9a9a">款式随便做,饰品不限量,含甲片,含卸甲</text>
</view>
<view class="yuyuekuang dingwei" style="top:30px">
<text>¥{{item.commoditiesPrice}}</text>
<view class="yuyue">
<text>预约</text>
</view>
</view>
<view class="dingwei" style="left:300rpx;bottom:130rpx" onTap="soucang">
<image class="gouimage" mode="scaleToFill" src="../image/tijiagouwuche.png" />
</view>
</view>
</view>
</view>
</view>
<!-- 评价 -->
<view class="pingjia" a:if="{{ showComments }}">
<view class="pingjiakuang">
<view class="touxiang">
<image class="pingjiaimage" mode="scaleToFill" src="../image/meijia1.jpg" />
<text style="margin-left:10rpx">陌路</text>
</view>
<view style="width:100%">
<text style="color:#8a8f93;font-size:13px">颜色冰透系列裸色01色+烤灯-简约</text>
<view style="width:100%;word-wrap: break-word;">
<text>aslkjhdklajshdkalsdhaskljdhaskldhaskhdaksjhdkjsh</text>
</view>
</view>
<view class="tupianbox">
<image class="kuangimage" mode="scaleToFill" src="../image/meijia1.jpg" />
<image class="kuangimage" mode="scaleToFill" src="../image/meijia1.jpg" />
<image class="kuangimage" mode="scaleToFill" src="../image/meijia1.jpg" />
<image class="kuangimage" mode="scaleToFill" src="../image/meijia1.jpg" />
</view>
</view>
</view>
<!-- 商家 -->
<view style="width:100%;margin-top:20rpx" a:if="{{ showBusinessInfo }}">
<view style="margin-top:10rpx">
<view class="box3" style="margin-top:10rpx;"></view>
<text >店铺名称:{{businessName}}</text>
</view>
<view style="margin-top: 10rpx;">
<view class="box3" style="margin-top:10rpx"></view>
<text>联系电话:{{businessPhone}}</text>
</view>
<view style="margin-top: 10rpx;">
<view class="box3" style="margin-top:10rpx"></view>
<text>营业时间:{{startBusiness}}-{{endBusiness}}</text>
</view>
<view style="margin-top: 10rpx;">
<view class="box3" style="margin-top:10rpx"></view>
<text>店铺地址:{{address}}</text>
</view>
<view class="box3" style="margin-top:10rpx"></view>
</view>

View File

@ -0,0 +1,286 @@
import{url} from '../request'
Page({
data: {
lie: [
{ id: 1, name: '推荐款式', showLine: true },
{ id: 2, name: '中长款', showLine: false },
{ id: 3, name: '本甲款', showLine: false },
{ id: 4, name: '长款', showLine: false },
{ id: 5, name: '短款', showLine: false },
],
names:[
{ id:1, hengname:'款式分类',line:true},
{id:2,hengname:'评价',line:false},
{id:3,hengname:'商家',line:false},
],
userId: '',
address: '',
businessName:'',
businessAvatar:'',
startBusiness:'',
endBusiness:'',
storeStatus:'',
businessId: '',
commoditiesGroupId: 0,
commoditiesName: "",
current: 0,
pageSize: 0,
sortField: "",
sortOrder: "",
status: "",
tuijian:[],
meijiashi:[],
email: "",
gender: 0,
manicuristAvatar: "",
manicuristName: "",
phone: "",
rating: 0,
specialties: "",
id:'',
filteredShopping: [],
showShoppingCart: true, // 控制购物车部分是否显示
showComments: false, // 控制评论部分是否显示
showBusinessInfo: false, // 控制商家信息是否显示
},
onLoad(options) {
// Extract userId and address from options
const userId = options.userId;
const address = options.address;
const businessName = options.businessName;
const businessAvatar = options.businessAvatar;
const startBusiness = options.startBusiness;
const endBusiness = options.endBusiness;
const storeStatus = options.storeStatus;
const id = options.id
const businessPhone = options.businessPhone
console.log(id,'zheyedesaksdas');
// Set them in data for use in the page
this.setData({
userId: userId,
address: address,
businessName:businessName,
businessAvatar:businessAvatar,
endBusiness:endBusiness,
startBusiness:startBusiness,
storeStatus:storeStatus,
id:id,
businessPhone:businessPhone,
});
my.request({
url: url + '/api/commodities/list/page/commodities',
method: 'POST',
data: {
businessId: id,
commoditiesGroupId: id,
commoditiesName: "",
current: 0,
pageSize: 2,
sortField: "",
sortOrder: "",
status: "",
},
headers: {
'content-type': 'application/json',
},
dataType: 'json',
success: (res) => {
console.log(id,'这是onload');
console.log('Request succeeded:', res);
if (res.data && res.data.data) {
this.setData({
tuijian: res.data.data.records, // 更新 tuijian 列表
});
this.chushihua();
console.log(this.data.tuijian,'这是推荐');
} else {
console.log('shibaile')
}
},
fail: (error) => {
console.error('Request failed', error);
}
});
},
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) => {
if(res.data.code===0){
my.alert({
content: '收藏成功'
});
}
else if(res.data.code===40100){
my.alert({
content: '登录信息已过期,请重新登录'
});
my.navigateTo({
url:'/pages/denglu/denglu'
})
}else{
my.alert({
content: '店铺已收藏'
});
}
},
fail: (error) => {
console.error('请求失败: ', JSON.stringify(error));
my.alert({ content: '请求失败,请稍后重试' });
},
});
} else {
my.alert({
content: '您未登录,请先登录。',
success: () => {
my.navigateTo({
url: '/pages/denglu/denglu',
});
},
});
}
},
});
},
// meijiahsi(){
// my.request({
// url: url + '/api/manicurist/userQueryAll',
// method: 'GET',
// data: {
// businessId: this.data.id
// },
// headers: {
// 'content-type': 'application/json',
// },
// dataType: 'json',
// success: (res) => {
// console.log('Request succeeded:', res);
// if (res.data && res.data.data) {
// this.setData({
// meijiashi: res.data.data, // 更新 tuijian 列表
// });
// } else {
// console.log('shibaile')
// }
// },
// fail: (error) => {
// console.error('Request failed', error);
// }
// });
// },
pingjia(){
my.navigateTo({
url:'/pages/shangpinpingjia/shangpinpingjia'
})
},
zixun(){
my.navigateTo({
url:'/pages/zixunmeijiashi/zixunmeijiashi'
})
},
shangpinjiemian(item){
const id = item.target.dataset.num
console.log('传递的数据:', id);
const ids = id.id
const commoditiesPrice = id.commoditiesPrice
const commoditiesName = id.commoditiesName
const commoditiesImage = id.commoditiesImage
const businessId = id.businessId
console.log('Address being passed: ',id,commoditiesPrice,commoditiesName,commoditiesImage,businessId);
my.navigateTo({
url:`/pages/shangpinjiemian/shangpinjiemian?commoditiesPrice=${commoditiesPrice}&&commoditiesName=${commoditiesName}&&commoditiesImage=${commoditiesImage}&&ids=${ids}&&businessId=${businessId}`
})
console.log(ids,businessId,commoditiesImage,commoditiesName,commoditiesPrice+'这是商品的')
},
// 点击事件处理函数
selectItem(e) {
const id = e.currentTarget.dataset.id;
console.log(id);
// 更新对应的 showLine 状态,控制是否显示线条
const updatedLie = this.data.lie.map(item => {
if (item.id === id) {
item.showLine = !item.showLine; // 切换显示状态
} else {
item.showLine = false; // 其他项隐藏
}
return item;
});
// 根据点击的类别 id 筛选对应的商品
const filteredShopping = this.data.tuijian.filter(item => String(item.commoditiesGroupId) === String(id));
// 更新数据
this.setData({
lie: updatedLie,
filteredShopping, // 更新右侧商品列表
showShoppingCart: true, // 显示购物车部分
showComments: false, // 隐藏评论部分
showBusinessInfo: false, // 隐藏商家信息部分
});
console.log(this.data.filteredShopping,'hhhhhhhhhhhhhh');
},
chushihua(){
this.setData({
filteredShopping: this.data.tuijian.filter(item => String(item.commoditiesGroupId) === "1"), // 默认选中类别 1
})
console.log(this.data.filteredShopping,'chushi');
},
chaxunzhuangtai(e) {
const id = e.currentTarget.dataset.id;
console.log(id);
// 更新对应的 line 状态,控制是否显示线条
const updatednames = this.data.names.map(item => {
if (item.id === id) {
item.line = !item.line; // 切换显示状态
} else {
item.line = false; // 其他项隐藏
}
return item;
});
this.setData({
names: updatednames,
});
// 根据点击的分类切换显示内容
if (id === 1) {
this.setData({
showShoppingCart: true, // 显示购物车
showComments: false, // 隐藏评论
showBusinessInfo: false, // 隐藏商家信息
});
} else if (id === 2) {
this.setData({
showShoppingCart: false, // 隐藏购物车
showComments: true, // 显示评论
showBusinessInfo: false, // 隐藏商家信息
});
} else if (id === 3) {
this.setData({
showShoppingCart: false, // 隐藏购物车
showComments: false, // 隐藏评论
showBusinessInfo: true, // 显示商家信息
});
}
},
});

View File

@ -1,11 +1,7 @@
{ {
"defaultTitle": "", "defaultTitle": "",
"usingComponents": { "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" "styleIsolation": "apply-shared"
} }

View File

@ -1,97 +1,97 @@
.box { .k1{
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%; width: 100%;
height: 170px; height: 60px;
display: flex; background-color: #efaab1b7;
flex-direction: row; margin-top: 70rpx;
}
.image { }
width: 120px; .z1{
height: 120px; font-size: 25px;
border-radius: 10px; font-weight: bolder;
position: relative; position: relative;
left: 20px; color: #ffffff;
top: 20px; top:15px;
left:20px;
} }
.box4 { .box4 {
display: inline-flex;
width: 160rpx;
height: 160rpx;
background-color: pink;
border-radius: 10%;
justify-content: center;
align-items: center;
box-shadow: -10px 10px 0px rgba(33, 2, 2, 0.1);
position: relative; position: relative;
top: 80px;
left: 10px;
width: 25px;
height: 25px;
} }
.box5 { .box5 {
height: 50px; width: 100%;
position: relative; position: relative;
left: 40px; margin-left: 30rpx;
top:30px; top: 30rpx;
} }
.text3{
.text { color: white;
padding: 5px;
} }
.box6{
.container { width: 120rpx;
position: relative; height: 50rpx;
left: 85px; border: 1px solid #4095e5;
top: 25px; border-radius: 50px;
}
.boxd {
width: 100px;
height: 40px;
position: absolute;
border-radius: 30px;
background-color: rgb(162, 12, 12);
left: 570rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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; position: relative;
left: 185rpx; bottom: 300rpx;
left: 530rpx;
} }
.text3{ .dingwei{
height: 20px; position: relative;
position: absolute;
left: 650rpx; }
.statues{
font-size: 13px;
width: 100rpx;
background-color: #4095e5;
margin-top: 20rpx;
margin-left: 10rpx;
color: white;
position: relative;
}
.text{
font-weight: bolder;
margin-left: 10rpx;
position: relative;
top: 30rpx;
right: 10rpx;
}
.wenzi{
width: 65%;
height: 200rpx;
position: relative;
left: 220rpx;
bottom: 180rpx;
}
.image{
width: 100px;
height: 100px;
border-radius: 20px;
position: relative;
top: 25rpx;
left: 20rpx;
}
.kuang{
width: 90%;
height: 240rpx;
border: 3px solid #de868f;
border-radius: 20px;
margin-top: 20rpx;
}
.box2{
display: flex;
justify-content: center;
align-items: center;
margin-top: 20rpx;
flex-direction: column;
} }

View File

@ -1,48 +1,58 @@
<view class="box"> <view>
<checkbox-group bindchange="onChange"> <view>
<view class="box3"> <swiper
<block a:for="{{productList}}" a:key="id"> previousMargin="0px"
<view class="box1"> nextMargin="0px"
<view class="box4"> indicator-dots="{{indicatorDots}}"
<label> autoplay="{{autoplay}}"
<!-- Use selectedItems[index] to check whether the item is selected --> vertical="{{vertical}}"
<checkbox interval="{{interval}}"
color="red" circular="{{circular}}"
checked="{{selectedItems[index]}}" duration="{{duration}}"
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"
> >
全选 <swiper-item a:for="{{background}}" key="{{item}}" >
</checkbox> <image mode="scaleToFill" src="{{item.image}}" style="width:100%;height:260px;" />
<text class="text2">合计:¥{{totalPrice}}</text> </swiper-item>
<view class="boxd"> </swiper>
<text class="text1">结算</text> </view>
</view>
<view class="box5">
<view class="box4" onTap="shangmen">
<text class="text3">上门预约</text>
</view>
<view class="box4"onTap="daodian" style="margin-left:20rpx">
<text class="text3">到店服务</text>
</view>
<view class="box4" onTap="qiangdan" style="margin-left:20rpx">
<text class="text3">发布抢单</text>
</view>
<view class="box4"style="margin-left:20rpx" onTap="yuyue">
<text class="text3">我的预约</text>
</view>
</view>
<!-- 店铺 -->
<view class="k1">
<text class="z1">推荐店铺</text>
</view>
<!-- 店铺界面 -->
<view style="width:100%">
<view class="box2" >
<view class="kuang" a:for="{{ tuijian }}" a:key="{{index}}" data-num="{{item}}" onTap="dianpu">
<image class="image" mode="scaleToFill" src="{{item.businessAvatar}}" />
<view class="wenzi">
<text class="text">{{item.businessName}}</text>
<view style="width:120px;position:relative;top:40rpx;right:10rpx">
<text class="statues">{{item.businessImages}}</text>
<text class="dingwei" style=";color:#4095e5;border:1px solid #4095e5;font-size: 12px;">{{item.startBusiness}}营业</text>
</view>
<view style="width:150px">
<text class="dingwei" style="width:150rpx;top:50rpx;width:200rpx;height:100rpx;font-size:12px;color: #9b9b9b;">{{item.address}}</text>
</view>
</view>
<view class="box6">
<text style="font-size:13px;color:#4095e5" a:if="{{ item.storeStatus===1 }}">可预约</text>
<text style="font-size:13px;color:#4095e5" a:if="{{ item.storeStatus===0 }}">已休息</text>
</view> </view>
</view> </view>
</view> </view>
</view>

View File

@ -1,217 +1,98 @@
import {url} from '../request' import {url} from '../request';
Page({ Page({
data: { data: {
id: '', background: [
productList: [], // 商品列表 {image:"../image/meijia1.jpg"},
selectedItems: [], // 每个商品的选中状态 {image:"../image/meijia2.jpg"}
totalPrice: 0, // 总价 ],
checkAll: false, // 全选标志 indicatorDots: true,
hhh:[] autoplay: true,
}, vertical: false,
interval: 1000,
circular: false,
duration: 1500,
tuijian:[],
address: "",
businessAvatar: "",
businessImages: "",
businessName: "",
businessPhone: "",
businessProfile: "",
categoryId: 0,
createTime: "",
endBusiness: "",
id: 0,
isDelete: 0,
startBusiness: "",
state: 0,
storeStatus: '',
updateTime: "",
userId: 0
},
onLoad() {
my.request({
url: url + '/api/business/list',
method: 'POST',
data: {
onShow() { },
my.getStorage({ headers: {
key: 'userInfo', 'content-type': 'application/json',
success: (res) => { },
const userInfo = res.data; dataType: 'json',
this.setData({ success: (res) => {
id: userInfo.id, // 获取 id console.log('Request succeeded:', res);
}); if (res.data && res.data.data) {
this.setData({
if (userInfo && userInfo.cookie) { tuijian: res.data.data, // 更新 tuijian 列表
my.request({ });
url: url + '/api/cart/selectByUserId', } else {
method: 'POST', console.log('shibaile')
data: { }
id: this.data.id },
}, fail: (error) => {
headers: { console.error('Request failed', error);
'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);
},
});
}); });
}); },
dianpu(item) {
const id = item.target.dataset.num
// console.log('传递的数据:', id);
const ID = id.id
console.log(ID);
const userId = id.userId
const address = id.address
const businessName = id.businessName
const businessAvatar = id.businessAvatar
const endBusiness = id.endBusiness
const startBusiness = id.startBusiness
const storeStatus = id.storeStatus
const businessPhone =id.businessPhone
console.log('Address being passed: ', ID,address,businessName,businessAvatar,endBusiness,startBusiness,businessPhone);
Promise.all(promises) my.navigateTo({
.then((productList) => { url: `/pages/test/test?userId=${userId}&&address=${address}&&businessName=${businessName}&&businessAvatar=${businessAvatar}&&startBusiness=${startBusiness}&&endBusiness=${endBusiness}&&storeStatus=${storeStatus}&&id=${ID}&&businessPhone=${businessPhone}`,
this.setData({ });
productList, },
selectedItems: new Array(productList.length).fill(false), // 初始化所有商品的选中状态为 false shangmen(){
}); my.navigateTo({
console.log(productList, '这是商品'); url:'/pages/shangmenyuyue/shangmenyuyue'
})
},
daodian(){
my.navigateTo({
url:'/pages/daodianfuwu/daodianfuwu'
})
},
qiangdan(){
my.navigateTo({
url:'/pages/kehushangmenyuyueqiangdan/kehushangmenyuyueqiangdan'
})
},
yuyue(){
my.navigateTo({
url:'/pages/wodeyuyue/wodeyuyue'
}) })
.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

@ -1,10 +1,5 @@
{ {
"usingComponents": { "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" "styleIsolation": "apply-shared"
} }

View File

@ -19,12 +19,6 @@
<image class="image1" style="top:23rpx;left:600rpx;" mode="aspectFill" src="/pages/image/jiantou.png"></image> <image class="image1" style="top:23rpx;left:600rpx;" mode="aspectFill" src="/pages/image/jiantou.png"></image>
<text class="z1" style="top:18rpx">我的评价</text> <text class="z1" style="top:18rpx">我的评价</text>
</view> </view>
<!-- 个人信息 -->
<!-- <view class="box3" onTap="xinxi">
<image class="image1"style="left:40rpx;top:25rpx" mode="aspectFill" src="/pages/image/我的个人信息.png"></image>
<image class="image1" style="top:23rpx;left:560rpx;" mode="aspectFill" src="/pages/image/跳转按钮.png"></image>
<text class="z1" style="top:18rpx">个人信息</text>
</view> -->
<!-- 我的收藏 --> <!-- 我的收藏 -->
<view class="box3" onTap="shoucang"> <view class="box3" onTap="shoucang">
<image class="image1"style="left:40rpx;top:25rpx" mode="aspectFill" src="/pages/image/shoucang.png"></image> <image class="image1"style="left:40rpx;top:25rpx" mode="aspectFill" src="/pages/image/shoucang.png"></image>
@ -44,7 +38,7 @@
<text class="z1" style="top:18rpx">认证美甲师</text> <text class="z1" style="top:18rpx">认证美甲师</text>
</view> </view>
<!-- 退出登录 --> <!-- 退出登录 -->
<view class="box3" > <view class="box3" onTap="out">
<image class="image1"style="left:40rpx;top:25rpx" mode="aspectFill" src="/pages/image/tuichudenglu.png"></image> <image class="image1"style="left:40rpx;top:25rpx" mode="aspectFill" src="/pages/image/tuichudenglu.png"></image>
<image class="image1" style="top:23rpx;left:600rpx;" mode="aspectFill" src="/pages/image/jiantou.png"></image> <image class="image1" style="top:23rpx;left:600rpx;" mode="aspectFill" src="/pages/image/jiantou.png"></image>
<text class="z1" style="top:18rpx">退出登录</text> <text class="z1" style="top:18rpx">退出登录</text>

View File

@ -7,22 +7,24 @@ Page({
onShow() { onShow() {
my.getStorage({ my.getStorage({
key: 'userInfo', key: 'userInfo',
success: (res)=> { success: (res) => {
// 成功获取到用户信息 // 成功获取到用户信息
const userInfo = res.data; const userInfo = res.data;
console.log('用户信息:', userInfo); console.log('用户信息:', userInfo);
if(userInfo){
// 可以直接使用 username 和 avatarUrl this.setData({
this.setData({ username: userInfo.username,
username: userInfo.username, // 设置用户名 avatarUrl: userInfo.avatarUrl,
avatarUrl: userInfo.avatarUrl, // 设置头像链接 });
}); }else{
console.log('用户名:', username); this.setData({
console.log('头像链接:', avatarUrl); username: '请登录',
avatarUrl: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.jHUH4s7TQ48X_B-1iozuJgHaHa?w=207&h=207&c=7&r=0&o=5&dpr=1.5&pid=1.7',
});
}
}, },
fail: function(err) { fail: (err) => {
// 如果没有存储的 userInfo说明用户可能未登录 console.log('获取用户信息失败:', err);
console.error('获取用户信息失败:', err);
} }
}); });
}, },
@ -63,4 +65,24 @@ Page({
url: '/pages/meijiashirenzheng/meijiashirenzheng' url: '/pages/meijiashirenzheng/meijiashirenzheng'
}); });
}, },
out(){
my.removeStorage({
key: 'userInfo',
success: () => {
console.log('用户已退出登录,缓存已清除');
// 清除缓存后更新页面为默认信息
this.setData({
username: '请登录',
avatarUrl: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.jHUH4s7TQ48X_B-1iozuJgHaHa?w=207&h=207&c=7&r=0&o=5&dpr=1.5&pid=1.7',
});
my.alert({
content:'您已退出登录'
})
},
fail: (err) => {
console.error('退出登录失败:', err);
}
});
},
}); });

View File

@ -1,5 +1,7 @@
{ {
"defaultTitle": "我的", "defaultTitle": "我的",
"usingComponents": {}, "usingComponents": {
"ant-button": "antd-mini/es/Button/index"
},
"styleIsolation": "apply-shared" "styleIsolation": "apply-shared"
} }

View File

@ -63,24 +63,30 @@ Page({
}, },
dataType: 'json', dataType: 'json',
success: (res) => { success: (res) => {
if(res.data&&res.data.data){ if(res.data.code===0){
this.setData({ this.setData({
dingdan:res.data.data.records, dingdan:res.data.data.records,
}) })
} }
console.log('Response Set-Cookie:', res.header['Set-Cookie']); else if(res.data.code===40100){
my.alert({
content: '登录信息已过期,请重新登录'
});
my.navigateTo({
url:'/pages/denglu/denglu'
})
}
console.log(res); console.log(res);
console.log(this.data.dingdan); console.log(this.data.dingdan);
console.log(this.data.dingdan);
}, },
fail: (error) => { fail: (error) => {
console.error('请求失败: ', JSON.stringify(error)); console.error('请求失败: ', JSON.stringify(error));
my.alert({ content: '请求失败,请稍后重试' }); my.alert({ content: '请求失败,请稍后重试' });
}, },
}); });
} else { }
else {
my.alert({ my.alert({
content: '您未登录,请先登录。', content: '您未登录,请先登录。',
success: () => { success: () => {

View File

@ -41,21 +41,24 @@ Page({
dataType: 'json', dataType: 'json',
success: (res) => { success: (res) => {
console.log(res); console.log(res);
const soucang = res.data.data || []; if(res.data.code===0){
const soucang = res.data.data || [];
this.setData({ soucang }); this.setData({ soucang });
// 从返回的 data 数组中提取 id 并存储到 collectedData 中 // 从返回的 data 数组中提取 id 并存储到 collectedData 中
const collectedIds = soucang.map(item => item.id); // 提取 id const collectedIds = soucang.map(item => item.id); // 提取 id
this.setData({ this.setData({
collectedData: collectedIds // 存储 id collectedData: collectedIds // 存储id
}); });
// 你可以在这里继续调用其他函数,进行数据处理或页面渲染
this.fetchCollectedData(soucang); this.fetchCollectedData(soucang);
}, }else if(res.data.code===40100){
fail: (error) => { my.alert({
console.error('请求失败: ', JSON.stringify(error)); content: '登录信息已过期,请重新登录'
my.alert({ content: '请求失败,请稍后重试' }); });
my.navigateTo({
url:'/pages/denglu/denglu'
})
}
}, },
}); });
} else { } else {
@ -94,7 +97,8 @@ Page({
businessId: item.id, // 添加 businessId businessId: item.id, // 添加 businessId
data: res.data.data, // 返回请求结果的数据 data: res.data.data, // 返回请求结果的数据
}); });
} else { }
else {
reject('请求数据为空'); reject('请求数据为空');
} }
}, },

View File

@ -1,170 +1,61 @@
/* 顶部 */ .all{
.Box{ width: 100%;
width: 100%; display: flex;
height: 800px; justify-content: center;
align-items: center;
flex-direction: column;
} }
.Box1{ .box{
width: 100%;
height: 50px;
background-color: #eec2c7;
}
.t1{
font-weight: bolder;
top:10px;
left:170px;
position: absolute;
}
/* 商品信息 */
.Box2{
width: 100%;
height: 710px;
background-color: darkgray;
position: absolute;
border-radius: 10px;
top:40px;
}
.box1{
width: 388px;
height: 708px;
background-color: #ffffff;
position: absolute;
border-radius: 10px;
top:1px;
}
.z1{
position: absolute;
top:10px;
left: 100px;
}
.z2{
position: absolute;
top:40px;
left: 100px;
font-weight: bolder;
}
/* 减号 */
.box2 image{
width: 20px;
height: 20px;
position: absolute;
top:42px;
left: 290px;
}
.z3{
font-size: 15px;
position: absolute;
top:45px;
left: 320px;
}
/* 加号 */
.box3 image{
width: 20px;
height: 20px;
position: absolute;
top:44px;
left: 335px;
}
/* 美甲图 */
.box1 image{
width: 70px;
height: 70px;
position: absolute;
top:10px;
left: 10px;
border-radius: 10px;
}
/* 价格框 */
.Box3{
width: 90%; width: 90%;
height: 160px; height: 180px;
background-color: darkgrey; display: flex;
top:90px; border: 1px solid #9fa1a3;
position: absolute; border-radius: 20px;
left: 20px; margin-top: 20rpx;
flex-direction: column;
overflow: hidden;
}
.image{
width: 80px;
height: 80px;
border-radius: 10px; border-radius: 10px;
} }
.Box4{ .xinxi{
width: 348px; width: 100%;
height: 158px; height: 100px;
background-color: #ffffff; display: flex;
top:1px; margin-left: 20rpx
left: 1px;
position: absolute;
border-radius: 10px;
} }
/* 内容1 */ .juzhong{
.t1{ display:flex;
top:15px; align-items:center
left: 20px;
position: absolute;
} }
.t2{ .biaoti{
top:15px; width: 249px;
left: 80px; margin-left: 10rpx;
position: absolute;
} }
.t3{ .text{
top:15px; font-size: 18px;
left: 280px; font-weight: bold;
position: absolute;
font-weight: bolder;
} }
.box4{ .form{
width: 340px; width: 100%;
height: 200px;
}
.xian{
width: 100%;
height: 1px; height: 1px;
background-color: darkgray; background-color: #9fa1a3;
position:absolute;
top:50px;
left: 5px;
} }
/* 内容2 */ .zhifu{
.t4{ display: flex;
top:65px; justify-content: center;
left: 20px; align-items: center;
position: absolute; width: 90%;
} height: 50px;
.t5{ background-color: #ee8d97;
top:68px; border-radius: 40px;
left: 280px; position: fixed;
position: absolute; bottom: 40rpx;
font-size: 13px;
color: darkgrey;
}
.box5{
width: 340px;
height: 1px;
background-color: darkgray;
position:absolute;
top:100px;
left: 5px;
}
/* 内容3 */
.t6{
top:120px;
left: 250px;
position: absolute;
}
.t7{
top:120px;
left: 280px;
position: absolute;
color: rgb(176, 31, 31);
position: absolute;
font-weight: bolder;
}
/* 支付按钮 */
.Box5{
width: 360px;
height: 40px;
position: absolute;
top:650px;
background-color: #eec2c7;
left: 20px;
border-radius: 10px;
}
.t8{
position:absolute;
top:10px;
left: 140px;
font-weight: bolder;
} }

View File

@ -1,44 +1,37 @@
<view class="Box"> <view class="all">
<!-- 顶部 --> <!-- 商品框 -->
<view class="Box1"> <view class="box" a:for="{{ dingdan }}" >
<text class="t1">确认订单</text> <view class="xinxi">
</view> <view class="juzhong">
<!-- 订单盒子 --> <image class="image" mode="scaleToFill" src="{{item.commoditiesImage}}" />
<view class="Box2"> </view>
<!-- 商品图 --> <view class="biaoti">
<view class="box1"> <view style="margin-top:30rpx">
<image mode="scaleToFill" src="../image/xiangce1.jpg" /> <text class="text">{{item.commoditiesName}}</text>
<text class="z1">【半贴短甲彩绘款】(饰品免费)</text> <view style="margin-top:5rpx">
<text class="z2">¥59.90</text> <text>¥{{item.commoditiesPrice*item.quantity}}</text>
<!-- 价格框 --> </view>
<view class="Box3"> <view style="margin-top:5rpx">
<view class="Box4"> <text style="color:#898c90">共{{item.quantity}}件</text>
<!-- 内容1 --> </view>
<text class="t1">商品总价</text> </view>
<text class="t2">共1件</text> </view>
<text class="t3">¥59.90</text> </view>
<view class="box4"></view> <view class="xian"></view>
<!-- 内容2 --> <view>
<text class="t4">蚂蚁积分</text> <view style="display:flex;justify-content:space-between;margin-top:20rpx">
<text class="t5">暂不可用</text> <text style="font-size:19px;margin-left:30rpx">商品总价</text>
<view class="box5"></view> <text style="margin-right:50rpx">¥{{item.commoditiesPrice*item.quantity}}</text>
<!-- 内容3 --> </view>
<text class="t6">小计</text> <view class="xian" style="margin-top: 10rpx;"></view>
<text class="t7">¥59.90</text> <view style="display:flex;justify-content:space-between;margin-top:20rpx">
<text style="font-size:19px;margin-left:30rpx">蚂蚁积分</text>
<text style="margin-right:30rpx;color:#a3abb2">暂不可用</text>
</view>
<text></text>
</view> </view>
</view> </view>
</view> <view class="zhifu">
<!-- 减号 --> <text style="color:white">支付 ¥{{prices}}</text>
<view class="box2">
<image mode="scaleToFill" src="../image/减号.png" />
</view>
<!-- 加号 -->
<view class="box3">
<text class="z3">1</text>
<image mode="scaleToFill" src="../image/加号.png" />
</view>
<!-- 支付按钮 -->
<view class="Box5">
<text class="t8">立即支付</text>
</view> </view>
</view> </view>

View File

@ -1,4 +1,16 @@
Page({ Page({
data: {}, data:{
onLoad() {}, dingdan:[],
prices:'',
},
onLoad(options) {
const arrStr = decodeURIComponent(options.products);
const arr = JSON.parse(arrStr);
const prices = decodeURIComponent(options.prices);
console.log(arr,'传过来的');
this.setData({
dingdan:arr,
prices:prices
})
},
}); });

View File

@ -1,4 +1,5 @@
{ {
"defaultTitle": "支付界面",
"usingComponents": {}, "usingComponents": {},
"styleIsolation": "apply-shared" "styleIsolation": "apply-shared"
} }