768 lines
16 KiB
Vue
768 lines
16 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="header-operation">
|
|
<view class="header-operation-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 class="header-operation-right"></view>
|
|
</view>
|
|
<view class="content">
|
|
<scroll-view scroll-y="true" class="list-wrap" @scrolltolower="getOncecard()" v-if="goodsType == 'oncecard'">
|
|
<view class="table-list" v-show="oncecardData.list.length > 0">
|
|
<view class="table-item" :class="'item-mum-' + itemNum" v-for="(item, index) in oncecardData.list" :key="index" @click="goodsSelect(item)">
|
|
<view class="item-img">
|
|
<image
|
|
:src="
|
|
item.goods_image == 'public/uniapp/default_img/goods.png'
|
|
? $util.img('public/uniapp/default_img/goods.png')
|
|
: $util.img(item.goods_image.split(',')[0], { size: 'small' })
|
|
"
|
|
@error="item.goods_image = 'public/uniapp/default_img/goods.png'"
|
|
></image>
|
|
</view>
|
|
<view class="item-info">
|
|
<view class="item-name">{{ item.goods_name }}</view>
|
|
<view class="item-rights"></view>
|
|
<view class="item-money">
|
|
<text class="util">￥</text>
|
|
{{ item.discount_price | moneyFormat }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="empty" v-if="!oncecardData.list.length">
|
|
<image :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix"></image>
|
|
<view class="tips">暂无卡项</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<scroll-view scroll-y="true" class="list-wrap" @scrolltolower="getTimecard()" v-if="goodsType == 'timecard'">
|
|
<view class="table-list" v-show="timecardData.list.length > 0">
|
|
<view class="table-item" :class="'item-mum-' + itemNum" v-for="(item, index) in timecardData.list" :key="index" @click="goodsSelect(item)">
|
|
<view class="item-img">
|
|
<image
|
|
:src="
|
|
item.goods_image == 'public/uniapp/default_img/goods.png'
|
|
? $util.img('public/uniapp/default_img/goods.png')
|
|
: $util.img(item.goods_image.split(',')[0], { size: 'small' })
|
|
"
|
|
@error="item.goods_image = 'public/uniapp/default_img/goods.png'"
|
|
></image>
|
|
</view>
|
|
<view class="item-info">
|
|
<view class="item-name">{{ item.goods_name }}</view>
|
|
<view class="item-rights"></view>
|
|
<view class="item-money">
|
|
<text class="util">￥</text>
|
|
{{ item.discount_price | moneyFormat }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="empty" v-if="!timecardData.list.length">
|
|
<image :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix"></image>
|
|
<view class="tips">暂无卡项</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<scroll-view scroll-y="true" class="list-wrap" @scrolltolower="getCommoncard()" v-if="goodsType == 'commoncard'">
|
|
<view class="table-list" v-show="commoncardData.list.length > 0">
|
|
<view class="table-item" :class="'item-mum-' + itemNum" v-for="(item, index) in commoncardData.list" :key="index" @click="goodsSelect(item)">
|
|
<view class="item-img">
|
|
<image
|
|
:src="
|
|
item.goods_image == 'public/uniapp/default_img/goods.png'
|
|
? $util.img('public/uniapp/default_img/goods.png')
|
|
: $util.img(item.goods_image.split(',')[0], { size: 'small' })
|
|
"
|
|
@error="item.goods_image = 'public/uniapp/default_img/goods.png'"
|
|
></image>
|
|
</view>
|
|
<view class="item-info">
|
|
<view class="item-name">{{ item.goods_name }}</view>
|
|
<view class="item-rights"></view>
|
|
<view class="item-money">
|
|
<text class="util">￥</text>
|
|
{{ item.discount_price | moneyFormat }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="empty" v-if="!commoncardData.list.length">
|
|
<image :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix"></image>
|
|
<view class="tips">暂无卡项</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ncCard',
|
|
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: []
|
|
},
|
|
searchText: '',
|
|
itemNum: 3,
|
|
mediaQueryOb: null
|
|
};
|
|
},
|
|
created() {
|
|
this.goodsType = this.type;
|
|
this.getOncecard();
|
|
this.getTimecard();
|
|
this.getCommoncard();
|
|
},
|
|
mounted() {
|
|
this.mediaQueryOb = uni.createMediaQueryObserver(this);
|
|
|
|
this.mediaQueryOb.observe(
|
|
{
|
|
maxWidth: 1300
|
|
},
|
|
matches => {
|
|
if (matches) this.itemNum = 2;
|
|
}
|
|
);
|
|
|
|
this.mediaQueryOb.observe(
|
|
{
|
|
minWidth: 1301,
|
|
maxWidth: 1900
|
|
},
|
|
matches => {
|
|
if (matches) this.itemNum = 3;
|
|
}
|
|
);
|
|
|
|
this.mediaQueryOb.observe(
|
|
{
|
|
minWidth: 1901
|
|
},
|
|
matches => {
|
|
if (matches) this.itemNum = 4;
|
|
}
|
|
);
|
|
},
|
|
methods: {
|
|
switchGoodsType(type) {
|
|
this.goodsType = type;
|
|
},
|
|
|
|
//卡项相关
|
|
goodsSelect(data) {
|
|
this.$emit('select', data);
|
|
},
|
|
|
|
search() {
|
|
if (this.searchText == '') return;
|
|
this.oncecardData.page = 0;
|
|
this.getOncecard();
|
|
},
|
|
getOncecard() {
|
|
if (this.oncecardData.page + 1 > this.oncecardData.total) return;
|
|
this.oncecardData.page += 1;
|
|
this.$api.sendRequest({
|
|
url: '/cashier/storeapi/card/page',
|
|
data: {
|
|
page: this.oncecardData.page,
|
|
search_text: this.searchText,
|
|
page_size: this.pageSize,
|
|
card_type: 'oncecard',
|
|
goods_state: 1,
|
|
status: 1
|
|
},
|
|
success: res => {
|
|
if (res.code == 0) {
|
|
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;
|
|
this.$api.sendRequest({
|
|
url: '/cashier/storeapi/card/page',
|
|
data: {
|
|
page: this.timecardData.page,
|
|
search_text: this.searchText,
|
|
card_type: 'timecard',
|
|
goods_state: 1,
|
|
page_size: this.pageSize
|
|
},
|
|
success: 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;
|
|
this.$api.sendRequest({
|
|
url: '/cashier/storeapi/card/page',
|
|
data: {
|
|
page: this.commoncardData.page,
|
|
search_text: this.searchText,
|
|
card_type: 'commoncard',
|
|
goods_state: 1,
|
|
page_size: this.pageSize
|
|
},
|
|
success: 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);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
destroyed() {
|
|
this.mediaQueryOb.disconnect();
|
|
}
|
|
},
|
|
watch: {
|
|
serviceCategoryId: function(nval) {
|
|
this.serviceData.page = 0;
|
|
this.$refs.loading.show();
|
|
},
|
|
goodsCategoryId: function(nval) {
|
|
this.goodsData.page = 0;
|
|
this.$refs.goodsLoading.show();
|
|
this.getGoods();
|
|
},
|
|
type: function() {
|
|
this.searchText = '';
|
|
}
|
|
},
|
|
computed: {
|
|
goodsSpec() {
|
|
if (this.allsku && this.skuinfo) {
|
|
return this.allsku['sku_id_' + this.skuinfo.sku_id].goods_spec_format;
|
|
}
|
|
return [];
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.container {
|
|
height: 100%;
|
|
}
|
|
|
|
.header-operation {
|
|
padding: 0.2rem 0;
|
|
border-bottom: 0.01rem solid #e6e6e6;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.header-operation-left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
view {
|
|
width: 1rem;
|
|
height: 0.35rem;
|
|
line-height: 0.35rem;
|
|
text-align: center;
|
|
font-size: 0.14rem;
|
|
border: 0.01rem solid #e6e6e6;
|
|
border-left-width: 0;
|
|
transition: all 0.3s;
|
|
cursor: pointer;
|
|
|
|
&:hover,
|
|
&.active {
|
|
border-color: $primary-color;
|
|
color: $primary-color;
|
|
background-color: rgba($color: $primary-color, $alpha: 0.1);
|
|
box-shadow: -0.01rem 0 0 0 $primary-color;
|
|
}
|
|
|
|
&:first-child {
|
|
border-left-width: 0.01rem;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
.header-operation-right {
|
|
display: flex;
|
|
align-items: center;
|
|
input {
|
|
background: #ffffff;
|
|
border: 0.01rem solid #e6e6e6;
|
|
border-radius: 0.02rem;
|
|
height: 0.36rem;
|
|
padding: 0 0.15rem;
|
|
font-size: 0.14rem;
|
|
}
|
|
.search-btn {
|
|
width: 0.36rem;
|
|
height: 0.36rem;
|
|
background: #ffffff;
|
|
border: 0.01rem solid #e6e6e6;
|
|
border-radius: 0.02rem;
|
|
border-left: 0;
|
|
text-align: center;
|
|
line-height: 0.36rem;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
box-sizing: border-box;
|
|
padding: 0.15rem 0;
|
|
height: calc(100% - 0.78rem);
|
|
transform: rotate(0);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.type-switch {
|
|
width: 100%;
|
|
font-size: 0.14rem;
|
|
margin-bottom: 0.15rem;
|
|
white-space: nowrap;
|
|
|
|
.switch-item {
|
|
padding: 0.1rem 0.2rem;
|
|
color: #303133;
|
|
font-size: 0.14rem;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
}
|
|
.switch-item.active {
|
|
background-color: rgba(133, 88, 250, 0.1);
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
|
|
.list-wrap {
|
|
flex: 1;
|
|
height: 0;
|
|
}
|
|
|
|
.table-list {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
.table-item {
|
|
border: 0.01rem solid #e6e6e6;
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 2rem;
|
|
padding: 0.1rem;
|
|
box-sizing: border-box;
|
|
margin-right: 0.1rem;
|
|
margin-bottom: 0.1rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
position: relative;
|
|
|
|
&.item-mum-2 {
|
|
width: calc((100% - 0.1rem) / 2);
|
|
&:nth-child(2n + 2) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
&.item-mum-3 {
|
|
width: calc((100% - 0.2rem) / 3);
|
|
&:nth-child(3n + 3) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
&.item-mum-4 {
|
|
width: calc((100% - 0.3rem) / 4);
|
|
&:nth-child(4n + 4) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: #eee;
|
|
}
|
|
|
|
.item-img {
|
|
width: 0.7rem;
|
|
height: 0.7rem;
|
|
min-width: 0.7rem;
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.item-info {
|
|
margin-left: 0.1rem;
|
|
cursor: pointer;
|
|
flex: 1;
|
|
.item-name {
|
|
word-break: break-all;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
height: 0.4rem;
|
|
}
|
|
.item-time {
|
|
font-size: 0.12rem;
|
|
color: #909399;
|
|
}
|
|
.item-money {
|
|
font-size: 0.14rem;
|
|
color: #fe2278;
|
|
line-height: 1;
|
|
margin-top: 0.05rem;
|
|
|
|
.util {
|
|
font-size: 0.12rem;
|
|
}
|
|
}
|
|
|
|
.item-rights {
|
|
font-size: 0.12rem;
|
|
color: #909399;
|
|
|
|
.iconfont {
|
|
margin-left: 0.05rem;
|
|
}
|
|
}
|
|
|
|
.rights-wrap {
|
|
width: 1rem;
|
|
padding: 0.1rem;
|
|
margin-top: 0.15rem;
|
|
background-color: #fff;
|
|
border: 0.01rem solid #ebeef5;
|
|
border-radius: 0.04rem;
|
|
box-shadow: 0 0.01rem 0.12rem 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
|
|
.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-card {
|
|
border: 0.01rem solid #e6e6e6;
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 2.5rem;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
margin-right: 0.1rem;
|
|
margin-bottom: 0.1rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
position: relative;
|
|
flex-direction: column;
|
|
border-radius: 0.03rem;
|
|
overflow: hidden;
|
|
.item-top {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 0.9rem;
|
|
background-size: 100% 100%;
|
|
padding: 0.1rem;
|
|
box-sizing: border-box;
|
|
color: #ffffff;
|
|
justify-content: space-between;
|
|
.item-title {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
.item-rights {
|
|
border: 0.01rem solid #fff;
|
|
border-radius: 0.03rem;
|
|
font-size: 0.12rem;
|
|
padding: 0.01rem 0.03rem;
|
|
}
|
|
.item-name {
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
.item-time {
|
|
text-align: right;
|
|
}
|
|
}
|
|
.item-bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding: 0.04rem 0.1rem;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
.item-money {
|
|
color: #fe3c83;
|
|
}
|
|
.item-btn {
|
|
font-size: 0.12rem;
|
|
.iconfont {
|
|
margin-left: 0.03rem;
|
|
font-size: 0.12rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sku-wrap {
|
|
width: 6rem;
|
|
background-color: #fff;
|
|
border-radius: 0.04rem;
|
|
box-shadow: 0 0.01rem 0.12rem 0 rgba(0, 0, 0, 0.1);
|
|
|
|
.header,
|
|
.footer {
|
|
height: 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-bottom: 0.01rem solid #e6e6e6;
|
|
position: relative;
|
|
|
|
.title {
|
|
font-size: 0.16rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.iconfont {
|
|
line-height: 1;
|
|
position: absolute;
|
|
right: 0.15rem;
|
|
font-size: 0.2rem;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.body {
|
|
padding: 0.15rem 0.15rem 0.25rem 0.15rem;
|
|
|
|
scroll-view {
|
|
max-height: 2rem;
|
|
}
|
|
|
|
.item-card {
|
|
border: 0.01rem solid #e6e6e6;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 2.5rem;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
margin-right: 0.1rem;
|
|
margin-bottom: 0.1rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
position: relative;
|
|
flex-direction: column;
|
|
border-radius: 0.03rem;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
.item-top {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 0.9rem;
|
|
background-size: 100% 100%;
|
|
padding: 0.1rem;
|
|
box-sizing: border-box;
|
|
color: #ffffff;
|
|
justify-content: space-between;
|
|
.item-title {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
.item-rights {
|
|
border: 0.01rem solid #fff;
|
|
border-radius: 0.03rem;
|
|
font-size: 0.12rem;
|
|
padding: 0.01rem 0.03rem;
|
|
}
|
|
.item-name {
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
.item-time {
|
|
text-align: right;
|
|
}
|
|
}
|
|
.item-bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding: 0.04rem 0.1rem;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
.item-money {
|
|
color: #fe3c83;
|
|
}
|
|
.item-btn {
|
|
font-size: 0.12rem;
|
|
.iconfont {
|
|
margin-left: 0.03rem;
|
|
font-size: 0.12rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.spec {
|
|
line-height: 0.35rem;
|
|
font-weight: bold;
|
|
margin-top: 0.1rem;
|
|
}
|
|
|
|
.spec-value {
|
|
.value-item {
|
|
display: inline-block;
|
|
height: 0.3rem;
|
|
line-height: 0.3rem;
|
|
background-color: #fff;
|
|
color: #333;
|
|
border: 0.01rem solid #e6e6e6;
|
|
margin: 0.05rem 0.1rem 0 0;
|
|
padding: 0 0.1rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
border-radius: 0.04rem;
|
|
|
|
&:hover,
|
|
&.active {
|
|
background: rgba($color: $primary-color, $alpha: 0.1);
|
|
border-color: $primary-color;
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.goods-info {
|
|
display: flex;
|
|
|
|
.image {
|
|
width: 0.7rem;
|
|
height: 0.7rem;
|
|
margin-right: 0.1rem;
|
|
|
|
image {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.price {
|
|
line-height: 1;
|
|
margin-top: 0.05rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
border-top: 0.01rem solid #e6e6e6;
|
|
border-bottom: unset;
|
|
|
|
button {
|
|
width: 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
</style>
|