xk-client-wx/subPackages/my/my-drug/drug-info.vue

<template>
  <view class="container safe-area-inset-bottom">
    <MessageNotification />
    <!-- 物流提示信息 -->
    <view class="order-text-tip" v-if="orderText">
      <text>{{ orderText }}</text>
    </view>

    <view class="head_cancle" v-if="orderInfo.ProductOrder.status!=0  && orderInfo.ProductOrder.cancel_status==1">
      订单已取消
    </view>
    <!-- 快递——自提 -->
    <view class="_choose"
          v-if="orderInfo.ProductOrder.status==0&&orderInfo.ProductOrder.is_pay==0 && orderInfo.ProductOrder.cancel_status==0">
      <text>配送方式</text>
      <view class="_fs" @click="toShowed">
        <text>{{orderInfo.ProductOrder.delivery_method==0&&'快递到家'||orderInfo.ProductOrder.delivery_method==1&&'到店自取'}}</text>
        <text class="iconfont icon-jiantou1"></text>
        <u-action-sheet :list="list" v-model="toshowed" :tips="tips" border-radius="24"
                        :safe-area-inset-bottom="true" @click="chooseway"></u-action-sheet>
      </view>
    </view>
    <!-- 收货地址 已添加地址 -->
    <view class="head" v-if="isshow&&orderInfo.ProductOrder.status==0" @click="toChoose">
      <view class="state">
        <text>收货地址</text>
        <view class="qh">
          <view class="iconfont icon-jiantou1"></view>
        </view>
      </view>
      <view class="name" @click="toChoose" v-if="!orderInfo.ProductOrder.address">
        请先选择收货地址
      </view>
      <view class="name" @click="toChoose" v-if="orderInfo.ProductOrder.address">
        {{JSON.parse(orderInfo.ProductOrder.address).name || '请先选择收货地址'}}
        {{JSON.parse(orderInfo.ProductOrder.address).mobile || ''}}
      </view>
      <view class="choose_area" v-if="orderInfo.ProductOrder.address">
        {{JSON.parse(orderInfo.ProductOrder.address).region || ''}}{{JSON.parse(orderInfo.ProductOrder.address).detail_address || ''}}
      </view>
    </view>

    <!-- 到店自取 -->
    <view class="head" v-if="isshowed">
      <view class="state">
        <text>到店自取</text>
      </view>
      <view class="name">
        {{infoList.store.name}}
        {{infoList.store.mobile}}
      </view>
      <view class="choose_area">
        {{infoList.store.position}}
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="card">
      <!-- 门店 -->
      <view class="store"><text class="iconfont icon-mendian"></text>{{infoList.store.name}}</view>

      <!-- granular -->
      <view class="list"
            v-if="orderInfo.ProductOrder.prescription_type==1||orderInfo.ProductOrder.prescription_type==3">
        <view class="it_" v-for="(item,index) in orderInfo.ProductOrderItems" :key="item.id">
          <view class="it_name">{{item.drug_name}}
            <text class="it_num" style="margin-left: 8rpx;">x{{item.number}}</text>
          </view>
        </view>
      </view>

      <view class="list_west" v-if="orderInfo.ProductOrder.prescription_type==2||orderInfo.ProductOrder.prescription_type==5||orderInfo.ProductOrder.prescription_type==7">
        <view class="list" v-for="(item,index) in orderInfo.ProductOrderItems" :key="item.id" @click.stop="goDrugDetail(item)">
          <view class="img">
            <image :src="item.drug_image || 'https://xiaokang88.oss-cn-hangzhou.aliyuncs.com/xk-client-wx/static/empty/gwc.png'" mode=""></image>
          </view>
          <view class="it">
            <view class="it_name">
              <text>{{ item.drug_name }}</text>
              <text
                v-if="item.drug && item.drug.specification"
                class="drug-spec">{{ item.drug.specification }}</text>
              <text v-if="item.drug && item.drug.function && canShowFunction(item.drug, prescriptionStatus)">{{ item.drug.function }}</text>
            </view>
            <view class="it_info" v-if="orderInfo.ProductOrder.prescription_type==2 && item.drug && canShowUsage(item.drug, prescriptionStatus)">
              {{ item.drug.usage }}
            </view>
            <!-- 添加查看说明书按钮 -->
            <view class="instruction-btn" v-if="canShowInstruction(item.drug, prescriptionStatus) && item.drug && item.drug.instruction" @click.stop="previewInstruction(item.drug.instruction)">
              <text>查看说明书</text>
            </view>
            <view class="it_price">
              <text>￥{{item.price}}</text>
              <view class="it_num">
                x{{item.number}}
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 数量 -->
      <view class="goods">
        <view class="good_">
          <text>商品总价（包含服务费）</text>
          <text class="price">￥{{orderInfo.ProductOrder.items_price}}</text>
        </view>
        <view class="good_">
          <text>快递费</text>
          <text class="price">￥{{orderInfo.ProductOrder.trans_expenses}}</text>
        </view>
        <view class="good_">
          <text>诊疗费</text>
          <text class="price">￥{{orderInfo.ProductOrder.treatement_price}}</text>
        </view>
        <view class="good_">
          <text>加工费</text>
          <view class="price"><text
              v-if="payWay">共{{payWay.dosage}}剂</text>￥{{orderInfo.ProductOrder.process_price}}</view>
        </view>
        <view class="good_">
          <text>总金额</text>
          <view class="total">
            合计:
            <text class="price">￥{{orderInfo.ProductOrder.total_pay_price}}</text>
          </view>
        </view>
        <view class="good_" v-if="orderInfo.ProductOrder&&orderInfo.ProductOrder.pay_time!='0'">
          <text>支付时间</text>
          <view class="price">
            <text class="price">{{orderInfo.ProductOrder.pay_time | formatDate}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 代煎服务提醒 -->
    <view class="umode">
      <u-modal v-model="openshow" title="服务提示" :content="content" @confirm="confirm" @cancel="cancel"
               :content-style="{color:'#666666',fontSize: '28rpx'}"
               :title-style="{color:'#111000',fontWeight: '540',fontSize: '33rpx'}" :show-title="true"
               :show-cancel-button="true" confirm-text="我需要" cancel-text="不需要" cancel-color="#F44336"
               confirm-color="#536DFE"></u-modal>
    </view>

    <!-- 物流提示模态框 -->
    <view class="umode">
      <u-modal
          v-model="showOrderTextModal"
          title="温馨提示"
          :content="modalContent"
          :confirm-text="modalConfirmText"
          :cancel-text="modalCancelText"
          :show-cancel-button="showCancelButton"
          :confirm-color="modalConfirmColor"
          :cancel-color="modalCancelColor"
          @confirm="handleOrderTextConfirm"
          @cancel="handleOrderTextCancel"
          :content-style="modalContentStyle"
          :title-style="modalTitleStyle"
      ></u-modal>
    </view>

    <!-- 底部  -->
    <view class="footer"
          v-if="orderInfo.ProductOrder.status==0 && orderInfo.ProductOrder.is_pay==0 && orderInfo.ProductOrder.cancel_status==0">
      <button class="to_pay" @click="toPay">立即支付</button>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import {
  getaddressList,
  getDelivery,
  getPayConfig,
  getOrdDetail,
  getUpdateUseWay,
  getUseWayPay,
  storeInfo,
} from '../../../request/api/api'

// 导入 getOrderTextApi 接口方法
import { getOrderTextApi } from '../../../request/api/product'
// 导入订单相关接口
import { getPrescriptionStatusApi } from '../../../request/api/order'
import { canShowFunction, canShowUsage, canShowInstruction, isPrescriptionApprovedStatus } from '@/common/utils/drug'

export default {
  data() {
    return {
      isshow: true,
      isshowed: false,
      show: false,
      form: {
        check: false
      },
      orderInfo: {
        ProductOrder: {}
      }, // 订单
      chinese: [],
      west: [],
      granular: [],
      actionList: [],
      order_id: "", // 订单id
      order_no: "", // 订单编号
      p_id: "", // 处方id
      orderType: 0, // 处方id
      originalList: [{
        text: '快递到家'
      }, {
        text: '到店自取'
      }],
      list: [{
        text: '快递到家'
      }, {
        text: '到店自取'
      }],
      is_online: 0, // 是否在线复诊 0-否 非0-是
      toshowed: false,
      tips: {
        text: '配送方式',
        color: '#111111',
        fontSize: 38
      },
      wayText: "快递到家",
      delivery_method: 0, // 快递方式 0 快递   1 自提
      content: '', // 弹窗内容
      openshow: false, // 弹窗是否展示
      is_decoct: 1, // 代煎服务  1确定代煎  0不代煎
      infoList: [], // 门店信息
      payWay: "",
      flag: true,
      timer: '',
      // 新增：物流提示信息
      orderText: '本次商品物流配送，由萧康医药提供服务。',
      // 新增：物流提示模态框控制
      showOrderTextModal: false,
      // 新增：模态框配置
      modalContent: '',
      modalConfirmText: '我知道了',
      modalCancelText: '取消支付',
      showCancelButton: true,
      modalConfirmColor: '#536DFE',
      modalCancelColor: '#F44336',
      modalContentStyle: {
        color: '#666666',
        fontSize: '28rpx',
        maxHeight: '300rpx',
        overflow: 'auto'
      },
      modalTitleStyle: {
        color: '#111000',
        fontWeight: '540',
        fontSize: '33rpx'
      },
      // 处方状态
      prescriptionStatus: null,
    }
  },
  onLoad(e) {
    this.p_id = e.id
    this.orderType = e.order_type
    // 获取订单提示文本
    this.getOrderText();
  },
  methods: {
    canShowFunction,
    canShowUsage,
    canShowInstruction,
    goDrugDetail(item) {
      const drugId = item.drug_id || (item.drug && item.drug.id);
      if (!drugId) return;
      const orderStoreId = (this.orderInfo.ProductOrder && this.orderInfo.ProductOrder.store_id)
        || uni.getStorageSync('store_id')
        || '11001';
      const q = [
        `id=${encodeURIComponent(drugId)}`,
        `store_id=${encodeURIComponent(orderStoreId)}`,
        `order_id=${encodeURIComponent(this.order_id || '')}`,
        `drug_name=${encodeURIComponent(item.drug_name || '')}`,
        `image=${encodeURIComponent(item.drug_image || '')}`,
        `price=${encodeURIComponent(item.price || '')}`,
      ].join('&');
      uni.navigateTo({
        url: `/subPackages/product/symptoms?${q}`,
      });
    },
    // 获取订单提示文本
    getOrderText() {
      getOrderTextApi().then((res) => {
        if (res.data && res.data.result) {
          this.orderText = res.data.result;
          // 设置模态框内容
          this.modalContent = `${res.data.result}\n\n请在确认以上信息后继续支付。`;
        }
      }).catch(err => {
        console.error('获取订单提示失败:', err);
      })
    },
    // 不需要代煎-代煎费
    cancel() {
      this.openshow = false;
      this.is_decoct = 0
      this.getUpuseWay()
    },
    // 需要代煎
    confirm() {
      this.is_decoct = 1
      this.getUpuseWay()
    },
    // 物流提示确认 - 用户选择"我知道了"
    handleOrderTextConfirm() {
      this.showOrderTextModal = false;
      // 用户点击"我知道了"后，继续执行支付
      this.doPay();
    },
    // 物流提示取消 - 用户选择"取消支付"
    handleOrderTextCancel() {
      this.showOrderTextModal = false;
      // 用户选择取消支付，显示提示信息
      uni.showToast({
        title: '您已取消支付',
        icon: 'none',
        duration: 2000
      });
      // 可选：跳转到其他页面或执行其他操作
      // uni.navigateBack({
      // 	delta: 1
      // });
    },
    // 更新代煎服务
    getUpuseWay() {
      getUpdateUseWay({
        method: "post",
        data: {
          is_decoct: this.is_decoct,
          order_id: this.order_id,
          store_id: uni.getStorageSync('store_id') || '11001'
        }
      }).then((res) => {
        if (res.data.errcode == 0) {
          this.getInfo()
        }
      })
    },
    toShowed() {
      this.toshowed = true
    },
    chooseway(index) {
      // 如果选择到店自取（index == 1），检查 is_online
      if (index == 1 && this.is_online != 0) {
        // 阻止选择并提示
        this.$refs.uToast.show({
          title: '在线复诊订单不支持到店自取，请选择收货地址',
          type: 'default',
          icon: false
        })
        return
      }
      
      // 先调用接口更新，成功后再更新页面状态
      if (index == 1) {
        // 到店自取：先调用接口，成功后再更新页面
        this.toUpdata(index)
      } else {
        // 快递到家：跳转到地址选择页面
        this.isshowed = false
        this.isshow = true
        this.toChoose()
      }
    },
    // 更新配送方式
    toUpdata(deliveryMethodIndex) {
      if (!this.order_id) return
      
      // 如果传入了参数，使用传入的值，否则使用当前的 delivery_method
      const targetDeliveryMethod = deliveryMethodIndex !== undefined ? deliveryMethodIndex : this.delivery_method
      
      getDelivery({
        method: "post",
        data: {
          address_id: uni.getStorageSync('address_id'),
          delivery_method: targetDeliveryMethod,
          order_id: this.order_id,
          store_id: uni.getStorageSync('store_id') || '11001'
        }
      }).then((res) => {
        if (res.data.errcode === 0) {
          // 接口成功后再更新页面状态
          if (deliveryMethodIndex !== undefined) {
            this.delivery_method = deliveryMethodIndex
            if (deliveryMethodIndex == 1) {
              this.isshowed = true
              this.isshow = false
            } else {
              this.isshowed = false
              this.isshow = true
            }
          }
          // 刷新订单信息
          this.getInfo()
        } else {
          // 错误处理：拒绝更新并显示错误信息，不更新页面状态
          this.$refs.uToast.show({
            title: res.data.msg || '更新失败',
            type: 'default',
            icon: false
          })
        }
      })
    },
    // 门店信息（仅在需要时调用，不会覆盖处方来源诊所信息）
    getStoreInfo() {
      // 如果已经有处方来源诊所信息，不覆盖
      if (this.infoList && this.infoList.store && this.infoList.store.id) {
        return
      }
      storeInfo({
        method: "post",
        data: {
          store_id: uni.getStorageSync('store_id') || '11001',
        }
      }).then((res) => {
        if (res.data.errcode == 0) {
          // 只有在没有处方来源诊所信息时才设置
          if (!this.infoList || !this.infoList.store || !this.infoList.store.id) {
            this.infoList = res.data.data
          }
        }
      })
    },
    toForm() {
      this.form['check'] = !this.form['check']
    },

    // 产品信息
    getInfo() {
      let list = {
        store_id: uni.getStorageSync('store_id') || '11001',
        order_id: this.p_id
      }
      getOrdDetail({
        method: "post",
        data: list
      }).then((res) => {
        if (res.data.errcode == 0) {
          this.orderInfo = res.data.data
          this.order_id = res.data.data.ProductOrder.id
          uni.setStorageSync('userWay_order_id', res.data.data.ProductOrder.id)
          uni.setStorageSync('delivery_method', res.data.data.ProductOrder.delivery_method)

          // 使用API返回的处方来源诊所信息（优先使用处方来源诊所）
          if (res.data.data.store && res.data.data.store.store) {
            this.infoList = {
              store: res.data.data.store.store
            }
          } else {
            // 如果没有处方来源诊所信息，使用当前诊所信息作为后备
            if (!this.infoList || !this.infoList.store) {
              this.getStoreInfo()
            }
          }

          // 检查 is_online 字段，动态控制 list 数组
          if (res.data.data.ProductOrder && res.data.data.ProductOrder.is_online !== undefined) {
            this.is_online = res.data.data.ProductOrder.is_online
          } else if (res.data.data.is_online !== undefined) {
            this.is_online = res.data.data.is_online
          }
          
          // 如果 is_online !== 0，则不显示到店自取选项
          if (this.is_online != 0) {
            this.list = [{
              text: '快递到家'
            }]
          } else {
            // 如果 is_online === 0，显示所有选项
            this.list = [...this.originalList]
          }

          // 根据返回的订单数据更新页面状态（配送方式）
          if (res.data.data.ProductOrder && res.data.data.ProductOrder.delivery_method !== undefined) {
            const deliveryMethod = res.data.data.ProductOrder.delivery_method
            this.delivery_method = deliveryMethod
            if (deliveryMethod == 1) {
              this.isshowed = true
              this.isshow = false
            } else {
              this.isshowed = false
              this.isshow = true
            }
          }
          
          // 查询处方状态
          this.getPrescriptionStatus()
        }
      })
    },
    // 代煎费
    getServe() {
      getUseWayPay({
        method: "post",
        data: {
          order_id: uni.getStorageSync('userWay_order_id'),
          store_id: uni.getStorageSync('store_id') || '11001'
        }
      }).then((res) => {
        if (res.data.errcode == 0) {
          if (this.timer) {
            clearTimeout(this.timer);
            this.timer = null;
          }
          this.payWay = res.data.data
          this.content =
              `平台可以为您提供有偿代煎服务（${this.payWay.decoct_price}元/剂）您的处方共${this.payWay.dosage}剂， 费用${this.payWay.total_decoct_price}元。 您是否需要？`
        } else {
          if (this.timer) {
            clearTimeout(this.timer);
            this.timer = null;
          }
        }
      })
    },
    // 地址列表
    getList() {
      getaddressList({
        method: "post",
        data: {
          store_id: uni.getStorageSync('store_id') || '11001',
        }
      }).then((res) => {
        if (res.data.errcode == 0) {
          this.actionList = res.data.data
        }
      })

      this.toUpdata()
    },
    // 地址
    toChoose() {
      uni.navigateTo({
        url: '/subPackages/setup/area-list?id=' + this.p_id + '&order_id=' + this.order_id
      })
    },

    // 支付
    toPay() {
      if (this.form['check']) {
        uni.showToast({
          icon: "error",
          title: '请勾选协议'
        })
        return
      }

      // 先显示物流提示模态框
      this.showOrderTextModal = true;
    },

    // 实际支付逻辑
    doPay() {
      let that = this
      if (this.flag) {
        this.flag = false
        getPayConfig({
          method: "post",
          data: {
            order_id: this.order_id,
            store_id: uni.getStorageSync('store_id') || '11001',
          }
        }).then((res) => {
          console.log(res.data.data.timeStamp, 'pay');
          uni.showLoading({
            title: "加载中"
          });

          if (res.data.errcode == 0) {
            if (!res.data.data.appId) {
              setTimeout(() => {
                that.flag = false
                uni.navigateTo({
                  url: '/subPackages/my/my-drug/drug-list'
                })
                uni.hideLoading();
              }, 300)
              return;
            }

            uni.requestPayment({
              provider: res.data.data.appId,
              timeStamp: res.data.data.timestamp,
              nonceStr: res.data.data.nonceStr,
              package: res.data.data.package,
              signType: res.data.data.signType,
              paySign: res.data.data.paySign,
              success: (res) => {
                console.log('success:' + JSON.stringify(res));
                setTimeout(() => {
                  that.flag = false
                  uni.navigateTo({
                    url: '/subPackages/my/my-drug/drug-list'
                  })
                  uni.hideLoading();
                }, 300)
              },
              fail: function(err) {
                that.flag = true
                console.log('fail:' + JSON.stringify(err));
                uni.hideLoading();
                uni.showToast({
                  title: err.errMsg && err.errMsg.indexOf('cancel') !== -1 ? '支付已取消' : '支付失败',
                  duration: 1500,
                  mask: false,
                  icon: 'none'
                })
              }
            })
          } else {
            uni.hideLoading();
            that.flag = true
            this.$refs.uToast.show({
              title: res.data.msg,
              type: 'default',
              icon: false
            })
          }

        }).catch((err) => {
          console.error('getPayConfig error:', err);
          uni.hideLoading();
          that.flag = true
          uni.showToast({
            title: '获取支付配置失败',
            icon: 'none',
            duration: 1500
          })
        })

      }
    },
    // 查询处方状态
    getPrescriptionStatus() {
      if (!this.order_id) {
        return;
      }
      getPrescriptionStatusApi({
        order_id: this.order_id
      }).then((res) => {
        if (res.data && (res.data.code == 0 || res.data.errcode == 0)) {
          const data = res.data.data || res.data.result || {};
          this.prescriptionStatus = isPrescriptionApprovedStatus(data);
        } else {
          this.prescriptionStatus = false;
        }
      }).catch(() => {
        this.prescriptionStatus = false;
      });
    },
    // 预览说明书
    previewInstruction(instructionImage) {
      if (instructionImage) {
        uni.previewImage({
          urls: [instructionImage],
          current: instructionImage
        });
      }
    }
  },
  mounted() {
    // 不在mounted中调用getStoreInfo，等getInfo返回后再决定是否调用
    const order_id = uni.getStorageSync('userWay_order_id')
    const delivery_method = uni.getStorageSync('delivery_method')
    if (delivery_method == 1) {
      this.isshowed = true
      this.isshow = false
    } else {
      this.isshowed = false
      this.isshow = true
    }
  },
  onShow() {
    this.getInfo()
    this.getList()
  },
  onUnload() {
    uni.removeStorageSync('userWay_order_id')
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 750rpx;
  max-height: 100%;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  background: #F5F5F5;

  /* 新增：物流提示样式 */
  .order-text-tip {
    background: #e6f3ff;
    padding: 20rpx 30rpx;
    margin: 20rpx 20rpx 0 20rpx;
    border-radius: 8rpx;
    font-size: 26rpx;
    color: #1890ff;
    line-height: 1.4;
    border-left: 6rpx solid #1890ff;
  }

  .head_cancle {
    padding: 20rpx 42rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #222;
  }

  .agreen {
    padding: 60rpx 50rpx 20rpx;
    // color: #6C7380;
    // letter-spacing: 2rpx;

    .top {
      margin: 0 0 20rpx 0;
      font-family: PingFang SC-Regular, PingFang SC;
      text-align: center;
      font-size: 32rpx;
      font-weight: 500;
      color: #222;
    }
  }

  .umode {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #232323;
    text-align: center;

    text {
      font-size: 24rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }
  }

  .p_state {
    width: 750rpx;
    height: 160rpx;
    background: #536DFE;
    margin: 20rpx auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40rpx;

    .state {
      font-family: PingFang SC-Bold, PingFang SC;
      display: flex;
      flex-direction: column;

      text {
        font-size: 36rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
      }

      .notice {
        font-size: 24rpx;
        font-weight: 400;
        margin-top: 12rpx;
      }
    }

    .iconfont {
      font-size: 52rpx;
      color: #fff;
    }
  }

  ._choose {
    width: 750rpx;
    height: 88rpx;
    margin: 0rpx auto;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40rpx;

    ._fs {
      display: flex;
      align-items: center;

      .iconfont {
        font-size: 32rpx;
        margin-left: 16rpx;
        color: #222333;
      }
    }
  }

  .head {
    width: 750rpx;
    height: 168rpx;
    margin: 20rpx auto;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 40rpx;

    .state {
      font-size: 28rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #232323;
      line-height: 0rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      text {
        display: inline-block;
        width: 116rpx;
        height: 38rpx;
        line-height: 38rpx;
        text-align: center;
        background: #536DFE;
        border-radius: 30rpx 30rpx 30rpx 30rpx;
        font-size: 20rpx;
        color: #FFFFFF;
        margin-right: 14rpx;
      }

      .qh {
        display: flex;
        align-items: center;

        .iconfont {
          font-size: 28rpx;
          margin-left: 16rpx;
        }
      }
    }

    .name {
      font-size: 28rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #232323;
      margin: 10rpx 0;
    }

    .choose_area {
      font-size: 24rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #232323;
    }
  }

  .card {
    width: 750rpx;
    margin: 0 auto;
    padding: 20rpx 12rpx 0rpx 20rpx;
    background: #FFFFFF;

    .store {
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 500;
      color: #232323;
      margin-left: 20rpx;
      padding: 10rpx 0;

      .iconfont {
        font-size: 39rpx;
        color: #666666;
        vertical-align: middle;
        margin-right: 10rpx;
      }

    }

    .list_west {

      .list {
        display: flex;
        justify-content: space-around;
        width: 100%;
        padding: 32rpx;
        display: flex;
        align-items: center;

        .img {
          width: 200rpx;
          height: 200rpx;
          margin-right: 10rpx;

          image {
            width: 200rpx;
            height: 200rpx;
            border-radius: 8rpx;
          }
        }

        .it {
          flex: 1;
          padding: 16rpx 10rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          margin: 10rpx;

          .it_name {
            font-weight: bold;
            color: #232323;
            margin-bottom: 10rpx;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            overflow: hidden;
            margin-bottom: 20rpx;

            .drug-spec {
              font-size: 24rpx;
              color: #999;
              margin-left: 10rpx;
              font-weight: normal;
            }
          }

          .it_info {
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            overflow: hidden;
            margin-bottom: 20rpx;
          }

          .instruction-btn {
            margin-top: 16rpx;
            margin-bottom: 16rpx;
            padding: 12rpx 24rpx;
            background: #ECF5FF;
            border-radius: 8rpx;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            
            text {
              font-size: 26rpx;
              color: #2B85E4;
            }
            
            &:active {
              opacity: 0.7;
            }
          }

          .it_price {
            display: flex;
            align-items: center;
            justify-content: space-between;

            text {
              font-size: 28rpx;
              font-weight: bold;
              color: #232323;
            }
          }

        }
      }

    }

    .list {
      width: 100%;
      padding: 12rpx 12rpx;
      display: flex;
      flex-wrap: wrap;


      .it_ {
        width: 30%;
        padding: 16rpx 10rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        margin: 0 10rpx 10rpx 0;

        .it_name {
          font-weight: bold;
          color: #232323;
          margin-bottom: 10rpx;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          overflow: hidden;
          padding-left: 5rpx;
        }

        .it_price {
          display: flex;
          align-items: center;
          justify-content: space-between;

          text {
            font-size: 28rpx;
            font-weight: bold;
            color: #999999;
          }
        }

        .it_num {
          color: #999999;
        }
      }
    }

    .goods {
      margin-top: 20rpx;
      padding: 0 30rpx 10rpx;
      margin-bottom: 140rpx;

      .good_ {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 88rpx;

        text {
          font-size: 28rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #232323;
        }

        .total {
          font-size: 26rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;

          .price {
            font-size: 34rpx;
            font-weight: 500;
          }
        }

        .price {
          font-size: 28rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
        }
      }
    }
  }

  .infos {
    width: 750rpx;
    margin: 20rpx auto 160rpx;
    padding: 20rpx 32rpx;
    background: #FFFFFF;


    .title {
      height: 44rpx;
      font-size: 32rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #232323;
      line-height: 44rpx;
    }

    ._info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 18rpx 0;

      text {
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
      }

      .info {
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #232323;
      }
    }
  }

  .footer {
    width: 750rpx;
    height: 114rpx;
    position: fixed;
    left: 0;
    bottom: env(safe-area-inset-bottom);
    display: flex;
    align-items: center;
    padding: 0rpx 24rpx;
    font-size: 28rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;

    .to_pay {
      width: 690rpx;
      height: 84rpx;
      line-height: 84rpx;
      background: #536DFE;
      border-radius: 64rpx;
      color: #FFFFFF;
      text-align: center;
    }
  }

}
</style>