productInfo.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. Page({
  2. data: {
  3. // 轮播图
  4. swiperItems: [
  5. 'http://i1.mifile.cn/f/i/2019/C76029A6/part6-2.jpg',
  6. 'http://i1.mifile.cn/f/i/2019/C76029A6/part6-2.jpg',
  7. 'http://i1.mifile.cn/f/i/2019/C76029A6/part6-2.jpg'
  8. ],
  9. // 切换导航
  10. navItems: ['商品详情', '相关评论'],
  11. active: 0,
  12. product: {
  13. name: "小米 MIX3 一面科技 一面艺术 ( 磁动力滑盖全面屏 | 故宫特别版 )",
  14. logo: "../../static/logo.png",
  15. price: 3188,
  16. priceMarket: 3200,
  17. imgs: [
  18. 'https://img30.360buyimg.com/sku/jfs/t21838/18/2275707529/311540/cba1d04c/5b4f155fNac3aa2f0.jpg',
  19. 'https://img30.360buyimg.com/sku/jfs/t22021/327/2281785192/48707/57806074/5b4f1579Nae7adb49.jpg',
  20. 'https://img30.360buyimg.com/sku/jfs/t21682/256/2344553276/204456/cf7a2ddb/5b4ffbbfN48c54307.jpg'
  21. ]
  22. },
  23. // 模拟评论数据 (实际项目来自api请求)
  24. commentContents: [
  25. {
  26. "content": "故国三千里,深宫二十年。一声何满子,双泪落君前。",
  27. "name": "graceUI - 小码",
  28. "face": "https://graceui.oss-cn-beijing.aliyuncs.com/faces/1.png",
  29. "date": "08/10 08:00"
  30. },
  31. {
  32. "content": "而今渐行渐远,渐觉虽悔难追。漫寄消寄息,终久奚为。也拟重论缱绻,争奈翻覆思维。纵再会,只恐恩情,难似当时。",
  33. "name": "路过繁华",
  34. "face": "https://graceui.oss-cn-beijing.aliyuncs.com/faces/2.png",
  35. "date": "02/10 18:00"
  36. },
  37. {
  38. "content": "图片回复,点击图片可以预览......",
  39. "name": "林夕阳",
  40. "imgs": [
  41. "https://graceui.oss-cn-beijing.aliyuncs.com/scollimgs/4.png",
  42. "https://graceui.oss-cn-beijing.aliyuncs.com/scollimgs/3.png",
  43. "https://graceui.oss-cn-beijing.aliyuncs.com/scollimgs/1.png",
  44. ],
  45. "face": "https://graceui.oss-cn-beijing.aliyuncs.com/faces/2.png",
  46. "date": "08/12 09:00"
  47. }
  48. ],
  49. // 购买选择属性层展示
  50. attrIsShow: false,
  51. colorTips: [
  52. { name: '灰色', value: '灰色', checked: true },
  53. { name: '银色', value: '银色', checked: false }
  54. ],
  55. colorSelected: "灰色",
  56. typeTips: [
  57. { name: '套餐一', value: '套餐一', checked: true },
  58. { name: '套餐二', value: '套餐二', checked: false },
  59. { name: '套餐三', value: '套餐三', checked: false }
  60. ],
  61. typeSelected: "套餐一",
  62. buyNum: 1
  63. },
  64. // 分享
  65. share: function () { wx.showToast({ title: '请自行完善分享代码', icon: "none" }); },
  66. // 导航切换
  67. navChange: function (e) {
  68. this.setData({ active: e.detail });
  69. },
  70. // 评论图片展示
  71. showImgs: function (e) {
  72. console.log(e);
  73. var commentsIndex = e.currentTarget.dataset.index1;
  74. var imgIndex = e.currentTarget.dataset.index2;
  75. wx.previewImage({
  76. urls: this.data.commentContents[commentsIndex].imgs,
  77. current: this.data.commentContents[commentsIndex].imgs[imgIndex]
  78. })
  79. },
  80. //打开属性视图
  81. buyNow: function () { this.setData({ attrIsShow: true }); },
  82. // 关闭属性
  83. closeAttr: function () { this.setData({ attrIsShow: false }); },
  84. // 颜色选择
  85. change1: function (e) { this.setData({ colorSelected: e.detail }); },
  86. // 类型选择
  87. change2: function (e) { this.setData({ typeSelected: e.detail }); },
  88. // 购买数量变化
  89. buyNumChange: function (e) {
  90. this.setData({ buyNum: e.detail[0] });
  91. },
  92. // 属性提交
  93. attrSubmit: function (e) {
  94. //后续操作
  95. wx.showToast({
  96. title: "属性已经收集,请观察控制台",
  97. icon: "none"
  98. });
  99. console.log("颜色 : " + this.data.colorSelected, "类型 : " + this.data.typeSelected, '数量 : ' + this.data.buyNum);
  100. //如果想关闭属性
  101. this.closeAttr();
  102. }
  103. })