yovinchen/xlcs
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

小程序端页面调整

Browse Source
This commit is contained in:
yovinchen
2024-03-21 10:29:45 +08:00
parent ab338be7a9
commit 06b494b438
23 changed files with 1200 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
xlcs-user/pages/cart/cart.vue
View File

@@ -14,36 +14,22 @@
<view v-for="(cartInfoListItem, index) in getCartInfoList" :key="index">
<u-card :border="false" :padding="10" :show-head="showMultiCheckbox(index)">
<view slot="head" class="u-m-10">
<u-checkbox
:name="getMultiCheckedIds(index)"
:value="getMultiCheckCart(index)"
active-color="red"
shape="circle"
@change="changeMultiChecked"
></u-checkbox>
<u-checkbox :name="getMultiCheckedIds(index)" :value="getMultiCheckCart(index)"
active-color="red" shape="circle" @change="changeMultiChecked"></u-checkbox>
<text>{{ cartInfoListItem.activityRule.ruleDesc }}</text>
</view>
<view slot="body">
<view v-for="(cartInfoItem, idx) in cartInfoListItem.cartInfoList" :key="idx">
<!-- 动态class绑定是为了确保最后一条底部线条不显示 -->
<view :class="{ 'u-border-bottom': idx !== cartInfoListItem.cartInfoList.length - 1 }"
class="u-body-item u-flex u-col-between u-p-10">
<u-checkbox
v-model="cartInfoItem.isChecked"
:name="cartInfoItem.skuId"
active-color="red"
shape="circle"
@change="changeChecked"
></u-checkbox>
<ListImgItem
:lazyLoad="false"
:showBottom="cartInfoItem.skuType === 0 && cartInfoItem.isNewPerson === 1"
:showLeft="cartInfoItem.skuType === 1"
:showRight="false"
:src="cartInfoItem.imgUrl"
height="200rpx"
width="200rpx"
></ListImgItem>
<view
:class="{ 'u-border-bottom': idx !== cartInfoListItem.cartInfoList.length - 1 }"
class="u-body-item u-flex u-col-between u-p-10">
<u-checkbox v-model="cartInfoItem.isChecked" :name="cartInfoItem.skuId"
active-color="red" shape="circle" @change="changeChecked"></u-checkbox>
<ListImgItem :lazyLoad="false"
:showBottom="cartInfoItem.skuType === 0 && cartInfoItem.isNewPerson === 1"
:showLeft="cartInfoItem.skuType === 1" :showRight="false"
:src="cartInfoItem.imgUrl" height="200rpx" width="200rpx"></ListImgItem>
<view class="u-p-b-20 u-m-l-20" style="flex:1">
<view class="u-font-lg">{{ cartInfoItem.skuName }}</view>
<view class="u-flex u-row-between">
@@ -51,7 +37,8 @@
<text>￥</text>
<text>{{ cartInfoItem.cartPrice }}</text>
</view>
<AddToCart :shopDetail="cartInfoItem" :skuId="cartInfoItem.skuId"></AddToCart>
<AddToCart :shopDetail="cartInfoItem" :skuId="cartInfoItem.skuId">
</AddToCart>
</view>
</view>
</view>
@@ -79,7 +66,9 @@
<view class="u-font-xs u-type-info">
优惠券优惠:￥{{ getCartPriceInfo.couponReduceAmount }}
<text class="u-font-xs u-m-l-20 u-type-info">原价:</text>
<text class="u-font-xs u-type-info">￥{{ getCartPriceInfo.originalTotalAmount }}</text>
<text
class="u-font-xs u-type-info">￥{{ getCartPriceInfo.originalTotalAmount }}
</text>
</view>
</view>
</view>
@@ -95,8 +84,8 @@
</view>
</view>
<CouponInfoList :couponInfoList="getCartCouponInfoList"
:showCouponInfoList.sync="showCouponInfoList"></CouponInfoList>
<CouponInfoList :couponInfoList="getCartCouponInfoList" :showCouponInfoList.sync="showCouponInfoList">
</CouponInfoList>
</view>
</template>
@@ -122,7 +111,9 @@ export default {
])
},
methods: {
...mapActions('cartModule', ['getActivityCartListAction', 'changeCheckCartAction', 'changeMultiCheckedCartAction', 'changeAllCheckCartAction']),
...mapActions('cartModule', ['getActivityCartListAction', 'changeCheckCartAction',
'changeMultiCheckedCartAction', 'changeAllCheckCartAction'
]),
...mapActions('cartModule', ['getCartListAction']),
// 到分类页购买商品
gotoCategory() {
@@ -133,20 +124,31 @@ export default {
// 修改单个商品选中状态
changeChecked(detail) {
let isChecked = 1;
const {name: skuId, value} = detail;
const {
name: skuId,
value
} = detail;
if (!value) isChecked = 0;
this.changeCheckCartAction({skuId, isChecked});
this.changeCheckCartAction({
skuId,
isChecked
});
},
// 修改多个商品的选中状态
changeMultiChecked(detail) {
let skuIdList = [];
skuIdList = detail.name.split(',');
const isChecked = detail.value === true ? 1 : 0;
this.changeMultiCheckedCartAction({skuIdList, isChecked});
this.changeMultiCheckedCartAction({
skuIdList,
isChecked
});
},
// 全部选中/返选
changeAllSelected(detail) {
this.changeAllCheckCartAction({isChecked: detail.value === true ? 1 : 0});
this.changeAllCheckCartAction({
isChecked: detail.value === true ? 1 : 0
});
},
// 跳转至确认订单
gotoConfirmOrder() {
@@ -156,7 +158,9 @@ export default {
// 思考：为什么需要将请求放置于onShow钩子函数中，
// 主要考虑tabs切换后需要进行实时数据的获取
onShow() {
this.getActivityCartListAction({showLoading: true});
this.getActivityCartListAction({
showLoading: true
});
},
mounted() {
// 需要获取购物车数据列表，将最新获取的数据渲染到页面

2
xlcs-user/pages/login/login.vue
View File

@@ -22,6 +22,8 @@
</view>
<view class="buttons">
<button class="otherBtn" @click="goToRegister">注册</button>
<!-- 添加空白间距 -->
<div style="width: 20px; display: inline-block;"></div>
<button class="otherBtn" @click="goToLogin">账号密码登录</button>
</view>
</view>

166
xlcs-user/pages/loginh5/loginh5.vue Normal file
View File

@@ -0,0 +1,166 @@
<template>
<view class="wrap">
<view class="content">
<view class="title">欢迎登录小鹿超市</view>
</view>
<view class="buttom">
<view class="loginType">
<view class="accountLogin item">
<input v-model="username" class="input" placeholder="请输入账号" type="text"/>
<input v-model="password" class="input" placeholder="请输入密码" type="password"/>
<button :disabled="isLogin" class="loginBtn" @click="loginWithAccount">
账号密码登录
</button>
</view>
</view>
<view class="hint">
登录代表同意
<text class="link">小鹿超市用户协议、隐私政策，</text>
并授权使用您的小鹿超市账号信息（如昵称、头像、收获地址）以便您统一管理
</view>
<view class="buttons">
<button class="otherBtn" @click="goToRegister">注册</button>
<!-- 添加空白间距 -->
<div style="width: 20px; display: inline-block;"></div>
<button class="otherBtn" @click="goToWechatLogin">微信登录</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isLogin: false,
username: '',
password: ''
};
},
methods: {
async loginWithAccount() {
this.isLogin = true;
// 做账号密码登录逻辑，替换以下代码为实际的登录操作
try {
// 假设这里进行了账号密码登录，并获取到了 token
const result = await this.$u.api.getAccountLogin({
phone: this.username,
password: this.password
});
console.log(result, result.token, "<<<")
// 将token值进行本地缓存存储
uni.setStorage({
key: 'token',
data: result.token,
success: async () => {
// 更新用户信息
// await this.$u.api.postUpdateUser({
// sex,
// photoUrl,
// nickName
// });
// 路由跳转至首页
uni.reLaunch({
url: '/pages/index/index',
});
}
});
} catch (error) {
console.error('登录失败:', error);
} finally {
this.isLogin = false;
}
},
goToRegister() {
uni.navigateTo({
url: '/pages/register/register',
});
},
goToWechatLogin() {
uni.navigateTo({
url: '/pages/login/login',
});
}
}
};
</script>
<style lang="scss" scoped>
// 样式略有修改以适应账号密码登录的布局
.wrap {
font-size: 28rpx;
.content {
width: 600rpx;
margin: 80rpx auto 0;
.title {
text-align: left;
font-size: 60rpx;
font-weight: 500;
margin-bottom: 100rpx;
}
}
.otherBtn {
width: 240rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
background-color: #ccc;
color: #fff;
font-size: 24rpx;
border: none;
border-radius: 10rpx;
cursor: pointer;
background-color: #1aad19; // 更改微信登录按钮的背景颜色
}
.buttom {
.loginType {
display: flex;
justify-content: center;
padding: 20rpx;
.accountLogin {
display: flex;
flex-direction: column;
align-items: center;
.input {
width: 400rpx;
height: 80rpx;
margin-bottom: 20rpx;
padding: 0 20rpx;
font-size: 28rpx;
border: 1px solid #ccc;
border-radius: 10rpx;
}
.loginBtn {
width: 400rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background-color: rgb(83, 194, 64);
color: #fff;
font-size: 28rpx;
border: none;
border-radius: 10rpx;
cursor: pointer;
}
}
}
.hint {
padding: 20rpx 40rpx;
font-size: 24rpx;
color: #666;
.link {
color: rgb(83, 194, 64);
}
}
}
}
</style>

23
xlcs-user/pages/my/my.vue
View File

@@ -107,12 +107,12 @@
<view class="u-font-xs">提货码</view>
</view>
</u-col>
<!-- <u-col span="3">
<view class="gg-order-item" @click="gotoMyPickUpLocation">
<view class="iconfont icon-dianpu"></view>
<view class="u-font-xs">提货点管理</view>
</view>
</u-col> -->
<u-col span="3">
<view class="gg-order-item" @click="logout">
<view class="iconfont icon-dianpu"></view>
<view class="u-font-xs">退出登录</view>
</view>
</u-col>
<u-col span="3">
<view class="gg-order-item">
<view class="iconfont icon-miaosha"></view>
@@ -204,11 +204,12 @@ export default {
gotoOrderList(index) {
this.$u.route('/pagesOrder/orderList/orderList?current=' + index);
},
// gotoMyPickUpLocation() {
// uni.navigateTo({
// url: '/pagesLocation/myPickUpLocation/myPickUpLocation'
// });
// }
logout() {
uni.removeStorageSync('token');
uni.navigateTo({
url: '/pages/loginh5/loginh5'
});
}
},
async mounted() {
this.userInfo = uni.getStorageSync('userInfo');

151
xlcs-user/pages/register/register.vue Normal file
View File

@@ -0,0 +1,151 @@
<template>
<view class="wrap">
<view class="content">
<view class="title">欢迎注册小鹿超市</view>
</view>
<view class="buttom">
<view class="loginType">
<view class="accountLogin item">
<input v-model="username" class="input" placeholder="请输入手机号" type="text"/>
<input v-model="password" class="input" placeholder="请输入密码" type="password"/>
<button :disabled="isLogin" class="loginBtn" @click="register">
注册
</button>
</view>
</view>
<view class="hint">
注册代表同意
<text class="link">小鹿超市用户协议、隐私政策，</text>
并授权使用您的小鹿超市账号信息（如昵称、头像、收获地址）以便您统一管理
</view>
<view class="buttons">
<button class="otherBtn" @click="goToLogin">账号密码登录</button>
<!-- 添加空白间距 -->
<div style="width: 20px; display: inline-block;"></div>
<button class="otherBtn" @click="goToWechatLogin">微信登录</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isLogin: false,
username: '',
password: ''
};
},
methods: {
async register() {
this.isLogin = true;
try {
const result = await this.$u.api.postRegister({
phone: this.username,
password: this.password
});
console.log('注册成功:', result);
// 路由跳转至登录
uni.reLaunch({
url: '/pages/loginh5/loginh5',
});
} catch (error) {
console.error('登录失败:', error);
} finally {
this.isLogin = false;
}
},
goToLogin() {
uni.navigateTo({
url: '/pages/loginh5/loginh5',
});
},
goToWechatLogin() {
uni.navigateTo({
url: '/pages/login/login',
});
}
}
};
</script>
<style lang="scss" scoped>
// 样式略有修改以适应账号密码登录的布局
.wrap {
font-size: 28rpx;
.content {
width: 600rpx;
margin: 80rpx auto 0;
.title {
text-align: left;
font-size: 60rpx;
font-weight: 500;
margin-bottom: 100rpx;
}
}
.otherBtn {
width: 240rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
background-color: #ccc;
color: #fff;
font-size: 24rpx;
border: none;
border-radius: 10rpx;
cursor: pointer;
background-color: #1aad19; // 更改微信登录按钮的背景颜色
}
.buttom {
.loginType {
display: flex;
justify-content: center;
padding: 20rpx;
.accountLogin {
display: flex;
flex-direction: column;
align-items: center;
.input {
width: 400rpx;
height: 80rpx;
margin-bottom: 20rpx;
padding: 0 20rpx;
font-size: 28rpx;
border: 1px solid #ccc;
border-radius: 10rpx;
}
.loginBtn {
width: 400rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background-color: rgb(83, 194, 64);
color: #fff;
font-size: 28rpx;
border: none;
border-radius: 10rpx;
cursor: pointer;
}
}
}
.hint {
padding: 20rpx 40rpx;
font-size: 24rpx;
color: #666;
.link {
color: rgb(83, 194, 64);
}
}
}
}
</style>