deepChartVueApp/pages/setting/market.vue

<template>
	<view class="main">
		<view :style="{height:iSMT+'px'}"></view>

		<view class="time-share-title">
			<text>分时设计</text>
		</view>
		<view style="height:57.5vh;background-color: white;">
			<view class="title">A股竞价</view>
			<view class="top-options">
				<view 
					class="option-btn" 
					:class="{ 'active': aStockBid === 'auto' }" 
					@click="handleAStockBidChange('auto')"
				>
					<text>智能开启</text>
					<view class="active-dot" v-if="aStockBid === 'auto'"></view>
				</view>
				<view 
					class="option-btn" 
					:class="{ 'active': aStockBid === 'open' }" 
					@click="handleAStockBidChange('open')"
				>
					<text>保持开启</text>
					<view class="active-dot" v-if="aStockBid === 'open'"></view>
				</view>
				<view 
					class="option-btn" 
					:class="{ 'active': aStockBid === 'close' }" 
					@click="handleAStockBidChange('close')"
				>
					<text>保持关闭</text>
					<view class="active-dot" v-if="aStockBid === 'close'"></view>
				</view>
			</view>

			<view class="title">K线样式</view>
			<view class="top-options">
				<view 
					class="option-btn" 
					:class="{ 'active': kStyle === 'common' }" 
					@click="handleKStyleChange('common')"
				>
					<img src="/static/my/common.png" class="kline-icon" />
					<text>普通</text>
					<view class="active-dot" v-if="kStyle === 'common'"></view>
				</view>
				<view 
					class="option-btn" 
					:class="{ 'active': kStyle === 'Outline' }" 
					@click="handleKStyleChange('Outline')"
				>
					<img src="/static/my/outline.png" class="kline-icon" />
					<text>轮廓图</text>
					<view class="active-dot" v-if="kStyle === 'Outline'"></view>
				</view>
				<view 
					class="option-btn" 
					:class="{ 'active': kStyle === 'polylines' }" 
					@click="handleKStyleChange('polylines')"
				>
					<img src="/static/my/polylines.png" class="kline-icon" />
					<text>折线图</text>
					<view class="active-dot" v-if="kStyle === 'polylines'"></view>
				</view>
			</view>

			<view class="title">除权类型</view>
			<view class="top-options">
				<view 
					class="option-btn" 
					:class="{ 'active': exRights === 'exRights' }" 
					@click="handleExRightsChange('exRights')"
				>
					<text>除权</text>
					<view class="active-dot" v-if="exRights === 'exRights'"></view>
				</view>
				<view 
					class="option-btn" 
					:class="{ 'active': exRights === 'normal' }" 
					@click="handleExRightsChange('normal')"
				>
					<text>普通</text>
					<view class="active-dot" v-if="exRights === 'normal'"></view>
				</view>
				<view 
					class="option-btn" 
					:class="{ 'active': exRights === 'Weighted' }" 
					@click="handleExRightsChange('Weighted')"
				>
					<text>加权</text>
					<view class="active-dot" v-if="exRights === 'Weighted'"></view>
				</view>
			</view>

			<view class="title">涨跌颜色</view>
			<view class="top-options">
				<view 
					class="option-btn" 
					:class="{ 'active': rfColor === 'green' }" 
					@click="handleRfColorChange('green')"
				>
					<view class="color-icon">
						<img src="/static/my/greenRise.png" class="kline-icon" />
					</view>
					<text>绿涨红跌</text>
					<view class="active-dot" v-if="rfColor === 'green'"></view>
				</view>
				<view 
					class="option-btn" 
					:class="{ 'active': rfColor === 'red' }" 
					@click="handleRfColorChange('red')"
				>
					<view class="color-icon">
						<img src="/static/my/redRise.png" class="kline-icon" />
					</view>
					<text>红涨绿跌</text>
					<view class="active-dot" v-if="rfColor === 'red'"></view>
				</view>
			</view>

			<view class="title">副图指标个数</view>
			<view class="top-options">
				<view 
					class="option-btn" 
					:class="{ 'active': indexCount === 1 }" 
					@click="handleIndexCountChange(1)"
				>
					<text>1</text>
				</view>
				<view 
					class="option-btn" 
					:class="{ 'active': indexCount === 2 }" 
					@click="handleIndexCountChange(2)"
				>
					<text>2</text>
				</view>
				<view 
					class="option-btn" 
					:class="{ 'active': indexCount === 3 }" 
					@click="handleIndexCountChange(3)"
				>
					<text>3</text>
				</view>
			</view>
		</view>

		<view class="indicator-title">
			<text>指标设置</text>
		</view>
		<view class="indicator-list">
			<view class="indicator-item" v-for="(item, index) in indicatorList" :key="index">
				<text class="indicator-text">{{ item }}</text>
				<view class="indicator-icons">
					<img src="/static/my/setting.png" class="icon" />
					<img src="/static/my/menu.png" class="icon" />
				</view>
			</view>
			<view style="height:10vh;background-color: white;"></view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { getMarketSetting, updateMarketSetting } from "@/api/setting/market"

	const iSMT = ref(0)
	const aStockBid = ref('auto')    // A股竞价：auto/open/close
	const kStyle = ref('common')     // K线样式：common/Outline/polylines
	const exRights = ref('exRights') // 除权类型：exRights/normal/Weighted
	const rfColor = ref('green')     // 涨跌颜色：green/red
	const indexCount = ref(1)        // 副图个数：1/2/3
	const indicatorList = ref(['K线', '均线', '成交量', 'KDJ', 'MACD', 'RSI'])

	const getMarketSettings = async () => {
	  try {
	    const res = await getMarketSetting()
	    if (res.code === 200) {
	      aStockBid.value = res.data.auctionDisplay ?? 'auto'
	      kStyle.value = res.data.klineStyle ?? 'common'
	      exRights.value = res.data.rightsIssueType ?? 'exRights'
	      rfColor.value = res.data.priceColorScheme ?? 'green'
	      indexCount.value = res.data.subChartCount ?? 1
	    }
	  } catch (err) {
	    console.error("获取市场设置失败：", err)
	  }
	}

	const updateSetting = async () => {
		try {
			const params = {
				auctionDisplay: aStockBid.value,
				klineStyle: kStyle.value,
				rightsIssueType: exRights.value,
				priceColorScheme: rfColor.value,
				subChartCount: indexCount.value
			}
			const res = await updateMarketSetting(params)
			if (res.code === 200) {
				uni.showToast({ title: '设置已更新', icon: 'none' })
			} else {
				uni.showToast({ title: '更新失败', icon: 'none' })
			}
		} catch (err) {
			console.error("更新设置失败：", err)
			uni.showToast({ title: '更新失败', icon: 'none' })
		}
	}

	const handleAStockBidChange = (newValue) => {
		if (newValue !== aStockBid.value) {
			aStockBid.value = newValue
			updateSetting()
		}
	}

	const handleKStyleChange = (newValue) => {
		if (newValue !== kStyle.value) {
			kStyle.value = newValue
			updateSetting()
		}
	}

	const handleExRightsChange = (newValue) => {
		if (newValue !== exRights.value) {
			exRights.value = newValue
			updateSetting()
		}
	}

	const handleRfColorChange = (newValue) => {
		if (newValue !== rfColor.value) {
			rfColor.value = newValue
			updateSetting()
		}
	}

	const handleIndexCountChange = (newValue) => {
		if (newValue !== indexCount.value) {
			indexCount.value = newValue
			updateSetting()
		}
	}

	onMounted(() => {
		iSMT.value = uni.getSystemInfoSync().statusBarHeight;
		getMarketSettings()
	})
