shop-applet/pages/nongKe/supply_chain/merchant.vue

641 lines
16 KiB
Vue
Raw Normal View History

2023-09-20 18:16:59 +08:00
<template>
<view class="merchant">
<view class="head_search flex_a_c">
<view class="search_content flex_a_c_j_sb">
<view class="flex_a_c">
<view class="iconfont icon-sousuo"></view>
<input type="text" v-model="infoData.keyword" placeholder="请搜索">
</view>
<button class="search_btn" @click="searchBtn">搜索</button>
</view>
</view>
<view style="background-color: #fff;width: 100%;">
<view class="tabs_box flex_a_c_j_sb">
<view v-for="(item,index) in tabsList" :key="index" class="flex_a_c" :class="active==index?'active':''">
<view @click="tabsChange(index,order)">{{item}}</view>
</view>
</view>
</view>
<block v-for="(item,index) in list" :key="index">
2023-11-10 18:02:50 +08:00
<view class="item_list flex" @click="navToGoodsDetails(item)">
2023-09-20 18:16:59 +08:00
<view>
<image class="goods_image" :src="item.image" mode="aspectFit"></image>
</view>
<view class="left_goods_msg">
<view class="name">{{ item.store_name }}</view>
<view class="classify flex_a_c">
<text>分类{{ item.cate_name ? item.cate_name : '无' }}</text>
2023-11-01 20:01:52 +08:00
<text style="margin-left: 17.54rpx;">单位{{ item.unit_name ? item.unit_name : '无' }}</text>
2023-09-20 18:16:59 +08:00
</view>
<view class="bar_code">条形码{{item.bar_code?item.bar_code : '无'}}</view>
</view>
<view class="right_goods_msg">
2023-10-30 18:49:25 +08:00
<view class="num">
2023-11-14 18:37:34 +08:00
<text style="margin-right: 10rpx;">订货价:</text>
<text>{{$procure_price(item)}}</text>
2023-10-30 18:49:25 +08:00
</view>
2023-11-10 18:02:50 +08:00
<!-- <view class="add_goods" @click="getGoodsDetails(item)">加入购物单</view> -->
2023-09-20 18:16:59 +08:00
</view>
</view>
</block>
<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
2023-10-30 18:49:25 +08:00
<navigator class="bottom_purchase" url="./shopping_trolley_a" open-type="navigate">采购清单</navigator>
2023-09-20 18:16:59 +08:00
<goodsPopup :goodsStatu="isPopupShow" @colses="isPopupShow=false" :goods_info="goodsInfo"></goodsPopup>
2023-11-14 18:37:34 +08:00
<shortPopup ref="shortPopupRef" ></shortPopup>
2023-09-20 18:16:59 +08:00
<u-popup :show="show" @close="close">
<view>
<h3 style=" margin: 15px 5px 5px 24px;">颜色规格</h3>
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
<view class="scroll-view-item" v-for="(item,index) in attrValue" :key="index">
<view class="scroll_item_top">
<image :src="Image" mode=""></image>
<view class="text">
<view>{{item.sku}}</view>
<view>库存: <text>{{item.stock}}</text> </view>
</view>
</view>
<view class="scroll_item_bon">
<view class="reduce" @click.stop='subCart(item,index)'>-</view>
<input type="text" disabled="true" v-model="goods[index].cart_num" />
<view class="plus" :class="goods.numAdd ? 'on' : ''" @click.stop='addCart(item,index)'>+</view>
<!-- <u-number-box
button-size="36"
color="#ffffff"
bgColor="#2979ff"
iconStyle="color: #fff"
v-model="number.cart_num"
></u-number-box> -->
</view>
</view>
</scroll-view>
<button class="btn" @click="addshopcart">确定</button>
</view>
</u-popup>
</view>
</template>
<script>
import {
getStoreGoods,
getProductDetail,
postCartAdd
} from '@/api/store.js'
import { Toast } from '@/libs/uniApi'
import goodsPopup from '../cpns/goodsPopup.vue'
import {
changeCartNum
} from '@/api/order.js';
2023-11-14 18:37:34 +08:00
import shortPopup from "@/components/shortPopup.vue"
2023-09-20 18:16:59 +08:00
export default {
components: {
2023-11-14 18:37:34 +08:00
goodsPopup,
shortPopup
2023-09-20 18:16:59 +08:00
},
data() {
return {
status: 'loadmore',
loadingText: '努力加载中',
loadmoreText: '轻轻上拉',
nomoreText: '我也是有底线的~~',
myCount: 0,
goodsInfo: {},
isPopupShow: false,
cartCount: 0,
isAllSelect: false,
search: '',
active: 0,
src: 'https://cdn.uviewui.com/uview/album/1.jpg',
tabsList: ['综合', '新品', '价格(升)', '销量'],
value: 5,
list: [],
attr: {
cartAttr: false,
productAttr: [],
productSelect: {}
},
productValue: [], // 系统属性
attrValue: '', // 已选属性,
infoData: {
page: 1,
limit: 10,
product_type: 98,
keyword: ''
},
id: '',
order: true,
num: '',
show: false,
scrollTop: 0,
attrValue: [],
Image: '',
goods: [{
cart_num: 0
}],
goodsLite: {},
goodsindexL: ''
}
},
onLoad(e) {
this.id = e.id
this.getStoreGoodsList()
// getStoreGoods(e.id, this.infoData).then(res => {
// this.list = res.data.list
// })
},
onShow() {},
methods: {
async searchBtn() {
this.infoData.page = 1
const res = await getStoreGoods(this.id, this.infoData)
this.list = res.data.list
},
// jian() {
// Toast('请到购物清单减少数量')
// },
// goodsPopupClick(item) {
// this.goodsInfo = item
// this.isPopupShow = true
// },
navGoodsDetails(id) {
uni.navigateTo({
url: `/pages/goods_details/index?id=${id}&type=town`
})
},
valChange(e) {
// console.log('当前值为: ' + e.value)
},
//添加购物车 *data是修改过后的参数
handelInfo(data) {},
//获取商品数据
async getStoreGoodsList() {
// console.log(this.infoData);
const res = await getStoreGoods(this.id, this.infoData)
this.list.push(...res.data.list)
if (res.data.list.length < 10) this.status = 'nomore'
// this.publicMethods1(res)
},
//上拉刷新
publicMethods1(res) {
this.num = res.data.count
this.list = [...this.list, ...res.data.list]
if (this.list.length < this.num) {
this.status = 'loadmore'
} else {
this.status = 'nomore'
}
},
tabsChange(i, order) {
this.active = i
this.list = []
this.infoData.page = 1
this.order = !this.order
if (i == 0) {
this.infoData.order = ''
this.getStoreGoodsList()
}
if (i == 1) {
this.infoData.order = 'is_new'
this.getStoreGoodsList()
}
//价格升序
if (i == 2) {
if (order) {
this.infoData.order = 'price_asc'
this.getStoreGoodsList()
this.tabsList[2] = '价格(升)'
} else {
this.infoData.order = 'price_desc'
this.getStoreGoodsList()
this.tabsList[2] = '价格(降)'
}
}
if (i == 3) {
this.infoData.order = 'sales'
this.getStoreGoodsList()
}
},
/**
* 获取产品详情
*/
getGoodsDetails(item) {
console.log(item);
if (item.product.attrValue.length == 1) {
let that = this;
const count = '1'
getProductDetail(item.product_id, { product_type: 98 }).then(res => {
const unique = Object.values(res.data.sku)[0].unique
that.goCat(res.data.product_id, count, unique)
}).catch(err => {
Toast(err)
})
} else {
this.show = true
this.attrValue = item.product.attrValue
this.Image = item.image
for (let i = 1; i < item.product.attrValue.length; i++) {
this.goods.push({
cart_num: 0
})
}
}
},
2023-11-10 18:02:50 +08:00
/**
* 跳转到产品详情
*/
navToGoodsDetails(item){
console.log(item);
2023-11-14 18:37:34 +08:00
this.$refs.shortPopupRef.setDatas(item);
this.$refs.shortPopupRef.open();
// uni.navigateTo({
// url: `/pages/goods_details/index?id=${item.product_id}&referer=`
// })
2023-11-10 18:02:50 +08:00
},
2023-09-20 18:16:59 +08:00
/*
* 加入购物车
*/
goCat: function(id, count, unique) {
let that = this
let q = {
is_new: 0,
product_id: id,
cart_num: count,
product_attr_unique: unique,
// source: this.source,
product_type: 98,
spread_id: ''
};
postCartAdd(q)
.then(res => {
that.$util.Tips({
title: "添加购物车成功",
});
})
.catch(res => {
return that.$util.Tips({
title: res
});
});
},
close() {
this.show = false
},
//购物车增加
addCart(item, index) {
let that = this
that.goods[index].cart_num = that.goods[index].cart_num + 1
that.goods.numAdd = true
that.goodsLite = item
that.goodsindexL = index
let q = {
is_new: 0,
product_id: that.goodsLite.product_id,
cart_num: that.goods[that.goodsindexL].cart_num,
product_attr_unique: that.goodsLite.unique,
// source: this.source,
product_type: 98,
spread_id: ''
};
postCartAdd(q).then(res => {
that.$util.Tips({
title: "添加购物车成功",
});
})
.catch(res => {
this.show = false
return that.$util.Tips({
title: res
});
});
},
subCart(item, index) {
let that = this
if (that.goods[index].cart_num == 0) {
return
} else {
that.goods[index].cart_num = that.goods[index].cart_num - 1
that.goods.numAdd = true
that.goodsLite = item
that.goodsindexL = index
let q = {
is_new: 0,
product_id: that.goodsLite.product_id,
cart_num: that.goods[that.goodsindexL].cart_num,
product_attr_unique: that.goodsLite.unique,
// source: this.source,
product_type: 98,
spread_id: ''
};
postCartAdd(q).then(res => {
that.$util.Tips({
title: "添加购物车成功",
});
})
.catch(res => {
this.show = false
return that.$util.Tips({
title: res
});
});
}
},
addshopcart() {
console.log(this.goodsLite);
console.log(this.goodsindexL);
this.show = false
// let that = this
// let q = {
// is_new: 0,
// product_id: that.goodsLite.product_id,
// cart_num: that.goods[that.goodsindexL].cart_num,
// product_attr_unique: that.goodsLite.unique,
// // source: this.source,
// product_type: 98,
// spread_id: ''
// };
// postCartAdd(q).then(res => {
// this.show = false
// that.$util.Tips({
// title: "添加购物车成功",
// });
// })
// .catch(res => {
// this.show = false
// return that.$util.Tips({
// title: res
// });
// });
2023-11-14 18:37:34 +08:00
},
2023-09-20 18:16:59 +08:00
},
onReachBottom() {
//如果状态为nomore 则不能在触发上拉事件
if (this.status != 'nomore') {
this.infoData.page++
this.getStoreGoodsList()
}
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
},
2023-11-14 18:37:34 +08:00
onBackPress() {
if(this.$refs.shortPopupRef.isShow){
this.$refs.shortPopupRef.close();
return true;
}
}
2023-09-20 18:16:59 +08:00
}
</script>
<style lang="scss" scoped>
//减号
/deep/.uicon-minus {
font-weight: 700 !important;
color: #000 !important;
}
.minus {
color: #000;
display: inline-block;
width: 70rpx;
height: 60rpx;
background-color: rgb(235, 236, 238);
padding-top: 20rpx;
padding-left: 24rpx;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
.reduce {
font-weight: bold !important;
font-weight: 700;
}
}
.merchant {
padding-bottom: 175.44rpx;
}
.icon-xuanzhong1 {
color: $uni-theme-color;
}
.head_search {
width: 100%;
background-color: #fff;
height: 108.77rpx;
.search_content {
margin: 0 auto;
width: 694.74rpx;
height: 66.67rpx;
padding: 2px 2px 2px 21.05rpx;
border: 1px solid $uni-theme-color;
border-radius: 100px;
.icon-sousuo {
font-weight: bold;
color: $uni-theme-color;
margin-right: 17.54rpx;
}
.search_btn {
color: #fff;
width: 135.09rpx;
height: 59.65rpx;
line-height: 59.65rpx;
background: $uni-theme-bg-color;
border-radius: 100px;
}
}
}
.tabs_box {
justify-content: space-around;
width: 694.74rpx;
margin: 0 auto;
height: 80.7rpx;
border-top: 1px solid #E7E6E4;
background-color: #fff;
}
.active {
font-weight: 700;
color: $uni-theme-color;
}
.item_list {
margin: 0 auto;
margin-top: 28.07rpx;
padding: 21.05rpx;
width: 694.74rpx;
background: #FFFFFF;
border-radius: 8px;
font-size: 24.56rpx;
.goods_image {
width: 119.3rpx;
height: 119.3rpx;
border-radius: 8px;
margin-right: 26.32rpx;
}
.left_goods_msg {
width: 100%;
flex: 1;
.name {
font-size: 28.07rpx;
font-weight: 700;
width: 315.79rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.price {
width: 100%;
margin-bottom: 0;
}
}
.right_goods_msg {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
.num {
font-size: 24.56rpx;
color: $uni-theme-color;
}
.purchase_btn {
color: #fff;
padding: 7.02rpx 21.05rpx;
background: $uni-theme-color;
border-radius: 100px;
margin-left: 21.05rpx;
}
.add_goods {
text-align: center;
width: 180rpx;
height: 60rpx;
line-height: 60rpx;
background: $uni-theme-bg-color;
border-radius: 100px;
color: #fff;
}
}
}
.bottom_purchase {
2023-11-14 18:37:34 +08:00
z-index: 50;
2023-09-20 18:16:59 +08:00
position: fixed;
left: 50%;
bottom: 52.63rpx;
transform: translate(-50%);
width: 526.32rpx;
height: 80.7rpx;
text-align: center;
line-height: 80.7rpx;
border-radius: 100px;
background-color: $uni-theme-color;
color: #fff;
}
.scroll-Y {
height: 50vh;
width: 90%;
margin: auto;
}
.scroll-view-item {
font-size: 36rpx;
border-bottom: 1px solid #ccc;
.scroll_item_top {
height: 60px;
display: flex;
justify-content: flex-start;
align-items: center;
image {
width: 50px;
height: 50px;
margin: 5px;
}
.text {
width: 200px;
height: 60px;
float: left;
view {
height: 30px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text {
color: #F84221;
}
}
}
}
.scroll_item_bon {
width: 100%;
height: 40px;
display: flex;
justify-content: flex-end;
align-items: center;
.reduce {
width: 30px;
height: 30px;
text-align: center;
color: #BDC4CE;
background: #EEEEEE;
}
input {
width: 50px;
height: 30px;
text-align: center;
}
.plus {
width: 30px;
text-align: center;
height: 30px;
color: #FFFFFF;
background: linear-gradient(180deg, #F98649 0%, #F34E45 100%);
}
.on {
background-color: #e3e3e3;
color: #dedede;
}
}
}
.btn {
width: 100%;
height: 50px;
background: linear-gradient(84deg, #F98649 0%, #F34E45 100%);
border-radius: 24px 24px 24px 24px;
line-height: 50px;
color: white;
}
</style>