shop4.3.57/pages/test/test.vue

<template>
	<view class="page" :style="{height: `${height}px`}">
		<view class="u-content" >
		    <view class='u-header main-between'>
				<view>开箱展示</view>
				 <view @click="close"><image class="bd-icon" src="../../../static/image/icon/clear.png"></image></view>
			</view>
		    <view class="u-body dir-top-nowrap cross-center">
		      <!--  <image class="u-img" :src="img"></image>
		        <text class="u-text">申请获取您绑定的手机号</text> -->
		       <swiper
		            class="swiper"
		            
		            v-bind:indicator-dots="picList.length>1"
		            circular
		            @change='bannerChange'
		            indicator-color="rgba(255,255,255,.3)"
		            indicator-active-color="#30353c"
		        >
		         
		        
		            <swiper-item v-for="(item, index) in picList" v-bind:key="index">
		                <view class="swiper-img"
		                      @click="clickImage(index)" v-bind:style="{backgroundImage: 'url(' + item.pic_url + ')'}">
		        			
		        
		                </view>
		            </swiper-item>
		        </swiper>
				<view class="bd-subtitle">左右滑动查看开箱展示</view>
		    </view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from "vuex";
	import uCharts from "../../components/u-charts/u-charts.min.js"
	export default {
		components: {
		
		},
		data() {
			return {
				picList:[],
				height:0
			};
		},
		onLoad(options) {
			//this.$refs.priceLine.init();
		
			let that=this;
			wx.getSystemInfo({
			    success: function(res) {
			        that.height =  res.windowHeight;
			    }
			})
			uni.setNavigationBarTitle({
				title: "价格走势"
			})
			this.title = options.title
			//this.getData(options.id||'15326',options.signid||'2:3')
		},
		methods: {
			touchStart(e) {
				this.canvases.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
				this.canvases.scrollStart(e);
			},
			touchMove(e) {
				this.canvases[this.canvasId].scroll(e);
			},
			touchEnd(e) {
				this.canvases.scrollEnd(e);
			},
			error(e) {
				uni.showToast({
					title: e.errMsg,
					icon: 'none'
				})
			},
			getData(goods_id, sign_id) {
				let that = this;
				this.$request({
					url: this.$api.goods.PriceMove,
					data: {
						goods_id: goods_id,
						sign_id: sign_id
					}
				}).then(response => {
					this.$hideLoading();
					if (response.code === 0) {

						that.max = response.data.max;
						let categories = [];
						let seriesData = [];
						response.data.priceMove.forEach((value) => {
							let tempTime = value.created_at.split(" ")[0];
							let time = tempTime.split("-");
							categories.push(time[1] + '/' + time[2])
							seriesData.push(value.price)
						})
						that.categories = categories;
						that.series = [{
							name: "",
							data: seriesData,
							color: '#409eff'
						}]
						that.canvases = new uCharts({
							$this: that,
							canvasId: that.canvasId,
							type: 'line',
							fontSize: 7,
							legend: true,
							dataLabel: true,
							dataPointShape: true,
							background: '#FFFFFF',
							pixelRatio: that.pixelRatio,
							categories: categories,
							series: that.series,
							animation: true,
							enableScroll: true,
							xAxis: {
								type: 'line',
								gridColor: '#CCCCCC',
								gridType: 'line',
								dashLength: 8,
								itemCount: that.categories.length,
								scrollShow: true
							},
							yAxis: {
								gridType: 'line',
								gridColor: '#CCCCCC',
								dashLength: 8,
								splitNumber: 6,
								min: 10,
								max: that.max,
								format: (val) => {
									return '￥' + val.toFixed(0)
								}
							},
							width: that.cWidth,
							height: that.cHeight,
							extra: {
								line: {
									type: 'straight'
								}
							}
						});

					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none'
						});
					}
				}).catch(() => {
					this.$hideLoading();
				});
			}
		}
	}
</script>

<style lang="scss">
.u-content {
	    background-color: #ffffff;
	}
	
	.u-header {
	   padding: 5upx;
	    border-bottom: 1upx solid #eeeeee;
	    color: #353535;
	    font-size: 28upx;
	}
	.u-img {
	    width: 88upx;
	    height: 88upx;
	    text-align: center;
	    margin: 32upx 0 40upx;
	}
	.u-body {
	    padding: 0 24upx;
	
	}
	.u-text {
	    margin-bottom: 40upx;
	    font-size: 26upx;
	    color: #666666;
	}
	.bd-icon {
	    width: 40upx;
	    height: 40upx;
	}
	.bd-subtitle{
		padding: 5upx;
		font-size: 24upx;
		line-height: 44upx;
		color: #999999;
	}
</style>