3.0.1

src/pages/article/index.vue

@@ -0,0 +1,154 @@
+<template>
+  <view class="article">
+    <image class="header-bg" :src="url" />
+    <view class="content">
+      <h3 style="text-align:center; margin-bottom: 20rpx" >{{ title }}</h3>
+      <rich-text :nodes="content" />
+    </view>
+    <view class="list">
+      <view class="title" v-if="tableData.length > 0">全部评论</view>
+      <view v-for="item in tableData" :key="item.commentId" style="margin-bottom: 48rpx">
+        <view flex between>
+          <view flex center>
+            <img class="avatar" :src="item.userAvatar" />
+            <view style="opacity: 0.7; margin-left: 20rpx">
+              <view style="fontSize: 26rpx">{{ item.userName }}</view>
+              <view style="fontSize: 22rpx">{{ item.createTime }}</view>
+            </view>
+          </view>
+          <view flex center style="opacity: 0.7">
+            <uni-icons type="hand-up" size="20" color="#FFF" />
+            <view>{{ item.likeNum }}</view>
+          </view>
+        </view>
+        <view class="item-content">
+          <view style="fontSize:28rpx">
+            {{ item.content }}
+          </view>
+          <view class="sub-content" v-if="item.replyList.length > 0">
+            <view v-for="i in item.replyList.slice(0, 2)" :key="i.replyId" style="margin-bottom: 10rpx">
+              <view v-if="i.replyType === 0">
+                <span style="color:#A4D099">
+                  {{ i.fromUserName }}：
+                </span>{{ i.content }}
+              </view>
+              <view v-else>
+                <span style="color:#A4D099">
+                  {{ i.fromUserName }}</span>回复
+                <span style="color:#A4D099">
+                  {{ i.toUserName }}：</span>
+                {{ i.content }}
+              </view>
+            </view>
+            <view v-if="item.replyList.length > 2" style="color:#A4D099">共{{ item.replyTotal }}条回复 ></view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { detail, list } from '@/api/article.js'
+export default {
+  data() {
+    return {
+      // 表单
+      form: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      // 背景图
+      url: '',
+      // 标题
+      title: '',
+      // 内容
+      content: '',
+      // 列表
+      tableData: [],
+      // 是否还有下一页
+      hasMore: false,
+      // 只触发一次
+      only: true
+    }
+  },
+  onLoad(e) {
+    if (e) {
+      this.form.articleId = e.articleId
+      detail({
+        articleId: e.articleId
+      }).then(res => {
+        if (res.data.code === 0) {
+          this.url = res.data.data.pic
+          this.title = res.data.data.title
+          this.content = res.data.data.content
+        }
+      })
+      this.getList()
+    }
+  },
+  // 页面触底
+  onReachBottom() {
+    if (this.hasMore) {
+      this.form.pageNum++
+      this.getList()
+    } else {
+      if (this.only) {
+        uni.showToast({
+          icon: 'none',
+          title: '暂无更多评论'
+        })
+        this.only = false
+      }
+    }
+  },
+  methods: {
+    getList() {
+      list(this.form).then(res => {
+        if (res.data.code === 0) {
+          res.data.data.records.map(i => {
+            this.tableData.push(i)
+          })
+          this.hasMore = res.data.data.hasMore
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header-bg {
+  width: 100%;
+}
+
+.content {
+  padding: 48rpx 32rpx;
+}
+
+.title {
+  margin-bottom: 32rpx;
+}
+
+.list {
+  padding: 32rpx;
+}
+
+.avatar {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+}
+
+.item-content {
+  margin-left: 100rpx;
+  margin-top: 22rpx;
+}
+
+.sub-content {
+  background: #232323;
+  padding: 16rpx;
+  font-size: 26rpx;
+  margin-top: 10rpx;
+}
+</style>

src/pages/lottery/detail.vue

@@ -0,0 +1,190 @@
+<template>
+  <view class="app-container">
+    <view class="nav" :style="{'padding-top': statusBarHeight + 'px'}">
+      <uni-icons type="back" style="font-size: 48rpx" @click="getBack" />
+      <text class="title">积分抽奖</text>
+    </view>
+    <uni-forms class="form" ref="form" :modelValue="form" :rules="rules" label-width="100px"
+      label-position="top" validateTrigger="bind">
+      <view class="tips">请检查您的信息填写正确，确认后无法更改哦</view>
+      <uni-forms-item label="收货人：" name="receiveName" required>
+        <input type="text" v-model="form.receiveName" placeholder="请输入收货人姓名" />
+      </uni-forms-item>
+      <uni-forms-item label="手机号：" name="receivePhone" required>
+        <input type="number" v-model="form.receivePhone" placeholder="请输入手机号" />
+      </uni-forms-item>
+      <uni-forms-item label="收货地址：" name="receiveAddress" required>
+        <textarea v-model="form.receiveAddress" placeholder="请输入收货地址" />
+      </uni-forms-item>
+      <button @click="getSubmit" :disabled="disabled">确认</button>
+    </uni-forms>
+  </view>
+</template>
+
+<script>
+import { receive } from '@/api/lottery.js'
+export default {
+  data() {
+    return {
+      // 状态栏
+      statusBarHeight: getApp().globalData.statusBarHeight,
+      // 表单
+      form: {},
+      // 防重复点击
+      disabled: false,
+      // 校验
+      rules: {
+        receiveName: {
+          rules: [{
+            required: true, errorMessage: '请输入收货人姓名'
+          }]
+        },
+        receivePhone: {
+          rules: [{
+            required: true, errorMessage: '请输入手机号'
+          }, {
+            pattern: /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/, errorMessage: '请输入正确的手机号'
+          }]
+        },
+        receiveAddress: {
+          rules: [{
+            required: true, errorMessage: '请输入收货地址'
+          }]
+        }
+      }
+    }
+  },
+  onLoad(e) {
+    this.form = {
+      prizeId: e.prizeId,
+      lotteryCode: decodeURIComponent(e.lotteryCode)
+    }
+  },
+  methods: {
+    // 返回
+    getBack() {
+      uni.redirectTo({
+        url: `/pages/lottery/index`
+      })
+    },
+
+    // 确定
+    getSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (!valid) {
+          this.disabled = true
+          receive(getApp().globalData.userInfo, this.form).then(res => {
+            if (res.data.code === 0) {
+              uni.showToast({
+                title: '提交成功！',
+                duration: 3000
+              })
+              setTimeout(() => {
+                this.getBack()
+              }, 3000)
+            } else {
+              uni.showToast({
+                icon: 'error',
+                title: res.data.message,
+              })
+              this.disabled = false
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  position: relative;
+  background: url('@/static/lottery/bg-1.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 100%;
+  color: #000;
+  padding: 0 32rpx 32rpx;
+
+  .nav {
+    height: 88rpx;
+    display: flex;
+    align-items: center;
+    color: #333333;
+    font-weight: 600;
+    font-size: 36rpx;
+    position: relative;
+    box-sizing: content-box;
+
+    .title {
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%);
+    }
+  }
+
+  .tips {
+    color: #999;
+    font-size: 24rpx;
+    margin-bottom: 32rpx;
+  }
+
+  .form {
+    margin-top: 32rpx;
+    height: 1122rpx;
+    background: #fff;
+    border-radius: 32rpx;
+    padding: 32rpx;
+    position: relative;
+
+    .tips {
+      color: #999;
+      font-size: 24rpx;
+      text-align: center;
+    }
+
+    .form-item {
+      margin: 32rpx 0 0 0;
+    }
+
+    ::v-deep .uni-forms-item__label {
+      font-size: 32rpx;
+      font-weight: bold;
+      padding: 0;
+    }
+
+    input {
+      border-radius: 16rpx;
+      height: 88rpx;
+      line-height: 88rpx;
+      color: #333333;
+      margin: 0;
+    }
+
+    uni-textarea {
+      border-radius: 16rpx;
+      margin: 0;
+    }
+
+    ::v-deep .input-placeholder, .textarea-placeholder{
+      opacity: 0.6;
+    }
+
+    button {
+      background: linear-gradient(180deg, #72cdae 0%, #599f82 100%);
+      color: #fff;
+      width: 480rpx;
+      height: 80rpx;
+      line-height: 80rpx;
+      border-radius: 50rpx;
+      font-size: 32rpx;
+      position: absolute;
+      left: 50%;
+      bottom: 60rpx;
+      transform: translate(-50%);
+    }
+  }
+}
+</style>

src/pages/lottery/index.vue

@@ -0,0 +1,324 @@
+<template>
+  <view class="app-container">
+    <view class="nav" :style="{'padding-top': statusBarHeight + 'px'}">
+      <uni-icons type="back" style="font-size: 48rpx" @click="close" />
+      <text class="title">积分抽奖</text>
+    </view>
+
+    <!-- 每次消耗多少积分 -->
+    <view class="every">{{lotteryConsumePoint}}积分/次</view>
+
+    <!-- 转盘 -->
+    <LuckyWheel class="lucky" ref="lucky" width="568rpx" height="568rpx" :prizes="prizes" :buttons="buttons"
+      :defaultStyle="defaultStyle" @start="startCallBack" @end="endCallBack" />
+
+    <!-- 剩余抽奖次数和积分 -->
+    <view class="tips">
+      <view>今日剩余抽奖机会：{{ hasLotteryCount }}</view>
+      <view>可用积分：{{ maySignPoint }}</view>
+    </view>
+
+    <!-- 活动规则 -->
+    <view class="rules">
+      <view class="title">活动规则</view>
+      <view v-for="(item, index) in rule" :key="index">{{ item }}</view>
+    </view>
+
+    <!-- 弹窗 -->
+    <uni-popup ref="popup" type="center" :is-mask-click="false">
+      <view v-if="this.hasLotteryCount <= 0" class="popup" style="justify-content: space-around">
+        <view style="fontSize: 36rpx">
+          <view>很遗憾！</view>
+          <view>今日抽奖次数已用光</view>
+        </view>
+        <img src="../../static/lottery/noChance.png" />
+      </view>
+      <view v-else class="popup">
+        <view style="fontSize: 36rpx">{{ form.resultGoodName }}</view>
+        <img :src="form.resultGoodPic" />
+        <button v-if="form.resultGoodType === 4" @click="getSubmit">领取</button>
+        <button v-if="form.resultGoodType === 5" @click="getAgain">再抽一次</button>
+        <button v-if="form.resultGoodType === 3" @click="getDetail">填写收货信息</button>
+      </view>
+      <uni-icons class="close" type="close" size="45" color="#FFF" @click="closePopup" />
+    </uni-popup>
+  </view>
+</template>
+
+<script>
+import { page, result, receive } from '@/api/lottery.js'
+import LuckyWheel from '@lucky-canvas/uni/lucky-wheel'
+export default {
+  components: {
+    LuckyWheel
+  },
+  data() {
+    return {
+      // 状态栏
+      statusBarHeight: getApp().globalData.statusBarHeight,
+      // 转盘
+      prizes: [],
+      buttons: [{
+        radius: '45%',
+        background: '#ffffff40',
+        imgs: [{
+          src: '../../static/lottery/btn.png',
+          top: '-75px',
+          width: '96px',
+          height: '124px'
+        }]
+      }],
+      defaultStyle: {
+        fontSize: '26rpx'
+      },
+      // 可用积分
+      maySignPoint: 0,
+      // 每次消耗积分
+      lotteryConsumePoint: 0,
+      // 今日剩余抽奖机会
+      hasLotteryCount: 0,
+      // 活动规则
+      rule: '',
+      // 表单
+      form: {},
+      // 防止连点
+      disabled: true
+    }
+  },
+  onLoad() {
+    this.getList()
+    console.log(getApp());
+  },
+  methods: {
+    // 获取页面信息
+    getList() {
+      this.prizes = []
+      page(getApp().globalData.userInfo).then(res => {
+        if (res.data.code === 0) {
+          const j = res.data.data
+          // 可用积分
+          this.maySignPoint = j.maySignPoint
+          // 每次消耗积分
+          this.lotteryConsumePoint = j.lotteryConsumePoint
+          // 今日剩余抽奖机会
+          this.hasLotteryCount = j.hasLotteryCount
+          // 奖品列表
+          j.userLotteryDatas.map(i => {
+            this.prizes.push({
+              background: i.sort % 2 === 0 ? '#fff7a6' : '#9cc6a5',
+              fonts: [{
+                text: i.name,
+                fontColor: i.sort % 2 === 0 ? '#ff8831' : '#fff',
+                top: '10%'
+              }],
+              imgs: [{
+                src: i.pic,
+                top: '30%',
+                width: '108rpx',
+                height: '108rpx'
+              }]
+            })
+          })
+          // 活动规则
+          this.rule = j.rule.split('\n')
+        }
+      })
+    },
+
+    close() {
+      closePage.postMessage('关闭页面')
+    },
+
+    // 点击抽奖按钮触发回调
+    startCallBack() {
+      if (this.hasLotteryCount > 0) {
+        if (this.maySignPoint >= this.lotteryConsumePoint) {
+          if (this.disabled) {
+            this.$refs.lucky.play()
+            this.disabled = false
+            result(getApp().globalData.userInfo).then(res => {
+              if (res.data.code === 0) {
+                setTimeout(() => {
+                  this.$refs.lucky.stop(res.data.data.resultGoodSort - 1)
+                  this.form = res.data.data
+                }, 3000)
+              } else {
+                this.$refs.lucky.stop()
+                uni.showToast({
+                  icon: 'error',
+                  title: res.data.message
+                })
+              }
+            })
+          }
+        } else {
+          uni.showToast({
+            icon: 'error',
+            title: '可用积分不足'
+          })
+        }
+      } else {
+        this.$refs.popup.open()
+      }
+    },
+    // 抽奖结束触发回调
+    endCallBack() {
+      this.$nextTick(() => {
+        this.$refs.popup.open()
+        this.disabled = true
+        this.getList()
+      })
+    },
+
+    // 再抽一次
+    getAgain() {
+      this.$refs.popup.close()
+      this.startCallBack()
+    },
+
+    // 领取
+    getSubmit() {
+      if (this.disabled) {
+        this.disabled = false
+        receive(getApp().globalData.userInfo, {
+          prizeId: this.form.resultGoodId,
+          lotteryCode: this.form.lotteryCode
+        }).then(res => {
+          if (res.data.code === 0) {
+            this.$refs.popup.close()
+            this.getList()
+            setTimeout(() => {
+              this.disabled = true
+              uni.showToast({
+                title: '领取成功，已累积到积分中！'
+              })
+            }, 500)
+          }
+        })
+      }
+    },
+
+    // 填写收货信息
+    getDetail() {
+      uni.redirectTo({
+        url: `/pages/lottery/detail?prizeId=${this.form.resultGoodId}&lotteryCode=` + encodeURIComponent(this.form.lotteryCode)
+      })
+    },
+
+    // 关闭弹窗
+    closePopup() {
+      this.$refs.popup.close()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  position: relative;
+  background: url('@/static/lottery/bg.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 1880rpx;
+  padding: 0 32rpx 32rpx;
+
+  .nav {
+    height: 88rpx;
+    display: flex;
+    align-items: center;
+    color: #333333;
+    font-weight: bold;
+    font-size: 36rpx;
+    position: relative;
+    box-sizing: content-box;
+
+    .title {
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%);
+    }
+  }
+
+  .every {
+    position: absolute;
+    left: 50%;
+    top: 380rpx;
+    transform: translate(-50%);
+    color: #1a5509;
+    font-weight: bold;
+  }
+
+  .lucky {
+    position: absolute;
+    top: 496rpx;
+    left: 50%;
+    transform: translate(-50%);
+  }
+
+  .tips {
+    position: absolute;
+    top: 62%;
+    left: 50%;
+    transform: translate(-50%);
+    text-align: center;
+    line-height: 50rpx;
+  }
+
+  .rules {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 40rpx;
+    color: #192b24;
+    padding: 0 64rpx;
+    font-size: 28rpx;
+    font-weight: bold;
+
+    .title {
+      font-weight: bold;
+      font-size: 38rpx;
+      text-align: center;
+      margin-bottom: 32rpx;
+    }
+    view {
+      margin-bottom: 20rpx;
+    }
+  }
+
+  .popup {
+    width: 576rpx;
+    height: 600rpx;
+    background: #fff;
+    border-radius: 32rpx;
+    color: #000;
+    font-weight: bold;
+    text-align: center;
+    padding: 48rpx 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+
+    img {
+      width: 328rpx;
+    }
+
+    button {
+      background: linear-gradient(180deg, #72cdae 0%, #599f82 100%);
+      color: #fff;
+      width: 320rpx;
+      height: 80rpx;
+      line-height: 80rpx;
+      border-radius: 50rpx;
+      font-size: 32rpx;
+    }
+  }
+  .close {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%);
+    margin-top: 20rpx;
+  }
+}
+</style>