初始化代码
This commit is contained in:
375
uniapp/uni-app/pages/claim.vue
Normal file
375
uniapp/uni-app/pages/claim.vue
Normal file
@@ -0,0 +1,375 @@
|
||||
<template>
|
||||
<view class="pages-claim" v-if="isLoad">
|
||||
<fixed :refresh="refresh">
|
||||
<view class="fill-base">
|
||||
<banner :list="banner" :margin="0" :autoplay="true" :borderRadius="0" :height="420"
|
||||
:indicatorActiveColor="primaryColor" v-if="banner.length > 0"></banner>
|
||||
<view class="fill-base flex-between b-1px-b">
|
||||
<view style="width: 650rpx;">
|
||||
<tab @change="handerTabChange($event,'activeIndex')" :list="tabList" :activeIndex="activeIndex"
|
||||
:activeColor="primaryColor" height="100rpx"></tab>
|
||||
</view>
|
||||
<view @tap.stop="toShowRank" class="flex-center c-caption b-1px-l" style="width: 100rpx;">
|
||||
<i class="iconfont icon-down-bold" :class="[{'rotate-180':show_rank_item}]"></i>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</fixed>
|
||||
|
||||
<uni-popup @change="popupChange" ref="rank_item" type="top" :custom="true">
|
||||
<view :style="{height: banner.length > 0 ? '520rpx':'100rpx'}"></view>
|
||||
<view class="pd-lg fill-base">
|
||||
<view @tap.stop="handerTabChange(index,'rankInd')" class="f-paragraph c-title"
|
||||
:class="[{'mt-md':index!=0}]" :style="{color:index==rankInd?primaryColor:''}"
|
||||
v-for="(item,index) in rankList" :key="index">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
|
||||
<view @tap.stop="goDetail(index)" class="claim-item fill-base mt-md ml-md mr-md box-shadow radius-24"
|
||||
v-for="(item,index) in list.data" :key="index">
|
||||
<view class="flex-between pt-lg pl-lg pr-lg">
|
||||
<view class="flex-y-center">
|
||||
<image mode="aspectFill" lazy-load class="avatar mini radius" :src="item.farmer_info.cover"></image>
|
||||
<view class="ml-lg max-446 ellipsis">{{item.farmer_info.title}}</view>
|
||||
</view>
|
||||
<i class="iconfont icon-right c-caption" style="font-size: 28rpx;"></i>
|
||||
</view>
|
||||
<view class="flex-center pd-lg">
|
||||
<image mode="aspectFill" lazy-load class="cover fill-body radius-24" :src="item.cover"></image>
|
||||
<view class="flex-1 ml-lg max-380">
|
||||
<view class="f-title c-title ellipsis-2">{{item.title}}</view>
|
||||
<view class="f-paragraph c-title">{{`${item.start_time} ～ ${item.end_time}`}}</view>
|
||||
<view class="flex-between mt-sm mb-md">
|
||||
<view class="line-item rel">
|
||||
<view class="cur abs" :style="{width:item.precent}"></view>
|
||||
</view>
|
||||
<view class="c-caption" style="font-size: 20rpx;">已认养{{item.precent}}</view>
|
||||
</view>
|
||||
<view class="count-list flex-warp">
|
||||
<view class="count-item">
|
||||
<view class="flex-y-center f-caption c-caption">
|
||||
<view class="dot radius"></view>品种
|
||||
</view>
|
||||
<view class="f-paragraph c-title ellipsis">{{item.breed}}</view>
|
||||
</view>
|
||||
<view class="count-item">
|
||||
<view class="flex-y-center f-caption c-caption">
|
||||
<view class="dot radius"></view>周期
|
||||
</view>
|
||||
<view class="f-paragraph c-title ellipsis">{{item.cycle}}天</view>
|
||||
</view>
|
||||
<view class="count-item">
|
||||
<view class="flex-y-center f-caption c-caption">
|
||||
<view class="dot radius"></view>产量
|
||||
</view>
|
||||
<view class="f-paragraph c-title">{{item.output}}kg</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-between ml-lg mr-lg pt-lg pb-sm b-1px-t">
|
||||
<view class="flex-y-baseline">
|
||||
<view class="f-lg-title c-warning">¥{{item.price}}</view>
|
||||
<view class="f-caption c-caption ml-sm">/{{item.unit}}</view>
|
||||
</view>
|
||||
<view class="common-btn flex-center f-paragraph c-base radius-4" :style="{background:primaryColor}">
|
||||
立即认养</view>
|
||||
</view>
|
||||
<view class="flex-y-center pl-lg pr-lg pb-lg">
|
||||
<view class="flex-warp">
|
||||
<block v-for="(item,index) in item.count.user_list" :key="index">
|
||||
<view class="avatar-group" v-if="index<6">
|
||||
<image mode="aspectFill" lazy-load class="abs avatar fill-body radius"
|
||||
:src="item.avatarUrl"></image>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="flex-y-center f-caption c-title pr-lg" :class="[{'ml-lg':item.count.user_count>0}]"
|
||||
style="height: 48rpx;">
|
||||
已有{{item.count.user_count}}人参与</view>
|
||||
</view>
|
||||
</view>
|
||||
<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
|
||||
</load-more>
|
||||
<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
|
||||
<view class="space-footer"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions,
|
||||
mapMutations
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
isLoad: false,
|
||||
options: {},
|
||||
rankInd: 0,
|
||||
rankList: [{
|
||||
id: 1,
|
||||
title: '综合排序'
|
||||
}, {
|
||||
id: 2,
|
||||
title: '销量优先'
|
||||
}, {
|
||||
id: 3,
|
||||
title: '距离优先'
|
||||
}],
|
||||
tabList: [],
|
||||
activeIndex: 0,
|
||||
cate_id: 0,
|
||||
banner: [],
|
||||
param: {
|
||||
page: 1,
|
||||
},
|
||||
list: {
|
||||
data: []
|
||||
},
|
||||
loading: true,
|
||||
lockTap: false,
|
||||
show_rank_item: false,
|
||||
refresh: false
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
userInfo: state => state.user.userInfo,
|
||||
location: state => state.user.location,
|
||||
loginType: state => state.user.loginType,
|
||||
}),
|
||||
async onLoad() {
|
||||
if (this.isLoad) return
|
||||
this.$util.showLoading()
|
||||
this.initIndex()
|
||||
},
|
||||
async onShow() {
|
||||
if (!this.isLoad || (this.location.lat && this.rankInd != 2)) return
|
||||
let [err, result] = await uni.getSetting()
|
||||
if (err || !result.authSetting[`scope.userLocation`]) return
|
||||
this.initIndex()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.showNavigationBarLoading()
|
||||
// #endif
|
||||
this.initRefresh()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.list.current_page >= this.list.last_page || this.loading) return
|
||||
this.param.page = this.param.page + 1
|
||||
this.loading = true
|
||||
this.getList()
|
||||
},
|
||||
onShareAppMessage(e) {
|
||||
let {
|
||||
id: pid
|
||||
} = this.userInfo
|
||||
let path = `/pages/claim?pid=${pid}`
|
||||
this.$util.log(path)
|
||||
return {
|
||||
title: '',
|
||||
imageUrl: '',
|
||||
path,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getConfigInfo']),
|
||||
...mapMutations(['updateUserItem']),
|
||||
async initIndex(refresh = false) {
|
||||
if (!this.configInfo.id || refresh) {
|
||||
await this.getConfigInfo()
|
||||
if (this.loginType == 'apple') {
|
||||
this.updateUserItem({
|
||||
key: 'isShowLogin',
|
||||
val: false
|
||||
})
|
||||
}
|
||||
}
|
||||
await this.getLocation()
|
||||
let [banner, cate] = await Promise.all([this.$api.claim.claimBanner({
|
||||
type: 3
|
||||
}), this.$api.claim
|
||||
.claimCateList({
|
||||
type: 2
|
||||
})
|
||||
])
|
||||
cate.unshift({
|
||||
id: 0,
|
||||
title: '全部'
|
||||
})
|
||||
this.banner = banner
|
||||
this.tabList = cate
|
||||
this.isLoad = true
|
||||
this.refresh = false
|
||||
this.param.page = 1
|
||||
this.getList()
|
||||
},
|
||||
initRefresh() {
|
||||
this.refresh = true
|
||||
this.$refs.rank_item.close()
|
||||
this.initIndex(true)
|
||||
},
|
||||
async getLocation() {
|
||||
let {
|
||||
location
|
||||
} = this
|
||||
if (!location.lat) {
|
||||
location = await this.$util.getBmapLocation()
|
||||
this.updateUserItem({
|
||||
key: 'location',
|
||||
val: location
|
||||
})
|
||||
}
|
||||
},
|
||||
handerTabChange(index, type) {
|
||||
this[type] = index
|
||||
this.$refs.rank_item.close()
|
||||
if (type == 'activeIndex') {
|
||||
this.cate_id = this.tabList[index].id
|
||||
}
|
||||
this.$util.showLoading()
|
||||
this.param.page = 1
|
||||
this.list.data = []
|
||||
this.getList()
|
||||
},
|
||||
toShowRank() {
|
||||
let {
|
||||
show_rank_item,
|
||||
} = this
|
||||
if (this.lockTap) return
|
||||
this.lockTap = true
|
||||
setTimeout(() => {
|
||||
let methodModel = show_rank_item ? 'close' : 'open'
|
||||
this.$refs.rank_item[methodModel]()
|
||||
}, 500)
|
||||
},
|
||||
popupChange(e) {
|
||||
let {
|
||||
show
|
||||
} = e
|
||||
this.show_rank_item = show
|
||||
setTimeout(() => {
|
||||
this.lockTap = false
|
||||
}, 200)
|
||||
},
|
||||
async getList() {
|
||||
let {
|
||||
list: oldList,
|
||||
param,
|
||||
tabList,
|
||||
activeIndex,
|
||||
rankList,
|
||||
rankInd,
|
||||
cate_id
|
||||
} = this
|
||||
let ind = tabList.findIndex(item => {
|
||||
return item.id == cate_id
|
||||
})
|
||||
cate_id = ind == -1 ? 0 : cate_id
|
||||
activeIndex = ind == -1 ? 0 : ind
|
||||
this.cate_id = cate_id
|
||||
this.activeIndex = activeIndex
|
||||
let {
|
||||
id: sort
|
||||
} = rankList[rankInd]
|
||||
if (sort == 3 && !this.location.lat) {
|
||||
this.$util.hideAll()
|
||||
await this.getLocation()
|
||||
return
|
||||
}
|
||||
let {
|
||||
lng = 0,
|
||||
lat = 0
|
||||
} = this.location
|
||||
param = Object.assign({}, param, {
|
||||
cate_id,
|
||||
sort,
|
||||
});
|
||||
if (sort === 3) {
|
||||
param.lat = lat
|
||||
param.lng = lng
|
||||
}
|
||||
let newList = await this.$api.claim.claimList(param)
|
||||
newList.data.map(item => {
|
||||
let {
|
||||
stock,
|
||||
sale_num
|
||||
} = item
|
||||
item.precent = (sale_num / (stock + sale_num) * 100).toFixed(2) + '%'
|
||||
})
|
||||
|
||||
if (this.param.page == 1) {
|
||||
this.list = newList
|
||||
} else {
|
||||
newList.data = oldList.data.concat(newList.data)
|
||||
this.list = newList
|
||||
}
|
||||
this.loading = false
|
||||
this.$util.hideAll()
|
||||
},
|
||||
async goDetail(index) {
|
||||
let {
|
||||
id
|
||||
} = this.list.data[index]
|
||||
let url = `/claim/pages/detail?id=${id}`
|
||||
this.$util.toCheckLogin({
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.pages-claim {
|
||||
|
||||
.claim-item {
|
||||
|
||||
.cover {
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
}
|
||||
|
||||
.line-item {
|
||||
width: 230rpx;
|
||||
height: 15rpx;
|
||||
background: rgba(112, 152, 64, 0.2);
|
||||
border-radius: 8rpx;
|
||||
|
||||
.cur {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 15rpx;
|
||||
background: linear-gradient(0deg, #709840 0%, #91C84E 100%);
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.count-list {
|
||||
.count-item {
|
||||
width: 33.33%;
|
||||
|
||||
.dot {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
background: #B3D465;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
606
uniapp/uni-app/pages/home.vue
Normal file
606
uniapp/uni-app/pages/home.vue
Normal file
@@ -0,0 +1,606 @@
|
||||
<template>
|
||||
<view class="pages-home" v-if="isLoad">
|
||||
<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" :onlyLeft="true" color="#fff"
|
||||
:backgroundColor="scrollTop < 20 ?``:primaryColor">
|
||||
<view @tap.stop="toChooseLocation" class="flex-y-center" slot="left">
|
||||
<i class="iconfont icon-dingwei mr-sm"></i>
|
||||
<view class=" max-400 ellipsis">
|
||||
{{location.address ?location.address : isLoad ? '定位失败' : '定位中...'}}
|
||||
</view>
|
||||
</view>
|
||||
</uni-nav-bar>
|
||||
|
||||
<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
|
||||
<view mode="aspectFill" lazy-load class="home-index-bg abs"></view>
|
||||
<view @tap.stop="$util.toCheckLogin({url:`/home/pages/search`})" class="pt-md pl-md pr-md">
|
||||
<search :padding="0" :radius="10" backgroundColor="rgba(240,240,240,0.2)"
|
||||
searchColor="rgba(240,240,240,0.2)" frontColor="#fff" textAlign="center" placeholder="请输入商品名称"></search>
|
||||
</view>
|
||||
<view class="mt-lg ml-md mr-md" v-if="detail.banner.rotation.length > 0">
|
||||
<banner @change="goBanner" :list="detail.banner.rotation" :margin="0" :autoplay="true" :borderRadius="25"
|
||||
:height="286" :indicatorActiveColor="primaryColor"></banner>
|
||||
</view>
|
||||
|
||||
<view @tap="$util.toCheckLogin({url:`/home/pages/welfare?type=2`})"
|
||||
class="notice-info flex-center mt-md pd-md fill-base">
|
||||
<image mode="aspectFill" lazy-load class="notice-img" src="/static/image/home/notice.png">
|
||||
</image>
|
||||
<view class="ml-sm infomation-left"></view>
|
||||
<view class="flex-1 ml-md">
|
||||
<swiper :autoplay="true" :circular='true' :vertical="true" class="roller-box" :interval="2000">
|
||||
<swiper-item v-for="(item,index) in detail.system_list" :key="index">
|
||||
<view class="roller-item flex-between f-caption c-desc">
|
||||
<view class="ellipsis">{{item.title}}</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view @tap.stop="goAbout"
|
||||
class="weather-info flex-warp rel pr-md pl-md pb-md f-icontext c-desc"
|
||||
v-if="detail.weather.observe.update_time">
|
||||
<view class="flex-y-baseline">
|
||||
<view class="flex-center mr-lg">
|
||||
<view class="number">{{detail.weather.observe.degree}}°</view>
|
||||
</view>
|
||||
<view class="weather">{{today}} {{detail.weather.observe.weather}}</view>
|
||||
</view>
|
||||
<view class="flex-warp">
|
||||
<view class="mr-lg">
|
||||
温度变化：{{`${detail.weather.forecast_24h.min_degree}°~${detail.weather.forecast_24h.max_degree}°`}}
|
||||
</view>
|
||||
<view class="mr-lg">风力：{{detail.weather.observe.wind_power}}级</view>
|
||||
<view class="mr-lg">湿度：{{detail.weather.observe.humidity}}%</view>
|
||||
<view>气压：{{detail.weather.observe.pressure}}hPa</view>
|
||||
</view>
|
||||
<view class="about-info flex-center abs" :style="{background:primaryColor}">
|
||||
<image mode="aspectFill" lazy-load class="weather-img ml-sm mr-md"
|
||||
:src="`${weather_img}${time_key}/${detail.weather.observe.weather_code}.png`">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex-warp fill-base pb-md">
|
||||
<view @tap.stop="toMenu(index)" class="menu-item flex-center flex-column pb-lg"
|
||||
v-for="(item,index) in menuList" :key="index">
|
||||
<image mode="aspectFill" lazy-load class="menu-img radius"
|
||||
:src="`/static/image/home/${item.img_name}.png`">
|
||||
</image>
|
||||
<view class="f-caption c-title mt-sm">{{item.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view @tap="$util.toCheckLogin({url:`/shop/pages/coupon`})"
|
||||
class="advertisement-info fill-base pr-md pl-md pb-md" v-if="detail.coupon_total">
|
||||
<image mode="aspectFill" lazy-load class="coupon-img"
|
||||
src="/static/image/home/xrhb.png">
|
||||
</image>
|
||||
</view>
|
||||
|
||||
<view class="advertisement-info fill-base pr-md pl-md pb-md"
|
||||
v-if="detail.banner.poster.length > 0">
|
||||
<banner @change="goBanner" :list="detail.banner.poster" :margin="0" :autoplay="true" :borderRadius="25"
|
||||
:height="285" :indicatorActiveColor="primaryColor"></banner>
|
||||
</view>
|
||||
|
||||
<view class="mt-md pd-lg fill-base">
|
||||
<view @tap="$util.toCheckLogin({url:`/shop/pages/hot-goods`})" class="flex-center">
|
||||
<view class="flex-1 f-paragraph text-bold">热门商品</view>
|
||||
<view class="flex-y-center c-caption f-caption">查看更多<i class="iconfont icon-right"></i></view>
|
||||
</view>
|
||||
<block v-for="(item,index) in detail.hot_goods" :key="index">
|
||||
<view @tap.stop="goDetail(1,'hot_goods',index)" class="goods-item flex-center mt-lg">
|
||||
<image mode="aspectFill" lazy-load class="cover radius-16" :src="item.cover"></image>
|
||||
<view class="flex-1 ml-lg">
|
||||
<view class="flex-center">
|
||||
<view class="flex-1">
|
||||
<view class="f-paragraph c-title mt-sm mb-sm max-400 ellipsis">{{item.goods_name}}
|
||||
</view>
|
||||
<view class="flex-y-baseline f-caption c-warning">¥<view class="f-title">
|
||||
{{item.show_price}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="f-caption c-caption text-delete">¥{{item.show_init_price}}</view>
|
||||
</view>
|
||||
<image lazy-load class="add-car-img" src="/static/image/shop/add-car.png">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="mt-md pt-lg pb-lg fill-base">
|
||||
<view @tap="$util.toCheckLogin({url:`/shop/pages/choose-store`})" class="pl-lg pr-lg flex-center">
|
||||
<view class="flex-1 f-paragraph text-bold">热门店铺</view>
|
||||
<view class="flex-y-center c-caption f-caption">查看更多<i class="iconfont icon-right"></i></view>
|
||||
</view>
|
||||
<scroll-view scroll-x class="hot-shop-list pt-lg pl-lg" :scroll-with-animation="true"
|
||||
v-if="detail.store_list.length > 0">
|
||||
<block v-for="(item,index) in detail.store_list" :key="index">
|
||||
<view @tap.stop="goDetail(2,'store_list',index)" class="hot-shop-item mr-lg radius-16">
|
||||
<image mode="aspectFill" lazy-load class="cover box-shadow" :src="item.cover"></image>
|
||||
<view class="pd-md">
|
||||
<view class="flex-between f-caption c-desc">
|
||||
<view class="business-tag flex-center radius-4" :style="{color:primaryColor}">营业中</view>
|
||||
<view class="pl-sm ellipsis">{{item.distance}}</view>
|
||||
</view>
|
||||
<view class="f-paragraph c-title mt-md ellipsis-2">{{item.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="mt-md pd-lg fill-base">
|
||||
<view @tap="$util.toCheckLogin({url:`/home/pages/welfare`})" class="flex-center">
|
||||
<view class="flex-1 f-paragraph text-bold">公益栏目</view>
|
||||
<view class="flex-y-center c-caption f-caption">查看更多<i class="iconfont icon-right"></i></view>
|
||||
</view>
|
||||
<block v-for="(item,index) in detail.welfare_list" :key="index">
|
||||
<view @tap.stop="goDetail(3,'welfare_list',index)" class="welfare-item flex-center mt-lg">
|
||||
<image mode="aspectFill" lazy-load class="cover radius-16" :src="item.cover"></image>
|
||||
<view class="flex-1 ml-lg">
|
||||
<view class="f-title c-title mb-md ellipsis">{{item.title}}</view>
|
||||
<view class="f-caption c-caption">{{item.create_time_text}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="space-footer"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions,
|
||||
mapMutations
|
||||
} from "vuex"
|
||||
import uniSegmentedControl from "@/components/uni-segmented-control.vue"
|
||||
export default {
|
||||
components: {
|
||||
uniSegmentedControl
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
options: {},
|
||||
weather_img: `https://mat1.gtimg.com/pingjs/ext2020/weather/pc/icon/currentweather/`,
|
||||
menuList: [{
|
||||
id: 1,
|
||||
title: '土地租赁',
|
||||
img_name: 'land',
|
||||
url: '/pages/land'
|
||||
}, {
|
||||
id: 2,
|
||||
title: '农业认养',
|
||||
img_name: 'claim',
|
||||
url: '/pages/claim'
|
||||
}, {
|
||||
id: 3,
|
||||
title: '视频监控',
|
||||
img_name: 'monitor',
|
||||
url: '/home/pages/monitor/list'
|
||||
}, {
|
||||
id: 4,
|
||||
title: '农场商城',
|
||||
img_name: 'shop',
|
||||
url: '/pages/shop'
|
||||
}, {
|
||||
id: 5,
|
||||
title: '会员充值',
|
||||
img_name: 'stored',
|
||||
url: '/mine/pages/balance/list'
|
||||
}, {
|
||||
id: 6,
|
||||
title: '众筹认养',
|
||||
img_name: 'collage',
|
||||
url: '/claim/pages/collage/list'
|
||||
}, {
|
||||
id: 7,
|
||||
title: '限时秒杀',
|
||||
img_name: 'seckill',
|
||||
url: '/shop/pages/seckill'
|
||||
}, {
|
||||
id: 8,
|
||||
title: '积分商城',
|
||||
img_name: 'integral',
|
||||
url: '/shop/pages/integral/list'
|
||||
}, {
|
||||
id: 9,
|
||||
title: '农场签到',
|
||||
img_name: 'sign',
|
||||
url: '/shop/pages/sign'
|
||||
}, {
|
||||
id: 10,
|
||||
title: '积分抽奖',
|
||||
img_name: 'luck',
|
||||
url: '/shop/pages/luck'
|
||||
}],
|
||||
isLoad: false,
|
||||
loading: false,
|
||||
detail: {},
|
||||
about_us: 0,
|
||||
weather: {},
|
||||
store_list: [],
|
||||
today: '',
|
||||
cur_time: '',
|
||||
time_key: 'day'
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
userInfo: state => state.user.userInfo,
|
||||
location: state => state.user.location,
|
||||
loginType: state => state.user.loginType,
|
||||
}),
|
||||
async onLoad() {
|
||||
console.log("====onload")
|
||||
if (this.isLoad) return
|
||||
this.initIndex()
|
||||
},
|
||||
async onShow() {
|
||||
let cur_time = this.$util.DateToUnix(this.$util.formatTime(new Date(), 'YY-M-D h:m:s'))
|
||||
let time = this.$util.DateToUnix(this.$util.formatTime(new Date(), 'YY-M-D'))
|
||||
let min = time + 8 * 3600 - 1
|
||||
let max = time + 19 * 3600 + 1
|
||||
this.time_key = cur_time > min && cur_time < max ? 'day' : 'night'
|
||||
if (!this.isLoad || this.location.lat) return
|
||||
let [err, result] = await uni.getSetting()
|
||||
if (err || !result.authSetting[`scope.userLocation`]) return
|
||||
this.initIndex()
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.showNavigationBarLoading()
|
||||
// #endif
|
||||
this.initRefresh()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
onShareAppMessage(e) {
|
||||
let {
|
||||
id: pid
|
||||
} = this.userInfo
|
||||
let path = `/pages/home?pid=${pid}`
|
||||
this.$util.log(path)
|
||||
return {
|
||||
title: '',
|
||||
imageUrl: '',
|
||||
path,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getConfigInfo']),
|
||||
...mapMutations(['updateUserItem']),
|
||||
async initIndex(refresh = false) {
|
||||
this.cur_time = this.$util.formatTime(new Date(), 'YY-M-D')
|
||||
this.today = this.$util.formatTime(new Date(), 'YY年M月D日')
|
||||
if (!this.configInfo.id || refresh) {
|
||||
await this.getConfigInfo()
|
||||
if (this.loginType == 'apple') {
|
||||
this.updateUserItem({
|
||||
key: 'isShowLogin',
|
||||
val: false
|
||||
})
|
||||
}
|
||||
}
|
||||
await this.getLocation()
|
||||
if (!refresh) {
|
||||
this.$util.showLoading()
|
||||
}
|
||||
let {
|
||||
lat = 0,
|
||||
lng = 0
|
||||
} = this.location
|
||||
let [detail, coupon] = await Promise.all([this.$api.home.index({
|
||||
lat,
|
||||
lng
|
||||
}), this.$api.shop.couponList()])
|
||||
detail.coupon_total = coupon.total
|
||||
let {
|
||||
status = 0,
|
||||
data
|
||||
} = detail.weather
|
||||
if (status == 200) {
|
||||
let {
|
||||
forecast_24h
|
||||
} = data
|
||||
let cur_day = forecast_24h.filter(item => {
|
||||
return item.time == this.cur_time
|
||||
})
|
||||
data.forecast_24h = cur_day.length > 0 ? cur_day[0] : []
|
||||
detail.weather = data
|
||||
}
|
||||
this.detail = detail
|
||||
this.isLoad = true
|
||||
this.loading = false
|
||||
this.$util.hideAll()
|
||||
},
|
||||
initRefresh() {
|
||||
this.initIndex(true)
|
||||
},
|
||||
async getLocation() {
|
||||
let {
|
||||
location
|
||||
} = this
|
||||
if (!location.lat) {
|
||||
try {
|
||||
// #ifdef H5
|
||||
// H5环境下，先检查缓存的位置信息
|
||||
let cachedLocation = uni.getStorageSync('cached_location');
|
||||
let cacheTime = uni.getStorageSync('location_cache_time');
|
||||
let now = new Date().getTime();
|
||||
|
||||
// 如果有缓存且缓存时间不超过30分钟，直接使用缓存的位置
|
||||
if (cachedLocation && cacheTime && (now - cacheTime) < 30 * 60 * 1000) {
|
||||
location = cachedLocation;
|
||||
} else {
|
||||
// 没有缓存或缓存过期，才获取新位置
|
||||
location = await this.$util.getBmapLocation();
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifndef H5
|
||||
// 非H5环境，直接获取位置
|
||||
location = await this.$util.getBmapLocation();
|
||||
// #endif
|
||||
|
||||
this.updateUserItem({
|
||||
key: 'location',
|
||||
val: location
|
||||
})
|
||||
} catch (error) {
|
||||
console.log('获取位置失败:', error);
|
||||
// 获取位置失败时，不更新location，使用默认值
|
||||
this.$util.showToast({
|
||||
title: '获取位置失败，使用默认位置'
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
// 选择地区
|
||||
async toChooseLocation(e) {
|
||||
await this.$util.checkAuth({
|
||||
type: 'userLocation'
|
||||
})
|
||||
|
||||
let [, {
|
||||
address = '',
|
||||
longitude: lng = 0,
|
||||
latitude: lat = 0
|
||||
} = {}] = await uni.chooseLocation();
|
||||
if (!lng) return
|
||||
let location = {
|
||||
lng,
|
||||
lat,
|
||||
address
|
||||
}
|
||||
this.updateUserItem({
|
||||
key: 'location',
|
||||
val: location
|
||||
})
|
||||
this.initRefresh()
|
||||
},
|
||||
toMenu(index) {
|
||||
let {
|
||||
title,
|
||||
url,
|
||||
} = this.menuList[index]
|
||||
let arr = ['土地租赁', '农业认养']
|
||||
let openType = arr.includes(title) ? 'switchTab' : title == '农场商城' ?
|
||||
'reLaunch' : 'navigateTo'
|
||||
this.$util.toCheckLogin({
|
||||
url,
|
||||
openType
|
||||
})
|
||||
},
|
||||
// 轮播图/广告图跳转
|
||||
goBanner(e) {
|
||||
// connect_type 1店铺，2文章，3图片，4店铺
|
||||
let {
|
||||
connect_type,
|
||||
text_id: id = 0,
|
||||
img: current
|
||||
} = e.item
|
||||
switch (connect_type) {
|
||||
case 1:
|
||||
case 2:
|
||||
case 4:
|
||||
let page = {
|
||||
1: `/home/pages/farm/detail?id=${id}`,
|
||||
2: `/home/pages/article?id=${id}&type=1`,
|
||||
4: `/shop/pages/store?id=${id}`
|
||||
}
|
||||
let url = page[connect_type]
|
||||
this.$util.toCheckLogin({
|
||||
url
|
||||
})
|
||||
break;
|
||||
case 3:
|
||||
this.$util.previewImage({
|
||||
current,
|
||||
urls: [current]
|
||||
})
|
||||
break;
|
||||
}
|
||||
},
|
||||
goAbout() {
|
||||
if (!this.detail.about_us) return
|
||||
this.$util.toCheckLogin({
|
||||
url: `/home/pages/about`
|
||||
})
|
||||
},
|
||||
// 商品/店铺/公益栏目详情
|
||||
async goDetail(type, key, index) {
|
||||
let {
|
||||
id
|
||||
} = this.detail[key][index]
|
||||
let url = ''
|
||||
switch (type) {
|
||||
case 1:
|
||||
url = `/shop/pages/detail?id=${id}`
|
||||
break
|
||||
case 2:
|
||||
url = `/shop/pages/store?id=${id}`
|
||||
break
|
||||
case 3:
|
||||
url = `/home/pages/article?id=${id}&type=2`
|
||||
break
|
||||
}
|
||||
this.$util.toCheckLogin({
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.pages-home {
|
||||
.icon-right {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
width: 20%;
|
||||
|
||||
.menu-img {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-info {
|
||||
height: 110rpx;
|
||||
|
||||
.notice-img {
|
||||
width: 128rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
.infomation-left {
|
||||
height: 48rpx;
|
||||
border-right: 0.03125rem solid #e1e6ec;
|
||||
}
|
||||
.roller-box {
|
||||
height: 40rpx;
|
||||
|
||||
.roller-item {
|
||||
height: 40rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.weather-info {
|
||||
height: 168rpx;
|
||||
background: #ffffff;
|
||||
|
||||
.number {
|
||||
font-size: 48rpx;
|
||||
color: #FEB23A;
|
||||
}
|
||||
|
||||
.weather {
|
||||
color: #FEB23A;
|
||||
}
|
||||
|
||||
.weather-img {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.about-info {
|
||||
right: 0rpx;
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
border-radius: 5000rpx;
|
||||
margin-right: 30rpx;
|
||||
|
||||
.about-img {
|
||||
width: 102rpx;
|
||||
height: 25rpx;
|
||||
margin: 0 8rpx;
|
||||
}
|
||||
|
||||
.about-right-img {
|
||||
width: 34rpx;
|
||||
height: 25rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.advertisement-info {
|
||||
|
||||
.coupon-img {
|
||||
width: 100%;
|
||||
height: 180rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
.cover {
|
||||
width: 180rpx;
|
||||
height: 170rpx;
|
||||
}
|
||||
|
||||
.add-car-img {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.hot-shop-list {
|
||||
white-space: nowrap;
|
||||
width: calc(100% - 30rpx);
|
||||
|
||||
.hot-shop-item {
|
||||
width: 281rpx;
|
||||
height: 353rpx;
|
||||
background: #F9FAF9;
|
||||
display: inline-block;
|
||||
|
||||
.cover {
|
||||
width: 281rpx;
|
||||
height: 175rpx;
|
||||
border-radius: 15rpx 15rpx 0 0;
|
||||
}
|
||||
|
||||
.business-tag {
|
||||
width: 86rpx;
|
||||
height: 34rpx;
|
||||
background: rgba(52, 162, 99, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-index-bg {
|
||||
background: rgb(57, 181, 74);
|
||||
height: 15.625rem;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
border-radius: 0 0 5% 5%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
.welfare-item {
|
||||
.cover {
|
||||
width: 180rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
max-width: 480rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
278
uniapp/uni-app/pages/land.vue
Normal file
278
uniapp/uni-app/pages/land.vue
Normal file
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<view class="pages-land" v-if="isLoad">
|
||||
<fixed>
|
||||
<view class="fill-base flex-between b-1px-b">
|
||||
<view style="width: 650rpx;">
|
||||
<tab @change="handerTabChange($event,'activeIndex')" :list="tabList" :activeIndex="activeIndex"
|
||||
:activeColor="primaryColor" height="100rpx"></tab>
|
||||
</view>
|
||||
<view @tap.stop="toShowRank" class="flex-center c-caption b-1px-l" style="width: 100rpx;">
|
||||
<i class="iconfont icon-down-bold" :class="[{'rotate-180':show_rank_item}]"></i>
|
||||
</view>
|
||||
</view>
|
||||
</fixed>
|
||||
|
||||
<uni-popup @change="popupChange" ref="rank_item" type="top" :custom="true">
|
||||
<view style="height: 100rpx;"></view>
|
||||
<view class="pd-lg fill-base">
|
||||
<view @tap.stop="handerTabChange(index,'rankInd')" class="f-paragraph c-title"
|
||||
:class="[{'mt-md':index!=0}]" :style="{color:index==rankInd?primaryColor:''}"
|
||||
v-for="(item,index) in rankList" :key="index">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<view @tap.stop="goDetail(index)" class="land-item fill-base mt-md ml-md mr-md box-shadow radius-16"
|
||||
v-for="(item,index) in list.data" :key="index">
|
||||
<image mode="aspectFill" lazy-load class="cover" :src="item.cover"></image>
|
||||
<view class="pd-lg">
|
||||
<view class="f-title c-title">{{item.title}}</view>
|
||||
<view class="f-caption c-caption ellipsis-2">
|
||||
<text decode="emsp" style="word-break:break-all;">{{item.desc}}</text>
|
||||
</view>
|
||||
<view class="flex-between mt-md">
|
||||
<view class="flex-y-baseline">
|
||||
<view class="f-lg-title c-warning">¥{{item.min_price}}</view>
|
||||
<view class="f-caption c-caption ml-sm">起</view>
|
||||
</view>
|
||||
<view class="common-btn flex-center f-paragraph c-base radius" :style="{background:primaryColor}">
|
||||
选择土地</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
|
||||
</load-more>
|
||||
<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
|
||||
<view class="space-footer"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions,
|
||||
mapMutations
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
isLoad: false,
|
||||
options: {},
|
||||
rankInd: 0,
|
||||
rankList: [{
|
||||
id: 1,
|
||||
title: '综合排序'
|
||||
}, {
|
||||
id: 2,
|
||||
title: '销量优先'
|
||||
}, {
|
||||
id: 3,
|
||||
title: '距离优先'
|
||||
}],
|
||||
tabList: [],
|
||||
activeIndex: 0,
|
||||
cate_id: 0,
|
||||
param: {
|
||||
page: 1,
|
||||
},
|
||||
list: {
|
||||
data: []
|
||||
},
|
||||
loading: true,
|
||||
lockTap: false,
|
||||
show_rank_item: false
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
userInfo: state => state.user.userInfo,
|
||||
location: state => state.user.location,
|
||||
loginType: state => state.user.loginType,
|
||||
}),
|
||||
async onLoad() {
|
||||
if (this.isLoad) return
|
||||
this.$util.showLoading()
|
||||
this.initIndex()
|
||||
},
|
||||
async onShow() {
|
||||
if (!this.isLoad || (this.location.lat && this.rankInd != 2)) return
|
||||
let [err, result] = await uni.getSetting()
|
||||
if (err || !result.authSetting[`scope.userLocation`]) return
|
||||
this.initIndex()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.showNavigationBarLoading()
|
||||
// #endif
|
||||
this.initRefresh()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.list.current_page >= this.list.last_page || this.loading) return
|
||||
this.param.page = this.param.page + 1
|
||||
this.loading = true
|
||||
this.getList()
|
||||
},
|
||||
onShareAppMessage(e) {
|
||||
let {
|
||||
id: pid
|
||||
} = this.userInfo
|
||||
let path = `/pages/land?pid=${pid}`
|
||||
this.$util.log(path)
|
||||
return {
|
||||
title: '',
|
||||
imageUrl: '',
|
||||
path,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getConfigInfo']),
|
||||
...mapMutations(['updateUserItem']),
|
||||
async initIndex(refresh = false) {
|
||||
if(!this.configInfo.id || refresh){
|
||||
await this.getConfigInfo()
|
||||
if (this.loginType == 'apple') {
|
||||
this.updateUserItem({
|
||||
key: 'isShowLogin',
|
||||
val: false
|
||||
})
|
||||
}
|
||||
}
|
||||
await this.getLocation()
|
||||
let cate = await this.$api.claim.claimCateList({
|
||||
type: 1
|
||||
})
|
||||
cate.unshift({
|
||||
id: 0,
|
||||
title: '全部'
|
||||
})
|
||||
this.isLoad = true
|
||||
this.tabList = cate
|
||||
this.param.page = 1
|
||||
this.getList()
|
||||
},
|
||||
initRefresh() {
|
||||
this.$refs.rank_item.close()
|
||||
this.initIndex(true)
|
||||
},
|
||||
async getLocation() {
|
||||
let {
|
||||
location
|
||||
} = this
|
||||
if (!location.lat) {
|
||||
location = await this.$util.getBmapLocation()
|
||||
this.updateUserItem({
|
||||
key: 'location',
|
||||
val: location
|
||||
})
|
||||
}
|
||||
},
|
||||
handerTabChange(index, type) {
|
||||
this[type] = index
|
||||
this.$refs.rank_item.close()
|
||||
if (type == 'activeIndex') {
|
||||
this.cate_id = this.tabList[index].id
|
||||
}
|
||||
this.$util.showLoading()
|
||||
this.param.page = 1
|
||||
this.list.data = []
|
||||
this.getList()
|
||||
},
|
||||
toShowRank() {
|
||||
let {
|
||||
show_rank_item,
|
||||
} = this
|
||||
if (this.lockTap) return
|
||||
this.lockTap = true
|
||||
setTimeout(() => {
|
||||
let methodModel = show_rank_item ? 'close' : 'open'
|
||||
this.$refs.rank_item[methodModel]()
|
||||
}, 500)
|
||||
},
|
||||
popupChange(e) {
|
||||
let {
|
||||
show
|
||||
} = e
|
||||
this.show_rank_item = show
|
||||
setTimeout(() => {
|
||||
this.lockTap = false
|
||||
}, 200)
|
||||
},
|
||||
async getList() {
|
||||
let {
|
||||
list: oldList,
|
||||
param,
|
||||
tabList,
|
||||
activeIndex,
|
||||
rankList,
|
||||
rankInd,
|
||||
cate_id
|
||||
} = this
|
||||
let ind = tabList.findIndex(item => {
|
||||
return item.id == cate_id
|
||||
})
|
||||
cate_id = ind == -1 ? 0 : cate_id
|
||||
activeIndex = ind == -1 ? 0 : ind
|
||||
this.cate_id = cate_id
|
||||
this.activeIndex = activeIndex
|
||||
let {
|
||||
id: sort
|
||||
} = rankList[rankInd]
|
||||
if (sort == 3 && !this.location.lat) {
|
||||
this.$util.hideAll()
|
||||
await this.getLocation()
|
||||
return
|
||||
}
|
||||
let {
|
||||
lng = 0,
|
||||
lat = 0
|
||||
} = this.location
|
||||
param = Object.assign({}, param, {
|
||||
cate_id,
|
||||
sort,
|
||||
});
|
||||
if (sort === 3) {
|
||||
param.lat = lat
|
||||
param.lng = lng
|
||||
}
|
||||
let newList = await this.$api.land.landList(param)
|
||||
|
||||
if (this.param.page == 1) {
|
||||
this.list = newList
|
||||
} else {
|
||||
newList.data = oldList.data.concat(newList.data)
|
||||
this.list = newList
|
||||
}
|
||||
this.loading = false
|
||||
this.$util.hideAll()
|
||||
},
|
||||
async goDetail(index) {
|
||||
let {
|
||||
id
|
||||
} = this.list.data[index]
|
||||
let url = `/land/pages/detail?id=${id}`
|
||||
this.$util.toCheckLogin({
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.pages-land {
|
||||
.land-item {
|
||||
.cover {
|
||||
width: 710rpx;
|
||||
height: 345rpx;
|
||||
border-radius: 15rpx 15rpx 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
297
uniapp/uni-app/pages/login banner.vue
Normal file
297
uniapp/uni-app/pages/login banner.vue
Normal file
@@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<view class="pages-user-login " v-if="isLoad">
|
||||
<view class="page-height flex-center flex-column" v-if="launchFlag">
|
||||
<image mode="aspectFill" lazy-load class="logo-img mb-md" :src="base_info.app_logo"></image>
|
||||
<view class="f-caption c-caption">{{base_info.app_text}}</view>
|
||||
<view @tap="$refs.show_rule_item.open()" class="wechat-login flex-center f-title c-base"><i
|
||||
class="iconfont icon-weixin mr-sm"></i>微信登录
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="swiper">
|
||||
<swiper class="swiper-list" interval="3000" :show-indicators="false" :autoplay="autoPlay"
|
||||
@change="sliderChange" :infinite="false" :forbid-slide-animation="false">
|
||||
<swiper-item class="swiper-item" v-for="(item, index) in base_info.app_banner" :key="index">
|
||||
<view @click="launchAppIndex" class="swiper-item-img">
|
||||
<image mode="aspectFill" lazy-load class="banner-img" :src="item" />
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- @click="launchApp" -->
|
||||
<view class="swiper-to-home flex-center f-caption c-base radius abs" v-if="time>0">
|
||||
跳过 {{time}}s
|
||||
</view>
|
||||
<view class="dots" v-if="base_info.app_banner.length>1">
|
||||
<view class="dot"
|
||||
:style="{background:aindex==currIndex?primaryColor:'',width:aindex==currIndex?'30rpx':''}"
|
||||
v-for="(aitem,aindex) in base_info.app_banner" :key="aindex"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-popup ref="show_rule_item" type="center" :maskClick="false">
|
||||
<view class="common-popup-content fill-base pd-lg radius-34">
|
||||
<view class="title">温馨提示</view>
|
||||
<view class="f-desc c-title mt-lg">
|
||||
登录即表示您已详细阅读并同意<span @tap.stop="goDetail(1)" :style="{color:primaryColor}">
|
||||
《用户隐私协议》
|
||||
</span>与<span @tap.stop="goDetail(2)" :style="{color:primaryColor}">
|
||||
《个人信息保护指引》
|
||||
</span>
|
||||
</view>
|
||||
<view class="button">
|
||||
<view @tap.stop="$refs.show_rule_item.close()" class="item-child">取消</view>
|
||||
<view @tap.stop="wxLogin" class="item-child c-base"
|
||||
:style="{background: primaryColor,color:'#fff'}">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions,
|
||||
mapMutations
|
||||
} from 'vuex';
|
||||
import siteInfo from '@/siteinfo.js';
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
isLoad: false,
|
||||
base_info: {},
|
||||
launchFlag: false,
|
||||
autoPlay: false,
|
||||
currIndex: 0,
|
||||
time: 5,
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
async onLoad() {
|
||||
this.base_info = await this.$api.base.getConfig()
|
||||
this.isLoad = true
|
||||
let time = 5
|
||||
this.timer = setInterval(() => {
|
||||
if (time == 1) {
|
||||
this.launchApp()
|
||||
}
|
||||
if (time === 0) {
|
||||
clearTimeout(this.timer)
|
||||
return
|
||||
}
|
||||
time--
|
||||
this.time = time
|
||||
}, 1000)
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
autograph: state => state.user.autograph,
|
||||
appLogin: state => state.user.appLogin,
|
||||
push_id: state => state.user.push_id,
|
||||
userInfo: state => state.user.userInfo,
|
||||
}),
|
||||
methods: {
|
||||
...mapActions(['getConfigInfo', 'getUserInfo']),
|
||||
...mapMutations(['updateUserItem']),
|
||||
sliderChange(e) {
|
||||
this.currIndex = e.detail.current;
|
||||
},
|
||||
launchAppIndex() {
|
||||
if (this.base_info.app_banner.length == this.currIndex * 1 + 1) {
|
||||
// this.launchApp();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
launchApp() {
|
||||
this.timer && clearTimeout(this.timer)
|
||||
let {
|
||||
autograph = '',
|
||||
appLogin = ''
|
||||
} = this
|
||||
if (autograph && appLogin) {
|
||||
this.toLogin(appLogin)
|
||||
return
|
||||
}
|
||||
this.launchFlag = true
|
||||
},
|
||||
//微信登录
|
||||
async wxLogin() {
|
||||
this.$refs.show_rule_item.close()
|
||||
try {
|
||||
let [providerErr, providerData] = await uni.getProvider({
|
||||
service: 'oauth',
|
||||
});
|
||||
let [loginErr, loginData] = await uni.login({
|
||||
provider: 'weixin'
|
||||
});
|
||||
let [infoErr, infoData] = await uni.getUserInfo({
|
||||
provider: 'weixin'
|
||||
})
|
||||
let {
|
||||
userInfo = {}
|
||||
} = infoData
|
||||
let {
|
||||
openId = ''
|
||||
} = userInfo
|
||||
if (!openId) return
|
||||
this.$util.showLoading({
|
||||
title: "登录中..."
|
||||
})
|
||||
userInfo.push_id = this.push_id
|
||||
try {
|
||||
console.log(userInfo, "=======userInfo")
|
||||
this.toLogin(userInfo)
|
||||
} catch (e) {
|
||||
this.$util.hideAll()
|
||||
}
|
||||
} catch (e) {
|
||||
this.$util.showToast({
|
||||
title: '请先安装微信或升级版本'
|
||||
});
|
||||
}
|
||||
},
|
||||
async toLogin(userInfo) {
|
||||
let user_info = await this.$api.base.logappLoginin({
|
||||
data: userInfo
|
||||
})
|
||||
this.updateUserItem({
|
||||
key: 'appLogin',
|
||||
val: userInfo
|
||||
})
|
||||
let {
|
||||
autograph,
|
||||
data
|
||||
} = user_info
|
||||
this.$util.hideAll()
|
||||
this.updateUserItem({
|
||||
key: 'userInfo',
|
||||
val: data
|
||||
})
|
||||
this.updateUserItem({
|
||||
key: 'autograph',
|
||||
val: autograph
|
||||
})
|
||||
let {
|
||||
phone = ''
|
||||
} = data
|
||||
this.$util.goUrl({
|
||||
url: phone ? `/pages/home` : `/mine/pages/phone`,
|
||||
openType: `reLaunch`
|
||||
})
|
||||
},
|
||||
goDetail(type) {
|
||||
let {
|
||||
siteroot
|
||||
} = siteInfo
|
||||
let href = siteroot.split('index.php')[0]
|
||||
let page = type == 1 ? 'protocol' : 'information'
|
||||
let url = `${href}${page}.html`
|
||||
this.$util.goUrl({
|
||||
url,
|
||||
openType: 'web'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.pages-user-login {
|
||||
|
||||
.page-height {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.wechat-login {
|
||||
width: 522rpx;
|
||||
height: 98rpx;
|
||||
background: linear-gradient(90deg, #177541 0%, #00BF56 99%);
|
||||
box-shadow: 0 18rpx 9rpx 0 rgba(0, 188, 82, 0.07);
|
||||
border-radius: 49rpx;
|
||||
margin: 200rpx 0;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
background-size: 100% auto;
|
||||
|
||||
.swiper-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.swiper-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
|
||||
.swiper-item-img {
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
|
||||
.banner-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.swiper-to-home {
|
||||
width: 122rpx;
|
||||
height: 47rpx;
|
||||
z-index: 999;
|
||||
right: 40rpx;
|
||||
top: 80rpx;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.dots {
|
||||
position: absolute;
|
||||
z-index: 20rpx;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
transform: translateY(-68rpx);
|
||||
padding: 0 20rpx;
|
||||
text-align: center;
|
||||
|
||||
.dot {
|
||||
display: inline-block;
|
||||
height: 12rpx;
|
||||
width: 12rpx;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 12rpx;
|
||||
margin: 0 8rpx;
|
||||
}
|
||||
|
||||
.cur {
|
||||
width: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
316
uniapp/uni-app/pages/login.vue
Normal file
316
uniapp/uni-app/pages/login.vue
Normal file
@@ -0,0 +1,316 @@
|
||||
<template>
|
||||
<view class="pages-user-login " v-if="isLoad">
|
||||
<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" :color="`#000`" backgroundColor="#fff" v-if="launchFlag">
|
||||
<view class="flex-center" slot="left">
|
||||
<view @tap="$util.goUrl({url:1,openType:`navigateBack`})"
|
||||
:class="[{'back-user-ios': configInfo.isIos},{'back-user-android': !configInfo.isIos}]">
|
||||
<view class="iconfont icon-home"></view>
|
||||
<view class="back-user_text">返回上页</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-nav-bar>
|
||||
<view class="page-height flex-center flex-column" v-if="launchFlag">
|
||||
<image mode="aspectFill" lazy-load class="logo-img mb-md" :src="base_info.app_logo"></image>
|
||||
<view class="f-caption c-caption">{{base_info.app_text}}</view>
|
||||
<view style="height: 200rpx;"></view>
|
||||
<view @tap="toChooseLogin('weixin')" class="login-btn wechat flex-center f-title c-base radius"><i
|
||||
class="iconfont icon-weixin mr-md"></i>微信登录
|
||||
</view>
|
||||
<view @tap="toChooseLogin('apple')" class="login-btn apple flex-center f-title c-black radius"
|
||||
v-if="is_ios_login && base_info.ios_login"><i class="iconfont icon-apple mr-sm"></i>Sign in with Apple
|
||||
</view>
|
||||
</view>
|
||||
<view class="banner-info" :style="{height:`${windowHeight}px`}" v-else>
|
||||
<image mode="aspectFill" lazy-load class="banner-img fix" :src="base_info.app_banner[0]" />
|
||||
<view @tap="launchApp" class="swiper-to-home flex-center f-caption c-base radius fix" v-if="time>0">
|
||||
跳过 {{time}}s
|
||||
</view>
|
||||
</view>
|
||||
<uni-popup ref="show_rule_item" type="center" :maskClick="false">
|
||||
<view class="common-popup-content fill-base pd-lg radius-34">
|
||||
<view class="title">温馨提示</view>
|
||||
<view class="f-desc c-title mt-lg">
|
||||
登录即表示您已详细阅读并同意<span @tap.stop="goDetail(1)" :style="{color:primaryColor}">
|
||||
《用户隐私协议》
|
||||
</span>与<span @tap.stop="goDetail(2)" :style="{color:primaryColor}">
|
||||
《个人信息保护指引》
|
||||
</span>
|
||||
</view>
|
||||
<view class="button">
|
||||
<view @tap.stop="$refs.show_rule_item.close()" class="item-child">取消</view>
|
||||
<view @tap.stop="wxLogin" class="item-child c-base"
|
||||
:style="{background: primaryColor,color:'#fff'}">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions,
|
||||
mapMutations
|
||||
} from 'vuex';
|
||||
import siteInfo from '@/siteinfo.js';
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
isLoad: false,
|
||||
base_info: {},
|
||||
is_ios_login: false,
|
||||
launchFlag: false,
|
||||
windowHeight: uni.getSystemInfoSync().windowHeight,
|
||||
time: 5,
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
async onLoad(options) {
|
||||
let {
|
||||
type = 0
|
||||
} = options
|
||||
type = type * 1
|
||||
console.log(options, "======login options")
|
||||
this.launchFlag = type == 1
|
||||
let [syserr, sysinfo] = await uni.getSystemInfo()
|
||||
let {
|
||||
browserVersion = '',
|
||||
platform
|
||||
} = sysinfo
|
||||
console.log(sysinfo, type)
|
||||
this.is_ios_login = platform === 'ios' && browserVersion.split('.')[0] * 1 > 12
|
||||
this.base_info = await this.$api.base.getConfig()
|
||||
this.isLoad = true
|
||||
if (type == 1) return
|
||||
let time = 5
|
||||
this.timer = setInterval(() => {
|
||||
if (time == 1) {
|
||||
this.launchApp()
|
||||
}
|
||||
if (time === 0) {
|
||||
clearTimeout(this.timer)
|
||||
return
|
||||
}
|
||||
time--
|
||||
this.time = time
|
||||
console.log(time, "==========onload time")
|
||||
}, 1000)
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
autograph: state => state.user.autograph,
|
||||
appLogin: state => state.user.appLogin,
|
||||
loginType: state => state.user.loginType,
|
||||
loginPage: state => state.user.loginPage,
|
||||
push_id: state => state.user.push_id,
|
||||
userInfo: state => state.user.userInfo,
|
||||
}),
|
||||
methods: {
|
||||
...mapActions(['getConfigInfo', 'getUserInfo']),
|
||||
...mapMutations(['updateConfigItem', 'updateUserItem']),
|
||||
launchApp() {
|
||||
this.timer && clearTimeout(this.timer)
|
||||
console.log(this.time, this.timer, "==========launchApp")
|
||||
this.$util.goUrl({
|
||||
url: `/pages/home`,
|
||||
openType: `reLaunch`
|
||||
})
|
||||
|
||||
// let {
|
||||
// autograph = '',
|
||||
// appLogin = ''
|
||||
// } = this
|
||||
// if (autograph && appLogin) {
|
||||
// this.toLogin(appLogin, 2)
|
||||
// return
|
||||
// }
|
||||
// this.launchFlag = true
|
||||
},
|
||||
toChooseLogin(type) {
|
||||
this.updateUserItem({
|
||||
key: 'loginType',
|
||||
val: type
|
||||
})
|
||||
this.$refs.show_rule_item.open()
|
||||
},
|
||||
//微信登录
|
||||
async wxLogin() {
|
||||
this.$refs.show_rule_item.close()
|
||||
let {
|
||||
loginType: provider
|
||||
} = this
|
||||
// if (provider == 'apple') {
|
||||
// this.toLogin({
|
||||
// "openId": "000676.61e8347753f6453f93d32423c23262d0.0350",
|
||||
// "fullName": {
|
||||
// "familyName": "肖",
|
||||
// "giveName": "丽",
|
||||
// "givenName": "丽"
|
||||
// },
|
||||
// "email": "1148960431@qq.com",
|
||||
// "authorizationCode": "cbfab854d7cae49a689b69bf4c628a890.0.swxw.O_BwdO3dG60HUKbn9IG80w",
|
||||
// "identityToken": "eyJraWQiOiJXNldjT0tCIiwiYWxnIjoiUlMyNTYifQ.eyJpc3MiOiJodHRwczovL2FwcGxlaWQuYXBwbGUuY29tIiwiYXVkIjoiY29tLnN1b2hhZmFybS5zYyIsImV4cCI6MTY2MzczMjIzMiwiaWF0IjoxNjYzNjQ1ODMyLCJzdWIiOiIwMDA2NzYuNjFlODM0Nzc1M2Y2NDUzZjkzZDMyNDIzYzIzMjYyZDAuMDM1MCIsImNfaGFzaCI6Ik80MDdrMGdmRUZXeGZSdlhnXzRUa1EiLCJlbWFpbCI6IjExNDg5NjA0MzFAcXEuY29tIiwiZW1haWxfdmVyaWZpZWQiOiJ0cnVlIiwiYXV0aF90aW1lIjoxNjYzNjQ1ODMyLCJub25jZV9zdXBwb3J0ZWQiOnRydWUsInJlYWxfdXNlcl9zdGF0dXMiOjF9.Q9Vjsvnk_cQH1Dt_N7wvunP_nq2KwKt_bqj0onKQMCwaM8SinkGavUG0bs-HdaEqQ368n8iZR_VwiLM2mPyOBhgNOT87WB0tTWxi66r3hGIOUhOG4aapPr1XZ81O4NySjRCwAhbnUsxY7xPBW1y6ghgwIgEGlSICRj4XE7gJOwoZFNI_FVOqCeGao4xHbub9-gJuQYuuwlTY7oPnyU1BBZqk3HBHG6fchrF0bnev-PjjjClKqz1FoNnbiZr6-H_CrvgKo2ZIlzxGIpCuABT4UkMuwjMEac-mNd-akFFovSoeWyXB2oLlZd33GsOhZVTiXWrb5CAJ6SUWSBWdYLkpbQ",
|
||||
// "realUserStatus": 1,
|
||||
// "push_id": ""
|
||||
// }, 1)
|
||||
// return
|
||||
// }
|
||||
try {
|
||||
let [providerErr, providerData] = await uni.getProvider({
|
||||
service: 'oauth',
|
||||
});
|
||||
let [loginErr, loginData] = await uni.login({
|
||||
provider
|
||||
});
|
||||
let [infoErr, infoData] = await uni.getUserInfo({
|
||||
provider
|
||||
})
|
||||
let {
|
||||
userInfo = {}
|
||||
} = infoData
|
||||
let {
|
||||
openId = ''
|
||||
} = userInfo
|
||||
if (!openId) return
|
||||
this.$util.showLoading({
|
||||
title: "登录中..."
|
||||
})
|
||||
userInfo.push_id = this.push_id
|
||||
try {
|
||||
console.log(userInfo, "=======userInfo")
|
||||
this.toLogin(userInfo, 1)
|
||||
} catch (e) {
|
||||
this.$util.hideAll()
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('请先安装微信或升级版本')
|
||||
this.$util.showToast({
|
||||
title: `没有获取到用户信息，请确认已登录`
|
||||
});
|
||||
}
|
||||
},
|
||||
async toLogin(userInfo, init) {
|
||||
let {
|
||||
loginType
|
||||
} = this
|
||||
|
||||
let methodModel = loginType == 'weixin' ? 'logappLoginin' : 'iosLogin'
|
||||
let user_info = await this.$api.base[methodModel]({
|
||||
data: userInfo
|
||||
})
|
||||
console.log(loginType, user_info, "========user_info")
|
||||
if (init == 1) {
|
||||
this.updateUserItem({
|
||||
key: 'appLogin',
|
||||
val: userInfo
|
||||
})
|
||||
}
|
||||
let {
|
||||
autograph,
|
||||
data
|
||||
} = user_info
|
||||
this.$util.hideAll()
|
||||
this.updateUserItem({
|
||||
key: 'userInfo',
|
||||
val: data
|
||||
})
|
||||
this.updateUserItem({
|
||||
key: 'autograph',
|
||||
val: autograph
|
||||
})
|
||||
this.updateUserItem({
|
||||
key: 'isShowLogin',
|
||||
val: false
|
||||
})
|
||||
let {
|
||||
phone = ''
|
||||
} = data
|
||||
let url = loginType == 'weixin' && !phone ? `/mine/pages/phone` : this.loginPage || `/pages/home`
|
||||
let openType = loginType == 'weixin' && !phone ? `reLaunch` : `switchTab`
|
||||
console.log(url, openType, "====url")
|
||||
this.$util.goUrl({
|
||||
url,
|
||||
openType
|
||||
})
|
||||
},
|
||||
goDetail(type) {
|
||||
let {
|
||||
siteroot
|
||||
} = siteInfo
|
||||
let href = siteroot.split('index.php')[0]
|
||||
let page = type == 1 ? 'protocol' : 'information'
|
||||
let url = `${href}${page}.html`
|
||||
this.$util.goUrl({
|
||||
url,
|
||||
openType: 'web'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pages-user-login {
|
||||
|
||||
.page-height {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.login-btn {
|
||||
width: 220pt;
|
||||
height: 44pt;
|
||||
font-size: 15pt;
|
||||
border: 1rpx solid #000;
|
||||
transform: rotateZ(360deg);
|
||||
|
||||
.iconfont {
|
||||
font-size: 19pt;
|
||||
}
|
||||
}
|
||||
|
||||
.wechat {
|
||||
border: none;
|
||||
font-size: 13pt;
|
||||
background: linear-gradient(90deg, #177541 0%, #00BF56 99%);
|
||||
box-shadow: 0 18rpx 9rpx 0 rgba(0, 188, 82, 0.07);
|
||||
}
|
||||
|
||||
.apple {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.banner-info {
|
||||
width: 100%;
|
||||
|
||||
.banner-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper-to-home {
|
||||
width: 122rpx;
|
||||
height: 47rpx;
|
||||
z-index: 999;
|
||||
right: 40rpx;
|
||||
top: 80rpx;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
614
uniapp/uni-app/pages/mine.vue
Normal file
614
uniapp/uni-app/pages/mine.vue
Normal file
@@ -0,0 +1,614 @@
|
||||
<template>
|
||||
<view class="pages-mine" v-if="mineInfo.id">
|
||||
<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="我的" :color="color"
|
||||
:backgroundColor="color == '#ffffff' ?``:`#ffffff`">
|
||||
</uni-nav-bar>
|
||||
<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
|
||||
<view mode="aspectFill" lazy-load class="mine-index-bg abs"></view>
|
||||
<block v-if="user_type == 1">
|
||||
<auth :needAuth="true" :must="true" class="pl-lg pr-lg pb-lg" v-if="userInfo && !userInfo.nickName"
|
||||
@go="$util.goUrl({url:`/pages/login?type=1`})">
|
||||
<view class="pl-lg flex-center">
|
||||
<image mode="aspectFill" lazy-load class="avatar radius"
|
||||
src="/static/image/mine/default-user.png">
|
||||
</image>
|
||||
<view class="flex-1 f-sm-title c-base text-bold ml-md">立即登录</view>
|
||||
</view>
|
||||
</auth>
|
||||
<view class="rel pt-md pl-lg pr-lg pb-lg flex-center" v-else>
|
||||
<image mode="aspectFill" lazy-load class="mt-md avatar radius" :src="userInfo.avatarUrl"></image>
|
||||
<view class="flex-1 ml-md">
|
||||
<view class="flex-center mb-lg">
|
||||
<view class="flex-1 flex-center f-lg-title c-base text-bold">
|
||||
<view class="mr-sm max-400 ellipsis">
|
||||
{{ userInfo.nickName || `用户${userInfo.id}` }}
|
||||
</view>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="flex-1"></view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<i class="flex-1"></i>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view @tap.stop="$util.toCheckLogin({url:`/mine/pages/notice`})" class="notice-item rel">
|
||||
<view class="abs fill-warning radius" v-if="mineInfo.no_read_info"></view>
|
||||
<i class="iconfont icon-tongzhi c-base"></i>
|
||||
</view>
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<view @tap.stop="$util.toCheckLogin({url:`/mine/pages/setting`})" class="notice-item ml-md">
|
||||
<i class="iconfont icon-xitong text-bold c-base"></i>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<!--<view class="f-paragraph c-base" v-if="userInfo.phone"> {{userInfo.split_phone}} </view>-->
|
||||
|
||||
|
||||
<view class="abs member-item pl-sm pr-sm fill-base flex-center">
|
||||
<image lazy-load class="vip-icon" src="/static/image/mine/vip-icon.png">
|
||||
</image>
|
||||
<view class="f-desc ellipsis" :style="{color:primaryColor}">
|
||||
{{mineInfo.id > 0 && mineInfo.member_title ? mineInfo.member_title :'普通会员'}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<view class="pt-md pl-lg pr-lg pb-lg flex-center" v-if="user_type == 2">
|
||||
<image mode="aspectFill" lazy-load class="avatar radius" :src="farmer_info.cover">
|
||||
</image>
|
||||
<view class="flex-1 ml-md">
|
||||
<view class="f-lg-title c-base text-bold ellipsis" style="max-width: 520rpx;">{{farmer_info.title}}
|
||||
</view>
|
||||
<view class="flex-warp f-paragraph c-base">
|
||||
<i class="iconfont icon-dingwei mr-sm" style="font-size: 28rpx;margin-top: 6rpx;"></i>
|
||||
<view class="ellipsis-2" style="max-width: 490rpx;">{{farmer_info.address}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 普通用户-->
|
||||
<auth :needAuth="userInfo && !userInfo.nickName" :must="true"
|
||||
@go="$util.toCheckLogin({url:`/mine/pages/balance/index`})" v-if="mineInfo.is_user">
|
||||
<view class="stored-item flex-center pd-lg mt-sm ml-md mr-md fill-base box-shadow radius-20">
|
||||
<view class="flex-1 mr-lg c-title">
|
||||
<view class="f-lg-title text-bold">{{mineInfo.balance || 0}}</view>
|
||||
<view class="f-caption c-caption">我的余额</view>
|
||||
</view>
|
||||
<view class="common-btn flex-center f-paragraph c-base radius" :style="{background:primaryColor}">
|
||||
立即充值
|
||||
</view>
|
||||
</view>
|
||||
</auth>
|
||||
|
||||
<!-- 地主/农场主 -->
|
||||
<!-- balance 总金额，包含冻结资金 -->
|
||||
<view class="stored-list flex-center pd-lg mt-sm ml-md mr-md fill-base box-shadow radius-20"
|
||||
v-if="!mineInfo.is_user && user_type == 1">
|
||||
<auth :needAuth="userInfo && !userInfo.nickName" :must="true"
|
||||
@go="$util.toCheckLogin({url:`/mine/pages/balance/index`})" class="stored-item">
|
||||
<view class="flex-center flex-column c-title">
|
||||
<view class="f-lg-title text-bold">{{mineInfo.balance}}</view>
|
||||
<view class="f-caption c-caption">我的余额</view>
|
||||
</view>
|
||||
</auth>
|
||||
<auth :needAuth="userInfo && !userInfo.nickName" :must="true"
|
||||
@go="$util.toCheckLogin({url:`/mine/pages/balance/index`})" class="stored-item">
|
||||
<view class="flex-center flex-column c-title">
|
||||
<view class="f-lg-title text-bold">{{mineInfo.frozen_cash}}</view>
|
||||
<view class="f-caption c-caption">冻结资金</view>
|
||||
</view>
|
||||
</auth>
|
||||
<auth :needAuth="userInfo && !userInfo.nickName" :must="true"
|
||||
@go="$util.toCheckLogin({url:`/shop/pages/integral/record`})" class="stored-item">
|
||||
<view class="flex-center flex-column c-title">
|
||||
<view class="f-lg-title text-bold">{{mineInfo.integral}}</view>
|
||||
<view class="f-caption c-caption">我的积分</view>
|
||||
</view>
|
||||
</auth>
|
||||
</view>
|
||||
|
||||
<block v-if="user_type == 1">
|
||||
|
||||
<view class="mine-menu-list mt-md ml-md mr-md fill-base box-shadow radius-20">
|
||||
<auth :needAuth="userInfo && !userInfo.nickName" :must="true"
|
||||
@go="$util.toCheckLogin({url:`/shop/pages/order/list`})" class="common-nav-title mb-lg">
|
||||
<view class="common-nav-title flex-center c-title pl-lg pr-md mb-lg b-1px-b">
|
||||
<view class="f-title text-bold flex-1">商城订单</view>
|
||||
<view class="f-caption flex-y-center">全部<i class="iconfont icon-right"></i></view>
|
||||
</view>
|
||||
</auth>
|
||||
<view class="flex-warp pb-lg">
|
||||
<auth :needAuth="userInfo && !userInfo.nickName" :must="true" @go="toJump('shopOrderList', index)"
|
||||
v-for="(item, index) in shopOrderList" :key="index" class="item-child" style="width:20%">
|
||||
<view class="flex-center flex-column f-caption c-title">
|
||||
<image mode="aspectFill" lazy-load class="item-img" :src="item.img"></image>
|
||||
<view>{{ item.text }}</view>
|
||||
</view>
|
||||
</auth>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mine-menu-list mt-md ml-md mr-md fill-base box-shadow radius-20">
|
||||
<view class="common-nav-title flex-center c-title pl-lg mb-lg b-1px-b">
|
||||
<view class="f-title text-bold flex-1">农场管理</view>
|
||||
</view>
|
||||
<view class="flex-warp pb-lg">
|
||||
<auth :needAuth="userInfo && !userInfo.nickName" :must="true" @go="toJump('toolList', index)"
|
||||
v-for="(item, index) in toolList" :key="index" class="item-child" style="width:20%">
|
||||
<view class="flex-center flex-column f-caption c-title">
|
||||
<image mode="aspectFill" lazy-load class="item-img" :src="item.img"></image>
|
||||
<view>{{ item.text }}</view>
|
||||
</view>
|
||||
</auth>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mine-menu-list mt-md ml-md mr-md fill-base box-shadow radius-20">
|
||||
<view class="common-nav-title flex-center c-title pl-lg mb-lg b-1px-b">
|
||||
<view class="f-title text-bold flex-1">其他功能</view>
|
||||
</view>
|
||||
<view class="flex-warp pb-lg">
|
||||
<auth :needAuth="userInfo && !userInfo.nickName" :must="true" @go="toJump('otherList', index)"
|
||||
v-for="(item, index) in otherList" :key="index" class="item-child" style="width:20%">
|
||||
<view class="flex-center flex-column f-caption c-title">
|
||||
<image mode="aspectFill" lazy-load class="item-img" :src="item.img"></image>
|
||||
<view>{{ item.text }}</view>
|
||||
</view>
|
||||
</auth>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mine-menu-list mt-md ml-md mr-md fill-base box-shadow radius-20"
|
||||
v-if="mineInfo.is_landlord && businessList.length > 0">
|
||||
<view class="common-nav-title flex-center c-title pl-lg mb-lg b-1px-b">
|
||||
<view class="f-title text-bold flex-1">商家专属</view>
|
||||
</view>
|
||||
<view class="flex-warp pb-lg">
|
||||
<auth :needAuth="userInfo && !userInfo.nickName" :must="true" @go="toJump('businessList', index)"
|
||||
v-for="(item, index) in businessList" :key="index" class="item-child" style="width:20%">
|
||||
<view class="flex-center flex-column f-caption c-title">
|
||||
<image mode="aspectFill" lazy-load class="item-img" :src="item.img"></image>
|
||||
<view>{{ item.text }}</view>
|
||||
</view>
|
||||
</auth>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<block v-if="user_type == 2">
|
||||
<view class="mine-menu-list rel ml-md mr-md fill-base box-shadow radius-20">
|
||||
<view class="cancel-auth iconfont icon-biaoqian c-warning flex-center abs"
|
||||
v-if="mineInfo.farmer_status == 3">
|
||||
<view class="text-bold f-icontext abs">取消授权</view>
|
||||
</view>
|
||||
<view class="common-nav-title flex-center c-title pl-lg mb-lg b-1px-b">
|
||||
<view class="f-title text-bold flex-1">订单管理</view>
|
||||
</view>
|
||||
<view class="flex-warp pb-lg">
|
||||
<auth :needAuth="userInfo && !userInfo.nickName" :must="true" @go="toJump('orderList', index)"
|
||||
v-for="(item, index) in orderList" :key="index" class="item-child" style="width:20%">
|
||||
<view class="flex-center flex-column f-caption c-title">
|
||||
<image mode="aspectFill" lazy-load class="item-img" :src="item.img"></image>
|
||||
<view>{{ item.text }}</view>
|
||||
</view>
|
||||
</auth>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mine-menu-list mt-md ml-md mr-md fill-base box-shadow radius-20">
|
||||
<view class="common-nav-title flex-center c-title pl-lg mb-lg b-1px-b">
|
||||
<view class="f-title text-bold flex-1">其他功能</view>
|
||||
</view>
|
||||
<view class="flex-warp pb-lg">
|
||||
<auth :needAuth="userInfo && !userInfo.nickName" :must="true" @go="toJump('manageList', index)"
|
||||
v-for="(item, index) in manageList" :key="index" class="item-child" style="width:20%">
|
||||
<view class="flex-center flex-column f-caption c-title">
|
||||
<image mode="aspectFill" lazy-load class="item-img" :src="item.img"></image>
|
||||
<view>{{ item.text }}</view>
|
||||
</view>
|
||||
</auth>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view @tap.stop="toChange"
|
||||
class="mine-menu-list flex-between mt-md ml-md mr-md pr-md fill-base box-shadow radius-20"
|
||||
v-if="mineInfo.farmer_status == 2 || mineInfo.farmer_status == 3">
|
||||
<view class="common-nav-title flex-center c-title pl-lg">
|
||||
<view class="f-title text-bold flex-1">{{user_type == 1 ? '切换农场端' : '切换用户端'}}</view>
|
||||
</view>
|
||||
<i class="iconfont icon-right" style="font-size: 28rpx;"></i>
|
||||
</view>
|
||||
|
||||
<view class="space-footer"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions,
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
color: '#ffffff',
|
||||
// 商城订单
|
||||
shopOrderList: [{
|
||||
img: '/static/image/mine/no-pay.png',
|
||||
text: '待支付',
|
||||
url: '/shop/pages/order/list?tab=1'
|
||||
}, {
|
||||
img: '/static/image/mine/send.png',
|
||||
text: '待发货',
|
||||
url: '/shop/pages/order/list?tab=2'
|
||||
}, {
|
||||
img: '/static/image/mine/receiving.png',
|
||||
text: '待收货',
|
||||
url: '/shop/pages/order/list?tab=3'
|
||||
}, {
|
||||
img: '/static/image/mine/eval.png',
|
||||
text: '已完成',
|
||||
url: '/shop/pages/order/list?tab=4'
|
||||
}, {
|
||||
img: '/static/image/mine/refund.png',
|
||||
text: '售后/退款',
|
||||
url: '/shop/pages/refund/list'
|
||||
}],
|
||||
// 用户端 农场管理
|
||||
toolList: [{
|
||||
img: '/static/image/mine/land.png',
|
||||
text: '我的土地',
|
||||
url: '/land/pages/order/list'
|
||||
}, {
|
||||
img: '/static/image/mine/claim.png',
|
||||
text: '我的认养',
|
||||
url: '/claim/pages/order/list'
|
||||
}, {
|
||||
img: '/static/image/mine/monitor.png',
|
||||
text: '我的监控',
|
||||
url: '/home/pages/monitor/search'
|
||||
}, {
|
||||
img: '/static/image/mine/collage.png',
|
||||
text: '我的众筹',
|
||||
url: '/claim/pages/order/collage/list'
|
||||
}, {
|
||||
img: '/static/image/mine/evaluate.png',
|
||||
text: '我的评价',
|
||||
url: '/mine/pages/evaluate/list'
|
||||
}],
|
||||
// 用户端 其他功能
|
||||
otherList: [{
|
||||
img: '/static/image/mine/farm.png',
|
||||
text: '附近农场',
|
||||
url: '/home/pages/farm/list'
|
||||
}, {
|
||||
img: '/static/image/mine/coupon.png',
|
||||
text: '我的卡券',
|
||||
url: '/mine/pages/coupon/list'
|
||||
}, {
|
||||
img: '/static/image/mine/address.png',
|
||||
text: '我的地址',
|
||||
url: '/mine/pages/address/list'
|
||||
}, {
|
||||
img: '/static/image/mine/about.png',
|
||||
text: '关于我们',
|
||||
url: '/home/pages/about'
|
||||
}],
|
||||
// 用户端 商家专属
|
||||
businessList: [{
|
||||
img: '/static/image/mine/store-manage.png',
|
||||
text: '店铺管理',
|
||||
url: '/business/pages/store-manage'
|
||||
}, {
|
||||
img: '/static/image/mine/order.png',
|
||||
text: '商城订单',
|
||||
url: '/business/pages/order/list'
|
||||
}],
|
||||
// 农场端 其他
|
||||
orderList: [{
|
||||
img: '/static/image/mine/land.png',
|
||||
text: '土地订单',
|
||||
url: '/farmer/pages/order/land/list'
|
||||
}, {
|
||||
img: '/static/image/mine/claim.png',
|
||||
text: '认养订单',
|
||||
url: '/farmer/pages/order/claim/list'
|
||||
}, {
|
||||
img: '/static/image/mine/send-order.png',
|
||||
text: '配送订单',
|
||||
url: '/farmer/pages/order/distribution/list'
|
||||
}],
|
||||
// 农场端 其他功能
|
||||
manageList: [{
|
||||
img: '/static/image/mine/farm-manage.png',
|
||||
text: '农场管理',
|
||||
url: '/farmer/pages/apply?type=1'
|
||||
}, {
|
||||
img: '/static/image/mine/finance.png',
|
||||
text: '财务管理',
|
||||
url: '/farmer/pages/finance/index'
|
||||
}],
|
||||
farmer_info: {},
|
||||
user_type: 1
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
userInfo: state => state.user.userInfo,
|
||||
mineInfo: state => state.user.mineInfo,
|
||||
loginType: state => state.user.loginType,
|
||||
}),
|
||||
onShow() {
|
||||
this.initIndex()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.showNavigationBarLoading()
|
||||
// #endif
|
||||
this.initRefresh()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
onPageScroll(e) {
|
||||
let color = e.scrollTop < 20 ? '#ffffff' : '#000000'
|
||||
if (this.color == color) return
|
||||
this.color = color
|
||||
this.$util.setNavigationBarColor({
|
||||
color,
|
||||
bg: 'none'
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getConfigInfo', 'getUserInfo', 'getMineInfo', 'getAuthUserProfile']),
|
||||
async initIndex(refresh = false) {
|
||||
if (!this.configInfo.id || refresh) {
|
||||
await this.getConfigInfo()
|
||||
if (this.loginType == 'apple') {
|
||||
this.updateUserItem({
|
||||
key: 'isShowLogin',
|
||||
val: false
|
||||
})
|
||||
}
|
||||
}
|
||||
await this.getUserInfo()
|
||||
let [, farmer_info] = await Promise.all([this.getMineInfo(), this
|
||||
.$api.farmer.farmerInfo()
|
||||
])
|
||||
this.farmer_info = farmer_info
|
||||
let {
|
||||
farmer_status,
|
||||
fx_status
|
||||
} = this.mineInfo
|
||||
this.user_type = farmer_status == 2 || farmer_status == 3 ? this.user_type : 1
|
||||
let arr = ['farmer_status', 'fx_status']
|
||||
let textArr = {
|
||||
farmer_status: {
|
||||
text: '申请农场主',
|
||||
list: {
|
||||
img: '/static/image/mine/apply.png',
|
||||
text: '申请农场主',
|
||||
url: '/mine/pages/apply'
|
||||
}
|
||||
},
|
||||
fx_status: {
|
||||
text: '申请分销商',
|
||||
list: {
|
||||
img: '/static/image/mine/distribution.png',
|
||||
text: '申请分销商',
|
||||
url: '/mine/pages/distribution/apply'
|
||||
},
|
||||
list2: {
|
||||
img: '/static/image/mine/distribution.png',
|
||||
text: '分销中心',
|
||||
url: '/mine/pages/distribution/index'
|
||||
}
|
||||
}
|
||||
}
|
||||
arr.map(item => {
|
||||
if (this.mineInfo[item] != 2) {
|
||||
let arr = this.otherList.filter(aitem => {
|
||||
return aitem.text === textArr[item].text
|
||||
})
|
||||
if (arr.length === 0) {
|
||||
this.otherList.push(textArr[item].list)
|
||||
}
|
||||
} else {
|
||||
this.otherList.map((aitem, aindex) => {
|
||||
if (aitem.text === textArr[item].text) {
|
||||
this.otherList.splice(aindex, 1)
|
||||
}
|
||||
})
|
||||
if (item === 'fx_status') {
|
||||
let arr = this.otherList.filter(aitem => {
|
||||
return aitem.text === '分销中心'
|
||||
})
|
||||
if (arr.length === 0) {
|
||||
this.otherList.unshift(textArr[item].list2)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
this.$util.hideAll()
|
||||
},
|
||||
initRefresh() {
|
||||
this.initIndex(true)
|
||||
},
|
||||
async getUserProfile() {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.getUserProfile({
|
||||
desc: '用于完善个人资料',
|
||||
success: (res) => {
|
||||
console.log(res, "=======res")
|
||||
let {
|
||||
userInfo = {}
|
||||
} = res
|
||||
this.getAuthUserProfile(userInfo)
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log(res, "=====fail");
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
async toJump(key, index) {
|
||||
let {
|
||||
url,
|
||||
text
|
||||
} = this[key][index]
|
||||
if (['申请农场主', '申请分销商'].includes(text)) {
|
||||
this.toApply(text == '申请农场主' ? 1 : 2)
|
||||
return
|
||||
}
|
||||
this.$util.log(url)
|
||||
this.$util.toCheckLogin({
|
||||
url
|
||||
})
|
||||
},
|
||||
// 申请农场主/分销商
|
||||
async toApply(type) {
|
||||
await this.getMineInfo()
|
||||
let {
|
||||
farmer_status = -1,
|
||||
fx_status = -1
|
||||
} = this.mineInfo
|
||||
let status = type == 1 ? farmer_status : fx_status
|
||||
// -1未申请，1审核中，2审核通过，3取消授权，4审核失败
|
||||
let url = status == -1 ? type == 1 ? `/farmer/pages/apply` : `/mine/pages/distribution/apply` :
|
||||
`/mine/pages/apply-result?type=${type}`
|
||||
this.$util.log(url)
|
||||
this.$util.toCheckLogin({
|
||||
url
|
||||
})
|
||||
},
|
||||
// 切换商家端
|
||||
toChange() {
|
||||
let {
|
||||
user_type
|
||||
} = this
|
||||
this.user_type = user_type == 1 ? 2 : 1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pages-mine {
|
||||
|
||||
.avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border: 4rpx solid #EFF3FD;
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
|
||||
.icon-shuaxin,
|
||||
.icon-erweima {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.member-item {
|
||||
width: 150rpx;
|
||||
height: 38rpx;
|
||||
margin-top: -20rpx;
|
||||
padding: 0 2rpx;
|
||||
border-radius: 6rpx;
|
||||
z-index: 1;
|
||||
|
||||
|
||||
.vip-icon {
|
||||
width: 28rpx;
|
||||
height: 24rpx;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
max-width: 120rpx;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.notice-item {
|
||||
.iconfont {
|
||||
font-size: 46rpx;
|
||||
}
|
||||
|
||||
.fill-warning {
|
||||
top: 6rpx;
|
||||
right: 6rpx;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.stored-list {
|
||||
|
||||
.stored-item {
|
||||
width: 33.33%;
|
||||
}
|
||||
}
|
||||
|
||||
.mine-count-list {
|
||||
.cash-btn {
|
||||
width: 138rpx;
|
||||
height: 52rpx;
|
||||
}
|
||||
|
||||
.icon-right {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.mine-index-bg {
|
||||
background: rgb(57, 181, 74);
|
||||
height: 14.625rem;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
border-radius: 0 0 5% 5%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
.mine-menu-list {
|
||||
|
||||
.cancel-auth {
|
||||
width: 110rpx;
|
||||
height: 100rpx;
|
||||
font-size: 100rpx;
|
||||
top: 10rpx;
|
||||
right: 20rpx;
|
||||
z-index: 1;
|
||||
|
||||
.text-bold {
|
||||
height: 26rpx;
|
||||
transform: rotate(-32deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.menu-title {
|
||||
height: 90rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-child {
|
||||
width: 20%;
|
||||
margin: 10rpx 0;
|
||||
|
||||
.item-img {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
336
uniapp/uni-app/pages/shop.vue
Normal file
336
uniapp/uni-app/pages/shop.vue
Normal file
@@ -0,0 +1,336 @@
|
||||
<template>
|
||||
<view class="pages-shop">
|
||||
<fixed :zIndex="99">
|
||||
<uni-nav-bar :fixed="false" :shadow="false" :statusBar="true" title="商城" color="#fff"
|
||||
backgroundColor="none">
|
||||
</uni-nav-bar>
|
||||
<view class="shop-search-info space-shop abs">
|
||||
<view mode="aspectFill" lazy-load class="breed-index-bg abs"></view>
|
||||
<view class="search-item flex-between abs">
|
||||
<view style="width: 604rpx;">
|
||||
<search @input="toSearch" type="input" :padding="0" :radius="70"
|
||||
backgroundColor="rgba(240,240,240,0.2)" searchColor="rgba(240,240,240,0.2)"
|
||||
frontColor="#fff" placeholder="搜索商品名称"></search>
|
||||
</view>
|
||||
<image @tap.stop="$util.toCheckLogin({url:`/shop/pages/car`})" mode="aspectFill" lazy-load
|
||||
class="car-img" src="/static/image/shop/car-img.png"></image>
|
||||
<view v-if="shopCarList.car_count" class="car-count flex-center c-base f-icontext abs"
|
||||
:style="{width: shopCarList.car_count<10 ? '30rpx' : '50rpx'}">
|
||||
{{shopCarList.car_count < 100 ? shopCarList.car_count : '99+'}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="cate-item abs fill-base flex-between b-1px-b" v-if="tabList.length>0">
|
||||
<view style="width: calc(100% - 132rpx)">
|
||||
<tab @change="handerTabChange($event,'activeIndex')" :list="tabList" :activeIndex="activeIndex"
|
||||
:activeColor="primaryColor" :haveLine="false" fontSize="28rpx" height="80rpx"></tab>
|
||||
</view>
|
||||
<view @tap.stop="toShowRank" class="flex-center f-caption c-desc b-1px-l" style="width: 132rpx;">
|
||||
更多
|
||||
<i class="iconfont icon-gengduo ml-sm"></i>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</fixed>
|
||||
|
||||
<uni-popup @change="popupChange" ref="rank_item" type="top" :custom="true">
|
||||
<view :style="{height: `${shopHeight}px`}"></view>
|
||||
<view class="pd-lg fill-base">
|
||||
<view class="f-title c-title text-bold pb-md">类别</view>
|
||||
<view class="rank-list flex-warp">
|
||||
<view @tap.stop="handerTabChange(index,'activeIndex')"
|
||||
class="rank-item flex-center mt-md f-paragraph c-desc" :class="[{'cur':index==activeIndex}]"
|
||||
:style="{color:index==activeIndex?primaryColor:''}" v-for="(item,index) in tabList"
|
||||
:key="index">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<view class="space-shop rel" :style="{height: (180 - configInfo.navBarHeight) + 'px'}"></view>
|
||||
<view class="flex-warp">
|
||||
<view @tap.stop="goDetail(index)" class="goods-item fill-base mt-md ml-md box-shadow radius-16"
|
||||
v-for="(item,index) in list.data" :key="index">
|
||||
<image mode="aspectFill" lazy-load class="cover" :src="item.cover"></image>
|
||||
<view class="pd-md">
|
||||
<view class="f-desc c-title text-bold ellipsis">{{item.goods_name}}</view>
|
||||
<view class="flex-y-center f-caption ellipsis">
|
||||
<view class="flex-y-center c-warning">¥<view class="f-md-title ellipsis">{{item.show_price}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="c-caption ml-sm">¥{{item.show_init_price}}</view>
|
||||
</view>
|
||||
<view class="f-caption c-caption">销量 {{item.all_sale_count}}</view>
|
||||
<view class="flex-center f-caption c-caption">
|
||||
<image mode="aspectFill" lazy-load class="store-img radius" :src="item.store_cover"></image>
|
||||
<view class="flex-1 ml-sm ellipsis">{{item.store_name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
|
||||
</load-more>
|
||||
<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
|
||||
<view class="space-footer"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions,
|
||||
mapMutations
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
isLoad: false,
|
||||
options: {},
|
||||
storeInfo: {},
|
||||
tabList: [],
|
||||
activeIndex: 0,
|
||||
cate_id: 0,
|
||||
shopHeight: 0,
|
||||
param: {
|
||||
page: 1,
|
||||
cate_id: 0
|
||||
},
|
||||
list: {
|
||||
data: []
|
||||
},
|
||||
loading: true,
|
||||
lockTap: false,
|
||||
show_rank_item: false
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
userInfo: state => state.user.userInfo,
|
||||
shopCarList: state => state.order.shopCarList,
|
||||
loginType: state => state.user.loginType,
|
||||
}),
|
||||
async onLoad() {
|
||||
this.$util.showLoading()
|
||||
await this.initIndex()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.showNavigationBarLoading()
|
||||
// #endif
|
||||
this.initRefresh()
|
||||
uni.stopPullDownRefresh()
|
||||
if (!this.show_rank_item) return
|
||||
this.$refs.rank_item.close()
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.list.current_page >= this.list.last_page || this.loading) return
|
||||
this.param.page = this.param.page + 1
|
||||
this.loading = true
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getConfigInfo', 'updateCommonOptions', 'getShopCarList']),
|
||||
...mapMutations(['updateUserItem']),
|
||||
async initIndex(refresh = false) {
|
||||
if (!this.configInfo.id || refresh) {
|
||||
await this.getConfigInfo()
|
||||
if (this.loginType == 'apple') {
|
||||
this.updateUserItem({
|
||||
key: 'isShowLogin',
|
||||
val: false
|
||||
})
|
||||
}
|
||||
}
|
||||
let {
|
||||
cate_id,
|
||||
} = await this.$api.shop.goodsIndex()
|
||||
cate_id.unshift({
|
||||
id: 0,
|
||||
title: '全部'
|
||||
})
|
||||
this.isLoad = true
|
||||
this.tabList = cate_id
|
||||
this.param.page = 1
|
||||
await Promise.all([this.getShopCarList(), this.getList()])
|
||||
this.toSetResHeight()
|
||||
},
|
||||
initRefresh() {
|
||||
this.param.page = 1
|
||||
this.initIndex(true)
|
||||
},
|
||||
async getList() {
|
||||
let {
|
||||
list: oldList,
|
||||
tabList,
|
||||
activeIndex,
|
||||
cate_id
|
||||
} = this
|
||||
let ind = tabList.findIndex(item => {
|
||||
return item.id == cate_id
|
||||
})
|
||||
cate_id = ind == -1 ? 0 : cate_id
|
||||
activeIndex = ind == -1 ? 0 : ind
|
||||
this.cate_id = cate_id
|
||||
this.activeIndex = activeIndex
|
||||
let param = Object.assign({}, this.param, {
|
||||
cate_id,
|
||||
})
|
||||
let newList = await this.$api.shop.goodsList(param)
|
||||
if (this.param.page == 1) {
|
||||
this.list = newList
|
||||
} else {
|
||||
newList.data = oldList.data.concat(newList.data)
|
||||
this.list = newList
|
||||
}
|
||||
this.loading = false
|
||||
this.$util.hideAll()
|
||||
},
|
||||
toSearch(val) {
|
||||
this.loading = true
|
||||
this.param.page = 1
|
||||
this.param.goods_name = val
|
||||
this.getList()
|
||||
},
|
||||
async toSetResHeight() {
|
||||
const query = uni.createSelectorQuery();
|
||||
query.select('.shop-search-info').boundingClientRect(data => {
|
||||
this.shopHeight = data.height - 40
|
||||
}).exec();
|
||||
},
|
||||
toShowRank() {
|
||||
let {
|
||||
show_rank_item,
|
||||
} = this
|
||||
if (this.lockTap) return
|
||||
this.lockTap = true
|
||||
setTimeout(() => {
|
||||
let methodModel = show_rank_item ? 'close' : 'open'
|
||||
this.$refs.rank_item[methodModel]()
|
||||
}, 500)
|
||||
},
|
||||
popupChange(e) {
|
||||
let {
|
||||
show
|
||||
} = e
|
||||
this.show_rank_item = show
|
||||
setTimeout(() => {
|
||||
this.lockTap = false
|
||||
}, 200)
|
||||
},
|
||||
handerTabChange(index, type) {
|
||||
this[type] = index
|
||||
this.$refs.rank_item.close()
|
||||
if (type == 'activeIndex') {
|
||||
this.cate_id = this.tabList[index].id
|
||||
}
|
||||
this.$util.showLoading()
|
||||
this.param.page = 1
|
||||
this.list.data = []
|
||||
this.getList()
|
||||
},
|
||||
goDetail(index) {
|
||||
let {
|
||||
id
|
||||
} = this.list.data[index]
|
||||
let url = `/shop/pages/detail?id=${id}`
|
||||
this.$util.toCheckLogin({
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.pages-shop {
|
||||
.shop-search-info {
|
||||
z-index: -1;
|
||||
|
||||
.search-item {
|
||||
width: 100%;
|
||||
padding: 0 25rpx;
|
||||
top: 180rpx;
|
||||
|
||||
.car-img {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
.car-count {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
border-radius: 15rpx;
|
||||
background: #f12c20;
|
||||
top: -10rpx;
|
||||
right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.cate-item {
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
|
||||
.iconfont {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.space-shop {
|
||||
width: 100%;
|
||||
height: 360rpx;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 360rpx;
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
width: 345rpx;
|
||||
height: 550rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.cover {
|
||||
width: 345rpx;
|
||||
height: 350rpx;
|
||||
}
|
||||
|
||||
.store-img {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.breed-index-bg {
|
||||
background: rgb(57, 181, 74);
|
||||
height: 10rem;
|
||||
width: 140%;
|
||||
left: -20%;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.rank-list {
|
||||
.rank-item {
|
||||
width: 215rpx;
|
||||
height: 78rpx;
|
||||
background: #F5F5F5;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 22rpx;
|
||||
}
|
||||
|
||||
.rank-item:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.cur {
|
||||
background: rgba(0, 146, 84, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user