寺庙公众号开发:vue实现超度排位功能的前端

废话不多说,我们先看一下完成的效果

所有的代码在这里

<template>
  <div class="all">
    <div class="one" v-show="one">
      <img src="/static/img/cd1.png" class="img" />
      <img src="/static/img/cd2.png" class="img" />
      <img src="/static/img/cd3.png" class="img" />
      <img src="/static/img/cd4.png" class="img" />
      <img src="/static/img/cd5.png" class="img" />
      <img src="/static/img/cd6.png" class="img" />
      <img src="/static/img/cd7.png" class="img" />
      <button class="btn" @click="drawer = true">供奉超度牌位</button>
      <!-- 牌位的大小 -->
      <el-drawer
        title="请选择"
        class="fonts"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose"
      >
        <!-- 选项 -->
        <el-radio-group v-model="radio1">
          <el-radio-button label="小超度牌位（一年）">
            <el-row :gutter="20">
              <el-col :span="6">
                <img src="/static/img/chaodu.png" style="width:6vh;height:6vh" />
              </el-col>
              <el-col :span="12">
                <span class="fonts">小超度牌位（一年）</span>
              </el-col>
              <el-col :span="6">
                <span class="fonts">200元</span>
              </el-col>
            </el-row>
          </el-radio-button>
          <el-radio-button label="大超度牌位(一年)">
            <el-row :gutter="20">
              <el-col :span="6">
                <img src="/static/img/chaodu.png" style="width:6vh;height:6vh" />
              </el-col>
              <el-col :span="12">
                <span class="fonts">大超度牌位(一年)</span>
              </el-col>
              <el-col :span="6">
                <span class="fonts">500元</span>
              </el-col>
            </el-row>
          </el-radio-button>
        </el-radio-group>
        <!-- 选项 -->
        <button class="btn" @click="nexttip()">下一步</button>
      </el-drawer>
    </div>
    <!-- 牌位的大小 -->

    <!-- 祈福的图 -->
    <div class="qifu" v-show="twopart">
      <div v-show="dt">
        <!-- 底图 -->
        <div class="gray">
          <div class="tablet-tips">
            <img src="/static/img/tablet-tips.png" />
            <img src="/static/img/tablet-tips.png" />
          </div>
          <!-- 编辑按钮 -->
          <div class="icon">
            <img class="left-tips" src="/static/img/edit.png" @click="showk(0)" />
            <img class="right-tips" src="/static/img/edit.png" @click="showk(1)" />
          </div>
          <!-- 操作按钮 -->
          <!-- 操作按钮 -->
        </div>
        <!-- 显示结果的地方 -->
        <div class="xy">阳上{{xyinput}}</div>
        <div class="gd">{{gdinput}}</div>
        <!-- 显示结果的地方 -->
              <!-- 手机号码 -->
      <div  class="telldiv">
           <span style="font-size:18px;">{{radio1}}</span>
           <br>
        <input placeholder="请输入姓名" v-model="name" class="ip"/>
        <br>
        <input placeholder="请输入手机号码" v-model="tell" class="ip"/>
        <br>
         <input placeholder="我的心愿" v-model="love" class="ip"/>
        <br>
      </div>
      <!-- 手机号码 -->
        <div class="operate-bar">
          <div class="back-btn" style="background-color:#fbdb79" @click="returns()">返回</div>
          <div class="back-btn">合计￥500</div>
          <div class="next-btn">付款</div>
        </div>
      </div>
      <!-- 底图 -->

      <!-- 编辑按钮 -->
      <!-- 输入文本的地方 -->
      <div class="txt" v-show="gongde">
        <img src="/static/img/cartoon.png" style="width:50vh;height:23vh" />
        <span style="font-size:20px;">往生者</span>
        <br />
        <el-input v-model="gdinput" placeholder="请输入往生者姓名" style="width:30vh"></el-input>
        <div>
          <el-button round @click="exits(0)">取消</el-button>
          <el-button type="warning" round @click="exits(2)">确定</el-button>
        </div>
      </div>

      <div class="txt" v-show="xinyuan">
        <img src="/static/img/cartoon.png" style="width:50vh;height:23vh" />
        <span style="font-size:20px;">阳上人</span>
        <br />
        <el-input v-model="xyinput" placeholder="请输入阳上人名称" style="width:30vh"></el-input>
        <div>
          <el-button round @click="exits(1)">取消</el-button>
          <el-button type="warning" round @click="exits(3)">确定</el-button>
        </div>
      </div>
      <!-- 输入文本的地方 -->
    </div>
    <!--祈福的图  -->
  </div>
</template>
<script>
export default {
  name: "fash",
  data() {
    return {
      drawer: false,
      direction: "btt",
      radio1: "小超度牌位（一年）",
      one: true,
      gongde: false,
      xinyuan: false,
      gdinput: "",
      xyinput: "",
      love:'',
      twopart: false,
      dt: true,
      name: "",
      tell: ""
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    exits: function(i) {
      this.dt = true;
      if (i == 0) {
        this.gongde = false;
        this.gdinput = "";
      } else if (i == 1) {
        this.xinyuan = false;
        this.xyinput = "";
      } else if (i == 2) {
        this.gongde = false;
      } else if (i == 3) {
        this.xinyuan = false;
      }
    },
    returns:function(){
     this.one = true;
     this.twopart=false;
    },
    showk: function(i) {
      this.dt = false;
      if (i == 0) {
        this.xinyuan = true;
      } else {
        this.gongde = true;
      }
    },
    nexttip: function() {
      this.drawer=false;
      this.one = false;
      this.twopart = true;
    }
  },
  mounted() {}
};
</script>
<style scoped>
.ip{
    height:4vh;
}
.telldiv {
  width: 100%;
  height: 32vh;
  background-color: #fa8b68;
}
.xy {
  writing-mode: vertical-lr;
  font-size: 16px;
  width: 3vh;
  height: 20vh;
  position: absolute;
  top: 45vh;
  left: 13vh;
}
.gd {
  writing-mode: vertical-lr;
  font-size: 16px;
  position: absolute;
  top: 43vh;
  left: 27vh;
  width: 3vh;
  height: 20vh;
}
.txt {
  background-color: azure;
  width: 100%;
  height: 46vh;
  margin-top: 0%;
}
.right-tips {
  margin-left: 13vh;
}
.icon {
  position: absolute;
  left: 12vh;
  top: 40vh;
}
.tablet-tips {
  position: absolute;
  top: 22vh;
  left: 9vh;
}
.back-btn {
  width: 25%;
  background-color: #8e95ae;
  height: 6vh;
  padding-top: 2vh;
}
.next-btn {
  flex: 1 1;
  background-color: #b27053;
  height: 6vh;
  padding-top: 2vh;
}
.operate-bar {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  font-size: 16px;
}
.gray {
  background-image: url("/static/img/salvation-bg.png");
  background-size: 100% 100%;
  width: 100%;
  height: 90vh;
}

.btn {
  width: 100%;
  height: 48px;
  background-color: #aa6040;
  color: #fff;
  font-size: 25px;
}
.im {
  width: 100%;
  height: 33vh;
}
.all {
  width: 100%;
  height: 100vh;
}
.fonts {
  font-size: 16px;
}
</style>

至于图片素材部分,在这个网站上有,另存为就可以了

https://client.tmp.heychen.cn/?shopId=pkdQZ5vZA&timestamp=1589245238#/homepage