终身版

ghsApp/src/admin/home/me.vue

@@ -38,7 +38,11 @@
           <view class="image-box" >
             <view class="dec">
               <block v-if="showDeadline">
-                <text @click="goRenew()">到期时间 {{ myInfo.shopInfo && myInfo.shopInfo.deadline ? myInfo.shopInfo.deadline.substr(0,11) : '' }}</text>
+                <text class="dec-deadline-text" @click="goRenew()">到期时间 {{ myInfo.shopInfo && myInfo.shopInfo.deadline ? myInfo.shopInfo.deadline.substr(0,11) : '' }}</text>
+                <view class="dec-renew" @click="goRenew()">
+                  <text class="dec-renew-label">去续费</text>
+                  <text class="iconfont iconxiangyou dec-renew-arrow"></text>
+                </view>
               </block>
               <block v-else>
                 <text>微信小程序上可以查看时间</text>
@@ -194,7 +198,7 @@
           <text class="right" @click.stop="closeAccount()">注销账号</text>
         </view>
         <view class="bottom-version" @click.stop="editShopName">中央编号 {{myInfo && myInfo.shopInfo && myInfo.shopInfo.mainId ? myInfo.shopInfo.mainId : 0}}&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;version {{version}}</view>
-        <view class="bottom-version">闽ICP备15017325号-12A</view>
+        <view class="bottom-version" @click.stop="goOldRenew">闽ICP备15017325号-12A</view>
 
       </view>
 
