.

.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

src/components/ImgContent.vue

@@ -1,5 +1,5 @@
 <template>
-    <van-image lazy-load  :src="src" :fit="fit">
+    <van-image lazy-load :src="src" :fit="fit">
         <template v-slot:loading>
             <loading></loading>
         </template>

src/components/IntegralInfo.vue

@@ -1,53 +1,53 @@
 <!-- 积分列表 -->
 <template>
     <div class="list-item">
-	   <div>
-		   <div class="list-title">{{info.description}}</div>
-		   <div class="list-sj">{{info.createdAt}}</div>
-	   </div>
-	   <div :class="['list-num', info.flag == 'DEBIT' ? 'active' : '' ] ">{{ info.flag == 'DEBIT' ?'' : '+'}}{{ info.integral }}</div>
+        <div>
+            <div class="list-title">{{ info.description }}</div>
+            <div class="list-sj">{{ info.createdAt }}</div>
+        </div>
+        <div :class="['list-num', info.flag == 'DEBIT' ? 'active' : '']">
+            {{ info.flag == 'DEBIT' ? '' : '+' }}{{ info.integral }}
+        </div>
     </div>
 </template>
 
 <script>
 export default {
-   props: {
-	   info: {
-		   type: Object,
-		   default: () => { 
-			   return {};
-		   }
-	   }
-   },
-    computed: {
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
     },
-    methods: {
-    }
+    computed: {},
+    methods: {}
 };
 </script>
 
 <style lang="less" scoped>
-.list-item{
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding:12px 0;
-		border-bottom: 1px solid rgba(255,255,255,.1);
-		.list-title{
-			font-size: 15px;
-			margin-bottom: 4px;
-		}
-		.list-sj{
-			font-size: 12px;
-			color:rgba(255,255,255,.3); 
-		}
-		.list-num{
-			color: @text5;
-			font-weight: bold;
-			font-size: 16px;
-			&.active{
-				color: @text8;
-			}
-		}
-	}
+.list-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    .list-title {
+        font-size: 15px;
+        margin-bottom: 4px;
+    }
+    .list-sj {
+        font-size: 12px;
+        color: rgba(255, 255, 255, 0.3);
+    }
+    .list-num {
+        color: @text5;
+        font-weight: bold;
+        font-size: 16px;
+        &.active {
+            color: @text8;
+        }
+    }
+}
 </style>

src/components/Post.vue

@@ -8,7 +8,7 @@
                 <div class="content" v-if="!img" ref="post">
                     <!-- @load="loadImg" -->
                     <!-- <img crossOrigin="anonymous" :src="banners" class="detailImg" /> -->
-                    <van-image lazy-load  :src="detailImg" class="detailImg" fit="cover" />
+                    <van-image lazy-load :src="detailImg" class="detailImg" fit="cover" />
                     <div class="info">
                         <div class="name van-multi-ellipsis--l2">
                             {{ info.name }}
@@ -32,7 +32,7 @@
                     </div>
                     <div class="minter">
                         <div class="minter-content">
-                            <van-image lazy-load  width="26" height="26" round :src="userImg" fit="cover" />
+                            <van-image lazy-load width="26" height="26" round :src="userImg" fit="cover" />
                             <div class="text1">{{ info.minter }}</div>
                             <div class="text2">铸造者</div>
                         </div>

src/components/asset/OrderOpen.vue

@@ -1,66 +1,36 @@
 <template>
-  <van-overlay :show="showPopup"
-               z-index="99">
-    <div class="content"
-         @click.stop="open">
-      <img class="bg"
-           ref="bg"
-           src="@assets/open1.png"
-           alt="" />
+    <van-overlay :show="showPopup" z-index="99">
+        <div class="content" @click.stop="open">
+            <img class="bg" ref="bg" src="@assets/open1.png" alt="" />
 
-      <div class="box">
-        <img class="img1"
-             src="@assets/box1.png"
-             alt="" />
-        <img class="img2"
-             ref="img2"
-             src="@assets/box2.png"
-             alt="" />
-        <img class="img3"
-             ref="img3"
-             src="@assets/png-kapian.png"
-             alt="" />
-        <img class="guang"
-             src="@assets/png-guang.png"
-             alt="" />
-      </div>
+            <div class="box">
+                <img class="img1" src="@assets/box1.png" alt="" />
+                <img class="img2" ref="img2" src="@assets/box2.png" alt="" />
+                <img class="img3" ref="img3" src="@assets/png-kapian.png" alt="" />
+                <img class="guang" src="@assets/png-guang.png" alt="" />
+            </div>
 
-      <div class="product"
-           ref="product">
-        <img class="productBg"
-             src="@assets/png-cangping-bg.png"
-             alt="" />
-        <img class="productImg"
-             :src="url" />
-      </div>
+            <div class="product" ref="product">
+                <img class="productBg" src="@assets/png-cangping-bg.png" alt="" />
+                <img class="productImg" :src="url" />
+            </div>
 
-      <div class="text1"
-           v-if="!showProduct">点击打开宝盒</div>
-      <div class="text"
-           v-else>藏品正在生成中<br />约1~3分钟，完成后会出现在你的藏品室</div>
+            <div class="text1" v-if="!showProduct">点击打开宝盒</div>
+            <div class="text" v-else>藏品正在生成中<br />约1~3分钟，完成后会出现在你的藏品室</div>
 
-      <div class="btn-list"
-           v-if="showProduct">
-        <!-- <van-button class="btn1"
+            <div class="btn-list" v-if="showProduct">
+                <!-- <van-button class="btn1"
                     @click="showPopup = false"
                     type="primary"
                     size="small"
                     plain
                     round>查看订单</van-button> -->
-        <van-button class="prim"
-                    @click="$router.go(-1)"
-                    type="primary"
-                    size="small"
-                    round>查看藏品</van-button>
-      </div>
+                <van-button class="prim" @click="$router.go(-1)" type="primary" size="small" round>查看藏品</van-button>
+            </div>
 
-      <img v-else
-           src="@assets/icon_fenxiang_close.png"
-           @click="showPopup = false"
-           alt=""
-           class="close" />
-    </div>
-  </van-overlay>
+            <img v-else src="@assets/icon_fenxiang_close.png" @click="showPopup = false" alt="" class="close" />
+        </div>
+    </van-overlay>
 </template>
 
 <script>
@@ -71,7 +41,7 @@ export default {
         id: {
             type: Number,
             defalut: 0
-        },
+        }
     },
     data() {
         return {
@@ -86,27 +56,27 @@ export default {
                 title: '提示',
                 message: '确定打开吗？'
             }).then(() => {
-                this.addClass('img2', 'animate__rollOut', false)
-                this.$http.post('/asset/variableAsset' , {
+                this.addClass('img2', 'animate__rollOut', false);
+                this.$http
+                    .post('/asset/variableAsset', {
                         assetId: this.id
                     })
-                .then((res) => {
-                     this.url = res.pic[0].url;
-                    return this.addClass('img3', 'animate__bounceOutUp', false);
-                })
-                .then(() => {
-                    setTimeout(() => {
-                        this.addClass('bg', 'bg1');
-                    }, 300);
-                    return this.addClass('product', 'animate__bounceInDown', true);
-                })
-                .then(res => {
-                    this.showProduct = true;
-                })
-                .catch(e => {
-                    this.$toast(e.error);
-                });
-                
+                    .then(res => {
+                        this.url = res.pic[0].url;
+                        return this.addClass('img3', 'animate__bounceOutUp', false);
+                    })
+                    .then(() => {
+                        setTimeout(() => {
+                            this.addClass('bg', 'bg1');
+                        }, 300);
+                        return this.addClass('product', 'animate__bounceInDown', true);
+                    })
+                    .then(res => {
+                        this.showProduct = true;
+                    })
+                    .catch(e => {
+                        this.$toast(e.error);
+                    });
             });
         },
         //组件名，动画名，展示（true:出现，false:消失）

src/components/asset/SurpriseBox.vue

@@ -1,11 +1,7 @@
 <template>
-   <div class="product">
+    <div class="product">
         <div @click="onOpenBox">
-            <van-image lazy-load 
-                width="100%"
-                :src="require('@assets/surprisebox.png')"
-                fit="cover"
-            />
+            <van-image lazy-load width="100%" :src="require('@assets/surprisebox.png')" fit="cover" />
             <div class="content">
                 <div class="status">{{ info.createdAt }}</div>
             </div>
@@ -16,7 +12,7 @@
                     <img src="@assets/pop_bg.png" />
                 </div>
                 <div class="item">
-                    <van-image lazy-load  :src="url" />
+                    <van-image lazy-load :src="url" />
                     <div v-if="type == 0" class="text">藏品正在生成中约1~3分钟，完成后会出现在你的藏品室</div>
                     <img src="@assets/icon_fenxiang_close.png" @click="onClose" alt="" class="close" />
                 </div>

src/components/asset/assetInfo.vue

@@ -1,255 +1,264 @@
 <template>
-	<router-link :to="{
+    <router-link
+        :to="{
             path: '/assetDetail',
             query: {
                 id: info.id
             }
-        }" class="product" @click="click">
-		<van-image lazy-load width="100%" height="calc(45vw - 21.6px)" :src="getImg(changeImgs(info.pic))"
-			fit="cover" />
-
-		<div class="content">
-			<div class="name van-ellipsis">
-				{{ info.name }}
-			</div>
-			<div class="price-content">
-				<div class="price" v-if="info.consignment && info.status =='NORMAL'">
-					<!-- <img src="@assets/jiage_huang.png"
+        }"
+        class="product"
+        @click="click"
+    >
+        <van-image
+            lazy-load
+            width="100%"
+            height="calc(45vw - 21.6px)"
+            :src="getImg(changeImgs(info.pic))"
+            fit="cover"
+        />
+
+        <div class="content">
+            <div class="name van-ellipsis">
+                {{ info.name }}
+            </div>
+            <div class="price-content">
+                <div class="price" v-if="info.consignment && info.status == 'NORMAL'">
+                    <!-- <img src="@assets/jiage_huang.png"
                alt="" /> -->
-					<span class="price-logo">￥</span>
-					<span>{{ info.sellPrice }}</span>
-				</div>
-				<div class="status" v-else>
-					{{ assetStatusList(info.status,info.publicShow) }}
-				</div>
-				<div v-if="buyFirst" class="box" :class="[buyFirst.collectionName == 1 ? 'red': 'blue']">
-					<span class="btn">优先购</span>
-					<span class="count"> 剩余 {{buyFirst.count}}</span>
-				</div>
-			</div>
-			<div class="text">
-				<div class="minter">
-					<van-image lazy-load width="18" height="18" radius="18" :src="info.minterAvatar" fit="cover" />
-					<span class="van-ellipsis">{{ info.minter }}</span>
-				</div>
-			</div>
-		</div>
-	</router-link>
+                    <span class="price-logo">￥</span>
+                    <span>{{ info.sellPrice }}</span>
+                </div>
+                <div class="status" v-else>
+                    {{ assetStatusList(info.status, info.publicShow) }}
+                </div>
+                <div v-if="buyFirst" class="box" :class="[buyFirst.collectionName == 1 ? 'red' : 'blue']">
+                    <span class="btn">优先购</span>
+                    <span class="count"> 剩余 {{ buyFirst.count }}</span>
+                </div>
+            </div>
+            <div class="text">
+                <div class="minter">
+                    <van-image lazy-load width="18" height="18" radius="18" :src="info.minterAvatar" fit="cover" />
+                    <span class="van-ellipsis">{{ info.minter }}</span>
+                </div>
+            </div>
+        </div>
+    </router-link>
 </template>
 
 <script>
-	import asset from '../../mixins/asset';
-	import product from '../../mixins/product';
-
-	export default {
-		mixins: [asset, product],
-		props: {
-			info: {
-				type: Object,
-				default: () => {
-					return {};
-				}
-			}
-		},
-		setup() {
-			const click = function() {
-				console.log('wyt6w');
-			};
-
-			return {
-				click
-			};
-		},
-		data() {
-			return {
-				buyFirst: this.info.preEmptionPrivilege
-			}
-		},
-		computed: {
-			assetStatusList() {
-				return (val, show) => {
-					const list = {
-						'NORMAL': show ? '仅展示' : '未展示',
-						'TRADING': '转让中',
-						'TRANSFERRED': '已转让',
-						'GIFTING': '转赠中',
-						'GIFTED': '已转赠',
-					};
-					return list[val];
-				}
-			}
-		},
-		methods: {
-			likeProduct() {
-				if (!this.info.liked) {
-					this.$http.get(`/collection/${this.info.id}/like`).then(() => {
-						this.$emit('update:info', {
-							...this.info,
-							liked: true,
-							likes: this.info.likes + 1
-						});
-						this.$toast.success('收藏成功');
-					});
-				} else {
-					this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
-						this.$emit('update:info', {
-							...this.info,
-							liked: false,
-							likes: this.info.likes - 1
-						});
-						this.$toast.success('取消收藏');
-					});
-				}
-			}
-		}
-	};
+import asset from '../../mixins/asset';
+import product from '../../mixins/product';
+
+export default {
+    mixins: [asset, product],
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    setup() {
+        const click = function () {
+            console.log('wyt6w');
+        };
+
+        return {
+            click
+        };
+    },
+    data() {
+        return {
+            buyFirst: this.info.preEmptionPrivilege
+        };
+    },
+    computed: {
+        assetStatusList() {
+            return (val, show) => {
+                const list = {
+                    NORMAL: show ? '仅展示' : '未展示',
+                    TRADING: '转让中',
+                    TRANSFERRED: '已转让',
+                    GIFTING: '转赠中',
+                    GIFTED: '已转赠'
+                };
+                return list[val];
+            };
+        }
+    },
+    methods: {
+        likeProduct() {
+            if (!this.info.liked) {
+                this.$http.get(`/collection/${this.info.id}/like`).then(() => {
+                    this.$emit('update:info', {
+                        ...this.info,
+                        liked: true,
+                        likes: this.info.likes + 1
+                    });
+                    this.$toast.success('收藏成功');
+                });
+            } else {
+                this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
+                    this.$emit('update:info', {
+                        ...this.info,
+                        liked: false,
+                        likes: this.info.likes - 1
+                    });
+                    this.$toast.success('取消收藏');
+                });
+            }
+        }
+    }
+};
 </script>
 
 <style lang="less" scoped>
-	.product {
-		width: calc(50vw - 24px);
-		margin: 8px;
-		background-color: @bg2;
-		display: inline-block;
-		border-radius: 8px;
-		overflow: hidden;
-
-		.van-image {
-			overflow: hidden;
-			display: block;
-		}
-
-		.content {
-			padding: 6px 10px 8px;
-
-			.name {
-				font-size: @font2;
-				color: #ffffff;
-				line-height: 24px;
-			}
-		}
-
-		.text {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-
-			.text1 {
-				font-weight: 400;
-				color: @text3;
-				line-height: 24px;
-
-				span {
-					&:last-child {
-						color: #fff;
-						font-size: @font1;
-					}
-				}
-			}
-		}
-	}
-
-	.price-content {
-		display: flex;
-		align-items: center;
-
-		.text1 {
-			font-size: @font1;
-			color: @text3;
-			line-height: 12px;
-		}
-
-		.price {
-			font-size: @font4;
-			font-family: OSP;
-			color: @prim;
-			flex-grow: 1;
-			line-height: 18px;
-			padding: 12px 0;
-			.price-logo{
-				font-size: @font2;
-			}
-			img {
-				display: inline-block;
-				width: 8px;
-			}
-		}
-
-		.status {
-			line-height: 24px;
-			padding: 10px 0 8px;
-			color: @text3;
-			flex-grow: 1;
-			font-size: @font2;
-		}
-
-		.box {
-			display: flex;
-			// flex-basis: 1;
-			border-radius: 5px;
-			font-size: @font0;
-			.count {
-				padding-left: 5px;
-			}
-		}
-
-		.red {
-			.btn {
-				width: 40px;
-				color: @text0;
-				font-size: @font1;
-				background-color: rgb(@buyred);
-				padding: 3px 3px;
-			}
-
-			.count {
-				min-width: 40px;
-				color: @text0;
-				font-size: @font1;
-				padding: 0px 3px;
-				line-height: 24px;
-				background-color: rgba(@buyred, 0.6);
-				display: inline-block;
-			}
-		}
-
-		.blue {
-			.btn {
-				width: 40px;
-				color: @text0;
-				font-size: @font0;
-				background-color: rgb(@buyblue);
-				padding: 3px 3px;
-			}
-
-			.count {
-				min-width: 35px;
-				color: @text0;
-				font-size: @font0;
-				line-height: 24px;
-				padding: 0px 3px;
-				background-color: rgba(@buyblue, 0.6);
-				// display: inline-block;
-				// width: 100%;
-				// padding: 3px 5px;
-			}
-		}
-	}
-
-	.minter {
-		display: flex;
-		font-size: @font1;
-		color: @text3;
-		line-height: 22px;
-		align-items: center;
-		overflow: hidden;
-
-		span {
-			margin-left: 4px;
-		}
-
-		.van-image {
-			flex-shrink: 0;
-		}
-	}
+.product {
+    width: calc(50vw - 24px);
+    margin: 8px;
+    background-color: @bg2;
+    display: inline-block;
+    border-radius: 8px;
+    overflow: hidden;
+
+    .van-image {
+        overflow: hidden;
+        display: block;
+    }
+
+    .content {
+        padding: 6px 10px 8px;
+
+        .name {
+            font-size: @font2;
+            color: #ffffff;
+            line-height: 24px;
+        }
+    }
+
+    .text {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .text1 {
+            font-weight: 400;
+            color: @text3;
+            line-height: 24px;
+
+            span {
+                &:last-child {
+                    color: #fff;
+                    font-size: @font1;
+                }
+            }
+        }
+    }
+}
+
+.price-content {
+    display: flex;
+    align-items: center;
+
+    .text1 {
+        font-size: @font1;
+        color: @text3;
+        line-height: 12px;
+    }
+
+    .price {
+        font-size: @font4;
+        font-family: OSP;
+        color: @prim;
+        flex-grow: 1;
+        line-height: 18px;
+        padding: 12px 0;
+        .price-logo {
+            font-size: @font2;
+        }
+        img {
+            display: inline-block;
+            width: 8px;
+        }
+    }
+
+    .status {
+        line-height: 24px;
+        padding: 10px 0 8px;
+        color: @text3;
+        flex-grow: 1;
+        font-size: @font2;
+    }
+
+    .box {
+        display: flex;
+        // flex-basis: 1;
+        border-radius: 5px;
+        font-size: @font0;
+        .count {
+            padding-left: 5px;
+        }
+    }
+
+    .red {
+        .btn {
+            width: 40px;
+            color: @text0;
+            font-size: @font1;
+            background-color: rgb(@buyred);
+            padding: 3px 3px;
+        }
+
+        .count {
+            min-width: 40px;
+            color: @text0;
+            font-size: @font1;
+            padding: 0px 3px;
+            line-height: 24px;
+            background-color: rgba(@buyred, 0.6);
+            display: inline-block;
+        }
+    }
+
+    .blue {
+        .btn {
+            width: 40px;
+            color: @text0;
+            font-size: @font0;
+            background-color: rgb(@buyblue);
+            padding: 3px 3px;
+        }
+
+        .count {
+            min-width: 35px;
+            color: @text0;
+            font-size: @font0;
+            line-height: 24px;
+            padding: 0px 3px;
+            background-color: rgba(@buyblue, 0.6);
+            // display: inline-block;
+            // width: 100%;
+            // padding: 3px 5px;
+        }
+    }
+}
+
+.minter {
+    display: flex;
+    font-size: @font1;
+    color: @text3;
+    line-height: 22px;
+    align-items: center;
+    overflow: hidden;
+
+    span {
+        margin-left: 4px;
+    }
+
+    .van-image {
+        flex-shrink: 0;
+    }
+}
 </style>

src/components/asset/classList.vue

@@ -1,255 +1,233 @@
 <template>
-  <van-popup
-    v-model:show="showPicker"
-    round
-    :style="{ height: '100%' }"
-    position="right"
-  >
-    <div class="lv">
-      <div class="lv0">
-        <div class="lv_title">藏品系列</div>
-        <van-tag
-          plain
-          size="medium"
-          type="primary"
-          :class="`${item.oncilck ? 'checked' : 'default'}`"
-          v-for="(item, index) in itemsPicker"
-          @click="pickerItems(item, index, '1', itemsPicker)"
-          :key="index"
-        >
-          {{ item.name }}
-        </van-tag>
-      </div>
-      <div class="lv0">
-        <div class="lv_title">藏品类别</div>
-        <van-tag
-          plain
-          size="medium"
-          type="primary"
-          v-for="(item, index) in items"
-          :class="`${item.oncilck ? 'checked' : 'default'}`"
-          @click="pickerItems(item, index, '2', items)"
-          :key="index"
-        >
-          {{ item.name }}
-        </van-tag>
-      </div>
-      <div class="lv0">
-        <div class="lv_title">藏品碎片</div>
-        <van-tag
-          plain
-          size="medium"
-          type="primary"
-          v-for="(item, index) in children"
-          :class="`${item.oncilck ? 'checked' : 'default'}`"
-          @click="pickerItems(item, index, '3', children)"
-          :key="index"
-        >
-          {{ item.name }}
-        </van-tag>
-      </div>
-      <div class="class_btn">
-        <van-button
-          plain
-          round
-          size="small"
-          class="btn1"
-          @click="changeOnclick"
-          type="info"
-        >
-          重置
-        </van-button>
-        <van-button
-          @click="showPicker = false"
-          round
-          class="btn2"
-          size="small"
-          type="info"
-        >
-          确认
-        </van-button>
-      </div>
-    </div>
-    <!-- <van-sticky :offset-bottom="50" position="bottom">
+    <van-popup v-model:show="showPicker" round :style="{ height: '100%' }" position="right">
+        <div class="lv">
+            <div class="lv0">
+                <div class="lv_title">藏品系列</div>
+                <van-tag
+                    plain
+                    size="medium"
+                    type="primary"
+                    :class="`${item.oncilck ? 'checked' : 'default'}`"
+                    v-for="(item, index) in itemsPicker"
+                    @click="pickerItems(item, index, '1', itemsPicker)"
+                    :key="index"
+                >
+                    {{ item.name }}
+                </van-tag>
+            </div>
+            <div class="lv0">
+                <div class="lv_title">藏品类别</div>
+                <van-tag
+                    plain
+                    size="medium"
+                    type="primary"
+                    v-for="(item, index) in items"
+                    :class="`${item.oncilck ? 'checked' : 'default'}`"
+                    @click="pickerItems(item, index, '2', items)"
+                    :key="index"
+                >
+                    {{ item.name }}
+                </van-tag>
+            </div>
+            <div class="lv0">
+                <div class="lv_title">藏品碎片</div>
+                <van-tag
+                    plain
+                    size="medium"
+                    type="primary"
+                    v-for="(item, index) in children"
+                    :class="`${item.oncilck ? 'checked' : 'default'}`"
+                    @click="pickerItems(item, index, '3', children)"
+                    :key="index"
+                >
+                    {{ item.name }}
+                </van-tag>
+            </div>
+            <div class="class_btn">
+                <van-button plain round size="small" class="btn1" @click="changeOnclick" type="info"> 重置 </van-button>
+                <van-button @click="showPicker = false" round class="btn2" size="small" type="info"> 确认 </van-button>
+            </div>
+        </div>
+        <!-- <van-sticky :offset-bottom="50" position="bottom">
      
     </van-sticky> -->
-  </van-popup>
+    </van-popup>
 </template>
 
 <script>
 import { mapState } from 'vuex';
 export default {
-  props: {
-    id: {
-      type: Number,
-      defalut: 0
-    }
-  },
-  computed: {
-  	 ...mapState(['pageStorage'])
-  },
-  data() {
-    return {
-      showPicker: false,
-      itemsPicker: [],
-      items: [],
-      children: []
-    }
-  },
-  created() {
-	  if(this.$store.state.pageStorage){
-	  	for (let key in this.$store.state.pageStorage) {
-	  		this[key] = this.$store.state.pageStorage[key]
-	  	}
-	  }else{
-	  	this.getItems();
-	  }
-  },
-  methods: {
-    pickerItems(row, ids, id, list) {
-      const that = this
-      const actions = new Map([
-        [
-            '1',
-            () => {
-                this.items = row.children || [];
-                this.children = row.children && row.children.length > 1 ? row.children[0].children ? row.children[0].children: [] : [];
-        		this.items.forEach((item)=>{
-        			 item.oncilck = false;
-        		})
-        		this.children.forEach((item)=>{
-        			 item.oncilck = false;
-        		})
-        		
-            }
-        ],
-        [
-            '2',
-            () => {
-                this.children = row.children || [];
-        		this.children.forEach((item)=>{
-        			 item.oncilck = false;
-        		})
-            }
-        ],
-        [
-            '3',
-            () => {
-                this.showPicker = false;
+    props: {
+        id: {
+            type: Number,
+            defalut: 0
+        }
+    },
+    computed: {
+        ...mapState(['pageStorage'])
+    },
+    data() {
+        return {
+            showPicker: false,
+            itemsPicker: [],
+            items: [],
+            children: []
+        };
+    },
+    created() {
+        if (this.$store.state.pageStorage) {
+            for (let key in this.$store.state.pageStorage) {
+                this[key] = this.$store.state.pageStorage[key];
             }
-        ]
-      ])
-      // this.activeId = row.id;
-      // this.tips = row.name;
-      this.$emit('update', row.id, row.name)
-      let action = actions.get(id)
-      action(this)
-      const map1 = list.map(function (item, index) {
-        if (ids == index) {
-          item.oncilck = true
         } else {
-          item.oncilck = false
+            this.getItems();
         }
-        return item
-      })
-      return map1
     },
-    changeOnclick() {
-      this.$emit('update', '', '')
-      // this.showPicker = false;
-      this.getItems()
+    methods: {
+        pickerItems(row, ids, id, list) {
+            const that = this;
+            const actions = new Map([
+                [
+                    '1',
+                    () => {
+                        this.items = row.children || [];
+                        this.children =
+                            row.children && row.children.length > 1
+                                ? row.children[0].children
+                                    ? row.children[0].children
+                                    : []
+                                : [];
+                        this.items.forEach(item => {
+                            item.oncilck = false;
+                        });
+                        this.children.forEach(item => {
+                            item.oncilck = false;
+                        });
+                    }
+                ],
+                [
+                    '2',
+                    () => {
+                        this.children = row.children || [];
+                        this.children.forEach(item => {
+                            item.oncilck = false;
+                        });
+                    }
+                ],
+                [
+                    '3',
+                    () => {
+                        this.showPicker = false;
+                    }
+                ]
+            ]);
+            // this.activeId = row.id;
+            // this.tips = row.name;
+            this.$emit('update', row.id, row.name);
+            let action = actions.get(id);
+            action(this);
+            const map1 = list.map(function (item, index) {
+                if (ids == index) {
+                    item.oncilck = true;
+                } else {
+                    item.oncilck = false;
+                }
+                return item;
+            });
+            return map1;
+        },
+        changeOnclick() {
+            this.$emit('update', '', '');
+            // this.showPicker = false;
+            this.getItems();
+        },
+        getItems() {
+            this.$http
+                .post('/collectionCategory/categories', { projectId: this.projectId }, { body: 'json' })
+                .then(res => {
+                    this.itemsPicker = res;
+                    this.items = res[0] ? res[0].children : [];
+                    this.children = this.items[0] ? this.items[0].children : [];
+                })
+                .catch(e => {
+                    // this.$toast(e.error)
+                });
+        }
     },
-    getItems() {
-      this.$http
-        .post(
-          '/collectionCategory/categories',
-          { projectId: this.projectId },
-          { body: 'json' }
-        )
-        .then(res => {
-          this.itemsPicker = res
-          this.items = res[0] ? res[0].children : []
-          this.children = this.items[0] ? this.items[0].children : []
-        })
-        .catch(e => {
-          // this.$toast(e.error)
-        })
+    unmounted() {
+        this.$emit('unmount', {
+            itemsPicker: this.itemsPicker,
+            items: this.items,
+            children: this.children
+        });
     }
-  },
-  unmounted() {
-	  this.$emit('unmount', {
-	  	itemsPicker:this.itemsPicker,
-	  	items:this.items,
-	  	children:this.children,
-	  })
-  }
-}
+};
 </script>
 
 <style lang="less" scoped>
 .lv {
-  width: 80vw;
-  height: 100vh;
-  padding: 8vh 3vw;
-  box-sizing: border-box;
-  position: relative;
-  background-color: @bg2;
-  padding-bottom: 20vw;
-  overflow: auto;
-
-  .class_btn {
-    position: fixed;
-    bottom: 0px;
-    width: 100%;
-    height: 15vw;
+    width: 80vw;
+    height: 100vh;
+    padding: 8vh 3vw;
+    box-sizing: border-box;
+    position: relative;
     background-color: @bg2;
-    padding-left: 2vw;
-    .btn1 {
-      border: 1px solid @prim;
-      background-color: @bg;
-      padding: 8px 40px;
-      color: @prim;
-    }
-    .btn2 {
-      background-color: @prim;
-      padding: 8px 40px;
-      color: @bg;
-      border: 1px solid @prim;
-    }
-    /deep/ .van-button {
-      margin-right: 2vw;
-      // margin-bottom: 5vh;
-    }
-  }
-  .lv0 {
-    .lv_title {
-      color: @text0;
-      font-size: @font2;
-      font-weight: bold;
-      margin-bottom: 10px;
-    }
-    .default {
-      background: @bg;
-      border-radius: 15px 15px 15px 15px;
-      opacity: 1;
-      padding: 7px 15px;
-      border: 0px solid @prim;
-      color: @prim;
-    }
-    .checked {
-      border-radius: 15px 15px 15px 15px;
-      border: 0.0625rem solid @prim;
-      padding: 6px 13px;
-      color: @bg;
-      background-color: @prim;
+    padding-bottom: 20vw;
+    overflow: auto;
+
+    .class_btn {
+        position: fixed;
+        bottom: 0px;
+        width: 100%;
+        height: 15vw;
+        background-color: @bg2;
+        padding-left: 2vw;
+        .btn1 {
+            border: 1px solid @prim;
+            background-color: @bg;
+            padding: 8px 40px;
+            color: @prim;
+        }
+        .btn2 {
+            background-color: @prim;
+            padding: 8px 40px;
+            color: @bg;
+            border: 1px solid @prim;
+        }
+        /deep/ .van-button {
+            margin-right: 2vw;
+            // margin-bottom: 5vh;
+        }
     }
-    position: relative;
-    padding-bottom: 3vh;
-    margin-bottom: 2vh;
-    border-bottom: 1px solid #eee;
-    /deep/ .van-tag {
-      margin: 5px;
+    .lv0 {
+        .lv_title {
+            color: @text0;
+            font-size: @font2;
+            font-weight: bold;
+            margin-bottom: 10px;
+        }
+        .default {
+            background: @bg;
+            border-radius: 15px 15px 15px 15px;
+            opacity: 1;
+            padding: 7px 15px;
+            border: 0px solid @prim;
+            color: @prim;
+        }
+        .checked {
+            border-radius: 15px 15px 15px 15px;
+            border: 0.0625rem solid @prim;
+            padding: 6px 13px;
+            color: @bg;
+            background-color: @prim;
+        }
+        position: relative;
+        padding-bottom: 3vh;
+        margin-bottom: 2vh;
+        border-bottom: 1px solid #eee;
+        /deep/ .van-tag {
+            margin: 5px;
+        }
     }
-  }
 }
 </style>

src/components/asset/openBox.vue

@@ -1,21 +1,18 @@
 <template>
-  <div class="openbox">
-    <van-popup v-model:show="showPopup">
-      <div class="items">
-        <div class="item_bg">
-          <img src="@assets/pop_bg.png" />
-        </div>
-        <div class="item">
-          <van-image lazy-load  :src="info.url" />
-          <div class="text">藏品正在生成中约1~3分钟，完成后会出现在你的藏品室</div>
-          <img src="@assets/icon_fenxiang_close.png"
-               @click="onClose"
-               alt=""
-               class="close" />
-        </div>
-      </div>
-    </van-popup>
-  </div>
+    <div class="openbox">
+        <van-popup v-model:show="showPopup">
+            <div class="items">
+                <div class="item_bg">
+                    <img src="@assets/pop_bg.png" />
+                </div>
+                <div class="item">
+                    <van-image lazy-load :src="info.url" />
+                    <div class="text">藏品正在生成中约1~3分钟，完成后会出现在你的藏品室</div>
+                    <img src="@assets/icon_fenxiang_close.png" @click="onClose" alt="" class="close" />
+                </div>
+            </div>
+        </van-popup>
+    </div>
 </template>
 
 <script>

src/components/creator/CreatorInfo.vue

@@ -1,285 +1,284 @@
 <template>
-	<router-link :to="{
+    <router-link
+        :to="{
             path: '/creatorDetail',
             query: {
                 id: info.id
             }
-        }" class="info">
-		<img src="@assets/create-bg.png" class="create-bg">
-		<div class="create-content">
-			<div class="user-pic">
-				<van-image lazy-load :width="size === 'large' ? 50 : 50" :height="size === 'large' ? 50 : 50"
-					:src="getImg(info.avatar)" fit="cover" radius="100" class="pic-main"
-					:style="{'border-color':NOInfo.color }" />
-
-				<img v-if="rank" class="NOImg" :src="NOInfo.img1" alt="" />
-			</div>
-
-
-			<div class="content">
-				<div class="text1 van-ellipsis">{{ info.nickname }}</div>
-				<div class="sale" v-if="rank">
-					<img class="icon" :src="NOInfo.img2" alt="" />
-					<span class="sale-word">已售{{ info.sales }}</span>
-					<i class="font_family icon-a-icon-dianzan2" style="color: #fff;"></i>
-				</div>
-				<div class="text4" v-else>
-					<span class="sale-word">已售</span>
-					<span>{{ info.sales }}</span>
-				</div>
-				<div class="text2 van-multi-ellipsis--l2">
-					{{ info.intro }}
-				</div>
-
-				<div class="flex1"></div>
-
-				<van-button @click.prevent="follow" :class="{ follow: info.follow }" plain type="primary" size="small">
-					{{ info.follow ? (isFollow ? '互相关注' : '已关注') : '关注' }}
-				</van-button>
-				<!-- <div class="text3">
+        }"
+        class="info"
+    >
+        <img src="@assets/create-bg.png" class="create-bg" />
+        <div class="create-content">
+            <div class="user-pic">
+                <van-image
+                    lazy-load
+                    :width="size === 'large' ? 50 : 50"
+                    :height="size === 'large' ? 50 : 50"
+                    :src="getImg(info.avatar)"
+                    fit="cover"
+                    radius="100"
+                    class="pic-main"
+                    :style="{ 'border-color': NOInfo.color }"
+                />
+
+                <img v-if="rank" class="NOImg" :src="NOInfo.img1" alt="" />
+            </div>
+
+            <div class="content">
+                <div class="text1 van-ellipsis">{{ info.nickname }}</div>
+                <div class="sale" v-if="rank">
+                    <img class="icon" :src="NOInfo.img2" alt="" />
+                    <span class="sale-word">已售{{ info.sales }}</span>
+                    <i class="font_family icon-a-icon-dianzan2" style="color: #fff"></i>
+                </div>
+                <div class="text4" v-else>
+                    <span class="sale-word">已售</span>
+                    <span>{{ info.sales }}</span>
+                </div>
+                <div class="text2 van-multi-ellipsis--l2">
+                    {{ info.intro }}
+                </div>
+
+                <div class="flex1"></div>
+
+                <van-button @click.prevent="follow" :class="{ follow: info.follow }" plain type="primary" size="small">
+                    {{ info.follow ? (isFollow ? '互相关注' : '已关注') : '关注' }}
+                </van-button>
+                <!-- <div class="text3">
 			        
 			        
 			    </div> -->
-			</div>
-		</div>
-
-
-	</router-link>
+            </div>
+        </div>
+    </router-link>
 </template>
 
 <script>
-	export default {
-		props: {
-			rank: {
-				type: Number,
-				default: 0
-			},
-			info: {
-				type: Object,
-				default: () => {
-					return {};
-				}
-			},
-			isFollow: {
-				type: Boolean,
-				default: false
-			},
-			size: {
-				type: String,
-				default: 'normal'
-			}
-		},
-		computed: {
-			NOInfo() {
-				if (this.rank) {
-					const colors = ['#f5cf41', '#d9d9d9', '#c2681b'];
-					return {
-						img1: require(`@assets/NO${this.rank}.png`),
-						img2: require(`@assets/svgs/NOicon${this.rank}.svg`),
-						color: colors[this.rank - 1]
-					};
-				}
-				return {};
-			}
-		},
-		methods: {
-			follow() {
-				this.checkLogin().then(() => {
-					if (!this.info.follow) {
-						this.$http.get(`/user/${this.info.id}/follow`).then(res => {
-							this.$emit('update:info', {
-								...this.info,
-								follow: true,
-								followers: this.info.followers + 1
-							});
-							this.$toast.success('关注成功');
-						});
-					} else {
-						this.$http.get(`/user/${this.info.id}/unfollow`).then(() => {
-							this.$emit('update:info', {
-								...this.info,
-								follow: false,
-								followers: this.info.followers - 1
-							});
-							this.$toast.success('取消关注');
-						});
-					}
-				});
-			}
-		}
-	};
+export default {
+    props: {
+        rank: {
+            type: Number,
+            default: 0
+        },
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        },
+        isFollow: {
+            type: Boolean,
+            default: false
+        },
+        size: {
+            type: String,
+            default: 'normal'
+        }
+    },
+    computed: {
+        NOInfo() {
+            if (this.rank) {
+                const colors = ['#f5cf41', '#d9d9d9', '#c2681b'];
+                return {
+                    img1: require(`@assets/NO${this.rank}.png`),
+                    img2: require(`@assets/svgs/NOicon${this.rank}.svg`),
+                    color: colors[this.rank - 1]
+                };
+            }
+            return {};
+        }
+    },
+    methods: {
+        follow() {
+            this.checkLogin().then(() => {
+                if (!this.info.follow) {
+                    this.$http.get(`/user/${this.info.id}/follow`).then(res => {
+                        this.$emit('update:info', {
+                            ...this.info,
+                            follow: true,
+                            followers: this.info.followers + 1
+                        });
+                        this.$toast.success('关注成功');
+                    });
+                } else {
+                    this.$http.get(`/user/${this.info.id}/unfollow`).then(() => {
+                        this.$emit('update:info', {
+                            ...this.info,
+                            follow: false,
+                            followers: this.info.followers - 1
+                        });
+                        this.$toast.success('取消关注');
+                    });
+                }
+            });
+        }
+    }
+};
 </script>
 
 <style lang="less" scoped>
-	.info {
-		display: flex;
-		flex-direction: column;
-
-		position: relative;
-		align-items: center;
-		width: 100%;
-		height: auto;
-
-		// border: 1px solid #999;
-		// border-radius: 20px;
-		.create-bg {
-			position: relative;
-			width: 100%;
-			height: auto;
-		}
-
-		.create-content {
-			width: 100%;
-			height: 100%;
-			position: absolute;
-			top: 0;
-			left: 0;
-			padding: 24px 0px;
-			box-sizing: border-box;
-			.user-pic {
-				position: relative;
-
-				.pic-main {
-					// border: 1px solid;
-					border-width: 1px;
-					border-style: solid;
-					border-color: rgba(245, 207, 65,0);
-					background: #fff;
-				}
-
-				.NOImg {
-					width: 20px;
-					height: auto;
-					position: absolute;
-					top: -14px;
-					left: 50%;
-					transform: translateX(-50%);
-				}
-			}
-
-			.content {
-				flex-grow: 1;
-				display: flex;
-				flex-direction: column;
-				overflow: hidden;
-				// height: 80px;
-
-				.text1 {
-					font-size: @font0;
-					color: rgba(#fff, .4);
-					line-height: 18px;
-				}
-				.sale{
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					.sale-word {
-						font-size: @font0;
-						margin-left: 5px;
-						color: #fff;
-					}
-				}
-				
-
-				.text2 {
-					font-size: @font0;
-					color: @text3;
-					line-height: 18px;
-					margin: 2px 0;
-					padding:0 40px;
-				}
-
-				.van-button--small {
-					width: 70px;
-					border: solid 0px transparent;
-					padding: 1px;
-					// background-image: linear-gradient(@bg3, @bg3), linear-gradient(135deg, @prim, @warn);
-					background-color: @prim;
-					background-origin: border-box;
-					box-sizing: border-box;
-					background-clip: content-box, border-box;
-					font-size: @font0;
-					color: #fff;
-					margin: 0 auto;
-					&.follow {
-						// background-image: linear-gradient(@bg3, @bg3), linear-gradient(135deg, @text3, @text3);
-						background-color: rgba(@prim, .2);
-						color: #0063F5;
-					}
-				}
-
-				.text3 {
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-
-					.sale {
-						display: flex;
-						align-items: center;
-						font-size: @font2;
-						line-height: 24px;
-
-						.font_family {
-							font-size: @font2;
-							margin-left: 2px;
-						}
-
-						.icon {
-							display: block;
-							width: 18px;
-						}
-
-						span {
-							transform: translateX(3px);
-						}
-					}
-
-
-
-					
-				}
-				.text4 {
-					color: #fff;
-					span {
-						font-size: @font0;
-						color: #fff;
-				
-						&:first-child {
-							color: #fff;
-							margin-right: 2px;
-						}
-					}
-				}
-			}
-
-			.van-image {
-				flex-shrink: 0;
-			}
-
-			.NOImg {
-				position: absolute;
-				width: 80px;
-				height: 90px;
-				display: block;
-				left: 12px;
-				top: 15px;
-			}
-		}
+.info {
+    display: flex;
+    flex-direction: column;
+
+    position: relative;
+    align-items: center;
+    width: 100%;
+    height: auto;
+
+    // border: 1px solid #999;
+    // border-radius: 20px;
+    .create-bg {
+        position: relative;
+        width: 100%;
+        height: auto;
+    }
+
+    .create-content {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        padding: 24px 0px;
+        box-sizing: border-box;
+        .user-pic {
+            position: relative;
+
+            .pic-main {
+                // border: 1px solid;
+                border-width: 1px;
+                border-style: solid;
+                border-color: rgba(245, 207, 65, 0);
+                background: #fff;
+            }
 
+            .NOImg {
+                width: 20px;
+                height: auto;
+                position: absolute;
+                top: -14px;
+                left: 50%;
+                transform: translateX(-50%);
+            }
+        }
+
+        .content {
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            // height: 80px;
+
+            .text1 {
+                font-size: @font0;
+                color: rgba(#fff, 0.4);
+                line-height: 18px;
+            }
+            .sale {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                .sale-word {
+                    font-size: @font0;
+                    margin-left: 5px;
+                    color: #fff;
+                }
+            }
 
+            .text2 {
+                font-size: @font0;
+                color: @text3;
+                line-height: 18px;
+                margin: 2px 0;
+                padding: 0 40px;
+            }
 
-	}
+            .van-button--small {
+                width: 70px;
+                border: solid 0px transparent;
+                padding: 1px;
+                // background-image: linear-gradient(@bg3, @bg3), linear-gradient(135deg, @prim, @warn);
+                background-color: @prim;
+                background-origin: border-box;
+                box-sizing: border-box;
+                background-clip: content-box, border-box;
+                font-size: @font0;
+                color: #fff;
+                margin: 0 auto;
+                &.follow {
+                    // background-image: linear-gradient(@bg3, @bg3), linear-gradient(135deg, @text3, @text3);
+                    background-color: rgba(@prim, 0.2);
+                    color: #0063f5;
+                }
+            }
 
-	// .info + .info {
-	// 		    position: relative;
-	// 		    &::before {
-	// 		        content: '';
-	// 		        position: absolute;
-	// 		        left: 20px;
-	// 		        right: 20px;
-	// 		        top: 0;
-	// 		        height: 1px;
-	// 		        background-color: @bg3;
-	// 		    }
-	// 		}
+            .text3 {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .sale {
+                    display: flex;
+                    align-items: center;
+                    font-size: @font2;
+                    line-height: 24px;
+
+                    .font_family {
+                        font-size: @font2;
+                        margin-left: 2px;
+                    }
+
+                    .icon {
+                        display: block;
+                        width: 18px;
+                    }
+
+                    span {
+                        transform: translateX(3px);
+                    }
+                }
+            }
+            .text4 {
+                color: #fff;
+                span {
+                    font-size: @font0;
+                    color: #fff;
+
+                    &:first-child {
+                        color: #fff;
+                        margin-right: 2px;
+                    }
+                }
+            }
+        }
+
+        .van-image {
+            flex-shrink: 0;
+        }
+
+        .NOImg {
+            position: absolute;
+            width: 80px;
+            height: 90px;
+            display: block;
+            left: 12px;
+            top: 15px;
+        }
+    }
+}
+
+// .info + .info {
+// 		    position: relative;
+// 		    &::before {
+// 		        content: '';
+// 		        position: absolute;
+// 		        left: 20px;
+// 		        right: 20px;
+// 		        top: 0;
+// 		        height: 1px;
+// 		        background-color: @bg3;
+// 		    }
+// 		}
 </style>

src/components/order/OrderInfo.vue

@@ -14,7 +14,7 @@
             <span class="status">{{ getLabelName(info.status, statusOptions) }}</span>
         </div>
         <div class="order">
-            <van-image lazy-load  :radius="6" width="80" height="80" :src="getImg(changeImgs(info.pic))" fit="cover" />
+            <van-image lazy-load :radius="6" width="80" height="80" :src="getImg(changeImgs(info.pic))" fit="cover" />
 
             <div class="content">
                 <div class="name van-multi-ellipsis--l2">

src/components/product/ProductBanner.vue

@@ -17,7 +17,8 @@
                         >
                             您的浏览器不支持 video 标签。
                         </video>
-                        <van-image lazy-load 
+                        <van-image
+                            lazy-load
                             v-else
                             @click="preview(index, changeImgs(banners))"
                             :src="getImg(item.url, '', 1200)"

src/components/product/productInfo.vue

@@ -116,7 +116,6 @@ export default {
             img {
                 display: inline-block;
                 width: 8px;
-                
             }
         }
         .status {

src/components/product/productLarge.vue

@@ -8,7 +8,8 @@
         }"
         class="product"
     >
-        <van-image lazy-load 
+        <van-image
+            lazy-load
             :radius="30"
             width="100%"
             height="calc(100vw - 32px)"
@@ -30,7 +31,14 @@
 
             <div class="bottom">
                 <div class="miner">
-                    <van-image lazy-load  width="18" height="18" radius="18" :src="getImg(info.minterAvatar)" fit="cover" />
+                    <van-image
+                        lazy-load
+                        width="18"
+                        height="18"
+                        radius="18"
+                        :src="getImg(info.minterAvatar)"
+                        fit="cover"
+                    />
                     <span>{{ info.minter }}</span>
                 </div>
                 <div class="flex1"></div>
@@ -96,7 +104,7 @@ export default {
         if (this.countdown || this.countdown === 0) {
             this.updateTime();
         }
-		console.log(this.info)
+        console.log(this.info);
     },
     methods: {
         updateTime() {

src/components/product/productSmall.vue

@@ -1,15 +1,8 @@
 <template>
-  <div class="product" @click="goNext(info)">
-    <van-image
-      lazy-load
-      width="100%"
-      height="140px"
-      :radius="15"
-      :src="getImg(info.pic)"
-      fit="cover"
-    />
+    <div class="product" @click="goNext(info)">
+        <van-image lazy-load width="100%" height="140px" :radius="15" :src="getImg(info.pic)" fit="cover" />
 
-    <!-- <div class="content">
+        <!-- <div class="content">
             <div class="name van-ellipsis">
                 {{ info.name }}
             </div>
@@ -17,52 +10,52 @@
                 {{ info.remark }}
             </div>
         </div> -->
-  </div>
+    </div>
 </template>
 
 <script>
-import banner from '../../mixins/banner'
+import banner from '../../mixins/banner';
 export default {
-  mixins: [banner],
-  props: {
-    info: {
-      type: Object,
-      default: () => {
-        return {}
-      }
+    mixins: [banner],
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
     }
-  }
-}
+};
 </script>
 
 <style lang="less" scoped>
 .product {
-  // width: 255px;
-  // margin: 8px;
-  width: 100%;
-  background-color: @bg2;
-  display: inline-block;
-  border-radius: 15px;
-  overflow: hidden;
-
-  .van-image {
+    // width: 255px;
+    // margin: 8px;
+    width: 100%;
+    background-color: @bg2;
+    display: inline-block;
+    border-radius: 15px;
     overflow: hidden;
-    display: block;
-  }
-  .content {
-    padding: 6px 16px 10px;
 
-    .name {
-      font-size: @font2;
-      color: #ffffff;
-      line-height: 24px;
+    .van-image {
+        overflow: hidden;
+        display: block;
     }
+    .content {
+        padding: 6px 16px 10px;
+
+        .name {
+            font-size: @font2;
+            color: #ffffff;
+            line-height: 24px;
+        }
 
-    .text {
-      font-size: @font1;
-      color: @text3;
-      line-height: 20px;
+        .text {
+            font-size: @font1;
+            color: @text3;
+            line-height: 20px;
+        }
     }
-  }
 }
 </style>

src/components/product/productSwiper.vue

@@ -8,11 +8,7 @@
         }"
         class="product"
     >
-        <van-image
-            width="100%"
-            :src="info.pic[0].url"
-            fit="cover"
-        /><!--height="calc(100vw - 32px)"-->
+        <van-image width="100%" :src="info.pic[0].url" fit="cover" /><!--height="calc(100vw - 32px)"-->
 
         <div class="content">
             <div class="name van-ellipsis">{{ info.name }}</div>
@@ -21,7 +17,7 @@
                     <span class="sales-fir">限量</span>
                     <span class="sales-fir-count">{{ info.total }}份</span>
                 </div>
-               <!-- <div class="sales sales-border" v-if="info.category">
+                <!-- <div class="sales sales-border" v-if="info.category">
                     <span class="sales-fir-count">{{ info.category }}</span>
                 </div> -->
             </div>
@@ -31,12 +27,11 @@
                     <van-image width="18" height="18" radius="18" :src="getImg(info.minterAvatar)" fit="cover" />
                     <!-- <span>铸造者:</span> -->
                     <span>{{ info.minter }}</span>
-                    
                 </div>
                 <div class="flex1"></div>
                 <div class="price" v-if="info.salable">
                     <!-- <img src="@assets/jiage_huang.png" alt="" /> -->
-					<span class="jiage_fuhao">￥</span>
+                    <span class="jiage_fuhao">￥</span>
                     <span class="price-font24">{{ info.price }}</span>
                 </div>
                 <div v-else class="status">仅展示</div>
@@ -142,7 +137,7 @@ export default {
 .product {
     // width:calc(66vw);//246px; //calc(100vw - 32px);
     // margin: 8px 16px;
-	width: 100%;
+    width: 100%;
     position: relative;
     background-color: @bg2;
     display: inline-block;
@@ -182,7 +177,7 @@ export default {
         display: block;
         position: relative;
         z-index: 2;
-		width: 100%;
+        width: 100%;
         height: calc(76vw);
     }
     .content {
@@ -197,7 +192,7 @@ export default {
 
         .sales-list {
             margin-top: 8px;
-			height: 24px;
+            height: 24px;
             .flex();
         }
 
@@ -215,9 +210,9 @@ export default {
                     background: @prim;
                     color: @bg;
                 }
-                &.sales-fir-count{
+                &.sales-fir-count {
                     color: @prim;
-					background-color: rgba(@bg, .7);
+                    background-color: rgba(@bg, 0.7);
                 }
                 background: @bg3;
                 color: @prim;
@@ -234,7 +229,7 @@ export default {
             display: flex;
             margin-top: 14px;
             align-items: center;
-			justify-content: space-between;
+            justify-content: space-between;
             .miner {
                 display: flex;
                 align-items: center;
@@ -244,7 +239,7 @@ export default {
                     font-size: @font1;
                     margin-left: 6px;
                 }
-                .miner-img-zzz{
+                .miner-img-zzz {
                     position: absolute;
                     right: 0px;
                 }
@@ -262,12 +257,12 @@ export default {
                     width: 8px;
                     display: inline-block;
                 }
-				.jiage_fuhao{
-					font-size: @font2;
-				}
-                .price-font24{
+                .jiage_fuhao {
+                    font-size: @font2;
+                }
+                .price-font24 {
                     /*font-size: @font5;*/
-                    color:#fff;
+                    color: #fff;
                     // font-family: fangsong;
                 }
             }

src/main.js

@@ -1,14 +1,10 @@
-import {
-    createApp
-} from 'vue';
+import { createApp } from 'vue';
 import App from './App.vue';
 import './registerServiceWorker';
 import router from './router';
 import store from './store';
 import Vant from 'vant';
-import {
-    ConfigProvider
-} from 'vant';
+import { ConfigProvider } from 'vant';
 import 'vant/lib/index.css';
 import './styles/app.less';
 import './styles/font.less';
@@ -24,10 +20,7 @@ import VueClipboard from 'vue-clipboard2';
 import queryString from 'query-string';
 import PageBar from './components/PageBar';
 import eruda from 'eruda';
-import {
-    Toast,
-    Lazyload
-} from 'vant';
+import { Toast, Lazyload } from 'vant';
 
 Toast.setDefaultOptions('loading', {
     duration: 0
@@ -101,7 +94,7 @@ if (window.cordova) {
                             console.log('An error occured while checking for updates');
                             break;
 
-                            // Intermediate (non final) statuses
+                        // Intermediate (non final) statuses
                         case SyncStatus.CHECKING_FOR_UPDATE:
                             console.log('Checking for update.');
                             break;
@@ -115,17 +108,18 @@ if (window.cordova) {
                             console.log('Installing update');
                             break;
                     }
-                }, {
+                },
+                {
                     installMode: InstallMode.IMMEDIATE,
                     updateDialog: false
                 },
                 function (downloadProgress) {
                     console.log(
                         'Downloading ' +
-                        downloadProgress.receivedBytes +
-                        ' of ' +
-                        downloadProgress.totalBytes +
-                        ' bytes.'
+                            downloadProgress.receivedBytes +
+                            ' of ' +
+                            downloadProgress.totalBytes +
+                            ' bytes.'
                     );
                 }
             );

src/mixins/banner.js

@@ -1,13 +1,13 @@
 export default {
-  methods: {
-    goNext(info) {
-      if (info.link && info.linkType === 'collection') {
-        this.$router.push(`/productDetail?id=${info.linkContent}`)
-      } else if (info.link && info.linkType === 'user') {
-        this.$router.push(`/creatorDetail?id=${info.linkContent}`)
-      } else if (info.link && info.linkType === 'activity') {
-        this.$router.push(`/activityDetails?id=${info.linkContent}`)
-      }
+    methods: {
+        goNext(info) {
+            if (info.link && info.linkType === 'collection') {
+                this.$router.push(`/productDetail?id=${info.linkContent}`);
+            } else if (info.link && info.linkType === 'user') {
+                this.$router.push(`/creatorDetail?id=${info.linkContent}`);
+            } else if (info.link && info.linkType === 'activity') {
+                this.$router.push(`/activityDetails?id=${info.linkContent}`);
+            }
+        }
     }
-  }
-}
+};

src/mixins/common.js

@@ -154,31 +154,33 @@ export default {
                 return Promise.reject();
             }
         },
-		checkRenew(toast = true,message) {
-		    return this.$http
-		        .post('/walletLianlianpay/getAccount')
-		        .then(res => {
-		            if (res.needRenew && toast) {
-						this.$dialog.confirm({ 
-						    title: '提示',
-						    message: message || `请您续费钱包后可享受钱包支付权益`
-						}).then(() => {
-						    this.$router.push({
-						        path: '/mineWalletRenew', 
-						    });
-						});
-		                return Promise.reject();
-		            } else {
-						return Promise.resolve(res);
-		            }
-		        })
-		        .catch(e => {
-					if (e) {
-						this.$toast(e.error);
-					}
-					return Promise.reject();
-				});
-		},
+        checkRenew(toast = true, message) {
+            return this.$http
+                .post('/walletLianlianpay/getAccount')
+                .then(res => {
+                    if (res.needRenew && toast) {
+                        this.$dialog
+                            .confirm({
+                                title: '提示',
+                                message: message || `请您续费钱包后可享受钱包支付权益`
+                            })
+                            .then(() => {
+                                this.$router.push({
+                                    path: '/mineWalletRenew'
+                                });
+                            });
+                        return Promise.reject();
+                    } else {
+                        return Promise.resolve(res);
+                    }
+                })
+                .catch(e => {
+                    if (e) {
+                        this.$toast(e.error);
+                    }
+                    return Promise.reject();
+                });
+        },
         getLabelName(val = '', list = []) {
             let info = list.find(item => {
                 return item.value === val;

src/mixins/verify_submit.js

@@ -320,10 +320,10 @@ export default {
         },
         // 图像验证码
         async openPopup() {
-        	// 验证钱包是否到期
-        	if (this.payType == 'WALLET_ACCOUNT') {
-        		await this.checkRenew();
-        	}
+            // 验证钱包是否到期
+            if (this.payType == 'WALLET_ACCOUNT') {
+                await this.checkRenew();
+            }
             if (this.$route.query.orderId) {
                 this.showSms = false;
                 this.isPwd = false;

src/router/index.js

@@ -1,19 +1,11 @@
-import {
-    createRouter,
-    createWebHistory,
-    createWebHashHistory
-} from 'vue-router';
+import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';
 import store from '../store';
-import {
-    Page
-} from './Page';
-import {
-    Dialog
-} from 'vant';
+import { Page } from './Page';
+import { Dialog } from 'vant';
 import http from '../plugins/http';
 
 jsapiSign();
-var url = "https://" + window.location.host; //服务器的url
+var url = 'https://' + window.location.host; //服务器的url
 function jsapiSign() {
     if (/micromessenger/i.test(navigator.userAgent) && !/localhost|(192\.168)/i.test(location.host)) {
         setTimeout(() => {
@@ -60,14 +52,16 @@ function jsapiSign() {
     }
 }
 jsapiSign();
-const routes = [{
+const routes = [
+    {
         path: '/',
         redirect: 'home'
     },
     {
         path: '/',
         component: () => import('../views/Index.vue'),
-        children: [{
+        children: [
+            {
                 path: '/home',
                 name: 'home',
                 component: () => import('../views/Home.vue'),
@@ -446,14 +440,14 @@ const routes = [{
             title: '默望数字艺术馆'
         }
     },
-	{
-	    path: '/mineBanksEdit',
-	    name: 'mineBanksEdit',
-	    component: () => import(/* webpackChunkName: "Banks" */ '../views/user/BanksEdit.vue'),
-	    meta: {
-	        title: '默望数字艺术馆'
-	    }
-	},
+    {
+        path: '/mineBanksEdit',
+        name: 'mineBanksEdit',
+        component: () => import(/* webpackChunkName: "Banks" */ '../views/user/BanksEdit.vue'),
+        meta: {
+            title: '默望数字艺术馆'
+        }
+    },
     {
         path: '/mineBanksRemove',
         name: 'mineBanksRemove',
@@ -478,78 +472,78 @@ const routes = [{
             title: '默望数字艺术馆'
         }
     },
-	{
-	    path: '/mineWalletIndex',
-	    name: 'mineWalletIndex',
-	    component: () => import(/* webpackChunkName: "Wallet" */ '../views/Wallet/index.vue'),
-	    meta: {
-	        title: '默望数字艺术馆'
-	    }
-	},
-	{
-	    path: '/mineWalletOpen',
-	    name: 'mineWalletOpen',
-	    component: () => import(/* webpackChunkName: "Wallet" */ '../views/Wallet/open.vue'),
-	    meta: {
-	        title: '默望数字艺术馆'
-	    }
-	},
-	{
-	    path: '/mineWalletAdd',
-	    name: 'mineWalletAdd',
-	    component: () => import(/* webpackChunkName: "Wallet" */ '../views/Wallet/add.vue'),
-	    meta: {
-	        title: '默望数字艺术馆'
-	    }
-	},
-	{
-	    path: '/registerWithPage',
-	    name: 'registerWithPage',
-	    component: () => import(/* webpackChunkName: "Wallet" */ '../views/Wallet/pay.vue'),
-	    meta: {
-	        title: '默望数字艺术馆'
-	    }
-	},
-	{
-	    path: '/mineWalletEdit',
-	    name: 'mineWalletEdit',
-	    component: () => import(/* webpackChunkName: "Wallet" */ '../views/Wallet/edit.vue'),
-	    meta: {
-	        title: '默望数字艺术馆'
-	    }
-	},
-	{
-	    path: '/mineWalletCreate',
-	    name: 'mineWalletCreate',
-	    component: () => import(/* webpackChunkName: "Wallet" */ '../views/Wallet/create.vue'),
-	    meta: {
-	        title: '默望数字艺术馆'
-	    }
-	},
-	{
-	    path: '/mineWalletReset',
-	    name: 'mineWalletReset',
-	    component: () => import(/* webpackChunkName: "Wallet" */ '../views/Wallet/reset.vue'),
-	    meta: {
-	        title: '默望数字艺术馆'
-	    }
-	}, 
-	{
-	    path: '/mineWalletBillDetails',
-	    name: 'mineWalletBillDetails',
-	    component: () => import(/* webpackChunkName: "Wallet" */ '../views/Wallet/billDetails.vue'),
-	    meta: {
-	        title: '默望数字艺术馆'
-	    }
-	},
-	{
-	    path: '/mineWalletRenew',
-	    name: 'mineWalletRenew',
-	    component: () => import(/* webpackChunkName: "Wallet" */ '../views/Wallet/renew.vue'),
-	    meta: {
-	        title: '默望数字艺术馆'
-	    }
-	},
+    {
+        path: '/mineWalletIndex',
+        name: 'mineWalletIndex',
+        component: () => import(/* webpackChunkName: "Wallet" */ '../views/Wallet/index.vue'),
+        meta: {
+            title: '默望数字艺术馆'
+        }
+    },
+    {
+        path: '/mineWalletOpen',
+        name: 'mineWalletOpen',
+        component: () => import(/* webpackChunkName: "Wallet" */ '../views/Wallet/open.vue'),
+        meta: {
+            title: '默望数字艺术馆'
+        }
+    },
+    {
+        path: '/mineWalletAdd',
+        name: 'mineWalletAdd',
+        component: () => import(/* webpackChunkName: "Wallet" */ '../views/Wallet/add.vue'),
+        meta: {
+            title: '默望数字艺术馆'
+        }
+    },
+    {
+        path: '/registerWithPage',
+        name: 'registerWithPage',
+        component: () => import(/* webpackChunkName: "Wallet" */ '../views/Wallet/pay.vue'),
+        meta: {
+            title: '默望数字艺术馆'
+        }
+    },
+    {
+        path: '/mineWalletEdit',
+        name: 'mineWalletEdit',
+        component: () => import(/* webpackChunkName: "Wallet" */ '../views/Wallet/edit.vue'),
+        meta: {
+            title: '默望数字艺术馆'
+        }
+    },
+    {
+        path: '/mineWalletCreate',
+        name: 'mineWalletCreate',
+        component: () => import(/* webpackChunkName: "Wallet" */ '../views/Wallet/create.vue'),
+        meta: {
+            title: '默望数字艺术馆'
+        }
+    },
+    {
+        path: '/mineWalletReset',
+        name: 'mineWalletReset',
+        component: () => import(/* webpackChunkName: "Wallet" */ '../views/Wallet/reset.vue'),
+        meta: {
+            title: '默望数字艺术馆'
+        }
+    },
+    {
+        path: '/mineWalletBillDetails',
+        name: 'mineWalletBillDetails',
+        component: () => import(/* webpackChunkName: "Wallet" */ '../views/Wallet/billDetails.vue'),
+        meta: {
+            title: '默望数字艺术馆'
+        }
+    },
+    {
+        path: '/mineWalletRenew',
+        name: 'mineWalletRenew',
+        component: () => import(/* webpackChunkName: "Wallet" */ '../views/Wallet/renew.vue'),
+        meta: {
+            title: '默望数字艺术馆'
+        }
+    },
     {
         path: '/mineWallet',
         name: 'mineWallet',
@@ -582,28 +576,30 @@ const routes = [{
             title: '默望数字艺术馆'
         }
     },
-	{
-	    path: '/welfaredetail',
-	    name: 'welfareDetail',
-	    component: () => import(/* webpackChunkName: "welfare" */ '../views/welfare/Detail.vue'),
-	    meta: {
-	        title: '默望数字艺术馆'
-	    }
-	},
-	{
-	    path: '/welfareintegral',
-	    name: 'welfareIntegral',
-	    component: () => import(/* webpackChunkName: "welfare" */ '../views/welfare/Integral.vue'),
-	    meta: {
-	        pageType: Page.Every,
-	        title: '默望数字艺术馆'
-	    }
-	}
+    {
+        path: '/welfaredetail',
+        name: 'welfareDetail',
+        component: () => import(/* webpackChunkName: "welfare" */ '../views/welfare/Detail.vue'),
+        meta: {
+            title: '默望数字艺术馆'
+        }
+    },
+    {
+        path: '/welfareintegral',
+        name: 'welfareIntegral',
+        component: () => import(/* webpackChunkName: "welfare" */ '../views/welfare/Integral.vue'),
+        meta: {
+            pageType: Page.Every,
+            title: '默望数字艺术馆'
+        }
+    }
 ];
 
 const router = createRouter({
-    history: process.env.VUE_APP_CORDOVA === 'true' ?
-        createWebHashHistory() : createWebHistory(process.env.VUE_APP_PUBLIC_PATH),
+    history:
+        process.env.VUE_APP_CORDOVA === 'true'
+            ? createWebHashHistory()
+            : createWebHistory(process.env.VUE_APP_PUBLIC_PATH),
     routes,
     scrollBehavior(to, from, savedPosition) {
         return {
@@ -645,9 +641,9 @@ router.beforeEach((to, from, next) => {
             .catch(() => {
                 if (to.meta.pageType != Page.Every && to.path !== '/collectionDetail' && to.path !== '/castingDetail') {
                     Dialog.confirm({
-                            title: '提示',
-                            message: '用户未登录,是否立即登录'
-                        })
+                        title: '提示',
+                        message: '用户未登录,是否立即登录'
+                    })
                         .then(() => {
                             next('/login');
                         })
@@ -677,4 +673,4 @@ function backNext(to) {
         return;
     }
 }
-export default router;
+export default router;

src/views/Discover.vue

@@ -1,44 +1,44 @@
 <template>
-	<div class="discover">
-		<van-sticky ref="top" :offset-top="bar.value.show ? 46 : 0">
-			<div class="top">
-				<!-- <img src="@assets/nav_logo.png" class="logo" alt="" /> -->
-
-				<div class="search" @click="$router.push('/productSearch')">
-					<img src="@assets/icon-sosuo.png" alt="" />
-					<span>请输入</span>
-				</div>
-			</div>
-		</van-sticky>
-
-		<swiper pagination class="mySwiper" :autoplay="{ delay: 3500 }" v-if="false">
-			<swiper-slide v-for="item in banners" :key="item.id">
-				<img v-lazy="item.pic" @click="goNext(item)" />
-			</swiper-slide>
-		</swiper>
-
-		<van-grid :border="false" column-num="4">
-			<!-- <van-grid-item text="精选推荐" :to="{ path: '/productList' }">
+    <div class="discover">
+        <van-sticky ref="top" :offset-top="bar.value.show ? 46 : 0">
+            <div class="top">
+                <!-- <img src="@assets/nav_logo.png" class="logo" alt="" /> -->
+
+                <div class="search" @click="$router.push('/productSearch')">
+                    <img src="@assets/icon-sosuo.png" alt="" />
+                    <span>请输入</span>
+                </div>
+            </div>
+        </van-sticky>
+
+        <swiper pagination class="mySwiper" :autoplay="{ delay: 3500 }" v-if="false">
+            <swiper-slide v-for="item in banners" :key="item.id">
+                <img v-lazy="item.pic" @click="goNext(item)" />
+            </swiper-slide>
+        </swiper>
+
+        <van-grid :border="false" column-num="4">
+            <!-- <van-grid-item text="精选推荐" :to="{ path: '/productList' }">
 				<template v-slot:icon>
 					<img class="grid-img" src="@assets/info_icon_jingxuanxilie.png" />
 				</template>
 			</van-grid-item> -->
-			<van-grid-item text="版权品市场" :to="{ path: '/productList', query: { source: 'TRANSFER' } }">
-				<template v-slot:icon>
-					<img class="grid-img" src="@assets/info_icon_ershoushichang.png" />
-				</template>
-			</van-grid-item>
-			<van-grid-item text="邀请有礼" @click="tips" >
-				<template v-slot:icon>
-					<img class="grid-img" src="@assets/info_icon_yaoqingyouli.png" />
-				</template>
-			</van-grid-item>
-			<van-grid-item text="福利中心" :to="{ path: '/welfaredetail' }">
-				<template v-slot:icon>
-					<img class="grid-img" src="@assets/info_icon_fulizhongxing.png" />
-				</template> 
-			</van-grid-item>	
-			<!-- <van-grid-item text="新闻公告" :to="{ path: '/activityList' }">
+            <van-grid-item text="版权品市场" :to="{ path: '/productList', query: { source: 'TRANSFER' } }">
+                <template v-slot:icon>
+                    <img class="grid-img" src="@assets/info_icon_ershoushichang.png" />
+                </template>
+            </van-grid-item>
+            <van-grid-item text="邀请有礼" @click="tips">
+                <template v-slot:icon>
+                    <img class="grid-img" src="@assets/info_icon_yaoqingyouli.png" />
+                </template>
+            </van-grid-item>
+            <van-grid-item text="福利中心" :to="{ path: '/welfaredetail' }">
+                <template v-slot:icon>
+                    <img class="grid-img" src="@assets/info_icon_fulizhongxing.png" />
+                </template>
+            </van-grid-item>
+            <!-- <van-grid-item text="新闻公告" :to="{ path: '/activityList' }">
 				<template v-slot:icon>
 					<img class="grid-img" src="@assets/info_icon_xiliehuodong.png" />
 				</template>
@@ -48,80 +48,105 @@
 					<img class="grid-img" src="@assets/info_icon_zhuzaozhe.png" />
 				</template>
 			</van-grid-item> -->
-			<!-- <van-grid-item text="拍卖系列" @click="wait">
+            <!-- <van-grid-item text="拍卖系列" @click="wait">
                 <template v-slot:icon>
                     <img class="grid-img" src="@assets/info_icon_paimaixilie.png" />
                 </template>
             </van-grid-item> -->
-			
-			<van-grid-item text="合成通道" :to="{ path: '/activityList1' }">
-				<template v-slot:icon>
-					<img class="grid-img" src="@assets/icon-dianzan.png" />
-				</template>
-			</van-grid-item>
-			<!-- <van-grid-item text="铸造商店" @click="wait">
+
+            <van-grid-item text="合成通道" :to="{ path: '/activityList1' }">
+                <template v-slot:icon>
+                    <img class="grid-img" src="@assets/icon-dianzan.png" />
+                </template>
+            </van-grid-item>
+            <!-- <van-grid-item text="铸造商店" @click="wait">
                 <template v-slot:icon>
                     <img class="grid-img" src="@assets/info_icon_zhuzaoshangdian.png" />
                 </template>
             </van-grid-item> -->
-		</van-grid>
-
-		<div class="box" v-if="box.length > 0">
-			<page-title title="精选宝盒" :to="{ path: '/productList', query: { type: 'BLIND_BOX', title: '精选宝盒' } }">
-			</page-title>
-			<!-- <div class="box-list"></div> -->
-
-			<swiper :slidesPerView="1.2" :spaceBetween="16" :pagination="{
+        </van-grid>
+
+        <div class="box" v-if="box.length > 0">
+            <page-title
+                title="精选宝盒"
+                :to="{ path: '/productList', query: { type: 'BLIND_BOX', title: '精选宝盒' } }"
+            >
+            </page-title>
+            <!-- <div class="box-list"></div> -->
+
+            <swiper
+                :slidesPerView="1.2"
+                :spaceBetween="16"
+                :pagination="{
                     clickable: true
-                }" class="box-swiper" :style="{ paddingBottom: box.length > 2 ? '30px' : '30px' }">
-				<swiper-slide v-for="(item, index) in box" :key="index">
-					<product-swiper v-model:info="box[index]"></product-swiper>
-					<!-- <product-info v-model:info="box[index]"></product-info> -->
-				</swiper-slide>
-			</swiper>
-		</div>
-		<div class="box" v-if="products.length > 0">
-			<page-title title="本期推荐" :to="{
+                }"
+                class="box-swiper"
+                :style="{ paddingBottom: box.length > 2 ? '30px' : '30px' }"
+            >
+                <swiper-slide v-for="(item, index) in box" :key="index">
+                    <product-swiper v-model:info="box[index]"></product-swiper>
+                    <!-- <product-info v-model:info="box[index]"></product-info> -->
+                </swiper-slide>
+            </swiper>
+        </div>
+        <div class="box" v-if="products.length > 0">
+            <page-title
+                title="本期推荐"
+                :to="{
                     path: '/productList',
                     query: { type: 'DEFAULT', title: '本期推荐', source: 'OFFICIAL' }
-                }"></page-title>
-				
-			<swiper :slidesPerView="1.2" :spaceBetween="16" :pagination="{
-			        clickable: true
-			    }" class="box-swiper" :style="{ paddingBottom: products.length > 2 ? '30px' : '30px' }">
-				<swiper-slide v-for="(item, index) in products" :key="index">
-					<product-swiper v-model:info="products[index]"></product-swiper>
-					<!-- <product-info v-model:info="products[index]"></product-info> -->
-				</swiper-slide>
-			</swiper>
-			
-			<!-- <div class="box-list">
+                }"
+            ></page-title>
+
+            <swiper
+                :slidesPerView="1.2"
+                :spaceBetween="16"
+                :pagination="{
+                    clickable: true
+                }"
+                class="box-swiper"
+                :style="{ paddingBottom: products.length > 2 ? '30px' : '30px' }"
+            >
+                <swiper-slide v-for="(item, index) in products" :key="index">
+                    <product-swiper v-model:info="products[index]"></product-swiper>
+                    <!-- <product-info v-model:info="products[index]"></product-info> -->
+                </swiper-slide>
+            </swiper>
+
+            <!-- <div class="box-list">
 				<template v-for="(item, index) in products" :key="item.id">
 					<product-info v-model:info="products[index]"></product-info>
 				</template>
 			</div> -->
-		</div>
-		<div class="box" v-if="false">
-		
-		
-			<page-title title="最HOT收藏品" :to="{
+        </div>
+        <div class="box" v-if="false">
+            <page-title
+                title="最HOT收藏品"
+                :to="{
                     path: '/productList',
                     query: {
                         type: 'DEFAULT',
                         source: 'TRANSFER',
-                        
+
                         title: '最HOT收藏品'
                     }
-                }"></page-title>
-				<swiper :slidesPerView="1.5" :spaceBetween="16" :pagination="{
-				        clickable: true
-				    }" class="box-swiper" :style="{ paddingBottom: products.length > 2 ? '30px' : '8px' }">
-					<swiper-slide v-for="(item, index) in hots" :key="index">
-						<!-- <product-info v-model:info="hots[index]"></product-info> -->
-						<product-swiper v-model:info="hots[index]"></product-swiper>
-					</swiper-slide>
-				</swiper>
-			<!-- <div class="box-list">
+                }"
+            ></page-title>
+            <swiper
+                :slidesPerView="1.5"
+                :spaceBetween="16"
+                :pagination="{
+                    clickable: true
+                }"
+                class="box-swiper"
+                :style="{ paddingBottom: products.length > 2 ? '30px' : '8px' }"
+            >
+                <swiper-slide v-for="(item, index) in hots" :key="index">
+                    <!-- <product-info v-model:info="hots[index]"></product-info> -->
+                    <product-swiper v-model:info="hots[index]"></product-swiper>
+                </swiper-slide>
+            </swiper>
+            <!-- <div class="box-list">
 				
 				
 				
@@ -129,400 +154,415 @@
 					<product-info v-model:info="hots[index]"></product-info>
 				</template>
 			</div> -->
-		</div>
-
-		<div class="casting" v-if="miners.length > 0">
-			<page-title title="铸造者排行" :to="{ path: '/creatorList' }"></page-title>
-			<swiper :slidesPerView="1.2"  :spaceBetween="15" :pagination="{
-			        clickable: true
-			    }" class="box-swiper" :style="{ paddingBottom:'30px'}">
-				<swiper-slide v-for="(item, index) in miners" :key="index">
-					<creator-info :rank="index < 3 ? index + 1 : 0" v-model:info="miners[index]"></creator-info>
-				</swiper-slide>
-			</swiper>
-			<!-- <template v-for="(item, index) in miners" :key="index">
+        </div>
+
+        <div class="casting" v-if="miners.length > 0">
+            <page-title title="铸造者排行" :to="{ path: '/creatorList' }"></page-title>
+            <swiper
+                :slidesPerView="1.2"
+                :spaceBetween="15"
+                :pagination="{
+                    clickable: true
+                }"
+                class="box-swiper"
+                :style="{ paddingBottom: '30px' }"
+            >
+                <swiper-slide v-for="(item, index) in miners" :key="index">
+                    <creator-info :rank="index < 3 ? index + 1 : 0" v-model:info="miners[index]"></creator-info>
+                </swiper-slide>
+            </swiper>
+            <!-- <template v-for="(item, index) in miners" :key="index">
 				<creator-info :rank="index < 3 ? index + 1 : 0" v-model:info="miners[index]"></creator-info>
 			</template> -->
-		</div>
-
-		<div class="box" v-if="false">
-			<page-title title="更多藏品" :isLink="false"></page-title>
-			<van-list style="padding-bottom: 100px" class="box-list" v-model:loading="loading" :finished="finished"
-				finished-text="" @load="getList">
-				
-				<template v-for="(item, index) in list" :key="item.id">
-					<product-info v-model:info="list[index]"></product-info>
-				</template>
-			</van-list>
-		</div>
+        </div>
+
+        <div class="box" v-if="false">
+            <page-title title="更多藏品" :isLink="false"></page-title>
+            <van-list
+                style="padding-bottom: 100px"
+                class="box-list"
+                v-model:loading="loading"
+                :finished="finished"
+                finished-text=""
+                @load="getList"
+            >
+                <template v-for="(item, index) in list" :key="item.id">
+                    <product-info v-model:info="list[index]"></product-info>
+                </template>
+            </van-list>
+        </div>
 
-		<div class="tabbar-placeholder"></div>
-	</div>
+        <div class="tabbar-placeholder"></div>
+    </div>
 </template>
 
 <script>
-	import {
-		Swiper,
-		SwiperSlide
-	} from 'swiper/vue';
-
-	import 'swiper/swiper.min.css';
-	import 'swiper/swiper-bundle.min.css';
-
-	import SwiperCore, {
-		Pagination,
-		Autoplay
-	} from 'swiper';
-
-	// install Swiper modules
-	SwiperCore.use([Pagination, Autoplay]);
-
-	import ProductInfo from '../components/product/productInfo.vue';
-	import banner from '../mixins/banner';
-	import product from '../mixins/product';
-	import CreatorInfo from '../components/creator/CreatorInfo.vue';
-	import ProductSwiper from '../components/product/productSwiper.vue'
-
-	export default {
-		name: 'discover',
-		inject: ['bar'],
-		mixins: [banner, product],
-		components: {
-			Swiper,
-			SwiperSlide,
-			ProductInfo,
-			CreatorInfo,
-			ProductSwiper
-		},
-		data() {
-			return {
-				stiky: null,
-				banners: [],
-				box: [],
-				products: [],
-				hots: [],
-				miners: [],
-				list: [],
-				loading: false,
-				finished: false,
-				page: 0,
-				empty: false
-			};
-		},
-		mounted() {
-			this.getInit();
-		},
-		methods: {
-			tips() {
-				// this.$toast('敬请期待');
-				 this.checkLogin().then(() => {
-					 this.$http.post('/activityCollection/getInvitationTime', {
-						projectId: this.$store.state.projectId
-					 }).then(res => {
-						if (res) {
-							this.$router.push("/share");
-						} else {
-							this.$toast("敬请期待");
-						}
-					 })
-				 })
-			},
-			getInit() {
-				this.$toast.loading({
-					message: '加载中...',
-					forbidClick: true
-				});
-				this.getBanner();
-				this.getProduct('BLIND_BOX', this.sortOptions['精选宝盒']).then(res => {
-					this.box = res;
-				});
-				this.getProduct('DEFAULT', this.sortOptions['最HOT收藏品'], 'TRANSFER', 4).then(res => {
-					this.hots = res;
-				});
-				this.getProduct('DEFAULT', this.sortOptions['本期推荐'],'OFFICIAL',5).then(res => {
-					this.products = res;
-				});
-				this.getMiner();
-			},
-			getProduct(type = '', sort = 'sort,desc', source = 'OFFICIAL', size = 5) {
-				return this.$http
-					.post(
-						'/collection/all', {
-							page: 0,
-							size: size,
-							query: {
-								type: type,
-								onShelf: true,
-								del: false,
-								source: source,
-								projectId: this.$store.state.projectId
-							},
-							sort: sort
-						}, {
-							body: 'json'
-						}
-					)
-					.then(res => {
-						return Promise.resolve(res.content);
-					});
-			},
-			getBanner() {
-				this.$http
-					.post(
-						'/banner/all', {
-							query: {
-								type: 'DISCOVER',
-								projectId: this.$store.state.projectId
-							},
-							sort: 'sort,asc;createdAt,desc'
-						}, {
-							body: 'json'
-						}
-					)
-					.then(res => {
-						this.banners = res.content;
-						this.$toast.clear();
-					});
-			},
-			getList() {
-				if (this.page === 0) {
-					this.list = [];
-				}
-				this.loading = true;
-				this.finished = false;
-				this.empty = false;
-				this.$http
-					.post(
-						'/collection/all', {
-							page: this.page,
-							size: 20,
-							query: {
-								onShelf: true,
-								del: false,
-								source: 'OFFICIAL,TRANSFER',
-								projectId: this.$store.state.projectId
-							},
-							sort: this.sortOptions['更多藏品']
-						}, {
-							body: 'json'
-						}
-					)
-					.then(res => {
-						this.list = [...this.list, ...res.content];
-						this.empty = res.empty;
-						this.loading = false;
-						this.finished = res.last;
-						if (!res.last) {
-							this.page = this.page + 1;
-						}
-					});
-			},
-			getMiner() {
-				this.$http
-					.post(
-						'/user/all', {
-							page: 0,
-							query: {
-								hasRole: 'ROLE_MINTER',
-								minterProjectId: this.$store.state.projectId
-							},
-							size: 5,
-							sort: 'sales,desc'
-						}, {
-							body: 'json'
-						}
-					)
-					.then(res => {
-						this.miners = res.content;
-						// console.log(this.miners);
-					});
-			}
-		}
-	};
+import { Swiper, SwiperSlide } from 'swiper/vue';
+
+import 'swiper/swiper.min.css';
+import 'swiper/swiper-bundle.min.css';
+
+import SwiperCore, { Pagination, Autoplay } from 'swiper';
+
+// install Swiper modules
+SwiperCore.use([Pagination, Autoplay]);
+
+import ProductInfo from '../components/product/productInfo.vue';
+import banner from '../mixins/banner';
+import product from '../mixins/product';
+import CreatorInfo from '../components/creator/CreatorInfo.vue';
+import ProductSwiper from '../components/product/productSwiper.vue';
+
+export default {
+    name: 'discover',
+    inject: ['bar'],
+    mixins: [banner, product],
+    components: {
+        Swiper,
+        SwiperSlide,
+        ProductInfo,
+        CreatorInfo,
+        ProductSwiper
+    },
+    data() {
+        return {
+            stiky: null,
+            banners: [],
+            box: [],
+            products: [],
+            hots: [],
+            miners: [],
+            list: [],
+            loading: false,
+            finished: false,
+            page: 0,
+            empty: false
+        };
+    },
+    mounted() {
+        this.getInit();
+    },
+    methods: {
+        tips() {
+            // this.$toast('敬请期待');
+            this.checkLogin().then(() => {
+                this.$http
+                    .post('/activityCollection/getInvitationTime', {
+                        projectId: this.$store.state.projectId
+                    })
+                    .then(res => {
+                        if (res) {
+                            this.$router.push('/share');
+                        } else {
+                            this.$toast('敬请期待');
+                        }
+                    });
+            });
+        },
+        getInit() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.getBanner();
+            this.getProduct('BLIND_BOX', this.sortOptions['精选宝盒']).then(res => {
+                this.box = res;
+            });
+            this.getProduct('DEFAULT', this.sortOptions['最HOT收藏品'], 'TRANSFER', 4).then(res => {
+                this.hots = res;
+            });
+            this.getProduct('DEFAULT', this.sortOptions['本期推荐'], 'OFFICIAL', 5).then(res => {
+                this.products = res;
+            });
+            this.getMiner();
+        },
+        getProduct(type = '', sort = 'sort,desc', source = 'OFFICIAL', size = 5) {
+            return this.$http
+                .post(
+                    '/collection/all',
+                    {
+                        page: 0,
+                        size: size,
+                        query: {
+                            type: type,
+                            onShelf: true,
+                            del: false,
+                            source: source,
+                            projectId: this.$store.state.projectId
+                        },
+                        sort: sort
+                    },
+                    {
+                        body: 'json'
+                    }
+                )
+                .then(res => {
+                    return Promise.resolve(res.content);
+                });
+        },
+        getBanner() {
+            this.$http
+                .post(
+                    '/banner/all',
+                    {
+                        query: {
+                            type: 'DISCOVER',
+                            projectId: this.$store.state.projectId
+                        },
+                        sort: 'sort,asc;createdAt,desc'
+                    },
+                    {
+                        body: 'json'
+                    }
+                )
+                .then(res => {
+                    this.banners = res.content;
+                    this.$toast.clear();
+                });
+        },
+        getList() {
+            if (this.page === 0) {
+                this.list = [];
+            }
+            this.loading = true;
+            this.finished = false;
+            this.empty = false;
+            this.$http
+                .post(
+                    '/collection/all',
+                    {
+                        page: this.page,
+                        size: 20,
+                        query: {
+                            onShelf: true,
+                            del: false,
+                            source: 'OFFICIAL,TRANSFER',
+                            projectId: this.$store.state.projectId
+                        },
+                        sort: this.sortOptions['更多藏品']
+                    },
+                    {
+                        body: 'json'
+                    }
+                )
+                .then(res => {
+                    this.list = [...this.list, ...res.content];
+                    this.empty = res.empty;
+                    this.loading = false;
+                    this.finished = res.last;
+                    if (!res.last) {
+                        this.page = this.page + 1;
+                    }
+                });
+        },
+        getMiner() {
+            this.$http
+                .post(
+                    '/user/all',
+                    {
+                        page: 0,
+                        query: {
+                            hasRole: 'ROLE_MINTER',
+                            minterProjectId: this.$store.state.projectId
+                        },
+                        size: 5,
+                        sort: 'sales,desc'
+                    },
+                    {
+                        body: 'json'
+                    }
+                )
+                .then(res => {
+                    this.miners = res.content;
+                    // console.log(this.miners);
+                });
+        }
+    }
+};
 </script>
 
 <style lang="less" scoped>
-	.top {
-		display: flex;
-		padding: 16px;
-		background-color: @bg;
-		display: flex;
-		align-items: center;
-
-		.logo {
-			width: auto;
-			height: 34px;
-			display: block;
-		}
-
-		.search {
-			flex-grow: 1;
-			background-color: @bg2;
-			display: flex;
-			align-items: center;
-			padding: 4px 20px;
-			border-radius: 21px;
-
-			img {
-				width: 16px;
-				height: 16px;
-				margin-right: 10px;
-			}
-
-			font-size: 14px;
-			color: @text3;
-			line-height: 24px;
-		}
-	}
-
-	.discover {
-		width: 100vw;
-		height: 100vh;
-		background-color: @bg3;
-		background:url("../assets/art/discover-bg.png") no-repeat center;
-		background-position: top;
-		background-size: 100%;
-		overflow: scroll;
-		padding-bottom: 20px;
-	}
-
-	::v-deep(.mySwiper) {
-		width: calc(100vw - 32px);
-		height: calc(40vw - 12.8px);
-		padding-top: 20px;
-
-		.swiper-pagination {
-			bottom: 6px;
-		}
-
-		.swiper-pagination-bullet {
-			width: 45px;
-			height: 4px;
-			border-radius: 1px;
-			background: #d7d7d7;
-			margin: 0 3px;
-		}
-
-		.swiper-pagination-bullet-active {
-			background: @prim;
-		}
-	}
-
-	.swiper-slide {
-		text-align: center;
-		font-size: 18px;
-
-		/* Center slide text vertically */
-		display: -webkit-box;
-		display: -ms-flexbox;
-		display: -webkit-flex;
-		display: flex;
-		-webkit-box-pack: center;
-		-ms-flex-pack: center;
-		-webkit-justify-content: center;
-		justify-content: center;
-		-webkit-box-align: center;
-		-ms-flex-align: center;
-		-webkit-align-items: center;
-		align-items: center;
-	}
-
-	.swiper-slide img {
-		display: block;
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-		border-radius: 12px;
-	}
-
-	.grid-img {
-		display: block;
-		width: 50px;
-		height: 50px;
-	}
-	// .van-grid {
-	//     margin-top: 12px;
-	// }
-	/deep/ .van-grid-item__content {
-		padding: 14px 0 16px;
-	}
-
-	/deep/ .van-grid-item__text {
-		color: @text0;
-		font-size: @font1;
-		line-height: 18px;
-		margin-top: 4px;
-		font-size: 14px;
-	}
-
-	.title {
-		padding: 16px 20px 8px;
-		color: @prim;
-		font-size: @font3;
-		font-weight: bold;
-	}
-
-	.box-list {
-		// display: flex;
-		// flex-wrap: wrap;
-		padding: 0 8px 2px;
-	}
-
-	/deep/.van-tab {
-		color: #fff;
-		flex: 0;
-		padding: 20px;
-		flex-shrink: 0;
-		min-width: 74px;
-
-		&.van-tab--active {
-			color: @prim;
-		}
-	}
-
-	.casting {
-		padding-bottom: 10px;
-	}
-
-	.box-swiper {
-		padding: 8px 16px;
-		box-sizing: border-box;
-
-		.product {
-			margin: 0;
-		}
-	}
-
-	/deep/.box-swiper {
-		.swiper-pagination {
-			bottom: 0px;
-			left: 50%;
-			transform: translateX(-50%);
-			display: flex;
-			justify-content: center;
-			.swiper-pagination-bullet {
-				margin: 0 0;
-				flex: 1;
-				max-width: 45px;
-				background-color: @text3;
-				height: 4px;
-				border-radius: 0;
-
-				&:nth-of-type(1){
-					border-radius: 4px 0 0 4px;
-				}
-				&:last-child{
-					border-radius:0 4px 4px 0;
-				}
-				&.swiper-pagination-bullet-active {
-					background-color: @prim;
-					border-radius: 4px;
-				}
-			}
-		}
-
-		.product {
-			text-align: left;
-		}
-	}
+.top {
+    display: flex;
+    padding: 16px;
+    background-color: @bg;
+    display: flex;
+    align-items: center;
+
+    .logo {
+        width: auto;
+        height: 34px;
+        display: block;
+    }
+
+    .search {
+        flex-grow: 1;
+        background-color: @bg2;
+        display: flex;
+        align-items: center;
+        padding: 4px 20px;
+        border-radius: 21px;
+
+        img {
+            width: 16px;
+            height: 16px;
+            margin-right: 10px;
+        }
+
+        font-size: 14px;
+        color: @text3;
+        line-height: 24px;
+    }
+}
+
+.discover {
+    width: 100vw;
+    height: 100vh;
+    background-color: @bg3;
+    background: url('../assets/art/discover-bg.png') no-repeat center;
+    background-position: top;
+    background-size: 100%;
+    overflow: scroll;
+    padding-bottom: 20px;
+}
+
+::v-deep(.mySwiper) {
+    width: calc(100vw - 32px);
+    height: calc(40vw - 12.8px);
+    padding-top: 20px;
+
+    .swiper-pagination {
+        bottom: 6px;
+    }
+
+    .swiper-pagination-bullet {
+        width: 45px;
+        height: 4px;
+        border-radius: 1px;
+        background: #d7d7d7;
+        margin: 0 3px;
+    }
+
+    .swiper-pagination-bullet-active {
+        background: @prim;
+    }
+}
+
+.swiper-slide {
+    text-align: center;
+    font-size: 18px;
+
+    /* Center slide text vertically */
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+}
+
+.swiper-slide img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 12px;
+}
+
+.grid-img {
+    display: block;
+    width: 50px;
+    height: 50px;
+}
+// .van-grid {
+//     margin-top: 12px;
+// }
+/deep/ .van-grid-item__content {
+    padding: 14px 0 16px;
+}
+
+/deep/ .van-grid-item__text {
+    color: @text0;
+    font-size: @font1;
+    line-height: 18px;
+    margin-top: 4px;
+    font-size: 14px;
+}
+
+.title {
+    padding: 16px 20px 8px;
+    color: @prim;
+    font-size: @font3;
+    font-weight: bold;
+}
+
+.box-list {
+    // display: flex;
+    // flex-wrap: wrap;
+    padding: 0 8px 2px;
+}
+
+/deep/.van-tab {
+    color: #fff;
+    flex: 0;
+    padding: 20px;
+    flex-shrink: 0;
+    min-width: 74px;
+
+    &.van-tab--active {
+        color: @prim;
+    }
+}
+
+.casting {
+    padding-bottom: 10px;
+}
+
+.box-swiper {
+    padding: 8px 16px;
+    box-sizing: border-box;
+
+    .product {
+        margin: 0;
+    }
+}
+
+/deep/.box-swiper {
+    .swiper-pagination {
+        bottom: 0px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        justify-content: center;
+        .swiper-pagination-bullet {
+            margin: 0 0;
+            flex: 1;
+            max-width: 45px;
+            background-color: @text3;
+            height: 4px;
+            border-radius: 0;
+
+            &:nth-of-type(1) {
+                border-radius: 4px 0 0 4px;
+            }
+            &:last-child {
+                border-radius: 0 4px 4px 0;
+            }
+            &.swiper-pagination-bullet-active {
+                background-color: @prim;
+                border-radius: 4px;
+            }
+        }
+    }
+
+    .product {
+        text-align: left;
+    }
+}
 </style>

src/views/Givesubmit.vue

@@ -229,10 +229,10 @@ export default {
                 });
         },
         // 提交支付
-		async submitBtn() {
-			if (this.payType == 'WALLET_ACCOUNT') {
-				await this.checkRenew();
-			}
+        async submitBtn() {
+            if (this.payType == 'WALLET_ACCOUNT') {
+                await this.checkRenew();
+            }
             if (this.orderId) {
                 this.submit({ id: this.orderId, submitType: 'gift' });
             } else {

src/views/Home.vue

@@ -1,454 +1,434 @@
 <template>
-  <div class="home">
-    <swiper
-      pagination
-      class="mySwiper"
-      :slidesPerView="1.2"
-      :spaceBetween="10"
-      :autoplay="{ delay: 3500 }"
-      v-if="banners.length > 0"
-    >
-      <swiper-slide v-for="item in banners" :key="item.id">
-        <product-small :info="item"></product-small>
-      </swiper-slide>
-    </swiper>
-	
-	
-	
-	
-    <div class="notice" v-if="noticeList.length >= 1">
-		<img src="../../src/assets/art/notice-icon.png" class="notive-icon">
-		<div class="notice-swipe">
-			<div class="swiper-content">
-				<van-swipe
-				  :vertical="false"
-				  ref="noticeSwiper"
-				  :autoplay="3000"
-				  :show-indicators="false"
-				>
-				  <van-swipe-item
-				  class="item"
-				    v-for="(item, index) in noticeList"
-				    :key="index"
-				  >
-					<div class="swiper-top">
-						<div class="swiper-name">
-							{{ item.name }}
-						</div>
-						<div class="swiper-time" v-if="item.createdAt">
-							{{item.createdAt}}
-						</div>
-					</div>
-					<div class="swiper-bottom">
-						<div class="swiper-btn" @click="to(item)">
-							查看更多
-						</div>
-					</div>
-				    
-				  </van-swipe-item>
-				</van-swipe>
-				<div class="btn-group">
-					<img src="../../src/assets/art/notice-left.png" class="btn-left" @click="noticePrev">
-					<img src="../../src/assets/art/notice-right.png" class="btn-right" @click="noticeNext">
-				</div>
-			</div>
-			
-		</div>
-     
-    </div>
-    
-	<div class="box" v-if="products.length > 0">
-	    <swiper
-	        :slidesPerView="1.2"
-			:spaceBetween="16"
-	        :pagination="{
-	            clickable: true
-	        }"
-	        class="box-swiper"
-			:slidesPerGroup="1"
-			:centeredSlidesBounds="true" 
-	        :style="{ paddingBottom: products.length > 2 ? '30px' : '30px' }"
-	    >
-	        <swiper-slide class="swi-div" v-for="(item, index) in products" :key="index">
-	            <!-- <product-info v-model:info="box[index]"></product-info> -->
-	            <product-swiper v-model:info="products[index]"></product-swiper>
-	        </swiper-slide>
-	    </swiper>
-	</div>
-	
-	<div class="list" v-if="false">
-      <product-large
-        v-for="(item, index) in products"
-        :key="index"
-        v-model:info="products[index]"
-      ></product-large>
+    <div class="home">
+        <swiper
+            pagination
+            class="mySwiper"
+            :slidesPerView="1.2"
+            :spaceBetween="10"
+            :autoplay="{ delay: 3500 }"
+            v-if="banners.length > 0"
+        >
+            <swiper-slide v-for="item in banners" :key="item.id">
+                <product-small :info="item"></product-small>
+            </swiper-slide>
+        </swiper>
+
+        <div class="notice" v-if="noticeList.length >= 1">
+            <img src="../../src/assets/art/notice-icon.png" class="notive-icon" />
+            <div class="notice-swipe">
+                <div class="swiper-content">
+                    <van-swipe :vertical="false" ref="noticeSwiper" :autoplay="3000" :show-indicators="false">
+                        <van-swipe-item class="item" v-for="(item, index) in noticeList" :key="index">
+                            <div class="swiper-top">
+                                <div class="swiper-name">
+                                    {{ item.name }}
+                                </div>
+                                <div class="swiper-time" v-if="item.createdAt">
+                                    {{ item.createdAt }}
+                                </div>
+                            </div>
+                            <div class="swiper-bottom">
+                                <div class="swiper-btn" @click="to(item)">查看更多</div>
+                            </div>
+                        </van-swipe-item>
+                    </van-swipe>
+                    <div class="btn-group">
+                        <img src="../../src/assets/art/notice-left.png" class="btn-left" @click="noticePrev" />
+                        <img src="../../src/assets/art/notice-right.png" class="btn-right" @click="noticeNext" />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="box" v-if="products.length > 0">
+            <swiper
+                :slidesPerView="1.2"
+                :spaceBetween="16"
+                :pagination="{
+                    clickable: true
+                }"
+                class="box-swiper"
+                :slidesPerGroup="1"
+                :centeredSlidesBounds="true"
+                :style="{ paddingBottom: products.length > 2 ? '30px' : '30px' }"
+            >
+                <swiper-slide class="swi-div" v-for="(item, index) in products" :key="index">
+                    <!-- <product-info v-model:info="box[index]"></product-info> -->
+                    <product-swiper v-model:info="products[index]"></product-swiper>
+                </swiper-slide>
+            </swiper>
+        </div>
+
+        <div class="list" v-if="false">
+            <product-large
+                v-for="(item, index) in products"
+                :key="index"
+                v-model:info="products[index]"
+            ></product-large>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import SwiperCore, { Autoplay, Pagination } from 'swiper'
-import 'swiper/swiper-bundle.min.css'
-import 'swiper/swiper.min.css'
-import { Swiper, SwiperSlide } from 'swiper/vue'
-import ProductLarge from '../components/product/productLarge.vue'
-import ProductSwiper from '../components/product/productSwiper.vue'
-import ProductSmall from '../components/product/productSmall.vue'
-import banner from '../mixins/banner'
+import SwiperCore, { Autoplay, Pagination } from 'swiper';
+import 'swiper/swiper-bundle.min.css';
+import 'swiper/swiper.min.css';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import ProductLarge from '../components/product/productLarge.vue';
+import ProductSwiper from '../components/product/productSwiper.vue';
+import ProductSmall from '../components/product/productSmall.vue';
+import banner from '../mixins/banner';
 import product from '../mixins/product';
 
-
 // install Swiper modules
-SwiperCore.use([Pagination, Autoplay])
-
+SwiperCore.use([Pagination, Autoplay]);
 
 export default {
-  name: 'home',
-  inject: ['bar'],
-  mixins: [banner,product],
-  components: {
-    Swiper,
-    SwiperSlide,
-    ProductLarge,
-    ProductSmall,
-	ProductSwiper
-  },
-  data() {
-    return {
-      banners: [],
-      products: [],
-      noticeList: []
-    }
-  },
-  mounted() {
-	  if(!this.isLogin){
-	  	this.$dialog.alert({
-	  	        title: '数字藏品购买风险提示',
-	  	        message: '请广大投资者树立正确投资理念，合理评估自身风险识别能力和风险承担能力，理性参与数字藏品购买'
-	  	    }).then(() => {});
-	  }
-    this.getInit()
-    this.$http.get('/sysConfig/get/countdown_hours').then(res => {
-      this.$store.commit('setCountdown', Number(res.value))
-    })
-    this.getNotice()
-  },
-  methods: {
-    to(row) {
-      this.$router.push(`/activityDetails?id=${row.id}`)
+    name: 'home',
+    inject: ['bar'],
+    mixins: [banner, product],
+    components: {
+        Swiper,
+        SwiperSlide,
+        ProductLarge,
+        ProductSmall,
+        ProductSwiper
     },
-	noticePrev(){
-		this.$refs.noticeSwiper.prev();
-	},
-	noticeNext(){
-		this.$refs.noticeSwiper.next();
-	},
-    getInit() {
-      this.$toast.loading({
-        message: '加载中...',
-        forbidClick: true
-      })
-      this.getBanner()
-      this.getProduct('LIST').then(res => {
-        this.products = res
-      })
+    data() {
+        return {
+            banners: [],
+            products: [],
+            noticeList: []
+        };
     },
-    getNotice() {
-      this.$http
-        .get(`/activity/contraction/${this.$store.state.projectId}`)
-        .then(res => {
-          this.noticeList = res
-        })
+    mounted() {
+        if (!this.isLogin) {
+            this.$dialog
+                .alert({
+                    title: '数字藏品购买风险提示',
+                    message:
+                        '请广大投资者树立正确投资理念，合理评估自身风险识别能力和风险承担能力，理性参与数字藏品购买'
+                })
+                .then(() => {});
+        }
+        this.getInit();
+        this.$http.get('/sysConfig/get/countdown_hours').then(res => {
+            this.$store.commit('setCountdown', Number(res.value));
+        });
+        this.getNotice();
     },
-    getProduct(type = 'BANNER') {
-      return this.$http
-        .get('/collection/recommend', {
-          type: type,
-          projectId: this.$store.state.projectId
-        })
-        .then(res => {
-          return Promise.resolve(res)
-        })
-    },
-    getBanner() {
-      this.$http
-        .post(
-          '/banner/all',
-          {
-            query: {
-              type: 'HOME',
-              projectId: this.$store.state.projectId
-            },
-            sort: 'sort,asc;createdAt,desc'
-          },
-          { body: 'json' }
-        )
-        .then(res => {
-          this.banners = res.content
-          this.$toast.clear()
-        })
-    },
-    getList() {
-      if (this.page === 0) {
-        this.list = []
-      }
-      this.loading = true
-      this.finished = false
-      this.empty = false
-      this.$http
-        .post(
-          '/collection/all',
-          {
-            page: 0,
-            size: 20,
-            query: {
-              onShelf: true,
-              del: false,
-              projectId: this.$store.state.projectId
-            },
-            sort: 'createdAt,desc'
-          },
-          { body: 'json' }
-        )
-        .then(res => {
-          this.list = [...this.list, ...res.content]
-          this.empty = res.empty
-          this.loading = false
-          this.finished = res.last
-          if (!this.finished) {
-            this.page = this.page + 1
-          }
-        })
-    },
-    getMiner() {
-      this.$http
-        .post(
-          '/user/all',
-          {
-            page: 0,
-            query: {
-              hasRole: 'ROLE_MINTER',
-              minterProjectId: this.$store.state.projectId
-            },
-            size: 5,
-            sort: 'sales,desc'
-          },
-          { body: 'json' }
-        )
-        .then(res => {
-          this.miners = res.content
-          // console.log(this.miners);
-        })
+    methods: {
+        to(row) {
+            this.$router.push(`/activityDetails?id=${row.id}`);
+        },
+        noticePrev() {
+            this.$refs.noticeSwiper.prev();
+        },
+        noticeNext() {
+            this.$refs.noticeSwiper.next();
+        },
+        getInit() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.getBanner();
+            this.getProduct('LIST').then(res => {
+                this.products = res;
+            });
+        },
+        getNotice() {
+            this.$http.get(`/activity/contraction/${this.$store.state.projectId}`).then(res => {
+                this.noticeList = res;
+            });
+        },
+        getProduct(type = 'BANNER') {
+            return this.$http
+                .get('/collection/recommend', {
+                    type: type,
+                    projectId: this.$store.state.projectId
+                })
+                .then(res => {
+                    return Promise.resolve(res);
+                });
+        },
+        getBanner() {
+            this.$http
+                .post(
+                    '/banner/all',
+                    {
+                        query: {
+                            type: 'HOME',
+                            projectId: this.$store.state.projectId
+                        },
+                        sort: 'sort,asc;createdAt,desc'
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    this.banners = res.content;
+                    this.$toast.clear();
+                });
+        },
+        getList() {
+            if (this.page === 0) {
+                this.list = [];
+            }
+            this.loading = true;
+            this.finished = false;
+            this.empty = false;
+            this.$http
+                .post(
+                    '/collection/all',
+                    {
+                        page: 0,
+                        size: 20,
+                        query: {
+                            onShelf: true,
+                            del: false,
+                            projectId: this.$store.state.projectId
+                        },
+                        sort: 'createdAt,desc'
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    this.list = [...this.list, ...res.content];
+                    this.empty = res.empty;
+                    this.loading = false;
+                    this.finished = res.last;
+                    if (!this.finished) {
+                        this.page = this.page + 1;
+                    }
+                });
+        },
+        getMiner() {
+            this.$http
+                .post(
+                    '/user/all',
+                    {
+                        page: 0,
+                        query: {
+                            hasRole: 'ROLE_MINTER',
+                            minterProjectId: this.$store.state.projectId
+                        },
+                        size: 5,
+                        sort: 'sales,desc'
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    this.miners = res.content;
+                    // console.log(this.miners);
+                });
+        }
     }
-  }
-}
+};
 </script>
 
 <style lang="less" scoped>
 .top {
-  display: flex;
-  padding: 9px 16px;
-  background-color: @bg;
-  display: flex;
-  align-items: center;
-  .logo {
-    width: 74px;
-    height: 26px;
-  }
-
-  .search {
-    flex-grow: 1;
-    background-color: @bg3;
+    display: flex;
+    padding: 9px 16px;
+    background-color: @bg;
     display: flex;
     align-items: center;
-    margin-left: 10px;
-    padding: 4px 20px;
-    border-radius: 21px;
-    img {
-      width: 16px;
-      height: 16px;
-      margin-right: 10px;
+    .logo {
+        width: 74px;
+        height: 26px;
+    }
+
+    .search {
+        flex-grow: 1;
+        background-color: @bg3;
+        display: flex;
+        align-items: center;
+        margin-left: 10px;
+        padding: 4px 20px;
+        border-radius: 21px;
+        img {
+            width: 16px;
+            height: 16px;
+            margin-right: 10px;
+        }
+        font-size: 14px;
+        color: @text3;
+        line-height: 24px;
     }
-    font-size: 14px;
-    color: @text3;
-    line-height: 24px;
-  }
 }
 
 .home {
-	width: 100vw;
-	height: 100vh;
-	background-color: #0B0A11;
-  background:url("../assets/art/home-bg.png") no-repeat center;
-  background-position: top;
-  background-size: 100%;
-  overflow: scroll;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding-bottom: 60px;
-  .box{
-	  padding: 20px 16px 8px 16px;
-      .icon-wenchuangNew{
-          position: relative;
-          left: 82px;
-          top: 50px;
-      }
-      .van-wcxp{
-          padding: 20px 16px 8px 16px;
-          font-size: 16px;
-          color: #ffffff;
-          .icon-wenchuangNew{
-              position: relative;
-              left: 0px;
-              top: 10px;
-          }
-      }
-      .box-list{
-          margin-bottom: 50px;
-      }
-  }
+    width: 100vw;
+    height: 100vh;
+    background-color: #0b0a11;
+    background: url('../assets/art/home-bg.png') no-repeat center;
+    background-position: top;
+    background-size: 100%;
+    overflow: scroll;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding-bottom: 60px;
+    .box {
+        padding: 20px 16px 8px 16px;
+        .icon-wenchuangNew {
+            position: relative;
+            left: 82px;
+            top: 50px;
+        }
+        .van-wcxp {
+            padding: 20px 16px 8px 16px;
+            font-size: 16px;
+            color: #ffffff;
+            .icon-wenchuangNew {
+                position: relative;
+                left: 0px;
+                top: 10px;
+            }
+        }
+        .box-list {
+            margin-bottom: 50px;
+        }
+    }
 }
 /deep/.box-swiper {
-		.swiper-pagination {
-			bottom: 0px;
-			left: 50%;
-			transform: translateX(-50%);
-			display: flex;
-			justify-content: center;
-			.swiper-pagination-bullet {
-				margin: 0 0;
-				flex: 1;
-				max-width: 45px;
-				height: 4px;
-				border-radius: 0;
-				background-color: @text3;
-				&:nth-of-type(1){
-					border-radius: 4px 0 0 4px;
-				}
-				&:last-child{
-					border-radius:0 4px 4px 0;
-				}
-				&.swiper-pagination-bullet-active {
-					background-color: @prim;
-					border-radius: 4px;
-				}
-			}
-		}
+    .swiper-pagination {
+        bottom: 0px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        justify-content: center;
+        .swiper-pagination-bullet {
+            margin: 0 0;
+            flex: 1;
+            max-width: 45px;
+            height: 4px;
+            border-radius: 0;
+            background-color: @text3;
+            &:nth-of-type(1) {
+                border-radius: 4px 0 0 4px;
+            }
+            &:last-child {
+                border-radius: 0 4px 4px 0;
+            }
+            &.swiper-pagination-bullet-active {
+                background-color: @prim;
+                border-radius: 4px;
+            }
+        }
+    }
 
-		.product {
-			text-align: left;
-		}
-	}
+    .product {
+        text-align: left;
+    }
+}
 ::v-deep(.mySwiper) {
-  // height: 255px;
-  padding-top: 16px;
-  padding-left: 16px;
-  box-sizing: border-box;
-  padding-bottom: 35px;
+    // height: 255px;
+    padding-top: 16px;
+    padding-left: 16px;
+    box-sizing: border-box;
+    padding-bottom: 35px;
 
-  .swiper-pagination {
-    bottom: 13px;
-  }
+    .swiper-pagination {
+        bottom: 13px;
+    }
 
-  .swiper-pagination-bullet {
-    width: 5px;
-    height: 5px;
-    border-radius: 0px;
-    background: @text3;
-    margin: 0 4px;
-  }
+    .swiper-pagination-bullet {
+        width: 5px;
+        height: 5px;
+        border-radius: 0px;
+        background: @text3;
+        margin: 0 4px;
+    }
 
-  .swiper-pagination-bullet-active {
-    background: #0063f5;
-	border-radius: 0px;
-	width: 24px;
-  }
+    .swiper-pagination-bullet-active {
+        background: #0063f5;
+        border-radius: 0px;
+        width: 24px;
+    }
 }
 // .swiper-slide {
 //   width: 255px;
 // }
 
 .list {
-  padding: 12px 0 100px;
+    padding: 12px 0 100px;
 }
 .notice {
-  padding:  16px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: @bg2;
-  .notive-icon{
-	  width: 80px;
-	  height: 80px;
-	  margin-right: 20px;
-  }
-  .notice-swipe {
-	flex: 1;
-	height: 80px;
-	position: relative;
-	
-    .swiper-content{
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		.btn-group{
-			position: absolute;
-			height: 22px;
-			right: 0;
-			bottom: 0;
-			.btn-left{
-				height: 22px;
-				width: auto;
-				margin-right: 5px;
-			}
-			.btn-right{
-				height: 22px;
-				width: auto;
-			}
-		}
-		.item{
-			height: 80px;
-			display: flex;
-			flex-direction: column;
-			justify-content: space-between;
-			.swiper-top{
-				.swiper-name{
-					font-size: 14px;
-					line-height: 18px;
-					margin-bottom: 5px;
-				}
-				.swiper-time{
-					font-size: 12px;
-					line-height: 14px;
-					color: rgba(255, 255, 255, 0.4);
-					opacity: 1;
-				}
-			}
-			.swiper-bottom{
-				width: 100%;
-				position: relative;
-				.swiper-btn{
-					width: 65px;
-					height: 22px;
-					border: 1px solid #0063F5;
-					opacity: 1;
-					border-radius: 4px;
-					font-size: 12px;
-					line-height: 22px;
-					color: #0063F5;
-					text-align: center;
-				}
-				
-			}
-		}
-	}
-    
-  }
+    padding: 16px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: @bg2;
+    .notive-icon {
+        width: 80px;
+        height: 80px;
+        margin-right: 20px;
+    }
+    .notice-swipe {
+        flex: 1;
+        height: 80px;
+        position: relative;
+
+        .swiper-content {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            .btn-group {
+                position: absolute;
+                height: 22px;
+                right: 0;
+                bottom: 0;
+                .btn-left {
+                    height: 22px;
+                    width: auto;
+                    margin-right: 5px;
+                }
+                .btn-right {
+                    height: 22px;
+                    width: auto;
+                }
+            }
+            .item {
+                height: 80px;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                .swiper-top {
+                    .swiper-name {
+                        font-size: 14px;
+                        line-height: 18px;
+                        margin-bottom: 5px;
+                    }
+                    .swiper-time {
+                        font-size: 12px;
+                        line-height: 14px;
+                        color: rgba(255, 255, 255, 0.4);
+                        opacity: 1;
+                    }
+                }
+                .swiper-bottom {
+                    width: 100%;
+                    position: relative;
+                    .swiper-btn {
+                        width: 65px;
+                        height: 22px;
+                        border: 1px solid #0063f5;
+                        opacity: 1;
+                        border-radius: 4px;
+                        font-size: 12px;
+                        line-height: 22px;
+                        color: #0063f5;
+                        text-align: center;
+                    }
+                }
+            }
+        }
+    }
 }
 </style>

src/views/HomePre.vue

@@ -18,7 +18,8 @@
         >
             <template v-for="item in banners" :key="item.id">
                 <swiper-slide>
-                    <van-image lazy-load 
+                    <van-image
+                        lazy-load
                         @click="goNext(item)"
                         :radius="6"
                         width="100%"

src/views/Mine.vue

@@ -1,74 +1,113 @@
 <template>
-	<div class="mine">
-		<div class="userInfo" v-if="isLogin">
-			<van-image lazy-load width="100%" height="35vw" :src="userInfo.bg || require('@assets/creatorBg.jpg')"
-				loading-icon="" fit="cover" class="top-img" />
-			<div class="userInfo-content">
-				<div class="userInfo-top">
-					<van-image lazy-load round width="78" height="78"
-						:src="userInfo.avatar || require('@assets/img_default_photo.png')" fit="cover"
-						@click="$router.push('/setting')" />
-					<div class="text">
-						<div class="text1 van-ellipsis">
-							<span>{{ userInfo.nickname }}</span>
-
-							<img @click="$router.push('/verifiedSuc')" v-if="authStatus === '已认证'"
-								src="@assets/renzheng_icon_pre.png" alt="" />
-
-							<van-button color="#F5F7FA" size="mini" :icon="require('@assets/renzheng_icon.png')" round
-								class="auth" v-else @click="goAuth">
-								{{ authStatus === '未认证' ? '去认证' : authStatus }}
-							</van-button>
-						</div>
-						<div class="text2">
-							<span> 用户ID:{{ userInfo.id }} </span>
-							<img @click="copy" src="@assets/svgs/copy_icon.svg" alt="" />
-						</div>
-						<div v-if="buyFirst" class="box">
-							<span class="type">优先购</span>
-							<span class="count"> 剩余 {{buyFirst.count}}</span>
-						</div>
-					</div>
-				</div>
-
-				<div class="sub" :class="{ 'van-multi-ellipsis--l2': !showMore }">
-					{{ userInfo.intro }}
-				</div>
-				<div class="sub-right" v-if="userInfo && userInfo.intro && userInfo.intro.length > 50">
-					<div @click="showMore = !showMore">{{ showMore ? '收起' : '展开' }}</div>
-				</div>
-
-				<div class="btns">
-					<div class="collect" @click="$router.push('/mineFollows')">
-						<div class="text2">关注</div>
-						<div class="text1">{{ userInfo.follows }}</div>
-					</div>
-					<div class="collect" @click="$router.push('/mineFollowers')">
-						<div class="text2">粉丝</div>
-						<div class="text1">{{ userInfo.followers }}</div>
-					</div>
-
-					<van-button plain @click="$router.push('/setting')" color="@text3" size="mini" round>编辑资料
-					</van-button>
-				</div>
-			</div>
-		</div>
-		<div class="userInfo" v-else>
-			<van-image lazy-load width="100%" height="35vw" :src="require('@assets/creatorBg.jpg')" loading-icon=""
-				fit="cover" class="top-img" />
-			<div class="userInfo-content">
-				<div class="userInfo-top">
-					<van-image lazy-load round width="78" height="78" :src="require('@assets/img_default_photo.png')"
-						fit="cover" @click="$router.push('/login')" />
-
-					<div class="text">
-						<div class="text1" @click="$router.push('/login')">点击登录</div>
-						<div class="text2">立即登录获取精彩服务</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<!-- <van-cell class="title" title="我的订单" :border="false" />
+    <div class="mine">
+        <div class="userInfo" v-if="isLogin">
+            <van-image
+                lazy-load
+                width="100%"
+                height="35vw"
+                :src="userInfo.bg || require('@assets/creatorBg.jpg')"
+                loading-icon=""
+                fit="cover"
+                class="top-img"
+            />
+            <div class="userInfo-content">
+                <div class="userInfo-top">
+                    <van-image
+                        lazy-load
+                        round
+                        width="78"
+                        height="78"
+                        :src="userInfo.avatar || require('@assets/img_default_photo.png')"
+                        fit="cover"
+                        @click="$router.push('/setting')"
+                    />
+                    <div class="text">
+                        <div class="text1 van-ellipsis">
+                            <span>{{ userInfo.nickname }}</span>
+
+                            <img
+                                @click="$router.push('/verifiedSuc')"
+                                v-if="authStatus === '已认证'"
+                                src="@assets/renzheng_icon_pre.png"
+                                alt=""
+                            />
+
+                            <van-button
+                                color="#F5F7FA"
+                                size="mini"
+                                :icon="require('@assets/renzheng_icon.png')"
+                                round
+                                class="auth"
+                                v-else
+                                @click="goAuth"
+                            >
+                                {{ authStatus === '未认证' ? '去认证' : authStatus }}
+                            </van-button>
+                        </div>
+                        <div class="text2">
+                            <span> 用户ID:{{ userInfo.id }} </span>
+                            <img @click="copy" src="@assets/svgs/copy_icon.svg" alt="" />
+                        </div>
+                        <div v-if="buyFirst" class="box">
+                            <span class="type">优先购</span>
+                            <span class="count"> 剩余 {{ buyFirst.count }}</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="sub" :class="{ 'van-multi-ellipsis--l2': !showMore }">
+                    {{ userInfo.intro }}
+                </div>
+                <div class="sub-right" v-if="userInfo && userInfo.intro && userInfo.intro.length > 50">
+                    <div @click="showMore = !showMore">{{ showMore ? '收起' : '展开' }}</div>
+                </div>
+
+                <div class="btns">
+                    <div class="collect" @click="$router.push('/mineFollows')">
+                        <div class="text2">关注</div>
+                        <div class="text1">{{ userInfo.follows }}</div>
+                    </div>
+                    <div class="collect" @click="$router.push('/mineFollowers')">
+                        <div class="text2">粉丝</div>
+                        <div class="text1">{{ userInfo.followers }}</div>
+                    </div>
+
+                    <van-button plain @click="$router.push('/setting')" color="@text3" size="mini" round
+                        >编辑资料
+                    </van-button>
+                </div>
+            </div>
+        </div>
+        <div class="userInfo" v-else>
+            <van-image
+                lazy-load
+                width="100%"
+                height="35vw"
+                :src="require('@assets/creatorBg.jpg')"
+                loading-icon=""
+                fit="cover"
+                class="top-img"
+            />
+            <div class="userInfo-content">
+                <div class="userInfo-top">
+                    <van-image
+                        lazy-load
+                        round
+                        width="78"
+                        height="78"
+                        :src="require('@assets/img_default_photo.png')"
+                        fit="cover"
+                        @click="$router.push('/login')"
+                    />
+
+                    <div class="text">
+                        <div class="text1" @click="$router.push('/login')">点击登录</div>
+                        <div class="text2">立即登录获取精彩服务</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- <van-cell class="title" title="我的订单" :border="false" />
 
 		<div class="orderList">
 			<div class="order-info" @click="$router.push('/orders?type=DEFAULT')">
@@ -81,578 +120,579 @@
 			</div>
 		</div> -->
 
-		<!-- <van-cell class="title" title="我的服务" :border="false" /> -->
- 
-
-		<van-cell title="我的订单" :icon="require('@assets/info_icon_jiaoyijilu.png')" is-link to="mineExchange" />
-		<van-cell title="我的银行卡" :icon="require('@assets/icon_yinhangka.png')" is-link to="mineBanks" />
-		<van-cell title="我的钱包" :icon="require('@/assets/yuanyu/icon_qianbao.png')" is-link @click="onClick"/>
-		<!-- <van-cell title="邀请有礼" :icon="require('@assets/gift.png')" is-link @click="tips" /> -->
-		<!-- <van-cell title="福利中心" :icon="require('@/assets/yuanyu/icon-fuli.png')" is-link to="welfaredetail" /> -->
-		<van-cell title="关于我们" :icon="require('@assets/icon-guanyuwomen.png')" is-link to="about" />
-		<van-cell title="账号与安全" :icon="require('@assets/icon-anquan.png')" is-link to="security" />
-
-
-		<van-grid class="menus" :border="false" v-if="false">
-			
-			
-			<van-grid-item text="我的订单" :to="{ path: '/mineExchange' }">
-				<template #icon>
-					<van-icon :name="require('@assets/info_icon_jiaoyijilu.png')" class="search-icon" />
-				</template>
-			</van-grid-item>
-			
-			<van-grid-item text="我的银行卡" :to="{ path: '/mineBanks' }">
-				<template #icon>
-					<van-icon :name="require('@assets/icon_yinhangka.png')" class="search-icon" />
-				</template>
-			</van-grid-item>
-			<van-grid-item text="我的钱包" @click="onClick">
-			     <template #icon>
-			         <van-icon :name="require('../assets/yuanyu/icon_qianbao.png')" class="search-icon" />
-			     </template>
-			 </van-grid-item>
-			<!-- <van-grid-item text="我的积分" @click="wait">
+        <!-- <van-cell class="title" title="我的服务" :border="false" /> -->
+
+        <van-cell title="我的订单" :icon="require('@assets/info_icon_jiaoyijilu.png')" is-link to="mineExchange" />
+        <van-cell title="我的银行卡" :icon="require('@assets/icon_yinhangka.png')" is-link to="mineBanks" />
+        <van-cell title="我的钱包" :icon="require('@/assets/yuanyu/icon_qianbao.png')" is-link @click="onClick" />
+        <!-- <van-cell title="邀请有礼" :icon="require('@assets/gift.png')" is-link @click="tips" /> -->
+        <!-- <van-cell title="福利中心" :icon="require('@/assets/yuanyu/icon-fuli.png')" is-link to="welfaredetail" /> -->
+        <van-cell title="关于我们" :icon="require('@assets/icon-guanyuwomen.png')" is-link to="about" />
+        <van-cell title="账号与安全" :icon="require('@assets/icon-anquan.png')" is-link to="security" />
+
+        <van-grid class="menus" :border="false" v-if="false">
+            <van-grid-item text="我的订单" :to="{ path: '/mineExchange' }">
+                <template #icon>
+                    <van-icon :name="require('@assets/info_icon_jiaoyijilu.png')" class="search-icon" />
+                </template>
+            </van-grid-item>
+
+            <van-grid-item text="我的银行卡" :to="{ path: '/mineBanks' }">
+                <template #icon>
+                    <van-icon :name="require('@assets/icon_yinhangka.png')" class="search-icon" />
+                </template>
+            </van-grid-item>
+            <van-grid-item text="我的钱包" @click="onClick">
+                <template #icon>
+                    <van-icon :name="require('../assets/yuanyu/icon_qianbao.png')" class="search-icon" />
+                </template>
+            </van-grid-item>
+            <!-- <van-grid-item text="我的积分" @click="wait">
 				<template #icon>
 					<van-icon :name="require('@assets/icon-jifen.png')" class="search-icon" />
 				</template>
 			</van-grid-item> -->
-			<!-- <van-grid-item text="我赞过的" :to="{ path: '/mineLikes' }">
+            <!-- <van-grid-item text="我赞过的" :to="{ path: '/mineLikes' }">
 				<template #icon>
 					<van-icon :name="require('@assets/icon-dianzan1.png')" class="search-icon" />
 				</template>
 			</van-grid-item> -->
-			<!-- <van-grid-item text="地址管理" @click="wait">
+            <!-- <van-grid-item text="地址管理" @click="wait">
 				<template #icon>
 					<van-icon :name="require('@assets/icon_dizhi.png')" class="search-icon" />
 				</template>
 			</van-grid-item> -->
-			
-			<!-- <van-grid-item text="了解更多" :to="{ path: '/question' }">
+
+            <!-- <van-grid-item text="了解更多" :to="{ path: '/question' }">
 				<template #icon>
 					<van-icon :name="require('@assets/icon_liaojiegengduo.png')" class="search-icon" />
 				</template>
 			</van-grid-item> -->
-			<van-grid-item text="邀请有礼" @click="tips">
-				<template #icon>
-					<van-icon :name="require('@assets/gift.png')" class="search-icon" />
-				</template>
-			</van-grid-item>
-			<van-grid-item text="福利中心" :to="{ path: '/welfaredetail' }">
-			    <template #icon>
-			        <van-icon :name="require('@/assets/art/icon-welfare.png')" class="search-icon" />
-			    </template>
-			</van-grid-item>
-			<van-grid-item text="关于我们" :to="{ path: '/about' }">
-				<template #icon>
-					<van-icon :name="require('@assets/icon-guanyuwomen.png')" class="search-icon" />
-				</template>
-			</van-grid-item>
-			<van-grid-item text="账号与安全" :to="{ path: '/security' }"> 
-				<template #icon>
-					<van-icon :name="require('@assets/icon-anquan.png')" class="search-icon" />
-				</template>
-			</van-grid-item>
-			
-		</van-grid>
-
-		<div class="tabbar-placeholder"></div>
-	</div>
+            <van-grid-item text="邀请有礼" @click="tips">
+                <template #icon>
+                    <van-icon :name="require('@assets/gift.png')" class="search-icon" />
+                </template>
+            </van-grid-item>
+            <van-grid-item text="福利中心" :to="{ path: '/welfaredetail' }">
+                <template #icon>
+                    <van-icon :name="require('@/assets/art/icon-welfare.png')" class="search-icon" />
+                </template>
+            </van-grid-item>
+            <van-grid-item text="关于我们" :to="{ path: '/about' }">
+                <template #icon>
+                    <van-icon :name="require('@assets/icon-guanyuwomen.png')" class="search-icon" />
+                </template>
+            </van-grid-item>
+            <van-grid-item text="账号与安全" :to="{ path: '/security' }">
+                <template #icon>
+                    <van-icon :name="require('@assets/icon-anquan.png')" class="search-icon" />
+                </template>
+            </van-grid-item>
+        </van-grid>
+
+        <div class="tabbar-placeholder"></div>
+    </div>
 </template>
 
 <script>
-	import {mapState} from 'vuex';
-	import { Dialog } from 'vant';
-	export default {
-		data() {
-			return {
-				org: false,
-				showMore: false,
-				buyFirst: {},
-				projectId: this.$store.state.projectId
-			};
-		},
-		computed: {
-			...mapState(['userInfo'])
-		},
-		mounted() {
-			this.$store.dispatch('getUserInfo');
-			localStorage.setItem('showWalletToast',true)
-			if (this.isLogin) {
-				this.$http
-					.post(
-						'/identityAuth/all', {
-							query: {
-								userId: this.$store.state.userInfo.id,
-								projectId: this.$store.state.projectId
-							}
-						}, {
-							body: 'json'
-						}
-					)
-					.then(res => {
-						if (!res.empty) {
-							this.form = res.content[0];
-							this.org = this.form.org;
-						}
-					});
-				this.$http
-					.post('/user/preEmptionPrivilege', {
-						projectId: this.$store.state.projectId
-					})
-					.then(res => {
-						this.buyFirst = res.preEmptionPrivilege;
-					});
-			}
-		},
-		methods: {
-			onClick() {
-			    const that = this;
-			    this.checkLogin().then(() => {
-			        this.$http.post('/walletLianlianpay/getAccount').then(res => {
-			            if (res.account && res.account.accountStatus == 'NORMAL') {
-			                this.$router.push('/mineWalletIndex');
-			            } else if (res.account && res.account.accountStatus == 'CHECK_PENDING') {
-			                this.$toast('正在等待审核，请稍后！');
-			            } else{
-								if(res.needRenew){//开通钱包（没给钱的）
-									 Dialog.confirm({
-										 title: '是否前往开通钱包',
-										 message: that.walletTips
-									 }).then(() => {
-										 this.checkBank().then(() => {
-										 	 this.$router.push('/mineWalletOpen');
-										 })
-									 });
-								}else{//开通钱包，完善信息（给了钱的）
-									Dialog.confirm({
-									    title: '是否前往完善钱包信息',
-									    message: that.walletTips
-									}).then(() => {
-										this.checkBank().then(() => {
-											this.$router.push('/mineWalletAdd');
-										})
-									}); 
-								}
-			            }
-			        });
-			    });
-			},
-			tips() {
-				// this.$toast('敬请期待');
-				 this.checkLogin().then(() => {
-					 this.$http.post('/activityCollection/getInvitationTime', {
-						projectId: this.projectId
-					 }).then(res => {
-						if (res) {
-							this.$router.push("/share");
-						} else {
-							this.$toast("敬请期待");
-						}
-					 })
-				 })
-			},
-			copy() {
-				this.$copyText(this.userInfo.id).then(
-					e => {
-						this.$toast.success('复制成功');
-						console.log(e);
-					},
-					e => {
-						this.$toast('复制失败');
-						console.log(e);
-					}
-				);
-			},
-			goAuth() {
-				if (this.authStatus === '认证中' || this.authStatus === '认证失败') {
-					this.$router.push('/waiting');
-				} else if (this.authStatus === '未认证') {
-					this.$router.push('/Authentication');
-				}
-			}
-		}
-	};
+import { mapState } from 'vuex';
+import { Dialog } from 'vant';
+export default {
+    data() {
+        return {
+            org: false,
+            showMore: false,
+            buyFirst: {},
+            projectId: this.$store.state.projectId
+        };
+    },
+    computed: {
+        ...mapState(['userInfo'])
+    },
+    mounted() {
+        this.$store.dispatch('getUserInfo');
+        localStorage.setItem('showWalletToast', true);
+        if (this.isLogin) {
+            this.$http
+                .post(
+                    '/identityAuth/all',
+                    {
+                        query: {
+                            userId: this.$store.state.userInfo.id,
+                            projectId: this.$store.state.projectId
+                        }
+                    },
+                    {
+                        body: 'json'
+                    }
+                )
+                .then(res => {
+                    if (!res.empty) {
+                        this.form = res.content[0];
+                        this.org = this.form.org;
+                    }
+                });
+            this.$http
+                .post('/user/preEmptionPrivilege', {
+                    projectId: this.$store.state.projectId
+                })
+                .then(res => {
+                    this.buyFirst = res.preEmptionPrivilege;
+                });
+        }
+    },
+    methods: {
+        onClick() {
+            const that = this;
+            this.checkLogin().then(() => {
+                this.$http.post('/walletLianlianpay/getAccount').then(res => {
+                    if (res.account && res.account.accountStatus == 'NORMAL') {
+                        this.$router.push('/mineWalletIndex');
+                    } else if (res.account && res.account.accountStatus == 'CHECK_PENDING') {
+                        this.$toast('正在等待审核，请稍后！');
+                    } else {
+                        if (res.needRenew) {
+                            //开通钱包（没给钱的）
+                            Dialog.confirm({
+                                title: '是否前往开通钱包',
+                                message: that.walletTips
+                            }).then(() => {
+                                this.checkBank().then(() => {
+                                    this.$router.push('/mineWalletOpen');
+                                });
+                            });
+                        } else {
+                            //开通钱包，完善信息（给了钱的）
+                            Dialog.confirm({
+                                title: '是否前往完善钱包信息',
+                                message: that.walletTips
+                            }).then(() => {
+                                this.checkBank().then(() => {
+                                    this.$router.push('/mineWalletAdd');
+                                });
+                            });
+                        }
+                    }
+                });
+            });
+        },
+        tips() {
+            // this.$toast('敬请期待');
+            this.checkLogin().then(() => {
+                this.$http
+                    .post('/activityCollection/getInvitationTime', {
+                        projectId: this.projectId
+                    })
+                    .then(res => {
+                        if (res) {
+                            this.$router.push('/share');
+                        } else {
+                            this.$toast('敬请期待');
+                        }
+                    });
+            });
+        },
+        copy() {
+            this.$copyText(this.userInfo.id).then(
+                e => {
+                    this.$toast.success('复制成功');
+                    console.log(e);
+                },
+                e => {
+                    this.$toast('复制失败');
+                    console.log(e);
+                }
+            );
+        },
+        goAuth() {
+            if (this.authStatus === '认证中' || this.authStatus === '认证失败') {
+                this.$router.push('/waiting');
+            } else if (this.authStatus === '未认证') {
+                this.$router.push('/Authentication');
+            }
+        }
+    }
+};
 </script>
 
 <style lang="less" scoped>
-	.mine {
-		padding-bottom: 100px;
-		background-color: @bg;
-	}
-
-	.top {
-		display: flex;
-		align-items: center;
-		padding: 36px 16px 30px;
-		border-bottom: 1px solid @bg2;
-		position: relative;
-
-		.van-image {
-			border: 5px solid @bg;
-		}
-
-		.text {
-			margin-left: 12px;
-			position: relative;
-			z-index: 2;
-
-			.text1 {
-				font-size: @font3;
-				font-weight: bold;
-				color: @text0;
-				line-height: 24px;
-
-				img {
-					width: 18px;
-					height: 18px;
-					display: inline-block;
-					margin-left: 6px;
-				}
-			}
-
-			.text2 {
-				font-size: @font2;
-				color: #949699;
-				line-height: 24px;
-			}
-		}
-
-		.top-bg {
-			position: absolute;
-			top: -83px;
-			left: 0;
-			right: 0;
-			width: 100%;
-			display: block;
-			height: auto;
-			z-index: 0;
-		}
-	}
-
-	/deep/ .title {
-		padding: 20px 16px 10px;
-
-		.van-cell__title {
-			span {
-				font-size: @font3;
-				line-height: 28px;
-				color: @text0;
-			}
-		}
-
-		.van-cell__value {
-			span {
-				font-size: @font1;
-				line-height: 28px;
-			}
-		}
-
-		.van-icon {
-			line-height: 28px;
-		}
-	}
-	
-	.orderList {
-		.flex();
-		padding: 0 16px;
-
-		.order-info {
-			padding: 20px 0;
-			position: relative;
-			.flex();
-			background-color: @bg;
-			flex-grow: 1;
-			justify-content: center;
-			border-radius: 8px;
-
-			img {
-				width: 32px;
-				height: 32px;
-				margin-right: 12px;
-			}
-
-			span {
-				font-size: @font2;
-				color: @text0;
-				line-height: 24px;
-			}
-
-			&:active {
-				background-color: @bg2;
-			}
-		}
-
-		.order-info+.order-info {
-			margin-left: 20px;
-
-			&::before {
-				content: '';
-				width: 1px;
-				height: 32px;
-				background-color: @bg3;
-				position: absolute;
-				left: -10px;
-				top: 50%;
-				transform: translateY(-50%);
-			}
-		}
-	}
-
-	.grid-img {
-		display: block;
-	}
-
-	/deep/ .van-grid-item {
-		.van-grid-item__text {
-			font-size: @font1;
-			color: @text0;
-			line-height: 18px;
-			margin-top: 4px;
-		}
-	}
-	/deep/ .van-cell{
-		padding: 16px 16px;
-		border-bottom: 1px solid #1F1C2F;
-	}
-	/deep/ .van-icon__image{
-		height: 1.5em;
-		width: 1.5em;
-	}
-	/deep/ .van-cell__title{
-		font-size: 16px;
-		margin-left: 10px;
-	}
-	
-	/deep/.menu {
-		.van-cell {
-			padding: 22px 20px 24px;
-
-			&::after {
-				left: 52px;
-				right: 16px;
-			}
-		}
-
-		.van-cell__title {
-			span {
-				font-weight: bold;
-			}
-		}
-	}
-
-	.search-icon {
-		width: 28px;
-		height: 28px;
-		// margin-right: 10px;
-		display: block;
-
-		/deep/.van-icon__image {
-			width: 28px;
-			height: 28px;
-			display: block;
-		}
-	}
-
-	.userInfo {
-		padding-top: 35vw;
-		border-bottom: 1px solid @bg2;
-		position: relative;
-
-		.top-img {
-			position: absolute;
-			top: 0;
-			left: 0;
-			z-index: 1;
-		}
-	}
-
-	.userInfo-content {
-		padding: 0 16px;
-		z-index: 2;
-		position: relative;
-		transform: translateY(-16px);
-
-		.sub {
-			font-size: 12px;
-			color: @text3;
-			line-height: 22px;
-			padding: 9px 0 0;
-		}
-
-		.sub-right {
-			.flex();
-			justify-content: flex-end;
-		}
-
-		.sub-right>div {
-			font-size: 12px;
-			color: @text0;
-			line-height: 17px;
-			text-decoration: underline;
-		}
-
-		.btns {
-			display: flex;
-			// padding-bottom: 16px;
-			align-items: center;
-			margin-top: 10px;
-
-			.collect {
-				.flex();
-
-				.text1 {
-					font-size: @font2;
-					color: @text0;
-					line-height: 24px;
-					margin-left: 6px;
-				}
-
-				.text2 {
-					font-size: @font2;
-					color: @text3;
-					line-height: 24px;
-				}
-
-				&:nth-child(2) {
-					flex-grow: 1;
-					margin: 0 22px;
-				}
-			}
-
-			/deep/.van-button {
-				width: 90px;
-
-				.van-icon__image {
-					display: block;
-					width: 18px;
-					height: 18px;
-				}
-
-				color: @text0  !important;
-			}
-
-			.van-button+.van-button {
-				margin-left: 10px;
-			}
-
-			.verid {
-				/deep/ span {
-					color: #d8d8d8;
-					line-height: 24px;
-					background: linear-gradient(45deg, #fdfb60 0%, #ff8f3e 100%);
-					background-clip: text;
-					-webkit-background-clip: text;
-					-webkit-text-fill-color: transparent;
-				}
-			}
-		}
-	}
-
-	.userInfo-top {
-		display: flex;
-		align-items: center;
-		transform: translateX(-5px);
-
-		.van-image {
-			border: 5px solid @bg;
-			flex-shrink: 0;
-		}
-
-		/deep/.van-image {
-			img {
-				transform: translateY(-2px);
-			}
-		}
-
-		.text {
-			margin: 0 40px 0 12px;
-
-			// overflow: hidden;
-			.text1 {
-				font-size: @font3;
-				font-weight: bold;
-				color: @text0;
-				line-height: 24px;
-				.flex();
-
-				img {
-					width: 18px;
-					height: 18px;
-					display: inline-block;
-					margin-left: 5px;
-					vertical-align: middle;
-				}
-			}
-
-			.text2 {
-				font-size: @font2;
-				color: @text3;
-				line-height: 24px;
-				display: flex;
-				align-items: center;
-
-				img {
-					display: block;
-					margin-left: 6px;
-				}
-			}
-
-			.box {
-				display: flex;
-				// flex-basis: 1;
-				margin-bottom: -12px;
-				border-radius: 5px;
-
-				.count {
-					padding-left: 5px;
-				}
-
-				.type {
-					// width: 40px;
-					color: @text0;
-					font-size: @font1;
-					background-color: rgb(@buygreen);
-					padding: 3px 3px;
-				}
-
-				.count {
-					min-width: 40px;
-					color: @text0;
-					font-size: @font1;
-					line-height: 24px;
-					padding: 0 3px;
-					background-color: rgba(@buygreen, 0.6);
-					display: inline-block;
-				}
-
-				span {
-					// flex-grow: 1;
-					// flex-basis: 0;
-					float: right;
-				}
-			}
-		}
-	}
-
-	.menus {
-		margin: 0 16px;
-		background-color: @bg;
-		border-radius: 8px;
-		overflow: hidden;
-	}
-
-	/deep/.auth {
-		color: @text3 !important;
-		padding: 0 10px;
-		margin-left: 6px;
-
-		.van-button__content {
-			.flex();
-
-			.van-icon__image {
-				display: block;
-			}
-		}
-	}
+.mine {
+    padding-bottom: 100px;
+    background-color: @bg;
+}
+
+.top {
+    display: flex;
+    align-items: center;
+    padding: 36px 16px 30px;
+    border-bottom: 1px solid @bg2;
+    position: relative;
+
+    .van-image {
+        border: 5px solid @bg;
+    }
+
+    .text {
+        margin-left: 12px;
+        position: relative;
+        z-index: 2;
+
+        .text1 {
+            font-size: @font3;
+            font-weight: bold;
+            color: @text0;
+            line-height: 24px;
+
+            img {
+                width: 18px;
+                height: 18px;
+                display: inline-block;
+                margin-left: 6px;
+            }
+        }
+
+        .text2 {
+            font-size: @font2;
+            color: #949699;
+            line-height: 24px;
+        }
+    }
+
+    .top-bg {
+        position: absolute;
+        top: -83px;
+        left: 0;
+        right: 0;
+        width: 100%;
+        display: block;
+        height: auto;
+        z-index: 0;
+    }
+}
+
+/deep/ .title {
+    padding: 20px 16px 10px;
+
+    .van-cell__title {
+        span {
+            font-size: @font3;
+            line-height: 28px;
+            color: @text0;
+        }
+    }
+
+    .van-cell__value {
+        span {
+            font-size: @font1;
+            line-height: 28px;
+        }
+    }
+
+    .van-icon {
+        line-height: 28px;
+    }
+}
+
+.orderList {
+    .flex();
+    padding: 0 16px;
+
+    .order-info {
+        padding: 20px 0;
+        position: relative;
+        .flex();
+        background-color: @bg;
+        flex-grow: 1;
+        justify-content: center;
+        border-radius: 8px;
+
+        img {
+            width: 32px;
+            height: 32px;
+            margin-right: 12px;
+        }
+
+        span {
+            font-size: @font2;
+            color: @text0;
+            line-height: 24px;
+        }
+
+        &:active {
+            background-color: @bg2;
+        }
+    }
+
+    .order-info + .order-info {
+        margin-left: 20px;
+
+        &::before {
+            content: '';
+            width: 1px;
+            height: 32px;
+            background-color: @bg3;
+            position: absolute;
+            left: -10px;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+    }
+}
+
+.grid-img {
+    display: block;
+}
+
+/deep/ .van-grid-item {
+    .van-grid-item__text {
+        font-size: @font1;
+        color: @text0;
+        line-height: 18px;
+        margin-top: 4px;
+    }
+}
+/deep/ .van-cell {
+    padding: 16px 16px;
+    border-bottom: 1px solid #1f1c2f;
+}
+/deep/ .van-icon__image {
+    height: 1.5em;
+    width: 1.5em;
+}
+/deep/ .van-cell__title {
+    font-size: 16px;
+    margin-left: 10px;
+}
+
+/deep/.menu {
+    .van-cell {
+        padding: 22px 20px 24px;
+
+        &::after {
+            left: 52px;
+            right: 16px;
+        }
+    }
+
+    .van-cell__title {
+        span {
+            font-weight: bold;
+        }
+    }
+}
+
+.search-icon {
+    width: 28px;
+    height: 28px;
+    // margin-right: 10px;
+    display: block;
+
+    /deep/.van-icon__image {
+        width: 28px;
+        height: 28px;
+        display: block;
+    }
+}
+
+.userInfo {
+    padding-top: 35vw;
+    border-bottom: 1px solid @bg2;
+    position: relative;
+
+    .top-img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+    }
+}
+
+.userInfo-content {
+    padding: 0 16px;
+    z-index: 2;
+    position: relative;
+    transform: translateY(-16px);
+
+    .sub {
+        font-size: 12px;
+        color: @text3;
+        line-height: 22px;
+        padding: 9px 0 0;
+    }
+
+    .sub-right {
+        .flex();
+        justify-content: flex-end;
+    }
+
+    .sub-right > div {
+        font-size: 12px;
+        color: @text0;
+        line-height: 17px;
+        text-decoration: underline;
+    }
+
+    .btns {
+        display: flex;
+        // padding-bottom: 16px;
+        align-items: center;
+        margin-top: 10px;
+
+        .collect {
+            .flex();
+
+            .text1 {
+                font-size: @font2;
+                color: @text0;
+                line-height: 24px;
+                margin-left: 6px;
+            }
+
+            .text2 {
+                font-size: @font2;
+                color: @text3;
+                line-height: 24px;
+            }
+
+            &:nth-child(2) {
+                flex-grow: 1;
+                margin: 0 22px;
+            }
+        }
+
+        /deep/.van-button {
+            width: 90px;
+
+            .van-icon__image {
+                display: block;
+                width: 18px;
+                height: 18px;
+            }
+
+            color: @text0 !important;
+        }
+
+        .van-button + .van-button {
+            margin-left: 10px;
+        }
+
+        .verid {
+            /deep/ span {
+                color: #d8d8d8;
+                line-height: 24px;
+                background: linear-gradient(45deg, #fdfb60 0%, #ff8f3e 100%);
+                background-clip: text;
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+            }
+        }
+    }
+}
+
+.userInfo-top {
+    display: flex;
+    align-items: center;
+    transform: translateX(-5px);
+
+    .van-image {
+        border: 5px solid @bg;
+        flex-shrink: 0;
+    }
+
+    /deep/.van-image {
+        img {
+            transform: translateY(-2px);
+        }
+    }
+
+    .text {
+        margin: 0 40px 0 12px;
+
+        // overflow: hidden;
+        .text1 {
+            font-size: @font3;
+            font-weight: bold;
+            color: @text0;
+            line-height: 24px;
+            .flex();
+
+            img {
+                width: 18px;
+                height: 18px;
+                display: inline-block;
+                margin-left: 5px;
+                vertical-align: middle;
+            }
+        }
+
+        .text2 {
+            font-size: @font2;
+            color: @text3;
+            line-height: 24px;
+            display: flex;
+            align-items: center;
+
+            img {
+                display: block;
+                margin-left: 6px;
+            }
+        }
+
+        .box {
+            display: flex;
+            // flex-basis: 1;
+            margin-bottom: -12px;
+            border-radius: 5px;
+
+            .count {
+                padding-left: 5px;
+            }
+
+            .type {
+                // width: 40px;
+                color: @text0;
+                font-size: @font1;
+                background-color: rgb(@buygreen);
+                padding: 3px 3px;
+            }
+
+            .count {
+                min-width: 40px;
+                color: @text0;
+                font-size: @font1;
+                line-height: 24px;
+                padding: 0 3px;
+                background-color: rgba(@buygreen, 0.6);
+                display: inline-block;
+            }
+
+            span {
+                // flex-grow: 1;
+                // flex-basis: 0;
+                float: right;
+            }
+        }
+    }
+}
+
+.menus {
+    margin: 0 16px;
+    background-color: @bg;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+/deep/.auth {
+    color: @text3 !important;
+    padding: 0 10px;
+    margin-left: 6px;
+
+    .van-button__content {
+        .flex();
+
+        .van-icon__image {
+            display: block;
+        }
+    }
+}
 </style>

src/views/Store.vue

@@ -1,90 +1,78 @@
 <template>
-  <div class="discover">
-    <van-sticky ref="top"
-                :offset-top="bar.value.show ? 46 : 0">
-      <div class="top">
-        <van-tabs class="top-btn"
-                  v-model="active"
-                  @click="onClick">
-          <van-tab title="已拥有藏品"
-                   name="explore"></van-tab>
-          <van-tab title="已卖出藏品"
-                   name="creator"></van-tab>
-         <van-tab title="兑换券"
-                   name="coupon"></van-tab>
-          <van-tab title="神秘宝盒"
-                   name="box"></van-tab>
-        </van-tabs>
+    <div class="discover">
+        <van-sticky ref="top" :offset-top="bar.value.show ? 46 : 0">
+            <div class="top">
+                <van-tabs class="top-btn" v-model="active" @click="onClick">
+                    <van-tab title="已拥有藏品" name="explore"></van-tab>
+                    <van-tab title="已卖出藏品" name="creator"></van-tab>
+                    <van-tab title="兑换券" name="coupon"></van-tab>
+                    <van-tab title="神秘宝盒" name="box"></van-tab>
+                </van-tabs>
 
-        <div class="search">
-          <van-icon name="search"
-                    v-if="isLogin && active !== 'coupon' && active !== 'box'"
-                    @click="$router.push('/assetSearch?status=' + status)" />
-          <van-icon v-if="active !== 'coupon'"
-                    name="filter-o"
-                    @click="$refs.calss.showPicker = true" />
-        </div>
-      </div>
-    </van-sticky>
+                <div class="search">
+                    <van-icon
+                        name="search"
+                        v-if="isLogin && active !== 'coupon' && active !== 'box'"
+                        @click="$router.push('/assetSearch?status=' + status)"
+                    />
+                    <van-icon v-if="active !== 'coupon'" name="filter-o" @click="$refs.calss.showPicker = true" />
+                </div>
+            </div>
+        </van-sticky>
 
-    <div>
-      <van-tabs v-model:active="type"
-                line-width="16"
-                line-height="2"
-                :ellipsis="false"
-                @click="changeTab">
-        <van-tab :title="item.label"
-                 :name="
+        <div>
+            <van-tabs v-model:active="type" line-width="16" line-height="2" :ellipsis="false" @click="changeTab">
+                <van-tab
+                    :title="item.label"
+                    :name="
                         item.type === 'select' ? (type === item.value[0] ? item.value[1] : item.value[0]) : item.value
                     "
-                 :title-class="item.type === 'select' && type === item.value[0] ? '' : 'asc'"
-                 :key="index"
-                 v-for="(item, index) in typeOptions">
-          <template v-if="item.type === 'select'"
-                    #title>
-            <div class="tab">
-              <span>{{ item.label }}</span>
-              <van-icon size="8"
-                        name="arrow-up" />
-              <van-icon size="8"
-                        name="arrow-down" />
-            </div>
-          </template>
-        </van-tab>
-      </van-tabs>
+                    :title-class="item.type === 'select' && type === item.value[0] ? '' : 'asc'"
+                    :key="index"
+                    v-for="(item, index) in typeOptions"
+                >
+                    <template v-if="item.type === 'select'" #title>
+                        <div class="tab">
+                            <span>{{ item.label }}</span>
+                            <van-icon size="8" name="arrow-up" />
+                            <van-icon size="8" name="arrow-down" />
+                        </div>
+                    </template>
+                </van-tab>
+            </van-tabs>
 
-      <van-list class="box-list"
+            <van-list
+                class="box-list"
                 v-model:loading="loading"
                 :finished="finished"
                 finished-text=""
-                @load="active == 'box' ? getSurpriseBox() : getList()">
-        <template v-for="(item, index) in showList"
-                  :key="index">
-          <BoxInfo :info="item"
-                   v-if="active == 'box'"
-                   @getlist="getSurpriseBox"></BoxInfo>
-          <coupon-info :info="item"
-                       v-else-if="active == 'coupon'"></coupon-info>
-          <asset-info :info="item"
-                      v-else></asset-info>
-        </template>
-        <van-empty v-if="empty || (showList.length === 0 && !loading)"
-                   :description="`${tips}暂无数据哦～`"
-                   :image="require(`@assets/kong_png_maichude.png`)" />
-      </van-list>
-    </div>
+                @load="active == 'box' ? getSurpriseBox() : getList()"
+            >
+                <template v-for="(item, index) in showList" :key="index">
+                    <BoxInfo :info="item" v-if="active == 'box'" @getlist="getSurpriseBox"></BoxInfo>
+                    <coupon-info :info="item" v-else-if="active == 'coupon'"></coupon-info>
+                    <asset-info :info="item" v-else></asset-info>
+                </template>
+                <van-empty
+                    v-if="empty || (showList.length === 0 && !loading)"
+                    :description="`${tips}暂无数据哦～`"
+                    :image="require(`@assets/kong_png_maichude.png`)"
+                />
+            </van-list>
+        </div>
 
-    <van-action-sheet ref="action"
-                      v-model:show="showSelect"
-                      description="选择筛选方式"
-                      :actions="actions"
-                      cancel-text="取消"
-                      close-on-click-action />
+        <van-action-sheet
+            ref="action"
+            v-model:show="showSelect"
+            description="选择筛选方式"
+            :actions="actions"
+            cancel-text="取消"
+            close-on-click-action
+        />
 
-    <div class="tabbar-placeholder"></div>
-    <class-List ref="calss"
-                @update="changeTis"></class-List>
-  </div>
+        <div class="tabbar-placeholder"></div>
+        <class-List ref="calss" @update="changeTis"></class-List>
+    </div>
 </template>
 
 <script>
@@ -297,9 +285,9 @@ export default {
 
             return form;
         },
-        changeTis(id,tis){
-            this.activeId = id
-            this.tips = tis
+        changeTis(id, tis) {
+            this.activeId = id;
+            this.tips = tis;
         },
         getSurpriseBox() {
             const that = this;
@@ -409,14 +397,14 @@ export default {
     // background-color: @bg3;
     // min-height: 100vh;
     // box-sizing: border-box;
-	width: 100vw;
-		height: 100vh;
-		background-color: #0B0A11;
-	background:url("../assets/art/discover-bg.png") no-repeat center;
-	background-position: top;
-	background-size: 100%;
-	overflow: scroll;
-	// padding-bottom: 180px;
+    width: 100vw;
+    height: 100vh;
+    background-color: #0b0a11;
+    background: url('../assets/art/discover-bg.png') no-repeat center;
+    background-position: top;
+    background-size: 100%;
+    overflow: scroll;
+    // padding-bottom: 180px;
 }
 .grid-img {
     display: block;

src/views/Submit.vue

@@ -3,7 +3,14 @@
         <div class="submit">
             <div class="pageTitle">{{ info.minter }}</div>
             <div class="product">
-                <van-image lazy-load  width="80" height="80" :radius="6" :src="getImg(changeImgs(info.pic))" fit="cover" />
+                <van-image
+                    lazy-load
+                    width="80"
+                    height="80"
+                    :radius="6"
+                    :src="getImg(changeImgs(info.pic))"
+                    fit="cover"
+                />
                 <div class="product-content">
                     <div class="text1">
                         {{ info.name }}
@@ -14,10 +21,10 @@
             </div>
 
             <div class="list">
-				<div class="info" v-if="orderId">
-				    <div class="text1">订单ID</div>
-				    <div class="text2">{{ orderId }}</div>
-				</div>
+                <div class="info" v-if="orderId">
+                    <div class="text1">订单ID</div>
+                    <div class="text2">{{ orderId }}</div>
+                </div>
                 <div class="info">
                     <div class="text1">作品费用</div>
                     <div class="text2">¥{{ info.price }}</div>
@@ -60,7 +67,7 @@
                         :color="`linear-gradient(135deg, ${$colors.prim} 0%, ${$colors.warn} 100%)`"
                         @click="openPopup"
                     >
-                        {{orderId?'立即支付':'提交订单'}} 
+                        {{ orderId ? '立即支付' : '提交订单' }}
                     </van-button>
                 </div>
                 <a id="pay" :href="hrefUrl"></a>
@@ -85,58 +92,58 @@
                 :slider-text="text"
             ></slideverify>
         </van-popup>
-		<van-popup class="popup-content" v-model:show="showSms" teleport="body" position="bottom">
-		    <div class="popup">
-		        <van-icon class="cancel" @click="showSms = false" name="close" />
-		        <!-- <div >取消</div> -->
-		        <div class="title">{{ isPwd ? '请输入钱包支付密码' : '请输入验证码' }}</div>
-				<!-- 验证码输入框 -->
-		        <div v-if="isSms">
-		            <van-password-input :value="pay.verifyCode" :length="6" />
-					<div class="sub-code">
-						<van-button
-						    @click="payExecute"
-						    size="small"
-						    plain
-						    :disabled="isSend"
-						    type="primary"
-							:hide-on-click-outside="false"
-						>
-						{{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
-						</van-button>
-					</div>
-					
-		            <van-number-keyboard
-		                maxlength="6"
-		                theme="custom"
-		                v-model="pay.verifyCode"
-		                :show="showSms"
-		                @blur="showSms = false"
-		                @hide="bind('hide')"
-		                close-button-text="完成"
-						:hide-on-click-outside="false"
-		                @close="bind('close')"
-		            />
-		        </div> 
-				
-				<!-- 钱包支付密码 -->
-		        <div v-if="isPwd">
-		            <van-password-input :value="value" :length="6" />
-		            <van-number-keyboard
-		                maxlength="6"
-		                theme="custom"
-		                v-model="value"
-		                :show="showSms"
-		                @blur="showSms = false"
-		                @hide="payCreate('hide')"
-		                close-button-text="完成"
-						@close="payCreate('close')"
-		            />
-		        </div>
-		
-		        <!-- 数字键盘 -->
-		    </div>
-		</van-popup>
+        <van-popup class="popup-content" v-model:show="showSms" teleport="body" position="bottom">
+            <div class="popup">
+                <van-icon class="cancel" @click="showSms = false" name="close" />
+                <!-- <div >取消</div> -->
+                <div class="title">{{ isPwd ? '请输入钱包支付密码' : '请输入验证码' }}</div>
+                <!-- 验证码输入框 -->
+                <div v-if="isSms">
+                    <van-password-input :value="pay.verifyCode" :length="6" />
+                    <div class="sub-code">
+                        <van-button
+                            @click="payExecute"
+                            size="small"
+                            plain
+                            :disabled="isSend"
+                            type="primary"
+                            :hide-on-click-outside="false"
+                        >
+                            {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
+                        </van-button>
+                    </div>
+
+                    <van-number-keyboard
+                        maxlength="6"
+                        theme="custom"
+                        v-model="pay.verifyCode"
+                        :show="showSms"
+                        @blur="showSms = false"
+                        @hide="bind('hide')"
+                        close-button-text="完成"
+                        :hide-on-click-outside="false"
+                        @close="bind('close')"
+                    />
+                </div>
+
+                <!-- 钱包支付密码 -->
+                <div v-if="isPwd">
+                    <van-password-input :value="value" :length="6" />
+                    <van-number-keyboard
+                        maxlength="6"
+                        theme="custom"
+                        v-model="value"
+                        :show="showSms"
+                        @blur="showSms = false"
+                        @hide="payCreate('hide')"
+                        close-button-text="完成"
+                        @close="payCreate('close')"
+                    />
+                </div>
+
+                <!-- 数字键盘 -->
+            </div>
+        </van-popup>
     </div>
 </template>
 
@@ -154,21 +161,21 @@ export default {
     mixins: [product, coupon, verify],
     data() {
         return {
-			value: '',
+            value: '',
             showPopup: false,
-			showSms: false,
-			isSms: false,
-			isPwd: false,
-			
+            showSms: false,
+            isSms: false,
+            isPwd: false,
+
             imgCode: '',
             imgCodeUrl: '',
             info: {},
             message: '',
             payType: '',
-			// payType: inWeixin ? 'WEIXIN' : 'ALIPAY',
+            // payType: inWeixin ? 'WEIXIN' : 'ALIPAY',
             payChannel: null,
             payInfos: [],
-			
+
             icons: [require('@assets/svgs/icon_gouxuan_huise.svg'), require('@assets/icon_gouxuan_pre.png')],
             bottom: null,
             orderId: 0,
@@ -184,7 +191,7 @@ export default {
             // launchName: '',
             // launchPath: '',
             createOrderTimer: null,
-			keyboardClose:false,
+            keyboardClose: false
         };
     },
     computed: {
@@ -237,21 +244,21 @@ export default {
         //         this.payChannel = 'wx_lite';
         //     }
         // });
-		
-		this.$http.get('/sysConfig/get/gas_fee').then(res => {
-		    this.gas = res.value;
-		    return Promise.resolve();
-		});
-		this.$http.post('/payOrder/getSupportTradeType').then(res => {
-			console.log(res)
-		    //this.gas = res;
-		    this.payInfos = res;
-		    if (res) {
-		        this.payType = res[0].name;
-		    }
-		    console.log(res, 'res');
-		    //return Promise.resolve();
-		});
+
+        this.$http.get('/sysConfig/get/gas_fee').then(res => {
+            this.gas = res.value;
+            return Promise.resolve();
+        });
+        this.$http.post('/payOrder/getSupportTradeType').then(res => {
+            console.log(res);
+            //this.gas = res;
+            this.payInfos = res;
+            if (res) {
+                this.payType = res[0].name;
+            }
+            console.log(res, 'res');
+            //return Promise.resolve();
+        });
         this.$toast.loading({
             message: '加载中...',
             forbidClick: true
@@ -275,25 +282,25 @@ export default {
         this.bottom = this.$refs.bottom;
     },
     methods: {
-		getVal(val) {
-		    this.pay.password = val.pwd;
-		    this.pay.randomKey = val.randomKey;
-		    if (this.form.password) {
-		        this.$toast('已对密码进行加密处理');
-		    } else {
-		        this.$toast('密码加密失败，请重试');
-		    }
-		},
+        getVal(val) {
+            this.pay.password = val.pwd;
+            this.pay.randomKey = val.randomKey;
+            if (this.form.password) {
+                this.$toast('已对密码进行加密处理');
+            } else {
+                this.$toast('密码加密失败，请重试');
+            }
+        },
         getOrder(next = false) {
             this.$http.get('/order/get/' + this.orderId).then(res => {
                 this.info = res;
                 if (this.timer) {
                     clearTimeout(this.timer);
                 }
-				this.$router.replace('/submit?orderId=' + res.id);
-				this.$toast.clear();
-				// this.$router.replace('/orderDetail?id=' + res.id);
-				
+                this.$router.replace('/submit?orderId=' + res.id);
+                this.$toast.clear();
+                // this.$router.replace('/orderDetail?id=' + res.id);
+
                 // if (res.status === 'PROCESSING' || res.status === 'FINISH' || res.status === 'CANCELLED') {
                 //     this.$dialog
                 //         .alert({
@@ -316,31 +323,35 @@ export default {
                 // }
             });
         },
-		// 验证码隐藏的时候
-		bind(type) {
-			const that = this;
-			if(type == 'close'){//点击完成的时候关闭
-				this.$toast.loading(`验证中`);
-				this.keyboardClose = true;
-				this.$http.post('/walletLianlianpay/tradeConfirm', that.pay).then((res) => {
-					console.log(that.pay)
-					this.$toast.success(`操作成功`);
-					this.orderId = null; 
-					setTimeout(() => {
-						this.$router.replace('/orderDetail?id=' + that.pay.orderId);
-					}, 1000);
-				})
-				.catch(e => {
-					// this.orderId = null;
-					this.$toast(e.error);
-				});
-			}else{
-				if(!this.keyboardClose){//不是点击完成的时候关闭的
-					this.$toast('您已关闭验证码输入框')
-				}
-				this.keyboardClose = false;
-			}
-		},
+        // 验证码隐藏的时候
+        bind(type) {
+            const that = this;
+            if (type == 'close') {
+                //点击完成的时候关闭
+                this.$toast.loading(`验证中`);
+                this.keyboardClose = true;
+                this.$http
+                    .post('/walletLianlianpay/tradeConfirm', that.pay)
+                    .then(res => {
+                        console.log(that.pay);
+                        this.$toast.success(`操作成功`);
+                        this.orderId = null;
+                        setTimeout(() => {
+                            this.$router.replace('/orderDetail?id=' + that.pay.orderId);
+                        }, 1000);
+                    })
+                    .catch(e => {
+                        // this.orderId = null;
+                        this.$toast(e.error);
+                    });
+            } else {
+                if (!this.keyboardClose) {
+                    //不是点击完成的时候关闭的
+                    this.$toast('您已关闭验证码输入框');
+                }
+                this.keyboardClose = false;
+            }
+        },
         getCouponList() {
             this.$http
                 .post(
@@ -616,20 +627,19 @@ export default {
         background: linear-gradient(135deg, @prim 0%, @warn 100%);
         color: @btnText;
     }
-	/deep/ .sub-code{
-		display: flex;
-		justify-content: flex-end;
-		padding-right: 20px;
-		padding-bottom: 10px;
-		margin-top: -10px;
-		.van-button--plain.van-button--primary{
-			color: @warn;
-			font-size: @font2;
-		}
-		.van-button--disabled{
-			opacity: 1 !important;
-		}
-		
-	} 
+    /deep/ .sub-code {
+        display: flex;
+        justify-content: flex-end;
+        padding-right: 20px;
+        padding-bottom: 10px;
+        margin-top: -10px;
+        .van-button--plain.van-button--primary {
+            color: @warn;
+            font-size: @font2;
+        }
+        .van-button--disabled {
+            opacity: 1 !important;
+        }
+    }
 }
 </style>

src/views/Wallet/add.vue

@@ -22,7 +22,7 @@
                 <template #left-icon>
                     <van-icon :name="require('@/assets/yuanyu/icon-input-yonghuming.png')" />
                 </template>
-            </van-field> 
+            </van-field>
             <van-field
                 name="身份证号"
                 placeholder="请输入身份证号"
@@ -55,9 +55,9 @@
                     }
                 ]"
             >
-				<template #left-icon>
-				    <van-icon :name="require('@/assets/yuanyu/icon-input-shoujihao.png')" />
-				</template>
+                <template #left-icon>
+                    <van-icon :name="require('@/assets/yuanyu/icon-input-shoujihao.png')" />
+                </template>
             </van-field>
             <van-field
                 :label="label"
@@ -67,7 +67,7 @@
                 :rules="[{ required: true, message: '请输入选择正确的身份证证件有效结束日期' }]"
             >
                 <template #left-icon>
-					<van-icon name="underway-o" />
+                    <van-icon name="underway-o" />
                 </template>
                 <template #input>
                     <van-radio-group v-model="radio" direction="horizontal">
@@ -85,9 +85,9 @@
                 :maxlength="6"
                 :rules="[{ required: true, message: '请输入验证码' }]"
             >
-				<template #left-icon>
-				    <van-icon :name="require('@/assets/yuanyu/icon-input-yanzhengma.png')" />
-				</template>
+                <template #left-icon>
+                    <van-icon :name="require('@/assets/yuanyu/icon-input-yanzhengma.png')" />
+                </template>
                 <template #button>
                     <van-button
                         @click="sendPhone"
@@ -103,15 +103,7 @@
             </van-field>
 
             <div class="button">
-                <van-button
-                    round
-                    block
-                    native-type="submit"
-                    color="#035ce0"
-                    class="sure"
-                >
-                    下一步
-                </van-button>
+                <van-button round block native-type="submit" color="#035ce0" class="sure"> 下一步 </van-button>
             </div>
         </van-form>
         <van-popup v-model:show="show" position="bottom">
@@ -154,11 +146,11 @@ export default {
         };
     },
     mounted() {
-        this.checkBank().then((res) => {
-                this.info = res ? res[0] : {};
-                this.info.idEndDate = '9999-12-31';
-                this.info.phone = this.$store.state.userInfo.phone;
-                console.log(res, 'res');
+        this.checkBank().then(res => {
+            this.info = res ? res[0] : {};
+            this.info.idEndDate = '9999-12-31';
+            this.info.phone = this.$store.state.userInfo.phone;
+            console.log(res, 'res');
         });
 
         // this.upDataImgCode();
@@ -268,32 +260,32 @@ export default {
         .van-icon {
             // line-height: 42px;
             color: @text6;
-			font-size: 20px;
+            font-size: 20px;
         }
         .van-field__label {
             line-height: 40px;
         }
-		.van-radio__icon{
-			.van-icon{
-				font-size: 16px;
-				color: @text5;
-				border-color: @text5;
-			}
-		}
+        .van-radio__icon {
+            .van-icon {
+                font-size: 16px;
+                color: @text5;
+                border-color: @text5;
+            }
+        }
         .van-radio__icon--checked {
             .van-icon-success {
                 color: @bg;
-				background-color:@text5;
+                background-color: @text5;
             }
         }
         .van-field__left-icon {
             margin-right: 8px;
-			line-height: 44px;
+            line-height: 44px;
+        }
+        &::after {
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            left: 28px;
         }
-		&::after{
-			border-bottom: 1px solid rgba(255,255,255,.1);
-			left: 28px;
-		}
     }
 
     .van-cell + .van-cell {
@@ -303,10 +295,9 @@ export default {
         height: 44px;
         align-items: center;
     }
-	.van-field__label{
-		margin-right: 0;
-	}
-	
+    .van-field__label {
+        margin-right: 0;
+    }
 }
 .button {
     margin: 60px 30px;
@@ -321,7 +312,7 @@ export default {
 .sub-code {
     padding-right: 0;
     border-width: 0;
-	color: @text5;
+    color: @text5;
 }
 /deep/.van-checkbox__icon--checked .van-icon {
     background: linear-gradient(135deg, @prim 0%, @warn 100%);

src/views/Wallet/billDetails.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="wallet">
-     <div class="title">
-           <span>账单明细</span>
-          <!-- <van-popover v-model:show="showPopover" :actions="actions" theme="dark" @select="onSelect">
+        <div class="title">
+            <span>账单明细</span>
+            <!-- <van-popover v-model:show="showPopover" :actions="actions" theme="dark" @select="onSelect">
                 <template #reference>
                     <van-button
                         class="select"
@@ -15,47 +15,50 @@
                 </template>
             </van-popover> -->
         </div>
-		<van-sticky ref="top" :offset-top="bar.value.show ? 46 : 0">
-			<van-tabs v-model="active" @click="onClick">
-			    <van-tab title="全部"></van-tab>
-			    <van-tab name="RECHARGE" title="充值"></van-tab>
-			    <van-tab name="WITHDRAW" title="提现"></van-tab>
-			    <van-tab name="PAYMENT" title="支付"></van-tab>
-			    <van-tab name="REFUND" title="退款"></van-tab>
-			    <van-tab name="INCOME" title="收入"></van-tab>
-			</van-tabs>
-		</van-sticky>
-        
+        <van-sticky ref="top" :offset-top="bar.value.show ? 46 : 0">
+            <van-tabs v-model="active" @click="onClick">
+                <van-tab title="全部"></van-tab>
+                <van-tab name="RECHARGE" title="充值"></van-tab>
+                <van-tab name="WITHDRAW" title="提现"></van-tab>
+                <van-tab name="PAYMENT" title="支付"></van-tab>
+                <van-tab name="REFUND" title="退款"></van-tab>
+                <van-tab name="INCOME" title="收入"></van-tab>
+            </van-tabs>
+        </van-sticky>
 
         <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
             <div class="items" v-for="(item, index) in list" :key="index">
-				<div>
-					<div class="name">
-						{{ item.description }}
-						<span :class="`rank ${getClass(item.status)}`">{{ getStatus(item.status) }}</span>
-					</div>
-					<div class="list-sj">{{item.createdAt}}</div>
-				</div>
+                <div>
+                    <div class="name">
+                        {{ item.description }}
+                        <span :class="`rank ${getClass(item.status)}`">{{ getStatus(item.status) }}</span>
+                    </div>
+                    <div class="list-sj">{{ item.createdAt }}</div>
+                </div>
                 <div :class="item.amount > 0 ? 'amount FAILED' : 'amount SUCCESS'">{{ item.amount }}</div>
             </div>
-			 <van-empty v-if="empty" description="暂时没有任何记录哦~" :image="require('@assets/kong_png_wudingdan.png')" />
+            <van-empty
+                v-if="empty"
+                description="暂时没有任何记录哦~"
+                :image="require('@assets/kong_png_wudingdan.png')"
+            />
         </van-list>
     </div>
-</template>	
+</template>
 
 <script>
 import { Dialog } from 'vant';
 import list from '../../mixins/list';
 export default {
-	inject: ['bar'],
-	mixins: [list],
+    inject: ['bar'],
+    mixins: [list],
     data() {
         return {
             active: '',
             list: [],
             search: '',
-			url: '/walletLianlianpay/changeLogList',
-			empty: false,
+            url: '/walletLianlianpay/changeLogList',
+            empty: false
         };
     },
     computed: {
@@ -82,51 +85,50 @@ export default {
     },
     mounted() {
         // this.getAccount();
-		if (this.$route.query.active) {
-		    this.active = this.$route.query.active;
-		}
+        if (this.$route.query.active) {
+            this.active = this.$route.query.active;
+        }
     },
     methods: {
-		beforeData() {
-		    return {
-				search: this.search,
-				query: {
-				    changeType: this.active
-				}
-		    };
-		},
+        beforeData() {
+            return {
+                search: this.search,
+                query: {
+                    changeType: this.active
+                }
+            };
+        },
         async onClick(name) {
             this.active = name;
-			this.$router.replace({
-			    path: '/mineWalletBillDetails',
-			    query: {
-			        active: this.active,
-			    }
-			});
-			this.getData(true);
-        },
+            this.$router.replace({
+                path: '/mineWalletBillDetails',
+                query: {
+                    active: this.active
+                }
+            });
+            this.getData(true);
+        }
     }
 };
 </script>
 
 <style lang="less" scoped>
-.wallet{
-	background-color: @bg7;
+.wallet {
+    background-color: @bg7;
 }
-/deep/ .van-tabs{
-	.van-tab--active{
-		color: @text6 !important;
-	}
-	.van-tabs__line{
-		background-color:  @text6;
-	}
+/deep/ .van-tabs {
+    .van-tab--active {
+        color: @text6 !important;
+    }
+    .van-tabs__line {
+        background-color: @text6;
+    }
 }
 
-
 /deep/.van-list {
     padding: 0 10px;
     .items {
-		.flex2(1,7);
+        .flex2(1,7);
         height: 60px;
         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         opacity: 1;
@@ -140,31 +142,31 @@ export default {
             color: #ff4f50;
         }
         .list-sj {
-			opacity: .3;
-			font-size: 12px;
-			margin-top: 5px;
+            opacity: 0.3;
+            font-size: 12px;
+            margin-top: 5px;
         }
         .rank {
-			border-width: 1px;
-			border-radius: 4px;
-			border-style: solid;
-			line-height: 1.2;
-			padding:0 4px; 
-			margin-left: 10px;
-			font-size: 12px;
-			&.SUCCESS {
-			    color: @warn;
-			}
-			&.PENDING {
-			    color: @text3;
-			}
-			&.FAILED {
-			    color: #ff4f50;
-			}
+            border-width: 1px;
+            border-radius: 4px;
+            border-style: solid;
+            line-height: 1.2;
+            padding: 0 4px;
+            margin-left: 10px;
+            font-size: 12px;
+            &.SUCCESS {
+                color: @warn;
+            }
+            &.PENDING {
+                color: @text3;
+            }
+            &.FAILED {
+                color: #ff4f50;
+            }
         }
         .name {
             // flex-grow: 2;
-			.flex2(1);
+            .flex2(1);
         }
         .amount {
             font-size: 13px;

src/views/Wallet/create.vue

@@ -29,7 +29,7 @@
                 <van-password-input
                     :value="value"
                     :focused="isPwd"
-                    @focus="isPwd = true,showKeyboard = false"
+                    @focus="(isPwd = true), (showKeyboard = false)"
                     info="该密码为钱包的6位数支付密码"
                     :length="6"
                 />
@@ -48,7 +48,7 @@
                 <p>1、每笔提现需扣取1元手续费，实际到账金额请查看您绑定的银行卡</p>
                 <p>2、每笔最低提现金额为10元，请查看页面【可提现余额】该金额提现为实时到账，具体以您银行卡到账为准</p>
             </div>
-           <div class="button">
+            <div class="button">
                 <van-button
                     round
                     block
@@ -85,7 +85,7 @@
 <script>
 // import pwdInput from '../../components/pwdInput.vue';
 import phone from '../../mixins/phone';
-import { initOptions, getOutput,getRandom} from '../../pwd/passGuard';
+import { initOptions, getOutput, getRandom } from '../../pwd/passGuard';
 
 export default {
     mixins: [phone],
@@ -133,7 +133,7 @@ export default {
         }
     },
     methods: {
-		async submit() {
+        async submit() {
             if (this.rechargeAmount == '') {
                 this.$toast('请修改金额');
                 return;
@@ -144,10 +144,10 @@ export default {
             }
             const that = this;
             this.$toast.loading({
-				message: '加载中...',
-				forbidClick: true,
-			});
-			this.form.randomKey = await getRandom(this);
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.form.randomKey = await getRandom(this);
             const result = getOutput(this.value);
             const params = {
                 password: result,
@@ -181,7 +181,7 @@ export default {
         async create(type) {
             // await this.getRandom();
             const that = this;
-			// 充值
+            // 充值
             if (this.type == 'RECHARGE') {
                 if (this.rechargeAmount == '') {
                     this.$toast('金额不能为空');
@@ -191,10 +191,10 @@ export default {
                     rechargeAmount: this.rechargeAmount,
                     frontUrl: this.$route.path
                 };
-				this.$toast.loading({
-					message: '加载中...',
-					forbidClick: true,
-				});
+                this.$toast.loading({
+                    message: '加载中...',
+                    forbidClick: true
+                });
                 this.$http
                     .post(`/walletLianlianpay/createRecharge`, params, { body: 'json' })
                     .then(res => {
@@ -230,9 +230,10 @@ export default {
                     .catch(e => {
                         this.$toast(e.error);
                     });
-            }else{//提现
-				this.submit()
-			}
+            } else {
+                //提现
+                this.submit();
+            }
         },
         onCode() {
             console.log(this.form, 'this.form');

src/views/Wallet/edit.vue

@@ -51,7 +51,7 @@
 import { mapState } from 'vuex';
 // import pwdInput from '../../components/pwdInput.vue';
 import phone from '../../mixins/phone';
-import { initOptions, getOutput ,getRandom} from '../../pwd/passGuard';
+import { initOptions, getOutput, getRandom } from '../../pwd/passGuard';
 
 export default {
     mixins: [phone],
@@ -77,10 +77,10 @@ export default {
             show: false
         };
     },
-    mounted() { },
+    mounted() {},
     methods: {
-       async registerVerify() {
-			this.form.randomKey = await getRandom(this);
+        async registerVerify() {
+            this.form.randomKey = await getRandom(this);
             const result = getOutput(this.value);
             const params = {
                 ...this.form,

src/views/Wallet/index.vue

@@ -2,20 +2,21 @@
     <div class="wallet">
         <div class="top">
             <div class="boxs">
-				<div class="boxs-frist">
-					<div class="text1">
-						我的钱包
-						<van-icon :name="eye" @click="eye == 'eye-o'?eye = 'closed-eye': eye = 'eye-o'"/>
-					</div>
-					<div class="boxs-date">{{needRenew?'已到期':'至'+date}}</div>
-				</div>
-                
+                <div class="boxs-frist">
+                    <div class="text1">
+                        我的钱包
+                        <van-icon :name="eye" @click="eye == 'eye-o' ? (eye = 'closed-eye') : (eye = 'eye-o')" />
+                    </div>
+                    <div class="boxs-date">{{ needRenew ? '已到期' : '至' + date }}</div>
+                </div>
+
                 <div class="text2">
                     <!-- <img src="@assets/svgs/icon_jiage.svg" alt="" /> -->
-                    <span>{{eye == 'closed-eye'?'****': balance.totalBalance || '0.00'}}</span>
+                    <span>{{ eye == 'closed-eye' ? '****' : balance.totalBalance || '0.00' }}</span>
                 </div>
                 <div class="text1">
-                    可提现余额： <span class="FAILED">{{eye == 'closed-eye'?'****': balance.availableBalance || '0.00'}}</span>
+                    可提现余额：
+                    <span class="FAILED">{{ eye == 'closed-eye' ? '****' : balance.availableBalance || '0.00' }}</span>
                 </div>
                 <div class="btns">
                     <van-button @click="edit" plain round color="#0262f8" size="mini">提现</van-button>
@@ -23,25 +24,25 @@
                 </div>
             </div>
         </div>
-		
-		<div class="van-cell-list">
-		 <van-cell title="账单明细" is-link :to="{ path: '/mineWalletBillDetails' }">
-		 	<template #icon>
-		 		 <van-icon :name="require('@/assets/yuanyu/icon-zhangdan.png')" class="search-icon" />
-		 	</template>
-		 </van-cell>
-		 <van-cell title="续费管理" is-link :to="{ path: '/mineWalletRenew' }">
-		 	<template #icon>
-		 		 <van-icon :name="require('@/assets/yuanyu/icon-xufei.png')" class="search-icon" />
-		 	</template>  
-		 </van-cell>
-		 <van-cell title="支付密码" is-link :to="{ path: '/mineWalletReset' }">
-		 	<template #icon>
-		 		 <van-icon :name="require('@/assets/yuanyu/icon-zhifumima.png')" class="search-icon" />
-		 	</template>
-		 </van-cell>
-		 </div>
-      <!--  <div class="title">
+
+        <div class="van-cell-list">
+            <van-cell title="账单明细" is-link :to="{ path: '/mineWalletBillDetails' }">
+                <template #icon>
+                    <van-icon :name="require('@/assets/yuanyu/icon-zhangdan.png')" class="search-icon" />
+                </template>
+            </van-cell>
+            <van-cell title="续费管理" is-link :to="{ path: '/mineWalletRenew' }">
+                <template #icon>
+                    <van-icon :name="require('@/assets/yuanyu/icon-xufei.png')" class="search-icon" />
+                </template>
+            </van-cell>
+            <van-cell title="支付密码" is-link :to="{ path: '/mineWalletReset' }">
+                <template #icon>
+                    <van-icon :name="require('@/assets/yuanyu/icon-zhifumima.png')" class="search-icon" />
+                </template>
+            </van-cell>
+        </div>
+        <!--  <div class="title">
             <span>收入明细</span>
            <van-popover v-model:show="showPopover" :actions="actions" theme="dark" @select="onSelect">
                 <template #reference>
@@ -75,13 +76,12 @@
         <div class="list" v-if="!list"> 
             <van-empty :image="require('../../assets/yuanyu/icon_none_c.png')" description="暂时没有任何记录哦~" />
         </div> -->
-		
-		
+
         <van-popup class="popup-content" v-model:show="show" teleport="body" position="bottom">
             <div class="popup">
                 <van-icon class="cancel" @click="showSms = false" name="close" />
                 <!-- <div >取消</div> -->
-                <div class="title">输入验证码</div> 
+                <div class="title">输入验证码</div>
                 <div class="phone">已发送到您{{ phoneText }}的手机</div>
                 <van-password-input :value="form.code" :length="6" />
                 <!-- 数字键盘 -->
@@ -136,9 +136,9 @@ export default {
             search: '',
             loading: false,
             finished: false,
-			eye:'eye-o',
-			date:'',//到期时间
-			needRenew:false,//是否续费，true是 false否
+            eye: 'eye-o',
+            date: '', //到期时间
+            needRenew: false //是否续费，true是 false否
         };
     },
     computed: {
@@ -232,36 +232,37 @@ export default {
         getAccount() {
             this.$http.post('/walletLianlianpay/getAccount').then(res => {
                 this.balance = res.balance;
-				this.date = res.account.expireTime.substring(0,10);
-				this.needRenew = res.needRenew;//是否续费，true是 false否
+                this.date = res.account.expireTime.substring(0, 10);
+                this.needRenew = res.needRenew; //是否续费，true是 false否
                 const nowTime = new Date().getTime();
-                const expireTime = new Date(res.account.expireTime.replace(/-/g,"/")).getTime();
+                const expireTime = new Date(res.account.expireTime.replace(/-/g, '/')).getTime();
                 //时间差的毫秒数
                 var milliseconds = expireTime - nowTime;
                 //计算出相差天数
-                var days = milliseconds/(24*3600*1000);
-                if(localStorage.getItem('showWalletToast')){ 
-                	if(res.needRenew){//是否续费，true是 false否
-                		Dialog.confirm({
-                			title: '提示',
-                			message: `您的钱包已到期，是否前往续费`
-                		}).then(() => {
-                			this.$router.push({
-                				path: '/mineWalletRenew',
-                			});
-                		});
-                	}else if(days <= 2){
-                	   Dialog.confirm({
-                	   	title: '提示',
-                	   	message: `您的钱包权益即将到期请尽快完成续费`
-                	   }).then(() => {
-                	   	this.$router.push({
-                	   		path: '/mineWalletRenew',
-                	   	});
-                	   }); 
-                	}
+                var days = milliseconds / (24 * 3600 * 1000);
+                if (localStorage.getItem('showWalletToast')) {
+                    if (res.needRenew) {
+                        //是否续费，true是 false否
+                        Dialog.confirm({
+                            title: '提示',
+                            message: `您的钱包已到期，是否前往续费`
+                        }).then(() => {
+                            this.$router.push({
+                                path: '/mineWalletRenew'
+                            });
+                        });
+                    } else if (days <= 2) {
+                        Dialog.confirm({
+                            title: '提示',
+                            message: `您的钱包权益即将到期请尽快完成续费`
+                        }).then(() => {
+                            this.$router.push({
+                                path: '/mineWalletRenew'
+                            });
+                        });
+                    }
                 }
-                localStorage.setItem('showWalletToast','')
+                localStorage.setItem('showWalletToast', '');
             });
         },
         add() {
@@ -274,26 +275,25 @@ export default {
             });
         },
         edit() {
-			this.checkRenew(true,'请您续费钱包后可享受提现权益').then(()=>{
-				if (this.balance.availableBalance >= 10) {
-				    Dialog.confirm({
-				        title: '提示',
-				        message: `可提现余额为 ${this.balance.availableBalance} ，是否前往提现`
-				    }).then(() => {
-				        this.$router.push({
-				            path: '/mineWalletCreate',
-				            query: {
-				                type: 'WITHDRAW'
-				            }
-				        });
-				    });
-				} else {
-				    this.$toast(`可提现余额不足10元，无法提现`);
-				}
-			})
-            
+            this.checkRenew(true, '请您续费钱包后可享受提现权益').then(() => {
+                if (this.balance.availableBalance >= 10) {
+                    Dialog.confirm({
+                        title: '提示',
+                        message: `可提现余额为 ${this.balance.availableBalance} ，是否前往提现`
+                    }).then(() => {
+                        this.$router.push({
+                            path: '/mineWalletCreate',
+                            query: {
+                                type: 'WITHDRAW'
+                            }
+                        });
+                    });
+                } else {
+                    this.$toast(`可提现余额不足10元，无法提现`);
+                }
+            });
         },
-		// 创建提现
+        // 创建提现
         withdraw() {
             const params = {
                 withdrawAmount: this.rechargeAmount,
@@ -312,9 +312,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
-	.wallet{
-		background-color: @bg7;
-	}
+.wallet {
+    background-color: @bg7;
+}
 .Amountbox {
     width: 100vw;
     padding-bottom: 264px;
@@ -420,22 +420,21 @@ export default {
     .boxs {
         width: 100%;
         // background: linear-gradient(135deg, @prim 0%, @warn 100%);
-		background: url('../../assets/yuanyu/bg-qianbao.png');
-		background-size: 100% auto;
+        background: url('../../assets/yuanyu/bg-qianbao.png');
+        background-size: 100% auto;
         // border-radius: 2vw;
         padding: 23px;
         box-sizing: border-box;
-		color: @text0;
-		&-frist{
-			.flex2(1,7);
-			
-		}
-		&-date{
-			color: #939599;
-			font-size: 10px;
-		}
-    } 
-	
+        color: @text0;
+        &-frist {
+            .flex2(1,7);
+        }
+        &-date {
+            color: #939599;
+            font-size: 10px;
+        }
+    }
+
     .text1 {
         font-size: 13px;
         // color: #939599;
@@ -457,21 +456,21 @@ export default {
 
     .btns {
         margin-top: 15px;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
         .van-button {
-			flex: 1;
-			height: 37px;
-			border-radius: 6px;
-			// border:1px solid @border5;
+            flex: 1;
+            height: 37px;
+            border-radius: 6px;
+            // border:1px solid @border5;
             &.van-button--primary {
                 // border: solid 0px transparent;
                 padding: 1px;
                 // background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @prim, @warn);
                 // background-origin: border-box;
-				background-color: @border5;
-				color: @text0;
+                background-color: @border5;
+                color: @text0;
                 box-sizing: border-box;
                 background-clip: content-box, border-box;
             }
@@ -600,36 +599,35 @@ export default {
     }
 }
 
-
-.van-cell-list{
-	padding: 0;
-	background-color: @bg7;
-	/deep/ .van-cell{
-		padding:15px 18px;
-		align-items: center;
-		.van-icon__image,.search-icon{
-			.size(28px,28px);
-			border-radius: 10px;
-		}
-		&__title{
-			display: flex;
-			align-items: center;
-			margin-left: 10px;
-		}
-		&__right-icon{
-			font-weight: bold;
-			color: @text0;
-		}
-		&::after{
-			border-color: rgba(255, 255, 255, .3);
-			display: block;
-		}
-	}
-	.title{
-		padding: 0;
-		background:none;
-		margin-top: 20px;
-	}
+.van-cell-list {
+    padding: 0;
+    background-color: @bg7;
+    /deep/ .van-cell {
+        padding: 15px 18px;
+        align-items: center;
+        .van-icon__image,
+        .search-icon {
+            .size(28px,28px);
+            border-radius: 10px;
+        }
+        &__title {
+            display: flex;
+            align-items: center;
+            margin-left: 10px;
+        }
+        &__right-icon {
+            font-weight: bold;
+            color: @text0;
+        }
+        &::after {
+            border-color: rgba(255, 255, 255, 0.3);
+            display: block;
+        }
+    }
+    .title {
+        padding: 0;
+        background: none;
+        margin-top: 20px;
+    }
 }
-
 </style>

src/views/Wallet/open.vue

@@ -1,72 +1,72 @@
 <template>
     <div class="page">
-		<div class="top"></div>
-		<div class="content">
-			<div class="heard">
-				<div class="heard_num"><span class="heard_title">￥</span>{{manageCost}}</div>
-				<div class="heard_tips">开通钱包限时优惠</div>
-				<button class="sure" @click="submitBtn" :disabled="disabled">{{getButton?'确认并支付':'前往完善信息'}}</button>
-			</div> 
-			<div class="renew-details">
-				<div class="renew-box">
-					<div class="renew-details-title">
-						<img src="../../assets/yuanyu/icon-left.png" alt="">
-						<span>详细说明</span>
-						<img src="../../assets/yuanyu/icon-right.png" alt="">
-					</div>
-					<div v-html="detail"></div>
-				</div>
-			</div>
-		</div>
-		
-		<van-popup class="popup-content" v-model:show="showSms" teleport="body" position="bottom">
-		    <div class="popup">
-		        <van-icon class="cancel" @click="showSms = false" name="close" />
-		        <!-- <div >取消</div> -->
-		        <div class="title">输入验证码</div>
-		        <div class="phone">已发送到您{{ phoneText }}的手机</div>
-		        <van-password-input :value="code" :length="6" />
-				<div class="sub-code">
-					<van-button
-					    @click="payExecute"
-					    size="small"
-					    plain
-					    :disabled="isSend"
-					    type="primary"
-						:hide-on-click-outside="false"
-					>
-					{{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
-					</van-button>
-				</div>
-		        <!-- 数字键盘 -->
-		        <van-number-keyboard
-		            maxlength="6"
-		            theme="custom"
-		            v-model="code"
-		            :show="showSms"
-					 @hide="bind('hide')"
-		            close-button-text="完成" 
-					:hide-on-click-outside="false"
-					@close="bind('close')"
-		        />
-		    </div>
-		</van-popup>
+        <div class="top"></div>
+        <div class="content">
+            <div class="heard">
+                <div class="heard_num"><span class="heard_title">￥</span>{{ manageCost }}</div>
+                <div class="heard_tips">开通钱包限时优惠</div>
+                <button class="sure" @click="submitBtn" :disabled="disabled">
+                    {{ getButton ? '确认并支付' : '前往完善信息' }}
+                </button>
+            </div>
+            <div class="renew-details">
+                <div class="renew-box">
+                    <div class="renew-details-title">
+                        <img src="../../assets/yuanyu/icon-left.png" alt="" />
+                        <span>详细说明</span>
+                        <img src="../../assets/yuanyu/icon-right.png" alt="" />
+                    </div>
+                    <div v-html="detail"></div>
+                </div>
+            </div>
+        </div>
+
+        <van-popup class="popup-content" v-model:show="showSms" teleport="body" position="bottom">
+            <div class="popup">
+                <van-icon class="cancel" @click="showSms = false" name="close" />
+                <!-- <div >取消</div> -->
+                <div class="title">输入验证码</div>
+                <div class="phone">已发送到您{{ phoneText }}的手机</div>
+                <van-password-input :value="code" :length="6" />
+                <div class="sub-code">
+                    <van-button
+                        @click="payExecute"
+                        size="small"
+                        plain
+                        :disabled="isSend"
+                        type="primary"
+                        :hide-on-click-outside="false"
+                    >
+                        {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
+                    </van-button>
+                </div>
+                <!-- 数字键盘 -->
+                <van-number-keyboard
+                    maxlength="6"
+                    theme="custom"
+                    v-model="code"
+                    :show="showSms"
+                    @hide="bind('hide')"
+                    close-button-text="完成"
+                    :hide-on-click-outside="false"
+                    @close="bind('close')"
+                />
+            </div>
+        </van-popup>
     </div>
 </template>
- 
+
 <script>
 import verify from '@/mixins/verify_submit';
 export default {
-	name: 'integral',
-	inject: ['bar'],
-	mixins: [verify],
-	components: {
-	},
-	
+    name: 'integral',
+    inject: ['bar'],
+    mixins: [verify],
+    components: {},
+
     data() {
-        return { 
-			
-			detail:`
+        return {
+            detail: `
 			<h6>一、账户额度说明</h6>
 			<p>1、充值与提现10万/笔，20万/日，100万/月；</p>
 			<p>2、最小充值额度1元/笔，最小提现额度为10元/笔，提现手续费1元/笔；</p>
@@ -79,293 +79,299 @@ export default {
 			<p>4、关于收费失败：系统将在该服务周期结束后停止为您提供的部分服务，包括提现、支付。</p>
 			<p>5、关于关闭/开启续费：您可在收费周期前关闭续费。如果您已关闭钱包续费，我们会在有效期到期后自动停止对您提供的部分服务，包括提现、支付；您也可以随时重新开启钱包，我们会在收费完成后为您重新开启功能，提供每月的钱包服务，请在开启之前保证您的余额足以支付管理费。</p>
 			`,
-			account:'',
-			manageCost:0,//续费金额
-			needRenew:false,
-			showSms:false,
-			phoneText:'',
-			code:'',
-			keyboardClose:false,
-			disabled:false,
-			isPay:false,//是否已经支付
-		}
-	},
+            account: '',
+            manageCost: 0, //续费金额
+            needRenew: false,
+            showSms: false,
+            phoneText: '',
+            code: '',
+            keyboardClose: false,
+            disabled: false,
+            isPay: false //是否已经支付
+        };
+    },
     mounted() {
-		this.checkBank().then((res) => {
-			this.phoneText = res[0].phone.substr(0, 3) + '****' + res[0].phone.substr(-4, 4);
-		    this.$http.get('/user/myBankCard').then(res => {
-		        this.info = res ? res[0] : {};
-		        this.info.idEndDate = '9999-12-31';
-		        this.info.phone = this.$store.state.userInfo.phone;
-		        console.log(res, 'res');
-		    });
-		});
-		this.getAccount()
+        this.checkBank().then(res => {
+            this.phoneText = res[0].phone.substr(0, 3) + '****' + res[0].phone.substr(-4, 4);
+            this.$http.get('/user/myBankCard').then(res => {
+                this.info = res ? res[0] : {};
+                this.info.idEndDate = '9999-12-31';
+                this.info.phone = this.$store.state.userInfo.phone;
+                console.log(res, 'res');
+            });
+        });
+        this.getAccount();
+    },
+    computed: {
+        getButton() {
+            return this.needRenew || !this.isPay;
+        }
     },
-	computed: {
-	    getButton() {
-	        return this.needRenew || !this.isPay
-	    }
-	},
-	methods: {
-		// 获取账户信息
-		getAccount(){
-			this.$http.post('/walletLianlianpay/getAccount').then(res => {
-				this.manageCost = res.manageCost;
-				this.needRenew = res.needRenew;//是否续费，true是 false否
-			})
-		},
-		// 确认支付
-		submitBtn(){
-			this.disabled = true;
-			this.$toast.loading('加载中');
-			if(this.manageCost <= 0){
-				this.$toast.clear()
-				this.$router.replace('/mineWalletAdd');
-				return
-			}
-			//支付成功
-			this.api.success = ()=>{
-				this.showSms = false;
-				this.isSms = false;
-				this.$toast.clear()
-				this.$dialog.alert({
-					title: '温馨提示',
-					message: '您已完成支付',
-					theme: 'round-button',
-					confirmButtonText:'前往完善钱包信息'
-				}).then(() => { 
-					this.$http.post('/walletLianlianpay/getAccount').then(res => {
-						this.needRenew = res.needRenew;
-						if(res.needRenew){
-							this.$toast('支付已成功,系统处理中！请稍后再试');
-							return 
-						}else{
-							this.$router.replace('/mineWalletAdd');
-						}
-					})
-				}); 
-			}
-			if(this.needRenew || !this.isPay){ //需要续费 或 待支付
-				//创建订单
-				this.$http.post('/walletLianlianpay/createRenewOrder?tradeType=QUICK_PAY')
-					.then(res => {
-						this.$toast.clear();
-						this.pay.orderId = res.orderId;
-						this.pay.orderNo = res.orderNo;
-						this.pay.payAmt = res.payAmt;
-						this.pay.tradeType = 'QUICK_PAY';
-						this.disabled = false;
-						if (!this.isSend) {
-							// 发送验证码
-							this.payExecute();
-						} else { 
-							this.showSms = true;
-							this.isPwd = false;
-							this.isSms = true;
-						}
-					})
-					.catch(e => {
-						this.disabled = false;
-						this.$toast(e.error || '创建订单失败！请稍后再试');
-					});
-			}else{//已支付
-				this.disabled = false;
-				this.$toast.clear();
-				// 验证支付状态是否改变了
-				this.$http.post('/walletLianlianpay/getAccount').then(res => {
-					this.needRenew = res.needRenew;
-					if(res.needRenew){
-						this.$toast('支付已成功,系统处理中！请稍后再试');
-						return 
-					}else{
-						this.$router.replace('/mineWalletAdd');
-					}
-				})
-			}
-		},
-		// 验证码隐藏的时候
-		bind(type) {
-			this.disabled = false; 
-			if(type == 'close'){//点击完成的时候关闭
-				if(this.code.length < 6){
-					this.$toast('请输入完整验证码');
-					return
-				}
-				this.$toast.loading(`验证中`);
-				this.keyboardClose = true;
-				this.pay.verifyCode = this.code;
-				this.$http.post('/walletLianlianpay/tradeConfirm', this.pay).then((res) => {
-					this.isPay = true;//支付完成
-					// 确保支付到账
-					this.api.success();
-				})
-				.catch(e => {
-					// this.orderId = null;
-					this.$toast(e.error);
-				});
-			}else{
-				if(!this.keyboardClose){//不是点击完成的时候关闭的
-					this.$toast('您已关闭验证码输入框')
-				}
-				this.keyboardClose = false;
-			}
-		},
-	},
+    methods: {
+        // 获取账户信息
+        getAccount() {
+            this.$http.post('/walletLianlianpay/getAccount').then(res => {
+                this.manageCost = res.manageCost;
+                this.needRenew = res.needRenew; //是否续费，true是 false否
+            });
+        },
+        // 确认支付
+        submitBtn() {
+            this.disabled = true;
+            this.$toast.loading('加载中');
+            if (this.manageCost <= 0) {
+                this.$toast.clear();
+                this.$router.replace('/mineWalletAdd');
+                return;
+            }
+            //支付成功
+            this.api.success = () => {
+                this.showSms = false;
+                this.isSms = false;
+                this.$toast.clear();
+                this.$dialog
+                    .alert({
+                        title: '温馨提示',
+                        message: '您已完成支付',
+                        theme: 'round-button',
+                        confirmButtonText: '前往完善钱包信息'
+                    })
+                    .then(() => {
+                        this.$http.post('/walletLianlianpay/getAccount').then(res => {
+                            this.needRenew = res.needRenew;
+                            if (res.needRenew) {
+                                this.$toast('支付已成功,系统处理中！请稍后再试');
+                                return;
+                            } else {
+                                this.$router.replace('/mineWalletAdd');
+                            }
+                        });
+                    });
+            };
+            if (this.needRenew || !this.isPay) {
+                //需要续费 或 待支付
+                //创建订单
+                this.$http
+                    .post('/walletLianlianpay/createRenewOrder?tradeType=QUICK_PAY')
+                    .then(res => {
+                        this.$toast.clear();
+                        this.pay.orderId = res.orderId;
+                        this.pay.orderNo = res.orderNo;
+                        this.pay.payAmt = res.payAmt;
+                        this.pay.tradeType = 'QUICK_PAY';
+                        this.disabled = false;
+                        if (!this.isSend) {
+                            // 发送验证码
+                            this.payExecute();
+                        } else {
+                            this.showSms = true;
+                            this.isPwd = false;
+                            this.isSms = true;
+                        }
+                    })
+                    .catch(e => {
+                        this.disabled = false;
+                        this.$toast(e.error || '创建订单失败！请稍后再试');
+                    });
+            } else {
+                //已支付
+                this.disabled = false;
+                this.$toast.clear();
+                // 验证支付状态是否改变了
+                this.$http.post('/walletLianlianpay/getAccount').then(res => {
+                    this.needRenew = res.needRenew;
+                    if (res.needRenew) {
+                        this.$toast('支付已成功,系统处理中！请稍后再试');
+                        return;
+                    } else {
+                        this.$router.replace('/mineWalletAdd');
+                    }
+                });
+            }
+        },
+        // 验证码隐藏的时候
+        bind(type) {
+            this.disabled = false;
+            if (type == 'close') {
+                //点击完成的时候关闭
+                if (this.code.length < 6) {
+                    this.$toast('请输入完整验证码');
+                    return;
+                }
+                this.$toast.loading(`验证中`);
+                this.keyboardClose = true;
+                this.pay.verifyCode = this.code;
+                this.$http
+                    .post('/walletLianlianpay/tradeConfirm', this.pay)
+                    .then(res => {
+                        this.isPay = true; //支付完成
+                        // 确保支付到账
+                        this.api.success();
+                    })
+                    .catch(e => {
+                        // this.orderId = null;
+                        this.$toast(e.error);
+                    });
+            } else {
+                if (!this.keyboardClose) {
+                    //不是点击完成的时候关闭的
+                    this.$toast('您已关闭验证码输入框');
+                }
+                this.keyboardClose = false;
+            }
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
-	.page{
-		background-color: @bg8;
-		.top{
-			height: 120px;
-			background-color: @bg2
-		}
-		.content{
-			border-radius: 15px 15px 0 0;
-			margin-top: -15px;
-			padding: 16px;
-		}
-	}
-	/deep/ .renew-details{
-		padding: 0 0 30px;
-		margin-top: 15px;
-		.renew-box{
-			border: 1px solid @border5;
-			border-radius: 10px;
-			box-sizing: border-box;
-			padding:0 15px 15px;
-		}
-		&-title{
-			.flex2(1,1);
-			margin: 20px 0;
-			span{
-				margin: 0 10px;
-			}
-		}
-		.align-center {
-		    font-size: @font3;
-		    font-weight: bold;
-		    text-align: center;
-		    margin: 0;
-		    padding-bottom: 10px;
-		}
-		p {
-		    font-size: @font1;
-		    margin: 0;
-			line-height: 1.8;
-		}
-		
-		h4,
-		h5,
-		h6 {
-		    font-size: @font1;
-		    margin: 15px 0 10px;
-		}
-	} 
-	/deep/ .heard{
-		.flex();
-		width: 100%;
-		height: 165px;
-		margin: 0 auto -90px;
-		padding-top: 20px;
-		border-radius: 10px;
-		flex-direction: column;
-		justify-content: center;
-		color: #fff;
-		background: url('../../assets/yuanyu/bg-kaitong.png');
-		background-size: 100% 100%;
-		box-sizing: border-box;
-		transform: translateY(-90px);
-		&_title{
-			font-size: 16px;
-		}
-		&_num{
-			font-size: 34px;
-			font-weight: bold;
-			margin-bottom: 8px;
-		}
-		&_tips{
-			font-size: 14px;
-		}
-		.sure{
-			height: 30px;
-			border-radius: 25px;
-			color: #2670f2;
-			border: none;
-			padding: 0 30px;
-			margin-top: 15px;
-			font-weight: bold;
-		}
-	}
-	.detail{
-		color:@text2;
-		padding:15px 20px;
-	}
-	// 验证码弹框部分 
-	.popup {
-	    color: #000;
-	    position: relative;
-	    // width: calc(100vw - 66px);
-	    // padding-bottom: 20px;
-	    .title {
-	        text-align: center;
-	        font-size: @font3;
-	        padding: 10px 0;
-	        color: #333;
-	        width: 100%;
-	        display: block;
-	        text-align: center;
-	        border-bottom: 1px solid #c8c9cc;
-	    }
-	
-	    .cancel {
-	        position: absolute;
-	        font-size: 30px;
-	        color: #939599;
-	        padding: 10px;
-	        right: 0;
-	        top: 0;
-	    }
-	
-	    .phone {
-	        padding: 12px 0 20px;
-	        text-align: center;
-	        font-size: 12px;
-	        color: #aaabad;
-	        line-height: 24px;
-	    }
-	
-	    /deep/.van-password-input {
-	        margin: 0 20px;
-	        position: inherit;
-	        padding-bottom: 20px;
-	    }
-	    .van-number-keyboard {
-	        position: inherit;
-	        padding-bottom: 0px;
-	    }
-	    /deep/.van-key--blue {
-	        background: linear-gradient(135deg, @prim 0%, @warn 100%);
-	        color: @btnText;
-	    }
-		/deep/ .sub-code{
-			display: flex;
-			justify-content: flex-end;
-			padding-right: 20px;
-			padding-bottom: 10px;
-			margin-top: -10px;
-			.van-button--plain.van-button--primary{
-				color: @warn;
-				font-size: @font2;
-			}
-			.van-button--disabled{
-				opacity: 1 !important;
-			}
-			
-		} 
-	}
-	
-	
-</style>
+.page {
+    background-color: @bg8;
+    .top {
+        height: 120px;
+        background-color: @bg2;
+    }
+    .content {
+        border-radius: 15px 15px 0 0;
+        margin-top: -15px;
+        padding: 16px;
+    }
+}
+/deep/ .renew-details {
+    padding: 0 0 30px;
+    margin-top: 15px;
+    .renew-box {
+        border: 1px solid @border5;
+        border-radius: 10px;
+        box-sizing: border-box;
+        padding: 0 15px 15px;
+    }
+    &-title {
+        .flex2(1,1);
+        margin: 20px 0;
+        span {
+            margin: 0 10px;
+        }
+    }
+    .align-center {
+        font-size: @font3;
+        font-weight: bold;
+        text-align: center;
+        margin: 0;
+        padding-bottom: 10px;
+    }
+    p {
+        font-size: @font1;
+        margin: 0;
+        line-height: 1.8;
+    }
+
+    h4,
+    h5,
+    h6 {
+        font-size: @font1;
+        margin: 15px 0 10px;
+    }
+}
+/deep/ .heard {
+    .flex();
+    width: 100%;
+    height: 165px;
+    margin: 0 auto -90px;
+    padding-top: 20px;
+    border-radius: 10px;
+    flex-direction: column;
+    justify-content: center;
+    color: #fff;
+    background: url('../../assets/yuanyu/bg-kaitong.png');
+    background-size: 100% 100%;
+    box-sizing: border-box;
+    transform: translateY(-90px);
+    &_title {
+        font-size: 16px;
+    }
+    &_num {
+        font-size: 34px;
+        font-weight: bold;
+        margin-bottom: 8px;
+    }
+    &_tips {
+        font-size: 14px;
+    }
+    .sure {
+        height: 30px;
+        border-radius: 25px;
+        color: #2670f2;
+        border: none;
+        padding: 0 30px;
+        margin-top: 15px;
+        font-weight: bold;
+    }
+}
+.detail {
+    color: @text2;
+    padding: 15px 20px;
+}
+// 验证码弹框部分
+.popup {
+    color: #000;
+    position: relative;
+    // width: calc(100vw - 66px);
+    // padding-bottom: 20px;
+    .title {
+        text-align: center;
+        font-size: @font3;
+        padding: 10px 0;
+        color: #333;
+        width: 100%;
+        display: block;
+        text-align: center;
+        border-bottom: 1px solid #c8c9cc;
+    }
+
+    .cancel {
+        position: absolute;
+        font-size: 30px;
+        color: #939599;
+        padding: 10px;
+        right: 0;
+        top: 0;
+    }
+
+    .phone {
+        padding: 12px 0 20px;
+        text-align: center;
+        font-size: 12px;
+        color: #aaabad;
+        line-height: 24px;
+    }
+
+    /deep/.van-password-input {
+        margin: 0 20px;
+        position: inherit;
+        padding-bottom: 20px;
+    }
+    .van-number-keyboard {
+        position: inherit;
+        padding-bottom: 0px;
+    }
+    /deep/.van-key--blue {
+        background: linear-gradient(135deg, @prim 0%, @warn 100%);
+        color: @btnText;
+    }
+    /deep/ .sub-code {
+        display: flex;
+        justify-content: flex-end;
+        padding-right: 20px;
+        padding-bottom: 10px;
+        margin-top: -10px;
+        .van-button--plain.van-button--primary {
+            color: @warn;
+            font-size: @font2;
+        }
+        .van-button--disabled {
+            opacity: 1 !important;
+        }
+    }
+}
+</style>

src/views/Wallet/renew.vue

@@ -1,85 +1,88 @@
 <template>
     <div class="renew">
-		<div class="renew-top">
-			<div class="renew-top-frist">
-				<van-button plain type="primary" @click="submitBtn">续费</van-button>
-				<div class="renew-top-frist-price">
-					<div><span>{{manageCost}}</span>元/月</div>
-					<div class="renew-top-frist-date">有效期：{{ date ? date : '已过期'}}</div>
-				</div>	
-			</div>
-			<div class="renew-top-bottom">
-				<!-- (每月按10元自动续费，可随时取消) -->
-			</div>
-		</div>
-        
-		<div class="renew-center">
-			<div class="renew-center_top">
-				<img src="../../assets/yuanyu/icon-left.png" alt="">
-				<span>钱包权益</span>
-				<img src="../../assets/yuanyu/icon-right.png" alt="">
-			</div>
-			<van-grid class="menus" :border="false" >
-				<van-grid-item text="收款">
-					<template #icon>
-						<van-icon size="40" :name="require('@/assets/yuanyu/icon-xufei-shoukuan.png')"/>
-					</template>
-				</van-grid-item>
-				<van-grid-item text="充值">
-					<template #icon>
-						<van-icon size="40" :name="require('@/assets/yuanyu/icon-xufei-chongzhi.png')"/>
-					</template>
-				</van-grid-item>
-				<van-grid-item text="提现">
-					<template #icon>
-						<van-icon size="40" :name="require('@/assets/yuanyu/icon-xufei-tixian.png')"/>
-					</template>
-				</van-grid-item>
-				<van-grid-item text="支付">
-					<template #icon>
-						<van-icon size="40" :name="require('@/assets/yuanyu/icon-xufei-zhifu.png')"/>
-					</template>
-				</van-grid-item>
-			</van-grid>
-		</div>
-		
-		<div class="renew-details">
-			<div class="renew-details-title">详细说明</div>
-			<div v-html="detail"></div>
-			<div class="renew-details-html" v-html="detail2"></div>
-		</div>
-		<van-popup class="popup-content" v-model:show="showSms" teleport="body" position="bottom">
-		    <div class="popup">
-		        <van-icon class="cancel" @click="showSms = false" name="close" />
-		        <!-- <div >取消</div> -->
-		        <div class="title">输入验证码</div>
-		        <div class="phone">已发送到您{{ phoneText }}的手机</div>
-		        <van-password-input :value="code" :length="6" />
-				<div class="sub-code">
-					<van-button
-					    @click="payExecute"
-					    size="small"
-					    plain
-					    :disabled="isSend"
-					    type="primary"
-						:hide-on-click-outside="false"
-					>
-					{{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
-					</van-button>
-				</div>
-		        <!-- 数字键盘 -->
-		        <van-number-keyboard
-		            maxlength="6"
-		            theme="custom"
-		            v-model="code"
-		            :show="showSms"
-					 @hide="bind('hide')"
-		            close-button-text="完成" 
-					:hide-on-click-outside="false"
-					@close="bind('close')"
-		        />
-		    </div>
-		</van-popup>
+        <div class="renew-top">
+            <div class="renew-top-frist">
+                <van-button plain type="primary" @click="submitBtn">续费</van-button>
+                <div class="renew-top-frist-price">
+                    <div>
+                        <span>{{ manageCost }}</span
+                        >元/月
+                    </div>
+                    <div class="renew-top-frist-date">有效期：{{ date ? date : '已过期' }}</div>
+                </div>
+            </div>
+            <div class="renew-top-bottom">
+                <!-- (每月按10元自动续费，可随时取消) -->
+            </div>
+        </div>
+
+        <div class="renew-center">
+            <div class="renew-center_top">
+                <img src="../../assets/yuanyu/icon-left.png" alt="" />
+                <span>钱包权益</span>
+                <img src="../../assets/yuanyu/icon-right.png" alt="" />
+            </div>
+            <van-grid class="menus" :border="false">
+                <van-grid-item text="收款">
+                    <template #icon>
+                        <van-icon size="40" :name="require('@/assets/yuanyu/icon-xufei-shoukuan.png')" />
+                    </template>
+                </van-grid-item>
+                <van-grid-item text="充值">
+                    <template #icon>
+                        <van-icon size="40" :name="require('@/assets/yuanyu/icon-xufei-chongzhi.png')" />
+                    </template>
+                </van-grid-item>
+                <van-grid-item text="提现">
+                    <template #icon>
+                        <van-icon size="40" :name="require('@/assets/yuanyu/icon-xufei-tixian.png')" />
+                    </template>
+                </van-grid-item>
+                <van-grid-item text="支付">
+                    <template #icon>
+                        <van-icon size="40" :name="require('@/assets/yuanyu/icon-xufei-zhifu.png')" />
+                    </template>
+                </van-grid-item>
+            </van-grid>
+        </div>
+
+        <div class="renew-details">
+            <div class="renew-details-title">详细说明</div>
+            <div v-html="detail"></div>
+            <div class="renew-details-html" v-html="detail2"></div>
+        </div>
+        <van-popup class="popup-content" v-model:show="showSms" teleport="body" position="bottom">
+            <div class="popup">
+                <van-icon class="cancel" @click="showSms = false" name="close" />
+                <!-- <div >取消</div> -->
+                <div class="title">输入验证码</div>
+                <div class="phone">已发送到您{{ phoneText }}的手机</div>
+                <van-password-input :value="code" :length="6" />
+                <div class="sub-code">
+                    <van-button
+                        @click="payExecute"
+                        size="small"
+                        plain
+                        :disabled="isSend"
+                        type="primary"
+                        :hide-on-click-outside="false"
+                    >
+                        {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
+                    </van-button>
+                </div>
+                <!-- 数字键盘 -->
+                <van-number-keyboard
+                    maxlength="6"
+                    theme="custom"
+                    v-model="code"
+                    :show="showSms"
+                    @hide="bind('hide')"
+                    close-button-text="完成"
+                    :hide-on-click-outside="false"
+                    @close="bind('close')"
+                />
+            </div>
+        </van-popup>
     </div>
 </template>
 
@@ -87,12 +90,12 @@
 import { Dialog } from 'vant';
 import verify from '@/mixins/verify_submit';
 export default {
-	mixins: [verify],
+    mixins: [verify],
     computed: {},
     components: {},
     data() {
         return {
-			detail:`
+            detail: `
 				<h6>一、账户额度说明</h6>
 				<p>1、充值与提现10万/笔，20万/日，100万/月；</p>
 				<p>2、最小充值额度1元/笔，最小提现额度为10元/笔，提现手续费1元/笔；</p>
@@ -100,308 +103,307 @@ export default {
 				<p>4、开通后您支付无需受银行卡单笔、单日额度限制</p>
 				<h6>二、续费说明</h6>
 			`,
-			detail2:'',
-			state:'0', // 1 续费中 0 没有续费
-			date:'',//到期时间 
-			manageCost:'',//续费价格
-			needRenew:false,//是否续费，true是 false否
-			isPay:false,//是否已经支付
-			showSms:false,
-			phoneText:'',
-			code:'',
-			keyboardClose:false,
-			disabled:false,
-		}; 
+            detail2: '',
+            state: '0', // 1 续费中 0 没有续费
+            date: '', //到期时间
+            manageCost: '', //续费价格
+            needRenew: false, //是否续费，true是 false否
+            isPay: false, //是否已经支付
+            showSms: false,
+            phoneText: '',
+            code: '',
+            keyboardClose: false,
+            disabled: false
+        };
     },
     mounted() {
-       this.getAccount();
-	   this.$http.get(`/walletRenewInfo.html`).then(res => {
-	       this.detail2 = res; 
-	   });
+        this.getAccount();
+        this.$http.get(`/walletRenewInfo.html`).then(res => {
+            this.detail2 = res;
+        });
     },
     methods: {
-		// 获取账户信息
-		getAccount(){
-			this.$http.post('/walletLianlianpay/getAccount').then(res => {
-				this.manageCost = res.manageCost;
-				this.needRenew = res.needRenew;//是否续费，true是 false否
-				this.date = res.account.expireTime.substring(0,10);
-			})
-		},
+        // 获取账户信息
+        getAccount() {
+            this.$http.post('/walletLianlianpay/getAccount').then(res => {
+                this.manageCost = res.manageCost;
+                this.needRenew = res.needRenew; //是否续费，true是 false否
+                this.date = res.account.expireTime.substring(0, 10);
+            });
+        },
         renew() {
-			// if(this.state == '0'){
-			// 	Dialog.confirm({
-			// 	    title: '开通续费',
-			// 	     message: '开通后将每月自动收取您的管理费'
-			// 	}).then(() => {
-			// 	    //确认开通
-			// 		this.state = '1' 
-			// 	});
-			// }
+            // if(this.state == '0'){
+            // 	Dialog.confirm({
+            // 	    title: '开通续费',
+            // 	     message: '开通后将每月自动收取您的管理费'
+            // 	}).then(() => {
+            // 	    //确认开通
+            // 		this.state = '1'
+            // 	});
+            // }
+        },
+
+        // 确认支付
+        submitBtn() {
+            this.disabled = true;
+            this.$toast.loading('加载中');
+
+            this.api.success = toast => {
+                this.showSms = false;
+                this.isSms = false;
+                this.$toast(toast);
+
+                // this.$dialog.alert({
+                // 	title: '温馨提示',
+                // 	message: '您已完成支付,系统处理中',
+                // 	theme: 'round-button',
+                // 	confirmButtonText:'前往完善钱包信息'
+                // }).then(() => {
+                // 	this.$http.post('/walletLianlianpay/getAccount').then(res => {
+                // 		this.needRenew = res.needRenew;
+                // 		if(res.needRenew){
+                // 			this.$toast('支付已成功,系统处理中！请稍后再试');
+                // 			return
+                // 		}else{
+                // 			this.$router.replace('/mineWalletAdd');
+                // 		}
+                // 	})
+                // });
+            };
+            //创建订单
+            this.$http
+                .post('/walletLianlianpay/createRenewOrder?tradeType=QUICK_PAY')
+                .then(res => {
+                    this.$toast.clear();
+                    this.pay.orderId = res.orderId;
+                    this.pay.orderNo = res.orderNo;
+                    this.pay.payAmt = res.payAmt;
+                    this.pay.tradeType = 'QUICK_PAY';
+                    this.disabled = false;
+                    if (!this.isSend) {
+                        // 发送验证码
+                        this.payExecute();
+                    } else {
+                        this.showSms = true;
+                        this.isPwd = false;
+                        this.isSms = true;
+                    }
+                })
+                .catch(e => {
+                    this.disabled = false;
+                    this.$toast(e.error || '创建订单失败！请稍后再试');
+                });
         },
-		
-		// 确认支付
-		submitBtn(){
-			this.disabled = true;
-			this.$toast.loading('加载中');
-			
-			this.api.success = (toast)=>{
-				this.showSms = false;
-				this.isSms = false;
-				this.$toast(toast);
-				
-				
-				
-				// this.$dialog.alert({
-				// 	title: '温馨提示',
-				// 	message: '您已完成支付,系统处理中',
-				// 	theme: 'round-button',
-				// 	confirmButtonText:'前往完善钱包信息'
-				// }).then(() => { 
-				// 	this.$http.post('/walletLianlianpay/getAccount').then(res => {
-				// 		this.needRenew = res.needRenew;
-				// 		if(res.needRenew){
-				// 			this.$toast('支付已成功,系统处理中！请稍后再试');
-				// 			return 
-				// 		}else{
-				// 			this.$router.replace('/mineWalletAdd');
-				// 		}
-				// 	})
-				// }); 
-			}
-				//创建订单
-				this.$http.post('/walletLianlianpay/createRenewOrder?tradeType=QUICK_PAY')
-					.then(res => {
-						this.$toast.clear();
-						this.pay.orderId = res.orderId;
-						this.pay.orderNo = res.orderNo;
-						this.pay.payAmt = res.payAmt;
-						this.pay.tradeType = 'QUICK_PAY';
-						this.disabled = false;
-						if (!this.isSend) {
-							// 发送验证码
-							this.payExecute();
-						} else { 
-							this.showSms = true;
-							this.isPwd = false;
-							this.isSms = true;
-						}
-					})
-					.catch(e => {
-						this.disabled = false;
-						this.$toast(e.error || '创建订单失败！请稍后再试');
-					});
-		},
-		// 验证码隐藏的时候
-		bind(type) {
-			this.disabled = false; 
-			if(type == 'close'){//点击完成的时候关闭
-				if(this.code.length < 6){
-					this.$toast('请输入完整验证码');
-					return
-				}
-				this.$toast.loading(`验证中`);
-				this.keyboardClose = true;
-				this.pay.verifyCode = this.code;
-				this.$http.post('/walletLianlianpay/tradeConfirm', this.pay).then((res) => {
-					this.isPay = true;//支付完成
-					// 确保支付到账
-					this.api.success('已成功支付,系统处理中!');
-					setTimeout(()=>{
-						// this.getAccount();
-						this.$router.go(-1);
-					},1000)
-				})
-				.catch(e => {
-					this.$toast(e.error);
-				});
-			}else{
-				if(!this.keyboardClose){//不是点击完成的时候关闭的
-					this.$toast('您已关闭验证码输入框')
-				}
-				this.keyboardClose = false;
-			}
-		},
-		
-		
+        // 验证码隐藏的时候
+        bind(type) {
+            this.disabled = false;
+            if (type == 'close') {
+                //点击完成的时候关闭
+                if (this.code.length < 6) {
+                    this.$toast('请输入完整验证码');
+                    return;
+                }
+                this.$toast.loading(`验证中`);
+                this.keyboardClose = true;
+                this.pay.verifyCode = this.code;
+                this.$http
+                    .post('/walletLianlianpay/tradeConfirm', this.pay)
+                    .then(res => {
+                        this.isPay = true; //支付完成
+                        // 确保支付到账
+                        this.api.success('已成功支付,系统处理中!');
+                        setTimeout(() => {
+                            // this.getAccount();
+                            this.$router.go(-1);
+                        }, 1000);
+                    })
+                    .catch(e => {
+                        this.$toast(e.error);
+                    });
+            } else {
+                if (!this.keyboardClose) {
+                    //不是点击完成的时候关闭的
+                    this.$toast('您已关闭验证码输入框');
+                }
+                this.keyboardClose = false;
+            }
+        }
     }
 };
 </script>
 
 <style lang="less" scoped>
-	.renew {
-		background-color: @bg8;
-		padding-top: 10px;
-	}
-	/deep/ .renew-top{
-		&-frist{
-			width: calc(100vw - 30px);
-			height: 121px;
-			margin: 0 auto;
-			position: relative;
-			background: url(../../assets/yuanyu/bg-xufei.png);
-			background-size: 100% 100%;
-			text-align: center;
-			.flex2(1,1);
-			.van-button{
-				.position(absolute,10px,10px);
-				color: @text0;
-				border:1px solid @text0;
-				height: 24px;
-				border-radius: 15px;
-				padding: 0 8px;
-				font-size: 12px;
-			}
-			&-price{
-				font-size: @font1;
-				span{
-					font-size: 30px;
-				}
-			}
-			&-date{
-				font-size: @font0;
-				margin: 2px 0 10px;
-			}
-		}
-		&-bottom{
-			height: 89px;
-			background: url(../../assets/yuanyu/bg-xufei-top.png) no-repeat;
-			background-size: 100% 100%;
-			text-align: center;
-			margin-top: -50px;
-			position: relative;
-			z-index: 1;
-			padding-top: 50px;
-			box-sizing: border-box;
-			font-size: @font0;
-		}
-	}
-	/deep/ .renew-center{
-		border-radius: 16px;
-		border: 1px solid @text6;
-		width: calc(100vw - 30px);
-		margin: 20px auto;
-		padding: 20px 0 10px;
-		box-sizing: border-box;
-		.renew-center_top{
-			text-align: center;
-			margin-bottom: 5px;
-			span{
-				margin: 0 10px;
-				font-size: @font1;
-			}
-		}
-		.van-grid-item__text{
-			color: #fff;
-			font-size: @font1;
-			margin-top: 2px;
-		}
-	}  
-	/deep/ .renew-details{
-		padding: 0 15px 30px;
-		&-title{
-			color: @text6; 
-			.flex2(1,1);
-			margin: 20px 0;
-			&::after{
-				content: '';
-				width: 50px;
-				height: 1px;
-				background:linear-gradient(to left, rgba(255,255,255,0), @text6);
-				margin-left: 10px;
-			}
-			&::before{
-				content: '';
-				width: 50px;
-				height: 1px;
-				background:linear-gradient(to right, rgba(255,255,255,0), @text6);
-				margin-right: 10px;
-			}
-		}
-		.align-center {
-		    font-size: @font3;
-		    font-weight: bold;
-		    text-align: center;
-		    margin: 0;
-		    padding-bottom: 10px;
-		}
-		p {
-		    font-size: @font1;
-		    margin: 0;
-		    color: @text0;
-			line-height: 1.8;
-		}
-		
-		h4,
-		h5,
-		h6 {
-		    font-size: @font1;
-		    margin: 15px 0 10px;
-			color: @text6;
-		}
-	} 
-	// 验证码弹框部分
-	.popup {
-	    color: #000;
-	    position: relative;
-	    // width: calc(100vw - 66px);
-	    // padding-bottom: 20px;
-	    .title {
-	        text-align: center;
-	        font-size: @font3;
-	        padding: 10px 0;
-	        color: #333;
-	        width: 100%;
-	        display: block;
-	        text-align: center;
-	        border-bottom: 1px solid #c8c9cc;
-	    }
-	
-	    .cancel {
-	        position: absolute;
-	        font-size: 30px;
-	        color: #939599;
-	        padding: 10px;
-	        right: 0;
-	        top: 0;
-	    }
-	
-	    .phone {
-	        padding: 12px 0 20px;
-	        text-align: center;
-	        font-size: 12px;
-	        color: #aaabad;
-	        line-height: 24px;
-	    }
-	
-	    /deep/.van-password-input {
-	        margin: 0 20px;
-	        position: inherit;
-	        padding-bottom: 20px;
-	    }
-	    .van-number-keyboard {
-	        position: inherit;
-	        padding-bottom: 0px;
-	    }
-	    /deep/.van-key--blue {
-	        background: linear-gradient(135deg, @prim 0%, @warn 100%);
-	        color: @btnText;
-	    }
-		/deep/ .sub-code{
-			display: flex;
-			justify-content: flex-end;
-			padding-right: 20px;
-			padding-bottom: 10px;
-			margin-top: -10px;
-			.van-button--plain.van-button--primary{
-				color: @warn;
-				font-size: @font2;
-			}
-			.van-button--disabled{
-				opacity: 1 !important;
-			}
-			
-		} 
-	}
-	
+.renew {
+    background-color: @bg8;
+    padding-top: 10px;
+}
+/deep/ .renew-top {
+    &-frist {
+        width: calc(100vw - 30px);
+        height: 121px;
+        margin: 0 auto;
+        position: relative;
+        background: url(../../assets/yuanyu/bg-xufei.png);
+        background-size: 100% 100%;
+        text-align: center;
+        .flex2(1,1);
+        .van-button {
+            .position(absolute,10px,10px);
+            color: @text0;
+            border: 1px solid @text0;
+            height: 24px;
+            border-radius: 15px;
+            padding: 0 8px;
+            font-size: 12px;
+        }
+        &-price {
+            font-size: @font1;
+            span {
+                font-size: 30px;
+            }
+        }
+        &-date {
+            font-size: @font0;
+            margin: 2px 0 10px;
+        }
+    }
+    &-bottom {
+        height: 89px;
+        background: url(../../assets/yuanyu/bg-xufei-top.png) no-repeat;
+        background-size: 100% 100%;
+        text-align: center;
+        margin-top: -50px;
+        position: relative;
+        z-index: 1;
+        padding-top: 50px;
+        box-sizing: border-box;
+        font-size: @font0;
+    }
+}
+/deep/ .renew-center {
+    border-radius: 16px;
+    border: 1px solid @text6;
+    width: calc(100vw - 30px);
+    margin: 20px auto;
+    padding: 20px 0 10px;
+    box-sizing: border-box;
+    .renew-center_top {
+        text-align: center;
+        margin-bottom: 5px;
+        span {
+            margin: 0 10px;
+            font-size: @font1;
+        }
+    }
+    .van-grid-item__text {
+        color: #fff;
+        font-size: @font1;
+        margin-top: 2px;
+    }
+}
+/deep/ .renew-details {
+    padding: 0 15px 30px;
+    &-title {
+        color: @text6;
+        .flex2(1,1);
+        margin: 20px 0;
+        &::after {
+            content: '';
+            width: 50px;
+            height: 1px;
+            background: linear-gradient(to left, rgba(255, 255, 255, 0), @text6);
+            margin-left: 10px;
+        }
+        &::before {
+            content: '';
+            width: 50px;
+            height: 1px;
+            background: linear-gradient(to right, rgba(255, 255, 255, 0), @text6);
+            margin-right: 10px;
+        }
+    }
+    .align-center {
+        font-size: @font3;
+        font-weight: bold;
+        text-align: center;
+        margin: 0;
+        padding-bottom: 10px;
+    }
+    p {
+        font-size: @font1;
+        margin: 0;
+        color: @text0;
+        line-height: 1.8;
+    }
+
+    h4,
+    h5,
+    h6 {
+        font-size: @font1;
+        margin: 15px 0 10px;
+        color: @text6;
+    }
+}
+// 验证码弹框部分
+.popup {
+    color: #000;
+    position: relative;
+    // width: calc(100vw - 66px);
+    // padding-bottom: 20px;
+    .title {
+        text-align: center;
+        font-size: @font3;
+        padding: 10px 0;
+        color: #333;
+        width: 100%;
+        display: block;
+        text-align: center;
+        border-bottom: 1px solid #c8c9cc;
+    }
+
+    .cancel {
+        position: absolute;
+        font-size: 30px;
+        color: #939599;
+        padding: 10px;
+        right: 0;
+        top: 0;
+    }
+
+    .phone {
+        padding: 12px 0 20px;
+        text-align: center;
+        font-size: 12px;
+        color: #aaabad;
+        line-height: 24px;
+    }
+
+    /deep/.van-password-input {
+        margin: 0 20px;
+        position: inherit;
+        padding-bottom: 20px;
+    }
+    .van-number-keyboard {
+        position: inherit;
+        padding-bottom: 0px;
+    }
+    /deep/.van-key--blue {
+        background: linear-gradient(135deg, @prim 0%, @warn 100%);
+        color: @btnText;
+    }
+    /deep/ .sub-code {
+        display: flex;
+        justify-content: flex-end;
+        padding-right: 20px;
+        padding-bottom: 10px;
+        margin-top: -10px;
+        .van-button--plain.van-button--primary {
+            color: @warn;
+            font-size: @font2;
+        }
+        .van-button--disabled {
+            opacity: 1 !important;
+        }
+    }
+}
 </style>

src/views/Wallet/reset.vue

@@ -59,7 +59,7 @@
 import { mapState } from 'vuex';
 //import pwdInput from '../../components/pwdInput.vue';
 import phone from '../../mixins/phone';
-import { initOptions, getOutput,getRandom} from '../../pwd/passGuard';
+import { initOptions, getOutput, getRandom } from '../../pwd/passGuard';
 
 export default {
     mixins: [phone],
@@ -87,11 +87,10 @@ export default {
             isEdit: true
         };
     },
-    created() {
-    },
+    created() {},
     methods: {
         async submit() {
-			this.form.randomKey = await getRandom(this); 
+            this.form.randomKey = await getRandom(this);
             const result = getOutput(this.value);
             const params = {
                 ...this.form,
@@ -126,7 +125,7 @@ export default {
                     document.body.removeEventListener('touchmove', this.preDev, { passive: false });
                 })
                 .catch(e => {
-					console.log("11111")
+                    console.log('11111');
                     this.$toast(e.error);
                     // this.onRefresh();
                     this.setTime(0);

src/views/account/About.vue

@@ -7,7 +7,7 @@
 
         <van-overlay :show="show" @click="show = false">
             <div class="code-img" @click.stop>
-                <van-image lazy-load  class="code" width="70vw" :src="codeImg" fit="scale-down" />
+                <van-image lazy-load class="code" width="70vw" :src="codeImg" fit="scale-down" />
             </div>
         </van-overlay>
     </div>

src/views/account/Authentication.vue

@@ -48,7 +48,7 @@ export default {
                     img: require(`@assets/renzheng-icon-geren.png`),
                     imgPre: require(`@assets/renzheng-icon-geren-pre.png`),
                     title: '个人认证'
-                },
+                }
                 // {
                 //     img: require(`@assets/renzheng-icon-qiye.png`),
                 //     imgPre: require(`@assets/renzheng-icon-qiye-pre.png`),

src/views/account/Connect.vue

@@ -2,7 +2,7 @@
     <div class="page">
         <div class="title">联系客服</div>
 
-        <van-image lazy-load  class="code" width="calc(100vw - 32px)" :src="codeImg" fit="scale-down" />
+        <van-image lazy-load class="code" width="calc(100vw - 32px)" :src="codeImg" fit="scale-down" />
     </div>
 </template>
 

src/views/account/Login.vue

@@ -255,7 +255,7 @@ export default {
 
     .van-button {
         font-weight: bold;
-		color: #fff;
+        color: #fff;
     }
 }
 

src/views/account/Security.vue

@@ -5,7 +5,7 @@
             <van-cell title="修改登录密码" :to="{ path: '/forget' }" is-link />
             <van-cell title="修改支付密码" :to="{ path: '/tradingPassword' }" is-link />
             <van-cell title="修改钱包支付密码" :to="{ path: '/mineWalletReset' }" is-link />
-			<van-cell title="修改手机号" :to="{ path: '/changePhone' }" is-link />
+            <van-cell title="修改手机号" :to="{ path: '/changePhone' }" is-link />
         </van-cell-group>
         <div class="logout">
             <van-button type="primary" @click="logout" plain block round>退出登录</van-button>

src/views/account/Setting.vue

@@ -5,7 +5,8 @@
         <van-cell-group>
             <van-cell title="头像" is-link>
                 <template #value>
-                    <van-image lazy-load 
+                    <van-image
+                        lazy-load
                         round
                         width="36"
                         height="36"

src/views/account/TradingPassword.vue

@@ -1,82 +1,86 @@
 <template>
-  <div class="login">
-    <div class="tabs">
-      <div class="tab active">修改交易密码</div>
-      <div class="text">修改验证当前账号的手机号码才可以修改</div>
-    </div>
+    <div class="login">
+        <div class="tabs">
+            <div class="tab active">修改交易密码</div>
+            <div class="text">修改验证当前账号的手机号码才可以修改</div>
+        </div>
 
-    <van-form v-if="step === 0"
-              @submit="next">
-      <van-cell class="phone"
-                :title="phone"
-                label="修改交易密码需先验证当前手机号" />
-      <van-field type="digit"
-                 name="验证码"
-                 placeholder="请输入验证码"
-                 v-model="form.code"
-                 :maxlength="4"
-                 :rules="[{ required: true, message: '请输入验证码' }]">
-        <template #left-icon>
-          <img v-lazy="require('@assets/svgs/login_icon_code.svg')"
-               class="icon" />
-        </template>
-        <template #button>
-          <van-button @click="sendBefPhone"
-                      class="sub-code"
-                      size="small"
-                      plain
-                      type="primary"
-                      :disabled="isSend">
-            {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
-          </van-button>
-        </template>
-      </van-field>
+        <van-form v-if="step === 0" @submit="next">
+            <van-cell class="phone" :title="phone" label="修改交易密码需先验证当前手机号" />
+            <van-field
+                type="digit"
+                name="验证码"
+                placeholder="请输入验证码"
+                v-model="form.code"
+                :maxlength="4"
+                :rules="[{ required: true, message: '请输入验证码' }]"
+            >
+                <template #left-icon>
+                    <img v-lazy="require('@assets/svgs/login_icon_code.svg')" class="icon" />
+                </template>
+                <template #button>
+                    <van-button
+                        @click="sendBefPhone"
+                        class="sub-code"
+                        size="small"
+                        plain
+                        type="primary"
+                        :disabled="isSend"
+                    >
+                        {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
+                    </van-button>
+                </template>
+            </van-field>
 
-      <div class="button">
-        <van-button round
+            <div class="button">
+                <van-button
+                    round
                     block
                     native-type="submit"
                     :color="`linear-gradient(to right, ${$colors.prim}, ${$colors.warn})`"
-                    class="sure">下一步</van-button>
-      </div>
-    </van-form>
+                    class="sure"
+                    >下一步</van-button
+                >
+            </div>
+        </van-form>
 
-    <van-form v-else
-              ref="form"
-              @submit="submit">
-      <div class="input">
-        <div class="text1">请输入交易密码</div>
-        <van-password-input :value="password"
-                            :focused="showKeyboard"
-                            @focus="showKeyboard = true" />
-        <!-- 数字键盘 -->
-        <van-number-keyboard v-model="password"
-                             :show="showKeyboard"
-                             @blur="showKeyboard = false"
-                             maxlength="6" />
-      </div>
+        <van-form v-else ref="form" @submit="submit">
+            <div class="input">
+                <div class="text1">请输入交易密码</div>
+                <van-password-input :value="password" :focused="showKeyboard" @focus="showKeyboard = true" />
+                <!-- 数字键盘 -->
+                <van-number-keyboard
+                    v-model="password"
+                    :show="showKeyboard"
+                    @blur="showKeyboard = false"
+                    maxlength="6"
+                />
+            </div>
 
-      <div class="input">
-        <div class="text1">请再次输入交易密码</div>
-        <van-password-input :value="password2"
-                            :focused="showKeyboard2"
-                            @focus="showKeyboard2 = true" />
-        <!-- 数字键盘 -->
-        <van-number-keyboard v-model="password2"
-                             :show="showKeyboard2"
-                             @blur="showKeyboard2 = false"
-                             maxlength="6" />
-      </div>
+            <div class="input">
+                <div class="text1">请再次输入交易密码</div>
+                <van-password-input :value="password2" :focused="showKeyboard2" @focus="showKeyboard2 = true" />
+                <!-- 数字键盘 -->
+                <van-number-keyboard
+                    v-model="password2"
+                    :show="showKeyboard2"
+                    @blur="showKeyboard2 = false"
+                    maxlength="6"
+                />
+            </div>
 
-      <div class="button">
-        <van-button round
+            <div class="button">
+                <van-button
+                    round
                     block
                     native-type="submit"
                     :color="`linear-gradient(to right, ${$colors.prim}, ${$colors.warn})`"
-                    class="sure">确定修改</van-button>
-      </div>
-    </van-form>
-  </div>
+                    class="sure"
+                    >确定修改</van-button
+                >
+            </div>
+        </van-form>
+    </div>
 </template>
 
 <script>

src/views/account/Verified.vue

@@ -61,13 +61,13 @@
                         pattern: IDPattern,
                         message: '身份证号格式错误'
                     },
-					{
-					    validator: val => {
-							const year = new Date().getFullYear();
-							return year - this.form.idNo.substring(6,10) > 17
-					    },
-					    message: '未成年人无法验证通过'
-					}
+                    {
+                        validator: val => {
+                            const year = new Date().getFullYear();
+                            return year - this.form.idNo.substring(6, 10) > 17;
+                        },
+                        message: '未成年人无法验证通过'
+                    }
                 ]"
             >
             </van-field>
@@ -180,14 +180,14 @@ export default {
                             this.$toast.clear();
                             this.$router.replace('/Waiting');
                         })
-                        .catch((e) => {
+                        .catch(e => {
                             this.$toast.clear();
-							this.$toast(e.err);
+                            this.$toast(e.err);
                         });
                 })
-                .catch((e) => {
+                .catch(e => {
                     this.Bs.value.refresh();
-					this.$toast(e.err);
+                    this.$toast(e.err);
                 });
         },
         afterRead(file, e) {

src/views/account/VerifiedSucs.vue

@@ -49,7 +49,12 @@
             >
                 <template #input>
                     <div class="img-content">
-                        <van-image lazy-load  :src="form.idFront || require('@assets/svgs/bg-png.svg')" fit="cover" radius="20" />
+                        <van-image
+                            lazy-load
+                            :src="form.idFront || require('@assets/svgs/bg-png.svg')"
+                            fit="cover"
+                            radius="20"
+                        />
                         <van-uploader name="idFront" result-type="file" :after-read="afterRead" />
                     </div>
                 </template>
@@ -70,7 +75,12 @@
             >
                 <template #input>
                     <div class="img-content">
-                        <van-image lazy-load  :src="form.idBack || require('@assets/svgs/bg-png.svg')" fit="cover" radius="20" />
+                        <van-image
+                            lazy-load
+                            :src="form.idBack || require('@assets/svgs/bg-png.svg')"
+                            fit="cover"
+                            radius="20"
+                        />
                         <van-uploader name="idBack" result-type="file" :after-read="afterRead" />
                     </div>
                 </template>
@@ -158,7 +168,8 @@
             >
                 <template #input>
                     <div class="img-content">
-                        <van-image lazy-load 
+                        <van-image
+                            lazy-load
                             :src="form.orgLicense || require('@assets/svgs/bg-png.svg')"
                             fit="cover"
                             radius="20"

src/views/activity/Detail.vue

@@ -1,360 +1,317 @@
 <template>
-  <div class="activity">
-    <div class="name">你持有的藏品</div>
-    <div class="detail_list">
-      <div
-        class="list_item"
-        v-for="(item, index) in info.activities"
-        :key="index"
-      >
-        <van-image lazy-load :src="item.imgUrl" />
-        <div class="info_name">{{ item.collectionName }}</div>
-        <div
-          :class="`info_icon ${
-            item.userHoldNum < item.num ? 'icon_disabled' : ''
-          }`"
-          @click="add(item)"
-        >
-          <!-- <img src="@assets/icon_jianshao.png" alt="" /> -->
-          <img
-            v-lazy="
-              require(`@assets/icon_${
-                item.oncilck ? 'jianshao' : 'zengjia'
-              }.png`)
-            "
-            alt=""
-          />
+    <div class="activity">
+        <div class="name">你持有的藏品</div>
+        <div class="detail_list">
+            <div class="list_item" v-for="(item, index) in info.activities" :key="index">
+                <van-image lazy-load :src="item.imgUrl" />
+                <div class="info_name">{{ item.collectionName }}</div>
+                <div :class="`info_icon ${item.userHoldNum < item.num ? 'icon_disabled' : ''}`" @click="add(item)">
+                    <!-- <img src="@assets/icon_jianshao.png" alt="" /> -->
+                    <img v-lazy="require(`@assets/icon_${item.oncilck ? 'jianshao' : 'zengjia'}.png`)" alt="" />
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-    <div class="name">可获得的藏品</div>
-    <div class="detail_list">
-      <div
-        class="list_item"
-        v-for="(item, index) in info.awardList"
-        :key="index"
-      >
-        <van-image lazy-load :src="item.imgUrl" />
-        <div class="info_name">{{ item.collectionName }}</div>
-        <div
-          :class="`info_icon ${item.stock <= 0 ? 'icon_disabled' : ''}`"
-          @click="addItem(item, index, info.awardList)"
-        >
-          <!-- <img src="@assets/icon_jianshao.png" alt="" /> -->
-          <!-- <img src="@assets/icon_zengjia.png" alt="" /> -->
-          <img
-            v-lazy="
-              require(`@assets/icon_${
-                item.oncilck ? 'jianshao' : 'zengjia'
-              }.png`)
-            "
-            alt=""
-          />
-        </div>
-      </div>
-    </div>
-    <div class="btn van-safe-area-bottom" ref="btn">
-      <div class="tis">可选择您可以兑换的藏品，如不选择则随机兑换一张藏品</div>
-      <div class="btns">
-        <van-button type="primary" class="cancel" block round @click="back"
-          >取消</van-button
-        >
-        <van-button type="primary" block round @click="buy">确定</van-button>
-      </div>
-    </div>
-    <van-popup v-model:show="showPopup">
-      <div class="items">
-        <div class="item_bg">
-          <img src="@assets/pop_bg.png" />
+        <div class="name">可获得的藏品</div>
+        <div class="detail_list">
+            <div class="list_item" v-for="(item, index) in info.awardList" :key="index">
+                <van-image lazy-load :src="item.imgUrl" />
+                <div class="info_name">{{ item.collectionName }}</div>
+                <div
+                    :class="`info_icon ${item.stock <= 0 ? 'icon_disabled' : ''}`"
+                    @click="addItem(item, index, info.awardList)"
+                >
+                    <!-- <img src="@assets/icon_jianshao.png" alt="" /> -->
+                    <!-- <img src="@assets/icon_zengjia.png" alt="" /> -->
+                    <img v-lazy="require(`@assets/icon_${item.oncilck ? 'jianshao' : 'zengjia'}.png`)" alt="" />
+                </div>
+            </div>
         </div>
-        <div class="item">
-          <van-image lazy-load :src="imgUrl" />
-          <div class="text">
-            藏品正在生成中约1~3分钟，完成后会出现在你的藏品室
-          </div>
-          <img
-            src="@assets/icon_fenxiang_close.png"
-            @click="onShow"
-            alt=""
-            class="close"
-          />
+        <div class="btn van-safe-area-bottom" ref="btn">
+            <div class="tis">可选择您可以兑换的藏品，如不选择则随机兑换一张藏品</div>
+            <div class="btns">
+                <van-button type="primary" class="cancel" block round @click="back">取消</van-button>
+                <van-button type="primary" block round @click="buy">确定</van-button>
+            </div>
         </div>
-      </div>
-    </van-popup>
-  </div>
+        <van-popup v-model:show="showPopup">
+            <div class="items">
+                <div class="item_bg">
+                    <img src="@assets/pop_bg.png" />
+                </div>
+                <div class="item">
+                    <van-image lazy-load :src="imgUrl" />
+                    <div class="text">藏品正在生成中约1~3分钟，完成后会出现在你的藏品室</div>
+                    <img src="@assets/icon_fenxiang_close.png" @click="onShow" alt="" class="close" />
+                </div>
+            </div>
+        </van-popup>
+    </div>
 </template>
 
 <script>
 export default {
-  data() {
-    return {
-      imgUrl: '',
-      showPopup: false,
-      info: {},
-      list: [],
-      projectId: this.$store.state.projectId,
-      formData: {
-        id: '',
-        vid: ''
-      }
-    }
-  },
-  mounted() {
-    this.getData()
-  },
-  methods: {
-    getData() {
-      this.$http
-        .get(`/activityOrder/detail/${this.projectId}/${this.$route.query.id}`)
-        .then(res => {
-          this.info = res
-        })
-    },
-    addItem(row, ids, list) {
-      const that = this
-      const map1 = list.map(function (item, index) {
-        if (ids == index) {
-          item.oncilck = true
-          that.formData.id = item.collectionId
-
-          // if (id == 'id') {
-          //     that.formData.id = item.collectionId;
-          // } else {
-          //     that.formData.vid = item.collectionId;
-          // }
-          // id = item.collectionId;
-          // console.log(id, 'this.form', this.formData);
-        } else {
-          item.oncilck = false
-        }
-        return item
-      })
-      return map1
+    data() {
+        return {
+            imgUrl: '',
+            showPopup: false,
+            info: {},
+            list: [],
+            projectId: this.$store.state.projectId,
+            formData: {
+                id: '',
+                vid: ''
+            }
+        };
     },
-    back() {
-      if (window.history.length <= 1) {
-        this.$router.push({ path: '/' })
-        return false
-      } else {
-        this.$router.go(-1)
-      }
+    mounted() {
+        this.getData();
     },
-    add(row) {
-      row.oncilck = row.oncilck ? !row.oncilck : true
-      const obj = JSON.parse(JSON.stringify(row))
-      let arr = JSON.parse(JSON.stringify(this.list))
+    methods: {
+        getData() {
+            this.$http.get(`/activityOrder/detail/${this.projectId}/${this.$route.query.id}`).then(res => {
+                this.info = res;
+            });
+        },
+        addItem(row, ids, list) {
+            const that = this;
+            const map1 = list.map(function (item, index) {
+                if (ids == index) {
+                    item.oncilck = true;
+                    that.formData.id = item.collectionId;
 
-      const data = arr.some(item => obj.id === item)
-      if (row.oncilck && (!data || arr.length == 0)) {
-        this.list.push(obj.id)
-      } else {
-        arr = this.list.filter(item => item !== obj.id)
-        this.list = arr
-      }
-      return row.oncilck
-    },
-    onShow() {
-      this.showPopup = false
-      this.getData()
-    },
-    buy() {
-      // 抽出有库存的
-      const map1 = JSON.parse(
-        JSON.stringify(this.info.awardList.filter(item => item.stock > 0))
-      )
-      // 随机抽一个藏品
-      const item = map1[Math.floor(Math.random() * map1.length)]
-      // 如果 不选则用随机的藏品
-      const collId = this.formData.id ? this.formData.id : item.collectionId
-      const params = {
-        projectId: this.projectId,
-        mintActivityId: this.info.id, //活动id
-        collectionId: collId, ///兑换的 藏品ID
-        assetIds: this.list //  消耗的藏品ID
-      }
-      if (
-        this.list.length < this.info.needCollectedNum &&
-        this.info.type == 'ANY_TO_ONE'
-      ) {
-        this.$toast(`请选择${this.info.needCollectedNum}张消耗的藏品`)
-        return
-      }
-      this.$dialog
-        .alert({
-          title: '友情提示',
-          message: '确定后您选择持有的藏品将会被销毁'
-        })
-        .then(() => {
-          // on close
-          this.$http
-            .post('/activityOrder/create/', params, {
-              body: 'json'
-            })
-            .then(res => {
-              this.imgUrl = res.pic[0].url
-              this.showPopup = true
-            })
-            .catch(e => {
-              this.$toast(e.error)
-            })
-        })
-        .catch(() => {
-          return
-          // on cancel
-        })
+                    // if (id == 'id') {
+                    //     that.formData.id = item.collectionId;
+                    // } else {
+                    //     that.formData.vid = item.collectionId;
+                    // }
+                    // id = item.collectionId;
+                    // console.log(id, 'this.form', this.formData);
+                } else {
+                    item.oncilck = false;
+                }
+                return item;
+            });
+            return map1;
+        },
+        back() {
+            if (window.history.length <= 1) {
+                this.$router.push({ path: '/' });
+                return false;
+            } else {
+                this.$router.go(-1);
+            }
+        },
+        add(row) {
+            row.oncilck = row.oncilck ? !row.oncilck : true;
+            const obj = JSON.parse(JSON.stringify(row));
+            let arr = JSON.parse(JSON.stringify(this.list));
+
+            const data = arr.some(item => obj.id === item);
+            if (row.oncilck && (!data || arr.length == 0)) {
+                this.list.push(obj.id);
+            } else {
+                arr = this.list.filter(item => item !== obj.id);
+                this.list = arr;
+            }
+            return row.oncilck;
+        },
+        onShow() {
+            this.showPopup = false;
+            this.getData();
+        },
+        buy() {
+            // 抽出有库存的
+            const map1 = JSON.parse(JSON.stringify(this.info.awardList.filter(item => item.stock > 0)));
+            // 随机抽一个藏品
+            const item = map1[Math.floor(Math.random() * map1.length)];
+            // 如果 不选则用随机的藏品
+            const collId = this.formData.id ? this.formData.id : item.collectionId;
+            const params = {
+                projectId: this.projectId,
+                mintActivityId: this.info.id, //活动id
+                collectionId: collId, ///兑换的 藏品ID
+                assetIds: this.list //  消耗的藏品ID
+            };
+            if (this.list.length < this.info.needCollectedNum && this.info.type == 'ANY_TO_ONE') {
+                this.$toast(`请选择${this.info.needCollectedNum}张消耗的藏品`);
+                return;
+            }
+            this.$dialog
+                .alert({
+                    title: '友情提示',
+                    message: '确定后您选择持有的藏品将会被销毁'
+                })
+                .then(() => {
+                    // on close
+                    this.$http
+                        .post('/activityOrder/create/', params, {
+                            body: 'json'
+                        })
+                        .then(res => {
+                            this.imgUrl = res.pic[0].url;
+                            this.showPopup = true;
+                        })
+                        .catch(e => {
+                            this.$toast(e.error);
+                        });
+                })
+                .catch(() => {
+                    return;
+                    // on cancel
+                });
+        }
     }
-  }
-}
+};
 </script>
 
 <style lang="less" scoped>
 .activity {
-  padding: 2px 0px 50px;
-  background-color: @bg3;
-  .van-image {
-    display: block;
-    img {
-      display: block;
-      width: 100%;
-      height: auto;
-    }
-  }
-  .detail_list {
-    display: flex;
-    flex-flow: row wrap;
-    padding: 10px 6px 30px;
-    // padding-bottom: 22px;
-    background: @bg3;
-    .list_item {
-      // flex: 0 0 33%;
-      position: relative;
-      margin: 0 6px;
-      background: @bg;
-      padding-bottom: 22px;
-      margin-bottom: 34px;
-      border-radius: 4px;
-      /deep/ .van-image {
-        width: 109px;
-        height: 107px;
-      }
-      .info_name {
-        background: rgba(143, 143, 143, 0.3);
-        color: @text0;
-        position: absolute;
-        bottom: 22px;
-        width: 100%;
-        text-align: center;
-      }
-      .icon_disabled {
-        pointer-events: none;
-        filter: grayscale(100%);
-        -webkit-filter: grayscale(100%);
-        -moz-filter: grayscale(100%);
-        -ms-filter: grayscale(100%);
-        -o-filter: grayscale(100%);
-      }
-      .info_icon {
-        width: 24px;
-        height: 24px;
-        position: absolute;
-        bottom: -12px;
-        margin: 0 auto;
-        left: 0;
-        right: 0;
+    padding: 2px 0px 50px;
+    background-color: @bg3;
+    .van-image {
+        display: block;
         img {
-          width: 100%;
-          height: 100%;
+            display: block;
+            width: 100%;
+            height: auto;
         }
-      }
-    }
-  }
-  .btn {
-    position: fixed;
-    z-index: 20;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: @bg3;
-    .tis {
-      background: #232317;
-      line-height: 44px;
-      text-align: center;
-      color: @prim;
     }
-    .btns {
-      padding: 10px 16px;
-      display: flex;
-      /deep/ .van-button {
-        background: linear-gradient(135deg, @prim 0%, @warn 100%);
-        color: @btnText;
-        font-size: @font2;
-        margin: 0 10px;
-        border-width: 0px;
-      }
-      .cancel {
+    .detail_list {
+        display: flex;
+        flex-flow: row wrap;
+        padding: 10px 6px 30px;
+        // padding-bottom: 22px;
         background: @bg3;
-        color: @text0;
-        border: 1px solid @text3;
-      }
+        .list_item {
+            // flex: 0 0 33%;
+            position: relative;
+            margin: 0 6px;
+            background: @bg;
+            padding-bottom: 22px;
+            margin-bottom: 34px;
+            border-radius: 4px;
+            /deep/ .van-image {
+                width: 109px;
+                height: 107px;
+            }
+            .info_name {
+                background: rgba(143, 143, 143, 0.3);
+                color: @text0;
+                position: absolute;
+                bottom: 22px;
+                width: 100%;
+                text-align: center;
+            }
+            .icon_disabled {
+                pointer-events: none;
+                filter: grayscale(100%);
+                -webkit-filter: grayscale(100%);
+                -moz-filter: grayscale(100%);
+                -ms-filter: grayscale(100%);
+                -o-filter: grayscale(100%);
+            }
+            .info_icon {
+                width: 24px;
+                height: 24px;
+                position: absolute;
+                bottom: -12px;
+                margin: 0 auto;
+                left: 0;
+                right: 0;
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
     }
-  }
-  .items {
-    // position: relative;
-    // background: rgba(15, 15, 15, 0);
-    width: 100vw;
-    height: 100vh;
-    .item {
-      top: 50%;
-      left: 50%;
-      transform: translate3d(-50%, -50%, 0);
-      position: fixed;
-      max-height: 100%;
-      // overflow-y: auto;
-      // border: 2px solid #fff;
-      padding: 6px;
-      // background: rgba(15, 15, 15, 0);
-      border-radius: 5px;
-      /deep/ .van-image {
-        // background: rgba(15, 15, 15, 0);
-      }
-      .text {
-        position: absolute;
-        bottom: -10vh;
-      }
-      .close {
-        width: 40px;
-        height: 40px;
-        position: absolute;
-        z-index: 5;
-        bottom: -18vh;
+    .btn {
+        position: fixed;
+        z-index: 20;
+        bottom: 0;
         left: 0;
         right: 0;
-        margin: 0 auto;
-      }
+        background: @bg3;
+        .tis {
+            background: #232317;
+            line-height: 44px;
+            text-align: center;
+            color: @prim;
+        }
+        .btns {
+            padding: 10px 16px;
+            display: flex;
+            /deep/ .van-button {
+                background: linear-gradient(135deg, @prim 0%, @warn 100%);
+                color: @btnText;
+                font-size: @font2;
+                margin: 0 10px;
+                border-width: 0px;
+            }
+            .cancel {
+                background: @bg3;
+                color: @text0;
+                border: 1px solid @text3;
+            }
+        }
+    }
+    .items {
+        // position: relative;
+        // background: rgba(15, 15, 15, 0);
+        width: 100vw;
+        height: 100vh;
+        .item {
+            top: 50%;
+            left: 50%;
+            transform: translate3d(-50%, -50%, 0);
+            position: fixed;
+            max-height: 100%;
+            // overflow-y: auto;
+            // border: 2px solid #fff;
+            padding: 6px;
+            // background: rgba(15, 15, 15, 0);
+            border-radius: 5px;
+            /deep/ .van-image {
+                // background: rgba(15, 15, 15, 0);
+            }
+            .text {
+                position: absolute;
+                bottom: -10vh;
+            }
+            .close {
+                width: 40px;
+                height: 40px;
+                position: absolute;
+                z-index: 5;
+                bottom: -18vh;
+                left: 0;
+                right: 0;
+                margin: 0 auto;
+            }
+        }
+        .item_bg {
+            position: fixed;
+            top: 50%;
+            right: 0;
+            img {
+                transform: translateY(-51%);
+                width: 100%;
+                height: 100%;
+            }
+        }
     }
-    .item_bg {
-      position: fixed;
-      top: 50%;
-      right: 0;
-      img {
-        transform: translateY(-51%);
-        width: 100%;
-        height: 100%;
-      }
+    /deep/ .van-popup--center {
+        background: rgba(15, 15, 15, 0);
     }
-  }
-  /deep/ .van-popup--center {
-    background: rgba(15, 15, 15, 0);
-  }
 }
 
 .name {
-  font-size: 14px;
-  color: @text0;
-  line-height: 50px;
-  margin-bottom: 4px;
-  padding-left: 15px;
-  // height: 50px;
-  background: @bg;
+    font-size: 14px;
+    color: @text0;
+    line-height: 50px;
+    margin-bottom: 4px;
+    padding-left: 15px;
+    // height: 50px;
+    background: @bg;
 }
 </style>

src/views/activity/Details.vue

@@ -1,13 +1,11 @@
 <template>
-  <div class="activity">
-    <div class="name">{{ info.name }}</div>
-    <!-- <van-image lazy-load  :src="item"
+    <div class="activity">
+        <div class="name">{{ info.name }}</div>
+        <!-- <van-image lazy-load  :src="item"
                v-for="(item, index) in info.detail"
                :key="index" /> -->
-    <div v-html="info.content">
-
+        <div v-html="info.content"></div>
     </div>
-  </div>
 </template>
 
 <script>

src/views/activity/List.vue

@@ -1,78 +1,69 @@
 <template>
-  <div class="search">
-    <van-list
-      v-model:loading="loading"
-      :finished="finished"
-      finished-text=""
-      @load="getData"
-    >
-      <template v-for="(item, index) in list" :key="index">
-        <router-link
-          :to="{
-            path: '/activityDetails',
-            query: {
-              id: item.id
-            }
-          }"
-          class="activity"
-        >
-          <div class="text1 van-ellipsis">{{ item.name }}</div>
-          <van-image
-            lazy-load
-            width="calc(100vw - 32px)"
-            height=" calc(40vw - 12.8px)"
-            radius="4"
-            :src="getImg(item.cover)"
-            fit="cover"
-          />
-        </router-link>
-      </template>
+    <div class="search">
+        <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
+            <template v-for="(item, index) in list" :key="index">
+                <router-link
+                    :to="{
+                        path: '/activityDetails',
+                        query: {
+                            id: item.id
+                        }
+                    }"
+                    class="activity"
+                >
+                    <div class="text1 van-ellipsis">{{ item.name }}</div>
+                    <van-image
+                        lazy-load
+                        width="calc(100vw - 32px)"
+                        height=" calc(40vw - 12.8px)"
+                        radius="4"
+                        :src="getImg(item.cover)"
+                        fit="cover"
+                    />
+                </router-link>
+            </template>
 
-      <van-empty
-        v-if="empty"
-        description="暂无活动哦~"
-        :image="require('@assets/kong_png_wudingdan.png')"
-      />
-    </van-list>
-  </div>
+            <van-empty v-if="empty" description="暂无活动哦~" :image="require('@assets/kong_png_wudingdan.png')" />
+        </van-list>
+    </div>
 </template>
 
 <script>
-import list from '../../mixins/list'
+import list from '../../mixins/list';
 export default {
-  name: 'Search',
-  mixins: [list],
-  data() {
-    return {
-      list: [],
-      empty: false,
-      url: '/activity/all'
-    }
-  },
-  methods: {
-    beforeData() {
-      return {
-        query: {
-          del: false
+    name: 'Search',
+    mixins: [list],
+    data() {
+        return {
+            list: [],
+            empty: false,
+            url: '/activity/all'
+        };
+    },
+    methods: {
+        beforeData() {
+            return {
+                query: {
+                    del: false
+                }
+            };
         }
-      }
     }
-  }
-}
+};
 </script>
 
 <style lang="less" scoped>
 .search {
-  padding-bottom: 50px;
+    padding-bottom: 50px;
 }
 .activity {
-  padding: 16px;
-  display: block;
-  .text1 {
-    font-size: 16px;
-    color: @text0;
-    line-height: 24px;
-    margin-bottom: 12px;
-  }
+    padding: 16px;
+    display: block;
+    .text1 {
+        font-size: 16px;
+        color: @text0;
+        line-height: 24px;
+        margin-bottom: 12px;
+    }
 }
 </style>

src/views/activity/List1.vue

@@ -1,278 +1,263 @@
 <template>
-  <div class="search">
-    <div class="top" v-if="!minterId">
-      <div class="name">{{ title || pageName }}</div>
-      <!-- <img v-if="!title" src="@assets/icon-sosuo.png" alt="" @click="goSearch" class="search" /> -->
-    </div>
-    <van-list
-      v-model:loading="loading"
-      :finished="finished"
-      finished-text=""
-      @load="getData"
-    >
-      <template v-for="(item, index) in list" :key="index">
-        <router-link
-          :to="{
-            path: '/activityDetail',
-            query: {
-              id: item.id
-            }
-          }"
-          custom
-          v-slot="{ navigate }"
-          class="activity"
-        >
-          <NavLink @click="navigate(item)"> </NavLink>
-        </router-link>
-        <div class="activity" @click="toItem(item)">
-          <van-image
-            lazy-load
-            width="calc(50vw - 20px)"
-            height="calc(50vw - 20px)"
-            :src="getImg(item.pic)"
-            fit="cover"
-          />
-          <div class="content">
-            <div class="text2">
-              集齐指定活动指定藏品 可换取<span>{{
-                item.awardCollectionName
-              }}</span>
-              藏品
-            </div>
-            <van-button
-              size="small"
-              @click="getActivity(item, index)"
-              :disabled="!canGet(item) || item.stock === 0"
-              type="primary"
-              :class="!canGet(item) ? '' : 'actbtn'"
-              round
-              block
-              >{{ item.stock ? '领取' : '无库存' }}</van-button
-            >
-          </div>
-
-          <div class="status" :class="{ used: !canGet(item) }">
-            {{ canGet(item) ? '已集齐' : '未集齐' }}
-          </div>
+    <div class="search">
+        <div class="top" v-if="!minterId">
+            <div class="name">{{ title || pageName }}</div>
+            <!-- <img v-if="!title" src="@assets/icon-sosuo.png" alt="" @click="goSearch" class="search" /> -->
         </div>
-      </template>
+        <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
+            <template v-for="(item, index) in list" :key="index">
+                <router-link
+                    :to="{
+                        path: '/activityDetail',
+                        query: {
+                            id: item.id
+                        }
+                    }"
+                    custom
+                    v-slot="{ navigate }"
+                    class="activity"
+                >
+                    <NavLink @click="navigate(item)"> </NavLink>
+                </router-link>
+                <div class="activity" @click="toItem(item)">
+                    <van-image
+                        lazy-load
+                        width="calc(50vw - 20px)"
+                        height="calc(50vw - 20px)"
+                        :src="getImg(item.pic)"
+                        fit="cover"
+                    />
+                    <div class="content">
+                        <div class="text2">
+                            集齐指定活动指定藏品 可换取<span>{{ item.awardCollectionName }}</span>
+                            藏品
+                        </div>
+                        <van-button
+                            size="small"
+                            @click="getActivity(item, index)"
+                            :disabled="!canGet(item) || item.stock === 0"
+                            type="primary"
+                            :class="!canGet(item) ? '' : 'actbtn'"
+                            round
+                            block
+                            >{{ item.stock ? '领取' : '无库存' }}</van-button
+                        >
+                    </div>
 
-      <van-empty
-        v-if="empty"
-        description="暂无活动哦~"
-        :image="require('@assets/kong_png_wudingdan.png')"
-      />
-    </van-list>
+                    <div class="status" :class="{ used: !canGet(item) }">
+                        {{ canGet(item) ? '已集齐' : '未集齐' }}
+                    </div>
+                </div>
+            </template>
 
-    <order-open
-      ref="box"
-      :imgSrc="getImg(changeImgs(orderInfo.pic))"
-      :close="true"
-    ></order-open>
-  </div>
+            <van-empty v-if="empty" description="暂无活动哦~" :image="require('@assets/kong_png_wudingdan.png')" />
+        </van-list>
+
+        <order-open ref="box" :imgSrc="getImg(changeImgs(orderInfo.pic))" :close="true"></order-open>
+    </div>
 </template>
 
 <script>
-import OrderOpen from '../../components/order/OrderOpen.vue'
-import list from '../../mixins/list'
-import product from '../../mixins/product'
+import OrderOpen from '../../components/order/OrderOpen.vue';
+import list from '../../mixins/list';
+import product from '../../mixins/product';
 export default {
-  components: { OrderOpen },
-  name: 'Search',
-  mixins: [list, product],
-  data() {
-    return {
-      list: [],
-      empty: false,
-      url: '/activityCollection/all',
-      orderInfo: {},
-      title: '我参与的'
-    }
-  },
-  methods: {
-    beforeData() {
-      return {
-        query: {
-          del: false
-        }
-      }
-    },
-    toItem(row) {
-      console.log(row.id, 'row', row.collected)
-      if (row.collected) {
-        // console.log(row, 'row');
-        console.log(`/activityDetail?id=${row.id}`, 'url')
-        this.$router.push({
-          path: `/activityDetail`,
-          query: {
-            id: row.id
-          }
-        })
-      }
-    },
-    canGet(info) {
-      console.log(info.collected, 'stock')
-      return info.collected
+    components: { OrderOpen },
+    name: 'Search',
+    mixins: [list, product],
+    data() {
+        return {
+            list: [],
+            empty: false,
+            url: '/activityCollection/all',
+            orderInfo: {},
+            title: '我参与的'
+        };
     },
-    afterData() {
-      if (this.isLogin) {
-        ;[...this.list].forEach((item, index) => {
-          console.log(item)
-          this.getCollect(item.collectionId).then(res => {
-            this.list[index] = { ...item, collections: res }
-          })
-        })
-      }
-    },
-    getCollect(id) {
-      return this.$http
-        .post(
-          '/asset/all',
-          {
-            query: {
-              userId: this.$store.state.userInfo.id,
-              collectionId: Number(id),
-              projectId: this.$store.state.projectId,
-              status: 'NORMAL,TRADING,GIFTING'
+    methods: {
+        beforeData() {
+            return {
+                query: {
+                    del: false
+                }
+            };
+        },
+        toItem(row) {
+            console.log(row.id, 'row', row.collected);
+            if (row.collected) {
+                // console.log(row, 'row');
+                console.log(`/activityDetail?id=${row.id}`, 'url');
+                this.$router.push({
+                    path: `/activityDetail`,
+                    query: {
+                        id: row.id
+                    }
+                });
             }
-          },
-          { body: 'json' }
-        )
-        .then(res => {
-          return Promise.resolve(res.content)
-        })
-    },
-    // getActivity(info, index) {
-    //     console.log(!this.canGet(info), 'index');
-    //     this.$dialog
-    //         .confirm({
-    //             title: '提示',
-    //             message: `确认要使用${info.num}张${info.collectionName}兑换一张${info.awardCollectionName}吗?`,
-    //             confirmButtonText: '立即兑换'
-    //         })
-    //         .then(res => {
-    //             return this.$http.post('/activityOrder/create?mintActivityId=' + info.id);
-    //         })
-    //         .then(res => {
-    //             this.getData(true);
-    //             this.orderInfo = res;
-    //             this.show();
-    //         })
-    //         .catch(e => {
-    //             if (e && e.error) {
-    //                 this.$toast(e.error);
-    //             }
-    //         });
-    // },
-    show() {
-      this.$refs.box.show = true
-      this.$nextTick(() => {
-        this.$refs.box.open()
-      })
+        },
+        canGet(info) {
+            console.log(info.collected, 'stock');
+            return info.collected;
+        },
+        afterData() {
+            if (this.isLogin) {
+                [...this.list].forEach((item, index) => {
+                    console.log(item);
+                    this.getCollect(item.collectionId).then(res => {
+                        this.list[index] = { ...item, collections: res };
+                    });
+                });
+            }
+        },
+        getCollect(id) {
+            return this.$http
+                .post(
+                    '/asset/all',
+                    {
+                        query: {
+                            userId: this.$store.state.userInfo.id,
+                            collectionId: Number(id),
+                            projectId: this.$store.state.projectId,
+                            status: 'NORMAL,TRADING,GIFTING'
+                        }
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    return Promise.resolve(res.content);
+                });
+        },
+        // getActivity(info, index) {
+        //     console.log(!this.canGet(info), 'index');
+        //     this.$dialog
+        //         .confirm({
+        //             title: '提示',
+        //             message: `确认要使用${info.num}张${info.collectionName}兑换一张${info.awardCollectionName}吗?`,
+        //             confirmButtonText: '立即兑换'
+        //         })
+        //         .then(res => {
+        //             return this.$http.post('/activityOrder/create?mintActivityId=' + info.id);
+        //         })
+        //         .then(res => {
+        //             this.getData(true);
+        //             this.orderInfo = res;
+        //             this.show();
+        //         })
+        //         .catch(e => {
+        //             if (e && e.error) {
+        //                 this.$toast(e.error);
+        //             }
+        //         });
+        // },
+        show() {
+            this.$refs.box.show = true;
+            this.$nextTick(() => {
+                this.$refs.box.open();
+            });
+        }
     }
-  }
-}
+};
 </script>
 
 <style lang="less" scoped>
 .search {
-  padding-bottom: 50px;
-  background-color: @bg3;
+    padding-bottom: 50px;
+    background-color: @bg3;
 }
 .van-list {
-  padding: 10px;
+    padding: 10px;
 }
 .top {
-  background-color: @bg;
-  padding: 0 16px;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  position: relative;
-  .name {
-    font-size: @font3;
-    font-weight: bold;
-    color: @text0;
-    line-height: 30px;
-  }
+    background-color: @bg;
+    padding: 0 16px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    position: relative;
+    .name {
+        font-size: @font3;
+        font-weight: bold;
+        color: @text0;
+        line-height: 30px;
+    }
 
-  .search {
-    width: 24px;
-    height: 24px;
-    position: absolute;
-    right: 16px;
-    top: 13px;
-  }
+    .search {
+        width: 24px;
+        height: 24px;
+        position: absolute;
+        right: 16px;
+        top: 13px;
+    }
 }
 .activity {
-  display: inline-block;
-  vertical-align: top;
-  width: calc(50vw - 20px);
-  box-sizing: border-box;
-  margin: 5px;
-  border-radius: 8px;
-  overflow: hidden;
-  position: relative;
+    display: inline-block;
+    vertical-align: top;
+    width: calc(50vw - 20px);
+    box-sizing: border-box;
+    margin: 5px;
+    border-radius: 8px;
+    overflow: hidden;
+    position: relative;
 
-  .status {
-    font-size: 12px;
-    background-color: #f7931a;
-    color: @bg;
-    position: absolute;
-    top: 0;
-    right: 0;
-    border-radius: 0 8px 0 8px;
-    padding: 0 6px;
-    line-height: 18px;
+    .status {
+        font-size: 12px;
+        background-color: #f7931a;
+        color: @bg;
+        position: absolute;
+        top: 0;
+        right: 0;
+        border-radius: 0 8px 0 8px;
+        padding: 0 6px;
+        line-height: 18px;
 
-    &.used {
-      background-color: @text3;
-    }
-  }
-  .van-image {
-    display: block;
-  }
-
-  .content {
-    padding: 7px;
-    background-color: @bg;
-    .text1 {
-      font-size: 16px;
-      color: @text0;
-      line-height: 24px;
-      text-align: center;
+        &.used {
+            background-color: @text3;
+        }
     }
-    .text2 {
-      text-align: center;
-      font-size: 14px;
-      line-height: 16px;
-      margin-top: 5px;
-      color: @text3;
-      span {
-        color: @text0;
-      }
+    .van-image {
+        display: block;
     }
-    .actbtn {
-      background: linear-gradient(135deg, @prim 0%, @warn 100%);
+
+    .content {
+        padding: 7px;
+        background-color: @bg;
+        .text1 {
+            font-size: 16px;
+            color: @text0;
+            line-height: 24px;
+            text-align: center;
+        }
+        .text2 {
+            text-align: center;
+            font-size: 14px;
+            line-height: 16px;
+            margin-top: 5px;
+            color: @text3;
+            span {
+                color: @text0;
+            }
+        }
+        .actbtn {
+            background: linear-gradient(135deg, @prim 0%, @warn 100%);
+        }
     }
-  }
 
-  .van-button {
-    margin-top: 10px;
-  }
+    .van-button {
+        margin-top: 10px;
+    }
 }
 .stock {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: calc(50vw - 40px);
-  line-height: 20px;
-  background-color: rgba(0, 0, 0, 0.6);
-  color: #fff;
-  text-align: center;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: calc(50vw - 40px);
+    line-height: 20px;
+    background-color: rgba(0, 0, 0, 0.6);
+    color: #fff;
+    text-align: center;
 }
 .van-button--disabled {
-  background-color: @text3;
-  opacity: 1;
+    background-color: @text3;
+    opacity: 1;
 }
 </style>

src/views/asset/Detail.vue

@@ -1,47 +1,39 @@
 /* eslint-disable no-empty */
 <template>
-  <div class="detail">
-    <product-banner :info="info"
-                    pageType="asset"></product-banner>
+    <div class="detail">
+        <product-banner :info="info" pageType="asset"></product-banner>
 
-    <div class="info">
-      <div class="info-title">
-        <!-- <div class="detail-name">
+        <div class="info">
+            <div class="info-title">
+                <!-- <div class="detail-name">
                     <span>{{ info.name }}</span>
                     <img src="@assets/svgs/png-biaotikuang-01.svg" alt="" />
                     <img src="@assets/svgs/png-biaotikuang-02.svg" alt="" />
                     <img src="@assets/svgs/png-biaotikuang-03.svg" alt="" />
                     <img src="@assets/svgs/png-biaotikuang-04.svg" alt="" />
                 </div> -->
-        <product-title>{{ info.name }}</product-title>
-      </div>
-      <div class="price-line">
-        <div class="price"
-             v-if="info.consignment && info.status =='NORMAL'">
-          <img src="@assets/jiage_huang.png"
-               alt="" />
-          <span>{{ info.sellPrice || 0 }}</span>
-          <div class="sub"
-               v-if="info.royalties">
-            含 <span>{{ info.royalties }}%</span> 版税
-          </div>
-        </div>
-        <div class="status"
-             v-else>
-          {{ assetStatusList(info.status,info.publicShow) }}
-        </div>
-        <div v-if="buyFirst"
-             class="flex1 box"
-             :class="[buyFirst.collectionName == 1 ? 'red': 'blue']">
-          <span class="type">优先购</span>
-          <span class="count"> 剩余 {{buyFirst.count}}</span>
-        </div>
-        <span class="text1"
-              v-if="info.number"> 编号 {{ info.number }} </span>
-      </div>
-      <!-- <div class="title">{{ info.name }}</div> -->
-      <div class="info-bottom">
-        <!-- <van-button
+                <product-title>{{ info.name }}</product-title>
+            </div>
+            <div class="price-line">
+                <div class="price" v-if="info.consignment && info.status == 'NORMAL'">
+                    <img src="@assets/jiage_huang.png" alt="" />
+                    <span>{{ info.sellPrice || 0 }}</span>
+                    <div class="sub" v-if="info.royalties">
+                        含 <span>{{ info.royalties }}%</span> 版税
+                    </div>
+                </div>
+                <div class="status" v-else>
+                    {{ assetStatusList(info.status, info.publicShow) }}
+                </div>
+                <div v-if="buyFirst" class="flex1 box" :class="[buyFirst.collectionName == 1 ? 'red' : 'blue']">
+                    <span class="type">优先购</span>
+                    <span class="count"> 剩余 {{ buyFirst.count }}</span>
+                </div>
+                <span class="text1" v-if="info.number"> 编号 {{ info.number }} </span>
+            </div>
+            <!-- <div class="title">{{ info.name }}</div> -->
+            <div class="info-bottom">
+                <!-- <van-button
           type="primary"
           plain
           size="mini"
@@ -50,40 +42,42 @@
         <like-button :isLike="info.liked" @click="likeProduct">
           {{ info.likes }}
         </like-button> -->
-      </div>
-    </div>
+            </div>
+        </div>
 
-    <div class="goods">
-      <van-collapse v-model="activeNames">
-        <van-collapse-item name="1"
-                           class="goods-info">
-          <template #title>
-            <div class="page-title"><img src="@assets/fenxiang-icon.png"
-                   alt="" />用户信息</div>
-          </template>
-          <div class="user">
-            <van-cell class="creator"
-                      :to="{
+        <div class="goods">
+            <van-collapse v-model="activeNames">
+                <van-collapse-item name="1" class="goods-info">
+                    <template #title>
+                        <div class="page-title"><img src="@assets/fenxiang-icon.png" alt="" />用户信息</div>
+                    </template>
+                    <div class="user">
+                        <van-cell
+                            class="creator"
+                            :to="{
                                 path: '/creatorDetail',
                                 query: {
                                     id: info.minterId
                                 }
-                            }">
-              <template #icon>
-                <van-image lazy-load
-                           width="40"
-                           height="40"
-                           class="user-img"
-                           :src="info.minterAvatar || require('@assets/svgs/img_default_photo.svg')"
-                           fit="cover"
-                           radius="100" />
-              </template>
-              <template #title>
-                <div class="text1 van-ellipsis">{{ info.minter }}</div>
-                <div class="text2">铸造者</div>
-              </template>
-            </van-cell>
-            <!-- <van-cell class="creator">
+                            }"
+                        >
+                            <template #icon>
+                                <van-image
+                                    lazy-load
+                                    width="40"
+                                    height="40"
+                                    class="user-img"
+                                    :src="info.minterAvatar || require('@assets/svgs/img_default_photo.svg')"
+                                    fit="cover"
+                                    radius="100"
+                                />
+                            </template>
+                            <template #title>
+                                <div class="text1 van-ellipsis">{{ info.minter }}</div>
+                                <div class="text2">铸造者</div>
+                            </template>
+                        </van-cell>
+                        <!-- <van-cell class="creator">
               <template #icon>
                 <van-image lazy-load
                            width="40"
@@ -98,37 +92,28 @@
                 <div class="text2">持有者</div>
               </template>
             </van-cell> -->
-          </div>
-        </van-collapse-item>
+                    </div>
+                </van-collapse-item>
 
-        <van-collapse-item name="2"
-                           class="goods-info">
-          <template #title>
-            <div class="page-title"><img src="@assets/icon-miaoshu.png"
-                   alt="" />作品描述</div>
-          </template>
-          <div v-if="info.detail"
-               class="page-text page-detail"
-               v-html="info.detail"></div>
-          <div v-else
-               class="textName">铸造者未设置</div>
-        </van-collapse-item>
-        <van-collapse-item name="3"
-                           class="goods-info">
-          <template #title>
-            <div class="page-title"><img src="@assets/icon-lianshangxinxi.png"
-                   alt="" />类型</div>
-          </template>
-          <div class="top1">
-            <div v-if="info.category"
-                 class="text2">
-              <span>{{ info.category }}</span>
-            </div>
-            <div v-else
-                 class="text5">铸造者未设置</div>
-          </div>
-        </van-collapse-item>
-       <!-- <van-collapse-item name="4"
+                <van-collapse-item name="2" class="goods-info">
+                    <template #title>
+                        <div class="page-title"><img src="@assets/icon-miaoshu.png" alt="" />作品描述</div>
+                    </template>
+                    <div v-if="info.detail" class="page-text page-detail" v-html="info.detail"></div>
+                    <div v-else class="textName">铸造者未设置</div>
+                </van-collapse-item>
+                <van-collapse-item name="3" class="goods-info">
+                    <template #title>
+                        <div class="page-title"><img src="@assets/icon-lianshangxinxi.png" alt="" />类型</div>
+                    </template>
+                    <div class="top1">
+                        <div v-if="info.category" class="text2">
+                            <span>{{ info.category }}</span>
+                        </div>
+                        <div v-else class="text5">铸造者未设置</div>
+                    </div>
+                </van-collapse-item>
+                <!-- <van-collapse-item name="4"
                            class="goods-info init">
           <template #title>
             <div class="page-title">
@@ -158,216 +143,157 @@
                  v-else>铸造者未设置</div>
           </div>
         </van-collapse-item> -->
-        <van-collapse-item name="5"
-                           class="goods-info">
-          <template #title>
-            <div class="titleIcon page-title">
-              <img src="@assets/icon-lianshangxinxi(1).png"
-                   alt="" />持有特权<span>（灰色表示已使用）</span>
-            </div>
-          </template>
-          <div class="prive"
-               v-if="init.length > 0">
-            <div class="prive1"
-                 :class="{ opened: item.opened }"
-                 v-for="(item, index) in init"
-                 :key="index">
-              <img v-if="!item.opened"
-                   class="img"
-                   :src="item.icon[0]"
-                   alt="" />
-              <div style="margin-top: 4px"
-                   v-if="item.icon[2]">
-                <img v-if="item.opened"
-                     class="img"
-                     :src="item.icon[2]"
-                     alt="" />
-              </div>
-              <!-- <img class="img" v-else :src="item.icon[0]" alt="" /> -->
+                <van-collapse-item name="5" class="goods-info">
+                    <template #title>
+                        <div class="titleIcon page-title">
+                            <img src="@assets/icon-lianshangxinxi(1).png" alt="" />持有特权<span
+                                >（灰色表示已使用）</span
+                            >
+                        </div>
+                    </template>
+                    <div class="prive" v-if="init.length > 0">
+                        <div class="prive1" :class="{ opened: item.opened }" v-for="(item, index) in init" :key="index">
+                            <img v-if="!item.opened" class="img" :src="item.icon[0]" alt="" />
+                            <div style="margin-top: 4px" v-if="item.icon[2]">
+                                <img v-if="item.opened" class="img" :src="item.icon[2]" alt="" />
+                            </div>
+                            <!-- <img class="img" v-else :src="item.icon[0]" alt="" /> -->
 
-              <div v-if="item.once"
-                   @click="privilegeFn2(item)"
-                   class="prive2">
-                {{ item.name }}
-              </div>
-              <div v-else
-                   @click="privilegeFn(item)"
-                   class="prive2">
-                {{ item.name }}
-              </div>
-            </div>
-          </div>
-          <div v-if="init.length === 0"
-               class="tips">铸造者未设置</div>
-        </van-collapse-item>
-        <van-collapse-item name="6"
-                           class="goods-info">
-          <template #title>
-            <div class="page-title"><img src="@assets/icon-lianshangxinxi(2).png"
-                   alt="" />作品特性</div>
-          </template>
-          <div class="specific-list"
-               v-if="properties.length > 0">
-            <div class="specific-item"
-                 v-for="(item, index) in properties"
-                 :key="index">
-              <div class="text1">{{ item.name }}</div>
-              <div class="text2">{{ item.value }}</div>
-            </div>
-          </div>
-          <div v-else
-               class="textName">铸造者未设置</div>
-        </van-collapse-item>
-        <hash-code :info="info"
-                   pageType="asset"></hash-code>
-        <van-collapse-item name="8"
-                           class="goods-info">
-          <template #title>
-            <div class="page-title"><img src="@assets/info_icon_jiaoyijilu1.png"
-                   alt="" />交易记录</div>
-          </template>
-          <div v-if="list.length > 0">
-            <div class="user-detail"
-                 v-for="item in list"
-                 :key="item.id">
-              <!-- <div class="text1 van-ellipsis">{{ item.fromUser || '保密' }}</div> -->
-              <div class="text2"
-                   v-if="item.price">
-                {{ item.operation }}¥{{ item.price }}
-              </div>
-              <div class="text2"
-                   v-else>{{ item.operation }}</div>
-              <!-- <div class="text3 van-ellipsis">{{ item.toUser || '保密' }}</div> -->
-              <div class="text4">{{ item.createdAt.substr(0, 16) }}</div>
-            </div>
-          </div>
-          <div v-else
-               style="display: flex; justify-content: center">暂无购买记录</div>
-        </van-collapse-item>
-      </van-collapse>
+                            <div v-if="item.once" @click="privilegeFn2(item)" class="prive2">
+                                {{ item.name }}
+                            </div>
+                            <div v-else @click="privilegeFn(item)" class="prive2">
+                                {{ item.name }}
+                            </div>
+                        </div>
+                    </div>
+                    <div v-if="init.length === 0" class="tips">铸造者未设置</div>
+                </van-collapse-item>
+                <van-collapse-item name="6" class="goods-info">
+                    <template #title>
+                        <div class="page-title"><img src="@assets/icon-lianshangxinxi(2).png" alt="" />作品特性</div>
+                    </template>
+                    <div class="specific-list" v-if="properties.length > 0">
+                        <div class="specific-item" v-for="(item, index) in properties" :key="index">
+                            <div class="text1">{{ item.name }}</div>
+                            <div class="text2">{{ item.value }}</div>
+                        </div>
+                    </div>
+                    <div v-else class="textName">铸造者未设置</div>
+                </van-collapse-item>
+                <hash-code :info="info" pageType="asset"></hash-code>
+                <van-collapse-item name="8" class="goods-info">
+                    <template #title>
+                        <div class="page-title"><img src="@assets/info_icon_jiaoyijilu1.png" alt="" />交易记录</div>
+                    </template>
+                    <div v-if="list.length > 0">
+                        <div class="user-detail" v-for="item in list" :key="item.id">
+                            <!-- <div class="text1 van-ellipsis">{{ item.fromUser || '保密' }}</div> -->
+                            <div class="text2" v-if="item.price">{{ item.operation }}¥{{ item.price }}</div>
+                            <div class="text2" v-else>{{ item.operation }}</div>
+                            <!-- <div class="text3 van-ellipsis">{{ item.toUser || '保密' }}</div> -->
+                            <div class="text4">{{ item.createdAt.substr(0, 16) }}</div>
+                        </div>
+                    </div>
+                    <div v-else style="display: flex; justify-content: center">暂无购买记录</div>
+                </van-collapse-item>
+            </van-collapse>
 
-      <!-- <template v-if="info.detail">
+            <!-- <template v-if="info.detail">
                 <div class="page-title">作品描述</div>
                 <div class="page-text" v-html="info.detail"></div>
             </template> -->
-    </div>
+        </div>
 
-    <!-- <div class="btn van-safe-area-bottom" ref="btn" v-if="isBuy">
+        <!-- <div class="btn van-safe-area-bottom" ref="btn" v-if="isBuy">
             <div class="btns">
                 <van-button type="primary" block round @click="buy">立即购买</van-button>
             </div>
         </div> -->
-    <div class="btn van-safe-area-bottom"
-         ref="btn"
-         v-if="info.status === 'NORMAL'">
-      <div class="btns1">
-        <div @click="Add">
-          <img class="img"
-               src="@assets/info_icon_ershoushichang.png"
-               alt="" />
-          <div class="text2">赠送</div>
-        </div>
-        <!-- <van-button class="btn1"
+        <div class="btn van-safe-area-bottom" ref="btn" v-if="info.status === 'NORMAL'">
+            <div class="btns1">
+                <div @click="Add">
+                    <img class="img" src="@assets/info_icon_ershoushichang.png" alt="" />
+                    <div class="text2">赠送</div>
+                </div>
+                <!-- <van-button class="btn1"
                     type="primary"
                     block
                     round
                     @click="Exhibition">{{
                     info.publicShow ? '取消展示' : '公开展示'
                 }}</van-button> -->
-        <van-button type="primary"
-                    block
-                    round
-                    @click="Consignment">{{
+                <van-button type="primary" block round @click="Consignment">{{
                     info.consignment ? '取消寄售' : '寄售上架'
                 }}</van-button>
-      </div>
-    </div>
-    <van-popup v-model:show="show">
-      <div class="title2">
-        <div class="top">
-          <img class="img"
-               v-if="list2.icon[1]"
-               :src="list2.icon[1]"
-               alt="" />
-          <img class="img"
-               v-else
-               :src="list2.icon[0]"
-               alt="" />
-          <div class="title3">{{ list2.name }}</div>
-        </div>
-        <img @click="allFn"
-             class="icon"
-             :src="require('@assets/icon-dianzan.png')"
-             alt="" />
-      </div>
-      <div class="border"></div>
-      <div class="name">{{ list2.description }}</div>
-      <div class="name1"
-           v-if="list2.type === 'text'">
-        <!-- <div>{{ list2.detail }}</div> -->
-        <span>{{ list2.detail || '暂无' }}</span>
-      </div>
-      <div class="name1"
-           v-if="list2.type === 'exchange'">
-        <span>{{ list2.detail }}</span>
-      </div>
-      <div class="name1"
-           v-if="list2.type == 'qrcode'">
-        <img class="qrcodeImg"
-             :src="list2.detail"
-             alt="" />
-        <div class="qrcode1">扫描二维码进行票务核销</div>
-        <span>{{ list2.remark || '暂无' }}</span>
-      </div>
-      <div v-if="list2.type === 'code'">
-        <div class="copy">
-          <div class="id">
-            {{ list2.detail }}
-            <!-- yshsbn -->
-          </div>
-          <img class="copyImg"
-               @click="copy"
-               src="@assets/svgs/copy_icon.svg"
-               alt="" />
-        </div>
-        <span class="span">说明：</span> <span>{{ list2.remark || '暂无' }}</span>
-        <div class="border"></div>
-        <div class="code">每次交易都会产生校验码</div>
-      </div>
-      <div v-if="list2.openTime">
-        <div v-if="list2.type == 'qrcode'"
-             class="timename">
-          <span class="time">截止时间：</span>{{ list2.openTime }}
-        </div>
-        <div v-else
-             class="timename"><span class="time">打开时间：</span>{{ list2.openTime }}</div>
-      </div>
-    </van-popup>
-    <!-- 悄悄话 -->
-    <van-popup v-model:show="show3">
-      <div class="title2">
-        <div class="top">
-          <img class="img"
-               :src="init2.icon[1]"
-               alt="" />
-          <div class="title3">{{ init2.name }}</div>
+            </div>
         </div>
-        <img @click="allFn2"
-             class="icon"
-             src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-11-13-13-52-01rJiHiwBy.png"
-             alt="" />
-      </div>
-      <div class="border"></div>
-      <div class="name">{{ init2.description }}</div>
-      <div class="name1">
-        <span>{{ init2.detail || '暂无' }}</span>
-      </div>
-      <div v-if="init2.openTime"
-           class="timename"><span class="time">开启时间：</span>{{ init2.openTime }}</div>
-    </van-popup>
-    <!-- 宝盒 -->
-    <div class="whisper">
-      <!-- <van-popup v-model:show="show2">
+        <van-popup v-model:show="show">
+            <div class="title2">
+                <div class="top">
+                    <img class="img" v-if="list2.icon[1]" :src="list2.icon[1]" alt="" />
+                    <img class="img" v-else :src="list2.icon[0]" alt="" />
+                    <div class="title3">{{ list2.name }}</div>
+                </div>
+                <img @click="allFn" class="icon" :src="require('@assets/icon-dianzan.png')" alt="" />
+            </div>
+            <div class="border"></div>
+            <div class="name">{{ list2.description }}</div>
+            <div class="name1" v-if="list2.type === 'text'">
+                <!-- <div>{{ list2.detail }}</div> -->
+                <span>{{ list2.detail || '暂无' }}</span>
+            </div>
+            <div class="name1" v-if="list2.type === 'exchange'">
+                <span>{{ list2.detail }}</span>
+            </div>
+            <div class="name1" v-if="list2.type == 'qrcode'">
+                <img class="qrcodeImg" :src="list2.detail" alt="" />
+                <div class="qrcode1">扫描二维码进行票务核销</div>
+                <span>{{ list2.remark || '暂无' }}</span>
+            </div>
+            <div v-if="list2.type === 'code'">
+                <div class="copy">
+                    <div class="id">
+                        {{ list2.detail }}
+                        <!-- yshsbn -->
+                    </div>
+                    <img class="copyImg" @click="copy" src="@assets/svgs/copy_icon.svg" alt="" />
+                </div>
+                <span class="span">说明：</span> <span>{{ list2.remark || '暂无' }}</span>
+                <div class="border"></div>
+                <div class="code">每次交易都会产生校验码</div>
+            </div>
+            <div v-if="list2.openTime">
+                <div v-if="list2.type == 'qrcode'" class="timename">
+                    <span class="time">截止时间：</span>{{ list2.openTime }}
+                </div>
+                <div v-else class="timename"><span class="time">打开时间：</span>{{ list2.openTime }}</div>
+            </div>
+        </van-popup>
+        <!-- 悄悄话 -->
+        <van-popup v-model:show="show3">
+            <div class="title2">
+                <div class="top">
+                    <img class="img" :src="init2.icon[1]" alt="" />
+                    <div class="title3">{{ init2.name }}</div>
+                </div>
+                <img
+                    @click="allFn2"
+                    class="icon"
+                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-11-13-13-52-01rJiHiwBy.png"
+                    alt=""
+                />
+            </div>
+            <div class="border"></div>
+            <div class="name">{{ init2.description }}</div>
+            <div class="name1">
+                <span>{{ init2.detail || '暂无' }}</span>
+            </div>
+            <div v-if="init2.openTime" class="timename"><span class="time">开启时间：</span>{{ init2.openTime }}</div>
+        </van-popup>
+        <!-- 宝盒 -->
+        <div class="whisper">
+            <!-- <van-popup v-model:show="show2">
                 <div class="con">
                     <div class="Whisper">提示</div>
                     <img
@@ -388,11 +314,10 @@
                     <div>(隐藏内容，只能开启一次)</div>
                 </div>
             </van-popup> -->
-      <!-- <openBox ></openBox> -->
-      <order-open ref="box"
-                  :id="info.id"></order-open>
+            <!-- <openBox ></openBox> -->
+            <order-open ref="box" :id="info.id"></order-open>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
@@ -460,16 +385,16 @@ export default {
             return this.info.stock && this.info.onShelf;
         },
         assetStatusList() {
-            return (val,show)=> {
+            return (val, show) => {
                 const list = {
-                    'NORMAL': show ? '仅展示': '未展示' ,
-                    'TRADING': '转让中',
-                    'TRANSFERRED': '已转让',
-                    'GIFTING': '转赠中',
-                    'GIFTED': '已转赠',
+                    NORMAL: show ? '仅展示' : '未展示',
+                    TRADING: '转让中',
+                    TRANSFERRED: '已转让',
+                    GIFTING: '转赠中',
+                    GIFTED: '已转赠'
                 };
                 return list[val];
-            }
+            };
         }
     },
     mounted() {
@@ -525,9 +450,7 @@ export default {
                     });
             }
         },
-        openedFn(){
-
-        },
+        openedFn() {},
         Whisper() {
             if (!this.init2.once) {
                 this.show2 = true;
@@ -659,7 +582,7 @@ export default {
             });
             this.$http.get('/asset/get/' + this.$route.query.id).then(res => {
                 this.info = res;
-                if(!res.consignment){
+                if (!res.consignment) {
                     // this.show2 = res.variableType;
                     this.$refs.box.showPopup = res.variableType;
                 }
@@ -1326,9 +1249,9 @@ export default {
     .btns1 {
         display: flex;
         padding: 6px 16px 6px 26px;
-		>div:first-child{
-			text-align: center;
-		}
+        > div:first-child {
+            text-align: center;
+        }
         .btn1 {
             margin: 0 16px 0 25px;
         }
@@ -1354,7 +1277,7 @@ export default {
         color: @btnText;
         font-size: @font2;
         border-width: 0px;
-		margin-left: 10px;
+        margin-left: 10px;
     }
 }
 

src/views/asset/GiveSearch.vue

@@ -25,7 +25,7 @@
                 @click="$router.push('/givesubmit?id=' + this.$route.query.id + '&toUserId=' + info.id)"
             >
                 <!-- <img class="img" :src="info.avatar" alt="" /> -->
-                <van-image lazy-load  class="img" width="70" height="70" radius="70" :src="info.avatar" fit="cover" />
+                <van-image lazy-load class="img" width="70" height="70" radius="70" :src="info.avatar" fit="cover" />
                 <div class="init">
                     <div>
                         <div class="text1">{{ info.realName || '保密' }}</div>
@@ -36,11 +36,7 @@
                     <linear-com class="btn">赠送</linear-com>
                 </div>
             </div>
-            <van-empty
-                :image="require('@assets/kong_png_maichude.png')"
-                v-if="empty"
-                description="没有任何藏品哦~"
-            />
+            <van-empty :image="require('@assets/kong_png_maichude.png')" v-if="empty" description="没有任何藏品哦~" />
         </van-list>
     </div>
 </template>

src/views/asset/Search.vue

@@ -31,7 +31,11 @@
                 <asset-info :info="item"></asset-info>
             </template>
 
-            <van-empty v-if="empty" description="什么都没有搜到哦~" :image="require('@assets/kong_png_wudingdan.png')" />
+            <van-empty
+                v-if="empty"
+                description="什么都没有搜到哦~"
+                :image="require('@assets/kong_png_wudingdan.png')"
+            />
         </van-list>
         <div class="search-content" v-else>
             <div class="hot-content" v-if="historys.length > 0">

src/views/creator/Detail.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="mine">
         <div class="userInfo">
-            <van-image lazy-load 
+            <van-image
+                lazy-load
                 width="100%"
                 height="35vw"
                 loading-icon=""
@@ -18,15 +19,16 @@
             </div>
             <div class="userInfo-content">
                 <div class="userInfo-top">
-                    <van-image lazy-load 
+                    <van-image
+                        lazy-load
                         round
                         :class="{ rank: rankInfo.img1 }"
                         width="70"
                         height="70"
                         :src="info.avatar || require('@assets/svgs/img_default_photo.svg')"
                         fit="cover"
-						:style="{'border-color':rankInfo.color }"
-						class="pic-main"
+                        :style="{ 'border-color': rankInfo.color }"
+                        class="pic-main"
                     />
                     <img class="rank-icon" :src="rankInfo.img1" v-if="rankInfo.img1" alt="" />
 
@@ -129,11 +131,7 @@
             <template v-for="(item, index) in list" :key="item.id">
                 <product-info v-model:info="list[index]"></product-info>
             </template>
-            <van-empty
-                v-if="empty"
-                :image="require('@assets/kong_png_maichude.png')"
-                description="没有任何收藏品哦~"
-            />
+            <van-empty v-if="empty" :image="require('@assets/kong_png_maichude.png')" description="没有任何收藏品哦~" />
         </van-list>
     </div>
 </template>
@@ -399,13 +397,13 @@ export default {
     align-items: flex-end;
     position: relative;
     transform: translateX(-5px);
-	.pic-main {
-		// border: 1px solid;
-		border-width: 1px;
-		border-style: solid;
-		border-color: rgba(245, 207, 65,0);
-		background: #fff;
-	}
+    .pic-main {
+        // border: 1px solid;
+        border-width: 1px;
+        border-style: solid;
+        border-color: rgba(245, 207, 65, 0);
+        background: #fff;
+    }
     .van-image {
         // border: 5px solid @bg;
         flex-shrink: 0;

src/views/creator/List.vue

@@ -29,11 +29,7 @@
             <template v-for="(item, index) in list" :key="index">
                 <creator-info v-model:info="list[index]"></creator-info>
             </template>
-            <van-empty
-                :image="require('@assets/kong_png_maichude.png')"
-                v-if="empty"
-                description="没有任何铸造者哦~"
-            />
+            <van-empty :image="require('@assets/kong_png_maichude.png')" v-if="empty" description="没有任何铸造者哦~" />
         </van-list>
     </div>
 </template>
@@ -133,25 +129,25 @@ export default {
     background-color: @bg;
 }
 
-.list{
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	padding-bottom: 40px;
-	.info {
-		margin-top: 40px;
-		text-align: center;
-		width: 296px;
-	//     background-color: @bg;
-		
-	//     /deep/.van-button--mini {
-	//         background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @prim, @warn) !important;
-	
-	//         &.follow {
-	//             background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @text3, @text3) !important;
-	//         }
-	//     }
-	}
+.list {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 40px;
+    .info {
+        margin-top: 40px;
+        text-align: center;
+        width: 296px;
+        //     background-color: @bg;
+
+        //     /deep/.van-button--mini {
+        //         background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @prim, @warn) !important;
+
+        //         &.follow {
+        //             background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @text3, @text3) !important;
+        //         }
+        //     }
+    }
 }
 </style>

src/views/creator/Search.vue

@@ -29,7 +29,11 @@
             <template v-for="(item, index) in list" :key="index">
                 <creator-info v-model:info="list[index]"></creator-info>
             </template>
-            <van-empty v-if="empty" description="什么都没有搜到哦~" :image="require('@assets/kong_png_wudingdan.png')" />
+            <van-empty
+                v-if="empty"
+                description="什么都没有搜到哦~"
+                :image="require('@assets/kong_png_wudingdan.png')"
+            />
         </van-list>
         <div class="search-content" v-else>
             <div class="hot-content" v-if="historys.length > 0">

src/views/order/Detail.vue

@@ -15,7 +15,14 @@
             <div class="product">
                 <div class="product-name">{{ info.minter }}</div>
                 <div class="product-info">
-                    <van-image lazy-load  :radius="6" width="80" height="80" :src="getImg(changeImgs(info.pic))" fit="cover" />
+                    <van-image
+                        lazy-load
+                        :radius="6"
+                        width="80"
+                        height="80"
+                        :src="getImg(changeImgs(info.pic))"
+                        fit="cover"
+                    />
                     <div class="product-content">
                         <div class="text1 van-multi-ellipsis--l2">{{ info.name }}</div>
                         <div class="text2" v-if="info.number">编号:{{ info.number }}</div>

src/views/product/Detail.vue

@@ -1,87 +1,83 @@
 <template>
-  <div class="detail">
-    <product-banner :info="info"
-                    @getProduct="getProduct"></product-banner>
+    <div class="detail">
+        <product-banner :info="info" @getProduct="getProduct"></product-banner>
 
-    <div class="info">
-      <div class="info-title">
-        <product-title :isSmall="info.name && info.name.length > 16">{{ info.name }}</product-title>
-      </div>
-      <!-- <div class="name" v-if="info.salable && startTime">
+        <div class="info">
+            <div class="info-title">
+                <product-title :isSmall="info.name && info.name.length > 16">{{ info.name }}</product-title>
+            </div>
+            <!-- <div class="name" v-if="info.salable && startTime">
                 <div class="name1">首发抢购倒计时</div>
                 <div class="name2">{{ startTime }}</div>
             </div> -->
-      <div class="price-line"
-           v-if="info.salable">
-        <div v-if="buyFirst"
-             class="box"
-             :class="[buyFirst.collectionName == 1 ? 'red': 'blue']">
-          <span class="name">优先购</span>
-          <span class="count"> 剩余 {{buyFirst.count}}</span>
-        </div>
-        <div class="text"
-             v-if="info.number">编号 {{ info.number }}</div>
-        <div class="text total"
-             v-if="info.total > 1">
-          <span>限量</span>
-          <span>{{ info.total }}份</span>
-        </div>
-       <!--<div class="text"
+            <div class="price-line" v-if="info.salable">
+                <div v-if="buyFirst" class="box" :class="[buyFirst.collectionName == 1 ? 'red' : 'blue']">
+                    <span class="name">优先购</span>
+                    <span class="count"> 剩余 {{ buyFirst.count }}</span>
+                </div>
+                <div class="text" v-if="info.number">编号 {{ info.number }}</div>
+                <div class="text total" v-if="info.total > 1">
+                    <span>限量</span>
+                    <span>{{ info.total }}份</span>
+                </div>
+                <!--<div class="text"
              v-if="info.salable && !isSold && info.total !== 1">
           <span>已售 {{ Math.min(info.sale, info.total) }}</span>
           <span>剩余 {{ Math.max(info.stock, 0) }}</span>
         </div> -->
-      </div>
-      <!-- <div class="title">{{ info.name }}</div> -->
-      <div class="info-bottom">
-        <!-- <span class="text1" v-if="info.number"> 编号 {{ info.number }} </span> -->
-        <!-- <van-button
+            </div>
+            <!-- <div class="title">{{ info.name }}</div> -->
+            <div class="info-bottom">
+                <!-- <span class="text1" v-if="info.number"> 编号 {{ info.number }} </span> -->
+                <!-- <van-button
           v-if="info.type !== 'DEFAULT'"
           type="primary"
           plain
           size="mini"
           >选择其他编号</van-button
         > -->
-        <!-- <like-button :isLike="info.liked" @click="likeProduct">
+                <!-- <like-button :isLike="info.liked" @click="likeProduct">
                     {{ info.likes }}
                 </like-button> -->
-      </div>
-    </div>
-
-    <!-- </template> -->
-    <div class="goods">
-      <van-collapse v-model="activeNames">
-        <van-collapse-item name="1"
-                           class="goods-info">
-          <template #title>
-            <div class="page-title">
-              <img src="@assets/fenxiang-icon.png"
-                   alt="" />
-              用户信息
             </div>
-          </template>
-          <div class="user">
-            <van-cell class="creator"
-                      :to="{
+        </div>
+
+        <!-- </template> -->
+        <div class="goods">
+            <van-collapse v-model="activeNames">
+                <van-collapse-item name="1" class="goods-info">
+                    <template #title>
+                        <div class="page-title">
+                            <img src="@assets/fenxiang-icon.png" alt="" />
+                            用户信息
+                        </div>
+                    </template>
+                    <div class="user">
+                        <van-cell
+                            class="creator"
+                            :to="{
                                 path: '/creatorDetail',
                                 query: {
                                     id: info.minterId
                                 }
-                            }">
-              <template #icon>
-                <van-image lazy-load
-                           width="32"
-                           height="32"
-                           :src="info.minterAvatar || require('@assets/svgs/img_default_photo.svg')"
-                           fit="cover"
-                           radius="100" />
-              </template>
-              <template #title>
-                <div class="text1">{{ info.minter }}</div>
-                <div class="text2">铸造者</div>
-              </template>
-            </van-cell>
-           <!-- <van-cell v-if="info.ownerId !== info.minterId"
+                            }"
+                        >
+                            <template #icon>
+                                <van-image
+                                    lazy-load
+                                    width="32"
+                                    height="32"
+                                    :src="info.minterAvatar || require('@assets/svgs/img_default_photo.svg')"
+                                    fit="cover"
+                                    radius="100"
+                                />
+                            </template>
+                            <template #title>
+                                <div class="text1">{{ info.minter }}</div>
+                                <div class="text2">铸造者</div>
+                            </template>
+                        </van-cell>
+                        <!-- <van-cell v-if="info.ownerId !== info.minterId"
                       class="creator"
                       :to="{
                                 path: '/creatorDetail',
@@ -104,50 +100,40 @@
                 <div class="text2">持有者</div>
               </template>
             </van-cell> -->
-          </div>
-        </van-collapse-item>
+                    </div>
+                </van-collapse-item>
 
-        <van-collapse-item name="2"
-                           class="goods-info">
-          <template #title>
-            <div class="page-title"><img src="@assets/icon-miaoshu.png"
-                   alt="" />作品描述</div>
-          </template>
-          <swiper v-if="boxs.length > 0"
-                  :slidesPerView="'auto'"
-                  :spaceBetween="20"
-                  class="detail-swiper">
-            <swiper-slide v-for="(item, index) in boxs"
-                          :key="index">
-              <van-image lazy-load
-                         width="100%"
-                         height="130"
-                         :src="getImg(item, '', 1000)"
-                         fit="cover"
-                         radius="12"
-                         @click="preview(index, boxs)" />
-            </swiper-slide>
-          </swiper>
-          <div v-if="info.detail"
-               class="page-text page-detail"
-               v-html="info.detail"></div>
-        </van-collapse-item>
-        <van-collapse-item name="3"
-                           class="goods-info top1">
-          <template #title>
-            <div class="page-title"><img src="@assets/icon-lianshangxinxi.png"
-                   alt="" /> 类型</div>
-          </template>
-          <div class="top1">
-            <div v-if="info.category"
-                 class="category">
-              <span>{{ info.category }}</span>
-            </div>
-            <div v-else
-                 class="tips">铸造者未设置</div>
-          </div>
-        </van-collapse-item>
-       <!-- <van-collapse-item name="4" class="goods-info" >
+                <van-collapse-item name="2" class="goods-info">
+                    <template #title>
+                        <div class="page-title"><img src="@assets/icon-miaoshu.png" alt="" />作品描述</div>
+                    </template>
+                    <swiper v-if="boxs.length > 0" :slidesPerView="'auto'" :spaceBetween="20" class="detail-swiper">
+                        <swiper-slide v-for="(item, index) in boxs" :key="index">
+                            <van-image
+                                lazy-load
+                                width="100%"
+                                height="130"
+                                :src="getImg(item, '', 1000)"
+                                fit="cover"
+                                radius="12"
+                                @click="preview(index, boxs)"
+                            />
+                        </swiper-slide>
+                    </swiper>
+                    <div v-if="info.detail" class="page-text page-detail" v-html="info.detail"></div>
+                </van-collapse-item>
+                <van-collapse-item name="3" class="goods-info top1">
+                    <template #title>
+                        <div class="page-title"><img src="@assets/icon-lianshangxinxi.png" alt="" /> 类型</div>
+                    </template>
+                    <div class="top1">
+                        <div v-if="info.category" class="category">
+                            <span>{{ info.category }}</span>
+                        </div>
+                        <div v-else class="tips">铸造者未设置</div>
+                    </div>
+                </van-collapse-item>
+                <!-- <van-collapse-item name="4" class="goods-info" >
           <template #title>
             <div class="page-title">
               <img src="@assets/qiaoqiaohua-icon-weidakai.png"
@@ -167,173 +153,126 @@
           <div class="tips"
                v-else>铸造者未设置</div>
         </van-collapse-item> -->
-        <van-collapse-item name="5"
-                           class="goods-info">
-          <template #title>
-            <div class="titleIcon page-title">
-              <img src="@assets/icon-lianshangxinxi(1).png"
-                   alt="" />
-              持有特权
-              <span>（灰色表示已使用）</span>
-            </div>
-          </template>
-          <div class="prive"
-               v-if="init.length > 0">
-            <div v-for="(item, index) in init"
-                 :key="index">
-              <div class="prive1">
-                <img class="img"
-                     :src="item.icon[0]"
-                     alt="" />
-                <div class="prive2">{{ item.name }}</div>
-              </div>
-            </div>
-          </div>
-          <div v-if="init.length === 0"
-               class="tips">铸造者未设置</div>
-        </van-collapse-item>
-        <van-collapse-item name="6"
-                           class="goods-info">
-          <template #title>
-            <div class="page-title"><img src="@assets/icon-lianshangxinxi(2).png"
-                   alt="" />作品特性</div>
-          </template>
-          <div class="specific-list"
-               v-if="properties.length > 0">
-            <div class="specific-item"
-                 v-for="(item, index) in properties"
-                 :key="index">
-              <div class="text1">{{ item.name }}</div>
-              <div class="text2">{{ item.value }}</div>
-            </div>
-          </div>
-          <div v-else
-               class="textName">铸造者未设置</div>
-        </van-collapse-item>
-        <hash-code :info="info"></hash-code>
-        <van-collapse-item name="8" class="goods-info">
-          <template #title>
-            <div class="page-title"><img src="@assets/info_icon_jiaoyijilu1.png"
-                   alt="" />交易记录</div>
-          </template>
-          <div v-if="list.length > 0">
-            <div class="content"
-                 v-for="item in list"
-                 :key="item.id">
-             <img class="img" :src="list.avatar" alt="" v-if="false" />
-              <div class="user-detail">
-                <!-- <div class="text1 van-ellipsis">{{ item.fromUser || '保密' }}</div> -->
-                <div class="text2"
-                     v-if="item.price">{{ item.operation }}¥{{ item.price }}</div>
-                <div class="text2"
-                     v-else>{{ item.operation }}</div>
-                <!-- <div class="text3 van-ellipsis">{{ item.toUser || '保密' }}</div> -->
-                <div class="text4">{{ item.createdAt.substr(0, 16) }}</div>
-              </div>
-            </div>
-          </div>
-          <div v-else
-               class="textName">暂无购买记录</div>
-        </van-collapse-item>
-      </van-collapse>
-    </div>
-    <!-- <div class="btn van-safe-area-bottom">
+                <van-collapse-item name="5" class="goods-info">
+                    <template #title>
+                        <div class="titleIcon page-title">
+                            <img src="@assets/icon-lianshangxinxi(1).png" alt="" />
+                            持有特权
+                            <span>（灰色表示已使用）</span>
+                        </div>
+                    </template>
+                    <div class="prive" v-if="init.length > 0">
+                        <div v-for="(item, index) in init" :key="index">
+                            <div class="prive1">
+                                <img class="img" :src="item.icon[0]" alt="" />
+                                <div class="prive2">{{ item.name }}</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-if="init.length === 0" class="tips">铸造者未设置</div>
+                </van-collapse-item>
+                <van-collapse-item name="6" class="goods-info">
+                    <template #title>
+                        <div class="page-title"><img src="@assets/icon-lianshangxinxi(2).png" alt="" />作品特性</div>
+                    </template>
+                    <div class="specific-list" v-if="properties.length > 0">
+                        <div class="specific-item" v-for="(item, index) in properties" :key="index">
+                            <div class="text1">{{ item.name }}</div>
+                            <div class="text2">{{ item.value }}</div>
+                        </div>
+                    </div>
+                    <div v-else class="textName">铸造者未设置</div>
+                </van-collapse-item>
+                <hash-code :info="info"></hash-code>
+                <van-collapse-item name="8" class="goods-info">
+                    <template #title>
+                        <div class="page-title"><img src="@assets/info_icon_jiaoyijilu1.png" alt="" />交易记录</div>
+                    </template>
+                    <div v-if="list.length > 0">
+                        <div class="content" v-for="item in list" :key="item.id">
+                            <img class="img" :src="list.avatar" alt="" v-if="false" />
+                            <div class="user-detail">
+                                <!-- <div class="text1 van-ellipsis">{{ item.fromUser || '保密' }}</div> -->
+                                <div class="text2" v-if="item.price">{{ item.operation }}¥{{ item.price }}</div>
+                                <div class="text2" v-else>{{ item.operation }}</div>
+                                <!-- <div class="text3 van-ellipsis">{{ item.toUser || '保密' }}</div> -->
+                                <div class="text4">{{ item.createdAt.substr(0, 16) }}</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-else class="textName">暂无购买记录</div>
+                </van-collapse-item>
+            </van-collapse>
+        </div>
+        <!-- <div class="btn van-safe-area-bottom">
             <div class="btns">
                 <van-button @click="appointment" type="primary" block round>
                     {{ info.appointment ? '已预约' : '一键预约' }}
                 </van-button>
             </div>
         </div> -->
-    <div class="btn van-safe-area-bottom"
-         ref="btn"
-         v-if="info.scheduleSale && !info.salable">
-      <div class="btn-list">
-        <div class="price-content">
-          <div class="price">
-            <img src="@assets/jiage_huang.png"
-                 alt="" />
-            {{ info.price }}
-          </div>
-          <div class="price-sub"
-               v-if="info.originalPrice">¥{{ info.originalPrice || 0 }}</div>
-          <div class="sub"
-               v-if="info.royalties">
-            含 <span>{{ info.royalties }}%</span> 版税
-          </div>
-        </div>
-        <div class="flex1"></div>
-        <div class="btns">
-          <van-button class="no-btn"
-                      v-if="isAppointment && !isForwardBuying"
-                      block
-                      round>
-            <div class="appoint">
-              <span>即将开售</span>
-              <span>{{ startTime }}</span>
+        <div class="btn van-safe-area-bottom" ref="btn" v-if="info.scheduleSale && !info.salable">
+            <div class="btn-list">
+                <div class="price-content">
+                    <div class="price">
+                        <img src="@assets/jiage_huang.png" alt="" />
+                        {{ info.price }}
+                    </div>
+                    <div class="price-sub" v-if="info.originalPrice">¥{{ info.originalPrice || 0 }}</div>
+                    <div class="sub" v-if="info.royalties">
+                        含 <span>{{ info.royalties }}%</span> 版税
+                    </div>
+                </div>
+                <div class="flex1"></div>
+                <div class="btns">
+                    <van-button class="no-btn" v-if="isAppointment && !isForwardBuying" block round>
+                        <div class="appoint">
+                            <span>即将开售</span>
+                            <span>{{ startTime }}</span>
+                        </div>
+                    </van-button>
+                </div>
             </div>
-          </van-button>
         </div>
-      </div>
-    </div>
-    <div class="btn van-safe-area-bottom"
-         ref="btn"
-         v-else-if="info.salable">
-      <div class="btn-list">
-        <div class="price-content">
-          <div class="price">
-            <img src="@assets/jiage_huang.png"
-                 alt="" />
-            {{ info.price }}
-          </div>
-          <div class="price-sub"
-               v-if="info.originalPrice">¥{{ info.originalPrice || 0 }}</div>
-          <div class="sub"
-               v-if="info.royalties">
-            含 <span>{{ info.royalties }}%</span> 版税
-          </div>
-        </div>
-        <div class="flex1"></div>
-        <div class="btns">
-          <van-button class="no-btn"
-                      v-if="isAppointment && !isForwardBuying"
-                      block
-                      round>
-            <div class="appoint">
-              <span>即将开售</span>
-              <span>{{ startTime }}</span>
+        <div class="btn van-safe-area-bottom" ref="btn" v-else-if="info.salable">
+            <div class="btn-list">
+                <div class="price-content">
+                    <div class="price">
+                        <img src="@assets/jiage_huang.png" alt="" />
+                        {{ info.price }}
+                    </div>
+                    <div class="price-sub" v-if="info.originalPrice">¥{{ info.originalPrice || 0 }}</div>
+                    <div class="sub" v-if="info.royalties">
+                        含 <span>{{ info.royalties }}%</span> 版税
+                    </div>
+                </div>
+                <div class="flex1"></div>
+                <div class="btns">
+                    <van-button class="no-btn" v-if="isAppointment && !isForwardBuying" block round>
+                        <div class="appoint">
+                            <span>即将开售</span>
+                            <span>{{ startTime }}</span>
+                        </div>
+                    </van-button>
+                    <van-button v-else-if="isAppointment && isForwardBuying" type="primary" block round @click="buy"
+                        >优先购</van-button
+                    >
+                    <van-button class="no-btn" v-else-if="isSold" block round>已售磬</van-button>
+                    <van-button v-else type="primary" block round @click="buy">立即购买</van-button>
+                </div>
             </div>
-          </van-button>
-          <van-button v-else-if="isAppointment && isForwardBuying"
-                      type="primary"
-                      block
-                      round
-                      @click="buy">优先购</van-button>
-          <van-button class="no-btn"
-                      v-else-if="isSold"
-                      block
-                      round>已售磬</van-button>
-          <van-button v-else
-                      type="primary"
-                      block
-                      round
-                      @click="buy">立即购买</van-button>
         </div>
-      </div>
-    </div>
 
-    <div class="btn van-safe-area-bottom"
-         v-else>
-      <div class="status-text">仅展示</div>
-    </div>
+        <div class="btn van-safe-area-bottom" v-else>
+            <div class="status-text">仅展示</div>
+        </div>
 
-    <!-- <driver /> -->
+        <!-- <driver /> -->
 
-    <!-- <driver /> -->
+        <!-- <driver /> -->
 
-    <post ref="post"
-          :info="info"
-          noButton />
-  </div>
+        <post ref="post" :info="info" noButton />
+    </div>
 </template>
 
 <script>
@@ -433,7 +372,7 @@ export default {
                 .get('/collection/get/' + this.$route.query.id)
                 .then(res => {
                     this.info = res;
-                    this.buyFirst =  res.preEmptionPrivilege;
+                    this.buyFirst = res.preEmptionPrivilege;
                     if (this.inWeixin) {
                         wx.updateAppMessageShareData({
                             title: '默望数字艺术馆-' + res.name,
@@ -509,40 +448,41 @@ export default {
                 });
         },
         buy() {
-			
-			    // if (this.info.source == 'TRANSFER') {
-			    //     this.$toast('二手支付通道正在升级中');
-			    //     return;
-			    // }
-			
-			    this.checkLogin().then(() => {
-					if(this.authStatus === '已认证'){
-						this.$router.push({
-						    path: '/submit',
-						    query: {
-						        id: this.$route.query.id,
-						        invitor: this.$route.query.invitor
-						    }
-						});
-					}else if (this.authStatus === '认证中' || this.authStatus === '认证失败') {
-						this.$dialog.confirm({
-						    title: '温馨提示',
-						    message: '实名认证中，认证通过后才可购买',
-							confirmButtonText:'前往查看'
-						}).then(() => {
-						   this.$router.push('/waiting');
-						});
-					} else if (this.authStatus === '未认证') {
-						this.$dialog.confirm({
-						    title: '温馨提示',
-						    message: '请先完成实名认证才可以购买',
-						}).then(() => {
-						   this.$router.push('/Authentication');
-						});
-					}
-					
-			        
-			    });
+            // if (this.info.source == 'TRANSFER') {
+            //     this.$toast('二手支付通道正在升级中');
+            //     return;
+            // }
+
+            this.checkLogin().then(() => {
+                if (this.authStatus === '已认证') {
+                    this.$router.push({
+                        path: '/submit',
+                        query: {
+                            id: this.$route.query.id,
+                            invitor: this.$route.query.invitor
+                        }
+                    });
+                } else if (this.authStatus === '认证中' || this.authStatus === '认证失败') {
+                    this.$dialog
+                        .confirm({
+                            title: '温馨提示',
+                            message: '实名认证中，认证通过后才可购买',
+                            confirmButtonText: '前往查看'
+                        })
+                        .then(() => {
+                            this.$router.push('/waiting');
+                        });
+                } else if (this.authStatus === '未认证') {
+                    this.$dialog
+                        .confirm({
+                            title: '温馨提示',
+                            message: '请先完成实名认证才可以购买'
+                        })
+                        .then(() => {
+                            this.$router.push('/Authentication');
+                        });
+                }
+            });
         }
     }
 };

src/views/product/DetailMode.vue

@@ -77,7 +77,7 @@
             }"
         >
             <template #icon>
-                <van-image lazy-load  width="40" height="40" :src="info.minterAvatar" fit="cover" radius="100" />
+                <van-image lazy-load width="40" height="40" :src="info.minterAvatar" fit="cover" radius="100" />
             </template>
             <template #title>
                 <div class="text1">{{ info.minter }}</div>
@@ -92,7 +92,8 @@
                 <div class="page-title">宝盒详情</div>
                 <swiper :slidesPerView="'auto'" :spaceBetween="20" class="detail-swiper">
                     <swiper-slide v-for="(item, index) in boxs" :key="index">
-                        <van-image lazy-load 
+                        <van-image
+                            lazy-load
                             width="100%"
                             height="170"
                             :src="getImg(item, '', 1000)"

src/views/product/DetailPre.vue

@@ -13,7 +13,8 @@
                 >
                     您的浏览器不支持 video 标签。
                 </video>
-                <van-image lazy-load 
+                <van-image
+                    lazy-load
                     v-else
                     @click="preview(index, changeImgs(banners))"
                     :src="getImg(item.url, '', 1200)"
@@ -72,7 +73,7 @@
             }"
         >
             <template #icon>
-                <van-image lazy-load  width="40" height="40" :src="info.minterAvatar" fit="cover" radius="100" />
+                <van-image lazy-load width="40" height="40" :src="info.minterAvatar" fit="cover" radius="100" />
             </template>
             <template #title>
                 <div class="text1">{{ info.minter }}</div>
@@ -87,7 +88,8 @@
                 <div class="page-title">宝盒详情</div>
                 <swiper :slidesPerView="'auto'" :spaceBetween="20" class="detail-swiper">
                     <swiper-slide v-for="(item, index) in boxs" :key="index">
-                        <van-image lazy-load 
+                        <van-image
+                            lazy-load
                             width="100%"
                             height="170"
                             :src="getImg(item, '', 1000)"

src/views/product/List.vue

@@ -1,81 +1,64 @@
 <template>
-  <div class="follow">
-    <van-sticky ref="top"
-                class="list-top"
-                :offset-top="bar.value.show ? 46 : 0">
-      <div class="top"
-           v-if="!minterId">
-        <div class="name">{{ title || pageName }}</div>
-        <!-- <img v-if="!title"
+    <div class="follow">
+        <van-sticky ref="top" class="list-top" :offset-top="bar.value.show ? 46 : 0">
+            <div class="top" v-if="!minterId">
+                <div class="name">{{ title || pageName }}</div>
+                <!-- <img v-if="!title"
              src="@assets/icon-sosuo.png"
              alt=""
              @click="goSearch"
              class="search" /> -->
-        <div class="search">
-          <van-icon v-if="!title"
-                    name="search"
-                    @click="goSearch" />
-          <van-icon v-if="!title"
-                    name="filter-o"
-                    @click="$refs.calss.showPicker = true" />
-        </div>
-      </div>
-      <van-tabs v-if="!title"
+                <div class="search">
+                    <van-icon v-if="!title" name="search" @click="goSearch" />
+                    <van-icon v-if="!title" name="filter-o" @click="$refs.calss.showPicker = true" />
+                </div>
+            </div>
+            <van-tabs
+                v-if="!title"
                 v-model:active="sort"
                 :ellipsis="false"
                 line-width="16"
                 line-height="2"
                 @click-tab="changeTab"
-                :class="{ trans: source == 'TRANSFER' }">
-        <van-tab :title="item.label"
-                 :name="item.value"
-                 :title-class="item.type === 'select' && sortDes ? sortDes : ''"
-                 :key="index"
-                 v-for="(item, index) in selectOptions">
-          <template v-if="item.type === 'select'"
-                    #title>
-            <div class="tab">
-              <span>{{ item.label }}</span>
-              <van-icon size="8"
-                        name="arrow-up" />
-              <van-icon size="8"
-                        name="arrow-down" />
+                :class="{ trans: source == 'TRANSFER' }"
+            >
+                <van-tab
+                    :title="item.label"
+                    :name="item.value"
+                    :title-class="item.type === 'select' && sortDes ? sortDes : ''"
+                    :key="index"
+                    v-for="(item, index) in selectOptions"
+                >
+                    <template v-if="item.type === 'select'" #title>
+                        <div class="tab">
+                            <span>{{ item.label }}</span>
+                            <van-icon size="8" name="arrow-up" />
+                            <van-icon size="8" name="arrow-down" />
+                        </div>
+                    </template>
+                </van-tab>
+            </van-tabs>
+            <div class="sala" v-if="title == '版权品市场'" @click="show = true">
+                <!-- <img src="../../assets/art/svgs/icon_shuaxuan.svg" alt="" /> -->
+                <van-dropdown-menu>
+                    <van-dropdown-item v-model="activeId" :options="items" />
+                </van-dropdown-menu>
             </div>
-          </template>
-        </van-tab>
-      </van-tabs>
-      <div class="sala"
-           v-if="title == '版权品市场'"
-           @click="show = true">
-        <!-- <img src="../../assets/art/svgs/icon_shuaxuan.svg" alt="" /> -->
-        <van-dropdown-menu>
-          <van-dropdown-item v-model="activeId"
-                             :options="items" />
-        </van-dropdown-menu>
-      </div>
-      <!-- <van-checkbox v-if="source == 'TRANSFER' && !title"
+            <!-- <van-checkbox v-if="source == 'TRANSFER' && !title"
                     @change="getData(true)"
                     class="sala"
                     v-model="salable">仅看在售</van-checkbox> -->
-    </van-sticky>
+        </van-sticky>
 
-    <van-list v-model:loading="loading"
-              :finished="finished"
-              finished-text=""
-              @load="getData">
-      <template v-for="(item, index) in list"
-                :key="index">
-        <product-info v-model:info="list[index]"
-                      @update:info="init"></product-info>
-      </template>
+        <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
+            <template v-for="(item, index) in list" :key="index">
+                <product-info v-model:info="list[index]" @update:info="init"></product-info>
+            </template>
 
-      <van-empty :image="require('@assets/kong_png_maichude.png')"
-                 v-if="empty"
-                 description="没有任何藏品哦~" />
-    </van-list>
-    <class-List ref="calss"
-                @update="changeTis"></class-List>
-  </div>
+            <van-empty :image="require('@assets/kong_png_maichude.png')" v-if="empty" description="没有任何藏品哦~" />
+        </van-list>
+        <class-List ref="calss" @update="changeTis"></class-List>
+    </div>
 </template>
 
 <script>
@@ -85,7 +68,7 @@ import ProductInfo from '../../components/product/productInfo.vue';
 import product from '../../mixins/product';
 import list from '../../mixins/list';
 export default {
-    components: { ProductInfo ,classList},
+    components: { ProductInfo, classList },
     inject: ['bar'],
     mixins: [product, list],
     data() {
@@ -147,9 +130,9 @@ export default {
 
         if (this.$route.query.title) {
             this.title = this.$route.query.title;
-			if(this.title == '本期推荐'){
-				this.salable = ''
-			}
+            if (this.title == '本期推荐') {
+                this.salable = '';
+            }
         }
 
         if (this.$route.query.maxSize) {
@@ -179,7 +162,7 @@ export default {
                     del: false,
                     collectionCategoryId: this.activeId,
                     minterId: this.minterId,
-                    salable: this.salable || '',
+                    salable: this.salable || ''
                 },
                 sort: this.sortOptions[this.title] || sort
             };
@@ -216,9 +199,9 @@ export default {
                     // this.$toast(e.error);
                 });
         },
-        changeTis(id,tis){
-            this.activeId = id
-            this.tips = tis
+        changeTis(id, tis) {
+            this.activeId = id;
+            this.tips = tis;
         },
         goSearch() {
             let url = '/productSearch';

src/views/product/Search.vue

@@ -29,7 +29,11 @@
             <template v-for="(item, index) in list" :key="index">
                 <product-info v-model:info="list[index]" @update:info="init"></product-info>
             </template>
-            <van-empty v-if="empty" description="什么都没有搜到哦~" :image="require('@assets/kong_png_wudingdan.png')" />
+            <van-empty
+                v-if="empty"
+                description="什么都没有搜到哦~"
+                :image="require('@assets/kong_png_wudingdan.png')"
+            />
         </van-list>
         <div class="search-content" v-else>
             <div class="hot-content" v-if="historys.length > 0">

src/views/user/Banks.vue

@@ -1,36 +1,34 @@
 <template>
-  <div class="page">
-    <page-bar>我的银行卡</page-bar>
+    <div class="page">
+        <page-bar>我的银行卡</page-bar>
 
-    <div class="add"
-         @click="add"
-         v-if="list.length === 0">
-      <img src="@assets/png-tianjia.png"
-           alt="" />
-      <span>添加银行卡</span>
-    </div>
-
-    <div class="list">
-      <div class="bank-info"
-           v-for="(item, index) in list"
-           :key="index">
-        <div class="info1">
-          <div class="text1">{{ item.bankName }}</div>
-          <div class="text2">{{ getNum(item.bankNo) }}</div>
+        <div class="add" @click="add" v-if="list.length === 0">
+            <img src="@assets/png-tianjia.png" alt="" />
+            <span>添加银行卡</span>
         </div>
-        <div class="info1">
-          <div class="text1">{{ item.cardTypeDesc }}</div>
-          <div class="text2">
-            <van-button :to="{ path: `${item.hasWallet ? '/mineBanksEdit' : '/mineBanksRemove'}` }"
-                        plain
-                        hairline
-                        size="mini"
-                        type="primary">{{ item.hasWallet ? '换绑' : '解绑' }}</van-button>
-          </div>
+
+        <div class="list">
+            <div class="bank-info" v-for="(item, index) in list" :key="index">
+                <div class="info1">
+                    <div class="text1">{{ item.bankName }}</div>
+                    <div class="text2">{{ getNum(item.bankNo) }}</div>
+                </div>
+                <div class="info1">
+                    <div class="text1">{{ item.cardTypeDesc }}</div>
+                    <div class="text2">
+                        <van-button
+                            :to="{ path: `${item.hasWallet ? '/mineBanksEdit' : '/mineBanksRemove'}` }"
+                            plain
+                            hairline
+                            size="mini"
+                            type="primary"
+                            >{{ item.hasWallet ? '换绑' : '解绑' }}</van-button
+                        >
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>

src/views/user/BanksAdd.vue

@@ -1,63 +1,59 @@
 <template>
-  <div class="page">
-    <page-bar>
-      添加银行卡
-      <template #sub>成功绑定银行卡后</template>
-      <template #sub-prim>不能修改</template>
-    </page-bar>
-    <van-form @submit="onSubmit"
-              class="form">
-      <van-field type="digit"
-                 name="卡号"
-                 label="卡号"
-                 :maxlength="23"
-                 placeholder="点击输入银行卡号"
-                 :formatter="bankFormatter"
-                 v-model="form.bankNo"
-                 clearable
-                 :rules="[{ required: true, message: '请填写银行卡号' }]" />
-      <van-field type="tel"
-                 name="银行预留手机号"
-                 label="银行预留手机号"
-                 placeholder="请输入银行预留手机号"
-                 v-model="form.phone"
-                 :rules="[
+    <div class="page">
+        <page-bar>
+            添加银行卡
+            <template #sub>成功绑定银行卡后</template>
+            <template #sub-prim>不能修改</template>
+        </page-bar>
+        <van-form @submit="onSubmit" class="form">
+            <van-field
+                type="digit"
+                name="卡号"
+                label="卡号"
+                :maxlength="23"
+                placeholder="点击输入银行卡号"
+                :formatter="bankFormatter"
+                v-model="form.bankNo"
+                clearable
+                :rules="[{ required: true, message: '请填写银行卡号' }]"
+            />
+            <van-field
+                type="tel"
+                name="银行预留手机号"
+                label="银行预留手机号"
+                placeholder="请输入银行预留手机号"
+                v-model="form.phone"
+                :rules="[
                     { required: true, message: '请填写银行预留手机号' },
                     {
                         pattern: phonePattern,
                         message: '手机号码格式错误'
                     }
-                ]" />
-      <div class="sub">
-        <van-button type="primary"
-                    :disabled="!canNext"
-                    round
-                    block
-                    native-type="submit">下一步</van-button>
-      </div>
-    </van-form>
+                ]"
+            />
+            <div class="sub">
+                <van-button type="primary" :disabled="!canNext" round block native-type="submit">下一步</van-button>
+            </div>
+        </van-form>
 
-    <van-popup class="popup-content"
-               v-model:show="show"
-               teleport="body"
-               position="bottom">
-      <div class="popup">
-        <div class="cancel"
-             @click="show = false">取消</div>
-        <div class="title">输入验证码</div>
-        <div class="phone">已发送到您{{ phoneText }}手机</div>
-        <van-password-input :value="form.code"
-                            :length="4" />
-        <!-- 数字键盘 -->
-        <van-number-keyboard maxlength="4"
-                             theme="custom"
-                             v-model="form.code"
-                             :show="show"
-                             close-button-text="完成"
-                             @close="bind" />
-      </div>
-    </van-popup>
-  </div>
+        <van-popup class="popup-content" v-model:show="show" teleport="body" position="bottom">
+            <div class="popup">
+                <div class="cancel" @click="show = false">取消</div>
+                <div class="title">输入验证码</div>
+                <div class="phone">已发送到您{{ phoneText }}手机</div>
+                <van-password-input :value="form.code" :length="4" />
+                <!-- 数字键盘 -->
+                <van-number-keyboard
+                    maxlength="4"
+                    theme="custom"
+                    v-model="form.code"
+                    :show="show"
+                    close-button-text="完成"
+                    @close="bind"
+                />
+            </div>
+        </van-popup>
+    </div>
 </template>
 
 <script>
@@ -101,7 +97,9 @@ export default {
                 });
                 let bankNo = this.form.bankNo.replace(/ /g, '');
                 this.$http
-                    .post(`/user/addBankCard?bankNo=${bankNo}&phone=${this.form.phone}&code=${this.form.code}&projectId=${this.projectId}`)
+                    .post(
+                        `/user/addBankCard?bankNo=${bankNo}&phone=${this.form.phone}&code=${this.form.code}&projectId=${this.projectId}`
+                    )
                     .then(res => {
                         this.$toast.success('添加成功');
                         setTimeout(() => {

src/views/user/BanksRemove.vue

@@ -1,44 +1,40 @@
 <template>
-  <div class="page">
-    <page-bar>
-      解绑银行卡
-    </page-bar>
-    <van-form @submit="onSubmit"
-              class="form">
-      <van-field v-model="form.password"
-                 type="password"
-                 maxlength="6"
-                 label="交易密码"
-                 placeholder="请输入交易密码"
-                 :rules="[{ required: true, message: '请输入交易密码' }]" />
+    <div class="page">
+        <page-bar> 解绑银行卡 </page-bar>
+        <van-form @submit="onSubmit" class="form">
+            <van-field
+                v-model="form.password"
+                type="password"
+                maxlength="6"
+                label="交易密码"
+                placeholder="请输入交易密码"
+                :rules="[{ required: true, message: '请输入交易密码' }]"
+            />
 
-      <van-field v-model="form.code"
-                 clearable
-                 label="短信验证码"
-                 placeholder="请输入银行卡预留的手机号短信验证码"
-                 :rules="[{ required: true, message: '请输入银行卡预留的手机号短信验证码' }]">
-        <template #button>
-          <van-button @click="getSmsVerify"
-                      :disabled="isSend"
-                      size="small"
-                      type="primary">{{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}</van-button>
-        </template>
-      </van-field>
-      <div class="sub">
-        <van-button type="primary"
-                    round
-                    block
-                    native-type="submit">确定</van-button>
-      </div>
-    </van-form>
-  </div>
+            <van-field
+                v-model="form.code"
+                clearable
+                label="短信验证码"
+                placeholder="请输入银行卡预留的手机号短信验证码"
+                :rules="[{ required: true, message: '请输入银行卡预留的手机号短信验证码' }]"
+            >
+                <template #button>
+                    <van-button @click="getSmsVerify" :disabled="isSend" size="small" type="primary">{{
+                        isSend ? `已发送(${sendNum})S` : '发送验证码'
+                    }}</van-button>
+                </template>
+            </van-field>
+            <div class="sub">
+                <van-button type="primary" round block native-type="submit">确定</van-button>
+            </div>
+        </van-form>
+    </div>
 </template>
 
 <script>
 import { mapState } from 'vuex';
 import phone from '../../mixins/phone';
 export default {
-    
     mixins: [phone],
     data() {
         return {
@@ -50,8 +46,7 @@ export default {
             },
             password: '',
             showKeyboard: false,
-            projectId: this.$store.state.projectId,
-
+            projectId: this.$store.state.projectId
         };
     },
     computed: {
@@ -72,20 +67,20 @@ export default {
             const params = {
                 ...this.form,
                 projectId: this.$store.state.projectId
-            }
-                 this.$http
-                    .post(`/user/removeBankCard`,params)
-                    .then(res => {
-                        this.$toast.success('解绑成功');
-                        setTimeout(() => {
-                            this.$router.go(-1);
-                        }, 1000);
-                    })
-                    .catch(e => {
-                        if (e) {
-                            this.$toast(e.error);
-                        }
-                    });
+            };
+            this.$http
+                .post(`/user/removeBankCard`, params)
+                .then(res => {
+                    this.$toast.success('解绑成功');
+                    setTimeout(() => {
+                        this.$router.go(-1);
+                    }, 1000);
+                })
+                .catch(e => {
+                    if (e) {
+                        this.$toast(e.error);
+                    }
+                });
         },
         getSmsVerify() {
             this.isSend = true;
@@ -103,7 +98,7 @@ export default {
                     this.setTime(0);
                 });
         },
-       
+
         bind() {
             if (!this.form.code || this.form.code.length < 4) {
                 this.$toast('请输入验证码');
@@ -115,7 +110,9 @@ export default {
                 });
                 let bankNo = this.form.bankNo.replace(/ /g, '');
                 this.$http
-                    .post(`/user/addBankCard?bankNo=${bankNo}&phone=${this.form.phone}&code=${this.form.code}&projectId=${this.projectId}`)
+                    .post(
+                        `/user/addBankCard?bankNo=${bankNo}&phone=${this.form.phone}&code=${this.form.code}&projectId=${this.projectId}`
+                    )
                     .then(res => {
                         this.$toast.success('添加成功');
                         setTimeout(() => {

src/views/user/Exchange.vue

@@ -1,53 +1,51 @@
 <template>
-  <div class="search">
-    <van-tabs v-model:active="active"
-              @click="onClick">
-      <van-tab v-for="item in actions"
-               :title="item.title"
-               :name="item.value"
-               :key="item.value">
-      </van-tab>
-    </van-tabs>
-    <van-list v-model:loading="loading"
-              :finished="finished"
-              finished-text=""
-              @load="getData">
-      <template v-for="(item, index) in list"
-                :key="index">
-        <van-card :tag="item.description"
-                  v-if="item.description == '售出'"
-                  :desc="`寄售价格：¥${item.price}`"
-                  :title="item.assetName"
-                  :thumb="getImg(changeImgs(item.pic))">
-          <template #tags>
-            <van-tag plain
-                     type="danger">费率：{{item.royalties}}%</van-tag>
-            <van-tag plain
-                     type="danger">到账：T+3</van-tag>
-            <div class="price">到账金额：<span>¥{{item.arrivalAmount}}</span>
-            </div>
-            <div class="time">创建时间：{{item.createdAt}}</div>
-          </template>
-        </van-card>
-        <van-card :tag="item.description"
-                  v-else
-                  :title="item.assetName"
-                  class="item"
-                  :thumb="getImg(changeImgs(item.pic))">
-          <template #tags>
-            <div class="price"
-                 v-if="item.arrivalAmount && item.description != '销毁'">{{item.description == '售出'? '到账': '支付'}}金额：<span>¥{{item.description == '售出'? item.arrivalAmount : item.totalPrice}}</span>
-            </div>
-            <div class="time">创建时间：{{item.createdAt}}</div>
-          </template>
-        </van-card>
-      </template>
+    <div class="search">
+        <van-tabs v-model:active="active" @click="onClick">
+            <van-tab v-for="item in actions" :title="item.title" :name="item.value" :key="item.value"> </van-tab>
+        </van-tabs>
+        <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
+            <template v-for="(item, index) in list" :key="index">
+                <van-card
+                    :tag="item.description"
+                    v-if="item.description == '售出'"
+                    :desc="`寄售价格：¥${item.price}`"
+                    :title="item.assetName"
+                    :thumb="getImg(changeImgs(item.pic))"
+                >
+                    <template #tags>
+                        <van-tag plain type="danger">费率：{{ item.royalties }}%</van-tag>
+                        <van-tag plain type="danger">到账：T+3</van-tag>
+                        <div class="price">
+                            到账金额：<span>¥{{ item.arrivalAmount }}</span>
+                        </div>
+                        <div class="time">创建时间：{{ item.createdAt }}</div>
+                    </template>
+                </van-card>
+                <van-card
+                    :tag="item.description"
+                    v-else
+                    :title="item.assetName"
+                    class="item"
+                    :thumb="getImg(changeImgs(item.pic))"
+                >
+                    <template #tags>
+                        <div class="price" v-if="item.arrivalAmount && item.description != '销毁'">
+                            {{ item.description == '售出' ? '到账' : '支付' }}金额：<span
+                                >¥{{ item.description == '售出' ? item.arrivalAmount : item.totalPrice }}</span
+                            >
+                        </div>
+                        <div class="time">创建时间：{{ item.createdAt }}</div>
+                    </template>
+                </van-card>
+            </template>
 
-      <van-empty v-if="empty"
-                 :description="`暂无${this.title}交易历史哦~`"
-                 :image="require('@assets/kong_png_wudingdan.png')" />
-    </van-list>
-  </div>
+            <van-empty
+                v-if="empty"
+                :description="`暂无${this.title}交易历史哦~`"
+                :image="require('@assets/kong_png_wudingdan.png')"
+            />
+        </van-list>
+    </div>
 </template>
 
 <script>
@@ -67,12 +65,12 @@ export default {
                 { title: '购买', value: '0' },
                 { title: '售出', value: '1' },
                 { title: '空投', value: '4' },
-                { title: '合成', value: '3' }, 
+                { title: '合成', value: '3' },
                 { title: '赠送', value: '2' },
                 { title: '神秘宝盒', value: '5' },
                 { title: '盲盒', value: '6' },
                 { title: '积分抽奖', value: '7' }
-                ],
+            ],
 
             url: '/asset/userHistory',
             httpType: 'get'
@@ -82,18 +80,18 @@ export default {
         beforeData() {
             return {
                 type: this.active,
-                projectId: this.$store.state.projectId,
+                projectId: this.$store.state.projectId
             };
         },
         async onClick(name, title) {
             this.title = title;
             this.active = name;
             this.page = 0;
-            this.list = []
+            this.list = [];
             this.loading = true;
             this.finished = false;
             await this.getData();
-        },
+        }
     }
 };
 </script>

src/views/user/Follows.vue

@@ -63,8 +63,7 @@ export default {
 <style lang="less" scoped>
 .follow {
     background-color: @bg3;
-	padding-bottom: 100px;
-	
+    padding-bottom: 100px;
 }
 .top {
     background-color: @bg;
@@ -79,26 +78,26 @@ export default {
         line-height: 30px;
     }
 }
-.list{
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	padding-bottom: 40px;
-	.info {
-		margin-top: 40px;
-		text-align: center;
-		width: 296px;
-	//     background-color: @bg;
-		
-	//     /deep/.van-button--mini {
-	//         background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @prim, @warn) !important;
-	
-	//         &.follow {
-	//             background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @text3, @text3) !important;
-	//         }
-	//     }
-	}
+.list {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 40px;
+    .info {
+        margin-top: 40px;
+        text-align: center;
+        width: 296px;
+        //     background-color: @bg;
+
+        //     /deep/.van-button--mini {
+        //         background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @prim, @warn) !important;
+
+        //         &.follow {
+        //             background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @text3, @text3) !important;
+        //         }
+        //     }
+    }
 }
 // .info {
 //     background-color: @bg;

src/views/user/Share.vue

@@ -1,124 +1,95 @@
 <template>
-  <div class="page">
-    <div class="share-img">
-      <img v-lazy="bgImg"
-           alt="" />
-    </div>
-    <div class="share-btn">
-      <van-button type="primary"
-                  @click="share"
-                  round
-                  block>立即邀请</van-button>
-    </div>
-    <div class="panel">
-      <div class="panel-title">我的邀请</div>
-      <div class="panel-box">
-        <div class="panel-item">
-          <div class="text1">
-            <span>{{ dataInfo.airdropcount || 0 }}</span>
-            <small>个</small>
-          </div>
-          <div class="text2">已获得藏品</div>
+    <div class="page">
+        <div class="share-img">
+            <img v-lazy="bgImg" alt="" />
         </div>
-        <div class="panel-item">
-          <div class="text1">
-            <span>{{ dataInfo.inviteNum || 0 }}</span>
-            <small>人</small>
-          </div>
-          <div class="text2">邀请好友</div>
+        <div class="share-btn">
+            <van-button type="primary" @click="share" round block>立即邀请</van-button>
         </div>
-      </div>
-    </div>
-    <div class="panel invite-list">
-      <van-tabs v-model:active="active">
-        <van-tab title="已邀请好友"
-                 name="a">
-          <div class="panel-no-box"
-               v-if="inviteList.length == 0">
-            <div class="list-title">
-              <div class="title-item">当前还未有数据...</div>
-            </div>
-          </div>
-
-          <div class="panel-box"
-               v-else>
-            <div class="list-title">
-              <div class="title-item">手机号</div>
-              <div class="title-item">是否实名认证</div>
-			  <!-- inviteeQualifications   0绑定钱包，1绑定银行卡 -->
-			  <div class="title-item">{{InviteData.inviteeQualifications == '1' ? '是否绑定银行卡' : '是否绑定钱包'}}</div>
-            </div>
-            <div class="list-item-box">
-              <div class="list-item"
-                   v-for="(item, index) in inviteList"
-                   :key="index">
-                <div class="list-item-item">
-                  {{ item.phone }}
+        <div class="panel">
+            <div class="panel-title">我的邀请</div>
+            <div class="panel-box">
+                <div class="panel-item">
+                    <div class="text1">
+                        <span>{{ dataInfo.airdropcount || 0 }}</span>
+                        <small>个</small>
+                    </div>
+                    <div class="text2">已获得藏品</div>
                 </div>
-                <div class="list-item-item"
-                     :class="{ listitemprim: item.authStatus == false }">
-                  {{ item.authStatus ? '是' : '否' }}
+                <div class="panel-item">
+                    <div class="text1">
+                        <span>{{ dataInfo.inviteNum || 0 }}</span>
+                        <small>人</small>
+                    </div>
+                    <div class="text2">邀请好友</div>
                 </div>
-                <div class="list-item-item"
-                     :class="{ listitemprim: item.bankCard == false }">
-                  {{ item.bankCard ? '是' : '否' }}
-                </div>
-              </div>
             </div>
-          </div>
-        </van-tab>
-        <van-tab title="邀请排行榜" name="b">
-          <van-pull-refresh v-model="refreshing"
-                            @refresh="onRefresh">
-            <van-list v-model="loading"
-                      :finished="finished"
-                      finished-text="敬请期待"
-                      @load="getList">
-              <div v-for="item in list"
-                   :key="item">
-                <div class="items">
-                  <div class="rank">{{ item.rank }}</div>
-                  <div class="items_img">
-                    <van-image lazy-load  :src="item.avatar" />
-                  </div>
-                  <div class="name">{{ item.nickname }}</div>
-                  <div class="amount">{{ item.amount }}</div>
-                </div>
-              </div>
-            </van-list>
-          </van-pull-refresh>
-        </van-tab>
-      </van-tabs>
-    </div>
-    <div class="tips"
-         v-html="InviteData.content">
-    </div>
+        </div>
+        <div class="panel invite-list">
+            <van-tabs v-model:active="active">
+                <van-tab title="已邀请好友" name="a">
+                    <div class="panel-no-box" v-if="inviteList.length == 0">
+                        <div class="list-title">
+                            <div class="title-item">当前还未有数据...</div>
+                        </div>
+                    </div>
 
-    <van-overlay :show="show"
-                 @click="show = false">
-      <div class="wrapper">
-        <img v-lazy="img"
-             class="wrapper-img"
-             v-if="img"
-             alt="" />
-        <div class="wrapper-box"
-             v-else
-             ref="post"
-             @click.stop>
-          <img class="share2"
-               :src="shareBg"
-               alt="" />
-          <vue-qrcode :value="url"
-                      :options="{ width: 50, margin: 0 }"
-                      class="share-code"></vue-qrcode>
+                    <div class="panel-box" v-else>
+                        <div class="list-title">
+                            <div class="title-item">手机号</div>
+                            <div class="title-item">是否实名认证</div>
+                            <!-- inviteeQualifications   0绑定钱包，1绑定银行卡 -->
+                            <div class="title-item">
+                                {{ InviteData.inviteeQualifications == '1' ? '是否绑定银行卡' : '是否绑定钱包' }}
+                            </div>
+                        </div>
+                        <div class="list-item-box">
+                            <div class="list-item" v-for="(item, index) in inviteList" :key="index">
+                                <div class="list-item-item">
+                                    {{ item.phone }}
+                                </div>
+                                <div class="list-item-item" :class="{ listitemprim: item.authStatus == false }">
+                                    {{ item.authStatus ? '是' : '否' }}
+                                </div>
+                                <div class="list-item-item" :class="{ listitemprim: item.bankCard == false }">
+                                    {{ item.bankCard ? '是' : '否' }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </van-tab>
+                <van-tab title="邀请排行榜" name="b">
+                    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+                        <van-list v-model="loading" :finished="finished" finished-text="敬请期待" @load="getList">
+                            <div v-for="item in list" :key="item">
+                                <div class="items">
+                                    <div class="rank">{{ item.rank }}</div>
+                                    <div class="items_img">
+                                        <van-image lazy-load :src="item.avatar" />
+                                    </div>
+                                    <div class="name">{{ item.nickname }}</div>
+                                    <div class="amount">{{ item.amount }}</div>
+                                </div>
+                            </div>
+                        </van-list>
+                    </van-pull-refresh>
+                </van-tab>
+            </van-tabs>
         </div>
+        <div class="tips" v-html="InviteData.content"></div>
 
-        <img src="../../assets/art/close.png"
-             alt=""
-             class="close" />
-      </div>
-    </van-overlay>
-  </div>
+        <van-overlay :show="show" @click="show = false">
+            <div class="wrapper">
+                <img v-lazy="img" class="wrapper-img" v-if="img" alt="" />
+                <div class="wrapper-box" v-else ref="post" @click.stop>
+                    <img class="share2" :src="shareBg" alt="" />
+                    <vue-qrcode :value="url" :options="{ width: 50, margin: 0 }" class="share-code"></vue-qrcode>
+                </div>
+
+                <img src="../../assets/art/close.png" alt="" class="close" />
+            </div>
+        </van-overlay>
+    </div>
 </template>
 
 <script>
@@ -153,7 +124,6 @@ export default {
         this.getList();
         this.getinviteData();
         this.getinvitelist();
-
     },
     methods: {
         share() {
@@ -171,14 +141,14 @@ export default {
         getinviteData() {
             const params = {
                 projectId: this.projectId
-            }
+            };
             this.$http.post('/activityCollection/getInvitationDate', params).then(res => {
-                console.log(res,'res')
+                console.log(res, 'res');
                 this.InviteData = res;
                 this.bgImg = res.prl ? res.prl : require('../../assets/art/share1.png');
-                const poster = res.poster ? res.poster: require('../../assets/art/share2.png');
+                const poster = res.poster ? res.poster : require('../../assets/art/share2.png');
                 this.getImgBase64(poster, 'shareBg');
-               // this.inviteList = res;
+                // this.inviteList = res;
             });
         },
         loadImg() {
@@ -212,14 +182,13 @@ export default {
             return dataURL;
         },
         getinvitelist() {
-             const params = {
+            const params = {
                 projectId: this.projectId
-            }
-            this.$http.post('/user/getUserInviteData',params).then(res => {
+            };
+            this.$http.post('/user/getUserInviteData', params).then(res => {
                 this.inviteList = res.inviteData;
                 this.dataInfo.inviteNum = res.inviteNum;
                 this.dataInfo.airdropcount = res.airdropcount;
-
             });
         },
         onRefresh() {
@@ -263,7 +232,7 @@ export default {
             this.$http
                 .post('/activityCollection/getRanking', params)
                 .then(res => {
-                    this.list = res.slice(0,20);
+                    this.list = res.slice(0, 20);
                     this.loading = false;
                     this.finished = true;
                     let ary = JSON.parse(JSON.stringify(this.list));

src/views/welfare/Detail.vue

@@ -1,667 +1,685 @@
 <template>
     <div class="page">
-		<div class="user-info" @click="$router.push('/setting')">
-			<div>
-				<van-image
-				    lazy-load
-				    round
-				    width="40"
-				    height="40"
-				    :src="userInfo.avatar || require('@assets/img_default_photo.png')"
-				    fit="cover"
-				/>
-				<span class="van-ellipsis">{{ userInfo.nickname }}</span>
-			</div> 
-			<van-icon name="arrow" color="#8f9195"/>
-		</div>
-		<!-- 内容 -->
-		<div class="content">
-			<div class="class-box">
-				<div class="class-box_left" @click="$router.push('/welfareintegral')">
-					<div><span>{{availableIntegral}}</span>积分</div>
-					<div class="class-box_tips">收支兑换记录</div>
-					<button>点击查看</button>
-				</div>
-				<div class="class-box_right">
-					<div><span>每日签到</span></div>
-					<div class="class-box_tips">做任务赚取积分</div>
-					<button>点击签到</button>
-				</div>
-			</div>
-			<!-- 抽奖部分 -->
-			<div class="draw-box">
-				<!-- 抽奖头部 -->
-				<div class="draw-box_top">
-					<img src="../../assets/yuanyu/icon-left.png" alt="">
-					<span>参与抽奖免费赢豪礼</span>
-					<img src="../../assets/yuanyu/icon-right.png" alt="">
-				</div>
-				<div v-if="activityId">
-					<!-- 排名奖品 -->
-					<div class="draw-box_ranking">
-						<template v-for="(item,index) in rankingList" :key="index">
-							<div>
-								<div :class="['ranking-box','ranking-box'+index]">
-									<img v-if="item.pic" :src="item.pic" class="ranking-img">
-									<img v-if="index == 0" src="../../assets/yuanyu/bg-icon1.png" class="ranking-bg" />
-									<img v-if="index == 1" src="../../assets/yuanyu/bg-icon2.png" class="ranking-bg" />
-									<img v-if="index == 2" src="../../assets/yuanyu/bg-icon3.png" class="ranking-bg" />
-								</div>
-								<span>{{item.name || ''}}</span>
-							</div>
-						</template>
-					</div>
-					<!-- 中奖提示公告 -->
-					<div class="notice-box" v-if="noticeList.length > 0">
-						<van-notice-bar 
-							:left-icon="require('../../assets/yuanyu/icon1.png')"
-							:scrollable="false"
-							color="#fff">
-						  <van-swipe vertical
-									 class="notice-swipe"
-									 :autoplay="3000"
-									 :show-indicators="false">
-							<van-swipe-item v-for="(item,index) in noticeList" :key="index">
-							  {{item.userName }} {{item.awardName}}
-							</van-swipe-item>
-						  </van-swipe>
-						</van-notice-bar>
-					</div>
-					
-					<!-- 抽奖点击部分 -->
-					<div class="gift-box" v-if="awards.length >= 9">
-						<van-grid square :column-num="3" :border="false" gutter="6"> 
-						  <van-grid-item v-for="(item,index) in awards" :key="index">
-							  <div :class="['gift-box_view',item.num == current ?'active':'']">
-								  <div v-if="index == 4" @click="start()">
-										<img class="gift-button" src="../../assets/yuanyu/button1.png" alt="">
-								  </div>
-								  <div v-else class="gift-box_view2" >
-									  <div>
-										<img v-if="item.type != 'EMPTY'" :src="item.pic" alt="" class="grid-img">
-										<div>{{item.name}}</div>
-									  </div>
-								  </div>
-							  </div>
-						  </van-grid-item> 
-						</van-grid>
-					</div> 
-				</div>
-				<van-empty v-else description="暂无活动哦~" :image="require('@assets/kong_png_wudingdan.png')" />
-			</div> 
-			<!-- 我的奖品 -->
-			<div class="prize-title">我的奖品</div>
-			<!-- 奖品列表 -->
-			
-			<van-list class="list" v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
-			    <div class="prize-item" v-for="(item,index) in list" :key="index">
-			    	<div class="prize-item_top">
-						<van-image
-						    lazy-load
-						    width="40"
-						    height="40"
-						    :src="item.pic"
-						    fit="cover"
-							class="prize-item_img"
-						/>
-			    		<div>
-			    			<div class="prize-item_name">{{item.awardName}}</div>
-			    			<div class="prize-item_date">有效期至：<span>{{item.issueTime}}</span></div>
-			    		</div>
-			    	</div>
-			    	<div  class="prize-item_tips">请在有效期内，尽快领取您的大奖</div>
-			    	<div :class="['prize-item_zt',item.status == 'RECEIVED' ? '' : 'active']">{{item.status == 'RECEIVED' ? '已领取' : '未领取' }}</div>
-			    </div>
-			    <van-empty v-if="empty" description="你还没有中奖哦~" :image="require('@assets/kong_png_wudingdan.png')" />
-			</van-list>
-		</div>
-		<!-- 中奖弹框 -->
-       <van-overlay :show="show" @click="show = false">
-           <div class="code-img" @click.stop ="show = false">
-			   <div class="code-bg">
-				   <img class="code-title" src="../../assets/yuanyu/icon-title.png" alt="">
-				   <img class="code-title2" src="../../assets/yuanyu/icon-title2.png" alt="">
-				   <img class="code-liping" :src="award.pic" alt="">
-				   <img class="code-close" src="../../assets/raex/icon_fenxiang_close.png" alt="">
-				   <!-- <van-image lazy-load class="code" width="70vw" src="../../assets/yuanyu/liping.png" fit="scale-down" /> -->
-			   </div>
-           </div>
-       </van-overlay>
-    </div> 
+        <div class="user-info" @click="$router.push('/setting')">
+            <div>
+                <van-image
+                    lazy-load
+                    round
+                    width="40"
+                    height="40"
+                    :src="userInfo.avatar || require('@assets/img_default_photo.png')"
+                    fit="cover"
+                />
+                <span class="van-ellipsis">{{ userInfo.nickname }}</span>
+            </div>
+            <van-icon name="arrow" color="#8f9195" />
+        </div>
+        <!-- 内容 -->
+        <div class="content">
+            <div class="class-box">
+                <div class="class-box_left" @click="$router.push('/welfareintegral')">
+                    <div>
+                        <span>{{ availableIntegral }}</span
+                        >积分
+                    </div>
+                    <div class="class-box_tips">收支兑换记录</div>
+                    <button>点击查看</button>
+                </div>
+                <div class="class-box_right">
+                    <div><span>每日签到</span></div>
+                    <div class="class-box_tips">做任务赚取积分</div>
+                    <button>点击签到</button>
+                </div>
+            </div>
+            <!-- 抽奖部分 -->
+            <div class="draw-box">
+                <!-- 抽奖头部 -->
+                <div class="draw-box_top">
+                    <img src="../../assets/yuanyu/icon-left.png" alt="" />
+                    <span>参与抽奖免费赢豪礼</span>
+                    <img src="../../assets/yuanyu/icon-right.png" alt="" />
+                </div>
+                <div v-if="activityId">
+                    <!-- 排名奖品 -->
+                    <div class="draw-box_ranking">
+                        <template v-for="(item, index) in rankingList" :key="index">
+                            <div>
+                                <div :class="['ranking-box', 'ranking-box' + index]">
+                                    <img v-if="item.pic" :src="item.pic" class="ranking-img" />
+                                    <img v-if="index == 0" src="../../assets/yuanyu/bg-icon1.png" class="ranking-bg" />
+                                    <img v-if="index == 1" src="../../assets/yuanyu/bg-icon2.png" class="ranking-bg" />
+                                    <img v-if="index == 2" src="../../assets/yuanyu/bg-icon3.png" class="ranking-bg" />
+                                </div>
+                                <span>{{ item.name || '' }}</span>
+                            </div>
+                        </template>
+                    </div>
+                    <!-- 中奖提示公告 -->
+                    <div class="notice-box" v-if="noticeList.length > 0">
+                        <van-notice-bar
+                            :left-icon="require('../../assets/yuanyu/icon1.png')"
+                            :scrollable="false"
+                            color="#fff"
+                        >
+                            <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
+                                <van-swipe-item v-for="(item, index) in noticeList" :key="index">
+                                    {{ item.userName }} {{ item.awardName }}
+                                </van-swipe-item>
+                            </van-swipe>
+                        </van-notice-bar>
+                    </div>
+
+                    <!-- 抽奖点击部分 -->
+                    <div class="gift-box" v-if="awards.length >= 9">
+                        <van-grid square :column-num="3" :border="false" gutter="6">
+                            <van-grid-item v-for="(item, index) in awards" :key="index">
+                                <div :class="['gift-box_view', item.num == current ? 'active' : '']">
+                                    <div v-if="index == 4" @click="start()">
+                                        <img class="gift-button" src="../../assets/yuanyu/button1.png" alt="" />
+                                    </div>
+                                    <div v-else class="gift-box_view2">
+                                        <div>
+                                            <img v-if="item.type != 'EMPTY'" :src="item.pic" alt="" class="grid-img" />
+                                            <div>{{ item.name }}</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </van-grid-item>
+                        </van-grid>
+                    </div>
+                </div>
+                <van-empty v-else description="暂无活动哦~" :image="require('@assets/kong_png_wudingdan.png')" />
+            </div>
+            <!-- 我的奖品 -->
+            <div class="prize-title">我的奖品</div>
+            <!-- 奖品列表 -->
+
+            <van-list class="list" v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
+                <div class="prize-item" v-for="(item, index) in list" :key="index">
+                    <div class="prize-item_top">
+                        <van-image
+                            lazy-load
+                            width="40"
+                            height="40"
+                            :src="item.pic"
+                            fit="cover"
+                            class="prize-item_img"
+                        />
+                        <div>
+                            <div class="prize-item_name">{{ item.awardName }}</div>
+                            <div class="prize-item_date">
+                                有效期至：<span>{{ item.issueTime }}</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="prize-item_tips">请在有效期内，尽快领取您的大奖</div>
+                    <div :class="['prize-item_zt', item.status == 'RECEIVED' ? '' : 'active']">
+                        {{ item.status == 'RECEIVED' ? '已领取' : '未领取' }}
+                    </div>
+                </div>
+                <van-empty
+                    v-if="empty"
+                    description="你还没有中奖哦~"
+                    :image="require('@assets/kong_png_wudingdan.png')"
+                />
+            </van-list>
+        </div>
+        <!-- 中奖弹框 -->
+        <van-overlay :show="show" @click="show = false">
+            <div class="code-img" @click.stop="show = false">
+                <div class="code-bg">
+                    <img class="code-title" src="../../assets/yuanyu/icon-title.png" alt="" />
+                    <img class="code-title2" src="../../assets/yuanyu/icon-title2.png" alt="" />
+                    <img class="code-liping" :src="award.pic" alt="" />
+                    <img class="code-close" src="../../assets/raex/icon_fenxiang_close.png" alt="" />
+                    <!-- <van-image lazy-load class="code" width="70vw" src="../../assets/yuanyu/liping.png" fit="scale-down" /> -->
+                </div>
+            </div>
+        </van-overlay>
+    </div>
 </template>
 
 <script>
 import { mapState } from 'vuex';
 import list from '../../mixins/list';
 export default {
-	mixins: [list],
+    mixins: [list],
     data() {
         return {
-			current: 0, // 当前索引值
-			speed: 200, // 时间->速度
-			diff: 15, // 基数
-			award: {}, // 抽中的奖品
-			time: 0, // 当前时间戳
-			timer: null, // 定时器
-			show:false, 
-            awards:[],//抽奖列表 
-			availableIntegral:0,//用户可用积分
-			activityId:'',//积分活动id;
-			noticeList:[],//中奖公告
-			list:[],//我的奖品列表
-			rankingList:[],//奖品排名
-			click:true,//
-			url: '/pointActivity/awards',
-		}
-	},
-	computed: {
-	    ...mapState(['userInfo']),
-	},
-    mounted() {
-		this.$store.dispatch('getUserInfo');
-		this.userIntegralGetInfo();//获取用户积分 
-		this.pointActivityNow();// 最新积分抽奖活动
-		this.pointActivityAwards();//最近中奖名单
+            current: 0, // 当前索引值
+            speed: 200, // 时间->速度
+            diff: 15, // 基数
+            award: {}, // 抽中的奖品
+            time: 0, // 当前时间戳
+            timer: null, // 定时器
+            show: false,
+            awards: [], //抽奖列表
+            availableIntegral: 0, //用户可用积分
+            activityId: '', //积分活动id;
+            noticeList: [], //中奖公告
+            list: [], //我的奖品列表
+            rankingList: [], //奖品排名
+            click: true, //
+            url: '/pointActivity/awards'
+        };
     },
-	methods: {
-		// 我的奖品自定义额外请求参数
-		beforeData() {
-		    return {
-		        query: {}
-		    };
-		},
-		// 获取用户积分 
-		userIntegralGetInfo(){
-			this.$http.post('/userIntegral/getInfo').then(res => {
-				this.availableIntegral = res.totalIntegral;//总积分
-			}).catch(e=>{
-				this.$toast(e.error);
-			})
-		},
-		// 最新积分抽奖活动
-		pointActivityNow(){
-			this.$http.post('/pointActivity/now').then(res => {
-				this.activityId = res.id;
-				// 打乱顺序
-				res.awards.sort(function () {
-				  return Math.random() > 0.5 ? -1 : 1
-				})
-				this.awards = res.awards;
-				// 定义抽奖按钮
-				this.awards.splice(4, 0, {
-					id:0,
-					name:'开始抽奖',
-					image:'../../assets/yuanyu/button1.png',
-					num:9,
-					orderNum:9999
-				})
-				this.awards.forEach((item,i)=>{
-					// 定义转圈展示顺序
-					switch(i+1){
-						case 1:
-						case 2:
-						case 3:
-						case 7:
-							item.num = i+1;
-						break;
-						case 4:
-						    item.num = 8; 
-						break;
-						case 6:
-						    item.num = 4;
-						break;
-						case 8:
-						    item.num = 6;
-						break;
-						case 9:
-						    item.num = 5;
-						break;
-					}
-				});
-				// 更改排序，小到大
-				let arr = [...this.awards];
-				arr.sort((a,b)=>{
-					return a.orderNum - b.orderNum
-				}).forEach((item,i)=>{// 获取前三个奖品，并赋值排名展示
-					if(item.type != 'EMPTY'){
-						if(!this.rankingList[1]){
-							this.rankingList[1] = item;
-						}else if(!this.rankingList[0]){
-							this.rankingList[0] = item;
-						}else if(!this.rankingList[2]){
-							this.rankingList[2] = item;
-						}
-					}
-				})
-				
-				// 超出九个数过滤掉
-				if(this.awards.length > 9){
-					this.awards.splice(9, this.awards.length - 9);
-				}
-			}).catch(e=>{
-				this.$toast(e.error);
-			})
-		},
-		//最近中奖名单
-		pointActivityAwards(){
-			this.$http.post('/pointActivity/nowActivityAwards', {}, { body: 'json' }).then(res => {
-				this.noticeList = res;
-			}).catch(e=>{
-				this.$toast(e.error);
-			})
-		},
-		// 开始抽奖
-		start() {
-			if(this.click){
-				this.time = Date.now();
-				this.speed = 200;
-				this.diff = 12;
-				this.click = false;//锁定点击事件
-				this.current = 0;//每次点击从第一个开始转
-				// 请求接口，获取中奖物品，并开始转圈
-				this.$http.post('/pointActivity/draw',
-						{ id: this.activityId },
-				        { body: 'json' }).then(res => {
-					this.award = res;//奖品
-					this.move();
-					this.userIntegralGetInfo();//更新用户积分 
-				}).catch(e=>{//请求失败了
-					this.click = true;//解锁点击事件
-					this.$toast(e.error);
-				})
-			}
-			
-		},
-		// 开始转动
-		move() {
-		  this.timer = setTimeout(() => {
-			// 转圈变化
-			this.current++;
-			if (this.current > 8) {
-			  this.current = 1;
-			}
-			// 若抽中的奖品id存在，则开始减速转动
-			if (this.award.id && (Date.now() - this.time) / 1000 > 2) {
-				this.speed += this.diff; // 转动减速
-			
-				// 找到当前转圈标记所在的下标
-				let index = this.awards.findIndex((item)=>{
-					 return this.current == item.num;
-				})
-			  // 若转动时间超过4秒，并且奖品id等于小格子的奖品id，则停下来
-			  if ((Date.now() - this.time) / 1000 > 4 && this.award.id == this.awards[index].id) {
-				clearTimeout(this.timer);
-				this.click = true;//解锁点击事件
-				setTimeout(() => {
-					if(this.award.type == "EMPTY"){//抽中谢谢参与时
-						this.$toast('很遗憾，没有抽中哦~')
-					}else{
-						// console.log(`恭喜中奖${this.award.name}`);
-						this.pointActivityAwards();//重新刷新公告
-						this.getData(true);//刷新我的奖品列表
-						this.show = true;//显示中奖弹框
-					}
-				},20);
-				return;
-			  }
-			} else {
-			  // 若抽中的奖品不存在，则加速转动
-			  this.speed -= this.diff;
-			}
-			 this.move();
-		  }, this.speed);
-		},
+    computed: {
+        ...mapState(['userInfo'])
     },
+    mounted() {
+        this.$store.dispatch('getUserInfo');
+        this.userIntegralGetInfo(); //获取用户积分
+        this.pointActivityNow(); // 最新积分抽奖活动
+        this.pointActivityAwards(); //最近中奖名单
+    },
+    methods: {
+        // 我的奖品自定义额外请求参数
+        beforeData() {
+            return {
+                query: {}
+            };
+        },
+        // 获取用户积分
+        userIntegralGetInfo() {
+            this.$http
+                .post('/userIntegral/getInfo')
+                .then(res => {
+                    this.availableIntegral = res.totalIntegral; //总积分
+                })
+                .catch(e => {
+                    this.$toast(e.error);
+                });
+        },
+        // 最新积分抽奖活动
+        pointActivityNow() {
+            this.$http
+                .post('/pointActivity/now')
+                .then(res => {
+                    this.activityId = res.id;
+                    // 打乱顺序
+                    res.awards.sort(function () {
+                        return Math.random() > 0.5 ? -1 : 1;
+                    });
+                    this.awards = res.awards;
+                    // 定义抽奖按钮
+                    this.awards.splice(4, 0, {
+                        id: 0,
+                        name: '开始抽奖',
+                        image: '../../assets/yuanyu/button1.png',
+                        num: 9,
+                        orderNum: 9999
+                    });
+                    this.awards.forEach((item, i) => {
+                        // 定义转圈展示顺序
+                        switch (i + 1) {
+                            case 1:
+                            case 2:
+                            case 3:
+                            case 7:
+                                item.num = i + 1;
+                                break;
+                            case 4:
+                                item.num = 8;
+                                break;
+                            case 6:
+                                item.num = 4;
+                                break;
+                            case 8:
+                                item.num = 6;
+                                break;
+                            case 9:
+                                item.num = 5;
+                                break;
+                        }
+                    });
+                    // 更改排序，小到大
+                    let arr = [...this.awards];
+                    arr.sort((a, b) => {
+                        return a.orderNum - b.orderNum;
+                    }).forEach((item, i) => {
+                        // 获取前三个奖品，并赋值排名展示
+                        if (item.type != 'EMPTY') {
+                            if (!this.rankingList[1]) {
+                                this.rankingList[1] = item;
+                            } else if (!this.rankingList[0]) {
+                                this.rankingList[0] = item;
+                            } else if (!this.rankingList[2]) {
+                                this.rankingList[2] = item;
+                            }
+                        }
+                    });
+
+                    // 超出九个数过滤掉
+                    if (this.awards.length > 9) {
+                        this.awards.splice(9, this.awards.length - 9);
+                    }
+                })
+                .catch(e => {
+                    this.$toast(e.error);
+                });
+        },
+        //最近中奖名单
+        pointActivityAwards() {
+            this.$http
+                .post('/pointActivity/nowActivityAwards', {}, { body: 'json' })
+                .then(res => {
+                    this.noticeList = res;
+                })
+                .catch(e => {
+                    this.$toast(e.error);
+                });
+        },
+        // 开始抽奖
+        start() {
+            if (this.click) {
+                this.time = Date.now();
+                this.speed = 200;
+                this.diff = 12;
+                this.click = false; //锁定点击事件
+                this.current = 0; //每次点击从第一个开始转
+                // 请求接口，获取中奖物品，并开始转圈
+                this.$http
+                    .post('/pointActivity/draw', { id: this.activityId }, { body: 'json' })
+                    .then(res => {
+                        this.award = res; //奖品
+                        this.move();
+                        this.userIntegralGetInfo(); //更新用户积分
+                    })
+                    .catch(e => {
+                        //请求失败了
+                        this.click = true; //解锁点击事件
+                        this.$toast(e.error);
+                    });
+            }
+        },
+        // 开始转动
+        move() {
+            this.timer = setTimeout(() => {
+                // 转圈变化
+                this.current++;
+                if (this.current > 8) {
+                    this.current = 1;
+                }
+                // 若抽中的奖品id存在，则开始减速转动
+                if (this.award.id && (Date.now() - this.time) / 1000 > 2) {
+                    this.speed += this.diff; // 转动减速
+
+                    // 找到当前转圈标记所在的下标
+                    let index = this.awards.findIndex(item => {
+                        return this.current == item.num;
+                    });
+                    // 若转动时间超过4秒，并且奖品id等于小格子的奖品id，则停下来
+                    if ((Date.now() - this.time) / 1000 > 4 && this.award.id == this.awards[index].id) {
+                        clearTimeout(this.timer);
+                        this.click = true; //解锁点击事件
+                        setTimeout(() => {
+                            if (this.award.type == 'EMPTY') {
+                                //抽中谢谢参与时
+                                this.$toast('很遗憾，没有抽中哦~');
+                            } else {
+                                // console.log(`恭喜中奖${this.award.name}`);
+                                this.pointActivityAwards(); //重新刷新公告
+                                this.getData(true); //刷新我的奖品列表
+                                this.show = true; //显示中奖弹框
+                            }
+                        }, 20);
+                        return;
+                    }
+                } else {
+                    // 若抽中的奖品不存在，则加速转动
+                    this.speed -= this.diff;
+                }
+                this.move();
+            }, this.speed);
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
-	// 用户信息
-	.user-info{
-		.flex();
-		justify-content: space-between;
-		padding: 15px;
-		border-bottom: 2px solid @text1;
-		>div{
-			.flex();
-			justify-content: space-between;
-			color: #fff;
-			span{
-				margin-left: 8px;
-			}
-		}
-	}
-	// 内容区
-	.content{
-		padding: 15px;
-		color: #fff;
-		// 积分/签到分类
-		.class-box{
-			.flex();
-			justify-content: space-between;
-			&_left{
-				background: url('../../assets/yuanyu/bg-jifen.png')no-repeat;
-				background-size: 100% 100%;
-				button{
-					background-color: @bg4;
-				}
-			}
-			&_right{
-				background: url('../../assets/yuanyu/bg-qiandao.png')no-repeat;
-				background-size: 100% 100%;
-				button{
-					background-color: @bg5;
-				}
-			}
-			&_tips{
-				line-height: 2;
-			}
-			>div{
-				width: calc(50vw - 20px);
-				height: 85px;
-				color: #fff;
-				display: flex;
-				flex-direction: column;
-				justify-content: center;
-				align-items: flex-start;
-				padding-left: 10px;
-				box-sizing: border-box;
-				font-size: 12px;
-				button{
-					color: #fff;
-					font-size: 12px;
-					border: none;
-					border-radius: 10px;
-				}
-				span{
-					font-size: 15px;
-					margin-right: 1px;
-				}
-			}
-		}
-		// 抽奖部分
-		.draw-box{ 
-			border:1px solid #4b5783;
-			border-radius: 10px;
-			padding:20px 15px;
-			margin-top: 15px;
-			text-align: center;
-			&_top{
-				.flex();
-				justify-content: space-around;
-				color: @text0; 
-			}
-			// 奖品排名区
-			&_ranking{
-				display: flex;
-				justify-content: space-around;
-				align-items: flex-end;
-				>div{
-					width: 33.33%;
-				}
-				.ranking-box{
-					position: relative;
-					display: flex;
-					justify-content: center;
-					align-items: flex-end;
-					margin: 0 auto 10px;
-				}
-				.ranking-box0{
-					width: 62px;
-					height: 90px;
-					.ranking-img{
-						width: 61px;
-						height: 61px;
-						border-radius: 50%;
-						margin-bottom: 1px;
-					}
-				}
-				.ranking-bg{
-					position: absolute;
-					bottom:0;
-					width: 100%;
-					height: 100%;
-					left: 50%;
-					transform: translateX(-50%);
-				}
-				.ranking-box1{
-					width: 103px;
-					height: 141px;
-					.ranking-img{
-						width: 102px;
-						height: 102px;
-						border-radius: 50%;
-						margin-bottom: 1px;
-					}
-				}
-				.ranking-box2{
-					width: 62px;
-					height: 90px;
-					.ranking-img{
-						width: 61px;
-						height: 61px;
-						border-radius: 50%;
-						margin-bottom: 1px;
-					}
-				}
-			}
-			
-		}
-		// 公告区
-		.notice-box{
-			height: 40px;
-			border-radius: 6px;
-			overflow: hidden;
-			margin: 15px 0 0;
-			.notice-swipe {	
-			    height: 40px;
-			    line-height: 40px;
-			}
-		}
-		// 抽奖区
-		.gift-box{
-			width: 100%;
-			height: 100%;
-			background: url('../../assets/yuanyu/bg-game.png');
-			background-size: 100% 100%;
-			padding:25px 20px 20px;
-			box-sizing: border-box;
-			color:@text5;
-			font-size:12px;
-			margin: 15px 0 0;
-			.gift-button{
-				width: 100%;
-				height: 100%;
-				border-radius: 6px;
-			}
-			&_view{
-				width: 100%;
-				height: 100%;
-				position: absolute;
-				top: 0;
-				right: 0;
-				background-color: rgba(255,255,255,.6);
-				border-radius: 6px;
-				overflow: hidden;
-				&.active{
-					background-color: @bg6;
-					.gift-box_view2{
-						background-color: #fff63e;
-					}
-				}
-			}
-			&_view2{
-				.flex();
-				width: 96%;
-				height: 92%;
-				background-color: @text0;
-				position: absolute;
-				top: 0;
-				right: 0;
-				justify-content: center;
-				flex-direction: column;
-				text-align: center;
-				padding-right: 2%;
-				padding-top: 2.8%;
-				box-sizing: border-box;
-				.grid-img{
-					width: 44px;
-					height: 44px;
-					border-radius: 4px;
-					margin-bottom: 1px;
-				}
-			}
-		}
-		// 我的奖品区
-		.prize-title{
-			color: @text0;
-			.flex();
-			justify-content: center;
-			margin: 20px 0;
-			&::after{
-				content: '';
-				width: 50px;
-				height: 1px;
-				background:linear-gradient(to left, rgba(255,255,255,0), @text0);
-				margin-left: 10px;
-			}
-			&::before{
-				content: '';
-				width: 50px;
-				height: 1px;
-				background:linear-gradient(to right, rgba(255,255,255,0), @text0);
-				margin-right: 10px;
-			}
-		}
-		.prize-item{
-			border-radius: 6px;
-			border: 1px solid @text2;
-			position: relative;
-			margin-bottom: 11px;
-			background-color: @bg2;
-			&_img{
-				width: 40px;
-				height: 40px;
-				border-radius: 4px;
-				margin-right: 6px;
-				overflow: hidden;
-			}
-			&_top{
-				padding: 12px;
-				.flex();
-				position: relative;
-				border-bottom: 1px @border dashed;
-				&::after{
-					content: '';
-					width: 10px;
-					height: 10px;
-					background-color: @bg;
-					position: absolute;
-					bottom: -5px;
-					right:-5px;
-				}
-				&::before{
-					content: '';
-					width: 10px;
-					height: 10px;
-					background-color: @bg;
-					position: absolute;
-					bottom: -5px;
-					left:-5px;
-				}
-			}
-			&_name{
-				font-size: 16px;
-				color:@text0
-			}
-			&_date{
-				font-size: 12px;
-				color:rgba(255,255,255,.3);
-				margin-top: 2px;
-				span{
-					color:@text0
-				}
-			}
-			&_tips{
-				padding: 10px 12px;
-				font-size: 12px;
-				color:rgba(255,255,255,.3);
-			}
-			&_zt{
-				position: absolute;
-				top: 0;
-				right: 0;
-				border-radius:0 6px 0 6px;
-				background-color: @border;
-				padding:2px 4px;
-				font-size: 12px;
-				&.active{
-					background-color: @text5;
-				}
-			}
-			
-		}
-	}
-	// 中奖弹框区
-	.code-img {
-	    position: absolute;
-	    left: 50%;
-	    top: 50%;
-	    transform: translate(-50%, -50%);
-		width: 375px;
-		height: 490px;
-		background: url('../../assets/yuanyu/bg-zhj.png')no-repeat;
-		background-size: 100% auto;
-		.code-bg{
-			width: 298px;
-			height: 298px;
-			background: url('../../assets/yuanyu/bg-zhj2.png')no-repeat 100% 100%;
-			position: absolute;
-			left: 50%;
-			top: 50%;
-			transform: translate(-50%, -50%);
-			z-index: 9;
-		}
-		.code-title{
-			position: absolute;
-			top: -6px;
-			left: 50%;
-			transform: translateX(-50%);
-			z-index: 10;
-		}
-		.code-title2{
-			position: absolute;
-			top: -6px;
-			left: 50%;
-			transform: translateX(-50%);
-		}
-		.code-liping{
-			width: 284px;
-			height: 284px;
-			background-color: @bg3;
-			border-radius: 24px;
-			position: absolute;
-			top: 50%;
-			left: 50%;
-			transform: translate(-50%,-50%);
-		}
-		.code-close{
-			position: absolute;
-			left: 50%;
-			transform: translateX(-50%);
-			bottom: -60px;
-			width: 40px;
-			height: 40px;
-		}
-	} 
-	// 公告样式调整
-	/deep/ .van-notice-bar{
-		background: linear-gradient(to right,@text6,@text7);
-		.van-icon__image{
-			width: 22px;
-			height: 22px;
-			margin-right: 10px;
-		}
-	} 
-	
-</style>
+// 用户信息
+.user-info {
+    .flex();
+    justify-content: space-between;
+    padding: 15px;
+    border-bottom: 2px solid @text1;
+    > div {
+        .flex();
+        justify-content: space-between;
+        color: #fff;
+        span {
+            margin-left: 8px;
+        }
+    }
+}
+// 内容区
+.content {
+    padding: 15px;
+    color: #fff;
+    // 积分/签到分类
+    .class-box {
+        .flex();
+        justify-content: space-between;
+        &_left {
+            background: url('../../assets/yuanyu/bg-jifen.png') no-repeat;
+            background-size: 100% 100%;
+            button {
+                background-color: @bg4;
+            }
+        }
+        &_right {
+            background: url('../../assets/yuanyu/bg-qiandao.png') no-repeat;
+            background-size: 100% 100%;
+            button {
+                background-color: @bg5;
+            }
+        }
+        &_tips {
+            line-height: 2;
+        }
+        > div {
+            width: calc(50vw - 20px);
+            height: 85px;
+            color: #fff;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: flex-start;
+            padding-left: 10px;
+            box-sizing: border-box;
+            font-size: 12px;
+            button {
+                color: #fff;
+                font-size: 12px;
+                border: none;
+                border-radius: 10px;
+            }
+            span {
+                font-size: 15px;
+                margin-right: 1px;
+            }
+        }
+    }
+    // 抽奖部分
+    .draw-box {
+        border: 1px solid #4b5783;
+        border-radius: 10px;
+        padding: 20px 15px;
+        margin-top: 15px;
+        text-align: center;
+        &_top {
+            .flex();
+            justify-content: space-around;
+            color: @text0;
+        }
+        // 奖品排名区
+        &_ranking {
+            display: flex;
+            justify-content: space-around;
+            align-items: flex-end;
+            > div {
+                width: 33.33%;
+            }
+            .ranking-box {
+                position: relative;
+                display: flex;
+                justify-content: center;
+                align-items: flex-end;
+                margin: 0 auto 10px;
+            }
+            .ranking-box0 {
+                width: 62px;
+                height: 90px;
+                .ranking-img {
+                    width: 61px;
+                    height: 61px;
+                    border-radius: 50%;
+                    margin-bottom: 1px;
+                }
+            }
+            .ranking-bg {
+                position: absolute;
+                bottom: 0;
+                width: 100%;
+                height: 100%;
+                left: 50%;
+                transform: translateX(-50%);
+            }
+            .ranking-box1 {
+                width: 103px;
+                height: 141px;
+                .ranking-img {
+                    width: 102px;
+                    height: 102px;
+                    border-radius: 50%;
+                    margin-bottom: 1px;
+                }
+            }
+            .ranking-box2 {
+                width: 62px;
+                height: 90px;
+                .ranking-img {
+                    width: 61px;
+                    height: 61px;
+                    border-radius: 50%;
+                    margin-bottom: 1px;
+                }
+            }
+        }
+    }
+    // 公告区
+    .notice-box {
+        height: 40px;
+        border-radius: 6px;
+        overflow: hidden;
+        margin: 15px 0 0;
+        .notice-swipe {
+            height: 40px;
+            line-height: 40px;
+        }
+    }
+    // 抽奖区
+    .gift-box {
+        width: 100%;
+        height: 100%;
+        background: url('../../assets/yuanyu/bg-game.png');
+        background-size: 100% 100%;
+        padding: 25px 20px 20px;
+        box-sizing: border-box;
+        color: @text5;
+        font-size: 12px;
+        margin: 15px 0 0;
+        .gift-button {
+            width: 100%;
+            height: 100%;
+            border-radius: 6px;
+        }
+        &_view {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            right: 0;
+            background-color: rgba(255, 255, 255, 0.6);
+            border-radius: 6px;
+            overflow: hidden;
+            &.active {
+                background-color: @bg6;
+                .gift-box_view2 {
+                    background-color: #fff63e;
+                }
+            }
+        }
+        &_view2 {
+            .flex();
+            width: 96%;
+            height: 92%;
+            background-color: @text0;
+            position: absolute;
+            top: 0;
+            right: 0;
+            justify-content: center;
+            flex-direction: column;
+            text-align: center;
+            padding-right: 2%;
+            padding-top: 2.8%;
+            box-sizing: border-box;
+            .grid-img {
+                width: 44px;
+                height: 44px;
+                border-radius: 4px;
+                margin-bottom: 1px;
+            }
+        }
+    }
+    // 我的奖品区
+    .prize-title {
+        color: @text0;
+        .flex();
+        justify-content: center;
+        margin: 20px 0;
+        &::after {
+            content: '';
+            width: 50px;
+            height: 1px;
+            background: linear-gradient(to left, rgba(255, 255, 255, 0), @text0);
+            margin-left: 10px;
+        }
+        &::before {
+            content: '';
+            width: 50px;
+            height: 1px;
+            background: linear-gradient(to right, rgba(255, 255, 255, 0), @text0);
+            margin-right: 10px;
+        }
+    }
+    .prize-item {
+        border-radius: 6px;
+        border: 1px solid @text2;
+        position: relative;
+        margin-bottom: 11px;
+        background-color: @bg2;
+        &_img {
+            width: 40px;
+            height: 40px;
+            border-radius: 4px;
+            margin-right: 6px;
+            overflow: hidden;
+        }
+        &_top {
+            padding: 12px;
+            .flex();
+            position: relative;
+            border-bottom: 1px @border dashed;
+            &::after {
+                content: '';
+                width: 10px;
+                height: 10px;
+                background-color: @bg;
+                position: absolute;
+                bottom: -5px;
+                right: -5px;
+            }
+            &::before {
+                content: '';
+                width: 10px;
+                height: 10px;
+                background-color: @bg;
+                position: absolute;
+                bottom: -5px;
+                left: -5px;
+            }
+        }
+        &_name {
+            font-size: 16px;
+            color: @text0;
+        }
+        &_date {
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.3);
+            margin-top: 2px;
+            span {
+                color: @text0;
+            }
+        }
+        &_tips {
+            padding: 10px 12px;
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.3);
+        }
+        &_zt {
+            position: absolute;
+            top: 0;
+            right: 0;
+            border-radius: 0 6px 0 6px;
+            background-color: @border;
+            padding: 2px 4px;
+            font-size: 12px;
+            &.active {
+                background-color: @text5;
+            }
+        }
+    }
+}
+// 中奖弹框区
+.code-img {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 375px;
+    height: 490px;
+    background: url('../../assets/yuanyu/bg-zhj.png') no-repeat;
+    background-size: 100% auto;
+    .code-bg {
+        width: 298px;
+        height: 298px;
+        background: url('../../assets/yuanyu/bg-zhj2.png') no-repeat 100% 100%;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 9;
+    }
+    .code-title {
+        position: absolute;
+        top: -6px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 10;
+    }
+    .code-title2 {
+        position: absolute;
+        top: -6px;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+    .code-liping {
+        width: 284px;
+        height: 284px;
+        background-color: @bg3;
+        border-radius: 24px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+    .code-close {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: -60px;
+        width: 40px;
+        height: 40px;
+    }
+}
+// 公告样式调整
+/deep/ .van-notice-bar {
+    background: linear-gradient(to right, @text6, @text7);
+    .van-icon__image {
+        width: 22px;
+        height: 22px;
+        margin-right: 10px;
+    }
+}
+</style>

src/views/welfare/Integral.vue

@@ -1,186 +1,198 @@
 <template>
     <div class="page">
-		<div class="heard">
-			<div class="heard_title">总积分</div>
-			<div class="heard_num">{{userIntegral.totalIntegral}}</div>
-			<div class="heard_tips">本月已消耗积分:{{userIntegral.monthConsumeIntegral}}</div>
-		</div> 
-		<van-sticky ref="top" :offset-top="bar.value.show ? 46 : 0">
-			<div class="top">
-				<div class="top-btn">
-					<div class="btn" :class="{ active: type === 'DEFAULT' }" @click="changeActive('DEFAULT')">
-						积分收支明细
-					</div>
-					<!-- <div class="btn" :class="{ active: type === 'BLIND_BOX' }" @click="changeActive('BLIND_BOX')">
+        <div class="heard">
+            <div class="heard_title">总积分</div>
+            <div class="heard_num">{{ userIntegral.totalIntegral }}</div>
+            <div class="heard_tips">本月已消耗积分:{{ userIntegral.monthConsumeIntegral }}</div>
+        </div>
+        <van-sticky ref="top" :offset-top="bar.value.show ? 46 : 0">
+            <div class="top">
+                <div class="top-btn">
+                    <div class="btn" :class="{ active: type === 'DEFAULT' }" @click="changeActive('DEFAULT')">
+                        积分收支明细
+                    </div>
+                    <!-- <div class="btn" :class="{ active: type === 'BLIND_BOX' }" @click="changeActive('BLIND_BOX')">
 						积分兑换记录	
 					</div> -->
-				</div>
-			</div>
-			<van-tabs v-if="type === 'DEFAULT'" v-model:active="status" :ellipsis="false" line-width="16" line-height="2" @click="changeStatus">
-				<van-tab v-for="(item, index) in tabs" :key="index" :title="item.name" :name="item.status"></van-tab>
-			</van-tabs>
-		</van-sticky>
-       <van-list class="list" v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
-            <integral-info v-for="item in list" :key="item.id" :info="item" ></integral-info>
-           <van-empty v-if="empty" description="暂无对应的积分数据哦~" :image="require('@assets/kong_png_wudingdan.png')" />
-       </van-list>
+                </div>
+            </div>
+            <van-tabs
+                v-if="type === 'DEFAULT'"
+                v-model:active="status"
+                :ellipsis="false"
+                line-width="16"
+                line-height="2"
+                @click="changeStatus"
+            >
+                <van-tab v-for="(item, index) in tabs" :key="index" :title="item.name" :name="item.status"></van-tab>
+            </van-tabs>
+        </van-sticky>
+        <van-list class="list" v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
+            <integral-info v-for="item in list" :key="item.id" :info="item"></integral-info>
+            <van-empty
+                v-if="empty"
+                description="暂无对应的积分数据哦~"
+                :image="require('@assets/kong_png_wudingdan.png')"
+            />
+        </van-list>
     </div>
 </template>
 
 <script>
-import IntegralInfo from '../../components/IntegralInfo.vue';	
+import IntegralInfo from '../../components/IntegralInfo.vue';
 import list from '../../mixins/list';
 export default {
-	name: 'integral',
-	inject: ['bar'],
-	mixins: [list],
-	components: {
-	    IntegralInfo
-	},
+    name: 'integral',
+    inject: ['bar'],
+    mixins: [list],
+    components: {
+        IntegralInfo
+    },
     data() {
         return {
-			status: 'CREDIT,DEBIT',
-			type: 'DEFAULT',
-			list: [],
-			tabs: [
-			    {
-			        status: 'CREDIT,DEBIT',
-			        name: '全部'
-			    },
-			    {
-			        status: 'CREDIT',
-			        name: '已获取'
-			    },
-			    {
-			        status: 'DEBIT',
-			        name: '已消耗'
-			    }
-			],
-			
-			url: '/userIntegralChangeLog/changeLogList',
-			empty: false,
-			userIntegral:''
-		}
-	},
+            status: 'CREDIT,DEBIT',
+            type: 'DEFAULT',
+            list: [],
+            tabs: [
+                {
+                    status: 'CREDIT,DEBIT',
+                    name: '全部'
+                },
+                {
+                    status: 'CREDIT',
+                    name: '已获取'
+                },
+                {
+                    status: 'DEBIT',
+                    name: '已消耗'
+                }
+            ],
+
+            url: '/userIntegralChangeLog/changeLogList',
+            empty: false,
+            userIntegral: ''
+        };
+    },
     mounted() {
-		if (this.$route.query.status) {
-		    this.status = this.$route.query.status;
-		}
-		this.userIntegralGetInfo();//获取用户积分 
+        if (this.$route.query.status) {
+            this.status = this.$route.query.status;
+        }
+        this.userIntegralGetInfo(); //获取用户积分
     },
-	methods: {
-		beforeData() {
-		    return {
-		        query: {
-					flag: this.status,//出入帐标志：DEBIT("出账"),   CREDIT("入账")
-		        }
-		    };
-		},
-		// 获取用户积分
-		userIntegralGetInfo(){
-			this.$http.post('/userIntegral/getInfo').then(res => {
-				this.userIntegral = res;//用户积分
-			}).catch(e=>{
-				this.$toast(e.error);
-			})
-		},
-		
-		changeStatus(name) { 
-		    this.$router.replace({
-		        path: '/welfareintegral',
-		        query: {
-		            status: name,
-		            type: this.type
-		        }
-		    });
-		    this.getData(true);	
-		},
-		changeActive(type) {
-			if(type == 'DEFAULT'){
-				this.$router.replace({
-				    path: '/welfareintegral',
-				    query: {
-				        status: this.status,
-				        type: type 
-				    }
-				});
-				this.type = type;
-				this.getData(true);
-			}else{
-				this.list = [];
-				this.empty = true;
-				this.type = type;
-			}
-		    
-		}
-	},
+    methods: {
+        beforeData() {
+            return {
+                query: {
+                    flag: this.status //出入帐标志：DEBIT("出账"),   CREDIT("入账")
+                }
+            };
+        },
+        // 获取用户积分
+        userIntegralGetInfo() {
+            this.$http
+                .post('/userIntegral/getInfo')
+                .then(res => {
+                    this.userIntegral = res; //用户积分
+                })
+                .catch(e => {
+                    this.$toast(e.error);
+                });
+        },
+
+        changeStatus(name) {
+            this.$router.replace({
+                path: '/welfareintegral',
+                query: {
+                    status: name,
+                    type: this.type
+                }
+            });
+            this.getData(true);
+        },
+        changeActive(type) {
+            if (type == 'DEFAULT') {
+                this.$router.replace({
+                    path: '/welfareintegral',
+                    query: {
+                        status: this.status,
+                        type: type
+                    }
+                });
+                this.type = type;
+                this.getData(true);
+            } else {
+                this.list = [];
+                this.empty = true;
+                this.type = type;
+            }
+        }
+    }
 };
 </script>
 
 <style lang="less" scoped>
-	.heard{
-		.flex();
-		width: 336px;
-		height: 185px;
-		margin: 15px auto;
-		border-radius: 10px;
-		flex-direction: column;
-		justify-content: center;
-		color: #fff;
-		background: url('../../assets/yuanyu/bg-integral.png');
-		background-size: 100% 100%;
-		
-		&_title{
-			font-size: 16px;
-		}
-		&_num{
-			font-size: 32px;
-			font-weight: bold;
-			margin-bottom: 8px;
-		}
-		&_tips{
-			font-size: 14px;
-		}
-	}
-	.top {
-		.flex();
-	    padding: 10px 16px;
-	    background-color: @background-color-light2;
-	    .top-btn {  
-			width: 100%;
-			display: flex;
-			justify-content: space-around;
-	        .btn {
-	            font-size: @font3;
-	            line-height: 26px;
-	            display: inline-block;
-	            vertical-align: text-bottom;
-	            color: #939599;
-	            &.active {
-	                color: @text6;
-	                font-size: @font3;
-	                font-weight: bold;
-	                line-height: 30px;
-	            }
-	        }
-	
-	        .btn + .btn {
-	            margin-left: 30px;
-	        }
-	    }
-	}
-	/deep/ .van-tabs {
-	    background-color: @background-color-light2;
-		.van-tab.van-tab--active{
-			color: @text6 !important; 
-		}
-		.van-tabs__line{
-			background-color: @text6;
-		}
-	}
-	
-	.list{
-		padding: 0 15px;
-	}
-	
-</style>
+.heard {
+    .flex();
+    width: 336px;
+    height: 185px;
+    margin: 15px auto;
+    border-radius: 10px;
+    flex-direction: column;
+    justify-content: center;
+    color: #fff;
+    background: url('../../assets/yuanyu/bg-integral.png');
+    background-size: 100% 100%;
+
+    &_title {
+        font-size: 16px;
+    }
+    &_num {
+        font-size: 32px;
+        font-weight: bold;
+        margin-bottom: 8px;
+    }
+    &_tips {
+        font-size: 14px;
+    }
+}
+.top {
+    .flex();
+    padding: 10px 16px;
+    background-color: @background-color-light2;
+    .top-btn {
+        width: 100%;
+        display: flex;
+        justify-content: space-around;
+        .btn {
+            font-size: @font3;
+            line-height: 26px;
+            display: inline-block;
+            vertical-align: text-bottom;
+            color: #939599;
+            &.active {
+                color: @text6;
+                font-size: @font3;
+                font-weight: bold;
+                line-height: 30px;
+            }
+        }
+
+        .btn + .btn {
+            margin-left: 30px;
+        }
+    }
+}
+/deep/ .van-tabs {
+    background-color: @background-color-light2;
+    .van-tab.van-tab--active {
+        color: @text6 !important;
+    }
+    .van-tabs__line {
+        background-color: @text6;
+    }
+}
+
+.list {
+    padding: 0 15px;
+}
+</style>

vue.config.js

@@ -1,6 +1,6 @@
 const path = require('path');
 module.exports = {
-    publicPath: process.env.NODE_ENV==='development' ? '/' : '/art/',
+    publicPath: process.env.NODE_ENV === 'development' ? '/' : '/art/',
     devServer: {
         port: 8081,
         disableHostCheck: true