|
@@ -1,648 +1,890 @@
|
|
|
-<template>
|
|
|
- <view class="container">
|
|
|
- <view class="title-box">
|
|
|
- <view class="title-img">
|
|
|
- <image :src="userInfo.avatar" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="title-tit">
|
|
|
- <view class="title-top">
|
|
|
- {{userInfo.nickname || '游客'}}
|
|
|
- </view>
|
|
|
- <view class="title-bottom">
|
|
|
- {{userInfo.phone}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="address-box">
|
|
|
- <view class="address-text">
|
|
|
- 区块链地址:{{name}}
|
|
|
- </view>
|
|
|
- <view class="fuzhi" @click="cope(name)">
|
|
|
- 复制
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="btm" style="height: 44px;"></view>
|
|
|
- <view class="manage-box">
|
|
|
- <view class="manage" @click="navTo('/pages/money/wallet')">
|
|
|
- <image src="../../static/user/user06.png" mode=""></image>
|
|
|
- <view class="manage-title">
|
|
|
- 钱包
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="manage" @click="navTo('/pages/user/personal')">
|
|
|
- <image src="../../static/user/user08.png" mode=""></image>
|
|
|
- <view class="manage-title">
|
|
|
- 实名认证
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="manage" @click="kfOpen()" >
|
|
|
- <image src="../../static/user/user05.png" mode=""></image>
|
|
|
- <view class="manage-title">
|
|
|
- 邀请好友
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="manage">
|
|
|
- <image src="../../static/user/user09.png" mode=""></image>
|
|
|
- <view class="manage-title">
|
|
|
- 提交意见
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="manage" @click="navTo('/pages/set/set')">
|
|
|
- <image src="../../static/user/user07.png" mode=""></image>
|
|
|
- <view class="manage-title" @click="navTo('/pages/user/feedback')">
|
|
|
- 设置
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="navbar">
|
|
|
- <view class="nav-item" v-for="(item,index) in navList" :class="{current:tabCurrentIndex===index}"
|
|
|
- @click="navGet(index)">
|
|
|
- {{item.text}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <swiper :current="tabCurrentIndex" duration="300" class="swiper-box" :style="{ height: height }" @change="changeTab">
|
|
|
- <swiper-item>
|
|
|
- <scroll-view scroll-y="true" class="uni-scroll-view-content">
|
|
|
- <view class="box-content">
|
|
|
- <view class="img">
|
|
|
- <image src="../../static/index/nvwang.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="content-title">
|
|
|
- <view class="title">
|
|
|
- <view class="text">
|
|
|
- 黑道女王
|
|
|
- </view>
|
|
|
- <view class="zm">
|
|
|
- 转卖中
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="content-price">
|
|
|
- <view class="price">
|
|
|
- ¥66.60
|
|
|
- </view>
|
|
|
- <view class="button" @click="navPop()">
|
|
|
- 卖出
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- <!-- 客服 -->
|
|
|
- <uni-popup ref="popupkf" type="center">
|
|
|
- <view class="popup-box">
|
|
|
- <view class="img">
|
|
|
- <image src="../../static/img/img009.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="mian">
|
|
|
- <view class="delivery">
|
|
|
- <view class="title">已经为您定制专属客服</view>
|
|
|
- <image src="../../static/img/img010.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="nocancel">客服VX:{{ text }}</view>
|
|
|
- <view class="comfirm-box">
|
|
|
- <view class="cancel" @click="kfClose()">取消</view>
|
|
|
- <view class="comfirm" @click="comfirm(text)">复制微信</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-popup>
|
|
|
- <uni-popup ref="maipop" type="center">
|
|
|
- <view class="mai-box">
|
|
|
- <view class="mai-title">
|
|
|
- 卖出价格
|
|
|
- </view>
|
|
|
- <input type="number">
|
|
|
- <view class="mai-button">
|
|
|
- <view class="button-left" @click="maiClose()">
|
|
|
- 取消
|
|
|
- </view>
|
|
|
- <view class="button-right">
|
|
|
- 确定
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-popup>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
- import {
|
|
|
- mapState,
|
|
|
- mapMutations
|
|
|
- } from 'vuex';
|
|
|
- import uniList from '@/components/uni-list/uni-list.vue';
|
|
|
- import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
|
|
|
- import {
|
|
|
- orderData,
|
|
|
- userinfo,
|
|
|
- greenList
|
|
|
- } from '@/api/user.js';
|
|
|
- import {
|
|
|
- saveUrl,
|
|
|
- interceptor
|
|
|
- } from '@/utils/loginUtils.js';
|
|
|
- import uniCopy from '@/js_sdk/xb-copy/uni-copy.js';
|
|
|
- let startY = 0,
|
|
|
- moveY = 0,
|
|
|
- pageAtTop = true;
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- uniList,
|
|
|
- uniListItem
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- height: '',
|
|
|
- // 头部图高度
|
|
|
- maxheight: '',
|
|
|
- tabCurrentIndex: 0,
|
|
|
- greenNum: 0,
|
|
|
- text: 'weilegou1',
|
|
|
- coverTransform: 'translateY(0px)',
|
|
|
- coverTransition: '0s',
|
|
|
- moving: false,
|
|
|
- userDowm: 0, //卡片升级专属高度
|
|
|
- userMaxDowm: 0, //卡片最高高度
|
|
|
- name: 'zyjshiwoshanver',
|
|
|
- navList: [{
|
|
|
- state: 0,
|
|
|
- text: '我拥有的',
|
|
|
- loadingType: 'more',
|
|
|
- orderList: [],
|
|
|
- page: 1,
|
|
|
- limit: 10
|
|
|
- }, {
|
|
|
- state: 1,
|
|
|
- text: '我卖出的',
|
|
|
- loadingType: 'more',
|
|
|
- page: 1,
|
|
|
- limit: 10
|
|
|
- }]
|
|
|
- };
|
|
|
- },
|
|
|
- filters: {
|
|
|
-
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- // if(this.hasLogin){
|
|
|
- // console.log(this.hasLogin,this.userInfo,'我已登录');
|
|
|
- // }
|
|
|
- },
|
|
|
- onReady() {
|
|
|
- if(this.hasLogin){
|
|
|
- console.log(this.hasLogin,this.userInfo,'我已登录');
|
|
|
- }
|
|
|
- var _this = this;
|
|
|
-
|
|
|
- // 初始化获取页面宽度
|
|
|
- uni.getSystemInfo({
|
|
|
- success: resu => {
|
|
|
- const query = uni.createSelectorQuery();
|
|
|
- console.log(resu, 'query');
|
|
|
- query.select('.swiper-box').boundingClientRect();
|
|
|
- query.exec(function(res) {
|
|
|
- _this.height = resu.windowHeight - res[0].top + 'px';
|
|
|
- console.log('打印页面的剩余高度', _this.height);
|
|
|
- });
|
|
|
- },
|
|
|
- fail: res => {}
|
|
|
- });
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
|
|
|
- },
|
|
|
- methods: {
|
|
|
- navPop(){
|
|
|
- this.$refs.maipop.open()
|
|
|
- },
|
|
|
- ...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
|
|
|
- navGet(index) {
|
|
|
- this.tabCurrentIndex = index
|
|
|
- },
|
|
|
- //swiper切换
|
|
|
- changeTab(e){
|
|
|
- this.tabCurrentIndex= e.target.current
|
|
|
- this.loadData('tabChange')
|
|
|
- },
|
|
|
- async loadData(sourse){},
|
|
|
- //复制
|
|
|
- cope(name) {
|
|
|
- uni.setClipboardData({
|
|
|
- data: this.name,
|
|
|
- success() {
|
|
|
- uni.showToast({
|
|
|
- title: '复制成功'
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- navTo(url) {
|
|
|
-
|
|
|
-
|
|
|
- if (url == '') {
|
|
|
- this.$api.msg('敬请期待');
|
|
|
- }
|
|
|
- //判断是否登录了,没有等去,请去登录
|
|
|
- if (!this.hasLogin) {
|
|
|
- //保存地址
|
|
|
- saveUrl();
|
|
|
- // 登录拦截
|
|
|
- interceptor();
|
|
|
- // uni.showModal({
|
|
|
- // title:'去登录'
|
|
|
- // })
|
|
|
- // uni.navigateTo({
|
|
|
- // url,
|
|
|
- // fail() {
|
|
|
- // uni.switchTab({
|
|
|
- // url
|
|
|
- // });
|
|
|
- // }
|
|
|
- // });
|
|
|
- } else {
|
|
|
- uni.navigateTo({
|
|
|
- url,
|
|
|
- fail() {
|
|
|
- uni.switchTab({
|
|
|
- url
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- kfOpen() {
|
|
|
- this.$refs.popupkf.open();
|
|
|
- },
|
|
|
- kfClose() {
|
|
|
- this.$refs.popupkf.close();
|
|
|
- },
|
|
|
- maiClose(){
|
|
|
- this.$refs.maipop.close();
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- };
|
|
|
-</script>
|
|
|
-<style lang="scss">
|
|
|
- page {
|
|
|
- height: 100%;
|
|
|
- background: #111111;
|
|
|
- padding: 30rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .mai-box{
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-around;
|
|
|
- width: 582rpx;
|
|
|
- height: 377rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 20rpx;
|
|
|
- .mai-title{
|
|
|
- font-size: 42rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #0C1732;
|
|
|
- line-height: 56rpx;
|
|
|
- }
|
|
|
- input{
|
|
|
- width: 494rpx;
|
|
|
- height: 90rpx;
|
|
|
- font-size: 40rpx;
|
|
|
- background: rgba(199,212,255,0.3500);
|
|
|
- border-radius: 10rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .mai-button{
|
|
|
- display: flex;
|
|
|
- width: 90%;
|
|
|
- justify-content: space-between;
|
|
|
- .button-left{
|
|
|
- text-align: center;
|
|
|
- width: 248rpx;
|
|
|
- height: 78rpx;
|
|
|
- border: 2rpx solid #A581FF;
|
|
|
- border-radius: 10rpx;
|
|
|
- font-size: 34rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #A581FF;
|
|
|
- line-height: 78rpx;
|
|
|
- }
|
|
|
- .button-right{
|
|
|
- text-align: center;
|
|
|
- width: 248rpx;
|
|
|
- height: 78rpx;
|
|
|
- background: linear-gradient(270deg, #6E8DF7, #9977F6);
|
|
|
- border-radius: 10rpx;
|
|
|
- font-size: 34rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: 78rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .title-box {
|
|
|
- margin: 40rpx 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .title-img {
|
|
|
- width: 100rpx;
|
|
|
- height: 100rpx;
|
|
|
- border-radius: 50%;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .title-tit {
|
|
|
- margin-left: 30rpx;
|
|
|
-
|
|
|
- .title-top {
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: 50rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .title-bottom {
|
|
|
- font-size: 22rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: 40rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .address-box {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin: 0 30rpx;
|
|
|
- height: 60rpx;
|
|
|
- background: #181818;
|
|
|
- border: 2rpx solid #7D5FA4;
|
|
|
- border-radius: 8rpx;
|
|
|
- font-size: 20rpx;
|
|
|
- font-weight: 500;
|
|
|
- line-height: 61rpx;
|
|
|
- color: #5C5EE5;
|
|
|
-
|
|
|
- .address-text {
|
|
|
- margin: 0 25rpx;
|
|
|
- width: 520rpx;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .fuzhi {
|
|
|
- width: 86rpx;
|
|
|
- height: 40rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- border: 2px solid #7D5FA4;
|
|
|
- text-align: center;
|
|
|
- line-height: 32rpx;
|
|
|
- margin-right: 40rpx;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .manage-box {
|
|
|
- display: flex;
|
|
|
- justify-content: left;
|
|
|
- background: #181818;
|
|
|
- border-radius: 30rpx;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .manage {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- margin: 30rpx 0 20rpx;
|
|
|
- width: 25%;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 42rpx;
|
|
|
- height: 42rpx;
|
|
|
- margin-bottom: 15rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .manage-title {
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: 42rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .vheigh {
|
|
|
- height: var(--status-bar-height);
|
|
|
- }
|
|
|
-
|
|
|
- .navbar {
|
|
|
- margin-top: 30rpx;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- justify-content: space-around;
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #999999;
|
|
|
- line-height: 42rpx;
|
|
|
-
|
|
|
- .current {
|
|
|
- color: #5C5EE5;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .uni-scroll-view-content {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .box {
|
|
|
- display: flex;
|
|
|
- // justify-content: space-around;
|
|
|
- flex-wrap: wrap;
|
|
|
- width: 750rpx
|
|
|
- }
|
|
|
-
|
|
|
- .box-content {
|
|
|
-
|
|
|
- width: 330rpx;
|
|
|
- height: 415rpx;
|
|
|
- margin: 50rpx 15rpx;
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 330rpx;
|
|
|
- height: 280rpx;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .content-title {
|
|
|
- z-index: 99;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- margin-top: -10rpx;
|
|
|
- padding: 20rpx;
|
|
|
- flex-direction: column;
|
|
|
- border-bottom-left-radius: 10rpx;
|
|
|
- border-bottom-right-radius: 10rpx;
|
|
|
- border: 2rpx solid #533A6A;
|
|
|
- // box-shadow: 0px 0px 20rpx 0px rgba(79,59,103,0.0600);
|
|
|
-
|
|
|
- .title {
|
|
|
- display: flex;
|
|
|
- // font-size: 39rpx;
|
|
|
- // font-weight: bold;
|
|
|
- // color: #FFFFFF;
|
|
|
- // margin-bottom: 20rpx;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .zm {
|
|
|
- margin: 10rpx;
|
|
|
- width: 63rpx;
|
|
|
- height: 30rpx;
|
|
|
- border: 1rpx solid #5C5EE5;
|
|
|
- border-radius: 5rpx;
|
|
|
- font-size: 16rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #5C5EE5;
|
|
|
- line-height: 30rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .text {
|
|
|
- color: #FFFFFF;
|
|
|
- font-size: 24rpx;
|
|
|
- margin: 10rpx 0;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .content-price {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .price {
|
|
|
- font-size: 30rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
-
|
|
|
- .button {
|
|
|
- width: 104rpx;
|
|
|
- height: 35rpx;
|
|
|
- background: linear-gradient(270deg, #6E8DF7, #9977F6);
|
|
|
- border-radius: 18rpx;
|
|
|
- font-size: 20rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: 35rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .popup-box {
|
|
|
- width: 522rpx;
|
|
|
- height: 605rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 20rpx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .img {
|
|
|
- position: relative;
|
|
|
- top: -56rpx;
|
|
|
- left: 0;
|
|
|
- width: 522rpx;
|
|
|
- height: 132rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- image {
|
|
|
- border-radius: 20rpx 20rpx 0 0;
|
|
|
- width: 450rpx;
|
|
|
- height: 132rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .mian {
|
|
|
- margin-top: -44rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- // padding: 32rpx 32rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 0 0 20rpx 20rpx;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- .delivery {
|
|
|
- font-size: 40rpx;
|
|
|
- color: #333333;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- .title {}
|
|
|
-
|
|
|
- image {
|
|
|
- margin-top: 48rpx;
|
|
|
- width: 172rpx;
|
|
|
- height: 160rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .nocancel {
|
|
|
- font-size: 32rpx;
|
|
|
- color: #333333;
|
|
|
- margin-top: 14rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .comfirm-box {
|
|
|
- margin-top: 52rpx;
|
|
|
- display: flex;
|
|
|
- // margin-bottom: 32rpx;
|
|
|
-
|
|
|
- // justify-content: space-around;
|
|
|
- .cancel {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 197rpx;
|
|
|
- height: 74rpx;
|
|
|
- border: 1px solid #dcc786;
|
|
|
- border-radius: 38rpx;
|
|
|
-
|
|
|
- font-size: 32rpx;
|
|
|
- color: #605128;
|
|
|
- }
|
|
|
-
|
|
|
- .comfirm {
|
|
|
- margin-left: 32rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 197rpx;
|
|
|
- height: 74rpx;
|
|
|
- background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
|
|
|
- border-radius: 38px;
|
|
|
- font-size: 32rpx;
|
|
|
- color: #605128;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <view class="title-box">
|
|
|
+ <view class="title-img">
|
|
|
+ <image :src="userInfo.avatar" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="title-tit">
|
|
|
+ <view class="title-top">
|
|
|
+ {{userInfo.nickname || '游客'}}
|
|
|
+ </view>
|
|
|
+ <view class="title-bottom">
|
|
|
+ {{userInfo.phone}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="address-box">
|
|
|
+ <view class="address-text">
|
|
|
+ 区块链地址:{{name}}
|
|
|
+ </view>
|
|
|
+ <view class="fuzhi" @click="cope(name)">
|
|
|
+ 复制
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ <!-- <view class="btm" style="height: 44px;"></view> -->
|
|
|
+ <view class="main-box">
|
|
|
+ <view class="title flex" @click="navTo('/pages/order/order?state=0')">
|
|
|
+ <view class="title-left">
|
|
|
+ <!-- <image class="title-icon" src="../../static/user/user5.png" mode=""></image> -->
|
|
|
+ <view class="title-font">我的订单</view>
|
|
|
+ </view>
|
|
|
+ <image class="title-right" src="../../static/user/back.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="main flex">
|
|
|
+ <view class="oitem" @click="navTo('/pages/order/order?state=0')">
|
|
|
+ <image class="oitem-image" src="../../static/user/dfk.png" mode=""></image>
|
|
|
+ <view class="oitem-font">待付款</view>
|
|
|
+ </view>
|
|
|
+ <view class="oitem" @click="navTo('/pages/order/order?state=1')">
|
|
|
+ <image class="oitem-image" src="../../static/user/dfh.png" mode=""></image>
|
|
|
+ <view class="oitem-font">待发货</view>
|
|
|
+ </view>
|
|
|
+ <view class="oitem" @click="navTo('/pages/order/order?state=2')">
|
|
|
+ <image class="oitem-image" src="../../static/user/dsh.png" mode=""></image>
|
|
|
+ <view class="oitem-font">待收货</view>
|
|
|
+ </view>
|
|
|
+ <view class="oitem" @click="navTo('/pages/order/order?state=3')">
|
|
|
+ <image class="oitem-image" src="../../static/user/dfk.png" mode=""></image>
|
|
|
+ <view class="oitem-font">已完成</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="manage-box">
|
|
|
+ <view class="manage" @click="navTo('/pages/money/wallet')">
|
|
|
+ <image src="../../static/user/user06.png" mode=""></image>
|
|
|
+ <view class="manage-title">
|
|
|
+ 钱包
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="manage" @click="navTo('/pages/user/personal')">
|
|
|
+ <image src="../../static/user/user08.png" mode=""></image>
|
|
|
+ <view class="manage-title">
|
|
|
+ 实名认证
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="manage" @click="navTo('/pages/user/shareQrCode')">
|
|
|
+ <image src="../../static/user/user05.png" mode=""></image>
|
|
|
+ <view class="manage-title">
|
|
|
+ 邀请好友
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="manage" @click="kfOpen()">
|
|
|
+ <image src="../../static/user/kf.png" mode=""></image>
|
|
|
+ <view class="manage-title">
|
|
|
+ 联系客服
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="manage" @click="navTo('/pages/user/feedback')">
|
|
|
+ <image src="../../static/user/user09.png" mode=""></image>
|
|
|
+ <view class="manage-title">
|
|
|
+ 提交意见
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="manage" @click="navTo('/pages/set/set')">
|
|
|
+ <image src="../../static/user/user07.png" mode=""></image>
|
|
|
+ <view class="manage-title">
|
|
|
+ 设置
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="navbar">
|
|
|
+ <view class="nav-item" v-for="(item,index) in navList" :class="{current:tabCurrentIndex===index}"
|
|
|
+ @click="navGet(index)">
|
|
|
+ {{item.text}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <swiper :current="tabCurrentIndex" duration="300" class="swiper-box" :style="{ height: height }"
|
|
|
+ @change="changeTab">
|
|
|
+ <swiper-item v-for="navitem in navList">
|
|
|
+ <scroll-view scroll-y="true" class="uni-scroll-view-content ">
|
|
|
+ <u-empty v-if="navitem.orderList && navitem.orderList.length == 0 && navitem.loaded"></u-empty>
|
|
|
+ <view class="flex dy-list">
|
|
|
+ <view class="box-content" v-for="item in navitem.orderList">
|
|
|
+ <view class="img">
|
|
|
+ <image src="../../static/index/nvwang.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="content-title">
|
|
|
+ <view class="title">
|
|
|
+ <view class="text clamp">
|
|
|
+ {{item.class_info.name}}
|
|
|
+ </view>
|
|
|
+ <view class="zm">
|
|
|
+ 转卖中
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content-price">
|
|
|
+ <view class="price">
|
|
|
+ ¥66.60
|
|
|
+ </view>
|
|
|
+ <view class="button" @click="navPop(item)">
|
|
|
+ 卖出
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <uni-load-more :status="navitem.loadingType" v-if="!(navitem.orderList.length == 0 && navitem.loaded)"></uni-load-more>
|
|
|
+ </scroll-view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <!-- 客服 -->
|
|
|
+ <uni-popup ref="popupkf" type="center">
|
|
|
+ <view class="popup-box">
|
|
|
+ <view class="img">
|
|
|
+ <image src="../../static/img/img009.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="mian">
|
|
|
+ <view class="delivery">
|
|
|
+ <view class="title">已经为您定制专属客服</view>
|
|
|
+ <image src="../../static/img/img010.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="nocancel">客服VX:{{ text }}</view>
|
|
|
+ <view class="comfirm-box">
|
|
|
+ <view class="cancel" @click="kfClose()">取消</view>
|
|
|
+ <view class="comfirm" @click="comfirm(text)">复制微信</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ <uni-popup ref="maipop" type="center">
|
|
|
+ <view class="mai-box">
|
|
|
+ <view class="mai-title">
|
|
|
+ 卖出价格
|
|
|
+ </view>
|
|
|
+ <input type="number">
|
|
|
+ <view class="mai-button">
|
|
|
+ <view class="button-left" @click="maiClose()">
|
|
|
+ 取消
|
|
|
+ </view>
|
|
|
+ <view class="button-right">
|
|
|
+ 确定
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import uEmpty from '@/uview-ui/components/u-empty/u-empty.vue'
|
|
|
+ import {
|
|
|
+ mapState,
|
|
|
+ mapMutations
|
|
|
+ } from 'vuex';
|
|
|
+ import uniList from '@/components/uni-list/uni-list.vue';
|
|
|
+ import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
|
|
|
+ import {
|
|
|
+ userinfo,
|
|
|
+ orderData,
|
|
|
+ getUserInfo,
|
|
|
+ getMyNft,
|
|
|
+ myGdList
|
|
|
+ } from '@/api/user.js';
|
|
|
+ import {
|
|
|
+ saveUrl,
|
|
|
+ interceptor
|
|
|
+ } from '@/utils/loginUtils.js';
|
|
|
+ import uniCopy from '@/js_sdk/xb-copy/uni-copy.js';
|
|
|
+ let startY = 0,
|
|
|
+ moveY = 0,
|
|
|
+ pageAtTop = true;
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ uniList,
|
|
|
+ uniListItem,
|
|
|
+ uEmpty
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ height: '',
|
|
|
+ // 头部图高度
|
|
|
+ maxheight: '',
|
|
|
+ tabCurrentIndex: 0,
|
|
|
+ greenNum: 0,
|
|
|
+ text: 'weilegou1',
|
|
|
+ coverTransform: 'translateY(0px)',
|
|
|
+ coverTransition: '0s',
|
|
|
+ moving: false,
|
|
|
+ userDowm: 0, //卡片升级专属高度
|
|
|
+ userMaxDowm: 0, //卡片最高高度
|
|
|
+ name: 'zyjshiwoshanver',
|
|
|
+ navList: [{
|
|
|
+ state: 0,
|
|
|
+ text: '我拥有的',
|
|
|
+ loadingType: 'more',
|
|
|
+ orderList: [],
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ loaded: false
|
|
|
+ }, {
|
|
|
+ state: 1,
|
|
|
+ text: '我卖出的',
|
|
|
+ loadingType: 'more',
|
|
|
+ orderList: [],
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ loaded: false
|
|
|
+ }],
|
|
|
+ maiId: '',//当前卖出id
|
|
|
+ };
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ if (this.hasLogin) {
|
|
|
+ this.loadBaseData();
|
|
|
+ // 返回页面刷新我的挂单数据
|
|
|
+ this.navList = [{
|
|
|
+ state: 0,
|
|
|
+ text: '我拥有的',
|
|
|
+ loadingType: 'more',
|
|
|
+ orderList: [],
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ loaded: false
|
|
|
+ }, {
|
|
|
+ state: 1,
|
|
|
+ text: '我卖出的',
|
|
|
+ loadingType: 'more',
|
|
|
+ orderList: [],
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ loaded: false
|
|
|
+ }]
|
|
|
+ // 获取我的挂单
|
|
|
+ this.getMyNft()
|
|
|
+ }else {
|
|
|
+ this.loadBaseData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ // 初始化获取页面宽度
|
|
|
+ let _this = this
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: resu => {
|
|
|
+ const query = uni.createSelectorQuery();
|
|
|
+ console.log(resu, 'query');
|
|
|
+ query.select('.swiper-box').boundingClientRect();
|
|
|
+ query.exec(function(res) {
|
|
|
+ _this.height = resu.windowHeight - res[0].top + 'px';
|
|
|
+ console.log('打印页面的剩余高度', _this.height);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fail: res => {}
|
|
|
+ });
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ loadBaseData() {
|
|
|
+ getUserInfo({})
|
|
|
+ .then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ this.setUserInfo(data);
|
|
|
+ // 获取用户数据完毕后在获取订单数据防止多次跳转到登录页
|
|
|
+ orderData({})
|
|
|
+ .then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ this.setOrderInfo(data);
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ this.setOrderInfo({
|
|
|
+ complete_count: 0, //完成
|
|
|
+ received_count: 0, //待收货
|
|
|
+ unshipped_count: 0, //待发货
|
|
|
+ order_count: 0, //订单总数
|
|
|
+ unpaid_count: 0 //待付款
|
|
|
+ });
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ navPop(item) {
|
|
|
+
|
|
|
+ this.$refs.maipop.open()
|
|
|
+ },
|
|
|
+ ...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
|
|
|
+ navGet(index) {
|
|
|
+ this.tabCurrentIndex = index
|
|
|
+ this.getMyNft('tab')
|
|
|
+ },
|
|
|
+ //swiper切换
|
|
|
+ changeTab(e) {
|
|
|
+ this.tabCurrentIndex = e.target.current
|
|
|
+ this.getMyNft('tab')
|
|
|
+ },
|
|
|
+ async loadData(sourse) {},
|
|
|
+ //复制
|
|
|
+ cope(name) {
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: this.name,
|
|
|
+ success() {
|
|
|
+ uni.showToast({
|
|
|
+ title: '复制成功'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ navTo(url) {
|
|
|
+
|
|
|
+
|
|
|
+ if (url == '') {
|
|
|
+ this.$api.msg('敬请期待');
|
|
|
+ }
|
|
|
+ //判断是否登录了,没有等去,请去登录
|
|
|
+ if (!this.hasLogin) {
|
|
|
+ //保存地址
|
|
|
+ saveUrl();
|
|
|
+ // 登录拦截
|
|
|
+ interceptor();
|
|
|
+ // uni.showModal({
|
|
|
+ // title:'去登录'
|
|
|
+ // })
|
|
|
+ // uni.navigateTo({
|
|
|
+ // url,
|
|
|
+ // fail() {
|
|
|
+ // uni.switchTab({
|
|
|
+ // url
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ } else {
|
|
|
+ uni.navigateTo({
|
|
|
+ url,
|
|
|
+ fail() {
|
|
|
+ uni.switchTab({
|
|
|
+ url
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ kfOpen() {
|
|
|
+ this.$refs.popupkf.open();
|
|
|
+ },
|
|
|
+ kfClose() {
|
|
|
+ this.$refs.popupkf.close();
|
|
|
+ },
|
|
|
+ maiClose() {
|
|
|
+ this.$refs.maipop.close();
|
|
|
+ },
|
|
|
+ getMyNft(type) {
|
|
|
+ let obj = this
|
|
|
+ let index = obj.tabCurrentIndex
|
|
|
+ let navitem = obj.navList[index]
|
|
|
+ if(type == 'tab' && navitem.loaded) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(navitem.loadingType == 'loading' || navitem.loadingType == 'noMore' ) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ navitem.loadingType = 'loading'
|
|
|
+ if(index == 0) {
|
|
|
+ getMyNft({
|
|
|
+ page: navitem.page,
|
|
|
+ limit: navitem.limit
|
|
|
+ }).then(res => {
|
|
|
+ navitem.orderList = navitem.orderList.concat(res.data.list)
|
|
|
+ navitem.page++
|
|
|
+ if(res.data.list.length == navitem.limit ) {
|
|
|
+ navitem.loadingType = 'more'
|
|
|
+ }else {
|
|
|
+ navitem.loadingType = 'noMore'
|
|
|
+ }
|
|
|
+ obj.$set(navitem,'loaded',true)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if(index == 1) {
|
|
|
+ console.log('get22')
|
|
|
+ myGdList({
|
|
|
+ page: navitem.page,
|
|
|
+ limit: navitem.limit,
|
|
|
+ status: 2,
|
|
|
+ }).then(res => {
|
|
|
+ navitem.orderList = navitem.orderList.concat(res.data.list)
|
|
|
+ navitem.page++
|
|
|
+ if(res.data.list.length == navitem.limit ) {
|
|
|
+ navitem.loadingType = 'more'
|
|
|
+ }else {
|
|
|
+ navitem.loadingType = 'noMore'
|
|
|
+ }
|
|
|
+ obj.$set(navitem,'loaded',true)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+ page {
|
|
|
+ height: 100%;
|
|
|
+ background: #111111;
|
|
|
+ padding: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mai-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ width: 582rpx;
|
|
|
+ height: 377rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 20rpx;
|
|
|
+
|
|
|
+ .mai-title {
|
|
|
+ font-size: 42rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #0C1732;
|
|
|
+ line-height: 56rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ input {
|
|
|
+ width: 494rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ font-size: 40rpx;
|
|
|
+ background: rgba(199, 212, 255, 0.3500);
|
|
|
+ border-radius: 10rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mai-button {
|
|
|
+ display: flex;
|
|
|
+ width: 90%;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .button-left {
|
|
|
+ text-align: center;
|
|
|
+ width: 248rpx;
|
|
|
+ height: 78rpx;
|
|
|
+ border: 2rpx solid #A581FF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #A581FF;
|
|
|
+ line-height: 78rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button-right {
|
|
|
+ text-align: center;
|
|
|
+ width: 248rpx;
|
|
|
+ height: 78rpx;
|
|
|
+ background: linear-gradient(270deg, #6E8DF7, #9977F6);
|
|
|
+ border-radius: 10rpx;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 78rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-box {
|
|
|
+ margin: 40rpx 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .title-img {
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-tit {
|
|
|
+ margin-left: 30rpx;
|
|
|
+
|
|
|
+ .title-top {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-bottom {
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .address-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0 30rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ background: #181818;
|
|
|
+ border: 2rpx solid #7D5FA4;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 61rpx;
|
|
|
+ color: #5C5EE5;
|
|
|
+
|
|
|
+ .address-text {
|
|
|
+ margin: 0 25rpx;
|
|
|
+ width: 520rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fuzhi {
|
|
|
+ width: 86rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ border: 2px solid #7D5FA4;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 32rpx;
|
|
|
+ margin-right: 40rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .manage-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: left;
|
|
|
+ background: #181818;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .manage {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ margin: 30rpx 0 20rpx;
|
|
|
+ width: 25%;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 42rpx;
|
|
|
+ height: 42rpx;
|
|
|
+ margin-bottom: 15rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .manage-title {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 42rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .vheigh {
|
|
|
+ height: var(--status-bar-height);
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ justify-content: space-around;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 42rpx;
|
|
|
+
|
|
|
+ .current {
|
|
|
+ color: #5C5EE5;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .uni-scroll-view-content {
|
|
|
+ height: 100%;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box {
|
|
|
+ display: flex;
|
|
|
+ // justify-content: space-around;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 750rpx
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-content {
|
|
|
+
|
|
|
+ width: 330rpx;
|
|
|
+ height: 415rpx;
|
|
|
+ // margin:0 15rpx 50rpx ;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 330rpx;
|
|
|
+ height: 280rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-title {
|
|
|
+ z-index: 99;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ margin-top: -10rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ flex-direction: column;
|
|
|
+ border-bottom-left-radius: 10rpx;
|
|
|
+ border-bottom-right-radius: 10rpx;
|
|
|
+ border: 2rpx solid #533A6A;
|
|
|
+ // box-shadow: 0px 0px 20rpx 0px rgba(79,59,103,0.0600);
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ // font-size: 39rpx;
|
|
|
+ // font-weight: bold;
|
|
|
+ // color: #FFFFFF;
|
|
|
+ // margin-bottom: 20rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .zm {
|
|
|
+ flex-shrink: 0;
|
|
|
+ // margin: 10rpx;
|
|
|
+ // width: 63rpx;
|
|
|
+ display: inline-block;
|
|
|
+ // padding: 2rpx;
|
|
|
+ // height: 30rpx;
|
|
|
+ // border: 1rpx solid #5C5EE5;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ border-radius: 5rpx;
|
|
|
+ font-size: 16rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #5C5EE5;
|
|
|
+ // line-height: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin: 10rpx 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-price {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ width: 104rpx;
|
|
|
+ height: 35rpx;
|
|
|
+ background: linear-gradient(270deg, #6E8DF7, #9977F6);
|
|
|
+ border-radius: 18rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 35rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-box {
|
|
|
+ width: 522rpx;
|
|
|
+ height: 605rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ position: relative;
|
|
|
+ top: -56rpx;
|
|
|
+ left: 0;
|
|
|
+ width: 522rpx;
|
|
|
+ height: 132rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ image {
|
|
|
+ border-radius: 20rpx 20rpx 0 0;
|
|
|
+ width: 450rpx;
|
|
|
+ height: 132rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mian {
|
|
|
+ margin-top: -44rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ // padding: 32rpx 32rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 0 0 20rpx 20rpx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .delivery {
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #333333;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .title {}
|
|
|
+
|
|
|
+ image {
|
|
|
+ margin-top: 48rpx;
|
|
|
+ width: 172rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .nocancel {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333333;
|
|
|
+ margin-top: 14rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .comfirm-box {
|
|
|
+ margin-top: 52rpx;
|
|
|
+ display: flex;
|
|
|
+ // margin-bottom: 32rpx;
|
|
|
+
|
|
|
+ // justify-content: space-around;
|
|
|
+ .cancel {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 197rpx;
|
|
|
+ height: 74rpx;
|
|
|
+ border: 1px solid #dcc786;
|
|
|
+ border-radius: 38rpx;
|
|
|
+
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #605128;
|
|
|
+ }
|
|
|
+
|
|
|
+ .comfirm {
|
|
|
+ margin-left: 32rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 197rpx;
|
|
|
+ height: 74rpx;
|
|
|
+ background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
|
|
|
+ border-radius: 38px;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #605128;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .main-box {
|
|
|
+ margin: 20rpx auto 20rpx;
|
|
|
+ width: 710rpx;
|
|
|
+ background:#181818 ;
|
|
|
+ // box-shadow: 0px 4rpx 14rpx 0px rgba(229, 229, 229, 0.46);
|
|
|
+ border-radius: 20rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 24rpx;
|
|
|
+ border-bottom: 1px solid #2f2f2f;
|
|
|
+
|
|
|
+ .title-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .title-icon {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-font {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-right {
|
|
|
+ width: 14rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .main {
|
|
|
+ padding: 50rpx 0 30rpx;
|
|
|
+ .jg {
|
|
|
+ width: 1px;
|
|
|
+ height: 100rpx;
|
|
|
+ background: #EEEEEE;
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ width: 25%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .item-num {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-font {
|
|
|
+ margin-top: 18rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .oitem {
|
|
|
+ width: 25%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .oitem-image {
|
|
|
+ height: 50rpx;
|
|
|
+ width: 48rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .oitem-font {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .dy-list {
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
</style>
|