@@ -368,6 +372,9 @@ export default {
     goRenew(){
       this.$util.pageTo({ url: '/admin/shop/renew'})
     },
+    goOldRenew(){
+      this.$util.pageTo({ url: '/admin/shop/renewal'})
+    },
     getHdVideo(){
       this.$util.pageTo({ url: '/admin/book/ls' })
     },
@@ -721,7 +728,33 @@ export default {
           position: absolute;
           top: 50%;
           left: 20upx;
+          right: 20upx;
           transform: translate(0, -50%);
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          box-sizing: border-box;
+          & .dec-deadline-text {
+            flex: 1;
+            min-width: 0;
+            margin-right: 20upx;
+          }
+          & .dec-renew {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            flex-shrink: 0;
+            line-height: 1;
+          }
+          & .dec-renew-label {
+            line-height: 1;
+          }
+          & .dec-renew-arrow {
+            font-size: 22upx;
+            line-height: 1;
+            margin-left: 6upx;
+            transform: translateY(5upx);
+          }
         }
         & > image {
           width: 100%;

ghsApp/src/admin/shop/renew.vue

@@ -1,81 +1,135 @@
 <template>
-    <view class="renew-container">
-        <!-- 系统到期信息卡片 -->
-        <view class="info-card">
-            <view class="info-row">
-                <text class="info-label">当前系统到期时间：</text>
-                <text class="info-value">{{ currentDeadline }}</text>
-            </view>
-            <view class="info-row">
-                <text class="info-label">续期一年到期时间：</text>
-                <text class="info-value highlight">{{ newDeadline }}</text>
-            </view>
-            <view class="btn-group">
-                <button class="admin-button-com big blue" @click="startRenew(0,0)">续期一年</button>
+    <view class="renew-page">
+        <view class="renew-hero">
+            <view class="renew-hero-inner">
+                <text class="renew-hero-title">续费套餐</text>
+                <text class="renew-hero-sub">选择适合门店的方案，确认后点击购买</text>
             </view>
         </view>
 
-        <!-- 商品列表 -->
-        <view class="products-container">
-            <!-- 仓库版系统 -->
-            <view class="product-item">
-                <view class="product-header">
-                    <text class="product-name">仓库版系统</text>
-                    <text class="product-price">2200元</text>
+        <view class="renew-body">
+            <view class="info-card">
+                <view class="info-row">
+                    <text class="info-label">当前系统到期时间</text>
+                    <text class="info-value">{{ currentDeadline || '—' }}</text>
                 </view>
-                <view class="btn-group">
-                    <button class="admin-button-com big blue" @click="startRenew(1,2200)">购买</button>
+                <view class="info-row">
+                    <text class="info-label">续期一年后到期时间</text>
+                    <text class="info-value highlight">{{ newDeadline || '—' }}</text>
                 </view>
             </view>
 
-            <!-- 门店版（单屏收银机）系统 -->
-            <view class="product-item">
-                <view class="product-header">
-                    <text class="product-name">门店版（单屏收银机）系统</text>
-                    <text class="product-price">4800元</text>
+            <text class="section-title">选择套餐</text>
+
+            <view class="pkg-list">
+                <view
+                    class="pkg-full pkg-lifetime"
+                    :class="{ 'pkg-active': selectedKey === lt8800.key }"
+                    @click="selectPkg(lt8800)"
+                >
+                    <view class="pkg-lifetime-ribbon">
+                        <text class="pkg-lifetime-ribbon-text">尊享终身</text>
+                    </view>
+                    <view class="pkg-full-main">
+                        <text class="pkg-full-title" :class="{ 'pkg-text-on-primary': selectedKey === lt8800.key }">
+                            终身版 8800元
+                        </text>
+                    </view>
+                    <text class="pkg-full-corner" :class="{ 'pkg-text-on-primary': selectedKey === lt8800.key }">1家店</text>
                 </view>
-                <view class="btn-group">
-                    <button class="admin-button-com big blue" @click="startRenew(1,4800)">购买</button>
+
+                <view
+                    class="pkg-full pkg-lifetime"
+                    :class="{ 'pkg-active': selectedKey === lt12800.key }"
+                    @click="selectPkg(lt12800)"
+                >
+                    <view class="pkg-lifetime-ribbon">
+                        <text class="pkg-lifetime-ribbon-text">尊享终身</text>
+                    </view>
+                    <view class="pkg-full-main">
+                        <text class="pkg-full-title" :class="{ 'pkg-text-on-primary': selectedKey === lt12800.key }">
+                            终身版 12800元
+                        </text>
+                    </view>
+                    <text class="pkg-full-corner" :class="{ 'pkg-text-on-primary': selectedKey === lt12800.key }">2家店</text>
                 </view>
-            </view>
 
-            <!-- 门店版（双屏收银机）系统 -->
-            <view class="product-item">
-                <view class="product-header">
-                    <text class="product-name">门店版（双屏收银机）系统</text>
-                    <text class="product-price">5500元</text>
+                <view
+                    class="pkg-full pkg-lifetime"
+                    :class="{ 'pkg-active': selectedKey === lt16800.key }"
+                    @click="selectPkg(lt16800)"
+                >
+                    <view class="pkg-lifetime-ribbon">
+                        <text class="pkg-lifetime-ribbon-text">尊享终身</text>
+                    </view>
+                    <view class="pkg-full-main">
+                        <text class="pkg-full-title" :class="{ 'pkg-text-on-primary': selectedKey === lt16800.key }">
+                            终身版 16800元
+                        </text>
+                    </view>
+                    <text class="pkg-full-corner" :class="{ 'pkg-text-on-primary': selectedKey === lt16800.key }">3家店</text>
                 </view>
-                <view class="btn-group">
-                    <button class="admin-button-com big blue" @click="startRenew(1,5500)">购买</button>
+
+                <view
+                    class="pkg-full pkg-lifetime"
+                    :class="{ 'pkg-active': selectedKey === lt23800.key }"
+                    @click="selectPkg(lt23800)"
+                >
+                    <view class="pkg-lifetime-ribbon">
+                        <text class="pkg-lifetime-ribbon-text">尊享终身</text>
+                    </view>
+                    <view class="pkg-full-main">
+                        <text class="pkg-full-title" :class="{ 'pkg-text-on-primary': selectedKey === lt23800.key }">
+                            终身版 23800元
+                        </text>
+                    </view>
+                    <text class="pkg-full-corner" :class="{ 'pkg-text-on-primary': selectedKey === lt23800.key }">5家店</text>
                 </view>
             </view>
 
-            <!-- 其他版本系统 -->
-            <view class="product-item">
-                <view class="product-header">
-                    <text class="product-name">其他版本系统</text>
-                    <input 
-                        type="digit" 
-                        class="custom-input" 
-                        placeholder="请输入金额" 
-                        v-model="customPrice"
-                        @focus="customPrice=''"
-                    />
-                </view>
-                <view class="btn-group">
-                    <button class="admin-button-com big blue" @click="startRenew(1,customPrice)">购买</button>
+            <view v-if="isLifetimeSelected" class="benefit-box benefit-box--lifetime">
+                <view class="benefit-title-row">
+                    <text class="benefit-title-flank">✦</text>
+                    <text class="benefit-title-text">终身版福利</text>
+                    <text class="benefit-title-flank">✦</text>
                 </view>
+                <text class="benefit-desc">赠送 价值880元/年的 零售店商城会员系统（终身免费）</text>
             </view>
-            <view class="product-item">
-                <view class="product-header">
-                    <text class="product-name">购买设备</text>
-                    <input type="digit" class="custom-input" placeholder="请输入金额" v-model="machinePrice" @focus="machinePrice=''" />
-                    <input type="text" class="custom-input" style="margin-left:10upx;" placeholder="备注" v-model="remark" @focus="remark=''" />
-                </view>
-                <view class="btn-group">
-                    <button class="admin-button-com big blue" @click="startRenew(2,machinePrice)">购买</button>
+
+            <view class="pkg-year-section">
+                <text class="pkg-year-section-title">按年续费</text>
+                <view class="pkg-row-double">
+                    <view
+                        class="pkg-half pkg-year"
+                        :class="{ 'pkg-active': selectedKey === y1.key }"
+                        @click="selectPkg(y1)"
+                    >
+                        <view class="pkg-year-inner">
+                            <text class="pkg-half-title" :class="{ 'pkg-text-on-primary': selectedKey === y1.key }">续1年</text>
+                            <text class="pkg-half-price" :class="{ 'pkg-text-on-primary': selectedKey === y1.key }">1580元</text>
+                        </view>
+                    </view>
+                    <view
+                        class="pkg-half pkg-year"
+                        :class="{ 'pkg-active': selectedKey === y5.key }"
+                        @click="selectPkg(y5)"
+                    >
+                        <view class="pkg-year-inner">
+                            <text class="pkg-half-title" :class="{ 'pkg-text-on-primary': selectedKey === y5.key }">续5年</text>
+                            <text class="pkg-half-price" :class="{ 'pkg-text-on-primary': selectedKey === y5.key }">7900元</text>
+                        </view>
+                    </view>
                 </view>
             </view>
+
+            <view v-if="isYearSelected" class="benefit-box benefit-box--year">
+                <text class="benefit-year-line">没有赠送 价值880元/年 的零售店商城会员系统</text>
+                <text class="benefit-year-line benefit-year-line-second">每年需要另外付费购买</text>
+            </view>
+
+            <view class="buy-wrap">
+                <button class="admin-button-com big blue renew-buy-btn" @click="buySelected">购买</button>
+            </view>
         </view>
     </view>
 </template>
@@ -87,16 +141,45 @@ export default {
     name: "renew",
     data(){
         return {
-			currentDeadline:'',
-			newDeadline:'',
+            currentDeadline:'',
+            newDeadline:'',
             hasRenew:0,
             renewType:0,
-            customPrice:'',
-            machinePrice:'',
-            remark:''
+            remark:'',
+            selectedKey: 'lt8800',
+            lt8800: { key: 'lt8800', category: 'lifetime', renewType: 1, renewPrice: 8800 },
+            y1: { key: 'y1', category: 'year', renewType: 0, renewPrice: 0 },
+            y5: { key: 'y5', category: 'year', renewType: 1, renewPrice: 7900 },
+            lt12800: { key: 'lt12800', category: 'lifetime', renewType: 1, renewPrice: 12800 },
+            lt16800: { key: 'lt16800', category: 'lifetime', renewType: 1, renewPrice: 16800 },
+            lt23800: { key: 'lt23800', category: 'lifetime', renewType: 1, renewPrice: 23800 },
         }
     },
     computed: {
+        isLifetimeSelected() {
+            const m = {
+                lt8800: this.lt8800,
+                y1: this.y1,
+                y5: this.y5,
+                lt12800: this.lt12800,
+                lt16800: this.lt16800,
+                lt23800: this.lt23800,
+            }
+            const p = m[this.selectedKey]
+            return p && p.category === 'lifetime'
+        },
+        isYearSelected() {
+            const m = {
+                lt8800: this.lt8800,
+                y1: this.y1,
+                y5: this.y5,
+                lt12800: this.lt12800,
+                lt16800: this.lt16800,
+                lt23800: this.lt23800,
+            }
+            const p = m[this.selectedKey]
+            return p && p.category === 'year'
+        }
     },
     components: {
     },
@@ -114,10 +197,26 @@ export default {
 
     },
     methods: {
+        selectPkg(pkg) {
+            this.selectedKey = pkg.key
+        },
+        buySelected() {
+            const map = {
+                lt8800: this.lt8800,
+                y1: this.y1,
+                y5: this.y5,
+                lt12800: this.lt12800,
+                lt16800: this.lt16800,
+                lt23800: this.lt23800,
+            }
+            const p = map[this.selectedKey]
+            if (!p) return
+            this.startRenew(p.renewType, p.renewPrice)
+        },
         init(){
 
         },
-		startRenew(type,price){
+        startRenew(type,price){
             let that = this
             // #ifdef APP-PLUS
             that.$msg("APP不能操作，请打开微信小程序操作")
@@ -126,6 +225,7 @@ export default {
             uni.showLoading({mask:true})
             if(type == 1){
                 if(Number(price) <= 0){
+                    uni.hideLoading()
                     that.$msg("请输入金额")
                     return false
                 }
@@ -142,17 +242,26 @@ export default {
                                 if(res.code == 1){
                                     wexinPay(res.data, this.getSuccess, this.getError)
                                 }
+                            }).catch(()=>{
+                                uni.hideLoading()
                             })
+                        } else {
+                            uni.hideLoading()
                         }
+                    }).catch(()=>{
+                        uni.hideLoading()
                     })
+                },
+                fail: () => {
+                    uni.hideLoading()
                 }
             })
             // #endif
         },
