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>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</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