web-africa-h5/pages/order/store.vue

1167 lines
32 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view>
<u-navbar
placeholder
:title="$t('fn_001')"
:bgColor="'#FB3024'"
titleStyle="color:#fff"
leftIconColor="#fff"
leftIcon="arrow-left"
@leftClick="goBack"
>
<button class="nav-right-btn" slot="right" @click="openPop()">
{{ $t("MY_ORD_50") }}
</button>
</u-navbar>
<view class="top-tabbar">
<view
:class="state_active == -1 ? 'tab-item active' : 'tab-item'"
@click="stateFunc(-1)"
>{{ $t("fn_001") }}</view
>
<view
v-for="(item, index) in orderStatus"
:key="index"
:class="state_active == item.value ? 'tab-item active' : 'tab-item'"
@click="stateFunc(item.value)"
>
<!-- {{ $t("ENU_ORDER_S_" + item.value) }} -->
{{ item.label }}
<text v-if="item.value == 0">({{ orderCount.waitPayNum }})</text>
<!-- <text v-if="item.value == 1">({{ orderCount.payNum }})</text> -->
</view>
</view>
<view class="listdata-list">
<view
v-for="(item, index) in listData"
:key="index"
class="listdata-item"
>
<view class="border-b">
<view class="d-b-c mb16">
<text class="type-btn" v-if="serchStatus == -1">{{
item.orderTypeVal
}}</text>
<view class="f24 gray9 flex-1">
{{ $t("MY_ORD_1") }}:
<text selectable>{{ item.orderCode }}</text>
</view>
<view class="status-btn">{{ item.orderStatusVal }}</view>
</view>
<view class="d-b-c">
<!-- 单个商品 -->
<template
v-if="
item.storeOutBiExtList &&
item.storeOutBiExtList.length == 1 &&
(serchStatus == 1 || serchStatus == 3 || serchStatus == 6)
"
>
<view>
<view
class="d-s-c flex-1"
v-for="(items, indexs) in item.storeOutBiExtList"
:key="indexs"
>
<image class="product-img" :src="items.cover" mode=""></image>
<view class="text-ellipsis f28 gray3" style="width: 220rpx">{{
items.productName
}}</view>
</view>
</view>
</template>
<template v-if="item.itemList && item.itemList.length == 1">
<view>
<view
class="d-s-c flex-1"
v-for="(items, indexs) in item.itemList"
:key="indexs"
>
<image class="product-img" :src="items.cover" mode=""></image>
<view class="text-ellipsis f28 gray3" style="width: 220rpx">{{
items.productName
}}</view>
</view>
</view>
</template>
<!-- 多个商品 -->
<template
v-if="
item.storeOutBiExtList &&
item.storeOutBiExtList.length > 1 &&
(serchStatus == 1 || serchStatus == 3 || serchStatus == 6)
"
>
<view class="d-c-c product-list ww100">
<image
class="product-img"
:src="pitem.cover"
mode=""
v-for="(pitem, pindex) in item.storeOutBiExtList"
:key="pindex"
></image>
</view>
</template>
<template v-if="item.itemList && item.itemList.length > 1">
<view class="d-c-c product-list ww100">
<image
class="product-img"
:src="pitem.cover"
mode=""
v-for="(pitem, pindex) in item.itemList"
:key="pindex"
></image>
</view>
</template>
<view class="d-c d-c-e" v-if="serchStatus == -1">
<view class="price-color f24">
{{ currencyIcon() }}
<text class="f32">{{ formatNum(item.orderAmount) }}</text>
</view>
<view class="gray6">x{{ item.itemList.length }}</view>
</view>
<view
class="d-c d-c-e"
v-if="serchStatus == 1 || serchStatus == 3 || serchStatus == 6"
>
<view class="f24"
>x{{
item.storeOutBiExtList &&
item.storeOutBiExtList[0].productCode
}}</view
>
<view class="f24">
<text class="f24">{{
item.storeOutBiExtList && item.storeOutBiExtList[0].specsName
}}</text>
</view>
<view class="gray6 f24"
>x{{
item.storeOutBiExtList && item.storeOutBiExtList[0].quantity
}}</view
>
</view>
</view>
<view class="f24 gray9 mb20" v-if="serchStatus == -1"
>{{ $t("MY_ORD_3") }}:{{ item.creationTime }}</view
>
<view class="f24 gray9 mb20" v-if="serchStatus == -1"
>{{ $t("MN_F_T_140") }}:{{ item.deliveryWayVal }}</view
>
<view
class="f24 gray9 mb20"
v-if="serchStatus == 1 || serchStatus == 3 || serchStatus == 6"
>{{ $t("MY_ORD_3") }}:{{ item.payTime }}</view
>
<view
class="f24 gray9 mb20"
v-if="serchStatus == 6 || serchStatus == 1"
>{{ $t("fn_170") }}:{{ item.storeName }}</view
>
</view>
<view class="d-e-c pt20">
<!-- <view class="order-border-btn" v-if="item.orderStatus == 0" @click="cancelOrder(item.orderCode)">{{ $t('ENU_APPROVE_B_234') }}</view> -->
<!-- <view class="order-border-btn">备注</view> -->
<!-- <view class="order-btn">修改地址</view> -->
<!-- <view class="order-btn" v-if="item.orderStatus == 0" @click="gotoPage('/pages/order/cashier?orderCode=' + item.orderCode + '&specialArea=' + item.orderType)">
{{ $t('w_0312') }}
</view> -->
<!-- <view class="order-btn" v-if="item.orderStatus == 3 || item.orderStatus == 5" @click="gotoPage('pages/order/express/express?orderCode=' + item.orderCode)">
{{ $t('MY_ORD_19') }}
</view> -->
<!-- <view
class="order-btn"
v-if="item.orderStatus == 1"
@click="confirmReceipt(item.orderCode)"
>{{ $t("MN_F_36") }}</view
> -->
<view class="order-btn" @click="openDetail(item)">{{
$t("MY_CK_18")
}}</view>
<view
class="order-btn"
v-if="serchStatus == 1"
@click="storeSend(item)"
>{{ $t("fn_165") }}</view
>
<view
class="order-btn"
v-if="serchStatus == 3"
@click="storeReceive(item)"
>{{ $t("fn_171") }}</view
>
</view>
</view>
</view>
<view
class="d-c-c p30"
v-if="listData.length == 0 && !loading && serchStatus != 7"
>
<text class="iconfont icon-wushuju"></text>
<text class="cont">{{ $t("w_0405") }}</text>
</view>
<uni-load-more
v-else-if="serchStatus != 7"
:loadingType="loadingType"
></uni-load-more>
<view class="wallet-list" v-if="serchStatus == 7 && serchStatus != -1">
<view class="bonus-item" v-for="(item, index) in tableData" :key="index">
<view class="bonus-item-item">
<view class="bonus-item-name f26 gray9"
>{{ $t("MN_F_T_1207") }}</view
>
<view class="bonus-item-content f26 gray3">{{ item.storeName }}</view>
</view>
<view class="bonus-item-item">
<view class="bonus-item-name f26 gray9">{{ $t("MN_F_40") }}</view>
<view class="bonus-item-content f26 gray3">{{
item.productCode
}}</view>
</view>
<view class="bonus-item-item">
<view class="bonus-item-name f26 gray9">{{ $t("MN_F_39") }}</view>
<view class="bonus-item-content f26 gray3">{{
item.productName
}}</view>
</view>
<view class="bonus-item-item">
<view class="bonus-item-name f26 gray9">{{ $t("MN_F_41") }}</view>
<view class="bonus-item-content f26 gray3">{{
item.storeHandSpecsList[0].specsName
}}</view>
</view>
<view class="bonus-item-item">
<view class="bonus-item-name f26 gray9">{{ $t("MN_F_43") }}</view>
<view class="bonus-item-content f26 gray3">{{
parseInt(item.nonhandnum, 10)
}}</view>
</view>
</view>
</view>
<view
class="d-c-c p30"
v-if="listData.length == 0 && !loading && serchStatus == 7"
>
<text class="iconfont icon-wushuju"></text>
<text class="cont">{{ $t("w_0405") }}</text>
</view>
<uni-load-more
v-else-if="serchStatus == 7"
:loadingType="loadingType"
></uni-load-more>
<!-- 筛选 -->
<u-popup :show="showPop" mode="right" @close="closePop" @open="openPop">
<view class="pop-content rightpop" v-if="serchStatus != 7">
<view class="pop-title d-b-c">
<view class="f28 gray3">{{ $t("MY_ORD_50") }}</view>
<view class="f28 domation" @click="closePop">{{
$t("N_I_241")
}}</view>
</view>
<view class="right-item-title">{{ $t("MY_ORD_1") }}</view>
<view style="padding: 0 24rpx">
<view class="search-box">
<u-icon name="search" size="36rpx" color="#999"></u-icon>
<input
v-model="form.orderCode"
class="search-input"
type="text"
value=""
:placeholder="$t('S_C_70') + $t('MY_ORD_1')"
/>
</view>
</view>
<view v-if="serchStatus == -1" class="right-item-title">{{
$t("N_I_124")
}}</view>
<view v-if="serchStatus == -1" style="padding: 0 24rpx">
<view class="search-box">
<u-icon name="search" size="36rpx" color="#999"></u-icon>
<input
v-model="form.memberCode"
class="search-input"
type="text"
value=""
:placeholder="$t('w_0046')"
/>
</view>
</view>
<view class="right-item-title">{{ $t("MY_ORD_2") }}</view>
<view class="checkbox-list">
<view
v-for="(item, index) in orderType"
:key="index"
class="checkbox-item"
:class="{ active: form.orderType == item.value }"
@click="bindStatus(item)"
>
{{ item.label }}
</view>
</view>
<view v-if="serchStatus == -1" class="right-item-title">{{
$t("MN_F_T_140")
}}</view>
<view v-if="serchStatus == -1" class="checkbox-list">
<view
v-for="(item, index) in deliveryList"
:key="index"
class="checkbox-item"
:class="{ active: form.deliveryWay == item.value }"
@click="bindDeliveryWay(item)"
>
{{ item.label }}
</view>
</view>
<view class="right-item-title">{{ $t("w_0352") }}</view>
<view class="d-c-c">
<picker
v-if="serchStatus == -1"
mode="date"
:value="date1"
:start="creationTimeStart"
:end="creationTimeEnd"
@change="bindDateChange1"
>
<view class="data-input">{{
form.creationTimeStart || $t("CK_KS_3")
}}</view>
</picker>
<picker
v-if="serchStatus == 1 || serchStatus == 3 || serchStatus == 6"
mode="date"
:value="dates1"
:start="startTime"
:end="endTime"
@change="bindDateChanges1"
>
<view class="data-input">{{
form.startTime || $t("CK_KS_3")
}}</view>
</picker>
<view
style="
width: 30rpx;
height: 1rpx;
background-color: #333;
margin: 0 24rpx;
"
></view>
<picker
v-if="serchStatus == -1"
mode="date"
:value="date2"
:start="creationTimeStart"
:end="creationTimeEnd"
@change="bindDateChange2"
>
<view class="data-input">{{
form.creationTimeEnd || $t("MN_T_7")
}}</view>
</picker>
<picker
v-if="serchStatus == 1 || serchStatus == 3 || serchStatus == 6"
mode="date"
:value="dates2"
:start="startTime"
:end="endTime"
@change="bindDateChanges2"
>
<view class="data-input">{{ form.endTime || $t("MN_T_7") }}</view>
</picker>
</view>
<view class="pop-btns">
<view class="pop-left-btn" @click="resetSubmit()">{{
$t("w_0257")
}}</view>
<view class="pop-right-btn" @click="searchSubmit()">{{
$t("w_0035")
}}</view>
</view>
</view>
<view class="pop-content rightpop" v-if="serchStatus == 7">
<view class="pop-title d-b-c">
<view class="f28 gray3">{{ $t("MY_ORD_50") }}</view>
<view class="f28 domation" @click="closePop">{{
$t("N_I_241")
}}</view>
</view>
<view class="right-item-title">{{ $t("MN_F_40") }}</view>
<view style="padding: 0 24rpx">
<view class="search-box">
<u-icon name="search" size="36rpx" color="#999"></u-icon>
<input
v-model="form.productCode"
class="search-input"
type="text"
value=""
:placeholder="$t('S_C_70') + $t('MN_F_40')"
/>
</view>
</view>
<view class="right-item-title">{{ $t("MN_F_39") }}</view>
<view style="padding: 0 24rpx">
<view class="search-box">
<u-icon name="search" size="36rpx" color="#999"></u-icon>
<input
v-model="form.productName"
class="search-input"
type="text"
value=""
:placeholder="$t('S_C_70') + $t('MN_F_39')"
/>
</view>
</view>
<view class="pop-btns">
<view class="pop-left-btn" @click="resetSubmits()">{{
$t("w_0257")
}}</view>
<view class="pop-right-btn" @click="searchSubmits()">{{
$t("w_0035")
}}</view>
</view>
</view>
</u-popup>
<Detail
:detail="detailModel"
:isPop="isDetail"
:serchStatus="serchStatus"
:opento="opento"
@close="closeDetail"
></Detail>
</view>
</template>
<script>
import uniLoadMore from "@/components/uni-load-more.vue";
import Detail from "./detail.vue";
export default {
components: {
uniLoadMore,
Detail,
},
data() {
const currentDate = this.getDate({
format: true,
});
return {
/*最后一页码数*/
last_page: 0,
/*当前页面*/
page: 1,
/*每页条数*/
list_rows: 10,
/*有没有等多*/
no_more: false,
/*是否正在加载*/
loading: true,
listData: [],
showPop: false,
date1: "",
dates1: "",
date2: "",
dates2: "",
searchtype: 0,
opento:true,
form: {
orderCode: "",
memberCode: "",
pageNum: 1,
pageSize: 10,
orderType: "",
deliveryWay: "",
orderStatus: "",
creationTimeStart: "",
startTime: "",
endTime: "",
creationTimeEnd: "",
},
total: 0,
orderCount: {
waitPayNum: 0,
payNum: 0,
},
/*状态选中*/
state_active: -1,
orderType: [],
deliveryList: [],
isDetail: false,
detailModel: null,
orderStatus: [],
serchStatus: -1,
tableData: [],
};
},
onLoad(e) {
this.form.orderStatus = e.dataType >= 0 ? e.dataType : -1;
this.state_active = e.dataType >= 0 ? e.dataType : -1;
this.getOrderNumData();
this.getDeliveryList();
// this.memberStoreSummary();
this.getOrderTypeData();
// this.getData();
},
onShow() {
/*获取数据*/
this.listData = [];
this.form.pageNum = 1;
// this.getOrderStatus();
this.getOrderStatus1();
if (this.serchStatus == 1) {
this.getSendData();
} else if (this.serchStatus == 3) {
this.getReceiveData();
} else if (this.serchStatus == 6) {
this.getStoreOrderData();
} else if (this.serchStatus == 7) {
this.getNumberList();
} else {
this.tableData = [];
this.getData();
}
},
onReachBottom() {
let self = this;
if (self.form.pageNum * self.form.pageSize < self.total) {
self.form.pageNum++;
self.getData();
}
self.no_more = true;
},
computed: {
/*加载中状态*/
loadingType() {
if (this.loading) {
return 1;
} else {
if (this.listData.length != 0 && this.no_more) {
return 2;
} else {
return 0;
}
}
},
creationTimeStart() {
return this.getDate("start");
},
// startTime() {
// if (this.serchStatus == 1) {
// return this.getSendData("start");
// } else if (this.serchStatus == 3) {
// return this.getReceiveData("start");
// } else if (this.serchStatus == 6) {
// return this.getStoreOrderData("start");
// }
// },
// endTime() {
// if (this.serchStatus == 1) {
// return this.getSendData("end");
// } else if (this.serchStatus == 3) {
// return this.getReceiveData("end");
// } else if (this.serchStatus == 6) {
// return this.getStoreOrderData("end");
// }
// },
creationTimeEnd() {
return this.getDate("end");
},
},
methods: {
getOrderStatus1() {
let self = this;
self._get("/system/pub/enums/order-shop-status-api", {}, (res) => {
self.orderStatus = res.data;
self.orderStatus.push({
label: this.$t("fn_169"),
value: 7,
});
console.log(this.orderStatusList, "orderStatusList");
});
},
storeSend(row) {
let self = this;
let selecteId = [];
console.log(row, "row");
let selected = row.storeOutBiExtList.forEach((select) => {
selecteId.push(select.pkId);
});
uni.showModal({
title: this.$t("w_0034"),
content: this.$t("fn_154"),
success(o) {
if (o.confirm) {
self._post(
"scm/api/store-out/store-send",
{ itemIdList: selecteId },
(res) => {
/*获取数据*/
self.listData = [];
self.form.pageNum = 1;
self.getSendData();
self.getOrderNumData();
uni.showToast({
title: res.msg,
icon: "none",
});
}
);
}
},
});
},
storeReceive(row) {
let self = this;
let selecteId = [];
let selected = row.storeOutBiExtList.forEach((select) => {
selecteId.push(select.pkId);
});
uni.showModal({
title: this.$t("w_0034"),
content: this.$t("fn_048"),
success(o) {
if (o.confirm) {
self._post(
"scm/api/store-out/store-receive",
{ itemIdList: selecteId },
(res) => {
/*获取数据*/
self.listData = [];
self.form.pageNum = 1;
self.getReceiveData();
self.getOrderNumData();
uni.showToast({
title: res.msg,
icon: "none",
});
}
);
}
},
});
},
// getOrderStatus() {
// let self = this;
// self._get("/system/pub/enums/order-shop-status-api", {}, (res) => {
// self.orderStatus = res.data;
// });
// },
confirmReceipt(id) {
let self = this;
uni.showModal({
title: this.$t("w_0034"),
content: this.$t("fn_154"),
success(o) {
if (o.confirm) {
self._post(
"sale/api/my-order/store-order-delivery",
{ orderCode: id },
(res) => {
/*获取数据*/
self.listData = [];
self.form.pageNum = 1;
self.getData();
self.getReceiveData();
uni.showToast({
title: res.msg,
icon: "none",
});
}
);
}
},
});
},
goBack() {
uni.reLaunch({
url: "/pages/user/index/index",
});
},
closeDetail() {
this.isDetail = false;
this.detailModel = null;
},
openDetail(e) {
console.log(e, "eee");
this.detailModel = e;
this.isDetail = true;
},
/*取消订单*/
cancelOrder(e) {
let self = this;
let order_id = e;
uni.showModal({
title: self.$t("w_0034"),
content: self.$t("MY_ORD_52"),
success: function (o) {
if (o.confirm) {
uni.showLoading({
title: self.$t("MN_F_6"),
});
self._delete("sale/api/my-order/cancel/" + e, {}, function (res) {
self.listData = [];
self.page = 1;
self.getData();
uni.showToast({
title: self.$t("MY_ORD_53"),
duration: 2000,
icon: "success",
});
});
}
},
});
},
/*状态切换*/
stateFunc(e) {
let self = this;
if (self.state_active != e) {
/*获取数据*/
this.listData = [];
self.pageNum = 1;
self.loading = true;
self.state_active = e;
if (e == -1) {
self.form.orderStatus = "";
self.serchStatus = e;
} else {
self.form.orderStatus = e;
self.serchStatus = e;
}
if (e == 1) {
self.getSendData();
} else if (e == 3) {
self.getReceiveData();
} else if (e == 6) {
self.getStoreOrderData();
} else if (e == 7) {
self.getNumberList();
} else {
self.tableData = [];
console.log(e, "e");
self.getData();
}
} else {
return false;
}
},
getOrderNumData() {
let self = this;
self.loading = true;
self._get(
"sale/api/my-order/store-num",
{},
function (res) {
self.orderCount = res.data;
},
{},
() => {
self.loading = false;
}
);
},
getDeliveryList() {
let self = this;
self.loading = true;
self._get(
"system/pub/enums/delivery-list",
{},
function (res) {
self.deliveryList = res.data;
},
{},
() => {
self.loading = false;
}
);
},
getOrderTypeData() {
let self = this;
self.loading = true;
self._get(
"sale/api/my-order/order-type",
{},
function (res) {
self.orderType = res.data;
},
{},
() => {
self.loading = false;
}
);
},
closePop() {
this.showPop = false;
},
openPop() {
this.showPop = true;
},
getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (type === "start") {
year = year - 60;
} else if (type === "end") {
year = year + 2;
}
month = month > 9 ? month : "0" + month;
day = day > 9 ? day : "0" + day;
return `${year}-${month}-${day}`;
},
bindDateChange1: function (e) {
this.form.creationTimeStart = e.detail.value;
},
bindDateChanges1: function (e) {
this.form.startTime = e.detail.value;
},
bindDateChange2: function (e) {
this.form.creationTimeEnd = e.detail.value;
},
bindDateChanges2: function (e) {
this.form.endTime = e.detail.value;
},
getNumberList() {
// return;
let self = this;
self.loading = true;
var formdata = self.form;
self._post("scm/api/store-out/list-store-hand", formdata, function (res) {
self.loading = false;
self.tableData = res.rows;
self.total = res.total;
if (self.total < self.form.pageNum * self.form.pageSize) {
self.no_more = true;
}
});
},
getSendData() {
// return;
let self = this;
self.loading = true;
var formdata = self.form;
self._post("scm/api/store-out/list-send", formdata, function (res) {
self.loading = false;
self.listData = self.listData.concat(res.rows);
self.listData.sort((a, b) => new Date(b.payTime) - new Date(a.payTime));
self.total = res.total;
if (self.total < self.form.pageNum * self.form.pageSize) {
self.no_more = true;
}
});
},
getReceiveData() {
// return;
let self = this;
self.loading = true;
var formdata = self.form;
self._post("scm/api/store-out/list-receive", formdata, function (res) {
self.loading = false;
self.listData = self.listData.concat(res.rows);
self.listData.sort((a, b) => new Date(b.payTime) - new Date(a.payTime));
self.total = res.total;
if (self.total < self.form.pageNum * self.form.pageSize) {
self.no_more = true;
}
});
},
getStoreOrderData() {
// return;
let self = this;
self.loading = true;
var formdata = self.form;
self._post(
"scm/api/store-out/list-store-order",
formdata,
function (res) {
self.loading = false;
self.listData = self.listData.concat(res.rows);
self.listData.sort(
(a, b) => new Date(b.payTime) - new Date(a.payTime)
);
self.total = res.total;
if (self.total < self.form.pageNum * self.form.pageSize) {
self.no_more = true;
}
}
);
},
getData() {
// return;
let self = this;
self.loading = true;
var formdata = self.form;
if (formdata.orderStatus == -1) {
formdata.orderStatus = "";
}
self._get("sale/api/my-order/store-list", formdata, function (res) {
self.loading = false;
self.listData = self.listData.concat(res.rows);
self.listData.sort((a, b) => new Date(b.payTime) - new Date(a.payTime));
self.total = res.total;
if (self.total < self.form.pageNum * self.form.pageSize) {
self.no_more = true;
}
});
},
searchName: function () {
/*获取数据*/
this.listData = [];
this.form.pageNum = 1;
this.getData();
},
bindStatus: function (e) {
console.log(e);
this.form.orderType = e.value;
// console.log(e);
},
bindDeliveryWay: function (e) {
console.log(e);
this.form.deliveryWay = e.value;
// console.log(e);
},
resetSubmit: function () {
this.form.orderCode = "";
this.form.memberCode = "";
this.form.orderType = "";
this.form.deliveryWay = "";
this.form.orderStatus = "";
this.form.creationTimeStart = "";
this.form.startTime = "";
this.form.endTime = "";
this.form.creationTimeEnd = "";
this.searchSubmit();
},
searchSubmit: function () {
this.showPop = false;
/*获取数据*/
this.listData = [];
this.form.pageNum = 1;
if (this.serchStatus == 1) {
this.getSendData();
} else if (this.serchStatus == 3) {
this.getReceiveData();
} else if (this.serchStatus == 6) {
this.getStoreOrderData();
} else {
this.getData();
}
// this.getData();
},
resetSubmits: function () {
this.form.productCode = "";
this.form.productName = "";
this.searchSubmits();
},
searchSubmits: function () {
this.showPop = false;
/*获取数据*/
this.listData = [];
this.form.pageNum = 1;
this.getNumberList();
},
},
};
</script>
<style lang="scss">
.bonus-item {
padding: 20rpx 25rpx 20rpx 23rpx;
background-color: #fff;
margin-bottom: 20rpx;
.bonus-bottom {
height: 104rpx;
.order-btn {
box-sizing: border-box;
padding: 0 26rpx;
min-width: 146rpx;
height: 52rpx;
line-height: 52rpx;
text-align: center;
border-radius: 26rpx;
font-size: 24rpx;
color: #fff;
border: 1rpx solid #eee;
margin-left: 18rpx;
background: #fb3024;
border: 1rpx solid #fb3024;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
}
}
}
.bonus-item-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
}
.bonus-item-name {
width: 30%;
flex-shrink: 0;
}
.bonus-item-content {
width: 70%;
flex-shrink: 0;
white-space: nowrap;
}
.top-box {
width: 750rpx;
padding: 0 30rpx 0 23rpx;
box-sizing: border-box;
height: 102rpx;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1rpx solid #eee;
margin-bottom: 24rpx;
}
.search-box {
flex: 1;
height: 65rpx;
background: #f5f6f8;
border-radius: 33rpx;
padding: 0 52rpx;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
.search-input {
font-size: 26rpx;
color: #333;
margin-left: 14rpx;
flex: 1;
}
}
.top-tabbar {
height: 94rpx;
justify-content: flex-start;
flex-wrap: nowrap;
overflow-x: auto;
}
.tab-item {
flex-shrink: 0;
white-space: nowrap;
padding: 0 42rpx;
font-size: 28rpx;
color: #666;
}
.tab-item.active {
font-size: 28rpx;
color: #333;
}
.tab-item.active::after {
width: 52rpx;
height: 6rpx;
background: #fb3024;
border-radius: 3rpx;
bottom: 0;
}
.listdata-item {
// height: 370rpx;
padding: 27rpx 23rpx 22rpx 25rpx;
background: #ffffff;
margin-bottom: 22rpx;
}
.type-btn {
line-height: 30rpx;
height: 30rpx;
background: #3d3d3d;
border-radius: 15rpx;
padding: 0 23rpx;
font-size: 20rpx;
color: #ffffff;
margin-right: 6rpx;
}
.status-btn {
font-size: 24rpx;
color: #333333;
margin-left: 20rpx;
}
.product-img {
width: 124rpx;
height: 124rpx;
margin-right: 20rpx;
flex-shrink: 0;
display: block;
border: 15rpx;
margin-bottom: 24rpx;
}
.product-list {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
overflow-x: auto;
margin-right: 20rpx;
}
.order-border-btn {
box-sizing: border-box;
padding: 0 26rpx;
min-width: 146rpx;
height: 52rpx;
line-height: 52rpx;
text-align: center;
border-radius: 26rpx;
font-size: 24rpx;
color: #999;
border: 1rpx solid #eee;
margin-left: 18rpx;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
}
.order-btn {
box-sizing: border-box;
padding: 0 26rpx;
min-width: 146rpx;
height: 52rpx;
line-height: 52rpx;
text-align: center;
border-radius: 26rpx;
font-size: 24rpx;
color: #fff;
border: 1rpx solid #eee;
margin-left: 18rpx;
background: #fb3024;
border: 1rpx solid #fb3024;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
}
.nav-right-btn {
background: none;
color: #fff;
font-size: 28rpx;
}
.rightpop.pop-content {
padding-top: 0;
}
</style>