wyy
2 years ago
parent
12f701a82c
commit
5b59e152bf
@ -0,0 +1,124 @@
|
|||||||
|
.con {
|
||||||
|
background: #fff;
|
||||||
|
height: 100%;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
image {
|
||||||
|
display: block;
|
||||||
|
width: 150rpx;
|
||||||
|
height: 150rpx;
|
||||||
|
margin: auto;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 150rpx;
|
||||||
|
height: 150rpx;
|
||||||
|
margin-bottom: 8%;
|
||||||
|
}
|
||||||
|
.login-form {
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: 20%;
|
||||||
|
}
|
||||||
|
.authorized-btn {
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #0ab906;
|
||||||
|
border: 1rpx solid #0ab906;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
padding: 8rpx;
|
||||||
|
margin-top: 80rpx;
|
||||||
|
border: 1rpx solid #0ab906;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
padding: 8rpx;
|
||||||
|
margin-top: 80rpx;
|
||||||
|
}
|
||||||
|
.to-idx-btn {
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #eeeeee;
|
||||||
|
color: #333;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
padding: 8rpx;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
padding: 8rpx;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
}
|
||||||
|
.form-title {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 50rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
text-align: center;
|
||||||
|
color: #00a0e9;
|
||||||
|
margin-bottom: 50rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
.account {
|
||||||
|
display: flex;
|
||||||
|
background: #f8f8f8;
|
||||||
|
padding: 15rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 26rpx;
|
||||||
|
align-items: center;
|
||||||
|
input {
|
||||||
|
padding-left: 20rpx;
|
||||||
|
width: 75%;
|
||||||
|
padding-left: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
&::after {
|
||||||
|
border: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.operate {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.to-register {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #00AAFF;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
.error {
|
||||||
|
.error-text {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #e43130;
|
||||||
|
text-align: left;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
.warning-icon {
|
||||||
|
display: inline-block;
|
||||||
|
color: #fff;
|
||||||
|
width: 26rpx;
|
||||||
|
height: 26rpx;
|
||||||
|
line-height: 26rpx;
|
||||||
|
background: #e43130;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
width: 26rpx;
|
||||||
|
height: 26rpx;
|
||||||
|
line-height: 26rpx;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,368 @@
|
|||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
background: #f4f4f4;
|
||||||
|
padding-bottom: 118rpx;
|
||||||
|
}
|
||||||
|
container {
|
||||||
|
.prod-list {
|
||||||
|
width: 100%;
|
||||||
|
background: #f8f8f8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.prod-list {
|
||||||
|
.prod-block {
|
||||||
|
background: #fff;
|
||||||
|
margin-top: 15rpx;
|
||||||
|
.discount-tips {
|
||||||
|
padding: 20rpx 0 20rpx 20rpx;
|
||||||
|
border-bottom: 2rpx solid #f4f4f4;
|
||||||
|
height: 40rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
.text-block {
|
||||||
|
padding: 3rpx 5rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #eb2444;
|
||||||
|
border: 2rpx solid #eb2444;
|
||||||
|
}
|
||||||
|
.text-list {
|
||||||
|
font-size: 24rpx;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
background: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx;
|
||||||
|
.prodinfo {
|
||||||
|
position: relative;
|
||||||
|
color: #999;
|
||||||
|
width: 100%;
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
left: 0;
|
||||||
|
height: 1px;
|
||||||
|
transform-origin: 50% 100% 0;
|
||||||
|
bottom: -20rpx;
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: 642rpx;
|
||||||
|
padding-left: 20rpx;
|
||||||
|
}
|
||||||
|
.pic {
|
||||||
|
text-align: center;
|
||||||
|
width: 180rpx;
|
||||||
|
height: 180rpx;
|
||||||
|
line-height: 180rpx;
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
.prodinfo {
|
||||||
|
&::after {
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.staus {
|
||||||
|
text-align: center;
|
||||||
|
background: rgb(196, 192, 192);
|
||||||
|
font-size: 20rpx;
|
||||||
|
width: 50rpx;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.opt {
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.pic {
|
||||||
|
image {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.lose-efficacy {
|
||||||
|
.discount-tips {
|
||||||
|
padding: 20rpx 0;
|
||||||
|
border-bottom: 2rpx solid #ddd;
|
||||||
|
height: 50rpx;
|
||||||
|
line-height: 50rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
.text-list {
|
||||||
|
font-size: 30rpx;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.prodinfo {
|
||||||
|
display: flex;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
.opt {
|
||||||
|
.prod-name {
|
||||||
|
color: #333;
|
||||||
|
max-height: 72rpx;
|
||||||
|
line-height: 36rpx;
|
||||||
|
display: -webkit-box;
|
||||||
|
word-break: break-all;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
.prod-info-text {
|
||||||
|
color: #999;
|
||||||
|
display: inline-block;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
height: 48rpx;
|
||||||
|
line-height: 48rpx;
|
||||||
|
background: #f9f9f9;
|
||||||
|
padding: 0 10rpx 0 10rpx;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
margin: 10rpx 0 0rpx 0;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 24rpx;
|
||||||
|
position: relative;
|
||||||
|
font-family: arial;
|
||||||
|
}
|
||||||
|
.prod-info-text.empty-n {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.price-count {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
.price {
|
||||||
|
color: #eb2444;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.prod-info-text {
|
||||||
|
&:before {
|
||||||
|
border-top: 5px solid #aaa;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
border-top: 5px solid #f9f9f9;
|
||||||
|
top: 9px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.lose-efficacy {
|
||||||
|
.prodinfo {
|
||||||
|
.opt {
|
||||||
|
.price-count {
|
||||||
|
.price {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
margin-top: 20rpx;
|
||||||
|
background: #fff;
|
||||||
|
.item {
|
||||||
|
background: #f8f8f9;
|
||||||
|
}
|
||||||
|
.discount-tips {
|
||||||
|
.empty-prod {
|
||||||
|
color: #777;
|
||||||
|
font-size: 26rpx;
|
||||||
|
border: 2rpx solid #999;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
float: right;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.m-numSelector {
|
||||||
|
.minus {
|
||||||
|
float: left;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 56rpx;
|
||||||
|
border: 2rpx solid #d9d9d9;
|
||||||
|
position: relative;
|
||||||
|
width: 56rpx;
|
||||||
|
border-right: 0;
|
||||||
|
border-top-left-radius: 4rpx;
|
||||||
|
border-bottom-left-radius: 4rpx;
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto;
|
||||||
|
content: ' ';
|
||||||
|
width: 22rpx;
|
||||||
|
height: 3rpx;
|
||||||
|
background-color: #7f7f7f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
float: left;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 56rpx;
|
||||||
|
border: 2rpx solid #d9d9d9;
|
||||||
|
width: 56rpx;
|
||||||
|
text-align: center;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.plus {
|
||||||
|
float: left;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 56rpx;
|
||||||
|
border: 2rpx solid #d9d9d9;
|
||||||
|
position: relative;
|
||||||
|
width: 56rpx;
|
||||||
|
border-left: 0;
|
||||||
|
border-top-right-radius: 4rpx;
|
||||||
|
border-bottom-right-radius: 4rpx;
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto;
|
||||||
|
content: ' ';
|
||||||
|
width: 22rpx;
|
||||||
|
height: 3rpx;
|
||||||
|
background-color: #7f7f7f;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto;
|
||||||
|
content: ' ';
|
||||||
|
width: 22rpx;
|
||||||
|
height: 3rpx;
|
||||||
|
background-color: #7f7f7f;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
float: right;
|
||||||
|
&:not(.disabled) {
|
||||||
|
.minus {
|
||||||
|
&:not(.disabled) {
|
||||||
|
&:active {
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.plus {
|
||||||
|
&:not(.disabled) {
|
||||||
|
&:active {
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
checkbox {
|
||||||
|
.wx-checkbox-input {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 35rpx;
|
||||||
|
height: 35rpx;
|
||||||
|
}
|
||||||
|
.wx-checkbox-input.wx-checkbox-input-checked {
|
||||||
|
background: #eb2444;
|
||||||
|
border-color: #eb2444;
|
||||||
|
&::before {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #fff;
|
||||||
|
background: transparent;
|
||||||
|
transform: translate(-50%, -50%) scale(1);
|
||||||
|
-webkit-transform: translate(-50%, -50%) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.empty {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #aaa;
|
||||||
|
padding-top: 200rpx;
|
||||||
|
.txt {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
}
|
||||||
|
.img {
|
||||||
|
margin-top: 80rpx;
|
||||||
|
text-align: center;
|
||||||
|
image {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.price-count {
|
||||||
|
.disable-price {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cart-footer {
|
||||||
|
position: fixed;
|
||||||
|
bottom: calc(90rpx + env(safe-area-inset-bottom));
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row nowrap;
|
||||||
|
height: 98rpx;
|
||||||
|
border-top: 2rpx solid #f4f4f4;
|
||||||
|
z-index: 999;
|
||||||
|
.btn {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 0;
|
||||||
|
background-color: #fafafa;
|
||||||
|
background: rgba(255,255,255,0.95);
|
||||||
|
font-size: 28rpx;
|
||||||
|
.total-msg {
|
||||||
|
font-size: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn.total {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
width: 300rpx;
|
||||||
|
.price {
|
||||||
|
color: #eb2444;
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn.del {
|
||||||
|
color: #eb2444;
|
||||||
|
width: 70rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
text-align: left;
|
||||||
|
display: block;
|
||||||
|
line-height: 102rpx;
|
||||||
|
}
|
||||||
|
.btn.all {
|
||||||
|
width: 150rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
label {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn.settle {
|
||||||
|
width: 200rpx;
|
||||||
|
background: #eb2444;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,5 +1,402 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view class="container">
|
||||||
购物车
|
<view class="prod-list">
|
||||||
|
<block
|
||||||
|
v-for="(item, scIndex) in shopCartItemDiscounts"
|
||||||
|
:key="scIndex"
|
||||||
|
>
|
||||||
|
<view class="prod-block">
|
||||||
|
<view
|
||||||
|
v-if="item.chooseDiscountItemDto"
|
||||||
|
class="discount-tips"
|
||||||
|
>
|
||||||
|
<text class="text-block">
|
||||||
|
{{ wxs.parseDiscount(item.chooseDiscountItemDto.discountRule) }}
|
||||||
|
</text>
|
||||||
|
<text class="text-list">
|
||||||
|
{{
|
||||||
|
wxs.parseDiscountMsg(item.chooseDiscountItemDto.discountRule, item.chooseDiscountItemDto.needAmount, item.chooseDiscountItemDto.discount)
|
||||||
|
}}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<block
|
||||||
|
v-for="(prod, index) in item.shopCartItems"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<view class="item">
|
||||||
|
<view class="btn">
|
||||||
|
<label>
|
||||||
|
<checkbox
|
||||||
|
:data-scindex="scIndex"
|
||||||
|
:data-index="index"
|
||||||
|
:value="prod.prodId"
|
||||||
|
:checked="prod.checked"
|
||||||
|
color="#105c3e"
|
||||||
|
@tap="onSelectedItem"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</view>
|
||||||
|
<view class="prodinfo">
|
||||||
|
<view class="pic">
|
||||||
|
<image :src="prod.pic" />
|
||||||
|
</view>
|
||||||
|
<view class="opt">
|
||||||
|
<view class="prod-name">
|
||||||
|
{{ prod.prodName }}
|
||||||
|
</view>
|
||||||
|
<text :class="'prod-info-text ' + (prod.skuName?'':'empty-n')">
|
||||||
|
{{ prod.skuName }}
|
||||||
|
</text>
|
||||||
|
<view class="price-count">
|
||||||
|
<view class="price">
|
||||||
|
<text class="symbol">
|
||||||
|
￥
|
||||||
|
</text>
|
||||||
|
<text class="big-num">
|
||||||
|
{{ wxs.parsePrice(prod.price)[0] }}
|
||||||
|
</text>
|
||||||
|
<text class="small-num">
|
||||||
|
.{{ wxs.parsePrice(prod.price)[1] }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="m-numSelector">
|
||||||
|
<view
|
||||||
|
class="minus"
|
||||||
|
:data-scindex="scIndex"
|
||||||
|
:data-index="index"
|
||||||
|
@tap="onCountMinus"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
:value="prod.prodCount"
|
||||||
|
disabled
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="plus"
|
||||||
|
:data-scindex="scIndex"
|
||||||
|
:data-index="index"
|
||||||
|
@tap="onCountPlus"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view
|
||||||
|
v-if="!shopCartItemDiscounts.length"
|
||||||
|
class="empty"
|
||||||
|
>
|
||||||
|
<view class="img">
|
||||||
|
<image src="@/static/images/tabbar/basket.png" />
|
||||||
|
</view>
|
||||||
|
<view class="txt">
|
||||||
|
您还没有添加任何商品哦~
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部按钮 -->
|
||||||
|
<view
|
||||||
|
v-if="shopCartItemDiscounts.length>0"
|
||||||
|
class="cart-footer"
|
||||||
|
>
|
||||||
|
<view class="btn all">
|
||||||
|
<label @tap="onSelAll">
|
||||||
|
<checkbox
|
||||||
|
:checked="allChecked"
|
||||||
|
color="#f7d731;"
|
||||||
|
/>
|
||||||
|
全选</label>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="btn del"
|
||||||
|
@tap="onDelBasket"
|
||||||
|
>
|
||||||
|
<text>删除</text>
|
||||||
|
</view>
|
||||||
|
<view class="btn total">
|
||||||
|
<view class="finally">
|
||||||
|
<text>合计:</text>
|
||||||
|
<view class="price">
|
||||||
|
<text class="symbol">
|
||||||
|
￥
|
||||||
|
</text>
|
||||||
|
<text class="big-num">
|
||||||
|
{{ wxs.parsePrice(finalMoney)[0] }}
|
||||||
|
</text>
|
||||||
|
<text class="small-num">
|
||||||
|
.{{ wxs.parsePrice(finalMoney)[1] }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-if="subtractMoney>0"
|
||||||
|
class="total-msg"
|
||||||
|
>
|
||||||
|
总额:￥{{ wxs.toPrice(totalMoney) }} 立减:￥{{ wxs.toPrice(subtractMoney) }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="btn settle"
|
||||||
|
@tap="toFirmOrder"
|
||||||
|
>
|
||||||
|
<text>结算</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- end 底部按钮 -->
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const wxs = number()
|
||||||
|
/**
|
||||||
|
* 生命周期函数--监听页面显示
|
||||||
|
*/
|
||||||
|
onShow(() => {
|
||||||
|
loadBasketData()
|
||||||
|
http.getCartCount() // 重新计算购物车总数量
|
||||||
|
})
|
||||||
|
|
||||||
|
const allChecked = ref(false)
|
||||||
|
const shopCartItemDiscounts = ref([])
|
||||||
|
const loadBasketData = () => {
|
||||||
|
uni.showLoading() // 加载购物车
|
||||||
|
http.request({
|
||||||
|
url: '/p/shopCart/info',
|
||||||
|
method: 'POST',
|
||||||
|
data: {}
|
||||||
|
})
|
||||||
|
.then(({ data }) => {
|
||||||
|
if (data.length > 0) {
|
||||||
|
// 默认不选中
|
||||||
|
const shopCartItemDiscountsParam = data[0].shopCartItemDiscounts
|
||||||
|
shopCartItemDiscountsParam.forEach(shopCartItemDiscount => {
|
||||||
|
shopCartItemDiscount.shopCartItems.forEach(shopCartItem => {
|
||||||
|
shopCartItem.checked = false
|
||||||
|
})
|
||||||
|
})
|
||||||
|
shopCartItemDiscounts.value = shopCartItemDiscountsParam
|
||||||
|
allChecked.value = false
|
||||||
|
} else {
|
||||||
|
shopCartItemDiscounts.value = []
|
||||||
|
}
|
||||||
|
calTotalPrice() // 计算总价
|
||||||
|
uni.hideLoading()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 去结算
|
||||||
|
*/
|
||||||
|
const toFirmOrder = () => {
|
||||||
|
const shopCartItemDiscountsParam = shopCartItemDiscounts.value
|
||||||
|
const basketIds = []
|
||||||
|
shopCartItemDiscountsParam.forEach(shopCartItemDiscount => {
|
||||||
|
shopCartItemDiscount.shopCartItems.forEach(shopCartItem => {
|
||||||
|
if (shopCartItem.checked) {
|
||||||
|
basketIds.push(shopCartItem.basketId)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!basketIds.length) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请选择商品',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
uni.setStorageSync('basketIds', JSON.stringify(basketIds))
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/submit-order/submit-order?orderEntry=0'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 全选
|
||||||
|
*/
|
||||||
|
const onSelAll = () => {
|
||||||
|
let allCheckedParam = allChecked.value
|
||||||
|
allCheckedParam = !allCheckedParam // 改变状态
|
||||||
|
const shopCartItemDiscountsParam = shopCartItemDiscounts.value
|
||||||
|
for (let i = 0; i < shopCartItemDiscountsParam.length; i++) {
|
||||||
|
const cItems = shopCartItemDiscountsParam[i].shopCartItems
|
||||||
|
for (let j = 0; j < cItems.length; j++) {
|
||||||
|
cItems[j].checked = allCheckedParam
|
||||||
|
}
|
||||||
|
}
|
||||||
|
allChecked.value = allCheckedParam
|
||||||
|
shopCartItemDiscounts.value = shopCartItemDiscountsParam
|
||||||
|
calTotalPrice() // 计算总价
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 每一项的选择事件
|
||||||
|
* +
|
||||||
|
*/
|
||||||
|
const onSelectedItem = (e) => {
|
||||||
|
const index = e.currentTarget.dataset.index // 获取data- 传进来的index
|
||||||
|
const scindex = e.currentTarget.dataset.scindex
|
||||||
|
const shopCartItemDiscountsParam = shopCartItemDiscounts.value // 获取购物车列表
|
||||||
|
const checked = shopCartItemDiscountsParam[scindex].shopCartItems[index].checked // 获取当前商品的选中状态
|
||||||
|
shopCartItemDiscountsParam[scindex].shopCartItems[index].checked = !checked // 改变状态
|
||||||
|
shopCartItemDiscounts.value = shopCartItemDiscountsParam
|
||||||
|
checkAllSelected() // 检查全选状态
|
||||||
|
calTotalPrice() // 计算总价
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 检查全选状态
|
||||||
|
*/
|
||||||
|
const checkAllSelected = () => {
|
||||||
|
let allCheckedParam = true
|
||||||
|
const shopCartItemDiscountsParam = shopCartItemDiscounts.value
|
||||||
|
let flag = false
|
||||||
|
for (let i = 0; i < shopCartItemDiscountsParam.length; i++) {
|
||||||
|
const cItems = shopCartItemDiscountsParam[i].shopCartItems
|
||||||
|
for (let j = 0; j < cItems.length; j++) {
|
||||||
|
if (!cItems[j].checked) {
|
||||||
|
allCheckedParam = !allCheckedParam
|
||||||
|
flag = true
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (flag) break
|
||||||
|
}
|
||||||
|
allChecked.value = allCheckedParam
|
||||||
|
}
|
||||||
|
|
||||||
|
const totalMoney = ref(0)
|
||||||
|
const subtractMoney = ref(0)
|
||||||
|
const finalMoney = ref(0)
|
||||||
|
/**
|
||||||
|
* 计算购物车总额
|
||||||
|
*/
|
||||||
|
const calTotalPrice = () => {
|
||||||
|
const shopCartItemDiscountsParam = shopCartItemDiscounts.value
|
||||||
|
const shopCartIds = []
|
||||||
|
for (let i = 0; i < shopCartItemDiscountsParam.length; i++) {
|
||||||
|
const cItems = shopCartItemDiscountsParam[i].shopCartItems
|
||||||
|
for (let j = 0; j < cItems.length; j++) {
|
||||||
|
if (cItems[j].checked) {
|
||||||
|
shopCartIds.push(cItems[j].basketId)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
uni.showLoading()
|
||||||
|
http.request({
|
||||||
|
url: '/p/shopCart/totalPay',
|
||||||
|
method: 'POST',
|
||||||
|
data: shopCartIds
|
||||||
|
})
|
||||||
|
.then(({ data }) => {
|
||||||
|
finalMoney.value = data.finalMoney
|
||||||
|
totalMoney.value = data.totalMoney
|
||||||
|
subtractMoney.value = data.subtractMoney
|
||||||
|
uni.hideLoading()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 减少数量
|
||||||
|
*/
|
||||||
|
const onCountMinus = (e) => {
|
||||||
|
const index = e.currentTarget.dataset.index
|
||||||
|
const scindex = e.currentTarget.dataset.scindex
|
||||||
|
const shopCartItemDiscountsParam = shopCartItemDiscounts.value
|
||||||
|
const prodCount = shopCartItemDiscountsParam[scindex].shopCartItems[index].prodCount
|
||||||
|
if (prodCount > 1) {
|
||||||
|
updateCount(shopCartItemDiscountsParam, scindex, index, -1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 增加数量
|
||||||
|
*/
|
||||||
|
const onCountPlus = (e) => {
|
||||||
|
const index = e.currentTarget.dataset.index
|
||||||
|
const scindex = e.currentTarget.dataset.scindex
|
||||||
|
const shopCartItemDiscountsParam = shopCartItemDiscounts.value
|
||||||
|
updateCount(shopCartItemDiscountsParam, scindex, index, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 改变购物车数量接口
|
||||||
|
*/
|
||||||
|
const updateCount = (shopCartItemDiscountsParam, scindex, index, prodCount) => {
|
||||||
|
uni.showLoading({
|
||||||
|
mask: true
|
||||||
|
})
|
||||||
|
http.request({
|
||||||
|
url: '/p/shopCart/changeItem',
|
||||||
|
method: 'POST',
|
||||||
|
data: {
|
||||||
|
count: prodCount,
|
||||||
|
prodId: shopCartItemDiscountsParam[scindex].shopCartItems[index].prodId,
|
||||||
|
skuId: shopCartItemDiscountsParam[scindex].shopCartItems[index].skuId,
|
||||||
|
shopId: 1
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
shopCartItemDiscountsParam[scindex].shopCartItems[index].prodCount += prodCount
|
||||||
|
shopCartItemDiscounts.value = shopCartItemDiscountsParam
|
||||||
|
calTotalPrice() // 计算总价
|
||||||
|
uni.hideLoading()
|
||||||
|
http.getCartCount() // 重新计算购物车总数量
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除购物车商品
|
||||||
|
*/
|
||||||
|
const onDelBasket = () => {
|
||||||
|
const shopCartItemDiscountsParam = shopCartItemDiscounts.value
|
||||||
|
const basketIds = []
|
||||||
|
for (let i = 0; i < shopCartItemDiscountsParam.length; i++) {
|
||||||
|
const cItems = shopCartItemDiscountsParam[i].shopCartItems
|
||||||
|
for (let j = 0; j < cItems.length; j++) {
|
||||||
|
if (cItems[j].checked) {
|
||||||
|
basketIds.push(cItems[j].basketId)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!basketIds.length) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请选择商品',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
uni.showModal({
|
||||||
|
title: '',
|
||||||
|
content: '确认要删除选中的商品吗？',
|
||||||
|
confirmColor: '#eb2444',
|
||||||
|
success (res) {
|
||||||
|
if (res.confirm) {
|
||||||
|
uni.showLoading({
|
||||||
|
mask: true
|
||||||
|
})
|
||||||
|
http.request({
|
||||||
|
url: '/p/shopCart/deleteItem',
|
||||||
|
method: 'DELETE',
|
||||||
|
data: basketIds
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
uni.hideLoading()
|
||||||
|
loadBasketData()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import "./basket.scss";
|
||||||
|
</style>
|
||||||
|
|||||||
@ -0,0 +1,226 @@
|
|||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.main {
|
||||||
|
position: fixed;
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-top: 100rpx;
|
||||||
|
height: calc(100% - 100rpx);
|
||||||
|
}
|
||||||
|
.search-bar {
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
color: #777;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.07);
|
||||||
|
z-index: 3;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
.arrow {
|
||||||
|
width: 20rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
border-bottom: 2rpx solid #777;
|
||||||
|
border-left: 2rpx solid #777;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
position: absolute;
|
||||||
|
left: 30rpx;
|
||||||
|
top: 41rpx;
|
||||||
|
}
|
||||||
|
.search-box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 60rpx;
|
||||||
|
background: #f7f7f7;
|
||||||
|
z-index: 999;
|
||||||
|
width: 92%;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
text-align: center;
|
||||||
|
margin: auto;
|
||||||
|
.search-img {
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.search-hint {
|
||||||
|
font-size: 28rpx;
|
||||||
|
position: absolute;
|
||||||
|
right: 30rpx;
|
||||||
|
top: 32rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sear-input {
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
.leftmenu {
|
||||||
|
width: 200rpx;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #f5f6f7;
|
||||||
|
overflow: scroll;
|
||||||
|
z-index: 2;
|
||||||
|
.ca-empty {
|
||||||
|
padding-top: 400rpx;
|
||||||
|
text-align: center;
|
||||||
|
color: #aaa;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menu-item {
|
||||||
|
line-height: 90rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
text-align: center;
|
||||||
|
border-bottom: 2rpx silid #e3e3e3;
|
||||||
|
position: relative;
|
||||||
|
color: #777;
|
||||||
|
font-size: 28rpx;
|
||||||
|
text.tips-num {
|
||||||
|
position: absolute;
|
||||||
|
top: 20rpx;
|
||||||
|
right: 15rpx;
|
||||||
|
border-radius: 15rpx;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background: red;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 25rpx;
|
||||||
|
line-height: 30rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menu-item.active {
|
||||||
|
color: #eb2444;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
position: relative;
|
||||||
|
background: #fff;
|
||||||
|
&:before {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
content: "";
|
||||||
|
width: 8rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
top: 29rpx;
|
||||||
|
background: #eb2444;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rightcontent {
|
||||||
|
width: 550rpx;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #fff;
|
||||||
|
z-index: 1;
|
||||||
|
.adver-map {
|
||||||
|
width: auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
margin: 30rpx 20rpx 0;
|
||||||
|
.item-a {
|
||||||
|
display: block;
|
||||||
|
font-size: 0;
|
||||||
|
width: 100%;
|
||||||
|
image {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cont-item {
|
||||||
|
padding: 0 20rpx 20rpx 20rpx;
|
||||||
|
padding-bottom: 94rpx;
|
||||||
|
.show-item {
|
||||||
|
.more-prod-pic {
|
||||||
|
text-align: center;
|
||||||
|
width: 150rpx;
|
||||||
|
height: 150rpx;
|
||||||
|
line-height: 150rpx;
|
||||||
|
font-size: 0;
|
||||||
|
.more-pic {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
left: 0;
|
||||||
|
height: 1px;
|
||||||
|
transform-origin: 50% 100% 0;
|
||||||
|
bottom: 0;
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: 510rpx;
|
||||||
|
padding-left: 20rpx;
|
||||||
|
}
|
||||||
|
.prod-text-right {
|
||||||
|
margin-left: 20rpx;
|
||||||
|
width: 75%;
|
||||||
|
.cate-prod-info {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #999;
|
||||||
|
margin: 10rpx 0 20rpx 0;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.prod-text.more {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 28rpx;
|
||||||
|
display: -webkit-box;
|
||||||
|
word-break: break-all;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.prod-price.more {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #eb2444;
|
||||||
|
font-family: arial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.th-cate-con {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.sub-category {
|
||||||
|
width: 33.33%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.sub-category-item {
|
||||||
|
>.more-pic {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
padding-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
text {
|
||||||
|
font-size: 25rpx;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cont-item.empty {
|
||||||
|
display: block;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #aaa;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
@ -1,5 +1,172 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view class="container">
|
||||||
分类
|
<!-- 头部搜索区 -->
|
||||||
|
<view class="search-bar">
|
||||||
|
<view
|
||||||
|
class="search-box"
|
||||||
|
@tap="toSearchPage"
|
||||||
|
>
|
||||||
|
<image
|
||||||
|
src="/static/images/icon/search.png"
|
||||||
|
class="search-img"
|
||||||
|
/>
|
||||||
|
<text class="sear-input">
|
||||||
|
搜索您想要的商品
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 滚动内容区 -->
|
||||||
|
<view class="main">
|
||||||
|
<!-- 左侧菜单start -->
|
||||||
|
<scroll-view
|
||||||
|
scroll-y="true"
|
||||||
|
class="leftmenu"
|
||||||
|
>
|
||||||
|
<block
|
||||||
|
v-for="(item, index) in categoryList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
:class="'menu-item ' + (selIndex==index?'active':'') + ' '"
|
||||||
|
:data-index="index"
|
||||||
|
:data-id="item.categoryId"
|
||||||
|
@tap="onMenuTab"
|
||||||
|
>
|
||||||
|
{{ item.categoryName }}
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
<view
|
||||||
|
v-if="!categoryList || !categoryList.length"
|
||||||
|
class="ca-empty"
|
||||||
|
>
|
||||||
|
{{ categoryList && categoryList.length ? '该分类下暂无商品' : '暂无商品' }}
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<!-- 左侧菜单end -->
|
||||||
|
|
||||||
|
<!-- 右侧内容start -->
|
||||||
|
<scroll-view
|
||||||
|
scroll-y="true"
|
||||||
|
class="rightcontent"
|
||||||
|
>
|
||||||
|
<view class="adver-map">
|
||||||
|
<view class="item-a">
|
||||||
|
<image
|
||||||
|
:src="categoryImg"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 子分类 -->
|
||||||
|
<view
|
||||||
|
v-if="subCategoryList.length"
|
||||||
|
class="th-cate-con"
|
||||||
|
>
|
||||||
|
<block
|
||||||
|
v-for="(thCateItem, index) in subCategoryList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<view class="sub-category">
|
||||||
|
<view
|
||||||
|
class="sub-category-item"
|
||||||
|
:data-categoryid="thCateItem.categoryId"
|
||||||
|
:data-parentid="thCateItem.parentId"
|
||||||
|
@tap="toCatePage"
|
||||||
|
>
|
||||||
|
<image
|
||||||
|
:src="thCateItem.pic"
|
||||||
|
class="more-pic"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
<text>{{ thCateItem.categoryName }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-else
|
||||||
|
class="cont-item empty"
|
||||||
|
>
|
||||||
|
该分类下暂无子分类~
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<!-- 右侧内容end -->
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const categoryList = ref([])
|
||||||
|
const subCategoryList = ref([])
|
||||||
|
const categoryImg = ref('')
|
||||||
|
const parentId = ref('')
|
||||||
|
/**
|
||||||
|
* 生命周期函数--监听页面加载
|
||||||
|
*/
|
||||||
|
onLoad(() => {
|
||||||
|
// 加载分类列表
|
||||||
|
http.request({
|
||||||
|
url: '/category/categoryInfo',
|
||||||
|
method: 'GET',
|
||||||
|
data: {
|
||||||
|
parentId: ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(({ data }) => {
|
||||||
|
categoryImg.value = data[0].pic
|
||||||
|
categoryList.value = data
|
||||||
|
getProdList(data[0].categoryId)
|
||||||
|
parentId.value = categoryList.value[0].categoryId
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const selIndex = ref(0)
|
||||||
|
/**
|
||||||
|
* 分类点击事件
|
||||||
|
*/
|
||||||
|
const onMenuTab = (e) => {
|
||||||
|
const index = e.currentTarget.dataset.index
|
||||||
|
getProdList(categoryList.value[index].categoryId)
|
||||||
|
parentId.value = categoryList.value[index].categoryId
|
||||||
|
categoryImg.value = categoryList.value[index].pic
|
||||||
|
selIndex.value = index
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 跳转搜索页
|
||||||
|
*/
|
||||||
|
const toSearchPage = () => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/search-page/search-page'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const getProdList = (categoryId) => {
|
||||||
|
// 加载分类列表
|
||||||
|
http.request({
|
||||||
|
url: '/category/categoryInfo',
|
||||||
|
method: 'GET',
|
||||||
|
data: {
|
||||||
|
parentId: categoryId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(({ data }) => {
|
||||||
|
subCategoryList.value = data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 跳转子分类商品页面
|
||||||
|
*/
|
||||||
|
const toCatePage = (e) => {
|
||||||
|
const { parentid, categoryid } = e.currentTarget.dataset
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/sub-category/sub-category?parentId=${parentid}&categoryId=${categoryid}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import "./category.scss";
|
||||||
|
</style>
|
||||||
|
|||||||
@ -0,0 +1,124 @@
|
|||||||
|
.con {
|
||||||
|
background: #fff;
|
||||||
|
height: 100%;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
image {
|
||||||
|
display: block;
|
||||||
|
width: 150rpx;
|
||||||
|
height: 150rpx;
|
||||||
|
margin: auto;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 150rpx;
|
||||||
|
height: 150rpx;
|
||||||
|
margin-bottom: 8%;
|
||||||
|
}
|
||||||
|
.login-form {
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: 20%;
|
||||||
|
}
|
||||||
|
.authorized-btn {
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #0ab906;
|
||||||
|
border: 1rpx solid #0ab906;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
padding: 8rpx;
|
||||||
|
margin-top: 80rpx;
|
||||||
|
border: 1rpx solid #0ab906;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
padding: 8rpx;
|
||||||
|
margin-top: 80rpx;
|
||||||
|
}
|
||||||
|
.to-idx-btn {
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #eeeeee;
|
||||||
|
color: #333;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
padding: 8rpx;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
padding: 8rpx;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
}
|
||||||
|
.form-title {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 50rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
text-align: center;
|
||||||
|
color: #00a0e9;
|
||||||
|
margin-bottom: 50rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
.account {
|
||||||
|
display: flex;
|
||||||
|
background: #f8f8f8;
|
||||||
|
padding: 15rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 26rpx;
|
||||||
|
align-items: center;
|
||||||
|
input {
|
||||||
|
padding-left: 20rpx;
|
||||||
|
width: 75%;
|
||||||
|
padding-left: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
&::after {
|
||||||
|
border: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.operate {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.to-register {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #00AAFF;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
.error {
|
||||||
|
.error-text {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #e43130;
|
||||||
|
text-align: left;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
.warning-icon {
|
||||||
|
display: inline-block;
|
||||||
|
color: #fff;
|
||||||
|
width: 26rpx;
|
||||||
|
height: 26rpx;
|
||||||
|
line-height: 26rpx;
|
||||||
|
background: #e43130;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
width: 26rpx;
|
||||||
|
height: 26rpx;
|
||||||
|
line-height: 26rpx;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,109 @@
|
|||||||
|
.container {
|
||||||
|
background: #f4f4f4;
|
||||||
|
}
|
||||||
|
.category-tit {
|
||||||
|
width: 100%;
|
||||||
|
white-space: nowrap;
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
z-index: 999;
|
||||||
|
background-color: #fff;
|
||||||
|
border-bottom: 2rpx solid #f4f4f4;
|
||||||
|
font-size: 30rpx;
|
||||||
|
.category-item {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 20rpx 10rpx;
|
||||||
|
margin: 0 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.prod-item {
|
||||||
|
margin-top: 100rpx;
|
||||||
|
}
|
||||||
|
.on {
|
||||||
|
border-bottom: 4rpx solid #e43130;
|
||||||
|
color: #e43130;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
.empty {
|
||||||
|
margin-top: 200rpx;
|
||||||
|
}
|
||||||
|
.prod-items {
|
||||||
|
width: 345rpx;
|
||||||
|
display: inline-block;
|
||||||
|
background: #fff;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
box-shadow: 0rpx 6rpx 8rpx rgba(58,134,185,0.2);
|
||||||
|
&:nth-child(2n-1) {
|
||||||
|
margin: 20rpx 10rpx 10rpx 20rpx;
|
||||||
|
}
|
||||||
|
&:nth-child(2n) {
|
||||||
|
margin: 20rpx 20rpx 10rpx 10rpx;
|
||||||
|
}
|
||||||
|
.hot-imagecont {
|
||||||
|
.hotsaleimg {
|
||||||
|
width: 341rpx;
|
||||||
|
height: 341rpx;
|
||||||
|
}
|
||||||
|
font-size: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.hot-text {
|
||||||
|
.hotprod-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
margin-top: 20rpx;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
.prod-info {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #999;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.prod-text-info {
|
||||||
|
position: relative;
|
||||||
|
height: 70rpx;
|
||||||
|
line-height: 70rpx;
|
||||||
|
font-family: Arial;
|
||||||
|
.hotprod-price {
|
||||||
|
display: inline;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #eb2444;
|
||||||
|
}
|
||||||
|
.basket-img {
|
||||||
|
width: 50rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 7rpx;
|
||||||
|
padding: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.more-prod {
|
||||||
|
.prod-text-right {
|
||||||
|
.prod-info {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #999;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.empty-wrap {
|
||||||
|
color: #aaa;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 400rpx;
|
||||||
|
}
|
||||||
@ -0,0 +1,178 @@
|
|||||||
|
<template>
|
||||||
|
<view class="Mall4j container">
|
||||||
|
<!-- 顶部子分类tab -->
|
||||||
|
<scroll-view
|
||||||
|
scroll-x="true"
|
||||||
|
class="category-tit"
|
||||||
|
:scroll-into-view="intoView"
|
||||||
|
:scroll-with-animation="true"
|
||||||
|
>
|
||||||
|
<block
|
||||||
|
v-for="(item, index) in subCategoryList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
:id="'sw' + item.categoryId"
|
||||||
|
:class="'category-item ' + (item.categoryId==categoryId? 'on':'')"
|
||||||
|
:data-id="item.categoryId"
|
||||||
|
@tap="onSubCategoryTap"
|
||||||
|
>
|
||||||
|
{{ item.categoryName }}
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</scroll-view>
|
||||||
|
<!-- 商品列表 -->
|
||||||
|
<view
|
||||||
|
v-if="prodList.length"
|
||||||
|
class="prod-item"
|
||||||
|
>
|
||||||
|
<block
|
||||||
|
v-for="(prod, key) in prodList"
|
||||||
|
:key="key"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="prod-items"
|
||||||
|
:data-prodid="prod.prodId"
|
||||||
|
@tap="toProdPage"
|
||||||
|
>
|
||||||
|
<view class="hot-imagecont">
|
||||||
|
<image
|
||||||
|
:src="prod.pic"
|
||||||
|
class="hotsaleimg"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="hot-text">
|
||||||
|
<view class="hotprod-text">
|
||||||
|
{{ prod.prodName }}
|
||||||
|
</view>
|
||||||
|
<view class="prod-info">
|
||||||
|
{{ prod.brief }}
|
||||||
|
</view>
|
||||||
|
<view class="prod-text-info">
|
||||||
|
<view class="price">
|
||||||
|
<text class="symbol">
|
||||||
|
￥
|
||||||
|
</text>
|
||||||
|
<text class="big-num">
|
||||||
|
{{ wxs.parsePrice(prod.price)[0] }}
|
||||||
|
</text>
|
||||||
|
<text class="small-num">
|
||||||
|
.{{ wxs.parsePrice(prod.price)[1] }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-else
|
||||||
|
class="empty-wrap"
|
||||||
|
>
|
||||||
|
暂无商品数据~
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const wxs = number()
|
||||||
|
|
||||||
|
const parentId = ref('')
|
||||||
|
const categoryId = ref(0)
|
||||||
|
/**
|
||||||
|
* 生命周期函数--监听页面加载
|
||||||
|
*/
|
||||||
|
onLoad((options) => {
|
||||||
|
parentId.value = options.parentId
|
||||||
|
categoryId.value = options.categoryId
|
||||||
|
getSubCategory()
|
||||||
|
getProdList()
|
||||||
|
})
|
||||||
|
|
||||||
|
const current = ref(1)
|
||||||
|
const pages = ref(0)
|
||||||
|
/**
|
||||||
|
* 页面上拉触底事件的处理函数
|
||||||
|
*/
|
||||||
|
onReachBottom(() => {
|
||||||
|
if (current.value < pages.value) {
|
||||||
|
current.value = current.value + 1
|
||||||
|
getProdList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const intoView = ref('')
|
||||||
|
const subCategoryList = ref([])
|
||||||
|
/**
|
||||||
|
* 获取顶栏子分类数据
|
||||||
|
*/
|
||||||
|
const getSubCategory = () => {
|
||||||
|
http.request({
|
||||||
|
url: '/category/categoryInfo',
|
||||||
|
method: 'GET',
|
||||||
|
data: {
|
||||||
|
parentId: parentId.value
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(({ data }) => {
|
||||||
|
subCategoryList.value = data
|
||||||
|
nextTick(() => {
|
||||||
|
intoView.value = 'sw' + categoryId.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const prodList = ref([])
|
||||||
|
const isLoaded = ref(false) // 列表是否加载完毕
|
||||||
|
/**
|
||||||
|
* 根据分类id获取商品列表数据
|
||||||
|
*/
|
||||||
|
const getProdList = () => {
|
||||||
|
isLoaded.value = false
|
||||||
|
|
||||||
|
http.request({
|
||||||
|
url: '/prod/pageProd',
|
||||||
|
method: 'GET',
|
||||||
|
data: {
|
||||||
|
categoryId: categoryId.value,
|
||||||
|
current: current.value,
|
||||||
|
size: 10,
|
||||||
|
sort: 0,
|
||||||
|
isAllProdType: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(({ data }) => {
|
||||||
|
isLoaded.value = true
|
||||||
|
prodList.value = data.current == 1 ? data.records : prodList.value.concat(data.records)
|
||||||
|
current.value = data.current
|
||||||
|
pages.value = data.pages
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 切换顶部分类
|
||||||
|
*/
|
||||||
|
const onSubCategoryTap = (e) => {
|
||||||
|
categoryId.value = e.currentTarget.dataset.id
|
||||||
|
current.value = 1
|
||||||
|
pages.value = 0
|
||||||
|
intoView.value = 'sw' + e.currentTarget.dataset.id
|
||||||
|
getProdList()
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 跳转商品下详情
|
||||||
|
*/
|
||||||
|
const toProdPage = (e) => {
|
||||||
|
const prodid = e.currentTarget.dataset.prodid
|
||||||
|
if (prodid) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/prod/prod?prodid=' + prodid
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "./sub-category.scss";
|
||||||
|
</style>
|
||||||
@ -0,0 +1,222 @@
|
|||||||
|
.container {
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
padding-bottom: 60rpx;
|
||||||
|
}
|
||||||
|
.userinfo {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
.userinfo-con {
|
||||||
|
width: 240rpx;
|
||||||
|
margin: auto;
|
||||||
|
.userinfo-avatar {
|
||||||
|
overflow: hidden;
|
||||||
|
display: block;
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
|
||||||
|
margin: auto;
|
||||||
|
image {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.userinfo-name {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.userinfo-none {
|
||||||
|
display: flex;
|
||||||
|
padding: 30rpx;
|
||||||
|
background: #fff;
|
||||||
|
align-items: center;
|
||||||
|
.default-pic {
|
||||||
|
padding-right: 30rpx;
|
||||||
|
image {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.none-login {
|
||||||
|
button {
|
||||||
|
background: #fff;
|
||||||
|
&::after {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.unlogin {
|
||||||
|
font-size: 30rpx;
|
||||||
|
text-align: left;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.click-login {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #777;
|
||||||
|
text-align: left;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.binding-phone {
|
||||||
|
position: relative;
|
||||||
|
background: #fff;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
border-top: 2rpx solid #f7f7f7;
|
||||||
|
border-bottom: 2rpx solid #f7f7f7;
|
||||||
|
.show-tip {
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
.gotobinding {
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #e24b4b;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list-cont {
|
||||||
|
width: 100%;
|
||||||
|
background: #f7f7f7;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
.total-order {
|
||||||
|
background: #fff;
|
||||||
|
.order-tit {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
border-bottom: 1px solid #f7f7f7;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
.checkmore {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #80848f;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.procedure {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 25rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
.items {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
image {
|
||||||
|
width: 70rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
.num-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: -15rpx;
|
||||||
|
right: -12rpx;
|
||||||
|
color: #eb2444;
|
||||||
|
border: 3rpx solid #eb2444;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
background: #fff;
|
||||||
|
min-width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
line-height: 30rpx;
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.my-menu {
|
||||||
|
background-color: #fff;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
.memu-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 100rpx;
|
||||||
|
border-bottom: 2rpx solid #f7f7f7;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
&:nth-child(1) {
|
||||||
|
border-top: 2rpx solid #f7f7f7;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
image {
|
||||||
|
width: 50rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
.i-name {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.arrowhead {
|
||||||
|
width: 15rpx;
|
||||||
|
height: 15rpx;
|
||||||
|
border-top: 2rpx solid #999;
|
||||||
|
border-right: 2rpx solid #999;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
.prod-col {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
background: #fff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding: 30rpx 0 10rpx 0;
|
||||||
|
font-size: 12px;
|
||||||
|
.col-item {
|
||||||
|
text-align: center;
|
||||||
|
.num {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #3a86b9;
|
||||||
|
}
|
||||||
|
.tit {
|
||||||
|
line-height: 34px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.log-out {
|
||||||
|
padding: 20rpx;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
.log-out-n {
|
||||||
|
font-size: 30rpx;
|
||||||
|
margin: auto;
|
||||||
|
width: 200rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
background: #e43130;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
button.memu-btn.memu-item {
|
||||||
|
background-color: #fff;
|
||||||
|
&:after {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,5 +1,375 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view class="container">
|
||||||
我的
|
<!-- 用户信息 -->
|
||||||
|
<view
|
||||||
|
v-if="isAuthInfo"
|
||||||
|
class="userinfo"
|
||||||
|
>
|
||||||
|
<view class="userinfo-con">
|
||||||
|
<view class="userinfo-avatar">
|
||||||
|
<image
|
||||||
|
:src="
|
||||||
|
loginResult.pic
|
||||||
|
?
|
||||||
|
(loginResult.pic.indexOf('http') === -1 ? picDomain + loginResult.pic : loginResult.pic)
|
||||||
|
:
|
||||||
|
'@/static/images/icon/head04.png'
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="userinfo-name">
|
||||||
|
<view>{{ loginResult.nickName ? loginResult.nickName : "用户昵称" }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view
|
||||||
|
v-if="!isAuthInfo"
|
||||||
|
class="userinfo-none"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="default-pic"
|
||||||
|
@tap="toLogin"
|
||||||
|
>
|
||||||
|
<image src="@/static/images/icon/head04.png" />
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="none-login"
|
||||||
|
@tap="toLogin"
|
||||||
|
>
|
||||||
|
<button class="unlogin">
|
||||||
|
未登录
|
||||||
|
</button>
|
||||||
|
<button class="click-login">
|
||||||
|
点击登录账号
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- end 用户信息 -->
|
||||||
|
|
||||||
|
<view class="list-cont">
|
||||||
|
<!-- 订单状态 -->
|
||||||
|
<view class="total-order">
|
||||||
|
<view class="order-tit">
|
||||||
|
<text style="font-weight:bold">
|
||||||
|
我的订单
|
||||||
|
</text>
|
||||||
|
<view
|
||||||
|
class="checkmore"
|
||||||
|
data-sts="0"
|
||||||
|
@tap="toOrderListPage"
|
||||||
|
>
|
||||||
|
<text>查看全部</text>
|
||||||
|
<text class="arrowhead" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="procedure">
|
||||||
|
<view
|
||||||
|
class="items"
|
||||||
|
data-sts="1"
|
||||||
|
@tap="toOrderListPage"
|
||||||
|
>
|
||||||
|
<image src="@/static/images/icon/toPay.png" />
|
||||||
|
<text>待支付</text>
|
||||||
|
<text
|
||||||
|
v-if="orderAmount.unPay>0"
|
||||||
|
class="num-badge"
|
||||||
|
>
|
||||||
|
{{ orderAmount.unPay }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="items"
|
||||||
|
data-sts="2"
|
||||||
|
@tap="toOrderListPage"
|
||||||
|
>
|
||||||
|
<image src="@/static/images/icon/toDelivery.png" />
|
||||||
|
<text>待发货</text>
|
||||||
|
<text
|
||||||
|
v-if="orderAmount.payed>0"
|
||||||
|
class="num-badge"
|
||||||
|
>
|
||||||
|
{{ orderAmount.payed }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="items"
|
||||||
|
data-sts="3"
|
||||||
|
@tap="toOrderListPage"
|
||||||
|
>
|
||||||
|
<image src="@/static/images/icon/toTake.png" />
|
||||||
|
<text>待收货</text>
|
||||||
|
<text
|
||||||
|
v-if="orderAmount.consignment>0"
|
||||||
|
class="num-badge"
|
||||||
|
>
|
||||||
|
{{ orderAmount.consignment }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="items"
|
||||||
|
data-sts="5"
|
||||||
|
@tap="toOrderListPage"
|
||||||
|
>
|
||||||
|
<image src="@/static/images/icon/toComment.png" />
|
||||||
|
<text>已完成</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!--end 订单状态 -->
|
||||||
|
|
||||||
|
<view class="prod-col">
|
||||||
|
<view
|
||||||
|
class="col-item"
|
||||||
|
@tap="myCollectionHandle"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
v-if="loginResult"
|
||||||
|
class="num"
|
||||||
|
>
|
||||||
|
{{ collectionCount }}
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-else
|
||||||
|
class="num"
|
||||||
|
>
|
||||||
|
--
|
||||||
|
</view>
|
||||||
|
<view class="tit">
|
||||||
|
我的收藏
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="col-item"
|
||||||
|
@tap="handleTips"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
v-if="loginResult"
|
||||||
|
class="num"
|
||||||
|
>
|
||||||
|
5
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-else
|
||||||
|
class="num"
|
||||||
|
>
|
||||||
|
--
|
||||||
|
</view>
|
||||||
|
<view class="tit">
|
||||||
|
我的消息
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="col-item"
|
||||||
|
@tap="handleTips"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
v-if="loginResult"
|
||||||
|
class="num"
|
||||||
|
>
|
||||||
|
3
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-else
|
||||||
|
class="num"
|
||||||
|
>
|
||||||
|
--
|
||||||
|
</view>
|
||||||
|
<view class="tit">
|
||||||
|
我的足迹
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="my-menu">
|
||||||
|
<view
|
||||||
|
class="memu-item"
|
||||||
|
@tap="toDistCenter"
|
||||||
|
>
|
||||||
|
<view class="i-name">
|
||||||
|
<image src="@/static/images/icon/promotion.png" />
|
||||||
|
<text>分销中心</text>
|
||||||
|
</view>
|
||||||
|
<view class="arrowhead" />
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="memu-item"
|
||||||
|
@tap="toCouponCenter"
|
||||||
|
>
|
||||||
|
<view class="i-name">
|
||||||
|
<image src="@/static/images/icon/getCoupon.png" />
|
||||||
|
<text>领券中心</text>
|
||||||
|
</view>
|
||||||
|
<view class="arrowhead" />
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="memu-item"
|
||||||
|
@tap="toMyCouponPage"
|
||||||
|
>
|
||||||
|
<view class="i-name">
|
||||||
|
<image src="@/static/images/icon/myCoupon.png" />
|
||||||
|
<text>我的优惠券</text>
|
||||||
|
</view>
|
||||||
|
<view class="arrowhead" />
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="memu-item"
|
||||||
|
@tap="toAddressList"
|
||||||
|
>
|
||||||
|
<view class="i-name">
|
||||||
|
<image src="@/static/images/icon/myAddr.png" />
|
||||||
|
<text>收货地址</text>
|
||||||
|
</view>
|
||||||
|
<view class="arrowhead" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!--end 列表项 -->
|
||||||
|
|
||||||
|
<view
|
||||||
|
v-if="isAuthInfo"
|
||||||
|
class="log-out"
|
||||||
|
@tap="logout"
|
||||||
|
>
|
||||||
|
<view class="log-out-n">
|
||||||
|
<text>退出登录</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const picDomain = import.meta.env.VITE_APP_RESOURCES_URL
|
||||||
|
|
||||||
|
const isAuthInfo = ref(false)
|
||||||
|
const loginResult = ref('')
|
||||||
|
const orderAmount = ref('')
|
||||||
|
/**
|
||||||
|
* 生命周期函数--监听页面显示
|
||||||
|
*/
|
||||||
|
onShow(() => {
|
||||||
|
loginResult.value = uni.getStorageSync('loginResult')
|
||||||
|
isAuthInfo.value = !!loginResult.value
|
||||||
|
// 加载订单数字
|
||||||
|
if (isAuthInfo.value) {
|
||||||
|
uni.showLoading()
|
||||||
|
http.request({
|
||||||
|
url: '/p/myOrder/orderCount',
|
||||||
|
method: 'GET',
|
||||||
|
data: {}
|
||||||
|
})
|
||||||
|
.then(({ data }) => {
|
||||||
|
uni.hideLoading()
|
||||||
|
orderAmount.value = data
|
||||||
|
})
|
||||||
|
showCollectionCount()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const toDistCenter = () => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: '该功能未开源'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const toCouponCenter = () => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: '该功能未开源'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const toMyCouponPage = () => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: '该功能未开源'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const handleTips = () => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: '该功能未开源'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const toAddressList = () => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/delivery-address/delivery-address'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const toOrderListPage = (e) => {
|
||||||
|
const sts = e.currentTarget.dataset.sts
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/orderList/orderList?sts=' + sts
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const collectionCount = ref(0)
|
||||||
|
/**
|
||||||
|
* 查询所有的收藏量
|
||||||
|
*/
|
||||||
|
const showCollectionCount = () => {
|
||||||
|
uni.showLoading()
|
||||||
|
http.request({
|
||||||
|
url: '/p/user/collection/count',
|
||||||
|
method: 'GET',
|
||||||
|
data: {}
|
||||||
|
})
|
||||||
|
.then(({ data }) => {
|
||||||
|
uni.hideLoading()
|
||||||
|
collectionCount.value = data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 我的收藏跳转
|
||||||
|
*/
|
||||||
|
const myCollectionHandle = () => {
|
||||||
|
let url = '/pages/prod-classify/prod-classify?sts=5'
|
||||||
|
const id = 0
|
||||||
|
const title = '我的收藏商品'
|
||||||
|
if (id) {
|
||||||
|
url += '&tagid=' + id + '&title=' + title
|
||||||
|
}
|
||||||
|
uni.navigateTo({
|
||||||
|
url
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 去登陆
|
||||||
|
*/
|
||||||
|
const toLogin = () => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/accountLogin/accountLogin'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 退出登录
|
||||||
|
*/
|
||||||
|
const logout = () => {
|
||||||
|
http.request({
|
||||||
|
url: '/logOut',
|
||||||
|
method: 'post'
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
util.removeTabBadge()
|
||||||
|
uni.removeStorageSync('loginResult')
|
||||||
|
uni.removeStorageSync('token')
|
||||||
|
uni.showToast({
|
||||||
|
title: '退出成功',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
orderAmount.value = ''
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.switchTab({
|
||||||
|
url: '/pages/index/index'
|
||||||
|
})
|
||||||
|
}, 1000)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@use './user.scss';
|
||||||
|
</style>
|
||||||
|
|||||||
Loading…
Reference in new issue