</script>

<style scoped>
	.time-share-title {
		height: 4.5vh;
		padding: 0 40rpx;
		display: flex;
		align-items: center;
	}

	.title {
		height: 5.5vh;
		padding: 0 40rpx;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #666;
	}

	.top-options {
		height: 5.5vh;
		display: flex;
		padding: 0 40rpx;
	}

	.option-btn {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		margin: 0 10rpx;
		padding: 15rpx 0;
		font-size: 28rpx;
	}

	.option-btn.active {
		border-color: red;
	}

	.active-dot {
		width: 16rpx;
		height: 16rpx;
		background-color: red;
		border-radius: 50%;
		margin-left: 10rpx;
	}

	.kline-icon {
		margin-right: 10rpx;
		font-size: 32rpx;
	}

	.color-icon {
		margin-right: 10rpx;
		display: flex;
		gap: 4rpx;
	}

	.indicator-title {
		height: 6vh;
		padding: 0 40rpx;
		display: flex;
		align-items: center;
	}

	.indicator-list {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 40rpx;
		background-color: white;
	}

	.indicator-item {
		display: flex;
		align-items: center;
		height: 7.5vh;
		border-bottom: 1rpx solid #eee;
	}

	.indicator-text {
		font-size: 28rpx;
		flex: 1;
	}

	.indicator-icons {
		display: flex;
		gap: 100rpx;
		margin-left: auto;
	}

	.icon {
		width: 28rpx;
		height: 28rpx;
	}
</style>