背包出售

components/dialogs/BackpackDialog.vue

@@ -38,11 +38,23 @@
             <image class="currency-icon" src="/static/island/UI/wd_icon_xingyuan.png" mode="aspectFit"></image>
             <text>{{selectedItem ? selectedItem.price : 0}}</text>
           </view>
-          <view class="sell-btn" :class="{'disabled': !selectedItem}" @click="onSellClick">售卖</view>
+          <view class="sell-btn" :class="{'disabled': !selectedItem}" @click="showSellConfirm">售卖</view>
         </view>
       </view>
     </view>
+  <!-- 确认出售对话框 -->
+  <view class="confirm-dialog" v-if="showSellDialog">
+    <view class="dialog-content">
+      <view class="dialog-title">确认出售</view>
+      <view class="dialog-text">是否出售{{selectedItem ? selectedItem.count : 0}}个{{selectedItem ? selectedItem.name : ''}}，获得铃钱：{{selectedItem ? selectedItem.count * selectedItem.price : 0}}？</view>
+      <view class="dialog-buttons">
+        <view class="btn-cancel" @click="cancelSell">取消</view>
+        <view class="btn-confirm" @click="confirmSell">确认</view>
+      </view>
+    </view>
+  </view>
   </custom-dialog>
+
 </template>
 
 <script>
@@ -64,7 +76,8 @@ export default {
       dialogVisible: false,
       selectedIndex: -1,
       items: [],
-      loading: false
+      loading: false,
+      showSellDialog: false // 添加确认出售对话框显示状态
     }
   },
   computed: {
@@ -140,58 +153,59 @@ export default {
         this.$emit('select', this.items[index])
       }
     },
-    onSellClick() {
+    // 显示确认出售对话框
+    showSellConfirm() {
+      if(!this.selectedItem) return
+      this.showSellDialog = true
+    },
+    // 取消出售
+    cancelSell() {
+      this.showSellDialog = false
+    },
+    // 确认出售
+    confirmSell() {
       if(!this.selectedItem) return
       
       const item = this.selectedItem
-      const totalPrice = item.count * item.price
       
-      uni.showModal({
-        title: '确认出售',
-        content: `出售${item.count}个${item.name}，会获得铃钱：${totalPrice},\n确定出售吗？`,
-        confirmText: '确定',
-        cancelText: '取消',
+      uni.request({
+        url: this.$apiHost + '/Game/sell_bag_item',
+        method: 'POST',
+        data: {
+          uuid: getApp().globalData.uuid,
+          bag_id: item.id
+        },
+        header: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+          'sign': getApp().globalData.headerSign,
+        },
         success: (res) => {
-          if(res.confirm) {
-            uni.request({
-              url: this.$apiHost + '/Game/sell_bag_item',
-              method: 'POST',
-              data: {
-                uuid: getApp().globalData.uuid,
-                bag_id: item.id
-              },
-              header: {
-                'Content-Type': 'application/x-www-form-urlencoded',
-                'sign': getApp().globalData.headerSign,
-              },
-              success: (res) => {
-                if (res.data.code === 0) {
-                  uni.showToast({
-                    title: '出售成功',
-                    icon: 'success'
-                  })
-                  // 刷新背包列表
-                  this.fetchBagList()
-                  // 通知父组件更新铃钱
-                  this.$emit('money-change', res.data.data.money)
-                } else {
-                  uni.showToast({
-                    title: res.data.msg || '出售失败',
-                    icon: 'none'
-                  })
-                }
-              },
-              fail: (err) => {
-                console.error('出售失败:', err)
-                uni.showToast({
-                  title: '出售失败',
-                  icon: 'none'
-                })
-              }
+          if (res.data.code === 0) {
+            uni.showToast({
+              title: '出售成功',
+              icon: 'success'
+            })
+            // 刷新背包列表
+            this.fetchBagList()
+            // 通知父组件更新铃钱
+            this.$emit('money-change', res.data.data.money)
+          } else {
+            uni.showToast({
+              title: res.data.msg || '出售失败',
+              icon: 'none'
             })
           }
+        },
+        fail: (err) => {
+          console.error('出售失败:', err)
+          uni.showToast({
+            title: '出售失败',
+            icon: 'none'
+          })
         }
       })
+      
+      this.showSellDialog = false
     }
   }
 }
@@ -199,4 +213,82 @@ export default {
 
 <style lang="scss" scoped>
 @import './BackpackDialog.scss';
+
+// 添加确认对话框样式
+.confirm-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+
+  .dialog-content {
+    width: 500rpx;
+    background: #FDDEC1;
+    border-radius: 20rpx;
+    overflow: hidden;
+    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
+    border: 2rpx solid #d06262;
+
+    .dialog-title {
+      text-align: center;
+      color: #683830;
+      font-size: 34rpx;
+      font-weight: bold;
+      padding: 20rpx 0;
+      border-bottom: 0rpx solid #d06262;
+      position: relative;
+    }
+
+    .dialog-text {
+      padding: 40rpx 30rpx;
+      text-align: center;
+      font-size: 30rpx;
+      color: #987453;
+      border-radius: 0 0 12rpx 12rpx;
+      position: relative;
+    }
+
+    .dialog-buttons {
+      display: flex;
+      justify-content: space-around;
+      padding: 30rpx;
+
+      .btn-cancel,
+      .btn-confirm {
+        width: 180rpx;
+        height: 80rpx;
+        border-radius: 40rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 32rpx;
+        font-weight: bold;
+        width: 184rpx;
+        height: 80rpx;
+        background: url('/static/island/huatian/zx_btn_queren.png');
+        background-size: 184rpx 80rpx;
+      }
+
+      .btn-cancel {
+        color: white;
+        position: relative;
+        width: 184rpx;
+        height: 80rpx;
+        background: url('/static/island/huatian/zx_btn_quxiao.png');
+        background-size: 184rpx 80rpx;
+      }
+
+      .btn-confirm {
+        color: white;
+        position: relative;
+      }
+    }
+  }
+}
 </style>