1858 lines
48 KiB
Vue
1858 lines
48 KiB
Vue
<template>
|
||
<view class="order-page">
|
||
<!-- <HeaderCom></HeaderCom> -->
|
||
<view class="header">
|
||
<view class="point-icon">积分</view>
|
||
<view class="point">{{infoDetail.points || 0}}</view>
|
||
</view>
|
||
|
||
<view class="tab">
|
||
<view class="tab-item" :class="{'active':tabIndex === index}" v-for="(item,index) in tabList" :key="index"
|
||
@click="tabCk(index)">
|
||
{{item.label}}
|
||
<view class="tab-active" v-if="tabIndex === index"></view>
|
||
<view class="heng" v-else></view>
|
||
<!-- <image src="@/static/mine/tab_bottom.png" mode="" class="tab-img" v-if="tabIndex === index"></image> -->
|
||
</view>
|
||
</view>
|
||
<!-- <view style="padding-top: 300rpx;" v-if="list.length === 0">
|
||
<empty></empty>
|
||
</view> -->
|
||
<!-- tabIndex === 0 && scrollTop <= listHeight -->
|
||
<!-- height: calc(100vh - 636rpx); -->
|
||
<!-- 148rpx -->
|
||
<!-- :style="{height:(tabIndex === 0 && scrollTop <= listHeight) ? `height: calc(100vh - 636rpx)` : `height: calc(100vh - 488rpx)`}" -->
|
||
<scroll-view class="scroll-list-view" :class="{maxHeight:list.length > 0 && (tabIndex === 0 && scrollTop <= listHeight)}" scroll-y="true" ref="scrollView" scroll-with-animation
|
||
@scrolltolower="scrolltolower" @scroll="handleScroll">
|
||
<view class="list" v-for="(item,index) in list" :key="index" @click="rowCk(item,index)">
|
||
<image src="@/static/new/address/s.png" mode="" class="select-icon"
|
||
v-if="item.visible && tabIndex === 0"></image>
|
||
<image src="@/static/new/address/no.png" mode="" class="select-icon"
|
||
v-if="!item.visible && tabIndex === 0"></image>
|
||
<view class="item" :class="{recycled:type === 'RECYCLED'}">
|
||
<view class="box-icon">
|
||
<image v-if="item.productCoverResource" :src="item.productCoverResource.url" mode="aspectFit"
|
||
class="shop-icon"></image>
|
||
</view>
|
||
|
||
<view class="detail">
|
||
<view class="name">{{item.productAbbreviation}}</view>
|
||
<view class="ponit" v-if="tabIndex === 0" style="min-height: 34rpx;">
|
||
|
||
<text>发货截止时间：{{item.shipExpiredTime}}</text>
|
||
<!-- <text v-if="item.exceedType">{{item.remainingTime}}</text> -->
|
||
<!-- <view v-else style="display:flex;align-items:center"> -->
|
||
<!-- <image src="@/static/mine/info.png" mode="" style="width: 30rpx;height: 30rpx;margin-right: 8rpx;"></image> -->
|
||
<!-- {{item.remainingTime}} -->
|
||
<!-- </view> -->
|
||
<!-- <view v-else style="color:#d81e06;display:flex;align-items:center">
|
||
<image src="@/static/mine/info.png" mode="" style="width: 30rpx;height: 30rpx;margin-right: 8rpx;"></image>
|
||
{{item.remainingTime}}
|
||
</view> -->
|
||
</view>
|
||
<view class="ponit" style="height: 34rpx;" v-else></view>
|
||
<!-- <view class="ponit">¥ {{item.salePrice}}</view> -->
|
||
<view class="info">
|
||
<view class="price">{{item.recoveryPoint}} 积分</view>
|
||
<view class="num"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="padding-top: 200rpx;" v-if="list.length === 0">
|
||
<empty></empty>
|
||
</view>
|
||
<view class="no-data" v-if="total == list.length && list.length > 0" ref="targetElement">没有更多了～</view>
|
||
<!-- 商品 -->
|
||
<view id="myView" v-if="(total == list.length && list.length > 0) || list.length === 0">
|
||
<view class="shop-title">猜你喜欢</view>
|
||
<view class="shop-list">
|
||
<view class="item" v-for="(item,index) in shopList" :key="index" @click="goDetail(item)">
|
||
<view class="shop">
|
||
<image v-if="item.coverResource" :src="item.coverResource.url" class="shop-img"
|
||
mode="aspectFit"></image>
|
||
</view>
|
||
<view class="name">{{item.abbreviation}}</view>
|
||
<view class="point">
|
||
<image src="@/static/an/point.gif" class="point-icon" mode=""></image>
|
||
{{item.point.mall}}
|
||
<!-- {{item.point.mall | numberFormat(item.point.mall)}} -->
|
||
</view>
|
||
<!-- <view class="price">¥{{item.price.sale}}</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="footer" v-if="tabIndex === 0 && scrollTop <= listHeight && list.length > 0">
|
||
<view class="left" @click="selectAll()">
|
||
<image src="@/static/new/address/s.png" mode="" class="select-icon" v-if="isAll"></image>
|
||
<image src="@/static/new/address/no.png" mode="" class="select-icon" v-else></image>
|
||
全选
|
||
</view>
|
||
<view class="footer-btn">
|
||
<view class="btn" @click.stop="boxRecovery()">兑换</view>
|
||
<view class="btn" @click.stop="deliver()" v-if="isNoExceed">发货</view>
|
||
<view class="btn" @click.stop="handleCustomer()" v-else>联系客服</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="footer" v-if="tabIndex === 0">
|
||
<view class="left" @click="selectAll()">
|
||
<image src="@/static/new/address/s.png" mode="" class="select-icon" v-if="isAll"></image>
|
||
<image src="@/static/new/address/no.png" mode="" class="select-icon" v-else></image>
|
||
全选
|
||
</view>
|
||
<view class="footer-btn">
|
||
<view class="btn" @click.stop="boxRecovery()">兑换</view>
|
||
<view class="btn" @click.stop="deliver()">发货</view>
|
||
</view>
|
||
</view> -->
|
||
<popup-view v-model="conversionShow" mode="bottom" border-radius="15" zIndex="1000">
|
||
<view class="popup-main">
|
||
<view class="header-dlg">
|
||
<view class="title">确认订单</view>
|
||
<image src="@/static/new/mine/close.png" class="close" mode="" @click="conversionShow = false">
|
||
</image>
|
||
</view>
|
||
<scroll-view scroll-y class="shop">
|
||
<view class="item" v-for="(item,index) in conversionDataList" :key="index">
|
||
<view class="left">
|
||
<image :src="item.productCoverResource.url" class="shop-img" mode=""></image>
|
||
</view>
|
||
<view class="detail">
|
||
<view class="name">{{item.productAbbreviation}}</view>
|
||
<view class="point" style="height: 34rpx;"></view>
|
||
<!-- <view class="point">¥{{item.salePrice}}</view> -->
|
||
<view class="price">
|
||
<view class="value">回收积分：{{item.recoveryPoint}}</view>
|
||
<view class="num">X1</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="ponit">
|
||
<view class="title">兑换积分数</view>
|
||
<view class="value">{{totalPoint}}</view>
|
||
</view>
|
||
<view class="conversion" @click="conversion">确认兑换</view>
|
||
</view>
|
||
</popup-view>
|
||
<popup-view v-model="show" mode="bottom" border-radius="15" zIndex="1000">
|
||
<view class="popup-main">
|
||
<!-- <view class="header-dlg">
|
||
<view class="title">提取</view>
|
||
<image src="@/static/new/mine/close.png" class="close" mode="" @click="show = false">
|
||
</image>
|
||
</view> -->
|
||
<view class="address" @click="goAddress">
|
||
<view class="detail" v-if="address.id">
|
||
<view class="address-info">
|
||
<view class="info">
|
||
<image src="@/static/zy/index/address.png" mode="aspectFit" class="address-icon">
|
||
</image>
|
||
<view class="name">{{address.receiver}}</view>
|
||
<view class="phone">{{address.phone}}</view>
|
||
</view>
|
||
<view class="address-detail">{{address.province}} {{address.city}} {{address.area}}
|
||
{{address.address}}
|
||
</view>
|
||
</view>
|
||
|
||
<image src="@/static/zy/index/jt.png" mode="aspectFit" class="arr-icon"></image>
|
||
</view>
|
||
<view class="detail" v-else>
|
||
<view class="address-info">
|
||
<view class="info">
|
||
<view class="name">选择收货地址，让快递到家~</view>
|
||
</view>
|
||
</view>
|
||
<image src="@/static/zy/index/jt.png" mode="aspectFit" class="arr-icon"></image>
|
||
</view>
|
||
<!-- <image src="" mode="aspectFit" class="edit-icon"></image> -->
|
||
</view>
|
||
<scroll-view scroll-y class="shop">
|
||
<template v-if="previewData">
|
||
<view class="item" v-for="(item,index) in previewData.products" :key="index">
|
||
<view class="left">
|
||
<image v-if="item.coverResource" :src="item.coverResource.url" class="shop-img" mode="">
|
||
</image>
|
||
</view>
|
||
<view class="detail">
|
||
<view class="name">{{item.abbreviation}}</view>
|
||
<!-- <view class="point">　</view> -->
|
||
<!-- <view class="price">
|
||
<view class="point">¥ {{item.price.sale}}</view>
|
||
<view class="point">X1</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
</scroll-view>
|
||
<view class="other">
|
||
<view class="item">
|
||
<view class="label">商品数量</view>
|
||
<view class="value" v-if="previewData">{{previewData.quantity}}</view>
|
||
</view>
|
||
|
||
<view class="item">
|
||
<view class="label">邮费</view>
|
||
<view class="value" v-if="previewData">¥{{Number(previewData.deliveryFee)}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mains" v-if="payList.length > 0 && previewData && previewData.deliveryFee > 0">
|
||
<view class="pay" v-for="(item,index) in payList" :key="index" @click="payChange(index,item)">
|
||
<view class="left">
|
||
<image :src="item.img" mode="aspectFit" class="pay-icon"></image>
|
||
{{item.label}}
|
||
</view>
|
||
<image src="@/static/new/address/s.png" mode="" class="select-icon" v-if="item.visible"></image>
|
||
<image src="@/static/new/address/no.png" mode="" class="select-icon" v-else></image>
|
||
</view>
|
||
</view>
|
||
<view class="agreement" @click="agreementVisible = !agreementVisible">
|
||
<image src="@/static/new/address/s.png" mode="" class="agreement-icon" v-if="agreementVisible"></image>
|
||
<image src="@/static/new/address/no.png" mode="" class="agreement-icon" v-else></image>
|
||
我已满18岁，已阅读并同意
|
||
<text class="agreement-color" @click.stop="agreementCk('index')">《用户协议》、</text>
|
||
<text class="agreement-color" @click.stop="agreementCk('privacy')">《隐私政策》、</text>
|
||
<text class="agreement-color" @click.stop="agreementCk('nonage-rule')">《儿童个人信息保护规则》、</text>
|
||
<text class="agreement-color" @click.stop="agreementCk('nonage')">《支付服务协议》</text>
|
||
</view>
|
||
<view class="conversion" @click="submit" v-if="previewData">确认发货 ¥{{Number(previewData.totalAmount)}}</view>
|
||
</view>
|
||
</popup-view><!-- 去充值 -->
|
||
<popup-view v-model="isTopUp" mode="bottom" border-radius="15" z-index="1000">
|
||
<coinDeficitCom @close="closeTop" @sucClose="sucClose"></coinDeficitCom>
|
||
</popup-view>
|
||
|
||
<view class="custom-toast" v-if="isTip">
|
||
<view class="toast-txt">支付成功</view>
|
||
</view>
|
||
|
||
<!-- 兑换弹框 -->
|
||
<popup-view v-model="logOutvisible" mode="center" border-radius="15" zIndex="1000">
|
||
<view class="log-out">
|
||
<view class="log-out-tip">是否确认将商品进行兑换？<br />确认后即将商品兑换成<text
|
||
style="color: #E55353;">{{totalPoint}}</text>积分，无法再进行提货。</view>
|
||
<view class="log-out-footer">
|
||
<view class="cancel" @click="logOutvisible = false">取消</view>
|
||
<view class="shu"></view>
|
||
<view class="log-out-submit" @click="submitLogOut">确定</view>
|
||
</view>
|
||
</view>
|
||
</popup-view>
|
||
<!-- 确认发货弹框 -->
|
||
<popup-view v-model="deliverVisible" mode="center" border-radius="15" zIndex="1000">
|
||
<view class="log-out">
|
||
<view class="log-out-tip">单次提取≥{{detail.num}}件商品包邮<template v-if="detail.exclude.length > 0">（{{detail.exclude.join(',')}}地区除外）</template>。</view>
|
||
<view class="log-out-footer">
|
||
<view class="cancel" @click="deliverVisible = false">取消</view>
|
||
<view class="shu"></view>
|
||
<view class="log-out-submit" @click="submitDeliver">确定</view>
|
||
</view>
|
||
</view>
|
||
</popup-view>
|
||
|
||
|
||
|
||
<!-- 弹窗 -->
|
||
<view class="dlg" v-if="activityShow" @click="activityClose">
|
||
<view class="activity-main" @click.stop="">
|
||
<image src="@/static/new/xsmh.png" mode="" class="dlg-title"></image>
|
||
<!-- <image src="@/static/new/mryh.png" mode="" class="dlg-title" v-if="activityDetail.source === 'PREFERENTIAL_DAY'"></image>
|
||
<image src="@/static/new/xsmh.png" mode="" class="dlg-title" v-if="activityDetail.source === 'ROOKIE'"></image>
|
||
<image v-if="activityDetail.coverResource" :src="activityDetail.coverResource.url" mode="aspectFit" class="activity-img" @click="goActivityDetail"></image> -->
|
||
<image src="" mode="aspectFit" class="activity-img" @click="goActivityDetail"></image>
|
||
<image src="@/static/new/box/hdgm.png" mode="aspectFit" class="now-buy" @click="goActivityPre"></image>
|
||
<image src="@/static/order/close.png" mode="" class="dlg-close-img" @click="activityClose"></image>
|
||
</view>
|
||
</view>
|
||
<!-- 所有页面的弹框 -->
|
||
<page-popup page="/pages/mine/boxRecrd"></page-popup>
|
||
<template v-if="isPayDlgVisible">
|
||
<isPayDlgVue @isOk="isPayStatus" @isCancel="isCancelCk" v-if="isPayDlgVisible" @againPay="againPay"></isPayDlgVue>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
myMixins
|
||
} from "@/mixins/mixins.js";
|
||
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ? `${uni.getSystemInfoSync().statusBarHeight}px` : '20px'
|
||
import {
|
||
boxRecordApi,
|
||
boxRecoveryApi,
|
||
recoveryBatchApi,
|
||
deliveryReviewBatchApi,
|
||
deliveryBatchApi,
|
||
orderPaidApi
|
||
} from '@/API/index.js'
|
||
|
||
import {
|
||
productTagsApi,
|
||
productApi,
|
||
|
||
} from '@/API/product.js'
|
||
import {
|
||
userInfo,
|
||
userAddress
|
||
} from '@/API/user.js'
|
||
import HeaderCom from '@/pages/components/header.vue'
|
||
import {
|
||
mathAdd,mathMul
|
||
} from '@/utils/mathUtils.js'
|
||
import coinDeficitCom from '@/pages/index/components/coinDeficit.vue'
|
||
import { carriageGetRule,productChannelApi,productRecommendChannel } from '@/API/shop.js'
|
||
import reportClickFn from '@/utils/report.js'
|
||
import isPayDlgVue from '@/pages/components/isPayDlg.vue'
|
||
export default {
|
||
mixins: [myMixins],
|
||
data() {
|
||
return {
|
||
statusBarHeight,
|
||
tabList: [{
|
||
label: "待使用",
|
||
value: 'TO_BE_USE'
|
||
},
|
||
{
|
||
label: "已回收",
|
||
value: 'RECYCLED'
|
||
}
|
||
],
|
||
tabIndex: 0,
|
||
list: [],
|
||
listIndex: 0,
|
||
type: '',
|
||
page: 1,
|
||
total: 0,
|
||
conversionShow: false,
|
||
conversionDataList: [],
|
||
conversionData: {
|
||
productCoverResource: {
|
||
url: ""
|
||
}
|
||
},
|
||
infoDetail: {},
|
||
isAll: false,
|
||
totalPoint: 0,
|
||
show: false,
|
||
address: {},
|
||
deliverList: [],
|
||
previewData: {
|
||
products:[],
|
||
quantity:"",
|
||
deliveryFee:"",
|
||
totalAmount:""
|
||
},
|
||
quantity: 1,
|
||
productName: '',
|
||
timer: null,
|
||
isTopUp: false,
|
||
isTip: false,
|
||
logOutvisible: false,
|
||
shopList: [],
|
||
shopPage: 1,
|
||
isViewShow: false, //是否在可视区域
|
||
scrollTop:0,
|
||
listHeight:0,
|
||
activityShow:false,
|
||
payList:[],
|
||
payType:'',
|
||
deliverVisible:false,
|
||
detail:{
|
||
exclude:[]
|
||
},
|
||
isBtnStatus:false,//防止点击多次
|
||
isPayDlgVisible:false,
|
||
agreementVisible:false,
|
||
timers:null,
|
||
isNoExceed:true,//是否有发货按钮
|
||
}
|
||
},
|
||
components: {
|
||
HeaderCom,
|
||
coinDeficitCom,
|
||
isPayDlgVue
|
||
},
|
||
// onLoad(opation) {
|
||
// this.boxRecord()
|
||
// this.getUserInfo()
|
||
// },
|
||
watch: {
|
||
isViewShow() {
|
||
if (this.isViewShow) {
|
||
this.getProduct()
|
||
}
|
||
}
|
||
},
|
||
onShow() {
|
||
this.tabIndex = 0
|
||
if (uni.getStorageSync('box-token')) {
|
||
// this.getAddress()
|
||
// this.getDeliveryReviewBatch()
|
||
// this.getCarriageGetRule()
|
||
// this.isAll = false
|
||
// this.page = 1
|
||
// this.shopPage = 1
|
||
// this.boxRecord()
|
||
// this.getUserInfo()
|
||
this.isAll = false
|
||
this.page = 1
|
||
this.shopPage = 1
|
||
this.boxRecord()
|
||
this.getUserInfo()
|
||
}else{
|
||
this.$api.msg('暂未登录，请先登录')
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url:`/pages/login/login`
|
||
})
|
||
},1000)
|
||
}
|
||
|
||
uni.$on('backAddressParams', params => {
|
||
if (params.id) {
|
||
console.log("paramsparamsparams：",params)
|
||
this.address = params
|
||
this.getDeliveryReviewBatch()
|
||
}
|
||
});
|
||
|
||
},
|
||
mounted() {
|
||
try {
|
||
if (uni.getStorageSync('box-token')) {
|
||
// this.getAddress()
|
||
// this.getDeliveryReviewBatch()
|
||
this.getCarriageGetRule()
|
||
this.isAll = false
|
||
this.page = 1
|
||
this.shopPage = 1
|
||
// this.boxRecord()
|
||
this.getUserInfo()
|
||
}else{
|
||
this.$api.msg('暂未登录，请先登录')
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url:`/pages/login/login`
|
||
})
|
||
},1000)
|
||
}
|
||
// uni.$on('backAddressParams', params => {
|
||
// if (params.id) {
|
||
// console.log("paramsparamsparams：",params)
|
||
// this.address = params
|
||
// this.getDeliveryReviewBatch()
|
||
// }
|
||
// });
|
||
// this.deliverList = JSON.parse(uni.getStorageSync('deliverList'))
|
||
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
}
|
||
},
|
||
methods: {
|
||
handleCustomer() {
|
||
uni.navigateTo({
|
||
url:`/pages/mine/customer`
|
||
})
|
||
|
||
},
|
||
// 用户协议 隐私政策
|
||
agreementCk(type){
|
||
uni.navigateTo({
|
||
url:`/pages/agreement/${type}`
|
||
})
|
||
},
|
||
updateRemainingTime() {
|
||
const currentTime = Math.floor(Date.now() / 1000);
|
||
this.list.forEach((item,index) => {
|
||
if(item.shipExpiredTime){
|
||
const targetTime = new Date(item.shipExpiredTime).getTime() / 1000;
|
||
// console.log("+++++++++++++=",targetTime)
|
||
const countdown = targetTime - currentTime;
|
||
const secondsPerDay = 86400; // 1天有86400秒
|
||
// 将时间戳除以每天的秒数
|
||
|
||
if (isNaN(targetTime)) {
|
||
this.$set(this.list[index],'remainingTime',``)
|
||
this.$set(this.list[index],'exceedType',false)
|
||
}else if(countdown > secondsPerDay){
|
||
const days = parseInt(countdown / secondsPerDay);
|
||
|
||
|
||
this.$set(this.list[index],'remainingTime',`发货截止时间：${days}天`)
|
||
this.$set(this.list[index],'exceedType',true)
|
||
}else if (countdown <= 0) {
|
||
this.$set(this.list[index],'remainingTime',`发货截止时间：已过期`)
|
||
// this.$set(this.list[index],'remainingTime','已超时无法提货商品,如有疑问请联系客服')
|
||
this.$set(this.list[index],'exceedType',false)
|
||
} else {
|
||
const hours = Math.floor(countdown / 3600);
|
||
const minutes = Math.floor((countdown % 3600) / 60);
|
||
const seconds = countdown % 60;
|
||
this.$set(this.list[index],'remainingTime',`发货截止时间：${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`)
|
||
this.$set(this.list[index],'exceedType',true)
|
||
}
|
||
}
|
||
});
|
||
// console.log("+++++++++++++=",this.list)
|
||
},
|
||
startCountdown() {
|
||
this.updateRemainingTime()
|
||
this.timers = setInterval(() => {
|
||
this.updateRemainingTime()
|
||
},1000)
|
||
},
|
||
|
||
padZero(num) {
|
||
return num.toString().padStart(2, '0');
|
||
},
|
||
|
||
goPage(type){
|
||
uni.navigateTo({
|
||
url:`/pages/agreement/nonage`
|
||
})
|
||
},
|
||
againPay(){
|
||
this.submit()
|
||
},
|
||
isCancelCk(){
|
||
this.isPayDlgVisible = false
|
||
},
|
||
isPayStatus(){
|
||
this.getOrderPaid(this.orderNo,'click')
|
||
},
|
||
getCarriageGetRule(){
|
||
carriageGetRule().then(res => {
|
||
if(res.code === 200){
|
||
console.log(res)
|
||
this.detail = res.data
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
}).catch(err => {
|
||
|
||
})
|
||
},
|
||
activityClose() {
|
||
this.activityShow = false
|
||
},
|
||
goActivityPre(){
|
||
|
||
},
|
||
// 获取商品
|
||
getProduct(tagId) {
|
||
productRecommendChannel({
|
||
page: this.shopPage,
|
||
size: 10,
|
||
tagId,
|
||
}).then(res => {
|
||
uni.hideLoading()
|
||
if (res.code === 200) {
|
||
|
||
// this.total = res.data.total
|
||
if (this.shopPage > 1) {
|
||
this.shopList = [...this.shopList, ...res.data.content]
|
||
} else {
|
||
this.shopList = res.data.content
|
||
}
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
// productApi({
|
||
// page: this.shopPage,
|
||
// size: 10,
|
||
// tagId,
|
||
// }).then(res => {
|
||
// uni.hideLoading()
|
||
// if (res.code === 200) {
|
||
|
||
// // this.total = res.data.total
|
||
// if (this.shopPage > 1) {
|
||
// this.shopList = [...this.shopList, ...res.data.content]
|
||
// } else {
|
||
// this.shopList = res.data.content
|
||
// }
|
||
// } else {
|
||
// this.$api.msg(res.message)
|
||
// }
|
||
// })
|
||
},
|
||
|
||
// 查看详情
|
||
goDetail(item) {
|
||
uni.navigateTo({
|
||
url: `/pages/shop/detail?id=${item.id}`
|
||
})
|
||
},
|
||
handleScroll(event) {
|
||
this.$nextTick(() => {
|
||
this.scrollTop = event.detail.scrollTop
|
||
// console.log('滚动条位置：', this.scrollTop);
|
||
if(this.total == this.list.length && this.list.length > 0){
|
||
this.isViewShow = true
|
||
}
|
||
// if(this.scrollTop > this.listHeight){
|
||
|
||
// }
|
||
// this.isViewShow
|
||
// this.getScrollElementPosition()
|
||
});
|
||
// this.$nextTick(() => {
|
||
// uni.createSelectorQuery().in(this).select('.scroll-list-view').boundingClientRect((rect) => {
|
||
// const scrollViewHeight = rect.height;
|
||
// console.log('scroll-view 的高度为:', scrollViewHeight);
|
||
// }).exec();
|
||
// // this.checkIfViewIsVisible();
|
||
// })
|
||
},
|
||
// getScrollElementPosition() {
|
||
// const query = uni.createSelectorQuery().in(this.$refs.scrollView);
|
||
// query.select('.no-data').boundingClientRect((rect) => {
|
||
// console.log('元素位置：', rect);
|
||
// }).exec();
|
||
// },
|
||
// 检查 View 是否在可视区域
|
||
// checkIfViewIsVisible() {
|
||
// const target = document.getElementById('myView');
|
||
// if (!target) {
|
||
// console.error('元素未找到或尚未渲染完成');
|
||
// return;
|
||
// }
|
||
// const rect = target.getBoundingClientRect();
|
||
// const windowHeight = window.innerHeight || document.documentElement.clientHeight;
|
||
// if (rect.top >= 0 && rect.bottom <= windowHeight) {
|
||
// this.isViewShow = true
|
||
// console.log('Div 在可视区域内');
|
||
// } else {
|
||
// this.isViewShow = false
|
||
// console.log('Div 不在可视区域内');
|
||
// }
|
||
|
||
// },
|
||
// 代币不足
|
||
coinDeficit() {
|
||
this.isTopUp = true
|
||
},
|
||
closeTop() {
|
||
this.isTopUp = false
|
||
this.getUserInfo()
|
||
},
|
||
sucClose() {
|
||
this.isTopUp = false
|
||
this.isTip = true
|
||
this.getUserInfo()
|
||
setTimeout(() => {
|
||
this.isTip = false
|
||
}, 1500)
|
||
},
|
||
// 获取地址列表
|
||
getAddress() {
|
||
uni.showLoading()
|
||
userAddress({
|
||
page: 1,
|
||
size: 10
|
||
}).then(res => {
|
||
uni.hideLoading()
|
||
if (res.code === 200) {
|
||
res.data.content.forEach(item => {
|
||
if (item.isDefault === 1) {
|
||
this.address = item
|
||
}
|
||
})
|
||
this.addressList = res.data.content
|
||
this.getDeliveryReviewBatch()
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
}).catch(() => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
goAddress() {
|
||
uni.navigateTo({
|
||
url: `/pages/mine/address?type=select`
|
||
})
|
||
},
|
||
// 是否全选
|
||
selectAll() {
|
||
this.isNoExceed = true
|
||
if (this.isAll) {
|
||
this.list.forEach(item => {
|
||
item.visible = false
|
||
})
|
||
} else {
|
||
this.list.forEach(item => {
|
||
if(!item.exceedType){
|
||
this.isNoExceed = false
|
||
}
|
||
// if(item.exceedType){
|
||
item.visible = true
|
||
// }
|
||
|
||
})
|
||
}
|
||
this.isAll = !this.isAll
|
||
},
|
||
// 获取用户信息
|
||
getUserInfo() {
|
||
userInfo().then(res => {
|
||
if (res.code === 200) {
|
||
this.infoDetail = res.data
|
||
console.log("----------------:",this.infoDetail)
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
// 点击当前行
|
||
rowCk(item, index) {
|
||
// this.list.forEach((items, i) => {
|
||
// items.visible = i === index;
|
||
// });
|
||
// this.listIndex = index
|
||
// if(!item.exceedType){
|
||
// return
|
||
// }
|
||
// this.isNoExceed = true
|
||
// this.list[index].visible = !this.list[index].visible;
|
||
this.$set(this.list[index],'visible',!this.list[index].visible)
|
||
let arr = [];
|
||
let allVisible = true;
|
||
|
||
this.list.forEach((items, indexs) => {
|
||
|
||
// hasExceedTypeTrue = array.every(item => item.exceedType)
|
||
if (items.visible) {
|
||
|
||
this.listIndex = indexs
|
||
arr.push(items);
|
||
} else {
|
||
allVisible = false;
|
||
}
|
||
// if(!item.exceedType){
|
||
// this.isNoExceed = false
|
||
// }else{
|
||
// this.isNoExceed = true
|
||
// }
|
||
});
|
||
console.log(this.list)
|
||
console.log(arr.every(items => items.exceedType === true))
|
||
this.isNoExceed = arr.every(items => items.exceedType === true)
|
||
this.isAll = allVisible;
|
||
},
|
||
//批量发货
|
||
deliverAll() {
|
||
let ids = []
|
||
this.list.forEach(item => {
|
||
|
||
})
|
||
},
|
||
//批量回收
|
||
boxRecoveryAll() {},
|
||
goBack() {
|
||
uni.navigateBack()
|
||
},
|
||
boxRecovery() {
|
||
this.conversionDataList = []
|
||
this.totalPoint = 0
|
||
|
||
this.list.forEach(item => {
|
||
if (item.visible) {
|
||
this.conversionDataList.push(item)
|
||
}
|
||
})
|
||
console.log(this.conversionDataList)
|
||
this.totalPoint = this.conversionDataList.reduce((acc, item) => acc + item.recoveryPoint, 0);
|
||
if (this.conversionDataList.length === 0) {
|
||
this.$api.msg('请选择物品')
|
||
return
|
||
}
|
||
this.conversionShow = true
|
||
},
|
||
submitLogOut() {
|
||
let ids = []
|
||
this.conversionDataList.forEach(item => {
|
||
ids.push(item.id)
|
||
})
|
||
uni.showLoading()
|
||
recoveryBatchApi({
|
||
ids: ids
|
||
}).then(res => {
|
||
uni.hideLoading()
|
||
if (res.code === 200) {
|
||
this.logOutvisible = false
|
||
this.isAll = false
|
||
this.page = 1
|
||
this.boxRecord()
|
||
this.conversionShow = false
|
||
this.$api.msg(res.message)
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
conversion() {
|
||
if(this.isBtnStatus){
|
||
return
|
||
}
|
||
this.isBtnStatus = true
|
||
setTimeout(()=>{
|
||
this.isBtnStatus = false;
|
||
}, 2000);
|
||
this.logOutvisible = true
|
||
// let ids = []
|
||
// this.conversionDataList.forEach(item => {
|
||
// ids.push(item.id)
|
||
// })
|
||
|
||
// uni.showLoading()
|
||
// recoveryBatchApi({ids:ids}).then(res => {
|
||
// uni.hideLoading()
|
||
// if (res.code === 200) {
|
||
// this.isAll = false
|
||
// this.page = 1
|
||
// this.boxRecord()
|
||
// this.conversionShow = false
|
||
// this.$api.msg(res.message)
|
||
// } else {
|
||
// this.$api.msg(res.message)
|
||
// }
|
||
// }).catch(err => {
|
||
// uni.hideLoading()
|
||
// })
|
||
|
||
|
||
|
||
// boxRecoveryApi(this.conversionData).then(res => {
|
||
// uni.hideLoading()
|
||
// if (res.code === 200) {
|
||
// this.boxRecord()
|
||
// this.conversionShow = false
|
||
// this.$api.msg(res.message)
|
||
// } else {
|
||
// this.$api.msg(res.message)
|
||
// }
|
||
// }).catch(err => {
|
||
// uni.hideLoading()
|
||
// })
|
||
},
|
||
boxRecord() {
|
||
uni.showLoading()
|
||
boxRecordApi({
|
||
page: this.page,
|
||
size: 10,
|
||
status: this.tabList[this.tabIndex].value
|
||
}).then(res => {
|
||
uni.hideLoading()
|
||
this.total = res.data.total
|
||
res.data.content.forEach(item => {
|
||
item['visible'] = false
|
||
})
|
||
this.getUserInfo()
|
||
if (this.page > 1) {
|
||
this.list = [...this.list, ...res.data.content]
|
||
} else {
|
||
this.list = res.data.content
|
||
}
|
||
console.log("--------list-----------:",this.list)
|
||
this.startCountdown()
|
||
this.listHeight = mathMul(this.total,100)
|
||
this.$nextTick(() => {
|
||
if(this.total == this.list.length && this.list.length > 0){
|
||
this.isViewShow = true
|
||
}
|
||
})
|
||
if(this.list.length === 0 || this.total == this.list.length){
|
||
this.getProduct()
|
||
}
|
||
// this.$nextTick(() => {
|
||
// this.checkIfViewIsVisible();
|
||
// })
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
tabCk(index) {
|
||
this.list = []
|
||
this.shopList = []
|
||
this.shopPage = 1
|
||
this.isViewShow = false
|
||
this.page = 1
|
||
this.tabIndex = index
|
||
this.type = this.tabList[this.tabIndex].value
|
||
this.boxRecord()
|
||
},
|
||
scrolltolower() {
|
||
// if (this.isViewShow) {
|
||
// this.shopPage += 1
|
||
// this.getProduct()
|
||
// } else {
|
||
// if (this.total == this.list.length) {
|
||
// return
|
||
// }
|
||
// this.page += 1
|
||
// this.boxRecord()
|
||
// }
|
||
if (this.total == this.list.length) {
|
||
this.shopPage += 1
|
||
this.getProduct()
|
||
}else{
|
||
this.page += 1
|
||
this.boxRecord()
|
||
}
|
||
// if (this.total == this.list.length) {
|
||
// return
|
||
// }
|
||
// this.page += 1
|
||
// this.boxRecord()
|
||
},
|
||
deliver() {
|
||
this.deliverList = []
|
||
let arr = []
|
||
this.list.forEach(item => {
|
||
if (item.visible) {
|
||
arr.push(item.id)
|
||
}
|
||
})
|
||
if (arr.length === 0) {
|
||
this.$api.msg('请选择物品')
|
||
return
|
||
}
|
||
this.deliverList = arr
|
||
this.deliverVisible = true
|
||
|
||
// 物品预览点击数埋点
|
||
reportClickFn('box_record_review_clk')
|
||
console.log(this.deliverList)
|
||
// this.getDeliveryReviewBatch()
|
||
|
||
// uni.setStorageSync('deliverList',JSON.stringify(arr))
|
||
// uni.navigateTo({
|
||
// url: `/pages/mine/boxConfirm`
|
||
// })
|
||
// uni.navigateTo({
|
||
// url:`/pages/mine/boxConfirm?id=${item.id}&quantity=1`
|
||
// })
|
||
},
|
||
submitDeliver(){
|
||
this.getAddress()
|
||
// this.getDeliveryReviewBatch()
|
||
},
|
||
getDeliveryReviewBatch() {
|
||
uni.showLoading()
|
||
deliveryReviewBatchApi({
|
||
boxRecordIds: this.deliverList,
|
||
userAddressId: this.address.id ? this.address.id : ''
|
||
}).then(res => {
|
||
uni.hideLoading()
|
||
// 物品预览数埋点
|
||
reportClickFn('box_record_review')
|
||
if (res.code === 200) {
|
||
this.previewData = res.data
|
||
this.quantity = this.previewData.quantity
|
||
this.productName = ''
|
||
if(this.previewData.products){
|
||
this.previewData.products.forEach(item => {
|
||
this.productName += `${item.abbreviation}、`
|
||
})
|
||
}
|
||
|
||
|
||
this.payList = []
|
||
this.previewData.methods.forEach(item => {
|
||
let objToAdd = null;
|
||
if (item === 'ALIPAY') {
|
||
objToAdd = {
|
||
label: '支付宝支付',
|
||
type: 'ALIPAY',
|
||
visible: false,
|
||
height: '30rpx',
|
||
width: '30rpx',
|
||
img: '../../static/new/pay/zfb.png',
|
||
};
|
||
} else if (item === 'WECHAT') {
|
||
objToAdd = {
|
||
label: '微信支付',
|
||
type: 'WECHAT',
|
||
visible: false,
|
||
width: '34rpx',
|
||
height: '29rpx',
|
||
img: '../../static/new/pay/wx.png',
|
||
};
|
||
} else if (item === 'POINTS') {
|
||
objToAdd = {
|
||
label: "积分支付",
|
||
type: 'POINTS',
|
||
visible: false,
|
||
img: '../../static/an/point.gif',
|
||
width: '30rpx',
|
||
height: '31rpx'
|
||
};
|
||
} else if (item === 'NONE') {
|
||
objToAdd = {
|
||
label: "无需支付",
|
||
type: 'NONE',
|
||
visible: false,
|
||
img: '',
|
||
width: '32rpx',
|
||
height: '34rpx'
|
||
};
|
||
} else if (item === 'COIN') {
|
||
objToAdd = {
|
||
label: "代币支付",
|
||
type: 'COIN',
|
||
visible: false,
|
||
img: '../../static/an/point.gif',
|
||
width: '32rpx',
|
||
height: '34rpx'
|
||
};
|
||
}
|
||
|
||
// 只有在objToAdd被赋值的情况下才添加到payList
|
||
if (objToAdd) {
|
||
if (objToAdd.type === 'ALIPAY') {
|
||
// 如果是WECHAT类型，则先添加到数组第一位
|
||
this.payList.unshift(objToAdd);
|
||
} else {
|
||
// 其他类型添加到数组末尾
|
||
this.payList.push(objToAdd);
|
||
}
|
||
}
|
||
});
|
||
this.payList[0].visible = true
|
||
console.log("this.payList[0].type:",this.payList)
|
||
this.payType = this.payList[0].type
|
||
this.deliverVisible = false
|
||
this.show = true
|
||
|
||
// if(this.previewData.methods){
|
||
// this.previewData.methods.forEach(item => {
|
||
// if(item === 'ALIPAY'){
|
||
// this.payList.push({label:"支付宝支付",type:'ALIPAY',visible:false,img:'../../static/index/zfb.png',width:'30rpx',height:'30rpx'})
|
||
// }else if(item === 'WECHAT'){
|
||
// this.payList.push({label:"微信支付",type:'WECHAT',visible:false,img:'../../static/index/wx.png',width:'34rpx',height:'29rpx'})
|
||
// }else if(item === 'POINTS'){
|
||
// this.payList.push({label:"积分支付",type:'POINTS',visible:false,img:'../../static/mine/jf.png',width:'30rpx',height:'31rpx'})
|
||
// }else if(item === 'NONE'){
|
||
// this.payList.push({label:"无需支付",type:'NONE',visible:false,img:'',width:'32rpx',height:'34rpx'})
|
||
// }
|
||
// })
|
||
// this.payList[0].visible = true
|
||
// this.payType = this.payList[0].type
|
||
// }
|
||
// this.channelGet()
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
|
||
// 切换支付方式
|
||
payChange(index, item) {
|
||
this.payList.forEach((v, i) => {
|
||
v.visible = false;
|
||
})
|
||
this.payType = item.type
|
||
this.payList[index].visible = !this.payList[index].visible
|
||
// this.payinfoUrl = ''
|
||
},
|
||
submit() {
|
||
if(!this.agreementVisible){
|
||
this.$api.msg("请阅读并同意《用户协议》、《隐私政策》、《儿童个人信息保护规则》、《支付服务协议》")
|
||
return
|
||
}
|
||
clearInterval(this.timer)
|
||
this.timer = null
|
||
if(this.isBtnStatus){
|
||
return
|
||
}
|
||
this.isBtnStatus = true
|
||
setTimeout(()=>{
|
||
this.isBtnStatus = false;
|
||
}, 2000);
|
||
if (JSON.stringify(this.address) === '{}') {
|
||
this.$api.msg('请选择地址')
|
||
return
|
||
}
|
||
let data = {
|
||
userAddressId: this.address.id,
|
||
boxRecordIdList: this.deliverList,
|
||
method: this.payType
|
||
}
|
||
uni.showLoading()
|
||
deliveryBatchApi(data).then(res => {
|
||
uni.hideLoading()
|
||
if (res.code === 200) {
|
||
if(this.previewData.deliveryFee > 0){
|
||
if(res.data.payParams.payinfo){
|
||
window.location.href = res.data.payParams.payinfo
|
||
}
|
||
|
||
}
|
||
this.orderNo = res.data.no
|
||
this.isPayDlgVisible = true
|
||
this.getOrderPaid(res.data.no)
|
||
let clearTime = 0
|
||
this.timer = setInterval(() => {
|
||
this.getOrderPaid(res.data.no)
|
||
clearTime += 3
|
||
if (clearTime == 30) {
|
||
uni.hideLoading()
|
||
clearInterval(this.timer)
|
||
this.timer = null
|
||
// this.$api.msg("未查询到支付结果")
|
||
}
|
||
}, 3000);
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
}).catch(err => {
|
||
// uni.hideLoading()
|
||
})
|
||
|
||
},
|
||
|
||
getOrderPaid(no,types) {
|
||
orderPaidApi({
|
||
no
|
||
}).then(payResult => {
|
||
if (payResult.data) {
|
||
clearInterval(this.timer); // 清除定时器
|
||
this.timer = null;
|
||
this.$api.msg('支付成功')
|
||
this.isPayDlgVisible = false
|
||
this.show = false
|
||
uni.navigateTo({
|
||
url: `/pages/shop/paySuccess?no=${no}&type=record&quantity=${this.quantity}&productName=${this.productName}&price=${this.previewData.totalAmount}`
|
||
})
|
||
uni.hideLoading()
|
||
}else{
|
||
if(types === 'click'){
|
||
this.$api.msg("未查询到支付结果")
|
||
}
|
||
|
||
}
|
||
}).catch(err => {
|
||
clearInterval(this.timer); // 清除定时器
|
||
this.timer = null;
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
// againProduct(item){
|
||
// uni.navigateTo({
|
||
// url:`/pages/product/detail?id=${item.productId}`
|
||
// })
|
||
// }
|
||
},
|
||
onUnload() {
|
||
// 在页面离开时清除定时器
|
||
clearInterval(this.timer);
|
||
},
|
||
onHide(){
|
||
console.log("--------========")
|
||
clearInterval(this.timers);
|
||
this.timers = null
|
||
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background-color: #F5F5F5;
|
||
}
|
||
|
||
.order-page {
|
||
background-image: url('@/static/new/mine/bg.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
padding: 30rpx 32rpx 32rpx 32rpx;
|
||
|
||
.header {
|
||
background-image: url('@/static/new/mine/header.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
width: 684rpx;
|
||
height: 204rpx;
|
||
padding: 40rpx 44rpx;
|
||
|
||
.point-icon {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.point {
|
||
font-size: 64rpx;
|
||
color: #000000;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
|
||
.tab {
|
||
margin-top: 16rpx;
|
||
height: 96rpx;
|
||
padding-top: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.tab-item {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
width: 376rpx;
|
||
height: 96rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
|
||
.tab-active {
|
||
width: 96rpx;
|
||
height: 8rpx;
|
||
background: linear-gradient(90deg, #00AAFF 0%, rgba(0, 170, 255, 0) 100%);
|
||
border-radius: 4rpx 0px 0px 4rpx;
|
||
}
|
||
|
||
.heng {
|
||
width: 96rpx;
|
||
height: 8rpx;
|
||
}
|
||
}
|
||
|
||
.active {
|
||
font-weight: 800;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
}
|
||
|
||
.scroll-list-view {
|
||
// height: calc(100vh - 636rpx);
|
||
height: calc(100vh - 488rpx);
|
||
margin-top: 32rpx;
|
||
|
||
.list {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
|
||
.select-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.item {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 630rpx;
|
||
height: 208rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx;
|
||
margin-bottom: 24rpx;
|
||
margin-left: 24rpx;
|
||
padding-left: 24rpx;
|
||
|
||
.box-icon {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 0 24rpx 24rpx 0;
|
||
background-image: url('@/static/new/shop-bg.png');
|
||
background-size: contain;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.shop-icon {
|
||
width: 142rpx;
|
||
height: 132rpx;
|
||
}
|
||
}
|
||
|
||
.detail {
|
||
margin-left: 24rpx;
|
||
width: 388rpx;
|
||
|
||
.name {
|
||
width: 388rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.ponit {
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.info {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 26rpx;
|
||
|
||
.price {
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.num {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.recycled {
|
||
width: 686rpx;
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
|
||
#myView {
|
||
|
||
// border: 1px solid red;
|
||
.shop-title {
|
||
padding: 20rpx 0;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #000;
|
||
}
|
||
|
||
.shop-list {
|
||
display: grid;
|
||
gap: 22rpx;
|
||
grid-template-rows: 1fr;
|
||
margin: 0px auto;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
// padding: 24rpx;
|
||
border-radius: 8rpx;
|
||
|
||
.item {
|
||
width: 340rpx;
|
||
// height: 436rpx;
|
||
padding-bottom: 12rpx;
|
||
background-color: #fff;
|
||
|
||
.shop {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 340rpx;
|
||
height: 240rpx;
|
||
background-image: url('@/static/new/card-shop.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
border-radius: 8rpx 8rpx 0px 0px;
|
||
|
||
.shop-img {
|
||
// width: 192rpx;
|
||
height: 236rpx;
|
||
}
|
||
}
|
||
|
||
.name {
|
||
width: 304rpx;
|
||
height: 80rpx;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
margin: 16rpx 0 0 16rpx;
|
||
}
|
||
|
||
.point {
|
||
margin: 8rpx 0 0 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 800;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
|
||
.point-icon {
|
||
margin-right: 8rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.price {
|
||
margin-left: 16rpx;
|
||
height: 40rpx;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
display: flex;
|
||
align-items: center;
|
||
text-decoration: line-through;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.maxHeight{
|
||
height: calc(100vh - 636rpx);
|
||
}
|
||
|
||
.footer {
|
||
width: 750rpx;
|
||
height: 144rpx;
|
||
background: #FFFFFF;
|
||
position: fixed;
|
||
bottom: 150rpx;
|
||
left: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 32rpx;
|
||
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
|
||
.select-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
|
||
.footer-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.btn {
|
||
margin-left: 15rpx;
|
||
width: 200rpx;
|
||
height: 96rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
border: 2rpx solid #EBEBEB;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #666666;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.popup-main {
|
||
padding: 0 32rpx 32rpx 32rpx;
|
||
|
||
.address {
|
||
width: 686rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 8rpx;
|
||
padding: 24rpx 0rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.detail {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
|
||
.address-info {
|
||
.info {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.address-icon {
|
||
width: 30rpx;
|
||
height: 40rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.name {
|
||
font-weight: 800;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
// max-width: 250rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.phone {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.address-detail {
|
||
width: 600rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
margin-top: 12rpx;
|
||
}
|
||
}
|
||
|
||
.arr-icon {
|
||
width: 20rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.edit-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.header-dlg {
|
||
width: 100%;
|
||
height: 96rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.title {
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.close {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
}
|
||
|
||
.shop {
|
||
max-height: 410rpx;
|
||
|
||
.item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.left {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
background: linear-gradient(180deg, rgba(155, 180, 204, 0) 0%, #9BB4CC 100%), #FFFFFF, #F5F7FA;
|
||
border-radius: 16px 16px 16px 16px;
|
||
border: 2px solid #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.shop-img {
|
||
width: 142rpx;
|
||
height: 132rpx;
|
||
}
|
||
}
|
||
|
||
.detail {
|
||
margin-left: 24rpx;
|
||
|
||
.name {
|
||
width: 480rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.point {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.price {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 14rpx;
|
||
|
||
.value {
|
||
font-weight: 800;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.num {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.ponit {
|
||
margin-top: 24rpx;
|
||
width: 686rpx;
|
||
height: 104rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 24rpx;
|
||
background-image: url('@/static/new/mine/ts.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
|
||
.title {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.value {
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
}
|
||
|
||
.conversion {
|
||
margin-top: 28rpx;
|
||
width: 686rpx;
|
||
height: 96rpx;
|
||
background: linear-gradient(90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
|
||
border-radius: 16rpx;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.other {
|
||
margin-top: 24rpx;
|
||
height: 192rpx;
|
||
width: 686rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 8rpx;
|
||
|
||
.item {
|
||
height: 96rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
// padding: 0 24rpx;
|
||
.label {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.value {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
}
|
||
}
|
||
|
||
.custom-toast {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100vh;
|
||
top: 0;
|
||
left: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 999999;
|
||
|
||
.toast-txt {
|
||
z-index: 999999;
|
||
border-radius: 6rpx;
|
||
padding: 6rpx 26rpx;
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.log-out {
|
||
width: 590rpx;
|
||
height: 300rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
|
||
.log-out-tip {
|
||
// display: flex;
|
||
// align-items: center;
|
||
height: 200rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: rgba(0, 0, 0, 0.85);
|
||
// line-height: 200rpx;
|
||
text-align: center;
|
||
padding: 44rpx 30rpx 0 30rpx;
|
||
}
|
||
|
||
.log-out-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-top: 2rpx solid rgba(0, 0, 0, 0.06);
|
||
height: 100rpx;
|
||
|
||
.cancel {
|
||
width: 294rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
text-align: center;
|
||
border-right: 1px solid rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.log-out-submit {
|
||
width: 294rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #E55353;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.dlg {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
z-index: 9999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.activity-main{
|
||
flex-direction: column;
|
||
width: 480rpx;
|
||
height: 608rpx;
|
||
background-image: url('@/static/new/box/hdtc.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
.dlg-title{
|
||
display: block;
|
||
margin: 0 auto;
|
||
width: 148rpx;
|
||
height: 52rpx;
|
||
}
|
||
.activity-img{
|
||
width: 448rpx;
|
||
height: 440rpx;
|
||
border-radius: 20rpx;
|
||
display: block;
|
||
margin: 20rpx auto;
|
||
z-index: 2;
|
||
}
|
||
.now-buy{
|
||
width: 348rpx;
|
||
// height: 120rpx;
|
||
display: block;
|
||
margin: -120rpx auto 0 auto;
|
||
z-index: 1;
|
||
}
|
||
.dlg-close-img {
|
||
display: block;
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
z-index: 9999;
|
||
margin: -120rpx auto 0 auto;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mains{
|
||
width: 686rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx;
|
||
margin-bottom: 24rpx;
|
||
// margin-left: 32rpx;
|
||
.pay{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 104rpx;
|
||
padding: 0 24rpx;
|
||
|
||
|
||
.left{
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
display: flex;
|
||
align-items: center;
|
||
.pay-icon{
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
}
|
||
.select-icon{
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.agreement{
|
||
// margin: 40rpx;
|
||
width: 670rpx;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
line-height: 46rpx;
|
||
.agreement-icon{
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 8rpx;
|
||
vertical-align: middle;
|
||
}
|
||
.agreement-color{
|
||
color: #0080FF;
|
||
}
|
||
}
|
||
</style> |