feat: 增加介质材料模块及案例展示模块
This commit is contained in:
202
pages_tool/seal/medium/detail.vue
Normal file
202
pages_tool/seal/medium/detail.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="content">
|
||||
<view class="goods-attr">
|
||||
<view class="title">{{title}}</view>
|
||||
<view class="attr-wrap">
|
||||
<block v-for="(item, index) in list" :key="index">
|
||||
<view class="item">
|
||||
<text class="attr-name" :style="{background: item.background}">{{item.text}}</text>
|
||||
<text class="value-name" :style="{color: item.color}">{{item.value}}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<block v-if="g0>0">
|
||||
<view class="foot">
|
||||
<view @tap="generateImage" class="item" style="margin-right:30rpx;">导出图片</view>
|
||||
<view @tap="generatePdf" class="item">导出PDF</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "搜索结果",
|
||||
info: {},
|
||||
list: [],
|
||||
keyword: "",
|
||||
g0: 1 // 默认显示导出按钮
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
themeColor() {
|
||||
return '#ffffff';
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.keyword) {
|
||||
this.keyword = options.keyword;
|
||||
}
|
||||
this.getdata();
|
||||
},
|
||||
onShow() {
|
||||
// 页面显示时执行
|
||||
},
|
||||
methods: {
|
||||
generatePdf() {
|
||||
const url = this.$util.img(this.info.files_url);
|
||||
uni.showLoading({ title: '正在加载' });
|
||||
try {
|
||||
uni.downloadFile({
|
||||
url: url,
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
uni.hideLoading();
|
||||
const filePath = res.tempFilePath;
|
||||
uni.shareFileMessage({
|
||||
filePath: filePath,
|
||||
success: () => {},
|
||||
fail: console.error
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
uni.hideLoading();
|
||||
},
|
||||
complete: (res) => {
|
||||
if (res.statusCode === 404) {
|
||||
uni.showToast({ title: '文件不存在', icon: 'none' });
|
||||
}
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.log("CatchClause", error);
|
||||
uni.hideLoading();
|
||||
}
|
||||
},
|
||||
generateImage() {
|
||||
const url = this.$util.img(this.info.img_url);
|
||||
uni.showLoading({ title: '正在加载' });
|
||||
uni.downloadFile({
|
||||
url: url,
|
||||
success: (res) => {
|
||||
uni.hideLoading();
|
||||
if (res.statusCode === 200) {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
this.$util.showToast({ title: '保存成功' });
|
||||
},
|
||||
fail: (err) => {
|
||||
if (err.errMsg !== 'saveImageToPhotosAlbum:fail auth deny' && err.errMsg !== 'saveImageToPhotosAlbum:fail:auth denied') {
|
||||
this.$util.showToast({ title: '保存失败，请稍后重试' });
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$util.showToast({ title: '下载失败' });
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log(err);
|
||||
uni.hideLoading();
|
||||
this.$util.showToast({ title: '下载失败' });
|
||||
}
|
||||
});
|
||||
},
|
||||
getdata() {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/seal/info',
|
||||
data: { keyword: this.keyword },
|
||||
success: (res) => {
|
||||
console.log(res);
|
||||
this.list = res.value;
|
||||
this.info = res;
|
||||
this.title = res.name;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.goods-attr {
|
||||
margin: 24rpx 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods-attr .title {
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 32rpx;
|
||||
margin: 0 20rpx;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.goods-attr .attr-wrap {
|
||||
margin: 20rpx;
|
||||
border: 2rpx solid #f1f1f1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods-attr .attr-wrap .item {
|
||||
display: flex;
|
||||
border-bottom: 2rpx solid #f1f1f1;
|
||||
}
|
||||
|
||||
.goods-attr .attr-wrap .item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.goods-attr .attr-wrap .item .attr-name {
|
||||
width: 200rpx;
|
||||
padding-right: 30rpx;
|
||||
background-color: #fbfafa;
|
||||
white-space: pre-wrap;
|
||||
border-right: 2rpx solid #f1f1f1;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
font-size: 26rpx;
|
||||
text-align: right;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.goods-attr .attr-wrap .item .value-name {
|
||||
padding-left: 30rpx;
|
||||
white-space: pre-wrap;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
font-size: 26rpx;
|
||||
flex: 1;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.foot {
|
||||
display: flex;
|
||||
margin: 40rpx 20rpx;
|
||||
}
|
||||
|
||||
.foot .item {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
background: #ff4646;
|
||||
padding: 10rpx 0;
|
||||
color: #fff;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
</style>
|
||||
245
pages_tool/seal/medium/search.vue
Normal file
245
pages_tool/seal/medium/search.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="content">
|
||||
<view class="cate-search">
|
||||
<view class="search-box">
|
||||
<input class="uni-input" maxlength="50" confirm-type="search" :focus="true" placeholder="请输入介质名称 '如汽油'" v-model="inputValue" @focus="inputFocus" @confirm="search" @input="inputChange" />
|
||||
<text @tap="search" class="iconfont icon-sousuo3"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="search-content">
|
||||
<block v-if="g0">
|
||||
<view class="history">
|
||||
<view class="history-box">
|
||||
<view class="history-top">
|
||||
<view class="title">搜索结果</view>
|
||||
</view>
|
||||
<view class="history-bottom">
|
||||
<block v-for="(item, index) in list" :key="index">
|
||||
<view @tap="otherSearch(item, index)" @longtap="deleteItem(item, index)" class="history-li">
|
||||
<view>{{item.name}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view>
|
||||
<ns-empty v-if="list.length === 0" isIndex="false" text="暂无数据"></ns-empty>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import nsEmpty from '@/components/ns-empty/ns-empty';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
nsEmpty
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inputValue: "",
|
||||
historyList: [],
|
||||
searchList: [],
|
||||
alikeList: [],
|
||||
isIndex: false,
|
||||
searchWords: "",
|
||||
hotList: [],
|
||||
isAllHistory: false,
|
||||
list: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
themeColor() {
|
||||
return '#ffffff';
|
||||
},
|
||||
g0() {
|
||||
return this.list.length;
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.keyword) {
|
||||
this.inputValue = options.keyword;
|
||||
}
|
||||
// 初始化搜索历史记录
|
||||
if (!uni.getStorageSync("search")) {
|
||||
uni.setStorageSync("search", []);
|
||||
}
|
||||
this.findHistoryList();
|
||||
// 可以在这里调用获取热门搜索列表的方法
|
||||
this.findHotList();
|
||||
},
|
||||
onShow() {
|
||||
this.$nextTick(() => {
|
||||
this.getHistoryHeight();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
findHistoryList() {
|
||||
this.historyList = uni.getStorageSync("search").reverse();
|
||||
},
|
||||
deleteHistoryList() {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "确认删除全部历史记录？",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.setStorageSync("search", []);
|
||||
this.findHistoryList();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteItem(item, index) {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "确认删除该条历史记录？",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
let search = uni.getStorageSync("search");
|
||||
search = search.filter((val) => val != item);
|
||||
uni.setStorageSync("search", search);
|
||||
this.findHistoryList();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
findHotList() {
|
||||
// 获取热门搜索列表
|
||||
this.$api.sendRequest({
|
||||
url: '/api/seal/hotlist',
|
||||
success: (res) => {
|
||||
this.hotList = res.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
inputFocus() {
|
||||
// 输入框聚焦事件
|
||||
},
|
||||
inputChange(e) {
|
||||
this.inputValue = e.target.value;
|
||||
},
|
||||
search() {
|
||||
if (!this.inputValue.trim()) {
|
||||
uni.showToast({ title: '请输入搜索关键词', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
// 保存搜索历史
|
||||
this.saveSearchHistory(this.inputValue);
|
||||
// 执行搜索
|
||||
this.$api.sendRequest({
|
||||
url: '/api/seal/search',
|
||||
data: { keyword: this.inputValue },
|
||||
success: (res) => {
|
||||
this.list = res.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
otherSearch(item, index) {
|
||||
// 其他搜索方式处理
|
||||
this.inputValue = item.name;
|
||||
this.search();
|
||||
},
|
||||
saveSearchHistory(keyword) {
|
||||
let search = uni.getStorageSync("search");
|
||||
// 去重
|
||||
search = search.filter((val) => val != keyword);
|
||||
search.unshift(keyword);
|
||||
// 限制历史记录数量
|
||||
if (search.length > 20) {
|
||||
search = search.slice(0, 20);
|
||||
}
|
||||
uni.setStorageSync("search", search);
|
||||
this.findHistoryList();
|
||||
},
|
||||
getHistoryHeight() {
|
||||
// 获取历史记录高度（如果需要）
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
padding: 20rpx;
|
||||
background-color: #f8f8f8;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.cate-search {
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 25rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
}
|
||||
|
||||
.uni-input {
|
||||
flex: 1;
|
||||
height: 60rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.iconfont.icon-sousuo3 {
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.search-content {
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.history {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.history-box {
|
||||
border: 1rpx solid #f1f1f1;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.history-top {
|
||||
padding: 20rpx;
|
||||
border-bottom: 1rpx solid #f1f1f1;
|
||||
}
|
||||
|
||||
.history-top .title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.history-bottom {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.history-li {
|
||||
padding: 20rpx;
|
||||
border-bottom: 1rpx solid #f1f1f1;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.history-li:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.history-li:active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user