1938 lines
41 KiB
Vue
1938 lines
41 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">
|
||
<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"
|
||
:style="{backgroundColor: getBgColor(a.shang_title), color: getTextColor(a.shang_title)}">
|
||
{{ 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" disabled="true" @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 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 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="">兑换确认</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="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-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>
|
||
</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.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 flex center">
|
||
<view class="model-bd">{{ lockMsg }}</view>
|
||
</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>
|
||
</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 center 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
|
||
}
|
||
var total = this.handelList.reduce(
|
||
(pre, item) => pre + item.chooseNum * item.goodslist_money,
|
||
0
|
||
)
|
||
console.log("8888888", total);
|
||
return 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 = []
|
||
|
||
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()
|
||
},
|
||
|
||
// 设置背景颜色
|
||
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;
|
||
background-color: #FFFFFF;
|
||
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: 25rpx;
|
||
|
||
&.act {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
|
||
&::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: #CCCCCC;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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: #333333;
|
||
background: url($imgurl+'index/checkTab.png') no-repeat 0 0 / 100% 100%;
|
||
}
|
||
|
||
&.unact {
|
||
color: #333333;
|
||
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: #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: 40rpx;
|
||
height: 37rpx;
|
||
}
|
||
|
||
>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
|
||
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: #333333;
|
||
// 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: 30rpx;
|
||
color: #333333;
|
||
// 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: #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%;
|
||
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: #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-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: 24rpx;
|
||
font-weight: 500;
|
||
color: #CDEF27;
|
||
}
|
||
}
|
||
|
||
.send-pop {
|
||
padding: 0 30rpx 100px;
|
||
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: #CDEF27;
|
||
|
||
>text:nth-child(1) {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.model {
|
||
width: 480rpx;
|
||
height: 160rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 30rpx;
|
||
box-sizing: border-box;
|
||
|
||
.model-bd {
|
||
text-align: center;
|
||
padding: 10rpx 0;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.model-ft {
|
||
width: 100%;
|
||
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: #D8FD24;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
height: 240rpx;
|
||
padding: 0 30rpx 30rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
|
||
.res-item {
|
||
width: 100%;
|
||
|
||
.pic {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.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: 112rpx auto 0;
|
||
box-sizing: border-box;
|
||
background: url($imgurl+'common/jixuchou.png') no-repeat 0 0 / 100% 100%;
|
||
|
||
>text {
|
||
color: #333333;
|
||
margin-top: #333333;
|
||
}
|
||
}
|
||
}
|
||
</style> |