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.
 
 
 
 
 

784 lines
26 KiB

<template>
<!-- 订单列表 -->
<view class="page1">
<view class="title">
<view class="title-sreach">
<view class="back-btn" @tap="back" :style="{'padding-top': menuButtonInfo.top +'px'}">
<uni-icons type="left" size="28"></uni-icons>
</view>
<view class="title-search" :style="{'margin-top': menuButtonInfo.top +'px'}">
<uni-icons type="search" size="18" style="margin: 9rpx;"></uni-icons>
<input type="text" placeholder="搜索" v-model="searchForm.shopName" @confirm="goSearch"
confirm-type="search" />
</view>
</view>
</view>
<view class="nav-tab">
<view class="tab1">
<view class="tabs1" @tap="checkTab1('quanbu')"
:style="{'color':tab1Checked == 'quanbu'?'#000':'#777','font-size':tab1Checked== 'quanbu'?'36rpx':'30rpx'}">
全部订单
<img v-if="tab1Checked == 'quanbu'"
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4bb5fc7725cb4a7a84d1d3a15f05b39c.png" alt=""
style="width: 120rpx;height: 12rpx;position: absolute;bottom: 16rpx;left: 30rpx;" />
</view>
<view class="tabs1" @tap="checkTab1('fantuan')"
:style="{'color':tab1Checked == 'fantuan'?'#000':'#777','font-size':tab1Checked== 'fantuan'?'36rpx':'30rpx'}">
饭团
<img v-if="tab1Checked == 'fantuan'"
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4bb5fc7725cb4a7a84d1d3a15f05b39c.png" alt=""
style="width: 80rpx;height: 14rpx;position: absolute;bottom: 12rpx;left: 32rpx;" />
</view>
<view class="tabs1" @tap="checkTab1('paotui')"
:style="{'color':tab1Checked == 'paotui'?'#000':'#777','font-size':tab1Checked== 'paotui'?'36rpx':'30rpx'}">
快递/跑腿
<img v-if="tab1Checked == 'paotui'"
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4bb5fc7725cb4a7a84d1d3a15f05b39c.png" alt=""
style="width: 180rpx;height: 14rpx;position: absolute;bottom: 12rpx;left: 32rpx;" />
</view>
<view class="tabs1" @tap="checkTab1('ershou')"
:style="{'color':tab1Checked == 'ershou'?'#000':'#777','font-size':tab1Checked== 'ershou'?'36rpx':'30rpx'}">
二手
<img v-if="tab1Checked == 'ershou'"
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4bb5fc7725cb4a7a84d1d3a15f05b39c.png" alt=""
style="width: 80rpx;height: 14rpx;position: absolute;bottom: 8rpx;left: 32rpx;" />
</view>
</view>
<view class="tab2">
<view class="tabs2" @tap="checkTabs2(10)" v-if="tab1Checked !='quanbu'"
:style="{'background':tab2Checked==10?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked==10?'#000':'#777'}">
全部</view>
<view class="tabs2" @tap="checkTabs2(0)" v-if="tab1Checked !='quanbu'"
:style="{'background':tab2Checked==0?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked==0?'#000':'#777'}">
待支付</view>
<view class="tabs2" @tap="checkTabs2(1)" v-if="tab1Checked !='quanbu' && tab1Checked == 'fantuan'"
:style="{'background':tab2Checked==1?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked==1?'#000':'#777'}">
待成团</view>
<view class="tabs2" @tap="checkTabs2(2)" v-if="tab1Checked !='quanbu' && tab1Checked == 'fantuan'"
:style="{'background':tab2Checked==2?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked==2?'#000':'#777'}">
待消费</view>
<view class="tabs2" @tap="checkTabs2(3)" v-if="tab1Checked !='quanbu' && tab1Checked != 'ershou'"
:style="{'background':tab2Checked==3?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked==3?'#000':'#777'}">
待接单</view>
<view class="tabs2" @tap="checkTabs2(4)" v-if="tab1Checked !='quanbu' && tab1Checked != 'ershou'"
:style="{'background':tab2Checked==4?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked==4?'#000':'#777'}">
待取货</view>
<view class="tabs2" @tap="checkTabs2(5)" v-if="tab1Checked !='quanbu' && tab1Checked != 'ershou'"
:style="{'background':tab2Checked==5?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked==5?'#000':'#777'}">
待送达</view>
<view class="tabs2" @tap="checkTabs2(6)" v-if="tab1Checked !='quanbu'"
:style="{'background':tab2Checked==6?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked==6?'#000':'#777'}">
已完成</view>
<view class="tabs2" @tap="checkTabs2(7)" v-if="tab1Checked !='quanbu'"
:style="{'background':tab2Checked==7?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked==7?'#000':'#777'}">
待退款</view>
<view class="tabs2" @tap="checkTabs2(8)" v-if="tab1Checked !='quanbu'"
:style="{'background':tab2Checked==8?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked==8?'#000':'#777'}">
已退款</view>
<view class="tabs2" @tap="checkTabs2(9)" v-if="tab1Checked !='quanbu'"
:style="{'background':tab2Checked==9?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked==9?'#000':'#777'}">
已取消</view>
<view class="tabs2" @tap="checkTabs2(11)" v-if="tab1Checked !='quanbu'"
:style="{'background':tab2Checked==11?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked==8?'#000':'#777'}">
售后中</view>
<view class="tabs2" @tap="checkTabs2(12)" v-if="tab1Checked !='quanbu'"
:style="{'background':tab2Checked==12?'rgba(166, 255, 234, 1)':'#F5F5F5','color':tab2Checked==9?'#000':'#777'}">
已售后</view>
</view>
</view>
<view class="content">
<view class="box1" v-for="(item,index) in orderList" :key="index">
<view class="ziqu-xuanfu" v-if="item.status == 0" style="background:red">
待支付
</view>
<view class="ziqu-xuanfu" v-if="item.status == 10" style="background:rgba(166, 255, 234, 1)">
待成团
</view>
<view class="ziqu-xuanfu" v-if="item.status == 2" style="background:rgba(166, 255, 234, 1)">
待骑手接单
</view>
<view class="ziqu-xuanfu" v-if="item.status == 3 && item.deliveryType == 1" style="background:rgba(166, 255, 234, 1)">
待取货
</view>
<view class="ziqu-xuanfu" v-if="item.status == 3 && item.deliveryType == 2" style="background:rgba(166, 255, 234, 1)">
待消费
</view>
<view class="ziqu-xuanfu" v-if="item.status == 4" style="background:rgba(255, 193, 236, 1)">
待送达
</view>
<view class="ziqu-xuanfu" v-if="item.status == 5">
已完成
</view>
<view class="ziqu-xuanfu" v-if="item.status == 6">
已取消
</view>
<view class="ziqu-xuanfu" v-if="item.status == 7">
待同意退款
</view>
<view class="ziqu-xuanfu" v-if="item.status == 8">
已退款
</view>
<view class="ziqu-xuanfu" v-if="item.status == 11">
售后中
</view>
<view class="ziqu-xuanfu" v-if="item.status == 12">
已售后
</view>
<view style="width: 100%;line-height: 70rpx;font-size: 28rpx;font-weight: 700;display: flex;">
<view style="height: 40rpx;line-height: 40rpx;background: linear-gradient(90deg, rgba(255, 77, 0, 1), rgba(255, 184, 84, 1));padding: 0 16rpx;border-radius: 40rpx;color: #fff;margin: 14rpx 20rpx 0 0;">
{{item.otherOrder == 1 ? '快递/跑腿' : item.otherOrder == 2 ? '二手' :"饭团"}}
</view>
{{item.otherOrder == 1 ? '快递/跑腿' : item.otherOrder == 2 ? '二手物品': item.shopName}}
</view>
<view v-if="item.otherOrder == 1 || item.otherOrder == 2" style="display: flex;padding: 20rpx;background: #F5F5F5;border-radius: 20rpx;">
<view class="goods-img">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4130b6a412584c71949b3a03e5834453.png" alt="">
<!-- <view class="jiaobiao">
快递
</view> -->
</view>
<view class="goods-content">
<view class="goods-name" style="font-size: 24rpx;line-height: 50rpx;display: flex;">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1f77398a73454a6595c12a3c18731599.png" alt="" style="width: 50rpx;height: 50rpx;" />
{{item.shopAddress}}
</view>
<view class="goods-name" style="font-size: 24rpx;line-height: 50rpx;display: flex;margin-top: 14rpx;">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d0764fb4138747769538cf1cafa3b017.png" alt="" style="width: 50rpx;height: 50rpx;" />
{{item.receiverAddress}}
</view>
<view class="goods-content-bottom">
下单时间:{{item.createTime | formatTime}}
</view>
</view>
</view>
<view v-else style="display: flex;padding: 20rpx;background: #F5F5F5;border-radius: 20rpx;" v-for="(item1,index1) in item.goodsList" :key="index1" v-if="item.goodsList != null && item.goodsList.length > 0">
<view class="goods-img">
<img :src="item1.productPicture" alt="">
</view>
<view class="goods-content">
<view class="goods-name">
{{item1.productName}}
</view>
<view class="goods-content-center">
<view>
{{item1.specs == null ? '' : item1.specs}}
</view>
</view>
<view class="goods-content-bottom">
<view style="width: 45%;">
X{{item1.quantity}}
</view>
<view class="pintuan-left-price">
¥{{item1.price}}
</view>
</view>
</view>
</view>
<view style="height: 100rpx;border-bottom: 1px solid #F5F5F5;display: flex;line-height: 100rpx;">
<view style="font-size: 24rpx;font-weight: 700;">
实付<text v-if="tab1Checked == 'fantuan'" style="font-size: 20rpx;color: #777;">(含包装/配送费)</text> <text
style="color: red;">¥{{item.totalAmount}}</text>
<text class="goods-content-bottom" style="float: right;" v-if="item.otherOrder == null">
下单时间:{{item.createTime | formatTime}}
</text>
</view>
</view>
<view class="bottom-btn">
<!-- <view class="btn1" v-if="orderStatus(item)" @tap="returnPopupProp(item)">
取消订单
</view> -->
<view class="btn1" v-if="item.status == 0" @tap="payAgain(item)"
style="background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));color: #000;">
去支付
</view>
<view class="btn1" style="background: rgba(166, 255, 234, 0.3);color: #000;" @tap.stop="orderDetail(item.id)">
查看订单
</view>
<view @tap.stop="goEvaluate(item)" v-if="item.status == 5" class="btn1" style="background: rgba(166, 255, 234, 0.3);color: #000;">
去评价
</view>
<!-- <view class="btn1">
删除订单
</view> -->
</view>
</view>
<!-- 支付弹出层 -->
<uni-popup ref="payPopup" background-color="#fff">
<view class="pay-popup" style="height: 250px;background: #fff;border-radius: 40rpx 40rpx 0 0;padding-top: 40rpx;">
<view class="content" style="height: 100%;margin-top:0;top:0">
<view class="box1">
<view
style="height: 90rpx;line-height: 90rpx;text-align: center;font-weight: 700;font-size: 30rpx;">
¥<text
style="font-size: 60rpx;">{{payData.totalAmount ? payData.totalAmount.toFixed(2) : '0.00'}}</text>
</view>
<view style="height: 40rpx;text-align: center;color: #777;">
<text v-if="payData.groupInfo && payData.orderType == 3 && payData.deliveryType == 1">配送费(均摊) {{payData.deliveryFee}} 元 </text>
<text v-if="(payData.deliveryFee != null && payData.deliveryFee > 0) && payData.orderType != 3 && payData.deliveryType == 1">配送费 {{payData.deliveryFee}} 元 </text>
<text v-if="payData.packageFee > 0"> 打包费 {{payData.packageFee}} 元</text>
</view>
<view style="height: 40rpx;text-align: center;color: red;" v-if="payData.groupInfo">
若拼团失败,将会为您自动退款
</view>
</view>
<view class="box1" style="display: flex;padding: 40rpx;">
<view style="flex: 1;">
<view style="height: 42rpx;line-height: 42rpx;display: flex;">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4c8e0cc311db4d38ab43e019673c4b8c.png"
alt="" style="width: 42rpx;height: 42rpx;margin-right: 20rpx;" />
<text style="font-size: 30rpx;font-weight: 700;">微信支付</text>
</view>
<view style="text-align: right;margin-left: 60rpx;color: #777;width: 146rpx;">
使用微信支付
</view>
</view>
<view style="width: 36rpx;padding-top: 20rpx;">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/02bff7edc4e04caaa1868955ff684f1f.png"
alt="" style="width: 36rpx;height: 36rpx;" />
</view>
</view>
<view class="btn" style="background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));width: 90%;height: 100rpx;border-radius: 100rpx;text-align: center;font-size: 28rpx;font-weight: 700;line-height: 100rpx;margin: 40rpx auto;" @tap="wxPayment">
确认付款
</view>
</view>
</view>
</uni-popup>
<uni-popup ref="returnPopup" background-color="#fff" style="height: 1600rpx !important;">
<view class="car-content">
<view class="car-close">
<uni-icons type="close" size="30" color="#fff"></uni-icons>
</view>
<view class="car-title">
选择退款原因
</view>
<view class="">
<view class="">
全额退款(商家原因)
<radio :checked="sellTime==2" name="sellTime" @click="checkSellTime(2)" />
</view>
<view class="">
全额退款(配送员原因)
<radio :checked="sellTime==3" name="sellTime" @click="checkSellTime(3)" />
</view>
<view class="">
全额退款(商家+配送员原因)
<radio :checked="sellTime==4" name="sellTime" @click="checkSellTime(4)" />
</view>
</view>
</view>
<view class="guize-list">
<view style="height: 80rpx;line-height: 80rpx;font-size: 36rpx;font-weight: 700;text-align: center;">
确定要取消订单吗
<text v-if="((payData.orderType == 2 || payData.orderType == 3) && payData.status == 2) || payData.status == 3 || payData.status == 4">取消订单需要商家同意</text>
<view v-if="(payData.status == 3 && payData.deliveryType ==1) || payData.status == 4">
<text v-if="payData.shopMakeTime == null">商家还未出餐</text>
<text v-else>本单商家备餐时长共计{{shopTime}} 配送员配送时长共计{{peisongTime}}</text>
</view>
</view>
<view class="btn" @tap="returnOrder()">
确认取消
</view>
</view>
</uni-popup>
<uni-load-more :status="loadStatus" @change="onChange" />
</view>
</view>
</template>
<script>
export default {
data() {
return {
loadStatus: 'more',
tab1Checked: 'quanbu',
tab2Checked: 10,
totalPages: 1,
pageNum:1,
shopTime:'',
peisongTime:'',
sellTime:2,
refundType:2,
refundTypeStatus:1,
payData:{},
orderList:[],
searchForm:{
pageNum:1,
pageSize:10,
shopName:'',
searchType:0,
userId:uni.getStorageSync('id'),
regionId:JSON.parse(uni.getStorageSync('area')).id
},
menuButtonInfo: {}
}
},
onReachBottom() {
if (this.searchForm.pageNum >= this.totalPages) return;
// this.status = 'loading';
this.searchForm.pageNum++;
this.getOrderList();
},
filters: {
formatHourMinute(value) {
if (!value) return '';
const date = new Date(value);
// 获取日 (getDate),并补齐0
const day = String(date.getDate()).padStart(2, '0');
// 获取小时 (getHours),并补齐0
const hour = String(date.getHours()).padStart(2, '0');
// 获取分钟 (getMinutes),并补齐0
const minute = String(date.getMinutes()).padStart(2, '0');
// 拼接格式:日-日-时:分
return `${day}-${hour}:${minute}`;
},
formatTime(value) {
if (!value) return '';
if(value == '尽快送达') return '尽快送达';
const date = new Date(value);
// 获取年份
const year = date.getFullYear();
// 获取月份 (getMonth 返回 0-11,所以需要 +1),并补齐0
const month = String(date.getMonth() + 1).padStart(2, '0');
// 获取日 (getDate),并补齐0
const day = String(date.getDate()).padStart(2, '0');
// 获取小时 (getHours),并补齐0
const hour = String(date.getHours()).padStart(2, '0');
// 获取分钟 (getMinutes),并补齐0
const minute = String(date.getMinutes()).padStart(2, '0');
// 获取秒 (getSeconds),并补齐0
const second = String(date.getSeconds()).padStart(2, '0');
// 拼接格式:年-月-日 时:分:秒
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
}
},
onLoad(option) {
},
onShow() {
this.getOrderList()
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
},
methods: {
checkTab1(type) {
this.tab1Checked = type
if(type == 'quanbu'){
this.searchForm.searchType = 0
}else if(type == 'fantuan'){
this.searchForm.searchType = 1
}else if(type == 'paotui'){
this.searchForm.searchType = 2
}else if(type == 'ershou'){
this.searchForm.searchType = 3
}
this.searchForm.pageNum = 1
this.getOrderList()
},
checkSellTime(type){
this.sellTime = type;
if(this.sellTime == 2){
//this.returnData.refundAmount = this.orderDetail.totalAmount
this.refundType = 3
this.refundTypeStatus = 1
}else if(this.sellTime == 3){
//this.returnData.refundAmount = this.orderDetail.totalAmount
this.refundType = 3
this.refundTypeStatus = 2
}else{
//this.returnData.refundAmount = this.orderDetail.totalAmount
this.refundType = 3
this.refundTypeStatus = 3
}
},
goSearch(){
this.searchForm.pageNum = 1
this.getOrderList()
},
wxPayment() {
let that = this;
if (!this.payData.id || !this.payData.totalAmount) return;
let amountInCents = Math.round(Number(this.payData.totalAmount) * 100);
this.tui.request("/api/wechat/pay/unified-order", "POST", {
openid: uni.getStorageSync('miniProgramOpenid') || 'test-openid',
amount: amountInCents,
description: '商城订单',
outTradeNo: this.payData.id
}, 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) {
uni.showToast({ title: '支付成功', icon: 'success' });
that.tui.request("/api/wechat/pay/paySuccess", "POST", {
outTradeNo: that.payData.id
}, false, false).then((res3) => {
if(res3.code == 200){
uni.redirectTo({
url: '/package1/order/orderDetail?id=' + that.payData.id
});
}else{
that.tui.toast("订单创建失败,请联系客服处理");
}
})
},
fail: function(err) {
that.tui.toast("支付失败或取消");
}
});
}
})
},
orderStatus(item){
if(item.status == 0 || item.status == 10 || item.status == 2 || (item.status == 3 && item.deliveryType == 1) || (item.status == 3 && item.deliveryType == 2) || item.status == 4){
return true;
}
return false;
},
orderDetail(id){
uni.redirectTo({
url: '/package1/order/orderDetail?id=' + id
});
},
goEvaluate(item){
uni.navigateTo({
url: '/package1/order/orderEvaluate?item=' + JSON.stringify(item)
});
},
checkTabs2(type) {
this.tab2Checked = type;
this.searchForm.searchStatus = type;
this.searchForm.pageNum = 1
this.getOrderList();
},
payAgain(item){
this.payData = item;
this.$refs.payPopup.open('bottom');
},
getOrderList(){
this.loadStatus = 'loading'
let that = this
that.tui.request("/mall/order/page", "POST", this.searchForm, false, false).then((res) => {
that.loadStatus = 'nomore';
if (res.code == 200) {
if (that.searchForm.pageNum == 1) {
that.orderList = res.result.records;
} else {
that.orderList = [...that.orderList, ...res.result.records]
}
console.log(that.orderList)
that.totalPages = res.result.pages; // pages = 总页数
that.$forceUpdate();
} else {
that.tui.toast(res.message);
return;
}
uni.hideLoading();
}).catch((res) => {});
},
returnPopupProp(item){
this.payData = item;
if(this.payData.shopMakeTime != null){
const date1 = new Date(this.payData.deliveryInfo.acceptTime);
const date2 = new Date(this.payData.shopMakeTime);
// 2. 计算毫秒差值 (取绝对值,防止结果为负数)
let diffMs = Math.abs(date2 - date1);
// 3. 数学换算
// 1秒 = 1000毫秒
// 1分 = 60秒
// 1时 = 60分
const seconds = Math.floor((diffMs / 1000) % 60);
const minutes = Math.floor((diffMs / (1000 * 60)) % 60);
const hours = Math.floor(diffMs / (1000 * 60 * 60));
// 4. 格式化输出 (可选:补零操作,例如 9秒 -> 09秒)
const fmt = (num) => num.toString().padStart(2, '0');
this.shopTime = `${fmt(hours)}时${fmt(minutes)}分${fmt(seconds)}秒`;
const date3 = new Date();
// 2. 计算毫秒差值 (取绝对值,防止结果为负数)
let diffMs1 = Math.abs(date3 - date2);
// 3. 数学换算
// 1秒 = 1000毫秒
// 1分 = 60秒
// 1时 = 60分
const seconds1 = Math.floor((diffMs1 / 1000) % 60);
const minutes1 = Math.floor((diffMs1 / (1000 * 60)) % 60);
const hours1 = Math.floor(diffMs1 / (1000 * 60 * 60));
this.peisongTime = `${fmt(hours1)}时${fmt(minutes1)}分${fmt(seconds1)}秒`;
}
this.$refs.returnPopup.open('bottom');
},
returnOrder(){
this.$refs.returnPopup.close();
let item = this.payData
let that = this
that.tui.request("/mall/order/cancel", "POST", {refundType:this.refundType,refundTypeStatus:this.refundTypeStatus,orderId:item.id,userId:uni.getStorageSync('id')}, false, true).then((res) => {
if (res.code == 200) {
that.tui.toast("取消订单成功");
that.searchForm.pageNum = 1
that.getOrderList()
that.$forceUpdate();
} else {
that.tui.toast(res.message);
return;
}
uni.hideLoading();
}).catch((res) => {});
},
back() {
uni.navigateBack()
}
}
}
</script>
<style lang="scss">
page {
width: 100%;
min-height: 100%;
font-size: 24rpx;
background: #F5F8F5;
color: #00231C;
}
.page1 {
width: 100%;
min-height: 100vh;
font-size: 24rpx;
position: relative;
display: flex;
flex-direction: column;
}
.title {
flex-shrink: 0;
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
background-size: 100%;
width: 100%;
height: 400rpx;
padding-bottom: 20rpx;
}
.title-sreach {
width: 75%;
display: flex;
height: 200rpx;
}
.back-btn {
padding-top: 110rpx;
}
.title-search {
margin-top: 110rpx;
display: flex;
background: #fff;
height: 54rpx;
margin-left: 20rpx;
border-radius: 54rpx;
width: 380rpx;
flex: 1;
input {
height: 54rpx;
line-height: 54rpx;
}
}
.nav-tab {
flex-shrink: 0;
position: absolute;
top: 200rpx;
left: 2.5%;
background: #fff;
width: 95%;
border-radius: 20rpx;
padding: 20rpx;
}
.content {
flex: 1;
width: 95%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
position: absolute;
top: 450rpx;
left: 2.5%;
}
.tab1 {
height: 80rpx;
line-height: 80rpx;
display: flex;
}
.tabs1 {
position: relative;
font-size: 30rpx;
font-weight: 700;
color: #777;
padding: 0 30rpx;
}
.tab2 {
height: 70rpx;
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
margin-top: 20rpx;
white-space: nowrap;
}
.tabs2 {
width: 156rpx;
height: 70rpx;
line-height: 70rpx;
text-align: center;
background: #F5F5F5;
border-radius: 20rpx;
font-weight: 700;
margin-right: 20rpx;
display: inline-block;
-webkit-overflow-scrolling: touch;
}
.ziqu-xuanfu {
position: absolute;
top: 0;
right: 0;
background: #F5F5F5;
border-top-right-radius: 20rpx;
border-bottom-left-radius: 20rpx;
font-weight: 700;
height: 56rpx;
width: 120rpx;
text-align: center;
line-height: 56rpx;
color: #fff;
}
.box1 {
width: 100%;
margin: 0 auto 20rpx;
background: #fff;
border-radius: 20rpx;
padding: 20rpx;
position: relative;
}
.goods-img {
width: 160rpx;
height: 160rpx;
position: relative;
background: #fff;
border-radius: 20rpx;
img {
width: 100%;
background-size: 100%;
height: 100%;
}
}
.goods-content {
flex: 1;
padding-left: 20rpx;
}
.goods-name {
font-size: 32rpx;
font-weight: 900;
}
.goods-content-center {
display: flex;
margin: 16rpx 0;
color: #777;
}
.pintuan-left-price {
width: 55%;
text-align: right;
font-weight: 700;
color: #000;
}
.goods-content-bottom {
display: flex;
line-height: 56rpx;
color: #777;
}
.btn1 {
width: 140rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
margin-top: 20rpx;
background: #F5F5F5;
border-radius: 60rpx;
color: #777;
font-weight: 700;
float: right;
margin-left: 20rpx;
}
.bottom-btn {
height: 80rpx;
}
.jiaobiao{
width:76rpx;
height:40rpx;
background:rgba(227, 255, 150, 1);
font-weight:700;
position: absolute;
top: 0;
left: 0;
border-top-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;
text-align: center;
line-height: 40rpx;
}
.vue-ref{
border-radius: 10px !important;
}
.guize-list {
width: 600rpx;
padding: 20rpx;
overflow: scroll;
background: #fff;
border-radius: 20rpx;
max-height: 1000rpx;
}
</style>