成功页优化

mall/src/pages/callback/index.vue

@@ -1,403 +1,427 @@
 <template>
-	<!-- 各种回调页面 -->
-	<div class="app-content" :class="[contentClass]">
-		<div class="callback-wrap">
-			<div class="callback-blo">
-				<!-- 使用icon -->
-				<!-- 待支付 -->
-				<block v-if="pageStatus == 1 || pageStatus == 2">
-					<div class="icon">
-						<i class="iconfont icondaizhifu"></i>
-					</div>
-				</block>
-				<!-- 使用图片 -->
-				<!-- 支付成功 -->
-				<block v-else>
-					<div class="status-img">
-						<img :src="`${constant.imgUrl}/retail/callback/success.png`" alt mode="widthFix" />
-					</div>
-				</block>
-				<div class="status-text app-size-36 app-bold">{{ pageTit }}</div>
-				<!-- 待支付 -->
-				<block v-if="pageStatus == 1 || pageStatus == 2">
-					<div class="price">
-						<span>￥</span>
-						<span class="app-size-36 app-bold">{{ option.totalPrice }}</span>
-					</div>
-					<div class="surplus app-color-3" v-if="!$util.isEmpty(shopUser)">余额￥{{ shopUser.userAsset.balance }}</div>
-					<div class="order-num app-color-3">订单号: {{ option.orderSn }}</div>
-				</block>
-				<!-- 待支付 - 订单支付成功 -->
-				<block v-else-if="pageStatus == 3 && payDiscountPrice >0">
-					<div>
-						<span v-if="payDiscountType == 0" class="app-color-2">使用优惠券为您省</span>
-						<span v-else-if="payDiscountType == 1" class="app-color-2">会员身份为您省</span>
-						<span v-else-if="payDiscountType == 2" class="app-color-2">随机优惠为您省</span>
-						<span v-else class="app-color-2">随机优惠为您省</span>
-						<span class="app-price">{{ payDiscountPrice }}元</span>
-					</div>
-				</block>
-				<!-- 评价成功 -->
-				<block v-else-if="pageStatus == 4">
-					<div class="app-color-2">谢谢您，我还会继续努力么么哒~</div>
-				</block>
-				<!-- 提交成功 -->
-				<block v-else-if="pageStatus == 6">
-					<div class="call-back-wrap">
-						<div class="qr-code-img">
-							<img :src="merchantInfo.smallWxQrCodeUrl" alt="二维码" mode="widthFix" />
-						</div>
-						<div class="app-color-2">最后一步</div>
-						<div class="app-color-2">识别二维码并关注公众号</div>
-					</div>
-				</block>
-				<!-- ======================= 按钮块 ======================== -->
-				<!-- 一个主按钮 -->
-				<!-- 待支付 -->
-				<block v-if="pageStatus == 1 || pageStatus == 2">
-					<div class="call-one-btn">
-						<button v-if="isYeBtnShow" class="button-com red pay-ye" @click="balancePayFn">余额支付</button>
-						<button class="button-com green pay-wx" @click="_wxPay">微信支付</button>
-					</div>
-				</block>
-				<!-- 两个主按钮 -->
-				<block v-else-if="pageStatus == 3 || pageStatus == 4 || pageStatus == 5">
-					<div class="call-btn-com call-two-btn">
-						<button class="button-com default" @click="pageTo({
+  <!-- 各种回调页面 -->
+  <div class="app-content" :class="[contentClass]">
+    <div class="callback-wrap">
+      <div class="callback-blo">
+        <!-- 使用icon -->
+        <!-- 待支付 -->
+        <block v-if="pageStatus == 1 || pageStatus == 2">
+          <div class="icon">
+            <i class="iconfont icondaizhifu"></i>
+          </div>
+        </block>
+        <!-- 使用图片 -->
+        <!-- 支付成功 -->
+        <block v-else>
+          <div class="status-img">
+            <img :src="`${constant.imgUrl}/retail/callback/success.png`" alt mode="widthFix" />
+          </div>
+        </block>
+        <div class="status-text app-size-36 app-bold">{{ pageTit }}</div>
+        <!-- 待支付 -->
+        <block v-if="pageStatus == 1 || pageStatus == 2">
+          <div class="price">
+            <span>￥</span>
+            <span class="app-size-36 app-bold">{{ option.totalPrice }}</span>
+          </div>
+          <div
+            class="surplus app-color-3"
+            v-if="!$util.isEmpty(shopUser)"
+          >余额￥{{ shopUser.userAsset.balance }}</div>
+          <div class="order-num app-color-3">订单号: {{ option.orderSn }}</div>
+        </block>
+        <!-- 待支付 - 订单支付成功 -->
+        <block v-else-if="pageStatus == 3 && payDiscountPrice >0">
+          <div>
+            <span v-if="payDiscountType == 0" class="app-color-2">使用优惠券为您省</span>
+            <span v-else-if="payDiscountType == 1" class="app-color-2">会员身份为您省</span>
+            <span v-else-if="payDiscountType == 2" class="app-color-2">随机优惠为您省</span>
+            <span v-else class="app-color-2">随机优惠为您省</span>
+            <span class="app-price">{{ payDiscountPrice }}元</span>
+          </div>
+        </block>
+        <!-- 评价成功 -->
+        <block v-else-if="pageStatus == 4">
+          <div class="app-color-2">谢谢您，我还会继续努力么么哒~</div>
+        </block>
+        <!-- 提交成功 -->
+        <block v-else-if="pageStatus == 6">
+          <div class="call-back-wrap">
+            <div class="qr-code-img">
+              <img :src="merchantInfo.smallWxQrCodeUrl" alt="二维码" mode="widthFix" />
+            </div>
+            <div class="app-color-2">最后一步</div>
+            <div class="app-color-2">识别二维码并关注公众号</div>
+          </div>
+        </block>
+        <!-- 待支付 -->
+        <block v-if="pageStatus == 1 || pageStatus == 2">
+          <div class="call-one-btn">
+            <button v-if="isYeBtnShow" class="button-com red pay-ye" @click="balancePayFn">余额支付</button>
+            <button class="button-com green pay-wx" @click="_wxPay">微信支付</button>
+          </div>
+        </block>
+        <!-- 两个主按钮 -->
+        <block v-else-if="pageStatus == 3 || pageStatus == 4 || pageStatus == 5">
+          <div class="call-btn-com call-two-btn">
+            <button
+              class="button-com default"
+              @click="pageTo({
 							url: '/pages/order/detail',
