H5端齐采药项目,uniapp框架
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.
 
 
 
 
 

748 lines
17 KiB

<template>
<view class="box" @touchstart="touchStart" @touchend="touchEnd">
<view class="head" style="background-color: rgb(255, 255, 255);">
<view class="head-head df aic">
<div class="input">
<u-input placeholder="商品名称/商品编码" v-model="sousuovalue" :clearable="true">
<div class="prefix" slot="suffix">
<image :src="$util.img(`/upload/weapp/pageSalesman/search.png`)" mode="" @click="changeone()"></image>
</div>
</u-input>
</div>
</view>
</view>
<view class="">
<view class="list" v-for="(item, index) in goodsList" :key="index">
<div class="df">
<div class="list-img">
<image :src="$util.img(item.goods_image)" mode=""></image>
</div>
<div class="df fdc Product-Introduction">
<div class="Product-name">{{ item.goods_name }}</div>
<div class="df aic jcsb">
<div class="number">编号 :{{ item.goods_code }}</div>
</div>
<div class="df aic jcsb">
<div class="number">产地 :{{ item.business }}</div>
</div>
<div class="df aic jcsb">
<div class="stock">库存:{{ item.stock | filterCount }}</div>
<div class="stock">规格:{{ item.sku_name }}</div>
</div>
<div class="df aic jcsb price">
<div class="price-before">当前价:¥{{ item.discount_price }}/袋</div>
<div class="df aic price-revise" v-if="isAuth">
<span>修改价</span>
<!-- item.count?'':disabled; -->
<input v-if="is_auth" maxlength="4" style="text-align: center;" type="text"
:value="valuearr.length > 0 ? valuearr : item.discount_price" @blur="(value) => change(value, index)">
<input v-else disabled maxlength="4" style="text-align: center;" type="text"
:value="valuearr.length > 0 ? valuearr : item.discount_price" @blur="(value) => change(value, index)"
@click="cck">
<!-- <span>/袋</span> -->
<!-- <input v-if="is_auth" disabled maxlength="4" style="text-align: center;" type="text" :value="valuearr.length>0?valuearr:item.discount_price">
<input v-else disabled maxlength="4" style="text-align: center;" type="text" :value="valuearr.length>0?valuearr:item.discount_price" @click="cck">
-->
</div>
</div>
</div>
</div>
<div class="button df jcf">
<div style="color: #ccc;margin-right: 40rpx;" v-if="item.max_buy > 1">{{ item.max_buy }}件限购</div>
<div style="color: #ccc;margin-right: 40rpx;" v-if="item.min_buy > 1">{{ item.min_buy }}件起购</div>
<div class="df buttoms aic">
<view class="" style="color: #ccc;" v-if="item.stock == 0">
商品已售罄
</view>
<view class="" v-else>
<view class="" v-if="item.min_buy > 1 && !item.count">
<u-number-box @overlimit="(a) => overlimit(a, item.stock, item.max_buy)" :value="item.count"
max="item.max_buy" :step=item.min_buy
:max="item.stock && item.max_buy == 0 ? item.stock : item.stock >= item.max_buy ? item.max_buy : item.stock"
:v-model="value" min="0" @change="(value) => valChange(value, item, index)">
</u-number-box>
</view>
<view class="" v-else>
<u-number-box @overlimit="(a) => overlimit(a, item.stock, item.max_buy)" :value="item.count"
:max="item.stock && item.max_buy == 0 ? item.stock : item.stock >= item.max_buy ? item.max_buy : item.stock"
:v-model="value" min="0" @change="(value) => valChange(value, item, index)">
</u-number-box>
</view>
</view>
</div>
</div>
</view>
<view class="tiaoshi">
</view>
</view>
<view class="look-over df aic jcsb">
<div>共{{ Several }}种商品{{ altogether }}个</div>
<div class="df aic jcsa" @click="btn">查看订货清单</div>
</view>
<Popup ref="child"></Popup>
<Popup ref="child"></Popup>
<!-- <u-modal :show="editPriceModal" :showCancelButton="true" cancelText="取消" confirmText="确认" @cancel="show=false"
@confirm="confirmEdit()">
<view class="content">是否确认修改价格</view>
</u-modal> -->
<!-- <template>
<timeaaa :sendData="sendData"></timeaaa>
</template> -->
</view>
</template>
<script>
import Popup from "./Popup.vue"
import {
computed
} from "vue"
import timeaaa from "@/page_salesman_index/Commodity-time/Commodity-time"
import {
EventBus
} from "@/common/js/event.js";
// import VueRouter from "vue-router";
export default {
components: {
Popup,
timeaaa
},
data() {
return {
userInfo: uni.getStorageSync('userInfo'), //账号信息
isAuth: uni.getStorageSync('salesmanAuth').is_auth, //一二类业务员权限
valuearr: '',
sousuovalue: '',
paging: "",
member: '',
di: '',
value: 0,
initialQuantity: 0,
goodsskupage: [],
page: 1,
vlaue1: 0,
touchStartX: 0, // 触屏起始点x
touchStartY: 0, // 触屏起始点y
list: [],
listLalis: [], //再次订购数据
is_auth: false,
order_goods: [],
auth_level: '',
onelist: [],
editPriceModal: false,
selectedGoodsList: [],//添加过商品数量的商品数组
};
},
onLoad(id) {
let _this = this
console.log(id, 'id');
uni.$on('listLalis', (data) => {
console.log(data, '接收的list');
this.listLalis = data
})
uni.$on('zaicidinggou', (data) => {
console.log(data, '接收的再次订购');
this.onelist = data.one
})
this.di = id.di
this.member = id.st
},
onUnload() {
uni.$off('listLalis')
uni.$off('Reorder')
uni.$off('zaicidinggou')
},
onShow() {
let _this = this
this.$api.sendRequest({
url: '/api/salasman/checkCurAuthinfo',
data: {},
success: res => {
console.log(res, '是否有权限编辑');
this.is_auth = res.data.is_auth
}
})
setTimeout(() => {
this.$api.sendRequest({
url: '/api/salasman/info',
data: {},
success: res => {
console.log(res.data.auth_level, '业务员类型');
this.auth_level = res.data.auth_level
// this.is_auth=res.data.is_auth
this.$api.sendRequest({
url: '/api/goodssku/selectPage',
data: {
store_id: this.di,//店铺id
salasman_type: res.data.auth_level//业务员类型
},
success: res => {
for (let i = 0; i < res.data.list.length; i++) {
res.data.list[i].price = 0
for (let a = 0; a < this.onelist.length; a++) {
if (this.onelist[a].goods_id == res.data.list[i]
.goods_id) {
console.log(this.onelist[a].num, 666);
res.data.list[i].count = Number(this.onelist[a]
.num)
this.valChange(this.onelist[a].num, res.data
.list[i], i)
} else {
res.data.list[i].count = 0
}
}
}
setTimeout(() => {
_this.list = res.data.list
console.log(_this.list, '列表');
}, 500)
},
fail: err => { }
})
}
})
}, 500)
},
computed: {
//共几种商品
Several: function () {
var Severala = 0
for (var i = 0; i < this.list.length; i++) {
if (this.list[i].count) {
Severala += 1
}
}
return Severala
},
//共多少个
altogether: function () {
var altogethera = 0
for (var i = 0; i < this.list.length; i++) {
let num;
if (this.list[i].count) {
console.log(this.list);
altogethera += this.list[i].count
}
}
return altogethera
},
lisa: function () {
var lisa = []
for (var i = 0; i < this.list.length; i++) {
if (this.list[i].count) {
lisa.push(this.list[i])
}
}
return lisa
},
goodsList() {
let arr = [];
// goodsskupage.length ? goodsskupage : listLalis.length ? listLalis : list
if (this.goodsskupage.length) {
arr = this.goodsskupage;
} else if (this.listLalis.length) {
arr = this.listLalis;
} else {
arr = this.list
}
return arr;
}
},
methods: {
confirmEdit() {
},
overlimit(value, stock, max_buy) {
console.log(value, stock, max_buy);
if (value == 'minus') {
this.$util.showToast({
title: '已达到最小值'
});
return
}
if (value == 'plus') {
if (max_buy == 0 || max_buy >= stock) {
this.$util.showToast({
title: '库存不足'
});
return
}
if (stock >= max_buy) {
this.$util.showToast({
title: '该商品限购' + max_buy + '件'
});
return
}
}
},
//刷新
async onPullDownRefresh() {
this.sousuovalue = ''
await this.$api.sendRequest({
url: '/api/salasman/info',
data: {},
success: res => {
console.log(res.data.auth_level, '业务员类型');
this.auth_level = res.data.auth_level
// this.is_auth=res.data.is_auth
this.$api.sendRequest({
url: '/api/goodssku/selectPage',
data: {
store_id: this.di,
salasman_type: res.data.auth_level
},
success: res => {
// pageNo(res)
uni.stopPullDownRefresh()
// this.$refs.paging.complete(res.data.list);
this.list = res.data.list
this.page = 1
},
fail: err => {
// reject()
// this.$refs.paging.complete(false);
}
})
}
})
},
async onReachBottom() {
this.page += 1
await this.$api.sendRequest({
url: '/api/salasman/info',
data: {},
success: res => {
console.log(res.data.auth_level, '业务员类型');
this.auth_level = res.data.auth_level
// this.is_auth=res.data.is_auth
this.$api.sendRequest({
url: '/api/goodssku/selectPage',
data: {
store_id: this.di,
salasman_type: res.data.auth_level,
page: this.page
},
success: res => {
// pageNo(res)
uni.stopPullDownRefresh()
// this.$refs.paging.complete(res.data.list);
this.list = [...this.list, ...res.data.list]
},
fail: err => {
// reject()
// this.$refs.paging.complete(false);
}
})
}
})
},
plus(value, e) {
console.log(value);
if (e.min_buy > e.count) {
e.count = e.min_buy
}
},
queryList(pageNo, pageSize) {
},
clear() {
this.changeone()
},
changeone() {
this.$api.sendRequest({
url: '/api/goodssku/selectPage',
data: {
keyword: this.sousuovalue,
store_id: this.di,
salasman_type: this.auth_level
},
success: res => {
console.log(res.data.list, '搜索');
console.log(this.selectedGoodsList, '已添加数量');
this.list = res.data.list
// this.list = []
/**
* selectedGoodsList
* goods_id 商品id
* count 商品数量
*/
// 搜索商品后 根据goods_id 将此前已添加数量的商品 赋值到接口返回的列表
// for (let arri = 0; arri < this.selectedGoodsList.length; arri++) {
// for (let arrj = 0; arrj < res.data.list.length; arrj++) {
// if (res.data.list[arrj].goods_id == this.selectedGoodsList[arri].goods_id) {
// res.data.list[arrj].count = this.selectedGoodsList[arri].count
// }
// this.list.push(res.data.list[arrj])
// }
// }
}
})
},
itemClick(item, index) {
console.log('点击了', item.title);
},
change(e, index) {
console.log(111111111);
console.log(e, index, '测试的数据');
// this.lisa[index].price=e.detail.value
if (e.detail.value > 0) {
//必须有商品才能修改
if (this.list[index].count) {
// console.log(111);
console.log(this.list[index], index, 'this.lisa[index]');
console.log(e, '数据');
this.list[index].price = e.detail.value
this.list[index].discount_price = e.detail.value
}
}
},
/** * 触摸开始 **/
touchStart(e) {
// console.log("触摸开始")
this.touchStartX = e.touches[0].clientX;
this.touchStartY = e.touches[0].clientY;
},
/**
* 触摸结束
**/
touchEnd(e) {
// console.log("触摸结束")
let deltaX = e.changedTouches[0].clientX - this.touchStartX;
let deltaY = e.changedTouches[0].clientY - this.touchStartY;
if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
if (deltaX >= 0) {
console.log("左滑")
this.$refs.child.callmethod()
} else {
console.log("右滑")
this.$refs.child.callmethod()
}
}
},
valChange(e, item, index) {
console.log(e, item, index, '测试', this.list);
this.selectedGoodsList.push(item)//用于重新查询数据时,保存将已添加数量的商品
if (e.value) {
item.count = e.value
this.$set(this.list, index, item)
} else if (e.value == 0) {
item.count = e.value
this.$set(this.list, index, item)
} else {
item.count = e
this.$set(this.list, index, item)
}
// console.log(this.list, 'list');
},
btn() {
// EventBus.$emit("aMsg", this.list);
console.log(this.lisa, '最终数据');
let setobj = true
let a = ''
if (this.lisa.length == 0) {
this.$util.showToast({
title: '您还未选择商品'
});
return
}
for (let i = 0; i < this.lisa.length; i++) {
if (this.lisa[i].count && this.lisa[i].count < this.lisa[i].min_buy) {
setobj = false
a = this.lisa[i].goods_name
}
}
if (!setobj) {
this.$util.showToast({
title: a + '未达到起购数量,请重新选择'
});
return
}
//传递list
setTimeout(() => {
uni.$emit('update', this.lisa)
}, 500)
uni.navigateTo({
url: `/page_salesman_index/Commodity-time/Commodity-time?id=${this.member}&di=${this.di}`,
})
},
cck() {
this.$util.showToast({
title: '请先选择商品和数量'
});
}
},
filters: {
filterCount(value) {
let num;
if (value > 9999) { //大于9999显示x.xx万
num = parseInt((Math.floor(value / 1000) / 10)) + '万+'
} else if (value < 9999 && value > -9999) {
num = value
} else if (value < -9999) { //小于-9999显示-x.xx万
num = parseInt(-(Math.floor(Math.abs(value) / 1000) / 10)) + '万+'
}
return num;
},
}
}
</script>
<style lang="scss">
.tiaoshi {
height: 24rpx;
// padding-bottom: 24rpx;
// box-sizing: border-box;
// margin-bottom: 24rpx;
}
// ::v-deep {
// .u-number-box__minus {
// width: 24rpx;
// height: 24rpx !important;
// color: rgb(51, 51, 51);
// }
// .u-number-box__plus {
// width: 24rpx;
// height: 24rpx !important;
// background: #FFFFFF;
// color: rgb(51, 51, 51);
// }
// .u-number-box__input {
// width: 78rpx;
// height: 40rpx;
// background: #F6F6F6;
// border-radius: 8rpx;
// padding: 0;
// margin: 0 8rpx;
// }
// .u-icon__icon {
// color: rgb(51, 51, 51) !important;
// }
// .u-icon__icon {
// color: rgb(51, 51, 51) !important;
// }
// }
.box {
min-height: 1460rpx;
padding-bottom: 100rpx;
box-sizing: border-box;
// height: 1660rpx;
overflow: hidden;
// overflow-y: hidden;
}
.input {
flex: 1;
.prefix {
image {
width: 36rpx;
height: 36rpx;
position: relative;
top: 8rpx;
margin-left: 20rpx;
}
}
::v-deep {
.u-input--radius {
border-radius: 16rpx;
border: 2rpx solid #E8E8E8;
}
}
}
.buttoms {
.buttoms-one {
width: 24rpx !important;
height: 24rpx !important;
margin: 0 !important;
}
input {
width: 78rpx;
height: 40rpx;
background: #F6F6F6;
border-radius: 8rpx;
margin: 0 10rpx;
text-align: center;
}
.buttoms-two {
width: 24rpx;
height: 24rpx;
}
}
.head {
padding: 24rpx 30rpx 0 30rpx;
box-sizing: border-box;
.head-head {
margin: 0 0 24rpx 0;
}
}
.list {
width: 702rpx;
// height: 324rpx;
background: #FFFFFF;
border-radius: 24rpx;
margin: 0 auto;
box-sizing: border-box;
margin-top: 24rpx;
padding-bottom: 24rpx;
box-sizing: border-box;
.list-img {
width: 176rpx;
height: 176rpx;
border-radius: 8rpx;
margin: 32rpx 24rpx 0 32rpx;
image {
width: 176rpx;
height: 176rpx;
border-radius: 8rpx;
}
}
.Product-Introduction {
.Product-name {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 40rpx;
margin-top: 32rpx;
}
.number {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 34rpx;
// margin-top: 32rpx;
}
.stock {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 34rpx;
// margin-top: 32rpx;
// margin-left: 90rpx;
}
.price {
margin-top: 4rpx;
.price-before {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 34rpx;
}
.price-revise {
input {
width: 78rpx;
height: 40rpx;
background: #F6F6F6;
border-radius: 8rpx;
}
span:nth-child(1) {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #F33B50;
line-height: 34rpx;
margin-left: 46rpx;
margin-right: 16rpx;
}
span:nth-child(2) {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 34rpx;
margin-left: 6rpx;
}
}
}
}
}
.button {
margin-top: 44rpx;
margin-right: 48rpx;
}
.look-over {
width: 750rpx;
height: 88rpx;
background: #FFFFFF;
position: fixed;
bottom: 0rpx;
z-index: 20;
div:nth-child(1) {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 40rpx;
margin-left: 24rpx;
}
div:nth-child(2) {
width: 240rpx;
height: 72rpx;
background: #21BBF3;
border-radius: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 40rpx;
margin-right: 24rpx;
}
}
</style>