Browse Source

[商户详情][新增]

tags/湖南版5.1.4
luqc 6 years ago
parent
commit
84d012cab7
10 changed files with 389 additions and 37 deletions
  1. +1
    -0
      app.json
  2. +61
    -24
      pages/index/detail/index.js
  3. +5
    -2
      pages/index/detail/index.json
  4. +67
    -1
      pages/index/detail/index.wxml
  5. +119
    -1
      pages/index/detail/index.wxss
  6. +66
    -0
      pages/index/merchantList/index.js
  7. +6
    -0
      pages/index/merchantList/index.json
  8. +12
    -0
      pages/index/merchantList/index.wxml
  9. +51
    -0
      pages/index/merchantList/index.wxss
  10. +1
    -9
      pages/index/searchbar/index.js

+ 1
- 0
app.json View File

@@ -13,6 +13,7 @@
"pages/topicDetail/index",
"pages/main/index",
"pages/index/searchbar/index",
"pages/index/merchantList/index",
"pages/index/detail/index",
"pages/bargain/bargainDatail/bargainDatail",
"pages/bargain/bargain",


+ 61
- 24
pages/index/detail/index.js View File

@@ -1,18 +1,30 @@
// pages/index/detail/index.js
const Http = require("../../../utils/HttpBasics");
const imgurl = require("../../../utils/imgurl");
const config = require("../../../config/config");
let app = getApp();
Page({

/**
* 页面的初始数据
*/
data: {

teljpgUrl: imgurl.teljpg.url,
page: 1,
imglist:null,
shopVoList:[],
data:{},
id:null
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {

let that=this;
this.setData({
id: options.id
});
that.getList(options.id);
},

/**
@@ -26,41 +38,66 @@ Page({
* 生命周期函数--监听页面显示
*/
onShow: function () {

let that = this;
},

/**
* 生命周期函数--监听页面隐藏
/**
* 拨打电话
*/
onHide: function () {

phone: function (e) {
let that = this;
wx.makePhoneCall({
phoneNumber: e.target.dataset.merchantlinkphone
});
},

/**
* 生命周期函数--监听页面卸载
* 获取商户详情
*/
onUnload: function () {

getList: function (id) {
let that = this;
let data;
data = {
pageNum: that.data.page,
pageSize: 15,
id:id
}
Http.get({
url: config.api.merchantList,
data: data
}).then(res => {
that.setData({
data: res.data.list[0],
shopVoList: res.data.list[0].shopVoList,
imglist: JSON.parse(res.data.list[0].coverPicture),
})
})
.catch(err => {
wx.showToast({
title: err.errMsg,
icon: 'none',
duration: 2000,
mask: false
});
})
},

/**
* 页面相关事件处理函数--监听用户下拉动作
* 获取多商铺列表
*/
onPullDownRefresh: function () {

shopList:function(e){
wx.navigateTo({
url: `/pages/index/merchantList/index?id=${e.currentTarget.dataset.id}`
})
},

/**
* 页面上拉触底事件的处理函数
* 生命周期函数--监听页面隐藏
*/
onReachBottom: function () {
onHide: function () {

},

/**
* 用户点击右上角分享
* 页面相关事件处理函数--监听用户下拉动作
*/
onShareAppMessage: function () {
onPullDownRefresh: function () {

}
},
})

+ 5
- 2
pages/index/detail/index.json View File

@@ -1,5 +1,8 @@
{
"navigationBarTitleText": "详情",
"navigationBarTitleText": "商户详情",
"backgroundColor": "#f4f4f4",
"enablePullDownRefresh": true
"enablePullDownRefresh": true,
"usingComponents": {
"c-banner": "../../../components/banner/index"
}
}

+ 67
- 1
pages/index/detail/index.wxml View File

@@ -1,4 +1,70 @@
<!--pages/index/detail/index.wxml-->
<view>

<swiper class="index-slide" autoplay="true" circular="false">
<block wx:for="{{imglist}}" wx:key="unique">
<swiper-item>
<image src="{{item}}" class="index-slide-image" />
</swiper-item>
</block>
</swiper>
<!-- <view class='merchant-detail'>
<view>{{data.merchantName}}</view>
</view> -->
<view class='merchant-detail'>
<!-- 品牌信息 -->
<view class='merchant-brand'>
<view>
<image src='{{data.brandImg}}'></image>
</view>
<view>
<text>{{data.merchantName}}</text>
<text>{{data.title}}</text>
</view>
</view>
<!-- 一个商铺 -->
<!-- <view class='merchant-shop' wx:if="{{shopVoList.length==1}}">
<view>
<text>商户位置</text>
</view>
<view>
<text>{{shopVoList[0].buildingName}} {{shopVoList[0].floorName}} {{shopVoList[0].shopNumber}}</text>
<text></text>
</view>
</view> -->
<!-- 多个商铺 -->
<view class='merchant-shop'>
<view >
<view >
<text>商户位置</text>
</view>
<view>
<text wx:if="{{shopVoList.length==1}}">{{shopVoList[0].buildingName}} {{shopVoList[0].floorName}} {{shopVoList[0].shopNumber}}</text>
<text wx:else>{{shopVoList[0].buildingName}} {{shopVoList[0].floorName}} {{shopVoList[0].shopNumber}}..</text>
<text wx:if="{{shopVoList.length!=1}}" class='godetail' data-id='{{data.id}}' bindtap='shopList'>详情 ></text>
</view>
</view>
</view>
<!-- 联系方式 -->
<view class='merchant-phone'>
<view >
<text>联系商户</text>
</view>
<view>
<view>
<text>{{data.merchantLinkPhone}}</text>
</view>
<image bindtap='phone' data-merchantLinkPhone='{{data.merchantLinkPhone}}' class="tel" src="{{teljpgUrl}}" mode="widthFix" />
</view>
</view>
<!-- 商户简介 -->
<view class='merchant-phone'>
<view>
<text>商户简介</text>
</view>
</view>
<view class='merchant-info'>
<text wx:if="{{data.summary}}">{{data.summary}}</text>
<text wx:else>{{"信息完善中,敬请期待。"}}</text>
</view>
</view>
</view>

+ 119
- 1
pages/index/detail/index.wxss View File

@@ -1 +1,119 @@
/* pages/index/detail/index.wxss */
/* pages/index/detail/index.wxss */
.index-slide-view{
position: relative;
width: 750rpx;
height: 260rpx;
overflow: hidden;
/* margin:-132rpx auto 0; */
border-radius:16rpx;
box-shadow: 0 6px 20px 0 rgba(0,0,0,0.15);
}
.index-slide,
swiper-item
.index-slide-image {
display: block;
width: 750rpx;
height: 560rpx;
margin: 0 auto;
overflow: hidden;
position: relative;

}
.index-slide-view .dots{
position: absolute;
left: 0;
right: 0;
bottom: 20rpx;
display: flex;
justify-content: center;
}
.index-slide-view .dots .dot{
margin: 0 8rpx;
width: 12rpx;
height: 12rpx;
background: #b6b6b7;
border-radius: 50%;
transition: all .6s;
}
.index-slide-view .dots .dot.active{
background: #02C0FF;
width: 30rpx;
height: 12rpx;
border-radius:10rpx;
opacity: 1;
}
.bannerbg{
width: 100%;
}
.bannerbg image{
display: block;
width: 100%;
}
.merchant-detail{
width: 92%;
margin: 0 auto;
}
.merchant-brand,.merchant-shop,.merchant-phone{
width:100%;
display:flex;
padding:20rpx 0;
background:#fff;
}
.merchant-brand view:nth-child(1) {
width:160rpx;
border-radius:16rpx;
height:160rpx;
}
.merchant-brand view:nth-child(1) image {
display:block;
width:160rpx;
height:160rpx;
border-radius:16rpx;
border:1px solid #e5e5e5;
}
.merchant-brand view:nth-child(2) {
display:flex;
flex-direction:column;
flex:6;
padding-left:30rpx;
}
.merchant-brand view:nth-child(2) text:nth-child(1){
margin-top: 20rpx;
}
.merchant-shop,.merchant-phone{
height: 60rpx;
line-height: 60rpx;
}
.merchant-shop view,.merchant-phone view{
display:flex;
flex: 4;
color:#333;

}
.merchant-shop view:nth-child(2),.merchant-phone view:nth-child(2){
font-size: 30rpx;
}
.merchant-info{
padding:0 30rpx;
font-size: 28rpx;
}
.tel {
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 50rpx;
height: 50rpx;
}
.shoplists{
display: flex;
}
.shoplists text{
flex: 2;
}
.godetail{
color:#999999;
font-size:30rpx;
position: absolute;
right: 10rpx;
}

+ 66
- 0
pages/index/merchantList/index.js View File

@@ -0,0 +1,66 @@
const Http = require("../../../utils/HttpBasics");
const imgurl = require("../../../utils/imgurl");
const config = require("../../../config/config");
let app = getApp();
Page({

/**
* 页面的初始数据
*/
data: {
page: 1,
shopVoList: [],
data: {},
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that = this;
that.getList(options.id);
},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},
/**
* 获取商户详情
*/
getList: function (id) {
let that = this;
let data;
data = {
pageNum: that.data.page,
pageSize: 15,
id: id
}
Http.get({
url: config.api.merchantList,
data: data
}).then(res => {
that.setData({
data: res.data.list[0],
shopVoList: res.data.list[0].shopVoList
})
})
.catch(err => {
wx.showToast({
title: err.errMsg,
icon: 'none',
duration: 2000,
mask: false
});
})
},
})

+ 6
- 0
pages/index/merchantList/index.json View File

@@ -0,0 +1,6 @@
{
"navigationBarTitleText": "商户位置",
"backgroundColor": "#f4f4f4",
"enablePullDownRefresh": true,
"usingComponents": {}
}

+ 12
- 0
pages/index/merchantList/index.wxml View File

@@ -0,0 +1,12 @@
<view class='merchant-detail'>
<!-- 商户列表 -->
<view class='merchant-brand'wx:for="{{shopVoList}}" wx:key="unique">
<view>
<image src='{{data.brandImg}}'></image>
</view>
<view>
<text>{{data.merchantName}}</text>
<text>{{item.shopNumber}}, {{item.buildingName}} {{item.floorName}}</text>
</view>
</view>
</view>

+ 51
- 0
pages/index/merchantList/index.wxss View File

@@ -0,0 +1,51 @@
/* pages/index/merchantList/index.wxss */
.merchant-detail{
width: 92%;
margin: 0 auto;
}
.merchant-brand{
/* width:100%; */
display:flex;
/* padding:20rpx 0; */
background:#fff;
border-bottom:1rpx solid #efefef;
width:690rpx;
height:197rpx !important;
background:#fff;
padding:30rpx 0 0;
margin:0 auto 40rpx;
border-radius:16rpx;
border-top:8rpx solid #02b7ff;
box-shadow:0 6px 20px 0 rgba(0, 0, 0, 0.10);

}
.merchant-brand view:nth-child(1) {
width:160rpx;
border-radius:16rpx;
height:160rpx;
padding-left: 10rpx;
}
.merchant-brand view:nth-child(1) image {
display:block;
width:160rpx;
height:160rpx;
border-radius:16rpx;
border:1px solid #e5e5e5;
}
.merchant-brand view:nth-child(2) text:nth-child(1){
margin-top: 20rpx;
padding: 10rpx 0;
font-size:35rpx;
font-weight: bold;
color:#333;
}
.merchant-brand view:nth-child(2) text:nth-child(2){
font-size: 28rpx;
color: #333;
}
.merchant-brand view:nth-child(2) {
display:flex;
flex-direction:column;
flex:8;
padding-left:80rpx;
}

+ 1
- 9
pages/index/searchbar/index.js View File

@@ -35,9 +35,8 @@ Page({
* 跳转到门店列表的详情页面
*/
gotoDetail(e){
console.log(e)
wx.navigateTo({
url: '/',
url: `/pages/index/detail/index?id=${e.currentTarget.dataset.id}`
})
},
/**
@@ -124,13 +123,6 @@ Page({
});
})
},
// 跳往商户详情
godetail: function (e) {
console.log(e)
wx.navigateTo({
url: `/pages/order/detail/index?orderId=${e.currentTarget.dataset.id}`
})
},
phone: function (e) {
let that = this;
if (e.currentTarget.dataset.merchantlinkphone) {


Loading…
Cancel
Save