wangxiaowei/wanjiashangchao-user
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化万家商超用户端仓库

Browse Source
This commit is contained in:
wangxiaowei
2025-04-30 14:04:34 +08:00
commit 022c640d89
425 changed files with 160005 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

462
components/benben-shop-cart/benben-shop-cart.vue Normal file
View File

@ -0,0 +1,462 @@
<template>
<view class="cart-page">
<!-- 数据加载loadding -->
<template v-if="!isLogin || cartListArr.length == 0">
<view class="nologin flex flex-direction justify-center align-center padding-tb text-999 fs28 bg-white" style="padding-bottom: 64rpx">
<view>
<image class="width-440 height-220" src="@/static/empty/cart.png" mode="widthFix"></image>
</view>
<view class="margin-top-xs text-sm text-999">您的购物车还没有商品，快去挑选吧</view>
<view class="nologin-btn text-df margin-top text-center" @tap.stop="handleSubmit('navToLogin')" v-if="!isLogin">去登录</view>
<view class="nologin-btn text-df margin-top text-center" @tap.stop="handleSubmit('navToHome')" v-if="isLogin && cartListArr.length == 0">
去挑选好货
</view>
</view>
</template>
<template v-if="isLogin && cartListArr.length != 0">
<view class="page-list">
<block v-for="(item, index) in cartListArr" :key="index">
<view class="bg-white flex align-center padding">
<view class="margin-right-sm" @tap="check(item, index)">
<text v-if="isEditor" :class="{ checked_icon: true, checked_active: item.delChecked }" class="fu-iconfont2">
{{ item.delChecked ? '' : '' }}
</text>
<text v-else :class="{ checked_icon: true, checked_active: item.checked }" class="fu-iconfont2">
{{ item.checked ? '' : '' }}
</text>
</view>
<view class="goods-info flex align-center flex-sub" style="min-width: 1px">
<view class="wrap-image fu-block-180 radius margin-right-sm" @tap="toDetail(item, index)">
<view class="box-kong text-df text-white" v-if="item.is_valid == 1">
<view class="box-kong-item">
<image src="@/static/cart/sellOut.png" mode="widthFix" />
</view>
</view>
<view class="box-kong text-df text-white" v-if="item.is_valid == 2">
<view class="box-kong-item">
<image src="@/static/cart/shelf.png" mode="widthFix" />
</view>
</view>
<image class="goods_thumb" :src="item.goods_thumb" mode="aspectFill"></image>
</view>
<view class="goods-desc flex-sub" style="min-width: 1px">
<view>
<view class="text-333 text-cut fu-fs28">{{ item.goods_name }}</view>
<view class="text-sm text-999 sku_name" v-if="item.sku_name" @tap.stop="openPopup(item)">
<view class="text-cut width-250">
<text>{{ item.sku_name }}</text>
</view>
<view style="flex-shrink: 0">
<text style="margin-right: 16rpx">选规格</text>
<text class="cuIcon-unfold lg text-gray"></text>
</view>
</view>
</view>
<view class="desc-number flex justify-between align-center">
<view class="text-lg text-prices">
<text class="text-price"></text>
<text>{{ item.shop_price }}</text>
</view>
<view class="number">
<uni-number-box
:min="1"
:disabled="item.is_valid != 0"
:max="Number(item.stock)"
:value="item.num"
@change="numberChange($event, index)"
></uni-number-box>
</view>
</view>
</view>
</view>
</view>
</block>
</view>
<view class="action-bar cu-bar bg-white flex justify-between">
<view class="flex flex-sub align-center padding-lr justify-between" style="max-width: calc(100% - 230rpx)">
<view class="flex justify-between align-center" @tap="checkAll">
<text v-if="isEditor" :class="{ checked_icon: true, checked_active: delAllChecked }" class="fu-iconfont2">
{{ delAllChecked ? '' : '' }}
</text>
<text v-else :class="{ checked_icon: true, checked_active: allChecked }" class="fu-iconfont2">
{{ allChecked ? '' : '' }}
</text>
<text class="margin-left-sm text-df text-333">全选</text>
</view>
<view class="margin-left-sm text-df text-666" v-if="!isEditor">
<view>
合计:
<text class="text-price text-prices text-lg">{{ totalPrice }}</text>
</view>
</view>
</view>
<button v-if="!isEditor" class="cu-btn btn-settlement bg-theme text-white lg" @click="createOrder">去结算({{ totalNumber }})</button>
<button v-if="isEditor" class="cu-btn bg-theme text-white margin-right-sm" @click="delCart(2)">移入收藏</button>
<button v-if="isEditor" class="cu-btn btn-gray margin-right-sm" @click="delCart(1)">删除</button>
</view>
</template>
</view>
</template>
<script>
import { LOGIN_PAGE_URL } from '@/common/config.js'
export default {
name: 'benben-shop-cart',
props: {
// 购物车列表
cartList: {
type: [Array, Object],
default: () => [],
},
//是否编辑状态 // 管理 or 完成
isEditor: {
type: Boolean,
default: false,
},
},
data() {
return {
setTimeoutFn: null,
cartListArr: [], // 购物车列表
}
},
computed: {
isLogin() {
return this.$store.state.token == '' ? false : true
},
// 选择的商品总价
totalPrice() {
let list = this.cartListArr
let total = 0
list.forEach((item) => {
if (item.checked == true) {
let _price
_price = item.shop_price
total += Number(_price) * Number(item.num)
}
})
return Number(total.toFixed(2))
},
// 选择的商品数量
totalNumber() {
let list = this.cartListArr
let total = 0
list.forEach((item) => {
if (item.checked == true) {
total += Number(item.num)
}
})
return total
},
// 购物车内的商品数量
allNumber() {
let list = this.cartListArr
let total = 0
list.forEach((item) => {
total += Number(item.num)
})
return total
},
// 管理模式全选状态
delAllChecked() {
let list = this.cartListArr
let bool = true
list.forEach((item) => {
// if(item.stock == 0) return ;
if (!item.delChecked) {
bool = false
}
})
return bool
},
// 正常模式全选状态
allChecked() {
let bool = true
this.cartListArr.map((item) => {
if (item.stock == 0) return
if (item.is_valid != 0) return
if (!item.checked) {
bool = false
}
})
return bool
},
},
watch: {
cartList: {
handler(value) {
let list = []
let checkedArr = this.cartListArr.filter((item) => item.checked)
let delCheckedArr = this.cartListArr.filter((item) => item.delChecked)
list = value.map((item) => {
let obj = {
...item,
checked: false,
delChecked: false,
}
let delChecked = delCheckedArr.find((val) => val.aid == item.aid)
let checked = checkedArr.find((val) => val.aid == item.aid)
if (delChecked) {
obj.delChecked = true
}
if (checked && obj) {
obj.checked = true
}
return obj
})
this.cartListArr = list
},
deep: true,
immediate: true,
},
isEditor: {
handler(value) {
if (value) {
this.cartListArr.forEach((item) => {
item.delChecked = true
})
}
},
deep: true,
immediate: true,
},
},
methods: {
// 打开选择规格弹窗
openPopup(item) {
this.$emit('update:cart-id', item.aid)
this.$emit('update:sku-id', item.sku_id)
this.$emit('update:cart-num', item.num)
this.$emit('update:goods-id', item.goods_id)
this.$emit('changeSku')
},
toDetail(item) {
if (item.is_valid == 2) return
this.$emit('update:goods-id', item.goods_id)
this.$emit('toGoods')
},
// 点击去登录按钮或去首页按钮
handleSubmit(type) {
this.$emit(type)
},
// 商品选中状态处理
check(item, i) {
if (this.isEditor) {
this.$set(item, 'delChecked', !item.delChecked)
} else {
if (item.is_valid == 2) return this.$message.info('该商品已下架')
if (item.is_valid == 1) return this.$message.info('该商品已售完,正在采购中')
if (item.stock == 0) return this.$message.info('该商品已售完,正在采购中')
this.$set(item, 'checked', !item.checked)
}
},
//全选|取消全选
checkAll() {
if (this.isEditor) {
const bool = !this.delAllChecked
this.cartListArr.forEach((item) => {
item.delChecked = bool
})
} else {
const bool = !this.allChecked
this.cartListArr.forEach((item) => {
if (item.is_valid == 0 && item.stock != 0) {
item.checked = bool
}
})
}
},
//数量改变
numberChange(e, index) {
// 父级组件此处会走两遍,原因是e第一遍是String类型, 第二遍是Number类型, uni-number-box组件内部watch判定两遍的值不相同,因此进行了两次更新
this.setTimeoutFn && clearTimeout(this.setTimeoutFn)
this.setTimeoutFn = setTimeout(() => {
let list = this.cartListArr
if (e != list[index].num) {
if (list[index].stock < e) {
e = list[index].stock
}
this.$set(list[index], 'num', e)
this.$emit('update:cart-id', list[index].aid)
this.$emit('update:sku-id', list[index].sku_id)
this.$emit('update:cart-num', e)
this.$emit('numberChange')
}
}, 500)
},
/**
* @method 移入收藏卡
* @param {Number} type 1: 删除, 2: 移入收藏
*/
delCart(type) {
const list = this.cartListArr
let ids = []
list.forEach((item) => {
if (item.delChecked) {
ids.push(item.aid)
}
})
if (ids.length == 0) return this.$message.info(type == 1 ? '请选择要删除的商品' : '请选择要移动的商品')
this.$util.showModal({
title: '提示',
content: type == 1 ? '确认删除吗?' : '确认移入收藏夹吗?',
success: (res) => {
if (res.confirm) {
if (type == 1) {
this.$emit('update:cart-ids', ids.join(','))
this.$emit('delCart')
} else {
this.$emit('update:cart-ids', ids.join(','))
this.$emit('transCartGoods')
}
}
},
})
},
// 去结算
createOrder() {
const list = this.cartListArr
let ids = []
list.forEach((item) => {
if (item.checked) {
ids.push(item.aid)
}
})
const cart_ids = ids.join(',')
if (cart_ids == '') return this.$message.info('请选择商品')
this.$emit('update:cart-ids', ids.join(','))
this.$emit('createOrder')
},
},
}
</script>
<style lang="scss" scoped>
.checked_icon {
color: #999;
}
.checked_active {
color: var(--benbenFontColor5);
}
.goods_thumb {
width: 180rpx;
height: 180rpx;
border-radius: 16rpx;
}
.cart-page {
.nologin {
.nologin-btn {
width: 280rpx;
height: 64rpx;
line-height: 64rpx;
background: $bgtheme;
border-radius: 36rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #ffffff;
}
}
.tool-box {
position: sticky;
z-index: 999;
background: #f8f8f8;
.edit-btn {
width: 144rpx;
height: 56rpx;
line-height: 56rpx;
border-radius: 56rpx;
border: 2rpx solid rgba(191, 191, 191, 1);
background: #fff;
&.btn-gray {
width: 200rpx;
height: 72rpx;
line-height: 72rpx;
font-size: 28px;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
background: #f6f6f6;
border-radius: 44rpx;
}
}
}
.action-bar {
position: fixed;
bottom: var(--window-bottom);
width: 100%;
z-index: 99;
}
}
.fu-block-36 {
width: 36rpx;
height: 36rpx;
}
.fu-block-180 {
width: 180rpx;
height: 180rpx;
}
.fu-fs28 {
font-size: 28rpx;
}
.fu-fs32 {
font-size: 32rpx;
}
.page-list {
.goods-info {
.goods-desc {
width: 406rpx;
// flex: 1;
min-width: 1px;
min-height: 180rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.sku_name {
display: flex;
justify-content: space-between;
background-color: #f8f8f8;
height: 48rpx;
line-height: 48rpx;
padding: 0 16rpx;
box-sizing: border-box;
margin: 8rpx 0;
border-radius: 8rpx;
}
}
.wrap-image {
position: relative;
.box-kong {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.4);
z-index: 98;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 148rpx;
height: 148rpx;
.box-kong-item {
width: 96rpx;
height: 96rpx;
}
}
}
}
}
</style>