HaniBlindBox/honey_box/pages/hegui/hegui.vue
2026-01-03 17:01:19 +08:00

1869 lines
39 KiB
Vue

<template>
<view class="content">
<uni-nav-bar color="#000000" backgroundColor="transparent" :fixed="true" :statusBar="true" :border="false"
@clickLeft="$c.back">
<view style="font-size: 34rpx; width: 100%; display: flex; justify-content: center; align-items: center;">
我的盒柜
</view>
</uni-nav-bar>
<view class="tab">
<view class="tab-item center relative" v-for="(item, i) in tabList" :key="i"
:class="tabCur == i ? 'act' : 'unact'" @click="tabChange(i)">
<text>{{ item.title }}</text>
</view>
</view>
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="getList" :down="downOption"
:up="upOption">
<template v-if="tabList[tabCur].id == 1">
<view class="search">
<view class="input-box">
<input v-model="keyword" placeholder-style="color:#8A8A8A;" placeholder="请输入关键字" />
<view class="icon" @click="tabChange(tabCur)">
<uni-icons type="search" color="#8A8A8A"></uni-icons>
</view>
</view>
<view class="rule column align-center" @click="$refs.rulePop.getRule(10, '发货规则')">
<image class="img100" :src="$img1('shangdai/shuoming.png')"></image>
</view>
</view>
<view class="sub-tab">
<view class="sub-tab-item common_bg center" v-for="(item, i) in subTab" :key="i"
:class="subTabCur == i ? 'act' : 'unact'" @click="subTabChange(i)">
<text>{{ item.title }}</text>
</view>
</view>
<view class="num-all">
<view class="flex row">
<view class="num">
<text>{{ nowNum }}</text>
个赏品
</view>
<view class="all" style="margin-left: 30rpx;">
已选
<text>{{ nowChooseNum }}</text>
</view>
</view>
<view class="flex row" v-if="tabList[tabCur].id == 1">
<view class="flex center" @click="tabChange(tabCur)"
style="width: 88rpx; height: 40rpx; background-color: #F5F5F5; border-radius: 8rpx;">
<text style="color: #333333; font-size: 20rpx;">刷新</text>
</view>
<view class="" @click="chooseAll">
<view v-if="isAll" class="flex center"
style="width: 88rpx; height: 40rpx; background-color: #E6F791; border-radius: 8rpx; margin-left: 32rpx;">
<text style="color: #333333; font-size: 20rpx;">全选</text>
</view>
<view v-else class="flex center"
style="width: 88rpx; height: 40rpx; background-color: #F5F5F5; border-radius: 8rpx; margin-left: 32rpx;">
<text style="color: #333333; font-size: 20rpx;">全选</text>
</view>
</view>
</view>
</view>
<view class="list">
<view class="list-item" v-for="(a, b) in GetOrderList" :key="a.prize_code">
<view class="pic">
<image :src="a.goodslist_imgurl" lazy-load></image>
<view class="num">{{ a.prize_num }}</view>
<view class="yu-tag ziti" v-if="subTab[subTabCur].id == 2">预售</view>
</view>
<view class="name hang1">{{ a.goodslist_title }}</view>
<view class="price" v-if="false">
{{
a.goodslist_money * 1 > 0
? `可分解:${a.goodslist_money}`
: `不可分解`
}}
</view>
<view class="num-box">
<view class="icon flex" @click="jian(a)">
<image class="img100" :src="$img1('shangdai/jian.png')"></image>
</view>
<input v-model="a.chooseNum" disabled="true" @blur="verifyNum(a)" />
<view class="icon flex" @click="jia(a)">
<image class="img100" :src="$img1('shangdai/jia.png')"></image>
</view>
</view>
</view>
</view>
</template>
<!-- 申请提货/已发货/完成提货 -->
<view v-else class="order-list">
<view class="order-item" v-for="(item, i) in listData" :key="i" @click="toOrder(item)">
<view class="order-hd">
<view class="time">申请时间:{{ item.addtime }}</view>
<view class="status">{{ item.status_name }}</view>
</view>
<scroll-view class="order-bd" scroll-x>
<view class="order-goods" v-for="(a, b) in item.order_list" :key="b">
<view class="pic">
<image :src="a.goodslist_imgurl" lazy-load></image>
<view class="num center">{{ a.prize_num }}</view>
<view class="num2 center" v-if="a.fh_status == 1">已发货</view>
</view>
<view class="title hang1">
{{ a.goodslist_title }}
</view>
</view>
</scroll-view>
<view class="order-btns mt20" v-if="item.status == 2" @click.stop>
<view class="btn center" @click="toExpress(item)">查看物流</view>
<view class="btn2 center ml30" @click="submitGet(item)">确认收货</view>
</view>
</view>
</view>
</mescroll-body>
<view v-if="tabList[tabCur].id == 1" class="bt-fixed">
<template v-if="subTab[subTabCur].id != 4">
<view v-if="subTab[subTabCur].id != 6 && is_exchange == '1' && show_dadajuan" class="btn center"
@click="open('changePop')">哈尼券</view>
<view v-if="subTab[subTabCur].id != 2" class="btn2 center" @click="open('sendPop')">发货</view>
<view v-if="subTab[subTabCur].id != 6" class="btn center" @click="open('model')">上锁</view>
</template>
<view v-else class="btn center" @click="open('model')">解锁</view>
</view>
<!-- 兑换弹窗 -->
<uni-popup ref="changePop" type="bottom">
<view class="change-pop relative">
<view class="change-pop-hd">
<text class="">兑换确认</text>
<view class="close icon" @click="close('changePop')">
<image :src="$img('/static/img/close2.png')" lazy-load></image>
</view>
</view>
<view class="change-pop-bd">
<view class="bd-top">
<view>已选
<text style="color: #333333;">{{ nowChooseNum }}</text>
件赏品
</view>
</view>
<scroll-view class="bd-goods" scroll-x>
<view class="goods-item" v-for="(item, i) in handelList" :key="i">
<view class="pic">
<image :src="item.goodslist_imgurl" lazy-load></image>
<view class="num center">{{ item.chooseNum }}</view>
</view>
<view class="title hang1">
{{ item.goodslist_title }}
</view>
</view>
</scroll-view>
</view>
<view class="align-center justify-center mt30"
style="background-color: #FFFFFF; height: 82rpx; border-radius: 16rpx;">
<view class="" style="color: #333333;">
共<text style="color: #333333;">{{ nowChooseNum }}</text>
件物品,合计兑换<text style="color: #333333;"></text>
<text style="color: #333333; font-size: 30rpx;">{{ totalChangeMoney }}</text>
<text style="">{{ this.$config.getAppSetting('currency2_name') }}</text>
</view>
</view>
<view class="change-pop-ft" @click="$c.noDouble(submitChange)">
<text>确认兑换</text>
</view>
</view>
</uni-popup>
<uni-popup ref="sendPop" type="bottom">
<view class="send-pop relative">
<view class="send-pop-hd">
发货确认单
<view class="close icon" @click="close('sendPop')">
<image :src="$img('/static/img/close2.png')" lazy-load></image>
</view>
</view>
<view class="send-pop-card">
<view class="card-top">
<view>已选
<text style="color: #333333;">{{ nowChooseNum }}</text>
件赏品
</view>
</view>
<scroll-view class="card-goods" scroll-x>
<view class="goods-item" v-for="(item, i) in handelList" :key="i">
<view class="pic">
<image :src="item.goodslist_imgurl" lazy-load></image>
<!-- <view class="type">{{ item.shang_title }}</view> -->
<view class="num center">{{ item.chooseNum }}</view>
</view>
<view class="title hang1">
{{ item.goodslist_title }}
</view>
</view>
</scroll-view>
</view>
<view class="br20 mt20" style="background: #FFFFFF;padding: 0 20rpx;">
<view class="address" @click="chooseAdd">
<view v-if="!addData" class="add-choose">请选择收货地址</view>
<view v-else class="add-info">
<view class="name-phone">
<view>{{ addData.userName }}</view>
<view class="phone">{{ addData.telNumber }}</view>
</view>
<view class="add-text">
{{ addData.detailed_address }}
</view>
</view>
<view class="icon">
<image :src="$img1('common/right1.png')" lazy-load></image>
</view>
</view>
<view class="freight border">
<view>快递(满{{ freightData.free_post }}件包邮)</view>
<view>
<text>
{{
nowChooseNum >= freightData.free_post
? '包邮'
: `¥${freightData.post_money}`
}}
</text>
</view>
</view>
</view>
<view class="send-pop-ft mt30" @click="$c.noDouble(submitSend)">
<text>确认发货</text>
</view>
<view class="agree center" @click="isAgree = !isAgree">
<view class="icon">
<image v-if="isAgree" :src="$img1('common/check_act.png')" lazy-load></image>
<image v-else :src="$img1('common/check.png')" lazy-load></image>
</view>
我已满18岁,阅读并同意
<text @click.stop="$c.to({ url: '/pages/guize/guize?type=4' })">
《用户协议》
</text>
<text @click.stop="$c.to({ url: '/pages/guize/guize?type=5' })">
《隐私政策》
</text>
</view>
</view>
</uni-popup>
<!-- 上锁弹窗 -->
<uni-popup ref="model" type="center">
<view class="model column flex center">
<view class="model-bd">{{ lockMsg }}</view>
<view class="model-ft row">
<view class="model-btn" @click="close('model')">取消</view>
<view class="model-btn act" @click="$c.noDouble(submitLock)">
确定
</view>
</view>
</view>
</uni-popup>
<uni-popup ref="resPop" type="center" mask-background-color="rgba(0,0,0,0.8)">
<view class="res-pop column center">
<!-- <view class="res-pop-hd"></view> -->
<view class="res-list center">
<view class="res-item center column">
<view class="pic center">
<image class="img100" :src="$img1('shangdai/qianbao.png')" lazy-load></image>
</view>
<view class="item-info">
<view class="title center hang1">
恭喜您成功兑换,获得{{ zhanshiMoney }} {{ this.$config.getAppSetting('currency2_name') }}
</view>
</view>
<view class="res-pop-ft center justify-center" @click="$refs.resPop.close()">
<text>确定</text>
</view>
</view>
</view>
</view>
</uni-popup>
<rule-pop ref="rulePop"></rule-pop>
</view>
</template>
<script>
import { getUserInfo } from '@/common/server/user.js';
import { getWarehouseIndex, confirmSend, moveInSafe, moveOutSafe, recoveryPrizeWithType, sendPrizeWithAddress, getSendRecordWithStatus } from '@/common/server/warehouse.js';
export default {
data() {
return {
keyword: '',
remark: '',
// 下拉刷新的配置(可选, 绝大部分情况无需配置)
downOption: {
auto: false
},
// 上拉加载的配置(可选, 绝大部分情况无需配置)
upOption: {
auto: true,
page: {
size: 10 // 每页数据的数量,默认10
}
},
tabList: [{
id: 1,
title: '全部'
},
{
id: 2,
status: 1,
title: '申请提货'
},
{
id: 3,
status: 2,
title: '已发货'
},
{
id: 4,
status: 3,
title: '完成提货'
}
],
tabCur: 0,
subTab: [{
id: 1,
title: '赏品'
},
// {
// id: 5,
// title: '无限赏'
// },
// {
// id:3,
// title: '宝箱'
// },
{
id: 4,
title: '保险柜'
},
{
id: 2,
title: '预售'
}
// {
// id: 6,
// title: '明信片'
// }
],
subTabCur: 0,
listData: [],
total: 0,
handelList: [],
addData: '',
lockMsg: '',
freightData: '',
canReload: false,
zhanshiMoney: 0,
isAgree: false,
is_exchange: '0',
show_dadajuan: false
}
},
onShow() {
if (uni.getStorageSync('token')) {
this.loadUserInfo()
}
this.canReload && this.tabChange(this.tabCur)
this.canReload = true
const curPages = getCurrentPages()[0]; // 获取当前页面实例
if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
this.$mp.page.getTabBar().setData({
selected: 3
});
}
this.$platform.getOrderNo(this).then(order_num => {
if (order_num != null && order_num != "") {
this.$c.msg("支付成功~")
}
});
},
onLoad() {
this.$nextTick(() => {
this.$refs.mescrollRef.mescroll.optUp.empty.tip = '~ 快来抽赏吧 ~'
})
},
computed: {
/* 当前选中可兑换金额 */
totalChangeMoney() {
if (this.tabList[this.tabCur].id != 1) return
if (this.handelList.length <= 0) {
return 0
}
var total = this.handelList.reduce(
(pre, item) => pre + item.chooseNum * item.goodslist_money,
0
)
// console.log("8888888", total);
return this.$c.removeTrailingZeros(total.toFixed(2));
},
/* 是否全选 */
isAll() {
if (this.tabList[this.tabCur].id != 1) return
if (this.listData.length <= 0) {
return false
}
return this.nowNum == this.nowChooseNum
},
/* 当前选中数量 */
nowChooseNum() {
if (this.tabList[this.tabCur].id != 1) return
const arr = this.getChooseGoods()
return arr.reduce((pre, item) => pre + Number(item.chooseNum), 0)
},
/* 当前赏品总数 */
nowNum() {
if (this.tabList[this.tabCur].id != 1) return
const arr = []
if (this.listData != null && this.listData.length > 0) {
this.listData.forEach(item => {
if (item != null && item.orderlist != null && item.orderlist.length > 0) {
item.orderlist.forEach(a => {
arr.push(a)
})
}
})
}
return arr
.filter(item => item.prize_num > 0)
.reduce((pre, item) => pre + Number(item.prize_num), 0)
},
GetOrderList() {
if (this.listData != null && this.listData.length > 0) {
let t = []
this.listData.forEach(it => {
if (it != null && it.orderlist != null && it.orderlist.length > 0) {
it.orderlist.forEach(a => {
t.push(a)
})
}
})
return t
} else {
return []
}
}
},
onReady() {
// this.open('changePop')
// this.open('sendPop')
// this.open('model')
},
methods: {
async loadUserInfo() {
// API: user
const res = await getUserInfo();
if (res && res.userinfo) {
uni.setStorageSync('userinfo', res.userinfo)
console.log(res.userinfo.js_is_open)
this.is_exchange = res.userinfo.is_exchange
}
},
async submitGet(item) {
// API: warehouse_send_confirm
const res = await confirmSend({ id: item.id });
if (res.status == 1) {
this.$c.toast({
title: res.msg,
duration: 500,
success: () => {
this.tabChange(this.tabCur)
}
})
}
},
toExpress(item) {
this.$c.to({
url: '/pages/user/wuliu_detail',
query: {
id: item.id
}
})
},
toOrder(item) {
this.$c.to({
url: '/pages/user/order',
query: {
id: item.id
}
})
},
chooseAdd() {
this.canReload = false;
console.log('aaaaaaaaaaaaaaaaaaaa');
this.$platform.chooseAddress().then(res => {
console.log(res);
this.addData = res
this.canReload = true;
});
},
async submitLock() {
let data = this.handelList.map(item => {
return {
prize_code: item.prize_code,
number: item.chooseNum
}
})
let res;
if (this.subTab[this.subTabCur].id == 4) {
// API: warehouse_remove
res = await moveOutSafe({ recovery_info: JSON.stringify(data) });
} else {
// API: warehouse_movein
res = await moveInSafe({ recovery_info: JSON.stringify(data) });
}
if (res.status == 1) {
this.close('model')
this.$c.toast({
title: res.msg,
duration: 500,
success: () => {
this.tabChange(this.tabCur)
}
})
}
},
async submitSend() {
if (!this.isAgree) {
this.$c.toast({
title: '请阅读并同意《用户协议》《隐私政策》'
})
return
}
if (!this.addData) {
this.$c.toast({
title: '请选择地址'
})
return
}
let data = this.handelList.map(item => {
return {
prize_code: item.prize_code,
number: item.chooseNum
}
})
// API: warehouse_send
const res = await sendPrizeWithAddress({
recovery_info: JSON.stringify(data),
type: this.subTab[this.subTabCur].id,
name: this.addData.userName,
mobile: this.addData.telNumber,
address: this.addData.detailed_address,
message: this.remark
});
if (res.status == 1) {
this.close('sendPop')
this.remark = ''
if (res.data.status == 1) {
const status = await this.$platform.pay({
data: res.data.res
}, this)
if (status == 'success') {
this.tabChange(this.tabCur)
}
} else {
this.$c.toast({
title: res.msg,
duration: 500,
success: () => {
this.tabChange(this.tabCur)
}
})
}
}
},
async submitChange() {
let data = this.handelList.map(item => {
return {
prize_code: item.prize_code,
number: item.chooseNum
}
})
// API: warehouse_recovery
const res = await recoveryPrizeWithType({
recovery_info: JSON.stringify(data),
type: this.subTab[this.subTabCur].id
});
if (res.status == 1) {
this.close('changePop')
this.zhanshiMoney = this.$c.removeTrailingZeros(this.totalChangeMoney);
setTimeout(() => {
this.$refs.resPop.open()
this.tabChange(this.tabCur)
}, 500)
} else {
this.$c.toast({
title: res.msg
})
}
},
getChooseGoods() {
const arr = []
this.listData.forEach(item => {
item.orderlist.forEach(a => {
const child = a
if (a.order_list_ids) {
child.order_list_ids1 = a.order_list_ids.slice(0, a.chooseNum)
}
arr.push(child)
})
})
return arr.filter(item => item.chooseNum > 0)
},
chooseAll() {
if (this.isAll) {
this.listData.map(item => {
item.orderlist.map(a => {
a.chooseNum = 0
})
})
} else {
this.listData.map(item => {
item.orderlist.map(a => {
a.chooseNum = a.prize_num
})
})
}
},
verifyNum(item) {
if (item.chooseNum <= 0) {
item.chooseNum = 0
return
}
if (item.chooseNum >= item.prize_num) {
item.chooseNum = item.prize_num
return
}
},
jian(item) {
if (item.chooseNum <= 0) {
item.chooseNum = 0
return
}
item.chooseNum -= 1
},
jia(item) {
if (item.chooseNum >= item.prize_num) {
item.chooseNum = item.prize_num
return
}
item.chooseNum += 1
},
subTabChange(i) {
this.subTabCur = i
this.listData = []
this.mescroll.resetUpScroll()
this.mescroll.scrollTo(0, 0)
},
tabChange(i) {
this.tabCur = i
switch (i) {
case 0:
this.subTabChange(this.subTabCur)
break
default:
this.listData = []
this.mescroll.resetUpScroll()
this.mescroll.scrollTo(0, 0)
break
}
},
async getList({
num,
size
}) {
let data = {
page: num
}
try {
let res;
if (this.tabList[this.tabCur].id == 1) {
data.type = this.subTab[this.subTabCur].id
data.keyword = this.keyword
// API: warehouse_index
res = await getWarehouseIndex(data);
} else {
data.status = this.tabList[this.tabCur].status
// API: warehouse_send_record
res = await getSendRecordWithStatus(data);
}
if (res.status == 1) {
if (num == 1) {
this.listData = [];
}
if (this.tabList[this.tabCur].id == 1) {
res.data.data.map(item => {
item.orderlist.map(a => {
a.chooseNum = 0
})
})
this.freightData = res.data.yufei
}
if (res.data.show_dadajuan != null) {
this.show_dadajuan = res.data.show_dadajuan
}
this.listData = this.listData.concat(res.data.data)
console.log(this.GetOrderList);
this.mescroll.endByPage(res.data.data.length, res.data.last_page)
} else {
console.log('aaa');
this.listData = [];
this.mescroll.endByPage(0, 0)
}
} catch (error) {
console.log('aaa');
this.listData = [];
this.mescroll.endByPage(0, 0)
}
},
close(e) {
this.$refs[e].close()
},
open(e) {
this.handelList = []
const choose = this.getChooseGoods()
if (choose.length <= 0) {
this.$c.toast({
title: '请选择赏品'
})
return
}
this.handelList = choose
if (e == 'model') {
if (this.subTab[this.subTabCur].id != 4) {
this.lockMsg = '请问您是否要将所选择赏品放入保险柜?'
} else {
this.lockMsg = '请问您是否要将所选择赏品移出保险柜?'
}
}
this.$refs[e].open()
},
// 设置背景颜色
getBgColor(text) {
switch (text) {
case "普通":
return "#DAFF27";
break;
case "黄金":
return "#9A8EF6";
break;
case "欧皇":
return "#FFEB8E";
break;
case "超神":
return "#FF8E8E";
break;
default:
return "#9A8EF6";
break;
}
},
// 设置文字颜色
getTextColor(text) {
switch (text) {
case "普通":
return "#86AD46";
break;
case "黄金":
return "#FFFFFF";
break;
case "欧皇":
return "#DA8A50";
break;
case "超神":
return "#FFEFB4";
break;
default:
return "#FFFFFF";
break;
}
}
}
}
</script>
<style lang="scss">
.content {
box-sizing: border-box;
padding-bottom: calc(var(--window-bottom) + 240rpx);
&::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background-image: url('/static/main_bg.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
image {
width: 100%;
height: 100%;
border-radius: inherit;
}
.icon {
display: flex;
justify-content: center;
align-items: center;
}
.tab {
display: flex;
align-items: center;
padding: 10rpx 30rpx;
.tab-item {
width: 155rpx;
height: 68rpx;
position: relative;
margin-right: 25rpx;
&.act {
font-weight: 400;
font-size: 28rpx;
color: #000000;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 4rpx;
background: #333333;
}
}
&.unact {
font-weight: 400;
font-size: 28rpx;
color: rgba(0, 0, 0, 0.55);
}
}
}
.search {
margin-top: 20rpx;
padding: 0 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
.input-box {
width: 615rpx;
height: 70rpx;
background: #F3F3F3;
box-sizing: border-box;
padding: 0 30rpx;
display: flex;
align-items: center;
border-radius: 32rpx;
input {
flex: 1;
font-size: 26rpx;
font-weight: 400;
color: #000;
}
}
.icon {
width: 32rpx;
height: 32rpx;
margin-left: 30rpx;
}
.rule {
width: 40rpx;
height: 68rpx;
}
}
.sub-tab {
display: flex;
padding: 30rpx 30rpx 0;
.sub-tab-item {
width: 155rpx;
height: 57rpx;
font-size: 28rpx;
font-weight: 400;
&.act {
color: #FFED94;
background: #383838;
border-radius: 9rpx;
}
&.unact {
color: #404040;
background: #F3F3F3;
border-radius: 9rpx;
}
}
.sub-tab-item+.sub-tab-item {
margin-left: 30rpx;
}
}
.num-all {
padding: 30rpx 30rpx 0;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #8A8A8A;
text {
color: #333333;
}
}
.list {
margin-top: 30rpx;
display: grid;
grid-template-columns: repeat(3, 210rpx);
padding: 0 30rpx;
gap: 30rpx 30rpx;
.list-item {
width: 100%;
box-sizing: border-box;
background: #F8F8F8;
padding-bottom: 20rpx;
border-radius: 16rpx;
// background: url($imgurl+'shangdai/kuang.png') no-repeat 0 0 / 100% 100%;
.pic {
width: 202rpx;
height: 202rpx;
margin: 0 auto;
position: relative;
// background-color: #D8D8D8;
border-radius: 16rpx 16rpx 0rpx 0rpx;
>image {
width: 202rpx;
height: 202rpx;
border-radius: 16rpx 16rpx 0rpx 0rpx;
}
.type {
position: absolute;
z-index: 1;
left: 10rpx;
top: 12rpx;
min-width: 68rpx;
height: 32rpx;
padding: 0 10rpx;
font-weight: 400;
font-size: 22rpx;
border-radius: 18rpx;
}
.num {
position: absolute;
z-index: 1;
left: 50%;
bottom: 12rpx;
transform: translateX(-50%);
min-width: 50rpx;
height: 38rpx;
padding: 0 10rpx;
border-radius: 18rpx;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.5);
font-size: 24rpx;
font-weight: 400;
color: #ffffff;
}
.yu-tag {
position: absolute;
right: 10rpx;
bottom: 30rpx;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
font-weight: 400;
font-size: 32rpx;
color: #894DD3;
text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
}
}
.name {
padding: 20rpx 10rpx 0;
font-size: 20rpx;
font-weight: 400;
color: #333333;
}
.price {
padding: 10rpx 10rpx 0;
text-align: center;
font-size: 22rpx;
font-family: Source Han Sans CN;
font-weight: 300;
color: #CCCCCC;
}
.num-box {
margin: 24rpx 20rpx 10rpx;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #DFDFDF;
border-radius: 20rpx;
.icon {
width: 50rpx;
height: 45rpx;
}
>input {
margin: 0 10rpx;
width: 70rpx;
text-align: center;
font-size: 24rpx;
font-weight: 400;
color: #8A8A8A;
}
}
}
}
.order-list {
padding: 1rpx 30rpx 0;
.order-item {
padding: 0 30rpx 30rpx;
background: #F7F7F7;
border-radius: 20rpx;
margin-top: 30rpx;
.order-hd {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx 0;
.time {
font-size: 20rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #8A8A8A;
}
.status {
font-size: 20rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
}
}
.order-bd {
white-space: nowrap;
.order-goods {
display: inline-block;
width: 170rpx;
margin-right: 20rpx;
&:last-child {
margin-right: 0;
}
.pic {
width: 100%;
height: 170rpx;
box-sizing: border-box;
background: #000000;
border-radius: 20rpx;
position: relative;
.num {
position: absolute;
z-index: 1;
left: 50%;
bottom: 10rpx;
width: 50rpx;
transform: translateX(-50%);
box-sizing: border-box;
padding: 0 10rpx;
background: rgba(0, 0, 0, 0.5);
font-size: 24rpx;
font-weight: 400;
color: #ffffff;
border-radius: 20rpx;
}
.num2 {
position: absolute;
z-index: 1;
right: 10rpx;
top: 10rpx;
width: 80rpx;
// transform: translateX(-50%);
box-sizing: border-box;
padding: 0 10rpx;
background: rgba(0, 0, 0, 0.5);
font-size: 16rpx;
font-weight: 400;
color: #E6F791;
border-radius: 20rpx;
}
}
.title {
padding: 16rpx 10rpx 0;
font-size: 20rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
}
}
}
.line {
margin: 20rpx 0;
width: 100%;
height: 1px;
background: #666666;
}
.order-btns {
display: flex;
justify-content: flex-end;
.btn {
width: 160rpx;
height: 60rpx;
background: #FFFFFF;
border-radius: 16rpx;
font-weight: 400;
font-size: 24rpx;
color: #333333;
}
.btn2 {
width: 160rpx;
height: 60rpx;
background: #E6F791;
border-radius: 16rpx;
font-weight: 400;
font-size: 24rpx;
color: #333333;
}
}
}
}
.right-fixed {
position: fixed;
z-index: 10;
right: 20rpx;
top: 60vh;
.fbtn {
width: 110rpx;
height: 98rpx;
margin-top: 40rpx;
}
}
.bt-fixed {
position: fixed;
z-index: 10;
left: 0;
// bottom: var(--window-bottom);
// #ifdef H5
bottom: var(--window-bottom);
// #endif
// #ifdef MP
bottom: calc(var(--window-bottom) + 160rpx);
// #endif
// #ifdef APP
bottom: 10px;
// #endif
width: 750rpx;
box-sizing: border-box;
padding: 0 30rpx 100rpx;
display: flex;
justify-content: space-around;
align-items: center;
.btn {
width: 201rpx;
height: 66rpx;
// font-family: YouSheBiaoTiHei;
font-weight: 400;
font-size: 30rpx;
color: #FFED94;
background: #383838;
border-radius: 10rpx;
}
.btn2 {
width: 201rpx;
height: 66rpx;
// font-family: YouSheBiaoTiHei;
font-weight: 400;
font-size: 30rpx;
color: #FFED94;
background: #383838;
border-radius: 10rpx;
}
.btn1 {
width: 378rpx;
height: 80rpx;
}
}
.change-pop {
padding: 0 30rpx 80rpx;
box-sizing: border-box;
background: #F7F7F7;
position: relative;
border-radius: 16rpx 16rpx 0rpx 0rpx;
.change-pop-hd {
padding: 30rpx 0;
position: relative;
text-align: center;
font-size: 28rpx;
// font-family: Source Han Sans CN;
font-weight: 500;
color: #333333;
.close {
position: absolute;
right: 0;
top: 50%;
padding: 20rpx;
transform: translateY(-50%);
width: 24rpx;
height: 24rpx;
}
}
.change-pop-bd {
padding: 0 30rpx 30rpx;
background: #FFFFFF;
border-radius: 20rpx;
.bd-top {
display: flex;
justify-content: center;
padding: 30rpx 0;
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #8A8A8A;
text {
color: #ffffff;
margin: 0 4rpx;
}
}
.bd-goods {
white-space: nowrap;
.goods-item {
display: inline-block;
width: 170rpx;
margin-right: 20rpx;
&:last-child {
margin-right: 0;
}
.pic {
width: 100%;
height: 170rpx;
box-sizing: border-box;
background: #D8D8D8;
border-radius: 20rpx;
position: relative;
overflow: hidden;
.type {
position: absolute;
z-index: 1;
left: 0;
top: 0;
height: 32rpx;
display: flex;
align-items: center;
padding: 0 14rpx;
background: linear-gradient(90deg,
#6adeff 0%,
#7ab5ff 50%,
#ff7feb 100%);
font-size: 20rpx;
font-weight: 400;
color: #222222;
}
.num {
position: absolute;
z-index: 1;
left: 50%;
transform: translateX(-50%);
bottom: 10rpx;
height: 32rpx;
width: 50rpx;
box-sizing: border-box;
border-radius: 18rpx;
padding: 10rpx 10rpx;
background: rgba(255, 255, 255, 0.50);
font-size: 20rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
}
}
.title {
padding: 10rpx 10rpx 0;
font-size: 24rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
}
.price {
padding: 4rpx 10rpx 0;
font-size: 20rpx;
font-family: Source Han Sans CN;
font-weight: 300;
color: #d0d1ff;
}
}
}
.bd-bt {
padding: 30rpx 0 0;
text-align: right;
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
text {
font-size: 36rpx;
color: #D3AFFF;
}
}
}
.change-pop-ft {
height: 84rpx;
background: url($imgurl+'common/payBtn.png') no-repeat 0 0 / 100% 100%;
display: flex;
align-items: center;
margin-top: 40rpx;
justify-content: center;
font-size: 26rpx;
font-weight: 500;
color: #FFED94;
}
}
.send-pop {
padding: 0 30rpx 80rpx;
box-sizing: border-box;
background: #F7F7F7;
position: relative;
border-radius: 16rpx 16rpx 0rpx 0rpx;
&::after {
content: '';
position: absolute;
top: -62rpx;
left: 0;
width: 750rpx;
height: 62rpx;
// background: url($imgurl+'common/ding.png') no-repeat 0 0 / 100% 100%;
}
.send-pop-hd {
padding: 40rpx 0;
position: relative;
text-align: center;
font-size: 28rpx;
// font-family: Source Han Sans CN;
font-weight: 500;
color: #333333;
.close {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 24rpx;
height: 24rpx;
}
}
.send-pop-card {
padding: 0 30rpx 30rpx;
background: #FFFFFF;
border-radius: 20rpx;
.card-top {
display: flex;
justify-content: center;
padding: 30rpx 0;
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #8A8A8A;
>text {
margin: 0 4rpx;
}
}
.card-goods {
white-space: nowrap;
.goods-item {
display: inline-block;
width: 170rpx;
margin-right: 20rpx;
&:last-child {
margin-right: 0;
}
.pic {
width: 100%;
height: 170rpx;
box-sizing: border-box;
border-radius: 20rpx;
background: #1C1B20;
position: relative;
overflow: hidden;
.type {
position: absolute;
z-index: 1;
left: 0;
top: 0;
height: 32rpx;
display: flex;
align-items: center;
padding: 0 14rpx;
background: linear-gradient(90deg,
#6adeff 0%,
#7ab5ff 50%,
#ff7feb 100%);
font-size: 20rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #222222;
}
.num {
position: absolute;
z-index: 1;
left: 50%;
bottom: 12rpx;
transform: translateX(-50%);
height: 32rpx;
min-width: 60rpx;
box-sizing: border-box;
padding: 0 10rpx;
background: rgba(255, 255, 255, 0.50);
font-size: 24rpx;
font-weight: 400;
border-radius: 20rpx;
color: #000;
}
}
.title {
padding: 16rpx 10rpx 0;
font-size: 20rpx;
font-weight: 400;
color: #333333;
}
}
}
.bd-bt {
padding: 30rpx 0 0;
text-align: right;
font-size: 28rpx;
font-weight: 400;
color: #ffffff;
text {
font-size: 36rpx;
color: #D3AFFF;
}
}
}
.address {
padding: 30rpx 0;
position: relative;
.add-choose {
font-size: 32rpx;
font-weight: 400;
color: #333333;
}
.add-info {
padding-right: 60rpx;
.name-phone {
display: flex;
font-size: 32rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
.phone {
padding-left: 10rpx;
}
}
.add-text {
margin-top: 10rpx;
font-size: 24rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #cccccc;
}
}
.icon {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 10rpx;
height: 17rpx;
}
}
.freight {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx 0;
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #676767;
text {
color: #676767;
}
}
.remark {
padding: 30rpx 0;
.remark-title {
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
}
.textarea {
background: #4e5264;
border-radius: 20rpx;
padding: 20rpx;
margin-top: 20rpx;
textarea {
width: 100%;
height: 120rpx;
font-size: 26rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #999999;
}
}
}
.agree {
display: flex;
margin-top: 30rpx;
font-size: 24rpx;
font-weight: 400;
color: #999999;
line-height: 32rpx;
.icon {
width: 32rpx;
height: 32rpx;
margin-right: 10rpx;
}
}
.border {
border-top: 1px solid #333333;
}
.send-pop-ft {
margin: 30rpx auto 0;
width: 686rpx;
height: 84rpx;
background: url($imgurl+'common/payBtn.png') no-repeat 0 0 / 100% 100%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
color: #FFED94;
>text:nth-child(1) {
font-size: 26rpx;
}
}
}
.model {
width: 568rpx;
background: #FFFFFF;
border-radius: 30rpx;
box-sizing: border-box;
.model-bd {
text-align: center;
padding: 68rpx 0 0;
font-size: 24rpx;
font-weight: 400;
color: #333333;
}
}
.model-ft {
width: 80%;
padding: 50rpx 0;
display: flex;
justify-content: space-between;
.model-btn {
width: 220rpx;
height: 72rpx;
border-radius: 16rpx;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
background-color: #F5F5F5;
font-size: 24rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #A5A5A5;
&.act {
background: #424242;
color: #FFED94;
}
}
}
}
.res-pop {
width: 100%;
height: 100vh;
position: relative;
// background: url($imgurl+'common/yb.png') no-repeat 0 0 / 100% 100%;
.res-pop-hd {
width: 380rpx;
height: 104rpx;
background: url($imgurl+'common/gxhd.png') no-repeat 0 0 / 100% 100%;
}
.res-list {
width: 480rpx;
padding: 0 30rpx 30rpx;
background: #FFFFFF;
border-radius: 16rpx;
.res-item {
width: 100%;
.pic {
width: 120rpx;
height: 120rpx;
position: relative;
padding-top: 48rpx;
}
.item-info {
padding: 30rpx 10rpx 10rpx;
position: relative;
z-index: 1;
.title {
margin-top: 10rpx;
font-weight: 400;
font-size: 32rpx;
color: #333333;
}
}
}
}
.res-pop-ft {
width: 220rpx;
height: 72rpx;
margin: 62rpx auto 0;
box-sizing: border-box;
background: #424242;
border-radius: 15rpx;
>text {
color: #FFED94;
}
}
}
</style>