<template>
	<view class="page-body">
		<view class="flex align-center pt10">
			<image :src="staticPath+'/yj-logo.png'" mode="aspectFit" lazy-load="true" class="logo-title"/>
			<text class="name-text">甘肃高速驿佳连锁超市</text>
		</view>
		<view class="pt10">
			<image :src="staticPath+'/home-banner.png'"  mode="aspectFit" lazy-load="true" class="mall-banner"></image>
		</view>
		<view class="fs24 flex align-center pt10">
			<image :src="staticPath+'/yj-gb.png'"  mode="aspectFit" lazy-load="true" class="novice-logo"></image>
			<text class="text-yellow"> [广播] </text>
			<text class="normal-text">方便购物每一天。高速驿佳超市，就在您身边!</text>
		</view>
		<view class="pt10" >
			<image :src="staticPath+'/tj-banner.png'" mode="aspectFit" lazy-load="true" class="tj-image" @tap="goMall()"></image>
		</view>
		<view class="tj-title">驿佳精选</view>
		<view class="product-box">
			<block v-for="(item,o) in mallList" :key="o"> 
				<view class="product-photo" v-for="(n,i) in item" :key="i" @tap="goPro(n)">
					<view style="background:#F8F3F2">
						<image mode="aspectFit" :src="n.IMAGE_PATH"></image>

					</view>
				
					<text class="product-name">{{n.COMMODITY_NAME}}</text>
					<view class="product-value">{{n.COMMODITY_MEMBERPRICE}}<text style="font-size:18rpx;line-height:30rpx;">元</text></view>
					
				</view>
			</block>
			
		</view>
 </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  data () {
    let staticPath = this.$api.staticImagePath + '/yj-mall'
    return {
      staticPath: staticPath,
      mallList: []
    }
  },
  computed: {
    ...mapGetters(['provinceCode', 'serverPart'])
  },
  methods: {
    ...mapMutations([]),
    getMall () {
      let _this = this

      _this.$api.getCoop({
        action_type: 'WeChat_GetGoodsList',
        commodityNature: '3000',
        serverpartId: '104', // _this.serverPart.ServerPart_Id,
        provinceCode: _this.provinceCode

      }).then(function (data) {
        if (data.ResultCode === '100') {
          _this.mallList = _this.$utils.ArrayGroup(data.Data.List, 3)
        }
      })
    },
    goMall () {
      mpvue.switchTab({url: '/pages/shoppingMall/main'})
    },
    goPro (item) {
      mpvue.navigateTo({url: '/pages/product/productDetail/main?id=' + item.COMMODITY_ID})
    }
  },
  onLoad () {
    this.getMall()
    this.$utils.addUserBehaviorNew();
  }
}
</script>

<style lang="stylus" scoped>
	.page-body
		height 100%
		background #fff

	.flex
		display flex
	.align-center
		align-items center
	.fs24
		font-size 24rpx
	.pt10
		padding 20rpx 26rpx 0 20rpx
	.logo-title 
		width 68rpx
		height 68rpx
	.name-text
		color #0B0B0B
		font-size 30rpx
	.mall-banner
		height 260rpx 
		width 702rpx
	.text-yellow
		color #EC953D
	.novice-logo
		width 27rpx
		height 24rpx
	.normal-text
		color #414141
	.tj-image
		width 699rpx
		height 177rpx
	.tj-title
		background linear-gradient(#E3AA90,#D89476)
		border-radius 16rpx 16rpx 0 0
		margin 20rpx 26rpx 0 26rpx
		color #fff
		font-size 30rpx
		height 76rpx
		padding-left 20rpx
		line-height 76rpx
	.product-box
		margin 0 26rpx 20rpx 26rpx 
		background #ffffff
		border-radius 0 0 16rpx 16rpx;
		box-shadow 0 2rpx 6rpx 0 rgba(206,206,206,0.51)
		padding-bottom 20rpx
		padding-top 20rpx
	.product-photo:before
		content ''
		background url('https://eshangtech.com/ShopICO/yj-mall/yj-pro.png') no-repeat
		background-size contain
		width 50rpx
		height 60rpx
		position absolute
		top 20rpx
		left 32rpx
		display block
	.product-photo
		padding 20rpx 0rpx 20rpx 32rpx
		position relative
		display inline-block
		image
			height 190rpx
			width 190rpx
		.product-name
			white-space nowrap
			overflow hidden
			width 168rpx
			color #4C5058
			font-size 26rpx
			display block
			text-overflow ellipsis
			margin-top 16rpx
		.product-value
			margin-top 14rpx
			color #DB5E50
			font-size 32rpx
</style>