+							type: 2,
 							query: {
 								orderSn: option.orderSn,
 								id: option.id
 							}
-						})">查看订单</button>
-						<button class="button-com" @click="pageTo({
+						})"
+            >查看订单</button>
+            <button
+              class="button-com"
+              @click="pageTo({
 							url: '/pages/home/index',
-							type: 4
-						})">返回首页</button>
-					</div>
-				</block>
-			</div>
-			<!-- 优惠券 -->
-			<div class="coupon-wrap" v-if="option.pageStatus == 5">
-				<div class="coupon-img">
-					<img :src="`${constant.imgUrl}/retail/callback/coupon.png`" alt mode="widthFix" />
-				</div>
-				<div class="qrcode-img">
-					<img :src="`${constant.imgUrl}/retail/images/extension.png`" alt mode="widthFix" />
-				</div>
-			</div>
-		</div>
-		<!-- 支付密码弹窗 -->
-		<modal-module :show="passwordModal" @cancel="modalCancel" @click="passwordModalClick" :maskClosable="false" title="支付密码" padding="30rpx 30rpx">
-			<template v-slot:content>
-				<div class="app-modal-input-wrap">
-					<div class="inp-list-line">
-						<!-- <div class="line-label">支付密码</div> -->
-						<div class="line-input">
-							<input type="password" v-model="form.payPassword" :adjust-position="false" class="inp-input" />
-						</div>
-					</div>
-				</div>
-			</template>
-		</modal-module>
-		<!-- 未设置支付密码弹窗 -->
-		<alert-module :show="setPassModal" btnText="去设置" btnColor="#FF2842" padding="66rpx 24rpx 66rpx 24rpx" @click="hideAlert">
-			<div class="go-login-module">
-				<div>暂未设置密码，去设置密码！</div>
-			</div>
-		</alert-module>
-	</div>
+							type: 2
+						})"
+            >返回首页</button>
+          </div>
+        </block>
+      </div>
+      <!-- 优惠券 -->
+      <div class="coupon-wrap" v-if="option.pageStatus == 5">
+        <div class="coupon-img">
+          <img :src="`${constant.imgUrl}/retail/callback/coupon.png`" alt mode="widthFix" />
+        </div>
+        <div class="qrcode-img">
+          <img :src="`${constant.imgUrl}/retail/images/extension.png`" alt mode="widthFix" />
+        </div>
+      </div>
+    </div>
+    <!-- 支付密码弹窗 -->
+    <modal-module
+      :show="passwordModal"
+      @cancel="modalCancel"
+      @click="passwordModalClick"
+      :maskClosable="false"
+      title="支付密码"
+      padding="30rpx 30rpx"
+    >
+      <template v-slot:content>
+        <div class="app-modal-input-wrap">
+          <div class="inp-list-line">
+            <!-- <div class="line-label">支付密码</div> -->
+            <div class="line-input">
+              <input
+                type="password"
+                v-model="form.payPassword"
+                :adjust-position="false"
+                class="inp-input"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
+    </modal-module>
+    <!-- 未设置支付密码弹窗 -->
+    <alert-module
+      :show="setPassModal"
+      btnText="去设置"
+      btnColor="#FF2842"
+      padding="66rpx 24rpx 66rpx 24rpx"
+      @click="hideAlert"
+    >
+      <div class="go-login-module">
+        <div>暂未设置密码，去设置密码！</div>
+      </div>
+    </alert-module>
+  </div>
 </template>
 
 <script>
