商家列表，商家主页，我的团队
This commit is contained in:
唐明明
@@ -73,7 +73,6 @@
|
||||
recharge({
|
||||
amount: typeof(value) === 'number' ? value: this.priceValue
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay',
|
||||
orderInfo: res,
|
||||
|
||||
@@ -85,8 +85,8 @@
|
||||
code : this.code,
|
||||
}).then((res) => {
|
||||
this.$store.commit('setToken', res.token_type + ' ' + res.access_token);
|
||||
this.$store.commit('setIsNew', res.is_new ? 0 : 1)
|
||||
if(res.is_new){
|
||||
if(res.is_new){
|
||||
uni.setStorageSync('isnew', res.is_new ? 0 : 1)
|
||||
this.$Router.replace({name: 'AuthRole'})
|
||||
return
|
||||
}
|
||||
|
||||
@@ -88,7 +88,7 @@
|
||||
|
||||
<style lang="scss">
|
||||
.afterSales {
|
||||
background-color: #f9f9f9;
|
||||
background-color: $window-color;
|
||||
min-height: 100vh;
|
||||
|
||||
.service-content {
|
||||
|
||||
@@ -98,7 +98,6 @@
|
||||
methods:{
|
||||
getMall(){
|
||||
mall().then(res => {
|
||||
console.log(res);
|
||||
this.banners = res.banners
|
||||
this.goodsArr = res.goods
|
||||
this.newGood = res.news
|
||||
|
||||
@@ -1,570 +1,376 @@
|
||||
<template>
|
||||
<view class="shopDetail">
|
||||
<view class="top">
|
||||
<view class="search" @click="search">
|
||||
<uni-icons type="left" class="back" size="30" @click="$Router.back();" />
|
||||
<view class="input">
|
||||
<uni-icons type="search" class="search-icon" color="grey" size="20" /> 请输入要搜索商品的关键词
|
||||
</view>
|
||||
</view>
|
||||
<view class="shopInfo">
|
||||
<view class="shopInfo-title-left">
|
||||
<image class="shop-logo" src="/static/img/house_back.jpg" mode="aspectFill" />
|
||||
<view class="shop-title">
|
||||
<view class="shop-titl">三只松鼠旗舰店</view>
|
||||
<view> 商品质量:<span class='no'>5.0</span> <text style="padding-left: 20rpx;">服务态度:<span
|
||||
class='no'>5.0</span></text> </view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shopInfo-title-right"> +关注 </view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="content">
|
||||
<view class="left">
|
||||
<scroll-view scroll-y="true" class="scroll-view-left">
|
||||
<view :class="['classify-item', item.category_id === category_id?'active_classify_item':'']"
|
||||
v-for="(item,index) in classify" :key="index" @click="selectClassify(item.category_id)">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<scroll-view scroll-y="true" class="scroll-view-right">
|
||||
<view class="goods-item" v-for="(item,index) in goods" :key="index" @click="onGoods(item.goods_id)">
|
||||
<image :src="item.cover" mode="aspectFill" class="good-img" />
|
||||
<view class="item--content">
|
||||
<view class="title">{{item.name}}</view>
|
||||
<view class="sub_title">{{item.shop.name}}</view>
|
||||
<view class="price">{{item.price.price_min || '0'}}
|
||||
<view class="price-type">
|
||||
<text> DT积分</text>
|
||||
<text class="kucun"> 库存量:1222</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shopDetail">
|
||||
<view class="top">
|
||||
<view class="search" @click="search">
|
||||
<uni-icons type="left" class="back" size="30" @click="$Router.back();" />
|
||||
<view class="input">
|
||||
<uni-icons type="search" class="search-icon" color="grey" size="20" /> 请输入要搜索商品的关键词
|
||||
</view>
|
||||
</view>
|
||||
<view class="shopInfo">
|
||||
<view class="shopInfo-title-left">
|
||||
<image class="shop-logo" :src="logo" mode="aspectFill" />
|
||||
<view class="shop-title">
|
||||
<view class="shop-titl">{{name}}</view>
|
||||
<view>店铺评分:<span class='no'>5.0</span></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="shopInfo-title-right"> +关注 </view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="left">
|
||||
<scroll-view scroll-y="true" class="scroll-view-left">
|
||||
<view :class="['classify-item', item.category_id === category_id?'active_classify_item':'']"
|
||||
v-for="(item,index) in classify" :key="index" @click="selectClassify(item.category_id)">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<scroll-view scroll-y="true" class="scroll-view-right">
|
||||
<block v-if="goods.length > 0">
|
||||
<view class="goods-item" v-for="(item,index) in goods" :key="index"
|
||||
@click="onGoods(item.goods_id)">
|
||||
<image :src="item.cover" mode="aspectFill" class="good-img" />
|
||||
<view class="item--content">
|
||||
<view class="title">{{item.name}}</view>
|
||||
<view class="sub_title">{{item.shop.name}}</view>
|
||||
<view class="price">{{item.price.price_min || '0'}}
|
||||
<view class="price-type">
|
||||
<text> DT积分</text>
|
||||
<text class="kucun"> 库存量:1222</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="vertical pages-empty">
|
||||
<u-empty icon="http://cdn.uviewui.com/uview/empty/list.png" textColor="#999" text="暂无相关商品">
|
||||
</u-empty>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
category_id: 1,
|
||||
classify: [{
|
||||
category_id: 1,
|
||||
name: "全部商品",
|
||||
cover: ""
|
||||
}, {
|
||||
category_id: 2,
|
||||
name: "面部护理",
|
||||
cover: ""
|
||||
}, {
|
||||
category_id: 3,
|
||||
name: "香水彩妆",
|
||||
cover: ""
|
||||
}, {
|
||||
category_id: 4,
|
||||
name: "男装男鞋",
|
||||
cover: ""
|
||||
}, {
|
||||
category_id: 5,
|
||||
name: "儿童用品",
|
||||
cover: ""
|
||||
}],
|
||||
goods: [{
|
||||
"goods_id": 70,
|
||||
"shop": {
|
||||
"shop_id": 1,
|
||||
"name": "平台自营店铺",
|
||||
"cover": "",
|
||||
"is_self": true
|
||||
},
|
||||
"is_self": true,
|
||||
"name": "一口爆浆冰皮榴莲泡泡",
|
||||
"description": "专注冰皮，苏丹王榴莲",
|
||||
"cover": "http://storage.zh.shangkelian.cn/images/2022/01/11/ccd654bda2e3c95e190e941209e50c62.png",
|
||||
"tags": [],
|
||||
"original_price": 111,
|
||||
"price": {
|
||||
"show": "100",
|
||||
"score": 1,
|
||||
"price_min": 100,
|
||||
"price_max": 100
|
||||
},
|
||||
"clicks": 0,
|
||||
"sales": 3253
|
||||
}, {
|
||||
"goods_id": 56,
|
||||
"shop": {
|
||||
"shop_id": 1,
|
||||
"name": "平台自营店铺",
|
||||
"cover": "",
|
||||
"is_self": true
|
||||
},
|
||||
"is_self": true,
|
||||
"name": "铜锣烧蛋糕",
|
||||
"description": "口感丰富，悠闲小食",
|
||||
"cover": "http://storage.zh.shangkelian.cn/images/2022/01/11/37ecc570f9d7ad929a693d24118a0311.png",
|
||||
"tags": [],
|
||||
"original_price": 155,
|
||||
"price": {
|
||||
"show": "100",
|
||||
"score": 1,
|
||||
"price_min": 100,
|
||||
"price_max": 100
|
||||
},
|
||||
"clicks": 0,
|
||||
"sales": 7394
|
||||
}, {
|
||||
"goods_id": 54,
|
||||
"shop": {
|
||||
"shop_id": 1,
|
||||
"name": "平台自营店铺",
|
||||
"cover": "",
|
||||
"is_self": true
|
||||
},
|
||||
"is_self": true,
|
||||
"name": "雪麸蛋糕 香蕉牛奶风味",
|
||||
"description": "北海道牛奶风味",
|
||||
"cover": "http://storage.zh.shangkelian.cn/images/2022/01/11/9093c59ea5d513008926ac4233c20992.png",
|
||||
"tags": [],
|
||||
"original_price": 222,
|
||||
"price": {
|
||||
"show": "111",
|
||||
"score": 1,
|
||||
"price_min": 111,
|
||||
"price_max": 111
|
||||
},
|
||||
"clicks": 1,
|
||||
"sales": 202
|
||||
}, {
|
||||
"goods_id": 37,
|
||||
"shop": {
|
||||
"shop_id": 1,
|
||||
"name": "平台自营店铺",
|
||||
"cover": "",
|
||||
"is_self": true
|
||||
},
|
||||
"is_self": true,
|
||||
"name": "澳大利亚深海鱼油胶囊",
|
||||
"description": "无腥味工艺，呵护全家健康",
|
||||
"cover": "http://storage.zh.shangkelian.cn/images/2022/01/07/af4e0bab7e621d2bd6f1cb7052f1eb71.png",
|
||||
"tags": [],
|
||||
"original_price": 188,
|
||||
"price": {
|
||||
"show": "100",
|
||||
"score": 1,
|
||||
"price_min": 100,
|
||||
"price_max": 100
|
||||
},
|
||||
"clicks": 2,
|
||||
"sales": 5538
|
||||
}, {
|
||||
"goods_id": 28,
|
||||
"shop": {
|
||||
"shop_id": 1,
|
||||
"name": "平台自营店铺",
|
||||
"cover": "",
|
||||
"is_self": true
|
||||
},
|
||||
"is_self": true,
|
||||
"name": "冰淇淋威化饼干",
|
||||
"description": "浓香醇厚，微甜不腻",
|
||||
"cover": "http://storage.zh.shangkelian.cn/images/2022/01/06/f01d2ec7e73dff9371b71892957d85f0.png",
|
||||
"tags": [],
|
||||
"original_price": 155,
|
||||
"price": {
|
||||
"show": "111",
|
||||
"score": 1,
|
||||
"price_min": 111,
|
||||
"price_max": 111
|
||||
},
|
||||
"clicks": 0,
|
||||
"sales": 2707
|
||||
}, {
|
||||
"goods_id": 33,
|
||||
"shop": {
|
||||
"shop_id": 1,
|
||||
"name": "平台自营店铺",
|
||||
"cover": "",
|
||||
"is_self": true
|
||||
},
|
||||
"is_self": true,
|
||||
"name": "麦饭石天然矿泉水",
|
||||
"description": "优选产地，多种矿物质",
|
||||
"cover": "http://storage.zh.shangkelian.cn/images/2022/01/06/770afc8c293ff493c35d9a98dc3dbe97.png",
|
||||
"tags": [],
|
||||
"original_price": 122,
|
||||
"price": {
|
||||
"show": "100",
|
||||
"score": 1,
|
||||
"price_min": 100,
|
||||
"price_max": 100
|
||||
},
|
||||
"clicks": 2,
|
||||
"sales": 5257
|
||||
}, {
|
||||
"goods_id": 24,
|
||||
"shop": {
|
||||
"shop_id": 1,
|
||||
"name": "平台自营店铺",
|
||||
"cover": "",
|
||||
"is_self": true
|
||||
},
|
||||
"is_self": true,
|
||||
"name": "小米锅巴",
|
||||
"description": "8%小米含量，松脆营养",
|
||||
"cover": "http://storage.zh.shangkelian.cn/images/2022/01/06/5c6bbb8f1f50953c3d25b7a5c22a9865.png",
|
||||
"tags": [],
|
||||
"original_price": 155,
|
||||
"price": {
|
||||
"show": "111",
|
||||
"score": 1,
|
||||
"price_min": 111,
|
||||
"price_max": 111
|
||||
},
|
||||
"clicks": 0,
|
||||
"sales": 2653
|
||||
}, {
|
||||
"goods_id": 97,
|
||||
"shop": {
|
||||
"shop_id": 1,
|
||||
"name": "平台自营店铺",
|
||||
"cover": "",
|
||||
"is_self": true
|
||||
},
|
||||
"is_self": true,
|
||||
"name": "甜味浓郁低糖水果千禧玲珑小番茄",
|
||||
"description": "甜味浓郁低糖水果千禧玲珑小番茄",
|
||||
"cover": "http://storage.zh.shangkelian.cn/images/2022/01/11/8c44833a6d9477a9c01f8b4e06b2f748.png",
|
||||
"tags": [],
|
||||
"original_price": 0,
|
||||
"price": {
|
||||
"show": "89",
|
||||
"score": 10,
|
||||
"price_min": 89,
|
||||
"price_max": 89
|
||||
},
|
||||
"clicks": 0,
|
||||
"sales": 1347
|
||||
}, {
|
||||
"goods_id": 12,
|
||||
"shop": {
|
||||
"shop_id": 1,
|
||||
"name": "平台自营店铺",
|
||||
"cover": "",
|
||||
"is_self": true
|
||||
},
|
||||
"is_self": true,
|
||||
"name": "秘制手撕牛肉",
|
||||
"description": "肉质紧致弹牙，细嚼口齿留香",
|
||||
"cover": "http://storage.zh.shangkelian.cn/images/2022/01/06/bbd96a7724cb053e501b4ce2c34b5a0f.png",
|
||||
"tags": [],
|
||||
"original_price": 255,
|
||||
"price": {
|
||||
"show": "111",
|
||||
"score": 1,
|
||||
"price_min": 111,
|
||||
"price_max": 111
|
||||
},
|
||||
"clicks": 0,
|
||||
"sales": 1352
|
||||
}, {
|
||||
"goods_id": 58,
|
||||
"shop": {
|
||||
"shop_id": 1,
|
||||
"name": "平台自营店铺",
|
||||
"cover": "",
|
||||
"is_self": true
|
||||
},
|
||||
"is_self": true,
|
||||
"name": "挚爱巧克力",
|
||||
"description": "黄金可可，瑞士工艺传承",
|
||||
"cover": "http://storage.zh.shangkelian.cn/images/2022/01/11/ad5953e7f7ae60ca2f13f1313d67bb62.png",
|
||||
"tags": [],
|
||||
"original_price": 200,
|
||||
"price": {
|
||||
"show": "100",
|
||||
"score": 1,
|
||||
"price_min": 100,
|
||||
"price_max": 100
|
||||
},
|
||||
"clicks": 0,
|
||||
"sales": 5420
|
||||
}],
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.shopId = this.$Route.query.id;
|
||||
},
|
||||
methods: {
|
||||
selectClassify(id) {
|
||||
if (id === this.category_id) return;
|
||||
this.category_id = id;
|
||||
},
|
||||
search() {
|
||||
console.log('search')
|
||||
this.$Router.push({
|
||||
'name': 'StoreSearch'
|
||||
});
|
||||
},
|
||||
onGoods(id) {
|
||||
this.$Router.push({
|
||||
name: 'StoreGoods',
|
||||
params: {
|
||||
id: id
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
import {
|
||||
shopsDetail,
|
||||
shopsGoods
|
||||
} from "@/apis/interfaces/store"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name : '',
|
||||
logo : '',
|
||||
category_id : '',
|
||||
classify : [],
|
||||
goods : [],
|
||||
pages : {}
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.ShopId = this.$Route.query.ShopId
|
||||
shopsDetail(this.ShopId).then(res => {
|
||||
this.classify = [{
|
||||
category_id: '',
|
||||
name: '全部商品',
|
||||
}, ...res.categories]
|
||||
this.name = res.name
|
||||
this.logo = res.cover
|
||||
this.getGoods()
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getGoods() {
|
||||
uni.showLoading({
|
||||
title: '加载中...'
|
||||
})
|
||||
shopsGoods(this.ShopId, this.category_id).then(res => {
|
||||
this.goods = res.data
|
||||
this.pages = res.page
|
||||
uni.hideLoading()
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
selectClassify(id) {
|
||||
if (id === this.category_id) return;
|
||||
this.category_id = id;
|
||||
this.getGoods()
|
||||
},
|
||||
search() {
|
||||
this.$Router.push({
|
||||
name: 'StoreSearch'
|
||||
});
|
||||
},
|
||||
onGoods(id) {
|
||||
this.$Router.push({
|
||||
name: 'StoreGoods',
|
||||
params: {
|
||||
id: id
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.shopDetail {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
.pages-empty {
|
||||
height: 70vh;
|
||||
}
|
||||
|
||||
.top {
|
||||
height: 320rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
box-sizing: border-box;
|
||||
padding-top: 44px;
|
||||
width: 100%;
|
||||
.shopDetail {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding-right: $padding;
|
||||
.top {
|
||||
height: 320rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
box-sizing: border-box;
|
||||
padding-top: 44px;
|
||||
width: 100%;
|
||||
|
||||
.back {
|
||||
padding: 0 $padding;
|
||||
}
|
||||
.search {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding-right: $padding;
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
background-color: #f9f9f9;
|
||||
color: gray;
|
||||
font-size: 26rpx;
|
||||
border-radius: 30rpx;
|
||||
padding: 10rpx $padding;
|
||||
.back {
|
||||
padding: 0 $padding;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
margin-right: $margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
background-color: #f9f9f9;
|
||||
color: gray;
|
||||
font-size: 26rpx;
|
||||
border-radius: 30rpx;
|
||||
padding: 10rpx $padding;
|
||||
|
||||
.search-icon {
|
||||
margin-right: $margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.shopInfo {
|
||||
border-top: solid 1 #f9f9f9;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: $padding - 10;
|
||||
background-color: #fff;
|
||||
.shopInfo {
|
||||
border-top: solid 1 #f9f9f9;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: $padding - 10;
|
||||
background-color: #fff;
|
||||
|
||||
.shopInfo-title-left {
|
||||
width: 500rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
.shopInfo-title-left {
|
||||
width: 500rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
|
||||
.shop-logo {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 10rpx;
|
||||
border: solid 1rpx #f9f9f9;
|
||||
}
|
||||
.shop-logo {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 10rpx;
|
||||
border: solid 1rpx #f9f9f9;
|
||||
}
|
||||
|
||||
.shop-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
font-size: 26rpx;
|
||||
margin-left: $margin;
|
||||
color: #999;
|
||||
width: 370rpx;
|
||||
.shop-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
font-size: 26rpx;
|
||||
margin-left: $margin;
|
||||
color: #999;
|
||||
width: 370rpx;
|
||||
|
||||
.no {
|
||||
color: $text-price;
|
||||
padding-left: 4rpx;
|
||||
}
|
||||
.no {
|
||||
color: $text-price;
|
||||
padding-left: 4rpx;
|
||||
}
|
||||
|
||||
.shop-titl {
|
||||
font-size: 34rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
margin-bottom: 6rpx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.shop-titl {
|
||||
font-size: 34rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
margin-bottom: 6rpx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shopInfo-title-right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
font-size: 28rpx;
|
||||
color: #222;
|
||||
background-color: $main-color;
|
||||
padding: 6rpx $padding;
|
||||
color: #FFF;
|
||||
}
|
||||
.shopInfo-title-right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
font-size: 28rpx;
|
||||
color: #222;
|
||||
background-color: $main-color;
|
||||
padding: 6rpx $padding;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
height: calc(100vh - 320rpx);
|
||||
background-color: #eee;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-top: 20rpx;
|
||||
box-sizing: border-box;
|
||||
.content {
|
||||
height: calc(100vh - 320rpx);
|
||||
background-color: #eee;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-top: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.left {
|
||||
width: 180rpx;
|
||||
height: 100%;
|
||||
.left {
|
||||
width: 180rpx;
|
||||
height: 100%;
|
||||
|
||||
.scroll-view-left {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.scroll-view-left {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.classify-item {
|
||||
width: 100%;
|
||||
padding: $padding 0;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #222;
|
||||
display: inline-block;
|
||||
}
|
||||
.classify-item {
|
||||
width: 100%;
|
||||
padding: $padding 0;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #222;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.active_classify_item {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.active_classify_item {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: calc(100% - 180rpx);
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
.right {
|
||||
width: calc(100% - 180rpx);
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
|
||||
.scroll-view-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.scroll-view-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.goods-item {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
border-bottom: solid 1rpx #eee;
|
||||
// padding: $padding;
|
||||
padding-left: $padding;
|
||||
padding-top: $padding;
|
||||
padding-bottom: $padding;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
.goods-item {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
border-bottom: solid 1rpx #eee;
|
||||
// padding: $padding;
|
||||
padding-left: $padding;
|
||||
padding-top: $padding;
|
||||
padding-bottom: $padding;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
|
||||
.good-img {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.good-img {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.item--content {
|
||||
flex: 1;
|
||||
padding: $padding - 10;
|
||||
.item--content {
|
||||
flex: 1;
|
||||
padding: $padding - 10;
|
||||
|
||||
&>.title {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
// @extend .ellipsis-1;
|
||||
}
|
||||
&>.title {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
// @extend .ellipsis-1;
|
||||
}
|
||||
|
||||
&>.sub_title {
|
||||
color: #a05f0c;
|
||||
font-size: 24rpx;
|
||||
padding-top: 4rpx;
|
||||
// @extend .ellipsis-1;
|
||||
}
|
||||
&>.sub_title {
|
||||
color: #a05f0c;
|
||||
font-size: 24rpx;
|
||||
padding-top: 4rpx;
|
||||
// @extend .ellipsis-1;
|
||||
}
|
||||
|
||||
&>.price {
|
||||
padding-top: $padding/2;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
line-height: 40rpx;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: $text-price;
|
||||
&>.price {
|
||||
padding-top: $padding/2;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
line-height: 40rpx;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: $text-price;
|
||||
|
||||
// @extend .ellipsis-1;
|
||||
.price-type {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
// @extend .ellipsis-1;
|
||||
.price-type {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
|
||||
text {
|
||||
margin-right: $margin/2;
|
||||
padding-left: 6rpx;
|
||||
font-size: 70%;
|
||||
}
|
||||
text {
|
||||
margin-right: $margin/2;
|
||||
padding-left: 6rpx;
|
||||
font-size: 70%;
|
||||
}
|
||||
|
||||
.kucun {
|
||||
color: $text-gray;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
.kucun {
|
||||
color: $text-gray;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,79 +1,58 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- banner -->
|
||||
<view class="banner">
|
||||
<image class="banner-cover"
|
||||
src="http://storage.zh.shangkelian.cn/images/2022/01/11/7278de59f0817da7fbcaf6657dba7475.jpg"
|
||||
mode="aspectFill" />
|
||||
</view>
|
||||
<!-- 分类 -->
|
||||
<u-sticky bgColor="#fff" zIndex="99">
|
||||
<u-tabs :list="classify" lineColor="#34CE98" @click="onTabs" />
|
||||
</u-sticky>
|
||||
<!-- 店铺列表 -->
|
||||
<block v-for="(item,index) in 10" :key="index">
|
||||
<view class="shopInfo" @click="toShop(2)">
|
||||
<view class="shopInfo-title-left">
|
||||
<image class="shop-logo" src="/static/img/house_back.jpg" mode="aspectFill" />
|
||||
<view class="shop-title">
|
||||
<view class="shop-titl">三只松鼠旗舰店</view>
|
||||
<view> 商品质量:<span>5.0</span> <text style="padding-left: 20rpx;">服务态度:<span>5.0</span></text> </view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shopInfo-title-right" >全部商品 723 <uni-icons type="right" color="grey" /></view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 店铺列表 -->
|
||||
<block v-if="shopsArr.length > 0">
|
||||
<view class="shop-List">
|
||||
<view class="shopInfo" v-for="(item,index) in shopsArr" :key="index" @click="toShop(item.shop_id)">
|
||||
<view class="shopInfo-title-left">
|
||||
<image class="shop-logo" :src="item.cover" mode="aspectFill" />
|
||||
<view class="shop-title">
|
||||
<view class="shop-titl nowrap">{{item.name}}</view>
|
||||
<view>店铺评分:<span>5.0</span></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shopInfo-title-right" >在售{{item.goods_count}}件<uni-icons class="icons" type="right" size="14" color="grey" /></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="vertical pages-empty">
|
||||
<u-empty
|
||||
icon="http://cdn.uviewui.com/uview/empty/list.png"
|
||||
textColor="#999"
|
||||
text="暂无相关店铺"
|
||||
>
|
||||
</u-empty>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
meals
|
||||
shops
|
||||
} from "@/apis/interfaces/store"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
banner: "",
|
||||
goodsArr: [],
|
||||
// classify: [],
|
||||
classify: [{
|
||||
category_id: 1,
|
||||
name: " 全部",
|
||||
cover: ""
|
||||
}, {
|
||||
category_id: 2,
|
||||
name: " 母婴",
|
||||
cover: ""
|
||||
}, {
|
||||
category_id: 3,
|
||||
name: "服饰",
|
||||
cover: ""
|
||||
}, {
|
||||
category_id: 4,
|
||||
name: "男装",
|
||||
cover: ""
|
||||
}, {
|
||||
category_id: 5,
|
||||
name: "男鞋",
|
||||
cover: ""
|
||||
}, {
|
||||
category_id: 6,
|
||||
name: "女装",
|
||||
cover: ""
|
||||
}]
|
||||
shopsArr : [],
|
||||
classify : [],
|
||||
shopsPage: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// this.getMeals()
|
||||
this.getShops()
|
||||
},
|
||||
methods: {
|
||||
getMeals() {
|
||||
meals(this.$Route.query.id, this.categoryId).then(res => {
|
||||
uni.setNavigationBarTitle({
|
||||
title: res.meal.subtitle
|
||||
})
|
||||
this.banner = res.meal.banner
|
||||
this.goodsArr = res.goods
|
||||
getShops() {
|
||||
shops(this.categoryId).then(res => {
|
||||
console.log(res)
|
||||
this.shopsArr = res.shops.data
|
||||
this.shopsPage= res.shops.page
|
||||
this.classify = [{
|
||||
name: "全部",
|
||||
category_id: ""
|
||||
@@ -83,10 +62,9 @@
|
||||
},
|
||||
onTabs(e) {
|
||||
this.categoryId = e.category_id
|
||||
this.getMeals()
|
||||
this.getShops()
|
||||
},
|
||||
toShop(id) {
|
||||
console.log('toShop/////.........');
|
||||
this.$Router.push({
|
||||
name: 'ShopDetail',
|
||||
params: {
|
||||
@@ -96,106 +74,95 @@
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.getMeals()
|
||||
this.getShops()
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss" scoped>
|
||||
.pages-empty{
|
||||
height: 70vh;
|
||||
}
|
||||
.content {
|
||||
background: $window-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
// banner
|
||||
.banner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
padding-top: 40%;
|
||||
|
||||
&-text,
|
||||
&-cover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 筛选
|
||||
.classify-tabs {
|
||||
background: white;
|
||||
}
|
||||
|
||||
|
||||
.shopInfo {
|
||||
border-top: solid 1 #f9f9f9;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: $padding $padding - 10;
|
||||
border-bottom: solid 10rpx #f9f9f9;
|
||||
background-color: #fff;
|
||||
|
||||
.shopInfo-title-left {
|
||||
width: 500rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
|
||||
.shop-logo {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 10rpx;
|
||||
border: solid 1rpx #f9f9f9;
|
||||
}
|
||||
|
||||
.shop-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
font-size: 26rpx;
|
||||
margin-left: $margin;
|
||||
color: #999;
|
||||
width: 370rpx;
|
||||
|
||||
span {
|
||||
color: $text-price;
|
||||
padding-left: 4rpx;
|
||||
}
|
||||
|
||||
.shop-titl {
|
||||
font-size: 34rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
margin-bottom: 6rpx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shopInfo-title-right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
font-size: 28rpx;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.shop-List{
|
||||
padding: $padding;
|
||||
.shopInfo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: $padding - 10;
|
||||
background-color: #fff;
|
||||
border-radius: $radius;
|
||||
margin-top: 20rpx;
|
||||
&:first-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
.shopInfo-title-left {
|
||||
width: 60%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
padding-left: 90rpx;
|
||||
min-height: 90rpx;
|
||||
box-sizing: border-box;
|
||||
.shop-logo {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 10rpx;
|
||||
border: solid 1rpx #f9f9f9;
|
||||
}
|
||||
.shop-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
font-size: 26rpx;
|
||||
margin-left: $margin;
|
||||
color: #999;
|
||||
width: 100%;
|
||||
span {
|
||||
color: $text-price;
|
||||
padding-left: 4rpx;
|
||||
}
|
||||
.shop-titl {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
margin-bottom: 6rpx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.shopInfo-title-right {
|
||||
width: 40%;
|
||||
text-align: right;
|
||||
font-size: 26rpx;
|
||||
color: gray;
|
||||
.icons{
|
||||
vertical-align: bottom;
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,23 +1,248 @@
|
||||
<template>
|
||||
<view>
|
||||
共力团队
|
||||
|
||||
<view>共力家族</view>
|
||||
<view>共力伙伴</view>
|
||||
<view>供应商</view>
|
||||
<view class="team">
|
||||
<!-- 统计信息 -->
|
||||
<view class="team-hader">
|
||||
<view class="team-hader-item">
|
||||
<image class="team-hader-cover" src="@/static/vip/lv_03.png" mode="widthFix"></image>
|
||||
<view class="team-hader-title">共力家族</view>
|
||||
<view class="team-hader-number"><text>{{count.one}}</text>人</view>
|
||||
</view>
|
||||
<view class="team-hader-item">
|
||||
<image class="team-hader-cover" src="@/static/vip/lv_04.png" mode="widthFix"></image>
|
||||
<view class="team-hader-title">共力伙伴</view>
|
||||
<view class="team-hader-number"><text>{{count.two}}</text>人</view>
|
||||
</view>
|
||||
<view class="team-hader-item">
|
||||
<image class="team-hader-cover" src="@/static/vip/lv_06.png" mode="widthFix"></image>
|
||||
<view class="team-hader-title">供应商</view>
|
||||
<view class="team-hader-number"><text>{{count.supplier}}</text>人</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 邀请好友 -->
|
||||
<view class="team-invite">
|
||||
<image src="@/static/img/team_00.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<!-- 团队 -->
|
||||
<view class="team-tabs">
|
||||
<u-tabs
|
||||
:list="teamTabs"
|
||||
:scrollable="false"
|
||||
lineColor="#34CE98"
|
||||
@click="onTeamTab"
|
||||
></u-tabs>
|
||||
<view class="team-lists">
|
||||
<view class="team-list-header">
|
||||
<view class="team-list-header-item">用户</view>
|
||||
<view class="team-list-header-item">手机号码</view>
|
||||
<view class="team-list-header-item">{{tabsType === 'supplier' ? '业绩': '注册时间'}}</view>
|
||||
</view>
|
||||
<block v-if="users.length > 0">
|
||||
<view class="team-list-flex" v-for="(item, index) in 10" :key="index">
|
||||
<view class="team-list-flex-item user">
|
||||
<image class="user-cover" src="" mode="aspectFill"></image>
|
||||
<view class="user-nickname">唐明明</view>
|
||||
</view>
|
||||
<view class="team-list-flex-item number">182****0131</view>
|
||||
<view class="team-list-flex-item number">2022/06/09</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="vertical pages-empty">
|
||||
<u-empty
|
||||
icon="http://cdn.uviewui.com/uview/empty/list.png"
|
||||
textColor="#999"
|
||||
text="暂无成员"
|
||||
>
|
||||
</u-empty>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { relations } from '@/apis/interfaces/team.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
teamTabs: [
|
||||
{ name: '共力家族', type: 'one'},
|
||||
{ name: '共力伙伴', type: 'two'},
|
||||
{ name: '供应商', type: 'supplier'},
|
||||
],
|
||||
tabsType: 'one',
|
||||
count: {
|
||||
all: 0,
|
||||
one: 0,
|
||||
two: 0,
|
||||
supplier: 0
|
||||
},
|
||||
users: [],
|
||||
page : {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 共力团队
|
||||
onTeamTab(e){
|
||||
if(this.tabsType === e.type) return
|
||||
this.tabsType = e.type
|
||||
this.getRelations()
|
||||
},
|
||||
// 团队信息
|
||||
getRelations(){
|
||||
uni.showLoading({
|
||||
title: '加载中...'
|
||||
})
|
||||
relations({
|
||||
larer: this.tabsType
|
||||
}).then(res => {
|
||||
this.count = res.count
|
||||
this.users = res.users.data
|
||||
this.pages = res.users.page
|
||||
uni.hideLoading()
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.team{
|
||||
background: $window-color;
|
||||
min-height: 100vh;
|
||||
padding-bottom: $padding*2;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
// 用户数据
|
||||
.pages-empty{
|
||||
height: 45vh;
|
||||
}
|
||||
// 团队统计
|
||||
.team-hader{
|
||||
position: relative;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&-item{
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: calc(33.33% - 20rpx);
|
||||
background-color: white;
|
||||
margin: 0 10rpx;
|
||||
border-radius: $radius*2 $radius $radius*2 $radius;
|
||||
height: 150rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
&:nth-child(1){
|
||||
background-image: linear-gradient(to bottom right, #f6d5c2, #edc0a1);
|
||||
}
|
||||
&:nth-child(2){
|
||||
background-image: linear-gradient(to bottom right, #d5ddee, #b5c1d9);
|
||||
}
|
||||
&:nth-child(3){
|
||||
background-image: linear-gradient(to bottom right, #f5cb8e, #efba6d);
|
||||
}
|
||||
}
|
||||
&-title{
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: 26rpx;
|
||||
@extend .nowrap;
|
||||
}
|
||||
&-number{
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@extend .nowrap;
|
||||
text{
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
padding-right: 6rpx;
|
||||
}
|
||||
font-size: 26rpx;
|
||||
}
|
||||
&-cover{
|
||||
position: absolute;
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
right: -100rpx;
|
||||
top: -30rpx;
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
// 邀请团队
|
||||
.team-invite{
|
||||
padding: 0 $padding;
|
||||
image{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
// 团队列表
|
||||
.team-tabs{
|
||||
margin: 0 $margin $margin $margin;
|
||||
padding-bottom: $padding;
|
||||
.team-lists{
|
||||
margin-top: $margin/2;
|
||||
border-radius: $radius;
|
||||
background: white;
|
||||
padding: 20rpx $padding;
|
||||
.team-list-header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
border-bottom: solid 1px $border-color;
|
||||
line-height: 70rpx;
|
||||
padding-bottom: 15rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: $text-gray;
|
||||
margin-bottom: 10rpx;
|
||||
.team-list-header-item{
|
||||
width: 33.33%;
|
||||
}
|
||||
}
|
||||
.team-list-flex{
|
||||
display: flex;
|
||||
font-size: 28rpx;
|
||||
padding: 10rpx 0;
|
||||
&-item{
|
||||
width: 33.33%;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
color: #333;
|
||||
&.user{
|
||||
padding-left: 70rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
.user-cover{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 5rpx;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 50%;
|
||||
background: $window-color;
|
||||
}
|
||||
.user-nickname{
|
||||
@extend .nowrap;
|
||||
}
|
||||
}
|
||||
&.number{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<view class="info-box">
|
||||
<image src="@/static/user/user_back.png" mode="aspectFill" />
|
||||
<view class="user-flex">
|
||||
<image class="cover" @click="goSetting" :src="userInfo.avatar || require('@/static/user/cover.png')"
|
||||
<image class="cover" @click="onBtn('Setting', {})" :src="userInfo.avatar || require('@/static/user/cover.png')"
|
||||
mode="aspectFill" />
|
||||
<view class="user-content">
|
||||
<block v-if="$store.state.token != ''">
|
||||
@@ -21,11 +21,11 @@
|
||||
普通用户
|
||||
</view>
|
||||
</view>
|
||||
<view class="chainAddress" v-if="userInfo.chain_address">
|
||||
<!-- <u-icon labelPos="left" @click="copy(userInfo.chain_address)" labelSize="14"
|
||||
<!-- <view class="chainAddress" v-if="userInfo.chain_address">
|
||||
<u-icon labelPos="left" @click="copy(userInfo.chain_address)" labelSize="14"
|
||||
labelColor="#fff" :label="userInfo.chain_address.substr(0, 20)+'...'" space="10"
|
||||
:name="require('@/static/imgs/copy.png')" size="16" /> -->
|
||||
</view>
|
||||
:name="require('@/static/imgs/copy.png')" size="16" />
|
||||
</view> -->
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="name">未登录</view>
|
||||
@@ -44,8 +44,8 @@
|
||||
<u-notice-bar :text="cardText" icon="" bgColor="" duration="3000" color="#fcc692" direction="column">
|
||||
</u-notice-bar>
|
||||
</view>
|
||||
<!-- v-if="userInfo.identity.length === 0" -->
|
||||
<view class="btn" @click="openVip">开通</view>
|
||||
<!-- v-if="userInfo.identity.length === 0" -->
|
||||
<view class="btn" @click="onBtn('Vip', {})">开通</view>
|
||||
</view>
|
||||
|
||||
<!-- 健康数据 -->
|
||||
@@ -84,7 +84,7 @@
|
||||
</view>
|
||||
<!-- 功能块 -->
|
||||
<view class="btns-box">
|
||||
<view class="btns-box-item">
|
||||
<view class="btns-box-item" @click="onMnemonic">
|
||||
<image class="icon" src="@/static/user/userIcon_02.png" mode="widthFix" />
|
||||
导出助记词
|
||||
<uni-icons class="forward" type="forward" color="#999" />
|
||||
@@ -127,13 +127,25 @@
|
||||
<view class="footer-text">
|
||||
<view>共力生态</view>
|
||||
<view>The total force ecological</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 助记词弹出框 -->
|
||||
<u-modal :show="wordsShow" :zoom="false" confirmText="复制" @confirm="copyWord" confirmColor="#34CE98">
|
||||
<slot default>
|
||||
<view class="wordsCont">
|
||||
<view class="wordsCont-title">导出助记词</view>
|
||||
<view class="wordsCont-tips">请务必抄下助记词并存在安全的地方，若助记词丢失，重装或换设备登录时将无法查看历史消息！若助记词被他人获取，将可能获取你的信息！</view>
|
||||
<view class="wordsCont-text">{{mnemonic}}</view>
|
||||
<image class="wordsCont-close" @click="wordsShow = false" src="@/static/icon/userCloes.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</slot>
|
||||
</u-modal>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
info
|
||||
info,
|
||||
chainSeed
|
||||
} from '@/apis/interfaces/user';
|
||||
import userAuth from '@/public/userAuth';
|
||||
|
||||
@@ -145,7 +157,9 @@
|
||||
nickname: '',
|
||||
avatar: '',
|
||||
identity: []
|
||||
}
|
||||
},
|
||||
mnemonic : '',
|
||||
wordsShow: false
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
@@ -168,10 +182,18 @@
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
},
|
||||
// 开通会员
|
||||
openVip() {
|
||||
this.$Router.push({name: 'Vip'})
|
||||
},
|
||||
// 导出助记词
|
||||
onMnemonic(){
|
||||
chainSeed().then(res => {
|
||||
this.mnemonic = res.seed
|
||||
this.wordsShow = true
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
// 按钮导航
|
||||
onBtn(name, params) {
|
||||
@@ -180,17 +202,17 @@
|
||||
params
|
||||
});
|
||||
},
|
||||
goSetting() {
|
||||
this.$Router.push({
|
||||
name: 'Setting'
|
||||
})
|
||||
},
|
||||
// 退出登录
|
||||
logOut() {
|
||||
this.$store.commit('setToken', '');
|
||||
this.$store.commit('setIsNew', '');
|
||||
this.$Router.replaceAll({name: 'Auth'})
|
||||
},
|
||||
logOut() {
|
||||
uni.removeStorage({
|
||||
key: 'isnew',
|
||||
success: () =>{
|
||||
this.$store.commit('setToken', '');
|
||||
this.$Router.replaceAll({name: 'Auth'})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 复制
|
||||
copy(data) {
|
||||
uni.setClipboardData({
|
||||
data: data,
|
||||
@@ -203,7 +225,21 @@
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
// 复制助记词
|
||||
copyWord() {
|
||||
uni.setClipboardData({
|
||||
data: this.mnemonic,
|
||||
success: () => {
|
||||
this.wordsShow = false
|
||||
uni.showToast({
|
||||
title: '助记词已复制',
|
||||
icon: 'none',
|
||||
mask: true
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -456,5 +492,38 @@
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 助记词弹框 */
|
||||
.wordsCont {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wordsCont-title {
|
||||
width: 100%;
|
||||
font-weight: 600;
|
||||
font-size: 44rpx;
|
||||
}
|
||||
|
||||
.wordsCont-tips {
|
||||
padding: 30rpx 0;
|
||||
box-sizing: border-box;
|
||||
color: #de5660;
|
||||
line-height: 48rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.wordsCont-text {
|
||||
font-weight: 500;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.wordsCont-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user