金诚优选前端代码
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.

281 lines
7.5 KiB

  1. <template>
  2. <view id="on-detail" v-if="init">
  3. <view class="coupon" @tap="changeShare">
  4. <view class="coupon-left" :class="is_coupon != 1 ? 'discount' : ''" :style="'background: ' + config.mainColor">
  5. <view class="text-wrap">
  6. <view class="text-box">
  7. <view class="text">
  8. <text class="money" v-if="detail.action_type.type == 'cash'"></text>
  9. <span>{{ detail.action_type.value }}</span>
  10. <text class="money" v-if="detail.action_type.type == 'discount'"></text>
  11. </view>
  12. <text class="label text">{{ detail.label }}</text>
  13. </view>
  14. </view>
  15. <view class="dot-wrap">
  16. <view class="dot-item">
  17. </view>
  18. <view class="dot-item">
  19. </view>
  20. <view class="dot-item">
  21. </view>
  22. <view class="dot-item">
  23. </view>
  24. <view class="dot-item">
  25. </view>
  26. <view class="dot-item">
  27. </view>
  28. <view class="dot-item">
  29. </view>
  30. <view class="dot-item">
  31. </view>
  32. </view>
  33. </view>
  34. <view class="coupon-right">
  35. <view class="top">
  36. <span class="type">
  37. <span v-if="detail.channel == 'ec'">商城</span>
  38. <span v-else>门店</span>
  39. </span>
  40. <text class="info">{{detail.title}}</text>
  41. </view>
  42. <view class="bottom">
  43. <view class="bottom-use">
  44. <view class="tiem-box">
  45. <text>{{detail.use_start_time}}{{detail.use_end_time}}</text>
  46. </view>
  47. </view>
  48. </view>
  49. <view class="share mx-1px-top" v-if="detail.agent_code">
  50. <view class="text">
  51. <i class="iconfont icon-fenxianganniu"></i>
  52. <view>分享优惠券</view>
  53. </view>
  54. <view class="iconfont icon-jiantou">
  55. </view>
  56. </view>
  57. </view>
  58. </view>
  59. <view class="detail-item user-info" v-if="detail.intro">
  60. <view class="title">
  61. 使用说明
  62. </view>
  63. <view class="info mx-1px-top">
  64. {{detail.intro}}
  65. </view>
  66. </view>
  67. <view class="button-box" :style="'background: ' + config.mainColor" v-if="is_coupon == 1 && detail.agent_code">
  68. <view class="btn" @tap="changeShare">
  69. 点击分享
  70. </view>
  71. </view>
  72. <!--弹出分享部分-->
  73. <view class="maks" :class="show_share ? 'cur' : ''" @tap="changeShare">
  74. </view>
  75. <view class="share-box" :class="show_share ? 'cur' : ''">
  76. <!-- #ifdef MP-WEIXIN -->
  77. <button class="shaer-item" open-type="share">
  78. 分享给好友
  79. </button>
  80. <!-- #endif -->
  81. <!-- #ifdef APP-PLUS -->
  82. <button class="shaer-item" @click="shareapp">
  83. 分享给好友
  84. </button>
  85. <!-- #endif -->
  86. <view class="shaer-item mx-1px-top" @tap="getShearImg">
  87. 生成海报
  88. </view>
  89. <view class="shaer-item clear" @tap="changeShare">
  90. 取消
  91. </view>
  92. </view>
  93. </view>
  94. </template>
  95. <script>
  96. import {pageLogin, getUrl,config,is} from '@/common/js/utils.js';
  97. export default {
  98. data() {
  99. return {
  100. detail: '',
  101. is_coupon: 1,
  102. // 用于判断是否为优惠券 1:优惠券 0:促销折扣
  103. init: false,
  104. show_share: false,
  105. config: ''
  106. };
  107. },
  108. onShareAppMessage() {
  109. this.setData({
  110. show_share: false
  111. });
  112. return {
  113. title: this.detail.title,
  114. path: '/pages/coupon/onDetail/onDetail?id=' + this.id + '&is_coupon=1&agent_code=' + this.detail.agent_code
  115. };
  116. },
  117. onLoad(e) {
  118. // 第三方平台配置颜色
  119. var gbConfig = this.$cookieStorage.get('globalConfig') || '';
  120. var id = e.id;
  121. this.id = id;
  122. this.config = gbConfig;
  123. this.queryCouponDetail(id);
  124. },
  125. methods: {
  126. // 分享给app的好友
  127. shareapp(){
  128. this.setData({
  129. show_share: false
  130. });
  131. var title = this.detail.title;
  132. var id = this.id;
  133. var agent_code = this.detail.agent_code;
  134. uni.getProvider({
  135. service:'share',
  136. success:function(res){
  137. uni.share({
  138. provider: "weixin",
  139. scene: "WXSceneSession",
  140. type: 5,
  141. title:title,
  142. imageUrl:'https://cdn.guojiang.club/guojiang_logo.png',
  143. miniProgram:{
  144. id:'gh_72e65196278a',
  145. path:'pages/coupon/onDetail/onDetail?id=' + id + '&is_coupon=1&agent_code=' + agent_code,
  146. type:0,
  147. webUrl: 'https://guojiang.club'
  148. },
  149. success: function (res) {
  150. console.log("success:" + JSON.stringify(res));
  151. },
  152. fail: function (err) {
  153. console.log("fail:" + JSON.stringify(err));
  154. }
  155. });
  156. }
  157. })
  158. },
  159. changeShare() {
  160. this.setData({
  161. show_share: !this.show_share
  162. });
  163. },
  164. //生成海报
  165. getShearImg() {
  166. wx.navigateTo({
  167. url: '/pages/distribution/shareImg/shareImg?id=' + this.id + '&channel=' + this.detail.channel
  168. });
  169. this.changeShare();
  170. },
  171. // 查询优惠券详情
  172. queryCouponDetail(id) {
  173. wx.showLoading({
  174. title: "加载中",
  175. mask: true
  176. });
  177. var token = this.$cookieStorage.get('user_token');
  178. this.$http.get({
  179. api: 'api/discount/' + id + '/detail',
  180. data: {
  181. is_agent: 1
  182. },
  183. header: {
  184. Authorization: token
  185. }
  186. }).then(res => {
  187. res = res.data;
  188. if (res.status) {
  189. this.setData({
  190. detail: res.data,
  191. init: true
  192. });
  193. if (!res.data.agent_code) {
  194. wx.showModal({
  195. content: '当前用户非分销员',
  196. showCancel: false,
  197. success: res => {
  198. if (res.confirm || !res.cancel && !res.confirm) {
  199. wx.navigateBack({
  200. delta: 1
  201. });
  202. }
  203. }
  204. });
  205. this.setData({
  206. init: false
  207. });
  208. wx.hideShareMenu();
  209. }
  210. } else {
  211. wx.hideShareMenu();
  212. wx.showModal({
  213. content: res.message || '请求失败',
  214. showCancel: false
  215. });
  216. }
  217. wx.hideLoading();
  218. }).catch(rej => {
  219. wx.hideShareMenu();
  220. wx.hideLoading();
  221. wx.showModal({
  222. content: '请求失败',
  223. showCancel: false
  224. });
  225. });
  226. },
  227. setData: function (obj) {
  228. let that = this;
  229. let keys = [];
  230. let val, data;
  231. Object.keys(obj).forEach(function (key) {
  232. keys = key.split('.');
  233. val = obj[key];
  234. data = that.$data;
  235. keys.forEach(function (key2, index) {
  236. if (index + 1 == keys.length) {
  237. that.$set(data, key2, val);
  238. } else {
  239. if (!data[key2]) {
  240. that.$set(data, key2, {});
  241. }
  242. }
  243. data = data[key2];
  244. });
  245. });
  246. }
  247. }
  248. };
  249. </script>
  250. <style rel="stylesheet/less" lang="less">
  251. @import "onDetail";
  252. </style>