Skip to content

M
mayi-mp-shop
Commit 1650e52f by 李嘉林
Options

Merge branch 'nativehome_tst' of http://code.mayi888.com/chengmo/mayi-mp-shop into nativehome_tst

parents 43889e92 548132d0
Showing with 634 additions and 67 deletions
config/dev.env.js
......@@ -17,7 +17,7 @@ module.exports = merge(prodEnv, {//zjgyl
// BASE_URL:"'http://192.168.1.146:3005'",
// BASE_URL:"'http://192.168.1.127:3000'",
BASE_URL:"'https://test-m-shop.mayi888.cn'",
// BASE_URL:"'http://172.16.1.48:3004'",
// BASE_URL:"'http://192.168.137.1:3004'",
OLSHOP_URL:'"https://test-m-shop.mayi888.cn/innerApi/shopApiService"',
// OLSHOP_URL:'"https://shop.mayi888.com/innerApi/shopApiService"',
......
project.config.json
......@@ -41,17 +41,10 @@
"simulatorPluginLibVersion": {},
"libVersion": "2.15.0",
"condition": {
"search": {
"list": []
},
"conversation": {
"list": []
},
"plugin": {
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"gamePlugin": {
......@@ -79,6 +72,23 @@
"pathName": "pages/index/main",
"query": "scene=pid_6141",
"scene": 1047
},
{
"name": "pages/tabBar1/main",
"pathName": "pages/tabBar1/main",
"query": "",
"scene": null
},
{
"name": "pages/tabBar4/main",
"pathName": "pages/tabBar4/main",
"query": "",
"scene": null
},
{
"name": "pages/home/main",
"pathName": "pages/home/main",
"scene": null
}
]
}
......
src/App.vue
......@@ -11,10 +11,12 @@ export default {
process.env.NODE_ENV == "development" ||
JSON.stringify(extConfig) == "{}"
) {
// extConfig = { mixid: "jordan", shopid: 471 };
extConfig = { mixid: "antgood", shopid: 67 };
}
console.log("1444444444", extConfig.mixid);
this.$store.commit("setExtConfig", extConfig.mixid);
this.$store.commit('setExtConfigInfo',extConfig)
// 调用API从本地缓存中获取数据
/*
* 平台 api 差异的处理方式: api 方法统一挂载到 mpvue 名称空间, 平台判断通过 mpvuePlatform 特征字符串
......
src/api/index.js
......@@ -22,5 +22,8 @@ console.log(process.env,'-----------------config------')
get_product_category(data) {
return requestPOST(`${process.env.OLSHOP_URL}/product/get_product_category`, data);
},
getLiveCon(data){
return requestPOST(`${process.env.OLSHOP_URL}/liveBroadcastInfo/getPageListByIds`, data);
}
}
\ No newline at end of file
src/app.json
......@@ -11,6 +11,7 @@
"pages/tabBar1/main",
"pages/tabBar2/main",
"pages/tabBar3/main",
"pages/tabBar4/main",
"pages/changeAdr/main"
],
"tabBar": {
......@@ -31,6 +32,9 @@
},
{
"pagePath": "pages/tabBar3/main"
},
{
"pagePath": "pages/tabBar4/main"
}
]
},
......
src/pages/home/index.vue
......@@ -68,6 +68,11 @@
</div>
<div v-if="item.componentCode == 'transverse-label' && item.componentInfo.visible == 1">
<transverse-label :datas="item" :componentIndex="index"></transverse-label>
<div v-if="item.componentCode == 'photo-gallery' && item.componentInfo.visible == 1">
<photo-gallery :datas="item"></photo-gallery>
</div>
<div v-if="item.componentCode == 'live-broadcast' && item.componentInfo.visible == 1">
<live-broadcast :datas="item"></live-broadcast>
</div>
</div>
......@@ -169,6 +174,7 @@ export default {
// };
},
onLoad(options) {
let location=JSON.parse(wx.getStorageSync('location') || '{}')
// if (!location.areaGroupId) {
// wx.redirectTo({
......@@ -178,16 +184,19 @@ export default {
this.changeLocation = options.changeLocation || ''
if(this.changeLocation == 1){
let extConfig = wx.getExtConfigSync ? wx.getExtConfigSync() : {};
console.log(extConfig, "-----------extConfig");
if (
process.env.NODE_ENV == "development" ||
JSON.stringify(extConfig) == "{}"
) {
extConfig = { mixid: "antgood", shopid: 67 };
}
app.getShopInfo(extConfig);
app.getThemePage(extConfig);
// let extConfig = wx.getExtConfigSync ? wx.getExtConfigSync() : {};
// console.log(extConfig, "-----------extConfig");
// if (
// process.env.NODE_ENV == "development" ||
// JSON.stringify(extConfig) == "{}"
// ) {
// extConfig = { mixid: "antgood", shopid: 67 };
// }
console.log('this.$store.state.extConfig',this.$store.state.extConfig)
app.getShopInfo(this.$store.state.extConfig);
app.getThemePage(this.$store.state.extConfig);
}
let that = this;
// 来源
......@@ -216,6 +225,7 @@ export default {
}else {
this.mpApp.themeColorCallBack=(res)=>{
this.themeColor = res
}
}
......@@ -227,28 +237,6 @@ export default {
this.$mp.page.onPageScroll= (el)=>{
this.scrolls(el);
};
let extConfig = wx.getExtConfigSync ? wx.getExtConfigSync() : {};
console.log(extConfig, "-----------extConfig");
if (
process.env.NODE_ENV == "development" ||
JSON.stringify(extConfig) == "{}"
) {
extConfig = { mixid: "antgood", shopid: 67 };
}
// console.log(wx.getStorageSync('changeAdr'),'changeAdr')
// if(wx.getStorageSync('changeAdr') == 'changeAdr'){
// Object.assign(this.$data, this.$options.data());
// app.getShopInfo(extConfig);
// // 页面配置信息
// app.getThemePage(extConfig);
// wx.removeStorageSync('changeAdr')
// }
// 获取购物车数量
this.getCartNum();
},
methods: {
init(pageList) {
......@@ -259,6 +247,10 @@ export default {
this.pageData = JSON.parse(this.pageInfo.pageData);
console.log("36", this.pageData);
console.log(app.globalData.shopInfo,'app')
wx.setNavigationBarTitle({title : app.globalData.shopInfo.shopName})
wx.stopPullDownRefresh()
},
scrolls(el){
......@@ -295,17 +287,9 @@ export default {
}
},
onPullDownRefresh(){
let extConfig = wx.getExtConfigSync ? wx.getExtConfigSync() : {};
console.log(extConfig, "-----------extConfig");
if (
process.env.NODE_ENV == "development" ||
JSON.stringify(extConfig) == "{}"
) {
extConfig = { mixid: "antgood", shopid: 67 };
}
console.log('onPullDownRefresh')
app.getShopInfo(extConfig);
app.getThemePage(extConfig);
console.log('onPullDownRefresh',this.$store.state.extConfig)
app.getShopInfo(this.$store.state.extConfig);
app.getThemePage(this.$store.state.extConfig);
}
......
src/pages/home/main.json
......@@ -15,7 +15,10 @@
"pop-up":"/static/nativeComponents/PopUp/index",
"share-popup":"/static/nativeComponents/SharePopup/index",
"speedy-nav":"/static/nativeComponents/SpeedyNav/index",
"video-player":"/static/nativeComponents/VideoPlayer/index"
"video-player":"/static/nativeComponents/VideoPlayer/index",
"photo-gallery":"/static/nativeComponents/PhotoGallery/index",
"live-broadcast":"/static/nativeComponents/LiveBroadcast/index"
},
"enablePullDownRefresh":true
"enablePullDownRefresh":true,
"backgroundColor":"#f5f5f5"
}
\ No newline at end of file
src/store/mutations.js
......@@ -35,6 +35,9 @@ const mutations = {
},
setExtConfig(state,obj){
state.mixid = obj
},
setExtConfigInfo(state,obj){
state.extConfig = obj
}
};
......
src/store/state.js
......@@ -22,5 +22,6 @@ const state = {
userInfo,
mixid : '',
extConfig : {}
};
export default state
\ No newline at end of file
src/utils/mayi.js
import cart from "@/api/cart"
// 登录白名单 name
export const noLoginList = ["index", "media-video", "goods-goodsInfo", "goods-commodityMenu", "goodsSearch-goodsSearch", "chooseStores", "activty-receivingGift", "activty", "login-register", "login-phoneLogin", "login-authInformation", "login-forgetPassWord", "login-accountLogin", "login-wxRegister", "pay-payList", "comment-evaluateList", "goods-commonProblemList", "article-articlePage", "article-articleList", "goods-posters", "liveBroadcast", "liveBroadcast-list", "personalCenter-coupon-getCoupon", "buyerShow-showDetail", "goods-addGoodsList", "personalCenter-CDkey-exchange", "giftCards-linkReceive", "giftCoupon-preview", "smartForm", "shopCart-shareShopCart", "groupBuying-beInvite", "brandTopics", 'personalCenter-spokesmanCenter', 'personalCenter-spokesmanCenter-mine-spokesmanHomePage','liveBroadcast-lived', 'personalCenter-spokesmanCenter-mine-getBusinessCard','changeAdr'];
// path
export const noLoginListPath = noLoginList.map(item=>{
item=item.replace(/-/g,'/')
item='/'+item
item=="/index" && (item="/")
return item
})
// 主题色
export let themeColor = {
"--main-color": "#ffffff",
......@@ -19,13 +30,21 @@ export function $themeToLink(data, option) {
// 点击底部栏
if (option) {
let parseLink = getUrlofLink(data);
let isTabbarIndex = checkTabbarPage(parseLink);
let aa=noLoginListPath.includes(parseLink) || parseLink.substr(0,7)=="/goods/"
console.log(parseLink,aa,'parseLinkparseLinkparseLink',parseLink,noLoginListPath)
if (!aa && !wx.getStorageSync("sessionid")) {
let url = `/pages/login/main?back=${parseLink}`;
wx.navigateTo({url});
return
}
// 替换首页位置
let isTabbarIndex = checkTabbarPage(parseLink);
isTabbarIndex = isTabbarIndex == 0 ? checkTabbarPage('/') : isTabbarIndex
wx.switchTab({
url: parseLink == '/' ? '/pages/home/main' : `/pages/tabBar${isTabbarIndex}/main`,
})
console.log(option, data)
console.log(option, data,'---',parseLink == '/' ? '/pages/home/main' : `/pages/tabBar${isTabbarIndex}/main`)
return
}
......@@ -37,18 +56,6 @@ export function $themeToLink(data, option) {
}
return
}
// 底部导航跳转
// let parseLink=getUrlofLink(data)
// let isTabbarIndex =checkTabbarPage(parseLink )
// if (isTabbarIndex>-1) {
// wx.switchTab({
// url: parseLink == '/' ? '/pages/home/main' : `/pages/tabBar${isTabbarIndex}/main`,
// })
// return
// }
// -----------------
if (type == 0) {//无链接
return
......
static/nativeComponents/LiveBroadcast/index.js 0 → 100644
// static/nativeComponents/LiveBroadcast/index.js
let app = getApp()
const { indexApi } = app
Component({
/**
* 组件的属性列表
*/
properties: {
datas: {
type: Object
}
},
/**
* 组件的初始数据
*/
data: {
showNum : 0,
showList : true,
},
ready(){
if (this.data.datas.componentData.liveList.length >= this.data.datas.componentData.showNum) {
this.setData({
showNum: this.data.datas.componentData.showNum
})
} else {
this.setData({
showNum: this.data.datas.componentData.liveList.length
})
}
this.init()
console.log('datas.componentData.style', this.data.datas.componentData.liveList)
},
/**
* 组件的方法列表
*/
methods: {
init(){
this.setData({
'datas.componentData.liveList' : []
})
console.log(this.data.datas.componentData.liveList, 'this.data.datas.componentData.liveList')
indexApi.getLiveCon(this.data.datas.componentData.liveIdList).then(res => {
if(res.data.code == '200'){
if(res.data.data.length == 0){
this.setData({
showList : false,
'datas.componentData.liveList' : [],
'datas.componentData.liveIdList':[]
})
}else{
res.data.data.forEach(item => {
item.coverUrl = app.DFSImg(item.coverUrl);
item.anchorHeadImages = app.DFSImg(item.anchorHeadImages);
item.watchNum = item.watchNum ? (Number(item.watchNum) > 10000 ?( Number(item.watchNum)/10000).toFixed(1) + 'w' : item.watchNum ) : 0
})
this.setData({
'datas.componentData.liveList' : res.data.data
})
}
console.log(this.data.datas.componentData.liveList,'this.data.datas.componentData.liveList')
}else{
this.setData({
showList : false
})
}
})
},
toList(){
app.$themeToLink({
type: 1,
link: '/liveBroadcast/list'
})
},
toLiveDetail(e){
let id = e.currentTarget.dataset.itemid
app.$themeToLink({
type: 1,
link: '/liveBroadcast/lived?liveId=' + id
})
}
}
})
static/nativeComponents/LiveBroadcast/index.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
static/nativeComponents/LiveBroadcast/index.wxml 0 → 100644
<!--static/nativeComponents/LiveBroadcast/index.wxml-->
<view class="live-broadcast" wx:if="{{showList}}">
<view class="top flex">
<view style="font-weight:bold;font-size:36rpx">直播</view>
<view class="seeMore" bindtap="toList">查看更多</view>
</view>
<view class="liveList" wx:if="{{datas.componentData.liveList.length>0}}" style="padding:{{datas.componentData.style==1 ? '0px' : ''}}">
<view wx:if="{{datas.componentData.style==1}}">
<view class="live live3" wx:for="{{showNum}}" wx:key="index" bindtap="toLiveDetail" data-itemid="{{datas.componentData.liveList[index].id}}">
<view class="img">
<image class="cover-img" src="{{datas.componentData.liveList[index].coverUrl}}" mode="aspectFill">
</image>
<view class="live-info">
<view class="isLive" style="background-color:{{ datas.componentData.liveList[index].liveBroadcastState == 2 ? '#000000' :'#ff3300'}}">
<i class="dot"></i>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 0}}">预告</view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 1}}">直播中</view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 2}}">已结束</view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 3}}">暂停直播</view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 4}}">直播超时</view>
</view>
<view class="live-title">{{datas.componentData.liveList[index].title}}</view>
</view>
<image class="common-iconbofang" src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/3784cd9c-d7e5-4db5-a800-f6e5ca43bb44.png"></image>
</view>
<view class="user-info" wx:if="{{datas.componentData.liveInfoShow}}">
<view class="avator">
<image src="{{datas.componentData.liveList[index].anchorHeadImages}}"></image>
</view>
<view class="name">{{datas.componentData.liveList[index].anchorName}}</view>
</view>
</view>
</view>
<view wx:if="{{datas.componentData.style==2}}">
<view class="live live1" wx:for="{{showNum}}" wx:key="index" bindtap="toLiveDetail" data-itemid="{{datas.componentData.liveList[index].id}}">
<view class="title line-clamp1">{{datas.componentData.liveList[index].title}}</view>
<view class="img">
<image class="cover-img" src="{{datas.componentData.liveList[index].coverUrl}}" mode="aspectFill">
</image>
<view class="isLive" style="background-color:{{ datas.componentData.liveList[index].liveBroadcastState == 2 ? '#000000' :'#ff3300'}}">
<i class="dot"></i>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 0}}">预告</view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 1}}">直播中</view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 2}}">已结束</view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 3}}">暂停直播</view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 4}}">直播超时</view>
</view>
<view class="watch-num">{{datas.componentData.liveList[index].watchNum ?datas.componentData.liveList[index].watchNum : 0 }}次观看</view>
<image class="common-iconbofang" src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/3784cd9c-d7e5-4db5-a800-f6e5ca43bb44.png"></image>
</view>
<view class="user-info" wx:if="{{datas.componentData.liveInfoShow}}">
<view class="avator">
<image src="{{datas.componentData.liveList[index].anchorHeadImages}}"></image>
</view>
<view class="name">{{datas.componentData.liveList[index].anchorName}}</view>
</view>
</view>
</view>
<view wx:if="{{datas.componentData.style==3}}">
<view class="live live2" style="padding:{{datas.componentData.liveInfoShow ? '0 9px 10px':''}}" wx:for="{{showNum}}" wx:key="index" bindtap="toLiveDetail" data-itemid="{{datas.componentData.liveList[index].id}}">
<view class="user-info" wx:if="{{datas.componentData.liveInfoShow}}">
<view class="avator">
<image src="{{datas.componentData.liveList[index].anchorHeadImages}}"></image>
</view>
<view class="name">{{datas.componentData.liveList[index].anchorName}}</view>
</view>
<view class="live-detail">
<view class="img">
<image class="cover-img" mode="aspectFill" src="{{datas.componentData.liveList[index].coverUrl}}"></image>
<view class="isLive" style="background-color:{{datas.componentData.liveList[index].liveBroadcastState == 2 ? '#000000' :'#ff3300'}}">
<view class="dot"></view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 0}}">预告</view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 1}}">直播中</view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 2}}">已结束</view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 3}}">暂停直播</view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 4}}">直播超时</view>
</view>
<image class="common-iconbofang" src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/3784cd9c-d7e5-4db5-a800-f6e5ca43bb44.png"></image>
</view>
<view class="info">
<view class="title line-clamp1">{{datas.componentData.liveList[index].title}}</view>
<view class="time"></view>
</view>
</view>
</view>
</view>
</view>
</view>
\ No newline at end of file
static/nativeComponents/LiveBroadcast/index.wxss 0 → 100644
/* static/nativeComponents/LiveBroadcast/index.wxss */
.top{
display: flex;
justify-content: space-between;
align-items: center;
font-size: 32rpx;
height: 80rpx;
padding: 0 40rpx;
background-color: white;
color: #333;
}
.seeMore{
font-size: 28rpx;
color: var(--main-color);
}
.liveList{
width: 100%;
padding: 20rpx 28rpx;
box-sizing: border-box;
}
.liveList .live{
width: 100%;
border-radius: 8rpx;
overflow: hidden;
margin-top: 28rpx;
background-color: white
}
.liveList .live .img{
width: 100%;
}
.liveList .live .img .cover-img{
width: 100%;
}
.liveList .common-iconbofang{
position: absolute;
width: 80rpx;
height: 80rpx;
top: 50%;
left: 50%;
margin-left: -40rpx;
margin-top: -40rpx;
color: rgba(0,0,0,.8);
opacity: 1;
transition: all .5s;
}
.liveList .live .user-info{
display: flex;
justify-content: flex-start;
align-items: center;
height: 84rpx;
}
.liveList .live .user-info .avator{
width: 56rpx;
height: 56rpx;
border-radius: 50%;
background-color: #999;
overflow: hidden;
}
.liveList .live .user-info .avator image{
width: 100%;
height: 100%;
}
.liveList .live .user-info .name{
font-size: 26rpx;
color: #333333;
margin-left: 12rpx;
}
.live3{
position: relative;
box-sizing: border-box;
border-radius: 0;
}
.live3:first-child{
margin-top: 0;
}
.live3 .img{
width: 100%;
height: 422rpx;
overflow: hidden;
position: relative;
}
.live3 .img .cover-img{
width: 100%;
height: 100%;
}
.live3 .img .live-info{
position: absolute;
left: 24rpx;
top: 16rpx;
display: flex;
justify-content: flex-start;
align-items: center;
}
.live3 .img .live-info .isLive{
color: #fff;
font-size: 24rpx;
border-radius: 4rpx;
width: 120rpx;
height: 40rpx;
display: flex;
text-align: center;
line-height: 40rpx;
align-items: center;
justify-content: center;
}
.live3 .img .live-info .isLive .dot{
width: 12rpx;
height:12rpx;
background: #fff;
border-radius: 50%;
margin-right: 8rpx;
}
.live3 .img .live-info .live-title{
font-size: 32rpx;
color: white;
margin-left:8rpx;
text-shadow: 4rpx 4rpx 4rpx #999;
}
.live3 .user-info{
padding-left: 24rpx;
}
.live1{
position: relative;
box-sizing: border-box;
padding:12rpx 24rpx 4rpx;
}
.live1 .title{
color: #333;
font-size: 30rpx;
line-height: 60rpx;
}
.live1 .img{
width: 100%;
height: 362rpx;
border-radius: 4rpx;
overflow: hidden;
position: relative;
}
.live1 .img .cover-img{
width: 100%;
height: 100%;
}
.live1 .img .isLive{
color: #fff;
font-size:24rpx;
border-radius: 4rpx;
width: 120rpx;
height: 40rpx;
display: flex;
text-align: center;
line-height: 40rpx;
align-items: center;
justify-content: center;
position: absolute;
left: 16rpx;
bottom: 16rpx;
}
.live1 .img .isLive .dot{
width: 12rpx;
height: 12rpx;
background: #fff;
border-radius: 50%;
margin-right: 8rpx;
}
.live1 .img .watch-num{
position: absolute;
right: 16rpx;
bottom: 16rpx;
font-size: 26rpx;
color: #FFFDFD;
}
.live2{
box-sizing: border-box;
}
.live2 .live-detail{
display: flex;
}
.live2 .live-detail .img{
width: 40%;
height: 20vh;
position: relative;
}
.live-detail .img .cover-img{
width: 100%;
height: 100%;
}
.live-detail .img .isLive{
color: #fff;
font-size: 24rpx;
border-radius: 4rpx;
width: 120rpx;
height: 40rpx;
display: flex;
text-align: center;
line-height: 40rpx;
align-items: center;
justify-content: center;
position: absolute;
left: 10rpx;
bottom: 10rpx;
}
.live-detail .img .isLive .dot {
width: 12rpx;
height: 12rpx;
background: #fff;
border-radius: 50%;
margin-right: 8rpx;
}
.live-detail .info{
width: 60%;
padding: 0 30rpx;
}
.live-detail .info .title{
line-height: 60rpx;
}
.line-clamp1 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
\ No newline at end of file
static/nativeComponents/PhotoGallery/index.js 0 → 100644
// static/nativeComponents/PhotoGallery/index.js
let app = getApp()
Component({
/**
* 组件的属性列表
*/
properties: {
datas: {
type: Object
}
},
/**
* 组件的初始数据
*/
data: {
getPaddingList: [{
'name': '上',
'value': 0
},
{
'name': '下',
'value': 0
},
{
'name': '左',
'value': 0
},
{
'name': '右',
'value': 0
}
],
},
ready(){
console.log(this.data.datas.componentData.paddingList,'this.data.datas.componentData.paddingList')
if (this.data.datas.componentData.paddingList){
this.setData({
getPaddingList: this.data.datas.componentData.paddingList
})
}
},
/**
* 组件的方法列表
*/
methods: {
}
})
static/nativeComponents/PhotoGallery/index.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
static/nativeComponents/PhotoGallery/index.wxml 0 → 100644
<!--static/nativeComponents/PhotoGallery/index.wxml-->
<view class="photo-gallery" style="padding-top:{{getPaddingList[0]['value'] * 2}}rpx;padding-bottom:{{getPaddingList[1]['value'] * 2}}rpx;padding-left:{{getPaddingList[2]['value'] * 2}}rpx;padding-right:{{getPaddingList[3]['value'] * 2}}rpx">
<view wx:if="{{datas.componentData.titles!=''}}" style="font-size:{{datas.componentData.titleSize}}em;padding-bottom:{{datas.componentData.titlePadding * 2}}rpx" class="textH">
{{datas.componentData.titles}}
</view>
<view wx:if="{{datas.componentData.style==='list'}}">
<view class="imgcontent" wx:for="{{datas.componentData.imgList}}" wx:key="{{index}}" style="margin-bottom:{{datas.componentData.imgPadding * 2}}rpx">
<image src="{{item.imageUrl}}" lazy-load></image>
</view>
</view>
<view wx:elif="{{datas.componentData.style==='across' || datas.componentData.style==='tiled'}}" class="across">
<view class="prev-btn" wx:if="{{datas.componentData.style==='across'}}">
<i class="iconfont-common common-iconyoujiantou"></i>
</view>
<view class="next-btn" wx:if="datas.componentData.style==='across'">
<i class="iconfont-common common-iconyoujiantou"></i>
</view>
<view style="display:{{datas.componentData.style==='tiled' ? 'flex' : ''}}" class="ul">
<view wx:for="{{datas.componentData.imgList}}" wx:key="{{index}}" style="margin-right:{{index===(datas.componentData.imgList.length-1)? '' : datas.componentData.imgPadding * 2 + 'rpx'}};width:{{datas.componentData.style==='across' ? datas.componentData.acrossPer+'%' : ''}}" class="li">
<image src="{{item.imageUrl}}" lazy-load mode="widthFix"></image>
</view>
</view>
</view>
</view>
static/nativeComponents/PhotoGallery/index.wxss 0 → 100644
/* static/nativeComponents/PhotoGallery/index.wxss */
@import "/static/font/common_icon.wxss";
.photo-gallery{
width: 100%;
font-size: 32rpx;
box-sizing: border-box;
}
.textH{
text-align: center;
font-weight: bold;
}
.imgcontent{
width: 100%;
text-align: center;
}
.imgcontent image{
width: 100%;
display: block;
}
.across {
position: relative;
}
.ul{
overflow-x: auto;
white-space: nowrap;
width: 100%;
}
.ul .li{
display: inline-block;
flex: 1
}
.ul .li image{
width: 100%;
vertical-align: middle;
}
.prev-btn,.next-btn{
width: 60rpx;
height: 60rpx;
position: absolute;
top: 50%;
margin-top: -30rpx;
z-index: 99;
opacity: .3;
}
.prev-btn i,.next-btn i {
font-size: 60rpx;
}
.next-btn{
right:10rpx;
}
.prev-btn{
left:10rpx;
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
\ No newline at end of file
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