裂变星小程序-25.03.04
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

316 lines
6.2 KiB

1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
  1. <template>
  2. <view class="page">
  3. <navbar title="分享记录" />
  4. <view class="content">
  5. <view class="card" style="padding-left: 0; padding-right: 10rpx;">
  6. <uv-tabs :list="tabs"
  7. :inactiveStyle="{
  8. color: '#999999',
  9. fontSize: '30rpx',
  10. fontWeight: 500,
  11. whiteSpace: 'nowrap',
  12. }"
  13. :activeStyle="{
  14. color: '#1B1B1B',
  15. fontSize: '38rpx',
  16. fontWeight: 900,
  17. whiteSpace: 'nowrap',
  18. }"
  19. lineHeight="13rpx"
  20. lineWidth="77rpx"
  21. :lineColor="`url('../../static/image/record/slider.png') 100% 100%`"
  22. :scrollable="false"
  23. @click="clickTabs"
  24. >
  25. <template v-slot:right>
  26. <suspendDropdown
  27. v-model="queryParams.auditStatus"
  28. :options="auditStatusOptions"
  29. @change="onAuditStatusChange"
  30. ></suspendDropdown>
  31. </template>
  32. </uv-tabs>
  33. </view>
  34. <view v-if="recordList.records.length > 0" class="card list">
  35. <view class="list-item"
  36. v-for="item in recordList.records"
  37. @click="toSharingDetail(item.id)"
  38. :key="item.id"
  39. >
  40. // todo: video?
  41. <image class="left" :src="item.imageUrl"></image>
  42. <view class="right">
  43. <view class="title">{{ item.title }}</view>
  44. <view class="desc">{{ item.description }}</view>
  45. <view class="bottom">
  46. <text class="desc">{{ item.createTime }}</text>
  47. <button plain class="btn-simple btn-delete flex" @click="onDelete(item.id)">
  48. <image src="../../static/image/record/delete.png" style="width: 24rpx; height: 24rpx;"></image>
  49. <text style="margin-left: 10rpx;">删除</text>
  50. </button>
  51. </view>
  52. <view class="mark">
  53. <image
  54. :src="auditStatusImgMapping[item.auditStatus]"
  55. style="width: 100rpx; height: 100rpx;"
  56. ></image>
  57. </view>
  58. </view>
  59. </view>
  60. </view>
  61. </view>
  62. <tabber select="record"/>
  63. </view>
  64. </template>
  65. <script>
  66. import tabber from '@/components/base/tabbar.vue'
  67. import suspendDropdown from '@/components/base/suspendDropdown.vue'
  68. import { mapGetters } from 'vuex'
  69. const URL_MAPPING = { // state -> url
  70. '-1': '/pages_order/record/personalSharing',
  71. '0': '/pages_order/record/videoSharing',
  72. '1': '/pages_order/record/groupSharing',
  73. '2': '/pages_order/record/articleSharing',
  74. }
  75. export default {
  76. components : {
  77. tabber,
  78. suspendDropdown,
  79. },
  80. computed : {
  81. ...mapGetters(['userShop']),
  82. },
  83. data() {
  84. return {
  85. tabs: [{
  86. name: '个人分享'
  87. },
  88. {
  89. name: '视频分享'
  90. },
  91. {
  92. name: '群分享'
  93. },
  94. {
  95. name: '文章分享'
  96. },
  97. ],
  98. auditStatusOptions: [
  99. {
  100. label: '审核中',
  101. value: 0,
  102. },
  103. {
  104. label: '已通过',
  105. value: 1,
  106. },
  107. {
  108. label: '未通过',
  109. value: 2,
  110. },
  111. ],
  112. queryParams: {
  113. pageNo: 1,
  114. pageSize: 10,
  115. auditStatus: null,
  116. },
  117. recordList: {
  118. records: [
  119. {
  120. id: '001',
  121. imageUrl: '../../static/image/record/temp.png',
  122. times: 10,
  123. qrCode: null,
  124. title: '裂变星轻松获客',
  125. description: '如此好用的赚钱项目,赶快加入吧!',
  126. auditStatus: 0,
  127. createTime: '2025年2月1日',
  128. },
  129. {
  130. id: '002',
  131. imageUrl: '../../static/image/record/temp.png',
  132. times: 10,
  133. qrCode: null,
  134. title: '裂变星轻松获客',
  135. description: '如此好用的赚钱项目,赶快加入吧!',
  136. auditStatus: 1,
  137. createTime: '2025年2月1日',
  138. },
  139. {
  140. id: '003',
  141. imageUrl: '../../static/image/record/temp.png',
  142. times: 10,
  143. qrCode: null,
  144. title: '裂变星轻松获客',
  145. description: '如此好用的赚钱项目,赶快加入吧!',
  146. auditStatus: 2,
  147. createTime: '2025年2月1日',
  148. },
  149. ]
  150. },
  151. // recordList : { // 列表数据
  152. // records : [],
  153. // total : 0,
  154. // },
  155. state : -1,
  156. auditStatusImgMapping: {
  157. 0: '../../static/image/record/audit.png', // 审核中
  158. 1: '../../static/image/record/pass.png', // 已通过
  159. 2: '../../static/image/record/fail.png', // 未通过
  160. }
  161. }
  162. },
  163. onShow() {
  164. this.orderPage()
  165. },
  166. //滚动到屏幕底部
  167. onReachBottom() {
  168. if(this.queryParams.pageSize < this.recordList.total){
  169. this.queryParams.pageSize += 10
  170. this.orderPage()
  171. }
  172. },
  173. methods: {
  174. orderPage(){
  175. // todo
  176. return
  177. let queryParams = {
  178. ...this.queryParams,
  179. }
  180. if(this.state != -1){
  181. queryParams.state = this.state
  182. }
  183. this.$api('orderPage', queryParams, res => {
  184. if(res.code == 200){
  185. this.recordList = res.result
  186. }
  187. })
  188. },
  189. //点击tab栏
  190. clickTabs(index) {
  191. if (index == 0) {
  192. this.state = -1;
  193. } else {
  194. this.state = index - 1;
  195. }
  196. this.queryParams.pageSize = 10
  197. this.orderPage()
  198. },
  199. onAuditStatusChange(auditStatus) {
  200. // todo
  201. // fetch list
  202. },
  203. //跳转分享详情页面
  204. toSharingDetail(id) {
  205. uni.navigateTo({
  206. url: `${URL_MAPPING[this.state]}?id=${id}`
  207. })
  208. },
  209. onDelete(id) {
  210. // todo
  211. },
  212. }
  213. }
  214. </script>
  215. <style scoped lang="scss">
  216. .page{
  217. }
  218. .content {
  219. padding: 20rpx;
  220. }
  221. .list {
  222. margin-top: 20rpx;
  223. padding: 40rpx 59rpx 40rpx 43rpx;
  224. &-item {
  225. font-size: 0;
  226. display: flex;
  227. & + & {
  228. margin-top: 40rpx;
  229. }
  230. .left {
  231. width: 220rpx;
  232. height: 148rpx;
  233. background-color: yellow;
  234. }
  235. .right {
  236. flex: 1;
  237. width: calc(100% - 220rpx);
  238. padding-left: 20rpx;
  239. box-sizing: border-box;
  240. position: relative;
  241. }
  242. }
  243. .title {
  244. color: #1B1B1B;
  245. font-size: 28rpx;
  246. }
  247. .desc {
  248. color: #999999;
  249. font-size: 24rpx;
  250. white-space: nowrap;
  251. text-overflow: ellipsis;
  252. text-align: left;
  253. }
  254. .title + .desc {
  255. margin-top: 18rpx;
  256. }
  257. .bottom {
  258. position: absolute;
  259. bottom: 0;
  260. width: calc(100% - 20rpx);
  261. }
  262. .btn-delete {
  263. float: right;
  264. color: #05D9A2;
  265. font-size: 20rpx;
  266. }
  267. .mark {
  268. position: absolute;
  269. top: 10rpx;
  270. right: 5rpx;
  271. }
  272. }
  273. .popup {
  274. &-options {
  275. box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  276. padding: 16rpx 40rpx;
  277. }
  278. &-option {
  279. color: #999999;
  280. font-size: 28rpx;
  281. &.is-active {
  282. color: #1B1B1B;
  283. font-weight: 700;
  284. }
  285. & + & {
  286. margin-top: 16rpx;
  287. }
  288. }
  289. }
  290. </style>