|
|
@@ -0,0 +1,423 @@
|
|
|
+<template>
|
|
|
+ <view class="flower-grid-popup">
|
|
|
+ <!-- 标题栏 -->
|
|
|
+ <view class="popup-header">
|
|
|
+ <view class="header-content">
|
|
|
+ <text>剩{{customData.stock?parseFloat(customData.stock):0}}扎 单价</text>
|
|
|
+ <input class="price-input" @focus="unitPrice=''" v-model="unitPrice" type="digit" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 商品网格容器 -->
|
|
|
+ <scroll-view class="grid-scroll-container" scroll-y="true" :style="{height: scrollHeight}">
|
|
|
+ <view class="flowers-grid">
|
|
|
+ <view v-for="item in flowerList" :key="item.id" class="flower-grid-item">
|
|
|
+ <!-- 商品图片 -->
|
|
|
+ <view class="flower-img-box">
|
|
|
+ <image :src="item.cover" mode="aspectFill" class="flower-img" lazy-load="false"> </image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 商品信息 -->
|
|
|
+ <view class="flower-info">
|
|
|
+ <text class="flower-name">{{item.name}}</text>
|
|
|
+ <text style="color:#615e5e;width:100%;font-size:12upx;text-align:center;">剩{{item.stock?parseFloat(item.stock):0}}</text>
|
|
|
+ <!-- 数量调整器 -->
|
|
|
+ <view class="quantity-controller">
|
|
|
+ <view class="qty-btn minus-btn" @tap="decreaseQty(item)">
|
|
|
+ <text>−</text>
|
|
|
+ </view>
|
|
|
+ <view class="qty-display">
|
|
|
+ <input
|
|
|
+ v-model.number="item.selectedQty"
|
|
|
+ type="number"
|
|
|
+ class="qty-input"
|
|
|
+ @blur="validateQty(item)">
|
|
|
+ </view>
|
|
|
+ <view class="qty-btn plus-btn" @tap="increaseQty(item)">
|
|
|
+ <text>+</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ <!-- 底部按钮栏 -->
|
|
|
+ <view class="popup-footer">
|
|
|
+ <view class="footer-btn cancel-btn" @tap="confirmClearXj">
|
|
|
+ <text>清除全部</text>
|
|
|
+ </view>
|
|
|
+ <view class="footer-btn cancel-btn" @tap="handleCancel">
|
|
|
+ <text>取消</text>
|
|
|
+ </view>
|
|
|
+ <view class="footer-btn confirm-btn" @tap="handleConfirm">
|
|
|
+ <text>确认</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'selectFlowerGrid',
|
|
|
+ props: {
|
|
|
+ flowerData: { type: Array, default: () => [] },
|
|
|
+ customData:{ type:Object, default:()=>{} }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ flowerList: [],
|
|
|
+ scrollHeight: '600upx',
|
|
|
+ unitPrice:0,
|
|
|
+ xjData: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ flowerData: {
|
|
|
+ handler(newData) {
|
|
|
+ const dataToUse = (newData && newData.length > 0) ? newData : []
|
|
|
+ this.flowerList = dataToUse
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ immediate: true
|
|
|
+ },
|
|
|
+ customData:{
|
|
|
+ handler(newData){
|
|
|
+ this.unitPrice = newData.unitPrice?parseFloat(newData.unitPrice):0
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.calculateScrollHeight()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 计算滚动区域高度
|
|
|
+ calculateScrollHeight() {
|
|
|
+ // 总高度 - 头部高度 - 底部按钮高度
|
|
|
+ this.scrollHeight = 'calc(100vh - 100upx - 90upx)'
|
|
|
+ },
|
|
|
+ // 增加数量
|
|
|
+ increaseQty(item) {
|
|
|
+ this.$util.hitVoice()
|
|
|
+ item.selectedQty = parseInt(item.selectedQty) || 0
|
|
|
+ item.selectedQty++
|
|
|
+ },
|
|
|
+ // 减少数量
|
|
|
+ decreaseQty(item) {
|
|
|
+ this.$util.hitVoice()
|
|
|
+ item.selectedQty = parseInt(item.selectedQty) || 0
|
|
|
+ if (item.selectedQty > 0) {
|
|
|
+ item.selectedQty--
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 验证数量输入
|
|
|
+ validateQty(item) {
|
|
|
+ let qty = parseInt(item.selectedQty) || 0
|
|
|
+ if (qty < 0) {
|
|
|
+ item.selectedQty = 0
|
|
|
+ } else {
|
|
|
+ item.selectedQty = qty
|
|
|
+ }
|
|
|
+ },
|
|
|
+ confirmClearXj() {
|
|
|
+ uni.removeStorageSync("xj")
|
|
|
+ if (!this.$util.isEmpty(this.flowerList)) {
|
|
|
+ this.flowerList.forEach(item => {
|
|
|
+ item.selectedQty = 0
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.$emit('globalClearXj', this.customData)
|
|
|
+ },
|
|
|
+ handleCancel() {
|
|
|
+ this.$emit('globalCloseXjPop')
|
|
|
+ },
|
|
|
+ handleConfirm() {
|
|
|
+ // 收集选中的花材
|
|
|
+ let arr = []
|
|
|
+ this.flowerList.forEach(item => {
|
|
|
+ if (!this.$util.isEmpty(item.selectedQty) && Number(item.selectedQty) > 0) {
|
|
|
+ arr.push({id: item.id, num: item.selectedQty})
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 验证单价
|
|
|
+ if (this.$util.isMoney(this.unitPrice) == false) {
|
|
|
+ this.$msg("请填写单价")
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ // 计算总数量
|
|
|
+ let totalNum = 0
|
|
|
+ arr.forEach((item) => {
|
|
|
+ totalNum = (Number(item.num) + Number(totalNum)).toFixed(0)
|
|
|
+ })
|
|
|
+
|
|
|
+ if (totalNum <= 0) {
|
|
|
+ this.$msg("请填写数量哈")
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ // 验证库存
|
|
|
+ if (totalNum > Number(this.customData.stock)) {
|
|
|
+ this.$msg("数量超过总库存")
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ // 保存到本地存储
|
|
|
+ let saveInfo = uni.getStorageSync("xj")
|
|
|
+ const ptItemId = this.customData.itemId ? this.customData.itemId : 0
|
|
|
+ if (!this.$util.isEmpty(saveInfo)) {
|
|
|
+ let getIndex = -1
|
|
|
+ saveInfo.forEach((colorItem, colorIndex) => {
|
|
|
+ if (colorItem.ptItemId == ptItemId) {
|
|
|
+ getIndex = colorIndex
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (getIndex > -1) {
|
|
|
+ saveInfo[getIndex].list = arr
|
|
|
+ } else {
|
|
|
+ saveInfo.push({ptItemId: ptItemId, list: arr})
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ saveInfo = [{ptItemId: ptItemId, list: arr}]
|
|
|
+ }
|
|
|
+ uni.setStorageSync("xj", saveInfo)
|
|
|
+
|
|
|
+ // 返回确认数据
|
|
|
+ this.xjData = {price: this.unitPrice, stock: totalNum, hasUpdate: 1, cancel: 0}
|
|
|
+ this.$emit('globalConfirmChangeXj',this.customData, this.xjData)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.flower-grid-popup {
|
|
|
+ width: 80vw;
|
|
|
+ height: 98vh;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 4upx 16upx rgba(0, 0, 0, 0.15);
|
|
|
+
|
|
|
+ .popup-header {
|
|
|
+ height: 50upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 0 30upx;
|
|
|
+ border-bottom: 2upx solid #eeeeee;
|
|
|
+ background-color:#c3cfe2;
|
|
|
+
|
|
|
+ .header-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 19upx;
|
|
|
+ color: #333333;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-right: 10upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-input {
|
|
|
+ border: 1upx solid black;
|
|
|
+ width: 90upx;
|
|
|
+ height: 32upx;
|
|
|
+ padding: 0 8upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 3upx;
|
|
|
+ font-size: 16upx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 滚动区域
|
|
|
+ .grid-scroll-container {
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ overflow-y: scroll;
|
|
|
+ scrollbar-width: auto;
|
|
|
+
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ width: 10upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-scrollbar-track {
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-radius: 5upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ background: linear-gradient(180deg, #3385ff 0%, #2568d3 100%);
|
|
|
+ border-radius: 5upx;
|
|
|
+ min-height: 20upx;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: linear-gradient(180deg, #2568d3 0%, #1a4fa1 100%);
|
|
|
+ box-shadow: 0 0 5upx rgba(51, 133, 255, 0.3);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 网格容器 - 缩小卡片 85%，增加边距
|
|
|
+ .flowers-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(116.81upx, 1fr));
|
|
|
+ padding: 25upx 31.25upx;
|
|
|
+ grid-auto-rows: max-content;
|
|
|
+
|
|
|
+ .flower-grid-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #fafafa;
|
|
|
+ padding: 10.63upx;
|
|
|
+ border-radius: 6.38upx;
|
|
|
+ transition: all 0.3s;
|
|
|
+ border: 1upx solid #e8e8e8;
|
|
|
+ margin: 10upx;
|
|
|
+
|
|
|
+ // 图片容器
|
|
|
+ .flower-img-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 0;
|
|
|
+ padding-bottom: 100%;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 7.97upx;
|
|
|
+ border-radius: 5.31upx;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .flower-img {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 商品信息
|
|
|
+ .flower-info {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .flower-name {
|
|
|
+ font-size: 12upx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: black;
|
|
|
+ text-align: center;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ line-clamp: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 数量调整器
|
|
|
+ .quantity-controller {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: linear-gradient(135deg, #f9f9f9 0%, #f0f0f0 100%);
|
|
|
+ border: 2upx solid #e8e8e8;
|
|
|
+ border-radius: 4.25upx;
|
|
|
+ padding: 6upx 2upx;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .qty-btn {
|
|
|
+ margin: 0 3upx;
|
|
|
+ width: 40upx;
|
|
|
+ height: 26upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border: 2upx solid #d0d0d0;
|
|
|
+ border-radius: 3.19upx;
|
|
|
+ transition: all 0.2s;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 10upx;
|
|
|
+ color: #666666;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .qty-display {
|
|
|
+ width: 35.41upx;
|
|
|
+ height: 26.56upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .qty-input {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 13upx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ border: none;
|
|
|
+ background-color: transparent;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 底部按钮栏 - 再缩小 1/2 (总计 33.33%)
|
|
|
+ .popup-footer {
|
|
|
+ height: 45upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 0 14upx;
|
|
|
+ border-top: 2upx solid #eeeeee;
|
|
|
+ background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
|
|
|
+
|
|
|
+ .footer-btn {
|
|
|
+ margin: 0 20upx;
|
|
|
+ flex: 1;
|
|
|
+ height: 34upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 2.22upx;
|
|
|
+ transition: all 0.3s;
|
|
|
+ min-width: 62upx;
|
|
|
+ max-width: 89upx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 16upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.cancel-btn {
|
|
|
+ background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%);
|
|
|
+ color: #666666;
|
|
|
+ border: 2upx solid #d0d0d0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.confirm-btn {
|
|
|
+ background: linear-gradient(135deg, #3385ff 0%, #2568d3 100%);
|
|
|
+ color: #ffffff;
|
|
|
+ box-shadow: 0 4upx 12upx rgba(51, 133, 255, 0.3);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
