160 lines
3.9 KiB
Vue
160 lines
3.9 KiB
Vue
<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>
|