VAVABUY/pages/shop/components/valueAddedModel.vue

<template>
  <Popup ref="popRef" isClose :title="result?.title">
    <template #content>
      <view class="content">
        <image :src="`/static/shop/${result?.img}`" class="img" mode="widthFix"></image>
        <view class="tips_title">
          <trans _t="服务说明" />
        </view>
        <view class="tis_cont">
          <trans :_t="result?.cont" />
        </view>
      </view>
    </template>
    <template #footer>
      <view class="submit_btn" @click="close">
        <trans _t="我知道了" />
      </view>
    </template>
  </Popup>
</template>

<script setup>
import { ref } from 'vue'
import Popup from '@/components/popup.vue';
import { t } from "@/locale"

const popRef = ref(null);

const emit = defineEmits(['open', 'close'])
const moduleList = [
  { channel: 0, title: '易碎品加固', cont: '_yspjg_desc', img: 'add-ys.png' },
  { channel: 1, title: '标准质检', cont: '_bzzj_desc', img: 'add-bz.png' },
  { channel: 2, title: '优先采购', cont: '_yxdg_desc', img: 'add-cg.png' },
  { channel: 3, title: '个性化拍照', cont: '_gxhpz_desc', img: 'add-pz.png' }
]
const result = ref(null);
const open = (type = 0) => {
  result.value = moduleList.find(item => item.channel === type);
  popRef.value && popRef.value.open()
}

const close = () => {
  emit('close')
  popRef.value && popRef.value.close()
}



defineExpose({ open, close })
</script>

<style lang="less" scoped>
@import url('@/style.less');

:deep(.conts) {
  min-width: 65vw;
}

.content {
  width: 100%;

  .img {
    display: block;
    width: 100%;
  }

  .tips_title {
    font-size: 32rpx;
    color: var(--black);
    font-weight: 700;
    line-height: 60rpx;
    margin-top: 30rpx;
  }

  .tis_cont {
    font-size: 28rpx;
    color: var(--text);
    line-height: 40rpx;
    margin-top: 20rpx;
    padding: 0 30rpx;
    text-align: left;
  }
}

.submit_btn {
  height: 76rpx;
  padding: 16rpx 30rpx;
  background-color: var(--black);
  color: var(--light);
  .flex_center();
  border-radius: 16rpx;
  .size(24rpx);
}
</style>