续费

ghsApp/src/admin/shop/renew.vue

@@ -1,30 +1,71 @@
 <template>
-    <view>
-        <view style="padding:40upx 20upx 40upx 20upx;height:auto;width:95vw;font-size:36upx;">
-			<view style="margin-top:24upx;">当前系统到期时间：{{ currentDeadline }}</view>
-			<view style="margin-top:24upx;">续期一年到期时间：<text style="color:#3385FF;">{{ newDeadline }}</text></view>
-			<view style="margin-top:40upx;text-align:center;">
-        		<button class="admin-button-com big blue" @click="startRenew()" style="margin-left:80upx;width:200upx;">续期一年</button>
-			</view>
-            <view style="margin-top:40upx;">仓库版系统 2200元</view>
-			<view style="margin-top:40upx;text-align:center;">
-        		<button class="admin-button-com big blue" @click="startRenew()" style="margin-left:80upx;width:200upx;">购买</button>
-			</view>
-            <view style="margin-top:40upx;">门店版（单屏收银机）系统 4800元</view>
-			<view style="margin-top:40upx;text-align:center;">
-        		<button class="admin-button-com big blue" @click="startRenew()" style="margin-left:80upx;width:200upx;">购买</button>
-			</view>
-            <view style="margin-top:40upx;">门店版（双屏收银机）系统 5500元</view>
-			<view style="margin-top:40upx;text-align:center;">
-        		<button class="admin-button-com big blue" @click="startRenew()" style="margin-left:80upx;width:200upx;">购买</button>
-			</view>
-            <view style="margin-top:40upx;">
-                其他版本系统 
-                <input type="text" style="width:200upx;display: inline-block;border:2upx solid #CCCCCC;" placeholder="请输入金额" v-model="qt" @focus="qt=''" />
+    <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="text" 
+                        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 style="margin-top:40upx;text-align:center;">
-        		<button class="admin-button-com big blue" @click="startRenew()" style="margin-left:80upx;width:200upx;">购买</button>
-			</view>
         </view>
     </view>
 </template>
@@ -39,7 +80,7 @@ export default {
 			newDeadline:'',
             hasRenew:0,
             renewType:0,
-            qt:''
+            customPrice:''
         }
     },
     computed: {
@@ -64,48 +105,15 @@ export default {
         init(){
 
         },
-		startRenew(){
+		startRenew(type,price){
             // #ifdef APP-PLUS
             let that = this
             let type = uni.getSystemInfoSync().platform
-            that.$msg("请使用微信小程序操作续期")
-            if(type == 'android'){
-                if(plus.runtime.isApplicationExist({pname:'com.tencent.mm',action:'weixin://'})){
-                    plus.share.getServices(function(s){
-                        var sweixin
-                        for (var i = 0; i < s.length; i++) {
-                        var t = s[i];
-                        if (t.id == 'weixin') {
-                            sweixin = t;
-                        }
-                        }
-                        let miniOriginalId = that.dictInfo.miniOriginalId && that.dictInfo.miniOriginalId.current && that.dictInfo.miniOriginalId.current.ghs ? that.dictInfo.miniOriginalId.current.ghs : ''
-                        if (sweixin && sweixin.nativeClient) {
-                        sweixin.launchMiniProgram({
-                            id: miniOriginalId,
-                            path: '/admin/home/workbench',
-                            type: 0
-                        });
-                        } else {
-                        that.$msg("没有找到微信服务")
-                        //that.$msg("获取微信失败：" + e.message)
-                        //console.log(JSON.stringify(e));
-                        }
-                    }, function(e){
-                        that.$msg("没有找到微信服务哦")
-                        //that.$msg("获取微信失败：" + e.message)
-                        //console.log(JSON.stringify(e));
-                    });
-                } else {
-                    that.$msg("请安装微信，再打开小程序")
-                    return false
-                }
-                return true
-            }
+            that.$msg("APP不能操作，请打开微信小程序操作")
             // #endif
             // #ifdef MP-WEIXIN
             uni.showLoading({mask:true})
-            renewShop().then(res=>{
+            renewShop({price:price,type:type}).then(res=>{
                 uni.hideLoading()
                 if(res.code == 1){
                     wexinPay(res.data, this.getSuccess, this.getError)
@@ -126,4 +134,121 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.renew-container {
+    width: 100%;
+    min-height: 100vh;
+    background-color: #f5f5f5;
+    padding: 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: 40upx;
+    padding: 0 10upx;
+    font-size: 28upx;
+    border: 2upx solid #ccc;
+    border-radius: 4upx;
+    background-color: white;
+    
+    &::placeholder {
+        color: #999;
+    }
+}
+
+// 按钮容器
+.btn-group {
+    display: flex;
+    justify-content: center;
+    margin-top: 40upx;
+    
+    .admin-button-com {
+        min-width: 200upx;
+        height: 60upx;
+        font-size: 28upx;
+        border-radius: 8upx;
+        letter-spacing: 2upx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        &.big.blue {
+            background-color: #3385ff;
+            color: white;
+        }
+    }
+}
 </style>