-		getSuccess(){
-			this.$util.pageTo({url:"/admin/shop/renewSuccess?type="+this.renewType,type:2})
-		},
-		getError(){
+        getSuccess(){
+            this.$util.pageTo({url:"/admin/shop/renewSuccess?type="+this.renewType,type:2})
+        },
+        getError(){
         },
         closeRenew(){
             uni.navigateBack()
@@ -161,121 +270,354 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.renew-container {
+.renew-page {
     width: 100%;
     min-height: 100vh;
-    background-color: #f5f5f5;
-    padding: 20upx 20upx 50upx 20upx;
+    background: #eef2f8;
+}
+
+.renew-hero {
+    padding: 36upx 28upx 48upx;
+    background: linear-gradient(165deg, #3385ff 0%, #1e62d9 52%, #1557c4 100%);
+    border-radius: 0 0 40upx 40upx;
+}
+
+.renew-hero-inner {
+    display: flex;
+    flex-direction: column;
+}
+
+.renew-hero-title {
+    color: #ffffff;
+    font-size: 40upx;
+    font-weight: 700;
+    letter-spacing: 2upx;
+}
+
+.renew-hero-sub {
+    margin-top: 14upx;
+    color: rgba(255, 255, 255, 0.88);
+    font-size: 24upx;
+    line-height: 36upx;
+}
+
+.renew-body {
+    padding: 0 24upx 60upx;
+    margin-top: -24upx;
 }
 
-// 信息卡片
 .info-card {
-    background: white;
-    border-radius: 12upx;
-    padding: 30upx;
-    margin-bottom: 30upx;
-    box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.08);
+    background: #ffffff;
+    border-radius: 20upx;
+    padding: 8upx 28upx 8upx;
+    box-shadow: 0 12upx 40upx rgba(30, 80, 180, 0.12);
 }
 
 .info-row {
     display: flex;
+    flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    padding: 20upx 0;
-    font-size: 28upx;
-    line-height: 40upx;
-    
+    padding: 22upx 0;
+    font-size: 26upx;
+    line-height: 38upx;
+
     &:not(:last-child) {
-        border-bottom: 1upx solid #f0f0f0;
+        border-bottom: 1upx solid #f0f2f5;
     }
 }
 
 .info-label {
-    color: #666;
+    color: #6b7280;
     font-weight: 500;
 }
 
 .info-value {
-    color: #333;
-    font-weight: 500;
-    
+    color: #111827;
+    font-weight: 600;
+
     &.highlight {
         color: #3385ff;
-        font-weight: 600;
     }
 }
 
-// 商品列表容器
-.products-container {
+.section-title {
+    display: block;
+    margin-top: 36upx;
+    margin-bottom: 20upx;
+    margin-left: 4upx;
+    font-size: 30upx;
+    font-weight: 700;
+    color: #1f2937;
+}
+
+.pkg-list {
     display: flex;
     flex-direction: column;
-    gap: 20upx;
 }
 
-// 单个商品项
-.product-item {
-    background: white;
-    border-radius: 12upx;
-    padding: 30upx;
-    box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.08);
+.pkg-full {
+    position: relative;
+    min-height: 112upx;
+    border-radius: 20upx;
+    padding: 28upx 24upx 24upx;
+    box-sizing: border-box;
+    overflow: hidden;
 }
 
-.product-header {
+.pkg-full:not(:first-child) {
+    margin-top: 20upx;
+}
+
+.pkg-lifetime {
+    background: linear-gradient(160deg, #fffdf8 0%, #faf4e8 45%, #f5ebd8 100%);
+    border-width: 2upx;
+    border-style: solid;
+    border-color: #c9a227;
+    box-shadow: 0 10upx 32upx rgba(201, 162, 39, 0.22);
+
+    &.pkg-active {
+        background: linear-gradient(160deg, #3d8dff 0%, #3385ff 50%, #256eea 100%);
+        border-color: #3385ff;
+        box-shadow: 0 14upx 36upx rgba(51, 133, 255, 0.45);
+    }
+}
+
+.pkg-lifetime-ribbon {
+    margin-bottom: 8upx;
+}
+
+.pkg-lifetime-ribbon-text {
+    display: inline-block;
+    font-size: 20upx;
+    color: #8a6d1b;
+    letter-spacing: 4upx;
+    padding: 4upx 16upx;
+    border-radius: 999upx;
+    background: linear-gradient(90deg, rgba(212, 175, 55, 0.35) 0%, rgba(255, 248, 220, 0.9) 100%);
+    border: 1upx solid rgba(201, 162, 39, 0.55);
+}
+
+.pkg-lifetime.pkg-active .pkg-lifetime-ribbon-text {
+    color: rgba(255, 255, 255, 0.95);
+    border-color: rgba(255, 255, 255, 0.45);
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.pkg-full-main {
     display: flex;
-    justify-content: space-between;
+    flex-direction: row;
     align-items: center;
-    margin-bottom: 40upx;
-    padding-bottom: 20upx;
-    border-bottom: 1upx solid #f0f0f0;
+    justify-content: center;
 }
 
-.product-name {
+.pkg-full-title {
+    font-size: 32upx;
+    font-weight: 700;
+    color: #166534;
+}
+
+.pkg-full-corner {
+    position: absolute;
+    right: 16upx;
+    bottom: 14upx;
     font-size: 28upx;
-    color: #333;
-    font-weight: 500;
-    flex: 1;
+    font-weight: 800;
+    color: #14532d;
+    letter-spacing: 1upx;
+    padding: 8upx 18upx;
+    border-radius: 12upx;
+    background: rgba(20, 83, 45, 0.1);
+    border-width: 2upx;
+    border-style: solid;
+    border-color: rgba(20, 83, 45, 0.35);
 }
 
-.product-price {
-    font-size: 32upx;
-    color: #3385ff;
+.pkg-lifetime.pkg-active .pkg-full-corner {
+    background: rgba(255, 255, 255, 0.28);
+    border-color: rgba(255, 255, 255, 0.55);
+    color: #ffffff;
+}
+
+.pkg-text-on-primary {
+    color: #ffffff !important;
+}
+
+.pkg-year-section {
+    margin-top: 24upx;
+    padding: 20upx 18upx 18upx;
+    background: #fafbfc;
+    border-radius: 16upx;
+    border-width: 1upx;
+    border-style: dashed;
+    border-color: #e5e7eb;
+}
+
+.pkg-year-section-title {
+    display: block;
+    font-size: 28upx;
     font-weight: 600;
+    color: #64748b;
+    text-align: center;
+    letter-spacing: 1upx;
+}
+
+.pkg-row-double {
+    display: flex;
+    flex-direction: row;
+}
+
+.pkg-year-section .pkg-row-double {
+    margin-top: 16upx;
+}
+
+.pkg-half {
+    flex: 1;
+    width: 0;
+    min-height: 120upx;
+    border-radius: 16upx;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 20upx 12upx;
+    box-sizing: border-box;
+}
+
+.pkg-half:first-child {
+    margin-right: 16upx;
+}
+
+.pkg-year-inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 }
 
-.custom-input {
-    width: 200upx;
-    height: 60upx;
-    padding: 0 10upx;
+.pkg-half-price {
+    margin-top: 8upx;
     font-size: 30upx;
-    border: 2upx solid #ccc;
-    border-radius: 4upx;
-    background-color: white;
-    text-align: center;
-    &::placeholder {
-        color: #999;
+    font-weight: 700;
+    color: #15803d;
+    letter-spacing: 0;
+}
+
+.pkg-year.pkg-active .pkg-half-price {
+    color: #ffffff;
+}
+
+.pkg-year {
+    background: #f1f5f9;
+    border-width: 2upx;
+    border-style: solid;
+    border-color: #e2e8f0;
+
+    &.pkg-active {
+        background: linear-gradient(160deg, #4f96ff 0%, #3385ff 55%, #2b7ae8 100%);
+        border-color: #3385ff;
+        box-shadow: 0 6upx 20upx rgba(51, 133, 255, 0.28);
     }
 }
 
-// 按钮容器
-.btn-group {
+.pkg-half-title {
+    font-size: 28upx;
+    font-weight: 600;
+    color: #475569;
+    text-align: center;
+}
+
+.pkg-year.pkg-active .pkg-half-title {
+    color: #ffffff;
+}
+
+.benefit-box {
+    margin-top: 28upx;
+    padding: 28upx 24upx;
+    border-radius: 16upx;
+    box-sizing: border-box;
+}
+
+.benefit-box--lifetime {
+    background: linear-gradient(180deg, rgba(51, 133, 255, 0.08) 0%, rgba(51, 133, 255, 0.02) 100%);
+    border-width: 2upx;
+    border-style: dashed;
+    border-color: #93c5fd;
+}
+
+.benefit-title-row {
     display: flex;
+    flex-direction: row;
+    align-items: center;
     justify-content: center;
-    margin-top: 40upx;
-    
-    .admin-button-com {
-        min-width: 240upx;
-        height: 80upx;
-        font-size: 30upx;
-        border-radius: 8upx;
-        letter-spacing: 2upx;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        
-        &.big.blue {
-            background-color: #3385ff;
-            color: white;
-        }
+    margin-bottom: 16upx;
+}
+
+.benefit-title-flank {
+    font-size: 22upx;
+    color: #3385ff;
+    margin-left: 12upx;
+    margin-right: 12upx;
+
+    &:first-child {
+        margin-left: 0;
+    }
+
+    &:last-child {
+        margin-right: 0;
     }
 }
-</style>
+
+.benefit-title-text {
+    font-size: 30upx;
+    font-weight: 700;
+    color: #2563eb;
+}
+
+.benefit-desc {
+    display: block;
+    font-size: 26upx;
+    font-weight:bold;
+    line-height: 42upx;
+    color: #2563eb;
+    text-align: center;
+}
+
+.benefit-box--year {
+    background: #f9fafb;
+    border-width: 2upx;
+    border-style: dashed;
+    border-color: #d1d5db;
+}
+
+.benefit-year-line {
+    display: block;
+    font-size: 26upx;
+    line-height: 40upx;
+    color: red;
+    font-weight:bold;
+    text-align: center;
+}
+
+.benefit-year-line-second {
+    margin-top: 12upx;
+}
+
+.buy-wrap {
+    margin-top: 36upx;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.renew-buy-btn {
+    width: 100%;
+    max-width: 100%;
+    height: 92upx;
+    font-size: 32upx;
+    border-radius: 46upx;
+    letter-spacing: 6upx;
+    font-weight: 600;
+    box-shadow: 0 12upx 32upx rgba(51, 133, 255, 0.35);
+}
+</style>

ghsApp/src/admin/shop/renewal.vue

@@ -0,0 +1,281 @@
+<template>
+    <view class="renew-container">
+        <!-- 系统到期信息卡片 -->
+        <view class="info-card">
+            <view class="info-row">
+                <text class="info-label">当前系统到期时间：</text>
+                <text class="info-value">{{ currentDeadline }}</text>
+            </view>
+            <view class="info-row">
+                <text class="info-label">续期一年到期时间：</text>
+                <text class="info-value highlight">{{ newDeadline }}</text>
+            </view>
+            <view class="btn-group">
+                <button class="admin-button-com big blue" @click="startRenew(0,0)">续期一年</button>
+            </view>
+        </view>
+
+        <!-- 商品列表 -->
+        <view class="products-container">
+            <!-- 仓库版系统 -->
+            <view class="product-item">
+                <view class="product-header">
+                    <text class="product-name">仓库版系统</text>
+                    <text class="product-price">2200元</text>
+                </view>
+                <view class="btn-group">
+                    <button class="admin-button-com big blue" @click="startRenew(1,2200)">购买</button>
+                </view>
+            </view>
+
+            <!-- 门店版（单屏收银机）系统 -->
+            <view class="product-item">
+                <view class="product-header">
+                    <text class="product-name">门店版（单屏收银机）系统</text>
+                    <text class="product-price">4800元</text>
+                </view>
+                <view class="btn-group">
+                    <button class="admin-button-com big blue" @click="startRenew(1,4800)">购买</button>
+                </view>
+            </view>
+
+            <!-- 门店版（双屏收银机）系统 -->
+            <view class="product-item">
+                <view class="product-header">
+                    <text class="product-name">门店版（双屏收银机）系统</text>
+                    <text class="product-price">5500元</text>
+                </view>
+                <view class="btn-group">
+                    <button class="admin-button-com big blue" @click="startRenew(1,5500)">购买</button>
+                </view>
+            </view>
+
+            <!-- 其他版本系统 -->
+            <view class="product-item">
+                <view class="product-header">
+                    <text class="product-name">其他版本系统</text>
+                    <input 
+                        type="digit" 
+                        class="custom-input" 
+                        placeholder="请输入金额" 
+                        v-model="customPrice"
+                        @focus="customPrice=''"
+                    />
+                </view>
+                <view class="btn-group">
+                    <button class="admin-button-com big blue" @click="startRenew(1,customPrice)">购买</button>
+                </view>
+            </view>
+            <view class="product-item">
+                <view class="product-header">
+                    <text class="product-name">购买设备</text>
+                    <input type="digit" class="custom-input" placeholder="请输入金额" v-model="machinePrice" @focus="machinePrice=''" />
+                    <input type="text" class="custom-input" style="margin-left:10upx;" placeholder="备注" v-model="remark" @focus="remark=''" />
+                </view>
+                <view class="btn-group">
+                    <button class="admin-button-com big blue" @click="startRenew(2,machinePrice)">购买</button>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+<script>
+import wexinPay from "@/utils/pay/wxPay"
+import { renewShop,needRemind } from "@/api/renew"
+import { postWxCode } from '@/api/mini'
+export default {
+    name: "renew",
+    data(){
+        return {
+			currentDeadline:'',
+			newDeadline:'',
+            hasRenew:0,
+            renewType:0,
+            customPrice:'',
+            machinePrice:'',
+            remark:''
+        }
+    },
+    computed: {
+    },
+    components: {
+    },
+    onLoad(){
+        let that = this
+        needRemind().then(res=>{
+            if(res.code == 1){
+                that.hasRenew = res.data.hasRenew ? res.data.hasRenew : 0
+                that.currentDeadline = res.data.currentDeadline
+                that.newDeadline = res.data.newDeadline
+            }
+        })
+    },
+    onUnload() {
+
+    },
+    methods: {
+        init(){
+
+        },
+		startRenew(type,price){
+            let that = this
+            // #ifdef APP-PLUS
+            that.$msg("APP不能操作，请打开微信小程序操作")
+            // #endif
+            // #ifdef MP-WEIXIN
+            uni.showLoading({mask:true})
+            if(type == 1){
+                if(Number(price) <= 0){
+                    that.$msg("请输入金额")
+                    return false
+                }
+            }
+            this.renewType = type
+            uni.login({
+                provider: 'weixin',
+                success: res => {
+                    postWxCode({ code: res.code }).then(subRes => {
+                        if(subRes.data.currentMiniOpenId){
+                            let currentMiniOpenId = subRes.data.currentMiniOpenId
+                            renewShop({price:price,type:type,remark:this.remark,currentMiniOpenId:currentMiniOpenId}).then(res=>{
+                                uni.hideLoading()
+                                if(res.code == 1){
+                                    wexinPay(res.data, this.getSuccess, this.getError)
+                                }
+                            })
+                        }
+                    })
+                }
+            })
+            // #endif
+        },
+		getSuccess(){
+			this.$util.pageTo({url:"/admin/shop/renewSuccess?type="+this.renewType,type:2})
+		},
+		getError(){
+        },
+        closeRenew(){
+            uni.navigateBack()
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+.renew-container {
+    width: 100%;
+    min-height: 100vh;
+    background-color: #f5f5f5;
+    padding: 20upx 20upx 50upx 20upx;
+}
+
+// 信息卡片
+.info-card {
+    background: white;
+    border-radius: 12upx;
+    padding: 30upx;
+    margin-bottom: 30upx;
+    box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.08);
+}
+
+.info-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20upx 0;
+    font-size: 28upx;
+    line-height: 40upx;
+    
+    &:not(:last-child) {
+        border-bottom: 1upx solid #f0f0f0;
+    }
+}
+
+.info-label {
+    color: #666;
+    font-weight: 500;
+}
+
+.info-value {
+    color: #333;
+    font-weight: 500;
+    
+    &.highlight {
+        color: #3385ff;
+        font-weight: 600;
+    }
+}
+
+// 商品列表容器
+.products-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20upx;
+}
+
+// 单个商品项
+.product-item {
+    background: white;
+    border-radius: 12upx;
+    padding: 30upx;
+    box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.08);
+}
+
+.product-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 40upx;
+    padding-bottom: 20upx;
+    border-bottom: 1upx solid #f0f0f0;
+}
+
+.product-name {
+    font-size: 28upx;
+    color: #333;
+    font-weight: 500;
+    flex: 1;
+}
+
+.product-price {
+    font-size: 32upx;
+    color: #3385ff;
+    font-weight: 600;
+}
+
+.custom-input {
+    width: 200upx;
+    height: 60upx;
+    padding: 0 10upx;
+    font-size: 30upx;
+    border: 2upx solid #ccc;
+    border-radius: 4upx;
+    background-color: white;
+    text-align: center;
+    &::placeholder {
+        color: #999;
+    }
+}
+
+// 按钮容器
+.btn-group {
+    display: flex;
+    justify-content: center;
+    margin-top: 40upx;
+    
+    .admin-button-com {
+        min-width: 240upx;
+        height: 80upx;
+        font-size: 30upx;
+        border-radius: 8upx;
+        letter-spacing: 2upx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        &.big.blue {
+            background-color: #3385ff;
+            color: white;
+        }
+    }
+}
+</style>

ghsApp/src/pages.json

@@ -227,7 +227,8 @@
 				{"path": "selectShop","style": {"navigationBarTitleText": "选择门店"}},
 				{"path": "wl","style": {"navigationBarTitleText": "物流列表"}},
 				{"path": "myShop","style": {"navigationBarTitleText": "我的门店"}},
-				{"path": "renew","style": {"navigationBarTitleText": "续期与购买"}},
+				{"path": "renew","style": {"navigationBarTitleText": "续费套餐"}},
+				{"path": "renewal","style": {"navigationBarTitleText": "续费"}},
 				{"path": "expressSet","style": {"navigationBarTitleText": "跑腿设置"}}
 			]
 		},