719 lines
16 KiB
Vue
719 lines
16 KiB
Vue
<template>
|
||
<view>
|
||
<!-- <u-navbar placeholder :title="'助力乡村振兴礼包'" :bgColor="'#FB3024'" titleStyle="color:#fff" leftIconColor="#fff" leftIcon="arrow-left" @leftClick="goBack">
|
||
<button v-if="type == 200" class="nav-right-btn" slot="right" @click="showPop = true">筛选</button>
|
||
</u-navbar> -->
|
||
<view class="top-box">
|
||
<view class="search-box">
|
||
<u-icon name="search" size="36rpx" color="#999"></u-icon>
|
||
<input @confirm="searchName" confirm-type="search" class="search-input" v-model="waresName" type="text" value="" :placeholder="$t('w_0253')" />
|
||
</view>
|
||
</view>
|
||
<view class="top-tabbar">
|
||
<view class="tab-item" :class="{ active: type == 18 }" @click="changeType(18)">{{ $t('ENU_ORDER_T_18') }}</view>
|
||
<view class="tab-item" :class="{ active: type == 19 }" @click="changeType(19)">{{ $t('ENU_ORDER_T_19') }}</view>
|
||
</view>
|
||
<template v-if="type != 200">
|
||
<view class="product-list">
|
||
<view class="product-item" v-for="(item, index) in listData" :key="index">
|
||
<image class="product-img" :src="item.cover1" mode="" @click="gotoPage('/pages/product/detail?waresCode=' + item.waresCode + '&cid=' + type)"></image>
|
||
<view class="product-info">
|
||
<view class="text-ellipsis-2 f26 gray3 mb10">{{ item.waresName }}</view>
|
||
<view class="ww100">
|
||
<view class="f22 gray9 mb10">{{ $t('CK_KS_102') }}:{{ item.sales }}</view>
|
||
<view class="f22 gray9 mb10" v-if="type == 19">{{ $t('ENU_TOTAL_V_1') }}：{{ formatNum(item.waresAchieve) }}</view>
|
||
<view class="d-b-c">
|
||
<view class="price-color fb">{{ currencyIcon() }}{{ formatNum(item.waresPrice) }}</view>
|
||
<image class="cart-img" src="/static/icon/cart-icon.png" mode="" @click="addShopping(item)"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<!-- 筛选 -->
|
||
<u-popup :show="showPop" mode="right" @close="closePop" @open="openPop">
|
||
<view class="pop-content rightpop">
|
||
<view class="pop-title d-b-c">
|
||
<view class="f28 gray3">{{ $t('MY_ORD_50') }}</view>
|
||
<view class="f28 domation" @click="closePop">{{ $t('N_I_241') }}</view>
|
||
</view>
|
||
<view class="right-item-title">{{ $t('w_0078') }}</view>
|
||
<view style="padding: 0 24rpx;"><u-search :placeholder="$t('w_0078')" :clearabled="true" :showAction="false" v-model="keyword"></u-search></view>
|
||
|
||
<view class="right-item-title">{{ $t('w_0352') }}</view>
|
||
<view class="d-c-c">
|
||
<picker mode="date" :value="date1" :start="startDate" :end="endDate" @change="bindDateChange1">
|
||
<view class="data-input">{{ date1 || $t('CK_KS_3') }}</view>
|
||
</picker>
|
||
<view style="width: 30rpx;height: 1rpx;background-color: #333;margin: 0 24rpx;"></view>
|
||
<picker mode="date" :value="date2" :start="startDate" :end="endDate" @change="bindDateChange2">
|
||
<view class="data-input">{{ date2 || $t('CK_KS_9') }}</view>
|
||
</picker>
|
||
</view>
|
||
<view class="pop-btns">
|
||
<view class="pop-left-btn">{{ $t('w_0257') }}</view>
|
||
<view class="pop-right-btn">{{ $t('w_0035') }}</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<template v-if="showCart">
|
||
<view class="pop-cart">
|
||
<view class="d-e-c" style="padding: 0 24rpx;"><u-icon name="close" size="32rpx" color="#999" @click="showCart = false"></u-icon></view>
|
||
<view class="f32 gray3 d-c-c">{{ $t('N_I_194') }}</view>
|
||
<view class="cart-list">
|
||
<view class="cart-item" v-for="(item, index) in cartData" :key="index">
|
||
<view class="radio-check checked d-c-c"><u-icon name="checkbox-mark" color="#fff" size="26rpx"></u-icon></view>
|
||
<view class="order-product">
|
||
<view class="product-item">
|
||
<view class="d-b-s mb20">
|
||
<image class="product-img" :src="item.cover1" mode=""></image>
|
||
<view class="product-info d-c d-b-s flex-1">
|
||
<view class="text-ellipsis-2 f28 gray3">{{ item.waresName }}</view>
|
||
<view class="price-color f24">
|
||
{{ currencyIcon() }}
|
||
<text class="f32 fb">{{ formatNum(item.waresPrice) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="secend-product">
|
||
<view class="d-b-s mb20" v-for="(pitem, pindex) in item.productParams" :key="pindex">
|
||
<view class="d-s-c">
|
||
<image :src="pitem.waresItemsParamsList[0].specCover" mode="" class="s-product-img"></image>
|
||
<view class="f28">
|
||
{{ pitem.productName }}
|
||
<text class="ml20">{{ pitem.waresItemsParamsList[0].specsName }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="f24 gray9 ml20">X{{ pitem.waresItemsParamsList[0].quantity }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="d-b-c mt20">
|
||
<view class="counter-box">
|
||
<view class="d-c-c counter-add" @click="plusReduceShopping(item, 'reduce')"><u-icon name="minus" size="26rpx" color="#666"></u-icon></view>
|
||
<view class="counter-num">{{ item.number }}</view>
|
||
<view class="d-c-c counter-add" @click="plusReduceShopping(item, 'add')"><u-icon name="plus" size="26rpx" color="#666"></u-icon></view>
|
||
</view>
|
||
<u-icon @click="deleteCart(item)" width="34rpx" height="36rpx" name="/static/icon/product/cart-delete.png"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!--底部按钮-->
|
||
<view class="bottom-btns d-e-c f28">
|
||
<view class="total d-s-c flex-1 mr20">
|
||
<view class="cart-img">
|
||
<image src="/static/icon/cart-cart.png" mode=""></image>
|
||
<!-- <view class="cart-num">10</view> -->
|
||
</view>
|
||
<view>
|
||
<view class="price f32">
|
||
{{ currencyIcon() }}
|
||
<text class="num f38 fb">{{ formatNum(cartMoney) }}</text>
|
||
</view>
|
||
<view class="f24 gray3">{{ $t('ENU_TOTAL_V_1') }}:{{ formatNum(cartAchieve) }}</view>
|
||
</view>
|
||
</view>
|
||
<button :disabled="payClock()" type="primary" class="buy-btn theme-btn" @click="toPay">{{ $t('w_0312') }}</button>
|
||
</view>
|
||
<view class="pop-bg" @click.stop="showCart = false"></view>
|
||
</template>
|
||
<view class="pop-icons">
|
||
<view class="pop-icon">
|
||
<image @click="getShopping" src="/static/icon/product/pop-cart.png" mode=""></image>
|
||
<view v-if="sCount > 0" class="scount-pop">{{ sCount }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
const currentDate = this.getDate({
|
||
format: true
|
||
});
|
||
return {
|
||
type: 18,
|
||
showPop: false,
|
||
/*最后一页码数*/
|
||
last_page: 0,
|
||
/*当前页面*/
|
||
page: 1,
|
||
/*每页条数*/
|
||
list_rows: 10,
|
||
/*有没有等多*/
|
||
no_more: false,
|
||
/*是否正在加载*/
|
||
loading: true,
|
||
listData: [],
|
||
date1: '',
|
||
date2: '',
|
||
searchtype: 0,
|
||
keyword: '',
|
||
waresName: '',
|
||
addLock: false,
|
||
showCart: false,
|
||
sCount: 0,
|
||
cartData: []
|
||
};
|
||
},
|
||
computed: {
|
||
cartMoney: function() {
|
||
let self = this;
|
||
let price = 0;
|
||
console.log(self.cartData);
|
||
self.cartData.forEach(item => {
|
||
price += item.waresPrice * 1 * item.number;
|
||
});
|
||
return price;
|
||
},
|
||
cartAchieve: function() {
|
||
let self = this;
|
||
let achieve = 0;
|
||
console.log(self.cartData);
|
||
self.cartData.forEach(item => {
|
||
achieve += item.achieve * 1 * item.number;
|
||
});
|
||
return achieve;
|
||
},
|
||
/*加载中状态*/
|
||
loadingType() {
|
||
if (this.loading) {
|
||
return 1;
|
||
} else {
|
||
if (this.listData.length != 0 && this.no_more) {
|
||
return 2;
|
||
} else {
|
||
return 0;
|
||
}
|
||
}
|
||
},
|
||
startDate() {
|
||
return this.getDate('start');
|
||
},
|
||
endDate() {
|
||
return this.getDate('end');
|
||
}
|
||
},
|
||
onShow() {
|
||
/*获取数据*/
|
||
this.listData = [];
|
||
this.getData();
|
||
},
|
||
methods: {
|
||
payClock(){
|
||
let self =this;
|
||
if(self.cartData&&self.cartData.length>0){
|
||
return false
|
||
}else{
|
||
return true
|
||
}
|
||
},
|
||
getData() {
|
||
let self = this;
|
||
self.loading = true;
|
||
self._post(
|
||
'sale/api/wares/query-spe-wares',
|
||
{
|
||
specialArea: self.type,
|
||
waresName: self.waresName
|
||
},
|
||
function(res) {
|
||
self.listData = res.data;
|
||
},
|
||
{},
|
||
() => {
|
||
self.loading = false;
|
||
self.getShoppingCount();
|
||
}
|
||
);
|
||
},
|
||
plusReduceShopping(e, type) {
|
||
let self = this;
|
||
if (self.addLock) {
|
||
return;
|
||
}
|
||
self.addLock = true;
|
||
let num = e.number;
|
||
if (type == 'add') {
|
||
num++;
|
||
}
|
||
if (type == 'reduce') {
|
||
num--;
|
||
if (num <= 0) {
|
||
num = 1;
|
||
}
|
||
}
|
||
self._post(
|
||
'sale/api/shopping/plusReduceShopping',
|
||
{
|
||
number: num,
|
||
shoppingId: e.shoppingId,
|
||
specialArea: self.type
|
||
},
|
||
res => {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
success() {
|
||
self.getShopping();
|
||
}
|
||
});
|
||
},
|
||
false,
|
||
() => {
|
||
self.addLock = false;
|
||
}
|
||
);
|
||
},
|
||
toPay() {
|
||
let self = this;
|
||
let arr = [];
|
||
self.cartData.forEach(item => {
|
||
arr.push(item.shoppingId);
|
||
});
|
||
uni.setStorageSync('cartinfo', arr);
|
||
self.gotoPage('/pages/prefecture/confirm-order?specialArea=' + self.type);
|
||
},
|
||
getShopping() {
|
||
let self = this;
|
||
self._get(
|
||
'sale/api/shopping/getShopping',
|
||
{
|
||
specialArea: self.type
|
||
},
|
||
res => {
|
||
if (res.data != '') {
|
||
self.cartData = res.data[0].shoppingCartList;
|
||
} else {
|
||
self.cartData = [];
|
||
}
|
||
self.showCart = true;
|
||
}
|
||
);
|
||
self.getShoppingCount();
|
||
},
|
||
getShoppingCount() {
|
||
let self = this;
|
||
self._get(
|
||
'sale/api/shopping/getShoppingCount',
|
||
{
|
||
specialArea: self.type
|
||
},
|
||
res => {
|
||
self.sCount = res.data.smallCount;
|
||
}
|
||
);
|
||
},
|
||
changeType(e) {
|
||
this.type = e;
|
||
this.listData = [];
|
||
this.getData();
|
||
},
|
||
closePop() {
|
||
this.showPop = false;
|
||
},
|
||
openPop() {
|
||
this.showPop = true;
|
||
},
|
||
getDate(type) {
|
||
const date = new Date();
|
||
let year = date.getFullYear();
|
||
let month = date.getMonth() + 1;
|
||
let day = date.getDate();
|
||
|
||
if (type === 'start') {
|
||
year = year - 60;
|
||
} else if (type === 'end') {
|
||
year = year + 2;
|
||
}
|
||
month = month > 9 ? month : '0' + month;
|
||
day = day > 9 ? day : '0' + day;
|
||
return `${year}-${month}-${day}`;
|
||
},
|
||
bindDateChange1: function(e) {
|
||
this.date1 = e.detail.value;
|
||
},
|
||
bindDateChange2: function(e) {
|
||
this.date2 = e.detail.value;
|
||
},
|
||
searchName: function() {
|
||
/*获取数据*/
|
||
this.listData = [];
|
||
this.getData();
|
||
},
|
||
deleteCart(e) {
|
||
let self = this;
|
||
if (self.addLock) {
|
||
return;
|
||
}
|
||
self.addLock = true;
|
||
self._post(
|
||
'sale/api/shopping/batchDelShopping',
|
||
{
|
||
deleteList: [
|
||
{
|
||
shoppingId: e.shoppingId
|
||
}
|
||
]
|
||
},
|
||
res => {
|
||
self.getShopping();
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
success() {}
|
||
});
|
||
},
|
||
false,
|
||
() => {
|
||
self.addLock = false;
|
||
}
|
||
);
|
||
},
|
||
addShopping(e) {
|
||
let self = this;
|
||
self._post(
|
||
'sale/api/shopping/addShopping',
|
||
{
|
||
number: 1,
|
||
productGroup: e.productGroup,
|
||
specialArea: self.type,
|
||
waresCode: e.waresCode
|
||
},
|
||
res => {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
});
|
||
self.getShoppingCount();
|
||
}
|
||
);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.top-box {
|
||
width: 750rpx;
|
||
padding: 0 30rpx 0 23rpx;
|
||
box-sizing: border-box;
|
||
height: 102rpx;
|
||
background: #ffffff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-bottom: 1rpx solid #eee;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.search-box {
|
||
flex: 1;
|
||
height: 65rpx;
|
||
background: #f5f6f8;
|
||
border-radius: 33rpx;
|
||
padding: 0 52rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.search-input {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
margin-left: 14rpx;
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.top-tabbar {
|
||
// position: sticky;
|
||
// top: 0;
|
||
// left: 0;
|
||
// z-index: 97;
|
||
border-bottom: 1rpx solid #eee;
|
||
|
||
.tab-item {
|
||
color: #666;
|
||
}
|
||
|
||
.tab-item.active {
|
||
font-weight: 400;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.nav-right-btn {
|
||
background: none;
|
||
color: #fff;
|
||
}
|
||
|
||
.product-list {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
flex-wrap: wrap;
|
||
padding: 25rpx 25rpx 60rpx 24rpx;
|
||
}
|
||
|
||
.product-list .product-item {
|
||
width: 342rpx;
|
||
padding: 0 0 25rpx 0;
|
||
// height: 496rpx;
|
||
background: #ffffff;
|
||
box-shadow: 0rpx 5rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
||
border-radius: 15rpx;
|
||
margin-bottom: 26rpx;
|
||
flex-shrink: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.product-info .cart-img {
|
||
width: 46rpx;
|
||
height: 46rpx;
|
||
background: linear-gradient(180deg, #f6c1b8, #fe5541, #f00d04);
|
||
box-shadow: 0px 3rpx 7rpx 0px rgba(0, 0, 0, 0.25);
|
||
border-radius: 50%;
|
||
margin-left: 10rpx;
|
||
flex-shrink: 0;
|
||
display: block;
|
||
}
|
||
|
||
.product-info {
|
||
height: 220rpx;
|
||
box-sizing: border-box;
|
||
padding: 10rpx 16rpx 0 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.product-img {
|
||
height: 292rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
.order-item {
|
||
padding: 0 19rpx 0 24rpx;
|
||
background: #fff;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.order-item-title {
|
||
height: 93rpx;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
border-bottom: 1rpx solid #eee;
|
||
}
|
||
|
||
.order-img {
|
||
width: 124rpx;
|
||
height: 124rpx;
|
||
margin-right: 20rpx;
|
||
flex-shrink: 0;
|
||
display: block;
|
||
border: 15rpx;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.pop-icons {
|
||
position: fixed;
|
||
right: 10rpx;
|
||
bottom: 42rpx;
|
||
z-index: 90;
|
||
}
|
||
|
||
.pop-icon {
|
||
position: relative;
|
||
width: 110rpx;
|
||
height: 110rpx;
|
||
border-radius: 50%;
|
||
margin-top: 20rpx;
|
||
box-shadow: 0px 3rpx 7rpx 0px rgba(0, 0, 0, 0.45);
|
||
|
||
image {
|
||
width: 110rpx;
|
||
height: 110rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.pop-cart {
|
||
position: fixed;
|
||
bottom: 96rpx;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 101;
|
||
background-color: #fff;
|
||
padding: 0 0;
|
||
box-sizing: border-box;
|
||
padding-top: 20rpx;
|
||
border-radius: 25rpx 25rpx 0 0;
|
||
min-height: 200rpx;
|
||
}
|
||
|
||
.bottom-btns {
|
||
position: fixed;
|
||
width: 100%;
|
||
padding: 0 24rpx 0 27rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 96rpx;
|
||
// /* bottom: calc(var(--window-bottom); */
|
||
bottom: 0;
|
||
left: 0;
|
||
box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||
background: #ffffff;
|
||
z-index: 101;
|
||
}
|
||
|
||
.bottom-btns .buy-btn {
|
||
margin: 0;
|
||
padding: 0 24rpx;
|
||
height: 67rpx;
|
||
line-height: 67rpx;
|
||
border-radius: 38rpx;
|
||
// background: linear-gradient(90deg, #FF6B6B 4%, #F6220C 100%);
|
||
font-size: 28rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.bottom-btns .price {
|
||
color: $dominant-color;
|
||
}
|
||
|
||
.pop-bg {
|
||
position: fixed;
|
||
z-index: 99;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
background-color: rgba(0, 0, 0, 0.65);
|
||
}
|
||
|
||
.counter-box {
|
||
width: 168rpx;
|
||
height: 50rpx;
|
||
border-radius: 30rpx;
|
||
border: 1rpx solid #eeeeee;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
margin-top: 26rpx;
|
||
}
|
||
|
||
.counter-num {
|
||
height: 50rpx;
|
||
min-width: 56rpx;
|
||
padding: 0 10rpx;
|
||
box-sizing: border-box;
|
||
border-left: 1rpx solid #eeeeee;
|
||
border-right: 1rpx solid #eeeeee;
|
||
line-height: 50rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.counter-add {
|
||
height: 50rpx;
|
||
width: 56rpx;
|
||
flex-shrink: 0;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.cart-list {
|
||
padding: 0 24rpx;
|
||
max-height: 60vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.cart-list::-webkit-scrollbar {
|
||
/*滚动条整体样式*/
|
||
/*高宽分别对应横竖滚动条的尺寸*/
|
||
display: block;
|
||
width: 5rpx !important;
|
||
height: 1rpx !important;
|
||
-webkit-appearance: default-button;
|
||
}
|
||
|
||
.cart-list::-webkit-scrollbar-thumb {
|
||
/*滚动条里面小方块*/
|
||
border-radius: 10px;
|
||
background-color: #909399;
|
||
// background-image: -webkit-linear-gradient(45deg,
|
||
// rgba(255, 255, 255, 0.2) 25%,
|
||
// transparent 25%,
|
||
// transparent 50%,
|
||
// rgba(255, 255, 255, 0.2) 50%,
|
||
// rgba(255, 255, 255, 0.2) 75%,
|
||
// transparent 75%,
|
||
// transparent);
|
||
}
|
||
|
||
.cart-list::-webkit-scrollbar-track {
|
||
/*滚动条里面轨道*/
|
||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||
background: #ededed;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.bottom-btns .cart-img {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
position: relative;
|
||
margin-right: 18rpx;
|
||
|
||
image {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
}
|
||
|
||
.cart-num {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
background: #fb3024;
|
||
box-shadow: 0px 3rpx 7rpx 0px rgba(0, 0, 0, 0.25);
|
||
border-radius: 50%;
|
||
font-size: 22rpx;
|
||
color: #ffffff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: absolute;
|
||
top: -10rpx;
|
||
right: -14rpx;
|
||
}
|
||
|
||
.scount-pop {
|
||
background: #fb3024;
|
||
color: #fff;
|
||
font-size: 22rpx;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
}
|
||
button[disabled][type=primary]{
|
||
background-color: rgba(#fb3024, 0.6);
|
||
}
|
||
</style>
|