You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1134 lines
28 KiB
1134 lines
28 KiB
<template>
|
|
<view class="page1">
|
|
<view class="swiper-container">
|
|
<view class="swiper-page" v-if="currentIndex == 0">
|
|
<!-- <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="https://jewel-shop.oss-cn-beijing.aliyuncs.com/eaae29a344a241b3b46e7b91882ca197.png" alt="" />
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/eaae29a344a241b3b46e7b91882ca197.png" alt="" />
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<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="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%;">配送员正在赶往商家
|
|
</view>
|
|
<view style="font-size: 24rpx;">预计<text style="color: red;">12:03-12:30</text>送达</view>
|
|
</view>
|
|
<view class="order-msg-right">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/579569bfcc954f52baea06f6f11951be.png" alt="" />
|
|
</view>
|
|
</view>
|
|
<view class="menu-box">
|
|
<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" @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" @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" @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" @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="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="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;">
|
|
</view>
|
|
<view class="like-content">
|
|
<view class="content-list">
|
|
<view class="list-img">
|
|
<img src="/static/images/img/shangpintu.png" alt="">
|
|
<view class="list-type">3人团</view>
|
|
</view>
|
|
<view class="list-product">
|
|
<view class="list-name">
|
|
|
|
<view class="list-text">炸鸡、薯片零食大礼包</view>
|
|
</view>
|
|
<view class="list-price" style="color: #00231C;">￥12.90</view>
|
|
<view class="list-total">
|
|
拼团<text style="color: red;">￥9.90</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content-list">
|
|
<view class="list-img">
|
|
<img src="/static/images/img/shangpintu.png" alt="">
|
|
<view class="list-type">3人团</view>
|
|
</view>
|
|
<view class="list-product">
|
|
<view class="list-name">
|
|
|
|
<view class="list-text">炸鸡、薯片零食大礼包</view>
|
|
</view>
|
|
<view class="list-price" style="color: #00231C;">￥12.90</view>
|
|
<view class="list-total">
|
|
拼团<text style="color: red;">￥9.90</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="like-left">
|
|
<view class="like-content-title">
|
|
<view style="font-weight: 700;">爆品拼团</view>
|
|
<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;">
|
|
</view>
|
|
<view class="like-content">
|
|
<view class="content-list">
|
|
<view class="list-img">
|
|
<img src="/static/images/img/shangpintu.png" alt="">
|
|
<view class="list-type">3人团</view>
|
|
</view>
|
|
<view class="list-product">
|
|
<view class="list-name">
|
|
|
|
<view class="list-text">炸鸡、薯片零食大礼包</view>
|
|
</view>
|
|
<view class="list-price" style="color: #00231C;">￥12.90</view>
|
|
<view class="list-total">
|
|
拼团<text style="color: red;">￥9.90</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content-list">
|
|
<view class="list-img">
|
|
<img src="/static/images/img/shangpintu.png" alt="">
|
|
<view class="list-type">3人团</view>
|
|
</view>
|
|
<view class="list-product">
|
|
<view class="list-name">
|
|
|
|
<view class="list-text">炸鸡、薯片零食大礼包</view>
|
|
</view>
|
|
<view class="list-price" style="color: #00231C;">￥12.90</view>
|
|
<view class="list-total">
|
|
拼团<text style="color: red;">￥9.90</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="daimai-box" style="padding-bottom:180rpx;">
|
|
<view class="daimai-tab">
|
|
<view class="like-title" style="position: relative;">
|
|
<img src="/static/images/img/daimaifantitle.png" alt="">
|
|
<text
|
|
style="position: absolute;top: 0;right: 0;font-size: 36rpx;font-weight: 700;">(31)</text>
|
|
</view>
|
|
<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">
|
|
<view class="daoda-time">
|
|
送达时间：02-02 18:02
|
|
</view>
|
|
<view class="order-page">
|
|
<view class="maotou">
|
|
#<text>021</text>
|
|
</view>
|
|
<view class="shangjia">
|
|
<!-- <view class="shangjialogo">
|
|
<img src="/static/images/img/shangjialogo.png" alt="" />
|
|
</view> -->
|
|
<text style="font-weight: 700;">王继酸辣粉</text>
|
|
<view
|
|
style="width: 32rpx;height: 30rpx;font-weight: 700;font-size: 20rpx;color: #fff;text-align: center;background: #00BFFF;border-radius: 10rpx;margin: 20rpx 0 0 10rpx;line-height: 30rpx;">
|
|
脆
|
|
</view>
|
|
</view>
|
|
<view class="shangpin">
|
|
<!-- <view class="shangpintu">
|
|
<img src="/static/images/img/shangpintu.png" alt="">
|
|
</view>
|
|
<view class="shangpinxinxi">
|
|
<view class="pinming">
|
|
【神仙搭配】酸辣粉+脆皮肉夹馍套餐
|
|
</view>
|
|
<view class="guige">
|
|
大份；不要辣
|
|
</view>
|
|
<view class="shuliang">
|
|
<view style="width: 50%;">x1</view>
|
|
<view
|
|
style="width: 50%;font-size: 28rpx;text-align: right;color: #000;font-weight: 700;">
|
|
￥19.99</view>
|
|
</view>
|
|
</view> -->
|
|
<view class="qu-song">
|
|
<view class="qu-box">
|
|
<view class='qu-tu'>
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1f77398a73454a6595c12a3c18731599.png" alt="" />
|
|
</view>
|
|
<view class="qu-text">
|
|
<view class="qu-left">
|
|
第三师堂A02窗口
|
|
</view>
|
|
<view class="qu-right">
|
|
1000m
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="qu-box" style="margin-top:10rpx;">
|
|
<view class='qu-tu'>
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d0764fb4138747769538cf1cafa3b017.png" alt="" />
|
|
</view>
|
|
<view class="qu-text">
|
|
<view class="qu-left">
|
|
11号楼310
|
|
</view>
|
|
<view class="qu-right">
|
|
2.1km
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="qu-song">
|
|
<view class="qu-box">
|
|
<view class='qu-tu'>
|
|
<img src="/static/images/img/quhuo.png" alt="" />
|
|
</view>
|
|
<view class="qu-text">
|
|
<view class="qu-left">
|
|
第三师堂A02窗口
|
|
</view>
|
|
<view class="qu-right">
|
|
1000m
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="qu-box" style="margin-top:10rpx;">
|
|
<view class='qu-tu'>
|
|
<img src="/static/images/img/shouhuo.png" alt="" />
|
|
</view>
|
|
<view class="qu-text">
|
|
<view class="qu-left">
|
|
11号楼310
|
|
</view>
|
|
<view class="qu-right">
|
|
2.1km
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<view class="yongjin">
|
|
<view style="width: 50%;color: #777;padding-left: 4%;">
|
|
配送佣金</view>
|
|
<view style="font-weight: 700;width: 50%;text-align: right;">
|
|
￥5.00
|
|
<text style="color: #777;font-size: 22rpx;">（包含￥2平台佣金）</text>
|
|
</view>
|
|
</view>
|
|
<view class="qiangdan-btn">
|
|
<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="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="" />
|
|
</view> -->
|
|
<text style="font-weight: 700;">王继酸辣粉</text>
|
|
<view
|
|
style="width: 32rpx;height: 30rpx;font-weight: 700;font-size: 20rpx;color: #fff;text-align: center;background: #00BFFF;border-radius: 10rpx;margin: 20rpx 0 0 10rpx;line-height: 30rpx;">
|
|
详
|
|
</view>
|
|
</view>
|
|
<view class="shangpin">
|
|
<!-- <view class="shangpintu">
|
|
<img src="/static/images/img/shangpintu.png" alt="">
|
|
</view>
|
|
<view class="shangpinxinxi">
|
|
<view class="pinming">
|
|
【神仙搭配】酸辣粉+脆皮肉夹馍套餐
|
|
</view>
|
|
<view class="guige">
|
|
大份；不要辣
|
|
</view>
|
|
<view class="shuliang">
|
|
<view style="width: 50%;">x1</view>
|
|
<view
|
|
style="width: 50%;font-size: 28rpx;text-align: right;color: #000;font-weight: 700;">
|
|
￥19.99</view>
|
|
</view>
|
|
</view> -->
|
|
<view class="qu-song">
|
|
<view class="qu-box">
|
|
<view class='qu-tu'>
|
|
<img src="/static/images/img/quhuo.png" alt="" />
|
|
</view>
|
|
<view class="qu-text">
|
|
<view class="qu-left">
|
|
第三师堂A02窗口
|
|
</view>
|
|
<view class="qu-right">
|
|
1000m
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="qu-box" style="margin-top:10rpx;">
|
|
<view class='qu-tu'>
|
|
<img src="/static/images/img/shouhuo.png" alt="" />
|
|
</view>
|
|
<view class="qu-text">
|
|
<view class="qu-left">
|
|
11号楼310
|
|
</view>
|
|
<view class="qu-right">
|
|
2.1km
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="qu-song">
|
|
<view class="qu-box">
|
|
<view class='qu-tu'>
|
|
<img src="/static/images/img/quhuo.png" alt="" />
|
|
</view>
|
|
<view class="qu-text">
|
|
<view class="qu-left">
|
|
第三师堂A02窗口
|
|
</view>
|
|
<view class="qu-right">
|
|
1000m
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="qu-box" style="margin-top:10rpx;">
|
|
<view class='qu-tu'>
|
|
<img src="/static/images/img/shouhuo.png" alt="" />
|
|
</view>
|
|
<view class="qu-text">
|
|
<view class="qu-left">
|
|
11号楼310
|
|
</view>
|
|
<view class="qu-right">
|
|
2.1km
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<view class="yongjin">
|
|
<view style="width: 50%;color: #777;padding-left: 4%;">
|
|
配送佣金</view>
|
|
<view style="font-weight: 700;width: 50%;text-align: right;">
|
|
￥5.00
|
|
<text style="color: #777;font-size: 22rpx;">（包含￥2平台佣金）</text>
|
|
</view>
|
|
</view>
|
|
<view class="qiangdan-btn">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1b8b815302a34902ac79a76a469e4ee6.png" alt="">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="swiper-page" v-if="currentIndex == 1">
|
|
<de-livery></de-livery>
|
|
</view>
|
|
<view class="swiper-page" v-if="currentIndex == 3">
|
|
<post-list></post-list>
|
|
</view>
|
|
<view class="swiper-page" v-if="currentIndex == 4">
|
|
<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>
|
|
<script>
|
|
import tabBar from "@/components/tab-bar/tab-bar.vue";
|
|
import deLivery from "@/components/tab-bar/delivery.vue";
|
|
import postList from "@/components/tab-bar/postList.vue";
|
|
import myCenter from "@/components/tab-bar/myCenter.vue";
|
|
export default {
|
|
data() {
|
|
return {
|
|
areaName:'',
|
|
indicatorDots: false,
|
|
autoplay: true,
|
|
interval: 4000,
|
|
duration: 1000,
|
|
latitude: 39.909, // 默认纬度，可以设为用户当前位置或配送员位置
|
|
longitude: 116.39742, // 默认经度
|
|
markers: [], // 标记点，可以包括配送员位置和用户位置
|
|
polyline: [], // 路线，如果需要显示配送员路线
|
|
currentIndex: 0,
|
|
width: 0,
|
|
dataTabList: [{
|
|
name: '猜你喜欢',
|
|
isCheck: true
|
|
}, {
|
|
name: '代买饭',
|
|
isCheck: false
|
|
}, {
|
|
name: '代取快递/跑腿',
|
|
isCheck: false
|
|
}],
|
|
dataList: [],
|
|
areaList:[]
|
|
}
|
|
},
|
|
components: {
|
|
tabBar,
|
|
deLivery,
|
|
postList,
|
|
myCenter
|
|
},
|
|
onLoad() {
|
|
// 获取用户当前位置
|
|
this.getUserLocation();
|
|
// 建立WebSocket连接或定时请求获取配送员位置
|
|
this.getDeliveryLocation();
|
|
},
|
|
onShow() {
|
|
let that = this
|
|
uni.getSystemInfo({
|
|
success: function(info) {
|
|
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({
|
|
type: 'gcj02', // 返回国测局坐标，用于微信小程序地图组件
|
|
success: (res) => {
|
|
console.log('位置', res)
|
|
this.latitude = res.latitude;
|
|
this.longitude = res.longitude;
|
|
// 将用户位置添加到标记点
|
|
this.markers.push({
|
|
id: 0,
|
|
latitude: res.latitude,
|
|
longitude: res.longitude,
|
|
title: '我的位置',
|
|
iconPath: '/static/images/tabbar/fabu1.png', // 用户位置图标
|
|
width: 30,
|
|
height: 30
|
|
});
|
|
},
|
|
fail: (err) => {
|
|
console.log('获取位置失败', err);
|
|
}
|
|
});
|
|
},
|
|
// 获取配送员位置，这里假设使用WebSocket
|
|
getDeliveryLocation() {
|
|
// WebSocket连接，需要时放开
|
|
// uni.connectSocket({
|
|
// url: "wss://www.example.com/socket",
|
|
// header: {
|
|
// "content-type": "application/json",
|
|
// },
|
|
// protocols: ["protocol1"],
|
|
// method: "GET",
|
|
// });
|
|
|
|
|
|
|
|
// 假设我们有一个WebSocket连接，这里用setInterval模拟定时获取
|
|
// this.deliveryTimer = setInterval(() => {
|
|
// 实际开发中，这里应该是从WebSocket推送或后端API获取
|
|
// 模拟数据
|
|
const deliveryLat = this.latitude;
|
|
const deliveryLng = this.longitude;
|
|
// 更新配送员位置标记
|
|
// 先清除之前的配送员标记，假设配送员标记id为1
|
|
this.markers = this.markers.filter(marker => marker.id !== 1);
|
|
// 添加新的配送员标记
|
|
this.markers.push({
|
|
id: 1,
|
|
latitude: deliveryLat,
|
|
longitude: deliveryLng,
|
|
title: '张三',
|
|
iconPath: '/static/images/tabbar/fabu1.png', // 配送员图标
|
|
width: 30,
|
|
height: 30
|
|
});
|
|
// 将地图中心移动到配送员位置
|
|
this.latitude = deliveryLat;
|
|
this.longitude = deliveryLng;
|
|
// }, 5000);
|
|
},
|
|
// 页面卸载时清除定时器
|
|
onUnload() {
|
|
if (this.deliveryTimer) {
|
|
clearInterval(this.deliveryTimer);
|
|
}
|
|
},
|
|
//微信支付测试
|
|
wxPayment() {
|
|
let that = this;
|
|
this.tui.request("/api/wechat/pay/unified-order", "POST", {
|
|
openid: uni.getStorageSync('miniProgramOpenid'),
|
|
amount: 1, // 支付金额（分）
|
|
description: '拼团订单',
|
|
outTradeNo: 'ORDER_' + Date.now()
|
|
}, false, false).then((res) => {
|
|
if (res.code == 200) {
|
|
uni.requestPayment({
|
|
provider: 'wxpay',
|
|
timeStamp: res.timeStamp,
|
|
nonceStr: res.nonceStr,
|
|
package: res.package,
|
|
signType: res.signType,
|
|
paySign: res.paySign,
|
|
success: function(res2) {
|
|
console.log('success:' + JSON.stringify(res2));
|
|
},
|
|
fail: function(err) {
|
|
console.log('fail:' + JSON.stringify(err));
|
|
}
|
|
});
|
|
} else {
|
|
this.tui.toast(res.message)
|
|
}
|
|
})
|
|
},
|
|
//底部tab切换组件状态改变
|
|
changeIndex(index) {
|
|
if (index == 2) {
|
|
uni.navigateTo({
|
|
url: '/package1/tabbar/release'
|
|
})
|
|
return
|
|
}
|
|
this.lastIndex = this.currentIndex
|
|
this.currentIndex = index
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 28rpx;
|
|
background: #F5F8F5;
|
|
color: #00231C;
|
|
}
|
|
|
|
.page1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
.swiper-container {
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.swiper-page {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.swiper {
|
|
width: 100%;
|
|
height: 500rpx;
|
|
z-index: 99 !important;
|
|
}
|
|
|
|
.swiper img {
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 99 !important;
|
|
}
|
|
|
|
.order-msg-box {
|
|
width: 90%;
|
|
height: 146rpx;
|
|
border-radius: 40rpx;
|
|
border: 2px solid #A6FFEA;
|
|
background: #fff;
|
|
z-index: 99;
|
|
position: absolute;
|
|
left: 5%;
|
|
bottom: 0;
|
|
display: flex;
|
|
}
|
|
|
|
.order-msg-left {
|
|
width: 20%;
|
|
height: 100%;
|
|
}
|
|
|
|
.order-msg-left img {
|
|
width: 75%;
|
|
height: 65%;
|
|
margin: 17% 0 0 15%;
|
|
}
|
|
|
|
.order-msg-center {
|
|
width: 50%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-left: 5%;
|
|
}
|
|
|
|
.order-msg-right {
|
|
width: 30%;
|
|
height: 100%;
|
|
}
|
|
|
|
.order-msg-right img {
|
|
width: 80%;
|
|
height: 56%;
|
|
margin: 15% 0 0 10%;
|
|
}
|
|
|
|
.tabbar {
|
|
width: 100%;
|
|
height: 100rpx;
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
border-top: 1rpx solid #eee;
|
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
z-index: 100;
|
|
}
|
|
|
|
.tab-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
flex: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.tab-text {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.tab-item.active .tab-text {
|
|
color: #007aff;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tab-indicator {
|
|
position: absolute;
|
|
bottom: 10rpx;
|
|
width: 40rpx;
|
|
height: 4rpx;
|
|
background-color: #007aff;
|
|
border-radius: 2rpx;
|
|
animation: indicatorScale 0.3s ease;
|
|
}
|
|
|
|
@keyframes indicatorScale {
|
|
0% {
|
|
transform: scaleX(0.5);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: scaleX(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* 滑动动画效果增强 */
|
|
.swiper-item {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/* 如果需要自定义滑动动画，可以添加以下样式 */
|
|
.swiper-container .uni-swiper-wrapper {
|
|
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
|
|
/* 响应式调整 */
|
|
@media (min-width: 768px) {
|
|
.container {
|
|
max-width: 750px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
.menu-box {
|
|
width: 100%;
|
|
height: 160rpx;
|
|
display: flex;
|
|
margin-top: 80rpx;
|
|
}
|
|
|
|
.menu-list {
|
|
flex: 1;
|
|
}
|
|
|
|
.menu-list img {
|
|
width: 70%;
|
|
height: 70%;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.menu-name {
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
font-weight: 700;
|
|
margin-top: 15rpx;
|
|
}
|
|
|
|
.like-box,
|
|
.daimai-box {
|
|
width: 95%;
|
|
margin: 20rpx auto;
|
|
}
|
|
|
|
.daimai-tab {
|
|
display: flex;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
}
|
|
|
|
.like-title {
|
|
width: 218rpx;
|
|
height: 64rpx;
|
|
}
|
|
|
|
.like-title img {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.like-content-box {
|
|
height: 400rpx;
|
|
background: url("https://jewel-shop.oss-cn-beijing.aliyuncs.com/6d65d349d68f40e7886c978190b6ea33.png") no-repeat;
|
|
background-size: 100%;
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
}
|
|
|
|
.like-left {
|
|
width: 45%;
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
height: 340rpx;
|
|
margin: 50rpx 0 0 3.3%;
|
|
}
|
|
|
|
.like-content-title {
|
|
width: 100%;
|
|
height: 70rpx;
|
|
position: relative;
|
|
line-height: 70rpx;
|
|
padding: 0 10rpx;
|
|
}
|
|
|
|
.like-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.content-list {
|
|
display: flex;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.list-img {
|
|
width: 37%;
|
|
height: 120rpx;
|
|
padding: 10rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.list-img img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.list-product {
|
|
width: 60%;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.list-name {
|
|
height: 60rpx;
|
|
line-height: 28rpx;
|
|
}
|
|
|
|
.list-type {
|
|
display: inline;
|
|
font-size: 18rpx;
|
|
padding: 4rpx 6rpx;
|
|
background: #A6FFEA;
|
|
border-radius: 5rpx;
|
|
position: absolute;
|
|
top: 10rpx;
|
|
left: 10rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.list-text {
|
|
display: inline;
|
|
font-size: 22rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.list-price {
|
|
color: #777;
|
|
font-size: 20rpx;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.list-total {
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
.list-1 {
|
|
width: 98%;
|
|
height: 500rpx;
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
margin: 20rpx auto 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.daoda-time {
|
|
width: 284rpx;
|
|
height: 48rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 700;
|
|
border-radius: 10rpx;
|
|
line-height: 48rpx;
|
|
text-align: center;
|
|
background: rgba(166, 255, 234, 0.3);
|
|
margin: 20rpx 0 20rpx 20rpx;
|
|
}
|
|
|
|
.shangjia {
|
|
width: 100%;
|
|
height: 70rpx;
|
|
margin: 0 auto;
|
|
line-height: 70rpx;
|
|
padding-left: 28rpx;
|
|
display: flex;
|
|
}
|
|
|
|
.maotou {
|
|
width: 90rpx;
|
|
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/a1584a13e9db4b6fbcc66890219d0018.png') no-repeat;
|
|
height: 90rpx;
|
|
background-size: 100%;
|
|
position: absolute;
|
|
top: -60rpx;
|
|
right: 40rpx;
|
|
text-align: center;
|
|
line-height: 90rpx;
|
|
font-weight: 900;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.order-page {
|
|
width: 95%;
|
|
position: relative;
|
|
height: 200rpx;
|
|
border-radius: 40rpx;
|
|
border: 1px solid #A6FFEA;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.shangjialogo {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin: 8rpx 20rpx 0 28rpx;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
|
|
.shangpin {
|
|
display: flex;
|
|
}
|
|
|
|
.shangpintu {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
margin-left: 20rpx;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
|
|
.shangpinxinxi {
|
|
padding: 0 20rpx;
|
|
flex: 1;
|
|
}
|
|
|
|
.pinming {
|
|
font-size: 24rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.guige {
|
|
font-size: 20rpx;
|
|
height: 56rpx;
|
|
line-height: 56rpx;
|
|
color: #777;
|
|
}
|
|
|
|
.shuliang {
|
|
font-size: 20rpx;
|
|
display: flex;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
color: #777;
|
|
}
|
|
|
|
.qu-song {
|
|
width: 95%;
|
|
margin: 0 auto;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.qu-box {
|
|
display: flex;
|
|
}
|
|
|
|
.qu-tu {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
|
|
.qu-text {
|
|
display: flex;
|
|
flex: 1;
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.qu-left {
|
|
width: 50%;
|
|
padding-left: 10rpx;
|
|
}
|
|
|
|
.qu-right {
|
|
width: 50%;
|
|
text-align: right;
|
|
padding-right: 10rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.yongjin {
|
|
height: 50rpx;
|
|
display: flex;
|
|
font-size: 24rpx;
|
|
line-height: 50rpx;
|
|
width: 95%;
|
|
margin: 20rpx auto;
|
|
}
|
|
|
|
.qiangdan-btn {
|
|
width: 95%;
|
|
height: 50px;
|
|
margin: 10px auto;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
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>
|