tuwen.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  1. <template>
  2. <div class="module-item-tuwen" :style="!module.base.m ? 'margin-top:0' : ''">
  3. <div class="item-tuwen-con">
  4. <moduleBg :base="module.base" />
  5. <!--开通会员样式一-->
  6. <block v-if="module.link.type==3&&module.link.n=='openMenber'">
  7. <!-- 已经开通会员 -->
  8. <!-- #ifdef MP-WEIXIN -->
  9. <block v-if="userInfo.mobile">
  10. <div class="item-tuwen-style1" :style="!module.base.m ? 'padding:0':''" @click="onGetphone" v-if="module.base.s == 0">
  11. <p class="tit" v-if="module.title.s">
  12. <moduleText :text="module.title" />
  13. </p>
  14. <div class="item" :style="!module.base.m ? 'margin:0' : ''">
  15. <p v-if="module.img">
  16. <image :style="style" :src="module.img" />
  17. </p>
  18. <p v-else><img :src="$util.icon('img.jpg')" alt=""></p>
  19. <div class="note" v-if="module.note.s">
  20. <moduleText :text="module.note" />
  21. </div>
  22. </div>
  23. </div>
  24. <!--样式二-->
  25. <div @click="onGetphone" class="item-tuwen-style2" :style="!module.base.m ? 'padding:0':''" v-if="module.base.s == 1">
  26. <div class="item" :style="!module.base.m ? 'margin:0' : ''">
  27. <p v-if="module.img">
  28. <image :style="style" :src="module.img" />
  29. </p>
  30. <p v-else>
  31. <image :style="style" :src="$util.icon('img.jpg')" alt="">
  32. </p>
  33. <p class="tit" v-if="module.title.s">
  34. <moduleText :text="module.title" />
  35. </p>
  36. <div class="note" v-if="module.note.s">
  37. <moduleText :text="module.note" />
  38. </div>
  39. </div>
  40. </div>
  41. </block>
  42. <block v-else>
  43. <!-- 样式一 -->
  44. <button class="item-tuwen-style1" hover-class="none" :style="!module.base.m ? 'padding:0':''" open-type="getPhoneNumber" @getphonenumber="onGetphoneNumber"
  45. v-if="module.base.s == 0">
  46. <p class="tit" v-if="module.title.s">
  47. <moduleText :text="module.title" />
  48. </p>
  49. <div class="item" :style="!module.base.m ? 'margin:0' : ''">
  50. <p v-if="module.img">
  51. <image :style="style" :src="module.img" />
  52. </p>
  53. <p v-else><img :src="$util.icon('img.jpg')" alt=""></p>
  54. <div class="note" v-if="module.note.s">
  55. <moduleText :text="module.note" />
  56. </div>
  57. </div>
  58. </button>
  59. <!--样式二-->
  60. <button open-type="getPhoneNumber" hover-class="none" @getphonenumber="onGetphoneNumber" class="item-tuwen-style2" :style="!module.base.m ? 'padding:0':''"
  61. v-if="module.base.s == 1">
  62. <div class="item" :style="!module.base.m ? 'margin:0' : ''">
  63. <p v-if="module.img">
  64. <image :style="style" :src="module.img" />
  65. </p>
  66. <p v-else>
  67. <image :style="style" :src="$util.icon('img.jpg')" alt="">
  68. </p>
  69. <p class="tit" v-if="module.title.s">
  70. <moduleText :text="module.title" />
  71. </p>
  72. <div class="note" v-if="module.note.s">
  73. <moduleText :text="module.note" />
  74. </div>
  75. </div>
  76. </button>
  77. </block>
  78. <!-- #endif -->
  79. <!-- #ifdef MP-ALIPAY -->
  80. <div class="item-tuwen-style1" :style="!module.base.m ? 'padding:0':''" @click="onGetphone" v-if="module.base.s == 0">
  81. <p class="tit" v-if="module.title.s">
  82. <moduleText :text="module.title" />
  83. </p>
  84. <div class="item" :style="!module.base.m ? 'margin:0' : ''">
  85. <p v-if="module.img">
  86. <image :style="style" :src="module.img" />
  87. </p>
  88. <p v-else><img :src="$util.icon('img.jpg')" alt=""></p>
  89. <div class="note" v-if="module.note.s">
  90. <moduleText :text="module.note" />
  91. </div>
  92. </div>
  93. </div>
  94. <!--样式二-->
  95. <div @click="onGetphone" class="item-tuwen-style2" :style="!module.base.m ? 'padding:0':''" v-if="module.base.s == 1">
  96. <div class="item" :style="!module.base.m ? 'margin:0' : ''">
  97. <p v-if="module.img">
  98. <image :style="style" :src="module.img" />
  99. </p>
  100. <p v-else>
  101. <image :style="style" :src="$util.icon('img.jpg')" alt="">
  102. </p>
  103. <p class="tit" v-if="module.title.s">
  104. <moduleText :text="module.title" />
  105. </p>
  106. <div class="note" v-if="module.note.s">
  107. <moduleText :text="module.note" />
  108. </div>
  109. </div>
  110. </div>
  111. <!-- #endif -->
  112. </block>
  113. <!-- 默认样式 -->
  114. <block v-else>
  115. <view @click="$util.openOnly(module.link)" :style="!module.base.m ? 'padding:0':''"
  116. :url="module.link.n" class="item-tuwen-style1" v-if="module.base.s == 0">
  117. <p class="tit" v-if="module.title.s">
  118. <moduleText :text="module.title" />
  119. </p>
  120. <div class="item" :style="!module.base.m ? 'margin:0' : ''">
  121. <p v-if="module.img">
  122. <image :style="style" :src="module.img" />
  123. </p>
  124. <p v-else><img :style="style" :src="$util.icon('img.jpg')" alt=""></p>
  125. <div class="note" v-if="module.note.s">
  126. <moduleText :text="module.note" />
  127. </div>
  128. </div>
  129. </view>
  130. <!--样式二-->
  131. <view @click="$util.openOnly(module.link)" class="item-tuwen-style2" :style="!module.base.m ? 'padding:0':''" :url="module.link.n" v-if="module.base.s == 1">
  132. <div class="item" :style="!module.base.m ? 'margin:0' : ''">
  133. <p v-if="module.img">
  134. <image :style="style" :src="module.img" />
  135. </p>
  136. <p v-else>
  137. <image :style="style" :src="$util.icon('img.jpg')" alt="">
  138. </p>
  139. <p class="tit" v-if="module.title.s">
  140. <moduleText :text="module.title" />
  141. </p>
  142. <div class="note" v-if="module.note.s">
  143. <moduleText :text="module.note" />
  144. </div>
  145. </div>
  146. </view>
  147. </block>
  148. </div>
  149. <Vphone :getPhonePop="getPhonePop" @close="setClose"></Vphone>
  150. </div>
  151. </template>
  152. <script>
  153. import moduleBg from './bg.vue';
  154. import moduleText from './text.vue';
  155. import Vphone from '@/components/v-phone/v-phone.vue';
  156. let hideLoading = true;
  157. import {
  158. mapState,
  159. mapMutations
  160. } from 'vuex'
  161. export default {
  162. props: ['module'],
  163. components: {
  164. moduleBg,
  165. moduleText,
  166. Vphone
  167. },
  168. data() {
  169. return {
  170. getPhonePop: false,
  171. };
  172. },
  173. computed: {
  174. ...mapState(['systemInfo', 'setColor', 'store_id', 'userInfo', 'teen_index', 'address']),
  175. style() {
  176. if (this.module.note.h) {
  177. let style = `height:${this.module.note.h}px;`
  178. return style;
  179. }
  180. }
  181. },
  182. mounted() {
  183. },
  184. methods: {
  185. // 子组件传参
  186. setClose(e) {
  187. this.getPhonePop = e;
  188. },
  189. onGetphoneNumber(e) {
  190. if (this.userInfo.mobile) {
  191. uni.showToast({
  192. title: "您已经完善过会员信息了,无需重复操作!",
  193. icon: 'none'
  194. })
  195. return
  196. }
  197. // #ifdef MP-WEIXIN
  198. if (e.detail.errMsg == "getPhoneNumber:ok") {
  199. this.$http.request('xcx/Jiemi', {
  200. id: this.userInfo.id,
  201. data: e.detail.encryptedData,
  202. iv: e.detail.iv,
  203. sessionKey: uni.getStorageSync('user_xcx_info').session_key,
  204. store_id: this.store_id,
  205. }, "", "", hideLoading).then(res => {
  206. this.phoneNumber = res.data.phoneNumber;
  207. uni.setStorageSync('phone', res.data.phoneNumber);
  208. uni.showModal({
  209. title: '授权成功',
  210. content: '享受更多优惠!',
  211. showCancel: false,
  212. cancelText: '',
  213. confirmText: '确定',
  214. success: res => {
  215. let subscribe = uni.getStorageSync('balance_subscribe');
  216. uni.requestSubscribeMessage({
  217. tmplIds: [subscribe.member_tid],
  218. success: (r) => {
  219. // console.log(r, "success")
  220. },
  221. complete: (r) => {
  222. // console.log(r, "complete")
  223. uni.switchTab({
  224. url: "../my/my"
  225. })
  226. }
  227. })
  228. },
  229. fail: () => {},
  230. complete: () => {}
  231. });
  232. })
  233. } else {
  234. uni.showToast({
  235. title: "授权失败,请重新授权",
  236. icon: 'none'
  237. })
  238. }
  239. // #endif
  240. },
  241. // 开启会员弹窗
  242. onGetphone(e) {
  243. if (this.userInfo.mobile) {
  244. uni.showToast({
  245. title: "您已经完善过会员信息了,无需重复操作!",
  246. icon: 'none'
  247. })
  248. return
  249. }
  250. this.getPhonePop = true;
  251. },
  252. }
  253. };
  254. </script>
  255. <style lang="less" scoped>
  256. /***图文模块***/
  257. .module-item-tuwen{ margin-top:10px; position: relative; .mg0{ margin-top:0;}
  258. .item-tuwen-con{ position: relative; overflow: hidden;}
  259. .item-tuwen-style1{ position: relative; z-index: 1; padding:10px 0; overflow: hidden;
  260. .tit{ white-space: nowrap; font-size:14px; padding:10px; text-align:center; overflow: hidden; text-overflow: ellipsis;}
  261. .item{ margin:0 10px; position: relative; overflow: hidden;width:auto;
  262. image{ display:block; height:150px; width:100%;}
  263. .note{ line-height:18px; color:#fff; background:rgba(0,0,0,0.5); position: absolute; bottom:0;
  264. padding:6px 10px; width:100%;}
  265. }
  266. }
  267. .item-tuwen-style2{ position: relative; display:flex; flex-wrap: wrap; z-index: 1; padding:10px 0; overflow: hidden;
  268. .item{ margin:0 10px;width:100%;
  269. image{ display:block; height:150px; width:100%;}
  270. .tit{ white-space: nowrap; font-size:14px; padding-top:10px; text-align:center; overflow: hidden; text-overflow: ellipsis;}
  271. .note{ line-height:20px; color:#999; padding:6px 10px;}
  272. }
  273. }
  274. }
  275. /* 去除button默认样式 */
  276. button::after {
  277. border: none;
  278. }
  279. button {
  280. background-color: transparent;
  281. padding-left: 0;
  282. padding-right: 0;
  283. line-height: inherit;
  284. }
  285. button {
  286. border-radius: 0;
  287. }
  288. </style>