feat(shareRegiest): 分享注册逻辑迁移

App.vue

@@ -14,9 +14,9 @@ export default {
       'pages/login/index',
       // 'pages/wechatPay/bfPay/',
       // 'pages/wechatPay/hfPay/',
-      // 'pages/shareArea/hiList',
+      'pages/shareArea/hiList',
-      // 'pages/shareArea/hiOrder',
+      'pages/shareArea/hiOrder',
-      // 'pages/pay/hiPay'
+      'pages/pay/hiPay',
     ]
     if (whiteList.indexOf(options.path) !== -1) return
     this.$store.dispatch('GetInfo')

components/share/DefaultSharePage.vue

@@ -0,0 +1,311 @@
+<template>
+  <view class="default-share-page">
+    <!-- 背景图片，替代CSS background -->
+    <img
+      class="share-bg-image"
+      src="/static/images/share-bg.jpg"
+      mode="scaleToFill"
+      crossorigin="anonymous"
+      @load="onBackgroundImageLoad"
+      @error="onBackgroundImageError"
+    />
+
+    <view class="share-wrapper">
+      <view class="portal-frame" :class="{ 'is-loaded': isLoaded }">
+        <!-- 二维码样式区域 - 用户自定义样式位置 -->
+        <view class="qr-code-outer">
+          <img
+            class="qr-code"
+            :src="qrCodeImage"
+            mode="aspectFit"
+            v-if="qrCodeImage"
+          />
+          <view v-else class="qr-code-placeholder">
+            <view class="loader"></view>
+          </view>
+        </view>
+
+        <!-- 会员编号样式区域 - 用户自定义样式位置 -->
+        <text
+          class="member-code-text"
+          style="
+            font-size: 30rpx;
+            color: #fff;
+            font-weight: bold;
+            margin-top: 20rpx;
+          "
+          >{{ desensitization(userInfo.memberCode) }}</text
+        >
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import html2canvas from 'html2canvas'
+
+export default {
+  name: 'DefaultSharePage',
+  props: {
+    qrCodeImage: {
+      type: String,
+      default: '',
+    },
+    userInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+    isWechat: {
+      type: Boolean,
+      default: false,
+    },
+    isLoaded: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      backgroundImageLoaded: false,
+      shareButtonShow: true,
+    }
+  },
+  methods: {
+    desensitization(str) {
+      if (!str) return ''
+      if (str.length <= 8) return str.slice(0, 4) + '****'
+      const len = str.length - 6
+      const placeholder = '*'.repeat(len)
+      return str.slice(0, 4) + placeholder + str.slice(-2)
+    },
+
+    // 背景图片加载成功
+    onBackgroundImageLoad() {
+      this.backgroundImageLoaded = true
+      console.log('默认场景背景图片加载成功')
+    },
+
+    // 背景图片加载失败
+    onBackgroundImageError(e) {
+      console.error('默认场景背景图片加载失败:', e)
+    },
+
+    async sharePage() {
+      if (!this.qrCodeImage) {
+        uni.showToast({
+          title: '二维码尚未生成',
+          icon: 'none',
+        })
+        return
+      }
+
+      uni.showLoading({ title: '加载中...' })
+
+      try {
+        this.shareButtonShow = false
+        await this.$nextTick()
+
+        await this.capturePageWithHtml2Canvas()
+      } catch (error) {
+        uni.hideLoading()
+        uni.showToast({ title: '图片生成失败，请稍后重试', icon: 'none' })
+        console.error('sharePage error:', error)
+      } finally {
+        // 恢复按钮显示
+        this.shareButtonShow = true
+      }
+    },
+
+    // 使用html2canvas截取整个页面
+    async capturePageWithHtml2Canvas() {
+      console.log('开始使用html2canvas截取页面')
+
+      return new Promise((resolve, reject) => {
+        // 确保所有图片都已加载完成
+        const waitForImages = () => {
+          if (!this.backgroundImageLoaded || !this.qrCodeImage) {
+            setTimeout(waitForImages, 100)
+            return
+          }
+
+          // 额外等待确保渲染完成
+          setTimeout(() => {
+            const element = this.$el
+            if (!element) {
+              reject(new Error('找不到组件容器'))
+              return
+            }
+
+            console.log(
+              '开始html2canvas截取，容器尺寸:',
+              element.offsetWidth,
+              'x',
+              element.offsetHeight
+            )
+
+            html2canvas(element, {
+              useCORS: true,
+              allowTaint: true,
+              backgroundColor: null,
+              scale: 2,
+              dpi: 400,
+              logging: true,
+              width: element.offsetWidth,
+              height: element.offsetHeight,
+              windowWidth: element.offsetWidth,
+              windowHeight: element.offsetHeight,
+              scrollX: 0,
+              scrollY: 0,
+              x: 0,
+              y: 0,
+            })
+              .then(canvas => {
+                const dataUrl = canvas.toDataURL('image/jpeg', 1)
+                this.$emit('share-generated', dataUrl)
+                resolve()
+              })
+              .catch(err => {
+                console.error('html2canvas截取失败:', err)
+                reject(err)
+              })
+          }, 1000)
+        }
+
+        // 开始等待图片加载
+        waitForImages()
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.default-share-page {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* 背景图片样式 */
+.share-bg-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+.share-wrapper {
+  position: absolute;
+  z-index: 2;
+  top: 320rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.portal-frame {
+  padding: 32rpx;
+  width: 520rpx;
+  border-radius: 40rpx;
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 auto;
+  opacity: 0;
+  transform: translateY(20rpx);
+  transition: all 0.3s ease;
+}
+
+.portal-frame.is-loaded {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* 二维码样式区域 - 用户自定义样式位置 */
+.qr-code-outer {
+  width: 300rpx;
+  height: 300rpx;
+  background: rgba(255, 255, 255, 0.98);
+  border-radius: 20rpx;
+  box-shadow: 0px 8rpx 20rpx rgba(50, 50, 90, 0.06);
+  border: 1px solid #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12rpx;
+  box-sizing: border-box;
+}
+
+.qr-code,
+.qr-code-placeholder {
+  width: 100%;
+  height: 100%;
+}
+
+.qr-code {
+  border-radius: 16rpx;
+}
+
+.qr-code-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loader {
+  width: 100rpx;
+  height: 100rpx;
+  border: 8rpx solid rgba(0, 0, 0, 0.1);
+  border-left-color: #0072ff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 会员编号样式区域 - 用户自定义样式位置 */
+.member-code-text {
+  /* 用户可以在这里自定义会员编号的样式 */
+}
+
+/* 下载按钮样式 */
+.share-button {
+  margin-top: 28rpx;
+  width: 280rpx;
+  height: 72rpx;
+  line-height: 72rpx;
+  color: #fff;
+  border-radius: 36rpx;
+  font-size: 26rpx;
+  font-weight: 500;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  box-shadow: 0 5rpx 12rpx 0 rgba(102, 126, 234, 0.2);
+  border: none;
+  padding: 0;
+  text-align: center;
+  transition: all 0.3s ease;
+  letter-spacing: 1rpx;
+}
+
+button.share-button {
+  padding: 0;
+  line-height: 72rpx;
+  border: none;
+}
+
+.share-button:active {
+  transform: translateY(1rpx);
+  box-shadow: 0 4rpx 10rpx rgba(102, 126, 234, 0.4);
+  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+}
+</style>

components/share/SpecialSharePage.vue

@@ -0,0 +1,501 @@
+<template>
+  <view ref="specialSharePage" class="special-share-page">
+    <!-- 特殊场景背景图片 -->
+    <image
+      class="share-bg-image"
+      :src="specialBackgroundImage"
+      mode="scaleToFill"
+      crossorigin="anonymous"
+      @load="onBackgroundImageLoad"
+      @error="onBackgroundImageError"
+      v-if="specialBackgroundImage"
+    ></image>
+
+    <!-- 加载状态 -->
+    <view
+      class="loading-container"
+      v-if="!specialBackgroundImage || isLoadingBackground"
+    >
+      <view class="loader"></view>
+      <text class="loading-text">{{
+        isLoadingBackground ? '正在获取背景图片...' : '正在加载分享背景...'
+      }}</text>
+    </view>
+
+    <view
+      class="share-wrapper"
+      v-if="specialBackgroundImage && !isLoadingBackground"
+    >
+      <view class="portal-frame" :class="{ 'is-loaded': isLoaded }">
+        <view class="qr-code-outer special-qr-style">
+          <image
+            class="qr-code"
+            :src="qrCodeImage"
+            mode="aspectFit"
+            v-if="qrCodeImage"
+          ></image>
+          <view v-else class="qr-code-placeholder">
+            <view class="loader"></view>
+          </view>
+        </view>
+
+        <text
+          class="member-code-text special-member-code-style"
+          style="
+            font-size: 30rpx;
+            color: #005bac;
+            font-weight: bold;
+            margin-top: 20rpx;
+          "
+          >{{ desensitization(userInfo.memberCode) }}</text
+        >
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { snapdom } from '@zumer/snapdom'
+import html2canvas from 'html2canvas'
+import { getSharedImg } from '@/config/login'
+export default {
+  name: 'SpecialSharePage',
+  props: {
+    qrCodeImage: {
+      type: String,
+      default: '',
+    },
+    userInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+    isWechat: {
+      type: Boolean,
+      default: false,
+    },
+    isLoaded: {
+      type: Boolean,
+      default: false,
+    },
+    // 移除specialBackgroundImage prop，改为接口获取
+    // 调试用：跳过图片验证
+    skipImageVerification: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      backgroundImageLoaded: false,
+      imageLoadRetryCount: 0,
+      maxRetryCount: 3,
+      specialBackgroundImage: '', // 存储接口返回的背景图
+      isLoadingBackground: false, // 是否正在加载背景图
+    }
+  },
+  created() {
+    this.getBackgroundImage()
+  },
+  methods: {
+    desensitization(str) {
+      if (!str) return ''
+      if (str.length <= 8) return str.slice(0, 4) + '****'
+      const len = str.length - 6
+      const placeholder = '*'.repeat(len)
+      return str.slice(0, 4) + placeholder + str.slice(-2)
+    },
+
+    // 背景图片加载成功
+    onBackgroundImageLoad() {
+      this.backgroundImageLoaded = true
+      console.log('特殊场景背景图片加载成功')
+    },
+
+    // 背景图片加载失败
+    onBackgroundImageError(e) {
+      console.error('特殊场景背景图片加载失败:', e)
+      this.backgroundImageLoaded = false
+      this.imageLoadRetryCount++
+
+      // 如果重试次数未达到上限，可以通知父组件重试
+      if (this.imageLoadRetryCount < this.maxRetryCount) {
+        console.log(
+          `图片加载失败，重试中 (${this.imageLoadRetryCount}/${this.maxRetryCount})`
+        )
+        this.$emit('background-image-retry', this.imageLoadRetryCount)
+      } else {
+        this.$emit('background-image-error', e)
+      }
+    },
+
+    // 获取特殊场景背景图片
+    async getBackgroundImage() {
+      if (this.skipImageVerification) {
+        this.specialBackgroundImage = '' // 跳过验证时清空背景图
+        this.backgroundImageLoaded = true
+        return
+      }
+
+      if (this.specialBackgroundImage) {
+        // 如果背景图已加载，则直接使用
+        this.backgroundImageLoaded = true
+        return
+      }
+
+      this.isLoadingBackground = true
+      try {
+        const result = await getSharedImg()
+        if (result && result.code === 200 && result.data) {
+          this.specialBackgroundImage =
+            'data:image/png;base64,' + result.data.base64
+          this.backgroundImageLoaded = true
+        } else {
+          this.backgroundImageLoaded = false
+          this.imageLoadRetryCount++
+        }
+      } catch (error) {
+        this.backgroundImageLoaded = false
+        this.imageLoadRetryCount++
+        if (this.imageLoadRetryCount < this.maxRetryCount) {
+          this.$emit('background-image-retry', this.imageLoadRetryCount)
+        } else {
+          this.$emit('background-image-error', error)
+        }
+      } finally {
+        this.isLoadingBackground = false
+      }
+      return this.specialBackgroundImage
+    },
+
+    async generateShareImage() {
+      // await this.getBackgroundImage()
+      try {
+        this.$nextTick(() => {
+          const info = uni.getSystemInfoSync()
+          console.log(info.platform, '.....info')
+          if (info.platform === 'ios') {
+            console.log('iOS detected, using html2canvas for capturing.')
+            this.capturePageWithHtml2Canvas()
+          } else {
+            console.log('Non-iOS detected, using snapdom for capturing.')
+            this.capturePageWithSnapDom()
+          }
+        })
+      } catch (error) {
+        uni.hideLoading()
+        uni.showToast({ title: '图片生成失败，请稍后重试', icon: 'none' })
+      }
+    },
+
+    // 新增：使用html2canvas截取整个页面 (For iOS)
+    async capturePageWithHtml2Canvas() {
+      return new Promise(async (resolve, reject) => {
+        // 确保所有图片都已加载完成
+        const waitForImages = async () => {
+          // 检查是否正在加载背景图片
+          if (this.isLoadingBackground) {
+            console.log('等待背景图片接口调用完成...')
+            setTimeout(waitForImages, 100)
+            return
+          }
+
+          // 检查背景图片是否加载完成
+          if (!this.backgroundImageLoaded) {
+            console.log('等待背景图片加载完成...')
+            setTimeout(waitForImages, 100)
+            return
+          }
+
+          // 检查二维码是否存在
+          if (!this.qrCodeImage) {
+            console.log('等待二维码生成...')
+            setTimeout(waitForImages, 100)
+            return
+          }
+
+          // 检查特殊背景图片参数是否存在
+          if (!this.specialBackgroundImage) {
+            console.log('等待特殊背景图片参数...')
+            setTimeout(waitForImages, 100)
+            return
+          }
+
+          console.log('所有图片准备就绪，开始使用html2canvas截图...')
+
+          // 等待确保渲染完成
+          setTimeout(() => {
+            const element = this.$el
+            if (!element) {
+              uni.hideLoading()
+              reject(new Error('找不到组件容器'))
+              return
+            }
+
+            html2canvas(element, {
+              useCORS: true,
+              allowTaint: true,
+              backgroundColor: null,
+              scale: 2, // 提高清晰度
+              dpi: 300,
+              width: element.offsetWidth,
+              height: element.offsetHeight,
+            })
+              .then(canvas => {
+                const dataUrl = canvas.toDataURL('image/jpeg', 1.0)
+                uni.hideLoading()
+                // this.handleShareGenerated(dataUrl)
+                this.$emit('share-generated', dataUrl)
+                resolve()
+              })
+              .catch(err => {
+                uni.hideLoading()
+                console.error('html2canvas截取失败:', err)
+                uni.showToast({
+                  title: '图片生成失败，请稍后重试',
+                  icon: 'none',
+                })
+                reject(err)
+              })
+          }, 1000)
+        }
+
+        // 开始等待图片加载
+        waitForImages()
+      })
+    },
+
+    // 使用snapDOM截取整个页面
+    async capturePageWithSnapDom() {
+      return new Promise(async (resolve, reject) => {
+        // 确保所有图片都已加载完成
+        const waitForImages = async () => {
+          // 检查是否正在加载背景图片
+          if (this.isLoadingBackground) {
+            console.log('等待背景图片接口调用完成...')
+            setTimeout(waitForImages, 100)
+            return
+          }
+
+          // 检查背景图片是否加载完成
+          if (!this.backgroundImageLoaded) {
+            console.log('等待背景图片加载完成...')
+            setTimeout(waitForImages, 100)
+            return
+          }
+
+          // 检查二维码是否存在
+          if (!this.qrCodeImage) {
+            console.log('等待二维码生成...')
+            setTimeout(waitForImages, 100)
+            return
+          }
+
+          // 检查特殊背景图片参数是否存在
+          if (!this.specialBackgroundImage) {
+            console.log('等待特殊背景图片参数...')
+            setTimeout(waitForImages, 100)
+            return
+          }
+
+          console.log('所有图片准备就绪，开始截图...')
+
+          // 等待确保渲染完成
+          setTimeout(async () => {
+            const element = this.$el
+            if (!element) {
+              reject(new Error('找不到组件容器'))
+              return
+            }
+
+            try {
+              // 获取元素的所有可能尺寸
+              const rect = element.getBoundingClientRect()
+              const offsetWidth = element.offsetWidth
+              const offsetHeight = element.offsetHeight
+              const scrollWidth = element.scrollWidth
+              const scrollHeight = element.scrollHeight
+              const clientWidth = element.clientWidth
+              const clientHeight = element.clientHeight
+
+              // 计算实际需要的尺寸（取最大值确保完整）
+              const elementWidth = Math.max(
+                offsetWidth,
+                scrollWidth,
+                clientWidth,
+                rect.width
+              )
+              const elementHeight = Math.max(
+                offsetHeight,
+                scrollHeight,
+                clientHeight,
+                rect.height
+              )
+
+              setTimeout(async () => {
+                try {
+                  const result = await snapdom(element, {
+                    width: elementWidth,
+                    height: elementHeight,
+                    quality: 1,
+                    compress: false,
+
+                    // useProxy: true,
+                  })
+                  const canvas = await result.toCanvas()
+
+                  const dataUrl = canvas.toDataURL('image/jpeg')
+
+                  uni.hideLoading()
+                  // this.handleShareGenerated(dataUrl)
+                  this.$emit('share-generated', dataUrl)
+                  resolve()
+                } catch (err) {
+                  uni.hideLoading()
+                  console.error('snapDOM截取失败:', err)
+                  uni.showToast({
+                    title: '图片生成失败，请稍后重试',
+                    icon: 'none',
+                  })
+                  reject(err)
+                }
+              }, 500)
+            } catch (err) {
+              uni.hideLoading()
+              console.error('snapDOM初始化失败:', err)
+              uni.showToast({
+                title: '图片生成失败，请稍后重试',
+                icon: 'none',
+              })
+              reject(err)
+            }
+          }, 1000)
+        }
+
+        // 开始等待图片加载
+        waitForImages()
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.special-share-page {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* 背景图片样式 */
+.share-bg-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+/* 加载状态 */
+.loading-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  z-index: 2;
+}
+
+.loading-text {
+  margin-top: 20rpx;
+  font-size: 28rpx;
+  color: #666;
+}
+
+.share-wrapper {
+  position: absolute;
+  z-index: 2;
+  bottom: 22%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.portal-frame {
+  padding: 32rpx;
+  width: 520rpx;
+  border-radius: 40rpx;
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 auto;
+  opacity: 0;
+  transform: translateY(20rpx);
+  transition: all 0.3s ease;
+}
+
+.portal-frame.is-loaded {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* 特殊场景二维码样式区域 - 用户自定义样式位置 */
+.qr-code-outer {
+  width: 400rpx;
+  height: 400rpx;
+  border-radius: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12rpx;
+  box-sizing: border-box;
+}
+
+.qr-code,
+.qr-code-placeholder {
+  width: 100%;
+  height: 100%;
+}
+
+.qr-code {
+  border-radius: 16rpx;
+}
+
+.qr-code-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loader {
+  width: 100rpx;
+  height: 100rpx;
+  border: 8rpx solid rgba(0, 0, 0, 0.1);
+  border-left-color: #0072ff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 特殊场景会员编号样式区域 - 用户自定义样式位置 */
+.member-code-text {
+  /* 用户可以在这里自定义会员编号的样式 */
+}
+
+/* 特殊场景下的会员编号样式 */
+.special-member-code-style {
+  /* 用户可以在这里自定义特殊场景下的会员编号样式 */
+  /* 例如：不同的位置、颜色、字体等 */
+}
+</style>

config/goods.js

@@ -110,7 +110,7 @@ export const waresinfo = params =>
 
 //hi粉确认订单
 export const fansConfirm = params =>
-  http.post('/sale/api/order/fans-confirm-order', params)
+  http.post('/sale/api/retail-order/fans-confirm-order', params)
 //购物车注册下单校验弹框
 export const energyShop = params =>
   http.post('/sale/api/wares/query-energy-silo', params)

config/login.js

@@ -6,9 +6,12 @@ export const captchaImage = params => http.get('/code', { params })
 export const login = params =>
   http.post('/retail-member/api/retail-auth/login', params)
 
+export const autoLogin = params =>
+  http.post('/member/api/retail-auth/auto-login', params)
+
 //用户信息
 export const getInfo = params =>
-  http.get('/retail-member/api/retail-member/get-info', { params })
+  http.get('/member/api/retail-member/get-info', { params })
 
 //获取个人资料
 export const getData = params =>
@@ -99,12 +102,9 @@ export const indexPopScreen = params =>
 export const getMenuList = params =>
   http.get('/system/api/menu/list', { params })
 
-//海粉默认登录（H5扫码使用）
-export const autoLogin = params =>
-  http.post('/retail-member/auth/api/auto-login', params)
 //海粉商品
 export const queryWares = params =>
-  http.post('/sale/api/wares/query-spe-wares-copy', params)
+  http.get('/sale/api/wares/list-wares-share', { params })
 //保存礼品地址
 export const saveGiftAddress = params =>
   http.post('/retail-member/api/retail-member-gift/update-gift', params)
@@ -117,7 +117,7 @@ export const getUserAwards = params =>
 
 //获取安置人编号
 export const fansConvertCode = params =>
-  http.get('/retail-member/api/retail-member/fans-convert-code/' + params)
+  http.get('/member/api/member/fans-convert-code/' + params)
 
 //获取荣誉奖衔
 export const getIndexAwards = params =>

config/request.js

@@ -19,7 +19,7 @@ module.exports = vm => {
 
     //#ifdef DEV_SERVER
     console.log('DEV_SERVER')
-    config.baseURL = 'https://t-bl.beida777.com/prod-api'
+    config.baseURL = 'http://192.168.0.86:8080'
     //#endif
 
     //#ifdef QA_SERVER

pages/mine/share/index.vue

@@ -4,77 +4,28 @@
     style="display: flex; flex-direction: column; height: 100vh"
   >
     <view id="shareContainer" class="share-container">
-      <!-- 微信环境：只有在未生成分享图时才显示原始内容 -->
+      <!-- 默认场景 -->
-      <template v-if="!isWechat || (isWechat && !generatedImageUrl)">
+      <DefaultSharePage
-        <!-- 背景图片，替代CSS background -->
+        :qrCodeImage="qrCodeImage"
-        <img
+        :userInfo="userInfo"
-          class="share-bg-image"
+        :isWechat="isWechat"
-          src="/static/images/share-bg.jpg"
+        :isLoaded="isLoaded"
-          mode="scaleToFill"
+        @share-generated="handleShareGenerated"
-          crossorigin="anonymous"
+        ref="defaultSharePage"
-          @load="onBackgroundImageLoad"
+      />
-          @error="onBackgroundImageError"
-        />
-        <view class="share-wrapper">
-          <view class="portal-frame" :class="{ 'is-loaded': isLoaded }">
-            <view class="qr-code-outer">
-              <img
-                class="qr-code"
-                :src="qrCodeImage"
-                mode="aspectFit"
-                v-if="qrCodeImage"
-              />
-              <view v-else class="qr-code-placeholder">
-                <view class="loader"></view>
-              </view>
-            </view>
-
-            <div
-              style="
-                font-size: 18rpx;
-                color: #fff;
-                font-weight: bold;
-                margin-top: 10rpx;
-                text-align: center;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-              "
-            >
-              {{ desensitization(userInfo.memberCode) }}
-            </div>
-            <div v-if="!isWechat" class="share-button" @click="sharePage">
-              保存图片并分享
-            </div>
-            <img
-              v-if="isWechat"
-              class="share-btn"
-              style="margin-top: 30rpx"
-              src="/static/images/share-btn.svg"
-              mode="scaleToFill"
-            />
-          </view>
-          <!-- <image
-            class="share-bg-logo"
-            src="/static/images/share-logo.png"
-            mode="scaleToFill"
-          ></image> -->
-        </view>
-      </template>
 
+      <!-- 微信环境全屏图片显示 -->
       <view
         class="wechat-fullscreen-overlay"
-        v-show="isWechat && generatedImageUrl"
+        v-show="(isWechat || userInfo.sharePosterImage) && generatedImageUrl"
-        @click="closeFullscreenImage"
       >
-        <image
+        <img
           class="fullscreen-image"
           :src="generatedImageUrl"
-          mode="scaleToFill"
+          width="100%"
-          @load="onGeneratedImageLoad"
+          height="100%"
-          @error="onGeneratedImageError"
           @click.stop=""
-        ></image>
+        />
       </view>
     </view>
     <cl-tabbar class="tabbar" :current="2" />
@@ -82,54 +33,58 @@
 </template>
 
 <script>
-import html2canvas from 'html2canvas'
+import { fansCode as getShareCode } from '@/config/goods'
-import { getShareCode } from '@/config/share'
 import clTabbar from '@/components/cl-tabbar.vue'
+import DefaultSharePage from '@/components/share/DefaultSharePage.vue'
 
 export default {
   name: 'ShareQRCode',
   components: {
     'cl-tabbar': clTabbar,
+    DefaultSharePage,
   },
   data() {
     return {
       qrCodeImage: '',
-      // Set canvas dimensions. It's better to get device screen width for this.
       canvasWidth: 375,
       canvasHeight: 800,
       isLoaded: false,
-      shareButtonShow: true,
+      isWechat: false,
-      isWechat: false, // 是否微信环境
+      generatedImageUrl: '',
-      generatedImageUrl: '', // 生成的图片URL，用于微信长按保存
-      backgroundImageLoaded: false, // 背景图片是否加载完成
       userInfo: uni.getStorageSync('User'),
+      sourceVisible: true,
     }
   },
+  computed: {
+    isSpecialScene() {
+      return this.userInfo && this.userInfo.sharePosterImage
+    },
+    isDefaultScene() {
+      return !this.isSpecialScene
+    },
+  },
   onLoad() {
     this.checkWechatEnvironment()
     this.handleGetShareCode()
-    // Get screen width to set canvas width dynamically
+    // 获取屏幕尺寸
     uni.getSystemInfo({
       success: res => {
         this.canvasWidth = res.windowWidth
         this.canvasHeight = res.windowHeight
       },
     })
+    uni.showLoading({
+      title: '加载中...',
+      mask: true,
+    })
   },
   onReady() {
-    // Use a short timeout to ensure the initial render is complete before animation
+    // 短暂延迟后启用加载动画
     setTimeout(() => {
       this.isLoaded = true
     }, 100)
   },
   methods: {
-    desensitization(str) {
-      if (!str) return ''
-      if (str.length <= 8) return str.slice(0, 4) + '****'
-      const len = str.length - 6
-      const placeholder = '*'.repeat(len)
-      return str.slice(0, 4) + placeholder + str.slice(-2)
-    },
     // 检测微信环境
     checkWechatEnvironment() {
       const ua = navigator.userAgent.toLowerCase()
@@ -137,18 +92,14 @@ export default {
       console.log('微信环境检测:', this.isWechat)
     },
 
+    // 获取分享二维码
     handleGetShareCode() {
-      // Don't show loading toast, use the placeholder loader instead
-      // uni.showLoading({ title: '加载中...' })
       getShareCode()
         .then(res => {
-          // The screenshot shows the base64 string is in data.datStr
           if (res.code === 200 && res.data && res.data.dataStr) {
             this.qrCodeImage = 'data:image/png;base64,' + res.data.dataStr
             this.$nextTick(() => {
-              if (this.isWechat) {
+              this.generateShareImage()
-                this.sharePage()
-              }
             })
           } else {
             uni.showToast({
@@ -166,162 +117,38 @@ export default {
         })
     },
 
-    async sharePage() {
+    // 生成分享图片
-      if (!this.qrCodeImage) {
+    async generateShareImage() {
-        uni.showToast({
-          title: '二维码尚未生成',
-          icon: 'none',
-        })
-        return
-      }
-
-      // 统一使用html2canvas生成图片
-      uni.showLoading({ title: '加载中...' })
-
       try {
-        // 隐藏按钮，等待DOM更新
+        if (this.isSpecialScene) {
-        this.shareButtonShow = false
+          await this.$refs.specialSharePage.generateShareImage()
-        await this.$nextTick()
+        } else {
-
+          // 默认场景生成图片
-        // 使用html2canvas截取页面
+          await this.$refs.defaultSharePage.sharePage()
-        await this.capturePageWithHtml2Canvas()
+        }
       } catch (error) {
-        uni.hideLoading()
+        console.error('生成分享图片失败:', error)
-        uni.showToast({ title: '图片生成失败，请稍后重试', icon: 'none' })
-        console.error('sharePage error:', error)
-      } finally {
-        // 恢复按钮显示
-        this.shareButtonShow = true
       }
     },
 
-    // 生成的图片加载成功
+    // 处理分享图片生成完成
-    onGeneratedImageLoad() {
+    handleShareGenerated(dataUrl) {
-      console.log('生成的图片加载成功')
+      uni.hideLoading()
-    },
+      this.$nextTick(() => {
-
+        this.sourceVisible = false
-    // 生成的图片加载失败
-    onGeneratedImageError(e) {
-      console.error('生成的图片加载失败:', e)
-      uni.showToast({
-        title: '图片显示失败',
-        icon: 'none',
       })
-    },
+      uni.hideLoading()
 
-    // 关闭全屏图片
+      if (this.isWechat) {
-    closeFullscreenImage() {
+        // 微信环境：设置图片供长按保存
-      this.generatedImageUrl = ''
+        this.generatedImageUrl = dataUrl
-      console.log('关闭全屏图片')
+      } else {
-    },
+        // 普通浏览器环境
-
+        if (this.isSpecialScene) {
-    // 背景图片加载成功
+          // 特殊场景：设置图片供长按保存（没有下载按钮）
-    onBackgroundImageLoad() {
+          this.generatedImageUrl = dataUrl
-      this.backgroundImageLoaded = true
-      console.log('背景图片加载成功')
-    },
-
-    // 背景图片加载失败
-    onBackgroundImageError(e) {
-      console.error('背景图片加载失败:', e)
-    },
-
-    // 使用html2canvas截取整个页面
-    async capturePageWithHtml2Canvas() {
-      console.log('开始使用html2canvas截取页面')
-
-      return new Promise((resolve, reject) => {
-        // 确保所有图片都已加载完成
-        const waitForImages = () => {
-          if (!this.backgroundImageLoaded || !this.qrCodeImage) {
-            setTimeout(waitForImages, 100)
-            return
-          }
-
-          // 额外等待确保渲染完成
-          setTimeout(() => {
-            const element = document.getElementById('shareContainer')
-            if (!element) {
-              reject(new Error('找不到页面容器'))
-              return
-            }
-
-            console.log(
-              '开始html2canvas截取，容器尺寸:',
-              element.offsetWidth,
-              'x',
-              element.offsetHeight
-            )
-
-            html2canvas(element, {
-              useCORS: true,
-              allowTaint: true,
-              backgroundColor: null,
-              scale: 2,
-              dpi: 400,
-              logging: true, // 开启日志便于调试
-              width: element.offsetWidth,
-              height: element.offsetHeight,
-              windowWidth: element.offsetWidth,
-              windowHeight: element.offsetHeight,
-              scrollX: 0,
-              scrollY: 0,
-              x: 0,
-              y: 0,
-            })
-              .then(canvas => {
-                const dataUrl = canvas.toDataURL('image/jpeg', 1)
-
-                // 根据环境处理结果
-                if (this.isWechat) {
-                  // 微信环境：设置图片供长按保存
-                  this.generatedImageUrl = dataUrl
-                  uni.hideLoading()
-                } else {
-                  // 普通浏览器：直接下载图片
-                  this.downloadImage(dataUrl)
-                  uni.hideLoading()
-                  uni.showToast({
-                    title: '图片已开始下载',
-                    icon: 'success',
-                  })
-                }
-
-                resolve()
-              })
-              .catch(err => {
-                console.error('html2canvas截取失败:', err)
-                reject(err)
-              })
-          }, 1000) // 增加等待时间到1000ms
         }
-
+      }
-        // 开始等待图片加载
-        waitForImages()
-      })
-    },
-
-    // 原生图片加载器
-    loadImage(src) {
-      return new Promise((resolve, reject) => {
-        const img = new Image()
-        img.crossOrigin = 'anonymous'
-
-        img.onload = () => {
-          console.log(
-            `图片加载成功: ${src.substring(0, 50)}...`,
-            `${img.width}x${img.height}`
-          )
-          resolve(img)
-        }
-
-        img.onerror = error => {
-          console.error(`图片加载失败: ${src}`, error)
-          reject(new Error(`图片加载失败: ${src}`))
-        }
-
-        img.src = src
-      })
     },
 
     // 下载图片
@@ -349,172 +176,33 @@ export default {
   align-items: center;
 }
 
-/* 背景图片样式 */
-.share-bg-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-}
-
-.share-bg {
-  width: 100%;
-  height: 100%;
-  img {
-    width: 100%;
-    height: 100%;
-  }
-}
-.share-wrapper {
-  position: absolute;
-  z-index: 2;
-  top: 370rpx;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.share-bg-logo {
-  width: 100%;
-  height: 360rpx;
-  // margin-top: -60rpx;
-}
-
-.portal-frame {
-  padding: 32rpx;
-  width: 520rpx;
-  border-radius: 40rpx;
-
-  display: flex;
-  box-sizing: border-box;
-  flex-direction: column;
-  align-items: center;
-  margin: 0 auto;
-  text-align: center;
-}
-
-.portal-frame.is-loaded {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-/* The single white card for the QR code */
-.qr-code-outer {
-  width: 300rpx; /* 从400rpx缩小到320rpx */
-  height: 300rpx; /* 从400rpx缩小到320rpx */
-  background: rgba(255, 255, 255, 0.98);
-  border-radius: 20rpx; /* 从24rpx减小到20rpx */
-  box-shadow: 0px 8rpx 20rpx rgba(50, 50, 90, 0.06);
-  border: 1px solid #f0f0f0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 12rpx; /* 从16rpx减小到12rpx */
-  box-sizing: border-box;
-}
-
-/* The image and the placeholder both live inside the outer card */
-.qr-code,
-.qr-code-placeholder {
-  width: 100%;
-  height: 100%;
-}
-
-.qr-code {
-  border-radius: 16rpx;
-}
-
-.qr-code-placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.loader {
-  width: 100rpx;
-  height: 100rpx;
-  border: 8rpx solid rgba(0, 0, 0, 0.1);
-  border-left-color: #0072ff;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.tip {
-  font-size: 30rpx;
-  color: #888;
-}
-
-.share-button {
-  margin-top: 58rpx; /* 从32rpx减小到28rpx */
-  width: 380rpx; /* 设置固定宽度 */
-  color: #fff;
-  border-radius: 36rpx; /* 从44rpx减小到36rpx */
-  font-size: 16rpx; /* 从30rpx减小到26rpx */
-  font-weight: 500;
-  padding: 12rpx 0;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  background: linear-gradient(
-    135deg,
-    #d4af37 0%,
-    #ffd700 30%,
-    #b8860b 70%,
-    #8b7355 100%
-  );
-  // box-shadow: 0 5rpx 12rpx 0 rgba(102, 126, 234, 0.2);
-  border: none;
-  border-radius: 70rpx;
-  text-align: center;
-  letter-spacing: 1rpx;
-}
-
 /* 微信环境全屏覆盖样式 */
 .wechat-fullscreen-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100vw;
-  height: 100%; /* 减去tab栏高度 */
+  height: 100%;
-
+  background-color: transparent;
-  background-color: transparent; /* 移除背景色 */
   z-index: 999;
   display: flex;
   flex-direction: column;
-  align-items: stretch; /* 拉伸对齐 */
+  align-items: stretch;
-  justify-content: stretch; /* 拉伸对齐 */
+  justify-content: stretch;
   padding: 0;
   margin: 0;
 }
 
 .fullscreen-image {
   width: 100vw;
-  height: 100%; /* 减去tab栏高度 */
+  height: 100%;
-  object-fit: cover; /* 覆盖整个容器，可能会裁剪 */
+  object-fit: cover;
   margin: 0;
   padding: 0;
   border: none;
   display: block;
 }
-@media screen and (max-height: 667px) {
-  .tabbar {
-    height: 70px !important;
-  }
-}
 
-@media screen and (min-height: 812px) {
-  /* iPhone X及以上机型 */
-  .tabbar {
-    height: 80px !important;
-  }
-}
 .tabbar {
   position: static;
   bottom: 0;
@@ -524,8 +212,17 @@ export default {
   :v-deep .u-tabbar--fixed {
     height: 100px !important;
   }
-  // ::v-deep .u-safe-area-inset-bottom {
+}
-  //   display: none !important;
+
-  // }
+@media screen and (max-height: 667px) {
+  .tabbar {
+    height: 70px !important;
+  }
+}
+
+@media screen and (min-height: 812px) {
+  .tabbar {
+    height: 80px !important;
+  }
 }
 </style>

pages/pay/hiPay.vue

@@ -11,164 +11,247 @@
       <template>
         <view class="tit">{{ '待支付金额' }}</view>
         <view class="tit1">
-          ￥{{ paramsPost.orderAmount | numberToCurrency }}
+          {{ paramsPost.orderAmount | numberToCurrency }}
         </view>
-        <view class="tit2"
+        <!-- <view class="tit2"
           >{{ '请在' }} <view class="tit3">{{ countDown }}</view
           >{{ '内完成支付，否则订单将会被自动取消' }}
-        </view>
+        </view> -->
       </template>
       <!-- 暂时隐藏 -->
-      <view v-if="false" class="kuang">
+      <view class="kuang">
-        <u-collapse
+        <view>
-          :value="activeNames"
+          <view slot="title" class="pf">
-          ref="collapse"
+            <img src="@/static/images/under_pay.png" alt="" />
-          @open="change"
+            <view>{{ '在线支付' }}</view>
-          @close="close"
+          </view>
-          accordion
+          <view
-          :border="false"
+            class="flex_ac"
-        >
+            v-show="payList[PAY_AUTH[PAY_TYPE.BAO_FU_WECHAT]]"
-          <u-collapse-item name="1">
+          >
-            <view slot="title" class="pf">
+            <view class="flex_ac_i">
-              <img src="@/static/images/under_pay.png" alt="" />
+              <img src="@/static/images/pay_i2.png" alt="" />
-              <view>{{ '在线支付' }}</view>
+              <view>{{ '宝付微信支付' }}</view>
             </view>
-            <view class="flex_ac" v-show="this.payList.pay11">
+            <u-radio-group v-model="whatPay">
-              <view class="flex_ac_i">
+              <u-radio
-                <img src="@/static/images/pay_i2.png" alt="" />
+                activeColor="#005BAC"
-                <view>{{ '宝付微信支付' }}</view>
+                size="18"
-              </view>
+                label=""
-              <u-radio-group v-model="whatPay">
+                :name="PAY_TYPE.BAO_FU_WECHAT"
-                <u-radio activeColor="red" size="14" label="" :name="11">
+              >
-                </u-radio>
+              </u-radio>
-              </u-radio-group>
+            </u-radio-group>
+          </view>
+          <view
+            class="flex_ac"
+            v-show="payList[PAY_AUTH[PAY_TYPE.BAO_FU_WECHAT_SCAN]]"
+          >
+            <view class="flex_ac_i">
+              <img src="@/static/images/pay_i2.png" alt="" />
+              <view>{{ '宝付微信扫码' }}</view>
             </view>
-            <view class="flex_ac" v-show="this.payList.pay12">
+            <u-radio-group v-model="whatPay">
-              <view class="flex_ac_i">
+              <u-radio
-                <img src="@/static/images/pay_i2.png" alt="" />
+                activeColor="#005BAC"
-                <view>{{ '宝付微信扫码' }}</view>
+                size="18"
-              </view>
+                label=""
-              <u-radio-group v-model="whatPay">
+                :name="PAY_TYPE.BAO_FU_WECHAT_SCAN"
-                <u-radio activeColor="red" size="14" label="" :name="12">
+              >
-                </u-radio>
+              </u-radio>
-              </u-radio-group>
+            </u-radio-group>
+          </view>
+          <view
+            class="flex_ac"
+            v-show="payList[PAY_AUTH[PAY_TYPE.HUI_FU_WECHAT]]"
+          >
+            <view class="flex_ac_i">
+              <img src="@/static/images/pay_i2.png" alt="" />
+              <view>{{ '汇付微信支付' }}</view>
             </view>
+            <u-radio-group v-model="whatPay">
+              <u-radio
+                activeColor="#005BAC"
+                size="18"
+                label=""
+                :name="PAY_TYPE.HUI_FU_WECHAT"
+              >
+              </u-radio>
+            </u-radio-group>
+          </view>
+          <!-- 微信支付 -->
+          <view class="flex_ac" v-show="payList[PAY_AUTH[PAY_TYPE.WECHAT_PAY]]">
+            <view class="flex_ac_i">
+              <img src="@/static/images/pay_i2.png" alt="" />
+              <view>{{ '微信支付' }}</view>
+            </view>
+            <u-radio-group v-model="whatPay">
+              <u-radio
+                activeColor="#005BAC"
+                size="18"
+                label=""
+                :name="PAY_TYPE.WECHAT_PAY"
+              >
+              </u-radio>
+            </u-radio-group>
+          </view>
+          <!-- 支付宝支付 -->
+          <view class="flex_ac" v-show="payList[PAY_AUTH[PAY_TYPE.ALI_PAY]]">
+            <view class="flex_ac_i">
+              <img src="@/static/images/pay_i3.png" alt="" />
+              <view>{{ '支付宝支付' }}</view>
+            </view>
+            <u-radio-group v-model="whatPay">
+              <u-radio
+                activeColor="#005BAC"
+                size="18"
+                label=""
+                :name="PAY_TYPE.ALI_PAY"
+              >
+              </u-radio>
+            </u-radio-group>
+          </view>
+          <view
+            class="flex_ac1"
+            v-show="payList[PAY_AUTH[PAY_TYPE.HUI_FU_BANK_CARD]]"
+          >
+            <view class="flex_ac_i">
+              <img src="@/static/images/jdBank.jpg" alt="" />
+              <view>{{ '汇付银行卡' }} </view>
+            </view>
+            <view class="pad">
+              <view
+                v-for="(item, index) in hfList"
+                :key="index"
+                class="pay_flax flex_bet"
+                @click.prevent="selPayRadio('hf' + index)"
+              >
+                <view class="flax_i">
+                  <view>{{ item.bankName }} ({{ item.bankNo }})</view>
+                  <view class="fixBind" @click="fixBind(item)">解绑</view>
+                </view>
 
-            <view class="flex_ac" v-show="this.payList.pay13">
+                <u-radio-group v-model="whatPay">
-              <view class="flex_ac_i">
+                  <u-radio
-                <img src="@/static/images/pay_i2.png" alt="" />
+                    activeColor="#005BAC"
-                <view>{{ '汇付微信支付' }}</view>
+                    size="18"
+                    label=""
+                    :name="PAY_TYPE.HUI_FU_BANK_CARD + index"
+                  >
+                  </u-radio>
+                </u-radio-group>
               </view>
-              <u-radio-group v-model="whatPay">
+              <view class="pay_flax flax_i" @click="bindBank('hf')">
-                <u-radio activeColor="red" size="14" label="" :name="13">
+                <img class="img1" src="@/static/images/addto.png" alt="" />
-                </u-radio>
+                <view>{{ '绑定银行卡' }}</view>
-              </u-radio-group>
-            </view>
-            <view class="flex_ac1" v-show="this.payList.pay15">
-              <view class="flex_ac_i">
-                <img src="@/static/images/jdBank.jpg" alt="" />
-                <view>{{ '汇付银行卡' }} ({{ '暂不支持信用卡' }})</view>
-              </view>
-              <view class="pad">
-                <view
-                  v-for="(item, index) in hfList"
-                  :key="index"
-                  class="pay_flax flex_bet"
-                  @click.prevent="selPayRadio('hf' + index)"
-                >
-                  <view class="flax_i">
-                    {{ item.bankName }} ({{ item.bankNo }})
-                  </view>
-                  <u-radio-group v-model="whatPay">
-                    <u-radio
-                      activeColor="red"
-                      size="14"
-                      label=""
-                      :name="'hf' + index"
-                    >
-                    </u-radio>
-                  </u-radio-group>
-                </view>
-                <view class="pay_flax flax_i" @click="bindBank('hf')">
-                  <img class="img1" src="@/static/images/addto.png" alt="" />
-                  <view>{{ '绑定银行卡' }}</view>
-                </view>
               </view>
             </view>
-            <view class="flex_ac" v-show="this.payList.pay32">
+          </view>
-              <view class="flex_ac_i">
+          <view
-                <img src="@/static/images/pay_i2.png" alt="" />
+            class="flex_ac"
-                <view>通联微信支付</view>
+            v-show="payList[PAY_AUTH[PAY_TYPE.TONG_LIAN_WECHAT]]"
-              </view>
+          >
-              <u-radio-group v-model="whatPay">
+            <view class="flex_ac_i">
-                <u-radio activeColor="red" size="14" label="" :name="32">
+              <img src="@/static/images/pay_i2.png" alt="" />
-                </u-radio>
+              <view>通联微信支付</view>
-              </u-radio-group>
             </view>
-            <view class="flex_ac1" v-show="this.payList.pay33">
+            <u-radio-group v-model="whatPay">
-              <view class="flex_ac_i">
+              <u-radio
-                <img src="@/static/images/jdBank.jpg" alt="" />
+                activeColor="#005BAC"
-                <view>{{ '通联银行卡' }} ({{ '暂不支持信用卡' }})</view>
+                size="18"
+                label=""
+                :name="PAY_TYPE.TONG_LIAN_WECHAT"
+              >
+              </u-radio>
+            </u-radio-group>
+          </view>
+          <view
+            class="flex_ac1"
+            v-show="payList[PAY_AUTH[PAY_TYPE.JING_DONG_BANK_CARD]]"
+          >
+            <view class="flex_ac_i">
+              <img src="@/static/images/jdBank.jpg" alt="" />
+              <view>{{ '京东银行卡' }}</view>
+            </view>
+            <view class="pad">
+              <view
+                v-for="(item, index) in jdList"
+                :key="index"
+                class="pay_flax flex_bet"
+                @click.prevent="selPayRadio('jd' + index)"
+              >
+                <view class="flax_i">
+                  {{ item.bankName }} ({{ item.bankNo }})
+                </view>
+                <u-radio-group v-model="whatPay">
+                  <u-radio
+                    activeColor="#005BAC"
+                    size="18"
+                    label=""
+                    :name="PAY_TYPE.JING_DONG_BANK_CARD + index"
+                  >
+                  </u-radio>
+                </u-radio-group>
               </view>
-              <view class="pad">
+              <view class="pay_flax flax_i" @click="bindBank('jd')">
-                <view
+                <img class="img1" src="@/static/images/addto.png" alt="" />
-                  v-for="(item, index) in tlList"
+                <view>{{ '绑定银行卡' }}</view>
-                  :key="index"
-                  class="pay_flax flex_bet"
-                  @click.prevent="selPayRadio('tl' + index)"
-                >
-                  <view class="flax_i">
-                    {{ item.bankName }} ({{ item.bankNo }})
-                  </view>
-                  <u-radio-group v-model="whatPay">
-                    <u-radio
-                      activeColor="red"
-                      size="14"
-                      label=""
-                      :name="'tl' + index"
-                    >
-                    </u-radio>
-                  </u-radio-group>
-                </view>
-                <view class="pay_flax flax_i" @click="bindBank('tl')">
-                  <img class="img1" src="@/static/images/addto.png" alt="" />
-                  <view>{{ '绑定银行卡' }}</view>
-                </view>
               </view>
             </view>
-            <view class="flex_ac1" v-show="this.payList.pay4">
+          </view>
-              <view class="flex_ac_i">
+          <view
-                <img src="@/static/images/jdBank.jpg" alt="" />
+            class="flex_ac"
-                <view>{{ '京东银行卡' }} ({{ '暂不支持信用卡' }})</view>
+            v-show="payList[PAY_AUTH[PAY_TYPE.JING_DONG_H5]]"
+          >
+            <view class="flex_ac_i">
+              <img src="@/static/images/jdBank.jpg" alt="" />
+              <view>京东收银台</view>
+            </view>
+            <u-radio-group v-model="whatPay">
+              <u-radio
+                activeColor="#005BAC"
+                size="18"
+                label=""
+                :name="PAY_TYPE.JING_DONG_H5"
+              >
+              </u-radio>
+            </u-radio-group>
+          </view>
+          <view
+            class="flex_ac1"
+            v-show="payList[PAY_AUTH[PAY_TYPE.TONG_LIAN_BANK_CARD]]"
+          >
+            <view class="flex_ac_i">
+              <img src="@/static/images/jdBank.jpg" alt="" />
+              <view>{{ '通联银行卡' }}</view>
+            </view>
+            <view class="pad">
+              <view
+                v-for="(item, index) in tlList"
+                :key="index"
+                class="pay_flax flex_bet"
+                @click.prevent="selPayRadio('tl' + index)"
+              >
+                <view class="flax_i">
+                  {{ item.bankName }} ({{ item.bankNo }})
+                </view>
+                <u-radio-group v-model="whatPay">
+                  <u-radio
+                    activeColor="#005BAC"
+                    size="18"
+                    label=""
+                    :name="PAY_TYPE.TONG_LIAN_BANK_CARD + index"
+                  >
+                  </u-radio>
+                </u-radio-group>
               </view>
-              <view class="pad">
+              <view class="pay_flax flax_i" @click="bindBank('tl')">
-                <view
+                <img class="img1" src="@/static/images/addto.png" alt="" />
-                  v-for="(item, index) in jdList"
+                <view>{{ '绑定银行卡' }}</view>
-                  :key="index"
-                  class="pay_flax flex_bet"
-                  @click.prevent="selPayRadio('jd' + index)"
-                >
-                  <view class="flax_i">
-                    {{ item.bankName }} ({{ item.bankNo }})
-                  </view>
-                  <u-radio-group v-model="whatPay">
-                    <u-radio
-                      activeColor="red"
-                      size="14"
-                      label=""
-                      :name="'jd' + index"
-                    >
-                    </u-radio>
-                  </u-radio-group>
-                </view>
-                <view class="pay_flax flax_i" @click="bindBank('jd')">
-                  <img class="img1" src="@/static/images/addto.png" alt="" />
-                  <view>{{ '绑定银行卡' }}</view>
-                </view>
               </view>
             </view>
-          </u-collapse-item>
+          </view>
-        </u-collapse>
+        </view>
       </view>
     </view>
     <!-- 底部 -->
@@ -225,7 +308,10 @@
         <div ref="qrCodeUrlWx" class="qrcode"></div>
       </view>
     </u-popup>
-    <hiSuccess @successClose="successClose" ref="hiSuccess"></hiSuccess>
+    <successDialog
+      @successClose="successClose"
+      ref="successDialog"
+    ></successDialog>
   </view>
 </template>
 
@@ -234,15 +320,24 @@ import * as api from '@/config/pay.js'
 import QRCode from 'qrcodejs2'
 import { removeToken } from '@/config/auth.js'
 
-import hiSuccess from '@/components/hiSuccess.vue'
+import successDialog from '@/components/successDialog.vue'
 import * as act from '@/config/activity.js'
+import {
+  PAY_REDIRECT_URL,
+  PAY_TYPE,
+  PAY_CHANEL,
+  PAY_AUTH,
+} from '@/util/constant.js'
 var payStatus
+let getRegisterInfoTimeoutFlag = null
 export default {
   components: {
-    hiSuccess,
+    successDialog,
   },
   data() {
     return {
+      PAY_TYPE,
+      PAY_AUTH,
       payList: {},
       isLoading: false,
       clockTime: '',
@@ -257,12 +352,12 @@ export default {
       },
       paramsPost: '',
       isShare: false, //分享用户第一次爆单
-      userInfo: '',
+      userInfo: uni.getStorageSync('User'),
       activeNames: 1,
       whatPay: '',
       hfList: [],
       jdList: [],
-      businessType: '',
+      businessType: 1,
       isBank: '',
       isPw: false,
       codeValue: '',
@@ -271,9 +366,7 @@ export default {
       sucPay: 0,
       content: '支付成功',
       wxPopup: false,
-      luckydrawData: {},
       isRecharge: false,
-      czJe: '',
       tlList: [],
     }
   },
@@ -286,74 +379,22 @@ export default {
     )
 
     this.pkCountry = uni.getStorageSync('pkCountry')
-    // if (this.paramsPost.isRecharge) {
+
-    // 	this.isRecharge = this.paramsPost.isRecharge
-    // 	this.businessType = 3
-    // 	uni.setNavigationBarTitle({
-    // 		title: '充值'
-    // 	});
-    // } else {
-    // 	uni.setNavigationBarTitle({
-    // 		title: '订单支付'
-    // 	});
-    // 	this.isRecharge = false
-    // 	if (JSON.parse(options.paramsPost).orderType == 4) {
     this.orderCode = this.paramsPost.orderCode
-    // 		this.luckydrawData = this.paramsPost.luckydrawData
-    // 		// 抽奖支付处理（查询订单支付信息以及显示等）
-    // 		this.businessType = 4 //抽奖
-    // 		this.specialArea = this.paramsPost.specialArea
-    // 		this.getLuckdrawDetail()
-    // 	} else {
-    // 		this.userInfo = uni.getStorageSync('User')
-    // 		if (
-    // 			this.userInfo.registerFans == 0
-    // 		) {
-    // 			this.isShare = true
-    // 		}
-
-    // 		this.specialArea =
-    // 			this.paramsPost.specialArea || this.paramsPost.orderType
-    // 		this.orderCode = this.paramsPost.orderCode
-    // 		this.businessType = options.businessType
-    // 		// this.getInfo()
-
-    // 		// 获取订单信息
-    // 		this.getOrderInfo()
-    // 		if (!this.isShare) {
-    // 			// 获取消费信息
-    // 			this.getSpendInfo()
-    // 		}
-    // 	}
-    // }
 
     // 获取支付配置
     this.getPayConfig()
-    this.downTime()
-    // clearInterval(this.clockTime)
   },
 
   onShow() {
     // 获取银行卡
     // this.getBankList()
   },
+  onUnload() {
+    clearTimeout(getRegisterInfoTimeoutFlag)
+    clearInterval(payStatus)
+  },
   methods: {
-    //查询充值抽奖次数
-    getLuckdrawDetail() {
-      // 抽奖支付处理（查询订单支付信息以及显示等）
-      act
-        .getLuckdrawDetail({
-          pkBaseId: this.luckydrawData.pkBaseId,
-          payNum: this.luckydrawData.payNum,
-        })
-        .then(res => {
-          if (res.code == 200) {
-            this.orderData.orderAmount = res.data.toBePaidMoney
-            this.payDetail = res.data
-            // this.downTime()
-          }
-        })
-    },
     closewxPopup() {
       this.wxPopup = false
       this.$refs.qrCodeUrlWx.innerHTML = ''
@@ -384,10 +425,18 @@ export default {
     },
     fansOrder() {
       api.fansOrder(this.orderCode).then(res => {
-        this.isLoading = false
+        if (res.data) {
-        this.isPw = false
+          this.isLoading = false
-        removeToken()
+          this.isPw = false
-        this.$refs.hiSuccess.showSuccess(res.data)
+          uni.hideLoading()
+          removeToken()
+
+          this.$refs.successDialog.showSuccess(res.data)
+        } else {
+          getRegisterInfoTimeoutFlag = setTimeout(() => {
+            this.fansOrder()
+          }, 3000)
+        }
       })
     },
     payPw() {
@@ -411,7 +460,7 @@ export default {
       url(obj).then(res => {
         if (res.code == 200) {
           // this.isPw = false
-          //   this.$refs.hiSuccess.showSuccess(res.data)
+          //   this.$refs.successDialog.showSuccess(res.data)
           uni.showToast({
             title: res.msg,
             icon: 'none',
@@ -431,66 +480,50 @@ export default {
         }
       })
     },
-    quickPay(cz) {
+    async quickPay() {
-      // 非银行卡
+      if (
-      if (typeof this.whatPay == 'number') {
+        ![
-        if (this.whatPay == 12) {
+          PAY_TYPE.HUI_FU_BANK_CARD,
-          this.scanPayBfWx(5)
+          PAY_TYPE.JING_DONG_BANK_CARD,
-        } else if (this.whatPay == 13) {
+          PAY_TYPE.TONG_LIAN_BANK_CARD,
-          this.scanPayBfWx(6)
+        ].includes(this.whatPay.slice(0, 2))
-        } else if (this.whatPay == 11) {
+      ) {
-          this.scanPayBfWxJump(5)
+        if ([PAY_TYPE.JING_DONG_H5].includes(this.whatPay)) {
-        } else if (this.whatPay == 32) {
+          this.redirectPay(PAY_CHANEL[this.whatPay])
-          this.scanPayTlWxJump(3)
+        } else if (
+          [PAY_TYPE.BAO_FU_WECHAT_SCAN, PAY_TYPE.HUI_FU_WECHAT].includes(
+            this.whatPay
+          )
+        ) {
+          this.scanPayBfWx(PAY_CHANEL[this.whatPay])
+        } else if (this.whatPay == PAY_TYPE.WECHAT_PAY) {
+          this.scanPayWx(PAY_CHANEL[this.whatPay])
+        } else if (this.whatPay == PAY_TYPE.ALI_PAY) {
+          this.scanPayAl(PAY_CHANEL[this.whatPay])
         }
       } else {
-        if (this.whatPay.slice(0, 2) == 'hf') {
+        const indexed = this.whatPay.slice(2, 4)
-          let indexed = this.whatPay.slice(2, 4)
+        const payTypeEnum = this.whatPay.slice(0, 2)
-          let params = {
+        const bankListMap = {
-            businessType: 1, //订单类型
+          [PAY_TYPE.HUI_FU_BANK_CARD]: this.hfList[indexed].bindCode,
-            businessCode: this.orderCode,
+          [PAY_TYPE.JING_DONG_BANK_CARD]: this.jdList[indexed].bindCode,
-            payChannel: 6, //汇付
+          [PAY_TYPE.TONG_LIAN_BANK_CARD]: this.tlList[indexed].bindCode,
-            payType: 3, //银行卡
-            bindCode: this.hfList[indexed].bindCode,
-          }
-          api.unifiedorder(params).then(response => {
-            this.isBank = 'hf'
-            this.bindCode = this.hfList[indexed].bindCode
-            this.isPw = true
-          })
-          this.checkPayStatus(params)
-        } else if (this.whatPay.slice(0, 2) == 'jd') {
-          let indexed = this.whatPay.slice(2, 4)
-
-          let params = {
-            businessType: 1, //订单类型
-            businessCode: this.orderCode,
-            payChannel: 4, //京东
-            payType: 3, //银行卡
-            bindCode: this.jdList[indexed].bindCode,
-          }
-          api.unifiedorder(params).then(response => {
-            this.isBank = 'jd'
-            this.bindCode = this.jdList[indexed].bindCode
-            this.isPw = true
-          })
-          this.checkPayStatus(params)
-        } else if (this.whatPay.slice(0, 2) == 'tl') {
-          let indexed = this.whatPay.slice(2, 4)
-          let params = {
-            businessType: 1, //订单类型
-            businessCode: this.orderCode,
-            payChannel: 3, //通联
-            payType: 3, //银行卡
-            bindCode: this.tlList[indexed].bindCode,
-          }
-          api.unifiedorder(params).then(response => {
-            this.isBank = 'tl'
-            this.bindCode = this.tlList[indexed].bindCode
-            this.isPw = true
-          })
-          this.checkPayStatus(params)
         }
+        this.bindCode = bankListMap[payTypeEnum]
+        const params = {
+          businessType: this.businessType, //订单类型
+          payChannel: PAY_CHANEL[payTypeEnum],
+          payType: 3, //银行卡
+          bindCode: bankListMap[payTypeEnum],
+        }
+        Object.assign(params, {
+          businessCode: this.orderCode,
+        })
+        api.unifiedorder(params).then(response => {
+          this.isBank = this.whatPay.slice(0, 2)
+          this.isPw = true
+          this.checkPayStatus(params)
+        })
       }
     },
     // 宝付微信支付
@@ -527,6 +560,47 @@ export default {
       })
       this.checkPayStatus(params)
     },
+    redirectPay(payChannel) {
+      this.getPayAuthToken(payChannel).then(url => {
+        if (navigator.userAgent.includes('MicroMessenger')) {
+          window.location.href = url
+        } else {
+          window.open(url)
+        }
+      })
+    },
+    getPayAuthToken(payChannel) {
+      return new Promise((resolve, reject) => {
+        const extParam = {
+          isRecharge: false,
+          orderCode: this.orderCode,
+          specialArea: 1,
+          isSharePay: true,
+        }
+        // 将extParam对象转换为JSON字符串，再转换为base64编码
+        const extParamBase64 = btoa(JSON.stringify(extParam))
+        const params = {
+          payChannel: payChannel,
+          payType: 2,
+          appletFlag: 0,
+          businessType: this.businessType,
+          businessCode: this.orderCode,
+          extParam: extParamBase64,
+        }
+        api.unifiedorder(params).then(res => {
+          if (res.code === 200) {
+            resolve(res.data)
+            this.checkPayStatus(params)
+          } else {
+            uni.showToast({
+              title: res.msg,
+              icon: 'none',
+            })
+            reject(res.msg)
+          }
+        })
+      })
+    },
     scanPayBfWx(val) {
       let params = {
         businessType: 1,
@@ -567,9 +641,7 @@ export default {
     getPayConfig() {
       api.payConfig().then(res => {
         this.payList = res.data
-        this.$nextTick(() => {
+
-          this.$refs.collapse.init()
-        })
         this.$forceUpdate()
       })
     },
@@ -588,18 +660,7 @@ export default {
       })
       this.$forceUpdate()
     },
-    getOrderInfo() {
+
-      api
-        .orderInfo({
-          specialArea: this.specialArea,
-          orderCode: this.orderCode,
-          pkSettleCountry: this.pkCountry,
-        })
-        .then(res => {
-          this.orderData = res.data
-          this.downTime()
-        })
-    },
     downTime() {
       let that = this
       this.clockTime = setInterval(() => {
@@ -639,7 +700,12 @@ export default {
           clearInterval(payStatus)
           this.wxPopup = false
           // this.showSucce = true
-          this.fansOrder()
+          uni.showLoading({
+            title: '正在获取注册信息，请不要关闭当前页面',
+          })
+          setTimeout(() => {
+            this.fansOrder()
+          }, 2000)
         } else {
           api.payStatus(data).then(res => {
             that.sucPay = res.data
@@ -753,10 +819,9 @@ export default {
 .flex_ac {
   display: flex;
   align-items: center;
-  width: 100%;
   justify-content: space-between;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 18rpx 0;
+  padding: 18rpx 20rpx;
 }
 
 .flex_ac1 {
@@ -766,7 +831,7 @@ export default {
   width: 100%;
   justify-content: space-between;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 18rpx 0;
+  // padding: 18rpx 0;
 }
 
 .flex_ac_i {
@@ -786,10 +851,6 @@ export default {
   }
 }
 
-::v-deep .u-collapse-item__content__text {
-  padding: 0px 15px;
-}
-
 .pad {
   width: 100%;
   display: flex;

pages/shareArea/hiList.vue

@@ -1,37 +1,51 @@
-
 <template>
   <view class="contain">
-    <view class="zhan"></view>
+    <!-- 头部营销区域 -->
-    <view class="goodList">
+    <view class="header-section">
-          <view v-for="item in goodList"
+      <view class="hero-content">
-                :key="item.waresCode"
+        <view class="hero-title">
-                class="goodList_i"
+          <text class="hero-main">新人专享特惠</text>
-               >
+          <text class="hero-sub">精选好物·品质优选</text>
-            <img :src="item.cover1"
-                 class="cover"
-                 alt="">
-            <view class="goodList_ir">
-              <view class="tit1">
-                {{ item.waresName }}
-              </view>
-            
-              <view class="sales">
-                销量:{{ item.sales |seles}}
-              </view>
-              <view class="goodList_ib">
-                <view>
-                  ￥{{ item.waresPrice | numberToCurrency}}
-                </view>
-                <!-- <img @click.stop="addCar(item)"
-                     src="@/static/images/cart.png"
-                     alt=""> -->
-                     
-              </view>
-              <view class="toBuy" @click.stop="goBuy(item)">立即购买</view>
-            </view>
-          </view>
-          <view class="zhan2"></view>
         </view>
+        <!-- <view class="promotion-banner">
+          <text class="promo-text">限时优惠·新人福利</text>
+        </view> -->
+      </view>
+    </view>
+
+    <view class="goods-container">
+      <scroll-view
+        class="goodList"
+        scroll-y="true"
+        enhanced
+        :show-scrollbar="false"
+      >
+        <view v-for="item in goodList" :key="item.waresCode" class="goodList_i">
+          <img :src="item.cover1" class="cover" alt="" />
+          <view class="goodList_ir">
+            <view class="tit1">
+              {{ item.waresName }}
+            </view>
+
+            <view class="goodList_ib">
+              <view class="price-container">
+                <!-- <text class="currency">￥</text> -->
+                <text class="price">{{
+                  item.waresPrice | numberToCurrency
+                }}</text>
+              </view>
+              <!-- <img @click.stop="addCar(item)"
+                       src="@/static/images/cart.png"
+                       alt=""> -->
+            </view>
+            <view class="toBuy" @click.stop="goBuy(item)">立即购买</view>
+          </view>
+        </view>
+        <view class="list-bottom">
+          <text class="bottom-text">— 已显示全部商品 —</text>
+        </view>
+      </scroll-view>
+    </view>
   </view>
 </template>
 
@@ -40,138 +54,468 @@ import * as api from '@/config/login.js'
 import { setToken } from '@/config/auth.js'
 
 export default {
-  data(){
+  data() {
-    return{
+    return {
-      pkParent:'',
+      pkParent: '',
-      goodList:[],
+      goodList: [],
-      placeParent:''
+      placeParent: '',
     }
   },
-  filters:{
+  filters: {
-        seles(value){
+    seles(value) {
-          
+      if (value > 999) {
-          if(value>999){
+        return 999 + '+'
-            return 999 + '+'
+      } else {
-          }else{
+        return value
-            return value
+      }
-          }
-            
-        }
     },
+  },
   onLoad(options) {
     this.pkParent = options.pkParent
     this.getToken()
-    
   },
-  methods:{
+  methods: {
-    getToken(){
+    getToken() {
-      api.autoLogin({
+      api
-        pkParent:this.pkParent
+        .autoLogin({
-      }).then(res=>{
+          pkParent: this.pkParent,
-        setToken(res.data.access_token, res.data.expires_in)
+        })
-        this.getList()
+        .then(res => {
-        this.getCode()
+          setToken(res.data.access_token, res.data.expires_in)
+          this.getList()
+          this.getCode()
+        })
+    },
+    getCode() {
+      api.fansConvertCode(this.pkParent).then(res => {
+        this.placeParent = res.data
+        uni.setStorageSync('placeParent', this.placeParent)
       })
     },
-    getCode(){
+    getList() {
-      api.fansConvertCode(
+      api
-        this.pkParent
+        .queryWares({
-      ).then(res=>{
+          shareMemberCode: this.pkParent,
-        this.placeParent = res.msg
+        })
-        uni.setStorageSync('placeParent',  this.placeParent)
+        .then(res => {
+          this.goodList = res.data
+        })
+    },
+    goBuy(item) {
+      const params = {
+        ...item,
+        pkParent: this.pkParent,
+      }
+      uni.navigateTo({
+        url: '/pages/shareArea/hiOrder?allData=' + JSON.stringify(item),
       })
     },
-    getList(){
+  },
-      api.queryWares({
-        shareMemberCode:this.pkParent
-      }).then(res=>{
-        this.goodList = res.data
-      })
-    },
-    goBuy(item){
-      uni.navigateTo({ url: '/pages/shareArea/hiOrder?allData=' + JSON.stringify(item)})
-    }
-  }
 }
 </script>
 
 <style lang="scss" scoped>
-.contain{
+.contain {
-  background: #fff;
+  background: linear-gradient(
-  height: 100vh;
+    135deg,
-  background: url('~@/static/images/hf1.jpg') no-repeat;
+    #005bac 0%,
-  background-size: cover;
+    #0066cc 50%,
-  padding: 0 20px;
+    #f5f7fa 50%,
+    #e8f4f8 100%
+  );
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
-.zhan{
+
-  height: 36%;
+// 头部营销区域
+.header-section {
+  background: linear-gradient(135deg, #005bac 0%, #0066cc 100%);
+  padding: 50rpx 32rpx 60rpx;
+  animation: slideDown 0.6s ease-out;
+
+  .hero-content {
+    text-align: center;
+
+    .hero-title {
+      margin-bottom: 24rpx;
+
+      .hero-main {
+        display: block;
+        color: #fff;
+        font-size: 40rpx;
+        font-weight: 700;
+        margin-bottom: 8rpx;
+        animation: fadeInUp 0.8s ease-out 0.2s both;
+      }
+
+      .hero-sub {
+        display: block;
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 26rpx;
+        font-weight: 400;
+        animation: fadeInUp 0.8s ease-out 0.4s both;
+      }
+    }
+
+    .promotion-banner {
+      background: linear-gradient(
+        135deg,
+        #ff6b35 0%,
+        #f7931e 50%,
+        #ffd700 100%
+      );
+      border-radius: 30rpx;
+      padding: 18rpx 36rpx;
+      box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.4);
+      animation:
+        fadeInUp 0.8s ease-out 0.6s both,
+        promoBreathe 3s ease-in-out infinite 1s;
+      position: relative;
+      overflow: hidden;
+      border: 2rpx solid rgba(255, 255, 255, 0.3);
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(
+          90deg,
+          transparent,
+          rgba(255, 255, 255, 0.4),
+          transparent
+        );
+        animation: shimmer 2.5s ease-in-out infinite;
+      }
+
+      .promo-text {
+        color: #fff;
+        font-size: 28rpx;
+        font-weight: 700;
+        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+        position: relative;
+        z-index: 2;
+      }
+    }
+  }
 }
+
+// 商品容器区域
+.goods-container {
+  flex: 1;
+  background: #f8fafc;
+  border-radius: 40rpx 40rpx 0 0;
+  margin-top: -40rpx;
+  position: relative;
+  z-index: 3;
+  padding: 32rpx 24rpx 0;
+  animation: fadeIn 0.8s ease-out 0.3s both;
+
+  .section-title {
+    text-align: center;
+    margin-bottom: 24rpx;
+    padding: 20rpx 0;
+
+    .title-text {
+      display: block;
+      color: #1e293b;
+      font-size: 32rpx;
+      font-weight: 600;
+      margin-bottom: 8rpx;
+    }
+
+    .title-desc {
+      display: block;
+      color: #64748b;
+      font-size: 24rpx;
+    }
+  }
+}
+
+// 商品列表滚动区域
 .goodList {
-  padding: 40rpx;
+  height: calc(100vh - 400rpx);
-  height: 55vh;
+  padding: 0 8rpx;
-  overflow-y: auto;
+
-  background: url('~@/static/images/hf2.png') no-repeat;
-  background-size: cover;
   .goodList_i {
     display: flex;
-    border-bottom: 1px solid #eee;
+    background: #ffffff;
-    padding: 60rpx 60rpx 30rpx 60rpx;
+    border-radius: 20rpx;
-  //   background: url('~@/static/images/hf3.png') no-repeat;
+    margin-bottom: 24rpx;
-  // background-size: cover;
+    padding: 24rpx;
-  border-radius: 20rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 91, 172, 0.06);
-  background-image: linear-gradient(to bottom, #fefbf8, #fadf97);
+    border: 1rpx solid rgba(0, 91, 172, 0.1);
-  margin-bottom: 20rpx;
+    transition: all 0.3s ease;
+    animation: slideInUp 0.6s ease-out both;
+    opacity: 0;
+
+    &:hover {
+      transform: translateY(-4rpx);
+      box-shadow: 0 12rpx 32rpx rgba(0, 91, 172, 0.15);
+    }
+
+    .cover {
+      width: 240rpx;
+      height: 240rpx;
+      background: #f8fafc;
+      border: 1rpx solid #e2e8f0;
+      border-radius: 16rpx;
+      flex-shrink: 0;
+      overflow: hidden;
+    }
+
     .goodList_ir {
-      margin-left: 40rpx;
+      margin-left: 24rpx;
-     
       flex: 1;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-      font-size: 24rpx;
+
-      font-family: Microsoft YaHei;
+      .tit1 {
-      font-weight: 400;
+        color: #1e293b;
-      color: #333333;
+        font-size: 32rpx;
-      .goodList_ib {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        font-size: 24px;
-        font-family: Source Han Sans CN;
         font-weight: 600;
-        color: #a36b28;
+        line-height: 1.4;
+        margin-bottom: 16rpx;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      .sales {
+        color: #64748b;
+        font-size: 24rpx;
+        font-weight: 400;
+        margin-bottom: 16rpx;
+      }
+
+      .goodList_ib {
+        margin-bottom: 24rpx;
+
+        .price-container {
+          display: flex;
+          align-items: baseline;
+
+          .currency {
+            color: #ff6b35;
+            font-size: 24rpx;
+            font-weight: 600;
+            margin-right: 4rpx;
+          }
+
+          .price {
+            color: #ff6b35;
+            font-size: 36rpx;
+            font-weight: 700;
+          }
+        }
+
         img {
           width: 56rpx;
           height: 56rpx;
         }
       }
+
+      .toBuy {
+        background: #005bac;
+        color: #ffffff;
+        padding: 20rpx 0;
+        text-align: center;
+        border-radius: 12rpx;
+        font-size: 28rpx;
+        font-weight: 600;
+        border: none;
+        transition: all 0.3s ease;
+        position: relative;
+        overflow: hidden;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: -100%;
+          width: 100%;
+          height: 100%;
+          background: linear-gradient(
+            90deg,
+            transparent,
+            rgba(255, 255, 255, 0.2),
+            transparent
+          );
+          transition: left 0.5s;
+        }
+
+        &:hover {
+          background: #0066cc;
+          transform: translateY(-2rpx);
+          box-shadow: 0 6rpx 16rpx rgba(0, 91, 172, 0.3);
+
+          &::before {
+            left: 100%;
+          }
+        }
+
+        &:active {
+          transform: scale(0.98);
+        }
+      }
     }
   }
-  .cover {
+
-    width: 200rpx;
+  .list-bottom {
-    height: 200rpx;
-    background: #ffffff;
-    border: 1px solid #eeeeee;
-    border-radius: 10rpx;
-    margin-bottom: 40px;
-  }
-  .toBuy{
-    color: #fff;
-    background: #005BAC;
-    padding: 10rpx 0;
     text-align: center;
-    border-radius: 10rpx;
+    padding: 40rpx 0 60rpx;
-    font-size: 20px;
+
+    .bottom-text {
+      color: #64748b;
+      font-size: 24rpx;
+    }
   }
 }
-.tit1{
+
-  color: #93561f;
+// 动画定义
-  font-size: 16px;
+@keyframes slideDown {
-  font-weight: 700;
+  from {
+    opacity: 0;
+    transform: translateY(-50rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
-.sales{
+
-  color: #923f32;
+@keyframes fadeIn {
-  font-size: 10px;
+  from {
-  font-weight: 700;
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
-</style>
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(40rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.02);
+  }
+}
+
+@keyframes promoBreathe {
+  0%,
+  100% {
+    transform: scale(1);
+    box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.4);
+  }
+  50% {
+    transform: scale(1.05);
+    box-shadow: 0 12rpx 32rpx rgba(255, 107, 53, 0.6);
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    left: -100%;
+  }
+  50% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+// 商品卡片延迟动画
+.goodList_i:nth-child(1) {
+  animation-delay: 0.1s;
+}
+.goodList_i:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.goodList_i:nth-child(3) {
+  animation-delay: 0.3s;
+}
+.goodList_i:nth-child(4) {
+  animation-delay: 0.4s;
+}
+.goodList_i:nth-child(5) {
+  animation-delay: 0.5s;
+}
+.goodList_i:nth-child(n + 6) {
+  animation-delay: 0.6s;
+}
+
+// 响应式优化
+@media (max-width: 750rpx) {
+  .header-section {
+    padding: 40rpx 24rpx 50rpx;
+
+    .hero-content {
+      .hero-title .hero-main {
+        font-size: 36rpx;
+      }
+    }
+  }
+
+  .goodList {
+    .goodList_i {
+      padding: 20rpx;
+
+      .cover {
+        width: 200rpx;
+        height: 200rpx;
+      }
+
+      .goodList_ir {
+        margin-left: 20rpx;
+
+        .tit1 {
+          font-size: 28rpx;
+        }
+
+        .goodList_ib {
+          .price-container {
+            .price {
+              font-size: 32rpx;
+            }
+          }
+        }
+
+        .toBuy {
+          padding: 18rpx 0;
+          font-size: 26rpx;
+        }
+      }
+    }
+  }
+}
+</style>

pages/shareArea/hiOrder.vue

@@ -1,9 +1,3 @@
-<!--
- * @Descripttion:
- * @version:
- * @Author: kBank
- * @Date: 2022-11-21 15:11:22
--->
 <template>
   <view class="content">
     <!-- <view class="index_header">
@@ -14,67 +8,50 @@
       <view class="subTxt">
         <view class="subTxt1">{{ '会员信息' }}</view>
       </view>
-      <u-form
+      <u-form :model="form" labelWidth="75" :rules="rules" ref="uForm">
-        :model="form"
-        labelAlign="right"
-        labelWidth="75"
-        :rules="rules"
-        ref="uForm"
-      >
         <view class="kuang">
-          <u-form-item :label="'会员姓名'" prop="memberName">
+          <u-form-item
+            :label="'会员姓名'"
+            prop="memberName"
+            borderBottom
+            required
+          >
             <u-input
               :placeholder="'请输入会员姓名'"
               v-model.trim="form.memberName"
+              border="none"
             />
           </u-form-item>
-          <u-form-item :label="'联系方式'" prop="phone">
+          <u-form-item :label="'联系方式'" prop="phone" borderBottom required>
             <u-input
               :placeholder="'请输入联系方式'"
               type="number"
               v-model.trim="form.phone"
               :maxlength="user.pkSettleCountry == 1 ? 11 : 20"
+              border="none"
             />
           </u-form-item>
-          <u-form-item :label="'自然国家'" @tap="changeCountry(0)">
+          <!-- <u-form-item
-            <view class="disFlex justBwn ge">
+            v-if="[80, 90].includes(gradeValue) && provinceList.length"
-              <view class="disFlex">
+            @click="regionSelectHandle"
-                <img class="countImg" :src="form.pkCountryImg" alt="" />
+            required
-                <view>{{ form.pkCountryLabel }}</view>
+            label="会员区域"
+            borderBottom
+            prop="regionProvince"
+          >
+            <view class="disFlex justBwn">
+              <view v-if="regionAddress.length">
+                {{ regionAddress.map(item => item.name).join('-') }}
               </view>
-              <u-icon name="arrow-down"></u-icon>
+              <view
+                v-else
+                class="uni-input-placeholder input-placeholder"
+                style="position: relative !important"
+                >请选择区域</view
+              >
+              <u-icon name="arrow-right"></u-icon>
             </view>
-          </u-form-item>
+          </u-form-item> -->
-          <u-form-item :label="'结算国家'">
-            <view class="disFlex justBwn ge hui">
-              <view class="disFlex">
-                <img class="countImg" :src="form.pkSettleCountryImg" alt="" />
-                <view>{{ form.pkSettleCountryLabel }}</view>
-              </view>
-              <u-icon name="arrow-down"></u-icon>
-            </view>
-          </u-form-item>
-          <u-form-item :label="'运输方式'">
-            <view class="pickerHui">
-              <u-input
-                v-model="form.transTypeVal"
-                disabled
-                border="none"
-              ></u-input>
-              <u-icon name="arrow-down"></u-icon>
-            </view>
-          </u-form-item>
-          <u-form-item :label="'发货方式'">
-            <view class="pickerHui">
-              <u-input
-                v-model="form.deliveryName"
-                disabled
-                :placeholder="'请选择发货方式'"
-                border="none"
-              ></u-input>
-              <u-icon name="arrow-down"></u-icon>
-            </view>
-          </u-form-item>
         </view>
         <view class="subTxt">
           <view class="subTxt1">收货人信息</view>
@@ -82,23 +59,35 @@
         <view class="kuang">
           <view class="disFlex tit_t">
             <view></view>
-            <!-- <view class="lan" @click="addAdress">新增收货人地址</view> -->
           </view>
-          <u-form-item :label="'收货人'" prop="recName">
+          <u-form-item :label="'收货人'" prop="recName" borderBottom required>
             <u-input
               v-model.trim="form.recName"
               :placeholder="'请输入收货人'"
+              border="none"
             />
           </u-form-item>
-          <u-form-item :label="'收货电话'" prop="recPhone">
+          <u-form-item
+            :label="'收货电话'"
+            prop="recPhone"
+            borderBottom
+            required
+          >
             <u-input
               v-model.trim="form.recPhone"
               type="number"
               maxlength="20"
               :placeholder="'请输入收货电话'"
+              border="none"
             />
           </u-form-item>
-          <u-form-item :label="'收货地址'" prop="diqu" @click="getDiqu">
+          <u-form-item
+            :label="'收货地址'"
+            prop="diqu"
+            @click="getDiqu"
+            required
+            borderBottom
+          >
             <view class="picker">
               <u-input
                 v-model.trim="form.diqu"
@@ -108,17 +97,22 @@
               <u-icon name="arrow-down"></u-icon>
             </view>
           </u-form-item>
-          <u-form-item :label="'详细地址'" prop="recAddress">
+          <u-form-item
+            required
+            :label="'详细地址'"
+            prop="recAddress"
+            borderBottom
+          >
             <u--textarea
               v-model.trim="form.recAddress"
               maxlength="200"
               :placeholder="'请输入详细地址'"
             ></u--textarea>
           </u-form-item>
-          <u-form-item :label="'邮费'">
+          <u-form-item :label="'邮费'" borderBottom>
             <u-input disabled v-model="form.postage" />
           </u-form-item>
-          <u-form-item :label="'备注'">
+          <u-form-item :label="'备注'" borderBottom>
             <u--textarea
               v-model="form.remark"
               :placeholder="'请输入备注'"
@@ -126,36 +120,6 @@
           </u-form-item>
         </view>
       </u-form>
-      <!-- <view class="kuang">
-        <view class="kuang_t">
-          <view class="kuang_tl">
-            <view class="sTit">{{'商品主图'}}</view>
-            <img :src="allData.cover1"
-                 alt="">
-            <view class="sTit">{{'商品名称'}}</view>
-            <view class="cTit">{{ allData.waresName }}</view>
-          </view>
-          <view class="kuang_tr">
-            <view class="sTit">{{'产品'}}</view>
-            <view v-for="item,index in allData.specsSkuParamsList"
-                  :key="index">
-              <view class="cTit">
-                {{ item.productName }}{{ item.specsName }}*{{ item.quantity }}
-              </view>
-            </view>
-          </view>
-        </view>
-        <view class="kuang_t">
-          <view class="kuang_tl">
-            <view class="sTit">{{'商品价格'}}(￥)</view>
-            <view class="cTit">{{ allData.waresPrice | numberToCurrency }}</view>
-          </view>
-          <view class="kuang_tr">
-            <view class="sTit">{{'商品数量'}}</view>
-            <view class="cTit">{{ allData.quantity }}</view>
-          </view>
-        </view>
-      </view> -->
       <view class="subTxt">
         <view class="subTxt1">商品信息</view>
       </view>
@@ -172,7 +136,7 @@
               </view>
               <view class="goodList_ib">
                 <view class="tit2">
-                  ￥{{ allData.waresPrice | numberToCurrency }}
+                  {{ allData.waresPrice | numberToCurrency }}
                 </view>
                 <!-- <view class="tit3">业绩: {{ item.achieve | numberToCurrency | isLocal}}</view> -->
               </view>
@@ -205,19 +169,6 @@
           </view>
         </view>
       </view>
-
-      <view class="kuang disFlex">
-        <u-checkbox-group
-          v-model="agreementShow"
-          shape="circle"
-          activeColor="#005BAC"
-          @change="checkboxChange"
-        >
-          <u-checkbox :name="1"> </u-checkbox>
-        </u-checkbox-group>
-        <view class="tit3">{{ '请阅读并同意' }}</view>
-        <view class="tit2" @click="toAgree"> 《{{ '购买协议' }}》</view>
-      </view>
     </view>
     <!-- 占空 -->
     <view style="height: 150rpx"></view>
@@ -226,8 +177,8 @@
       <view class="footer">
         <view class="footer_l">
           <view class="disFlex">
-            <view class="h1">{{ '总价' }}</view>
+            <view class="h1">总价</view>
-            <view class="r1">¥{{ allData.waresPrice | numberToCurrency }}</view>
+            <view class="r1">{{ allData.waresPrice | numberToCurrency }}</view>
           </view>
           <!-- <view class="disFlex">
             <view class="h1">{{'业绩'}}</view>
@@ -256,12 +207,18 @@
       :columns="countryList"
       keyName="label"
     ></u-picker>
-    <agreement ref="agreement"></agreement>
     <v-address
       ref="address"
       :defaultCode="defaultCode"
       @addressData="addressData"
     ></v-address>
+    <RegionAddress
+      ref="regionAddress"
+      :provinceList="provinceList"
+      :cityList="cityList"
+      :countyList="countyList"
+      @setAddress="setRegionAddress"
+    ></RegionAddress>
   </view>
 </template>
 
@@ -269,15 +226,18 @@
 import address from '@/components/address.vue'
 import * as api from '@/config/goods'
 import * as regiest from '@/config/regiest'
+import regionSelect from '@/pages/commonMixins/regionSelect'
+import RegionAddress from '@/components/region-address.vue'
 
-import agreement from '@/components/agreement.vue'
 export default {
+  mixins: [regionSelect],
   components: {
     'v-address': address,
-    agreement,
+    RegionAddress,
   },
   data() {
     return {
+      regionAddress: [],
       specialArea: 7,
       isCountry: false,
       defaultCode: [],
@@ -293,6 +253,12 @@ export default {
         pkCountry: '',
         pkCountryLabel: '',
         pkCountryImg: '',
+        pkGradeVal: '',
+        memberName: 'windsword',
+        phone: 13333332211,
+        recName: '啊啊啊',
+        recPhone: '123333321221',
+        recAddress: '3123',
       },
       deliList: [],
       diqu: '',
@@ -356,6 +322,7 @@ export default {
       countryList: [],
       placeParent: '',
       user: '',
+      gradeValue: '',
     }
   },
   onLoad(options) {
@@ -378,6 +345,23 @@ export default {
   },
   onShow() {},
   methods: {
+    getRegiestLevel() {
+      const params = {
+        firstCheck: 0,
+        specialArea: this.specialArea,
+        shopList: this.shoppingArr.map(id => {
+          return {
+            shoppingId: id,
+          }
+        }),
+      }
+    },
+    regionSelectHandle() {
+      this.$refs.regionAddress.setShow(this.provinceList[0].pkId)
+    },
+    setRegionAddress(area) {
+      this.regionAddress = area
+    },
     phonePass(rule, value, callback) {
       if (!value) {
         callback(new Error('请输入联系电话'))
@@ -386,21 +370,8 @@ export default {
       if (value.length < 6 || value.length > 20) {
         callback(new Error('请输入正确联系方式'))
         return false
-      } else {
-        regiest
-          .validPhone({
-            memberName: this.form.memberName,
-            phone: this.form.phone,
-            placeParent: this.placeParent,
-          })
-          .then(res => {
-            if (res.code == 200) {
-              callback()
-            } else {
-              callback(new Error(res.msg))
-            }
-          })
       }
+      callback()
     },
     getCountry() {
       regiest.countryList().then(res => {
@@ -450,29 +421,31 @@ export default {
     //     url: '/pages/address/index',
     //   })
     // },
-    toAgree() {
+
-      // agreeMent
-      this.$refs.agreement.openDig()
-    },
     getGenerate() {
       api.generate().then(res => {
         uni.setStorageSync('mToken', res.msg)
       })
     },
     goBuy() {
-      this.$refs.uForm.validate().then(res => {
+      const extParams = {}
-        if (this.agreementShow.length == 0) {
+      if ([80, 90].includes(this.gradeValue) && this.provinceList.length) {
+        if (!this.regionAddress.length) {
           uni.showToast({
-            title: '请阅读并同意购买协议',
+            title: '请选择会员区域',
             icon: 'none',
-            duration: 1500,
           })
           return
         }
+        extParams.regionProvince = this.regionAddress[0]?.pkId || -1
+        extParams.regionCity = this.regionAddress[1]?.pkId || -1
+        extParams.regionCounty = this.regionAddress[2]?.pkId || -1
+      }
+      this.$refs.uForm.validate().then(res => {
         this.isLoading = true
         api
           .fansConfirm(
-            Object.assign({}, this.form, {
+            Object.assign({}, this.form, extParams, {
               waresList: this.waresList,
             })
           )
@@ -492,9 +465,14 @@ export default {
         pkWares: this.allData.pkId,
         skuList: [],
       }
-      this.allData.specsSkuParamsList.forEach(item => {
+      console.log(
+        '%c [ carList ]-419',
+        'font-size:13px; background:#b131b9; color:#f575fd;',
+        this.allData
+      )
+      this.allData.productGroup.forEach(item => {
         carList.skuList.push({
-          pkWaresSku: item.pkWaresSpecsSku,
+          pkWaresSku: item.pkSkuId,
           quantity: item.quantity,
         })
       })
@@ -547,7 +525,7 @@ export default {
 }
 .kuang {
   // margin-top: 20rpx;
-  padding: 20rpx 40rpx;
+  // padding: 20rpx 40rpx;
   background: #fff;
   // box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.5);
   // border-radius: 10px 10px 10px 10px;
@@ -573,22 +551,16 @@ export default {
   display: flex;
   justify-content: space-between;
   width: 100%;
-  border-width: 0.5px !important;
-  border-color: #dadbde !important;
-  border-style: solid;
-  border-radius: 4px;
   padding: 6px 9px;
 }
 .pickerHui {
   display: flex;
   justify-content: space-between;
   width: 100%;
-  border-width: 0.5px !important;
+
-  border-color: #dadbde !important;
-  border-style: solid;
   border-radius: 4px;
-  padding: 6px 9px;
+  // padding: 6px 9px;
-  background: #f5f7fa;
+  // background: #f5f7fa;
 }
 .kuang_t {
   display: flex;
@@ -784,4 +756,9 @@ export default {
   background: #f6f6f6;
   padding: 0 28rpx 28rpx 28rpx;
 }
+.u-form-item {
+  ::v-deep .u-form-item__body {
+    padding: 20rpx 30rpx !important;
+  }
+}
 </style>

pages/shareRegist/index.vue

@@ -10,48 +10,55 @@
       <!-- <view class="index_header">
       <view>注册</view>
     </view> -->
-      <view class="title">欢迎注册</view>
       <!-- <view class="tit" v-if="!pkCountry">{{ '嗨粉扫天下' }}</view> -->
       <!-- 海粉 -->
       <view class="formed1">
-        <u-form :model="form" labelWidth="90px" ref="uForm" :rules="rules">
+        <u-form :model="form" labelWidth="80px" ref="uForm" :rules="rules">
-          <u-form-item label="推荐编号" prop="parentCode">
+          <u-form-item label="" prop="memberCode">
-            <u-input v-model="form.parentCode" disabled> </u-input>
+            <u-input v-model="form.memberCode" type="number" disabled>
+              <u--text
+                :text="howHeader"
+                slot="prefix"
+                margin="0 3px 0 0"
+                type="tips"
+              ></u--text>
+            </u-input>
           </u-form-item>
-          <u-form-item label="会员姓名" prop="memberName">
+          <u-form-item label="" prop="memberName">
             <u-input
               v-model="form.memberName"
               :placeholder="'请输入会员姓名'"
             />
           </u-form-item>
-          <u-form-item label="联系方式" prop="phone">
+          <u-form-item label="" prop="phone">
             <u-input
               v-model="form.phone"
+              @blur="setMemberCode"
               :placeholder="'请输入联系方式'"
               type="number"
               maxlength="20"
             />
           </u-form-item>
 
-          <u-form-item label="登录密码" prop="loginPwd">
+          <u-form-item label="" prop="loginPassword">
             <u-input
               :password="isPwd"
               :placeholder="'请输入登录密码'"
-              v-model="form.loginPwd"
+              v-model="form.loginPassword"
             >
-              <template #suffix>
+              <template slot="suffix">
                 <u-icon name="eye" @tap="isPwd = !isPwd" v-if="!isPwd"></u-icon>
                 <u-icon name="eye-off" @tap="isPwd = !isPwd" v-else></u-icon>
               </template>
             </u-input>
           </u-form-item>
-          <u-form-item label="支付密码" prop="payPwd">
+          <u-form-item label="" prop="payPassword">
             <u-input
               :password="isPwd2"
               :placeholder="'请输入支付密码'"
-              v-model="form.payPwd"
+              v-model="form.payPassword"
             >
-              <template #suffix>
+              <template slot="suffix">
                 <u-icon
                   name="eye"
                   @tap="isPwd2 = !isPwd2"
@@ -61,9 +68,9 @@
               </template>
             </u-input>
           </u-form-item>
-          <u-form-item label="验证码" prop="smsCode">
+          <u-form-item label="" prop="code">
-            <u-input v-model="form.smsCode" :placeholder="'请输入验证码'">
+            <u-input v-model="form.code" :placeholder="'请输入验证码'">
-              <template #suffix>
+              <template slot="suffix">
                 <view class="getCode" @tap="getVilCode">{{ getCode }}</view>
               </template>
             </u-input>
@@ -130,10 +137,10 @@
           </view>
         </u-form-item>
         <u-form-item label=""
-                     prop="loginPwd">
+                     prop="loginPassword">
           <u-input :password="isPwd1"
                    :placeholder="'请输入登录密码'"
-                   v-model="form.loginPwd">
+                   v-model="form.loginPassword">
             <template slot="suffix">
               <u-icon name="eye"
                       @tap="isPwd1=!isPwd1"
@@ -145,10 +152,10 @@
           </u-input>
         </u-form-item>
         <u-form-item label=""
-                     prop="payPwd">
+                     prop="payPassword">
           <u-input :password="isPwd2"
           :placeholder="'请输入支付密码'"
-                   v-model="form.payPwd">
+                   v-model="form.payPassword">
             <template slot="suffix">
               <u-icon name="eye"
                       @tap="isPwd2=!isPwd2"
@@ -176,52 +183,12 @@
 
     </view> -->
     </view>
-    <u-modal
+    <view class="mask" v-if="isTrue"> </view>
-      :show="showSuccessModal"
-      title="注册成功"
-      :show-cancel-button="true"
-      cancel-text="复制"
-      confirm-text="自动登录"
-      @confirm="onModalConfirm"
-      @cancel="onModalCancel"
-      @close="showSuccessModal = false"
-    >
-      <view class="slot-content" v-if="successData">
-        <view class="success-item">
-          <text class="item-label">会员编号:</text>
-          <text class="item-value">{{ successData.memberCode }}</text>
-        </view>
-        <view class="success-item">
-          <text class="item-label">会员姓名:</text>
-          <text class="item-value">{{ successData.memberName }}</text>
-        </view>
-        <view class="success-item">
-          <text class="item-label">联系方式:</text>
-          <text class="item-value">{{ successData.phone }}</text>
-        </view>
-        <view class="success-item">
-          <text class="item-label">登录密码:</text>
-          <text class="item-value">{{ successData.loginPassword }}</text>
-        </view>
-        <view class="success-item">
-          <text class="item-label">支付密码:</text>
-          <text class="item-value">{{ successData.payPassword }}</text>
-        </view>
-      </view>
-    </u-modal>
   </view>
 </template>
 
 <script>
 import * as api from '@/config/goods'
-import {
-  getMemberCode,
-  getPhoneCode,
-  getRegister,
-  autoLogin,
-} from '@/config/share'
-import { setToken } from '@/config/auth.js'
-import store from '@/store'
 export default {
   components: {},
   data() {
@@ -231,11 +198,6 @@ export default {
       pkParent: '',
       form: {
         memberName: '',
-        smsCode: '',
-        loginPwd: '',
-        payPwd: '',
-        parentCode: '',
-        phone: '',
       },
       isLoading: false,
       getCode: '获取验证码',
@@ -248,13 +210,11 @@ export default {
       isPwd: true,
       isPwd1: true,
       isPwd2: true,
-      showSuccessModal: false,
-      successData: null,
       rules: {
-        parentCode: [
+        memberCode: [
           {
             required: true,
-            message: '请输入推荐编号',
+            asyncValidator: this.memberCodeRule,
             trigger: ['blur'],
           },
         ],
@@ -272,21 +232,21 @@ export default {
             trigger: ['blur'],
           },
         ],
-        smsCode: [
+        code: [
           {
             required: true,
             message: '请输入验证码',
             trigger: ['blur'],
           },
         ],
-        loginPwd: [
+        loginPassword: [
           {
             required: true,
             message: '请输入登录密码',
             trigger: ['blur'],
           },
         ],
-        payPwd: [
+        payPassword: [
           {
             required: true,
             message: '请输入支付密码',
@@ -316,14 +276,14 @@ export default {
             trigger: ['change', 'blur'],
           },
         ],
-        loginPwd: [
+        loginPassword: [
           {
             required: true,
             message: '请输入登录密码',
             trigger: ['change', 'blur'],
           },
         ],
-        payPwd: [
+        payPassword: [
           {
             required: true,
             message: '请输入支付密码',
@@ -336,9 +296,10 @@ export default {
   onReady() {},
   onLoad(options) {
     this.pkParent = options.code
-    this.pkCountry = options.country || ''
+    this.pkCountry = 1
+    this.getGenerate()
     if (this.pkCountry) {
-      // this.getCountry()
+      this.getCountry()
       this.form.pkCountry = this.pkCountry
       uni.setStorageSync('pkCountry', this.pkCountry)
       uni.redirectTo({
@@ -354,22 +315,11 @@ export default {
   },
   onShow() {},
   methods: {
-    getUseInfo() {
+    setMemberCode() {
-      getUseInfo().then(res => {
+      // this.form.memberCode = this.form.phone
-        this.userInfo = res.data
+      this.$set(this.form, 'memberCode', this.form.phone)
-      })
-    },
-    selCountry() {
-      uni.showModal({
-        title: '提示',
-        content: '确认更换自然国',
-        success: res => {
-          if (res.confirm) {
-            this.isCountry = true
-          }
-        },
-      })
     },
+
     memberCodeRule(rule, value, callback) {
       if (!value) {
         callback(new Error('请输入会员编号'))
@@ -388,101 +338,44 @@ export default {
       }
     },
     getHeader() {
-      getMemberCode(this.pkParent).then(res => {
+      api.checkShare().then(res => {
-        this.$set(this.form, 'parentCode', res.data)
+        if (res.code != 200) {
-        console.log(this.form)
+          this.isTrue = true
+        } else {
+          this.isTrue = false
+        }
       })
       // api.prefix(this.pkParent).then((res) => {
       //   this.howHeader = res.msg
       // })
     },
     getGenerate() {
-      api.generate().then(res => {
+      return new Promise((resolve, reject) => {
-        uni.setStorageSync('mToken', res.msg)
+        api.generate().then(res => {
+          resolve(res)
+          uni.setStorageSync('mToken', res.msg)
+        })
       })
     },
     toLogin() {
-      this.$refs.uForm.validate().then(() => {
+      this.$refs.uForm.validate().then(res => {
         this.isLoading = true
-        getRegister(Object.assign({}, this.form, { parentCode: this.pkParent }))
+        api
+          .regShareMember(
+            Object.assign({}, this.form, { parent: this.pkParent })
+          )
           .then(res => {
             this.isLoading = false
             if (res.code == 200) {
-              this.successData = res.data
+              uni.redirectTo({
-              this.showSuccessModal = true
+                url:
-            } else {
+                  '/pages/shareRegist/success?allData=' +
-              uni.showToast({
+                  JSON.stringify(res.data),
-                title: res.msg || '注册失败',
-                icon: 'none',
               })
             }
           })
-          .catch(() => {
-            this.isLoading = false
-            uni.showToast({
-              title: '注册请求失败',
-              icon: 'none',
-            })
-          })
       })
     },
-    onModalConfirm() {
-      if (this.successData) {
-        this.handleAutoLogin(this.successData)
-      }
-    },
-    onModalCancel() {
-      if (this.successData) {
-        const modalContent = `会员编号: ${this.successData.memberCode}\n会员姓名: ${this.successData.memberName}\n联系方式: ${this.successData.phone}\n登录密码: ${this.successData.loginPassword}\n支付密码: ${this.successData.payPassword}`
-        uni.setClipboardData({
-          data: modalContent,
-          success: function () {
-            uni.showToast({
-              title: '复制成功',
-              icon: 'success',
-            })
-          },
-        })
-      }
-    },
-    handleAutoLogin(loginData) {
-      autoLogin({
-        username: loginData.memberCode,
-        password: loginData.loginPassword,
-        uuid: loginData.uuid,
-      })
-        .then(loginRes => {
-          if (loginRes.code === 200) {
-            uni.showToast({
-              title: '登录成功',
-              icon: 'success',
-              duration: 1500,
-            })
-            setToken(loginRes.data.access_token)
-            store.dispatch('GetInfo').then(res => {
-              uni.switchTab({ url: '/pages/index/index' })
-            })
-
-            // setTimeout(() => {
-            //   uni.reLaunch({
-            //     url: '/pages/index/index',
-            //   })
-            // }, 1500)
-          } else {
-            uni.showToast({
-              title: loginRes.msg || '自动登录失败',
-              icon: 'none',
-            })
-          }
-        })
-        .catch(err => {
-          console.log(err)
-          uni.showToast({
-            title: '自动登录请求失败',
-            icon: 'none',
-          })
-        })
-    },
     hiLogin() {
       this.$refs.uForm1.validate().then(res => {
         this.isLoading = true
@@ -526,10 +419,10 @@ export default {
     // 获取验证码
     getVilCode() {
       this.startTime()
-      getPhoneCode({
+      api
-        phone: this.form.phone,
+        .verification({
-        parentCode: this.pkParent,
+          phone: this.form.phone,
-      })
+        })
         .then(res => {})
         .catch(err => {
           this.beginTime = 0
@@ -558,11 +451,10 @@ export default {
 
 <style lang="scss" scoped>
 .content1 {
-  background: linear-gradient(-45deg, #005bac, #0077c2, #0099e0, #00bfff);
+  background-image: url('@/static/images/haiRgeiest1.jpg');
-  background-size: 400% 400%;
+  background-size: 100%;
-  animation: gradient 15s ease infinite;
+  background-repeat: no-repeat;
   height: 100vh;
-  overflow: auto;
 }
 .content {
   background-image: url('@/static/images/huan.jpg');
@@ -572,13 +464,14 @@ export default {
   background-position: center;
   height: 100vh;
 }
-.title {
+.tit {
-  font-size: 48rpx;
+  font-size: 48px;
-  font-weight: bold;
+  font-family: PangMenZhengDao-Regular, PangMenZhengDao;
-  color: #333;
+  font-weight: 400;
+  color: #ffffff;
   text-align: center;
-  padding-top: 120rpx;
+  padding-top: 80px;
-  padding-bottom: 80rpx;
+  margin-bottom: 20px;
 }
 .index_header {
   background: #f9f9f9;
@@ -597,10 +490,8 @@ export default {
   padding: 0 120rpx;
 }
 .formed1 {
-  margin: 0 40rpx;
+  padding: 0 120rpx;
-  padding: 40rpx 30rpx;
+  padding-top: 550rpx;
-  background-color: rgba(255, 255, 255, 0.85);
-  border-radius: 16rpx;
 }
 .getCode {
   font-size: 10px;
@@ -634,37 +525,4 @@ export default {
   height: 100vh;
   top: 0;
 }
-
-@keyframes gradient {
-  0% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
-}
-
-.slot-content {
-  padding: 30rpx 20rpx;
-  font-size: 28rpx;
-}
-.success-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10rpx 0;
-}
-.item-label {
-  color: #606266;
-  margin-right: 20rpx;
-  flex-shrink: 0;
-}
-.item-value {
-  color: #303133;
-  word-break: break-all;
-  text-align: right;
-}
 </style>