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.

330 lines
7.6 KiB

1 month ago
  1. <template>
  2. <view class="container">
  3. <view class="details-container">
  4. <uni-swiper-dot class="uni-swiper-dot-box" field="content">
  5. <swiper style="height: 245px;" indicator-dots indicator-color="rgba(255, 255, 255, 0.50)"
  6. indicator-active-color="#ffffff" autoplay interval="3000">
  7. <swiper-item class="swiper-box" v-for="(item,index) in slideshow" :key="index">
  8. <img :src="item"
  9. style="width: 100%; height:100%" />
  10. </swiper-item class="swiper-box">
  11. </swiper>
  12. </uni-swiper-dot>
  13. <view class="details-price">
  14. <view class="details-price1">
  15. <view class="details-price-normal">
  16. <text class="details-price-big">{{detailInfo.price}}.00</text>
  17. <text>{{detailInfo.unit}}</text>
  18. </view>
  19. <button open-type="share" @click="sharePage" class="share-btn">
  20. <img src="../../static/images/details/share.svg" style="width: 14px;height: 14px; margin-right:5px" alt="share"
  21. srcset="">
  22. </button>
  23. </view>
  24. <view class="details-price2">
  25. <text class="details-price-item">{{detailInfo.name}}</text>
  26. <button class="details-price-share share-btn" open-type="share" @click="sharePage">分享</button>
  27. </view>
  28. </view>
  29. <view class="details-banner">
  30. <view class="details-banner-item">
  31. <!-- <img src="../../static/images/details/right.svg" alt="right">
  32. <text>全程直播</text> -->
  33. <img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/second_stage/spzb.png"
  34. style="width: 96px;" mode="widthFix" alt="">
  35. </view>
  36. <view class="details-banner-item">
  37. <img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/second_stage/fwdj.png"
  38. style="width: 109px;" mode="widthFix" alt="">
  39. <!-- <img src="../../static/images/details/right.svg" alt="right">
  40. <text>1v1服务</text> -->
  41. </view>
  42. <view class="details-banner-item">
  43. <img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/second_stage/kspp.png"
  44. style="width: 96px;" mode="widthFix" alt="">
  45. <!-- <img src="../../static/images/details/right.svg" alt="right">
  46. <text>及时匹配</text> -->
  47. </view>
  48. </view>
  49. <view class="details-img">
  50. <img :src="detailInfo.detailPic" style="width: 100%;" mode="widthFix" show-menu-by-longpress />
  51. </view>
  52. </view>
  53. <view class="details-subscribe">
  54. <button v-if="isMember" class="details-btn" @click="goSubscribe">去预约</button>
  55. <button v-else class="details-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">去预约</button>
  56. </view>
  57. <Kefu></Kefu>
  58. </view>
  59. </template>
  60. <script>
  61. import { setToken,getToken,getOpenIdKey } from '@/utils/auth'
  62. import Kefu from '../common/kefu.vue'
  63. import {
  64. getProductDetails,
  65. getPhoneNumber
  66. } from '@/api/system/user.js'
  67. export default {
  68. data() {
  69. return {
  70. currentProductId: '',
  71. isAgree: false,
  72. code: '',
  73. detailInfo: {},
  74. skus: null,
  75. slideshow: [],
  76. isMember:false
  77. };
  78. },
  79. components:{
  80. Kefu
  81. },
  82. mounted() {
  83. // this.currentProductId = this.$globalData.selectedProductId;
  84. console.log(this.currentProductId);
  85. this.getDetailInfo();
  86. },
  87. methods: {
  88. getDetailInfo() {
  89. getProductDetails(this.currentProductId).then(response => {
  90. this.detailInfo = response.product
  91. this.skus = response.skus
  92. if(response.product&&response.product.albumPics){
  93. this.slideshow = response.product.albumPics.split(",")
  94. }
  95. })
  96. },
  97. sharePage() {
  98. uni.shareAppMessage({
  99. title: '猫妈狗爸',
  100. path: `/pages/details/detail?id=${this.currentProductId}`,
  101. imageUrl: this.detailInfo.pic
  102. })
  103. },
  104. changeAgree() {
  105. console.log(this.isAgree);
  106. if (this.isAgree) {
  107. this.isAgree = false
  108. } else {
  109. this.isAgree = true
  110. }
  111. },
  112. goSubscribe() {
  113. if (this.skus) {
  114. let productSku = {
  115. "skuId": this.skus[0].id,
  116. "quantity": 1
  117. }
  118. this.$globalData.newOrderData={
  119. currentAddress:{},
  120. currentPets:[],
  121. totalPrice:0,
  122. needPreFamiliarize:[]
  123. }
  124. this.$globalData.mainSku = [productSku]
  125. uni.navigateTo({
  126. url: `/pages/newOrder/serviceNew`
  127. // url: `/pages/details/service?price=${this.detailInfo.price}`
  128. });
  129. }else{
  130. this.$modal.showToast('产品SKU有误,请联系系统管理员');
  131. }
  132. },
  133. init() {
  134. this.$globalData.itemPrice = []
  135. this.$globalData.submitData = {
  136. "phone": "",
  137. "wechatId": "",
  138. "note": "",
  139. "totalPrice": "",
  140. "address": {
  141. "province": "上海市",
  142. "city": "上海市",
  143. "district": "",
  144. "detailAddress": ""
  145. },
  146. "skuList": [],
  147. "service": {
  148. "serviceFrequency": "once_a_day",
  149. "serviceDate": [],
  150. "serviceTimeFirst": "",
  151. "serviceTimeSecond": "",
  152. "pet": []
  153. }
  154. }
  155. },
  156. onGetPhoneNumber(e){
  157. if(e.detail.errMsg=="getPhoneNumber:fail user deny"){ //用户拒绝授权
  158. //拒绝授权后弹出一些提示
  159. }else{ //允许授权
  160. if(getOpenIdKey()){
  161. this.getPhoneNumber({"openId":getOpenIdKey(),"code":e.detail.code})
  162. }
  163. }
  164. },
  165. getPhoneNumber(data){
  166. getPhoneNumber(data).then(res=>{
  167. if(res&&res.code==200){
  168. let token = res.data.token
  169. setToken(token)
  170. this.isMember=true
  171. this.goSubscribe()
  172. } else{
  173. uni.showToast({
  174. icon:'error',
  175. title:'获取手机号失败'
  176. })
  177. }
  178. })
  179. }
  180. },
  181. onLoad: function(option) {
  182. this.init();
  183. this.currentProductId = option.id || 63;
  184. this.isMember= getToken()?true:false
  185. },
  186. onShareAppMessage(res) {
  187. if (res.from === 'button') { // 来自页面内分享按钮
  188. console.log(res.target)
  189. }
  190. return {
  191. title: '猫妈狗爸',
  192. path: `/pages/details/detail?id=${this.currentProductId}`,
  193. imageUrl: this.detailInfo.pic
  194. }
  195. }
  196. }
  197. </script>
  198. <style lang="scss">
  199. .container {
  200. position: relative;
  201. height: 100%;
  202. padding-bottom: 58px;
  203. .details-subscribe {
  204. background-color: #FFFFFF;
  205. padding: 10px;
  206. width: 100%;
  207. height: 58px;
  208. position: fixed;
  209. bottom: 0;
  210. z-index: 100;
  211. .details-btn {
  212. width: 100%;
  213. border-radius: 6px;
  214. background: #FFB13F;
  215. font-size: 16px;
  216. color: #FFFFFF;
  217. }
  218. }
  219. }
  220. .details-container {
  221. .share-btn {
  222. margin: 0;
  223. border: 0;
  224. padding: 0 !important;
  225. background: #fff;
  226. border-color: #fff;
  227. display: flex;
  228. border-radius: 0px;
  229. }
  230. .share-btn::after {
  231. border: none;
  232. }
  233. .details-price {
  234. background: #FFFFFF;
  235. padding: 10px 19px 15px;
  236. margin-top: -5px;
  237. .details-price1 {
  238. display: flex;
  239. justify-content: space-between;
  240. align-items: baseline;
  241. .details-price-normal {
  242. color: #FF530A;
  243. font-size: 16px;
  244. font-style: normal;
  245. font-weight: bold;
  246. line-height: normal;
  247. .details-price-big {
  248. font-size: 24px;
  249. }
  250. }
  251. }
  252. .details-price2 {
  253. display: flex;
  254. justify-content: space-between;
  255. align-items: center;
  256. margin-top: 5px;
  257. .details-price-item {
  258. color: #333;
  259. font-size: 18px;
  260. font-weight: bold;
  261. line-height: 16px;
  262. /* 100% */
  263. margin-left: 5px;
  264. }
  265. .details-price-share {
  266. color: #666;
  267. font-size: 14px;
  268. font-weight: 400;
  269. line-height: 13px;
  270. /* 92.857% */
  271. }
  272. }
  273. }
  274. .details-banner {
  275. width: 100%;
  276. height: 36px;
  277. background-color: #FFF8DF;
  278. display: flex;
  279. justify-content: space-around;
  280. .details-banner-item {
  281. display: flex;
  282. justify-content: space-between;
  283. align-items: center;
  284. font-size: 12px;
  285. line-height: 13px;
  286. color: #A94F20;
  287. img {
  288. width: 13px;
  289. }
  290. }
  291. }
  292. .details-img {
  293. background: #F5F5F7;
  294. padding: 10px;
  295. }
  296. }
  297. </style>