Files
CompanyProject/金壶/appV1/pages/home/search-list.vue
2024-09-27 01:32:49 +08:00

914 lines
24 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="contant">
<!-- 排序|筛选 -->
<view class="topfind">
<view class='bg-linear-gradient is_top d-flex'>
<view class="top_info w-90 x_margin0auto d-flex j-sb a-center">
<image src="../../static/my/left.png" mode="" style="height:30upx; width:19upx; padding-right:30upx;" @click="boback()"></image>
<view class="is_top_search x-bg-white h-100 flex-1">
<image src="../../static/home/search.png" mode="" class="search_img" @click="search"></image>
<input type="text" v-model="keyword" confirm-type="search" @confirm="search" placeholder="请输入药名/厂家" ref="myInput"
class="search_input h-100" @input="changeInput($event)" />
<image class="closeicon" v-if="keyword!=''" @click="removewored()" src="../../static/shoppingCart/cancel.png" mode=""></image>
<view class="search_liandong bg_F2F2F2 shadow" v-if='flag==true'>
<view class="border-bottom x-bg-white search_items" v-for='(item,index) in search_liandong' :key='index' @tap='to_choose(item)'>{{item.name}}({{item.manufacturer_name}})</view>
</view>
<!-- <input type="text" value="" placeholder="搜索" class="search_input h-100" @input="changeInput($event)" v-model="keyword" /> -->
</view>
<!-- <image src="../../static/my/message.png" mode="" class="message" @click="to_mes()"></image> -->
<!-- <img src="../../static/my/carw.png" class="message" alt="" @tap="to_car()"> -->
<image src="../../static/my/carw.png" class="message" alt="" @tap="to_car()"></image>
<view class="car_GoodsNum" v-if='car_GoodsNum>0'>{{car_GoodsNum}}</view>
</view>
</view>
<view class="list_menu d-flex j-around padding-zy30">
<view @click="chooseMenu(0)" :class="{active_menu:menu_index==0}">综合</view>
<view @click="chooseMenu(1)" :class="{active_menu:menu_index==1}" class="d-flex a-center">
<view>销量</view>
<image src="../../static/shoppingCart/shangxia_hui.png" mode="" class="paixu" v-if="is_saleClickMenu==false"></image>
<image src="../../static/shoppingCart/up_paixu.png" mode="" class="paixu" v-if='sale_menu_flag==true && is_saleClickMenu==true'></image>
<image src="../../static/shoppingCart/down_paixu.png" mode="" class="paixu" v-if='sale_menu_flag==false && is_saleClickMenu==true'></image>
</view>
<view @click="chooseMenu(2)" :class="{active_menu:menu_index==2}" class="d-flex a-center">
<view>价格</view>
<image src="../../static/shoppingCart/shangxia_hui.png" mode="" class="paixu" v-if="is_priceClickMenu==false"></image>
<image src="../../static/shoppingCart/up_paixu.png" mode="" class="paixu" v-if='price_menu_flag==true && is_priceClickMenu==true'></image>
<image src="../../static/shoppingCart/down_paixu.png" mode="" class="paixu" v-if='price_menu_flag==false && is_priceClickMenu==true'></image>
</view>
</view>
<!-- <view class="list_menu d-flex j-around padding-zy30">
<view v-for='(item,index) of list_menu' :key='index' :class="{active_menu:index==menu_index}" @click="chooseMenu(index)">{{item.name}}</view>
</view> -->
<view class="no_img" v-if='list.length<=0'>
<image src="../../static/shoppingCart/nopic.png" mode="" class="no_img"></image>
<view class="text-center x_text_hui">{{data_text}}</view>
</view>
</view>
<!-- 占位 -->
<view class="place"></view>
<view class="list padding-30 bg_F2F2F2" v-if='list.length>0'>
<view class="list_items x-bg-white margin-bottom22" v-for="(item,index) in list" :key="index">
<view class="d-flex a-center">
<view class="d-flex goods_items a-center w-100">
<!-- <view class="box_img" @click="goodsDetail(item)">
<an-image :src="'https://'+item.pc_thumb" alt="https://ydyd-develop-file.oss-cn-hangzhou.aliyuncs.com/imageerror.jpg"></an-image>
</view> -->
<view class="box_img" @click="goodsDetail(item)" :style="{backgroundImage: 'url(' + 'https://'+item.pc_thumb + ')', backgroundSize:'contain',backgroundPosition:'center'}">
</view>
<view class="goods_txt" style="width:65%;" @click="goodsDetail(item)">
<view class="d-flex a-center">
<image src="../../static/shoppingCart/xian.png" mode="" style="height:30upx; width:30upx;margin-right:30upx;"
v-if='item.is_limit==1'></image>
<image src="../../static/shoppingCart/re.png" mode="" style="height:30upx; width:30upx;margin-right:30upx;" v-if='item.supplier_id<=10000'></image>
<view class="font_28 some_txt font-weight flex-1 ">{{item.goods_name}}</view>
</view>
<view class="x-text-159" v-if='item.is_limit==1'>{{item.limit_info}}</view>
<view class="textOVerFlow">{{item.manufacturer_name}}</view>
<view class="d-flex a-center">
{{item.spec_desc}}
<image src="../../static/shoppingCart/zheng.png" class="margin-zy20" mode="" style="height:30upx; width:30upx;"
v-if='item.retail_flag == 1'></image>
<image src="../../static/shoppingCart/ling.png" class="margin-zy20" mode="" style="height:30upx; width:30upx;"
v-if='item.retail_flag == 0'></image>
{{item.retail_flag==0?item.retail_num:item.entirety_num}}{{item.unit}}/
</view>
<view class="x-text-159 font-weight font_28"> {{item.price}}</view>
<image src="../../static/font/cart_icon.png" mode="" class='x_car' alt="" @click.stop='toAdd_car(item)'></image>
</view>
<!-- <view class="goods_txt flex-1" @click="goodsDetail(item)">
<view class="font-weight font_28">{{item.goods_name}}</view>
<view class="">{{item.manufacturer_name}}</view>
<view class="">{{item.factory_name}}</view>
<view class="d-flex">{{item.spec_desc}}&nbsp;&nbsp;{{item.retail_flag == 0 ? "零":"整"}}&nbsp;&nbsp;{{item.retail_flag==0?item.retail_num:item.entirety_num}}{{item.unit}}/</view>
<view class="font_28 font-weight x-text-159">{{item.price}}</view>
<img src="../../static/font/cart_icon.png" class='x_car' alt="" @click.stop='toAdd_car(item)'>
</view> -->
</view>
</view>
</view>
<view class="loading-world" v-if="isScroll">
<image class="loading-img" src="../../static/my/loading.gif" alt=""></image>
加载中......
</view>
<view class="loading-world" v-if="!isScroll"> 已经到底了 </view>
</view>
<!-- 购物车遮挡层 -->
<view class="car_pop h-100 w-100" v-if="is_pop_show==true" @tap='cancel_popCar()'>
<view class="pop_box bg-white w-100" style="background-color: #FFFFFF;" @tap.stop='stop_click()'>
<view class="pop_goods_info d-flex a-center padding-zy64">
<!-- <image src="../../static/shoppingCart/cancel.png" mode="" @click="cancel_popCar()" class="cancel_pop"></image> -->
<view class="pop_box_img d-flex">
<image v-if='is_pop_car' :src="'https://'+is_pop_car.pc_thumb" mode="" class="pop_img"></image>
<view>
<view class="d-flex a-center">
<image src="../../static/shoppingCart/xian.png" mode="" style="height:30upx; width:30upx;" v-if='is_pop_car.is_limit==1'></image>
<view class="font_28 some_txt font-weight" style="margin-left:30upx;">{{is_pop_car.goods_name}}</view>
</view>
<view class="x-text-159" v-if='is_pop_car.is_limit==1'>{{is_pop_car.limit_info}}</view>
<view class="">{{is_pop_car.manufacturer_name}}</view>
<view class="d-flex a-center">
{{is_pop_car.spec_desc}}
<image src="../../static/shoppingCart/zheng.png" class="margin-zy20" mode="" style="height:30upx; width:30upx;"
v-if='is_pop_car.retail_flag == 1'></image>
<image src="../../static/shoppingCart/ling.png" class="margin-zy20" mode="" style="height:30upx; width:30upx;"
v-if='is_pop_car.retail_flag == 0'></image>
{{is_pop_car.retail_flag==0?is_pop_car.retail_num:is_pop_car.entirety_num}}{{is_pop_car.unit}}/
</view>
<view class="x-text-159 font-weight font_28"> {{is_pop_car.price}}</view>
</view>
</view>
</view>
<view class="address">
<view class="x_text_hei2828">选择购买数量</view>
<view class="d-flex j-sb a-center">
<view class="x-text-159 x-text-font24">小提示该物品购买数量必须为包装的倍数</view>
<view class="goods_count d-flex">
<view class="bianji_cars_num bianji_cars_numJian" @click="reduse_goodsNum()">-</view>
<input type="number" value="" class="bianji_cars_num bianji_cars_numAdd uni-input" cursor-spacing="0" v-model="goods_num" />
<view class="bianji_cars_num bianji_cars_numAdd" @click="add_goodsNum()">+</view>
</view>
</view>
</view>
<view class="x-bg-159 x_public_box pop_sure x-text-white w-90" @click="sure_btn()">确定</view>
</view>
</view>
</view>
</template>
<script>
import X_goods from '../../utils/models/goods.js'
import {
Config
} from '../../utils/config.js'
import tuiIcon from "@/components/icon/icon"
import uniDrawer from "@/components/uni-ui/uni-drawer/uni-drawer.vue"
import card from "@/components/common/card.vue"
import zcmRadioGroup from "@/components/common/radio-group.vue"
import zcmRadioGroupNew from "@/components/common/radio-group__.vue"
import radioGroupSell from "@/components/common/radio-group-sell.vue"
import anImage from '@/components/an-image/an-image'
import searchList from "@/components/search-list/search-list.vue"
export default {
components: {
tuiIcon,
uniDrawer,
card,
zcmRadioGroup,
zcmRadioGroupNew,
searchList,
radioGroupSell,
anImage
},
data() {
return {
page: 1,
isScroll: true,
data_text: '数据加载中...',
car_GoodsNum: 0, //购物车的商品数量
is_pop_show: false,
goods_num: 0, // 商品的当前数量
is_pop_car: '', // 购物车弹框里面的数据
manufacturer_name: '',
menu_index: 0,
list_menu: [{
name: '综合'
}, {
name: '销量'
}, {
name: '价格'
}],
// 收索分页
current_page: 1,
keyword: "", //关键词
cate_id: '', //分类id
activity_id: '', //活动id
retail_flag: '', // 零整标志:0-零售,1-整件售 允许值: 0, 1
sort_field: '', //排序字段"default", "sale", "price", "term_validity"
sort_order: '', //排序规则 :0-升序1-降序
price_start: '', //价格区间起点
price_end: '', //价格区间只能终点
term_validity: '', // 效期:0 半年以上,1 一年以上,2 所有,3 近效期(90天内) 默认值: 2 允许值: 0, 1, 2, 3
drug_form: '', // 剂型
manufacturer: '', // // 生产厂家
list: [],
showRigth: false,
is_key: '',
search_liandong: '',
flag: '',
sale_menu_flag : false,
price_menu_flag : false,
is_saleClickMenu:false, // 判断销量是否点击了菜单
is_priceClickMenu:false, // 判断价格是否点击了菜单
screen: {
currentIndex: 0,
list: [
// status选中状态
{
name: "综合",
status: 2,
key: "default"
},
{
name: "销量",
status: 0,
key: "sale"
},
{
name: "价格",
status: 0,
key: "price"
}
]
},
// 生产厂家
label2: {
selected: 0,
list: []
},
//剂型
label3: {
selected: 0,
list: []
},
// 售卖
label4: {
selected: 0,
list: []
}
}
},
onLoad(option) {
if (option.keyword) {
this.keyword = option.keyword
this.menu_index = 99
}
if (option.activity_id) {
this.activity_id = option.activity_id
this.menu_index = 99
}
if (option.manufacturer) {
this.manufacturer = option.manufacturer
this.menu_index = ''
}
if (option.cate_id) {
this.cate_id = option.cate_id
this.menu_index = ''
}
if (this.menu_index = 0) {
this.keyword = ''
}
this.current_page = 1
this.getData();
},
onShow() {
this.car_GoodsNum = Config.shooppingCar_num
},
computed: {
// 排序相关
options() {
let obj = this.screen.list[this.screen.currentIndex]
let value = obj.status === 1 ? 1 : 0
return {
[obj.key]: value
}
},
},
// 搜索关键字
onNavigationBarSearchInputChanged(e) {
this.keyword = e.text
},
//上拉加载需要自己在page.json文件中配置"onReachBottomDistance"
onReachBottom() {
if (this.isScroll) {
uni.showNavigationBarLoading();
this.getData();
}
// setTimeout(() => {
// uni.showNavigationBarLoading();
// }, 500);
// this.getData();
},
//下拉刷新需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
// onPullDownRefresh() {
// setTimeout(()=>{
// uni.stopPullDownRefresh();
// }, 1000);
// },
mounted() {
},
methods: {
// 选择菜单
chooseMenu(index) {
this.menu_index = index
if(this.menu_index==0){
this.sort_field = "default"
}
if(this.menu_index==1){
this.is_saleClickMenu = true;
this.is_priceClickMenu = false;
this.sort_field = "sale"
this.sale_menu_flag = !this.sale_menu_flag
// 排序规则:0-升序1-降序
if(this.sale_menu_flag==true){
this.sort_order = 0
}else{
this.sort_order = 1
}
}
if(this.menu_index==2){
this.is_priceClickMenu = true;
this.is_saleClickMenu = false;
this.sort_field = "price"
this.price_menu_flag = !this.price_menu_flag
// 排序规则:0-升序1-降序
if(this.price_menu_flag==true){
this.sort_order = 0
}else{
this.sort_order = 1
}
}
this.list = []
this.current_page = 1
this.getData();
// this.activity_id = ''
// this.keyword = ''
},
// 阻止时间冒泡 不要删除
stop_click() {
},
// removewored 清空输入框
removewored() {
this.keyword = ""
this.flag = false;
},
// 添加购物车
async sure_btn() {
if (this.goods_num <= 0) {
uni.showToast({
title: '请添加商品数量',
duration: 2000,
icon: 'none'
});
} else {
if (this.is_pop_car.retail_flag == 0) { //零售
if (this.goods_num % this.is_pop_car.retail_num !== 0) {
uni.showToast({
title: '该物品购买数量必须为包装的倍数',
duration: 2000,
icon: 'none'
});
} else {
this.is_pop_show = !this.is_pop_show
this.car_GoodsNum += 1 // 需要修改
let res = await X_goods.X_addCar(this.is_pop_car.sku_id, this.is_pop_car.batch_id, this.goods_num, '')
if (res.code == 200 && res.data.errcode == 200) {
uni.showToast({
title: '添加成功',
duration: 2000,
icon: 'none'
});
}
this.handleError(res, res => {
// this.uc_id = res;
if (res.code == 40000) {
uni.showToast({
title: res.message,
duration: 2000,
icon: 'none'
});
}
})
}
} else { // 整售
if (this.goods_num % this.is_pop_car.entirety_num !== 0) {
uni.showToast({
title: '该物品购买数量必须为包装的倍数',
duration: 2000,
icon: 'none'
});
} else {
this.is_pop_show = !this.is_pop_show
this.car_GoodsNum += 1 // 需要修改
let res = await X_goods.X_addCar(this.is_pop_car.sku_id, this.is_pop_car.batch_id, this.goods_num, '')
if (res.code == 200 && res.data.errcode == 200) {
uni.showToast({
title: '添加成功',
duration: 2000,
icon: 'none'
});
}
this.handleError(res, res => {
// this.uc_id = res;
if (res.message == 40000) {
uni.showToast({
title: res.message,
duration: 2000,
icon: 'none'
});
}
})
}
}
}
},
to_car() {
uni.switchTab({
url: '/pages/shoppingCart/shoppingCart'
});
},
imgError(e) {
},
to_mes() {
uni.navigateTo({
url: '../my/is_message'
})
},
// 返回键
boback() {
uni.navigateBack(1)
},
// 关闭按钮
cancel_popCar() {
this.is_pop_show = false;
},
//减 商品的数量
reduse_goodsNum() {
if (this.is_pop_car.retail_flag == 0) { //零售
this.goods_num = this.goods_num - this.is_pop_car.retail_num
} else { // 整售
this.goods_num = this.goods_num - this.is_pop_car.entirety_num
}
if (this.goods_num <= 0) {
this.goods_num = 0
uni.showToast({
title: '商品数量不得为负',
duration: 2000,
icon: 'none'
});
}
},
// 增加 商品的数量
async add_goodsNum() {
if (this.goods_num == this.is_pop_car.stock_num) {
uni.showToast({
title: '库存不足',
duration: 2000,
icon: 'none'
});
} else {
if (this.is_pop_car.retail_flag == 0) { //零售
this.goods_num = Number(this.goods_num) + Number(this.is_pop_car.retail_num)
} else { // 整售
this.goods_num = Number(this.goods_num) + Number(this.is_pop_car.entirety_num)
}
}
},
// 加入购物车
async toAdd_car(item) {
this.is_pop_car = item
console.log(this.is_pop_car)
this.is_pop_show = true;
if (item.retail_flag == 0) { //零售
this.goods_num = item.retail_num
} else { // 整售
this.goods_num = item.entirety_num
}
},
// 进入详情页
goodsDetail(item) {
uni.navigateTo({
url: '/pages/shoppingCart/goodsDetail?sku_id=' + item.sku_id
});
},
// 加载数据
async getData() {
this.data_text = '数据加载中...'
let res = await X_goods.search(
this.keyword, // 关键字
this.cate_id, //分类id
this.activity_id, // 活动id
this.retail_flag, //零整标志:0-零售,1-整件售 允许值: 0, 1
this.sort_field, //排序字段"default", "sale", "price", "term_validity"
this.sort_order, // //排序规则 :0-升序1-降序
this.term_validity, //
this.drug_form,
this.manufacturer, // 生产厂家
this.price_start, //开始价格
this.price_end, // 结束价格
this.current_page // 分页 页
)
if (res.data.data.current_page == res.data.data.last_page) {
this.isScroll = false
uni.hideNavigationBarLoading();
// uni.showToast({
// title: '到底了',
// duration: 1000,
// icon: 'none'
// });
// this.loadingText="到底了";
}
if (res.data.data.data.length <= 0) {
this.data_text = '暂无数据'
}
for (let i = 0; i < res.data.data.data.length; i++) {
this.list.push(res.data.data.data[i])
}
this.current_page++
uni.hideNavigationBarLoading();
this.handleError(res, res => {
// this.label2.list = res.data.to_select.manufacturer //生产厂家
// this.label3.list = res.data.to_select.drug_form //剂型
// this.label4.list = res.data.to_select.retail_flag //售卖
})
},
// 初始化搜索
initSearch() {
this.label.selected = 0
this.condition = {}
this.current_page = 1
this.list = []
},
// 搜索联动
async the_searchList() {
let res = await X_goods.x_searchList(this.keyword)
this.search_liandong = res.data
this.handleError(res, res => {})
},
// 搜索
to_choose(item) {
this.list = []
this.keyword = item.name
// this.manufacturer = item.manufacturer_name
this.current_page = 1
this.getData();
this.flag = false
},
// 搜索 监听input框的值
changeInput(event) {
this.keyword = event.detail.value
this.manufacturer = ''
if (event.detail.value == '') {
this.flag = false
this.list = []
this.current_page = 1
this.getData();
} else {
this.flag = true
this.the_searchList();
}
},
search() {
this.isScroll = true;
this.manufacturer = ''
this.flag = false;
uni.hideKeyboard();
if (this.keyword === '') {
uni.showToast({
title: '关键词不能为空',
icon: 'none'
});
} else {
this.list = []
this.current_page = 1
this.getData();
uni.hideKeyboard()
}
},
}
}
</script>
<style lang="scss">
.place {
background-color: #ffffff;
height: 258upx;
}
.uni-app {
width: 100%;
}
,
.uni-page-wrapper {
display: block;
position: relative;
}
.uni-page {}
.some_txt {
width: 300upx;
overflow: hidden;
/*隐藏溢出*/
text-overflow: ellipsis;
/*当文本溢出包含元素时显示省略符号来代表被修剪的文本*/
white-space: nowrap;
}
html,
body,
uni-page-body {
background-color: #F2F2F2;
}
.contant {
height: auto;
overflow: hidden;
}
.topfind {
width: 100%;
position: fixed;
z-index: 100;
}
.is_top {
height: 168upx;
padding-top: 90upx;
.top_info {
height: 60upx;
position: relative;
.is_top_search {
border-radius: 50upx;
position: relative;
.search_liandong {
max-height: 750upx;
overflow-y: auto;
font-size: 20upx;
color: #989898;
width: 100%;
margin-top: 2upx;
line-height: 80upx;
z-index: 101;
position: fixed;
right: 0upx;
.search_items {
margin-top: 2upx;
padding: 0 30upx;
line-height: 60upx;
}
}
.search_img {
position: absolute;
left: 40upx;
top: 20upx;
height: 27upx;
width: 27upx;
}
.closeicon {
width: 40upx;
height: 40upx;
position: absolute;
top: 10upx;
right: 10upx;
}
.search_input {
margin-left: 50upx;
color: #989898;
line-height: 60upx;
}
}
.message {
height: 60upx;
width: 70upx;
}
.car_GoodsNum {
background-color: #EB5159;
color: #FFFFFF;
position: absolute;
top: -6upx;
right: -18upx;
height: 40upx;
width: 40upx;
line-height: 40upx;
font-size: 20upx;
border-radius: 50%;
text-align: center;
}
}
}
.list_menu {
height: 90upx;
width: 100%;
line-height: 90upx;
position: fixed;
z-index: 100;
background-color: #FFFFFF;
.paixu{
height:29upx;
margin-left:8upx;
width:14upx;
}
.active_menu {
color: #6E67FF;
border-bottom: 4upx solid #6E67FF;
}
}
.no_img {
height: 198upx;
width: 294px;
margin: 90upx auto;
}
.list {
height: calc(100% - 258upx);
overflow-y: auto;
z-index: 99;
.loading-world {
text-align: center;
color:#515151;
font-size: 24upx;
.loading-img{
width:28upx;
height:28upx;
}
}
.list_items {
padding: 30upx 0;
border-radius: 20upx;
.box_img {
height: 153.3upx;
// width: 270upx;
width:35%;
padding: 10upx;
margin: 0 10upx;
background-repeat: no-repeat;
}
.goods_items {
position: relative;
.goods_count {
position: absolute;
bottom: -14upx;
right: 8upx;
}
.x_car {
position: absolute;
right: 50upx;
bottom: 0upx;
height: 50upx;
width: 50upx;
}
}
.line {
height: 4upx;
background-color: #F2F2F2;
}
}
}
.car_pop {
overflow: hidden;
position: fixed;
left: 0%;
top: 0%;
background-color: rgba(0, 0, 0, 0.2);
.pop_box {
position: absolute;
left: 0%;
bottom: 0%;
// height:707upx;
border-radius: 10upx 10upx 0 0;
.cancel_pop {
height: 38upx;
width: 38upx;
position: absolute;
right: 30upx;
top: 30upx;
}
.pop_goods_info {
height: 267upx;
border-bottom: 5upx dashed #989898;
.pop_box_img {
.pop_img {
margin-right: 60upx;
vertical-align: middle;
height: 142upx;
width: 200upx;
}
}
}
.address {
padding: 20upx 30upx;
border-bottom: 4upx solid #F2F2F2;
.dizhi_img {
margin-right: 30upx;
height: 27upx;
width: 20upx;
}
.pop_right {
height: 22upx;
width: 13upx;
}
.goods_count {
// position: absolute;
// bottom: -14upx;
// right: 8upx;
}
}
.pop_sure {
line-height: 82upx;
}
}
}
.radio-active {
background: #FCE0D5 !important;
color: #EB7320 !important;
border-color: #EB7320 !important;
;
}
.tui-drawer-content {
padding: 16rpx 30rpx 30rpx 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
.tui-input {
border: 0;
height: 64rpx;
border-radius: 32rpx;
width: 45%;
background: #f7f7f7;
text-align: center;
font-size: 24rpx;
color: #333;
}
</style>