You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
546 lines
12 KiB
546 lines
12 KiB
<template>
|
|
<view class="page1">
|
|
<view class="title-box">
|
|
<uni-search-bar class="uni-mt-10" radius="5" placeholder="请输入供应商名称" cancelButton="none" @confirm="search" />
|
|
</view>
|
|
<view class="content-box">
|
|
<view class="content-left">
|
|
<view class="left-box" v-for="(item, index) in indexList" :key="item"
|
|
:class="item.parentId ? 'left-box-hover':''" @tap="clickLeftBtn(index)">
|
|
<text style="padding: 0 40rpx;" :class="item.parentId ? 'red' :''">{{item.categoryName}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="content-right">
|
|
<view class="right-box" v-for="item in shopList" :key="item">
|
|
<view class="box-left">
|
|
<img :src="item.productPicture" alt="">
|
|
</view>
|
|
<view class="box-right">
|
|
<view class="box-right-name">{{item.productName}}</view>
|
|
<view class="box-right-num">{{item.productSn}}</view>
|
|
<view class="box-right-price">
|
|
<view class="price-box">
|
|
<text>{{item.purchasePrice}}</text>
|
|
<text>采购价</text>
|
|
</view>
|
|
<view class="price-box">
|
|
<text>{{item.wholesalePrice}}</text>
|
|
<text>批发价</text>
|
|
</view>
|
|
<view class="price-box">
|
|
<text>{{item.price}}</text>
|
|
<text>零售价</text>
|
|
</view>
|
|
<view class="price-box">
|
|
<text>{{item.stockCount}}</text>
|
|
<text>库存</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<checkbox-group @tap="checkboxChange($event,item)">
|
|
<label>
|
|
<checkbox :checked="item.checked" class="checkbox" />
|
|
</label>
|
|
</checkbox-group>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bottom-box">
|
|
<view class="bottom-left" @tap="toggle('carPopup')">
|
|
<view class="bottom-left-box">
|
|
<uni-icons type="cart" size="20" color="#646566"></uni-icons>
|
|
<text class="uni-tab__text">已选择</text>
|
|
</view>
|
|
<text style="background-color:#ff0000;color:#fff;position: absolute;top: 0;right: 10rpx;"
|
|
class="uni-tab__dot">{{ carList.length }}</text>
|
|
</view>
|
|
<view class="bottom-right">
|
|
<button class="bottom-btn" @tap="clickShareBtn('all')">分享全部</button>
|
|
<button class="bottom-btn" @tap="clickShareBtn">分享选中</button>
|
|
</view>
|
|
</view>
|
|
<!-- 分享弹出层 -->
|
|
<uni-popup ref="share" type="share" @select='select' safeArea backgroundColor="#fff">
|
|
<uni-popup-share></uni-popup-share>
|
|
</uni-popup>
|
|
<!-- 购物车弹出层 -->
|
|
<uni-popup ref="carPopup" background-color="#fff">
|
|
<view class="popup-content">
|
|
<view v-for="item in shopList" style="position: relative;">
|
|
<view class="popup-title" v-if="item.checked == true">
|
|
<view class="popup-title-left">
|
|
<img src="/static/images/logo.png" alt="">
|
|
</view>
|
|
<view class="popup-title-right">
|
|
<view class="popup-title-right-box" style="color: #088FEB;">{{item.productName}}</view>
|
|
<view class="popup-title-right-box">{{item.productSn}}</view>
|
|
<view class="popup-title-right-box" style="color: darkorange;" @tap="inputDialogToggle">
|
|
<text style="margin-right:20rpx;">￥{{item.price}}</text>
|
|
<view style="position: absolute;top: 30rpx;right: 30rpx;" @tap.stop="delShop(item.id)">
|
|
<uni-icons color="red" type="trash" size="26"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="popup-bottom">
|
|
<view class="popup-bottom-left">
|
|
<text>共 {{carType}} 款</text>
|
|
</view>
|
|
<view class="popup-bottom-right">
|
|
<view class="bottom-btn" @tap="closeCar">关闭</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
indexList: [],
|
|
pageNum: 1, //分页的页码
|
|
shopList: [],
|
|
info: 0,
|
|
categoryId: '', //分类id
|
|
searchName: '', //搜索框输入值
|
|
shopId: '', //店铺id,
|
|
checkbox: '', //需要分享的商品id
|
|
id: '',
|
|
carList:[],
|
|
carNum:0,
|
|
carType:0
|
|
}
|
|
},
|
|
created() {
|
|
uni.hideHomeButton() //左上角HOME按钮
|
|
},
|
|
onLoad(options) {
|
|
console.log(options.khid)
|
|
if (options.khid != undefined) {
|
|
uni.redirectTo({
|
|
url: "/pages/index/downStearmList?khid=" + options.khid
|
|
})
|
|
}
|
|
this.getGategoryList()
|
|
},
|
|
methods: {
|
|
//初始化获取分类列表
|
|
getGategoryList() {
|
|
this.tui.request("/app/productCategory/list", "get", {
|
|
// shopId: 1,
|
|
}, false, true).then((res) => {
|
|
if (res.code == 200) {
|
|
this.indexList = res.result;
|
|
for (var i = 0; i < this.indexList.length; i++) {
|
|
if (i == 0) {
|
|
this.indexList[i].parentId = true
|
|
} else {
|
|
this.indexList[i].parentId = false
|
|
}
|
|
}
|
|
this.getShareList(this.indexList[0].id);
|
|
} else {
|
|
this.tui.toast(res.message)
|
|
}
|
|
}).catch((res) => {})
|
|
},
|
|
//点击分类获取商品列表
|
|
getShareList(id) {
|
|
var that = this;
|
|
// this.shopList = []
|
|
this.tui.request("/app/product/getShareList", "POST", {
|
|
categoryId: id,
|
|
supplierName: this.searchName,
|
|
pageNum: this.pageNum,
|
|
pageSize: '10'
|
|
}, false, false).then((res) => {
|
|
if (res.code == 200) {
|
|
if(this.shopList == ''){
|
|
for (var i = 0; i < res.result.records.length; i++) {
|
|
this.shopList=res.result.records;
|
|
}
|
|
}else{
|
|
for (var i = 0; i < that.shopList.length; i++) {
|
|
if(this.shopList[i].id !=res.result.records[0].id && i==this.shopList.length){
|
|
for (var i = 0; i < res.result.records.length; i++) {
|
|
this.shopList.push(res.result.records[i]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
console.log(this.shopList)
|
|
} else {
|
|
this.tui.toast(res.message)
|
|
}
|
|
}).catch((res) => {})
|
|
},
|
|
//顶部搜索框
|
|
search(res) {
|
|
this.searchName = res.value
|
|
uni.showToast({
|
|
title: '搜索：' + res.value,
|
|
icon: 'none'
|
|
})
|
|
},
|
|
//点击左侧菜单切换
|
|
clickLeftBtn(index) {
|
|
for (var i = 0; i < this.indexList.length; i++) {
|
|
if (i == index) {
|
|
this.indexList[i].parentId = true
|
|
} else {
|
|
this.indexList[i].parentId = false
|
|
}
|
|
}
|
|
this.getShareList(this.indexList[index].id)
|
|
},
|
|
//选中商品
|
|
checkboxChange(e,item) {
|
|
item.checked = !item.checked
|
|
if(this.carList.indexOf(item.id) != -1){
|
|
this.carList.splice(this.carList.indexOf(item.id),1)
|
|
}else{
|
|
this.carList.push(item.id)
|
|
}
|
|
},
|
|
//点击分享按钮
|
|
clickShareBtn(e) {
|
|
let data = {}
|
|
if (e == 'all') {
|
|
data = {
|
|
shopId: '002',
|
|
shareType: '1', //1 分享全部
|
|
|
|
}
|
|
} else {
|
|
data = {
|
|
shopId: '002',
|
|
shareType: '2', //2 分享勾选商品
|
|
shareProductId: this.checkbox //勾选商品的id string类型 中间通过”,“连接
|
|
}
|
|
}
|
|
this.tui.request("/app/productShare/save", "POST", data, false, true).then((res) => {
|
|
if (res.code == 200) {
|
|
this.khid = res.result.id
|
|
this.$refs.share.open()
|
|
} else {
|
|
this.tui.toast(res.message)
|
|
}
|
|
}).catch((res) => {})
|
|
// this.info++
|
|
},
|
|
//点击的是转发朋友圈还是微信好友
|
|
select(index) {
|
|
if (index == 0) {
|
|
this.onShareAppMessage()
|
|
} else {
|
|
this.onShareTimeline()
|
|
}
|
|
},
|
|
onShareTimeline() {
|
|
return {
|
|
title: '查看我的推荐',
|
|
query: 'khid=' + this.khid
|
|
}
|
|
},
|
|
onShareAppMessage() {
|
|
return {
|
|
title: '查看我的推荐',
|
|
path: '/pages/index/shareStyle?khid=' + this.khid
|
|
}
|
|
},
|
|
//弹出购物车或者商品规格选择弹窗
|
|
toggle(type, item) {
|
|
this.type = type
|
|
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
|
|
if (type == 'carPopup') {
|
|
this.$refs.carPopup.open('bottom')
|
|
this.carType = this.carList.length
|
|
} else {
|
|
this.checkGoods(item);
|
|
this.$refs.popup.open('bottom')
|
|
}
|
|
},
|
|
//删除整条商品
|
|
delShop(id){
|
|
var that = this;
|
|
for (let i=0;i<this.shopList.length;i++) {
|
|
if(this.shopList[i].id == id){
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: "确定删除此条商品吗？",
|
|
success: function(res) {
|
|
that.carList.splice(that.carList.indexOf(id),1)
|
|
that.carType = that.carList.length
|
|
that.$set(that.shopList[i], 'checked', !that.shopList[i].checked)
|
|
|
|
console.log(that.carList.length)
|
|
console.log(that.carList)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
},
|
|
//关闭购物车弹窗
|
|
closeCar(){
|
|
this.$refs.carPopup.close()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
height: 100%;
|
|
}
|
|
|
|
.page1 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 92%;
|
|
}
|
|
|
|
.uni-tab__dot {
|
|
padding: 0 4px;
|
|
line-height: 15px;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
background-color: #ff0000;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.uni-tab__text {
|
|
font-size: 12px;
|
|
color: #646566;
|
|
}
|
|
|
|
.title-box {
|
|
background: #fff;
|
|
}
|
|
|
|
.bottom-box {
|
|
width: 100%;
|
|
position: fixed;
|
|
bottom: 0;
|
|
display: flex;
|
|
}
|
|
|
|
.bottom-left {
|
|
width: 15%;
|
|
position: relative;
|
|
}
|
|
|
|
.bottom-right {
|
|
width: 85%;
|
|
display: flex;
|
|
|
|
.bottom-btn {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 45%;
|
|
line-height: 35px;
|
|
height: 70rpx;
|
|
text-align: center;
|
|
margin-top: 10rpx;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
|
|
}
|
|
|
|
.bottom-btn:first-child {
|
|
background: linear-gradient(90deg, #FF9797, #FFC1E0);
|
|
border-top-left-radius: 70rpx;
|
|
border-bottom-left-radius: 70rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.bottom-btn:last-child {
|
|
background: linear-gradient(90deg, #60F3FF, #088FEB);
|
|
border-top-right-radius: 70rpx;
|
|
border-bottom-right-radius: 70rpx;
|
|
}
|
|
}
|
|
|
|
.bottom-left-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.content-box {
|
|
background: #fff;
|
|
flex: 1;
|
|
display: flex;
|
|
}
|
|
|
|
.content-left {
|
|
width: 170rpx;
|
|
background: #eee;
|
|
height: 100%;
|
|
}
|
|
|
|
.left-box {
|
|
width: 100%;
|
|
height: 90rpx;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
line-height: 90rpx;
|
|
border-bottom: 1px solid #fff;
|
|
}
|
|
|
|
.left-box-hover {
|
|
width: 100%;
|
|
height: 90rpx;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
line-height: 90rpx;
|
|
border-bottom: 1px solid #fff;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.red {
|
|
border-right: 3px solid red;
|
|
}
|
|
|
|
.content-right {
|
|
width: 550rpx;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.right-box {
|
|
width: 100%;
|
|
height: 190rpx;
|
|
display: flex;
|
|
border-bottom: 1px solid #eee;
|
|
position: relative;
|
|
}
|
|
|
|
.box-left {
|
|
width: 130rpx;
|
|
height: 131rpx;
|
|
background-size: 100%;
|
|
margin: 25rpx 30rpx 35rpx 10rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.box-left img {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
.box-right {
|
|
margin-top: 17rpx;
|
|
}
|
|
|
|
.box-right-name {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.box-right-num {
|
|
padding: 5rpx 0;
|
|
color: #777;
|
|
}
|
|
|
|
.box-right-price {
|
|
display: flex;
|
|
font-size: 25rpx;
|
|
}
|
|
|
|
.checkbox {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 30rpx;
|
|
}
|
|
|
|
.price-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.price-box text:first-child {
|
|
color: #ffa200
|
|
}
|
|
|
|
.uni-tab__cart-button-right,
|
|
.uni-tab__cart-sub-right {
|
|
display: none;
|
|
flex: none;
|
|
}
|
|
|
|
.popup-content {
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 15px;
|
|
height: 1200rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.popup-title-right-box {
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.popup-title-right {
|
|
width: 400rpx;
|
|
margin-left: 30rpx;
|
|
}
|
|
|
|
.popup-title-left {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
}
|
|
|
|
.popup-title-left image {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
|
|
}
|
|
|
|
.popup-title {
|
|
display: flex;
|
|
height: 180rpx;
|
|
border-bottom: 1px solid #eee;
|
|
margin-top: 20rpx;
|
|
}
|
|
.popup-bottom {
|
|
width: 100%;
|
|
height: 100rpx;
|
|
position: fixed;
|
|
bottom: 0;
|
|
display: flex;
|
|
}
|
|
|
|
.popup-bottom-left {
|
|
width: 50%;
|
|
line-height: 80rpx;
|
|
}
|
|
|
|
.popup-bottom-right {
|
|
width: 50%;
|
|
line-height: 100rpx;
|
|
|
|
.bottom-btn {
|
|
width: 70%;
|
|
line-height: 35px;
|
|
height: 70rpx;
|
|
text-align: center;
|
|
/* margin-top: 10rpx; */
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
margin: 0 auto;
|
|
background: linear-gradient(90deg, #60F3FF, #088FEB);
|
|
border-radius: 70rpx;
|
|
}
|
|
}
|
|
</style>
|