-	/** *
-	 * 页面状态
-	 * @parmas pageStatus 进入页面的状态
-	 * @parmas 1 待支付 - 余额支付 或者 微信支付 -- awaitPayYe
-	 * @parmas 2 待支付 - 微信支付 -- awaitPayWx
-	 * @parmas 3 支付成功 -- successPay
-	 * @parmas 4 评价成功 -- successEval
-	 * @parmas 5 支付成功 - 扫码支付 -- successPayCode
-	 * @parmas 6 申请成功 - 申请会员 -- registerMember
-	 */
-	import { mapGetters } from 'vuex'
-	import ModalModule from '@/components/plugin/modal'
-	import AlertModule from '@/components/plugin/alert'
-	import wexinPay from '@/utils/pay/wxPay'
-	import { getMerchantInfo } from '@/api/common'
-	import { getShopUser } from '@/utils/auth'
-	import { balancePay, wxPay } from '@/api/order'
-	export default {
-		name: 'callback',
-		components: {
-			ModalModule,
-			AlertModule
-		},
-		data() {
-			return {
-				constant: this.$constant,
-				pageTit: '',
-				pageStatus: 1,
-				contentClass: '',
-				payDiscountPrice: null,
-				payDiscountType:0,
-				passwordModal: false,
-				form: {
-					payPassword: ''
-				},
-				payCallData: {},
-				merchantInfo: {},
-				setPassModal: false
-			}
-		},
-		computed: {
-			...mapGetters({ shopUser: 'getShopUser' }),
-			isYeBtnShow() {
-				if (this.$util.isEmpty(this.shopUser)){
-					return false
-				} 
-				return this.shopUser.userAsset.balance > this.option.totalPrice
-			}
-		},
-		onLoad() {
+/** *
+ * 页面状态
+ * @parmas pageStatus 进入页面的状态
+ * @parmas 1 待支付 - 余额支付 或者 微信支付 -- awaitPayYe
+ * @parmas 2 待支付 - 微信支付 -- awaitPayWx
+ * @parmas 3 支付成功 -- successPay
+ * @parmas 4 评价成功 -- successEval
+ * @parmas 5 支付成功 - 扫码支付 -- successPayCode
+ * @parmas 6 申请成功 - 申请会员 -- registerMember
+ */
+import { mapGetters } from "vuex";
+import ModalModule from "@/components/plugin/modal";
+import AlertModule from "@/components/plugin/alert";
+import wexinPay from "@/utils/pay/wxPay";
+import { getMerchantInfo } from "@/api/common";
+import { getShopUser } from "@/utils/auth";
+import { balancePay, wxPay } from "@/api/order";
+export default {
+  name: "callback",
+  components: {
+    ModalModule,
+    AlertModule
+  },
+  data() {
+    return {
+      constant: this.$constant,
+      pageTit: "",
+      pageStatus: 1,
+      contentClass: "",
+      payDiscountPrice: null,
+      payDiscountType: 0,
+      passwordModal: false,
+      form: {
+        payPassword: ""
+      },
+      payCallData: {},
+      merchantInfo: {},
+      setPassModal: false
+    };
+  },
+  computed: {
+    ...mapGetters({ shopUser: "getShopUser" }),
+    isYeBtnShow() {
+      if (this.$util.isEmpty(this.shopUser)) {
+        return false;
+      }
+      return this.shopUser.userAsset.balance > this.option.totalPrice;
+    }
+  },
+  onLoad() {},
+  methods: {
+    init() {
+      this.pageStatus = this.option.pageStatus;
+      console.log("pageStatus 值发生变化");
+      console.log(this.pageStatus);
+      this.payDiscountPrice = this.option.payDiscountPrice;
+      this.payDiscountType = this.option.payDiscountType;
+      this.initClass(this.pageStatus);
+      getShopUser(true);
+      getMerchantInfo().then(res => {
+        this.merchantInfo = res.data;
+      });
+    },
+    // 余额支付
+    _balancePay() {
+      if (!this.form.payPassword) {
+        this.$msg("请先输入支付密码!");
+        return false;
+      }
+      balancePay({
+        payPassword: this.form.payPassword,
+        orderSn: this.option.orderSn,
+        couponId: this.option.couponId
+      })
+        .then(res => {
+          this.modalCancel();
+          this.$msg("支付成功！");
 
-		},
-		methods: {
-			init() {
-				this.pageStatus = this.option.pageStatus
-				console.log('pageStatus 值发生变化')
-				console.log(this.pageStatus)
-				this.payDiscountPrice = this.option.payDiscountPrice
-				this.payDiscountType = this.option.payDiscountType
-				this.initClass(this.pageStatus)
-				getShopUser(true)
-				getMerchantInfo().then(res => {
-					this.merchantInfo = res.data
-				})
-			},
-			// 余额支付
-			_balancePay() {
-				if (!this.form.payPassword) {
-					this.$msg('请先输入支付密码!')
-					return false
-				}
-				balancePay({
-					payPassword: this.form.payPassword,
-					orderSn: this.option.orderSn,
-					couponId: this.option.couponId
-				})
-					.then(res => {
-						this.modalCancel()
-						this.$msg('支付成功！')
+          this.payCallData = res.data;
+          this.paySuccess();
+        })
+        .catch(e => {
+          this.$msg(e.msg);
+          return false;
+        });
+    },
+    // 微信支付
+    _wxPay() {
+      wxPay({
+        orderSn: this.option.orderSn,
+        couponId: this.option.couponId
+      }).then(res => {
+        this.payCallData = res.data;
+        wexinPay(res.data, this.paySuccess, this.payFail);
+      });
+    },
+    paySuccess() {
+      this.$util.pageTo({
+        url: "/pages/callback/index",
+        type: 2,
+        query: {
+          ...this.option,
+          pageStatus: 3,
+          payDiscountPrice: this.payCallData.discountAmount,
+          payDiscountType: this.payCallData.discountType
+        }
+      });
+    },
+    payFail() {
+      alert("支付失败!");
+    },
+    balancePayFn() {
+      if (this.shopUser.hasPayPwd == 0) {
+        this.setPassModal = true;
+      } else {
+        this.passwordModal = true;
+      }
+    },
+    passwordModalClick(e) {
+      if (e.index === 0) {
+        this.modalCancel();
+      } else {
+        this._balancePay();
+      }
+    },
+    modalCancel() {
+      this.passwordModal = false;
+      this.form.payPassword = "";
+    },
+    // 暂未设置密码
+    hideAlert() {
+      this.$util.pageTo("/pages/user/password");
+    },
+    // 初始样式
+    initClass(val) {
+      switch (val) {
+        case "1":
+          this.pageTit = "待支付";
+          this.contentClass = "awaitPayYe";
+          break;
+        case "2":
+          this.pageTit = "待支付";
+          this.contentClass = "awaitPayWx";
+          break;
+        case "3":
+          this.pageTit = "支付成功";
+          this.contentClass = "successPay";
+          break;
+        case "4":
+          this.pageTit = "评价成功";
+          this.contentClass = "successEval";
+          break;
+        case "5":
+          this.pageTit = "支付成功";
+          this.contentClass = "successPayCode";
+          break;
+        case "6":
+          this.pageTit = "提交成功";
+          this.contentClass = "registerMember";
+          break;
+        default:
+          this.pageTit = "支付成功";
+          this.contentClass = "awaitPayYe";
+          break;
+      }
 
-						this.payCallData = res.data
-						this.paySuccess()
-					})
-					.catch(e => {
-						this.$msg(e.msg)
-						return false
-					})
-			},
-			// 微信支付
-			_wxPay() {
-				wxPay({
-					orderSn: this.option.orderSn,
-					couponId: this.option.couponId
-				}).then(res => {
-					this.payCallData = res.data
-					wexinPay(res.data, this.paySuccess, this.payFail)
-				})
-			},
-			paySuccess() {
-				this.$util.pageTo({
-					url: '/pages/callback/index',
-					type: 2,
-					query: {
-						...this.option,
-						pageStatus: 3,
-						payDiscountPrice: this.payCallData.discountAmount,
-						payDiscountType:this.payCallData.discountType
-					}
-				})
-			},
-			payFail() {
-				alert('支付失败!')
-			},
-			balancePayFn() {
-				if (this.shopUser.hasPayPwd == 0) {
-					this.setPassModal = true
-				} else {
-					this.passwordModal = true
-				}
-			},
-			passwordModalClick(e) {
-				if (e.index === 0) {
-					this.modalCancel()
-				} else {
-					this._balancePay()
-				}
-			},
-			modalCancel() {
-				this.passwordModal = false
-				this.form.payPassword = ''
-			},
-			// 暂未设置密码
-			hideAlert() {
-				this.$util.pageTo('/pages/user/password')
-			},
-			// 初始样式
-			initClass(val) {
-				switch (val) {
-					case '1':
-						this.pageTit = '待支付'
-						this.contentClass = 'awaitPayYe'
-						break
-					case '2':
-						this.pageTit = '待支付'
-						this.contentClass = 'awaitPayWx'
-						break
-					case '3':
-						this.pageTit = '支付成功'
-						this.contentClass = 'successPay'
-						break
-					case '4':
-						this.pageTit = '评价成功'
-						this.contentClass = 'successEval'
-						break
-					case '5':
-						this.pageTit = '支付成功'
-						this.contentClass = 'successPayCode'
-						break
-					case '6':
-						this.pageTit = '提交成功'
-						this.contentClass = 'registerMember'
-						break
-					default:
-						this.pageTit = '支付成功'
-						this.contentClass = 'awaitPayYe'
-						break
-				}
-
-				uni.setNavigationBarTitle({
-					title: this.pageTit
-				})
-			}
-		}
-	}
+      uni.setNavigationBarTitle({
+        title: this.pageTit
+      });
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-	.app-content {
-		.callback-wrap {
-			padding-top: 50px;
-			background-image: url('../../static/images/callback/bg.png');
-			background-repeat: no-repeat;
-			background-size: 100% auto;
-			.callback-blo {
-				width: 90%;
-				margin: 0 auto;
-				padding: 70px 0;
-				background-color: #fff;
-				box-shadow: 2px 2px 16px 0px rgba(181, 181, 181, 0.29);
-				border-radius: 10px;
-				text-align: center;
-				// 使用icon
-				.icon {
-					.iconfont {
-						font-size: 170px;
-					}
-				}
-				// 使用状态图片
-				.status-img {
-					width: 294px;
-					margin: 0 auto;
-				}
-				.call-btn-com {
-					margin-top: 56px;
-					@include disFlex(center, space-evenly);
-				}
-				// 一个按钮
-				.call-one-btn {
-					.button-com {
-						width: 80%;
-						padding-top: 22px;
-						padding-bottom: 22px;
-						font-size: 32px;
-						margin-top: 40px;
-					}
-				}
-				// 两个按钮
-				.call-two-btn {
-					.button-com {
-						width: 40%;
-						padding-top: 22px;
-						padding-bottom: 22px;
-						font-size: 32px;
-					}
-					.default {
-						margin-right: 20px;
-					}
-				}
-			}
-			// 优惠券
-			.coupon-wrap {
-				width: 96%;
-				margin: 52px auto 0;
-				position: relative;
-				.qrcode-img {
-					width: 170px;
-					height: 170px;
-					position: absolute;
-					top: 40px;
-					right: 108px;
-				}
-			}
-		}
-	}
-	// 待支付 - 公共
-	.awaitPayWx,
-	.awaitPayYe {
-		.status-text {
-			margin-top: 22px;
-			margin-bottom: 52px;
-			color: #ffa92e;
-		}
-		.surplus {
-			margin-top: 22px;
-			margin-bottom: 38px;
-		}
-		.icon {
-			.iconfont {
-				color: #ffa92e;
-			}
-		}
-	}
-	// 待支付 - 余额
-	.registerMember,
-	.successPay,
-	.successPayCode,
-	.successEval {
-		.status-text {
-			color: #333;
-			margin-top: 22px;
-			margin-bottom: 52px;
-		}
-	}
-	// 提交成功
-	.registerMember {
-		.call-back-wrap {
-			.qr-code-img {
-				width: 300px;
-				height: 300px;
-				margin: 20px auto;
-				img {
-					height: 100%;
-				}
-			}
-			.app-color-2 {
-				font-size: 30px;
-				margin-bottom: 20px;
-			}
-		}
-	}
+.app-content {
+  .callback-wrap {
+    padding-top: 50px;
+    background-image: url("../../static/images/callback/bg.png");
+    background-repeat: no-repeat;
+    background-size: 100% auto;
+    .callback-blo {
+      width: 90%;
+      margin: 0 auto;
+      padding: 70px 0;
+      background-color: #fff;
+      box-shadow: 2px 2px 16px 0px rgba(181, 181, 181, 0.29);
+      border-radius: 10px;
+      text-align: center;
+      // 使用icon
+      .icon {
+        .iconfont {
+          font-size: 170px;
+        }
+      }
+      // 使用状态图片
+      .status-img {
+        width: 294px;
+        margin: 0 auto;
+      }
+      .call-btn-com {
+        margin-top: 56px;
+        @include disFlex(center, space-evenly);
+      }
+      // 一个按钮
+      .call-one-btn {
+        .button-com {
+          width: 80%;
+          padding-top: 22px;
+          padding-bottom: 22px;
+          font-size: 32px;
+          margin-top: 40px;
+        }
+      }
+      // 两个按钮
+      .call-two-btn {
+        .button-com {
+          width: 40%;
+          padding-top: 22px;
+          padding-bottom: 22px;
+          font-size: 32px;
+        }
+        .default {
+          margin-right: 20px;
+        }
+      }
+    }
+    // 优惠券
+    .coupon-wrap {
+      width: 96%;
+      margin: 52px auto 0;
+      position: relative;
+      .qrcode-img {
+        width: 170px;
+        height: 170px;
+        position: absolute;
+        top: 40px;
+        right: 108px;
+      }
+    }
+  }
+}
+// 待支付 - 公共
+.awaitPayWx,
+.awaitPayYe {
+  .status-text {
+    margin-top: 22px;
+    margin-bottom: 52px;
+    color: #ffa92e;
+  }
+  .surplus {
+    margin-top: 22px;
+    margin-bottom: 38px;
+  }
+  .icon {
+    .iconfont {
+      color: #ffa92e;
+    }
+  }
+}
+// 待支付 - 余额
+.registerMember,
+.successPay,
+.successPayCode,
+.successEval {
+  .status-text {
+    color: #333;
+    margin-top: 22px;
+    margin-bottom: 52px;
+  }
+}
+// 提交成功
+.registerMember {
+  .call-back-wrap {
+    .qr-code-img {
+      width: 300px;
+      height: 300px;
+      margin: 20px auto;
+      img {
+        height: 100%;
+      }
+    }
+    .app-color-2 {
+      font-size: 30px;
+      margin-bottom: 20px;
+    }
+  }
+}
 </style>

mall/src/pages/home/user.vue

@@ -16,12 +16,12 @@
                       <template v-if="shopUser.member > 0">
                         <appVipModule
                           class="level-img"
-                          :vipImgUrl="`${constant.imgUrl}/retail/interest/${shopUser.member}.png`"
+                          :vipImgUrl="`${constant.imgUrl}/retail/interest/grade/${shopUser.member}.png`"
                         />
                       </template>
                       <template v-else>
                         <template v-if="mobile != '' && subscribe == 1">
-                          <appVipModule class="level-img" :vipImgUrl="`${constant.imgUrl}/retail/interest/member.png`" />
+                          <appVipModule class="level-img" :vipImgUrl="`${constant.imgUrl}/retail/interest/grade/member.png`" />
                         </template>
                         <template v-else>
                           <div class="nomal-text">普通客户</div>