Skip to content

U
uni-pdtravel
Commit 6269ea24 authored by 潘永坪's avatar 潘永坪
Browse files
Options

页面新增

parent 145d0540
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 962 additions and 36 deletions
App.vue
View file @ 6269ea24
......@@ -93,7 +93,7 @@ export default {
font-size: 28rpx;
color: #333333;
background: #F7F7F7;
height: 100%;
height:100vh;
}
view,
......
pages.json
View file @ 6269ea24
......@@ -182,7 +182,16 @@
"path" : "pages/indexs/merchantListIndex/merchantListIndex",
"style" :
{
"navigationBarTitleText": "",
"navigationBarTitleText":"商品列表",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/scenic/scenicChooseProduct/scenicChooseProduct",
"style" :
{
"navigationBarTitleText": "产品选择",
"enablePullDownRefresh": false
}
......
pages/indexs/hghgIndex/hghgIndex.vue
View file @ 6269ea24
......@@ -21,7 +21,7 @@
<text>
开放时间：
</text>
09:00 - 18:00，闭馆前1小时（17:00）停止售票
09:00 - 18:30，闭馆前1小时（17:30）停止售票
</view>
<view style="color: #D9A874;">
每周一“湖广填四川”移民博物馆、临展馆闭馆维护。
......
pages/indexs/merchantListIndex/merchantListIndex.vue
View file @ 6269ea24
<template>
<!-- 商户列表首页 -->
<view>
<view class="wrap">
<view class="banner">
<u-swiper :list="list" mode='number' height="350"></u-swiper>
<u-swiper :list="list" mode="number" height="350" indicator-pos="topRight"></u-swiper>
</view>
<view class="search">
<view class="search-wrap">
<view class="search-left">
重庆
<view class="line"></view>
</view>
<view class="search-right">
<input class="search-input" placeholder="景区/商品/关键词搜索"/>
<text class="search-btn">搜索</text>
<input class="search-input" placeholder="景区/商品/关键词搜索" v-model="searchData" />
<text class="search-btn" @click="initList(true)">搜索</text>
</view>
</view>
</view>
<view class="merchant-list">
<view class="merchant-wrap">
<view>
<u-tabs-swiper ref="uTabs" :list="tabList" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
</view>
<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="swiper-box">
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height:100%;width: 100%;">
<view class="merchant-list" v-for="(item,index) in scenicList" :key='index'>
<view class="list-left">
<image :src="item.imgUrl"></image>
</view>
<view class="list-right">
<view class="right1">
{{item.name}}
</view>
<view class="right2">
<view class="right2-left">
<text v-for="(items, index) of item.tag.slice(0, 3)" :key="index" v-if="items">{{items}}</text>
</view>
<view class="right2-right">
距您8km
</view>
</view>
<view class="right3">
<text class="right3-text" v-for="(items, index) of item.tag.slice(0, 3)" :key="index" v-if="items">
{{items}}
</text>
<text>
购买须知
<u-icon name="arrow-right"></u-icon>
</text>
</view>
<view class="right4">
<view class="right4-left">
已售10W+
</view>
<view class="right4-right">
<text class="right4-price1">¥{{parseFloat(item.originalPrice)}}</text>
<text class="right4-price2">
¥<text style="font-size: 40rpx;font-weight: bold;">{{parseFloat(item.sellingPrice)}}</text>
</text>
<text style="color: #ccc;">起</text>
</view>
</view>
</view>
</view>
<u-empty text="空空如也..." mode="list" v-if="scenicList.length==0"></u-empty>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<u-empty text="空空如也..." mode="list"></u-empty>
</swiper-item>
<swiper-item class="swiper-item">
<u-empty text="空空如也..." mode="list"></u-empty>
</swiper-item>
</swiper>
</view>
</view>
</template>
......@@ -30,58 +92,211 @@
export default {
data() {
return {
list: [{
image: 'http://wx.pangdly.com/static/img/test7.6d14c2d.jpg',
title: '昨夜星辰昨夜风，画楼西畔桂堂东'
},
{
image: 'http://wx.pangdly.com/static/img/test8.1cf812b.jpg',
title: '身无彩凤双飞翼，心有灵犀一点通'
},
{
image: 'http://wx.pangdly.com/static/img/test9.b3dd44c.jpg',
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
}
],
scenicList:[],//景区数据
list: [
{
image: 'http://wx.pangdly.com/static/img/test7.6d14c2d.jpg',
title: '昨夜星辰昨夜风，画楼西畔桂堂东'
},
{
image: 'http://wx.pangdly.com/static/img/test8.1cf812b.jpg',
title: '身无彩凤双飞翼，心有灵犀一点通'
},
{
image: 'http://wx.pangdly.com/static/img/test9.b3dd44c.jpg',
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
}
],
tabList: [{
name: '热门景点'
}, {
name: '本地必吃'
}, {
name: '特价酒店'
}],
// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
current: 0, // tabs组件的current值，表示当前活动的tab选项
swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
searchData:'',//搜索框的值
}
},
onLoad(option) {
this.initList()
},
methods: {
//---tabs通知swiper切换
tabsChange(index) {
this.swiperCurrent = index
},
//---swiper-item左右移动，通知tabs的滑块跟随移动
transition(e) {
let dx = e.detail.dx
this.$refs.uTabs.setDx(dx)
},
//---由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
// swiper滑动结束，分别设置tabs和swiper的状态
animationfinish(e) {
let current = e.detail.current
this.$refs.uTabs.setFinishCurrent(current)
this.swiperCurrent = current
this.current = current
},
//---加载数据
initList(click){
let data = {
type: 1, //类型：1景区、2酒店、餐饮
pageIndex:1,//第几页
pageSize:20, //每页有多少条
}
if(click){
//如果是点击进行搜索
data.search=this.searchData
}
this.$request('scenic/user/merchant/findMerchantList', data).then(res => {
if (res.code == '00') {
this.scenicList=res.data.list||[]
this.scenicList.forEach((item, index) => {
item.tag = item.tag.split(',')
})
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
}
}
}
</script>
<style scoped lang="scss">
.search{
.wrap{
height: 100%;
display: flex;
flex-direction: column;
background: #fff;
}
.search {
padding: 0 24rpx;
position: relative;
top: -40rpx;
}
.search-wrap{
.search-wrap {
background: #fff;
border-radius: 44rpx;
box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.08);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
height: 80rpx;
padding: 0 20rpx;
}
.search-left{
.search-left {
display: flex;
}
.line{
.line {
width: 2rpx;
background: #ccc;
margin: 0 20rpx;
}
.search-right{
.search-right {
display: flex;
flex: 1;
align-items: center;
}
.search-input {
flex: 1;
padding-right: 40rpx;
}
.search-btn {
background: $blue;
color: #fff;
border-radius: 32rpx;
padding: 12rpx 24rpx;
}
.merchant-wrap{
display: flex;
flex: 1;
flex-direction: column;
}
.search-input{
.swiper-box{
flex: 1;
}
.search-btn{
background:$blue;
.merchant-list{
padding: 0 24rpx;
margin-top: 32rpx;
display: flex;
font-size: 24rpx;
}
.list-left image{
width: 200rpx;
height: 200rpx;
border-radius: 16rpx;
margin-right: 20rpx;
}
.list-right{
flex: 1;
width: 0;
}
.right1{
width: 100%;
color: #191919;
font-weight: bold;
font-size: 32rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.right2{
margin-top: 20rpx;
display: flex;
justify-content: space-between;
}
.right2-left text{
color: $blue;
border: 1px solid $blue;
font-size: 20rpx;
padding: 2rpx 4rpx;
border-radius: 2rpx;
width: 110rpx;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.right2 text:not(:last-child){
margin-right: 10rpx;
}
.right2-right{
color: #999999;
}
.right3{
margin-top: 16rpx;
}
.right3-text::after{
display: inline-block;
content: "";
height: 20rpx;
width: 2rpx;
background: #ccc;
margin: 0 10rpx;
}
.right4{
display: flex;
margin-top: 10rpx;
justify-content: space-between;
align-items: center;
}
.right4-left{
color: $red;
}
.right4-price1{
color: #999;
text-decoration:line-through;
font-size: 28rpx;
}
.right4-price2{
color: $red;
margin: 0 10rpx;
}
</style>
pages/scenic/scenicChooseProduct/scenicChooseProduct.vue 0 → 100644
View file @ 6269ea24
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment