front-end/ghsApp/src/admin/picText/purchaseGuide.vue

<template>
  <view class="form-container">
    <!-- 状态开关部分 -->
    <view class="form-section">
      <view class="form-item">
        <text class="form-label">状态</text>
        <view class="form-control">
          <text class="status-text">{{ status ? '开启' : '关闭' }}</text>
          <switch 
            :checked="status" 
            @change="onStatusChange"
            color="#07c160"
            class="status-switch"
          />
        </view>
      </view>
    </view>

    <view class="form-section">
      <view class="form-item textarea-item">
        <text class="form-label">公告标题</text>
        <button class="admin-button-com middle blue" style="float: right;" @click="purchaseGuideText=''">清空</button>
      </view>
      <view class="textarea-wrapper">
        <textarea 
          v-model="purchaseGuideText"
          class="textarea-input"
          placeholder="请输入标题，不超过70个字，留空会显示一张图片"
          :placeholder-style="{ color: '#999999' }"
          :maxlength="500"
        />
        <view class="char-count">{{ purchaseGuideText.length }}/70</view>
      </view>
    </view>

    <view class="form-section">
      <view class="form-item" @click="showPicker">
        <text class="form-label">公告详情</text>
        <view class="form-control">
          <text class="select-text">{{ selectedValue || '请选图文' }}</text>
          <text class="arrow">></text>
        </view>
      </view>
    </view>

    <view class="button-section">
      <button class="btn btn-cancel" @click="onCancel">返回</button>
      <button class="btn btn-submit" @click="onSubmit">提交</button>
    </view>
  </view>
</template>

<script>
import { getShopPurchaseGuide, switchPurchaseGuide } from '@/api/pic-text';
export default {
  name: 'PurchaseGuide',
  data() {
    return {
        purchaseGuideData: {},
        status: true, // 状态开关，默认开启
        selectedValue: '', // 选中的值
        saveSelectedValue: '', // 保存选中的值
        selectedId: 0, // 选中的id
        formData: {},
        purchaseGuideText: '' // 公告内容
    }
  },
  onShow() {
    uni.$on('updatePurchaseGuideEvent', this.updateSelectedItem);
  },
  onUnload() {
    uni.$off('updatePurchaseGuideEvent', this.updateSelectedItem);
  },
  methods: {
    init(){
        getShopPurchaseGuide().then(res => {
            this.purchaseGuideData = res.data.shopExt;
            this.status = res.data.shop && res.data.shop.buyNotice == 1 ? true : false;
            this.purchaseGuideText = res.data.shopExt && res.data.shopExt.purchaseGuideText ? res.data.shopExt.purchaseGuideText : ''
            // 根据 purchaseGuide 和 title 设置选中值
            if (this.purchaseGuideData.purchaseGuide !== "0" && this.purchaseGuideData.title) {
                this.selectedValue = `${this.purchaseGuideData.title} (id: ${this.purchaseGuideData.purchaseGuide})`;
                this.saveSelectedValue = this.selectedValue;
                this.selectedId = this.purchaseGuideData.purchaseGuide; // purchaseGuide 保存的是表picText 的自增Id
            } else {
                this.selectedValue = '';
                this.selectedId = 0;
            }
        })
    },
    // 状态开关变化
    onStatusChange(e) {
      this.status = e.detail.value
      if (this.status) {
        this.selectedValue = this.saveSelectedValue;
      } else {
        this.selectedValue = '...';
      }
    },
    // 显示选择器
    showPicker() {
      uni.navigateTo({ url: `/admin/picText/picTextList?selectedId=${this.selectedId}` })
    },
    // 取消按钮
    onCancel() {
      uni.navigateBack();
    },
    // 提交按钮
    onSubmit() {
      const formData = { picTextId: this.selectedId, switch: this.status ? 1 : 0, purchaseGuideText:this.purchaseGuideText }
      uni.showLoading()
      switchPurchaseGuide(formData).then(res => {
        uni.hideLoading();
        if(res.code == 1){
          uni.showToast({ title: '提交成功', icon: 'success' })
          setTimeout(() => {
            uni.navigateBack()
          }, 1500);
        } else {
          this.$msg(res.msg)
        }
      })
    },
    updateSelectedItem(data) {
      // 更新选中项显示
      if (data && data.picTextId && data.title) {
        this.selectedValue = `${data.title} (ID: ${data.picTextId})`;
        this.saveSelectedValue = this.selectedValue;
        this.selectedId = data.picTextId;
      } else if (data && data.title) {
        this.selectedValue = data.title;
        this.saveSelectedValue = this.selectedValue;
        this.selectedId = data.picTextId || 0;
      } else {
        this.selectedValue = '';
        this.saveSelectedValue = '';
        this.selectedId = 0;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.form-container {
  background-color: #ffffff;
  min-height: 100vh;
  padding: 0 30rpx;
}

.form-section {
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-of-type {
    border-bottom: none;
  }
}

.form-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  min-height: 88rpx;
}

.form-label {
  font-size: 32rpx;
  color: #333333;
  font-weight: 400;
}

.form-control {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.status-text {
  font-size: 32rpx;
  color: #333333;
}

.status-switch {
  transform: scale(0.8);
}

.select-text {
  font-size: 32rpx;
  color: #333333;
  max-width: 430rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.arrow {
  font-size: 32rpx;
  color: #999999;
  margin-left: 4rpx;
}

.textarea-item {
  min-height: auto;
  padding: 30rpx 0 20rpx 0;
}

.textarea-wrapper {
  position: relative;
  padding: 0 0 30rpx 0;
}

.textarea-input {
  width: 100%;
  height: 200rpx;
  padding: 20rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333333;
  box-sizing: border-box;
  line-height: 1.5;
}

.char-count {
  position: absolute;
  bottom: 40rpx;
  right: 20rpx;
  font-size: 24rpx;
  color: #999999;
}

.button-section {
  display: flex;
  gap: 30rpx;
  margin-top: 60rpx;
  padding: 0 20rpx;
}

.btn {
  flex: 1;
  height: 88rpx;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-cancel {
  background-color: #ffffff;
  color: #666666;
  border: 2rpx solid #e0e0e0;
}

.btn-submit {
  background-color: #007aff;
  color: #ffffff;
  border: none;
}
</style>