国外MOSE官网
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.

323 lines
7.6 KiB

6 days ago
  1. <template>
  2. <view class="goods-detail">
  3. <!-- 轮播图 -->
  4. <view class="banner-container">
  5. <uv-swiper
  6. indicator
  7. indicatorMode="dot"
  8. indicatorActiveColor="blue"
  9. height="700rpx"
  10. :list="bannerImages"></uv-swiper>
  11. </view>
  12. <!-- 商品信息 -->
  13. <view class="goods-info">
  14. <!-- 积分信息 -->
  15. <view class="points-section">
  16. <image src="/static/积分图标.png" class="points-icon" mode="aspectFit"></image>
  17. <text class="points-text">{{ goodsData.points }}积分</text>
  18. </view>
  19. <!-- 商品标题 -->
  20. <view class="title-section">
  21. <text class="goods-title">{{ goodsData.name }}</text>
  22. </view>
  23. </view>
  24. <!-- 商品详情独立容器 -->
  25. <view class="detail-container">
  26. <!-- 商品详情标题 -->
  27. <view class="detail-title-section">
  28. <text class="detail-title">商品详情</text>
  29. </view>
  30. <!-- 商品图集 -->
  31. <view class="gallery-section">
  32. <view class="gallery-grid">
  33. <image
  34. v-for="(img, index) in goodsData.gallery"
  35. :key="index"
  36. :src="img"
  37. class="gallery-image"
  38. mode="aspectFill"
  39. @click="previewImage(img, goodsData.gallery)"
  40. ></image>
  41. </view>
  42. </view>
  43. </view>
  44. <!-- 底部操作栏 -->
  45. <view class="bottom-bar">
  46. <view class="stock-info">
  47. <text class="stock-text">{{ goodsData.stock }}/100</text>
  48. <text class="stock-label">库存</text>
  49. </view>
  50. <view class="favorite-section">
  51. <uv-icon name="heart" size="24" color="#cccccc"></uv-icon>
  52. <text class="favorite-text">收藏</text>
  53. </view>
  54. <view class="exchange-btn" @click="onExchange">
  55. <text class="exchange-text">申请兑换</text>
  56. </view>
  57. </view>
  58. </view>
  59. </template>
  60. <script>
  61. export default {
  62. name: 'GoodsDetail',
  63. data() {
  64. return {
  65. goodsId: '',
  66. goodsData: {
  67. id: 1,
  68. name: '哪吒之魔童闹海新款首套装哪吒校内艺术手办树脂摆件学生小礼品',
  69. points: 100,
  70. category: '积分兑换',
  71. exchangeCount: 120,
  72. stock: 50,
  73. description: '这是一款美味的薄脆小饼干,口感酥脆,营养丰富。采用优质原料制作,无添加剂,适合全家人享用。每一口都能感受到浓郁的香味和酥脆的口感,是您休闲时光的最佳选择。',
  74. gallery: [
  75. '/static/商城_商品1.png',
  76. '/static/商城_商品2.png',
  77. '/static/bannerImage.png',
  78. '/static/商城_商品1.png',
  79. '/static/商城_商品2.png',
  80. '/static/bannerImage.png'
  81. ]
  82. },
  83. bannerImages: [
  84. '/static/商城_商品1.png',
  85. '/static/商城_商品2.png',
  86. '/static/bannerImage.png'
  87. ]
  88. }
  89. },
  90. onLoad(options) {
  91. if (options.id) {
  92. this.goodsId = options.id;
  93. this.getGoodsDetail(options.id);
  94. }
  95. },
  96. methods: {
  97. getGoodsDetail(id) {
  98. // 模拟获取商品详情
  99. console.log('获取商品详情:', id);
  100. // 根据id设置不同的商品数据
  101. const goodsMap = {
  102. '1': {
  103. id: 1,
  104. name: '哪吒之魔童闹海新款首套装哪吒校内艺术手办树脂摆件学生小礼品',
  105. points: 100,
  106. category: '积分兑换',
  107. exchangeCount: 120,
  108. stock: 50,
  109. description: '这是一款美味的薄脆小饼干,口感酥脆,营养丰富。采用优质原料制作,无添加剂,适合全家人享用。',
  110. gallery: ['/static/商城_商品1.png', '/static/商城_商品2.png', '/static/bannerImage.png', '/static/商城_商品1.png', '/static/商城_商品2.png', '/static/bannerImage.png']
  111. },
  112. '2': {
  113. id: 2,
  114. name: '幼儿园宝宝启蒙书',
  115. points: 145,
  116. category: '母婴',
  117. exchangeCount: 85,
  118. stock: 30,
  119. description: '专为幼儿园宝宝设计的启蒙读物,内容丰富有趣,图文并茂,有助于培养孩子的阅读兴趣和认知能力。',
  120. gallery: ['/static/商城_商品2.png', '/static/商城_商品1.png', '/static/bannerImage.png', '/static/商城_商品2.png', '/static/商城_商品1.png', '/static/bannerImage.png']
  121. }
  122. };
  123. if (goodsMap[id]) {
  124. this.goodsData = goodsMap[id];
  125. this.bannerImages = goodsMap[id].gallery.slice(0, 3);
  126. }
  127. },
  128. previewImage(current, urls) {
  129. uni.previewImage({
  130. current: current,
  131. urls: urls
  132. });
  133. },
  134. onExchange() {
  135. uni.showModal({
  136. title: '确认兑换',
  137. content: `确定要用${this.goodsData.points}积分兑换${this.goodsData.name}吗?`,
  138. success: (res) => {
  139. if (res.confirm) {
  140. // 执行兑换逻辑
  141. uni.showToast({
  142. title: '兑换成功',
  143. icon: 'success'
  144. });
  145. // 延迟返回上一页
  146. setTimeout(() => {
  147. uni.navigateBack();
  148. }, 1500);
  149. }
  150. }
  151. });
  152. }
  153. }
  154. }
  155. </script>
  156. <style lang="scss" scoped>
  157. .goods-detail {
  158. background: #f8f8f8;
  159. min-height: 100vh;
  160. padding-bottom: 120rpx; // 为底部固定栏留出空间
  161. }
  162. .banner-container {
  163. height: 700rpx;
  164. .banner-swiper {
  165. width: 100%;
  166. .banner-image {
  167. width: 100%;
  168. height: 100%;
  169. }
  170. }
  171. }
  172. .goods-info {
  173. background: #ffffff;
  174. margin-top: 20rpx;
  175. padding: 30rpx;
  176. }
  177. .points-section {
  178. display: flex;
  179. align-items: center;
  180. margin-bottom: 20rpx;
  181. .points-icon {
  182. width: 32rpx;
  183. height: 32rpx;
  184. margin-right: 8rpx;
  185. }
  186. .points-text {
  187. font-size: 32rpx;
  188. font-weight: bold;
  189. color: #1488DB;
  190. }
  191. }
  192. .title-section {
  193. margin-bottom: 40rpx;
  194. .goods-title {
  195. font-size: 28rpx;
  196. color: #333333;
  197. line-height: 1.5;
  198. display: block;
  199. }
  200. }
  201. .detail-container {
  202. background: #ffffff;
  203. margin-top: 20rpx;
  204. padding: 30rpx;
  205. margin-bottom: 120rpx;
  206. }
  207. .detail-title-section {
  208. display: flex;
  209. align-items: center;
  210. justify-content: center;
  211. margin-bottom: 30rpx;
  212. .detail-title {
  213. font-size: 28rpx;
  214. font-weight: bold;
  215. color: #333333;
  216. }
  217. }
  218. .gallery-section {
  219. margin-bottom: 40rpx;
  220. .gallery-grid {
  221. display: grid;
  222. grid-template-columns: repeat(3, 1fr);
  223. gap: 16rpx;
  224. .gallery-image {
  225. width: 100%;
  226. height: 200rpx;
  227. border-radius: 12rpx;
  228. border: 1rpx solid #f0f0f0;
  229. }
  230. }
  231. }
  232. .bottom-bar {
  233. position: fixed;
  234. bottom: 0;
  235. left: 0;
  236. right: 0;
  237. background: #ffffff;
  238. padding: 20rpx 30rpx;
  239. border-top: 1rpx solid #f0f0f0;
  240. z-index: 999;
  241. box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
  242. display: flex;
  243. align-items: center;
  244. justify-content: space-between;
  245. .stock-info {
  246. display: flex;
  247. flex-direction: column;
  248. align-items: center;
  249. .stock-text {
  250. font-size: 24rpx;
  251. color: #1488DB;
  252. margin-bottom: 4rpx;
  253. font-weight: bold;
  254. }
  255. .stock-label {
  256. font-size: 22rpx;
  257. color: #999999;
  258. }
  259. }
  260. .favorite-section {
  261. flex: 1;
  262. display: flex;
  263. flex-direction: column;
  264. align-items: center;
  265. .favorite-text {
  266. font-size: 22rpx;
  267. color: #999999;
  268. margin-top: 4rpx;
  269. }
  270. }
  271. .exchange-btn {
  272. flex: 2;
  273. margin-left: 50rpx;
  274. height: 80rpx;
  275. border-radius: 40rpx;
  276. background-color: #1488DB;
  277. display: flex;
  278. align-items: center;
  279. justify-content: center;
  280. .exchange-text {
  281. color: #ffffff;
  282. font-size: 28rpx;
  283. // font-weight: bold;
  284. }
  285. }
  286. }
  287. </style>