flyx/pages/sangdai/sangdai.vue
2024-12-07 12:57:43 +08:00

1862 lines
39 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 class="content">
<uni-nav-bar title="我的盒柜" color="#fff" backgroundColor="transparent" :fixed="true" :statusBar="true"
:border="false" @clickLeft="$c.back"></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 br10">
<input v-model="keyword" placeholder-style="color:#CCCCCC;" placeholder="请输入关键字" />
<view class="icon" @click="tabChange(tabCur)">
<uni-icons type="search" color="#ff873a"></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="num">
<text>{{ nowNum }}</text>
个赏品
</view>
<view class="all">
已选
<text>{{ nowChooseNum }}</text>
</view>
</view>
<view class="list">
<template v-for="(item, i) in listData">
<view class="list-item" v-for="(a, b) in item.orderlist" :key="a.prize_code">
<view class="pic">
<image :src="a.goodslist_imgurl" lazy-load></image>
<view class="type center">{{ a.shang_title }}</view>
<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" @blur="verifyNum(a)" />
<view class="icon flex" @click="jia(a)">
<image class="img100" :src="$img1('shangdai/jia.png')"></image>
</view>
</view>
</view>
</template>
</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>
<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 class="right-fixed" v-if="tabList[tabCur].id == 1">
<view class="fbtn" @click="tabChange(tabCur)">
<image :src="$img1('shangdai/shuaxin.png')"></image>
</view>
<view class="fbtn" @click="chooseAll">
<image v-if="isAll" :src="$img1('shangdai/unallcheck.png')"></image>
<image v-else :src="$img1('shangdai/allcheck.png')"></image>
</view>
</view>
<view v-if="tabList[tabCur].id == 1" class="bt-fixed">
<template v-if="subTab[subTabCur].id != 4">
<view v-if="subTab[subTabCur].id != 6 && listData.length && is_exchange=='1'" 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="ziti">兑换确认</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>已选赏品</view>
<view>
<text>{{ 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="type">{{ item.shang_title }}</view> -->
<view class="num center">×{{ item.chooseNum }}</view>
</view>
<view class="title hang1">
{{ item.goodslist_title }}
</view>
<!-- <view class="price">
兑换价:{{ item.goodslist_money * item.chooseNum }}
</view> -->
</view>
</scroll-view>
<!-- <view class="bd-bt">
共计可兑换:
<text>¥{{ totalChangeMoney }}</text>
</view> -->
</view>
<view class="align-center justify-between mt30">
<view class="" style="color: #FFFFFF;">
共<text style="color: #D3AFFF;">{{nowChooseNum}}</text>
件物品,合计兑换<text style="color: #D3AFFF;">¥</text>
<text style="color: #D3AFFF; font-size: 30rpx;">{{totalChangeMoney}}</text>
</view>
<view class="change-pop-ft" @click="$c.noDouble(submitChange)">
<text>确认兑换</text>
</view>
</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>已选赏品</view>
<view>
<text>{{ 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: #3B3941;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.provinceName }}-{{ addData.cityName }}-{{
addData.countyName
}}-{{ addData.detailInfo }}
</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="remark border">
<view class="remark-title">备注</view>
<view class="textarea">
<textarea v-model="remark" placeholder="请输入备注说明" />
</view>
</view> -->
<view class="agree" @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 class="send-pop-ft mt30" @click="$c.noDouble(submitSend)">
<text>确认发货</text>
</view>
</view>
</uni-popup>
<uni-popup ref="model" type="center">
<view class="model">
<view class="model-hd ziti">提示</view>
<view class="model-bd">{{ lockMsg }}</view>
<view class="model-ft">
<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}}
</view>
</view>
</view>
</view>
<view class="res-pop-ft justify-center" @click="$refs.resPop.close()">
<text>确定</text>
</view>
</view>
</uni-popup>
<rule-pop ref="rulePop"></rule-pop>
</view>
</template>
<script>
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,
addData: '',
listData: [],
total: 0,
handelList: [],
addData: '',
lockMsg: '',
freightData: '',
canReload: false,
zhanshiMoney: 0,
isAgree: false,
is_exchange: '0'
}
},
onShow() {
if (uni.getStorageSync('token')) {
this.getUserInfo()
}
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
});
}
},
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
}
return this.handelList.reduce(
(pre, item) => pre + item.chooseNum * item.goodslist_money,
0
)
},
/* 是否全选 */
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 = []
this.listData.forEach(item => {
item.orderlist.forEach(a => {
arr.push(a)
})
})
return arr
.filter(item => item.prize_num > 0)
.reduce((pre, item) => pre + Number(item.prize_num), 0)
}
},
onReady() {
// this.open('changePop')
// this.open('sendPop')
// this.open('model')
},
methods: {
getUserInfo() {
let that = this
that.req({
url: 'user',
success(res) {
if (res.status == 1) {
uni.setStorageSync('userinfo', res.data.userinfo)
console.log(res.data.userinfo.js_is_open)
that.is_exchange = res.data.userinfo.is_exchange
}
}
})
},
submitGet(item) {
this.req({
url: 'warehouse_send_confirm',
data: {
id: item.id
},
success: res => {
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
var that=this;
// #ifdef H5
this.req({
url: 'getAccessTokenOffiaccountSign',
data: {
// recovery_info: JSON.stringify(data)
url: location.href.split('#')[0]
},
success: res => {
console.log(res);
if (res.status == 1) {
var _data = res.data;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来若要查看传入的参数可以在pc端打开参数信息会通过log打出仅在pc端时才会打印。
appId: _data.appId,
timestamp: _data.timestamp,
nonceStr: _data.noncestr,
signature: _data.signature,
jsApiList: [
'checkJsApi',
'openAddress',
]
});
wx.ready(function() {
wx.checkJsApi({
jsApiList: [
'openAddress',
],
success: function(res) {
// alert(res);
// console.log(res);
wx.openAddress({
success: function(res) {
console.log(res);
that.addData = res;
// var userName = res.userName; // 收货人姓名
// var postalCode = res.postalCode; // 邮编
// var provinceName = res
// .provinceName; // 国标收货地址第一级地址(省)
// var cityName = res.cityName; // 国标收货地址第二级地址(市)
// var countryName = res
// .countryName; // 国标收货地址第三级地址(国家)
// var detailInfo = res.detailInfo; // 详细收货地址信息
// var nationalCode = res.nationalCode; // 收货地址国家码
// var telNumber = res.telNumber; // 收货人手机号码
}
});
}
});
});
wx.error(function(res) {
// config信息验证失败会执行error函数如签名过期导致验证失败具体错误信息可以打开config的debug模式查看也可以在返回的res参数中查看对于SPA可以在这里更新签名。
console.log("出现错误", res);
});
}
}
})
// #endif
// #ifdef MP-WEIXIN
uni.chooseAddress({
success: res => {
console.log(res)
this.addData = res
},
fail: error => {
console.log(error)
},
complete: res => {
// console.log(123);
setTimeout(() => {
this.canReload = true
}, 500)
}
})
// #endif
},
submitLock() {
let url = 'warehouse_movein'
let data = this.handelList.map(item => {
return {
prize_code: item.prize_code,
number: item.chooseNum
}
})
// console.log(data)
// return
if (this.subTab[this.subTabCur].id == 4) {
url = 'warehouse_remove'
}
this.req({
url,
data: {
recovery_info: JSON.stringify(data)
},
success: res => {
if (res.status == 1) {
this.close('model')
this.$c.toast({
title: res.msg,
duration: 500,
success: () => {
this.tabChange(this.tabCur)
}
})
}
}
})
},
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
}
})
this.req({
url: 'warehouse_send',
data: {
recovery_info: JSON.stringify(data),
type: this.subTab[this.subTabCur].id,
name: this.addData.userName,
mobile: this.addData.telNumber,
address: this.addData.provinceName +
this.addData.cityName +
this.addData.countyName +
this.addData.detailInfo,
// name: '张三',
// mobile: '13355852333',
// address: '收货地址收货地址',
message: this.remark
// ad_id: uni.getStorageSync('_ad_id')
},
success: async res => {
if (res.status == 1) {
this.close('sendPop')
this.remark = ''
if (res.data.status == 1) {
const status = await this.$c.wxMpPay({
data: res.data.res
})
if (status == 'success') {
this.tabChange(this.tabCur)
}
} else {
this.$c.toast({
title: res.msg,
duration: 500,
success: () => {
this.tabChange(this.tabCur)
}
})
}
}
}
})
},
submitChange() {
let data = this.handelList.map(item => {
return {
prize_code: item.prize_code,
number: item.chooseNum
}
})
// console.log(data)
// return
this.req({
url: 'warehouse_recovery',
data: {
recovery_info: JSON.stringify(data),
type: this.subTab[this.subTabCur].id
},
success: res => {
if (res.status == 1) {
this.close('changePop')
this.zhanshiMoney = 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
}
},
getList({
num,
size
}) {
let url = 'warehouse_index'
let data = {
page: num
}
if (this.tabList[this.tabCur].id == 1) {
data.type = this.subTab[this.subTabCur].id
data.keyword = this.keyword
} else {
url = 'warehouse_send_record'
data.status = this.tabList[this.tabCur].status
}
this.req({
url,
data,
Loading: true,
success: res => {
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
}
this.listData = this.listData.concat(res.data.data)
this.mescroll.endByPage(res.data.data.length, res.data.last_page)
}
}
})
},
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()
}
}
}
</script>
<style lang="scss">
.content {
box-sizing: border-box;
padding-bottom: calc(var(--window-bottom) + 240rpx);
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: 30rpx;
font-family: YouSheBiaoTiHei;
&.act {
font-weight: 400;
font-size: 36rpx;
color: #ff873a;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 4rpx;
background: #ff873a;
}
}
&.unact {
font-weight: 400;
font-size: 32rpx;
color: #CCCCCC;
}
}
}
.search {
margin-top: 20rpx;
padding: 0 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
.input-box {
width: 615rpx;
height: 70rpx;
background: #3E291C;
border: 1px solid #ff873a;
box-sizing: border-box;
padding: 0 30rpx;
display: flex;
align-items: center;
input {
flex: 1;
font-size: 26rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #fff;
}
}
.icon {
width: 32rpx;
height: 32rpx;
margin-left: 30rpx;
}
.rule {
width: 55rpx;
height: 61rpx;
}
}
.sub-tab {
display: flex;
padding: 20rpx 30rpx 0;
.sub-tab-item {
width: 155rpx;
height: 57rpx;
font-size: 28rpx;
font-weight: 400;
&.act {
color: #FFFFFF;
text-shadow: #121212 1rpx 0 0, #121212 0 1rpx 0, #121212 -1rpx 0 0, #121212 0 -1rpx 0;
background: url($imgurl+'index/checkTab.png') no-repeat 0 0 / 100% 100%;
}
&.unact {
color: #D6D6D6;
background: url($imgurl+'index/uncheckTab.png') no-repeat 0 0 / 100% 100%;
}
}
.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: #FFFFFF;
text {
color: #ff873a;
}
}
.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: #070707;
padding-bottom: 20rpx;
background: url($imgurl+'shangdai/kuang.png') no-repeat 0 0 / 100% 100%;
.pic {
width: 190rpx;
height: 190rpx;
padding-top: 10rpx;
margin: 0 auto;
position: relative;
.type {
position: absolute;
z-index: 1;
left: -4rpx;
top: 0;
min-width: 70rpx;
height: 32rpx;
padding: 0 10rpx;
background: #792CC7;
font-weight: 400;
font-size: 22rpx;
color: #FFFFFF;
border-radius: 0 0 20rpx 0;
}
.num {
position: absolute;
z-index: 1;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 100%;
height: 32rpx;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.2);
font-size: 24rpx;
font-family: Source Han Sans CN;
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: 10rpx 10rpx 0;
font-size: 24rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
}
.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: 10rpx 0;
display: flex;
justify-content: center;
align-items: center;
.icon {
width: 32rpx;
height: 28rpx;
}
>input {
margin: 0 10rpx;
width: 70rpx;
text-align: center;
font-size: 24rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
}
}
}
}
.order-list {
padding: 1rpx 30rpx 0;
.order-item {
padding: 0 30rpx 30rpx;
background: #3B3941;
border-radius: 20rpx;
margin-top: 30rpx;
.order-hd {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx 0;
.time {
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
}
.status {
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
}
}
.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: 0;
top: 0;
min-width: 60rpx;
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 0 20rpx 0;
}
}
.title {
padding: 10rpx 10rpx 0;
font-size: 24rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #dddddd;
}
}
}
.line {
margin: 20rpx 0;
width: 100%;
height: 1px;
background: #666666;
}
.order-btns {
display: flex;
justify-content: flex-end;
.btn {
width: 160rpx;
height: 60rpx;
background: #3B3941;
border-radius: 30rpx;
border: 2rpx solid #D3AFFF;
font-weight: 400;
font-size: 26rpx;
color: #D3AFFF;
}
.btn2 {
width: 160rpx;
height: 60rpx;
border: 2rpx solid #FFFFFF;
background: #894DD3;
border-radius: 30rpx;
font-weight: 400;
font-size: 26rpx;
color: #FFFFFF;
}
}
}
}
.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
width: 750rpx;
box-sizing: border-box;
padding: 0 30rpx 20rpx;
display: flex;
justify-content: space-around;
align-items: center;
.btn {
width: 201rpx;
height: 66rpx;
font-family: YouSheBiaoTiHei;
font-weight: 400;
font-size: 38rpx;
color: #FFFFFF;
text-shadow: #121212 1rpx 0 0, #121212 0 1rpx 0, #121212 -1rpx 0 0, #121212 0 -1rpx 0;
background: url($imgurl+'shangdai/btn1.png') no-repeat 0 0 / 100% 100%;
}
.btn2 {
width: 201rpx;
height: 66rpx;
font-family: YouSheBiaoTiHei;
font-weight: 400;
font-size: 38rpx;
color: #FFFFFF;
text-shadow: #121212 1rpx 0 0, #121212 0 1rpx 0, #121212 -1rpx 0 0, #121212 0 -1rpx 0;
background: url($imgurl+'shangdai/btn2.png') no-repeat 0 0 / 100% 100%;
}
.btn1 {
width: 378rpx;
height: 80rpx;
}
}
.change-pop {
padding: 0 30rpx 100px;
box-sizing: border-box;
background: #1C1B20;
position: relative;
&::after {
content: '';
position: absolute;
top: -62rpx;
left: 0;
width: 750rpx;
height: 62rpx;
background: url($imgurl+'common/ding.png') no-repeat 0 0 / 100% 100%;
}
.change-pop-hd {
padding: 30rpx 0;
position: relative;
text-align: center;
font-size: 32rpx;
font-family: Source Han Sans CN;
font-weight: 500;
color: #ffffff;
.close {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 60rpx;
height: 60rpx;
}
}
.change-pop-bd {
padding: 0 30rpx 30rpx;
background: #3B3941;
border-radius: 20rpx;
.bd-top {
display: flex;
justify-content: space-between;
padding: 30rpx 0;
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
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: #000000;
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-family: Source Han Sans CN;
font-weight: 400;
color: #222222;
}
.num {
position: absolute;
z-index: 1;
left: 0;
bottom: 0;
height: 32rpx;
width: 100%;
box-sizing: border-box;
padding: 0 10rpx;
background: rgba(0, 0, 0, 0.6);
font-size: 24rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
}
}
.title {
padding: 10rpx 10rpx 0;
font-size: 24rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #dddddd;
}
.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 {
width: 286rpx;
height: 116rpx;
background: url($imgurl+'common/payBtn.png') no-repeat 0 0 / 100% 100%;
display: flex;
justify-content: center;
font-weight: 500;
color: #7825DE;
>text {
margin-top: 32rpx;
}
}
}
.send-pop {
padding: 0 30rpx 100px;
box-sizing: border-box;
background: #1C1B20;
position: relative;
&::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: 30rpx 0;
position: relative;
text-align: center;
font-size: 32rpx;
font-family: Source Han Sans CN;
font-weight: 500;
color: #ffffff;
.close {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 60rpx;
height: 60rpx;
}
}
.send-pop-card {
padding: 0 30rpx 30rpx;
background: #3B3941;
border-radius: 20rpx;
.card-top {
display: flex;
justify-content: space-between;
padding: 30rpx 0;
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
>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: 0;
top: 0;
height: 32rpx;
min-width: 60rpx;
box-sizing: border-box;
padding: 0 10rpx;
background: rgba(0, 0, 0, 0.5);
font-size: 24rpx;
font-weight: 400;
border-radius: 20rpx 0 20rpx 0;
color: #ffffff;
}
}
.title {
padding: 10rpx 10rpx 0;
font-size: 24rpx;
font-weight: 400;
color: #dddddd;
}
}
}
.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: #FFFFFF;
}
.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: 32rpx;
height: 32rpx;
}
}
.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: #ffffff;
text {
color: #FFFFFF;
}
}
.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: #ffffff;
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: 406rpx;
height: 116rpx;
background: url($imgurl+'common/payBtn.png') no-repeat 0 0 / 100% 100%;
display: flex;
justify-content: center;
font-weight: 500;
color: #7825DE;
>text:nth-child(1) {
font-size: 28rpx;
margin-top: 32rpx;
}
}
}
.model {
width: 650rpx;
background: #3B3941;
border-radius: 30rpx;
border: 2rpx solid #D3AFFF;
box-sizing: border-box;
padding: 0 50rpx;
.model-hd {
padding: 40rpx 0;
text-align: center;
font-size: 36rpx;
font-family: Source Han Sans CN;
font-weight: 500;
color: #ffffff;
}
.model-bd {
text-align: center;
padding: 10rpx 0;
font-size: 32rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
}
.model-ft {
padding: 50rpx 0;
display: flex;
justify-content: space-between;
.model-btn {
width: 230rpx;
height: 80rpx;
border: 2rpx solid #D3AFFF;
border-radius: 40rpx;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
font-size: 32rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #D3AFFF;
&.act {
border: 2rpx solid #FFFFFF;
background: #894DD3;
color: #FFFFFF;
}
}
}
}
}
.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: 750rpx;
height: 500rpx;
padding: 0 30rpx 30rpx;
background: #1F1927;
.res-item {
width: 100%;
.pic {
width: 152rpx;
height: 124rpx;
position: relative;
}
.item-info {
padding: 30rpx 10rpx 10rpx;
position: relative;
z-index: 1;
.title {
margin-top: 10rpx;
font-weight: 400;
font-size: 32rpx;
color: #FFFFFF;
}
}
}
}
.res-pop-ft {
width: 244rpx;
height: 116rpx;
margin: 112rpx auto 0;
box-sizing: border-box;
background: url($imgurl+'common/jixuchou.png') no-repeat 0 0 / 100% 100%;
>text {
color: #7825DE;
margin-top: 28rpx;
}
}
}
</style>