Browse Source

首页

master
tianyi 1 month ago
parent
commit
febdc41715
  1. 179
      pages/index/index.vue

179
pages/index/index.vue

@ -5,21 +5,31 @@
<!-- <map id="map" style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude"
:markers="markers" :polyline="polyline"></map> -->
<view style="position: relative;height: 545rpx;">
<view style="position: absolute;top: 55px;left: 10px;z-index: 999;">
<view @click="checkArea" v-if="areaName == ''">
点击选择区域
<uni-icons type="right" size="12" style="margin-left: 10rpx;"></uni-icons>
</view>
<view @click="checkArea" v-else>
{{areaName}}
<uni-icons type="right" size="12" style="margin-left: 10rpx;"></uni-icons>
</view>
</view>
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
:interval="interval" :duration="duration">
<swiper-item>
<img src="/static/images/img/toutu.png" alt="" />
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/eaae29a344a241b3b46e7b91882ca197.png" alt="" />
</swiper-item>
<swiper-item>
<img src="/static/images/img/toutu.png" alt="" />
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/eaae29a344a241b3b46e7b91882ca197.png" alt="" />
</swiper-item>
<swiper-item>
<img src="/static/images/img/toutu.png" alt="" />
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/eaae29a344a241b3b46e7b91882ca197.png" alt="" />
</swiper-item>
</swiper>
<view class="order-msg-box">
<view class="order-msg-left">
<img src="/static/images/img/motuo.png" alt="" />
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/bf2bb7f80e17428391c407aef769517a.png" alt="" />
</view>
<view class="order-msg-center">
<view style="font-weight: 700;font-size: 30rpx;line-height: 30px;margin-top: 5%;">配送员正在赶往商家
@ -27,42 +37,42 @@
<view style="font-size: 24rpx;">预计<text style="color: red;">12:03-12:30</text>送达</view>
</view>
<view class="order-msg-right">
<img src="/static/images/img/chakan.png" alt="" />
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/579569bfcc954f52baea06f6f11951be.png" alt="" />
</view>
</view>
<view class="menu-box">
<view class="menu-list">
<img src="/static/images/img/paotui.png" alt="" />
<view class="menu-list" @tap="goDetail('1')">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/7690c4f897604fca804ea932bc3c1239.png" alt="" />
<view class="menu-name">跑腿/快递</view>
</view>
<view class="menu-list" style="position: relative;">
<img src="/static/images/img/pintuan.png" alt="" />
<img src="/static/images/img/pintuanjiaobiao.png" alt=""
<view class="menu-list" @tap="goDetail('2')" style="position: relative;">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/553230c20dea4e5c85f1e396058a7493.png" alt="" />
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1a02b40d853a4cfdb062fff44ec49e6a.png" alt=""
style="position: absolute;top: -16rpx;right: 0;width: 88rpx;height: 36rpx;">
<view class="menu-name">拼团</view>
</view>
<view class="menu-list">
<img src="/static/images/img/nongchang.png" alt="" />
<view class="menu-list" @tap="goDetail('3')">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/a2f41e2d45cb4d418d273f6e9ceafff0.png" alt="" />
<view class="menu-name">农场</view>
</view>
<view class="menu-list">
<img src="/static/images/img/niudan.png" alt="" />
<view class="menu-list" @tap="goDetail('4')">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/41cfb56caff4419b94b69d0f2303b602.png" alt="" />
<view class="menu-name">扭蛋机</view>
</view>
<view class="menu-list">
<img src="/static/images/img/ie.png" alt="" />
<view class="menu-list" @tap="goDetail('5')">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/a083b7d159264bbc967034088fa7eb3a.png" alt="" />
<view class="menu-name">ie浏览器</view>
</view>
</view>
<view class="like-box">
<view class="like-title">
<img src="/static/images/img/cainixihuan.png" alt="" />
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/e0c44bc9b69a46559d3aa4160d3cf4a5.png" alt="" />
</view>
<view class="like-content-box">
<view class="like-left">
<view class="like-content-title">
<view style="width: 100%;font-weight: 700;">爆品拼团</view>
<img src="/static/images/img/baopinchaodijia.png" alt=""
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/0eeb2e28f84a43a0aefddd8edb430d73.png" alt=""
style="width: 140rpx;height: 64rpx;position: absolute;top: -16rpx;left: 40%;" />
<img src="/static/images/img/yousanjiao.png" alt=""
style="width: 28rpx;height: 28rpx;position: absolute;top: 20rpx;right: 12rpx;">
@ -105,7 +115,7 @@
<view class="like-left">
<view class="like-content-title">
<view style="font-weight: 700;">爆品拼团</view>
<img src="/static/images/img/baopinchaodijia.png" alt=""
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/0eeb2e28f84a43a0aefddd8edb430d73.png" alt=""
style="width: 140rpx;height: 64rpx;position: absolute;top: -16rpx;left: 40%;" />
<img src="/static/images/img/yousanjiao.png" alt=""
style="width: 28rpx;height: 28rpx;position: absolute;top: 20rpx;right: 12rpx;">
@ -154,9 +164,14 @@
<text
style="position: absolute;top: 0;right: 0;font-size: 36rpx;font-weight: 700;">(31)</text>
</view>
<view style="font-size: 30rpx;font-weight: 700;margin-left: 60rpx;color: #777;">
代取快递/跑腿 (9)
<view class="like-title" style="position: relative;width:300rpx;">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/99162216d23a44a8ba81c7cb5249f3b8.png" alt="">
<text
style="position: absolute;top: 0;right: 0;font-size: 36rpx;font-weight: 700;">(9)</text>
</view>
<!-- <view style="font-size: 30rpx;font-weight: 700;margin-left: 60rpx;color: #777;">
代取快递/跑腿 (9)
</view> -->
</view>
<view class="daimai-list">
<view class="list-1">
@ -198,7 +213,7 @@
<view class="qu-song">
<view class="qu-box">
<view class='qu-tu'>
<img src="/static/images/img/quhuo.png" alt="" />
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1f77398a73454a6595c12a3c18731599.png" alt="" />
</view>
<view class="qu-text">
<view class="qu-left">
@ -211,7 +226,7 @@
</view>
<view class="qu-box" style="margin-top:10rpx;">
<view class='qu-tu'>
<img src="/static/images/img/shouhuo.png" alt="" />
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d0764fb4138747769538cf1cafa3b017.png" alt="" />
</view>
<view class="qu-text">
<view class="qu-left">
@ -262,17 +277,27 @@
</view>
</view>
<view class="qiangdan-btn">
<img src="/static/images/img/qiangdan.png" alt="">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1b8b815302a34902ac79a76a469e4ee6.png" alt="">
</view>
</view>
<view class="list-1">
<view class="display:flex;">
<view class="daoda-time">
送达时间02-02 18:02
</view>
<view class="order-page">
<view class="maotou">
#<text>021</text>
<view class="paotui-title">
<view class="paotui-text">
取件码:1-2-9830
</view>
<view class="paotui-num">
3
</view>
<view>
<uni-icons type="right" size="12"></uni-icons>
</view>
</view>
</view>
<view class="order-page">
<view class="shangjia">
<!-- <view class="shangjialogo">
<img src="/static/images/img/shangjialogo.png" alt="" />
@ -368,7 +393,7 @@
</view>
</view>
<view class="qiangdan-btn">
<img src="/static/images/img/qiangdan.png" alt="">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1b8b815302a34902ac79a76a469e4ee6.png" alt="">
</view>
</view>
</view>
@ -386,6 +411,17 @@
<my-center></my-center>
</view>
</view>
<!-- 弹出区域选择 -->
<uni-popup ref="areaPopup" background-color="#fff">
<view class="popup-area-content">
<view class="popup-area-title">
<text>请选择所属区域</text>
</view>
<view class="popup-area-container" v-for="(item,index) in areaList" @tap="onClickArea(item)">
<text style="display: inline-block">{{item.title}}</text>
</view>
</view>
</uni-popup>
<tab-bar :width="width" @tab-index="changeIndex" :currentIndex="currentIndex"></tab-bar>
</view>
</template>
@ -397,6 +433,7 @@
export default {
data() {
return {
areaName:'',
indicatorDots: false,
autoplay: true,
interval: 4000,
@ -417,7 +454,8 @@
name: '代取快递/跑腿',
isCheck: false
}],
dataList: []
dataList: [],
areaList:[]
}
},
components: {
@ -439,8 +477,49 @@
that.width = info.screenWidth * 2;
}
});
if(!uni.getStorageSync('area')){
this.checkArea()
console.log("11111")
}else{
let area = JSON.parse(uni.getStorageSync('area'))
this.areaName = area.title
}
},
methods: {
goDetail(type){
let url = ''
switch (type) {
case '1':
url = ''
break;
case '2':
url = '/package1/group/groupBuyList'
break;
case '3':
url = ''
break;
case '4':
url = ''
break;
}
uni.navigateTo({
url: url
})
},
onClickArea(item){
uni.setStorageSync('area',JSON.stringify(item))
this.$refs.areaPopup.close()
},
checkArea(){
this.tui.request("/app/shopArea/getByParentId/0", "get", {}, false, false).then((res) => {
if (res.code == 200) {
this.areaList = res.result
this.$refs.areaPopup.open()
} else {
this.tui.toast(res.message)
}
})
},
//
getUserLocation() {
uni.getLocation({
@ -602,7 +681,7 @@
border-radius: 40rpx;
border: 2px solid #A6FFEA;
background: #fff;
z-index: 999;
z-index: 99;
position: absolute;
left: 5%;
bottom: 0;
@ -828,6 +907,7 @@
position: absolute;
top: 10rpx;
left: 10rpx;
font-weight: 700;
}
.list-text {
@ -1012,4 +1092,43 @@
background-size: 100%;
}
}
.paotui-title{
display: flex;
flex: 1;
}
.paotui-text{
font-size: 14px;
color: red;
font-weight: bold;
}
.paotui-num{
font-size: 12px;
}
.popup-area-content {
align-items: center;
justify-content: center;
padding: 15px;
width: 500rpx;
height: auto;
background-color: #fff;
}
.popup-area-title {
font-size: 36rpx;
font-weight: bold;
text-align: center;
position: relative;
}
.popup-area-container {
margin-top: 20rpx;
height: 100rpx;
border-radius: 10px;
background: #088FEB;
line-height: 100rpx;
text-align: center;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
color: #fff;
}
</style>
Loading…
Cancel
Save