882 lines
21 KiB
Vue
882 lines
21 KiB
Vue
<template>
|
|
<view class="container goods-container">
|
|
<view class="header-operation">
|
|
<view class="header-operation-left">
|
|
<view :class="{ active: type == 'goods' }" @click="switchItem('goods')">商品</view>
|
|
<view :class="{ active: type == 'service' }" @click="switchItem('service')">项目</view>
|
|
<view :class="{ active: type == 'money' }" @click="switchItem('money')">无码商品</view>
|
|
</view>
|
|
<view class="header-operation-right">
|
|
<input placeholder="请输入商品/项目名称" placeholder-style="font-size:0.14rem;color:#ACACAC;" v-model="searchText" />
|
|
<view class="search-btn" @click="search"><text class="iconfont icon31sousuo"></text></view>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<scroll-view scroll-x="true" class="type-switch common-scrollbar" v-show="serviceCategory.length && type == 'service'">
|
|
<view class="switch-item" :class="{ active: serviceCategoryId == 'all' }" @click="serviceCategoryId = 'all'">所有分类</view>
|
|
<view
|
|
class="switch-item"
|
|
:class="{ active: serviceCategoryId == item.category_id }"
|
|
v-for="(item, index) in serviceCategory"
|
|
:key="index"
|
|
@click="serviceCategoryId = item.category_id"
|
|
>
|
|
{{ item.category_name }}
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<scroll-view scroll-y="true" class="type-switch common-scrollbar" v-show="goodsCategory.length && type == 'goods'">
|
|
<view class="switch-item" :class="{ active: goodsCategoryId == 'all' }" @click="goodsCategoryId = 'all'">所有分类</view>
|
|
<view
|
|
class="switch-item"
|
|
:class="{ active: goodsCategoryId == item.category_id }"
|
|
v-for="(item, index) in goodsCategory"
|
|
:key="index"
|
|
@click="goodsCategoryId = item.category_id"
|
|
>
|
|
{{ item.category_name }}
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<scroll-view scroll-y="true" class="list-wrap" v-show="type == 'service'" @scrolltolower="getService()">
|
|
<view class="table-list" v-show="serviceData.list.length">
|
|
<view
|
|
class="table-item"
|
|
:class="{ 'item-mum-2': itemNum == 2, 'item-mum-3': itemNum == 3, 'item-mum-4': itemNum == 4, active: goodsIds.indexOf(item.goods_id) != -1 }"
|
|
v-for="(item, index) in serviceData.list"
|
|
:key="index"
|
|
@click="goodsSelect(item)"
|
|
>
|
|
<view class="item-name multi-hidden">{{ item.goods_name }}</view>
|
|
<view class="item-info">
|
|
<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'"
|
|
mode="widthFix"
|
|
></image>
|
|
</view>
|
|
<view class="item-other">
|
|
<view class="item-money">
|
|
<text class="util">￥</text>
|
|
{{ item.price | moneyFormat }}
|
|
</view>
|
|
<view class="item-time" v-if="item.service_length">时长：{{ item.service_length }}分钟</view>
|
|
</view>
|
|
</view>
|
|
<view class="no-stock" v-if="item.stock == 0"><image :src="$util.img('public/uniapp/cashier/stock_empty.png')" mode="heightFix"></image></view>
|
|
</view>
|
|
</view>
|
|
<view class="empty" v-show="!serviceData.list.length">
|
|
<image :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix"></image>
|
|
<view class="tips">暂无商品</view>
|
|
</view>
|
|
<nc-loading :layer-background="{ background: 'rgba(255,255,255,.6)' }" :default-show="false" ref="loading"></nc-loading>
|
|
</scroll-view>
|
|
|
|
<scroll-view scroll-y="true" class="list-wrap" v-show="type == 'goods'" @scrolltolower="getGoods()">
|
|
<view class="table-list" v-show="goodsData.list.length">
|
|
<view
|
|
class="table-item"
|
|
:class="{ 'item-mum-2': itemNum == 2, 'item-mum-3': itemNum == 3, 'item-mum-4': itemNum == 4, active: goodsIds.indexOf(item.goods_id) != -1 }"
|
|
v-for="(item, index) in goodsData.list"
|
|
:key="index"
|
|
@click="goodsSelect(item)"
|
|
>
|
|
<view class="item-name multi-hidden">{{ item.goods_name }}</view>
|
|
<view class="item-info">
|
|
<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'"
|
|
mode="widthFix"
|
|
></image>
|
|
</view>
|
|
<view class="item-other">
|
|
<view class="item-money">
|
|
<text class="util">￥</text>
|
|
{{ item.price | moneyFormat }}
|
|
</view>
|
|
<view class="item-stock">库存：{{ item.stock }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="no-stock" v-if="item.stock == 0"><image :src="$util.img('public/uniapp/cashier/stock_empty.png')" mode="heightFix"></image></view>
|
|
</view>
|
|
</view>
|
|
<view class="empty" v-show="!goodsData.list.length">
|
|
<image :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix"></image>
|
|
<view class="tips">暂无商品</view>
|
|
</view>
|
|
<nc-loading :layer-background="{ background: 'rgba(255,255,255,.6)' }" :default-show="false" ref="goodsLoading"></nc-loading>
|
|
</scroll-view>
|
|
|
|
<view class="table-pages" v-show="type == 'service' && serviceData.list.length">
|
|
<uni-pagination :total="serviceData.total" :showIcon="true" @change="pageChange" :pageSize="serviceData.size" :value="serviceData.index" />
|
|
</view>
|
|
<view class="table-pages" v-show="type == 'goods' && goodsData.list.length">
|
|
<uni-pagination :total="goodsData.total" :showIcon="true" @change="pageChange" :pageSize="goodsData.size" :value="goodsData.index" />
|
|
</view>
|
|
|
|
<view class="money-pages" v-show="type == 'money'">
|
|
<view class="money-wrap">
|
|
<view class="content-wrap">
|
|
<view class="unit">￥</view>
|
|
<input type="text" class="money" v-model="paymentMoney" />
|
|
</view>
|
|
<view class="keyboard-wrap">
|
|
<view class="num-wrap">
|
|
<view class="key-item" @click="keydown('1')">1</view>
|
|
<view class="key-item" @click="keydown('2')">2</view>
|
|
<view class="key-item" @click="keydown('3')">3</view>
|
|
<view class="key-item" @click="keydown('4')">4</view>
|
|
<view class="key-item" @click="keydown('5')">5</view>
|
|
<view class="key-item" @click="keydown('6')">6</view>
|
|
<view class="key-item" @click="keydown('7')">7</view>
|
|
<view class="key-item" @click="keydown('8')">8</view>
|
|
<view class="key-item" @click="keydown('9')">9</view>
|
|
<view class="key-item" @click="keydown('00')">00</view>
|
|
<view class="key-item" @click="keydown('0')">0</view>
|
|
<view class="key-item" @click="keydown('.')">.</view>
|
|
</view>
|
|
<view class="operation-wrap">
|
|
<view class="delete" @click="deleteCode">删除</view>
|
|
<view class="delete" @click="paymentMoney = ''">清空</view>
|
|
<view class="confirm" @click="paymentMoneyConfirm">确认</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<uni-popup ref="skuPopup" type="center">
|
|
<view class="sku-wrap">
|
|
<view class="header">
|
|
<text class="title">选择规格</text>
|
|
<text class="iconfont iconguanbi1" @click="$refs.skuPopup.close()"></text>
|
|
</view>
|
|
<view class="body">
|
|
<scroll-view scroll-y="true">
|
|
<view class="goods-info" v-if="skuinfo">
|
|
<view class="image">
|
|
<image
|
|
:src="$util.img(skuinfo.sku_image, { size: 'small' })"
|
|
@error="skuinfo.sku_image = $util.img('public/uniapp/default_img/goods.png')"
|
|
mode="widthFix"
|
|
></image>
|
|
</view>
|
|
<view class="info">
|
|
<view class="multi-hidden">{{ skuinfo.goods_name }}</view>
|
|
<view class="price">￥{{ skuinfo.price }} / {{ skuinfo.unit ? skuinfo.unit : '件' }}</view>
|
|
<view>库存：{{ skuinfo.stock }}</view>
|
|
</view>
|
|
</view>
|
|
<view v-for="(item, index) in goodsSpec" :key="index">
|
|
<view class="spec">{{ item.spec_name }}</view>
|
|
<view class="spec-value">
|
|
<view class="value-item" :class="{ active: spec.selected }" v-for="(spec, sindex) in item.value" :key="sindex" @click="skuSelect(spec.sku_id)">
|
|
{{ spec.spec_value_name }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="footer"><button type="default" class="primary-btn" @click="skuConfirm" :disabled="skuinfo && skuinfo.stock == 0">确认</button></view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ncGoods',
|
|
props: {
|
|
goodsIds: {
|
|
type: Array,
|
|
default: []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
type: 'goods',
|
|
serviceCategory: [],
|
|
serviceCategoryId: 'all',
|
|
serviceData: {
|
|
size: 12,
|
|
index: 1,
|
|
total: 0,
|
|
list: []
|
|
},
|
|
goodsCategoryId: 'all',
|
|
goodsCategory: [],
|
|
goodsData: {
|
|
size: 12,
|
|
index: 1,
|
|
total: 0,
|
|
list: []
|
|
},
|
|
skuinfo: null,
|
|
allsku: null,
|
|
searchText: '',
|
|
itemNum: 3,
|
|
mediaQueryOb: null,
|
|
paymentMoney: ''
|
|
};
|
|
},
|
|
created() {
|
|
this.getServiceCategory();
|
|
this.getGoodsCategory();
|
|
this.getService();
|
|
this.getGoods();
|
|
},
|
|
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: {
|
|
getServiceCategory() {
|
|
this.$api.sendRequest({
|
|
url: '/cashier/storeapi/service/category',
|
|
success: res => {
|
|
if (res.code == 0 && res.data) {
|
|
this.serviceCategory = res.data;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
getGoodsCategory() {
|
|
this.$api.sendRequest({
|
|
url: '/cashier/storeapi/goods/category',
|
|
success: res => {
|
|
if (res.code == 0 && res.data) {
|
|
this.goodsCategory = res.data;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
getService() {
|
|
this.$api.sendRequest({
|
|
url: '/cashier/storeapi/service/page',
|
|
data: {
|
|
page: this.serviceData.index,
|
|
page_size: this.serviceData.size,
|
|
category: this.serviceCategoryId,
|
|
search_text: this.searchText,
|
|
status: 1
|
|
},
|
|
success: res => {
|
|
if (this.$refs.loading) this.$refs.loading.hide();
|
|
if (res.code == 0) {
|
|
this.serviceData.total = res.data.count;
|
|
this.serviceData.list = res.data.list || [];
|
|
}
|
|
}
|
|
});
|
|
},
|
|
getGoods() {
|
|
this.$api.sendRequest({
|
|
url: '/cashier/storeapi/goods/page',
|
|
data: {
|
|
page: this.goodsData.index,
|
|
page_size: this.goodsData.size,
|
|
category: this.goodsCategoryId,
|
|
search_text: this.searchText,
|
|
goods_class: 1,
|
|
status: 1
|
|
},
|
|
success: res => {
|
|
if (this.$refs.goodsLoading) this.$refs.goodsLoading.hide();
|
|
if (res.code == 0) {
|
|
this.goodsData.total = res.data.count;
|
|
this.goodsData.list = res.data.list || [];
|
|
}
|
|
}
|
|
});
|
|
},
|
|
goodsSelect(data) {
|
|
if (!data.stock) return;
|
|
if (data.goods_spec_format) {
|
|
this.$api.sendRequest({
|
|
url: '/cashier/storeapi/goods/skulist',
|
|
data: {
|
|
goods_id: data.goods_id
|
|
},
|
|
success: res => {
|
|
if (res.code == 0) {
|
|
let obj = {};
|
|
res.data.forEach(item => {
|
|
item.goods_spec_format = JSON.parse(item.goods_spec_format);
|
|
obj['sku_id_' + item.sku_id] = item;
|
|
});
|
|
this.allsku = obj;
|
|
this.skuinfo = obj['sku_id_' + data.sku_id];
|
|
this.$refs.skuPopup.open();
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
this.$emit('select', data);
|
|
}
|
|
},
|
|
skuSelect(sku_id) {
|
|
this.skuinfo = this.allsku['sku_id_' + sku_id];
|
|
},
|
|
skuConfirm() {
|
|
if (this.skuinfo.stock == 0) {
|
|
this.$util.showToast({ title: '商品库存不足' });
|
|
return;
|
|
}
|
|
this.$emit('select', this.skuinfo);
|
|
this.$refs.skuPopup.close();
|
|
},
|
|
search() {
|
|
// if (this.searchText == '') return;
|
|
switch (this.type) {
|
|
case 'service':
|
|
this.serviceData.page = 0;
|
|
this.$refs.loading.show();
|
|
this.getService();
|
|
break;
|
|
case 'goods':
|
|
this.goodsData.page = 0;
|
|
this.$refs.goodsLoading.show();
|
|
this.getGoods();
|
|
break;
|
|
}
|
|
},
|
|
destroyed() {
|
|
this.mediaQueryOb.disconnect();
|
|
},
|
|
switchStoreAfter() {
|
|
this.serviceCategory = [];
|
|
this.serviceCategoryId = 'all';
|
|
this.serviceData = {
|
|
page: 0,
|
|
total: 1,
|
|
list: []
|
|
};
|
|
this.goodsCategoryId = 'all';
|
|
this.goodsCategory = [];
|
|
this.goodsData = {
|
|
page: 0,
|
|
total: 1,
|
|
list: []
|
|
};
|
|
this.getServiceCategory();
|
|
this.getGoodsCategory();
|
|
this.getService();
|
|
this.getGoods();
|
|
},
|
|
pageChange(e) {
|
|
if (this.type == 'goods') {
|
|
this.goodsData.index = e.current;
|
|
this.getGoods();
|
|
} else if (this.type == 'service') {
|
|
this.serviceData.index = e.current;
|
|
this.getService();
|
|
}
|
|
},
|
|
switchItem(type) {
|
|
this.type = type;
|
|
if (this.type == 'goods') {
|
|
this.goodsData.index = 1;
|
|
this.getGoods();
|
|
} else if (this.type == 'service') {
|
|
this.serviceData.index = 1;
|
|
this.getService();
|
|
}
|
|
},
|
|
keydown(value) {
|
|
let arr = this.paymentMoney.split('.');
|
|
if (arr[1]) {
|
|
if (value == '.' || arr[1].length == 2) return;
|
|
if (value == '00' && arr[1].length == 1) value = '0';
|
|
}
|
|
if (parseFloat(this.paymentMoney + value) > 1000000) {
|
|
this.$util.showToast({ title: '最大不能超过1000000' });
|
|
return;
|
|
}
|
|
this.paymentMoney += value;
|
|
},
|
|
deleteCode() {
|
|
this.paymentMoney = this.paymentMoney.substr(0, this.paymentMoney.length - 1);
|
|
},
|
|
paymentMoneyConfirm() {
|
|
if (!this.paymentMoney.length) {
|
|
this.$util.showToast({ title: '请输入收款金额' });
|
|
return;
|
|
}
|
|
if (isNaN(parseFloat(this.paymentMoney)) || !/^(([0-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/.test(parseFloat(this.paymentMoney))) {
|
|
this.$util.showToast({ title: '收款金额格式错误' });
|
|
return;
|
|
}
|
|
if (this.paymentMoney <= 0) {
|
|
this.$util.showToast({ title: '收款金额不能小于等于0' });
|
|
return;
|
|
}
|
|
if (parseFloat(this.paymentMoney) > 1000000) {
|
|
this.$util.showToast({ title: '最大不能超过1000000' });
|
|
return;
|
|
}
|
|
this.$emit('select', {
|
|
goods_id: parseInt(new Date().getTime() / 1000),
|
|
sku_id: parseInt(new Date().getTime() / 1000),
|
|
num: 1,
|
|
money: parseFloat(this.paymentMoney)
|
|
});
|
|
this.paymentMoney = '';
|
|
}
|
|
},
|
|
watch: {
|
|
serviceCategoryId: function(nval) {
|
|
this.serviceData.page = 0;
|
|
this.$refs.loading.show();
|
|
this.getService();
|
|
},
|
|
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 {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding: 0.15rem 0;
|
|
height: calc(100% - 0.78rem);
|
|
transform: rotate(0);
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
.table-pages {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 1.2rem;
|
|
height: 0.6rem;
|
|
background-color: #fff;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.type-switch {
|
|
width: 1rem;
|
|
margin-left: 0.1rem;
|
|
font-size: 0.14rem;
|
|
margin-bottom: 0.15rem;
|
|
white-space: nowrap;
|
|
border-left: 0.01rem solid #e6e6e6;
|
|
padding-left: 0.1rem;
|
|
/deep/ .uni-scroll-view-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.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 {
|
|
position: relative;
|
|
flex: 1;
|
|
padding-bottom: 0.4rem;
|
|
}
|
|
|
|
.money-pages {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.money-wrap {
|
|
background: #fff;
|
|
border-radius: 0.05rem;
|
|
|
|
.head {
|
|
height: 0.6rem;
|
|
line-height: 0.6rem;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
position: relative;
|
|
|
|
text {
|
|
font-size: 0.16rem;
|
|
}
|
|
|
|
.iconguanbi1 {
|
|
position: absolute;
|
|
right: 0.15rem;
|
|
font-size: 0.22rem;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.content-wrap {
|
|
display: flex;
|
|
border: 0.01rem solid #e6e6e6;
|
|
height: 0.6rem;
|
|
align-items: center;
|
|
margin: 0 0.2rem;
|
|
padding: 0 0.15rem;
|
|
|
|
.unit {
|
|
font-size: 0.25rem;
|
|
}
|
|
|
|
.money {
|
|
margin-left: 0.05rem;
|
|
font-size: 0.2rem;
|
|
}
|
|
}
|
|
|
|
.keyboard-wrap {
|
|
width: 4rem;
|
|
padding: 0 0.2rem 0.3rem 0.2rem;
|
|
margin-top: 0.1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.table-list {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
.table-item {
|
|
border: 0.01rem solid #e6e6e6;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 1.9rem;
|
|
height: 1.15rem;
|
|
padding: 0.1rem;
|
|
box-sizing: border-box;
|
|
margin-right: 0.1rem;
|
|
margin-bottom: 0.1rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
position: relative;
|
|
|
|
&:hover {
|
|
background-color: #eee;
|
|
}
|
|
.item-other {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
margin-left: 0.1rem;
|
|
}
|
|
|
|
.item-img {
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
image {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.item-name {
|
|
height: 0.38rem;
|
|
margin-bottom: 0.05rem;
|
|
word-break: break-all;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.item-info {
|
|
cursor: pointer;
|
|
flex: 1;
|
|
display: flex;
|
|
.item-time {
|
|
font-size: 0.12rem;
|
|
color: #909399;
|
|
}
|
|
.item-money {
|
|
font-size: 0.14rem;
|
|
color: #fe2278;
|
|
line-height: 1;
|
|
|
|
.util {
|
|
font-size: 0.12rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
border-color: $primary-color;
|
|
background-color: $primary-color;
|
|
color: #fff;
|
|
|
|
.item-time,
|
|
.item-money {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sku-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 7rem;
|
|
height: 3.94rem;
|
|
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 {
|
|
flex: 1;
|
|
padding: 0.15rem;
|
|
scroll-view {
|
|
height: 2.55rem;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
|
|
image {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.price {
|
|
line-height: 1;
|
|
margin-top: 0.05rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
border: 0;
|
|
height: 0.6rem;
|
|
button {
|
|
width: 95%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.empty {
|
|
text-align: center;
|
|
padding-top: 1.2rem;
|
|
|
|
image {
|
|
width: 2rem;
|
|
}
|
|
|
|
.tips {
|
|
color: #999;
|
|
margin-top: 0.15rem;
|
|
}
|
|
}
|
|
</style>
|