初始上传
This commit is contained in:
159
addon/cashier/source/os/components/ns-card/index.js
Executable file
159
addon/cashier/source/os/components/ns-card/index.js
Executable file
@@ -0,0 +1,159 @@
|
||||
import {getCardList} from '@/api/card.js';
|
||||
import {mapGetters} from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'nsCard',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'oncecard'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
goodsType: '',
|
||||
pageSize: 35,
|
||||
onceCardData: {
|
||||
page: 0,
|
||||
total: 1,
|
||||
list: []
|
||||
},
|
||||
timeCardData: {
|
||||
page: 0,
|
||||
total: 1,
|
||||
list: []
|
||||
},
|
||||
commonCardData: {
|
||||
page: 0,
|
||||
total: 1,
|
||||
list: []
|
||||
},
|
||||
itemNum: 3,
|
||||
mediaQueryOb: null,
|
||||
selectCardSkuId: [],
|
||||
isLoad: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.goodsType = this.type;
|
||||
this.init();
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['buyCardGoodsData'])
|
||||
},
|
||||
watch: {
|
||||
buyCardGoodsData: {
|
||||
// 每个属性值发生变化就会调用这个函数
|
||||
handler(newVal, oldVal) {
|
||||
this.selectCardSkuId = [];
|
||||
if(!Object.values(this.buyCardGoodsData).length) return false;
|
||||
Object.values(this.buyCardGoodsData).forEach((item,index)=>{
|
||||
this.selectCardSkuId.push(item.sku_id);
|
||||
});
|
||||
},
|
||||
// 深度监听 属性的变化
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.mediaQueryOb = uni.createMediaQueryObserver(this);
|
||||
|
||||
this.mediaQueryOb.observe({maxWidth: 1500}, matches => {
|
||||
if (matches) this.itemNum = 2;
|
||||
});
|
||||
|
||||
this.mediaQueryOb.observe({minWidth: 1501, maxWidth: 1700}, matches => {
|
||||
if (matches) this.itemNum = 3;
|
||||
});
|
||||
|
||||
this.mediaQueryOb.observe({minWidth: 1701}, matches => {
|
||||
if (matches) this.itemNum = 4;
|
||||
});
|
||||
},
|
||||
destroyed() {
|
||||
this.mediaQueryOb.disconnect();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.isLoad = false;
|
||||
this.onceCardData.page = 0;
|
||||
this.timeCardData.page = 0;
|
||||
this.commonCardData.page = 0;
|
||||
this.getOnceCard();
|
||||
this.getTimeCard();
|
||||
this.getCommonCard();
|
||||
},
|
||||
switchGoodsType(type) {
|
||||
this.goodsType = type;
|
||||
},
|
||||
//卡项相关
|
||||
goodsSelect(data) {
|
||||
if (data.stock <= 0) return;
|
||||
|
||||
let _buyCardGoodsData = this.$util.deepClone(this.buyCardGoodsData);
|
||||
|
||||
if (_buyCardGoodsData['sku_' + data.sku_id]) {
|
||||
_buyCardGoodsData['sku_' + data.sku_id].num += 1;
|
||||
} else {
|
||||
_buyCardGoodsData['sku_' + data.sku_id] = data;
|
||||
_buyCardGoodsData['sku_' + data.sku_id].num = 1;
|
||||
}
|
||||
this.$store.commit('buycard/setGoodsData', _buyCardGoodsData);
|
||||
this.$store.commit('buycard/setActive', 'SelectGoodsAfter');
|
||||
},
|
||||
getOnceCard() {
|
||||
this.isLoad = false;
|
||||
if (this.onceCardData.page + 1 > this.onceCardData.total) return;
|
||||
this.onceCardData.page += 1;
|
||||
getCardList({
|
||||
page: this.onceCardData.page,
|
||||
page_size: this.pageSize,
|
||||
card_type: 'oncecard',
|
||||
goods_state: 1,
|
||||
status: 1,
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.isLoad = true;
|
||||
this.onceCardData.total = res.data.page_count || 1;
|
||||
if (this.onceCardData.page == 1) this.onceCardData.list = [];
|
||||
if (res.data.list.length) this.onceCardData.list = this.onceCardData.list.concat(res.data.list);
|
||||
}
|
||||
});
|
||||
},
|
||||
getTimeCard() {
|
||||
if (this.timeCardData.page + 1 > this.timeCardData.total) return;
|
||||
this.timeCardData.page += 1;
|
||||
getCardList({
|
||||
page: this.timeCardData.page,
|
||||
card_type: 'timecard',
|
||||
goods_state: 1,
|
||||
page_size: this.pageSize,
|
||||
status: 1,
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.timeCardData.total = res.data.page_count || 1;
|
||||
if (this.timeCardData.page == 1) this.timeCardData.list = [];
|
||||
if (res.data.list.length) this.timeCardData.list = this.timeCardData.list.concat(
|
||||
res.data.list);
|
||||
}
|
||||
});
|
||||
},
|
||||
getCommonCard() {
|
||||
if (this.commonCardData.page + 1 > this.commonCardData.total) return;
|
||||
this.commonCardData.page += 1;
|
||||
getCardList({
|
||||
page: this.commonCardData.page,
|
||||
card_type: 'commoncard',
|
||||
goods_state: 1,
|
||||
page_size: this.pageSize,
|
||||
status: 1,
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.commonCardData.total = res.data.page_count || 1;
|
||||
if (this.commonCardData.page == 1) this.commonCardData.list = [];
|
||||
if (res.data.list.length) this.commonCardData.list = this.commonCardData.list.concat(res.data.list);
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
228
addon/cashier/source/os/components/ns-card/index.scss
Executable file
228
addon/cashier/source/os/components/ns-card/index.scss
Executable file
@@ -0,0 +1,228 @@
|
||||
.container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header-action {
|
||||
padding: 0.22rem 0.24rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
border-radius: 0.04rem;
|
||||
|
||||
.header-action-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 0.44rem;
|
||||
background-color: var(--primary-color-light-9);
|
||||
border-radius: 0.22rem;
|
||||
|
||||
view {
|
||||
min-width: 1.02rem;
|
||||
height: 0.44rem;
|
||||
line-height: 0.44rem;
|
||||
text-align: center;
|
||||
font-size: 0.14rem;
|
||||
border-left-width: 0;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
border-radius: 0.22rem;
|
||||
color: $primary-color;
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
background-color: $primary-color;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-left-width: 0.01rem;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: .2rem;
|
||||
box-sizing: border-box;
|
||||
height: calc(100% - 1.08rem);
|
||||
transform: rotate(0);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.list-wrap {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.table-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.table-item {
|
||||
border: 0.01rem solid #fff;
|
||||
box-sizing: border-box;
|
||||
padding: 0.1rem 0.18rem 0.1rem 0.1rem;
|
||||
background-color: #fff;
|
||||
margin-bottom: 0.12rem;
|
||||
margin-right: 0.12rem;
|
||||
cursor: pointer;
|
||||
transition: border-color, background-color 0.3s;
|
||||
position: relative;
|
||||
border-radius: 0.04rem;
|
||||
&.item-mum-2{
|
||||
width: calc((100% - 0.25rem) / 2);
|
||||
}
|
||||
&.item-mum-3{
|
||||
width: calc((100% - 0.37rem) / 3);
|
||||
}
|
||||
&.item-mum-4{
|
||||
width: calc((100% - 0.49rem) / 4);
|
||||
}
|
||||
.item-other {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
|
||||
.item-img {
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
-ms-flex-negative: 0;
|
||||
-webkit-flex-shrink: 0;
|
||||
flex-shrink: 0;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
border-radius: 0.03rem;
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
height: 0.4rem;
|
||||
line-height: 0.2rem;
|
||||
max-width: 1.58rem;
|
||||
margin-bottom: 0.05rem;
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.no-stock {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
cursor: not-allowed;
|
||||
image{
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.item-info {
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
.item-time {
|
||||
font-size: 0.12rem;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.item-money {
|
||||
font-size: 0.14rem;
|
||||
color: $primary-color;
|
||||
height: 0.19rem;
|
||||
line-height: 0.19rem;
|
||||
}
|
||||
|
||||
.item-stock {
|
||||
height: 0.17rem;
|
||||
font-size: 0.12rem;
|
||||
color: #808695;
|
||||
line-height: 0.17rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.table-item.yes-stock {
|
||||
&:hover {
|
||||
background-color: var(--primary-color-light-9);
|
||||
border-color: $primary-color;
|
||||
}
|
||||
|
||||
&.focus,
|
||||
&:focus {
|
||||
background-color: var(--primary-color-light-9);
|
||||
border-color: $primary-color;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: $primary-color;
|
||||
background-color: $primary-color;
|
||||
color: #fff;
|
||||
|
||||
.item-time,
|
||||
.item-money,
|
||||
.item-stock {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding-top: 1.2rem;
|
||||
|
||||
image {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.tips {
|
||||
color: #999;
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .uni-scroll-view {
|
||||
&::-webkit-scrollbar {
|
||||
width: 0.06rem;
|
||||
height: 0.06rem;
|
||||
background-color: rgba($color: #000000, $alpha: 0);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 0.06rem;
|
||||
box-shadow: inset 0 0 0.06rem rgba(45, 43, 43, 0.45);
|
||||
background-color: #ddd;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover::-webkit-scrollbar-thumb {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
111
addon/cashier/source/os/components/ns-card/ns-card.vue
Executable file
111
addon/cashier/source/os/components/ns-card/ns-card.vue
Executable file
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="header-action common-wrap">
|
||||
<view class="header-action-left">
|
||||
<view :class="{ active: goodsType == 'oncecard' }" @click="switchGoodsType('oncecard')">限次卡</view>
|
||||
<view :class="{ active: goodsType == 'timecard' }" @click="switchGoodsType('timecard')">限时卡</view>
|
||||
<view :class="{ active: goodsType == 'commoncard' }" @click="switchGoodsType('commoncard')">通用卡</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content">
|
||||
<scroll-view scroll-y="true" class="list-wrap" @scrolltolower="getOncecard()" v-show="goodsType == 'oncecard'">
|
||||
<view class="table-list" v-show="onceCardData.list.length > 0">
|
||||
<view class="table-item" :class="{'yes-stock': item.stock>0, 'item-mum-2': itemNum == 2, 'item-mum-3': itemNum == 3, 'item-mum-4': itemNum == 4, 'active': selectCardSkuId.indexOf(item.sku_id) > -1 }" v-for="(item, index) in onceCardData.list" :key="index" @click="goodsSelect(item)">
|
||||
<view class="item-info">
|
||||
<view class="item-img">
|
||||
<image v-if="item.goods_image == '@/static/goods/goods.png'" src="@/static/goods/goods.png" mode="widthFix"/>
|
||||
<image v-else :src="$util.img(item.goods_image.split(',')[0], { size: 'small' })" @error="item.goods_image = '@/static/goods/goods.png'" mode="widthFix"/>
|
||||
</view>
|
||||
<view class="item-other flex-1">
|
||||
<view class="item-name">{{ item.goods_name }}</view>
|
||||
<view class="w-full self-end">
|
||||
<view class="item-money">
|
||||
<text class="util">￥</text>
|
||||
{{ item.discount_price | moneyFormat }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="no-stock" v-if="item.stock <= 0">
|
||||
<image src="@/static/stock/stock_empty.png" mode="heightFix"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="empty" v-if="isLoad && !onceCardData.list.length">
|
||||
<image src="@/static/goods/goods_empty.png" mode="widthFix"/>
|
||||
<view class="tips">暂无卡项</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<scroll-view scroll-y="true" class="list-wrap" @scrolltolower="getTimecard()" v-show="goodsType == 'timecard'">
|
||||
<view class="table-list" v-show="timeCardData.list.length > 0">
|
||||
<view class="table-item" :class="{'yes-stock': item.stock>0, 'item-mum-2': itemNum == 2, 'item-mum-3': itemNum == 3, 'item-mum-4': itemNum == 4,}" v-for="(item, index) in timeCardData.list" :key="index" @click="goodsSelect(item)">
|
||||
<view class="item-info">
|
||||
<view class="item-img">
|
||||
<image v-if="item.goods_image == '@/static/goods/goods.png'" src="@/static/goods/goods.png" mode="widthFix"/>
|
||||
<image v-else :src="$util.img(item.goods_image.split(',')[0], { size: 'small' })" @error="item.goods_image = '@/static/goods/goods.png'" mode="widthFix"/>
|
||||
</view>
|
||||
<view class="item-other flex-1">
|
||||
<view class="item-name">{{ item.goods_name }}</view>
|
||||
<view class="w-full self-end">
|
||||
<view class="item-money">
|
||||
<text class="util">￥</text>
|
||||
{{ item.discount_price | moneyFormat }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="no-stock" v-if="item.stock <= 0">
|
||||
<image src="@/static/stock/stock_empty.png" mode="heightFix"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="empty" v-if="!timeCardData.list.length">
|
||||
<image src="@/static/goods/goods_empty.png" mode="widthFix"/>
|
||||
<view class="tips">暂无卡项</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<scroll-view scroll-y="true" class="list-wrap" @scrolltolower="getCommoncard()" v-show="goodsType == 'commoncard'">
|
||||
<view class="table-list" v-show="commonCardData.list.length > 0">
|
||||
<view class="table-item" :class="{'yes-stock': item.stock>0, 'item-mum-2': itemNum == 2, 'item-mum-3': itemNum == 3, 'item-mum-4': itemNum == 4,}" v-for="(item, index) in commonCardData.list" :key="index" @click="goodsSelect(item)">
|
||||
<view class="item-info">
|
||||
<view class="item-img">
|
||||
<image v-if="item.goods_image == '@/static/goods/goods.png'" src="@/static/goods/goods.png" mode="widthFix"/>
|
||||
<image v-else :src="$util.img(item.goods_image.split(',')[0], { size: 'small' })" @error="item.goods_image = '@/static/goods/goods.png'" mode="widthFix"/>
|
||||
</view>
|
||||
<view class="item-other flex-1">
|
||||
<view class="item-name">{{ item.goods_name }}</view>
|
||||
<view class="w-full self-end">
|
||||
<view class="item-money">
|
||||
<text class="util">￥</text>
|
||||
{{ item.discount_price | moneyFormat }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="no-stock" v-if="item.stock <= 0">
|
||||
<image src="@/static/stock/stock_empty.png" mode="heightFix"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="empty" v-if="!commonCardData.list.length">
|
||||
<image src="@/static/goods/goods_empty.png" mode="widthFix"/>
|
||||
<view class="tips">暂无卡项</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import index from './index.js';
|
||||
export default {
|
||||
mixins: [index]
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user