feat:价格趋势需求更改

pages/clue/components/trend.vue

@@ -0,0 +1,280 @@
+<template>
+    <u-modal :show="trendModal" title="价格趋势" @confirm="closeTrendModal" confirmText="关闭弹窗" height="80%">
+        <view class="trend_modal">
+            <u-search placeholder="请输入型号" v-model="model" @blur="searchTrend" @custom="searchTrend"></u-search>
+            <view class="charts_box" v-if="chartShow">
+                <u--text type="primary" :text="`最大价格：${Math.max(...maxPrice)}元`"></u--text>
+                <u--text type="warning" :text="`最小价格：${Math.min(...minPrice)}元`"></u--text>
+                <qiun-data-charts type="line" :chartData="chartData" canvasId="trendChart" :opts="opts" :ontouch="true"
+                    tooltipFormat="tooltipFormatPrice" width="700rpx" height="500rpx" backgroundColor="#ffffff"
+                    @getIndex="handleChartClick" />
+            </view>
+
+            <!-- <u--text v-if="cardData.length > 0" :text="'日期：' + date"></u--text> -->
+            <view class="card-container" v-if="cardData.length > 0">
+                <view class="card-item" v-for="(item, index) in cardData" :key="index">
+                    <view class="card-row">
+                        <span class="card-label">型号：</span>
+                        <span class="card-value">{{ item.model }}</span>
+                    </view>
+                    <view class="card-row">
+                        <span class="card-label">日期：</span>
+                        <span class="card-value">{{ formatTime(item.recycleTime) }}</span>
+                    </view>
+                    <view class="card-row">
+                        <span class="card-label">价格：</span>
+                        <span class="card-value">{{ item.price }}元</span>
+                    </view>
+                    <view class="card-row">
+                        <span class="card-label">回收情况：</span>
+                        <span class="card-value">{{ formatRecycleSituation(item.recycleSituation) }}</span>
+                    </view>
+                    <view class="card-row">
+                        <span class="card-label">备注：</span>
+                        <span class="card-value">{{ item.remark || '-' }}</span>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </u-modal>
+</template>
+
+<script>
+import { recycleSituationList } from '@/pages/wareHouse/js/public.js'
+export default {
+    name: 'ComponentName',
+    data() {
+        return {
+            trendModal: false,
+            chartData: {},
+            color: [],
+            opts: {
+                color: this.color,
+                padding: [20, 10, 20, 0],
+                dataLabel: true,
+                dataPointShape: true,
+                enableScroll: true,
+
+                xAxis: {
+                    disableGrid: true,
+                    scrollShow: true,
+                    itemCount: 10,
+                    rotateLabel: true,
+                    rotateAngle: 45,
+                },
+                yAxis: {
+                    gridType: "dash",
+                    dashLength: 7,
+                },
+                legend: {
+                    show: false,
+                    type: 'scroll',
+                    orient: 'horizontal',
+                    pageSize: 3,
+                    pageIconSize: 12,
+                    pageIconColor: '#666',
+                    pageIconInactiveColor: '#ccc',
+                    pageTextStyle: {
+                        color: '#666',
+                        fontSize: 12
+                    },
+                    bottom: 0
+                },
+                extra: {
+                    line: {
+                        type: "curve",
+                        width: 3,
+                        activeType: "hollow",
+                        linearType: "custom",
+                        onShadow: true,
+                        animation: "horizontal"
+                    },
+                    tooltip: {
+                        legendShow: false,
+                        bgOpacity: 0.6,
+                    }
+                }
+            },
+            model: "",
+            maxPrice: [],
+            minPrice: [],
+            chartShow: false,
+            cardData: [],
+            date: '',
+            recycleSituationList: recycleSituationList,
+        }
+    },
+    props: {
+    },
+    emits: [],
+    methods: {
+        openTrendModal() {
+            this.trendModal = true;
+        },
+        closeTrendModal() {
+            this.model = ""
+            this.date = ""
+            this.cardData = []
+            this.chartShow = false
+            this.trendModal = false;
+        },
+        searchTrend(val) {
+                if (val !== '') {
+                    uni.$u.api.inquiryChart({
+                        model: val,
+                    }).then(res => {
+                        if (res.data.length == 0) {
+                            uni.$u.toast("暂无数据")
+                            this.minPrice = []
+                            this.maxPrice = []
+                            this.chartShow = false
+                            return
+                        }
+                        const response = res.data
+                        this.maxPrice = []
+                        this.minPrice = []
+                        this.color = []
+                        const categories = []
+                        const dateMap = {}
+                        response.forEach(item => {
+                            this.maxPrice.push(item.max)
+                            this.minPrice.push(item.min)
+                            item.list.forEach(i => {
+                                i.recycleTime = this.formatTime(i.recycleTime)
+                                if (!dateMap[i.recycleTime]) {
+                                    dateMap[i.recycleTime] = true
+                                    categories.push(i.recycleTime)
+                                }
+                            })
+                        })
+                        const series = response.map((item) => {
+                            const color = this.getRandomColor()
+                            this.color.push(color)
+                            const data = categories.map(date => {
+                                const itemData = item.list.find(i => this.formatTime(i.recycleTime) == date)
+                                return itemData ? itemData.price : null
+                            })
+                            return {
+                                name: item.model,
+                                data: data,
+                                list: item.list,
+                                setShadow: [
+                                    3,
+                                    8,
+                                    15,
+                                    color
+                                ],
+                            }
+                        })
+                        this.opts.color = this.color
+                        const chartData = {
+                            categories: categories,
+                            series: series
+                        }
+                        this.chartData = JSON.parse(JSON.stringify(chartData))
+                        this.cardData = []
+                        this.chartShow = true
+                    }).catch((err) => {
+                        uni.$u.toast(err)
+                    })
+                }
+            },
+        formatTime(date){
+            return this.$dayjs(date).format('YYYY-MM-DD')
+        },
+        formatRecycleSituation(situation) {
+            const item = this.recycleSituationList.find(i => i.value == situation)
+            return item ? item.name : '-'
+        },
+        handleChartClick(event) {
+            const index = event.currentIndex.index;
+            // 获取点击的日期
+            const date = this.chartData.categories[index];
+            this.date = date;
+
+            // 构建该日期的所有型号价格数据
+            const cardData = [];
+            this.chartData.series.forEach(series => {
+                const price = series.data[index];
+                if (price !== null) {
+                    // 查找对应日期的完整数据
+                    const itemData = series.list.find(i => i.recycleTime === date);
+                    cardData.push({
+                        model: series.name,
+                        price: price,
+                        recycleSituation: itemData?.recycleSituation || '',
+                        remark: itemData?.remark || ''
+                    });
+                }
+            });
+            this.cardData = cardData;
+        },
+        getRandomColor() {
+            var letters = '0123456789ABCDEF';
+            var color = '#';
+            for (var i = 0; i < 6; i++) {
+                color += letters[Math.floor(Math.random() * 16)];
+            }
+            return color;
+        },
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.trend_modal {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 20rpx;
+}
+
+.card-container {
+	display: flex;
+	flex-direction: column;
+	gap: 16rpx;
+	max-height: 500rpx;
+	overflow-y: auto;
+    font-size:26rpx;
+
+	&::-webkit-scrollbar {
+		width: 6rpx;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: #f1f1f1;
+		border-radius: 3rpx;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: #c1c1c1;
+		border-radius: 3rpx;
+
+		&:hover {
+			background: #a8a8a8;
+		}
+	}
+}
+
+.card-item {
+	background-color: #f5f5f5;
+	border-radius: 8rpx;
+	padding: 16rpx;
+	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
+}
+
+.card-row {
+	display: flex;
+	margin-bottom: 10rpx;
+	align-items: flex-start;
+
+	.card-label {
+		flex-shrink: 0;
+	}
+
+	.card-value {
+		flex: 1;
+		word-break: break-all;
+	}
+}
+</style>

pages/clue/mixins/clue.js

@@ -135,66 +135,7 @@ export default {
 				titleId: "",
 				videoId: "",
 			},
-			trendModal: false,
-			chartData:{},
-			color:[],
-			opts: {
-				color: this.color,
-				padding: [20, 10, 20, 0],
-				dataLabel: true,
-				dataPointShape: true,
-				enableScroll: true,
-				
-				xAxis: {
-					disableGrid: true,
-					scrollShow: true,
-					itemCount: 10,
-					rotateLabel: true,
-					rotateAngle: 45,
-				},
-				yAxis: {
-					gridType: "dash",
-					dashLength: 7,
-				},
-				legend: {
-					show: false,
-					type: 'scroll',
-					orient: 'horizontal',
-					pageSize: 3,
-					pageIconSize: 12,
-					pageIconColor: '#666',
-					pageIconInactiveColor: '#ccc',
-					pageTextStyle: {
-						color: '#666',
-						fontSize: 12
-					},
-					bottom: 0
-				},
-				extra: {
-					line: {
-						type: "curve",
-						width: 3,
-						activeType: "hollow",
-						linearType: "custom",
-						onShadow: true,
-						animation: "horizontal"
-					},
-					tooltip:{
-						legendShow: true,
-						bgOpacity: 0.6,
-					}
-				}
-			},
-			model: "",
-			maxPrice: [],
-			minPrice: [],
-			chartShow: false,
-			tableData: [],
-			date:'',
-			columns: [
-				{ label: '型号', prop: 'model'},
-				{ label: '价格(元)', prop: 'price' },
-			],
+			
 		}
 	},
 	onPullDownRefresh() {
@@ -221,101 +162,9 @@ export default {
 	// },
 		methods: {
 			handleTrend() {
-				this.trendModal = true;
-			},
-			handleTrendConfirm() {
-				this.model = ""
-				this.date = ""
-				this.tableData = []
-				this.chartShow = false
-				this.trendModal = false;
-			},
-			searchTrend(val) {
-				if (val !== ''){
-					uni.$u.api.inquiryChart({
-						model: val,
-					}).then(res => {
-						if(res.data.length == 0){
-							uni.$u.toast("暂无数据")
-							this.minPrice = []
-							this.maxPrice = []
-							this.chartShow = false
-							return
-						}
-						const response = res.data
-						this.maxPrice = []
-						this.minPrice = []
-						this.color = []
-						const categories = []
-						const dateMap = {}
-						response.forEach(item => {
-							this.maxPrice.push(item.max)
-							this.minPrice.push(item.min)
-							item.list.forEach(i => {
-								if (!dateMap[i.recycleTime]) {
-									dateMap[i.recycleTime] = true
-									categories.push(i.recycleTime)
-								}
-							})
-						})
-						const series = response.map((item) => {
-							const color = this.getRandomColor()
-							this.color.push(color)
-							const data = categories.map(date => {
-								const itemData = item.list.find(i => i.recycleTime === date)
-								return itemData ? itemData.price : null
-							})
-							return {
-								name: item.model,
-								data: data,
-								setShadow: [
-									3,
-									8,
-									15,
-									color
-								],
-							}
-						})
-						this.opts.color = this.color
-						const chartData = {
-							categories: categories,
-							series: series
-						}
-						this.chartData = JSON.parse(JSON.stringify(chartData))
-						this.chartShow = true
-					}).catch((err) => {
-						uni.$u.toast(err)
-					})
-				}
-			},
-			handleChartClick(event) {
-				console.log(event);
-				const  index  = event.currentIndex.index;
-				// 获取点击的日期
-				const date = this.chartData.categories[index];
-				this.date = date;
-				
-				// 构建该日期的所有型号价格数据
-				const tableData = [];
-				this.chartData.series.forEach(series => {
-					const price = series.data[index];
-					if (price !== null) {
-						tableData.push({
-							model: series.name,
-							price: price
-						});
-					}
-				});
-				this.tableData = tableData;
-			},
-			getRandomColor(){
-				var letters = '0123456789ABCDEF';
-				var color = '#';
-				for (var i = 0; i < 6; i++) {
-					color += letters[Math.floor(Math.random() * 16)];
-				}
-				return color;
+				this.$refs.trendRef.openTrendModal()
 			},
+			
 			handleAddClue() {
 				uni.navigateTo({
 					url: "/pages/addClue/index"

pages/clue/scss/clue.scss

@@ -107,9 +107,3 @@
 		padding: 15px;
 	}
 }
-.trend_modal{
-	width:100%;
-	display: flex;
-	flex-direction: column;
-	gap: 20rpx;
-}

pages/privateClue/index.vue

@@ -48,20 +48,8 @@
 			groupChild="clueTagDataList" label-key="name" value-key="id" placeholder="请选择线索标签"
 			v-model="queryParams.allTagList" multiple clearable ref="clueTag"
 			@confirm="handleClueTagConfirm"></group-select>
-		<u-modal :show="trendModal" title="价格趋势" @confirm="handleTrendConfirm" confirmText="关闭弹窗">
-			<view class="trend_modal">
-				<u-search placeholder="请输入型号" v-model="model" @blur="searchTrend" @custom="searchTrend"></u-search>
-				<view class="charts_box" v-if="chartShow">
-					<u--text type="primary" :text="`最大价格：${Math.max(...maxPrice)}元`"></u--text>
-					<u--text type="warning" :text="`最小价格：${Math.min(...minPrice)}元`"></u--text>
-					<qiun-data-charts type="line" :chartData="chartData" canvasId="trendChart" :opts="opts" :ontouch="true" tooltipFormat="tooltipFormatPrice"
-						width="700rpx" height="500rpx" backgroundColor="#ffffff" @getIndex="handleChartClick" />
-				</view>
-				<u--text v-if="tableData.length > 0" :text="'日期：' + date"></u--text>
-				<Table ref="customTable" v-if="tableData.length > 0" :tableData="tableData" height="100px" :columns="columns" stripe></Table>
-			</view>
-		</u-modal>
-			
+		
+		<trend ref="trendRef"></trend>
 		<view class="suspension_button trend" @click="handleTrend">
 			趋势
 		</view>
@@ -77,7 +65,7 @@
 	import post from "@/pages/clue/post/index.vue";
 	import sort from "@/pages/clue/components/sort.vue";
 	import filterQuery from "@/pages/clue/components/filterQuery.vue";
-	import Table from '@/components/custom-table/index.vue'
+	import trend from '@/pages/clue/components/trend.vue'
 	export default {
 		onPullDownRefresh() {
 			uni.stopPullDownRefresh();
@@ -87,7 +75,7 @@
 			post,
 			sort,
 			filterQuery,
-			Table,
+			trend,
 		},
 		mixins: [clue],
 		onLoad(option) {

pages/publicClue/index.vue

@@ -48,20 +48,8 @@
 			groupChild="clueTagDataList" label-key="name" value-key="id" placeholder="请选择线索标签"
 			v-model="queryParams.allTagList" multiple clearable ref="clueTag"
 			@confirm="handleClueTagConfirm"></group-select>
-		<u-modal :show="trendModal" title="价格趋势" @confirm="handleTrendConfirm" confirmText="关闭弹窗">
-			<view class="trend_modal">
-				<u-search placeholder="请输入型号" v-model="model" @blur="searchTrend" @custom="searchTrend"></u-search>
-				<view class="charts_box" v-if="chartShow">
-					<u--text type="primary" :text="`最大价格：${Math.max(...maxPrice)}元`"></u--text>
-					<u--text type="warning" :text="`最小价格：${Math.min(...minPrice)}元`"></u--text>
-					<qiun-data-charts type="line" :chartData="chartData" canvasId="trendChart" :opts="opts" :ontouch="true" tooltipFormat="tooltipFormatPrice"
-						width="700rpx" height="500rpx" backgroundColor="#ffffff" @getIndex="handleChartClick" />
-				</view>
-				<u--text v-if="tableData.length > 0" :text="'日期：' + date"></u--text>
-				<Table ref="customTable" v-if="tableData.length > 0" :tableData="tableData" height="100px" :columns="columns" stripe></Table>
-			</view>
-		</u-modal>
-		
+
+		<trend ref="trendRef"></trend>
 		<view class="suspension_button trend" @click="handleTrend">
 			趋势
 		</view>
@@ -77,7 +65,7 @@
 	import post from "@/pages/clue/post/index.vue";
 	import sort from "@/pages/clue/components/sort.vue";
 	import filterQuery from "@/pages/clue/components/filterQuery.vue";
-	import Table from '@/components/custom-table/index.vue'
+	import trend from '@/pages/clue/components/trend.vue'
 	export default {
 		onPullDownRefresh() {
 			uni.stopPullDownRefresh();
@@ -87,7 +75,7 @@
 			post,
 			sort,
 			filterQuery,
-			Table,
+			trend,
 		},
 		mixins: [clue],
 		onLoad() {

pages/wareHouse/components/edit.vue

@@ -26,7 +26,7 @@
                                 @click="handlePasteRecognition(recognitionContent)"></u-button>
                         </view>
                     </u-form-item>
-                    <u-form-item :label="'商品图片(' + (formData.goodPicFileList.length || 0) + '张)'" required  borderBottom>
+                    <u-form-item :label="'商品图片(' + (formData.goodPicFileList.length || 0) + '张)'" required prop="goodPicFileList" borderBottom>
                         <view class="imgs_scroll">
                             <ImgsRowScroll v-if="formData.goodPicFileList.length > 0" :isShowDeleteIcon="true"
                                 @deleteImgInfo="getDeleteGoodPicInfo" imgMode="aspectFill" :totalWidth="400"
@@ -57,7 +57,7 @@
                     <u-form-item label="系列" class="u-form-item-row" borderBottom>
                         <u--input v-model="formData.series" placeholder="请输入" clearable border="none"></u--input>
                     </u-form-item>
-                    <u-form-item label="型号" class="u-form-item-row" borderBottom>
+                    <u-form-item label="型号" required prop="model" class="u-form-item-row" borderBottom>
                         <u--input v-model="formData.model" placeholder="请输入" clearable border="none"></u--input>
                     </u-form-item>
                     <u-form-item label="机芯类型" class="u-form-item-row" borderBottom>
@@ -355,6 +355,9 @@ export default {
                 dictLabel: [
                     { required: true, message: '请选择品牌', trigger: ['blur', 'change'] },
                 ],
+                model: [
+                    { required: true, message: '请输入型号', trigger: ['blur', 'change'] },
+                ],
                 productCondition: [
                     { required: true, message: '请选择商品成色', trigger: ['blur', 'change'] },
                 ],