398 lines
9.9 KiB
Vue
398 lines
9.9 KiB
Vue
<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">
|
|
<view class="item_list flex">
|
|
<view>
|
|
<image class="goods_image" :src="item.image" mode="aspectFill"></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>
|
|
<text style="margin-left: 17.54rpx;">单位：{{ item.unit_name }}</text>
|
|
</view>
|
|
<view class="bar_code">条形码：{{item.bar_code?item.bar_code : '无'}}</view>
|
|
</view>
|
|
<view class="right_goods_msg">
|
|
<view class="num">订货价：{{item.price}}</view>
|
|
<view class="add_goods" @click="getGoodsDetails(item)">加入购物单</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
|
|
|
|
<navigator class="bottom_purchase" url="./shopping_trolley" open-type="navigate">采购清单</navigator>
|
|
|
|
<goodsPopup :goodsStatu="isPopupShow" @colses="isPopupShow=false" :goods_info="goodsInfo"></goodsPopup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getStoreGoods,
|
|
getProductDetail,
|
|
postCartAdd
|
|
} from '@/api/store.js'
|
|
import { Toast } from '@/libs/uniApi'
|
|
import goodsPopup from '../cpns/goodsPopup.vue'
|
|
export default {
|
|
components: {
|
|
goodsPopup
|
|
},
|
|
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: ''
|
|
}
|
|
},
|
|
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('e,item',e,item);
|
|
// let that = this;
|
|
// const count = e.value
|
|
// getProductDetail(item.product_id).then(res => {
|
|
// const unique = Object.values(res.data.sku)[0].unique
|
|
// console.log(res.data.product_id, count, unique,'123123');
|
|
// that.goCat(res.data.product_id, count, unique)
|
|
// })
|
|
let that = this;
|
|
const count = '1'
|
|
// console.log(111);
|
|
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)
|
|
})
|
|
},
|
|
/*
|
|
* 加入购物车
|
|
*/
|
|
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
|
|
});
|
|
});
|
|
},
|
|
|
|
},
|
|
onReachBottom() {
|
|
//如果状态为nomore 则不能在触发上拉事件
|
|
if (this.status != 'nomore') {
|
|
this.infoData.page++
|
|
this.getStoreGoodsList()
|
|
}
|
|
|
|
},
|
|
onPullDownRefresh() {
|
|
uni.stopPullDownRefresh()
|
|
},
|
|
|
|
}
|
|
</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 {
|
|
z-index: 999;
|
|
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;
|
|
}
|
|
</style> |