Feat:康养页面接口对接
This commit is contained in:
@@ -5,8 +5,10 @@
|
||||
<view class="v12-radius-100 v12-primary v12-white-text v12-px-5 v12-py-2 v12-font-28 v12-font-bold" >养生食材</view>
|
||||
</view>
|
||||
<view class="v12-justify-between v12-align-center v12-mt-5">
|
||||
<view class="v12-font-28 v12-secondary-dark-text v12-mr-3">昆明市</view>
|
||||
<view class="flex-1"><u-search :showAction="false"></u-search></view>
|
||||
<view class="v12-font-28 v12-secondary-dark-text v12-mr-3">{{ cityName }}</view>
|
||||
<view class="flex-1">
|
||||
<u-search :showAction="false" v-model="keyword"></u-search>
|
||||
</view>
|
||||
</view>
|
||||
<view class="v12-justify-between swap">
|
||||
<view v-for="(item, index) in foodItems" :key="index" class="trave-item-wrap v12-mr-3 v12-mt-3" @click="toDetails">
|
||||
@@ -18,31 +20,40 @@
|
||||
<view class="title-img"></view>
|
||||
<view class="rank-items-wrap">
|
||||
<view class="bee-rank">
|
||||
<image :src="rank[0].backgroundImage" class="bg-img"></image>
|
||||
<view class="rank-title-wrap">
|
||||
<view class="rank-title v12-font-34 v12-font-bold">蜂蜜榜</view>
|
||||
<view class="rank-title v12-font-34 v12-font-bold">{{ rank[0].title }}</view>
|
||||
</view>
|
||||
<view class="v12-px-2">
|
||||
<view class="rank-item v12-justify-start v12-align-center v12-mb-4" v-for="(item, index) in rankItems" :key="index">
|
||||
<view
|
||||
class="rank-item v12-justify-start v12-align-center v12-mb-4"
|
||||
v-for="(item, index) in rank[0].products"
|
||||
:key="index">
|
||||
<view class="rank-tag">{{ index + 1 }}</view>
|
||||
<view class="rank-img"></view>
|
||||
<view class="rank-img">
|
||||
<image :src="item.productImage" class="rank-img"></image>
|
||||
</view>
|
||||
<view class="v12-ml-2">
|
||||
<view class="v12-font-bold v12-font-24 one-t" style="width: 160rpx">{{ item.label }}</view>
|
||||
<view class="v12-font-22 more-t">{{ item.intro }}</view>
|
||||
<view class="v12-font-bold v12-font-24 one-t" style="width: 160rpx">{{ item.productTitle }}</view>
|
||||
<view class="v12-font-22 more-t">{{ item.productDesc }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="drug-rank">
|
||||
<image :src="rank[1].backgroundImage" class="bg-img"></image>
|
||||
<view class="rank-title-wrap">
|
||||
<view class="rank-title v12-font-34 v12-font-bold">药膳榜</view>
|
||||
<view class="rank-title v12-font-34 v12-font-bold">{{ rank[1].title }}</view>
|
||||
</view>
|
||||
<view class="v12-px-2">
|
||||
<view class="rank-item v12-justify-start v12-align-center v12-mb-4" v-for="(item, index) in rankItems" :key="index">
|
||||
<view class="rank-item v12-justify-start v12-align-center v12-mb-4" v-for="(item, index) in rank[1].products" :key="index">
|
||||
<view class="rank-tag">{{ index + 1 }}</view>
|
||||
<view class="rank-img"></view>
|
||||
<view class="rank-img">
|
||||
<image :src="item.productImage" class="rank-img"></image>
|
||||
</view>
|
||||
<view class="v12-ml-2">
|
||||
<view class="v12-font-bold v12-font-24 one-t" style="width: 160rpx">{{ item.label }}</view>
|
||||
<view class="v12-font-22 more-t">{{ item.intro }}</view>
|
||||
<view class="v12-font-bold v12-font-24 one-t" style="width: 160rpx">{{ item.productTitle }}</view>
|
||||
<view class="v12-font-22 more-t">{{ item.productDesc }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -75,6 +86,7 @@
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { getRank } from '@/api/health'
|
||||
export default{
|
||||
data() {
|
||||
return {
|
||||
@@ -98,24 +110,46 @@ export default{
|
||||
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
|
||||
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
|
||||
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
|
||||
]
|
||||
],
|
||||
cityId: '',
|
||||
cityName: '',
|
||||
keyword: '',
|
||||
rank: []
|
||||
}
|
||||
},
|
||||
onLoad(opts) {
|
||||
this.cityId = opts.city
|
||||
this.cityName = opts.cityName
|
||||
this.getRank()
|
||||
},
|
||||
methods: {
|
||||
toSanctun() {
|
||||
uni.navigateTo({
|
||||
url: '/pkg_product/views/healthSanctum'
|
||||
url: '/pkg_product/views/healthSanctum?city=' + this.cityId + '&cityName=' + this.cityName
|
||||
})
|
||||
},
|
||||
toDetails() {
|
||||
uni.navigateTo({
|
||||
url: '/pkg_product/views/healthFoodDetails'
|
||||
})
|
||||
},
|
||||
getRank() {
|
||||
let params = {
|
||||
goodCityId: this.cityId
|
||||
}
|
||||
getRank(params).then(res => {
|
||||
console.log(res);
|
||||
this.rank = res.data
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.bg-img{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
}
|
||||
.recommends{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@@ -179,6 +213,7 @@ export default{
|
||||
border-radius: 20rpx;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
.rank-title-wrap{
|
||||
height: 140rpx;
|
||||
@@ -189,6 +224,7 @@ export default{
|
||||
width: 200rpx;
|
||||
padding: 10rpx 5rpx;
|
||||
background: linear-gradient(to right, #FFFFFF 0%, rgba(255,255,255,0) 100%);
|
||||
z-index: 999;
|
||||
}
|
||||
.rank-items-wrap{
|
||||
background: #E2BC8D;
|
||||
|
||||
@@ -85,7 +85,7 @@ export default {
|
||||
},
|
||||
toFoods() {
|
||||
uni.navigateTo({
|
||||
url: '/pkg_product/views/healthFoods'
|
||||
url: '/pkg_product/views/healthFoods?city=' + this.cityId + '&cityName=' + this.cityName
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
|
||||
Reference in New Issue
Block a user