619 lines
16 KiB
Vue
619 lines
16 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="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>
|
|
<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>
|
|
<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';
|
|
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: '',
|
|
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
|
|
})
|
|
}
|
|
}
|
|
|
|
},
|
|
/*
|
|
* 加入购物车
|
|
*/
|
|
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
|
|
// });
|
|
// });
|
|
}
|
|
},
|
|
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;
|
|
}
|
|
|
|
.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> |