<template>
<scroll-view>
<view>
<uni-segmented-control :current="current" :values="items" @clickItem="switch_tab" styleType="button"
activeColor="#3589b8" class="bx-switch"></uni-segmented-control>
<view class="content">
<view v-if="current === 0">
<nx-search :selectList="search_list" button="inside" placeholder="请输入关键字" @search="search_sample"
@confirm="search_sample" v-model="searchQuery.keyword" />
<uni-list>
<uni-list-item :showArrow="false">
<view class="flex text-bold align-center text-center">
<view class="flex-sub">样品ID</view>
<view class="flex-sub">样品名称</view>
<view class="flex-sub">样品状态</view>
<view class="flex-sub">样品时间</view>
</view>
</uni-list-item>
</uni-list>
<uni-list v-for="(item,index) in sample_list" :key="item.sample_number">
<uni-list-item :showArrow="false" style="border-top:1px solid #8799A3;"
@tap="show_modal(item.sample_number)">
<view class="flex align-center text-center">
<view class="flex-sub bx-outline">{{item.c_sample_id_sm}}</view>
<view class="flex-sub">{{item.sample_name}}</view>
<view class="flex-sub">{{item.status}}</view>
<view class="flex-sub">{{item.login_date}}</view>
</view>
</uni-list-item>
</uni-list>
</view>
<view v-if="current === 1">
<nx-search :selectList="search_list" button="inside" placeholder="请输入关键字" @search="search_sample"
@confirm="search_sample" v-model="searchQuery.keyword" />
<uni-list>
<uni-list-item :showArrow="false">
<view class="flex text-bold align-center text-center">
<view class="flex-sub">ID</view>
<view class="flex-sub">名称</view>
<view class="flex-sub">状态</view>
<view class="flex-sub">时间</view>
</view>
</uni-list-item>
</uni-list>
<uni-list v-for="(item,index) in sample_list" :key="item.sample_number">
<uni-list-item :showArrow="false" style="border-top:1px solid #8799A3;"
@tap="show_pic(item.sample_number)">
<view class="flex align-center text-center">
<view class="flex-sub bx-outline">{{item.c_sample_id_sm}}</view>
<view class="flex-sub">{{item.sample_name}}</view>
<view class="flex-sub">{{item.status}}</view>
<view class="flex-sub">{{item.login_date}}</view>
</view>
</uni-list-item>
</uni-list>
</view>
<uni-pagination :show-icon="true" :total="pagination.total" :current="pagination.current"
:pageSize="pagination.pageSize" @change="pagination_search"></uni-pagination>
</view>
</view>
<!-- 样品接收弹窗 -->
<view class="cu-modal" :class="modalName == 'Receive' ? 'show' : ''">
<view class="cu-dialog bg-white">
<view class="cu-bar justify-end">
<view class="model-title">接收提醒</view>
<view class="action" @tap="hide_modal"><text class="cuIcon-close text-red"></text></view>
</view>
<view class=" align-center">
<view class="flex text-center">
<view class="flex-twice">
<swiper style="height: 600rpx;" :indicator-dots="true" :circular="true" :autoplay="true"
:interval="3000" :duration="1000">
<swiper-item v-for="(item,index) in swiper.info" :key="index">
<img class="swiper-img" :src="item.url"></img>
</swiper-item>
</swiper>
</view>
</view>
<view class="flex padding-sm text-center">
<view class="flex-twice">
<button class="cu-btn bg-blue" @tap="upload_pic()">拍照</button>
</view>
</view>
</view>
<view class="cu-bar bg-white align-center justify-center">
<view class="action">
<button class="cu-btn bg-red " @tap="hide_modal">取消</button>
<button class="cu-btn bg-green margin-left" @tap="recive_sample()">接收样品</button>
</view>
</view>
</view>
</view>
<!-- 样品照片照片 -->
<view class="cu-modal" :class="pic_modal == 'pic' ? 'show' : ''">
<view class="cu-dialog bg-white">
<view class="cu-bar justify-end">
<view class="model-title">照片详情</view>
<view class="action" @tap="hide_pic()"><text class="cuIcon-close text-red"></text></view>
</view>
<view class="flex">
<view class="flex-twice">
<swiper style="height: 600rpx;" :indicator-dots="true" :circular="true" :autoplay="true"
:interval="3000" :duration="1000">
<swiper-item v-for="(item,index) in swiper.info" :key="index">
<img class="swiper-img" :src="item.url" :alt="item.url" ></img>
</swiper-item>
</swiper>
</view>
</view>
<view class="cu-bar bg-white align-center justify-center">
<view class="action">
<button class="cu-btn bg-green margin-left" @tap="hide_pic()">确定</button>
</view>
</view>
</view>
</view>
<!-- 扫码接收弹窗 -->
<view class="cu-tips" :class="TipModal == 'tips' ? 'show' : ''">
<view class="cu-dialog tips-text">
<view class="align-center bg-black">
<view class="cu-tips-list" @tap="scan_sample()">
<view class="flex align-center">
<view class="flex-sub">
<uni-icons type="scan" color="white" size="20"></uni-icons>
</view>
<view class="flex-treble">扫码接收</view>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</template>
<script>
import {
uniqueId
} from '../../js_sdk/mineking-tool/tool.js'
export default {
data() {
return {
//图片轮播组件
swiper: {
info: [{
url: ''
},
],
current: 0,
mode: 'round'
},
//搜索组件
search_value: '',
searchQuery: {
keyword: '',
selectIndex: 0
},
search_list: [{
key: 'sample_number',
value: '样品编号'
},
{
key: 'sample_name',
value: '样品名称'
}
],
//
current: 0,
//下拉选择框的index
selectIndex: 0,
items: ['未接收', '已接收'],
//接收样品弹窗
modalName: '',
pic_modal: '',
TipModal: '',
sample_list: [{
sample_number: '001',
c_sample_id_sm: '',
sample_name: '02233',
status: '未接收',
login_date: '2021-05-06'
}
],
//选中的数据
selected: '',
//分页组件
pagination: {
current: 1,
total: 1,
pageSize: 10
},
//查询参数
queryParams: {
type: '0sample_number',
keyword: '',
current: 1,
total: 1,
pageSize: 10
},
}
},
onNavigationBarButtonTap() {
if (this.TipModal == 'tips') {
this.TipModal = '';
} else {
this.TipModal = 'tips';
}
},
onLoad() {
this.load_sample_list()
//console.log(uniqueId())
},
methods: {
default_img(){
uni.showToast({
title:'xxxx'
})
},
/* 切换tab页 */
switch_tab(e) {
console.log(e)
this.current = e.currentIndex
this.reload_pages()
this.queryParams.type = this.current + this.search_list[this.selectIndex].key
this.queryParams.keyword = e.keyword
this.load_sample_list()
},
/* 切换tab页时重置分页组件数据 */
reload_pages() {
var pagination = {
current: 1,
total: 1,
pageSize: 10
}
},
/* 搜索 */
search_sample(e) {
//debugger
//组合查询类型,“tab页编码+类型名称”
this.selectIndex = e.selectIndex
this.queryParams.type = this.current + this.search_list[this.selectIndex].key
this.queryParams.keyword = e.keyword
this.load_sample_list()
},
/* 未接收样品照片弹窗 */
show_modal(e) {
this.queryParams.type = 'sample'
this.queryParams.keyword = e
this.download_pic()
this.modalName = 'Receive'
this.selected = e
},
/* 隐藏操作弹窗 */
hide_modal(e) {
this.modalName = ''
},
/* 已接收样品照片 弹窗*/
show_pic(e) {
this.queryParams.type = 'sample'
this.queryParams.keyword = e
this.download_pic()
this.pic_modal = 'pic'
},
/* 隐藏照片弹窗 */
hide_pic() {
this.pic_modal = ''
},
/* 接收样品 */
recive_sample() {
this.modalName = ''
var samples = {
'sample_number': this.selected,
'status': 'I',
'old_status': 'U',
'received_by': 'admin',
'assigned_operator': 'default'
}
uni.request({
url: getApp().globalData._api_get_sample_recived,
method: 'GET',
data: samples,
success: res => {
if (res.data.Data > 0) {
this.queryParams.keyword = ''
this.queryParams.type = '0sample_number'
this.load_sample_list()
}
},
fail: () => {},
complete: (res) => {
console.log(res.data)
}
});
},
/* 扫码*/
scan_sample() {
this.TipModal = ''
var _this = this
// #ifdef APP-PLUS
uni.scanCode({
success(res) {
_this.selected = res.result
var scanresult = res.result
console.log(res)
//查询样品是否存在,是否被接收
uni.request({
url: getApp().globalData._api_get_sample_detail,
method: 'GET',
data: {
type: "0",
keyword: res.result
},
success: res => {
console.log(res.data.Data)
if (res.data.Data == "") {
uni.showToast({
image: '../../static/labicon/vwemergency.png',
title: '不存在'
})
} else if (res.data.Data[0].STATUS != 'U') {
uni.showToast({
image: '../../static/labicon/vwemergency.png',
title: res.data.Data[0].STATUS
})
} else {
_this.selected = scanresult
_this.show_modal(scanresult)
}
},
fail: () => {},
complete: () => {}
});
//_this.recive_sample()
}
});
// #endif
},
/* 分页查询函数 */
pagination_search(e) {
this.queryParams.current = e.current
this.load_sample_list()
//console.log(e)
},
/* 加载列表 */
load_sample_list() {
uni.request({
url: getApp().globalData._api_get_sample,
method: 'GET',
data: this.queryParams,
success: res => {
this.pagination.total = res.data.Data.TotalItems
this.sample_list = res.data.Data.Items
console.log(this.pagination)
},
fail: () => {},
complete: () => {}
});
},
/* 上传图片 */
upload_pic() {
var filepaths = []
uni.chooseImage({
success: (res) => {
const tempFilePaths = res.tempFilePaths;
//console.log(res.tempFilePaths)
var files = [];
var fileParams = [];
var upload_url = getApp().globalData.basic_url + getApp().globalData
._api_post_pic
console.log(res.tempFilePaths.length)
for (var i = 0; i < res.tempFilePaths.length; i++) {
files.push({
'uri': res.tempFilePaths[i],
'name': uniqueId(),
})
}
if (process.env.NODE_ENV === 'development') {
//args.url = getApp().globalData.basic_url + args.url
upload_url = getApp().globalData.basic_url + getApp().globalData
._api_post_pic
} else {
upload_url = getApp().globalData.dev_url + getApp().globalData
._api_post_pic
}
uni.uploadFile({
url: upload_url, //仅为示例,非真实的接口地址
// filePath: tempFilePaths[0],
// name: 'file',
files: files,
formData: {
user_id: '',
object_number: this.selected,
object_type: 'sample',
guid: uniqueId()
},
success: (uploadFileRes) => {
console.log(uploadFileRes.data);
//拍照后重新加载
this.download_pic()
},
complete: (res) => {
console.log(res)
}
});
}
});
},
/* 加载图片路径 */
download_pic() {
console.log(this.queryParams)
console.log(this.BascUrl())
uni.request({
url: getApp().globalData._api_get_pic,
method: 'GET',
data: this.queryParams,
success: res => {
var len = res.data.Data.length
this.swiper.info = []
for (var i = 0; i < res.data.Data.length; i++) {
this.swiper.info.push({
'url': this.BascUrl() + '/pic/' + res.data.Data[i]
})
}
if(len == 0){
this.swiper.info.push({'url':'../../static/image/default.png'})
}
console.log(this.swiper.info)
},
fail: () => {},
complete: () => {}
});
}
}
}
</script>
<style>
.bx-list-item {
padding-left: 100rpx;
padding-right: 100rpx;
}
.bx-switch {
/* padding-top: 20rpx; */
margin-top: 20rpx;
}
.model-title {
position: absolute;
text-align: center;
width: calc(100% - 170px);
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
height: 30px;
font-size: 16px;
line-height: 30px;
cursor: none;
pointer-events: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.tip-location {
position: fixed;
top: 0;
right: 10;
bottom: 0;
left: 0;
z-index: 1110;
opacity: 0;
outline: 0;
text-align: center;
-ms-transform: scale(1.185);
-webkit-transform: scale(1.185);
transform: scale(1.185);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
background: rgba(0, 0, 0, 0.6);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
pointer-events: none;
}
.tips-text {
width: 33%;
margin: 10rpx;
position: fixed;
/* #ifdef APP-PLUS */
top: 0;
/* #endif */
/* #ifdef H5 */
top: 44px;
/* #endif */
right: 0;
}
.swiper-img {
width: 100%;
height: 600rpx;
max-width: 100%;
display: block;
background: url(../../static/image/default.png) repeat;
background-size: cover;
}
</style>
- 发布:2021-12-24 11:12
- 更新:2021-12-24 15:46
- 阅读:677
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: windows11
HBuilderX类型: 正式
HBuilderX版本号: 3.2.16
手机系统: Android
手机系统版本号: Android 11
手机厂商: 华为
手机机型: 华为mate30
页面类型: vue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
新建一个uniapp项目,将提供的代码复制到一个页面中,打包成APP测试
新建一个uniapp项目,将提供的代码复制到一个页面中,打包成APP测试
预期结果:
弹窗正常打开
弹窗正常打开
实际结果:
弹窗不能正常打开
弹窗不能正常打开
bug描述:
该页面的弹窗在APP端无法弹出,在H5端没问题,真机调试也没问题。
2 个回复
DCloud_UNI_Anne
用示例代码hello uni-app能出现你的问题吗?
不能的话你需要排查出来具体你哪个页面,甚至哪一行导致的。
找出来具体原因后提供一个能复现你描述的bug的最小化demo,让我们及时定位问题,及时修复。
3***@qq.com (作者)
重建uniapp项目没问题,排查这个问题我需要反复打正式包,次数不够该如何解决
DCloud_UNI_Anne
用示例代码hello uni-app没问题的话,你需要排查自己的代码,打自定义基座调试
2021-12-24 17:35
3***@qq.com (作者)
回复 DCloud_UNI_Anne: 初步怀疑是list组件的问题
2021-12-24 18:06
3***@qq.com (作者)
回复 DCloud_UNI_Anne: 废弃了list组件,改用uni-table组件,问题解决了。
2021-12-24 20:10
3***@qq.com (作者)
回复 DCloud_UNI_Anne: 今天重新打包后又不行了,还是这个界面,还是H5没问题,APP打包后就不行。昨天时用的自定义基座调试成功的。
2021-12-25 15:38
DCloud_UNI_Anne
回复 3***@qq.com: 自定义基座调试有复现过这个问题吗?建议最小化demo,删减法逐步排查
2021-12-25 17:26
3***@qq.com (作者)
回复 DCloud_UNI_Anne: 有时出现,有时不出现
2021-12-26 10:52