初始化

components/SelectProductionMethod/SelectProductionMethod.vue

@@ -0,0 +1,93 @@
+<template>
+  <u-popup
+    style="position: absolute"
+    :show="isViewLetter"
+    @close="close"
+    :closeable="true"
+    mode="center"
+    customStyle="border-radius: 40rpx;"
+  >
+    <view class="content-main">
+      <view class="content-title"> 请选择制作方式 </view>
+      <view
+        class="content-item"
+        v-for="(item ,index) in productionType"
+        :key="item.id"
+      >
+        <view class="content-item-button" @click="$emit('selectPlan', item)">
+          {{ item.title }}
+        </view>
+        <view class="content-item-explain">
+          {{ item.explain }}
+          <text style="color: #ce7a2c" v-if="item.price">{{ item.price }}</text
+          >{{ item.price ? "元/次" : "" }}
+        </view>
+      </view>
+    </view>
+  </u-popup>
+</template>
+
+<script>
+export default {
+  name: "SelectProductionMethod",
+  created() {
+    this.productionType = this.$store.productionType;
+    console.log(this.productionType, "111111111111111");
+  },
+  data() {
+    return {
+      isViewLetter: true,
+      productionType: false,
+    };
+  },
+  methods: {
+    close() {
+      this.$emit("close");
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.content-main {
+  width: 600rpx;
+  height: 654rpx;
+  box-sizing: border-box;
+  padding: 30rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content-title {
+  width: 238rpx;
+  height: 45rpx;
+  font-size: 34rpx;
+  font-weight: bold;
+  margin-bottom: 30rpx;
+}
+
+.content-item-button {
+  margin-top: 40rpx;
+  flex: 1;
+  background: linear-gradient(to bottom right, #e8b648, #e08745);
+  height: 80rpx;
+  width: 500rpx;
+  font-size: 34rpx;
+  border-radius: 20rpx;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.content-item-explain {
+  width: 100%;
+  font-size: 26rpx;
+  font-family: OPPOSans Regular-Regular, OPPOSans Regular;
+  font-weight: 400;
+  color: #111111;
+  text-align: center;
+  margin-top: 10rpx;
+}
+</style>