deming/pageC/merchant/index.vue
2020-08-13 15:41:03 +08:00

403 lines
9.5 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="merchant">
<!-- <view v-if="show" class="show-hide">
<view>
<image></image>
<view>消息</view>
</view>
<view>
<image></image>
<view>首页</view>
</view>
<view>
<image></image>
<view>我的</view>
</view>
</view> -->
<view class="top" :style="{'background':'url(' + info.store_banner + ') 100% 100% no-repeat' }">
<view class="mantle"></view>
<view class="main-container">
<image :src="info.store_avatar"></image>
<view class="info">
<view class="name u-line-1">{{info.store_name}}</view>
<view class="num">粉丝数:{{info.store_collect}}</view>
</view>
<view class="btn" @click="attentionMember">
<image :src="info.is_attention == 0 ? '/static/image/shop/14.png' : '/static/image/shop/8.png'"></image>
<view>{{ info.is_attention == 0 ? "关注" : "已关注" }}</view>
</view>
</view>
</view>
<view class="follow" v-if="info.attention_member && info.attention_member.length">
<view class="title">关注</view>
<scroll-view scroll-x class="list">
<view class="list-items">
<view v-for="(item, index) in info.attention_member" :key="index" class="item">
<image :src="item.friend_frommavatar"></image>
<view class="nickname u-line-1">{{ item.friend_frommname }}</view>
</view>
</view>
</scroll-view>
</view>
<view class="main">
<scroll-view class="video-image" scroll-y v-if="cur==0 && indextop.length" :style="{ height: scrollHeiht }">
<view v-for="item in indextop" :key="item.id" class="container-top">
<videoTop :url="item.article_pic" v-if="item.type == 2" @click.native="toDetailsPage({ id: item.article_id, type: item.type })"></videoTop>
<imageTop v-else :url="item.article_pic" @click.native="toDetailsPage({ id: item.article_id, type: item.type })"></imageTop>
</view>
<view v-if="indexlist.length" class="container-bottom">
<listitem v-for="item in indexlist" :key="item.id" :type="item.type" :url="item.article_pic" class="bottom-item" @click.native="toDetailsPage({ id: item.article_id, type: item.type })"></listitem>
</view>
</scroll-view>
<view class="item" v-if="cur==1">
<goods :sid="sid"></goods>
</view>
</view>
<view class="tabbar">
<view @click="switchCurrent(0)">
<image src="/static/image/shop/9.png"></image>
<view>商品分类</view>
</view>
<view @click="switchCurrent(1)">
<image src="/static/image/shop/10.png" v-if="cur != 1"></image>
<image src="/static/image/shop/13.png" v-else></image>
<view :style="{ color: cur == 1 ? '#FF780F' : '#999999' }">商品列表</view>
</view>
<view @click="switchCurrent(2)">
<image src="/static/image/shop/11.png"></image>
<view>店铺信息</view>
</view>
<view @click="customers()">
<image src="/static/image/shop/12.png"></image>
<view>联系客服</view>
</view>
</view>
</view>
</template>
<script>
// import item from "@/components/shop/list/item"
import goods from "./goods"
import videoTop from "../components/merchant/video-top"
import imageTop from "../components/merchant/image-top"
import listitem from "../components/merchant/list-item"
export default {
data() {
return {
sid: '',
show: false,
cur: 0,
list: [],
indexlist: [],
indextop: [],
info: {},
page: 1,
scrollHeiht: '',
}
},
components:{
goods,
videoTop,
imageTop,
listitem
},
onPullDownRefresh() {
this.getStoreInfo();
this.getArticlelist();
// this.getStoreImgVideoList();
},
onNavigationBarButtonTap(e) {
console.log(e.index);
if(e.index == 0) this.$u.route('/pageC/cart/index');
// if(e.index == 0) this.show = true;
},
methods: {
customers(){
console.log(this.$store.state.hasLogin)
if(!this.$store.state.hasLogin){
this.$refs.uToast.show({
title: "请先登录",
type: 'warning'
})
}else{
function Friend(uuid, name, avatar,time = "", text = "",date = "") {
this.uuid = uuid;
this.name = name;
this.avatar = avatar;
this.online = false;
this.unReadMessage = 0;
this.text = text;
this.time = time;
this.date = date
}
// console.log(123)
this.$u.api.getAtwillUserInfo({
id:this.sid
}).then((res)=>{
console.log(res)
let user = new Friend(res.data.member_id,res.data.member_nickname,res.data.member_avatar)
this.$u.route({
url:"/pageD/privateChat/privateChat",
params:{
id:JSON.stringify(user)
}
})
}).catch((err)=>{
console.log(err)
})
}
},
toDetailsPage({ id, type }) {
// console.log(11);
let src = type == 1 ? 'pageB/photo/index' : 'pageB/video/video';
this.$u.route(src, { id: id });
},
switchCurrent(current) {
this.cur = current;
if(current == 0) {
this.$u.route('/pageC/merchant/storeClassify', { id: this.sid });
} else if(current == 2) {
this.$u.route('/pageC/merchant/details', { id: this.sid });
}
},
getStoreInfo() {
this.$u.api.getStoreInfo({ id: this.sid }).then((res)=>{
this.info = res.data;
uni.stopPullDownRefresh();
})
},
// getStoreImgVideoList() {
// this.$u.api.getStoreImgVideoList({ id: this.sid }).then((res)=>{
// if(res.data.length) {
// this.indextop = [res.data[0], res.data[1]];
// this.indexlist = res.data.slice(2,);
// }
// uni.stopPullDownRefresh();
// })
// },
attentionMember() {
this.$u.api.attentionMember({ member_id: this.info.member_id }).then(res => {
if(res.errCode == 0) {
this.getStoreInfo();
}
this.$u.toast(res.message);
})
},
getArticlelist() {
this.$u.api.getArticlelist({
page: this.page,
is_video_img: 0,
store_id: this.sid,
}).then(res => {
uni.stopPullDownRefresh();
if (res.errCode == 0) {
let articleList = res.data.list;
// articleList.unshift({}, {}, {}, {});
// articleList.push({}, {});
if(JSON.stringify(res.data) != '[]') {
if(articleList.length > 0) {
this.indextop = [articleList[0]]
// this.indextop = [res.data.list[0], res.data.list[1]];
}
if(articleList.length > 1) {
this.indextop.push(articleList[1]);
this.indexlist.push(...articleList.slice(2,));
}
}
}
})
},
setViewHeight() {
const res = uni.getSystemInfoSync();
this.scrollHeiht = res.windowHeight - (73 + 20 + 170) + 'px';
}
},
onLoad(option){
this.sid = option.id;
// console.log(this.sid);
this.getStoreInfo();
this.getArticlelist();
this.setViewHeight();
// this.getStoreImgVideoList();
}
};
</script>
<style lang="scss" scoped>
.merchant {
// min-height: 100vh;
background-color: #ECECEC;
padding-top: calc(350rpx - var(--window-top));
.top {
position: fixed;
top: 0;
left: 0;
z-index: 9;
width: 750rpx;
height: 350rpx;
// background-color: #999999;
.mantle {
width: 750rpx;
height: 350rpx;
position: absolute;
top: 0;
left: 0;
z-index: 10;
background-color: #999999;
opacity: 0.7;
}
.main-container {
display: flex;
align-items: center;
padding: 54rpx 60rpx 0 30rpx;
position: absolute;
top: 0;
left: 0;
z-index: 19;
width: 750rpx;
height: 350rpx;
> image {
margin-right: 40rpx;
width: 140rpx;
height: 140rpx;
border-radius: 50%;
// background-color: aqua;
}
.info {
width: 220rpx;
color: rgba(255,255,255,1);
.name {
margin-bottom: 30rpx;
font-size: 28rpx;
font-weight: 500;
}
.num {
font-size: 24rpx;
}
}
.btn {
margin-left: auto;
width: 162rpx;
height: 60rpx;
border: 2rpx solid rgba(255,255,255,1);
border-radius: 30rpx;
display: flex;
align-items: center;
justify-content: center;
> image {
width: 28rpx;
height: 28rpx;
flex-shrink: 0;
margin-right: 14rpx;
}
> view {
white-space: nowrap;
font-size: 26rpx;
color: rgba(255,255,255,1);
}
}
}
}
.follow {
background-color: #ffffff;
width: 100%;
margin-bottom: 20rpx;
// height: 140rpx;
display: flex;
align-items: center;
padding: 20rpx 30rpx;
.title {
position: relative;
font-size: 30rpx;
font-weight: 500;
color: rgba(51,51,51,1);
margin: 0 30rpx;
&::before {
content: "";
position: absolute;
left: -14rpx;
top: 0;
width: 6rpx;
height: 30rpx;
background: rgba(255,120,15,1);
}
}
.list {
width: 570rpx;
display: flex;
align-items: center;
.list-items {
display: flex;
.item {
&:not(:last-child) {
margin-right: 35rpx;
}
text-align: center;
width: 96rpx;
> image {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
flex-shrink: 0;
margin-bottom: 20rpx;
background-color: aqua;
}
.nickname {
font-size: 22rpx;
color: rgba(51,51,51,1);
}
}
}
}
}
.main{
.video-image {
padding-bottom: 98rpx;
}
.container-top {
> view {
margin-bottom: 10rpx;
}
}
.container-bottom {
margin-top: 20rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.bottom-item {
margin-bottom: 10rpx;
}
}
// > view {
// margin-top: 20rpx;
// }
}
.tabbar {
border-top: 1rpx #DBDADA solid;
width: 100%;
height: 98rpx;
background: rgba(251,251,251,1);
display: flex;
padding: 10rpx 55rpx;
position: fixed;
bottom: 0;
left: 0;
z-index: 9;
> view {
flex: 1;
text-align: center;
> image {
flex-shrink: 0;
width: 40rpx;
height: 40rpx;
margin-bottom: 15rpx;
}
> view {
font-size: 24rpx;
color: rgba(153,153,153,1);
}
}
}
}
</style>