wx_oms/siteManagement/OilSiteOilsPrice/index.vue

<template>
	<view class="enterpriseRecharge_body">
		<topBar height="343rpx" title="油价管理">
			<view slot="coment">
				<view class="header_seach">
					<view class="header_seach_seach">
						<view class="seach_input">
							<view @click="inputFocusSite" class="special-input">
								{{ parameter.params.siteName || '油站名称'}}
								<image v-if="parameter.params.siteName" class="close" src="../../static/close.png"
									@click.stop="inputClearSite"></image>
							</view>
							<view @click="inputFocusOtherSite" class="special-input">
								{{ parameter.params.otherSiteName || '三方油站名称'}}
								<image v-if="parameter.params.otherSiteName" class="close" src="../../static/close.png"
									@click.stop="inputClearOtherSite"></image>
							</view>
							<button @tap='search' class="header_seach_butten">
								<uni-icons type="search" size="20" color="#bbbbbb"></uni-icons>
							</button>
						</view>
					</view>
					<scroll-view scroll-x="true" style="width: 100%;height: 60rpx;position: absolute;bottom: 0;">
						<view class="Navigation">
							<view @tap="seleFn(item);seleindex = index"
								:class="seleindex==index?'navigation_seleitem':'navigation_item'"
								v-for="(item,index) in navigation" :key="index">
								{{item.label}}
								<uni-icons :animation="animationData" class="icoon" v-if="index==0" type="refreshempty"
									style="margin-left: 10rpx;" size="15" color="#bbbbbb"></uni-icons>
							</view>
						</view>
					</scroll-view>

				</view>
			</view>
		</topBar>
		<view class="listContainer" style='flex: 1;overflow: hidden;'>
			<scroll-view :refresher-triggered='isShow.refresherTriggered' @refresherrefresh='refresherrefresh'
				:refresher-enabled='true' @scrolltolower='scrolltolower' style="height: 100%;" scroll-y="true">
				<view v-for="(item,index) in list" class="list_item_car">
					<view style="">
						<view class=" list_item_car_title flex jb">
							<view class="flex">
								<view class="flex acenter" style="width: 560rpx;">
									<view>三方油站名称：{{item.otherSiteName?item.otherSiteName:''}}</view>
								</view>
								<view class="tag-view">
									{{item.oilProductCode}}
								</view>

							</view>
						</view>
						<view class=" list_item_car_title flex ">
							<view class="flex">
								<view class="pricr_text">
									<view class="flex" style="padding: 15rpx 0;">
										<view style="width: 110rpx;padding-top: 6rpx;">
											价格说明
										</view>
										
										<view style="width: 470rpx;" class="blackcolor">
											发改委: <view class="explain">{{item.marketPrice}}</view>
											油站: <view class="explain">{{item.sitePrice}}</view>
											渠道: <view class="explain">{{item.otherPrice}}</view>
											<br />
											企业: <view class="explain" style="color: #E6A23C;">{{item.enterprisePrice}}
											</view>
											结算: 
											<view class="explain" style="color: #F56C6C;">
												{{item.settlementPrice ? item.settlementPrice : '暂无'}}
											</view>
											底价: 
											<view class="explain" style="color: #F56C6C;">{{item.floorPrice ?
												item.floorPrice : '暂无'}}</view>
										</view>
									</view>
									<view class="flex" style="padding: 15rpx 0;">
										修改时间
										<view style="margin: 0 10rpx; min-width: 150rpx;" class="blackcolor">
											{{item.updateTime?item.updateTime:'暂无'}}
										</view>
									</view>
								</view>
							</view>
							<view class="flex" style="flex: 1;">
								<view class="pricr_text">
									<view class="flex" style="padding: 15rpx 0;">
										<switch v-if="isShowEnableMark" class="my-switch" :checked="item.enableMark==1?true:false"
											style="transform:scale(0.7)" @change=" changeEnableMark(item)"></switch>
									</view>

								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import scroll from '@/components/scroll'
	import OilSiteOilsPriceApi from '@/api/OilSiteOilsPrice'
	export default {
		components: {
			scroll
		},
		data() {
			return {
				list: [],
				isShow: {
					refresherTriggered: false
				},
				parameter: {
					pageSize: 15,
					currentPage: 1,
					params: {
						siteId: '',
						siteName: '',
						channelId: '',
						otherSiteName: '',
						channelCode: ''
					},
					sorted: {}
				},
				seleindex: '',
				navigation: [{
						value: '',
						label: '全部'
					},
					{
						value: 'XOIL',
						label: '星油'
					},
					{
						value: 'WJY',
						label: '万金油'
					},
					{
						value: 'SQL',
						label: '叁仟里'
					},
					{
						value: 'TY',
						label: '团油'
					},
					{
						value: 'ZDC',
						label: '掌多车'
					},
					{
						value: 'LV',
						label: '老吕（找油网）'
					},
					{
						value: 'YDJY',
						label: '一点加油（壳牌）'
					}
				],
				sitePriceData: {},
				isShowEnableMark:true
			}
		},
		onShow() {
			this.search()
		},
		onLoad() {
			uni.$on('siteEnterprise', (item) => {
				if (!item.id) return
				this.parameter.currentPage = 1
				this.parameter.params.siteId = item.id
				this.parameter.params.siteName = item.siteName
			})
			uni.$on('otherSiteEnterprise', (item) => {
				if (!item.id) return
				this.parameter.currentPage = 1
				this.parameter.params.channelId = item.id
				this.parameter.params.otherSiteName = item.otherSiteName
			})
			this.search()
		},
		methods: {
			refresherrefresh(e) {
				this.isShow.refresherTriggered = true
				this.search()
			},
			inputFocusSite(e) {
				uni.navigateTo({
					url: './siteEnterprise'
				})
			},
			inputFocusOtherSite(e) {
				uni.navigateTo({
					url: './otherSiteEnterprise'
				})
			},
			inputClearSite() {
				this.parameter.params.siteId = ''
				this.parameter.params.siteName = ''
			},
			inputClearOtherSite() {
				this.parameter.params.channelId = ''
				this.parameter.params.otherSiteName = ''
			},
			seleFn(e) {
				if (e.value == '') {
					this.parameter.params.channelCode = ''
				} else {
					this.parameter.params.channelCode = e.value
				}
				this.parameter.currentPage = 1
				this.search()
			},
			search() {
				OilSiteOilsPriceApi.getByPage(this.parameter).then(res => {
					this.isShow.refresherTriggered = false
					if (res.code !== 20000) return
					if (res.data.list.length == 0) {
						uni.showToast({
							title: '没有数据了哦',
							icon: 'none'
						})
					}
					if (this.parameter.currentPage !== 1) {
						this.list = this.list.concat(res.data.list)
						return
					}
					this.list = res.data.list
				})
			},
			scrolltolower() {
				this.parameter.currentPage += 1
				this.search()
			},
			changeEnableMark(item) {
				const sitePrice = {}
				sitePrice.id = item.id
				if (item.enableMark === 1) {
					sitePrice.enableMark = 0
				} else {
					sitePrice.enableMark = 1
				}
				sitePrice.channelId = item.channelId
				this.sitePriceData = sitePrice
				let that = this
				uni.showModal({
					title: '提示',
					content: '您的操作即刻生效，请确认！',
					success: function(res) {
						if (res.confirm) {
							OilSiteOilsPriceApi.update(that.sitePriceData).then(res => {
								if (res.code === 20000) {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
								that.search()
							})
						} else if (res.cancel) {
							that.isShowEnableMark = false
							that.$nextTick(()=>{
								that.isShowEnableMark = true
							})
							console.log(res.cancel, '用户取消');
						}
					}
				});

			},
		}
	}
</script>

<style>
	@import url("./index.css");
</style>